@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/facing-pair.d.ts

@@ -1,121 +1,14 @@
-import { CSSProperties } from 'react';
-import { SeriesChartAxis } from './series-chart.js';
-import './chart-zoom.js';
-import 'recharts';
-import './series-chart-labels.js';
-import './toggle-legend.js';
-import './series-chart-ticks.js';
-import './series-chart-budget.js';
-import '../delete-account-setting-DAgGBrbn.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './write-lock.js';
-import './mini-calendar.js';
-import './calendar-heatmap.js';
-import './popover.js';
-import '../hooks/use-breakpoint.js';
-import './field-sync.js';
-import '../wizard/types.js';
-import '../tour/tour.js';
-import '../search/command-palette.js';
-import '../search/global-search.js';
-import '../search/search-index.js';
-import './month-picker.js';
-import './page-contents.js';
-import './pie-chart-labels.js';
-import './sparkline.js';
-import './signature-pad.js';
-import './password-strength.js';
-import './swatch-picker.js';
-import './tile-radio.js';
-import './icon-picker.js';
-import './dialog-frame.js';
-import './modal.js';
-import '../hooks/use-search-param-state.js';
-import './measured-grid.js';
-import './user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import './menu-item.js';
-import './floating-panel.js';
-import '../hooks/use-authed-src.js';
-import './account-settings-labels.js';
-import './bulk-action-bar.js';
-import './list.js';
-import './breadcrumbs.js';
-import './toast.js';
-import './description-list.js';
-import './line-items.js';
-import './error-boundary.js';
-import './authed-image.js';
-import './image-grid.js';
-import './lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import './account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import '../i18n/plurals.js';
-import './appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.js';
-import './reauth-dialog.js';
-import './server-wake.js';
-import '../lib/server-wake.js';
-import './translation-review-labels.js';
-import '../lib/translation-review.js';
-import './country-select.js';
-import './inline-edit-field.js';
-import '../lib/iban.js';
-import '../lib/phone.js';
-import './sign-chip.js';
-import './column-mapper.js';
-import '../lib/column-mapping.js';
-import '../lib/table-text.js';
-import './focus-ring.js';
-import './chart-height.js';
-
+import type { CSSProperties } from "react";
+import { type SeriesChartAxis } from "./series-chart.js";
 /** Which chart of a facing pair. Physical, like the axes: charts do not mirror in RTL. */
-type FacingSide = "left" | "right";
+export type FacingSide = "left" | "right";
 /** The two sides, in the order the columns stand. */
-declare const FACING_SIDES: readonly FacingSide[];
+export declare const FACING_SIDES: readonly FacingSide[];
 /** The whole band a facing y axis occupies: its ticks, and the strip the rotated title
  *  is drawn in — whether or not this chart is the one that spends it. In px at Normal:
  *  it is also the right axis' declared `width`, which the chart scales with the text
  *  (see {@link facingHeadingPad} for a heading's). */
-declare function facingBand(tickWidth?: number): number;
+export declare function facingBand(tickWidth?: number): number;
 /**
  * The y axis of one chart of a facing pair.
  *
@@ -124,7 +17,7 @@ declare function facingBand(tickWidth?: number): number;
  * the same width. Both may be pinned to one `domain` — whether they are is a statement
  * about the measurement, so it is the caller's.
  */
