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.
324 lines
7.7 KiB
324 lines
7.7 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',
|
|
trap: true,
|
|
return: 'trigger',
|
|
restore: true
|
|
},
|
|
|
|
events: [
|
|
{
|
|
name: 'open',
|
|
semantic: {
|
|
family: 'emerge',
|
|
verb: 'open',
|
|
target: v.partRef('content'),
|
|
sequence: 'pre'
|
|
},
|
|
commits: { part: v.partRef('content'), attr: 'data-state', value: 'open' }
|
|
},
|
|
{
|
|
name: 'close',
|
|
semantic: {
|
|
family: 'emerge',
|
|
verb: 'close',
|
|
target: v.partRef('content'),
|
|
sequence: 'pre'
|
|
},
|
|
commits: { part: v.partRef('content'), attr: 'data-state', value: 'closed' }
|
|
},
|
|
{
|
|
name: 'commit-select',
|
|
semantic: {
|
|
family: 'commit',
|
|
verb: 'select',
|
|
target: v.partRef('item'),
|
|
intent: 'affirm',
|
|
sequence: 'post'
|
|
}
|
|
}
|
|
],
|
|
|
|
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' }
|
|
],
|
|
// RFC §M9 (children-DOM cascade): the content is an animable surface
|
|
// that staggers its menu rows. `staggerChildren` names the lead item
|
|
// part; the soma provider resolves the DOM node set (all visible rows).
|
|
animation: { surface: true, staggerChildren: 'item' }
|
|
},
|
|
{
|
|
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: 'div',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
}
|
|
]
|
|
} as const satisfies Morfo;
|