@lyeve-labs/ui-kit 0.9.1 → 0.10.0

package/dist/components/Select.svelte

@@ -1,5 +1,14 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import {
+    CONTROL_BASE,
+    FIELD_ERROR,
+    FIELD_HINT,
+    FIELD_LABEL,
+    FIELD_WRAP,
+    controlBorder,
+    describedBy,
+  } from '../internal/field.js';
 
   type SE = Event & { currentTarget: HTMLSelectElement };
 
@@ -7,6 +16,8 @@
     value,
     id,
     name,
+    label,
+    hint,
     required = false,
     disabled = false,
     error,
@@ -17,6 +28,8 @@
     value?: string | null;
     id?: string;
     name?: string;
+    label?: string;
+    hint?: string;
     required?: boolean;
     disabled?: boolean;
     error?: string;
@@ -25,26 +38,27 @@
     children?: Snippet;
   } = $props();
 
-  const base =
-    'w-full bg-surface-2 rounded-lg px-3 py-2 text-sm text-fg ' +
-    'focus:outline-none transition-colors appearance-none cursor-pointer ' +
-    'disabled:opacity-50 disabled:cursor-not-allowed';
+  const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined));
 </script>
 
-<div class="flex flex-col gap-1 {cls}">
+<div class="{FIELD_WRAP} {cls}">
+  {#if label}
+    <label for={fieldId} class={FIELD_LABEL}>
+      {label}{#if required}<span class="text-danger ml-0.5" aria-label="required">*</span>{/if}
+    </label>
+  {/if}
+
   <div class="relative">
     <select
-      {id}
+      id={fieldId}
       {name}
       {required}
       {disabled}
       value={value ?? ''}
       {onchange}
-      class="{base}
-        {error
-        ? 'border border-danger focus:border-danger/70'
-        : 'border border-line focus:border-brand/50'}
-        pr-8"
+      aria-invalid={error ? 'true' : undefined}
+      aria-describedby={describedBy(fieldId, error, hint)}
+      class="{CONTROL_BASE} {controlBorder(!!error)} appearance-none cursor-pointer pr-8"
     >
       {@render children?.()}
     </select>
@@ -63,7 +77,10 @@
       </svg>
     </span>
   </div>
+
   {#if error}
-    <p class="text-xs text-danger">{error}</p>
+    <p id={fieldId ? `${fieldId}-error` : undefined} class={FIELD_ERROR}>{error}</p>
+  {:else if hint}
+    <p id={fieldId ? `${fieldId}-hint` : undefined} class={FIELD_HINT}>{hint}</p>
   {/if}
 </div>

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

@@ -6,6 +6,8 @@ type $$ComponentProps = {
     value?: string | null;
     id?: string;
     name?: string;
+    label?: string;
+    hint?: string;
     required?: boolean;
     disabled?: boolean;
     error?: string;

package/dist/components/StepIndicator.svelte

@@ -29,7 +29,7 @@
                 ? ''
                 : done || active
                   ? 'bg-brand'
-                  : 'bg-line'} h-px transition-colors"
+                  : 'bg-line'} h-px transition-colors duration-150"
             ></div>
 
             <!-- Step circle -->
@@ -62,7 +62,7 @@
                 ? ''
                 : done
                   ? 'bg-brand'
-                  : 'bg-line'} h-px transition-colors"
+                  : 'bg-line'} h-px transition-colors duration-150"
             ></div>
           </div>
 
@@ -72,7 +72,7 @@
                 ? 'text-fg'
                 : done
                   ? 'text-muted'
-                  : 'text-faint'} transition-colors"
+                  : 'text-faint'} transition-colors duration-150"
             >
               {step.label}
             </p>
@@ -117,7 +117,9 @@
             </div>
             {#if i < steps.length - 1}
               <div
-                class="my-1 w-px flex-1 {done ? 'bg-brand/40' : 'bg-line'} transition-colors"
+                class="my-1 w-px flex-1 {done
+                  ? 'bg-brand/40'
+                  : 'bg-line'} transition-colors duration-150"
               ></div>
             {/if}
           </div>
@@ -127,7 +129,7 @@
                 ? 'text-fg'
                 : done
                   ? 'text-muted'
