@noxlovette/material 0.2.2 → 0.3.0

package/claude-skill/material-design/SKILL.md

@@ -16,7 +16,9 @@ This repo is a single, already-opinionated M3 component library, not a blank can
 - Creating or editing a component under `src/lib/components/`
 - Deciding which variant (filled/tonal/outlined/text/elevated) or color role (primary/secondary/tertiary/error) fits a given action or emphasis level
 - Adding a transition, page transition, or list/expand animation
-- Building a showcase route or docs page for a component
+- Building a showcase route or docs page for a component — these MUST be built from
+  `@noxlovette/material` components (`SinglePane`/`SplitPane`/`SupportingPane` for layout), never
+  hand-rolled flex/aside divs; see `references/component-patterns.md` for the pane decision table
 - Reviewing UI for M3 correctness (contrast, touch targets, focus, motion)
 
 **Skip this skill** for changes with no visual surface (pure logic, data layer, config), and for Cypress test work (use the `cypress-*` skills instead).

package/claude-skill/material-design/references/component-patterns.md

@@ -32,6 +32,21 @@ Only fall back to `bare` (no color/background at all) when the component supplie
 - **Focus ring** — the `md-sys-state-focus-indicator` utility, not a custom `:focus` style.
 - **Disabled state** — `.md-component-button-base`'s disabled handling (via `disabled:`/`aria-disabled`/`data-disabled` selectors in `component.css`), not a manually-toggled opacity class.
 
