@lyeve-labs/ui-kit 0.23.3 → 0.25.0

package/README.md

@@ -168,6 +168,48 @@ the import:
 }
 ```
 
+## Motion
+
+Every component moves on the same four durations and three curves, declared
+in `styles.css` beside the palette:
+
+| Token                 | Value                            | For                                                                                                            |
+| --------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `--duration-fast`     | 120ms                            | a state change in place: colour, opacity, border, shadow, focus                                                |
+| `--duration-base`     | 200ms                            | movement in place (a knob, a chevron, a collapse) and a small surface arriving (menu, popover, tooltip, toast) |
+| `--duration-slow`     | 320ms                            | a large surface arriving (dialog, drawer)                                                                      |
+| `--duration-progress` | 500ms                            | a value moving (a progress bar's width)                                                                        |
+| `--ease-enter`        | `cubic-bezier(0.22, 1, 0.36, 1)` | arriving: starts fast and settles                                                                              |
+| `--ease-exit`         | `cubic-bezier(0.32, 0, 0.67, 0)` | leaving: starts slow and accelerates away                                                                      |
+| `--ease-move`         | `cubic-bezier(0.65, 0, 0.35, 1)` | changing in place                                                                                              |
+
+An exit runs one rung faster than its entrance, on the exit curve. The
+`transition-*` utilities default to the fast rung and the move curve, so
+`transition-colors` on its own is complete; `duration-base`, `duration-slow`,
+`duration-progress`, `ease-enter`, `ease-exit` and `ease-move` are utilities
+for the rest. A surface of your own that mounts and unmounts enters and
+leaves through the same presets the kit's overlays use:
+
+```svelte
+<script>
+  import { motion } from '@lyeve-labs/ui-kit';
+</script>
+
+{#if open}
+  <div transition:motion.popover>...</div>
+{/if}
+
+{#each items as item (item.id)}
+  <li transition:motion.toast animate:motion.reorder>...</li>
+{/each}
+```
+
+`dialog`, `scrim`, `drawer`, `popover` and `toast` read the tokens at run
+time, so retuning a token retunes them, and every one of them plays nothing
+for a reader who has asked for reduced motion. Do not write `duration-150`,
+`ease-out` or `transition-all` beside a kit class: they are a fifth speed and
+a fourth curve, and the kit's own test suite refuses them.
+
 ## Local development
 
 ```bash

package/dist/components/AccordionItem.svelte

@@ -34,7 +34,7 @@
       aria-expanded={open}
       aria-controls={panelId}
       class="flex w-full items-center justify-between px-5 py-4 text-start text-sm font-medium
-        text-fg transition-colors duration-150 hover:bg-surface-2/50
+        text-fg transition-colors hover:bg-surface-2/50
         outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand
         {open ? 'bg-surface-2/40' : ''}"
     >
@@ -48,9 +48,7 @@
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
-        class="shrink-0 text-faint transition-transform duration-200 ease-out {open
-          ? 'rotate-180'
-          : ''}"
+        class="shrink-0 text-faint transition-transform duration-base {open ? 'rotate-180' : ''}"
         aria-hidden="true"
       >
         <path d="M6 9l6 6 6-6" />
@@ -66,7 +64,7 @@
     clipped rather than spilling while the row grows.
   -->
   <div
-    class="grid transition-[grid-template-rows] duration-[var(--duration-collapse)] ease-out {open
+    class="grid transition-[grid-template-rows] duration-base {open
       ? 'grid-rows-[1fr]'
       : 'grid-rows-[0fr]'}"
   >

package/dist/components/AccountMenu.svelte

@@ -17,6 +17,7 @@
    * to sign out.
    */
   import type { Snippet } from 'svelte';
+  import { TOUCH_GROW } from '../internal/touch.js';
   import { ChevronDown } from '@lucide/svelte';
   import type { AccentTone } from '../internal/tone.js';
 
@@ -98,7 +99,7 @@
 
 <details bind:this={root} class="group relative {klass}">
   <summary
