@lyeve-labs/ui-kit 0.45.0 → 0.46.0

package/dist/components/AccountMenu.svelte

@@ -120,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

@@ -51,6 +51,7 @@
     APP_HEADER,
     APP_SIDEBAR,
     APP_SIDEBAR_BAND,
+    APP_SIDEBAR_EDGE,
     APP_SIDEBAR_RAIL,
     APP_SIDEBAR_WIDE,
   } from '../internal/layout.js';
@@ -277,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}
@@ -304,7 +305,7 @@
     >
       <div
         class="absolute inset-y-0 start-0 z-dropdown flex transition-shadow {railOpen
-          ? 'shadow-2xl'
+          ? 'shadow-popover'
           : ''}"
       >
         {@render sidebar(isMobile, railIcons)}
@@ -316,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">
@@ -376,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>
@@ -391,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/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/PluginCart.svelte

@@ -281,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)}
@@ -368,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
@@ -384,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}
   >
@@ -415,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">
@@ -482,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/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}`,
     );

package/dist/components/Stat.svelte

@@ -8,6 +8,7 @@
    * use this one instead.
    */
   import type { StatusTone } from '../internal/tone.js';
+  import { CARD_SURFACE } from '../internal/layout.js';
 
   type Trend = 'up' | 'down' | 'flat';
   type Accent = 'brand' | 'violet' | 'success' | 'neutral';
@@ -74,8 +75,8 @@
 
   const pads: Record<Size, string> = { sm: 'p-4', md: 'p-5' };
   const values: Record<Size, string> = {
-    sm: 'mt-1 text-lg font-semibold',
-    md: 'mt-2 text-2xl font-bold',
+    sm: 'mt-1 text-lg font-semibold tracking-tight',
+    md: 'mt-2 text-2xl font-bold tracking-tight',
   };
 
   const valueColor = $derived(tone ? tones[tone] : accents[accent]);
@@ -84,7 +85,16 @@
   const trendMark = { up: '↑', down: '↓', flat: '→' } as const;
 </script>
 
-<div class="rounded-xl border border-line bg-surface {pads[size]} {klass}">
+<!-- A brand to violet line along the top edge, so a row of figures reads as a
+     set. It is a mark and carries nothing a reader needs, so where gradients
+     are not drawn it falls back to solid brand or to nothing at all. It is
+     mirrored under right-to-left, so cyan stays at the start edge.
+     overflow-hidden lets the card's corners trim it. -->
+<div
+  class="{CARD_SURFACE} relative overflow-hidden before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-brand before:bg-accent rtl:before:-scale-x-100 {pads[
+    size
+  ]} {klass}"
+>
   <p class="text-xs font-medium uppercase tracking-wide text-faint">{label}</p>
   <p class="{values[size]} {valueColor} {mono ? 'font-mono tabular-nums' : ''}">{value}</p>
   <div class="mt-1 flex items-center gap-2">

package/dist/components/Table.svelte

@@ -17,6 +17,7 @@
     SCROLL_EDGE_START,
     scrollEdges,
   } from '../internal/scroll-edges.js';
+  import { CARD_SURFACE } from '../internal/layout.js';
 
   interface Props {
     striped?: boolean;
@@ -71,7 +72,7 @@
    * start cell in either direction and the two agree in left-to-right text.
    */
   const HOVER_RING = [
-    '[&_tbody_tr:hover]:bg-surface-2/60',
+    '[&_tbody_tr:hover]:bg-tint',
     '[&_tbody_tr:hover>td]:shadow-[inset_0_1px_var(--color-brand),inset_0_-1px_var(--color-brand)]',
     '[&_tbody_tr:hover>td:first-child]:shadow-[inset_1px_1px_var(--color-brand),inset_1px_-1px_var(--color-brand)]',
     '[&_tbody_tr:hover>td:last-child]:shadow-[inset_-1px_1px_var(--color-brand),inset_-1px_-1px_var(--color-brand)]',
@@ -240,10 +241,15 @@
 
 <!-- overflow-hidden on the frame, not only on the scroller: the hovered row's
      ring is square and the frame is not, and the last row's corners drew past
-     the frame's rounded ones. -->
+     the frame's rounded ones.
+
+     The frame is a card: the same surface, radius and shadows, so a table and
+     the cards above it sit at one depth. It paints its own surface rather than
+     showing the page through, which the shadow under it needs to read as a
+     raised sheet. -->
 <div
   data-testid="table-frame"
-  class="relative w-full overflow-hidden rounded-xl border border-line {cls}"
+  class="relative w-full overflow-hidden {CARD_SURFACE} {cls}"
 >
   <!--
     data-print: the box exists to clip. On paper there is no viewport to clip
@@ -256,7 +262,7 @@
     onfocusin={reveal}
     data-print="unclip"
     data-testid="table-scroll"
-    class="w-full overflow-x-auto rounded-xl"
+    class="w-full overflow-x-auto rounded-card"
     {...scrollAttrs}
   >
     <!--
@@ -274,21 +280,25 @@
       which is why the lines moved down to the cells they were already drawn
       between. With border-spacing at zero the result is the same line in the
       same place.
+
+      The head row and a hovered row take the brand tint. It is one opaque
+      color, so the contrast suite measures the head's labels and a row's text
+      on it, and a hovered row is told apart by more than its ring.
     -->
     <table
       style="--cell-truncate: {truncateAt}"
       class="w-full border-separate border-spacing-0 text-sm text-start
       {fixed ? 'table-fixed' : ''}
       {CELL_FIT[cell]} {CELL_NAMED} {COLUMN_ALIGN} {HEAD_CONTROLS}
-      [&_thead_th]:border-b [&_thead_th]:border-line [&_thead]:bg-surface-2/40
+      [&_thead_th]:border-b [&_thead_th]:border-line [&_thead]:bg-tint
       [&_thead_th]:px-4 [&_thead_th]:py-3 [&_thead_th]:text-xs
         [&_thead_th]:font-medium [&_thead_th]:text-faint
         [&_thead_th]:uppercase [&_thead_th]:tracking-wider [&_thead_th]:whitespace-nowrap
       [&_tbody_td]:px-4 [&_tbody_td]:py-3 [&_tbody_td]:text-fg [&_tbody_td]:align-middle
       [&_tbody_td]:border-b [&_tbody_td]:border-line [&_tbody_tr:last-child_td]:border-0
       {striped ? '[&_tbody_tr:nth-child(even)]:bg-surface-2/40' : ''}
-      [&_tbody_tr:last-child>td:first-child]:rounded-es-[calc(var(--radius-xl)-1px)]
-      [&_tbody_tr:last-child>td:last-child]:rounded-ee-[calc(var(--radius-xl)-1px)]
+      [&_tbody_tr:last-child>td:first-child]:rounded-es-[calc(var(--radius-card)-1px)]
+      [&_tbody_tr:last-child>td:last-child]:rounded-ee-[calc(var(--radius-card)-1px)]
       {hoverable ? HOVER_RING : ''}"
     >
       {@render children()}
@@ -306,7 +316,7 @@
       aria-hidden="true"
       data-print="hide"
       data-testid="table-more-before"
-      class="{SCROLL_EDGE} {SCROLL_EDGE_START} rounded-s-xl"
+      class="{SCROLL_EDGE} {SCROLL_EDGE_START} rounded-s-card"
     ></div>
   {/if}
   {#if moreAfter}
@@ -314,7 +324,7 @@
       aria-hidden="true"
       data-print="hide"
       data-testid="table-more-after"
-      class="{SCROLL_EDGE} {SCROLL_EDGE_END} rounded-e-xl"
+      class="{SCROLL_EDGE} {SCROLL_EDGE_END} rounded-e-card"
     ></div>
   {/if}
 </div>

package/dist/components/Tabs.svelte

@@ -158,6 +158,8 @@
     data-testid="tabs-scroll"
     class="flex gap-0.5 overflow-x-auto border-b border-line [scrollbar-width:none]"
   >
+    <!-- The active indicator is the cyan to violet accent, with solid brand
+         under it for wherever gradients are not drawn. -->
     {#each items as tab, i (tab.id)}
       <button
         type="button"
@@ -170,7 +172,7 @@
         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'
+          ? 'text-fg after:absolute after:bottom-0 after:inset-x-0 after:h-0.5 after:bg-brand after:bg-accent after:rounded-t rtl:after:-scale-x-100'
           : 'text-faint hover:text-fg'}"
       >
         {tab.label}

package/dist/components/Toaster.svelte

@@ -30,7 +30,7 @@
       transition:motion.toast|global
       animate:motion.reorder
       class="pointer-events-auto flex items-start gap-3 overflow-hidden rounded-lg border border-line
-             bg-surface ps-0 pe-3 py-3 shadow-xl"
+             bg-surface ps-0 pe-3 py-3 shadow-popover inset-shadow-highlight"
     >
       <span class="w-1 self-stretch shrink-0 {styles[statusTone(t.tone)].bar}"></span>
       <span

package/dist/components/Tooltip.svelte

@@ -138,7 +138,7 @@
     aria-hidden={describe ? undefined : 'true'}
     style="top: {anchor.top}px; left: {anchor.left}px"
     class="fixed {pos[position]} z-tooltip w-max max-w-[min(16rem,calc(100vw-2rem))]
-      rounded-lg border border-line bg-surface-2 px-2.5 py-1.5 text-xs text-fg shadow-xl
+      rounded-lg border border-line bg-surface-2 px-2.5 py-1.5 text-xs text-fg shadow-popover inset-shadow-highlight
       transition {visible
       ? 'duration-base ease-enter'
       : 'invisible scale-[0.96] opacity-0 duration-fast ease-exit'}"

package/dist/components/dialog/Dialog.svelte

@@ -110,7 +110,7 @@
     use:overlay
     transition:motion.dialog|global
     class="relative w-full {sizeClass(entry.options.size ?? 'md')} mx-4
-			bg-surface border border-line rounded-xl shadow-2xl
+			bg-surface bg-card border border-line rounded-card shadow-overlay inset-shadow-highlight
 			transition-transform duration-slow
 			focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
     style="transform: scale({1 - offset * 0.03}) translateY({offset * 16}px);

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.45.0";
+export declare const VERSION = "0.46.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.45.0';
+export const VERSION = '0.46.0';