@adia-ai/web-components 0.0.22 → 0.0.24

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,30 @@
+/* Safari 17.x bug: `:scope:state` and `:scope[attr]:state` inside `@scope`
+   don'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:active { transform: scale(0.97); }
+
+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);
@@ -93,7 +120,7 @@
     line-height: 1;
   }
 
-  :scope:active { transform: scale(0.97); }
+  /* :scope:active moved outside @scope — see Safari 17.x bug note at top. */
   :scope:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }
 
   /* ── Variants (rest state) ── */
@@ -136,30 +163,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,35 @@
+/* Safari 17.x bug: `:scope*:hover` and `:scope[dyn-attr]` inside `@scope`
+   don't match (Flavor A) or don't restyle on attribute removal (Flavor B).
+   For [checked] / [indeterminate], when JS toggles the attribute off,
+   Safari leaves the visual stuck — selectors moved out as plain
+   `tagname[attr]` rules. 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);
+}
+check-ui[checked] [slot="box"],
+check-ui[indeterminate] [slot="box"] {
+  background: var(--check-bg-checked);
+  border-color: var(--check-border-checked);
+}
+check-ui[checked] {
+  --_icon-w:         calc(var(--check-size) * 0.3);
+  --_icon-h:         calc(var(--check-size) * 0.55);
+  --_icon-border:    solid var(--check-fg-checked);
+  --_icon-bw:        0 calc(var(--check-size) * 0.12) calc(var(--check-size) * 0.12) 0;
+  --_icon-transform: rotate(45deg) translate(-1px, -1px);
+}
+check-ui[indeterminate] {
+  --_dash-bg: var(--check-fg-checked);
+  --_icon-w:  calc(var(--check-size) * 0.5);
+  --_icon-h:  calc(var(--check-size) * 0.12);
+}
+
 @scope (check-ui) {
   :where(:scope) {
     /* ── Tokens ── (size scales with universal [size] attribute via --a-toggle-size) */
@@ -83,38 +115,8 @@
     background: var(--_dash-bg);
   }
 
-  :scope:not([disabled]):hover [slot="box"] {
-    border-color: var(--check-border-hover);
-    background: var(--check-bg-hover);
-  }
-
-  /* Checked — CSS border checkmark */
-  :scope[checked] [slot="box"],
-  :scope[indeterminate] [slot="box"] {
-    background: var(--check-bg-checked);
-    border-color: var(--check-border-checked);
-  }
-
-  :scope[checked] {
-    --_icon-w:         calc(var(--check-size) * 0.3);
-    --_icon-h:         calc(var(--check-size) * 0.55);
-    --_icon-border:    solid var(--check-fg-checked);
-    --_icon-bw:        0 calc(var(--check-size) * 0.12) calc(var(--check-size) * 0.12) 0;
-    --_icon-transform: rotate(45deg) translate(-1px, -1px);
-  }
-
-  /* Indeterminate — horizontal dash */
-  :scope[indeterminate] {
-    --_dash-bg: var(--check-fg-checked);
-    --_icon-w:  calc(var(--check-size) * 0.5);
-    --_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);
-  }
+  /* hover rules + [checked]/[indeterminate] state rules moved outside @scope —
+     see Safari 17.x bug note at top. */
 
   /* Label */
   :scope[label]::after { content: attr(label); }