canon-ds 0.1.0

package/lib/components/multi-select.mjs

@@ -0,0 +1,218 @@
+import { CONTROL, FOCUS_RING, RESET_BUTTON, TRANSITION_COLORS, SIZE_PROP, ex, ICON, typeStyle } from "./_shared.mjs";
+// Combobox that keeps several values: the chosen items sit as chips inside the field box and the
+// listbox under it shows a checkbox square on every option. The chips box draws the border and ring;
+// the root only positions the listbox.
+const sizeBlock = (s, chipH, chipFont) => ({
+    chips: { 'min-height': CONTROL[s].height, 'border-radius': CONTROL[s].radius, 'padding-inline-end': `calc(${CONTROL[s].px} + ${CONTROL[s].icon} + {space.1})` },
+    chip: { height: chipH, 'font-size': chipFont },
+    field: { height: chipH, 'font-size': CONTROL[s].font },
+    icon: { width: CONTROL[s].icon, height: CONTROL[s].icon, 'inset-inline-end': CONTROL[s].px, top: `calc((${CONTROL[s].height} - ${CONTROL[s].icon}) / 2)` },
+});
+const chevron = ICON.chevronDown.replace('cn-icon', 'cn-multi-select__icon');
+const chip = (label, attrs = '') => `<span class="cn-multi-select__chip">${label}<button type="button" class="cn-multi-select__chip-remove" aria-label="Remove ${label}"${attrs}>${ICON.x}</button></span>`;
+const option = (id, label, attrs = '') => `<li class="cn-multi-select__option" role="option" id="${id}" ${attrs}><span class="cn-multi-select__option-check" aria-hidden="true">${ICON.check}</span>${label}</li>`;
+const box = (o) => `<div class="cn-multi-select" ${o.root}><div class="cn-multi-select__chips">${o.chips.map((c) => chip(c, o.removeAttrs)).join('')}<input class="cn-multi-select__field" type="text" role="combobox" aria-autocomplete="list" aria-controls="${o.id}-list" ${o.input}>${chevron}</div><ul class="cn-multi-select__listbox" role="listbox" aria-multiselectable="true" id="${o.id}-list">${o.body ?? ''}</ul></div>`;
+const PEOPLE = option('ms-owner-maya', 'Maya Chen', 'aria-selected="true"') + option('ms-owner-daniel', 'Daniel Costa', 'aria-selected="true"') + option('ms-owner-sofia', 'Sofia Almeida', 'aria-selected="false" data-highlighted') + option('ms-owner-lucas', 'Lucas Ferreira', 'aria-selected="false"') + option('ms-owner-aisha', 'Aisha Khan (on leave)', 'aria-selected="false" aria-disabled="true"');
+export const multiSelect = {
+    name: 'MultiSelect',
+    slug: 'multi-select',
+    category: 'forms',
+    description: 'A Combobox that keeps several values: chosen items sit as chips inside the field, and the listbox below shows a checkbox square on every option so the selection reads as a list of ticks. Typing filters; Enter toggles; Backspace removes the last chip.',
+    usage: 'Pick several items from a known list: assignees, tags from a fixed set, regions, products. For free-typed values use TagsInput; for one value use Select or Combobox; for 2–6 options that fit on screen use a Checkbox group. Pair with Field for the label.',
+    anatomy: [
+        { part: 'root', element: 'div', description: 'Wrapper (position: relative) holding the chips box and the listbox. Carries data-size, data-state="open|closed", data-invalid, data-disabled.' },
+        { part: 'chips', element: 'div', description: 'The bordered field box (flex, wrap, min-height = control height): draws background, hairline, radius, shadow-xs and the focus ring on :focus-within. Holds the chips, the input and the chevron.' },
+        { part: 'chip', element: 'span', description: 'One selected value: surface fill, hairline, radius md, 24px tall, body-sm, with its remove button.' },
+        { part: 'chip-remove', element: 'button', description: '16px × button at the end of a chip. aria-label "Remove {value}".' },
+        { part: 'field', element: 'input', description: 'The bare text input with role="combobox" (flex 1, min-width 80px). Filters the list; never holds a committed value.' },
+        { part: 'icon', element: 'svg', description: 'Chevron-down absolutely placed at the end of the first line; rotates when open. Decorative.' },
+        { part: 'listbox', element: 'ul', description: 'The panel under the box: surface-raised, hairline, radius panel, shadow-lg, padding space.1, 36px rows, scrolls after 256px. Hidden unless the root has data-state="open". role="listbox" aria-multiselectable="true".' },
+        { part: 'option', element: 'li', description: 'One row: checkbox square, then the label. role="option" with a unique id and aria-selected; data-highlighted for the keyboard cursor; aria-disabled="true" when not selectable.' },
+        { part: 'option-check', element: 'span', description: '16px checkbox square at the start of the row (hairline, radius sm) that fills with the action color and shows the check when the option is selected. Contains the check svg.' },
+        { part: 'empty', element: 'li', description: 'Muted "No results" row rendered instead of options when the filter matches nothing.', optional: true },
+    ],
+    props: {
+        size: SIZE_PROP(['sm', 'md', 'lg']),
+    },
+    states: {
+        hover: { selector: ':hover:not([data-disabled])', description: 'Chips box border strengthens.', markup: 'native :hover' },
+        focus: { selector: ':focus-within', description: 'Chips box border becomes the action color and the ring appears. Focus stays on the input while the list is open.', markup: 'native :focus-within on the root' },
+        open: { selector: '[data-state="open"]', description: 'The listbox is visible under the box and the chevron points up.', markup: 'data-state="open" on the root and aria-expanded="true" on the input' },
+        invalid: { selector: '[data-invalid], &:has([aria-invalid="true"])', description: 'Required selection missing or over the limit: danger border, danger ring on focus. Pair with a Field error.', markup: 'aria-invalid="true" on the input, or data-invalid on the root' },
+        disabled: { selector: '[data-disabled], &:has(input:disabled)', description: 'Grey fill, disabled chips and chevron, not interactive.', markup: 'disabled on the input (and on the chip remove buttons)' },
+        highlighted: { selector: ' .cn-multi-select__option[data-highlighted]', description: 'On the __option: the row under the keyboard cursor or pointer, bg-subtle. Exactly one at a time. Styled in extraCss.', markup: 'data-highlighted on the option; mirror it with aria-activedescendant on the input' },
+        selected: { selector: ' .cn-multi-select__option[aria-selected="true"]', description: 'On the __option: a chosen value; the checkbox square fills with the action color and shows the check, the label turns medium. Styled in extraCss.', markup: 'aria-selected="true" on the option' },
+        'option-disabled': { selector: ' .cn-multi-select__option[aria-disabled="true"]', description: 'On the __option: not selectable, disabled ink, skipped by the keyboard. Styled in extraCss.', markup: 'aria-disabled="true" on the option' },
+    },
+    base: {
+        root: { position: 'relative', display: 'block', width: '100%', 'min-width': '0', color: '{color.fg-default}' },
+        chips: {
+            position: 'relative',
+            display: 'flex',
+            'flex-wrap': 'wrap',
+            'align-items': 'center',
+            gap: '{space.1}',
+            width: '100%',
+            'min-height': CONTROL.md.height,
+            padding: '{space.1.5}',
+            'background-color': '{color.bg-surface}',
+            border: '{border.width.thin} solid {color.border-control}',
+            'border-radius': '{radius.control}',
+            'box-shadow': '{shadow.xs}',
+            cursor: 'text',
+            ...TRANSITION_COLORS,
+        },
+        chip: {
+            display: 'inline-flex',
+            'align-items': 'center',
+            gap: '{space.1}',
+            height: '{space.6}',
+            'max-width': '100%',
+            'padding-inline': '{space.2}',
+            'background-color': '{color.bg-surface}',
+            border: '{border.width.thin} solid {color.border-default}',
+            'border-radius': '{radius.md}',
+            ...typeStyle('body-sm'),
+            'line-height': '{font.lineHeight.none}',
+            color: '{color.fg-default}',
+            'white-space': 'nowrap',
+            cursor: 'default',
+        },
+        'chip-remove': {
+            ...RESET_BUTTON,
+            display: 'inline-flex',
+            'align-items': 'center',
+            'justify-content': 'center',
+            'flex-shrink': '0',
+            width: '{space.4}',
+            height: '{space.4}',
+            'margin-inline-end': 'calc({space.1} * -1)',
+            'border-radius': '{radius.sm}',
+            'font-size': '{size.icon.xs}',
+            color: '{color.fg-subtle}',
+            ...TRANSITION_COLORS,
+        },
+        field: {
+            flex: '1 1 {space.20}',
+            'min-width': '{space.20}',
+            height: '{space.6}',
+            margin: '0',
+            padding: '0 {space.1}',
+            border: '0',
+            outline: 'none',
+            background: 'transparent',
+            ...typeStyle('body-md'),
+            'line-height': '{font.lineHeight.none}',
+            color: 'inherit',
+        },
+        icon: {
+            position: 'absolute',
+            color: '{color.fg-subtle}',
+            'pointer-events': 'none',
+            'transition-property': 'transform, color',
+            'transition-duration': '{motion.duration.normal}',
+            'transition-timing-function': '{motion.easing.standard}',
+        },
+        listbox: {
+            display: 'none',
+            margin: '{space.1} 0 0',
+            padding: '{space.1}',
+            'max-height': '{space.64}',
+            'overflow-y': 'auto',
+            'background-color': '{color.bg-surface-raised}',
+            border: '{border.width.thin} solid {color.border-default}',
+            'border-radius': '{radius.panel}',
+            'box-shadow': '{shadow.lg}',
+            'list-style': 'none',
+        },
+        option: {
+            display: 'flex',
+            'align-items': 'center',
+            gap: '{space.2.5}',
+            height: '{space.9}',
+            'padding-inline': '{space.2.5}',
+            'border-radius': '{radius.md}',
+            ...typeStyle('body-sm'),
+            color: '{color.fg-default}',
+            'white-space': 'nowrap',
+            overflow: 'hidden',
+            cursor: 'pointer',
+            'user-select': 'none',
+        },
+        'option-check': {
+            display: 'inline-flex',
+            'align-items': 'center',
+            'justify-content': 'center',
+            'flex-shrink': '0',
+            width: '{size.icon.md}',
+            height: '{size.icon.md}',
+            'font-size': '{size.icon.xs}',
+            'background-color': '{color.bg-surface}',
+            border: '{border.width.thin} solid {color.border-strong}',
+            'border-radius': '{radius.sm}',
+            color: '{color.fg-on-action}',
+            ...TRANSITION_COLORS,
+        },
+        empty: { display: 'block', padding: '{space.2} {space.2.5}', ...typeStyle('body-sm'), color: '{color.fg-muted}' },
+        '@states': {
+            hover: { chips: { 'border-color': '{color.border-control-hover}' } },
+            focus: { chips: { ...FOCUS_RING, 'border-color': '{color.border-action}' } },
+            open: { listbox: { display: 'block' }, icon: { transform: 'rotate(180deg)' } },
+            invalid: { chips: { 'border-color': '{color.border-danger}' } },
+            disabled: {
+                chips: { 'background-color': '{color.bg-disabled}', color: '{color.fg-disabled}', 'border-color': '{color.border-disabled}', 'box-shadow': 'none', cursor: 'not-allowed' },
+                chip: { color: '{color.fg-disabled}', 'background-color': 'transparent', 'border-color': '{color.border-disabled}' },
+                'chip-remove': { color: '{color.fg-disabled}', 'pointer-events': 'none' },
+                field: { cursor: 'not-allowed' },
+                icon: { color: '{color.fg-disabled}' },
+            },
+        },
+    },
+    variants: {
+        size: {
+            sm: sizeBlock('sm', '{space.5}', '{font.size.xs}'),
+            md: sizeBlock('md', '{space.6}', '{font.size.sm}'),
+            lg: sizeBlock('lg', '{space.7}', '{font.size.md}'),
+        },
+    },
+    extraCss: `
+.cn-multi-select .cn-multi-select__field::placeholder { color: {color.fg-placeholder}; opacity: 1; }
+.cn-multi-select[data-invalid]:focus-within .cn-multi-select__chips, .cn-multi-select:has([aria-invalid="true"]):focus-within .cn-multi-select__chips { box-shadow: {shadow.focus-danger}; border-color: {color.border-danger}; }
+.cn-multi-select .cn-multi-select__chip-remove .cn-icon { stroke-width: 2; }
+.cn-multi-select .cn-multi-select__chip-remove:hover { background-color: {color.bg-subtle}; color: {color.fg-default}; }
+.cn-multi-select .cn-multi-select__chip-remove:focus-visible { outline: none; box-shadow: {shadow.focus}; color: {color.fg-default}; }
+.cn-multi-select .cn-multi-select__option-check .cn-icon { display: none; stroke-width: 2.5; }
+.cn-multi-select .cn-multi-select__option[data-highlighted], .cn-multi-select .cn-multi-select__option:hover { background-color: {color.bg-subtle}; }
+.cn-multi-select .cn-multi-select__option[aria-selected="true"] { font-weight: {font.weight.medium}; }
+.cn-multi-select .cn-multi-select__option[aria-selected="true"] .cn-multi-select__option-check { background-color: {color.bg-action}; border-color: {color.bg-action}; }
+.cn-multi-select .cn-multi-select__option[aria-selected="true"] .cn-multi-select__option-check .cn-icon { display: block; }
+.cn-multi-select .cn-multi-select__option[aria-disabled="true"] { color: {color.fg-disabled}; cursor: not-allowed; background-color: transparent; }
+.cn-multi-select .cn-multi-select__option[aria-disabled="true"] .cn-multi-select__option-check { background-color: {color.bg-disabled}; border-color: {color.border-disabled}; }`,
+    examples: [
+        ex('Closed with values', box({ root: 'data-size="md" data-state="closed" style="max-width:360px"', chips: ['Maya Chen', 'Daniel Costa'], input: 'aria-expanded="false" placeholder="Add people…" aria-label="Assignees"', id: 'ms-closed' }), 'Chips inside the box, the input after them, the chevron at the end of the first line.'),
+        ex('Open with options', box({ root: 'data-size="md" data-state="open" style="max-width:360px"', chips: ['Maya Chen', 'Daniel Costa'], input: 'aria-expanded="true" value="" aria-label="Assignees" aria-activedescendant="ms-owner-sofia"', id: 'ms-owner', body: PEOPLE }), 'Maya and Daniel are selected (filled squares), Sofia is highlighted by the keyboard, Aisha is disabled.'),
+        ex('Open, no results', box({ root: 'data-size="md" data-state="open" style="max-width:360px"', chips: ['Europe'], input: 'aria-expanded="true" value="Antarc" aria-label="Regions"', id: 'ms-region', body: '<li class="cn-multi-select__empty" role="presentation">No regions match “Antarc”</li>' })),
+        ex('Empty (placeholder)', box({ root: 'data-size="md" data-state="closed" style="max-width:360px"', chips: [], input: 'aria-expanded="false" placeholder="Select products…" aria-label="Products"', id: 'ms-empty' }), 'Without chips it looks like a Combobox of the same size.'),
+        ex('Small and large', `<div style="display:flex;flex-direction:column;gap:var(--cn-space-3);max-width:360px">${box({ root: 'data-size="sm" data-state="closed"', chips: ['Japan', 'Norway'], input: 'aria-expanded="false" placeholder="Add a country…" aria-label="Countries (small)"', id: 'ms-sm' })}${box({ root: 'data-size="lg" data-state="closed"', chips: ['Japan', 'Norway'], input: 'aria-expanded="false" placeholder="Add a country…" aria-label="Countries (large)"', id: 'ms-lg' })}</div>`),
+        ex('Invalid', box({ root: 'data-size="md" data-state="closed" data-invalid style="max-width:360px"', chips: [], input: 'aria-expanded="false" aria-invalid="true" placeholder="Add at least one reviewer…" aria-label="Reviewers"', id: 'ms-invalid' }), 'Pair with a Field error such as "Pick at least one reviewer".'),
+        ex('Disabled', box({ root: 'data-size="md" data-state="closed" style="max-width:360px"', chips: ['Elena Rossi', 'Tomás Silva'], input: 'aria-expanded="false" disabled aria-label="Approvers"', id: 'ms-disabled', removeAttrs: ' disabled' })),
+    ],
+    rules: [
+        'Values come from the list only; typing filters, it never creates. If users must add their own values, use TagsInput.',
+        'Selected items render as chips in the box in selection order and stay ticked in the list; removing a chip unticks the option and vice versa.',
+        'The listbox renders in the flow directly under the box (margin-top space.1) inside the root; toggle data-state="open|closed" on the root. Move it to a popper layer only when it would be clipped.',
+        'Options are 36px rows with a 16px checkbox square first; show at most 7 before scrolling (max-height 256px).',
+        'Exactly one option is highlighted at a time (data-highlighted) and follows keyboard and pointer; Enter or Space toggles it without closing the list.',
+        'When nothing matches, render the empty row ("No regions match “…”"); never an empty panel and never close the list.',
+        'State the limit in the helper text when one exists ("Up to 5 reviewers") and mark the box invalid when it is exceeded, not silently ignore the click.',
+        'Sizes: md in forms; sm in filter bars; lg on onboarding screens. Chips are 20 / 24 / 28px tall.',
+    ],
+    a11y: [
+        'The input has role="combobox", aria-expanded, aria-controls="<listbox id>", aria-autocomplete="list" and aria-activedescendant pointing at the highlighted option id.',
+        'The list has role="listbox" aria-multiselectable="true"; each option has role="option", a unique id and aria-selected="true|false". Disabled options use aria-disabled="true".',
+        'Keyboard: Down/Up move the highlight, Enter or Space toggle it, Escape closes, Backspace on an empty input removes the last chip. Focus stays on the input the whole time.',
+        'Each chip remove button is a real <button> with aria-label "Remove {value}"; announce changes in a live region ("Daniel Costa removed, 1 selected").',
+        'The checkbox square is decorative (aria-hidden); the state is carried by aria-selected on the option.',
+    ],
+    related: ['combobox', 'select', 'tags-input', 'checkbox', 'field'],
+};

