@lyeve-labs/ui-kit 0.44.0 → 0.46.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
@@ -117,7 +120,7 @@
        rule are the card treatment, because lifted off the header it is a
        surface of its own. -->
   <div
-    class="absolute end-0 top-full z-dropdown mt-2 flex w-64 origin-top-right flex-col gap-1 rounded-xl border border-line bg-surface p-2 shadow-2xl animate-popover-in"
+    class="absolute end-0 top-full z-dropdown mt-2 flex w-64 origin-top-right flex-col gap-1 rounded-xl border border-line bg-surface p-2 shadow-popover inset-shadow-highlight animate-popover-in"
   >
     <div class="border-b border-line px-2 pb-2">
       <p class="truncate text-sm font-medium text-fg">{name}</p>

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">
@@ -42,6 +51,7 @@
     APP_HEADER,
     APP_SIDEBAR,
     APP_SIDEBAR_BAND,
+    APP_SIDEBAR_EDGE,
     APP_SIDEBAR_RAIL,
     APP_SIDEBAR_WIDE,
   } from '../internal/layout.js';
@@ -161,15 +171,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 +204,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);
     };
@@ -250,7 +278,7 @@
     <div
       data-print="hide"
       transition:motion.drawer|global={{ side: startSide() }}
-      class="fixed inset-y-0 start-0 z-drawer flex shadow-2xl"
+      class="fixed inset-y-0 start-0 z-drawer flex shadow-overlay"
       role="dialog"
       aria-modal="true"
       aria-label={drawerLabel}
@@ -269,14 +297,15 @@
       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}
     >
       <div
         class="absolute inset-y-0 start-0 z-dropdown flex transition-shadow {railOpen
-          ? 'shadow-2xl'
+          ? 'shadow-popover'
           : ''}"
       >
         {@render sidebar(isMobile, railIcons)}
@@ -288,7 +317,10 @@
     </div>
   {/if}
 
