@adia-ai/web-components 0.0.21 → 0.0.23

package/README.md

@@ -199,7 +199,7 @@ the `streams` registry export from `core/data-stream.js`.
 
 Implementation: `core/data-stream.js` (~360 lines). Full
 attribute table + live demos:
-[`/site/components/chart#data-stream`](./site/pages/components/chart/index.html).
+[`/site/components/chart#data-stream`](../../site/pages/components/chart/index.html).
 
 ## Build
 

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

@@ -14,6 +14,19 @@
   }
 }
 
+/* Safari 17.x bug: `:scope:hover` inside `@scope` doesn't match the scope
+   root. Plain selector outside the @scope works. `:focus-visible` matches
+   correctly inside @scope, so the combined `:hover, :focus-visible` rules
+   are split — `:hover` moves out, `:focus-visible` stays. See
+   docs/BROWSER-COMPAT.md §3a. */
+action-item-ui:hover {
+  background: var(--action-item-bg-hover);
+  color: var(--action-item-fg-hover);
+}
+action-item-ui:hover [slot="icon"] {
+  color: var(--action-item-icon-fg-hover);
+}
+
 @scope (action-item-ui) {
   :where(:scope) {
     /* Reuse menu-item visual language for consistency */
@@ -59,12 +72,9 @@
       color      var(--action-item-duration) var(--action-item-easing);
   }
 
-  :scope:hover,
   :scope:focus-visible {
     background: var(--action-item-bg-hover);
     color: var(--action-item-fg-hover);
-  }
-  :scope:focus-visible {
     box-shadow: var(--action-item-focus-ring);
   }
 
@@ -75,7 +85,6 @@
     color: var(--action-item-icon-fg);
     transition: color var(--action-item-duration) var(--action-item-easing);
   }
-  :scope:hover [slot="icon"],
   :scope:focus-visible [slot="icon"] {
     color: var(--action-item-icon-fg-hover);
   }

package/components/agent-reasoning/agent-reasoning.js

@@ -371,9 +371,12 @@ class AdiaAgentReasoning extends AdiaElement {
   #makeStepItem(step) {
     const item = document.createElement('timeline-item-ui');
     item.setAttribute('text', step.label || '');
-    if (step.status === 'done')   item.setAttribute('completed', '');
-    if (step.status === 'error')  item.setAttribute('error', '');
-    if (step.status === 'active') { item.setAttribute('active', ''); item.setAttribute('spinner', ''); }
+    // Map step.status → canonical timeline-item-ui [status] enum.
+    // The legacy [completed]/[active]/[error] Booleans were removed
+    // in the Phase 6 cut (2026-04-27); only [status] is honoured.
+    if (step.status === 'done')   item.setAttribute('status', 'completed');
+    if (step.status === 'error')  item.setAttribute('status', 'error');
+    if (step.status === 'active') { item.setAttribute('status', 'active'); item.setAttribute('spinner', ''); }
 
     const duration = step.durationLabel
       || (step.duration != null ? formatDuration(step.duration) : '');

package/components/alert/alert.css

@@ -5,8 +5,6 @@
     --alert-fg:       var(--a-fg);
     --alert-border:   var(--a-border-subtle);
     --alert-icon-fg:  var(--a-fg-muted);
-    --alert-close-fg:       var(--a-fg-muted);
-    --alert-close-fg-hover: var(--a-fg);
 
     /* ── Layout ── */
     --alert-radius:   var(--a-radius-md);
@@ -15,19 +13,25 @@
     --alert-gap:      var(--a-space-2);
 
     /* ── Typography ── */
-    --alert-font:     var(--a-ui-size);
+    --alert-font:        var(--a-ui-size);
+    --alert-line-height: var(--a-ui-line-height, 1.5);
   }
 
   :scope {
     /* ── Base ── */
     box-sizing: border-box;
     display: flex;
-    align-items: center;
+    /* `align-items: start` so the leading icon and close button anchor
+       to the top — keeps the icon visually paired with the first line of
+       text on multi-line alerts. The leading slot's own height = body
+       line-height (below) means the icon optically centers on line 1. */
+    align-items: start;
     gap: var(--alert-gap);
     padding: var(--alert-py) var(--alert-px);
     border: 1px solid var(--alert-border);
     border-radius: var(--alert-radius);
     font-size: var(--alert-font);
+    line-height: var(--alert-line-height);
     color: var(--alert-fg);
     background: var(--alert-bg);
   }
