@master/internal-site 0.1.1 → 0.1.3

package/src/styles/system/header-core.css

@@ -0,0 +1,101 @@
+/* header-core: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-app { min-height: 100dvh; background: var(--ui-surface-canvas); color: var(--ui-text-body); }
+
+  .ui-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--ui-space-lg); height: 3.75rem; padding: 0 var(--ui-space-lg);
+    background: color-mix(in oklab, var(--ui-surface-canvas) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
+    box-shadow: inset 0 -1px 0 var(--ui-line-hair); }
+  .ui-header-brand { display: inline-flex; align-items: center; gap: var(--ui-space-xs); color: var(--ui-text-strong); font-weight: var(--ui-weight-medium); font-size: 1.0625rem; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
+  .ui-header-nav { display: flex; align-items: center; gap: var(--ui-space-3xs); }
+  .ui-header-nav > a { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 .75rem; border-radius: var(--ui-radius-md); color: var(--ui-text-body); font-size: var(--ui-text-small); font-weight: var(--ui-weight-regular); text-decoration: none; transition: color var(--ui-duration-quick); }
+  .ui-header-nav > a:hover { color: var(--ui-text-strong); }
+  .ui-header-nav > a:is([aria-current="page"], [aria-current="true"]) { color: var(--ui-text-strong); font-weight: var(--ui-weight-medium); }
+  .ui-header-nav > a:focus-visible { @apply --ui-focus-ring; outline-offset: 0; }
+  .ui-header-nav > a > small { margin-left: var(--ui-space-2xs); padding: 1px 5px; border-radius: var(--ui-radius-xs); background: var(--ui-surface-chip); color: var(--ui-text-muted); box-shadow: inset 0 0 0 1px var(--ui-line-hair); font: var(--ui-weight-medium) .6875rem/1.4 var(--font-family-sans); letter-spacing: .02em; }
+  .ui-header-end { display: flex; align-items: center; gap: var(--ui-space-3xs); margin-left: auto; }
+  .ui-header-divider { width: 1px; height: 1rem; margin-inline: var(--ui-space-xs); background: var(--ui-line-divider); }
+  .ui-version { display: inline-flex; align-items: center; gap: var(--ui-space-3xs); height: 2.25rem; padding: 0 .375rem; border-radius: var(--ui-radius-md); color: var(--ui-text-body); font: var(--ui-weight-regular) var(--ui-text-small)/1 var(--font-family-sans); font-variant-numeric: tabular-nums; }
+}
+
+/*
+ * The site header (`ui-header`, styles/system/shell.css) placed for the site: it sticks above documentation pages and
+ * overlays the homepage and blog as a stickable header that slides away while reading down (`data-tucked`) and is
+ * transparent at the top of the page (`data-background="transparent"`).
+ */
+@layer components {
+  /* A single rhythm for the page header and the modal's matching top bar. */
+  .ui-header, .ui-mobile-menu-bar { --ui-header-target: 2.25rem; --ui-header-icon: 1.125rem; --ui-header-control-gap: .5rem; }
+  .ui-header .ui-button.ui-header-control[data-shape="icon"], .ui-mobile-menu-bar .ui-button.ui-header-control[data-shape="icon"] {
+    position: relative; box-sizing: border-box; flex: 0 0 var(--ui-header-target); width: var(--ui-header-target); min-width: var(--ui-header-target); height: var(--ui-header-target); min-height: var(--ui-header-target); margin: 0; padding: 0; align-items: center; justify-content: center; border-radius: var(--ui-radius-md); line-height: 1;
+  }
+  .ui-header-control.ui-button[data-variant="quiet"]:not(:disabled) { background: transparent; box-shadow: none; translate: none; color: var(--ui-text-muted); }
+  .ui-header-control.ui-button[data-variant="quiet"]:where(:hover, :active, :focus-visible, :has(select:focus-visible)):not(:disabled) { color: var(--ui-text-strong); }
+  .ui-header-control.ui-button > svg:not(.ui-header-external) { flex: none; width: var(--ui-header-icon); height: var(--ui-header-icon); }
+  .ui-header .ui-header-end, .ui-header .ui-header-nav { align-items: center; gap: var(--ui-header-control-gap); }
+  .ui-header .ui-header-divider { flex: none; margin: 0 .25rem; height: var(--ui-header-icon); }
+  .ui-header .ui-header-nav > a, .ui-header .ui-version { height: var(--ui-header-target); }
+  .ui-header { padding-top: env(safe-area-inset-top); padding-inline: max(var(--ui-space-xl), env(safe-area-inset-left)) max(var(--ui-space-xl), env(safe-area-inset-right)); height: calc(3.75rem + env(safe-area-inset-top)); box-sizing: border-box; }
+  .ui-header[data-variant="stickable"] { position: fixed; inset: 0 0 auto; width: 100%; transition: translate var(--ui-duration-base) var(--ui-ease), background-color var(--ui-duration-base), box-shadow var(--ui-duration-base); }
+  .ui-header[data-tucked] { translate: 0 -100%; }
+  /* A focused control stays on screen after the header has tucked away, revealed at once. */
+  .ui-header:focus-within { translate: none; transition-duration: 0s; }
+  .ui-header[data-background="transparent"] { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
+  /* Without scripts the header never leaves its transparent top state, so it scrolls away instead of covering content. */
+  @media (scripting: none) { .ui-header[data-background="transparent"] { position: absolute; } }
+  @media (prefers-reduced-motion: reduce) { .ui-header, .ui-header[data-variant="stickable"] { transition: none; } }
+  @media print { .ui-header { display: none; } }
+
+  .ui-header-brand { display: inline-flex; align-items: center; min-height: var(--ui-header-target); border-radius: var(--ui-radius-sm); }
+  .ui-header-brand:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
+  /* The version chip opens the native version list laid over it. */
+  .ui-header .ui-version { position: relative; cursor: pointer; }
+  .ui-header .ui-version > svg { width: 12px; height: 12px; color: var(--ui-text-muted); }
+  .ui-header .ui-version:hover { color: var(--ui-text-strong); }
+  .ui-header-nav > a > .ui-badge { margin-left: var(--ui-space-2xs); }
+  /* External destinations carry a small raised arrow beside the label or icon. */
+  .ui-header-nav > a:has(.ui-header-external) { position: relative; padding-right: 1.125rem; }
+  .ui-header-nav > a > .ui-header-external, .ui-header-end > .ui-button > .ui-header-external { position: absolute; top: .375rem; right: .125rem; width: .625rem; height: .625rem; pointer-events: none; }
+  /* Anchor the small external mark to the icon centre, independent of the 36/44px target. */
+  .ui-header-end > .ui-button > .ui-header-external { top: calc(50% - .875rem); right: calc(50% - 1rem); }
+  .ui-header-end > .ui-button[data-disabled] { color: var(--ui-text-disabled); pointer-events: none; }
+  /* Icon-only controls name themselves with an ink tooltip under the pointer or keyboard focus. */
+  .ui-header-end > :is(a, button, label) { position: relative; }
+  .ui-header-end > * > .ui-tooltip { top: calc(100% + 8px); left: 50%; translate: -50% 0; opacity: 0; visibility: hidden; transition: opacity var(--ui-duration-quick), visibility 0s linear var(--ui-duration-quick); }
+  .ui-header-end > :is(:hover, :focus-visible, :has(:focus-visible)) > .ui-tooltip { opacity: 1; visibility: visible; transition-delay: 400ms, 400ms; }
+  .ui-header-end > :last-child > .ui-tooltip { left: auto; right: 0; translate: none; }
+  .ui-header-end > :last-child > .ui-tooltip::before { left: auto; right: calc(1rem - 4px); translate: none; }
+  @media (hover: none) { .ui-header-end > * > .ui-tooltip { display: none; } }
+
+  /* Desktop search retains its original hairline pill and visible shortcut. */
+  .ui-header-search { appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; gap: .4375rem; flex: none; height: 1.875rem; margin: 0; padding: 0 .8125rem 0 .6875rem; border: 0; border-radius: var(--ui-radius-pill);
+    background: transparent; color: var(--ui-text-muted); box-shadow: inset 0 0 0 1px var(--ui-line-contour); font: var(--ui-weight-regular) .75rem/1 var(--font-family-sans); cursor: pointer;
+    transition: color var(--ui-duration-quick), box-shadow var(--ui-duration-quick), background-color var(--ui-duration-quick); }
+  .ui-header-search:hover { color: var(--ui-text-strong); background: var(--ui-surface-chip); box-shadow: inset 0 0 0 1px var(--ui-line-strong); }
+  .ui-header-search:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
+  .ui-header-search > svg { flex: none; width: 1rem; height: 1rem; }
+  .ui-header-search > .ui-kbd { min-width: 0; height: auto; padding: 0; background: none; color: inherit; box-shadow: none; font: var(--ui-weight-regular) .6875rem/1 var(--font-family-sans); letter-spacing: .04em; }
+
+  /* The compact header: the menu at the start, the brand centred, search at the end. */
+  .ui-header .ui-header-menu { display: none; }
+  @media (width < 64rem) {
+    .ui-header, .ui-mobile-menu-bar { --ui-header-target: 2.75rem; }
+    .ui-header { gap: var(--ui-space-xs); padding-inline: max(var(--ui-space-xs), env(safe-area-inset-left)) max(var(--ui-space-xs), env(safe-area-inset-right)); }
+    .ui-header .ui-header-menu { display: inline-flex; }
+    .ui-header-brand { margin-inline: auto; }
+    .ui-header > :is(.ui-version, .ui-header-nav), .ui-header-end > :not(.ui-header-search) { display: none; }
+    .ui-header-end { margin-left: 0; }
+    .ui-header-search { justify-content: center; width: var(--ui-header-target); height: var(--ui-header-target); padding: 0; border-radius: var(--ui-radius-md); box-shadow: none; }
+    .ui-header-search:hover { background: transparent; box-shadow: none; }
+    .ui-header-search > svg { width: var(--ui-header-icon); height: var(--ui-header-icon); }
+    .ui-header-search > .ui-kbd { display: none; }
+    /* Search can be the last visible action while hidden siblings still follow it. */
+    .ui-header-end > * > .ui-tooltip { left: auto; right: 0; translate: none; }
+    .ui-header-end > * > .ui-tooltip::before { left: auto; right: calc(var(--ui-header-target) / 2 - 4px); translate: none; }
+    /* Equal ends keep the brand centred, including the homepage's GitHub action. */
+    .ui-header .ui-header-end { width: var(--ui-header-target); }
+  }
+  @media (width >= 64rem) {
+    /* The homepage's wide header leaves search out. */
+    .ui-header-search[data-compact] { display: none; }
+  }
+}

package/src/styles/system/hint.css

@@ -0,0 +1,5 @@
+/* hint: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-hint { display: flex; align-items: flex-start; gap: var(--ui-space-xs); color: var(--ui-text-muted); font-size: var(--ui-text-small); line-height: var(--ui-leading-small); }
+  .ui-hint > svg { flex: none; width: 1rem; height: 1rem; margin-top: calc((1lh - 1rem) / 2); color: var(--ui-text-body); stroke-width: 1.5; }
+}

package/src/styles/system/index.css

@@ -0,0 +1,13 @@
+/* index: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--ui-space-sm); }
+  .ui-index > a { display: grid; align-content: start; gap: var(--ui-space-2xs); padding: var(--ui-space-md) var(--ui-space-md) 1.125rem; border-radius: var(--ui-radius-xl); background: var(--ui-surface-sheet); color: var(--ui-text-body); box-shadow: inset 0 0 0 1px var(--ui-line-contour), 0 1px 0 var(--ui-lip); text-decoration: none; transition: box-shadow var(--ui-duration-quick) var(--ui-ease), translate var(--ui-duration-quick) var(--ui-ease); }
+  .ui-index > a:hover { translate: 0 -.5px; box-shadow: var(--ui-elevation-rise-1h); }
+  .ui-index > a:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
+  .ui-index > a > svg { width: 18px; height: 18px; margin-bottom: var(--ui-space-2xs); color: var(--ui-text-strong); stroke-width: 1.5; }
+  .ui-index > a > b { color: var(--ui-text-strong); font-size: .9375rem; font-weight: var(--ui-weight-medium); line-height: 1.4; letter-spacing: -.006em; }
+  .ui-index > a > span { font-size: .8125rem; line-height: 1.6; color: var(--ui-text-muted); }
+  .ui-index > a > b code { font: var(--ui-weight-medium) .875rem/1.45 var(--font-family-mono); letter-spacing: 0; overflow-wrap: anywhere; }
+  .ui-index[data-density="compact"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--ui-space-xs); }
+  .ui-index[data-density="compact"] > a { gap: 2px; padding: var(--ui-space-sm) var(--ui-space-md); }
+}

package/src/styles/system/inline-code.css

@@ -0,0 +1,4 @@
+/* inline-code: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-inline-code { padding: .125em .375em; border-radius: var(--ui-radius-xs); background: var(--ui-surface-chip); color: var(--ui-text-strong); box-shadow: inset 0 0 0 1px var(--ui-line-hair); font: var(--ui-weight-regular) .84em/1 var(--font-family-mono); overflow-wrap: anywhere; }
+}

package/src/styles/system/kbd.css

@@ -0,0 +1,4 @@
+/* kbd: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-kbd { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 .3125rem; border-radius: var(--ui-radius-xs); background: transparent; color: var(--ui-text-muted); box-shadow: inset 0 0 0 1px var(--ui-line-contour); font: var(--ui-weight-regular) .6875rem/1 var(--font-family-mono); }
+}

package/src/styles/system/logos.css

@@ -0,0 +1,10 @@
+@prune native;
+/* logos: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--ui-space-2xs) var(--ui-space-md); }
+  .ui-logos > a { display: flex; align-items: center; gap: var(--ui-space-sm); min-width: 0; min-height: 2.75rem; padding: .5rem var(--ui-space-xs); border-radius: var(--ui-radius-sm); color: var(--ui-text-body); font-size: .8125rem; line-height: 1.5; text-decoration: none; transition: background var(--ui-duration-quick) var(--ui-ease), color var(--ui-duration-quick) var(--ui-ease); }
+  .ui-logos > a:hover { color: var(--ui-text-strong); background: var(--ui-surface-chip); }
+  .ui-logos > a:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
+  .ui-logos > a > svg { flex: none; width: 1.25rem; height: 1.25rem; }
+  .ui-logos > a > span { min-width: 0; overflow-wrap: anywhere; }
+}

package/src/styles/system/menu.css

@@ -0,0 +1,14 @@
+@prune native;
+/* menu: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-menu { display: grid; gap: 1px; min-width: 12rem; margin: 0; padding: var(--ui-inset); border-radius: var(--ui-radius-lg); background: var(--ui-surface-float); box-shadow: var(--ui-elevation-rise-3); list-style: none; }
+  .ui-menu-label { padding: .375rem .625rem .25rem; color: var(--ui-text-muted); @apply --ui-label-type; }
+  .ui-menu-item { appearance: none; display: flex; align-items: center; gap: var(--ui-space-xs); width: 100%; min-height: 2rem; padding: 0 .625rem; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-text-body); font: var(--ui-weight-regular) var(--ui-text-small)/1 var(--font-family-sans); text-align: start; text-decoration: none; cursor: pointer; }
+  .ui-menu-item > svg { flex: none; width: 15px; height: 15px; color: var(--ui-text-muted); }
+  .ui-menu-item > small { margin-left: auto; color: var(--ui-text-muted); font: var(--ui-weight-regular) .6875rem/1 var(--font-family-mono); }
+  .ui-menu-item:is(:hover, [data-highlighted]) { color: var(--ui-text-strong); background: light-dark(oklch(22% .002 265 / .05), oklch(100% 0 none / .06)); }
+  .ui-menu-item[aria-checked="true"] { color: var(--ui-text-strong); font-weight: var(--ui-weight-medium); }
+  .ui-menu-item[aria-checked="true"]::after { content: ""; width: 14px; height: 14px; margin-left: auto; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
+  .ui-menu-item:focus-visible { @apply --ui-focus-ring; outline-offset: -2px; }
+  .ui-menu-separator { height: 1px; margin: var(--ui-space-3xs) .375rem; background: var(--ui-line-hair); }
+}

package/src/styles/system/metrics.css

@@ -0,0 +1,22 @@
+/* metrics: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--ui-inset); }
+  .ui-metric { display: grid; align-content: start; min-width: 0; gap: 6px; overflow-wrap: anywhere; padding: var(--ui-space-md); border-radius: var(--ui-radius-lg); @apply --ui-sheet-face; box-shadow: var(--ui-elevation-rise-1); }
+  .ui-metric > small { color: var(--ui-text-muted); @apply --ui-label-type; }
+  .ui-metric > b { color: var(--ui-text-strong); font-size: 1.625rem; font-weight: var(--ui-weight-heading); letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
+  .ui-metric > b > span { color: var(--ui-text-muted); font-size: .875rem; font-weight: var(--ui-weight-medium); letter-spacing: 0; }
+  .ui-metric > p { margin: 0; color: var(--ui-text-muted); font-size: .75rem; line-height: 1.5; }
+  .ui-bar { height: 6px; border-radius: var(--ui-radius-pill); background: var(--ui-surface-well); box-shadow: var(--ui-elevation-sink); overflow: hidden; }
+  .ui-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--ui-text-strong); }
+  .ui-bar > i[data-tone="muted"] { background: var(--ui-line-mark); }
+  .ui-bar > i[data-tone="blue"] { background: var(--ui-tone-blue); }
+  .ui-bar > i[data-tone="violet"] { background: var(--ui-tone-violet); }
+  .ui-bar > i[data-tone="amber"] { background: var(--ui-tone-amber); }
+  .ui-bar > i[data-tone="green"] { background: var(--ui-tone-green); }
+  .ui-bar > i[data-tone="red"] { background: var(--ui-tone-red); }
+  .ui-bar > i[data-tone="neutral"] { background: var(--ui-tone-neutral); }
+  .ui-bar[data-variant="stacked"] { display: flex; gap: 1px; }
+  .ui-bar[data-variant="stacked"] > i { flex: none; border-radius: 0; }
+  .ui-bar[data-variant="stacked"] > i:first-child { border-start-start-radius: inherit; border-end-start-radius: inherit; }
+  .ui-bar[data-variant="stacked"] > i:last-child { border-start-end-radius: inherit; border-end-end-radius: inherit; }
+}

package/src/styles/system/pagehead.css

@@ -0,0 +1,13 @@
+/* pagehead: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-pagehead { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-md); margin-bottom: var(--ui-space-2xl); }
+  .ui-pagehead-kicker { margin-bottom: calc(var(--ui-space-3xs) * -1); color: var(--ui-text-muted); @apply --ui-eyebrow-type; }
+  .ui-pagehead h1 { margin: 0; color: var(--ui-text-strong); font-size: var(--ui-text-title); font-weight: var(--ui-weight-heading); line-height: var(--ui-leading-title); letter-spacing: var(--ui-tracking-title); text-wrap: balance; overflow-wrap: break-word; }
+  .ui-pagehead p { max-width: calc(var(--measure, 41rem) * 1.125); margin: 0; color: var(--ui-text-body); font-size: var(--ui-text-lead); line-height: var(--ui-leading-lead); letter-spacing: -.004em; text-wrap: pretty; overflow-wrap: break-word; }
+  .ui-pagehead p + p:not([class]) { max-width: var(--measure, 41rem); margin-top: calc(var(--ui-space-xs) * -1); font-size: var(--ui-text-base); line-height: var(--ui-leading-body); letter-spacing: 0; }
+
+  .ui-pagehead-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-xs) var(--ui-space-md); padding-top: var(--ui-space-xs); color: var(--ui-text-muted); font-size: .78125rem; }
+  .ui-pagehead-meta > a { color: inherit; text-decoration: none; }
+  .ui-pagehead-meta > a:hover { color: var(--ui-text-strong); }
+  .ui-pagehead-meta > span + span::before, .ui-pagehead-meta > * + a::before { content: "·"; margin-right: var(--ui-space-md); color: var(--ui-text-disabled); }
+}

package/src/styles/system/pager.css

@@ -0,0 +1,13 @@
+/* pager: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-xl); margin-top: 5rem; padding-top: var(--ui-space-lg); box-shadow: inset 0 1px 0 var(--ui-line-hair); }
+  .ui-pager > a { display: grid; align-content: start; gap: var(--ui-space-2xs); color: var(--ui-text-body); text-decoration: none; transition: color var(--ui-duration-quick); }
+  .ui-pager > a:hover { color: var(--ui-text-strong); }
+  .ui-pager > a:focus-visible { @apply --ui-focus-ring; outline-offset: 4px; border-radius: var(--ui-radius-xs); }
+  .ui-pager > a[rel="next"] { justify-items: end; text-align: right; }
+  .ui-pager small { color: var(--ui-text-muted); @apply --ui-eyebrow-type; }
+  .ui-pager b { font-weight: var(--ui-weight-regular); font-size: var(--ui-text-base); line-height: 1.5; text-wrap: balance; }
+  .ui-pager > a[rel="prev"] > b::before { content: "←"; margin-right: .5em; color: var(--ui-text-muted); }
+  .ui-pager > a[rel="next"] > b::after { content: "→"; margin-left: .5em; color: var(--ui-text-muted); }
+  .ui-pager > a:hover > b::before, .ui-pager > a:hover > b::after { color: var(--ui-text-strong); }
+}

package/src/styles/system/parameters.css

@@ -0,0 +1,17 @@
+/* parameters: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-params { display: grid; margin: 0; border-radius: var(--ui-radius-xl); background: var(--ui-surface-sheet); box-shadow: inset 0 0 0 1px var(--ui-line-contour); }
+  .ui-params > div { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); gap: var(--ui-space-xs) var(--ui-space-lg); padding: var(--ui-space-sm) var(--ui-space-md); border-top: 1px solid var(--ui-line-hair); }
+  .ui-params > div:first-child { border-top: 0; }
+  .ui-params dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; overflow-wrap: anywhere; color: var(--ui-text-strong); font: var(--ui-weight-medium) .8125rem/1.5 var(--font-family-mono); }
+  .ui-params dt small { color: var(--ui-text-muted); font-weight: var(--ui-weight-regular); }
+  .ui-params dd { margin: 0; color: var(--ui-text-body); font-size: var(--ui-text-small); line-height: 1.6; overflow-wrap: anywhere; }
+  .ui-params dd > * { margin: 0; }
+  .ui-params dd > * + * { margin-top: var(--ui-space-xs); }
+  .ui-params dd small { color: var(--ui-text-muted); font-size: .75rem; }
+  .ui-params dd a:not([class]) { color: var(--ui-text-strong); text-decoration: underline 1px var(--ui-line-strong); text-underline-offset: .24em; }
+  .ui-params dd a:not([class]):hover { text-decoration-color: currentColor; }
+  .ui-params :is(dt, dd) :is(h3, h4) { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
+  .ui-params dd code { padding: .125em .375em; border-radius: var(--ui-radius-xs); background: var(--ui-surface-chip); color: var(--ui-text-strong); box-shadow: inset 0 0 0 1px var(--ui-line-hair); font: var(--ui-weight-regular) .8125rem/1 var(--font-family-mono); }
+  @media (width < 35rem) { .ui-params > div { grid-template-columns: 1fr; } }
+}

package/src/styles/system/prompt.css

@@ -0,0 +1,7 @@
+/* prompt: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-prompt { --code-corner: calc(var(--ui-space-md) + var(--ui-text-code) * var(--ui-leading-code) / 2 - 1rem); }
+  .ui-prompt { display: grid; gap: 0; min-width: 0; overflow: hidden; border-radius: var(--ui-radius-xl); background: var(--ui-surface-code); box-shadow: inset 0 0 0 1px var(--ui-line-contour), 0 1px 0 var(--ui-lip); }
+  .ui-prompt-body { margin: 0; padding: var(--ui-space-xs) var(--ui-space-md) var(--ui-space-md); color: var(--ui-text-strong); font: var(--ui-weight-regular) .9375rem/1.7 var(--font-family-sans); white-space: pre-wrap; }
+  .ui-prompt-body var { padding: 0 .25em; border-radius: var(--ui-radius-xs); background: var(--ui-surface-chip); color: var(--ui-text-body); box-shadow: inset 0 0 0 1px var(--ui-line-hair); font: var(--ui-weight-regular) .8125rem/1 var(--font-family-mono); font-style: normal; }
+}

package/src/styles/system/prose.css

@@ -1,75 +1,4 @@
-/* Prose: the reading column. Rules reach only the article's own flow, never into components.
-   Framed surfaces (tray, code, table, parameters, prompt, tree) bleed past the text by one gutter; index cards are links and keep its edges. */
-@layer components {
-  /* One line unit (--line, 32px at 16px: body text set at line-height 2) sets the vertical rhythm: paragraphs part by
-     three quarters of it, sections open on two lines, wide blocks keep one line of air. */
-  .ui-prose { --measure: 41rem; --bleed: 2rem; --line: 2rem; color: var(--ui-text-body); font-size: var(--ui-text-base); line-height: var(--ui-leading-body); }
-  .ui-prose > :is(p, ul, ol, h2, h3, h4, blockquote, .ui-callout, .ui-disclosure, hr):not(:where(.ui-steps)) { max-width: var(--measure); }
-  .ui-prose > :is(.ui-tray, .ui-code, .ui-table, .ui-params, .ui-prompt, .ui-tree) { margin-inline: calc(var(--bleed) * -1); }
-  @media (width < 52rem) { .ui-prose { --bleed: 0rem; } }
-  .ui-prose > :is(p, ul, ol, blockquote) { margin-block: calc(var(--line) * .75); }
-  .ui-prose > :is(.ui-tray, .ui-code, .ui-table, .ui-callout, .ui-steps, .ui-index, .ui-logos, .ui-params, .ui-prompt, .ui-tree) { margin-block: var(--line); }
-  /* Files that answer one instruction sit together: consecutive code panels part by a small gap, not a line. */
-  .ui-prose > .ui-code:has(+ .ui-code) { margin-bottom: var(--ui-space-sm); }
-  .ui-prose > .ui-code + .ui-code { margin-top: var(--ui-space-sm); }
-  .ui-prose > h2 { margin: calc(var(--line) * 2) 0 calc(var(--line) * .5); color: var(--ui-text-strong); font-size: var(--ui-text-h2); font-weight: var(--ui-weight-heading); line-height: var(--ui-leading-h2); letter-spacing: var(--ui-tracking-h2); text-wrap: balance; }
-  .ui-prose > h3 { margin: calc(var(--line) * 1.5) 0 calc(var(--line) * .375); color: var(--ui-text-strong); font-size: var(--ui-text-h3); font-weight: var(--ui-weight-heading); line-height: var(--ui-leading-h3); letter-spacing: var(--ui-tracking-h3); }
-  .ui-prose > h4 { margin: calc(var(--line) * 1.25) 0 calc(var(--line) * .25); color: var(--ui-text-strong); font-size: var(--ui-text-base); font-weight: var(--ui-weight-strong); line-height: 1.5rem; }
-  /* A subsection that opens its section sits close under it, as one heading group. */
-  .ui-prose > h2 + h3, .ui-prose > h3 + :is(h3, h4) { margin-top: calc(var(--line) * .5); }
-  .ui-prose > :is(h2, h3) { position: relative; width: fit-content; scroll-margin-top: 5rem; }
-  /* A section opens on one hairline across the reading measure, closer to its heading than to the text before it. */
-  .ui-prose > h2 { width: auto; }
-  .ui-prose > h2:not(:first-child)::before { content: ""; display: var(--section-rule, block); position: absolute; top: calc(var(--line) * -.875); inset-inline: 0 var(--rule-end, 0); height: 1px; background: var(--ui-line-hair); pointer-events: none; }
-  /* The page's first section keeps only its space (after the page head too), and so does one after a disclosure, which
-     already closes on a hairline, even as the last part of a section wrapper;
-     legacy anchors and space-only rules in between do not count. A disclosure joined under its code is a framed panel, not
-     a rule, so the heading after it keeps its own. */
-  .ui-prose > :is(a[id]:empty, .sr-only):first-child + h2,
-  .ui-prose > .ui-disclosure:not(.ui-code + *) + h2, .ui-prose > .ui-disclosure:not(.ui-code + *) + a[id]:empty + h2,
-  .ui-prose > .ui-disclosure:not(.ui-code + *) + hr + h2, .ui-prose > .ui-disclosure:not(.ui-code + *) + hr + a[id]:empty + h2,
-  .ui-prose > .ui-pagehead + h2, .ui-prose > .ui-pagehead + a[id]:empty + h2,
-  .ui-prose > :has(> .ui-disclosure:last-child) + h2 { --section-rule: none; }
-  .ui-anchor { position: absolute; right: 100%; top: 50%; translate: -.375rem -50%; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--ui-radius-sm); color: var(--ui-text-disabled); font: var(--ui-weight-regular) .875rem/1 var(--font-family-mono); opacity: 0; text-decoration: none; transition: opacity var(--ui-duration-quick), color var(--ui-duration-quick); }
-  .ui-anchor:hover { color: var(--ui-text-muted); }
-  .ui-prose > :is(h2, h3):is(:hover, :target, :focus-within) > .ui-anchor { opacity: 1; }
-  .ui-anchor:focus-visible { opacity: 1; @apply --ui-focus-ring; outline-offset: 1px; }
-  .ui-prose > :is(p, ul, ol, blockquote, h2, h3, h4) :is(strong, b) { color: var(--ui-text-strong); font-weight: var(--ui-weight-strong); }
-  .ui-prose > :is(p, ul, ol, blockquote) a:not([class]) { color: var(--ui-text-strong); text-decoration: underline; text-decoration-color: var(--ui-line-strong); text-decoration-thickness: 1px; text-underline-offset: .24em; transition: text-decoration-color var(--ui-duration-quick); }
-  .ui-prose > :is(p, ul, ol, blockquote) a:not([class]):hover { text-decoration-color: currentColor; }
-  .ui-prose > :is(p, ul, ol, blockquote) a:not([class]):focus-visible { @apply --ui-focus-ring; outline-offset: 2px; border-radius: var(--ui-radius-xs); }
-  /* Inline code is set apart by a hairline chip in a mid ink, never the darkest spot of a paragraph. */
-  .ui-prose > :is(p, ul, ol, blockquote, h2, h3, h4) code:not(pre code), .ui-callout code { padding: .125em .375em; border-radius: var(--ui-radius-xs); background: var(--ui-surface-chip); color: color-mix(in oklab, var(--ui-text-strong) 60%, var(--ui-text-body)); box-shadow: inset 0 0 0 1px var(--ui-line-hair); font: var(--ui-weight-regular) .84em/1 var(--font-family-mono); overflow-wrap: anywhere; }
-  /* In a heading, code is the heading's own words in the mono face. */
-  .ui-prose > :is(h2, h3, h4) code:not(pre code) { padding: 0; background: none; box-shadow: none; color: inherit; font-size: .9em; }
-  .ui-prose > :is(ul, ol):not([class]) { padding-left: 1.25em; }
-  .ui-prose > :is(ul, ol):not([class]) li { margin-block: calc(var(--line) * .25); padding-left: .375em; }
-  .ui-prose > :is(ul, ol):not([class]) li > :is(p, ul, ol) { margin-block: calc(var(--line) * .25); }
-  .ui-prose > ul:not([class]) { list-style: disc; }
-  .ui-prose > ul:not([class]) li::marker { color: var(--ui-text-disabled); font-size: .8em; }
-  .ui-prose > ol:not([class]) li::marker { color: var(--ui-text-muted); font: var(--ui-weight-regular) .875em var(--font-family-sans); font-variant-numeric: tabular-nums; }
-  .ui-prose > hr { height: 1px; margin: calc(var(--line) * 1.75) 0 calc(var(--line) * 1.25); border: 0; background: var(--ui-line-divider); }
-  .ui-prose > hr + * { margin-top: 0; }
-  /* A rule an author sets before a section heading (or the legacy anchor before it) is space only: the heading's own opening already parts the sections. */
-  .ui-prose > hr:has(+ h2, + a[id]:empty + h2) { height: 0; margin: 0; background: none; }
-  .ui-prose > hr + h2 { margin-top: calc(var(--line) * 2); }
-  .ui-prose > blockquote { margin-inline: 0; padding: .25rem 0 .25rem 1.25rem; box-shadow: inset 1px 0 0 var(--ui-line-strong); color: color-mix(in oklab, var(--ui-text-strong) 50%, var(--ui-text-body)); }
-  .ui-prose > blockquote > p { margin-block: 0; } .ui-prose > blockquote > p + p { margin-top: .75em; }
-  .ui-prose > figure { margin: var(--line) 0; }
-  .ui-prose > figure:not(.ui-tray) > figcaption { margin-top: var(--ui-space-sm); color: var(--ui-text-muted); font-size: var(--ui-text-caption); line-height: var(--ui-leading-caption); }
-
-  /* Callout: one icon, one tint, a hairline — never a thick left border */
-  /* Hint: how to use the example that follows, a muted line led by its gesture */
-  .ui-hint { display: flex; align-items: flex-start; gap: var(--ui-space-xs); color: var(--ui-text-muted); font-size: var(--ui-text-small); line-height: var(--ui-leading-small); }
-  .ui-hint > svg { flex: none; width: 1rem; height: 1rem; margin-top: calc((1lh - 1rem) / 2); color: var(--ui-text-body); stroke-width: 1.5; }
-  .ui-callout { --tone: var(--ui-tone-neutral); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ui-space-sm); padding: .875rem var(--ui-space-md); border-radius: var(--ui-radius-lg);
-    background: color-mix(in oklab, var(--tone) 2.5%, var(--ui-surface-canvas)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 12%, var(--ui-line-contour)); color: var(--ui-text-body); font-size: var(--ui-text-small); line-height: var(--ui-leading-small); }
-  .ui-callout > svg { width: 1rem; height: 1rem; margin-top: .21875rem; color: color-mix(in oklab, var(--tone) 80%, var(--ui-text-strong)); }
-  .ui-callout > div { min-width: 0; overflow-wrap: anywhere; }
-  .ui-callout > div > :first-child { margin-top: 0; } .ui-callout > div > :last-child { margin-bottom: 0; }
-  .ui-callout b { color: var(--ui-text-strong); font-weight: var(--ui-weight-strong); }
-  .ui-callout[data-tone="info"] { --tone: var(--ui-status-info); }
-  .ui-callout[data-tone="success"], .ui-callout[data-tone="do"] { --tone: var(--ui-status-success); }
-  .ui-callout[data-tone="warning"] { --tone: var(--ui-status-warning); }
-  .ui-callout[data-tone="danger"], .ui-callout[data-tone="dont"] { --tone: var(--ui-status-danger); }
-}
+/* Explicit full prose collection. Components import their own leaf stylesheet. */
+@import './reading.css';
+@import './callout.css';
+@import './hint.css';