-  <div class="flex min-w-0 flex-1 flex-col">
+  <!-- The column carries the ink and the light pooled at its top, so the
+       translucent header and the page under it share one canvas. The main
+       region paints nothing of its own for that reason. -->
+  <div class="flex min-w-0 flex-1 flex-col bg-ink bg-canvas">
     {#if !barHidden}
       <header data-print="hide" class={APP_HEADER}>
         <div class="flex min-w-0 flex-1 items-center gap-2">
@@ -348,7 +380,7 @@
       id="content"
       tabindex="-1"
       data-print="unclip"
-      class="relative min-w-0 flex-1 overflow-auto bg-ink outline-none"
+      class="relative min-w-0 flex-1 overflow-auto outline-none"
     >
       {@render children()}
     </main>
@@ -363,7 +395,7 @@
     aria-label={sidebarLabel}
     data-print="hide"
     data-testid="app-sidebar"
-    class="{APP_SIDEBAR} {rail ? APP_SIDEBAR_RAIL : APP_SIDEBAR_WIDE} flex"
+    class="{APP_SIDEBAR} {APP_SIDEBAR_EDGE} {rail ? APP_SIDEBAR_RAIL : APP_SIDEBAR_WIDE} flex"
     inert={hidden}
     aria-hidden={hidden ? 'true' : undefined}
   >

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

@@ -59,8 +59,15 @@
   lockup, heading and card, and no two agreed: three heading sizes, a lockup
   on some pages, a theme control on others, and one class that named no
   token at all. Stated once here, the way AppShell states the signed-in frame.
+
+  The ground is the hero wash, ink into a tenth of violet, because this page
+  is the first one a reader sees. bg-ink stays under it for wherever the wash
+  is not drawn.
 -->
-<main class={cn('flex min-h-screen items-center justify-center bg-ink px-4 py-10', klass)} {style}>
+<main
+  class={cn('flex min-h-screen items-center justify-center bg-ink bg-hero px-4 py-10', klass)}
+  {style}
+>
   <div class="w-full {widths[width]}">
     {#if actions}
       <div class="mb-4 flex justify-end">{@render actions()}</div>
@@ -86,7 +93,7 @@
       {:else}
         <Logo size="lg" class="mb-5" />
       {/if}
-      <h1 class="text-2xl font-bold text-fg">{title}</h1>
+      <h1 class="text-2xl font-semibold tracking-h2 text-fg">{title}</h1>
       {#if description}
         <p class="mt-2 text-muted">{description}</p>
       {/if}

package/dist/components/Badge.svelte

@@ -23,13 +23,14 @@
     danger: 'bg-danger/10 text-danger border-danger/20',
   };
 
+  /** The dot carries a soft halo of its own tone. A ring is a shadow, so the dot and the label beside it do not move. */
   const dotColor: Record<AccentTone, string> = {
-    neutral: 'bg-muted',
-    brand: 'bg-brand',
-    violet: 'bg-violet',
-    success: 'bg-success',
-    warn: 'bg-warn',
-    danger: 'bg-danger',
+    neutral: 'bg-muted ring-2 ring-muted/20',
+    brand: 'bg-brand ring-2 ring-brand/25',
+    violet: 'bg-violet ring-2 ring-violet/25',
+    success: 'bg-success ring-2 ring-success/25',
+    warn: 'bg-warn ring-2 ring-warn/25',
+    danger: 'bg-danger ring-2 ring-danger/25',
   };
 
   const sizes: Record<Size, string> = {

package/dist/components/Button.svelte

@@ -82,15 +82,38 @@
    * below brand-light on the dark ramp and below it again on the light one, and
    * the filtered variants darken rather than brighten, so a press does not read
    * as one gesture in one theme and its opposite in the other.
+   *
+   * The filled and secondary variants are raised: a bright edge along the top
+   * and a short drop under them. The primary action alone glows, softly at
+   * rest and more under the pointer or held, so the one thing a surface wants
+   * done is the one thing that answers with light. Its fill is lifted, white
+   * falling off from the top over the brand color, and the hover and held
+   * colors change under the lift. The glow is a shadow, so it never moves the
+   * button or its neighbors, and the color change carries the state on its
+   * own where shadows and gradients are not drawn. A disabled primary drops
+   * its glow, which would otherwise invite the click it refuses.
+   *
+   * A filled button's boundary is its fill, and a forced colors scheme
+   * replaces the fill with the canvas, so the button read as loose text.
+   * There it draws an outline in the button text color, inset by its own
+   * width. An outline takes no space, so nothing moves, and the focus
+   * outline in theme.css replaces it while the button has focus.
    */
+  const FILLED_EDGE =
+    'forced-colors:outline-solid forced-colors:outline-1 forced-colors:-outline-offset-1 ' +
+    'forced-colors:outline-[color:ButtonText] forced-colors:disabled:outline-[color:GrayText]';
+
   const variants: Record<Variant, string> = {
     primary:
-      'bg-brand text-ink hover:bg-brand-light active:bg-brand-deep shadow-sm shadow-brand/20',
+      'bg-brand bg-lift text-ink hover:bg-brand-light active:bg-brand-deep inset-shadow-bevel ' +
+      'shadow-primary hover:shadow-primary-hover active:shadow-primary-hover ' +
+      `disabled:shadow-raised aria-disabled:shadow-raised ${FILLED_EDGE}`,
     violet:
-      'bg-violet text-ink hover:brightness-110 active:brightness-90 shadow-sm shadow-violet/20',
+      `bg-violet text-ink hover:brightness-110 active:brightness-90 inset-shadow-bevel shadow-raised ${FILLED_EDGE}`,
     secondary:
-      'bg-surface-2 text-fg border border-line-strong hover:bg-line active:bg-line-strong/30',
-    danger: 'bg-danger text-ink hover:brightness-110 active:brightness-90',
+      'bg-surface-2 text-fg border border-line-strong hover:bg-line active:bg-line-strong/30 inset-shadow-highlight shadow-raised',
+    danger:
+      `bg-danger text-ink hover:brightness-110 active:brightness-90 inset-shadow-bevel shadow-raised ${FILLED_EDGE}`,
     ghost: 'text-muted hover:bg-surface-2 hover:text-fg active:bg-line active:text-fg',
     outline:
       'border border-line-strong text-fg hover:border-brand hover:text-brand active:bg-brand/10',
@@ -125,7 +148,8 @@
    * button its icon plus 16px.
    */
   const cls = $derived(
-    `inline-flex items-center justify-center font-medium whitespace-nowrap transition-colors ` +
+    `inline-flex items-center justify-center font-medium whitespace-nowrap ` +
+      `transition-[color,background-color,border-color,box-shadow] focus-visible:shadow-glow ` +
       `disabled:opacity-50 disabled:cursor-not-allowed select-none ${TOUCH_GROW} ` +
       `${full ? 'w-full' : ''} ${variants[variant]} ${sizes[size]} ${klass}`,
   );

package/dist/components/Card.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Component, Snippet } from 'svelte';
-  import { sectionHeading } from '../internal/layout.js';
+  import { CARD_SURFACE, sectionHeading } from '../internal/layout.js';
 
   type Pad = 'none' | 'sm' | 'md' | 'lg';
 
@@ -81,11 +81,16 @@
 <!-- tabindex is only set alongside role="button" (when onclick is provided),
      so the element is interactive. The compiler can't narrow the dynamic role. -->
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- The surface is the layout contract's, so a Card and a bordered Panel on
+     one page agree. A hover card, and any clickable one, takes a cyan border
+     and the focus glow under the pointer, so it answers the way a button does.
+     A clickable card glows on focus too: its own shadow would otherwise hide
+     the global focus glow. -->
 <div
   data-print="keep"
-  class="bg-surface border border-line rounded-xl overflow-hidden transition-colors {hover
-    ? 'hover:border-line/0 hover:ring-1 hover:ring-brand/30'
-    : ''} {onclick ? 'cursor-pointer' : ''} {klass}"
+  class="{CARD_SURFACE} overflow-hidden transition-[border-color,box-shadow] {hover || onclick
+    ? 'hover:border-brand/50 hover:shadow-glow'
+    : ''} {onclick ? 'cursor-pointer focus-visible:shadow-glow' : ''} {klass}"
   role={onclick ? 'button' : undefined}
   tabindex={onclick ? 0 : undefined}
   {onclick}

package/dist/components/Drawer.svelte

@@ -115,7 +115,7 @@
     <div
       use:overlay
       transition:motion.drawer|global={{ side: edge() }}
-      class="relative flex h-full w-full flex-col {OVERLAY_WIDTH[rung]} bg-surface shadow-2xl
+      class="relative flex h-full w-full flex-col {OVERLAY_WIDTH[rung]} bg-surface shadow-overlay
         {side === 'right' ? 'border-s' : 'border-e'} border-line"
       role="dialog"
       aria-modal="true"

package/dist/components/EmptyState.svelte

@@ -29,19 +29,25 @@
   }: Props = $props();
 </script>
 