-    class="flex cursor-pointer list-none items-center gap-2 rounded-lg px-2 py-1.5 outline-none transition-colors duration-150 hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+    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
       class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold {AVATAR_TONE[
@@ -111,7 +112,7 @@
     <span class="hidden min-w-0 max-w-[10rem] truncate text-sm text-fg sm:block">{name}</span>
     <ChevronDown
       size={14}
-      class="shrink-0 text-faint transition-transform duration-150 group-open:rotate-180"
+      class="shrink-0 text-faint transition-transform duration-base group-open:rotate-180"
     />
   </summary>
 
@@ -120,7 +121,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 flex-col gap-1 rounded-xl border border-line bg-surface p-2 shadow-2xl"
+    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"
   >
     <div class="border-b border-line px-2 pb-2">
       <p class="truncate text-sm font-medium text-fg">{name}</p>

package/dist/components/Alert.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { HIT_AREA } from '../internal/touch.js';
   import {
     TONE_GLYPH,
     statusTone,
@@ -69,7 +70,7 @@
     <button
       type="button"
       onclick={ondismiss}
-      class="shrink-0 text-faint transition-colors duration-150 hover:text-fg"
+      class="{HIT_AREA} shrink-0 text-faint transition-colors hover:text-fg"
       aria-label="Dismiss"
     >
       <svg

package/dist/components/AppShell.svelte

@@ -1,3 +1,16 @@
+<script lang="ts" module>
+  /**
+   * What the sidebar snippets are told about their column. `rail` is true
+   * while the sidebar is the 56px icon rail, so a SidebarNav takes it as
+   * `collapsed`, a brand row renders its mark without the wordmark, and a
+   * footer band renders what fits. A snippet that ignores the argument still
+   * renders; it is simply drawn at 56px and clipped.
+   */
+  export interface SidebarState {
+    rail: boolean;
+  }
+</script>
+
 <script lang="ts">
   /**
    * The authed application frame: the sidebar, the header bar and the content
@@ -23,7 +36,14 @@
   import type { Snippet } from 'svelte';
   import { Menu, PanelLeft, PanelLeftClose } from '@lucide/svelte';
   import { overlay } from '../internal/overlay.js';
-  import { APP_BRAND, APP_HEADER, APP_SIDEBAR, APP_SIDEBAR_BAND } from '../internal/layout.js';
+  import {
+    APP_BRAND,
+    APP_HEADER,
+    APP_SIDEBAR,
+    APP_SIDEBAR_BAND,
+    APP_SIDEBAR_RAIL,
+    APP_SIDEBAR_WIDE,
+  } from '../internal/layout.js';
 
   interface Props {
     /** The current section, shown in the header. Not a heading: the page owns its h1. */
@@ -47,16 +67,41 @@
      * decision. Nothing persists it for you.
      */
     collapsed?: boolean;
+    /**
+     * Whether the header bar is put away, above md: only. Below md: the header
+     * carries the hamburger, which is the only way into the drawer, so the bar
+     * stays whatever this says.
+     *
+     * For a page that owns the viewport and wants all of it: a canvas in a
+     * focus mode. The page asking for it must keep a way back on screen, since
+     * the shell's own controls go with the bar. Bindable for the same reason
+     * `collapsed` is: where it is remembered is the app's decision.
+     */
+    headerHidden?: boolean;
+    /**
+     * Narrows the sidebar to the icon rail at every width above md:.
+     *
+     * The rail is automatic between md: and lg:, where the 224px column left a
+     * 768px window 496px for the page. A page that owns the viewport - a
+     * canvas, a split pane - asks for it at every width with this; the labels
+     * still come back under a pointer or the keyboard. Below md: the sidebar
+     * is the drawer whatever this says.
+     */
+    rail?: boolean;
     /** The sidebar landmark's accessible name. */
     sidebarLabel?: string;
     /** The drawer's accessible name, below md: where the sidebar is a dialog. */
     drawerLabel?: string;
-    /** The product mark, in the sidebar's brand row. */
-    brand?: Snippet;
-    /** The navigation itself. A SidebarNav, given `class="min-h-0 flex-1"`. */
-    nav?: Snippet;
+    /** The product mark, in the sidebar's brand row. Told whether the column is the rail. */
+    brand?: Snippet<[SidebarState]>;
+    /**
+     * The navigation itself. A SidebarNav, given `class="min-h-0 flex-1"` and
+     * `collapsed={rail}` from the argument, so the rail shows icons and the
+     * labels return when the rail opens.
+     */
+    nav?: Snippet<[SidebarState]>;
     /** A status band at the foot of the sidebar. Not the account: that is header work. */
-    sidebarFooter?: Snippet;
+    sidebarFooter?: Snippet<[SidebarState]>;
     /** The right end of the header bar. The theme toggle and the account menu live here. */
     headerActions?: Snippet;
     class?: string;
@@ -68,6 +113,8 @@
     navOpen = $bindable(false),
     collapsible = false,
     collapsed = $bindable(false),
+    headerHidden = $bindable(false),
+    rail = false,
     sidebarLabel = 'Sidebar',
     drawerLabel = 'Navigation',
     brand,
@@ -84,24 +131,61 @@
    * anyone whose JavaScript never arrives.
    */
   let isMobile = $state(false);
+  /** md: to lg:, where the expanded column costs the page more than it gives. */
+  let isNarrow = $state(false);
   const drawerOpen = $derived(isMobile && navOpen);
   /**
    * Collapsing is a desktop gesture. Below md: the same aside is the drawer,
    * so honouring `collapsed` there would leave the hamburger opening nothing.
    */
   const railHidden = $derived(collapsible && collapsed && !isMobile);
+  /** Same rule for the header: a desktop gesture, and the drawer's button stays. */
+  const barHidden = $derived(headerHidden && !isMobile);
+
+  /**
+   * 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.
+   * 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);
 
   $effect(() => {
-    const mq = window.matchMedia('(max-width: 767px)');
+    const mobile = window.matchMedia('(max-width: 767px)');
+    const narrow = window.matchMedia('(min-width: 768px) and (max-width: 1023px)');
     const sync = () => {
-      isMobile = mq.matches;
-      if (!mq.matches) navOpen = false;
+      isMobile = mobile.matches;
+      isNarrow = narrow.matches && !mobile.matches;
+      if (!mobile.matches) navOpen = false;
+      railOpen = false;
     };
     sync();
-    mq.addEventListener('change', sync);
-    return () => mq.removeEventListener('change', sync);
+    mobile.addEventListener('change', sync);
+    narrow.addEventListener('change', sync);
+    return () => {
+      mobile.removeEventListener('change', sync);
+      narrow.removeEventListener('change', sync);
+    };
   });
 
+  /** Focus moving from one rail link to the next stays inside; only leaving the rail closes it. */
+  function onRailFocusOut(event: FocusEvent) {
+    const next = event.relatedTarget;
+    if (
+      next instanceof Node &&
+      event.currentTarget instanceof Node &&
+      event.currentTarget.contains(next)
+    )
+      return;
+    railOpen = false;
+  }
+
   /** The backdrop is the pointer's way out of the drawer. A keyboard has none. */
   function onWindowKeydown(event: KeyboardEvent) {
     if (event.key === 'Escape' && navOpen) navOpen = false;
@@ -154,55 +238,77 @@
       aria-label={drawerLabel}
       use:overlay
     >
-      {@render sidebar(false)}
+      {@render sidebar(false, false)}
+    </div>
+  {:else if railMode}
+    <!--
+      The column keeps the rail's width whatever the aside inside it does. The
+      aside is taken out of the column's flow so that, opened, it lies over
+      the page at the dropdown layer instead of pushing it 168px sideways and
+      back on every pass of the pointer.
+    -->
+    <div
+      data-testid="app-rail"
+      role="presentation"
+      class="relative hidden {APP_SIDEBAR_RAIL} shrink-0 md:block"
+      onpointerenter={() => (railOpen = true)}
+      onpointerleave={() => (railOpen = false)}
+      onfocusin={() => (railOpen = true)}
+      onfocusout={onRailFocusOut}
+    >
+      <div class="absolute inset-y-0 start-0 z-dropdown flex {railOpen ? 'shadow-2xl' : ''}">
+        {@render sidebar(isMobile, railIcons)}
+      </div>
     </div>
   {:else if !railHidden}
     <div class="hidden md:flex">
-      {@render sidebar(isMobile)}
+      {@render sidebar(isMobile, false)}
     </div>
   {/if}
 
   <div class="flex min-w-0 flex-1 flex-col">
-    <header data-print="hide" class={APP_HEADER}>
-      <div class="flex min-w-0 flex-1 items-center gap-2">
-        {#if isMobile}
-          <!-- 44px square, the smallest tap target SC 2.5.5 accepts. The -ms-2
+    {#if !barHidden}
+      <header data-print="hide" class={APP_HEADER}>
+        <div class="flex min-w-0 flex-1 items-center gap-2">
+          {#if isMobile}
+            <!-- 44px square, the smallest tap target SC 2.5.5 accepts. The -ms-2
                pulls it back to the header's own gutter so the row it starts
                still lines up with the page content below. -->
-          <button
-            type="button"
-            class="-ms-2 flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-muted outline-none transition-colors duration-150 hover:bg-surface-2 hover:text-fg active:bg-line active:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
-            aria-label={navOpen ? 'Close navigation' : 'Open navigation'}
-            aria-expanded={navOpen}
-            onclick={() => (navOpen = !navOpen)}
-          >
-            <Menu size={20} />
-          </button>
-        {:else if collapsible}
-          <!-- Same square and the same gutter as the hamburger it replaces, so
+            <button
+              type="button"
+              class="-ms-2 flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-muted outline-none transition-colors hover:bg-surface-2 hover:text-fg active:bg-line active:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+              aria-label={navOpen ? 'Close navigation' : 'Open navigation'}
+              aria-expanded={navOpen}
+              onclick={() => (navOpen = !navOpen)}
+            >
+              <Menu size={20} />
+            </button>
+          {:else if collapsible}
+            <!-- Same square and the same gutter as the hamburger it replaces, so
                the header's first control sits in one place at every width. -->
-          <button
-            type="button"
-            data-testid="app-sidebar-toggle"
-            class="-ms-2 flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-muted outline-none transition-colors duration-150 hover:bg-surface-2 hover:text-fg active:bg-line active:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
-            aria-label={collapsed ? 'Show sidebar' : 'Hide sidebar'}
-            aria-expanded={!collapsed}
-            onclick={() => (collapsed = !collapsed)}
-          >
-            {#if collapsed}<PanelLeft size={18} />{:else}<PanelLeftClose size={18} />{/if}
-          </button>
-        {/if}
-        {#if section}
-          <span data-testid="app-section" class="truncate text-sm font-semibold text-fg">
-            {section}
-          </span>
-        {/if}
-      </div>
+            <button
+              type="button"
+              data-testid="app-sidebar-toggle"
+              class="-ms-2 flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-muted outline-none transition-colors hover:bg-surface-2 hover:text-fg active:bg-line active:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+              aria-label={collapsed ? 'Show sidebar' : 'Hide sidebar'}
+              aria-expanded={!collapsed}
+              onclick={() => (collapsed = !collapsed)}
+            >
+              {#if collapsed}<PanelLeft size={18} />{:else}<PanelLeftClose size={18} />{/if}
+            </button>
+          {/if}
+          {#if section}
+            <span data-testid="app-section" class="truncate text-sm font-semibold text-fg">
+              {section}
+            </span>
+          {/if}
+        </div>
 
-      {#if headerActions}
-        <div class="flex shrink-0 items-center gap-1">{@render headerActions()}</div>
-      {/if}
-    </header>
+        {#if headerActions}
+          <div class="flex shrink-0 items-center gap-1">{@render headerActions()}</div>
+        {/if}
+      </header>
+    {/if}
 
     <!-- tabindex -1 is what makes the skip link work. A fragment link scrolls
          to its target and moves focus to it only if the target can hold focus,
@@ -222,22 +328,28 @@
   </div>
 </div>
 
-{#snippet sidebar(hidden: boolean)}
+{#snippet sidebar(hidden: boolean, rail: boolean)}
+  <!-- The bands clip on the rail: a brand row that ignores the argument still
+       holds its wordmark, and 56px of it is better than the wordmark running
+       out over the page. -->
   <aside
     aria-label={sidebarLabel}
     data-print="hide"
-    class="{APP_SIDEBAR} flex"
+    data-testid="app-sidebar"
+    class="{APP_SIDEBAR} {rail ? APP_SIDEBAR_RAIL : APP_SIDEBAR_WIDE} flex"
     inert={hidden}
     aria-hidden={hidden ? 'true' : undefined}
   >
     {#if brand}
-      <div class={APP_BRAND}>{@render brand()}</div>
+      <div class="{APP_BRAND} {rail ? 'overflow-hidden' : ''}">{@render brand({ rail })}</div>
     {/if}
     {#if nav}
-      {@render nav()}
+      {@render nav({ rail })}
     {/if}
     {#if sidebarFooter}
-      <div class={APP_SIDEBAR_BAND}>{@render sidebarFooter()}</div>
+      <div class="{APP_SIDEBAR_BAND} {rail ? 'overflow-hidden' : ''}">
+        {@render sidebarFooter({ rail })}
+      </div>
     {/if}
   </aside>
 {/snippet}

package/dist/components/AppShell.svelte.d.ts

@@ -1,3 +1,13 @@
+/**
+ * What the sidebar snippets are told about their column. `rail` is true
+ * while the sidebar is the 56px icon rail, so a SidebarNav takes it as
+ * `collapsed`, a brand row renders its mark without the wordmark, and a
+ * footer band renders what fits. A snippet that ignores the argument still
+ * renders; it is simply drawn at 56px and clipped.
+ */
+export interface SidebarState {
+    rail: boolean;
+}
 /**
    * The authed application frame: the sidebar, the header bar and the content
    * column, owned once so three apps cannot each invent their own.
@@ -42,21 +52,46 @@ interface Props {
      * decision. Nothing persists it for you.
      */
     collapsed?: boolean;
+    /**
+     * Whether the header bar is put away, above md: only. Below md: the header
+     * carries the hamburger, which is the only way into the drawer, so the bar
+     * stays whatever this says.
+     *
+     * For a page that owns the viewport and wants all of it: a canvas in a
+     * focus mode. The page asking for it must keep a way back on screen, since
+     * the shell's own controls go with the bar. Bindable for the same reason
+     * `collapsed` is: where it is remembered is the app's decision.
+     */
+    headerHidden?: boolean;
+    /**
+     * Narrows the sidebar to the icon rail at every width above md:.
+     *
+     * The rail is automatic between md: and lg:, where the 224px column left a
+     * 768px window 496px for the page. A page that owns the viewport - a
+     * canvas, a split pane - asks for it at every width with this; the labels
+     * still come back under a pointer or the keyboard. Below md: the sidebar
+     * is the drawer whatever this says.
+     */
+    rail?: boolean;
     /** The sidebar landmark's accessible name. */
     sidebarLabel?: string;
     /** The drawer's accessible name, below md: where the sidebar is a dialog. */
     drawerLabel?: string;
-    /** The product mark, in the sidebar's brand row. */
-    brand?: Snippet;
-    /** The navigation itself. A SidebarNav, given `class="min-h-0 flex-1"`. */
-    nav?: Snippet;
+    /** The product mark, in the sidebar's brand row. Told whether the column is the rail. */
+    brand?: Snippet<[SidebarState]>;
+    /**
+     * The navigation itself. A SidebarNav, given `class="min-h-0 flex-1"` and
+     * `collapsed={rail}` from the argument, so the rail shows icons and the
+     * labels return when the rail opens.
+     */
+    nav?: Snippet<[SidebarState]>;
     /** A status band at the foot of the sidebar. Not the account: that is header work. */
-    sidebarFooter?: Snippet;
+    sidebarFooter?: Snippet<[SidebarState]>;
     /** The right end of the header bar. The theme toggle and the account menu live here. */
     headerActions?: Snippet;
     class?: string;
     children: Snippet;
 }
-declare const AppShell: import("svelte").Component<Props, {}, "navOpen" | "collapsed">;
+declare const AppShell: import("svelte").Component<Props, {}, "navOpen" | "collapsed" | "headerHidden">;
 type AppShell = ReturnType<typeof AppShell>;
 export default AppShell;

package/dist/components/Autocomplete.svelte

@@ -49,6 +49,7 @@
     panelOption,
     placePanel,
   } from '../internal/panel.js';
+  import * as motion from '../motion.js';
 
   interface Props {
     /** The chosen option's value. Empty for none. */
@@ -216,7 +217,7 @@
         type="button"
         aria-label="Clear"
         onclick={clear}
-        class="absolute end-2.5 top-1/2 -mx-1.5 -translate-y-1/2 p-1.5 text-faint transition-colors duration-150 hover:text-fg"
+        class="absolute end-2.5 top-1/2 -mx-1.5 -translate-y-1/2 p-1.5 text-faint transition-colors hover:text-fg"
       >
         <svg
           width="12"
@@ -234,7 +235,7 @@
     {/if}
 
     {#if box.open}
-      <div use:placePanel class="{PANEL_SURFACE} w-full">
+      <div use:placePanel transition:motion.popover class="{PANEL_SURFACE} w-full">
         <div class={PANEL_LIST} data-panel-list use:panel {...box.listAttrs}>
           {#each rows as option, index (option.value)}
             {@const isSelected = option.value === value}

package/dist/components/Badge.svelte

@@ -38,11 +38,16 @@
   };
 </script>
 
+<!-- whitespace-nowrap: a badge is one token and never breaks inside itself.
+     Under a Table's default `overflow-wrap: anywhere` a status rendered as
+     `dra ft` and a role as `sup er_a dmi n`. The label sits in a truncating
+     span so a badge whose caller caps its width ends in an ellipsis instead of
+     painting past its own border; with no cap the span never shrinks. -->
 <span
-  class="inline-flex items-center font-medium rounded-full border {tones[tone]} {sizes[
-    size
-  ]} {klass}"
+  class="inline-flex max-w-full items-center font-medium whitespace-nowrap rounded-full border {tones[
+    tone
+  ]} {sizes[size]} {klass}"
 >
-  {#if dot}<span class="w-1.5 h-1.5 rounded-full {dotColor[tone]}"></span>{/if}
-  {@render children()}
+  {#if dot}<span class="w-1.5 h-1.5 shrink-0 rounded-full {dotColor[tone]}"></span>{/if}
+  <span class="min-w-0 truncate">{@render children()}</span>
 </span>

package/dist/components/Banner.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { statusTone, type StatusTone, type StatusToneInput } from '../internal/tone.js';
+  import { HIT_AREA } from '../internal/touch.js';
   import type { Snippet } from 'svelte';
 
   interface Props {
@@ -56,7 +57,7 @@
         type="button"
         onclick={dismiss}
         aria-label="Dismiss"
-        class="shrink-0 text-faint transition-colors duration-150 hover:text-fg"
+        class="{HIT_AREA} shrink-0 text-faint transition-colors hover:text-fg"
       >
         <svg
           width="16"

package/dist/components/Breadcrumb.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { HIT_AREA } from '../internal/touch.js';
+
   let {
     items,
     class: cls = '',
@@ -32,11 +34,14 @@
     {/if}
 
     {#if item.href && i < items.length - 1}
+      <!-- The link is a flex box around a truncating span rather than
+           truncating itself: `truncate` clips overflow, and the hit box a
+           finger gets is drawn outside the link's own edges. -->
       <a
         href={safeUrl(item.href)}
-        class="text-muted hover:text-fg transition-colors duration-150 truncate"
+        class="{HIT_AREA} inline-flex min-w-0 text-muted hover:text-fg transition-colors"
       >
-        {item.label}
+        <span class="min-w-0 truncate">{item.label}</span>
       </a>
     {:else}
       <span

package/dist/components/Button.svelte

@@ -4,6 +4,7 @@
   import Spinner from './Spinner.svelte';
   import Tooltip from './Tooltip.svelte';
   import { safeHref } from '../internal/href.js';
+  import { TOUCH_GROW } from '../internal/touch.js';
 
   type Variant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'violet';
   type Size = 'sm' | 'md' | 'lg';
@@ -102,9 +103,21 @@
   };
 
   const spinnerSize = $derived(size === 'lg' ? 18 : 15);
+  /*
+   * whitespace-nowrap: a label never breaks inside itself. Under a Table's
+   * `overflow-wrap: anywhere` a two-word ghost button in a flex row rendered
+   * on two lines, and a status badge beside it as `dra ft`. A caller that
+   * caps the width wraps its label in a `truncate` span; the button cannot
+   * do that for it, because the label and any icon before it are flex items
+   * and text-overflow does not reach into one.
+   *
+   * TOUCH_GROW: under a coarse pointer the button takes the control height,
+   * which is 44px there, so a button and the input beside it grow together.
+   * A mouse sees 36px, 32px and 44px by size, as before.
+   */
   const cls = $derived(
-    `inline-flex items-center justify-center font-medium transition-colors duration-150 ` +
-      `disabled:opacity-50 disabled:cursor-not-allowed select-none ` +
+    `inline-flex items-center justify-center font-medium whitespace-nowrap transition-colors ` +
+      `disabled:opacity-50 disabled:cursor-not-allowed select-none ${TOUCH_GROW} ` +
       `${full ? 'w-full' : ''} ${variants[variant]} ${sizes[size]} ${klass}`,
   );
 

package/dist/components/Card.svelte

@@ -83,7 +83,7 @@
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
   data-print="keep"
-  class="bg-surface border border-line rounded-xl overflow-hidden transition-colors duration-150 {hover
+  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}"
   role={onclick ? 'button' : undefined}