@dxlbnl/ui 0.1.0

package/dist/components/navigation/Nav.svelte.d.ts

@@ -0,0 +1,21 @@
+interface BreadcrumbItem {
+    label: string;
+    href: string;
+}
+interface NavLink {
+    href: string;
+    label: string;
+    active?: boolean;
+}
+interface Props {
+    /** Navigation links to render in the top bar. @default [] */
+    links?: NavLink[];
+    /** Brand name shown next to the status LED. @default 'DEXTERLABS' */
+    siteName?: string;
+    /** Optional breadcrumb trail. @default [] */
+    breadcrumbs?: BreadcrumbItem[];
+    [key: string]: unknown;
+}
+declare const Nav: import("svelte").Component<Props, {}, "">;
+type Nav = ReturnType<typeof Nav>;
+export default Nav;

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

@@ -0,0 +1,2 @@
+export { default as Nav } from './Nav.svelte';
+export { default as Breadcrumb } from './Breadcrumb.svelte';

package/dist/components/navigation/index.js

@@ -0,0 +1,2 @@
+export { default as Nav } from './Nav.svelte';
+export { default as Breadcrumb } from './Breadcrumb.svelte';

package/dist/components/patterns/ActivityRow.stories.svelte

@@ -0,0 +1,45 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import ActivityRow from "./ActivityRow.svelte";
+
+  const { Story } = defineMeta({
+    title: "Patterns/ActivityRow",
+    component: ActivityRow,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Ok Status" args={{ timestamp: "14:22", description: "PDX-2 thermal check passed", status: "ok" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const root = canvasElement.firstElementChild;
+    await expect(root).toBeVisible();
+    await expect(canvas.getByText("14:22")).toBeVisible();
+    await expect(canvas.getByText("PDX-2 thermal check passed")).toBeVisible();
+    const led = canvasElement.querySelector(".led");
+    await expect(led).toBeVisible();
+  }} />
+
+<Story name="Amber Status" args={{ timestamp: "13:55", description: "New order: DISTRANS-AR1 · #DXL-0044", status: "amber" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("13:55")).toBeVisible();
+    await expect(canvas.getByText(/New order/i)).toBeVisible();
+  }} />
+
+<Story name="With Actor" args={{ timestamp: "09:30", actor: "PDX-2", description: "All rails nominal", status: "ok" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("PDX-2")).toBeVisible();
+    await expect(canvas.getByText("All rails nominal")).toBeVisible();
+  }} />
+
+<Story name="Off Status" args={{ timestamp: "08:00", description: "System boot", status: "off" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const root = canvasElement.firstElementChild;
+    await expect(root).toBeVisible();
+    await expect(canvas.getByText("System boot")).toBeVisible();
+  }} />
+

package/dist/components/patterns/ActivityRow.stories.svelte.d.ts

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

package/dist/components/patterns/ActivityRow.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import Led from '../primitives/Led.svelte'
+  import Inline from '../layout/Inline.svelte'
+
+  type LedStatus = 'ok' | 'amber' | 'danger' | 'off'
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Timestamp string displayed on the left. */
+    timestamp: string
+    /** Optional actor name shown before the description. */
+    actor?: string
+    /** Event description text. */
+    description: string
+    /** LED status colour. @default 'off' */
+    status?: LedStatus
+    [key: string]: unknown
+  }
+
+  let {
+    timestamp,
+    actor,
+    description,
+    status = 'off',
+    ...rest
+  }: Props = $props()
+</script>
+
+<div class="activity-row" {...rest}>
+  <Inline gap="sm">
+    <span class="activity-time">{timestamp}</span>
+    <Led color={status} />
+    <span class="activity-msg">
+      {#if actor}
+        <span class="activity-actor">{actor}</span>
+        <span aria-hidden="true"> · </span>
+      {/if}
+      {description}
+    </span>
+  </Inline>
+</div>
+
+<style>
+  .activity-row {
+    padding: 7px 0;
+    border-bottom: 1px dashed var(--rule);
+    font-family: var(--mono);
+    font-size: var(--t-micro);
+    letter-spacing: 0.04em;
+  }
+
+  .activity-row:last-child {
+    border-bottom: none;
+  }
+
+  .activity-time {
+    color: var(--ink-faint);
+    flex-shrink: 0;
+  }
+
+  .activity-msg {
+    color: var(--ink-dim);
+    flex: 1;
+  }
+
+  .activity-actor {
+    color: var(--ink);
+  }
+</style>

package/dist/components/patterns/ActivityRow.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type LedStatus = 'ok' | 'amber' | 'danger' | 'off';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Timestamp string displayed on the left. */
+    timestamp: string;
+    /** Optional actor name shown before the description. */
+    actor?: string;
+    /** Event description text. */
+    description: string;
+    /** LED status colour. @default 'off' */
+    status?: LedStatus;
+    [key: string]: unknown;
+}
+declare const ActivityRow: import("svelte").Component<Props, {}, "">;
+type ActivityRow = ReturnType<typeof ActivityRow>;
+export default ActivityRow;

