@eifi1/ui-kit 0.15.5 → 0.16.0

package/README.md

@@ -306,9 +306,14 @@ showcase can run next to whatever you are testing it against:
 | **4170** | **this showcase** (`dev:showcase`) |
 | **4171** | this showcase, built (`preview:showcase`) |
 | 4173 | keksdose frontend (backend 8000) |
-| 4175 | lenkbank frontend (backend 8001) |
+| 4175 | Kurvenschmiede frontend (backend 8001) |
 | 5173 | kastlan frontend (Vite's default) |
 
+Kurvenschmiede was called **lenkbank** until 2026-10-01 (repository `Eifi1/kurvenschmiede`,
+formerly `Eifi1/lenkbank`). The changelog, older adoption notes and code comments that
+cite its feedback ("lenkbank L2", "Lenkbank feedback #93") keep the name they were
+written with.
+
 `strictPort` is on: a collision fails loudly instead of silently moving to another port
 and printing a URL that is not the one documented here. For a throwaway instance that
 must not take the port your editor's build task wants:
@@ -377,14 +382,14 @@ columns, strings and permissions (see the note at the top of `src/feedback/feedb
 
 <!-- BEGIN GENERATED: exports — node scripts/gen-export-inventory.mjs -->
 
-**1026 names from 161 modules** — 482 values and 544 types. _Italic_ is a type-only export.
+**1039 names from 161 modules** — 483 values and 556 types. _Italic_ is a type-only export.
 
 Generated from `dist/index.d.ts` by `node scripts/gen-export-inventory.mjs`; the count
 is pinned by `src/__tests__/public-surface.test.ts`. Do not edit between the markers.
 
 | Entry point | Names |
 |---|---|
-| `@eifi1/ui-kit` | 1026 |
+| `@eifi1/ui-kit` | 1039 |
 | `@eifi1/ui-kit/chart` | 104 |
 | `@eifi1/ui-kit/shell` | 24 |
 | `@eifi1/ui-kit/data-table` | 49 |
@@ -406,7 +411,7 @@ re-slicing of it, never a second API.
 | `lib/calc` | `commitExpression`, `evaluateExpression`, `formatResult`, `isBareAmount`, `looksLikeExpression`, `sanitizeLive`, `splitLeadingSign` |
 | `lib/cn` | `cn` |
 | `lib/logger` | `logger`, `setStoreLog` |
-| `lib/format` | `currencyMinorDigits`, `EMPTY_FORMATTED_VALUE`, `formatDate`, `formatMoney`, `formatNumber`, `formatPercent`, `formatRelativeTime`, `roundToCurrency`, `toDate`, `useKitFormat`, _`DateInput`_, _`FormatDateOptions`_, _`FormatDateStyle`_, _`FormatDigits`_, _`FormatMoneyOptions`_, _`FormatNumberBaseOptions`_, _`FormatNumberOptions`_, _`FormatPercentOptions`_, _`FormatRelativeTimeOptions`_, _`KitFormat`_ |
+| `lib/format` | `currencyMinorDigits`, `EMPTY_FORMATTED_VALUE`, `formatDate`, `formatMoney`, `formatNumber`, `formatPercent`, `formatRelativeTime`, `roundToCurrency`, `toDate`, `useKitFormat`, _`DateInput`_, _`FormatDateOptions`_, _`FormatDateStyle`_, _`FormatDigits`_, _`FormatMoneyOptions`_, _`FormatNumberBaseOptions`_, _`FormatNumberOptions`_, _`FormatPercentOptions`_, _`FormatRelativeTimeOptions`_, _`KitFormat`_, _`RoundToCurrencyOptions`_ |
 | `lib/safe-storage` | `readStored`, `writeStored` |
 | `lib/qr-encode` | `encodeQr`, _`QrEncodeOptions`_, _`QrErrorCorrection`_, _`QrMatrix`_ |
 | `lib/clipping` | `CLIPS_ATTRIBUTE` |
@@ -455,10 +460,10 @@ re-slicing of it, never a second API.
 
 | Module | Exports |
 |---|---|
-| `components/ui` | `Button`, `buttonClasses`, `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`, `DEFAULT_PASSWORD_REVEAL_LABELS`, `DEFAULT_TABS_LABELS`, `EmptyState`, `FIELD_BASE`, `FIELD_DISPLAY`, `FIELD_FLOATING_PAD`, `FIELD_INVALID`, `FIELD_TRIGGER`, `FIELD_WRITABLE_LOOK`, `FieldChevron`, `FieldHint`, `FieldLabel`, `FLOATING_INPUT_CLASS`, `FLOATING_LABEL_CLASS`, `FLOATING_LABEL_STATIC`, `FloatingField`, `IconButton`, `Input`, `Label`, `PHONE_QUERY`, `resolvePasswordRevealLabels`, `Select`, `Spinner`, `Tabs`, `Textarea`, _`ButtonClassesOptions`_, _`ButtonLinkProps`_, _`ButtonProps`_, _`ButtonSize`_, _`ButtonTone`_, _`ButtonVariant`_, _`CardActionProps`_, _`CardContentProps`_, _`CardDescriptionProps`_, _`CardFooterProps`_, _`CardHeaderProps`_, _`CardProps`_, _`CardTitleProps`_, _`CardTone`_, _`EmptyStateProps`_, _`FieldChevronProps`_, _`FieldHintProps`_, _`FieldLabelProps`_, _`FloatingFieldProps`_, _`IconButtonGlyphSize`_, _`IconButtonLinkProps`_, _`IconButtonProps`_, _`IconButtonSize`_, _`IconButtonTone`_, _`IconButtonToneColor`_, _`IconButtonVariant`_, _`InputProps`_, _`LabelProps`_, _`PasswordRevealLabels`_, _`SelectProps`_, _`SpinnerProps`_, _`TabItem`_, _`TabsLabels`_, _`TabsProps`_, _`TextareaProps`_ |
+| `components/ui` | `Button`, `buttonClasses`, `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`, `DEFAULT_PASSWORD_REVEAL_LABELS`, `DEFAULT_TABS_LABELS`, `EmptyState`, `FIELD_BASE`, `FIELD_DISPLAY`, `FIELD_FLOATING_PAD`, `FIELD_INVALID`, `FIELD_TRIGGER`, `FIELD_WRITABLE_LOOK`, `FieldChevron`, `FieldHint`, `FieldLabel`, `FLOATING_INPUT_CLASS`, `FLOATING_LABEL_CLASS`, `FLOATING_LABEL_STATIC`, `FloatingField`, `IconButton`, `Input`, `Label`, `PHONE_QUERY`, `resolvePasswordRevealLabels`, `Select`, `Spinner`, `Tabs`, `Textarea`, _`ButtonClassesOptions`_, _`ButtonLinkProps`_, _`ButtonProps`_, _`ButtonSize`_, _`ButtonTone`_, _`ButtonVariant`_, _`CardActionProps`_, _`CardContentProps`_, _`CardDescriptionProps`_, _`CardFooterProps`_, _`CardHeaderProps`_, _`CardProps`_, _`CardTitleLevel`_, _`CardTitleProps`_, _`CardTone`_, _`EmptyStateProps`_, _`FieldChevronProps`_, _`FieldHintProps`_, _`FieldLabelProps`_, _`FloatingFieldProps`_, _`IconButtonGlyphSize`_, _`IconButtonLinkProps`_, _`IconButtonProps`_, _`IconButtonSize`_, _`IconButtonTone`_, _`IconButtonToneColor`_, _`IconButtonVariant`_, _`InputProps`_, _`LabelProps`_, _`PasswordRevealLabels`_, _`SelectProps`_, _`SpinnerProps`_, _`TabItem`_, _`TabsLabels`_, _`TabsProps`_, _`TextareaProps`_ |
 | `components/copy-button` | `CopyButton`, `DEFAULT_COPY_BUTTON_LABELS`, _`CopyButtonLabels`_, _`CopyButtonProps`_ |
 | `components/file-button` | `DEFAULT_FILE_PICKER_LABELS`, `FileButton`, `matchesAccept`, `useFilePicker`, _`FileButtonProps`_, _`FilePickerLabels`_, _`FileRejection`_, _`FileRejectionReason`_, _`FileScreenOptions`_, _`UseFilePickerOptions`_, _`UseFilePickerReturn`_ |
-| `components/form-actions` | `DEFAULT_FORM_ACTIONS_LABELS`, `FormActions`, _`FormActionsAlign`_, _`FormActionsDestructive`_, _`FormActionsLabels`_, _`FormActionsPlacement`_, _`FormActionsProps`_ |
+| `components/form-actions` | `DEFAULT_FORM_ACTIONS_LABELS`, `FormActions`, _`FormActionsAlign`_, _`FormActionsDestructive`_, _`FormActionsLabels`_, _`FormActionsPlacement`_, _`FormActionsProps`_, _`FormActionsStickyWithin`_, _`FormActionsSubmitProps`_ |
 | `components/field` | `Field`, _`FieldControlProps`_, _`FieldLabelVisibility`_, _`FieldProps`_, _`FieldRenderMeta`_ |
 | `components/search-field` | `SearchField`, _`SearchFieldProps`_ |
 | `components/dropdown` | `DropdownPanel`, `DropdownSearchHeader`, `useDropdown`, `useDropdownSearch`, _`DropdownPanelProps`_, _`DropdownSearchHeaderProps`_ |
@@ -510,7 +515,7 @@ re-slicing of it, never a second API.
 | `components/pie-chart` | `PieChart`, _`PieChartProps`_, _`PieChartSlice`_ |
 | `components/pie-chart-labels` | `DEFAULT_PIE_CHART_LABELS`, _`PieChartLabels`_ |
 | `components/account-settings` | `PasswordSetting`, `ProfileSetting`, `TwoFactorSetting`, _`TwoFactorSetupData`_ |
-| `components/passkeys-setting` | `PasskeysSetting`, _`PasskeyItem`_, _`PasskeysSettingProps`_ |
+| `components/passkeys-setting` | `PasskeysSetting`, _`PasskeyDataAttributes`_, _`PasskeyId`_, _`PasskeyItem`_, _`PasskeysSettingProps`_ |
 | `components/qr-code` | `QrCode`, _`QrCodeProps`_ |
 | `components/alert-banner` | `AlertBanner`, `alertFrameClass`, `toneFrameClass`, _`AlertBannerProps`_, _`AlertSize`_, _`AlertTone`_ |
 | `components/toggle-group` | `ToggleGroup`, _`ToggleGroupBaseProps`_, _`ToggleGroupClearableProps`_, _`ToggleGroupProps`_, _`ToggleGroupRequiredProps`_, _`ToggleOption`_ |
@@ -528,11 +533,11 @@ re-slicing of it, never a second API.
 | `components/tree-view` | `TreeRow`, `TreeView`, _`TreeItemState`_, _`TreeNode`_, _`TreeRowProps`_, _`TreeViewProps`_ |
 | `components/chart` | `ChartContainer`, `ChartLegend`, `ChartLegendContent`, `ChartTooltip`, `ChartTooltipContent`, `useChart`, _`ChartConfig`_, _`ChartSeriesConfig`_ |
 | `components/description-list` | `DEFAULT_DESCRIPTION_LIST_LABELS`, `DescriptionItem`, `DescriptionList`, _`DescriptionItemProps`_, _`DescriptionListColumns`_, _`DescriptionListDensity`_, _`DescriptionListLabels`_, _`DescriptionListLayout`_, _`DescriptionListProps`_ |
-| `components/line-items` | `DEFAULT_LINE_ITEMS_LABELS`, `LineItems`, _`LineItemCellContext`_, _`LineItemsColumn`_, _`LineItemsLabels`_, _`LineItemsProps`_ |
+| `components/line-items` | `DEFAULT_LINE_ITEMS_LABELS`, `LineItems`, _`LineItemCellContext`_, _`LineItemsColumn`_, _`LineItemsFieldLabels`_, _`LineItemsLabels`_, _`LineItemsProps`_, _`LineItemsSummary`_, _`LineItemsSummaryTone`_ |
 | `components/progress-bar` | `DEFAULT_PROGRESS_BAR_LABELS`, `ProgressBar`, _`ProgressBarLabels`_, _`ProgressBarProps`_, _`ProgressBarSegment`_, _`ProgressBarSize`_, _`ProgressBarTone`_ |
 | `components/skeleton` | `Skeleton`, _`SkeletonProps`_, _`SkeletonShape`_ |
-| `components/loading-state` | `LoadingState`, _`LoadingStateProps`_, _`LoadingStateSize`_ |
-| `components/signed-amount` | `DEFAULT_SIGNED_AMOUNT_LABELS`, `Delta`, `SignedAmount`, `Tone`, `toneTextClass`, _`DeltaProps`_, _`GoodDirection`_, _`SignedAmountLabels`_, _`SignedAmountProps`_, _`SignedAmountTone`_, _`TextTone`_, _`ToneProps`_ |
+| `components/loading-state` | `LoadingState`, _`LoadingStateLabelVisibility`_, _`LoadingStateProps`_, _`LoadingStateSize`_ |
+| `components/signed-amount` | `DEFAULT_SIGNED_AMOUNT_LABELS`, `Delta`, `SignedAmount`, `Tone`, `toneTextClass`, _`DeltaProps`_, _`GoodDirection`_, _`SignedAmountLabels`_, _`SignedAmountProps`_, _`SignedAmountTone`_, _`TextTone`_, _`ToneProps`_, _`VerdictPalette`_ |
 | `components/error-boundary` | `crashFingerprint`, `DEFAULT_ERROR_BOUNDARY_LABELS`, `describeThrown`, `ErrorBoundary`, `formatCrashReport`, `isChunkLoadError`, _`CrashReport`_, _`CrashReportResult`_, _`ErrorBoundaryDetails`_, _`ErrorBoundaryFallbackProps`_, _`ErrorBoundaryLabels`_, _`ErrorBoundaryProps`_ |
 | `components/authed-image` | `AuthedImage`, `DEFAULT_AUTHED_IMAGE_LABELS`, _`AuthedImageLabels`_, _`AuthedImageProps`_ |
 | `components/image-grid` | `DEFAULT_IMAGE_GRID_LABELS`, `ImageGrid`, `splitFileName`, _`ImageGridLabels`_, _`ImageGridProps`_ |
@@ -541,10 +546,10 @@ re-slicing of it, never a second API.
 | `components/table` | `NUMERIC_CELL_CLASS`, `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableEmpty`, `TableFoot`, `TableHead`, `TableHeaderCell`, `TableRow`, _`TableAlign`_, _`TableBodyProps`_, _`TableCaptionProps`_, _`TableCellProps`_, _`TableDensity`_, _`TableEmptyProps`_, _`TableFootProps`_, _`TableHeaderCellProps`_, _`TableHeaderCellSize`_, _`TableHeaderCellWeight`_, _`TableHeadProps`_, _`TableLayout`_, _`TableProps`_, _`TableRowProps`_, _`TableRowVariant`_, _`TableVAlign`_ |
 | `components/separator` | `Separator`, _`SeparatorProps`_ |
 | `components/scroll-area` | `ScrollArea`, _`ScrollAreaProps`_ |
-| `components/list` | `DEFAULT_LIST_LABELS`, `List`, `ListItem`, _`ListDensity`_, _`ListItemLinkProps`_, _`ListItemProps`_, _`ListLabels`_, _`ListProps`_, _`ListSeparator`_ |
+| `components/list` | `DEFAULT_LIST_LABELS`, `List`, `ListItem`, _`ListDensity`_, _`ListItemLinkProps`_, _`ListItemProps`_, _`ListItemTrailingTone`_, _`ListLabels`_, _`ListProps`_, _`ListSeparator`_ |
 | `components/menu-item` | `MenuItem`, _`MenuItemLinkProps`_, _`MenuItemProps`_, _`MenuItemTone`_ |
 | `components/text` | `Caption`, `CAPTION_CLASS`, `SECTION_LABEL_CLASS`, `SectionLabel`, _`CaptionProps`_, _`SectionLabelProps`_, _`SectionLabelSize`_, _`SectionLabelVariant`_ |
-| `components/status-dot` | `StatusDot`, _`StatusDotProps`_, _`StatusDotSize`_, _`StatusDotTone`_ |
+| `components/status-dot` | `StatusDot`, `statusDotColor`, _`StatusDotProps`_, _`StatusDotSize`_, _`StatusDotTone`_ |
 | `components/page-header` | `PageHeader`, _`PageHeaderActionsAlign`_, _`PageHeaderMobileLayout`_, _`PageHeaderProps`_, _`PageHeaderSize`_ |
 | `components/breadcrumbs` | `Breadcrumbs`, `DEFAULT_BREADCRUMBS_LABELS`, _`BreadcrumbItem`_, _`BreadcrumbLinkProps`_, _`BreadcrumbsLabels`_, _`BreadcrumbsProps`_ |
 | `components/text-link` | `TextLink`, _`TextLinkCurrent`_, _`TextLinkProps`_, _`TextLinkRenderProps`_, _`TextLinkTone`_, _`TextLinkUnderline`_ |

package/dist/chart.d.ts

@@ -13,7 +13,7 @@ export { TimeTickUnit } from './components/series-chart-ticks.js';
 import 'recharts';
 import 'react';
 import './lib/direction.js';
-import './kit-labels-BD2F7sOz.js';
+import './kit-labels-DE--LmCk.js';
 import './components/data-table-labels.js';
 import './components/mini-calendar.js';
 import './components/calendar-heatmap.js';
@@ -43,7 +43,7 @@ import './components/dialog-frame.js';
 import './components/modal.js';
 import './hooks/use-search-param-state.js';
 import './components/measured-grid.js';
-import './feedback-attachment-BYAHJMOr.js';
+import './feedback-attachment-WFiXJ8We.js';
 import './feedback/feedback-thread.js';
 import './feedback/feedback-inbox.js';
 import './components/account-settings-labels.js';
@@ -51,12 +51,12 @@ import './components/confirm-dialog.js';
 import './components/floating-panel.js';
 import './components/bulk-action-bar.js';
 import './components/list.js';
+import './components/signed-amount.js';
 import './components/breadcrumbs.js';
 import './components/toast.js';
 import './components/description-list.js';
 import './components/line-items.js';
 import './components/progress-bar.js';
-import './components/signed-amount.js';
 import './components/error-boundary.js';
 import './components/authed-image.js';
 import './hooks/use-authed-src.js';

package/dist/components/amount-input.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { CalculatorButtonLabels } from './calculator.js';
 import { NumberPadSheetLabels } from './numpad-sheet.js';
-import '../kit-labels-BD2F7sOz.js';
+import '../kit-labels-DE--LmCk.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -34,7 +34,7 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback-attachment-BYAHJMOr.js';
+import '../feedback-attachment-WFiXJ8We.js';
 import '../feedback/feedback-thread.js';
 import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
@@ -42,12 +42,12 @@ import './confirm-dialog.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
 import './list.js';
+import './signed-amount.js';
 import './breadcrumbs.js';
 import './toast.js';
 import './description-list.js';
 import './line-items.js';
 import './progress-bar.js';
-import './signed-amount.js';
 import './error-boundary.js';
 import './authed-image.js';
 import '../hooks/use-authed-src.js';
@@ -76,6 +76,13 @@ interface AmountInputProps {
     "aria-describedby"?: string;
     "aria-invalid"?: boolean | "true" | "false";
     "aria-required"?: boolean | "true" | "false";
+    /** {@link NumberInput}'s `hint`, the same rule: a {@link FieldHint} "?" rides the
+     *  label's own line, beside the label (not at the far end, where the calculator and
+     *  the currency chip live); plain TEXT (a string or a number) is a caption UNDER
+     *  the field, attached through `aria-describedby` after the caller's own. A phone's
+     *  `variant="display"` has no visible label, so a FieldHint is dropped there; a
+     *  caption still shows. */
+    hint?: ReactNode;
     /** Every user-facing string this component and the two it composes own, so a
      *  translating host can supply its own. Each key optional, and each a per-field
      *  override of the kit-wide translation in `<UiKitProvider labels>`: `currency`

package/dist/components/amount-input.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
 import { ChevronDown } from "lucide-react";
 import { CURRENCIES, CurrencyFlag, currencyName, getCurrency } from "./currency-select.js";
-import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, PHONE_QUERY } from "./ui.js";
+import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField, PHONE_QUERY } from "./ui.js";
 import { cn } from "../lib/cn.js";
 import { currencyMinorDigits } from "../lib/format.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
@@ -71,9 +71,12 @@ function isResultOf(previous, text, settle) {
   return n !== null && settle(formatResult(n)) === text.trim();
 }
 const AmountInput = forwardRef(
-  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, className, id, ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {
+  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, className, id, ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, hint, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {
     const generatedId = useId();
     const fieldId = id ?? generatedId;
+    const hintId = useId();
+    const textHint = typeof hint === "string" && hint !== "" || typeof hint === "number";
+    const describedBy = textHint ? ariaDescribedBy ? `${ariaDescribedBy} ${hintId}` : hintId : ariaDescribedBy;
     const invalid = Boolean(invalidProp) || ariaInvalid === true || ariaInvalid === "true";
     const editable = !!onCurrencyChange;
     const isMobile = useMediaQuery(PHONE_QUERY, false);
@@ -150,165 +153,171 @@ const AmountInput = forwardRef(
       );
     }, [query, currencyNames, locale]);
     return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: cn("w-full", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: setRefs,
-            id: fieldId,
-            "aria-label": ariaLabel,
-            type: "text",
-            autoFocus,
-            inputMode: isMobile ? "none" : "decimal",
-            autoComplete: "off",
-            disabled,
-            placeholder: asDisplay ? placeholder ?? "0" : label !== void 0 ? " " : placeholder,
-            value: display,
-            onChange: (e) => typed(e.target.value),
-            onFocus: () => setFocused(true),
-            onBlur: () => {
-              commit();
-              setFocused(false);
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter") commit();
-            },
-            className: cn(
-              // With a label, use the floating-input padding (pt-4 pb-1) like every
-              // other labelled field so the value sits BELOW the floated label rather
-              // than vertically centred where it overlaps the resting label
-              // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +
-              // transparent-placeholder bits.
-              asDisplay ? DISPLAY_INPUT_CLASS : label !== void 0 ? FLOATING_INPUT_CLASS : FIELD_BASE,
-              // Room for the trailing controls. showCalc is always false on a phone,
-              // so the display shape only ever has to clear the currency chip — and
-              // it clears it by the chip's actual width (a text-sm code plus a
-              // chevron, ~58px) rather than the 5rem the boxed shape reserves. On a
-              // 375px screen those 16px are the difference between a readable figure
-              // and a clipped one (feedback #430 rework).
-              asDisplay ? currency ? editable ? "pe-16" : "pe-12" : "pe-0" : showCalc ? currency ? editable ? "pe-24" : "pe-16" : "pe-10" : currency ? editable ? "pe-20" : "pe-14" : "pe-3",
-              // Centred display shape: centre in what is LEFT of the currency chip.
-              // `text-center` alone would centre the figure in the whole box, i.e.
-              // partly underneath the chip; the padding above is what takes the chip
-              // out of the centring, and nothing is added at the start because a
-              // mirrored reservation would spend the width twice (see `align`).
-              asDisplay && align === "center" && "text-center",
-              // Last, so it wins over the base class's own text colour.
-              TONE_CLASS[tone],
-              invalid && FIELD_INVALID
-            ),
-            "aria-invalid": invalid || void 0,
-            "aria-describedby": ariaDescribedBy,
-            "aria-required": ariaRequired
-          }
-        ),
-        label !== void 0 && // The display shape drops the label VISUALLY, not from the accessibility
-        // tree: a 36px tinted figure at the top of a transaction form is legibly
-        // the amount, but a screen reader still needs the name, and callers that
-        // pass `label` without `ariaLabel` would otherwise be left with none.
-        /* @__PURE__ */ jsx("label", { htmlFor: fieldId, className: asDisplay ? "sr-only" : FLOATING_LABEL_CLASS, children: label }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "absolute flex items-center gap-0.5",
-              // Logical `end-*`: the chip and the calculator are the figure's trailing
-              // controls, so a right-to-left form carries them on the left.
-              asDisplay ? "bottom-1 end-0" : "inset-y-1 end-1"
+      /* @__PURE__ */ jsxs(
+        FloatingField,
+        {
+          className: "w-full",
+          htmlFor: fieldId,
+          label,
+          srOnlyLabel: asDisplay,
+          hint: textHint ? void 0 : hint,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: setRefs,
+                id: fieldId,
+                "aria-label": ariaLabel,
+                type: "text",
+                autoFocus,
+                inputMode: isMobile ? "none" : "decimal",
+                autoComplete: "off",
+                disabled,
+                placeholder: asDisplay ? placeholder ?? "0" : label !== void 0 ? " " : placeholder,
+                value: display,
+                onChange: (e) => typed(e.target.value),
+                onFocus: () => setFocused(true),
+                onBlur: () => {
+                  commit();
+                  setFocused(false);
+                },
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") commit();
+                },
+                className: cn(
+                  // With a label, use the floating-input padding (pt-4 pb-1) like every
+                  // other labelled field so the value sits BELOW the floated label rather
+                  // than vertically centred where it overlaps the resting label
+                  // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +
+                  // transparent-placeholder bits.
+                  asDisplay ? DISPLAY_INPUT_CLASS : label !== void 0 ? FLOATING_INPUT_CLASS : FIELD_BASE,
+                  // Room for the trailing controls. showCalc is always false on a phone,
+                  // so the display shape only ever has to clear the currency chip — and
+                  // it clears it by the chip's actual width (a text-sm code plus a
+                  // chevron, ~58px) rather than the 5rem the boxed shape reserves. On a
+                  // 375px screen those 16px are the difference between a readable figure
+                  // and a clipped one (feedback #430 rework).
+                  asDisplay ? currency ? editable ? "pe-16" : "pe-12" : "pe-0" : showCalc ? currency ? editable ? "pe-24" : "pe-16" : "pe-10" : currency ? editable ? "pe-20" : "pe-14" : "pe-3",
+                  // Centred display shape: centre in what is LEFT of the currency chip.
+                  // `text-center` alone would centre the figure in the whole box, i.e.
+                  // partly underneath the chip; the padding above is what takes the chip
+                  // out of the centring, and nothing is added at the start because a
+                  // mirrored reservation would spend the width twice (see `align`).
+                  asDisplay && align === "center" && "text-center",
+                  // Last, so it wins over the base class's own text colour.
+                  TONE_CLASS[tone],
+                  invalid && FIELD_INVALID
+                ),
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": describedBy,
+                "aria-required": ariaRequired
+              }
             ),
-            children: [
-              showCalc && /* @__PURE__ */ jsx(
-                CalculatorButton,
-                {
-                  value: display,
-                  onChange: (result, expression) => {
-                    setDraft(null);
-                    const settled = settle(result);
-                    handleText(settled, expression);
-                    onCommit?.(settled);
-                  },
-                  className: "px-1.5",
-                  ariaLabel: labels?.calculatorTrigger,
-                  labels: labels?.calculator
-                }
-              ),
-              currency && !editable && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "aria-hidden": true,
-                  className: cn(
-                    "pointer-events-none px-1 font-medium text-[var(--text-muted)]",
-                    // A text-xs chip next to a 36px figure reads as a stray footnote.
-                    asDisplay ? "text-sm" : "text-xs"
-                  ),
-                  children: currency
-                }
-              ),
-              currency && editable && /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  ref: chipRef,
-                  type: "button",
-                  onClick: () => setOpen((v) => !v),
-                  "aria-label": (
-                    // "Currency: EUR" through `common.fieldValue`, not a template literal:
-                    // the colon-and-space is punctuation a translation has to own.
-                    selected ? common.fieldValue(currencyText.currency, selected.code) : currencyText.currency
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "absolute flex items-center gap-0.5",
+                  // Logical `end-*`: the chip and the calculator are the figure's trailing
+                  // controls, so a right-to-left form carries them on the left.
+                  asDisplay ? "bottom-1 end-0" : "inset-y-1 end-1"
+                ),
+                children: [
+                  showCalc && /* @__PURE__ */ jsx(
+                    CalculatorButton,
+                    {
+                      value: display,
+                      onChange: (result, expression) => {
+                        setDraft(null);
+                        const settled = settle(result);
+                        handleText(settled, expression);
+                        onCommit?.(settled);
+                      },
+                      className: "px-1.5",
+                      ariaLabel: labels?.calculatorTrigger,
+                      labels: labels?.calculator
+                    }
                   ),
-                  className: cn(
-                    "flex items-center gap-1 rounded px-2 py-1 font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
-                    asDisplay ? "text-sm" : "text-xs"
+                  currency && !editable && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: cn(
+                        "pointer-events-none px-1 font-medium text-[var(--text-muted)]",
+                        // A text-xs chip next to a 36px figure reads as a stray footnote.
+                        asDisplay ? "text-sm" : "text-xs"
+                      ),
+                      children: currency
+                    }
                   ),
-                  children: [
-                    currency,
-                    /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" })
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        editable && open && /* @__PURE__ */ jsx(
-          DropdownPanel,
-          {
-            anchorRef: chipRef,
-            panelRef,
-            empty: filtered.length === 0,
-            header: /* @__PURE__ */ jsx(
-              DropdownSearchHeader,
-              {
-                query,
-                onQueryChange: setQuery,
-                inputRef,
-                placeholder: currencyText.search
+                  currency && editable && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      ref: chipRef,
+                      type: "button",
+                      onClick: () => setOpen((v) => !v),
+                      "aria-label": (
+                        // "Currency: EUR" through `common.fieldValue`, not a template literal:
+                        // the colon-and-space is punctuation a translation has to own.
+                        selected ? common.fieldValue(currencyText.currency, selected.code) : currencyText.currency
+                      ),
+                      className: cn(
+                        "flex items-center gap-1 rounded px-2 py-1 font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
+                        asDisplay ? "text-sm" : "text-xs"
+                      ),
+                      children: [
+                        currency,
+                        /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" })
+                      ]
+                    }
+                  )
+                ]
               }
             ),
-            children: filtered.map((c) => {
-              const active = c.code === selected?.code;
-              return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => {
-                    onCurrencyChange?.(c.code);
-                    setOpen(false);
-                  },
-                  className: cn(
-                    "flex w-full items-center gap-2 px-3 py-1.5 text-sm text-start hover:bg-[var(--bg-hover)]",
-                    active && "bg-[var(--bg-active)]"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(CurrencyFlag, { country: c.country }),
-                    /* @__PURE__ */ jsx("span", { className: "font-mono text-[var(--text-muted)] w-8 shrink-0 text-xs", children: c.symbol }),
-                    /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--text-primary)]", children: c.code }),
-                    /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)] truncate text-xs", children: currencyName(c, currencyNames, locale) })
-                  ]
-                }
-              ) }, c.code);
-            })
-          }
-        )
-      ] }),
+            editable && open && /* @__PURE__ */ jsx(
+              DropdownPanel,
+              {
+                anchorRef: chipRef,
+                panelRef,
+                empty: filtered.length === 0,
+                header: /* @__PURE__ */ jsx(
+                  DropdownSearchHeader,
+                  {
+                    query,
+                    onQueryChange: setQuery,
+                    inputRef,
+                    placeholder: currencyText.search
+                  }
+                ),
+                children: filtered.map((c) => {
+                  const active = c.code === selected?.code;
+                  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        onCurrencyChange?.(c.code);
+                        setOpen(false);
+                      },
+                      className: cn(
+                        "flex w-full items-center gap-2 px-3 py-1.5 text-sm text-start hover:bg-[var(--bg-hover)]",
+                        active && "bg-[var(--bg-active)]"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(CurrencyFlag, { country: c.country }),
+                        /* @__PURE__ */ jsx("span", { className: "font-mono text-[var(--text-muted)] w-8 shrink-0 text-xs", children: c.symbol }),
+                        /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--text-primary)]", children: c.code }),
+                        /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)] truncate text-xs", children: currencyName(c, currencyNames, locale) })
+                      ]
+                    }
+                  ) }, c.code);
+                })
+              }
+            )
+          ]
+        }
+      ),
+      textHint && /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1 text-[11px] leading-tight text-[var(--text-muted)]", children: hint }),
       showNumpad && /* @__PURE__ */ jsx(
         NumberPadSheet,
         {