@lyeve-labs/ui-kit 0.43.0 → 0.45.0

package/dist/components/AccountMenu.svelte

@@ -94,7 +94,10 @@
 </script>
 
 <details bind:this={root} class="group relative {klass}">
+  <!-- The name beside the avatar is hidden below sm, and the avatar is paint,
+       so the trigger carries its name itself. -->
   <summary
+    aria-label="{name}, account menu"
     class="{TOUCH_GROW} flex cursor-pointer list-none items-center gap-2 rounded-lg px-2 py-1.5 outline-none transition-colors hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
   >
     <span

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/AppShell.svelte

@@ -9,6 +9,15 @@
   export interface SidebarState {
     rail: boolean;
   }
+
+  /**
+   * How long a pointer has to rest over the rail before it opens. This waits
+   * for the reader, not for an animation. A pointer crossing the 56px rail on
+   * its way to the page is still moving and never rests there, so the column
+   * does not open over the control it is heading for. One that stops on the
+   * rail means to read it.
+   */
+  export const RAIL_REST_MS = 100;
 </script>
 
 <script lang="ts">
@@ -161,15 +170,31 @@
    * The rail: the icon column, and the labels on demand.
    *
    * While the sidebar is the rail it is 56px wide and the nav is told so. A
-   * pointer over it, or focus inside it, opens it to the full column over the
-   * page rather than beside it, so the page keeps its width and the reader
-   * still gets every label. It closes when the pointer or the focus leaves.
+   * pointer at rest over it, or focus inside it, opens it to the full column
+   * over the page rather than beside it, so the page keeps its width and the
+   * reader still gets every label. It closes when the pointer or the focus
+   * leaves. A pointer that only passes over it leaves it the rail: the open
+   * column covers the start of the page, and opening under a pointer bound
+   * for a control there held the column open over that control.
    * State rather than a hover rule, because the nav snippet has to be told
    * the labels are wanted, and a stylesheet cannot tell it.
    */
   const railMode = $derived(!isMobile && !railHidden && (rail || isNarrow));
   let railOpen = $state(false);
   const railIcons = $derived(railMode && !railOpen);