+## Laying out a showcase or docs page (`src/routes/**`)
+
+Routes are not a blank canvas either — every page-level layout shape already has a `containers/panes`
+component. Reach for these instead of a hand-rolled `flex`/`aside`/`sticky` div, and if none fits,
+that's a sign the pattern belongs in the library, not in a one-off route file:
+
+| Shape you need                                                                                      | Component                                         | Notes                                                                                                         |
+| --------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| Centered/full-width single column                                                                   | `SinglePane`                                      | `centered` variant for max-width, `padding`/`gap` for spacing                                                 |
+| User-resizable two-column split                                                                     | `SplitPane` (`resizable` default)                 | Drag handle + `localStorage` persistence                                                                      |
+| Static, non-draggable sidebar fixed to the true viewport edge                                       | `SplitPane` `anchor="viewport" resizable={false}` | Only correct if this is the outermost positioned element (nothing else is already offsetting content)         |
+| Static sidebar absolutely positioned in a bounded/contained box                                     | `SplitPane` `anchor="parent" resizable={false}`   | Does not stay visible while the page scrolls — for embedded demos, not full-page nav                          |
+| Static sidebar nested inside other already-offset content, that should stay visible while scrolling | `SplitPane` `anchor="sticky" resizable={false}`   | e.g. the docs secondary component-list nav, nested inside the root layout's Rail-offset column                |
+| Main content + fixed-width side panel (TOC, filters, details)                                       | `SupportingPane` `anchor="parent"`                | The M3 [supporting-pane](https://m3.material.io/foundations/layout/canonical-layouts/supporting-pane) pattern |
+
 ## Before exporting a new component
 
 Follow CLAUDE.md's "Adding a New Component" steps as the mechanical checklist (create `.svelte` + `types.ts`, define `theme.ts` with `tv()`, export from the category `index.ts`, run `bun scripts/generate-components-index.ts`, add a showcase route and a docs page) — this skill governs the _design_ decisions (which variant/color/motion) that should be made before or while writing that `theme.ts`, not the export mechanics themselves.

package/dist/components/badge/Badge.stories.svelte

@@ -0,0 +1,58 @@
+<!--
+  Badge renders `absolute` (top/right offsets baked into its `size` variant), so it always needs a
+  `position: relative` ancestor to anchor against — it's an overlay primitive, not a
+  standalone/inline element. NavbarItem/RailItem already wire this up internally via their
+  `badge` prop; the stories below reproduce that same relative-wrapper pattern by hand so Badge
+  can be previewed in isolation.
+-->
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Badge from './Badge.svelte';
+  import Icon from '../../utils/icon/Icon.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Feedback/Badge',
+    component: Badge,
+    argTypes: {
+      size: {
+        control: 'select',
+        options: ['sm', 'lg']
+      },
+      number: { control: 'number' }
+    },
+    args: {
+      size: 'lg',
+      number: 5
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="relative inline-flex size-10 items-center justify-center">
+      <Icon name="mail" />
+      <Badge size={args.size} number={args.number} />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Dot (Small)" asChild>
+  <div class="relative inline-flex size-10 items-center justify-center">
+    <Icon name="notifications" />
+    <Badge size="sm" />
+  </div>
+</Story>
+
+<Story name="Numbered (Large)" asChild>
+  <div class="relative inline-flex size-10 items-center justify-center">
+    <Icon name="mail" />
+    <Badge size="lg" number={7} />
+  </div>
+</Story>
+
+<Story name="Overflow (99+)" asChild>
+  <div class="relative inline-flex size-10 items-center justify-center">
+    <Icon name="mail" />
+    <Badge size="lg" number={128} />
+  </div>
+</Story>

package/dist/components/badge/Badge.stories.svelte.d.ts

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

package/dist/components/buttons/Button.stories.svelte

@@ -0,0 +1,50 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Buttons/Button',
+    component: Button,
+    argTypes: {
+      variant: {
+        control: 'select',
+        options: ['elevated', 'filled', 'tonal', 'outlined', 'text', 'bare']
+      },
+      color: {
+        control: 'select',
+        options: ['default', 'primary', 'secondary', 'tertiary', 'error']
+      },
+      size: {
+        control: 'select',
+        options: ['xs', 'sm', 'md', 'lg', 'xl']
+      },
+      shape: {
+        control: 'select',
+        options: ['round', 'square']
+      },
+      disabled: { control: 'boolean' },
+      loading: { control: 'boolean' }
+    },
+    args: {
+      variant: 'filled',
+      color: 'primary',
+      size: 'md',
+      shape: 'round',
+      disabled: false,
+      loading: false
+    }
+  });
+</script>
+
+<Story name="Playground">Label</Story>
+
+<Story name="Variants" asChild>
+  <div class="flex flex-wrap items-center gap-4 p-6">
+    <Button variant="elevated" color="primary">Elevated</Button>
+    <Button variant="filled" color="primary">Filled</Button>
+    <Button variant="tonal" color="primary">Tonal</Button>
+    <Button variant="outlined" color="primary">Outlined</Button>
+    <Button variant="text" color="primary">Text</Button>
+    <Button variant="bare" color="primary">Bare</Button>
+  </div>
+</Story>

package/dist/components/buttons/Button.stories.svelte.d.ts

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

package/dist/components/buttons/ButtonIcon.stories.svelte

@@ -0,0 +1,74 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ButtonIcon from './ButtonIcon.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Buttons/Button Icon',
+    component: ButtonIcon,
+    argTypes: {
+      variant: {
+        control: 'select',
+        options: ['elevated', 'filled', 'tonal', 'outlined', 'text', 'bare']
+      },
+      color: {
+        control: 'select',
+        options: ['default', 'primary', 'secondary', 'tertiary', 'error']
+      },
+      size: {
+        control: 'select',
+        options: ['xs', 'sm', 'md', 'lg', 'xl']
+      },
+      width: {
+        control: 'select',
+        options: ['default', 'narrow', 'wide']
+      },
+      shape: {
+        control: 'select',
+        options: ['round', 'square']
+      },
+      variation: {
+        control: 'select',
+        options: ['default', 'toggle']
+      },
+      disabled: { control: 'boolean' },
+      loading: { control: 'boolean' },
+      tooltipContent: { control: 'text' }
+    },
+    args: {
+      variant: 'text',
+      color: 'primary',
+      size: 'md',
+      width: 'default',
+      shape: 'round',
+      variation: 'default',
+      disabled: false,
+      loading: false,
+      iconProps: { name: 'favorite' },
+      tooltipContent: 'Favorite'
+    }
+  });
+</script>
+
+<Story name="Playground" />
+
+<Story name="Variants" asChild>
+  <div class="flex flex-wrap items-center gap-4 p-6">
+    <ButtonIcon variant="elevated" color="primary" iconProps={{ name: 'favorite' }} />
+    <ButtonIcon variant="filled" color="primary" iconProps={{ name: 'favorite' }} />
+    <ButtonIcon variant="tonal" color="primary" iconProps={{ name: 'favorite' }} />
+    <ButtonIcon variant="outlined" color="primary" iconProps={{ name: 'favorite' }} />
+    <ButtonIcon variant="text" color="primary" iconProps={{ name: 'favorite' }} />
+    <ButtonIcon variant="bare" color="primary" iconProps={{ name: 'favorite' }} />
+  </div>
+</Story>
+
+<Story name="Toggle" asChild>
+  <div class="flex flex-wrap items-center gap-4 p-6">
+    <ButtonIcon
+      variation="toggle"
+      variant="tonal"
+      iconProps={{ name: 'star' }}
+      tooltipContent="Star"
+    />
+  </div>
+</Story>

