[DRAFT] Auro Component Custom Styling Audit & Testing Plan

[sun-mota]

Auro Component Custom Styling Audit & Testing Plan

Context

40 auro-* components for the Alaska Airlines design system (31 standalone repos + 9 in auro-formkit). Each uses a layered CSS architecture inside Shadow DOM:

1. tokens.scss — sets default --ds-auro-{component}-* CSS custom properties on :host
2. color.scss — applies those vars to internal elements; overrides for variants/states
3. style.scss — structural/layout styles
4. @csspart JSDoc annotations — expose internals for ::part() external styling

Full scan of all 40 components was run on latest origin/main (pulled 2026-07-23).

Important: auro-checkbox, auro-combobox, auro-datepicker, auro-dropdown, auro-input, auro-menu, and auro-select are maintained inside auro-formkit (a monorepo at auro-formkit/components/). The standalone repos in the workspace (e.g. auro-input/) are legacy versions and should not be the source of truth. All formkit component findings in this document are from auro-formkit/components/.

---

---

Custom Property Audit

ondark deprecation: ondark is being removed; appearance="inverse" is the replacement. All [onDark] selectors in SCSS source files are paired 1:1 with [appearance="inverse"] — the new API works everywhere. One exception: auro-button/src/tokens-css.js has no appearance="inverse" pairing (see table row below).

All --ds-auro-* custom properties across all components. Sourced from tokens.scss and color.scss on origin/main (2026-07-23). Components prefixed auro-formkit/ live in auro-formkit/components/; their standalone repos are legacy.

Bug markers: ⚠️ = bypassed, missing from source, or possible duplicate — ❌ = no token exists where one is needed
inv: ✓ = appearance="inverse" support exists in color.scss
::part(...) rows: shadow parts exposed via @csspart — these are the selectors consumers can target with ::part() from outside the shadow DOM
Coverage gap: a color on an internal element is fully locked from consumers if it has neither a --ds-auro-* token nor a ::part() exposure — the Suggested Change column flags where this applies

Rows are sorted by priority: confirmed bugs first, then verify items, then clean properties.

