@master/internal-site 0.2.8 → 0.2.10

package/src/styles/docs-shell/menu.css

@@ -26,7 +26,7 @@
   .ui-mobile-menu-community > a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: .5rem .75rem; color: var(--ui-text-muted); text-decoration: none; transition: color var(--ui-duration-quick); }
   .ui-mobile-menu-community > a > .ui-menu-external { position: absolute; top: calc(50% - .875rem); right: calc(50% - 1rem); width: .625rem; height: .625rem; pointer-events: none; }
   .ui-mobile-menu-preferences { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding-top: 1rem; border-top: 1px solid var(--ui-line-hair); }
-  .ui-mobile-menu-preferences > .select { width: auto; max-width: 100%; min-height: 2.75rem; padding-left: 0; padding-right: 1.5rem; background-color: transparent; background-position: right .125rem center; border-radius: var(--ui-radius-sm); box-shadow: none; color: var(--ui-text-muted); font-size: .8125rem; }
+  .ui-mobile-menu-preferences > .select { width: auto; max-width: 100%; min-height: 2.75rem; padding-left: 0; padding-right: 1.5rem; background-color: transparent; background-position: right .125rem center; box-shadow: none; color: var(--ui-text-muted); font-size: .8125rem; }
   .ui-mobile-menu-preferences > .select:focus-visible { @apply --ui-focus-ring; outline-offset: 3px; }
   @media (hover: hover) {
     .ui-mobile-menu-link:hover, .ui-mobile-menu-community > a:hover { color: var(--ui-text-body); }

package/src/styles/docs-shell/prose.css

@@ -55,7 +55,6 @@
   .ui-prose > :is(p, ul, ol) code[data-token],
   .ui-prose > details:not([class]) > :is(p, ul, ol) code[data-token] { display: inline-block; max-width: 100%; line-height: 1.5; vertical-align: baseline; }
   /* A run of inline code that wraps keeps its chip on both lines instead of an open cut. */
-  .ui-inline-code { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
   .ui-prose > :is(p, ul, ol) del { text-decoration-color: var(--ui-status-danger); }
   .ui-prose > details:not([class]) { max-width: var(--measure); margin-block: var(--ui-space-xl); border-block: 1px solid var(--ui-line-hair); }
   .ui-prose > details:not([class]) > summary { padding: var(--ui-space-sm) 0; color: var(--ui-text-strong); font-weight: var(--ui-weight-strong); font-size: var(--ui-text-small); cursor: pointer; }

package/src/styles/documentation-illustration.css

@@ -1,12 +1,12 @@
 /* One accessible illustration: the bitmap for the current scheme fills the tray's 18px frame. */
 @layer components {
-  .document-illustration { overflow: hidden; border-radius: var(--ui-radius-xl); }
+  .document-illustration { overflow: hidden; }
   .document-illustration img { display: block; width: 100%; height: auto; margin: 0; }
   .document-illustration img[data-scheme="dark"] { display: none; }
   /* A quiet caption-level entry, independent of the demo's generated-code panel. */
-  .ui-tray > .ui-disclosure[data-variant="text-description"] { margin-top: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
+  .ui-tray > .ui-disclosure[data-variant="text-description"] { margin-top: 0; padding: 0;  }
   .ui-tray > .ui-disclosure[data-variant="text-description"] > summary { width: fit-content; max-width: calc(100% - 2 * var(--ui-space-md)); min-height: 2rem; margin-inline: var(--ui-space-md); padding: 0; gap: var(--ui-space-2xs); color: var(--ui-text-muted); font-size: var(--ui-text-label); font-weight: var(--ui-weight-regular); }
-  .ui-tray > .ui-disclosure[data-variant="text-description"] > summary::before { width: 12px; height: 12px; }
+  .ui-tray > .ui-disclosure[data-variant="text-description"] > summary::after { width: 12px; height: 12px; }
   .ui-tray > .ui-disclosure[data-variant="text-description"] > summary:hover { color: var(--ui-text-strong); }
   .ui-tray > .ui-disclosure[data-variant="text-description"] > .ui-disclosure-body { margin-inline: 0; padding-top: var(--ui-space-xs); }
   /* The text description reads at caption size inside the tray. */

package/src/styles/documentation-index.css

@@ -27,8 +27,6 @@
   .documentation-index-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--ui-space-md); margin-top: var(--ui-space-3xl); box-shadow: inset 0 -1px 0 var(--ui-line-divider); }
   .documentation-index-toolbar > p { color: var(--ui-text-muted); @apply --ui-eyebrow-type; }
   .documentation-index-toolbar > p > .documentation-index-count { letter-spacing: .02em; }
-  .documentation-index-toolbar > .ui-segmented,
-  .documentation-index-toolbar > .ui-segmented[data-variant="underline"] { box-shadow: none; }
 
   /* Section: a ruled spread. Below 44rem the head sits over its entries. */
   .documentation-index-section { display: grid; gap: var(--ui-space-lg); padding-block: var(--ui-space-xl) var(--ui-space-2xl); }

package/src/styles/interface.css

@@ -1,5 +1,4 @@
 /* Shared actions. Document navigation and feature controls belong to their components. */
-@import './system/buttons.css';
 @import './system/button-feedback.css';
 @import './system/kbd.css';
 @import './system/tooltip.css';

package/src/styles/interface.ts

@@ -1,2 +1,3 @@
-// The interface of the site shell, loaded as the second asset boundary; see routes.ts.
+// Shared shell actions; canonical UI imports are deduplicated by module identity.
+import './system/buttons.ts'
 import './interface.css'

package/src/styles/site-contract.md

@@ -6,7 +6,7 @@ Import the UI theme through foundation and component styles through their narrow
 
 Keep header, sidebar, reading measure, contents rail, breakpoints and homepage composition stable. UI controls retain their public internal geometry. Site adapters retain link navigation semantics, overlay native preferences, table scrolling, preview isolation and code-copy orchestration. Never attach a second behavior controller to a node already owned by a site island.
 
-Import `styles/system/table.ts`, `tray.ts` and `sheet.ts` from site components. These entries share canonical UI styles as module dependencies and add only their site composition CSS. The matching `.css` entrypoints remain for compatibility; nesting them inside new CSS collections can compile the same UI surface more than once. Bare examples import the styles of their actual components rather than the full controls or surfaces collections.
+Import `styles/interface.ts` and the narrow `styles/system/*.ts` entries (table, tray, sheet, stage, code-panel, inline-code, code-tabs, disclosure, callout, index and parameters) from site components. These entries share canonical UI styles as module dependencies and add only their site composition CSS. Their local CSS files contain composition only; consumers must use the TS entry to load the corresponding canonical UI component. Retired full code/controls/surfaces/data/shell collections and duplicate table/tray/sheet CSS wrappers are removed after first-party migration. Bare examples import the styles of their actual components rather than the full controls or surfaces collections.
 
 Foundation, interface, documents and component styles retain separate route boundaries. Every class needed after hydration must be visible to prerender. Build tools stay server-only. Request context and initial HTML must remain isolated and deterministic.
 
@@ -14,13 +14,13 @@ Foundation, interface, documents and component styles retain separate route boun
 
 The shell follows the original documentation layout, refined:
 
-- **Header** 60px, 32px gutters. Community and language actions share square 36px desktop / 44px compact targets, centred 18px Tabler icons at 1.5 stroke, and an 8px gap. Desktop search retains its 30px hairline pill, 16px glass and visible ⌘K; compact search uses the same 44px target and 18px icon as its neighbours; the homepage's wide header leaves it out. Section links are plain words (body ink, current one in strong ink at medium weight), no pill. The version is plain text with a chevron. Version chevrons retain their original muted 12px size; external-link indicators remain small raised 10px marks. Text links/version controls share the target height with content-sized widths. Controls only change ink on hover. The separator has 4px margins plus the 8px control gap on each side.
+- **Header** 60px, 32px gutters. Community and language actions share square 36px desktop / 44px compact targets, centred 18px Tabler icons at 1.5 stroke, and an 8px gap. Desktop search retains its 30px quiet UI pill, 16px glass and visible ⌘K; compact search uses the same 44px target and 18px icon as its neighbours; the homepage's wide header leaves it out. Section links are plain words (body ink, current one in strong ink at medium weight), no pill. The version is plain text with a chevron. Version chevrons retain their original muted 12px size; external-link indicators remain small raised 10px marks. Text links/version controls share the target height with content-sized widths. Action hover, focus, pressed and disabled states come from the UI button contract. The separator has 4px margins plus the 8px control gap on each side.
 - **Sidebar** 276px with a 32px start gutter aligned with the logo; it starts with its first group, whose caption stands level with the page kicker and the contents caption (y = header + 56px). Group captions are muted eyebrows; entries are 14px muted on one hairline guide, 32px rows; the current entry inks a short 2px bar on the guide and takes medium weight.
 - **Contents rail** (252px) is a ruler: h2 entries have 24px ticks and h3 entries have 12px ticks with their right ends aligned before the text; titles share a second edge without indentation. The current entry takes strong ink and medium weight without changing its tick length. 13px entries in 34px rows (44px touch targets); "On this page" is a muted eyebrow on the title edge, level with the page kicker. Long lists fold inactive subsections without adding icons; following the section opens them.
 - **Page head** a muted eyebrow kicker, a regular-weight title (fluid 30–38px), an 18px lead (a second lead line, such as a layout's subtitle, at reading size), then 48px of space — no rule — before the reading starts.
 - **Page tabs** between sibling documents (`Tabs`, `ui-segmented[data-variant="underline"]`) are words on one hairline, the current one underlined in ink — the original's tabs, not a raised segmented thumb.
 - **Compact menu** below 64rem is a full-height modal: Tabler’s two-line menu at 18px / 1.5 stroke becomes a small close glyph in a 44px target, brand stays centred, search sits opposite. Primary links use fluid 36–56px medium-weight type and generous space; chapters belong to the section indexes. Community icons and native preferences sit beneath the navigation, at the bottom when space permits. External community icons carry the same raised 10px marker as header actions, anchored 11px right / 9px above the icon centre. The surface enters over 320ms, links follow at 40ms intervals, and closing takes 180ms; reduced motion removes transitions.
-- **Search trigger** (`ui-search-trigger`, on the 404) is a quiet row over one hairline with a flat `⌘K` hint; results in the dialog take a chip wash, never a raised frame. The desktop dialog footer teaches “Search anytime” with ⌘ + K keycaps on Apple devices or Ctrl + K elsewhere.
+- **Search trigger** (`ui-search-trigger`, on the 404) is a full-width quiet UI button with a key hint; the search dialog uses UI command, listbox, and keycap parts. The desktop dialog footer teaches “Search anytime” with ⌘ + K keycaps on Apple devices or Ctrl + K elsewhere.
 - **Pager** is one hairline over two links, 80px below the article: an eyebrow (Previous / Next) over a 16px title with a muted arrow; ink on hover, no boxes.
 - **Steps** hang on one hairline rail from flat 28px numbered rings (canvas face, strong contour, sans tabular figures) and take the wide column. A step title is 16px medium; its text is 14/1.8. A row step puts its text on two fifths and its code on three once the list is 46rem wide (narrower, the code stacks under its text). A preview after the steps hangs like any surface and the rail runs into it.
 - **Footer** in the documentation takes the article's wide column from the text's edge; elsewhere it is 72rem. Groups keep 11rem columns from the start (`auto-fill`), so a wide footer leaves the rest to the canvas. Link groups (Docs, Resources, Community, Legal — the license and the trademark policy) under strong-ink eyebrows, 14px links on a 32px pitch. One quiet base row under a hairline, every word 12px tracked .04em: the notice at the start, the theme and language preferences at the end, each an icon and its value with no "Theme:" or "Language:" label (the selects keep those names for assistive technology). No search field — the header carries search.

package/src/styles/system/browser.css

@@ -7,7 +7,6 @@
   .ui-browser-viewport { position: relative; max-width: none; margin-inline: auto; }
   .ui-browser-viewport > iframe { display: block; width: 100%; border: 0; background: transparent; }
   .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); }
-  .ui-browser-tools > .ui-segmented > :is(button, a) { min-height: 1.625rem; }
   .ui-browser-range { display: flex; flex: 1 1 14rem; align-items: center; gap: var(--ui-space-sm); min-width: 0; }
   .ui-browser-range > .slider { flex: 1 1 6rem; min-width: 0; max-width: 12rem; }
   .ui-browser-range > label { color: var(--ui-text-muted); @apply --ui-label-type; }

package/src/styles/system/buttons.ts

@@ -0,0 +1,2 @@
+import '@master/ui/components/button.css'
+import '@master/ui/components/icon.css'

package/src/styles/system/callout.css

@@ -1,14 +1,6 @@
-/* callout: owned component styles; shared definitions come from the foundation. */
+/* Documentation prose spacing; alert material, geometry and status belong to Master UI. */
 @layer components {
-  .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; }
-  .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); }
+  .ui-callout .alert-body { overflow-wrap: anywhere; }
+  .ui-callout .alert-body > :first-child { margin-top: 0; }
+  .ui-callout .alert-body > :last-child { margin-bottom: 0; }
 }

