@dxlbnl/ui 0.1.0

package/dist/components/primitives/Text.stories.svelte

@@ -0,0 +1,252 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Text from "./Text.svelte";
+
+  const { Story } = defineMeta({
+    title: "Primitives/Text",
+    component: Text,
+    tags: ["autodocs"],
+  });
+</script>
+
+<!-- AC-4: variant="body" renders <p class="body-text"> -->
+<!-- AC-9: default variant renders body-text -->
+<Story name="Body" args={{ variant: "body" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild!;
+    await expect(root.tagName).toBe("P");
+    await expect(root.classList.contains("body-text")).toBe(true);
+  }}>
+  The quick brown fox jumps over the lazy dog.
+</Story>
+
+<!-- AC-5: variant="lede" renders <p class="body-lede"> -->
+<Story name="Lede" args={{ variant: "lede" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild!;
+    await expect(root.tagName).toBe("P");
+    await expect(root.classList.contains("body-lede")).toBe(true);
+  }}>
+  A brief but compelling opening paragraph that sets the stage.
+</Story>
+
+<!-- AC-6: variant="mono" renders <span class="mono-label"> -->
+<Story name="Mono" args={{ variant: "mono" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild!;
+    await expect(root.tagName).toBe("SPAN");
+    await expect(root.classList.contains("mono-label")).toBe(true);
+    await expect(getComputedStyle(root).textTransform).toBe("uppercase");
+  }}>
+  READ →
+</Story>
+
+<!-- AC-7: variant="eyebrow" renders <span class="eyebrow"> -->
+<Story name="Eyebrow" args={{ variant: "eyebrow" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild!;
+    await expect(root.tagName).toBe("SPAN");
+    await expect(root.classList.contains("eyebrow")).toBe(true);
+    await expect(getComputedStyle(root).textTransform).toBe("uppercase");
+  }}>
+  Category
+</Story>
+
+<!-- AC-10 through AC-14: color prop maps to inline CSS custom properties -->
+<Story name="Colors" args={{ variant: "body" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const inkEl = canvas.getByTestId("color-ink");
+    await expect(inkEl.getAttribute("style")).toContain("var(--ink)");
+
+    const dimEl = canvas.getByTestId("color-dim");
+    await expect(dimEl.getAttribute("style")).toContain("var(--ink-dim)");
+
+    const faintEl = canvas.getByTestId("color-faint");
+    await expect(faintEl.getAttribute("style")).toContain("var(--ink-faint)");
+
+    const amberEl = canvas.getByTestId("color-amber");
+    await expect(amberEl.getAttribute("style")).toContain("var(--amber)");
+
+    const cyanEl = canvas.getByTestId("color-cyan");
+    await expect(cyanEl.getAttribute("style")).toContain("var(--cyan)");
+
+    const okEl = canvas.getByTestId("color-ok");
+    await expect(okEl.getAttribute("style")).toContain("var(--ok)");
+
+    const dangerEl = canvas.getByTestId("color-danger");
+    await expect(dangerEl.getAttribute("style")).toContain("var(--danger)");
+
+    const noColorEl = canvas.getByTestId("color-none");
+    const styleAttr = noColorEl.getAttribute("style");
+    await expect(!styleAttr || !styleAttr.includes("color:")).toBe(true);
+  }}>
+  <Text color="ink" data-testid="color-ink">Ink text</Text>
+  <Text color="dim" data-testid="color-dim">Dim text</Text>
+  <Text color="faint" data-testid="color-faint">Faint text</Text>
+  <Text color="amber" data-testid="color-amber">Amber text</Text>
+  <Text color="cyan" data-testid="color-cyan">Cyan text</Text>
+  <Text color="ok" data-testid="color-ok">OK text</Text>
+  <Text color="danger" data-testid="color-danger">Danger text</Text>
+  <Text data-testid="color-none">No color</Text>
+</Story>
+
+<!-- AC-8: as prop overrides default tag -->
+<Story name="PolymorphicAs" args={{ variant: "body", as: "span" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild!;
+    await expect(root.tagName).toBe("SPAN");
+    await expect(root.classList.contains("body-text")).toBe(true);
+  }}>
+  Inline body text rendered as span.
+</Story>
+
+<!-- AC-15: extra class is merged alongside variant class -->
+<!-- AC-16: data attributes are forwarded -->
+<Story name="ClassMerge" args={{ variant: "mono", class: "my-class", "data-testid": "probe" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild!;
+    await expect(root.classList.contains("mono-label")).toBe(true);
+    await expect(root.classList.contains("my-class")).toBe(true);
+    await expect(root.getAttribute("data-testid")).toBe("probe");
+  }}>
+  Merged classes
+</Story>
+
+<!-- AC-9: no variant prop defaults to body-text on <p> -->
+<Story name="DefaultVariant"
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild!;
+    await expect(root.tagName).toBe("P");
+    await expect(root.classList.contains("body-text")).toBe(true);
+  }}>
+  Default variant text.
+</Story>
+
+<!-- B26 AC-3, AC-17: size="xs" on mono → 12px, data-size="xs" present -->
+<Story name="SizeXs" args={{ variant: "mono", size: "xs" }}
+  play={async ({ canvasElement }) => {
+    const el = canvasElement.firstElementChild!;
+    await expect(el.getAttribute("data-size")).toBe("xs");
+    await expect(getComputedStyle(el).fontSize).toBe("12px");
+  }}>
+  Micro label
+</Story>
+
+<!-- B26 AC-4: size="sm" on mono → 14px -->
+<Story name="SizeSm" args={{ variant: "mono", size: "sm" }}
+  play={async ({ canvasElement }) => {
+    const el = canvasElement.firstElementChild!;
+    await expect(el.getAttribute("data-size")).toBe("sm");
+    await expect(getComputedStyle(el).fontSize).toBe("14px");
+  }}>
+  Small label
+</Story>
+
+<!-- B26 AC-5, AC-41: size="md" on mono → 16px -->
+<Story name="SizeMd" args={{ variant: "mono", size: "md" }}
+  play={async ({ canvasElement }) => {
+    const el = canvasElement.firstElementChild!;
+    await expect(el.getAttribute("data-size")).toBe("md");
+    await expect(getComputedStyle(el).fontSize).toBe("16px");
+  }}>
+  Medium mono text.
+</Story>
+
+<!-- B26 AC-6: size="lg" on lede → 19px -->
+<Story name="SizeLg" args={{ variant: "lede", size: "lg" }}
+  play={async ({ canvasElement }) => {
+    const el = canvasElement.firstElementChild!;
+    await expect(el.getAttribute("data-size")).toBe("lg");
+    await expect(getComputedStyle(el).fontSize).toBe("19px");
+  }}>
+  Large lede text.
+</Story>
+
+<!-- B26 AC-7, AC-41: size="xl" on body → 24px -->
+<Story name="SizeXl" args={{ variant: "body", size: "xl" }}
+  play={async ({ canvasElement }) => {
+    const el = canvasElement.firstElementChild!;
+    await expect(el.getAttribute("data-size")).toBe("xl");
+    await expect(getComputedStyle(el).fontSize).toBe("24px");
+  }}>
+  Extra-large body text.
+</Story>
+
+<!-- B26 AC-8: natural defaults — no size prop → variant's natural font-size -->
+<Story name="NaturalDefaults" args={{ variant: "body" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const eyebrow = canvas.getByTestId("natural-eyebrow");
+    await expect(getComputedStyle(eyebrow).fontSize).toBe("12px");
+    const mono = canvas.getByTestId("natural-mono");
+    await expect(getComputedStyle(mono).fontSize).toBe("14px");
+    const body = canvas.getByTestId("natural-body");
+    await expect(getComputedStyle(body).fontSize).toBe("16px");
+    const lede = canvas.getByTestId("natural-lede");
+    await expect(getComputedStyle(lede).fontSize).toBe("19px");
+  }}>
+  <Text variant="eyebrow" data-testid="natural-eyebrow">Eyebrow</Text>
+  <Text variant="mono" data-testid="natural-mono">Mono</Text>
+  <Text variant="body" data-testid="natural-body">Body</Text>
+  <Text variant="lede" data-testid="natural-lede">Lede</Text>
+</Story>
+
+<!-- B26 AC-9: size overrides font-size only; other variant properties (letterSpacing, textTransform) preserved -->
+<Story name="SizePreservesVariant" args={{ variant: "eyebrow", size: "lg" }}
+  play={async ({ canvasElement }) => {
+    const el = canvasElement.firstElementChild!;
+    await expect(getComputedStyle(el).fontSize).toBe("19px");
+    await expect(getComputedStyle(el).letterSpacing).toBe("2.28px");
+    await expect(getComputedStyle(el).textTransform).toBe("uppercase");
+  }}>
+  Eyebrow at lede size
+</Story>
+
+<!-- B26 AC-20, AC-42: case="none" suppresses uppercase on mono -->
+<Story name="CaseNone" args={{ variant: "mono", case: "none" }}
+  play={async ({ canvasElement }) => {
+    const el = canvasElement.firstElementChild!;
+    await expect(el.getAttribute("data-case")).toBe("none");
+    await expect(getComputedStyle(el).textTransform).toBe("none");
+  }}>
+  not uppercase
+</Story>
+
+<!-- B26 AC-18, AC-42: case="lower" produces lowercase -->
+<Story name="CaseLower" args={{ variant: "mono", case: "lower" }}
+  play={async ({ canvasElement }) => {
+    const el = canvasElement.firstElementChild!;
+    await expect(el.getAttribute("data-case")).toBe("lower");
+    await expect(getComputedStyle(el).textTransform).toBe("lowercase");
+  }}>
+  lowercase label
+</Story>
+
+<!-- B26 AC-19, AC-42: case="upper" produces uppercase on body variant -->
+<Story name="CaseUpper" args={{ variant: "body", case: "upper" }}
+  play={async ({ canvasElement }) => {
+    const el = canvasElement.firstElementChild!;
+    await expect(el.getAttribute("data-case")).toBe("upper");
+    await expect(getComputedStyle(el).textTransform).toBe("uppercase");
+  }}>
+  Uppercased body text.
+</Story>
+
+<!-- B26 AC-21: mono and eyebrow default to uppercase; body defaults to none (no case prop) -->
+<Story name="DefaultCase" args={{ variant: "body" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const monoEl = canvas.getByTestId("default-case-mono");
+    await expect(getComputedStyle(monoEl).textTransform).toBe("uppercase");
+    const bodyEl = canvas.getByTestId("default-case-body");
+    await expect(getComputedStyle(bodyEl).textTransform).toBe("none");
+    const eyebrowEl = canvas.getByTestId("default-case-eyebrow");
+    await expect(getComputedStyle(eyebrowEl).textTransform).toBe("uppercase");
+  }}>
+  <Text variant="mono" data-testid="default-case-mono">Mono default</Text>
+  <Text variant="body" data-testid="default-case-body">Body default</Text>
+  <Text variant="eyebrow" data-testid="default-case-eyebrow">Eyebrow</Text>
+</Story>

