@dxlbnl/ui 0.1.0

package/dist/components/data/Accordion.stories.svelte

@@ -0,0 +1,316 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within, waitFor } from "storybook/test";
+  import {
+    resolveTokenColor,
+    resolveTokenFgColor,
+  } from "../../storybook-utils.js";
+  import Accordion from "./Accordion.svelte";
+  import AccordionItem from "./AccordionItem.svelte";
+
+  const { Story } = defineMeta({
+    component: Accordion,
+    title: "Data/Accordion",
+    tags: ["autodocs"],
+  });
+</script>
+
+<!-- AC-20: "Default" story — three items, first open -->
+<Story
+  name="Default"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // All summaries are visible (AC-3: summary is first child of details)
+    const summaries = canvasElement.querySelectorAll("summary.acc-trigger");
+    await expect(summaries.length).toBe(3);
+    for (const s of summaries) {
+      await expect(s).toBeVisible();
+    }
+
+    // AC-7: first <details> has open attribute on initial render
+    const allDetails = canvasElement.querySelectorAll("details.acc-item");
+    await expect(allDetails.length).toBe(3);
+    await expect(allDetails[0].hasAttribute("open")).toBe(true);
+
+    // AC-8: second and third items do NOT have open attribute
+    await expect(allDetails[1].hasAttribute("open")).toBe(false);
+    await expect(allDetails[2].hasAttribute("open")).toBe(false);
+
+    // AC-1: Accordion root has class accordion
+    const accordionRoot = canvasElement.querySelector(".accordion");
+    await expect(accordionRoot).not.toBeNull();
+
+    // AC-2: AccordionItem root has class acc-item
+    await expect(allDetails[0]).toHaveClass("acc-item");
+
+    // AC-4: summary contains acc-title span with label text
+    const firstTitle = allDetails[0].querySelector(".acc-title");
+    await expect(firstTitle).not.toBeNull();
+    await expect(firstTitle!.textContent).toContain("Getting Started");
+
+    // AC-5: summary contains acc-icon span with › glyph, aria-hidden="true"
+    const firstIcon = allDetails[0].querySelector(".acc-icon");
+    await expect(firstIcon).not.toBeNull();
+    await expect(firstIcon!.textContent!.trim()).toBe("›");
+    await expect(firstIcon!.getAttribute("aria-hidden")).toBe("true");
+
+    // AC-6: body content is in .acc-body sibling of summary
+    const firstBody = allDetails[0].querySelector(".acc-body");
+    await expect(firstBody).not.toBeNull();
+    await waitFor(() => expect(firstBody).toBeVisible());
+
+    // AC-10: body content of open item is visible
+    await waitFor(() =>
+      expect(
+        canvas.getByText(/Start by reading the quick-start guide/),
+      ).toBeVisible(),
+    );
+
+    // AC-17: summary has list-style: none (no browser disclosure triangle)
+    const firstSummary = allDetails[0].querySelector("summary") as HTMLElement;
+    await expect(getComputedStyle(firstSummary).listStyleType).toBe("none");
+  }}
+>
+  <AccordionItem label="Getting Started" open={true}>
+    <p>
+      Start by reading the quick-start guide and familiarising yourself with the
+      token set.
+    </p>
+  </AccordionItem>
+  <AccordionItem label="Installation">
+    <p>Run pnpm install to set up all dependencies.</p>
+  </AccordionItem>
+  <AccordionItem label="Configuration">
+    <p>Edit the tokens file to match your brand palette.</p>
+  </AccordionItem>
+</Story>
+
+<!-- All items closed -->
+<Story
+  name="All Closed"
+  play={async ({ canvasElement }) => {
+    // AC-8: all details elements lack open attribute
+    const allDetails = canvasElement.querySelectorAll("details.acc-item");
+    await expect(allDetails.length).toBe(3);
+    for (const d of allDetails) {
+      await expect(d.hasAttribute("open")).toBe(false);
+    }
+  }}
+>
+  <AccordionItem label="Section Alpha">
+    <p>Content for Alpha.</p>
+  </AccordionItem>
+  <AccordionItem label="Section Beta">
+    <p>Content for Beta.</p>
+  </AccordionItem>
+  <AccordionItem label="Section Gamma">
+    <p>Content for Gamma.</p>
+  </AccordionItem>
+</Story>
+
+<!-- AC-21: "Toggle Interaction" story — click to open, click again to close -->
+<Story
+  name="Toggle Interaction"
+  play={async ({ canvasElement, userEvent }) => {
+    const details = canvasElement.querySelector(
+      "details.acc-item",
+    ) as HTMLElement;
+    await expect(details).not.toBeNull();
+
+    // AC-8: starts closed
+    await expect(details.hasAttribute("open")).toBe(false);
+
+    // AC-11 / AC-12 / AC-13: check icon color and trigger bg when CLOSED
+    const icon = details.querySelector(".acc-icon") as HTMLElement;
+    const faintColor = resolveTokenFgColor("--ink-faint");
+    await expect(getComputedStyle(icon).color).toBe(faintColor);
+
+    // AC-9: click summary → details gains open attribute
+    const summary = details.querySelector("summary.acc-trigger") as HTMLElement;
+    await userEvent.click(summary);
+    await expect(details.hasAttribute("open")).toBe(true);
+
+    // AC-10: body content is visible after opening
+    const bodyText = within(canvasElement).getByText(/Interact with this item/);
+    await waitFor(() => expect(bodyText).toBeVisible());
+
+    // AC-11: icon has transform applied when open
+    await expect(getComputedStyle(icon).transform).not.toBe("none");
+
+    // AC-12: icon color resolves to var(--amber) when open
+    const amberColor = resolveTokenFgColor("--amber");
+    await expect(getComputedStyle(icon).color).toBe(amberColor);
+
+    // AC-13: trigger background resolves to var(--bg-elev) when open
+    const openTrigger = details.querySelector(".acc-trigger") as HTMLElement;
+    const bgElev = resolveTokenColor("--bg-elev");
+    await waitFor(() =>
+      expect(getComputedStyle(openTrigger).backgroundColor).toBe(bgElev),
+    );
+
+    // AC-9: click again → details loses open attribute
+    await userEvent.click(summary);
+    await expect(details.hasAttribute("open")).toBe(false);
+  }}
+>
+  <AccordionItem label="Toggle Me">
+    <p>Interact with this item to test toggle behaviour.</p>
+  </AccordionItem>
+</Story>
+
+<!-- "Rich Body" — open item with structured content in the body -->
+<Story
+  name="Rich Body"
+  play={async ({ canvasElement }) => {
+    // AC-6: body content rendered inside .acc-body
+    const body = canvasElement.querySelector(".acc-body");
+    await expect(body).not.toBeNull();
+    await waitFor(() => expect(body).toBeVisible());
+
+    // Body content is accessible
+    await waitFor(() =>
+      expect(within(canvasElement).getByText("VDD")).toBeVisible(),
+    );
+    await expect(within(canvasElement).getByText("+3.3V")).toBeVisible();
+    await expect(within(canvasElement).getByText("VCC")).toBeVisible();
+    await expect(within(canvasElement).getByText("+5V")).toBeVisible();
+  }}
+>
+  <AccordionItem label="Power Rails" open={true}>
+    <dl
+      style="display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin:0;"
+    >
+      <dt>VDD</dt>
+      <dd>+3.3V</dd>
+      <dt>VCC</dt>
+      <dd>+5V</dd>
+      <dt>VBUS</dt>
+      <dd>+12V</dd>
+    </dl>
+  </AccordionItem>
+</Story>
+
+<!-- AC-16: Accordion wrapper has 1px solid border -->
+<Story
+  name="Wrapper Border"
+  play={async ({ canvasElement }) => {
+    const accordionRoot = canvasElement.querySelector(
+      ".accordion",
+    ) as HTMLElement;
+    await expect(accordionRoot).not.toBeNull();
+
+    const ruleColor = resolveTokenFgColor("--rule");
+    const style = getComputedStyle(accordionRoot);
+    await expect(style.borderTopStyle).toBe("solid");
+    await expect(style.borderTopWidth).toBe("1px");
+    await expect(style.borderTopColor).toBe(ruleColor);
+  }}
+>
+  <AccordionItem label="Border Test">
+    <p>The accordion wrapper should have a 1px solid rule border.</p>
+  </AccordionItem>
+</Story>
+
+<!-- AC-14 / AC-15: last item has no border-bottom; non-last items do -->
+<Story
+  name="Item Borders"
+  play={async ({ canvasElement }) => {
+    const allDetails = canvasElement.querySelectorAll("details.acc-item");
+    await expect(allDetails.length).toBe(3);
+
+    // AC-15: non-last items have a bottom border
+    const firstStyle = getComputedStyle(allDetails[0] as HTMLElement);
+    await expect(firstStyle.borderBottomStyle).toBe("solid");
+    await expect(firstStyle.borderBottomWidth).toBe("1px");
+
+    // AC-14: last item has no bottom border
+    const lastStyle = getComputedStyle(allDetails[2] as HTMLElement);
+    await expect(lastStyle.borderBottomWidth).toBe("0px");
+  }}
+>
+  <AccordionItem label="First">
+    <p>First item.</p>
+  </AccordionItem>
+  <AccordionItem label="Second">
+    <p>Second item.</p>
+  </AccordionItem>
+  <AccordionItem label="Last">
+    <p>Last item — no bottom border.</p>
+  </AccordionItem>
+</Story>
+
+<!-- AC 41 / AC 42: "Animated" story — verifies DOM toggle behaviour of CSS animation -->
+<Story
+  name="Animated"
+  play={async ({ canvasElement, userEvent }) => {
+    // AC 35: <details> starts without the open attribute (closed)
+    const details = canvasElement.querySelector(
+      "details.acc-item",
+    ) as HTMLElement;
+    await expect(details.hasAttribute("open")).toBe(false);
+
+    // AC 35: .acc-body is present in the DOM regardless of open state
+    const accBody = details.querySelector(".acc-body") as HTMLElement;
+    await expect(accBody).not.toBeNull();
+
+    // AC 36: click summary → <details> gains open attribute
+    const summary = details.querySelector("summary.acc-trigger") as HTMLElement;
+    await userEvent.click(summary);
+    await expect(details.hasAttribute("open")).toBe(true);
+
+    // AC 36: after opening, .acc-body is visible
+    await waitFor(() => expect(accBody).toBeVisible());
+
+    // AC 37: click summary again → <details> loses open attribute
+    await userEvent.click(summary);
+    await expect(details.hasAttribute("open")).toBe(false);
+  }}
+>
+  <AccordionItem label="CSS Height Animation">
+    <p>
+      This item uses a CSS-only height transition via interpolate-size and
+      @starting-style.
+    </p>
+  </AccordionItem>
+</Story>
+
+<!-- B27 AC-20: .accordion Stack root must have no style="border: 1px solid var(--rule)" attribute -->
+<Story
+  name="No Inline Border Style"
+  play={async ({ canvasElement }) => {
+    // Before B27: <Stack style="border: 1px solid var(--rule);"> carries a style= attribute.
+    // After B27: the border moves to scoped CSS on .accordion; no style= attribute on the root.
+    const accordionRoot = canvasElement.querySelector(
+      ".accordion",
+    ) as HTMLElement;
+    await expect(accordionRoot.getAttribute("style")).toBeNull();
+  }}
+>
+  <AccordionItem label="Border Style Test">
+    <p>The accordion root must not carry an inline style= attribute.</p>
+  </AccordionItem>
+</Story>
+
+<!-- AC-18: Accordion forwards ...rest attributes to root div -->
+<Story
+  name="Attribute Forwarding"
+  args={{
+    id: "test-accordion",
+    "aria-label": "Settings sections",
+  }}
+  play={async ({ canvasElement }) => {
+    const accordionRoot = canvasElement.querySelector(
+      ".accordion",
+    ) as HTMLElement;
+    await expect(accordionRoot).not.toBeNull();
+    await expect(accordionRoot.getAttribute("id")).toBe("test-accordion");
+    await expect(accordionRoot.getAttribute("aria-label")).toBe(
+      "Settings sections",
+    );
+  }}
+>
+  <AccordionItem label="REST Forwarding">
+    <p>The wrapper must forward id and aria-label.</p>
+  </AccordionItem>
+</Story>