package/dist/components/buttons/ButtonIcon.stories.svelte.d.ts

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

package/dist/components/buttons/FAB.stories.svelte

@@ -0,0 +1,59 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import FAB from './FAB.svelte';
+  import FABMenuItem from './FABMenuItem.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Buttons/FAB',
+    component: FAB,
+    argTypes: {
+      config: {
+        control: 'select',
+        options: ['primary', 'secondary', 'tertiary']
+      },
+      size: {
+        control: 'select',
+        options: ['small', 'regular', 'large']
+      },
+      expanded: { control: 'boolean' },
+      label: { control: 'text' },
+      disabled: { control: 'boolean' },
+      loading: { control: 'boolean' }
+    },
+    args: {
+      config: 'primary',
+      size: 'regular',
+      expanded: false,
+      label: 'Compose',
+      disabled: false,
+      loading: false,
+      iconProps: { name: 'edit' }
+    }
+  });
+</script>
+
+<Story name="Playground" />
+
+<Story name="Sizes" asChild>
+  <div class="flex flex-wrap items-end gap-4 p-6">
+    <FAB size="small" config="primary" iconProps={{ name: 'edit' }} />
+    <FAB size="regular" config="primary" iconProps={{ name: 'edit' }} />
+    <FAB size="large" config="primary" iconProps={{ name: 'edit' }} />
+  </div>
+</Story>
+
+<Story name="Extended" asChild>
+  <div class="flex flex-wrap items-center gap-4 p-6">
+    <FAB config="primary" expanded label="Compose" iconProps={{ name: 'edit' }} />
+  </div>
+</Story>
+
+<Story name="With Menu" asChild>
+  <div class="relative flex h-40 items-end gap-4 p-6">
+    <FAB config="primary" withMenu iconProps={{ name: 'add' }}>
+      <FABMenuItem variant="primary" iconProps={{ name: 'draw' }}>Draw</FABMenuItem>
+      <FABMenuItem variant="secondary" iconProps={{ name: 'image' }}>Insert Image</FABMenuItem>
+      <FABMenuItem variant="tertiary" iconProps={{ name: 'mic' }}>Record</FABMenuItem>
+    </FAB>
+  </div>
+</Story>

package/dist/components/buttons/FAB.stories.svelte.d.ts

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

package/dist/components/buttons/Toggle.stories.svelte

