@adia-ai/web-components 0.0.18 → 0.0.20

package/components/button/button.css

@@ -114,10 +114,27 @@
     --button-border: var(--button-border-ghost);
   }
 
-  :scope[variant="danger"] {
+  /* ── Color (semantic axis) ──
+     `[color]` carries semantic intent; `variant` carries visual style.
+     Together they compose: `<button-ui variant="solid" color="danger">`
+     vs `<button-ui variant="outline" color="danger">`.
+     `variant="danger"` is a deprecated alias migrated to color via JS. */
+  :scope[color="danger"] {
     --button-bg: var(--button-bg-danger);
     --button-fg: var(--button-fg-danger);
   }
+  :scope[color="success"] {
+    --button-bg: var(--a-success-strong);
+    --button-fg: var(--a-success-fg);
+  }
+  :scope[color="info"] {
+    --button-bg: var(--a-info-strong);
+    --button-fg: var(--a-info-fg);
+  }
+  :scope[color="warning"] {
+    --button-bg: var(--a-warning-strong);
+    --button-fg: var(--a-warning-fg);
+  }
 
   /* ── Hover (after variants so it wins on specificity via :hover) ── */
   :scope:not([disabled]):hover,
@@ -138,7 +155,7 @@
     --button-border: var(--button-border-hover);
   }
 
