@lyeve-labs/ui-kit 0.24.0 → 0.25.1

package/dist/components/Tabs.svelte

@@ -1,4 +1,12 @@
 <script lang="ts">
+  import {
+    SCROLL_EDGE,
+    SCROLL_EDGE_END,
+    SCROLL_EDGE_START,
+    scrollEdges,
+  } from '../internal/scroll-edges.js';
+  import { TOUCH_GROW } from '../internal/touch.js';
+
   let {
     items,
     active,
@@ -10,30 +18,126 @@
     class?: string;
     onchange: (id: string) => void;
   } = $props();
+
+  /*
+   * The strip scrolls sideways when the tabs do not fit, and says so.
+   *
+   * It neither wrapped nor scrolled: five tabs are 480px, and at 400px the
+   * fifth was past the edge with nothing on screen to say a fifth existed.
+   * Wrapping was the workaround, and a wrapped strip breaks the one line the
+   * underline runs along. A tab never breaks inside its own label.
+   *
+   * 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.
+   */
+  let scroller: HTMLElement | undefined = $state();
+  let moreBefore = $state(false);
+  let moreAfter = $state(false);
+
+  function measure() {
+    const el = scroller;
+    if (!el) return;
+    const edges = scrollEdges(el);
+    moreBefore = edges.before;
+    moreAfter = edges.after;
+  }
+
+  $effect(() => {
+    const el = scroller;
+    if (!el) return;
+    measure();
+    if (typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  });
+
+  /*
+   * The tab for the active id is brought into view when the id changes, so a
+   * page that opens on its fifth tab does not open on a strip that hides it.
+   * `nearest` on both axes moves the strip and nothing else; a test DOM has
+   * no layout and no scrollIntoView, and neither is an error here.
+   */
+  $effect(() => {
+    const el = scroller;
+    const id = active;
+    if (!el) return;
+    const tab = [...el.querySelectorAll<HTMLElement>('[role="tab"]')].find(
+      (t) => t.dataset.tab === id,
+    );
+    if (tab && typeof tab.scrollIntoView === 'function') {
+      tab.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }
+  });
+
+  /*
+   * 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
+   * edge it was cut off. min-h-control under a finger is the same height the
+   * buttons and fields beside the strip take there.
+   */
+  const TAB =
+    `${TOUCH_GROW} relative shrink-0 px-4 py-2.5 text-sm font-medium whitespace-nowrap ` +
+    'transition-colors outline-none ' +
+    'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand';
 </script>
 
-<div role="tablist" class="flex gap-0.5 border-b border-line {cls}">
-  {#each items as tab (tab.id)}
-    <button
-      type="button"
-      role="tab"
-      aria-selected={active === tab.id}
-      onclick={() => onchange(tab.id)}
-      class="relative px-4 py-2.5 text-sm font-medium transition-colors duration-150 whitespace-nowrap
-        {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-faint hover:text-fg'}"
-    >
-      {tab.label}
-      {#if tab.count !== undefined}
-        <span
-          class="ms-1.5 inline-flex items-center justify-center min-w-4.5 h-4.5 px-1
-            rounded-full text-[10px] font-semibold
-            {active === tab.id ? 'bg-brand/40 text-brand' : 'bg-surface-2 text-faint'}"
-        >
-          {tab.count}
-        </span>
-      {/if}
-    </button>
-  {/each}
+<div class="relative {cls}">
+  <div
+    bind:this={scroller}
+    onscroll={measure}
+    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)}
+      <button
+        type="button"
+        role="tab"
+        data-tab={tab.id}
+        aria-selected={active === tab.id}
+        onclick={() => onchange(tab.id)}
+        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-faint hover:text-fg'}"
+      >
+        {tab.label}
+        {#if tab.count !== undefined}
+          <!-- text-xs, not 10px: the count was the one text on a measured
+               page under the 12px floor, and it is the one figure a tab
+               carries. -->
+          <span
+            class="ms-1.5 inline-flex items-center justify-center min-w-4.5 h-4.5 px-1
+              rounded-full text-xs font-semibold
+              {active === tab.id ? 'bg-brand/40 text-brand' : 'bg-surface-2 text-faint'}"
+          >
+            {tab.count}
+          </span>
+        {/if}
+      </button>
+    {/each}
+  </div>
+
+  <!-- Outside the scroll box and out of the accessibility tree: a picture of
+       the scrollbar the phone will not draw, saying nothing the tablist has
+       not already said. -->
+  {#if moreBefore}
+    <div
+      aria-hidden="true"
+      data-print="hide"
+      data-testid="tabs-more-before"
+      class="{SCROLL_EDGE} {SCROLL_EDGE_START}"
+    ></div>
+  {/if}
+  {#if moreAfter}
+    <div
+      aria-hidden="true"
+      data-print="hide"
+      data-testid="tabs-more-after"
+      class="{SCROLL_EDGE} {SCROLL_EDGE_END}"
+    ></div>
+  {/if}
 </div>

package/dist/components/Tag.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { AccentTone } from '../internal/tone.js';
+  import { HIT_AREA } from '../internal/touch.js';
 
   interface Props {
     label: string;
@@ -37,7 +38,7 @@
       type="button"
       onclick={onremove}
       aria-label="Remove {label}"
-      class="ms-0.5 rounded transition-opacity hover:opacity-60 leading-none"
+      class="{HIT_AREA} ms-0.5 rounded transition-opacity hover:opacity-60 leading-none"
     >
       <svg
         width="10"

package/dist/components/ThemeToggle.svelte

@@ -15,6 +15,7 @@
    * implies the state.
    */
   import { Monitor, Moon, Sun } from '@lucide/svelte';
+  import { TOUCH_GROW } from '../internal/touch.js';
   import {
     THEME_PREFERENCES,
     getThemePreference,
@@ -81,7 +82,7 @@
   data-print="hide"
   data-theme-preference={preference}
   aria-label="Theme: {LABEL[preference]}. Switch to {LABEL[upcoming]}."
-  class="rounded-lg p-2 text-faint transition-colors duration-150 hover:bg-surface-2 hover:text-fg active:bg-line active:text-fg {klass}"
+  class="{TOUCH_GROW} rounded-lg p-2 text-faint transition-colors hover:bg-surface-2 hover:text-fg active:bg-line active:text-fg {klass}"
 >
   <!-- The icon shows the state the control is in, not the one it moves to. It
        showed the destination while the label named the same destination, which

package/dist/components/Toaster.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { toast } from '../stores/toast.svelte';
+  import { HIT_AREA } from '../internal/touch.js';
   import { TONE_GLYPH, statusTone, type StatusTone } from '../internal/tone.js';
+  import * as motion from '../motion.js';
 
   const styles: Record<StatusTone, { bar: string; icon: string }> = {
     neutral: { bar: 'bg-muted', icon: 'text-muted' },
@@ -25,8 +27,10 @@
 >
   {#each toast.items as t (t.id)}
     <div
+      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 animate-[toast-in_var(--duration-toast-in)_ease-out]"
+             bg-surface ps-0 pe-3 py-3 shadow-xl"
     >
       <span class="w-1 self-stretch shrink-0 {styles[statusTone(t.tone)].bar}"></span>
       <span
@@ -51,7 +55,7 @@
       <p class="flex-1 text-sm text-fg leading-snug">{t.message}</p>
       <button
         type="button"
-        class="shrink-0 rounded text-faint transition-colors duration-150 hover:text-fg outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+        class="{HIT_AREA} shrink-0 rounded text-faint transition-colors hover:text-fg outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
         aria-label="Dismiss"
         onclick={() => toast.dismiss(t.id)}
       >

package/dist/components/Toggle.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { FIELD_HINT } from '../internal/field.js';
+  import { HIT_AREA } from '../internal/touch.js';
   let {
     checked = $bindable(false),
     label,
@@ -79,14 +80,14 @@
     aria-label={label ?? 'Toggle'}
     {disabled}
     onclick={handleClick}
-    class="relative shrink-0 rounded-full border transition-colors duration-150 outline-none
+    class="{HIT_AREA} shrink-0 rounded-full border transition-colors outline-none
       focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1
       focus-visible:ring-offset-ink mt-0.5
       {track[size]}
       {checked ? trackPaint.on : trackPaint.off}"
   >
     <span
-      class="absolute rounded-full bg-fg shadow transition-transform
+      class="absolute rounded-full bg-fg shadow transition-transform duration-base
         {thumb[size]}
         {checked ? thumbOn[size] : 'translate-x-0'}"
     ></span>

package/dist/components/Tooltip.svelte

@@ -125,18 +125,23 @@
   {onkeydown}
 >
   {@render children()}
-  <!-- Always rendered, hidden by the `hidden` attribute rather than removed:
+  <!-- Always rendered, and shut with visibility rather than removed:
        aria-describedby resolves the text of a hidden element, so the trigger
-       keeps a stable target. Left hoverable rather than pointer-events-none, so
-       moving onto it does not dismiss it, which SC 1.4.13 also requires. -->
+       keeps a stable target. Visibility is one of the properties Tailwind's
+       `transition` moves, discretely, so the hint fades and settles on the way
+       in and is invisible only once it has faded out. Left hoverable rather
+       than pointer-events-none, so moving onto it does not dismiss it, which
+       SC 1.4.13 also requires. -->
   <span
     {id}
     role={describe ? 'tooltip' : undefined}
     aria-hidden={describe ? undefined : 'true'}
-    hidden={!visible}
     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-xl
+      transition {visible
+      ? 'duration-base ease-enter'
+      : 'invisible scale-[0.96] opacity-0 duration-fast ease-exit'}"
   >
     {text}
   </span>

package/dist/components/TreeView.svelte

@@ -270,7 +270,7 @@
         scan, so no rule is generated and every row draws flush left.
       -->
       <div
-        class="flex w-full items-center gap-2 rounded-md py-1.5 pe-2 text-sm transition-colors duration-150 {rowPaint(
+        class="flex w-full items-center gap-2 rounded-md py-1.5 pe-2 text-sm transition-colors {rowPaint(
           selected === node.id,
           !!node.disabled,
         )}"
@@ -283,7 +283,7 @@
           >
             <ChevronRight
               size={14}
-              class="transition-transform duration-150 {open ? 'rotate-90' : 'rtl:rotate-180'}"
+              class="transition-transform duration-base {open ? 'rotate-90' : 'rtl:rotate-180'}"
             />
           </span>
         {:else}

package/dist/components/dialog/Dialog.svelte

@@ -2,18 +2,19 @@
   /**
    * Dialog - modal frame component.
    *
-   * Handles: focus trap, ESC to close, click-outside to close,
-   * scale+fade animation, stacked z-indexing, portal to body.
+   * Handles: focus trap, ESC to close, click-outside to close, the entrance
+   * and exit through the kit's motion presets, stacked z-indexing, portal to
+   * body.
    *
    * Rendered by DialogContainer for each entry in the dialog stack.
    * Not meant to be used directly - use openDialog() from dialog-manager.
    */
   import { X } from '@lucide/svelte';
-  import { onMount } from 'svelte';
   import type { Snippet } from 'svelte';
   import type { DialogEntry } from './types.js';
   import { sizeClass } from './types.js';
   import { overlay } from '../../internal/overlay.js';
+  import * as motion from '../../motion.js';
   import { closeDialog, dismissDialog } from './dialog-manager.svelte';
   import ConfirmDialog from './ConfirmDialog.svelte';
 
@@ -25,13 +26,6 @@
     children?: Snippet;
   } = $props();
 
-  // ──────────────────────────────────────────────────────
-  // Animation state
-  // ──────────────────────────────────────────────────────
-
-  let visible = $state(false);
-  let exiting = $state(false);
-
   // Stacked offset: each deeper dialog shrinks, shifts back and rises
   let offset = $derived(entry.depth);
 
@@ -47,12 +41,9 @@
 
   // Focus entry, the Tab trap, the body scroll lock and focus restore all come
   // from `use:overlay` on the panel below, which is the same implementation
-  // Modal and Drawer use. This is only the enter animation.
-  onMount(() => {
-    requestAnimationFrame(() => {
-      visible = true;
-    });
-  });
+  // Modal and Drawer use. The entrance and the exit are the same presets too:
+  // removing the entry from the stack plays the exit before the element goes,
+  // so nothing here waits on a timer to match a duration written elsewhere.
 
   // ──────────────────────────────────────────────────────
   // Handlers
@@ -74,16 +65,11 @@
     }
   }
 
-  async function handleDismiss(): Promise<void> {
-    exiting = true;
-    // Wait for exit animation
-    await new Promise((r) => setTimeout(r, 200));
+  function handleDismiss(): void {
     dismissDialog(entry.id);
   }
 
-  async function handleClose(value?: unknown): Promise<void> {
-    exiting = true;
-    await new Promise((r) => setTimeout(r, 200));
+  function handleClose(value?: unknown): void {
     closeDialog(value, entry.id);
   }
 </script>
@@ -107,9 +93,8 @@
   <!-- Backdrop -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    class="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-200"
-    class:opacity-0={!visible || exiting}
-    class:opacity-100={visible && !exiting}
+    transition:motion.scrim|global
+    class="absolute inset-0 bg-black/60 backdrop-blur-sm"
     onclick={handleBackdropClick}
     onkeydown={(e: KeyboardEvent) => {
       if (e.key === 'Escape' && !entry.options.persistent) handleDismiss();
@@ -122,14 +107,12 @@
   <div
     bind:this={dialogEl}
     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
-			transition-all duration-200 ease-out
+			transition-transform duration-slow
 			focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
-    class:opacity-0={!visible || exiting}
-    class:opacity-100={visible && !exiting}
-    style="transform: scale({visible && !exiting ? 1 - offset * 0.03 : 0.95}) translateY({offset *
-      16}px);
+    style="transform: scale({1 - offset * 0.03}) translateY({offset * 16}px);
 			transform-origin: center;"
     role="dialog"
     aria-modal="true"
@@ -158,7 +141,7 @@
         {#if !entry.options.persistent}
           <button
             class="inline-flex items-center justify-center w-8 h-8 -me-2 rounded-lg
-						text-muted hover:text-fg hover:bg-surface-2 transition-colors duration-150 shrink-0"
+						text-muted hover:text-fg hover:bg-surface-2 transition-colors shrink-0"
             onclick={() => handleClose()}
             aria-label="Close"
           >

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { default as DescriptionList } from './components/DescriptionList.svelte'
 export { default as Toolbar } from './components/Toolbar.svelte';
 export { default as TreeView } from './components/TreeView.svelte';
 export type { CellFit } from './components/Table.svelte';
+export type { SidebarState } from './components/AppShell.svelte';
 export type { PageWidth, SectionVariant } from './internal/layout.js';
 export type { TreeNode, TriState } from './internal/tree.js';
 export { default as Button } from './components/Button.svelte';
@@ -89,4 +90,6 @@ export type { ConfirmOptions } from './components/dialog/dialog-manager.svelte.j
 export type { DialogOptions, DialogEntry, DialogSize } from './components/dialog/types.js';
 export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
-export declare const VERSION = "0.24.0";
+export * as motion from './motion.js';
+export type { Rung as MotionRung, Curve as MotionCurve } from './motion.js';
+export declare const VERSION = "0.25.1";

package/dist/index.js

@@ -93,7 +93,13 @@ export { openDialog, closeDialog, dismissDialog, dismissAllDialogs, confirm, set
 // ── Utilities ──────────────────────────────────────────────────────────────
 export { cn } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, toggleTheme, watchSystemTheme, THEME_PREFERENCES, } from './utils/theme.js';
+// ── Motion ─────────────────────────────────────────────────────────────────
+// The entrances and exits as Svelte transitions, for a surface a consumer
+// builds that the kit does not ship: `transition:motion.popover`,
+// `animate:motion.reorder`. They read the duration and easing tokens, so a
+// page that uses them cannot drift from the components beside it.
+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.24.0';
+export const VERSION = '0.25.1';

package/dist/internal/choice.js

@@ -15,6 +15,7 @@
  * Not exported from the package entry point - this is an implementation detail.
  */
 import { FIELD_HINT, FIELD_LABEL } from './field.js';
+import { HIT_AREA } from './touch.js';
 /**
  * The box and the icon slot share one size map, so the label text starts at the
  * same x whether or not an option carries an icon. 3.5 is 14px, 4 is 16px and 5
@@ -25,8 +26,14 @@ const CHOICE_SQUARE = {
     md: 'h-4 w-4',
     lg: 'h-5 w-5',
 };
-const WRAP_INLINE = 'inline-flex select-none items-start gap-2.5';
-const WRAP_CARD = 'flex select-none items-start gap-2.5 rounded-lg border p-3 transition-colors duration-150';
+/**
+ * The inline wrapper carries the hit box, not the box inside it. A click
+ * anywhere on the label reaches the input, so growing the label's hit area
+ * under a finger is what makes a 16px checkbox a 44px target without drawing
+ * it any larger. A card is its own surface and already clears the size.
+ */
+const WRAP_INLINE = `${HIT_AREA} inline-flex select-none items-start gap-2.5`;
+const WRAP_CARD = 'flex select-none items-start gap-2.5 rounded-lg border p-3 transition-colors';
 /**
  * The clickable wrapper. Card is a bordered option the whole surface of which
  * is the target.
@@ -55,7 +62,7 @@ export function choiceWrap(variant, checked, disabled) {
  * instead, and `peer` is what lets the box below read its focus state.
  */
 export const CHOICE_INPUT = 'peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed';
-const BOX_BASE = 'pointer-events-none flex shrink-0 items-center justify-center transition-colors duration-150';
+const BOX_BASE = 'pointer-events-none flex shrink-0 items-center justify-center transition-colors';
 /**
  * The painted box or circle. Square for a checkbox, round for a radio, sized by
  * ChoiceSize.

package/dist/internal/field.js

@@ -34,12 +34,12 @@ export const FIELD_ERROR = 'text-xs text-danger';
  * CONTROL_SEGMENT already pair the two correctly; these did half of it.
  */
 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 duration-150 outline-none ' +
+    'placeholder:text-faint transition-colors outline-none ' +
     '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 duration-150 outline-none ' +
+    'placeholder:text-faint transition-colors outline-none ' +
     'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand ' +
     'disabled:opacity-50 disabled:cursor-not-allowed';
 /**
@@ -88,7 +88,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 duration-150';
+    'text-sm text-fg transition-colors';
 /** 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

@@ -139,7 +139,16 @@ 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.
  */
-export declare const APP_SIDEBAR = "h-full w-sidebar shrink-0 flex-col border-e border-line bg-surface";
+export declare const APP_SIDEBAR = "h-full shrink-0 flex-col border-e border-line bg-surface";
+/**
+ * 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:
+ * at 768px the expanded column left 496px for the page, and a flow editor with
+ * two docked panes had no canvas at all. The shell picks between them; the
+ * width is not part of APP_SIDEBAR so the aside cannot carry both.
+ */
+export declare const APP_SIDEBAR_WIDE = "w-sidebar";
+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.

package/dist/internal/layout.js

@@ -163,7 +163,16 @@ 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.
  */
-export const APP_SIDEBAR = 'h-full w-sidebar shrink-0 flex-col border-e border-line bg-surface';
+export const APP_SIDEBAR = 'h-full shrink-0 flex-col border-e border-line bg-surface';
+/**
+ * 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:
+ * at 768px the expanded column left 496px for the page, and a flow editor with
+ * two docked panes had no canvas at all. The shell picks between them; the
+ * width is not part of APP_SIDEBAR so the aside cannot carry both.
+ */
+export const APP_SIDEBAR_WIDE = 'w-sidebar';
+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.

package/dist/internal/panel.d.ts

@@ -125,10 +125,19 @@ export declare function panelOption(state: {
 }): string;
 /** Marks the scrolling region inside a surface, so placePanel can find it. */
 export declare const PANEL_LIST_ATTR = "data-panel-list";
+/**
+ * The attribute's value when the region is capped by the room alone.
+ *
+ * The token cap is sized for a list of rows, and a calendar is not one: six
+ * weeks of days stand taller than the token, so under it every month would
+ * scroll by a few rows. Such a region still takes the room as its cap, so
+ * inside a short modal it scrolls rather than being cut.
+ */
+export declare const PANEL_LIST_UNCAPPED = "uncapped";
 /** The classes that put the surface under its anchor. */
-export declare const PANEL_BELOW = "top-full mt-1";
+export declare const PANEL_BELOW = "top-full mt-1 origin-top";
 /** The classes that put the surface over its anchor. */
-export declare const PANEL_ABOVE = "bottom-full mb-1";
+export declare const PANEL_ABOVE = "bottom-full mb-1 origin-bottom";
 /**
  * Svelte action for a panel surface. Puts it on the side of its anchor that
  * has room, and stops its list running past whatever clips it.
@@ -145,7 +154,8 @@ export declare const PANEL_ABOVE = "bottom-full mb-1";
  * under the modal's scroll edge that nobody can reach without scrolling
  * first. Whichever side wins, the list's max-height is the smaller of the
  * token cap and the room on that side, written as a CSS min so the token stays
- * the cap without this code knowing its value.
+ * the cap without this code knowing its value. A region marked uncapped takes
+ * the room alone.
  *
  * Measured on mount, on resize and on scroll of the clipping ancestor, since
  * each moves the anchor relative to the edge. Scroll does not bubble, so the

package/dist/internal/panel.js

@@ -73,7 +73,7 @@ export const PANEL_LIST = 'max-h-panel-max overflow-y-auto overscroll-contain px
  * the active ring follow the row's own corners.
  */
 export const PANEL_OPTION = 'flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-start text-sm ' +
-    'transition-colors duration-150 outline-none hover:bg-surface-2 ' +
+    'transition-colors outline-none hover:bg-surface-2 ' +
     'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand';
 /**
  * The active descendant.
@@ -134,10 +134,19 @@ export function panelOption(state) {
 }
 /** Marks the scrolling region inside a surface, so placePanel can find it. */
 export const PANEL_LIST_ATTR = 'data-panel-list';
+/**
+ * The attribute's value when the region is capped by the room alone.
+ *
+ * The token cap is sized for a list of rows, and a calendar is not one: six
+ * weeks of days stand taller than the token, so under it every month would
+ * scroll by a few rows. Such a region still takes the room as its cap, so
+ * inside a short modal it scrolls rather than being cut.
+ */
+export const PANEL_LIST_UNCAPPED = 'uncapped';
 /** The classes that put the surface under its anchor. */
-export const PANEL_BELOW = 'top-full mt-1';
+export const PANEL_BELOW = 'top-full mt-1 origin-top';
 /** The classes that put the surface over its anchor. */
-export const PANEL_ABOVE = 'bottom-full mb-1';
+export const PANEL_ABOVE = 'bottom-full mb-1 origin-bottom';
 /**
  * Breathing room between the panel and the edge it is measured against, so a
  * panel that fits exactly does not sit on the edge of the window or the modal.
@@ -183,7 +192,8 @@ function swap(node, remove, add) {
  * under the modal's scroll edge that nobody can reach without scrolling
  * first. Whichever side wins, the list's max-height is the smaller of the
  * token cap and the room on that side, written as a CSS min so the token stays
- * the cap without this code knowing its value.
+ * the cap without this code knowing its value. A region marked uncapped takes
+ * the room alone.
  *
  * Measured on mount, on resize and on scroll of the clipping ancestor, since
  * each moves the anchor relative to the edge. Scroll does not bubble, so the
@@ -221,7 +231,8 @@ export function placePanel(node) {
         // taken out of the room so the whole panel fits and not only its list.
         const chrome = Math.max(0, node.offsetHeight - list.offsetHeight);
         const room = Math.max(0, Math.round((flip ? above : below) - chrome));
-        list.style.maxHeight = `min(var(--spacing-panel-max), ${room}px)`;
+        const capped = list.getAttribute(PANEL_LIST_ATTR) !== PANEL_LIST_UNCAPPED;
+        list.style.maxHeight = capped ? `min(var(--spacing-panel-max), ${room}px)` : `${room}px`;
     }
     measure();
     const scroller = clip ?? window;