@eifi1/ui-kit 0.51.4 → 0.51.6

package/src/components/amount-input.tsx

@@ -3,13 +3,7 @@ import { ChevronDown } from "lucide-react";
 import type { ReactNode, Ref } from "react";
 import { CurrencyOptionList, getCurrency } from "./currency-option-list";
 import { useComboboxCore } from "./combobox-core";
-import {
-  FIELD_BASE,
-  FIELD_DISPLAY,
-  FIELD_INVALID,
-  FLOATING_INPUT_CLASS,
-  FloatingField,
-} from "./field-base";
+import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField } from "./field-base";
 import { cn } from "../lib/cn";
 import { currencyMinorDigits } from "../lib/format";
 import { roundHalfAway } from "../lib/round";
@@ -316,7 +310,6 @@ export interface AmountInputProps extends FieldHelpProps, DataAttributes {
   ref?: Ref<HTMLInputElement>;
 }
 
-
 /**
  * A settled figure, rounded to `digits` (half away from zero) and clamped to
  * `min`/`max`. Only a plain number is touched. A half-typed draft or an expression
@@ -356,10 +349,7 @@ const TONE_CLASS: Record<"neutral" | "outflow" | "inflow", string> = {
 // reflow the figure as they are typed; FIELD_DISPLAY's own muted placeholder
 // colour is what keeps an EMPTY form from painting its zero in the direction tint
 // (`tone` is computed from 0, which reads as an inflow).
-const DISPLAY_INPUT_CLASS = cn(
-  FIELD_DISPLAY,
-  "text-4xl font-semibold leading-tight tracking-tight tabular-nums",
-);
+const DISPLAY_INPUT_CLASS = cn(FIELD_DISPLAY, "text-4xl font-semibold leading-tight tracking-tight tabular-nums");
 
 /**
  * Is `text` the ANSWER to `previous`, or something typed OVER it?
@@ -381,7 +371,33 @@ function isResultOf(previous: string, text: string, settle: (text: string) => st
 }
 
 export function AmountInput(props: AmountInputProps) {
-  const { ref, value, onChange, currency, onCurrencyChange, placeholder, label, className, inputClassName, id, "aria-label": ariaLabel, "aria-required": ariaRequired, autoFocus, tone = "neutral", negative = false, onNegativeChange, align = "start", labels, currencyNames, currencyOptions, digits: digitsProp, min, max, onCommit, disabledReasonDisplay } = props;
+  const {
+    ref,
+    value,
+    onChange,
+    currency,
+    onCurrencyChange,
+    placeholder,
+    label,
+    className,
+    inputClassName,
+    id,
+    "aria-label": ariaLabel,
+    "aria-required": ariaRequired,
+    autoFocus,
+    tone = "neutral",
+    negative = false,
+    onNegativeChange,
+    align = "start",
+    labels,
+    currencyNames,
+    currencyOptions,
+    digits: digitsProp,
+    min,
+    max,
+    onCommit,
+    disabledReasonDisplay,
+  } = props;
   const generatedId = useId();
   const fieldId = id ?? generatedId;
   // The sign is DISPLAYED, not stored (live #201 rework). `value` is the
@@ -440,10 +456,22 @@ export function AmountInput(props: AmountInputProps) {
   const hasEnd = showCalc || Boolean(currency);
   const [endRef, endWidth] = useEndWidth(hasEnd);
   const trailingRoom = asDisplay
-    ? currency ? (editable ? "pe-16" : "pe-12") : undefined
+    ? currency
+      ? editable
+        ? "pe-16"
+        : "pe-12"
+      : undefined
     : showCalc
-      ? currency ? (editable ? "pe-24" : "pe-16") : "pe-10"
-      : currency ? (editable ? "pe-20" : "pe-14") : undefined;
+      ? currency
+        ? editable
+          ? "pe-24"
+          : "pe-16"
+        : "pe-10"
+      : currency
+        ? editable
+          ? "pe-20"
+          : "pe-14"
+        : undefined;
   const innerRef = useRef<HTMLInputElement>(null);
   const setRefs = useMemo(() => mergeRefs(innerRef, ref), [ref]);
   // While the typist is typing, the field shows THEIR text ("1.234,5" stays exactly
@@ -545,180 +573,180 @@ export function AmountInput(props: AmountInputProps) {
           Tooltip), as NumberInput does; the root above keeps `className`, so nothing
           reflows. */}
       <LockedOrNot lock={lock} display={disabledReasonDisplay}>
