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.
286 lines
7.6 KiB
286 lines
7.6 KiB
import type { Morfo } from '../types';
|
|
import { v } from '../types';
|
|
|
|
export const selectMorfo = {
|
|
name: 'Select',
|
|
kebab: 'select',
|
|
scope: ['soma', 'sema', 'eidos'],
|
|
expression: 'pack',
|
|
texts: {
|
|
label: '#?components.select.label|Select'
|
|
},
|
|
apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/listbox/',
|
|
|
|
events: [
|
|
{
|
|
name: 'commit-select',
|
|
semantic: {
|
|
family: 'commit',
|
|
verb: 'select',
|
|
target: v.partRef('item'),
|
|
intent: 'affirm',
|
|
sequence: 'post'
|
|
}
|
|
},
|
|
{
|
|
name: 'commit-unselect',
|
|
semantic: {
|
|
family: 'commit',
|
|
verb: 'unselect',
|
|
target: v.partRef('item'),
|
|
intent: 'affirm',
|
|
sequence: 'post'
|
|
}
|
|
},
|
|
{
|
|
// The dropdown popup appearing. Dropdown = emerge.open (GUIA §4.1).
|
|
// Emitted after the open state is set, as the popup appears.
|
|
name: 'emerge-open',
|
|
semantic: {
|
|
family: 'emerge',
|
|
verb: 'open',
|
|
target: v.partRef('content'),
|
|
// `post`: the handler mounts the content before the emit, so the
|
|
// stamp lands on the declared surface — the F4 recipe. The old
|
|
// `allowedTargets: [trigger]` legalised a hand fallback from the
|
|
// `pre` era; measured 2026-08-13: it parked `emerge-open` (and the
|
|
// `present` motion signature) on the BUTTON.
|
|
sequence: 'post'
|
|
}
|
|
},
|
|
{
|
|
// The popup receding: emerge.close uses the pre sequence. Soma
|
|
// dispatches before writing the closed state without awaiting the
|
|
// returned promise; Presence owns the remaining exit lifetime.
|
|
// Verb per book cap. 26 §5: `close` pairs with `open` (framed
|
|
// surfaces); `dismiss` belongs to OFFERED surfaces (present) — was
|
|
// emerge-dismiss (C2 verbs pass, 2026-07-07).
|
|
name: 'emerge-close',
|
|
semantic: {
|
|
family: 'emerge',
|
|
verb: 'close',
|
|
target: v.partRef('content'),
|
|
// `pre`: the content still exists when the retreat fires. The
|
|
// trigger is MOUNT-STATE fallback (the runtime resolves it only if
|
|
// the content is already gone), not a caller's choice — the ola-1
|
|
// axis split, same as the four overlays.
|
|
targetFallback: [v.partRef('trigger')],
|
|
sequence: 'pre'
|
|
}
|
|
}
|
|
],
|
|
|
|
direction: {},
|
|
focus: {
|
|
// Acta (focus census, 2026-08-27): «aria-activedescendant strategy:
|
|
// virtual highlight (highlightedId), the single DOM stop stays on the
|
|
// anchor». The block this replaces said "no `focus` block" and spelled the
|
|
// species out in prose — the species now has a NAME, so it is declared
|
|
// instead of excused. Measured in the provider: `highlightWalk` moves
|
|
// `highlightedId`, the Trigger's `aria-activedescendant` is sourced from
|
|
// it, Content and Item ship `tabindex: -1` and are never DOM-focused.
|
|
// Focus return to the trigger on close stays imperative (`handleClose`).
|
|
kind: 'activedescendant',
|
|
anchor: 'trigger',
|
|
items: ['item']
|
|
},
|
|
parts: [
|
|
{
|
|
name: 'Provider',
|
|
kebab: 'provider',
|
|
archetype: 'provider',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
optional: false,
|
|
states: ['open', 'closed'],
|
|
data: [
|
|
{ attr: 'data-state', values: ['open', 'closed'], value: v.stateRef('open') },
|
|
{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
|
|
{ attr: 'data-readonly', value: v.propRef('readonly'), severity: 'optional' },
|
|
{ attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' },
|
|
{ attr: 'data-type', values: ['single', 'multiple'], value: v.propRef('type') }
|
|
],
|
|
aria: [{ attr: 'aria-invalid', value: v.propRef('invalid'), severity: 'optional' }]
|
|
},
|
|
{
|
|
name: 'Trigger',
|
|
kebab: 'trigger',
|
|
archetype: 'trigger',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'combobox',
|
|
optional: false,
|
|
states: ['open', 'closed'],
|
|
data: [
|
|
{ attr: 'data-state', values: ['open', 'closed'] },
|
|
{ attr: 'data-disabled', severity: 'optional' },
|
|
{ attr: 'data-invalid', severity: 'optional' },
|
|
{ attr: 'data-placeholder', severity: 'optional' }
|
|
],
|
|
attrs: [{ attr: 'type', value: v.literal('button') }],
|
|
aria: [
|
|
{ attr: 'aria-haspopup', value: v.literal('listbox') },
|
|
{ attr: 'aria-expanded', value: v.stateRef('open') },
|
|
{
|
|
attr: 'aria-controls',
|
|
value: v.partRef('content'),
|
|
condition: { when: 'part-present', part: 'content' },
|
|
severity: 'recommended'
|
|
},
|
|
{ attr: 'aria-activedescendant', value: v.propRef('highlightedId'), severity: 'optional' },
|
|
{
|
|
attr: 'aria-required',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'required' }
|
|
},
|
|
{
|
|
attr: 'aria-readonly',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'readonly' }
|
|
}
|
|
],
|
|
keyboard: [
|
|
{ key: 'Enter', action: 'open' },
|
|
{ key: ' ', action: 'open' },
|
|
{ key: 'ArrowDown', action: 'next-item' },
|
|
{ key: 'ArrowUp', action: 'prev-item' },
|
|
{ key: 'Home', action: 'first-item' },
|
|
{ key: 'End', action: 'last-item' },
|
|
{ key: 'Escape', action: 'close' }
|
|
]
|
|
},
|
|
{
|
|
name: 'Value',
|
|
kebab: 'value',
|
|
archetype: 'description',
|
|
kind: 'public',
|
|
defaultElement: 'span',
|
|
optional: true,
|
|
data: [{ attr: 'data-placeholder', severity: 'optional' }],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'Content',
|
|
kebab: 'content',
|
|
archetype: 'content',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'listbox',
|
|
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-multiselectable',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'multiple' }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Viewport',
|
|
kebab: 'viewport',
|
|
archetype: 'viewport',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'Item',
|
|
kebab: 'item',
|
|
archetype: 'item',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'option',
|
|
optional: false,
|
|
states: ['checked', 'unchecked'],
|
|
data: [
|
|
{ attr: 'data-state', values: ['checked', 'unchecked'] },
|
|
{ attr: 'data-value' },
|
|
{ attr: 'data-label', severity: 'optional' },
|
|
{ attr: 'data-highlighted', severity: 'optional' },
|
|
{ attr: 'data-disabled', severity: 'optional' }
|
|
],
|
|
aria: [
|
|
{ attr: 'aria-selected', value: v.stateRef('checked') },
|
|
{
|
|
attr: 'aria-disabled',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'disabled' }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'ItemDescription',
|
|
kebab: 'item-description',
|
|
archetype: 'description',
|
|
kind: 'public',
|
|
defaultElement: 'span',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
{
|
|
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: []
|
|
},
|
|
{
|
|
name: 'Arrow',
|
|
kebab: 'arrow',
|
|
archetype: 'arrow',
|
|
kind: 'public',
|
|
defaultElement: 'span',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
}
|
|
]
|
|
} as const satisfies Morfo;
|