@master/internal-site 0.1.2 → 0.2.0

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

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

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

@@ -1,4 +1,6 @@
 ---
+import { siteOf } from '@master/internal-site/astro/site-context.ts'
+const { t } = siteOf(Astro)
 import '../../styles/docs-shell/prose.css'
 import resolveHeading from '../utils/resolve-heading'
 
@@ -23,6 +25,6 @@ const title = typeof heading.title === 'string' ? heading.title : text
 ---
 
 <Element {...props} id={heading.id ?? id} class:list={[className, heading.className]} title={title || undefined} data-doc-heading="">
-  <a class="ui-anchor" href={'#' + (heading.id ?? id)} aria-label={`Link to section: ${title}`}>#</a>
+  <a class="ui-anchor" href={'#' + (heading.id ?? id)} aria-label={t('Link to section: {title}').replace('{title}', title)}>#</a>
   <Fragment set:html={plain ? html.replace(' [sr-only]', '') : html} />
 </Element>

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

@@ -1,96 +1,161 @@
 <script lang="ts" module>
   import type { Attachment } from 'svelte/attachments'
 
-  /** The sheet lives at the end of the body, outside the header that opens it. */
-  const portal: Attachment<HTMLElement> = (node) => {
+  /** Keep the modal outside the header's transforms and stacking context. */
+  const portal: Attachment<HTMLDialogElement> = (node) => {
     document.body.append(node)
-    return () => node.remove()
+    return () => { node.close(); node.remove() }
   }
 </script>
 
 <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'
+  import { onMount } from 'svelte'
   import clsx from 'clsx'
   import Link from './Link.svelte'
-  import DocSidebar, { type DocSidebarProps } from './DocSidebar.svelte'
   import SearchButton from './SearchButton.svelte'
   import IconArrowUpRight from '@tabler/icons-svelte-runes/icons/arrow-up-right'
-  import IconMenu2 from '@tabler/icons-svelte-runes/icons/menu-2'
-  import IconX from '@tabler/icons-svelte-runes/icons/x'
+  import IconSearch from '@tabler/icons-svelte-runes/icons/search'
+  import IconMenu from '@tabler/icons-svelte-runes/icons/menu'
   import ThemeSelect from './ThemeSelect.svelte'
   import DocVersionSelect from './DocVersionSelect.svelte'
   import LanguageSelect from './LanguageSelect.svelte'
+  import { openSearch } from '../contexts/search'
   import app from 'virtual:master-site/app'
   import { getSite } from '../site'
 
-  interface Props {
-    class?: string
-    documentNavigation?: DocSidebarProps['pageCategories']
-    documentNavigationTitle?: string
-  }
+  interface Props { class?: string }
 
-  /** The compact header's menu: site sections, the section's chapters, community links and preferences in one sheet. */
-  let { class: className, documentNavigation, documentNavigationTitle }: Props = $props()
+  /** Primary destinations, with community and preferences kept in a quiet footer. */
+  let { class: className }: Props = $props()
   let opened = $state(false)
   const id = $props.id()
-  let dialog = $state<HTMLDialogElement>()
-  let trigger = $state<HTMLButtonElement>()
+  let dialog: HTMLDialogElement
+  let trigger: HTMLButtonElement
+  let closing: ReturnType<typeof setTimeout> | undefined
   const { t, locale, i18n } = getSite()
-  const tw = locale === 'tw'
+
+  function finishClose(restoreFocus = true) {
+    clearTimeout(closing)
+    closing = undefined
+    opened = false
+    dialog.close()
+    if (restoreFocus) {
+      const target = trigger.getClientRects().length ? trigger : trigger.closest('header')?.querySelector<HTMLElement>('.ui-header-brand')
+      target?.focus({ preventScroll: true })
+    }
+  }
+
+  function open() {
+    clearTimeout(closing)
+    closing = undefined
+    if (!dialog.open) {
+      dialog.showModal()
+      dialog.scrollTop = 0
+      // Establish the closed style before changing the target; CSS can reverse an interrupted transition.
+      getComputedStyle(dialog).opacity
+    }
+    opened = true
+  }
 
   function close() {
-    dialog?.close()
     opened = false
-    trigger?.focus({ preventScroll: true })
+    clearTimeout(closing)
+    if (matchMedia('(prefers-reduced-motion: reduce)').matches) finishClose()
+    else closing = setTimeout(finishClose, 220)
   }
 
-  $effect(() => {
-    if (!opened) return
-    const element = dialog
-    if (element && !element.open) element.showModal()
+  function transitionEnd(event: TransitionEvent) {
+    if (event.target === dialog && event.propertyName === 'opacity' && !opened) finishClose()
+  }
+
+  function search(event: Event) {
+    event.preventDefault()
+    const searchTrigger = trigger.closest('header')?.querySelector<HTMLElement>('.ui-header-search')
+    const target = searchTrigger?.getClientRects().length ? searchTrigger : trigger
+    finishClose(false)
+    openSearch(target)
+  }
+
+  function keydown(event: KeyboardEvent) {
+    if (event.key === 'Tab') {
+      const controls = Array.from(dialog.querySelectorAll<HTMLElement>('a[href], button:not(:disabled), select:not(:disabled)'))
+        .filter(element => element.getClientRects().length)
+      const first = controls[0]
+      const last = controls.at(-1)
+      if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last?.focus() }
+      else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first?.focus() }
+    }
+    if (!event.isComposing && (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+      event.stopPropagation()
+      search(event)
+    }
+  }
+
+  onMount(() => {
     const wide = matchMedia('(width >= 64rem)')
-    const resize = () => { if (wide.matches) close() }
+    const motion = matchMedia('(prefers-reduced-motion: reduce)')
+    const resize = () => { if (wide.matches && dialog.open) finishClose() }
+    const reduceMotion = () => { if (motion.matches && closing) finishClose() }
     wide.addEventListener('change', resize)
-    return () => wide.removeEventListener('change', resize)
+    motion.addEventListener('change', reduceMotion)
+    return () => {
+      clearTimeout(closing)
+      wide.removeEventListener('change', resize)
+      motion.removeEventListener('change', reduceMotion)
+    }
   })
 </script>
 
-<button bind:this={trigger} type="button" class={clsx('ui-button', className)} data-variant="quiet" data-shape="icon"
-  aria-label={t('Menu')} aria-expanded={opened} aria-haspopup="dialog" aria-controls={opened ? id : undefined}
-  onclick={() => { opened = !opened }}>
-  <IconMenu2 size={20} stroke={1.5} aria-hidden="true" />
+{#snippet lines()}
+  <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"
+  aria-label={t('Menu')} aria-expanded={opened} aria-haspopup="dialog" aria-controls={id} onclick={open}>
+  {@render lines()}
 </button>
-{#if opened}
-  <dialog bind:this={dialog} {@attach portal} {id} class="ui-dialog" data-variant="sheet" aria-labelledby={`${id}-title`} oncancel={event => { event.preventDefault(); close() }}>
-    <div class="ui-dialog-bar">
-      <button type="button" class="ui-button" data-variant="quiet" data-shape="icon" onclick={close} aria-label={tw ? '關閉選單' : 'Close menu'}><IconX size={20} stroke={1.5} aria-hidden="true" /></button>
-      <Link href="/" class="ui-header-brand" onclick={close} aria-label={`${app.name} ${tw ? '首頁' : 'home'}`}><app.Logotype style="height: 20px; width: auto" aria-hidden="true" /></Link>
-    </div>
-    <div class="ui-dialog-body">
-      <h2 class="sr-only" id={`${id}-title`}>{tw ? '網站導覽' : 'Navigation'}</h2>
-      <SearchButton class="ui-search-trigger" />
-      <nav class="ui-nav-group" aria-label={tw ? '主要導覽' : 'Main navigation'}>
-        {#each app.navs as { Icon, disabled, fullName, ...link } (link.name)}<Link class="ui-nav-link" current="true" ambiguous {...link} {disabled} onclick={close}>
-          {#if Icon}<Icon size={18} stroke={1.5} aria-hidden="true" />{/if}{t(fullName || link.name)}
-          {#if link.href?.startsWith('http')}<IconArrowUpRight size={14} stroke={1.5} aria-hidden="true" />{/if}
-        </Link>{/each}
-      </nav>
-      {#if documentNavigation?.length}<details class="ui-disclosure" data-variant="rule" open>
-        <summary>{t(documentNavigationTitle || 'Documentation')}<span class="ui-disclosure-meta">{tw ? '文件章節' : 'Chapters'}</span></summary>
-        <DocSidebar embedded includeNestedPages pageCategories={documentNavigation} onNavigate={close} />
-      </details>{/if}
-      {#if app.communityNavs?.length}<nav class="ui-nav-group" aria-labelledby={`${id}-community`}>
-        <h4 id={`${id}-community`}>{t('Community')}</h4>
-        {#each app.communityNavs as { Icon, disabled, fullName, ...link } (link.name)}<Link class="ui-nav-link" {...link} {disabled} onclick={close}>
-          {#if Icon}<Icon size={18} stroke={1.5} aria-hidden="true" />{/if}{t(fullName || link.name)}<IconArrowUpRight size={14} stroke={1.5} aria-hidden="true" />
-        </Link>{/each}
-      </nav>{/if}
-      <section class="ui-dialog-fields" aria-labelledby={`${id}-system`}>
-        <h4 id={`${id}-system`}>{t('System')}</h4>
-        {#if app.versions.length > 0}<label class="ui-field">{t('Version')}<DocVersionSelect aria-label={t('Version')} data-variant={undefined} /></label>{/if}
-        {#if i18n.locales.length > 1}<label class="ui-field">{t('Language')}<LanguageSelect aria-label={t('Language')} data-variant={undefined} /></label>{/if}
-        <label class="ui-field">{t('Theme')}<ThemeSelect aria-label={t('Theme')} data-variant={undefined} /></label>
-      </section>
+<dialog bind:this={dialog} {@attach portal} {id} class="ui-dialog 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"
+      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>
+  </div>
+  <div class="ui-mobile-menu-body">
+    <h2 class="sr-only" id={`${id}-title`}>{t('Navigation')}</h2>
+    <nav class="ui-mobile-menu-nav" aria-label={t('Main navigation')}>
+      {#each app.navs as { Icon: _Icon, disabled, fullName, ...link }, index (link.name)}
+        <Link class="ui-mobile-menu-link" current="true" ambiguous {...link} {disabled} style={`--menu-order: ${index}`} onclick={() => finishClose(false)}>
+          <span>{t(fullName || link.name)}</span>
+          {#if link.href?.startsWith('http')}<IconArrowUpRight size={16} stroke={1.5} aria-hidden="true" />{/if}
+        </Link>
+      {/each}
+    </nav>
+    <div class="ui-mobile-menu-footer">
+      {#if app.communityNavs?.length}
+        <nav class="ui-mobile-menu-community" aria-label={t('Community')}>
+          {#each app.communityNavs as { Icon, disabled, fullName, ...link } (link.name)}
+            <Link {...link} {disabled} aria-label={fullName || link.name} title={fullName || link.name} onclick={() => finishClose(false)}>
+              {#if Icon}<Icon size={20} stroke={1.5} aria-hidden="true" />{:else}{t(fullName || link.name)}{/if}
+              {#if Icon && link.href?.startsWith('http')}<IconArrowUpRight class="ui-menu-external" size={10} stroke={1.5} aria-hidden="true" />{/if}
+            </Link>
+          {/each}
+        </nav>
+      {/if}
+      <div class="ui-mobile-menu-preferences">
+        <ThemeSelect aria-label={t('Theme')} data-variant={undefined} />
+        {#if i18n.locales.length > 1}<LanguageSelect aria-label={t('Language')} data-variant={undefined} />{/if}
+        {#if app.versions.length > 0}<DocVersionSelect aria-label={t('Version')} data-variant={undefined} />{/if}
+      </div>
     </div>
-  </dialog>
-{/if}
+  </div>
+</dialog>

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

@@ -14,13 +14,14 @@
 </script>
 
 <script lang="ts">
+  import '@master/internal-site/styles/system/sidebar.css'
+
   import Link from './Link.svelte'
   import { getSite } from '../site'
 
   /** The documentation sidebar: one navigation group per category; the page being read inks a bar on the guide. Search lives in the header. */
   let { pageCategories, includeNestedPages = false, embedded = false, onNavigate }: DocSidebarProps = $props()
   const { t, locale } = getSite()
-  const tw = locale === 'tw'
   const groups = $derived(pageCategories
     .filter((eachPageCategory: any) => eachPageCategory.name !== 'Overview')
     .map((eachPageCategory: any) => ({
@@ -56,7 +57,7 @@
 {#if embedded}
   <div class="ui-sidebar">{@render sidebarGroups()}</div>
 {:else}
-  <aside id="sidebar" aria-label={tw ? '文件導覽' : 'Documentation navigation'} class="ui-sidebar">
+  <aside id="sidebar" aria-label={t('Documentation navigation')} class="ui-sidebar">
     {@render sidebarGroups()}
   </aside>
 {/if}

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import '@master/internal-site/styles/system/fields.css'
+
   import type { HTMLSelectAttributes } from 'svelte/elements'
   import clsx from 'clsx'
   import app from 'virtual:master-site/app'

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/index.css'
 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'

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/index.css'
 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'

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

@@ -1,5 +1,7 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/callout.css'
+import '@master/internal-site/styles/system/tray.css'
+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'
 import RenderNode from '@master/internal-site/components/RenderNode.astro'

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

@@ -1,5 +1,7 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import { siteOf } from '../../astro/site-context'
+const { t } = siteOf(Astro)
+import '@master/internal-site/styles/system/table.css'
 
 interface Props {
   label?: string
@@ -12,7 +14,7 @@ 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">{label}</th><th scope="col">CSS</th></tr></thead>
+  <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>
   </tr>)}</tbody>

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

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

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

@@ -1,4 +1,6 @@
 ---
+import '@master/internal-site/styles/documents.css'
+import '@master/internal-site/styles/system/disclosure.css'
 interface Props {
   title: string
   open?: boolean

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

@@ -1,4 +1,7 @@
 ---
+import '@master/internal-site/styles/system/tray.css'
+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'
 import IconFolder from '@tabler/icons-svelte-runes/icons/folder'
 import type { DocumentFileEntry, DocumentFileTreeProps } from '@master/internal-site/components/document-types.ts'

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

@@ -1,5 +1,8 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+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-code.css'
 import type { DocumentFlowProps } from '@master/internal-site/components/document-types.ts'
 
 export type { DocumentFlowStep, DocumentFlowProps } from '@master/internal-site/components/document-types.ts'

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

@@ -1,6 +1,10 @@
 ---
+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-code.css'
 import '@master/internal-site/styles/documentation-illustration.css'
-import IconArrowsMaximize from '@tabler/icons-svelte-runes/icons/arrows-maximize'
 import Image from '@master/internal-site/components/Image.svelte'
 import type { IllustrationImages } from '../types/IllustrationImages'
 
@@ -11,23 +15,15 @@ interface Props {
   alt: string
   images: IllustrationImages
   caption: string
-  fullSize?: boolean
 }
 
 /** A static figure with one accessible image and an independent text description. */
-const { title, alt, images, caption, fullSize = false } = Astro.props
+const { title, alt, images, caption } = Astro.props
 ---
 
-<figure class="ui-tray" aria-label={title} data-illustration-expandable={fullSize || undefined}>
+<figure class="ui-tray" aria-label={title}>
   <figcaption class="ui-tray-head">
     <p class="ui-tray-title">{title}</p>
-    {fullSize && (['light', 'dark'] as const).map(scheme => <a
-      class="document-illustration-expand ui-button"
-      data-variant="quiet" data-shape="icon" data-size="sm" data-scheme={scheme}
-      href={images[scheme].src} target="_blank" rel="noopener noreferrer"
-      aria-label={`View full-size illustration: ${title} (opens in a new tab)`}
-      title="View full-size illustration (opens in a new tab)"
-    ><IconArrowsMaximize aria-hidden="true" /></a>)}
   </figcaption>
   <div class="document-illustration" role="img" aria-label={alt}>
     {(['light', 'dark'] as const).map(scheme => <Image
@@ -40,7 +36,7 @@ const { title, alt, images, caption, fullSize = false } = Astro.props
   </div>
   <p class="ui-tray-caption">{caption}</p>
   <details class="ui-disclosure" data-variant="text-description">
-    <summary>Text description</summary>
+    <summary>{t('Text description')}</summary>
     <div class="ui-disclosure-body ui-tray-caption"><slot /></div>
   </details>
 </figure>

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

@@ -1,5 +1,7 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/disclosure.css'
+import { siteOf } from '../../astro/site-context'
+const { t } = siteOf(Astro)
 
 interface Props {
   keys: string[]
@@ -11,12 +13,12 @@ const { keys, previewCount = keys.length } = Astro.props
 const lists = [keys.slice(0, previewCount), keys.slice(previewCount)]
 ---
 
-<ul aria-label="Utility keys">
+<ul aria-label={t('Utility keys')}>
   {lists[0].map(key => <li><code>{key}</code></li>)}
 </ul>
 {keys.length > previewCount && <details class="ui-disclosure">
-  <summary>Show {keys.length - previewCount} more keys</summary>
-  <ul aria-label="Utility keys">
+  <summary>{t('Show {count} more keys').replace('{count}', String(keys.length - previewCount))}</summary>
+  <ul aria-label={t('Utility keys')}>
     {lists[1].map(key => <li><code>{key}</code></li>)}
   </ul>
 </details>}

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

@@ -1,6 +1,8 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/table.css'
 import DocumentKeyList from '@master/internal-site/components/DocumentKeyList.astro'
+import { siteOf } from '../../astro/site-context'
+const { t } = siteOf(Astro)
 
 interface Props {
   rows: { namespace: string, consumers: string[] }[]
@@ -11,8 +13,8 @@ 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="Namespace consumers" tabindex="0"><table>
-  <thead><tr><th scope="col">Namespace</th><th scope="col">Consumers</th></tr></thead>
+<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>

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

@@ -1,5 +1,4 @@
 ---
-import '@master/internal-site/styles/system/data.css'
 import DocumentIdentifier from '@master/internal-site/components/DocumentIdentifier.astro'
 
 interface Props {

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/parameters.css'
 
 interface Props {
   label: string

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

@@ -1,5 +1,6 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import { siteOf } from '../../astro/site-context'
+const { t } = siteOf(Astro)
 import RenderNode from '@master/internal-site/components/RenderNode.astro'
 import DocumentOptionEntry from '@master/internal-site/components/DocumentOptionEntry.astro'
 import DocumentOptionList from '@master/internal-site/components/DocumentOptionList.astro'
@@ -17,7 +18,7 @@ const { label, options } = Astro.props
 
 <DocumentOptionList label={label}>
   {options.map(option => <DocumentOptionEntry name={option.name}>
-    {option.defaultValue !== undefined && <small>Default <code>{option.defaultValue}</code></small>}
+    {option.defaultValue !== undefined && <small>{t('Default')} <code>{option.defaultValue}</code></small>}
     <p><RenderNode node={option.description} /></p>
   </DocumentOptionEntry>)}
 </DocumentOptionList>

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

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

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

@@ -1,4 +1,6 @@
 ---
+import '@master/internal-site/styles/system/code-panel.css'
+import '@master/internal-site/styles/system/prompt.css'
 import DocumentCopyButton from '@master/internal-site/components/DocumentCopyButton.svelte'
 import type { DocumentPromptProps } from '@master/internal-site/components/document-types.ts'
 

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/parameters.css'
 import type { DocumentValueRow } from '@master/internal-site/components/document-types.ts'
 
 export type { DocumentValueRow } from '@master/internal-site/components/document-types.ts'