package/dist/components/patterns/Alert.stories.svelte

@@ -0,0 +1,63 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Alert from "./Alert.svelte";
+  import { resolveTokenFgColor } from "../../storybook-utils.js";
+
+  const { Story } = defineMeta({
+    title: "Patterns/Alert",
+    component: Alert,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Ok" args={{ variant: "ok", title: "Build successful", message: "All rails nominal." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const root = canvas.getByRole("status");
+    await expect(root).toBeVisible();
+    await expect(canvas.getByText("Build successful")).toBeVisible();
+    await expect(canvas.getByText("All rails nominal.")).toBeVisible();
+    const tag = canvas.getByText("ok");
+    await expect(tag).toHaveAttribute("aria-hidden", "true");
+    const okColor = resolveTokenFgColor("--ok");
+    await expect(getComputedStyle(root).borderLeftColor).toBe(okColor);
+  }} />
+
+<Story name="Amber" args={{ variant: "amber", title: "High load", message: "+12V rail at 88%." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const root = canvas.getByRole("status");
+    await expect(root).toBeVisible();
+    await expect(canvas.getByText("High load")).toBeVisible();
+    const amberColor = resolveTokenFgColor("--amber");
+    await expect(getComputedStyle(root).borderLeftColor).toBe(amberColor);
+  }} />
+
+<Story name="Danger" args={{ variant: "danger", title: "Thermal fault", message: "Over-temperature protection triggered." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const root = canvas.getByRole("status");
+    await expect(root).toBeVisible();
+    await expect(canvas.getByText("Thermal fault")).toBeVisible();
+    const dangerColor = resolveTokenFgColor("--danger");
+    await expect(getComputedStyle(root).borderLeftColor).toBe(dangerColor);
+  }} />
+
+<Story name="Info" args={{ variant: "info", title: "Firmware update available", message: "v2.1.0 → v2.2.0." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const root = canvas.getByRole("status");
+    await expect(root).toBeVisible();
+    const cyanColor = resolveTokenFgColor("--cyan");
+    await expect(getComputedStyle(root).borderLeftColor).toBe(cyanColor);
+  }} />
+
+<Story name="No Message" args={{ variant: "ok", title: "Status OK" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const root = canvas.getByRole("status");
+    await expect(root).toBeVisible();
+    await expect(canvas.getByText("Status OK")).toBeVisible();
+    await expect(canvasElement.querySelector(".alert-msg")).toBeNull();
+  }} />

package/dist/components/patterns/Alert.stories.svelte.d.ts

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