-                  : 'text-faint'} transition-colors"
+                  : 'text-faint'} transition-colors duration-150"
             >
               {step.label}
             </p>

package/dist/components/Table.svelte

@@ -29,7 +29,9 @@
       [&_tbody_td]:px-4 [&_tbody_td]:py-3 [&_tbody_td]:text-fg [&_tbody_td]:align-middle
       [&_tbody_tr]:border-b [&_tbody_tr]:border-line [&_tbody_tr:last-child]:border-0
       {striped ? '[&_tbody_tr:nth-child(even)]:bg-surface-2/40' : ''}
-      {hoverable ? '[&_tbody_tr:hover]:bg-surface-2/60 [&_tbody_tr]:transition-colors' : ''}"
+      {hoverable
+      ? '[&_tbody_tr:hover]:bg-surface-2/60 [&_tbody_tr]:transition-colors duration-150'
+      : ''}"
   >
     {@render children()}
   </table>

package/dist/components/Tabs.svelte

@@ -19,7 +19,7 @@
       role="tab"
       aria-selected={active === tab.id}
       onclick={() => onchange(tab.id)}
-      class="relative px-4 py-2.5 text-sm font-medium transition-colors whitespace-nowrap
+      class="relative px-4 py-2.5 text-sm font-medium transition-colors duration-150 whitespace-nowrap
         {active === tab.id
         ? 'text-fg after:absolute after:bottom-0 after:inset-x-0 after:h-0.5 after:bg-brand after:rounded-t'
         : 'text-faint hover:text-fg'}"

package/dist/components/Tag.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  type Tone = 'neutral' | 'brand' | 'violet' | 'success' | 'warn' | 'danger';
+  import type { AccentTone } from '../internal/tone.js';
 
   interface Props {
     label: string;
-    tone?: Tone;
+    tone?: AccentTone;
     removable?: boolean;
     onremove?: () => void;
     class?: string;
@@ -17,7 +17,7 @@
     class: cls = '',
   }: Props = $props();
 
-  const tones: Record<Tone, string> = {
+  const tones: Record<AccentTone, string> = {
     neutral: 'bg-surface-2 text-muted border-line',
     brand: 'bg-brand/10 text-brand border-brand/20',
     violet: 'bg-violet/10 text-violet border-violet/20',

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

@@ -1,7 +1,7 @@
-type Tone = 'neutral' | 'brand' | 'violet' | 'success' | 'warn' | 'danger';
+import type { AccentTone } from '../internal/tone.js';
 interface Props {
     label: string;
-    tone?: Tone;
+    tone?: AccentTone;
     removable?: boolean;
     onremove?: () => void;
     class?: string;

package/dist/components/Textarea.svelte

@@ -1,4 +1,14 @@
 <script lang="ts">
+  import {
+    CONTROL_MULTILINE,
+    FIELD_ERROR,
+    FIELD_HINT,
+    FIELD_LABEL,
+    FIELD_WRAP,
+    controlBorder,
+    describedBy,
+  } from '../internal/field.js';
+
   type TA = HTMLTextAreaElement;
   type TAE = Event & { currentTarget: TA };
 
@@ -6,6 +16,7 @@
     value = $bindable(''),
     id,
     name,
+    label,
     placeholder,
     rows = 4,
     maxlength,
@@ -22,6 +33,7 @@
     value?: string;
     id?: string;
     name?: string;
+    label?: string;
     placeholder?: string;
     rows?: number;
     maxlength?: number;
@@ -36,11 +48,7 @@
     onblur?: (e: FocusEvent & { currentTarget: TA }) => void;
   } = $props();
 
-  const base =
-    'w-full bg-surface-2 rounded-lg px-3 py-2 text-sm text-fg ' +
-    'focus:outline-none transition-colors ' +
-    'placeholder:text-faint ' +
-    'disabled:opacity-50 disabled:cursor-not-allowed';
+  const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined));
 
   function handleInput(e: TAE) {
     value = e.currentTarget.value;
@@ -48,9 +56,15 @@
   }
 </script>
 