package/src/styles/system/callout.ts

@@ -0,0 +1,4 @@
+// Canonical alert presentation plus documentation-only text flow.
+import '@master/ui/components/icon.css'
+import '@master/ui/components/alert.css'
+import './callout.css'

package/src/styles/system/chart.css

@@ -1,6 +1,6 @@
 /* chart: owned component styles; shared definitions come from the foundation. */
 @layer components {
-  .ui-chart { display: grid; gap: var(--ui-space-md); padding: var(--ui-space-lg); border-radius: var(--ui-radius-xl); @apply --ui-sheet-face; box-shadow: var(--ui-elevation-rise-1); }
+  .ui-chart { display: grid; gap: var(--ui-space-md); padding: var(--ui-space-lg); }
   .ui-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ui-space-xs) var(--ui-space-md); }
   .ui-chart-head b { color: var(--ui-text-strong); font-size: var(--ui-text-small); font-weight: var(--ui-weight-strong); }
   .ui-chart-head small { display: block; color: var(--ui-text-muted); font: var(--ui-weight-regular) var(--ui-text-caption)/1.5 var(--font-family-sans); font-variant-numeric: tabular-nums; }

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

@@ -1,82 +1,40 @@
-/* code-panel: owned component styles; shared definitions come from the foundation. */
+/* UI code-panel/code-block/code-line own every well, corner, type and state material.
+ * This adapter owns Shiki markup, copy placement, wrapping and document annotations. */
 @layer components {
-  .ui-code { position: relative; min-width: 0; overflow: hidden; border-radius: var(--ui-radius-xl); background: var(--ui-surface-code); color: var(--ui-code-text); box-shadow: inset 0 0 0 1px var(--ui-line-contour), 0 1px 0 var(--ui-lip); }
-  .ui-code { --code-corner: calc(var(--ui-space-md) + var(--ui-text-code) * var(--ui-leading-code) / 2 - 1rem); }
-  .ui-code-bar { display: flex; align-items: center; gap: var(--ui-space-xs); min-height: calc(var(--code-corner) + 2rem); padding: var(--code-corner) var(--code-corner) 0 var(--ui-space-md); }
-  .ui-code-bar > .ui-tabs { flex: 1; min-width: 0; margin-left: calc(var(--code-corner) - var(--ui-space-md)); }
-  .ui-code-file { display: inline-flex; align-items: center; gap: var(--ui-space-xs); flex: 1; min-width: 0; color: var(--ui-text-muted); font: var(--ui-weight-regular) .75rem/1 var(--font-family-mono); }
-  .ui-code-file svg { flex: none; width: 14px; height: 14px; }
-  .ui-code pre { margin: 0; padding: var(--ui-space-md) 0; overflow-x: auto; font: var(--ui-weight-regular) var(--ui-text-code)/var(--ui-leading-code) var(--font-family-mono); tab-size: 2; scrollbar-width: thin; }
-  .ui-code pre:focus-visible { @apply --ui-focus-ring; outline-offset: -4px; border-radius: var(--ui-radius-md); }
-  .ui-code:has(> .ui-code-bar) pre { padding-top: var(--ui-space-2xs); }
-  .ui-code-line { display: block; padding: 0 var(--ui-space-lg) 0 calc(var(--ui-space-md) + var(--code-diff-gutter, 0px)); }
-  .ui-code-line { min-height: 1lh; }
-  .ui-code[data-numbers] { counter-reset: line; }
-  .ui-code[data-numbers] .ui-code-line::before { counter-increment: line; content: counter(line); display: inline-block; width: 1.75rem; margin-right: var(--ui-space-sm); color: var(--ui-text-disabled); text-align: right; user-select: none; }
-  .ui-code-line[data-mark="active"] { background: var(--ui-code-active); box-shadow: inset 2px 0 0 var(--ui-line-mark); }
-  .ui-code-line[data-mark="added"] { background: var(--ui-code-added); box-shadow: inset 2px 0 0 color-mix(in oklab, var(--ui-status-success) 70%, transparent); }
-  .ui-code-line[data-mark="removed"] { background: var(--ui-code-removed); box-shadow: inset 2px 0 0 color-mix(in oklab, var(--ui-status-danger) 70%, transparent); }
-  .ui-code pre:has(.ui-code-line:is([data-mark="added"], [data-mark="removed"])) { --code-diff-gutter: calc(1ch + var(--ui-space-sm)); }
+  .ui-code { position: relative; }
+  .ui-code .code-block > code { display: contents; }
+  .ui-code-bar > .ui-code-file { flex: 1 1 auto; }
+  .ui-code-bar > .ui-copy { flex: 0 1 auto; min-width: 0; margin-left: auto; }
+  .ui-code > .ui-copy { position: absolute; z-index: 1; top: var(--ui-inset); right: 0; padding-inline: var(--ui-space-sm) var(--ui-inset); background: linear-gradient(90deg, transparent, var(--color-surface-inset) var(--ui-space-sm)); }
+  .ui-code:has(> .ui-copy) .code-line { padding-inline-end: 3rem; }
+  /* Shiki removes notation comments from copied text. A visual sign supplements the UI diff tint. */
+  .ui-code .code-block:has(.code-line-added, .code-line-removed) { --code-diff-gutter: calc(1ch + var(--ui-space-sm)); }
+  .ui-code .code-line { padding-inline-start: calc(var(--code-padding-x) + var(--code-diff-gutter, 0px)); }
   .ui-code-line:is([data-mark="added"], [data-mark="removed"]) { position: relative; min-width: min-content; }
-  .ui-code-line[data-mark="added"]::after, .ui-code-line[data-mark="removed"]::after { position: absolute; top: 0; left: var(--ui-space-md); width: 1ch; text-indent: 0; text-align: center; color: var(--ui-text-disabled); user-select: none; }
+  .ui-code-line:is([data-mark="added"], [data-mark="removed"])::after { position: absolute; top: 0; inset-inline-start: var(--code-padding-x); width: 1ch; text-indent: 0; text-align: center; color: var(--color-text-muted); user-select: none; }
   .ui-code-line[data-mark="added"]::after { content: "+"; }
   .ui-code-line[data-mark="removed"]::after { content: "−"; }
-  .ui-code-line mark { padding: 1px 2px; border-radius: 3px; background: light-dark(oklch(22% .002 265 / .08), oklch(100% 0 none / .1)); color: inherit; box-shadow: inset 0 -1px 0 var(--ui-line-mark); }
+  .ui-code-line mark { padding: 1px 2px; border-radius: calc((var(--radius-chip) - 2px) * var(--corner-scale)); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--color-text-strong) 8%, transparent); color: inherit; }
   .ui-code .t { color: var(--ui-code-function); } .ui-code .a { color: var(--ui-code-property); } .ui-code .s { color: var(--ui-code-string); }
   .ui-code .p { color: var(--ui-code-punctuation); } .ui-code .k { color: var(--ui-code-keyword); } .ui-code .c { color: var(--ui-code-comment); font-style: italic; } .ui-code .n { color: var(--ui-code-number); }
