@lyeve-labs/ui-kit 0.18.0 → 0.20.0

package/dist/components/Pagination.svelte

@@ -1,24 +1,88 @@
 <script lang="ts">
+  import { safeHref } from '../internal/href.js';
+  import { formatCount } from '../internal/number.js';
+
+  interface Base {
+    page: number;
+    /**
+     * Collection size, when the endpoint states one.
+     *
+     * Leave it out for a list whose endpoint reports no count and say `hasNext`
+     * instead. Absent is not zero: a caller who does state a total, even a
+     * nonsense one, gets the counted pager with that total clamped.
+     */
+    total?: number;
+    perPage?: number;
+    /**
+     * Whether a page after this one exists.
+     *
+     * Read only when `total` is absent, because a counted list already knows
+     * where it ends. It is the answer an endpoint can give without counting the
+     * collection: ask for one row more than the page holds and see if it comes
+     * back.
+     */
+    hasNext?: boolean;
+    /**
+     * What the list holds, in the plural: 'files', 'jobs', 'webhooks'.
+     *
+     * The summary names it, because a console that stacks three lists under one
+     * page title prints '51 to 100' three times and says of what nowhere. Left
+     * out, the summary reads exactly as it did before this existed.
+     *
+     * Plural at every size, including a list of one. The noun labels the
+     * collection here rather than agreeing with a figure in the sentence, the
+     * same way the column header above it does, and a singular form would have
+     * to pick which of the three figures governs it.
+     */
+    noun?: string;
+    class?: string;
+  }
+
+  /**
+   * How the pager moves, and why it takes both spellings.
+   *
+   * `onchange` cannot run before the page hydrates, so a pager that has only a
+   * callback is inert on the first paint and an early click lands on nothing.
+   * That is not a rare state: it is every server-rendered document, for as long
+   * as the bundle takes to arrive. A caller that has to page from that document
+   * supplies `href` instead and gets links, which the browser follows with no
+   * script at all.
+   *
+   * Exclusive rather than both together: an anchor whose click also ran the
+   * callback would page twice, once through the handler and again through the
+   * navigation it did not cancel.
+   */
+  type Nav =
+    | { onchange: (page: number) => void; href?: undefined }
+    | { href: (page: number) => string; onchange?: undefined };
+
   let {
     page,
-    total,
+    total = undefined,
     perPage = 20,
+    hasNext = false,
+    noun = '',
     class: cls = '',
     onchange,
-  }: {
-    page: number;
-    total: number;
-    perPage?: number;
-    class?: string;
-    onchange: (page: number) => void;
-  } = $props();
+    href,
+  }: Base & Nav = $props();
 
-  let safeTotal = $derived(isFinite(total) && total >= 0 ? total : 0);
+  /**
+   * A stated total is what makes the numbered pages knowable. Without one the
+   * pager can offer the step either side of where it stands and nothing more,
+   * because the last page is not a number anybody here has.
+   */
+  let counted = $derived(total !== undefined);
+  let safeTotal = $derived(typeof total === 'number' && isFinite(total) && total >= 0 ? total : 0);
   let safePage = $derived(isFinite(page) && page >= 1 ? page : 1);
   let totalPages = $derived(Math.max(1, Math.ceil(safeTotal / perPage)));
   let from = $derived(Math.min((safePage - 1) * perPage + 1, safeTotal));
   let to = $derived(Math.min(safePage * perPage, safeTotal));
 
