@master/internal-site 0.2.5 → 0.2.7

package/src/styles/system/badge-tones.css

@@ -0,0 +1,4 @@
+/* A comparison annotation keeps its teaching hue; Master UI owns the badge recipe. */
+@layer components {
+  .demo-badge-violet { --badge-tone: var(--ui-tone-violet); }
+}

package/src/styles/system/badge.ts

@@ -0,0 +1,2 @@
+import '@master/ui/components/badge.css'
+import './badge-tones.css'

package/src/styles/system/browser.css

@@ -1,10 +1,7 @@
+@import '@master/ui/components/window.css';
 /* browser: owned component styles; shared definitions come from the foundation. */
 @layer components {
-  .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; }
-  .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-bar { --window-bar-height: 2rem; }
   .ui-browser-body { position: relative; min-height: 12rem; }
   .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; }
@@ -12,7 +9,7 @@
   .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 > .ui-range { flex: 1 1 6rem; min-width: 0; max-width: 12rem; }
+  .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; }
   .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; }
   .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; }

package/src/styles/system/button-feedback.css

@@ -1,13 +1,10 @@
 /* button-feedback: owned component styles; shared definitions come from the foundation. */
 @layer components {
 
-  @media (pointer: coarse) {
-    .ui-button { min-height: 2.75rem; }
-  }
-  .ui-button[data-result] > svg:first-of-type { display: none; }
-  .ui-button:not([data-result]) > .ui-result-icon { display: none; }
-  .ui-button[data-result="success"] { color: var(--ui-status-success); }
-  .ui-button[data-result="error"] { color: var(--ui-status-danger); }
-  .ui-button[data-result="error"] > svg:first-of-type { display: block; }
-  .ui-button[data-result="error"] > .ui-result-icon { display: none; }
+  .btn[data-result] > svg:first-of-type { display: none; }
+  .btn:not([data-result]) > .ui-result-icon { display: none; }
+  .btn[data-result="success"] { color: var(--ui-status-success); }
+  .btn[data-result="error"] { color: var(--ui-status-danger); }
+  .btn[data-result="error"] > svg:first-of-type { display: block; }
+  .btn[data-result="error"] > .ui-result-icon { display: none; }
 }

package/src/styles/system/buttons.css

