@eifi1/ui-kit 0.15.4 → 0.16.0

package/dist/wizard/stepper-nav.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { f as ButtonVariant } from '../kit-labels-CnnBd-2N.js';
+import { f as ButtonVariant } from '../kit-labels-DE--LmCk.js';
 import { UseWizardReturn, WizardLabels } from './types.js';
 import '../components/data-table-labels.js';
 import '../components/mini-calendar.js';
@@ -32,8 +32,7 @@ import '../components/dialog-frame.js';
 import '../components/modal.js';
 import '../hooks/use-search-param-state.js';
 import '../components/measured-grid.js';
-import '../feedback/feedback-attachment.js';
-import '../feedback/feedback-dialog.js';
+import '../feedback-attachment-WFiXJ8We.js';
 import '../feedback/feedback-thread.js';
 import '../feedback/feedback-inbox.js';
 import '../components/account-settings-labels.js';
@@ -41,12 +40,12 @@ import '../components/confirm-dialog.js';
 import '../components/floating-panel.js';
 import '../components/bulk-action-bar.js';
 import '../components/list.js';
+import '../components/signed-amount.js';
 import '../components/breadcrumbs.js';
 import '../components/toast.js';
 import '../components/description-list.js';
 import '../components/line-items.js';
 import '../components/progress-bar.js';
-import '../components/signed-amount.js';
 import '../components/error-boundary.js';
 import '../components/authed-image.js';
 import '../hooks/use-authed-src.js';

package/dist/wizard.d.ts

@@ -6,7 +6,7 @@ export { WizardStep, WizardStepProps } from './wizard/wizard-step.js';
 export { WizardSummary } from './wizard/wizard-summary.js';
 export { StepperNav } from './wizard/stepper-nav.js';
 import 'react';
-import './kit-labels-CnnBd-2N.js';
+import './kit-labels-DE--LmCk.js';
 import './components/data-table-labels.js';
 import './components/mini-calendar.js';
 import './components/calendar-heatmap.js';
@@ -37,8 +37,7 @@ import './components/dialog-frame.js';
 import './components/modal.js';
 import './hooks/use-search-param-state.js';
 import './components/measured-grid.js';
-import './feedback/feedback-attachment.js';
-import './feedback/feedback-dialog.js';
+import './feedback-attachment-WFiXJ8We.js';
 import './feedback/feedback-thread.js';
 import './feedback/feedback-inbox.js';
 import './components/account-settings-labels.js';
@@ -46,12 +45,12 @@ import './components/confirm-dialog.js';
 import './components/floating-panel.js';
 import './components/bulk-action-bar.js';
 import './components/list.js';
+import './components/signed-amount.js';
 import './components/breadcrumbs.js';
 import './components/toast.js';
 import './components/description-list.js';
 import './components/line-items.js';
 import './components/progress-bar.js';
-import './components/signed-amount.js';
 import './components/error-boundary.js';
 import './components/authed-image.js';
 import './hooks/use-authed-src.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.15.4",
+  "version": "0.16.0",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",
@@ -77,7 +77,9 @@
     "check:tailwind": "node scripts/check-tailwind-scan.mjs",
     "check:security": "npm audit --audit-level=high",
     "check:commits": "node scripts/check-commit-range.cjs",
-    "check:static": "npm run typecheck && npm run lint && npm run check:tokens && npm run check:security && npm run check:commits",
+    "check:commit-rules": "node scripts/check-commit-rules.mjs",
+    "sync:commit-rules": "node scripts/sync-commit-rules.mjs",
+    "check:static": "npm run typecheck && npm run lint && npm run check:tokens && npm run check:security && npm run check:commit-rules && npm run check:commits",
     "check:test": "npm run test:coverage",
     "check:build": "npm run build && npm run check:graph && npm run check:package && npm run build:showcase && npm run check:tailwind",
     "check": "node scripts/check.mjs",

package/src/components/alert-banner.tsx

