@lyeve-labs/ui-kit 0.27.0 → 0.29.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/components/Logo.svelte

@@ -11,9 +11,11 @@
    * drew a near-black column on a dark surface. There is no media query here
    * for that reason, and none belongs here.
    *
-   * The neutral faces come from currentColor and the lit faces from the brand
-   * ramp, so every face answers the same tokens as the rest of the page and a
-   * palette change reaches the mark with everything else.
+   * Every face and the wordmark paint from the mark-* tokens, which carry the
+   * brand book's colours per theme: the same lockup the documentation site
+   * ships as a static file. They are separate from the brand ramp because that
+   * ramp darkens for text contrast in the light theme and inverts the mark's
+   * lighting there.
    */
 
   type Size = 'sm' | 'md' | 'lg';
@@ -47,10 +49,7 @@
   const px = $derived(marks[size]);
 </script>
 
-<!-- text-fg is stated here rather than inherited. The mark is usually wrapped
-     in a link that carries no colour of its own, so currentColor would
-     otherwise be whatever that ancestor happened to hold. -->
-<span class="inline-flex items-center gap-2 text-fg {klass}">
+<span class="inline-flex items-center gap-2 {klass}">
   <span class="inline-flex shrink-0 items-center justify-center">
     <svg
       width={px}
@@ -60,18 +59,24 @@
       aria-hidden="true"
     >
       <g transform="translate(6 4)">
