@dxlbnl/ui 0.1.0

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

@@ -0,0 +1,203 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import { resolveTokenColor } from "../../storybook-utils.js";
+  import Toast from "./Toast.svelte";
+
+  const { Story } = defineMeta({
+    title: "Feedback/Toast",
+    component: Toast,
+    tags: ["autodocs"],
+  });
+</script>
+
+<!-- AC 16, 23, 26, 27, 29 — success variant: role=status, icon "ok", border-color=--ok -->
+<Story
+  name="Success"
+  args={{
+    id: "toast-1",
+    message: "Build completed successfully.",
+    variant: "success",
+    ondismiss: () => {},
+  }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // AC 16: ok variant renders role="status"
+    const toast = canvas.getByRole("status");
+    await expect(toast).toBeVisible();
+
+    // AC 26: message text visible
+    await expect(
+      canvas.getByText("Build completed successfully."),
+    ).toBeVisible();
+
+    // AC 27: close button present, enabled
+    const closeBtn = canvas.getByRole("button", {
+      name: /Dismiss notification/i,
+    });
+    await expect(closeBtn).toBeVisible();
+    await expect(closeBtn).toBeEnabled();
+
+    // AC 22, 23: .toast-icon with aria-hidden="true" and text "ok"
+    const icon = canvasElement.querySelector(".toast-icon");
+    await expect(icon).not.toBeNull();
+    await expect(icon!.getAttribute("aria-hidden")).toBe("true");
+    await expect(icon!.textContent!.trim()).toBe("ok");
+
+    // AC 29: border-color matches var(--ok)
+    const okColor = resolveTokenColor("--ok");
+    await expect(getComputedStyle(toast).borderColor).toBe(okColor);
+
+    // AC 32: background-color matches var(--bg-elev)
+    const bgElev = resolveTokenColor("--bg-elev");
+    await expect(getComputedStyle(toast).backgroundColor).toBe(bgElev);
+  }}
+/>
+
+<!-- AC 17, 24, 30 — warning variant: role=status, icon "!!", border-color=--amber -->
+<Story
+  name="Warning"
+  args={{
+    id: "toast-2",
+    message: "+12V rail at 88% capacity.",
+    variant: "warning",
+    ondismiss: () => {},
+  }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // AC 17: amber variant renders role="status"
+    const toast = canvas.getByRole("status");
+    await expect(toast).toBeVisible();
+
+    // AC 26: message text visible
+    await expect(canvas.getByText(/12V rail at 88%/i)).toBeVisible();
+
+    // AC 24: .toast-icon text is "!!"
+    const icon = canvasElement.querySelector(".toast-icon");
+    await expect(icon).not.toBeNull();
+    await expect(icon!.textContent!.trim()).toBe("!!");
+
+    // AC 30: border-color matches var(--amber)
+    const amberColor = resolveTokenColor("--amber");
+    await expect(getComputedStyle(toast).borderColor).toBe(amberColor);
+  }}
+/>
+
+<!-- AC 18, 20, 25, 31 — error variant: role=alert, aria-live=assertive, icon "err", border-color=--danger -->
+<Story
+  name="Error"
+  args={{
+    id: "toast-3",
+    message: "Thermal protection triggered.",
+    variant: "error",
+    ondismiss: () => {},
+  }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // AC 18: danger variant renders role="alert"
+    const toast = canvas.getByRole("alert");
+    await expect(toast).toBeVisible();
+
+    // AC 26: message text visible
+    await expect(
+      canvas.getByText("Thermal protection triggered."),
+    ).toBeVisible();
+
+    // AC 20: danger has aria-live="assertive"
+    await expect(toast.getAttribute("aria-live")).toBe("assertive");
+
+    // AC 25: .toast-icon text is "err"
+    const icon = canvasElement.querySelector(".toast-icon");
+    await expect(icon).not.toBeNull();
+    await expect(icon!.textContent!.trim()).toBe("err");
+
+    // AC 31: border-color matches var(--danger)
+    const dangerColor = resolveTokenColor("--danger");
+    await expect(getComputedStyle(toast).borderColor).toBe(dangerColor);
+  }}
+/>
+
+<!-- AC 27, 28 — clicking the close button calls ondismiss (no-op in story; no throw) -->
+<Story
+  name="Manual Close"
+  args={{
+    id: "toast-4",
+    message: "Click × to dismiss.",
+    variant: "success",
+    ondismiss: () => {},
+  }}
+  play={async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+
+    // AC 27: close button present
+    const toast = canvas.getByRole("status");
+    await expect(toast).toBeVisible();
+
+    const closeBtn = canvas.getByRole("button", {
+      name: /Dismiss notification/i,
+    });
+    await expect(closeBtn).toBeVisible();
+
+    // AC 28: clicking button calls ondismiss — the no-op callback should not throw
+    await userEvent.click(closeBtn);
+    // If ondismiss threw, userEvent.click would have rejected — reaching here means success
+    await expect(closeBtn).toBeInTheDocument();
+  }}
+/>
+
+<!-- AC 33 — long message: toast visible and max-width ≤ 400px -->
+<Story
+  name="Long Message"
+  args={{
+    id: "toast-5",
+    message:
+      "This is a longer notification message that tests how the toast handles wrapping text within its maximum width constraint.",
+    variant: "warning",
+    ondismiss: () => {},
+  }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // AC 17: still role=status for warning
+    const toast = canvas.getByRole("status");
+    await expect(toast).toBeVisible();
+
+    // AC 26: full message present in DOM
+    await expect(
+      canvas.getByText(
+        "This is a longer notification message that tests how the toast handles wrapping text within its maximum width constraint.",
+      ),
+    ).toBeVisible();
+
+    // AC 33: max-width is 400px
+    await expect(getComputedStyle(toast).maxWidth).toBe("400px");
+  }}
+/>
+
+<!-- AC 19, 21, 22 — ARIA attributes on success variant -->
+<Story
+  name="Aria Attributes"
+  args={{
+    id: "toast-6",
+    message: "ARIA check.",
+    variant: "success",
+    ondismiss: () => {},
+  }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // AC 19: ok/amber has aria-live="polite"
+    const toast = canvas.getByRole("status");
+    await expect(toast.getAttribute("aria-live")).toBe("polite");
+
+    // AC 21: aria-atomic="true"
+    await expect(toast.getAttribute("aria-atomic")).toBe("true");
+
+    // AC 22: .toast-icon has aria-hidden="true"
+    const icon = canvasElement.querySelector(".toast-icon");
+    await expect(icon!.getAttribute("aria-hidden")).toBe("true");
+  }}
+/>

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

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

