@master/internal-site 0.2.6 → 0.2.8

package/src/demo/reference/document.ts

@@ -9,13 +9,14 @@ import type { DemoScene, ReferenceDemoSection } from '@master/internal-site/demo
 const frameFile = fileURLToPath(import.meta.resolve('@master/internal-site/demo/reference/frame.css'))
 const materialFile = fileURLToPath(import.meta.resolve('@master/internal-site/styles/docs-shell/materials.css'))
 const systemTokenFile = fileURLToPath(import.meta.resolve('@master/internal-site/styles/system/tokens.css'))
-const readSystemButtons = () => ['mixins.css', 'buttons.css'].map(file => readFileSync(fileURLToPath(import.meta.resolve(`@master/internal-site/styles/system/${file}`)), 'utf8')).join('\n')
+const readSystemButtons = () => readFileSync(fileURLToPath(import.meta.resolve('@master/ui/components/button.css')), 'utf8')
+const uiTheme = readFileSync(fileURLToPath(import.meta.resolve('@master/ui/theme.css')), 'utf8')
 const systemButtons = readSystemButtons()
 let materials = readFileSync(materialFile, 'utf8')
 const readSystemTokens = () => readFileSync(systemTokenFile, 'utf8').replace(/\/\*[\s\S]*?\*\//g, '')
 let systemTokens = readSystemTokens()
 const frameCSS = readFileSync(frameFile, 'utf8')
-const sharedManifest = () => compileManifestSync(`@mixin --light { &:where(.light, .light *) { @contents; } }\n@mixin --dark { &:where(.dark, .dark *) { @contents; } }\n${materials}`, { baseManifest: preset }).manifest
+const sharedManifest = () => compileManifestSync(`@mixin --light { &:where(.light, .light *) { @contents; } }\n@mixin --dark { &:where(.dark, .dark *) { @contents; } }\n${uiTheme}\n${materials}`, { baseManifest: preset }).manifest
 let shared = sharedManifest()
 
 export function demoDocument(section: ReferenceDemoSection, scene: DemoScene, initialTheme?: 'light' | 'dark') {

package/src/docs-shell/common/locales.js

@@ -5,7 +5,7 @@ export const hreflangOfLocale = { en: 'en', tw: 'zh-TW', ja: 'ja', ko: 'ko', cn:
 export const nameOfLocale = { en: 'English', tw: '繁體中文（台灣）', ja: '日本語', ko: '한국어', cn: '简体中文' }
 /** Only first-party page links inherit the reader's language across sites. */
 export const localizableOrigins = {
-  'https://master.co': ['blog', 'brand', 'design-system'],
+  'https://master.co': ['blog', 'brand'],
   'https://css.master.co': ['guide', 'reference', 'benchmarks', 'roadmap'],
   'https://rc.css.master.co': ['guide', 'reference', 'benchmarks', 'roadmap']
 }

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

@@ -22,7 +22,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="ui-button" data-variant="quiet" data-shape="icon" data-size="sm" aria-label={label} title={label} data-code-copy={name ?? ''} data-code-copy-text={text}>
+  <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" />
   </button>

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

@@ -64,13 +64,13 @@
     <!-- 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>
+      <kbd class="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 ui-header-control"
+        class="btn ui-header-control btn-quiet btn-square"
         data-variant="quiet"
         data-shape="icon"
         data-disabled={disabled || undefined}
@@ -78,7 +78,7 @@
       >
         {#if Icon}<Icon size={18} stroke={1.5} aria-hidden="true" />{/if}
         {#if eachLink.href?.startsWith('http')}<IconArrowUpRight class="ui-header-external" size={10} stroke={1.5} aria-hidden="true" />{/if}
-        <span class="ui-tooltip" data-side="bottom" aria-hidden="true">{fullName || eachLink.name}</span>
+        <span class="tooltip ui-tooltip" data-side="bottom" aria-hidden="true">{fullName || eachLink.name}</span>
       </Link>
     {/each}
     {#if showLanguage}

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

@@ -10,7 +10,6 @@
 
 <script lang="ts">
   import '@master/internal-site/styles/interface.css'
-  import '@master/internal-site/styles/system/dialog.css'
   import '@master/internal-site/styles/system/header-core.css'
 
   import '../../styles/docs-shell/menu.css'
@@ -33,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
@@ -97,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() }
@@ -115,20 +116,20 @@
   <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('ui-button 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>
-<dialog bind:this={dialog} {@attach portal} {id} class="ui-dialog ui-mobile-menu" data-variant="sheet" data-open={opened}
+<dialog bind:this={dialog} {@attach portal} {id} class="ui-mobile-menu" data-variant="sheet" data-open={opened}
   aria-labelledby={`${id}-title`} oncancel={event => { event.preventDefault(); close() }} ontransitionend={transitionEnd}
   onkeydown={keydown} onclose={() => { if (!dialog.open) { opened = false; clearTimeout(closing) } }}>
   <div class="ui-mobile-menu-bar">
-    <button type="button" class="ui-button ui-header-control ui-menu-toggle" data-variant="quiet" data-shape="icon"
+    <button type="button" class="btn ui-header-control ui-menu-toggle btn-quiet btn-square" data-variant="quiet" data-shape="icon"
       onclick={() => opened ? close() : open()} aria-label={opened ? t('Close menu') : t('Menu')} aria-expanded={opened} aria-controls={id}>
       {@render lines()}
     </button>
     <Link href="/" class="ui-header-brand" onclick={() => finishClose(false)} aria-label={`${app.name} ${t('home')}`}><app.Logotype style="height: 20px; width: auto" aria-hidden="true" /></Link>
-    <SearchButton class="ui-button ui-header-control ui-menu-search" data-variant="quiet" data-shape="icon" onclick={search}><IconSearch size={18} stroke={1.5} aria-hidden="true" /></SearchButton>
+    <SearchButton class="btn ui-header-control ui-menu-search btn-quiet btn-square" data-variant="quiet" data-shape="icon" onclick={search}><IconSearch size={18} stroke={1.5} aria-hidden="true" /></SearchButton>
   </div>
   <div class="ui-mobile-menu-body">
     <h2 class="sr-only" id={`${id}-title`}>{t('Navigation')}</h2>

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

@@ -7,7 +7,7 @@
 
   type Props = Omit<HTMLSelectAttributes, 'value' | 'onchange'>
 
-  /** A native select; by default invisible over its positioned label (`ui-select[data-variant="overlay"]`), which shows the value. */
+  /** A native select; by default invisible over its positioned label (`select[data-variant="overlay"]`), which shows the value. */
   let { class: className, ...props }: Props = $props()
   const currentURL = import.meta.env.PUBLIC_URL
 
@@ -17,7 +17,7 @@
 </script>
 
 <select name="version" value={currentURL}
-  data-variant="overlay" {...props} class={clsx('ui-select', className)}
+  data-variant="overlay" {...props} class={clsx('select site-select-overlay', className)}
   onchange={navigate}>
   <option value={currentURL}>v{import.meta.env.PUBLIC_VERSION}</option>
   {#each app.versions as { name, href } (href)}<option value={href}>{name}</option>{/each}

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

@@ -1,6 +1,6 @@
 ---
 import '@master/internal-site/styles/system/callout.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 IconAlertTriangle from '@tabler/icons-svelte-runes/icons/alert-triangle'
 import IconCircleX from '@tabler/icons-svelte-runes/icons/circle-x'
@@ -21,7 +21,7 @@ const DiagnosticIcon = diagnostic?.severity === 'Error' ? IconCircleX : IconAler
 const hasResult = resultCode != null || Astro.slots.has('resultCode')
 ---
 
-<figure class="ui-tray" aria-label={title}>
+<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'}>

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

@@ -1,7 +1,7 @@
 ---
 import { siteOf } from '../../astro/site-context'
 const { t } = siteOf(Astro)
-import '@master/internal-site/styles/system/table.css'
+import '@master/internal-site/styles/system/table.ts'
 
 interface Props {
   label?: string
@@ -13,9 +13,9 @@ const { label = 'Syntax', rows } = Astro.props
 ---
 
 {/* The table's narrow overflow region must be focusable for native keyboard scrolling. */}
-<div class="ui-table" data-variant="lookup" role="region" aria-label={`${label} and CSS`} tabindex="0"><table>
-  <thead><tr><th scope="col">{t(label)}</th><th scope="col">CSS</th></tr></thead>
-  <tbody>{rows.map(({ syntax, css }) => <tr>
-    <th scope="row"><code>{syntax}</code></th><td><code>{css}</code></td>
+<div class="ui-table sheet sheet-flat" data-variant="lookup" role="region" aria-label={`${label} and CSS`} tabindex="0"><table class="table">
+  <thead><tr class="table-row"><th class="table-heading" scope="col">{t(label)}</th><th class="table-heading" scope="col">CSS</th></tr></thead>
+  <tbody>{rows.map(({ syntax, css }) => <tr class="table-row">
+    <th class="table-heading" scope="row"><code>{syntax}</code></th><td class="table-cell"><code>{css}</code></td>
   </tr>)}</tbody>
 </table></div>

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

@@ -34,7 +34,7 @@
 </script>
 
 <span class="ui-copy">
-  <button type="button" class="ui-button" data-size="sm" disabled={!ready} aria-label={`Copy ${label}`} onclick={copy}>
+  <button type="button" class="btn btn-sm" data-size="sm" disabled={!ready} aria-label={`Copy ${label}`} onclick={copy}>
     {#if result === 'success'}<IconCheck stroke={1.8} aria-hidden="true" />{:else}<IconCopy stroke={1.8} aria-hidden="true" />{/if}
     Copy
   </button>

package/src/docs-shell/components/DocumentFileTree.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 '@master/internal-site/styles/system/tree.css'
 import IconFile from '@tabler/icons-svelte-runes/icons/file'
@@ -30,7 +30,7 @@ const Entries = Astro.self
       {!!entry.children?.length && <Entries entries={entry.children} nested />}
     </li>)}
   </ul>
-  : <figure class="ui-tray" aria-label={props.title}>
+  : <figure class="tray ui-tray" aria-label={props.title}>
     <figcaption class="ui-tray-head"><p class="ui-tray-title">{props.title}</p></figcaption>
     <div class="ui-tree"><Entries entries={props.entries} nested /></div>
     {props.caption && <p class="ui-tray-caption">{props.caption}</p>}

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

@@ -1,7 +1,7 @@
 ---
 import '@master/internal-site/styles/system/stage.css'
 import '@master/internal-site/styles/system/steps.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 type { DocumentFlowProps } from '@master/internal-site/components/document-types.ts'
 
@@ -13,7 +13,7 @@ type Props = DocumentFlowProps
 const { title, steps, caption } = Astro.props
 ---
 
-<figure class="ui-tray" aria-label={title}>
+<figure class="tray ui-tray" aria-label={title}>
   <figcaption class="ui-tray-head"><p class="ui-tray-title">{title}</p></figcaption>
   <div class="ui-stage" data-padding="sm" data-align="start">
     {/* Preserve WebKit list semantics when list-style is none. */}

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

@@ -2,7 +2,7 @@
 import { siteOf } from '../../astro/site-context'
 const { t } = siteOf(Astro)
 import '@master/internal-site/styles/system/disclosure.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/documentation-illustration.css'
 import Image from '@master/internal-site/components/Image.svelte'
@@ -21,7 +21,7 @@ interface Props {
 const { title, alt, images, caption } = Astro.props
 ---
 
-<figure class="ui-tray" aria-label={title}>
+<figure class="tray ui-tray" aria-label={title}>
   <figcaption class="ui-tray-head">
     <p class="ui-tray-title">{title}</p>
   </figcaption>

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/table.css'
+import '@master/internal-site/styles/system/table.ts'
 import DocumentKeyList from '@master/internal-site/components/DocumentKeyList.astro'
 import { siteOf } from '../../astro/site-context'
 const { t } = siteOf(Astro)
@@ -13,10 +13,10 @@ const { rows } = Astro.props
 ---
 
 {/* The table's narrow overflow region must be focusable for native keyboard scrolling. */}
-<div class="ui-table" data-variant="lookup" role="region" aria-label={t('Namespace consumers')} tabindex="0"><table>
-  <thead><tr><th scope="col">{t('Namespace')}</th><th scope="col">{t('Consumers')}</th></tr></thead>
-  <tbody>{rows.map(({ namespace, consumers }) => <tr>
-    <th scope="row"><code>{namespace}-*</code></th>
-    <td><DocumentKeyList keys={consumers} previewCount={6} /></td>
+<div class="ui-table sheet sheet-flat" data-variant="lookup" role="region" aria-label={t('Namespace consumers')} tabindex="0"><table class="table">
+  <thead><tr class="table-row"><th class="table-heading" scope="col">{t('Namespace')}</th><th class="table-heading" scope="col">{t('Consumers')}</th></tr></thead>
+  <tbody>{rows.map(({ namespace, consumers }) => <tr class="table-row">
+    <th class="table-heading" scope="row"><code>{namespace}-*</code></th>
+    <td class="table-cell"><DocumentKeyList keys={consumers} previewCount={6} /></td>
   </tr>)}</tbody>
 </table></div>

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

@@ -1,6 +1,6 @@
 ---
 import '@master/internal-site/styles/system/parameters.css'
-import '@master/internal-site/styles/system/specimens.css'
+import '@master/ui/components/badge.css'
 import RenderNode from '@master/internal-site/components/RenderNode.astro'
 import DocumentIdentifier from '@master/internal-site/components/DocumentIdentifier.astro'
 import type { DocumentParameter } from '@master/internal-site/components/document-types.ts'
@@ -22,7 +22,7 @@ const { label, parameters } = Astro.props
       <span><DocumentIdentifier text={parameter.name} /></span>
       <small>{parameter.type}</small>
       {parameter.requirement && (/^required$/i.test(parameter.requirement)
-        ? <span class="ui-badge" data-size="sm">{parameter.requirement}</span>
+        ? <span class="badge badge-sm">{parameter.requirement}</span>
         : <small>{parameter.requirement}</small>)}
     </dt>
     <dd><p><RenderNode node={parameter.description} /></p></dd>

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

@@ -16,7 +16,7 @@
 <div class="ui-expand" data-expanded={expanded}>
   <div {id}>{@render children?.()}</div>
   <div class="ui-expand-control">
-    <button type="button" class="ui-button" data-size="sm" aria-expanded={expanded} aria-controls={id} onclick={() => { expanded = !expanded }}>
+    <button type="button" class="btn btn-sm" data-size="sm" aria-expanded={expanded} aria-controls={id} onclick={() => { expanded = !expanded }}>
       {t(expanded ? 'Collapse' : 'Expand')}
       <IconChevronDown aria-hidden="true" stroke={1.5} />
     </button>

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

@@ -11,9 +11,9 @@
 </script>
 
 {#if i18n.locales.length > 1}
-<label class={clsx('ui-button', className)} data-variant="quiet" data-shape="icon" data-size="sm">
+<label class={clsx('btn btn-quiet btn-sm btn-square', className)} data-variant="quiet" data-shape="icon" data-size="sm">
   <IconLanguage size={18} stroke={1.5} aria-hidden="true" />
   <LanguageSelect aria-label={t('Language switch')} />
-  <span class="ui-tooltip" data-side="bottom" aria-hidden="true">{t('Language')}</span>
+  <span class="tooltip ui-tooltip" data-side="bottom" aria-hidden="true">{t('Language')}</span>
 </label>
 {/if}

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

@@ -11,7 +11,7 @@
     children?: Snippet
   }
 
-  /** A native select; by default invisible over its positioned label (`ui-select[data-variant="overlay"]`), which shows the value. */
+  /** A native select; by default invisible over its positioned label (`select[data-variant="overlay"]`), which shows the value. */
   let { class: className, children, ...props }: Props = $props()
   const { pathname, locale, i18n } = getSite()
 
@@ -34,7 +34,7 @@
   }
 </script>
 
-<select data-variant="overlay" {...props} class={clsx('ui-select', className)}
+<select data-variant="overlay" {...props} class={clsx('select site-select-overlay', className)}
   {onchange}
   value={locale}>
   {#each Object.entries(i18n.nameOfLocale) as [eachLocale, localeName] (eachLocale)}

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

@@ -19,5 +19,5 @@ const guide = Boolean(config.sections.guide)
     <p>{guide ? $('Try searching the documentation or return to the Guide.') : $('Try searching the site or return to the homepage.')}</p>
   </div>
   <SearchButton client:load class="ui-search-trigger" />
-  <Link href={guide ? "/guide" : "/"} class="ui-button" data-variant="quiet">{guide ? $('Browse the Guide') : $('Back to home')}<span aria-hidden="true">→</span></Link>
+  <Link href={guide ? "/guide" : "/"} class="btn btn-quiet" data-variant="quiet">{guide ? $('Browse the Guide') : $('Back to home')}<span aria-hidden="true">→</span></Link>
 </main>

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

@@ -31,10 +31,10 @@ const navs = [
 ---
 
 {navs.length > 0 && (
-  <nav class="ui-pager" aria-label={$('Previous and next documents')}>
-    {navs.map(({ direction, href, label, title }) => <Link {href} rel={direction} aria-label={`${label}: ${title}`}>
-      <small>{label}</small>
-      <b>{title}</b>
+  <nav class="pager ui-pager" aria-label={$('Previous and next documents')}>
+    {navs.map(({ direction, href, label, title }) => <Link class="pager-link" {href} rel={direction} aria-label={`${label}: ${title}`}>
+      <small class="pager-label">{label}</small>
+      <b class="pager-title">{title}</b>
     </Link>)}
   </nav>
 )}

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

@@ -2,7 +2,7 @@
   import '@master/internal-site/styles/interface.css'
   import '@master/internal-site/styles/system/search-trigger.css'
 
-  import type { Snippet } from 'svelte'
+  import { onMount, type Snippet } from 'svelte'
   import type { HTMLButtonAttributes } from 'svelte/elements'
   import IconSearch from '@tabler/icons-svelte-runes/icons/search'
   import { openSearch, prefetchSearch, searchLabels } from '../contexts/search'
@@ -13,7 +13,10 @@
   }
 
   /** Opens the page's search dialog. Without children it renders the search field trigger (`ui-search-trigger`) with its shortcut. */
-  let { class: className, children, onclick, onfocus, onpointerenter, type = 'button', ...props }: Props = $props()
+  let { class: className, children, onclick, onfocus, onpointerenter, type = 'button', disabled = false, ...props }: Props = $props()
+  // SSR must not offer an action before this island can receive it.
+  let mounted = $state(false)
+  onMount(() => { mounted = true })
   const { t, locale } = getSite()
   const { searchText, searchLabel } = searchLabels(t, locale)
 
@@ -23,7 +26,7 @@
   }
 </script>
 
-<button {...props} {type} class={className} aria-label={props['aria-label'] ?? searchLabel} aria-keyshortcuts="Meta+K Control+K" onclick={handleClick}
+<button {...props} {type} disabled={!mounted || disabled} class={className} aria-label={props['aria-label'] ?? searchLabel} aria-keyshortcuts="Meta+K Control+K" onclick={handleClick}
   onpointerenter={event => { onpointerenter?.(event); prefetchSearch() }}
   onfocus={event => { onfocus?.(event); prefetchSearch() }}>
   {#if children}
@@ -31,6 +34,6 @@
   {:else}
     <IconSearch aria-hidden="true" stroke={1.5} />
     {searchText}
-    <span class="ui-kbd" aria-hidden="true">⌘K</span>
+    <span class="kbd" aria-hidden="true">⌘K</span>
   {/if}
 </button>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Component } from 'svelte'
-  import { openSearchEvent, prefetchSearchEvent } from '../contexts/search'
+  import { openSearchEvent, prefetchSearchEvent, consumeSearchRequest } from '../contexts/search'
   // A client-only chunk delivers no CSS of its own: link the panel's compiled styles explicitly.
   import searchStyles from '../../styles/docs-shell/documentation-search.css?url&no-inline'
 
@@ -33,6 +33,7 @@
   }
 
   async function request(event: Event) {
+    consumeSearchRequest()
     const trigger = (event as CustomEvent<{ trigger?: HTMLElement }>).detail?.trigger
     initialTrigger = trigger instanceof HTMLElement ? trigger : document.activeElement as HTMLElement | null
     Panel = await load()
@@ -50,6 +51,8 @@
     const prefetch = () => void load()
     window.addEventListener(openSearchEvent, request)
     window.addEventListener(prefetchSearchEvent, prefetch)
+    const pending = consumeSearchRequest()
+    if (pending) void request(new CustomEvent(openSearchEvent, { detail: pending }))
     return () => {
       window.removeEventListener(openSearchEvent, request)
       window.removeEventListener(prefetchSearchEvent, prefetch)

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

@@ -28,7 +28,7 @@
   import Link from './Link.svelte'
   import { getSite } from '../site'
   import { createDocumentationSearch } from '../utils/documentation-search'
-  import { openSearchEvent } from '../contexts/search'
+  import { openSearchEvent, consumeSearchRequest } from '../contexts/search'
   import IconArrowDown from '@tabler/icons-svelte-runes/icons/arrow-down'
   import IconArrowUp from '@tabler/icons-svelte-runes/icons/arrow-up'
   import IconCornerDownLeft from '@tabler/icons-svelte-runes/icons/corner-down-left'
@@ -112,7 +112,7 @@
   }
 
   $effect(() => {
-    const request = (event: Event) => open((event as CustomEvent<{ trigger?: HTMLElement }>).detail?.trigger)
+    const request = (event: Event) => { consumeSearchRequest(); open((event as CustomEvent<{ trigger?: HTMLElement }>).detail?.trigger) }
     window.addEventListener(openSearchEvent, request)
     return () => window.removeEventListener(openSearchEvent, request)
   })
@@ -150,21 +150,21 @@
 {/snippet}
 
 {#if opened}
-  <dialog bind:this={dialog} {@attach portal} {@attach closeOnBackdropClick} class="ui-dialog" data-variant="search" aria-label={t('Search documentation')} oncancel={close}>
+  <dialog bind:this={dialog} {@attach portal} {@attach closeOnBackdropClick} class="dialog ui-dialog" data-variant="search" aria-label={t('Search documentation')} oncancel={close}>
     <div class="ui-dialog-search">
       <IconSearch size={18} stroke={1.5} aria-hidden="true" />
       <input bind:this={input} type="search" role="combobox" aria-autocomplete="list" aria-expanded={Boolean(query)} value={query} autocomplete="off" spellcheck={false} placeholder={t('Search documentation…')} aria-label={t('Search documentation')} aria-controls="documentation-search-results" aria-activedescendant={results[selected] ? `documentation-result-${selected}` : undefined}
         oninput={event => selectQuery(event.currentTarget.value)}
         {onkeydown} />
-      {#if query}<button type="button" class="ui-button" data-variant="quiet" data-shape="icon" data-size="sm" onclick={() => selectQuery('')} aria-label={t('Clear search')}><IconX size={16} stroke={1.5} aria-hidden="true" /></button>{/if}
-      <button type="button" class="ui-button ui-dialog-close" data-variant="quiet" data-size="sm" onclick={close} aria-label={t('Close search')}><span class="ui-kbd">esc</span><span>{t('Cancel')}</span></button>
+      {#if query}<button type="button" class="btn btn-sm btn-quiet btn-square" data-variant="quiet" data-shape="icon" data-size="sm" onclick={() => selectQuery('')} aria-label={t('Clear search')}><IconX size={16} stroke={1.5} aria-hidden="true" /></button>{/if}
+      <button type="button" class="btn ui-dialog-close btn-sm btn-quiet" data-variant="quiet" data-size="sm" onclick={close} aria-label={t('Close search')}><span class="kbd">esc</span><span>{t('Cancel')}</span></button>
     </div>
     <div class="ui-dialog-body" bind:this={scroll}>
       <p class="ui-dialog-status" role="status">{loading ? (t('Loading documentation…')) : error ? (t('Search could not load.')) : query ? t(results.length === 40 ? 'Top {count} results' : '{count} results').replace('{count}', String(results.length)) : (t('Find a name, alias or CSS property'))}</p>
-      {#if error}<div class="ui-dialog-note"><p>{t('Check your connection and try again.')}</p><button type="button" class="ui-button" data-size="sm" onclick={() => { retry += 1; input?.focus() }}>{t('Try again')}</button></div>{/if}
+      {#if error}<div class="ui-dialog-note"><p>{t('Check your connection and try again.')}</p><button type="button" class="btn btn-sm" data-size="sm" onclick={() => { retry += 1; input?.focus() }}>{t('Try again')}</button></div>{/if}
       {#if !query && !error && !loading}<div class="ui-dialog-note">
         <p>{t('Try searching')}</p>
-        {#each ['padding', 'padding-inline-start:', 'fg-red:hover@sm'] as value (value)}<button type="button" class="ui-button" data-size="sm" onclick={() => selectQuery(value)}><code>{value}</code><IconCornerDownLeft size={14} stroke={1.5} aria-hidden="true" /></button>{/each}
+        {#each ['padding', 'padding-inline-start:', 'fg-red:hover@sm'] as value (value)}<button type="button" class="btn btn-sm" data-size="sm" onclick={() => selectQuery(value)}><code>{value}</code><IconCornerDownLeft size={14} stroke={1.5} aria-hidden="true" /></button>{/each}
       </div>{/if}
       {#if query && !results.length && !error && !loading}<div class="ui-dialog-note" data-align="center"><IconSearch size={24} stroke={1.25} aria-hidden="true" /><b>{t('No matching documents')}</b><p>{t('Try a property name, a token name or a different keyword.')}</p></div>{/if}
       <ol id="documentation-search-results" class="ui-results" role="listbox" aria-label={t('Search results')} aria-busy={loading}>
@@ -177,6 +177,6 @@
         </li>{/each}{/if}
       </ol>
     </div>
-    <div class="ui-dialog-foot" aria-hidden="true"><span><span class="ui-kbd"><IconArrowUp size={12} /></span><span class="ui-kbd"><IconArrowDown size={12} /></span>{t('Navigate')}</span><span><span class="ui-kbd"><IconCornerDownLeft size={12} /></span>{t('Open')}</span><span class="ui-search-shortcut">{t('Search anytime')}<kbd class="ui-kbd">{shortcutModifier}</kbd><kbd class="ui-kbd">K</kbd></span></div>
+    <div class="ui-dialog-foot" aria-hidden="true"><span><span class="kbd"><IconArrowUp size={12} /></span><span class="kbd"><IconArrowDown size={12} /></span>{t('Navigate')}</span><span><span class="kbd"><IconCornerDownLeft size={12} /></span>{t('Open')}</span><span class="ui-search-shortcut">{t('Search anytime')}<kbd class="kbd">{shortcutModifier}</kbd><kbd class="kbd">K</kbd></span></div>
   </dialog>
 {/if}

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

@@ -35,8 +35,9 @@
 
 {#if names.length}
   <div class="segment-views">
-    <div class="ui-segmented" role="tablist" aria-label={label}>
+    <div class="segmented" role="tablist" aria-label={label}>
       {#each names as name, index (name)}<button
+        class="segmented-item"
         bind:this={buttons[index]}
         type="button"
         id={`${prefix}-tab-${index}`}

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

@@ -8,13 +8,13 @@
 
   type Props = Omit<HTMLSelectAttributes, 'value' | 'onchange'>
 
-  /** A native select; by default invisible over its positioned label (`ui-select[data-variant="overlay"]`), which shows the value. */
+  /** A native select; by default invisible over its positioned label (`select[data-variant="overlay"]`), which shows the value. */
   let { class: className, ...props }: Props = $props()
   const themeMode = useThemeMode()
   const { t } = getSite()
 </script>
 
-<select data-variant="overlay" {...props} class={clsx('ui-select', className)} value={themeMode.preference}
+<select data-variant="overlay" {...props} class={clsx('select site-select-overlay', className)} value={themeMode.preference}
   onchange={(event) => { themeMode.preference = event.currentTarget.value }}>
   <option value="light">{t('Light')}</option>
   <option value="dark">{t('Dark')}</option>

package/src/docs-shell/components/markdown/Table.astro

@@ -1,7 +1,7 @@
 ---
-import '@master/internal-site/styles/system/table.css'
+import '@master/internal-site/styles/system/table.ts'
 ---
 
-<div class="ui-table">
-  <table {...Astro.props}><slot /></table>
+<div class="ui-table sheet sheet-flat">
+  <table class="table" {...Astro.props}><slot /></table>
 </div>

package/src/docs-shell/components/markdown/TableCell.astro

@@ -0,0 +1,4 @@
+---
+const { class: className, ...props } = Astro.props
+---
+<td {...props} class:list={['table-cell', className]}><slot /></td>

package/src/docs-shell/components/markdown/TableHead.astro

@@ -0,0 +1,4 @@
+---
+const { class: className, ...props } = Astro.props
+---
+<th {...props} class:list={['table-heading', className]}><slot /></th>

package/src/docs-shell/components/markdown/TableRow.astro

@@ -0,0 +1,4 @@
+---
+const { class: className, ...props } = Astro.props
+---
+<tr {...props} class:list={['table-row', className]}><slot /></tr>

package/src/docs-shell/components/markdown-components.ts

@@ -11,6 +11,9 @@ import Anchor from './markdown/Anchor.astro'
 import Heading2 from './markdown/Heading2.astro'
 import Heading3 from './markdown/Heading3.astro'
 import Table from './markdown/Table.astro'
+import TableHead from './markdown/TableHead.astro'
+import TableCell from './markdown/TableCell.astro'
+import TableRow from './markdown/TableRow.astro'
 
 /**
  * How Markdown renders in MDX. Every MDX module exports these as `components` (see
@@ -24,6 +27,9 @@ export const markdownComponents = {
   img: Image,
   Image,
   table: Table,
+  th: TableHead,
+  td: TableCell,
+  tr: TableRow,
   Code,
   InlineCode,
   PMAction,

package/src/docs-shell/contexts/search.ts

@@ -4,9 +4,19 @@ export const openSearchEvent = 'site-search:open'
 /** Signals likely intent, so the dialog can load its panel and styles before the first opening. */
 export const prefetchSearchEvent = 'site-search:prefetch'
 
+// A hydrated trigger can precede the dialog island. Keep only its latest unconsumed request.
+// This is written only by a browser interaction, never during SSR.
+let pendingOpen: { trigger?: HTMLElement } | undefined
+export function consumeSearchRequest() {
+  const request = pendingOpen
+  pendingOpen = undefined
+  return request
+}
+
 /** Search triggers live in independent islands; they open the page's single dialog by event. */
 export function openSearch(trigger?: HTMLElement) {
-  window.dispatchEvent(new CustomEvent(openSearchEvent, { detail: { trigger } }))
+  pendingOpen = { trigger }
+  window.dispatchEvent(new CustomEvent(openSearchEvent, { detail: pendingOpen }))
 }
 
 /** Search triggers call this on pointer or focus intent; the dialog loads once. */

package/src/docs-shell/contexts/theme-mode.svelte.ts

@@ -43,6 +43,7 @@ export function useThemeMode() {
     const update = () => {
       snapshot.preference = instance.preference
       snapshot.value = instance.value
+      if (instance.value) document.documentElement.dataset.theme = instance.value
     }
     update()
     document.documentElement.addEventListener('themeModeChange', update)