package/dist/components/data/Accordion.stories.svelte.d.ts

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

package/dist/components/data/Accordion.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { Snippet } from 'svelte'
+
+  interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet
+    [key: string]: unknown
+  }
+
+  let { children, ...rest }: AccordionProps = $props()
+</script>
+
+<div class="accordion" {...rest}>
+  {@render children()}
+</div>
+
+<style>
+  .accordion {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--rule);
+  }
+</style>

package/dist/components/data/Accordion.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    [key: string]: unknown;
+}
+declare const Accordion: import("svelte").Component<AccordionProps, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/data/AccordionItem.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface AccordionItemProps {
+    /** Summary / trigger text for the accordion row. */
+    label: string
+    /** Whether the item starts expanded. @default false */
+    open?: boolean
+    children: Snippet
+  }
+
+  let { label, open = false, children }: AccordionItemProps = $props()
+</script>
+
+<details class="acc-item" {open}>
+  <summary class="acc-trigger">
+    <span class="acc-title">{label}</span>
+    <span class="acc-icon" aria-hidden="true">›</span>
+  </summary>
+  <div class="acc-body">
+    {@render children()}
+  </div>
+</details>
+
+<style>
+  .acc-item {
+    border-bottom: 1px solid var(--rule);
+  }
+
+  .acc-item:last-child {
+    border-bottom: none;
+  }
+
+  .acc-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    cursor: pointer;
+    background: var(--bg-rail);
+    transition: background var(--transition);
+    user-select: none;
+    list-style: none;
+  }
+
+  .acc-trigger::-webkit-details-marker {
+    display: none;
+  }
+
+  .acc-trigger:hover {
+    background: var(--bg-elev);
+  }
+
+  details[open] .acc-trigger {
+    background: var(--bg-elev);
+  }
+
+  .acc-title {
+    font-family: var(--mono);
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--ink);
+  }
+
+  .acc-icon {
+    font-family: var(--mono);
+    font-size: 14px;
+    color: var(--ink-faint);
+    transition: transform var(--transition);
+    flex-shrink: 0;
+  }
+
+  details[open] .acc-icon {
+    transform: rotate(90deg);
+    color: var(--amber);
+  }
+
+  .acc-body {
+    padding: 14px 16px;
+    font-size: 13px;
+    line-height: 1.6;
+    color: var(--ink-dim);
+    border-top: 1px solid var(--rule);
+    background: var(--bg-sunken, var(--bg));
+  }
+
+  @supports (interpolate-size: allow-keywords) {
+    details.acc-item {
+      interpolate-size: allow-keywords;
+    }
+
+    .acc-body {
+      overflow: hidden;
+      height: 0;
+      transition: height var(--transition), opacity var(--transition);
+      opacity: 0;
+    }
+
+    details[open] .acc-body {
+      height: auto;
+      opacity: 1;
+    }
+
+    @starting-style {
+      details[open] .acc-body {
+        height: 0;
+        opacity: 0;
+      }
+    }
+  }
+</style>

