@master/internal-site 0.1.1 → 0.1.3

package/src/styles/system/source.css

@@ -0,0 +1,5 @@
+/* source: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-source { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--ui-space-md); padding: var(--ui-space-sm) var(--ui-space-sm) 2px; color: var(--ui-text-muted); font: var(--ui-weight-regular) .71875rem/1.5 var(--font-family-mono); }
+  .ui-source a { color: var(--ui-text-body); text-decoration: underline; text-decoration-color: var(--ui-line-mark); text-underline-offset: .2em; }
+}

package/src/styles/system/specimens.css

@@ -1,5 +1,8 @@
 /* Specimens and annotations: the vocabulary inside a stage. Hue appears only here, always named by a legend or label. */
 @layer components {
+  /* Let the measured container shrink below a specimen's intrinsic content width. */
+  .ui-stage > [data-demo-container] { min-width: 0; }
+
   /* Item: a tile that stands for content. tone × variant */
   .ui-item {
     --tone: var(--ui-tone-neutral);

package/src/styles/system/stage.css

@@ -0,0 +1,18 @@
+/* stage: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-stage {
+    position: relative; isolation: isolate; container: stage / inline-size; display: grid; place-items: center;
+    min-height: 10rem; padding: 3rem 2.5rem; border-radius: var(--ui-radius-xl); overflow: hidden;
+    background: var(--ui-stage-light), var(--ui-surface-stage);
+    box-shadow: inset 0 0 0 1px var(--ui-line-contour), inset 0 1px 2px light-dark(oklch(18% 0 none / .04), oklch(0% 0 none / .45)), 0 1px 0 var(--ui-lip);
+  }
+  .ui-stage[data-padding="none"] { padding: 0; place-items: stretch; }
+  .ui-stage[data-padding="sm"] { min-height: 0; padding: var(--ui-space-md); }
+  .ui-stage[data-align="start"] { place-items: start; }
+  .ui-stage[data-background="grid"] { background: linear-gradient(var(--ui-line-hair) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, var(--ui-line-hair) 1px, transparent 1px) 0 0 / 20px 20px, var(--ui-stage-light), var(--ui-surface-stage); }
+  .ui-stage[data-background="dots"] { background: radial-gradient(var(--ui-line-divider) .8px, transparent 1.1px) 0 0 / 14px 14px, var(--ui-stage-light), var(--ui-surface-stage); }
+  .ui-stage[data-background="hatch"] { background: var(--ui-hatch), var(--ui-surface-stage); }
+  .ui-stage[data-background="checkerboard"] { background: conic-gradient(var(--ui-line-hair) 25%, transparent 0 50%, var(--ui-line-hair) 0 75%, transparent 0) 0 0 / 16px 16px, var(--ui-surface-stage); }
+  @media (width < 35rem) { .ui-stage { min-height: 8rem; padding: 2.25rem 1.125rem; } }
+  .ui-stage[data-standalone] { border-radius: var(--ui-radius-2xl); }
+}

package/src/styles/system/steps.css

@@ -0,0 +1,51 @@
+/* steps: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-steps { counter-reset: step; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
+  .ui-steps > li { counter-increment: step; position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--ui-space-lg); padding-bottom: var(--ui-space-2xl); }
+  .ui-steps > li::before { content: counter(step, decimal-leading-zero); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; color: var(--ui-text-muted); font: var(--ui-weight-regular) .875rem/1 var(--font-family-sans); font-variant-numeric: tabular-nums; }
+  .ui-steps > li::after { content: ""; position: absolute; top: 2.25rem; bottom: .5rem; left: .875rem; width: 1px; background: var(--ui-line-divider); }
+  .ui-steps > li:last-child { padding-bottom: 0; }
+  .ui-steps > li:last-child::after { display: none; }
+  .ui-steps > li > div > h4 { margin: .125rem 0 var(--ui-space-xs); color: var(--ui-text-strong); font-size: var(--ui-text-base); font-weight: var(--ui-weight-medium); line-height: 1.5rem; }
+  .ui-steps > li > div > p { margin: 0 0 var(--ui-space-sm); }
+}
+
+/*
+ * Document steps (`StepSection`) on `ui-steps` (styles/system/data.css): a step's content holds an authored heading,
+ * its text and, in a row step, the code beside it once the column has room.
+ */
+@layer components {
+  .ui-steps[data-variant="document"] { container-type: inline-size; margin-block: var(--ui-space-xl) var(--line, var(--ui-space-xl)); }
+  .ui-steps-content, .ui-steps-text, .ui-steps-source { min-width: 0; }
+  .ui-steps-content { display: grid; align-content: start; gap: var(--ui-space-md); }
+  .ui-steps-content[data-columns] { gap: var(--ui-space-md) var(--ui-space-xl); }
+  .ui-steps-content :is(h2, h3, h4) {
+    position: static; width: auto; margin: .125rem 0 var(--ui-space-2xs);
+    color: var(--ui-text-strong); font-size: var(--ui-text-base); font-weight: var(--ui-weight-medium); line-height: 1.5rem; letter-spacing: -.006em;
+  }
+  .ui-steps-content :is(h2, h3, h4) > .ui-anchor { display: none; }
+  .ui-steps-content > :is(h2, h3, h4), .ui-steps-text > :is(h2, h3, h4) { margin-bottom: calc(var(--ui-space-md) * -1 + var(--ui-space-2xs)); }
+  .ui-steps-content :is(h2, h3, h4) + p { margin-top: 0; }
+  .ui-steps-content :is(p, li) { font-size: var(--ui-text-small); line-height: var(--ui-leading-small); }
+  .ui-steps-content :is(p, ul, ol) { margin-block: 0; }
+  .ui-steps-text { display: grid; align-content: start; gap: var(--ui-space-md); }
+  /* Several files under one step part by a small gap, never contour against contour. */
+  .ui-steps-source { display: grid; align-content: start; gap: var(--ui-space-sm); }
+  /* A note inside a step is part of its text: the icon leads a muted paragraph, without a frame of its own in the narrow column. */
+  .ui-steps-content .ui-callout { padding: 0; background: none; box-shadow: none; color: var(--ui-text-muted); }
+  /* Only reset panels placed by the step grid; nested trays own their internal spacing. */
+  :is(.ui-steps-content, .ui-steps-text, .ui-steps-source) > :is(.ui-code, .ui-tray) { margin: 0; }
+  :is(.ui-steps-content, .ui-steps-text, .ui-steps-source) > :is(.ui-code, p):first-child { margin-top: 0; }
+  :is(.ui-steps-content, .ui-steps-text, .ui-steps-source) > :is(.ui-code, p):last-child { margin-bottom: 0; }
+
+  @container (width < 20rem) {
+    .ui-steps[data-variant="document"] > li { grid-template-columns: minmax(0, 1fr); }
+    .ui-steps[data-variant="document"] > li::before, .ui-steps[data-variant="document"] > li::after { display: none; }
+  }
+
+  /* A row step reads beside its code once the list has room for both (46rem): the text on two fifths, the code on three.
+     Narrower, the code stacks under its text at full width rather than scrolling in a sliver. */
+  @container (min-width: 46rem) {
+    .ui-steps-content[data-columns] { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
+  }
+}

package/src/styles/system/surfaces.css

@@ -1,104 +1,8 @@
-/* Surfaces and the example frame. tray (14) → 4px inset → stage / code / sheet (10) */
-@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); }
-
-  /* The tray holds one complete example: head, stage, source, caption */
-  .ui-tray { position: relative; min-width: 0; margin: 0; padding: var(--ui-inset); border-radius: var(--ui-radius-2xl); background: var(--ui-surface-tray); color: var(--ui-text-body); box-shadow: inset 0 0 0 1px var(--ui-line-hair), 0 1px 0 var(--ui-lip); }
-  .ui-tray-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-xs) var(--ui-space-md); min-height: 2.75rem; padding: 2px var(--ui-inset) var(--ui-space-xs) var(--ui-space-sm); }
-  .ui-tray-title { min-width: 0; margin: 0; color: var(--ui-text-strong); font-size: .8125rem; font-weight: var(--ui-weight-medium); line-height: 1.4; letter-spacing: 0; }
-  .ui-tray-description { margin: 2px 0 0; color: var(--ui-text-muted); font-size: .75rem; line-height: 1.5; }
-  .ui-tray-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-xs); }
-  .ui-tray-caption { margin: 0; padding: var(--ui-space-sm) var(--ui-space-sm) var(--ui-space-xs); color: var(--ui-text-muted); font-size: .78125rem; line-height: 1.6; text-wrap: pretty; overflow-wrap: anywhere; }
-  .ui-tray-caption code { color: var(--ui-text-body); }
-  .ui-tray > * + :is(.ui-stage, .ui-code, .ui-browser, .ui-compare) { margin-top: var(--ui-inset); }
-  .ui-tray > .ui-tray-head + :is(.ui-stage, .ui-code, .ui-browser, .ui-compare) { margin-top: 0; }
-  /* Concentric with the tray like every panel in it: 14 less the 4px inset. */
-  .ui-tray > .ui-callout { margin-top: var(--ui-inset); border-radius: var(--ui-radius-xl); }
-  .ui-tray > .ui-disclosure > summary { padding-inline: var(--ui-space-sm); }
-
-  /* The stage: a lit, slightly recessed well where the specimen stands. It holds a small specimen in a modest frame
-     (10rem) and otherwise follows its content, so a single row never floats in an empty well. */
-  .ui-stage {
-    position: relative; isolation: isolate; container: stage / inline-size; display: grid; place-items: center;
-    min-height: 10rem; padding: 3rem 2.5rem; border-radius: var(--ui-radius-xl); overflow: hidden;
-    background: var(--ui-stage-light), var(--ui-surface-stage);
-    box-shadow: inset 0 0 0 1px var(--ui-line-contour), inset 0 1px 2px light-dark(oklch(18% 0 none / .04), oklch(0% 0 none / .45)), 0 1px 0 var(--ui-lip);
-  }
-  .ui-stage[data-padding="none"] { padding: 0; place-items: stretch; }
-  .ui-stage[data-padding="sm"] { min-height: 0; padding: var(--ui-space-md); }
-  .ui-stage[data-align="start"] { place-items: start; }
-  .ui-stage[data-background="grid"] { background: linear-gradient(var(--ui-line-hair) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, var(--ui-line-hair) 1px, transparent 1px) 0 0 / 20px 20px, var(--ui-stage-light), var(--ui-surface-stage); }
-  .ui-stage[data-background="dots"] { background: radial-gradient(var(--ui-line-divider) .8px, transparent 1.1px) 0 0 / 14px 14px, var(--ui-stage-light), var(--ui-surface-stage); }
-  .ui-stage[data-background="hatch"] { background: var(--ui-hatch), var(--ui-surface-stage); }
-  .ui-stage[data-background="checkerboard"] { background: conic-gradient(var(--ui-line-hair) 25%, transparent 0 50%, var(--ui-line-hair) 0 75%, transparent 0) 0 0 / 16px 16px, var(--ui-surface-stage); }
-  @media (width < 35rem) { .ui-stage { min-height: 8rem; padding: 2.25rem 1.125rem; } }
-
-  /* Inside a tray the stage is told apart by its tone alone: the tray's ring is the example's one edge, so a framed
-     subject on the stage (a card, a form, a window) is the only line within it. */
-  .ui-tray .ui-stage { box-shadow: none; }
-
-  /* Standalone stage without a tray (embedded in prose for very small specimens) */
-  .ui-stage[data-standalone] { border-radius: var(--ui-radius-2xl); }
-
-  /* Comparison: the same subject under two conditions */
-  .ui-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--ui-inset); }
-  .ui-compare > figure { display: grid; grid-template-rows: auto 1fr; gap: 0; min-width: 0; margin: 0; }
-  .ui-compare > figure > figcaption { padding: var(--ui-space-xs) var(--ui-space-sm); color: var(--ui-text-muted); @apply --ui-label-type; }
-  .ui-compare .ui-stage { min-height: 11rem; padding: var(--ui-space-xl) var(--ui-space-lg); }
-
-  /* Browser chrome for a real document in an iframe: one contour drawn over the whole window, the toolbar a tray tone
-     above the page with its dots only — the tray head names the document. Tone, not rules, parts them. */
-  .ui-browser { position: relative; overflow: hidden; border-radius: var(--ui-radius-xl); background: var(--ui-surface-stage); box-shadow: 0 1px 0 var(--ui-lip); }
-  .ui-browser::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ui-line-contour); pointer-events: none; }
-  /* A tray that holds only a browser lends it its place in the flow, not another frame. */
-  .ui-tray:has(> .ui-browser:only-child) { padding: 0; border-radius: var(--ui-radius-xl); background: none; box-shadow: none; }
-  /* Plain: a preview without chrome, where the window is not the lesson. It is a stage: inside a tray its tone sets it
-     apart and the contour goes; alone, or in a tray that lends it only its place, it keeps the contour as its edge.
-     A client viewport sits in its island's wrapper, so the tray is an ancestor, not a parent. */
-  .ui-tray .ui-browser[data-variant="plain"]::after { content: none; }
-  .ui-tray > .ui-browser[data-variant="plain"]:only-child::after { content: ""; }
-  .ui-browser-bar { display: flex; align-items: center; gap: var(--ui-space-sm); height: 2rem; padding: 0 var(--ui-space-sm); background: var(--ui-surface-tray); }
-  .ui-browser-dots { display: flex; gap: 6px; }
-  .ui-browser-dots > i { width: 9px; height: 9px; border-radius: 50%; background: var(--ui-line-divider); }
-  .ui-browser-body { position: relative; min-height: 12rem; }
-  /* A real document: the tools set the viewport width, the handle follows its edge */
-  .ui-browser-body:has(> .ui-browser-viewport) { min-height: 0; overflow-x: auto; scrollbar-width: thin; }
-  .ui-browser-viewport { position: relative; max-width: none; margin-inline: auto; }
-  .ui-browser-viewport > iframe { display: block; width: 100%; border: 0; background: transparent; }
-  /* The example's controls: a row on the tray itself, between the stage and the source, aligned with the tray head. No
-     surface of their own, so the stage stays the document and nothing inside it reads as part of the page shown. */
-  .ui-browser-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-xs) var(--ui-space-sm); padding: var(--ui-space-sm) var(--ui-space-sm) var(--ui-space-xs); }
-  /* One rhythm around the row: 12px to the stage above and to the source below (its 8px plus the tray's 4px inset), or to the first line of
-     a caption; its ends 16px in from the tray's edge, on the tray head's start; every control in it one 32px height. */
-  .ui-tray > :has(> .ui-browser-tools:last-child) + .ui-tray-caption, .ui-tray > .ui-browser-tools + .ui-tray-caption { padding-top: 0; }
-  .ui-browser-tools > .ui-segmented > :is(button, a) { min-height: 1.625rem; }
-  /* The range, its caption and its live reading stay one group, so a phone never parts the width from its slider. */
-  .ui-browser-range { display: flex; flex: 1 1 14rem; align-items: center; gap: var(--ui-space-sm); min-width: 0; }
-  /* Enlarged text must leave room for the label and reading in a narrow article. */
-  .ui-browser-range > .ui-range { flex: 1 1 6rem; min-width: 0; max-width: 12rem; }
-  /* The range's caption is a label in the tools' own type, whether or not the specimen parts are loaded. */
-  .ui-browser-range > label { color: var(--ui-text-muted); @apply --ui-label-type; }
-  .ui-browser-tools > output, .ui-browser-range > output { flex: 1 1 100%; color: var(--ui-text-muted); font: var(--ui-weight-regular) .6875rem/1.5 var(--font-family-mono); overflow-wrap: anywhere; }
-  /* The live viewport width stays beside the range that sets it. */
-  .ui-browser-range > .ui-browser-size { flex: none; font: var(--ui-weight-regular) .75rem/1.5 var(--font-family-sans); font-variant-numeric: tabular-nums; }
-  .ui-resize { position: absolute; top: 0; right: 0; bottom: 0; display: grid; place-items: center; width: 1rem; cursor: ew-resize; touch-action: none; }
-  .ui-resize::before { content: ""; width: 4px; height: 2.5rem; border-radius: var(--ui-radius-pill); background: var(--ui-line-strong); }
-
-  /* Local scroll region, keyboard reachable */
-  .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; }
-
-  /* Expand: a long surface clamps under a canvas fade, with one quiet control to show the rest */
-  .ui-expand { position: relative; min-width: 0; }
-  .ui-expand[data-expanded="false"] > :first-child { max-height: 30rem; overflow: hidden; }
-  .ui-expand-control { display: flex; justify-content: center; padding-top: var(--ui-space-sm); }
-  .ui-expand[data-expanded="false"] > .ui-expand-control { position: absolute; inset-inline: 0; bottom: 0; padding-top: 6rem; background: linear-gradient(to bottom, transparent, var(--ui-surface-canvas) 72%); }
-  .ui-expand[data-expanded="true"] > .ui-expand-control { position: sticky; bottom: var(--ui-space-sm); pointer-events: none; }
-  .ui-expand-control > .ui-button { pointer-events: auto; }
-  .ui-expand-control > .ui-button > svg { transition: rotate var(--ui-duration-quick) var(--ui-ease); }
-  .ui-expand[data-expanded="true"] > .ui-expand-control > .ui-button > svg { rotate: 180deg; }
-}
+/* Explicit full surfaces collection. Components import their own leaf stylesheet. */
+@import './sheet.css';
+@import './tray.css';
+@import './stage.css';
+@import './compare.css';
+@import './browser.css';
+@import './scroll.css';
+@import './expand.css';