@@ -0,0 +1,46 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Toggle from './Toggle.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Buttons/Toggle',
+    component: Toggle,
+    argTypes: {
+      size: {
+        control: 'select',
+        options: ['xs', 'sm', 'md', 'lg', 'xl']
+      },
+      shape: {
+        control: 'select',
+        options: ['round', 'square']
+      },
+      pressed: { control: 'boolean' },
+      disabled: { control: 'boolean' },
+      loading: { control: 'boolean' }
+    },
+    args: {
+      size: 'md',
+      shape: 'round',
+      pressed: false,
+      disabled: false,
+      loading: false
+    }
+  });
+</script>
+
+<Story name="Playground">Toggle</Story>
+
+<Story name="With Icon" asChild>
+  <div class="flex flex-wrap items-center gap-4 p-6">
+    <Toggle iconProps={{ name: 'format_bold' }}>Bold</Toggle>
+    <Toggle iconProps={{ name: 'format_italic' }} pressed>Italic</Toggle>
+  </div>
+</Story>
+
+<Story name="States" asChild>
+  <div class="flex flex-wrap items-center gap-4 p-6">
+    <Toggle>Unpressed</Toggle>
+    <Toggle pressed>Pressed</Toggle>
+    <Toggle disabled>Disabled</Toggle>
+  </div>
+</Story>

package/dist/components/buttons/Toggle.stories.svelte.d.ts

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

package/dist/components/cards/Card.stories.svelte