package/lib/components/notification.mjs

@@ -0,0 +1,175 @@
+import { FOCUS_RING, RESET_BUTTON, TRANSITION_COLORS, ex, ICON, typeStyle } from "./_shared.mjs";
+const HAIRLINE = '{border.width.thin} solid {color.border-default}';
+/** Inline icons for the featured-icon media slot (20px, stroke 1.5, aria-hidden). */
+const SVG = {
+    comment: '<svg class="cn-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 5.5A2 2 0 015.5 3.5h9a2 2 0 012 2v6a2 2 0 01-2 2H8l-3.5 3v-3H5.5a2 2 0 01-2-2v-6z"/></svg>',
+    checkCircle: '<svg class="cn-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="7.25"/><path d="M6.75 10.25l2.25 2.25 4.25-4.5"/></svg>',
+    alert: '<svg class="cn-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 3.25l7.25 12.5H2.75L10 3.25zM10 8v3.5M10 14v.5"/></svg>',
+    upload: '<svg class="cn-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 13.5a3.25 3.25 0 01-.5-6.46A4.5 4.5 0 0114.6 8.2a2.75 2.75 0 01-.6 5.3M10 16V9.5M7.25 12.25L10 9.5l2.75 2.75"/></svg>',
+    spark: '<svg class="cn-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 2.75l1.9 5.35 5.35 1.9-5.35 1.9L10 17.25l-1.9-5.35-5.35-1.9 5.35-1.9z"/></svg>',
+};
+/** 16:9 placeholder image: a muted surface with a simple "chart" silhouette, no network. */
+const IMAGE = `<svg class="cn-notification__image" viewBox="0 0 368 207" role="img" aria-label="Preview of the new reporting dashboard"><rect width="368" height="207" style="fill:var(--cn-color-bg-subtle)"/><rect x="24" y="24" width="140" height="10" rx="5" style="fill:var(--cn-color-border-strong)"/><rect x="24" y="44" width="88" height="8" rx="4" style="fill:var(--cn-color-border-default)"/><path d="M24 160 L80 128 L136 142 L192 96 L248 110 L304 64 L344 80" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="stroke:var(--cn-color-bg-action)"/><path d="M24 183h320" stroke-width="1" style="stroke:var(--cn-color-border-default)"/></svg>`;
+const dismiss = `<button type="button" class="cn-notification__dismiss" aria-label="Dismiss">${ICON.x}</button>`;
+const avatar = (initials, name) => `<span class="cn-notification__media" role="img" aria-label="${name}">${initials}</span>`;
+const featured = (svg) => `<span class="cn-notification__media" aria-hidden="true">${svg}</span>`;
+const actions = (secondary, primary) => `<div class="cn-notification__actions"><button type="button" class="cn-button" data-variant="ghost" data-size="sm"><span class="cn-button__label">${secondary}</span></button><button type="button" class="cn-button" data-variant="link" data-size="sm"><span class="cn-button__label">${primary}</span></button></div>`;
+const card = (variant, tone, inner) => `<div class="cn-notification" data-variant="${variant}" data-tone="${tone}" role="status">${inner}</div>`;
+export const notification = {
+    name: 'Notification',
+    slug: 'notification',
+    category: 'feedback',
+    description: 'An in-app notification card: a 400px raised white panel with an optional avatar or featured icon on the left, a semibold title, one or two lines of supporting text, a timestamp and up to two text actions. Unlike Toast it is not timed: it sits in a notification panel or feed until dismissed.',
+    usage: 'Use in a notifications drawer, a bell-menu panel or an inbox list to tell a person something happened that they may act on later: a mention, a comment, an upload finishing, a product announcement. Not for transient confirmations (Toast), not for page-level warnings (Alert or Banner) and not for anything that needs a decision now (Dialog).',
+    anatomy: [
+        { part: 'root', element: 'div', description: 'The card. 400px wide (max 100%), raised surface, hairline, radius card, shadow-lg, padding 16. Flex row: media, content, then the absolutely-positioned dismiss button. role="status".' },
+        { part: 'media', element: 'span', description: 'Optional 40px slot on the left: an avatar circle with initials (with-avatar) or a featured icon square/circle holding a 20px icon (with-featured-icon). Tone colors the featured icon.', optional: true },
+        { part: 'content', element: 'div', description: 'Title, description, time, optional progress, image and actions. Flexes to fill; keeps 32px of right padding clear for the dismiss button.' },
+        { part: 'title', element: 'div', description: 'label-md (14 semibold), one line: who did what ("Maya Chen commented on your post") or what happened ("Export ready").' },
+        { part: 'description', element: 'p', description: 'body-md muted, one or two lines: the comment excerpt, the file name, the change summary.', optional: true },
+        { part: 'time', element: 'time', description: 'body-sm subtle timestamp under the description ("2 minutes ago"). Use a <time datetime>.', optional: true },
+        { part: 'progress', element: 'div', description: 'Optional upload/processing row: an 8px track with the action-colored fill plus a percentage label (label-sm muted). Set the fill width inline and mirror it in aria-valuenow.', optional: true },
+        { part: 'progress-track', element: 'div', description: 'The 8px rounded track (bg-muted) inside the progress row. role="progressbar".', optional: true },
+        { part: 'progress-fill', element: 'div', description: 'The filled portion of the track. Width is the percentage (inline style).', optional: true },
+        { part: 'image', element: 'img', description: 'Optional full-width 16:9 image under the text (product announcements). Radius md, object-fit cover.', optional: true },
+        { part: 'actions', element: 'div', description: 'Row of at most two Buttons: a ghost sm ("Dismiss", "Later") then a link sm ("View changes", "Reply").', optional: true },
+        { part: 'dismiss', element: 'button', description: '36px ghost icon button with a 20px X, absolutely positioned in the top-right corner (8px inset). aria-label="Dismiss".', optional: true },
+    ],
+    props: {
+        variant: {
+            values: ['default', 'with-avatar', 'with-featured-icon', 'with-image', 'with-progress', 'with-actions'],
+            default: 'default',
+            description: 'default = text only (title, description, time); with-avatar = a 40px avatar of the person who acted, for social events (comments, mentions, invites); with-featured-icon = a 40px featured icon for system events (payment, export, sync); with-image = a full-width 16:9 image below the text, for announcements; with-progress = a progress row for uploads and long jobs; with-actions = the text plus a Dismiss + primary-link action row (any variant may also carry actions).',
+        },
+        tone: {
+            values: ['neutral', 'success', 'warning', 'danger'],
+            default: 'neutral',
+            description: 'Colors the featured icon only; the card stays white. neutral = informational (grey icon in a hairline square); success = something completed (green tinted circle); warning = needs attention soon (amber); danger = something failed (red). Avatars and images ignore the tone.',
+        },
+    },
+    states: {
+        dismissHover: { selector: ' .cn-notification__dismiss:hover', description: 'Pointer over the dismiss button: subtle fill, default ink. Styled in extraCss because it lives on a child.', markup: 'native :hover on .cn-notification__dismiss' },
+        dismissFocus: { selector: ' .cn-notification__dismiss:focus-visible', description: 'Keyboard focus on the dismiss button shows the focus ring. Styled in extraCss.', markup: 'native :focus-visible on .cn-notification__dismiss' },
+        unread: { selector: '[data-unread]', description: 'Not yet seen: the title stays semibold and a 8px action-colored dot sits after the title. Clear the attribute when the panel is opened.', markup: 'data-unread on the root' },
+    },
+    base: {
+        root: {
+            position: 'relative',
+            display: 'flex',
+            'align-items': 'flex-start',
+            gap: '{space.4}',
+            width: '400px',
+            'max-width': '100%',
+            padding: '{space.4}',
+            'background-color': '{color.bg-surface-raised}',
+            border: HAIRLINE,
+            'border-radius': '{radius.card}',
+            'box-shadow': '{shadow.lg}',
+            color: '{color.fg-default}',
+            ...typeStyle('body-md'),
+        },
+        media: {
+            display: 'inline-flex',
+            'align-items': 'center',
+            'justify-content': 'center',
+            'flex-shrink': '0',
+            width: '{space.10}',
+            height: '{space.10}',
+            'border-radius': '{radius.full}',
+            'background-color': '{color.bg-subtle}',
+            color: '{color.fg-muted}',
+            ...typeStyle('label-sm'),
+            'letter-spacing': '{font.letterSpacing.wide}',
+            overflow: 'hidden',
+            'user-select': 'none',
+        },
+        content: { flex: '1 1 auto', 'min-width': '0', 'padding-inline-end': '{space.8}' },
+        title: { ...typeStyle('label-md'), color: '{color.fg-default}', 'overflow-wrap': 'anywhere' },
+        description: { ...typeStyle('body-md'), color: '{color.fg-muted}', 'margin-top': '{space.1}', 'overflow-wrap': 'anywhere' },
+        time: { display: 'block', ...typeStyle('body-sm'), color: '{color.fg-subtle}', 'margin-top': '{space.1}' },
+        progress: {
+            display: 'flex',
+            'align-items': 'center',
+            gap: '{space.3}',
+            'margin-top': '{space.3}',
+            ...typeStyle('label-sm'),
+            color: '{color.fg-muted}',
+            'font-variant-numeric': 'tabular-nums',
+        },
+        'progress-track': { flex: '1 1 auto', height: '{space.2}', 'border-radius': '{radius.full}', 'background-color': '{color.bg-muted}', overflow: 'hidden' },
+        'progress-fill': { height: '100%', 'border-radius': '{radius.full}', 'background-color': '{color.bg-action}', 'transition-property': 'width', 'transition-duration': '{motion.duration.slow}', 'transition-timing-function': '{motion.easing.standard}' },
+        image: { display: 'block', width: '100%', 'aspect-ratio': '16 / 9', 'object-fit': 'cover', 'border-radius': '{radius.md}', 'background-color': '{color.bg-subtle}', 'margin-top': '{space.3}' },
+        actions: { display: 'flex', 'align-items': 'center', gap: '{space.3}', 'margin-top': '{space.3}' },
+        dismiss: {
+            ...RESET_BUTTON,
+            position: 'absolute',
+            top: '{space.2}',
+            right: '{space.2}',
+            display: 'inline-flex',
+            'align-items': 'center',
+            'justify-content': 'center',
+            width: '{space.9}',
+            height: '{space.9}',
+            'border-radius': '{radius.md}',
+            color: '{color.fg-subtle}',
+            ...TRANSITION_COLORS,
+        },
+        '@states': {
+            unread: { title: { 'font-weight': '{font.weight.semibold}' } },
+        },
+    },
+    variants: {
+        variant: {
+            default: { root: {} },
+            'with-avatar': { media: { 'border-radius': '{radius.full}' } },
+            'with-featured-icon': { media: { 'border-radius': '{radius.lg}', 'background-color': '{color.bg-surface}', border: HAIRLINE, 'box-shadow': '{shadow.xs}', color: '{color.fg-muted}' } },
+            'with-image': { root: {} },
+            'with-progress': { root: {} },
+            'with-actions': { root: {} },
+        },
+        tone: {
+            neutral: { media: {} },
+            success: { media: { 'background-color': '{color.bg-success-subtle}', color: '{color.fg-success}', 'border-color': 'transparent', 'border-radius': '{radius.full}', 'box-shadow': 'none' } },
+            warning: { media: { 'background-color': '{color.bg-warning-subtle}', color: '{color.fg-warning}', 'border-color': 'transparent', 'border-radius': '{radius.full}', 'box-shadow': 'none' } },
+            danger: { media: { 'background-color': '{color.bg-danger-subtle}', color: '{color.fg-danger}', 'border-color': 'transparent', 'border-radius': '{radius.full}', 'box-shadow': 'none' } },
+        },
+    },
+    extraCss: `
+.cn-notification .cn-notification__media .cn-icon { width: {size.icon.md}; height: {size.icon.md}; }
+.cn-notification .cn-notification__dismiss .cn-icon { width: {size.icon.md}; height: {size.icon.md}; }
+.cn-notification .cn-notification__dismiss:hover { background-color: {color.bg-subtle}; color: {color.fg-default}; }
+.cn-notification .cn-notification__dismiss:focus-visible { outline: none; box-shadow: ${FOCUS_RING['box-shadow']}; }
+.cn-notification .cn-notification__actions > .cn-button[data-variant="ghost"]:first-child { margin-inline-start: calc(-1 * {size.controlPadding.sm}); }
+.cn-notification[data-unread] .cn-notification__title::after { content: ''; display: inline-block; width: {space.2}; height: {space.2}; margin-inline-start: {space.2}; border-radius: {radius.full}; background-color: {color.bg-action}; vertical-align: middle; }`,
+    examples: [
+        ex('Default (text only)', card('default', 'neutral', `<div class="cn-notification__content"><div class="cn-notification__title">Your export is ready</div><p class="cn-notification__description">prospects-q3.csv · 1.2 MB · 2,418 rows</p><time class="cn-notification__time" datetime="2026-09-11T09:41">Just now</time></div>${dismiss}`)),
+        ex('With avatar and actions', card('with-avatar', 'neutral', `${avatar('OR', 'Maya Chen')}<div class="cn-notification__content"><div class="cn-notification__title">Maya Chen commented on your post</div><p class="cn-notification__description">“Looks great — can we ship the reporting tab on Monday instead of Friday?”</p><time class="cn-notification__time" datetime="2026-09-11T09:39">2 minutes ago</time>${actions('Dismiss', 'Reply')}</div>${dismiss}`), 'Social events show who acted. Two actions at most: a ghost Dismiss and one link action.'),
+        ex('Featured icon, success tone', card('with-featured-icon', 'success', `${featured(SVG.checkCircle)}<div class="cn-notification__content"><div class="cn-notification__title">Payment received</div><p class="cn-notification__description">Nakamura Trading Co. paid invoice INV-3066 · $12,400.00</p><time class="cn-notification__time" datetime="2026-09-11T08:12">1 hour ago</time>${actions('Dismiss', 'View invoice')}</div>${dismiss}`)),
+        ex('Upload in progress', card('with-progress', 'neutral', `${featured(SVG.upload)}<div class="cn-notification__content"><div class="cn-notification__title">Uploading design-system.fig</div><p class="cn-notification__description">1.4 MB of 2.3 MB · about 20 seconds left</p><div class="cn-notification__progress"><div class="cn-notification__progress-track" role="progressbar" aria-label="Upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60"><div class="cn-notification__progress-fill" style="width:60%"></div></div><span>60%</span></div></div>${dismiss}`), 'The neutral featured icon is a hairline square ("modern"); toned icons become tinted circles.'),
+        ex('With image (announcement)', card('with-image', 'neutral', `${featured(SVG.spark)}<div class="cn-notification__content"><div class="cn-notification__title">New feature: reporting</div><p class="cn-notification__description">Build custom dashboards from any search and share them with your team.</p><time class="cn-notification__time" datetime="2026-09-10T17:00">Yesterday</time>${IMAGE}${actions('Dismiss', 'Learn more')}</div>${dismiss}`), 'The image is an inline SVG placeholder here; in the app it is an <img> with alt text.'),
+        ex('Warning with actions, unread', card('with-actions', 'warning', `${featured(SVG.alert)}<div class="cn-notification__content"><div class="cn-notification__title">Storage is 92% full</div><p class="cn-notification__description">Uploads will pause at 100%. Free up space or upgrade your plan.</p><time class="cn-notification__time" datetime="2026-09-11T07:30">3 hours ago</time>${actions('Later', 'Upgrade plan')}</div>${dismiss}`).replace('role="status"', 'role="status" data-unread'), 'data-unread adds the action-colored dot after the title.'),
+    ],
+    recipes: [
+        ex('Danger tone, sync failed', card('with-featured-icon', 'danger', `${featured(SVG.alert)}<div class="cn-notification__content"><div class="cn-notification__title">Pipedrive sync failed</div><p class="cn-notification__description">14 deals were not updated. The token expired on Sep 9.</p><time class="cn-notification__time" datetime="2026-09-11T06:02">5 hours ago</time>${actions('Dismiss', 'Reconnect')}</div>${dismiss}`), 'Danger notifications report a background failure and offer the fix as the link action; anything needing an immediate decision is a Dialog instead.'),
+        ex('Stack in a panel', `<div style="display:flex;flex-direction:column;gap:var(--cn-space-3)">${card('with-avatar', 'neutral', `${avatar('PB', 'Daniel Costa')}<div class="cn-notification__content"><div class="cn-notification__title">Daniel Costa mentioned you in Q3 launch plan</div><time class="cn-notification__time" datetime="2026-09-11T09:20">20 minutes ago</time></div>${dismiss}`)}${card('with-avatar', 'neutral', `${avatar('LS', 'Sofia Almeida')}<div class="cn-notification__content"><div class="cn-notification__title">Sofia Almeida invited you to Brand refresh</div><time class="cn-notification__time" datetime="2026-09-11T08:55">45 minutes ago</time>${actions('Decline', 'Accept')}</div>${dismiss}`)}</div>`, 'Newest first, 12px apart, inside a drawer or a popover anchored to the bell icon.'),
+    ],
+    rules: [
+        'Width is 400px (max 100%); the card never stretches to fill a wide panel. Panels and drawers are sized to the card, not the other way around.',
+        'Title is one line, sentence case, no period: "{Person} {verb} {object}" for social events, "{Object} {state}" for system events.',
+        'Description is at most two lines: a quoted excerpt, a file name with size, or the concrete change. Truncate long comments with an ellipsis and let the action open the full thing.',
+        'Always show a timestamp (relative under 24h, absolute after) in a <time datetime>.',
+        'At most two actions: a ghost sm secondary first ("Dismiss", "Later", "Decline") and one link sm primary last ("View changes", "Reply", "Accept").',
+        'The card stays white in every tone; only the featured icon is tinted. Never tint the whole card or add a colored left bar.',
+        'Avatar for people, featured icon for the system, image only for announcements. Never two media slots.',
+        'Progress rows show a percentage and a plain-language remainder ("about 20 seconds left"); when the job ends the card becomes a success notification, it does not disappear.',
+        'Unread state is a dot after the title plus semibold; clear it when the panel opens, never require a click per card.',
+    ],
+    a11y: [
+        'role="status" on the card so new notifications are announced politely; the panel that holds them is a region labelled "Notifications".',
+        'The dismiss button has aria-label="Dismiss" and is the last Tab stop inside the card; Escape inside the panel dismisses the focused card.',
+        'Avatars with initials carry role="img" and aria-label="Full name"; featured icons and images used as decoration are aria-hidden.',
+        'Progress uses role="progressbar" with aria-valuenow/min/max on the track and the percentage as visible text.',
+        'The unread dot is decorative; expose "unread" in the accessible name or a visually hidden word so screen readers get it too.',
+    ],
+    related: ['toast', 'alert', 'banner', 'button', 'avatar', 'progress'],
+};

