@master/internal-site 0.2.7 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@master/internal-site",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "type": "module",
   "description": "First-party Astro and Svelte website framework for Master sites.",
   "engines": {

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

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

package/src/docs-shell/components/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}