@dxlbnl/ui 0.1.0

package/dist/components/forms/Switch.stories.svelte

@@ -0,0 +1,86 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import { resolveTokenColor } from "../../storybook-utils.js";
+  import Switch from "./Switch.svelte";
+
+  const { Story } = defineMeta({
+    title: "Forms/Switch",
+    component: Switch,
+    tags: ["autodocs"],
+  });
+</script>
+
+<!-- AC-44, AC-45, AC-46, AC-47: Off state -->
+<Story name="Off (Default)" args={{ label: "Dark mode", checked: false }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // AC-44: renders a button with role="switch"
+    // AC-46: accessible name provided by aria-label={label}
+    const sw = canvas.getByRole("switch", { name: "Dark mode" });
+    await expect(sw).toBeVisible();
+    // AC-45: aria-checked is "false" when off
+    await expect(sw.getAttribute("aria-checked")).toBe("false");
+    // AC-47: track background matches var(--bg-sunken) when off
+    const bgSunken = resolveTokenColor("--bg-sunken");
+    await expect(getComputedStyle(sw).backgroundColor).toBe(bgSunken);
+  }} />
+
+<!-- AC-45, AC-48: On state -->
+<Story name="On" args={{ label: "Dark mode", checked: true }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const sw = canvas.getByRole("switch", { name: "Dark mode" });
+    // AC-45: aria-checked is "true" when on
+    await expect(sw.getAttribute("aria-checked")).toBe("true");
+    // AC-48: track background matches var(--amber) when on
+    const amberColor = resolveTokenColor("--amber");
+    await expect(getComputedStyle(sw).backgroundColor).toBe(amberColor);
+  }} />
+
+<!-- AC-49: disabled off — toBeDisabled and wrap opacity 0.4 -->
+<Story name="Disabled Off" args={{ label: "Feature flag", disabled: true, checked: false }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const sw = canvas.getByRole("switch", { name: "Feature flag" });
+    await expect(sw).toBeDisabled();
+    // AC-49: wrap opacity is 0.4
+    const wrap = canvasElement.querySelector(".switch-wrap");
+    await expect(getComputedStyle(wrap!).opacity).toBe("0.4");
+  }} />
+
+<!-- AC-49: disabled on — toBeDisabled and aria-checked true -->
+<Story name="Disabled On" args={{ label: "Feature flag", disabled: true, checked: true }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const sw = canvas.getByRole("switch", { name: "Feature flag" });
+    await expect(sw).toBeDisabled();
+    await expect(sw.getAttribute("aria-checked")).toBe("true");
+  }} />
+
+<!-- AC-50: Space key toggles switch from off to on -->
+<Story name="Space to Toggle" args={{ label: "Toggle", checked: false }}
+  play={async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    const sw = canvas.getByRole("switch", { name: "Toggle" });
+    await expect(sw.getAttribute("aria-checked")).toBe("false");
+    await userEvent.tab();
+    await expect(sw).toHaveFocus();
+    await userEvent.keyboard(" ");
+    // AC-50: after Space on an off switch, aria-checked becomes "true"
+    await expect(sw.getAttribute("aria-checked")).toBe("true");
+  }} />
+
+<!-- AC-48, AC-52: amber track when on + pill shape dimensions -->
+<Story name="Amber Track When On" args={{ label: "Power", checked: true }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const sw = canvas.getByRole("switch", { name: "Power" });
+    // AC-48: track background matches var(--amber)
+    const amberColor = resolveTokenColor("--amber");
+    await expect(getComputedStyle(sw).backgroundColor).toBe(amberColor);
+    // AC-52: pill shape — borderRadius is 11px, width 40px, height 22px
+    await expect(getComputedStyle(sw).borderRadius).toBe("11px");
+    await expect(getComputedStyle(sw).width).toBe("40px");
+    await expect(getComputedStyle(sw).height).toBe("22px");
+  }} />

package/dist/components/forms/Switch.stories.svelte.d.ts

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

