@noxlovette/material 0.3.1 → 0.3.3

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-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 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))]',
         icon: 'size-6 text-[24px] text-md-sys-color-primary'
     },
     variants: {

package/dist/components/containers/context-menu/ContextMenu.stories.svelte

@@ -0,0 +1,71 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ContextMenu from './ContextMenu.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Containers/Context Menu',
+    component: ContextMenu
+  });
+</script>
+
+<Story name="Playground" asChild>
+  <ContextMenu
+    items={[
+      { label: 'Edit', value: 'edit', iconProps: { name: 'edit' } },
+      { label: 'Duplicate', value: 'duplicate', iconProps: { name: 'content_copy' } },
+      { separator: true },
+      { label: 'Delete', value: 'delete', iconProps: { name: 'delete' } }
+    ]}
+    onselect={(value) => console.log('selected', value)}
+  >
+    <div
+      class="border-md-sys-color-outline text-md-sys-color-on-surface-variant flex size-40 items-center justify-center rounded-lg border border-dashed"
+    >
+      Right click me
+    </div>
+  </ContextMenu>
+</Story>
+
+<Story name="With Submenu" asChild>
+  <ContextMenu
+    items={[
+      { label: 'Edit', value: 'edit', iconProps: { name: 'edit' } },
+      { separator: true },
+      {
+        label: 'Share',
+        value: 'share',
+        iconProps: { name: 'share' },
+        items: [
+          { label: 'Email', value: 'email' },
+          { label: 'Link', value: 'link' }
+        ]
+      },
+      { separator: true },
+      { label: 'Delete', value: 'delete', iconProps: { name: 'delete' } }
+    ]}
+    onselect={(value) => console.log('selected', value)}
+  >
+    <div
+      class="border-md-sys-color-outline text-md-sys-color-on-surface-variant flex size-40 items-center justify-center rounded-lg border border-dashed"
+    >
+      Right click me
+    </div>
+  </ContextMenu>
+</Story>
+
+<Story name="With Selected Item" asChild>
+  <ContextMenu
+    selected="name"
+    items={[
+      { label: 'Name', value: 'name' },
+      { label: 'Date modified', value: 'date' },
+      { label: 'Size', value: 'size' }
+    ]}
+  >
+    <div
+      class="border-md-sys-color-outline text-md-sys-color-on-surface-variant flex size-40 items-center justify-center rounded-lg border border-dashed"
+    >
+      Right click me
+    </div>
+  </ContextMenu>
+</Story>

package/dist/components/containers/context-menu/ContextMenu.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import ContextMenu from './ContextMenu.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 ContextMenu: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ContextMenu = InstanceType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/containers/context-menu/ContextMenu.svelte

@@ -76,7 +76,7 @@ Context menus appear on right-click and provide actions related to the clicked e
                     mode: 'scale'
                   }}
                 >
-                  {#each item.items as subItem}
+                  {#each item.items as subItem (subItem)}
                     {@render MenuItem(subItem)}
                   {/each}
                 </div>
@@ -139,7 +139,7 @@ Context menus appear on right-click and provide actions related to the clicked e
                 mode: 'scale'
               }}
             >
