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

package/ai/llms.txt

@@ -1,26 +0,0 @@
-# Auro FormKit — AI Implementation Standard
-
-> Reimplement Auro form components in plain HTML/CSS/JS using Auro design
-> tokens, for teams that cannot consume the web components. Specs are generated
-> from source on every release, so they never drift from the real component.
-
-## Non-negotiable rules
-- Style ONLY with Auro `--ds-*` tokens via `var(--ds-x, fallback)`; never bare hex/px.
-- Every control needs an associated `<label>` and full ARIA wiring.
-- `tier: wc-only` features are NOT reproducible in plain HTML — report, never fake.
-
-## Component specs
-- [auro-checkbox](https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/ai/specs/auro-checkbox.spec.yaml): Checkbox for selecting one or more options; also composes into a checkbox-group for grouped selection. Native equivalent is <input type="checkbox"> + <label>.
-- [auro-combobox](https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/ai/specs/auro-combobox.spec.yaml): Combobox — a text input that filters a listbox of options. The web platform has no full equivalent; the closest is <input list> + <datalist>, which cannot style the option panel or render rich option content.
-- [auro-counter](https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/ai/specs/auro-counter.spec.yaml): Numeric stepper with increment/decrement buttons; composes into a counter-group. Native closest is <input type="number"> or a role="spinbutton" with real +/- buttons.
-- [auro-datepicker](https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/ai/specs/auro-datepicker.spec.yaml): Date / date-range picker — a text input plus a calendar popup. Native closest is <input type="date"> (single date only; no range or blackout dates, and the browser's picker cannot be styled with Auro tokens).
-- [auro-dropdown](https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/ai/specs/auro-dropdown.spec.yaml): Generic disclosure — a trigger that toggles a bib/panel of content. Native closest is <details>/<summary> or a <button> with aria-expanded controlling a region.
-- [auro-form](https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/ai/specs/auro-form.spec.yaml): Form coordinator that validates and manages child fields. Native equivalent is the <form> element with native submit/reset and constraint validation.
-- [auro-input](https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/ai/specs/auro-input.spec.yaml): Single-line text input (types text, email, password, number) with built-in validation, required/error states, and a bordered theme.
-- [auro-menu](https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/ai/specs/auro-menu.spec.yaml): Selectable option list; native closest is a <ul role="listbox"> with role="option" items, or the <option>s inside a native <select>.
-- [auro-radio](https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/ai/specs/auro-radio.spec.yaml): Radio button for selecting exactly one option from a set; composes into a radio-group. Native equivalent is a set of <input type="radio"> sharing a name.
-- [auro-select](https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/ai/specs/auro-select.spec.yaml): Select control (wraps auro-dropdown + auro-menu). Native equivalent is a <select> with <option>/<optgroup>; the option panel cannot be styled natively.
-
-## Global contracts
-- [Prompt template](https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/ai/_prompt-template.md)
-- [Accessibility baseline](https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/ai/_a11y-baseline.md)

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

@@ -1,181 +0,0 @@
-# GENERATED by packages/build-tools/src/aiSpecGenerator.mjs — do not edit by hand.
-# Authored inputs live in ai/_authored/auro-checkbox.overlay.yaml
-component: auro-checkbox
-version: 0.0.0
-summary: Checkbox for selecting one or more options; also composes into a checkbox-group for grouped selection. Native equivalent is <input type="checkbox"> + <label>.
-generatedFrom:
-  cem: custom-elements.json#auro-checkbox
-  cssRecipe: components/checkbox/demo/css-only.md
-  overlay: ai/_authored/auro-checkbox.overlay.yaml
-sourceOfTruth:
-  component: components/checkbox/src/auro-checkbox.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";
-
-    .checkbox {
-      appearance: none;
-      -webkit-appearance: none;
-      width: var(--ds-size-300, 1.5rem);
-      height: var(--ds-size-300, 1.5rem);
-      border: 1px solid var(--ds-color-border-ui-default, #6e767f);
-      border-radius: var(--ds-border-radius, 4px);
-      background-color: var(--ds-color-container-primary-default, #ffffff);
-      cursor: pointer;
-      vertical-align: middle;
-    }
-
-    .checkbox:checked {
-      background-color: var(--ds-color-container-ui-selected-default, #01426a);
-      border-color: var(--ds-color-border-ui-selected-default, #01426a);
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='5 12 10 17 19 8'/%3E%3C/svg%3E");
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: 80%;
-    }
-
-    .checkbox:focus-visible {
-      outline: 2px solid var(--ds-color-border-active-default, #01426a);
-      outline-offset: 2px;
-    }
-
-    .checkbox:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-api:
-  attributes:
-    - name: appearance
-      tier: wc-only
-      default: '''default'''
-      description: Defines whether the component will be on lighter or darker backgrounds.
-    - name: checked
-      tier: core
-      native: checked
-      description: If set to true, the checkbox will be filled with a checkmark.
-    - name: disabled
-      tier: core
-      native: disabled
-      description: If set to true, the checkbox will not be clickable.
-    - name: error
-      tier: wc-only
-      description: If set to true, the checkbox will be displayed with an error state.
-    - name: id
-      tier: core
-      native: id
-      description: The id global attribute defines an identifier (ID) which must be unique in the whole document.
-    - name: name
-      tier: core
-      native: name
-      description: Accepts any string and is used to identify related checkboxes when submitting form data.
-    - name: onDark
-      tier: wc-only
-      description: DEPRECATED - use `appearance="inverse"` instead.
-    - name: value
-      tier: core
-      native: value
-      description: Sets the element's input value.
-    - name: tabindex
-      tier: core
-      native: tabindex
-      description: The tabindex attribute for the checkbox.
-    - name: aria-checked
-      tier: enhanced
-      description: The aria-checked attribute for the checkbox.
-    - name: aria-disabled
-      tier: enhanced
-      description: The aria-disabled attribute for the checkbox.
-    - name: role
-      tier: enhanced
-      description: The ARIA role for the element.
-  slots:
-    - name: default
-      tier: core
-      description: The default slot for the checkbox label.
-  events:
-    - name: auroCheckbox-input
-      tier: wc-only
-    - name: auroCheckbox-focusin
-      tier: wc-only
-    - name: auroCheckbox-focusout
-      tier: wc-only
-    - name: change
-      tier: core
-      description: (Deprecated) Notifies when checked value is changed.
-    - name: input
-      tier: core
-      description: Notifies when when checked value is changed by user's interface.
-  methods:
-    - name: _initializeDefaults
-      tier: wc-only
-    - name: register
-      tier: wc-only
-    - name: reset
-      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 a native <input type="checkbox"> with an associated <label>.
-    - Group related checkboxes in a <fieldset> with a <legend> as the group label.
-    - Reflect checked state natively; do not add aria-checked to a native checkbox.
-  keyboard:
-    - All interactive affordances are real, focusable elements in DOM order.
-    - Space toggles the focused checkbox (native).
-  validation:
-    - Group-level "select at least one" is not native — script it and expose the error with role="alert".
-gaps:
-  - id: group-level-validation
-    feature: Group-level validation
-    guidance: auro-checkbox-group supports a required attribute that validates "at least one checkbox in the group must be selected." Native HTML has no equivalent — required on individual checkboxes only enforces that that specific checkbox is checked.
-  - id: custom-validation-messages
-    feature: Custom validation messages
-    guidance: auro-checkbox-group exposes setCustomValidity and setCustomValidityValueMissing for fully customizable error messages per validity state.
-  - id: touched-state-tracking
-    feature: Touched-state tracking
-    guidance: auro-checkbox-group tracks a touched state so validation errors only appear after the user has interacted with the group.
-  - id: coordinated-value-array
-    feature: Coordinated value array
-    guidance: auro-checkbox-group exposes a single value property that reflects the array of checked items in the group.
-  - id: automatic-label-binding
-    feature: Automatic label binding
-    guidance: auro-checkbox automatically associates slot content as the accessible label, eliminating the need for <label for> wiring or wrapping <label> elements.
-  - id: disabled-propagation
-    feature: Disabled propagation
-    guidance: auro-checkbox-group propagates a single disabled attribute to all child checkboxes.
-  - id: form-integration-events
-    feature: Form integration events
-    guidance: auro-checkbox-group dispatches auroFormElement-validated events so parent auro-form elements can coordinate validation across all child fields.
-  - id: horizontal-layout
-    feature: Horizontal layout
-    guidance: auro-checkbox-group supports a horizontal attribute for compact groups of up to three items, with spacing and alignment handled by the component.
-  - id: reset-behavior
-    feature: Reset behavior
-    guidance: auro-checkbox-group provides a single reset() method that clears all checkboxes and resets validation state in one call.
-  - id: multi-brand-theming
-    feature: Multi-brand theming
-    guidance: auro-checkbox consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped.
-examples:
-  - id: basic-checkbox
-    html: |-
-      <label>
-        <input type="checkbox" class="checkbox" name="terms" value="agree" />
-        I agree to the terms
-      </label>
-  - id: group-of-checkboxes
-    html: |-
-      <fieldset>
-        <legend>Select your preferences</legend>
-        <label><input type="checkbox" class="checkbox" name="prefs" value="email" /> Email</label>
-        <label><input type="checkbox" class="checkbox" name="prefs" value="sms" /> SMS</label>
-        <label><input type="checkbox" class="checkbox" name="prefs" value="push" /> Push notifications</label>
-      </fieldset>
-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'

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

@@ -1,349 +0,0 @@
-# GENERATED by packages/build-tools/src/aiSpecGenerator.mjs — do not edit by hand.
-# Authored inputs live in ai/_authored/auro-combobox.overlay.yaml
-component: auro-combobox
-version: 0.0.0
-summary: Combobox — a text input that filters a listbox of options. The web platform has no full equivalent; the closest is <input list> + <datalist>, which cannot style the option panel or render rich option content.
-generatedFrom:
-  cem: custom-elements.json#auro-combobox
-  cssRecipe: components/combobox/demo/css-only.md
-  overlay: ai/_authored/auro-combobox.overlay.yaml
-sourceOfTruth:
-  component: components/combobox/src/auro-combobox.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";
-
-    .combobox {
-      display: inline-block;
-      position: relative;
-      width: 100%;
-    }
-
-    .combobox-label {
-      display: block;
-      font-size: var(--ds-size-150, 0.75rem);
-      color: var(--ds-color-text-secondary-default, #6e767f);
-      margin-bottom: var(--ds-size-50, 0.25rem);
-    }
-
-    .combobox-input {
-      appearance: none;
-      -webkit-appearance: none;
-      width: 100%;
-      height: var(--ds-size-600, 3rem);
-      padding: 0 var(--ds-size-200, 1rem);
-      font-size: var(--ds-size-200, 1rem);
-      color: var(--ds-color-text-primary-default, #00256c);
-      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);
-      box-sizing: border-box;
-    }
-
-    .combobox-input:focus-visible {
-      outline: 2px solid var(--ds-color-border-active-default, #01426a);
-      outline-offset: 2px;
-      border-color: var(--ds-color-border-active-default, #01426a);
-    }
-
-    .combobox-input:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-      background-color: var(--ds-color-container-disabled-default, #f2f3f5);
-    }
-
-    .combobox-input[aria-invalid="true"] {
-      border-color: var(--ds-color-border-error-default, #d23153);
-    }
-api:
-  attributes:
-    - name: appearance
-      tier: wc-only
-      default: '''default'''
-      description: Defines whether the component will be on lighter or darker backgrounds.
-    - name: autocomplete
-      tier: core
-      native: autocomplete
-      description: An enumerated attribute that defines what the user agent can suggest for autofill.
-    - name: autoPlacement
-      tier: wc-only
-      description: If declared, bib's position will be automatically calculated where to appear.
-    - name: availableOptions
-      tier: wc-only
-      description: Array of available options to display in the dropdown.
-    - name: behavior
-      tier: wc-only
-      default: '''suggestion'''
-      description: Sets the behavior of the combobox, "filter" or "suggestion".
-    - name: checkmark
-      tier: wc-only
-      description: When attribute is present auro-menu will apply check marks to selected options.
-    - name: disabled
-      tier: core
-      native: disabled
-      description: If set, disables the combobox.
-    - name: dvInputOnly
-      tier: wc-only
-      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 the validation message to the attribute value.
-    - name: format
-      tier: wc-only
-      description: Specifies the input mask format.
-    - name: inputmode
-      tier: core
-      native: inputmode
-      description: Exposes inputmode attribute for input.
-    - name: layout
-      tier: wc-only
-      default: '''classic'''
-      description: Sets the layout of the combobox.
-    - name: matchWidth
-      tier: wc-only
-      description: If declared, the popover and trigger will be set to the same width.
-    - name: noFilter
-      tier: wc-only
-      description: If set, combobox will not filter menuoptions based on input.
-    - name: noFlip
-      tier: wc-only
-      description: If declared, the bib will NOT flip to an alternate position when there isn't enough space in the specified `placement`.
-    - name: shift
-      tier: wc-only
-      description: If declared, the dropdown will shift its position to avoid being cut off by the viewport.
-    - name: noValidate
-      tier: wc-only
-      description: If set, disables auto-validation on blur.
-    - name: offset
-      tier: wc-only
-      default: '0'
-      description: Gap between the trigger element and bib.
-    - name: onDark
-      tier: wc-only
-      description: DEPRECATED - use `appearance="inverse"` instead.
-    - name: optionSelected
-      tier: wc-only
-      description: Specifies the current selected option.
-    - name: persistInput
-      tier: wc-only
-      description: If declared, selecting a menu option will not change the input value.
-    - name: placement
-      tier: wc-only
-      default: '''bottom-start'''
-      description: Position where the bib should appear relative to the trigger.
-    - name: placeholder
-      tier: core
-      native: placeholder
-      description: Define custom placeholder text, only supported by date input formats.
-    - name: required
-      tier: core
-      native: required
-      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: setCustomValidityCustomError
-      tier: enhanced
-      description: Custom help text message to display when validity = `customError`.
-    - name: setCustomValidityValueMissing
-      tier: enhanced
-      description: Custom help text message to display when validity = `valueMissing`.
-    - name: setCustomValidityValueMissingFilter
-      tier: enhanced
-      description: Custom help text message to display when validity = `valueMissing` due to the user not choosing a menu option when behavior = "filter".
-    - name: triggerIcon
-      tier: wc-only
-      description: If set, the `icon` attribute will be applied to the trigger `auro-input` element.
-    - name: type
-      tier: core
-      native: type
-      description: Applies the defined value as the type attribute on `auro-input`.
-    - name: typedValue
-      tier: wc-only
-      description: Specifies the value of the input element within the combobox.
-    - name: validity
-      tier: wc-only
-      description: Specifies the `validityState` this element is in.
-    - name: value
-      tier: core
-      native: value
-      description: Value selected for the dropdown menu.
-    - name: largeFullscreenHeadline
-      tier: wc-only
-      description: If declared, make bib.fullscreen.headline in HeadingDisplay.
-    - name: fullscreenBreakpoint
-      tier: wc-only
-      default: '''sm'''
-      description: Defines the screen size breakpointat which the dropdown switches to fullscreen mode on mobile.
-    - name: shape
-      tier: wc-only
-    - name: size
-      tier: enhanced
-    - name: ondark
-      tier: wc-only
-  slots:
-    - name: (default)
-      tier: core
-      description: Default slot for the menu content.
-    - name: optionalLabel
-      tier: core
-      description: Allows overriding the optional display text "(optional)", which appears next to the label.
-    - name: ariaLabel.input.clear
-      tier: core
-      description: Sets aria-label on clear button
-    - name: ariaLabel.bib.close
-      tier: core
-      description: Sets aria-label on close button in fullscreen bib
-    - name: bib.fullscreen.headline
-      tier: core
-      description: Defines the headline to display above menu-options
-    - name: label
-      tier: core
-      description: Defines the content of the label.
-    - name: helpText
-      tier: core
-      description: Defines the content of the helpText.
-    - name: displayValue
-      tier: wc-only
-      description: Allows custom HTML content to display the selected value when the combobox is not focused.
-  events:
-    - name: inputValue
-      tier: core
-      description: Notifies that the components internal HTML5 input value has changed.
-    - name: input
-      tier: core
-      description: Notifies that the component has a new value set.
-    - name: auroCombobox-valueSet
-      tier: wc-only
-      description: (Deprecated) Notifies that the component has a new value set.
-    - name: auroFormElement-validated
-      tier: wc-only
-      description: Notifies that the component value(s) have been validated.
-  methods:
-    - name: isValid
-      tier: wc-only
-    - name: register
-      tier: wc-only
-    - name: hideBib
-      tier: wc-only
-    - name: showBib
-      tier: wc-only
-    - name: focus
-      tier: wc-only
-    - name: setMenuValue
-      tier: wc-only
-    - name: reset
-      tier: wc-only
-    - name: clear
-      tier: wc-only
-    - name: validate
-      tier: wc-only
-    - name: updateActiveOption
-      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.
-    - The input has role="combobox", aria-expanded, aria-controls pointing to the listbox id, and aria-activedescendant pointing to the highlighted option.
-    - The listbox uses role="listbox" with role="option" children and aria-selected on the chosen option.
-  keyboard:
-    - All interactive affordances are real, focusable elements in DOM order.
-    - Down opens/enters the list; Up/Down move the active option; Enter selects; Esc closes.
-  validation:
-    - Enforce "must select a listed option" in script; native <datalist> does not restrict input to its options.
-gaps:
-  - id: filter-vs-suggestion-behavior
-    feature: Filter vs. suggestion behavior
-    guidance: auro-combobox exposes a behavior attribute ("filter" or "suggestion") that controls whether the user must select a menu option or may submit a freeform typed value.
-  - id: custom-filtering-and-matching
-    feature: Custom filtering and matching
-    guidance: auro-combobox filters options against the typed value and supports a suggest attribute on each menu option for additional matching keywords, plus persistent, static, and nomatch options that change how the list reacts to input.
-  - id: highlighted-match-text
-    feature: Highlighted match text
-    guidance: auro-combobox passes the typed value to auro-menu as a matchWord so the matching substring is visually highlighted in each option.
-  - id: custom-validation-messages
-    feature: Custom validation messages
-    guidance: auro-combobox exposes setCustomValidity, setCustomValidityCustomError, setCustomValidityValueMissing, and setCustomValidityValueMissingFilter for fully customizable error messages per validity state, including a distinct message for "did not pick a value from the list" when behavior="filter".
-  - id: touched-state-tracking
-    feature: Touched-state tracking
-    guidance: auro-combobox tracks a touched state so validation errors only appear after the user has interacted with the field.
-  - id: keyboard-navigation-and-aria
-    feature: Keyboard navigation and ARIA
-    guidance: 'auro-combobox implements the WAI-ARIA combobox pattern: role="combobox" on the input, aria-expanded, aria-controls, aria-activedescendant, and aria-setsize/aria-posinset on each option, plus arrow-key navigation, Home/End, Escape to close, and Enter to select.'
-  - id: screen-reader-announcements
-    feature: Screen reader announcements
-    guidance: auro-combobox dispatches live-region announcements when an option becomes active ("Seattle, not selected, 1 of 5") and when an option is selected, including special handling for fullscreen dialog mode where the trigger is inert.
-  - id: mobile-fullscreen-presentation
-    feature: Mobile fullscreen presentation
-    guidance: auro-combobox automatically switches to a fullscreen dialog at a configurable fullscreenBreakpoint for mobile-friendly input, including iOS virtual keyboard retention logic so the keyboard stays visible across the trigger-to-dialog transition.
-  - id: rich-option-content-and-display-value
-    feature: Rich option content and display value
-    guidance: auro-combobox works with auro-menuoption elements that can contain markup, icons, and a displayValue slot that lets the visible trigger content differ from the underlying value (paired with persistInput for advanced filter UIs).
-  - id: coordinated-value-and-option-selected-state
-    feature: Coordinated value and option-selected state
-    guidance: auro-combobox exposes both value (the selected option's value) and optionSelected (a reference to the chosen auro-menuoption element), and fires input and inputValue events with structured detail.
-  - id: form-integration-events
-    feature: Form integration events
-    guidance: auro-combobox dispatches auroFormElement-validated events so parent auro-form elements can coordinate validation across all child fields.
-  - id: reset-behavior
-    feature: Reset behavior
-    guidance: auro-combobox provides reset() and clear() methods that clear the input, menu selection, validation state, and touched flag in one call.
-  - id: layouts-shapes-and-sizes
-    feature: Layouts, shapes, and sizes
-    guidance: auro-combobox supports layout (classic, emphasized, snowflake), shape, and size attributes that coordinate the appearance of the trigger, dropdown, and menu options together.
-  - id: multi-brand-theming
-    feature: Multi-brand theming
-    guidance: auro-combobox consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped.
-examples:
-  - id: basic-combobox
-    html: |-
-      <label class="combobox">
-        <span class="combobox-label">Departure airport</span>
-        <input
-          type="text"
-          class="combobox-input"
-          name="departure"
-          list="airport-options"
-          autocomplete="off" />
-        <datalist id="airport-options">
-          <option value="Seattle (SEA)"></option>
-          <option value="Portland (PDX)"></option>
-          <option value="San Francisco (SFO)"></option>
-          <option value="Los Angeles (LAX)"></option>
-        </datalist>
-      </label>
-  - id: required-combobox-in-a-form
-    html: |-
-      <form>
-        <label class="combobox">
-          <span class="combobox-label">Destination</span>
-          <input
-            type="text"
-            class="combobox-input"
-            name="destination"
-            list="destination-options"
-            required
-            autocomplete="off" />
-          <datalist id="destination-options">
-            <option value="Anchorage (ANC)"></option>
-            <option value="Fairbanks (FAI)"></option>
-            <option value="Juneau (JNU)"></option>
-          </datalist>
-        </label>
-        <button type="submit">Search</button>
-      </form>
-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'