package/dist/components/forms/Switch.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+  import { getContext } from 'svelte'
+  import type { FieldContext } from './field-context.js'
+  import { FIELD_CONTEXT_KEY } from './field-context.js'
+
+  interface Props extends HTMLButtonAttributes {
+    /** Accessible label rendered next to the toggle track. */
+    label: string
+    /** Whether the switch is on. Bindable. @default false */
+    checked?: boolean
+    [key: string]: unknown
+  }
+
+  let {
+    label,
+    checked = $bindable(false),
+    disabled,
+    ...rest
+  }: Props = $props()
+
+  const fieldCtx = getContext<FieldContext | undefined>(FIELD_CONTEXT_KEY)
+
+  let resolvedAriaInvalid: boolean | 'true' | 'false' | 'grammar' | 'spelling' | null | undefined = $derived(
+    fieldCtx?.hasError ? 'true' : undefined
+  )
+  let resolvedAriaDescribedby = $derived(fieldCtx?.hasHint ? fieldCtx.hintId : undefined)
+  // Explicit boolean for aria-checked (avoids unknown from index signature)
+  let ariaChecked: boolean = $derived(!!checked)
+</script>
+
+<span class="switch-wrap" class:disabled={disabled}>
+  <button
+    type="button"
+    class="switch"
+    class:on={checked}
+    role="switch"
+    aria-checked={ariaChecked}
+    aria-label={label}
+    {disabled}
+    aria-disabled={disabled}
+    aria-invalid={resolvedAriaInvalid}
+    aria-describedby={resolvedAriaDescribedby}
+    onclick={() => { if (!disabled) checked = !checked }}
+    {...rest}
+  >
+    <span class="switch-knob" aria-hidden="true"></span>
+  </button>
+  <span class="switch-label">{label}</span>
+</span>
+
+<style>
+  .switch-wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--ink);
+  }
+
+  .switch-wrap.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .switch {
+    display: inline-flex;
+    align-items: center;
+    width: 40px;
+    height: 22px;
+    border-radius: 11px;
+    border: 1px solid var(--rail);
+    background: var(--bg-sunken);
+    cursor: pointer;
+    padding: 0;
+    position: relative;
+    transition: background var(--transition), border-color var(--transition);
+    flex-shrink: 0;
+  }
+
+  .switch:disabled {
+    cursor: not-allowed;
+  }
+
+  .switch:focus-visible {
+    outline: 2px solid var(--amber);
+    outline-offset: 2px;
+  }
+
+  .switch.on {
+    background: var(--amber);
+    border-color: var(--amber);
+  }
+
+  .switch-knob {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--bg);
+    transform: translateX(2px);
+    transition: transform var(--transition);
+  }
+
+  .switch.on .switch-knob {
+    transform: translateX(20px);
+  }
+
+  .switch-label {
+    color: var(--ink);
+  }
+</style>

package/dist/components/forms/Switch.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    /** Accessible label rendered next to the toggle track. */
+    label: string;
+    /** Whether the switch is on. Bindable. @default false */
+    checked?: boolean;
+    [key: string]: unknown;
+}
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/forms/Textarea.stories.svelte