package/dist/components/data/AccordionItem.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface AccordionItemProps {
+    /** Summary / trigger text for the accordion row. */
+    label: string;
+    /** Whether the item starts expanded. @default false */
+    open?: boolean;
+    children: Snippet;
+}
+declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/components/data/Table.composition.stories.svelte

@@ -0,0 +1,67 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Table from "./Table.svelte";
+  import TagPill from "../primitives/TagPill.svelte";
+
+  // No component: — this file covers the custom-rows (children snippet) story
+  // which renders <Table> directly in the slot with <tr> children containing
+  // sub-components (TagPill). Cannot use component: Table here because
+  // the children prop is a Snippet and cannot be passed via args.
+  const { Story } = defineMeta({
+    title: "Data/Table Composition",
+    tags: ["autodocs"],
+  });
+</script>
+
+<!-- AC-66: "Custom rows (snippet)" — children prop overrides rows; TagPill renders inside a cell -->
+<Story name="Custom rows (snippet)"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // AC-51: table element exists
+    const table = canvas.getByRole("table");
+    await expect(table).toBeVisible();
+
+    // AC-66: children snippet renders inside tbody; rows prop is ignored
+    const tbody = canvasElement.querySelector("tbody") as HTMLElement;
+    await expect(tbody).not.toBeNull();
+    const rows = tbody.querySelectorAll("tr");
+    await expect(rows.length).toBe(2);
+
+    // TagPill text is visible inside a cell (AC-66: snippet slot renders)
+    await expect(canvas.getByText("Power")).toBeVisible();
+    await expect(canvas.getByText("Envelope")).toBeVisible();
+
+    // Column headers still present
+    await expect(canvas.getByRole("columnheader", { name: /id/i })).toBeVisible();
+    await expect(canvas.getByRole("columnheader", { name: /product/i })).toBeVisible();
+    await expect(canvas.getByRole("columnheader", { name: /category/i })).toBeVisible();
+
+    // rows prop data should NOT appear (children overrides rows)
+    const ignoredCells = canvasElement.querySelectorAll("td");
+    let foundIgnored = false;
+    for (const td of ignoredCells) {
+      if (td.textContent?.includes("IGNORED-ROW")) {
+        foundIgnored = true;
+        break;
+      }
+    }
+    await expect(foundIgnored).toBe(false);
+  }}>
+  <Table
+    headers={['ID', 'Product', 'Category']}
+    rows={[['IGNORED-ROW', 'Should not appear', 'None']]}
+  >
+    <tr>
+      <td>CONDUIT-PDX2</td>
+      <td>Conduit PDX-2</td>
+      <td><TagPill>Power</TagPill></td>
+    </tr>
+    <tr>
+      <td>DISTRANS-AR1</td>
+      <td>Distrans AR-1</td>
+      <td><TagPill variant="amber">Envelope</TagPill></td>
+    </tr>
+  </Table>
+</Story>

package/dist/components/data/Table.composition.stories.svelte.d.ts

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