@spaethtech/svelte-ui 0.21.5-dev.147.eb2f000 → 0.21.5-dev.150.7bf55da

package/dist/components/Input.svelte

@@ -3,7 +3,7 @@
   import type { HTMLInputAttributes } from "svelte/elements";
   import type { Size } from "../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../types/responsive.js";
-  import type { Variant } from "../types/variants.js";
+  import { variantToken, type Variant } from "../types/variants.js";
   import FieldChrome, { nextFieldId } from "./FieldChrome.svelte";
 
   // Omit the native `size` attribute (character width, a number) — we repurpose `size` as the
@@ -191,22 +191,50 @@
       paddingClasses = "px-2";
     }
 
-    // Border colour comes from the variant map (the shared tint scheme — token @ --ui-tint-border at
-    // rest, @ --ui-tint-border-hover on hover/focus — same as Card/DataTable/TextArea, so every bordered
-    // surface stays uniform under any theme). `borderless` overrides it with transparent (the field's
-    // own background) — the 1px box stays, so the field never jumps, and the focus outline still fires.
-    const frameStyles = borderless ? "[border-color:transparent]" : borderVariantClass[variant];
+    // Frame + fill follow the field's "liveness", ordered by the shared border-tint ladder — all from
+    // the variant's OWN token via `--field-accent` (set on the wrapper below; neutral/ghost → the
+    // neutral token), so there's NO `secondary` special-case: editable 50% > read-only 35% > disabled
+    // 15% (quiet → live). Read-only and disabled take the muted neutral fill; editable fills with the
+    // page background. `borderless` (editable only) drops the visible frame while keeping the 1px box.
+    const editableFrame = borderless ? "[border-color:transparent]" : borderVariantClass[variant];
     // Field background follows the variant axis: `ghost` is transparent (chromeless); every other
     // variant fills with --ui-color-background so the field reads as a field on a non-white page.
-    const fieldBg =
+    const editableBg =
       variant === "ghost" ? "bg-transparent" : "[background-color:var(--ui-color-background)]";
+    const mutedFill =
+      "[background-color:color-mix(in_srgb,var(--ui-color-neutral)_var(--ui-tint-fill-muted),transparent)]";
+
+    let fillStyles: string;
+    let frameStyles: string;
+    let stateStyles = ""; // cursor + (for read-only) the inset focus ring
+    if (disabled) {
+      // Quietest frame; muted fill; not focusable (no ring). No more secondary-blue border.
+      fillStyles = mutedFill;
+      frameStyles =
+        "[border-color:color-mix(in_srgb,var(--field-accent)_var(--ui-tint-border-disabled),transparent)]";
+      stateStyles = "cursor-not-allowed";
+    } else if (readonly) {
+      // A distinct read-only look: quieter-than-editable frame (35% → 80% on hover/focus), muted fill,
+      // full-strength text, and the focus ring kept (keyboard users land here). The ring is drawn INSIDE
+      // the frame (outline-offset -2px) so a scrolling Card/Dialog can't clip it.
+      fillStyles = mutedFill;
+      frameStyles =
+        "[border-color:color-mix(in_srgb,var(--field-accent)_var(--ui-tint-border-readonly),transparent)] hover:[border-color:color-mix(in_srgb,var(--field-accent)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--field-accent)_var(--ui-tint-border-hover),transparent)]";
+      stateStyles =
+        "focus-within:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)] focus-within:[outline-offset:-2px]";
+    } else {
+      fillStyles = editableBg;
+      frameStyles = editableFrame;
+      stateStyles =
+        "focus-within:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)] focus-within:[outline-offset:-2px]";
+    }
+
     const themeStyles = [
-      fieldBg,
+      fillStyles,
       "border", // 1px — matches --ui-border (List/TextArea); uniform across the library
       paddingClasses,
       frameStyles,
-      "focus-within:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)]",
-      "focus-within:[outline-offset:0px]",
+      stateStyles,
     ].join(" ");
 
     // Error state (shared): chrome `error` set OR a failing `validate` (once touched).
@@ -216,15 +244,7 @@
         "[border-color:var(--ui-color-error)] focus-within:[ring-color:var(--ui-color-error)]";
     }
 
