@nonoun/native-ui 0.3.0 → 0.4.0

package/dist/components.css

@@ -39,6 +39,15 @@
   :where(ui-icon[size="lg"]) { --ui-icon-size: var(--ui-icon-lg); }
   :where(ui-icon[size="xl"]) { --ui-icon-size: var(--ui-icon-xl); }
 
+  /* ── Intent (declarative color) ── */
+
+  :where(ui-icon[intent="accent"])  { --ui-icon-color: var(--accent-ink); }
+  :where(ui-icon[intent="success"]) { --ui-icon-color: var(--success-ink); }
+  :where(ui-icon[intent="warning"]) { --ui-icon-color: var(--warning-ink); }
+  :where(ui-icon[intent="danger"])  { --ui-icon-color: var(--danger-ink); }
+  :where(ui-icon[intent="info"])    { --ui-icon-color: var(--info-ink); }
+  :where(ui-icon[intent="muted"])   { --ui-icon-color: var(--neutral-ink-muted); }
+
   /* ── Forced Colors ── */
 
   @media (forced-colors: active) {
@@ -762,7 +771,7 @@
   /* ╭──────────────────────────────────────────────────────────╮
      │  ui-chat                                                 │
      │  Chat application shell with header / content / input /  │
-     │  footer sub-containers. Fills its parent (ui-layout-chat │
+     │  footer sub-containers. Fills its parent (nui-app-panel   │
      │  or any flex column).                                    │
      ╰──────────────────────────────────────────────────────────╯ */
 
@@ -1320,6 +1329,16 @@
     opacity: var(--ui-backdrop-opacity);
   }
 
+  /* ── Sizing API ──
+     WHY: Host pages set width and box-shadow directly on ui-card inside ui-dialog.
+     Expose custom properties so consumers can set these declaratively on ui-dialog
+     without reaching into children. */
+
+  :where(ui-dialog) > :where(dialog) > :where(*) {
+    width: var(--ui-dialog-width, auto);
+    box-shadow: var(--ui-dialog-shadow, none);
+  }
+
 }
 
 @layer ui {
@@ -1975,370 +1994,6 @@
 
 }
 
