@adia-ai/web-components 0.0.18 → 0.0.20

package/components/pipeline-status/pipeline-status.css

@@ -35,7 +35,7 @@
 
     --pipeline-status-dot-bg:          var(--a-border);
     --pipeline-status-dot-bg-active:   var(--a-accent);
-    --pipeline-status-dot-bg-complete: var(--a-success);
+    --pipeline-status-dot-bg-complete: var(--a-success-strong);
 
     --pipeline-status-history-border:  var(--a-border-subtle);
     --pipeline-status-border-thin:     1px;
@@ -48,8 +48,8 @@
     --pipeline-status-pulse-easing:    ease-in-out;
 
     /* Variant targets */
-    --pipeline-status-complete-fg:     var(--a-success);
-    --pipeline-status-complete-border: var(--a-success);
+    --pipeline-status-complete-fg:     var(--a-success-strong);
+    --pipeline-status-complete-border: var(--a-success-strong);
   }
 
   /* ─────────────────────────────────────────────
@@ -110,7 +110,7 @@
   }
 
   /* Complete state — override tokens only */
-  :scope[complete] {
+  :scope[status="completed"] {
     --pipeline-status-label-fg:       var(--pipeline-status-complete-fg);
     --pipeline-status-history-border: var(--pipeline-status-complete-border);
   }

package/components/pipeline-status/pipeline-status.js

@@ -23,9 +23,11 @@ const STAGE_LABELS = {
 
 class AdiaPipelineStatus extends AdiaElement {
   static properties = {
-    stage: { type: String, default: '', reflect: true },
+    stage:   { type: String, default: '', reflect: true },
     message: { type: String, default: '', reflect: true },
-    complete: { type: Boolean, default: false, reflect: true },
+    // `status` is the canonical stage-progress shape (matches timeline-item-ui,
+    // stepper-item-ui, agent-reasoning-ui).
+    status:  { type: String, default: 'idle', reflect: true },
   };
 
   static template = () => null;
@@ -95,7 +97,7 @@ class AdiaPipelineStatus extends AdiaElement {
   #update() {
     const { stage, message } = this;
 
-    if (this.complete) {
+    if (this.status === 'completed') {
       // Move current to history if not already
       if (this.#prevStage && this.#prevStage !== this.#history[this.#history.length - 1]?.stage) {
         this.#pushHistory(this.#prevStage, this.#prevMessage);
@@ -153,7 +155,7 @@ class AdiaPipelineStatus extends AdiaElement {
     }
 
     // Auto-close when complete
-    if (this.complete) {
+    if (this.status === 'completed') {
       this.#detailsEl.removeAttribute('open');
     }
   }

package/components/popover/popover.js

@@ -80,6 +80,10 @@ class AdiaPopover extends AdiaElement {
     if (!trigger || !content) return;
 
     if (!content.matches(':popover-open')) {
+      // try/catch covers test envs (happy-dom) without the API. Known iOS
+      // Safari quirks at the supported floor (light-dismiss broken on
+      // 17.0–18.2, virtual-keyboard-on-input persists past 18.3) are
+      // documented in docs/BROWSER-COMPAT.md §3a.
       try { content.showPopover(); } catch { /* popover API unavailable — anchor positioning still runs */ }
     }
 

package/components/progress-row/progress-row.a2ui.json

@@ -35,11 +35,12 @@
       "description": "Color variant for the progress fill",
       "type": "string",
       "enum": [
+        "default",
+        "accent",
         "success",
         "warning",
         "danger",
-        "info",
-        "primary"
+        "info"
       ],
       "default": "default"
     }

package/components/progress-row/progress-row.yaml

@@ -26,11 +26,12 @@ props:
     type: string
     default: default
     enum:
+      - default
+      - accent
       - success
       - warning
       - danger
       - info
-      - primary
 events: {}
 slots:
   label:

package/components/range/range.js

@@ -14,6 +14,13 @@
 import { AdiaFormElement } from '../../core/form.js';
 
 class AdiaRange extends AdiaFormElement {
+  // Opt out of AdiaFormElement's per-control `label` deprecation warning.
+  // range-ui's `label` is a first-class API: it renders as the in-track
+  // caption next to the value (the entire field is the scrubber surface)
+  // and the host gets `aria-label` wired from it for proper screen-reader
+  // announcement. Same opt-out rationale as input-ui.
+  static labelDeprecated = false;
+
   static properties = {
     ...AdiaFormElement.properties,
     /** value: Number — overrides AdiaFormElement.value (String); syncs as string on form submit. */

package/components/richtext/richtext.css

@@ -5,8 +5,8 @@
 @scope (richtext-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    /* Optimal reading measure; not on spatial scale */
-    --richtext-max-width:      720px;
+    /* Optimal reading measure; not on spatial scale (45rem ≈ 720px at 1rem=16px). */
+    --richtext-max-width:      45rem;
     --richtext-px:             var(--a-space-6);
     --richtext-py:             var(--a-space-8);
 

package/components/richtext/richtext.js

@@ -18,7 +18,10 @@ import { renderMarkdown } from '../../core/markdown.js';
 class AdiaRichText extends AdiaElement {
   static properties = {
     src:      { type: String, default: '', reflect: true },
-    markdown: { type: String, default: '' },
+    // Markdown bodies can be arbitrarily large; reflecting to the attribute
+    // would bloat the DOM (and break parsing on multi-line content with
+    // unescaped quotes). The property is the source of truth.
+    markdown: { type: String, default: '', reflect: false },
   };
 
   static template = () => null;

package/components/segment/segment.css

@@ -12,7 +12,7 @@
     /* ── Colors ── */
     --segment-fg:              var(--a-fg-subtle);
     --segment-fg-hover:        var(--a-fg);
-    --segment-fg-selected:     var(--a-neutral-0-shade);
+    --segment-fg-selected:     var(--a-chrome-dark);
     --segment-fg-disabled:     var(--a-fg-muted);
 
     /* ── Transition ── */

package/components/segmented/segmented.js

@@ -22,6 +22,7 @@ class AdiaSegmented extends AdiaFormElement {
 
   #indicator = null;
   #bound = false;
+  #transitionRaf = null;
 
   connected() {
     super.connected();
@@ -42,6 +43,10 @@ class AdiaSegmented extends AdiaFormElement {
 
   disconnected() {
     super.disconnected();
+    if (this.#transitionRaf != null) {
+      cancelAnimationFrame(this.#transitionRaf);
+      this.#transitionRaf = null;
+    }
     this.removeEventListener('click', this.#handleClick);
     this.removeEventListener('keydown', this.#handleKeydown);
     this.#indicator = null;
@@ -100,7 +105,8 @@ class AdiaSegmented extends AdiaFormElement {
       this.#indicator.style.transition = 'none';
       this.#indicator.style.transform = `translateX(${selectedIdx * 100}%)`;
       this.setAttribute('data-indicator-ready', '');
-      requestAnimationFrame(() => {
+      this.#transitionRaf = requestAnimationFrame(() => {
+        this.#transitionRaf = null;
         if (this.#indicator) this.#indicator.style.transition = '';
       });
     } else {

package/components/select/select.css

@@ -154,8 +154,11 @@
     color: var(--select-placeholder-fg);
   }
 
-  [slot="caret"] {
-    color: var(--select-caret-fg) !important;
+  /* Caret color is held against button-ui's stronger cascade by chaining
+     :scope > [slot="trigger"] > [slot="caret"] — matches at the same
+     specificity as button-ui's own slot rules without !important. */
+  :scope > [slot="trigger"] > [slot="caret"] {
+    color: var(--select-caret-fg);
     flex-shrink: 0;
   }
 
@@ -171,8 +174,8 @@
     background: var(--select-ghost-bg-hover);
     color: var(--select-fg);
   }
-  :scope[variant="ghost"] [slot="trigger"]:hover [slot="caret"] {
-    color: var(--select-fg-subtle) !important;
+  :scope[variant="ghost"] > [slot="trigger"]:hover > [slot="caret"] {
+    color: var(--select-fg-subtle);
   }
 }
 

package/components/slider/slider.js

@@ -1,19 +1,25 @@
 /**
- * <field-ui label="Width">
- *   <slider-ui value="63" min="0" max="200" step="1" suffix="rem"></slider-ui>
- * </field-ui>
+ * <slider-ui label="Width" value="63" min="0" max="200" step="1" suffix="rem"></slider-ui>
  *
- * Layout inside the field:
- *   [field label]              [value] [suffix]
- *   [====fill====●─────────────────track──────]
+ * Layout:
+ *   [label]                                  [value] [suffix]
+ *   [=====fill=====●─────────────────track───────────────────]
  *
- * Bare `<slider-ui label="…">` still works but logs a deprecation warning
- * asking you to wrap in <field-ui> for proper label association.
+ * The `label` attribute renders as a first-class in-component caption in
+ * the slider header and is mirrored to `aria-label` on the host for
+ * screen-reader announcement. Wrap in `<field-ui>` only when you need
+ * external label-row composition (hint, error, action slot, etc.).
  */
 
 import { AdiaFormElement } from '../../core/form.js';
 
 class AdiaSlider extends AdiaFormElement {
+  // Opt out of AdiaFormElement's per-control `label` deprecation warning.
+  // slider-ui's `label` is a first-class API rendering as the in-header
+  // caption next to the value, with `aria-label` wired on the host for
+  // a11y. Same opt-out rationale as input-ui and range-ui.
+  static labelDeprecated = false;
+
   static properties = {
     ...AdiaFormElement.properties,
     /** value: Number — overrides AdiaFormElement.value (String); syncs as string on form submit. */
@@ -47,6 +53,7 @@ class AdiaSlider extends AdiaFormElement {
     this.setAttribute('tabindex', '0');
     this.setAttribute('aria-valuemin', this.min);
     this.setAttribute('aria-valuemax', this.max);
+    if (this.label) this.setAttribute('aria-label', this.label);
 
     if (!this.querySelector('[slot="track"]')) {
       this.innerHTML = `

package/components/stepper/stepper.css

@@ -1,9 +1,12 @@
 /* ═══════════════════════════════════════════════════════════════
-   STEPPER-N + STEPPER-ITEM-N
+   STEPPER-UI + STEPPER-ITEM-UI
 
-   Extracted from the old timeline-ui[mode="steps"]. Wizard-style
-   numbered circles, auto-checkmark on completed, connector line.
-   Parent `step` index drives child state.
+   Two-element component. Each gets its own @scope block —
+   stepper-item-ui is co-located in stepper.js but is a real
+   custom element and must follow the two-block @scope pattern.
+
+   Wizard-style numbered circles, auto-checkmark on completed,
+   connector line. Parent `step` index drives child state.
    ═══════════════════════════════════════════════════════════════ */
 
 @scope (stepper-ui) {
@@ -53,168 +56,202 @@
   }
 }
 
-/* ── Item tokens + label/description styling ── */
-:where(stepper-item-ui) {
-  --stepper-label-weight:  var(--a-weight-medium);
-  --stepper-label-size:    var(--a-ui-size);
-  --stepper-label-fg:      var(--a-fg);
-  --stepper-pending-fg:    var(--a-fg-muted);
-  --stepper-desc-fg:       var(--a-fg-subtle);
-  --stepper-desc-size:     var(--a-ui-sm);
-}
+@scope (stepper-item-ui) {
+  :where(:scope) {
+    /* Inherit parent stepper-ui's circle/line tokens by name —
+       co-located item legitimately reads parent tokens (the same
+       scope pattern as menu-item-ui inside menu-ui's popover). */
+    --stepper-item-size:           var(--stepper-size, 2rem);
+    --stepper-item-bg:             var(--stepper-bg, var(--a-bg));
+    --stepper-item-border:         var(--stepper-border, var(--a-border));
+    --stepper-item-fg:             var(--stepper-fg, var(--a-fg-muted));
+    --stepper-item-font:           var(--stepper-font, var(--a-ui-sm));
+    --stepper-item-weight:         var(--stepper-weight, var(--a-weight-medium));
+    --stepper-item-border-size:    var(--stepper-border-size, 2px);
+
+    --stepper-item-active-bg:      var(--stepper-active-bg, var(--a-bg));
+    --stepper-item-active-border:  var(--stepper-active-border, var(--a-accent));
+    --stepper-item-active-fg:      var(--stepper-active-fg, var(--a-accent));
+
+    --stepper-item-done-bg:        var(--stepper-done-bg, var(--a-accent));
+    --stepper-item-done-border:    var(--stepper-done-border, var(--a-accent));
+    --stepper-item-done-fg:        var(--stepper-done-fg, var(--a-accent-fg));
+
+    --stepper-item-line:           var(--stepper-line, var(--a-border-subtle));
+    --stepper-item-line-done:      var(--stepper-line-done, var(--a-accent));
+    --stepper-item-line-size:      var(--stepper-line-size, 2px);
+
+    --stepper-item-radius-full:    var(--a-radius-full);
+    --stepper-item-gap-sm:         var(--stepper-item-gap-sm, var(--a-space-2));
+    --stepper-item-pad-x:          var(--stepper-pad-x, var(--a-space-4));
+    --stepper-item-pad-y:          var(--stepper-pad-y, var(--a-space-6));
+    --stepper-item-offset-xs:      var(--stepper-offset-xs, var(--a-space-1));
+    --stepper-item-min-width:      var(--stepper-min-width, 5rem);
+
+    --stepper-item-label-weight:   var(--a-weight-medium);
+    --stepper-item-label-size:     var(--a-ui-size);
+    --stepper-item-label-fg:       var(--a-fg);
+    --stepper-item-pending-fg:     var(--a-fg-muted);
+    --stepper-item-desc-fg:        var(--a-fg-subtle);
+    --stepper-item-desc-size:      var(--a-ui-sm);
+
+    --stepper-item-icon-size:      0.625rem;
+  }
 
-stepper-item-ui {
-  box-sizing: border-box;
-  position: relative;
-  display: block;
-  counter-increment: step;
-  flex: 1;
-  min-width: var(--stepper-min-width);
-  text-align: center;
-  padding-top: calc(var(--stepper-size) + var(--stepper-item-gap-sm));
-  padding-left: 0;
-  padding-bottom: 0;
-}
+  :scope {
+    box-sizing: border-box;
+    position: relative;
+    display: block;
+    counter-increment: step;
+    flex: 1;
+    min-width: var(--stepper-item-min-width);
+    text-align: center;
+    padding-top: calc(var(--stepper-item-size) + var(--stepper-item-gap-sm));
+    padding-left: 0;
+    padding-bottom: 0;
+  }
 
-/* Numbered circle */
-stepper-item-ui::after {
-  content: counter(step);
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: var(--stepper-size);
-  height: var(--stepper-size);
-  border-radius: var(--stepper-radius-full);
-  border: var(--stepper-border-size) solid var(--stepper-border);
-  background: var(--stepper-bg);
-  color: var(--stepper-fg);
-  font-size: var(--stepper-font);
-  font-weight: var(--stepper-weight);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  z-index: 1;
-}
+  /* Numbered circle */
+  :scope::after {
+    content: counter(step);
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: var(--stepper-item-size);
+    height: var(--stepper-item-size);
+    border-radius: var(--stepper-item-radius-full);
+    border: var(--stepper-item-border-size) solid var(--stepper-item-border);
+    background: var(--stepper-item-bg);
+    color: var(--stepper-item-fg);
+    font-size: var(--stepper-item-font);
+    font-weight: var(--stepper-item-weight);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    z-index: 1;
+  }
 
-/* Connector line */
-stepper-item-ui::before {
-  content: '';
-  position: absolute;
-  top: calc(var(--stepper-size) / 2);
-  left: calc(50% + var(--stepper-size) / 2 + 2px);
-  right: calc(-50% + var(--stepper-size) / 2 + 2px);
-  height: var(--stepper-line-size);
-  background: var(--stepper-line);
-}
+  /* Connector line */
+  :scope::before {
+    content: '';
+    position: absolute;
+    top: calc(var(--stepper-item-size) / 2);
+    left: calc(50% + var(--stepper-item-size) / 2 + 2px);
+    right: calc(-50% + var(--stepper-item-size) / 2 + 2px);
+    height: var(--stepper-item-line-size);
+    background: var(--stepper-item-line);
+  }
 
-stepper-item-ui[data-last]::before {
-  display: none;
-}
+  :scope[data-last]::before {
+    display: none;
+  }
 
-/* Active state */
-stepper-item-ui[active]::after {
-  border-color: var(--stepper-active-border);
-  color: var(--stepper-active-fg);
-  background: var(--stepper-active-bg);
-}
+  /* Active state */
+  :scope[status="active"]::after {
+    border-color: var(--stepper-item-active-border);
+    color: var(--stepper-item-active-fg);
+    background: var(--stepper-item-active-bg);
+  }
 
-stepper-item-ui[active] [slot="label"] {
-  color: var(--stepper-label-fg);
-  font-weight: var(--stepper-label-weight);
-}
+  :scope[status="active"] [slot="label"] {
+    color: var(--stepper-item-label-fg);
+    font-weight: var(--stepper-item-label-weight);
+  }
 
-/* Completed state — checkmark replaces number */
-stepper-item-ui[completed]::after {
-  content: '\2713';
-  background: var(--stepper-done-bg);
-  border-color: var(--stepper-done-border);
-  color: var(--stepper-done-fg);
-}
+  /* Completed state — checkmark replaces number */
+  :scope[status="completed"]::after {
+    content: '\2713';
+    background: var(--stepper-item-done-bg);
+    border-color: var(--stepper-item-done-border);
+    color: var(--stepper-item-done-fg);
+  }
 
-stepper-item-ui[completed]::before {
-  background: var(--stepper-line-done);
-}
+  :scope[status="completed"]::before {
+    background: var(--stepper-item-line-done);
+  }
 
-stepper-item-ui[completed] [slot="label"] {
-  color: var(--stepper-label-fg);
-}
+  :scope[status="completed"] [slot="label"] {
+    color: var(--stepper-item-label-fg);
+  }
 
-/* Pending label */
-stepper-item-ui:not([active]):not([completed]) [slot="label"] {
-  color: var(--stepper-pending-fg);
-}
+  /* Pending label */
+  :scope:not([status="active"]):not([status="completed"]) [slot="label"] {
+    color: var(--stepper-item-pending-fg);
+  }
 
-/* Icon replaces number */
-stepper-item-ui:has([slot="icon"])::after {
-  content: '';
-  font-size: 0;
-}
+  /* Icon replaces number */
+  :scope:has([slot="icon"])::after {
+    content: '';
+    font-size: 0;
+  }
 
-stepper-item-ui [slot="icon"] {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: var(--stepper-size);
-  height: var(--stepper-size);
-  border-radius: var(--stepper-radius-full);
-  border: var(--stepper-border-size) solid var(--stepper-border);
-  background: var(--stepper-bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  --a-icon-size: 0.625rem;
-  color: var(--stepper-fg);
-  z-index: 1;
-}
+  :scope [slot="icon"] {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: var(--stepper-item-size);
+    height: var(--stepper-item-size);
+    border-radius: var(--stepper-item-radius-full);
+    border: var(--stepper-item-border-size) solid var(--stepper-item-border);
+    background: var(--stepper-item-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    --a-icon-size: var(--stepper-item-icon-size);
+    color: var(--stepper-item-fg);
+    z-index: 1;
+  }
 
-stepper-item-ui[active] [slot="icon"] {
-  border-color: var(--stepper-active-border);
-  color: var(--stepper-active-fg);
-  background: var(--stepper-active-bg);
-}
+  :scope[status="active"] [slot="icon"] {
+    border-color: var(--stepper-item-active-border);
+    color: var(--stepper-item-active-fg);
+    background: var(--stepper-item-active-bg);
+  }
 
-stepper-item-ui[completed] [slot="icon"] {
-  background: var(--stepper-done-bg);
-  border-color: var(--stepper-done-border);
-  color: var(--stepper-done-fg);
-}
+  :scope[status="completed"] [slot="icon"] {
+    background: var(--stepper-item-done-bg);
+    border-color: var(--stepper-item-done-border);
+    color: var(--stepper-item-done-fg);
+  }
 
-/* ── Content slots ── */
+  /* ── Content slots ── */
 
-stepper-item-ui [slot="label"] {
-  display: block;
-  font-weight: var(--stepper-label-weight);
-  font-size: var(--stepper-label-size);
-  line-height: 1.4;
-  color: var(--stepper-label-fg);
-  min-width: 0;
-  overflow-wrap: break-word;
-}
+  :scope [slot="label"] {
+    display: block;
+    font-weight: var(--stepper-item-label-weight);
+    font-size: var(--stepper-item-label-size);
+    line-height: 1.4;
+    color: var(--stepper-item-label-fg);
+    min-width: 0;
+    overflow-wrap: break-word;
+  }
 
-stepper-item-ui [slot="description"] {
-  display: block;
-  margin-top: var(--stepper-offset-xs);
-  color: var(--stepper-desc-fg);
-  font-size: var(--stepper-desc-size);
-  line-height: 1.5;
-}
+  :scope [slot="description"] {
+    display: block;
+    margin-top: var(--stepper-item-offset-xs);
+    color: var(--stepper-item-desc-fg);
+    font-size: var(--stepper-item-desc-size);
+    line-height: 1.5;
+  }
 
-stepper-item-ui [slot]:empty {
-  display: none;
+  :scope [slot]:empty {
+    display: none;
+  }
 }
 
-/* ── Vertical orientation ── */
+/* ── Vertical orientation rules — must reach across stepper-ui →
+       stepper-item-ui boundary, kept outside @scope. ── */
 
 stepper-ui[orientation="vertical"] > stepper-item-ui {
   flex: none;
   text-align: left;
   padding-top: 0;
-  padding-left: calc(var(--stepper-size) + var(--stepper-pad-x));
-  padding-bottom: var(--stepper-pad-y);
-  min-height: var(--stepper-size);
+  padding-left: calc(var(--stepper-item-size) + var(--stepper-item-pad-x));
+  padding-bottom: var(--stepper-item-pad-y);
+  min-height: var(--stepper-item-size);
 }
 
 stepper-ui[orientation="vertical"] > stepper-item-ui::after {
@@ -224,11 +261,11 @@ stepper-ui[orientation="vertical"] > stepper-item-ui::after {
 }
 
 stepper-ui[orientation="vertical"] > stepper-item-ui::before {
-  left: calc(var(--stepper-size) / 2 - 1px);
+  left: calc(var(--stepper-item-size) / 2 - 1px);
   transform: none;
-  top: calc(var(--stepper-size) + var(--stepper-offset-xs));
+  top: calc(var(--stepper-item-size) + var(--stepper-item-offset-xs));
   right: auto;
-  width: var(--stepper-line-size);
+  width: var(--stepper-item-line-size);
   height: auto;
   bottom: 0;
 }

package/components/stepper/stepper.js

@@ -78,8 +78,11 @@ class AdiaStepperItem extends AdiaElement {
     text:        { type: String,  default: '', reflect: true },
     description: { type: String,  default: '', reflect: true },
     icon:        { type: String,  default: '', reflect: true },
-    completed:   { type: Boolean, default: false, reflect: true },
-    active:      { type: Boolean, default: false, reflect: true },
+    // `status` is the canonical stage-progress shape across timeline-item,
+    // stepper-item, pipeline-status, agent-reasoning. Mutually exclusive
+    // values prevent the `active && completed` footgun the prior multi-
+    // Boolean shape allowed.
+    status:      { type: String,  default: 'idle', reflect: true },
   };
 
   static template = () => null;