@noxlovette/material 0.8.3 → 0.9.1

package/dist/components/forms/search/Search.svelte

@@ -7,13 +7,16 @@ Search bars allow users to enter a query to find specific information within an
 Give it `results` and the bar opens a search view (`SearchView`) when clicked or typed in:
 full-screen on compact windows, docked from medium up, with a container transform between them.
 
+`/` anywhere on the page (outside a text field) jumps to the bar, or opens its view; `shortcut`
+changes the key, `null` turns it off.
+
 @see https://m3.material.io/components/search/specs
 -->
 <script lang="ts">
   import { search } from './theme.js';
   import clsx from 'clsx';
   import type { SearchProps } from './types.js';
-  import { Icon } from '../../../utils/index.js';
+  import { Icon, ariaKeyShortcut, isApplePlatform, triggersShortcut } from '../../../utils/index.js';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
   import SearchView from './SearchView.svelte';
 
@@ -30,6 +33,8 @@ full-screen on compact windows, docked from medium up, with a container transfor
     clearLabel = 'Clear search',
     open = $bindable(false),
     results,
+    shortcut = '/',
+    onsearch,
     layout,
     backLabel,
     resultsLabel,
@@ -44,7 +49,7 @@ full-screen on compact windows, docked from medium up, with a container transfor
 
   let bar = $state<HTMLElement>();
 
-  // With a search view, clicking the bar, typing in it or pressing ↓ opens the view. Not focus:
+  // With a search view, clicking the bar or typing in it opens the view. Not focus:
   // closing the view hands focus back here, which must not reopen it.
   const opener = $derived(
     results
@@ -58,18 +63,40 @@ full-screen on compact windows, docked from medium up, with a container transfor
           oninput: (e: Event & { currentTarget: HTMLInputElement }) => {
             restProps.oninput?.(e);
             if (!e.defaultPrevented) open = true;
-          },
-          onkeydown: (e: KeyboardEvent & { currentTarget: HTMLInputElement }) => {
-            restProps.onkeydown?.(e);
-            if (!e.defaultPrevented && e.key === 'ArrowDown') {
-              e.preventDefault();
-              open = true;
-            }
           }
         }
       : {}
   );
 
+  // ↓ opens the view; Enter searches for the query as typed.
+  function onkeydown(e: KeyboardEvent & { currentTarget: HTMLInputElement }) {
+    restProps.onkeydown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === 'ArrowDown' && results) {
+      e.preventDefault();
+      open = true;
+    } else if (e.key === 'Enter' && onsearch && value?.trim()) {
+      e.preventDefault();
+      onsearch(value);
+    }
+  }
+
+  // `Mod` resolves on the client, so SSR and the first render agree.
+  let apple = $state(false);
+  $effect(() => {
+    apple = isApplePlatform();
+  });
+
+  function onShortcut(e: KeyboardEvent) {
+    if (!triggersShortcut(e, shortcut, bar)) return;
+    e.preventDefault();
+    if (results) open = true;
+    else {
+      elementRef?.focus();
+      elementRef?.select();
+    }
+  }
+
   const showClear = $derived(!!trailingIconProps && !!value);
 
   const s = $derived(
@@ -80,6 +107,8 @@ full-screen on compact windows, docked from medium up, with a container transfor
   );
 </script>
 
+<svelte:window onkeydown={onShortcut} />
+
 <label for={id} class={s.base({ class: clsx(className) })} bind:this={bar}>
   {#if leading}
     <span class={s.leading()}>{@render leading()}</span>
@@ -89,7 +118,9 @@ full-screen on compact windows, docked from medium up, with a container transfor
   <input
     {...restProps}
     {...opener}
+    {onkeydown}
     {id}
+    aria-keyshortcuts={shortcut ? ariaKeyShortcut(shortcut, apple) : undefined}
     placeholder={placeholder ?? undefined}
     bind:this={elementRef}
     bind:value
@@ -124,5 +155,6 @@ full-screen on compact windows, docked from medium up, with a container transfor
     {resultsLabel}
     {clearLabel}
     {trailing}
+    {onsearch}
   />
 {/if}

package/dist/components/forms/search/Search.svelte.d.ts

@@ -7,6 +7,9 @@ import type { SearchProps } from './types.js';
  * Give it `results` and the bar opens a search view (`SearchView`) when clicked or typed in:
  * full-screen on compact windows, docked from medium up, with a container transform between them.
  *
+ * `/` anywhere on the page (outside a text field) jumps to the bar, or opens its view; `shortcut`
+ * changes the key, `null` turns it off.
+ *
  * @see https://m3.material.io/components/search/specs
  */
 declare const Search: import("svelte").Component<SearchProps, {}, "value" | "open" | "elementRef">;

package/dist/components/forms/search/SearchView.svelte

@@ -9,10 +9,12 @@ open a view from a bar of your own, passing that bar as `anchor`.
   from 24dp to 12dp) with results in a container 2dp below. `layout` takes one per window tier and
   defaults to full-screen on compact windows, docked from medium up. Switched in CSS.
 - **Motion.** Opening and closing are an M3 container transform between the bar and the view, on
