@lyeve-labs/ui-kit 0.43.0 → 0.44.0

package/dist/components/Alert.svelte

@@ -33,6 +33,14 @@
      * being true after five seconds.
      */
     autoDismiss?: number | boolean;
+    /**
+     * Announces the message when it appears, and every change to it after,
+     * without clearing it. For a result that stays on screen, such as a
+     * confirmation that replaces a form or a status that a poll updates.
+     * A message without this or `autoDismiss` states a standing condition
+     * and is read out by nobody, so a page load says nothing.
+     */
+    announce?: boolean;
     ondismiss?: () => void;
     class?: string;
     children?: Snippet;
@@ -43,6 +51,7 @@
     title = undefined,
     dismissible = false,
     autoDismiss = false,
+    announce = false,
     ondismiss = undefined,
     class: klass = '',
     children,
@@ -64,6 +73,8 @@
    * 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.
+   * The polite branch takes no role: browsers expose role="status" as a status
+   * bar, and Orca speaks nothing inserted into one.
    */
   const delay = $derived(autoDismiss === true ? DISMISS_AFTER : Number(autoDismiss) || 0);
 
@@ -72,6 +83,28 @@
   /** An alert that can close itself can also be closed by hand. */
   const closable = $derived(dismissible || delay > 0);
 
+  /**
+   * A live region reports a change to what it holds, and an outcome alert
+   * arrives inside `{#if form}` already holding its text, so nothing would be
+   * read out. An alert that reports an outcome, one that clears itself or
+   * takes `announce`, mounts without its text and takes it two frames later,
+   * as FormMessage does. It is atomic, as role="status" made it, so a change
+   * reads the whole message. One that states a standing condition is no live
+   * region at all: it must not be read out because the page loaded, and
+   * Chrome reads a polite region that a client-side navigation inserts. A
+   * failure or a warning that stays is the alert branch and is never deferred.
+   */
+  const outcome = $derived(!live && (delay > 0 || announce));
+  let filled = $state(typeof window === 'undefined');
+
+  $effect(() => {
+    if (!outcome) return;
+    let frame = requestAnimationFrame(() => {
+      frame = requestAnimationFrame(() => (filled = true));
+    });
+    return () => cancelAnimationFrame(frame);
+  });
+
   let closed = $state(false);
   /** The pointer is over the alert, or focus is inside it. */
   let held = $state(false);
@@ -101,8 +134,9 @@
   <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'}
+    role={live ? 'alert' : undefined}
+    aria-live={live ? 'assertive' : outcome ? 'polite' : undefined}
+    aria-atomic={outcome ? 'true' : undefined}
     onmouseenter={closable ? () => (held = true) : undefined}
     onmouseleave={closable ? () => (held = false) : undefined}
     onfocusin={closable ? () => (held = true) : undefined}
@@ -127,12 +161,14 @@
         <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 filled || !outcome}
