@lyeve-labs/ui-kit 0.38.1 → 0.38.3

package/dist/components/FilterChips.svelte

@@ -135,6 +135,10 @@
   page. The row carries the field marker while it reports a message, so a
   panel sizing itself to its form counts it as the one field it then is.
 
+  Under a finger each chip draws a 44px hit box round a 26px chip, 9px past
+  its top and bottom. Wrapped rows sit 18px apart there, so the boxes of two
+  rows meet without one row's taps landing on the row above.
+
   The row carries no aria-invalid. ARIA does not allow it on a group, or on
   the buttons and links inside one, so an error reaches a reader through
   aria-describedby, which reads the message itself.
@@ -142,7 +146,7 @@
 <div
   data-field={error || hint ? '' : undefined}
   {id}
-  class={cn('flex flex-wrap gap-1.5', klass)}
+  class={cn('flex flex-wrap gap-1.5 coarse:gap-y-4.5', klass)}
   role="group"
   aria-label={label}
   aria-describedby={describedByIds}

package/dist/components/Pagination.svelte

@@ -130,15 +130,60 @@
   }
 
   /**
-   * A page number is unique in the list, so it is its own key. Both gaps are
-   * spelled 'gap', so they take their position as well. Keying on the index
-   * alone made every slot change identity when a page was inserted ahead of it.
+   * The pages a phone held by a finger shows: the first, the last and the
+   * current one, with a gap for each run between them. Five slots at most, so
+   * Previous, Next and the five each take a 44px box on one row of a phone.
+   * Every page in it is also in the list above, which keeps one element per
+   * page when the two lists are drawn together.
    */