-declare function facingAxes({ side, title, format, tickWidth, domain, color, }: {
+export declare function facingAxes({ side, title, format, tickWidth, domain, color, }: {
     side: FacingSide;
     /** The row's quantity, with its unit. Drawn on the left chart only. */
     title: string;
@@ -141,6 +34,4 @@ declare function facingAxes({ side, title, format, tickWidth, domain, color, }:
  *  many times wider from Large up (docs/text-size-harmonization.md §10.10), so a heading
  *  passes the same factor to stay over its plot. Both sides by the same factor, as the
  *  chart does. */
-declare function facingHeadingPad(side: FacingSide, tickWidth?: number, scale?: number): Pick<CSSProperties, "paddingLeft" | "paddingRight">;
-
-export { FACING_SIDES, type FacingSide, facingAxes, facingBand, facingHeadingPad };
+export declare function facingHeadingPad(side: FacingSide, tickWidth?: number, scale?: number): Pick<CSSProperties, "paddingLeft" | "paddingRight">;

package/dist/components/facing-pair.js

@@ -1,5 +1,5 @@
 "use client";
-import { DEFAULT_Y_AXIS } from "./chart-zoom.js";
+import { DEFAULT_Y_AXIS } from "./chart-zoom-core.js";
 import { AXIS_TICK_WIDTH, axisBandWidth } from "./series-chart.js";
 const FACING_SIDES = ["left", "right"];
 function facingBand(tickWidth = AXIS_TICK_WIDTH) {

package/dist/components/facing-pair.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/facing-pair.ts"],"sourcesContent":["// Two series charts side by side that are MIRROR IMAGES of each other — the two sides\n// of a symmetric system, read against each other — and the arithmetic that keeps their\n// plots the same width. Lifted out of lenkbank, where four hand-assembled copies of\n// these rules had already drifted apart.\n//\n// The rules:\n//  * The ticks stand on the OUTSIDE: the left chart's on its left, the right chart's on\n//    its right. The two plots meet in the middle with nothing between them, and neither\n//    column of numbers stands between a picture and the one it is compared with.\n//  * The quantity is named ONCE, on the left chart; the right title would be the same\n//    words twice.\n//  * The untitled right axis still RESERVES the title's strip. Reserve only what its\n//    ticks need and its plot comes out `AXIS_TITLE_STRIP` px wider than its neighbour's\n//    — inside one shared x window, the same abscissa then lands on different pixels.\n//  * A heading sits over the PLOT, not over the column, padded by the axis band on the\n//    side that column's axis stands on.\n//\n// Only the geometry is here. The grid the pair stands in — column widths, where the\n// legend goes, the chart height — is a screen's layout, and stays with the screen.\nimport type { CSSProperties } from \"react\";\nimport { DEFAULT_Y_AXIS } from \"./chart-zoom\";\nimport { AXIS_TICK_WIDTH, axisBandWidth, type SeriesChartAxis } from \"./series-chart\";\n\n/** Which chart of a facing pair. Physical, like the axes: charts do not mirror in RTL. */\nexport type FacingSide = \"left\" | \"right\";\n\n/** The two sides, in the order the columns stand. */\nexport const FACING_SIDES: readonly FacingSide[] = [\"left\", \"right\"];\n\n/** The whole band a facing y axis occupies: its ticks, and the strip the rotated title\n *  is drawn in — whether or not this chart is the one that spends it. In px at Normal:\n *  it is also the right axis' declared `width`, which the chart scales with the text\n *  (see {@link facingHeadingPad} for a heading's). */\nexport function facingBand(tickWidth: number = AXIS_TICK_WIDTH): number {\n  return axisBandWidth(tickWidth, true);\n}\n\n/**\n * The y axis of one chart of a facing pair.\n *\n * The left one carries the row's quantity and the ticks' own width; the right one has\n * no title, stands on the right and reserves the whole band, so the two plots come out\n * the same width. Both may be pinned to one `domain` — whether they are is a statement\n * about the measurement, so it is the caller's.\n */\nexport function facingAxes({\n  side,\n  title,\n  format,\n  tickWidth = AXIS_TICK_WIDTH,\n  domain,\n  color,\n}: {\n  side: FacingSide;\n  /** The row's quantity, with its unit. Drawn on the left chart only. */\n  title: string;\n  format?: (value: number) => string;\n  tickWidth?: number;\n  domain?: [number, number];\n  color?: string;\n}): SeriesChartAxis[] {\n  if (side === \"right\") {\n    return [\n      {\n        id: DEFAULT_Y_AXIS,\n        orientation: \"right\",\n        width: facingBand(tickWidth),\n        title: \"\",\n        format,\n        domain,\n        color,\n      },\n    ];\n  }\n  return [{ id: DEFAULT_Y_AXIS, width: tickWidth, title, format, domain, color }];\n}\n\n/** What a column heading is padded by to sit over the PLOT rather than the column: the\n *  axis band, on the side that column's axis stands on. Physical padding on purpose —\n *  the chart under it does not flip in RTL, so neither may the heading's offset.\n *\n *  `scale` is the text size's (`useTextSize().scale`): the chart draws its bands that\n *  many times wider from Large up (docs/text-size-harmonization.md §10.10), so a heading\n *  passes the same factor to stay over its plot. Both sides by the same factor, as the\n *  chart does. */\nexport function facingHeadingPad(\n  side: FacingSide,\n  tickWidth: number = AXIS_TICK_WIDTH,\n  scale = 1,\n): Pick<CSSProperties, \"paddingLeft\" | \"paddingRight\"> {\n  const band = axisBandWidth(tickWidth, true, scale);\n  return side === \"left\" ? { paddingLeft: band } : { paddingRight: band };\n}\n"],"mappings":";AAoBA,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB,qBAA2C;AAM9D,MAAM,eAAsC,CAAC,QAAQ,OAAO;AAM5D,SAAS,WAAW,YAAoB,iBAAyB;AACtE,SAAO,cAAc,WAAW,IAAI;AACtC;AAUO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAQsB;AACpB,MAAI,SAAS,SAAS;AACpB,WAAO;AAAA,MACL;AAAA,QACE,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,OAAO,WAAW,SAAS;AAAA,QAC3B,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO,CAAC,EAAE,IAAI,gBAAgB,OAAO,WAAW,OAAO,QAAQ,QAAQ,MAAM,CAAC;AAChF;AAUO,SAAS,iBACd,MACA,YAAoB,iBACpB,QAAQ,GAC6C;AACrD,QAAM,OAAO,cAAc,WAAW,MAAM,KAAK;AACjD,SAAO,SAAS,SAAS,EAAE,aAAa,KAAK,IAAI,EAAE,cAAc,KAAK;AACxE;","names":[]}
+{"version":3,"sources":["../../src/components/facing-pair.ts"],"sourcesContent":["// Two series charts side by side that are MIRROR IMAGES of each other — the two sides\n// of a symmetric system, read against each other — and the arithmetic that keeps their\n// plots the same width. Lifted out of lenkbank, where four hand-assembled copies of\n// these rules had already drifted apart.\n//\n// The rules:\n//  * The ticks stand on the OUTSIDE: the left chart's on its left, the right chart's on\n//    its right. The two plots meet in the middle with nothing between them, and neither\n//    column of numbers stands between a picture and the one it is compared with.\n//  * The quantity is named ONCE, on the left chart; the right title would be the same\n//    words twice.\n//  * The untitled right axis still RESERVES the title's strip. Reserve only what its\n//    ticks need and its plot comes out `AXIS_TITLE_STRIP` px wider than its neighbour's\n//    — inside one shared x window, the same abscissa then lands on different pixels.\n//  * A heading sits over the PLOT, not over the column, padded by the axis band on the\n//    side that column's axis stands on.\n//\n// Only the geometry is here. The grid the pair stands in — column widths, where the\n// legend goes, the chart height — is a screen's layout, and stays with the screen.\nimport type { CSSProperties } from \"react\";\nimport { DEFAULT_Y_AXIS } from \"./chart-zoom-core\";\nimport { AXIS_TICK_WIDTH, axisBandWidth, type SeriesChartAxis } from \"./series-chart\";\n\n/** Which chart of a facing pair. Physical, like the axes: charts do not mirror in RTL. */\nexport type FacingSide = \"left\" | \"right\";\n\n/** The two sides, in the order the columns stand. */\nexport const FACING_SIDES: readonly FacingSide[] = [\"left\", \"right\"];\n\n/** The whole band a facing y axis occupies: its ticks, and the strip the rotated title\n *  is drawn in — whether or not this chart is the one that spends it. In px at Normal:\n *  it is also the right axis' declared `width`, which the chart scales with the text\n *  (see {@link facingHeadingPad} for a heading's). */\nexport function facingBand(tickWidth: number = AXIS_TICK_WIDTH): number {\n  return axisBandWidth(tickWidth, true);\n}\n\n/**\n * The y axis of one chart of a facing pair.\n *\n * The left one carries the row's quantity and the ticks' own width; the right one has\n * no title, stands on the right and reserves the whole band, so the two plots come out\n * the same width. Both may be pinned to one `domain` — whether they are is a statement\n * about the measurement, so it is the caller's.\n */\nexport function facingAxes({\n  side,\n  title,\n  format,\n  tickWidth = AXIS_TICK_WIDTH,\n  domain,\n  color,\n}: {\n  side: FacingSide;\n  /** The row's quantity, with its unit. Drawn on the left chart only. */\n  title: string;\n  format?: (value: number) => string;\n  tickWidth?: number;\n  domain?: [number, number];\n  color?: string;\n}): SeriesChartAxis[] {\n  if (side === \"right\") {\n    return [\n      {\n        id: DEFAULT_Y_AXIS,\n        orientation: \"right\",\n        width: facingBand(tickWidth),\n        title: \"\",\n        format,\n        domain,\n        color,\n      },\n    ];\n  }\n  return [{ id: DEFAULT_Y_AXIS, width: tickWidth, title, format, domain, color }];\n}\n\n/** What a column heading is padded by to sit over the PLOT rather than the column: the\n *  axis band, on the side that column's axis stands on. Physical padding on purpose —\n *  the chart under it does not flip in RTL, so neither may the heading's offset.\n *\n *  `scale` is the text size's (`useTextSize().scale`): the chart draws its bands that\n *  many times wider from Large up (docs/text-size-harmonization.md §10.10), so a heading\n *  passes the same factor to stay over its plot. Both sides by the same factor, as the\n *  chart does. */\nexport function facingHeadingPad(\n  side: FacingSide,\n  tickWidth: number = AXIS_TICK_WIDTH,\n  scale = 1,\n): Pick<CSSProperties, \"paddingLeft\" | \"paddingRight\"> {\n  const band = axisBandWidth(tickWidth, true, scale);\n  return side === \"left\" ? { paddingLeft: band } : { paddingRight: band };\n}\n"],"mappings":";AAoBA,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB,qBAA2C;AAM9D,MAAM,eAAsC,CAAC,QAAQ,OAAO;AAM5D,SAAS,WAAW,YAAoB,iBAAyB;AACtE,SAAO,cAAc,WAAW,IAAI;AACtC;AAUO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAQsB;AACpB,MAAI,SAAS,SAAS;AACpB,WAAO;AAAA,MACL;AAAA,QACE,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,OAAO,WAAW,SAAS;AAAA,QAC3B,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO,CAAC,EAAE,IAAI,gBAAgB,OAAO,WAAW,OAAO,QAAQ,QAAQ,MAAM,CAAC;AAChF;AAUO,SAAS,iBACd,MACA,YAAoB,iBACpB,QAAQ,GAC6C;AACrD,QAAM,OAAO,cAAc,WAAW,MAAM,KAAK;AACjD,SAAO,SAAS,SAAS,EAAE,aAAa,KAAK,IAAI,EAAE,cAAc,KAAK;AACxE;","names":[]}

package/dist/components/field-base.d.ts

@@ -0,0 +1,255 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { type FieldHintParts } from "./field-parts.js";
+import { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from "./ui-labels.js";
+/**
+ * The field base: what Input, Select and Textarea — and every kit field built on the same
+ * look — share (0.34, MOD-2, refactor audit 2026-10). The `FIELD_*` classes, the floating
+ * label and its `FloatingField` box, `Label`, the chevron, and the words of the password
+ * reveal and the character counter. The message under a wrong field is field-parts'
+ * `useFieldError`, every field's.
+ *
+ * Public through ./ui by name. `FieldGroup`, the counter and the placeholder helpers are
+ * the three fields' shared parts (`@internal`).
+ */
+/**
+ * The 16 px floor on touch (docs/text-size-harmonization.md §10.1). iOS zooms the page
+ * when a field under 16 px takes focus, and keksdose's `maximum-scale=1` — which stopped
+ * it — goes so pinch zoom works again (WCAG 1.4.4). A zoomed page drops the keyboard
+ * inset to 0 (§10.2), so the zoom would put a pinned editor footer behind the keyboard
+ * (keksdose #154). So on a coarse pointer a field is at least 16 px, at every text size:
+ * `max()` leaves Large and Extra large alone, where `text-sm` is already 17.5 / 21 px.
+ *
+ * In px on purpose: the threshold is the browser's, in CSS px, whatever the root size.
+ * Font size only — the line height keeps `text-sm`'s ratio. Part of {@link FIELD_BASE};
+ * add it to any other text-entry control whose type is below 16 px.
+ */
+export declare const FIELD_TOUCH_TEXT = "pointer-coarse:text-[length:max(0.875rem,16px)]";
+export 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. */
+export declare const FIELD_WRITABLE_LOOK = "[&[readonly]]:bg-surface [&[readonly]]:text-primary";
+export declare const FIELD_FLOATING_PAD = "pt-4 pb-1 large:py-2";
+export declare const FIELD_INVALID = "border-danger-strong ring-1 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]";
+export declare const FLOATING_INPUT_CLASS: string;
+/**
+ * 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 in the
+ * phone layout (`usePhoneLayout()`, `max-md:` at the text size in force) 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. On focus the
+ *    line is doubled inward by an inset shadow on that edge alone — FIELD_BASE's
+ *    inset ring, for the same reason (K5 follow-up: a 1px line reads half-strength at
+ *    125 %) — where a ring would draw a box round the figure.
+ *  - 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.
+ */
+export declare const FIELD_DISPLAY = "block w-full border-x-0 border-t-0 border-b border-subtle bg-transparent px-0 pt-0 pb-1 text-primary shadow-none placeholder:text-placeholder focus:border-brand focus:shadow-[inset_0_-1px_0_var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60";
+export 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. */
+export type FieldChevronProps = Omit<ComponentPropsWithRef<"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. */
+export declare function FieldChevron({ className, ...rest }: FieldChevronProps): import("react").JSX.Element;
+export declare const FLOATING_LABEL_CLASS: 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.
+ */
+export interface FloatingFieldProps extends ComponentPropsWithRef<"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;
+}
+export declare function FloatingField({ className, htmlFor, label, staticLabel, srOnlyLabel, hint, children, ...rest }: FloatingFieldProps): import("react").JSX.Element;
+export interface LabelProps extends ComponentPropsWithRef<"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.
+ */
+export declare function Label({ required, size, disabled, className, children, ...rest }: LabelProps): import("react").JSX.Element;
+/**
+ * @internal A field and its message as one box.
+ *
+ * The message cannot go INSIDE the field's own `relative` box. The password reveal
+ * toggle is `inset-y-0` and the select chevron is `top-1/2`, so both centre on
+ * whatever that box contains — put two lines of message in it and the chevron drifts
+ * down out of the field, between the value and the text. So the field keeps its box
+ * and this wraps the pair.
+ *
+ * WHEN IT WRAPS. A field that never takes `error` renders nothing of its own here,
+ * which is what keeps the prop additive: it is exactly the DOM it was before the prop
+ * existed, down to the bare `<input>` an unlabelled {@link Input} drops straight into a
+ * caller's flex row. A field that DOES take `error` — the key is passed, whatever its
+ * value — is wrapped for as long as it is mounted, message or not (`reserve`).
+ *
+ * It used to wrap only while a message showed, and that cost the control its
+ * identity: a fragment and a `<div>` are different elements at the same spot in the
+ * tree, so React threw the `<input>` away and mounted a new one every time the message
+ * came or went. Focus fell to `<body>`, the caret went with it, and an uncontrolled
+ * field lost what had been typed — Kurvenschmiede's confirm-password dialog clears its
+ * "Wrong password" on change, so the first keystroke of the retry dropped the user out
+ * of the field. Keeping the box stops that; the field is never reparented.
+ *
+ * The other ways to keep it stable were worse. A box on EVERY field changes what every
+ * flex row and grid in three apps lays out (`flex-1`, `w-56`, `col-span-2` on the
+ * field would land on a child of the item instead of the item). A `display: contents`
+ * box would keep the flex/grid item, but a contents box takes no margin, so a parent's
+ * `space-y-*` stops spacing the field — the shape of Kurvenschmiede's reset-password
+ * form and gear wizard, both `space-y-*` stacks of fields with `error` — and it moves
+ * `first:`/`last:`/`> *` matches. A field passing `error` already took this plain box
+ * whenever its message showed, so what changes is only that it keeps it while none
+ * does; every such call site in the three apps sits in a block or a `space-y`/grid
+ * stack where a full-width block box is the field's own size. The case it does change
+ * is a field passing `error` whose `className` sizes it as a flex item (`flex-1` in a
+ * row): that caller already lost the sizing while a message showed, and now sees the
+ * same box without one. Pass `error` only where a message can actually appear.
+ *
+ * `className` is NOT moved out here, for the same reason — it goes on the field, as it
+ * always has, so the box cannot silently change what that prop styles.
+ */
+export declare function FieldGroup({ errorEl, reserve, children, }: {
+    errorEl: ReactNode;
+    /** The caller passed `error`: keep the box even while there is no message. */
+    reserve?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The two names the password reveal toggle can wear. See {@link Input}. */
+export interface PasswordRevealLabels {
+    /** While the value is hidden — activating the toggle will show it. */
+    show: string;
+    /** While the value is shown. */
+    hide: string;
+}
+export { DEFAULT_PASSWORD_REVEAL_LABELS };
+/**
+ * What the character counter of {@link Input} and {@link Textarea} (`showCount`) says.
+ * The visible "12/80" is digits and a slash and is not translated; these are the words
+ * a screen reader gets instead of it.
+ */
+export interface CharacterCountLabels {
+    /** The counter as part of the field's description, read when focus reaches the
+     *  field: "12 of 80 characters". */
+    count: (used: number, max: number) => string;
+    /** Said once, politely, on entering the last stretch before the limit: "8
+     *  characters left". */
+    remaining: (left: number) => string;
+    /** Said once, politely, on reaching the limit. */
+    limitReached: string;
+}
+export { DEFAULT_CHARACTER_COUNT_LABELS };
+/** @internal The counter's length: the controlled `value`'s, else what the field has been typed
+ *  to (from `defaultValue` on). `track` is called from the field's change handler. */
+export declare function useTypedLength(value: unknown, defaultValue: unknown): {
+    used: number;
+    track: (text: string) => void;
+};
+/**
+ * @internal The live "12/80" under a field with `showCount` (keksdose K11: the admin broadcast,
+ * support replies, canned replies and the handoff note each counted by hand, and one
+ * announced every keystroke).
+ *
+ * Three channels, each saying only what it should:
+ *  - the digits, `aria-hidden` — "12 slash 80" is not a sentence;
+ *  - a `hidden` "12 of 80 characters" on the field's `aria-describedby`, so the count is
+ *    read with the field when focus reaches it, and never while typing;
+ *  - a polite live region that speaks ONCE per stretch: on entering the last tenth
+ *    ("8 characters left") and on reaching the limit. A region that changed on every
+ *    keystroke would talk over the user's own typing echo for the whole message.
+ *    Nothing is said on mount: a stored note already near its limit is not news.
+ */
+export declare function CharacterCount({ id, used, max, labels, caption, }: {
+    id: string;
+    used: number;
+    max: number;
+    labels: CharacterCountLabels;
+    caption: ReactNode;
+}): import("react").JSX.Element;
+/** @internal What goes under a text field: the caption (beside the counter, when there is one),
+ *  then the error. `null` when there is nothing, so a field with none keeps exactly the
+ *  DOM it had (see {@link FieldGroup}). */
+export declare function fieldBelow(hint: FieldHintParts, counter: ReactNode, errorEl: ReactNode): ReactNode;
+/**
+ * @internal kastlan 8: a caller's placeholder on a LABELLED field, shown once the label has
+ * floated out of its way — on focus — and transparent until then, while the label sits
+ * where the placeholder would be. Without it the field forced `placeholder=" "` for the
+ * float trick and dropped the caller's text without a word (kastlan's "note" field lost
+ * its hint). `:placeholder-shown` still drives the float: it matches an empty field
+ * whatever the placeholder's text is.
+ */
+export declare const FLOATING_PLACEHOLDER_ON_FOCUS = "focus:placeholder:text-placeholder";
+/** @internal A placeholder with something to show. `""` and blanks are the float trick's own
+ *  `" "`, never the caller's hint. */
+export declare const hasPlaceholderText: (placeholder: string | undefined) => placeholder is string;
+/** @internal The counter's words: the `characterCount` namespace — prop > `<UiKitProvider
+ *  labels>` > English. One place, so the namespace is named once. */
+export declare function useCharacterCountLabels(prop: Partial<CharacterCountLabels> | undefined): CharacterCountLabels;

package/dist/components/field-base.js

@@ -0,0 +1,223 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import {
+  FieldCaption,
+  FLOATING_LABEL_STATIC,
+  LABEL_ABOVE_AT_LARGE,
+  LABEL_ABOVE_BOX,
+  STATIC_LABEL_TYPE
+} from "./field-parts.js";
+import { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from "./ui-labels.js";
+const FIELD_TOUCH_TEXT = "pointer-coarse:text-[length:max(0.875rem,16px)]";
+const FIELD_BASE = "block w-full rounded-md border border-subtle bg-surface px-3 py-2 text-sm text-primary shadow-sm placeholder:text-placeholder focus:border-brand focus:ring-1 focus:ring-inset focus:ring-brand " + // §10.1: at least 16 px on a touch screen, or iOS zooms the page on focus.
+FIELD_TOUCH_TEXT + " disabled:cursor-default disabled:bg-surface-2 disabled:text-muted [&[readonly]]:bg-surface-2 [&[readonly]]:text-muted";
+const FIELD_WRITABLE_LOOK = "[&[readonly]]:bg-surface [&[readonly]]:text-primary";
+const FIELD_FLOATING_PAD = "pt-4 pb-1 large:py-2";
+const FIELD_INVALID = "border-danger-strong ring-1 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]";
+const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, "peer placeholder:text-transparent");
+const FIELD_DISPLAY = "block w-full border-x-0 border-t-0 border-b border-subtle bg-transparent px-0 pt-0 pb-1 text-primary shadow-none placeholder:text-placeholder focus:border-brand focus:shadow-[inset_0_-1px_0_var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60";
+const FIELD_TRIGGER = cn(
+  FIELD_BASE,
+  "relative flex items-center justify-between gap-2 text-start hover:bg-hover",
+  "[&>:first-child]:min-h-[1lh]"
+);
+function FieldChevron({ className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    ChevronDown,
+    {
+      ...rest,
+      "aria-hidden": true,
+      className: cn(
+        "pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder",
+        className
+      )
+    }
+  );
+}
+const LABEL_FLOATED_AT_LARGE = "large:text-caption large:leading-tight large:text-secondary large:transition-none";
+const FLOATING_LABEL_CLASS = cn(
+  "pointer-events-none absolute start-3 top-2.5 text-sm text-placeholder transition-all",
+  "max-w-[calc(100%-1.5rem)] truncate-until-large",
+  "peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary",
+  "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary",
+  "peer-disabled:opacity-50",
+  LABEL_ABOVE_AT_LARGE,
+  "large:block",
+  LABEL_FLOATED_AT_LARGE
+);
+const FLOATING_ROW_CLASS = cn(
+  "pointer-events-none absolute start-3 top-2.5 flex items-center gap-1 transition-all",
+  "max-w-[calc(100%-3rem)] text-sm text-placeholder",
+  "peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary",
+  "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary",
+  "peer-disabled:opacity-50",
+  LABEL_ABOVE_AT_LARGE,
+  LABEL_FLOATED_AT_LARGE
+);
+const STATIC_ROW_CLASS = cn("pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1", LABEL_ABOVE_AT_LARGE);
+function FloatingField({
+  className,
+  htmlFor,
+  label,
+  staticLabel,
+  srOnlyLabel,
+  hint,
+  children,
+  ...rest
+}) {
+  const withHint = hint !== void 0 && !srOnlyLabel;
+  const atEnd = withHint && staticLabel;
+  const above = label !== void 0 && !srOnlyLabel;
+  const labelEl = label !== void 0 && /* @__PURE__ */ jsx(
+    "label",
+    {
+      htmlFor,
+      "data-field-label": above && !withHint ? "" : void 0,
+      className: srOnlyLabel ? "sr-only" : atEnd ? cn("pointer-events-none min-w-0 truncate-until-large", STATIC_LABEL_TYPE) : withHint ? "pointer-events-none min-w-0 truncate-until-large" : staticLabel ? FLOATING_LABEL_STATIC : FLOATING_LABEL_CLASS,
+      children: label
+    }
+  );
+  return (
+    // `relative` is the whole contract of this wrapper — the floating label and every
+    // control that hangs off it (a reveal toggle, a chevron) are positioned against
+    // this box — so it is merged through `cn` after the spread rather than left where
+    // a caller's stray `className` or `style` could unset it. At Large, with a label
+    // above, a grid: the label's row over the field's, the field's parts in the latter.
+    /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative", above && LABEL_ABOVE_BOX, className), children: [
+      children,
+      withHint ? (
+        // Static: `inset-x-3` rather than `start-3`, so a long label truncates at
+        // the field's own end padding instead of running under the chevron.
+        // Animated: the row floats with the label and is only as wide as it needs
+        // to be. Either way the hint keeps its width (`shrink-0`) and the label
+        // is the one that gives way.
+        /* @__PURE__ */ jsxs("div", { "data-field-label": "", className: atEnd ? STATIC_ROW_CLASS : FLOATING_ROW_CLASS, children: [
+          labelEl,
+          /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
+        ] })
+      ) : labelEl
+    ] })
+  );
+}
+function Label({ required, size = "md", disabled, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ...rest,
+      className: cn(
+        "inline-flex items-center gap-0.5 font-medium leading-none text-primary",
+        size === "sm" ? "text-xs" : "text-sm",
+        disabled && "cursor-default opacity-50",
+        className
+      ),
+      children: [
+        children,
+        required && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-danger", children: "*" })
+      ]
+    }
+  );
+}
+function FieldGroup({
+  errorEl,
+  reserve = false,
+  children
+}) {
+  if (errorEl === null && !reserve) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    children,
+    errorEl
+  ] });
+}
+function textLength(value) {
+  return value === void 0 || value === null ? 0 : String(value).length;
+}
+function useTypedLength(value, defaultValue) {
+  const [typed, setTyped] = useState(() => textLength(defaultValue));
+  return { used: value !== void 0 ? textLength(value) : typed, track: (text) => setTyped(text.length) };
+}
+function nearLimitAt(max) {
+  return Math.min(20, Math.max(1, Math.ceil(max * 0.1)));
+}
+function countZone(used, max) {
+  if (used >= max) return "limit";
+  return max - used <= nearLimitAt(max) ? "near" : "ok";
+}
+function CharacterCount({
+  id,
+  used,
+  max,
+  labels,
+  caption
+}) {
+  const zone = countZone(used, max);
+  const [said, setSaid] = useState({ zone, text: "" });
+  if (said.zone !== zone) {
+    setSaid({
+      zone,
+      text: zone === "near" ? labels.remaining(max - used) : zone === "limit" ? labels.limitReached : ""
+    });
+  }
+  return (
+    // `relative` holds the sr-only region (see sr-only-containment.test).
+    /* @__PURE__ */ jsxs("div", { className: "relative mt-1 flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: caption }),
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "shrink-0 text-caption leading-tight tabular-nums",
+            zone === "limit" ? "text-danger" : zone === "near" ? "text-warning" : "text-muted"
+          ),
+          children: [
+            used,
+            "/",
+            max
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { id, hidden: true, children: labels.count(used, max) }),
+      /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: said.text })
+    ] })
+  );
+}
+function fieldBelow(hint, counter, errorEl) {
+  if (counter === null && hint.captionText === void 0 && errorEl === null) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    counter ?? /* @__PURE__ */ jsx(FieldCaption, { parts: hint }),
+    errorEl
+  ] });
+}
+const FLOATING_PLACEHOLDER_ON_FOCUS = "focus:placeholder:text-placeholder";
+const hasPlaceholderText = (placeholder) => placeholder !== void 0 && placeholder.trim() !== "";
+function useCharacterCountLabels(prop) {
+  return useKitLabels("characterCount", DEFAULT_CHARACTER_COUNT_LABELS, prop);
+}
+export {
+  CharacterCount,
+  DEFAULT_CHARACTER_COUNT_LABELS,
+  DEFAULT_PASSWORD_REVEAL_LABELS,
+  FIELD_BASE,
+  FIELD_DISPLAY,
+  FIELD_FLOATING_PAD,
+  FIELD_INVALID,
+  FIELD_TOUCH_TEXT,
+  FIELD_TRIGGER,
+  FIELD_WRITABLE_LOOK,
+  FLOATING_INPUT_CLASS,
+  FLOATING_LABEL_CLASS,
+  FLOATING_PLACEHOLDER_ON_FOCUS,
+  FieldChevron,
+  FieldGroup,
+  FloatingField,
+  Label,
+  fieldBelow,
+  hasPlaceholderText,
+  useCharacterCountLabels,
+  useTypedLength
+};
+//# sourceMappingURL=field-base.js.map