package/src/styles/system/table.css

@@ -0,0 +1,23 @@
+/* table: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-table { min-width: 0; overflow: auto; border: 1px solid var(--ui-line-contour); border-radius: var(--ui-radius-xl); background: var(--ui-surface-sheet); scrollbar-width: thin; }
+  .ui-table:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
+  .ui-table table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ui-text-small); line-height: 1.5; }
+  .ui-table thead th { position: sticky; top: 0; z-index: 1; padding: .625rem var(--ui-space-md); background: var(--ui-surface-sheet-lo); color: var(--ui-text-muted); @apply --ui-label-type; text-align: start; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--ui-line-divider); }
+  .ui-table :is(td, tbody th) { padding: .6875rem var(--ui-space-md); color: var(--ui-text-body); font-weight: var(--ui-weight-regular); text-align: start; vertical-align: top; border-top: 1px solid var(--ui-line-hair); }
+  .ui-table tr:first-child > :is(td, th) { border-top: 0; }
+  .ui-table tbody tr { transition: background-color var(--ui-duration-quick); }
+  .ui-table tbody tr:hover { background: light-dark(oklch(22% .002 265 / .022), oklch(100% 0 none / .025)); }
+  .ui-table tbody tr > :first-child { color: var(--ui-text-strong); }
+  .ui-table :is(td, th)[data-align="end"] { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
+  .ui-table thead th code { padding: 0; border-radius: 0; background: none; color: inherit; box-shadow: none; font: inherit; font-family: var(--font-family-mono); font-size: .75rem; letter-spacing: 0; }
+  .ui-table :is(td, tbody th) code { padding: .125em .375em; border-radius: var(--ui-radius-xs); background: var(--ui-surface-chip); color: var(--ui-text-strong); box-shadow: none; font: var(--ui-weight-regular) .8125rem/1.6 var(--font-family-mono); overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
+  .ui-table :is(td:first-child, tbody th) code { white-space: normal; overflow-wrap: normal; }
+  .ui-table :is(td, tbody th) .ui-preview { display: inline-block; width: 1.25rem; height: 1.25rem; margin-right: var(--ui-space-xs); border-radius: var(--ui-radius-sm); vertical-align: -.3em; box-shadow: inset 0 0 0 1px var(--ui-line-contour); }
+  .ui-table[data-density="compact"] :is(th, td) { padding-block: .4375rem; }
+  .ui-table[data-variant="lookup"] tbody th { width: 1%; white-space: nowrap; }
+  .ui-table[data-variant="lookup"] td code { white-space: normal; line-height: 1.5; }
+  .ui-table :is(td, tbody th) ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
+  .ui-table :is(td, tbody th) .ui-disclosure > summary { min-height: 2.25rem; }
+  .ui-table-caption { display: flex; justify-content: space-between; gap: var(--ui-space-md); padding: var(--ui-space-sm) var(--ui-space-md); color: var(--ui-text-muted); font-size: .75rem; box-shadow: inset 0 1px 0 var(--ui-line-hair); }
+}

package/src/styles/system/toc.css

@@ -0,0 +1,59 @@
+/* toc: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .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's contents (`ui-toc`, styles/system/shell.css) as the site uses them: the documentation rail (docs.css
+ * places it), the narrow-screen disclosure under the page head, and a blog post's margin contents. Sections nest
+ * their subsections; the entry being read carries `aria-current="location"`.
+ */
+@layer components {
+  .ui-toc a { overflow-wrap: anywhere; text-wrap: pretty; }
+  .ui-toc a code { font-family: var(--font-family-mono); font-size: .9em; }
+  /* A section whose subsection is being read keeps a step of ink. */
+  .ui-toc li:has(> ol [aria-current="location"]) > a { color: var(--ui-text-body); }
+  /* A long list folds: every section stays listed, only the one being read opens its subsections. */
+  .ui-toc ol[data-fold] > li:not(:has([aria-current="location"])) > ol { display: none; }
+  .ui-toc-actions > a:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; border-radius: var(--ui-radius-xs); }
+  .ui-toc-actions > a { text-decoration: none; transition: color var(--ui-duration-quick); }
+  .ui-toc-actions > a:hover { color: var(--ui-text-strong); }
+  /* The rail scrolls and clips, so its rings sit inside the entry. */
+  .ui-toc[data-rail] a:focus-visible { outline-offset: -2px; }
+  @media (pointer: coarse) {
+    .ui-toc { --toc-row-padding: .8125rem; }
+    .ui-toc a { min-height: 2.75rem; }
+    .ui-toc-actions > a { min-height: 2.75rem; }
+  }
+  @media (forced-colors: active) { .ui-toc a[aria-current="location"] { text-decoration: underline; } }
+  @media print { .ui-toc { display: none; } }
+
+  /* Narrow screens: the same contents, closed between hairlines under the page head. */
+  [data-contents-disclosure] { margin-block: 0 var(--ui-space-xl); }
+  [data-contents-disclosure] > .ui-toc { padding: 0 0 var(--ui-space-md); }
+  @media (width >= 80rem) { [data-contents-disclosure] { display: none; } }
+  /* Hidden beside the rail, the disclosure no longer closes the text before the next section, so that heading takes its own hairline again. The page head
+     already parts the page from its first section, and the blog switches its disclosure by its own width. */
+  @media (width >= 80rem) {
+    .ui-docs-article > [data-contents-disclosure]:not(:first-child, .ui-pagehead + *) + h2, .ui-docs-article > [data-contents-disclosure]:not(:first-child, .ui-pagehead + *) + a[id]:empty + h2,
+    .ui-docs-article > [data-contents-disclosure]:not(:first-child, .ui-pagehead + *) + hr + h2, .ui-docs-article > [data-contents-disclosure]:not(:first-child, .ui-pagehead + *) + hr + a[id]:empty + h2 { --section-rule: block; }
+  }
+  @media print { [data-contents-disclosure] { display: none; } }
+}

