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

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

@@ -1,215 +0,0 @@
-# GENERATED by packages/build-tools/src/aiSpecGenerator.mjs — do not edit by hand.
-# Authored inputs live in ai/_authored/auro-counter.overlay.yaml
-component: auro-counter
-version: 0.0.0
-summary: Numeric stepper with increment/decrement buttons; composes into a counter-group. Native closest is <input type="number"> or a role="spinbutton" with real +/- buttons.
-generatedFrom:
-  cem: custom-elements.json#auro-counter
-  cssRecipe: components/counter/demo/css-only.md
-  overlay: ai/_authored/auro-counter.overlay.yaml
-sourceOfTruth:
-  component: components/counter/src/auro-counter.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";
-
-    .counter {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--ds-size-200, 1rem);
-      font-family: var(--ds-font-family-default, sans-serif);
-    }
-
-    .counter__button {
-      appearance: none;
-      -webkit-appearance: none;
-      width: var(--ds-size-400, 2rem);
-      height: var(--ds-size-400, 2rem);
-      border: 1px solid var(--ds-color-border-ui-default, #6e767f);
-      border-radius: 50%;
-      background-color: var(--ds-color-container-primary-default, #ffffff);
-      color: var(--ds-color-text-primary-default, #00467f);
-      font-size: var(--ds-size-300, 1.5rem);
-      line-height: 1;
-      cursor: pointer;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .counter__button:focus-visible {
-      outline: 2px solid var(--ds-color-border-active-default, #01426a);
-      outline-offset: 2px;
-    }
-
-    .counter__button:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-
-    .counter__value {
-      appearance: textfield;
-      -moz-appearance: textfield;
-      width: var(--ds-size-500, 2.5rem);
-      border: none;
-      background: transparent;
-      text-align: center;
-      font-size: var(--ds-size-300, 1.5rem);
-      color: var(--ds-color-text-primary-default, #2a2a2a);
-    }
-
-    .counter__value::-webkit-outer-spin-button,
-    .counter__value::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-api:
-  attributes:
-    - name: appearance
-      tier: wc-only
-      default: '''default'''
-      description: Defines whether the component will be on lighter or darker backgrounds.
-    - name: defaultSlot
-      tier: wc-only
-      description: The default slot content.
-    - name: disabled
-      tier: core
-      native: disabled
-      description: Indicates if the counter is disabled.
-    - name: disableMax
-      tier: enhanced
-      description: Group will attach to counter to disable the increment button.
-    - name: disableMin
-      tier: enhanced
-      description: Group will attach to counter to disable the decrement button.
-    - name: error
-      tier: wc-only
-      description: Error state and message.
-    - name: max
-      tier: core
-      native: max
-      description: The maximum value for the counter.
-    - name: min
-      tier: core
-      native: min
-      description: The minimum value for the counter.
-    - name: onDark
-      tier: wc-only
-      description: DEPRECATED - use `appearance="inverse"` instead.
-    - name: validity
-      tier: wc-only
-      description: The validity state of the counter.
-    - name: value
-      tier: core
-      native: value
-      description: Sets the value of the counter.
-  slots:
-    - name: default
-      tier: core
-      description: Main label content for the counter.
-    - name: ariaLabel.minus
-      tier: core
-      description: Accessible label for the decrement button.
-    - name: ariaLabel.plus
-      tier: core
-      description: Accessible label for the increment button.
-    - name: helpText
-      tier: core
-      description: Help text content for the counter.
-    - name: description
-      tier: core
-      description: Descriptive content for the counter.
-  events:
-    - name: input
-      tier: core
-  methods:
-    - name: _initializeDefaults
-      tier: wc-only
-    - name: register
-      tier: wc-only
-    - name: increment
-      tier: wc-only
-    - name: decrement
-      tier: wc-only
-    - name: validate
-      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 <input type="number"> with an associated <label>, or role="spinbutton" with aria-valuenow/valuemin/valuemax.
-    - The minus/plus controls are real <button>s with accessible names (see the ariaLabel.minus / ariaLabel.plus slots).
-  keyboard:
-    - All interactive affordances are real, focusable elements in DOM order.
-    - Arrow Up/Down increment and decrement the value (native on number input).
-  validation:
-    - Clamp to min/max and disable the relevant button at the bounds; expose range errors with role="alert".
-gaps:
-  - id: increment-and-decrement-button-wiring
-    feature: Increment and decrement button wiring
-    guidance: auro-counter exposes increment() and decrement() methods and handles all click wiring between its buttons and the displayed value.
-  - id: automatic-min-max-button-disabling
-    feature: Automatic min/max button disabling
-    guidance: auro-counter automatically disables the decrement button when the value is at min and the increment button when the value is at max, providing a clear visual signal that further changes are not allowed.
-  - id: group-level-min-max-coordination
-    feature: Group-level min/max coordination
-    guidance: auro-counter-group supports min and max properties that apply to the total of all child counters.
-  - id: coordinated-value-object-and-total
-    feature: Coordinated value object and total
-    guidance: auro-counter-group exposes a single value property as an object keyed by each counter's name, along with a separate total property for the aggregate sum.
-  - id: spinbutton-aria-semantics
-    feature: Spinbutton ARIA semantics
-    guidance: auro-counter renders a role="spinbutton" element with aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext, and aria-labelledby so assistive technology announces the value as a spinbutton — the role most screen readers expect for stepper controls.
-  - id: validation-and-error-messaging
-    feature: Validation and error messaging
-    guidance: auro-counter integrates with @aurodesignsystem/form-validation to expose a validity property, an error attribute, and a help text region that switches to an alert with role="alert" and aria-live="assertive" when invalid.
-  - id: keyboard-strategy
-    feature: Keyboard strategy
-    guidance: auro-counter and auro-counter-group install dedicated keyboard strategies that handle Arrow keys, Home/End, and tab order across the +/− buttons and the spinbutton, including ordered traversal of every counter inside a group.
-  - id: disabled-state-and-propagation
-    feature: Disabled state and propagation
-    guidance: auro-counter exposes a single disabled attribute that disables both buttons and removes the spinbutton from the tab order, and auro-counter-group propagates appearance and theming to all child counters.
-  - id: dropdown-layout
-    feature: Dropdown layout
-    guidance: auro-counter-group supports an isDropdown mode that renders the group inside an Auro dropdown with a trigger, value text, fullscreen breakpoint behavior, and configurable placement.
-  - id: form-integration-events
-    feature: Form integration events
-    guidance: auro-counter dispatches input events with a structured detail.value, and auro-counter-group dispatches input events carrying both detail.total and detail.value plus auroFormElement-validated events so a parent auro-form can coordinate validation.
-  - id: multi-brand-theming
-    feature: Multi-brand theming
-    guidance: auro-counter consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped.
-examples:
-  - id: basic-counter
-    html: |-
-      <div class="counter">
-        <label for="passengers">Passengers</label>
-        <button type="button" class="counter__button" aria-label="Decrease passengers">&minus;</button>
-        <input id="passengers" class="counter__value" type="number" min="0" max="9" step="1" value="0" />
-        <button type="button" class="counter__button" aria-label="Increase passengers">+</button>
-      </div>
-  - id: group-of-counters
-    html: |-
-      <fieldset>
-        <legend>Travelers</legend>
-        <div class="counter">
-          <label for="adults">Adults</label>
-          <button type="button" class="counter__button" aria-label="Decrease adults">&minus;</button>
-          <input id="adults" class="counter__value" type="number" min="1" max="9" step="1" value="1" />
-          <button type="button" class="counter__button" aria-label="Increase adults">+</button>
-        </div>
-        <div class="counter">
-          <label for="children">Children</label>
-          <button type="button" class="counter__button" aria-label="Decrease children">&minus;</button>
-          <input id="children" class="counter__value" type="number" min="0" max="8" step="1" value="0" />
-          <button type="button" class="counter__button" aria-label="Increase children">+</button>
-        </div>
-      </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-datepicker.spec.yaml

@@ -1,395 +0,0 @@
-# GENERATED by packages/build-tools/src/aiSpecGenerator.mjs — do not edit by hand.
-# Authored inputs live in ai/_authored/auro-datepicker.overlay.yaml
-component: auro-datepicker
-version: 0.0.0
-summary: 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).
-generatedFrom:
-  cem: custom-elements.json#auro-datepicker
-  cssRecipe: components/datepicker/demo/css-only.md
-  overlay: ai/_authored/auro-datepicker.overlay.yaml
-sourceOfTruth:
-  component: components/datepicker/src/auro-datepicker.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";
-
-    .datepicker {
-      appearance: none;
-      -webkit-appearance: none;
-      width: 100%;
-      height: var(--ds-size-600, 3rem);
-      padding: 0 var(--ds-size-200, 1rem);
-      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, #1d252c);
-      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-height, 1.5);
-      cursor: pointer;
-    }
-
-    .datepicker:focus-visible {
-      outline: 2px solid var(--ds-color-border-active-default, #01426a);
-      outline-offset: 2px;
-    }
-
-    .datepicker:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-
-    .datepicker:invalid {
-      border-color: var(--ds-color-border-error-default, #d50000);
-    }
-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
-      default: 'false'
-      description: If declared, bib's position will be automatically calculated where to appear.
-    - name: blackoutDates
-      tier: wc-only
-      default: '[]'
-      description: Array of dates that cannot be selected.
-    - name: blackoutLabel
-      tier: wc-only
-      default: '''unavailable'''
-      description: Label announced for blackout (disabled but in-range) date cells.
-    - name: calendarEndDate
-      tier: wc-only
-      default: undefined
-      description: The last date that may be displayed in the calendar.
-    - name: calendarGridLabel
-      tier: wc-only
-      default: '''Calendar days of the month'''
-      description: Accessible label for the calendar grid containing the days of the month.
-    - name: calendarFocusDate
-      tier: wc-only
-      description: The date that will first be visually rendered to the user in the calendar.
-    - name: calendarStartDate
-      tier: wc-only
-      default: undefined
-      description: The first date that may be displayed in the calendar.
-    - name: centralDate
-      tier: wc-only
-      description: The date that determines the currently visible month.
-    - name: disabled
-      tier: core
-      native: disabled
-      default: 'false'
-      description: If set, disables the datepicker.
-    - 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 the validation message to the attribute value.
-    - name: format
-      tier: wc-only
-      description: Specifies the date format.
-    - name: locale
-      tier: enhanced
-      description: Defines the locale of the element.
-    - name: fullscreenBreakpoint
-      tier: wc-only
-      default: '''sm'''
-      description: Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile.
-    - name: hasAllValues
-      tier: enhanced
-      default: 'false'
-    - name: hasFocus
-      tier: enhanced
-      default: 'false'
-    - name: hasValue
-      tier: enhanced
-      default: 'false'
-    - name: inputmode
-      tier: core
-      native: inputmode
-      description: Exposes inputmode attribute for input.
-    - name: largeFullscreenHeadline
-      tier: wc-only
-      default: 'false'
-      description: If declared, make bib.fullscreen.headline in HeadingDisplay.
-    - name: layout
-      tier: wc-only
-      default: '''classic'''
-      description: Sets the layout of the datepicker.
-    - name: maxDate
-      tier: core
-      native: max
-      description: Maximum date.
-    - name: minDate
-      tier: core
-      native: min
-      description: Minimum date.
-    - name: monthFirst
-      tier: wc-only
-    - name: monthNames
-      tier: wc-only
-      description: Names of all 12 months to render in the calendar.
-    - name: navLabelNextMonth
-      tier: wc-only
-      default: '''Next month'''
-      description: Accessible label for the next month navigation button.
-    - name: navLabelPrevMonth
-      tier: wc-only
-      default: '''Previous month'''
-      description: Accessible label for the previous month navigation button.
-    - name: noFlip
-      tier: wc-only
-      default: 'false'
-      description: If declared, the bib will NOT flip to an alternate position when there isn't enough space in the specified `placement`.
-    - name: noValidate
-      tier: wc-only
-      default: 'false'
-      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
-      default: 'false'
-      description: DEPRECATED - use `appearance="inverse"` instead.
-    - name: placeholder
-      tier: core
-      native: placeholder
-      description: Placeholder text to display in the input(s) when no value is set.
-    - name: placeholderEndDate
-      tier: enhanced
-      description: Optional placeholder text to display in the second input when using date range.
-    - name: placement
-      tier: wc-only
-      default: '''bottom-start'''
-      description: Position where the bib should appear relative to the trigger.
-    - name: range
-      tier: wc-only
-      default: 'false'
-      description: If set, turns on date range functionality in auro-calendar.
-    - name: rangeLabelAfterRange
-      tier: enhanced
-      default: '''after range'''
-      description: Label announced for cells after a fully selected range (both `dateFrom` and `dateTo` are set).
-    - name: rangeLabelBeforeRange
-      tier: enhanced
-      default: '''before range'''
-      description: Label announced for cells before the range start.
-    - name: rangeLabelEnd
-      tier: enhanced
-      default: '''range end'''
-      description: Label announced for the range end date cell.
-    - name: rangeLabelEndPreview
-      tier: enhanced
-      default: '''previewing range end'''
-      description: Label announced for the focused cell while previewing a range end (dateFrom set, dateTo not yet selected).
-    - name: rangeLabelInRange
-      tier: enhanced
-      default: '''in range'''
-      description: Label announced for cells within the selected range.
-    - name: rangeLabelStart
-      tier: enhanced
-      default: '''range start'''
-      description: Label announced for the range start date cell.
-    - name: referenceDates
-      tier: wc-only
-      description: Dates that the user should have for reference as part of their decision-making when selecting a date.
-    - 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: setCustomValidityCustomError
-      tier: enhanced
-      description: Custom help text message to display when validity = `customError`.
-    - 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: setCustomValidityValueMissing
-      tier: enhanced
-      description: Custom help text message to display when validity = `valueMissing`.
-    - name: shift
-      tier: wc-only
-      default: 'false'
-      description: If declared, the dropdown will shift its position to avoid being cut off by the viewport.
-    - name: stacked
-      tier: wc-only
-      default: 'false'
-      description: Set true to make datepicker stacked style.
-    - name: validity
-      tier: wc-only
-      default: undefined
-      description: Specifies the `validityState` this element is in.
-    - name: value
-      tier: core
-      native: value (on a native <input type="date">)
-      default: undefined
-      description: Value selected for the datepicker.
-    - name: valueEnd
-      tier: wc-only
-      default: undefined
-      description: Value selected for the second datepicker when using date range.
-    - name: shape
-      tier: wc-only
-    - name: size
-      tier: enhanced
-    - name: ondark
-      tier: wc-only
-  slots:
-    - name: helpText
-      tier: core
-      description: Defines the content of the helpText.
-    - name: ariaLabel.bib.close
-      tier: core
-      description: Sets aria-label on close button in fullscreen bib
-    - name: ariaLabel.input.clear
-      tier: core
-      description: Sets aria-label on clear button
-    - name: bib.fullscreen.headline
-      tier: core
-      description: Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout.
-    - name: bib.fullscreen.dateLabel
-      tier: core
-      description: '**DEPRECATED** - Use `bib.fullscreen.fromLabel` instead.'
-    - name: bib.fullscreen.fromLabel
-      tier: core
-      description: Defines the content to display above the first input in the mobile layout.
-    - name: bib.fullscreen.toLabel
-      tier: core
-      description: Defines the content to display above the second input in the mobile layout when `range` is true.
-    - name: label
-      tier: core
-      description: Defines the label content for the entire datepicker when `layout="snowflake"`.
-    - name: toLabel
-      tier: core
-      description: Defines the label content for the second input when the `range` attribute is used.
-    - name: fromLabel
-      tier: core
-      description: Defines the label content for the first input.
-    - name: optionalFromLabel
-      tier: core
-      description: Overrides the "(optional)" text rendered next to the first input's label when the datepicker is not `required`.
-    - name: optionalToLabel
-      tier: core
-      description: Overrides the "(optional)" text rendered next to the second input's label when `range` is set and the datepicker is not `required`.
-    - name: date_YYYY_MM_DD
-      tier: core
-      description: Defines the content to display in the auro-calendar-cell for the specified date.
-    - name: popover_YYYY_MM_DD
-      tier: core
-      description: Defines the content to display in the auro-calendar-cell popover for the specified date.
-  events:
-    - name: input
-      tier: core
-    - name: auroDatePicker-toggled
-      tier: wc-only
-      description: Notifies that the calendar dropdown has been opened/closed.
-    - name: auroDatePicker-monthChanged
-      tier: wc-only
-      description: Notifies that the visible calendar month(s) have changed.
-    - name: auroDatePicker-newSlotContent
-      tier: wc-only
-      description: Notifies that new slot content has been added to the datepicker.
-    - name: auroFormElement-validated
-      tier: wc-only
-      description: Notifies that the component value(s) have been validated.
-  methods:
-    - name: register
-      tier: wc-only
-    - name: focus
-      tier: wc-only
-    - name: hideBib
-      tier: wc-only
-    - name: showBib
-      tier: wc-only
-    - name: resetInputs
-      tier: wc-only
-    - name: reset
-      tier: wc-only
-    - name: clear
-      tier: wc-only
-    - name: validate
-      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.
-    - Label the date input; the calendar popup is a dialog containing a grid (role="grid") of day cells.
-    - Provide accessible names for the previous/next month navigation and announce the selected date(s).
-  keyboard:
-    - All interactive affordances are real, focusable elements in DOM order.
-    - Arrow keys move between days, PageUp/PageDown change month, Enter selects, Esc closes.
-  validation:
-    - Range selection, blackout dates, and min/max beyond a single value are scripted; native <input type="date"> only supports min/max on one date.
-gaps:
-  - id: accessibility
-    feature: Accessibility
-    guidance: Native date inputs vary widely across browsers and platforms, with inconsistent screen reader announcements, keyboard behavior, and focus management.
-  - id: date-range-selection
-    feature: Date range selection
-    guidance: HTML has no native concept of a date range picker.
-  - id: blackout-dates
-    feature: Blackout dates
-    guidance: Native date inputs have no mechanism to mark specific dates as unavailable.
-  - id: custom-validation
-    feature: Custom validation
-    guidance: Native date validation is limited to required, min, and max, and error messages are browser-controlled.
-  - id: responsive-layout
-    feature: Responsive layout
-    guidance: Native date inputs render a small, browser-controlled popup that cannot be styled or repositioned.
-  - id: localization
-    feature: Localization
-    guidance: Native <input type="date"> follows the browser's locale for display format but offers no control over month names, navigation labels, or ARIA text.
-  - id: custom-cell-content
-    feature: Custom cell content
-    guidance: Native date inputs render a fixed grid of numbers, with no way to add prices, icons, or supplementary information to individual dates.
-  - id: design-system-integration
-    feature: Design system integration
-    guidance: A native <input type="date"> cannot be styled to match a design system — shadow DOM browser controls resist CSS customization and the calendar popup is entirely outside author control.
-examples:
-  - id: basic-date-input
-    html: |-
-      <label>
-        Departure date
-        <input type="date" class="datepicker" name="departure" />
-      </label>
-  - id: date-range-using-two-inputs
-    html: |-
-      <fieldset>
-        <legend>Travel dates</legend>
-        <label>
-          Departure
-          <input type="date" class="datepicker" name="departure" id="departure" />
-        </label>
-        <label>
-          Return
-          <input type="date" class="datepicker" name="return" id="return" />
-        </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'