@lyeve-labs/ui-kit 0.24.0 → 0.25.1

package/dist/components/SegmentedControl.svelte

@@ -9,11 +9,20 @@
     label: string;
     /** A lucide component. The control sizes it, so the caller does not guess. */
     icon?: Component<{ size?: number; class?: string }>;
+    /**
+     * Renders the segment as a link to this URL instead of a radio. Every
+     * option carries one or none does; the modes cannot be mixed in one
+     * control. The chosen segment is still the one whose value matches
+     * `value`, and it carries aria-current="page", so a page can keep its
+     * choice in the URL and the control works before any script has loaded.
+     */
+    href?: string;
   }
 </script>
 
 <script lang="ts" generics="T extends string">
   import { FIELD_LABEL, FIELD_WRAP } from '../internal/field.js';
+  import { safeHref } from '../internal/href.js';
 
   type Size = 'sm' | 'md';
 
@@ -34,6 +43,7 @@
     size?: Size;
     disabled?: boolean;
     class?: string;
+    /** Value mode only. A link segment reports nothing; the page it opens does. */
     onchange?: (value: T) => void;
   }
 
@@ -62,8 +72,32 @@
 
   let rootEl: HTMLDivElement | undefined = $state();
 
+  /*
+   * Link mode when every option carries an href. A row that mixes the two is
+   * refused outright rather than rendered as best it can: a radio beside two
+   * links would report a choice that the URL never learns about, and the
+   * caller has no way to see that from the screen.
+   */
+  const linked = $derived.by(() => {
+    const count = options.filter((o) => o.href !== undefined).length;
+    if (count !== 0 && count !== options.length) {
+      throw new Error(
+        `SegmentedControl: every option carries href or none does, ${count} of ${options.length} did`,
+      );
+    }
+    return count !== 0;
+  });
+
   const selectedIndex = $derived(options.findIndex((o) => o.value === value));
 
+  /*
+   * In link mode the arrows move focus without moving the choice, since the
+   * choice is the URL and only following a link changes it. The tab stop
+   * travels with focus while it is inside the group, and returns to the chosen
+   * segment when focus leaves, so Tab re-enters on the one that is current.
+   */
+  let roving: number | null = $state(null);
+
   /*
    * The group holds ONE tab stop, which is the whole reason this is not a row
    * of buttons: a picker of five themes cost five presses of Tab to step over.
@@ -72,10 +106,15 @@
    * drop the control out of the tab order entirely, so the first segment holds
    * the stop until something is chosen.
    */
-  const tabStop = $derived(selectedIndex === -1 ? 0 : selectedIndex);
+  const tabStop = $derived(roving ?? (selectedIndex === -1 ? 0 : selectedIndex));
 
   function segmentAt(index: number): HTMLElement | undefined {
-    return rootEl?.querySelectorAll<HTMLElement>('[role="radio"]')[index];
+    return rootEl?.querySelectorAll<HTMLElement>('[data-segment]')[index];
+  }
+
+  function onGroupFocusOut(e: FocusEvent) {
+    if (rootEl && e.relatedTarget instanceof Node && rootEl.contains(e.relatedTarget)) return;
+    roving = null;
   }
 
   function choose(index: number) {
@@ -123,7 +162,13 @@
     }
     // The arrows scroll the page, and Home and End jump it to the ends.
     e.preventDefault();
-    choose(next);
+    if (linked) {
+      if (disabled) return;
+      roving = next;
+      segmentAt(next)?.focus();
+    } else {
+      choose(next);
+    }
   }
 </script>
 
@@ -135,10 +180,14 @@
     <span class={FIELD_LABEL}>{label}</span>
   {/if}
 
+  <!-- A set of links is a group, not a radiogroup: a link is not a radio and
+       carries no aria-checked, and what marks the current one is aria-current,
+       the attribute a reader already knows from navigation. -->
   <div
     bind:this={rootEl}
-    role="radiogroup"
+    role={linked ? 'group' : 'radiogroup'}
     aria-label={label}
