@adia-ai/web-components 0.0.22 → 0.0.24

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.22",
+  "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/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,33 @@
+/* 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);
+}
+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) {
     --nav-item-accent:          var(--a-accent);
@@ -40,30 +70,13 @@
     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);
     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"] {
@@ -81,14 +94,7 @@
     --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;

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

@@ -1,3 +1,33 @@
+/* Safari 17.x bug: `:scope:hover` (Flavor A) and `:scope[selected]`
+   (Flavor B — attribute-removal restyle) both fail inside `@scope`.
+   Selectors moved out. `:focus-visible` matches correctly inside `@scope`,
+   so the combined `:hover, :focus-visible` rule was 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);
+}
+section-nav-item-ui[selected] {
+  background: var(--section-nav-item-bg-selected);
+  color: var(--section-nav-item-fg-selected);
+  font-weight: var(--section-nav-item-selected-weight);
+}
+section-nav-item-ui[selected] > icon-ui {
+  color: var(--section-nav-item-icon-fg-selected);
+}
+section-nav-item-ui[selected]:not(:has(> icon-ui))::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: calc(var(--section-nav-item-row-px) - var(--a-space-1));
+  inset-block: 25%;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--section-nav-item-accent);
+}
+
 @scope (section-nav-item-ui) {
   :where(:scope) {
     --section-nav-item-row-height:   var(--a-size);
@@ -58,35 +88,15 @@
     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);
   }
 
-  :scope[selected] {
-    background: var(--section-nav-item-bg-selected);
-    color: var(--section-nav-item-fg-selected);
-    font-weight: var(--section-nav-item-selected-weight);
-  }
-  :scope[selected] > icon-ui {
-    color: var(--section-nav-item-icon-fg-selected);
-  }
-
-  /* Selected accent bar — shown only when no leading icon */
-  :scope[selected]:not(:has(> icon-ui))::before {
-    content: '';
-    position: absolute;
-    inset-inline-start: calc(var(--section-nav-item-row-px) - var(--a-space-1));
-    inset-block: 25%;
-    width: 2px;
-    border-radius: 1px;
-    background: var(--section-nav-item-accent);
-  }
+  /* :scope[selected] rules moved outside @scope — see Safari 17.x bug note at top. */
 
   :scope[disabled] {
     color: var(--section-nav-item-fg-disabled);