@@ -28,7 +28,7 @@ export type AlertSize = "sm" | "md";
  * at any offset. Callers compensate the extra pixel in their own padding so
  * switching tones never shifts the layout. */
 const TONE_FRAME: Record<AlertTone, string> = {
-  danger: "border-2 border-[var(--danger-border)] bg-[var(--danger-bg)]",
+  danger: "border-2 border-[var(--danger-border-strong)] bg-[var(--danger-bg)]",
   warning: "border-2 border-[var(--warning-border)] bg-[var(--warning-bg)]",
   info: "border-2 border-[var(--info-border)] bg-[var(--info-bg)]",
   success: "border-2 border-[var(--success-border)] bg-[var(--success-bg)]",

package/src/components/amount-input.tsx

@@ -2,7 +2,7 @@ import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react
 import { ChevronDown } from "lucide-react";
 import type { ReactNode } from "react";
 import { CURRENCIES, CurrencyFlag, currencyName, getCurrency } from "./currency-select";
-import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, PHONE_QUERY } from "./ui";
+import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField, PHONE_QUERY } from "./ui";
 import { cn } from "../lib/cn";
 import { currencyMinorDigits } from "../lib/format";
 import { useMediaQuery } from "../hooks/use-media-query";
@@ -48,6 +48,13 @@ interface AmountInputProps {
   "aria-describedby"?: string;
   "aria-invalid"?: boolean | "true" | "false";
   "aria-required"?: boolean | "true" | "false";
+  /** {@link NumberInput}'s `hint`, the same rule: a {@link FieldHint} "?" rides the
+   *  label's own line, beside the label (not at the far end, where the calculator and
+   *  the currency chip live); plain TEXT (a string or a number) is a caption UNDER
+   *  the field, attached through `aria-describedby` after the caller's own. A phone's
+   *  `variant="display"` has no visible label, so a FieldHint is dropped there; a
+   *  caption still shows. */
+  hint?: ReactNode;
   /** Every user-facing string this component and the two it composes own, so a
    *  translating host can supply its own. Each key optional, and each a per-field
    *  override of the kit-wide translation in `<UiKitProvider labels>`: `currency`
@@ -100,6 +107,9 @@ interface AmountInputProps {
    * Because it is rendered rather than stored it cannot be deleted (the next render
    * puts it back), a select-all-and-retype keeps the direction, and the caret needs
    * no minding.
+   *
+   * Since 0.15.5 it is drawn on its own too, for a read-only or disabled signed figure
+   * (an "Items total" of −5.18): no `onNegativeChange` needed just to show the minus.
    */
   negative?: boolean;
   /**
@@ -293,9 +303,13 @@ function isResultOf(previous: string, text: string, settle: (text: string) => st
 }
 
 export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
-  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, className, id, ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {
+  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, className, id, ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, hint, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {
     const generatedId = useId();
     const fieldId = id ?? generatedId;
+    const hintId = useId();
+    // Text is a caption under the field; a FieldHint rides the label line. See `hint`.
+    const textHint = (typeof hint === "string" && hint !== "") || typeof hint === "number";
+    const describedBy = textHint ? (ariaDescribedBy ? `${ariaDescribedBy} ${hintId}` : hintId) : ariaDescribedBy;
     const invalid = Boolean(invalidProp) || ariaInvalid === true || ariaInvalid === "true";
     const editable = !!onCurrencyChange;
     // On phones we suppress the OS keyboard (inputMode="none" below) and show our
@@ -330,7 +344,11 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
     // front of a bare amount: an expression being typed ("12-30") owns its own
     // minus and has to survive keystroke-for-keystroke.
     const signOwned = onNegativeChange !== undefined;
-    const shown = signOwned && negative && isBareAmount(value) ? `-${value}` : value;
+    // The sign is DRAWN whenever `negative` says so, handler or not (keksdose live #366):
+    // a read-only or disabled total ("−5.18") used to need a dummy `onNegativeChange`
+    // just to show its minus. Without the handler there is nothing to toggle — a typed
+    // minus simply stays in the text, as in any field without a direction control.
+    const shown = negative && isBareAmount(value) ? `-${value}` : value;
     // What the user SEES is `shown` with the locale's decimal mark (kastlan 40: a
     // fr-CH user typed "1,5" and watched it turn into "1.5" under their fingers). Display only — `value`, `onChange`, the sign split and the settle all
     // stay dot-decimal, because that string is the contract: RhfMoneyField's
@@ -447,8 +465,17 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
       <div ref={wrapperRef} className={cn("w-full", className)}>
         {/* Inner relative box holds the input + its absolutely-positioned
             trailing controls (calculator / currency), so those stay anchored to
-            the INPUT even when the mobile math bar is rendered below (#334). */}
-        <div className="relative w-full">
+            the INPUT even when the mobile math bar is rendered below (#334). It is
+            the kit's FloatingField, which draws the label — floating, or sr-only in
+            the display shape — and puts a FieldHint on the label's line, as it does
+            for NumberInput. */}
+        <FloatingField
+          className="w-full"
+          htmlFor={fieldId}
+          label={label}
+          srOnlyLabel={asDisplay}
+          hint={textHint ? undefined : hint}
+        >
         <input
           ref={setRefs}
           id={fieldId}