-  the `spatial` spring; a crossfade under reduced motion.
+  the `spatial` spring; a crossfade under reduced motion. Following a result link closes it at
+  once, leaving the route change to the app's own transition.
 - **Behavior.** A bits-ui `Dialog`: focus stays in the view, the page doesn't scroll, and Esc, the
   back button or a click outside closes it. The field is a combobox over the `results` listbox:
-  arrow keys move through the `role="option"` items and Enter picks one.
+  arrow keys move through the `role="option"` items and Enter picks one. Enter with no item
+  highlighted searches for the query as typed (`onsearch`).
 
 @see https://m3.material.io/components/search/specs
 -->
@@ -39,7 +41,8 @@ open a view from a bar of your own, passing that bar as `anchor`.
     clearLabel = 'Clear search',
     trailing,
     inputProps,
-    inputRef = $bindable()
+    inputRef = $bindable(),
+    onsearch
   }: SearchViewProps = $props();
 
   const listboxId = `${uid}-listbox`;
@@ -56,11 +59,19 @@ open a view from a bar of your own, passing that bar as `anchor`.
   let shown = $state(untrack(() => open));
   let view = $state<HTMLElement>();
   let busy = false;
+  // Closing because a result link was followed: no transform, and focus doesn't go back to the bar.
+  let leaving = false;
+
+  const detached = (target: HTMLElement | string | undefined) =>
+    !target || (typeof target !== 'string' && !target.isConnected);
 
   const sync = () => {
     if (busy || open === shown) return;
     const opening = open;
-    if (opening) measure();
+    if (opening) {
+      leaving = false;
+      measure();
+    }
     const update = async () => {
       // The view takes the bar's place: hidden, the bar isn't left behind in the page's snapshot
       // (a second, static bar under the morph). Shown again first on close, so focus can return.
@@ -75,8 +86,18 @@ open a view from a bar of your own, passing that bar as `anchor`.
       busy = false;
       sync();
     };
-    if (!from || !to) update().then(settle, settle);
-    else containerTransform(update, { from, to }).then(settle, settle);
+    // Without both ends on the page (the bar unmounted by a navigation) there is nothing to morph
+    // between; a transform that can't start must still close the view, or the Dialog keeps the
+    // page locked (#51).
+    if ((leaving && !opening) || detached(from) || detached(to)) {
+      update().then(settle, settle);
+      return;
+    }
+    try {
+      containerTransform(update, { from: from!, to: to! }).then(settle, settle);
+    } catch {
+      update().then(settle, settle);
+    }
   };
 
   $effect(() => {
@@ -167,6 +188,9 @@ open a view from a bar of your own, passing that bar as `anchor`.
     } else if (e.key === 'Enter' && active?.isConnected) {
       e.preventDefault();
       active.click();
+    } else if (e.key === 'Enter' && onsearch && value?.trim()) {
+      e.preventDefault();
+      onsearch(value);
     }
   }
 
@@ -180,10 +204,37 @@ open a view from a bar of your own, passing that bar as `anchor`.
   // Back to the bar's field. The bar opens on click or typing, never on focus, so this is safe.
   function focusBar(e: Event) {
     e.preventDefault();
+    // Following a result: the page is changing, and focusing a field would raise the keyboard.
+    if (leaving) {
+      leaving = false;
+      return;
+    }
     const field = anchor instanceof HTMLInputElement ? anchor : anchor?.querySelector('input');
     field?.focus();
   }
 