package/src/styles/system/tooltip.css

@@ -0,0 +1,6 @@
+/* tooltip: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-tooltip { position: absolute; z-index: 60; padding: .3125rem .5rem; border-radius: var(--ui-radius-sm); background: var(--ui-surface-ink); color: var(--ui-text-inverse); box-shadow: 0 1px 2px var(--ui-shade-1), 0 4px 10px -4px var(--ui-shade-2); font: var(--ui-weight-regular) .71875rem/1.2 var(--font-family-sans); white-space: nowrap; pointer-events: none; }
+  .ui-tooltip[data-side="bottom"]::before { content: ""; position: absolute; bottom: 100%; left: 50%; translate: -50% 0; border: 4px solid transparent; border-bottom-color: var(--ui-surface-ink); }
+  .ui-tooltip > .ui-kbd { height: 1.125rem; min-width: 1.125rem; margin-left: 6px; background: color-mix(in oklab, var(--ui-text-inverse) 14%, transparent); color: var(--ui-text-inverse); box-shadow: none; }
+}

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

@@ -0,0 +1,6 @@
+/* tray-code: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-tray > :is(.ui-code, .ui-tree), .ui-tray > .ui-disclosure > .ui-code { box-shadow: none; }
+  /* Generated output closes the source panel after the tray's frame reset. */
+  .ui-tray > .ui-disclosure .ui-code { border-radius: 0 0 var(--ui-radius-xl) var(--ui-radius-xl); background: transparent; box-shadow: inset 0 1px 0 var(--ui-line-hair); }
+}