package/src/styles/system/range.css

@@ -0,0 +1,12 @@
+/* range: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-range { --value: 50%; appearance: none; width: 100%; min-width: 6rem; height: 1.75rem; margin: 0; background: transparent; cursor: ew-resize; }
+  .ui-range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--ui-radius-pill); background: linear-gradient(90deg, var(--ui-text-strong) var(--value), var(--ui-line-divider) var(--value)); }
+  .ui-range::-moz-range-track { height: 4px; border-radius: var(--ui-radius-pill); background: var(--ui-line-divider); }
+  .ui-range::-moz-range-progress { height: 4px; border-radius: var(--ui-radius-pill); background: var(--ui-text-strong); }
+  .ui-range::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 0; border-radius: 50%; background: linear-gradient(180deg, oklch(100% 0 none), oklch(96.5% .0011 265)); box-shadow: 0 0 0 1px var(--ui-line-strong), 0 1px 1px var(--ui-shade-1), 0 2px 4px -1px var(--ui-shade-2); }
+  .ui-range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: linear-gradient(180deg, oklch(100% 0 none), oklch(96.5% .0011 265)); box-shadow: 0 0 0 1px var(--ui-line-strong), 0 1px 1px var(--ui-shade-1), 0 2px 4px -1px var(--ui-shade-2); }
+  .ui-range:focus-visible { outline: none; }
+  .ui-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--ui-line-strong), 0 0 0 2px var(--ui-surface-stage), 0 0 0 4px var(--ui-focus); }
+  .ui-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--ui-line-strong), 0 0 0 2px var(--ui-surface-stage), 0 0 0 4px var(--ui-focus); }
+}

package/src/styles/system/reading.css

@@ -0,0 +1,44 @@
+/* reading: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-prose { --measure: 41rem; --bleed: 2rem; --line: 2rem; color: var(--ui-text-body); font-size: var(--ui-text-base); line-height: var(--ui-leading-body); }
+  .ui-prose > :is(p, ul, ol, h2, h3, h4, blockquote, .ui-callout, .ui-disclosure, hr):not(:where(.ui-steps)) { max-width: var(--measure); }
+  /* A comparison owns the table’s outer spacing; its inner frame must not bleed a second time. */
+  .ui-prose > :is(.ui-tray, .ui-code, .ui-table, .document-comparison, .ui-params, .ui-prompt, .ui-tree) { margin-inline: calc(var(--bleed) * -1); }
+  @media (width < 52rem) { .ui-prose { --bleed: 0rem; } }
+  .ui-prose > :is(p, ul, ol, blockquote) { margin-block: calc(var(--line) * .75); }
+  .ui-prose > :is(.ui-tray, .ui-code, .ui-table, .document-comparison, .ui-callout, .ui-steps, .ui-index, .ui-logos, .ui-params, .ui-prompt, .ui-tree) { margin-block: var(--line); }
+  .ui-prose > .ui-code:has(+ .ui-code) { margin-bottom: var(--ui-space-sm); }
+  .ui-prose > .ui-code + .ui-code { margin-top: var(--ui-space-sm); }
+  .ui-prose > h2 { margin: calc(var(--line) * 2) 0 calc(var(--line) * .5); color: var(--ui-text-strong); font-size: var(--ui-text-h2); font-weight: var(--ui-weight-heading); line-height: var(--ui-leading-h2); letter-spacing: var(--ui-tracking-h2); text-wrap: balance; }
+  .ui-prose > h3 { margin: calc(var(--line) * 1.5) 0 calc(var(--line) * .375); color: var(--ui-text-strong); font-size: var(--ui-text-h3); font-weight: var(--ui-weight-heading); line-height: var(--ui-leading-h3); letter-spacing: var(--ui-tracking-h3); }
+  .ui-prose > h4 { margin: calc(var(--line) * 1.25) 0 calc(var(--line) * .25); color: var(--ui-text-strong); font-size: var(--ui-text-base); font-weight: var(--ui-weight-strong); line-height: 1.5rem; }
+  .ui-prose > h2 + h3, .ui-prose > h3 + :is(h3, h4) { margin-top: calc(var(--line) * .5); }
+  .ui-prose > :is(h2, h3) { position: relative; width: fit-content; scroll-margin-top: 5rem; }
+  .ui-prose > h2 { width: auto; }
+  .ui-prose > h2:not(:first-child)::before { content: ""; display: var(--section-rule, block); position: absolute; top: calc(var(--line) * -.875); inset-inline: 0 var(--rule-end, 0); height: 1px; background: var(--ui-line-hair); pointer-events: none; }
+  .ui-prose > :is(a[id]:empty, .sr-only):first-child + h2, .ui-prose > .ui-disclosure:not(.ui-code + *) + h2, .ui-prose > .ui-disclosure:not(.ui-code + *) + a[id]:empty + h2, .ui-prose > .ui-disclosure:not(.ui-code + *) + hr + h2, .ui-prose > .ui-disclosure:not(.ui-code + *) + hr + a[id]:empty + h2, .ui-prose > .ui-pagehead + h2, .ui-prose > .ui-pagehead + a[id]:empty + h2, .ui-prose > :has(> .ui-disclosure:last-child) + h2 { --section-rule: none; }
+  .ui-anchor { position: absolute; right: 100%; top: 50%; translate: -.375rem -50%; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--ui-radius-sm); color: var(--ui-text-disabled); font: var(--ui-weight-regular) .875rem/1 var(--font-family-mono); opacity: 0; text-decoration: none; transition: opacity var(--ui-duration-quick), color var(--ui-duration-quick); }
+  .ui-anchor:hover { color: var(--ui-text-muted); }
+  .ui-prose > :is(h2, h3):is(:hover, :target, :focus-within) > .ui-anchor { opacity: 1; }
+  .ui-anchor:focus-visible { opacity: 1; @apply --ui-focus-ring; outline-offset: 1px; }
+  .ui-prose > :is(p, ul, ol, blockquote, h2, h3, h4) :is(strong, b) { color: var(--ui-text-strong); font-weight: var(--ui-weight-strong); }
+  .ui-prose > :is(p, ul, ol, blockquote) a:not([class]) { color: var(--ui-text-strong); text-decoration: underline; text-decoration-color: var(--ui-line-strong); text-decoration-thickness: 1px; text-underline-offset: .24em; transition: text-decoration-color var(--ui-duration-quick); }
+  .ui-prose > :is(p, ul, ol, blockquote) a:not([class]):hover { text-decoration-color: currentColor; }
+  .ui-prose > :is(p, ul, ol, blockquote) a:not([class]):focus-visible { @apply --ui-focus-ring; outline-offset: 2px; border-radius: var(--ui-radius-xs); }
+  .ui-prose > :is(p, ul, ol, blockquote, h2, h3, h4) code:not(pre code) { padding: .125em .375em; border-radius: var(--ui-radius-xs); background: var(--ui-surface-chip); color: color-mix(in oklab, var(--ui-text-strong) 60%, var(--ui-text-body)); box-shadow: inset 0 0 0 1px var(--ui-line-hair); font: var(--ui-weight-regular) .84em/1 var(--font-family-mono); overflow-wrap: anywhere; }
+  .ui-prose > :is(h2, h3, h4) code:not(pre code) { padding: 0; background: none; box-shadow: none; color: inherit; font-size: .9em; }
+  .ui-prose > :is(ul, ol):not([class]) { padding-left: 1.25em; }
+  .ui-prose > :is(ul, ol):not([class]) li { margin-block: calc(var(--line) * .25); padding-left: .375em; }
+  .ui-prose > :is(ul, ol):not([class]) li > :is(p, ul, ol) { margin-block: calc(var(--line) * .25); }
+  .ui-prose > ul:not([class]) { list-style: disc; }
+  .ui-prose > ul:not([class]) li::marker { color: var(--ui-text-disabled); font-size: .8em; }
+  .ui-prose > ol:not([class]) li::marker { color: var(--ui-text-muted); font: var(--ui-weight-regular) .875em var(--font-family-sans); font-variant-numeric: tabular-nums; }
+  .ui-prose > hr { height: 1px; margin: calc(var(--line) * 1.75) 0 calc(var(--line) * 1.25); border: 0; background: var(--ui-line-divider); }
+  .ui-prose > hr + * { margin-top: 0; }
+  .ui-prose > hr:has(+ h2, + a[id]:empty + h2) { height: 0; margin: 0; background: none; }
+  .ui-prose > hr + h2 { margin-top: calc(var(--line) * 2); }
+  .ui-prose > blockquote { margin-inline: 0; padding: .25rem 0 .25rem 1.25rem; box-shadow: inset 1px 0 0 var(--ui-line-strong); color: color-mix(in oklab, var(--ui-text-strong) 50%, var(--ui-text-body)); }
+  .ui-prose > blockquote > p { margin-block: 0; } .ui-prose > blockquote > p + p { margin-top: .75em; }
+  .ui-prose > figure { margin: var(--line) 0; }
+  .ui-prose > figure:not(.ui-tray) > figcaption { margin-top: var(--ui-space-sm); color: var(--ui-text-muted); font-size: var(--ui-text-caption); line-height: var(--ui-leading-caption); }
+}

