@eifi1/ui-kit 0.11.0 → 0.12.0

package/dist/kit-labels-v3biUF1L.d.ts

@@ -0,0 +1,1645 @@
+import * as react from 'react';
+import { AnchorHTMLAttributes, Ref, ReactElement, ButtonHTMLAttributes, ReactNode, SelectHTMLAttributes, InputHTMLAttributes, ComponentPropsWithoutRef, TextareaHTMLAttributes } from 'react';
+import { DataTableLabels } from './components/data-table-labels.js';
+import { MiniCalendarLabels, WeekDay } from './components/mini-calendar.js';
+import { CalendarHeatmapLabels } from './components/calendar-heatmap.js';
+import { PopoverLabels } from './components/popover.js';
+import { ChipInputLabels } from './components/chip.js';
+import { FieldSyncLabels } from './components/field-sync.js';
+import { TooltipSide } from './components/tooltip.js';
+import { WizardLabels } from './wizard/types.js';
+import { TourLabels } from './tour/tour.js';
+import { CommandPaletteLabels } from './search/command-palette.js';
+import { GlobalSearchLabels } from './search/global-search.js';
+import { MonthPickerLabels } from './components/month-picker.js';
+import { PageContentsLabels } from './components/page-contents.js';
+import { SeriesChartLabels } from './components/series-chart-labels.js';
+import { PieChartLabels } from './components/pie-chart-labels.js';
+import { SparklineLabels } from './components/sparkline.js';
+import { StatTileLabels } from './components/stat-tile.js';
+import { SignaturePadLabels } from './components/signature-pad.js';
+import { PasswordStrengthLabels } from './components/password-strength.js';
+import { DangerConfirmLabels } from './components/danger-confirm.js';
+import { SwatchPickerLabels } from './components/swatch-picker.js';
+import { IconPickerLabels } from './components/icon-picker.js';
+import { DialogFrameLabels } from './components/dialog-frame.js';
+import { MeasuredGridLabels } from './components/measured-grid.js';
+import { FeedbackAttachmentFieldLabels } from './feedback/feedback-attachment.js';
+import { FeedbackDialogTextLabels } from './feedback/feedback-dialog.js';
+import { FeedbackThreadLabels, FeedbackComposerLabels } from './feedback/feedback-thread.js';
+import { AccountSettingsLabels } from './components/account-settings-labels.js';
+import { ConfirmDialogLabels } from './components/confirm-dialog.js';
+import { FloatingPanelLabels } from './components/floating-panel.js';
+import { BulkActionBarLabels } from './components/bulk-action-bar.js';
+import { ListLabels } from './components/list.js';
+import { BreadcrumbsLabels } from './components/breadcrumbs.js';
+import { ToastLabels } from './components/toast.js';
+import { DescriptionListLabels } from './components/description-list.js';
+import { LineItemsLabels } from './components/line-items.js';
+import { ProgressBarLabels } from './components/progress-bar.js';
+import { SignedAmountLabels } from './components/signed-amount.js';
+import { ErrorBoundaryLabels } from './components/error-boundary.js';
+import { AuthedImageLabels } from './components/authed-image.js';
+import { ImageGridLabels } from './components/image-grid.js';
+import { LightboxLabels } from './components/lightbox.js';
+
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand" | "link";
+type ButtonSize = "sm" | "md";
+/**
+ * The text colour of a `link` or `ghost` button, over the variant's own.
+ *
+ * `muted` is the QUIET link keksdose hand-rolls in six places (tours-page:321's "Mark
+ * undone", transaction-fields:176/215's "Add line" / "Fill total",
+ * invoice-lines-table:376, invoice-review:464): secondary text that darkens to the
+ * body colour under the pointer, for an action that must be findable but not compete
+ * with the brand-coloured one beside it. `danger` is the same quiet look turning
+ * `--danger` on hover — transaction-editor:401's "Remove split", which is a text
+ * action that destroys something.
+ *
+ * A `tone` rather than a `link-muted` variant, because it is the axis IconButton
+ * already has (`tone="muted"`, `tone="danger"`, same quiet-until-hover meaning), and
+ * because the same two looks are wanted on `ghost`.
+ *
+ * `danger` also reaches the two NEUTRAL boxed variants, where the box carries it:
+ * `secondary` becomes an outlined destructive button (`--danger` text and a
+ * `--danger-border` outline, the quiet danger fill on hover) and `primary` a soft one
+ * (the quiet fill at rest, solid `--danger` on hover). kastlan's meeting-invitations-
+ * tab.tsx "Remove all" is `variant="secondary" className="text-destructive"` — a
+ * destructive action that must sit in a row of secondary buttons without shouting
+ * like the solid `variant="danger"` would, and whose red text alone left the border
+ * and hover saying "neutral". `muted` stays a text look and does nothing on a box, and
+ * `danger`, `brand` and `link`'s own colours are left alone: a tone that recoloured a
+ * solid danger or brand button would be a second variant under another name.
+ */
+type ButtonTone = "default" | "muted" | "danger";
+/** The second argument of {@link buttonClasses} in its options form. */
+interface ButtonClassesOptions {
+    /** See {@link ButtonProps.size}. */
+    size?: ButtonSize;
+    className?: string;
+}
+/**
+ * Button classes for the rare case where the styling must land on a non-`<button>`
+ * element that {@link Button} can't render — e.g. a router `<Link>` or a Radix
+ * AlertDialog Action/Cancel (which must stay the Radix element). Everywhere a real
+ * button works, prefer `<Button>`. Draws from the same base, size and variant maps as
+ * `<Button>`, so the two stay in lockstep.
+ *
+ * The second argument is either the extra classes (the pre-0.8.0 form) or
+ * `{ size, className }` — `buttonClasses("secondary", { size: "sm" })` for keksdose's
+ * compact toolbar links.
+ */
+declare function buttonClasses(variant?: ButtonVariant, classNameOrOptions?: string | ButtonClassesOptions): string;
+/**
+ * ⚠️ No default `type`: like a native `<button>`, a `Button` inside a `<form>` SUBMITS
+ * it unless you pass `type="button"`. Kept native on purpose — a form's own submit
+ * button relies on it, and changing the default would silently stop those forms from
+ * submitting. Pass `type="button"` for every other action in a form (keksdose had six
+ * link buttons submitting their form).
+ */
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    /** `md` (default) is the page's action button. `sm` is the compact one — 12px text
+     *  and `px-2 py-1` — for the secondary actions in a toolbar, a card header or a
+     *  table's header row (keksdose writes `px-2 py-1 text-xs` over `secondary` by hand
+     *  there). Every variant takes either size. */
+    size?: ButtonSize;
+    /** In a flex row next to a taller labelled field, fill the field's height so the
+     *  two line up. No effect outside a flex row. */
+    stretch?: boolean;
+    /** The `<button>` element. React 19 passes `ref` to a function component as an
+     *  ordinary prop, so it rides `...rest` onto the element with no `forwardRef` —
+     *  declared here only because `ButtonHTMLAttributes` does not carry it. */
+    ref?: Ref<HTMLButtonElement>;
+    /** Text colour for `link` and `ghost`: `muted` (quiet, body colour on hover) or
+     *  `danger` (quiet, `--danger` on hover). `danger` also makes `secondary` an
+     *  outlined destructive button and `primary` a soft one; ignored by the other
+     *  variants. See {@link ButtonTone}. */
+    tone?: ButtonTone;
+    /**
+     * Make it a toggle button, as {@link IconButton}'s `pressed` does. `true` sets
+     * `aria-pressed="true"` and draws the "on" look — on a `link`, the brand colour and a
+     * medium weight; on the boxed variants, the quiet brand fill IconButton uses — and
+     * `false` sets `aria-pressed="false"` with the ordinary look. Left out, no
+     * `aria-pressed` (or the caller's own). For lenkbank's "All speeds" text toggle
+     * (gear/hysteresis-charts.tsx:482), which is a hand-rolled `<button aria-pressed>`
+     * swapping two class strings; with `variant="link" tone="muted"` it is this.
+     */
+    pressed?: boolean;
+    /**
+     * Why the action is not available — the button's half of DangerConfirm's
+     * `lockedReason` (kastlan handover-detail-page.tsx:197 locks a signed handover).
+     *
+     * A disabled button that cannot say why is a dead end: the native `disabled` takes it
+     * out of the tab order, so a keyboard user never lands on it, and a pointer gets a
+     * `not-allowed` cursor and nothing else. With a reason the button is `aria-disabled`
+     * instead — still focusable, still hoverable — clicks (and the Enter/Space and form
+     * submission they stand for) do nothing, and the reason is shown in the kit
+     * {@link Tooltip} and attached with `aria-describedby`, so a screen reader hears it
+     * on focus. It wins over `disabled`: passing both keeps the button reachable, which is
+     * the point of giving a reason.
+     *
+     * The description is a `hidden` copy of the reason rather than the bubble itself: the
+     * bubble exists only while hovered or focused once it is portalled, and a description
+     * that comes and goes is read inconsistently. The bubble is kept visual, the way
+     * DangerConfirm keeps its own.
+     */
+    disabledReason?: ReactNode;
+    /**
+     * Busy — the save is in flight: a spinner, `aria-busy`, and no second submit.
+     *
+     * kastlan's FormActions (form-actions.tsx:50) disables its submit and swaps in a
+     * `submittingLabel`, so the button jumps width mid-click and a screen reader hears
+     * the name change instead of "busy". Here the label STAYS — it is still the
+     * accessible name and still holds the button's width — and the spinner is drawn over
+     * it in the text colour, so nothing beside the button moves.
+     *
+     * The same prop {@link FileButton} has (`pending`), with one difference: this one is
+     * `aria-disabled`, not `disabled`. The button being pressed is the one that has focus,
+     * and a native `disabled` drops that focus to `<body>` the moment the save starts;
+     * clicks, and the Enter that submits a form through it, are swallowed instead.
+     */
+    pending?: boolean;
+    /** Only on the link form — see {@link ButtonLinkProps}. */
+    href?: never;
+    renderLink?: never;
+    external?: never;
+}
+/**
+ * `<Button href>`: a link that looks like a button — for an action that NAVIGATES.
+ *
+ * kastlan paints `buttonClasses(…)` onto router Links by hand in six places (the
+ * invoice / lease / unit preview dialogs' "Open" at invoice-preview-dialog.tsx:36,
+ * platform-companies-page.tsx:111, verify-email-page.tsx:86's "Log in",
+ * billing-history-page.tsx:85's PDF download), and has 26 `<Button onClick={() =>
+ * navigate(…)}>` that are links in all but markup: no middle-click, no "open in new
+ * tab", no URL on hover, and a screen reader announces a button that then changes the
+ * page. With `href` it is an `<a>`: the provider's router link
+ * ({@link UiKitProvider}'s `linkComponent`), or `renderLink` if given, else a plain one.
+ *
+ * `type` and `form` are typed out: they are a `<button>`'s, and a link never submits.
+ */
+interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type" | "href"> {
+    href: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    stretch?: boolean;
+    tone?: ButtonTone;
+    /** The in-app router link, over the provider's `linkComponent` (see
+     *  {@link KitLinkComponent}). Ignored when `external`. */
+    renderLink?: KitLinkComponent;
+    /** Leaves the app: a plain `<a target="_blank" rel="noopener noreferrer">`, never the
+     *  router link, and "(opens in a new tab)" read after the label — billing-history's
+     *  Stripe PDF. A `target="_blank"` of your own is announced the same way. */
+    external?: boolean;
+    /** A link cannot be `disabled`, so this renders an `<a>` with NO `href` —
+     *  `role="link"` and `aria-disabled`, out of the tab order like a disabled button,
+     *  with the disabled look. The router link is not used: it needs somewhere to go. */
+    disabled?: boolean;
+    ref?: Ref<HTMLAnchorElement>;
+    type?: never;
+    form?: never;
+    pending?: never;
+    pressed?: never;
+    disabledReason?: never;
+}
+declare function Button(props: ButtonLinkProps): ReactElement;
+declare function Button(props: ButtonProps): ReactElement;
+type IconButtonSize = "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs";
+type IconButtonTone = "default" | "muted" | "danger" | "warning" | "info" | "success" | "custom";
+type IconButtonVariant = ButtonVariant | "overlay" | "shutter";
+/**
+ * The glyph's size in px, over the one the box size implies — see
+ * {@link IconButtonProps.glyphSize}.
+ */
+type IconButtonGlyphSize = 12 | 14 | 16 | 20 | 24 | 28;
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Any {@link ButtonVariant}; `overlay` — a round translucent disc for use over
+     *  an image (see `ICON_BUTTON_OVERLAY`); or `shutter` — a camera's release, a ringed
+     *  disc over the viewfinder (see `ICON_BUTTON_SHUTTER`; pair it with `size="2xl"`). */
+    variant?: IconButtonVariant;
+    /** Box size: 2xl = 64px with a 28px icon (a camera shutter), xl = 48px with a 24px
+     *  icon, lg = 44px (a phone's touch target), md = 36px (matches the top bar),
+     *  sm = 32px — all three with a 20px icon;
+     *  xs = 28px with a 16px icon (an action in a list row), 2xs = 24px with a 14px
+     *  icon (an action on a chip or a tab). `glyphSize` overrides the icon. */
+    size?: IconButtonSize;
+    /**
+     * The icon's size in px, when the box's own is not the one wanted. keksdose's sync
+     * chip (app/sync-status-indicator.tsx:142) is a 24px round chip round a 20px cloud —
+     * `size="2xs" glyphSize={20} shape="round"` — where `2xs` alone draws 14px. A number
+     * over a new size step because the box and the glyph are two independent choices; a
+     * step per combination (`"sm-lg"`) would have to be named for every one.
+     */
+    glyphSize?: IconButtonGlyphSize;
+    /**
+     * A small mark on the button's corner — the sync chip's 12px check over its cloud
+     * ("all good", feedback #67). Rendered OUTSIDE the `<button>`, in a wrapper beside
+     * it, so the box's `[&_svg]:size-*` rule that sizes the glyph does not blow the badge
+     * up to the glyph's size; a bare `<Check />` comes out 12px, on a
+     * `--bg-surface` disc that keeps it legible over the glyph. Decorative
+     * (`aria-hidden`): the name (`label` / `aria-label`) must already carry the state.
+     * With a badge, `className` still lands on the button; the wrapper is the flex item.
+     */
+    badge?: ReactNode;
+    /**
+     * `keep`: a disabled button keeps its full colour (no 50% drop) and an ordinary
+     * cursor. For a STATUS that is also an action — the sync chip shows "in sync" in
+     * green and refreshes on click, and is disabled while offline or syncing, when the
+     * state it shows matters most; dimmed it read as broken (keksdose wrote
+     * `disabled:cursor-default` by hand and left out the dimming). Default `dim`.
+     */
+    disabledStyle?: "dim" | "keep";
+    /**
+     * Fill the height of the flex row it stands in, keeping its width — the delete at
+     * the end of keksdose's split line (transaction-fields:162), level with the labelled
+     * fields beside it rather than floating at half their height. {@link Button}'s
+     * `stretch`; no effect outside a flex row. With a `label`, the tooltip's wrapper is
+     * what stretches.
+     */
+    stretch?: boolean;
+    /** `round`: a circle instead of the rounded square — a compact status chip in a top
+     *  bar (keksdose's sync indicator). `overlay` is always round. */
+    shape?: "square" | "round";
+    /**
+     * The colour of `tone="custom"`, as any CSS colour — a token (`var(--warning)`),
+     * ideally. Sets `--icon-button-tone` on the button, so passing a different one per
+     * state re-colours the glyph, its hover fill and its focus ring together. Passing it
+     * implies `tone="custom"`. Or leave it out and set the variable yourself from a class
+     * (`className="[--icon-button-tone:var(--success)]"`).
+     */
+    toneColor?: string;
+    /** Glyph colour over the variant. `muted`: placeholder grey, full text colour on
+     *  hover. `danger`: the same grey at rest, `--danger` on hover and focus — for a
+     *  remove/delete that repeats down a list. `warning`: amber at rest — a flag that
+     *  wants attention. `info`: sky at rest — a notice-worthy but harmless action
+     *  (keksdose's reconcile). `success`: green at rest — a good state worth seeing.
+     *  `custom`: the colour of `toneColor` (see there). Default: the variant's own colours. See `quiet` for
+     *  turning a coloured tone's resting look the other way. */
+    tone?: IconButtonTone;
+    /**
+     * Whether a coloured tone (`danger`, `warning`, `info`) waits for the pointer:
+     * `true` is placeholder grey at rest and the tone's colour on hover and focus;
+     * `false` wears the tone's colour at rest. Left out, each tone keeps its own
+     * default — `danger` quiet, `warning` and `info` not. Ignored for `muted` (quiet by
+     * definition) and `default` (no tone).
+     *
+     * `quiet={false}` on `danger` is for a destructive action that stands ALONE, where
+     * hover-to-reveal hides it: keksdose's phone bulk bar (mobile-bulk-bar.tsx) has one
+     * "delete all" and a touch screen that never hovers, so it painted rose by hand.
+     * `quiet` on `warning`/`info` is the same switch the other way, for a flag repeated
+     * down a list. A boolean over the tone rather than a new tone (`danger-solid`) or an
+     * `emphasis` scale: there are exactly two resting looks, every coloured tone has
+     * both, and which one fits is a question about the SITE (alone or repeated, touch or
+     * pointer), not about the tone — so it is one switch the family shares.
+     */
+    quiet?: boolean;
+    /**
+     * Make it a toggle button. `true` sets `aria-pressed="true"` and draws the "on" look
+     * (brand glyph on the quiet brand fill); `false` sets `aria-pressed="false"` with the
+     * normal look, so a screen reader still hears a toggle that is off. Left out, it is
+     * an ordinary button with no `aria-pressed` — or whatever `aria-pressed` the caller
+     * passes. For keksdose's budget share toggle (budgets-page:291), which paints its own
+     * brand colour over a ghost button today. Keep the `aria-label` the same in both
+     * states ("Share budget"): the pressed state already says whether it is on.
+     */
+    pressed?: boolean;
+    /** Keep the click (and the Enter/Space that produces it) from reaching an
+     *  ancestor's handler — for an action inside a clickable table row or card.
+     *
+     *  **Not a licence to put this inside another `<button>`.** HTML forbids any
+     *  interactive content, and any element with a `tabindex`, inside a button — so
+     *  the `<span role="button" tabIndex={0}>` workaround is invalid too — and ARIA
+     *  makes a button's children presentational, so a screen reader flattens the
+     *  inner one into the outer one's name and it cannot be reached at all. Make the
+     *  row's main action a button that fills the row and put this one BESIDE it, on
+     *  top:
+     *
+     *  ```tsx
+     *  <div className="relative">
+     *    <button className="w-full pe-16 …" onClick={open}>…row…</button>
+     *    <div className="absolute inset-y-0 end-2 flex items-center gap-0.5">
+     *      <IconButton size="xs" tone="danger" aria-label="Delete" onClick={remove}>
+     *        <Trash2 />
+     *      </IconButton>
+     *    </div>
+     *  </div>
+     *  ```
+     *
+     *  The pair look exactly like the nested version, click exactly like it, and
+     *  are two tab stops a screen reader can tell apart. */
+    stopPropagation?: boolean;
+    /**
+     * The button's name, said once: it becomes the `aria-label` AND the text of a kit
+     * {@link Tooltip} round the button.
+     *
+     * Every app writes the pair by hand. lenkbank's nine icon actions all carry
+     * `aria-label={t(x)} title={t(x)}` (shared/lib/table-columns.tsx:103,
+     * projects-page.tsx:83, setpoint/segment-list.tsx:198/207, profile-bar.tsx:128/142,
+     * shortcut-dialog.tsx:815/857/1007) — and `title` is the browser's own tooltip,
+     * which shows late, never on focus and never on touch, and looks like no other
+     * label in the kit. kastlan's RowAction (shared/components/data-table/row-action.tsx)
+     * and keksdose's icon wrappers each exist to put a Tooltip round an IconButton.
+     *
+     * A caller's own `aria-label` still wins, for the rare name that should be longer
+     * than the bubble. The bubble is visual only: it would otherwise describe the button
+     * with its own name, and a screen reader would read the same word twice. Tooltip's
+     * default placement applies — in place, or portalled inside a scroll container —
+     * unless `tooltipPortal` says otherwise.
+     */
+    label?: string;
+    /** Show `label` as a tooltip. Default `true`; `false` keeps `label` as the
+     *  accessible name only — for a button whose glyph is universally read (a close ✕ in
+     *  a dialog header) or that already sits under a tooltip of its own. */
+    tooltip?: boolean;
+    /** Where the `label` tooltip opens. See {@link Tooltip}'s `side`. */
+    tooltipSide?: TooltipSide;
+    /** Passed to the `label` tooltip's `portal`. Left out, Tooltip decides (see there). */
+    tooltipPortal?: boolean;
+    /**
+     * Why the action is not available — {@link Button}'s `disabledReason`, on the icon
+     * button: keksdose's accounts page cannot hide an account with a balance or delete
+     * one with bookings (accounts-page:879/913 — "hide requires zero", "delete blocked"),
+     * nor its budgets page delete the only budget (budgets-page:330), and each wrapped a
+     * natively disabled IconButton in a Tooltip that swaps its label for the reason — a
+     * bubble a keyboard never opens, since `disabled` leaves the tab order, and a reason
+     * a screen reader never hears.
+     *
+     * The same contract as Button's: `aria-disabled` instead of `disabled`, so it stays
+     * focusable and hoverable; clicks (and the Enter/Space they stand for) are swallowed
+     * — `stopPropagation` still applies, so a locked action in a clickable row does not
+     * open the row either; the reason shows in the kit {@link Tooltip} and is attached
+     * through `aria-describedby` as a `hidden` copy. The NAME stays `aria-label` /
+     * `label` — "Delete", described by "The active budget cannot be deleted" — and the
+     * bubble shows the reason in place of the label, since the glyph already says what
+     * the button is and the reason is the news. Shown even with `tooltip={false}`: a
+     * reason nobody can see is not one. Wins over `disabled`, as on Button.
+     */
+    disabledReason?: ReactNode;
+}
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const FIELD_BASE: string;
+/** Cancels FIELD_BASE's read-only treatment for a field that is `readOnly` for a
+ *  reason other than "you may not edit this". Attribute-scoped for the same reason
+ *  FIELD_BASE is — the two have to cancel on the identical selector or twMerge
+ *  cannot make the later one win. */
+declare const FIELD_WRITABLE_LOOK = "[&[readonly]]:bg-[var(--bg-surface)] [&[readonly]]:text-[var(--text-primary)]";
+declare const FIELD_FLOATING_PAD = "pt-4 pb-1";
+declare const FIELD_INVALID = "border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] focus:border-[var(--danger)] focus:ring-[var(--danger)]";
+declare const FLOATING_INPUT_CLASS: string;
+/** The phone breakpoint the display treatment below keys off — the same one the
+ *  numpad sheet uses, kept in one place so the two can't drift apart. */
+declare const PHONE_QUERY = "(max-width: 767px)";
+/**
+ * The PHONE display treatment (Keksdose feedback #176, carried across the entry
+ * forms by #179): the field chrome removed so the ONE input a form is actually
+ * about reads as the thing itself, not as another boxed row in a stack.
+ *
+ * Every control that takes `variant="display"` — {@link Input}, `NumberInput`,
+ * `AmountInput` — means exactly the same thing by it: the treatment applies below
+ * {@link PHONE_QUERY} and the field is untouched above it, so a caller never has
+ * to ask the viewport, and a form can't end up half-treated across breakpoints.
+ *
+ * What stays, deliberately:
+ *  - A hairline baseline. With the box gone something still has to say "you can
+ *    type here"; it takes the brand colour on focus, where a bordered field would
+ *    light its whole outline. Each edge is set exactly once (`border-x-0
+ *    border-t-0 border-b`) so the rule can't hinge on utility order.
+ *  - The muted placeholder colour, because a display field is usually empty at
+ *    the moment it matters most and has nothing else to show.
+ *  - The label, moved to `sr-only` rather than dropped: display type is legible
+ *    to the eye, not to a screen reader.
+ *
+ * Size and weight are NOT here — an amount wants display type, a subject line
+ * wants a heading — so each control adds its own on top.
+ */
+declare const FIELD_DISPLAY = "block w-full border-x-0 border-t-0 border-b border-[var(--border)] bg-transparent px-0 pt-0 pb-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:border-[var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60";
+declare const FIELD_TRIGGER: string;
+/** An alias rather than an interface: the chevron adds nothing of its own to an
+ *  `<svg>`'s props, and an interface declaring no members is the same type wearing a
+ *  name that suggests otherwise. */
+type FieldChevronProps = Omit<ComponentPropsWithoutRef<"svg">, "children">;
+/** The dropdown chevron, shared by the native {@link Select} and every custom
+ * {@link FIELD_TRIGGER} control.
+ *
+ * Absolutely positioned and centred on the FIELD box. As an ordinary flex child
+ * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)
+ * pushes that box's midline down — so a labelled currency/multi-select chevron
+ * sat visibly lower than the native select's right beside it (feedback #400).
+ * Pair it with `pe-9` on the trigger so the value can't run underneath. At the
+ * inline END, not the right: a right-to-left form reads the value from the right,
+ * and a chevron parked on top of its first word hid exactly the part that says
+ * what was picked. */
+declare function FieldChevron({ className, ...rest }: FieldChevronProps): react.JSX.Element;
+declare const FLOATING_LABEL_CLASS: string;
+declare const FLOATING_LABEL_STATIC: string;
+/**
+ * The one place that assembles a labelled field: a `relative` wrapper around the
+ * control (`children`) plus a floating label inside the top strip. Pass `staticLabel`
+ * for controls that always have a value (selects); omit it for free-text fields whose
+ * label animates from centred→up. Used by Input/Select/Textarea/NumberInput; the
+ * dropdown controls that need a ref + menu keep their own wrapper but the same label
+ * (via {@link FieldLabel}) and trigger ({@link FIELD_TRIGGER}) styles.
+ */
+interface FloatingFieldProps extends ComponentPropsWithoutRef<"div"> {
+    htmlFor?: string;
+    label?: ReactNode;
+    staticLabel?: boolean;
+    /** Keep the label in the accessibility tree but out of the layout — what
+     *  {@link FIELD_DISPLAY} needs, since a floating label inside a field with no
+     *  field left would have nothing to float in. */
+    srOnlyLabel?: boolean;
+    /** Something interactive that belongs to the LABEL rather than to the value —
+     *  in practice a {@link FieldHint} "?" (dev#468). It is rendered in a flex row
+     *  with the label, so it is centred on the label's line by the layout instead
+     *  of by a hand-tuned `top-…`, and it can never drift when the type changes.
+     *
+     *  It rides an ANIMATED label too, and the two cases place it differently on
+     *  purpose. A static label has a field-wide strip to itself, so the hint sits
+     *  at the far end of it and a long label truncates into the gap. An animated
+     *  one belongs to a control with something at the end edge of the field — a
+     *  calculator, a stepper — so the hint follows the label instead, and it is
+     *  the label that gives way (steering-design feedback #48). */
+    hint?: ReactNode;
+    children: ReactNode;
+}
+declare function FloatingField({ className, htmlFor, label, staticLabel, srOnlyLabel, hint, children, ...rest }: FloatingFieldProps): react.JSX.Element;
+/**
+ * The "?" that explains a field, on the field's own label line (dev#468).
+ *
+ * Pass it to a labelled {@link Select} / {@link Input} as `hint`. It exists as a
+ * component rather than as a snippet each form repeats because the previous
+ * version was exactly that snippet — an absolutely-positioned button whose
+ * `top-1.5` was one guess at where an 11px label sits — and the reporter's
+ * follow-up was *"question mark is not centered. Is it part of the hoc?
+ * positioning problems seem quite frequently."* It was not part of the HOC. Now
+ * it is, and there is one place left where the answer can be wrong.
+ *
+ * A `<button>` rather than a bare icon: hover alone puts the explanation out of
+ * reach of a keyboard and of every touch device, and the tooltip shows on focus
+ * too. The text is also its accessible name, so a screen reader gets it without
+ * the bubble ever opening.
+ */
+interface FieldHintProps extends Omit<ComponentPropsWithoutRef<"button">, "children"> {
+    /** The explanation. It is both the tooltip's text and, by default, the button's
+     *  accessible name, so a screen reader gets it without the bubble ever opening. */
+    label: string;
+    /** Default `"start"`: before the hint in the reading direction (the left in LTR, the
+     *  right in RTL). `left` / `right` stay physical. */
+    side?: TooltipSide;
+}
+declare function FieldHint({ label, side, className, "aria-label": ariaLabel, ...rest }: FieldHintProps): react.JSX.Element;
+/**
+ * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a
+ * button not a labelable input). Same placement as {@link FloatingField}'s static label,
+ * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.
+ */
+interface FieldLabelProps extends ComponentPropsWithoutRef<"span"> {
+    children: ReactNode;
+}
+declare function FieldLabel({ children, className, ...rest }: FieldLabelProps): react.JSX.Element;
+interface LabelProps extends ComponentPropsWithoutRef<"label"> {
+    /** Draw the required mark after the text. The mark is `aria-hidden`: what a
+     *  screen reader hears is the control's own `required` / `aria-required`, which
+     *  the caller still sets — a "star" read out as the last word of every name is
+     *  noise, and a control that is not marked required is not required however its
+     *  label looks. */
+    required?: boolean;
+    /** `sm` for a toolbar or a dense filter row (12px), `md` otherwise (14px). */
+    size?: "sm" | "md";
+    /** Dim the label with its control. A label ABOVE its field is not the field's
+     *  `peer`, so `peer-disabled:` cannot reach it the way it reaches a floating one. */
+    disabled?: boolean;
+}
+/**
+ * The label ABOVE a field, for the places a floating label does not fit: a control
+ * the kit did not render (a third-party picker, a range slider, a group of radios),
+ * a filter bar whose fields are unlabelled {@link Select}s, a form that sets labels
+ * above its fields throughout.
+ *
+ * A new component rather than a mode of {@link FieldLabel}, because the two share
+ * nothing but the word. `FieldLabel` is an absolutely positioned `<span>` inside a
+ * trigger's `relative` box and has to stay exactly that for every dropdown that
+ * already lines up with it; this is a real `<label>` in normal flow, with `htmlFor`,
+ * that a click focuses the control through. Spacing below it belongs to the caller's
+ * layout (`space-y-1.5` on the pair, typically), as it would for any block.
+ */
+declare function Label({ required, size, disabled, className, children, ...rest }: LabelProps): react.JSX.Element;
+/** The two names the password reveal toggle can wear. See {@link Input}. */
+interface PasswordRevealLabels {
+    /** While the value is hidden — activating the toggle will show it. */
+    show: string;
+    /** While the value is shown. */
+    hide: string;
+}
+declare const DEFAULT_PASSWORD_REVEAL_LABELS: PasswordRevealLabels;
+/** Caller's labels over the English defaults — the same shape as
+ *  `resolveDataTableLabels`, so a consumer translates every kit string one way. */
+declare function resolvePasswordRevealLabels(partial?: Partial<PasswordRevealLabels>): PasswordRevealLabels;
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: ReactNode;
+    /** Classes for the `<input>` itself, as distinct from `className`, which
+     *  styles the field WRAPPER once a `label` turns this into a FloatingField.
+     *  Without it a labelled Input had no way to reach its own element — so
+     *  `tabular-nums` on a numeric text field, which NumberInput has supported
+     *  all along through the identically named prop, was simply unavailable. */
+    inputClassName?: string;
+    /** {@link FIELD_DISPLAY} — on a phone, drop the chrome and set the value as a
+     *  heading. For the one field a form is about (a feedback subject, an account
+     *  name), never for a stack of them. Labelled fields only: the label is what
+     *  the placeholder falls back to once it goes `sr-only`. */
+    variant?: "field" | "display";
+    /** The field is required and unanswered, or holds something that cannot be
+     *  saved — {@link FIELD_INVALID}, the same rose border/ring `Select` has worn
+     *  since feedback #235.
+     *
+     *  It exists here because writing `aria-invalid` by hand did NOT do this. The
+     *  attribute spreads onto the element and nothing styles it — there is no
+     *  `[aria-invalid]` rule in this package or in either consumer's stylesheet —
+     *  so three Keksdose dialogs flagged a mismatched passphrase to a screen reader
+     *  and painted the field exactly as if it were fine. Setting the prop sets the
+     *  attribute too, so the two can no longer be spelled separately. */
+    invalid?: boolean;
+    /** What is wrong with the value, in the caller's own words ("That IBAN has 21
+     *  digits"). Rendered under the field, pointed at by the control's
+     *  `aria-describedby` — MERGED with any the caller already passed — and implies
+     *  `invalid`, so the field paints as well as announces. `invalid` alone still
+     *  covers the case where the message lives elsewhere. See {@link useFieldError}. */
+    error?: ReactNode;
+    /** Names for the password reveal toggle, English by default — it is the one
+     *  string this component renders on its own behalf, and a German form was
+     *  reading it out in English. See {@link PasswordRevealLabels}. */
+    passwordLabels?: Partial<PasswordRevealLabels>;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    label?: ReactNode;
+    /** See {@link Input}'s `invalid`. */
+    invalid?: boolean;
+    /** See {@link Input}'s `error`. */
+    error?: ReactNode;
+    /** A {@link FieldHint} for the label line — see {@link FloatingField}. */
+    hint?: ReactNode;
+    /**
+     * `"sm"`: a 28px, 12px-type select for a toolbar or a table header, where the
+     * 36px field stands a head taller than the buttons beside it. `"md"` (default)
+     * is the field every form uses. Unlabelled selects only — a floating label needs
+     * the tall box to float in, so a labelled Select ignores `"sm"`.
+     *
+     * A NUMBER is still the native attribute (the rows of a list box) and is passed
+     * straight through, so the one HTML meaning of `size` keeps working. Above 1 (as
+     * with `multiple`) the browser draws a list box, and the Select drops its chevron
+     * and the end padding reserved for it.
+     */
+    size?: "sm" | "md" | number;
+    /** Classes for the `<select>` itself. `className` styles the WRAPPER — the box
+     *  the chevron is positioned against — so it could set a width and nothing
+     *  else; this is the way to the element. See {@link Input}'s `inputClassName`. */
+    selectClassName?: string;
+}
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: ReactNode;
+    /** See {@link Input}'s `invalid`. */
+    invalid?: boolean;
+    /** See {@link Input}'s `error`. */
+    error?: ReactNode;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+interface CardProps extends ComponentPropsWithoutRef<"div"> {
+    children: ReactNode;
+    /**
+     * When true, drop the card chrome (border, rounded corners, shadow) on mobile so the
+     * card spans edge-to-edge. Chrome reappears at the `md` breakpoint. Use for primary
+     * content cards on data pages; leave off for centered dialog/panel cards.
+     */
+    flush?: boolean;
+    /**
+     * `inset`: a panel INSIDE a card rather than a card on the page — the raised
+     * `--bg-surface-2`, a small radius, `p-3` of its own and no border or shadow, since
+     * it is already sitting on the card that has them. Lenkbank's results blocks and
+     * corner panels write this by hand (`rounded-md bg-surface-2 p-3`) under a Card of
+     * their own. Unlike the default card it carries its padding, because every one of
+     * those copies wanted the same one; a caller's `p-*` still wins. `flush` is ignored:
+     * an inset panel never runs edge to edge.
+     */
+    variant?: "default" | "inset" | "outline";
+    /**
+     * The card's own padding: `none`, `sm` (`p-3`) or `md` (`p-4`).
+     *
+     * `outline` is the bordered box with no shadow — a row or a block INSIDE a section
+     * rather than a card on the page: kastlan's rent breakdown rows
+     * (tenancy/components/breakdown-row.tsx, `rounded-lg border p-4`) and the meters
+     * list's inline add row (meters/components/meter-add-row.tsx). It takes `md` by
+     * default, as every one of those copies does; `sm` is the dense row.
+     *
+     * Left out, the default card keeps no padding (its CardHeader / CardContent own the
+     * rhythm) and `inset` keeps its `p-3`; passing it sets theirs too. A caller's `p-*`
+     * in `className` still wins.
+     */
+    padding?: "none" | "sm" | "md";
+    /**
+     * A card that is a WARNING (or other status) as a whole: the border in the tone's
+     * `-border` colour and the {@link CardTitle} in the tone's text colour. kastlan's
+     * dunning summary (invoice-detail-page.tsx:231-235) writes both by hand —
+     * `border-[var(--warning-border)]` on the Card, `text-[var(--warning)]` on the title
+     * — and the next status card would copy the pair (`outline` takes it the same way).
+     * An `inset` panel has no border, so it takes the tone's quiet `-bg` fill instead.
+     * `data-tone` is set for a caller's own
+     * selectors.
+     */
+    tone?: CardTone;
+}
+type CardTone = "warning" | "danger" | "info" | "success";
+declare function Card({ className, children, flush, variant, tone, padding, ...rest }: CardProps): react.JSX.Element;
+/** The sub-parts add nothing to a `<div>`'s props — they are the SAME element with a
+ *  `data-slot` and a padding rhythm — so each name is an alias rather than an empty
+ *  interface pretending to be more. They exist so a consumer's own wrapper can say
+ *  `CardHeaderProps` instead of `ComponentProps<typeof CardHeader>`. */
+type CardHeaderProps = ComponentPropsWithoutRef<"div">;
+type CardTitleProps = ComponentPropsWithoutRef<"div">;
+type CardDescriptionProps = ComponentPropsWithoutRef<"div">;
+type CardActionProps = ComponentPropsWithoutRef<"div">;
+type CardContentProps = ComponentPropsWithoutRef<"div">;
+type CardFooterProps = ComponentPropsWithoutRef<"div">;
+declare function CardHeader({ className, ...props }: CardHeaderProps): react.JSX.Element;
+declare function CardTitle({ className, ...props }: CardTitleProps): react.JSX.Element;
+declare function CardDescription({ className, ...props }: CardDescriptionProps): react.JSX.Element;
+declare function CardAction({ className, ...props }: CardActionProps): react.JSX.Element;
+declare function CardContent({ className, ...props }: CardContentProps): react.JSX.Element;
+declare function CardFooter({ className, ...props }: CardFooterProps): react.JSX.Element;
+/** A `<span>`'s props plus the words a reader hears — see {@link CardHeaderProps}.
+ *  The ring is drawn with a border, so there is nothing inside it to put children in. */
+interface SpinnerProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
+    /**
+     * What the spinner means, for a screen reader. Default: `common.loading` from the
+     * {@link UiKitProvider}, else "Loading…".
+     *
+     * `null` makes it DECORATIVE — no role, no text, hidden from assistive tech. Use it
+     * whenever words are already there: beside visible "Loading…" text (otherwise it is
+     * announced twice), inside a labelled button (otherwise its text joins the button's
+     * name), or inside a live region of the app's own (otherwise that region and this
+     * one both announce).
+     */
+    label?: string | null;
+    /**
+     * Show the label as TEXT beside the ring, not only to a screen reader. kastlan's
+     * LoadingState (feedback/loading-state.tsx:14) builds exactly this by hand — a
+     * `role="status"` wrapper, the spinner at `label={null}`, a `<p>` of text — so it
+     * has to get the three-part aria arrangement right itself. Here the visible text IS
+     * the live region's content (the label stays the accessible name, said once), and
+     * the ring is decorative. `className` still sizes the ring; the other props go on
+     * the wrapper. Ignored with `label={null}`: there are no words to show.
+     */
+    showLabel?: boolean;
+    /** Where the shown label sits: `end` (default) — beside the ring, for a row or a
+     *  button; `below` — under it, centred, for a panel's loading state. */
+    labelPosition?: "end" | "below";
+}
+/**
+ * A spinning ring that also SAYS it is loading.
+ *
+ * It used to be a bordered span and nothing else, so a reader met no element at all
+ * where a sighted user saw the page working — or, beside an emptied list, met the
+ * empty list and concluded there was nothing there. `role="status"` makes it a polite
+ * live region, and the text inside is what that region announces. Text rather than
+ * `aria-label`: a live region's announcement is its CONTENT, and several readers
+ * ignore a name on one.
+ *
+ * `relative` so the `sr-only` text has a local containing block (see
+ * sr-only-containment.test). Where the words are already on screen, pass
+ * `label={null}`: announcing is right for a spinner standing alone and wrong for one
+ * beside text, inside a button, or inside the app's own live region.
+ */
+declare function Spinner({ className, label, showLabel, labelPosition, ...rest }: SpinnerProps): react.JSX.Element;
+interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "title"> {
+    /** The box renders `title` and `hint` in its own two-line rhythm, which is what makes
+     *  every empty state in three apps look like the same thing — so there is no
+     *  `children` slot to put arbitrary content in. The two slots below are the only
+     *  other things an empty state has turned out to need, and each has a fixed place. */
+    /** Nodes rather than strings, so a title can carry a code, a link or an emphasised
+     *  word — keksdose's error boundary shows the error's name in `<code>` — while the
+     *  box still sets the type. */
+    title: ReactNode;
+    hint?: ReactNode;
+    /**
+     * Render the title as a heading of this level. Left out it is a `<div>`, as before:
+     * most empty states are a message inside a section that already has its heading.
+     * keksdose's error boundary IS the page when it trips, and its `<h2>` went missing
+     * when it moved onto EmptyState — so the page's heading outline lost the one line
+     * that says what happened. Only the element changes; the look is the box's.
+     */
+    headingAs?: "h2" | "h3" | "h4" | "h5" | "h6";
+    /** A glyph ABOVE the title — kastlan's InboxEmptyState (an inbox), keksdose's
+     *  offline card (a cloud with a slash). Sized by the box (`[&_svg]:size-8`) and
+     *  muted, so five call sites cannot pick five sizes; hidden from assistive tech,
+     *  because the title already says what it shows. */
+    icon?: ReactNode;
+    /** What to do about it, BELOW the hint: keksdose's query-state cards (Retry), its
+     *  error boundary (Retry / Reload / Go home — pass all three in a fragment, they
+     *  wrap and centre as one row), kastlan's "Create a rule". Buttons or links the
+     *  caller renders; the box only places them. */
+    action?: ReactNode;
+    /**
+     * `box` (default): the dashed, padded card that stands in for a whole section.
+     * `inline`: one quiet line with no box — for the empty state INSIDE something that
+     * already has its own frame, where a dashed card would be a box in a box. keksdose
+     * writes that line by hand five times as a muted `<p className="py-6 text-center">`:
+     * the notification inbox (notification-inbox:140), a support thread
+     * (support-thread:144), the assistant (assistant-page:321), the admin support panel
+     * (support-panel:265) and the funding dialog (funding-dialog:89). The icon shrinks
+     * to the text's size and sits before the title, the hint follows on the same line,
+     * and the row wraps only when it must. Centred like the box; `className="justify-start"`
+     * for a list that reads from the start edge (funding-dialog).
+     */
+    variant?: "box" | "inline";
+    /**
+     * Colour the icon and the title: `danger` for an error standing where the content
+     * should be — kastlan's ErrorState (shared/components/feedback/error-state.tsx) and
+     * its error boundary's fallback (error-boundary.tsx:16), both a red triangle over a
+     * message — and `success` for an empty state that is GOOD news, kastlan's "No defects
+     * recorded for this room" (handover defects-step.tsx:142, a green check). Left out,
+     * both stay muted. The hint stays muted either way: it is the explanation, not the
+     * verdict.
+     */
+    tone?: "danger" | "success";
+    /**
+     * `inline` only (0.11.0). `sm`: 12px, start-aligned and tight (`py-1`) — the empty
+     * line INSIDE a detail panel, under a panel heading and among `text-xs` rows, where
+     * the default's 14px centred line with `py-4` read as a section of its own.
+     * keksdose's holdings panel (holdings-panel:563), asset-loan panel
+     * (asset-loan-panel:108) and loan-payment panel (loan-payment-panel:191) each wrote
+     * `className="justify-start py-1"` over it and still got body-size text. Default `md`,
+     * the look it had. Ignored by the box.
+     */
+    size?: "sm" | "md";
+}
+declare function EmptyState({ title, hint, icon, action, headingAs, variant, tone, size, className, ...rest }: EmptyStateProps): react.JSX.Element;
+/** One tab of a {@link Tabs} strip. */
+interface TabItem<T extends string> {
+    id: T;
+    /** A ReactNode so a tab can pair an icon with text. */
+    label: ReactNode;
+    /** Optional trailing node (e.g. a count pill). */
+    badge?: ReactNode;
+    /** Marks a tab that IS a route — see {@link TabsProps}. */
+    href?: string;
+    /** Leading decoration: an icon, or the colour swatches of the lines this tab
+     *  draws in a chart above the strip. Hidden from assistive tech — it repeats
+     *  what the label says, or it says something the label must say instead. */
+    icon?: ReactNode;
+    /** A second, smaller line under the label — the one fact that tells two tabs
+     *  with similar labels apart ("80 km/h", "Level 3"). Part of the tab's name. */
+    detail?: ReactNode;
+    /** A tab that exists as a slot with nothing in it yet, drawn with a dashed
+     *  outline so a gap in a sequence looks like a gap. Visual only: say "empty" in
+     *  the label or `detail` if a screen reader needs to know. */
+    empty?: boolean;
+    /** `false` keeps this one tab when the strip has `onRemove` — the one sheet a
+     *  workbook cannot be without. Default: removable. */
+    removable?: boolean;
+    /** Plain-text name for the labels the strip composes about this tab ("Remove
+     *  …"), for when `label` is not a string. Default: `label` if it is a string,
+     *  else the id. */
+    name?: string;
+}
+/** The strings the strip renders on its own behalf — only when it can add or
+ *  remove tabs. */
+interface TabsLabels {
+    /** The "add" button's visible text when the caller gives no `addLabel`. */
+    add: string;
+    /** Accessible name of a tab's × — "Remove <tab>". */
+    remove: (tab: string) => string;
+}
+declare const DEFAULT_TABS_LABELS: TabsLabels;
+/**
+ * The strip's own props sit on a `<div>`: the tablist IS the root element, so anything
+ * a caller hangs on it — a `data-tour` anchor for the kit's guided tour, a test id, an
+ * `aria-describedby` — lands there. `onChange` is omitted from the div's props because
+ * this component's `onChange` hands over the chosen TAB ID, not a DOM event, and
+ * `children` because the strip renders `tabs` — a caller who wants a PANEL wires it up
+ * through `panelId`, which is the whole point of that prop.
+ */
+interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children"> {
+    /** `label` is a ReactNode so tabs can pair an icon with text; `badge` is an
+     *  optional trailing node (e.g. a count pill). `href` marks a tab that IS a route:
+     *  it renders as an anchor so it can be middle-/⌘-clicked into a new tab (Keksdose
+     *  feedback #451), while a plain click still goes through `onChange` and stays
+     *  client-side. Tabs that only flip local state leave it unset — a link to a URL
+     *  that does not select the tab would be worse than no link. */
+    tabs: TabItem<T>[];
+    active: T;
+    onChange: (id: T) => void;
+    className?: string;
+    /** Let the strip WRAP onto as many rows as it needs below `md`, instead of
+     *  scrolling sideways — for a strip carrying more tabs than fit on a phone row.
+     *  Keksdose live #262: ten reports on a 406px screen showed about three, and the
+     *  round-2 answer (a <select> below `md`) cost a tap to open and a tap to choose.
+     *  *"I would rather keep the tabs but have multirow tabs depending on the screen
+     *  size, I will not loose the function to see all reports at once and navigate by
+     *  single click rather by double click."*
+     *
+     *  The active MARKER has to change with the layout, which is why this cannot be
+     *  done from a call site with a `className`: the default marker is a `border-b-2`
+     *  underline riding the container's own bottom rule, and a tab sitting in a row
+     *  that does not touch that rule cannot wear it — every row but the last would
+     *  show a stray line floating mid-strip, and `-mb-px` would pull each chip a
+     *  pixel into the row beneath it. A wrapped strip marks the active tab with a
+     *  filled brand chip instead, which is also the only thing findable at a glance
+     *  among ten same-weight labels on three rows.
+     *
+     *  From `md` up NOTHING changes: same single-line underline strip, same paddings,
+     *  same colours as every other strip in the app.
+     *
+     *  Opt-in on purpose. The three-tab strips (invoices, statements, bank imports)
+     *  already fit a phone row, and turning those into chips would be an unrequested
+     *  redesign of three other pages. */
+    wrap?: boolean;
+    /**
+     * Accessible name for the `role="tablist"` container. Every tab carries its own
+     * text, so this names the GROUP, not the tabs; leave it unset where a visible
+     * heading immediately above already does that job.
+     *
+     * @deprecated Pass `aria-label` instead. This kit had three spellings for one idea
+     * — `ariaLabel`, `aria-label` and this `label` — and settled on the DOM one, which
+     * is also the one that arrives for free now that the strip spreads its rest props.
+     * `label` still works and is unchanged; it names the strip only when `aria-label`
+     * is absent.
+     */
+    label?: string;
+    /**
+     * `id` of the element the caller renders the open tab's content into — the missing
+     * half of `role="tab"`. A tab that controls nothing is a tab in name only: a screen
+     * reader announces "tab, 2 of 5" and then has no way to take the user to what it
+     * opened, and no way back.
+     *
+     * **This component does not render the panel, on purpose.** `Tabs` is the STRIP; the
+     * content lives wherever the caller put it — three Keksdose pages render it in a
+     * sibling `<Card>`, one renders it through a router outlet, and a tab can BE a route
+     * (`href`), in which case the panel is a whole page this component never sees.
+     * Wrapping `children` here would mean either moving that content into the strip's
+     * subtree — a layout change on every page that uses tabs — or shipping a wrapper
+     * that only some callers could use. So the two halves are joined by an id instead.
+     *
+     * Wire the other end yourself:
+     *
+     * ```tsx
+     * <Tabs tabs={tabs} active={active} onChange={setActive} panelId="report-panel" />
+     * <div id="report-panel" role="tabpanel" aria-labelledby="report-panel-tab" tabIndex={-1}>
+     * ```
+     *
+     * `aria-controls` goes on the OPEN tab only, and `${panelId}-tab` is its id — the
+     * closed tabs' panels are not in the document, and a dangling `aria-controls`
+     * describes a tab as opening something that is not there.
+     */
+    panelId?: string;
+    /**
+     * Makes the tabs removable: an × on the OPEN tab, and Delete on a focused tab
+     * (only on the open one with `removeOn="active"`).
+     *
+     * The × is on the open tab only — a row of tabs each carrying one is a row of
+     * things to hit by accident, and the tab you can remove should be the one you
+     * are looking at — but its room is reserved on every removable tab, so opening a
+     * tab never widens it and never pushes the rest of the strip along (lenkbank
+     * feedback #72). It is named "Remove <tab>" and is not a tab stop of its own: the
+     * strip stays one stop, and the keyboard path is Delete (announced through
+     * `aria-keyshortcuts`), which removes whichever tab has focus (see `removeOn`).
+     *
+     * The strip only ASKS: it calls this, and the tab goes when the caller drops it
+     * from `tabs` — after a confirmation, a request, whatever it needs. When it does,
+     * focus that was on the removed tab (or its ×) moves to the open tab if the
+     * removed one was open, else to its neighbour, instead of falling to the page.
+     */
+    onRemove?: (id: T) => void;
+    /**
+     * Which tabs the Delete key removes.
+     *
+     * - `"every"` (default): any focused removable tab — the ARIA pattern's reading.
+     * - `"active"`: only the OPEN tab, the same one that wears the ×. For a strip whose
+     *   remove is immediate and unconfirmed (lenkbank's sheet tabs delete a measurement
+     *   sheet at once), so arrowing across the strip and pressing Delete cannot take
+     *   out a sheet the user is not looking at. Delete on a closed tab does nothing,
+     *   and only the open tab announces the shortcut (`aria-keyshortcuts`).
+     *
+     * Either way the × is drawn on the open tab only and its room stays reserved on
+     * every removable tab, so the strip never relayouts when the selection moves.
+     */
+    removeOn?: "every" | "active";
+    /** Renders an "add" button after the last tab, outside the tablist — it is an
+     *  action, not a tab, and a tablist may own only tabs. */
+    onAdd?: () => void;
+    /** The add button's text. Say what is added — "Add loop", "Add report" says
+     *  more than "Add". Default: `tabs.add` from the {@link UiKitProvider}. */
+    addLabel?: string;
+    /** Overrides for this strip's strings. See {@link TabsLabels}. */
+    labels?: Partial<TabsLabels>;
+    /** An add or a remove is in flight: the × and the add button are disabled and
+     *  Delete is ignored, so a double click cannot remove two tabs. Nothing moves. */
+    busy?: boolean;
+    /**
+     * `"vertical"`: the same strip as a SIDE NAV — one item per row, the open one
+     * filled, ↑/↓ walking it (Home/End as before) and `aria-orientation="vertical"` on
+     * the tablist. For keksdose's admin page and settings page, which each hand-built
+     * the identical sidebar with none of this strip's keyboard, roving tab stop or
+     * routed-`href` handling. Everything else — `href` tabs, `badge`, `panelId`,
+     * `onRemove`, `onAdd` — means exactly what it means on the horizontal strip; the
+     * badge moves to the row's end.
+     *
+     * **On a phone ({@link PHONE_QUERY}) it becomes the horizontal strip**, `wrap` and
+     * all, rather than staying a column. A side nav only works beside its content; on
+     * a phone it has to go ABOVE it, and eight full-width rows there push the panel
+     * the user picked below the fold on every visit — the two keksdose pages both
+     * collapsed theirs into a scrolling row by hand for exactly that reason. The
+     * orientation is switched in JavaScript, not with `md:` classes, so the
+     * `aria-orientation` a screen reader hears and the arrow keys that work always
+     * match the layout on screen. The caller's own two-column layout has to stack at
+     * the same breakpoint (`md:grid-cols-[14rem_1fr]`).
+     */
+    orientation?: "horizontal" | "vertical";
+}
+declare function Tabs<T extends string>({ tabs, active, onChange, className, wrap, label, panelId, onRemove, removeOn, onAdd, addLabel, labels, busy, orientation, "aria-label": ariaLabel, ...rest }: TabsProps<T>): react.JSX.Element;
+
+/**
+ * A button that opens the file picker — the shape all three apps kept writing by hand
+ * as a `<Button>` plus a hidden `<input type="file">` plus a ref between them (seven
+ * copies in keksdose, two each in kastlan and lenkbank).
+ *
+ * Every copy had to remember the same four things, and each one forgot at least one:
+ *
+ *  1. **Reset the input after every pick.** A file input fires `change` only when its
+ *     value CHANGES, so picking the same file twice in a row — the retry after a failed
+ *     upload, the second photo of the same receipt — did nothing at all, which reads as
+ *     a broken button. `value = ""` after each pick; always, not per call site.
+ *  2. **`type="button"`.** `<Button>` does not set it, and inside a form a bare button
+ *     submits the form before the picker opens.
+ *  3. **Check the file.** `accept` filters the DIALOG, not the result: the dialog's
+ *     "All files" switch, a drop, and a mobile share sheet all hand over whatever the
+ *     user chose. So `accept` is re-checked here, along with `maxSize`, `maxFiles` and
+ *     an optional `isValid`.
+ *  4. **Say no without a toast.** A rejection is reported through `onReject`, with a
+ *     translated message per file, and spoken through a live region — the kit does not
+ *     decide how an app surfaces errors (keksdose's proposal §1 asked for exactly that).
+ *
+ * The part that is not a button — the hidden input, the check, the announcement — is
+ * {@link useFilePicker}, for the case where the thing that opens the picker is someone
+ * else's control (a card's "Add" action, a menu item, a second button for the camera).
+ */
+/** Every string the file pickers ({@link FileButton}, `FileDropzone`) render or speak.
+ *  Messages are functions of the file name so a translation can put it anywhere. */
+interface FilePickerLabels {
+    /** The file's type is not in `accept`, when no `accept` is known to name (see
+     *  `rejectedTypeOnly`). */
+    rejectedType: (name: string) => string;
+    /** The file's type is not in `accept`, naming what IS accepted: `accept`'s tokens,
+     *  lower-cased and joined with ", " (`".csv"` => "Only .csv files"). Used whenever
+     *  `accept` is set — kastlan kept a custom `isValid` + `invalidMessage` per form only
+     *  to say this, and `accept` already knows it. */
+    rejectedTypeOnly: (accept: string, name: string) => string;
+    /** The file is larger than `maxSize`; `maxSize` arrives formatted ("5 MB"). */
+    rejectedSize: (name: string, maxSize: string) => string;
+    /** The file was one too many for `maxFiles`. */
+    rejectedCount: (name: string, maxFiles: number) => string;
+    /** `isValid` said no and the caller gave no `invalidMessage`. */
+    rejectedInvalid: (name: string) => string;
+    /** Spoken instead of the per-file message when more than one file was refused. */
+    rejectedMany: (count: number) => string;
+    /** Spoken (and shown, on a dropzone) when `onPick` refused the WHOLE pick.
+     *  Receives the number of files in it. */
+    rejectedPick: (count: number) => string;
+    /** Spoken after a pick the component itself echoes (the dropzone). */
+    selected: (count: number, firstName: string) => string;
+    /** The dropzone's remove button for one file. */
+    remove: (name: string) => string;
+    /** The dropzone's remove-everything button in `multiple` mode. */
+    clearAll: string;
+    /** Spoken after a remove / clear, since the button that was pressed is gone. */
+    removed: (name: string) => string;
+    cleared: string;
+    /** The dropzone's accessible name, when the host passes no `dropLabel`. */
+    dropzone: string;
+    /** The dropzone's Browse button, when the host passes no `browseLabel`. */
+    browse: string;
+    /** What an empty single-file dropzone says (no `emptyLabel` given). */
+    empty: string;
+    /** …and an empty `multiple` one. */
+    emptyMultiple: string;
+    /** The dropzone's second line (no `hint` given). Receives `accept` as a person
+     *  reads it (`".pdf, image/png"`), or `""` when anything goes. */
+    hint: (accept: string) => string;
+    /** What a `busy` dropzone says in place of its body ("Uploading…"). */
+    busy: string;
+}
+declare const DEFAULT_FILE_PICKER_LABELS: FilePickerLabels;
+type FileRejectionReason = "type" | "size" | "count" | "invalid";
+/** One file the picker refused, and why. `message` is already translated (see
+ *  {@link FilePickerLabels}, or the caller's `invalidMessage`), so a host that just
+ *  wants to show it can render `rejections[0].message` as is. */
+interface FileRejection {
+    file: File;
+    reason: FileRejectionReason;
+    message: string;
+}
+/**
+ * Does `file` satisfy an `accept` string, the way the browser's dialog reads it?
+ * Comma-separated tokens: `.ext` (case-insensitive suffix of the name), `type/*`
+ * (a MIME family) or an exact MIME type. An empty or absent `accept` takes anything.
+ *
+ * A file with no `type` — common for `.step`, `.dat`, anything the OS has no MIME
+ * mapping for — can only match by extension, which is why lenkbank lists `.stp` AND
+ * `model/step`: that is how `accept` has to be written for the dialog anyway.
+ */
+declare function matchesAccept(file: File, accept: string | undefined): boolean;
+/** @internal `" .PDF, image/png ,"` => `".pdf, image/png"` — `accept` as a person reads
+ *  it. Also the dropzone's default hint. */
+declare function formatAccept(accept: string): string;
+/** What the pickers screen a pick with. All optional; nothing set accepts everything. */
+interface FileScreenOptions {
+    accept?: string;
+    /** Bytes. Larger files are refused with reason `"size"`. */
+    maxSize?: number;
+    /** How many files one pick may deliver. The rest are refused with reason `"count"`
+     *  — first come, first kept. For a running cap ("at most 5 attachments") pass what
+     *  is LEFT: `maxFiles={5 - attachments.length}`. */
+    maxFiles?: number;
+    /** The caller's own check, after `accept` and `maxSize`. */
+    isValid?: (file: File) => boolean;
+    /** The message for an `isValid` refusal; `labels.rejectedInvalid` otherwise. */
+    invalidMessage?: string;
+}
+/** @internal Split a pick into the files that pass and the ones that do not. */
+declare function screenFiles(files: readonly File[], opts: FileScreenOptions, labels: FilePickerLabels, formatSize: (bytes: number) => string): {
+    accepted: File[];
+    rejected: FileRejection[];
+};
+/**
+ * Judges a pick as a whole — keksdose's "refuse the pick if any file is bad", which
+ * with `onFiles` + `onReject` alone had to be rebuilt from two calls in a microtask.
+ *
+ * Called ONCE per pick, after screening and before `onFiles` / `onReject`, with both
+ * halves (either may be empty). Return `false` to refuse the whole pick: the accepted
+ * files are not delivered, `onReject` still receives what screening refused, and one
+ * sentence (`labels.rejectedPick`) is spoken for the pick instead of a per-file one.
+ * Return nothing to let the pick through as usual.
+ *
+ * ```tsx
+ * onPick={(ok, bad) => bad.length === 0 || false}  // all or nothing
+ * ```
+ */
+type FilePickHandler = (accepted: File[], rejected: FileRejection[]) => boolean | void;
+/** @internal The shared tail of both pickers: run `onPick`, and say whether the pick
+ *  stands. A pick with nothing accepted has nothing to refuse, so `false` there is
+ *  treated as no verdict and the usual per-file messages are kept. */
+declare function judgePick(onPick: FilePickHandler | undefined, accepted: File[], rejected: FileRejection[]): boolean;
+/** One sentence for a whole batch of refusals: the file's own message for one, a
+ *  count for several — reading out five sentences in a row helps nobody. */
+declare function summariseRejections(rejected: readonly FileRejection[], labels: FilePickerLabels): string;
+interface UseFilePickerOptions extends FileScreenOptions {
+    /** Let one pick deliver several files. Without it a drop of several keeps the first. */
+    multiple?: boolean;
+    /**
+     * Ask a phone for its camera instead of the file chooser: `"environment"` is the
+     * back camera, `"user"` the front. A HINT — desktop browsers ignore it, and Chrome
+     * drops it when `multiple` is also set (a camera cannot deliver a list), which is why
+     * keksdose's camera input has no `multiple`. Pass one or the other.
+     */
+    capture?: boolean | "user" | "environment";
+    /** The files that passed, in pick order. Never called with an empty array.
+     *  Optional since 0.7 for a caller that takes the pick through `onPick` alone. */
+    onFiles?: (files: File[]) => void;
+    /** See {@link FilePickHandler}: the whole pick at once, with the power to refuse it. */
+    onPick?: FilePickHandler;
+    /** The files that did not, with a translated message each. The refusals are also
+     *  spoken through a live region, so this is for SHOWING them, not for a11y. */
+    onReject?: (rejections: FileRejection[]) => void;
+    /** `open()` and `take()` do nothing while set. */
+    disabled?: boolean;
+    /** Per-instance overrides of the `filePicker` label namespace. */
+    labels?: Partial<FilePickerLabels>;
+}
+interface UseFilePickerReturn {
+    /** Open the system picker. Call it from a click handler — browsers only open a file
+     *  dialog in response to a user gesture. */
+    open: () => void;
+    /** Screen and deliver files that arrived some other way — a drop, a paste. Honours
+     *  `multiple` (only the first file without it) and every check. */
+    take: (files: ArrayLike<File> | null | undefined) => void;
+    /** The hidden input and the live region. Render it once, anywhere — it takes no
+     *  space and needs no positioned ancestor. */
+    element: ReactElement;
+}
+/**
+ * The headless half of {@link FileButton}: a hidden file input you can open from any
+ * control, with the reset, the screening and the announcement built in.
+ *
+ * ```tsx
+ * const picker = useFilePicker({ accept: ".pdf", onFiles: ([f]) => upload(f) });
+ * return <>{picker.element}<DetailTableCard onAdd={picker.open} … /></>;
+ * ```
+ */
+declare function useFilePicker({ accept, multiple, capture, maxSize, maxFiles, isValid, invalidMessage, onFiles, onPick, onReject, disabled, labels: labelsProp, }: UseFilePickerOptions): UseFilePickerReturn;
+type ButtonOwnProps = ComponentPropsWithoutRef<typeof Button>;
+interface FileButtonProps extends Omit<UseFilePickerOptions, "disabled">, Omit<ButtonOwnProps, "type" | "children" | "accept" | "capture" | "multiple"> {
+    /** The button's content — usually an icon and a word. It is the accessible name. */
+    children: ReactNode;
+    /** Busy: disabled, `aria-busy`, and a spinner before the content — for "uploading". */
+    pending?: boolean;
+    /** Also accept files dropped ON the button (lenkbank's "drop onto the button").
+     *  Off by default: a button that silently takes drops is a surprise on a page that
+     *  has a real drop target elsewhere. */
+    droppable?: boolean;
+}
+/**
+ * {@link useFilePicker} behind a {@link Button}: `variant` and every other button prop
+ * pass through, and the ref is the `<button>` (so `ref.current.click()` opens the
+ * picker from elsewhere too).
+ *
+ * ```tsx
+ * <FileButton accept="image/*,application/pdf" capture="environment" variant="secondary"
+ *   maxSize={10_000_000} onFiles={([f]) => upload(f)} onReject={([r]) => setError(r.message)}>
+ *   <Camera aria-hidden /> Photograph receipt
+ * </FileButton>
+ * ```
+ */
+declare const FileButton: react.ForwardRefExoticComponent<FileButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+/** The words a copy button says. The visible three are short on purpose (they
+ *  replace the button's own text in the `label` variant); the two announcements
+ *  are the sentences a screen reader hears, since the button's focus never moves. */
+interface CopyButtonLabels {
+    copy: string;
+    copied: string;
+    failed: string;
+    copiedAnnouncement: string;
+    failedAnnouncement: string;
+}
+declare const DEFAULT_COPY_BUTTON_LABELS: CopyButtonLabels;
+interface CopyButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {
+    /** What to copy. A function is read at click time — for a value that is expensive
+     *  to build (a CSV of the table) or that changes under the button. */
+    text: string | (() => string);
+    /** `icon` (default): a square icon button whose tooltip states the result.
+     *  `label`: a text button whose words change to the result. */
+    variant?: "icon" | "label";
+    /** The idle accessible name — and, in the `label` variant, the visible text:
+     *  "Copy IBAN" says WHAT is copied, which a row of three copy icons needs. Default
+     *  `copyButton.copy`. */
+    label?: string;
+    /** The button's own look. Default: `ghost` for the icon, `secondary` for the label. */
+    buttonVariant?: ButtonVariant;
+    /** The icon variant's IconButton size (default `sm`). The `label` variant takes a
+     *  Button size, `sm` or `md` — passed only when given, so an existing label button
+     *  keeps its look (keksdose budget-share-card and jobs-panel wanted the compact one). */
+    size?: IconButtonSize | ButtonSize;
+    /** The icon variant's IconButton tone (e.g. `muted`, so a row of copy icons is no
+     *  heavier than the row's other actions); in the `label` variant a Button tone,
+     *  which applies to `link` / `ghost`. The copied / failed colour still wins. */
+    tone?: IconButtonTone | ButtonTone;
+    /** Keep the click and Enter/Space from reaching a clickable row around the button,
+     *  as IconButton's own `stopPropagation` does (keksdose feedback-page, users-panel). */
+    stopPropagation?: boolean;
+    /** Icon variant only: where the result tooltip opens. */
+    tooltipSide?: TooltipSide;
+    /** Pass through to the tooltip. Left unset, the Tooltip decides on its own — it
+     *  portals inside a clipping container (a DataTable's `data-clips` scroller). */
+    tooltipPortal?: boolean;
+    /** ms until the button returns to idle. Default 2000. */
+    resetAfter?: number;
+    /** Called with the real outcome once the copy settles. */
+    onCopied?: (ok: boolean) => void;
+    labels?: Partial<CopyButtonLabels>;
+}
+/**
+ * A button that copies a value and tells the truth about whether it did.
+ *
+ * keksdose asked for it after two of its own copy buttons said "Copied" on a build
+ * where the copy had failed (no Clipboard API over plain http). This one takes its
+ * state from {@link useCopyToClipboard}, which reads the result, and has a `failed`
+ * state that looks and sounds different from success.
+ *
+ * The result is spoken through {@link useAnnounce}: activating the button moves no
+ * focus, so without a live region a screen-reader user hears nothing at all. A
+ * failure goes through an ASSERTIVE region and a success through a polite one — the
+ * failure is the news that changes what they do next.
+ *
+ * The icon variant keeps the SAME accessible name in every state. A button renaming
+ * itself under the focus is announced inconsistently across readers; the live region
+ * is the channel that is actually heard.
+ */
+declare function CopyButton({ text, variant, label, buttonVariant, size, tone, stopPropagation, tooltipSide, tooltipPortal, resetAfter, onCopied, labels, className, disabled, ...rest }: CopyButtonProps): react.JSX.Element;
+
+/** The words {@link FormActions} renders on its own behalf — the `form` namespace. */
+interface FormActionsLabels {
+    save: string;
+    cancel: string;
+}
+declare const DEFAULT_FORM_ACTIONS_LABELS: FormActionsLabels;
+type FormActionsAlign = "start" | "center" | "end" | "between";
+/**
+ * Where the row sits:
+ *  - `inline` (default): under the form's last field, `pt-4` above it.
+ *  - `sticky`: stuck to the bottom of the scrolling page or pane, on the surface
+ *    colour with a rule above, clear of the phone's home indicator — for a long form
+ *    whose Save should not be a scroll away.
+ *  - `dialog`: no spacing of its own, for a dialog's footer slot (DialogFrame,
+ *    FullBleedDialog's `footer`), which already pads and rules it.
+ */
+type FormActionsPlacement = "inline" | "sticky" | "dialog";
+/** The start-side action of {@link FormActionsProps.destructive}, as data. */
+interface FormActionsDestructive {
+    label: ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    /** See Button's `disabledReason`. */
+    disabledReason?: ReactNode;
+}
+interface FormActionsProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    /** Called by Cancel. Omitted: no Cancel button (a form that only saves). */
+    onCancel?: () => void;
+    /**
+     * Given: the save button is `type="button"` and calls this — for a dialog or a row
+     * that saves from a handler. Omitted: it is `type="submit"` and submits the
+     * enclosing `<form>` (or the one named by {@link form}).
+     */
+    onSubmit?: () => void;
+    /** The save button's text. Default `form.save` from the provider, else "Save". */
+    submitLabel?: ReactNode;
+    /** The cancel button's text. Default `form.cancel` from the provider, else "Cancel". */
+    cancelLabel?: ReactNode;
+    /** The save button's text while `pending` ("Saving…"). Default: `submitLabel`. */
+    pendingLabel?: ReactNode;
+    /**
+     * The save is running: a spinner in the save button, `aria-busy` on it, and the
+     * button disabled, so a second click cannot send the form twice. Cancel stays
+     * usable.
+     */
+    pending?: boolean;
+    /** Disable save for a reason of the form's own (an unbalanced entry). */
+    submitDisabled?: boolean;
+    /** Why save is disabled — see Button's `disabledReason`. Keeps it focusable. */
+    submitDisabledReason?: ReactNode;
+    /** The save button's variant. Default `brand`; `danger` for a save that destroys
+     *  (kastlan's `destructive` flag on its own FormActions). */
+    submitVariant?: ButtonVariant;
+    /**
+     * A destructive action at the START of the row, apart from Save and Cancel — the
+     * "Delete" of an edit dialog. Pass `{ label, onClick }` for the kit's quiet danger
+     * button, or an element of your own (a {@link DangerConfirm}, say). With it the row
+     * is `between`-aligned unless `align` says otherwise.
+     */
+    destructive?: ReactNode | FormActionsDestructive;
+    /** Horizontal alignment. Default `end` (`between` with a `destructive` action). */
+    align?: FormActionsAlign;
+    /** See {@link FormActionsPlacement}. Default `inline`. */
+    placement?: FormActionsPlacement;
+    /** The `id` of the `<form>` the save button submits, when the row is rendered
+     *  outside it (a dialog's footer slot). */
+    form?: string;
+    /** Extra actions, placed before Cancel. */
+    children?: ReactNode;
+}
+/**
+ * The Save / Cancel row every form, wizard-step form and dialog ends in — kastlan's
+ * `FormActions`, with the labels from the provider, a pending state and a place for
+ * the destructive action.
+ *
+ * ```tsx
+ * <form onSubmit={form.handleSubmit(save)}>
+ *   …
+ *   <FormActions onCancel={close} pending={mutation.isPending} />
+ * </form>
+ * ```
+ *
+ * The spinner is the kit's {@link Spinner}, drawn inside the button with `label={null}`
+ * so the button's name stays its text; `aria-busy` is what says it is working.
+ */
+declare function FormActions({ onCancel, onSubmit, submitLabel, cancelLabel, pendingLabel, pending, submitDisabled, submitDisabledReason, submitVariant, destructive, align, placement, form, children, className, style, ...rest }: FormActionsProps): react.JSX.Element;
+
+/**
+ * EVERY string the kit renders, as one typed tree — and an optional provider that
+ * hands it to every component at once.
+ *
+ * WHY THIS EXISTS. The kit ships no catalogue and resolves no strings, and that stays
+ * true: the app supplies every word. What was wrong was HOW it had to supply them —
+ * one `labels` prop per component instance, under a different prop name per
+ * component (`labels`, `calendarLabels`, `passwordLabels`, `clearLabel`,
+ * `searchPlaceholder`, `ariaLabel` …). A translated app therefore rendered English
+ * wherever one call site forgot one prop, and nothing told it so: a German showcase
+ * still said "Rows per page", "Collapse sidebar" and "Popover" in seven languages.
+ *
+ * Now there is one key per string, addressed by a dot path (`dataTable.pageSize`,
+ * `datePicker.today`), and three sources in a fixed order of precedence:
+ *
+ *     the component's own prop   >   <UiKitProvider labels>   >   English default
+ *
+ * A consumer writes its translation ONCE, as a `UiKitLabels` (or a partial of it),
+ * mounts `<UiKitProvider labels={…} locale={…}>` at the root, and every kit component
+ * below speaks that language — including the ones nested inside other kit components
+ * (the calendar inside the data table's date filter, the popover inside the date
+ * picker), which no prop at the outer call site could reach before.
+ *
+ * Messages that carry a value are FUNCTIONS of that value, never a template to fill:
+ * a number glued into an English sentence is untranslatable, because the grammar
+ * around it moves with it in most languages.
+ */
+/** The words several components share. A component's own namespace wins over these
+ *  where both exist; these are what a new component reaches for first. */
+interface CommonLabels {
+    close: string;
+    clear: string;
+    search: string;
+    done: string;
+    cancel: string;
+    save: string;
+    back: string;
+    next: string;
+    remove: string;
+    loading: string;
+    noResults: string;
+    /** "Name: value" — how a field's accessible name is composed with its value.
+     *  A colon-and-space is not universal punctuation (French puts a space before
+     *  the colon, Chinese uses a full-width one). */
+    fieldValue: (field: string, value: string) => string;
+    /** The × that puts away a banner or a notice (`AlertBanner onDismiss`). Not `close`:
+     *  nothing opened, and "Close" on a banner reads as closing the page it sits on. */
+    dismiss: string;
+    /** Read after a link that opens a new tab (`<Button href external>`, TextLink):
+     *  nothing else tells a screen reader the page is about to change tabs. */
+    opensInNewTab: string;
+}
+/** `DatePicker` / `DateRangePicker` chrome. The calendar inside has its own
+ *  namespace, `miniCalendar`. */
+interface DatePickerLabels {
+    /** Accessible name of the popover panel the calendar opens in. */
+    panel: string;
+    /** The same, for `DateRangePicker`'s panel. */
+    rangePanel: string;
+    clear: string;
+    previousDay: string;
+    nextDay: string;
+    today: string;
+    /** `DateRangePicker commit="apply"`: the button that commits the drafted range. */
+    apply: string;
+    /** …and the one that discards it. */
+    cancel: string;
+    /** Accessible name of `DateRangePicker`'s preset column. */
+    presets: string;
+}
+/** The whole combobox family: `Combobox`, `EntityCombobox`,
+ *  `MultiEntityCombobox`, `InlineEntityCombobox`, `Autocomplete`. */
+interface ComboboxLabels {
+    search: string;
+    noResults: string;
+    clear: string;
+    loading: string;
+    /** The "add this" row when free entry is allowed. */
+    create: (query: string) => string;
+    /** Trigger summary once more than one value is picked. */
+    selectedCount: (count: number) => string;
+    /** An async lookup (`loadOptions`) failed. */
+    loadError: string;
+    /** Announced (live region) when the list settles on `count` > 0 rows. */
+    resultCount: (count: number) => string;
+    /** The query is shorter than the `minChars` a lookup needs. */
+    minChars: (count: number) => string;
+}
+interface MultiSelectLabels {
+    search: string;
+    selectAll: string;
+    clear: string;
+    /** Trigger text when nothing is picked, which a multi-select reads as "all". */
+    all: string;
+    /** Trigger summary once some (but not all) values are picked. The English
+     *  default is the bare count, which is what the trigger has always shown. */
+    selectedCount: (count: number) => string;
+}
+/** `CalculatorButton` (desktop popover keypad) and `NumberPadSheet` (phone sheet). */
+interface CalculatorLabels {
+    /** The button that opens the calculator. */
+    open: string;
+    /** The popover / sheet itself. */
+    panel: string;
+    calculation: string;
+    backspace: string;
+    clear: string;
+    equals: string;
+    /** The primary key of the phone pad — visible text, not an aria-label. */
+    done: string;
+    /** Names of the operator keys and the decimal key. Their glyphs are not names a
+     *  screen reader agrees on — "÷" is read as "division sign", "divided by" or
+     *  nothing at all depending on the reader — so each says what it does. */
+    plus: string;
+    minus: string;
+    times: string;
+    divide: string;
+    decimal: string;
+}
+/** `CurrencySelect` and the currency half of `AmountInput`. */
+interface CurrencyLabels {
+    currency: string;
+    search: string;
+}
+interface AppShellLabels {
+    collapse: string;
+    expand: string;
+    /** Accessible name of an inline group's disclosure button (`subNav="inline"`). */
+    toggleGroup: (groupLabel: string) => string;
+}
+interface TopBarLabels {
+    theme: string;
+    palette: string;
+    language: string;
+    switchRole: string;
+    /** The role switcher's tooltip, given the active role's name. */
+    role: (value: string) => string;
+}
+interface PickerSheetLabels {
+    close: string;
+}
+interface SwipeableRowLabels {
+    actions: string;
+}
+interface FileLabels {
+    /** A file size for display, given its size in BYTES. The default uses
+     *  `Intl.NumberFormat`'s unit formatting in the provider's locale. */
+    size: (bytes: number) => string;
+}
+/** The complete tree. `UiKitProvider` takes any partial of it. */
+interface UiKitLabels {
+    common: CommonLabels;
+    dataTable: DataTableLabels;
+    miniCalendar: MiniCalendarLabels;
+    calendarHeatmap: CalendarHeatmapLabels;
+    datePicker: DatePickerLabels;
+    monthPicker: MonthPickerLabels;
+    popover: PopoverLabels;
+    combobox: ComboboxLabels;
+    multiSelect: MultiSelectLabels;
+    calculator: CalculatorLabels;
+    currency: CurrencyLabels;
+    chipInput: ChipInputLabels;
+    fieldSync: FieldSyncLabels;
+    passwordReveal: PasswordRevealLabels;
+    tabs: TabsLabels;
+    appShell: AppShellLabels;
+    pageContents: PageContentsLabels;
+    topBar: TopBarLabels;
+    pickerSheet: PickerSheetLabels;
+    swipeableRow: SwipeableRowLabels;
+    file: FileLabels;
+    wizard: WizardLabels;
+    tour: TourLabels;
+    commandPalette: CommandPaletteLabels;
+    globalSearch: GlobalSearchLabels;
+    seriesChart: SeriesChartLabels;
+    pieChart: PieChartLabels;
+    sparkline: SparklineLabels;
+    statTile: StatTileLabels;
+    signaturePad: SignaturePadLabels;
+    passwordStrength: PasswordStrengthLabels;
+    dangerConfirm: DangerConfirmLabels;
+    swatchPicker: SwatchPickerLabels;
+    iconPicker: IconPickerLabels;
+    dialogFrame: DialogFrameLabels;
+    filePicker: FilePickerLabels;
+    measuredGrid: MeasuredGridLabels;
+    feedbackAttachment: FeedbackAttachmentFieldLabels;
+    /** 0.12.0: `FeedbackDialog`'s own strings; `FeedbackThread` / `FeedbackComposer`. */
+    feedbackDialog: FeedbackDialogTextLabels;
+    feedbackThread: FeedbackThreadLabels;
+    feedbackComposer: FeedbackComposerLabels;
+    /** 0.12.0: `ProfileSetting`, `PasswordSetting`, `TwoFactorSetting`, `PasskeysSetting`
+     *  — one record per section. The provider takes a whole section record; the
+     *  components merge it key by key, as a prop. */
+    accountSettings: AccountSettingsLabels;
+    confirmDialog: ConfirmDialogLabels;
+    floatingPanel: FloatingPanelLabels;
+    copyButton: CopyButtonLabels;
+    bulkActionBar: BulkActionBarLabels;
+    list: ListLabels;
+    breadcrumbs: BreadcrumbsLabels;
+    toast: ToastLabels;
+    form: FormActionsLabels;
+    descriptionList: DescriptionListLabels;
+    lineItems: LineItemsLabels;
+    progressBar: ProgressBarLabels;
+    signedAmount: SignedAmountLabels;
+    errorBoundary: ErrorBoundaryLabels;
+    authedImage: AuthedImageLabels;
+    imageGrid: ImageGridLabels;
+    lightbox: LightboxLabels;
+}
+/**
+ * A label override, as deep as the labels go: an object of labels (a namespace, or a
+ * record inside one such as `accountSettings.passkeys` or `dataTable.presets`) may be
+ * partial at every level, because the provider merges it key by key at every level.
+ * A leaf stays as it is: a string, a function-valued label (`(n) => …`), and anything
+ * that is not purely an object (a `ReactNode` union) is given whole.
+ */
+type LabelOverride<T> = [T] extends [(...args: never[]) => unknown] ? T : [T] extends [readonly unknown[]] ? T : [T] extends [object] ? {
+    [K in keyof T]?: LabelOverride<T[K]>;
+} : T;
+/** Any subset of the tree — each namespace may be partial, and so may any record
+ *  inside one (`accountSettings.passkeys`, `dataTable.presets`): they are merged key
+ *  by key, at every depth. */
+type UiKitLabelOverrides = {
+    [K in keyof UiKitLabels]?: LabelOverride<UiKitLabels[K]>;
+};
+declare const DEFAULT_COMMON_LABELS: CommonLabels;
+declare const DEFAULT_DATE_PICKER_LABELS: DatePickerLabels;
+declare const DEFAULT_COMBOBOX_LABELS: ComboboxLabels;
+declare const DEFAULT_MULTI_SELECT_LABELS: MultiSelectLabels;
+declare const DEFAULT_CALCULATOR_LABELS: CalculatorLabels;
+declare const DEFAULT_CURRENCY_LABELS: CurrencyLabels;
+declare const DEFAULT_APP_SHELL_LABELS: AppShellLabels;
+declare const DEFAULT_TOP_BAR_LABELS: TopBarLabels;
+declare const DEFAULT_PICKER_SHEET_LABELS: PickerSheetLabels;
+declare const DEFAULT_SWIPEABLE_ROW_LABELS: SwipeableRowLabels;
+/** Formats with the locale the provider was given (see {@link useKitFileLabels}).
+ *  This static default has no locale to hand and falls back to the runtime's. */
+declare const DEFAULT_FILE_LABELS: FileLabels;
+/** "12 kB", "3.4 MB" — `Intl`'s unit formatting, so the digits, the decimal mark and
+ *  the unit's spelling all follow `locale`. */
+declare function formatFileSize(bytes: number, locale?: string): string;
+/**
+ * What every kit link receives: the anchor attributes the kit decided (href, class,
+ * aria-current, handlers, children, ref). An app's router link maps them —
+ * `({ href, ...p }) => <Link to={href} {...p} />` — ONCE, on the provider.
+ */
+type KitLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+    ref?: Ref<HTMLAnchorElement>;
+};
+type KitLinkComponent = (props: KitLinkProps) => ReactElement;
+interface UiKitProviderProps {
+    /** Any part of {@link UiKitLabels}. Missing keys fall back to English. */
+    labels?: UiKitLabelOverrides;
+    /**
+     * BCP 47 tag used by every kit component that formats something — dates, numbers,
+     * month and weekday names, file sizes — when it is not handed a `locale` prop of
+     * its own. Without a provider, and without a prop, those use the runtime default.
+     */
+    locale?: string;
+    /**
+     * The first day of the week (0 = Sunday, 1 = Monday …) for every calendar below —
+     * `MiniCalendar` and the pickers built on it — that is not handed a `weekStartsOn`
+     * of its own. Without it the week start follows `locale`'s week info.
+     *
+     * Separate from `locale` because the two are separate decisions: a German-built
+     * app running in English (`locale="en"`) would otherwise start its weeks on Sunday,
+     * and switching it to `en-GB` to get Monday changes every date and number format.
+     */
+    weekStartsOn?: WeekDay;
+    /**
+     * The app's router link, used by every kit component that renders an in-app link
+     * and was not handed its own `renderLink` — so `renderLink` stops being repeated on
+     * each ListItem, Breadcrumbs, StatTile, Chip… (kastlan). A component's own
+     * `renderLink` wins; external links and in-page `#anchor`s stay plain `<a>`, and a
+     * hash-router `#/path` is handed to it like `/path` (see `pickLinkRenderer`).
+     */
+    linkComponent?: KitLinkComponent;
+    children: ReactNode;
+}
+/**
+ * Hand every kit component below this point its strings and its locale.
+ *
+ * Optional: a component outside any provider behaves exactly as it did before the
+ * provider existed. Nesting works as a merge — an inner provider overrides only what
+ * it names, so a page can re-label one table's `dataTable.table` without restating
+ * the language.
+ */
+declare function UiKitProvider({ labels, locale, weekStartsOn, linkComponent, children, }: UiKitProviderProps): react.JSX.Element;
+/** What the nearest provider says about one namespace — `undefined` outside one.
+ *  For a component whose own resolver does more than a merge (the data table
+ *  derives `columnsCount` from `columns`): feed `{ ...overrides, ...props }` to it. */
+declare function useKitLabelOverrides<K extends keyof UiKitLabels>(ns: K): Partial<UiKitLabels[K]> | undefined;
+/**
+ * One namespace, resolved: `defaults`, then the provider, then the component's own
+ * `prop`. Record-valued keys are merged key by key at each step.
+ */
+declare function useKitLabels<K extends keyof UiKitLabels>(ns: K, defaults: UiKitLabels[K], prop?: Partial<UiKitLabels[K]>): UiKitLabels[K];
+/** The component's own `locale` prop, else the provider's, else `undefined` (which
+ *  every `Intl` API reads as "the runtime's default"). */
+declare function useKitLocale(prop?: string): string | undefined;
+/** The week start the nearest `<UiKitProvider weekStartsOn>` pins, else `undefined`
+ *  (the caller then asks the locale). A component's own prop goes first:
+ *  `prop ?? useKitWeekStart()`. */
+/** The provider's router link, or `undefined` — a component's own `renderLink` should
+ *  win over it: `const Link = renderLink ?? useKitLink()`. */
+declare function useKitLink(): KitLinkComponent | undefined;
+declare function useKitWeekStart(): WeekDay | undefined;
+/** {@link DEFAULT_FILE_LABELS}, but formatting in the provider's locale. */
+declare function useKitFileLabels(prop?: Partial<FileLabels>): FileLabels;
+/**
+ * The dot paths of every key `labels` does NOT supply — the ones a translated app is
+ * still showing in English. Assert on it in the app's own test:
+ *
+ *     expect(missingKitLabels(de)).toEqual([]);
+ *
+ * `reference` is the complete tree to check against — pass
+ * {@link DEFAULT_UI_KIT_LABELS} (src/i18n/defaults.ts). It is a parameter rather than an import
+ * because the defaults live beside their components, and this module is imported BY
+ * those components.
+ */
+declare function missingKitLabels(labels: UiKitLabelOverrides | undefined, reference: UiKitLabels): string[];
+
+export { FIELD_TRIGGER as $, type AppShellLabels as A, Button as B, type CalculatorLabels as C, type CurrencyLabels as D, DEFAULT_APP_SHELL_LABELS as E, DEFAULT_CALCULATOR_LABELS as F, DEFAULT_COMBOBOX_LABELS as G, DEFAULT_COMMON_LABELS as H, DEFAULT_COPY_BUTTON_LABELS as I, DEFAULT_CURRENCY_LABELS as J, DEFAULT_DATE_PICKER_LABELS as K, DEFAULT_FILE_LABELS as L, DEFAULT_FILE_PICKER_LABELS as M, DEFAULT_FORM_ACTIONS_LABELS as N, DEFAULT_MULTI_SELECT_LABELS as O, DEFAULT_PASSWORD_REVEAL_LABELS as P, DEFAULT_PICKER_SHEET_LABELS as Q, DEFAULT_SWIPEABLE_ROW_LABELS as R, DEFAULT_TABS_LABELS as S, DEFAULT_TOP_BAR_LABELS as T, type DatePickerLabels as U, EmptyState as V, type EmptyStateProps as W, FIELD_BASE as X, FIELD_DISPLAY as Y, FIELD_FLOATING_PAD as Z, FIELD_INVALID as _, type ButtonClassesOptions as a, missingKitLabels as a$, FIELD_WRITABLE_LOOK as a0, FLOATING_INPUT_CLASS as a1, FLOATING_LABEL_CLASS as a2, FLOATING_LABEL_STATIC as a3, FieldChevron as a4, type FieldChevronProps as a5, FieldHint as a6, type FieldHintProps as a7, FieldLabel as a8, type FieldLabelProps as a9, type LabelOverride as aA, type LabelProps as aB, type MultiSelectLabels as aC, PHONE_QUERY as aD, type PasswordRevealLabels as aE, type PickerSheetLabels as aF, Select as aG, type SelectProps as aH, Spinner as aI, type SpinnerProps as aJ, type SwipeableRowLabels as aK, type TabItem as aL, Tabs as aM, type TabsLabels as aN, type TabsProps as aO, Textarea as aP, type TextareaProps as aQ, type TopBarLabels as aR, type UiKitLabelOverrides as aS, type UiKitLabels as aT, UiKitProvider as aU, type UiKitProviderProps as aV, type UseFilePickerOptions as aW, type UseFilePickerReturn as aX, buttonClasses as aY, formatFileSize as aZ, matchesAccept as a_, FileButton as aa, type FileButtonProps as ab, type FileLabels as ac, type FilePickerLabels as ad, type FileRejection as ae, type FileRejectionReason as af, type FileScreenOptions as ag, FloatingField as ah, type FloatingFieldProps as ai, FormActions as aj, type FormActionsAlign as ak, type FormActionsDestructive as al, type FormActionsLabels as am, type FormActionsPlacement as an, type FormActionsProps as ao, IconButton as ap, type IconButtonGlyphSize as aq, type IconButtonProps as ar, type IconButtonSize as as, type IconButtonTone as at, type IconButtonVariant as au, Input as av, type InputProps as aw, type KitLinkComponent as ax, type KitLinkProps as ay, Label as az, type ButtonLinkProps as b, resolvePasswordRevealLabels as b0, useFilePicker as b1, useKitFileLabels as b2, useKitLabelOverrides as b3, useKitLabels as b4, useKitLink as b5, useKitLocale as b6, useKitWeekStart as b7, type FilePickHandler as b8, formatAccept as b9, judgePick as ba, screenFiles as bb, summariseRejections as bc, type ButtonProps as c, type ButtonSize as d, type ButtonTone as e, type ButtonVariant as f, Card as g, CardAction as h, type CardActionProps as i, CardContent as j, type CardContentProps as k, CardDescription as l, type CardDescriptionProps as m, CardFooter as n, type CardFooterProps as o, CardHeader as p, type CardHeaderProps as q, type CardProps as r, CardTitle as s, type CardTitleProps as t, type CardTone as u, type ComboboxLabels as v, type CommonLabels as w, CopyButton as x, type CopyButtonLabels as y, type CopyButtonProps as z };