-<div class="flex flex-col gap-1 {cls}">
+<div class="{FIELD_WRAP} {cls}">
+  {#if label}
+    <label for={fieldId} class={FIELD_LABEL}>
+      {label}{#if required}<span class="text-danger ml-0.5" aria-label="required">*</span>{/if}
+    </label>
+  {/if}
+
   <textarea
-    {id}
+    id={fieldId}
     {name}
     {rows}
     {maxlength}
@@ -58,18 +72,16 @@
     {disabled}
     {readonly}
     {placeholder}
-    class="{base}
-      {error
-      ? 'border border-danger focus:border-danger/70'
-      : 'border border-line focus:border-brand/50'}
-      {resize ? 'resize-y' : 'resize-none'}"
+    aria-invalid={error ? 'true' : undefined}
+    aria-describedby={describedBy(fieldId, error, hint)}
+    class="{CONTROL_MULTILINE} {controlBorder(!!error)} {resize ? 'resize-y' : 'resize-none'}"
     oninput={handleInput}
     {onblur}>{value}</textarea
   >
+
   {#if error}
-    <p class="text-xs text-danger">{error}</p>
-  {/if}
-  {#if hint}
-    <p class="text-xs text-faint">{hint}</p>
+    <p id={fieldId ? `${fieldId}-error` : undefined} class={FIELD_ERROR}>{error}</p>
+  {:else if hint}
+    <p id={fieldId ? `${fieldId}-hint` : undefined} class={FIELD_HINT}>{hint}</p>
   {/if}
 </div>

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

@@ -6,6 +6,7 @@ type $$ComponentProps = {
     value?: string;
     id?: string;
     name?: string;
+    label?: string;
     placeholder?: string;
     rows?: number;
     maxlength?: number;

package/dist/components/ThemeToggle.svelte

@@ -23,7 +23,7 @@
   type="button"
   onclick={flip}
   aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
-  class="rounded-lg p-2 text-faint transition-colors hover:bg-surface-2 hover:text-fg {klass}"
+  class="rounded-lg p-2 text-faint transition-colors duration-150 hover:bg-surface-2 hover:text-fg {klass}"
 >
   {#if theme === 'dark'}
     <Sun size={16} aria-hidden="true" />

package/dist/components/Toaster.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import { toast, type ToastTone } from '../stores/toast.svelte';
+  import { toast } from '../stores/toast.svelte';
+  import { TONE_GLYPH, statusTone, type StatusTone } from '../internal/tone.js';
 
-  const styles: Record<ToastTone, { bar: string; icon: string; mark: string }> = {
-    info: { bar: 'bg-brand', icon: 'text-brand', mark: 'ℹ' },
-    success: { bar: 'bg-success', icon: 'text-success', mark: '✓' },
-    warn: { bar: 'bg-warn', icon: 'text-warn', mark: '!' },
-    danger: { bar: 'bg-danger', icon: 'text-danger', mark: '×' },
+  const styles: Record<StatusTone, { bar: string; icon: string }> = {
+    neutral: { bar: 'bg-muted', icon: 'text-muted' },
+    brand: { bar: 'bg-brand', icon: 'text-brand' },
+    success: { bar: 'bg-success', icon: 'text-success' },
+    warn: { bar: 'bg-warn', icon: 'text-warn' },
+    danger: { bar: 'bg-danger', icon: 'text-danger' },
   };
 </script>
 
@@ -18,23 +20,43 @@
              bg-surface pl-0 pr-3 py-3 shadow-xl animate-[toast-in_140ms_ease-out]"
       role="status"
     >
-      <span class="w-1 self-stretch shrink-0 {styles[t.tone].bar}"></span>
+      <span class="w-1 self-stretch shrink-0 {styles[statusTone(t.tone)].bar}"></span>
       <span
-        class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-current text-xs font-bold {styles[
-          t.tone
+        class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-current {styles[
+          statusTone(t.tone)
         ].icon}"
         aria-hidden="true"
       >
-        {styles[t.tone].mark}
+        <svg
+          width="11"
+          height="11"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d={TONE_GLYPH[statusTone(t.tone)]} />
+        </svg>
       </span>
       <p class="flex-1 text-sm text-fg leading-snug">{t.message}</p>
       <button
         type="button"
-        class="text-faint hover:text-fg transition-colors text-lg leading-none -mt-0.5"
+        class="shrink-0 text-faint transition-colors duration-150 hover:text-fg"
         aria-label="Dismiss"
         onclick={() => toast.dismiss(t.id)}
       >
-        ×
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          aria-hidden="true"><path d="M18 6L6 18M6 6l12 12" /></svg
+        >
       </button>
     </div>
   {/each}

package/dist/components/Toggle.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+  import { FIELD_HINT } from '../internal/field.js';
   let {
     checked = $bindable(false),
     label,
     hint,
     disabled = false,
     size = 'md',
+    class: cls = '',
     onchange,
   }: {
     checked?: boolean;
@@ -12,6 +14,7 @@
     hint?: string;
     disabled?: boolean;
     size?: 'sm' | 'md';
+    class?: string;
     onchange?: (checked: boolean) => void;
   } = $props();
 
@@ -40,7 +43,7 @@
 <label
   class="inline-flex items-start gap-2.5 cursor-pointer select-none {disabled
     ? 'opacity-50 cursor-not-allowed'
-    : ''}"
+    : ''} {cls}"
 >
   <button
     type="button"
@@ -49,7 +52,7 @@
     aria-label={label ?? 'Toggle'}
     {disabled}
     onclick={handleClick}
-    class="relative shrink-0 rounded-full transition-colors focus:outline-none
+    class="relative shrink-0 rounded-full transition-colors duration-150 outline-none
       focus-visible:ring-2 focus-visible:ring-brand/50 focus-visible:ring-offset-1
       focus-visible:ring-offset-ink mt-0.5
       {track[size]}
@@ -67,7 +70,7 @@
         <span class="text-sm text-fg">{label}</span>
       {/if}
       {#if hint}
-        <span class="text-xs text-faint">{hint}</span>
+        <span class={FIELD_HINT}>{hint}</span>
       {/if}
     </span>
   {/if}

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

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     hint?: string;
     disabled?: boolean;
     size?: 'sm' | 'md';
+    class?: string;
     onchange?: (checked: boolean) => void;
 };
 declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "checked">;

package/dist/components/dialog/Dialog.svelte

@@ -195,7 +195,7 @@
       {#if !entry.options.persistent}
         <button
           class="inline-flex items-center justify-center w-8 h-8 -mr-2 rounded-lg
-						text-muted hover:text-fg hover:bg-surface-2 transition-colors shrink-0"
+						text-muted hover:text-fg hover:bg-surface-2 transition-colors duration-150 shrink-0"
           onclick={() => handleClose()}
           aria-label="Close"
         >

package/dist/index.d.ts

@@ -60,4 +60,4 @@ export { openDialog, closeDialog, dismissDialog, dismissAllDialogs, confirm, set
 export type { DialogOptions, DialogEntry, DialogSize } from './components/dialog/types.js';
 export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, setTheme, toggleTheme, themeBootScript, type Theme } from './utils/theme.js';
-export declare const VERSION = "0.8.2";
+export declare const VERSION = "0.10.0";

package/dist/index.js

@@ -69,4 +69,6 @@ export { openDialog, closeDialog, dismissDialog, dismissAllDialogs, confirm, set
 export { cn } from './utils/cn.js';
 export { getTheme, setTheme, toggleTheme, themeBootScript } from './utils/theme.js';
 // ── Version ────────────────────────────────────────────────────────────────
-export const VERSION = '0.8.2';
+// Generated from package.json by `pnpm version:sync`. Bump package.json, never
+// this line; the build and the test suite fail when the two disagree.
+export const VERSION = '0.10.0';

package/dist/internal/field.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The single source of truth for how a form control looks and announces itself.
+ *
+ * Every text-entry control in the library composes its classes from here rather
+ * than spelling them out inline. The nine controls had drifted into three focus
+ * treatments, two wrapper gaps, two error-border opacities and two heights, so
+ * an Input and a NumberInput placed side by side did not line up. Changing a
+ * control's appearance now means changing one of these constants.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+/** Vertical rhythm inside a labelled field: label, control, hint/error. */
+export declare const FIELD_WRAP = "flex flex-col gap-1.5";
+/** The label above a control. */
+export declare const FIELD_LABEL = "text-sm font-medium text-fg";
+/** Hint text below a control. Shown only when there is no error. */
+export declare const FIELD_HINT = "text-xs text-faint";
+/** Error text below a control. Replaces the hint rather than stacking with it. */
+export declare const FIELD_ERROR = "text-xs text-danger";
+/**
+ * Everything a single-line control needs except its border colour.
+ *
+ * `h-control` is a theme token (2.375rem / 38px), not a literal, so the height
+ * is stated once. Controls that grow with their content - Textarea, the
+ * MultiSelect chip well - use `CONTROL_MULTILINE` instead and keep the token as
+ * a minimum.
+ */
+export declare const CONTROL_BASE: string;
+/** As CONTROL_BASE, for controls whose height is driven by their content. */
+export declare const CONTROL_MULTILINE: string;
+/**
+ * The border a control carries at rest and on focus.
+ *
+ * Focus moves the border to full-strength brand. Two controls previously used
+ * `border-brand/50`, which reads as a weaker focus for no reason a user could
+ * infer, and the error focus was split between `border-danger` and
+ * `border-danger/70`.
+ */
+export declare function controlBorder(error: boolean): string;
+/**
+ * Wires a control to whichever of its hint or error is on screen.
+ *
+ * Returns undefined when neither is present, so the attribute is omitted rather
+ * than pointing at an element that was never rendered. Only Input carried
+ * `aria-invalid` before this; nothing carried `aria-describedby`, so a screen
+ * reader announced the control and never the reason it was rejected.
+ */
+export declare function describedBy(id: string | undefined, error?: string, hint?: string): string | undefined;

package/dist/internal/field.js

@@ -0,0 +1,62 @@
+/**
+ * The single source of truth for how a form control looks and announces itself.
+ *
+ * Every text-entry control in the library composes its classes from here rather
+ * than spelling them out inline. The nine controls had drifted into three focus
+ * treatments, two wrapper gaps, two error-border opacities and two heights, so
+ * an Input and a NumberInput placed side by side did not line up. Changing a
+ * control's appearance now means changing one of these constants.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+/** Vertical rhythm inside a labelled field: label, control, hint/error. */
+export const FIELD_WRAP = 'flex flex-col gap-1.5';
+/** The label above a control. */
+export const FIELD_LABEL = 'text-sm font-medium text-fg';
+/** Hint text below a control. Shown only when there is no error. */
+export const FIELD_HINT = 'text-xs text-faint';
+/** Error text below a control. Replaces the hint rather than stacking with it. */
+export const FIELD_ERROR = 'text-xs text-danger';
+/**
+ * Everything a single-line control needs except its border colour.
+ *
+ * `h-control` is a theme token (2.375rem / 38px), not a literal, so the height
+ * is stated once. Controls that grow with their content - Textarea, the
+ * MultiSelect chip well - use `CONTROL_MULTILINE` instead and keep the token as
+ * a minimum.
+ */
+export const CONTROL_BASE = 'w-full h-control rounded-lg bg-surface-2 border px-3 text-sm text-fg ' +
+    'placeholder:text-faint transition-colors duration-150 outline-none ' +
+    'disabled:opacity-50 disabled:cursor-not-allowed';
+/** As CONTROL_BASE, for controls whose height is driven by their content. */
+export const CONTROL_MULTILINE = 'w-full min-h-control rounded-lg bg-surface-2 border px-3 py-2 text-sm text-fg ' +
+    'placeholder:text-faint transition-colors duration-150 outline-none ' +
+    'disabled:opacity-50 disabled:cursor-not-allowed';
+/**
+ * The border a control carries at rest and on focus.
+ *
+ * Focus moves the border to full-strength brand. Two controls previously used
+ * `border-brand/50`, which reads as a weaker focus for no reason a user could
+ * infer, and the error focus was split between `border-danger` and
+ * `border-danger/70`.
+ */
+export function controlBorder(error) {
+    return error ? 'border-danger focus:border-danger' : 'border-line focus:border-brand';
+}
+/**
+ * Wires a control to whichever of its hint or error is on screen.
+ *
+ * Returns undefined when neither is present, so the attribute is omitted rather
+ * than pointing at an element that was never rendered. Only Input carried
+ * `aria-invalid` before this; nothing carried `aria-describedby`, so a screen
+ * reader announced the control and never the reason it was rejected.
+ */
+export function describedBy(id, error, hint) {
+    if (!id)
+        return undefined;
+    if (error)
+        return `${id}-error`;
+    if (hint)
+        return `${id}-hint`;
+    return undefined;
+}

package/dist/internal/tone.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The tone vocabulary, stated once.
+ *
+ * Alert, Banner and the toast store each named their neutral-informational tone
+ * `info`, while Badge, Tag, Indicator and Progress named the same brand-cyan
+ * tone `brand`. A consumer building a status row had to remember which
+ * component wanted which word for the same colour. `brand` is canonical because
+ * it names the token the tone actually resolves to; `info` still works and maps
+ * onto it, so nothing that already ships has to change.
+ */
+/** Tones a status surface can carry. */
+export type StatusTone = 'neutral' | 'brand' | 'success' | 'warn' | 'danger';
+/** What a status surface accepts, including the retained `info` spelling. */
+export type StatusToneInput = StatusTone | 'info';
+/** Status tones plus the decorative accent, for labels rather than states. */
+export type AccentTone = StatusTone | 'violet';
+/** Resolves the accepted spelling to the canonical one. */
+export declare function statusTone(tone: StatusToneInput): StatusTone;
+/**
+ * The glyph each status tone draws, as SVG path data on a 24x24 grid.
+ *
+ * Alert and Toaster drew these as the literal characters ℹ ✓ ! ×, which pick up
+ * whatever the user's font does with them - the check and the cross landed at
+ * different optical weights from every other icon in the library, all of which
+ * are stroked SVG.
+ */
+export declare const TONE_GLYPH: Record<StatusTone, string>;

package/dist/internal/tone.js

@@ -0,0 +1,29 @@
+/**
+ * The tone vocabulary, stated once.
+ *
+ * Alert, Banner and the toast store each named their neutral-informational tone
+ * `info`, while Badge, Tag, Indicator and Progress named the same brand-cyan
+ * tone `brand`. A consumer building a status row had to remember which
+ * component wanted which word for the same colour. `brand` is canonical because
+ * it names the token the tone actually resolves to; `info` still works and maps
+ * onto it, so nothing that already ships has to change.
+ */
+/** Resolves the accepted spelling to the canonical one. */
+export function statusTone(tone) {
+    return tone === 'info' ? 'brand' : tone;
+}
+/**
+ * The glyph each status tone draws, as SVG path data on a 24x24 grid.
+ *
+ * Alert and Toaster drew these as the literal characters ℹ ✓ ! ×, which pick up
+ * whatever the user's font does with them - the check and the cross landed at
+ * different optical weights from every other icon in the library, all of which
+ * are stroked SVG.
+ */
+export const TONE_GLYPH = {
+    neutral: 'M12 8h.01M11 12h1v4h1',
+    brand: 'M12 8h.01M11 12h1v4h1',
+    success: 'M20 6L9 17l-5-5',
+    warn: 'M12 8v5M12 17h.01',
+    danger: 'M18 6L6 18M6 6l12 12',
+};

package/dist/stores/toast.svelte.d.ts

@@ -1,4 +1,9 @@
-export type ToastTone = 'info' | 'success' | 'warn' | 'danger';
+import type { StatusToneInput } from '../internal/tone.js';
+/**
+ * A toast carries the same tone vocabulary as Alert and Banner. `brand` is the
+ * canonical name; `info` is kept because `toast.info(...)` already ships.
+ */
+export type ToastTone = StatusToneInput;
 export interface Toast {
     id: number;
     tone: ToastTone;

package/dist/stores/toast.svelte.js

@@ -13,7 +13,7 @@ class ToastStore {
         this.items = this.items.filter((t) => t.id !== id);
     }
     info(message, timeout) {
-        return this.push('info', message, timeout);
+        return this.push('brand', message, timeout);
     }
     success(message, timeout) {
         return this.push('success', message, timeout);