+  /*
+    Picking a result that is a link navigates away, so the view closes at once instead of morphing
+    back into a bar that's about to leave. A morph there would run alongside the route's own view
+    transition and, if the bar's page unmounts, never finish (#51). The click still reaches the
+    link, since the view unmounts only after this event. New-tab and download clicks keep it open.
+  */
+  $effect(() => {
+    const el = resultsEl;
+    if (!el) return;
+    const onclick = (e: MouseEvent) => {
+      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+        return;
+      const link = (e.target as Element | null)?.closest?.('a[href]');
+      if (!(link instanceof HTMLAnchorElement) || !el.contains(link)) return;
+      if ((link.target && link.target !== '_self') || link.hasAttribute('download')) return;
+      leaving = true;
+      open = false;
+    };
+    el.addEventListener('click', onclick);
+    return () => el.removeEventListener('click', onclick);
+  });
+
   function clear() {
     value = '';
     inputRef?.focus();

package/dist/components/forms/search/SearchView.svelte.d.ts

@@ -9,10 +9,12 @@ import type { SearchViewProps } from './types.js';
  * from 24dp to 12dp) with results in a container 2dp below. `layout` takes one per window tier and
  * defaults to full-screen on compact windows, docked from medium up. Switched in CSS.
  * - **Motion.** Opening and closing are an M3 container transform between the bar and the view, on
- * the `spatial` spring; a crossfade under reduced motion.
+ * the `spatial` spring; a crossfade under reduced motion. Following a result link closes it at
+ * once, leaving the route change to the app's own transition.
  * - **Behavior.** A bits-ui `Dialog`: focus stays in the view, the page doesn't scroll, and Esc, the
  * back button or a click outside closes it. The field is a combobox over the `results` listbox:
- * arrow keys move through the `role="option"` items and Enter picks one.
+ * arrow keys move through the `role="option"` items and Enter picks one. Enter with no item
+ * highlighted searches for the query as typed (`onsearch`).
  *
  * @see https://m3.material.io/components/search/specs
  */

package/dist/components/forms/search/theme.js