-        <polygon class="fill-current" points="0,14 14,7 14,40 0,47" />
-        <polygon class="fill-current opacity-50" points="0,47 14,40 14,54 0,61" />
-        <polygon class="fill-current opacity-75" points="14,40 28,33 28,47 14,54" />
-        <polygon class="fill-brand-light" points="14,54 28,47 56,33 42,40" />
-        <polygon class="fill-brand-deep" points="42,40 56,33 56,47 42,54" />
-        <polygon class="fill-brand" points="14,54 28,61 42,54 28,47" />
-        <polygon class="fill-brand" points="28,47 42,54 56,47 42,40" />
+        <polygon class="fill-mark-ink" points="0,14 14,7 14,40 0,47" />
+        <polygon class="fill-mark-foot" points="0,47 14,40 14,54 0,61" />
+        <polygon class="fill-mark-step" points="14,40 28,33 28,47 14,54" />
+        <polygon class="fill-mark-top" points="14,54 28,47 56,33 42,40" />
+        <polygon class="fill-mark-side" points="42,40 56,33 56,47 42,54" />
+        <polygon class="fill-mark-face" points="14,54 28,61 42,54 28,47" />
+        <polygon class="fill-mark-face" points="28,47 42,54 56,47 42,40" />
       </g>
     </svg>
   </span>
 
   {#if wordmark}
-    <span class="font-semibold tracking-tight {words[size]}">LyEve</span>
+    <!-- The accent splits the word across two elements, which some screen
+         readers announce letter group by letter group, so the painted word is
+         hidden and the name is given once as plain text. -->
+    <span class="font-bold tracking-tight text-mark-ink {words[size]}">
+      <span aria-hidden="true">Ly<span class="text-mark-accent">E</span>ve</span>
+      <span class="sr-only">LyEve</span>
+    </span>
   {/if}
 </span>

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

@@ -10,9 +10,11 @@
  * drew a near-black column on a dark surface. There is no media query here
  * for that reason, and none belongs here.
  *
- * The neutral faces come from currentColor and the lit faces from the brand
- * ramp, so every face answers the same tokens as the rest of the page and a
- * palette change reaches the mark with everything else.
+ * Every face and the wordmark paint from the mark-* tokens, which carry the
+ * brand book's colours per theme: the same lockup the documentation site
+ * ships as a static file. They are separate from the brand ramp because that
+ * ramp darkens for text contrast in the light theme and inverts the mark's
+ * lighting there.
  */
 type Size = 'sm' | 'md' | 'lg';
 interface Props {

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.29.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.29.0';

package/dist/styles/theme.css

@@ -57,6 +57,19 @@
    * paints it on and the badge as well. */
   --color-violet: #9587f2;
 
+  /* The product mark's faces, at the brand book's values. They are their own
+   * tokens because the brand ramp above is tuned for text contrast: in the
+   * light theme it darkens to #005a77 and brand-light sits below brand, so a
+   * mark painted from it inverts its lighting. A logotype is exempt from the
+   * contrast floor, so these keep the published colours instead. */
+  --color-mark-ink: #ffffff;
+  --color-mark-foot: #9aa1ad;
+  --color-mark-step: #c5cad3;
+  --color-mark-top: #00d4ff;
+  --color-mark-side: #0099c4;
+  --color-mark-face: #00b4dd;
+  --color-mark-accent: #00d4ff;
+
   /* #15803d and #b45309 sit at ~3.7:1 on ink, below the 4.5:1 AA floor
    * for the text-size status labels that use them. */
   --color-success: #22c55e;
@@ -396,12 +409,33 @@ html[data-theme='light'] {
   --color-brand-light: #004f69;
   --color-brand-deep: #00455c;
   --color-violet: #5544da;
+  --color-mark-ink: #0a0e14;
+  --color-mark-foot: #9aa1ad;
+  --color-mark-step: #c5cad3;
+  --color-mark-top: #0099c4;
+  --color-mark-side: #006a8a;
+  --color-mark-face: #007ea6;
+  --color-mark-accent: #00d4ff;
 
   --color-success: #126c34;
   --color-warn: #904207;
   --color-danger: #ab1a1a;
 }
 
+/*
+ * A forced-colors scheme repaints the page but not a fill named in hex, so the
+ * mark's white column vanished on a white high-contrast canvas. Its neutral
+ * faces take the system colours there; the cyan faces keep their shape.
+ */
+@media (forced-colors: active) {
+  :root,
+  html[data-theme='light'] {
+    --color-mark-ink: CanvasText;
+    --color-mark-foot: GrayText;
+    --color-mark-step: GrayText;
+  }
+}
+
 /*
  * The four durations as utilities. A --duration-* token generates nothing
  * (see the motion section of the @theme block), so each is declared here the
@@ -552,6 +586,13 @@ html[data-theme='light'] {
     --color-brand-light: #000000;
     --color-brand-deep: #000000;
     --color-violet: #000000;
+    /* The mark keeps its light-theme faces: in black every face is one
+     * shape and the L is gone. Printing from the dark theme would otherwise
+     * put a white column on white paper. */
+    --color-mark-ink: #0a0e14;
+    --color-mark-top: #0099c4;
+    --color-mark-side: #006a8a;
+    --color-mark-face: #007ea6;
     --color-success: #000000;
     --color-warn: #000000;
     --color-danger: #000000;

package/package.json

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

package/src/lib/styles/theme.css

@@ -57,6 +57,19 @@
    * paints it on and the badge as well. */
   --color-violet: #9587f2;
 
+  /* The product mark's faces, at the brand book's values. They are their own
+   * tokens because the brand ramp above is tuned for text contrast: in the
+   * light theme it darkens to #005a77 and brand-light sits below brand, so a
+   * mark painted from it inverts its lighting. A logotype is exempt from the
+   * contrast floor, so these keep the published colours instead. */
+  --color-mark-ink: #ffffff;
+  --color-mark-foot: #9aa1ad;
+  --color-mark-step: #c5cad3;
+  --color-mark-top: #00d4ff;
+  --color-mark-side: #0099c4;
+  --color-mark-face: #00b4dd;
+  --color-mark-accent: #00d4ff;
+
   /* #15803d and #b45309 sit at ~3.7:1 on ink, below the 4.5:1 AA floor
    * for the text-size status labels that use them. */
   --color-success: #22c55e;
@@ -396,12 +409,33 @@ html[data-theme='light'] {
   --color-brand-light: #004f69;
   --color-brand-deep: #00455c;
   --color-violet: #5544da;
+  --color-mark-ink: #0a0e14;
+  --color-mark-foot: #9aa1ad;
+  --color-mark-step: #c5cad3;
+  --color-mark-top: #0099c4;
+  --color-mark-side: #006a8a;
+  --color-mark-face: #007ea6;
+  --color-mark-accent: #00d4ff;
 
   --color-success: #126c34;
   --color-warn: #904207;
   --color-danger: #ab1a1a;
 }
 
+/*
+ * A forced-colors scheme repaints the page but not a fill named in hex, so the
+ * mark's white column vanished on a white high-contrast canvas. Its neutral
+ * faces take the system colours there; the cyan faces keep their shape.
+ */
+@media (forced-colors: active) {
+  :root,
+  html[data-theme='light'] {
+    --color-mark-ink: CanvasText;
+    --color-mark-foot: GrayText;
+    --color-mark-step: GrayText;
+  }
+}
+
 /*
  * The four durations as utilities. A --duration-* token generates nothing
  * (see the motion section of the @theme block), so each is declared here the
@@ -552,6 +586,13 @@ html[data-theme='light'] {
     --color-brand-light: #000000;
     --color-brand-deep: #000000;
     --color-violet: #000000;
+    /* The mark keeps its light-theme faces: in black every face is one
+     * shape and the L is gone. Printing from the dark theme would otherwise
+     * put a white column on white paper. */
+    --color-mark-ink: #0a0e14;
+    --color-mark-top: #0099c4;
+    --color-mark-side: #006a8a;
+    --color-mark-face: #007ea6;
     --color-success: #000000;
     --color-warn: #000000;
     --color-danger: #000000;