Component	CSS Custom Property	inv	Bug / Notes	Suggested Change
auro-button	--ds-auro-button-text-color	✓	⚠️ HIGH — Bypassed by flat variant · color.scss L133–160, L279–308 · flat sets color: directly on .auro-button; all other variants go through :host custom property · consumer overrides of this token have no effect on flat buttons · also in src/styles/color-css.js	Replace .auro-button { color: ... } with :host([variant='flat']) { --ds-auro-button-text-color: ... } on :host; use :host([variant='flat']:not([disabled]):is([data-hover],[data-active])) for state overrides
auro-button	--ds-auro-button-tap-color	✓	⚠️ MEDIUM — Missing from SCSS source · only set in pre-built tokens-css.js · color.scss uses it with no fallback → mobile tap highlight is browser-defaulted when built from SCSS	Add --ds-auro-button-tap-color: transparent to styles/tokens.scss under :host
auro-button	(pre-built tokens-css.js)	✓	⚠️ MEDIUM — No appearance="inverse" in tokens-css.js · only has [onDark] selectors which never match (HTML lowercases attributes) · all inverse token defaults broken for consumers importing this file directly	Replace :host([onDark]) → :host([ondark]), :host([appearance="inverse"]) and :host(:not([onDark])) → :host(:not([ondark]):not([appearance="inverse"]))
auro-accordion	--ds-auro-accordion-trigger-icon-color	—	⚠️ LOW — Bypassed in disabled state · color.scss L28 · [auro-icon] inside :host([disabled]) uses --ds-basic-color-texticon-disabled directly instead of this token	In :host([disabled]), set --ds-auro-accordion-trigger-icon-color: var(--ds-basic-color-texticon-disabled, ...) and remove the direct [auro-icon] { color: ... } rule
auro-accordion	(no token)	—	❌ LOW — Missing disabled icon token · no --ds-auro-accordion-disabled-icon-color; the icon color in disabled state is hardwired to a global design token	Add --ds-auro-accordion-disabled-icon-color to tokens.scss, or repurpose --ds-auro-accordion-trigger-icon-color in the disabled rule — either unlocks the color for consumers
auro-tabs	(no token)	—	❌ MEDIUM — Complete coverage gap: all focus/slider colors hardwired · style.scss L57, L64 and tab-style.scss L46, L55 · focus indicator and slider use --ds-advanced-color-state-focused and --ds-advanced-color-state-focused-inverse directly · no --ds-auro-tabs-* tokens exist at all	Add --ds-auro-tabs-focus-color, --ds-auro-tabs-focus-inverse-color tokens; use in both style.scss and tab-style.scss
auro-formkit/auro-datepicker	(no token)	✓	❌ LOW — Coverage gap: selected cell border · color-cell.scss L28 · selected cell uses --ds-advanced-color-state-selected directly	Add --ds-auro-calendar-cell-selected-border-color to tokens.scss
auro-formkit/auro-datepicker	(no token)	✓	❌ LOW — Coverage gap: cell inner shadows · color-cell.scss L49–55 · cell border and box-shadow use --ds-basic-color-border-default, --ds-basic-color-surface-default, --ds-advanced-color-shared-background-muted directly	Add --ds-auro-calendar-cell-border-default-color and --ds-auro-calendar-cell-shadow-color tokens
auro-pane	(no token)	—	❌ LOW — Coverage gap: focus border · color.scss L30 · focused state uses --ds-advanced-color-state-focused directly · no --ds-auro-pane-focus-border-color token	Add --ds-auro-pane-focus-border-color to tokens.scss
auro-formkit/auro-dropdown	(no token)	✓	❌ LOW — Coverage gap: classic theme bib background · classic/bibStyles.scss L100 · uses --ds-color-background-primary directly	Extend --ds-auro-dropdownbib-background-color to cover the classic theme variant
auro-slideshow	(no token)	—	❌ LOW — Coverage gap: focus ring · style.scss L60 · focus ring box-shadow uses --ds-advanced-color-state-focused-inverse directly	Add --ds-auro-slideshow-focus-color token
auro-card	(no token)	—	❌ LOW — Coverage gap: box-shadow · style.scss L85, L111 · uses --ds-elevation-100/200 directly · no --ds-auro-card-boxshadow token	Add --ds-auro-card-boxshadow to tokens.scss; wrap elevation token
auro-drawer	(no token)	—	❌ LOW — Coverage gap: box-shadow · drawerContentStyles.scss L23 · uses --ds-elevation-200 directly	Add --ds-auro-drawer-boxshadow token
auro-toast	(no token)	—	❌ LOW — Coverage gap: box-shadow · style.scss L16 · uses --ds-elevation-200 directly	Add --ds-auro-toast-boxshadow token
auro-slideshow	::part(prev-button · next-button · play-pause-button)	—	Exposed shadow parts
auro-slideshow	(none)	—	❌ LOW — No component tokens at all · style.scss uses --ds-advanced-color-button-primary-background-* global tokens directly for nav dots · consumers cannot override dot colors	Add --ds-auro-slideshow-dot-color, --ds-auro-slideshow-dot-active-color, --ds-auro-slideshow-dot-hover-color tokens to tokens.scss; use them in style.scss instead of global tokens
auro-formkit/auro-select	::part(dropdownTrigger · dropdownChevron · dropdownSize)	✓	❌ MEDIUM — 3 declared parts missing from template · template exposes dropdown, wrapper, displayValue instead — likely renamed in a refactor without updating @csspart	Update @csspart annotations in auro-select.js to match actual part names: dropdown, wrapper, displayValue
auro-formkit/auro-dropdown	::part(helpText · trigger)	✓	❌ LOW — 2 declared parts missing from template · @csspart out of sync with actual template	Either add part="helpText" and part="trigger" to the template elements, or remove the annotations from @csspart in auro-dropdown.js
auro-card	::part(link)	—	❌ LOW — declared part missing from template · consumers cannot style via ::part(link)	Add part="link" to the anchor element in auro-card.js template, or remove @csspart link annotation
auro-hyperlink	::part(targetIcon)	✓	❌ LOW — declared part missing from template · external link icon cannot be styled via ::part(targetIcon)	Add part="targetIcon" to the icon element in auro-hyperlink.js template, or remove @csspart targetIcon annotation
auro-formkit/auro-input	::part(iconContainer)	✓	❌ LOW — declared part missing from template · @csspart out of sync	Add part="iconContainer" to the icon container in base-input.js template, or remove @csspart iconContainer annotation
auro-button	::part(link)	✓	⚠️ LOW — undocumented part · exists in template when buttonHref is set but not declared in @csspart	Add @csspart link - Apply CSS to the anchor element when component is used as a hyperlink to auro-button.js
auro-drawer	::part(drawer-backdrop)	—	⚠️ LOW — stale @csspart declaration · part was deprecated and removed from template; annotation should be deleted	Remove the @csspart {deprecated} drawer-backdrop annotation from auro-drawer.js
auro-drawer	--auro-drawer-backdrop-background	—	⚠️ Consistency risk — old naming convention · documented @cssprop but uses --auro-* prefix instead of --ds-auro-* · inconsistent with every other component token · consumers may not find it	Rename to --ds-auro-drawer-backdrop-background and deprecate the old name with an alias
auro-background	(JS inline styles)	—	⚠️ Consistency risk — JS-set styles vs CSS token pattern · background is applied via styleMap in JS, not via CSS custom properties on :host · different model from all other components; consumers must use JS props, not CSS overrides	Consider exposing --ds-auro-background-container-color (already exists) as the CSS-native path alongside the JS prop API
auro-badge	(no token)	✓	⚠️ Consistency risk — direct color reset in disabled+ondark+target state · style.scss L63 · uses --ds-color-text-primary-default directly to reset text color in a specific compound state · bypasses the --ds-auro-badge-text-color token for this edge case	Route through --ds-auro-badge-text-color so consumers can override it uniformly in all states
auro-tokenlist	(no tokens)	—	⚠️ Consistency risk — all colors use raw design tokens directly · intentional for a token display component, but consumers have no --ds-auro-tokenlist-* override path if UI customization is ever needed	Acceptable as-is; document explicitly that auro-tokenlist does not support custom styling
auro-formkit/auro-radio	(no token)	✓	⚠️ Verify — --ds-auro-radio-group-help-text-color is absent from formkit; confirm if intentionally removed	If needed, add --ds-auro-radio-group-help-text-color token to formkit radio/src/styles/tokens.scss
auro-tail	--ds-auro-tail-border-color-default	—	⚠️ Verify — possible duplicate of --ds-auro-tail-border-color	Clarify intent; if redundant, deprecate one and document migration path
auro-tail	--ds-auro-tail-border-w-default	—	⚠️ Verify — possible duplicate of --ds-auro-tail-border-width	Clarify intent; if redundant, deprecate one and document migration path
auro-accordion	::part(accordion · trigger · chevron · content)	—	Exposed shadow parts
auro-accordion	--ds-auro-accordion-content-border-color	—
auro-accordion	--ds-auro-accordion-group-border-color	—
auro-accordion	--ds-auro-accordion-trigger-border-color	—
auro-accordion	--ds-auro-accordion-trigger-color	—
auro-alert	::part(alert · alert-content)	—	Exposed shadow parts
auro-alert	--ds-auro-alert-border-color	—
auro-alert	--ds-auro-alert-container-color	—
auro-alert	--ds-auro-alert-icon-color	—
auro-alert	--ds-auro-alert-text-color	—
auro-avatar	--ds-auro-avatar-tail-container-gradient-color-one	—
auro-avatar	--ds-auro-avatar-tail-container-gradient-color-two	—
auro-background	--ds-auro-background-container-color	—
auro-badge	--ds-auro-badge-border-color	✓
auro-badge	--ds-auro-badge-boxshadow-color	✓
auro-badge	--ds-auro-badge-container-color	✓
auro-badge	--ds-auro-badge-text-color	✓
auro-banner	--ds-auro-banner-disclaimer-text-color	✓
auro-banner	--ds-auro-banner-icon-container-color	✓
auro-banner	--ds-auro-banner-text-color	✓
auro-banner	--ds-auro-banner-title-text-color	✓
auro-banner	--ds-auro-banner-wrapper-border-color	✓
auro-banner	--ds-auro-banner-wrapper-container-color	✓
auro-button	::part(button · loader · text)	✓	Exposed shadow parts · ⚠️ ::part(link) also exists in template when buttonHref is set but is NOT declared in @csspart — undocumented public part
auro-button	--ds-auro-button-border-color	✓
auro-button	--ds-auro-button-border-inset-color	✓
auro-button	--ds-auro-button-container-color	✓
auro-button	--ds-auro-button-container-image	✓
auro-button	--ds-auro-button-loader-color	✓
auro-card	::part(content · imageWrapper · image · header · description · cta)	—	Exposed shadow parts · ❌ ::part(link) declared in @csspart but missing from template — consumers cannot style it
auro-card	--ds-auro-card-border-color	—
auro-card	--ds-auro-card-link-border-color	—
auro-carousel	::part(wrapper)	—	Exposed shadow parts
auro-carousel	--ds-auro-carousel-gradient-color-one	—
auro-carousel	--ds-auro-carousel-gradient-color-two	—
auro-formkit/auro-checkbox	::part(checkbox · checkbox-input · checkbox-label)	✓	Exposed shadow parts
auro-formkit/auro-checkbox	--ds-auro-checkbox-border-color	✓
auro-formkit/auro-checkbox	--ds-auro-checkbox-checkmark-color	✓
auro-formkit/auro-checkbox	--ds-auro-checkbox-container-color	✓
auro-formkit/auro-checkbox	--ds-auro-checkbox-group-text-color	✓
auro-formkit/auro-checkbox	--ds-auro-checkbox-label-color	✓
auro-formkit/auro-checkbox	--ds-auro-checkbox-outline-color	✓
auro-formkit/auro-counter	--ds-auro-counter-background-color	✓
auro-formkit/auro-counter	--ds-auro-counter-border-color	✓
auro-formkit/auro-counter	--ds-auro-counter-control-background-color	✓
auro-formkit/auro-counter	--ds-auro-counter-control-border-color	✓
auro-formkit/auro-counter	--ds-auro-counter-description-text-color	✓
auro-formkit/auro-counter	--ds-auro-counter-divider-color	✓
auro-formkit/auro-counter	--ds-auro-counter-error-icon-color	✓
auro-formkit/auro-counter	--ds-auro-counter-icon-color	✓
auro-formkit/auro-counter	--ds-auro-counter-label-text-color	✓
auro-formkit/auro-counter	--ds-auro-counter-outline-color	✓
auro-formkit/auro-counter	--ds-auro-counter-placeholder-text-color	✓
auro-formkit/auro-counter	--ds-auro-counter-quantity-text-color	✓
auro-formkit/auro-counter	--ds-auro-counter-text-color	✓
auro-formkit/auro-datepicker	::part(dropdown · trigger · input · calendarWrapper · calendar · helpTextSpan · helpText)	✓	Exposed shadow parts
auro-formkit/auro-datepicker	--ds-auro-calendar-cell-border-color	✓
auro-formkit/auro-datepicker	--ds-auro-calendar-cell-container-color	✓
auro-formkit/auro-datepicker	--ds-auro-calendar-cell-in-range-color	✓
auro-formkit/auro-datepicker	--ds-auro-calendar-cell-price-text-color	✓
auro-formkit/auro-datepicker	--ds-auro-calendar-cell-text-color	✓
auro-formkit/auro-datepicker	--ds-auro-calendar-mobile-header-container-color	✓
auro-formkit/auro-datepicker	--ds-auro-calendar-mobile-header-divider-color	✓
auro-formkit/auro-datepicker	--ds-auro-calendar-mobile-header-text-color	✓
auro-formkit/auro-datepicker	--ds-auro-calendar-month-container-color	✓
auro-formkit/auro-datepicker	--ds-auro-calendar-month-divider-color	✓
auro-formkit/auro-datepicker	--ds-auro-calendar-month-header-color	✓
auro-formkit/auro-datepicker	--ds-auro-calendar-nav-btn-border-color	✓
auro-formkit/auro-datepicker	--ds-auro-calendar-nav-btn-chevron-color	✓
auro-formkit/auro-datepicker	--ds-auro-calendar-nav-btn-container-color	✓
auro-formkit/auro-datepicker	--ds-auro-datepicker-border-color	✓
auro-formkit/auro-datepicker	--ds-auro-datepicker-error-icon-color	✓
auro-formkit/auro-datepicker	--ds-auro-datepicker-label-text-color	✓
auro-formkit/auro-datepicker	--ds-auro-datepicker-outline-color	✓
auro-formkit/auro-datepicker	--ds-auro-datepicker-placeholder-color	✓
auro-formkit/auro-datepicker	--ds-auro-datepicker-placeholder-text-color	✓
auro-formkit/auro-datepicker	--ds-auro-datepicker-range-input-divider-color	✓
auro-dialog	::part(close-button · dialog-overlay · dialog · dialog-header · dialog-content · dialog-footer)	—	Exposed shadow parts
auro-dialog	--ds-auro-dialog-boxshadow-color	—
auro-dialog	--ds-auro-dialog-container-color	—
auro-dialog	--ds-auro-dialog-overlay-modal-background-color	—
auro-dialog	--ds-auro-dialog-overlay-open-background-color	—
auro-dialog	--ds-auro-dialog-text-color	—
auro-drawer	::part(drawer-wrapper · drawer-header · drawer-content · drawer-footer · close-button)	—	Exposed shadow parts · ⚠️ ::part(drawer-backdrop) declared as deprecated and removed from template — stale @csspart declaration should be cleaned up
auro-drawer	--ds-auro-drawer-container-color	—
auro-drawer	--ds-auro-drawer-text-color	—
auro-drawer	--ds-auro-floater-backdrop-modal-background-color	—
auro-drawer	--ds-auro-floater-container-background-color	—
auro-drawer	--ds-auro-floater-container-text-color	—
auro-formkit/auro-dropdown	::part(bibContainer · chevron · size)	✓	Exposed shadow parts · ❌ ::part(helpText) and ::part(trigger) declared in @csspart but missing from template
auro-formkit/auro-dropdown	--ds-auro-dropdown-label-text-color	✓
auro-formkit/auro-dropdown	--ds-auro-dropdown-trigger-background-color	✓
auro-formkit/auro-dropdown	--ds-auro-dropdown-trigger-border-color	✓
auro-formkit/auro-dropdown	--ds-auro-dropdown-trigger-container-color	✓
auro-formkit/auro-dropdown	--ds-auro-dropdown-trigger-hover-background-color	✓
auro-formkit/auro-dropdown	--ds-auro-dropdown-trigger-outline-color	✓
auro-formkit/auro-dropdown	--ds-auro-dropdown-trigger-text-color	✓
auro-formkit/auro-dropdown	--ds-auro-dropdownbib-background-color	✓
auro-formkit/auro-dropdown	--ds-auro-dropdownbib-boxshadow-color	✓
auro-formkit/auro-dropdown	--ds-auro-dropdownbib-container-color	✓
auro-formkit/auro-dropdown	--ds-auro-dropdownbib-text-color	✓
auro-flight	::part(durationContainer · flightType · arrivalContainer · departureContainer · arrivalTime · departureTime · arrivalStation · departureStation · flightContainer)	—	Exposed shadow parts
auro-flight	--ds-auro-flight-cancelled-station-text-color	—
auro-flight	--ds-auro-flight-footer-text-color	—
auro-flight	--ds-auro-flight-header-days-changed-text-color	—
auro-flight	--ds-auro-flight-header-text-color	—
auro-flight	--ds-auro-flight-main-cancelled-station-text-color	—
auro-flight	--ds-auro-flight-main-station-text-color	—
auro-flight	--ds-auro-flight-main-time-text-color	—
auro-flight	--ds-auro-flight-station-text-color	—
auro-flight	--ds-auro-flight-time-text-color	—
auro-flightline	--ds-auro-flightline-destination-line-color	—
auro-flightline	--ds-auro-flightline-layover-duration-color	—
auro-flightline	--ds-auro-flightline-layover-marker-border-color	—
auro-flightline	--ds-auro-flightline-layover-marker-container-color	—
auro-flightline	--ds-auro-flightline-segment-iata-text-color	—
auro-flightline	--ds-auro-flightline-segment-line-color	—
auro-hyperlink	::part(link)	✓	Exposed shadow parts · ❌ ::part(targetIcon) declared in @csspart but missing from template — consumers cannot style the external link icon
auro-hyperlink	--ds-auro-hyperlink-{type}-{state}-{prop}-{theme}	✓	~140 props — {type}: default/nav/cta/cta-secondary/cta-tertiary · {state}: default/hover/focus/visited · {prop}: color/container-color/border-color/outline-color · {theme}: -default/-inverse
auro-icon	::part(label)	✓	Exposed shadow parts
auro-icon	--ds-auro-alaska-color	✓
auro-icon	--ds-auro-icon-color	✓
auro-icon	--ds-auro-icon-size	✓
auro-formkit/auro-input	::part(wrapper · label · helpText · input · accentIcon · accent-left · accent-right · displayValue · inputHelpText)	✓	Exposed shadow parts · ❌ ::part(iconContainer) declared in @csspart but not in template
auro-formkit/auro-input	--ds-auro-input-border-color	✓
auro-formkit/auro-input	--ds-auro-input-caret-color	✓
auro-formkit/auro-input	--ds-auro-input-container-color	✓
auro-formkit/auro-input	--ds-auro-input-error-icon-color	✓
auro-formkit/auro-input	--ds-auro-input-label-text-color	✓
auro-formkit/auro-input	--ds-auro-input-outline-color	✓
auro-formkit/auro-input	--ds-auro-input-placeholder-text-color	✓
auro-formkit/auro-input	--ds-auro-input-text-color	✓
auro-loader	::part(element)	✓	Exposed shadow parts
auro-loader	--ds-auro-loader-background-color	✓
auro-loader	--ds-auro-loader-border-color	✓
auro-loader	--ds-auro-loader-color	✓
auro-lockup	--ds-auro-lockup-alaska-logo-color	✓
auro-lockup	--ds-auro-lockup-divider-color	✓
auro-lockup	--ds-auro-lockup-subtitle-color	✓
auro-lockup	--ds-auro-lockup-title-color	✓
auro-formkit/auro-menu	--ds-auro-menu-divider-color	—
auro-formkit/auro-menu	--ds-auro-menu-loader-color	—
auro-formkit/auro-menu	--ds-auro-menu-loader-text-color	—
auro-formkit/auro-menu	--ds-auro-menuoption-container-border-color	—
auro-formkit/auro-menu	--ds-auro-menuoption-container-color	—
auro-formkit/auro-menu	--ds-auro-menuoption-icon-color	—
auro-formkit/auro-menu	--ds-auro-menuoption-text-color	—
auro-nav	--ds-auro-anchorlink-border-color	—
auro-nav	--ds-auro-anchorlink-default-marker-color	—
auro-nav	--ds-auro-anchorlink-text-color	—
auro-nav	--ds-auro-anchorlink-text-hover-color	—
auro-nav	--ds-auro-anchornav-label-color	—
auro-nav	--ds-auro-anchornav-mobile-background-gradient	—
auro-nav	--ds-auro-anchornav-selected-marker-color	—
auro-nav	--ds-auro-breadcrumb-chevron-color	—
auro-nav	--ds-auro-breadcrumb-icon-color	—
auro-nav	--ds-auro-breadcrumb-last-link-text-color	—
auro-pane	--ds-auro-pane-border-color	—
auro-pane	--ds-auro-pane-boxshadow-color	—
auro-pane	--ds-auro-pane-container-color	—
auro-pane	--ds-auro-pane-date-text-color	—
auro-pane	--ds-auro-pane-day-of-week-text-color	—
auro-pane	--ds-auro-pane-price-empty-text-color	—
auro-pane	--ds-auro-pane-price-text-color	—
auro-popover	--ds-auro-popover-boxshadow-color	✓
auro-popover	--ds-auro-popover-container-color	✓
auro-popover	--ds-auro-popover-text-color	✓
auro-formkit/auro-radio	::part(radio-group · radio · radio-input · radio-label)	✓	Exposed shadow parts
auro-formkit/auro-radio	--ds-auro-radio-btn-border-color	✓
auro-formkit/auro-radio	--ds-auro-radio-btn-fill-color	✓
auro-formkit/auro-radio	--ds-auro-radio-btn-inset-color	✓
auro-formkit/auro-radio	--ds-auro-radio-group-label-color	✓
auro-formkit/auro-radio	--ds-auro-radio-label-color	✓
auro-formkit/auro-radio	--ds-auro-radio-tap-color	✓
auro-formkit/auro-select	::part(helpText)	✓	Exposed shadow parts · ❌ ::part(dropdownTrigger), ::part(dropdownChevron), ::part(dropdownSize) declared in @csspart but missing from template — template exposes dropdown, wrapper, displayValue instead
auro-formkit/auro-select	--ds-auro-select-background-color	✓
auro-formkit/auro-select	--ds-auro-select-border-color	✓
auro-formkit/auro-select	--ds-auro-select-error-icon-color	✓
auro-formkit/auro-select	--ds-auro-select-label-text-color	✓
auro-formkit/auro-select	--ds-auro-select-outline-color	✓
auro-formkit/auro-select	--ds-auro-select-placeholder-text-color	✓
auro-formkit/auro-select	--ds-auro-select-text-color	✓
auro-sidenav	--ds-auro-sidenav-text-color	—
auro-sidenav	--ds-auro-sidenavitem-border-bottom-color	—
auro-sidenav	--ds-auro-sidenavitem-border-left-color	—
auro-sidenav	--ds-auro-sidenavitem-icon-color	—
auro-sidenav	--ds-auro-sidenavsection-border-color	—
auro-sidenav	--ds-auro-sidenavsection-icon-color	—
auro-sidenav	--ds-auro-sidenavsection-text-color	—
auro-sidenav	--ds-auro-sidenavsection-trigger-background-hover-color	—
auro-sidenav	--ds-auro-sidenavsection-trigger-border-color	—
auro-skeleton	--ds-auro-skeleton-container-color	—
auro-skeleton	--ds-auro-skeleton-container-gradient-color-one	—
auro-skeleton	--ds-auro-skeleton-container-gradient-color-two	—
auro-table	--ds-auro-table-alt-row-container-color	—
auro-table	--ds-auro-table-border-color	—
auro-tail	--ds-auro-tail-badge-offset-x	—
auro-tail	--ds-auro-tail-badge-offset-y	—
auro-tail	--ds-auro-tail-badge-w	—
auro-tail	--ds-auro-tail-badge-w-lg	—
auro-tail	--ds-auro-tail-border-color	—
auro-tail	--ds-auro-tail-border-color-white	—
auro-tail	--ds-auro-tail-border-display	—
auro-tail	--ds-auro-tail-border-padding	—
auro-tail	--ds-auro-tail-border-radius-full	—
auro-tail	--ds-auro-tail-border-width	—
auro-tail	--ds-auro-tail-container-gradient	—
auro-tail	--ds-auro-tail-container-w	—
auro-tail	--ds-auro-tail-container-w-lg	—
auro-tail	--ds-auro-tail-gradient-oa	—
auro-tail	--ds-auro-tail-group-border-color	—
auro-tail	--ds-auro-tail-group-diag-w-*	—	Responsive breakpoint variants
auro-tail	--ds-auro-tail-group-horiz-border-w-*	—	Responsive breakpoint variants
auro-tail	--ds-auro-tail-group-horiz-overlap-*	—	Responsive breakpoint variants
auro-tail	--ds-auro-tail-href-label-gap	—
auro-tail	--ds-auro-tail-href-label-gap-lg	—
auro-tail	--ds-auro-tail-tail-drop-shadow	—
auro-tail	--ds-auro-tail-tail-offset-y	—
auro-tail	--ds-auro-tail-tail-offset-y-lg	—
auro-tail	--ds-auro-tail-tail-outline-color	—
auro-tail	--ds-auro-tail-tail-outline-w	—
auro-tail	--ds-auro-tail-tail-w	—
auro-tail	--ds-auro-tail-tail-w-lg	—
auro-tail	--ds-auro-tail-z-index-badge	—
auro-tail	--ds-auro-tail-z-index-border	—
auro-tail	--ds-auro-tail-z-index-group-back	—
auro-tail	--ds-auro-tail-z-index-group-front	—
auro-toast	::part(type-icon · close-button)	—	Exposed shadow parts
auro-toast	--ds-auro-toast-close-button-hover-container-color	—
auro-toast	--ds-auro-toast-container-color	—
auro-toast	--ds-auro-toast-icon-color	—
auro-toast	--ds-auro-toast-text-color	—
auro-backtotop	::part(button · icon)	—	Exposed shadow parts
auro-backtotop	(no own tokens)	—	Delegates to auro-button + auro-icon
auro-formkit/auro-combobox	(no own tokens)	—	Composes auro-dropdown + auro-input; override their tokens directly
auro-datetime	(no own tokens)	—	No color/token files
auro-header	(no own tokens)	—	No color/token files
auro-layover	(no own tokens)	—	No color/token files
auro-tabs	::part(tabgroup__root · tabgroup__tabs · tabgroup__panels · slider-positioner · slider)	—	Exposed shadow parts
auro-tabs	(no own tokens)	—	Uses --ds-advanced-color-* global tokens directly