-              {#each items as item}
+              {#each items as item (item)}
                 {@render MenuItem(item)}
               {/each}
             </div>

package/dist/components/containers/divider/Divider.stories.svelte

@@ -0,0 +1,62 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Divider from './Divider.svelte';
+  import { Body } from '../../../index.js';
+
+  const { Story } = defineMeta({
+    title: 'Containers/Divider',
+    component: Divider,
+    argTypes: {
+      variant: { control: 'select', options: ['full', 'inset', 'wavy'] },
+      orientation: { control: 'select', options: ['horizontal', 'vertical'] }
+    },
+    args: {
+      variant: 'full',
+      orientation: 'horizontal'
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="w-96">
+      <Divider variant={args.variant} orientation={args.orientation} />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Full" asChild>
+  <div class="w-96">
+    <Divider variant="full" />
+  </div>
+</Story>
+
+<Story name="Inset" asChild>
+  <div class="w-96">
+    <Divider variant="inset" />
+  </div>
+</Story>
+
+<Story name="Wavy" asChild>
+  <div class="w-96">
+    <Divider variant="wavy" />
+  </div>
+</Story>
+
+<Story name="With Label" asChild>
+  <div class="w-96">
+    <Divider>
+      {#snippet children()}
+        OR
+      {/snippet}
+    </Divider>
+  </div>
+</Story>
+
+<Story name="Vertical" asChild>
+  <div class="flex h-24 items-center gap-4">
+    <Body>Left</Body>
+    <Divider orientation="vertical" />
+    <Body>Right</Body>
+  </div>
+</Story>

package/dist/components/containers/divider/Divider.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Divider from './Divider.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 Divider: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Divider = InstanceType<typeof Divider>;
+export default Divider;

package/dist/components/containers/divider/Divider.svelte

@@ -9,7 +9,7 @@ Powered by bits-ui for accessibility.
 @see https://m3.material.io/components/divider/overview
 -->
 <script lang="ts">
-  import { Separator } from 'bits-ui';
+  import { Separator, type SeparatorRootProps } from 'bits-ui';
   import clsx from 'clsx';
   import { hr } from './theme.js';
   import type { HrProps } from './types.js';
@@ -33,7 +33,6 @@ Powered by bits-ui for accessibility.
   );
   let insetClass = $derived(variant === 'inset' ? 'mr-2 ml-4' : '');
 
-  let host = $state<HTMLDivElement | null>(null);
   let width = $state(0);
   let waveHeight = 12;
   let waveThickness = 1;
@@ -43,23 +42,20 @@ Powered by bits-ui for accessibility.
   let right = $derived(Math.max(left, width - waveThickness * 0.5));
   let wavePath = $derived(width > 0 ? linear(waveAmp, waveCenter, left, right, 0) : '');
 
-  $effect(() => {
-    if (variant !== 'wavy' || !host || typeof window === 'undefined') return;
+  function trackWidth(node: HTMLElement) {
     const observer = new ResizeObserver((entries) => {
       const entry = entries[0];
       width = Math.max(0, entry?.contentRect.width ?? 0);
     });
-    observer.observe(host);
-    return () => {
-      observer.disconnect();
-    };
-  });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }
 </script>
 
 {#if variant === 'wavy'}
   <div
     {...restProps}
-    bind:this={host}
+    {@attach trackWidth}
     class={clsx('w-full', insetClass, className)}
     role={decorative ? 'none' : 'separator'}
     aria-orientation={orientation}
@@ -96,5 +92,10 @@ Powered by bits-ui for accessibility.
     <div class={lineClass}></div>
   </div>
 {:else}
-  <Separator.Root {...restProps} {orientation} {decorative} class={clsx(styling, className)} />
+  <Separator.Root
+    {...restProps as SeparatorRootProps}
+    {orientation}
+    {decorative}
+    class={clsx(styling, className)}
+  />
 {/if}

package/dist/components/containers/divider/types.d.ts

@@ -1,11 +1,11 @@
-import type { SeparatorRootProps } from 'bits-ui';
+import type { DivAttrs } from '../../../utils/types.js';
 import type { Snippet } from 'svelte';
 import type { HrVariants } from './theme.js';
 /**
  * Props for the Divider component.
  * Dividers are thin lines that group content in lists and layouts.
  */
-export interface HrProps extends HrVariants, Omit<SeparatorRootProps, 'children' | 'orientation'> {
+export interface HrProps extends HrVariants, DivAttrs {
     /**
      * Optional content to be rendered within the divider (horizontal only).
      * If provided, the divider will show the content centered between two lines.
@@ -24,4 +24,9 @@ export interface HrProps extends HrVariants, Omit<SeparatorRootProps, 'children'
      * @default 'full'
      */
     variant?: HrVariants['variant'];
+    /**
+     * Whether the separator is decorative and should be hidden from assistive technologies.
+     * @default true
+     */
+    decorative?: boolean;
 }

package/dist/components/containers/list/ListItem.stories.svelte

@@ -0,0 +1,100 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ListItem from './ListItem.svelte';
+  import Icon from '../../../utils/icon/Icon.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Containers/List Item',
+    component: ListItem,
+    argTypes: {
+      headline: { control: 'text' },
+      overline: { control: 'text' },
+      supporting: { control: 'text' },
+      selected: { control: 'boolean' }
+    },
+    args: {
+      headline: 'Headline',
+      overline: '',
+      supporting: '',
+      selected: false
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <ul class="w-80">
+      <ListItem
+        headline={args.headline}
+        overline={args.overline}
+        supporting={args.supporting}
+        selected={args.selected}
+      />
+    </ul>
+  {/snippet}
+</Story>
+
+<Story name="One Line" asChild>
+  <ul class="w-80">
+    <ListItem headline="Headline" />
+  </ul>
+</Story>
+
+<Story name="Two Line" asChild>
+  <ul class="w-80">
+    <ListItem headline="Headline" supporting="Supporting text that describes the item" />
+  </ul>
+</Story>
+
+<Story name="Three Line" asChild>
+  <ul class="w-80">
+    <ListItem
+      overline="Overline"
+      headline="Headline"
+      supporting="Supporting text that spans up to two lines before it gets clipped"
+    />
+  </ul>
+</Story>
+
+<Story name="With Leading Icon" asChild>
+  <ul class="w-80">
+    <ListItem headline="Headline" supporting="Supporting text">
+      {#snippet leading()}
+        <Icon name="folder" />
+      {/snippet}
+    </ListItem>
+  </ul>
+</Story>
+
+<Story name="With Trailing and Badge" asChild>
+  <ul class="w-80">
+    <ListItem headline="Headline" supporting="Supporting text" badge={3}>
+      {#snippet leading()}
+        <Icon name="inbox" />
+      {/snippet}
+      {#snippet trailing()}
+        <Icon name="chevron_right" />
+      {/snippet}
+    </ListItem>
+  </ul>
+</Story>
+
+<Story name="Selected" asChild>
+  <ul class="w-80">
+    <ListItem headline="Headline" supporting="Supporting text" selected>
+      {#snippet leading()}
+        <Icon name="check_circle" />
+      {/snippet}
+    </ListItem>
+  </ul>
+</Story>
+
+<Story name="As Link" asChild>
+  <ul class="w-80">
+    <ListItem headline="Headline" supporting="Navigates on click" href="#">
+      {#snippet leading()}
+        <Icon name="link" />
+      {/snippet}
+    </ListItem>
+  </ul>
+</Story>

package/dist/components/containers/list/ListItem.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import ListItem from './ListItem.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 ListItem: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ListItem = InstanceType<typeof ListItem>;
+export default ListItem;

package/dist/components/containers/list/theme.js

@@ -1,12 +1,12 @@
 import { tv } from 'tailwind-variants';
 export const listiem = tv({
     slots: {
-        base: 'bg-md-sys-color-surface text-sys-color-on-surface-variant state-layer disabled:before:bg-md-sys-color-on-surface/10 md-sys-state-focus-indicator px-4 py-2 gap-4 items-center relative flex rounded-lg before:rounded-lg w-full',
+        base: 'bg-md-sys-color-surface text-md-sys-color-on-surface-variant state-layer disabled:before:bg-md-sys-color-on-surface/10 md-sys-state-focus-indicator px-4 py-2 gap-4 items-center relative flex rounded-lg before:rounded-lg w-full',
         leading: 'inline-flex items-start',
         body: 'min-w-0',
         overline: 'md-sys-typescale-label-small line-clamp-1',
         headline: 'text-md-sys-color-on-surface md-sys-typescale-body-large line-clamp-1',
-        supporting: 'md-sys-typescale-label-small line-clamp-2',
+        supporting: 'md-sys-typescale-body-medium line-clamp-2',
         trailing: 'size-6 text-[24px] inline-flex items-start ml-auto'
     },
     variants: {

package/dist/components/containers/merger/InputMerger.svelte

@@ -3,7 +3,7 @@
 InputMerger is a container that groups multiple input components together visually.
 -->
 <script lang="ts">
-  import clsx from 'clsx';
+  import { inputMerger } from './theme.js';
 
   interface Props {
     /**
@@ -19,11 +19,6 @@ InputMerger is a container that groups multiple input components together visual
   let { children, class: className = '' }: Props = $props();
 </script>
 
-<div
-  class={clsx(
-    className,
-    'border-primary padding-default gap-narrow grid max-h-max w-full shrink rounded-none border-x-0 px-0 md:rounded-2xl md:border-x-2 md:px-2.5'
-  )}
->
+<div class={inputMerger({ class: className })}>
   {@render children()}
 </div>

package/dist/components/containers/merger/index.d.ts

@@ -1 +1,2 @@
+export * from './theme.js';
 export { default as InputMerger } from './InputMerger.svelte';

package/dist/components/containers/merger/index.js

@@ -1,3 +1,5 @@
 // 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';
 // default exports for components in this folder
 export { default as InputMerger } from './InputMerger.svelte';

package/dist/components/containers/merger/theme.d.ts

@@ -0,0 +1 @@
+export declare const inputMerger: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "grid max-h-max w-full shrink gap-2 rounded-none border-x-0 border-md-sys-color-outline-variant px-0 py-2 md:rounded-2xl md:border-x-2 md:px-2.5", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "grid max-h-max w-full shrink gap-2 rounded-none border-x-0 border-md-sys-color-outline-variant px-0 py-2 md:rounded-2xl md:border-x-2 md:px-2.5", unknown, unknown, undefined>>;

package/dist/components/containers/merger/theme.js

@@ -0,0 +1,4 @@
+import { tv } from 'tailwind-variants';
+export const inputMerger = tv({
+    base: 'grid max-h-max w-full shrink gap-2 rounded-none border-x-0 border-md-sys-color-outline-variant px-0 py-2 md:rounded-2xl md:border-x-2 md:px-2.5'
+});

package/dist/components/containers/panes/SupportingPane.svelte

@@ -62,7 +62,6 @@ SupportingPane provides a layout with a main content area and a supporting side
     mobileTriggerClass
   }: SupportingPaneProps = $props();
 
-  let entered = $state(false);
   let supportingVisible = $state(true);
   let mobileSheetOpen = $state(false);
   let isLargeScreen = $state(false);
@@ -140,7 +139,6 @@ SupportingPane provides a layout with a main content area and a supporting side
       class={supportingCls({
         class: clsx(supportingClass, inlineSupportingClass)
       })}
-      data-entered={entered}
       data-position={position}
     >
       {@render supporting()}

package/dist/components/forms/command/Command.stories.svelte

@@ -0,0 +1,86 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Command from './Command.svelte';
+  import CommandInput from './CommandInput.svelte';
+  import CommandList from './CommandList.svelte';
+  import CommandEmpty from './CommandEmpty.svelte';
+  import CommandGroup from './CommandGroup.svelte';
+  import CommandItem from './CommandItem.svelte';
+  import CommandSeparator from './CommandSeparator.svelte';
+  import Icon from '../../../utils/icon/Icon.svelte';
+  import { command } from './theme.js';
+
+  const { itemIcon } = command();
+
+  const { Story } = defineMeta({
+    title: 'Forms/Command',
+    component: Command
+  });
+</script>
+
+<Story name="Playground" asChild>
+  <div class="w-96">
+    <Command>
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem value="calendar">
+            <Icon name="calendar_today" class={itemIcon()} />
+            Calendar
+          </CommandItem>
+          <CommandItem value="search-emoji">
+            <Icon name="mood" class={itemIcon()} />
+            Search Emoji
+          </CommandItem>
+          <CommandItem value="calculator">
+            <Icon name="calculate" class={itemIcon()} />
+            Calculator
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem value="profile">
+            <Icon name="person" class={itemIcon()} />
+            Profile
+          </CommandItem>
+          <CommandItem value="billing">
+            <Icon name="credit_card" class={itemIcon()} />
+            Billing
+          </CommandItem>
+          <CommandItem value="settings">
+            <Icon name="settings" class={itemIcon()} />
+            Settings
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  </div>
+</Story>
+
+<Story name="Empty State" asChild>
+  <div class="w-96">
+    <Command>
+      <CommandInput placeholder="Search for nothing..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+      </CommandList>
+    </Command>
+  </div>
+</Story>
+
+<Story name="No Icons" asChild>
+  <div class="w-96">
+    <Command>
+      <CommandInput placeholder="Search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Recent">
+          <CommandItem value="apple">Apple</CommandItem>
+          <CommandItem value="banana">Banana</CommandItem>
+          <CommandItem value="cherry">Cherry</CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  </div>
+</Story>

package/dist/components/forms/command/Command.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Command from './Command.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 Command: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Command = InstanceType<typeof Command>;
+export default Command;

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

@@ -4,12 +4,12 @@ export const command = tv({
         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',
         inputWrapper: 'flex items-center border-b border-md-sys-color-outline-variant px-4',
         inputIcon: 'mr-3 h-5 w-5 shrink-0 text-md-sys-color-on-surface-variant',
-        input: 'flex h-12 w-full rounded-md bg-transparent py-3 text-md-sys-typescale-body-large outline-none placeholder:text-md-sys-color-on-surface-variant disabled:cursor-not-allowed disabled:opacity-50',
+        input: 'flex h-12 w-full rounded-md bg-transparent py-3 md-sys-typescale-body-large outline-none placeholder:text-md-sys-color-on-surface-variant disabled:cursor-not-allowed disabled:opacity-50',
         list: 'max-h-[300px] overflow-y-auto overflow-x-hidden p-2 scrollbar-thin scrollbar-thumb-md-sys-color-outline-variant scrollbar-track-transparent',
-        empty: 'py-6 text-center text-md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
-        group: 'overflow-hidden p-1 text-md-sys-color-on-surface-variant [&_[data-command-group-heading]]:px-3 [&_[data-command-group-heading]]:py-2 [&_[data-command-group-heading]]:text-md-sys-typescale-label-medium [&_[data-command-group-heading]]:text-md-sys-color-on-surface-variant',
+        empty: 'py-6 text-center md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
+        group: 'overflow-hidden p-1 text-md-sys-color-on-surface-variant [&_[data-command-group-heading]]:px-3 [&_[data-command-group-heading]]:py-2 [&_[data-command-group-heading]]:md-sys-typescale-label-medium [&_[data-command-group-heading]]:text-md-sys-color-on-surface-variant',
         separator: '-mx-1 h-px bg-md-sys-color-outline-variant',
-        item: 'relative flex cursor-default select-none items-center rounded-lg px-3 py-3 text-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',
+        item: 'relative flex cursor-default select-none items-center rounded-lg px-3 py-3 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',
         itemIcon: 'mr-3 h-5 w-5 shrink-0'
     }
 });

package/dist/components/forms/tooltip/Tooltip.stories.svelte

@@ -0,0 +1,90 @@
+<!--
+  Tooltip only renders its content while open, and opening normally requires a real hover/focus
+  interaction on the trigger. Each story below passes `isOpen={true}` so the tooltip renders open
+  by default for visual review, without needing to hover in Storybook.
+-->
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Tooltip from './Tooltip.svelte';
+  import Button from '../../buttons/Button.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Forms/Tooltip',
+    component: Tooltip
+  });
+</script>
+
+<Story name="Snack (Default)" asChild>
+  <div class="p-24">
+    <Tooltip supportingText="Add to library" isOpen={true}>
+      {#snippet trigger(props)}
+        <Button {...props} variant="filled" iconProps={{ name: 'add' }}>Add</Button>
+      {/snippet}
+    </Tooltip>
+  </div>
+</Story>
+
+<Story name="Rich" asChild>
+  <div class="p-24">
+    <Tooltip
+      variant="rich"
+      style="container"
+      subhead="Accessibility settings"
+      supportingText="Adjust text size, contrast, and motion preferences."
+      isOpen={true}
+    >
+      {#snippet trigger(props)}
+        <Button {...props} variant="outlined">Settings</Button>
+      {/snippet}
+    </Tooltip>
+  </div>
+</Story>
+
+<Story name="Rich — All Styles" asChild>
+  <div class="flex flex-wrap gap-24 p-24">
+    <Tooltip
+      variant="rich"
+      style="container"
+      subhead="Container"
+      supportingText="bg-surface-container"
+      isOpen={true}
+    >
+      {#snippet trigger(props)}
+        <Button {...props} variant="outlined">Container</Button>
+      {/snippet}
+    </Tooltip>
+    <Tooltip
+      variant="rich"
+      style="primary"
+      subhead="Primary"
+      supportingText="bg-primary-container"
+      isOpen={true}
+    >
+      {#snippet trigger(props)}
+        <Button {...props} variant="outlined">Primary</Button>
+      {/snippet}
+    </Tooltip>
+    <Tooltip
+      variant="rich"
+      style="secondary"
+      subhead="Secondary"
+      supportingText="bg-secondary-container"
+      isOpen={true}
+    >
+      {#snippet trigger(props)}
+        <Button {...props} variant="outlined">Secondary</Button>
+      {/snippet}
+    </Tooltip>
+    <Tooltip
+      variant="rich"
+      style="tertiary"
+      subhead="Tertiary"
+      supportingText="bg-tertiary-container"
+      isOpen={true}
+    >
+      {#snippet trigger(props)}
+        <Button {...props} variant="outlined">Tertiary</Button>
+      {/snippet}
+    </Tooltip>
+  </div>
+</Story>

package/dist/components/forms/tooltip/Tooltip.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Tooltip from './Tooltip.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 Tooltip: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Tooltip = InstanceType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/forms/tooltip/Tooltip.svelte

@@ -36,10 +36,11 @@ Plain tooltips are used for simple labels, while rich tooltips can contain forma
     subhead: subheadCls,
     base,
     trigger: triggerCls,
-    supportingText: supportingTextCls
+    supportingText: supportingTextCls,
+    textContainer: textContainerCls
   } = $derived(tooltip({ variant, style }));
 
-  const baseCls = $derived(base({ class: clsx(className) }));
+  const baseCls = $derived(base({ class: clsx(className, textContainerCls()) }));
 
   /**
    * ButtonIcons always have tooltips on, but not always with text
@@ -86,7 +87,7 @@ Plain tooltips are used for simple labels, while rich tooltips can contain forma
                 {#if variant === 'rich'}
                   <Layer />
                   {#if subhead}
-                    <Title class={subheadCls()}>
+                    <Title size="small" class={subheadCls()}>
                       {subhead}
                     </Title>
                   {/if}

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

@@ -33,6 +33,7 @@ export declare const tooltip: import("tailwind-variants").TVReturnType<{
     base: string;
     subhead: string;
     supportingText: string;
+    textContainer: string;
     trigger: string;
 }, undefined, {
     variant: {
@@ -67,6 +68,7 @@ export declare const tooltip: import("tailwind-variants").TVReturnType<{
     base: string;
     subhead: string;
     supportingText: string;
+    textContainer: string;
     trigger: string;
 }, import("tailwind-variants").TVReturnType<{
     variant: {
@@ -101,5 +103,6 @@ export declare const tooltip: import("tailwind-variants").TVReturnType<{
     base: string;
     subhead: string;
     supportingText: string;
+    textContainer: string;
     trigger: string;
 }, undefined, unknown, unknown, undefined>>;

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

@@ -4,6 +4,7 @@ export const tooltip = tv({
         base: 'min-w-60 py-3 px-4  shadow-elevation-2 rounded-md relative z-[100] pointer-events-auto',
         subhead: '',
         supportingText: '',
+        textContainer: '',
         trigger: 'relative inline-flex'
     },
     variants: {
@@ -12,7 +13,7 @@ export const tooltip = tv({
                 base: 'flex flex-col gap-3'
             },
             snack: {
-                base: 'inlie-flex min-w-0 max-w-50 bg-md-sys-color-inverse-surface text-md-sys-color-inverse-on-surface md-sys-typescale-body-small px-3 py-2 shadow-elevation-3 before:rounded-md',
+                base: 'inline-flex min-w-0 max-w-50 bg-md-sys-color-inverse-surface text-md-sys-color-inverse-on-surface md-sys-typescale-body-small px-3 py-2 shadow-elevation-3 before:rounded-md',
                 supportingText: 'text-md-sys-color-inverse-on-surface md-sys-typescale-body-small',
                 textContainer: ''
             }
@@ -20,19 +21,19 @@ export const tooltip = tv({
         style: {
             container: {
                 base: 'bg-md-sys-color-surface-container',
-                textContainer: 'text-md-sys-on-surface-variant'
+                textContainer: 'text-md-sys-color-on-surface-variant'
             },
             primary: {
                 base: 'bg-md-sys-color-primary-container',
-                textContainer: 'text-md-sys-on-primary-container'
+                textContainer: 'text-md-sys-color-on-primary-container'
             },
             secondary: {
                 base: 'bg-md-sys-color-secondary-container',
-                textContainer: 'text-md-sys-on-secondary-container'
+                textContainer: 'text-md-sys-color-on-secondary-container'
             },
             tertiary: {
                 base: 'bg-md-sys-color-tertiary-container',
-                textContainer: 'text-md-sys-on-tertiary-container'
+                textContainer: 'text-md-sys-color-on-tertiary-container'
             }
         }
     },

package/dist/components/misc/Avatar.stories.svelte

@@ -0,0 +1,55 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Avatar from './Avatar.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Misc/Avatar',
+    component: Avatar,
+    argTypes: {
+      size: { control: 'select', options: ['sm', 'md', 'lg'] },
+      seed: { control: 'text' },
+      dicebearStyle: { control: 'text' }
+    },
+    args: {
+      size: 'lg',
+      seed: 'ogonek'
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <Avatar size={args.size} seed={args.seed} dicebearStyle={args.dicebearStyle} />
+  {/snippet}
+</Story>
+
+<Story name="Sizes" asChild>
+  <div class="flex items-end gap-4">
+    <Avatar size="sm" seed="small" />
+    <Avatar size="md" seed="medium" />
+    <Avatar size="lg" seed="large" />
+  </div>
+</Story>
+
+<Story name="Generated Fallback" asChild>
+  <div class="flex items-end gap-4">
+    <Avatar seed="alice" />
+    <Avatar seed="bob" />
+    <Avatar seed="carol" />
+  </div>
+</Story>
+
+<Story name="With Image" asChild>
+  <div class="flex items-end gap-4">
+    <Avatar src="https://picsum.photos/seed/ogonek-1/200" alt="Sample user" />
+    <Avatar
+      src="https://this-url-does-not-resolve.example/broken.jpg"
+      alt="Broken image"
+      seed="fallback"
+    />
+  </div>
+</Story>
+
+<Story name="Clickable" asChild>
+  <Avatar seed="clickable" onclick={() => console.log('Avatar clicked')} />
+</Story>

package/dist/components/misc/Avatar.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Avatar from './Avatar.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 Avatar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Avatar = InstanceType<typeof Avatar>;
+export default Avatar;

package/dist/components/misc/ThemeSettings.svelte

@@ -55,7 +55,7 @@
         type="file"
         accept="image/*"
         onchange={handleImageUpload}
-        class="file:bg-md-sys-color-primary-container file:text-md-sys-color-on-primary-container hover:file:bg-md-sys-color-primary-container/80 text-sm file:mr-4 file:rounded-full file:border-0 file:px-4 file:py-2 file:text-sm file:font-semibold"
+        class="file:bg-md-sys-color-primary-container file:text-md-sys-color-on-primary-container hover:file:bg-md-sys-color-primary-container/80 md-sys-typescale-body-medium file:mr-4 file:rounded-full file:border-0 file:px-4 file:py-2 file:md-sys-typescale-label-large"
       />
     </div>
   </div>

package/dist/components/misc/theme.js

@@ -3,8 +3,8 @@ export const avatar = tv({
     slots: {
         root: 'relative flex aspect-square shrink-0 items-center justify-center overflow-hidden rounded-full',
         image: 'h-full w-full object-cover',
-        fallback: 'flex h-full w-full items-center justify-center rounded-full bg-surface-container-highest',
-        button: 'relative rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
+        fallback: 'flex h-full w-full items-center justify-center rounded-full bg-md-sys-color-surface-container-highest',
+        button: 'relative rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-md-sys-color-primary'
     },
     variants: {
         size: {

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

@@ -88,6 +88,7 @@ In mobile (navbar) mode the same item renders as a bottom-bar tab.
       <a
         {...props}
         {...rest}
+        href={hrefValue}
         {target}
         {rel}
         aria-disabled={ariaDisabled}

package/dist/components/nav/tabs/TabHolder.svelte

@@ -30,7 +30,7 @@ Use TabContent for content-panel tabs; omit it for navigation (href) tabs.
 
 <Tabs.Root bind:value {onValueChange} {activationMode}>
   <Tabs.List class={base()}>
-    {#each items as item}
+    {#each items as item (item)}
       <Tab {...item} {variant} />
     {/each}
 

package/dist/components/nav/tabs/Tabs.stories.svelte

@@ -33,10 +33,11 @@
 <Story name="Playground">
   {#snippet template(args)}
     <div class="flex flex-col gap-4">
-      <TabHolder {...args} {items} />
-      <TabContent value="flights"><Body>Flights panel content.</Body></TabContent>
-      <TabContent value="trips"><Body>Trips panel content.</Body></TabContent>
-      <TabContent value="explore"><Body>Explore panel content.</Body></TabContent>
+      <TabHolder {...args} {items}>
+        <TabContent value="flights"><Body>Flights panel content.</Body></TabContent>
+        <TabContent value="trips"><Body>Trips panel content.</Body></TabContent>
+        <TabContent value="explore"><Body>Explore panel content.</Body></TabContent>
+      </TabHolder>
     </div>
   {/snippet}
 </Story>

package/dist/components/time/TimepickerInput.svelte

@@ -24,6 +24,7 @@ It follows the Material 3 design for time input pickers.
 
   const cls = timepicker();
 
+  // svelte-ignore state_referenced_locally (timeValue is a one-time editable seed from `time`, then mutated locally via bind:value)
   let timeValue = $state<Time>(parseTime(time?.includes(':') ? time : '00:00'));
 
   const output = $derived(

package/dist/components/time/theme.js

@@ -7,7 +7,7 @@ export const timepicker = tv({
         headline: 'text-md-sys-color-on-surface-variant md-sys-typescale-label-medium',
         inputWrapper: 'space-y-2',
         fieldSeparator: 'text-md-sys-color-on-surface md-sys-typescale-display-large ',
-        timeInput: 'bg-md-sys-color-surface-container-highest rounded-sm outline outline-md-sys-color-outline w-24 h-18 md-sys-typescale-display-medium text-md-sys-color-on-surface hover:text-sys-color-on-surface state-layer before:bg-md-sys-color-on-surface/8 md-sys-state-focus-indicator inline-flex items-center justify-center cursor-text focus:text-md-sys-color-on-primary-container focus:outline-md-sys-color-primary focus:bg-md-sys-color-primary-container relative',
-        timeInputSupportingText: 'text-md-color-on-surface-variant md-sys-typescale-body-small'
+        timeInput: 'bg-md-sys-color-surface-container-highest rounded-sm outline outline-md-sys-color-outline w-24 h-18 md-sys-typescale-display-medium text-md-sys-color-on-surface hover:text-md-sys-color-on-surface state-layer before:bg-md-sys-color-on-surface/8 md-sys-state-focus-indicator inline-flex items-center justify-center cursor-text focus:text-md-sys-color-on-primary-container focus:outline-md-sys-color-primary focus:bg-md-sys-color-primary-container relative',
+        timeInputSupportingText: 'text-md-sys-color-on-surface-variant md-sys-typescale-body-small'
     }
 });

package/dist/components/typography/kbd/Kbd.stories.svelte

@@ -0,0 +1,41 @@
+<!--
+  `position="absolute"` anchors Kbd to the bottom-right corner of a `relative` ancestor (and is
+  hidden below the `md` breakpoint) — typically used to show a keyboard shortcut hint inside a
+  search/command input. `position="relative"` renders it inline instead.
+-->
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Kbd from './Kbd.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Typography/Kbd',
+    component: Kbd,
+    argTypes: {
+      position: { control: 'select', options: ['relative', 'absolute'] }
+    },
+    args: {
+      position: 'relative'
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <Kbd position={args.position}>⌘K</Kbd>
+  {/snippet}
+</Story>
+
+<Story name="Inline Shortcut" asChild>
+  <p class="md-sys-typescale-body-medium text-md-sys-color-on-surface">
+    Press <Kbd position="relative">⌘K</Kbd> to open the command palette.
+  </p>
+</Story>
+
+<Story name="Anchored in a Search Field" asChild>
+  <div
+    class="relative flex h-12 w-80 items-center rounded-full bg-md-sys-color-surface-container-high px-4 md-sys-typescale-body-large text-md-sys-color-on-surface-variant"
+  >
+    Search...
+    <Kbd position="absolute">⌘K</Kbd>
+  </div>
+</Story>

package/dist/components/typography/kbd/Kbd.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Kbd from './Kbd.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 Kbd: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Kbd = InstanceType<typeof Kbd>;
+export default Kbd;

package/dist/components/typography/kbd/theme.d.ts

@@ -5,7 +5,7 @@ export declare const kbd: import("tailwind-variants").TVReturnType<{
         absolute: string;
         relative: string;
     };
-}, undefined, "text-xs font-semibold text-text-tertiary", {
+}, undefined, "md-sys-typescale-label-small font-semibold text-md-sys-color-on-surface-variant", {
     position: {
         absolute: string;
         relative: string;
@@ -15,4 +15,4 @@ export declare const kbd: import("tailwind-variants").TVReturnType<{
         absolute: string;
         relative: string;
     };
-}, undefined, "text-xs font-semibold text-text-tertiary", unknown, unknown, undefined>>;
+}, undefined, "md-sys-typescale-label-small font-semibold text-md-sys-color-on-surface-variant", unknown, unknown, undefined>>;

package/dist/components/typography/kbd/theme.js

@@ -1,9 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const kbd = tv({
-    base: 'text-xs font-semibold text-text-tertiary',
+    base: 'md-sys-typescale-label-small font-semibold text-md-sys-color-on-surface-variant',
     variants: {
         position: {
-            absolute: 'right-1.5 bottom-1.5 hidden md:absolute md:right-2 md:bottom-2',
+            absolute: 'right-1.5 bottom-1.5 hidden md:absolute md:right-2 md:bottom-2 md:inline-flex',
             relative: ''
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "type": "module",
   "license": "MIT",
   "repository": {