package/lib/components/number-input.mjs

@@ -0,0 +1,149 @@
+import { CONTROL, FOCUS_RING, RESET_BUTTON, TRANSITION_COLORS, SIZE_PROP, ex, ICON, typeStyle } from "./_shared.mjs";
+// Numeric field with a unit suffix and a pair of square ghost stepper buttons separated by hairlines.
+// The native spinner is hidden; the wrapper draws border, shadow and focus ring like Input.
+const STEP_WIDTH = { sm: '{space.8}', md: '{space.9}', lg: '{space.10}' };
+const stepper = {
+    ...RESET_BUTTON,
+    display: 'inline-flex',
+    'align-items': 'center',
+    'justify-content': 'center',
+    'flex-shrink': '0',
+    'align-self': 'stretch',
+    width: '{space.9}',
+    'font-size': '{size.icon.md}',
+    color: '{color.fg-subtle}',
+    'border-inline-start': '{border.width.thin} solid {color.border-control}',
+    ...TRANSITION_COLORS,
+};
+const sizeBlock = (s) => ({
+    root: { height: CONTROL[s].height, 'border-radius': CONTROL[s].radius },
+    field: { 'padding-inline': CONTROL[s].px, 'font-size': CONTROL[s].font },
+    unit: { 'font-size': CONTROL[s].font },
+    decrement: { width: STEP_WIDTH[s] },
+    increment: { width: STEP_WIDTH[s] },
+});
+const MINUS = '<svg class="cn-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M3 8h10"/></svg>';
+const steppers = (label, attrs = '') => `<button type="button" class="cn-number-input__decrement" aria-label="Decrease ${label}" tabindex="-1"${attrs}>${MINUS}</button><button type="button" class="cn-number-input__increment" aria-label="Increase ${label}" tabindex="-1"${attrs}>${ICON.plus}</button>`;
+const num = (o) => `<div class="cn-number-input" data-variant="${o.variant ?? 'stepper'}" data-size="${o.size ?? 'md'}"${o.root ?? ''} style="max-width:240px"><input class="cn-number-input__field" type="number" inputmode="decimal" value="${o.value}" aria-label="${o.label}"${o.attrs ?? ''}>${o.unit ? `<span class="cn-number-input__unit">${o.unit}</span>` : ''}${o.variant === 'plain' ? '' : steppers(o.label.toLowerCase(), o.stepAttrs)}</div>`;
+export const numberInput = {
+    name: 'NumberInput',
+    slug: 'number-input',
+    category: 'forms',
+    description: 'A numeric Input with an optional unit suffix and, in the stepper variant, two square ghost buttons (−, +) separated by hairlines at the end. The native spinner is hidden; the wrapper draws the border and focus ring.',
+    usage: 'Quantities, seats, weights, percentages and other numbers the user adjusts by small steps. For free numeric text (an invoice total, a phone number) use Input with inputmode; for a currency amount with a selector use InputGroup; for a value on a range use Slider.',
+    anatomy: [
+        { part: 'root', element: 'div', description: 'The bordered wrapper (inline-flex, stretch): background, hairline, radius, shadow-xs, focus ring on :focus-within. Carries data-variant, data-size, data-invalid, data-disabled.' },
+        { part: 'field', element: 'input', description: 'The native <input type="number" inputmode="decimal">. No border, tabular numerals, spinner hidden.' },
+        { part: 'unit', element: 'span', description: 'Muted suffix after the value ("kg", "%", "seats"). Not part of the value.', optional: true },
+        { part: 'decrement', element: 'button', description: 'Square ghost button with a minus icon, separated by a hairline. tabindex="-1" (keyboard users use the arrow keys). Disable it at min.', optional: true },
+        { part: 'increment', element: 'button', description: 'Square ghost button with a plus icon, last child. Disable it at max.', optional: true },
+    ],
+    props: {
+        size: SIZE_PROP(['sm', 'md', 'lg']),
+        variant: { values: ['stepper', 'plain'], default: 'stepper', description: 'stepper = value plus the −/+ buttons (quantities, seats, anything adjusted in small steps); plain = value and unit only, no buttons (percentages, weights and other typed numbers where stepping makes no sense).' },
+    },
+    states: {
+        hover: { selector: ':hover:not([data-disabled])', description: 'Border strengthens.', markup: 'native :hover' },
+        focus: { selector: ':focus-within', description: 'Border becomes the action color and the ring appears (also when a stepper button is focused).', markup: 'native :focus-within on the wrapper' },
+        invalid: { selector: '[data-invalid], &:has([aria-invalid="true"])', description: 'Out of range or not a number: danger border, danger ring on focus. Pair with a Field error.', markup: 'aria-invalid="true" on the input, or data-invalid on the wrapper' },
+        disabled: { selector: '[data-disabled], &:has(input:disabled)', description: 'Grey fill, disabled text and buttons, not interactive.', markup: 'disabled on the input (and on both buttons)' },
+        stepHover: { selector: ' .cn-number-input__decrement:hover:not(:disabled)', description: 'On a stepper button: subtle fill and default ink. Same for __increment. Styled in extraCss.', markup: 'native :hover on a stepper button' },
+        stepDisabled: { selector: ' .cn-number-input__decrement:disabled', description: 'On a stepper button at the min (or __increment at the max): disabled ink, no hover. Styled in extraCss.', markup: 'disabled on the button' },
+    },
+    base: {
+        root: {
+            display: 'inline-flex',
+            'align-items': 'stretch',
+            width: '100%',
+            'max-width': '100%',
+            'min-width': '0',
+            'background-color': '{color.bg-surface}',
+            border: '{border.width.thin} solid {color.border-control}',
+            color: '{color.fg-default}',
+            'box-shadow': '{shadow.xs}',
+            overflow: 'hidden',
+            ...TRANSITION_COLORS,
+        },
+        field: {
+            flex: '1 1 auto',
+            width: '100%',
+            'min-width': '0',
+            height: '100%',
+            margin: '0',
+            border: '0',
+            outline: 'none',
+            background: 'transparent',
+            ...typeStyle('body-md'),
+            'line-height': '{font.lineHeight.none}',
+            'font-variant-numeric': 'tabular-nums',
+            color: 'inherit',
+            '-moz-appearance': 'textfield',
+        },
+        unit: {
+            display: 'flex',
+            'align-items': 'center',
+            'flex-shrink': '0',
+            'padding-inline-end': '{space.3}',
+            color: '{color.fg-muted}',
+            ...typeStyle('body-md'),
+            'line-height': '{font.lineHeight.none}',
+            'white-space': 'nowrap',
+            'user-select': 'none',
+        },
+        decrement: stepper,
+        increment: stepper,
+        '@states': {
+            hover: { root: { 'border-color': '{color.border-control-hover}' } },
+            focus: { root: { ...FOCUS_RING, 'border-color': '{color.border-action}' } },
+            invalid: { root: { 'border-color': '{color.border-danger}' } },
+            disabled: {
+                root: { 'background-color': '{color.bg-disabled}', color: '{color.fg-disabled}', 'border-color': '{color.border-disabled}', 'box-shadow': 'none', cursor: 'not-allowed' },
+                field: { cursor: 'not-allowed' },
+                unit: { color: '{color.fg-disabled}' },
+                decrement: { color: '{color.fg-disabled}', cursor: 'not-allowed', 'border-color': '{color.border-disabled}' },
+                increment: { color: '{color.fg-disabled}', cursor: 'not-allowed', 'border-color': '{color.border-disabled}' },
+            },
+        },
+    },
+    variants: {
+        size: { sm: sizeBlock('sm'), md: sizeBlock('md'), lg: sizeBlock('lg') },
+        variant: {
+            stepper: { root: {} },
+            plain: { decrement: { display: 'none' }, increment: { display: 'none' } },
+        },
+    },
+    extraCss: `
+.cn-number-input .cn-number-input__field::placeholder { color: {color.fg-placeholder}; opacity: 1; }
+.cn-number-input .cn-number-input__field::-webkit-outer-spin-button, .cn-number-input .cn-number-input__field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.cn-number-input:has([aria-invalid="true"]):focus-within, .cn-number-input[data-invalid]:focus-within { box-shadow: {shadow.focus-danger}; border-color: {color.border-danger}; }
+.cn-number-input .cn-number-input__decrement:hover:not(:disabled), .cn-number-input .cn-number-input__increment:hover:not(:disabled) { background-color: {color.bg-subtle}; color: {color.fg-default}; }
+.cn-number-input .cn-number-input__decrement:active:not(:disabled), .cn-number-input .cn-number-input__increment:active:not(:disabled) { background-color: {color.bg-muted}; }
+.cn-number-input .cn-number-input__decrement:focus-visible, .cn-number-input .cn-number-input__increment:focus-visible { outline: none; box-shadow: inset 0 0 0 2px {color.border-action}; }
+.cn-number-input .cn-number-input__decrement:disabled, .cn-number-input .cn-number-input__increment:disabled { color: {color.fg-disabled}; cursor: not-allowed; background-color: transparent; }`,
+    examples: [
+        ex('Stepper (default)', num({ label: 'Seats', value: '12', attrs: ' min="1" max="200" step="1"' }), 'Value on the left, −/+ at the end. Arrow keys step the value from the keyboard.'),
+        ex('With unit', num({ label: 'Pallet weight', value: '480', unit: 'kg', attrs: ' min="0" step="10"' }), 'The unit is a muted suffix, not part of the value.'),
+        ex('Plain (no stepper)', num({ variant: 'plain', label: 'Discount', value: '15', unit: '%', attrs: ' min="0" max="100"' }), 'For typed numbers where stepping makes no sense.'),
+        ex('Sizes', `<div style="display:flex;flex-direction:column;gap:var(--cn-space-3);max-width:240px">${num({ size: 'sm', label: 'Quantity', value: '3' })}${num({ size: 'md', label: 'Quantity', value: '3' })}${num({ size: 'lg', label: 'Quantity', value: '3' })}</div>`, 'Stepper buttons are 32 / 36 / 40px wide and always stretch to the field height.'),
+        ex('At the minimum', num({ label: 'Seats', value: '1', attrs: ' min="1"', stepAttrs: '' }).replace('aria-label="Decrease seats" tabindex="-1"', 'aria-label="Decrease seats" tabindex="-1" disabled'), 'The decrement button is disabled at min; the increment at max.'),
+        ex('Invalid', num({ label: 'Seats', value: '0', attrs: ' min="1" aria-invalid="true"' }), 'Pair with a Field error such as "Enter at least 1 seat".'),
+        ex('Disabled', num({ label: 'Seats', value: '40', unit: 'seats', attrs: ' disabled', stepAttrs: ' disabled' })),
+    ],
+    rules: [
+        'Use type="number" with inputmode="decimal" and real min / max / step attributes; the stepper buttons call stepDown() / stepUp() on the input, never their own arithmetic.',
+        'Disable the decrement at min and the increment at max instead of clamping silently.',
+        'The unit is a suffix after the value ("kg", "%", "seats"); a currency with a selector is an InputGroup, not a NumberInput.',
+        'stepper for small-step adjustments (quantities, seats, days); plain for typed values (percentages, weights, prices). Do not add steppers to a value nobody increments by one.',
+        'Numbers are right-aligned only in tables; inside forms they stay left-aligned like every other field.',
+        'Width comes from the layout; cap it with max-width on the Field (120–240px) since numbers are short.',
+        'Sizes: md in forms; sm in tables and toolbars; lg on marketing screens.',
+        'Invalid must be accompanied by a Field error that states the allowed range ("Between 1 and 200").',
+    ],
+    a11y: [
+        'The input has an accessible name (label for / aria-label); the stepper buttons say "Increase {name}" / "Decrease {name}".',
+        'Stepper buttons use tabindex="-1": keyboard users step with Arrow Up/Down (native) and never need to tab through the buttons.',
+        'Keep the native input so aria-valuemin / max come for free; when invalid set aria-invalid="true" and aria-describedby to the error id.',
+        'Focus is shown on the wrapper (:focus-within); a clicked stepper shows an inset ring so it stays visible inside the clipped wrapper.',
+    ],
+    related: ['input', 'input-group', 'field', 'slider'],
+};