Deprecated @import SCSS syntax (LOW/MAINTENANCE)

SCSS @import is deprecated and will be removed. These components still use it instead of @use:

Component	Files using @import
auro-card	color.scss, style.scss, tokens.scss
auro-flight	tokens.scss, + 3 color files, + 3 style files
auro-pane	color.scss, tokens.scss, style.scss

No CSS custom property tests (GAP)

Zero tests across all 40 components verify --ds-auro-* token values, variant overrides, ::part() reachability, or appearance="inverse" behavior. See Testing Plan below.

---

Naming Consistency Audit

Part name conventions — mixed camelCase and kebab-case

No single convention is followed across components. This makes the ::part() API harder to predict and document.

Convention	Examples	Components
camelCase	helpText, bibContainer, calendarWrapper, displayValue, accentIcon, iconContainer, imageWrapper, targetIcon, inputHelpText, dropdownTrigger/Chevron/Size, flightContainer, arrivalContainer	auro-formkit/auro-input, auro-formkit/auro-dropdown, auro-formkit/auro-datepicker, auro-flight, auro-card, auro-hyperlink
kebab-case	close-button, alert-content, radio-input, radio-label, checkbox-input, dialog-header/content/footer, drawer-header/content/footer, prev-button, next-button, play-pause-button, type-icon, accent-left/right	auro-dialog, auro-drawer, auro-alert, auro-formkit/auro-radio, auro-formkit/auro-checkbox, auro-toast, auro-slideshow
BEM (__)	tabgroup__root, tabgroup__tabs, tabgroup__panels	auro-tabs
plain	button, trigger, wrapper, label, input, content, chevron, slider	mixed

