@lyeve-labs/ui-kit 0.26.0 → 0.28.0

package/dist/components/Alert.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { HIT_AREA } from '../internal/touch.js';
+  import * as motion from '../motion.js';
   import {
     TONE_GLYPH,
     statusTone,
@@ -8,10 +9,30 @@
     type StatusToneInput,
   } from '../internal/tone.js';
 
+  /**
+   * How long a confirmation holds before it clears itself.
+   *
+   * A toast waits 4000ms. This waits longer because it carries more: a toast is
+   * one line floating over the page, and an alert is a title and a sentence
+   * sitting in the reading order, which takes a beat to find and a beat to
+   * read.
+   */
+  const DISMISS_AFTER = 5000;
+
   interface Props {
     tone?: StatusToneInput;
     title?: string;
     dismissible?: boolean;
+    /**
+     * Milliseconds before the alert closes itself, or `true` for the default.
+     *
+     * A confirmation clears itself. A warning and a failure stay until
+     * dismissed, so this is off by default and a danger alert never takes it.
+     * Pass it wherever the alert reports the outcome of a submit; leave it off
+     * where a success tone states a standing condition, which does not stop
+     * being true after five seconds.
+     */
+    autoDismiss?: number | boolean;
     ondismiss?: () => void;
     class?: string;
     children?: Snippet;
@@ -21,6 +42,7 @@
     tone = 'brand',
     title = undefined,
     dismissible = false,
+    autoDismiss = false,
     ondismiss = undefined,
     class: klass = '',
     children,
@@ -35,54 +57,100 @@
   };
 
   const t = $derived(statusTone(tone));
+
+  /**
+   * A failure and a warning interrupt, because the reader has to act. Anything
+   * else waits for a pause. FormMessage already splits them this way; Alert
+   * announced every tone assertively, so a green confirmation cut across
+   * whatever was being read. An alert that also clears itself must not be
+   * assertive: it would interrupt to say something and then take it away.
+   */
+  const live = $derived(t === 'danger' || t === 'warn');
+
+  const delay = $derived(autoDismiss === true ? DISMISS_AFTER : Number(autoDismiss) || 0);
+
+  /** An alert that can close itself can also be closed by hand. */
+  const closable = $derived(dismissible || delay > 0);
+
+  let closed = $state(false);
+  /** The pointer is over the alert, or focus is inside it. */
+  let held = $state(false);
+
+  function close(): void {
+    closed = true;
+    ondismiss?.();
+  }
+
+  /**
+   * The alert owns whether it is on screen, rather than asking the page to
+   * un-render it. An outcome alert lives inside `{#if form}` in the page that
+   * submitted, and nothing clears a form result short of a navigation, so a
+   * callback has nothing to act on.
+   */
+  $effect(() => {
+    if (closed || held || delay <= 0) return;
+    const timer = setTimeout(close, delay);
+    return () => clearTimeout(timer);
+  });
 </script>
 