-      <FloatingField
-        className="w-full"
-        htmlFor={fieldId}
-        label={label}
-        srOnlyLabel={asDisplay}
-        hint={numeric.hint.labelHint}
-      >
-      <input
-        ref={setRefs}
-        id={fieldId}
-        aria-label={ariaLabel}
-        type="text"
-        // eslint-disable-next-line jsx-a11y/no-autofocus -- opt-in per call site (feedback #70)
-        autoFocus={autoFocus}
-        // On mobile suppress the OS keyboard so our numpad sheet owns entry; the
-        // field keeps focus/caret. Desktop keeps the native decimal keypad.
-        inputMode={isMobile ? "none" : "decimal"}
-        autoComplete="off"
-        disabled={off}
-        // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.
-        readOnly={locked || undefined}
-        aria-disabled={locked || undefined}
-        // The floating-label pattern needs a blank placeholder for its
-        // peer-placeholder-shown trick. The display shape has no floating label,
-        // so it spends the placeholder on what an empty borderless form actually
-        // needs: a zero to aim at, at full size. The caller supplies it because
-        // only the app knows the locale's decimal separator.
-        placeholder={asDisplay ? (placeholder ?? "0") : label !== undefined ? " " : placeholder}
-        value={display}
-        onChange={(e) => {
-          if (!locked) typed(e.target.value);
-        }}
-        onFocus={() => setFocused(true)}
-        onBlur={() => {
-          // Nothing settles under the lock — not even a draft typed before it arrived,
-          // which stays in the field for when it lifts.
-          if (!locked) commit();
-          setFocused(false);
-        }}
-        onKeyDown={(e) => {
-          if (e.key !== "Enter") return;
-          // Locked: Enter submits no form and settles nothing.
-          if (locked) e.preventDefault();
-          else commit();
-        }}
-        className={cn(
-          // With a label, use the floating-input padding (pt-4 pb-1) like every
-          // other labelled field so the value sits BELOW the floated label rather
-          // than vertically centred where it overlaps the resting label
-          // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +
-          // transparent-placeholder bits.
-          asDisplay ? DISPLAY_INPUT_CLASS : label !== undefined ? FLOATING_INPUT_CLASS : FIELD_BASE,
-          // The plain end padding, with nothing trailing: cosmetic, so the caller's
-          // to change (keksdose 0.24 — a symmetric `px-2` in a budget cell).
-          !trailingRoom && (asDisplay ? "pe-0" : "pe-3"),
-          // Centred display shape: centre in what is LEFT of the currency chip.
-          // `text-center` alone would centre the figure in the whole box, i.e.
-          // partly underneath the chip; the padding below is what takes the chip
-          // out of the centring, and nothing is added at the start because a
-          // mirrored reservation would spend the width twice (see `align`).
-          asDisplay && align === "center" && "text-center",
-          // Over the base class's own text colour.
-          TONE_CLASS[tone],
-          // The caller's, over all of the above — base, plain padding, alignment and
-          // tone — and under only what the field needs to work (see `inputClassName`).
-          inputClassName,
-          // Room for the trailing controls, after the caller's so a `px-2` cannot run
-          // the digits under the chip (NumberInput's order, which reserves its unit
-          // and calculator the same way).
-          trailingRoom,
-          invalid && FIELD_INVALID,
-          locked && "cursor-not-allowed",
-        )}
-        // The classes above are the fallback; once measured the field reserves exactly
-        // its trailing controls' width, inline so it wins over every class (see
-        // `trailingRoom`).
-        style={hasEnd && endWidth != null ? { paddingInlineEnd: endWidth + (asDisplay ? 4 : 8) } : undefined}
-        aria-invalid={invalid || undefined}
-        aria-describedby={numeric.describedBy}
-        aria-required={ariaRequired}
-      />
-      {/* The label is FloatingField's, after these children (the floating trick
+        <FloatingField
+          className="w-full"
+          htmlFor={fieldId}
+          label={label}
+          srOnlyLabel={asDisplay}
+          hint={numeric.hint.labelHint}
+        >
+          <input
+            ref={setRefs}
+            id={fieldId}
+            aria-label={ariaLabel}
+            type="text"
+            // eslint-disable-next-line jsx-a11y/no-autofocus -- opt-in per call site (feedback #70)
+            autoFocus={autoFocus}
+            // On mobile suppress the OS keyboard so our numpad sheet owns entry; the
+            // field keeps focus/caret. Desktop keeps the native decimal keypad.
+            inputMode={isMobile ? "none" : "decimal"}
+            autoComplete="off"
+            disabled={off}
+            // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.
+            readOnly={locked || undefined}
+            aria-disabled={locked || undefined}
+            // The floating-label pattern needs a blank placeholder for its
+            // peer-placeholder-shown trick. The display shape has no floating label,
+            // so it spends the placeholder on what an empty borderless form actually
+            // needs: a zero to aim at, at full size. The caller supplies it because
+            // only the app knows the locale's decimal separator.
+            placeholder={asDisplay ? (placeholder ?? "0") : label !== undefined ? " " : placeholder}
+            value={display}
+            onChange={(e) => {
+              if (!locked) typed(e.target.value);
+            }}
+            onFocus={() => setFocused(true)}
+            onBlur={() => {
+              // Nothing settles under the lock — not even a draft typed before it arrived,
+              // which stays in the field for when it lifts.
+              if (!locked) commit();
+              setFocused(false);
+            }}
+            onKeyDown={(e) => {
+              if (e.key !== "Enter") return;
+              // Locked: Enter submits no form and settles nothing.
+              if (locked) e.preventDefault();
+              else commit();
+            }}
+            className={cn(
+              // With a label, use the floating-input padding (pt-4 pb-1) like every
+              // other labelled field so the value sits BELOW the floated label rather
+              // than vertically centred where it overlaps the resting label
+              // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +
+              // transparent-placeholder bits.
+              asDisplay ? DISPLAY_INPUT_CLASS : label !== undefined ? FLOATING_INPUT_CLASS : FIELD_BASE,
+              // The plain end padding, with nothing trailing: cosmetic, so the caller's
+              // to change (keksdose 0.24 — a symmetric `px-2` in a budget cell).
+              !trailingRoom && (asDisplay ? "pe-0" : "pe-3"),
+              // Centred display shape: centre in what is LEFT of the currency chip.
+              // `text-center` alone would centre the figure in the whole box, i.e.
+              // partly underneath the chip; the padding below is what takes the chip
+              // out of the centring, and nothing is added at the start because a
+              // mirrored reservation would spend the width twice (see `align`).
+              asDisplay && align === "center" && "text-center",
+              // Over the base class's own text colour.
+              TONE_CLASS[tone],
+              // The caller's, over all of the above — base, plain padding, alignment and
+              // tone — and under only what the field needs to work (see `inputClassName`).
+              inputClassName,
+              // Room for the trailing controls, after the caller's so a `px-2` cannot run
+              // the digits under the chip (NumberInput's order, which reserves its unit
+              // and calculator the same way).
+              trailingRoom,
+              invalid && FIELD_INVALID,
+              locked && "cursor-not-allowed",
+            )}
+            // The classes above are the fallback; once measured the field reserves exactly
+            // its trailing controls' width, inline so it wins over every class (see
+            // `trailingRoom`).
+            style={hasEnd && endWidth != null ? { paddingInlineEnd: endWidth + (asDisplay ? 4 : 8) } : undefined}
+            aria-invalid={invalid || undefined}
+            aria-describedby={numeric.describedBy}
+            aria-required={ariaRequired}
+          />
+          {/* 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 `aria-label` would
           otherwise be left with none. */}