@@ -35,8 +35,10 @@ export const searchView = tv({
         input: 'md-sys-typescale-body-large text-md-sys-color-on-surface placeholder:text-md-sys-color-on-surface-variant ms-spacing-50 me-spacing-50 w-full min-w-spacing-0 bg-transparent outline-none [&::-webkit-search-cancel-button]:hidden',
         trailing: 'text-md-sys-color-on-surface-variant flex shrink-0 items-center',
         // Options sit on the view's container colour, not the list's own surface. The one the arrow
-        // keys are on gets the M3 focus indicator, drawn inside the item.
-        results: 'min-h-spacing-0 overflow-y-auto overscroll-contain [&_[role=option]:not([aria-disabled=true])]:bg-transparent [&_[data-highlighted]]:outline-3 [&_[data-highlighted]]:-outline-offset-3 [&_[data-highlighted]]:outline-md-sys-color-secondary'
+        // keys are on gets the M3 focus indicator, drawn inside the item, and a focused item's shape.
+        // `outline-solid` is load-bearing: ListItem's `outline-none` sets --tw-outline-style to none,
+        // which `outline-3` reads, so without it the ring has a width and colour but no style.
+        results: 'min-h-spacing-0 overflow-y-auto overscroll-contain [&_[role=option]:not([aria-disabled=true])]:bg-transparent [&_[data-highlighted]]:outline-solid [&_[data-highlighted]]:outline-3 [&_[data-highlighted]]:-outline-offset-3 [&_[data-highlighted]]:outline-md-sys-color-secondary [&_[data-highlighted]]:[--li-shape:1rem]'
     },
     variants: {
         hasTrailing: { true: '', false: { input: 'me-spacing-150' } }

package/dist/components/forms/search/types.d.ts

@@ -1,4 +1,4 @@
-import type { IconProps } from '../../../utils/index.js';
+import type { IconProps, Shortcut } from '../../../utils/index.js';
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { Responsive } from '../../containers/pane/theme.js';
@@ -42,6 +42,12 @@ export interface SearchViewOptions {
     backLabel?: string;
     /** Accessible name of the search view and its suggestion list. Defaults to the placeholder. */
     resultsLabel?: string;
+    /**
+     * Called with the query when it's submitted: Enter in the bar, or Enter in the search view
+     * with no suggestion highlighted. Not called for an empty query. The view stays open; set
+     * `open` to false to close it, e.g. when navigating to a results page.
+     */
+    onsearch?: (query: string) => void;
 }
 /**
  * Props for the SearchView component.
@@ -110,4 +116,11 @@ export interface SearchProps extends Omit<HTMLInputAttributes, 'size' | 'results
      * Accessible label for the clear button.
      */
     clearLabel?: string;
+    /**
+     * Page-wide key that focuses the bar, or opens its search view when it has `results`. A key
+     * without ⌘/Ctrl/Alt doesn't fire while typing in a field. With several bars on a page, the
+     * first one mounted takes it. `null` turns it off.
+     * @default '/'
+     */
+    shortcut?: Shortcut | null;
 }

package/dist/components/forms/slider/theme.js

@@ -23,7 +23,7 @@ export const slider = tv({
         iconOnInactive: 'text-md-sys-color-on-secondary-container',
         handle: `
       absolute rounded-full bg-md-sys-color-primary outline-none
-      focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-md-sys-color-secondary
+      focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-md-sys-color-secondary
       group-data-[disabled]:bg-md-sys-color-on-surface/38
     `,
         value: `

package/dist/components/nav/appbar/AppBar.stories.svelte

@@ -36,6 +36,7 @@
   const products = ['Headphones', 'Keyboard', 'Laptop stand', 'Monitor', 'Mouse', 'Webcam'];
   let query = $state('');
   let searchOpen = $state(false);
+  let searched = $state('');
   const found = $derived(products.filter((p) => p.toLowerCase().includes(query.toLowerCase())));
 </script>
 
@@ -132,13 +133,26 @@
   </AppBar>
 </Story>
 
-<!-- Selecting the search field opens the search view: full-screen here, docked from medium up. -->
+<!--
+  Selecting the search field (or / anywhere) opens the search view: full-screen here, docked from
+  medium up. Enter with no suggestion highlighted searches for what was typed (onsearch).
+-->
 <Story
   name="Search view"
   asChild
   parameters={{ docs: { story: { inline: false, height: '560px' } } }}
 >
-  <AppBar search="Search products" title="Products" bind:query bind:searchOpen ghost>
+  <AppBar
+    search="Search products"
+    title="Products"
+    bind:query
+    bind:searchOpen
+    ghost
+    onsearch={(q) => {
+      searched = q;
+      searchOpen = false;
+    }}
+  >
     {#snippet leading()}
       <ButtonIcon variant="standard" iconProps={{ name: 'menu' }} aria-label="Menu" />
     {/snippet}
@@ -146,6 +160,14 @@
       <ButtonIcon variant="standard" iconProps={{ name: 'mic' }} aria-label="Voice search" />
     {/snippet}
     {#snippet searchResults(listbox)}
+      {#if !found.length}
+        <p
+          class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant p-spacing-200"
+          role="status"
+        >
+          No products match “{query}”. Press Enter to search anyway.
+        </p>
+      {/if}
       <List {...listbox}>
         {#each found as product (product)}
           <ListItem
@@ -154,6 +176,7 @@
             headline={product}
             onclick={() => {
               query = product;
+              searched = product;
               searchOpen = false;
             }}
           />
@@ -161,6 +184,11 @@
       </List>
     {/snippet}
   </AppBar>
+  <p
+    class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant pt-spacing-900 ps-spacing-200"
+  >
+    {searched ? `Searched for “${searched}”` : 'Nothing searched yet'}
+  </p>
 </Story>
 
 <Story name="Scroll container" asChild>

package/dist/components/nav/appbar/AppBar.svelte

@@ -30,6 +30,7 @@ A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
   import { setButtonIconVariant } from '../../buttons/context.js';
   import SearchView from '../../forms/search/SearchView.svelte';
+  import { ariaKeyShortcut, isApplePlatform, triggersShortcut } from '../../../utils/index.js';
 
   let {
     children,
@@ -52,6 +53,8 @@ A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
     searchResults,
     searchOpen = $bindable(false),
     searchLayout,
+    searchShortcut = '/',
+    onsearch,
     scrollContainer,
     ghost = false,
     ...rest
@@ -77,7 +80,25 @@ A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
 
   let searchBar = $state<HTMLElement>();
 
-  // Same as Search: click, typing or ↓ opens the view; focus alone doesn't.
+  // Same as Search: `/` jumps to the field, or opens the view.
+  let apple = $state(false);
+  $effect(() => {
+    apple = isApplePlatform();
+  });
+  const shortcut = $derived(isSearch ? searchShortcut : null);
+
+  function onShortcut(e: KeyboardEvent) {
+    if (!triggersShortcut(e, shortcut, searchBar)) return;
+    e.preventDefault();
+    if (searchResults) searchOpen = true;
+    else {
+      const field = searchBar?.querySelector('input');
+      field?.focus();
+      field?.select();
+    }
+  }
+
+  // Same as Search: click or typing opens the view; focus alone doesn't.
   const opener = $derived(
     searchResults
       ? {
@@ -90,17 +111,23 @@ A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
           oninput: (e: Event & { currentTarget: HTMLInputElement }) => {
             searchProps?.oninput?.(e);
             if (!e.defaultPrevented) searchOpen = true;
-          },
-          onkeydown: (e: KeyboardEvent & { currentTarget: HTMLInputElement }) => {
-            searchProps?.onkeydown?.(e);
-            if (!e.defaultPrevented && e.key === 'ArrowDown') {
-              e.preventDefault();
-              searchOpen = true;
-            }
           }
         }
       : {}
   );
+
+  // ↓ opens the view; Enter searches for the query as typed.
+  function onSearchKeydown(e: KeyboardEvent & { currentTarget: HTMLInputElement }) {
+    searchProps?.onkeydown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === 'ArrowDown' && searchResults) {
+      e.preventDefault();
+      searchOpen = true;
+    } else if (e.key === 'Enter' && onsearch && query?.trim()) {
+      e.preventDefault();
+      onsearch(query);
+    }
+  }
   const noLeading = $derived(!leading && !showBack);
 
   const s = $derived(
@@ -131,6 +158,8 @@ A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
   });
 </script>
 
+<svelte:window onkeydown={onShortcut} />
+
 <nav {...rest} class={s.base({ class: clsx(className) })} {@attach trackHeight}>
   <div class={s.row({ class: clsx(sized.row, rowClass) })}>
     <div class={s.leading()}>
@@ -155,7 +184,9 @@ A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
             type="search"
             {...searchProps}
             {...opener}
+            onkeydown={onSearchKeydown}
             placeholder={search}
+            aria-keyshortcuts={shortcut ? ariaKeyShortcut(shortcut, apple) : undefined}
             aria-label={searchProps?.['aria-label'] ?? search}
             bind:value={query}
             class={s.searchInput({ class: clsx(searchProps?.class) })}
@@ -198,6 +229,7 @@ A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
     layout={searchLayout}
     placeholder={search}
     trailing={searchTrailing}
+    {onsearch}
   />
 {/if}
 

package/dist/components/nav/appbar/theme.js

@@ -122,7 +122,7 @@ export function appbarSize(size, hasSubtitle) {
 export const appbar = tv({
     slots: {
         // Starts beside a viewport-anchored Rail (styles/components.css), which runs full height.
-        base: 'fixed top-spacing-0 left-(--md-rail-inset) right-spacing-0 flex flex-col z-layer-bar transition-colors md-sys-motion-effects',
+        base: 'md-vt-persist fixed top-spacing-0 left-(--md-rail-inset) right-spacing-0 flex flex-col z-layer-bar transition-colors md-sys-motion-effects',
         row: 'grid w-full items-center px-spacing-50',
         childrenRow: 'w-full px-spacing-100 pb-spacing-100',
         ghost: 'w-full shrink-0 pointer-events-none',

package/dist/components/nav/appbar/types.d.ts

@@ -1,3 +1,4 @@
+import type { Shortcut } from '../../../utils/index.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 import type { Responsive } from '../../containers/pane/theme.js';
@@ -47,6 +48,8 @@ export type TitleAppBarProps = AppBarBaseProps & {
     searchResults?: never;
     searchOpen?: never;
     searchLayout?: never;
+    searchShortcut?: never;
+    onsearch?: never;
 };
 /** A search app bar: a search field in place of the title, always 64dp. */
 export type SearchAppBarProps = AppBarBaseProps & {
@@ -73,6 +76,17 @@ export type SearchAppBarProps = AppBarBaseProps & {
      * @default { small: 'fullScreen', medium: 'docked' }
      */
     searchLayout?: Responsive<SearchLayout>;
+    /**
+     * Page-wide key that focuses the field, or opens the search view with `searchResults`. See
+     * `Search`'s `shortcut`. `null` turns it off.
+     * @default '/'
+     */
+    searchShortcut?: Shortcut | null;
+    /**
+     * Called with the query when it's submitted: Enter in the field, or Enter in the search view
+     * with no suggestion highlighted. See `Search`'s `onsearch`.
+     */
+    onsearch?: (query: string) => void;
     size?: never;
 };
 /**

package/dist/components/nav/navbar/theme.js

@@ -1,7 +1,7 @@
 import { tv } from '../../../utils/tv.js';
 export const navbar = tv({
     slots: {
-        base: 'shadow-elevation-2 bg-md-sys-color-surface-container z-layer-bar flex h-20 fixed bottom-spacing-0 w-full left-spacing-0 justify-around py-spacing-150 md:hidden',
+        base: 'md-vt-persist shadow-elevation-2 bg-md-sys-color-surface-container z-layer-bar flex h-20 fixed bottom-spacing-0 w-full left-spacing-0 justify-around py-spacing-150 md:hidden',
         items: 'flex justify-around w-full',
         fab: 'bottom-24 right-spacing-200 absolute',
         ghost: 'h-20 w-full shrink-0 md:hidden pointer-events-none'

package/dist/components/nav/rail/Rail.mdx

@@ -113,3 +113,9 @@ uses `ps-(--md-rail-inset)` / `left-(--md-rail-inset)`.
 - **Keyboard.** Every item is a link reachable with Tab; the focus ring goes around the
   indicator. The menu toggle is a real button with `aria-expanded`, and Escape closes the modal
   rail.
+- **Destination shortcuts.** ⌘1–⌘9 (Ctrl+1–9 off Apple platforms) go to the first nine
+  destinations, exactly as clicking them would; each link carries `aria-keyshortcuts`. A disabled
+  destination keeps its number and does nothing. `shortcutModifier` changes the modifier
+  (`'Alt'`, `'Alt+Shift'`…), `null` turns them off. The Windows/Super key isn't offered: the OS
+  owns Win+1–9. In a normal browser tab, ⌘/Ctrl+1–9 may also be the browser's own tab switch, which a page can't
+  always override; they're dependable in an installed PWA or a desktop shell (Tauri, Electron).

package/dist/components/nav/rail/Rail.svelte

@@ -8,6 +8,9 @@ the content aside (standard); on medium windows it opens over it, above a scrim
 closes on a scrim click, Escape, or picking a destination. Below `md` it's hidden: mount a
 `Navbar` for small windows.
 
+⌘1–⌘9 (Ctrl+1–9 off Apple platforms) go to the first nine destinations; `shortcutModifier`
+changes the modifier, `null` turns them off.
+
 @see https://m3.material.io/components/navigation-rail/specs
 -->
 <script lang="ts">
@@ -20,6 +23,12 @@ closes on a scrim click, Escape, or picking a destination. Below `md` it's hidde
   import { rail } from './theme';
   import { NavigationMenu } from 'bits-ui';
   import { railStore } from './railStore.svelte.js';
+  import {
+    ariaKeyShortcut,
+    isApplePlatform,
+    matchesShortcut,
+    triggersShortcut
+  } from '../../../utils/index.js';
 
   let {
     children,
@@ -31,6 +40,7 @@ closes on a scrim click, Escape, or picking a destination. Below `md` it's hidde
     railTop = 0,
     expandLabel = 'Expand navigation',
     collapseLabel = 'Collapse navigation',
+    shortcutModifier = 'Mod',
     class: className,
     showHelp: _showHelp,
     withNavbar: _withNavbar,
@@ -155,9 +165,48 @@ closes on a scrim click, Escape, or picking a destination. Below `md` it's hidde
   function onKeydown(event: KeyboardEvent) {
     if (event.key === 'Escape' && expanded && isModal()) {
       collapsed = true;
+      return;
     }
+    goToDestination(event);
+  }
+
+  /*
+    Destination shortcuts: modifier+N clicks the Nth link, so it navigates exactly as a click
+    does (SvelteKit's router, a consumer's onclick, closing the modal rail). A disabled
+    destination keeps its number and does nothing.
+  */
+  let navEl = $state<HTMLElement | null>(null);
+  const destinations = () => [...(navEl?.querySelectorAll<HTMLAnchorElement>('a') ?? [])];
+
+  function goToDestination(event: KeyboardEvent) {
+    if (!shortcutModifier || !/^Digit[1-9]$/.test(event.code)) return;
+    const n = Number(event.code.slice(-1));
+    const shortcut = `${shortcutModifier}+${n}`;
+    if (!matchesShortcut(event, shortcut) || !triggersShortcut(event, shortcut, railEl)) return;
+    const link = destinations()[n - 1];
+    if (!link) return;
+    event.preventDefault();
+    if (link.getAttribute('aria-disabled') !== 'true') link.click();
   }
 
+  // Advertise each destination's shortcut; kept in step as destinations come and go.
+  $effect(() => {
+    const nav = navEl;
+    const modifier = shortcutModifier;
+    if (!nav) return;
+    const apple = isApplePlatform();
+    const label = () =>
+      destinations().forEach((a, i) => {
+        if (modifier && i < 9)
+          a.setAttribute('aria-keyshortcuts', ariaKeyShortcut(`${modifier}+${i + 1}`, apple));
+        else a.removeAttribute('aria-keyshortcuts');
+      });
+    label();
+    const observer = new MutationObserver(label);
+    observer.observe(nav, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  });
+
   // Picking a destination closes the modal rail; the standard one stays as it is.
   function onNavClick(event: MouseEvent) {
     if (expanded && isModal() && (event.target as Element).closest('a[href]')) {
@@ -212,7 +261,12 @@ closes on a scrim click, Escape, or picking a destination. Below `md` it's hidde
   {/if}
 
   <!-- The click is delegated from the links inside; Enter on a link fires it too. -->
-  <NavigationMenu.Root orientation="vertical" class={styles.nav()} onclick={onNavClick}>
+  <NavigationMenu.Root
+    bind:ref={navEl}
+    orientation="vertical"
+    class={styles.nav()}
+    onclick={onNavClick}
+  >
     <NavigationMenu.List class={styles.items()}>
       {@render children?.()}
     </NavigationMenu.List>

package/dist/components/nav/rail/Rail.svelte.d.ts

@@ -8,6 +8,9 @@ import type { RailProps } from './types';
  * closes on a scrim click, Escape, or picking a destination. Below `md` it's hidden: mount a
  * `Navbar` for small windows.
  *
+ * ⌘1–⌘9 (Ctrl+1–9 off Apple platforms) go to the first nine destinations; `shortcutModifier`
+ * changes the modifier, `null` turns them off.
+ *
  * @see https://m3.material.io/components/navigation-rail/specs
  */
 declare const Rail: import("svelte").Component<RailProps, {}, "collapsed">;

package/dist/components/nav/rail/theme.js

@@ -34,7 +34,7 @@ export const rail = tv({
     variants: {
         anchor: {
             viewport: {
-                base: 'fixed top-[var(--rail-top,0px)] bottom-spacing-0 left-spacing-0',
+                base: 'md-vt-persist fixed top-[var(--rail-top,0px)] bottom-spacing-0 left-spacing-0',
                 scrim: 'fixed'
             },
             parent: {

package/dist/components/nav/rail/types.d.ts

@@ -45,6 +45,13 @@ export type RailProps = RailVariants & HTMLAttributes<HTMLDivElement> & {
     expandLabel?: string;
     /** Tooltip and accessible name of the toggle while expanded. Default 'Collapse navigation'. */
     collapseLabel?: string;
+    /**
+     * Modifier for the destination shortcuts: it plus 1–9 goes to the Nth destination. `Mod` is
+     * ⌘ on Apple platforms and Ctrl elsewhere; combine with `+`, e.g. `'Alt+Shift'`. The Windows
+     * and Super keys belong to the OS there, so they aren't used. `null` turns them off.
+     * @default 'Mod'
+     */
+    shortcutModifier?: string | null;
     /**
      * @deprecated No effect: Rail no longer renders a navigation bar below `md`. Mount a `Navbar`
      * next to it for small windows.