package/dist/components/feedback/Toast.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { ToastVariant } from "../../stores/toast.js";
+  import Button from "../primitives/Button.svelte";
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Unique toast ID (used by the dismiss callback). */
+    id: string;
+    /** Text content of the notification. */
+    message: string;
+    /** Colour variant — also sets the ARIA live region type. @default 'success' */
+    variant?: ToastVariant;
+    /** Called with the toast `id` when the dismiss button is clicked. */
+    ondismiss: (id: string) => void;
+  }
+
+  let {
+    id,
+    message,
+    variant = "success",
+    ondismiss,
+    ...rest
+  }: Props = $props();
+
+  const ICONS: Record<ToastVariant, string> = {
+    success: "ok",
+    warning: "!!",
+    error: "err",
+  };
+
+  let role = $derived(variant === "error" ? "alert" : "status");
+  let ariaLive: "assertive" | "polite" = $derived(
+    variant === "error" ? "assertive" : "polite",
+  );
+  let icon = $derived(ICONS[variant]);
+</script>
+
+<div
+  class="toast toast--{variant}"
+  {role}
+  aria-live={ariaLive}
+  aria-atomic="true"
+  {...rest}
+>
+  <span class="toast-icon" aria-hidden="true">{icon}</span>
+  <span class="toast-message">{message}</span>
+  <div class="toast-close-wrap">
+    <Button
+      variant="ghost"
+      type="button"
+      aria-label="Dismiss notification"
+      onclick={() => ondismiss(id)}>×</Button
+    >
+  </div>
+</div>
+
+<style>
+  .toast {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 14px;
+    min-width: 260px;
+    max-width: 400px;
+    border: 1px solid;
+    background: var(--bg-elev);
+    font-size: var(--t-body);
+    line-height: 1.4;
+    pointer-events: all;
+  }
+
+  .toast--success {
+    border-color: var(--ok);
+  }
+  .toast--warning {
+    border-color: var(--amber);
+  }
+  .toast--error {
+    border-color: var(--danger);
+  }
+
+  .toast-icon {
+    font-family: var(--mono);
+    font-size: var(--t-micro);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    flex-shrink: 0;
+  }
+
+  .toast--success .toast-icon {
+    color: var(--ok);
+  }
+  .toast--warning .toast-icon {
+    color: var(--amber);
+  }
+  .toast--error .toast-icon {
+    color: var(--danger);
+  }
+
+  .toast-message {
+    flex: 1;
+    color: var(--ink-dim);
+  }
+
+  .toast-close-wrap {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { ToastVariant } from "../../stores/toast.js";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Unique toast ID (used by the dismiss callback). */
+    id: string;
+    /** Text content of the notification. */
+    message: string;
+    /** Colour variant — also sets the ARIA live region type. @default 'success' */
+    variant?: ToastVariant;
+    /** Called with the toast `id` when the dismiss button is clicked. */
+    ondismiss: (id: string) => void;
+}
+declare const Toast: import("svelte").Component<Props, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

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

