@master/internal-site 0.1.2 → 0.1.3

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

@@ -1,96 +1,162 @@
 <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 ? (tw ? '關閉選單' : '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} ${tw ? '首頁' : '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`}>{tw ? '網站導覽' : 'Navigation'}</h2>
+    <nav class="ui-mobile-menu-nav" aria-label={tw ? '主要導覽' : '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,6 +14,8 @@
 </script>
 
 <script lang="ts">
+  import '@master/internal-site/styles/system/sidebar.css'
+
   import Link from './Link.svelte'
   import { getSite } from '../site'
 

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,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/table.css'
 
 interface Props {
   label?: string

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,8 @@
 ---
+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 +13,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

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/disclosure.css'
 
 interface Props {
   keys: string[]

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

@@ -1,5 +1,5 @@
 ---
-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'
 
 interface Props {

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

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'

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

@@ -3,6 +3,8 @@
 </script>
 
 <script lang="ts">
+  import '@master/internal-site/styles/system/segmented.css'
+
   import '@master/internal-site/styles/documentation-index.css'
   import Link from '@master/internal-site/components/Link.svelte'
   import { getSite } from '@master/internal-site/site'

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

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import '@master/internal-site/styles/interface.css'
+  import '@master/internal-site/styles/system/expand.css'
+
   import type { Snippet } from 'svelte'
   import IconChevronDown from '@tabler/icons-svelte-runes/icons/chevron-down'
   import { getSite } from '../site'

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

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/tree.css'
 import FileIcon from './FileIcon.astro'
 import FolderSvg from '../../public/icons/folder.svg'
 

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

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/disclosure.css'
 /** A closed native disclosure keeps the complete output in the server HTML. */
 ---
 

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

@@ -12,7 +12,7 @@
 </script>
 
 <script lang="ts">
-  import '../../styles/docs-shell/header.css'
+  import '../../styles/system/header-core.css'
   import { throttle } from 'throttle-debounce'
   import { flushSync } from 'svelte'
   import clsx from 'clsx'

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

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/inline-code.css'
 import clsx from 'clsx'
 import { toHtml } from 'hast-util-to-html'
 import highlightCode from '../utils/highlight-code'

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

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/hint.css'
 import IconForms from '@tabler/icons-svelte-runes/icons/forms'
 import IconHandClick from '@tabler/icons-svelte-runes/icons/hand-click'
 import IconHandMove from '@tabler/icons-svelte-runes/icons/hand-move'

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import '@master/internal-site/styles/interface.css'
   import IconLanguage from '@tabler/icons-svelte-runes/icons/language'
   import LanguageSelect from './LanguageSelect.svelte'
   import clsx from 'clsx'

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

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

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

@@ -1,4 +1,7 @@
 ---
+import '@master/internal-site/styles/interface.css'
+import '@master/internal-site/styles/system/pagehead.css'
+import '@master/internal-site/styles/system/search-trigger.css'
 import '../../styles/docs-shell/not-found.css'
 import { siteOf } from '../../astro/site-context'
 import SearchButton from './SearchButton.svelte'

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

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/code-panel.css'
 import { resolveCommand } from 'package-manager-detector/commands'
 import CodeTabs from './CodeTabs.astro'
 import { slotText } from '../utils/slot-text'

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import '../../styles/docs-shell/page-content.css'
+  import '../../styles/system/toc.css'
   import Link from './Link.svelte'
   import app from 'virtual:master-site/app'
   import PageContentProvider from './PageContentProvider.svelte'

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

@@ -1,5 +1,6 @@
 ---
-import '../../styles/docs-shell/page-content.css'
+import '@master/internal-site/styles/system/disclosure.css'
+import '../../styles/system/toc.css'
 import type { PageContentItem } from './page-content.svelte'
 import PageContentTitle from './PageContentTitle.svelte'
 import groupPageContent from '../utils/group-page-content'

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

@@ -6,6 +6,8 @@
 </script>
 
 <script lang="ts">
+  import '@master/internal-site/styles/system/toc.css'
+
   import Link from './Link.svelte'
   import PageContentTitle from './PageContentTitle.svelte'
   import { usePageContent, type PageContentItem } from './page-content.svelte'

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

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/pager.css'
 import Link from './Link.svelte'
 import { createTranslation } from '../utils/i18n'
 

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

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

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

@@ -20,6 +20,9 @@
 </script>
 
 <script lang="ts">
+  import '@master/internal-site/styles/interface.css'
+  import '@master/internal-site/styles/system/dialog.css'
+
   import '../../styles/docs-shell/documentation-search.css'
   import { untrack } from 'svelte'
   import Link from './Link.svelte'
@@ -38,6 +41,7 @@
   const tw = locale === 'tw'
   let opened = $state(false)
   let query = $state('')
+  let shortcutModifier = $state('⌘')
   let pages = $state.raw<DocumentationSearchPage[]>([])
   let error = $state('')
   let loading = $state(false)
@@ -67,6 +71,7 @@
   }
 
   function open(event?: Event) {
+    shortcutModifier = /Mac|iPhone|iPad|iPod/.test(navigator.platform) ? '⌘' : 'Ctrl'
     const trigger = (event as CustomEvent<{ trigger?: HTMLElement }> | undefined)?.detail?.trigger
     returnFocus = trigger instanceof HTMLElement ? trigger : document.activeElement as HTMLElement
     opened = true
@@ -169,6 +174,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>{tw ? '選擇' : 'Navigate'}</span><span><span class="ui-kbd"><IconCornerDownLeft size={12} /></span>{tw ? '開啟' : 'Open'}</span><span>{tw ? '文件搜尋' : 'Documentation'}</span></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>{tw ? '選擇' : 'Navigate'}</span><span><span class="ui-kbd"><IconCornerDownLeft size={12} /></span>{tw ? '開啟' : 'Open'}</span><span class="ui-search-shortcut">{tw ? '隨時搜尋' : 'Search anytime'}<kbd class="ui-kbd">{shortcutModifier}</kbd><kbd class="ui-kbd">K</kbd></span></div>
   </dialog>
 {/if}

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import '@master/internal-site/styles/system/segmented.css'
+
   import '../../styles/docs-shell/segments.css'
   import type { Snippet } from 'svelte'
 

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

@@ -1,6 +1,5 @@
 ---
-import '../../styles/system/data.css'
-import '../../styles/docs-shell/steps.css'
+import '../../styles/system/steps.css'
 import type { HTMLAttributes } from 'astro/types'
 
 type Props = HTMLAttributes<'ol'>

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

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/segmented.css'
 import type { HTMLAttributes } from 'astro/types'
 
 type Props = HTMLAttributes<'nav'>