@@ -0,0 +1,40 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Textarea from "./Textarea.svelte";
+  import { resolveTokenColor } from "../../storybook-utils.js";
+
+  const { Story } = defineMeta({
+    title: "Forms/Textarea",
+    component: Textarea,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Default" args={{ placeholder: "What changed, what broke, what shipped…" }}
+  play={async ({ canvasElement }) => {
+    const ta = within(canvasElement).getByRole("textbox");
+    await expect(ta).toBeVisible();
+    await expect(getComputedStyle(ta).resize).toBe("vertical");
+    await expect(getComputedStyle(ta).minHeight).toBe("60px");
+  }} />
+
+<Story name="With Content" args={{ value: "Conduit arrived. Rail draws 62mA @ +12V." }}
+  play={async ({ canvasElement }) => {
+    const ta = within(canvasElement).getByRole("textbox");
+    await expect(ta).toHaveValue("Conduit arrived. Rail draws 62mA @ +12V.");
+  }} />
+
+<Story name="Error State" args={{ error: true, value: "Bad data" }}
+  play={async ({ canvasElement }) => {
+    const ta = within(canvasElement).getByRole("textbox");
+    const dangerColor = resolveTokenColor("--danger");
+    await expect(getComputedStyle(ta).borderColor).toBe(dangerColor);
+  }} />
+
+<Story name="Disabled" args={{ disabled: true, value: "Locked content" }}
+  play={async ({ canvasElement }) => {
+    const ta = within(canvasElement).getByRole("textbox");
+    await expect(ta).toBeDisabled();
+    await expect(getComputedStyle(ta).opacity).toBe("0.4");
+  }} />

package/dist/components/forms/Textarea.stories.svelte.d.ts

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

package/dist/components/forms/Textarea.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import type { HTMLTextareaAttributes } from 'svelte/elements'
+  import { getContext } from 'svelte'
+  import type { FieldContext } from './field-context.js'
+  import { FIELD_CONTEXT_KEY } from './field-context.js'
+
+  interface Props extends HTMLTextareaAttributes {
+    /** Show the error (danger-border) state. Auto-set when inside a Field with an error prop. @default false */
+    error?: boolean
+    [key: string]: unknown
+  }
+
+  let { error = false, ...rest }: Props = $props()
+
+  const fieldCtx = getContext<FieldContext | undefined>(FIELD_CONTEXT_KEY)
+
+  let resolvedId = $derived(fieldCtx ? fieldCtx.inputId : (rest.id as string | undefined))
+  let resolvedAriaInvalid: boolean | 'true' | 'false' | 'grammar' | 'spelling' | null | undefined = $derived(
+    fieldCtx?.hasError ? 'true' : undefined
+  )
+  let resolvedAriaDescribedby = $derived(
+    fieldCtx?.hasHint ? fieldCtx.hintId : (rest['aria-describedby'] as string | undefined)
+  )
+  let resolvedError = $derived(error || (fieldCtx?.hasError ?? false))
+</script>
+
+<textarea
+  class="input"
+  class:err={resolvedError}
+  id={resolvedId}
+  aria-invalid={resolvedAriaInvalid}
+  aria-describedby={resolvedAriaDescribedby}
+  {...rest}
+></textarea>
+
+<style>
+  .input {
+    font-family: var(--mono);
+    font-size: 13px;
+    letter-spacing: 0.02em;
+    background: var(--bg-sunken);
+    color: var(--ink);
+    border: 1px solid var(--rule-strong);
+    padding: 7px 10px;
+    outline: none;
+    width: 100%;
+    transition: border-color var(--transition);
+    border-radius: 0;
+    resize: vertical;
+    min-height: 60px;
+    line-height: 1.5;
+  }
+
+  .input:focus {
+    border-color: var(--amber);
+  }
+
+  .input.err {
+    border-color: var(--danger);
+  }
+
+  .input:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+</style>

package/dist/components/forms/Textarea.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+interface Props extends HTMLTextareaAttributes {
+    /** Show the error (danger-border) state. Auto-set when inside a Field with an error prop. @default false */
+    error?: boolean;
+    [key: string]: unknown;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/forms/field-context.d.ts

@@ -0,0 +1,7 @@
+export interface FieldContext {
+    inputId: string;
+    hintId: string;
+    hasHint: boolean;
+    hasError: boolean;
+}
+export declare const FIELD_CONTEXT_KEY = "field";

package/dist/components/forms/field-context.js

@@ -0,0 +1 @@
+export const FIELD_CONTEXT_KEY = 'field';

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

@@ -0,0 +1,9 @@
+export { default as Input } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export { default as InputWrap } from './InputWrap.svelte';
+export { default as Field } from './Field.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Radio } from './Radio.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as Switch } from './Switch.svelte';

package/dist/components/forms/index.js

@@ -0,0 +1,9 @@
+export { default as Input } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export { default as InputWrap } from './InputWrap.svelte';
+export { default as Field } from './Field.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Radio } from './Radio.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as Switch } from './Switch.svelte';

package/dist/components/layout/Container.stories.svelte

@@ -0,0 +1,67 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Container from "./Container.svelte";
+  import Stack from "./Stack.svelte";
+  import Rule from "./Rule.svelte";
+  import Button from "../primitives/Button.svelte";
+
+  const { Story } = defineMeta({
+    title: "Layout/Container",
+    component: Container,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Large" args={{ size: "lg", "aria-label": "test-label" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root).toBeVisible();
+    const style = getComputedStyle(root);
+    await expect(style.maxWidth).toBe("1440px");
+    await expect(style.paddingBottom).toBe("80px");
+    await expect(style.paddingLeft).toBe("32px");
+    await expect(style.paddingRight).toBe("32px");
+    // margin: 0 auto — both left and right should be equal (auto-resolved)
+    await expect(style.marginLeft).toBe(style.marginRight);
+    // aria-label forwarded via ...rest
+    await expect(root.getAttribute("aria-label")).toBe("test-label");
+  }}>
+  <p>Large container — max-width 1440px. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <Rule />
+</Story>
+
+<Story name="Medium" args={{ size: "md" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    const style = getComputedStyle(root);
+    await expect(style.maxWidth).toBe("960px");
+    await expect(style.paddingBottom).toBe("64px");
+    await expect(style.paddingLeft).toBe("32px");
+    await expect(style.paddingRight).toBe("32px");
+  }}>
+  <Stack gap="sm">
+    <Button variant="primary">Order Now</Button>
+    <Button variant="ghost">View All →</Button>
+  </Stack>
+</Story>
+
+<Story name="Small" args={{ size: "sm" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    const style = getComputedStyle(root);
+    await expect(style.maxWidth).toBe("640px");
+    await expect(style.paddingBottom).toBe("48px");
+    await expect(style.paddingLeft).toBe("32px");
+    await expect(style.paddingRight).toBe("32px");
+  }}>
+  <p>Small container — max-width 640px. A narrow reading column for prose content.</p>
+</Story>
+
+<Story name="As Main" args={{ as: "main", size: "md" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root.tagName).toBe("MAIN");
+  }}>
+  <p>Rendered as a semantic main element.</p>
+</Story>

