@noxlovette/material 0.2.1 → 0.3.0

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

@@ -2,6 +2,8 @@ import type { Avatar as AvatarPrimitive } from 'bits-ui';
 import type { VariantProps } from 'tailwind-variants';
 import type { avatar } from './theme.js';
 export type AvatarVariants = VariantProps<typeof avatar>;
+/** Dicebear (https://www.dicebear.com) avatar styles available for the generated fallback avatar. */
+export type DicebearStyle = 'shapes' | 'adventurer' | 'adventurer-neutral' | 'avataaars' | 'avataaars-neutral' | 'big-ears' | 'big-ears-neutral' | 'big-smile' | 'bottts' | 'bottts-neutral' | 'croodles' | 'croodles-neutral' | 'dylan' | 'fun-emoji' | 'glass' | 'icons' | 'identicon' | 'initials' | 'lorelei' | 'lorelei-neutral' | 'micah' | 'miniavs' | 'notionists' | 'notionists-neutral' | 'open-peeps' | 'personas' | 'pixel-art' | 'pixel-art-neutral' | 'rings' | 'thumbs';
 export type AvatarProps = AvatarPrimitive.RootProps & {
     /** The URL of the avatar image. If null or undefined, a generated avatar will be used. */
     src?: string | null;
@@ -9,6 +11,8 @@ export type AvatarProps = AvatarPrimitive.RootProps & {
     alt?: string;
     /** The seed for the generated avatar if no src is provided. */
     seed?: string;
+    /** The Dicebear style used for the generated fallback avatar. @default 'shapes' */
+    dicebearStyle?: DicebearStyle;
     /** The loading status of the avatar image. */
     loadingStatus?: 'loading' | 'loaded' | 'error';
     /** Callback for when the avatar is clicked. If provided, the avatar is wrapped in a button. */

package/dist/components/nav/appbar/AppBar.stories.svelte

@@ -0,0 +1,49 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import AppBar from './AppBar.svelte';
+  import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Navigation/App Bar',
+    component: AppBar,
+    parameters: {
+      // AppBar is the mobile top bar (md:hidden) — preview it at a mobile viewport.
+      viewport: { defaultViewport: 'mobile1' }
+    },
+    argTypes: {
+      title: { control: 'text' },
+      subtitle: { control: 'text' },
+      showBack: { control: 'boolean' },
+      ghost: { control: 'boolean' }
+    },
+    args: {
+      title: 'Inbox',
+      showBack: false,
+      ghost: true
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <AppBar {...args}>
+      {#snippet trailing()}
+        <ButtonIcon variant="text" iconProps={{ name: 'search' }} />
+        <ButtonIcon variant="text" iconProps={{ name: 'more_vert' }} />
+      {/snippet}
+    </AppBar>
+  {/snippet}
+</Story>
+
+<Story
+  name="With Back and Subtitle"
+  args={{ title: 'Draft', subtitle: '3 recipients', showBack: true }}
+>
+  {#snippet template(args)}
+    <AppBar {...args}>
+      {#snippet leading()}
+        <ButtonIcon variant="text" iconProps={{ name: 'arrow_back' }} />
+      {/snippet}
+    </AppBar>
+  {/snippet}
+</Story>

package/dist/components/nav/appbar/AppBar.stories.svelte.d.ts

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

package/dist/components/nav/navbar/Navbar.stories.svelte

@@ -0,0 +1,33 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Navbar from './Navbar.svelte';
+  import NavbarItem from './NavbarItem.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Navigation/Navbar',
+    component: Navbar,
+    parameters: {
+      // Navbar is the mobile fallback (md:hidden) for Rail — preview it at a mobile viewport.
+      viewport: { defaultViewport: 'mobile1' }
+    },
+    argTypes: {
+      ghost: { control: 'boolean' }
+    },
+    args: {
+      ghost: false
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="relative h-24">
+      <Navbar ghost={args.ghost}>
+        <NavbarItem label="Home" href="/" iconProps={{ name: 'house' }} selected />
+        <NavbarItem label="Inbox" href="#" iconProps={{ name: 'mail' }} badge={4} />
+        <NavbarItem label="Chat" href="#" iconProps={{ name: 'chat' }} badge={-1} />
+        <NavbarItem label="Settings" href="#" iconProps={{ name: 'settings' }} />
+      </Navbar>
+    </div>
+  {/snippet}
+</Story>

package/dist/components/nav/navbar/Navbar.stories.svelte.d.ts

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

package/dist/components/nav/rail/Rail.stories.svelte

@@ -0,0 +1,73 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Rail from './Rail.svelte';
+  import RailItem from './RailItem.svelte';
+  import FAB from '../../buttons/FAB.svelte';
+  import Avatar from '../../misc/Avatar.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Navigation/Rail',
+    component: Rail,
+    argTypes: {
+      collapsed: { control: 'boolean' },
+      expandable: { control: 'boolean' },
+      rounded: { control: 'boolean' },
+      anchor: {
+        control: 'select',
+        options: ['viewport', 'parent']
+      },
+      withNavbar: { control: 'boolean' }
+    },
+    args: {
+      collapsed: true,
+      expandable: true,
+      rounded: false,
+      anchor: 'parent',
+      withNavbar: false
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="bg-md-sys-color-surface-variant relative h-[420px] overflow-hidden rounded-2xl">
+      <Rail
+        anchor={args.anchor}
+        collapsed={args.collapsed}
+        expandable={args.expandable}
+        rounded={args.rounded}
+        withNavbar={args.withNavbar}
+      >
+        <RailItem label="Home" href="/" iconProps={{ name: 'house' }} selected />
+        <RailItem label="Inbox" href="#" iconProps={{ name: 'mail' }} badge={4} />
+        <RailItem label="Chat" href="#" iconProps={{ name: 'chat' }} badge={-1} />
+        <RailItem label="Settings" href="#" iconProps={{ name: 'settings' }} />
+        <RailItem label="Disabled" href="#" iconProps={{ name: 'block' }} disabled />
+      </Rail>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With FAB and Footer" args={{ withNavbar: false }}>
+  {#snippet template(args)}
+    <div class="bg-md-sys-color-surface-variant relative h-[420px] overflow-hidden rounded-2xl">
+      <Rail
+        anchor={args.anchor}
+        collapsed={args.collapsed}
+        expandable={args.expandable}
+        rounded={args.rounded}
+        withNavbar={args.withNavbar}
+      >
+        {#snippet fab()}
+          <FAB size="small" iconProps={{ name: 'add' }} label="New" />
+        {/snippet}
+        {#snippet railFooter()}
+          <Avatar seed="DV" />
+        {/snippet}
+        <RailItem label="Home" href="/" iconProps={{ name: 'house' }} selected />
+        <RailItem label="Inbox" href="#" iconProps={{ name: 'mail' }} badge={4} />
+        <RailItem label="Settings" href="#" iconProps={{ name: 'settings' }} />
+      </Rail>
+    </div>
+  {/snippet}
+</Story>

package/dist/components/nav/rail/Rail.stories.svelte.d.ts

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

package/dist/components/nav/rail/types.d.ts

@@ -47,5 +47,5 @@ export type RailProps = RailVariants & HTMLAttributes<HTMLDivElement> & {
     /** Render a bottom navbar on mobile. */
     withNavbar?: boolean;
     /** Customise the navbar inside the rail */
-    navbarProps?: NavBarProps;
+    navbarProps?: Omit<NavBarProps, 'children'>;
 };

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

@@ -0,0 +1,55 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import TabHolder from './TabHolder.svelte';
+  import TabContent from './TabContent.svelte';
+  import Body from '../../typography/body/Body.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Navigation/Tabs',
+    component: TabHolder,
+    argTypes: {
+      variant: {
+        control: 'select',
+        options: ['primary', 'secondary']
+      },
+      activationMode: {
+        control: 'select',
+        options: ['automatic', 'manual']
+      }
+    },
+    args: {
+      variant: 'primary',
+      activationMode: 'automatic'
+    }
+  });
+
+  const items = [
+    { value: 'flights', name: 'Flights', iconProps: { name: 'flight' } },
+    { value: 'trips', name: 'Trips', iconProps: { name: 'luggage' } },
+    { value: 'explore', name: 'Explore', iconProps: { name: 'explore' } }
+  ];
+</script>
+
+<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>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Navigation Tabs (href)" args={{ variant: 'primary' }}>
+  {#snippet template(args)}
+    <TabHolder
+      {...args}
+      items={[
+        { value: 'home', name: 'Home', href: '#', iconProps: { name: 'house' } },
+        { value: 'search', name: 'Search', href: '#', iconProps: { name: 'search' } },
+        { value: 'settings', name: 'Settings', href: '#', iconProps: { name: 'settings' } }
+      ]}
+    />
+  {/snippet}
+</Story>

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

@@ -0,0 +1,18 @@
+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 Tabs: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Tabs = InstanceType<typeof Tabs>;
+export default Tabs;

package/dist/components/pill/Pill.stories.svelte

@@ -0,0 +1,48 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Pill from './Pill.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Pill/Pill',
+    component: Pill,
+    argTypes: {
+      variant: {
+        control: 'select',
+        options: [
+          'primary',
+          'secondary',
+          'tertiary',
+          'error',
+          'container',
+          'primary-container',
+          'secondary-container',
+          'tertiary-container',
+          'error-container',
+          'yellow',
+          'green'
+        ]
+      }
+    },
+    args: {
+      variant: 'primary'
+    }
+  });
+</script>
+
+<Story name="Playground">New</Story>
+
+<Story name="Variants" asChild>
+  <div class="flex flex-wrap items-center gap-3 p-6">
+    <Pill variant="primary">Primary</Pill>
+    <Pill variant="secondary">Secondary</Pill>
+    <Pill variant="tertiary">Tertiary</Pill>
+    <Pill variant="error">Error</Pill>
+    <Pill variant="container">Container</Pill>
+    <Pill variant="primary-container">Primary Container</Pill>
+    <Pill variant="secondary-container">Secondary Container</Pill>
+    <Pill variant="tertiary-container">Tertiary Container</Pill>
+    <Pill variant="error-container">Error Container</Pill>
+    <Pill variant="yellow">Yellow</Pill>
+    <Pill variant="green">Green</Pill>
+  </div>
+</Story>

package/dist/components/pill/Pill.stories.svelte.d.ts

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

package/dist/components/progress/Progress.stories.svelte

@@ -0,0 +1,64 @@
+<!--
+  Three separate M3 progress-indicator components live under this folder — Circular, Linear, and
+  the library's custom Wavy variant — each with its own (non-identical) prop set. They share one
+  story file/title ('Feedback/Progress') with a Story block per component, each toggleable between
+  determinate (`percent`, 0-100) and indeterminate (omit `percent`, or pass null).
+-->
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CircularProgress from './CircularProgress.svelte';
+  import LinearProgress from './LinearProgress.svelte';
+  import WavyLinearProgress from './WavyLinearProgress.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Feedback/Progress',
+    argTypes: {
+      percent: { control: { type: 'range', min: 0, max: 100, step: 1 } }
+    },
+    args: {
+      percent: 65
+    }
+  });
+</script>
+
+<Story name="Circular (Determinate)">
+  {#snippet template(args)}
+    <div class="flex items-center justify-center p-6">
+      <CircularProgress percent={args.percent} />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Circular (Indeterminate)" asChild>
+  <div class="flex items-center justify-center p-6">
+    <CircularProgress />
+  </div>
+</Story>
+
+<Story name="Linear (Determinate)">
+  {#snippet template(args)}
+    <div class="flex items-center p-6">
+      <LinearProgress percent={args.percent} class="w-full max-w-sm" />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Linear (Indeterminate)" asChild>
+  <div class="flex items-center p-6">
+    <LinearProgress class="w-full max-w-sm" />
+  </div>
+</Story>
+
+<Story name="Wavy (Determinate)">
+  {#snippet template(args)}
+    <div class="flex items-center p-6">
+      <WavyLinearProgress percent={args.percent} class="w-full max-w-sm" />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Wavy (Indeterminate)" asChild>
+  <div class="flex items-center p-6">
+    <WavyLinearProgress class="w-full max-w-sm" />
+  </div>
+</Story>

package/dist/components/progress/Progress.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+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 Progress: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Progress = InstanceType<typeof Progress>;
+export default Progress;

package/dist/components/snackbar/Snackbar.stories.svelte

@@ -0,0 +1,76 @@
+<!--
+  Snackbar is a declarative, bindable-message component, not an imperative toast() call: mount
+  one instance per page/region with `bind:message`, then trigger it by assigning a string (or
+  Snippet) to that bound variable from anywhere else in your app. Setting `message` back to '' —
+  or letting the internal 4s auto-dismiss timer do it — hides it again. Because triggering is just
+  a variable assignment, each story below wires up its own local `$state` and a button to set it,
+  the same pattern used for Dialogue's bindable `open`.
+-->
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Snackbar from './Snackbar.svelte';
+</script>
+
+<script lang="ts">
+  import Button from '../buttons/Button.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Feedback/Snackbar',
+    component: Snackbar,
+    argTypes: {
+      label: { control: 'text' },
+      showClose: { control: 'boolean' },
+      static: { control: 'boolean' }
+    },
+    args: {
+      label: 'Undo',
+      showClose: true,
+      static: false
+    }
+  });
+
+  let playgroundMessage = $state('This is a snackbar message.');
+  let triggeredMessage = $state('');
+  let actionMessage = $state('Item archived.');
+  let staticMessage = $state('This snackbar stays until manually dismissed.');
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="relative flex min-h-24 items-center justify-center">
+      <Snackbar
+        bind:message={playgroundMessage}
+        label={args.label}
+        showClose={args.showClose}
+        static={args.static}
+        fixed={false}
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Triggered" asChild>
+  <div class="relative flex min-h-32 flex-col items-center justify-center gap-4">
+    <Button
+      variant="tonal"
+      onclick={() => {
+        triggeredMessage = `Message sent at ${new Date().toLocaleTimeString()}`;
+      }}
+    >
+      Show Snackbar
+    </Button>
+    <Snackbar bind:message={triggeredMessage} label="Undo" fixed={false} />
+  </div>
+</Story>
+
+<Story name="With Action" asChild>
+  <div class="relative flex min-h-24 items-center justify-center">
+    <Snackbar bind:message={actionMessage} label="Undo" fixed={false} />
+  </div>
+</Story>
+
+<Story name="Static (No Auto-Dismiss)" asChild>
+  <div class="relative flex min-h-24 items-center justify-center">
+    <Snackbar bind:message={staticMessage} static showClose fixed={false} />
+  </div>
+</Story>

package/dist/components/snackbar/Snackbar.stories.svelte.d.ts

@@ -0,0 +1,4 @@
+import Snackbar from './Snackbar.svelte';
+declare const Snackbar: import("svelte").Component<Record<string, never>, {}, "">;
+type Snackbar = ReturnType<typeof Snackbar>;
+export default Snackbar;

package/dist/components/typography/body/Body.stories.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Body from './Body.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Typography/Body',
+    component: Body,
+    argTypes: {
+      size: {
+        control: 'select',
+        options: ['small', 'medium', 'large']
+      },
+      emphasized: { control: 'boolean' }
+    },
+    args: {
+      size: 'medium',
+      emphasized: false
+    }
+  });
+</script>
+
+<Story name="Playground">Body text used for longer passages of content.</Story>
+
+<Story name="Sizes" asChild>
+  <div class="flex flex-col gap-4 p-6">
+    <Body size="small">Body small</Body>
+    <Body size="medium">Body medium</Body>
+    <Body size="large">Body large</Body>
+  </div>
+</Story>

package/dist/components/typography/body/Body.stories.svelte.d.ts

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

package/dist/components/typography/display/Display.stories.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Display from './Display.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Typography/Display',
+    component: Display,
+    argTypes: {
+      size: {
+        control: 'select',
+        options: ['small', 'medium', 'large']
+      },
+      emphasized: { control: 'boolean' }
+    },
+    args: {
+      size: 'medium',
+      emphasized: false
+    }
+  });
+</script>
+
+<Story name="Playground">Display text</Story>
+
+<Story name="Sizes" asChild>
+  <div class="flex flex-col gap-4 p-6">
+    <Display size="small">Display small</Display>
+    <Display size="medium">Display medium</Display>
+    <Display size="large">Display large</Display>
+  </div>
+</Story>

package/dist/components/typography/display/Display.stories.svelte.d.ts

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