@lyeve-labs/ui-kit 0.44.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/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/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/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);
@@ -62,20 +62,81 @@
    * 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) 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;
+  }
+
+  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
@@ -92,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/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.44.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.44.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.44.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>",