@@ -0,0 +1,193 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within, waitFor } from "storybook/test";
+  import ToastRegion from "./ToastRegion.svelte";
+  import { toast } from "../../stores/toast.js";
+
+  // AC 69: no component: in defineMeta — ToastRegion is a singleton portal (composition-only)
+  const { Story } = defineMeta({
+    title: "Feedback/ToastRegion",
+    tags: ["autodocs"],
+  });
+</script>
+
+<!-- AC 39, 40, 66 — push one toast and verify it renders in the region -->
+<Story name="Single Toast"
+  play={async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+
+    // AC 40: push a toast and it appears
+    const id = toast.push('Hello from ToastRegion.', { variant: 'success' });
+
+    // AC 39: ToastRegion renders one Toast per active store item
+    await waitFor(() => expect(canvas.getByRole('status')).toBeVisible());
+    await expect(canvas.getByText('Hello from ToastRegion.')).toBeVisible();
+
+    // AC 27: close button present
+    await expect(canvas.getByRole('button', { name: /Dismiss notification/i })).toBeVisible();
+
+    // AC 66: region has aria-label="Notifications"
+    const region = canvasElement.querySelector('.toast-region');
+    await expect(region).not.toBeNull();
+    await expect(region!.getAttribute('aria-label')).toBe('Notifications');
+
+    // Cleanup (AC 73: store cleanup to avoid state leak between tests)
+    toast.dismiss(id);
+  }}>
+  <ToastRegion position="bottom-right" />
+</Story>
+
+<!-- AC 39, 41 — three variants: success + warning = status (×2), error = alert (×1) -->
+<Story name="Three Variants"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Push three toasts with different variants
+    const id1 = toast.push('Build passed.', { variant: 'success' });
+    const id2 = toast.push('Memory at 85%.', { variant: 'warning' });
+    const id3 = toast.push('Connection lost.', { variant: 'error' });
+
+    // AC 39: all items render
+    await waitFor(() => {
+      const statuses = canvas.getAllByRole('status');
+      expect(statuses.length).toBe(2);
+    });
+
+    // AC 16+17: success and warning get role=status
+    const statuses = canvas.getAllByRole('status');
+    await expect(statuses.length).toBe(2);
+
+    // AC 18: danger gets role=alert
+    const alerts = canvas.getAllByRole('alert');
+    await expect(alerts.length).toBe(1);
+
+    // AC 26: all three messages visible
+    await expect(canvas.getByText('Build passed.')).toBeVisible();
+    await expect(canvas.getByText('Memory at 85%.')).toBeVisible();
+    await expect(canvas.getByText('Connection lost.')).toBeVisible();
+
+    // Cleanup (AC 73)
+    toast.dismiss(id1);
+    toast.dismiss(id2);
+    toast.dismiss(id3);
+  }}>
+  <ToastRegion position="bottom-right" />
+</Story>
+
+<!-- AC 42 — with limit=3, pushing 5 toasts shows only the newest 3 -->
+<Story name="Stack Limit"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Push 5 toasts
+    const ids = [
+      toast.push('Toast 1', { variant: 'success' }),
+      toast.push('Toast 2', { variant: 'success' }),
+      toast.push('Toast 3', { variant: 'success' }),
+      toast.push('Toast 4', { variant: 'success' }),
+      toast.push('Toast 5', { variant: 'success' }),
+    ];
+
+    // AC 42: only 3 toasts are visible (oldest 2 dismissed by limit enforcement)
+    await waitFor(() => {
+      const visible = canvas.getAllByRole('status');
+      expect(visible.length).toBe(3);
+    });
+
+    // The newest 3 messages should be present
+    await expect(canvas.getByText('Toast 3')).toBeVisible();
+    await expect(canvas.getByText('Toast 4')).toBeVisible();
+    await expect(canvas.getByText('Toast 5')).toBeVisible();
+
+    // The oldest 2 should have been dismissed from the DOM
+    await expect(canvas.queryByText('Toast 1')).toBeNull();
+    await expect(canvas.queryByText('Toast 2')).toBeNull();
+
+    // Cleanup remaining (Toast 1+2 already dismissed by limit enforcement)
+    toast.dismiss(ids[2]);
+    toast.dismiss(ids[3]);
+    toast.dismiss(ids[4]);
+  }}>
+  <ToastRegion position="bottom-right" limit={3} />
+</Story>
+
+<!-- AC 44 — toast with duration:1000 auto-dismisses after ~1000ms -->
+<Story name="Auto-Dismiss"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // AC 44: push with short duration
+    const id = toast.push('Short-lived.', { variant: 'success', duration: 1000 });
+
+    // Immediately visible
+    await waitFor(() => expect(canvas.getByText('Short-lived.')).toBeVisible());
+
+    // AC 44: wait 1200ms — toast should have been auto-dismissed
+    await new Promise((r) => setTimeout(r, 1200));
+
+    await expect(canvas.queryByText('Short-lived.')).toBeNull();
+
+    // Cleanup (should already be gone but dismiss is a no-op if not present — AC 13)
+    toast.dismiss(id);
+  }}>
+  <ToastRegion position="bottom-right" />
+</Story>
+
+<!-- AC 41, 45, 46 — manual close removes toast and cancels its auto-dismiss timer -->
+<Story name="Manual Dismiss via Button"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // AC 46: push with a real timer so we can verify cancellation
+    const id = toast.push('Manual dismiss only.', { variant: 'warning', duration: 800 });
+
+    await waitFor(() => expect(canvas.getByText('Manual dismiss only.')).toBeVisible());
+
+    // AC 41: clicking close button removes the toast
+    const closeBtn = canvas.getByRole('button', { name: /Dismiss notification/i });
+    await expect(closeBtn).toBeVisible();
+    closeBtn.click();
+
+    // Toast dismissed immediately
+    await waitFor(() => expect(canvas.queryByText('Manual dismiss only.')).toBeNull());
+
+    // AC 46: wait past the original 800ms duration — toast must not reappear
+    await new Promise((r) => setTimeout(r, 1000));
+    await expect(canvas.queryByText('Manual dismiss only.')).toBeNull();
+
+    // Cleanup (no-op — already gone)
+    toast.dismiss(id);
+  }}>
+  <ToastRegion position="bottom-right" />
+</Story>
+
+<!-- AC 48, 51 — position="top-left" renders .toast-region--top-left -->
+<Story name="Position Top-Left"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const id = toast.push('Top-left toast.', { variant: 'success' });
+
+    await waitFor(() => expect(canvas.getByText('Top-left toast.')).toBeVisible());
+
+    // AC 51: correct position class applied
+    const region = canvasElement.querySelector('.toast-region--top-left');
+    await expect(region).not.toBeNull();
+
+    // Cleanup (AC 73)
+    toast.dismiss(id);
+  }}>
+  <ToastRegion position="top-left" />
+</Story>
+
+<!-- AC 37 — when no toasts are pushed the region is empty (or SSR-unrendered) -->
+<Story name="No Toasts"
+  play={async ({ canvasElement }) => {
+    // AC 37: no toast elements rendered when store is empty
+    // The region may or may not be present (mounted guard), but no role=status/alert
+    await expect(
+      canvasElement.querySelectorAll('[role="status"], [role="alert"]').length
+    ).toBe(0);
+  }}>
+  <ToastRegion position="bottom-right" />
+</Story>

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

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

