You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
368 lines
9.6 KiB
368 lines
9.6 KiB
import type { Morfo } from '../types';
|
|
import { v } from '../types';
|
|
|
|
export const dropdownMenuMorfo = {
|
|
name: 'DropdownMenu',
|
|
kebab: 'dropdown-menu',
|
|
// Eidos wrapper added 2026-05-22 (`src/uix/eidos/components/dropdown-menu/`).
|
|
// Sema picks up open/close from the `emerge` family base and
|
|
// commit-select from the `commit` family base — both ship sound
|
|
// out of the box, no per-component cascade needed.
|
|
scope: ['soma', 'sema', 'eidos'],
|
|
// expression resolved via the sema pack at
|
|
// `src/uix/sema/components/dropdown-menu.ts` — soft emerge open/close
|
|
// + subtle commit on item select. High-frequency surface; sober
|
|
// signature avoids fatigue.
|
|
expression: 'pack',
|
|
apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/',
|
|
texts: {
|
|
label: '#?components.dropdown-menu.label|Dropdown menu'
|
|
},
|
|
|
|
focus: {
|
|
initial: 'first-focusable',
|
|
// Non-modal menu: focus enters for arrow-key nav, but it is NOT trapped —
|
|
// Tab / outside-click exit and close (the dismissal owns that). A hard trap
|
|
// is dialog behaviour; menus stay navigable like the rest of the page.
|
|
trap: false,
|
|
return: 'trigger',
|
|
restore: true
|
|
},
|
|
|
|
events: [
|
|
{
|
|
// `post` since 2026-08-10 (A-36): the content mounts DURING the
|
|
// trigger, so the runtime resolves the declared target and the
|
|
// trigger keeps its own surface free for its own events. Measured
|
|
// under `pre`: two `contact-activate` stamps 1 ms apart on the
|
|
// trigger and the `open` LOST entirely — its target was not mounted
|
|
// yet, so it never landed at all.
|
|
name: 'emerge-open',
|
|
semantic: {
|
|
family: 'emerge',
|
|
verb: 'open',
|
|
target: v.partRef('content'),
|
|
sequence: 'post'
|
|
},
|
|
commits: { part: v.partRef('content'), attr: 'data-state', value: 'open' }
|
|
},
|
|
{
|
|
name: 'emerge-close',
|
|
semantic: {
|
|
family: 'emerge',
|
|
verb: 'close',
|
|
target: v.partRef('content'),
|
|
// Mount-state fallback, resolved by the RUNTIME: a close that
|
|
// outruns the unmount lands on the trigger.
|
|
targetFallback: [v.partRef('trigger')],
|
|
sequence: 'pre'
|
|
},
|
|
commits: { part: v.partRef('content'), attr: 'data-state', value: 'closed' }
|
|
},
|
|
{
|
|
// A SUBMENU opens. Declared 2026-08-10: the surface had `open` /
|
|
// `close` for the root panel and `commit-select` for an item, so
|
|
// opening a submenu emitted NOTHING — `MenuSubProvider.handleOpen`
|
|
// only flipped state. Not a wiring bug: there was no event.
|
|
//
|
|
// Distinct from the root `open` on purpose, NOT the same event with
|
|
// a wider target: the sub is its own floating surface, so its stamp
|
|
// belongs on `sub-content` (the root's would land on the wrong
|
|
// panel), its `commits` writes the sub's own `data-state`, and a
|
|
// sema pack must be able to tell "menu opened" from "submenu
|
|
// opened". `sub-content` already declared `states: ['open',
|
|
// 'closed']` in anticipation.
|
|
name: 'emerge-open-sub',
|
|
semantic: {
|
|
family: 'emerge',
|
|
verb: 'open',
|
|
target: v.partRef('sub-content'),
|
|
sequence: 'post'
|
|
},
|
|
commits: { part: v.partRef('sub-content'), attr: 'data-state', value: 'open' }
|
|
},
|
|
{
|
|
name: 'emerge-close-sub',
|
|
semantic: {
|
|
family: 'emerge',
|
|
verb: 'close',
|
|
target: v.partRef('sub-content'),
|
|
// Mount-state fallback: a close that outruns the unmount lands on
|
|
// the sub-trigger, which is the surface the user is looking at.
|
|
targetFallback: [v.partRef('sub-trigger')],
|
|
sequence: 'pre'
|
|
},
|
|
commits: { part: v.partRef('sub-content'), attr: 'data-state', value: 'closed' }
|
|
},
|
|
{
|
|
name: 'commit-select',
|
|
semantic: {
|
|
family: 'commit',
|
|
verb: 'select',
|
|
target: v.partRef('item'),
|
|
intent: 'affirm',
|
|
sequence: 'post'
|
|
}
|
|
}
|
|
],
|
|
|
|
direction: { parts: ['trigger'] },
|
|
parts: [
|
|
{
|
|
name: 'Provider',
|
|
kebab: 'provider',
|
|
archetype: 'provider',
|
|
kind: 'virtual',
|
|
defaultElement: 'none',
|
|
optional: false,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'Trigger',
|
|
kebab: 'trigger',
|
|
archetype: 'trigger',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'button',
|
|
optional: false,
|
|
states: ['open', 'closed'],
|
|
data: [{ attr: 'data-state', values: ['open', 'closed'] }],
|
|
aria: [
|
|
{ attr: 'type', value: v.literal('button') },
|
|
{ attr: 'aria-haspopup', value: v.literal('menu') },
|
|
{ attr: 'aria-expanded', value: v.stateRef('open') },
|
|
{
|
|
attr: 'aria-controls',
|
|
value: v.partRef('content'),
|
|
condition: { when: 'part-present', part: 'content' },
|
|
severity: 'recommended'
|
|
}
|
|
],
|
|
keyboard: [
|
|
{ key: 'Enter', action: 'open' },
|
|
{ key: ' ', action: 'open' },
|
|
{ key: 'ArrowDown', action: 'open-first' }
|
|
]
|
|
},
|
|
{
|
|
name: 'Content',
|
|
kebab: 'content',
|
|
archetype: 'content',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'menu',
|
|
optional: false,
|
|
states: ['open', 'closed'],
|
|
data: [{ attr: 'data-state', values: ['open', 'closed'] }],
|
|
aria: [
|
|
{
|
|
attr: 'aria-labelledby',
|
|
value: v.partRef('trigger'),
|
|
condition: { when: 'part-present', part: 'trigger' },
|
|
severity: 'recommended'
|
|
},
|
|
{ attr: 'aria-orientation', value: v.literal('vertical') }
|
|
],
|
|
keyboard: [
|
|
{ key: 'Escape', action: 'close' },
|
|
{ key: 'ArrowDown', action: 'next-item' },
|
|
{ key: 'ArrowUp', action: 'prev-item' },
|
|
{ key: 'Home', action: 'first-item' },
|
|
{ key: 'End', action: 'last-item' },
|
|
{ key: 'Enter', action: 'activate' },
|
|
{ key: ' ', action: 'activate' }
|
|
]
|
|
},
|
|
{
|
|
name: 'Item',
|
|
kebab: 'item',
|
|
archetype: 'item',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'menuitem',
|
|
optional: false,
|
|
data: [
|
|
{ attr: 'data-text-value', severity: 'optional' },
|
|
{ attr: 'data-disabled', severity: 'optional' }
|
|
],
|
|
aria: [
|
|
{
|
|
attr: 'aria-disabled',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'disabled' }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'CheckboxItem',
|
|
kebab: 'checkbox-item',
|
|
archetype: 'item',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'menuitemcheckbox',
|
|
optional: true,
|
|
states: ['checked', 'unchecked'],
|
|
data: [
|
|
{ attr: 'data-state', values: ['checked', 'unchecked'] },
|
|
{ attr: 'data-text-value', severity: 'optional' },
|
|
{ attr: 'data-disabled', severity: 'optional' }
|
|
],
|
|
aria: [
|
|
{ attr: 'aria-checked', value: v.stateRef('checked') },
|
|
{
|
|
attr: 'aria-disabled',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'disabled' }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'RadioGroup',
|
|
kebab: 'radio-group',
|
|
archetype: 'group',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'group',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'RadioItem',
|
|
kebab: 'radio-item',
|
|
archetype: 'item',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'menuitemradio',
|
|
optional: true,
|
|
states: ['checked', 'unchecked'],
|
|
data: [
|
|
{ attr: 'data-state', values: ['checked', 'unchecked'] },
|
|
{ attr: 'data-text-value', severity: 'optional' },
|
|
{ attr: 'data-disabled', severity: 'optional' }
|
|
],
|
|
aria: [
|
|
{ attr: 'aria-checked', value: v.stateRef('checked') },
|
|
{
|
|
attr: 'aria-disabled',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'disabled' }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Sub',
|
|
kebab: 'sub',
|
|
kind: 'virtual',
|
|
defaultElement: 'none',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'SubTrigger',
|
|
kebab: 'sub-trigger',
|
|
archetype: 'trigger',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'menuitem',
|
|
optional: true,
|
|
states: ['open', 'closed'],
|
|
data: [
|
|
{ attr: 'data-state', values: ['open', 'closed'] },
|
|
{ attr: 'data-text-value', severity: 'optional' },
|
|
{ attr: 'data-disabled', severity: 'optional' }
|
|
],
|
|
aria: [
|
|
{ attr: 'aria-haspopup', value: v.literal('menu') },
|
|
{ attr: 'aria-expanded', value: v.stateRef('open') },
|
|
{
|
|
attr: 'aria-controls',
|
|
value: v.partRef('sub-content'),
|
|
condition: { when: 'part-present', part: 'sub-content' },
|
|
severity: 'recommended'
|
|
},
|
|
{
|
|
attr: 'aria-disabled',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'disabled' }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'SubContent',
|
|
kebab: 'sub-content',
|
|
archetype: 'content',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'menu',
|
|
optional: true,
|
|
states: ['open', 'closed'],
|
|
data: [{ attr: 'data-state', values: ['open', 'closed'] }],
|
|
aria: [
|
|
{
|
|
attr: 'aria-labelledby',
|
|
value: v.partRef('sub-trigger'),
|
|
condition: { when: 'part-present', part: 'sub-trigger' },
|
|
severity: 'recommended'
|
|
},
|
|
{ attr: 'aria-orientation', value: v.literal('vertical') }
|
|
]
|
|
},
|
|
{
|
|
name: 'Group',
|
|
kebab: 'group',
|
|
archetype: 'group',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'group',
|
|
optional: true,
|
|
data: [],
|
|
aria: [
|
|
{
|
|
attr: 'aria-labelledby',
|
|
value: v.partRef('group-heading'),
|
|
condition: { when: 'part-present', part: 'group-heading' },
|
|
severity: 'recommended'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'GroupHeading',
|
|
kebab: 'group-heading',
|
|
archetype: 'header',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'Separator',
|
|
kebab: 'separator',
|
|
archetype: 'separator',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'separator',
|
|
optional: true,
|
|
data: [],
|
|
aria: [{ attr: 'aria-orientation', value: v.literal('horizontal') }]
|
|
},
|
|
{
|
|
name: 'Arrow',
|
|
kebab: 'arrow',
|
|
archetype: 'arrow',
|
|
kind: 'public',
|
|
defaultElement: 'span',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
}
|
|
]
|
|
} as const satisfies Morfo;
|