package/dist/components/patterns/Alert.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { Snippet } from 'svelte'
+  import Stack from '../layout/Stack.svelte'
+
+  type AlertVariant = 'ok' | 'amber' | 'danger' | 'info'
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Colour variant — drives the tag glyph and border accent. @default 'info' */
+    variant?: AlertVariant
+    /** Bold title text shown in the alert header. */
+    title: string
+    /** Body message text. */
+    message?: string
+    children?: Snippet
+    [key: string]: unknown
+  }
+
+  let {
+    variant = 'info',
+    title,
+    message,
+    children,
+    ...rest
+  }: Props = $props()
+
+  const TAG_GLYPHS: Record<AlertVariant, string> = {
+    ok: 'ok',
+    amber: '!!',
+    danger: 'err',
+    info: 'inf',
+  }
+</script>
+
+<div class="alert alert--{variant}" role="status" {...rest}>
+  <span class="alert-tag" aria-hidden="true">{TAG_GLYPHS[variant]}</span>
+  <Stack gap="sm">
+    <span class="alert-title">{title}</span>
+    {#if message}
+      <span class="alert-msg">{message}</span>
+    {/if}
+    {@render children?.()}
+  </Stack>
+</div>
+
+<style>
+  .alert {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px 16px;
+    border-left: 2px solid;
+    font-size: var(--t-body);
+    line-height: 1.5;
+  }
+
+  .alert--ok     { border-color: var(--ok);     background: color-mix(in srgb, var(--ok)     8%, transparent); }
+  .alert--amber  { border-color: var(--amber);  background: color-mix(in srgb, var(--amber)  8%, transparent); }
+  .alert--danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
+  .alert--info   { border-color: var(--cyan);   background: color-mix(in srgb, var(--cyan)   8%, transparent); }
+
+  .alert-tag {
+    font-family: var(--mono);
+    font-size: var(--t-micro);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+  .alert--ok     .alert-tag { color: var(--ok); }
+  .alert--amber  .alert-tag { color: var(--amber); }
+  .alert--danger .alert-tag { color: var(--danger); }
+  .alert--info   .alert-tag { color: var(--cyan); }
+
+  .alert-title {
+    font-family: var(--mono);
+    font-size: var(--t-micro);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+  .alert--ok     .alert-title { color: var(--ok); }
+  .alert--amber  .alert-title { color: var(--amber); }
+  .alert--danger .alert-title { color: var(--danger); }
+  .alert--info   .alert-title { color: var(--cyan); }
+
+  .alert-msg {
+    font-size: var(--t-mono);
+    color: var(--ink-dim);
+    line-height: 1.5;
+  }
+</style>

package/dist/components/patterns/Alert.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type AlertVariant = 'ok' | 'amber' | 'danger' | 'info';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Colour variant — drives the tag glyph and border accent. @default 'info' */
+    variant?: AlertVariant;
+    /** Bold title text shown in the alert header. */
+    title: string;
+    /** Body message text. */
+    message?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+}
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/patterns/CtaBlock.stories.svelte

@@ -0,0 +1,62 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import CtaBlock from "./CtaBlock.svelte";
+  import Button from "../primitives/Button.svelte";
+  import { resolveTokenFgColor } from "../../storybook-utils.js";
+
+  const { Story } = defineMeta({
+    title: "Patterns/CtaBlock",
+    component: CtaBlock,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Default" args={{ heading: "Conduit PDX-2", eyebrow: "// CATALOGUE · HARDWARE", subtext: "Power your entire Eurorack from a laptop charger." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root).toBeVisible();
+    await expect(canvas.getByText("Conduit PDX-2")).toBeVisible();
+    await expect(canvas.getByText(/CATALOGUE · HARDWARE/i)).toBeVisible();
+    await expect(canvas.getByText("Power your entire Eurorack from a laptop charger.")).toBeVisible();
+    const amberColor = resolveTokenFgColor("--amber");
+    await expect(getComputedStyle(root).borderColor).toBe(amberColor);
+  }}>
+  VIEW →
+</Story>
+
+<Story name="No Eyebrow" args={{ heading: "View All Projects" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("View All Projects")).toBeVisible();
+    await expect(canvasElement.querySelector(".cta-eyebrow")).toBeNull();
+  }} />
+
+<Story name="As Link" args={{ as: "a", href: "/catalogue", heading: "Browse Catalogue", subtext: "All Dexterlabs products." }}
+  play={async ({ canvasElement }) => {
+    const anchor = canvasElement.querySelector("a");
+    await expect(anchor).toHaveAttribute("href", "/catalogue");
+    await expect(anchor!.tagName).toBe("A");
+  }}>
+  BROWSE →
+</Story>
+
+<Story name="Border Color" args={{ heading: "Check the Border" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild!;
+    const amberColor = resolveTokenFgColor("--amber");
+    await expect(getComputedStyle(root).borderColor).toBe(amberColor);
+  }} />
+
+<Story name="Full Props" args={{ eyebrow: "// CATALOGUE · HARDWARE", heading: "Conduit PDX-2", subtext: "Power your entire Eurorack from a laptop charger." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText(/CATALOGUE · HARDWARE/i)).toBeVisible();
+    await expect(canvas.getByText("Conduit PDX-2")).toBeVisible();
+    await expect(canvas.getByText("Power your entire Eurorack from a laptop charger.")).toBeVisible();
+    await expect(canvas.getByRole("button", { name: /ORDER NOW/i })).toBeVisible();
+    await expect(canvasElement.querySelector(".cta-eyebrow")).not.toBeNull();
+  }}>
+  <Button variant="primary">ORDER NOW</Button>
+</Story>

package/dist/components/patterns/CtaBlock.stories.svelte.d.ts

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

