@lyeve-labs/ui-kit 0.38.2 → 0.38.4

package/dist/components/AccountMenu.svelte

@@ -19,7 +19,7 @@
   import type { Snippet } from 'svelte';
   import { TOUCH_GROW } from '../internal/touch.js';
   import { ChevronDown } from '@lucide/svelte';
-  import type { AccentTone } from '../internal/tone.js';
+  import { ROW_CHIP_TONE, type AccentTone } from '../internal/tone.js';
 
   interface Props {
     /** The line people recognize themselves by: a display name, or the email. */
@@ -62,11 +62,7 @@
 
   const AVATAR_TONE: Record<AccentTone, string> = {
     neutral: 'bg-surface-2 text-fg',
-    brand: 'bg-brand/15 text-brand',
-    success: 'bg-success/15 text-success',
-    warn: 'bg-warn/15 text-warn',
-    danger: 'bg-danger/15 text-danger',
-    violet: 'bg-violet/15 text-violet',
+    ...ROW_CHIP_TONE,
   };
 
   let root = $state<HTMLDetailsElement | null>(null);

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

@@ -16,7 +16,7 @@
    * to sign out.
    */
 import type { Snippet } from 'svelte';
-import type { AccentTone } from '../internal/tone.js';
+import { type AccentTone } from '../internal/tone.js';
 interface Props {
     /** The line people recognize themselves by: a display name, or the email. */
     name: string;

package/dist/components/Alert.svelte

@@ -65,10 +65,10 @@
    * whatever was being read. An alert that also clears itself must not be
    * assertive: it would interrupt to say something and then take it away.
    */
-  const live = $derived(t === 'danger' || t === 'warn');
-
   const delay = $derived(autoDismiss === true ? DISMISS_AFTER : Number(autoDismiss) || 0);
 
+  const live = $derived((t === 'danger' || t === 'warn') && delay <= 0);
+
   /** An alert that can close itself can also be closed by hand. */
   const closable = $derived(dismissible || delay > 0);
 

package/dist/components/AppShell.svelte

@@ -36,6 +36,7 @@
   import type { Snippet } from 'svelte';
   import { Menu, PanelLeft, PanelLeftClose } from '@lucide/svelte';
   import { overlay } from '../internal/overlay.js';
+  import * as motion from '../motion.js';
   import {
     APP_BRAND,
     APP_HEADER,
@@ -134,6 +135,20 @@
   /** md: to lg:, where the expanded column costs the page more than it gives. */
   let isNarrow = $state(false);
   const drawerOpen = $derived(isMobile && navOpen);
+
+  let shellEl = $state<HTMLDivElement | undefined>();
+
+  /**
+   * The edge the phone drawer slides from. It is docked at the start edge,
+   * which a right-to-left page puts on the right, and a slide from the left
+   * would cross the whole screen to get there. Read when the drawer moves,
+   * so a page that changes direction is followed.
+   */
+  function startSide(): 'left' | 'right' {
+    return shellEl !== undefined && getComputedStyle(shellEl).direction === 'rtl'
+      ? 'right'
+      : 'left';
+  }
   /**
    * Collapsing is a desktop gesture. Below md: the same aside is the drawer,
    * so honoring `collapsed` there would leave the hamburger opening nothing.
@@ -194,7 +209,7 @@
 
 <svelte:window onkeydown={onWindowKeydown} />
 
-<div data-print="unclip" class="flex h-screen {klass}">
+<div bind:this={shellEl} data-print="unclip" class="flex h-screen {klass}">
   <!-- First focusable thing in the document. Without it a keyboard reader tabs
        the whole sidebar again on every page. -->
   <a
@@ -211,6 +226,7 @@
          reaching the page under the open drawer. -->
     <div
       data-print="hide"
+      transition:motion.scrim|global
       class="fixed inset-0 z-overlay bg-black/60 backdrop-blur-sm"
       role="presentation"
       onclick={() => (navOpen = false)}
@@ -227,11 +243,13 @@
     complementary landmark, and the a11y gate rejects a non-interactive element
     taking an interactive role. use:overlay is what makes aria-modal true rather
     than merely claimed. It moves focus in, keeps Tab inside, and hands focus
-    back to the hamburger on close.
+    back to the hamburger on close. It slides from the start edge and back
+    on the drawer preset, as every other drawer does, rather than snapping.
   -->
   {#if drawerOpen}
     <div
       data-print="hide"
+      transition:motion.drawer|global={{ side: startSide() }}
       class="fixed inset-y-0 start-0 z-drawer flex shadow-2xl"
       role="dialog"
       aria-modal="true"

package/dist/components/Autocomplete.svelte

@@ -49,6 +49,7 @@
     panelOption,
     placePanel,
   } from '../internal/panel.js';
+  import { HIT_AREA_POSITIONED } from '../internal/touch.js';
   import * as motion from '../motion.js';
 
   interface Props {
@@ -216,13 +217,14 @@
         box is positioned from its right edge, so a negative right margin holds
         the glyph exactly where it was, while a negative top margin would fight
         the translate that centers it and lift it 6px off the middle of the
-        field.
+        field. Under a finger the hit box grows to 44px, as SearchInput's
+        clear button does.
       -->
       <button
         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 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="12"

package/dist/components/Avatar.svelte

@@ -21,15 +21,22 @@
     xl: { wrap: 'w-14 h-14', text: 'text-base' },
   };
 
+  /*
+   * Each fill names the text it carries. Initials in ink on a translucent hue
+   * took the color of whatever the avatar sat on, and seven of the eight read
+   * under 4.5:1 in one theme or the other, down to 1.87:1. A solid hue holds
+   * ink in both themes, and a quarter tint holds fg, so the five strong hues
+   * went solid and the three soft ones went to a tint.
+   */
   const hues = [
-    'bg-violet/80',
-    'bg-brand/60',
-    'bg-success/70',
-    'bg-warn/60',
-    'bg-danger/60',
-    'bg-violet/50',
-    'bg-brand/40',
-    'bg-success/50',
+    'bg-violet text-ink',
+    'bg-brand text-ink',
+    'bg-success text-ink',
+    'bg-warn text-ink',
+    'bg-danger text-ink',
+    'bg-violet/25 text-fg',
+    'bg-brand/25 text-fg',
+    'bg-success/25 text-fg',
   ];
 
   let imgError = $state(false);
@@ -49,7 +56,7 @@
 
 <span
   class="inline-flex items-center justify-center rounded-full font-semibold shrink-0
-    {s.wrap} {hue} text-ink {cls}"
+    {s.wrap} {hue} {cls}"
   title={name}
   use:brokenImage={() => (imgError = true)}
 >

package/dist/components/Banner.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { statusTone, type StatusTone, type StatusToneInput } from '../internal/tone.js';
   import { HIT_AREA } from '../internal/touch.js';
+  import * as motion from '../motion.js';
   import type { Snippet } from 'svelte';
 
   /**
@@ -67,14 +68,25 @@
   };
 
   const t = $derived(statusTone(tone));
+
+  /**
+   * A failure and a warning interrupt, because the reader has to act, as
+   * Alert does. Anything else waits for a pause. A banner that clears itself
+   * waits too: interrupting to say something and then taking it away leaves
+   * the reader with nothing to act on.
+   */
+  const live = $derived((t === 'danger' || t === 'warn') && delay <= 0);
 </script>
 
 {#if visible}
   <!-- The timer stops while the pointer is over the banner or focus is inside
        it, and starts again when they leave. Text is never pulled away from
-       somebody reading it. -->
+       somebody reading it. It leaves on the toast preset, as Alert does,
+       rather than vanishing in one frame. -->
   <div
-    role="status"
+    transition:motion.toast|global
+    role={live ? 'alert' : 'status'}
+    aria-live={live ? 'assertive' : 'polite'}
     class="relative flex items-center gap-3 border-b px-4 py-3 text-sm {tones[t]} {cls}"
     onmouseenter={closable ? () => (held = true) : undefined}
     onmouseleave={closable ? () => (held = false) : undefined}

package/dist/components/CheckboxGroup.svelte

@@ -137,7 +137,7 @@
       >{/if}
   </legend>
 
-  <div class={choiceGroupList(orientation)}>
+  <div class={choiceGroupList(orientation, size, variant)}>
     {#each options as option (option.value)}
       <!--
         The option renders through Checkbox rather than through a copy of it.

package/dist/components/DatePicker.svelte

@@ -248,6 +248,13 @@
         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.
+
+        Under a finger each day keeps its 32px face and a 44px hit box, so the
+        days have to sit 44px apart or each box covers a third of its
+        neighbors'. Seven 44px columns are 308px. Inside a 1px border and 6px
+        of padding that is a 320px panel, the width of the narrowest phone,
+        and placePanel slides it back on screen from the page gutter. The rows
+        open a 12px gap for the same reason.
       -->
       <div
         id={calendarId}
@@ -255,9 +262,12 @@
         aria-label="Choose date"
         use:placePanel
         transition:motion.popover|global
-        class="{PANEL_SURFACE} w-68"
+        class="{PANEL_SURFACE} w-68 coarse:w-80"
       >
-        <div class="overflow-y-auto overscroll-contain p-3" data-panel-list={PANEL_LIST_UNCAPPED}>
+        <div
+          class="overflow-y-auto overscroll-contain p-3 coarse:p-1.5"
+          data-panel-list={PANEL_LIST_UNCAPPED}
+        >
           <!-- Header -->
           <div class="flex items-center justify-between mb-2">
             <button
@@ -303,7 +313,7 @@
           </div>
 
           <!-- Day grid -->
-          <div class="grid grid-cols-7 gap-0.5">
+          <div class="grid grid-cols-7 gap-0.5 coarse:gap-y-3" data-day-grid>
             {#each cells as d}
               {#if d === null}
                 <span></span>

package/dist/components/FileInput.svelte

@@ -54,10 +54,13 @@
   <!-- The dashed border is the only thing marking this region as a control, so
        it rests on line-strong: line reads 1.25:1 and failed SC 1.4.11. The
        hover is full-strength brand, because a focus-adjacent color dropped to
-       half alpha reads as a weaker affordance for no reason a user can infer. -->
+       half alpha reads as a weaker affordance for no reason a user can infer.
+       The input is sr-only, so the ring the browser draws on it lands on a
+       clipped 1px box nobody sees. The drop target draws it instead. -->
   <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
+      has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-brand
       {error
       ? 'border-danger bg-danger/5 hover:bg-danger/8'
       : dragOver

package/dist/components/MultiSelect.svelte

@@ -15,7 +15,6 @@
     FIELD_HINT,
     FIELD_LABEL,
     FIELD_WRAP,
-    controlBorder,
     describedBy,
   } from '../internal/field.js';
   import { createListbox } from '../internal/listbox.svelte.js';
@@ -112,8 +111,12 @@
   }
 
   function remove(v: string): void {
+    if (disabled) return;
     value = value.filter((x) => x !== v);
     onchange?.(value);
+    // The pressed button leaves with its chip, and focus would fall to the
+    // page. The field is where the reader was.
+    triggerEl?.focus();
   }
 
   function search(event: Event & { currentTarget: HTMLInputElement }): void {
@@ -126,12 +129,14 @@
     box.openList();
   }
 
+  function onFrameClick(): void {
+    if (disabled) return;
+    triggerEl?.focus();
+    box.toggle();
+  }
+
   function onTriggerKeydown(event: KeyboardEvent): void {
     if (disabled) return;
-    // A chip's remove button sits inside the trigger, so its keys bubble
-    // through here. Taken as the trigger's own they would open the panel and
-    // preventDefault the click that removes the chip.
-    if (event.target !== event.currentTarget) return;
     if (box.onkeydown(event)) return;
     if (event.key !== 'Enter' && event.key !== ' ') return;
 
@@ -168,89 +173,107 @@
 
   <div class="relative" use:anchor>
     <!--
-      A div and not a button, so the chips' own remove buttons are valid
-      children. role="combobox" and not role="button" for the same reason: a
-      button's descendants are presentational, which took every remove button
-      out of the accessibility tree, and aria-activedescendant says nothing on a
-      role that does not support it.
+      The frame draws the field. The chips and the combobox sit inside it side
+      by side, so no remove button is a control nested inside another control,
+      which a screen reader reads as one widget and a keyboard cannot sort
+      out. A press anywhere on the frame that is not a remove button opens the
+      list from the combobox, as a press on the field always did.
     -->
     <div
-      bind:this={triggerEl}
-      id={fieldId}
-      role="combobox"
-      tabindex={disabled ? -1 : 0}
-      aria-disabled={disabled ? 'true' : undefined}
-      aria-labelledby={label ? `${fieldId}-label` : undefined}
-      aria-required={required ? 'true' : undefined}
-      aria-describedby={describedBy(fieldId, error, hint)}
-      onclick={() => {
-        if (!disabled) box.toggle();
-      }}
-      onkeydown={onTriggerKeydown}
-      {...box.triggerAttrs}
+      role="presentation"
+      onclick={onFrameClick}
       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
-        outline-none {disabled ? 'cursor-not-allowed opacity-50' : ''} {controlBorder(!!error)}"
+        has-[[role=combobox]:focus-visible]:ring-2 has-[[role=combobox]:focus-visible]:ring-inset
+        has-[[role=combobox]:focus-visible]:ring-brand
+        {disabled ? 'cursor-not-allowed opacity-50' : ''}
+        {error ? 'border-danger' : 'border-line-strong has-[[role=combobox]:focus]:border-brand'}"
     >
-      {#if selected.length === 0}
-        <span class="px-0.5 text-faint">{placeholder}</span>
-      {:else}
-        {#each selected as option (option.value)}
-          <span
-            class="inline-flex items-center gap-1 rounded-md bg-brand/10 px-2 py-0.5 text-xs text-brand"
+      <!--
+        A div and not an input: there is nothing to type here. The labels of
+        the chosen values are its text, so focusing it reads the label and
+        then what is chosen, as a select reads its value. It comes first in
+        the markup, so Tab reaches the field before any remove button, and
+        order-last draws it after the chips.
+      -->
+      <div
+        bind:this={triggerEl}
+        id={fieldId}
+        role="combobox"
+        tabindex={disabled ? -1 : 0}
+        aria-disabled={disabled ? 'true' : undefined}
+        aria-labelledby={label ? `${fieldId}-label` : undefined}
+        aria-required={required ? 'true' : undefined}
+        aria-describedby={describedBy(fieldId, error, hint)}
+        onkeydown={onTriggerKeydown}
+        {...box.triggerAttrs}
+        class="order-last flex min-w-12 flex-1 items-center gap-1.5 self-stretch outline-none"
+      >
+        {#if selected.length === 0}
+          <span class="px-0.5 text-faint">{placeholder}</span>
+        {:else}
+          <span class="sr-only">{selected.map((option) => option.label).join(', ')}</span>
+        {/if}
+        <span class="ms-auto shrink-0 text-faint" aria-hidden="true">
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            class="transition-transform duration-base {box.open ? 'rotate-180' : ''}"
           >
-            {option.label}
-            <button
-              type="button"
-              aria-label="Remove {option.label}"
-              onclick={(event) => {
-                event.stopPropagation();
-                remove(option.value);
-              }}
-              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
-                SC 2.5.8 puts on a control that cannot claim the spacing
-                exception, and this one sits inside the trigger. The padding is
-                taken straight back off as margin, so the chip is laid out
-                exactly as it was and only the reachable area grew. The glyph
-                is the same 12px cross Autocomplete clears its value with. It
-                was drawn a pixel smaller here for no reason anyone recorded.
-              -->
-              <svg
-                width="12"
-                height="12"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2.5"
-                stroke-linecap="round"
-                aria-hidden="true"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </button>
-          </span>
-        {/each}
-      {/if}
-      <span class="ms-auto shrink-0 text-faint" aria-hidden="true">
-        <svg
-          width="12"
-          height="12"
-          viewBox="0 0 12 12"
-          fill="none"
-          class="transition-transform duration-base {box.open ? 'rotate-180' : ''}"
+            <path
+              d="M2 4l4 4 4-4"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </span>
+      </div>
+      {#each selected as option (option.value)}
+        <span
+          class="inline-flex items-center gap-1 rounded-md bg-brand/10 px-2 py-0.5 text-xs text-brand"
         >
-          <path
-            d="M2 4l4 4 4-4"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </span>
+          <!-- The combobox reads the chosen labels, so the chip's copy is
+               hidden rather than read twice. Its button names the value. -->
+          <span aria-hidden="true">{option.label}</span>
+          <button
+            type="button"
+            aria-label="Remove {option.label}"
+            aria-disabled={disabled ? 'true' : undefined}
+            tabindex={disabled ? -1 : undefined}
+            onclick={(event) => {
+              event.stopPropagation();
+              remove(option.value);
+            }}
+            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
+              SC 2.5.8 puts on a control that cannot claim the spacing
+              exception, and this one sits inside the field. The padding is
+              taken straight back off as margin, so the chip is laid out
+              exactly as it was and only the reachable area grew. The glyph
+              is the same 12px cross Autocomplete clears its value with. It
+              was drawn a pixel smaller here for no reason anyone recorded.
+            -->
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              aria-hidden="true"
+            >
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </span>
+      {/each}
     </div>
 
     {#if box.open}
@@ -271,7 +294,7 @@
               {...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
-                placeholder:text-faint focus:border-brand"
+                placeholder:text-faint focus:border-brand focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
             />
           </div>
         {/if}

package/dist/components/NumberInput.svelte

@@ -126,6 +126,7 @@
       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
+        focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand
         disabled:cursor-not-allowed disabled:opacity-50
         [appearance:textfield]
         [&::-webkit-inner-spin-button]:appearance-none

package/dist/components/RadioGroup.svelte

@@ -129,7 +129,7 @@
     {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span>{/if}
   </legend>
 
-  <div class={choiceGroupList(orientation)}>
+  <div class={choiceGroupList(orientation, size, variant)}>
     {#each options as option (option.value)}
       <!--
         The option renders through Radio rather than through a copy of it. The

package/dist/components/Select.svelte

@@ -373,7 +373,7 @@
               {...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
-                  placeholder:text-faint focus:border-brand"
+                  placeholder:text-faint focus:border-brand focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
             />
           </div>
         {/if}

package/dist/components/SidebarNav.svelte

@@ -2,7 +2,7 @@
   import { activeTrail, type NavNode, type NavTree } from '../internal/nav-tree.js';
   import { TOUCH_GROW } from '../internal/touch.js';
   import { createNavExpansion } from '../internal/nav-expansion.svelte.js';
-  import type { AccentTone } from '../internal/tone.js';
+  import { ROW_CHIP_TONE, type AccentTone } from '../internal/tone.js';
 
   interface Props {
     items: NavTree;
@@ -107,11 +107,7 @@
 
   const BADGE_TONE: Record<AccentTone, string> = {
     neutral: 'bg-surface-2 text-faint',
-    brand: 'bg-brand/15 text-brand',
-    success: 'bg-success/15 text-success',
-    warn: 'bg-warn/15 text-warn',
-    danger: 'bg-danger/15 text-danger',
-    violet: 'bg-violet/15 text-violet',
+    ...ROW_CHIP_TONE,
   };
 
   const BADGE = 'ms-auto shrink-0 rounded-full px-1.5 py-0.5 text-xs font-medium';

package/dist/components/Tabs.svelte

@@ -108,11 +108,13 @@
         {#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. -->
+               carries. The active tint is the 10 percent every brand chip
+               uses: at 40 percent it dragged the ground toward the text and
+               the count read 3.28:1. -->
           <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'}"
+              {active === tab.id ? 'bg-brand/10 text-brand' : 'bg-surface-2 text-faint'}"
           >
             {tab.count}
           </span>

package/dist/components/TimePicker.svelte

@@ -19,6 +19,7 @@
     toISOTime,
   } from '../internal/time.js';
   import type { TimeParts, TimeSegment } from '../internal/time.js';
+  import { HIT_AREA } from '../internal/touch.js';
 
   /**
    * A time field built from one input per segment, and deliberately not from a
@@ -386,6 +387,46 @@
     commit();
   }
 
+  /** Whether the press now under way started inside a segment. */
+  let pressInSegment = false;
+
+  function onGroupPointerdown(e: PointerEvent): void {
+    pressInSegment = !!(e.target as Element | null)?.closest('[data-segment]');
+  }
+
+  /**
+   * A press on the field's padding, on a colon or on a segment's hit box
+   * focuses the nearest segment, as a native time input does. The group is
+   * 44px tall under a finger and its segments are 20px, so without this a tap
+   * on most of the field focused nothing. A mouse gets the same, because the
+   * box it clicks is the box that looks like the field.
+   */
+  function onGroupClick(e: MouseEvent): void {
+    // A drag that selects digits in a segment and ends on the padding fires
+    // its click on the group, the nearest element both ends share. Where the
+    // press started tells that drag from a press on the padding. Which
+    // element holds focus does not: iOS Safari keeps a focused input focused
+    // when a finger taps something that cannot take focus, so a guard on
+    // focus would refuse a tap on the next segment's box. A click from the
+    // keyboard has no press before it, and the flag is reset by every click.
+    const startedInSegment = pressInSegment;
+    pressInSegment = false;
+    if (disabled || !group) return;
+    if ((e.target as Element | null)?.closest('[data-segment]')) return;
+    if (startedInSegment) return;
+    let nearest: HTMLElement | null = null;
+    let best = Infinity;
+    for (const el of group.querySelectorAll<HTMLElement>('[data-segment]')) {
+      const box = el.getBoundingClientRect();
+      const distance = Math.max(box.left - e.clientX, 0, e.clientX - box.right);
+      if (distance < best) {
+        best = distance;
+        nearest = el;
+      }
+    }
+    nearest?.focus();
+  }
+
   function onMeridiemKeydown(e: KeyboardEvent): void {
     // Left and right belong to the field: they walk the segments. Up and down
     // step the value as they do on every other segment, and the first letter
@@ -414,44 +455,63 @@
     </label>
   {/if}
 
+  <!--
+    Under a finger each segment takes a 44px hit box round its 28px or 32px
+    visual. The segments spread apart there so their centers sit 44px apart
+    and no box takes its neighbor's: a 4px gap each side of a colon held at
+    8px, and 10px before AM or PM. The field grows 8px wider, more with
+    seconds or AM and PM, and a mouse sees it as it was.
+
+    The press and the click on the group only move focus to a segment, which
+    Tab and the label already reach, so they need no key handler of their own.
+  -->
+  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
   <div
     bind:this={group}
     role="group"
     aria-labelledby={label ? `${fieldId}-label` : undefined}
     aria-label={label ? undefined : 'Time'}
     aria-describedby={describedBy(fieldId, error, hint)}
-    class="{CONTROL_SEGMENTED} {segmentedBorder(!!error)} {disabled
+    onpointerdown={onGroupPointerdown}
+    onclick={onGroupClick}
+    class="{CONTROL_SEGMENTED} coarse:gap-1 {segmentedBorder(!!error)} {disabled
       ? 'cursor-not-allowed opacity-50'
       : ''}"
   >
     {#each digitSegments as segment, i (segment)}
       {#if i > 0}
-        <span aria-hidden="true" class="text-faint">:</span>
+        <span aria-hidden="true" class="text-faint coarse:w-2 coarse:text-center">:</span>
       {/if}
-      <input
-        data-segment={segment}
-        id="{fieldId}-{segment}"
-        type="text"
-        inputmode="numeric"
-        role="spinbutton"
-        autocomplete="off"
-        spellcheck="false"
-        maxlength="2"
-        {disabled}
-        value={shown(segment)}
-        aria-label={SEGMENT_LABEL[segment]}
-        aria-valuenow={shownNow(segment)}
-        aria-valuemin={segmentMin(segment)}
-        aria-valuemax={segmentMax(segment)}
-        aria-valuetext={valueText(segment)}
-        aria-invalid={error ? 'true' : undefined}
-        aria-required={required ? 'true' : undefined}
-        onkeydown={(e) => onSegmentKeydown(segment, e)}
-        oninput={(e) => onSegmentInput(segment, e)}
-        onblur={() => onSegmentBlur(segment)}
-        onfocus={(e) => e.currentTarget.select()}
-        class="{CONTROL_SEGMENT} w-7"
-      />
+      <!-- An input draws no pseudo-element, so the hit box sits on a span
+           round it, and the group's click handler focuses the input a tap on
+           the box lands beside. A label would do it without script, but it
+           would be a second label in the field for every segment. -->
+      <span data-segment-box class="{HIT_AREA} inline-flex">
+        <input
+          data-segment={segment}
+          id="{fieldId}-{segment}"
+          type="text"
+          inputmode="numeric"
+          role="spinbutton"
+          autocomplete="off"
+          spellcheck="false"
+          maxlength="2"
+          {disabled}
+          value={shown(segment)}
+          aria-label={SEGMENT_LABEL[segment]}
+          aria-valuenow={shownNow(segment)}
+          aria-valuemin={segmentMin(segment)}
+          aria-valuemax={segmentMax(segment)}
+          aria-valuetext={valueText(segment)}
+          aria-invalid={error ? 'true' : undefined}
+          aria-required={required ? 'true' : undefined}
+          onkeydown={(e) => onSegmentKeydown(segment, e)}
+          oninput={(e) => onSegmentInput(segment, e)}
+          onblur={() => onSegmentBlur(segment)}
+          onfocus={(e) => e.currentTarget.select()}
+          class="{CONTROL_SEGMENT} w-7"
+        />
+      </span>
     {/each}
 
     {#if hour12}
@@ -473,7 +533,7 @@
         aria-required={required ? 'true' : undefined}
         onclick={() => setMeridiem(meridiem === 'AM' ? 'PM' : 'AM')}
         onkeydown={onMeridiemKeydown}
-        class="{CONTROL_SEGMENT} ms-1 w-8 cursor-pointer"
+        class="{HIT_AREA} {CONTROL_SEGMENT} ms-1 coarse:ms-2.5 w-8 cursor-pointer"
       >
         {meridiem}
       </button>

package/dist/components/TreeView.svelte

@@ -9,6 +9,7 @@
     type TreeNode,
     type TriState,
   } from '../internal/tree.js';
+  import { TOUCH_GROW } from '../internal/touch.js';
 
   interface Props {
     nodes: TreeNode<T>[];
@@ -42,6 +43,17 @@
   let activeId: string | undefined = $state(undefined);
 
   const expandedSet = $derived(new Set(expanded));
+
+  /**
+   * Branches whose children have been shown once. They stay mounted after a
+   * collapse so the collapse can animate. A branch nobody opened mounts
+   * nothing, so a tree of thousands of nodes renders what a reader opened and
+   * not the whole tree.
+   */
+  const shown = $state<Record<string, boolean>>({});
+  $effect.pre(() => {
+    for (const id of expandedSet) shown[id] = true;
+  });
   const checkedSet = $derived(new Set(checked));
 
   /**
@@ -267,10 +279,13 @@
       <!--
         Indentation is a style attribute reading the spacing tokens. A class
         built by interpolating the depth matches no candidate in Tailwind's
-        scan, so no rule is generated and every row draws flush left.
+        scan, so no rule is generated and every row draws flush left. Under a
+        finger the 32px row grows to the control height, as a SidebarNav row
+        does, and drops its padding, which would stand a row with a 44px
+        check slot 12px taller than the rest.
       -->
       <div
-        class="flex w-full items-center gap-2 rounded-md py-1.5 pe-2 text-sm transition-colors {rowPaint(
+        class="{TOUCH_GROW} flex w-full items-center gap-2 rounded-md py-1.5 pe-2 text-sm coarse:py-0 transition-colors {rowPaint(
           selected === node.id,
           !!node.disabled,
         )}"
@@ -295,8 +310,11 @@
             A painted box rather than an input: the treeitem itself carries
             aria-checked, and a focusable control inside the row would put a
             second tab stop in a widget whose whole point is that it has one.
+            Under a finger the slot grows to a 44px square around the 14px
+            box. A press inside it checks, and the rest of the row activates,
+            so the two targets sit side by side and neither covers the other.
           -->
-          <span data-tree-check class="flex shrink-0 items-center">
+          <span data-tree-check class="{TOUCH_GROW} flex shrink-0 items-center justify-center">
             <span class={choiceBox('checkbox', 'sm', state === 'all', state === 'some')}>
               {#if state !== 'none'}
                 <svg width="10" height="8" viewBox="0 0 10 8" fill="none" aria-hidden="true">
@@ -325,10 +343,26 @@
         {/if}
       </div>
 
-      {#if isBranch(node) && open}
-        <ul role="group">
-          {@render branch(node.children ?? [], depth + 1, node.id)}
-        </ul>
+      <!--
+        A branch opens and shuts on grid-template-rows, the AccordionItem
+        collapse, so its children slide rather than appear in one frame. Shut,
+        they are inert: out of the tab order and the accessibility tree while
+        they stay mounted for the collapse to play.
+      -->
+      {#if isBranch(node)}
+        <div
+          class="grid transition-[grid-template-rows] duration-base {open
+            ? 'grid-rows-[1fr]'
+            : 'grid-rows-[0fr]'}"
+        >
+          <div class="overflow-hidden">
+            {#if open || shown[node.id]}
+              <ul role="group" inert={!open}>
+                {@render branch(node.children ?? [], depth + 1, node.id)}
+              </ul>
+            {/if}
+          </div>
+        </div>
       {/if}
     </li>
   {/each}

package/dist/components/dialog/ConfirmDialog.svelte

@@ -78,7 +78,7 @@
     <div
       class="flex items-center justify-center w-10 h-10 rounded-full bg-warn/10 text-warn shrink-0"
     >
-      <TriangleAlert class="w-5 h-5" />
+      <TriangleAlert size={20} />
     </div>
     <div class="flex-1 min-w-0">
       <p class="text-sm text-fg font-medium">{title}</p>

package/dist/components/dialog/Dialog.svelte

@@ -14,6 +14,7 @@
   import type { DialogEntry } from './types.js';
   import { sizeClass } from './types.js';
   import { overlay } from '../../internal/overlay.js';
+  import { HIT_AREA } from '../../internal/touch.js';
   import * as motion from '../../motion.js';
   import { closeDialog, dismissDialog } from './dialog-manager.svelte';
   import ConfirmDialog from './ConfirmDialog.svelte';
@@ -139,13 +140,16 @@
         </div>
 
         {#if !entry.options.persistent}
+          <!-- The 32px face keeps its 44px hit box under a finger, as Modal's
+               and Drawer's close crosses do. -->
           <button
-            class="inline-flex items-center justify-center w-8 h-8 -me-2 rounded-lg
+            type="button"
+            class="{HIT_AREA} 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 shrink-0"
             onclick={() => handleClose()}
             aria-label="Close"
           >
-            <X class="w-4 h-4" />
+            <X size={16} />
           </button>
         {/if}
       </div>

package/dist/index.d.ts

@@ -103,4 +103,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.38.2";
+export declare const VERSION = "0.38.4";

package/dist/index.js

@@ -116,4 +116,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.38.2';
+export const VERSION = '0.38.4';

package/dist/internal/choice.d.ts

@@ -127,8 +127,13 @@ export declare const CHOICE_LEGEND = "text-sm font-medium text-fg mb-1.5";
  * A horizontal group gets a wider inline gap than block gap: options read as
  * separate choices across a row and as one list down a column, and an equal gap
  * in both axes makes a wrapped row look like a grid.
+ *
+ * Under a finger the rows of an inline group move apart until their 44px hit
+ * boxes meet. At the 8px a mouse keeps, each box covered a third of the row
+ * below it, and the later row takes an overlap, so a tap on the bottom of one
+ * option picked the next one. A card is taller than the box and keeps its gap.
  */
-export declare function choiceGroupList(orientation: ChoiceOrientation): string;
+export declare function choiceGroupList(orientation: ChoiceOrientation, size: ChoiceSize, variant: ChoiceVariant): string;
 /**
  * The check and the mixed marks, as SVG path data on the box's own grid.
  *

package/dist/internal/choice.js

@@ -173,12 +173,28 @@ export const CHOICE_LEGEND = `${FIELD_LABEL} mb-1.5`;
  * A horizontal group gets a wider inline gap than block gap: options read as
  * separate choices across a row and as one list down a column, and an equal gap
  * in both axes makes a wrapped row look like a grid.
+ *
+ * Under a finger the rows of an inline group move apart until their 44px hit
+ * boxes meet. At the 8px a mouse keeps, each box covered a third of the row
+ * below it, and the later row takes an overlap, so a tap on the bottom of one
+ * option picked the next one. A card is taller than the box and keeps its gap.
  */
-export function choiceGroupList(orientation) {
-    return orientation === 'horizontal'
+export function choiceGroupList(orientation, size, variant) {
+    const list = orientation === 'horizontal'
         ? 'flex flex-row flex-wrap gap-x-5 gap-y-2'
         : 'flex flex-col gap-2';
+    return variant === 'inline' ? `${list} ${COARSE_ROW_GAP[size]}` : list;
 }
+/**
+ * 44px less the label line an inline row is as tall as: 16, 20 or 24px.
+ * Spelled out per size because Tailwind generates only the class names it
+ * finds written whole.
+ */
+const COARSE_ROW_GAP = {
+    sm: 'coarse:gap-y-7',
+    md: 'coarse:gap-y-6',
+    lg: 'coarse:gap-y-5',
+};
 /**
  * The check and the mixed marks, as SVG path data on the box's own grid.
  *

package/dist/internal/panel.d.ts

@@ -70,7 +70,8 @@ export declare const PANEL_LIST = "max-h-panel-max overflow-y-auto overscroll-co
  * No background and no text color of its own: it inherits both from the
  * surface, which leaves each state below a single utility to override.
  * rounded-lg, one step inside the surface's rounded-xl, so the hover tint and
- * the active ring follow the row's own corners.
+ * the active ring follow the row's own corners. Under a finger the 36px row
+ * grows to the control height, as Dropdown's menu item, the same row, does.
  */
 export declare const PANEL_OPTION: string;
 /**
@@ -157,6 +158,10 @@ export declare const PANEL_ABOVE = "bottom-full mb-1 origin-bottom";
  * the cap without this code knowing its value. A region marked uncapped takes
  * the room alone.
  *
+ * A panel that would run past the left or the right edge of the clipping
+ * ancestor or the viewport slides back inside both, and one wider than that
+ * room keeps its start edge in view.
+ *
  * 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
  * list's own scrolling never re-measures. A server render has no window and

package/dist/internal/panel.js

@@ -38,6 +38,7 @@
  *
  * Not exported from the package entry point: this is an implementation detail.
  */
+import { TOUCH_GROW } from './touch.js';
 /**
  * The floating surface every popover paints.
  *
@@ -70,9 +71,10 @@ export const PANEL_LIST = 'max-h-panel-max overflow-y-auto overscroll-contain px
  * No background and no text color of its own: it inherits both from the
  * surface, which leaves each state below a single utility to override.
  * rounded-lg, one step inside the surface's rounded-xl, so the hover tint and
- * the active ring follow the row's own corners.
+ * the active ring follow the row's own corners. Under a finger the 36px row
+ * grows to the control height, as Dropdown's menu item, the same row, does.
  */
-export const PANEL_OPTION = 'flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-start text-sm ' +
+export const PANEL_OPTION = `${TOUCH_GROW} flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-start text-sm ` +
     'transition-colors outline-none hover:bg-surface-2 ' +
     'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand';
 /**
@@ -195,6 +197,10 @@ function swap(node, remove, add) {
  * the cap without this code knowing its value. A region marked uncapped takes
  * the room alone.
  *
+ * A panel that would run past the left or the right edge of the clipping
+ * ancestor or the viewport slides back inside both, and one wider than that
+ * room keeps its start edge in view.
+ *
  * 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
  * list's own scrolling never re-measures. A server render has no window and
@@ -215,8 +221,9 @@ export function placePanel(node) {
         if (list !== null)
             list.style.maxHeight = '';
         const rect = anchor.getBoundingClientRect();
-        const clipTop = clip === null ? 0 : clip.getBoundingClientRect().top;
-        const clipBottom = clip === null ? window.innerHeight : clip.getBoundingClientRect().bottom;
+        const clipBox = clip === null ? null : clip.getBoundingClientRect();
+        const clipTop = clipBox?.top ?? 0;
+        const clipBottom = clipBox?.bottom ?? window.innerHeight;
         const below = clipBottom - rect.bottom - PANEL_EDGE_GAP;
         const above = rect.top - clipTop - PANEL_EDGE_GAP;
         const natural = node.scrollHeight;
@@ -225,6 +232,28 @@ export function placePanel(node) {
             swap(node, PANEL_BELOW, PANEL_ABOVE);
         else
             swap(node, PANEL_ABOVE, PANEL_BELOW);
+        // A panel wider than the room beside its anchor slides back inside what
+        // the reader can see, which is the clip and the viewport both: the
+        // calendar under a finger is as wide as a 320px phone, and its field
+        // starts at the page gutter or inside a modal body's padding. Where it is
+        // wider than that room it keeps its start edge in view. Read from the
+        // layout box, which the entrance preset's scale does not shrink.
+        const viewport = document.documentElement.clientWidth || window.innerWidth;
+        const lo = Math.max(0, clipBox?.left ?? 0);
+        const hi = Math.min(viewport, clipBox?.right ?? viewport);
+        const left = rect.left + node.offsetLeft;
+        const right = left + node.offsetWidth;
+        let shift = 0;
+        if (node.offsetWidth > hi - lo) {
+            shift = getComputedStyle(node).direction === 'rtl' ? hi - right : lo - left;
+        }
+        else if (right > hi) {
+            shift = hi - right;
+        }
+        else if (left < lo) {
+            shift = lo - left;
+        }
+        node.style.translate = shift === 0 ? '' : `${shift}px 0`;
         if (list === null)
             return;
         // What the surface adds around the list, a search field for instance, is

package/dist/internal/tone.d.ts

@@ -25,3 +25,14 @@ export declare function statusTone(tone: StatusToneInput): StatusTone;
  * are stroked SVG.
  */
 export declare const TONE_GLYPH: Record<StatusTone, string>;
+/**
+ * A tinted chip that sits on a row which paints its own highlight: a
+ * SidebarNav badge, the AccountMenu initials.
+ *
+ * A translucent tint lets the row show through, so the 15 percent chip that
+ * read 4.5:1 on a resting row dropped to 3.69:1 on a current row under the
+ * pointer, where the row turns to line. Mixed into surface instead, the chip
+ * is opaque and paints the same on every row state. On a resting row, which
+ * is surface, it is the color the translucent tint was.
+ */
+export declare const ROW_CHIP_TONE: Record<Exclude<AccentTone, 'neutral'>, string>;

package/dist/internal/tone.js

@@ -27,3 +27,20 @@ export const TONE_GLYPH = {
     warn: 'M12 8v5M12 17h.01',
     danger: 'M18 6L6 18M6 6l12 12',
 };
+/**
+ * A tinted chip that sits on a row which paints its own highlight: a
+ * SidebarNav badge, the AccountMenu initials.
+ *
+ * A translucent tint lets the row show through, so the 15 percent chip that
+ * read 4.5:1 on a resting row dropped to 3.69:1 on a current row under the
+ * pointer, where the row turns to line. Mixed into surface instead, the chip
+ * is opaque and paints the same on every row state. On a resting row, which
+ * is surface, it is the color the translucent tint was.
+ */
+export const ROW_CHIP_TONE = {
+    brand: 'bg-[color-mix(in_srgb,var(--color-brand)_15%,var(--color-surface))] text-brand',
+    success: 'bg-[color-mix(in_srgb,var(--color-success)_15%,var(--color-surface))] text-success',
+    warn: 'bg-[color-mix(in_srgb,var(--color-warn)_15%,var(--color-surface))] text-warn',
+    danger: 'bg-[color-mix(in_srgb,var(--color-danger)_15%,var(--color-surface))] text-danger',
+    violet: 'bg-[color-mix(in_srgb,var(--color-violet)_15%,var(--color-surface))] text-violet',
+};

package/dist/styles/theme.css

@@ -356,8 +356,9 @@
  * be positioned (`relative`, or `absolute` where it already is) for the box
  * to center on it. The utility does not set position itself, because a
  * position it set would fight the `absolute` an input's clear button relies
- * on. Two neighbors' boxes may overlap. The later one in document order
- * wins the overlap, which is the spacing exception SC 2.5.8 allows for.
+ * on. Neighbors are spaced so their boxes meet rather than overlap: the
+ * later one in document order takes an overlap, so a tap near the edge of
+ * one control lands on the next.
  */
 @custom-variant coarse (@media (pointer: coarse));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.38.2",
+  "version": "0.38.4",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",

package/src/lib/styles/theme.css

@@ -356,8 +356,9 @@
  * be positioned (`relative`, or `absolute` where it already is) for the box
  * to center on it. The utility does not set position itself, because a
  * position it set would fight the `absolute` an input's clear button relies
- * on. Two neighbors' boxes may overlap. The later one in document order
- * wins the overlap, which is the spacing exception SC 2.5.8 allows for.
+ * on. Neighbors are spaced so their boxes meet rather than overlap: the
+ * later one in document order takes an overlap, so a tap near the edge of
+ * one control lands on the next.
  */
 @custom-variant coarse (@media (pointer: coarse));