@@ -65,6 +69,11 @@
   :scope [slot="leading"] {
     flex-shrink: 0;
     color: var(--alert-icon-fg);
+    /* Box height = one line of body so the icon optical-centers on the
+       first line under `align-items: start`. */
+    display: inline-flex;
+    align-items: center;
+    min-height: calc(var(--alert-font) * var(--alert-line-height));
     /* `ensure()` appends the leading-slot icon to the host, which
        puts it after any consumer-provided content in DOM order.
        Force it to the visual lead via flex `order` so the icon
@@ -77,17 +86,12 @@
     min-width: 0;
   }
 
+  /* Close button is a `<button-ui icon="x" variant="ghost" size="sm">`
+     stamped by alert.js — it brings its own focus ring, hover state,
+     and transitions. Box height matches the leading slot so X and icon
+     sit on the same first-line baseline. */
   :scope [slot="close"] {
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--alert-close-fg);
-    padding: 0;
-    line-height: 1;
-    font-size: 1rem;
-  }
-
-  :scope [slot="close"]:hover {
-    color: var(--alert-close-fg-hover);
+    flex-shrink: 0;
+    min-height: calc(var(--alert-font) * var(--alert-line-height));
   }
 }

package/components/alert/alert.js

@@ -24,22 +24,19 @@ class AdiaAlert extends AdiaElement {
   static parts = {
     leading: '<icon-ui slot="leading"></icon-ui>',
     content: '<span slot="content"></span>',
-    close:   '<button slot="close" type="button" aria-label="Close">\u00d7</button>',
+    /* Close affordance is a real button-ui \u2014 inherits the system focus
+       ring, hover transition, and icon sizing automatically. Listen for
+       the canonical `press` event (button-ui dispatches on click + Enter
+       + Space, no extra keydown wiring needed). */
+    close:   '<button-ui slot="close" icon="x" variant="ghost" size="sm" aria-label="Close"></button-ui>',
   };
 
   static template = () => null;
 
-  #onClick = (e) => {
+  #onPress = (e) => {
     if (e.target.closest('[slot="close"]')) this.#close();
   };
 
