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.
278 lines
7.5 KiB
278 lines
7.5 KiB
import type { Morfo } from '../types';
|
|
import { v } from '../types';
|
|
|
|
export const popoverMorfo = {
|
|
name: 'Popover',
|
|
kebab: 'popover',
|
|
scope: ['soma', 'sema', 'eidos'],
|
|
expression: 'pack',
|
|
apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/',
|
|
texts: {
|
|
label: '#?components.popover.label|Popover'
|
|
},
|
|
|
|
events: [
|
|
{
|
|
// Verb per book cap. 26 §5/§6: a popover opens "con marco propio"
|
|
// — emerge.open, anchored appearance (was `present`; C2 verbs pass,
|
|
// 2026-07-07: present/dismiss belongs to OFFERED surfaces like toast).
|
|
name: 'emerge-open',
|
|
semantic: {
|
|
family: 'emerge',
|
|
verb: 'open',
|
|
target: v.partRef('content'),
|
|
// `post`: the provider flips `open` in the `open` event HANDLER
|
|
// (`handleOpen`). With `pre` the runtime awaits the perceptual
|
|
// emit — and therefore the family's ~240ms hold — BEFORE running
|
|
// that handler, so the content mount is gated behind the hold:
|
|
// the popover opens visibly late and the heavy first render runs
|
|
// inside the hold's timer turn (the "setTimeout handler took
|
|
// 75ms" violation). `post` mounts first, then the signal
|
|
// accompanies the now-visible entrance. Same doctrine as the
|
|
// checkbox-lag fix: state set in the handler ⇒ `post`. (Exit
|
|
// stays `pre` on `close` — there the element exists and the
|
|
// signal SHOULD precede the unmount.)
|
|
sequence: 'post'
|
|
},
|
|
commits: {
|
|
part: v.partRef('content'),
|
|
attr: 'data-state',
|
|
value: 'open'
|
|
}
|
|
},
|
|
{
|
|
// Polymorphic close (book §5.3) — replaces five prior close-*
|
|
// events. Mirror of Dialog / Drawer polymorphic close. The
|
|
// PopoverProvider concretes the cause via
|
|
// `dismissWith(action, opts?)`:
|
|
// - sets `data-last-action` imperatively on Content;
|
|
// - passes `opts.semantic` to `runtime.trigger('emerge-close', ...)`.
|
|
//
|
|
// Allowed concretions:
|
|
// - `emerge.close` — cancel / dismiss / dismiss-outside
|
|
// - `commit.save + fulfill` — close after successful action
|
|
// - `signal.alert + threat` — close after failure
|
|
//
|
|
// Persistence: `transient`. The popover content unmounts; any
|
|
// long-lived feedback belongs in a Toast / Announce.
|
|
name: 'emerge-close',
|
|
semantic: {
|
|
family: 'emerge',
|
|
verb: 'close',
|
|
target: v.partRef('content'),
|
|
// Mount-state fallback, resolved by the RUNTIME: the close lands
|
|
// on the TRIGGER when the content is already gone. Declared on
|
|
// the fallback axis (not `allowedTargets` — that is the caller's
|
|
// choice set) since 2026-08-10; the provider no longer hand-rolls
|
|
// `content ?? partRef(content) ?? trigger`.
|
|
targetFallback: [v.partRef('trigger')],
|
|
sequence: 'pre',
|
|
persistence: 'transient',
|
|
allowedFamilies: ['emerge', 'commit', 'signal']
|
|
},
|
|
commits: {
|
|
part: v.partRef('content'),
|
|
attr: 'data-state',
|
|
value: 'closed'
|
|
}
|
|
}
|
|
],
|
|
|
|
focus: {
|
|
kind: 'trap',
|
|
// FALSE is the shipped truth (eje focus-first, 2026-08-26): Popover is
|
|
// non-modal by default (`modal = false` in the wrapper) and the provider
|
|
// resolves `trapFocus ?? modal`. This declaration said `true` for months
|
|
// with zero readers — the drift that motivated the census, which now
|
|
// compares this default against the wrapper's.
|
|
trap: false,
|
|
initial: 'first-focusable',
|
|
return: 'trigger',
|
|
restore: true
|
|
},
|
|
|
|
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'], value: v.stateRef('open') }],
|
|
aria: [
|
|
{ attr: 'type', value: v.literal('button') },
|
|
{ attr: 'aria-haspopup', value: v.literal('dialog') },
|
|
{ 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' }
|
|
]
|
|
},
|
|
{
|
|
name: 'Content',
|
|
kebab: 'content',
|
|
archetype: 'content',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'dialog',
|
|
optional: false,
|
|
states: ['open', 'closed'],
|
|
data: [
|
|
{ attr: 'data-state', values: ['open', 'closed'], value: v.stateRef('open') },
|
|
{
|
|
attr: 'data-last-action',
|
|
values: ['saved', 'cancelled', 'dismissed', 'dismissed-outside', 'failed'],
|
|
severity: 'optional'
|
|
},
|
|
{
|
|
attr: 'data-starting-style',
|
|
severity: 'optional',
|
|
condition: { when: 'state-equals', state: 'open', value: 'starting' }
|
|
},
|
|
{
|
|
attr: 'data-ending-style',
|
|
severity: 'optional',
|
|
condition: { when: 'state-equals', state: 'closed', value: 'ending' }
|
|
}
|
|
],
|
|
aria: [
|
|
{
|
|
attr: 'aria-labelledby',
|
|
value: v.propRef('ariaLabelledby'),
|
|
condition: { when: 'prop-truthy', prop: 'ariaLabelledby' },
|
|
severity: 'recommended'
|
|
},
|
|
{
|
|
attr: 'aria-describedby',
|
|
value: v.propRef('ariaDescribedby'),
|
|
condition: { when: 'prop-truthy', prop: 'ariaDescribedby' },
|
|
severity: 'optional'
|
|
},
|
|
{
|
|
attr: 'aria-modal',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'modal' }
|
|
}
|
|
],
|
|
keyboard: [
|
|
{ key: 'Escape', action: 'close' },
|
|
{ key: 'Tab', action: 'focus-next' },
|
|
{ key: 'Shift+Tab', action: 'focus-prev' }
|
|
]
|
|
},
|
|
{
|
|
name: 'Arrow',
|
|
kebab: 'arrow',
|
|
archetype: 'arrow',
|
|
kind: 'public',
|
|
defaultElement: 'span',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
{
|
|
/**
|
|
* Optional heading for dialog-like popovers. When present, Content
|
|
* uses it as the accessible name; otherwise Content falls back to
|
|
* the Trigger id so simple popovers stay labelled.
|
|
*/
|
|
name: 'Title',
|
|
kebab: 'title',
|
|
archetype: 'title',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'heading',
|
|
optional: true,
|
|
data: [],
|
|
aria: [
|
|
{
|
|
attr: 'aria-level',
|
|
value: v.propRef('level'),
|
|
severity: 'recommended'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Description',
|
|
kebab: 'description',
|
|
archetype: 'description',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'Close',
|
|
kebab: 'close',
|
|
archetype: 'close',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'button',
|
|
optional: true,
|
|
data: [],
|
|
aria: [
|
|
{ attr: 'type', value: v.literal('button') },
|
|
{
|
|
attr: 'aria-label',
|
|
value: v.commonRef('buttons.close', 'Close'),
|
|
severity: 'recommended'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Anchor',
|
|
kebab: 'anchor',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'Overlay',
|
|
kebab: 'overlay',
|
|
archetype: 'overlay',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
optional: true,
|
|
states: ['open', 'closed'],
|
|
data: [
|
|
{ attr: 'data-state', values: ['open', 'closed'], value: v.stateRef('open') },
|
|
{
|
|
attr: 'data-starting-style',
|
|
severity: 'optional',
|
|
condition: { when: 'state-equals', state: 'open', value: 'starting' }
|
|
},
|
|
{
|
|
attr: 'data-ending-style',
|
|
severity: 'optional',
|
|
condition: { when: 'state-equals', state: 'closed', value: 'ending' }
|
|
}
|
|
],
|
|
aria: [{ attr: 'aria-hidden', value: v.literal('true') }]
|
|
}
|
|
]
|
|
} as const satisfies Morfo;
|