@master/internal-site 0.2.5 → 0.2.7

package/README.md

@@ -4,7 +4,7 @@ First-party Astro and Svelte 5 website framework for Master websites. This packa
 
 ## Ownership
 
-Master maintains document layouts, navigation, search, localization, MDX components, interface tokens, shared styles, artwork, demonstration primitives and design-system specimens here. Master CSS maintains its homepage composition, guide/reference content and adapters that read its product data. The organization blog, brand pages and design-system handbook live in the Master website, outside this package. Drafts are never packaged.
+Master maintains document layouts, navigation, search, localization, MDX components, site composition, UI-backed controls, artwork and demonstration orchestration here. Master CSS maintains its homepage composition, guide/reference content and adapters that read its product data. The organization blog and brand pages live in the Master website, outside this package. Drafts are never packaged.
 
 The package imports Master CSS rather than duplicating its compiler or maintaining a parallel CSS implementation. Install the matching Astro, Svelte, Vite and Master CSS toolchain versions declared by your site's lockfile. During RC development, use the exact source-pinned `site` snapshot and its dependency closure; never depend on a moving Git branch.
 

package/dist/astro.mjs

@@ -2311,6 +2311,9 @@ const componentPaths = {
 	img: "Image.svelte",
 	Image: "Image.svelte",
 	table: "markdown/Table.astro",
+	th: "markdown/TableHead.astro",
+	td: "markdown/TableCell.astro",
+	tr: "markdown/TableRow.astro",
 	Code: "Code.astro",
 	InlineCode: "InlineCode.astro",
 	PMAction: "PMAction.astro",
@@ -2325,7 +2328,12 @@ function documentComponents(tree) {
 	visit(tree, (node) => {
 		if (node.type === "link" || node.type === "linkReference") used.add("a");
 		if (node.type === "image" || node.type === "imageReference") used.add("img");
-		if (node.type === "table") used.add("table");
+		if (node.type === "table") for (const part of [
+			"table",
+			"th",
+			"td",
+			"tr"
+		]) used.add(part);
 		if (node.type === "heading" && [2, 3].includes(node.depth)) used.add(`h${node.depth}`);
 		if (["mdxJsxFlowElement", "mdxJsxTextElement"].includes(node.type) && node.name in componentPaths) used.add(node.name);
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@master/internal-site",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "type": "module",
   "description": "First-party Astro and Svelte website framework for Master sites.",
   "engines": {
@@ -308,14 +308,15 @@
   "peerDependencies": {
     "astro": "7.4.2",
     "svelte": "5.57.2",
-    "@master/css": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0",
-    "@master/css-astro": "^2.0.1",
+    "@master/css": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0",
+    "@master/css-astro": "^2.1.0",
     "vite": "8.3.5",
-    "@master/css-compiler": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0",
-    "@master/css-tooling": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0",
-    "@master/css-schema": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0",
-    "@master/css-preset": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0",
-    "@master/css-language-service": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0"
+    "@master/css-compiler": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0",
+    "@master/css-tooling": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0",
+    "@master/css-schema": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0",
+    "@master/css-preset": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0",
+    "@master/css-language-service": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0",
+    "@master/ui": "^0.0.2"
   },
   "dependencies": {
     "@astrojs/svelte": "^9.1.2",

package/src/benchmarks/BenchmarkChart.astro

@@ -1,7 +1,7 @@
 ---
 import { siteOf } from '@master/internal-site/astro/site-context'
 import { localizeBenchmarkChart } from './localization'
-import '@master/internal-site/styles/system/table.css'
+import '@master/internal-site/styles/system/table.ts'
 import ExpandContent from '@master/internal-site/components/ExpandContent.svelte'
 import BenchmarkBars from '@master/internal-site/benchmarks/BenchmarkBars.astro'
 import BenchmarkMetricTable from '@master/internal-site/benchmarks/BenchmarkMetricTable.astro'
@@ -36,18 +36,18 @@ const chart = localizeBenchmarkChart(Astro.props.chart, t)
 {chart.kind === 'data-table' && (
   <ExpandContent client:idle={{ timeout: 500 }}>
     {/* Preserve keyboard access to wide result tables. */}
-    <div class="ui-table" data-numeric-from={chart.numericFrom} role="region" aria-label={chart.label} tabindex="0">
-      <table>
+    <div class="ui-table sheet sheet-flat" data-numeric-from={chart.numericFrom} role="region" aria-label={chart.label} tabindex="0">
+      <table class="table">
         <thead>
-          <tr>
-            {chart.headers.map((header) => <th>{header}</th>)}
+          <tr class="table-row">
+            {chart.headers.map((header) => <th class="table-heading">{header}</th>)}
           </tr>
         </thead>
         <tbody>
           {chart.rows.map(([rowHeader, ...cells]) => (
-            <tr>
-              <th>{rowHeader}</th>
-              {cells.map((cell) => <td>{cell}</td>)}
+            <tr class="table-row">
+              <th class="table-heading">{rowHeader}</th>
+              {cells.map((cell) => <td class="table-cell">{cell}</td>)}
             </tr>
           ))}
         </tbody>

package/src/benchmarks/BenchmarkDelta.astro

@@ -1,9 +1,8 @@
 ---
-import '@master/internal-site/styles/system/specimens.css'
+import '@master/ui/components/badge.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import RenderNode from '@master/internal-site/components/RenderNode.astro'
 import type { BenchmarkTone } from '@master/internal-site/benchmarks/types.ts'
-import { benchmarkStatusTones } from '@master/internal-site/benchmarks/utils.ts'
 
 interface Props {
   value?: unknown
@@ -17,7 +16,7 @@ const { value, label, tone = 'neutral', class: className } = Astro.props
 const { t } = siteOf(Astro)
 ---
 
-<span class={className ? `ui-badge ${className}` : 'ui-badge'} data-tone={benchmarkStatusTones[tone]}>
+<span class:list={['badge', className, { 'badge-success': tone === 'good', 'badge-warning': tone === 'warn', 'badge-danger': tone === 'bad' }]}>
   <strong>{Astro.slots.has('default') ? <slot /> : <RenderNode node={value} />}</strong>
   {label && <span>{typeof label === 'string' ? t(label) : <RenderNode node={label} />}</span>}
 </span>

package/src/benchmarks/BenchmarkFigure.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/tray.css'
+import '@master/internal-site/styles/system/tray.ts'
 import '@master/internal-site/styles/system/tray-code.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import RenderNode from '@master/internal-site/components/RenderNode.astro'

package/src/benchmarks/BenchmarkMetricTable.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/table.css'
+import '@master/internal-site/styles/system/table.ts'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import BenchmarkStatus from '@master/internal-site/benchmarks/BenchmarkStatus.astro'
 import type { BenchmarkMetric } from '@master/internal-site/benchmarks/types.ts'
@@ -16,21 +16,21 @@ const hasDetails = metrics.some((metric) => metric.detail)
 ---
 
 {/* Preserve keyboard access to wide metric tables. */}
-<div class="ui-table" role="region" aria-label={t(label)} tabindex="0">
-  <table>
+<div class="ui-table sheet sheet-flat" role="region" aria-label={t(label)} tabindex="0">
+  <table class="table">
     <thead>
-      <tr>
-        <th scope="col">{t('Metric')}</th>
-        <th scope="col">{t('Value')}</th>
-        {hasDetails && <th scope="col">{t('Detail')}</th>}
+      <tr class="table-row">
+        <th class="table-heading" scope="col">{t('Metric')}</th>
+        <th class="table-heading" scope="col">{t('Value')}</th>
+        {hasDetails && <th class="table-heading" scope="col">{t('Detail')}</th>}
       </tr>
     </thead>
     <tbody>
       {metrics.map((metric) => (
-        <tr>
-          <th scope="row">{t(metric.label)}</th>
+        <tr class="table-row">
+          <th class="table-heading" scope="row">{t(metric.label)}</th>
           <td class="benchmark-value">{metric.value} <BenchmarkStatus tone={metric.tone} /></td>
-          {hasDetails && <td>{metric.detail && t(metric.detail)}</td>}
+          {hasDetails && <td class="table-cell">{metric.detail && t(metric.detail)}</td>}
         </tr>
       ))}
     </tbody>

package/src/benchmarks/BenchmarkScrollRegion.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import '@master/internal-site/styles/system/table.css'
+  import '@master/internal-site/styles/system/table.ts'
 
   import type { Snippet } from 'svelte'
 
@@ -22,7 +22,7 @@
 
 <!-- Scroll regions need a tab stop; arrow keys operate this region without intercepting children. -->
 <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
-<div class="ui-table" data-density="compact" role="region" aria-label={title} aria-describedby={descriptionId} tabindex="0" onkeydown={scrollWithKeyboard}>
+<div class="ui-table sheet sheet-flat" data-density="compact" role="region" aria-label={title} aria-describedby={descriptionId} tabindex="0" onkeydown={scrollWithKeyboard}>
   <span class="sr-only" id={descriptionId}>Use arrow keys to scroll the table.</span>
   {@render children?.()}
 </div>

package/src/benchmarks/BenchmarkStatus.astro

@@ -1,9 +1,8 @@
 ---
 import { siteOf } from '@master/internal-site/astro/site-context'
 const { t } = siteOf(Astro)
-import '@master/internal-site/styles/system/specimens.css'
+import '@master/ui/components/badge.css'
 import type { BenchmarkTone } from '@master/internal-site/benchmarks/types.ts'
-import { benchmarkStatusTones } from '@master/internal-site/benchmarks/utils.ts'
 
 interface Props {
   tone?: BenchmarkTone
@@ -15,4 +14,4 @@ const names: Record<Exclude<BenchmarkTone, 'neutral'>, string> = { good: 'Good',
 const { tone } = Astro.props
 ---
 
-{tone && tone !== 'neutral' && <span class="ui-badge" data-tone={benchmarkStatusTones[tone]} data-variant="dot" data-size="sm">{t(names[tone])}</span>}
+{tone && tone !== 'neutral' && <span class:list={['badge badge-dot badge-sm', { 'badge-success': tone === 'good', 'badge-warning': tone === 'warn', 'badge-danger': tone === 'bad' }]}>{t(names[tone])}</span>}

package/src/benchmarks/utils.ts

@@ -1,4 +1,4 @@
-import type { BenchmarkColor, BenchmarkTone } from '@master/internal-site/benchmarks/types.ts'
+import type { BenchmarkColor } from '@master/internal-site/benchmarks/types.ts'
 
 /** Series take the teaching hues that never read as a status first: blue, violet, then neutral. */
 export const benchmarkColors: BenchmarkColor[] = ['blue', 'violet', 'neutral', 'yellow', 'green']
@@ -18,14 +18,6 @@ export function benchmarkTone(color: BenchmarkColor) {
   return benchmarkTones[color]
 }
 
-/** Status of a measured value, never a series color. */
-export const benchmarkStatusTones: Record<BenchmarkTone, 'neutral' | 'green' | 'amber' | 'red'> = {
-  neutral: 'neutral',
-  good: 'green',
-  warn: 'amber',
-  bad: 'red'
-}
-
 export function clampPercent(value: number, max: number) {
   if (!Number.isFinite(value) || !Number.isFinite(max) || max <= 0) return 0
   return Math.max(0, Math.min(100, value / max * 100))

package/src/css/NamespaceUtilityTable.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/table.css'
+import '@master/internal-site/styles/system/table.ts'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import { uniqueId } from '@master/internal-site/utils/unique-id'
 import InlineCode from '@master/internal-site/components/InlineCode.astro'
@@ -25,23 +25,23 @@ const hasDescriptions = groups.some((group) => group.description)
 ---
 
 {/* The table's narrow overflow region must be focusable for native keyboard scrolling. */}
-<div class="ui-table" role="region" aria-labelledby={captionId} tabindex="0">
-  <table>
+<div class="ui-table sheet sheet-flat" role="region" aria-labelledby={captionId} tabindex="0">
+  <table class="table">
     <caption id={captionId} class="sr-only">{t('Utility groups table')}</caption>
     <thead>
-      <tr>
-        <th scope="col">{t('Group')}</th>
-        <th scope="col">{t('Utility keys')}</th>
-        {hasDescriptions && <th scope="col">{t('Description')}</th>}
+      <tr class="table-row">
+        <th class="table-heading" scope="col">{t('Group')}</th>
+        <th class="table-heading" scope="col">{t('Utility keys')}</th>
+        {hasDescriptions && <th class="table-heading" scope="col">{t('Description')}</th>}
       </tr>
     </thead>
     <tbody>
       {
         groups.map((group) => (
-          <tr>
-            <th scope="row">{t(group.label)}</th>
-            <td>{group.keys.map((key, index) => <span><InlineCode code={key} />{index !== group.keys.length - 1 && ', '}</span>)}</td>
-            {hasDescriptions && <td>{typeof group.description === 'string' ? t(group.description) : <RenderNode node={group.description} />}</td>}
+          <tr class="table-row">
+            <th class="table-heading" scope="row">{t(group.label)}</th>
+            <td class="table-cell">{group.keys.map((key, index) => <span><InlineCode code={key} />{index !== group.keys.length - 1 && ', '}</span>)}</td>
+            {hasDescriptions && <td class="table-cell">{typeof group.description === 'string' ? t(group.description) : <RenderNode node={group.description} />}</td>}
           </tr>
         ))
       }

package/src/css/ThemeNumberVariableTable.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/table.css'
+import '@master/internal-site/styles/system/table.ts'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import { uniqueId } from '@master/internal-site/utils/unique-id'
 import InlineCode from '@master/internal-site/components/InlineCode.astro'
@@ -27,28 +27,28 @@ const referenceUnit = entries.every(({ unit }) => unit === 'rem') ? 'px' : 'rem'
 ---
 
 {/* Numeric tables scroll within the document column and need native keyboard access. */}
-<div class="ui-table" role="region" aria-labelledby={captionId} tabindex="0">
-  <table>
+<div class="ui-table sheet sheet-flat" role="region" aria-labelledby={captionId} tabindex="0">
+  <table class="table">
     <caption id={captionId} class="sr-only">{t(namespace === 'breakpoint' ? 'Viewport breakpoints' : 'Numeric theme variables')}</caption>
     <thead>
-      <tr>
-        <th scope="col">{t(namespace === 'breakpoint' ? 'Query' : 'Token')}</th>
-        <th scope="col">{t(namespace === 'breakpoint' ? 'Minimum width' : 'Value')}</th>
-        {referenceUnits && <th scope="col" data-align="end">{referenceUnit}</th>}
-        {hasSpacingRepresentation && <th scope="col">{t('Representation')}</th>}
+      <tr class="table-row">
+        <th class="table-heading" scope="col">{t(namespace === 'breakpoint' ? 'Query' : 'Token')}</th>
+        <th class="table-heading" scope="col">{t(namespace === 'breakpoint' ? 'Minimum width' : 'Value')}</th>
+        {referenceUnits && <th class="table-heading" scope="col" data-align="end">{referenceUnit}</th>}
+        {hasSpacingRepresentation && <th class="table-heading" scope="col">{t('Representation')}</th>}
         {hasDescriptions && <th scope="col" class="(min-width:12rem)">{t('Description')}</th>}
       </tr>
     </thead>
     <tbody>
       {
         entries.map((entry) => (
-          <tr>
-            <th scope="row"><InlineCode code={namespace === 'breakpoint' ? `@${entry.key}` : `--${variablePrefix}-${entry.key}`} /></th>
-            <td><InlineCode code={entry.value} /></td>
-            {referenceUnits && <td data-align="end">{referenceUnit === 'px' ? formatPx(entry.px) : formatRem(entry.rem)}</td>}
+          <tr class="table-row">
+            <th class="table-heading" scope="row"><InlineCode code={namespace === 'breakpoint' ? `@${entry.key}` : `--${variablePrefix}-${entry.key}`} /></th>
+            <td class="table-cell"><InlineCode code={entry.value} /></td>
+            {referenceUnits && <td class="table-cell" data-align="end">{referenceUnit === 'px' ? formatPx(entry.px) : formatRem(entry.rem)}</td>}
             {/* The hatched width is the measured space itself. */}
-            {hasSpacingRepresentation && <td><span aria-hidden="true" class="ui-preview" style={{ width: entry.value, background: 'var(--ui-hatch)' }} /></td>}
-            {hasDescriptions && <td>{t(descriptions?.[entry.key])}</td>}
+            {hasSpacingRepresentation && <td class="table-cell"><span aria-hidden="true" class="ui-preview" style={{ width: entry.value, background: 'var(--ui-hatch)' }} /></td>}
+            {hasDescriptions && <td class="table-cell">{t(descriptions?.[entry.key])}</td>}
           </tr>
         ))
       }

package/src/demo/Demo.svelte

@@ -31,7 +31,7 @@
 
 <script lang="ts">
   import '@master/internal-site/styles/system/stage.css'
-  import '@master/internal-site/styles/system/tray.css'
+  import '@master/internal-site/styles/system/tray.ts'
   import '@master/internal-site/styles/system/tray-code.css'
 
   import '@master/internal-site/styles/demo.css'
@@ -49,7 +49,7 @@
 
 {#snippet node(value: DemoNode, translate = false)}{#if typeof value === 'function'}{@render value()}{:else}{translate ? t(value) : value}{/if}{/snippet}
 
-<figure {...props} class={['ui-tray', frameClassName]}>{#if head}<figcaption class="ui-tray-head">
+<figure {...props} class={['tray ui-tray', frameClassName]}>{#if head}<figcaption class="ui-tray-head">
     {#if title || description}<div>
       {#if title}<p class="ui-tray-title">{t(title)}</p>{/if}
       {#if description}<p class="ui-tray-description">{@render node(description, true)}</p>{/if}

package/src/demo/DemoAsset.astro

@@ -1,6 +1,6 @@
 ---
 import '@master/internal-site/styles/interface.css'
-import '@master/internal-site/styles/system/specimens.css'
+import '@master/ui/components/badge.css'
 import IconDownload from '@tabler/icons-svelte-runes/icons/download'
 import Demo from './Demo.svelte'
 import Image from '@master/internal-site/components/Image.svelte'
@@ -30,8 +30,8 @@ const { t } = siteOf(Astro)
 <Demo title={title} description={description} background={surface === 'transparent' ? 'checkerboard' : 'plain'} class={surface === 'transparent' ? undefined : surface} data-asset={surface}>
   <Fragment slot="caption">
     <span class="flex flex-wrap items-center justify-between gap-sm">
-      <span class="ui-badge" data-size="sm">{format}</span>
-      <a href={src} download class="ui-button" data-size="sm" aria-label={t('Download {title} ({format})').replace('{title}', t(title)).replace('{format}', format)}>
+      <span class="badge badge-sm">{format}</span>
+      <a href={src} download class="btn btn-sm" data-size="sm" aria-label={t('Download {title} ({format})').replace('{title}', t(title)).replace('{format}', format)}>
         <IconDownload aria-hidden="true" />
         {t('Download {format}').replace('{format}', format)}
       </a>

package/src/demo/DemoBadge.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import '@master/internal-site/styles/system/specimens.css'
+  import '@master/internal-site/styles/system/badge.ts'
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
   import { styleText, type DemoStyle } from '@master/internal-site/demo/style.ts'
-  import { tone, type DemoTone } from '@master/internal-site/demo/tone.ts'
+  import type { DemoTone } from '@master/internal-site/demo/tone.ts'
 
   /** An inline category or state; keep it outside measured layouts. */
   let { tone: value = 'neutral', size = 'md', variant = 'soft', class: className, style, children, ...props }: Omit<HTMLAttributes<HTMLSpanElement>, 'style'> & {
@@ -15,4 +15,4 @@
   } = $props()
 </script>
 
-<span {...props} data-tone={tone(value)} data-size={size === 'md' ? undefined : size} data-variant={variant === 'soft' ? undefined : variant} class={['ui-badge', className]} style={styleText(style)}>{@render children?.()}</span>
+<span {...props} class={['badge', className, { 'badge-sm': size === 'sm', 'badge-dot': variant === 'dot', 'badge-info': value === 'blue' || value === 'violet', 'badge-success': value === 'green', 'badge-warning': value === 'amber', 'badge-danger': value === 'red', 'demo-badge-violet': value === 'violet' }]} style={styleText(style)}>{@render children?.()}</span>

package/src/demo/DemoContainer.svelte

@@ -41,10 +41,10 @@
 
 {#snippet controls()}
   <label class="ui-label" data-case="as-is" for={id}>{t('Container')}</label>
-  <input {id} class="ui-range" type="range" min={minimumWidth} max={maxWidth} step="1" disabled={!ready} {value}
+  <input {id} class="slider" type="range" min={minimumWidth} max={maxWidth} step="1" disabled={!ready} {value}
     style:--value={`${((value - minimumWidth) / range) * 100}%`} style:width="128px" style:max-width="100%"
     oninput={event => { width = Number(event.currentTarget.value) }} />
-  <button type="button" class="ui-button" data-size="sm" disabled={!ready} onclick={() => { width = undefined }}>{t('Fit')}</button>
+  <button type="button" class="btn btn-sm" data-size="sm" disabled={!ready} onclick={() => { width = undefined }}>{t('Fit')}</button>
   <output class="ui-label" data-case="as-is">{ready ? t('{width} px · viewport unchanged').replace('{width}', String(measured)) : t('Measuring container…')}</output>
 {/snippet}
 

package/src/demo/DemoControls.svelte

@@ -17,4 +17,4 @@
   } = $props()
 </script>
 
-<div {...props} role="group" aria-label={t(label)} class={[variant === 'segmented' ? 'ui-segmented' : 'flex flex-wrap items-center gap-xs', className]} style={styleText(style)}>{@render children?.()}</div>
+<div {...props} role="group" aria-label={t(label)} class={[variant === 'segmented' ? 'segmented' : 'flex flex-wrap items-center gap-xs', className]} style={styleText(style)}>{@render children?.()}</div>

package/src/demo/DemoCopyButton.svelte

@@ -42,7 +42,7 @@
 </script>
 
 {#snippet button()}
-  <button data-size={className ? undefined : 'sm'} {...props} type="button" aria-label={t(label)} class={className ?? 'ui-button'} style={styleText(style)} aria-busy={busy} onclick={copy}>
+  <button data-size={className ? undefined : 'sm'} {...props} type="button" aria-label={t(label)} class={className ?? 'btn btn-sm'} style={styleText(style)} aria-busy={busy} onclick={copy}>
     {#if icon === undefined}<IconCopy aria-hidden="true" />{:else if icon}{@render icon()}{/if}{@render children?.()}
   </button>
 {/snippet}

package/src/demo/DemoFeatureSupport.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import '@master/internal-site/styles/system/inline-code.css'
 
-  import '@master/internal-site/styles/system/specimens.css'
+  import '@master/ui/components/badge.css'
   import { getSite } from '@master/internal-site/site'
   const { t } = getSite()
   import { onMount } from 'svelte'
@@ -16,7 +16,6 @@
 
 <p class="flex flex-wrap items-center gap-xs m(0)" data-supported={supported ?? 'unknown'}>
   <code class="ui-inline-code">{condition}</code>
-  <span class="ui-badge" data-variant="dot" data-tone={supported ? 'green' : undefined}>
-    {supported === null ? t('Checking…') : supported ? t('Supported') : t('Not supported')}
-  </span>
+  <span hidden={supported !== true}><span class="badge badge-dot badge-success">{t('Supported')}</span></span>
+  <span hidden={supported === true}><span class="badge badge-dot">{supported === null ? t('Checking…') : t('Not supported')}</span></span>
 </p>

package/src/demo/DemoIndex.astro

@@ -21,6 +21,6 @@ const { label, groups } = Astro.props
 <nav class="grid gap-md" aria-label={t(label)}>
   {groups.map(group => <div class="grid gap-xs">
     <p class="m(0) ui-label">{t(group.title)}</p>
-    <ul class="flex flex-wrap gap-2xs m(0) p(0) (list-style:none)">{group.links.map(link => <li><a class="ui-button" data-size="sm" href={link.href}>{t(link.label)}</a></li>)}</ul>
+    <ul class="flex flex-wrap gap-2xs m(0) p(0) (list-style:none)">{group.links.map(link => <li><a class="btn btn-sm" data-size="sm" href={link.href}>{t(link.label)}</a></li>)}</ul>
   </div>)}
 </nav>

package/src/demo/DemoMotion.svelte

@@ -35,10 +35,10 @@
 <div class="grid gap-md w-full">
   <div bind:this={element} data-playback={playing ? 'playing' : 'paused'}>{@render children?.()}</div>
   <div class="ui-player" role="group" aria-label={t('Animation controls')} data-state={playing ? 'playing' : 'paused'}>
-    <button type="button" class="ui-button" data-size="sm" onclick={() => control(playing ? 'pause' : 'play')}>
+    <button type="button" class="btn btn-sm" data-size="sm" onclick={() => control(playing ? 'pause' : 'play')}>
       {#if playing}<IconPlayerPause aria-hidden="true" />{:else}<IconPlayerPlay aria-hidden="true" />{/if}{playing ? t('Pause') : t('Play')}
     </button>
-    <button type="button" class="ui-button" data-size="sm" data-variant="quiet" onclick={() => control('restart')}><IconRefresh aria-hidden="true" />{t('Replay')}</button>
+    <button type="button" class="btn btn-sm btn-quiet" data-size="sm" data-variant="quiet" onclick={() => control('restart')}><IconRefresh aria-hidden="true" />{t('Replay')}</button>
     <span class="ui-player-time"><output>{playing ? 'Playing' : 'Paused'}</output></span>
   </div>
 </div>

package/src/demo/DemoSurface.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import '@master/internal-site/styles/system/sheet.css'
+  import '@master/internal-site/styles/system/sheet.ts'
 
   import '@master/internal-site/styles/system/specimens.css'
   import type { Snippet } from 'svelte'
@@ -14,4 +14,4 @@
   } = $props()
 </script>
 
-<div {...props} data-elevation={elevation === 'flat' ? 'flat' : '1'} class={['ui-sheet', className]} style={styleText(style)}>{@render children?.()}</div>
+<div {...props} data-elevation={elevation === 'flat' ? 'flat' : '1'} class={['sheet ui-sheet', elevation === 'flat' ? 'sheet-flat' : 'sheet-raised', className]} style={styleText(style)}>{@render children?.()}</div>

package/src/demo/DemoTokenTable.astro

@@ -1,7 +1,7 @@
 ---
 import { siteOf } from '@master/internal-site/astro/site-context.ts'
 const { t } = siteOf(Astro)
-import '@master/internal-site/styles/system/table.css'
+import '@master/internal-site/styles/system/table.ts'
 import InlineCode from '@master/internal-site/components/InlineCode.astro'
 import RenderNode from '@master/internal-site/components/RenderNode.astro'
 
@@ -24,13 +24,13 @@ const { rows, descriptionTitle = 'Role' } = Astro.props
 ---
 
 {/* Narrow token inventories need native keyboard scrolling. */}
-<div class="ui-table" role="region" aria-label={t('{label} token table').replace('{label}', t(descriptionTitle))} tabindex="0"><table>
-  <thead><tr><th scope="col">{t('Token / class')}</th><th scope="col" class="(min-width:12rem)">{t(descriptionTitle)}</th></tr></thead>
-  <tbody>{rows.map(({ token, utilities, value, description, preview }) => <tr>
-    <td>
+<div class="ui-table sheet sheet-flat" role="region" aria-label={t('{label} token table').replace('{label}', t(descriptionTitle))} tabindex="0"><table class="table">
+  <thead><tr class="table-row"><th class="table-heading" scope="col">{t('Token / class')}</th><th scope="col" class="(min-width:12rem)">{t(descriptionTitle)}</th></tr></thead>
+  <tbody>{rows.map(({ token, utilities, value, description, preview }) => <tr class="table-row">
+    <td class="table-cell">
       <div class="whitespace-nowrap">{preview != null && <RenderNode node={preview} />}<code>{token}</code></div>
       {utilities.length > 0 && <div class="flex flex-wrap gap-xs mt-xs">{utilities.map(utility => <InlineCode class="whitespace-nowrap" code={utility} />)}</div>}
     </td>
-    <td>{value && <div class="mb-xs"><code>{value}</code></div>}<RenderNode node={description} /></td>
+    <td class="table-cell">{value && <div class="mb-xs"><code>{value}</code></div>}<RenderNode node={description} /></td>
   </tr>)}</tbody>
 </table></div>

package/src/demo/DemoViewport.svelte

@@ -290,9 +290,9 @@
 </script>
 
 <!-- The controls belong to the example, not to the document it shows: they sit on the tray between the stage and the source. -->
-<div class="ui-browser" data-variant={chrome ? undefined : 'plain'} data-ready={ready}>
-  {#if chrome}<div class="ui-browser-bar" aria-hidden="true"><span class="ui-browser-dots"><i></i><i></i><i></i></span></div>{/if}
-  <div bind:this={body} class="ui-browser-body">
+<div class="window window-flat ui-browser" data-variant={chrome ? undefined : 'plain'} data-ready={ready}>
+  {#if chrome}<div class="window-bar ui-browser-bar" aria-hidden="true"><span class="window-controls" /></div>{/if}
+  <div bind:this={body} class="window-body ui-browser-body">
     <div class="ui-browser-viewport" style:width={width ? `${width}px` : `min(100%, ${maxWidth}px)`}>
       <iframe bind:this={frame} title={t(title)} srcdoc={source} {src} loading="lazy" data-ready={ready} data-sizing={sizing}
         style:height={`${sizing === 'content' ? contentHeight ?? height : height}px`} onload={load}></iframe>
@@ -303,29 +303,29 @@
 {#if responsive || motion || print || theme || Boolean(inspect?.length)}
   <div class="ui-browser-tools" role="group" aria-label={t('{label} controls').replace('{label}', t(title))}>
     {#if responsive}
-      {#if widthPresets?.length}<div class="ui-segmented" role="group" aria-label={t('{label} presets').replace('{label}', t(rangeLabel))}>
-        {#each widthPresets as preset (preset.label)}<button type="button" disabled={!ready}
+      {#if widthPresets?.length}<div class="segmented" role="group" aria-label={t('{label} presets').replace('{label}', t(rangeLabel))}>
+        {#each widthPresets as preset (preset.label)}<button class="segmented-item" type="button" disabled={!ready}
           aria-pressed={width === preset.width} onclick={() => { width = preset.width }}>{t(preset.label)}</button>{/each}
       </div>{/if}
       <span class="ui-browser-range">
         <label class="ui-label" data-case="as-is" for={widthId}>{t(rangeLabel)}</label>
-        <input id={widthId} class="ui-range" disabled={!ready} type="range" min={range.min} max={range.max} step="1" value={range.value}
+        <input id={widthId} class="slider" disabled={!ready} type="range" min={range.min} max={range.max} step="1" value={range.value}
           style:--value={`${((range.value - range.min) / Math.max(1, range.max - range.min)) * 100}%`}
           oninput={event => { width = Number(event.currentTarget.value) }} />
         {#if ready}<output class="ui-browser-size" for={widthId}>{fitWidth} px</output>{/if}
       </span>
-      <button type="button" disabled={!ready} class="ui-button" data-size="sm" onclick={() => { width = undefined }}>{t('Fit')}</button>
+      <button type="button" disabled={!ready} class="btn btn-sm" data-size="sm" onclick={() => { width = undefined }}>{t('Fit')}</button>
     {/if}
-    {#if theme}<button type="button" disabled={!ready} class="ui-button" data-size="sm" aria-pressed={isDark} title={t('Toggle dark theme')} onclick={() => { dark = !isDark }}>
+    {#if theme}<button type="button" disabled={!ready} class="btn btn-sm" data-size="sm" aria-pressed={isDark} title={t('Toggle dark theme')} onclick={() => { dark = !isDark }}>
       {#if isDark}<IconMoon aria-hidden="true" />{:else}<IconSun aria-hidden="true" />{/if}{t('Theme')}
     </button>{/if}
     {#if motion}
-      <button type="button" disabled={!ready} class="ui-button" data-size="sm" onclick={() => animate(playing ? 'pause' : 'play')}>
+      <button type="button" disabled={!ready} class="btn btn-sm" data-size="sm" onclick={() => animate(playing ? 'pause' : 'play')}>
         {#if playing}<IconPlayerPause aria-hidden="true" />{:else}<IconPlayerPlay aria-hidden="true" />{/if}{playing ? t('Pause') : t('Play')}
       </button>
-      <button type="button" disabled={!ready} class="ui-button" data-size="sm" data-variant="quiet" onclick={() => animate('restart')}><IconRefresh aria-hidden="true" />{t('Replay')}</button>
+      <button type="button" disabled={!ready} class="btn btn-sm btn-quiet" data-size="sm" data-variant="quiet" onclick={() => animate('restart')}><IconRefresh aria-hidden="true" />{t('Replay')}</button>
     {/if}
-    {#if print}<button type="button" disabled={!ready} class="ui-button" data-size="sm" onclick={() => frame?.contentWindow?.print()}><IconPrinter aria-hidden="true" />{t('Print preview')}</button>{/if}
+    {#if print}<button type="button" disabled={!ready} class="btn btn-sm" data-size="sm" onclick={() => frame?.contentWindow?.print()}><IconPrinter aria-hidden="true" />{t('Print preview')}</button>{/if}
     {#if properties}<output aria-live="polite">{properties}</output>{/if}
   </div>
 {/if}

package/src/demo/foundations/FoundationDialog.astro

@@ -15,4 +15,4 @@ const { title = dialogCopy.title, caption = dialogCopy.caption } = Astro.props
     from { translate: 0 0.5rem; opacity: 0; }
     to { translate: 0; opacity: 1; }
   }
-`, html: "<article class=\"p-md r-sm b(1) b-solid b-line-divider bg-surface-raised\"><h2 class=\"m(0) text-lg font-regular\">Collection settings</h2><p class=\"mt-xs mb-md fg-text-muted\">Open a native dialog to preview its entrance.</p><button id=\"open\" type=\"button\" class=\"ui-button\">Open details</button></article>\n<dialog id=\"details\" aria-labelledby=\"dialog-title\" aria-describedby=\"dialog-description\" class=\"(width:calc(100%-32px)) max-w-xs m-auto p-md r-lg b(1) b-solid b-line-divider bg-surface-floating fg-text-body shadow-xl animate-dialog-in@media(screen)@motion-safe\">\n<h2 id=\"dialog-title\" class=\"m(0) text-lg font-regular fg-text-strong\">Collection details</h2><p id=\"dialog-description\" class=\"mt-sm mb-md\">This dialog has a finite entrance. Closing it is immediate.</p><form method=\"dialog\"><button class=\"ui-button\" autofocus>Close details</button></form>\n</dialog><script>const dialog = document.getElementById('details'); const openButton = document.getElementById('open'); openButton.addEventListener('click', () => dialog.showModal()); dialog.addEventListener('close', () => openButton.focus());</script>", caption }} />
+`, html: "<article class=\"p-md r-sm b(1) b-solid b-line-divider bg-surface-raised\"><h2 class=\"m(0) text-lg font-regular\">Collection settings</h2><p class=\"mt-xs mb-md fg-text-muted\">Open a native dialog to preview its entrance.</p><button id=\"open\" type=\"button\" class=\"btn\">Open details</button></article>\n<dialog id=\"details\" aria-labelledby=\"dialog-title\" aria-describedby=\"dialog-description\" class=\"(width:calc(100%-32px)) max-w-xs m-auto p-md r-lg b(1) b-solid b-line-divider bg-surface-floating fg-text-body shadow-xl animate-dialog-in@media(screen)@motion-safe\">\n<h2 id=\"dialog-title\" class=\"m(0) text-lg font-regular fg-text-strong\">Collection details</h2><p id=\"dialog-description\" class=\"mt-sm mb-md\">This dialog has a finite entrance. Closing it is immediate.</p><form method=\"dialog\"><button class=\"btn\" autofocus>Close details</button></form>\n</dialog><script>const dialog = document.getElementById('details'); const openButton = document.getElementById('open'); openButton.addEventListener('click', () => dialog.showModal()); dialog.addEventListener('close', () => openButton.focus());</script>", caption }} />

package/src/demo/foundations/FoundationMedia.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/sheet.css'
+import '@master/internal-site/styles/system/sheet.ts'
 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'
@@ -16,7 +16,7 @@ const media: ComponentProps<typeof DemoMedia> = {
 
 <DemoContainer client:idle={{ timeout: 500 }} title="A component follows its container" data-foundation="media" caption="Below 28rem of container width, the media stacks. At 28rem it keeps a 9rem width beside flexible text.">
     <div class="container-inline">
-      <article class="flex flex-col items-start gap-md p-md flex-row@container(width>=28rem) ui-sheet" data-elevation="1">
+      <article class="flex flex-col items-start gap-md p-md flex-row@container(width>=28rem) sheet sheet-raised ui-sheet">
         <DemoMedia {...media} />
         <div class="(flex:1) min-w(0)">
           <DemoLabel>Collection / 024</DemoLabel>

package/src/demo/foundations/FoundationShrink.astro

@@ -1,11 +1,11 @@
 ---
-import '@master/internal-site/styles/system/sheet.css'
+import '@master/internal-site/styles/system/sheet.ts'
 import DemoContainer from '@master/internal-site/demo/DemoContainer.svelte'
 import DemoItem from '@master/internal-site/demo/DemoItem.svelte'
 ---
 
 <DemoContainer client:idle={{ timeout: 500 }} title="Keep long content within its cap" data-foundation="shrink" caption="The row stops at sm. The flexible text region can shrink below its content width.">
-    <article class="flex gap-md w-full max-w-sm mx-auto p-md ui-sheet" data-elevation="1">
+    <article class="flex gap-md w-full max-w-sm mx-auto p-md sheet sheet-raised ui-sheet">
       <DemoItem class="grid shrink(0) (place-content:center) (height:2.5rem) (width:2.5rem) text-sm font-mono">FN</DemoItem>
       <div class="(flex:1) min-w(0)">
         <div class="text-sm font-semibold">Project archive</div>