@@ -0,0 +1,72 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Card from './Card.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Cards/Card',
+    component: Card,
+    argTypes: {
+      type: {
+        control: 'select',
+        options: ['elevated', 'filled', 'outlined']
+      },
+      padding: {
+        control: 'select',
+        options: ['none', 'sm', 'md', 'lg']
+      },
+      hoverable: { control: 'boolean' },
+      href: { control: 'text' }
+    },
+    args: {
+      type: 'filled',
+      padding: 'md',
+      hoverable: false,
+      href: undefined
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <Card
+      type={args.type}
+      padding={args.padding}
+      hoverable={args.hoverable}
+      href={args.href}
+      class="max-w-sm"
+    >
+      <p class="md-sys-typescale-title-medium mb-1">Card title</p>
+      <p class="text-md-sys-color-on-surface-variant text-sm">
+        Supporting text describing the card's content.
+      </p>
+    </Card>
+  {/snippet}
+</Story>
+
+<Story name="Types" asChild>
+  <div class="flex flex-wrap gap-4 p-6">
+    <Card type="elevated" class="w-56">
+      <p class="md-sys-typescale-title-medium mb-1">Elevated</p>
+      <p class="text-md-sys-color-on-surface-variant text-sm">Shadow separates from background.</p>
+    </Card>
+    <Card type="filled" class="w-56">
+      <p class="md-sys-typescale-title-medium mb-1">Filled</p>
+      <p class="text-md-sys-color-on-surface-variant text-sm">
+        Solid background, subtle separation.
+      </p>
+    </Card>
+    <Card type="outlined" class="w-56">
+      <p class="md-sys-typescale-title-medium mb-1">Outlined</p>
+      <p class="text-md-sys-color-on-surface-variant text-sm">Boundary line, least separation.</p>
+    </Card>
+  </div>
+</Story>
+
+<Story name="Hoverable Link" asChild>
+  <Card href="#" class="max-w-sm">
+    <p class="md-sys-typescale-title-medium mb-1">Clickable card</p>
+    <p class="text-md-sys-color-on-surface-variant text-sm">
+      Rendered as an anchor when <code>href</code> is provided; hoverable defaults to true.
+    </p>
+  </Card>
+</Story>

package/dist/components/cards/Card.stories.svelte.d.ts

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

package/dist/components/containers/bottom-sheet/BottomSheet.stories.svelte

@@ -0,0 +1,35 @@
+<!--
+  BottomSheet has no `open` prop of its own — mounting it calls the native <dialog>'s
+  showModal() immediately, so visibility is controlled by conditionally rendering the component
+  ({#if open}<BottomSheet ...>{/if}). `close` is a required callback the sheet invokes on Esc,
+  backdrop click, or dragging the handle down below a minimum height ('esc' | 'click' | 'low') —
+  the consumer is expected to flip its own `open` flag to false in response.
+-->
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import BottomSheet from './BottomSheet.svelte';
+  import Button from '../../buttons/Button.svelte';
+  import MenuItem from '../menu-item/MenuItem.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Containers/Bottom Sheet',
+    component: BottomSheet
+  });
+</script>
+
+<script lang="ts">
+  let playgroundOpen = $state(false);
+</script>
+
+<Story name="Playground" asChild>
+  <div class="p-6">
+    <Button onclick={() => (playgroundOpen = true)}>Open bottom sheet</Button>
+    {#if playgroundOpen}
+      <BottomSheet close={() => (playgroundOpen = false)}>
+        <MenuItem iconProps={{ name: 'share' }}>Share</MenuItem>
+        <MenuItem iconProps={{ name: 'link' }}>Copy link</MenuItem>
+        <MenuItem iconProps={{ name: 'download' }}>Download</MenuItem>
+      </BottomSheet>
+    {/if}
+  </div>
+</Story>

package/dist/components/containers/bottom-sheet/BottomSheet.stories.svelte.d.ts

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

package/dist/components/containers/dialogue/Dialogue.stories.svelte

@@ -0,0 +1,86 @@
+<!--
+  NOTE: The exported component is `Dialogue` (British spelling) even though the M3 concept and
+  this docs nav entry are both called "Dialog" — see docs/dialog for the full explanation.
+
+  Dialogue wraps its content in a <form> (bits-ui Dialog.Content) driven by a required `enhance`
+  action, mirroring SvelteKit/superforms usage. Since Storybook has no real form action to POST
+  to, the stories below pass a no-op `enhance` stub that just prevents the native submit —
+  consumers in a real SvelteKit app would pass superforms' `enhance` instead.
+
+  Dialogue's `open` is bindable but there is no args-driven "Controls" story for it — clicking a
+  trigger button is the natural way to open a modal, so each story wires up its own local state
+  in this file's instance script (shared across the module, one flag per story).
+-->
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Dialogue from './Dialogue.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Containers/Dialogue',
+    component: Dialogue
+  });
+
+  // Storybook has no SvelteKit form action to submit to — stub out `enhance` so submitting the
+  // confirm button doesn't attempt a real network POST.
+  function noopEnhance(formEl: HTMLFormElement) {
+    const onSubmit = (e: SubmitEvent) => e.preventDefault();
+    formEl.addEventListener('submit', onSubmit);
+    return { destroy: () => formEl.removeEventListener('submit', onSubmit) };
+  }
+</script>
+
+<script lang="ts">
+  import Button from '../../buttons/Button.svelte';
+
+  let playgroundOpen = $state(false);
+  let extraContentOpen = $state(false);
+  let loadingOpen = $state(false);
+</script>
+
+<Story name="Playground" asChild>
+  <div class="p-6">
+    <Button onclick={() => (playgroundOpen = true)}>Open dialog</Button>
+    <Dialogue
+      bind:open={playgroundOpen}
+      enhance={noopEnhance}
+      headline="Delete this file?"
+      supportingText="This action cannot be undone. The file will be permanently removed."
+      confirmText="Delete"
+      cancelText="Cancel"
+    />
+  </div>
+</Story>
+
+<Story name="With Extra Content" asChild>
+  <div class="p-6">
+    <Button onclick={() => (extraContentOpen = true)}>Open dialog with content</Button>
+    <Dialogue
+      bind:open={extraContentOpen}
+      enhance={noopEnhance}
+      headline="Rename project"
+      confirmText="Save"
+      cancelText="Cancel"
+    >
+      <input
+        type="text"
+        value="Untitled project"
+        class="border-md-sys-color-outline-variant bg-md-sys-color-surface w-full rounded-lg border px-3 py-2"
+      />
+    </Dialogue>
+  </div>
+</Story>
+
+<Story name="Loading Confirm" asChild>
+  <div class="p-6">
+    <Button onclick={() => (loadingOpen = true)}>Open dialog</Button>
+    <Dialogue
+      bind:open={loadingOpen}
+      enhance={noopEnhance}
+      headline="Processing"
+      supportingText="The confirm action is in a loading state."
+      confirmText="Confirm"
+      cancelText="Cancel"
+      loading
+    />
+  </div>
+</Story>

package/dist/components/containers/dialogue/Dialogue.stories.svelte.d.ts

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