@dxlbnl/ui 0.1.0

package/dist/components/patterns/SectionHead.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import Stack from '../layout/Stack.svelte'
+  import Inline from '../layout/Inline.svelte'
+  import Text from '../primitives/Text.svelte'
+  import Heading from '../primitives/Heading.svelte'
+
+  interface Props {
+    /** Small mono label shown above the heading. */
+    eyebrow?: string
+    /** Primary section heading. */
+    heading: string
+    /** Secondary label shown inline after the heading. */
+    sublabel?: string
+    children?: Snippet
+    [key: string]: unknown
+  }
+
+  let {
+    eyebrow,
+    heading,
+    sublabel,
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<section class="section-head" {...rest}>
+  <Stack gap="xs">
+    {#if eyebrow}
+      <Text variant="eyebrow">{eyebrow}</Text>
+    {/if}
+    <Inline gap="sm" align="baseline">
+      <Heading level={2} variant="h3">{heading}</Heading>
+      {#if sublabel}
+        <span class="sublabel"><Text variant="mono">{sublabel}</Text></span>
+      {/if}
+    </Inline>
+    {#if children}
+      {@render children()}
+    {/if}
+  </Stack>
+</section>
+
+<style>
+  .section-head {
+    padding: 40px 0 12px;
+    border-bottom: 1px solid var(--rule);
+  }
+
+  .sublabel {
+    margin-left: auto;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Small mono label shown above the heading. */
+    eyebrow?: string;
+    /** Primary section heading. */
+    heading: string;
+    /** Secondary label shown inline after the heading. */
+    sublabel?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+}
+declare const SectionHead: import("svelte").Component<Props, {}, "">;
+type SectionHead = ReturnType<typeof SectionHead>;
+export default SectionHead;

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

@@ -0,0 +1,59 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import StatCard from "./StatCard.svelte";
+  import { resolveTokenFgColor } from "../../storybook-utils.js";
+
+  const { Story } = defineMeta({
+    title: "Patterns/StatCard",
+    component: StatCard,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Default" args={{ label: "Modules", value: "12", sublabel: "across 2 cases" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const root = canvasElement.firstElementChild;
+    await expect(root).toBeVisible();
+    await expect(canvas.getByText("12")).toBeVisible();
+    await expect(canvas.getByText(/modules/i)).toBeVisible();
+    await expect(canvas.getByText(/across 2 cases/i)).toBeVisible();
+    const inkColor = resolveTokenFgColor("--ink");
+    await expect(getComputedStyle(canvas.getByText("12")).color).toBe(inkColor);
+  }} />
+
+<Story name="Ok Color" args={{ label: "+12V draw", value: "68%", color: "ok", sublabel: "2.04A / 3.0A" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const okColor = resolveTokenFgColor("--ok");
+    await expect(getComputedStyle(canvas.getByText("68%")).color).toBe(okColor);
+  }} />
+
+<Story name="Amber Color" args={{ label: "Orders open", value: "2", color: "amber", sublabel: "awaiting shipment" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const amberColor = resolveTokenFgColor("--amber");
+    await expect(getComputedStyle(canvas.getByText("2")).color).toBe(amberColor);
+  }} />
+
+<Story name="Danger Color" args={{ label: "Thermal", value: "97%", color: "danger" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const dangerColor = resolveTokenFgColor("--danger");
+    await expect(getComputedStyle(canvas.getByText("97%")).color).toBe(dangerColor);
+  }} />
+
+<Story name="No Sublabel" args={{ label: "Projects", value: "5" }}
+  play={async ({ canvasElement }) => {
+    await expect(canvasElement.querySelector(".stat-sub")).toBeNull();
+  }} />
+
+<!-- B27 AC-17: Stack inside StatCard must have no style="padding: 16px 20px" attribute -->
+<Story name="No Inline Padding Style" args={{ label: "Modules", value: "12" }}
+  play={async ({ canvasElement }) => {
+    // The Stack root inside the card carries style="padding: 16px 20px;" before B27.
+    // After B27 the padding moves to scoped CSS; the Stack must have no style= attribute.
+    const stackRoot = canvasElement.querySelector(".stack") as HTMLElement;
+    await expect(stackRoot.getAttribute("style")).toBeNull();
+  }} />

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

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

package/dist/components/patterns/StatCard.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import Card from '../cards/Card.svelte'
+  import Stack from '../layout/Stack.svelte'
+  import Text from '../primitives/Text.svelte'
+
+  type StatColor = 'default' | 'ok' | 'amber' | 'danger'
+
+  interface Props {
+    /** Metric label shown above the value. */
+    label: string
+    /** Primary value string displayed large. */
+    value: string
+    /** Secondary label shown below the value. */
+    sublabel?: string
+    /** Colour accent applied to the value. @default 'default' */
+    color?: StatColor
+    [key: string]: unknown
+  }
+
+  let {
+    label,
+    value,
+    sublabel,
+    color = 'default',
+    ...rest
+  }: Props = $props()
+</script>
+
+<Card class="stat-card" {...rest}>
+  <div class="stat-card-body">
+    <Stack gap="xs">
+      <Text variant="mono" color="faint" size="xs">{label}</Text>
+      <span class="stat-value stat-value--{color}">{value}</span>
+      {#if sublabel}
+        <Text variant="mono" color="faint" size="xs">{sublabel}</Text>
+      {/if}
+    </Stack>
+  </div>
+</Card>
+
+<style>
+  .stat-card-body {
+    padding: 16px 20px;
+  }
+
+  .stat-value {
+    font-family: var(--mono);
+    font-size: 32px;
+    letter-spacing: -0.02em;
+    line-height: 1;
+    color: var(--ink);
+  }
+
+  .stat-value--ok     { color: var(--ok); }
+  .stat-value--amber  { color: var(--amber); }
+  .stat-value--danger { color: var(--danger); }
+</style>

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

@@ -0,0 +1,15 @@
+type StatColor = 'default' | 'ok' | 'amber' | 'danger';
+interface Props {
+    /** Metric label shown above the value. */
+    label: string;
+    /** Primary value string displayed large. */
+    value: string;
+    /** Secondary label shown below the value. */
+    sublabel?: string;
+    /** Colour accent applied to the value. @default 'default' */
+    color?: StatColor;
+    [key: string]: unknown;
+}
+declare const StatCard: import("svelte").Component<Props, {}, "">;
+type StatCard = ReturnType<typeof StatCard>;
+export default StatCard;

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

@@ -0,0 +1,9 @@
+export { default as Alert } from './Alert.svelte';
+export { default as CtaBlock } from './CtaBlock.svelte';
+export { default as StatCard } from './StatCard.svelte';
+export { default as KvList } from './KvList.svelte';
+export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as ActivityRow } from './ActivityRow.svelte';
+export { default as SectionHead } from './SectionHead.svelte';
+export { default as SectionFoot } from './SectionFoot.svelte';
+export { default as PageHero } from './PageHero.svelte';

package/dist/components/patterns/index.js

@@ -0,0 +1,9 @@
+export { default as Alert } from './Alert.svelte';
+export { default as CtaBlock } from './CtaBlock.svelte';
+export { default as StatCard } from './StatCard.svelte';
+export { default as KvList } from './KvList.svelte';
+export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as ActivityRow } from './ActivityRow.svelte';
+export { default as SectionHead } from './SectionHead.svelte';
+export { default as SectionFoot } from './SectionFoot.svelte';
+export { default as PageHero } from './PageHero.svelte';

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

@@ -0,0 +1,132 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Button from "./Button.svelte";
+  import { resolveTokenColor, resolveTokenFgColor } from "../../storybook-utils.js";
+
+  const { Story } = defineMeta({
+    title: "Primitives/Button",
+    component: Button,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Primary" args={{ variant: "primary" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const btn = canvas.getByRole("button");
+    await expect(btn).toBeVisible();
+    await expect(btn).toBeEnabled();
+    const amberColor = resolveTokenColor("--amber");
+    const bgColor = resolveTokenColor("--bg");
+    await expect(getComputedStyle(btn).backgroundColor).toBe(amberColor);
+    await expect(getComputedStyle(btn).color).toBe(bgColor);
+    await expect(getComputedStyle(btn).textTransform).toBe("uppercase");
+  }}>
+  Order Now
+</Story>
+
+<Story name="Primary Disabled" args={{ variant: "primary", disabled: true }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const btn = canvas.getByRole("button");
+    await expect(btn).toBeVisible();
+    await expect(btn).toBeDisabled();
+    await expect(getComputedStyle(btn).opacity).toBe("0.5");
+    await expect(getComputedStyle(btn).cursor).toBe("not-allowed");
+  }}>
+  Disabled
+</Story>
+
+<Story name="CTA" args={{ variant: "cta" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const btn = canvas.getByRole("button");
+    await expect(btn).toBeVisible();
+    await expect(btn).toBeEnabled();
+    const amberColor = resolveTokenColor("--amber");
+    await expect(getComputedStyle(btn).color).toBe(amberColor);
+    await expect(getComputedStyle(btn).borderColor).toBe(amberColor);
+  }}>
+  View Project →
+</Story>
+
+<Story name="CTA Disabled" args={{ variant: "cta", disabled: true }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const btn = canvas.getByRole("button");
+    await expect(btn).toBeVisible();
+    await expect(btn).toBeDisabled();
+    await expect(getComputedStyle(btn).opacity).toBe("0.5");
+  }}>
+  Disabled
+</Story>
+
+<Story name="Ghost" args={{ variant: "ghost" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const btn = canvas.getByRole("button");
+    await expect(btn).toBeVisible();
+    await expect(btn).toBeEnabled();
+    await expect(getComputedStyle(btn).backgroundColor).toBe("rgba(0, 0, 0, 0)");
+    const amberColor = resolveTokenColor("--amber");
+    await expect(getComputedStyle(btn).color).toBe(amberColor);
+  }}>
+  View All Hardware →
+</Story>
+
+<Story name="Back" args={{ variant: "back" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const btn = canvas.getByRole("button");
+    await expect(btn).toBeVisible();
+    await expect(btn).toBeEnabled();
+    const inkFaintColor = resolveTokenColor("--ink-faint");
+    await expect(getComputedStyle(btn).color).toBe(inkFaintColor);
+  }}>
+  ← Back to Catalogue
+</Story>
+
+<Story name="Del" args={{ variant: "del" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const btn = canvas.getByRole("button");
+    await expect(btn).toBeVisible();
+    await expect(btn).toBeEnabled();
+    await expect(getComputedStyle(btn).borderStyle).not.toBe("none");
+    const inkFaintColor = resolveTokenColor("--ink-faint");
+    await expect(getComputedStyle(btn).color).toBe(inkFaintColor);
+  }}>
+  Remove
+</Story>
+
+<Story name="As Link" args={{ as: "a", href: "#demo", variant: "ghost" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const link = canvas.getByRole("link");
+    await expect(link).toBeVisible();
+    await expect(link).toHaveAttribute("href", "#demo");
+    await expect(link.tagName).toBe("A");
+  }}>
+  View Demo →
+</Story>
+
+<!-- AC-B28-1 (2,3,4) -->
+<Story name="Nav Variant" args={{ variant: "nav" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const btn = canvas.getByRole("button");
+    await expect(btn).toBeVisible();
+
+    // AC-2: element has class btn-nav
+    await expect(btn.classList.contains("btn-nav")).toBe(true);
+
+    // AC-3: computed color matches --ink-faint
+    const inkFaintColor = resolveTokenFgColor("--ink-faint");
+    await expect(getComputedStyle(btn).color).toBe(inkFaintColor);
+
+    // AC-4: background-color is transparent
+    await expect(getComputedStyle(btn).backgroundColor).toBe("rgba(0, 0, 0, 0)");
+  }}>
+  ◐
+</Story>

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

@@ -0,0 +1,19 @@
+import Button from "./Button.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Button: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Button = InstanceType<typeof Button>;
+export default Button;

package/dist/components/primitives/Button.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+  import type { Snippet } from 'svelte'
+
+  type ButtonVariant = 'primary' | 'cta' | 'ghost' | 'back' | 'del' | 'nav'
+
+  interface Props extends HTMLButtonAttributes {
+    /** HTML element or component to render as. @default 'button' */
+    as?: string
+    /** Visual style variant. @default 'primary' */
+    variant?: ButtonVariant
+    children?: Snippet
+    /** URL — pass to render as an `<a>` (set `as="a"` too). */
+    href?: string
+    [key: string]: unknown
+  }
+
+  let { as = 'button', variant = 'primary', children, class: klass = '', ...rest }: Props = $props()
+</script>
+
+<svelte:element this={as} class={['btn', `btn-${variant}`, klass]} {...rest}>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .btn {
+    font-family: var(--mono);
+    text-transform: uppercase;
+    cursor: pointer;
+    white-space: nowrap;
+    transition:
+      background var(--transition),
+      color var(--transition),
+      border-color var(--transition);
+    border: none;
+    background: transparent;
+    display: inline-block;
+    text-decoration: none;
+  }
+
+  /* primary */
+  .btn-primary {
+    background: var(--amber);
+    color: var(--bg);
+    padding: 10px 16px;
+    font-size: 14px;
+    letter-spacing: 0.1em;
+  }
+
+  .btn-primary:hover {
+    background: var(--ink);
+  }
+
+  .btn-primary:disabled,
+  .btn-primary[disabled],
+  .btn-primary[aria-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* cta */
+  .btn-cta {
+    color: var(--amber);
+    border: 1px solid var(--amber);
+    border-radius: var(--radius);
+    background: transparent;
+    padding: 9px 20px;
+    font-size: 14px;
+    letter-spacing: 0.1em;
+  }
+
+  .btn-cta:hover {
+    background: var(--amber);
+    color: var(--bg);
+  }
+
+  .btn-cta:disabled,
+  .btn-cta[disabled],
+  .btn-cta[aria-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* ghost */
+  .btn-ghost {
+    color: var(--amber);
+    background: transparent;
+    border: none;
+    font-size: 14px;
+    letter-spacing: 0.08em;
+  }
+
+  .btn-ghost:hover {
+    color: var(--ink);
+  }
+
+  /* back */
+  .btn-back {
+    color: var(--ink-faint);
+    background: transparent;
+    border: none;
+    font-size: 14px;
+    letter-spacing: 0.08em;
+  }
+
+  .btn-back:hover {
+    color: var(--amber);
+  }
+
+  /* del */
+  .btn-del {
+    color: var(--ink-faint);
+    border: 1px solid var(--rule-strong);
+    border-radius: var(--radius);
+    background: transparent;
+    padding: 3px 7px;
+    font-size: 12px;
+    letter-spacing: 0.1em;
+  }
+
+  .btn-del:hover {
+    color: var(--danger);
+    border-color: var(--danger);
+  }
+
+  /* nav */
+  .btn-nav {
+    color: var(--ink-faint);
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid transparent;
+    font-size: var(--t-body);
+    line-height: 1;
+    padding: 0 0 2px 0;
+    letter-spacing: 0;
+  }
+
+  .btn-nav:hover {
+    color: var(--ink);
+    border-bottom-color: var(--amber);
+  }
+</style>

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

@@ -0,0 +1,16 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type ButtonVariant = 'primary' | 'cta' | 'ghost' | 'back' | 'del' | 'nav';
+interface Props extends HTMLButtonAttributes {
+    /** HTML element or component to render as. @default 'button' */
+    as?: string;
+    /** Visual style variant. @default 'primary' */
+    variant?: ButtonVariant;
+    children?: Snippet;
+    /** URL — pass to render as an `<a>` (set `as="a"` too). */
+    href?: string;
+    [key: string]: unknown;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;