+<!-- The hero wash: the page's ink into a tenth of violet, under a solid 1px
+     border. It was a dashed outline on a translucent surface, which read as a
+     slot left unfilled rather than as a place something will appear. The
+     medallion is a raised control in miniature, and its icon takes the brand
+     color. The contrast suite measures every text token against both ends of
+     the wash. -->
 <div
-  class="flex flex-col items-center justify-center text-center rounded-xl border border-dashed border-line bg-surface/40 px-6 py-12 {klass}"
+  class="flex flex-col items-center justify-center text-center rounded-card border border-line bg-ink bg-hero inset-shadow-highlight px-6 py-12 {klass}"
 >
   {#if iconSnippet}
     <div
-      class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-surface-2 text-muted"
+      class="mb-4 flex h-12 w-12 items-center justify-center rounded-full border border-line bg-surface-2 text-brand inset-shadow-highlight shadow-raised"
       aria-hidden="true"
     >
       {@render iconSnippet()}
     </div>
   {:else if icon}
     <div
-      class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-surface-2 text-2xl"
+      class="mb-4 flex h-12 w-12 items-center justify-center rounded-full border border-line bg-surface-2 text-2xl inset-shadow-highlight shadow-raised"
       aria-hidden="true"
     >
       {icon}

package/dist/components/Modal.svelte

@@ -87,7 +87,7 @@
       use:overlay
       transition:motion.dialog|global
       class="relative flex max-h-[calc(100dvh-2rem)] w-full {OVERLAY_WIDTH[rung]} flex-col
-             overflow-hidden rounded-xl border border-line bg-surface shadow-2xl"
+             overflow-hidden rounded-card border border-line bg-surface bg-card shadow-overlay inset-shadow-highlight"
       role="dialog"
       aria-modal="true"
       aria-labelledby={title ? headingId : undefined}

package/dist/components/PageHeader.svelte

@@ -55,9 +55,15 @@
       a 390px screen is the ramp applied rather than adopted. 32px is the step
       the ramp does hold and the step this was already reaching for.
 
-      The weight stays at 700, which is the ramp's H1 weight, because this is
-      still the page's h1. Taking H2's 600 along with its size would move the
-      title twice for one decision.
+      The weight is H2's 600 with H2's -0.02em tracking, on a 38px line
+      (leading-title). A 700 title at 32px read heavy beside the semibold
+      card headings under it, and the tighter tracking is what makes a large
+      title read as set rather than typed.
+
+      Below the sm breakpoint it drops to the console's 24/32 step, which
+      keeps a long title to fewer lines on a phone. A media query is settled
+      before the first paint, so the title never changes size while the
+      reader watches.
 
       Each size token names its own leading and tracking. A `text-*` token
       built from `--text-*` alone sets font-size and leaves line-height to
@@ -71,7 +77,7 @@
       data-testid="page-title"
       class="[overflow-wrap:anywhere] {compact
         ? 'text-sm font-semibold text-fg'
-        : 'text-h2 leading-h2 tracking-h2 font-bold text-fg'}"
+        : 'text-2xl tracking-h2 font-semibold text-fg sm:text-h2 sm:leading-title'}"
     >
       {title}
     </h1>

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,
   );
 