package/dist/components/layout/Container.stories.svelte.d.ts

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

package/dist/components/layout/Container.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { Snippet } from 'svelte'
+
+  type ContainerSize = 'lg' | 'md' | 'sm'
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** HTML element to render as. @default 'div' */
+    as?: string
+    /** Max-width preset: lg = 1440px, md = 960px, sm = 640px. @default 'lg' */
+    size?: ContainerSize
+    children?: Snippet
+    [key: string]: unknown
+  }
+
+  let { as = 'div', size = 'lg', children, ...rest }: Props = $props()
+</script>
+
+<svelte:element this={as} class="container-wrap" data-size={size} {...rest}>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .container-wrap {
+    margin: 0 auto;
+    padding-left: 32px;
+    padding-right: 32px;
+    container-type: inline-size;
+  }
+
+  .container-wrap[data-size="lg"] {
+    max-width: 1440px;
+    padding-bottom: 80px;
+  }
+
+  .container-wrap[data-size="md"] {
+    max-width: 960px;
+    padding-bottom: 64px;
+  }
+
+  .container-wrap[data-size="sm"] {
+    max-width: 640px;
+    padding-bottom: 48px;
+  }
+
+  @media (max-width: 720px) {
+    .container-wrap {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+  }
+</style>

package/dist/components/layout/Container.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type ContainerSize = 'lg' | 'md' | 'sm';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** HTML element to render as. @default 'div' */
+    as?: string;
+    /** Max-width preset: lg = 1440px, md = 960px, sm = 640px. @default 'lg' */
+    size?: ContainerSize;
+    children?: Snippet;
+    [key: string]: unknown;
+}
+declare const Container: import("svelte").Component<Props, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/components/layout/Grid.stories.svelte

