@adia-ai/web-components 0.0.22 → 0.0.23

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/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/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/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-*) ── */
@@ -176,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/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/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/radio/radio.css

@@ -1,3 +1,15 @@
+/* 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. */
+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);
+}
+
 @scope (radio-ui) {
   :where(:scope) {
     /* ── Layout ── (size scales with universal [size] attribute via --a-toggle-size) */
@@ -77,21 +89,13 @@
     height: calc(var(--radio-size) * 0.6);
   }
 
-  :scope:not([disabled]):hover [slot="dot"] {
-    border-color: var(--radio-border-hover);
-    background: var(--radio-bg-hover);
-  }
+  /* 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);
   }
 
-  :scope[checked]:not([disabled]):hover [slot="dot"] {
-    background: var(--radio-bg-checked-hover);
-    border-color: var(--radio-bg-checked-hover);
-  }
-
   /* Label */
   :scope[label]::after { content: attr(label); }
 

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,10 @@
+/* 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. */
+segment-ui:not([disabled]):not([selected]):hover {
+  color: var(--segment-fg-hover);
+}
+
 @scope (segment-ui) {
   :where(:scope) {
     /* ── Layout ── */
@@ -73,11 +80,7 @@
     white-space: nowrap;
   }
 
-  /* States */
-  :scope:not([disabled]):not([selected]):hover {
-    color: var(--segment-fg-hover);
-  }
-
+  /* States — hover rule moved outside @scope; see Safari 17.x bug note at top. */
   :scope[selected] {
     color: var(--segment-fg-selected);
   }

package/components/switch/switch.css

@@ -1,3 +1,14 @@
+/* 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. */
+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);
+}
+
 @scope (switch-ui) {
   :where(:scope) {
     /* ── Layout ── */
@@ -66,19 +77,12 @@
       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);
-  }
+  /* 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);
   }
-  :scope[checked]:not([disabled]):hover {
-    --switch-track-bg: var(--switch-track-bg-checked-hover);
-    --switch-track-border: var(--switch-track-border-checked-hover);
-  }
 
   [slot="thumb"] {
     position: absolute;

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/toggle-group/toggle-group.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. */
+toggle-group-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 +77,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "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/app-nav.js

@@ -71,6 +71,7 @@ class AdiaAppNav extends AdiaElement {
     const item = e.target.closest('app-nav-item-ui');
     if (item && this.contains(item)) {
       this.select(item);
+      this.#flushHoverState();
       return;
     }
 
@@ -88,6 +89,18 @@ class AdiaAppNav extends AdiaElement {
     }
   };
 
+  // Safari macOS leaves `:hover` stuck on items the cursor passed through
+  // when the DOM mutates during click+route navigation (no `mouseleave`
+  // fires). Toggling pointer-events on the container forces Safari to
+  // re-evaluate hover state on next paint without flickering layout.
+  // Documented in docs/BROWSER-COMPAT.md §3a.
+  #flushHoverState() {
+    this.style.pointerEvents = 'none';
+    requestAnimationFrame(() => {
+      this.style.pointerEvents = '';
+    });
+  }
+
   disconnected() {
     this.removeEventListener('click', this.#onClick);
     this.#ro?.disconnect();

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

@@ -1,3 +1,18 @@
+/* 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. */
+app-nav-item-ui:hover {
+  background: var(--nav-item-bg-hover);
+  color: var(--nav-item-fg-hover);
+}
+app-nav-item-ui:hover [slot="icon"] {
+  color: var(--nav-item-fg-hover);
+}
+
 @scope (app-nav-item-ui) {
   :where(:scope) {
     --nav-item-accent:          var(--a-accent);
@@ -40,15 +55,6 @@
     outline: none;
   }
 
-  :scope:hover {
-    background: var(--nav-item-bg-hover);
-    color: var(--nav-item-fg-hover);
-  }
-
-  :scope:hover [slot="icon"] {
-    color: var(--nav-item-fg-hover);
-  }
-
   :scope:focus-visible {
     background: var(--nav-item-bg-hover);
     color: var(--nav-item-fg-hover);

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

@@ -1,3 +1,16 @@
+/* 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` rule
+   is split — `:hover` moves out, `:focus-visible` stays. See
+   docs/BROWSER-COMPAT.md §3a. */
+section-nav-item-ui:hover:not([disabled]) {
+  background: var(--section-nav-item-bg-hover);
+  color: var(--section-nav-item-fg-hover);
+}
+section-nav-item-ui:hover:not([disabled]) > icon-ui {
+  color: var(--section-nav-item-fg-hover);
+}
+
 @scope (section-nav-item-ui) {
   :where(:scope) {
     --section-nav-item-row-height:   var(--a-size);
@@ -58,12 +71,10 @@
     text-overflow: ellipsis;
   }
 
-  :scope:hover:not([disabled]),
   :scope:focus-visible:not([disabled]) {
     background: var(--section-nav-item-bg-hover);
     color: var(--section-nav-item-fg-hover);
   }
-  :scope:hover:not([disabled]) > icon-ui,
   :scope:focus-visible:not([disabled]) > icon-ui {
     color: var(--section-nav-item-fg-hover);
   }