Shared part names used consistently (good): helpText (4×), trigger (3×), close-button (3×), wrapper (2×), label (2×), input (2×), chevron (2×), button (2×) — these cross-component names match.

Suggestion: Adopt kebab-case as the system-wide standard for multi-word part names (aligns with HTML attribute conventions and CSS ::part() usage patterns). Migrate camelCase parts during next breaking change window.

---

Variant name conventions — camelCase vs kebab-case, missing prefixes

Issue	Components	Detail
Fare variants: camelCase vs kebab-case	auro-icon vs auro-badge	auro-icon uses fareBasicEconomy, fareBusiness, fareEconomy, fareFirst, farePremiumEconomy (camelCase); auro-badge uses fare-business, fare-economy, fare-first, fare-premium, fare-saver (kebab-case) — same domain, two different conventions
OneWorld tier naming	auro-icon vs auro-badge	auro-icon uses tierOneWorldEmerald/Ruby/Sapphire; auro-badge uses oneworld — completely different names for overlapping concepts
Status prefix inconsistency	auro-icon vs auro-badge, auro-toast	auro-icon uses statusError, statusInfo, statusSuccess, statusWarning; auro-badge and auro-toast use error, success, info, warning — same semantics, different prefixes
disabled as a variant	auro-icon	Uses variant="disabled" to style a disabled-looking icon, but disabled is a native HTML attribute on other components — conceptually inconsistent
transparent-inverse combined variant	auro-badge	Combines transparent + inverse into one variant string; other components handle inverse via appearance="inverse" attribute separately — inconsistent pattern

