@dxlbnl/ui 0.1.0

package/dist/components/data/Tabs.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { Snippet } from 'svelte'
+  import Stack from '../layout/Stack.svelte'
+  import Button from '../primitives/Button.svelte'
+
+  type TabsVariant = 'underline' | 'pill'
+
+  interface TabItem {
+    id: string
+    label: string
+    panel: Snippet
+  }
+
+  interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+    /** Array of `{ id, label, panel }` tab descriptors. */
+    tabs: TabItem[]
+    /** `id` of the initially active tab — defaults to the first tab. */
+    active?: string
+    /** Tab indicator style. @default 'underline' */
+    variant?: TabsVariant
+  }
+
+  let { tabs, active = tabs[0]?.id, variant = 'underline', ...rest }: TabsProps = $props()
+
+  let activeId = $state(active)
+
+  function handleTabKeydown(e: KeyboardEvent, index: number) {
+    const count = tabs.length
+    let target = -1
+    switch (e.key) {
+      case 'ArrowRight': e.preventDefault(); target = (index + 1) % count; break
+      case 'ArrowLeft':  e.preventDefault(); target = (index - 1 + count) % count; break
+      case 'Home':       e.preventDefault(); target = 0; break
+      case 'End':        e.preventDefault(); target = count - 1; break
+    }
+    if (target >= 0) {
+      activeId = tabs[target].id
+      document.getElementById(`tab-${tabs[target].id}`)?.focus()
+    }
+  }
+</script>
+
+<Stack class="tabs tabs--{variant}" {...rest}>
+  <div class="tab-bar" role="tablist">
+    {#each tabs as tab, i}
+      <Button
+        variant="ghost"
+        class={activeId === tab.id ? 'tab tab--active' : 'tab'}
+        role="tab"
+        id="tab-{tab.id}"
+        aria-selected={activeId === tab.id}
+        aria-controls="panel-{tab.id}"
+        onclick={() => (activeId = tab.id)}
+        onkeydown={(e) => handleTabKeydown(e, i)}
+      >
+        {tab.label}
+      </Button>
+    {/each}
+  </div>
+
+  {#each tabs as tab}
+    <div
+      class="tab-panel"
+      role="tabpanel"
+      id="panel-{tab.id}"
+      aria-labelledby="tab-{tab.id}"
+      hidden={activeId !== tab.id}
+    >
+      {@render tab.panel()}
+    </div>
+  {/each}
+</Stack>
+
+<style>
+  .tab-bar {
+    display: flex;
+    border-bottom: 1px solid var(--rule);
+    gap: 0;
+  }
+
+  /* Use .btn.tab (two classes) to beat .btn-ghost (one class) in specificity */
+  :global(.btn.tab) {
+    font-family: var(--mono);
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    padding: 10px 18px;
+    cursor: pointer;
+    color: var(--ink-faint);
+    border: none;
+    background: transparent;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    transition:
+      color var(--transition),
+      border-color var(--transition);
+    white-space: nowrap;
+  }
+
+  :global(.btn.tab:hover) {
+    color: var(--ink);
+  }
+
+  :global(.btn.tab--active) {
+    color: var(--ink);
+    border-bottom-color: var(--amber);
+  }
+
+  .tab-panel {
+    padding: 16px;
+    background: var(--bg-rail);
+    border: 1px solid var(--rule);
+    border-top: none;
+    font-size: 13px;
+    line-height: 1.6;
+    color: var(--ink-dim);
+  }
+
+  /* Pill variant */
+  :global(.tabs--pill) .tab-bar {
+    gap: 4px;
+    padding: 4px;
+    background: var(--bg-rail);
+    border: 1px solid var(--rule);
+    width: fit-content;
+    border-bottom: 1px solid var(--rule);
+  }
+
+  :global(.tabs--pill .btn.tab) {
+    font-size: 11px;
+    padding: 5px 14px;
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+
+  :global(.tabs--pill .btn.tab--active) {
+    background: var(--amber);
+    color: var(--bg);
+    border-bottom-color: transparent;
+  }
+</style>

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

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type TabsVariant = 'underline' | 'pill';
+interface TabItem {
+    id: string;
+    label: string;
+    panel: Snippet;
+}
+interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+    /** Array of `{ id, label, panel }` tab descriptors. */
+    tabs: TabItem[];
+    /** `id` of the initially active tab — defaults to the first tab. */
+    active?: string;
+    /** Tab indicator style. @default 'underline' */
+    variant?: TabsVariant;
+}
+declare const Tabs: import("svelte").Component<TabsProps, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

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

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as Table } from './Table.svelte';

package/dist/components/data/index.js

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as Table } from './Table.svelte';

