@master/internal-site 0.2.7 → 0.2.9

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import '@master/internal-site/styles/interface.css'
+  import '@master/internal-site/styles/interface.ts'
   import '@master/internal-site/styles/system/copy.css'
 
   import { onMount } from 'svelte'
@@ -35,7 +35,7 @@
 
 <span class="ui-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}
+    {#if result === 'success'}<IconCheck class="icon" stroke={1.8} aria-hidden="true" />{:else}<IconCopy class="icon" stroke={1.8} aria-hidden="true" />{/if}
     Copy
   </button>
   <span class="ui-copy-status" role="status" data-result={result}>

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

@@ -1,6 +1,6 @@
 ---
 import '@master/internal-site/styles/documents.css'
-import '@master/internal-site/styles/system/disclosure.css'
+import '@master/internal-site/styles/system/disclosure.ts'
 interface Props {
   title: string
   open?: boolean
@@ -10,7 +10,7 @@ interface Props {
 const { title, open = false } = Astro.props
 ---
 
-<details class="ui-disclosure" data-variant="rule" open={open}>
-  <summary>{title}</summary>
+<details class="accordion-item ui-disclosure" data-variant="rule" open={open}>
+  <summary class="accordion-trigger">{title}</summary>
   <div class="ui-disclosure-body ui-prose"><slot /></div>
 </details>

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

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/sheet.ts'
 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'
@@ -32,6 +33,6 @@ const Entries = Astro.self
   </ul>
   : <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>
+    <div class="sheet sheet-flat ui-tree"><Entries entries={props.entries} nested /></div>
     {props.caption && <p class="ui-tray-caption">{props.caption}</p>}
   </figure>}

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/stage.css'
+import '@master/internal-site/styles/system/stage.ts'
 import '@master/internal-site/styles/system/steps.css'
 import '@master/internal-site/styles/system/tray.ts'
 import '@master/internal-site/styles/system/tray-code.css'
@@ -15,7 +15,7 @@ const { title, steps, caption } = Astro.props
 
 <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">
+  <div class="sheet sheet-flat ui-stage" data-padding="sm" data-align="start">
     {/* Preserve WebKit list semantics when list-style is none. */}
     <ol class="ui-steps" role="list">
       {steps.map(step => <li>

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

@@ -1,7 +1,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/disclosure.ts'
 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'
@@ -25,7 +25,7 @@ const { title, alt, images, caption } = Astro.props
   <figcaption class="ui-tray-head">
     <p class="ui-tray-title">{title}</p>
   </figcaption>
-  <div class="document-illustration" role="img" aria-label={alt}>
+  <div class="sheet sheet-flat document-illustration" role="img" aria-label={alt}>
     {(['light', 'dark'] as const).map(scheme => <Image
       src={images[scheme]}
       data-scheme={scheme}
@@ -35,8 +35,8 @@ const { title, alt, images, caption } = Astro.props
     />)}
   </div>
   <p class="ui-tray-caption">{caption}</p>
-  <details class="ui-disclosure" data-variant="text-description">
-    <summary>{t('Text description')}</summary>
+  <details class="accordion-item ui-disclosure" data-variant="text-description">
+    <summary class="accordion-trigger">{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,5 @@
 ---
-import '@master/internal-site/styles/system/disclosure.css'
+import '@master/internal-site/styles/system/disclosure.ts'
 import { siteOf } from '../../astro/site-context'
 const { t } = siteOf(Astro)
 
@@ -16,8 +16,8 @@ const lists = [keys.slice(0, previewCount), keys.slice(previewCount)]
 <ul aria-label={t('Utility keys')}>
   {lists[0].map(key => <li><code>{key}</code></li>)}
 </ul>
-{keys.length > previewCount && <details class="ui-disclosure">
-  <summary>{t('Show {count} more keys').replace('{count}', String(keys.length - previewCount))}</summary>
+{keys.length > previewCount && <details class="accordion-item ui-disclosure">
+  <summary class="accordion-trigger">{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>

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/parameters.css'
+import '@master/internal-site/styles/system/parameters.ts'
 
 interface Props {
   label: string
@@ -8,4 +8,4 @@ interface Props {
 const { label } = Astro.props
 ---
 
-<dl class="ui-params" aria-label={label}><slot /></dl>
+<dl class="sheet sheet-flat ui-params" aria-label={label}><slot /></dl>

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/parameters.css'
+import '@master/internal-site/styles/system/parameters.ts'
 import '@master/ui/components/badge.css'
 import RenderNode from '@master/internal-site/components/RenderNode.astro'
 import DocumentIdentifier from '@master/internal-site/components/DocumentIdentifier.astro'
@@ -16,7 +16,7 @@ interface Props {
 const { label, parameters } = Astro.props
 ---
 
-<dl class="ui-params" aria-label={label}>
+<dl class="sheet sheet-flat ui-params" aria-label={label}>
   {parameters.map(parameter => <div>
     <dt>
       <span><DocumentIdentifier text={parameter.name} /></span>

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/code-panel.css'
+import '@master/internal-site/styles/system/code-panel.ts'
 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'
@@ -12,7 +12,7 @@ type Props = DocumentPromptProps
 const { title, text } = Astro.props
 ---
 
-<figure class="ui-prompt" aria-label={title}>
-  <figcaption class="ui-code-bar"><span class="ui-code-file">{title}</span><DocumentCopyButton client:idle={{ timeout: 500 }} text={text} label={title} /></figcaption>
+<figure class="code-panel ui-prompt" aria-label={title}>
+  <figcaption class="code-header ui-code-bar"><span class="code-title ui-code-file">{title}</span><DocumentCopyButton client:idle={{ timeout: 500 }} text={text} label={title} /></figcaption>
   <p class="ui-prompt-body">{text}</p>
 </figure>

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/parameters.css'
+import '@master/internal-site/styles/system/parameters.ts'
 import type { DocumentValueRow } from '@master/internal-site/components/document-types.ts'
 
 export type { DocumentValueRow } from '@master/internal-site/components/document-types.ts'
@@ -14,12 +14,12 @@ const { rows, headingLevel = 3 } = Astro.props
 const Heading = `h${headingLevel}` as const
 ---
 
-<dl class="ui-params">
+<dl class="sheet sheet-flat ui-params">
   {rows.map(row => <div>
     <dt>
       <Heading id={row.id}><a href={`#${row.id}`}>{row.title}</a></Heading>
       {row.identifier && <small>{row.identifier}</small>}
     </dt>
-    <dd>{row.values.map(({ label, value }) => <p><small>{label}</small> <code>{value}</code></p>)}</dd>
+    <dd>{row.values.map(({ label, value }) => <p><small>{label}</small> <code class="code">{value}</code></p>)}</dd>
   </div>)}
 </dl>

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

@@ -89,9 +89,9 @@
 
   <div class="documentation-index-toolbar">
     <p>{t(name === 'guide' ? 'All guides' : 'All entries')} <span class="documentation-index-count">{entries.length}</span></p>
-    <div class="ui-segmented" data-variant="underline" role="group" aria-label={t('Index view')}>
-      <button type="button" aria-pressed={!alphabetical} aria-controls={panelId('category')} onclick={() => alphabetical = false}>{t('By category')}</button>
-      <button type="button" aria-pressed={alphabetical} aria-controls={panelId('alphabetical')} onclick={() => alphabetical = true}>A–Z</button>
+    <div class="segmented segmented-sm" role="group" aria-label={t('Index view')}>
+      <button class="segmented-item" type="button" aria-pressed={!alphabetical} aria-controls={panelId('category')} onclick={() => alphabetical = false}>{t('By category')}</button>
+      <button class="segmented-item" type="button" aria-pressed={alphabetical} aria-controls={panelId('alphabetical')} onclick={() => alphabetical = true}>A–Z</button>
     </div>
   </div>
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import '@master/internal-site/styles/interface.css'
+  import '@master/internal-site/styles/interface.ts'
   import '@master/internal-site/styles/system/expand.css'
 
   import type { Snippet } from 'svelte'
@@ -18,7 +18,7 @@
   <div class="ui-expand-control">
     <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} />
+      <IconChevronDown class="icon" aria-hidden="true" stroke={1.5} />
     </button>
   </div>
 </div>

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

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/sheet.ts'
 import '@master/internal-site/styles/system/tree.css'
 import FileIcon from './FileIcon.astro'
 import FolderSvg from '../../public/icons/folder.svg'
@@ -21,7 +22,7 @@ const extOf = (name: string) => name.includes('.') ? name.split('.').pop() : ''
 ---
 
 {nested
-  ? <ul>
+  ? <ul role="list">
     {items.map((option) => {
       const ext = extOf(option.name)
       return (
@@ -35,4 +36,4 @@ const extOf = (name: string) => name.includes('.') ? name.split('.').pop() : ''
       )
     })}
   </ul>
-  : <div class="ui-tree"><Astro.self items={items} nested /></div>}
+  : <div class="sheet sheet-flat ui-tree"><Astro.self items={items} nested /></div>}

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

@@ -1,11 +1,11 @@
 ---
-import '@master/internal-site/styles/system/disclosure.css'
+import '@master/internal-site/styles/system/disclosure.ts'
 import { siteOf } from '../../astro/site-context'
 const { t } = siteOf(Astro)
 /** A closed native disclosure keeps the complete output in the server HTML. */
 ---
 
-<details class="ui-disclosure" data-generated="">
-  <summary>{t('Generated CSS')}</summary>
+<details class="accordion-item ui-disclosure" data-generated="">
+  <summary class="accordion-trigger">{t('Generated CSS')}</summary>
   <slot />
 </details>

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/inline-code.css'
+import '@master/internal-site/styles/system/inline-code.ts'
 import clsx from 'clsx'
 import { toHtml } from 'hast-util-to-html'
 import highlightCode from '../utils/highlight-code'
@@ -10,16 +10,17 @@ interface Props {
   code?: string
   lang?: string
   class?: string
+  plain?: boolean
   [key: string]: any
 }
 
 /** Highlighted inline code, drawn as a `ui-inline-code` chip. */
-const { code: source, class: className, ...props } = Astro.props
+const { code: source, class: className, plain = false, ...props } = Astro.props
 const code = source ?? await slotText(Astro.slots) ?? ''
 const hast: any = await highlightCode(code, {
   inline: true,
   ...props,
-  className: clsx('ui-inline-code', className)
+  className: clsx(!plain && 'code ui-inline-code', className)
 })
 // A single token (no spaces) is marked, so reading text can keep it whole rather than split it at a hyphen.
 const element = hast.children?.[0]

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

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

package/src/docs-shell/components/NotFound.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/pagehead.css'
 import '@master/internal-site/styles/system/search-trigger.css'
 import '../../styles/docs-shell/not-found.css'

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

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

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/disclosure.css'
+import '@master/internal-site/styles/system/disclosure.ts'
 import '../../styles/system/toc.css'
 import type { PageContentItem } from './page-content.svelte'
 import PageContentTitle from './PageContentTitle.svelte'
@@ -15,8 +15,8 @@ interface Props {
 const { items, label, labelLang } = Astro.props
 ---
 
-<details class="ui-disclosure" data-variant="rule" data-contents-disclosure="">
-  <summary lang={labelLang}>{label}</summary>
+<details class="accordion-item ui-disclosure" data-variant="rule" data-contents-disclosure="">
+  <summary class="accordion-trigger" lang={labelLang}>{label}</summary>
   <nav class="ui-toc" aria-label={label}>
     <ol>{groupPageContent(items).map(({ item, children }) => <li>
       <a href={`#${item.id}`} lang={item.lang} data-level={item.level}><PageContentTitle title={item.title} /></a>

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

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import '@master/internal-site/styles/interface.css'
-  import '@master/internal-site/styles/system/search-trigger.css'
+  import '@master/internal-site/styles/interface.ts'
 
-  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'
@@ -12,8 +11,11 @@
     children?: Snippet
   }
 
-  /** 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()
+  /** Opens the page's search dialog. Without children it renders the search label and shortcut; the caller owns its placement. */
+  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,13 +25,13 @@
   }
 </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={['btn', 'btn-quiet', 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}
     {@render children()}
   {:else}
-    <IconSearch aria-hidden="true" stroke={1.5} />
+    <IconSearch class="icon" aria-hidden="true" stroke={1.5} />
     {searchText}
     <span class="kbd" aria-hidden="true">⌘K</span>
   {/if}

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

@@ -20,8 +20,7 @@
 </script>
 
 <script lang="ts">
-  import '@master/internal-site/styles/interface.css'
-  import '@master/internal-site/styles/system/dialog.css'
+  import '@master/internal-site/styles/interface.ts'
 
   // SearchDialog loads documentation-search.css before mounting the panel.
   import { untrack } from 'svelte'
@@ -150,13 +149,13 @@
 {/snippet}
 
 {#if opened}
-  <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}
+  <dialog bind:this={dialog} {@attach portal} {@attach closeOnBackdropClick} class="dialog command ui-dialog" data-variant="search" aria-label={t('Search documentation')} oncancel={close}>
+    <div class="command-search ui-dialog-search">
+      <IconSearch class="icon" size={18} stroke={1.5} aria-hidden="true" />
+      <input class="command-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="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}
+      {#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 class="icon" 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}>
@@ -164,19 +163,21 @@
       {#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="btn btn-sm" 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 class="icon" 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}>
+      {#if query && !results.length && !error && !loading}<div class="ui-dialog-note" data-align="center"><IconSearch class="icon" 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="listbox command-list ui-results" role="listbox" aria-label={t('Search results')} aria-busy={loading}>
         {#if !error}{#each results as result, index (result.page.url)}<li role="presentation">
-          <Link id={`documentation-result-${index}`} role="option" tabindex={-1} aria-selected={selected === index} href={result.href} onclick={close} onpointermove={() => { selected = index }}>
-            <small>{t(result.page.category ?? '')} · {t(kinds[result.page.kind ?? ''] ?? (result.page.url.includes('/guide') ? 'Guide' : 'Page'))} · {t(result.reason)}</small>
+          <Link class="listbox-option" id={`documentation-result-${index}`} role="option" tabindex={-1} aria-selected={selected === index} href={result.href} onclick={close} onpointermove={() => { selected = index }}>
+            <span class="listbox-body">
+            <small class="listbox-description">{t(result.page.category ?? '')} · {t(kinds[result.page.kind ?? ''] ?? (result.page.url.includes('/guide') ? 'Guide' : 'Page'))} · {t(result.reason)}</small>
             <b>{result.page.title}</b>
-            <span>{@render excerpt(result.excerpt, query)}</span>
+            <span class="listbox-description ui-result-excerpt">{@render excerpt(result.excerpt, query)}</span>
+            </span>
           </Link>
         </li>{/each}{/if}
       </ol>
     </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>
+    <div class="command-footer ui-dialog-foot" aria-hidden="true"><span class="command-hint"><span class="kbd"><IconArrowUp class="icon" size={12} /></span><span class="kbd"><IconArrowDown class="icon" size={12} /></span>{t('Navigate')}</span><span class="command-hint"><span class="kbd"><IconCornerDownLeft class="icon" 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/Tab.astro

@@ -2,7 +2,7 @@
 import Link from './Link.svelte'
 
 /** One link of `Tabs`; it takes `Link`'s props. */
-const props = Astro.props
+const { class: className, ...props } = Astro.props
 ---
 
-<Link {...props}><slot /></Link>
+<Link {...props} class={['tabs-item', className]}><slot /></Link>

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

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/segmented.css'
+import '@master/internal-site/styles/system/tabs.ts'
 import type { HTMLAttributes } from 'astro/types'
 
 type Props = HTMLAttributes<'nav'>
@@ -8,4 +8,4 @@ type Props = HTMLAttributes<'nav'>
 const { class: className, ...props } = Astro.props
 ---
 
-<nav {...props} class:list={['ui-segmented', className]} data-variant="underline"><slot /></nav>
+<nav {...props} class:list={['tabs', className]}><slot /></nav>

package/src/docs-shell/remark/markdown-components.js

@@ -98,7 +98,7 @@ export default function remarkMarkdownComponents() {
       if (node.type === 'inlineCode') {
         const [first, ...rest] = node.value.split(' ')
         const lang = rest.length && inlineLanguages.has(first) ? first : ''
-        parent.children[index] = element('mdxJsxTextElement', 'InlineCode', { lang, code: lang ? rest.join(' ') : node.value })
+        parent.children[index] = element('mdxJsxTextElement', 'InlineCode', { lang, code: lang ? rest.join(' ') : node.value, ...(parent.type === 'heading' ? { plain: true } : {}) })
         return SKIP
       }
       if (node.type === 'paragraph') {

package/src/docs-shell/utils/documentation-search.ts

@@ -17,6 +17,16 @@ export interface DocumentationSearchResult {
 
 const normalize = (text: string) => text.normalize('NFKC').toLocaleLowerCase().trim()
 
+/** A title phrase is relevant before incidental code, without promoting fragments inside words. */
+function titleMatches(title: string, query: string) {
+  const text = normalize(title)
+  for (let at = text.indexOf(query); at !== -1; at = text.indexOf(query, at + 1)) {
+    if (!/[\p{L}\p{N}\p{M}_]$/u.test(text.slice(0, at))
+      && !/^[\p{L}\p{N}\p{M}_]/u.test(text.slice(at + query.length))) return true
+  }
+  return false
+}
+
 /** One index per loaded locale. Exact public identifiers outrank approximate prose. */
 export function createDocumentationSearch(pages: DocumentationSearchPage[]) {
   const enabled = pages.filter(page => !page.disabled)
@@ -41,7 +51,7 @@ export function createDocumentationSearch(pages: DocumentationSearchPage[]) {
     for (const page of enabled) {
       const identifier = page.identifiers?.find(item => normalize(item.text) === needle)
       const syntax = page.nodes.find(node => node.tag === 'code' && normalize(node.text).includes(needle))
-      const title = normalize(page.title) === needle
+      const title = titleMatches(page.title, needle)
       const topic = page.terms?.some(term => normalize(term) === needle)
       if (!identifier && !syntax && !title && !topic) continue
       const node = identifier ?? syntax

package/src/docs-shell/utils/highlight-code-core.ts

@@ -82,7 +82,7 @@ export function createCodeHighlighter(adapter: HighlightAdapter = {}) {
       }),
       {
         pre(element) {
-          element!.properties!.class = clsx(element!.properties!.class, options.className)
+          element!.properties!.class = clsx(element!.properties!.class, 'code-block', options.className)
           delete element!.properties!.style
         },
         code(element) {
@@ -96,7 +96,7 @@ export function createCodeHighlighter(adapter: HighlightAdapter = {}) {
               if (classes.delete(className)) line.properties.dataMark = mark
             }
             // An array: the Master CSS transformer finds lines by an exact `line` entry.
-            line.properties.class = [...classes, 'ui-code-line']
+            line.properties.class = [...classes, 'code-line', 'ui-code-line', ...(line.properties.dataMark ? ['code-line-' + (line.properties.dataMark === 'active' ? 'highlight' : line.properties.dataMark)] : [])]
           }
         },
       }

package/src/examples/components/ArticleTransitionScene.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import '@master/internal-site/styles/system/button-feedback.css'
-  import '@master/internal-site/styles/system/buttons.css'
+  import '@master/internal-site/styles/system/buttons.ts'
   import '@master/internal-site/styles/system/sheet.ts'
 
   import Image from '@master/internal-site/components/Image.svelte'
@@ -62,7 +62,7 @@
       <h1 bind:this={heading} tabindex="-1" style={`view-transition-name:article-${detail.id}-title`} class="mb(0) mt-sm text-2xl font-regular outline-solid:focus-visible outline(2):focus-visible outline-text-link:focus-visible outline-offset-4xs:focus-visible article-capture">{detail.title}</h1>
       <p class="mb(0) mt-md text-sm fg-text-muted">{detail.description} The image, title and date keep their names in both views. Each snapshot can move to its new bounds while surrounding content fades.</p>
       <button type="button" class="mt-lg btn" onclick={() => { const id = detail.id; transition.run(() => { selectedId = undefined }, () => buttons.get(id) ?? null) }}>
-        <IconArrowLeft aria-hidden="true" />Back to collection
+        <IconArrowLeft class="icon" aria-hidden="true" />Back to collection
       </button>
     </div>
   </article>
@@ -79,7 +79,7 @@
             <button {@attach cardButton(article.id)}
               type="button" class="self-start mt-auto btn" aria-label={`Read ${article.title}`}
               onclick={() => transition.run(() => { selectedId = article.id }, () => heading ?? null)}>
-              Read article<IconArrowUpRight aria-hidden="true" />
+              Read article<IconArrowUpRight class="icon" aria-hidden="true" />
             </button>
           </article>
         </DemoSurface>

package/src/styles/blog-article.css

@@ -1,6 +1,6 @@
 /*
  * Blog post pages: what is a post's own. The text itself reads with the documentation's typography
- * (`docs-shell/prose.css`, code wells in `docs-shell/code.css`) and its contents with the shared contents ruler
+ * (`docs-shell/prose.css`, code wells from the UI code component) and its contents with the shared contents ruler
  * (`ui-toc`, `docs-shell/page-content.css`); this sheet places them and draws the post's header and close.
  *
  * - The article is a framed drawing, as the homepage frames its sections (`.blog-rails`, `.blog-rails-rule` from
@@ -409,6 +409,8 @@
   .blog-article-next {
     --blog-marks-inset: 1rem;
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    overflow-wrap: anywhere;
     width: fit-content;
     max-width: min(100%, 38rem);
     color: var(--blog-article-text);

package/src/styles/demo.css

@@ -1,9 +1,6 @@
 /* Demo family: compositions the system surfaces leave to the examples. Trays, stages, browsers and specimens live in styles/system. */
 @layer components {
   /* Generated output closes the source panel: a native disclosure joined under the code window */
-  .ui-tray > .ui-disclosure { margin-top: var(--ui-inset); padding-inline: var(--ui-space-sm); border-radius: var(--ui-radius-xl); background: var(--ui-surface-code); }
-  .ui-tray > .ui-code:has(+ .ui-disclosure) { border-end-start-radius: 0; border-end-end-radius: 0; }
-  .ui-tray > .ui-code + .ui-disclosure { margin-top: 0; border-start-start-radius: 0; border-start-end-radius: 0; box-shadow: inset 0 1px 0 var(--ui-line-hair); }
   .ui-tray > .ui-disclosure > :not(summary) { margin-inline: calc(var(--ui-space-sm) * -1); }
   /* The panel's own padding is part of the summary's inset: its chevron starts where the code lines start. */
   .ui-tray > details.ui-disclosure > summary { padding-inline: calc(var(--ui-space-md) - var(--ui-space-sm)); }

package/src/styles/docs-shell/documentation-search.css

@@ -9,11 +9,8 @@
   .ui-dialog[data-variant="search"][open] { display: flex; }
   .ui-dialog[data-variant="search"] .ui-dialog-search { flex: none; }
   .ui-dialog-search > svg { flex: none; color: var(--ui-text-muted); }
-  .ui-dialog-search input { appearance: none; padding: .5rem 0; }
-  .ui-dialog-search input::placeholder { color: var(--ui-text-muted); }
-  .ui-dialog-search input::-webkit-search-cancel-button { display: none; }
+  .ui-dialog-search input { padding-block: .5rem; }
   .ui-dialog-close > span:last-child { display: none; }
-  .ui-dialog-close > .kbd { box-shadow: none; background: none; }
   .ui-dialog[data-variant="search"] > .ui-dialog-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
   .ui-dialog-status { margin: 0; padding: var(--ui-space-sm) var(--ui-space-md) 0; color: var(--ui-text-muted); @apply --ui-label-type; }
   .ui-dialog-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-xs); padding: var(--ui-space-sm) var(--ui-space-md) var(--ui-space-lg); }
@@ -24,21 +21,17 @@
   .ui-dialog-note[data-align="center"] > b { color: var(--ui-text-strong); font-size: var(--ui-text-small); font-weight: var(--ui-weight-strong); }
   .ui-results:empty { display: none; }
   .ui-results > li > a { scroll-margin-block: var(--ui-inset); }
-  .ui-results > li > a > b { overflow-wrap: anywhere; }
-  .ui-results > li > a > span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--ui-text-body); font-size: .8125rem; line-height: 1.55; overflow-wrap: anywhere; }
+  .ui-results .listbox-body > b { overflow-wrap: anywhere; }
+  .ui-results .ui-result-excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .8125rem; line-height: 1.55; overflow-wrap: anywhere; }
   .ui-results mark { background: none; color: var(--ui-text-strong); text-decoration: underline; text-decoration-color: var(--ui-line-mark); text-underline-offset: .2em; }
-  .ui-results > li > a:focus-visible { @apply --ui-focus-ring; outline-offset: -2px; }
   .ui-dialog-foot { flex: none; }
   .ui-dialog-foot > span:last-child { margin-left: auto; }
   .ui-search-shortcut { white-space: nowrap; }
   .ui-dialog-foot .kbd svg { width: 12px; height: 12px; }
+  @media (forced-colors: active) { .ui-results mark { color: inherit; text-decoration-color: currentColor; } }
   @media (width < 48rem) {
     .ui-dialog[data-variant="search"] { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
     .ui-dialog-close > .kbd, .ui-dialog-foot { display: none; }
     .ui-dialog-close > span:last-child { display: inline; }
   }
-  @media (forced-colors: active) {
-    .ui-dialog[data-variant="search"] { border: 1px solid CanvasText; }
-    .ui-results > li > a[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
-  }
 }