Suggestion: Standardize on kebab-case for all multi-word variant values. Align fare/status/tier naming across auro-icon and auro-badge — pick one convention per domain and document it in the design token naming guide.

---

Testing Plan

Framework (no new deps)

• @open-wc/testing — fixture, html, expect, elementUpdated
• Web Test Runner (auro test)
• New test file per component: test/auro-{component}.style.test.js

Test Patterns

Pattern A — Default token custom properties are set

it('sets default CSS custom properties on :host', async () => {
  const el = await fixture(html`<auro-button>Click</auro-button>`);
  const styles = getComputedStyle(el);
  expect(styles.getPropertyValue('--ds-auro-button-container-color').trim()).to.not.equal('');
  expect(styles.getPropertyValue('--ds-auro-button-text-color').trim()).to.not.equal('');
});

Pattern B — Variant overrides the intermediate custom property

it('secondary variant sets --ds-auro-button-text-color', async () => {
  const el = await fixture(html`<auro-button variant="secondary">Label</auro-button>`);
  await elementUpdated(el);
  const styles = getComputedStyle(el);
  expect(styles.getPropertyValue('--ds-auro-button-text-color').trim()).to.not.equal('');
});

Pattern C — Regression for Bug 2: flat variant respects external token override

it('flat variant respects --ds-auro-button-text-color override', async () => {
  const container = await fixture(html`
    <div style="--ds-auro-button-text-color: rgb(255, 0, 0);">
      <auro-button variant="flat">Label</auro-button>
    </div>
  `);
  await elementUpdated(container.querySelector('auro-button'));
  const btn = container.querySelector('auro-button').shadowRoot.querySelector('.auro-button');
  expect(getComputedStyle(btn).color).to.equal('rgb(255, 0, 0)');
  // This test FAILS before Bug 2 fix and PASSES after — use as regression gate
});

