@lyeve-labs/ui-kit 0.44.0 → 0.46.0

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,12 +72,13 @@
    * 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)]',
     '[&_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 {
@@ -239,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
@@ -255,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}
   >
     <!--
@@ -273,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()}
@@ -305,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}
@@ -313,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

@@ -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,20 +153,26 @@
   <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)}
+    <!-- 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"
         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'
+          ? '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.44.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.44.0';
+export const VERSION = '0.46.0';

package/dist/internal/field.js

@@ -40,6 +40,15 @@ export const FIELD_LABEL = 'text-sm font-medium text-fg';
 export const FIELD_HINT = 'text-xs text-faint';
 /** Error text below a control. Replaces the hint rather than stacking with it. */
 export const FIELD_ERROR = 'text-xs text-danger';
+/**
+ * The depth every field shares: an inner shadow along the top edge that sinks
+ * it into the surface, and the cyan glow around the focus ring. Both are
+ * shadows, so the field keeps its height and its border, and the ring stays
+ * the indicator that clears 3:1. The glow appears with the ring rather than
+ * easing in, because a focus indicator that fades is late for the key press
+ * that moved it.
+ */
+const CONTROL_DEPTH = 'inset-shadow-well focus-visible:shadow-glow';
 /**
  * Everything a single-line control needs except its border color.
  *
@@ -58,11 +67,13 @@ export const FIELD_ERROR = 'text-xs text-danger';
  */
 export const CONTROL_BASE = 'w-full h-control rounded-lg bg-surface-2 border px-3 text-sm text-fg ' +
     'placeholder:text-faint transition-colors outline-none ' +
+    `${CONTROL_DEPTH} ` +
     'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand ' +
     'disabled:opacity-50 disabled:cursor-not-allowed';
 /** As CONTROL_BASE, for controls whose height is driven by their content. */
 export const CONTROL_MULTILINE = 'w-full min-h-control rounded-lg bg-surface-2 border px-3 py-2 text-sm text-fg ' +
     'placeholder:text-faint transition-colors outline-none ' +
+    `${CONTROL_DEPTH} ` +
     'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand ' +
     'disabled:opacity-50 disabled:cursor-not-allowed';
 /**
@@ -111,7 +122,7 @@ export function describedBy(id, error, hint) {
  * held the caret.
  */
 export const CONTROL_SEGMENTED = 'inline-flex h-control items-center gap-0.5 rounded-lg bg-surface-2 border px-3 ' +
