@master/internal-site 0.2.8 → 0.2.10

package/src/styles/system/prompt.css

@@ -1,7 +1,5 @@
-/* prompt: owned component styles; shared definitions come from the foundation. */
+/* A prose prompt uses the canonical code panel; only its prose body differs. */
 @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; }
+  .ui-prompt-body { margin: 0; padding: var(--ui-space-sm) var(--ui-space-md) var(--ui-space-md); color: var(--color-text-strong); font: var(--ui-weight-regular) .9375rem/1.7 var(--font-family-sans); white-space: pre-wrap; }
+  .ui-prompt-body var { font-style: normal; }
 }

package/src/styles/system/reading.css

@@ -17,16 +17,14 @@
   .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 { position: absolute; right: 100%; top: 50%; translate: -.375rem -50%; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: calc(var(--radius-control-sm) * var(--corner-scale)); corner-shape: var(--corner-shape); 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(p, ul, ol, blockquote) a:not([class]):focus-visible { @apply --ui-focus-ring; outline-offset: 2px; border-radius: calc(var(--radius-chip) * var(--corner-scale)); corner-shape: var(--corner-shape); }
   .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); }

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

@@ -1,10 +1,5 @@
-/* search-trigger: owned component styles; shared definitions come from the foundation. */
+/* Search action composition; UI button owns the surface and states. */
 @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 > .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 { justify-content: flex-start; width: 100%; --btn-height: 2.5rem; --btn-gap: .625rem; }
   .ui-search-trigger > .kbd { margin-left: auto; }
 }

package/src/styles/system/segmented.css

@@ -1,7 +1 @@
 @import '@master/ui/components/segmented.css';
-@layer components {
-  .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); }
-}

package/src/styles/system/sidebar.css

@@ -9,6 +9,6 @@
   .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:focus-visible { @apply --ui-focus-ring; outline-offset: 1px; border-radius: calc(var(--radius-control-sm) * var(--corner-scale)); corner-shape: var(--corner-shape); }
   .ui-nav-link > .badge { margin-left: auto; }
 }

package/src/styles/system/stage.css

@@ -1,18 +1,12 @@
-/* stage: owned component styles; shared definitions come from the foundation. */
+/* UI sheet-flat owns stage material and geometry; the site arranges lesson artwork. */
 @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 { position: relative; isolation: isolate; container: stage / inline-size; display: grid; place-items: center; min-height: 10rem; padding: 3rem 2.5rem; overflow: hidden; }
   .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); }
+  .ui-stage[data-background="grid"] { background-image: linear-gradient(var(--color-line-hair) 1px, transparent 1px), linear-gradient(90deg, var(--color-line-hair) 1px, transparent 1px); background-size: 20px 20px; }
+  .ui-stage[data-background="dots"] { background-image: radial-gradient(var(--color-line-divider) .8px, transparent 1.1px); background-size: 14px 14px; }
+  .ui-stage[data-background="hatch"] { background-image: var(--ui-hatch); }
+  .ui-stage[data-background="checkerboard"] { background-image: conic-gradient(var(--color-line-hair) 25%, transparent 0 50%, var(--color-line-hair) 0 75%, transparent 0); background-size: 16px 16px; }
   @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/stage.ts

@@ -0,0 +1,2 @@
+import './sheet.ts'
+import './stage.css'

package/src/styles/system/steps.css

@@ -11,7 +11,7 @@
 }
 
 /*
- * Document steps (`StepSection`) on `ui-steps` (styles/system/data.css): a step's content holds an authored heading,
+ * Document steps (`StepSection`) on `ui-steps` (styles/system/steps.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 {
@@ -32,7 +32,6 @@
   /* 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; }

package/src/styles/system/tabs.ts

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

package/src/styles/system/toc.css

@@ -11,7 +11,7 @@
   .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 a:focus-visible { @apply --ui-focus-ring; outline-offset: 1px; border-radius: calc(var(--radius-chip) * var(--corner-scale)); corner-shape: var(--corner-shape); }
   .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); }
@@ -21,7 +21,7 @@
 }
 
 /*
- * The page's contents (`ui-toc`, styles/system/shell.css) as the site uses them: the documentation rail (docs.css
+ * The page's contents (`ui-toc`, styles/system/toc.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"`.
  */