package/dist/components/feedback/Modal.stories.svelte

@@ -0,0 +1,192 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within, waitFor } from "storybook/test";
+  import Modal from "./Modal.svelte";
+  import Button from "../primitives/Button.svelte";
+  import { resolveTokenColor } from "../../storybook-utils.js";
+
+  const { Story } = defineMeta({
+    title: "Feedback/Modal",
+    tags: ["autodocs"],
+  });
+</script>
+
+<script lang="ts">
+  let openDefault     = $state(false);
+  let openConfirm     = $state(false);
+  let openDestructive = $state(false);
+  let openWithFooter  = $state(false);
+  let openBackdrop    = $state(false);
+  let openNoFooter    = $state(false);
+</script>
+
+<!-- AC-5, AC-6, AC-7, AC-13, AC-14 -->
+<Story name="Default"
+  play={async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button", { name: "Open Modal" });
+    // dialog not visible before trigger
+    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
+    await userEvent.click(trigger);
+    const dialog = canvas.getByRole("dialog");
+    await expect(dialog).toBeVisible();
+    await expect(dialog.getAttribute("aria-modal")).toBe("true");
+    await expect(dialog.getAttribute("aria-labelledby")).toBe("modal-title");
+    const heading = canvas.getByRole("heading", { level: 2, name: /CONFIRM ACTION/i });
+    await expect(heading).toBeVisible();
+    const closeBtn = canvas.getByRole("button", { name: /Close dialog/i });
+    await expect(closeBtn).toBeVisible();
+    await expect(closeBtn).toBeEnabled();
+    await expect(closeBtn.getAttribute("type")).toBe("button");
+    await userEvent.click(closeBtn);
+    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
+  }}>
+  <Button onclick={() => { openDefault = true }}>Open Modal</Button>
+  <Modal
+    open={openDefault}
+    title="// CONFIRM ACTION"
+    onclose={() => { openDefault = false }}
+  >
+    <p>This action cannot be undone. Are you sure you want to proceed?</p>
+  </Modal>
+</Story>
+
+<!-- AC-5, AC-6, AC-8, AC-13, AC-14 -->
+<Story name="Confirm Variant"
+  play={async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
+    await userEvent.click(canvas.getByRole("button", { name: "Open Modal" }));
+    const dialog = canvas.getByRole("dialog");
+    await expect(dialog).toBeVisible();
+    const icon = canvasElement.querySelector(".modal-icon") as HTMLElement;
+    await expect(icon).toBeVisible();
+    await expect(icon.getAttribute("aria-hidden")).toBe("true");
+    await expect(icon.textContent?.trim()).toBe("!");
+    const amberColor = resolveTokenColor("--amber");
+    await expect(getComputedStyle(icon).backgroundColor).toBe(amberColor);
+    const closeBtn = canvas.getByRole("button", { name: /Close dialog/i });
+    await expect(closeBtn.getAttribute("type")).toBe("button");
+    await userEvent.click(closeBtn);
+    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
+  }}>
+  <Button onclick={() => { openConfirm = true }}>Open Modal</Button>
+  <Modal
+    open={openConfirm}
+    title="// CONFIRM PURCHASE"
+    variant="confirm"
+    onclose={() => { openConfirm = false }}
+  >
+    <p>You are about to place an order for 1× Conduit PDX-2 at €200. Proceed?</p>
+  </Modal>
+</Story>
+
+<!-- AC-5, AC-6, AC-9, AC-13, AC-14 -->
+<Story name="Destructive Variant"
+  play={async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
+    await userEvent.click(canvas.getByRole("button", { name: "Open Modal" }));
+    const dialog = canvas.getByRole("dialog");
+    await expect(dialog).toBeVisible();
+    const icon = canvasElement.querySelector(".modal-icon") as HTMLElement;
+    await expect(icon).toBeVisible();
+    await expect(icon.getAttribute("aria-hidden")).toBe("true");
+    await expect(icon.textContent?.trim()).toBe("!");
+    const dangerColor = resolveTokenColor("--danger");
+    await expect(getComputedStyle(icon).backgroundColor).toBe(dangerColor);
+    const closeBtn = canvas.getByRole("button", { name: /Close dialog/i });
+    await expect(closeBtn.getAttribute("type")).toBe("button");
+    await userEvent.click(closeBtn);
+    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
+  }}>
+  <Button onclick={() => { openDestructive = true }}>Open Modal</Button>
+  <Modal
+    open={openDestructive}
+    title="// DELETE ITEM"
+    variant="destructive"
+    onclose={() => { openDestructive = false }}
+  >
+    <p>This will permanently delete the item. This action cannot be undone.</p>
+  </Modal>
+</Story>
+
+<!-- AC-5, AC-6, AC-10, AC-13, AC-14 -->
+<Story name="With Footer"
+  play={async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
+    await userEvent.click(canvas.getByRole("button", { name: "Open Modal" }));
+    await expect(canvas.getByRole("dialog")).toBeVisible();
+    const footer = canvasElement.querySelector("footer");
+    await expect(footer).toBeInTheDocument();
+    const cancelBtn = canvas.getByRole("button", { name: /Cancel/i });
+    await expect(cancelBtn).toBeVisible();
+    const closeBtn = canvas.getByRole("button", { name: /Close dialog/i });
+    await expect(closeBtn.getAttribute("type")).toBe("button");
+    await userEvent.click(closeBtn);
+    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
+  }}>
+  <Button onclick={() => { openWithFooter = true }}>Open Modal</Button>
+  <Modal
+    open={openWithFooter}
+    title="// WITH FOOTER"
+    onclose={() => { openWithFooter = false }}
+  >
+    <p>This modal includes a footer with action buttons.</p>
+    {#snippet footer()}
+      <Button variant="ghost" onclick={() => { openWithFooter = false }}>Cancel</Button>
+      <Button variant="primary">Confirm</Button>
+    {/snippet}
+  </Modal>
+</Story>
+
+<!-- AC-5, AC-6, AC-11, AC-13, AC-14 -->
+<Story name="Backdrop Close"
+  play={async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
+    await userEvent.click(canvas.getByRole("button", { name: "Open Modal" }));
+    const dialog = canvas.getByRole("dialog");
+    await expect(dialog).toBeVisible();
+    const closeBtn = canvas.getByRole("button", { name: /Close dialog/i });
+    await expect(closeBtn.getAttribute("type")).toBe("button");
+    // native .click() dispatches with event.target === dialog, triggering handleDialogClick
+    dialog.click();
+    // waitFor: Svelte $effect that closes the dialog is async
+    await waitFor(() => expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible());
+  }}>
+  <Button onclick={() => { openBackdrop = true }}>Open Modal</Button>
+  <Modal
+    open={openBackdrop}
+    title="// BACKDROP TEST"
+    onclose={() => { openBackdrop = false }}
+  >
+    <p>Click outside this panel on the backdrop to close.</p>
+  </Modal>
+</Story>
+
+<!-- AC-5, AC-6, AC-12, AC-13, AC-14 -->
+<Story name="No Footer"
+  play={async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
+    await userEvent.click(canvas.getByRole("button", { name: "Open Modal" }));
+    await expect(canvas.getByRole("dialog")).toBeVisible();
+    await expect(canvasElement.querySelector("footer")).toBeNull();
+    const closeBtn = canvas.getByRole("button", { name: /Close dialog/i });
+    await expect(closeBtn).toBeVisible();
+    await expect(closeBtn).toBeEnabled();
+    await expect(closeBtn.getAttribute("type")).toBe("button");
+    await userEvent.click(closeBtn);
+    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
+  }}>
+  <Button onclick={() => { openNoFooter = true }}>Open Modal</Button>
+  <Modal
+    open={openNoFooter}
+    title="// NO FOOTER"
+    onclose={() => { openNoFooter = false }}
+  >
+    <p>Informational content shown without a footer action bar.</p>
+  </Modal>
+</Story>