package/dist/components/patterns/CtaBlock.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import Stack from '../layout/Stack.svelte'
+  import Spread from '../layout/Spread.svelte'
+  import Text from '../primitives/Text.svelte'
+
+  interface Props {
+    /** HTML element to render as. @default 'div' */
+    as?: string
+    /** Small mono label shown above the heading. */
+    eyebrow?: string
+    /** Primary heading text. */
+    heading: string
+    /** Secondary descriptive text below the heading. */
+    subtext?: string
+    children?: Snippet
+    [key: string]: unknown
+  }
+
+  let {
+    as = 'div',
+    eyebrow,
+    heading,
+    subtext,
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<svelte:element this={as} class="cta-block" {...rest}>
+  <Spread gap="md">
+    <Stack gap="xs">
+      {#if eyebrow}
+        <Text variant="eyebrow" class="cta-eyebrow">{eyebrow}</Text>
+      {/if}
+      <span class="cta-heading">{heading}</span>
+      {#if subtext}
+        <span class="cta-desc">{subtext}</span>
+      {/if}
+    </Stack>
+    {#if children}
+      <div class="cta-action">
+        {@render children()}
+      </div>
+    {/if}
+  </Spread>
+</svelte:element>
+
+<style>
+  .cta-block {
+    border: 1px solid var(--amber);
+    padding: 24px 32px;
+    color: inherit;
+    transition: background var(--transition);
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  .cta-block:hover {
+    background: color-mix(in srgb, var(--amber) 6%, transparent);
+  }
+
+  .cta-heading {
+    font-weight: 500;
+    font-size: var(--t-lede);
+    letter-spacing: -0.01em;
+    color: var(--ink);
+  }
+
+  .cta-desc {
+    font-family: var(--mono);
+    font-size: var(--t-mono);
+    color: var(--ink-dim);
+    line-height: 1.4;
+  }
+
+  .cta-action {
+    flex-shrink: 0;
+  }
+</style>

package/dist/components/patterns/CtaBlock.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** HTML element to render as. @default 'div' */
+    as?: string;
+    /** Small mono label shown above the heading. */
+    eyebrow?: string;
+    /** Primary heading text. */
+    heading: string;
+    /** Secondary descriptive text below the heading. */
+    subtext?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+}
+declare const CtaBlock: import("svelte").Component<Props, {}, "">;
+type CtaBlock = ReturnType<typeof CtaBlock>;
+export default CtaBlock;

package/dist/components/patterns/KvList.stories.svelte

@@ -0,0 +1,48 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import KvList from "./KvList.svelte";
+  import { resolveTokenFgColor } from "../../storybook-utils.js";
+
+  const { Story } = defineMeta({
+    title: "Patterns/KvList",
+    component: KvList,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Default" args={{ items: [{ key: "+12V Output", value: "3.0A" }, { key: "-12V Output", value: "1.5A" }, { key: "Efficiency", value: ">92%", color: "amber" }, { key: "Width", value: "4 HP" }] }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const root = canvasElement.firstElementChild;
+    await expect(root).toBeVisible();
+    await expect(canvas.getByText(/\+12V Output/i)).toBeVisible();
+    await expect(canvas.getByText("3.0A")).toBeVisible();
+    const amberColor = resolveTokenFgColor("--amber");
+    await expect(getComputedStyle(canvas.getByText(">92%")).color).toBe(amberColor);
+    const rows = canvasElement.querySelectorAll(".kv-row");
+    await expect(rows.length).toBe(4);
+    const lastRow = rows[rows.length - 1];
+    await expect(getComputedStyle(lastRow).borderBottomStyle).toBe("none");
+  }} />
+
+<Story name="Single Item" args={{ items: [{ key: "Status", value: "Nominal", color: "ok" }] }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const rows = canvasElement.querySelectorAll(".kv-row");
+    await expect(rows.length).toBe(1);
+    const okColor = resolveTokenFgColor("--ok");
+    await expect(getComputedStyle(canvas.getByText("Nominal")).color).toBe(okColor);
+    await expect(getComputedStyle(rows[0]).borderBottomStyle).toBe("none");
+  }} />
+
+<Story name="All Colors" args={{ items: [{ key: "Ok", value: "Pass", color: "ok" }, { key: "Amber", value: "Warn", color: "amber" }, { key: "Danger", value: "Fail", color: "danger" }, { key: "Cyan", value: "Info", color: "cyan" }, { key: "Default", value: "Normal" }] }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const rows = canvasElement.querySelectorAll(".kv-row");
+    await expect(rows.length).toBe(5);
+    const okColor = resolveTokenFgColor("--ok");
+    await expect(getComputedStyle(canvas.getByText("Pass")).color).toBe(okColor);
+    const inkColor = resolveTokenFgColor("--ink");
+    await expect(getComputedStyle(canvas.getByText("Normal")).color).toBe(inkColor);
+  }} />

package/dist/components/patterns/KvList.stories.svelte.d.ts

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