-    // Disabled state — borders are uniformly 1px now, so no padding compensation is needed.
-    // (readonly renders like a normal field: same 1px frame + hover/focus glow, e.g. Select's trigger.)
-    let disabledStyles = "";
-    if (disabled) {
-      disabledStyles =
-        "![background-color:color-mix(in_srgb,var(--ui-color-text)_5%,transparent)] [border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)] cursor-not-allowed";
-    }
-
-    return `${base} ${themeStyles} ${validationStyles} ${disabledStyles}`.trim();
+    return `${base} ${themeStyles} ${validationStyles}`.trim();
   });
 
   let inputClasses = $derived.by(() => {
@@ -240,6 +260,10 @@
       "disabled:bg-transparent",
       "disabled:[color:color-mix(in_srgb,var(--ui-color-text)_40%,transparent)]",
       "disabled:cursor-not-allowed",
+      // Read-only keeps full-strength text but reads as non-editable: a text cursor (it's selectable)
+      // and no blinking caret (nothing to type).
+      "read-only:cursor-text",
+      "read-only:[caret-color:transparent]",
     ].join(" ");
 
     return `${base} ${themeStyles} ${inputClass}`.trim();
@@ -323,7 +347,11 @@
   class={containerClass}
 >
   {#snippet control({ describedBy })}
-    <div bind:this={fieldElement} class="relative {wrapperClasses}" style="user-select: none;">
+    <div
+      bind:this={fieldElement}
+      class="relative {wrapperClasses}"
+      style="user-select: none; --field-accent: var({variantToken[variant]});"
+    >
       {#if icon && iconPosition === "left"}
       {#if iconClickable}
         <div

package/dist/components/Input.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from "svelte";
 import type { HTMLInputAttributes } from "svelte/elements";
 import type { Size } from "../types/sizes.js";
 import { type Responsive } from "../types/responsive.js";
-import type { Variant } from "../types/variants.js";
+import { type Variant } from "../types/variants.js";
 interface Props extends Omit<HTMLInputAttributes, "size"> {
     /** Accepts number too so remote-form field spreads (`{...field.as(...)}`) type-check. */
     value?: string | number;

package/dist/components/Toast/ToastRow.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  /**
+   * One toast row: a filled Alert plus (optionally) an action button and a close button. Owns its own
+   * auto-dismiss countdown so it can PAUSE while the pointer is over it or keyboard focus is inside it
+   * (a `holds` counter handles pointer + focus overlapping) — that keeps the `action` reachable by
+   * mouse AND keyboard. `timeout: 0` is sticky (no countdown). Controls are our <Button>, never raw
+   * <button>, per the composition standard.
+   */
+  import { onMount } from "svelte";
+  import Alert from "../Alert.svelte";
+  import Button from "../Button.svelte";
+  import IconClose from "~icons/mdi/close";
+  import { uiI18n } from "../../i18n.js";
+  import { dismissToast, type ToastItem } from "./toast.svelte.js";
+  import type { Variant } from "../../types/variants.js";
+  import type { Responsive } from "../../types/responsive.js";
+  import type { Size } from "../../types/sizes.js";
+
+  const i18n = uiI18n();
+
+  let {
+    item,
+    fallbackVariant,
+    fallbackSize,
+  }: {
+    item: ToastItem;
+    /** Toaster-level defaults for toasts that didn't set their own. */
+    fallbackVariant?: Variant;
+    fallbackSize?: Responsive<Size>;
+  } = $props();
+
+  // Auto-dismiss countdown with pause/resume. `remaining` ms is decremented by whatever has elapsed
+  // each time we pause; while `holds > 0` (hovered and/or focused) no timer runs.
+  let remaining = item.timeout;
+  let startedAt = 0;
+  let handle: ReturnType<typeof setTimeout> | undefined;
+  let holds = 0;
+
+  function clear() {
+    if (handle !== undefined) {
+      clearTimeout(handle);
+      handle = undefined;
+    }
+  }
+  function run() {
+    clear();
+    if (item.timeout <= 0 || typeof window === "undefined") return;
+    startedAt = Date.now();
+    handle = window.setTimeout(() => dismissToast(item.id), remaining);
+  }
+  function hold() {
+    if (item.timeout <= 0) return;
+    if (handle !== undefined) remaining -= Date.now() - startedAt; // bank elapsed time once
+    clear();
+    holds++;
+  }
+  function release() {
+    if (item.timeout <= 0) return;
+    holds = Math.max(0, holds - 1);
+    if (holds > 0) return;
+    if (remaining > 0) run();
+    else dismissToast(item.id);
+  }
+
+  onMount(() => {
+    run();
+    return clear;
+  });
+
+  function runAction() {
+    // Run the handler, then dismiss — unless the action opted out with `dismiss: false` (keep open).
+    item.action?.onclick();
+    if (item.action?.dismiss !== false) dismissToast(item.id);
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+  class="pointer-events-auto flex min-w-56 items-start gap-1 rounded shadow-lg [background-color:var(--ui-color-background)]"
+  role="status"
+  onpointerenter={hold}
+  onpointerleave={release}
+  onfocusin={hold}
+  onfocusout={release}
+>
+  <Alert variant={item.variant ?? fallbackVariant} size={item.size ?? fallbackSize} filled class="grow"
+    >{item.message}</Alert
+  >
+  {#if item.action}
+    <Button variant="ghost" size="sm" class="shrink-0 self-center" onclick={runAction}>
+      {item.action.label}
+    </Button>
+  {/if}
+  <Button
+    variant="ghost"
+    size="sm"
+    class="shrink-0 self-center"
+    aria-label={i18n.messages.dismiss}
+    title={i18n.messages.dismiss}
+    onclick={() => dismissToast(item.id)}
+  >
+    {#snippet icon()}<IconClose />{/snippet}
+  </Button>
+</div>

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

@@ -0,0 +1,13 @@
+import { type ToastItem } from "./toast.svelte.js";
+import type { Variant } from "../../types/variants.js";
+import type { Responsive } from "../../types/responsive.js";
+import type { Size } from "../../types/sizes.js";
+type $$ComponentProps = {
+    item: ToastItem;
+    /** Toaster-level defaults for toasts that didn't set their own. */
+    fallbackVariant?: Variant;
+    fallbackSize?: Responsive<Size>;
+};
+declare const ToastRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToastRow = ReturnType<typeof ToastRow>;
+export default ToastRow;

package/dist/components/Toast/Toaster.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-  import { uiI18n } from "../../i18n.js";
-  const i18n = uiI18n();
   /**
    * Renders the toast store's items in a fixed, top-layer stack. Mount ONCE at the app root; push with
-   * `toast.*` from anywhere. Each toast is an Alert (filled) honouring its variant + size.
+   * `toast.*` from anywhere. Each toast is a <ToastRow> (filled Alert + optional action + close),
+   * which owns its own pausable auto-dismiss countdown.
    */
-  import Alert from "../Alert.svelte";
-  import IconClose from "~icons/mdi/close";
-  import { getToasts, dismissToast } from "./toast.svelte.js";
+  import ToastRow from "./ToastRow.svelte";
+  import { getToasts } from "./toast.svelte.js";
   import type { Size } from "../../types/sizes.js";
   import type { Responsive } from "../../types/responsive.js";
   import type { Variant } from "../../types/variants.js";
@@ -35,19 +33,7 @@
 {#if items.length}
   <div class="pointer-events-none fixed z-[100] flex max-w-[90vw] flex-col gap-2 {posClass}">
     {#each items as t (t.id)}
-      <div
-        class="pointer-events-auto flex min-w-56 items-start gap-2 rounded shadow-lg [background-color:var(--ui-color-background)]"
-      >
-        <Alert variant={t.variant ?? variant} size={t.size ?? size} filled class="grow"
-          >{t.message}</Alert
-        >
-        <button
-          type="button"
-          aria-label={i18n.messages.dismiss}
-          class="shrink-0 self-center pr-2 opacity-60 hover:opacity-100"
-          onclick={() => dismissToast(t.id)}><IconClose class="size-4" /></button
-        >
-      </div>
+      <ToastRow item={t} fallbackVariant={variant} fallbackSize={size} />
     {/each}
   </div>
 {/if}

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

@@ -5,16 +5,31 @@ import type { Size } from "../../types/sizes.js";
  * shared Variant (status subset) + Size axes. Auto-dismisses after `timeout` ms (0 = sticky).
  */
 export type ToastVariant = "danger" | "success" | "warning" | "info" | "primary";
+/**
+ * An optional action rendered as a small button inside the toast (e.g. "Undo"). Clicking it runs
+ * `onclick`, then the toast is dismissed. Set `dismiss: false` to KEEP the toast open instead (e.g.
+ * to show progress) and close it later via the id returned from `toast.*` + `dismissToast`.
+ */
+export type ToastAction = {
+    /** Button label, e.g. "Undo". */
+    label: string;
+    /** Click handler (its return value is ignored). */
+    onclick: () => void;
+    /** Dismiss the toast after `onclick` runs. Default `true`; `false` keeps it open. */
+    dismiss?: boolean;
+};
 export type ToastItem = {
     id: number;
     variant: ToastVariant;
     message: string;
     size: Size;
     timeout: number;
+    action?: ToastAction;
 };
 export type ToastOptions = {
     timeout?: number;
     size?: Size;
+    action?: ToastAction;
 };
 /** The live toast list (read in <Toaster>; mutations are reactive). */
 export declare function getToasts(): ToastItem[];

package/dist/components/Toast/toast.svelte.js

@@ -9,12 +9,13 @@ export function dismissToast(id) {
     if (i >= 0)
         items.splice(i, 1);
 }
+// NOTE: auto-dismiss timing lives in <Toaster> (per toast row), NOT here — the row can then PAUSE the
+// countdown while the pointer is over it or keyboard focus is inside it, so an `action` button stays
+// reachable. `push` only records `timeout` (0 = sticky); the row reads it and owns the timer.
 function push(variant, message, opts = {}) {
     const id = ++seq;
     const timeout = opts.timeout ?? 4000;
-    items.push({ id, variant, message, size: opts.size ?? "md", timeout });
-    if (timeout > 0 && typeof window !== "undefined")
-        window.setTimeout(() => dismissToast(id), timeout);
+    items.push({ id, variant, message, size: opts.size ?? "md", timeout, action: opts.action });
     return id;
 }
 export const toast = {

package/dist/index.d.ts

@@ -15,7 +15,7 @@ export { Stat } from "./components/Stat/index.js";
 export { Timeline } from "./components/Timeline/index.js";
 export type { TimelineItem } from "./components/Timeline/index.js";
 export { default as Toaster } from "./components/Toast/Toaster.svelte";
-export { toast, getToasts, dismissToast, type ToastVariant, type ToastItem, } from "./components/Toast/toast.svelte.js";
+export { toast, getToasts, dismissToast, type ToastVariant, type ToastItem, type ToastOptions, type ToastAction, } from "./components/Toast/toast.svelte.js";
 export { default as Dialog } from "./components/Dialog.svelte";
 export { Drawer } from "./components/Drawer/index.js";
 export { default as ConfirmDialog } from "./components/ConfirmDialog.svelte";

package/dist/theme.css

@@ -124,7 +124,10 @@
 	 * TextArea, an outline Button) moves to on hover/focus. Theme-independent constants (no colour → no
 	 * per-theme scope needed) — but a theme MAY override these to tune the whole tint language. */
   --ui-tint-soft: 12%;
+  --ui-tint-fill-muted: 5%; /* disabled / read-only field fill — a faint neutral wash (quieter than soft) */
+  --ui-tint-border-disabled: 15%; /* disabled field frame — the QUIETEST frame (a disabled control recedes) */
   --ui-tint-divider: 30%; /* soft internal dividers — deliberately lighter than the 50% frame/field border */
+  --ui-tint-border-readonly: 35%; /* read-only field frame — quieter than editable (50%), louder than a divider */
   --ui-tint-border: 50%;
   --ui-tint-border-hover: 80%;
   --ui-tint-strong: 80%;

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-export { toast, getToasts, dismissToast, type ToastVariant, type ToastItem, } from "./components/Toast/toast.svelte.js";
+export { toast, getToasts, dismissToast, type ToastVariant, type ToastItem, type ToastOptions, type ToastAction, } from "./components/Toast/toast.svelte.js";
 export { anchored, computePlacement, resolveBoundary } from "./positioning/anchored.js";
 export type { Side, Align, Boundary, PlaceOptions, Placement, AnchoredParams, } from "./positioning/anchored.js";
 export { tooltip } from "./positioning/tooltip.js";

package/docs/themes.md

@@ -65,6 +65,27 @@ theme-independent** (identical in light and dark) — only the accent color flip
   `color-mix(in srgb, var(--ui-color-neutral) var(--ui-tint-border), transparent)` for a frame edge,
   `--ui-tint-border-hover` for its hover.)
 
+### Field states — the border-tint ladder
+
+A field's frame reflects how "live" it is, all from the **variant's own token** (so a `neutral` field is
+monochrome, a `primary` field tints blue — there is **no `secondary` special-case** for disabled):
+
+| state | border tint | fill |
+|---|---|---|
+| editable | `--ui-tint-border` (50%) → `--ui-tint-border-hover` (80%) on hover/focus | page background |
+| **read-only** | `--ui-tint-border-readonly` (**35%**) → 80% on hover/focus | `--ui-tint-fill-muted` |
+| **disabled** | `--ui-tint-border-disabled` (**15%**) | `--ui-tint-fill-muted` |
+
+- `--ui-tint-border-readonly` — `35%` — read-only frame (quieter than editable, louder than a divider).
+- `--ui-tint-border-disabled` — `15%` — disabled frame, the **quietest** (a disabled control recedes).
+- `--ui-tint-fill-muted` — `5%` — the faint neutral wash behind a read-only or disabled field
+  (`color-mix(in srgb, var(--ui-color-neutral) var(--ui-tint-fill-muted), transparent)`).
+
+Read-only keeps **full-strength text**, a text cursor, and the focus ring (it's selectable/focusable),
+but hides the caret; disabled dims its text to 40%. The focus ring is drawn **inside** the frame
+(`outline-offset: -2px`) so a scrolling `Card`/`Dialog` can't clip it. Overriding these percentages
+per theme retunes read-only/disabled everywhere at once.
+
 ## Sizing — the `size` axis (`sm` / `md` / `lg`)
 
 ### Control heights

package/docs/usage.md

@@ -1169,6 +1169,49 @@ reads `GridState.group` (`{ key, dir }`) and does `ORDER BY <group>, <sort>`.
 client-side counterpart to a remote `query()`; `matchesRow(row, ast)` is the underlying AST evaluator if
 you need to filter an array yourself. See the live demo for the full DataTable + Query walkthrough.
 
+### Toasts
+
+Mount a single `<Toaster />` once at the app root, then push from anywhere with `toast.*`. The push
+functions (`toast`, `dismissToast`, `getToasts`) are component-free values, so import them from the
+dedicated **`@spaethtech/svelte-ui/toast`** subpath (or `/utils`, or the root barrel) to stay barrel-free.
+
+```svelte
+<script>
+  import { Toaster } from "@spaethtech/svelte-ui/toaster"; // mount once (e.g. +layout.svelte)
+  import { toast } from "@spaethtech/svelte-ui/toast"; // push from anywhere
+</script>
+
+<Toaster position="bottom-right" />
+
+<!-- status variants; each returns an id you can toast.dismiss(id) -->
+toast.success("Saved");
+toast.info("Heads up", { timeout: 0 }); // 0 = sticky (dismiss with the × button)
+toast.warning("Almost full", { size: "lg" });
+```
+
+**Action button (e.g. Undo).** Pass an `action`; it renders a small button that runs `onclick` and then
+dismisses the toast. The auto-dismiss countdown pauses while the pointer is over the toast or keyboard
+focus is inside it, so the action stays reachable. Set `dismiss: false` to keep the toast open instead
+(close it later by id).
+
+```svelte
+let archived = $state(false);
+
+function archive() {
+  archived = true;
+  toast.info("Archived “Breaking Bad”", {
+    action: { label: "Undo", onclick: () => (archived = false) },
+  });
+}
+
+// Keep-open variant (show progress, then dismiss yourself):
+const id = toast.info("Uploading…", {
+  timeout: 0,
+  action: { label: "Cancel", onclick: cancelUpload, dismiss: false },
+});
+// … later: toast.dismiss(id);
+```
+
 ## Theme Integration
 
 ### Using CSS Variables

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.21.5-dev.147.eb2f000",
+  "version": "0.21.5-dev.150.7bf55da",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"
@@ -109,6 +109,11 @@
       "types": "./dist/components/Toast/Toaster.svelte.d.ts",
       "svelte": "./dist/components/Toast/Toaster.svelte"
     },
+    "./toast": {
+      "types": "./dist/components/Toast/toast.svelte.d.ts",
+      "svelte": "./dist/components/Toast/toast.svelte.js",
+      "default": "./dist/components/Toast/toast.svelte.js"
+    },
     "./dialog": {
       "types": "./dist/components/Dialog.svelte.d.ts",
       "svelte": "./dist/components/Dialog.svelte"