@@ -32,7 +32,7 @@
   .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:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; border-radius: calc(var(--radius-chip) * var(--corner-scale)); corner-shape: var(--corner-shape); }
   .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. */

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

@@ -1,6 +1,4 @@
-/* tray-code: owned component styles; shared definitions come from the foundation. */
+/* Source and generated output retain their canonical UI wells inside the tray. */
 @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); }
+  .ui-tray > .ui-disclosure > .ui-code { margin-top: var(--ui-inset); }
 }

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

@@ -1,5 +1,9 @@
 /* tray: owned component styles; shared definitions come from the foundation. */
 @layer components {
+  /* Explicit held-root roles: scaled child radius + tray's 4px inset, in either curve mode. */
+  .ui-tray > .code-panel, .ui-tray > .ui-disclosure > .code-panel { --code-radius: var(--radius-surface); }
+  .ui-tray > .window { --window-radius: var(--radius-surface); }
+  .ui-tray > .alert { --alert-radius: var(--radius-surface); }
   .ui-tray { margin: 0; }
   .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; }
@@ -10,11 +14,7 @@
   .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-callout { margin-top: var(--ui-inset); }
   .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

@@ -1,7 +1,7 @@
 /* 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 { margin: 0; overflow-x: auto; overflow-wrap: anywhere; padding: var(--ui-space-sm) 0; }
   .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; }

package/src/styles/system/waterfall.css

@@ -1,6 +1,6 @@
 /* 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 { display: grid; gap: 2px; padding: var(--ui-space-md) var(--ui-space-lg) var(--ui-space-lg); }
   .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; }

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

@@ -1,5 +0,0 @@
-/* Compatibility code entry; owners use these same leaves directly. */
-@import '../system/code-panel.css';
-@import '../system/code-tabs.css';
-@import '../system/copy.css';
-@import '../system/disclosure.css';

package/src/styles/system/buttons.css

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

package/src/styles/system/code.css

@@ -1,8 +0,0 @@
-/* Explicit full code collection. Components import their own leaf stylesheet. */
-@import './code-panel.css';
-@import './prompt.css';
-@import './tray-code.css';
-@import './code-tabs.css';
-@import './inline-code.css';
-@import './disclosure.css';
-@import './tree.css';

package/src/styles/system/controls.css

@@ -1,10 +0,0 @@
-/* Explicit full controls collection. Components import their own leaf stylesheet. */
-@import './buttons.css';
-@import './segmented.css';
-@import './fields.css';
-@import './range.css';
-@import './checks.css';
-@import './copy.css';
-@import './kbd.css';
-@import './button-feedback.css';
-@import './tooltip.css';

package/src/styles/system/data.css

@@ -1,10 +0,0 @@
-/* Explicit full data collection. Components import their own leaf stylesheet. */
-@import './table.css';
-@import './metrics.css';
-@import './source.css';
-@import './parameters.css';
-@import './steps.css';
-@import './index.css';
-@import './logos.css';
-@import './chart.css';
-@import './waterfall.css';

package/src/styles/system/sheet.css

@@ -1 +0,0 @@
-@import '@master/ui/components/surface.css';

package/src/styles/system/shell.css

@@ -1,8 +0,0 @@
-/* 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/surfaces.css

@@ -1,7 +0,0 @@
-/* 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 './expand.css';

package/src/styles/system/table.css

@@ -1,3 +0,0 @@
-@import '@master/ui/components/table.css';
-@import '@master/ui/components/surface.css';
-@import './table-layout.css';

package/src/styles/system/tray.css

@@ -1,2 +0,0 @@
-@import '@master/ui/components/surface.css';
-@import './tray-layout.css';