package/dist/components/feedback/Modal.stories.svelte.d.ts

@@ -0,0 +1,4 @@
+import Modal from "./Modal.svelte";
+declare const Modal: import("svelte").Component<Record<string, never>, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/feedback/Modal.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+  import type { HTMLDialogAttributes } from 'svelte/elements'
+  import type { Snippet } from 'svelte'
+  import Inline from '../layout/Inline.svelte'
+  import Spread from '../layout/Spread.svelte'
+  import Text from '../primitives/Text.svelte'
+  import Button from '../primitives/Button.svelte'
+
+  type ModalVariant = 'default' | 'confirm' | 'destructive'
+
+  interface Props extends HTMLDialogAttributes {
+    /** Whether the dialog is currently open. @default false */
+    open?: boolean
+    /** Heading text shown in the modal header. */
+    title: string
+    /** Visual variant — adds a coloured icon to the header. @default 'default' */
+    variant?: ModalVariant
+    /** Called when the modal requests to close (close button, backdrop, or Escape). */
+    onclose?: () => void
+    children?: Snippet
+    footer?: Snippet
+    [key: string]: unknown
+  }
+
+  let {
+    open = false,
+    title,
+    variant = 'default',
+    onclose,
+    children,
+    footer,
+    ...rest
+  }: Props = $props()
+
+  let dialogElement: HTMLDialogElement | undefined = $state()
+
+  function handleClose() {
+    onclose?.()
+  }
+
+  function handleCancel(event: Event) {
+    event.preventDefault()
+    handleClose()
+  }
+
+  function handleDialogClick(event: MouseEvent) {
+    if (event.target === dialogElement) {
+      handleClose()
+    }
+  }
+
+  $effect(() => {
+    if (!dialogElement) return
+    if (open) {
+      dialogElement.showModal()
+      document.body.style.overflow = 'hidden'
+      return () => {
+        document.body.style.overflow = ''
+      }
+    } else {
+      if (dialogElement.open) {
+        dialogElement.close()
+      }
+      document.body.style.overflow = ''
+    }
+  })
+</script>
+
+<dialog
+  bind:this={dialogElement}
+  class="modal modal--{variant}"
+  aria-modal="true"
+  aria-labelledby="modal-title"
+  oncancel={handleCancel}
+  onclick={handleDialogClick}
+  {...rest}
+>
+  <div class="modal-inner">
+    <header class="modal-header">
+      <Inline gap="xs">
+        {#if variant === 'destructive' || variant === 'confirm'}
+          <span class="modal-icon" aria-hidden="true">!</span>
+        {/if}
+        <Text variant="mono" as="h2" id="modal-title" size="lg" class="modal-title">{title}</Text>
+        <Button variant="ghost" type="button" aria-label="Close dialog" onclick={handleClose}>×</Button>
+      </Inline>
+    </header>
+
+    <div class="modal-body">
+      {@render children?.()}
+    </div>
+
+    {#if footer}
+      <footer class="modal-footer">
+        <Spread>
+          {@render footer()}
+        </Spread>
+      </footer>
+    {/if}
+  </div>
+</dialog>
+
+<style>
+  .modal {
+    position: fixed;
+    inset: 0;
+    border: none;
+    padding: 0;
+    background: transparent;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+
+  .modal[open] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .modal::backdrop {
+    background: rgba(7, 9, 8, 0.85);
+  }
+
+  .modal-inner {
+    background: var(--bg-elev);
+    border: 1px solid var(--rule-strong);
+    width: 100%;
+    max-width: 480px;
+    max-height: 80vh;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .modal-header {
+    padding: var(--u2) var(--u3);
+    border-bottom: 1px solid var(--rule);
+    display: flex;
+    align-items: center;
+  }
+
+  .modal-footer {
+    padding: var(--u2) var(--u3);
+    border-top: 1px solid var(--rule);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--u2);
+  }
+
+  .modal-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    font-family: var(--mono);
+    font-size: 13px;
+    font-weight: 700;
+    flex-shrink: 0;
+  }
+
+  .modal--confirm .modal-icon {
+    background: var(--amber);
+    color: var(--bg);
+  }
+
+  .modal--destructive .modal-icon {
+    background: var(--danger);
+    color: var(--bg);
+  }
+
+  .modal-body {
+    padding: var(--u3);
+    flex: 1;
+    font-size: var(--t-body);
+    color: var(--ink-dim);
+    line-height: 1.5;
+  }
+
+  .modal-header :global(.modal-title) {
+    flex: 1;
+  }
+</style>

package/dist/components/feedback/Modal.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLDialogAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type ModalVariant = 'default' | 'confirm' | 'destructive';
+interface Props extends HTMLDialogAttributes {
+    /** Whether the dialog is currently open. @default false */
+    open?: boolean;
+    /** Heading text shown in the modal header. */
+    title: string;
+    /** Visual variant — adds a coloured icon to the header. @default 'default' */
+    variant?: ModalVariant;
+    /** Called when the modal requests to close (close button, backdrop, or Escape). */
+    onclose?: () => void;
+    children?: Snippet;
+    footer?: Snippet;
+    [key: string]: unknown;
+}
+declare const Modal: import("svelte").Component<Props, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;