@@ -1,51 +1 @@
-/* Controls — one material, one state order: pressed (sink) < rest (rise-1) < hover (rise-1h, +0.5px) */
-@layer components {
-  .ui-button {
-    appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-xs);
-    min-height: 2.375rem; padding: 0 var(--ui-space-md); border: 0; border-radius: var(--ui-radius-md);
-    @apply --ui-sheet-face; color: var(--ui-text-strong);
-    box-shadow: var(--ui-elevation-rise-1);
-    font: var(--ui-weight-medium) .84375rem/1 var(--font-family-sans); letter-spacing: 0; text-decoration: none; white-space: nowrap;
-    cursor: pointer; user-select: none; -webkit-user-select: none;
-    transition: box-shadow var(--ui-duration-quick) var(--ui-ease), background var(--ui-duration-quick) var(--ui-ease), translate var(--ui-duration-quick) var(--ui-ease), color var(--ui-duration-quick);
-  }
-  /* A label longer than its row (large text, narrow screens) wraps inside the button instead of overflowing. */
-  .ui-button:not([data-shape="icon"]) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; text-align: center; }
-  .ui-button > svg { flex: none; width: 1rem; height: 1rem; }
-  .ui-button:where(:hover, [data-state="hover"]):not(:disabled) { translate: 0 -.5px; box-shadow: var(--ui-elevation-rise-1h); }
-  .ui-button:where(:active, [data-state="pressed"]):not(:disabled) { translate: 0 .5px; background: var(--ui-surface-well); box-shadow: var(--ui-elevation-sink); transition-duration: var(--ui-duration-press); }
-  .ui-button:where(:focus-visible, [data-state="focus"]) { @apply --ui-focus-ring; outline-offset: 2px; }
-  .ui-button:disabled { color: var(--ui-text-disabled); background: var(--ui-surface-well); box-shadow: var(--ui-elevation-flat); cursor: not-allowed; }
-  .ui-button[data-size="sm"] { min-height: 2rem; padding-inline: var(--ui-space-sm); border-radius: 5px; font-size: .78125rem; }
-  .ui-button[data-size="lg"] { min-height: 2.75rem; padding-inline: 1.25rem; font-size: .9375rem; }
-
-  /* Primary: ink on moonstone, pearl on obsidian */
-  .ui-button[data-variant="primary"] {
-    color: var(--ui-text-inverse);
-    background: linear-gradient(180deg, light-dark(oklch(32% .0026 265), oklch(98.8% 0 none)), light-dark(oklch(19.5% .003 265), oklch(91.6% .0032 265)));
-    box-shadow: inset 0 1px 0 light-dark(oklch(100% 0 none / .17), oklch(100% 0 none)), inset 0 -1px 0 light-dark(oklch(0% 0 none / .3), oklch(0% 0 none / .13)),
-      0 0 0 1px light-dark(oklch(14% .003 265), oklch(0% 0 none / .6)), 0 1px 1px -.5px var(--ui-shade-1), 0 3px 3px -1.5px var(--ui-shade-2), 0 6px 6px -3px var(--ui-shade-3);
-  }
-  .ui-button[data-variant="primary"]:where(:hover, [data-state="hover"]):not(:disabled) {
-    background: linear-gradient(180deg, light-dark(oklch(36% .0028 265), oklch(100% 0 none)), light-dark(oklch(22% .0034 265), oklch(94% .003 265)));
-    box-shadow: inset 0 1px 0 light-dark(oklch(100% 0 none / .19), oklch(100% 0 none)), inset 0 -1px 0 light-dark(oklch(0% 0 none / .3), oklch(0% 0 none / .13)),
-      0 0 0 1px light-dark(oklch(14% .003 265), oklch(0% 0 none / .6)), 0 1px 1px -.5px var(--ui-shade-1), 0 3px 3px -1.5px var(--ui-shade-2), 0 6px 6px -3px var(--ui-shade-3), 0 10px 10px -5px var(--ui-shade-4);
-  }
-  .ui-button[data-variant="primary"]:where(:active, [data-state="pressed"]):not(:disabled) {
-    background: light-dark(oklch(18% .003 265), oklch(87.5% .0035 265));
-    box-shadow: inset 0 1px 3px light-dark(oklch(0% 0 none / .55), oklch(0% 0 none / .3)), 0 0 0 1px light-dark(oklch(14% .003 265), oklch(0% 0 none / .6));
-  }
-  /* Quiet: no material until touched — toolbars, headers, dense rows */
-  .ui-button[data-variant="quiet"] { background: transparent; color: var(--ui-text-muted); box-shadow: none; }
-  .ui-button[data-variant="quiet"]:where(:hover, [data-state="hover"]):not(:disabled) { color: var(--ui-text-strong); @apply --ui-sheet-face; box-shadow: var(--ui-elevation-rise-1); translate: none; }
-  .ui-button[data-variant="quiet"][aria-pressed="true"] { color: var(--ui-text-strong); background: var(--ui-surface-well); box-shadow: var(--ui-elevation-sink); }
-  /* Gold: brand moments only (homepage hero, brand page) */
-  .ui-button[data-variant="gold"] {
-    color: var(--ui-gold-ink); background: var(--ui-gold-face); text-shadow: 0 1px 0 oklch(100% 0 none / .35);
-    box-shadow: inset 0 1px 0 oklch(100% 0 none / .65), inset 0 -1px 0 oklch(52% .12 58 / .28), 0 0 0 1px light-dark(oklch(58% .12 66 / .7), oklch(82% .14 82 / .55)),
-      0 1px 1px -.5px var(--ui-shade-1), 0 3px 3px -1.5px var(--ui-shade-2), 0 10px 18px -8px light-dark(oklch(72% .16 72 / .42), oklch(82% .16 80 / .3));
-  }
-  .ui-button[data-shape="icon"] { width: 2.375rem; padding: 0; }
-  .ui-button[data-shape="icon"][data-size="sm"] { width: 2rem; }
-
-}
+@import '@master/ui/components/button.css';

