@lyeve-labs/ui-kit 0.23.3 → 0.25.0

package/dist/components/Collapsible.svelte

@@ -13,6 +13,7 @@
    * items is open, and an item asks it; this decides nothing beyond itself.
    */
   import type { Component, Snippet } from 'svelte';
+  import { TOUCH_GROW } from '../internal/touch.js';
 
   interface Props {
     open?: boolean;
@@ -70,8 +71,8 @@
     aria-expanded={open}
     aria-controls={panelId}
     onclick={toggle}
-    class="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-start text-sm font-medium
-      text-fg transition-colors duration-150 outline-none focus-visible:ring-2
+    class="{TOUCH_GROW} flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-start text-sm font-medium
+      text-fg transition-colors outline-none focus-visible:ring-2
       focus-visible:ring-inset focus-visible:ring-brand disabled:cursor-not-allowed
       disabled:opacity-50 {disabled ? '' : 'hover:bg-surface-2'}"
   >
@@ -86,7 +87,7 @@
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="shrink-0 text-faint transition-transform duration-200 ease-out {open
+      class="shrink-0 text-faint transition-transform duration-base {open
         ? ''
         : '-rotate-90 rtl:rotate-90'}"
       aria-hidden="true"
@@ -116,7 +117,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/CopyButton.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Check, Copy } from '@lucide/svelte';
+  import { HIT_AREA } from '../internal/touch.js';
 
   interface Props {
     /** The text written to the clipboard. */
@@ -105,7 +106,7 @@
     type="button"
     aria-label={label}
     onclick={copy}
-    class="inline-flex items-center justify-center rounded-md p-1 outline-none transition-colors duration-150 active:bg-surface-2 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand {status ===
+    class="{HIT_AREA} inline-flex items-center justify-center rounded-md p-1 outline-none transition-colors active:bg-surface-2 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand {status ===
     'copied'
       ? 'text-success'
       : 'text-faint hover:text-fg'}"

package/dist/components/DatePicker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { HIT_AREA } from '../internal/touch.js';
   import {
     CONTROL_BASE,
     FIELD_ERROR,
@@ -8,6 +9,8 @@
     controlBorder,
     describedBy,
   } from '../internal/field.js';
