@aurodesignsystem-dev/auro-formkit 0.0.0-pr1578.0 → 0.0.0-pr1581.0

package/ai/specs/auro-input.spec.yaml

@@ -0,0 +1,392 @@
+# GENERATED by packages/build-tools/src/aiSpecGenerator.mjs — do not edit by hand.
+# Authored inputs live in ai/_authored/auro-input.overlay.yaml
+component: auro-input
+version: 0.0.0
+summary: Single-line text input (types text, email, password, number) with built-in validation, required/error states, and a bordered theme.
+generatedFrom:
+  cem: custom-elements.json#auro-input
+  cssRecipe: components/input/demo/css-only.md
+  overlay: ai/_authored/auro-input.overlay.yaml
+sourceOfTruth:
+  component: components/input/src/auro-input.js
+visual:
+  tokensImport: ./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css
+  rule: NEVER hardcode a hex, px, rem, or font-family value. Every visual value MUST be an Auro --ds-* token via var(--ds-token, fallback). Literal values are allowed only as the second argument (fallback) of var().
+  css: |-
+    @import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
+
+    .input-field {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      height: var(--ds-size-600, 3rem);
+      padding: 0 var(--ds-size-200, 1rem);
+      font-family: var(--ds-font-family-default, sans-serif);
+      font-size: var(--ds-text-body-default-size, 1rem);
+      line-height: var(--ds-text-body-default-line-height, 1.5);
+      color: var(--ds-color-text-primary-default, #1d1d1d);
+      background-color: var(--ds-color-container-primary-default, #ffffff);
+      border: 1px solid var(--ds-color-border-ui-default, #6e767f);
+      border-radius: var(--ds-border-radius, 4px);
+      outline: none;
+    }
+
+    .input-field:focus-visible {
+      border-color: var(--ds-color-border-active-default, #01426a);
+      outline: 2px solid var(--ds-color-border-active-default, #01426a);
+      outline-offset: 1px;
+    }
+
+    .input-field:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    .input-field[aria-invalid="true"] {
+      border-color: var(--ds-color-border-error-default, #d50032);
+    }
+
+    .input-label {
+      display: block;
+      margin-bottom: var(--ds-size-50, 0.25rem);
+      font-size: var(--ds-text-body-sm-size, 0.875rem);
+      color: var(--ds-color-text-secondary-default, #6e767f);
+    }
+
+    .input-helptext {
+      display: block;
+      margin-top: var(--ds-size-50, 0.25rem);
+      font-size: var(--ds-text-body-sm-size, 0.875rem);
+      color: var(--ds-color-text-secondary-default, #6e767f);
+    }
+
+    .input-helptext[data-error="true"] {
+      color: var(--ds-color-text-error-default, #d50032);
+    }
+api:
+  attributes:
+    - name: a11yRole
+      tier: enhanced
+      description: The value for the role attribute.
+    - name: a11yControls
+      tier: enhanced
+      description: The value for the aria-controls attribute.
+    - name: a11yExpanded
+      tier: enhanced
+      description: The value for the aria-expanded attribute.
+    - name: a11yActivedescendant
+      tier: enhanced
+      description: The value for the aria-activedescendant attribute.
+    - name: activeLabel
+      tier: wc-only
+      default: 'false'
+      description: If set, the label will remain fixed in the active position.
+    - name: appearance
+      tier: wc-only
+      default: '"default"'
+      description: Defines whether the component will be on lighter or darker backgrounds.
+    - name: autocapitalize
+      tier: core
+      native: autocapitalize
+      description: An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+    - name: autocomplete
+      tier: core
+      native: autocomplete
+      description: An enumerated attribute that defines what the user agent can suggest for autofill.
+    - name: autocorrect
+      tier: core
+      native: autocorrect
+      description: When set to `off`, stops iOS from auto-correcting words when typed into a text box.
+    - name: customValidityTypeEmail
+      tier: enhanced
+      description: Custom help text message for email type validity.
+    - name: disabled
+      tier: core
+      native: disabled
+      default: 'false'
+      description: If set, disables the input.
+    - name: dvInputOnly
+      tier: wc-only
+      default: 'false'
+      description: If defined, the display value slot content will only mask the HTML5 input element.
+    - name: error
+      tier: wc-only
+      description: When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+    - name: errorMessage
+      tier: wc-only
+      description: Contains the help text message for the current validity error.
+    - name: format
+      tier: wc-only
+      description: Overrides LitElement's generated accessor so we can track whether the consumer explicitly set `format`.
+    - name: hideLabelVisually
+      tier: core
+      native: add a visually-hidden class to the <label> (keep it in the DOM)
+      default: 'false'
+      description: If set, the label will be hidden visually but still accessible to assistive technologies.
+    - name: icon
+      tier: wc-only
+      default: 'false'
+      description: If set, will render an icon inside the input to the left of the value.
+    - name: id
+      tier: core
+      native: id
+      description: The id global attribute defines an identifier (ID) which must be unique in the whole document.
+    - name: inputmode
+      tier: core
+      native: inputmode
+      description: Exposes inputmode attribute for input.
+    - name: lang
+      tier: core
+      native: lang
+      description: Defines the language of an element.
+    - name: locale
+      tier: enhanced
+      default: '''en-US'''
+      description: Defines the locale of an element.
+    - name: max
+      tier: core
+      native: max
+      default: undefined
+      description: The maximum value allowed.
+    - name: maxLength
+      tier: core
+      native: maxlength
+      default: undefined
+      description: The maximum number of characters the user can enter into the text input.
+    - name: min
+      tier: core
+      native: min
+      default: undefined
+      description: The minimum value allowed.
+    - name: minLength
+      tier: core
+      native: minlength
+      default: undefined
+      description: The minimum number of characters the user can enter into the text input.
+    - name: name
+      tier: core
+      native: name
+      description: Populates the `name` attribute on the input.
+    - name: nested
+      tier: wc-only
+      description: Sets styles for nested operation - removes borders, hides help + error text, and hides accents.
+    - name: noValidate
+      tier: wc-only
+      default: 'false'
+      description: If set, disables auto-validation on blur.
+    - name: onDark
+      tier: wc-only
+      default: 'false'
+      description: DEPRECATED - use `appearance="inverse"` instead.
+    - name: pattern
+      tier: core
+      native: pattern
+      description: Specifies a regular expression the form control's value should match.
+    - name: placeholder
+      tier: core
+      native: placeholder
+      description: Define custom placeholder text.
+    - name: readonly
+      tier: core
+      native: readonly (+ aria-readonly="true")
+      description: Makes the input read-only, but can be set programmatically.
+    - name: required
+      tier: core
+      native: required
+      default: 'false'
+      description: Populates the `required` attribute on the input.
+    - name: setCustomValidity
+      tier: wc-only
+      description: Sets a custom help text message to display for all validityStates.
+    - name: setCustomValidityBadInput
+      tier: enhanced
+      description: Custom help text message to display when validity = `badInput`.
+    - name: setCustomValidityCustomError
+      tier: enhanced
+      description: Custom help text message to display when validity = `customError`.
+    - name: setCustomValidityForType
+      tier: enhanced
+      default: undefined
+      description: Custom help text message to display for the declared element `type` and type validity fails.
+    - name: setCustomValidityPatternMismatch
+      tier: enhanced
+      description: Custom help text message to display when validity = `patternMismatch`.
+    - name: setCustomValidityRangeOverflow
+      tier: enhanced
+      description: Custom help text message to display when validity = `rangeOverflow`.
+    - name: setCustomValidityRangeUnderflow
+      tier: enhanced
+      description: Custom help text message to display when validity = `rangeUnderflow`.
+    - name: setCustomValidityTooLong
+      tier: enhanced
+      description: Custom help text message to display when validity = `tooLong`.
+    - name: setCustomValidityTooShort
+      tier: enhanced
+      description: Custom help text message to display when validity = `tooShort`.
+    - name: setCustomValidityValueMissing
+      tier: enhanced
+      description: Custom help text message to display when validity = `valueMissing`.
+    - name: showPassword
+      tier: wc-only
+      default: 'false'
+    - name: simple
+      tier: wc-only
+      description: Simple makes the input render without a border.
+    - name: spellcheck
+      tier: core
+      native: spellcheck
+      description: An enumerated attribute defines whether the element may be checked for spelling errors.
+    - name: type
+      tier: core
+      native: type
+      enum:
+        - text
+        - email
+        - password
+        - number
+      default: '''text'''
+      description: Populates the `type` attribute on the input.
+    - name: validateOnInput
+      tier: wc-only
+      description: Sets validation mode to re-eval with each input.
+    - name: validity
+      tier: wc-only
+      description: Specifies the `validityState` this element is in.
+    - name: value
+      tier: core
+      native: value
+      default: undefined
+      description: Populates the `value` attribute on the input.
+    - name: layout
+      tier: wc-only
+      default: '{''default''}'
+      description: Defines the language of an element.
+    - name: shape
+      tier: wc-only
+    - name: size
+      tier: enhanced
+    - name: ondark
+      tier: wc-only
+  slots:
+    - name: ariaLabel.clear
+      tier: core
+      description: Sets aria-label on clear button for screen reader to read
+    - name: ariaLabel.password.show
+      tier: core
+      description: Sets aria-label on password button to toggle on showing password
+    - name: ariaLabel.password.hide
+      tier: core
+      description: Sets aria-label on password button to toggle off showing password
+    - name: helpText
+      tier: core
+      description: Sets the help text displayed below the input.
+    - name: label
+      tier: core
+      description: Sets the label text for the input.
+    - name: optionalLabel
+      tier: core
+      description: Allows overriding the optional display text "(optional)", which appears next to the label.
+    - name: displayValue
+      tier: wc-only
+      description: Allows custom HTML content to display in place of the value when the input is not focused.
+  events:
+    - name: auroInput-validityChange
+      tier: wc-only
+    - name: input
+      tier: core
+      description: Event fires when the value of an `auro-input` has been changed.
+    - name: auroFormElement-validated
+      tier: wc-only
+      description: Notifies that the `validity` and `errorMessage` value has changed.
+  methods:
+    - name: register
+      tier: wc-only
+    - name: focus
+      tier: wc-only
+    - name: validate
+      tier: wc-only
+    - name: reset
+      tier: wc-only
+    - name: clear
+      tier: wc-only
+    - name: resetShapeClasses
+      tier: wc-only
+    - name: resetLayoutClasses
+      tier: wc-only
+    - name: updateComponentArchitecture
+      tier: wc-only
+behavior:
+  a11y:
+    - Every control MUST have a programmatically associated <label> (for/id or wrapping).
+    - Link help text via aria-describedby so it is announced after the label.
+    - Reflect invalid state with aria-invalid="true|false" on the control.
+    - Render validation errors with role="alert" aria-live="assertive" so they announce immediately.
+    - When the field is not `required`, append "(optional)" to the accessible label.
+    - For password fields, the show/hide toggle needs its own accessible name (aria-label).
+  keyboard:
+    - All interactive affordances are real, focusable elements in DOM order.
+  validation:
+    - Track a "touched" state; do NOT show errors before the field is first blurred.
+    - On invalid, swap the helpText content for the error message and set aria-invalid="true".
+gaps:
+  - id: input-masking
+    feature: Input masking
+    guidance: 'auro-input integrates IMask to apply format patterns as the user types — for example format="(###) ###-####" for phone numbers or format="mm/dd/yyyy" for dates.'
+  - id: credit-card-formatting-and-detection
+    feature: Credit-card formatting and detection
+    guidance: auro-input with type="credit-card" auto-detects Visa, Mastercard, American Express, Discover, Diners Club, and Alaska Airlines cards from the first digits, applies the correct digit grouping (e.g., 4-4-4-4 for Visa, 4-6-5 for Amex), displays the matching card brand icon, and validates with the Luhn algorithm.
+  - id: password-show-hide-toggle
+    feature: Password show/hide toggle
+    guidance: auro-input with type="password" includes an accessible show/hide toggle with customizable ARIA labels via the ariaLabel.password.show and ariaLabel.password.hide slots.
+  - id: clear-button
+    feature: Clear button
+    guidance: auro-input renders an accessible clear button when the field has a value, with a customizable ARIA label via the ariaLabel.clear slot.
+  - id: custom-validation-messages
+    feature: Custom validation messages
+    guidance: auro-input exposes a full set of per-constraint setters — setCustomValidityValueMissing, setCustomValidityRangeOverflow, setCustomValidityRangeUnderflow, setCustomValidityTooLong, setCustomValidityTooShort, setCustomValidityBadInput, setCustomValidityCustomError, and setCustomValidityForType.
+  - id: format-types
+    feature: Format types
+    guidance: auro-input ships dedicated type values for credit-card, month-day-year, year-month-day, day-month-year, month-year, month-fullYear, and year-month, each applying the correct mask, validation, and accent icon.
+  - id: floating-and-dynamic-labels
+    feature: Floating and dynamic labels
+    guidance: auro-input floats the label above the field when it is focused or populated, and automatically associates slotted label content with the underlying input.
+  - id: display-value-slot
+    feature: Display value slot
+    guidance: auro-input supports a displayValue slot that renders custom HTML in place of the raw value when the input is blurred — useful for masked account numbers or formatted currency.
+  - id: layout-and-shape-variants
+    feature: Layout and shape variants
+    guidance: auro-input supports classic, emphasized, and snowflake layouts, as well as shape variants (box, pill, pill-left, pill-right).
+  - id: icon-slots-and-accents
+    feature: Icon slots and accents
+    guidance: auro-input renders left and right accent slots and an automatic accent icon for typed formats (credit-card brand icon, calendar icon for date types).
+  - id: help-text-and-error-slots
+    feature: Help text and error slots
+    guidance: auro-input exposes a helpText slot that automatically swaps to the validation error message when the field is invalid, with the correct ARIA wiring and color treatment.
+  - id: validation-timing-control
+    feature: Validation timing control
+    guidance: auro-input supports validateOnInput to validate on every keystroke, noValidate to disable validation, and tracks touched state so errors do not appear before the user has interacted with the field.
+  - id: form-integration-events
+    feature: Form integration events
+    guidance: auro-input dispatches auroFormElement-validated events so a parent auro-form can coordinate validation across all child fields.
+  - id: multi-brand-theming
+    feature: Multi-brand theming
+    guidance: auro-input consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped.
+examples:
+  - id: text-input
+    html: |-
+      <label class="input-label" for="name">Full name</label>
+      <input id="name" type="text" class="input-field" name="name" />
+  - id: email-input
+    html: |-
+      <label class="input-label" for="email">Email address</label>
+      <input id="email" type="email" class="input-field" name="email" required />
+  - id: password-input
+    html: |-
+      <label class="input-label" for="password">Password</label>
+      <input id="password" type="password" class="input-field" name="password" />
+verify:
+  - every color, size, spacing, radius, and font value uses var(--ds-*)
+  - each control has an associated <label>
+  - controls with aria-invalid="true" have a role="alert" message referenced by aria-describedby
+  - 'axe: label, aria-valid-attr-value, color-contrast pass'
+  - type is one of text|email|password|number (other Auro types are wc-only)

package/ai/specs/auro-menu.spec.yaml

@@ -0,0 +1,213 @@
+# GENERATED by packages/build-tools/src/aiSpecGenerator.mjs — do not edit by hand.
+# Authored inputs live in ai/_authored/auro-menu.overlay.yaml
+component: auro-menu
+version: 0.0.0
+summary: Selectable option list; native closest is a <ul role="listbox"> with role="option" items, or the <option>s inside a native <select>.
+generatedFrom:
+  cem: custom-elements.json#auro-menu
+  cssRecipe: components/menu/demo/css-only.md
+  overlay: ai/_authored/auro-menu.overlay.yaml
+sourceOfTruth:
+  component: components/menu/src/auro-menu.js
+visual:
+  tokensImport: ./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css
+  rule: NEVER hardcode a hex, px, rem, or font-family value. Every visual value MUST be an Auro --ds-* token via var(--ds-token, fallback). Literal values are allowed only as the second argument (fallback) of var().
+  css: |-
+    @import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
+
+    .menu {
+      list-style: none;
+      margin: 0;
+      padding: var(--ds-size-100, 0.5rem) 0;
+      background-color: var(--ds-color-container-primary-default, #ffffff);
+      border: 1px solid var(--ds-color-border-ui-default, #6e767f);
+      border-radius: var(--ds-border-radius, 4px);
+    }
+
+    .menu__option {
+      padding: var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);
+      color: var(--ds-color-text-primary-default, #1d1f24);
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .menu__option:hover {
+      background-color: var(--ds-color-container-ui-hover-default, #f0f5ff);
+    }
+
+    .menu__option:focus-visible {
+      outline: 2px solid var(--ds-color-border-active-default, #01426a);
+      outline-offset: -2px;
+    }
+
+    .menu__option[aria-selected="true"] {
+      background-color: var(--ds-color-container-ui-selected-default, #01426a);
+      color: var(--ds-color-text-inverse-default, #ffffff);
+    }
+
+    .menu__option[aria-disabled="true"] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+api:
+  attributes:
+    - name: disabled
+      tier: core
+      native: disabled
+      description: When true, the entire menu and all options are disabled.
+    - name: loading
+      tier: wc-only
+      default: 'false'
+      description: When true, displays a loading state using the loadingIcon and loadingText slots if provided.
+    - name: matchword
+      tier: wc-only
+      default: undefined
+      description: Specifies a string used to highlight matched string parts in options.
+    - name: multiselect
+      tier: core
+      native: aria-multiselectable="true" on the listbox (or the native `multiple` attribute)
+      default: 'false'
+      description: When true, the selected option can be multiple options.
+    - name: nocheckmark
+      tier: wc-only
+      default: 'false'
+      description: When true, selected option will not show the checkmark.
+    - name: value
+      tier: core
+      native: value
+      default: undefined
+      description: The value of the selected option.
+    - name: layout
+      tier: wc-only
+      default: '{''default''}'
+      description: Defines the language of an element.
+    - name: shape
+      tier: wc-only
+    - name: size
+      tier: enhanced
+    - name: ondark
+      tier: wc-only
+  slots:
+    - name: loadingText
+      tier: core
+      description: Text to show while loading attribute is set
+    - name: loadingIcon
+      tier: core
+      description: Icon to show while loading attribute is set
+    - name: (default)
+      tier: core
+      description: Slot for insertion of menu options.
+  events:
+    - name: auroMenu-optionsChange
+      tier: wc-only
+    - name: auroMenu-activatedOption
+      tier: wc-only
+      description: Notifies that a menuoption has been made `active`.
+    - name: auroMenu-customEventFired
+      tier: wc-only
+      description: Notifies that a custom event has been fired.
+    - name: auroMenu-loadingChange
+      tier: wc-only
+      description: Notifies when the loading attribute is changed.
+    - name: auroMenu-selectValueFailure
+      tier: wc-only
+      description: Notifies that an attempt to select a menuoption by matching a value has failed.
+    - name: auroMenu-selectValueReset
+      tier: wc-only
+      description: Notifies that the component value has been reset.
+    - name: auroMenu-selectedOption
+      tier: wc-only
+      description: Notifies that a new menuoption selection has been made.
+  methods:
+    - name: register
+      tier: wc-only
+    - name: selectByValue
+      tier: wc-only
+    - name: reset
+      tier: wc-only
+    - name: navigateOptions
+      tier: wc-only
+    - name: updateActiveOption
+      tier: wc-only
+    - name: renderLayout
+      tier: wc-only
+    - name: resetShapeClasses
+      tier: wc-only
+    - name: resetLayoutClasses
+      tier: wc-only
+    - name: updateComponentArchitecture
+      tier: wc-only
+behavior:
+  a11y:
+    - Every control MUST have a programmatically associated <label> (for/id or wrapping).
+    - Link help text via aria-describedby so it is announced after the label.
+    - Reflect invalid state with aria-invalid="true|false" on the control.
+    - Render validation errors with role="alert" aria-live="assertive" so they announce immediately.
+    - Use role="listbox" with role="option" children; set aria-selected on chosen options and aria-activedescendant for the highlighted one.
+  keyboard:
+    - All interactive affordances are real, focusable elements in DOM order.
+    - Up/Down move the active option, Enter/Space selects, type-ahead jumps to matching options, Home/End jump to the ends.
+  validation: []
+gaps:
+  - id: active-option-tracking
+    feature: Active-option tracking
+    guidance: auro-menu tracks the active option internally (via an active CSS class on the current auro-menuoption) rather than moving DOM focus between options.
+  - id: arrow-key-navigation
+    feature: Arrow-key navigation
+    guidance: auro-menu handles ArrowUp, ArrowDown, Enter, and Tab to move the highlight and commit selections.
+  - id: matchword-highlighting
+    feature: matchWord highlighting
+    guidance: auro-menu supports a matchWord attribute that highlights matched substrings within option labels — used by auro-combobox to visually mark the user's typed input inside each filtered option.
+  - id: type-ahead-navigation
+    feature: Type-ahead navigation
+    guidance: Type-ahead — jumping the active option to whichever entry starts with the letters the user typed — is not handled by auro-menu itself.
+  - id: nested-submenu-support
+    feature: Nested submenu support
+    guidance: auro-menu detects nested auro-menu elements, applies the correct role="group", and computes indentation per level.
+  - id: selection-state-coordination
+    feature: Selection state coordination
+    guidance: auro-menu keeps optionSelected, value, and each option's aria-selected state in sync internally.
+  - id: aria-roles-and-live-announcements
+    feature: ARIA roles and live announcements
+    guidance: auro-menu automatically applies role="listbox", aria-multiselectable, aria-busy during loading, and per-option role="option" with aria-selected and aria-disabled.
+  - id: value-emission-and-events
+    feature: Value emission and events
+    guidance: auro-menu dispatches a structured set of events — auroMenu-selectedOption, auroMenu-activatedOption, auroMenu-optionsChange, auroMenu-selectValueReset, auroMenu-selectValueFailure, and auroMenu-loadingChange — so parent components can react to highlight, selection, and lifecycle changes.
+  - id: multi-select-with-array-value
+    feature: Multi-select with array value
+    guidance: auro-menu supports multiselect, exposing the selection as a JSON-stringified array via value and as an array of elements via optionSelected.
+  - id: multi-select-deselect
+    feature: Multi-select deselect
+    guidance: In multi-select mode, clicking an already-selected option toggles it off.
+  - id: select-by-value-and-reset
+    feature: Select-by-value and reset
+    guidance: auro-menu exposes a value attribute that drives selection programmatically (accepting a JSON-stringified array in multi-select mode) and a single reset() method that clears all selection and validation state.
+  - id: loading-state
+    feature: Loading state
+    guidance: auro-menu renders a built-in loading placeholder via loadingIcon and loadingText slots, sets aria-busy, and emits auroMenu-loadingChange when the loading attribute toggles.
+  - id: shape-and-size-variants
+    feature: Shape and size variants
+    guidance: auro-menu supports shape (box, round) and size (sm, md) variants that adjust spacing and corner radii consistently across the menu and its options.
+  - id: multi-brand-theming
+    feature: Multi-brand theming
+    guidance: auro-menu consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped.
+examples:
+  - id: basic-listbox
+    html: |-
+      <ul class="menu" role="listbox" aria-label="Cabin class">
+        <li class="menu__option" role="option" tabindex="0" aria-selected="true">Economy</li>
+        <li class="menu__option" role="option" tabindex="-1" aria-selected="false">Premium</li>
+        <li class="menu__option" role="option" tabindex="-1" aria-selected="false">First</li>
+      </ul>
+  - id: listbox-with-a-disabled-option
+    html: |-
+      <ul class="menu" role="listbox" aria-label="Seat">
+        <li class="menu__option" role="option" tabindex="0" aria-selected="false">12A</li>
+        <li class="menu__option" role="option" tabindex="-1" aria-selected="false" aria-disabled="true">12B</li>
+        <li class="menu__option" role="option" tabindex="-1" aria-selected="false">12C</li>
+      </ul>
+verify:
+  - every color, size, spacing, radius, and font value uses var(--ds-*)
+  - each control has an associated <label>
+  - controls with aria-invalid="true" have a role="alert" message referenced by aria-describedby
+  - 'axe: label, aria-valid-attr-value, color-contrast pass'