@adia-ai/web-components 0.0.23 → 0.0.25

package/components/page/page.yaml

@@ -0,0 +1,148 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaPage
+tag: page-ui
+component: Page
+category: container
+version: 1
+description: |
+  Page container. Holds page-level chrome — header / content / footer —
+  and manages max-width clamps, padding scale, optional scroll-container,
+  and an optional sticky-header sentinel. Compose with the slot
+  primitives (`<header-ui>`, `<section-ui>`, `<footer-ui>`); the page's
+  @scope rules style them. Drop in directly, or nest inside an
+  `<app-shell-ui>`'s main column.
+props:
+  scroll:
+    description: |
+      Sets the page as a scroll container. `overflow-y: auto`, full
+      height, contained overscroll. Use when the page IS the scroll
+      surface (standalone pages); leave off when nested inside a parent
+      that already manages scroll (e.g. inside an `<app-shell-ui>`'s
+      main `<section>`).
+    type: boolean
+    default: false
+    reflect: true
+  maxWidth:
+    description: |
+      Token-bound max-width clamp. `prose` (65ch) for reading pages,
+      `narrow` (80ch) for tight forms, `wide` (1080px) for data-rich
+      pages, `full` for unconstrained. Empty defers to parent / 100%.
+      Centered horizontally via `margin-inline: auto`.
+    type: string
+    default: ""
+    enum:
+      - ""
+      - prose
+      - narrow
+      - wide
+      - full
+    attribute: max-width
+    reflect: true
+  padding:
+    description: |
+      Page-padding scale from the spacing system. Accepts `0`–`8`
+      (mapped to `--a-space-N`). Empty (no value) applies the
+      `--page-padding-default` token; `0` removes padding.
+    type: string
+    default: ""
+    reflect: true
+  stickyHeader:
+    description: |
+      Installs an IntersectionObserver sentinel before the first
+      `<header>` / `<header-ui>` child. When the sentinel scrolls out
+      of view the page gains `[data-header-stuck]`, which the CSS
+      uses to add a border + shadow to the header. No-op when no
+      header is present.
+    type: boolean
+    default: false
+    attribute: sticky-header
+    reflect: true
+events: {}
+slots:
+  default:
+    description: |
+      Composes from the slot primitives — `<header-ui>` (page header),
+      `<section-ui>` (main content), optional `<footer-ui>`. Native
+      `<header>` / `<section>` / `<footer>` also work; the @scope rules
+      target both via `:where(header, header-ui)`.
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: header-stuck
+    description: Header has scrolled past the sentinel; visual cue applied.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: prose-page
+    description: Reading page with sticky header, 65ch column, padding scale 6.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Page",
+          "stickyHeader": true,
+          "maxWidth": "prose",
+          "padding": "6",
+          "children": ["hdr", "body"]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": ["title"]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "variant": "display",
+          "textContent": "Reading Page"
+        },
+        {
+          "id": "body",
+          "component": "Section",
+          "children": []
+        }
+      ]
+  - name: dashboard-page
+    description: Wide-clamp dashboard page acting as a scroll container.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Page",
+          "scroll": true,
+          "maxWidth": "wide",
+          "padding": "4",
+          "children": ["hdr", "body"]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": []
+        },
+        {
+          "id": "body",
+          "component": "Section",
+          "children": []
+        }
+      ]
+keywords:
+  - page
+  - layout
+  - container
+  - scroll
+  - sticky-header
+  - max-width
+  - padding
+  - prose-page
+  - dashboard-page
+synonyms: {}
+related:
+  - app-shell
+  - card
+  - section
+  - header
+  - footer

package/components/radio/radio.css