-      {/* Trailing controls share one flex track so the calculator icon and the
+          {/* 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
+          {/* The display shape has no box to inset from, so the controls align to the
           figure's own end edge and its baseline strip (`bottom-1`, matching the
           input's pb-1) instead of floating inside a field. */}
-      <div
-        // Measured for the input's end padding (see `trailingRoom`).
-        ref={endRef}
-        className={cn(
-          "absolute flex items-center gap-0.5",
-          // Logical `end-*`: the chip and the calculator are the figure's trailing
-          // controls, so a right-to-left form carries them on the left.
-          asDisplay ? "bottom-1 end-0" : "inset-y-1 end-1",
-        )}
-      >
-        {showCalc && (
-          <CalculatorButton
-            // The mark the field shows but not the typist's grouping: the evaluator
-            // reads either mark, and "1.234,5" is two of them. The result comes back
-            // dot-decimal.
-            value={derived}
-            onChange={(result, expression) => {
-              setDraft(null);
-              const settled = settle(result);
-              handleText(settled, expression);
-              onCommit?.(settled);
-            }}
-            className="px-1.5"
-            aria-label={labels?.calculatorTrigger}
-            labels={labels?.calculator}
-          />
-        )}
-        {currency && !editable && (
-          <span
-            aria-hidden
+          <div
+            // Measured for the input's end padding (see `trailingRoom`).
+            ref={endRef}
             className={cn(
-              "pointer-events-none px-1 font-medium text-muted",
-              // A text-xs chip next to a 36px figure reads as a stray footnote.
-              asDisplay ? "text-sm" : "text-xs",
+              "absolute flex items-center gap-0.5",
+              // Logical `end-*`: the chip and the calculator are the figure's trailing
+              // controls, so a right-to-left form carries them on the left.
+              asDisplay ? "bottom-1 end-0" : "inset-y-1 end-1",
             )}
           >
-            {currency}
-          </span>
-        )}
-        {currency && editable && (
-          <button
-            ref={chipRef}
-            type="button"
-            onClick={() => setOpen((v) => !v)}
-            // A button that opens a listbox, and says so: the chip is a control inside
-            // a text field, not a field of its own, so not a combobox.
-            aria-haspopup="listbox"
-            aria-expanded={open}
-            aria-controls={listboxId}
-            aria-label={
-              // "Currency: EUR" through `common.fieldValue`, not a template literal:
-              // the colon-and-space is punctuation a translation has to own.
-              selected ? common.fieldValue(currencyText.currency, selected.code) : currencyText.currency
-            }
-            className={cn(
-              "flex items-center gap-1 rounded px-2 py-1 font-medium text-secondary hover:bg-hover",
-              asDisplay ? "text-sm" : "text-xs",
+            {showCalc && (
+              <CalculatorButton
+                // The mark the field shows but not the typist's grouping: the evaluator
+                // reads either mark, and "1.234,5" is two of them. The result comes back
+                // dot-decimal.
+                value={derived}
+                onChange={(result, expression) => {
+                  setDraft(null);
+                  const settled = settle(result);
+                  handleText(settled, expression);
+                  onCommit?.(settled);
+                }}
+                className="px-1.5"
+                aria-label={labels?.calculatorTrigger}
+                labels={labels?.calculator}
+              />
             )}
-          >
-            {currency}
-            <ChevronDown className="size-3" />
-          </button>
-        )}
-      </div>
-      {editable && (
-        <CurrencyOptionList
-          core={core}
-          listboxId={listboxId}
-          value={currency}
-          codes={currencyOptions}
-          currencyNames={currencyNames}
-          locale={locale}
-          searchPlaceholder={currencyText.search}
-          // The phone sheet's title: what the chip is for.
-          sheetTitle={currencyText.currency}
-          onChoose={(code) => {
-            onCurrencyChange?.(code);
-            closeToTrigger();
-          }}
-        />
-      )}
-      </FloatingField>
+            {currency && !editable && (
+              <span
+                aria-hidden
+                className={cn(
+                  "pointer-events-none px-1 font-medium text-muted",
+                  // A text-xs chip next to a 36px figure reads as a stray footnote.
+                  asDisplay ? "text-sm" : "text-xs",
+                )}
+              >
+                {currency}
+              </span>
+            )}
+            {currency && editable && (
+              <button
+                ref={chipRef}
+                type="button"
+                onClick={() => setOpen((v) => !v)}
+                // A button that opens a listbox, and says so: the chip is a control inside
+                // a text field, not a field of its own, so not a combobox.
+                aria-haspopup="listbox"
+                aria-expanded={open}
+                aria-controls={listboxId}
+                aria-label={
+                  // "Currency: EUR" through `common.fieldValue`, not a template literal:
+                  // the colon-and-space is punctuation a translation has to own.
+                  selected ? common.fieldValue(currencyText.currency, selected.code) : currencyText.currency
+                }
+                className={cn(
+                  "flex items-center gap-1 rounded px-2 py-1 font-medium text-secondary hover:bg-hover",
+                  asDisplay ? "text-sm" : "text-xs",
+                )}
+              >
+                {currency}
+                <ChevronDown className="size-3" />
+              </button>
+            )}
+          </div>
+          {editable && (
+            <CurrencyOptionList
+              core={core}
+              listboxId={listboxId}
+              value={currency}
+              codes={currencyOptions}
+              currencyNames={currencyNames}
+              locale={locale}
+              searchPlaceholder={currencyText.search}
+              // The phone sheet's title: what the chip is for.
+              sheetTitle={currencyText.currency}
+              onChoose={(code) => {
+                onCurrencyChange?.(code);
+                closeToTrigger();
+              }}
+            />
+          )}
+        </FloatingField>
       </LockedOrNot>
       {/* 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. */}

package/src/components/authed-image.tsx

@@ -22,8 +22,7 @@ export interface AuthedImageLabels {
 // Defined in ./authed-image-labels, which holds no component code (0.34, KS U8).
 export { DEFAULT_AUTHED_IMAGE_LABELS };
 
-export interface AuthedImageProps
-  extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "children"> {
+export interface AuthedImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "children"> {
   /** The image's URL — an API path when a {@link fetcher} is given. */
   src: string | null | undefined;
   /** Required: an image without a text alternative is a gap a reader falls into.
@@ -188,7 +187,9 @@ export function ImageStates({
         ))}
       {failed &&
         // `=== undefined`, not `??`: `null` is the caller asking for nothing at all.
-        (errorFallback !== undefined ? errorFallback : (
+        (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
@@ -198,7 +199,9 @@ export function ImageStates({
             className="flex h-full min-h-16 w-full flex-col items-center justify-center gap-1 bg-hover p-2 text-center text-xs text-muted"
           >
             <ImageOff aria-hidden className="size-5 shrink-0" />
-            <span aria-hidden className="line-clamp-2">{labels.loadError}</span>
+            <span aria-hidden className="line-clamp-2">
+              {labels.loadError}
+            </span>
           </span>
         ))}
     </span>

package/src/components/autocomplete.tsx

@@ -44,10 +44,11 @@ import type { CommitScope } from "./write-lock";
  * are omitted. Everything else reaches the `<input>`, the way it does on {@link Input}.
  */
 export interface AutocompleteProps<V extends string | number = string>
-  extends Omit<
-    ComponentPropsWithoutRef<"input">,
-    "value" | "defaultValue" | "onChange" | "onSelect" | "children" | "type" | "size"
-  >,
+  extends
+    Omit<
+      ComponentPropsWithoutRef<"input">,
+      "value" | "defaultValue" | "onChange" | "onSelect" | "children" | "type" | "size"
+    >,
     FieldHelpProps {
   /** What is in the field. Controlled, and never reset by the component: opening,
    *  closing and a failed lookup all leave it exactly as typed. */
@@ -334,8 +335,7 @@ export function Autocomplete<V extends string | number = string>(props: Autocomp
   const nativeSize = typeof size === "number" ? size : undefined;
   // The caller's name wins; else the floating label, by reference so a non-string
   // label still names the field.
-  const labelledBy =
-    ariaLabel === undefined ? (ariaLabelledBy ?? (hasLabel ? labelId : undefined)) : undefined;
+  const labelledBy = ariaLabel === undefined ? (ariaLabelledBy ?? (hasLabel ? labelId : undefined)) : undefined;
   // While locked the field sits in the reason's Tooltip — in a fragment with a hidden
   // copy of the reason, Button's anatomy; `block` so a full-width field stays full width.
   const withLock = (box: ReactNode) =>
@@ -611,9 +611,7 @@ export function Autocomplete<V extends string | number = string>(props: Autocomp
                             </span>
                           )}
                           <span className="min-w-0 flex-1">
-                            <span className="block truncate-until-large text-primary">
-                              {o.label}
-                            </span>
+                            <span className="block truncate-until-large text-primary">{o.label}</span>
                             {o.sublabel && (
                               <span
                                 className={cn(

package/src/components/bulk-action-bar.tsx

@@ -329,9 +329,7 @@ export function BulkActionBar({
           no room, so it was the item squeezed to nothing instead of a line breaking.
           Its own width is its basis now; `truncate` is left for a label too long for a
           line on its own. */}
-      <span className="min-w-0 flex-auto truncate text-sm font-medium text-primary">
-        {labels.selected(shownCount)}
-      </span>
+      <span className="min-w-0 flex-auto truncate text-sm font-medium text-primary">{labels.selected(shownCount)}</span>
       {/* `contents`, so the caller's controls are flex items of the bar itself. */}
       <div className="contents">{children}</div>
       {!floating && clear}
@@ -352,10 +350,7 @@ export function BulkActionBar({
           {toolbar}
           <div
             data-bulk-action-bar-panel=""
-            className={cn(
-              "border-t border-subtle px-3 py-3",
-              floating && "max-h-[60dvh] overflow-y-auto",
-            )}
+            className={cn("border-t border-subtle px-3 py-3", floating && "max-h-[60dvh] overflow-y-auto")}
           >
             {panel}
           </div>

package/src/components/button-group.tsx

@@ -86,8 +86,7 @@ const ELEVATED_JOINED = "bg-surface shadow-lg";
 // `elevated`, gapped: there is no frame, so each disc carries the shadow. Aimed at the
 // control, not the tooltip's square wrapper span, whose shadow would be a box round a
 // round disc.
-const ELEVATED_GAPPED =
-  "[&>button]:shadow-md [&>a]:shadow-md [&>*>button]:shadow-md [&>*>a]:shadow-md";
+const ELEVATED_GAPPED = "[&>button]:shadow-md [&>a]:shadow-md [&>*>button]:shadow-md [&>*>a]:shadow-md";
 
 export interface ButtonGroupProps extends Omit<ComponentPropsWithRef<"div">, "role"> {
   /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —

package/src/components/button-look.ts

@@ -28,13 +28,7 @@ import type { KitLinkComponent, KitLinkProps } from "../i18n/kit-labels";
  *   same look; a development build warns once per name). They are removed in 0.51, and
  *   `primary` will not come back with another meaning.
  */
-export type ButtonVariant =
-  | "default"
-  | "accent"
-  | "secondary"
-  | "ghost"
-  | "danger"
-  | "link";
+export type ButtonVariant = "default" | "accent" | "secondary" | "ghost" | "danger" | "link";
 
 // Shared base ring for every button-styled element. Kept as a named const so the
 // <Button> component and the {@link buttonClasses} helper draw from one source and
@@ -116,10 +110,8 @@ export const buttonVariantClasses: Record<ButtonVariant, string> = {
     "border border-subtle bg-surface-2 text-primary hover:bg-active focus-visible:ring-brand",
   secondary: `border border-subtle bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,
   ghost: `bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,
-  danger:
-    "bg-danger text-danger-contrast hover:bg-danger-hover focus-visible:ring-danger-strong",
-  accent:
-    "bg-brand text-brand-contrast hover:bg-brand-hover focus-visible:ring-brand",
+  danger: "bg-danger text-danger-contrast hover:bg-danger-hover focus-visible:ring-danger-strong",
+  accent: "bg-brand text-brand-contrast hover:bg-brand-hover focus-visible:ring-brand",
   // A text link that is still a `<button>` — keksdose's six hand-rolled
   // `<button className="text-brand underline">` sites ("Resend code", "Show all",
   // "Undo" in a toast…), which act rather than navigate and so must not be anchors.
@@ -132,8 +124,7 @@ export const buttonVariantClasses: Record<ButtonVariant, string> = {
   // colour-roles §13.3 decision 8): `--brand` is solved as a mark (3:1), and on More
   // contrast's darker light well Moss's read 3.68:1; the derived dark brands sit at 3.0
   // as text too. Both modes, since `contrast:` does not split them.
-  link:
-    "rounded-sm p-0 bg-transparent text-brand underline-offset-4 hover:underline focus-visible:ring-brand contrast:text-brand-muted",
+  link: "rounded-sm p-0 bg-transparent text-brand underline-offset-4 hover:underline focus-visible:ring-brand contrast:text-brand-muted",
 };
 
 /**
@@ -168,8 +159,7 @@ export type ButtonTone = "default" | "muted" | "danger";
 // so tailwind-merge drops the link's `contrast:text-brand-muted` (0.36): a quiet link
 // stays quiet under More contrast. On `ghost` it reads the same either way.
 const BUTTON_TONES: Record<Exclude<ButtonTone, "default">, string> = {
-  muted:
-    "text-secondary hover:text-primary disabled:hover:text-secondary contrast:text-secondary",
+  muted: "text-secondary hover:text-primary disabled:hover:text-secondary contrast:text-secondary",
   danger:
     "text-secondary hover:text-danger focus-visible:ring-danger-strong disabled:hover:text-secondary contrast:text-secondary",
 };
@@ -185,8 +175,7 @@ const BUTTON_BOXED_DANGER: Partial<Record<ButtonVariant, string>> = {
   // IconButton's danger tone (0.33). On B′'s translucent ink `--danger` fell to 4.2:1
   // over a light page.
   ghost: "hover:bg-danger-soft",
-  secondary:
-    "border-danger bg-transparent text-danger hover:bg-danger-soft focus-visible:ring-danger-strong",
+  secondary: "border-danger bg-transparent text-danger hover:bg-danger-soft focus-visible:ring-danger-strong",
   default:
     "border-danger bg-danger-soft text-danger hover:border-[var(--danger)] hover:bg-danger hover:text-danger-contrast focus-visible:ring-danger-strong disabled:hover:border-danger disabled:hover:bg-danger-soft disabled:hover:text-danger",
 };

package/src/components/button.tsx

@@ -319,10 +319,7 @@ function ButtonElement({
               keeps an icon + text spaced as the button spaces them. */}
           <span className="inline-flex items-center justify-center gap-[inherit] opacity-0">{children}</span>
           {/* Decorative: `aria-busy` says it, as on FileButton. */}
-          <Spinner
-            label={null}
-            className="absolute inset-0 m-auto size-4 border-current/30 border-t-current"
-          />
+          <Spinner label={null} className="absolute inset-0 m-auto size-4 border-current/30 border-t-current" />
         </>
       ) : (
         children