@dxlbnl/ui 0.1.0 → 1.0.0

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

@@ -1,7 +1,7 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import { expect, within } from "storybook/test";
-  import { resolveTokenColor } from "../../storybook-utils.js";
+  import { resolveTokenFgColor } from "../../storybook-utils.js";
   import Toast from "./Toast.svelte";
 
   const { Story } = defineMeta({
@@ -11,11 +11,12 @@
   });
 </script>
 
-<!-- AC 16, 23, 26, 27, 29 — success variant: role=status, icon "ok", border-color=--ok -->
+<!-- AC-13: success variant — title "Build complete", .alert-tag "ok", borderLeftColor on .alert -->
 <Story
   name="Success"
   args={{
     id: "toast-1",
+    title: "Build complete",
     message: "Build completed successfully.",
     variant: "success",
     ondismiss: () => {},
@@ -23,43 +24,47 @@
   play={async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    // AC 16: ok variant renders role="status"
+    // AC-12: Toast wrapper keeps role="status"
     const toast = canvas.getByRole("status");
     await expect(toast).toBeVisible();
 
-    // AC 26: message text visible
+    // AC-11: .alert-title visible with the title text
+    const titleEl = canvasElement.querySelector(".alert-title");
+    await expect(titleEl).not.toBeNull();
+    await expect(titleEl!.textContent!.trim()).toBe("Build complete");
+
+    // message text visible
     await expect(
       canvas.getByText("Build completed successfully."),
     ).toBeVisible();
 
-    // AC 27: close button present, enabled
+    // AC-16: dismiss button still present (rendered by Toast, not Alert)
     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-13: .alert-tag (not .toast-icon) with text "ok"
+    const tag = canvasElement.querySelector(".alert-tag");
+    await expect(tag).not.toBeNull();
+    await expect(tag!.getAttribute("aria-hidden")).toBe("true");
+    await expect(tag!.textContent!.trim()).toBe("ok");
+
+    // AC-17: borderLeftColor on .alert child element, not Toast root
+    const alertEl = canvasElement.querySelector(".alert");
+    await expect(alertEl).not.toBeNull();
+    const okColor = resolveTokenFgColor("--ok");
+    await expect(getComputedStyle(alertEl!).borderLeftColor).toBe(okColor);
   }}
 />
 
-<!-- AC 17, 24, 30 — warning variant: role=status, icon "!!", border-color=--amber -->
+<!-- AC-14: warning variant — title "High load", .alert-tag "!!", borderLeftColor on .alert -->
 <Story
   name="Warning"
   args={{
     id: "toast-2",
+    title: "High load",
     message: "+12V rail at 88% capacity.",
     variant: "warning",
     ondismiss: () => {},
@@ -67,29 +72,43 @@
   play={async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    // AC 17: amber variant renders role="status"
+    // AC-12: Toast wrapper keeps role="status"
     const toast = canvas.getByRole("status");
     await expect(toast).toBeVisible();
 
-    // AC 26: message text visible
+    // AC-11: .alert-title visible
+    const titleEl = canvasElement.querySelector(".alert-title");
+    await expect(titleEl).not.toBeNull();
+    await expect(titleEl!.textContent!.trim()).toBe("High load");
+
+    // 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-16: dismiss button still present
+    const closeBtn = canvas.getByRole("button", {
+      name: /Dismiss notification/i,
+    });
+    await expect(closeBtn).toBeVisible();
 
-    // AC 30: border-color matches var(--amber)
-    const amberColor = resolveTokenColor("--amber");
-    await expect(getComputedStyle(toast).borderColor).toBe(amberColor);
+    // AC-14: .alert-tag with text "!!"
+    const tag = canvasElement.querySelector(".alert-tag");
+    await expect(tag).not.toBeNull();
+    await expect(tag!.textContent!.trim()).toBe("!!");
+
+    // AC-17: borderLeftColor on .alert child element
+    const alertEl = canvasElement.querySelector(".alert");
+    await expect(alertEl).not.toBeNull();
+    const amberColor = resolveTokenFgColor("--amber");
+    await expect(getComputedStyle(alertEl!).borderLeftColor).toBe(amberColor);
   }}
 />
 
-<!-- AC 18, 20, 25, 31 — error variant: role=alert, aria-live=assertive, icon "err", border-color=--danger -->
+<!-- AC-15: error variant — title "Fault", .alert-tag "err", role="alert", borderLeftColor on .alert -->
 <Story
   name="Error"
   args={{
     id: "toast-3",
+    title: "Fault",
     message: "Thermal protection triggered.",
     variant: "error",
     ondismiss: () => {},
@@ -97,30 +116,43 @@
   play={async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    // AC 18: danger variant renders role="alert"
+    // AC-12: error variant keeps role="alert" on Toast wrapper
     const toast = canvas.getByRole("alert");
     await expect(toast).toBeVisible();
 
-    // AC 26: message text visible
+    // AC-11: .alert-title visible
+    const titleEl = canvasElement.querySelector(".alert-title");
+    await expect(titleEl).not.toBeNull();
+    await expect(titleEl!.textContent!.trim()).toBe("Fault");
+
+    // message text visible
     await expect(
       canvas.getByText("Thermal protection triggered."),
     ).toBeVisible();
 
-    // AC 20: danger has aria-live="assertive"
+    // AC-12: aria-live="assertive" on Toast wrapper
     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-16: dismiss button still present
+    const closeBtn = canvas.getByRole("button", {
+      name: /Dismiss notification/i,
+    });
+    await expect(closeBtn).toBeVisible();
+
+    // AC-15: .alert-tag with text "err"
+    const tag = canvasElement.querySelector(".alert-tag");
+    await expect(tag).not.toBeNull();
+    await expect(tag!.textContent!.trim()).toBe("err");
 
-    // AC 31: border-color matches var(--danger)
-    const dangerColor = resolveTokenColor("--danger");
-    await expect(getComputedStyle(toast).borderColor).toBe(dangerColor);
+    // AC-17: borderLeftColor on .alert child element
+    const alertEl = canvasElement.querySelector(".alert");
+    await expect(alertEl).not.toBeNull();
+    const dangerColor = resolveTokenFgColor("--danger");
+    await expect(getComputedStyle(alertEl!).borderLeftColor).toBe(dangerColor);
   }}
 />
 
-<!-- AC 27, 28 — clicking the close button calls ondismiss (no-op in story; no throw) -->
+<!-- AC-16: clicking dismiss button calls ondismiss without error -->
 <Story
   name="Manual Close"
   args={{
@@ -132,23 +164,22 @@
   play={async ({ canvasElement, userEvent }) => {
     const canvas = within(canvasElement);
 
-    // AC 27: close button present
     const toast = canvas.getByRole("status");
     await expect(toast).toBeVisible();
 
+    // AC-16: dismiss button rendered by Toast
     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
+    // clicking 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 -->
+<!-- max-width constraint still 400px after refactor -->
 <Story
   name="Long Message"
   args={{
@@ -161,23 +192,20 @@
   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 -->
+<!-- AC-12: ARIA attributes (role, aria-live, aria-atomic) stay on Toast wrapper -->
 <Story
   name="Aria Attributes"
   args={{
@@ -189,15 +217,23 @@
   play={async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    // AC 19: ok/amber has aria-live="polite"
+    // AC-12: aria-live="polite" on Toast wrapper (success/warning)
     const toast = canvas.getByRole("status");
     await expect(toast.getAttribute("aria-live")).toBe("polite");
 
-    // AC 21: aria-atomic="true"
+    // AC-12: aria-atomic="true" on Toast wrapper
     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");
+    // AC-12: role is on Toast wrapper, NOT inside Alert
+    // Verify the .alert child element has no role attribute
+    const alertEl = canvasElement.querySelector(".alert");
+    await expect(alertEl).not.toBeNull();
+    await expect(alertEl!.getAttribute("role")).toBeNull();
+
+    // AC-11: when no title passed, .alert-title has no visible text
+    const titleEl = canvasElement.querySelector(".alert-title");
+    if (titleEl) {
+      await expect(titleEl.textContent?.trim()).toBeFalsy();
+    }
   }}
 />

package/dist/components/feedback/Toast.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
   import type { ToastVariant } from "../../stores/toast.js";
-  import Button from "../primitives/Button.svelte";
+  import Alert from "./Alert.svelte";
 
   interface Props extends HTMLAttributes<HTMLDivElement> {
     /** Unique toast ID (used by the dismiss callback). */
     id: string;
     /** Text content of the notification. */
     message: string;
+    /** Optional title text shown above the message. */
+    title?: 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. */
@@ -17,22 +19,16 @@
   let {
     id,
     message,
+    title = '',
     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
@@ -42,68 +38,13 @@
   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>
+  <Alert variant={variant} {title} {message} ondismiss={() => ondismiss(id)} />
 </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

@@ -5,6 +5,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     id: string;
     /** Text content of the notification. */
     message: string;
+    /** Optional title text shown above the message. */
+    title?: 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. */

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

@@ -2,6 +2,7 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import { expect, within, waitFor } from "storybook/test";
   import ToastRegion from "./ToastRegion.svelte";
+  import Button from "../primitives/Button.svelte";
   import { toast } from "../../stores/toast.js";
 
   // AC 69: no component: in defineMeta — ToastRegion is a singleton portal (composition-only)
@@ -11,6 +12,16 @@
   });
 </script>
 
+<!-- Interactive demo — trigger buttons with duration:0 so toasts persist -->
+<Story name="Interactive">
+  <div style="display: flex; gap: 8px; padding: 1rem;">
+    <Button onclick={() => toast.push('Build complete.', { title: 'Success', variant: 'success', duration: 0 })}>Success</Button>
+    <Button onclick={() => toast.push('+12V rail at 88%.', { title: 'Warning', variant: 'warning', duration: 0 })}>Warning</Button>
+    <Button onclick={() => toast.push('Thermal fault detected.', { title: 'Error', variant: 'error', duration: 0 })}>Error</Button>
+  </div>
+  <ToastRegion position="bottom-right" />
+</Story>
+
 <!-- AC 39, 40, 66 — push one toast and verify it renders in the region -->
 <Story name="Single Toast"
   play={async ({ canvasElement, userEvent }) => {

package/dist/components/feedback/ToastRegion.svelte

@@ -55,6 +55,7 @@
       <Toast
         id={item.id}
         message={item.message}
+        title={item.title}
         variant={item.variant}
         ondismiss={handleDismiss}
       />

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

@@ -1,3 +1,4 @@
+export { default as Alert } from './Alert.svelte';
 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

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

package/dist/components/forms/Input.stories.svelte

@@ -56,3 +56,18 @@
     const input = canvas.getByRole("textbox");
     await expect(input.getAttribute("type")).toBe("email");
   }} />
+
+<Story name="Number Input" args={{ type: "number", value: 42 }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // AC-3: number input baseline — input is visible and enabled
+    const input = canvas.getByRole("spinbutton");
+    await expect(input).toBeVisible();
+    await expect(input).toBeEnabled();
+    // AC-1/AC-2: type is number (spin buttons suppressed via CSS — code-level reviewer check)
+    await expect(input.getAttribute("type")).toBe("number");
+    // Baseline token checks inherited from Default story
+    const bgSunken = resolveTokenColor("--bg-sunken");
+    await expect(getComputedStyle(input).backgroundColor).toBe(bgSunken);
+    await expect(getComputedStyle(input).fontFamily).toContain("JetBrains Mono");
+  }} />

package/dist/components/forms/Input.svelte

@@ -61,4 +61,15 @@
     opacity: 0.4;
     cursor: not-allowed;
   }
+
+  /* Hide WebKit/Blink spin buttons */
+  .input::-webkit-inner-spin-button,
+  .input::-webkit-outer-spin-button {
+    display: none;
+  }
+
+  /* Hide Firefox spin buttons */
+  .input[type='number'] {
+    -moz-appearance: textfield;
+  }
 </style>

package/dist/components/forms/InputWrap.composition.stories.svelte

@@ -3,6 +3,7 @@
   import { expect, within } from "storybook/test";
   import InputWrap from "./InputWrap.svelte";
   import Input from "./Input.svelte";
+  import { resolveTokenColor } from "../../storybook-utils.js";
 
   const { Story } = defineMeta({
     title: "Forms/InputWrap/Composition",
@@ -25,6 +26,16 @@
     const iconPre = canvasElement.querySelector(".icon-pre");
     await expect(iconPre).not.toBeNull();
     await expect(iconPre!.getAttribute("aria-hidden")).toBe("true");
+
+    // AC-7: SVG fill must resolve to --ink-faint (via fill: currentColor inheriting from .icon-pre)
+    const svgEl = canvasElement.querySelector(".icon-pre svg");
+    await expect(svgEl).not.toBeNull();
+    const probe = document.createElement("div");
+    probe.style.cssText = "color:var(--ink-faint);position:absolute;opacity:0";
+    document.body.appendChild(probe);
+    const inkFaintColor = getComputedStyle(probe).color;
+    document.body.removeChild(probe);
+    await expect(getComputedStyle(svgEl!).fill).toBe(inkFaintColor);
   }}>
   <InputWrap iconPre={mailIcon}>
     <Input type="email" placeholder="you@domain.com" />

package/dist/components/forms/InputWrap.stories.svelte

@@ -48,6 +48,15 @@
     const canvas = within(canvasElement);
     const clearBtn = canvas.getByRole("button", { name: "Clear" });
     await expect(clearBtn).toBeVisible();
+
+    // AC-4: clear button resting color must be --ink-dim
+    const restProbe = document.createElement("div");
+    restProbe.style.cssText = "color:var(--ink-dim);position:absolute;opacity:0";
+    document.body.appendChild(restProbe);
+    const inkDimColor = getComputedStyle(restProbe).color;
+    document.body.removeChild(restProbe);
+    await expect(getComputedStyle(clearBtn).color).toBe(inkDimColor);
+
   }}>
   <Input type="text" value="DISTRANS-AR1" />
 </Story>

package/dist/components/forms/InputWrap.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements'
   import type { Snippet } from 'svelte'
-  import Button from '../primitives/Button.svelte'
 
   interface Props extends HTMLAttributes<HTMLDivElement> {
     /** Snippet rendered as an icon before the input (aria-hidden). */
@@ -48,14 +47,13 @@
     <span class="addon addon-suf">{addonSuf}</span>
   {/if}
   {#if clearable}
-    <Button
-      variant="ghost"
+    <button
       type="button"
       class={showClear ? 'wrap-clear visible' : 'wrap-clear'}
       aria-label="Clear"
       tabindex={showClear ? 0 : -1}
       onclick={onclear}
-    >×</Button>
+    >×</button>
   {/if}
 </div>
 
@@ -78,6 +76,10 @@
     color: var(--ink-faint);
   }
 
+  .icon-pre :global(svg) {
+    fill: currentColor;
+  }
+
   .addon {
     display: flex;
     align-items: center;
@@ -99,7 +101,7 @@
     border-left: none;
   }
 
-  :global(.wrap-clear) {
+  .wrap-clear {
     position: absolute;
     right: 8px;
     top: 50%;
@@ -107,7 +109,6 @@
     font-family: var(--mono);
     font-size: 14px;
     line-height: 1;
-    color: var(--ink-faint);
     cursor: pointer;
     background: none;
     border: none;
@@ -115,14 +116,15 @@
     transition: color var(--transition);
     opacity: 0;
     pointer-events: none;
+    color: var(--ink-dim);
   }
 
-  :global(.wrap-clear.visible) {
-    opacity: 1;
-    pointer-events: auto;
+  .wrap-clear:hover {
+    color: var(--amber);
   }
 
-  :global(.wrap-clear:hover) {
-    color: var(--ink);
+  .wrap-clear.visible {
+    opacity: 1;
+    pointer-events: auto;
   }
 </style>