package/src/styles/system/tray.css

@@ -0,0 +1,20 @@
+/* tray: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-tray { position: relative; min-width: 0; margin: 0; padding: var(--ui-inset); border-radius: var(--ui-radius-2xl); background: var(--ui-surface-tray); color: var(--ui-text-body); box-shadow: inset 0 0 0 1px var(--ui-line-hair), 0 1px 0 var(--ui-lip); }
+  .ui-tray-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-xs) var(--ui-space-md); min-height: 2.75rem; padding: var(--ui-space-sm) var(--ui-space-md); }
+  .ui-tray-title { min-width: 0; margin: 0; color: var(--ui-text-strong); font-size: .8125rem; font-weight: var(--ui-weight-medium); line-height: 1.4; letter-spacing: 0; }
+  .ui-tray-description { margin: 2px 0 0; color: var(--ui-text-muted); font-size: .75rem; line-height: 1.5; }
+  .ui-tray-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-xs); }
+  .ui-tray-head > :is(.ui-button, .ui-tray-tools) { margin-block: calc(-1 * var(--ui-space-sm)); }
+  .ui-tray-caption { margin: 0; padding: var(--ui-space-sm) var(--ui-space-md); color: var(--ui-text-muted); font-size: .78125rem; line-height: 1.6; text-wrap: pretty; overflow-wrap: anywhere; }
+  .ui-tray-caption code { color: var(--ui-text-body); }
+  .ui-tray > * + :is(.ui-stage, .ui-code, .ui-browser, .ui-compare) { margin-top: var(--ui-inset); }
+  .ui-tray > .ui-tray-head + :is(.ui-stage, .ui-code, .ui-browser, .ui-compare) { margin-top: 0; }
+  .ui-tray > .ui-callout { margin-top: var(--ui-inset); border-radius: var(--ui-radius-xl); }
+  .ui-tray > .ui-disclosure > summary { padding-inline: var(--ui-space-sm); }
+  .ui-tray .ui-stage { box-shadow: none; }
+  .ui-tray:has(> .ui-browser:only-child) { padding: 0; border-radius: var(--ui-radius-xl); background: none; box-shadow: none; }
+  .ui-tray .ui-browser[data-variant="plain"]::after { content: none; }
+  .ui-tray > .ui-browser[data-variant="plain"]:only-child::after { content: ""; }
+  .ui-tray > :has(> .ui-browser-tools:last-child) + .ui-tray-caption, .ui-tray > .ui-browser-tools + .ui-tray-caption { padding-top: 0; }
+}

package/src/styles/system/tree.css

@@ -0,0 +1,15 @@
+/* tree: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-tree img { flex: none; align-self: center; width: 14px; height: 14px; }
+  .ui-tree { margin: 0; overflow-x: auto; overflow-wrap: anywhere; padding: var(--ui-space-sm) 0; 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-tree ul { margin: 0; padding: 0; list-style: none; }
+  .ui-tree ul ul { margin-left: 1.375rem; box-shadow: inset 1px 0 0 var(--ui-line-hair); }
+  .ui-tree li > div > * { min-width: 0; }
+  .ui-tree li > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--ui-space-sm); padding: .3125rem var(--ui-space-md); }
+  .ui-tree ul ul li > div { padding-left: var(--ui-space-sm); }
+  .ui-tree svg { flex: none; align-self: center; width: 14px; height: 14px; color: var(--ui-text-muted); }
+  .ui-tree b { color: var(--ui-text-strong); font: var(--ui-weight-regular) var(--ui-text-code)/1.5 var(--font-family-mono); }
+  .ui-tree span { color: var(--ui-text-muted); font-size: .78125rem; }
+  .ui-tree [data-mark="added"] > div { background: var(--ui-code-added); }
+  .ui-tree [data-mark="added"] > div > b::after { content: " +"; color: var(--ui-status-success); }
+}

package/src/styles/system/waterfall.css

@@ -0,0 +1,14 @@
+/* waterfall: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-waterfall { display: grid; gap: 2px; padding: var(--ui-space-md) var(--ui-space-lg) var(--ui-space-lg); border-radius: var(--ui-radius-xl); @apply --ui-sheet-face; box-shadow: var(--ui-elevation-rise-1); }
+  .ui-waterfall-axis { display: grid; grid-template-columns: 7.5rem 1fr; margin-bottom: var(--ui-space-xs); color: var(--ui-text-muted); font: var(--ui-weight-regular) .65625rem/1 var(--font-family-mono); }
+  .ui-waterfall-axis > div { display: flex; justify-content: space-between; }
+  .ui-waterfall-row { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; min-height: 1.75rem; font-size: .78125rem; }
+  .ui-waterfall-row > span { overflow: hidden; color: var(--ui-text-strong); font-family: var(--font-family-mono); font-size: .71875rem; text-overflow: ellipsis; white-space: nowrap; }
+  .ui-waterfall-track { position: relative; height: 100%; background: repeating-linear-gradient(90deg, var(--ui-line-hair) 0 1px, transparent 1px 25%); }
+  .ui-waterfall-track > i { position: absolute; top: 50%; height: 8px; translate: 0 -50%; border-radius: 3px; background: var(--ui-text-strong); }
+  @media (forced-colors: active) { .ui-waterfall-track > i { box-sizing: border-box; border: 1px solid CanvasText; } }
+  .ui-waterfall-track > i[data-tone="muted"] { background: var(--ui-line-mark); }
+  .ui-waterfall-track > i[data-tone="blocking"] { background: var(--ui-tone-amber); }
+  .ui-waterfall-mark { position: absolute; top: 2px; bottom: 2px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ui-status-danger); }
+}