-  .ui-code > .ui-disclosure { border-top: 1px solid var(--ui-line-hair); }
-  .ui-code > .ui-disclosure > summary { padding-inline: var(--ui-space-md); }
-  .ui-code > .ui-disclosure > pre { padding-top: 0; }
-}
-
-
-/*
- * Code panels (`ui-code`, styles/system/code.css) as the site renders them: Shiki lines are `ui-code-line` parts, the
- * copy action sits in the bar or, without one, in the corner, and tab panels all show on paper and without scripts.
- */
-@layer components {
-  /* The file's name keeps its width; a long result wraps in the room left beside the copy button. */
-  .ui-code-bar > .ui-code-file { flex: 1 0 auto; }
-  .ui-code-bar > .ui-copy { flex: 0 1 auto; min-width: 0; margin-left: auto; }
-  /* Without a bar the copy takes the panel's corner (`--code-corner`, code.css). A long line scrolls under it: the panel's own face fades in behind the button and runs to the edge, so code never runs through it. */
-  .ui-code > .ui-copy { position: absolute; z-index: 1; top: var(--code-corner); right: var(--code-corner); padding-left: var(--ui-space-sm); border-radius: var(--ui-radius-md); background: linear-gradient(90deg, transparent, var(--ui-surface-code) var(--ui-space-sm));
-    /* The face runs on to the panel's contour (1px short of the edge), so a scrolled line never shows again past the button. */
-    box-shadow: calc(var(--code-corner) - 1px) 0 0 var(--ui-surface-code); }
-  .ui-code:has(> .ui-copy) .ui-code-line { padding-right: 3rem; }
-  /* A shell command is read whole: it wraps under a hanging indent instead of hiding its flags behind the copy button. */
-  :is(.ui-code, [role="tabpanel"])[data-lang="bash"] > pre, .ui-code[data-lang="sh"] > pre, .ui-code[data-lang="shell"] > pre { white-space: pre-wrap; overflow-wrap: anywhere; }
-  :is(.ui-code, [role="tabpanel"])[data-lang="bash"] > pre .ui-code-line, .ui-code:is([data-lang="sh"], [data-lang="shell"]) > pre .ui-code-line { padding-left: calc(var(--ui-space-md) + var(--code-diff-gutter, 0px) + 2ch); text-indent: -2ch; }
-  /* Flags wrap whole: a token never breaks at its own hyphen, so `--yes` cannot split into `-` and `-yes`. */
+  :is(.ui-code, [role="tabpanel"])[data-lang="bash"] > pre, .ui-code:is([data-lang="sh"], [data-lang="shell"]) > pre { white-space: pre-wrap; overflow-wrap: anywhere; }
+  :is(.ui-code, [role="tabpanel"])[data-lang="bash"] > pre .ui-code-line, .ui-code:is([data-lang="sh"], [data-lang="shell"]) > pre .ui-code-line { padding-inline-start: calc(var(--code-padding-x) + var(--code-diff-gutter, 0px) + 2ch); text-indent: -2ch; }
   :is(.ui-code, [role="tabpanel"])[data-lang="bash"] > pre .ui-code-line > span, .ui-code:is([data-lang="sh"], [data-lang="shell"]) > pre .ui-code-line > span { display: inline-block; text-indent: 0; }
-  /* Plain text, such as a prompt for an agent, is prose set in mono: it wraps at the panel like prose. */
   :is(.ui-code, [role="tabpanel"])[data-lang="text"] > pre { white-space: pre-wrap; overflow-wrap: break-word; }
-
-  /* A Generated CSS disclosure right after its source closes the same panel: one frame, the output under a hairline,
-     as in a demo tray. Alone (after a table or a paragraph) it stays a quiet disclosure. */
-  .ui-prose > .ui-code:has(+ .ui-disclosure[data-generated]) { margin-bottom: 0; border-end-start-radius: 0; border-end-end-radius: 0; box-shadow: inset 1px 0 0 var(--ui-line-contour), inset -1px 0 0 var(--ui-line-contour), inset 0 1px 0 var(--ui-line-contour); }
-  .ui-prose > .ui-code + .ui-disclosure[data-generated] {
-    max-width: none; margin-top: 0; margin-inline: calc(var(--bleed) * -1); padding-inline: var(--ui-space-md);
-    border-radius: 0 0 var(--ui-radius-xl) 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-prose > .ui-code + .ui-disclosure[data-generated] > summary { margin-inline: calc(var(--ui-space-md) * -1); padding-inline: var(--ui-space-md); box-shadow: inset 0 1px 0 var(--ui-line-hair); }
-  .ui-prose > .ui-code + .ui-disclosure[data-generated] > .ui-code { margin-inline: calc(var(--ui-space-md) * -1); border-radius: 0 0 var(--ui-radius-xl) var(--ui-radius-xl); background: transparent; box-shadow: inset 0 1px 0 var(--ui-line-hair); }
-
-  /* @WARN and @ERROR marks: a wavy underline in the status tone instead of a wash. */
-  .ui-code-line mark[data-tone] { padding: 0; background: none; box-shadow: none; text-decoration: underline wavy 1px; text-underline-offset: 3px; }
-  .ui-code-line mark[data-tone="warning"] { text-decoration-color: var(--ui-status-warning); }
-  .ui-code-line mark[data-tone="danger"] { text-decoration-color: var(--ui-status-danger); }
-  /* [!code focus] blurs the other lines until the pointer reaches the code. */
-  .ui-code pre.has-focused .ui-code-line { transition: filter var(--ui-duration-base) var(--ui-ease); }
+  /* A generated output is a quiet native disclosure, not a second border drawn over the source well. */
+  .ui-prose > .ui-code:has(+ .ui-disclosure[data-generated]) { margin-bottom: 0; }
+  .ui-prose > .ui-code + .ui-disclosure[data-generated] { max-width: none; margin-top: 0; margin-inline: calc(var(--bleed) * -1); }
+  .ui-prose > .ui-code + .ui-disclosure[data-generated] > summary { padding-inline: var(--ui-space-md); }
+  .ui-code-line mark[data-tone] { padding: 0; background: none; text-decoration: underline wavy 1px; text-underline-offset: 3px; }
+  .ui-code-line mark[data-tone="warning"] { text-decoration-color: var(--color-warning); }
+  .ui-code-line mark[data-tone="danger"] { text-decoration-color: var(--color-danger); }
+  .ui-code pre.has-focused .ui-code-line { transition: filter var(--duration-base) var(--easing-glide); }
   .ui-code pre.has-focused:not(:hover, :focus-visible) .ui-code-line:not(.focus) { filter: blur(3px); }
   .ui-code ::selection { background: color-mix(in oklab, var(--ui-code-function) 22%, transparent); }
   @media print {
     .ui-code { break-inside: avoid; }
-    /* Paper cannot scroll: keep complete commands and long source lines readable. */
     .ui-code pre { overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; }
     .ui-code pre.has-focused .ui-code-line { filter: none; }
   }
   @media (prefers-reduced-motion: reduce) { .ui-code pre.has-focused .ui-code-line { transition: none; } }
-  @media (forced-colors: active) { .ui-code { border: 1px solid CanvasText; } }
-
 }

package/src/styles/system/code-panel.ts

@@ -0,0 +1,2 @@
+import './code-ui.ts'
+import './code-panel.css'

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

@@ -1,40 +1,12 @@
-/* code-tabs: owned component styles; shared definitions come from the foundation. */
+/* File names are a site convention; UI tabs own their geometry, states and ink. */
 @layer components {
-  .ui-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
-  .ui-tabs::-webkit-scrollbar { display: none; }
-  .ui-tabs > [role="tab"] {
-    appearance: none; display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 2rem; padding: 0 .625rem; border: 0; border-radius: var(--ui-radius-md);
-    background: transparent; color: var(--ui-text-muted); font: var(--ui-weight-regular) .75rem/1 var(--font-family-mono); cursor: pointer; transition: color var(--ui-duration-quick), background-color var(--ui-duration-quick), box-shadow var(--ui-duration-quick);
-  }
-  .ui-tabs > [role="tab"] svg { width: 14px; height: 14px; }
-  .ui-tabs > [role="tab"]:hover { color: var(--ui-text-strong); }
-  .ui-tabs > [role="tab"][aria-selected="true"] { background: var(--ui-surface-chip); color: var(--ui-text-strong); box-shadow: inset 0 0 0 1px var(--ui-line-hair); }
-  .ui-tabs > [role="tab"]:focus-visible { @apply --ui-focus-ring; outline-offset: -2px; }
-}
-
-
-/*
- * Code panels (`ui-code`, styles/system/code.css) as the site renders them: Shiki lines are `ui-code-line` parts, the
- * copy action sits in the bar or, without one, in the corner, and tab panels all show on paper and without scripts.
- */
-@layer components {
-  /* The file's name keeps its width; a long result wraps in the room left beside the copy button. */
-  /* Without a bar the copy takes the panel's corner (`--code-corner`, code.css). A long line scrolls under it: the panel's own face fades in behind the button and runs to the edge, so code never runs through it. */
-  /* A shell command is read whole: it wraps under a hanging indent instead of hiding its flags behind the copy button. */
-  /* Flags wrap whole: a token never breaks at its own hyphen, so `--yes` cannot split into `-` and `-yes`. */
-  /* Plain text, such as a prompt for an agent, is prose set in mono: it wraps at the panel like prose. */
-
-  /* A Generated CSS disclosure right after its source closes the same panel: one frame, the output under a hairline,
-     as in a demo tray. Alone (after a table or a paragraph) it stays a quiet disclosure. */
-
-  /* @WARN and @ERROR marks: a wavy underline in the status tone instead of a wash. */
-  /* [!code focus] blurs the other lines until the pointer reaches the code. */
-
+  .ui-tabs { min-width: 0; --font-family-sans: var(--font-family-mono); }
+  /* Align the tab underline with the header separator, including its 1px border. */
+  .ui-code-bar > .ui-tabs { flex: 1; align-self: stretch; margin-bottom: -1px; }
   [data-code-tabs] > [role="tabpanel"] > .ui-code-file { display: none; }
   @media (scripting: none), print {
     [data-code-tabs] > .ui-code-bar { display: none; }
     [data-code-tabs] > [role="tabpanel"][hidden] { display: block; }
     [data-code-tabs] > [role="tabpanel"] > .ui-code-file { display: flex; padding: var(--ui-space-sm) var(--ui-space-md) 0; }
   }
-
 }

package/src/styles/system/code-tabs.ts

@@ -0,0 +1,2 @@
+import '@master/ui/components/tabs.css'
+import './code-tabs.css'

package/src/styles/system/code-ui.ts

@@ -0,0 +1,2 @@
+// One canonical UI code dependency across block, inline and prompt adapters.
+import '@master/ui/components/code.css'

package/src/styles/system/copy.css

@@ -1,32 +1,10 @@
-/* copy: owned component styles; shared definitions come from the foundation. */
+/* Copy feedback and its placement inside document code headers. */
 @layer components {
   .ui-copy { display: inline-flex; align-items: center; gap: var(--ui-space-xs); }
   .ui-copy-status { color: var(--ui-text-muted); font: var(--ui-weight-regular) .75rem/1 var(--font-family-mono); }
   .ui-copy-status[data-result="success"] { color: var(--ui-status-success); }
   .ui-copy-status[data-result="error"] { color: var(--ui-status-danger); }
-}
-
-
-/*
- * Code panels (`ui-code`, styles/system/code.css) as the site renders them: Shiki lines are `ui-code-line` parts, the
- * copy action sits in the bar or, without one, in the corner, and tab panels all show on paper and without scripts.
- */
-@layer components {
-  /* The file's name keeps its width; a long result wraps in the room left beside the copy button. */
-  /* Without a bar the copy takes the panel's corner (`--code-corner`, code.css). A long line scrolls under it: the panel's own face fades in behind the button and runs to the edge, so code never runs through it. */
-  /* A shell command is read whole: it wraps under a hanging indent instead of hiding its flags behind the copy button. */
-  /* Flags wrap whole: a token never breaks at its own hyphen, so `--yes` cannot split into `-` and `-yes`. */
-  /* Plain text, such as a prompt for an agent, is prose set in mono: it wraps at the panel like prose. */
   .ui-copy-status:empty { display: none; }
-
-  /* A Generated CSS disclosure right after its source closes the same panel: one frame, the output under a hairline,
-     as in a demo tray. Alone (after a table or a paragraph) it stays a quiet disclosure. */
   .ui-copy > .ui-copy-status { min-width: 0; max-width: 16rem; text-align: end; line-height: 1.3; }
-
-  /* @WARN and @ERROR marks: a wavy underline in the status tone instead of a wash. */
-  /* [!code focus] blurs the other lines until the pointer reaches the code. */
-  @media (scripting: none), print {
-    .ui-copy { display: none; }
-  }
-
+  @media (scripting: none), print { .ui-copy { display: none; } }
 }

package/src/styles/system/dialog.css

@@ -1,16 +1,15 @@
 @import '@master/ui/components/dialog.css';
-/* Search composition. Master UI owns the modal surface, backdrop and states. */
+@import '@master/ui/components/command.css';
+@import '@master/ui/components/listbox.css';
+@import '@master/ui/components/icon.css';
+/* Search composition. UI owns the dialog, field, option states and key hints. */
 @layer components {
   .ui-dialog { --dialog-padding: 0; gap: 0; }
-  .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-search { flex-wrap: wrap; min-height: 3.5rem; }
+  .ui-dialog-search .command-input { flex-basis: 8rem; }
+  .ui-results { display: grid; gap: 2px; overflow: visible; }
+  .ui-results .listbox-option { padding: .625rem .75rem; text-decoration: none; }
+  .ui-results .listbox-option b { font-weight: var(--font-weight-control); }
+  .ui-dialog-foot { gap: var(--ui-space-md); }
   .ui-dialog-foot span { display: inline-flex; align-items: center; gap: 6px; }
 }

package/src/styles/system/disclosure.css

@@ -1,18 +1,8 @@
-/* disclosure: owned component styles; shared definitions come from the foundation. */
+/* Native accordion parts own toggle geometry, focus and state feedback. */
 @layer components {
-  .ui-disclosure { min-width: 0; }
-  .ui-disclosure > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-xs); min-height: 2.75rem; color: var(--ui-text-body); font: var(--ui-weight-medium) .8125rem/1.3 var(--font-family-sans); list-style: none; cursor: pointer; }
-  .ui-disclosure > summary::-webkit-details-marker { display: none; }
-  .ui-disclosure > summary::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; opacity: .6; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m6 3.5 4.5 4.5L6 12.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: rotate var(--ui-duration-base) var(--ui-ease); }
-  .ui-disclosure[open] > summary::before { rotate: 90deg; }
-  .ui-disclosure > summary:hover { color: var(--ui-text-strong); }
-  .ui-disclosure > summary:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; border-radius: var(--ui-radius-md); }
-  .ui-disclosure > summary .ui-disclosure-meta { margin-left: auto; color: var(--ui-text-muted); font: var(--ui-weight-regular) .75rem/1 var(--font-family-sans); }
-  .ui-disclosure[data-variant="rule"] { border-block: 1px solid var(--ui-line-hair); }
-  .ui-disclosure[data-variant="rule"] + .ui-disclosure[data-variant="rule"] { border-top: 0; }
+  .ui-disclosure > summary { flex-wrap: wrap; }
+  .ui-disclosure > summary .ui-disclosure-meta { margin-inline-start: auto; color: var(--color-text-muted); font: var(--ui-weight-regular) .75rem/1 var(--font-family-sans); }
   .ui-disclosure-body { padding-bottom: var(--ui-space-md); }