package/src/styles/system/scroll.css

@@ -0,0 +1,6 @@
+@prune native;
+/* scroll: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-scroll { overflow: auto; overscroll-behavior: contain; max-height: 16rem; border-radius: var(--ui-radius-lg); background: var(--ui-surface-well); box-shadow: var(--ui-elevation-sink); }
+  .ui-scroll:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
+}

package/src/styles/system/search-trigger.css

@@ -0,0 +1,10 @@
+/* search-trigger: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-search-trigger { appearance: none; display: flex; align-items: center; gap: .625rem; width: 100%; height: 2.5rem; padding: 0; border: 0; border-radius: 0;
+    background: transparent; color: var(--ui-text-muted); box-shadow: inset 0 -1px 0 var(--ui-line-hair); font: var(--ui-weight-regular) var(--ui-text-small)/1 var(--font-family-sans); cursor: pointer; transition: color var(--ui-duration-quick), box-shadow var(--ui-duration-quick); }
+  .ui-search-trigger:hover { color: var(--ui-text-strong); box-shadow: inset 0 -1px 0 var(--ui-line-strong); }
+  .ui-search-trigger > .ui-kbd { box-shadow: none; }
+  .ui-search-trigger:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; border-radius: var(--ui-radius-sm); }
+  .ui-search-trigger > svg { flex: none; width: 15px; height: 15px; }
+  .ui-search-trigger > .ui-kbd { margin-left: auto; }
+}

package/src/styles/system/segmented.css

@@ -0,0 +1,22 @@
+/* segmented: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 3px; border-radius: calc(var(--ui-radius-md) + 3px); background: var(--ui-surface-well); box-shadow: var(--ui-elevation-sink); }
+  .ui-segmented > :is(button, a) {
+    appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 1.875rem; min-width: 3.5rem; padding: 0 .75rem; border: 0; border-radius: var(--ui-radius-md); background: transparent;
+    color: var(--ui-text-muted); font: var(--ui-weight-medium) .78125rem/1 var(--font-family-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: color var(--ui-duration-quick), background-color var(--ui-duration-quick), box-shadow var(--ui-duration-quick);
+  }
+  .ui-segmented > :is(button, a):hover:not(:disabled) { color: var(--ui-text-strong); }
+  .ui-segmented > :is(button, a):is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current="page"]) { color: var(--ui-text-strong); @apply --ui-sheet-face; box-shadow: var(--ui-elevation-rise-1); }
+  .ui-segmented > :is(button, a):focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
+  .ui-segmented > button:disabled { color: var(--ui-text-disabled); cursor: not-allowed; }
+  .ui-segmented[data-variant="underline"] { display: flex; gap: 0 var(--ui-space-lg); padding: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--ui-line-divider); }
+  .ui-segmented[data-variant="underline"] > :is(button, a) { min-width: 0; min-height: 2.75rem; padding: 0; border-radius: 0; color: var(--ui-text-muted); font: var(--ui-weight-regular) var(--ui-text-small)/1.4 var(--font-family-sans); }
+  .ui-segmented[data-variant="underline"] > :is(button, a):is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current="page"]) { color: var(--ui-text-strong); background: none; box-shadow: inset 0 -2px 0 var(--ui-text-strong); }
+  .ui-segmented[data-variant="underline"] > :is(button, a):focus-visible { outline-offset: -2px; border-radius: var(--ui-radius-xs); }
+  .ui-segmented[data-size="lg"] { padding: 4px; border-radius: calc(var(--ui-radius-md) + 4px); }
+  .ui-segmented[data-size="lg"] > :is(button, a) { min-height: 2.25rem; border-radius: var(--ui-radius-md); font-size: .8125rem; }
+
+  @media (pointer: coarse) {
+    .ui-segmented > button { min-height: 2.5rem; }
+  }
+}

package/src/styles/system/sheet.css

@@ -0,0 +1,8 @@
+/* sheet: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-sheet { position: relative; border-radius: var(--ui-radius-xl); @apply --ui-sheet-face; color: var(--ui-text-body); box-shadow: var(--ui-elevation-rise-2); }
+  .ui-sheet[data-elevation="1"] { box-shadow: var(--ui-elevation-rise-1); }
+  .ui-sheet[data-elevation="3"] { box-shadow: var(--ui-elevation-rise-3); }
+  .ui-sheet[data-elevation="flat"] { background: var(--ui-surface-sheet); box-shadow: var(--ui-elevation-flat); }
+  .ui-well { border-radius: var(--ui-radius-md); background: var(--ui-surface-well); box-shadow: var(--ui-elevation-sink); }
+}

package/src/styles/system/shell.css

@@ -1,102 +1,8 @@
-/* Docs shell: header, sidebar, contents, page head, pager, search. Chrome stays on the canvas; only content gets material. */
-@layer components {
-  .ui-app { min-height: 100dvh; background: var(--ui-surface-canvas); color: var(--ui-text-body); }
-
-  .ui-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--ui-space-lg); height: 3.75rem; padding: 0 var(--ui-space-lg);
-    background: color-mix(in oklab, var(--ui-surface-canvas) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
-    box-shadow: inset 0 -1px 0 var(--ui-line-hair); }
-  .ui-header-brand { display: inline-flex; align-items: center; gap: var(--ui-space-xs); color: var(--ui-text-strong); font-weight: var(--ui-weight-medium); font-size: 1.0625rem; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
-  /* Section links are plain words: ink marks the section being read, no pill. */
-  .ui-header-nav { display: flex; align-items: center; gap: var(--ui-space-3xs); }
-  .ui-header-nav > a { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 .75rem; border-radius: var(--ui-radius-md); color: var(--ui-text-body); font-size: var(--ui-text-small); font-weight: var(--ui-weight-regular); text-decoration: none; transition: color var(--ui-duration-quick); }
-  .ui-header-nav > a:hover { color: var(--ui-text-strong); }
-  .ui-header-nav > a:is([aria-current="page"], [aria-current="true"]) { color: var(--ui-text-strong); font-weight: var(--ui-weight-medium); }
-  .ui-header-nav > a:focus-visible { @apply --ui-focus-ring; outline-offset: 0; }
-  /* A recent section: one small chip-washed word after its name */
-  .ui-header-nav > a > small { margin-left: var(--ui-space-2xs); padding: 1px 5px; border-radius: var(--ui-radius-xs); background: var(--ui-surface-chip); color: var(--ui-text-muted); box-shadow: inset 0 0 0 1px var(--ui-line-hair); font: var(--ui-weight-medium) .6875rem/1.4 var(--font-family-sans); letter-spacing: .02em; }
-  .ui-header-end { display: flex; align-items: center; gap: var(--ui-space-3xs); margin-left: auto; }
-  .ui-header-divider { width: 1px; height: 1rem; margin-inline: var(--ui-space-xs); background: var(--ui-line-divider); }
-  .ui-version { display: inline-flex; align-items: center; gap: var(--ui-space-3xs); height: 2.25rem; padding: 0 .375rem; border-radius: var(--ui-radius-md); color: var(--ui-text-body); font: var(--ui-weight-regular) var(--ui-text-small)/1 var(--font-family-sans); font-variant-numeric: tabular-nums; }
-
-  /* The sidebar: quiet group captions over entries hung on one hairline; the page being read inks a short bar on it. */
-  .ui-sidebar { display: grid; align-content: start; gap: var(--ui-space-lg); padding: var(--ui-space-lg) var(--ui-space-lg) var(--ui-space-2xl) var(--ui-space-xl); }
-  .ui-search-trigger { appearance: none; display: flex; align-items: center; gap: .625rem; width: 100%; height: 2.5rem; padding: 0; border: 0; border-radius: 0;
-    background: transparent; color: var(--ui-text-muted); box-shadow: inset 0 -1px 0 var(--ui-line-hair); font: var(--ui-weight-regular) var(--ui-text-small)/1 var(--font-family-sans); cursor: pointer; transition: color var(--ui-duration-quick), box-shadow var(--ui-duration-quick); }
-  .ui-search-trigger:hover { color: var(--ui-text-strong); box-shadow: inset 0 -1px 0 var(--ui-line-strong); }
-  .ui-search-trigger > .ui-kbd { box-shadow: none; }
-  .ui-search-trigger:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; border-radius: var(--ui-radius-sm); }
-  .ui-search-trigger > svg { flex: none; width: 15px; height: 15px; }
-  .ui-search-trigger > .ui-kbd { margin-left: auto; }
-  .ui-nav-group { display: grid; }
-  .ui-nav-group > h4 { display: flex; align-items: center; min-height: 2rem; margin: 0 0 var(--ui-space-3xs); color: var(--ui-text-muted); @apply --ui-eyebrow-type; }
-  .ui-nav-link { position: relative; display: flex; align-items: center; min-height: 2rem; padding: .3125rem 0 .3125rem 1rem; color: var(--ui-text-muted); font-size: var(--ui-text-small); line-height: 1.4; text-decoration: none; box-shadow: inset 1px 0 0 var(--ui-line-divider); transition: color var(--ui-duration-quick); }
-  .ui-nav-link::before { content: ""; position: absolute; top: .4375rem; bottom: .4375rem; left: 0; width: 2px; margin-left: -.5px; border-radius: 1px; background: transparent; transition: background-color var(--ui-duration-quick); }
-  .ui-nav-link:hover { color: var(--ui-text-strong); }
-  .ui-nav-link:hover::before { background: var(--ui-line-mark); }
-  .ui-nav-link:is([aria-current="page"], [aria-current="true"]) { color: var(--ui-text-strong); font-weight: var(--ui-weight-medium); }
-  .ui-nav-link:is([aria-current="page"], [aria-current="true"])::before { background: var(--ui-text-strong); }
-  .ui-nav-link:focus-visible { @apply --ui-focus-ring; outline-offset: 1px; border-radius: var(--ui-radius-sm); }
-  .ui-nav-link > .ui-badge { margin-left: auto; }
-
-  /* One ruler: long section ticks and short subsection ticks share a right edge before the text. Titles share a second edge;
-     current location changes ink, never the tick's length or the title's position. */
-  .ui-toc { --toc-tick: 1.5rem; --toc-tick-subsection: .75rem; --toc-gap: .75rem; --toc-gutter: calc(var(--toc-tick) + var(--toc-gap)); --toc-row-padding: .5rem;
-    display: grid; align-content: start; gap: var(--ui-space-xs); padding: var(--ui-space-xl) var(--ui-space-lg); font-size: var(--ui-text-caption); }
-  .ui-toc > h4 { margin: 0 0 var(--ui-space-2xs); padding-left: var(--toc-gutter); color: var(--ui-text-muted); @apply --ui-eyebrow-type; }
-  .ui-toc ol { display: grid; margin: 0; padding: 0; list-style: none; }
-  .ui-toc a { position: relative; display: block; padding: var(--toc-row-padding) 0 var(--toc-row-padding) var(--toc-gutter); color: var(--ui-text-muted); line-height: 1.125rem; text-decoration: none; transition: color var(--ui-duration-quick); }
-  .ui-toc a::before { content: ""; position: absolute; top: calc(var(--toc-row-padding) + .5lh - 1px); right: calc(100% - var(--toc-tick)); width: var(--toc-tick); height: 2px; border-radius: 1px; background: var(--ui-line-divider); pointer-events: none; transition: background-color var(--ui-duration-quick); }
-  .ui-toc :is(ol ol a, a[data-level="3"])::before { width: var(--toc-tick-subsection); }
-  .ui-toc a:hover { color: var(--ui-text-strong); }
-  .ui-toc a:hover::before { background: var(--ui-line-mark); }
-  .ui-toc a[aria-current="location"] { color: var(--ui-text-strong); font-weight: var(--ui-weight-medium); }
-  .ui-toc a[aria-current="location"]::before { background: var(--ui-text-strong); }
-  .ui-toc a:focus-visible { @apply --ui-focus-ring; outline-offset: 1px; border-radius: var(--ui-radius-xs); }
-  .ui-toc ol ol a:not([aria-current]) { color: color-mix(in oklab, var(--ui-text-muted) 72%, var(--ui-text-disabled)); }
-  .ui-toc ol ol a:not([aria-current])::before { background: var(--ui-line-hair); }
-  .ui-toc ol ol a:not([aria-current]):hover { color: var(--ui-text-strong); }
-  .ui-toc-actions { display: grid; padding: var(--ui-space-sm) 0 0 var(--toc-gutter); }
-  .ui-toc-actions a { padding: .3125rem 0; color: var(--ui-text-muted); font-size: .75rem; line-height: 1.5; }
-  .ui-toc-actions a::before { content: none; }
-
-  /* The page head: an eyebrow, the title and its lead. Space, not a rule, parts it from the reading. */
-  .ui-pagehead { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-md); margin-bottom: var(--ui-space-2xl); }
-  .ui-pagehead-kicker { margin-bottom: calc(var(--ui-space-3xs) * -1); color: var(--ui-text-muted); @apply --ui-eyebrow-type; }
-  .ui-pagehead h1 { margin: 0; color: var(--ui-text-strong); font-size: var(--ui-text-title); font-weight: var(--ui-weight-heading); line-height: var(--ui-leading-title); letter-spacing: var(--ui-tracking-title); text-wrap: balance; overflow-wrap: break-word; }
-  /* The lead runs a little past the reading measure: at 18px it keeps the same number of words a line. */
-  .ui-pagehead p { max-width: calc(var(--measure, 41rem) * 1.125); margin: 0; color: var(--ui-text-body); font-size: var(--ui-text-lead); line-height: var(--ui-leading-lead); letter-spacing: -.004em; text-wrap: pretty; overflow-wrap: break-word; }
-  /* A second line of the lead, at reading size. */
-  .ui-pagehead p + p:not([class]) { max-width: var(--measure, 41rem); margin-top: calc(var(--ui-space-xs) * -1); font-size: var(--ui-text-base); line-height: var(--ui-leading-body); letter-spacing: 0; }
-
-  /* The pager: the previous and next documents under one hairline, an eyebrow over each title; no boxes. */
-  .ui-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-xl); margin-top: 5rem; padding-top: var(--ui-space-lg); box-shadow: inset 0 1px 0 var(--ui-line-hair); }
-  .ui-pager > a { display: grid; align-content: start; gap: var(--ui-space-2xs); color: var(--ui-text-body); text-decoration: none; transition: color var(--ui-duration-quick); }
-  .ui-pager > a:hover { color: var(--ui-text-strong); }
-  .ui-pager > a:focus-visible { @apply --ui-focus-ring; outline-offset: 4px; border-radius: var(--ui-radius-xs); }
-  .ui-pager > a[rel="next"] { justify-items: end; text-align: right; }
-  .ui-pager small { color: var(--ui-text-muted); @apply --ui-eyebrow-type; }
-  .ui-pager b { font-weight: var(--ui-weight-regular); font-size: var(--ui-text-base); line-height: 1.5; text-wrap: balance; }
-  .ui-pager > a[rel="prev"] > b::before { content: "←"; margin-right: .5em; color: var(--ui-text-muted); }
-  .ui-pager > a[rel="next"] > b::after { content: "→"; margin-left: .5em; color: var(--ui-text-muted); }
-  .ui-pager > a:hover > b::before, .ui-pager > a:hover > b::after { color: var(--ui-text-strong); }
-
-  /* Overlay dialog (search, image preview) */
-  .ui-dialog { width: min(40rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100dvh - 4rem)); padding: 0; overflow: hidden; border: 0; border-radius: var(--ui-radius-2xl); background: var(--ui-surface-float); color: var(--ui-text-body); box-shadow: var(--ui-elevation-overlay); }
-  .ui-dialog::backdrop { background: var(--ui-surface-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
-  .ui-dialog-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-sm); min-height: 3.5rem; padding: 0 var(--ui-space-md); box-shadow: inset 0 -1px 0 var(--ui-line-hair); }
-  .ui-dialog-search input { flex: 1 1 8rem; min-width: 0; border: 0; background: transparent; color: var(--ui-text-strong); font: var(--ui-weight-regular) 1rem/1 var(--font-family-sans); }
-  .ui-dialog-search input:focus { outline: none; }
-  @media (forced-colors: active) { .ui-dialog-search input:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } }
-  .ui-results { display: grid; gap: 2px; margin: 0; padding: var(--ui-inset); list-style: none; }
-  .ui-results > li > a { display: grid; gap: 2px; padding: .625rem .75rem; border-radius: var(--ui-radius-md); color: var(--ui-text-body); text-decoration: none; }
-  .ui-results > li > a small { color: var(--ui-text-muted); font: var(--ui-weight-regular) .75rem/1.4 var(--font-family-sans); }
-  .ui-results > li > a b { color: var(--ui-text-strong); font-weight: var(--ui-weight-medium); font-size: var(--ui-text-small); }
-  .ui-results > li > a[aria-selected="true"], .ui-results > li > a:hover { background: var(--ui-surface-chip); box-shadow: inset 0 0 0 1px var(--ui-line-hair); }
-  .ui-dialog-foot { display: flex; flex-wrap: wrap; gap: var(--ui-space-md); padding: var(--ui-space-sm) var(--ui-space-md); box-shadow: inset 0 1px 0 var(--ui-line-hair); color: var(--ui-text-muted); font-size: .71875rem; }
-  .ui-dialog-foot span { display: inline-flex; align-items: center; gap: 6px; }
-
-  .ui-pagehead-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-xs) var(--ui-space-md); padding-top: var(--ui-space-xs); color: var(--ui-text-muted); font-size: .78125rem; }
-  .ui-pagehead-meta > a { color: inherit; text-decoration: none; }
-  .ui-pagehead-meta > a:hover { color: var(--ui-text-strong); }
-  .ui-pagehead-meta > span + span::before, .ui-pagehead-meta > * + a::before { content: "·"; margin-right: var(--ui-space-md); color: var(--ui-text-disabled); }
-}
+/* Explicit full shell collection. Components import their own leaf stylesheet. */
+@import './header-core.css';
+@import './sidebar.css';
+@import './search-trigger.css';
+@import './toc.css';
+@import './pagehead.css';
+@import './pager.css';
+@import './dialog.css';