package/dist/components/feedback/ToastRegion.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { toast } from '../../stores/toast.js'
+  import Toast from './Toast.svelte'
+
+  interface Props {
+    /** Viewport corner where the toast stack is anchored. @default 'bottom-right' */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+    /** Maximum toasts visible at once — oldest are dismissed when exceeded. @default 5 */
+    limit?: number
+  }
+
+  let { position = 'bottom-right', limit = 5 }: Props = $props()
+
+  let mounted = $state(false)
+
+  $effect(() => {
+    mounted = true
+  })
+
+  // Dismiss oldest items when store exceeds limit
+  $effect(() => {
+    const all = $toast
+    if (all.length > limit) {
+      const toRemove = all.slice(0, all.length - limit)
+      toRemove.forEach((t) => toast.dismiss(t.id))
+    }
+  })
+
+  let visibleToasts = $derived($toast.slice(-limit))
+
+  function handleDismiss(id: string) {
+    toast.dismiss(id)
+  }
+
+  // Auto-dismiss timers — recreated whenever visibleToasts changes
+  $effect(() => {
+    const timers: ReturnType<typeof setTimeout>[] = []
+    for (const item of visibleToasts) {
+      if (item.duration > 0) {
+        const t = setTimeout(() => toast.dismiss(item.id), item.duration)
+        timers.push(t)
+      }
+    }
+    return () => timers.forEach(clearTimeout)
+  })
+</script>
+
+{#if mounted}
+  <div
+    class="toast-region toast-region--{position}"
+    role="region"
+    aria-label="Notifications"
+  >
+    {#each visibleToasts as item (item.id)}
+      <Toast
+        id={item.id}
+        message={item.message}
+        variant={item.variant}
+        ondismiss={handleDismiss}
+      />
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .toast-region {
+    position: fixed;
+    z-index: 9000;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 16px;
+    pointer-events: none;
+    max-width: 440px;
+  }
+
+  .toast-region--bottom-right {
+    bottom: 0;
+    right: 0;
+    align-items: flex-end;
+  }
+
+  .toast-region--bottom-left {
+    bottom: 0;
+    left: 0;
+    align-items: flex-start;
+  }
+
+  .toast-region--top-right {
+    top: 0;
+    right: 0;
+    align-items: flex-end;
+    flex-direction: column-reverse;
+  }
+
+  .toast-region--top-left {
+    top: 0;
+    left: 0;
+    align-items: flex-start;
+    flex-direction: column-reverse;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+interface Props {
+    /** Viewport corner where the toast stack is anchored. @default 'bottom-right' */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Maximum toasts visible at once — oldest are dismissed when exceeded. @default 5 */
+    limit?: number;
+}
+declare const ToastRegion: import("svelte").Component<Props, {}, "">;
+type ToastRegion = ReturnType<typeof ToastRegion>;
+export default ToastRegion;

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

@@ -0,0 +1,3 @@
+export { default as Modal } from './Modal.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as ToastRegion } from './ToastRegion.svelte';

package/dist/components/feedback/index.js

@@ -0,0 +1,3 @@
+export { default as Modal } from './Modal.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as ToastRegion } from './ToastRegion.svelte';