package/dist/components/primitives/Text.stories.svelte.d.ts

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

package/dist/components/primitives/Text.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import type { ClassValue } from 'svelte/elements'
+  import type { Snippet } from 'svelte'
+
+  type TextVariant = 'body' | 'lede' | 'mono' | 'eyebrow'
+  type TextColor = 'ink' | 'dim' | 'faint' | 'amber' | 'cyan' | 'ok' | 'danger'
+  type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  type CaseVariant = 'upper' | 'lower' | 'none'
+
+  interface Props {
+    /** Typography style to apply. @default 'body' */
+    variant?: TextVariant
+    /** Text colour mapped to a design token. */
+    color?: TextColor
+    /** Font size override mapped to a type-scale token. */
+    size?: SizeVariant
+    /** Text transform override. */
+    case?: CaseVariant
+    /** HTML element to render as — overrides the variant default. */
+    as?: string
+    children?: Snippet
+    class?: ClassValue | null
+    style?: string | null
+    [key: string]: unknown
+  }
+
+  const DEFAULT_TAG: Record<TextVariant, string> = {
+    body: 'p',
+    lede: 'p',
+    mono: 'span',
+    eyebrow: 'span',
+  }
+
+  const VARIANT_CLASS: Record<TextVariant, string> = {
+    body: 'body-text',
+    lede: 'body-lede',
+    mono: 'mono-label',
+    eyebrow: 'eyebrow',
+  }
+
+  const COLOR_MAP: Record<NonNullable<TextColor>, string> = {
+    ink: 'ink',
+    dim: 'ink-dim',
+    faint: 'ink-faint',
+    amber: 'amber',
+    cyan: 'cyan',
+    ok: 'ok',
+    danger: 'danger',
+  }
+
+  let { variant = 'body', color, size, case: textCase, as, children, class: klass = '', style, ...rest }: Props = $props()
+
+  const resolvedAs = $derived(as ?? DEFAULT_TAG[variant])
+  const colorStyle = $derived(color ? `color: var(--${COLOR_MAP[color]});` : '')
+  const mergedStyle = $derived([colorStyle, style].filter(Boolean).join(' ') || undefined)
+</script>
+
+<svelte:element this={resolvedAs} class={[VARIANT_CLASS[variant], klass]} style={mergedStyle} data-size={size || undefined} data-case={textCase || undefined} {...rest}>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .body-text {
+    font-family: var(--sans);
+    font-size: var(--t-body);
+    line-height: 1.65;
+  }
+
+  .body-lede {
+    font-family: var(--sans);
+    font-size: var(--t-lede);
+    line-height: 1.55;
+    color: var(--ink-dim);
+  }
+
+  .mono-label {
+    font-family: var(--mono);
+    font-size: var(--t-mono);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--ink-dim);
+  }
+
+  .eyebrow {
+    font-family: var(--mono);
+    font-size: var(--t-micro);
+    letter-spacing: 0.12em;
+    color: var(--ink-faint);
+    text-transform: uppercase;
+  }
+
+  [data-size="xs"] { font-size: var(--t-micro) }
+  [data-size="sm"] { font-size: var(--t-mono) }
+  [data-size="md"] { font-size: var(--t-body) }
+  [data-size="lg"] { font-size: var(--t-lede) }
+  [data-size="xl"] { font-size: var(--t-h3) }
+
+  [data-case="upper"] { text-transform: uppercase }
+  [data-case="lower"] { text-transform: lowercase }
+  [data-case="none"]  { text-transform: none }
+</style>

