@adia-ai/web-components 0.0.23 → 0.0.24

package/components/drawer/drawer.js

@@ -36,7 +36,6 @@ class AdiaDrawer extends AdiaElement {
   #closing = false;
   #previousFocus = null;
   #closeTimer = null;
-  #openRaf = null;
   #dialogRef = null;
 
   static properties = {
@@ -60,6 +59,28 @@ class AdiaDrawer extends AdiaElement {
   // html`` result would trigger stamp() → replaceChildren(), wiping authored
   // [slot=header|body|footer] before render() can migrate them into the panel.
 
+  constructor() {
+    super();
+    // Safari requires <dialog>.showModal() to be invoked synchronously inside
+    // the click handler. The reactive system schedules render() in a microtask
+    // after the property change, which Safari treats as outside the user-gesture
+    // window and silently no-ops the showModal. Wrap the auto-installed `open`
+    // setter so dialog state syncs in the same synchronous frame as the
+    // assignment. See docs/BROWSER-COMPAT.md §3a (Flavor C).
+    const desc = Object.getOwnPropertyDescriptor(this, 'open');
+    if (desc?.set) {
+      const origSet = desc.set;
+      Object.defineProperty(this, 'open', {
+        get: desc.get,
+        set: (v) => {
+          origSet.call(this, v);
+          this.#syncDialog();
+        },
+        configurable: true,
+      });
+    }
+  }
+
   #onPress = (e) => {
     if (e.target.closest('[slot="close"]')) this.open = false;
   };
@@ -101,10 +122,6 @@ class AdiaDrawer extends AdiaElement {
       this.#dialogRef.removeEventListener('close', this.#onDialogClose);
       this.#dialogRef.removeEventListener('click', this.#onDialogClick);
     }
-    if (this.#openRaf != null) {
-      cancelAnimationFrame(this.#openRaf);
-      this.#openRaf = null;
-    }
     if (this.#closeTimer != null) {
       clearTimeout(this.#closeTimer);
       this.#closeTimer = null;
@@ -228,15 +245,26 @@ class AdiaDrawer extends AdiaElement {
       if (userFooter.parentElement !== panel) panel.appendChild(userFooter);
     }
 
-    // Sync open state
+    // Sync open state — also syncs synchronously from the `open` setter
+    // (see constructor) so showModal() runs in the click handler's gesture
+    // frame on Safari.
+    this.#syncDialog();
+  }
+
+  #syncDialog() {
+    const dialog = this.#dialogRef;
+    if (!dialog) return;
     if (this.open && !dialog.open) {
       this.#closing = false;
       this.#previousFocus = document.activeElement;
       dialog.showModal();
-      this.#openRaf = requestAnimationFrame(() => {
-        this.#openRaf = null;
-        dialog.setAttribute('data-open', '');
-      });
+      // Synchronous reflow instead of rAF — Safari throttles
+      // requestAnimationFrame when a top-layer dialog is open, sometimes
+      // delaying [data-open] (and the slide-in transition) by tens of
+      // seconds. Forcing a reflow keeps the animation start in the same
+      // synchronous frame. See docs/BROWSER-COMPAT.md §3a (Flavor C).
+      void dialog.offsetHeight;
+      dialog.setAttribute('data-open', '');
     } else if (!this.open && dialog.open && !this.#closing) {
       this.#animateClose(dialog);
     }
@@ -244,8 +272,13 @@ class AdiaDrawer extends AdiaElement {
 
   #animateClose(dialog) {
     this.#closing = true;
-    dialog.removeAttribute('data-open');
+    // Set [data-closing] FIRST (carries the transition spec), force a
+    // reflow, THEN remove [data-open]. If both attribute changes batch
+    // into a single style update, Safari can skip the slide-out animation
+    // entirely.
     dialog.setAttribute('data-closing', '');
+    void dialog.offsetHeight;
+    dialog.removeAttribute('data-open');
 
     this.#closeTimer = setTimeout(() => {
       this.#closeTimer = null;

package/components/input/input.css

@@ -1,8 +1,18 @@
-/* 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. */
+/* Safari 17.x bug: `:scope[attr]:hover` and `:scope:not(...) [descendant]:hover`
+   inside `@scope` don't match the scope root. Plain selectors outside work.
+   See docs/BROWSER-COMPAT.md §3a. */
 input-ui[variant="ghost"]:hover {
   --input-bg: var(--a-bg-muted);
 }
+input-ui:not([disabled]) [slot="field"]:hover {
+  background: var(--input-bg-hover);
+  border-color: var(--input-border-hover);
+  color: var(--input-fg-hover);
+}
+input-ui:not([disabled]) [slot="field"]:hover [slot="prefix"],
+input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
+  color: var(--input-affix-fg-hover);
+}
 
 @scope (input-ui) {
   :where(:scope) {
@@ -83,15 +93,7 @@ input-ui[variant="ghost"]:hover {
       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);
-    border-color: var(--input-border-hover);
-    color: var(--input-fg-hover);
-  }
-  :scope:not([disabled]) [slot="field"]:hover [slot="prefix"],
-  :scope:not([disabled]) [slot="field"]:hover [slot="suffix"] {
-    color: var(--input-affix-fg-hover);
-  }
+  /* hover rules moved outside @scope — see Safari 17.x bug note at top. */
   :scope:not([disabled]):focus-within [slot="field"] {
     /* Canonical ring — consumes the L3 --input-focus-ring token
        which aliases --a-focus-ring. Border stays stable; the ring

package/components/kbd/kbd.css

@@ -8,7 +8,7 @@
     --kbd-font:      var(--a-font-family-code);
 
     /* Size — defaults to md */
-    --kbd-font-size: var(--a-ui-sm);
+    --kbd-font-size: var(--a-ui-tiny);
     --kbd-height:    1.25rem;
     --kbd-min-width: 1.25rem;
     --kbd-px:        var(--a-space-1);

package/components/modal/modal.js

@@ -36,7 +36,6 @@ class AdiaModal extends AdiaElement {
   #closing = false;
   #previousFocus = null;
   #closeTimer = null;
-  #openRaf = null;
   #dialogRef = null;
 
   static properties = {
@@ -101,10 +100,6 @@ class AdiaModal extends AdiaElement {
       this.#dialogRef.removeEventListener('close', this.#onDialogClose);
       this.#dialogRef.removeEventListener('click', this.#onDialogClick);
     }
-    if (this.#openRaf != null) {
-      cancelAnimationFrame(this.#openRaf);
-      this.#openRaf = null;
-    }
     if (this.#closeTimer != null) {
       clearTimeout(this.#closeTimer);
       this.#closeTimer = null;
@@ -185,15 +180,16 @@ class AdiaModal extends AdiaElement {
       if (footer.parentElement !== panel) panel.appendChild(footer);
     }
 
-    // Sync open state
+    // Sync open state. Synchronous reflow instead of rAF — Safari throttles
+    // requestAnimationFrame when a top-layer dialog is open, sometimes
+    // delaying [data-open] (and the scale-in transition) by tens of seconds.
+    // See docs/BROWSER-COMPAT.md §3a (Flavor C).
     if (this.open && !dialog.open) {
       this.#closing = false;
       this.#previousFocus = document.activeElement;
       dialog.showModal();
-      this.#openRaf = requestAnimationFrame(() => {
-        this.#openRaf = null;
-        dialog.setAttribute('data-open', '');
-      });
+      void dialog.offsetHeight;
+      dialog.setAttribute('data-open', '');
     } else if (!this.open && dialog.open && !this.#closing) {
       this.#animateClose(dialog);
     }
@@ -201,8 +197,13 @@ class AdiaModal extends AdiaElement {
 
   #animateClose(dialog) {
     this.#closing = true;
-    dialog.removeAttribute('data-open');
+    // Set [data-closing] FIRST (carries the transition spec), force a
+    // reflow, THEN remove [data-open]. If both attribute changes batch
+    // into a single style update, Safari can skip the fade-out animation
+    // entirely.
     dialog.setAttribute('data-closing', '');
+    void dialog.offsetHeight;
+    dialog.removeAttribute('data-open');
 
     this.#closeTimer = setTimeout(() => {
       this.#closeTimer = null;

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

@@ -1,10 +1,32 @@
-/* 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. */
+/* Safari 17.x bug: `:scope:not(...):hover` (Flavor A) and `:scope[checked]`
+   (Flavor B — attribute-removal restyle) both fail inside `@scope`.
+   Selectors moved out. 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);
 }
+option-card-ui[checked] > :not([slot]) {
+  display: block;
+}
+option-card-ui[checked] {
+  background: var(--option-card-bg-checked);
+  border-color: var(--option-card-border-checked);
+}
+option-card-ui[checked]::before {
+  border-color: var(--option-card-radio-fill);
+  background:
+    radial-gradient(
+      circle,
+      var(--option-card-radio-dot) 0 30%,
+      var(--option-card-radio-fill) 30% 100%
+    );
+}
+option-card-ui[checked] > [slot="heading"] {
+  color: var(--option-card-heading-color-checked);
+}
+option-card-ui[checked] > [slot="icon"] {
+  color: var(--option-card-icon-color-checked);
+}
 
 @scope (option-card-ui) {
   :where(:scope) {
@@ -142,39 +164,9 @@ option-card-ui:not([checked]):not([disabled]):hover {
   :scope:has(> [slot="icon"]) > :not([slot]) {
     grid-column: 3 / -1;
   }
-  :scope[checked] > :not([slot]) {
-    display: block;
-  }
-
-  /* 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
-       --option-card-radio-dot at 60% of the size, mirroring
-       radio-ui's recipe (radio.css:75-78). Done with a radial
-       gradient so a single pseudo-element carries both layers. */
-  :scope[checked] {
-    background: var(--option-card-bg-checked);
-    border-color: var(--option-card-border-checked);
-  }
-  :scope[checked]::before {
-    border-color: var(--option-card-radio-fill);
-    background:
-      radial-gradient(
-        circle,
-        var(--option-card-radio-dot) 0 30%,
-        var(--option-card-radio-fill) 30% 100%
-      );
-  }
-  /* Heading + icon shift to a strong color when checked — gives the
-     selected card a clear text-level emphasis on top of the bg/border
-     state, so picking is unambiguous beyond the radio dot alone. */
-  :scope[checked] > [slot="heading"] {
-    color: var(--option-card-heading-color-checked);
-  }
-  :scope[checked] > [slot="icon"] {
-    color: var(--option-card-icon-color-checked);
-  }
+  /* hover + [checked] state rules moved outside @scope — see Safari 17.x bug note at top.
+     The :scope[checked]::before recipe lives at top-of-file: an accent disc
+     with a centered dot via radial-gradient, mirroring radio-ui's recipe. */
 
   /* ── Layout: tile — icon top-left, indicator top-right, heading +
        description below, all left-aligned. Used for hero pickers

package/components/radio/radio.css

@@ -1,6 +1,7 @@
-/* Safari 17.x bug: `:scope*:hover [descendant]` inside `@scope` doesn't
-   match the scope root. The entire selector (including the descendant)
-   moves out together. See docs/BROWSER-COMPAT.md §3a. */
+/* Safari 17.x bug: `:scope*:hover [descendant]` (Flavor A) and
+   `:scope[checked] [descendant]` (Flavor B — attribute-removal restyle)
+   both fail inside `@scope`. Selectors moved out. See
+   docs/BROWSER-COMPAT.md §3a. */
 radio-ui:not([disabled]):hover [slot="dot"] {
   border-color: var(--radio-border-hover);
   background: var(--radio-bg-hover);
@@ -9,6 +10,14 @@ radio-ui[checked]:not([disabled]):hover [slot="dot"] {
   background: var(--radio-bg-checked-hover);
   border-color: var(--radio-bg-checked-hover);
 }
+radio-ui[checked] [slot="dot"] {
+  background: var(--radio-bg-checked);
+  border-color: var(--radio-border-checked);
+}
+radio-ui[checked] [slot="dot"]::after {
+  width: calc(var(--radio-size) * 0.6);
+  height: calc(var(--radio-size) * 0.6);
+}
 
 @scope (radio-ui) {
   :where(:scope) {
@@ -84,17 +93,7 @@ radio-ui[checked]:not([disabled]):hover [slot="dot"] {
       height var(--radio-duration) var(--radio-easing);
   }
 
-  :scope[checked] [slot="dot"]::after {
-    width: calc(var(--radio-size) * 0.6);
-    height: calc(var(--radio-size) * 0.6);
-  }
-
-  /* hover rules moved outside @scope — see Safari 17.x bug note at top. */
-
-  :scope[checked] [slot="dot"] {
-    background: var(--radio-bg-checked);
-    border-color: var(--radio-border-checked);
-  }
+  /* hover + [checked] rules moved outside @scope — see Safari 17.x bug note at top. */
 
   /* Label */
   :scope[label]::after { content: attr(label); }

package/components/range/range.css

@@ -1,3 +1,10 @@
+/* Safari 17.x bug: `:scope:not(...) [descendant]:hover` inside `@scope`
+   doesn't match the scope root. Plain selector outside works. See
+   docs/BROWSER-COMPAT.md §3a. */
+range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
+  background: var(--range-fill-bg-hover);
+}
+
 @scope (range-ui) {
   :where(:scope) {
     /* ── Tokens (wired to --a-ui-*) ── */
@@ -127,10 +134,7 @@
     color: var(--range-label-fg-hover);
   }
 
-  /* Hover: brighten the fill */
-  :scope:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
-    background: var(--range-fill-bg-hover);
-  }
+  /* Hover-fill brighten moved outside @scope — see Safari 17.x bug note at top. */
 
   /* Dragging: deepest fill, sharper border, instant (no transition lag on the clip) */
   :scope[data-dragging] [slot="field"] {

package/components/segment/segment.css

@@ -1,9 +1,12 @@
-/* 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. */
+/* Safari 17.x bug: `:scope:not(...):hover` (Flavor A) and `:scope[selected]`
+   (Flavor B — attribute-removal restyle) both fail inside `@scope`.
+   Selectors moved out. See docs/BROWSER-COMPAT.md §3a. */
 segment-ui:not([disabled]):not([selected]):hover {
   color: var(--segment-fg-hover);
 }
+segment-ui[selected] {
+  color: var(--segment-fg-selected);
+}
 
 @scope (segment-ui) {
   :where(:scope) {
@@ -80,10 +83,7 @@ segment-ui:not([disabled]):not([selected]):hover {
     white-space: nowrap;
   }
 
-  /* States — hover rule moved outside @scope; see Safari 17.x bug note at top. */
-  :scope[selected] {
-    color: var(--segment-fg-selected);
-  }
+  /* States — hover + [selected] rules moved outside @scope; see Safari 17.x bug note at top. */
 
   :scope:focus-visible {
     outline: none;

package/components/switch/switch.css

@@ -1,5 +1,6 @@
-/* Safari 17.x bug: `:scope[attr]:hover` inside `@scope` doesn't match the
-   scope root. Plain selectors outside work. See docs/BROWSER-COMPAT.md §3a. */
+/* Safari 17.x bug: `:scope[attr]:hover` (Flavor A) and `:scope[checked]`
+   token-block (Flavor B — attribute-removal restyle) both fail inside
+   `@scope`. Selectors moved out. See docs/BROWSER-COMPAT.md §3a. */
 switch-ui:not([disabled]):hover {
   --switch-track-bg: var(--switch-track-bg-hover);
   --switch-track-border: var(--switch-track-border-hover);
@@ -8,6 +9,14 @@ switch-ui[checked]:not([disabled]):hover {
   --switch-track-bg: var(--switch-track-bg-checked-hover);
   --switch-track-border: var(--switch-track-border-checked-hover);
 }
+switch-ui[checked] {
+  --switch-track-bg: var(--switch-track-bg-checked);
+  --switch-track-border: var(--switch-track-border-checked);
+  --switch-thumb-bg: var(--switch-thumb-bg-checked);
+}
+switch-ui[checked] [slot="thumb"] {
+  transform: translateX(var(--switch-thumb-travel));
+}
 
 @scope (switch-ui) {
   :where(:scope) {
@@ -77,12 +86,7 @@ switch-ui[checked]:not([disabled]):hover {
       background var(--switch-duration) var(--switch-easing),
       border-color var(--switch-duration) var(--switch-easing);
   }
-  /* hover rules moved outside @scope — see Safari 17.x bug note at top. */
-  :scope[checked] {
-    --switch-track-bg: var(--switch-track-bg-checked);
-    --switch-track-border: var(--switch-track-border-checked);
-    --switch-thumb-bg: var(--switch-thumb-bg-checked);
-  }
+  /* hover + [checked] rules moved outside @scope — see Safari 17.x bug note at top. */
 
   [slot="thumb"] {
     position: absolute;
@@ -97,9 +101,7 @@ switch-ui[checked]:not([disabled]):hover {
       transform  var(--switch-duration) var(--switch-easing),
       background var(--switch-duration) var(--switch-easing);
   }
-  :scope[checked] [slot="thumb"] {
-    transform: translateX(var(--switch-thumb-travel));
-  }
+  /* :scope[checked] [slot="thumb"] moved outside @scope — see Safari 17.x bug note at top. */
 
   [slot="label"] { font-size: var(--switch-font-size); }
 

package/components/textarea/textarea.css

@@ -1,3 +1,12 @@
+/* Safari 17.x bug: `:scope:not(...) [descendant]:hover` inside `@scope`
+   doesn't match the scope root. Plain selector outside works. See
+   docs/BROWSER-COMPAT.md §3a. */
+textarea-ui:not([disabled]) [slot="text"]:hover {
+  background: var(--textarea-bg-hover);
+  border-color: var(--textarea-border-hover);
+  color: var(--textarea-fg-hover);
+}
+
 @scope (textarea-ui) {
   :where(:scope) {
     /* ── Tokens (wired to --a-ui-*) ── */
@@ -66,11 +75,7 @@
     outline: none;
     transition: border-color var(--textarea-duration) var(--textarea-easing);
   }
-  :scope:not([disabled]) [slot="text"]:hover {
-    background: var(--textarea-bg-hover);
-    border-color: var(--textarea-border-hover);
-    color: var(--textarea-fg-hover);
-  }
+  /* hover rule moved outside @scope — see Safari 17.x bug note at top. */
   :scope:not([disabled]) [slot="text"]:focus {
     /* Canonical ring via L3 token (see semantics.css FOCUS block).
        `:focus` (not :focus-visible) is deliberate — the caret lives

package/components/toast/toast.css

@@ -2,6 +2,31 @@
    TOAST-N — Notification popup with auto-dismiss.
    ═══════════════════════════════════════════════════════════════ */
 
+/* Safari 17.x bug: `:scope[data-open]` and `:scope[data-closing]`
+   (Flavor B — attribute-removal restyle) don't reliably restyle on
+   attribute toggling inside `@scope`. Selectors moved out as plain
+   `toast-ui[data-…]` rules. See docs/BROWSER-COMPAT.md §3a. */
+toast-ui[data-open] {
+  transition: transform var(--toast-duration) var(--toast-easing),
+              opacity var(--toast-duration) var(--toast-easing);
+  transform: translateY(0);
+  opacity: 1;
+}
+toast-ui[data-closing] {
+  transition: transform var(--toast-duration) var(--toast-easing),
+              opacity var(--toast-duration) var(--toast-easing);
+  opacity: 0;
+}
+toast-ui[data-closing],
+toast-ui[data-closing][position="bottom-right"],
+toast-ui[data-closing][position="bottom-left"] {
+  transform: translateY(1rem);
+}
+toast-ui[data-closing][position="top-right"],
+toast-ui[data-closing][position="top-left"] {
+  transform: translateY(-1rem);
+}
+
 @scope (toast-ui) {
   :where(:scope) {
     --toast-bg:       var(--a-bg-subtle);
@@ -78,32 +103,8 @@
     transform: translateY(-1rem);
   }
 
-  /* ── Enter animation ── */
-
-  :scope[data-open] {
-    transition: transform var(--toast-duration) var(--toast-easing),
-                opacity var(--toast-duration) var(--toast-easing);
-    transform: translateY(0);
-    opacity: 1;
-  }
-
-  /* ── Exit animation ── */
-
-  :scope[data-closing] {
-    transition: transform var(--toast-duration) var(--toast-easing),
-                opacity var(--toast-duration) var(--toast-easing);
-    opacity: 0;
-  }
-
-  :where(:scope[data-closing]),
-  :where(:scope[data-closing][position="bottom-right"]),
-  :where(:scope[data-closing][position="bottom-left"]) {
-    transform: translateY(1rem);
-  }
-  :where(:scope[data-closing][position="top-right"]),
-  :where(:scope[data-closing][position="top-left"]) {
-    transform: translateY(-1rem);
-  }
+  /* Enter / exit animation rules ([data-open] / [data-closing]) moved
+     outside @scope — see Safari 17.x bug note at top of file. */
 
   /* ── Variant: info (default) ── */
 

package/components/toggle-group/toggle-group.css

@@ -1,7 +1,8 @@
 /* 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. */
-toggle-group-ui:not([disabled]):hover {
+   the scope root. Plain selector outside works. The @scope is
+   `(toggle-option-ui)` — NOT `(toggle-group-ui)` — so the moved-out
+   selector targets `toggle-option-ui:hover`. See docs/BROWSER-COMPAT.md §3a. */
+toggle-option-ui:not([disabled]):hover {
   --toggle-option-bg: var(--toggle-option-bg-hover);
   --toggle-option-fg: var(--toggle-option-fg-hover);
 }

package/components/tree/tree.css

@@ -90,10 +90,7 @@
     box-shadow: var(--tree-focus-ring);
   }
 
-  :scope[selected] > [slot="row"] {
-    background: var(--tree-bg-selected);
-    color: var(--tree-fg);
-  }
+  /* :scope[selected] rules moved outside @scope — see tree-ui Safari note at end of file. */
 
   /* ── Chevron ── */
   [slot="chevron"] {
@@ -120,9 +117,7 @@
     flex-shrink: 0;
   }
 
-  :scope[selected] > [slot="row"] [slot="icon"] {
-    color: var(--tree-fg);
-  }
+  /* :scope[selected] icon override moved outside @scope — see Safari note at end of file. */
 
   /* ── Text ── */
   [slot="text"] {
@@ -142,13 +137,30 @@
     transition: opacity var(--tree-duration) var(--tree-easing);
   }
 
-  [slot="row"]:hover [slot="actions"],
-  :scope[selected] > [slot="row"] [slot="actions"] {
+  [slot="row"]:hover [slot="actions"] {
     opacity: 1;
   }
+  /* :scope[selected] > [slot="row"] [slot="actions"] moved outside @scope. */
 
   /* ── Children — collapsed state ── */
   :scope:not([open]) > tree-item-ui {
     display: none;
   }
 }
+
+/* Safari 17.x bug: `:scope[selected]` (Flavor B — attribute-removal restyle)
+   doesn't restyle on attribute removal inside `@scope`. Selectors moved
+   out as plain `tree-ui[selected] …` rules (the @scope is `(tree-ui)`, so
+   `:scope` resolved to `tree-ui`). Custom-property tokens from
+   `:where(:scope)` still resolve via inheritance. See
+   docs/BROWSER-COMPAT.md §3a. */
+tree-ui[selected] > [slot="row"] {
+  background: var(--tree-bg-selected);
+  color: var(--tree-fg);
+}
+tree-ui[selected] > [slot="row"] [slot="icon"] {
+  color: var(--tree-fg);
+}
+tree-ui[selected] > [slot="row"] [slot="actions"] {
+  opacity: 1;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
   "type": "module",
   "exports": {

package/patterns/app-nav-item/app-nav-item.css

@@ -1,10 +1,10 @@
-/* Safari 17.x bug: `:scope:hover` inside `@scope` doesn't match the scope
-   root. Plain selector outside the @scope works — custom props from the
-   `:where(:scope)` block are still set on the element via inheritance, so
-   `var(--token)` lookups resolve correctly. Specificity (0,1,1) is
-   preserved. Safari < 18 is below the §1 floor (ADR-0007); this fix
-   protects opt-in consumers extending the floor downward and is
-   harmlessly redundant on engines without the bug. */
+/* Safari 17.x bug: `:scope:hover` (Flavor A) and `:scope[selected]`
+   (Flavor B — attribute-removal restyle) both fail inside `@scope`.
+   Selectors moved out — custom props from `:where(:scope)` are still set
+   on the element via inheritance. Specificity (0,1,1 / 0,2,1) preserved.
+   Safari < 18 is below the §1 floor (ADR-0007); fix protects opt-in
+   consumers extending below the floor and is harmlessly redundant on
+   engines without the bug. */
 app-nav-item-ui:hover {
   background: var(--nav-item-bg-hover);
   color: var(--nav-item-fg-hover);
@@ -12,6 +12,21 @@ app-nav-item-ui:hover {
 app-nav-item-ui:hover [slot="icon"] {
   color: var(--nav-item-fg-hover);
 }
+app-nav-item-ui[selected] {
+  background: var(--nav-item-bg-selected);
+  color: var(--nav-item-fg-selected);
+  font-weight: var(--nav-item-selected-weight);
+}
+app-nav-item-ui[selected] [slot="icon"] {
+  color: var(--nav-item-icon-fg-selected);
+}
+app-nav-item-ui[selected] [slot="icon"]:empty::before {
+  content: '';
+  width: 2px;
+  height: 1em;
+  border-radius: 1px;
+  background: var(--nav-item-accent);
+}
 
 @scope (app-nav-item-ui) {
   :where(:scope) {
@@ -61,15 +76,7 @@ app-nav-item-ui:hover [slot="icon"] {
     outline: none;
   }
 
-  :scope[selected] {
-    background: var(--nav-item-bg-selected);
-    color: var(--nav-item-fg-selected);
-    font-weight: var(--nav-item-selected-weight);
-  }
-
-  :scope[selected] [slot="icon"] {
-    color: var(--nav-item-icon-fg-selected);
-  }
+  /* :scope[selected] rules moved outside @scope — see Safari 17.x bug note at top. */
 
   /* Icon slot — always present, reserves space even when empty */
   [slot="icon"] {
@@ -87,14 +94,7 @@ app-nav-item-ui:hover [slot="icon"] {
     --a-icon-size: calc(var(--nav-item-icon-font-size) + 2px);
   }
 
-  /* Selected accent line — shown on empty icon slot */
-  :scope[selected] [slot="icon"]:empty::before {
-    content: '';
-    width: 2px;
-    height: 1em;
-    border-radius: 1px;
-    background: var(--nav-item-accent);
-  }
+  /* Selected accent line on empty icon slot moved outside @scope — see Safari 17.x bug note at top. */
 
   [slot="text"] {
     flex: 1;