@noxlovette/material 0.8.3 → 0.9.1

package/dist/components/forms/command/CommandItem.svelte

@@ -1,14 +1,57 @@
+<!--
+@component
+A command in a `Command` or `CommandDialog`: an M3 list item. The children are its headline; add a
+`leading` icon, `supporting` text, and a `shortcut` (shown, not bound) or other `trailingText`.
+-->
 <script lang="ts">
   import { Command } from 'bits-ui';
   import clsx from 'clsx';
-  import { command } from './theme.js';
+  import { Layer, isApplePlatform, shortcutLabel } from '../../../utils/index.js';
+  import { commandItem } from './theme.js';
   import type { CommandItemProps } from './types.js';
 
-  let { children, class: className, value, ...restProps }: CommandItemProps = $props();
+  let {
+    children,
+    leading,
+    supporting,
+    trailingText,
+    shortcut,
+    disabled = false,
+    class: className,
+    value,
+    ...restProps
+  }: CommandItemProps = $props();
 
-  const { item } = command();
+  // `Mod` resolves on the client, so SSR and the first render agree.
+  let apple = $state(false);
+  $effect(() => {
+    apple = isApplePlatform();
+  });
+
+  const trailing = $derived(shortcut ? shortcutLabel(shortcut, apple) : trailingText);
+  const cls = $derived(commandItem({ lines: supporting ? 2 : 1, disabled }));
 </script>
 
-<Command.Item {...restProps} {value} class={item({ class: clsx(className) })}>
-  {@render children()}
+<Command.Item {...restProps} {value} {disabled}>
+  {#snippet child({ props })}
+    <div {...props} class={cls.base({ class: clsx(className) })}>
+      {#if !disabled}
+        <Layer />
+      {/if}
+      {#if leading}
+        <div class={cls.leading()} aria-hidden="true">{@render leading()}</div>
+      {/if}
+      <div class={cls.body()}>
+        <span class={cls.headline()}>{@render children()}</span>
+        {#if supporting}
+          <span class={cls.supporting()}>{supporting}</span>
+        {/if}
+      </div>
+      {#if trailing}
+        <div class={cls.trailing()}>
+          <span class={cls.trailingText()}>{trailing}</span>
+        </div>
+      {/if}
+    </div>
+  {/snippet}
 </Command.Item>

package/dist/components/forms/command/CommandItem.svelte.d.ts

@@ -1,4 +1,8 @@
 import type { CommandItemProps } from './types.js';
+/**
+ * A command in a `Command` or `CommandDialog`: an M3 list item. The children are its headline; add a
+ * `leading` icon, `supporting` text, and a `shortcut` (shown, not bound) or other `trailingText`.
+ */
 declare const CommandItem: import("svelte").Component<CommandItemProps, {}, "">;
 type CommandItem = ReturnType<typeof CommandItem>;
 export default CommandItem;

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

@@ -1,6 +1,7 @@
 export * from './theme.js';
 export * from './types.js';
 export { default as Command } from './Command.svelte';
+export { default as CommandDialog } from './CommandDialog.svelte';
 export { default as CommandEmpty } from './CommandEmpty.svelte';
 export { default as CommandGroup } from './CommandGroup.svelte';
 export { default as CommandInput } from './CommandInput.svelte';

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

@@ -4,6 +4,7 @@ export * from './theme.js';
 export * from './types.js';
 // default exports for components in this folder
 export { default as Command } from './Command.svelte';
+export { default as CommandDialog } from './CommandDialog.svelte';
 export { default as CommandEmpty } from './CommandEmpty.svelte';
 export { default as CommandGroup } from './CommandGroup.svelte';
 export { default as CommandInput } from './CommandInput.svelte';

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}