package/dist/components/primitives/Text.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { ClassValue } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type TextVariant = 'body' | 'lede' | 'mono' | 'eyebrow';
+type TextColor = 'ink' | 'dim' | 'faint' | 'amber' | 'cyan' | 'ok' | 'danger';
+type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type CaseVariant = 'upper' | 'lower' | 'none';
+interface Props {
+    /** Typography style to apply. @default 'body' */
+    variant?: TextVariant;
+    /** Text colour mapped to a design token. */
+    color?: TextColor;
+    /** Font size override mapped to a type-scale token. */
+    size?: SizeVariant;
+    /** Text transform override. */
+    case?: CaseVariant;
+    /** HTML element to render as — overrides the variant default. */
+    as?: string;
+    children?: Snippet;
+    class?: ClassValue | null;
+    style?: string | null;
+    [key: string]: unknown;
+}
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

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

@@ -0,0 +1,5 @@
+export { default as Button } from './Button.svelte';
+export { default as Led } from './Led.svelte';
+export { default as TagPill } from './TagPill.svelte';
+export { default as Text } from './Text.svelte';
+export { default as Heading } from './Heading.svelte';

package/dist/components/primitives/index.js

@@ -0,0 +1,5 @@
+export { default as Button } from './Button.svelte';
+export { default as Led } from './Led.svelte';
+export { default as TagPill } from './TagPill.svelte';
+export { default as Text } from './Text.svelte';
+export { default as Heading } from './Heading.svelte';

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { Button, Led, TagPill, Text, Heading } from './components/primitives/index.js';
+export { Stack, Inline, Spread, Grid, Container, Rule, Prose } from './components/layout/index.js';
+export { Card, ProductCard, ProjectCard, NoteCard } from './components/cards/index.js';
+export { Nav, Breadcrumb } from './components/navigation/index.js';
+export { Input, Textarea, Select, InputWrap, Field, Checkbox, Radio, RadioGroup, Switch } from './components/forms/index.js';
+export { Modal, Toast, ToastRegion } from './components/feedback/index.js';
+export { toast } from './stores/toast.js';
+export type { ToastItem, ToastVariant, ToastOptions } from './stores/toast.js';
+export { Alert, CtaBlock, StatCard, KvList, ProgressBar, ActivityRow, SectionHead, SectionFoot, PageHero } from './components/patterns/index.js';
+export { Accordion, AccordionItem, Tabs, Table } from './components/data/index.js';