-  :scope[variant="danger"]:not([disabled]):hover {
+  :scope[color="danger"]:not([disabled]):hover {
     --button-bg: var(--button-bg-hover);
     --button-fg: var(--button-fg-hover);
     --button-border: var(--button-border-hover);

package/components/button/button.js

@@ -5,6 +5,7 @@ class AdiaButton extends AdiaElement {
   static properties = {
     text:     { type: String,  default: '', reflect: true },
     variant:  { type: String,  default: 'solid', reflect: true },
+    color:    { type: String,  default: '', reflect: true },
     size:     { type: String,  default: 'md', reflect: true },
     disabled: { type: Boolean, default: false, reflect: true },
     stretch:  { type: Boolean, default: false, reflect: true },

package/components/button/button.yaml

@@ -41,7 +41,11 @@ props:
     type: string
     default: ""
   variant:
-    description: Visual style variant. `default` is the base style; `link` renders the button as underlined text for inline actions.
+    description: >-
+      Visual style — `solid` (default fill), `outline`, `ghost`, `link`.
+      `default` / `primary` are aliases of `solid`. Style is independent
+      of semantic intent — to express destructive / success / info /
+      warning intent, set [color="…"] alongside.
     type: string
     default: solid
     enum:
@@ -49,12 +53,26 @@ props:
       - solid
       - outline
       - ghost
-      - danger
       - primary
       - secondary
       - soft
       - current
       - link
+  color:
+    description: >-
+      Semantic intent — composes with [variant]. `<button-ui variant="solid" color="danger">`
+      = filled destructive action; `<button-ui variant="outline" color="success">`
+      = outlined success affordance.
+    type: string
+    default: ""
+    enum:
+      - default
+      - accent
+      - info
+      - success
+      - warning
+      - danger
+    reflect: true
 events:
   press:
     description: Fired on complete press (pointer up or Enter/Space)

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

@@ -72,6 +72,7 @@
     --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);
+    --calendar-picker-day-grid-gap:           var(--a-space-px); /* 1px hairline between cells */
     --calendar-picker-day-focus-ring:         var(--a-focus-ring);
 
     /* Transitions */
@@ -244,7 +245,7 @@ calendar-picker-ui [data-cal-weekdays] span {
 calendar-picker-ui [data-cal-grid] {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: 1px;
+  gap: var(--calendar-picker-day-grid-gap);
 }
 
 /* Day buttons */

package/components/calendar-picker/calendar-picker.js

@@ -59,6 +59,7 @@ class AdiaCalendarPicker extends AdiaFormElement {
   #viewMonth = new Date().getMonth();
   #focusedDay = null;
   #popoverClickBound = false;
+  #openRaf = null;
 
   #onPopoverClick = (e) => {
     const target = e.target instanceof Element ? e.target : null;
@@ -121,12 +122,18 @@ class AdiaCalendarPicker extends AdiaFormElement {
       this.#anchorCleanup = anchorPopover(this.#trigger, this.#popover, {
         placement: 'bottom-start', gap: 4,
       });
-      requestAnimationFrame(() => {
+      this.#openRaf = requestAnimationFrame(() => {
+        this.#openRaf = null;
+        if (!this.isConnected || !this.open) return;
         document.addEventListener('pointerdown', this.#onOutside, { once: true });
       });
     } else {
       this.#anchorCleanup?.();
       this.#anchorCleanup = null;
+      if (this.#openRaf != null) {
+        cancelAnimationFrame(this.#openRaf);
+        this.#openRaf = null;
+      }
       this.#popover?.hidePopover?.();
       document.removeEventListener('pointerdown', this.#onOutside);
     }
@@ -311,6 +318,10 @@ class AdiaCalendarPicker extends AdiaFormElement {
 
   disconnected() {
     super.disconnected();
+    if (this.#openRaf != null) {
+      cancelAnimationFrame(this.#openRaf);
+      this.#openRaf = null;
+    }
     this.removeEventListener('click', this.#onClick);
     this.removeEventListener('keydown', this.#onKey);
     document.removeEventListener('pointerdown', this.#onOutside);

package/components/chart/chart.css

@@ -630,24 +630,24 @@
   /* ═══════ Color variants ═══════ */
 
   :scope[color="success"] {
-    --chart-bar:      var(--a-success);
+    --chart-bar:      var(--a-success-strong);
     --chart-bar-hover: var(--a-success-bg-hover);
-    --chart-line:     var(--a-success);
-    --chart-dot:      var(--a-success);
+    --chart-line:     var(--a-success-strong);
+    --chart-dot:      var(--a-success-strong);
   }
 
   :scope[color="warning"] {
-    --chart-bar:      var(--a-warning);
+    --chart-bar:      var(--a-warning-strong);
     --chart-bar-hover: var(--a-warning-bg-hover);
-    --chart-line:     var(--a-warning);
-    --chart-dot:      var(--a-warning);
+    --chart-line:     var(--a-warning-strong);
+    --chart-dot:      var(--a-warning-strong);
   }
 
   :scope[color="danger"] {
-    --chart-bar:      var(--a-danger);
+    --chart-bar:      var(--a-danger-strong);
     --chart-bar-hover: var(--a-danger-bg-hover);
-    --chart-line:     var(--a-danger);
-    --chart-dot:      var(--a-danger);
+    --chart-line:     var(--a-danger-strong);
+    --chart-dot:      var(--a-danger-strong);
   }
 
   :scope[color="info"] {
@@ -682,8 +682,8 @@
    ───────────────────────────────────────────────────────────────── */
 
 .chart-tooltip-popup {
-  --chart-tooltip-bg:       var(--a-neutral-2-shade);
-  --chart-tooltip-fg:       var(--a-neutral-2-tint);
+  --chart-tooltip-bg:       var(--a-fg);
+  --chart-tooltip-fg:       var(--a-bg);
   --chart-tooltip-px:       var(--a-space-2-5);
   --chart-tooltip-py:       var(--a-space-1-5);
   --chart-tooltip-radius:   var(--a-radius-sm);

package/components/chart/chart.js

@@ -196,9 +196,9 @@ class AdiaChart extends AdiaElement {
     hideValues:  { type: Boolean, default: false,    reflect: true, attribute: 'hide-values' },
     radius:      { type: Number,  default: null,     reflect: true },
     smooth:      { type: Number,  default: 0.4,      reflect: true },
-    aspect:      { type: String,  default: 'std',    reflect: true },  // std | wide | square | tall (deprecated — OD-CHART-02)
-    size:        { type: String,  default: '',       reflect: true },  // sm | md | lg
-    format:      { type: String,  default: 'abbr',   reflect: true },  // abbr | decimal | currency | percent (OD-CHART-03)
+    aspect:      { type: String,  default: 'std',    reflect: true },
+    size:        { type: String,  default: '',       reflect: true },
+    format:      { type: String,  default: 'abbr',   reflect: true },
   };
 
   static template = () => null;
@@ -263,10 +263,11 @@ class AdiaChart extends AdiaElement {
     if (!this.hasAttribute('role'))       this.setAttribute('role', 'img');
     if (!this.hasAttribute('aria-label')) this.setAttribute('aria-label', this.heading || `${this.type} chart`);
 
-    /* Phase 1b — listen for legend-toggle events from external
-       chart-legend-ui[for=self] and hide the matching series. Events
-       bubble so document-level listening catches descendant legends. */
-    document.addEventListener('legend-toggle', this.#onLegendToggle);
+    /* Listen for canonical `toggle` events bubbled from external
+       chart-legend-ui[for=self] descendants. The handler filters by
+       target so other components dispatching `toggle` (accordion-ui,
+       agent-trace-ui, etc.) don't interfere. */
+    document.addEventListener('toggle', this.#onLegendToggle);
 
     /* OD-CHART-06 — keyboard a11y. Chart becomes focusable; arrow keys
        move a virtual focus across datums in DOM order, Enter/Space fires
@@ -279,6 +280,14 @@ class AdiaChart extends AdiaElement {
     this.addEventListener('keydown', this.#onKeydown);
     this.addEventListener('focus',   this.#onFocus);
     this.addEventListener('blur',    this.#onBlur);
+    /* Pointer/click handlers attached to the host (not per-render SVG) so
+       render() stays listener-graph-idempotent. Handlers use
+       e.target.closest('[data-tip-*]') so they only fire on real datums. */
+    this.addEventListener('pointerover',  this.#onPointerOver);
+    this.addEventListener('pointermove',  this.#onPointerMove);
+    this.addEventListener('pointerleave', this.#onPointerLeave);
+    this.addEventListener('pointerdown',  this.#onPointerDown);
+    this.addEventListener('click',        this.#onClick);
     this.#warnDeprecatedAttrs();
 
     this.#resizeObs = new ResizeObserver((entries) => {
@@ -443,16 +452,10 @@ class AdiaChart extends AdiaElement {
     /* Notify external legend/tooltip consumers that legendData has refreshed. */
     this.dispatchEvent(new CustomEvent('legend-update', { bubbles: true }));
 
-    /* Wire hover tooltip + custom events. Internal tooltip (#tipEl) remains
-       for back-compat; Phase 2 retires it when tooltip-ui[follows=pointer]
-       lands. Custom events are additive — fire regardless of tooltip state.
-       OD-CHART-07: pointerdown handles touch (tap-to-pin); pointerover /
-       move still handle mouse + pen (`pointerType` gating inside each). */
-    svgEl.addEventListener('pointerover',  this.#onPointerOver);
-    svgEl.addEventListener('pointermove',  this.#onPointerMove);
-    svgEl.addEventListener('pointerleave', this.#onPointerLeave);
-    svgEl.addEventListener('pointerdown',  this.#onPointerDown);
-    svgEl.addEventListener('click',        this.#onClick);
+    /* Hover tooltip + custom events are wired in connected() — host-level
+       so they survive the innerHTML wipe at render. Internal tooltip
+       (#tipEl) remains for back-compat; Phase 2 retires it when
+       tooltip-ui[follows=pointer] lands. */
   }
 
   /* ── Per-series --color-{key} injection ──
@@ -491,11 +494,16 @@ class AdiaChart extends AdiaElement {
     this.#resizeObs?.disconnect();
     this.#resizeObs = null;
     if (this.#resizeRaf) { cancelAnimationFrame(this.#resizeRaf); this.#resizeRaf = null; }
-    document.removeEventListener('legend-toggle', this.#onLegendToggle);
+    document.removeEventListener('toggle', this.#onLegendToggle);
     document.removeEventListener('pointerdown',   this.#pinnedTouchDismiss);
     this.removeEventListener('keydown', this.#onKeydown);
     this.removeEventListener('focus',   this.#onFocus);
     this.removeEventListener('blur',    this.#onBlur);
+    this.removeEventListener('pointerover',  this.#onPointerOver);
+    this.removeEventListener('pointermove',  this.#onPointerMove);
+    this.removeEventListener('pointerleave', this.#onPointerLeave);
+    this.removeEventListener('pointerdown',  this.#onPointerDown);
+    this.removeEventListener('click',        this.#onClick);
     this.#hideTooltip();
   }
 

package/components/chart-legend/chart-legend.a2ui.json

@@ -27,7 +27,7 @@
       "default": ""
     },
     "onToggle": {
-      "description": "Series-toggle mode emitted via legend-toggle event. `hide` removes the series from the render; `opacity` fades it. Wired via [for] on chart-ui.",
+      "description": "Series-toggle mode emitted via the `toggle` event. `hide` removes the series from the render; `opacity` fades it. Wired via [for] on chart-ui.",
       "type": "string",
       "enum": [
         "hide",
@@ -71,7 +71,7 @@
     "anti_patterns": [],
     "category": "agent",
     "events": {
-      "legend-toggle": {
+      "toggle": {
         "description": "Fires on row click (non-static). Detail: {key, active, mode}. `active` is the new state (true=visible). Consumers (or chart-ui via [for]) wire this to series visibility."
       }
     },

package/components/chart-legend/chart-legend.js

@@ -36,6 +36,9 @@ import { AdiaElement } from '../../core/element.js';
 class AdiaChartLegend extends AdiaElement {
   static properties = {
     for:      { type: String,  default: '',       reflect: true },
+    // Items is a JSON-encoded array; reflecting to the attribute would
+    // serialize a potentially long array on every change. The property is
+    // the source of truth; the attribute is intentionally write-only.
     items:    { type: String,  default: '',       reflect: false },
     shape:    { type: String,  default: 'dot',    reflect: true },
     position: { type: String,  default: 'bottom', reflect: true },
@@ -173,7 +176,7 @@ class AdiaChartLegend extends AdiaElement {
     if (newActive) row.setAttribute('data-active', '');
     else row.removeAttribute('data-active');
 
-    this.dispatchEvent(new CustomEvent('legend-toggle', {
+    this.dispatchEvent(new CustomEvent('toggle', {
       bubbles: true,
       detail: { key, active: newActive, mode: this.onToggle || 'hide' },
     }));

package/components/chart-legend/chart-legend.yaml

@@ -48,7 +48,7 @@ props:
     reflect: true
   onToggle:
     description: >-
-      Series-toggle mode emitted via legend-toggle event. `hide` removes the
+      Series-toggle mode emitted via the `toggle` event. `hide` removes the
       series from the render; `opacity` fades it. Wired via [for] on chart-ui.
     type: string
     default: hide
@@ -58,7 +58,7 @@ props:
     reflect: true
     attribute: on-toggle
 events:
-  legend-toggle:
+  toggle:
     description: >-
       Fires on row click (non-static). Detail: {key, active, mode}. `active` is
       the new state (true=visible). Consumers (or chart-ui via [for]) wire

package/components/chat/chat-input.js

@@ -24,7 +24,7 @@ import { AdiaElement } from '../../core/element.js';
  *   model        — currently selected model value (reflected, two-way with select)
  *   placeholder  — textarea placeholder
  *   disabled     — disable entire input (textarea becomes contenteditable=false)
- *   busy         — in-flight / streaming state: send button disabled, submit
+ *   loading      — in-flight / streaming state: send button disabled, submit
  *                  events suppressed, but textarea stays editable so the user
  *                  can draft a follow-up while the model is still responding.
  *
@@ -40,7 +40,7 @@ import { AdiaElement } from '../../core/element.js';
 class AdiaChatInput extends AdiaElement {
   static properties = {
     disabled:    { type: Boolean, default: false, reflect: true },
-    busy:        { type: Boolean, default: false, reflect: true },
+    loading:     { type: Boolean, default: false, reflect: true },
     placeholder: { type: String,  default: 'Type a message...', reflect: true },
     model:       { type: String,  default: '', reflect: true },
   };
@@ -56,6 +56,7 @@ class AdiaChatInput extends AdiaElement {
   #attachments = []; // [{ type: 'image', dataUrl, name }]
   #previewEl = null;
   #fileInput = null;
+  #focusRaf = null;
 
   #onAttachPress = () => this.#fileInput?.click();
   #onFileInputChange = () => {
@@ -154,7 +155,7 @@ class AdiaChatInput extends AdiaElement {
       this.#textareaEl.placeholder = this.placeholder;
     }
     if (this.#sendEl) {
-      this.#sendEl.disabled = this.disabled || this.busy;
+      this.#sendEl.disabled = this.disabled || this.loading;
     }
     // Sync model value to select (handles late upgrades)
     if (this.#modelEl && this.model && this.#modelEl.value !== this.model) {
@@ -164,7 +165,10 @@ class AdiaChatInput extends AdiaElement {
 
   #onPointerDown = (e) => {
     if (e.target.closest('button-ui, select-ui, input-ui, a')) return;
-    requestAnimationFrame(() => this.#textareaEl?.focus());
+    this.#focusRaf = requestAnimationFrame(() => {
+      this.#focusRaf = null;
+      this.#textareaEl?.focus();
+    });
   };
 
   #onModelChange = () => {
@@ -172,7 +176,7 @@ class AdiaChatInput extends AdiaElement {
   };
 
   #onSubmit = () => {
-    if (this.disabled || this.busy) return;
+    if (this.disabled || this.loading) return;
     const text = this.value;
     if (!text && !this.#attachments.length) return;
     this.dispatchEvent(new CustomEvent('submit', {
@@ -240,6 +244,10 @@ class AdiaChatInput extends AdiaElement {
   }
 
   disconnected() {
+    if (this.#focusRaf != null) {
+      cancelAnimationFrame(this.#focusRaf);
+      this.#focusRaf = null;
+    }
     this.removeEventListener('paste', this.#onPaste);
     this.#sendEl?.removeEventListener('press', this.#onSubmit);
     this.#textareaEl?.removeEventListener('submit', this.#onSubmit);

package/components/chat/chat.a2ui.json

@@ -30,8 +30,8 @@
     "anti_patterns": [],
     "category": "agent",
     "events": {
-      "chat-submit": {
-        "description": "Fired on chat-submit."
+      "submit": {
+        "description": "Fired when the user submits a chat message via Enter or send button. Detail: { text, model }."
       }
     },
     "examples": [

package/components/chat/chat.js

@@ -32,7 +32,7 @@ function escapeHTML(s) {
  *   chat.messages                   // read all messages
  *
  * Events:
- *   chat-submit  — user pressed send (detail: { text, model })
+ *   submit       — user pressed send (detail: { text, model })
  */
 class AdiaChat extends AdiaElement {
   static properties = {
@@ -44,6 +44,7 @@ class AdiaChat extends AdiaElement {
   #messages = [];
   #messagesEl = null;
   #inputEl = null;
+  #scrollRaf = null;
 
   get messages() { return [...this.#messages]; }
 
@@ -69,6 +70,10 @@ class AdiaChat extends AdiaElement {
   }
 
   disconnected() {
+    if (this.#scrollRaf != null) {
+      cancelAnimationFrame(this.#scrollRaf);
+      this.#scrollRaf = null;
+    }
     this.#inputEl?.removeEventListener('submit', this.#onSubmit);
     this.#messagesEl = null;
     this.#inputEl = null;
@@ -79,7 +84,7 @@ class AdiaChat extends AdiaElement {
     const { text, model } = e.detail || {};
     if (!text) return;
     this.#inputEl.clear();
-    this.dispatchEvent(new CustomEvent('chat-submit', { bubbles: true, detail: { text, model } }));
+    this.dispatchEvent(new CustomEvent('submit', { bubbles: true, detail: { text, model } }));
   };
 
   appendMessage({ role, content = '', render = false }) {
@@ -147,7 +152,13 @@ class AdiaChat extends AdiaElement {
 
   #scrollToBottom() {
     const el = this.#messagesEl;
-    if (el) requestAnimationFrame(() => { el.scrollTop = el.scrollHeight; });
+    if (!el) return;
+    if (this.#scrollRaf != null) cancelAnimationFrame(this.#scrollRaf);
+    this.#scrollRaf = requestAnimationFrame(() => {
+      this.#scrollRaf = null;
+      if (!this.isConnected) return;
+      el.scrollTop = el.scrollHeight;
+    });
   }
 }
 customElements.define('chat-ui', AdiaChat);

package/components/chat/chat.yaml

@@ -13,8 +13,8 @@ props:
     type: boolean
     default: false
 events:
-  chat-submit:
-    description: "Fired on chat-submit."
+  submit:
+    description: "Fired when the user submits a chat message via Enter or send button. Detail: { text, model }."
 slots:
   default:
     description: "Default slot — primary child content."

package/components/code/code.css

@@ -6,6 +6,8 @@
     --code-radius:      var(--a-radius-md);
     --code-radius-sm:   var(--a-radius-sm);
     --code-copy-px:     var(--a-space-1);
+    --code-copy-py:     var(--a-space-0-5);
+    --code-lint-marker-w: 3px; /* Vertical lint-marker rule; intrinsic measurement; no --a-space-* equivalent at this width. */
 
     /* ── Colors ── */
     --code-bg:          var(--a-bg);
@@ -31,9 +33,12 @@
        DOM. See docs/specs/code-editor.md §6. */
     --code-gutter-bg:        var(--a-bg-subtle);
     --code-gutter-fg:        var(--a-fg-muted);
-    --code-active-line-bg:   color-mix(in oklch, var(--a-accent-muted) 40%, transparent);
-    --code-selection-bg:     color-mix(in oklch, var(--a-accent-muted) 60%, transparent);
-    --code-selection-match:  color-mix(in oklch, var(--a-accent-muted) 30%, transparent);
+    /* Transparency-mixing in oklab — Safari < 18 has an OKLCH bug where
+       the transparent operand's hue resolves to 0, red-shifting the mix.
+       oklab is hue-agnostic and visually identical in fixed engines. */
+    --code-active-line-bg:   color-mix(in oklab, var(--a-accent-muted) 40%, transparent);
+    --code-selection-bg:     color-mix(in oklab, var(--a-accent-muted) 60%, transparent);
+    --code-selection-match:  color-mix(in oklab, var(--a-accent-muted) 30%, transparent);
     --code-cursor:           var(--a-accent-strong);
     --code-focus-ring:       var(--a-focus-ring);
 
@@ -110,7 +115,7 @@
     cursor: pointer;
     font-size: var(--code-header-font);
     color: var(--code-header-fg);
-    padding: 2px var(--code-copy-px);
+    padding: var(--code-copy-py) var(--code-copy-px);
     border-radius: var(--code-radius-sm);
     transition:
       background var(--code-duration) var(--code-easing),
@@ -258,7 +263,12 @@
   :scope .cm-scroller {
     font-family: inherit;
     line-height: inherit;
-    padding: var(--code-py) var(--code-px);
+    /* No padding — the gutter band ([data-cm-mount] > .cm-gutters has its
+       own --code-gutter-bg) reads as the chrome it is when pinned to the
+       left edge, and the active-line highlight and selection block get
+       full bleed. The header / footer bands frame the editor; this content
+       region should not double-inset. */
+    padding: 0;
   }
 
   :scope .cm-content {
@@ -347,7 +357,7 @@
   }
   :scope .cm-diagnostic {
     padding: 0;
-    border-inline-start: 3px solid transparent;
+    border-inline-start: var(--code-lint-marker-w) solid transparent;
     padding-inline-start: var(--a-space-2);
   }
   :scope .cm-diagnostic-error   { border-inline-start-color: var(--code-lint-error); }

package/components/command/command.js

@@ -32,6 +32,7 @@ class AdiaCommand extends AdiaElement {
   #activeIdx = -1;
   #inputEl = null;
   #listEl = null;
+  #focusRaf = null;
   #footerEl = null;
   #bound = false;
   #itemByEl = new WeakMap();
@@ -88,7 +89,10 @@ class AdiaCommand extends AdiaElement {
     }
 
     if (this.open) {
-      requestAnimationFrame(() => this.#inputEl?.focus());
+      this.#focusRaf = requestAnimationFrame(() => {
+        this.#focusRaf = null;
+        this.#inputEl?.focus();
+      });
     }
   }
 
@@ -280,6 +284,10 @@ class AdiaCommand extends AdiaElement {
   };
 
   disconnected() {
+    if (this.#focusRaf != null) {
+      cancelAnimationFrame(this.#focusRaf);
+      this.#focusRaf = null;
+    }
     this.removeEventListener('keydown', this.#onKeydown);
     this.#inputEl?.removeEventListener('input', this.#onInput);
     this.#listEl?.removeEventListener('click', this.#onListClick);

package/components/field/field.a2ui.json

@@ -21,11 +21,6 @@
     "component": {
       "const": "Field"
     },
-    "error": {
-      "description": "Validation error message rendered below the control in danger style. Takes precedence over `hint` in the same row, and carries role=\"alert\" so screen readers announce changes.",
-      "type": "string",
-      "default": ""
-    },
     "hint": {
       "description": "Help text rendered below the control in caption style. Wired into the slotted control's aria-describedby so screen readers announce it. Suppressed when `error` is set.",
       "type": "string",

package/components/field/field.css

@@ -5,12 +5,12 @@
     --field-label-color:     var(--a-fg);
     --field-label-size:      var(--a-ui-sm);
     --field-label-weight:    var(--a-weight-medium);
-    --field-required-color:  var(--a-danger);
+    --field-required-color:  var(--a-danger-strong);
     --field-trailing-color:  var(--a-fg-subtle);
     --field-trailing-size:   var(--a-ui-sm);
     --field-hint-color:      var(--a-fg-muted);
     --field-hint-size:       var(--a-ui-sm);
-    --field-error-color:     var(--a-danger);
+    --field-error-color:     var(--a-danger-strong);
     --field-error-size:      var(--a-ui-sm);
 
     /* In inline mode, the label column auto-sizes by default (each