@ -2,9 +2,12 @@
import { Tooltip , type TooltipSize , type TooltipVariant } from '$uix/eidos/components/tooltip';
import { compileMorfo } from '$uix/morfo';
import { tooltipMorfo } from '@/uix/morfo/components/tooltip';
import { getActiveUix } from '$active-uix';
import type { Side , Align } from '$soma/layers/floating';
import { page } from '$app/state';
const uix = getActiveUix();
const params = page.url.searchParams;
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
@ -174,7 +177,7 @@
Short, contextual help anchored to a trigger. Appears on hover or focus, dismisses on blur or
Escape. Three variants — < code > solid< / code > , < code > outline< / code > , < code > ghost< / code > . Group
coordinates instant re-open across siblings. Honours < code > prefers-reduced-motion< / code > .
Presence-only — no sema events.
Presence-driven — open / close / close-dismiss edges are surfaced as sema events.
< / p >
< div data-uix-page-meta >
< span data-uix-meta-pill
@ -182,7 +185,7 @@
>
< span data-uix-meta-pill > < span data-uix-meta-key > variants< / span > 3< / span >
< span data-uix-meta-pill > < span data-uix-meta-key > sizes< / span > 3< / span >
< span data-uix-meta-pill span data-uix-meta-key > events< / span > 0< span >
< span data-uix-meta-pill span data-uix-meta-key >events</ span > { events . length } < /span >
< span data-uix-meta-pill >
< span data-uix-meta-key > apg< / span >
< a href = { tooltipMorfo . apg } target="_blank" rel = "noreferrer" > tooltip ↗</ a >
@ -272,7 +275,8 @@
< p data-uix-section-desc >
Props grouped by layer: < span data-uix-layer-badge = "soma" > soma< / span > headless behavior +
Floating layer positioning, < span data-uix-layer-badge = "eidos" > eidos< / span > visual treatment.
Tooltip declares 0 sema events (presence-only via Floating + Dismissal).
Tooltip's presence-driven events (open / close / close-dismiss) live in the morfo;
see the Morfo and Sema tabs for the table + Play buttons.
< / p >
< div data-uix-subsection-head >
@ -654,8 +658,8 @@
< span data-uix-layer-badge = "morfo" > morfo< / span > · declarative contract
< / h2 >
< p data-uix-section-desc >
Source: < code > src/uix/morfo/components/tooltip.ts< / code > . Tooltip declares 0 events —
lifecycle is presence-only via Floating + Dismissal layers.
Source: < code > src/uix/morfo/components/tooltip.ts< / code > . Presence-driven —
open / close / close-dismiss edges flow through Floating + Dismissal layers.
< / p >
< div data-uix-table-wrap >
@ -679,7 +683,7 @@
>< td class = "name" > parts.length</ td >< td class = "default" > { tooltipMorfo . parts . length } < /td
>< /tr
>
< tr td class = "name" < td > td class = "default" > 0< / td > < tr >
< tr td class = "name" < /td > <td class = "default" >{ events . length } </ td >< /tr >
< / tbody >
< / table >
< / div >
@ -797,7 +801,7 @@
>< tr
>< th > name< / th > < th > family< / th > < th > verb< / th > < th > sequence< / th > < th > intent< / th > < th
>target< /th
>< /tr
>< th > Play< / th > < /tr
>< /thead
>
< tbody >
@ -809,6 +813,22 @@
< td > { action . semantic . sequence ?? 'pre' } </ td >
< td class = "default" > —< / td >
< td > { action . target } </ td >
< td >
< button
data-uix-play
onclick={() => {
const target = (stageRef?.querySelector(
'[data-tooltip-content]'
) ?? stageRef?.querySelector('[data-tooltip-trigger]')) as HTMLElement | null;
if (!target) return;
void uix.events?.emit({
name: action.name,
family: action.semantic.family,
target
});
}}>▶ play< /button
>
< / td >
< / tr >
{ /each }
< / tbody >
@ -824,10 +844,52 @@
< span data-uix-layer-badge = "sema" > sema< / span > · events
< / h2 >
< p data-uix-section-desc >
This morfo declares no semantic events. If the component grows user-triggered perceptual
feedback, the event must be declared in Morfo first and surfaced here.
Tooltip is presence-only — the events below describe the open/close edges that the
dismissal + floating layers drive. They do not require any user-triggered action beyond
hover / focus. Use ▶ play to dispatch them against the live stage.
< / p >
< div data-uix-empty-state > No Sema events declared.< / div >
{ #if events . length }
< div data-uix-table-wrap >
< table data-uix-table >
< thead
>< tr
>< th > name< / th > < th > family< / th > < th > verb< / th > < th > sequence< / th > < th > target< / th > < th
>Play< /th
>< /tr
>< /thead
>
< tbody >
{ #each events as action }
< tr >
< td class = "name" > { action . name } </ td >
< td class = "type" > { action . semantic . family } </ td >
< td > { action . semantic . verb ?? '—' } </ td >
< td > { action . semantic . sequence ?? 'pre' } </ td >
< td > { action . target } </ td >
< td >
< button
data-uix-play
onclick={() => {
const target = (stageRef?.querySelector(
'[data-tooltip-content]'
) ?? stageRef?.querySelector('[data-tooltip-trigger]')) as HTMLElement | null;
if (!target) return;
void uix.events?.emit({
name: action.name,
family: action.semantic.family,
target
});
}}>▶ play< /button
>
< / td >
< / tr >
{ /each }
< / tbody >
< / table >
< / div >
{ : else }
< div data-uix-empty-state > No Sema events declared.< / div >
{ /if }
< / section >
{ /if }