package/src/styles/system/checks.css

@@ -1,18 +1,4 @@
-@prune native;
-/* checks: owned component styles; shared definitions come from the foundation. */
-@layer components {
-  .ui-check { display: inline-flex; align-items: center; gap: var(--ui-space-xs); color: var(--ui-text-strong); font-size: var(--ui-text-small); cursor: pointer; }
-  .ui-check > input:not(.ui-switch) { appearance: none; display: grid; place-items: center; flex: none; width: 1.125rem; height: 1.125rem; margin: 0; border-radius: var(--ui-radius-sm); background: var(--ui-surface-well); box-shadow: var(--ui-elevation-sink); cursor: pointer; transition: background-color var(--ui-duration-quick), box-shadow var(--ui-duration-quick); }
-  .ui-check > input:not(.ui-switch):not(:checked) { box-shadow: var(--ui-elevation-sink), inset 0 0 0 1px var(--ui-line-divider); }
-  .ui-check > input:not(.ui-switch)::after { content: ""; width: 10px; height: 10px; opacity: 0; background: var(--ui-text-inverse); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.3 8 2.8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
-  .ui-check > input:not(.ui-switch):checked { background: var(--ui-surface-ink); box-shadow: inset 0 1px 0 light-dark(oklch(100% 0 none / .16), oklch(100% 0 none)), 0 0 0 1px light-dark(oklch(14% .003 265), oklch(0% 0 none / .5)); }
-  .ui-check > input:not(.ui-switch):checked::after { opacity: 1; }
-  .ui-check > input[type="radio"] { border-radius: 50%; }
-  .ui-check > input[type="radio"]::after { width: 6px; height: 6px; border-radius: 50%; mask: none; }
-  .ui-check > input:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
-  .ui-switch { position: relative; appearance: none; flex: none; width: 2.25rem; height: 1.375rem; margin: 0; border-radius: var(--ui-radius-pill); background: var(--ui-surface-well); box-shadow: var(--ui-elevation-sink); cursor: pointer; transition: background-color var(--ui-duration-base) var(--ui-ease); }
-  .ui-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 1rem; height: 1rem; border-radius: 50%; background: linear-gradient(180deg, oklch(100% 0 none), oklch(96.5% .0011 265)); box-shadow: 0 0 0 1px var(--ui-line-contour), 0 1px 1px var(--ui-shade-1), 0 2px 3px -1px var(--ui-shade-2); transition: translate var(--ui-duration-base) var(--ui-ease); }
-  .ui-switch:checked { background: var(--ui-surface-ink); box-shadow: inset 0 1px 2px oklch(0% 0 none / .3); }
-  .ui-switch:checked::before { translate: .875rem 0; background: light-dark(linear-gradient(180deg, oklch(100% 0 none), oklch(96.5% .0011 265)), linear-gradient(180deg, oklch(26% .0024 265), oklch(20% .002 265))); }
-  .ui-switch:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
-}
+/* Native choice controls are owned by Master UI. */
+@import '@master/ui/components/checkbox.css';
+@import '@master/ui/components/radio.css';
+@import '@master/ui/components/switch.css';

package/src/styles/system/controls.css

@@ -8,4 +8,3 @@
 @import './kbd.css';
 @import './button-feedback.css';
 @import './tooltip.css';
-@import './menu.css';

package/src/styles/system/dialog.css

