@master/internal-site 0.2.7 → 0.2.9

package/dist/astro.mjs

@@ -2370,7 +2370,8 @@ function remarkMarkdownComponents() {
 				const lang = rest.length && inlineLanguages.has(first) ? first : "";
 				parent.children[index] = element("mdxJsxTextElement", "InlineCode", {
 					lang,
-					code: lang ? rest.join(" ") : node.value
+					code: lang ? rest.join(" ") : node.value,
+					...parent.type === "heading" ? { plain: true } : {}
 				});
 				return SKIP;
 			}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@master/internal-site",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "type": "module",
   "description": "First-party Astro and Svelte website framework for Master sites.",
   "engines": {
@@ -316,7 +316,7 @@
     "@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"
+    "@master/ui": "^0.0.3"
   },
   "dependencies": {
     "@astrojs/svelte": "^9.1.2",

package/src/benchmarks/BenchmarkBars.astro

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/sheet.ts'
 import '@master/internal-site/styles/system/chart.css'
 import '@master/internal-site/styles/benchmarks.css'
 import BenchmarkBarRows from '@master/internal-site/benchmarks/BenchmarkBarRows.astro'
@@ -11,4 +12,4 @@ interface Props extends BenchmarkBarsProps {
 const { class: className, ...props } = Astro.props
 ---
 
-<div class={className ? `ui-chart ${className}` : 'ui-chart'}><BenchmarkBarRows {...props} /></div>
+<div class={className ? `sheet sheet-raised ui-chart ${className}` : 'sheet sheet-raised ui-chart'}><BenchmarkBarRows {...props} /></div>

package/src/benchmarks/BenchmarkChart.astro

@@ -46,7 +46,7 @@ const chart = localizeBenchmarkChart(Astro.props.chart, t)
         <tbody>
           {chart.rows.map(([rowHeader, ...cells]) => (
             <tr class="table-row">
-              <th class="table-heading">{rowHeader}</th>
+              <th class="table-cell table-primary" scope="row">{rowHeader}</th>
               {cells.map((cell) => <td class="table-cell">{cell}</td>)}
             </tr>
           ))}

package/src/benchmarks/BenchmarkChartGroup.astro

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/sheet.ts'
 import '@master/internal-site/styles/system/chart.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import BenchmarkBarRows from '@master/internal-site/benchmarks/BenchmarkBarRows.astro'
@@ -16,7 +17,7 @@ const { title, detail = 'Median', items, unit = 'ms' } = Astro.props
 const { t } = siteOf(Astro)
 ---
 
-<div class="ui-chart">
+<div class="sheet sheet-raised ui-chart">
   <div class="ui-chart-head">
     <div><b>{t(title)}</b><small>{t(detail)} · {unit}</small></div>
   </div>

package/src/benchmarks/BenchmarkDataTable.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/disclosure.css'
+import '@master/internal-site/styles/system/disclosure.ts'
 import '@master/internal-site/styles/benchmarks.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import BenchmarkScrollRegion from '@master/internal-site/benchmarks/BenchmarkScrollRegion.svelte'
@@ -13,8 +13,8 @@ const { title } = Astro.props
 const { t } = siteOf(Astro)
 ---
 
-<details class="ui-disclosure" data-variant="rule">
-  <summary>
+<details class="accordion-item ui-disclosure" data-variant="rule">
+  <summary class="accordion-trigger">
     {t(title)}
     <span class="ui-disclosure-meta">{t('Complete measurements')}</span>
   </summary>

package/src/benchmarks/BenchmarkFigure.astro

@@ -17,7 +17,7 @@ const { t } = siteOf(Astro)
 const text = (node: unknown) => typeof node === 'string' ? t(node) : node
 ---
 
-<figure class={className ? `ui-tray ${className}` : 'ui-tray'}>
+<figure class={className ? `tray ui-tray ${className}` : 'tray ui-tray'}>
   {(title || description) && (
     <div class="ui-tray-head">
       <div>

package/src/benchmarks/BenchmarkMetrics.astro

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/sheet.ts'
 import '@master/internal-site/styles/system/metrics.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import BenchmarkStatus from '@master/internal-site/benchmarks/BenchmarkStatus.astro'
@@ -14,7 +15,7 @@ const { t } = siteOf(Astro)
 
 <div class="ui-metrics">
   {metrics.map((metric) => (
-    <div class="ui-metric">
+    <div class="sheet sheet-raised ui-metric">
       <small>{t(metric.label)}</small>
       <b>{metric.value}</b>
       {(metric.detail || (metric.tone && metric.tone !== 'neutral')) && <p><BenchmarkStatus tone={metric.tone} /> {metric.detail && t(metric.detail)}</p>}

package/src/benchmarks/BenchmarkSampleSummary.astro

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/sheet.ts'
 import '@master/internal-site/styles/system/metrics.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import type { BenchmarkSampleSummaryStats } from '@master/internal-site/benchmarks/types.ts'
@@ -22,7 +23,7 @@ const entries = [
 
 <div class="ui-metrics">
   {entries.map(([label, value]) => (
-    <div class="ui-metric">
+    <div class="sheet sheet-raised ui-metric">
       <small>{t(label)}</small>
       <b>{value}</b>
     </div>

package/src/benchmarks/BenchmarkStackedBars.astro

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/sheet.ts'
 import '@master/internal-site/styles/system/chart.css'
 import '@master/internal-site/styles/system/metrics.css'
 import '@master/internal-site/styles/system/specimens.css'
@@ -18,7 +19,7 @@ const { t } = siteOf(Astro)
 const labelPrefix = uniqueId(Astro, 'benchmark-stacked-bars')
 ---
 
-<div class={className ? `ui-chart ${className}` : 'ui-chart'}>
+<div class={className ? `sheet sheet-raised ui-chart ${className}` : 'sheet sheet-raised ui-chart'}>
   {items.map((item, index) => {
     const labelId = `${labelPrefix}-label-${index}`
     const valueId = `${labelPrefix}-value-${index}`

package/src/demo/Demo.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <script lang="ts">
-  import '@master/internal-site/styles/system/stage.css'
+  import '@master/internal-site/styles/system/stage.ts'
   import '@master/internal-site/styles/system/tray.ts'
   import '@master/internal-site/styles/system/tray-code.css'
 
@@ -55,7 +55,7 @@
       {#if description}<p class="ui-tray-description">{@render node(description, true)}</p>{/if}
     </div>{/if}
     {#if controls}<div class="ui-tray-tools">{@render node(controls)}</div>{/if}
-  </figcaption>{/if}{#if frame === 'none'}{@render children?.()}{:else}<div class={['ui-stage', className]} style={styleText(style)}
+  </figcaption>{/if}{#if frame === 'none'}{@render children?.()}{:else}<div class={['sheet sheet-flat ui-stage', className]} style={styleText(style)}
     data-background={background === 'plain' ? undefined : background}
     data-padding={padding === 'lg' ? undefined : padding}
     data-align={align === 'center' ? undefined : align}>{@render children?.()}</div>{/if}{#if source}{@render node(source)}{/if}{#if caption}{#if head}<div class="ui-tray-caption">{@render node(caption, true)}</div>{:else}<figcaption class="ui-tray-caption">{@render node(caption, true)}</figcaption>{/if}{/if}</figure>

package/src/demo/DemoAsset.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/interface.css'
+import '@master/internal-site/styles/interface.ts'
 import '@master/ui/components/badge.css'
 import IconDownload from '@tabler/icons-svelte-runes/icons/download'
 import Demo from './Demo.svelte'

package/src/demo/DemoCatalog.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/disclosure.css'
+import '@master/internal-site/styles/system/disclosure.ts'
 import '@master/internal-site/styles/demo.css'
 import RenderNode from '@master/internal-site/components/RenderNode.astro'
 import DemoIndex from '@master/internal-site/demo/DemoIndex.astro'
@@ -28,8 +28,8 @@ const { groups } = Astro.props
   }]} />
   {groups.map(group => <section aria-labelledby={group.id}>
     <h3 id={group.id}>{t(group.title)}<small>{t('{count} recipes').replace('{count}', String(group.entries.length))}</small></h3>
-    {group.entries.map(entry => <details class="ui-disclosure" data-variant="rule">
-      <summary>{t(entry.title)}<span class="ui-disclosure-meta">{t(entry.label)}</span></summary>
+    {group.entries.map(entry => <details class="accordion-item ui-disclosure" data-variant="rule">
+      <summary class="accordion-trigger">{t(entry.title)}<span class="ui-disclosure-meta">{t(entry.label)}</span></summary>
       <div class="ui-catalog-entry">
         {entry.href && <a href={entry.href}>{t('Read related documentation')} ↗</a>}
         <RenderNode node={entry.children} />

package/src/demo/DemoComparison.svelte

@@ -11,7 +11,7 @@
 
 <script lang="ts">
   import '@master/internal-site/styles/system/compare.css'
-  import '@master/internal-site/styles/system/stage.css'
+  import '@master/internal-site/styles/system/stage.ts'
 
   import '@master/internal-site/styles/system/specimens.css'
   import type { HTMLAttributes } from 'svelte/elements'
@@ -34,6 +34,6 @@
 <div {...attributes} class={['ui-compare', className]} style={styleText(style)}>
   {#each items as item, index (item.key ?? index)}<figure>
     <figcaption>{@render node(item.label)}</figcaption>
-    <div class="ui-stage">{@render node(content(item))}</div>
+    <div class="sheet sheet-flat ui-stage">{@render node(content(item))}</div>
   </figure>{/each}
 </div>

package/src/demo/DemoContainer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getSite } from '@master/internal-site/site'
   const { t } = getSite()
-  import '@master/internal-site/styles/interface.css'
+  import '@master/internal-site/styles/interface.ts'
   import '@master/internal-site/styles/system/range.css'
 
   import '@master/internal-site/styles/system/specimens.css'

package/src/demo/DemoCopyButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getSite } from '@master/internal-site/site'
   const { t } = getSite()
-  import '@master/internal-site/styles/interface.css'
+  import '@master/internal-site/styles/interface.ts'
   import '@master/internal-site/styles/system/copy.css'
 
   import type { Snippet } from 'svelte'
@@ -43,7 +43,7 @@
 
 {#snippet button()}
   <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?.()}
+    {#if icon === undefined}<IconCopy class="icon" aria-hidden="true" />{:else if icon}{@render icon()}{/if}{@render children?.()}
   </button>
 {/snippet}
 

package/src/demo/DemoFeatureSupport.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import '@master/internal-site/styles/system/inline-code.css'
+  import '@master/internal-site/styles/system/inline-code.ts'
 
   import '@master/ui/components/badge.css'
   import { getSite } from '@master/internal-site/site'
@@ -15,7 +15,7 @@
 </script>
 
 <p class="flex flex-wrap items-center gap-xs m(0)" data-supported={supported ?? 'unknown'}>
-  <code class="ui-inline-code">{condition}</code>
+  <code class="code ui-inline-code">{condition}</code>
   <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/DemoGeneratedCSS.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import '@master/internal-site/styles/system/disclosure.css'
+  import '@master/internal-site/styles/system/disclosure.ts'
 
   import type { Snippet } from 'svelte'
   import { getSite } from '@master/internal-site/site'
@@ -9,4 +9,4 @@
   const { t } = getSite()
 </script>
 
-<details class="ui-disclosure"><summary>{t('Generated CSS')}</summary>{@render children?.()}</details>
+<details class="accordion-item ui-disclosure"><summary class="accordion-trigger">{t('Generated CSS')}</summary>{@render children?.()}</details>

package/src/demo/DemoIndex.astro

@@ -1,7 +1,7 @@
 ---
 import { siteOf } from '@master/internal-site/astro/site-context.ts'
 const { t } = siteOf(Astro)
-import '@master/internal-site/styles/interface.css'
+import '@master/internal-site/styles/interface.ts'
 import '@master/internal-site/styles/system/specimens.css'
 
 export interface DemoIndexGroup {

package/src/demo/DemoMotion.svelte

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

package/src/demo/DemoViewport.svelte

@@ -30,7 +30,7 @@
 <script lang="ts">
   import { getSite } from '@master/internal-site/site'
   const { t } = getSite()
-  import '@master/internal-site/styles/interface.css'
+  import '@master/internal-site/styles/interface.ts'
   import '@master/internal-site/styles/system/browser.css'
   import '@master/internal-site/styles/system/range.css'
   import '@master/internal-site/styles/system/segmented.css'
@@ -317,15 +317,15 @@
       <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="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')}
+      {#if isDark}<IconMoon class="icon" aria-hidden="true" />{:else}<IconSun class="icon" aria-hidden="true" />{/if}{t('Theme')}
     </button>{/if}
     {#if motion}
       <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')}
+        {#if playing}<IconPlayerPause class="icon" aria-hidden="true" />{:else}<IconPlayerPlay class="icon" aria-hidden="true" />{/if}{playing ? t('Pause') : t('Play')}
       </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>
+      <button type="button" disabled={!ready} class="btn btn-sm btn-quiet" data-size="sm" data-variant="quiet" onclick={() => animate('restart')}><IconRefresh class="icon" aria-hidden="true" />{t('Replay')}</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 print}<button type="button" disabled={!ready} class="btn btn-sm" data-size="sm" onclick={() => frame?.contentWindow?.print()}><IconPrinter class="icon" aria-hidden="true" />{t('Print preview')}</button>{/if}
     {#if properties}<output aria-live="polite">{properties}</output>{/if}
   </div>
 {/if}

package/src/demo/DemoWaterfall.astro

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/sheet.ts'
 import { siteOf } from '@master/internal-site/astro/site-context'
 const { t } = siteOf(Astro)
 import '@master/internal-site/styles/system/waterfall.css'
@@ -16,7 +17,7 @@ for (const { label, start, end } of rows) {
 ---
 
 <Demo title={title} description={description} caption={caption} padding="sm" aria-label={title}>
-  <div class="w-full ui-waterfall">
+  <div class="sheet sheet-raised w-full ui-waterfall">
     <div class="ui-waterfall-axis" aria-hidden="true"><span /><div class="relative"><span>{t("Earlier")}</span>{marker && <span class="absolute font-medium fg-text-strong (translate:-50%)" style={{ left: `${marker.position}%` }}>{marker.label}</span>}<span>{t("Later")}</span></div></div>
     {/* Preserve WebKit list semantics without list markers. */}
     <ul role="list" class="grid gap-2xs m(0) p(0) (list-style:none)">

package/src/demo/foundations/FoundationDialog.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/interface.css'
+import '@master/internal-site/styles/interface.ts'
 import FoundationSpecimen from '@master/internal-site/demo/foundations/FoundationSpecimen.astro'
 import { dialogCopy } from './dialog-copy.js'
 interface Props { title?: string; caption?: string }

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/callout.css'
+import '@master/internal-site/styles/system/callout.ts'
 import '@master/internal-site/styles/system/pagehead.css'
 import '../../styles/docs-shell/docs.css'
 import IconAlertTriangle from '@tabler/icons-svelte-runes/icons/alert-triangle'
@@ -62,6 +62,6 @@ const kickers = [
   {subtitle && <p lang={languageOf(subtitle)}>{$(subtitle)}</p>}
   {metadata.package && <PackageBadges {...metadata.package} translate={$} />}
   {(metadata.unfinished || metadata.disabled) &&
-    <div class="ui-callout" data-tone="warning" role="note"><IconAlertTriangle aria-hidden="true" /><div>{$('This page is still under construction and some content may not be complete.')}</div></div>}
+    <div class="alert alert-warning ui-callout" data-tone="warning" role="note"><IconAlertTriangle class="icon alert-icon" aria-hidden="true" /><div class="alert-body">{$('This page is still under construction and some content may not be complete.')}</div></div>}
 </div>
 {!!toc?.length && <PageContentDisclosure items={toc.map((item: any) => ({ ...item, title: $(item.title), lang: languageOf(item.title) }))} label={$('On this page')} />}

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/callout.css'
+import '@master/internal-site/styles/system/callout.ts'
 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'
@@ -19,9 +19,10 @@ interface Props {
 /** A `ui-callout`: one icon and one status tint around a short note. Markdown writes it as `(i)`, `(!)`, `(o)` or `(x)`. */
 const { tone } = Astro.props
 const Icon = icons[tone]
+const status = { info: 'info', warning: 'warning', do: 'success', dont: 'danger' }[tone]
 ---
 
-<div class="ui-callout" data-tone={tone} role="note">
-  <Icon aria-hidden="true" stroke={1.5} />
-  <div><p><slot /></p></div>
+<div class:list={['alert', `alert-${status}`, 'ui-callout']} data-tone={tone} role="note">
+  <Icon class="icon alert-icon" aria-hidden="true" stroke={1.5} />
+  <div class="alert-body"><p><slot /></p></div>
 </div>

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/interface.css'
+import '@master/internal-site/styles/interface.ts'
 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'
@@ -23,7 +23,7 @@ const label = name ? t('Copy {name}').replace('{name}', t(name)) : t('Copy code'
 <span class:list={['ui-copy', className]}>
   <span class="ui-copy-status" role="status"></span>
   <button type="button" class="btn btn-sm btn-quiet btn-square" data-variant="quiet" data-shape="icon" data-size="sm" aria-label={label} title={label} data-code-copy={name ?? ''} data-code-copy-text={text}>
-    <IconCopy size={16} stroke={1.5} aria-hidden="true" />
-    <IconCheck size={16} stroke={1.6} aria-hidden="true" class="ui-result-icon" />
+    <IconCopy class="icon" size={16} stroke={1.5} aria-hidden="true" />
+    <IconCheck size={16} stroke={1.6} aria-hidden="true" class="icon ui-result-icon" />
   </button>
 </span>

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

@@ -1,6 +1,5 @@
 ---
-import '@master/internal-site/styles/system/code-panel.css'
-import '@master/internal-site/styles/system/code-tabs.css'
+import '@master/internal-site/styles/system/code-panel.ts'
 import CodeCopyButton from './CodeCopyButton.astro'
 import { siteOf } from '../../astro/site-context'
 
@@ -17,18 +16,20 @@ interface Props {
   idPrefix?: string
 }
 
-/** The `ui-code-bar`: the file's name, or `ui-tabs` that switch panels, and the copy action. */
+/** CodeTabs owns the tab stylesheet; a file-only CodeView does not load tabs.
+ * The `ui-code-bar`: the file's name, or `ui-tabs` that switch panels, and the copy action. */
 const { tabs, currentName, class: className, copyable = true, idPrefix } = Astro.props
 const { t } = siteOf(Astro)
 ---
 
-<div class={className ? `ui-code-bar ${className}` : 'ui-code-bar'}>
+<div class={className ? `code-header ui-code-bar ${className}` : 'code-header ui-code-bar'}>
   {idPrefix
-    ? <div class="ui-tabs" role="tablist" aria-label={t('Code examples')}>
+    ? <div class="tabs tabs-sm ui-tabs" role="tablist" aria-label={t('Code examples')}>
       {tabs.map(({ name, lang }, index) => {
         const tabName = name ?? lang
         const active = currentName === tabName
         return <button
+          class="tabs-item"
           type="button"
           role="tab"
           id={`${idPrefix}-tab-${index}`}
@@ -39,6 +40,6 @@ const { t } = siteOf(Astro)
         >{t(tabName)}</button>
       })}
     </div>
-    : <span class="ui-code-file">{t(tabs[0]?.name)}</span>}
+    : <span class="code-title ui-code-file">{t(tabs[0]?.name)}</span>}
   {copyable && <CodeCopyButton name={currentName} />}
 </div>

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

@@ -1,6 +1,6 @@
 ---
-import '@master/internal-site/styles/system/code-tabs.css'
-import '../../styles/system/code-panel.css'
+import '@master/internal-site/styles/system/code-tabs.ts'
+import '../../styles/system/code-panel.ts'
 import { toHtml } from 'hast-util-to-html'
 import highlightCode from '../utils/highlight-code'
 import { uniqueId } from '../utils/unique-id'
@@ -30,7 +30,7 @@ const current = panels[0]
 ---
 
 <div
-  class:list={['ui-code', className]}
+  class:list={['code-panel ui-code', panels.some(tab => tab.number) && 'code-numbered', className]}
   data-code-tabs=""
   data-code-tabs-current-name={current.name}
   data-code-tabs-storage-key={localStorageKey}
@@ -47,7 +47,7 @@ const current = panels[0]
       hidden={index !== 0}
     >
       {/* Paper and pages without scripts show every panel under its name. */}
-      <span class="ui-code-file" aria-hidden="true">{tab.name}</span>
+      <span class="code-title ui-code-file" aria-hidden="true">{tab.name}</span>
       <Fragment set:html={tab.html} />
     </div>
   ))}

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

@@ -1,5 +1,5 @@
 ---
-import '../../styles/system/code-panel.css'
+import '../../styles/system/code-panel.ts'
 
 import type { HTMLAttributes } from 'astro/types'
 import type { CodeProp } from './code-props'
@@ -16,7 +16,7 @@ type Props = CodeProp & Omit<HTMLAttributes<'div'>, 'class'>
 const { lang, class: className, name, tabbarClassName, copyable = true, number, ext } = Astro.props
 ---
 
-<div class:list={['ui-code', className]} data-lang={lang} data-numbers={number ? '' : undefined}>
+<div class:list={['code-panel ui-code', number && 'code-numbered', className]} data-lang={lang} data-numbers={number ? '' : undefined}>
   {name && <CodeTabBar tabs={[{ name, lang, ext }]} currentName={name} class={tabbarClassName} copyable={copyable} />}
   {!name && copyable && <CodeCopyButton />}
   <slot />

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

@@ -10,8 +10,9 @@
 </script>
 
 <script lang="ts">
-  import '@master/internal-site/styles/interface.css'
+  import '@master/internal-site/styles/interface.ts'
   import '@master/internal-site/styles/system/header-core.css'
+  import '@master/ui/components/badge.css'
 
   // `.app-wrapper` sets the homepage sections' column gutters; the homepage loads it through this header.
   import '../../styles/docs-shell/wrapper.css'
@@ -57,13 +58,13 @@
   <nav class="ui-header-nav" aria-label={t('Main navigation')}>
     {#each app.navs as { Icon: _Icon, fullName: _fullName, ...eachLink } (eachLink.name)}<HeaderNav {...eachLink}>
       {t(eachLink.name)}
-      {#if eachLink.date && isDateWithinSevenDays(eachLink.date)}<small>{t('New')}</small>{/if}
+      {#if eachLink.date && isDateWithinSevenDays(eachLink.date)}<small class="badge">{t('New')}</small>{/if}
     </HeaderNav>{/each}
   </nav>
   <div class="ui-header-end" data-home-controls={app.header?.searchOnHome ? 'full' : undefined}>
     <!-- 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" />
+    <SearchButton class="btn btn-quiet ui-header-control ui-header-search" data-compact={home && !app.header?.searchOnHome ? '' : undefined}>
+      <IconSearch class="icon" size={18} stroke={1.5} aria-hidden="true" />
       <kbd class="kbd" aria-hidden="true">⌘K</kbd>
     </SearchButton>
     {#each headerCommunityNavs as { Icon, disabled, fullName, ...eachLink } (eachLink.name)}

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

@@ -9,7 +9,7 @@
 </script>
 
 <script lang="ts">
-  import '@master/internal-site/styles/interface.css'
+  import '@master/internal-site/styles/interface.ts'
   import '@master/internal-site/styles/system/header-core.css'
 
   import '../../styles/docs-shell/menu.css'
@@ -32,6 +32,7 @@
   /** Primary destinations, with community and preferences kept in a quiet footer. */
   let { class: className }: Props = $props()
   let opened = $state(false)
+  let mounted = $state(false)
   const id = $props.id()
   let dialog: HTMLDialogElement
   let trigger: HTMLButtonElement
@@ -96,6 +97,7 @@
   }
 
   onMount(() => {
+    mounted = true
     const wide = matchMedia('(width >= 64rem)')
     const motion = matchMedia('(prefers-reduced-motion: reduce)')
     const resize = () => { if (wide.matches && dialog.open) finishClose() }
@@ -114,7 +116,7 @@
   <IconMenu class="ui-menu-glyph" size={18} stroke={1.5} data-open={opened} aria-hidden="true" />
 {/snippet}
 
-<button bind:this={trigger} type="button" class={clsx('btn btn-quiet btn-square ui-menu-toggle', className)} data-variant="quiet" data-shape="icon"
+<button bind:this={trigger} type="button" disabled={!mounted} class={clsx('btn btn-quiet btn-square ui-menu-toggle', className)} data-variant="quiet" data-shape="icon"
   aria-label={t('Menu')} aria-expanded={opened} aria-haspopup="dialog" aria-controls={id} onclick={open}>
   {@render lines()}
 </button>

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/index.css'
+import '@master/internal-site/styles/system/index.ts'
 import Link from '@master/internal-site/components/Link.svelte'
 import DocumentIdentifier from '@master/internal-site/components/DocumentIdentifier.astro'
 import type { DocumentAPIEntry } from '@master/internal-site/components/document-types.ts'
@@ -17,8 +17,8 @@ const { label, entries, compact = false } = Astro.props
 ---
 
 <nav class="ui-index" data-density={compact ? 'compact' : undefined} aria-label={label}>
-  {entries.map(entry => <Link href={entry.href}>
-    <b><code><DocumentIdentifier text={entry.name} /></code></b>
-    <span>{entry.description}</span>
+  {entries.map(entry => <Link class="card card-flat card-interactive" href={entry.href}>
+    <b class="card-title"><code><DocumentIdentifier text={entry.name} /></code></b>
+    <span class="card-description">{entry.description}</span>
   </Link>)}
 </nav>

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/index.css'
+import '@master/internal-site/styles/system/index.ts'
 import Link from '@master/internal-site/components/Link.svelte'
 import RenderNode from '@master/internal-site/components/RenderNode.astro'
 import type { DocumentChoice } from '@master/internal-site/components/document-types.ts'
@@ -16,9 +16,9 @@ const { label, entries } = Astro.props
 ---
 
 <nav aria-label={label} class="ui-index">
-  {entries.map(entry => <Link href={entry.href}>
+  {entries.map(entry => <Link class="card card-flat card-interactive" href={entry.href}>
     {entry.icon != null && <RenderNode node={entry.icon} />}
-    <b>{entry.title}</b>
-    <span>{entry.description}</span>
+    <b class="card-title">{entry.title}</b>
+    <span class="card-description">{entry.description}</span>
   </Link>)}
 </nav>

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/callout.css'
+import '@master/internal-site/styles/system/callout.ts'
 import '@master/internal-site/styles/system/tray.ts'
 import '@master/internal-site/styles/system/tray-code.css'
 import IconAlertTriangle from '@tabler/icons-svelte-runes/icons/alert-triangle'
@@ -24,10 +24,10 @@ const hasResult = resultCode != null || Astro.slots.has('resultCode')
 <figure class="tray ui-tray" aria-label={title}>
   <figcaption class="ui-tray-head"><p class="ui-tray-title">{title}</p></figcaption>
   {sourceCode != null ? <RenderNode node={sourceCode} /> : <slot name="sourceCode" />}
-  {diagnostic && <div class="ui-callout" data-tone={diagnostic.severity === 'Error' ? 'danger' : 'warning'}>
-    <DiagnosticIcon stroke={1.6} aria-hidden="true" />
-    <div>
-      <p><b>{diagnostic.severity}</b> · <code>{diagnostic.rule}</code></p>
+  {diagnostic && <div class:list={['alert', diagnostic.severity === 'Error' ? 'alert-danger' : 'alert-warning', 'ui-callout']} data-tone={diagnostic.severity === 'Error' ? 'danger' : 'warning'}>
+    <DiagnosticIcon class="icon alert-icon" stroke={1.6} aria-hidden="true" />
+    <div class="alert-body">
+      <p><b class="alert-title">{diagnostic.severity}</b> · <code class="code">{diagnostic.rule}</code></p>
       <p>{diagnostic.message}</p>
     </div>
   </div>}