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.
359 lines
9.9 KiB
359 lines
9.9 KiB
import type { Morfo } from '../types';
|
|
import { v } from '../types';
|
|
|
|
export const comboboxMorfo = {
|
|
name: 'Combobox',
|
|
kebab: 'combobox',
|
|
scope: ['soma', 'sema', 'eidos'],
|
|
expression: 'pack',
|
|
apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/combobox/',
|
|
texts: {
|
|
label: '#?components.combobox.label|Combobox',
|
|
toggle: '#?components.combobox.toggle|Toggle',
|
|
clear: '#?components.combobox.clear|Clear value',
|
|
selectedTags: '#?components.combobox.selected-tags|Selected values',
|
|
selectedTagRemove: '#?components.combobox.selected-tag-remove|Remove'
|
|
},
|
|
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 (trigger arrow, typing, ArrowUp/Down).
|
|
// A combobox list is a dropdown → `emerge.open` (GUIA §4.1), not
|
|
// `present` (which the canon reserves for auxiliary info like a
|
|
// tooltip). 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` legalised a hand fallback from the `pre` era.
|
|
sequence: 'post'
|
|
}
|
|
},
|
|
{
|
|
// The dropdown popup receding (trigger, Escape, selection, outside,
|
|
// Tab). `emerge.dismiss` with sequence 'pre': the perceptual retreat
|
|
// must fire BEFORE the structural close, while the content still
|
|
// exists to carry the exit — emerge is "aparición o retirada" (book
|
|
// §3.5); the exit precedes the removal (GUIA §4.1 holds: emerge.dismiss
|
|
// = "animar salida antes de cerrar"). Emitting 'post' would fire after
|
|
// the popup is already gone — nothing left to emerge.
|
|
// Verb per book cap. 26 §5: `close` pairs with `open` — 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. Trigger /
|
|
// input are MOUNT-STATE fallbacks (a combobox may live without a
|
|
// trigger button, hence the second link), not a caller's choice —
|
|
// the ola-1 axis split.
|
|
targetFallback: [v.partRef('trigger'), v.partRef('input')],
|
|
sequence: 'pre'
|
|
}
|
|
}
|
|
],
|
|
direction: {},
|
|
focus: {
|
|
// Acta (focus census, 2026-08-27): the same species select's row named —
|
|
// MEASURED here rather than assumed. The Input carries the single DOM stop
|
|
// and `aria-activedescendant` (`propRef('highlightedId')`, combobox.ts:129);
|
|
// `highlightWalk` moves that id and the provider never calls
|
|
// `dom.focus(item)` — Trigger, Content and Item all ship `tabindex: -1`,
|
|
// so the APG combobox contract (focus stays in the textbox) holds.
|
|
kind: 'activedescendant',
|
|
anchor: 'input',
|
|
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-type', values: ['single', 'multiple'], value: v.propRef('type') },
|
|
{ attr: 'data-empty', value: v.propRef('empty'), severity: 'optional' }
|
|
],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'Input',
|
|
kebab: 'input',
|
|
archetype: 'input',
|
|
kind: 'public',
|
|
defaultElement: 'input',
|
|
role: 'combobox',
|
|
optional: false,
|
|
states: ['open', 'closed'],
|
|
data: [
|
|
{ attr: 'data-state', values: ['open', 'closed'] },
|
|
{ attr: 'data-disabled', severity: 'optional' }
|
|
],
|
|
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-autocomplete', value: v.literal('list') },
|
|
{
|
|
attr: 'aria-required',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'required' }
|
|
}
|
|
],
|
|
keyboard: [
|
|
{ key: 'ArrowDown', action: 'next-item' },
|
|
{ key: 'ArrowUp', action: 'prev-item' },
|
|
{ key: 'Home', action: 'first-item' },
|
|
{ key: 'End', action: 'last-item' },
|
|
{ key: 'Enter', action: 'select' },
|
|
{ key: 'Escape', action: 'close' },
|
|
{ key: 'Backspace', action: 'remove-last' }
|
|
]
|
|
},
|
|
{
|
|
name: 'Trigger',
|
|
kebab: 'trigger',
|
|
archetype: 'trigger',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'button',
|
|
optional: true,
|
|
states: ['open', 'closed'],
|
|
data: [
|
|
{ attr: 'data-state', values: ['open', 'closed'] },
|
|
{ attr: 'data-disabled', severity: 'optional' }
|
|
],
|
|
attrs: [{ attr: 'type', value: v.literal('button') }],
|
|
aria: [
|
|
{
|
|
attr: 'aria-label',
|
|
value: v.translationRef('#?components.combobox.toggle|Toggle'),
|
|
severity: 'recommended'
|
|
},
|
|
{ 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'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'ClearButton',
|
|
kebab: 'clear-button',
|
|
archetype: 'trigger',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'button',
|
|
optional: true,
|
|
data: [{ attr: 'data-disabled', value: v.propRef('clearDisabled'), severity: 'optional' }],
|
|
attrs: [{ attr: 'type', value: v.literal('button') }],
|
|
aria: [
|
|
{
|
|
attr: 'aria-label',
|
|
value: v.translationRef('#?components.combobox.clear|Clear value'),
|
|
severity: 'recommended'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
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('input'),
|
|
condition: { when: 'part-present', part: 'input' },
|
|
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') }],
|
|
// The item carries its OWN keydown (combobox-provider :784-790):
|
|
// Enter or Space on a focused item selects it. DUPLICATED rather than
|
|
// moved from `input` — the census asked which part really handles
|
|
// them and the answer was BOTH, differently: the input's Enter
|
|
// (:424-443) clicks the aria-activedescendant highlight, or commits a
|
|
// custom value when there is none. Two executors, two declarations.
|
|
keyboard: [
|
|
{ key: 'Enter', action: 'select' },
|
|
{ key: ' ', action: 'select' }
|
|
]
|
|
},
|
|
{
|
|
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: []
|
|
},
|
|
{
|
|
name: 'SelectedTags',
|
|
kebab: 'selected-tags',
|
|
archetype: 'group',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'group',
|
|
optional: true,
|
|
data: [{ attr: 'data-empty', value: v.propRef('selectedTagsEmpty'), severity: 'optional' }],
|
|
aria: [
|
|
{
|
|
attr: 'aria-label',
|
|
value: v.translationRef('#?components.combobox.selected-tags|Selected values'),
|
|
severity: 'recommended'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'SelectedTag',
|
|
kebab: 'selected-tag',
|
|
archetype: 'item',
|
|
kind: 'public',
|
|
defaultElement: 'span',
|
|
optional: true,
|
|
data: [
|
|
{ attr: 'data-value' },
|
|
{ attr: 'data-label', severity: 'optional' },
|
|
{ attr: 'data-disabled', severity: 'optional' }
|
|
],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'SelectedTagRemove',
|
|
kebab: 'selected-tag-remove',
|
|
archetype: 'trigger',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'button',
|
|
optional: true,
|
|
data: [{ attr: 'data-disabled', severity: 'optional' }],
|
|
attrs: [{ attr: 'type', value: v.literal('button') }],
|
|
aria: [
|
|
{
|
|
attr: 'aria-label',
|
|
value: v.translationRef('#?components.combobox.selected-tag-remove|Remove'),
|
|
severity: 'recommended'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
} as const satisfies Morfo;
|