-    'text-sm text-fg transition-colors';
+    'text-sm text-fg transition-colors inset-shadow-well has-[:focus-visible]:shadow-glow';
 /** As controlBorder, for a wrapper that is only ever focused through a child. */
 export function segmentedBorder(error) {
     return error

package/dist/internal/layout.d.ts

@@ -91,8 +91,15 @@ export declare const PAGE_STACK = "flex flex-col gap-section";
  * children flush to the border. `overflow-hidden` is deliberately absent: the
  * focus ring sits 2px outside the element it belongs to, so a clipping surface
  * crops the ring of every button inside it down to whichever edge fits.
+ *
+ * The depth is a few percent of light at the top, a 1px light along the top
+ * edge and a soft drop under the card. The light is a translucent background
+ * image laid over the background color, so a caller who passes its own bg-*
+ * keeps that color under it. The rest are shadows, so the card is the same
+ * size with or without them and the 1px border stays the boundary a forced
+ * colors scheme keeps.
  */
-export declare const CARD_SURFACE = "bg-surface border border-line rounded-xl";
+export declare const CARD_SURFACE = "bg-surface bg-card border border-line rounded-card shadow-card inset-shadow-highlight";
 /**
  * The card surface in the danger tone, for a group of destructive actions.
  *
@@ -101,7 +108,7 @@ export declare const CARD_SURFACE = "bg-surface border border-line rounded-xl";
  * percent keeps the controls of a form inside it on a ground they were drawn
  * for. The contrast suite reads the share from this string.
  */
-export declare const PANEL_DANGER_SURFACE = "bg-[color-mix(in_srgb,var(--color-danger)_5%,var(--color-surface))] border border-danger/40 rounded-xl";
+export declare const PANEL_DANGER_SURFACE = "bg-[color-mix(in_srgb,var(--color-danger)_5%,var(--color-surface))] border border-danger/40 rounded-card shadow-card inset-shadow-highlight";
 /**
  * Card padding by name.
  *
@@ -181,8 +188,20 @@ export declare function sectionHeading(level: 2 | 3, variant?: SectionVariant):
  *
  * `border-e` and not `border-r`: the shell is the one place a right-to-left
  * locale flips, and a physical border leaves the rule on the wrong edge.
+ *
+ * The sidebar runs from the surface at the top a step toward ink at the foot,
+ * and its edge is a rule that fades in and out at its ends, drawn over a
+ * transparent border. The border keeps the column's width, and a forced
+ * colors scheme, which draws no gradient, paints that border in the system
+ * text color, so the edge is still there.
  */
-export declare const APP_SIDEBAR = "h-full shrink-0 flex-col border-e border-line bg-surface transition-[width] duration-base ease-move";
+export declare const APP_SIDEBAR: string;
+/**
+ * The faded edge of the sidebar, a 1px line laid over its transparent
+ * border. It sets a width of its own, so it stays out of APP_SIDEBAR, which
+ * holds no width at all.
+ */
+export declare const APP_SIDEBAR_EDGE = "after:pointer-events-none after:absolute after:inset-y-0 after:-end-px after:w-px after:bg-rule-y";
 /**
  * The sidebar's two widths. Expanded is the 224px column every authed screen
  * had. The rail is the 56px icon column the theme had named and nothing used:
@@ -201,8 +220,14 @@ export declare const APP_SIDEBAR_RAIL = "w-nav-rail";
 /**
  * The header bar. Its gutter is the page gutter, so the section name in the
  * header sits directly above the page title under it rather than 8px off.
+ *
+ * The surface is translucent, so the light at the top of the canvas carries
+ * up under it and the header reads as part of the page rather than a lid on
+ * it. Its rule fades out toward the end edge and stays solid where it meets
+ * the brand row's, so the two read as one line across the top. The rule sits
+ * over a transparent border, for the same reason as the sidebar's.
  */
-export declare const APP_HEADER = "flex h-header shrink-0 items-center gap-2 border-b border-line bg-surface px-page-x";
+export declare const APP_HEADER: string;
 /**
  * The sidebar's brand row. Exactly as tall as the header beside it: the two
  * meet at the top left corner and a 4px disagreement there reads as a seam.

package/dist/internal/layout.js

@@ -102,8 +102,15 @@ export const PAGE_STACK = 'flex flex-col gap-section';
  * children flush to the border. `overflow-hidden` is deliberately absent: the
  * focus ring sits 2px outside the element it belongs to, so a clipping surface
  * crops the ring of every button inside it down to whichever edge fits.
+ *
+ * The depth is a few percent of light at the top, a 1px light along the top
+ * edge and a soft drop under the card. The light is a translucent background
+ * image laid over the background color, so a caller who passes its own bg-*
+ * keeps that color under it. The rest are shadows, so the card is the same
+ * size with or without them and the 1px border stays the boundary a forced
+ * colors scheme keeps.
  */
-export const CARD_SURFACE = 'bg-surface border border-line rounded-xl';
+export const CARD_SURFACE = 'bg-surface bg-card border border-line rounded-card shadow-card inset-shadow-highlight';
 /**
  * The card surface in the danger tone, for a group of destructive actions.
  *
@@ -112,7 +119,7 @@ export const CARD_SURFACE = 'bg-surface border border-line rounded-xl';
  * percent keeps the controls of a form inside it on a ground they were drawn
  * for. The contrast suite reads the share from this string.
  */
-export const PANEL_DANGER_SURFACE = 'bg-[color-mix(in_srgb,var(--color-danger)_5%,var(--color-surface))] border border-danger/40 rounded-xl';
+export const PANEL_DANGER_SURFACE = 'bg-[color-mix(in_srgb,var(--color-danger)_5%,var(--color-surface))] border border-danger/40 rounded-card shadow-card inset-shadow-highlight';
 /**
  * Card padding by name.
  *
@@ -188,8 +195,12 @@ export const MODAL_PAD = 'px-card py-card-sm';
 export function sectionHeading(level, variant = 'default') {
     // The eyebrow reads the same at both levels. It is a label for the band under
     // it rather than a title, so it does not take the level's size at all.
+    //
+    // It is muted and semibold rather than faint and medium. A band label in the
+    // faintest gray read as metadata beside the stronger page title, so it
+    // stepped up once in weight and once in color.
     if (variant === 'eyebrow')
-        return 'text-xs font-medium uppercase tracking-wide text-faint';
+        return 'text-xs font-semibold uppercase tracking-wider text-muted';
     // Level 2 is the brand ramp's H3, which the guideline describes as the card
     // and group head this is. Its leading and tracking come with it: a --text-*
     // token sets font-size and nothing else, so the ratio has to be asked for by
@@ -215,8 +226,21 @@ export function sectionHeading(level, variant = 'default') {
  *
  * `border-e` and not `border-r`: the shell is the one place a right-to-left
  * locale flips, and a physical border leaves the rule on the wrong edge.
+ *
+ * The sidebar runs from the surface at the top a step toward ink at the foot,
+ * and its edge is a rule that fades in and out at its ends, drawn over a
+ * transparent border. The border keeps the column's width, and a forced
+ * colors scheme, which draws no gradient, paints that border in the system
+ * text color, so the edge is still there.
  */
-export const APP_SIDEBAR = 'h-full shrink-0 flex-col border-e border-line bg-surface transition-[width] duration-base ease-move';
+export const APP_SIDEBAR = 'relative h-full shrink-0 flex-col border-e border-transparent bg-surface bg-sidebar ' +
+    'transition-[width] duration-base ease-move';
+/**
+ * The faded edge of the sidebar, a 1px line laid over its transparent
+ * border. It sets a width of its own, so it stays out of APP_SIDEBAR, which
+ * holds no width at all.
+ */
+export const APP_SIDEBAR_EDGE = 'after:pointer-events-none after:absolute after:inset-y-0 after:-end-px after:w-px after:bg-rule-y';
 /**
  * The sidebar's two widths. Expanded is the 224px column every authed screen
  * had. The rail is the 56px icon column the theme had named and nothing used:
@@ -235,8 +259,16 @@ export const APP_SIDEBAR_RAIL = 'w-nav-rail';
 /**
  * The header bar. Its gutter is the page gutter, so the section name in the
  * header sits directly above the page title under it rather than 8px off.
+ *
+ * The surface is translucent, so the light at the top of the canvas carries
+ * up under it and the header reads as part of the page rather than a lid on
+ * it. Its rule fades out toward the end edge and stays solid where it meets
+ * the brand row's, so the two read as one line across the top. The rule sits
+ * over a transparent border, for the same reason as the sidebar's.
  */
-export const APP_HEADER = 'flex h-header shrink-0 items-center gap-2 border-b border-line bg-surface px-page-x';
+export const APP_HEADER = 'relative flex h-header shrink-0 items-center gap-2 border-b border-transparent bg-surface/70 px-page-x ' +
+    'after:pointer-events-none after:absolute after:inset-x-0 after:-bottom-px after:h-px after:bg-rule-end ' +
+    'rtl:after:-scale-x-100';
 /**
  * The sidebar's brand row. Exactly as tall as the header beside it: the two
  * meet at the top left corner and a 4px disagreement there reads as a seam.

package/dist/internal/panel.d.ts

@@ -52,8 +52,11 @@
  *
  * No vertical offset and no side. Both belong to placePanel, which measures
  * the room and puts the panel above the anchor when there is none below.
+ *
+ * shadow-popover is the rung above a card, so a menu opened from a card reads
+ * as lifted off it rather than as part of it.
  */
-export declare const PANEL_SURFACE = "absolute z-dropdown overflow-hidden rounded-xl border border-line-strong bg-surface text-fg shadow-2xl";
+export declare const PANEL_SURFACE = "absolute z-dropdown overflow-hidden rounded-xl border border-line-strong bg-surface text-fg shadow-popover inset-shadow-highlight";
 /**
  * The scrolling region inside it.
  *

package/dist/internal/panel.js

@@ -53,8 +53,11 @@ import { TOUCH_GROW } from './touch.js';
  *
  * No vertical offset and no side. Both belong to placePanel, which measures
  * the room and puts the panel above the anchor when there is none below.
+ *
+ * shadow-popover is the rung above a card, so a menu opened from a card reads
+ * as lifted off it rather than as part of it.
  */
-export const PANEL_SURFACE = 'absolute z-dropdown overflow-hidden rounded-xl border border-line-strong bg-surface text-fg shadow-2xl';
+export const PANEL_SURFACE = 'absolute z-dropdown overflow-hidden rounded-xl border border-line-strong bg-surface text-fg shadow-popover inset-shadow-highlight';
 /**
  * The scrolling region inside it.
  *

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';