-@layer ui {
-
-  /* ╭──────────────────────────────────────────────────────────╮
-     │  ui-nav                                                  │
-     │  Navigation list with keyboard nav + selection.          │
-     │  Transparent wrapper — no visual surface.                │
-     │  Uses ui-nav-item / ui-nav-group for children.           │
-     ╰──────────────────────────────────────────────────────────╯ */
-
-  /* WHY: ui-nav is a transparent flex wrapper — no inline padding.
-     Inline padding is owned by leaf items (nav-item, summary).
-     Block padding is owned by nav-group margins. */
-  :where(ui-nav) {
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-    padding: 0;
-    outline: none;
-  }
-
-  /* ── Nav Item ── */
-  /* WHY: Nav items share the same visual pattern as options (ghost row,
-     hover/active/selected states). */
-
-  :where(ui-nav-item) {
-    --_font-weight: var(--ui-font-weight-text);
-    --_line-height: var(--ui-line-height-control);
-
-    display: flex;
-    align-items: center;
-    gap: calc(var(--_space) * 2);
-    padding-inline: calc(var(--_space-k) * var(--_space));
-
-    min-height: var(--_min-height);
-
-    font-size: var(--_font-size);
-    letter-spacing: var(--_letter-spacing);
-    line-height: var(--_line-height);
-    font-weight: var(--_font-weight);
-
-    cursor: pointer;
-    user-select: none;
-    color: var(--_ink-muted);
-
-    transition:
-      background var(--_duration) var(--_easing),
-      color var(--_duration) var(--_easing),
-      border-color var(--_duration) var(--_easing),
-      opacity var(--_duration) var(--_easing),
-      transform var(--_duration) var(--_easing);
-  }
-
-  /* ── Nav Item States ── */
-
-  :where(ui-nav-item):hover,
-  :where(ui-nav-item)[force-hover] {
-    color: var(--_ink-hover);
-  }
-
-  :where(ui-nav-item):active,
-  :where(ui-nav-item)[force-active] {
-    color: var(--_ink-active);
-  }
-
-  :where(ui-nav-item)[aria-current="page"] {
-    color: var(--_ink-strong);
-  }
-
-  :where(ui-nav-item)[aria-disabled="true"] {
-    color: var(--_ink-disabled);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  :where(ui-nav-item):focus-visible,
-  :where(ui-nav-item)[force-focus-visible] {
-    outline: 2px solid var(--ui-focus-ring);
-    outline-offset: -2px;
-  }
-
-  /* ── Nav Group ── */
-  /* WHY: Groups stamp a native <details>/<summary> for collapsible behavior.
-     DOM structure: ui-nav-group > details > summary > ui-nav-group-header
-                                          > ui-nav-item* */
-
-  :where(ui-nav-group) {
-    --_indicator-index: 0;
-
-    display: block;
-    position: relative;
-  }
-
-  :where(ui-nav-group) + :where(ui-nav-group) {
-    margin-block-start: calc(var(--_space) * 2);
-  }
-
-  /* ── Details (native disclosure with animated open/close) ── */
-  /* WHY: ::details-content lets us animate the content area directly.
-     interpolate-size allows height to transition between 0 and auto.
-     content-visibility with allow-discrete keeps content visible during close. */
-
-  :where(ui-nav-group) > :where(details) {
-    interpolate-size: allow-keywords;
-  }
-
-  :where(ui-nav-group) > :where(details)::details-content {
-    height: 0;
-    overflow: clip;
-    opacity: 0;
-
-    transition:
-      height var(--_duration) var(--_easing),
-      opacity var(--_duration) var(--_easing),
-      content-visibility var(--_duration) var(--_easing) allow-discrete;
-  }
-
-  :where(ui-nav-group) > :where(details[open])::details-content {
-    height: auto;
-    opacity: 1;
-  }
-
-  /* ── Summary (clickable header row) ── */
-
-  :where(ui-nav-group) > :where(details) > :where(summary) {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--_space) * 2);
-    padding-inline: calc(var(--_space-k) * var(--_space));
-    cursor: pointer;
-    user-select: none;
-    list-style: none;
-    outline: none;
-  }
-
-  /* WHY: Remove default marker in WebKit */
-  :where(ui-nav-group) > :where(details) > :where(summary)::-webkit-details-marker {
-    display: none;
-  }
-
-  :where(ui-nav-group) > :where(details) > :where(summary)::marker {
-    display: none;
-    content: '';
-  }
-
-  /* ── Nav Group Header ── */
-  /* WHY: Header sits inside <summary>. Bold text with optional icon. */
-
-  :where(ui-nav-group-header) {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    gap: calc(var(--_space) * 2);
-    min-height: var(--_min-height);
-    font-size: var(--_font-size);
-    font-weight: var(--ui-font-weight-button);
-    letter-spacing: var(--_letter-spacing);
-    line-height: var(--ui-line-height-control);
-    color: var(--_ink);
-    cursor: pointer;
-    user-select: none;
-  }
-
-  /* WHY: Fixed-size icon well — matches ui-layout-sidebar-item [slot="icon"].
-     All sidebar icons align on the same 1.5rem column regardless of icon size.
-     JS wraps the first <ui-icon> child in a .icon-well span during setup(). */
-  :where(ui-nav-group-header) > :where(.icon-well) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
-    flex-shrink: 0;
-  }
-
-  /* ── Chevron icon (right side of summary) ── */
-
-  :where(ui-nav-group) > :where(details) > :where(summary)::after {
-    content: '';
-    flex-shrink: 0;
-    width: var(--_icon-size);
-    height: var(--_icon-size);
-
-    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z' fill='currentColor'/%3E%3C/svg%3E");
-    mask-size: contain;
-    mask-repeat: no-repeat;
-    mask-position: center;
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z' fill='currentColor'/%3E%3C/svg%3E");
-    -webkit-mask-size: contain;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: center;
-
-    background: var(--_ink-muted);
-
-    transition:
-      transform var(--_duration) var(--_easing);
-  }
-
-  /* Chevron rotates when open */
-  :where(ui-nav-group) > :where(details[open]) > :where(summary)::after {
-    transform: rotate(180deg);
-  }
-
-  /* ── Selected group — has a child with aria-current ── */
-
-  :where(ui-nav-group):state(has-selection) > :where(details) > :where(summary) :where(ui-nav-group-header) {
-    color: var(--_ink-strong);
-  }
-
-  /* ── Summary Hover ── */
-
-  :where(ui-nav-group) > :where(details) > :where(summary):hover :where(ui-nav-group-header),
-  :where(ui-nav-group[force-hover]) > :where(details) > :where(summary) :where(ui-nav-group-header) {
-    color: var(--_ink-strong);
-  }
-
-  /* ── Summary Focus ── */
-
-  :where(ui-nav-group) > :where(details) > :where(summary):focus-visible,
-  :where(ui-nav-group[force-focus-visible]) > :where(details) > :where(summary) {
-    outline: 2px solid var(--ui-focus-ring);
-    outline-offset: -2px;
-  }
-
-  /* ── Vertical connector line (icon groups only) ── */
-  /* WHY: Connector draws from below the header to the bottom of the group.
-     Only shown when header contains an icon. Scoped via :has(). */
-
-  /* WHY: Insets account for the summary's padding-inline so the connector
-     line passes through the icon center and child text aligns with header text. */
-  :where(ui-nav-group):has(:where(ui-nav-group-header) :where(.icon-well)) {
-    --_group-pad: calc(var(--_space-k) * var(--_space));
-    --_group-icon-well: 1.5rem;
-    --_group-line-inset: calc(var(--_group-pad) + var(--_group-icon-well) / 2);
-    --_group-child-inset: calc(var(--_group-icon-well) + var(--_space) * 2);
-  }
-
-  :where(ui-nav-group):has(:where(ui-nav-group-header) :where(.icon-well)):has(:where(details[open]))::after {
-    content: '';
-    position: absolute;
-    inset-inline-start: var(--_group-line-inset);
-    top: var(--_min-height);
-    bottom: 0;
-    width: 1px;
-    background: var(--_border-muted);
-    pointer-events: none;
-  }
-
-  /* ── Sliding indicator (same pattern as vertical tabs) ── */
-  /* WHY: A ::before pseudo on the group slides along the connector line.
-     JS sets --_indicator-index; :state(has-selection) gates visibility. */
-
-  :where(ui-nav-group):has(:where(ui-nav-group-header) :where(.icon-well)):has(:where(details[open])):state(has-selection)::before {
-    content: '';
-    position: absolute;
-    z-index: 1;
-    inset-inline-start: calc(var(--_group-line-inset, 0px) - 0.5px);
-    top: var(--_min-height);
-    height: var(--_min-height);
-    width: 2px;
-    border-radius: 1px;
-    background: var(--_surface);
-    pointer-events: none;
-    transform: translateY(calc(var(--_indicator-index) * var(--_min-height)));
-
-    transition:
-      transform var(--_duration) var(--_easing),
-      background var(--_duration) var(--_easing);
-  }
-
-  /* ── Grouped Child Items ── */
-  /* WHY: When header has an icon, margin-inline-start = icon-size + gap
-     so item text aligns with header text past the icon.
-     Items are inside <details> after the <summary>. */
-
-  :where(ui-nav-group) > :where(details) > :where(ui-nav-item) {
-    margin-inline-start: var(--_group-child-inset, 0);
-  }
-
-  /* ── Nav Group Flyout (collapsed sidebar) ── */
-  /* WHY: In collapsed mode, summary click opens a ui-listbox popover to the right
-     instead of expanding the <details>. Same pattern as sidebar-trigger menus. */
-
-  :where(ui-nav-group) > :where(ui-listbox.nav-group-flyout[popover]) {
-    --_popover-origin: left center;
-    --_popover-from: perspective(800px) scale(0.96) rotateY(20deg);
-
-    position: fixed;
-    position-area: inline-end span-block-end;
-    position-try-fallbacks: --nav-flyout-flip-up;
-    margin-block: var(--ui-popover-viewport-margin);
-    margin-inline: 0;
-    margin-inline-start: var(--ui-popover-gap);
-    min-width: 200px;
-    max-height: var(--ui-popover-max-height);
-    overflow-y: auto;
-  }
-
-  @position-try --nav-flyout-flip-up {
-    position-area: inline-end span-block-start;
-  }
-
-  @position-try --nav-flyout-flip-down {
-    position-area: inline-end span-block-end;
-  }
-
-  /* ── Container Query: Collapsed Sidebar ── */
-  /* WHY: Nav components own their own collapsed behavior via @container.
-     The sidebar aside declares container-name: sidebar. When it shrinks
-     to 48px (icon rail), nav responds to the width — not to [collapsed].
-     Threshold 80px: collapsed = 48px, min expanded = 160px. */
-
-  @container sidebar (max-width: 80px) {
-
-    /* Nav items hide entirely — only group headers (with icons) remain. */
-    :where(ui-nav-item) {
-      display: none;
-    }
-
-    /* Summary shrinks to icon-only. Reduced inline padding wraps tightly
-       around the icon; parent align-items: center handles horizontal centering. */
-    :where(ui-nav-group) > :where(details) > :where(summary) {
-      padding-inline: var(--_space);
-      border-radius: var(--_radius);
-    }
-
-    /* Hide chevron — no expand/collapse in icon rail (flyout instead). */
-    :where(ui-nav-group) > :where(details) > :where(summary)::after {
-      display: none;
-    }
-
-    /* Hide vertical connector line and sliding indicator. */
-    :where(ui-nav-group)::after,
-    :where(ui-nav-group)::before {
-      display: none;
-    }
-
-    /* Header collapses to icon-only. font-size: 0 hides text nodes
-       (can't be targeted by CSS). Icon overrides back to normal below. */
-    :where(ui-nav-group-header) {
-      flex: 0 0 auto;
-      font-size: 0;
-      gap: 0;
-    }
-
-    :where(ui-nav-group-header) :where(.icon-well) :where(ui-icon) {
-      font-size: var(--_font-size, 1rem);
-    }
-
-    /* WHY: In collapsed mode the group is a small icon — centering
-       the flyout vertically with the anchor is more natural than top-aligning.
-       Fallbacks handle viewport clipping (top/bottom edge). */
-    :where(ui-nav-group) > :where(ui-listbox.nav-group-flyout[popover]) {
-      position-area: inline-end;
-      position-try-fallbacks: --nav-flyout-flip-up, --nav-flyout-flip-down;
-    }
-
-    /* Collapse inter-group spacing in icon rail. */
-    :where(ui-nav-group) + :where(ui-nav-group) {
-      margin-block-start: 0;
-    }
-  }
-
-}
-
 @layer ui {
 
   /* ── Pagination Container ── */
@@ -4592,589 +4247,6 @@
 
 }
 
