@dxlbnl/ui 0.1.0

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

@@ -0,0 +1,137 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Heading from "./Heading.svelte";
+
+  const { Story } = defineMeta({
+    title: "Primitives/Heading",
+    component: Heading,
+    tags: ["autodocs"],
+  });
+</script>
+
+<!-- AC-17, AC-18, AC-19, AC-21, AC-22, AC-23: levels 1/2/3 render h1/h2/h3 with default variant classes -->
+<!-- AC-20: default level is 2 -->
+<Story name="Levels"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const h1 = canvas.getByTestId("level-1");
+    await expect(h1.tagName).toBe("H1");
+    await expect(h1.classList.contains("h1")).toBe(true);
+
+    const h2 = canvas.getByTestId("level-2");
+    await expect(h2.tagName).toBe("H2");
+    await expect(h2.classList.contains("h2")).toBe(true);
+
+    const h3 = canvas.getByTestId("level-3");
+    await expect(h3.tagName).toBe("H3");
+    await expect(h3.classList.contains("h3")).toBe(true);
+
+    const defaultLevel = canvas.getByTestId("level-default");
+    await expect(defaultLevel.tagName).toBe("H2");
+    await expect(defaultLevel.classList.contains("h2")).toBe(true);
+  }}>
+  <Heading level={1} data-testid="level-1">Heading 1</Heading>
+  <Heading level={2} data-testid="level-2">Heading 2</Heading>
+  <Heading level={3} data-testid="level-3">Heading 3</Heading>
+  <Heading data-testid="level-default">Default Level</Heading>
+</Story>
+
+<!-- AC-25: level=1 variant="hero" renders <h1 class="hero-heading"> -->
+<Story name="HeroVariant" args={{ level: 1, variant: "hero" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild!;
+    await expect(root.tagName).toBe("H1");
+    await expect(root.classList.contains("hero-heading")).toBe(true);
+  }}>
+  Dexterlabs
+</Story>
+
+<!-- AC-26: level=1 variant="display" renders <h1 class="display-heading"> -->
+<Story name="DisplayVariant" args={{ level: 1, variant: "display" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild!;
+    await expect(root.tagName).toBe("H1");
+    await expect(root.classList.contains("display-heading")).toBe(true);
+  }}>
+  Dx
+</Story>
+
+<!-- AC-27: level=2 variant="h3" renders <h2 class="h3"> — semantic h2, visual h3 -->
+<Story name="DecoupledLevelVariant" args={{ level: 2, variant: "h3" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild!;
+    await expect(root.tagName).toBe("H2");
+    await expect(root.classList.contains("h3")).toBe(true);
+    await expect(root.classList.contains("h2")).toBe(false);
+  }}>
+  Projects
+</Story>
+
+<!-- AC-24: level=4 has no heading visual class (h1/h2/h3/hero-heading/display-heading) -->
+<Story name="Level4NoClass" args={{ level: 4 }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild!;
+    await expect(root.tagName).toBe("H4");
+    await expect(root.classList.contains("h1")).toBe(false);
+    await expect(root.classList.contains("h2")).toBe(false);
+    await expect(root.classList.contains("h3")).toBe(false);
+    await expect(root.classList.contains("hero-heading")).toBe(false);
+    await expect(root.classList.contains("display-heading")).toBe(false);
+  }}>
+  Sub-section heading
+</Story>
+
+<!-- AC-28: color="amber" applies inline style with var(--amber) -->
+<Story name="Color" args={{ level: 2, color: "amber" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild!;
+    await expect(root.getAttribute("style")).toContain("var(--amber)");
+  }}>
+  Amber Heading
+</Story>
+
+<!-- AC-29: extra class is merged alongside variant class -->
+<!-- AC-30: data attributes are forwarded -->
+<Story name="ClassMerge" args={{ level: 2, class: "section-title", "data-testid": "probe" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild!;
+    await expect(root.tagName).toBe("H2");
+    await expect(root.classList.contains("h2")).toBe(true);
+    await expect(root.classList.contains("section-title")).toBe(true);
+    await expect(root.getAttribute("data-testid")).toBe("probe");
+  }}>
+  Section Title
+</Story>
+
+<!-- B26 AC-12, AC-43: size="xs" on h3 → 12px -->
+<Story name="SizeXs" args={{ level: 3, 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 heading
+</Story>
+
+<!-- B26 AC-13, AC-15, AC-43: size="lg" on h3 → 19px, letterSpacing stays at h3 default -0.01em -->
+<Story name="SizeLg" args={{ level: 3, size: "lg" }}
+  play={async ({ canvasElement }) => {
+    const el = canvasElement.firstElementChild!;
+    await expect(el.getAttribute("data-size")).toBe("lg");
+    await expect(getComputedStyle(el).fontSize).toBe("19px");
+    await expect(getComputedStyle(el).letterSpacing).toBe("-0.19px");
+  }}>
+  Lede-size heading
+</Story>
+
+<!-- B26 AC-14: size="xl" on h3 → 24px -->
+<Story name="SizeXl" args={{ level: 3, size: "xl" }}
+  play={async ({ canvasElement }) => {
+    const el = canvasElement.firstElementChild!;
+    await expect(el.getAttribute("data-size")).toBe("xl");
+    await expect(getComputedStyle(el).fontSize).toBe("24px");
+  }}>
+  XL heading
+</Story>

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

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

package/dist/components/primitives/Heading.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import type { ClassValue } from 'svelte/elements'
+  import type { Snippet } from 'svelte'
+
+  type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
+  type HeadingVariant = 'display' | 'hero' | 'h1' | 'h2' | 'h3'
+  type TextColor = 'ink' | 'dim' | 'faint' | 'amber' | 'cyan' | 'ok' | 'danger'
+  type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+  interface Props {
+    /** HTML heading level (h1–h6). @default 2 */
+    level?: HeadingLevel
+    /** Typography class to apply — defaults to the level's matching variant. */
+    variant?: HeadingVariant
+    /** Text colour mapped to a design token. */
+    color?: TextColor
+    /** Font size override mapped to a type-scale token. */
+    size?: SizeVariant
+    children?: Snippet
+    class?: ClassValue | null
+    style?: string | null
+    [key: string]: unknown
+  }
+
+  const DEFAULT_VARIANT: Partial<Record<HeadingLevel, HeadingVariant>> = {
+    1: 'h1',
+    2: 'h2',
+    3: 'h3',
+  }
+
+  const VARIANT_CLASS: Record<HeadingVariant, string> = {
+    display: 'display-heading',
+    hero: 'hero-heading',
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+  }
+
+  const COLOR_MAP: Record<NonNullable<TextColor>, string> = {
+    ink: 'ink',
+    dim: 'ink-dim',
+    faint: 'ink-faint',
+    amber: 'amber',
+    cyan: 'cyan',
+    ok: 'ok',
+    danger: 'danger',
+  }
+
+  let { level = 2, variant, color, size, children, class: klass = '', style, ...rest }: Props = $props()
+
+  const resolvedVariant = $derived(variant ?? DEFAULT_VARIANT[level])
+  const variantClass = $derived(resolvedVariant ? VARIANT_CLASS[resolvedVariant] : undefined)
+  const colorStyle = $derived(color ? `color: var(--${COLOR_MAP[color]});` : '')
+  const mergedStyle = $derived([colorStyle, style].filter(Boolean).join(' ') || undefined)
+</script>
+
+<svelte:element this={"h" + level} class={[variantClass, klass]} style={mergedStyle} data-size={size || undefined} {...rest}>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .h1 {
+    font-family: var(--sans);
+    font-weight: 500;
+    font-size: var(--t-h1);
+    letter-spacing: -0.03em;
+    line-height: 1;
+  }
+
+  .h2 {
+    font-family: var(--sans);
+    font-weight: 500;
+    font-size: var(--t-h2);
+    letter-spacing: -0.01em;
+    line-height: 1.1;
+  }
+
+  .h3 {
+    font-family: var(--sans);
+    font-weight: 500;
+    font-size: var(--t-h3);
+    letter-spacing: -0.01em;
+    line-height: 1.2;
+  }
+
+  .hero-heading {
+    font-family: var(--sans);
+    font-weight: 500;
+    font-size: var(--t-hero);
+    letter-spacing: -0.03em;
+    line-height: 1;
+  }
+
+  .display-heading {
+    font-family: var(--sans);
+    font-weight: 500;
+    font-size: var(--t-display);
+    letter-spacing: -0.04em;
+    line-height: 0.9;
+  }
+
+  [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) }
+</style>

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

@@ -0,0 +1,23 @@
+import type { ClassValue } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type HeadingVariant = 'display' | 'hero' | 'h1' | 'h2' | 'h3';
+type TextColor = 'ink' | 'dim' | 'faint' | 'amber' | 'cyan' | 'ok' | 'danger';
+type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface Props {
+    /** HTML heading level (h1–h6). @default 2 */
+    level?: HeadingLevel;
+    /** Typography class to apply — defaults to the level's matching variant. */
+    variant?: HeadingVariant;
+    /** Text colour mapped to a design token. */
+    color?: TextColor;
+    /** Font size override mapped to a type-scale token. */
+    size?: SizeVariant;
+    children?: Snippet;
+    class?: ClassValue | null;
+    style?: string | null;
+    [key: string]: unknown;
+}
+declare const Heading: import("svelte").Component<Props, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;

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

@@ -0,0 +1,63 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Led from "./Led.svelte";
+  import { resolveTokenColor } from "../../storybook-utils.js";
+
+  const { Story } = defineMeta({
+    title: "Primitives/Led",
+    component: Led,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Ok" args={{ color: "ok", "aria-label": "Status: ok" }}
+  play={async ({ canvasElement }) => {
+    const el = within(canvasElement).getByRole("status");
+    await expect(el).toBeVisible();
+    await expect(getComputedStyle(el).width).toBe("7px");
+    await expect(getComputedStyle(el).height).toBe("7px");
+    const okColor = resolveTokenColor("--ok");
+    await expect(getComputedStyle(el).backgroundColor).toBe(okColor);
+    await expect(getComputedStyle(el).borderRadius).toBe("50%");
+  }} />
+
+<Story name="Amber" args={{ color: "amber", "aria-label": "Status: amber" }}
+  play={async ({ canvasElement }) => {
+    const el = within(canvasElement).getByRole("status");
+    await expect(el).toBeVisible();
+    const amberColor = resolveTokenColor("--amber");
+    await expect(getComputedStyle(el).backgroundColor).toBe(amberColor);
+  }} />
+
+<Story name="Cyan" args={{ color: "cyan", "aria-label": "Status: cyan" }}
+  play={async ({ canvasElement }) => {
+    const el = within(canvasElement).getByRole("status");
+    await expect(el).toBeVisible();
+    const cyanColor = resolveTokenColor("--cyan");
+    await expect(getComputedStyle(el).backgroundColor).toBe(cyanColor);
+  }} />
+
+<Story name="Danger" args={{ color: "danger", "aria-label": "Status: danger" }}
+  play={async ({ canvasElement }) => {
+    const el = within(canvasElement).getByRole("status");
+    await expect(el).toBeVisible();
+    const dangerColor = resolveTokenColor("--danger");
+    await expect(getComputedStyle(el).backgroundColor).toBe(dangerColor);
+  }} />
+
+<Story name="Off" args={{ color: "off", "aria-label": "Status: off" }}
+  play={async ({ canvasElement }) => {
+    const el = within(canvasElement).getByRole("status");
+    await expect(el).toBeVisible();
+    const inkFaintColor = resolveTokenColor("--ink-faint");
+    await expect(getComputedStyle(el).backgroundColor).toBe(inkFaintColor);
+    await expect(getComputedStyle(el).boxShadow).toBe("none");
+  }} />
+
+<Story name="Blink" args={{ color: "amber", blink: true, "aria-label": "Status: blinking" }}
+  play={async ({ canvasElement }) => {
+    const el = within(canvasElement).getByRole("status");
+    await expect(el).toBeVisible();
+    await expect(getComputedStyle(el).animationName).not.toBe("none");
+  }} />

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

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

package/dist/components/primitives/Led.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type LedColor = 'ok' | 'amber' | 'cyan' | 'danger' | 'off'
+
+  interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /** Colour of the LED indicator. @default 'ok' */
+    color?: LedColor
+    /** Whether the LED pulses with a blink animation. @default false */
+    blink?: boolean
+  }
+
+  let { color = 'ok', blink = false, ...rest }: Props = $props()
+</script>
+
+<span
+  role="status"
+  class="led led-{color}"
+  class:blink
+  {...rest}
+></span>
+
+<style>
+  .led {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    display: inline-block;
+    flex-shrink: 0;
+  }
+
+  .led-ok {
+    background: var(--ok);
+    box-shadow: 0 0 6px var(--ok);
+  }
+
+  .led-amber {
+    background: var(--amber);
+    box-shadow: 0 0 6px var(--amber);
+  }
+
+  .led-cyan {
+    background: var(--cyan);
+    box-shadow: 0 0 6px var(--cyan);
+  }
+
+  .led-danger {
+    background: var(--danger);
+    box-shadow: 0 0 6px var(--danger);
+  }
+
+  .led-off {
+    background: var(--ink-faint);
+  }
+
+  .blink {
+    animation: blink 1.6s steps(2, end) infinite;
+  }
+
+  @keyframes blink {
+    50% {
+      opacity: 0.25;
+    }
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type LedColor = 'ok' | 'amber' | 'cyan' | 'danger' | 'off';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /** Colour of the LED indicator. @default 'ok' */
+    color?: LedColor;
+    /** Whether the LED pulses with a blink animation. @default false */
+    blink?: boolean;
+}
+declare const Led: import("svelte").Component<Props, {}, "">;
+type Led = ReturnType<typeof Led>;
+export default Led;

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

@@ -0,0 +1,90 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import TagPill from "./TagPill.svelte";
+  import Inline from "../layout/Inline.svelte";
+  import {
+    resolveTokenColor,
+    resolveTokenFgColor,
+  } from "../../storybook-utils.js";
+
+  const { Story } = defineMeta({
+    title: "Primitives/TagPill",
+    component: TagPill,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story
+  name="Default"
+  args={{ variant: "default" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const pill = canvas.getByText("Utility");
+    await expect(pill).toBeVisible();
+    await expect(getComputedStyle(pill).fontFamily.toLowerCase()).toContain(
+      "jetbrains",
+    );
+    await expect(getComputedStyle(pill).textTransform).toBe("uppercase");
+    const inkFaintColor = resolveTokenFgColor("--ink-faint");
+    await expect(getComputedStyle(pill).color).toBe(inkFaintColor);
+  }}
+>
+  Utility
+</Story>
+
+<Story
+  name="Amber"
+  args={{ variant: "amber" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const pill = canvas.getByText("Featured");
+    await expect(pill).toBeVisible();
+    const amberColor = resolveTokenFgColor("--amber");
+    await expect(getComputedStyle(pill).color).toBe(amberColor);
+    // borderColor resolves as an RGB value; use same helper via background trick
+    const amberBgColor = resolveTokenColor("--amber");
+    await expect(getComputedStyle(pill).borderColor).toBe(amberBgColor);
+  }}
+>
+  Featured
+</Story>
+
+<Story
+  name="Cyan"
+  args={{ variant: "cyan" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const pill = canvas.getByText("New");
+    await expect(pill).toBeVisible();
+    const cyanColor = resolveTokenFgColor("--cyan");
+    await expect(getComputedStyle(pill).color).toBe(cyanColor);
+    const cyanBgColor = resolveTokenColor("--cyan");
+    await expect(getComputedStyle(pill).borderColor).toBe(cyanBgColor);
+  }}
+>
+  New
+</Story>
+
+<Story
+  name="Multiple Pills"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const utility = canvas.getByText("Utility");
+    const powerSupply = canvas.getByText("Power Supply");
+    const latest = canvas.getByText("Latest");
+    await expect(utility).toBeVisible();
+    await expect(powerSupply).toBeVisible();
+    await expect(latest).toBeVisible();
+    const inkFaintColor = resolveTokenFgColor("--ink-faint");
+    await expect(getComputedStyle(latest).color).not.toBe(inkFaintColor);
+  }}
+>
+  {#snippet template()}
+    <Inline gap="sm">
+      <TagPill>Utility</TagPill>
+      <TagPill>Power Supply</TagPill>
+      <TagPill variant="amber">Latest</TagPill>
+    </Inline>
+  {/snippet}
+</Story>

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

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

package/dist/components/primitives/TagPill.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type TagPillVariant = 'default' | 'amber' | 'cyan'
+
+  interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /** Colour variant of the pill. @default 'default' */
+    variant?: TagPillVariant
+  }
+
+  let { variant = 'default', children, ...rest }: Props = $props()
+</script>
+
+<span class="pill pill-{variant}" {...rest}>
+  {@render children?.()}
+</span>
+
+<style>
+  .pill {
+    display: inline-block;
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    padding: 2px 6px;
+    border: 1px solid;
+    border-radius: 0;
+  }
+
+  .pill-default {
+    color: var(--ink-faint);
+    border-color: var(--ink-faint);
+  }
+
+  .pill-amber {
+    color: var(--amber);
+    border-color: var(--amber);
+  }
+
+  .pill-cyan {
+    color: var(--cyan);
+    border-color: var(--cyan);
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type TagPillVariant = 'default' | 'amber' | 'cyan';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /** Colour variant of the pill. @default 'default' */
+    variant?: TagPillVariant;
+}
+declare const TagPill: import("svelte").Component<Props, {}, "">;
+type TagPill = ReturnType<typeof TagPill>;
+export default TagPill;