@adia-ai/web-components 0.5.13 → 0.5.14

package/CHANGELOG.md

@@ -11,6 +11,60 @@ runtime ships in the sibling `@adia-ai/a2ui-runtime` package
 
 _No pending changes._
 
+## [0.5.14] - 2026-05-15
+
+### v0.5.14 — Form-control hover-fg token unification (precursor to §315; commit `178418525`)
+
+Form-control primitives diverged on hover-text token routing. `button-ui` correctly used `--a-ui-text-hover` (resolves to `--a-fg-strong` — canonical hover-lift for form-control text); every other form-control primitive used the generic `--a-fg` (no actual lift from default `--a-canvas-text`) — so "hover" had zero text-color effect on `input`/`textarea`/`segment`, and `select-ui`'s listbox/caret hover paths bypassed the `--select-*` token layer entirely with raw `--a-fg-*` references.
+
+#### Fixed — `components/{input,textarea,segment,select}/`
+
+- `input-ui`: `--input-fg-hover: var(--a-fg)` → `var(--a-ui-text-hover)`; `--input-affix-fg-hover: var(--a-fg-subtle)` → `var(--a-ui-text-subtle)`.
+- `textarea-ui`: matching routing on hover/affix-hover.
+- `segment-ui`: same routing change.
+- `select-ui`: listbox + caret + option-hover tokens previously raw `--a-fg-*` references now route through their `--select-*` semantic layer (which itself anchors at `--a-ui-text-*` family).
+
+Net effect: hover-text colors now consistent across all form-control primitives + theme designers can swap them all by changing one semantic token (`--a-ui-text-hover`) at the `--a-ui-*` family root in `semantics.css`.
+
+### v0.5.14 §315 — Drift-class sweep follow-up (`ui-audit-coherence` + `maintain-tokens` + `analyze-css` triple-pass)
+
+Three parallel skill-driven audits surfaced 7 mechanical drift-classes; landed as a single sweep in one commit (`025a981db`). Follow-up to the form-control hover-fg unification at `178418525` — same bug shape (component CSS bypassing its own semantic-layer routing through raw global tokens), broader scope.
+
+#### Fixed — `components/select/`, `components/nav-group/`, `components/chat-thread/chat-input.css`
+
+- `select.css:254,286,293,300` — 4 raw `var(--a-fg-*)` callsites routed through `--select-fg-{muted,fg,muted,muted}` (semantic layer already existed but was bypassed).
+- `nav-group.css:225,234,244,253,286,298` — 6 raw `var(--a-fg-{muted,subtle,strong})` callsites routed through `--nav-group-fg-{muted,muted,hover,selected,muted,muted}`.
+- `chat-input.css:40,50,58` — placeholder/hover/disabled tokens routed through the canonical `--a-ui-text-{placeholder,hover,disabled}` field-family chain instead of the generic `--a-fg-*` family. Continues the v0.5.13 hover-fg unification arc.
+
+#### Fixed — `components/{check,radio,switch,tabs,action-list,calendar-picker,menu}/`
+
+- 6 form-adjacent primitives' `--{comp}-fg-disabled` token routed through canonical `--a-ui-text-disabled` instead of `--a-fg-muted` (the disabled-text version of the v0.5.13 hover-fg drift class).
+- `menu.css:96,99` also fixed `--menu-item-fg-disabled` + `--menu-item-icon-disabled` (the third variant `--a-fg-disabled` shape; same canonical target).
+
+#### Added — `components/otp-input/`, `components/search/`
+
+- `<otp-input-ui>` + `<search-ui>` now dispatch `change` alongside `input` on every value-altering event. Both primitives previously emitted only `input` (the sole exceptions across all UIFormElement-bearing primitives). Closes consumer event-binding gap — `@change=${handler}` now works against every form-bearing tag uniformly.
+- `.d.ts` files gain `OtpInputChangeEvent` + `SearchChangeEvent` type exports (reuse existing detail interfaces; matches v0.5.10 `check-form-bearing-dts` audit convention).
+- yaml `events:` blocks declare the new `change` event with `detail.value`.
+
+#### Fixed — `styles/typography.css`
+
+- `:where(mark)` background reference fixed: `var(--a-highlight-default)` → `var(--a-highlight)` (`--a-highlight-default` token does not exist; pre-fix `<mark>` silently fell back to UA-default highlight). Single-line typo discovered via `maintain-tokens` skill sweep.
+
+#### Fixed — `components/{textarea,upload,option-card,pagination}/` transition consistency
+
+- `textarea.css:76` transition list expanded from `border-color` only → `background + border-color + color + box-shadow` (matches `input-ui`'s 4-property parity; pre-fix hover/focus slammed in instead of easing).
+- `upload.css:64-67` + `option-card.css:102-104` + `pagination.css:71-73` each gain `box-shadow` (and `border-color` for pagination) so focus-ring eases in alongside the other state changes. Cross-primitive hover/focus polish parity restored.
+
+#### Fixed — `components/input/`, `components/select/` `-active` token routing
+
+- `--input-fg-focus: var(--a-fg-strong)` → `var(--a-ui-text-active)` (closes orphan: `--a-ui-text-active` semantic-layer alias existed at `semantics.css:552` with zero consumers).
+- `--select-option-fg-active: var(--a-fg)` → `var(--a-ui-text-active)` (same routing; cross-primitive form-control consistency).
+
+#### Fixed — `components/heatmap/`
+
+- `class.js:disconnected()` now cancels `#raf` via `cancelAnimationFrame()`. Pre-fix the `requestAnimationFrame` handle was stored but never cleaned up on detach — minor memory leak in scroll-heavy demos. ~3 LOC.
+
 ## [0.5.13] - 2026-05-15
 
 ### v0.5.13 §310 — `apcaContrast` soft-clamp constant fix (FEEDBACK-35; P2 correctness)

package/components/action-list/action-list.css

@@ -39,7 +39,7 @@ action-item-ui:hover [slot="icon"] {
     --action-item-fg:              var(--a-fg-subtle);
     --action-item-fg-hover:        var(--a-fg-strong);
     --action-item-bg-hover:        var(--a-bg-muted);
-    --action-item-fg-disabled:     var(--a-fg-muted);
+    --action-item-fg-disabled:     var(--a-ui-text-disabled);
     --action-item-icon-fg:         var(--a-fg-muted);
     --action-item-icon-fg-hover:   var(--a-fg);
     --action-item-danger-fg:       var(--a-danger-bg);

package/components/calendar-picker/calendar-picker.css

@@ -68,7 +68,7 @@
     --calendar-picker-day-bg-selected:        var(--a-accent);
     --calendar-picker-day-fg-selected:        var(--a-accent-fg);
     --calendar-picker-day-fg-outside:         var(--a-fg-muted);
-    --calendar-picker-day-fg-disabled:        var(--a-fg-muted);
+    --calendar-picker-day-fg-disabled:        var(--a-ui-text-disabled);
     --calendar-picker-day-today-border:       var(--a-accent);
     --calendar-picker-day-today-dot-size:     var(--a-space-0-5);
     --calendar-picker-day-today-dot-offset:   var(--a-space-1);

package/components/chat-thread/chat-input.css

@@ -37,7 +37,7 @@ chat-input-ui textarea-ui:not([disabled]) [slot="text"]:hover {
     --chat-input-fg:              var(--a-fg);
     --chat-input-border:          var(--a-border-subtle);
     --chat-input-caret-color:     var(--a-fg-subtle);
-    --chat-input-placeholder-fg:  var(--a-fg-muted);
+    --chat-input-placeholder-fg:  var(--a-ui-text-placeholder);
 
     /* Hover — matches input-ui's affordance (subtle alpha lift on the
        canvas surface + slightly stronger border + brightened fg). The
@@ -47,7 +47,7 @@ chat-input-ui textarea-ui:not([disabled]) [slot="text"]:hover {
        doesn't compound. */
     --chat-input-bg-hover:        var(--a-ui-bg-hover);
     --chat-input-border-hover:    var(--a-ui-border-hover);
-    --chat-input-fg-hover:        var(--a-fg);
+    --chat-input-fg-hover:        var(--a-ui-text-hover);
 
     /* Disabled — host-level chrome (background, border, pointer-events)
        lives on `:scope[disabled]` below. Inner-text disabled color is
@@ -55,7 +55,7 @@ chat-input-ui textarea-ui:not([disabled]) [slot="text"]:hover {
        leak through. */
     --chat-input-bg-disabled:     transparent;
     --chat-input-border-disabled: var(--a-border-subtle);
-    --chat-input-fg-disabled:     var(--a-fg-disabled);
+    --chat-input-fg-disabled:     var(--a-ui-text-disabled);
 
     /* Canonical focus ring — chat-input is a *nested-control host*.
        See semantics.css FOCUS block + the nested-control pattern

package/components/check/check.css

@@ -60,7 +60,7 @@ check-ui[indeterminate] {
     --check-bg-checked-hover: var(--a-primary-hover);
 
     /* ── State: disabled ── */
-    --check-fg-disabled:      var(--a-fg-muted);
+    --check-fg-disabled:      var(--a-ui-text-disabled);
 
     /* ── Check icon (CSS border trick, no SVG) ── */
     --_icon-w:    0;

package/components/heatmap/class.js

@@ -86,6 +86,10 @@ export class UIHeatmap extends UIElement {
     this.removeEventListener('pointerleave', this.#onLeave);
     this.removeEventListener('click', this.#onClick);
     this.#bound = false;
+    if (this.#raf != null) {
+      cancelAnimationFrame(this.#raf);
+      this.#raf = null;
+    }
   }
 
   #raf = null;

package/components/input/input.css

@@ -37,9 +37,9 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
 
     /* ── State: hover/focus ── */
     --input-bg-hover:        var(--a-ui-bg-hover);
-    --input-fg-hover:        var(--a-fg);
-    --input-affix-fg-hover:  var(--a-fg-subtle);
-    --input-fg-focus:        var(--a-fg-strong);
+    --input-fg-hover:        var(--a-ui-text-hover);
+    --input-affix-fg-hover:  var(--a-ui-text-subtle);
+    --input-fg-focus:        var(--a-ui-text-active);
 
     /* ── State: disabled ── */
     --input-bg-disabled:     var(--a-ui-bg-disabled);

package/components/menu/menu.css

@@ -93,10 +93,10 @@ menu-item-ui[variant="danger"]:hover [slot="icon"] {
     --menu-item-fg:             var(--a-fg-subtle);
     --menu-item-fg-hover:       var(--a-fg);
     --menu-item-bg-hover:       var(--a-bg-muted);
-    --menu-item-fg-disabled:    var(--a-fg-disabled);
+    --menu-item-fg-disabled:    var(--a-ui-text-disabled);
     --menu-item-icon-fg:        var(--a-fg-muted);
     --menu-item-icon-fg-hover:  var(--a-fg);
-    --menu-item-icon-disabled:  var(--a-fg-disabled);
+    --menu-item-icon-disabled:  var(--a-ui-text-disabled);
     --menu-item-danger-fg:      var(--a-danger-bg);
     --menu-item-danger-bg:      var(--a-danger-muted);
 

package/components/nav-group/nav-group.css

@@ -222,7 +222,7 @@ nav-group-ui [slot="popover"] {
 nav-group-ui [slot="popover-label"] {
   padding: var(--a-space-1) var(--a-space-2);
   font-weight: var(--a-weight-medium);
-  color: var(--a-fg-muted);
+  color: var(--nav-group-fg-muted);
   font-size: var(--a-ui-tiny);
   text-transform: uppercase;
   letter-spacing: 0.06em;
@@ -231,7 +231,7 @@ nav-group-ui [slot="popover-label"] {
 nav-group-ui [slot="popover"] [role="option"] {
   padding: var(--a-space-1) var(--a-space-2);
   border-radius: var(--a-radius);
-  color: var(--a-fg-subtle);
+  color: var(--nav-group-fg-muted);
   cursor: pointer;
   white-space: nowrap;
   transition:
@@ -241,7 +241,7 @@ nav-group-ui [slot="popover"] [role="option"] {
 
 nav-group-ui [slot="popover"] [role="option"]:hover {
   background: var(--a-bg-hover);
-  color: var(--a-fg-strong);
+  color: var(--nav-group-fg-hover);
 }
 
 /* Selected / current option — mirrors the main rail's nav-item selection:
@@ -250,7 +250,7 @@ nav-group-ui [slot="popover"] [role="option"][aria-current="page"],
 nav-group-ui [slot="popover"] [role="option"][aria-selected="true"] {
   position: relative;
   background: var(--a-bg-hover);
-  color: var(--a-fg-strong);
+  color: var(--nav-group-fg-selected);
   font-weight: var(--a-weight-medium);
 }
 
@@ -283,7 +283,7 @@ nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"] {
   padding: var(--a-space-3) var(--a-space-2) var(--a-space-1);
   font-size: var(--a-kicker-sm, var(--a-ui-tiny));
   font-weight: var(--a-weight-medium);
-  color: var(--a-fg-muted);
+  color: var(--nav-group-fg-muted);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   cursor: default;
@@ -295,7 +295,7 @@ nav-group-ui[variant="section"] > [slot="header"]:focus-visible,
 nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"]:hover,
 nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"]:focus-visible {
   background: transparent;
-  color: var(--a-fg-muted);
+  color: var(--nav-group-fg-muted);
 }
 
 nav-group-ui[variant="section"] > [slot="header"] [slot="caret"],

package/components/option-card/option-card.css

@@ -101,7 +101,8 @@ option-card-ui[checked] > [slot="icon"] {
     outline: none;
     transition:
       background var(--option-card-duration) var(--option-card-easing),
-      border-color var(--option-card-duration) var(--option-card-easing);
+      border-color var(--option-card-duration) var(--option-card-easing),
+      box-shadow var(--option-card-duration) var(--option-card-easing);
   }
 
   /* When an icon slot is present, insert a third column for it

package/components/otp-input/class.js

@@ -18,7 +18,7 @@
  * Each digit gets its own input — auto-advances on entry,
  * backs up on delete, distributes pasted values.
  *
- * Events: 'complete' (detail: {value}), 'input'
+ * Events: 'complete' (detail: {value}), 'input' (detail: {value}), 'change' (detail: {value})
  */
 
 import { UIFormElement } from '../../core/form.js';
@@ -107,6 +107,7 @@ export class UIOtpInput extends UIFormElement {
 
     this.#syncCombined();
     this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
 
     if (input.value && index < this.#inputs.length - 1) {
       this.#inputs[index + 1].focus();
@@ -121,6 +122,7 @@ export class UIOtpInput extends UIFormElement {
       this.#inputs[index - 1].value = '';
       this.#syncCombined();
       this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
     }
   }
 
@@ -132,6 +134,7 @@ export class UIOtpInput extends UIFormElement {
     }
     this.#syncCombined();
     this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
 
     // Focus last filled or first empty
     const firstEmpty = this.#inputs.findIndex(inp => !inp.value);

package/components/otp-input/otp-input.a2ui.json

@@ -46,6 +46,15 @@
     "category": "input",
     "composes": [],
     "events": {
+      "change": {
+        "description": "Fired alongside `input` on every digit change. Provides form-bearing-primitive event-shape parity (every UIFormElement emits `change` with `detail.value`).",
+        "detail": {
+          "value": {
+            "description": "Combined digits at the moment of the change.",
+            "type": "string"
+          }
+        }
+      },
       "complete": {
         "description": "Fired exactly once when the user fills the last digit slot. detail.value is the combined string.",
         "detail": {

package/components/otp-input/otp-input.d.ts

@@ -11,6 +11,8 @@ export interface OtpInputEventDetail {
   value: string;
 }
 export type OtpInputEvent = CustomEvent<OtpInputEventDetail>;
+export type OtpInputInputEvent = CustomEvent<OtpInputEventDetail>;
+export type OtpInputChangeEvent = CustomEvent<OtpInputEventDetail>;
 
 /**
  * Detail payload for the `complete` event — fired exactly once when the
@@ -32,5 +34,6 @@ export class UIOtpInput extends UIFormElement {
     options?: boolean | AddEventListenerOptions,
   ): void;
   addEventListener(type: 'input', listener: (ev: OtpInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'change', listener: (ev: OtpInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'complete', listener: (ev: OtpInputCompleteEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/otp-input/otp-input.yaml

@@ -36,6 +36,12 @@ events:
       value:
         type: string
         description: Combined digits at the moment of the change.
+  change:
+    description: Fired alongside `input` on every digit change. Provides form-bearing-primitive event-shape parity (every UIFormElement emits `change` with `detail.value`).
+    detail:
+      value:
+        type: string
+        description: Combined digits at the moment of the change.
 slots:
   field:
     description: Container for the digit input boxes and optional separator

package/components/pagination/pagination.css

@@ -70,7 +70,9 @@
     line-height: 1;
     transition:
       background var(--pagination-duration) var(--pagination-easing),
-      color var(--pagination-duration) var(--pagination-easing);
+      border-color var(--pagination-duration) var(--pagination-easing),
+      color var(--pagination-duration) var(--pagination-easing),
+      box-shadow var(--pagination-duration) var(--pagination-easing);
   }
 
   [slot="nav"] button:not([disabled]):hover {

package/components/radio/radio.css

@@ -39,7 +39,7 @@ radio-ui[checked] [slot="dot"]::after {
     --radio-bg-checked-hover: var(--a-primary-hover);
 
     /* ── State: disabled ── */
-    --radio-fg-disabled:      var(--a-fg-muted);
+    --radio-fg-disabled:      var(--a-ui-text-disabled);
 
     /* ── State: focus ── */
     --radio-focus-ring:       var(--a-focus-ring);

package/components/search/class.js

@@ -76,6 +76,7 @@ export class UISearch extends UIFormElement {
     this.value = this.#inputEl.value;
     this.syncValue(this.value);
     this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
 
     clearTimeout(this.#timer);
     this.#timer = setTimeout(() => {
@@ -106,6 +107,7 @@ export class UISearch extends UIFormElement {
     this.syncValue('');
     this.setAttribute('value', '');
     this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
     this.dispatchEvent(new CustomEvent('search', {
       bubbles: true,
       detail: { value: '' },

package/components/search/search.a2ui.json

@@ -56,6 +56,15 @@
     "category": "input",
     "composes": [],
     "events": {
+      "change": {
+        "description": "Fired alongside `input` on every keystroke + on clear. Provides form-bearing-primitive event-shape parity (every UIFormElement emits `change` with `detail.value`).",
+        "detail": {
+          "value": {
+            "description": "Current search-input value.",
+            "type": "string"
+          }
+        }
+      },
       "clear": {
         "description": "Fired when the clear button is clicked"
       },

package/components/search/search.d.ts

@@ -10,6 +10,7 @@ export interface SearchInputEventDetail {
   value: string;
 }
 export type SearchInputEvent = CustomEvent<SearchInputEventDetail>;
+export type SearchChangeEvent = CustomEvent<SearchInputEventDetail>;
 
 export interface SearchEventDetail {
   value: string;
@@ -31,5 +32,6 @@ export class UISearch extends UIFormElement {
     options?: boolean | AddEventListenerOptions,
   ): void;
   addEventListener(type: 'input', listener: (ev: SearchInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'change', listener: (ev: SearchInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'search', listener: (ev: SearchEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/search/search.yaml

@@ -39,6 +39,12 @@ events:
     description: Fired when the clear button is clicked
   input:
     description: "Fired on each input change during typing."
+  change:
+    description: Fired alongside `input` on every keystroke + on clear. Provides form-bearing-primitive event-shape parity (every UIFormElement emits `change` with `detail.value`).
+    detail:
+      value:
+        type: string
+        description: Current search-input value.
   search:
     description: Debounced CustomEvent with detail.query containing the search string
 slots:

package/components/segment/segment.css

@@ -20,10 +20,10 @@ segment-ui[selected] {
     --segment-font-weight:     var(--a-ui-weight);
 
     /* ── Colors ── */
-    --segment-fg:              var(--a-fg-subtle);
-    --segment-fg-hover:        var(--a-fg);
+    --segment-fg:              var(--a-ui-text-subtle);
+    --segment-fg-hover:        var(--a-ui-text-hover);
     --segment-fg-selected:     var(--a-chrome-dark);
-    --segment-fg-disabled:     var(--a-fg-muted);
+    --segment-fg-disabled:     var(--a-ui-text-disabled);
 
     /* ── Transition ── */
     --segment-duration:        var(--a-duration-fast);

package/components/select/select.css

@@ -24,6 +24,7 @@
     --select-placeholder-fg:    var(--a-ui-text-placeholder);
     --select-caret-fg:          var(--a-ui-text-muted);
     --select-fg:                var(--a-ui-text);
+    --select-fg-hover:          var(--a-ui-text-hover);
     --select-fg-selected:       var(--a-ui-text-selected);
     --select-fg-subtle:         var(--a-ui-text-subtle);
     --select-fg-muted:          var(--a-ui-text-muted);
@@ -38,7 +39,7 @@
     --select-option-px:         var(--a-ui-px);
     --select-option-py:         var(--a-ui-py);
     --select-option-bg-hover:   var(--a-bg-hover);
-    --select-option-fg-active:  var(--a-fg);
+    --select-option-fg-active:  var(--a-ui-text-active);
     --select-option-fg-disabled: var(--a-ui-text-disabled);
     --select-group-label-size:  var(--a-ui-size);
   }
@@ -223,7 +224,7 @@ select-ui [role="option"] {
   padding: var(--a-space-1) var(--a-ui-px);
   border-radius: var(--a-radius-sm);
   white-space: nowrap;
-  color: var(--a-fg-subtle);
+  color: var(--select-fg-subtle);
   cursor: pointer;
   transition:
     background var(--a-duration-fast) var(--a-easing),
@@ -231,8 +232,8 @@ select-ui [role="option"] {
 }
 select-ui [role="option"]:hover,
 select-ui [role="option"][data-focused] {
-  background: var(--a-bg-hover);
-  color: var(--a-fg-hover);
+  background: var(--select-option-bg-hover);
+  color: var(--select-fg-hover);
 }
 select-ui [role="option"][aria-selected="true"] {
   color: var(--select-fg-selected);
@@ -240,7 +241,7 @@ select-ui [role="option"][aria-selected="true"] {
   font-weight: var(--a-ui-weight);
 }
 select-ui [role="option"][aria-disabled="true"] {
-  color: var(--a-fg-muted);
+  color: var(--select-option-fg-disabled);
   cursor: not-allowed;
 }
 select-ui [role="option"][aria-disabled="true"]:hover {
@@ -250,7 +251,7 @@ select-ui [role="option"][aria-disabled="true"]:hover {
 /* Option with icon */
 select-ui [role="option"] icon-ui {
   --a-icon-size: var(--a-ui-size);
-  color: var(--a-fg-muted);
+  color: var(--select-fg-muted);
   margin-inline-end: var(--a-space-1);
   vertical-align: -0.125em;
 }
@@ -282,21 +283,21 @@ select-ui [data-menu-header] img {
 select-ui [data-menu-header] strong {
   display: block;
   font-weight: var(--a-weight-medium);
-  color: var(--a-fg);
+  color: var(--select-fg);
   font-size: var(--a-ui-size);
 }
 
 select-ui [data-menu-header] span {
   display: block;
   font-size: var(--a-ui-sm);
-  color: var(--a-fg-muted);
+  color: var(--select-fg-muted);
 }
 
 select-ui [role="group"] [slot="group-label"] {
   padding: var(--a-space-1) var(--a-ui-px);
   font-size: var(--a-ui-tiny);
   font-weight: var(--a-ui-weight);
-  color: var(--a-fg-muted);
+  color: var(--select-fg-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   white-space: nowrap;

package/components/switch/switch.css

@@ -59,7 +59,7 @@ switch-ui[checked] [slot="thumb"] {
     --switch-thumb-travel:         calc(var(--switch-track-width) - var(--switch-thumb-size) - 2 * var(--switch-thumb-inset) - 2px);
 
     /* ── State: disabled ── */
-    --switch-fg-disabled:          var(--a-fg-muted);
+    --switch-fg-disabled:          var(--a-ui-text-disabled);
   }
 
   :scope {

package/components/tabs/tabs.css

@@ -13,7 +13,7 @@
     --tabs-fg:              var(--a-fg-subtle);
     --tabs-fg-hover:        var(--a-fg);
     --tabs-fg-active:       var(--a-fg-selected);
-    --tabs-fg-disabled:     var(--a-fg-muted);
+    --tabs-fg-disabled:     var(--a-ui-text-disabled);
 
     /* ── Spacing ── */
     --tabs-vertical-gap:    var(--a-space-4);

package/components/textarea/textarea.css

@@ -32,7 +32,7 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
 
     /* ── State ── */
     --textarea-bg-hover:        var(--a-ui-bg-hover);
-    --textarea-fg-hover:        var(--a-fg);
+    --textarea-fg-hover:        var(--a-ui-text-hover);
     --textarea-label-fg-focus:  var(--a-fg-subtle);
     --textarea-bg-disabled:     var(--a-ui-bg-disabled);
     --textarea-fg-disabled:     var(--a-ui-text-disabled);
@@ -73,7 +73,11 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
     overflow-y: auto;
     cursor: text;
     outline: none;
-    transition: border-color var(--textarea-duration) var(--textarea-easing);
+    transition:
+      background   var(--textarea-duration) var(--textarea-easing),
+      border-color var(--textarea-duration) var(--textarea-easing),
+      color        var(--textarea-duration) var(--textarea-easing),
+      box-shadow   var(--textarea-duration) var(--textarea-easing);
   }
   /* hover rule moved outside @scope — see Safari 17.x bug note at top. */
   :scope:not([disabled]) [slot="text"]:focus {

package/components/upload/upload.css

@@ -64,7 +64,8 @@
     transition:
       border-color var(--upload-duration) var(--upload-easing),
       background var(--upload-duration) var(--upload-easing),
-      color var(--upload-duration) var(--upload-easing);
+      color var(--upload-duration) var(--upload-easing),
+      box-shadow var(--upload-duration) var(--upload-easing);
   }
   [data-dropzone]:hover {
     border-color: var(--upload-border-hover);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.5.13",
+  "version": "0.5.14",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",

package/styles/typography.css

@@ -584,7 +584,7 @@
 
 /* ── Mark — system highlight tokens ── */
 :where(mark) {
-  background: var(--a-highlight-default);
+  background: var(--a-highlight);
   color: var(--a-highlight-text);
   padding-inline: 0.125em;
   border-radius: 0.125em;