@noxlovette/material 0.8.3 → 0.9.0

package/dist/components/forms/command/theme.d.ts

@@ -3,7 +3,6 @@ export type CommandVariants = VariantProps<typeof command>;
 export declare const command: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            item?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             input?: import("tailwind-variants").ClassValue;
             group?: import("tailwind-variants").ClassValue;
@@ -18,7 +17,6 @@ export declare const command: import("tailwind-variants").TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
-            item?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             input?: import("tailwind-variants").ClassValue;
             group?: import("tailwind-variants").ClassValue;
@@ -39,12 +37,10 @@ export declare const command: import("tailwind-variants").TVReturnType<{
     empty: string;
     group: string;
     separator: string;
-    item: string;
     itemIcon: string;
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            item?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             input?: import("tailwind-variants").ClassValue;
             group?: import("tailwind-variants").ClassValue;
@@ -65,7 +61,6 @@ export declare const command: import("tailwind-variants").TVReturnType<{
     empty: string;
     group: string;
     separator: string;
-    item: string;
     itemIcon: string;
 }, import("tailwind-variants").TVReturnTypeLike<unknown, {
     base: string;
@@ -76,6 +71,376 @@ export declare const command: import("tailwind-variants").TVReturnType<{
     empty: string;
     group: string;
     separator: string;
-    item: string;
     itemIcon: string;
 }>>;
+export declare const commandItem: import("tailwind-variants").TVReturnType<{
+    variant: {
+        standard: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
+    lines: {
+        1: {
+            base: string;
+        };
+        2: {
+            base: string;
+        };
+        3: {
+            base: string;
+            leading: string;
+            trailing: string;
+        };
+    };
+    variant: {
+        standard: {
+            base: string;
+            nested: string;
+        };
+        segmented: {
+            base: string;
+            nested: string;
+        };
+    };
+    interactive: {
+        true: {
+            base: string[];
+        };
+        false: "";
+    };
+    selected: {
+        true: {
+            base: string;
+            leading: string;
+            overline: string;
+            headline: string;
+            supporting: string;
+            trailing: string;
+            trailingText: string;
+        };
+        false: "";
+    };
+    disabled: {
+        true: {
+            base: string;
+            leading: string;
+            overline: string;
+            headline: string;
+            supporting: string;
+            trailing: string;
+            trailingText: string;
+        };
+        false: "";
+    };
+    expanded: {
+        true: {
+            base: string;
+            expandIcon: string;
+            region: string;
+            nested: string;
+        };
+        false: {
+            expandIcon: string;
+            region: string;
+        };
+    };
+}, {
+    base: string[];
+    selection: string;
+    leading: string;
+    body: string;
+    overline: string;
+    headline: string;
+    supporting: string;
+    trailing: string;
+    trailingText: string;
+    expandIcon: string;
+    group: string;
+    region: string;
+    regionInner: string;
+    nested: string;
+}, import("tailwind-variants").TVReturnType<{
+    lines: {
+        1: {
+            base: string;
+        };
+        2: {
+            base: string;
+        };
+        3: {
+            base: string;
+            leading: string;
+            trailing: string;
+        };
+    };
+    variant: {
+        standard: {
+            base: string;
+            nested: string;
+        };
+        segmented: {
+            base: string;
+            nested: string;
+        };
+    };
+    interactive: {
+        true: {
+            base: string[];
+        };
+        false: "";
+    };
+    selected: {
+        true: {
+            base: string;
+            leading: string;
+            overline: string;
+            headline: string;
+            supporting: string;
+            trailing: string;
+            trailingText: string;
+        };
+        false: "";
+    };
+    disabled: {
+        true: {
+            base: string;
+            leading: string;
+            overline: string;
+            headline: string;
+            supporting: string;
+            trailing: string;
+            trailingText: string;
+        };
+        false: "";
+    };
+    expanded: {
+        true: {
+            base: string;
+            expandIcon: string;
+            region: string;
+            nested: string;
+        };
+        false: {
+            expandIcon: string;
+            region: string;
+        };
+    };
+}, {
+    base: string[];
+    selection: string;
+    leading: string;
+    body: string;
+    overline: string;
+    headline: string;
+    supporting: string;
+    trailing: string;
+    trailingText: string;
+    expandIcon: string;
+    group: string;
+    region: string;
+    regionInner: string;
+    nested: string;
+}, undefined, {
+    lines: {
+        1: {
+            base: string;
+        };
+        2: {
+            base: string;
+        };
+        3: {
+            base: string;
+            leading: string;
+            trailing: string;
+        };
+    };
+    variant: {
+        standard: {
+            base: string;
+            nested: string;
+        };
+        segmented: {
+            base: string;
+            nested: string;
+        };
+    };
+    interactive: {
+        true: {
+            base: string[];
+        };
+        false: "";
+    };
+    selected: {
+        true: {
+            base: string;
+            leading: string;
+            overline: string;
+            headline: string;
+            supporting: string;
+            trailing: string;
+            trailingText: string;
+        };
+        false: "";
+    };
+    disabled: {
+        true: {
+            base: string;
+            leading: string;
+            overline: string;
+            headline: string;
+            supporting: string;
+            trailing: string;
+            trailingText: string;
+        };
+        false: "";
+    };
+    expanded: {
+        true: {
+            base: string;
+            expandIcon: string;
+            region: string;
+            nested: string;
+        };
+        false: {
+            expandIcon: string;
+            region: string;
+        };
+    };
+}, {
+    base: string[];
+    selection: string;
+    leading: string;
+    body: string;
+    overline: string;
+    headline: string;
+    supporting: string;
+    trailing: string;
+    trailingText: string;
+    expandIcon: string;
+    group: string;
+    region: string;
+    regionInner: string;
+    nested: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    lines: {
+        1: {
+            base: string;
+        };
+        2: {
+            base: string;
+        };
+        3: {
+            base: string;
+            leading: string;
+            trailing: string;
+        };
+    };
+    variant: {
+        standard: {
+            base: string;
+            nested: string;
+        };
+        segmented: {
+            base: string;
+            nested: string;
+        };
+    };
+    interactive: {
+        true: {
+            base: string[];
+        };
+        false: "";
+    };
+    selected: {
+        true: {
+            base: string;
+            leading: string;
+            overline: string;
+            headline: string;
+            supporting: string;
+            trailing: string;
+            trailingText: string;
+        };
+        false: "";
+    };
+    disabled: {
+        true: {
+            base: string;
+            leading: string;
+            overline: string;
+            headline: string;
+            supporting: string;
+            trailing: string;
+            trailingText: string;
+        };
+        false: "";
+    };
+    expanded: {
+        true: {
+            base: string;
+            expandIcon: string;
+            region: string;
+            nested: string;
+        };
+        false: {
+            expandIcon: string;
+            region: string;
+        };
+    };
+}, {
+    base: string[];
+    selection: string;
+    leading: string;
+    body: string;
+    overline: string;
+    headline: string;
+    supporting: string;
+    trailing: string;
+    trailingText: string;
+    expandIcon: string;
+    group: string;
+    region: string;
+    regionInner: string;
+    nested: string;
+}>>>;
+export type CommandItemVariants = VariantProps<typeof commandItem>;
+export declare const commandDialog: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            command?: import("tailwind-variants").ClassValue;
+            scrim?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            command?: import("tailwind-variants").ClassValue;
+            scrim?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    scrim: string;
+    content: string;
+    command: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            command?: import("tailwind-variants").ClassValue;
+            scrim?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    scrim: string;
+    content: string;
+    command: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    scrim: string;
+    content: string;
+    command: string;
+}>>;

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

@@ -1,4 +1,5 @@
 import { tv } from '../../../utils/tv.js';
+import { listItem } from '../../containers/list/theme.js';
 export const command = tv({
     slots: {
         base: 'flex h-full w-full flex-col overflow-hidden rounded-2xl bg-md-sys-color-surface-container-high text-md-sys-color-on-surface shadow-elevation-3 ring-1 ring-md-sys-color-outline/20',
@@ -9,7 +10,37 @@ export const command = tv({
         empty: 'py-spacing-300 text-center md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
         group: 'overflow-hidden p-spacing-50 text-md-sys-color-on-surface-variant [&_[data-command-group-heading]]:px-spacing-150 [&_[data-command-group-heading]]:py-spacing-100 [&_[data-command-group-heading]]:md-sys-typescale-label-medium [&_[data-command-group-heading]]:text-md-sys-color-on-surface-variant',
         separator: '-mx-spacing-50 h-px bg-md-sys-color-outline-variant',
-        item: 'relative flex cursor-default select-none items-center rounded-lg px-spacing-150 py-spacing-150 md-sys-typescale-body-medium outline-none data-[selected=true]:bg-md-sys-color-secondary-container data-[selected=true]:text-md-sys-color-on-secondary-container data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 transition-colors md-sys-motion-fast-effects',
         itemIcon: 'mr-spacing-150 h-spacing-250 w-spacing-250 shrink-0'
     }
 });
+/*
+  Palette items are M3 list items (ListItem's anatomy, shape and type), sitting on the palette's
+  container colour. Focus stays in the input, so the item the arrow keys or pointer are on
+  (bits-ui's `data-selected`, an empty attribute) takes the focused item's state: a 10% on-surface
+  fill and the 12dp hover shape, the way menus show their highlighted item. A fill, not Layer's
+  tint: Layer's styles are unlayered component CSS, which beats any Tailwind utility.
+*/
+export const commandItem = tv({
+    extend: listItem,
+    slots: {
+        base: [
+            'cursor-default select-none outline-none',
+            'data-selected:[--li-shape:0.75rem] data-selected:bg-md-sys-color-on-surface/10'
+        ]
+    },
+    // The list's own surface fill is a variant, so it's replaced here, not in the base.
+    variants: { variant: { standard: { base: 'bg-transparent' } } },
+    defaultVariants: { interactive: true, lines: 1 }
+});
+/*
+  The ⌘K palette. M3 has no command palette; it borrows the docked search view's width (360–720dp)
+  and a modal dialog's scrim, extra-large shape and motion, and sits in the top third of the
+  window so the list has room to grow downwards.
+*/
+export const commandDialog = tv({
+    slots: {
+        scrim: 'fixed inset-spacing-0 z-layer-modal bg-md-sys-color-scrim/32',
+        content: 'fixed inset-x-spacing-200 top-spacing-200 md:top-spacing-900 z-layer-modal mx-auto max-w-(--md-comp-search-view-contained-docked-container-width-maximum) outline-none',
+        command: 'h-auto rounded-xl'
+    }
+});

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

@@ -1,3 +1,4 @@
+import type { Shortcut } from '../../../utils/index.js';
 import type { Command } from 'bits-ui';
 import type { Snippet } from 'svelte';
 import type { CommandVariants } from './theme.js';
@@ -13,9 +14,21 @@ export interface CommandListProps extends Command.ListProps {
     class?: string;
     children: Snippet;
 }
-export interface CommandItemProps extends Command.ItemProps {
+export interface CommandItemProps extends Omit<Command.ItemProps, 'child' | 'children'> {
     class?: string;
+    /** The headline. */
     children: Snippet;
+    /** A leading icon, e.g. `<Icon name="settings" />`. */
+    leading?: Snippet;
+    /** A second line under the headline. */
+    supporting?: string;
+    /** Trailing label, e.g. a count. `shortcut` replaces it. */
+    trailingText?: string;
+    /**
+     * A keyboard shortcut to show at the end, written like `'Mod+,'` and labelled for the platform
+     * (`⌘,` on a Mac, `Ctrl+,` elsewhere). Only shown: bind the key yourself.
+     */
+    shortcut?: Shortcut;
 }
 export interface CommandGroupProps extends Command.GroupProps {
     class?: string;
@@ -29,3 +42,16 @@ export interface CommandEmptyProps extends Command.EmptyProps {
 export interface CommandSeparatorProps extends Command.SeparatorProps {
     class?: string;
 }
+export interface CommandDialogProps extends CommandProps {
+    /** Whether the palette is open. */
+    open?: boolean;
+    /**
+     * Page-wide keys that open and close the palette. `Mod` is ⌘ on Apple platforms, Ctrl
+     * elsewhere. Fires inside text fields too, but not while another modal dialog is open. `null`
+     * turns it off.
+     * @default 'Mod+K'
+     */
+    shortcut?: Shortcut | null;
+    /** Accessible name of the dialog. */
+    label?: string;
+}

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

@@ -104,3 +104,12 @@ the view on click or typing, not on focus: closing hands focus back to the bar.
   through the `role="option"` items (wrapping, skipping disabled ones) via
   `aria-activedescendant`, so focus stays in the field while typing; Enter picks the highlighted
   one. The highlighted item gets the M3 focus indicator.
+- **Submitting.** Enter with no suggestion highlighted, or Enter in the bar itself, calls
+  `onsearch(query)` with the query as typed (never for an empty one). The view stays open; close
+  it yourself (`open = false`) when you navigate to results. This is where search differs from the
+  command palette (`CommandDialog`): a palette always highlights its best match and runs it, a
+  search can always search for exactly what was typed.
+- **Shortcut.** `/` anywhere on the page, outside a text field, focuses the bar (or opens its view
+  when it has `results`), and the input advertises it with `aria-keyshortcuts`. `shortcut` changes
+  the key; `null` turns it off. With several bars on a page the first mounted takes it. It doesn't
+  fire while another modal dialog is open. ⌘K belongs to the command palette (`CommandDialog`).

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

@@ -47,6 +47,11 @@
     query ? topics.filter((t) => t.toLowerCase().includes(query.toLowerCase())) : recent
   );
 
+  const submit = (q: string) => {
+    picked = `search for “${q}”`;
+    open = false;
+  };
+
   const pick = (item: string) => {
     picked = item;
     query = item;
@@ -101,7 +106,8 @@
 
 <!--
   Click or type in the bar. The view is full-screen below the medium window class and docked from
-  it up: resize the viewport to see both. Arrow keys move through the suggestions; Enter picks one.
+  it up: resize the viewport to see both. Arrow keys move through the suggestions; Enter picks one,
+  or with nothing highlighted searches for what was typed (onsearch). / from anywhere opens it.
 -->
 <Story
   name="Search view"
@@ -112,7 +118,13 @@
   }}
 >
   <div class="gap-spacing-200 p-spacing-300 flex min-h-dvh flex-col items-center">
-    <Search placeholder="Search components" bind:value={query} bind:open results={suggestions}>
+    <Search
+      placeholder="Search components"
+      bind:value={query}
+      bind:open
+      results={suggestions}
+      onsearch={submit}
+    >
       {#snippet trailing()}
         <ButtonIcon variant="standard" iconProps={{ name: 'mic' }} aria-label="Voice search" />
       {/snippet}

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

@@ -12,7 +12,8 @@ open a view from a bar of your own, passing that bar as `anchor`.
   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
 -->
@@ -39,7 +40,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`;
@@ -167,6 +169,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);
     }
   }