Pattern D — ::part() shadow parts are reachable

it('::part(button) exposes the internal button element', async () => {
  const el = await fixture(html`<auro-button>Label</auro-button>`);
  const part = el.shadowRoot.querySelector("[part~='button']");
  expect(part).to.not.be.null;
  expect(part.tagName.toLowerCase()).to.equal('button');
});

Pattern E — appearance="inverse" applies inverse token defaults (canonical dark mode API)

it('appearance="inverse" sets different --ds-auro-button-text-color than default', async () => {
  const light   = await fixture(html`<auro-button>Label</auro-button>`);
  const inverse = await fixture(html`<auro-button appearance="inverse">Label</auro-button>`);
  await elementUpdated(light);
  await elementUpdated(inverse);
  const lightText   = getComputedStyle(light).getPropertyValue('--ds-auro-button-text-color').trim();
  const inverseText = getComputedStyle(inverse).getPropertyValue('--ds-auro-button-text-color').trim();
  expect(inverseText).to.not.equal('');
  expect(lightText).to.not.equal(inverseText);
  // Tests the new API; ondark is deprecated and will be removed
});

Pattern F — Disabled state override

it('disabled state sets different --ds-auro-button-container-color', async () => {
  const active   = await fixture(html`<auro-button>Label</auro-button>`);
  const disabled = await fixture(html`<auro-button disabled>Label</auro-button>`);
  await elementUpdated(active);
  await elementUpdated(disabled);
  const activeColor   = getComputedStyle(active).getPropertyValue('--ds-auro-button-container-color').trim();
  const disabledColor = getComputedStyle(disabled).getPropertyValue('--ds-auro-button-container-color').trim();
  expect(disabledColor).to.not.equal('');
  expect(activeColor).to.not.equal(disabledColor);
});