+  let canPrev = $derived(safePage > 1);
+  let canNext = $derived(counted ? safePage < totalPages : hasNext);
+  let hasControls = $derived(counted ? totalPages > 1 : canPrev || canNext);
+
   /**
    * The elided run is the sentinel string 'gap', never the horizontal-ellipsis
    * character.
@@ -51,46 +115,127 @@
     return slot === 'gap' ? `gap-${index}` : `page-${slot}`;
   }
 
-  let nums = $derived(pageNumbers(safePage, totalPages));
+  let nums = $derived(counted ? pageNumbers(safePage, totalPages) : []);
+
+  /**
+   * The noun as it will be read.
+   *
+   * Trimmed, and empty means absent: a caller composing the word from data can
+   * hand over ' ' as easily as 'files', and a summary that opens with a stray
+   * space is worse than one that names nothing.
+   */
+  let label = $derived(noun.trim());
+
+  /**
+   * The count, when there is one to state.
+   *
+   * An uncounted list says which page it is on and nothing else. It cannot say
+   * "1 to 20 of 400" without the total, and it cannot say "1 to 20" either: the
+   * last page is short and this component is never told how short. It still
+   * groups the page number: `href` mode puts that number in the URL, so a link
+   * or a reader can land on page 5,000 without stepping there.
+   *
+   * Every figure is grouped, because a pager sits under a table that groups its
+   * own figures and the pager is where the largest number on the screen is.
+   */
+  let summary = $derived.by(() => {
+    if (!counted) {
+      return label ? `${label}, page ${formatCount(safePage)}` : `Page ${formatCount(safePage)}`;
+    }
+    if (safeTotal === 0) return label ? `No ${label}` : 'No results';
+    const range = `${formatCount(from)} to ${formatCount(to)} of ${formatCount(safeTotal)}`;
+    return label ? `${label} ${range}` : range;
+  });
+
+  /** The target of a control, sanitized, or nothing when the step is unavailable. */
+  function linkTo(target: number, enabled: boolean): string | undefined {
+    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';
+
+  /**
+   * A page control that is not the page you are on, in every state a pointer
+   * can put it in.
+   *
+   * Held as well as hovered, because `hover:` never matches on a touch screen
+   * and paging is a thumb gesture: without the pressed step a tap on a phone
+   * changed the page with nothing on the control to say it had been hit.
+   *
+   * Stated once rather than spelled out on the previous button, the next button
+   * and every numbered one. It was written three times, and a state added to
+   * one copy is a state missing from two.
+   */
+  const btnRest = 'text-muted hover:text-fg hover:bg-surface-2 active:bg-line active:text-fg';
+
+  const btnCurrent = 'bg-brand text-ink';
+
+  /**
+   * A link with nowhere to go.
+   *
+   * An anchor has no `disabled`, and `disabled:` never matches one, so the two
+   * states have to be painted rather than declared. Dropping the href is what
+   * takes it out of the tab order and stops activation; the class is only the
+   * part a reader can see, at the same 30% the disabled buttons use.
+   */
+  const linkInert = 'pointer-events-none opacity-30';
 </script>
 
+{#snippet arrow(d: string)}
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    class="rtl:rotate-180"
+  >
+    <path {d} />
+  </svg>
+{/snippet}
+
+<!-- Previous and next, as a link when the caller builds hrefs and as a button
+     when it hands over a callback. The two branches carry the same classes and
+     the same label, so the pager reads and sounds the same either way. -->
+{#snippet step(target: number, label: string, enabled: boolean, d: string)}
+  {#if href}
+    <a
+      href={linkTo(target, enabled)}
+      aria-label={label}
+      aria-disabled={enabled ? undefined : 'true'}
+      class="{btnBase} {btnRest} {enabled ? '' : linkInert}"
+    >
+      {@render arrow(d)}
+    </a>
+  {:else}
+    <button
+      type="button"
+      disabled={!enabled}
+      onclick={() => onchange?.(target)}
+      aria-label={label}
+      class="{btnBase} {btnRest} disabled:cursor-not-allowed disabled:opacity-30"
+    >
+      {@render arrow(d)}
+    </button>
+  {/if}
+{/snippet}
+
 <!-- The summary renders whenever there is a count to state, and the page
      buttons only when there is more than one page. The whole component used to
      be behind `totalPages > 1`, and an empty list has one page, so the 'No
      results' line below could never appear and a single page of results showed
      no count at all. -->
 <div class="flex flex-wrap items-center gap-x-3 gap-y-2 {cls}">
-  <span class="text-xs text-faint shrink-0">
-    {safeTotal === 0 ? 'No results' : `${from} to ${to} of ${safeTotal}`}
-  </span>
-
-  {#if totalPages > 1}
-    <div class="flex flex-wrap items-center gap-0.5 ml-auto">
-      <button
-        type="button"
-        disabled={safePage <= 1}
-        onclick={() => onchange(safePage - 1)}
-        aria-label="Previous page"
-        class="{btnBase} text-muted hover:text-fg hover:bg-surface-2
-            disabled:opacity-30 disabled:cursor-not-allowed"
-      >
-        <svg
-          width="14"
-          height="14"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          aria-hidden="true"
-        >
-          <path d="M15 18l-6-6 6-6" />
-        </svg>
-      </button>
+  <span class="shrink-0 text-xs text-faint">{summary}</span>
+
+  {#if hasControls}
+    <div class="ms-auto flex flex-wrap items-center gap-0.5">
+      {@render step(safePage - 1, 'Previous page', canPrev, 'M15 18l-6-6 6-6')}
 
       {#each nums as n, i (slotKey(n, i))}
         {#if n === 'gap'}
@@ -111,43 +256,27 @@
               <path d="M5 12h.01M12 12h.01M19 12h.01" />
             </svg>
           </span>
+        {:else if href}
+          <a
+            href={linkTo(n, true)}
+            aria-current={safePage === n ? 'page' : undefined}
+            class="{btnBase} {safePage === n ? btnCurrent : btnRest}"
+          >
+            {n}
+          </a>
         {:else}
           <button
             type="button"
-            onclick={() => onchange(n as number)}
+            onclick={() => onchange?.(n as number)}
             aria-current={safePage === n ? 'page' : undefined}
-            class="{btnBase}
-                {safePage === n
-              ? 'bg-brand text-ink'
-              : 'text-muted hover:text-fg hover:bg-surface-2'}"
+            class="{btnBase} {safePage === n ? btnCurrent : btnRest}"
           >
             {n}
           </button>
         {/if}
       {/each}
 
-      <button
-        type="button"
-        disabled={safePage >= totalPages}
-        onclick={() => onchange(safePage + 1)}
-        aria-label="Next page"
-        class="{btnBase} text-muted hover:text-fg hover:bg-surface-2
-          disabled:opacity-30 disabled:cursor-not-allowed"
-      >
-        <svg
-          width="14"
-          height="14"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          aria-hidden="true"
-        >
-          <path d="M9 18l6-6-6-6" />
-        </svg>
-      </button>
+      {@render step(safePage + 1, 'Next page', canNext, 'M9 18l6-6-6-6')}
     </div>
   {/if}
 </div>

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

@@ -1,10 +1,60 @@
-type $$ComponentProps = {
+interface Base {
     page: number;
-    total: number;
+    /**
+     * Collection size, when the endpoint states one.
+     *
+     * Leave it out for a list whose endpoint reports no count and say `hasNext`
+     * instead. Absent is not zero: a caller who does state a total, even a
+     * nonsense one, gets the counted pager with that total clamped.
+     */
+    total?: number;
     perPage?: number;
+    /**
+     * Whether a page after this one exists.
+     *
+     * Read only when `total` is absent, because a counted list already knows
+     * where it ends. It is the answer an endpoint can give without counting the
+     * collection: ask for one row more than the page holds and see if it comes
+     * back.
+     */
+    hasNext?: boolean;
+    /**
+     * What the list holds, in the plural: 'files', 'jobs', 'webhooks'.
+     *
+     * The summary names it, because a console that stacks three lists under one
+     * page title prints '51 to 100' three times and says of what nowhere. Left
+     * out, the summary reads exactly as it did before this existed.
+     *
+     * Plural at every size, including a list of one. The noun labels the
+     * collection here rather than agreeing with a figure in the sentence, the
+     * same way the column header above it does, and a singular form would have
+     * to pick which of the three figures governs it.
+     */
+    noun?: string;
     class?: string;
+}
+/**
+ * How the pager moves, and why it takes both spellings.
+ *
+ * `onchange` cannot run before the page hydrates, so a pager that has only a
+ * callback is inert on the first paint and an early click lands on nothing.
+ * That is not a rare state: it is every server-rendered document, for as long
+ * as the bundle takes to arrive. A caller that has to page from that document
+ * supplies `href` instead and gets links, which the browser follows with no
+ * script at all.
+ *
+ * Exclusive rather than both together: an anchor whose click also ran the
+ * callback would page twice, once through the handler and again through the
+ * navigation it did not cancel.
+ */
+type Nav = {
     onchange: (page: number) => void;
+    href?: undefined;
+} | {
+    href: (page: number) => string;
+    onchange?: undefined;
 };
+type $$ComponentProps = Base & Nav;
 declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "">;
 type Pagination = ReturnType<typeof Pagination>;
 export default Pagination;

package/dist/components/PasswordInput.svelte

@@ -85,12 +85,12 @@
 <div class="{FIELD_WRAP} {klass}">
   {#if label}
     <label for={fieldId} class="{FIELD_LABEL} {labelHidden ? 'sr-only' : ''}">
-      {label}{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+      {label}{#if required}<span class="ms-0.5 text-danger" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 
   <div class="relative">
-    <!-- pr-10 overrides the px-3 CONTROL_BASE states, because `pr` is emitted
+    <!-- pe-10 overrides the px-3 CONTROL_BASE states, because `pe` is emitted
          after `px` and so wins. Without it a long key ran under the button and
          the operator could not read the end of what they had pasted. -->
     <input
@@ -107,7 +107,7 @@
       {onchange}
       aria-invalid={error ? 'true' : undefined}
       aria-describedby={describedBy(fieldId, error, hint)}
-      class="{CONTROL_BASE} {controlBorder(!!error)} {showToggle ? 'pr-10' : ''} {controlClass}"
+      class="{CONTROL_BASE} {controlBorder(!!error)} {showToggle ? 'pe-10' : ''} {controlClass}"
     />
 
     {#if showToggle}
@@ -120,7 +120,7 @@
         aria-pressed={revealed}
         aria-controls={fieldId}
         aria-label={revealed ? 'Hide password' : 'Show password'}
-        class="absolute top-1/2 right-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="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"
       >
         {#if revealed}
           <EyeOff size={15} aria-hidden="true" />

package/dist/components/Radio.svelte

@@ -145,7 +145,7 @@
                  own text it became part of the name, and the reader heard the
                  whole paragraph before it reached the selected state. -->
             <span id="{fieldId}-label" class="{choiceLabel(size)} {labelHidden ? 'sr-only' : ''}">
-              {label}{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+              {label}{#if required}<span class="ms-0.5 text-danger" aria-hidden="true">*</span>{/if}
             </span>
           {/if}
         </span>

package/dist/components/RadioGroup.svelte

@@ -109,7 +109,7 @@
     ahead of them saying what the set is for.
   -->
   <legend class="{FIELD_LABEL} {labelHidden ? 'sr-only' : ''}">
-    {label}{#if required}<span class="text-danger ml-0.5" aria-hidden="true">*</span>{/if}
+    {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span>{/if}
   </legend>
 
   <div class={choiceGroupList(orientation)}>

package/dist/components/SearchInput.svelte

@@ -51,7 +51,7 @@
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-faint"
+      class="pointer-events-none absolute start-3 top-1/2 -translate-y-1/2 text-faint"
       aria-hidden="true"
     >
       <circle cx="11" cy="11" r="8" /><path d="M21 21l-4.35-4.35" />
@@ -65,9 +65,9 @@
       {disabled}
       {value}
       oninput={handleInput}
-      class="{CONTROL_BASE} {controlBorder(false)} pl-9
+      class="{CONTROL_BASE} {controlBorder(false)} ps-9
         [&::-webkit-search-cancel-button]:appearance-none
-        {value ? 'pr-8' : 'pr-3'}"
+        {value ? 'pe-8' : 'pe-3'}"
     />
 
     {#if value}
@@ -84,7 +84,7 @@
         type="button"
         onclick={clear}
         aria-label="Clear search"
-        class="absolute right-2.5 top-1/2 -mx-1.5 -translate-y-1/2 p-1.5 text-faint
+        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"
       >
         <svg

package/dist/components/SegmentedControl.svelte

@@ -164,7 +164,9 @@
         onkeydown={(e) => onSegmentKeydown(e, i)}
         class="inline-flex items-center justify-center rounded-md outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand disabled:cursor-not-allowed {SIZES[
           size
-        ].segment} {selected ? 'bg-surface text-fg shadow-sm' : 'text-muted hover:text-fg'}"
+        ].segment} {selected
+          ? 'bg-surface text-fg shadow-sm'
+          : 'text-muted hover:text-fg active:bg-surface active:text-fg'}"
       >
         {#if Icon}
           <Icon size={SIZES[size].icon} class="shrink-0" />

package/dist/components/Select.svelte

@@ -274,7 +274,7 @@
 
 {#snippet chevron(open: boolean)}
   <span
-    class="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-faint"
+    class="pointer-events-none absolute end-2.5 top-1/2 -translate-y-1/2 text-faint"
     aria-hidden="true"
   >
     <svg
@@ -328,7 +328,7 @@
         height="12"
         viewBox="0 0 12 12"
         fill="none"
-        class="ml-auto shrink-0"
+        class="ms-auto shrink-0"
         aria-hidden="true"
       >
         <path
@@ -346,7 +346,7 @@
 <div class="{FIELD_WRAP} {cls}">
   {#if label}
     <label for={fieldId} class={FIELD_LABEL}>
-      {label}{#if required}<span class="text-danger ml-0.5" aria-hidden="true">*</span>{/if}
+      {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 
@@ -381,8 +381,8 @@
         aria-required={required ? 'true' : undefined}
         aria-describedby={describedBy(fieldId, error, hint)}
         {...box.triggerAttrs}
-        class="{CONTROL_BASE} {controlBorder(!!error)} flex cursor-pointer items-center gap-2 pr-8
-          text-left"
+        class="{CONTROL_BASE} {controlBorder(!!error)} flex cursor-pointer items-center gap-2 pe-8
+          text-start"
       >
         {#if trigger}
           {@render trigger({ selected, open: box.open })}
@@ -472,7 +472,7 @@
         onchange={nativeChange}
         aria-invalid={error ? 'true' : undefined}
         aria-describedby={describedBy(fieldId, error, hint)}
-        class="{CONTROL_BASE} {controlBorder(!!error)} cursor-pointer appearance-none pr-8"
+        class="{CONTROL_BASE} {controlBorder(!!error)} cursor-pointer appearance-none pe-8"
       >
         {#if children}
           {@render children()}

package/dist/components/SidebarNav.svelte

@@ -69,11 +69,25 @@
     'transition-colors duration-150 outline-none ' +
     'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand';
 
-  /** Exactly one border colour, one background and one text colour per state. */
+  /**
+   * Exactly one border colour, one background and one text colour per state.
+   *
+   * Every state answers the pointer, including the current one. It did not: the
+   * current row was the only paint with no hover step, and the current row is
+   * the tail of the active trail, so on any nav deep enough to have sections it
+   * is a nested entry. Beside its own siblings, which all lit up, the row for
+   * the page you were on read as the one dead entry in the list.
+   *
+   * The held step is separate from the hovered one because `hover:` compiles
+   * inside `@media (hover: hover)` and never matches a finger. A sidebar is
+   * mostly used on a phone as a drawer, where the tap that closed it was the
+   * one gesture in the component with nothing on screen behind it.
+   */
   function rowPaint(state: 'current' | 'ancestor' | 'rest'): string {
-    if (state === 'current') return 'border-brand bg-surface-2 font-medium text-brand';
-    if (state === 'ancestor') return 'border-brand text-fg hover:bg-surface-2';
-    return 'border-transparent text-muted hover:bg-surface-2 hover:text-fg';
+    if (state === 'current')
+      return 'border-brand bg-surface-2 font-medium text-brand hover:bg-line active:bg-line';
+    if (state === 'ancestor') return 'border-brand text-fg hover:bg-surface-2 active:bg-line';
+    return 'border-transparent text-muted hover:bg-surface-2 hover:text-fg active:bg-line active:text-fg';
   }
 
   const ROW_DISABLED = 'cursor-not-allowed border-transparent text-muted opacity-50';
@@ -87,6 +101,7 @@
   const DISCLOSURE =
     'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-muted ' +
     'transition-colors duration-150 outline-none hover:bg-surface-2 hover:text-fg ' +
+    'active:bg-line active:text-fg ' +
     'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand';
 
   const BADGE_TONE: Record<AccentTone, string> = {
@@ -257,7 +272,7 @@
     stroke-linecap="round"
     stroke-linejoin="round"
     aria-hidden="true"
-    class="shrink-0 transition-transform duration-150 {open ? 'rotate-90' : ''}"
+    class="shrink-0 transition-transform duration-150 {open ? 'rotate-90' : 'rtl:rotate-180'}"
   >
     <path d="M9 18l6-6-6-6" />
   </svg>