package/src/styles/system/sidebar.css

@@ -0,0 +1,14 @@
+/* sidebar: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-sidebar { display: grid; align-content: start; gap: var(--ui-space-lg); padding: var(--ui-space-lg) var(--ui-space-lg) var(--ui-space-2xl) var(--ui-space-xl); }
+  .ui-nav-group { display: grid; }
+  .ui-nav-group > h4 { display: flex; align-items: center; min-height: 2rem; margin: 0 0 var(--ui-space-3xs); color: var(--ui-text-muted); @apply --ui-eyebrow-type; }
+  .ui-nav-link { position: relative; display: flex; align-items: center; min-height: 2rem; padding: .3125rem 0 .3125rem 1rem; color: var(--ui-text-muted); font-size: var(--ui-text-small); line-height: 1.4; text-decoration: none; box-shadow: inset 1px 0 0 var(--ui-line-divider); transition: color var(--ui-duration-quick); }
+  .ui-nav-link::before { content: ""; position: absolute; top: .4375rem; bottom: .4375rem; left: 0; width: 2px; margin-left: -.5px; border-radius: 1px; background: transparent; transition: background-color var(--ui-duration-quick); }
+  .ui-nav-link:hover { color: var(--ui-text-strong); }
+  .ui-nav-link:hover::before { background: var(--ui-line-mark); }
+  .ui-nav-link:is([aria-current="page"], [aria-current="true"]) { color: var(--ui-text-strong); font-weight: var(--ui-weight-medium); }
+  .ui-nav-link:is([aria-current="page"], [aria-current="true"])::before { background: var(--ui-text-strong); }
+  .ui-nav-link:focus-visible { @apply --ui-focus-ring; outline-offset: 1px; border-radius: var(--ui-radius-sm); }
+  .ui-nav-link > .ui-badge { margin-left: auto; }
+}