Priority order for implementation

1. auro-button — all patterns A–F (has the most bugs; flat variant, tokens-css.js, appearance=inverse)
2. auro-accordion — Pattern A + F (disabled icon direct color bug)
3. auro-radio — Pattern A (verify whether --ds-auro-radio-group-help-text-color is missing from formkit)
4. Remaining components — Pattern A + E as a smoke test baseline (verify tokens set + appearance=inverse differs)

Test file location

auro-{component}/test/auro-{component}.style.test.js
Run with: cd auro-{component} && auro test

---

Shared Test Helper

To avoid copy-pasting getComputedStyle boilerplate across 45 test files, create a shared utility in auro-library or as a local helper per repo:

test/styleTestUtils.js (copy into each component's test/ directory, or add to @aurodesignsystem/auro-library)

import { elementUpdated, fixture, html } from '@open-wc/testing';

/**
 * Assert that all given CSS custom properties are set (non-empty) on the element's computed style.
 * @param {Element} el
 * @param {string[]} properties - list of --ds-auro-* property names
 */
export async function assertTokensSet(el, properties) {
  await elementUpdated(el);
  const styles = getComputedStyle(el);
  for (const prop of properties) {
    const value = styles.getPropertyValue(prop).trim();
    expect(value, `${prop} should be set on :host`).to.not.equal('');
  }
}

/**
 * Assert that all given CSS custom properties differ between two elements
 * (e.g. default vs appearance="inverse", or enabled vs disabled).
 * @param {Element} elA
 * @param {Element} elB
 * @param {string[]} properties
 */
export async function assertTokensDiffer(elA, elB, properties) {
  await elementUpdated(elA);
  await elementUpdated(elB);
  const stylesA = getComputedStyle(elA);
  const stylesB = getComputedStyle(elB);
  for (const prop of properties) {
    const valA = stylesA.getPropertyValue(prop).trim();
    const valB = stylesB.getPropertyValue(prop).trim();
    expect(valA, `${prop} should be set on first element`).to.not.equal('');
    expect(valB, `${prop} should be set on second element`).to.not.equal('');
    expect(valA, `${prop} should differ between the two elements`).to.not.equal(valB);
  }
}

/**
 * Assert that an external CSS custom property override is inherited by a shadow DOM element.
 * @param {string} tag - custom element tag name (e.g. 'auro-button')
 * @param {string} prop - the --ds-auro-* property to override
 * @param {string} overrideValue - e.g. 'rgb(255, 0, 0)'
 * @param {string} shadowSelector - selector inside shadowRoot to check computed color/etc.
 * @param {string} cssProperty - computed style property to read (e.g. 'color')
 */
export async function assertExternalOverrideApplies(tag, prop, overrideValue, shadowSelector, cssProperty) {
  const container = await fixture(html`
    <div style="${prop}: ${overrideValue};">
      <${tag}></${tag}>
    </div>
  `);
  const el = container.querySelector(tag);
  await elementUpdated(el);
  const inner = el.shadowRoot.querySelector(shadowSelector);
  expect(getComputedStyle(inner)[cssProperty]).to.equal(overrideValue);
}

Usage in a component test:

import { assertTokensSet, assertTokensDiffer } from './styleTestUtils.js';

it('default tokens are set', async () => {
  const el = await fixture(html`<auro-button>Click</auro-button>`);
  await assertTokensSet(el, [
    '--ds-auro-button-text-color',
    '--ds-auro-button-container-color',
    '--ds-auro-button-border-color',
  ]);
});

it('appearance=inverse tokens differ from default', async () => {
  const light   = await fixture(html`<auro-button>Label</auro-button>`);
  const inverse = await fixture(html`<auro-button appearance="inverse">Label</auro-button>`);
  await assertTokensDiffer(light, inverse, [
    '--ds-auro-button-text-color',
    '--ds-auro-button-container-color',
  ]);
});

---