@eifi1/ui-kit 0.11.0 → 0.12.0

package/src/components/date-picker.tsx

@@ -91,6 +91,8 @@ export interface DateTriggerAttributes {
   "aria-label"?: string;
   "aria-describedby"?: string;
   "aria-invalid"?: true;
+  /** The field's required state — `Field required` hands it down with the id pair. */
+  "aria-required"?: boolean | "true" | "false";
   disabled?: boolean;
   onClick: () => void;
   className: string;
@@ -132,6 +134,7 @@ function DateFieldTrigger({
   padded,
   disabled,
   invalid,
+  required,
   panelId,
   aria,
   renderTrigger,
@@ -153,6 +156,8 @@ function DateFieldTrigger({
   padded: boolean;
   disabled?: boolean;
   invalid?: boolean;
+  /** `aria-required`, on the trigger with the rest of the field's ARIA. */
+  required?: boolean | "true" | "false";
 }) {
   const wasOpen = useRef(false);
   useEffect(() => {
@@ -177,6 +182,7 @@ function DateFieldTrigger({
   // One attribute object, worn either by the kit's own button below or by a caller's
   // (`renderTrigger`) — so a custom trigger cannot quietly fall out of step with the
   // naming and state this one announces.
+  const isInvalid = Boolean(invalid) || aria["aria-invalid"] === true || aria["aria-invalid"] === "true";
   const attrs: DateTriggerAttributes = {
     ref: triggerRef,
     type: "button",
@@ -209,14 +215,15 @@ function DateFieldTrigger({
     "aria-haspopup": "dialog",
     "aria-controls": panelId,
     "aria-expanded": open,
-    "aria-invalid":
-      invalid || aria["aria-invalid"] === true || aria["aria-invalid"] === "true" || undefined,
+    "aria-invalid": isInvalid || undefined,
+    "aria-required": required,
     className: cn(
       FIELD_TRIGGER,
       "pe-9",
       padded && FIELD_FLOATING_PAD,
       disabled && "cursor-not-allowed opacity-50",
-      invalid && FIELD_INVALID,
+      // An `aria-invalid` from a Field spread paints too, as on Input and AmountInput.
+      isInvalid && FIELD_INVALID,
     ),
   };
   if (renderTrigger) return <CustomTrigger render={renderTrigger} attrs={attrs} valueId={valueId} />;
@@ -279,6 +286,10 @@ function DateField({
   sheetBackCloses = true,
   renderTrigger,
   children,
+  // The trigger's, not the wrapper's: `Field`'s render-prop spreads it with the id
+  // pair, and a required date read as optional while it sat on the role-less div.
+  // Taken here rather than in `splitTriggerAria`, which MonthPicker shares.
+  "aria-required": ariaRequired,
   ...rest
 }: Omit<ComponentPropsWithoutRef<"div">, "children"> & {
   triggerText: string;
@@ -393,6 +404,7 @@ function DateField({
       padded={label !== undefined}
       disabled={disabled}
       invalid={invalid}
+      required={ariaRequired}
       renderTrigger={renderTrigger}
     />
   );
@@ -577,6 +589,9 @@ export function DatePicker({
   clearLabel,
   disabled,
   invalid,
+  // Named so it reaches the field (and so its trigger) when a step/today row is the
+  // root and takes the rest of the caller's props.
+  "aria-required": ariaRequired,
   ...rest
 }: DatePickerProps) {
   const locale = useKitLocale(localeProp);
@@ -593,6 +608,7 @@ export function DatePicker({
       // With step/today buttons the flex row is the root and takes the caller's props —
       // except the ones that name the field, which still belong on its trigger.
       {...(wrapped ? triggerAria : rest)}
+      aria-required={ariaRequired}
       label={label}
       clearable={clearable}
       clearLabel={text.clear}

package/src/components/description-list.tsx

@@ -1,8 +1,20 @@
 import { createContext, useContext } from "react";
 import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from "react";
 import { cn } from "../lib/cn";
+import { useKitLabels } from "../i18n/kit-labels";
 import { FieldHint } from "./ui";
 
+/** The words a {@link DescriptionList} renders on its own behalf. */
+export interface DescriptionListLabels {
+  /** What an item with no value shows (see {@link DescriptionItemProps.placeholder}).
+   *  Default "—", an em dash. */
+  empty: string;
+}
+
+export const DEFAULT_DESCRIPTION_LIST_LABELS: DescriptionListLabels = {
+  empty: "—",
+};
+
 export type DescriptionListLayout = "rows" | "cards" | "stacked";
 export type DescriptionListDensity = "comfortable" | "compact" | "tight";
 /** How many columns a `stacked` or `cards` list may use. */
@@ -14,6 +26,7 @@ interface ListContextValue {
   prose: boolean;
   density: DescriptionListDensity;
   columns: DescriptionListColumns;
+  placeholder?: ReactNode;
 }
 
 const ListContext = createContext<ListContextValue>({
@@ -103,6 +116,9 @@ export interface DescriptionListProps extends ComponentPropsWithoutRef<"dl"> {
    * all would not be an improvement. Per item: {@link DescriptionItemProps.prose}.
    */
   prose?: boolean;
+  /** What an item with no value shows, for every item that does not set its own —
+   *  see {@link DescriptionItemProps.placeholder}. */
+  placeholder?: ReactNode;
 }
 
 /**
@@ -129,6 +145,7 @@ export function DescriptionList({
   density = "comfortable",
   minCardWidth = "10rem",
   columns,
+  placeholder,
   className,
   style,
   ...rest
@@ -147,7 +164,7 @@ export function DescriptionList({
   const grid: CSSProperties | undefined = cards
     ? { gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${track}), 1fr))` }
     : undefined;
-  const ctx: ListContextValue = { layout, numeric, prose, density, columns: columns ?? 2 };
+  const ctx: ListContextValue = { layout, numeric, prose, density, columns: columns ?? 2, placeholder };
   const text = density === "tight" ? "text-[11px] leading-4" : density === "compact" ? "text-xs" : "text-sm";
 
   if (stacked) {
@@ -215,6 +232,20 @@ export interface DescriptionItemProps extends Omit<ComponentPropsWithoutRef<"div
    * because a card grid's column count is not known to CSS ahead of layout.
    */
   span?: number | "full";
+  /**
+   * Shown in place of a value that is not there — `children` of `null`, `undefined`,
+   * `false` or `""` (a `0` is a value and is shown). Default: the list's own
+   * `placeholder`, else `descriptionList.empty` from the provider, else "—". `null`
+   * shows nothing, as an empty detail did before. kastlan's DetailField put its
+   * `EMPTY_VALUE` into every one of its call sites' values by hand.
+   *
+   * Drawn in the muted ink, so an absent value does not read as a value of "—".
+   */
+  placeholder?: ReactNode;
+}
+
+function isEmptyValue(node: ReactNode): boolean {
+  return node === undefined || node === null || node === false || node === "";
 }
 
 const ROW_PAD: Record<DescriptionListDensity, string> = {
@@ -236,11 +267,23 @@ export function DescriptionItem({
   numeric: numericProp,
   prose: proseProp,
   span,
+  placeholder: placeholderProp,
   detailClassName,
   className,
   ...rest
 }: DescriptionItemProps) {
-  const { layout, numeric: listNumeric, prose: listProse, density, columns } = useContext(ListContext);
+  const {
+    layout,
+    numeric: listNumeric,
+    prose: listProse,
+    density,
+    columns,
+    placeholder: listPlaceholder,
+  } = useContext(ListContext);
+  const labels = useKitLabels("descriptionList", DEFAULT_DESCRIPTION_LIST_LABELS);
+  const empty = isEmptyValue(children);
+  const placeholder =
+    placeholderProp !== undefined ? placeholderProp : listPlaceholder !== undefined ? listPlaceholder : labels.empty;
   const numeric = numericProp ?? listNumeric;
   const prose = proseProp ?? listProse;
   const cards = layout === "cards";
@@ -277,7 +320,13 @@ export function DescriptionItem({
         detailClassName,
       )}
     >
-      {children}
+      {empty && !isEmptyValue(placeholder) ? (
+        <span data-slot="description-empty" className="font-normal text-[var(--text-muted)]">
+          {placeholder}
+        </span>
+      ) : (
+        children
+      )}
     </dd>
   );
 

package/src/components/entity-combobox.tsx

@@ -105,6 +105,14 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
   debounceMs,
   loadErrorLabel,
   "aria-label": ariaLabel,
+  // The control's own wiring, taken off `rest` so it lands on the TRIGGER rather than
+  // the wrapper — see MultiEntityCombobox: `Field`'s render-prop spreads `{ id,
+  // aria-describedby, aria-invalid, aria-required }`, and on the role-less wrapper
+  // div the label's `htmlFor` named nothing and the hint described nothing.
+  id,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
   ...rest
 }: EntityComboboxProps<V, C>) {
   const core = useComboboxCore<V>({
@@ -115,7 +123,11 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
     minChars,
     debounceMs,
   });
-  const field = useComboboxFieldError(error, invalid);
+  const field = useComboboxFieldError(
+    error,
+    invalid || ariaInvalid === true || ariaInvalid === "true",
+    ariaDescribedBy,
+  );
   // The props are the per-instance overrides, the provider the app-wide ones; a
   // prop left `undefined` falls through to the provider rather than masking it.
   const labels = useKitLabels("combobox", DEFAULT_COMBOBOX_LABELS, {
@@ -151,13 +163,15 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
   };
 
   return (
-    // `rest` dresses the wrapper, which has no role; the accessible NAME goes on
-    // the trigger, which has one. Spread FIRST so the trigger's ARIA and the
+    // `rest` dresses the wrapper, which has no role; the accessible NAME — and the
+    // id, description, invalid and required state above — go on the trigger, which
+    // has one. Spread FIRST so the trigger's ARIA and the
     // handlers that open the panel cannot be clobbered from outside.
     <div {...rest} className={cn("relative", className)}>
       {label !== undefined && <FieldLabel>{label}</FieldLabel>}
       <button
         ref={core.triggerRef}
+        id={id}
         type="button"
         // A combobox, not a button. The distinction is not pedantry: this control
         // carried `aria-invalid`, which `button` does not support, so a required
@@ -185,6 +199,7 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
         disabled={disabled}
         aria-invalid={field.isInvalid || undefined}
         aria-describedby={field.describedBy}
+        aria-required={ariaRequired}
         onClick={() => !disabled && setOpen((o) => !o)}
         // Down/Up opens the list from the closed trigger, per the APG. Enter and
         // Space already do it through the button's own click.

package/src/components/error-boundary.tsx

@@ -0,0 +1,216 @@
+import { Component } from "react";
+import type { ErrorInfo, ReactNode } from "react";
+import { AlertTriangle } from "lucide-react";
+import { useKitLabels } from "../i18n/kit-labels";
+import { Button, EmptyState } from "./ui";
+import { Disclosure } from "./disclosure";
+
+/** The words of the default fallback. */
+export interface ErrorBoundaryLabels {
+  /** The fallback's heading. */
+  title: string;
+  /** The line under it. */
+  message: string;
+  /** The button that clears the error and renders the children again. */
+  retry: string;
+  /** The disclosure that opens the error's own text (`showDetails`). */
+  details: string;
+}
+
+export const DEFAULT_ERROR_BOUNDARY_LABELS: ErrorBoundaryLabels = {
+  title: "Something went wrong",
+  message: "This part of the page could not be shown. Try again, or reload the page.",
+  retry: "Try again",
+  details: "Error details",
+};
+
+/**
+ * What was thrown, as flat strings, read ONCE when it arrives.
+ *
+ * React stores whatever was thrown, hostile or not — `throw { get message() { throw … } }`,
+ * `throw { name: Symbol() }`, `throw undefined` — and reading one of those during the
+ * fallback's own render would throw INSIDE the boundary, escalating to the next one up
+ * (keksdose's error-boundary.tsx learned this as feedback #160: at the app level there is
+ * none, and the result is the white screen the boundary exists to prevent).
+ */
+export interface ErrorBoundaryDetails {
+  name: string;
+  message: string;
+  stack?: string;
+}
+
+function read(get: () => unknown): string | undefined {
+  try {
+    const v = get();
+    return typeof v === "string" ? v : v === undefined || v === null ? undefined : String(v);
+  } catch {
+    return undefined;
+  }
+}
+
+/** {@link ErrorBoundaryDetails} of any thrown value, without ever throwing. */
+export function describeThrown(error: unknown): ErrorBoundaryDetails {
+  if (typeof error === "object" && error !== null) {
+    const e = error as { name?: unknown; message?: unknown; stack?: unknown };
+    return {
+      name: read(() => e.name) ?? "Error",
+      message: read(() => e.message) ?? "",
+      stack: read(() => e.stack),
+    };
+  }
+  return { name: "Error", message: read(() => error) ?? "" };
+}
+
+/** What a render-prop `fallback` is handed. */
+export interface ErrorBoundaryFallbackProps {
+  /** The thrown value, as it was thrown. Read it with care — see {@link describeThrown}. */
+  error: unknown;
+  details: ErrorBoundaryDetails;
+  /** Clear the error and render the children again. */
+  reset: () => void;
+}
+
+export interface ErrorBoundaryProps {
+  children?: ReactNode;
+  /** Replaces the default fallback: a node, or a render function handed the error and
+   *  a `reset`. */
+  fallback?: ReactNode | ((props: ErrorBoundaryFallbackProps) => ReactNode);
+  /** Called once per caught error — log it, file a crash report. */
+  onError?: (error: unknown, info: ErrorInfo) => void;
+  /** Called when the error is cleared, by Retry, `reset` or a `resetKeys` change —
+   *  drop a cache, refetch. */
+  onReset?: () => void;
+  /**
+   * When any of these changes (compared with `Object.is`) AFTER an error was caught, the
+   * error is cleared and the children render again — a change in the same update that
+   * threw does not count (it is what the error was shown under) — pass the route path so leaving a broken page does not
+   * carry its fallback to the next one (keksdose's `resetKey`).
+   */
+  resetKeys?: ReadonlyArray<unknown>;
+  /** A disclosure under the message with the error's name, message and stack — for an
+   *  internal tool, or while developing. Off by default: a stack means nothing to a user. */
+  showDetails?: boolean;
+  /** The default fallback's heading level. Default `h2`: the fallback often IS the page. */
+  headingAs?: "h2" | "h3" | "h4" | "h5" | "h6";
+  /** Classes for the default fallback's box (`m-8 min-h-[400px]`, kastlan). */
+  className?: string;
+  labels?: Partial<ErrorBoundaryLabels>;
+}
+
+interface ErrorBoundaryState {
+  /** A flag of its own, so `throw undefined` is still an error shown. */
+  failed: boolean;
+  error: unknown;
+  details: ErrorBoundaryDetails | null;
+}
+
+const CLEAR: ErrorBoundaryState = { failed: false, error: null, details: null };
+
+function keysChanged(a: ReadonlyArray<unknown> | undefined, b: ReadonlyArray<unknown> | undefined): boolean {
+  if (a === b) return false;
+  if (!a || !b || a.length !== b.length) return true;
+  return a.some((v, i) => !Object.is(v, b[i]));
+}
+
+/**
+ * Catch a render error below it and show a fallback instead of an empty page.
+ *
+ * kastlan (shared/components/error-boundary.tsx) and keksdose (app/error-boundary.tsx)
+ * each built one on `EmptyState tone="danger"`: a warning glyph, a title, a line of
+ * explanation and a Retry. This is that fallback, translated through the provider
+ * (`errorBoundary.*`), with the hooks an app hangs its own behaviour on — `onError`
+ * for the crash report, `resetKeys` for the route change, `fallback` for anything else.
+ *
+ * The fallback is `role="alert"`: a page replaced by an error is news, and a reader
+ * that was on it is told.
+ */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = CLEAR;
+
+  static getDerivedStateFromError(error: unknown): Partial<ErrorBoundaryState> {
+    return { failed: true, error, details: describeThrown(error) };
+  }
+
+  componentDidCatch(error: unknown, info: ErrorInfo): void {
+    this.props.onError?.(error, info);
+  }
+
+  componentDidUpdate(prev: ErrorBoundaryProps, prevState: ErrorBoundaryState): void {
+    // Only a change AFTER the error was caught clears it (react-error-boundary's rule).
+    // `prevState.failed` is false in the update that caught it: that update may well be
+    // the one that changed the keys too — a navigation to a page that throws, with
+    // `resetKeys={[pathname]}` — and resetting then would fire `onReset` for nothing and
+    // render the failing child a second time. From then on `prev.resetKeys` are the
+    // keys the error was shown under, so any change clears it.
+    if (this.state.failed && prevState.failed && keysChanged(prev.resetKeys, this.props.resetKeys)) {
+      this.reset();
+    }
+  }
+
+  reset = (): void => {
+    this.props.onReset?.();
+    this.setState(CLEAR);
+  };
+
+  render(): ReactNode {
+    const { failed, error, details } = this.state;
+    if (!failed || !details) return this.props.children;
+    const { fallback } = this.props;
+    if (typeof fallback === "function") return fallback({ error, details, reset: this.reset });
+    if (fallback !== undefined) return fallback;
+    return (
+      <ErrorFallback
+        details={details}
+        reset={this.reset}
+        showDetails={this.props.showDetails ?? false}
+        headingAs={this.props.headingAs ?? "h2"}
+        className={this.props.className}
+        labels={this.props.labels}
+      />
+    );
+  }
+}
+
+function ErrorFallback({
+  details,
+  reset,
+  showDetails,
+  headingAs,
+  className,
+  labels,
+}: {
+  details: ErrorBoundaryDetails;
+  reset: () => void;
+  showDetails: boolean;
+  headingAs: NonNullable<ErrorBoundaryProps["headingAs"]>;
+  className?: string;
+  labels?: Partial<ErrorBoundaryLabels>;
+}) {
+  const text = useKitLabels("errorBoundary", DEFAULT_ERROR_BOUNDARY_LABELS, labels);
+  return (
+    <EmptyState
+      role="alert"
+      tone="danger"
+      headingAs={headingAs}
+      className={className}
+      icon={<AlertTriangle />}
+      title={text.title}
+      hint={text.message}
+      action={
+        <>
+          <Button variant="secondary" onClick={reset}>
+            {text.retry}
+          </Button>
+          {showDetails && (
+            <Disclosure variant="bare" title={text.details} className="basis-full text-start">
+              <pre className="max-h-60 overflow-auto whitespace-pre-wrap break-words text-xs text-[var(--text-secondary)]">
+                {details.message ? `${details.name}: ${details.message}` : details.name}
+                {details.stack ? `\n\n${details.stack}` : null}
+              </pre>
+            </Disclosure>
+          )}
+        </>
+      }
+    />
+  );
+}

package/src/components/field.tsx

@@ -55,6 +55,40 @@ export interface FieldControlProps {
   "aria-required": true | undefined;
 }
 
+/**
+ * The second argument of a `Field`'s render-prop children: what a GROUP needs that
+ * a single control does not. `htmlFor` names an `<input>`, but a `<label>` pointing
+ * at a `role="radiogroup"` div names nothing — so a group (a {@link ToggleGroup})
+ * takes `aria-labelledby={labelId}` instead. Kept out of {@link FieldControlProps}
+ * so the spread every existing control takes is unchanged.
+ */
+export interface FieldRenderMeta {
+  /** The label element's id, or `undefined` when the field has no label. */
+  labelId: string | undefined;
+}
+
+/**
+ * Where the label is visible. `"visible"` (default); `"sr-only"`: never drawn, still
+ * the control's name; `"below-sm"` / `"below-md"` / `"below-lg"`: drawn only under
+ * that breakpoint and screen-reader-only from it up.
+ *
+ * For table-like editors — kastlan's journal entry lines
+ * (accounting/components/wizard/journal-entry-lines-step.tsx) — where a desktop
+ * row sits under column headers that already say "Account" and "Amount", but the
+ * phone layout stacks each line as a card and needs the labels back. The name stays
+ * on the control at every width; only the ink changes.
+ */
+export type FieldLabelVisibility = "visible" | "sr-only" | "below-sm" | "below-md" | "below-lg";
+
+// Literal class strings so Tailwind's scanner sees each one.
+const LABEL_VISIBILITY: Record<FieldLabelVisibility, string | undefined> = {
+  visible: undefined,
+  "sr-only": "sr-only",
+  "below-sm": "sm:sr-only",
+  "below-md": "md:sr-only",
+  "below-lg": "lg:sr-only",
+};
+
 export interface FieldProps {
   /** The label above the control. Omit it for a group whose control is labelled
    *  some other way; the hint and error still render. */
@@ -74,10 +108,13 @@ export interface FieldProps {
   disabled?: boolean;
   /** The label's size: `sm` for a dense row, `md` otherwise. */
   labelSize?: "sm" | "md";
+  /** See {@link FieldLabelVisibility}. */
+  labelVisibility?: FieldLabelVisibility;
   /** Wrapper className. */
   className?: string;
-  /** The control. A function receives {@link FieldControlProps} to spread on it. */
-  children: ReactNode | ((control: FieldControlProps) => ReactNode);
+  /** The control. A function receives {@link FieldControlProps} to spread on it, and
+   *  {@link FieldRenderMeta} (the label's id, for a group). */
+  children: ReactNode | ((control: FieldControlProps, meta: FieldRenderMeta) => ReactNode);
 }
 
 const isShown = (node: ReactNode) =>
@@ -91,6 +128,7 @@ export function Field({
   htmlFor,
   disabled,
   labelSize,
+  labelVisibility = "visible",
   className,
   children,
 }: FieldProps) {
@@ -98,6 +136,7 @@ export function Field({
   const id = htmlFor ?? `${generated}-control`;
   const hintId = `${generated}-hint`;
   const errorId = `${generated}-error`;
+  const labelId = `${generated}-label`;
   const hasHint = isShown(hint);
   const hasError = isShown(error);
   const describedBy = [hasHint && hintId, hasError && errorId].filter(Boolean).join(" ");
@@ -108,20 +147,32 @@ export function Field({
     "aria-required": required || undefined,
   };
   return (
-    <div data-slot="field" className={cn("grid gap-1.5", className)}>
+    <div
+      data-slot="field"
+      className={cn(
+        "grid gap-1.5",
+        // A hidden label is `position: absolute`; `relative` keeps its containing
+        // block here rather than the page's (see sr-only-containment.test).
+        labelVisibility !== "visible" && "relative",
+        className,
+      )}
+    >
       {label !== undefined && (
         <Label
+          id={labelId}
           htmlFor={id}
           required={required}
           disabled={disabled}
           size={labelSize}
           data-error={hasError || undefined}
-          className="data-[error=true]:text-[var(--danger)]"
+          className={cn("data-[error=true]:text-[var(--danger)]", LABEL_VISIBILITY[labelVisibility])}
         >
           {label}
         </Label>
       )}
-      {typeof children === "function" ? children(control) : children}
+      {typeof children === "function"
+        ? children(control, { labelId: label !== undefined ? labelId : undefined })
+        : children}
       {hasHint && (
         <p id={hintId} className="text-[11px] leading-tight text-[var(--text-muted)]">
           {hint}

package/src/components/floating-panel.tsx

@@ -15,7 +15,8 @@ import { X } from "lucide-react";
 
 import { cn } from "../lib/cn";
 import { dirOf, type Direction } from "../lib/direction";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, useKitLink } from "../i18n/kit-labels";
+import { pickLinkRenderer } from "./text-link";
 import { Tooltip, type TooltipSide } from "./tooltip";
 
 export interface FloatingPanelLabels {
@@ -588,8 +589,17 @@ export interface FloatingActionProps extends Omit<ButtonHTMLAttributes<HTMLButto
   label: string;
   icon: ReactNode;
   /** Make it a toggle: `aria-pressed` and the brand "on" look (the brand glyph on the
-   *  quiet brand fill), as {@link FloatingActionButtonProps.pressed}. Ignored on a link. */
+   *  quiet brand fill), as {@link FloatingActionButtonProps.pressed}. Ignored on a link.
+   *  For the state without the tint, see {@link pressedStyle}. */
   pressed?: boolean;
+  /**
+   * How `pressed` looks. `tint` (default): the brand "on" look. `plain`: the member
+   * keeps its quiet look in both states and only `aria-pressed` changes — for a toggle
+   * whose icon already says which state it is in (keksdose's /transactions "Upcoming"
+   * swaps two icons; a tint on top said it twice). The same as passing `aria-pressed`
+   * without `pressed`, which also rides through untinted.
+   */
+  pressedStyle?: "tint" | "plain";
   /**
    * `primary`: the brand-filled member, for the group's main action (the /transactions
    * "+"). Default: the quiet one.
@@ -611,8 +621,8 @@ export interface FloatingActionProps extends Omit<ButtonHTMLAttributes<HTMLButto
   tooltip?: boolean;
   /** Where the tooltip opens. Default `top` — the group sits at the bottom of the screen. */
   tooltipSide?: TooltipSide;
-  /** Make it a link — the /transactions invoices member. A plain `<a>` unless
-   *  `renderLink` hands it to your router. */
+  /** Make it a link — the /transactions invoices member. Drawn by `renderLink`, else
+   *  the `<UiKitProvider linkComponent>` (an in-app `href`), else a plain `<a>`. */
   href?: string;
   /** Render the link through your router's `Link` — see {@link FloatingActionLinkProps}. */
   renderLink?: (props: FloatingActionLinkProps) => ReactElement;
@@ -637,6 +647,7 @@ export function FloatingAction({
   label,
   icon,
   pressed,
+  pressedStyle = "tint",
   variant = "default",
   badge,
   badgeLabel,
@@ -652,6 +663,7 @@ export function FloatingAction({
   ...rest
 }: FloatingActionProps) {
   const labels = useKitLabels("floatingPanel", DEFAULT_FLOATING_PANEL_LABELS);
+  const kitLink = useKitLink();
   const counted = badge !== undefined && badge > 0;
   const name = counted ? `${label}, ${badgeLabel ?? labels.badge(badge)}` : label;
   const isLink = href !== undefined;
@@ -661,7 +673,7 @@ export function FloatingAction({
     "disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-5",
     variant === "primary"
       ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]"
-      : pressed && !isLink
+      : pressed && !isLink && pressedStyle === "tint"
         ? "bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]"
         : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
     className,
@@ -697,8 +709,9 @@ export function FloatingAction({
       children: body,
     };
     const { children: content, ...anchor } = linkProps;
-    member = renderLink ? (
-      <RenderedFloatingLink render={renderLink} {...linkProps} />
+    const render = pickLinkRenderer(renderLink, kitLink, href);
+    member = render ? (
+      <RenderedFloatingLink render={render} {...linkProps} />
     ) : (
       <a {...anchor}>{content}</a>
     );