@lyeve-labs/ui-kit 0.27.0 → 0.28.0

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/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.27.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.27.0';
+export const VERSION = '0.28.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.27.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>",