@noxlovette/material 0.3.3 → 0.4.0

package/dist/components/cards/theme.d.ts

@@ -1,8 +1,8 @@
 export declare const card: import("tailwind-variants").TVReturnType<{
     type: {
-        elevated: string;
-        filled: string;
-        outlined: string;
+        elevated: "shadow-elevation-1 bg-md-sys-color-surface-container-low";
+        filled: "bg-md-sys-color-surface-container-high";
+        outlined: "bg-md-sys-color-surface outline-1 outline-md-sys-color-outline-variant";
     };
     padding: {
         none: {
@@ -19,16 +19,20 @@ export declare const card: import("tailwind-variants").TVReturnType<{
         };
     };
     hoverable: {
-        true: string;
+        true: "";
+    };
+    selected: {
+        true: "outline-3 outline-md-sys-color-primary";
+        false: "focus:outline-3 focus:outline-md-sys-color-secondary";
     };
 }, {
     base: string;
     icon: string;
 }, undefined, {
     type: {
-        elevated: string;
-        filled: string;
-        outlined: string;
+        elevated: "shadow-elevation-1 bg-md-sys-color-surface-container-low";
+        filled: "bg-md-sys-color-surface-container-high";
+        outlined: "bg-md-sys-color-surface outline-1 outline-md-sys-color-outline-variant";
     };
     padding: {
         none: {
@@ -45,16 +49,20 @@ export declare const card: import("tailwind-variants").TVReturnType<{
         };
     };
     hoverable: {
-        true: string;
+        true: "";
+    };
+    selected: {
+        true: "outline-3 outline-md-sys-color-primary";
+        false: "focus:outline-3 focus:outline-md-sys-color-secondary";
     };
 }, {
     base: string;
     icon: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     type: {
-        elevated: string;
-        filled: string;
-        outlined: string;
+        elevated: "shadow-elevation-1 bg-md-sys-color-surface-container-low";
+        filled: "bg-md-sys-color-surface-container-high";
+        outlined: "bg-md-sys-color-surface outline-1 outline-md-sys-color-outline-variant";
     };
     padding: {
         none: {
@@ -71,9 +79,13 @@ export declare const card: import("tailwind-variants").TVReturnType<{
         };
     };
     hoverable: {
-        true: string;
+        true: "";
+    };
+    selected: {
+        true: "outline-3 outline-md-sys-color-primary";
+        false: "focus:outline-3 focus:outline-md-sys-color-secondary";
     };
 }, {
     base: string;
     icon: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/cards/theme.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const card = tv({
     slots: {
-        base: 'relative flex flex-col rounded-lg disabled:opacity-[0.38] disabled:bg-md-sys-color-surface-variant state-layer before:rounded-lg focus:outline-3 focus:outline-md-sys-color-secondary [transition:box-shadow_var(--md-sys-motion-duration,200ms)_var(--md-sys-motion-timing-function,cubic-bezier(0.34,0.8,0.34,1))]',
+        base: 'relative flex flex-col rounded-lg disabled:opacity-[0.38] disabled:bg-md-sys-color-surface-variant state-layer before:rounded-lg [transition:box-shadow_var(--md-sys-motion-duration,200ms)_var(--md-sys-motion-timing-function,cubic-bezier(0.34,0.8,0.34,1))]',
         icon: 'size-6 text-[24px] text-md-sys-color-primary'
     },
     variants: {
@@ -18,6 +18,10 @@ export const card = tv({
         },
         hoverable: {
             true: ''
+        },
+        selected: {
+            true: 'outline-3 outline-md-sys-color-primary',
+            false: 'focus:outline-3 focus:outline-md-sys-color-secondary'
         }
     },
     compoundVariants: [

package/dist/components/cards/types.d.ts

@@ -30,7 +30,45 @@ export type CardProps = CardVariants & HTMLAttributes<HTMLDivElement> & HTMLAnch
     padding?: CardVariants['padding'];
     /**
      * Whether the card should show a state layer on hover.
-     * Defaults to true if `href` is provided.
+     * Defaults to true if `href`, `onselect`, or `ondelete` is provided.
      */
     hoverable?: boolean;
+    /**
+     * Whether the card is in a selected state. Purely visual — shows a
+     * `primary`-colored outline unconditionally, distinct from the `secondary`
+     * outline shown on plain keyboard focus, so the two states stay visually
+     * distinguishable. Selection state itself is owned by the consumer, not
+     * the card, e.g. `selected={selectedId === item.id}`.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Called when the card's surface is clicked, or when Enter/Space is pressed
+     * while the card itself (not a nested control) has focus. Providing this
+     * makes the card keyboard-focusable (`tabindex`, and — for non-link cards —
+     * `role="button"` + `aria-pressed`). Typically closes over the represented
+     * item's id: `onselect={() => (selectedId = item.id)}`.
+     *
+     * Nested interactive elements (buttons, form controls) should call
+     * `event.stopPropagation()` in their own handlers if they shouldn't also
+     * trigger selection — the whole card surface is clickable.
+     */
+    onselect?: () => void;
+    /**
+     * Called when Delete/Backspace is pressed while the card itself (not a
+     * nested form control) has focus. Typically deletes the represented item:
+     * `ondelete={() => remove(item.id)}`.
+     */
+    ondelete?: () => void;
+    /**
+     * Called when focus moves from somewhere inside the card to somewhere
+     * outside it entirely. Unlike the native `blur`/`focusout` (which fire
+     * on every focus change between the card's own inner elements, e.g.
+     * tabbing between two fields in the same card), this only fires once
+     * focus actually leaves the card's subtree — checked via
+     * `event.relatedTarget` containment. Useful for autosaving inline-edited
+     * content once the user is done with this card:
+     * `onleave={() => save(item)}`.
+     */
+    onleave?: () => void;
 };

package/dist/components/chips/Chip.stories.svelte

@@ -0,0 +1,64 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Chip from './Chip.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Chips/Chip',
+    component: Chip,
+    argTypes: {
+      variant: {
+        control: 'select',
+        options: ['assist', 'filter', 'input', 'suggestion']
+      },
+      elevated: { control: 'boolean' },
+      selected: { control: 'boolean' },
+      disabled: { control: 'boolean' }
+    },
+    args: {
+      variant: 'assist',
+      elevated: false,
+      selected: false,
+      disabled: false
+    }
+  });
+
+  let filterSelected = $state(true);
+</script>
+
+<Story name="Playground">Chip</Story>
+
+<Story name="Assist" asChild>
+  <div class="flex flex-wrap items-center gap-4 p-6">
+    <Chip variant="assist" iconProps={{ name: 'calendar_today' }}>Set reminder</Chip>
+    <Chip variant="assist" elevated iconProps={{ name: 'calendar_today' }}>Set reminder</Chip>
+    <Chip variant="assist" disabled iconProps={{ name: 'calendar_today' }}>Set reminder</Chip>
+  </div>
+</Story>
+
+<Story name="Filter" asChild>
+  <div class="flex flex-wrap items-center gap-4 p-6">
+    <Chip variant="filter" bind:selected={filterSelected}>Filter chip</Chip>
+    <Chip variant="filter" iconProps={{ name: 'star' }}>Starred</Chip>
+    <Chip variant="filter" elevated selected>Elevated selected</Chip>
+    <Chip variant="filter" disabled>Disabled</Chip>
+  </div>
+</Story>
+
+<Story name="Input" asChild>
+  <div class="flex flex-wrap items-center gap-4 p-6">
+    <Chip variant="input" iconProps={{ name: 'person' }} onRemove={() => {}}>Ada Lovelace</Chip>
+    <Chip variant="input" onRemove={() => {}}>No avatar</Chip>
+    <Chip variant="input" selected iconProps={{ name: 'person' }} onRemove={() => {}}>Selected</Chip
+    >
+    <Chip variant="input" disabled iconProps={{ name: 'person' }} onRemove={() => {}}>Disabled</Chip
+    >
+  </div>
+</Story>
+
+<Story name="Suggestion" asChild>
+  <div class="flex flex-wrap items-center gap-4 p-6">
+    <Chip variant="suggestion">Try this</Chip>
+    <Chip variant="suggestion" elevated>Elevated</Chip>
+    <Chip variant="suggestion" disabled>Disabled</Chip>
+  </div>
+</Story>

package/dist/components/chips/Chip.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Chip from './Chip.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Chip: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Chip = InstanceType<typeof Chip>;
+export default Chip;

package/dist/components/chips/Chip.svelte

@@ -0,0 +1,115 @@
+<!--
+@component
+Chips help people enter information, make selections, filter content, or trigger actions.
+
+- Assist: Represents a smart or automated action, such as adding an event to a calendar
+- Filter: Uses tags or descriptive words to filter content; supports a selected state
+- Input: Represents a discrete piece of information entered by a user, and can be removed
+- Suggestion: Helps narrow a user's intent by presenting dynamically generated suggestions
+
+@see https://m3.material.io/components/chips/overview
+-->
+<script lang="ts">
+  import type { ChipProps } from './types.js';
+  import { Icon, Layer } from '../../utils/index.js';
+  import { chip } from './theme.js';
+  import clsx from 'clsx';
+  import { Button, Toggle, type ButtonRootProps, type ToggleRootProps } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    children,
+    variant = 'assist',
+    elevated = false,
+    selected = $bindable(false),
+    onPressedChange,
+    disabled = false,
+    iconProps,
+    avatar,
+    onRemove,
+    formaction,
+    class: className,
+    ...restProps
+  }: ChipProps = $props();
+
+  const isFilter = $derived(variant === 'filter');
+  const isElevated = $derived(variant === 'input' ? false : elevated);
+  const isSelected = $derived(variant === 'filter' || variant === 'input' ? selected : false);
+  const showCheck = $derived(isFilter && selected);
+
+  const { base, icon, label, trailing, checkIcon } = $derived(
+    chip({ variant, elevated: isElevated, selected: isSelected, disabled })
+  );
+  const chipCls = $derived(base({ class: clsx(className) }));
+</script>
+
+{#snippet leading()}
+  {#if showCheck}
+    <svg
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      class={checkIcon()}
+      fill="currentColor"
+    >
+      <path d="M9.55 18 3.85 12.3 5.275 10.875 9.55 15.15 18.725 5.975 20.15 7.4Z" />
+    </svg>
+  {:else if avatar}
+    {@render avatar()}
+  {:else if iconProps}
+    <Icon size="xs" class={icon()} {...iconProps} />
+  {/if}
+{/snippet}
+
+{#if isFilter}
+  <Toggle.Root
+    bind:pressed={selected}
+    {onPressedChange}
+    {disabled}
+    class={chipCls}
+    data-cy="m3-chip"
+    {...restProps as ToggleRootProps}
+  >
+    {@render leading()}
+    <span class={label()}>{@render children()}</span>
+    <Layer />
+  </Toggle.Root>
+{:else if variant === 'input'}
+  <div
+    class={chipCls}
+    data-cy="m3-chip"
+    aria-disabled={disabled}
+    data-disabled={disabled ? true : undefined}
+    {...restProps as HTMLAttributes<HTMLDivElement>}
+  >
+    {@render leading()}
+    <span class={label()}>{@render children()}</span>
+    {#if onRemove}
+      <button
+        type="button"
+        class={trailing()}
+        {disabled}
+        onclick={(e) => {
+          e.stopPropagation();
+          onRemove?.();
+        }}
+        aria-label="Remove"
+      >
+        <Icon size="xs" name="close" />
+        <Layer />
+      </button>
+    {/if}
+    <Layer />
+  </div>
+{:else}
+  <Button.Root
+    {disabled}
+    {formaction}
+    class={chipCls}
+    data-cy="m3-chip"
+    {...restProps as ButtonRootProps}
+  >
+    {@render leading()}
+    <span class={label()}>{@render children()}</span>
+    <Layer />
+  </Button.Root>
+{/if}

package/dist/components/chips/Chip.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ChipProps } from './types.js';
+/**
+ * Chips help people enter information, make selections, filter content, or trigger actions.
+ *
+ * - Assist: Represents a smart or automated action, such as adding an event to a calendar
+ * - Filter: Uses tags or descriptive words to filter content; supports a selected state
+ * - Input: Represents a discrete piece of information entered by a user, and can be removed
+ * - Suggestion: Helps narrow a user's intent by presenting dynamically generated suggestions
+ *
+ * @see https://m3.material.io/components/chips/overview
+ */
+declare const Chip: import("svelte").Component<ChipProps, {}, "selected">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;

package/dist/components/chips/index.d.ts

@@ -0,0 +1,3 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as Chip } from './Chip.svelte';

package/dist/components/{containers/merger → chips}/index.js

@@ -1,5 +1,6 @@
 // THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
 // re-export TS/JS modules from this folder
 export * from './theme.js';
+export * from './types.js';
 // default exports for components in this folder
-export { default as InputMerger } from './InputMerger.svelte';
+export { default as Chip } from './Chip.svelte';

package/dist/components/chips/theme.d.ts

@@ -0,0 +1,78 @@
+import { type VariantProps } from 'tailwind-variants';
+export type ChipVariants = VariantProps<typeof chip>;
+export declare const chip: import("tailwind-variants").TVReturnType<{
+    variant: {
+        assist: "";
+        filter: "";
+        input: "";
+        suggestion: "";
+    };
+    elevated: {
+        true: "";
+        false: "";
+    };
+    selected: {
+        true: "";
+        false: "";
+    };
+    disabled: {
+        true: "";
+        false: "";
+    };
+}, {
+    base: string;
+    icon: string;
+    label: string;
+    trailing: string;
+    checkIcon: string;
+}, undefined, {
+    variant: {
+        assist: "";
+        filter: "";
+        input: "";
+        suggestion: "";
+    };
+    elevated: {
+        true: "";
+        false: "";
+    };
+    selected: {
+        true: "";
+        false: "";
+    };
+    disabled: {
+        true: "";
+        false: "";
+    };
+}, {
+    base: string;
+    icon: string;
+    label: string;
+    trailing: string;
+    checkIcon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        assist: "";
+        filter: "";
+        input: "";
+        suggestion: "";
+    };
+    elevated: {
+        true: "";
+        false: "";
+    };
+    selected: {
+        true: "";
+        false: "";
+    };
+    disabled: {
+        true: "";
+        false: "";
+    };
+}, {
+    base: string;
+    icon: string;
+    label: string;
+    trailing: string;
+    checkIcon: string;
+}>>;

package/dist/components/chips/theme.js

@@ -0,0 +1,72 @@
+import { tv } from 'tailwind-variants';
+export const chip = tv({
+    slots: {
+        base: 'md-component-button-base group inline-flex h-8 max-w-max items-center justify-center gap-2 rounded-sm before:rounded-sm px-4 md-sys-typescale-label-large font-medium',
+        icon: 'shrink-0',
+        label: '',
+        trailing: 'relative -mr-2 ml-1 inline-flex size-[18px] shrink-0 items-center justify-center rounded-full',
+        checkIcon: 'size-4 shrink-0'
+    },
+    variants: {
+        variant: {
+            assist: '',
+            filter: '',
+            input: '',
+            suggestion: ''
+        },
+        elevated: {
+            true: '',
+            false: ''
+        },
+        selected: {
+            true: '',
+            false: ''
+        },
+        disabled: {
+            true: '',
+            false: ''
+        }
+    },
+    compoundVariants: [
+        {
+            elevated: false,
+            selected: false,
+            class: {
+                base: 'bg-md-sys-color-surface text-md-sys-color-on-surface-variant outline outline-md-sys-color-outline-variant'
+            }
+        },
+        {
+            elevated: true,
+            selected: false,
+            class: {
+                base: 'bg-md-sys-color-surface-container-low text-md-sys-color-on-surface-variant shadow-elevation-1 hover:shadow-elevation-2'
+            }
+        },
+        {
+            selected: true,
+            class: {
+                base: 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container'
+            }
+        },
+        {
+            variant: 'assist',
+            selected: false,
+            class: { icon: 'text-md-sys-color-primary' }
+        },
+        {
+            disabled: true,
+            class: {
+                base: 'cursor-not-allowed bg-md-sys-color-on-surface/10 text-md-sys-color-on-surface/38 outline-md-sys-color-on-surface/12 hover:shadow-elevation-1',
+                icon: 'text-md-sys-color-on-surface/38',
+                trailing: 'text-md-sys-color-on-surface/38 pointer-events-none',
+                checkIcon: 'text-md-sys-color-on-surface/38'
+            }
+        }
+    ],
+    defaultVariants: {
+        variant: 'assist',
+        elevated: false,
+        selected: false,
+        disabled: false
+    }
+});

package/dist/components/chips/types.d.ts

@@ -0,0 +1,43 @@
+import type { AnchorButtonAttributes, IconProps } from '../../utils/index.js';
+import type { Snippet } from 'svelte';
+import type { ChipVariants } from './theme.js';
+export type ChipProps = ChipVariants & AnchorButtonAttributes & {
+    /**
+     * The semantic type of chip.
+     * - 'assist': Represents a smart or automated action.
+     * - 'filter': Toggles filtering of content; supports a selected state with a leading checkmark.
+     * - 'input': Represents a discrete piece of information entered by the user; supports removal.
+     * - 'suggestion': Presents a dynamically generated suggestion.
+     */
+    variant?: ChipVariants['variant'];
+    /**
+     * Whether the chip's container is elevated (shadow) instead of flat/outlined.
+     * Not applicable to 'input' chips, which are always flat.
+     */
+    elevated?: ChipVariants['elevated'];
+    /**
+     * Whether the chip is selected. Bindable.
+     * Meaningful for 'filter' chips (drives the toggle + checkmark) and 'input' chips (highlight only).
+     */
+    selected?: boolean;
+    /** Callback fired when a 'filter' chip's selected state changes via interaction. */
+    onPressedChange?: (selected: boolean) => void;
+    /** Whether the chip is disabled. */
+    disabled?: boolean;
+    /** Configuration for the leading icon. */
+    iconProps?: IconProps;
+    /**
+     * Custom leading content (e.g. an avatar image) rendered instead of `iconProps`.
+     * Typically used by 'input' chips to represent a contact or entity.
+     */
+    avatar?: Snippet;
+    /**
+     * Called when the trailing remove icon is activated.
+     * Providing this renders the trailing remove affordance on 'input' chips.
+     */
+    onRemove?: () => void;
+    /** The label content of the chip. */
+    children: Snippet;
+    /** The `formaction` attribute for the chip when used in a form. */
+    formaction?: string;
+};

package/dist/components/containers/action-rail/ActionRail.stories.svelte

@@ -0,0 +1,36 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ActionRail from './ActionRail.svelte';
+  import Toolbar from '../../toolbar/Toolbar.svelte';
+  import ToolbarButton from '../../toolbar/ToolbarButton.svelte';
+  import ToolbarDivider from '../../toolbar/ToolbarDivider.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Containers/Action Rail',
+    component: ActionRail,
+    argTypes: {
+      anchor: {
+        control: 'select',
+        options: ['viewport', 'parent', 'sticky']
+      }
+    },
+    args: {
+      anchor: 'parent'
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="bg-md-sys-color-surface-variant relative h-[420px] overflow-hidden rounded-2xl">
+      <ActionRail anchor={args.anchor}>
+        <Toolbar orientation="vertical">
+          <ToolbarButton iconProps={{ name: 'edit' }} />
+          <ToolbarButton iconProps={{ name: 'share' }} />
+          <ToolbarDivider />
+          <ToolbarButton iconProps={{ name: 'delete' }} />
+        </Toolbar>
+      </ActionRail>
+    </div>
+  {/snippet}
+</Story>

package/dist/components/containers/{panes/SinglePane.stories.svelte.d.ts → action-rail/ActionRail.stories.svelte.d.ts}

@@ -1,4 +1,4 @@
-import SinglePane from './SinglePane.svelte';
+import ActionRail from './ActionRail.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,8 +12,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const SinglePane: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const ActionRail: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type SinglePane = InstanceType<typeof SinglePane>;
-export default SinglePane;
+type ActionRail = InstanceType<typeof ActionRail>;
+export default ActionRail;

package/dist/components/containers/action-rail/ActionRail.svelte

@@ -0,0 +1,35 @@
+<!--
+@component
+Material 3 Action Rail.
+
+A rightmost, sticky container for hosting a vertical `Toolbar` (or other grouped
+actions) alongside page content. This is the M3 spec's newer "rail as a toolbar
+host" role — distinct from `Rail` (the navigation-rail component under `nav/`).
+Because it holds actions rather than destinations, it renders a plain container
+and is intentionally NOT wrapped in bits-ui's `NavigationMenu` — `Toolbar.svelte`
+(bits-ui `Toolbar.Root`) already supplies the correct `role="toolbar"` semantics
+for whatever is placed inside.
+
+@see https://m3.material.io/components/toolbars
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import { actionRail } from './theme.js';
+  import type { ActionRailProps } from './types.js';
+
+  let {
+    children,
+    anchor = 'sticky',
+    top = 0,
+    bottom = 0,
+    class: className,
+    ...rest
+  }: ActionRailProps = $props();
+
+  const { base } = $derived(actionRail({ anchor }));
+  const cssVars = $derived(`--action-rail-top: ${top}px; --action-rail-bottom: ${bottom}px;`);
+</script>
+
+<div class={base({ class: clsx(className) })} style={cssVars} {...rest}>
+  {@render children()}
+</div>