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.
353 lines
8.9 KiB
353 lines
8.9 KiB
import type { Morfo } from '../types';
|
|
import { v } from '../types';
|
|
|
|
export const contextMenuMorfo = {
|
|
name: 'ContextMenu',
|
|
kebab: 'context-menu',
|
|
// Eidos wrapper added 2026-05-22 (`src/uix/eidos/components/context-menu/`).
|
|
// Same family/event vocabulary as dropdown-menu — sound from family bases.
|
|
scope: ['soma', 'sema', 'eidos'],
|
|
// expression resolved via the sema pack at
|
|
// `src/uix/sema/components/context-menu.ts` — soft emerge open/close
|
|
// + subtle commit on item select. Shares the dropdown-menu signature
|
|
// so the system reads as one consistent "menu sound".
|
|
expression: 'pack',
|
|
apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/menu/',
|
|
texts: {
|
|
label: '#?components.context-menu.label|Context menu'
|
|
},
|
|
|
|
focus: {
|
|
kind: 'trap',
|
|
initial: 'first-focusable',
|
|
// Non-modal menu: focus enters for arrow-key nav but is NOT trapped —
|
|
// Tab / outside-click exit and close. A hard trap is dialog behaviour.
|
|
trap: false,
|
|
return: 'previous',
|
|
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. Same gap and same shape as dropdown-menu's
|
|
// `sub-open` (2026-08-10): the sub is its own floating surface, so
|
|
// its stamp belongs on `sub-content` and its `commits` writes the
|
|
// sub's own `data-state` — the root's `open` would land on the
|
|
// wrong panel. Fixed in both twins at once; leaving one mute is the
|
|
// inconsistency this axis exists to kill.
|
|
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: [
|
|
{
|
|
name: 'Provider',
|
|
kebab: 'provider',
|
|
archetype: 'provider',
|
|
kind: 'virtual',
|
|
defaultElement: 'none',
|
|
optional: false,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'Trigger',
|
|
kebab: 'trigger',
|
|
archetype: 'trigger',
|
|
kind: 'public',
|
|
defaultElement: 'span',
|
|
optional: false,
|
|
states: ['open', 'closed'],
|
|
data: [{ attr: 'data-state', values: ['open', 'closed'] }],
|
|
aria: [
|
|
{ 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'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
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;
|