+  let railRest: ReturnType<typeof setTimeout> | undefined;
+
+  /** Every move starts the rest again, so only a pointer that stops opens the column. */
+  function onRailPointerMove() {
+    if (railOpen) return;
+    clearTimeout(railRest);
+    railRest = setTimeout(() => (railOpen = true), RAIL_REST_MS);
+  }
+
+  function onRailPointerLeave() {
+    clearTimeout(railRest);
+    railOpen = false;
+  }
 
   $effect(() => {
     const mobile = window.matchMedia('(max-width: 767px)');
@@ -178,12 +203,14 @@
       isMobile = mobile.matches;
       isNarrow = narrow.matches && !mobile.matches;
       if (!mobile.matches) navOpen = false;
+      clearTimeout(railRest);
       railOpen = false;
     };
     sync();
     mobile.addEventListener('change', sync);
     narrow.addEventListener('change', sync);
     return () => {
+      clearTimeout(railRest);
       mobile.removeEventListener('change', sync);
       narrow.removeEventListener('change', sync);
     };
@@ -269,8 +296,9 @@
       data-testid="app-rail"
       role="presentation"
       class="relative hidden {APP_SIDEBAR_RAIL} shrink-0 md:block"
-      onpointerenter={() => (railOpen = true)}
-      onpointerleave={() => (railOpen = false)}
+      onpointerenter={onRailPointerMove}
+      onpointermove={onRailPointerMove}
+      onpointerleave={onRailPointerLeave}
       onfocusin={() => (railOpen = true)}
       onfocusout={onRailFocusOut}
     >

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

@@ -8,6 +8,14 @@
 export interface SidebarState {
     rail: boolean;
 }
+/**
+ * How long a pointer has to rest over the rail before it opens. This waits
+ * for the reader, not for an animation. A pointer crossing the 56px rail on
+ * its way to the page is still moving and never rests there, so the column
+ * does not open over the control it is heading for. One that stops on the
+ * rail means to read it.
+ */
+export declare const RAIL_REST_MS = 100;
 /**
    * The authed application frame: the sidebar, the header bar and the content
    * column, owned once so three apps cannot each invent their own.

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/Pagination.svelte

@@ -220,9 +220,9 @@
     return label ? `${label} ${range}` : range;
   });
 
-  /** The target of a control, sanitized, or nothing when the step is unavailable. */
-  function linkTo(target: number, enabled: boolean): string | undefined {
-    return href && enabled ? safeHref(href(target)) : undefined;
+  /** The target of a control, sanitized, or nothing when the builder's URL is refused. */
+  function linkTo(target: number): string | undefined {
+    return href ? safeHref(href(target)) : undefined;
   }
 
   /**
@@ -250,16 +250,6 @@
   const btnRest = 'text-muted hover:text-fg hover:bg-surface-2 active:bg-line active:text-fg';
 
   const btnCurrent = 'bg-brand text-ink';
-
-  /**
-   * A link with nowhere to go.
-   *
-   * An anchor has no `disabled`, and `disabled:` never matches one, so the two
-   * states have to be painted rather than declared. Dropping the href is what
-   * takes it out of the tab order and stops activation. The class is only the
-   * part a reader can see, at the same 30% the disabled buttons use.
-   */
-  const linkInert = 'pointer-events-none opacity-30';
 </script>
 
 {#snippet arrow(d: string)}
@@ -281,15 +271,12 @@
 
 <!-- Previous and next, as a link when the caller builds hrefs and as a button
      when it hands over a callback. The two branches carry the same classes and
-     the same label, so the pager reads and sounds the same either way. -->
+     the same label, so the pager reads and sounds the same either way. A step
+     with nowhere to go is a disabled button in both: an anchor without an href
+     is a plain element, and the accessibility tree refuses a label on one. -->
 {#snippet step(target: number, label: string, enabled: boolean, d: string)}
-  {#if href}
-    <a
-      href={linkTo(target, enabled)}
-      aria-label={label}
-      aria-disabled={enabled ? undefined : 'true'}
-      class="{btnBase} {btnRest} {enabled ? '' : linkInert}"
-    >
+  {#if href && enabled}
+    <a href={linkTo(target)} aria-label={label} class="{btnBase} {btnRest}">
       {@render arrow(d)}
     </a>
   {:else}
@@ -342,7 +329,7 @@
           </span>
         {:else if href}
           <a
-            href={linkTo(n, true)}
+            href={linkTo(n)}
             aria-current={safePage === n ? 'page' : undefined}
             class="{btnBase} {slot.only ? 'max-sm:coarse:hidden' : ''} {safePage === n
               ? btnCurrent

package/dist/components/PluginCart.svelte

@@ -60,6 +60,14 @@
      * `'once'` and the total reads "$6.00 once" rather than "$6.00/mo".
      */
     per?: BillingPeriod | 'once';
+    /**
+     * What the order charges, in cents, when the host prices more than the
+     * selection, such as a discount code. It stands in for the quote's total
+     * in the bar and the default summary, and is what `summary` and `actions`
+     * are handed. It counts only while `quote` describes the selection, so it
+     * never outlives the cart it was priced for.
+     */
+    charged?: number | null;
     /** True while a fresh price is in flight. */
     quoting?: boolean;
     /** The count the bill will carry, when the host knows better than the cart. */
@@ -124,6 +132,7 @@
     quotePeriod = null,
     period = 'monthly',
     per,
+    charged = null,
     quoting = false,
     billedSkus = null,
     currency = 'USD',
@@ -187,9 +196,8 @@
 
   const total = $derived(
     quoted
-      ? period === 'annual'
-        ? (quoted.annual_total_cents ?? null)
-        : quoted.total_cents
+      ? (charged ??
+          (period === 'annual' ? (quoted.annual_total_cents ?? null) : quoted.total_cents))
       : null,
   );
 

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

@@ -26,6 +26,14 @@ interface Props {
      * `'once'` and the total reads "$6.00 once" rather than "$6.00/mo".
      */
     per?: BillingPeriod | 'once';
+    /**
+     * What the order charges, in cents, when the host prices more than the
+     * selection, such as a discount code. It stands in for the quote's total
+     * in the bar and the default summary, and is what `summary` and `actions`
+     * are handed. It counts only while `quote` describes the selection, so it
+     * never outlives the cart it was priced for.
+     */
+    charged?: number | null;
     /** True while a fresh price is in flight. */
     quoting?: boolean;
     /** The count the bill will carry, when the host knows better than the cart. */

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/Table.svelte

@@ -77,6 +77,7 @@
     '[&_tbody_tr:hover>td:last-child]:shadow-[inset_-1px_1px_var(--color-brand),inset_-1px_-1px_var(--color-brand)]',
     '[&_tbody_tr:hover>td:first-child:last-child]:shadow-[inset_1px_1px_var(--color-brand),inset_-1px_-1px_var(--color-brand)]',
     '[&_tbody_tr]:transition-colors',
+    '[&_tbody_tr>td]:transition-shadow',
   ].join(' ');
 
   let {

package/dist/components/Tabs.svelte

@@ -29,8 +29,8 @@
    *
    * The scrollbar is not drawn. A strip of tabs with a bar under it reads as
    * a second rule under the real one. The fades carry the same message, the
-   * tabs are buttons so the keyboard reaches every one, and the active tab
-   * is scrolled into view when it changes.
+   * arrow keys reach every tab, and the active tab is scrolled into view when
+   * it changes.
    */
   let scroller: HTMLElement | undefined = $state();
   let moreBefore = $state(false);
@@ -57,21 +57,86 @@
   /*
    * 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(() => {
+  function reveal(tab: HTMLElement) {
     const el = scroller;
-    const id = active;
     if (!el) return;
-    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' });
-    }
+    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;
+  }
+
+  function tabAt(index: number): HTMLElement | undefined {
+    return scroller?.querySelectorAll<HTMLElement>('[role="tab"]')[index];
+  }
+
+  const activeIndex = $derived(items.findIndex((t) => t.id === active));
+
+  $effect(() => {
+    const tab = activeIndex === -1 ? undefined : tabAt(activeIndex);
+    if (tab) reveal(tab);
   });
 
+  /*
+   * The strip is one stop in the tab order. A strip of five tabs cost five
+   * presses of Tab to step over, and the arrows did nothing.
+   *
+   * Activation is manual: Left, Right, Home and End move focus and the stop
+   * with it, and Enter, Space or a click chooses. A caller may navigate to
+   * another page when a tab is chosen, and a strip that chose on every arrow
+   * would then load a page per key press and take the reader off the strip.
+   *
+   * While focus is inside the strip the stop follows it, by key or by
+   * pointer. When focus leaves, the stop goes back to the selected tab. A
+   * selection matching no item would leave every tab at -1 and drop the
+   * strip out of the tab order, so the first tab holds it then.
+   */
+  let roving: number | null = $state(null);
+  const tabStop = $derived(roving ?? (activeIndex === -1 ? 0 : activeIndex));
+
+  function moveTo(index: number) {
+    const tab = tabAt(index);
+    if (!tab) return;
+    // The strip is in view when a key reaches it, and focus() would scroll
+    // every box above the tab, the page among them.
+    tab.focus({ preventScroll: true });
+    reveal(tab);
+  }
+
+  function onTabKeydown(e: KeyboardEvent, index: number) {
+    const last = items.length - 1;
+    let next: number;
+    switch (e.key) {
+      case 'ArrowRight':
+        next = index === last ? 0 : index + 1;
+        break;
+      case 'ArrowLeft':
+        next = index === 0 ? last : index - 1;
+        break;
+      case 'Home':
+        next = 0;
+        break;
+      case 'End':
+        next = last;
+        break;
+      default:
+        return;
+    }
+    // The arrows scroll the strip and the page, and Home and End jump the page.
+    e.preventDefault();
+    moveTo(next);
+  }
+
+  function onStripFocusOut(e: FocusEvent) {
+    if (scroller && e.relatedTarget instanceof Node && scroller.contains(e.relatedTarget)) return;
+    roving = null;
+  }
+
   /*
    * The focus ring is inset: the tabs sit in a box that clips to scroll, and
    * the global outline sits 2px outside its element, so on the strip's top
@@ -88,17 +153,21 @@
   <div
     bind:this={scroller}
     onscroll={measure}
+    onfocusout={onStripFocusOut}
     role="tablist"
     data-testid="tabs-scroll"
     class="flex gap-0.5 overflow-x-auto border-b border-line [scrollbar-width:none]"
   >
-    {#each items as tab (tab.id)}
+    {#each items as tab, i (tab.id)}
       <button
         type="button"
         role="tab"
         data-tab={tab.id}
         aria-selected={active === tab.id}
+        tabindex={i === tabStop ? 0 : -1}
         onclick={() => onchange(tab.id)}
+        onfocus={() => (roving = i)}
+        onkeydown={(e) => onTabKeydown(e, i)}
         class="{TAB}
           {active === tab.id
           ? 'text-fg after:absolute after:bottom-0 after:inset-x-0 after:h-0.5 after:bg-brand after:rounded-t'

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.45.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.45.0';

package/dist/internal/scroll-edges.d.ts

@@ -20,14 +20,15 @@ export interface ScrollMetrics {
 }
 export declare function scrollEdges(el: ScrollMetrics): ScrollEdges;
 /**
- * The fade itself: a dark gradient on the edge, outside the scroll box so it
- * does not scroll away with the content it describes. Dark rather than a
- * palette color, because the box sits on the page in one place and inside
- * a card in another and no surface token is the color to fade to. The
- * scrims use black at an alpha for the same reason and it reads in both
- * themes. The direction is logical, so a right-to-left page fades the other
+ * The fade itself: a wash of the foreground color on the edge, outside the
+ * scroll box so it does not scroll away with the content it describes. The
+ * foreground token inverts with the theme, so the fade darkens a light card
+ * and lightens a dark one. A black fade had nothing to darken on a dark card
+ * and read as no fade at all. No surface token is the color to fade to,
+ * because the box sits on the page in one place and inside a card in
+ * another. The direction is logical, so a right-to-left page fades the other
  * way.
  */
 export declare const SCROLL_EDGE = "pointer-events-none absolute inset-y-px w-6";
-export declare const SCROLL_EDGE_START = "start-0 bg-linear-to-r rtl:bg-linear-to-l from-black/25 to-transparent";
-export declare const SCROLL_EDGE_END = "end-0 bg-linear-to-l rtl:bg-linear-to-r from-black/25 to-transparent";
+export declare const SCROLL_EDGE_START = "start-0 bg-linear-to-r rtl:bg-linear-to-l from-fg/25 to-transparent";
+export declare const SCROLL_EDGE_END = "end-0 bg-linear-to-l rtl:bg-linear-to-r from-fg/25 to-transparent";

package/dist/internal/scroll-edges.js

@@ -20,14 +20,15 @@ export function scrollEdges(el) {
     return { before: traveled > 1, after: traveled < slack - 1 };
 }
 /**
- * The fade itself: a dark gradient on the edge, outside the scroll box so it
- * does not scroll away with the content it describes. Dark rather than a
- * palette color, because the box sits on the page in one place and inside
- * a card in another and no surface token is the color to fade to. The
- * scrims use black at an alpha for the same reason and it reads in both
- * themes. The direction is logical, so a right-to-left page fades the other
+ * The fade itself: a wash of the foreground color on the edge, outside the
+ * scroll box so it does not scroll away with the content it describes. The
+ * foreground token inverts with the theme, so the fade darkens a light card
+ * and lightens a dark one. A black fade had nothing to darken on a dark card
+ * and read as no fade at all. No surface token is the color to fade to,
+ * because the box sits on the page in one place and inside a card in
+ * another. The direction is logical, so a right-to-left page fades the other
  * way.
  */
 export const SCROLL_EDGE = 'pointer-events-none absolute inset-y-px w-6';
-export const SCROLL_EDGE_START = 'start-0 bg-linear-to-r rtl:bg-linear-to-l from-black/25 to-transparent';
-export const SCROLL_EDGE_END = 'end-0 bg-linear-to-l rtl:bg-linear-to-r from-black/25 to-transparent';
+export const SCROLL_EDGE_START = 'start-0 bg-linear-to-r rtl:bg-linear-to-l from-fg/25 to-transparent';
+export const SCROLL_EDGE_END = 'end-0 bg-linear-to-l rtl:bg-linear-to-r from-fg/25 to-transparent';

package/package.json

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