#132. Eidos wrapper + types + recipe + canonical-depth demo. 7 parts: Provider, List, Item, Trigger, Content, Link, Indicator. Soma owns active-item state, hover delays (openDelay/skipDelayDuration/closeDelay), hoverEnabled gate, loop arrow nav, data-motion directional swap, Indicator rect CSS vars. Eidos paints the bar + trigger chrome + Content panel + slide animations. Reference parity (no air baseline — port directly from soma): | Feature | soma | Radix | bits-ui | this port | |---|---|---|---|---| | Provider + List + Item + Trigger + Content + Link + Indicator | ✓ | ✓ | ✓ | ✓ | | Hover open (openDelay/skipDelayDuration/closeDelay) | ✓ | ✓ | ✓ | ✓ | | hoverEnabled (click-only mode) | ✓ | ⚠ | ✓ | ✓ | | orientation horizontal + vertical | ✓ | ✓ | ⚠ | ✓ | | dir / RTL | ✓ | ✓ | ✓ | ✓ | | Indicator CSS vars (x/y/w/h rect) | ✓ | ✗ | ✗ | ✓ | | data-motion directional swap (from-/to-start/end) | ✓ | ✓ | ⚠ | ✓ | | forceMount on Content + Indicator | ✓ | ✓ | ✓ | ✓ | | ARIA <nav> + translated aria-label | ✓ | ⚠ | ⚠ | ✓ | | Keyboard nav (Arrow/Home/End/Enter/Space/Esc, ArrowDown → Content) | ✓ | ✓ | ✓ | ✓ | | Sub (nested viewports) | ✗ | ✓ | ✓ | ⚠ deferred (matches soma) | | Viewport (shared swap pane) | ✗ | ✓ | ✓ | ⚠ deferred | | Modal variant (focus trap) | ✗ | ✓ | ✗ | ⚠ deferred | | SafePolygon hover bridge | ✗ | ✗ | ✗ | ⚠ deferred | Naming: matches soma's part names exactly. Both Trigger (button) and Link (anchor) stay native — NOT routed through <Button> — because top-nav has flat/borderless chrome distinct from action buttons. The Link automatically picks up `aria-current="page"` styling for the active route. Variant set: only `size: 'sm' | 'md' | 'lg'` (no xs/xl). No variant/color — NavigationMenu is chrome surface, not actionable intent. Fresh recipe — does NOT reuse dropdown-menu (floating click-driven) or menubar (roving tabindex bar). NavigationMenu lives inline in the page; per-item Content panels render via Floating but conceptually attach to the bar. Indicator is a 2px underline that slides via CSS vars (--navigation-menu-indicator-{x,y,w,h}) written by soma. Trigger chevron rotates on [data-state='open']. Content animates via data-motion directional slide on sibling swap. Sidebar entry added under Navigation (between Pagination and a future NavigationMenu entry). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>active-uix
parent
830025b4ad
commit
52627e60bb
@ -0,0 +1,71 @@
|
||||
// NavigationMenu — eidos compound API.
|
||||
//
|
||||
// import { NavigationMenu } from '$uix/eidos/components/navigation-menu';
|
||||
//
|
||||
// <NavigationMenu bind:value>
|
||||
// <NavigationMenu.List>
|
||||
// <NavigationMenu.Item value="products">
|
||||
// <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
|
||||
// <NavigationMenu.Content>
|
||||
// <p>Mega-menu content for Products</p>
|
||||
// </NavigationMenu.Content>
|
||||
// </NavigationMenu.Item>
|
||||
// <NavigationMenu.Item value="pricing">
|
||||
// <NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>
|
||||
// </NavigationMenu.Item>
|
||||
// </NavigationMenu.List>
|
||||
// <NavigationMenu.Indicator />
|
||||
// </NavigationMenu>
|
||||
//
|
||||
// Soma owns active-item state, hover delays (`openDelay` /
|
||||
// `skipDelayDuration` / `closeDelay`), `hoverEnabled`, loop nav,
|
||||
// `data-motion` directional swap, indicator rect CSS vars. Eidos paints
|
||||
// the bar + trigger chrome + Content panel + slide animations.
|
||||
//
|
||||
// Naming: matches soma's part names exactly. Both `Trigger` (button)
|
||||
// and `Link` (anchor) stay native — NOT routed through `<Button>` —
|
||||
// because top-nav has its own flat/borderless chrome distinct from
|
||||
// action buttons.
|
||||
//
|
||||
// v1 scope: matches soma. Defer `Viewport`, `Sub` (nested), modal
|
||||
// variant, SafePolygon (also out-of-scope in soma v1).
|
||||
import NavigationMenuRoot from './navigation-menu.svelte';
|
||||
import List from './navigation-menu-list.svelte';
|
||||
import Item from './navigation-menu-item.svelte';
|
||||
import Trigger from './navigation-menu-trigger.svelte';
|
||||
import Content from './navigation-menu-content.svelte';
|
||||
import Link from './navigation-menu-link.svelte';
|
||||
import Indicator from './navigation-menu-indicator.svelte';
|
||||
|
||||
type NavigationMenuNamespace = typeof NavigationMenuRoot & {
|
||||
List: typeof List;
|
||||
Item: typeof Item;
|
||||
Trigger: typeof Trigger;
|
||||
Content: typeof Content;
|
||||
Link: typeof Link;
|
||||
Indicator: typeof Indicator;
|
||||
};
|
||||
|
||||
const NavigationMenu = NavigationMenuRoot as NavigationMenuNamespace;
|
||||
NavigationMenu.List = List;
|
||||
NavigationMenu.Item = Item;
|
||||
NavigationMenu.Trigger = Trigger;
|
||||
NavigationMenu.Content = Content;
|
||||
NavigationMenu.Link = Link;
|
||||
NavigationMenu.Indicator = Indicator;
|
||||
|
||||
export { NavigationMenu };
|
||||
export default NavigationMenu;
|
||||
|
||||
export type {
|
||||
NavigationMenuProps,
|
||||
NavigationMenuListProps as ListProps,
|
||||
NavigationMenuItemProps as ItemProps,
|
||||
NavigationMenuTriggerProps as TriggerProps,
|
||||
NavigationMenuContentProps as ContentProps,
|
||||
NavigationMenuLinkProps as LinkProps,
|
||||
NavigationMenuIndicatorProps as IndicatorProps,
|
||||
NavigationMenuSize,
|
||||
NavigationMenuProviderSnippetProps,
|
||||
NavigationMenuItemSnippetProps
|
||||
} from './types';
|
||||
@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import * as NavigationMenu from '$soma/components/navigation-menu';
|
||||
import type { NavigationMenuContentProps } from './types';
|
||||
let { children, ...rest }: NavigationMenuContentProps = $props();
|
||||
</script>
|
||||
|
||||
<NavigationMenu.Content {...rest}>{@render children?.()}</NavigationMenu.Content>
|
||||
@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import * as NavigationMenu from '$soma/components/navigation-menu';
|
||||
import type { NavigationMenuIndicatorProps } from './types';
|
||||
let { children, ...rest }: NavigationMenuIndicatorProps = $props();
|
||||
</script>
|
||||
|
||||
<NavigationMenu.Indicator {...rest}>{@render children?.()}</NavigationMenu.Indicator>
|
||||
@ -0,0 +1,12 @@
|
||||
<script lang="ts">
|
||||
import * as NavigationMenu from '$soma/components/navigation-menu';
|
||||
import type { NavigationMenuItemProps } from './types';
|
||||
// Rename to dodge the `{#snippet children}` shadow trap.
|
||||
let { children: bodyContent, ...rest }: NavigationMenuItemProps = $props();
|
||||
</script>
|
||||
|
||||
<NavigationMenu.Item {...rest}>
|
||||
{#snippet children(snippetProps)}
|
||||
{@render bodyContent?.(snippetProps)}
|
||||
{/snippet}
|
||||
</NavigationMenu.Item>
|
||||
@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* Eidos `NavigationMenu.Link` — one-shot anchor that doesn't open a
|
||||
* Content panel. Stays a plain `<a>` (NOT `<Button>`) — link semantics
|
||||
* + `aria-current`. The recipe paints the anchor as an in-bar
|
||||
* trigger (transparent bg + hover tint) so it visually aligns with
|
||||
* sibling Triggers.
|
||||
*/
|
||||
import * as NavigationMenu from '$soma/components/navigation-menu';
|
||||
import type { NavigationMenuLinkProps } from './types';
|
||||
let { children, ...rest }: NavigationMenuLinkProps = $props();
|
||||
</script>
|
||||
|
||||
<NavigationMenu.Link {...rest}>{@render children?.()}</NavigationMenu.Link>
|
||||
@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import * as NavigationMenu from '$soma/components/navigation-menu';
|
||||
import type { NavigationMenuListProps } from './types';
|
||||
let { children, ...rest }: NavigationMenuListProps = $props();
|
||||
</script>
|
||||
|
||||
<NavigationMenu.List {...rest}>{@render children?.()}</NavigationMenu.List>
|
||||
@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* Eidos `NavigationMenu.Trigger` — flat in-bar trigger. Renders the
|
||||
* native `<button>` from soma directly (NOT `<Button>`) because
|
||||
* top-nav triggers need flat/borderless chrome distinct from action
|
||||
* buttons. Recipe paints transparent bg + hover/open tint + chevron
|
||||
* affordance.
|
||||
*/
|
||||
import * as NavigationMenu from '$soma/components/navigation-menu';
|
||||
import type { NavigationMenuTriggerProps } from './types';
|
||||
let { children, ...rest }: NavigationMenuTriggerProps = $props();
|
||||
</script>
|
||||
|
||||
<NavigationMenu.Trigger {...rest}>{@render children?.()}</NavigationMenu.Trigger>
|
||||
@ -0,0 +1,245 @@
|
||||
/*
|
||||
* NavigationMenu recipe — top-level site navigation with mega-menus.
|
||||
*
|
||||
* [data-navigation-menu] → root bar
|
||||
* [data-navigation-menu-list] → <ul> of items
|
||||
* [data-navigation-menu-item] → wrapper for each trigger+content pair
|
||||
* [data-navigation-menu-trigger] → in-bar button that opens Content
|
||||
* [data-navigation-menu-content] → mega-menu panel (per Item)
|
||||
* [data-navigation-menu-link] → one-shot anchor (no Content)
|
||||
* [data-navigation-menu-indicator] → arrow / underline tracking the active trigger
|
||||
*
|
||||
* Sizes — sm | md | lg via `data-size` on the root.
|
||||
*
|
||||
* Distinct from dropdown-menu (floating click-driven) and menubar
|
||||
* (roving tabindex bar). NavigationMenu is an INLINE list that
|
||||
* persists in the page chrome; per-item Content panels render via
|
||||
* Floating layer but are conceptually attached to the bar, not
|
||||
* portaled away.
|
||||
*/
|
||||
|
||||
[data-navigation-menu] {
|
||||
--_navigation-menu-trigger-px: var(--space-3);
|
||||
--_navigation-menu-list-gap: var(--space-1);
|
||||
--_navigation-menu-font-size: var(--font-size-sm);
|
||||
--_navigation-menu-radius: var(--radius-md);
|
||||
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--_navigation-menu-font-size);
|
||||
line-height: var(--leading-ui);
|
||||
}
|
||||
|
||||
[data-navigation-menu][data-size='sm'] {
|
||||
--_navigation-menu-trigger-px: var(--space-2);
|
||||
--_navigation-menu-list-gap: 0;
|
||||
--_navigation-menu-font-size: var(--font-size-xs);
|
||||
--_navigation-menu-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
[data-navigation-menu][data-size='lg'] {
|
||||
--_navigation-menu-trigger-px: var(--space-4);
|
||||
--_navigation-menu-list-gap: var(--space-2);
|
||||
--_navigation-menu-font-size: var(--font-size-md);
|
||||
--_navigation-menu-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
/* ── List ─ */
|
||||
[data-navigation-menu-list] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--_navigation-menu-list-gap);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
[data-navigation-menu][data-orientation='vertical'] [data-navigation-menu-list] {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* ── Item ─ */
|
||||
[data-navigation-menu-item] {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ── Trigger (and Link share the same in-bar chrome) ─ */
|
||||
[data-navigation-menu-trigger],
|
||||
[data-navigation-menu-link] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding-block: var(--space-2);
|
||||
padding-inline: var(--_navigation-menu-trigger-px);
|
||||
border: none;
|
||||
border-radius: var(--_navigation-menu-radius);
|
||||
background: transparent;
|
||||
color: var(--color-content-primary);
|
||||
font: inherit;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition:
|
||||
background var(--duration-fast) var(--ease-default),
|
||||
color var(--duration-fast) var(--ease-default);
|
||||
}
|
||||
|
||||
[data-navigation-menu-trigger]:hover:not([data-disabled]),
|
||||
[data-navigation-menu-link]:hover:not([data-disabled]) {
|
||||
background: var(--color-surface-overlay);
|
||||
}
|
||||
|
||||
[data-navigation-menu-trigger][data-state='open'],
|
||||
[data-navigation-menu-trigger][data-state='open']:hover {
|
||||
background: var(--color-primary-element);
|
||||
color: var(--color-content-primary);
|
||||
}
|
||||
|
||||
[data-navigation-menu-link][aria-current='page'],
|
||||
[data-navigation-menu-link][data-active] {
|
||||
background: var(--color-primary-element);
|
||||
color: var(--color-content-primary);
|
||||
}
|
||||
|
||||
[data-navigation-menu-trigger]:focus-visible,
|
||||
[data-navigation-menu-link]:focus-visible {
|
||||
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
[data-navigation-menu-trigger][data-disabled],
|
||||
[data-navigation-menu-link][data-disabled] {
|
||||
color: var(--color-content-muted);
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Trigger chevron — points down by default, rotates when open. */
|
||||
[data-navigation-menu-trigger]::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
inline-size: 0.5rem;
|
||||
block-size: 0.5rem;
|
||||
margin-inline-start: var(--space-1);
|
||||
border-block-end: 1.5px solid currentColor;
|
||||
border-inline-end: 1.5px solid currentColor;
|
||||
transform: translateY(-1px) rotate(45deg);
|
||||
opacity: 0.65;
|
||||
transition: transform var(--duration-fast) var(--ease-default);
|
||||
}
|
||||
|
||||
[data-navigation-menu-trigger][data-state='open']::after {
|
||||
transform: translateY(2px) rotate(-135deg);
|
||||
}
|
||||
|
||||
/* ── Content panel (mega-menu) ─
|
||||
*
|
||||
* Soma renders Content via the Floating layer below the trigger. The
|
||||
* recipe paints the panel chrome (border, shadow, padding) and the
|
||||
* directional slide animation per `data-motion` (from / to).
|
||||
*/
|
||||
[data-navigation-menu-content] {
|
||||
min-inline-size: 14rem;
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-surface-overlay);
|
||||
color: var(--color-content-primary);
|
||||
box-shadow: var(--shadow-floating);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
[data-navigation-menu-content][data-state='open'] {
|
||||
animation: navigation-menu-enter var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
[data-navigation-menu-content][data-state='closed'] {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes navigation-menu-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px) scale(0.985);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* `data-motion` — soma writes 'from-start' / 'from-end' / 'to-start' /
|
||||
* 'to-end' when the active item swaps to a sibling. The directional
|
||||
* slide makes the swap feel like a horizontal scroll, not a flicker. */
|
||||
[data-navigation-menu-content][data-motion='from-start'] {
|
||||
animation: navigation-menu-from-start var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
[data-navigation-menu-content][data-motion='from-end'] {
|
||||
animation: navigation-menu-from-end var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
[data-navigation-menu-content][data-motion='to-start'] {
|
||||
animation: navigation-menu-to-start var(--duration-fast) var(--ease-default);
|
||||
}
|
||||
[data-navigation-menu-content][data-motion='to-end'] {
|
||||
animation: navigation-menu-to-end var(--duration-fast) var(--ease-default);
|
||||
}
|
||||
|
||||
@keyframes navigation-menu-from-start {
|
||||
from { opacity: 0; transform: translateX(-12px); }
|
||||
}
|
||||
@keyframes navigation-menu-from-end {
|
||||
from { opacity: 0; transform: translateX(12px); }
|
||||
}
|
||||
@keyframes navigation-menu-to-start {
|
||||
to { opacity: 0; transform: translateX(-12px); }
|
||||
}
|
||||
@keyframes navigation-menu-to-end {
|
||||
to { opacity: 0; transform: translateX(12px); }
|
||||
}
|
||||
|
||||
/* ── Indicator (underline under active Trigger) ─
|
||||
*
|
||||
* Soma writes the active-trigger rect into CSS vars on the indicator:
|
||||
* --navigation-menu-indicator-x / -y / -w / -h
|
||||
* The recipe consumes them to position a 2px underline that slides
|
||||
* between triggers. The indicator itself stays inside the navigation
|
||||
* bar; it's NOT in the floating layer.
|
||||
*/
|
||||
[data-navigation-menu-indicator] {
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
inset-block-end: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
inline-size: var(--navigation-menu-indicator-w, 0px);
|
||||
block-size: 2px;
|
||||
transform: translateX(var(--navigation-menu-indicator-x, 0px));
|
||||
background: var(--color-primary-solid);
|
||||
border-radius: 1px;
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform var(--duration-fast) var(--ease-default),
|
||||
inline-size var(--duration-fast) var(--ease-default),
|
||||
opacity var(--duration-fast) var(--ease-default);
|
||||
}
|
||||
|
||||
[data-navigation-menu-indicator][data-state='visible'] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
[data-navigation-menu-content],
|
||||
[data-navigation-menu-indicator] {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* Eidos `<NavigationMenu>` — top-level site navigation with mega-menus.
|
||||
*
|
||||
* <NavigationMenu bind:value>
|
||||
* <NavigationMenu.List>
|
||||
* <NavigationMenu.Item value="products">
|
||||
* <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
|
||||
* <NavigationMenu.Content>
|
||||
* …rich content (links, cards, etc.)
|
||||
* </NavigationMenu.Content>
|
||||
* </NavigationMenu.Item>
|
||||
* <NavigationMenu.Item value="pricing">
|
||||
* <NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>
|
||||
* </NavigationMenu.Item>
|
||||
* </NavigationMenu.List>
|
||||
* <NavigationMenu.Indicator />
|
||||
* </NavigationMenu>
|
||||
*
|
||||
* Soma owns active-item state, hover open/close timing
|
||||
* (`openDelay` / `skipDelayDuration` / `closeDelay`), `hoverEnabled`
|
||||
* gate, loop arrow nav, `data-motion` direction marker, the Indicator
|
||||
* rect CSS vars (`--navigation-menu-indicator-{x,y,w,h}`), `forceMount`
|
||||
* + dismissal. Eidos paints the bar + trigger states + Content panel
|
||||
* chrome — fresh recipe (does not reuse dropdown-menu or menubar
|
||||
* since NavigationMenu lives inline in the page, not in a floating
|
||||
* panel and not as a roving tabindex bar).
|
||||
*/
|
||||
import { ActiveEidos } from '$uix/eidos';
|
||||
import * as NavigationMenu from '$soma/components/navigation-menu';
|
||||
import type { NavigationMenuProps } from './types';
|
||||
|
||||
let {
|
||||
size = 'md',
|
||||
value = $bindable(null as string | null),
|
||||
children: bodyContent,
|
||||
...rest
|
||||
}: NavigationMenuProps = $props();
|
||||
|
||||
const eidos = ActiveEidos.require();
|
||||
const resolvedSize = $derived(eidos.resolve(size, 'md'));
|
||||
</script>
|
||||
|
||||
<NavigationMenu.Provider {...rest} bind:value data-size={resolvedSize}>
|
||||
{#snippet children(snippetProps)}
|
||||
{@render bodyContent?.(snippetProps)}
|
||||
{/snippet}
|
||||
</NavigationMenu.Provider>
|
||||
@ -0,0 +1,39 @@
|
||||
import type { ResponsiveProp, Size } from '$uix/eidos/lib/types';
|
||||
import type {
|
||||
ProviderProps,
|
||||
ListProps,
|
||||
ItemProps,
|
||||
TriggerProps,
|
||||
ContentProps,
|
||||
LinkProps,
|
||||
IndicatorProps,
|
||||
ProviderSnippetProps,
|
||||
ItemSnippetProps
|
||||
} from '$soma/components/navigation-menu';
|
||||
|
||||
/**
|
||||
* NavigationMenu visual size — three-step subset. Top navigation is
|
||||
* comfortable density by default; xs would crowd triggers, xl is rare
|
||||
* for chrome bars.
|
||||
*/
|
||||
export type NavigationMenuSize = Extract<Size, 'sm' | 'md' | 'lg'>;
|
||||
|
||||
export type NavigationMenuProps = ProviderProps & {
|
||||
/**
|
||||
* Visual size — drives trigger padding, list gap, font-size.
|
||||
* @default 'md'
|
||||
*/
|
||||
size?: ResponsiveProp<NavigationMenuSize>;
|
||||
};
|
||||
|
||||
export type NavigationMenuListProps = ListProps;
|
||||
export type NavigationMenuItemProps = ItemProps;
|
||||
export type NavigationMenuTriggerProps = TriggerProps;
|
||||
export type NavigationMenuContentProps = ContentProps;
|
||||
export type NavigationMenuLinkProps = LinkProps;
|
||||
export type NavigationMenuIndicatorProps = IndicatorProps;
|
||||
|
||||
export type {
|
||||
ProviderSnippetProps as NavigationMenuProviderSnippetProps,
|
||||
ItemSnippetProps as NavigationMenuItemSnippetProps
|
||||
};
|
||||
@ -0,0 +1,494 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
NavigationMenu,
|
||||
type NavigationMenuSize
|
||||
} from '$uix/eidos/components/navigation-menu';
|
||||
import { compileMorfo } from '$uix/morfo';
|
||||
import { navigationMenuMorfo } from '@/uix/morfo/components/navigation-menu';
|
||||
import { getActiveUix } from '$active-uix';
|
||||
|
||||
const uix = getActiveUix();
|
||||
|
||||
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
|
||||
let tab = $state<Tab>('live');
|
||||
|
||||
// ── Live state ────────────────────────────────────────────────────────
|
||||
let value = $state<string | null>(null);
|
||||
let size = $state<NavigationMenuSize>('md');
|
||||
let orientation = $state<'horizontal' | 'vertical'>('horizontal');
|
||||
let openDelay = $state(200);
|
||||
let skipDelayDuration = $state(100);
|
||||
let closeDelay = $state(300);
|
||||
let hoverEnabled = $state(true);
|
||||
let loop = $state(true);
|
||||
|
||||
type TraceEntry = { event: string; family: string; intent?: string; at: number };
|
||||
let trace = $state<TraceEntry[]>([]);
|
||||
let stageRef = $state<HTMLElement | null>(null);
|
||||
|
||||
$effect(() => {
|
||||
const el = stageRef;
|
||||
if (!el) return;
|
||||
const obs = new MutationObserver((mutations) => {
|
||||
for (const m of mutations) {
|
||||
if (m.attributeName !== 'data-event') continue;
|
||||
const target = m.target as Element;
|
||||
const ev = target.getAttribute('data-event');
|
||||
if (!ev) continue;
|
||||
trace = [
|
||||
{
|
||||
event: ev,
|
||||
family: target.getAttribute('data-event-family') ?? '—',
|
||||
intent: target.getAttribute('data-event-intent') ?? undefined,
|
||||
at: Date.now()
|
||||
},
|
||||
...trace
|
||||
].slice(0, 6);
|
||||
}
|
||||
});
|
||||
obs.observe(el, { attributes: true, subtree: true, attributeFilter: ['data-event'] });
|
||||
return () => obs.disconnect();
|
||||
});
|
||||
|
||||
const compiled = compileMorfo(navigationMenuMorfo);
|
||||
const partsList = $derived([...compiled.parts.byKebab.values()]);
|
||||
const events = $derived([...compiled.actions.byName.values()]);
|
||||
|
||||
function fmtTime(at: number): string {
|
||||
const d = new Date(at);
|
||||
return `${String(d.getSeconds()).padStart(2, '0')}.${String(d.getMilliseconds()).padStart(3, '0')}`;
|
||||
}
|
||||
|
||||
const eidosSnippet = $derived(
|
||||
[
|
||||
"<script lang='ts'>",
|
||||
" import { NavigationMenu } from '$uix/eidos/components/navigation-menu';",
|
||||
' let value = $state<string | null>(null);',
|
||||
'</' + 'script>',
|
||||
'',
|
||||
'<NavigationMenu',
|
||||
' bind:value',
|
||||
size !== 'md' && ` size="${size}"`,
|
||||
orientation !== 'horizontal' && ` orientation="${orientation}"`,
|
||||
openDelay !== 200 && ` openDelay={${openDelay}}`,
|
||||
closeDelay !== 300 && ` closeDelay={${closeDelay}}`,
|
||||
!hoverEnabled && ' hoverEnabled={false}',
|
||||
!loop && ' loop={false}',
|
||||
'>',
|
||||
' <NavigationMenu.List>',
|
||||
' <NavigationMenu.Item value="products">',
|
||||
' <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>',
|
||||
' <NavigationMenu.Content>…</NavigationMenu.Content>',
|
||||
' </NavigationMenu.Item>',
|
||||
' <NavigationMenu.Item value="pricing">',
|
||||
' <NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>',
|
||||
' </NavigationMenu.Item>',
|
||||
' </NavigationMenu.List>',
|
||||
' <NavigationMenu.Indicator />',
|
||||
'</NavigationMenu>'
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join('\n')
|
||||
);
|
||||
</script>
|
||||
|
||||
<div data-uix-canvas-inner>
|
||||
<header>
|
||||
<div data-uix-eyebrow>Navigation · NavigationMenu</div>
|
||||
<h1 data-uix-page-title>NavigationMenu</h1>
|
||||
<p data-uix-page-lede>
|
||||
Top-level site navigation with mega-menus — a horizontal bar of
|
||||
Triggers, each potentially exposing a rich Content panel.
|
||||
One submenu open at a time; hover or focus on a sibling Trigger
|
||||
while another is open swaps Content without a close/re-open
|
||||
cycle. Soma owns active-item state + hover delays
|
||||
(<code>openDelay</code> / <code>skipDelayDuration</code> /
|
||||
<code>closeDelay</code>) + the indicator rect CSS vars +
|
||||
directional swap motion (<code>data-motion</code>).
|
||||
</p>
|
||||
<div data-uix-page-meta>
|
||||
<span data-uix-meta-pill>
|
||||
<span data-uix-meta-key>parts</span>{compiled.parts.order.length}
|
||||
</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>sizes</span>3
|
||||
</span>
|
||||
<span data-uix-meta-pill>
|
||||
<span data-uix-meta-key>active</span> {value ?? '—'}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div data-uix-stage>
|
||||
<div data-uix-stage-area bind:this={stageRef} style="min-block-size: 18rem; padding: var(--uix-space-3); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--uix-space-3);">
|
||||
<NavigationMenu
|
||||
bind:value
|
||||
{size}
|
||||
{orientation}
|
||||
{openDelay}
|
||||
{skipDelayDuration}
|
||||
{closeDelay}
|
||||
{hoverEnabled}
|
||||
{loop}
|
||||
>
|
||||
<NavigationMenu.List>
|
||||
<NavigationMenu.Item value="products">
|
||||
<NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
|
||||
<NavigationMenu.Content>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uix-space-3); min-inline-size: 24rem;">
|
||||
<a href="#" style="color: inherit; text-decoration: none;">
|
||||
<strong style="display: block;">Analytics</strong>
|
||||
<span style="color: var(--color-content-secondary); font-size: var(--font-size-xs);">Real-time insights from your data.</span>
|
||||
</a>
|
||||
<a href="#" style="color: inherit; text-decoration: none;">
|
||||
<strong style="display: block;">Workflows</strong>
|
||||
<span style="color: var(--color-content-secondary); font-size: var(--font-size-xs);">Automate repeating tasks.</span>
|
||||
</a>
|
||||
<a href="#" style="color: inherit; text-decoration: none;">
|
||||
<strong style="display: block;">Integrations</strong>
|
||||
<span style="color: var(--color-content-secondary); font-size: var(--font-size-xs);">Connect to your favourite tools.</span>
|
||||
</a>
|
||||
<a href="#" style="color: inherit; text-decoration: none;">
|
||||
<strong style="display: block;">API</strong>
|
||||
<span style="color: var(--color-content-secondary); font-size: var(--font-size-xs);">Build on the platform.</span>
|
||||
</a>
|
||||
</div>
|
||||
</NavigationMenu.Content>
|
||||
</NavigationMenu.Item>
|
||||
|
||||
<NavigationMenu.Item value="solutions">
|
||||
<NavigationMenu.Trigger>Solutions</NavigationMenu.Trigger>
|
||||
<NavigationMenu.Content>
|
||||
<div style="display: flex; flex-direction: column; gap: var(--uix-space-2); min-inline-size: 18rem;">
|
||||
<a href="#" style="color: inherit; text-decoration: none;">For startups</a>
|
||||
<a href="#" style="color: inherit; text-decoration: none;">For enterprise</a>
|
||||
<a href="#" style="color: inherit; text-decoration: none;">For agencies</a>
|
||||
<a href="#" style="color: inherit; text-decoration: none;">For non-profits</a>
|
||||
</div>
|
||||
</NavigationMenu.Content>
|
||||
</NavigationMenu.Item>
|
||||
|
||||
<NavigationMenu.Item value="pricing">
|
||||
<NavigationMenu.Link href="#pricing">Pricing</NavigationMenu.Link>
|
||||
</NavigationMenu.Item>
|
||||
|
||||
<NavigationMenu.Item value="docs">
|
||||
<NavigationMenu.Link href="#docs">Docs</NavigationMenu.Link>
|
||||
</NavigationMenu.Item>
|
||||
</NavigationMenu.List>
|
||||
<NavigationMenu.Indicator />
|
||||
</NavigationMenu>
|
||||
</div>
|
||||
<div data-uix-stage-trace>
|
||||
<span data-uix-stage-trace-key>trace</span>
|
||||
{#if trace.length === 0}
|
||||
<span>hover or focus a trigger to open a mega-menu</span>
|
||||
{:else}
|
||||
{#each trace.slice(0, 3) as entry (entry.at)}
|
||||
<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
|
||||
<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
|
||||
{/each}
|
||||
{/if}
|
||||
<span style="margin-inline-start: auto;">
|
||||
<span data-uix-stage-trace-key>value</span> {value ?? '—'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-uix-tabs role="tablist">
|
||||
<button data-uix-tab data-active={tab === 'live'} onclick={() => (tab = 'live')}>Live</button>
|
||||
<button data-uix-tab data-active={tab === 'api'} onclick={() => (tab = 'api')}>
|
||||
API <span data-uix-tab-count>7</span>
|
||||
</button>
|
||||
<button data-uix-tab data-active={tab === 'morfo'} onclick={() => (tab = 'morfo')}>
|
||||
<span data-uix-layer-badge="morfo">morfo</span>
|
||||
<span data-uix-tab-count>{partsList.length}p · {events.length}e</span>
|
||||
</button>
|
||||
<button data-uix-tab data-active={tab === 'sema'} onclick={() => (tab = 'sema')}>
|
||||
<span data-uix-layer-badge="sema">sema</span>
|
||||
<span data-uix-tab-count>{events.length}</span>
|
||||
</button>
|
||||
<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button>
|
||||
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
|
||||
</div>
|
||||
|
||||
{#if tab === 'live'}
|
||||
<section data-uix-section>
|
||||
<h2 data-uix-section-title>Controls</h2>
|
||||
|
||||
<div data-uix-subsection-head>
|
||||
<span data-uix-layer-badge="soma">soma</span> Provider props
|
||||
</div>
|
||||
<div data-uix-controls>
|
||||
<label data-uix-control>
|
||||
<span data-uix-control-label>value <span data-uix-control-hint>open item</span></span>
|
||||
<input type="text" value={value ?? ''} oninput={(e) => (value = e.currentTarget.value || null)} placeholder="(none)" />
|
||||
</label>
|
||||
<label data-uix-control>
|
||||
<span data-uix-control-label>orientation</span>
|
||||
<span data-uix-chips role="radiogroup">
|
||||
{#each ['horizontal', 'vertical'] as o (o)}
|
||||
<button data-uix-chip data-active={orientation === o} onclick={() => (orientation = o as typeof orientation)}>{o}</button>
|
||||
{/each}
|
||||
</span>
|
||||
</label>
|
||||
<label data-uix-control>
|
||||
<span data-uix-control-label>openDelay <span data-uix-control-hint>{openDelay}ms</span></span>
|
||||
<input type="range" min="0" max="1000" step="50" bind:value={openDelay} />
|
||||
</label>
|
||||
<label data-uix-control>
|
||||
<span data-uix-control-label>skipDelayDuration <span data-uix-control-hint>{skipDelayDuration}ms</span></span>
|
||||
<input type="range" min="0" max="500" step="25" bind:value={skipDelayDuration} />
|
||||
</label>
|
||||
<label data-uix-control>
|
||||
<span data-uix-control-label>closeDelay <span data-uix-control-hint>{closeDelay}ms</span></span>
|
||||
<input type="range" min="0" max="2000" step="50" bind:value={closeDelay} />
|
||||
</label>
|
||||
<label data-uix-control>
|
||||
<span data-uix-control-label>hoverEnabled</span>
|
||||
<span data-uix-switch>
|
||||
<input type="checkbox" bind:checked={hoverEnabled} />
|
||||
<span data-uix-switch-label>{hoverEnabled ? 'on' : 'off'}</span>
|
||||
</span>
|
||||
</label>
|
||||
<label data-uix-control>
|
||||
<span data-uix-control-label>loop</span>
|
||||
<span data-uix-switch>
|
||||
<input type="checkbox" bind:checked={loop} />
|
||||
<span data-uix-switch-label>{loop ? 'on' : 'off'}</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div data-uix-subsection-head>
|
||||
<span data-uix-layer-badge="eidos">eidos</span> visual size
|
||||
</div>
|
||||
<div data-uix-controls>
|
||||
<label data-uix-control>
|
||||
<span data-uix-control-label>size</span>
|
||||
<span data-uix-chips role="radiogroup">
|
||||
{#each ['sm', 'md', 'lg'] as s (s)}
|
||||
<button data-uix-chip data-active={size === s} onclick={() => (size = s as NavigationMenuSize)}>{s}</button>
|
||||
{/each}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div data-uix-code>
|
||||
<div data-uix-code-head>
|
||||
<span data-uix-layer-badge="eidos">eidos</span>
|
||||
<span>visual · bar + trigger chrome + Content panel + directional motion</span>
|
||||
<span data-uix-code-lang>svelte</span>
|
||||
</div>
|
||||
<pre><code>{eidosSnippet}</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if tab === 'api'}
|
||||
<section data-uix-section>
|
||||
<h2 data-uix-section-title>API reference</h2>
|
||||
<p data-uix-section-desc>7 parts: Provider, List, Item, Trigger, Content, Link, Indicator.</p>
|
||||
|
||||
<div data-uix-subsection-head>Provider</div>
|
||||
<div data-uix-table-wrap>
|
||||
<table data-uix-table>
|
||||
<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="name">value <span data-uix-tag data-kind="bindable">bindable</span></td><td class="type">string | null</td><td class="default">null</td><td>Currently open item value.</td></tr>
|
||||
<tr><td class="name">orientation</td><td class="type">'horizontal' | 'vertical'</td><td class="default">'horizontal'</td><td>Bar layout axis.</td></tr>
|
||||
<tr><td class="name">openDelay</td><td class="type">number</td><td class="default">200</td><td>Hover-to-open delay (ms).</td></tr>
|
||||
<tr><td class="name">skipDelayDuration</td><td class="type">number</td><td class="default">100</td><td>Hover-swap delay between sibling triggers (ms).</td></tr>
|
||||
<tr><td class="name">closeDelay</td><td class="type">number</td><td class="default">300</td><td>Close delay after pointer exit (ms).</td></tr>
|
||||
<tr><td class="name">hoverEnabled</td><td class="type">boolean</td><td class="default">true</td><td>Disable to require click-only opening.</td></tr>
|
||||
<tr><td class="name">loop</td><td class="type">boolean</td><td class="default">true</td><td>Wrap arrow nav between triggers.</td></tr>
|
||||
<tr><td class="name">size <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">'sm' | 'md' | 'lg'</td><td class="default">'md'</td><td>Visual size — trigger padding + font.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div data-uix-subsection-head>Item · Trigger · Content · Link · Indicator</div>
|
||||
<p data-uix-section-desc style="margin-top: 0.25rem;">
|
||||
<code>Item</code> is the wrapper around each trigger / content pair (gets <code>value</code> for routing in the bar's <code>value</code> binding). <code>Trigger</code> renders a native <code><button></code> with chevron affordance; <code>Link</code> renders <code><a></code> with <code>aria-current</code> support — both styled by the recipe with the same flat in-bar chrome, NOT routed through <code><Button></code>. <code>Indicator</code> is a 2px underline that slides between active triggers via CSS vars (<code>{`--navigation-menu-indicator-{x,y,w,h}`}</code>) written by soma.
|
||||
</p>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if tab === 'morfo'}
|
||||
<section data-uix-section>
|
||||
<h2 data-uix-section-title>
|
||||
<span data-uix-layer-badge="morfo">morfo</span>
|
||||
· declarative contract
|
||||
</h2>
|
||||
<p data-uix-section-desc>Source: <code>src/uix/morfo/components/navigation-menu.ts</code>.</p>
|
||||
|
||||
<div data-uix-table-wrap>
|
||||
<table data-uix-table>
|
||||
<thead><tr><th>Field</th><th>Value</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="name">name</td><td class="type">"{navigationMenuMorfo.name}"</td></tr>
|
||||
<tr><td class="name">kebab</td><td class="type">"{navigationMenuMorfo.kebab}"</td></tr>
|
||||
<tr><td class="name">parts.length</td><td class="default">{navigationMenuMorfo.parts.length}</td></tr>
|
||||
<tr><td class="name">events.length</td><td class="default">{events.length}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div data-uix-subsection-head>Parts</div>
|
||||
<div data-uix-table-wrap>
|
||||
<table data-uix-table>
|
||||
<thead><tr><th>Part</th><th>Marker</th><th>Element</th><th>Role</th><th>Archetype</th><th>States</th><th>Optional</th></tr></thead>
|
||||
<tbody>
|
||||
{#each partsList as part (part.kebab)}
|
||||
<tr>
|
||||
<td class="name">{part.kebab}</td>
|
||||
<td><code data-uix-part-marker>[{part.marker}]</code></td>
|
||||
<td class="type"><{part.defaultElement}></td>
|
||||
<td class="type">{part.role ?? '—'}</td>
|
||||
<td class="default">{part.archetype ?? '—'}</td>
|
||||
<td class="default">{part.states.length ? part.states.join(' | ') : '—'}</td>
|
||||
<td class="default">{part.optional ? 'yes' : 'no'}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div data-uix-subsection-head>Events declaration</div>
|
||||
<div data-uix-table-wrap>
|
||||
<table data-uix-table>
|
||||
<thead><tr><th>name</th><th>family</th><th>verb</th><th>sequence</th><th>intent</th><th>target</th></tr></thead>
|
||||
<tbody>
|
||||
{#each events as action (action.name)}
|
||||
{@const sem = action.semantic}
|
||||
{@const intentDecl = 'intent' in sem ? sem.intent : undefined}
|
||||
{@const intentStr = typeof intentDecl === 'string' ? intentDecl : intentDecl ? `fromProp:${(intentDecl as { fromProp?: string }).fromProp ?? '?'}` : '—'}
|
||||
<tr>
|
||||
<td class="name">{action.name}</td>
|
||||
<td class="type">{sem.family}</td>
|
||||
<td>{sem.verb ?? '—'}</td>
|
||||
<td>{sem.sequence ?? 'pre'}</td>
|
||||
<td class="default">{intentStr}</td>
|
||||
<td>{action.target}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if tab === 'sema'}
|
||||
<section data-uix-section id="sema">
|
||||
<h2 data-uix-section-title>
|
||||
<span data-uix-layer-badge="sema">sema</span>
|
||||
· events
|
||||
</h2>
|
||||
|
||||
<div data-uix-table-wrap>
|
||||
<table data-uix-table>
|
||||
<thead><tr><th>Name</th><th>Family</th><th>Verb</th><th>Sequence</th><th>Intent</th><th>Play</th></tr></thead>
|
||||
<tbody>
|
||||
{#each events as action (action.name)}
|
||||
{@const intentDecl = 'intent' in action.semantic ? action.semantic.intent : undefined}
|
||||
{@const effectiveIntent = typeof intentDecl === 'string' ? intentDecl : undefined}
|
||||
<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 class="default">{effectiveIntent ?? '—'}</td>
|
||||
<td>
|
||||
<button
|
||||
data-uix-play
|
||||
onclick={() => {
|
||||
const target = (stageRef?.querySelector('[data-navigation-menu-item]') ?? stageRef) as HTMLElement | null;
|
||||
if (!target) return;
|
||||
void uix.events?.emit({
|
||||
name: action.name,
|
||||
family: action.semantic.family,
|
||||
target,
|
||||
...(effectiveIntent ? { intent: effectiveIntent } : {})
|
||||
});
|
||||
}}
|
||||
>▶ play</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if tab === 'recipe'}
|
||||
<section data-uix-section>
|
||||
<h2 data-uix-section-title>Eidos recipe</h2>
|
||||
<p data-uix-section-desc>Selectors at <code>src/uix/eidos/components/navigation-menu/navigation-menu.css</code>.</p>
|
||||
<div data-uix-table-wrap>
|
||||
<table data-uix-table>
|
||||
<thead><tr><th>Selector</th><th>Source</th><th>What it paints</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="name">[data-navigation-menu]</td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Root bar — inline-flex container with relative positioning.</td></tr>
|
||||
<tr><td class="name">[data-navigation-menu][data-size]</td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Size scale — trigger padding + font + list gap.</td></tr>
|
||||
<tr><td class="name">[data-navigation-menu-list]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Horizontal/vertical flex list of items.</td></tr>
|
||||
<tr><td class="name">[data-navigation-menu-trigger], [data-navigation-menu-link]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Flat in-bar chrome — transparent bg, hover tint, focus ring.</td></tr>
|
||||
<tr><td class="name">[data-navigation-menu-trigger][data-state='open']</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Open-state tint + chevron rotation.</td></tr>
|
||||
<tr><td class="name">[data-navigation-menu-link][aria-current='page']</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Active-page accent.</td></tr>
|
||||
<tr><td class="name">[data-navigation-menu-content]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Mega-menu panel chrome + entrance animation.</td></tr>
|
||||
<tr><td class="name">[data-navigation-menu-content][data-motion]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Directional slide on trigger swap (from-start/end + to-start/end).</td></tr>
|
||||
<tr><td class="name">[data-navigation-menu-indicator]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>2px underline that slides via CSS vars (<code>{`--navigation-menu-indicator-{x,y,w,h}`}</code>).</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if tab === 'a11y'}
|
||||
<section data-uix-section>
|
||||
<h2 data-uix-section-title>Accessibility</h2>
|
||||
<p data-uix-section-desc>
|
||||
Root renders <code><nav></code> with translated <code>aria-label</code>
|
||||
("Main"). Each Trigger has <code>aria-haspopup="menu"</code>,
|
||||
<code>aria-expanded</code> and <code>aria-controls</code>; Content
|
||||
is the labelled mega-menu region. Links use <code>aria-current="page"</code>
|
||||
when the route matches.
|
||||
</p>
|
||||
|
||||
<div data-uix-subsection-head>Keyboard</div>
|
||||
<div data-uix-table-wrap>
|
||||
<table data-uix-table>
|
||||
<thead><tr><th>Key</th><th>Action</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><span data-uix-kbd>ArrowRight</span> / <span data-uix-kbd>ArrowLeft</span> on Trigger</td><td>Move focus to next/previous Trigger (horizontal orientation; RTL inverts).</td></tr>
|
||||
<tr><td><span data-uix-kbd>ArrowDown</span> / <span data-uix-kbd>ArrowUp</span> on Trigger</td><td>Open the menu and move focus into the Content (vertical orientation: prev/next instead).</td></tr>
|
||||
<tr><td><span data-uix-kbd>Enter</span> / <span data-uix-kbd>Space</span> on Trigger</td><td>Toggle the menu open/close.</td></tr>
|
||||
<tr><td><span data-uix-kbd>Escape</span></td><td>Close the menu, focus stays on Trigger.</td></tr>
|
||||
<tr><td><span data-uix-kbd>Home</span> / <span data-uix-kbd>End</span></td><td>First / last Trigger.</td></tr>
|
||||
<tr><td><span data-uix-kbd>Tab</span></td><td>Move focus into the Content if open; otherwise advance past the bar.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div data-uix-subsection-head>ARIA contract</div>
|
||||
<div data-uix-table-wrap>
|
||||
<table data-uix-table>
|
||||
<thead><tr><th>Part</th><th>Attribute</th><th>Value</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="name">navigation-menu</td><td>aria-label</td><td class="type">"Main" (translated)</td></tr>
|
||||
<tr><td class="name">list</td><td>role</td><td class="type">"list"</td></tr>
|
||||
<tr><td class="name">trigger</td><td>aria-haspopup</td><td class="type">"menu"</td></tr>
|
||||
<tr><td class="name">trigger</td><td>aria-expanded</td><td class="type">"true" | "false"</td></tr>
|
||||
<tr><td class="name">trigger</td><td>data-state</td><td class="type">"open" | "closed"</td></tr>
|
||||
<tr><td class="name">content</td><td>role</td><td class="type">"menu"</td></tr>
|
||||
<tr><td class="name">content</td><td>data-motion</td><td class="type">"from-start" | "from-end" | "to-start" | "to-end"</td></tr>
|
||||
<tr><td class="name">link</td><td>aria-current</td><td class="type">"page" (active route only)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
Loading…
Reference in new issue