@noxlovette/material 0.8.3 → 0.9.0

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

@@ -12,7 +12,8 @@ import type { SearchViewProps } from './types.js';
  * the `spatial` spring; a crossfade under reduced motion.
  * - **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/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/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/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.

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './icon/index.js';
+export * from './shortcut.js';
 export * from './theme.svelte.js';
 export * from './types.js';
 export * from './ui.js';

package/dist/utils/index.js

@@ -1,4 +1,5 @@
 export * from './icon/index.js';
+export * from './shortcut.js';
 export * from './theme.svelte.js';
 export * from './types.js';
 export * from './ui.js';

package/dist/utils/shortcut.d.ts

@@ -0,0 +1,26 @@
+/**
+ * A keyboard shortcut, written as `aria-keyshortcuts` writes one: modifiers, then the key, joined
+ * by `+`. `'/'`, `'Mod+K'`, `'Alt+Shift+P'`. `Mod` is ⌘ on Apple platforms and Ctrl elsewhere,
+ * the key each platform's apps use for their own shortcuts.
+ */
+export type Shortcut = string;
+/** Whether this is an Apple platform, where `Mod` is ⌘. False during SSR. */
+export declare function isApplePlatform(): boolean;
+/**
+ * Whether a keydown is this shortcut. Modifiers must match exactly. Digits match by physical key,
+ * since Alt+1 types `¡` on a Mac; letters match by the character typed, falling back to the
+ * physical key on non-Latin layouts, so ⌘K still works with a Cyrillic layout on.
+ */
+export declare function matchesShortcut(e: KeyboardEvent, shortcut: Shortcut, apple?: boolean): boolean;
+/** Whether a keydown's target takes text, where a bare `/` is typing, not a shortcut. */
+export declare function isEditableTarget(target: EventTarget | null): boolean;
+/**
+ * Whether a page-wide shortcut should fire for this keydown: it matches, nothing handled the key
+ * first, no IME is composing, a shortcut without ⌘/Ctrl/Alt isn't being typed into a field, and
+ * no modal dialog other than the one holding `owner` is open.
+ */
+export declare function triggersShortcut(e: KeyboardEvent, shortcut: Shortcut | null | undefined, owner?: Element | null): boolean;
+/** The shortcut for `aria-keyshortcuts`, with `Mod` resolved for this platform. */
+export declare function ariaKeyShortcut(shortcut: Shortcut, apple?: boolean): string;
+/** The shortcut as people read it on this platform: `⌘K` on a Mac, `Ctrl+K` elsewhere. */
+export declare function shortcutLabel(shortcut: Shortcut, apple?: boolean): string;

package/dist/utils/shortcut.js

@@ -0,0 +1,84 @@
+/** Whether this is an Apple platform, where `Mod` is ⌘. False during SSR. */
+export function isApplePlatform() {
+    if (typeof navigator === 'undefined')
+        return false;
+    const platform = navigator.userAgentData?.platform ??
+        navigator.platform;
+    return /mac|iphone|ipad|ipod/i.test(platform ?? '');
+}
+function parse(shortcut, apple) {
+    const parts = shortcut.split('+');
+    const key = parts.pop() ?? '';
+    const modifiers = new Set(parts.map((m) => (m === 'Mod' ? (apple ? 'Meta' : 'Control') : m)));
+    return { key, modifiers };
+}
+/**
+ * Whether a keydown is this shortcut. Modifiers must match exactly. Digits match by physical key,
+ * since Alt+1 types `¡` on a Mac; letters match by the character typed, falling back to the
+ * physical key on non-Latin layouts, so ⌘K still works with a Cyrillic layout on.
+ */
+export function matchesShortcut(e, shortcut, apple = isApplePlatform()) {
+    const { key, modifiers } = parse(shortcut, apple);
+    if (e.metaKey !== modifiers.has('Meta') ||
+        e.ctrlKey !== modifiers.has('Control') ||
+        e.altKey !== modifiers.has('Alt'))
+        return false;
+    const alphanumeric = /^[a-z0-9]$/i.test(key);
+    // Shift is part of typing a symbol like `?`, so it's only checked for letters and digits.
+    if (modifiers.has('Shift') ? !e.shiftKey : alphanumeric && e.shiftKey)
+        return false;
+    if (/^[0-9]$/.test(key))
+        return e.code === `Digit${key}` || e.code === `Numpad${key}`;
+    if (/^[a-z]$/i.test(key)) {
+        return /^[a-z]$/i.test(e.key)
+            ? e.key.toLowerCase() === key.toLowerCase()
+            : e.code === `Key${key.toUpperCase()}`;
+    }
+    return e.key === key;
+}
+/** Whether a keydown's target takes text, where a bare `/` is typing, not a shortcut. */
+export function isEditableTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable || target instanceof HTMLTextAreaElement)
+        return true;
+    if (target instanceof HTMLSelectElement)
+        return true;
+    return (target instanceof HTMLInputElement &&
+        !/^(button|checkbox|color|file|hidden|image|radio|range|reset|submit)$/.test(target.type));
+}
+/**
+ * Whether a page-wide shortcut should fire for this keydown: it matches, nothing handled the key
+ * first, no IME is composing, a shortcut without ⌘/Ctrl/Alt isn't being typed into a field, and
+ * no modal dialog other than the one holding `owner` is open.
+ */
+export function triggersShortcut(e, shortcut, owner) {
+    if (!shortcut || e.defaultPrevented || e.isComposing || e.repeat)
+        return false;
+    if (!matchesShortcut(e, shortcut))
+        return false;
+    if (!/(^|\+)(Mod|Meta|Control|Alt)\+/.test(shortcut) && isEditableTarget(e.target))
+        return false;
+    const modal = document.querySelector('[aria-modal="true"]');
+    return !modal || (!!owner && modal.contains(owner));
+}
+/** The shortcut for `aria-keyshortcuts`, with `Mod` resolved for this platform. */
+export function ariaKeyShortcut(shortcut, apple = isApplePlatform()) {
+    const { key, modifiers } = parse(shortcut, apple);
+    return [...modifiers, key.length === 1 ? key.toUpperCase() : key].join('+');
+}
+const SYMBOLS = { Meta: '⌘', Control: '⌃', Alt: '⌥', Shift: '⇧' };
+const NAMES = {
+    Meta: 'Win',
+    Control: 'Ctrl',
+    Alt: 'Alt',
+    Shift: 'Shift'
+};
+/** The shortcut as people read it on this platform: `⌘K` on a Mac, `Ctrl+K` elsewhere. */
+export function shortcutLabel(shortcut, apple = isApplePlatform()) {
+    const { key, modifiers } = parse(shortcut, apple);
+    const k = key.length === 1 ? key.toUpperCase() : key;
+    return apple
+        ? [...modifiers].map((m) => SYMBOLS[m]).join('') + k
+        : [...[...modifiers].map((m) => NAMES[m]), k].join('+');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "type": "module",
   "description": "A Material Design 3 component library for Svelte, built on Bits UI.",
   "keywords": [