-@layer ui {
-
-  /* ╭──────────────────────────────────────────────────────────╮
-     │  ui-layout-body                                          │
-     │  Rounded, padded, scrollable content surface.            │
-     │  Fills remaining flex space inside ui-layout-canvas.     │
-     ╰──────────────────────────────────────────────────────────╯ */
-
-  :where(ui-layout-body) {
-    display: flex;
-    flex: 1;
-    min-width: 0;
-    flex-direction: column;
-    overflow-y: auto;
-    scrollbar-width: none;
-    background: var(--_ground, var(--_panel));
-    border-radius: var(--_radius);
-    padding: calc(var(--_space-k) * var(--_space));
-  }
-
-  :where(ui-layout-body)[show-scrollbar] {
-    scrollbar-width: thin;
-  }
-
-}
-
-@layer ui {
-
-  /* ╭──────────────────────────────────────────────────────────╮
-     │  ui-layout-breadcrumb                                    │
-     │  Grid bar with leading / label / trailing slots.         │
-     │  Same slot pattern as ui-header.                         │
-     ╰──────────────────────────────────────────────────────────╯ */
-
-  /* ── Base ── */
-
-  :where(ui-layout-breadcrumb) {
-    display: grid;
-    grid-template-columns: 1fr;
-    align-items: center;
-    min-height: var(--ui-layout-bar-height);
-    gap: calc(var(--_space) * 2);
-    padding-block: var(--_space);
-    padding-inline: calc(var(--_space-k) * var(--_space));
-    flex-shrink: 0;
-    min-width: 0;
-  }
-
-  /* ── Slots ── */
-
-  :where(ui-layout-breadcrumb):has(> [slot="leading"]):has(> [slot="trailing"]) {
-    grid-template-columns: auto 1fr auto;
-  }
-
-  :where(ui-layout-breadcrumb):has(> [slot="leading"]):not(:has(> [slot="trailing"])) {
-    grid-template-columns: auto 1fr;
-  }
-
-  :where(ui-layout-breadcrumb):not(:has(> [slot="leading"])):has(> [slot="trailing"]) {
-    grid-template-columns: 1fr auto;
-  }
-
-  :where(ui-layout-breadcrumb) > :where([slot="leading"]) {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--_space) * 2);
-  }
-
-  :where(ui-layout-breadcrumb) > :where([slot="label"]),
-  :where(ui-layout-breadcrumb) > :where(:not([slot])) {
-    min-width: 0;
-  }
-
-  :where(ui-layout-breadcrumb) > :where([slot="trailing"]) {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--_space) * 2);
-  }
-
-}
-
-@layer ui {
-
-  /* ╭──────────────────────────────────────────────────────────╮
-     │  ui-layout-canvas                                        │
-     │  Structural flex row for body + chat panels.             │
-     │  No background, no radius — purely layout.               │
-     ╰──────────────────────────────────────────────────────────╯ */
-
-  :where(ui-layout-canvas) {
-    display: flex;
-    flex: 1;
-    min-height: 0;
-    padding: 0 calc(var(--_space-k) * var(--_space)) calc(var(--_space-k) * var(--_space));
-  }
-
-}
-
-@layer ui {
-
-  /* ╭──────────────────────────────────────────────────────────╮
-     │  ui-layout-chat                                          │
-     │  Rounded, padded, scrollable right panel.                │
-     │  Hidden by default — shown via [open] attribute.         │
-     ╰──────────────────────────────────────────────────────────╯ */
-
-  :where(ui-layout-chat) {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 0;
-    min-width: 0;
-    max-width: 480px;
-    overflow: clip;
-    scrollbar-width: none;
-    background: var(--_ground, var(--_panel));
-    border-radius: var(--_radius);
-    padding: 0;
-    transition:
-      width var(--_duration) var(--_easing),
-      min-width var(--_duration) var(--_easing),
-      padding var(--_duration) var(--_easing),
-      margin var(--_duration) var(--_easing);
-  }
-
-  :where(ui-layout-chat[open]) {
-    width: 360px;
-    min-width: 280px;
-    margin-inline-start: calc(var(--_space) * 2);
-    overflow-y: auto;
-    padding: calc(var(--_space-k) * var(--_space));
-  }
-
-  /* WHY: When ui-chat manages its own sub-container padding and scroll,
-     the layout container delegates — no own padding, no own scroll.
-     overflow: visible lets CSS anchor-positioned popovers (ui-select etc.)
-     resolve through to the top layer. */
-  :where(ui-layout-chat[open]):has(> ui-chat) {
-    padding: 0;
-    overflow: visible;
-  }
-
-  /* WHY: Disable width transition while dragging — it fights the pointer. */
-  :where(ui-layout-chat[resizing]) {
-    transition: none;
-  }
-
-  :where(ui-layout-chat)[show-scrollbar] {
-    scrollbar-width: thin;
-  }
-
-  /* ── Resize Handle ── */
-
-  :where(ui-layout-chat) :where(.layout-resize-handle) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 4px;
-    height: 100%;
-    cursor: col-resize;
-    z-index: 1;
-  }
-
-  :where(ui-layout-chat) :where(.layout-resize-handle):hover,
-  :where(ui-layout-chat[resizing]) :where(.layout-resize-handle) {
-    background: var(--_border-muted);
-  }
-
-}
-
-@layer ui {
-
-  /* ╭──────────────────────────────────────────────────────────╮
-     │  ui-layout-inspector                                     │
-     │  Rounded, padded, scrollable right panel.                │
-     │  Hidden by default — shown via [open] attribute.         │
-     ╰──────────────────────────────────────────────────────────╯ */
-
-  :where(ui-layout-inspector) {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 0;
-    min-width: 0;
-    max-width: 480px;
-    overflow: clip;
-    scrollbar-width: none;
-    background: var(--_ground, var(--_panel));
-    border-radius: var(--_radius);
-    padding: 0;
-    transition:
-      width var(--_duration) var(--_easing),
-      min-width var(--_duration) var(--_easing),
-      padding var(--_duration) var(--_easing),
-      margin var(--_duration) var(--_easing);
-  }
-
-  :where(ui-layout-inspector[open]) {
-    width: 360px;
-    min-width: 280px;
-    margin-inline-start: calc(var(--_space) * 2);
-    overflow-y: auto;
-    padding: calc(var(--_space-k) * var(--_space));
-  }
-
-  :where(ui-layout-inspector[resizing]) {
-    transition: none;
-  }
-
-  :where(ui-layout-inspector)[show-scrollbar] {
-    scrollbar-width: thin;
-  }
-
-  /* ── Resize Handle ── */
-
-  :where(ui-layout-inspector) :where(.layout-resize-handle) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 4px;
-    height: 100%;
-    cursor: col-resize;
-    z-index: 1;
-  }
-
-  :where(ui-layout-inspector) :where(.layout-resize-handle):hover,
-  :where(ui-layout-inspector[resizing]) :where(.layout-resize-handle) {
-    background: var(--_border-muted);
-  }
-
-}
-
-@layer ui {
-
-  /* ╭──────────────────────────────────────────────────────────╮
-     │  ui-layout-sidebar                                       │
-     │  Full-page layout: collapsible/resizable sidebar aside   │
-     │  + content column (breadcrumb, canvas, body, chat).      │
-     ╰──────────────────────────────────────────────────────────╯ */
-
-  /* ── Outer Layout ── */
-
-  :where(ui-layout-sidebar) {
-    display: flex;
-    height: 100dvh;
-  }
-
-  /* WHY: Reserve sidebar width before JS builds the DOM — prevents layout shift.
-     Collapsed state is read synchronously in the constructor so CSS matches immediately.
-     Replaced by the real aside once [data-ready] is set. */
-  :where(ui-layout-sidebar):not([data-ready]):not([collapsed])::before {
-    content: '';
-    width: var(--ui-layout-sidebar-width);
-    flex-shrink: 0;
-    background: var(--_body);
-    border-right: 1px solid var(--_border-muted);
-  }
-
-  :where(ui-layout-sidebar):not([data-ready])[collapsed]::before {
-    content: '';
-    width: 48px;
-    flex-shrink: 0;
-    background: var(--_body);
-    border-right: 1px solid var(--_border-muted);
-  }
-
-  /* ── Content Column ── */
-  /* WHY: Everything except the aside forms a flex column. */
-
-  :where(ui-layout-sidebar) > :where(:not([slot])) {
-    flex: 1 1 0%;
-    min-width: 0;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-  }
-
-  /* ── Sidebar Aside ── */
-  /* WHY: position: relative creates the containing block for absolute
-     header/footer overlays. Content fills the full height and scrolls
-     underneath the pinned header/footer. */
-
-  :where(ui-layout-sidebar) > :where([slot="sidebar"]) {
-    --_sidebar-header-height: 0px;
-    --_sidebar-footer-height: 0px;
-
-    container-name: sidebar;
-    container-type: inline-size;
-    position: sticky;
-    top: 0;
-    width: var(--ui-layout-sidebar-width);
-    min-width: 160px;
-    max-width: 400px;
-    height: 100dvh;
-    display: block;
-    transition: width var(--_duration) var(--_easing), min-width var(--_duration) var(--_easing);
-    overflow: hidden;
-    z-index: 10;
-  }
-
-  /* WHY: Disable width transition while dragging — it fights the pointer. */
-  :where(ui-layout-sidebar) > :where([slot="sidebar"][resizing]) {
-    transition: none;
-  }
-
-  /* ── Collapsed Icon Rail ── */
-  /* WHY: Collapsed = icon rail, not fully hidden. 48px fits icons (1rem) + padding.
-     [collapsed] drives the aside to 48px which triggers @container sidebar queries
-     in this file and in child component CSS (ui-nav.css, etc.). */
-
-  :where(ui-layout-sidebar)[collapsed] > :where([slot="sidebar"]) {
-    width: 48px;
-    min-width: 48px;
-  }
-
-  /* ── Resize Handle ── */
-
-  :where(ui-layout-sidebar) :where(.layout-resize-handle) {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 4px;
-    height: 100%;
-    cursor: col-resize;
-    z-index: 1;
-  }
-
-  :where(ui-layout-sidebar) :where(.layout-resize-handle):hover,
-  :where(ui-layout-sidebar) > :where([slot="sidebar"][resizing]) :where(.layout-resize-handle) {
-    background: var(--_border-muted);
-  }
-
-  /* WHY: When collapsed to icon rail, the sidebar edge meets content — drop left padding. */
-
-  :where(ui-layout-sidebar)[collapsed] :where(ui-layout-canvas) {
-    padding-inline-start: 0;
-  }
-
-  :where(ui-layout-sidebar)[collapsed] :where(ui-layout-breadcrumb) {
-    padding-inline-start: 0;
-  }
-
-  /* ── Sidebar Header ── */
-  /* WHY: Absolute-positioned overlay pinned to top of aside. Content scrolls
-     underneath it. z-index: 2 sits above content (z-index: 0). */
-
-  :where(ui-layout-sidebar-header) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-  }
-
-  /* ── Sidebar Content ── */
-  /* WHY: Full height of the aside, scrollable. Padding-block offsets keep
-     content from starting behind header / ending behind footer.
-     Fade-out alpha mask dissolves content edges under the overlays. */
-
-  :where(ui-layout-sidebar-content) {
-    display: flex;
-    flex-direction: column;
-    padding-block-start: var(--_sidebar-header-height);
-    padding-block-end: var(--_sidebar-footer-height);
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    scrollbar-width: none;
-  }
-
-  /* WHY: When header is present, fade top edge. Content dissolves as it
-     scrolls under the header — transparent at top, fully visible by 1.25×
-     the header height. No opaque header background needed. */
-  :where(ui-layout-sidebar-content)[data-has-header] {
-    mask-image: linear-gradient(
-      to bottom,
-      transparent 0,
-      black calc(var(--_sidebar-header-height) * 1.25),
-      black 100%
-    );
-  }
-
-  /* WHY: When footer is present, fade bottom edge. */
-  :where(ui-layout-sidebar-content)[data-has-footer] {
-    mask-image: linear-gradient(
-      to bottom,
-      black 0,
-      black calc(100% - var(--_sidebar-footer-height) * 1.25),
-      transparent 100%
-    );
-  }
-
-  /* WHY: When both header AND footer are present, fade both edges. */
-  :where(ui-layout-sidebar-content)[data-has-header][data-has-footer] {
-    mask-image: linear-gradient(
-      to bottom,
-      transparent 0,
-      black calc(var(--_sidebar-header-height) * 1.25),
-      black calc(100% - var(--_sidebar-footer-height) * 1.25),
-      transparent 100%
-    );
-  }
-
-  /* ── Sidebar Footer ── */
-  /* WHY: Absolute-positioned overlay pinned to bottom of aside. */
-
-  :where(ui-layout-sidebar-footer) {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-  }
-
-  /* ── Sidebar Item ── */
-  /* WHY: Universal sidebar row element. Provides inline padding for any content
-     (buttons, links, icons). When a child ui-listbox[popover] is present, JS
-     wires PopoverController for click-to-toggle menu behavior.
-     Absorbs the old ui-layout-sidebar-trigger role — one element for all rows. */
-
-  :where(ui-layout-sidebar-item) {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    min-width: 0;
-    gap: calc(var(--_space) * 2);
-    min-height: var(--_min-height);
-    font-size: var(--_font-size);
-    font-weight: var(--ui-font-weight-button);
-    letter-spacing: var(--_letter-spacing);
-    line-height: var(--ui-line-height-control);
-    color: var(--_ink);
-    cursor: pointer;
-    user-select: none;
-    border: none;
-    background: none;
-    padding-block: var(--_space);
-    padding-inline: calc(var(--_space-k) * var(--_space));
-    border-radius: var(--_radius);
-    transition: color var(--_duration) var(--_easing);
-  }
-
-  /* WHY: Items in header/footer match the breadcrumb bar height so the
-     first sidebar row aligns horizontally with the breadcrumb. */
-  :where(ui-layout-sidebar-header) > :where(ui-layout-sidebar-item),
-  :where(ui-layout-sidebar-footer) > :where(ui-layout-sidebar-item) {
-    min-height: var(--ui-layout-bar-height);
-  }
-
-  :where(ui-layout-sidebar-item):hover,
-  :where(ui-layout-sidebar-item)[force-hover] {
-    color: var(--_ink-strong);
-  }
-
-  :where(ui-layout-sidebar-item):focus-visible,
-  :where(ui-layout-sidebar-item)[force-focus-visible] {
-    outline: 2px solid var(--ui-focus-ring);
-    outline-offset: -2px;
-  }
-
-  /* WHY: Fixed-size icon well so all sidebar icons (header logo, nav group icons,
-     standalone icons) center-align on the same column width regardless of intrinsic
-     icon size. 1.5rem matches the sidebar's visual rhythm at default density.
-     Consumer wraps the icon: <span slot="icon"><ui-icon name="..."></ui-icon></span>
-     The wrapper is the well; the icon keeps its own --ui-icon-size dimensions. */
-  :where(ui-layout-sidebar-item) > :where([slot="icon"]) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
-    flex-shrink: 0;
-  }
-
-  /* WHY: Trailing caret pushes to end — same pattern as button justify="spread". */
-  :where(ui-layout-sidebar-item) > :where([slot="trailing"]) {
-    margin-inline-start: auto;
-    flex-shrink: 0;
-    color: var(--_ink-muted);
-  }
-
-  /* WHY: When the item wraps a sub-component (e.g. ui-button) that provides
-     its own icon, hide [slot="icon"] in expanded mode — it only serves as the
-     bare collapsed-rail representation. Items without sub-components (just
-     icon + label + trailing) keep [slot="icon"] visible in both modes. */
-  :where(ui-layout-sidebar-item:has(> ui-button)) > :where([slot="icon"]) {
-    display: none;
-  }
-
-  /* WHY: Title text truncates when sidebar narrows during resize. */
-  :where(ui-layout-sidebar-item) > :where([slot="label"]) {
-    flex: 1;
-    min-width: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  /* ── Item Popover ── */
-  /* WHY: Popover opens to the right of the sidebar item.
-     Default: top-aligned, grows downward (span-block-end).
-     Flip: bottom-aligned, grows upward (span-block-start). */
-
-  :where(ui-layout-sidebar-item) > :where(ui-listbox[popover]) {
-    --_popover-origin: left center;
-    --_popover-from: perspective(800px) scale(0.96) rotateY(20deg);
-
-    position: fixed;
-    position-area: inline-end span-block-end;
-    position-try-fallbacks: --sidebar-item-flip-up;
-    margin-block: var(--ui-popover-viewport-margin);
-    margin-inline: 0;
-    margin-inline-start: var(--ui-popover-gap);
-    min-width: 200px;
-    max-height: var(--ui-popover-max-height);
-    overflow-y: auto;
-  }
-
-  @position-try --sidebar-item-flip-up {
-    position-area: inline-end span-block-start;
-  }
-
-  @position-try --sidebar-item-flip-down {
-    position-area: inline-end span-block-end;
-  }
-
-  /* ── Container Query: Collapsed Sidebar ── */
-  /* WHY: Each component owns its own collapsed behavior via @container.
-     The aside is the container (container-name: sidebar). When it shrinks
-     to 48px (icon rail), components respond to the width, not to [collapsed].
-     Threshold 80px: collapsed = 48px, min expanded = 160px. */
-
-  @container sidebar (max-width: 80px) {
-
-    /* Resize handle — no dragging in icon rail */
-    :where(.layout-resize-handle) {
-      display: none;
-    }
-
-    /* Header/footer — center content horizontally */
-    :where(ui-layout-sidebar-header),
-    :where(ui-layout-sidebar-footer) {
-      align-items: center;
-    }
-
-    /* Content — center items in the 48px rail */
-    :where(ui-layout-sidebar-content) {
-      align-items: center;
-    }
-
-    /* Item — shrink to icon-only. Show [slot="icon"], hide everything else.
-       WHY: Sidebar items can contain complex children (buttons with slots,
-       links, etc.). Rather than overriding sub-component styles, the item
-       provides its own bare icon via [slot="icon"] for the collapsed rail. */
-    :where(ui-layout-sidebar-item) {
-      flex: 0 0 auto;
-      padding-inline: var(--_space);
-    }
-
-    :where(ui-layout-sidebar-item) > :where([slot="icon"]) {
-      display: inline-flex;
-    }
-
-    :where(ui-layout-sidebar-item) > :where(:not([slot="icon"]):not(ui-listbox[popover]):not(.nav-group-flyout)) {
-      display: none;
-    }
-
-    /* WHY: In collapsed mode the sidebar item is a small icon — centering
-       the popover vertically with the anchor is more natural than top-aligning.
-       Fallbacks handle viewport clipping (top/bottom edge). */
-    :where(ui-layout-sidebar-item) > :where(ui-listbox[popover]) {
-      position-area: inline-end;
-      position-try-fallbacks: --sidebar-item-flip-up, --sidebar-item-flip-down;
-    }
-  }
-
-}
-
 @layer ui {
 
   /* ── Base ── */