@@ -273,9 +281,22 @@
     {/if}
 
     {#if shown.length === 0}
-      <p class="rounded-xl border border-dashed border-line p-8 text-center text-sm text-muted">
-        Nothing matches that search.
-      </p>
+      <div
+        class="flex flex-col items-center gap-3 rounded-xl border border-dashed border-line p-8 text-center text-sm text-muted"
+      >
+        <p>No capabilities match these filters.</p>
+        <Button
+          type="button"
+          size="sm"
+          variant="secondary"
+          onclick={() => {
+            query = '';
+            category = 'all';
+          }}
+        >
+          Clear filters
+        </Button>
+      </div>
     {:else}
       <div class="grid gap-3 sm:grid-cols-2 2xl:grid-cols-3">
         {#each shown as plugin (plugin.sku)}
@@ -360,7 +381,7 @@
       <div class="sticky bottom-3 lg:hidden" transition:motion.toast|global>
         <a
           href="#{summaryId}"
-          class="flex items-center justify-between gap-3 rounded-xl border border-brand bg-surface px-4 py-3 text-sm shadow-lg transition-colors hover:bg-surface-2"
+          class="flex items-center justify-between gap-3 rounded-xl border border-brand bg-surface px-4 py-3 text-sm shadow-popover inset-shadow-highlight transition-colors hover:bg-surface-2"
         >
           <span class="text-fg">
             <span class="font-semibold">{count}</span> picked{#if total !== null}{' '}<span
@@ -376,7 +397,7 @@
 
   <aside
     id={summaryId}
-    class="scroll-mt-20 self-start rounded-xl border border-line bg-surface p-5 lg:sticky"
+    class="scroll-mt-20 self-start rounded-card border border-line bg-surface bg-card p-5 shadow-card inset-shadow-highlight lg:sticky"
     style:top={stickyTop}
     aria-label={heading}
   >
@@ -407,7 +428,8 @@
 
       {#if count === 0}
         <p class="py-6 text-center text-sm text-muted">
-          Nothing picked yet. With none of these you are on the free tier, which needs no checkout.
+          No capabilities picked yet. Without any, you stay on the free tier, which needs no
+          checkout.
         </p>
       {:else}
         <ul class="mb-4 max-h-56 space-y-1 overflow-y-auto pe-1">
@@ -474,7 +496,7 @@
         {/if}
         {#if ladder.next}
           <p class="mb-3 text-xs text-muted">
-            {ladder.next.more} more and the discount is {ladder.next.discount_pct}%.
+            Add {ladder.next.more} more for a {ladder.next.discount_pct}% discount.
           </p>
         {/if}
 

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

@@ -30,9 +30,21 @@
       : 0,
   );
 
+  /**
+   * The brand fill runs cyan into violet, the accent the kit keeps for a mark
+   * a few pixels wide, and both ends clear 3:1 against the track in both
+   * palettes. bg-brand stays under it for paper, which draws no gradient. It
+   * runs from the start edge, so under right-to-left the fill is mirrored and
+   * its cyan end still sits where the bar starts.
+   *
+   * A forced colors scheme replaces every background color with the canvas,
+   * which erased the track and the fill alike. There the track draws a border
+   * and the fill opts out of the forced palette to paint in the system text
+   * color, so the value is still there to read.
+   */
   const tones: Record<AccentTone, string> = {
     neutral: 'bg-muted',
-    brand: 'bg-brand',
+    brand: 'bg-brand bg-accent',
     violet: 'bg-violet',
     success: 'bg-success',
     warn: 'bg-warn',
@@ -54,7 +66,8 @@
     </div>
   {/if}
   <div
-    class="w-full overflow-hidden rounded-full bg-surface-2 {sizes[size]}"
+    class="w-full overflow-hidden rounded-full bg-surface-2 inset-shadow-well {sizes[size]}
+      forced-colors:border forced-colors:border-[color:CanvasText]"
     role="progressbar"
     aria-valuenow={value}
     aria-valuemin={0}
@@ -62,7 +75,8 @@
     aria-label={label}
   >
     <div
-      class="h-full rounded-full transition-[width] duration-progress
+      class="h-full rounded-full transition-[width] duration-progress rtl:-scale-x-100
+        forced-colors:forced-color-adjust-none forced-colors:bg-[color:CanvasText]
         {tones[tone]}
         {animated ? 'animate-pulse' : ''}"
       style="width: {pct}%"

package/dist/components/SegmentedControl.svelte

@@ -265,7 +265,7 @@
     onfocusout={linked ? onGroupFocusOut : undefined}
     class="inline-flex items-stretch rounded-lg border {error
       ? 'border-danger coarse:outline-danger'
-      : 'border-line-strong coarse:outline-line-strong'} bg-surface-2 p-0.5 coarse:border-0 coarse:p-0.75 coarse:outline coarse:outline-1 coarse:-outline-offset-1 {SIZES[
+      : 'border-line-strong coarse:outline-line-strong'} bg-surface-2 inset-shadow-well p-0.5 coarse:border-0 coarse:p-0.75 coarse:outline coarse:outline-1 coarse:-outline-offset-1 {SIZES[
       size
     ].row} {disabled ? 'opacity-50' : ''}"
   >
@@ -276,7 +276,7 @@
         `${HIT_AREA} inline-flex coarse:min-w-control items-center justify-center rounded-md outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand disabled:cursor-not-allowed ` +
         SIZES[size].segment +
         (selected
-          ? ' bg-surface text-brand shadow-sm ring-1 ring-inset ring-brand/40'
+          ? ' bg-surface text-brand shadow-raised inset-shadow-highlight ring-1 ring-inset ring-brand/40'
           : ' text-muted hover:text-fg active:bg-surface active:text-fg')}
       {#snippet content()}
         {#if Icon}

package/dist/components/SidebarNav.svelte

@@ -83,10 +83,23 @@
    * inside `@media (hover: hover)` and never matches a finger. A sidebar is
    * mostly used on a phone as a drawer, where the tap that closed it was the
    * one gesture in the component with nothing on screen behind it.
+   *
+   * The current row's mark is a short cyan to violet bar laid over its start
+   * border, inset from the rounded corners, rather than the border itself: a
+   * gradient border cannot follow a radius. The border goes transparent under
+   * it and returns as the system text color in a forced colors scheme, which
+   * draws neither the bar nor the row's fill, so the row keeps a mark there.
+   * The row's fill is the brand tint and the bar carries a few pixels of
+   * glow, so the row reads as the place you are rather than one more entry.
    */
   function rowPaint(state: 'current' | 'ancestor' | 'rest'): string {
     if (state === 'current')
-      return 'border-brand bg-surface-2 font-medium text-brand hover:bg-line active:bg-line';
+      return (
+        'relative border-transparent forced-colors:border-[CanvasText] bg-tint ' +
+        'inset-shadow-highlight font-medium text-brand hover:bg-line active:bg-line ' +
+        'after:absolute after:inset-y-1.5 after:-start-0.5 after:w-0.5 after:rounded-full ' +
+        'after:bg-brand after:bg-accent-y after:shadow-mark'
+      );
     if (state === 'ancestor') return 'border-brand text-fg hover:bg-surface-2 active:bg-line';
     return 'border-transparent text-muted hover:bg-surface-2 hover:text-fg active:bg-line active:text-fg';
   }

package/dist/components/SortableList.svelte

@@ -447,7 +447,7 @@
     const mark = line?.index === index ? LINE[line.edge as 'before' | 'after'] : null;
     return cn(
       'relative flex items-center gap-1 rounded-lg',
-      drag?.id === id && 'z-dropdown bg-surface shadow-lg',
+      drag?.id === id && 'z-dropdown bg-surface shadow-popover',
       settling === id && 'transition-[translate] duration-base ease-move',
       mark && `${mark.shape} ${line?.refused ? mark.refused : mark.ok}`,
     );