@@ -1,7 +1,7 @@
-/* dialog: owned component styles; shared definitions come from the foundation. */
+@import '@master/ui/components/dialog.css';
+/* Search composition. Master UI owns the modal surface, backdrop and states. */
 @layer components {
-  .ui-dialog { width: min(40rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100dvh - 4rem)); padding: 0; overflow: hidden; border: 0; border-radius: var(--ui-radius-2xl); background: var(--ui-surface-float); color: var(--ui-text-body); box-shadow: var(--ui-elevation-overlay); }
-  .ui-dialog::backdrop { background: var(--ui-surface-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
+  .ui-dialog { --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; }

package/src/styles/system/expand.css

@@ -5,7 +5,7 @@
   .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; }
+  .ui-expand-control > .btn { pointer-events: auto; }
+  .ui-expand-control > .btn > svg { transition: rotate var(--ui-duration-quick) var(--ui-ease); }
+  .ui-expand[data-expanded="true"] > .ui-expand-control > .btn > svg { rotate: 180deg; }
 }

package/src/styles/system/fields.css

@@ -1,25 +1,9 @@
-/* fields: owned component styles; shared definitions come from the foundation. */
+@import '@master/ui/components/input.css';
+@import '@master/ui/components/select.css';
 @layer components {
-  .ui-field { display: grid; gap: var(--ui-space-xs); color: var(--ui-text-strong); font-size: var(--ui-text-small); font-weight: var(--ui-weight-medium); }
-  .ui-field-hint { color: var(--ui-text-muted); font-size: .75rem; font-weight: var(--ui-weight-regular); }
-  .ui-input, .ui-select {
-    width: 100%; min-height: 2.5rem; padding: .5625rem .75rem; border: 0; border-radius: var(--ui-radius-md);
-    background: var(--ui-surface-well); color: var(--ui-text-strong); box-shadow: var(--ui-elevation-sink);
-    font: var(--ui-weight-regular) var(--ui-text-small)/1.45 var(--font-family-sans); resize: vertical;
-    transition: box-shadow var(--ui-duration-quick), background-color var(--ui-duration-quick);
-  }
-  .ui-input::placeholder { color: var(--ui-text-muted); }
-  .ui-input:hover:not(:focus, :disabled), .ui-select:hover:not(:focus, :disabled) { background: var(--ui-surface-well-hover); }
-  .ui-input:focus, .ui-select:focus-visible { outline: none; background: var(--ui-surface-sheet); box-shadow: inset 0 0 0 1px var(--ui-line-mark), 0 0 0 3px light-dark(oklch(22% .002 265 / .1), oklch(100% 0 none / .12)); }
-  .ui-input:disabled, .ui-select:disabled { color: var(--ui-text-disabled); cursor: not-allowed; }
-  .ui-select { appearance: none; padding-right: 2rem; cursor: pointer;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
-    background-repeat: no-repeat; background-position: right .625rem center; background-size: 14px; }
-  .ui-select[data-variant="raised"] { background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--ui-surface-sheet), var(--ui-surface-sheet-lo)); background-position: right .625rem center, 0 0; background-size: 14px, auto; box-shadow: var(--ui-elevation-rise-1); font-weight: var(--ui-weight-medium); }
-  .ui-select[data-variant="overlay"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
-  :has(> .ui-select[data-variant="overlay"]:focus-visible) { @apply --ui-focus-ring; outline-offset: 2px; }
-
-  @media (pointer: coarse) {
-    .ui-input, .ui-select { min-height: 2.75rem; }
-  }
+  /* The site presents a native preference select through its existing label/icon. */
+  .site-select-overlay[data-variant="overlay"] { appearance: auto; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
+  :has(> .site-select-overlay[data-variant="overlay"]:focus-visible) { @apply --focus-ring; outline-offset: 2px; }
+  .ui-field { display: grid; gap: var(--ui-space-xs); }
+  .ui-field-hint { color: var(--color-text-muted); font-size: .75rem; }
 }

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

@@ -27,12 +27,12 @@
 @layer components {
   /* A single rhythm for the page header and the modal's matching top bar. */
   .ui-header, .ui-mobile-menu-bar { --ui-header-target: 2.25rem; --ui-header-icon: 1.125rem; --ui-header-control-gap: .5rem; }
-  .ui-header .ui-button.ui-header-control[data-shape="icon"], .ui-mobile-menu-bar .ui-button.ui-header-control[data-shape="icon"] {
+  .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;
   }
-  .ui-header-control.ui-button[data-variant="quiet"]:not(:disabled) { background: transparent; box-shadow: none; translate: none; color: var(--ui-text-muted); }
-  .ui-header-control.ui-button[data-variant="quiet"]:where(:hover, :active, :focus-visible, :has(select:focus-visible)):not(:disabled) { color: var(--ui-text-strong); }
-  .ui-header-control.ui-button > svg:not(.ui-header-external) { flex: none; width: var(--ui-header-icon); height: var(--ui-header-icon); }
+  .ui-header-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); }
   .ui-header .ui-header-nav > a, .ui-header .ui-version { height: var(--ui-header-target); }