@@ -0,0 +1,109 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Grid from "./Grid.svelte";
+  import TagPill from "../primitives/TagPill.svelte";
+
+  const { Story } = defineMeta({
+    title: "Layout/Grid",
+    component: Grid,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Three Column" args={{ cols: 3, gap: "sm" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root).toBeVisible();
+    const style = getComputedStyle(root);
+    await expect(style.display).toBe("grid");
+    // The implementer sets inline style — check element.style for the template string
+    await expect(
+      root.style.gridTemplateColumns.includes("3") ||
+      root.style.gridTemplateColumns === "repeat(3, 1fr)"
+    ).toBe(true);
+    // gap="sm" → var(--u2) → 16px
+    const gap = style.gap || style.columnGap;
+    await expect(gap.includes("16px")).toBe(true);
+  }}>
+  <div style="background: var(--bg-elev); padding: 16px;">Cell 1</div>
+  <div style="background: var(--bg-elev); padding: 16px;">Cell 2</div>
+  <div style="background: var(--bg-elev); padding: 16px;">Cell 3</div>
+  <div style="background: var(--bg-elev); padding: 16px;">Cell 4</div>
+  <div style="background: var(--bg-elev); padding: 16px;">Cell 5</div>
+  <div style="background: var(--bg-elev); padding: 16px;">Cell 6</div>
+  <div style="background: var(--bg-elev); padding: 16px;">Cell 7</div>
+  <div style="background: var(--bg-elev); padding: 16px;">Cell 8</div>
+  <div style="background: var(--bg-elev); padding: 16px;">Cell 9</div>
+</Story>
+
+<Story name="Two Column" args={{ cols: 2, gap: "lg" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    const style = getComputedStyle(root);
+    await expect(style.display).toBe("grid");
+    await expect(
+      root.style.gridTemplateColumns.includes("2") ||
+      root.style.gridTemplateColumns === "repeat(2, 1fr)"
+    ).toBe(true);
+    const gap = style.gap || style.columnGap;
+    await expect(gap.includes("32px")).toBe(true);
+  }}>
+  <div style="background: var(--bg-elev); padding: 16px;">Cell A</div>
+  <div style="background: var(--bg-elev); padding: 16px;">Cell B</div>
+  <div style="background: var(--bg-elev); padding: 16px;">Cell C</div>
+  <div style="background: var(--bg-elev); padding: 16px;">Cell D</div>
+</Story>
+
+<Story name="Four Column" args={{ cols: 4, gap: "sm" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    const style = getComputedStyle(root);
+    await expect(style.display).toBe("grid");
+    await expect(
+      root.style.gridTemplateColumns.includes("4") ||
+      root.style.gridTemplateColumns === "repeat(4, 1fr)"
+    ).toBe(true);
+  }}>
+  <div style="background: var(--bg-elev); padding: 16px;">1</div>
+  <div style="background: var(--bg-elev); padding: 16px;">2</div>
+  <div style="background: var(--bg-elev); padding: 16px;">3</div>
+  <div style="background: var(--bg-elev); padding: 16px;">4</div>
+  <div style="background: var(--bg-elev); padding: 16px;">5</div>
+  <div style="background: var(--bg-elev); padding: 16px;">6</div>
+  <div style="background: var(--bg-elev); padding: 16px;">7</div>
+  <div style="background: var(--bg-elev); padding: 16px;">8</div>
+</Story>
+
+<Story name="Auto Fill" args={{ cols: "auto", minColWidth: "160px", gap: "sm" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    const style = getComputedStyle(root);
+    await expect(style.display).toBe("grid");
+    const templateCols = root.style.gridTemplateColumns;
+    await expect(
+      templateCols.includes("auto-fill") || templateCols.includes("minmax")
+    ).toBe(true);
+    // minColWidth="160px" should be reflected in the template string
+    await expect(templateCols.includes("160px")).toBe(true);
+  }}>
+  <TagPill>Alpha</TagPill>
+  <TagPill variant="amber">Beta</TagPill>
+  <TagPill variant="cyan">Gamma</TagPill>
+  <TagPill>Delta</TagPill>
+  <TagPill variant="amber">Epsilon</TagPill>
+  <TagPill>Zeta</TagPill>
+</Story>
+
+<Story name="Single Column" args={{ cols: 1, gap: "md" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    const style = getComputedStyle(root);
+    await expect(style.display).toBe("grid");
+    const templateCols = root.style.gridTemplateColumns;
+    await expect(templateCols).toBe("1fr");
+  }}>
+  <div style="background: var(--bg-elev); padding: 16px;">Row 1</div>
+  <div style="background: var(--bg-elev); padding: 16px;">Row 2</div>
+  <div style="background: var(--bg-elev); padding: 16px;">Row 3</div>
+</Story>