-  #onKeydown = (e) => {
-    if (e.target.closest('[slot="close"]') && (e.key === 'Enter' || e.key === ' ')) {
-      e.preventDefault();
-      this.#close();
-    }
-  };
-
   connected() {
     this.#updateRole();
 
@@ -48,13 +45,11 @@ class AdiaAlert extends AdiaElement {
     this.ensure('content');
     if (this.closable) this.ensure('close');
 
-    this.addEventListener('click', this.#onClick);
-    this.addEventListener('keydown', this.#onKeydown);
+    this.addEventListener('press', this.#onPress);
   }
 
   disconnected() {
-    this.removeEventListener('click', this.#onClick);
-    this.removeEventListener('keydown', this.#onKeydown);
+    this.removeEventListener('press', this.#onPress);
   }
 
   render() {

package/components/avatar/avatar.css

@@ -74,6 +74,14 @@
    AVATAR-GROUP-N — Overlapping avatar stack with +N overflow
    ═══════════════════════════════════════════════════════════════ */
 
+/* Safari 17.x bug: `:scope:hover` inside `@scope` doesn't match the scope
+   root. Plain selector outside the @scope works. The two `:scope:hover`
+   rules combine into one rule list outside. See docs/BROWSER-COMPAT.md §3a. */
+avatar-group-ui:hover > avatar-ui:not(:first-child),
+avatar-group-ui:hover > [slot="overflow"] {
+  margin-inline-start: var(--avatar-group-spread);
+}
+
 @scope (avatar-group-ui) {
   :where(:scope) {
     /* ── Layout ── */
@@ -123,11 +131,6 @@
     z-index: 99;
   }
 
-  /* Group hover: spread apart */
-  :scope:hover > avatar-ui:not(:first-child) {
-    margin-inline-start: var(--avatar-group-spread);
-  }
-
   /* Overflow counter */
   [slot="overflow"] {
     display: inline-flex;
@@ -147,10 +150,6 @@
     transition: margin var(--avatar-group-duration) var(--avatar-group-easing);
   }
 
-  :scope:hover > [slot="overflow"] {
-    margin-inline-start: var(--avatar-group-spread);
-  }
-
   /* Size variants — adjust counter + overlap */
   :scope[size="xs"] { --avatar-group-counter-size: 1.25rem; --avatar-group-overlap: -0.3rem; }
   :scope[size="sm"] { --avatar-group-counter-size: 1.75rem; --avatar-group-overlap: -0.4rem; }

package/components/button/button.css

@@ -1,3 +1,28 @@
+/* Safari 17.x bug: `:scope[attr]:hover` inside `@scope` doesn't match the
+   scope root. Plain selectors outside the @scope work — custom-property
+   tokens still resolve via inheritance. Specificity (0,1,1 / 0,2,1) is
+   preserved. See docs/BROWSER-COMPAT.md §3a. */
+button-ui:not([disabled]):hover,
+button-ui[variant="primary"]:not([disabled]):hover {
+  --button-bg: var(--button-bg-hover);
+  --button-fg: var(--button-fg-hover);
+  --button-border: var(--button-border-hover);
+}
+button-ui[variant="ghost"]:not([disabled]):hover {
+  --button-bg: var(--button-bg-ghost-hover);
+  --button-fg: var(--button-fg-ghost-hover);
+  --button-border: var(--button-border-ghost-hover);
+}
+button-ui[variant="outline"]:not([disabled]):hover {
+  --button-fg: var(--button-fg-hover);
+  --button-border: var(--button-border-hover);
+}
+button-ui[color="danger"]:not([disabled]):hover {
+  --button-bg: var(--button-bg-hover);
+  --button-fg: var(--button-fg-hover);
+  --button-border: var(--button-border-hover);
+}
+
 @scope (button-ui) {
   :where(:scope) {
     --button-bg:               var(--a-ui-bg);
@@ -136,30 +161,8 @@
     --button-fg: var(--a-warning-fg);
   }
 
-  /* ── Hover (after variants so it wins on specificity via :hover) ── */
-  :scope:not([disabled]):hover,
-  :scope[variant="primary"]:not([disabled]):hover {
-    --button-bg: var(--button-bg-hover);
-    --button-fg: var(--button-fg-hover);
-    --button-border: var(--button-border-hover);
-  }
-
-  :scope[variant="ghost"]:not([disabled]):hover {
-    --button-bg: var(--button-bg-ghost-hover);
-    --button-fg: var(--button-fg-ghost-hover);
-    --button-border: var(--button-border-ghost-hover);
-  }
-
-  :scope[variant="outline"]:not([disabled]):hover {
-    --button-fg: var(--button-fg-hover);
-    --button-border: var(--button-border-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);
-  }
+  /* Hover rules moved outside @scope — see Safari 17.x bug note at
+     top of file. */
 
   /* Size is handled by the universal [size] attribute system
      which sets --a-size, --a-ui-px, --a-ui-size.

package/components/card/card.css

@@ -61,6 +61,7 @@
     box-shadow: var(--card-shadow);
     overflow: hidden;
     corner-shape: superellipse(1.1);
+    width: stretch;
   }
 
   /* ═══════ Variants — token-only overrides ═══════ */

package/components/check/check.css

@@ -1,3 +1,17 @@
+/* Safari 17.x bug: `:scope*:hover` inside `@scope` doesn't match the
+   scope root. The `:scope:hover [slot="box"]` shape — `:hover` on the
+   scope root, descendant selector — is also affected; the entire selector
+   moves out together. See docs/BROWSER-COMPAT.md §3a. */
+check-ui:not([disabled]):hover [slot="box"] {
+  border-color: var(--check-border-hover);
+  background: var(--check-bg-hover);
+}
+check-ui[checked]:not([disabled]):hover [slot="box"],
+check-ui[indeterminate]:not([disabled]):hover [slot="box"] {
+  background: var(--check-bg-checked-hover);
+  border-color: var(--check-bg-checked-hover);
+}
+
 @scope (check-ui) {
   :where(:scope) {
     /* ── Tokens ── (size scales with universal [size] attribute via --a-toggle-size) */
@@ -83,10 +97,7 @@
     background: var(--_dash-bg);
   }
 
-  :scope:not([disabled]):hover [slot="box"] {
-    border-color: var(--check-border-hover);
-    background: var(--check-bg-hover);
-  }
+  /* hover rules moved outside @scope — see Safari 17.x bug note at top. */
 
   /* Checked — CSS border checkmark */
   :scope[checked] [slot="box"],
@@ -110,12 +121,6 @@
     --_icon-h:  calc(var(--check-size) * 0.12);
   }
 
-  :scope[checked]:not([disabled]):hover [slot="box"],
-  :scope[indeterminate]:not([disabled]):hover [slot="box"] {
-    background: var(--check-bg-checked-hover);
-    border-color: var(--check-bg-checked-hover);
-  }
-
   /* Label */
   :scope[label]::after { content: attr(label); }
 

package/components/col/col.css

@@ -12,6 +12,9 @@
     gap: var(--col-gap);
     justify-content: var(--col-justify);
     align-items: var(--col-align);
+    /* Universal [padding] / [margin] opt-in — see tokens.css for scale. */
+    padding: var(--a-padding, 0);
+    margin: var(--a-margin, 0);
     /* Neutralize legacy UA rule that maps HTML `align=` attr to `text-align`.
        Our [align="center"] sets flex cross-axis alignment, not text alignment. */
     text-align: inherit;

package/components/description-list/description-list.css

@@ -17,19 +17,15 @@
   }
 
   :scope {
-    /* ── Base ── */
+    /* ── Base ── stacked layout (term above desc, single column). */
     box-sizing: border-box;
     display: grid;
+    grid-template-columns: 1fr;
     gap: var(--description-list-gap-row) var(--description-list-gap-column);
     margin: 0;
     padding: 0;
   }
 
-  /* Default stacked: term above desc. Each pair in its own implicit row. */
-  :scope {
-    grid-template-columns: 1fr;
-  }
-
   [data-dl-term],
   dt {
     margin: 0;
@@ -48,9 +44,13 @@
     line-height: 1.4;
   }
 
-  /* Separate pairs with extra gap when stacked */
-  :scope[layout="stacked"] [data-dl-desc]:not(:last-child),
-  :scope[layout="stacked"] dd:not(:last-child) {
+  /* Pair separator: extra margin under each non-last dd so DD→DT (between
+     pairs) reads as a wider gap than DT→DD (within a pair). Match anything
+     that isn't `[layout="inline"]` so the default case (no attribute set —
+     `layout` defaults to "stacked" but only reflects when explicitly set)
+     and the explicit `[layout="stacked"]` both get the same rhythm. */
+  :scope:not([layout="inline"]) [data-dl-desc]:not(:last-child),
+  :scope:not([layout="inline"]) dd:not(:last-child) {
     margin-bottom: var(--description-list-gap-row);
   }
 

package/components/grid/grid.css

@@ -1,6 +1,8 @@
 @scope (grid-ui) {
   :where(:scope) {
-    --grid-gap:        var(--a-gap-md);
+    /* Read `--a-gap` so the universal `[gap="N"]` rules (tokens.css)
+       reach the grid; defaults to `--a-gap-md` at :root. */
+    --grid-gap:        var(--a-gap);
     --grid-column-gap: var(--grid-gap);
     --grid-row-gap:    var(--grid-gap);
   }
@@ -13,6 +15,9 @@
     grid-auto-columns: 1fr;
     column-gap: var(--grid-column-gap);
     row-gap: var(--grid-row-gap);
+    /* Universal [padding] / [margin] opt-in — see tokens.css for scale. */
+    padding: var(--a-padding, 0);
+    margin: var(--a-margin, 0);
   }
 
   /* Explicit column count — switches to template mode */

package/components/input/input.css

@@ -1,3 +1,9 @@
+/* Safari 17.x bug: `:scope[attr]:hover` inside `@scope` doesn't match the
+   scope root. Plain selector outside works. See docs/BROWSER-COMPAT.md §3a. */
+input-ui[variant="ghost"]:hover {
+  --input-bg: var(--a-bg-muted);
+}
+
 @scope (input-ui) {
   :where(:scope) {
     /* ── Tokens (wired to --a-ui-*) ── */
@@ -69,7 +75,13 @@
        baseline centered regardless of line-height. */
     line-height: 1.4;
     cursor: text;
-    transition: border-color var(--input-duration) var(--input-easing);
+    /* Cover every property the hover / focus / invalid states change so
+       the field doesn't half-snap (border slides, but bg/colour/ring snap). */
+    transition:
+      background  var(--input-duration) var(--input-easing),
+      border-color var(--input-duration) var(--input-easing),
+      color       var(--input-duration) var(--input-easing),
+      box-shadow  var(--input-duration) var(--input-easing);
   }
   :scope:not([disabled]) [slot="field"]:hover {
     background: var(--input-bg-hover);
@@ -170,7 +182,6 @@
     --input-border: transparent;
     --input-border-hover: transparent;
   }
-  :scope[variant="ghost"]:hover {
-    --input-bg: var(--a-bg-muted);
-  }
+  /* :scope[variant="ghost"]:hover moved outside @scope — see Safari
+     17.x bug note at top of file. */
 }

package/components/list/list.css

@@ -57,6 +57,14 @@
     border-inline-start: 2px solid transparent;
     padding-inline-start: var(--a-space-2);
     outline: none;
+    transition:
+      background   var(--a-duration-fast) var(--a-easing),
+      color        var(--a-duration-fast) var(--a-easing),
+      border-color var(--a-duration-fast) var(--a-easing);
+  }
+
+  :scope[selectable] > [role="listitem"]:hover {
+    background: var(--a-bg-hover);
   }
 
   :scope[selectable] > [role="listitem"][aria-selected="true"] {

package/components/menu/menu.css

@@ -40,6 +40,28 @@ menu-ui [data-menu-popover] {
   color: var(--a-fg);
 }
 
+/* Safari 17.x bug: `:scope:hover` inside `@scope` doesn't match the scope
+   root. Plain selectors outside the @scope work. `:focus-visible` matches
+   correctly inside @scope, so the combined `:hover, :focus-visible` rule
+   is split — `:hover` moves out, `:focus-visible` stays. The
+   `:scope[variant="danger"]:hover` rules also move (same bug shape). See
+   docs/BROWSER-COMPAT.md §3a. */
+menu-item-ui:hover {
+  --menu-item-bg: var(--menu-item-bg-hover);
+  --menu-item-fg: var(--menu-item-fg-hover);
+  outline: none;
+}
+menu-item-ui:hover [slot="icon"] {
+  color: var(--menu-item-icon-fg-hover);
+}
+menu-item-ui[variant="danger"]:hover {
+  --menu-item-bg: var(--menu-item-danger-bg);
+  --menu-item-fg: var(--menu-item-danger-fg);
+}
+menu-item-ui[variant="danger"]:hover [slot="icon"] {
+  color: var(--menu-item-danger-fg);
+}
+
 @scope (menu-item-ui) {
   :where(:scope) {
     /* ── Layout ── */
@@ -84,7 +106,6 @@ menu-ui [data-menu-popover] {
       color var(--menu-item-duration) var(--menu-item-easing);
   }
 
-  :scope:hover,
   :scope:focus-visible {
     --menu-item-bg: var(--menu-item-bg-hover);
     --menu-item-fg: var(--menu-item-fg-hover);
@@ -98,9 +119,6 @@ menu-ui [data-menu-popover] {
     color: var(--menu-item-icon-fg);
     transition: color var(--menu-item-duration) var(--menu-item-easing);
   }
-  :scope:hover [slot="icon"] {
-    color: var(--menu-item-icon-fg-hover);
-  }
 
   /* Text */
   [slot="text"] {
@@ -112,16 +130,9 @@ menu-ui [data-menu-popover] {
   :scope[variant="danger"] {
     --menu-item-fg: var(--a-danger-bg);
   }
-  :scope[variant="danger"]:hover {
-    --menu-item-bg: var(--menu-item-danger-bg);
-    --menu-item-fg: var(--menu-item-danger-fg);
-  }
   :scope[variant="danger"] [slot="icon"] {
     color: var(--menu-item-danger-fg);
   }
-  :scope[variant="danger"]:hover [slot="icon"] {
-    color: var(--menu-item-danger-fg);
-  }
 
   /* ── Disabled ── */
   :scope[disabled] {

package/components/modal/modal.js

@@ -143,11 +143,47 @@ class AdiaModal extends AdiaElement {
       this.drop('close');
     }
 
-    const body = this.ensure('body');
-    if (body.parentElement !== panel) panel.appendChild(body);
+    // Body — accept bare `<section>` tags, explicit `[slot="body"]`, OR
+    // unslotted light-DOM children (so `<modal-ui><p>…</p></modal-ui>` works
+    // with no markup ceremony). Mirrors drawer-ui's authoring contract.
+    const authorBody = [...this.children].find(c =>
+      c.getAttribute('slot') === 'body' || (!c.getAttribute('slot') && c.localName === 'section')
+    );
+    const looseChildren = [...this.children].filter(c =>
+      !c.getAttribute('slot') && c.localName !== 'section' && c.localName !== 'dialog' && c.localName !== 'footer'
+    );
+
+    let body;
+    if (authorBody) {
+      if (authorBody.getAttribute('slot') !== 'body') authorBody.setAttribute('slot', 'body');
+      if (authorBody.parentElement !== panel) panel.appendChild(authorBody);
+      panel.querySelector(':scope > [slot="body"][data-stamped]')?.remove();
+      body = authorBody;
+    } else {
+      body = this.ensure('body');
+      body.setAttribute('data-stamped', '');
+      if (body.parentElement !== panel) panel.appendChild(body);
+    }
+
+    // Migrate any remaining unslotted light-DOM children into the body so
+    // `<modal-ui><p>…</p></modal-ui>` lands in the visible region.
+    for (const child of looseChildren) {
+      if (child !== body) body.appendChild(child);
+    }
 
-    const footer = this.ensure('footer');
-    if (footer.parentElement !== panel) panel.appendChild(footer);
+    // Footer — opt-in via [slot="footer"] or bare <footer> tag (card-ui style).
+    const userFooter = [...this.children].find(c =>
+      c.getAttribute('slot') === 'footer' || (!c.getAttribute('slot') && c.localName === 'footer')
+    );
+    if (userFooter) {
+      if (userFooter.getAttribute('slot') !== 'footer') userFooter.setAttribute('slot', 'footer');
+      if (userFooter.parentElement !== panel) panel.appendChild(userFooter);
+      panel.querySelector(':scope > [slot="footer"][data-stamped]')?.remove();
+    } else {
+      const footer = this.ensure('footer');
+      footer.setAttribute('data-stamped', '');
+      if (footer.parentElement !== panel) panel.appendChild(footer);
+    }
 
     // Sync open state
     if (this.open && !dialog.open) {

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

@@ -1,3 +1,11 @@
+/* Safari 17.x bug: `:scope:not(...):hover` inside `@scope` doesn't match
+   the scope root. Plain selector outside works. See
+   docs/BROWSER-COMPAT.md §3a. */
+option-card-ui:not([checked]):not([disabled]):hover {
+  background: var(--option-card-bg-hover);
+  border-color: var(--option-card-border-hover);
+}
+
 @scope (option-card-ui) {
   :where(:scope) {
     /* ── Container ── */
@@ -138,11 +146,7 @@
     display: block;
   }
 
-  /* ── State: hover (not checked, not disabled) ── */
-  :scope:not([checked]):not([disabled]):hover {
-    background: var(--option-card-bg-hover);
-    border-color: var(--option-card-border-hover);
-  }
+  /* hover rule moved outside @scope — see Safari 17.x bug note at top. */
 
   /* ── State: checked — accent border + tinted bg + filled radio.
        The indicator becomes an accent disc with a centered dot of

package/components/progress/progress.css

@@ -37,6 +37,14 @@
     border-radius: var(--progress-radius);
     background: var(--progress-fill);
     transition: width var(--progress-duration) var(--progress-easing);
+
+    /* Enter animation: paint the fill at 0 on first frame, then transition
+       to the inline width set by JS — so a freshly-mounted determinate bar
+       animates 0 → value rather than snapping in (or, in some cascades,
+       briefly painting at the indeterminate width:100% before settling). */
+    @starting-style {
+      width: 0;
+    }
   }
 
   /* Indeterminate bar shimmer */

package/components/progress-row/progress-row.js

@@ -53,6 +53,15 @@ class AdiaProgressRow extends AdiaElement {
     this.#progressEl = this.querySelector(':scope > progress-ui');
     if (!this.#progressEl) {
       this.#progressEl = document.createElement('progress-ui');
+      // Pre-set value BEFORE append so progress-ui's first paint is
+      // determinate at the target value — `@starting-style { width: 0 }`
+      // in progress.css then transitions 0 → value on mount. Without this,
+      // the bar mounts indeterminate (width: 100% from the shimmer rule),
+      // and `render()` setting value: N triggers a backwards 100% → N
+      // animation, which reads as the bar shrinking right-to-left.
+      if (this.value != null && this.value >= 0) {
+        this.#progressEl.setAttribute('value', String(this.value));
+      }
       this.appendChild(this.#progressEl);
     }
   }