@@ -53,13 +53,13 @@
   .ui-header .ui-version { position: relative; cursor: pointer; }
   .ui-header .ui-version > svg { width: 12px; height: 12px; color: var(--ui-text-muted); }
   .ui-header .ui-version:hover { color: var(--ui-text-strong); }
-  .ui-header-nav > a > .ui-badge { margin-left: var(--ui-space-2xs); }
+  .ui-header-nav > a > .badge { margin-left: var(--ui-space-2xs); }
   /* External destinations carry a small raised arrow beside the label or icon. */
   .ui-header-nav > a:has(.ui-header-external) { position: relative; padding-right: 1.125rem; }
-  .ui-header-nav > a > .ui-header-external, .ui-header-end > .ui-button > .ui-header-external { position: absolute; top: .375rem; right: .125rem; width: .625rem; height: .625rem; pointer-events: none; }
+  .ui-header-nav > a > .ui-header-external, .ui-header-end > .btn > .ui-header-external { position: absolute; top: .375rem; right: .125rem; width: .625rem; height: .625rem; pointer-events: none; }
   /* Anchor the small external mark to the icon centre, independent of the 36/44px target. */
-  .ui-header-end > .ui-button > .ui-header-external { top: calc(50% - .875rem); right: calc(50% - 1rem); }
-  .ui-header-end > .ui-button[data-disabled] { color: var(--ui-text-disabled); pointer-events: none; }
+  .ui-header-end > .btn > .ui-header-external { top: calc(50% - .875rem); right: calc(50% - 1rem); }
+  .ui-header-end > .btn[data-disabled] { color: var(--ui-text-disabled); pointer-events: none; }
   /* Icon-only controls name themselves with an ink tooltip under the pointer or keyboard focus. */
   .ui-header-end > :is(a, button, label) { position: relative; }
   .ui-header-end > * > .ui-tooltip { top: calc(100% + 8px); left: 50%; translate: -50% 0; opacity: 0; visibility: hidden; transition: opacity var(--ui-duration-quick), visibility 0s linear var(--ui-duration-quick); }
@@ -75,7 +75,7 @@
   .ui-header-search:hover { color: var(--ui-text-strong); background: var(--ui-surface-chip); box-shadow: inset 0 0 0 1px var(--ui-line-strong); }
   .ui-header-search:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
   .ui-header-search > svg { flex: none; width: 1rem; height: 1rem; }
-  .ui-header-search > .ui-kbd { min-width: 0; height: auto; padding: 0; background: none; color: inherit; box-shadow: none; font: var(--ui-weight-regular) .6875rem/1 var(--font-family-sans); letter-spacing: .04em; }
+  .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; }
@@ -89,7 +89,7 @@
     .ui-header-search { justify-content: center; width: var(--ui-header-target); height: var(--ui-header-target); padding: 0; border-radius: var(--ui-radius-md); box-shadow: none; }
     .ui-header-search:hover { background: transparent; box-shadow: none; }
     .ui-header-search > svg { width: var(--ui-header-icon); height: var(--ui-header-icon); }