-  /* Preserve the disclosure's bottom inset when its body is also a tray caption,
-     independent of which component stylesheet is shared by the build. */
   .ui-disclosure-body.ui-tray-caption { padding-bottom: var(--ui-space-md); }
   .ui-disclosure > .ui-disclosure-body > :first-child { margin-top: 0; }
   .ui-disclosure > .ui-disclosure-body > :last-child { margin-bottom: 0; }

package/src/styles/system/disclosure.ts

@@ -0,0 +1,2 @@
+import '@master/ui/components/accordion.css'
+import './disclosure.css'

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

@@ -9,18 +9,17 @@
     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 { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 .75rem; border-radius: calc(var(--radius-control) * var(--corner-scale)); corner-shape: var(--corner-shape); 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; }
+  .ui-version { display: inline-flex; align-items: center; gap: var(--ui-space-3xs); height: 2.25rem; padding: 0 .375rem; border-radius: calc(var(--radius-control) * var(--corner-scale)); corner-shape: var(--corner-shape); 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
+ * The site header (`ui-header`, styles/system/header-core.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"`).
  */
@@ -28,10 +27,8 @@
   /* 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 .btn.ui-header-control[data-shape="icon"], .ui-mobile-menu-bar .btn.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;
+    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; line-height: 1;
   }
-  .ui-header-control.btn[data-variant="quiet"]:not(:disabled) { background: transparent; box-shadow: none; translate: none; color: var(--ui-text-muted); }
-  .ui-header-control.btn[data-variant="quiet"]:where(:hover, :active, :focus-visible, :has(select:focus-visible)):not(:disabled) { color: var(--ui-text-strong); }
   .ui-header-control.btn > 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); }
@@ -47,7 +44,7 @@
   @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 { display: inline-flex; align-items: center; min-height: var(--ui-header-target); border-radius: calc(var(--radius-control-sm) * var(--corner-scale)); corner-shape: var(--corner-shape); }
   .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; }
@@ -68,14 +65,9 @@
   .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; }
+  /* The header controls retain their placement; UI owns their material and feedback. */
+  .ui-header-search.btn { --btn-height: 1.875rem; --btn-radius: 999px; --btn-font-size: .75rem; --btn-gap: .4375rem; --btn-padding-x: .6875rem; corner-shape: round; }
   .ui-header-search > svg { flex: none; width: 1rem; height: 1rem; }
-  .ui-header-search > .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; }
@@ -86,8 +78,7 @@
     .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.btn { --btn-height: var(--ui-header-target); --btn-radius: var(--radius-control); --btn-padding-x: 0; width: var(--ui-header-target); corner-shape: var(--corner-shape); }
     .ui-header-search > svg { width: var(--ui-header-icon); height: var(--ui-header-icon); }
     .ui-header-search > .kbd { display: none; }
     /* Search can be the last visible action while hidden siblings still follow it. */

package/src/styles/system/index.css

@@ -1,13 +1,9 @@
-/* index: owned component styles; shared definitions come from the foundation. */
+/* Reading-column navigation layout; card material and interaction belong to Master UI. */
 @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 > .card { --card-padding: var(--ui-space-md); display: grid; align-content: start; gap: var(--ui-space-2xs); }
   .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); }
