@lyeve-labs/ui-kit 0.38.0 → 0.38.2

package/dist/components/FileInput.svelte

@@ -90,7 +90,7 @@
     <div class="text-sm">
       <span class="{error ? 'text-danger' : 'text-brand'} font-medium">Click to upload</span>
       <span class="text-muted"> or drag & drop</span>
-      {#if accept}<p class="mt-0.5 text-xs text-faint">{accept}</p>{/if}
+      {#if accept}<p class="mt-0.5 text-xs text-faint [overflow-wrap:anywhere]">{accept}</p>{/if}
     </div>
     <input
       type="file"

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/PageHeader.svelte

@@ -62,12 +62,16 @@
       Each size token names its own leading and tracking. A `text-*` token
       built from `--text-*` alone sets font-size and leaves line-height to
       whatever it inherits, which is not the ratio the ramp specifies.
+
+      A title can be a user value with no spaces, such as a tenant slug. It
+      breaks anywhere only when a word does not fit the line, so a title with
+      spaces still wraps at them, and a long slug no longer widens the page.
     -->
     <h1
       data-testid="page-title"
-      class={compact
+      class="[overflow-wrap:anywhere] {compact
         ? 'text-sm font-semibold text-fg'
-        : 'text-h2 leading-h2 tracking-h2 font-bold text-fg'}
+        : 'text-h2 leading-h2 tracking-h2 font-bold text-fg'}"
     >
       {title}
     </h1>

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

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

package/package.json

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