@@ -1,6 +1,7 @@
-/* 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. */
+/* 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);
@@ -9,6 +10,14 @@ 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) {
@@ -84,17 +93,7 @@ radio-ui[checked]:not([disabled]):hover [slot="dot"] {
       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);
-  }
-
-  /* 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);
-  }
+  /* 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/section/section.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Section.json",
   "title": "Section",
-  "description": "Content section inside a Card. Groups related content between Header and Footer.",
+  "description": "Content section — styled by closest container parent (Card / Drawer / Modal / Page / AppShell). Groups related content between Header and Footer. `[scroll]` only kicks in inside Card / Drawer / Modal — Page and AppShell own their own scroll containers.",
   "type": "object",
   "allOf": [
     {

package/components/section/section.yaml

@@ -6,7 +6,7 @@ tag: section-ui
 component: Section
 category: container
 version: 1
-description: Content section inside a Card. Groups related content between Header and Footer.
+description: Content section — styled by closest container parent (Card / Drawer / Modal / Page / AppShell). Groups related content between Header and Footer. `[scroll]` only kicks in inside Card / Drawer / Modal — Page and AppShell own their own scroll containers.
 props:
   scroll:
     description: Enable overflow scrolling

package/components/segment/segment.css

@@ -1,9 +1,12 @@
-/* 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. */
+/* 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) {
@@ -80,10 +83,7 @@ segment-ui:not([disabled]):not([selected]):hover {
     white-space: nowrap;
   }
 
-  /* States — hover rule moved outside @scope; see Safari 17.x bug note at top. */
-  :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,5 +1,6 @@
-/* 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. */
+/* 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);
@@ -8,6 +9,14 @@ 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) {
@@ -77,12 +86,7 @@ switch-ui[checked]:not([disabled]):hover {
       background var(--switch-duration) var(--switch-easing),
       border-color var(--switch-duration) var(--switch-easing);
   }
-  /* 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);
-  }
+  /* hover + [checked] rules moved outside @scope — see Safari 17.x bug note at top. */
 
   [slot="thumb"] {
     position: absolute;
@@ -97,9 +101,7 @@ switch-ui[checked]:not([disabled]):hover {
       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/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,7 +1,8 @@
 /* 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 {
+   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);
 }

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.23",
+  "version": "0.0.25",
   "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-item/app-nav-item.css

@@ -1,10 +1,10 @@
-/* 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. */
+/* 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);
@@ -12,6 +12,21 @@ app-nav-item-ui: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) {
@@ -61,15 +76,7 @@ app-nav-item-ui:hover [slot="icon"] {
     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"] {
@@ -87,14 +94,7 @@ app-nav-item-ui:hover [slot="icon"] {
     --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/app-shell/app-shell.css

@@ -1,6 +1,18 @@
 /* ═══════════════════════════════════════════════════════════════
    App Shell — <app-shell-ui> pattern component CSS
 
+   ⚠ DEPRECATED PATH (2026-04-29): preserved as an alias for one
+   release while consumers migrate. The CSS now lives behind the
+   <app-shell-ui> custom element at
+   packages/web-components/components/app-shell/ and ships via
+   packages/web-components/styles/components.css.
+
+   Migration: drop the explicit <link rel="stylesheet"> to this file —
+   styles/components.css now bundles the same content via the new
+   component.
+
+   Companion ADR: ../../../../.brain/adrs/0009-promote-app-shell-and-page-to-components.md.
+
    Split into constituent parts for maintainability.
    Import order matters: tokens first, then structure, then overrides.
    ═══════════════════════════════════════════════════════════════ */

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

@@ -1,8 +1,8 @@
-/* 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. */
+/* 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);
@@ -10,6 +10,23 @@ section-nav-item-ui:hover:not([disabled]) {
 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) {
@@ -79,25 +96,7 @@ section-nav-item-ui:hover: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);

package/styles/components.css

@@ -26,6 +26,8 @@
 @import "../components/range/range.css";
 @import "../components/tree/tree.css";
 @import "../components/pane/pane.css";
+@import "../components/app-shell/app-shell.css";
+@import "../components/page/page.css";
 @import "../components/chat/chat-input.css";
 @import "../components/chat/chat.css";
 @import "../components/drawer/drawer.css";