@master/internal-site 0.1.1 → 0.1.3

package/src/demo/DemoCopyButton.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import '@master/internal-site/styles/interface.css'
+  import '@master/internal-site/styles/system/copy.css'
+
   import type { Snippet } from 'svelte'
   import type { HTMLButtonAttributes } from 'svelte/elements'
   import IconCopy from '@tabler/icons-svelte-runes/icons/copy'

package/src/demo/DemoCopyGroup.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import '@master/internal-site/styles/system/copy.css'
+
   import type { Snippet } from 'svelte'
   import { setCopyFeedback, type CopyResult } from '@master/internal-site/demo/copy-feedback.ts'
 

package/src/demo/DemoFeatureSupport.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import '@master/internal-site/styles/system/inline-code.css'
+
   import '@master/internal-site/styles/system/specimens.css'
   import { onMount } from 'svelte'
 

package/src/demo/DemoGeneratedCSS.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import '@master/internal-site/styles/system/disclosure.css'
+
   import type { Snippet } from 'svelte'
 
   /** The complete generated stylesheet stays one native, closed disclosure under the source. */

package/src/demo/DemoIndex.astro

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/interface.css'
 import '@master/internal-site/styles/system/specimens.css'
 
 export interface DemoIndexGroup {

package/src/demo/DemoMotion.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import '@master/internal-site/styles/interface.css'
   import type { Snippet } from 'svelte'
   import { onMount } from 'svelte'
   import IconPlayerPause from '@tabler/icons-svelte-runes/icons/player-pause'

package/src/demo/DemoScrollArea.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import '@master/internal-site/styles/system/scroll.css'
+
   import '@master/internal-site/styles/system/specimens.css'
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'

package/src/demo/DemoStyleComparison.astro

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/compare.css'
 import Demo from '@master/internal-site/demo/Demo.svelte'
 import DemoViewport from '@master/internal-site/demo/DemoViewport.svelte'
 

package/src/demo/DemoSurface.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import '@master/internal-site/styles/system/sheet.css'
+
   import '@master/internal-site/styles/system/specimens.css'
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'

package/src/demo/DemoThemeComparison.astro

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/compare.css'
 import Demo from '@master/internal-site/demo/Demo.svelte'
 import DemoViewport from '@master/internal-site/demo/DemoViewport.svelte'
 import { demoDocument } from '@master/internal-site/demo/reference/document.ts'

package/src/demo/DemoTokenTable.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/table.css'
 import InlineCode from '@master/internal-site/components/InlineCode.astro'
 import RenderNode from '@master/internal-site/components/RenderNode.astro'
 

package/src/demo/DemoViewport.svelte

@@ -28,6 +28,11 @@
 </script>
 
 <script lang="ts">
+  import '@master/internal-site/styles/interface.css'
+  import '@master/internal-site/styles/system/browser.css'
+  import '@master/internal-site/styles/system/range.css'
+  import '@master/internal-site/styles/system/segmented.css'
+
   import { untrack } from 'svelte'
   import IconMoon from '@tabler/icons-svelte-runes/icons/moon'
   import IconPlayerPause from '@tabler/icons-svelte-runes/icons/player-pause'

package/src/demo/DemoWaterfall.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/waterfall.css'
 import Demo from '@master/internal-site/demo/Demo.svelte'
 import type { DemoWaterfallProps } from '@master/internal-site/demo/demo-waterfall.ts'
 

package/src/demo/foundations/FoundationDialog.astro

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/interface.css'
 import FoundationSpecimen from '@master/internal-site/demo/foundations/FoundationSpecimen.astro'
 ---
 

package/src/demo/foundations/FoundationMedia.astro

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/sheet.css'
 import DemoContainer from '@master/internal-site/demo/DemoContainer.svelte'
 import DemoLabel from '@master/internal-site/demo/DemoLabel.svelte'
 import DemoMedia from '@master/internal-site/demo/DemoMedia.svelte'

package/src/demo/foundations/FoundationShrink.astro

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/sheet.css'
 import DemoContainer from '@master/internal-site/demo/DemoContainer.svelte'
 import DemoItem from '@master/internal-site/demo/DemoItem.svelte'
 ---

package/src/demo/foundations/Palette.svelte

@@ -3,6 +3,8 @@
 </script>
 
 <script lang="ts">
+  import '@master/internal-site/styles/system/fields.css'
+
   import '@master/internal-site/styles/system/specimens.css'
   import '@master/internal-site/styles/demo.css'
   import DemoCopyButton from '@master/internal-site/demo/DemoCopyButton.svelte'

package/src/demo/illustration-materials.ts

@@ -159,7 +159,7 @@ export function drawing(theme: Theme) {
 <head>
 <meta charset="utf-8">
 <title>${escapeHtml(title)}</title>
-<link rel="stylesheet" href="${asset('../../../../styles/system/tokens.css')}">
+<link rel="stylesheet" href="${asset('../styles/system/tokens.css')}">
 <link rel="stylesheet" href="${asset('./illustration.css')}">
 </head>
 <body>

package/src/demo/illustration.css

@@ -0,0 +1,218 @@
+/*
+ * Illustration primitives drawn with the site's own tokens (`styles/system/tokens.css`), at 1:1 with the
+ * article: the 720px scene shows at the wide media width (712px on desktop), so a 14px label reads as 14px.
+ * Artifacts are sheets, operations are control-sized chips, groups are eyebrow captions over a hairline partition:
+ * the figure is a tray's stage, so nothing in it forms another nested frame. Nothing invents a colour.
+ */
+@font-face { font-family: Geist; font-weight: 100 900; src: url("../public/fonts/GeistVariable.woff2") format("woff2"); }
+@font-face { font-family: "IBM Plex Mono"; font-weight: 400; src: url("../public/fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
+
+:root { color-scheme: light; }
+:root.dark { color-scheme: dark; }
+* { box-sizing: border-box; }
+body {
+  margin: 0; overflow: hidden;
+  background: var(--ui-stage-light), var(--ui-surface-stage);
+  color: var(--ui-text-body); font: var(--ui-weight-regular) 13px/20px Geist, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+.scene { position: relative; overflow: hidden; }
+.scene > * { position: absolute; }
+
+/* Routes: one hairline ink, a chevron head, dashes only for a labelled condition */
+.routes { inset: 0; overflow: visible; }
+.routes path { fill: none; stroke: var(--ui-line-mark); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
+.routes path[data-dashed] { stroke-dasharray: 3 4; }
+.routes marker path { stroke: var(--ui-text-disabled); stroke-width: 1.25; }
+.routes path[marker-end] { stroke: var(--ui-text-disabled); }
+
+/* Type: the documentation's small sizes at its light regular weight */
+.title { color: var(--ui-text-strong); font-size: 14px; font-weight: var(--ui-weight-medium); line-height: 20px; white-space: nowrap; }
+.note { color: var(--ui-text-muted); font-size: 13px; line-height: 20px; white-space: nowrap; }
+.body { color: var(--ui-text-body); font-size: 13px; line-height: 20px; white-space: nowrap; }
+.edge { color: var(--ui-text-muted); font-size: 12px; line-height: 16px; white-space: nowrap; }
+.code { color: var(--ui-text-body); font: 400 12.5px/20px "IBM Plex Mono", monospace; white-space: nowrap; }
+.eyebrow { color: var(--ui-text-muted); font-size: 11px; font-weight: var(--ui-weight-medium); line-height: 16px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
+.center { translate: -50% 0; text-align: center; }
+.end { translate: -100% 0; text-align: right; }
+.icon { flex: none; width: 16px; height: 16px; color: var(--ui-text-muted); }
+.icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
+
+/* An artifact: the sheet face at rise-1, the small card radius */
+.sheet {
+  display: flex; flex-direction: column; width: max-content; gap: 4px; padding: 13px 16px 14px;
+  border-radius: var(--ui-radius-xl);
+  background: linear-gradient(180deg, var(--ui-surface-sheet), var(--ui-surface-sheet-lo));
+  box-shadow: var(--ui-elevation-rise-1);
+}
+.anchor-center { translate: -50% 0; }
+.anchor-end { translate: -100% 0; }
+.sheet > .row { display: flex; align-items: center; gap: 8px; min-height: 20px; }
+.sheet > .rule { height: 1px; margin: 7px -16px 5px; background: var(--ui-line-hair); }
+.sheet .bars { display: grid; gap: 9px; padding-top: 8px; }
+.sheet .bars i { display: block; height: 5px; border-radius: 3px; background: var(--ui-line-divider); }
+
+/* An operation: a control-sized chip, like a button at rest */
+.chip {
+  display: flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 12px 0 10px;
+  border-radius: var(--ui-radius-md);
+  background: linear-gradient(180deg, var(--ui-surface-sheet), var(--ui-surface-sheet-lo));
+  box-shadow: var(--ui-elevation-rise-1);
+  color: var(--ui-text-strong); font-size: 13.5px; font-weight: var(--ui-weight-medium); white-space: nowrap;
+}
+
+/* A plain mark: an icon beside a title, with no frame */
+.mark { display: flex; align-items: center; gap: 8px; }
+
+/* A boundary between two places: one hairline partition, each side captioned by an eyebrow */
+.divider { width: 1px; background: var(--ui-line-divider); }
+
+/* A window: one contour, a tray-tone toolbar with its dots only */
+.window { overflow: hidden; border-radius: var(--ui-radius-xl); background: var(--ui-surface-stage); box-shadow: var(--ui-elevation-rise-1); }
+.window > .toolbar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: var(--ui-surface-tray); }
+.window > .toolbar i { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-line-strong); }
+.window > .bars { display: grid; gap: 10px; padding: 18px 20px; }
+.window > .bars i { display: block; height: 5px; border-radius: 3px; background: var(--ui-line-divider); }
+.window > .bars i:first-child { height: 8px; border-radius: 4px; background: var(--ui-line-strong); }
+
+/* Inspection guides expose a control's padding; they are annotations, not part of the taught button. */
+.spacing-study { --sample-ink: var(--ui-text-muted); translate: -50% 0; }
+.spacing-study.accented { --sample-ink: var(--ui-tone-blue); }
+.spacing-control {
+  position: relative; display: flex; align-items: center; justify-content: center;
+  min-height: 38px; padding: 8px var(--sample-padding); border: 1px solid var(--ui-line-divider);
+  border-radius: var(--ui-radius-md); background: var(--ui-surface-sheet); box-shadow: var(--ui-elevation-rise-1);
+}
+.spacing-control > .body { color: var(--ui-text-strong); font-size: 14px; font-weight: 400; line-height: 1.2; }
+.spacing-control > i { position: absolute; inset-block: 0; width: var(--sample-padding); background: color-mix(in oklch, var(--sample-ink) 10%, transparent); }
+.spacing-control > .padding-start { left: 0; border-right: 1px dotted var(--sample-ink); border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md); }
+.spacing-control > .padding-end { right: 0; border-left: 1px dotted var(--sample-ink); border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0; }
+.spacing-ruler { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 16px 1px 0; }
+.spacing-ruler > .edge { color: var(--sample-ink); }
+.spacing-ruler > i { flex: none; position: relative; width: var(--sample-padding); height: 7px; border-inline: 1px solid var(--sample-ink); }
+.spacing-ruler > i::after { content: ''; position: absolute; top: 3px; inset-inline: 0; border-top: 1px solid var(--sample-ink); }
+
+/* Equal-area swatches show real color. Only the target outline belongs to the annotation. */
+.color-scale { display: flex; gap: 16px; width: max-content; }
+.color-scale-step { display: grid; justify-items: center; gap: 10px; }
+.color-scale-step > i { display: block; width: 40px; aspect-ratio: 1; border-radius: var(--ui-radius-sm); box-shadow: inset 0 0 0 1px var(--ui-line-hair); }
+.color-scale-step > i[data-selected] { outline: 1px solid var(--annotation-ink); outline-offset: 5px; }
+.role-selection { display: grid; justify-items: center; gap: 18px; width: max-content; }
+.role-selection > .code { color: var(--annotation-ink); }
+.role-selection-sample { padding: 20px 24px; border-radius: var(--ui-radius-lg); box-shadow: var(--ui-elevation-rise-1); }
+.role-selection-sample > span { font: var(--ui-weight-regular) 14px/1.5 Geist, sans-serif; }
+.spacing-sample { width: max-content; outline: 1px dashed var(--annotation-ink); }
+.spacing-sample[data-kind="padding"] { background: color-mix(in oklch, var(--annotation-ink) 12%, var(--ui-surface-stage)); }
+.spacing-item { position: relative; padding: 10px 12px; background: var(--ui-surface-sheet); box-shadow: inset 0 0 0 1px var(--ui-line-divider); }
+.spacing-sample[data-kind="gap"] > .spacing-item + .spacing-item::before { content: ''; position: absolute; inset-inline: 0; bottom: 100%; height: var(--spacing-md); background: color-mix(in oklch, var(--annotation-ink) 12%, var(--ui-surface-stage)); }
+.sizing-study { display: grid; gap: 16px; }
+.sizing-parent { outline: 1px dashed var(--ui-text-muted); }
+.sizing-child { display: flex; justify-content: space-between; gap: 16px; padding: 16px; background: var(--ui-surface-sheet); box-shadow: inset 0 0 0 1px var(--ui-line-divider); }
+.radius-sample { width: 224px; background: var(--ui-surface-sheet); outline: 1px dashed var(--ui-text-muted); }
+.radius-child { padding: 16px 20px; background: color-mix(in oklch, var(--ui-tone-blue) 16%, var(--ui-surface-sheet)); }
+.radius-parent-content { padding: 24px 20px; }
+.shadow-study { display: grid; gap: 16px; width: max-content; }
+.shadow-sample { display: grid; gap: 8px; padding: 24px; border-radius: var(--ui-radius-lg); background: var(--ui-surface-sheet); }
+.shadow-following { position: relative; padding: 10px 24px; box-shadow: inset 0 1px 0 var(--ui-line-divider); }
+.shadow-gap { position: absolute; right: -24px; top: -16px; width: 0; height: 16px; border-inline-start: 1px solid var(--ui-tone-blue); }
+.shadow-gap::before, .shadow-gap::after { content: ''; position: absolute; left: -3px; width: 5px; border-top: 1px solid var(--ui-tone-blue); }
+.shadow-gap::before { top: 0; }
+.shadow-gap::after { bottom: 0; }
+.shadow-gap > .edge { display: block; width: max-content; margin-inline-start: 8px; color: var(--ui-tone-blue); line-height: 16px; }
+.font-comparison { display: grid; grid-template-columns: repeat(3, max-content); align-items: baseline; gap: 24px 36px; }
+.font-specimen { line-height: 1.5; color: var(--ui-text-strong); }
+.leading-study { display: grid; grid-template-columns: repeat(2, max-content); gap: 72px; }
+.leading-column { display: grid; align-content: start; gap: 16px; }
+.leading-lines { width: 12rem; color: var(--ui-text-strong); }
+.leading-lines > span { display: block; background: color-mix(in oklch, var(--annotation-ink) 8%, transparent); box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--annotation-ink) 30%, transparent); }
+.leading-column > .edge { color: var(--annotation-ink); }
+.tracking-scope { display: grid; grid-template-columns: repeat(2, max-content); align-items: baseline; gap: 12px 28px; padding: 24px; border: 1px solid var(--ui-line-divider); border-radius: var(--ui-radius-lg); }
+.tracking-row { display: contents; }
+.tracking-row > .code { grid-column: 1 / -1; }
+.tracking-row + .tracking-row > .code { margin-top: 20px; }
+.tracking-row > :not(.tracking-sample) { letter-spacing: normal; }
+.tracking-sample { width: max-content; line-height: 1.5; color: var(--ui-text-strong); box-shadow: inset 0 -1px 0 var(--annotation-ink); }
+.tracking-row > .edge { color: var(--annotation-ink); }
+
+/* Syntax anatomy: one intact string with exact ranges and nearby, directly attached explanations. */
+[data-tone="blue"] { --annotation-ink: var(--ui-tone-blue); }
+[data-tone="violet"] { --annotation-ink: var(--ui-tone-violet); }
+[data-tone="amber"] { --annotation-ink: color-mix(in srgb, var(--ui-tone-amber) 75%, var(--ui-text-strong)); }
+.annotated-code { display: flex; width: max-content; }
+.code-part { position: relative; padding-block: 4px; background: color-mix(in oklch, var(--annotation-ink) 8%, transparent); }
+.code-part > .code { color: var(--annotation-ink); }
+.code-part:first-child { border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm); }
+.code-part:last-child { border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; }
+.code-bracket { position: absolute; inset-inline: 1px; bottom: -9px; height: 5px; border: 1px solid var(--annotation-ink); border-top: 0; }
+.annotation { display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; }
+.annotation > .title { color: var(--annotation-ink); }
+.routes path[data-from] { stroke: color-mix(in srgb, var(--annotation-ink) 65%, var(--ui-line-mark)); }
+
+/* A shared stylesheet reaches every consumer; conversion and verification have different scopes. */
+.migration-reach { left: 50%; top: 50%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; width: max-content; }
+.migration-reach > .sheet { position: static; }
+.migration-trunk { position: relative; height: 76px; border-left: 1px solid var(--ui-line-mark); }
+.migration-trunk > .edge { position: absolute; left: 12px; top: 24px; }
+.migration-consumers { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 28px; }
+.migration-consumer { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 42px; }
+.migration-consumer::before { content: ''; position: absolute; top: 0; height: 26px; left: 50%; border-left: 1px solid var(--ui-line-mark); }
+.migration-consumer::after { content: ''; position: absolute; top: 0; left: -14px; right: -14px; border-top: 1px solid var(--ui-line-mark); }
+.migration-consumer:first-child::after { left: 50%; }
+.migration-consumer:last-child::after { right: 50%; }
+.migration-screen { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--ui-radius-md); }
+.migration-consumer.is-batch .migration-screen { background: color-mix(in oklch, var(--ui-tone-blue) 8%, transparent); outline: 1px solid color-mix(in oklch, var(--ui-tone-blue) 45%, transparent); }
+.migration-consumer.is-batch .migration-screen > :is(.title, .icon) { color: var(--ui-tone-blue); }
+.migration-verification { position: relative; align-self: stretch; display: flex; justify-content: center; margin-top: 28px; padding-top: 24px; }
+.migration-verification::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 8px; border: 1px solid var(--ui-line-mark); border-top: 0; }
+
+/* Same DOM and pointer state; only the suffix's test location changes. */
+.selector-specimen > p { margin: 0 0 8px; }
+.selector-specimen > a { position: relative; display: block; padding: 6px 26px 6px 0; border-radius: var(--ui-radius-xs); }
+.selector-specimen[data-test="owner"] { outline: 1px dashed var(--ui-tone-blue); outline-offset: 3px; }
+.selector-specimen[data-test="target"] > a:first-of-type { outline: 1px dashed var(--ui-tone-blue); outline-offset: 3px; }
+.selector-specimen[data-test="owner"] > a > .body,
+.selector-specimen[data-test="target"] > a:first-of-type > .body { text-decoration: underline; text-underline-offset: 3px; }
+.selector-pointer { position: absolute; top: 15px; right: 4px; width: 20px; height: 20px; fill: var(--ui-surface-sheet); stroke: var(--ui-text-strong); stroke-width: 1.25; stroke-linejoin: round; }
+
+/* Native code containment: an intrinsic block with indentation, braces and a measured scope guide. */
+.code-scope { display: flex; flex-direction: column; width: max-content; }
+.code-scope > .code { color: var(--annotation-ink, var(--ui-text-body)); }
+.code-scope-body { padding-left: 16px; border-left: 1px solid color-mix(in srgb, var(--annotation-ink, var(--ui-text-muted)) 35%, transparent); }
+.code-scope-body > .code-scope { --annotation-ink: var(--ui-text-body); }
+.code-scope-body > .code-scope[data-tone="violet"] { --annotation-ink: var(--ui-tone-violet); }
+
+/* Computed-variable comparison: nested boundaries mean DOM scopes; swatches are literal teaching results. */
+.variable-scope { display: flex; flex-direction: column; gap: 4px; width: max-content; padding: 12px; border: 1px solid var(--ui-line-divider); border-radius: var(--ui-radius-lg); }
+.variable-scope > .code:first-child { color: var(--ui-text-strong); margin-bottom: 3px; }
+.variable-region { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 10px; border-left: 1px solid var(--ui-line-strong); background: var(--ui-surface-tray); border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; }
+.variable-sample { margin-top: 8px; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: #1d4ed8; }
+.variable-sample > .code { color: white; }
+.variable-scope[data-inline="true"] .variable-sample { background: #86198f; }
+.variable-scope .edge { line-height: 20px; }
+
+/* Layer order is a ranked list. The final entry lies outside the five named layers. */
+.priority-stack { display: flex; flex-direction: column; gap: 8px; width: max-content; }
+.priority-stack > div { padding: 6px 28px; text-align: center; background: var(--ui-surface-sheet); border-radius: var(--ui-radius-sm); box-shadow: 0 0 0 1px var(--ui-line-hair); }
+.priority-stack > .unlayered { position: relative; margin-top: 12px; background: none; box-shadow: none; }
+.priority-stack > .unlayered::before { content: ''; position: absolute; top: -10px; inset-inline: 0; height: 1px; background: var(--ui-line-divider); }
+
+.routes path[data-emphasis], .routes marker#arrow-emphasis path { stroke: var(--ui-text-muted); }
+
+/* A removed input remains as context, with no live dependency edge. */
+.source-contribution[data-removed] { background: none; box-shadow: none; outline: 1px dashed var(--ui-line-strong); }
+.source-contribution[data-removed] .title { color: var(--ui-text-muted); text-decoration: line-through; }
+
+/* A shared measured width scale distinguishes the viewport from a query container. */
+.query-scopes { --query-ink: var(--ui-tone-blue); }
+.query-ruler { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+.query-ruler::before, .query-ruler::after { content: ''; flex: 1; height: 8px; border-top: 1px solid var(--query-ink); }
+.query-ruler::before { border-left: 1px solid var(--query-ink); }
+.query-ruler::after { border-right: 1px solid var(--query-ink); }
+.query-ruler > .code { color: var(--query-ink); }
+.query-viewport { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 16px 0 22px; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius-md); }
+.query-scope-heading { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-inline: 16px; }
+.query-scope-heading > .code { color: var(--query-ink); }
+.query-container-study { --query-ink: var(--ui-tone-violet); }
+.query-container { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border: 1px solid var(--ui-line-divider); border-radius: var(--ui-radius-sm); background: var(--ui-surface-sheet); }
+.query-container > .code { color: var(--query-ink); }
+.query-descendant { margin-top: 8px; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-surface-tray); }

package/src/docs-shell/components/ArticleHeader.astro

@@ -1,4 +1,6 @@
 ---
+import '@master/internal-site/styles/system/callout.css'
+import '@master/internal-site/styles/system/pagehead.css'
 import '../../styles/docs-shell/docs.css'
 import IconAlertTriangle from '@tabler/icons-svelte-runes/icons/alert-triangle'
 import ChevronLeftSvg from '../../public/images/chevron-left.svg'

package/src/docs-shell/components/Callout.astro

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/callout.css'
 import IconAlertTriangle from '@tabler/icons-svelte-runes/icons/alert-triangle'
 import IconCheck from '@tabler/icons-svelte-runes/icons/check'
 import IconInfoCircle from '@tabler/icons-svelte-runes/icons/info-circle'

package/src/docs-shell/components/CodeCopyButton.astro

@@ -1,4 +1,6 @@
 ---
+import '@master/internal-site/styles/interface.css'
+import '@master/internal-site/styles/system/copy.css'
 import IconCheck from '@tabler/icons-svelte-runes/icons/check'
 import IconCopy from '@tabler/icons-svelte-runes/icons/copy'
 

package/src/docs-shell/components/CodeTabBar.astro

@@ -1,4 +1,6 @@
 ---
+import '@master/internal-site/styles/system/code-panel.css'
+import '@master/internal-site/styles/system/code-tabs.css'
 import CodeCopyButton from './CodeCopyButton.astro'
 
 type Tab = { name?: string, lang: string, ext?: string }

package/src/docs-shell/components/CodeTabs.astro

@@ -1,5 +1,6 @@
 ---
-import '../../styles/docs-shell/code.css'
+import '@master/internal-site/styles/system/code-tabs.css'
+import '../../styles/system/code-panel.css'
 import { toHtml } from 'hast-util-to-html'
 import highlightCode from '../utils/highlight-code'
 import { uniqueId } from '../utils/unique-id'

package/src/docs-shell/components/CodeView.astro

@@ -1,5 +1,5 @@
 ---
-import '../../styles/docs-shell/code.css'
+import '../../styles/system/code-panel.css'
 
 import type { HTMLAttributes } from 'astro/types'
 import type { CodeProp } from './code-props'

package/src/docs-shell/components/DocHeader.svelte

@@ -1,20 +1,18 @@
 <script lang="ts" module>
-  import type { DocSidebarProps } from './DocSidebar.svelte'
-
   export interface DocHeaderProps {
     class?: string
     /** See `Header`: overlays the page and slides away while reading down. */
     stickable?: boolean
     transitionAtTop?: boolean
-    /** Chapters the compact menu lists. */
-    documentNavigation?: DocSidebarProps['pageCategories']
-    documentNavigationTitle?: string
     /** Accepted for section shells; the header always spans the page. */
     contained?: boolean
   }
 </script>
 
 <script lang="ts">
+  import '@master/internal-site/styles/interface.css'
+  import '@master/internal-site/styles/system/header-core.css'
+
   // `.app-wrapper` sets the homepage sections' column gutters; the homepage loads it through this header.
   import '../../styles/docs-shell/wrapper.css'
   import Header from './Header.svelte'
@@ -31,7 +29,7 @@
   import app from 'virtual:master-site/app'
   import { getSite } from '../site'
 
-  let { class: className, stickable, transitionAtTop, documentNavigation, documentNavigationTitle }: DocHeaderProps = $props()
+  let { class: className, stickable, transitionAtTop }: DocHeaderProps = $props()
   const { t, locale, pathname, i18n } = getSite()
   const tw = locale === 'tw'
   const home = pathname === (tw ? '/tw' : '/')
@@ -41,7 +39,7 @@
 </script>
 
 <Header class={className} {stickable} {transitionAtTop}>
-  <DocMenuButton class="ui-header-menu" {documentNavigation} {documentNavigationTitle} />
+  <DocMenuButton class="ui-header-menu ui-header-control" />
   <Link href="/" class="ui-header-brand" aria-label={`${app.name} ${tw ? '首頁' : 'home'}`} oncontextmenu={(event: MouseEvent) => {
     event.preventDefault()
     location.assign(app.brandURL)
@@ -64,19 +62,18 @@
     </HeaderNav>{/each}
   </nav>
   <div class="ui-header-end" data-home-controls={app.header?.searchOnHome ? 'full' : undefined}>
-    <!-- Search leads the end group as a quiet pill: the glass and its shortcut. Homepages may opt into the same desktop search control. -->
-    <SearchButton class="ui-header-search" data-compact={home && !app.header?.searchOnHome ? '' : undefined}>
-      <IconSearch size={16} stroke={1.5} aria-hidden="true" />
+    <!-- Desktop keeps the search pill and shortcut; compact headers use a 44px icon target. -->
+    <SearchButton class="ui-header-control ui-header-search" data-compact={home && !app.header?.searchOnHome ? '' : undefined}>
+      <IconSearch size={18} stroke={1.5} aria-hidden="true" />
       <kbd class="ui-kbd" aria-hidden="true">⌘K</kbd>
     </SearchButton>
     {#each headerCommunityNavs as { Icon, disabled, fullName, ...eachLink } (eachLink.name)}
       <Link
         {...eachLink}
         aria-label={fullName || eachLink.name}
-        class="ui-button"
+        class="ui-button ui-header-control"
         data-variant="quiet"
         data-shape="icon"
-        data-size="sm"
         data-disabled={disabled || undefined}
         {disabled}
       >
@@ -87,7 +84,7 @@
     {/each}
     {#if showLanguage}
       {#if headerCommunityNavs.length}<span class="ui-header-divider" aria-hidden="true"></span>{/if}
-      <LanguageButton />
+      <LanguageButton class="ui-header-control" />
     {/if}
   </div>
 </Header>