@lyeve-labs/ui-kit 0.18.0 → 0.19.0

package/dist/components/Pagination.svelte

@@ -1,24 +1,73 @@
 <script lang="ts">
+  import { safeHref } from '../internal/href.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;
+    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,
     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 +100,112 @@
     return slot === 'gap' ? `gap-${index}` : `page-${slot}`;
   }
 
-  let nums = $derived(pageNumbers(safePage, totalPages));
+  let nums = $derived(counted ? pageNumbers(safePage, totalPages) : []);
+
+  /**
+   * 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.
+   */
+  let summary = $derived(
+    counted
+      ? safeTotal === 0
+        ? 'No results'
+        : `${from} to ${to} of ${safeTotal}`
+      : `Page ${safePage}`,
+  );
+
+  /** 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 +226,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,47 @@
-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;
     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>

package/dist/components/Table.svelte

@@ -1,3 +1,14 @@
+<script lang="ts" module>
+  /**
+   * How a body cell treats content wider than its column.
+   *
+   * `wrap` breaks anywhere it has to. `truncate` keeps the cell to one line and
+   * ends it with an ellipsis. `auto` is the browser's own table algorithm, with
+   * no cap of any kind.
+   */
+  export type CellFit = 'auto' | 'wrap' | 'truncate';
+</script>
+
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
@@ -12,6 +23,35 @@
      * else, which is a landmark the reader has to enter to identify.
      */
     label?: string;
+    /**
+     * What a body cell does with content too wide for its column.
+     *
+     * `wrap` by default, and the default is not `auto`. A table constrained
+     * nothing: one cell holding an unbroken token - an API key, a signed URL,
+     * a base64 payload - has no break opportunity in it, so the auto table
+     * algorithm sizes the column to the whole string and the table grows to
+     * whatever that comes to. One measured page took its container from no
+     * overflow at all to 3,086px of it, and the audit log overran its own
+     * container by 419px at 390px wide.
+     *
+     * `wrap` fixes exactly that and nothing else. It is `overflow-wrap:
+     * anywhere`, which is the one value that shrinks the column's min-content
+     * width, so a paragraph still breaks at its spaces and only a token with
+     * no spaces in it is broken mid-string. Prose in a cell renders as it
+     * always did.
+     *
+     * The default wraps rather than truncates because wrapping is the choice
+     * that cannot lose anything. Truncation hides, and a table that hides is
+     * worse than one that scrolls, so it is opted into.
+     */
+    cell?: CellFit;
+    /**
+     * The width a truncating cell stops at. Any CSS length.
+     *
+     * Read through a custom property, so a single column can disagree with the
+     * table by setting `--cell-truncate` in its own style attribute.
+     */
+    truncateAt?: string;
     class?: string;
     children: Snippet;
   }
@@ -21,6 +61,8 @@
     hoverable = true,
     fixed = false,
     label = undefined,
+    cell = 'wrap',
+    truncateAt = '20rem',
     class: cls = '',
     children,
   }: Props = $props();
@@ -99,6 +141,73 @@
    * 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.
+   *
+   * `:not([data-cell])` is what keeps the two apart. Without it a column that
+   * opted out still matched the table's rule for the same property, and which
+   * of the two won came down to the order Tailwind happened to emit them in.
+   */
+  const CELL_FIT: Record<CellFit, string> = {
+    auto: '',
+    wrap: '[&_tbody_td:not([data-cell])]:[overflow-wrap:anywhere]',
+    truncate:
+      '[&_tbody_td:not([data-cell])]:max-w-[var(--cell-truncate)] [&_tbody_td:not([data-cell])]:truncate',
+  };
+
+  /*
+   * The per-cell opt-in, always present so a caller can mix treatments down one
+   * row: `data-cell="nowrap"` on a timestamp, `data-cell="truncate"` on a
+   * description, nothing at all on the rest.
+   */
+  const CELL_NAMED =
+    '[&_tbody_td[data-cell=wrap]]:[overflow-wrap:anywhere] ' +
+    '[&_tbody_td[data-cell=nowrap]]:whitespace-nowrap ' +
+    '[&_tbody_td[data-cell=truncate]]:max-w-[var(--cell-truncate)] ' +
+    '[&_tbody_td[data-cell=truncate]]:truncate';
+
+  /** Marks a title this component put there, so it can take it back again. */
+  const OWNED = 'data-cell-title';
+
+  /**
+   * Gives a clipped cell its full value back.
+   *
+   * The text is never removed from the document, so a screen reader already
+   * reads the whole of it and it is the sighted pointer user who loses the tail
+   * to the ellipsis. The title that returns it is attached when a pointer or
+   * the keyboard actually reaches the cell, from one listener on the scroll
+   * box, rather than measured for every cell as the table renders: a tenant
+   * with 10,000 rows would pay for 10,000 measurements and 10,000 title
+   * attributes to answer a question asked of about three of them.
+   */
+  function reveal(event: Event) {
+    const from = event.target;
+    if (!(from instanceof Element)) return;
+    const td = from.closest('td');
+    if (!(td instanceof HTMLElement)) return;
+
+    const named = td.dataset.cell;
+    const clipping = named === 'truncate' || (named === undefined && cell === 'truncate');
+    if (!clipping) return;
+
+    const ours = td.hasAttribute(OWNED);
+    // A title the caller wrote is theirs. It may well say more than the cell
+    // holds, and replacing it with the visible text would be a downgrade.
+    if (td.hasAttribute('title') && !ours) return;
+
+    const full = (td.textContent ?? '').trim();
+    if (full && td.scrollWidth - td.clientWidth > 1) {
+      td.setAttribute('title', full);
+      td.setAttribute(OWNED, '');
+    } else if (ours) {
+      // The column widened, or the row now holds something shorter. A tooltip
+      // repeating text the reader can already see is noise.
+      td.removeAttribute('title');
+      td.removeAttribute(OWNED);
+    }
+  }
 </script>
 
 <div data-testid="table-frame" class="relative w-full rounded-xl border border-line {cls}">
@@ -109,6 +218,8 @@
   <div
     bind:this={scroller}
     onscroll={measure}
+    onpointerover={reveal}
+    onfocusin={reveal}
     data-print="unclip"
     data-testid="table-scroll"
     class="w-full overflow-x-auto rounded-xl"
@@ -126,8 +237,10 @@
       same place.
     -->
     <table
-      class="w-full border-separate border-spacing-0 text-sm text-left
+      style="--cell-truncate: {truncateAt}"
+      class="w-full border-separate border-spacing-0 text-sm text-start
       {fixed ? 'table-fixed' : ''}
+      {CELL_FIT[cell]} {CELL_NAMED}
       [&_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