+      <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}
     {#if closable}
       <button
         type="button"

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

@@ -14,6 +14,14 @@ interface Props {
      * being true after five seconds.
      */
     autoDismiss?: number | boolean;
+    /**
+     * Announces the message when it appears, and every change to it after,
+     * without clearing it. For a result that stays on screen, such as a
+     * confirmation that replaces a form or a status that a poll updates.
+     * A message without this or `autoDismiss` states a standing condition
+     * and is read out by nobody, so a page load says nothing.
+     */
+    announce?: boolean;
     ondismiss?: () => void;
     class?: string;
     children?: Snippet;

package/dist/components/Banner.svelte

@@ -23,6 +23,14 @@
      * condition, which does not stop being true after five seconds.
      */
     autoDismiss?: number | boolean;
+    /**
+     * Announces the message when it appears, and every change to it after,
+     * without clearing it. For a result that stays on screen, such as a
+     * confirmation that replaces a form or a status that a poll updates.
+     * A message without this or `autoDismiss` states a standing condition
+     * and is read out by nobody, so a page load says nothing.
+     */
+    announce?: boolean;
     ondismiss?: () => void;
     class?: string;
     children: Snippet;
@@ -33,6 +41,7 @@
     tone = 'brand',
     dismissible = false,
     autoDismiss = false,
+    announce = false,
     ondismiss = undefined,
     class: cls = '',
     children,
@@ -73,9 +82,32 @@
    * A failure and a warning interrupt, because the reader has to act, as
    * Alert does. Anything else waits for a pause. A banner that clears itself
    * waits too: interrupting to say something and then taking it away leaves
-   * the reader with nothing to act on.
+   * the reader with nothing to act on. The polite branch takes no role, as
+   * Alert's does, because Orca speaks nothing inserted into a status role.
    */
   const live = $derived((t === 'danger' || t === 'warn') && delay <= 0);
+
+  /**
+   * A live region reports a change to what it holds, and an outcome banner
+   * arrives inside `{#if form}` already holding its text, so nothing would be
+   * read out. A banner that reports an outcome, one that clears itself or
+   * takes `announce`, mounts without its text and takes it two frames later,
+   * as FormMessage does. It is atomic, as role="status" made it, so a change
+   * reads the whole message. One that states a standing condition is no live
+   * region at all: it must not be read out because the page loaded, and
+   * Chrome reads a polite region that a client-side navigation inserts. A
+   * failure or a warning that stays is the alert branch and is never deferred.
+   */
+  const outcome = $derived(!live && (delay > 0 || announce));
+  let filled = $state(typeof window === 'undefined');
+
+  $effect(() => {
+    if (!outcome) return;
+    let frame = requestAnimationFrame(() => {
+      frame = requestAnimationFrame(() => (filled = true));
+    });
+    return () => cancelAnimationFrame(frame);
+  });
 </script>
 
 {#if visible}
@@ -85,17 +117,20 @@
        rather than vanishing in one frame. -->
   <div
     transition:motion.toast|global
-    role={live ? 'alert' : 'status'}
-    aria-live={live ? 'assertive' : 'polite'}
+    role={live ? 'alert' : undefined}
+    aria-live={live ? 'assertive' : outcome ? 'polite' : undefined}
+    aria-atomic={outcome ? 'true' : undefined}
     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()}
-    </div>
+    {#if filled || !outcome}
+      <div class="flex flex-1 items-center justify-center gap-3 text-fg">
+        {@render children()}
+      </div>
+    {/if}
 
     {#if action}
       <div class="shrink-0">{@render action()}</div>

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

@@ -12,6 +12,14 @@ interface Props {
      * condition, which does not stop being true after five seconds.
      */
     autoDismiss?: number | boolean;
+    /**
+     * Announces the message when it appears, and every change to it after,
+     * without clearing it. For a result that stays on screen, such as a
+     * confirmation that replaces a form or a status that a poll updates.
+     * A message without this or `autoDismiss` states a standing condition
+     * and is read out by nobody, so a page load says nothing.
+     */
+    announce?: boolean;
     ondismiss?: () => void;
     class?: string;
     children: Snippet;

package/dist/components/CopyButton.svelte

@@ -73,7 +73,13 @@
   The live region is mounted for the life of the button and empty at rest.
   Rendering it only after a copy announces nothing: assistive technology watches
   an existing region for a change, and a region that arrives already holding its
-  text is not a change. Toaster carries the same rule for the same reason.
+  text is not a change. Toaster carries the same rule for the same reason. It
+  stays a span, so a CopyButton inside a paragraph keeps that paragraph whole.
+  It is never role="status", which browsers expose as a status bar and Orca
+  never speaks. It is role="generic": Firefox exposes a bare span as static
+  text, created only once it holds the message, and Orca drops a sentence
+  that comes within a tenth of a second of that arrival unless its region is
+  a section, which generic is.
 
   The gap exists only while there is a message, so an idle button is the width
   of its icon and a row of them lines up.
@@ -86,7 +92,7 @@
   {/if}
 
   <span
-    role="status"
+    role="generic"
     aria-live="polite"
     aria-atomic="true"
     class="text-xs {copier.status === 'failed' ? 'text-danger' : 'text-success'}">{message}</span

package/dist/components/CopyField.svelte

@@ -180,16 +180,16 @@
 
   <!-- Mounted empty for the life of the field, so a copy is a change a screen
        reader announces rather than a region that arrives already full. The
-       check is the sighted confirmation. Only a failure is shown in words. -->
-  <p
-    role="status"
+       check is the sighted confirmation. Only a failure is shown in words. A
+       div with no role, as Toaster's is, so Orca speaks it. -->
+  <div
     aria-live="polite"
     aria-atomic="true"
     id={failed ? `${fieldId}-error` : undefined}
     class={failed ? FIELD_ERROR : 'sr-only'}
   >
     {copier.status === 'copied' ? copiedLabel : failed ? COPY_FAILED_MESSAGE : ''}
-  </p>
+  </div>
   {#if hint && !failed}
     <p id="{fieldId}-hint" class={FIELD_HINT}>{hint}</p>
   {/if}

package/dist/components/FormMessage.svelte

@@ -34,8 +34,10 @@
    *
    * A submit outcome has no such permanent host, because the page mounts this
    * component at the moment the submit resolves. So the region goes in empty
-   * and the message is placed inside it on the next frame, which is the same
-   * shape of change a toast makes.
+   * and the message is placed inside it two frames later, which is the same
+   * shape of change a toast makes. One frame is not enough: Firefox builds its
+   * accessibility tree after the frame's callbacks run, so a region filled on
+   * the first frame reaches it already full and Orca hears nothing.
    *
    * The server runs no effect and has no frames, so it renders the message
    * straight away: a page delivered without its client bundle still carries
@@ -44,7 +46,9 @@
   let filled = $state(typeof window === 'undefined');
 
   $effect(() => {
-    const frame = requestAnimationFrame(() => (filled = true));
+    let frame = requestAnimationFrame(() => {
+      frame = requestAnimationFrame(() => (filled = true));
+    });
     return () => cancelAnimationFrame(frame);
   });
 </script>
@@ -54,12 +58,14 @@
   interrupts whatever the reader is doing, because the submit did not go
   through and the user has to act on it. A confirmation takes aria-live
   "polite" and waits for a pause, because the work is done and nothing is being
-  asked of anyone.
+  asked of anyone. It takes no role: browsers expose role="status" as a status
+  bar, and Orca speaks nothing inserted into one.
 -->
 <div
   class="flex items-start gap-2 text-sm {tones[tone]} {klass}"
-  role={tone === 'danger' ? 'alert' : 'status'}
+  role={tone === 'danger' ? 'alert' : undefined}
   aria-live={tone === 'danger' ? 'assertive' : 'polite'}
+  aria-atomic={tone === 'danger' ? undefined : 'true'}
 >
   {#if filled}
     <!-- Stroked SVG, not a literal cross or tick: a font glyph lands at

package/dist/components/Logo.svelte

@@ -58,7 +58,7 @@
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true"
     >
-      <g transform="translate(6 4)">
+      <g transform="translate(6 3)">
         <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" />

package/dist/components/SortableList.svelte

@@ -140,9 +140,9 @@
   }
 
   /** Lands a move, or says why it cannot. True when the order changed. */
-  function land(from: number, to: number): boolean {
+  function land(from: number, to: number, announce = say): boolean {
     const result = attempt(items, from, to, canMove);
-    say(result.text);
+    announce(result.text);
     if (!result.moved) return false;
     const item = items[from];
     items = result.items;
@@ -157,9 +157,15 @@
    */
   async function move(from: number, to: number) {
     const focused = document.activeElement;
-    if (!land(from, to)) return;
+    let text = '';
+    if (!land(from, to, (t) => (text = t))) return say(text);
     await tick();
     if (focused instanceof HTMLElement && document.activeElement !== focused) focused.focus();
+    // Firefox reports the restored focus as a new one, and Orca drops a polite
+    // sentence still waiting when focus arrives. The browser builds its
+    // accessibility tree after a frame's callbacks run, so the second frame is
+    // the first that reaches it after the focus.
+    requestAnimationFrame(() => requestAnimationFrame(() => say(text)));
   }
 
   function typing(target: EventTarget | null): boolean {
@@ -505,7 +511,10 @@
   <p id="{uid}-keys" class="sr-only">
     Press Alt with the up or down arrow to move a row, or Enter for a menu.
   </p>
-  <p role="status" class="sr-only">
+  <!-- A div with no role, because Orca speaks nothing inserted into a status
+       role, and in Firefox drops a paragraph's text that follows the list's
+       own events too closely. -->
+  <div aria-live="polite" class="sr-only">
     {#key spoken.n}<span>{spoken.text}</span>{/key}
-  </p>
+  </div>
 </div>

package/dist/components/Tabs.svelte

@@ -57,8 +57,10 @@
   /*
    * The tab for the active id is brought into view when the id changes, so a
    * page that opens on its fifth tab does not open on a strip that hides it.
-   * `nearest` on both axes moves the strip and nothing else. A test DOM has
-   * no layout and no scrollIntoView, and neither is an error here.
+   * Only the strip's own offset moves. scrollIntoView moves every scroll box
+   * above the tab, the page among them, so a strip below the fold pulled the
+   * page down to it as soon as it mounted. A test DOM lays nothing out, so
+   * every box is empty and nothing moves.
    */
   $effect(() => {
     const el = scroller;
@@ -67,9 +69,11 @@
     const tab = [...el.querySelectorAll<HTMLElement>('[role="tab"]')].find(
       (t) => t.dataset.tab === id,
     );
-    if (tab && typeof tab.scrollIntoView === 'function') {
-      tab.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-    }
+    if (!tab) return;
+    const box = el.getBoundingClientRect();
+    const at = tab.getBoundingClientRect();
+    if (at.left < box.left) el.scrollLeft -= box.left - at.left;
+    else if (at.right > box.right) el.scrollLeft += at.right - box.right;
   });
 
   /*

package/dist/components/Toaster.svelte

@@ -17,11 +17,11 @@
      app and empty most of the time. Marking each toast `role="status"` instead
      announced nothing: assistive technology watches an existing region for
      changes, and a region that arrives already holding its text is not a
-     change. -->
+     change. It carries `aria-live` and no `role="status"`: browsers expose a
+     status role as a status bar, and Orca speaks nothing inserted into one. -->
 <div
   data-print="hide"
   class="pointer-events-none fixed bottom-4 end-4 z-toast flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2"
-  role="status"
   aria-live="polite"
   aria-atomic="false"
 >

package/dist/index.d.ts

@@ -113,4 +113,4 @@ export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, watchThemePreference, 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.43.0";
+export declare const VERSION = "0.44.0";

package/dist/index.js

@@ -122,4 +122,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.43.0';
+export const VERSION = '0.44.0';

package/package.json

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