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

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

@@ -1,295 +0,0 @@
-# GENERATED by packages/build-tools/src/aiSpecGenerator.mjs — do not edit by hand.
-# Authored inputs live in ai/_authored/auro-dropdown.overlay.yaml
-component: auro-dropdown
-version: 0.0.0
-summary: 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.
-generatedFrom:
-  cem: custom-elements.json#auro-dropdown
-  cssRecipe: components/dropdown/demo/css-only.md
-  overlay: ai/_authored/auro-dropdown.overlay.yaml
-sourceOfTruth:
-  component: components/dropdown/src/auro-dropdown.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";
-
-    .dropdown {
-      position: relative;
-      display: inline-block;
-    }
-
-    .dropdown > summary {
-      list-style: none;
-      cursor: pointer;
-      display: inline-flex;
-      align-items: center;
-      gap: var(--ds-size-100, 0.5rem);
-      padding: var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem);
-      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);
-      color: var(--ds-color-text-primary-default, #1d1d1d);
-      font-family: var(--ds-font-family-default, sans-serif);
-    }
-
-    .dropdown > summary::-webkit-details-marker {
-      display: none;
-    }
-
-    .dropdown > summary::after {
-      content: "";
-      width: var(--ds-size-150, 0.75rem);
-      height: var(--ds-size-150, 0.75rem);
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-      background-repeat: no-repeat;
-      background-position: center;
-      transition: transform 150ms ease;
-    }
-
-    .dropdown[open] > summary::after {
-      transform: rotate(180deg);
-    }
-
-    .dropdown > summary:focus-visible {
-      outline: 2px solid var(--ds-color-border-active-default, #01426a);
-      outline-offset: 2px;
-    }
-
-    .dropdown-bib {
-      position: absolute;
-      top: calc(100% + var(--ds-size-50, 0.25rem));
-      left: 0;
-      z-index: 1;
-      min-width: 100%;
-      padding: var(--ds-size-100, 0.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);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    }
-api:
-  attributes:
-    - name: appearance
-      tier: wc-only
-      default: '''default'''
-      description: Defines whether the component will be on lighter or darker backgrounds.
-    - name: autoPlacement
-      tier: wc-only
-      description: If declared, bib's position will be automatically calculated where to appear.
-    - name: desktopModal
-      tier: wc-only
-      description: If declared, the dropdown will behave as a modal dialog when in a desktop viewport size.
-    - name: disableEventShow
-      tier: wc-only
-      description: If declared, the dropdown will only show by calling the API .show() public method.
-    - name: simple
-      tier: wc-only
-      description: If declared, applies a border around the trigger slot.
-    - name: chevron
-      tier: enhanced
-      description: If declared, the dropdown displays a chevron on the right.
-    - name: disabled
-      tier: core
-      native: disabled
-      description: If declared, the dropdown is not interactive.
-    - name: disableKeyboardHandling
-      tier: wc-only
-      description: If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
-    - name: dropdownWidth
-      tier: wc-only
-    - name: error
-      tier: wc-only
-      description: If declared, will apply error UI to the dropdown.
-    - name: errorMessage
-      tier: wc-only
-      default: undefined
-      description: Contains the help text message for the current validity error.
-    - name: focusShow
-      tier: wc-only
-      description: If declared, the bib will display when focus is applied to the trigger.
-    - name: open
-      tier: enhanced
-      default: 'false'
-      description: If true, the dropdown bib is displayed.
-    - name: isBibFullscreen
-      tier: wc-only
-      default: 'false'
-      description: If true, the dropdown bib is taking the fullscreen when it's open.
-    - name: hoverToggle
-      tier: wc-only
-      description: If declared, the trigger will toggle the dropdown on mouseover/mouseout.
-    - name: hasTriggerContent
-      tier: wc-only
-    - name: fullscreenBreakpoint
-      tier: wc-only
-      default: '''sm'''
-      description: Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile.
-    - name: layout
-      tier: wc-only
-      default: undefined
-      description: Sets the layout of the dropdown.
-    - name: parentBorder
-      tier: wc-only
-      default: 'false'
-      description: Defines if the trigger should size based on the parent element providing the border UI.
-    - name: matchWidth
-      tier: wc-only
-      default: 'false'
-      description: If declared, the popover and trigger will be set to the same width.
-    - 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: noHideOnThisFocusLoss
-      tier: wc-only
-      default: 'false'
-      description: If declared, the dropdown will not hide when moving focus outside the element.
-    - name: noToggle
-      tier: wc-only
-      description: If declared, the trigger will only show the dropdown bib.
-    - 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: onSlotChange
-      tier: enhanced
-      description: If declared, and a function is set, that function will execute when the slot content is updated.
-    - name: placement
-      tier: wc-only
-      default: '''bottom-start'''
-      description: Position where the bib should appear relative to the trigger.
-    - name: tabIndex
-      tier: enhanced
-    - name: shape
-      tier: wc-only
-    - name: size
-      tier: enhanced
-    - name: ondark
-      tier: wc-only
-  slots:
-    - name: (default)
-      tier: core
-      description: Default slot for the dropdown bib content.
-    - name: helpText
-      tier: core
-      description: Defines the content of the helpText.
-    - name: trigger
-      tier: core
-      description: Defines the content of the trigger.
-  events:
-    - name: auroDropdown-idAdded
-      tier: wc-only
-      description: Notifies consumers that the unique ID for the dropdown bib has been generated.
-    - name: auroDropdown-triggerClick
-      tier: wc-only
-      description: Notifies that the trigger has been clicked.
-    - name: auroDropdown-toggled
-      tier: wc-only
-      description: Notifies that the visibility of the dropdown bib has changed.
-  methods:
-    - name: hide
-      tier: wc-only
-    - name: show
-      tier: wc-only
-    - name: focus
-      tier: wc-only
-    - name: register
-      tier: wc-only
-    - name: exposeCssParts
-      tier: wc-only
-    - name: clearTriggerA11yAttributes
-      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 trigger is a <button> with aria-expanded and aria-controls pointing to the panel id.
-    - The panel is a region whose visibility follows aria-expanded.
-  keyboard:
-    - All interactive affordances are real, focusable elements in DOM order.
-    - Enter/Space toggles the panel; Esc closes it and returns focus to the trigger.
-  validation: []
-gaps:
-  - id: floating-ui-positioning
-    feature: Floating-UI positioning
-    guidance: auro-dropdown uses Floating UI to position the bib relative to the trigger and supports a placement attribute with twelve values (top, right, bottom, left, and their -start/-end variants).
-  - id: auto-placement-and-flip
-    feature: Auto-placement and flip
-    guidance: auro-dropdown exposes autoPlacement and the inverse noFlip option so the bib can automatically pick the side of the trigger with the most available space and flip when it would otherwise be clipped by the viewport.
-  - id: shift-to-stay-on-screen
-    feature: Shift to stay on-screen
-    guidance: auro-dropdown supports a shift attribute that nudges the bib along its axis so it remains fully visible inside the viewport.
-  - id: match-width-and-offset-control
-    feature: Match-width and offset control
-    guidance: auro-dropdown exposes matchWidth to size the bib to the trigger and a numeric offset for the gap between trigger and bib.
-  - id: mobile-fullscreen-behavior
-    feature: Mobile fullscreen behavior
-    guidance: auro-dropdown supports a fullscreenBreakpoint (defaulting to sm) that switches the bib into a fullscreen presentation on small viewports, and a desktopModal option for modal behavior on larger viewports.
-  - id: hover-trigger
-    feature: Hover trigger
-    guidance: auro-dropdown supports a hoverToggle attribute that opens the bib on mouseover and closes it on mouseout.
-  - id: focus-management
-    feature: Focus management
-    guidance: auro-dropdown provides a focus() method that moves focus to the first focusable element inside the bib when it is open, or to the trigger when it is closed.
-  - id: click-outside-and-focus-loss-dismissal
-    feature: Click-outside and focus-loss dismissal
-    guidance: auro-dropdown closes the bib when the user clicks outside the component or moves focus out of it, and exposes noHideOnThisFocusLoss to opt out.
-  - id: keyboard-handling
-    feature: Keyboard handling
-    guidance: auro-dropdown includes a keyboard strategy for arrow-key navigation, Escape to close, and Tab behavior coordinated with the bib contents, and lets consumers opt out via disableKeyboardHandling.
-  - id: aria-wiring
-    feature: ARIA wiring
-    guidance: auro-dropdown sets an a11yRole on the trigger, manages aria-expanded, and emits an auroDropdown-idAdded event so consumers can wire aria-controls to the generated bib ID.
-  - id: chevron-indicator
-    feature: Chevron indicator
-    guidance: auro-dropdown supports a chevron attribute that renders a collapsed/expanded indicator with the correct rotation and design-token color.
-  - id: error-and-help-text-presentation
-    feature: Error and help-text presentation
-    guidance: auro-dropdown exposes error, errorMessage, and a helpText slot that renders supporting text below the trigger with the correct error styling.
-  - id: imperative-show-hide-and-toggle-events
-    feature: Imperative show/hide and toggle events
-    guidance: auro-dropdown exposes show() and hide() methods, a disableEventShow option to lock it to programmatic control, and emits auroDropdown-toggled and auroDropdown-triggerClick events.
-  - id: multi-brand-theming
-    feature: Multi-brand theming
-    guidance: auro-dropdown consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped.
-examples:
-  - id: basic-disclosure
-    html: |-
-      <details class="dropdown">
-        <summary>More options</summary>
-        <div class="dropdown-bib">
-          <p>Panel content goes here.</p>
-        </div>
-      </details>
-  - id: disclosure-with-a-list-of-actions
-    html: |-
-      <details class="dropdown">
-        <summary>Account</summary>
-        <div class="dropdown-bib">
-          <ul>
-            <li><a href="/profile">Profile</a></li>
-            <li><a href="/settings">Settings</a></li>
-            <li><a href="/logout">Log out</a></li>
-          </ul>
-        </div>
-      </details>
-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-form.spec.yaml

@@ -1,148 +0,0 @@
-# GENERATED by packages/build-tools/src/aiSpecGenerator.mjs — do not edit by hand.
-# Authored inputs live in ai/_authored/auro-form.overlay.yaml
-component: auro-form
-version: 0.0.0
-summary: Form coordinator that validates and manages child fields. Native equivalent is the <form> element with native submit/reset and constraint validation.
-generatedFrom:
-  cem: custom-elements.json#auro-form
-  cssRecipe: components/form/demo/css-only.md
-  overlay: ai/_authored/auro-form.overlay.yaml
-sourceOfTruth:
-  component: components/form/src/auro-form.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";
-
-    .form {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ds-size-300, 1.5rem);
-      padding: var(--ds-size-400, 2rem);
-    }
-
-    .form fieldset {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ds-size-200, 1rem);
-      border: 0;
-      padding: 0;
-      margin: 0;
-    }
-
-    .form legend {
-      padding: 0;
-      margin-bottom: var(--ds-size-100, 0.5rem);
-    }
-
-    .form .actions {
-      display: flex;
-      gap: var(--ds-size-200, 1rem);
-      margin-top: var(--ds-size-200, 1rem);
-    }
-api:
-  attributes: []
-  slots:
-    - name: default
-      tier: core
-      description: The default slot for form elements.
-  events:
-    - name: change
-      tier: core
-      description: Fires when a child form element's value changes or the form is initialized.
-    - name: reset
-      tier: core
-      description: Fires when the form is reset.
-    - name: submit
-      tier: core
-      description: Fires when the form is submitted.
-    - name: input
-      tier: core
-      description: Fires when a child form element receives user input.
-  methods:
-    - name: reset
-      tier: wc-only
-    - name: submit
-      tier: wc-only
-    - name: register
-      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 <form>; group related fields in <fieldset>/<legend>; the submit control is a real <button type="submit">.
-  keyboard:
-    - All interactive affordances are real, focusable elements in DOM order.
-    - Enter in a text field submits the form (native).
-  validation:
-    - Use native constraint validation (required, pattern, min/max) surfaced on submit.
-    - auro-form's cross-field coordination and aggregated validity are wc-only — validate each field and aggregate in script.
-gaps:
-  - id: child-element-registration
-    feature: Child element registration
-    guidance: auro-form automatically discovers and registers its named Auro form-element children (auro-input, auro-select, auro-datepicker, auro-combobox, auro-checkbox-group, auro-radio-group, auro-counter-group) on slot change and via a MutationObserver, so dynamically added or removed fields are tracked without manual wiring.
-  - id: aggregated-value-snapshot
-    feature: Aggregated value snapshot
-    guidance: auro-form exposes a value getter that returns a single key-value object of every named child's current value, including array values from range datepickers and grouped controls.
-  - id: aggregated-validity-state
-    feature: Aggregated validity state
-    guidance: auro-form exposes a single validity getter that returns 'valid', 'invalid', or null based on the validity of every required and interacted-with child.
-  - id: initial-state-tracking
-    feature: Initial-state tracking
-    guidance: auro-form tracks an isInitialState flag that is true until any child has been interacted with or had its value changed.
-  - id: auroformelement-validated-event-aggregation
-    feature: auroFormElement-validated event aggregation
-    guidance: auro-form listens for auroFormElement-validated events from every registered child and updates its aggregated validity state in response.
-  - id: submit-coordination
-    feature: Submit coordination
-    guidance: auro-form intercepts clicks on child submit buttons (<button type="submit"> or <auro-button type="submit">), forces validation on every registered child, waits for validation to settle, and only then fires a submit event with detail.value containing the full form snapshot.
-  - id: reset-coordination
-    feature: Reset coordination
-    guidance: auro-form intercepts clicks on child reset buttons, calls reset() on every registered child, reinitializes its state, and fires a reset event with detail.previousValue containing the values captured before the reset.
-  - id: submit-and-reset-button-disabling
-    feature: Submit and reset button disabling
-    guidance: auro-form automatically disables submit buttons while the form is in its initial state or invalid, and disables reset buttons while the form is in its initial state.
-  - id: enter-to-submit-handling
-    feature: Enter-to-submit handling
-    guidance: auro-form listens for the Enter key on its registered children and triggers a coordinated submit, while skipping textarea-style fields so they can accept newlines.
-  - id: mixed-auro-and-native-child-support
-    feature: Mixed Auro and native child support
-    guidance: auro-form recognizes its named Auro children and coordinates them as a single form, while still allowing native elements to live alongside them in markup.
-  - id: multi-brand-theming
-    feature: Multi-brand theming
-    guidance: auro-form consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped.
-examples:
-  - id: basic-form
-    html: |-
-      <form class="form" action="/subscribe" method="post">
-        <label>
-          Email
-          <input type="email" name="email" required />
-        </label>
-        <div class="actions">
-          <button type="submit">Submit</button>
-          <button type="reset">Reset</button>
-        </div>
-      </form>
-  - id: form-with-grouped-fields
-    html: |-
-      <form class="form">
-        <fieldset>
-          <legend>Contact information</legend>
-          <label>First name <input type="text" name="firstName" required /></label>
-          <label>Last name <input type="text" name="lastName" required /></label>
-          <label>Email <input type="email" name="email" required /></label>
-        </fieldset>
-        <div class="actions">
-          <button type="submit">Submit</button>
-          <button type="reset">Reset</button>
-        </div>
-      </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'