-    .ui-header-search > .ui-kbd { display: none; }
+    .ui-header-search > .kbd { display: none; }
     /* Search can be the last visible action while hidden siblings still follow it. */
     .ui-header-end > * > .ui-tooltip { left: auto; right: 0; translate: none; }
     .ui-header-end > * > .ui-tooltip::before { left: auto; right: calc(var(--ui-header-target) / 2 - 4px); translate: none; }

package/src/styles/system/kbd.css

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

package/src/styles/system/mixins.css

@@ -1,6 +1,6 @@
 /* Shared declarations of the system components, expanded in place by Master CSS (`@apply --name`). */
-@mixin --ui-sheet-face { background: linear-gradient(180deg, var(--ui-surface-sheet), var(--ui-surface-sheet-lo)); }
-@mixin --ui-focus-ring { outline: 2px solid var(--ui-focus); }
+@mixin --ui-sheet-face { @apply --surface-sheet; }
+@mixin --ui-focus-ring { @apply --focus-ring; }
 /* A caption over a group: small, quiet, in the reading face — never a mono capital eyebrow. */
 @mixin --ui-label-type { font: var(--ui-weight-regular) var(--ui-text-label)/1.5 var(--font-family-sans); letter-spacing: var(--ui-tracking-label); text-transform: none; }
 /* An eyebrow over a group or a page: small sans capitals, medium weight, tracked open so the capitals breathe. */

package/src/styles/system/pager.css

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

package/src/styles/system/range.css

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

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

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

package/src/styles/system/segmented.css

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

package/src/styles/system/sheet.css

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

package/src/styles/system/sheet.ts

@@ -0,0 +1,2 @@
+// Share the canonical surface stylesheet with table and tray compositions.
+import '@master/ui/components/surface.css'

package/src/styles/system/sidebar.css

@@ -10,5 +10,5 @@
   .ui-nav-link:is([aria-current="page"], [aria-current="true"]) { color: var(--ui-text-strong); font-weight: var(--ui-weight-medium); }
   .ui-nav-link:is([aria-current="page"], [aria-current="true"])::before { background: var(--ui-text-strong); }
   .ui-nav-link:focus-visible { @apply --ui-focus-ring; outline-offset: 1px; border-radius: var(--ui-radius-sm); }
-  .ui-nav-link > .ui-badge { margin-left: auto; }
+  .ui-nav-link > .badge { margin-left: auto; }
 }

package/src/styles/system/specimens.css

@@ -10,11 +10,11 @@
     border-radius: var(--ui-radius-md); @apply --ui-sheet-face;
     color: var(--ui-text-strong); box-shadow: var(--ui-elevation-rise-1); font: var(--ui-weight-medium) .8125rem/1.4 var(--font-family-mono);
   }
-  .ui-item[data-tone="blue"], .ui-badge[data-tone="blue"], .ui-legend [data-tone="blue"] { --tone: var(--ui-tone-blue); }
-  .ui-item[data-tone="violet"], .ui-badge[data-tone="violet"], .ui-legend [data-tone="violet"] { --tone: var(--ui-tone-violet); }
-  .ui-item[data-tone="amber"], .ui-badge[data-tone="amber"], .ui-legend [data-tone="amber"] { --tone: var(--ui-tone-amber); }
-  .ui-item[data-tone="green"], .ui-badge[data-tone="green"], .ui-legend [data-tone="green"] { --tone: var(--ui-tone-green); }
-  .ui-item[data-tone="red"], .ui-badge[data-tone="red"], .ui-legend [data-tone="red"] { --tone: var(--ui-tone-red); }
+  .ui-item[data-tone="blue"], .ui-legend [data-tone="blue"] { --tone: var(--ui-tone-blue); }
+  .ui-item[data-tone="violet"], .ui-legend [data-tone="violet"] { --tone: var(--ui-tone-violet); }
+  .ui-item[data-tone="amber"], .ui-legend [data-tone="amber"] { --tone: var(--ui-tone-amber); }
+  .ui-item[data-tone="green"], .ui-legend [data-tone="green"] { --tone: var(--ui-tone-green); }
+  .ui-item[data-tone="red"], .ui-legend [data-tone="red"] { --tone: var(--ui-tone-red); }
   .ui-item:not([data-tone="neutral"], :not([data-tone])) {
     background: linear-gradient(180deg, color-mix(in oklab, var(--tone) 10%, var(--ui-surface-sheet)), color-mix(in oklab, var(--tone) 13%, var(--ui-surface-sheet-lo)));
     color: color-mix(in oklab, var(--tone) 72%, var(--ui-text-strong));
@@ -24,18 +24,6 @@
   .ui-item[data-variant="outline"] { background: transparent; color: var(--ui-text-strong); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 60%, transparent); }
   .ui-item[data-variant="ghost"] { background: var(--ui-hatch); color: var(--ui-text-muted); box-shadow: inset 0 0 0 1px var(--ui-line-divider); }
 