package/dist/index.js

@@ -0,0 +1,10 @@
+// Component exports — populated as components are built through the backlog
+export { Button, Led, TagPill, Text, Heading } from './components/primitives/index.js';
+export { Stack, Inline, Spread, Grid, Container, Rule, Prose } from './components/layout/index.js';
+export { Card, ProductCard, ProjectCard, NoteCard } from './components/cards/index.js';
+export { Nav, Breadcrumb } from './components/navigation/index.js';
+export { Input, Textarea, Select, InputWrap, Field, Checkbox, Radio, RadioGroup, Switch } from './components/forms/index.js';
+export { Modal, Toast, ToastRegion } from './components/feedback/index.js';
+export { toast } from './stores/toast.js';
+export { Alert, CtaBlock, StatCard, KvList, ProgressBar, ActivityRow, SectionHead, SectionFoot, PageHero } from './components/patterns/index.js';
+export { Accordion, AccordionItem, Tabs, Table } from './components/data/index.js';

package/dist/stores/toast.d.ts

@@ -0,0 +1,19 @@
+export type ToastVariant = "success" | "warning" | "error";
+export interface ToastItem {
+    id: string;
+    message: string;
+    variant: ToastVariant;
+    duration: number;
+}
+export interface ToastOptions {
+    variant?: ToastVariant;
+    duration?: number;
+}
+declare function push(message: string, options?: ToastOptions): string;
+declare function dismiss(id: string): void;
+export declare const toast: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<ToastItem[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    push: typeof push;
+    dismiss: typeof dismiss;
+};
+export {};

