@adia-ai/web-components 0.0.21 → 0.0.23

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/richtext/richtext.css

@@ -128,6 +128,29 @@
     margin: var(--richtext-h4-margin-top) 0 var(--richtext-h4-margin-bottom);
   }
 
+  [data-richtext-body] h5 {
+    font-size: var(--richtext-body-size);
+    font-weight: var(--richtext-h4-weight);
+    color: var(--richtext-fg-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin: var(--richtext-h4-margin-top) 0 var(--richtext-h4-margin-bottom);
+  }
+
+  [data-richtext-body] h6 {
+    font-size: var(--richtext-code-size);
+    font-weight: var(--richtext-h4-weight);
+    color: var(--richtext-fg-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    margin: var(--richtext-h4-margin-top) 0 var(--richtext-h4-margin-bottom);
+  }
+
+  /* First-element rhythm reset — first heading shouldn't push content
+     down with its top margin (already controlled at the body inset). */
+  [data-richtext-body] > :first-child { margin-top: 0; }
+  [data-richtext-body] > :last-child { margin-bottom: 0; }
+
   /* ── Body text ── */
 
   [data-richtext-body] p {
@@ -180,6 +203,112 @@
     margin-bottom: var(--richtext-li-margin-bottom);
   }
 
+  /* Nested lists — collapse the vertical block margin so children
+     don't add a full paragraph gap before/after the parent <li>. */
+  [data-richtext-body] li > ul,
+  [data-richtext-body] li > ol {
+    margin-block: var(--a-space-1);
+  }
+
+  /* ── Definition lists ── */
+  [data-richtext-body] dl {
+    margin: var(--richtext-list-my) 0;
+  }
+  [data-richtext-body] dt {
+    font-weight: var(--richtext-strong-weight);
+    color: var(--richtext-fg);
+    margin-top: var(--a-space-2);
+  }
+  [data-richtext-body] dd {
+    margin: 0 0 var(--richtext-li-margin-bottom) var(--richtext-list-indent);
+    color: var(--richtext-fg-muted);
+  }
+
+  /* ── Blockquote ── */
+  [data-richtext-body] blockquote {
+    margin: var(--richtext-block-my) 0;
+    padding: var(--a-space-1) var(--a-space-4);
+    border-inline-start: 3px solid var(--richtext-border);
+    color: var(--richtext-fg-muted);
+    font-style: italic;
+  }
+  [data-richtext-body] blockquote > :last-child { margin-bottom: 0; }
+
+  /* ── Inline emphasis & semantic glyphs ── */
+  [data-richtext-body] mark {
+    background: var(--a-warning-muted, var(--richtext-code-bg));
+    color: inherit;
+    padding: 0 0.2em;
+    border-radius: var(--richtext-code-radius);
+  }
+  [data-richtext-body] del,
+  [data-richtext-body] s {
+    color: var(--richtext-fg-muted);
+    text-decoration: line-through;
+  }
+  [data-richtext-body] kbd {
+    font-family: var(--richtext-font-code);
+    font-size: 0.85em;
+    background: var(--richtext-code-bg);
+    border: 1px solid var(--richtext-border);
+    border-bottom-width: 2px;
+    border-radius: var(--richtext-code-radius);
+    padding: 0.05em 0.4em;
+    box-shadow: inset 0 -1px 0 var(--richtext-border);
+    white-space: nowrap;
+  }
+  [data-richtext-body] sup,
+  [data-richtext-body] sub {
+    font-size: 0.75em;
+    line-height: 0;
+  }
+  [data-richtext-body] abbr[title] {
+    text-decoration: underline dotted;
+    text-underline-offset: 2px;
+    cursor: help;
+  }
+
+  /* ── Media ── */
+  [data-richtext-body] img,
+  [data-richtext-body] video {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: var(--richtext-block-my) auto;
+    border-radius: var(--richtext-pre-radius);
+  }
+  [data-richtext-body] figure {
+    margin: var(--richtext-block-my) 0;
+  }
+  [data-richtext-body] figcaption {
+    font-size: var(--richtext-code-size);
+    color: var(--richtext-fg-muted);
+    text-align: center;
+    margin-top: var(--a-space-1);
+  }
+
+  /* ── Disclosure ── */
+  [data-richtext-body] details {
+    margin: var(--richtext-block-my) 0;
+    border: 1px solid var(--richtext-border);
+    border-radius: var(--richtext-pre-radius);
+    padding: var(--a-space-3) var(--a-space-4);
+  }
+  [data-richtext-body] details[open] {
+    background: var(--richtext-code-bg);
+  }
+  [data-richtext-body] summary {
+    cursor: pointer;
+    font-weight: var(--richtext-strong-weight);
+    margin: calc(-1 * var(--a-space-3)) calc(-1 * var(--a-space-4));
+    padding: var(--a-space-3) var(--a-space-4);
+    list-style-position: inside;
+  }
+  [data-richtext-body] details[open] summary {
+    margin-bottom: var(--a-space-2);
+    border-bottom: 1px solid var(--richtext-border);
+  }
+
   /* ── Tables ── */
 
   [data-richtext-body] table {
@@ -217,9 +346,18 @@
     color: var(--richtext-link);
     text-decoration: underline;
     text-underline-offset: 2px;
+    transition: color var(--a-duration-fast) var(--a-easing);
   }
 
   [data-richtext-body] a:hover {
     color: var(--richtext-link-hover);
   }
+
+  [data-richtext-body] a:focus-visible {
+    outline: var(--a-focus-ring);
+    outline-offset: 2px;
+    border-radius: var(--a-radius-sm);
+  }
+
+  [data-richtext-body] small { font-size: var(--richtext-code-size); color: var(--richtext-fg-muted); }
 }

package/components/row/row.css

@@ -1,6 +1,9 @@
 @scope (row-ui) {
   :where(:scope) {
-    --row-gap:     var(--a-gap-md);
+    /* `--a-gap` defaults to `--a-gap-md` at :root in tokens.css; the
+       universal `[gap="N"]` rules override it on the element, so reading
+       `--a-gap` here picks up `<row-ui gap="…">` automatically. */
+    --row-gap:     var(--a-gap);
     --row-justify: flex-start;
     --row-align:   center;
     --row-drag-bg-active: var(--a-accent-muted);
@@ -13,6 +16,9 @@
     gap: var(--row-gap);
     justify-content: var(--row-justify);
     align-items: var(--row-align);
+    /* Universal [padding] / [margin] opt-in — see tokens.css for scale. */
+    padding: var(--a-padding, 0);
+    margin: var(--a-margin, 0);
     text-align: inherit;
   }
 

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/select/select.css

@@ -84,9 +84,12 @@
     background: var(--select-bg);
     line-height: 1;
     cursor: pointer;
+    /* Match every property the hover / focus / invalid states change. */
     transition:
+      background   var(--select-duration) var(--select-easing),
       border-color var(--select-duration) var(--select-easing),
-      background   var(--select-duration) var(--select-easing);
+      color        var(--select-duration) var(--select-easing),
+      box-shadow   var(--select-duration) var(--select-easing);
   }
   [slot="trigger"]:hover {
     border-color: var(--select-border-hover);

package/components/stack/stack.css

@@ -7,6 +7,9 @@
     box-sizing: border-box;
     display: grid;
     place-items: var(--stack-align);
+    /* Universal [padding] / [margin] opt-in — see tokens.css for scale. */
+    padding: var(--a-padding, 0);
+    margin: var(--a-margin, 0);
     /* Same UA override as row-ui/col-ui: [align=...] is for flex/grid, not text. */
     text-align: inherit;
   }

package/components/stepper/stepper.css

@@ -32,10 +32,17 @@
     --stepper-line-done:       var(--a-accent);
     --stepper-line-size:       2px;
 
-    /* ── Layout ── */
+    /* ── Layout ──
+       Parent tokens use the bare `--stepper-*` name (no `-item-` infix)
+       so the child's `:where(stepper-item-ui)` block can pull from
+       parent → child via `var(--stepper-X, …)` without name collisions.
+       A self-named child declaration like
+       `--stepper-item-gap-sm: var(--stepper-item-gap-sm, …)` resolves
+       to invalid (cycle), which silently breaks any calc() that
+       consumes it. */
     --stepper-radius-full:     var(--a-radius-full);
-    --stepper-item-gap:        var(--a-space-3);
-    --stepper-item-gap-sm:     var(--a-space-2);
+    --stepper-gap:             var(--a-space-3);
+    --stepper-gap-sm:          var(--a-space-2);
     --stepper-pad-x:           var(--a-space-4);
     --stepper-pad-y:           var(--a-space-6);
     --stepper-offset-xs:       var(--a-space-1);
@@ -82,7 +89,8 @@
     --stepper-item-line-size:      var(--stepper-line-size, 2px);
 
     --stepper-item-radius-full:    var(--a-radius-full);
-    --stepper-item-gap-sm:         var(--stepper-item-gap-sm, var(--a-space-2));
+    --stepper-item-gap:            var(--stepper-gap, var(--a-space-3));
+    --stepper-item-gap-sm:         var(--stepper-gap-sm, var(--a-space-2));
     --stepper-item-pad-x:          var(--stepper-pad-x, var(--a-space-4));
     --stepper-item-pad-y:          var(--stepper-pad-y, var(--a-space-6));
     --stepper-item-offset-xs:      var(--stepper-offset-xs, var(--a-space-1));

package/components/stepper/stepper.js

@@ -38,18 +38,18 @@ class AdiaStepper extends AdiaElement {
     const last = items[items.length - 1];
     if (last) last.setAttribute('data-last', '');
 
-    // Parent drives child state via step index
+    // Parent drives child state via step index. Canonical Phase 6
+    // contract: `status` enum (`completed` / `active` / `idle`).
+    // CSS only matches `[status="…"]`; the legacy `[completed]` /
+    // `[active]` Booleans were removed in 0.0.20.
     items.forEach((item, i) => {
       item.setAttribute('data-index', i);
       if (i < this.step) {
-        item.setAttribute('completed', '');
-        item.removeAttribute('active');
+        item.setAttribute('status', 'completed');
       } else if (i === this.step) {
-        item.removeAttribute('completed');
-        item.setAttribute('active', '');
+        item.setAttribute('status', 'active');
       } else {
-        item.removeAttribute('completed');
-        item.removeAttribute('active');
+        item.setAttribute('status', 'idle');
       }
     });
   }

package/components/swiper/swiper.css

@@ -89,6 +89,16 @@
 
   :scope > [data-swiper-track]::-webkit-scrollbar { display: none; }
 
+  /* Click-and-drag affordance for cursor users — touch keeps native pan. */
+  @media (hover: hover) {
+    :scope > [data-swiper-track] { cursor: grab; }
+    :scope > [data-swiper-track][data-dragging] {
+      cursor: grabbing;
+      scroll-snap-type: none;       /* let the pointer track 1:1 during drag */
+      user-select: none;
+    }
+  }
+
   /* ── Slides ── */
 
   :scope > [data-swiper-track] > * {

package/components/swiper/swiper.js

@@ -43,6 +43,7 @@ class AdiaSwiper extends AdiaElement {
   #activeIndex = 0;
   #bound = false;
   #fallbackNav = false;
+  #drag = null; /* { pointerId, startX, startScrollLeft, hasMoved } */
 
   get slides() {
     if (!this.#track) return [];
@@ -88,6 +89,14 @@ class AdiaSwiper extends AdiaElement {
 
       // Keyboard navigation
       this.addEventListener('keydown', this.#onKeydown);
+
+      // Click + drag (mouse / pen). Touch keeps native pan via scroll-snap.
+      this.#track.addEventListener('pointerdown', this.#onPointerDown);
+      this.#track.addEventListener('pointermove', this.#onPointerMove);
+      this.#track.addEventListener('pointerup',     this.#onPointerUp);
+      this.#track.addEventListener('pointercancel', this.#onPointerUp);
+      // Capture-phase click suppression so a drag-on-button doesn't activate it.
+      this.#track.addEventListener('click', this.#onClickCapture, true);
     }
 
     if (this.autoplay) this.play();
@@ -109,6 +118,14 @@ class AdiaSwiper extends AdiaElement {
     this.removeEventListener('focusin', this.#onPauseFocus);
     this.removeEventListener('focusout', this.#onResumeFocus);
     this.removeEventListener('keydown', this.#onKeydown);
+    if (this.#track) {
+      this.#track.removeEventListener('pointerdown',   this.#onPointerDown);
+      this.#track.removeEventListener('pointermove',   this.#onPointerMove);
+      this.#track.removeEventListener('pointerup',     this.#onPointerUp);
+      this.#track.removeEventListener('pointercancel', this.#onPointerUp);
+      this.#track.removeEventListener('click',         this.#onClickCapture, true);
+    }
+    this.#drag = null;
     this.#track = null;
     this.#bound = false;
   }
@@ -280,6 +297,66 @@ class AdiaSwiper extends AdiaElement {
     if (e.key === 'ArrowRight') { e.preventDefault(); this.next(); }
     if (e.key === 'ArrowLeft') { e.preventDefault(); this.prev(); }
   };
+
+  // ── Click + drag (mouse / pen) ──
+  // Native touch already scroll-pans the track; we only intercept mouse and
+  // pen so cursor users get the same swipe affordance as touch users.
+
+  #DRAG_THRESHOLD_PX = 5;
+
+  #onPointerDown = (e) => {
+    if (e.pointerType === 'touch') return;        /* native pan handles touch */
+    if (e.button !== 0) return;                   /* primary button only */
+    if (e.target.closest('button, button-ui, a, input, select, textarea')) return;
+    this.#drag = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startScrollLeft: this.#track.scrollLeft,
+      hasMoved: false,
+    };
+    /* Disable smooth scroll during drag so the bar tracks the pointer 1:1. */
+    this.#track.style.scrollBehavior = 'auto';
+    this.#track.setAttribute('data-dragging', '');
+  };
+
+  #onPointerMove = (e) => {
+    if (!this.#drag || e.pointerId !== this.#drag.pointerId) return;
+    const dx = e.clientX - this.#drag.startX;
+    if (Math.abs(dx) >= this.#DRAG_THRESHOLD_PX) {
+      if (!this.#drag.hasMoved) {
+        this.#drag.hasMoved = true;
+        /* Capture pointer so we keep tracking even if it leaves the track. */
+        try { this.#track.setPointerCapture(e.pointerId); } catch { /* noop */ }
+      }
+      this.#track.scrollLeft = this.#drag.startScrollLeft - dx;
+      e.preventDefault(); /* suppress text selection while dragging */
+    }
+  };
+
+  #onPointerUp = (e) => {
+    if (!this.#drag || e.pointerId !== this.#drag.pointerId) return;
+    const wasMoved = this.#drag.hasMoved;
+    if (wasMoved) {
+      try { this.#track.releasePointerCapture(e.pointerId); } catch { /* noop */ }
+    }
+    this.#drag = null;
+    /* Re-enable smooth scrolling; scroll-snap will glide to the nearest slide. */
+    this.#track.style.scrollBehavior = '';
+    this.#track.removeAttribute('data-dragging');
+    /* Ensure dragging stays "active" through the click event that follows
+       on the same gesture so #onClickCapture can suppress it. */
+    if (wasMoved) {
+      this.#track.setAttribute('data-just-dragged', '');
+      requestAnimationFrame(() => this.#track?.removeAttribute('data-just-dragged'));
+    }
+  };
+
+  #onClickCapture = (e) => {
+    if (this.#track?.hasAttribute('data-just-dragged')) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
 }
 
 customElements.define('swiper-ui', AdiaSwiper);

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;
@@ -89,7 +93,9 @@
     border-radius: var(--switch-radius);
     background: var(--switch-thumb-bg);
     box-shadow: var(--switch-thumb-shadow);
-    transition: transform var(--switch-duration) var(--switch-easing);
+    transition:
+      transform  var(--switch-duration) var(--switch-easing),
+      background var(--switch-duration) var(--switch-easing);
   }
   :scope[checked] [slot="thumb"] {
     transform: translateX(var(--switch-thumb-travel));

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.21",
+  "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);
   }