+    onfocusout={linked ? onGroupFocusOut : undefined}
     class="inline-flex items-stretch rounded-lg border border-line-strong bg-surface-2 p-0.5 {SIZES[
       size
     ].row} {disabled ? 'opacity-50' : ''}"
@@ -146,28 +195,13 @@
     {#each options as option, i (option.value)}
       {@const selected = option.value === value}
       {@const Icon = option.icon}
-      <!--
-        Each segment is a radio, and aria-checked is what a screen reader reads.
-        The theme picker this replaces was a row of plain buttons whose choice
-        was carried by a background colour alone, so a screen reader user was
-        told nothing and a colour-blind user saw nothing. The selected segment
-        also sits at a heavier weight, so the state survives a palette a reader
-        cannot separate.
-      -->
-      <button
-        type="button"
-        role="radio"
-        aria-checked={selected}
-        tabindex={i === tabStop ? 0 : -1}
-        {disabled}
-        onclick={() => choose(i)}
-        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 active:bg-surface active:text-fg'}"
-      >
+      {@const segment =
+        '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 ' +
+        SIZES[size].segment +
+        (selected
+          ? ' bg-surface text-fg shadow-sm'
+          : ' text-muted hover:text-fg active:bg-surface active:text-fg')}
+      {#snippet content()}
         {#if Icon}
           <Icon size={SIZES[size].icon} class="shrink-0" />
         {/if}
@@ -183,7 +217,47 @@
             >{option.label}</span
           >
         </span>
-      </button>
+      {/snippet}
+      {#if linked}
+        <!--
+          A plain anchor with no click handler, so the choice is a navigation
+          the browser performs on its own. A disabled row drops the hrefs: an
+          anchor with no href is not a link, and aria-disabled says why.
+        -->
+        <a
+          data-segment
+          href={disabled ? undefined : safeHref(option.href)}
+          aria-current={selected ? 'page' : undefined}
+          aria-disabled={disabled ? 'true' : undefined}
+          tabindex={disabled ? -1 : i === tabStop ? 0 : -1}
+          onkeydown={(e) => onSegmentKeydown(e, i)}
+          class="{segment} {disabled ? 'cursor-not-allowed' : ''}"
+        >
+          {@render content()}
+        </a>
+      {:else}
+        <!--
+          Each segment is a radio, and aria-checked is what a screen reader
+          reads. The theme picker this replaces was a row of plain buttons whose
+          choice was carried by a background colour alone, so a screen reader
+          user was told nothing and a colour-blind user saw nothing. The
+          selected segment also sits at a heavier weight, so the state survives
+          a palette a reader cannot separate.
+        -->
+        <button
+          data-segment
+          type="button"
+          role="radio"
+          aria-checked={selected}
+          tabindex={i === tabStop ? 0 : -1}
+          {disabled}
+          onclick={() => choose(i)}
+          onkeydown={(e) => onSegmentKeydown(e, i)}
+          class={segment}
+        >
+          {@render content()}
+        </button>
+      {/if}
     {/each}
   </div>
 

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

@@ -10,6 +10,14 @@ export interface SegmentOption<T extends string = string> {
         size?: number;
         class?: string;
     }>;
+    /**
+     * Renders the segment as a link to this URL instead of a radio. Every
+     * option carries one or none does; the modes cannot be mixed in one
+     * control. The chosen segment is still the one whose value matches
+     * `value`, and it carries aria-current="page", so a page can keep its
+     * choice in the URL and the control works before any script has loaded.
+     */
+    href?: string;
 }
 declare function $$render<T extends string>(): {
     props: {
@@ -29,6 +37,7 @@ declare function $$render<T extends string>(): {
         size?: "sm" | "md";
         disabled?: boolean;
         class?: string;
+        /** Value mode only. A link segment reports nothing; the page it opens does. */
         onchange?: (value: T) => void;
     };
     exports: {};

package/dist/components/Select.svelte

@@ -84,6 +84,7 @@
     panelOption,
     placePanel,
   } from '../internal/panel.js';
+  import * as motion from '../motion.js';
 
   interface Props {
     /** The selected value. Bindable, so a listbox pick reaches the caller without a callback. */
@@ -283,7 +284,7 @@
       height="12"
       viewBox="0 0 12 12"
       fill="none"
-      class="transition-transform duration-150 {open ? 'rotate-180' : ''}"
+      class="transition-transform duration-base {open ? 'rotate-180' : ''}"
     >
       <path
         d="M2 4l4 4 4-4"
@@ -408,7 +409,7 @@
       <input type="hidden" {name} {disabled} value={value ?? ''} />
 
       {#if box.open}
-        <div use:placePanel class="{PANEL_SURFACE} w-full">
+        <div use:placePanel transition:motion.popover|global class="{PANEL_SURFACE} w-full">
           {#if searchable}
             <div class="border-b border-line p-2">
               <!--
@@ -432,7 +433,7 @@
                 aria-label={label ? `Search ${label}` : 'Search options'}
                 {...box.triggerAttrs}
                 class="w-full rounded-md border border-line-strong bg-surface-2 px-2.5 py-1.5
-                  text-sm text-fg outline-none transition-colors duration-150
+                  text-sm text-fg outline-none transition-colors
                   placeholder:text-faint focus:border-brand"
               />
             </div>

package/dist/components/SidebarNav.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   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';
 
@@ -65,8 +66,8 @@
    * stray line or as nothing at all.
    */
   const ROW =
-    'flex w-full items-center gap-2.5 rounded-lg border-s-2 py-2 pe-2 text-sm text-start ' +
-    'transition-colors duration-150 outline-none ' +
+    `${TOUCH_GROW} flex w-full items-center gap-2.5 rounded-lg border-s-2 py-2 pe-2 text-sm text-start ` +
+    'transition-colors outline-none ' +
     'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand';
 
   /**
@@ -99,8 +100,8 @@
    * it wrong half the time.
    */
   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 ' +
+    `${TOUCH_GROW} flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-muted ` +
+    'transition-colors 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';
 
@@ -219,11 +220,13 @@
 
     {#if branch}
       <!--
-        Rendered whether or not it is open, and hidden with a display utility.
-        aria-controls has to name an element that exists; pointing it at markup
-        that appears only once the group is open leaves the reference dangling
-        in the one state where a reader needs it to tell them what the button
-        will reveal.
+        Rendered whether or not it is open, and shut by collapsing its grid row
+        to nothing, the same move AccordionItem makes. aria-controls has to name
+        an element that exists; pointing it at markup that appears only once the
+        group is open leaves the reference dangling in the one state where a
+        reader needs it to tell them what the button will reveal. inert keeps a
+        shut group out of the tab order and the accessibility tree, which is
+        what the display utility used to do.
 
         It keeps the implicit list role. role="group" here overrode it, and a
         listitem whose parent is not a list is an ARIA context error, so every
@@ -231,14 +234,20 @@
         semantics belong to a tree, where the parent is a treeitem; this is a
         nav of plain links and the disclosure already says what it controls.
       -->
-      <ul
-        id={listId(node.id)}
-        class="{open && !node.disabled ? 'flex' : 'hidden'} mt-0.5 flex-col gap-0.5"
+      {@const shown = open && !node.disabled}
+      <div
+        class="grid transition-[grid-template-rows] duration-base {shown
+          ? 'grid-rows-[1fr]'
+          : 'grid-rows-[0fr]'}"
       >
-        {#each children as child (child.id)}
-          {@render row(child, depth + 1)}
-        {/each}
-      </ul>
+        <div class="overflow-hidden">
+          <ul id={listId(node.id)} inert={!shown} class="mt-0.5 flex flex-col gap-0.5">
+            {#each children as child (child.id)}
+              {@render row(child, depth + 1)}
+            {/each}
+          </ul>
+        </div>
+      </div>
     {/if}
   </li>
 {/snippet}
@@ -272,7 +281,7 @@
     stroke-linecap="round"
     stroke-linejoin="round"
     aria-hidden="true"
-    class="shrink-0 transition-transform duration-150 {open ? 'rotate-90' : 'rtl:rotate-180'}"
+    class="shrink-0 transition-transform duration-base {open ? 'rotate-90' : 'rtl:rotate-180'}"
   >
     <path d="M9 18l6-6-6-6" />
   </svg>

package/dist/components/StepIndicator.svelte

@@ -29,13 +29,13 @@
                 ? ''
                 : done || active
                   ? 'bg-brand'
-                  : 'bg-line'} h-px transition-colors duration-150"
+                  : 'bg-line'} h-px transition-colors"
             ></div>
 
             <!-- Step circle -->
             <div
               class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2
-                font-bold text-sm transition-all
+                font-bold text-sm transition-colors
                 {done
                 ? 'border-brand bg-brand text-ink'
                 : active
@@ -62,7 +62,7 @@
                 ? ''
                 : done
                   ? 'bg-brand'
-                  : 'bg-line'} h-px transition-colors duration-150"
+                  : 'bg-line'} h-px transition-colors"
             ></div>
           </div>
 
@@ -72,7 +72,7 @@
                 ? 'text-fg'
                 : done
                   ? 'text-muted'
-                  : 'text-faint'} transition-colors duration-150"
+                  : 'text-faint'} transition-colors"
             >
               {step.label}
             </p>
@@ -95,7 +95,7 @@
           <div class="flex flex-col items-center">
             <div
               class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2
-                font-bold text-sm transition-all
+                font-bold text-sm transition-colors
                 {done
                 ? 'border-brand bg-brand text-ink'
                 : active
@@ -117,9 +117,7 @@
             </div>
             {#if i < steps.length - 1}
               <div
-                class="my-1 w-px flex-1 {done
-                  ? 'bg-brand/40'
-                  : 'bg-line'} transition-colors duration-150"
+                class="my-1 w-px flex-1 {done ? 'bg-brand/40' : 'bg-line'} transition-colors"
               ></div>
             {/if}
           </div>
@@ -129,7 +127,7 @@
                 ? 'text-fg'
                 : done
                   ? 'text-muted'
-                  : 'text-faint'} transition-colors duration-150"
+                  : 'text-faint'} transition-colors"
             >
               {step.label}
             </p>

package/dist/components/Table.svelte

@@ -11,6 +11,12 @@
 
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import {
+    SCROLL_EDGE,
+    SCROLL_EDGE_END,
+    SCROLL_EDGE_START,
+    scrollEdges,
+  } from '../internal/scroll-edges.js';
 
   interface Props {
     striped?: boolean;
@@ -70,7 +76,7 @@
     '[&_tbody_tr:hover>td:first-child]:shadow-[inset_1px_1px_var(--color-brand),inset_1px_-1px_var(--color-brand)]',
     '[&_tbody_tr:hover>td:last-child]:shadow-[inset_-1px_1px_var(--color-brand),inset_-1px_-1px_var(--color-brand)]',
     '[&_tbody_tr:hover>td:first-child:last-child]:shadow-[inset_1px_1px_var(--color-brand),inset_-1px_-1px_var(--color-brand)]',
-    '[&_tbody_tr]:transition-colors [&_tbody_tr]:duration-150',
+    '[&_tbody_tr]:transition-colors',
   ].join(' ');
 
   let {
@@ -121,19 +127,9 @@
   function measure() {
     const el = scroller;
     if (!el) return;
-    const slack = el.scrollWidth - el.clientWidth;
-    // A sub-pixel layout leaves scrollLeft a fraction short of its own maximum
-    // at the far end, so an exact comparison never reports the end as reached.
-    if (slack <= 1) {
-      moreBefore = false;
-      moreAfter = false;
-      return;
-    }
-    // A right-to-left box reports the offset as a negative number, and the two
-    // edges are the same two edges either way round.
-    const travelled = Math.abs(el.scrollLeft);
-    moreBefore = travelled > 1;
-    moreAfter = travelled < slack - 1;
+    const edges = scrollEdges(el);
+    moreBefore = edges.before;
+    moreAfter = edges.after;
   }
 
   $effect(() => {
@@ -151,14 +147,6 @@
     return () => observer.disconnect();
   });
 
-  /*
-   * A dark fade rather than a palette colour. The box has no background of its
-   * own and sits on the page in one place and inside a card in another, so no
-   * surface token is the colour to fade to. The scrims use black at an alpha
-   * for the same reason and it reads in both themes.
-   */
-  const EDGE = 'pointer-events-none absolute inset-y-px w-6';
-
   /*
    * The table-wide treatment, applied only to cells that did not ask for their
    * own.
@@ -185,6 +173,28 @@
     '[&_tbody_td[data-cell=truncate]]:max-w-[var(--cell-truncate)] ' +
     '[&_tbody_td[data-cell=truncate]]:truncate';
 
+  /*
+   * Column alignment. Head cells align start: the table already said
+   * `text-start`, and the browser's own `th { text-align: center }` beat the
+   * inherited value, so every heading floated over a left-aligned column
+   * until the page wrote `text-left` on each one. A numeric column is the one
+   * kind that reads better ranged right, and its digits line up only in a
+   * tabular figure, so a caller marks its cells `data-col="numeric"` and the
+   * heading and the cells take both together.
+   */
+  const COLUMN_ALIGN =
+    '[&_thead_th]:text-start ' +
+    '[&_th[data-col=numeric]]:text-end [&_td[data-col=numeric]]:text-end ' +
+    '[&_td[data-col=numeric]]:tabular-nums';
+
+  /*
+   * A sort control in a heading is the caller's button, and the head row is
+   * 40px. The hit box every small kit control grows under a finger is given
+   * to it here, so a table sorted from its headings needs nothing from the
+   * page to meet the finger.
+   */
+  const HEAD_CONTROLS = '[&_thead_th_button]:relative [&_thead_th_button]:hit-area';
+
   /** Marks a title this component put there, so it can take it back again. */
   const OWNED = 'data-cell-title';
 
@@ -230,7 +240,10 @@
 <!-- overflow-hidden on the frame, not only on the scroller: the hovered row's
      ring is square and the frame is not, and the last row's corners drew past
      the frame's rounded ones. -->
-<div data-testid="table-frame" class="relative w-full overflow-hidden rounded-xl border border-line {cls}">
+<div
+  data-testid="table-frame"
+  class="relative w-full overflow-hidden rounded-xl border border-line {cls}"
+>
   <!--
     data-print: the box exists to clip. On paper there is no viewport to clip
     to, and every column past the edge would simply not be printed.
@@ -265,7 +278,7 @@
       style="--cell-truncate: {truncateAt}"
       class="w-full border-separate border-spacing-0 text-sm text-start
       {fixed ? 'table-fixed' : ''}
-      {CELL_FIT[cell]} {CELL_NAMED}
+      {CELL_FIT[cell]} {CELL_NAMED} {COLUMN_ALIGN} {HEAD_CONTROLS}
       [&_thead_th]:border-b [&_thead_th]:border-line [&_thead]:bg-surface-2/40
       [&_thead_th]:px-4 [&_thead_th]:py-3 [&_thead_th]:text-xs
         [&_thead_th]:font-medium [&_thead_th]:text-faint
@@ -286,16 +299,13 @@
     the phone will not draw, it says nothing a screen reader has not already
     been told by the region, and a child of the box would scroll away with the
     content it is describing.
-
-    The gradient direction is logical: in a right-to-left locale the start edge
-    is the right one and the fade has to run the other way with it.
   -->
   {#if moreBefore}
     <div
       aria-hidden="true"
       data-print="hide"
       data-testid="table-more-before"
-      class="{EDGE} start-0 rounded-s-xl bg-linear-to-r rtl:bg-linear-to-l from-black/25 to-transparent"
+      class="{SCROLL_EDGE} {SCROLL_EDGE_START} rounded-s-xl"
     ></div>
   {/if}
   {#if moreAfter}
@@ -303,7 +313,7 @@
       aria-hidden="true"
       data-print="hide"
       data-testid="table-more-after"
-      class="{EDGE} end-0 rounded-e-xl bg-linear-to-l rtl:bg-linear-to-r from-black/25 to-transparent"
+      class="{SCROLL_EDGE} {SCROLL_EDGE_END} rounded-e-xl"
     ></div>
   {/if}
 </div>