package/dist/stores/toast.js

@@ -0,0 +1,22 @@
+import { writable } from "svelte/store";
+const _store = writable([]);
+let _idCounter = 0;
+function push(message, options) {
+    const id = `toast-${++_idCounter}`;
+    const item = {
+        id,
+        message,
+        variant: options?.variant ?? "success",
+        duration: options?.duration ?? 5000,
+    };
+    _store.update((items) => [...items, item]);
+    return id;
+}
+function dismiss(id) {
+    _store.update((items) => items.filter((t) => t.id !== id));
+}
+export const toast = {
+    subscribe: _store.subscribe,
+    push,
+    dismiss,
+};

package/dist/storybook-utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Resolves a CSS custom property to its computed background-color RGB string.
+ * Use for token comparisons that need a background channel
+ * (background-color, border-color).
+ */
+export declare function resolveTokenColor(token: string): string;
+/**
+ * Resolves a CSS custom property to its computed foreground color RGB string.
+ * Use for color/border-color comparisons.
+ */
+export declare function resolveTokenFgColor(token: string): string;

package/dist/storybook-utils.js

@@ -0,0 +1,29 @@
+/**
+ * Resolves a CSS custom property to its computed background-color RGB string.
+ * Use for token comparisons that need a background channel
+ * (background-color, border-color).
+ */
+export function resolveTokenColor(token) {
+    const el = document.createElement('div');
+    el.style.backgroundColor = `var(${token})`;
+    el.style.position = 'absolute';
+    el.style.opacity = '0';
+    document.body.appendChild(el);
+    const value = getComputedStyle(el).backgroundColor;
+    document.body.removeChild(el);
+    return value;
+}
+/**
+ * Resolves a CSS custom property to its computed foreground color RGB string.
+ * Use for color/border-color comparisons.
+ */
+export function resolveTokenFgColor(token) {
+    const el = document.createElement('div');
+    el.style.color = `var(${token})`;
+    el.style.position = 'absolute';
+    el.style.opacity = '0';
+    document.body.appendChild(el);
+    const value = getComputedStyle(el).color;
+    document.body.removeChild(el);
+    return value;
+}

package/dist/tokens/ColorSwatch.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	interface TokenGroup {
+		label: string;
+		tokens: string[];
+	}
+
+	interface Props {
+		groups: TokenGroup[];
+	}
+
+	let { groups }: Props = $props();
+</script>
+
+<div class="swatch-root">
+	{#each groups as group}
+		<div class="swatch-group">
+			<p class="eyebrow">{group.label}</p>
+			<div class="swatch-row">
+				{#each group.tokens as token}
+					<div class="swatch-item">
+						<div
+							class="swatch-color"
+							data-testid={token}
+							style="background: var({token})"
+						></div>
+						<span class="swatch-name">{token}</span>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.swatch-root {
+		padding: var(--u3);
+		background: var(--bg);
+		display: flex;
+		flex-direction: column;
+		gap: var(--u4);
+	}
+
+	.swatch-group {
+		display: flex;
+		flex-direction: column;
+		gap: var(--u2);
+	}
+
+	.swatch-row {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--u2);
+	}
+
+	.swatch-item {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+
+	.swatch-color {
+		width: 80px;
+		height: 48px;
+		border-radius: var(--radius-card);
+		border: 1px solid var(--rule);
+	}
+
+	.swatch-name {
+		font-family: var(--mono);
+		font-size: 11px;
+		color: var(--ink-dim);
+	}
+</style>

package/dist/tokens/ColorSwatch.svelte.d.ts

@@ -0,0 +1,10 @@
+interface TokenGroup {
+    label: string;
+    tokens: string[];
+}
+interface Props {
+    groups: TokenGroup[];
+}
+declare const ColorSwatch: import("svelte").Component<Props, {}, "">;
+type ColorSwatch = ReturnType<typeof ColorSwatch>;
+export default ColorSwatch;