@@ -506,18 +533,15 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
             invalid && FIELD_INVALID,
           )}
           aria-invalid={invalid || undefined}
-          aria-describedby={ariaDescribedBy}
+          aria-describedby={describedBy}
           aria-required={ariaRequired}
         />
-        {label !== undefined && (
-          // The display shape drops the label VISUALLY, not from the accessibility
-          // tree: a 36px tinted figure at the top of a transaction form is legibly
-          // the amount, but a screen reader still needs the name, and callers that
-          // pass `label` without `ariaLabel` would otherwise be left with none.
-          <label htmlFor={fieldId} className={asDisplay ? "sr-only" : FLOATING_LABEL_CLASS}>
-            {label}
-          </label>
-        )}
+        {/* The label is FloatingField's, after these children (the floating trick
+            reads the input through `peer-*`). The display shape drops it VISUALLY,
+            not from the accessibility tree: a 36px tinted figure at the top of a
+            transaction form is legibly the amount, but a screen reader still needs
+            the name, and callers that pass `label` without `ariaLabel` would
+            otherwise be left with none. */}
         {/* Trailing controls share one flex track so the calculator icon and the
             currency suffix/picker sit side by side without overlapping. */}
         {/* The display shape has no box to inset from, so the controls align to the
@@ -620,7 +644,14 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
               })}
           </DropdownPanel>
         )}
-        </div>
+        </FloatingField>
+        {/* Outside the relative box, as NumberInput's caption is: the trailing
+            controls are `inset-y-1` in it and would stretch down over a second line. */}
+        {textHint && (
+          <p id={hintId} className="mt-1 text-[11px] leading-tight text-[var(--text-muted)]">
+            {hint}
+          </p>
+        )}
         {showNumpad && (
           <NumberPadSheet
             // Localised like the field it mirrors. Keys are typing, read by the

package/src/components/authed-image.tsx

@@ -44,8 +44,18 @@ export interface AuthedImageProps
   link?: boolean;
   /** Replaces the default skeleton while loading. */
   loadingFallback?: ReactNode;
-  /** Replaces the default "couldn't load" tile. */
+  /**
+   * Replaces the default "couldn't load" tile. `null` renders nothing in its place —
+   * an optional photo slot that simply stays empty; only `undefined` (left out) means
+   * the default tile.
+   */
   errorFallback?: ReactNode;
+  /**
+   * Keep a click on the image (and the Enter that follows its `link`) from reaching an
+   * ancestor — a thumbnail in a DataTable row or a clickable card opens itself instead
+   * of also running the row's action. As TextLink's and IconButton's `stopPropagation`.
+   */
+  stopPropagation?: boolean;
   labels?: Partial<AuthedImageLabels>;
 }
 
@@ -68,6 +78,7 @@ export function AuthedImage({
   link,
   loadingFallback,
   errorFallback,
+  stopPropagation,
   labels: labelsProp,
   onLoad,
   onError,
@@ -85,6 +96,7 @@ export function AuthedImage({
       link={link}
       loadingFallback={loadingFallback}
       errorFallback={errorFallback}
+      stopPropagation={stopPropagation}
       imgProps={rest}
       onLoad={onLoad}
       onError={onError}
@@ -106,6 +118,7 @@ export function ImageStates({
   link,
   loadingFallback,
   errorFallback,
+  stopPropagation,
   imgProps,
   onLoad,
   onError,
@@ -118,6 +131,7 @@ export function ImageStates({
   link?: boolean;
   loadingFallback?: ReactNode;
   errorFallback?: ReactNode;
+  stopPropagation?: boolean;
   imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "children" | "onLoad" | "onError">;
   onLoad?: ImgHTMLAttributes<HTMLImageElement>["onLoad"];
   onError?: ImgHTMLAttributes<HTMLImageElement>["onError"];
@@ -153,7 +167,10 @@ export function ImageStates({
   );
 
   return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- not an interaction: only fences the image's own clicks off from an ancestor's handler
     <span
+      onClick={stopPropagation ? (e) => e.stopPropagation() : undefined}
+      onKeyDown={stopPropagation ? (e) => e.key === "Enter" && e.stopPropagation() : undefined}
       data-image-state={failed ? "error" : waiting ? "loading" : fetched.status === "idle" ? "idle" : "ready"}
       className={cn("relative block overflow-hidden", wrapperClassName)}
       aria-busy={waiting || undefined}
@@ -172,7 +189,8 @@ export function ImageStates({
           </span>
         ))}
       {failed &&
-        (errorFallback ?? (
+        // `=== undefined`, not `??`: `null` is the caller asking for nothing at all.
+        (errorFallback !== undefined ? errorFallback : (
           <span
             // `role="img"` with the alt as its name: the picture that failed still
             // occupies its place in the reading order, and "couldn't be loaded" is

package/src/components/checkbox.tsx

@@ -40,7 +40,7 @@ const BOX_MIXED = "border-[var(--brand)] bg-[var(--brand)]";
 // survives fractional display scaling on every edge (see the note in ui.tsx). The
 // focus ring turns danger too, so focusing a wrong box does not repaint it as fine.
 const BOX_INVALID =
-  "border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] checked:border-[var(--danger-border)] focus-visible:ring-[var(--danger)]";
+  "border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] checked:border-[var(--danger-border-strong)] focus-visible:ring-[var(--danger)]";
 
 const ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
 

package/src/components/choice-card.tsx

@@ -102,7 +102,7 @@ const CARD =
 const CARD_DISABLED = "hover:border-[var(--border)] hover:bg-[var(--bg-surface)]";
 
 const CARD_INVALID =
-  "border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] has-[:checked]:border-[var(--danger-border)] has-[:checked]:ring-[var(--danger-border)]";
+  "border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] has-[:checked]:border-[var(--danger-border-strong)] has-[:checked]:ring-[var(--danger-border-strong)]";
 
 const BOX =
   "peer size-4 shrink-0 appearance-none border border-[var(--border-strong)] bg-[var(--bg-surface)] transition-colors " +

package/src/components/error-boundary.tsx

@@ -642,7 +642,7 @@ function ErrorFallback({
             // program's words and can be read out or screenshotted verbatim.
             <p
               data-error-message=""
-              className="-mt-1 mb-1 basis-full whitespace-pre-wrap break-words rounded-md border border-[var(--danger-border)] bg-[var(--danger-bg)] px-3 py-2 text-start font-mono text-xs text-[var(--text-primary)]"
+              className="-mt-1 mb-1 basis-full whitespace-pre-wrap break-words rounded-md border border-[var(--danger-border-strong)] bg-[var(--danger-bg)] px-3 py-2 text-start font-mono text-xs text-[var(--text-primary)]"
             >
               {errorLine}
             </p>

package/src/components/file-button.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useState } from "react";
+import { forwardRef, useId, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, DragEvent, ReactElement, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
 import { useAnnounce } from "../hooks/use-announce";
@@ -418,6 +418,15 @@ export interface FileButtonProps
    *  Off by default: a button that silently takes drops is a surprise on a page that
    *  has a real drop target elsewhere. */
   droppable?: boolean;
+  /**
+   * Show what was picked beside the button: the file's name, or "3 files selected"
+   * (`filePicker.selected`) for several — a native `<input type="file">` says this,
+   * and a bare button that takes a file and says nothing leaves the user to trust it.
+   * The read-out is a polite live region and describes the button, so it is heard
+   * when it changes and again on focus. It holds the last ACCEPTED pick: a refused
+   * file leaves it as it was. Off by default, so the button's layout is unchanged.
+   */
+  showFileName?: boolean;
 }
 
 /**
@@ -447,6 +456,7 @@ export const FileButton = forwardRef<HTMLButtonElement, FileButtonProps>(functio
     labels,
     pending,
     droppable,
+    showFileName = false,
     disabled,
     children,
     className,
@@ -460,6 +470,9 @@ export const FileButton = forwardRef<HTMLButtonElement, FileButtonProps>(functio
   ref,
 ) {
   const inert = Boolean(disabled || pending);
+  const [picked, setPicked] = useState<readonly File[]>([]);
+  const pickedId = useId();
+  const pickerLabels = useKitLabels("filePicker", DEFAULT_FILE_PICKER_LABELS, labels);
   const picker = useFilePicker({
     accept,
     multiple,
@@ -468,12 +481,19 @@ export const FileButton = forwardRef<HTMLButtonElement, FileButtonProps>(functio
     maxFiles,
     isValid,
     invalidMessage,
-    onFiles,
+    onFiles: showFileName
+      ? (files) => {
+          setPicked(files);
+          onFiles?.(files);
+        }
+      : onFiles,
     onPick,
     onReject,
     labels,
     disabled: inert,
   });
+  const pickedText =
+    picked.length === 0 ? "" : picked.length === 1 ? picked[0].name : pickerLabels.selected(picked.length, picked[0].name);
   const [dragOver, setDragOver] = useState(false);
 
   const hasFiles = (e: DragEvent) => Array.from(e.dataTransfer?.types ?? []).includes("Files");
@@ -514,34 +534,64 @@ export const FileButton = forwardRef<HTMLButtonElement, FileButtonProps>(functio
   // declare it, hence the widening here rather than a second button implementation.
   const refProp = { ref } as { ref?: Ref<HTMLButtonElement> };
 
+  const button = (
+    <Button
+      {...rest}
+      {...refProp}
+      {...dropHandlers}
+      type="button"
+      disabled={inert}
+      aria-busy={pending || undefined}
+      aria-describedby={
+        showFileName && pickedText
+          ? [rest["aria-describedby"], pickedId].filter(Boolean).join(" ")
+          : rest["aria-describedby"]
+      }
+      data-drag-over={dragOver || undefined}
+      className={cn(
+        // A live drag gets the focus ring's colour as a ring: "let go here", in the
+        // same vocabulary the button already uses for "you are here".
+        dragOver && "ring-2 ring-[var(--brand)]",
+        // Beside a long file name it is the NAME that gives way, never the button.
+        showFileName && "shrink-0",
+        className,
+      )}
+      onClick={(e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) picker.open();
+      }}
+    >
+      {/* `label={null}`: the spinner is decoration here — `aria-busy` says the same
+          thing on the button, and a spoken "Loading" would run into its name. */}
+      {pending && <Spinner label={null} className="size-4" />}
+      {children}
+    </Button>
+  );
+
+  if (!showFileName) {
+    return (
+      <>
+        {button}
+        {picker.element}
+      </>
+    );
+  }
   return (
-    <>
-      <Button
-        {...rest}
-        {...refProp}
-        {...dropHandlers}
-        type="button"
-        disabled={inert}
-        aria-busy={pending || undefined}
-        data-drag-over={dragOver || undefined}
-        className={cn(
-          // A live drag gets the focus ring's colour as a ring: "let go here", in the
-          // same vocabulary the button already uses for "you are here".
-          dragOver && "ring-2 ring-[var(--brand)]",
-          className,
-        )}
-        onClick={(e) => {
-          onClick?.(e);
-          if (!e.defaultPrevented) picker.open();
-        }}
+    // One inline row, so the name sits beside the button wherever the button sits; the
+    // name truncates (full list in its title) rather than pushing the row wider.
+    <span className="inline-flex max-w-full min-w-0 items-center gap-2">
+      {button}
+      <span
+        id={pickedId}
+        aria-live="polite"
+        data-slot="file-button-name"
+        title={picked.map((f) => f.name).join(", ") || undefined}
+        className="min-w-0 truncate text-sm text-[var(--text-secondary)]"
       >
-        {/* `label={null}`: the spinner is decoration here — `aria-busy` says the same
-            thing on the button, and a spoken "Loading" would run into its name. */}
-        {pending && <Spinner label={null} className="size-4" />}
-        {children}
-      </Button>
+        {pickedText}
+      </span>
       {picker.element}
-    </>
+    </span>
   );
 });
 FileButton.displayName = "FileButton";

package/src/components/file-dropzone.tsx

@@ -339,7 +339,7 @@ export function FileDropzone({
               : dragOver
                 ? "cursor-pointer border-[var(--border-strong)] bg-[var(--bg-active)]"
                 : showError
-                  ? "cursor-pointer border-[var(--danger-border)]"
+                  ? "cursor-pointer border-[var(--danger-border-strong)]"
                   : "cursor-pointer border-[var(--border)] hover:border-[var(--border-strong)]",
           className,
         )}