@noxlovette/material 0.3.2 → 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/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/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/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.2",
+  "version": "0.3.3",
   "type": "module",
   "license": "MIT",
   "repository": {