@adia-ai/web-components 0.0.22 → 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,3 +1,19 @@
+/* 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) {
     /* ── Tokens (wired to --a-ui-*) ── */
@@ -77,15 +93,7 @@
       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
@@ -176,7 +184,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/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/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

@@ -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,3 +1,33 @@
+/* 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) {
     /* ── Container ── */
@@ -134,43 +164,9 @@
   :scope:has(> [slot="icon"]) > :not([slot]) {
     grid-column: 3 / -1;
   }
-  :scope[checked] > :not([slot]) {
-    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);
-  }
-
-  /* ── 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,3 +1,24 @@
+/* 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);
+}
+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) {
     /* ── Layout ── (size scales with universal [size] attribute via --a-toggle-size) */
@@ -72,25 +93,7 @@
       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);
-  }
-
-  :scope:not([disabled]):hover [slot="dot"] {
-    border-color: var(--radio-border-hover);
-    background: var(--radio-bg-hover);
-  }
-
-  :scope[checked] [slot="dot"] {
-    background: var(--radio-bg-checked);
-    border-color: var(--radio-border-checked);
-  }
-
-  :scope[checked]:not([disabled]):hover [slot="dot"] {
-    background: var(--radio-bg-checked-hover);
-    border-color: var(--radio-bg-checked-hover);
-  }
+  /* 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/rating/rating.css

@@ -1,3 +1,10 @@
+/* Safari 17.x bug: `:scope:hover` inside `@scope` doesn't match the scope
+   root. Plain selector outside the @scope works. See
+   docs/BROWSER-COMPAT.md §3a. */
+rating-ui:hover [data-rating-symbol] {
+  color: var(--rating-fg-hover);
+}
+
 @scope (rating-ui) {
   :where(:scope) {
     /* ── Layout ── */
@@ -72,10 +79,6 @@
     clip-path: inset(0 0 0 0);
   }
 
-  :scope:hover [data-rating-symbol] {
-    color: var(--rating-fg-hover);
-  }
-
   /* ── Variants override TOKENS only ── */
   :scope[variant="accent"] {
     --rating-fg-filled: var(--a-accent-bg);

package/components/segment/segment.css

@@ -1,3 +1,13 @@
+/* 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) {
     /* ── Layout ── */
@@ -73,14 +83,7 @@
     white-space: nowrap;
   }
 
-  /* States */
-  :scope:not([disabled]):not([selected]):hover {
-    color: var(--segment-fg-hover);
-  }
-
-  :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,3 +1,23 @@
+/* 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);
+}
+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) {
     /* ── Layout ── */
@@ -66,19 +86,7 @@
       background var(--switch-duration) var(--switch-easing),
       border-color var(--switch-duration) var(--switch-easing);
   }
-  :scope:not([disabled]):hover {
-    --switch-track-bg: var(--switch-track-bg-hover);
-    --switch-track-border: var(--switch-track-border-hover);
-  }
-  :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);
-  }
-  :scope[checked]:not([disabled]):hover {
-    --switch-track-bg: var(--switch-track-bg-checked-hover);
-    --switch-track-border: var(--switch-track-border-checked-hover);
-  }
+  /* hover + [checked] rules moved outside @scope — see Safari 17.x bug note at top. */
 
   [slot="thumb"] {
     position: absolute;
@@ -93,9 +101,7 @@
       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/tag/tag.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. */
+tag-ui[removable]:not([disabled]):hover {
+  --tag-bg: var(--tag-bg-hover);
+}
+
 @scope (tag-ui) {
   :where(:scope) {
     /* ── Tokens ── */
@@ -75,10 +81,7 @@
 
   /* Size handled by universal [size] attribute system. */
 
-  /* ── Hover (only interactive/removable tags) ── */
-  :scope[removable]:not([disabled]):hover {
-    --tag-bg: var(--tag-bg-hover);
-  }
+  /* hover rule moved outside @scope — see Safari 17.x bug note at top. */
 
   /* ── Focus ── */
   :scope:focus-visible {

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,3 +1,12 @@
+/* Safari 17.x bug: `:scope:not(...):hover` inside `@scope` doesn't match
+   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);
+}
+
 @scope (toggle-group-ui) {
   :where(:scope) {
     /* ── Tokens ── */
@@ -69,10 +78,7 @@
     border-inline-start: var(--toggle-option-border-width) solid var(--toggle-option-border-color);
   }
 
-  :scope:not([disabled]):hover {
-    --toggle-option-bg: var(--toggle-option-bg-hover);
-    --toggle-option-fg: var(--toggle-option-fg-hover);
-  }
+  /* hover rule moved outside @scope — see Safari 17.x bug note at top. */
 
   :scope:focus-visible {
     outline: none;