-  function slotKey(slot: PageSlot, index: number): string {
-    return slot === 'gap' ? `gap-${index}` : `page-${slot}`;
+  function touchPageNumbers(current: number, last: number): Set<number> {
+    if (last <= 5) return new Set(Array.from({ length: last }, (_, i) => i + 1));
+    return new Set([1, current, last]);
   }
 
-  let nums = $derived(counted ? pageNumbers(safePage, totalPages) : []);
+  /**
+   * A slot is a page or a gap, and `only` names the one layout that draws it:
+   * `fine` for a page or gap the touch layout folds away, `touch` for a gap
+   * only the touch layout draws. Unset means both draw it.
+   *
+   * Both layouts are in the markup and the stylesheet picks one, because the
+   * pointer is a media query: a list chosen by script would draw the mouse
+   * layout on the server and switch after hydration. A gap stands where the
+   * run it folds starts, so a gap both layouts draw is one element, and a page
+   * never disappears without a gap in its place.
+   */
+  type Slot = { key: string; page: number | null; only?: 'fine' | 'touch' };
+
+  function pageSlots(current: number, last: number): Slot[] {
+    const fine = new Set(pageNumbers(current, last).filter((s): s is number => s !== 'gap'));
+    const touch = touchPageNumbers(current, last);
+    const starts = new Set<number>();
+    for (const p of fine) starts.add(p).add(p + 1);
+    const slots: Slot[] = [];
+    for (const p of [...starts].filter((p) => p <= last).sort((a, b) => a - b)) {
+      const fineGap = !fine.has(p) && fine.has(p - 1);
+      const touchGap = !touch.has(p) && touch.has(p - 1);
+      if (fineGap || touchGap) {
+        const only = fineGap && touchGap ? undefined : fineGap ? 'fine' : 'touch';
+        slots.push({ key: `gap-${p}`, page: null, only });
+      }
+      if (fine.has(p))
+        slots.push({ key: `page-${p}`, page: p, only: touch.has(p) ? undefined : 'fine' });
+    }
+    return slots;
+  }
+
+  /**
+   * The display of a slot. A touch-only gap carries no base `inline-flex`,
+   * which would tie with `hidden` and leave the outcome to stylesheet order.
+   */
+  function display(only: Slot['only']): string {
+    if (only === 'fine') return 'inline-flex max-sm:coarse:hidden';
+    if (only === 'touch') return 'hidden max-sm:coarse:inline-flex';
+    return 'inline-flex';
+  }
+
+  let slots = $derived(counted ? pageSlots(safePage, totalPages) : []);
 
   /**
    * The noun as it will be read.
@@ -181,9 +226,12 @@
   }
 
   /**
-   * 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.
+   * 28px drawn, 44px under a finger. Growing the visual would push the
+   * neighbors apart, so the hit box grows instead. Under a finger the steps
+   * sit 16px apart, so each 44px box meets its neighbor's without covering
+   * it. Nine steps that far apart are 380px, wider than a phone, so a phone
+   * held by a finger shows the touch list of five pages and gaps instead, and
+   * from the sm width up the full list fits.
    */
   const btnBase = `${HIT_AREA} inline-flex items-center justify-center w-7 h-7 rounded text-xs font-medium transition-colors`;
 
@@ -266,15 +314,19 @@
   <span class="shrink-0 text-xs text-faint">{summary}</span>
 
   {#if hasControls}
-    <div class="ms-auto flex flex-wrap items-center gap-0.5">
+    <div class="ms-auto flex flex-wrap items-center gap-0.5 coarse:gap-4">
       {@render step(safePage - 1, 'Previous page', canPrev, 'M15 18l-6-6 6-6')}
 
-      {#each nums as n, i (slotKey(n, i))}
-        {#if n === 'gap'}
+      {#each slots as slot (slot.key)}
+        {@const n = slot.page}
+        {#if n === null}
           <!-- Three drawn dots, not the ellipsis character: a font glyph lands
                at a different optical weight from every other icon here, and the
                character is what the screen reader was speaking. -->
-          <span class="inline-flex w-7 items-center justify-center text-faint" aria-hidden="true">
+          <span
+            class="{display(slot.only)} w-7 items-center justify-center text-faint"
+            aria-hidden="true"
+          >
             <svg
               width="14"
               height="14"
@@ -292,16 +344,20 @@
           <a
             href={linkTo(n, true)}
             aria-current={safePage === n ? 'page' : undefined}
-            class="{btnBase} {safePage === n ? btnCurrent : btnRest}"
+            class="{btnBase} {slot.only ? 'max-sm:coarse:hidden' : ''} {safePage === n
+              ? btnCurrent
+              : btnRest}"
           >
             {n}
           </a>
         {:else}
           <button
             type="button"
-            onclick={() => onchange?.(n as number)}
+            onclick={() => onchange?.(n)}
             aria-current={safePage === n ? 'page' : undefined}
-            class="{btnBase} {safePage === n ? btnCurrent : btnRest}"
+            class="{btnBase} {slot.only ? 'max-sm:coarse:hidden' : ''} {safePage === n
+              ? btnCurrent
+              : btnRest}"
           >
             {n}
           </button>

package/dist/components/SegmentedControl.svelte

@@ -99,6 +99,10 @@
    * Button does, and each segment keeps its visual inside the track and takes
    * a hit box of the control size. A segment that grew instead would stand
    * the track six pixels proud of the Input beside it.
+   *
+   * A segment is never narrower than the control size under a finger, so a
+   * short label such as "6h" takes a 44px target across as well, and the hit
+   * boxes of two neighbors do not overlap.
    */
   const SIZES: Record<Size, { row: string; segment: string; icon: number }> = {
     sm: { row: 'h-8 coarse:min-h-control', segment: 'gap-1.5 px-2.5 text-xs', icon: 14 },
@@ -228,7 +232,16 @@
        carries no aria-checked, and what marks the current one is aria-current,
        the attribute a reader already knows from navigation. ARIA allows
        aria-invalid on a radiogroup and not on a group, so a row of links
-       reports an error through aria-describedby alone. -->
+       reports an error through aria-describedby alone.
+
+       Under a finger the track draws its frame as an inset outline with no
+       border, and its padding grows by the border's pixel. A caller that
+       lets a long row scroll clips the segments at the track's padding box,
+       which a border keeps 2px short of the outer edge, so each segment's
+       44px hit box lost a pixel at the top and the bottom. The track's own
+       overflow does not clip its outline, and forced colors keep an outline
+       where they drop a shadow. The drawn frame and the segments stay where
+       they were. -->
   <div
     bind:this={rootEl}
     {id}
@@ -238,14 +251,16 @@
     aria-describedby={describedByIds}
     onfocusout={linked ? onGroupFocusOut : undefined}
     class="inline-flex items-stretch rounded-lg border {error
-      ? 'border-danger'
-      : 'border-line-strong'} bg-surface-2 p-0.5 {SIZES[size].row} {disabled ? 'opacity-50' : ''}"
+      ? 'border-danger coarse:outline-danger'
+      : 'border-line-strong coarse:outline-line-strong'} bg-surface-2 p-0.5 coarse:border-0 coarse:p-0.75 coarse:outline coarse:outline-1 coarse:-outline-offset-1 {SIZES[
+      size
+    ].row} {disabled ? 'opacity-50' : ''}"
   >
     {#each options as option, i (option.value)}
       {@const selected = option.value === value}
       {@const Icon = option.icon}
       {@const segment =
-        `${HIT_AREA} inline-flex items-center justify-center rounded-md outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand disabled:cursor-not-allowed ` +
+        `${HIT_AREA} inline-flex coarse:min-w-control items-center justify-center rounded-md outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand disabled:cursor-not-allowed ` +
         SIZES[size].segment +
         (selected
           ? ' bg-surface text-brand shadow-sm ring-1 ring-inset ring-brand/40'

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/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.1";
+export declare const VERSION = "0.38.3";

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.1';
+export const VERSION = '0.38.3';

package/package.json

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