@eifi1/ui-kit 0.51.4 → 0.51.6

package/src/components/danger-confirm.tsx

@@ -76,7 +76,6 @@ export function usePromisePending() {
   return { pending, run };
 }
 
-
 /** The one word {@link CurrentPasswordInput} says on its own behalf — the
  *  `dangerConfirm.password` label, shared with DangerConfirm's password field, so an
  *  app translates "Password" once. */
@@ -153,7 +152,9 @@ export function CurrentPasswordInput({
       // text field, or into one the password manager offers a new password for.
       type="password"
       autoComplete="current-password"
-      label={label === undefined ? (namedOtherwise ? undefined : labels.password) : hasContent(label) ? label : undefined}
+      label={
+        label === undefined ? (namedOtherwise ? undefined : labels.password) : hasContent(label) ? label : undefined
+      }
       readOnly={Boolean(busy) || readOnly}
       onChange={(e) => {
         onChange?.(e);
@@ -168,8 +169,10 @@ export function CurrentPasswordInput({
  *  so the sentence "Type “X” to confirm" is translated once. */
 export type TypedConfirmFieldLabels = Pick<DangerConfirmLabels, "phrase" | "phrasePlaceholder">;
 
-export interface TypedConfirmFieldProps
-  extends Omit<InputProps, "type" | "value" | "defaultValue" | "label" | "placeholder"> {
+export interface TypedConfirmFieldProps extends Omit<
+  InputProps,
+  "type" | "value" | "defaultValue" | "label" | "placeholder"
+> {
   /** The text to repeat — a word ("DELETE"), a name, an e-mail address. */
   target: string;
   /** How the typed text is compared with `target` — {@link TypedMatch}. Default
@@ -251,11 +254,7 @@ export function TypedConfirmField({
   const generated = useId();
   const fieldId = id ?? generated;
   const label =
-    labelProp !== undefined
-      ? labelProp
-      : typeof labels.phrase === "function"
-        ? labels.phrase(target)
-        : labels.phrase;
+    labelProp !== undefined ? labelProp : typeof labels.phrase === "function" ? labels.phrase(target) : labels.phrase;
   const fromLabels =
     labels.phrasePlaceholder === undefined
       ? undefined

package/src/components/data-table-cells.tsx

@@ -34,8 +34,7 @@ export interface BooleanMarkProps {
 export function BooleanMark({ value, falseAs = "cross", labels: labelsProp, className }: BooleanMarkProps) {
   const labels = useKitLabels("dataTable", DEFAULT_DATA_TABLE_LABELS, labelsProp);
   const state = value === true ? "true" : value === false ? "false" : "unset";
-  const text =
-    state === "true" ? labels.booleanTrue : state === "false" ? labels.booleanFalse : labels.booleanUnset;
+  const text = state === "true" ? labels.booleanTrue : state === "false" ? labels.booleanFalse : labels.booleanUnset;
   const Icon = state === "true" ? Check : state === "false" && falseAs === "cross" ? X : Minus;
   return (
     <span data-value={state} className={cn("inline-flex items-center align-middle", className)}>

package/src/components/data-table-column-settings.tsx

@@ -80,9 +80,7 @@ export function ColumnSettingsPanel<T>({
       >
         <div className="flex w-56 flex-col border-s border-subtle p-2">
           <div className="mb-2 flex items-center justify-between gap-1">
-            <div className="text-xs font-medium uppercase tracking-wide text-muted">
-              {columnsCountLabel}
-            </div>
+            <div className="text-xs font-medium uppercase tracking-wide text-muted">{columnsCountLabel}</div>
             <Tooltip label={labels.close} portal>
               <button
                 type="button"

package/src/components/data-table-filter-popover.tsx

@@ -84,8 +84,7 @@ export function FilterPopover<T>({
     " " +
     // §10.1: a filter field is a field — 16 px on touch, or iOS zooms on focus.
     FIELD_TOUCH_TEXT;
-  const buttonBase =
-    "rounded border border-subtle bg-surface px-2 py-1 text-xs text-secondary hover:bg-hover";
+  const buttonBase = "rounded border border-subtle bg-surface px-2 py-1 text-xs text-secondary hover:bg-hover";
 
   const clearRow = (
     <div className="flex justify-end pt-1">
@@ -135,11 +134,7 @@ export function FilterPopover<T>({
             >
               {labels.selectAll}
             </button>
-            <button
-              type="button"
-              onClick={() => onChange({ type: "select", values: [] })}
-              className={buttonBase}
-            >
+            <button type="button" onClick={() => onChange({ type: "select", values: [] })} className={buttonBase}>
               {labels.selectNone}
             </button>
           </div>
@@ -150,20 +145,13 @@ export function FilterPopover<T>({
             return (
               <li key={o.value}>
                 <label className="flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-hover">
-                  <input
-                    type="checkbox"
-                    checked={checked}
-                    onChange={() => toggle(o.value)}
-                    className="size-3.5"
-                  />
+                  <input type="checkbox" checked={checked} onChange={() => toggle(o.value)} className="size-3.5" />
                   <span className="truncate">{o.label}</span>
                 </label>
               </li>
             );
           })}
-          {selectOptions.length === 0 && (
-            <li className="px-2 py-2 text-sm text-muted">—</li>
-          )}
+          {selectOptions.length === 0 && <li className="px-2 py-2 text-sm text-muted">—</li>}
         </ul>
         {clearRow}
       </div>
@@ -190,9 +178,7 @@ export function FilterPopover<T>({
                   onClick={() => set(p.from, p.to)}
                   className={cn(
                     "block rounded px-2 py-1 text-start transition-colors sm:w-full",
-                    active
-                      ? "bg-brand-soft text-brand-muted"
-                      : "text-secondary hover:bg-hover",
+                    active ? "bg-brand-soft text-brand-muted" : "text-secondary hover:bg-hover",
                   )}
                 >
                   {labels.presets[p.key] ?? p.key}

package/src/components/data-table-filters.ts

@@ -79,12 +79,7 @@ function localDay(raw: string): string {
  * The text filter folds as every kit list does ({@link foldForSearch}, DUP-5): accents
  * off too, so "zurich" finds Zürich.
  */
-export function rowMatches<T>(
-  col: DataTableColumn<T>,
-  row: T,
-  state: FilterValue,
-  locale?: string,
-): boolean {
+export function rowMatches<T>(col: DataTableColumn<T>, row: T, state: FilterValue, locale?: string): boolean {
   const filter = resolveFilter(col);
   if (!filter) return true;
   switch (filter.type) {

package/src/components/data-table-fit.ts

@@ -144,9 +144,7 @@ export function useColumnFit<T>({
     if (!table || avail <= 0) return;
     const growTh = growKey ? headRefs.get(growKey) : undefined;
     const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
-    let need = growTh
-      ? table.offsetWidth - growTh.offsetWidth + growMin * rem
-      : table.offsetWidth;
+    let need = growTh ? table.offsetWidth - growTh.offsetWidth + growMin * rem : table.offsetWidth;
     if (!growTh && need <= avail + 0.5 && current.length > 0) {
       // A `w-full` table is at least the scroller's width, which says nothing about how
       // much room its content leaves: probe its content's width (what it takes once it

package/src/components/data-table-groups.tsx

@@ -109,7 +109,9 @@ export function useGroupBandTops(
       const lead = leadEl ? leadEl.getBoundingClientRect().height : 0;
       if (bandEl) bandHeight = bandEl.getBoundingClientRect().height;
       const band = bandHeight;
-      setTops((prev) => (prev[0] === head + lead && prev[1] === head + lead + band ? prev : [head + lead, head + lead + band]));
+      setTops((prev) =>
+        prev[0] === head + lead && prev[1] === head + lead + band ? prev : [head + lead, head + lead + band],
+      );
     };
     measure();
     if (typeof ResizeObserver === "undefined") return;

package/src/components/data-table-head.tsx

@@ -148,13 +148,7 @@ export function DataTableHead<T>({
               // exactly one sorted column, and the priority is carried by the
               // badge and by what the header button announces on press.
               aria-sort={
-                sortable
-                  ? sortIdx === 0
-                    ? sorts[0].dir === "asc"
-                      ? "ascending"
-                      : "descending"
-                    : "none"
-                  : undefined
+                sortable ? (sortIdx === 0 ? (sorts[0].dir === "asc" ? "ascending" : "descending") : "none") : undefined
               }
               style={
                 ownHead.style || pinnedHead || lockedWidths?.[col.key] !== undefined || growFloor
@@ -180,31 +174,19 @@ export function DataTableHead<T>({
                 headClass,
               )}
             >
-              <div
-                className={cn(
-                  "flex items-center gap-1",
-                  isEndAligned && "flex-row-reverse",
-                )}
-              >
+              <div className={cn("flex items-center gap-1", isEndAligned && "flex-row-reverse")}>
                 <Tooltip label={sortable && multiSort ? labels.sortHint : undefined} portal>
                   <button
                     type="button"
                     onClick={(e) => sortable && toggleSort(col.key, e.shiftKey)}
                     disabled={!sortable}
-                    className={cn(
-                      "flex items-center gap-1 text-start",
-                      sortable && "hover:text-primary",
-                    )}
+                    className={cn("flex items-center gap-1 text-start", sortable && "hover:text-primary")}
                   >
                     <span>{col.header}</span>
-                    {sortable && (
-                      <Icon className={cn("size-3", active ? "opacity-100" : "opacity-40")} />
-                    )}
+                    {sortable && <Icon className={cn("size-3", active ? "opacity-100" : "opacity-40")} />}
                     {/* Priority badge, only meaningful with 2+ sort keys */}
                     {active && sorts.length > 1 && (
-                      <span className="text-micro font-semibold leading-none text-brand">
-                        {sortIdx + 1}
-                      </span>
+                      <span className="text-micro font-semibold leading-none text-brand">{sortIdx + 1}</span>
                     )}
                   </button>
                 </Tooltip>
@@ -254,30 +236,30 @@ export function DataTableHead<T>({
               </div>
               {/* A `grow` column takes the rest: no width of its own to drag (0.48, KS N2). */}
               {resizable && !isTableOwnColumn(col.key) && !col.grow && (
-              /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a
+                /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a
                  pointer-only drag handle for a visual preference (column width); it is
                  deliberately not a tab stop, and no content or action depends on it. */
-              <span
-                role="separator"
-                aria-orientation="vertical"
-                onPointerDown={(e) => startResize(e, col.key)}
-                onPointerMove={moveResize}
-                onPointerUp={(e) => finishResize(e, true)}
-                onPointerCancel={(e) => finishResize(e, false)}
-                onDoubleClick={(e) => {
-                  e.preventDefault();
-                  setWidths((w) => {
-                    const next = { ...w };
-                    delete next[col.key];
-                    return next;
-                  });
-                }}
-                // `touch-none`: without it the browser claims a finger drag for
-                // scrolling before the first `pointermove` ever arrives.
-                // `end-0` and a translate that flips with it: the handle sits on the column's
-                // trailing edge, which is its left one in a right-to-left table.
-                className="absolute end-0 top-0 z-10 h-full w-1.5 -translate-x-1/2 rtl:translate-x-1/2 cursor-col-resize select-none touch-none hover:bg-brand-soft-hover"
-              />
+                <span
+                  role="separator"
+                  aria-orientation="vertical"
+                  onPointerDown={(e) => startResize(e, col.key)}
+                  onPointerMove={moveResize}
+                  onPointerUp={(e) => finishResize(e, true)}
+                  onPointerCancel={(e) => finishResize(e, false)}
+                  onDoubleClick={(e) => {
+                    e.preventDefault();
+                    setWidths((w) => {
+                      const next = { ...w };
+                      delete next[col.key];
+                      return next;
+                    });
+                  }}
+                  // `touch-none`: without it the browser claims a finger drag for
+                  // scrolling before the first `pointermove` ever arrives.
+                  // `end-0` and a translate that flips with it: the handle sits on the column's
+                  // trailing edge, which is its left one in a right-to-left table.
+                  className="absolute end-0 top-0 z-10 h-full w-1.5 -translate-x-1/2 rtl:translate-x-1/2 cursor-col-resize select-none touch-none hover:bg-brand-soft-hover"
+                />
               )}
             </th>
           );

package/src/components/data-table-mobile.tsx

@@ -42,10 +42,7 @@ function dataAttrsOf(props: DataTableCellProps | undefined): Record<string, unkn
 }
 
 /** The logical sides onto the physical drag directions {@link SwipeableRow} takes. */
-function physicalSwipe(
-  actions: MobileSwipeActions,
-  dir: Direction,
-): { left?: SwipeAction[]; right?: SwipeAction[] } {
+function physicalSwipe(actions: MobileSwipeActions, dir: Direction): { left?: SwipeAction[]; right?: SwipeAction[] } {
   const rtl = dir === "rtl";
   return {
     left: (rtl ? actions.end : actions.start) ?? actions.left,
@@ -62,8 +59,7 @@ function physicalSwipe(
  * reaches the cells without the table knowing what they render; `large:`, so Normal
  * keeps every ellipsis it had.
  */
-const CARD_NO_TRUNCATE =
-  "large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]";
+const CARD_NO_TRUNCATE = "large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]";
 
 /**
  * Columns as label-above-value pairs: the phone card's fields at Large (§4), and the
@@ -89,14 +85,21 @@ export function StackedFields<T>({
   return (
     <dl
       data-card-fields="stacked"
-      className={cn("relative flex min-w-0 flex-col", compact ? "gap-1.5 text-xs" : "gap-2.5 text-sm", CARD_NO_TRUNCATE)}
+      className={cn(
+        "relative flex min-w-0 flex-col",
+        compact ? "gap-1.5 text-xs" : "gap-2.5 text-sm",
+        CARD_NO_TRUNCATE,
+      )}
     >
       {fields.map(({ col, value }) => (
         <div key={col.key} className="min-w-0">
           <dt className="text-xs uppercase tracking-wide text-muted">{col.header}</dt>
           <dd
             {...dataAttrsOf(col.cellProps?.(row))}
-            className={cn("mt-0.5 min-w-0 break-words text-secondary", liftOwnClicks && keepsOwnClicks(col) && LIFTED_FIELD)}
+            className={cn(
+              "mt-0.5 min-w-0 break-words text-secondary",
+              liftOwnClicks && keepsOwnClicks(col) && LIFTED_FIELD,
+            )}
           >
             {value}
           </dd>
@@ -543,7 +546,12 @@ export function MobileRow<T>({
                 {statuses.length > 0 && (
                   <div className="flex shrink-0 flex-wrap items-center justify-end gap-1">
                     {statuses.map(({ col, value }) => (
-                      <span key={col.key} {...dataAttrsOf(col.cellProps?.(row))} data-card-status="" className="inline-flex">
+                      <span
+                        key={col.key}
+                        {...dataAttrsOf(col.cellProps?.(row))}
+                        data-card-status=""
+                        className="inline-flex"
+                      >
                         <StatusChip value={value} />
                       </span>
                     ))}
@@ -555,27 +563,27 @@ export function MobileRow<T>({
               // §4: each label ABOVE its value at Large. Side by side, a label column
               // sized to the widest label leaves a value a sliver of a 240 px card.
               <StackedFields columns={mobileSecondaryColumns} row={row} compact={compact} liftOwnClicks={stretched} />
-            ) : fields.length > 0 && (
-              <dl
-                className={cn(
-                  "grid grid-cols-[auto_1fr] gap-x-3",
-                  compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm",
-                )}
-              >
-                {fields.map(({ col, value }) => (
-                  <Fragment key={col.key}>
-                    <dt className="text-xs uppercase tracking-wide text-muted self-center">
-                      {col.header}
-                    </dt>
-                    <dd
-                      {...dataAttrsOf(col.cellProps?.(row))}
-                      className={cn("min-w-0 text-secondary self-center", stretched && keepsOwnClicks(col) && LIFTED_FIELD)}
-                    >
-                      {value}
-                    </dd>
-                  </Fragment>
-                ))}
-              </dl>
+            ) : (
+              fields.length > 0 && (
+                <dl
+                  className={cn("grid grid-cols-[auto_1fr] gap-x-3", compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm")}
+                >
+                  {fields.map(({ col, value }) => (
+                    <Fragment key={col.key}>
+                      <dt className="text-xs uppercase tracking-wide text-muted self-center">{col.header}</dt>
+                      <dd
+                        {...dataAttrsOf(col.cellProps?.(row))}
+                        className={cn(
+                          "min-w-0 text-secondary self-center",
+                          stretched && keepsOwnClicks(col) && LIFTED_FIELD,
+                        )}
+                      >
+                        {value}
+                      </dd>
+                    </Fragment>
+                  ))}
+                </dl>
+              )
             )}
             {/* The row's actions after the fields, at the card's end (0.49 KIT-7): its
                 buttons keep their own clicks, and RowActions folds into "⋯" at Large. */}
@@ -595,22 +603,17 @@ export function MobileRow<T>({
           </>
         )}
       </div>
-      {opensDetail && !selecting &&
+      {opensDetail &&
+        !selecting &&
         // `aria-hidden`: the row already announces itself as a button with
         // `aria-expanded`, so the icon would only add a second, wordless stop.
         (mobileExpandAsDialog ? (
           // Points INTO the sheet, which is the reading-forward direction.
-          <ChevronRight
-            aria-hidden
-            className="size-4 shrink-0 text-placeholder rtl:-scale-x-100"
-          />
+          <ChevronRight aria-hidden className="size-4 shrink-0 text-placeholder rtl:-scale-x-100" />
         ) : (
           <ChevronDown
             aria-hidden
-            className={cn(
-              "size-4 shrink-0 text-placeholder transition-transform",
-              expanded && "rotate-180",
-            )}
+            className={cn("size-4 shrink-0 text-placeholder transition-transform", expanded && "rotate-180")}
           />
         ))}
     </>
@@ -684,64 +687,64 @@ export function MobileRow<T>({
       {cardInner}
     </div>
   ) : interactive && href ? (
-      // A card with a URL of its own is a LINK, not a div wearing role="button"
-      // (feedback #451): the phone's long-press "open in new tab" and a screen
-      // reader's link semantics both come free, and the fake role goes away.
-      <RowLink
-        href={href}
-        {...press}
-        onActivate={() => onRowClick!(row)}
-        aria-expanded={opensRow ? expanded : undefined}
-        className={cardClass}
-        // Enter already activates a link natively, and that routes through
-        // RowLink's own onClick — handling it here too would open the row twice.
-        // Space is the only key left, and only so it opens the row instead of
-        // scrolling the list.
-        onKeyDown={(e) => {
-          if (e.key !== " ") return;
-          e.preventDefault();
-          onRowClick!(row);
-        }}
-      >
-        {cardInner}
-      </RowLink>
-    ) : (
-      /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are
+    // A card with a URL of its own is a LINK, not a div wearing role="button"
+    // (feedback #451): the phone's long-press "open in new tab" and a screen
+    // reader's link semantics both come free, and the fake role goes away.
+    <RowLink
+      href={href}
+      {...press}
+      onActivate={() => onRowClick!(row)}
+      aria-expanded={opensRow ? expanded : undefined}
+      className={cardClass}
+      // Enter already activates a link natively, and that routes through
+      // RowLink's own onClick — handling it here too would open the row twice.
+      // Space is the only key left, and only so it opens the row instead of
+      // scrolling the list.
+      onKeyDown={(e) => {
+        if (e.key !== " ") return;
+        e.preventDefault();
+        onRowClick!(row);
+      }}
+    >
+      {cardInner}
+    </RowLink>
+  ) : (
+    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are
          only attached when `interactive`, and then so are role="button", tabIndex 0 and the
          Enter/Space handler below; the rule cannot follow the conditional role. */
-      <div
-        {...press}
-        role={interactive ? "button" : undefined}
-        tabIndex={interactive ? 0 : undefined}
-        onClick={
-          interactive
-            ? (e) => {
-                if (fromOutside(e.target, e.currentTarget)) return;
-                // A tap on a control in a cell (a select, a button) is that
-                // control's, as on the desktop `<tr>` (keksdose live #428).
-                if (fromOwnControl(e.target, e.currentTarget)) return;
+    <div
+      {...press}
+      role={interactive ? "button" : undefined}
+      tabIndex={interactive ? 0 : undefined}
+      onClick={
+        interactive
+          ? (e) => {
+              if (fromOutside(e.target, e.currentTarget)) return;
+              // A tap on a control in a cell (a select, a button) is that
+              // control's, as on the desktop `<tr>` (keksdose live #428).
+              if (fromOwnControl(e.target, e.currentTarget)) return;
+              onRowClick!(row);
+            }
+          : undefined
+      }
+      onKeyDown={
+        interactive
+          ? (e) => {
+              // A key press inside a nested control is that control's.
+              if (e.target !== e.currentTarget) return;
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
                 onRowClick!(row);
               }
-            : undefined
-        }
-        onKeyDown={
-          interactive
-            ? (e) => {
-                // A key press inside a nested control is that control's.
-                if (e.target !== e.currentTarget) return;
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  onRowClick!(row);
-                }
-              }
-            : undefined
-        }
-        aria-expanded={opensRow ? expanded : undefined}
-        className={cardClass}
-      >
-        {cardInner}
-      </div>
-    );
+            }
+          : undefined
+      }
+      aria-expanded={opensRow ? expanded : undefined}
+      className={cardClass}
+    >
+      {cardInner}
+    </div>
+  );
   return (
     <li
       className={cn(tint)}
@@ -765,12 +768,7 @@ export function MobileRow<T>({
         body
       )}
       {expansion && !mobileExpandAsDialog && (
-        <div
-          className={cn(
-            "bg-surface-2 border-t border-subtle",
-            compact ? "px-3 py-2" : "px-4 py-3",
-          )}
-        >
+        <div className={cn("bg-surface-2 border-t border-subtle", compact ? "px-3 py-2" : "px-4 py-3")}>
           {expansion}
         </div>
       )}
@@ -952,11 +950,7 @@ export function MobileFilters<T>({
         )}
       </button>
       {activeCount > 0 && (
-        <button
-          type="button"
-          onClick={onClearAll}
-          className="text-xs text-muted hover:text-secondary"
-        >
+        <button type="button" onClick={onClearAll} className="text-xs text-muted hover:text-secondary">
           {labels.clearAll}
         </button>
       )}
@@ -1015,10 +1009,7 @@ export function MobileFilters<T>({
                   {active && <span className="size-1.5 rounded-full bg-brand" />}
                 </span>
                 <ChevronDown
-                  className={cn(
-                    "size-4 shrink-0 text-placeholder transition-transform",
-                    isItemOpen && "rotate-180",
-                  )}
+                  className={cn("size-4 shrink-0 text-placeholder transition-transform", isItemOpen && "rotate-180")}
                 />
               </button>
               {isItemOpen && (

package/src/components/data-table-pagination.tsx

@@ -118,9 +118,7 @@ export function Pagination({
         {onPageSize && (
           <select
             value={pageSize === Infinity ? "all" : pageSize}
-            onChange={(e) =>
-              onPageSize(e.target.value === "all" ? Infinity : Number(e.target.value))
-            }
+            onChange={(e) => onPageSize(e.target.value === "all" ? Infinity : Number(e.target.value))}
             className="rounded border border-subtle bg-surface px-1 py-0.5 text-xs"
             aria-label={labels.pageSize}
           >
@@ -165,9 +163,7 @@ export function Pagination({
                   className={cn(
                     "rounded",
                     compact ? "min-w-6 px-1.5 py-0" : "min-w-7 px-2 py-0.5",
-                    it === page
-                      ? "bg-inverse text-inverse"
-                      : "hover:bg-hover",
+                    it === page ? "bg-inverse text-inverse" : "hover:bg-hover",
                   )}
                 >
                   {num.format(it + 1)}