-<div
-  class="flex items-start gap-3 rounded-lg border px-4 py-3 {tones[t].wrap} {klass}"
-  role="alert"
->
-  <span
-    class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-current {tones[
-      t
-    ].icon}"
-    aria-hidden="true"
+{#if !closed}
+  <!-- The timer stops while the pointer is over the alert or focus is inside
+       it, and starts again when they leave. Text is never pulled away from
+       somebody reading it. -->
+  <div
+    transition:motion.toast|global
+    class="flex items-start gap-3 rounded-lg border px-4 py-3 {tones[t].wrap} {klass}"
+    role={live ? 'alert' : 'status'}
+    aria-live={live ? 'assertive' : 'polite'}
+    onmouseenter={closable ? () => (held = true) : undefined}
+    onmouseleave={closable ? () => (held = false) : undefined}
+    onfocusin={closable ? () => (held = true) : undefined}
+    onfocusout={closable ? () => (held = false) : undefined}
   >
-    <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[t]} />
-    </svg>
-  </span>
-  <div class="flex-1 min-w-0">
-    {#if title}<p class="text-sm font-semibold text-fg">{title}</p>{/if}
-    {#if children}<div class="text-sm text-muted {title ? 'mt-0.5' : ''}">
-        {@render children()}
-      </div>{/if}
-  </div>
-  {#if dismissible}
-    <button
-      type="button"
-      onclick={ondismiss}
-      class="{HIT_AREA} shrink-0 text-faint transition-colors hover:text-fg"
-      aria-label="Dismiss"
+    <span
+      class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-current {tones[
+        t
+      ].icon}"
+      aria-hidden="true"
     >
       <svg
-        width="16"
-        height="16"
+        width="11"
+        height="11"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
-        stroke-width="2"
+        stroke-width="2.5"
         stroke-linecap="round"
-        aria-hidden="true"><path d="M18 6L6 18M6 6l12 12" /></svg
+        stroke-linejoin="round"
+      >
+        <path d={TONE_GLYPH[t]} />
+      </svg>
+    </span>
+    <div class="flex-1 min-w-0">
+      {#if title}<p class="text-sm font-semibold text-fg">{title}</p>{/if}
+      {#if children}<div class="text-sm text-muted {title ? 'mt-0.5' : ''}">
+          {@render children()}
+        </div>{/if}
+    </div>
+    {#if closable}
+      <button
+        type="button"
+        onclick={close}
+        class="{HIT_AREA} shrink-0 rounded text-faint transition-colors hover:text-fg outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+        aria-label="Dismiss"
       >
-    </button>
-  {/if}
-</div>
+        <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>
+    {/if}
+  </div>
+{/if}

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

@@ -4,6 +4,16 @@ interface Props {
     tone?: StatusToneInput;
     title?: string;
     dismissible?: boolean;
+    /**
+     * Milliseconds before the alert closes itself, or `true` for the default.
+     *
+     * A confirmation clears itself. A warning and a failure stay until
+     * dismissed, so this is off by default and a danger alert never takes it.
+     * Pass it wherever the alert reports the outcome of a submit; leave it off
+     * where a success tone states a standing condition, which does not stop
+     * being true after five seconds.
+     */
+    autoDismiss?: number | boolean;
     ondismiss?: () => void;
     class?: string;
     children?: Snippet;

package/dist/components/AppShell.svelte

@@ -256,7 +256,11 @@
       onfocusin={() => (railOpen = true)}
       onfocusout={onRailFocusOut}
     >
-      <div class="absolute inset-y-0 start-0 z-dropdown flex {railOpen ? 'shadow-2xl' : ''}">
+      <div
+        class="absolute inset-y-0 start-0 z-dropdown flex transition-shadow {railOpen
+          ? 'shadow-2xl'
+          : ''}"
+      >
         {@render sidebar(isMobile, railIcons)}
       </div>
     </div>

package/dist/components/Badge.svelte

@@ -42,12 +42,19 @@
      Under a Table's default `overflow-wrap: anywhere` a status rendered as
      `dra ft` and a role as `sup er_a dmi n`. The label sits in a truncating
      span so a badge whose caller caps its width ends in an ellipsis instead of
-     painting past its own border; with no cap the span never shrinks. -->
+     painting past its own border; with no cap the span never shrinks.
+
+     The svg rules are what let a caller put an icon in the label. Preflight
+     makes every svg a block, and a block inside the label takes a line of its
+     own, so an icon and its text stacked and the badge rendered two rows tall
+     inside a pill. A flex row here would fix the stacking and lose the
+     ellipsis, which is the thing the span exists for, so the icon goes back to
+     being inline and sits on the text's optical centre. -->
 <span
   class="inline-flex max-w-full items-center font-medium whitespace-nowrap rounded-full border {tones[
     tone
   ]} {sizes[size]} {klass}"
 >
   {#if dot}<span class="w-1.5 h-1.5 shrink-0 rounded-full {dotColor[tone]}"></span>{/if}
-  <span class="min-w-0 truncate">{@render children()}</span>
+  <span class="min-w-0 truncate [&>svg]:inline [&>svg]:align-middle">{@render children()}</span>
 </span>

package/dist/components/Banner.svelte

@@ -3,9 +3,25 @@
   import { HIT_AREA } from '../internal/touch.js';
   import type { Snippet } from 'svelte';
 
+  /**
+   * How long a confirmation holds before it clears itself. The same five
+   * seconds Alert waits, because a reader crossing between the two surfaces
+   * should not have to learn two timings.
+   */
+  const DISMISS_AFTER = 5000;
+
   interface Props {
     tone?: StatusToneInput;
     dismissible?: boolean;
+    /**
+     * Milliseconds before the banner closes itself, or `true` for the default.
+     *
+     * A confirmation clears itself. A warning and a failure stay until
+     * dismissed, so this is off by default. Pass it wherever the banner
+     * reports the outcome of a submit; leave it off where it states a standing
+     * condition, which does not stop being true after five seconds.
+     */
+    autoDismiss?: number | boolean;
     ondismiss?: () => void;
     class?: string;
     children: Snippet;
@@ -15,6 +31,7 @@
   let {
     tone = 'brand',
     dismissible = false,
+    autoDismiss = false,
     ondismiss = undefined,
     class: cls = '',
     children,
@@ -22,12 +39,25 @@
   }: Props = $props();
 
   let visible = $state(true);
+  /** The pointer is over the banner, or focus is inside it. */
+  let held = $state(false);
 
   function dismiss() {
     visible = false;
     ondismiss?.();
   }
 
+  const delay = $derived(autoDismiss === true ? DISMISS_AFTER : Number(autoDismiss) || 0);
+
+  /** A banner that can close itself can also be closed by hand. */
+  const closable = $derived(dismissible || delay > 0);
+
+  $effect(() => {
+    if (!visible || held || delay <= 0) return;
+    const timer = setTimeout(dismiss, delay);
+    return () => clearTimeout(timer);
+  });
+
   const tones: Record<StatusTone, string> = {
     neutral: 'bg-surface-2 border-line',
     brand: 'bg-brand/10 border-brand/20',
@@ -40,9 +70,16 @@
 </script>
 
 {#if visible}
+  <!-- The timer stops while the pointer is over the banner or focus is inside
+       it, and starts again when they leave. Text is never pulled away from
+       somebody reading it. -->
   <div
     role="status"
     class="relative flex items-center gap-3 border-b px-4 py-3 text-sm {tones[t]} {cls}"
+    onmouseenter={closable ? () => (held = true) : undefined}
+    onmouseleave={closable ? () => (held = false) : undefined}
+    onfocusin={closable ? () => (held = true) : undefined}
+    onfocusout={closable ? () => (held = false) : undefined}
   >
     <div class="flex flex-1 items-center justify-center gap-3 text-fg">
       {@render children()}
@@ -52,7 +89,7 @@
       <div class="shrink-0">{@render action()}</div>
     {/if}
 
-    {#if dismissible}
+    {#if closable}
       <button
         type="button"
         onclick={dismiss}

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

@@ -3,6 +3,15 @@ import type { Snippet } from 'svelte';
 interface Props {
     tone?: StatusToneInput;
     dismissible?: boolean;
+    /**
+     * Milliseconds before the banner closes itself, or `true` for the default.
+     *
+     * A confirmation clears itself. A warning and a failure stay until
+     * dismissed, so this is off by default. Pass it wherever the banner
+     * reports the outcome of a submit; leave it off where it states a standing
+     * condition, which does not stop being true after five seconds.
+     */
+    autoDismiss?: number | boolean;
     ondismiss?: () => void;
     class?: string;
     children: Snippet;

package/dist/components/Toggle.svelte

@@ -67,7 +67,11 @@
   }
 </script>
 
+<!-- The marker is on the label because the label is the whole control: the
+     switch and its text are one field, and an overlay sizing itself to a form
+     counts what it can see. -->
 <label
+  data-field
   class="inline-flex items-start gap-2.5 cursor-pointer select-none {disabled
     ? 'opacity-50 cursor-not-allowed'
     : ''} {cls}"

package/dist/index.d.ts

@@ -93,4 +93,4 @@ export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
 export * as motion from './motion.js';
 export type { Rung as MotionRung, Curve as MotionCurve } from './motion.js';
-export declare const VERSION = "0.26.0";
+export declare const VERSION = "0.28.0";

package/dist/index.js

@@ -103,4 +103,4 @@ export * as motion from './motion.js';
 // ── Version ────────────────────────────────────────────────────────────────
 // 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.26.0';
+export const VERSION = '0.28.0';

package/dist/internal/layout.d.ts

@@ -173,13 +173,19 @@ export declare function sectionHeading(level: 2 | 3, variant?: SectionVariant):
  * `border-e` and not `border-r`: the shell is the one place a right-to-left
  * locale flips, and a physical border leaves the rule on the wrong edge.
  */
-export declare const APP_SIDEBAR = "h-full shrink-0 flex-col border-e border-line bg-surface";
+export declare const APP_SIDEBAR = "h-full shrink-0 flex-col border-e border-line bg-surface transition-[width] duration-base ease-move";
 /**
  * The sidebar's two widths. Expanded is the 224px column every authed screen
  * had. The rail is the 56px icon column the theme had named and nothing used:
  * at 768px the expanded column left 496px for the page, and a flow editor with
  * two docked panes had no canvas at all. The shell picks between them; the
  * width is not part of APP_SIDEBAR so the aside cannot carry both.
+ *
+ * The travel between them is on APP_SIDEBAR, which is the one class both
+ * widths share. It is a disclosure opening sideways, which is the same thing
+ * an accordion does downwards, so it takes the accordion's rung and curve:
+ * base and move. It was the most frequent state change in the product and the
+ * only one that happened in a single frame.
  */
 export declare const APP_SIDEBAR_WIDE = "w-sidebar";
 export declare const APP_SIDEBAR_RAIL = "w-nav-rail";

package/dist/internal/layout.js

@@ -207,13 +207,19 @@ export function sectionHeading(level, variant = 'default') {
  * `border-e` and not `border-r`: the shell is the one place a right-to-left
  * locale flips, and a physical border leaves the rule on the wrong edge.
  */
-export const APP_SIDEBAR = 'h-full shrink-0 flex-col border-e border-line bg-surface';
+export const APP_SIDEBAR = 'h-full shrink-0 flex-col border-e border-line bg-surface transition-[width] duration-base ease-move';
 /**
  * The sidebar's two widths. Expanded is the 224px column every authed screen
  * had. The rail is the 56px icon column the theme had named and nothing used:
  * at 768px the expanded column left 496px for the page, and a flow editor with
  * two docked panes had no canvas at all. The shell picks between them; the
  * width is not part of APP_SIDEBAR so the aside cannot carry both.
+ *
+ * The travel between them is on APP_SIDEBAR, which is the one class both
+ * widths share. It is a disclosure opening sideways, which is the same thing
+ * an accordion does downwards, so it takes the accordion's rung and curve:
+ * base and move. It was the most frequent state change in the product and the
+ * only one that happened in a single frame.
  */
 export const APP_SIDEBAR_WIDE = 'w-sidebar';
 export const APP_SIDEBAR_RAIL = 'w-nav-rail';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",