+  .ui-index[data-density="compact"] > .card { --card-padding: var(--ui-space-sm); gap: 2px; }
 }

package/src/styles/system/index.ts

@@ -0,0 +1,3 @@
+// Canonical navigable cards with site-owned reading-column composition.
+import '@master/ui/components/card.css'
+import './index.css'

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

@@ -1,4 +1,4 @@
-/* inline-code: owned component styles; shared definitions come from the foundation. */
+/* Only text-flow behavior belongs to the prose adapter; UI .code owns its face. */
 @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; }
+  .ui-inline-code { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
 }

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

@@ -0,0 +1,2 @@
+import './code-ui.ts'
+import './inline-code.css'

package/src/styles/system/logos.css

@@ -2,7 +2,7 @@
 /* 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 { 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: calc(var(--radius-control-sm) * var(--corner-scale)); corner-shape: var(--corner-shape); 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; }

package/src/styles/system/metrics.css

@@ -1,7 +1,7 @@
 /* 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 { display: grid; align-content: start; min-width: 0; gap: 6px; overflow-wrap: anywhere; padding: var(--ui-space-md); }
   .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; }

package/src/styles/system/parameters.css

@@ -1,6 +1,6 @@
-/* parameters: owned component styles; shared definitions come from the foundation. */
+/* Reference row composition; surface and inline-code materials belong to Master UI. */
 @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 { display: grid; margin: 0; }
   .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); }
@@ -12,6 +12,5 @@
   .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/parameters.ts

@@ -0,0 +1,4 @@
+// Reuse one surface/code dependency for reference facts and options.
+import './sheet.ts'
+import './code-ui.ts'
+import './parameters.css'