-  /* Badge: a small, legible category or state */
-  .ui-badge {
-    --tone: var(--ui-tone-neutral);
-    display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 1.375rem; padding: 0 .5rem; border-radius: var(--ui-radius-sm);
-    background: color-mix(in oklab, var(--tone) 10%, transparent); color: color-mix(in oklab, var(--tone) 75%, var(--ui-text-strong));
-    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 24%, transparent);
-    font: var(--ui-weight-medium) .71875rem/1 var(--font-family-mono); letter-spacing: .01em; white-space: nowrap; vertical-align: middle;
-  }
-  .ui-badge[data-tone="neutral"], .ui-badge:not([data-tone]) { background: var(--ui-surface-well); color: var(--ui-text-body); box-shadow: inset 0 0 0 1px var(--ui-line-contour); }
-  .ui-badge[data-variant="dot"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
-  .ui-badge[data-size="sm"] { height: 1.125rem; padding: 0 .375rem; font-size: .65625rem; }
-
   /* Label: names a condition, outside the measured layout */
   .ui-label { display: inline-block; color: var(--ui-text-muted); @apply --ui-label-type; }
   .ui-label[data-case="as-is"] { text-transform: none; letter-spacing: 0; font-size: .75rem; }

package/src/styles/system/surfaces.css

@@ -4,5 +4,4 @@
 @import './stage.css';
 @import './compare.css';
 @import './browser.css';
-@import './scroll.css';
 @import './expand.css';

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

@@ -0,0 +1,12 @@
+/* Document placement, scrolling and embedded source are site composition. Cell paint is Master UI. */
+@layer components {
+  .ui-table { min-width: 0; overflow: auto; scrollbar-width: thin; }
+  .ui-table:focus-visible { @apply --focus-ring; }
+  .ui-table .table-cell { vertical-align: top; }
+  .ui-table [data-align="end"] { text-align: end; white-space: nowrap; }
+  .ui-table[data-variant="lookup"] tbody th { width: 1%; white-space: nowrap; }
+  .ui-table :is(td, th) code { overflow-wrap: anywhere; }
+  .ui-table :is(td, th) ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
+  .ui-table .ui-preview { display: inline-block; width: 1.25rem; height: 1.25rem; margin-right: var(--ui-space-xs); border-radius: var(--radius-chip); vertical-align: -.3em; }
+  .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(--color-text-muted); font-size: .75rem; }
+}

package/src/styles/system/table.css

@@ -1,23 +1,3 @@
-/* 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); }
-}
+@import '@master/ui/components/table.css';
+@import '@master/ui/components/surface.css';
+@import './table-layout.css';

package/src/styles/system/table.ts

@@ -0,0 +1,4 @@
+// Module imports share canonical UI styles across site compositions.
+import '@master/ui/components/table.css'
+import '@master/ui/components/surface.css'
+import './table-layout.css'