+  import { PANEL_LIST_UNCAPPED, PANEL_SURFACE, placePanel } from '../internal/panel.js';
+  import * as motion from '../motion.js';
   // DatePicker: a text trigger + calendar popover. Binds `value` to an ISO date
   // string ("YYYY-MM-DD"). Pure local-date math (no timezone surprises).
   let {
@@ -237,80 +240,92 @@
         dialog with no name is announced as "dialog" and nothing else. The name
         is fixed rather than built from the field label, so a reader hears what
         the popup does instead of the label they just heard.
+
+        The surface is the shared panel, placed by placePanel: the calendar sat
+        under the trigger unconditionally, so inside a modal body it opened into
+        the part of the scroll region nobody could reach and was cut below the
+        weekday row. The width stays here, sized to seven columns. The region
+        inside is capped by the room and not by the list token, which is shorter
+        than six weeks of days, so a short modal scrolls the calendar rather
+        than cutting it.
       -->
       <div
         id={calendarId}
         role="dialog"
         aria-label="Choose date"
-        class="absolute z-dropdown mt-1 w-[17rem] rounded-xl border border-line bg-surface shadow-2xl p-3"
+        use:placePanel
+        transition:motion.popover
+        class="{PANEL_SURFACE} w-68"
       >
-        <!-- Header -->
-        <div class="flex items-center justify-between mb-2">
-          <button
-            type="button"
-            aria-label="Previous month"
-            onclick={prevMonth}
-            class="p-1.5 rounded-md text-muted hover:bg-surface-2 hover:text-fg transition-colors duration-150"
-          >
-            <svg width="14" height="14" viewBox="0 0 12 12" fill="none"
-              ><path
-                d="M7.5 2L4 6l3.5 4"
-                stroke="currentColor"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              /></svg
+        <div class="overflow-y-auto overscroll-contain p-3" data-panel-list={PANEL_LIST_UNCAPPED}>
+          <!-- Header -->
+          <div class="flex items-center justify-between mb-2">
+            <button
+              type="button"
+              aria-label="Previous month"
+              onclick={prevMonth}
+              class="{HIT_AREA} p-1.5 rounded-md text-muted hover:bg-surface-2 hover:text-fg transition-colors"
             >
-          </button>
-          <span class="text-sm font-medium text-fg">{MONTHS[viewMonth - 1]} {viewYear}</span>
-          <button
-            type="button"
-            aria-label="Next month"
-            onclick={nextMonth}
-            class="p-1.5 rounded-md text-muted hover:bg-surface-2 hover:text-fg transition-colors duration-150"
-          >
-            <svg width="14" height="14" viewBox="0 0 12 12" fill="none"
-              ><path
-                d="M4.5 2L8 6l-3.5 4"
-                stroke="currentColor"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              /></svg
+              <svg width="14" height="14" viewBox="0 0 12 12" fill="none"
+                ><path
+                  d="M7.5 2L4 6l3.5 4"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                /></svg
+              >
+            </button>
+            <span class="text-sm font-medium text-fg">{MONTHS[viewMonth - 1]} {viewYear}</span>
+            <button
+              type="button"
+              aria-label="Next month"
+              onclick={nextMonth}
+              class="{HIT_AREA} p-1.5 rounded-md text-muted hover:bg-surface-2 hover:text-fg transition-colors"
             >
-          </button>
-        </div>
+              <svg width="14" height="14" viewBox="0 0 12 12" fill="none"
+                ><path
+                  d="M4.5 2L8 6l-3.5 4"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                /></svg
+              >
+            </button>
+          </div>
 
-        <!-- Weekday labels -->
-        <div class="grid grid-cols-7 mb-1">
-          {#each WEEKDAYS as wd}
-            <span class="text-center text-[0.65rem] font-medium text-faint py-1">{wd}</span>
-          {/each}
-        </div>
+          <!-- Weekday labels -->
+          <div class="grid grid-cols-7 mb-1">
+            {#each WEEKDAYS as wd}
+              <span class="text-center text-[0.65rem] font-medium text-faint py-1">{wd}</span>
+            {/each}
+          </div>
 
-        <!-- Day grid -->
-        <div class="grid grid-cols-7 gap-0.5">
-          {#each cells as d}
-            {#if d === null}
-              <span></span>
-            {:else}
-              {@const iso = toISO(viewYear, viewMonth, d)}
-              <button
-                type="button"
-                disabled={isDisabled(d)}
-                onclick={() => pick(d)}
-                aria-current={iso === todayISO ? 'date' : undefined}
-                aria-label={iso}
-                class="h-8 w-8 mx-auto flex items-center justify-center rounded-md text-sm transition-colors duration-150
+          <!-- Day grid -->
+          <div class="grid grid-cols-7 gap-0.5">
+            {#each cells as d}
+              {#if d === null}
+                <span></span>
+              {:else}
+                {@const iso = toISO(viewYear, viewMonth, d)}
+                <button
+                  type="button"
+                  disabled={isDisabled(d)}
+                  onclick={() => pick(d)}
+                  aria-current={iso === todayISO ? 'date' : undefined}
+                  aria-label={iso}
+                  class="{HIT_AREA} h-8 w-8 mx-auto flex items-center justify-center rounded-md text-sm transition-colors
                   disabled:opacity-30 disabled:cursor-not-allowed
                   {iso === value
-                  ? 'bg-brand text-ink font-medium'
-                  : iso === todayISO
-                    ? 'text-brand font-medium hover:bg-surface-2'
-                    : 'text-fg hover:bg-surface-2'}">{d}</button
-              >
-            {/if}
-          {/each}
+                    ? 'bg-brand text-ink font-medium'
+                    : iso === todayISO
+                      ? 'text-brand font-medium hover:bg-surface-2'
+                      : 'text-fg hover:bg-surface-2'}">{d}</button
+                >
+              {/if}
+            {/each}
+          </div>
         </div>
       </div>
     {/if}

package/dist/components/Drawer.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { HIT_AREA } from '../internal/touch.js';
   import { overlay } from '../internal/overlay.js';
+  import * as motion from '../motion.js';
 
   type Side = 'left' | 'right';
   type Size = 'sm' | 'md' | 'lg' | 'xl';
@@ -63,15 +65,14 @@
       aria-hidden="true"
       class="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-default"
       onclick={close}
+      transition:motion.scrim
     ></button>
 
     <div
       use:overlay
+      transition:motion.drawer={{ side }}
       class="relative flex h-full max-w-full flex-col {widths[size]} bg-surface shadow-2xl
-        {side === 'right' ? 'border-s' : 'border-e'} border-line
-        {side === 'right'
-        ? 'animate-[drawer-in-right_var(--duration-drawer-in)_ease-out]'
-        : 'animate-[drawer-in-left_var(--duration-drawer-in)_ease-out]'}"
+        {side === 'right' ? 'border-s' : 'border-e'} border-line"
       role="dialog"
       aria-modal="true"
       aria-labelledby={title ? headingId : undefined}
@@ -89,7 +90,7 @@
           <button
             type="button"
             onclick={close}
-            class="-mt-0.5 text-xl leading-none text-faint transition-colors duration-150 hover:text-fg"
+            class="{HIT_AREA} -mt-0.5 text-xl leading-none text-faint transition-colors hover:text-fg"
             aria-label="Close"
           >
             <svg

package/dist/components/Dropdown.svelte

@@ -12,7 +12,9 @@
    * and Escape and Tab both close and hand focus back to the trigger.
    */
   import type { Component, Snippet } from 'svelte';
+  import { TOUCH_GROW } from '../internal/touch.js';
   import { PANEL_LIST, PANEL_SURFACE, placePanel } from '../internal/panel.js';
+  import * as motion from '../motion.js';
 
   interface DropdownItem {
     label: string;
@@ -254,6 +256,7 @@
       bind:this={menuEl}
       role="menu"
       use:placePanel
+      transition:motion.popover
       class="{PANEL_SURFACE} min-w-36 {align === 'right' ? 'end-0' : 'start-0'}"
     >
       <div class={PANEL_LIST} data-panel-list>
@@ -264,8 +267,8 @@
             disabled={item.disabled}
             tabindex={index === active ? 0 : -1}
             onclick={() => handleItemClick(item)}
-            class="flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-sm transition-colors
-              duration-150 outline-none focus-visible:ring-2 focus-visible:ring-inset
+            class="{TOUCH_GROW} flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-sm transition-colors
+              outline-none focus-visible:ring-2 focus-visible:ring-inset
               focus-visible:ring-brand disabled:cursor-not-allowed disabled:opacity-40
               {item.variant === 'danger' ? 'text-danger hover:bg-danger/10' : 'hover:bg-surface-2'}"
           >

package/dist/components/FileInput.svelte

@@ -57,7 +57,7 @@
        half alpha reads as a weaker affordance for no reason a user can infer. -->
   <label
     class="flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-xl
-      border-2 border-dashed px-4 py-8 text-center transition-colors duration-150
+      border-2 border-dashed px-4 py-8 text-center transition-colors
       {error
       ? 'border-danger bg-danger/5 hover:bg-danger/8'
       : dragOver

package/dist/components/Modal.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { HIT_AREA } from '../internal/touch.js';
   import { overlay } from '../internal/overlay.js';
+  import * as motion from '../motion.js';
 
   type Size = 'sm' | 'md' | 'lg';
 
@@ -58,13 +60,14 @@
       aria-hidden="true"
       class="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-default"
       onclick={close}
+      transition:motion.scrim
     ></button>
 
     <div
       use:overlay
+      transition:motion.dialog
       class="relative flex max-h-[calc(100dvh-2rem)] w-full {widths[size]} flex-col
-             overflow-hidden rounded-xl border border-line bg-surface shadow-2xl
-             animate-[modal-in_var(--duration-modal-in)_ease-out]"
+             overflow-hidden rounded-xl border border-line bg-surface shadow-2xl"
       role="dialog"
       aria-modal="true"
       aria-labelledby={title ? headingId : undefined}
@@ -82,7 +85,7 @@
           <button
             type="button"
             onclick={close}
-            class="shrink-0 rounded text-faint transition-colors duration-150 hover:text-fg
+            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="Close"
           >

package/dist/components/MultiSelect.svelte

@@ -9,6 +9,7 @@
    * reason the factory reports a selection rather than closing on one.
    */
   import { applyFilter, type FilterInput } from '../internal/filter.js';
+  import { HIT_AREA } from '../internal/touch.js';
   import {
     FIELD_ERROR,
     FIELD_HINT,
@@ -25,6 +26,7 @@
     panelOption,
     placePanel,
   } from '../internal/panel.js';
+  import * as motion from '../motion.js';
   import type { ListOption } from './Autocomplete.svelte';
 
   interface Props {
@@ -187,7 +189,7 @@
       onkeydown={onTriggerKeydown}
       {...box.triggerAttrs}
       class="flex min-h-control w-full cursor-pointer flex-wrap items-center gap-1.5 rounded-lg
-        border bg-surface-2 px-2.5 py-1.5 text-start text-sm transition-colors duration-150
+        border bg-surface-2 px-2.5 py-1.5 text-start text-sm transition-colors
         outline-none {disabled ? 'cursor-not-allowed opacity-50' : ''} {controlBorder(!!error)}"
     >
       {#if selected.length === 0}
@@ -205,7 +207,7 @@
                 event.stopPropagation();
                 remove(option.value);
               }}
-              class="-m-1.5 p-1.5 transition-colors duration-150 hover:text-brand-light"
+              class="{HIT_AREA} -m-1.5 p-1.5 transition-colors hover:text-brand-light"
             >
               <!--
                 12px inside 6px of padding is a 24px target, which is the floor
@@ -238,7 +240,7 @@
           height="12"
           viewBox="0 0 12 12"
           fill="none"
-          class="transition-transform duration-150 {box.open ? 'rotate-180' : ''}"
+          class="transition-transform duration-base {box.open ? 'rotate-180' : ''}"
         >
           <path
             d="M2 4l4 4 4-4"
@@ -252,7 +254,7 @@
     </div>
 
     {#if box.open}
-      <div use:placePanel class="{PANEL_SURFACE} w-full">
+      <div use:placePanel transition:motion.popover class="{PANEL_SURFACE} w-full">
         {#if searchable}
           <div class="border-b border-line p-2">
             <input
@@ -268,7 +270,7 @@
               aria-label={label ? `Search ${label}` : 'Search options'}
               {...box.triggerAttrs}
               class="w-full rounded-md border border-line-strong bg-surface-2 px-2.5 py-1.5
-                text-sm text-fg outline-none transition-colors duration-150
+                text-sm text-fg outline-none transition-colors
                 placeholder:text-faint focus:border-brand"
             />
           </div>
@@ -310,7 +312,7 @@
             >
               <span
                 class="flex h-4 w-4 shrink-0 items-center justify-center rounded border
-                  transition-colors duration-150
+                  transition-colors
                   {isSelected
                   ? 'border-brand bg-brand text-ink'
                   : 'border-line-strong bg-surface-2'}"

package/dist/components/NumberInput.svelte

@@ -72,7 +72,7 @@
   // the part a low-vision user could not find.
   const step_ =
     'flex w-control shrink-0 items-center justify-center border-line-strong bg-surface-2 text-muted ' +
-    'transition-colors duration-150 hover:bg-line hover:text-fg ' +
+    'transition-colors hover:bg-line hover:text-fg ' +
     'disabled:opacity-50 disabled:cursor-not-allowed';
 </script>
 
@@ -119,7 +119,7 @@
       aria-invalid={error ? 'true' : undefined}
       aria-describedby={describedBy(fieldId, error, hint)}
       class="min-w-0 flex-1 border-y bg-surface-2 text-center text-sm text-fg
-        outline-none transition-colors duration-150
+        outline-none transition-colors
         disabled:cursor-not-allowed disabled:opacity-50
         [appearance:textfield]
         [&::-webkit-inner-spin-button]:appearance-none

package/dist/components/PageHeader.svelte

@@ -73,7 +73,19 @@
     </h1>
     {#if description && !compact}<p class="mt-1 text-sm text-muted">{description}</p>{/if}
   </div>
+  <!-- The slot wraps in two steps. It sits beside the title while both fit
+       and drops under it, at the end edge, when they do not; wider than the
+       row on its own, it wraps its controls inside itself, each line ending at
+       the end edge, in the order they were given. It used to be `shrink-0`,
+       which sizes a flex item to its content and so cannot wrap even when the
+       page puts a wrapping row inside it: four actions pushed the primary one
+       83px past a 400px screen. -->
   {#if actions}
-    <div class="flex shrink-0 items-center gap-2">{@render actions()}</div>
+    <div
+      data-testid="page-actions"
+      class="ms-auto flex min-w-0 flex-wrap items-center justify-end gap-2"
+    >
+      {@render actions()}
+    </div>
   {/if}
 </header>

package/dist/components/PageShell.svelte

@@ -15,7 +15,10 @@
    * matches for every assistive technology reading the page.
    */
   import type { Snippet } from 'svelte';
+  import { ArrowLeft } from '@lucide/svelte';
+  import { safeHref } from '../internal/href.js';
   import { PAGE_PAD, PAGE_STACK, PAGE_WIDTH, type PageWidth } from '../internal/layout.js';
+  import { HIT_AREA } from '../internal/touch.js';
   import PageHeader from './PageHeader.svelte';
 
   interface Props {
@@ -41,7 +44,30 @@
      * asks for it.
      */
     compact?: boolean;
-    /** Rendered above the title at one fixed distance. */
+    /**
+     * A link back to the page this one sits under, rendered above the title
+     * with an arrow and the parent's label ("Flows", "Settings").
+     *
+     * A page two levels down had only the sidebar and the browser to get back
+     * with. A third of the nested pages in one app built a breadcrumb of their
+     * own, half of those drew an arrow by hand, and the rest offered nothing.
+     * The affordance lives in the shell so every page gets it the same way.
+     * It is a plain anchor, so the keyboard needs nothing extra.
+     */
+    back?: { href: string; label: string };
+    /**
+     * Keep the h1 for assistive technology and render no title row at all: no
+     * back link, no breadcrumb, no description, no actions.
+     *
+     * For a page whose toolbar is its header. An editor that owns the viewport
+     * spent two rows before its canvas, the title row and then its own toolbar
+     * carrying the same name, with the shell's gap between them. The page
+     * still has exactly one h1, so a heading query and a screen reader see
+     * what every other page gives them; it is `sr-only`, not absent. A page
+     * that hides the row takes on the way back: `back` renders nothing here.
+     */
+    titleHidden?: boolean;
+    /** Rendered above the title at one fixed distance, after `back` when both are set. */
     breadcrumb?: Snippet;
     /** Right-aligned controls in the title row. */
     actions?: Snippet;
@@ -55,6 +81,8 @@
     width = 'default',
     fill = false,
     compact = false,
+    back = undefined,
+    titleHidden = false,
     breadcrumb,
     actions,
     class: klass = '',
@@ -91,17 +119,44 @@
 
   /** The content stack. On a fill page it also takes the leftover height. */
   const content = $derived(fill ? `${PAGE_STACK} min-h-0 flex-1` : PAGE_STACK);
+
+  /**
+   * The same rest, hover and focus treatment as a Breadcrumb link, so the two
+   * read as one row. The ring replaces the global outline rather than adding
+   * to it, and the padding gives the ring a shape to sit on: on bare text the
+   * ring hugs the glyphs and clips the descenders.
+   */
+  const BACK =
+    `${HIT_AREA} -ms-1 inline-flex items-center gap-1 rounded-md px-1 py-0.5 text-xs text-muted ` +
+    'outline-none transition-colors hover:text-fg ' +
+    'focus-visible:ring-2 focus-visible:ring-brand';
 </script>
 
 <div class="{frame} {klass}">
-  <!-- The breadcrumb and the title are one group, so the distance between them
+  {#if titleHidden}
+    <h1 data-testid="page-title" class="sr-only">{title}</h1>
+  {:else}
+    <!-- The breadcrumb and the title are one group, so the distance between them
        is fixed here and does not change with whether a description is set. -->
-  <div class="flex flex-col gap-2 {headerPad}">
-    {#if breadcrumb}{@render breadcrumb()}{/if}
-    <!-- flush: the shell's own section stack supplies the gap below the title,
+    <div class="flex flex-col gap-2 {headerPad}">
+      <!-- The back link leads and the breadcrumb follows on one row, so a page
+         that has both does not stack two lines of navigation over its title. -->
+      {#if back || breadcrumb}
+        <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
+          {#if back}
+            <a href={safeHref(back.href)} data-testid="page-back" class={BACK}>
+              <ArrowLeft size={14} aria-hidden="true" class="shrink-0 rtl:rotate-180" />
+              {back.label}
+            </a>
+          {/if}
+          {#if breadcrumb}{@render breadcrumb()}{/if}
+        </div>
+      {/if}
+      <!-- flush: the shell's own section stack supplies the gap below the title,
          so the header must not add a second one. -->
-    <PageHeader {title} {description} {actions} {compact} flush />
-  </div>
+      <PageHeader {title} {description} {actions} {compact} flush />
+    </div>
+  {/if}
 
   <div class={content}>
     {@render children()}

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

@@ -38,7 +38,33 @@ interface Props {
      * asks for it.
      */
     compact?: boolean;
-    /** Rendered above the title at one fixed distance. */
+    /**
+     * A link back to the page this one sits under, rendered above the title
+     * with an arrow and the parent's label ("Flows", "Settings").
+     *
+     * A page two levels down had only the sidebar and the browser to get back
+     * with. A third of the nested pages in one app built a breadcrumb of their
+     * own, half of those drew an arrow by hand, and the rest offered nothing.
+     * The affordance lives in the shell so every page gets it the same way.
+     * It is a plain anchor, so the keyboard needs nothing extra.
+     */
+    back?: {
+        href: string;
+        label: string;
+    };
+    /**
+     * Keep the h1 for assistive technology and render no title row at all: no
+     * back link, no breadcrumb, no description, no actions.
+     *
+     * For a page whose toolbar is its header. An editor that owns the viewport
+     * spent two rows before its canvas, the title row and then its own toolbar
+     * carrying the same name, with the shell's gap between them. The page
+     * still has exactly one h1, so a heading query and a screen reader see
+     * what every other page gives them; it is `sr-only`, not absent. A page
+     * that hides the row takes on the way back: `back` renders nothing here.
+     */
+    titleHidden?: boolean;
+    /** Rendered above the title at one fixed distance, after `back` when both are set. */
     breadcrumb?: Snippet;
     /** Right-aligned controls in the title row. */
     actions?: Snippet;

package/dist/components/Pagination.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { safeHref } from '../internal/href.js';
   import { formatCount } from '../internal/number.js';
+  import { HIT_AREA } from '../internal/touch.js';
 
   interface Base {
     page: number;
@@ -179,8 +180,12 @@
     return href && enabled ? safeHref(href(target)) : undefined;
   }
 
-  const btnBase =
-    'inline-flex items-center justify-center w-7 h-7 rounded text-xs font-medium transition-colors duration-150';
+  /**
+   * 28px drawn, 44px under a finger. The steps sit 2px apart, so growing the
+   * visual would put a seven-page pager past a phone's width; the hit box
+   * grows instead and the pager keeps its shape.
+   */
+  const btnBase = `${HIT_AREA} inline-flex items-center justify-center w-7 h-7 rounded text-xs font-medium transition-colors`;
 
   /**
    * A page control that is not the page you are on, in every state a pointer

package/dist/components/PasswordInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Eye, EyeOff } from '@lucide/svelte';
+  import { HIT_AREA_POSITIONED } from '../internal/touch.js';
   import {
     CONTROL_BASE,
     FIELD_ERROR,
@@ -120,7 +121,7 @@
         aria-pressed={revealed}
         aria-controls={fieldId}
         aria-label={revealed ? 'Hide password' : 'Show password'}
-        class="absolute top-1/2 end-1 flex -translate-y-1/2 items-center justify-center rounded-md p-1.5 text-faint outline-none transition-colors duration-150 hover:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+        class="{HIT_AREA_POSITIONED} absolute top-1/2 end-1 flex -translate-y-1/2 items-center justify-center rounded-md p-1.5 text-faint outline-none transition-colors hover:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
       >
         {#if revealed}
           <EyeOff size={15} aria-hidden="true" />

package/dist/components/Progress.svelte

@@ -62,7 +62,7 @@
     aria-label={label}
   >
     <div
-      class="h-full rounded-full transition-[width] duration-500
+      class="h-full rounded-full transition-[width] duration-progress
         {tones[tone]}
         {animated ? 'animate-pulse' : ''}"
       style="width: {pct}%"

package/dist/components/SearchInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { CONTROL_BASE, FIELD_LABEL, FIELD_WRAP, controlBorder } from '../internal/field.js';
+  import { HIT_AREA_POSITIONED } from '../internal/touch.js';
 
   interface Props {
     value?: string;
@@ -84,8 +85,8 @@
         type="button"
         onclick={clear}
         aria-label="Clear search"
-        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="{HIT_AREA_POSITIONED} 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="14"