@eifi1/ui-kit 0.21.0 → 0.23.0

package/dist/components/trigger-aria.js

@@ -6,6 +6,7 @@ function splitTriggerAria(props) {
     "aria-labelledby": labelledBy,
     "aria-describedby": describedBy,
     "aria-invalid": invalid,
+    "aria-required": required,
     ...rest
   } = props;
   return [
@@ -14,7 +15,8 @@ function splitTriggerAria(props) {
       "aria-label": label,
       "aria-labelledby": labelledBy,
       "aria-describedby": describedBy,
-      "aria-invalid": invalid
+      "aria-invalid": invalid,
+      "aria-required": required
     },
     rest
   ];

package/dist/components/trigger-aria.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/trigger-aria.ts"],"sourcesContent":["// Internal — not re-exported from the barrel. Shared by the pickers whose trigger is\n// a `role=\"combobox\"` button inside a wrapper: DatePicker, DateRangePicker, MonthPicker.\n\n/**\n * The attributes that NAME or DESCRIBE a field, which belong on its trigger — the\n * element a `<label htmlFor>`, a form library's control slot or an error message has\n * to reach. They used to land on the wrapper `<div>` with the rest of the caller's\n * props, so an external label named nothing and a form library's `aria-describedby`\n * pointed a screen reader at an element with no role (kastlan, 0.5.0).\n */\nexport interface TriggerAria {\n  id?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\";\n}\n\n/** Split a field's props into what its trigger takes and what its wrapper takes. */\nexport function splitTriggerAria<T extends TriggerAria>(\n  props: T,\n): [TriggerAria, Omit<T, keyof TriggerAria>] {\n  const {\n    id,\n    \"aria-label\": label,\n    \"aria-labelledby\": labelledBy,\n    \"aria-describedby\": describedBy,\n    \"aria-invalid\": invalid,\n    ...rest\n  } = props;\n  return [\n    {\n      id,\n      \"aria-label\": label,\n      \"aria-labelledby\": labelledBy,\n      \"aria-describedby\": describedBy,\n      \"aria-invalid\": invalid,\n    },\n    rest,\n  ];\n}\n\n"],"mappings":";AAmBO,SAAS,iBACd,OAC2C;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,GAAG;AAAA,EACL,IAAI;AACJ,SAAO;AAAA,IACL;AAAA,MACE;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,gBAAgB;AAAA,IAClB;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/components/trigger-aria.ts"],"sourcesContent":["// Internal — not re-exported from the barrel. Shared by the pickers whose trigger is\n// a `role=\"combobox\"` button inside a wrapper: DatePicker, DateRangePicker, MonthPicker.\n\n/**\n * The attributes that NAME or DESCRIBE a field, which belong on its trigger — the\n * element a `<label htmlFor>`, a form library's control slot or an error message has\n * to reach. They used to land on the wrapper `<div>` with the rest of the caller's\n * props, so an external label named nothing and a form library's `aria-describedby`\n * pointed a screen reader at an element with no role (kastlan, 0.5.0).\n */\nexport interface TriggerAria {\n  id?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\";\n  /** 0.23.0: a form library's `required` (RhfMonthPicker) is announced on the trigger,\n   *  not lost on the wrapper. */\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n}\n\n/** Split a field's props into what its trigger takes and what its wrapper takes. */\nexport function splitTriggerAria<T extends TriggerAria>(\n  props: T,\n): [TriggerAria, Omit<T, keyof TriggerAria>] {\n  const {\n    id,\n    \"aria-label\": label,\n    \"aria-labelledby\": labelledBy,\n    \"aria-describedby\": describedBy,\n    \"aria-invalid\": invalid,\n    \"aria-required\": required,\n    ...rest\n  } = props;\n  return [\n    {\n      id,\n      \"aria-label\": label,\n      \"aria-labelledby\": labelledBy,\n      \"aria-describedby\": describedBy,\n      \"aria-invalid\": invalid,\n      \"aria-required\": required,\n    },\n    rest,\n  ];\n}\n\n"],"mappings":";AAsBO,SAAS,iBACd,OAC2C;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,IAAI;AACJ,SAAO;AAAA,IACL;AAAA,MACE;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,IACnB;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/components/ui.d.ts

@@ -1,14 +1,19 @@
 import 'react';
 import './tooltip.js';
-export { B as Button, a as ButtonClassesOptions, b as ButtonLinkProps, c as ButtonProps, d as ButtonSize, e as ButtonTone, f as ButtonVariant, g as Card, h as CardAction, i as CardActionProps, j as CardContent, k as CardContentProps, l as CardDensity, m as CardDescription, n as CardDescriptionProps, o as CardFooter, p as CardFooterProps, q as CardHeader, r as CardHeaderProps, s as CardProps, t as CardTitle, u as CardTitleLevel, v as CardTitleProps, w as CardTone, S as DEFAULT_PASSWORD_REVEAL_LABELS, W as DEFAULT_TABS_LABELS, Z as EmptyState, _ as EmptyStateProps, $ as FIELD_BASE, a0 as FIELD_DISPLAY, a1 as FIELD_FLOATING_PAD, a2 as FIELD_INVALID, a3 as FIELD_TRIGGER, a4 as FIELD_WRITABLE_LOOK, a5 as FLOATING_INPUT_CLASS, a6 as FLOATING_LABEL_CLASS, a7 as FLOATING_LABEL_STATIC, a8 as FieldChevron, a9 as FieldChevronProps, aa as FieldHint, ab as FieldHintProps, ac as FieldLabel, ad as FieldLabelProps, al as FloatingField, am as FloatingFieldProps, av as IconButton, aw as IconButtonGlyphSize, ax as IconButtonLinkProps, ay as IconButtonProps, az as IconButtonSize, aA as IconButtonTone, aB as IconButtonToneColor, aC as IconButtonVariant, aD as Input, aE as InputProps, aH as Label, aJ as LabelProps, aL as PHONE_QUERY, aM as PasswordRevealLabels, aP as Select, aQ as SelectProps, b1 as Spinner, b2 as SpinnerProps, b4 as TabItem, b5 as Tabs, b6 as TabsLabels, b7 as TabsProps, b8 as Textarea, b9 as TextareaProps, bh as buttonClasses, bl as resolvePasswordRevealLabels } from '../kit-labels-D1J2_jyD.js';
+export { B as Button, a as ButtonClassesOptions, b as ButtonLinkProps, c as ButtonProps, d as ButtonSize, e as ButtonTone, f as ButtonVariant, g as Card, h as CardAction, i as CardActionProps, j as CardContent, k as CardContentProps, l as CardDensity, m as CardDescription, n as CardDescriptionProps, o as CardFooter, p as CardFooterProps, q as CardHeader, r as CardHeaderProps, s as CardProps, t as CardTitle, u as CardTitleLevel, v as CardTitleProps, w as CardTone, x as CharacterCountLabels, X as DEFAULT_CHARACTER_COUNT_LABELS, aa as DEFAULT_PASSWORD_REVEAL_LABELS, af as DEFAULT_TABS_LABELS, an as EmptyState, ao as EmptyStateProps, ap as FIELD_BASE, aq as FIELD_DISPLAY, ar as FIELD_FLOATING_PAD, as as FIELD_INVALID, at as FIELD_TRIGGER, au as FIELD_WRITABLE_LOOK, av as FLOATING_INPUT_CLASS, aw as FLOATING_LABEL_CLASS, aJ as FieldChevron, aK as FieldChevronProps, aL as FieldHint, aM as FieldHintProps, aU as FloatingField, aV as FloatingFieldProps, b6 as IconButton, b7 as IconButtonGlyphSize, b8 as IconButtonLinkProps, b9 as IconButtonProps, ba as IconButtonSize, bb as IconButtonTone, bc as IconButtonToneColor, bd as IconButtonVariant, be as Input, bf as InputProps, bk as Label, bm as LabelProps, bo as PHONE_QUERY, bp as PasswordRevealLabels, bv as Select, bw as SelectProps, bJ as Spinner, bK as SpinnerProps, bM as TabItem, bN as Tabs, bO as TabsLabels, bP as TabsProps, bQ as Textarea, bR as TextareaProps, c1 as buttonClasses, c5 as resolvePasswordRevealLabels } from '../feedback-BxeQVzwq.js';
+export { FLOATING_LABEL_STATIC, FieldLabel, FieldLabelProps } from './field-parts.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import './data-table-labels.js';
+import '../feedback-attachment-fGAzZPf0.js';
+import '../feedback/feedback-inbox.js';
+import 'lucide-react';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import './chip.js';
-import 'lucide-react';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -23,7 +28,6 @@ import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
-import './danger-confirm.js';
 import './swatch-picker.js';
 import './tile-radio.js';
 import './icon-picker.js';
@@ -31,11 +35,7 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback-attachment-WFiXJ8We.js';
-import '../feedback/feedback-thread.js';
-import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
-import './confirm-dialog.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
 import './list.js';
@@ -54,11 +54,16 @@ import './write-lock.js';
 import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
-import '../data-table-3mi2R3so.js';
-import './data-table-sort.js';
-import './swipeable-row.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';

package/dist/components/ui.js

@@ -10,6 +10,17 @@ import { Tooltip } from "./tooltip.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels.js";
 import { pickLinkRenderer, replacingClick, routerLinkNavigation } from "./text-link.js";
 import { useCommitReason } from "./write-lock.js";
+import { mergeDescribedBy } from "./choice-parts.js";
+import {
+  EndHintRow,
+  FieldCaption,
+  LockedReason,
+  useFieldHint,
+  useLockReason,
+  FLOATING_LABEL_STATIC,
+  STATIC_LABEL_TYPE
+} from "./field-parts.js";
+import { FieldLabel, FLOATING_LABEL_STATIC as FLOATING_LABEL_STATIC2 } from "./field-parts.js";
 const BUTTON_BASE = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
 const BUTTON_SIZES = {
   md: "gap-2 px-3 py-2 text-sm",
@@ -640,12 +651,6 @@ const FLOATING_ROW_CLASS = cn(
   "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-[var(--text-secondary)]",
   "peer-disabled:opacity-50"
 );
-const STATIC_LABEL_TYPE = "text-[11px] leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
-const FLOATING_LABEL_STATIC = cn(
-  "pointer-events-none absolute start-3 top-1",
-  STATIC_LABEL_TYPE,
-  "max-w-[calc(100%-1.5rem)] truncate"
-);
 function FloatingField({
   className,
   htmlFor,
@@ -715,9 +720,6 @@ function FieldHint({
     }
   ) });
 }
-function FieldLabel({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx("span", { ...rest, className: cn(FLOATING_LABEL_STATIC, "z-10", className), children });
-}
 function Label({ required, size = "md", disabled, className, children, ...rest }) {
   return /* @__PURE__ */ jsxs(
     "label",
@@ -766,7 +768,77 @@ function resolvePasswordRevealLabels(partial) {
   if (!partial) return DEFAULT_PASSWORD_REVEAL_LABELS;
   return { ...DEFAULT_PASSWORD_REVEAL_LABELS, ...partial };
 }
+const DEFAULT_CHARACTER_COUNT_LABELS = {
+  count: (used, max) => `${used} of ${max} characters`,
+  remaining: (left) => left === 1 ? "1 character left" : `${left} characters left`,
+  limitReached: "Character limit reached"
+};
+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-[11px] leading-tight tabular-nums",
+            zone === "limit" ? "text-[var(--danger)]" : zone === "near" ? "text-[var(--warning)]" : "text-[var(--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-[var(--text-placeholder)]";
+const hasPlaceholderText = (placeholder) => placeholder !== void 0 && placeholder.trim() !== "";
 const PICKER_TYPES = /* @__PURE__ */ new Set(["date", "datetime-local", "month", "time", "week"]);
+function useCharacterCountLabels(prop) {
+  return useKitLabels("characterCount", DEFAULT_CHARACTER_COUNT_LABELS, prop);
+}
 const Input = forwardRef(function Input2(props, ref) {
   const {
     className,
@@ -778,18 +850,43 @@ const Input = forwardRef(function Input2(props, ref) {
     variant = "field",
     invalid,
     error,
+    hint,
+    showCount,
+    countLabels,
     passwordLabels,
     ...rest
   } = props;
-  const reserve = "error" in props;
+  const reserve = "error" in props || "hint" in props || "showCount" in props;
   const generated = useId();
   const fieldId = id ?? generated;
+  const countId = useId();
+  const hintParts = useFieldHint(hint, rest["aria-describedby"]);
+  const maxLength = rest.maxLength;
+  const counting = Boolean(showCount) && typeof maxLength === "number" && maxLength > 0;
+  const length = useTypedLength(rest.value, rest.defaultValue);
+  const countText = useCharacterCountLabels(countLabels);
   const { isInvalid, describedBy, errorEl } = useFieldError(
     error,
     invalid,
-    rest["aria-describedby"],
+    // Caller's, caption, count — then the error, appended by the hook.
+    mergeDescribedBy(hintParts.describedBy, counting && countId),
     rest["aria-invalid"]
   );
+  const counter = counting ? /* @__PURE__ */ jsx(
+    CharacterCount,
+    {
+      id: countId,
+      used: length.used,
+      max: maxLength,
+      labels: countText,
+      caption: /* @__PURE__ */ jsx(FieldCaption, { parts: hintParts, className: "mt-0" })
+    }
+  ) : null;
+  const below = fieldBelow(hintParts, counter, errorEl);
+  const onChange = counting ? (e) => {
+    length.track(e.target.value);
+    rest.onChange?.(e);
+  } : rest.onChange;
   const asDisplay = useMediaQuery(PHONE_QUERY, false) && variant === "display";
   const isPassword = type === "password";
   const [revealed, setRevealed] = useState(false);
@@ -815,8 +912,10 @@ const Input = forwardRef(function Input2(props, ref) {
     }
   ) : null;
   if (label === void 0) {
+    const endHint = hintParts.labelHint;
+    const ownClass = endHint === void 0 ? className : void 0;
     if (!isPassword) {
-      return /* @__PURE__ */ jsx(FieldGroup, { errorEl, reserve, children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsx(EndHintRow, { hint: endHint, className, children: /* @__PURE__ */ jsx(
         "input",
         {
           ref,
@@ -827,11 +926,12 @@ const Input = forwardRef(function Input2(props, ref) {
           "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
           "aria-describedby": describedBy,
           onClick: handleClick,
-          className: cn(FIELD_BASE, className, inputClassName, isInvalid && FIELD_INVALID)
+          onChange,
+          className: cn(FIELD_BASE, ownClass, inputClassName, isInvalid && FIELD_INVALID)
         }
-      ) });
+      ) }) });
     }
-    return /* @__PURE__ */ jsx(FieldGroup, { errorEl, reserve, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsx(EndHintRow, { hint: endHint, className, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", ownClass), children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -842,41 +942,74 @@ const Input = forwardRef(function Input2(props, ref) {
           ...rest,
           "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
           "aria-describedby": describedBy,
+          onChange,
           className: cn(FIELD_BASE, "pe-9", inputClassName, isInvalid && FIELD_INVALID)
         }
       ),
       revealToggle
-    ] }) });
+    ] }) }) });
   }
-  return /* @__PURE__ */ jsx(FieldGroup, { errorEl, reserve, children: /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, srOnlyLabel: asDisplay, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref,
-        id: fieldId,
-        type: effectiveType,
-        placeholder: asDisplay ? placeholder ?? (typeof label === "string" ? label : " ") : " ",
-        ...rest,
-        "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
-        "aria-describedby": describedBy,
-        onClick: handleClick,
-        className: cn(
-          asDisplay ? cn(FIELD_DISPLAY, "text-xl font-semibold leading-snug") : FLOATING_INPUT_CLASS,
-          isPassword && "pe-9",
-          inputClassName,
-          isInvalid && FIELD_INVALID
-        )
-      }
-    ),
-    revealToggle
-  ] }) });
+  const ownPlaceholder = hasPlaceholderText(placeholder);
+  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsxs(
+    FloatingField,
+    {
+      className,
+      htmlFor: fieldId,
+      label,
+      srOnlyLabel: asDisplay,
+      hint: hintParts.labelHint,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id: fieldId,
+            type: effectiveType,
+            placeholder: asDisplay ? placeholder ?? (typeof label === "string" ? label : " ") : ownPlaceholder ? placeholder : " ",
+            ...rest,
+            "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+            "aria-describedby": describedBy,
+            onClick: handleClick,
+            onChange,
+            className: cn(
+              asDisplay ? cn(FIELD_DISPLAY, "text-xl font-semibold leading-snug") : cn(FLOATING_INPUT_CLASS, ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS),
+              isPassword && "pe-9",
+              inputClassName,
+              isInvalid && FIELD_INVALID
+            )
+          }
+        ),
+        revealToggle
+      ]
+    }
+  ) });
 });
 Input.displayName = "Input";
 const SELECT_SM = "h-7 py-0 ps-2 pe-7 text-xs";
+const LOCKED_SELECT_KEYS = /* @__PURE__ */ new Set(["Tab", "Escape", "Shift"]);
+const FIELD_LOCKED = "cursor-not-allowed bg-[var(--bg-surface-2)] text-[var(--text-muted)]";
 const Select = forwardRef(function Select2(props, ref) {
-  const { className, label, id, children, invalid, error, hint, size, selectClassName, ...rest } = props;
-  const reserve = "error" in props;
+  const {
+    className,
+    label,
+    id,
+    children,
+    invalid,
+    error,
+    hint,
+    size,
+    selectClassName,
+    disabledReason,
+    commit,
+    onMouseDown,
+    onKeyDown,
+    onChange,
+    ...rest
+  } = props;
+  const reserve = "error" in props || "hint" in props || "showCount" in props;
   const generated = useId();
+  const lock = useLockReason(commit, disabledReason);
+  const locked = lock.locked;
   const nativeSize = typeof size === "number" ? size : void 0;
   const listBox = nativeSize !== void 0 && nativeSize > 1 || Boolean(rest.multiple);
   const small = size === "sm" && label === void 0;
@@ -887,16 +1020,29 @@ const Select = forwardRef(function Select2(props, ref) {
     error,
     invalid,
     // The caption goes in BEFORE the error — the standing advice first, the news
-    // second, the order useFieldError keeps for a caller's own description.
-    textHint ? rest["aria-describedby"] ? `${rest["aria-describedby"]} ${hintId}` : hintId : rest["aria-describedby"],
+    // second, the order useFieldError keeps for a caller's own description. A lock's
+    // reason sits between the two.
+    mergeDescribedBy(rest["aria-describedby"], textHint && hintId, locked && lock.reasonId),
     rest["aria-invalid"]
   );
   const below = textHint || errorEl !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
     textHint && /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1 text-[11px] leading-tight text-[var(--text-muted)]", children: hint }),
     errorEl
   ] }) : null;
-  const chevron = rest.disabled || listBox ? null : /* @__PURE__ */ jsx(FieldChevron, { className: small ? "end-1.5 size-3.5" : void 0 });
+  const chevron = rest.disabled || listBox || locked ? null : /* @__PURE__ */ jsx(FieldChevron, { className: small ? "end-1.5 size-3.5" : void 0 });
   const dress = listBox ? "overflow-y-auto [&_option]:py-1" : "appearance-none pe-9";
+  const interaction = locked ? {
+    disabled: void 0,
+    "aria-disabled": true,
+    onMouseDown: (e) => e.preventDefault(),
+    onKeyDown: (e) => {
+      if (!LOCKED_SELECT_KEYS.has(e.key) && !e.ctrlKey && !e.metaKey) e.preventDefault();
+    },
+    onChange: () => {
+    }
+  } : { onMouseDown, onKeyDown, onChange };
+  const boxClass = locked ? void 0 : className;
+  const withReason = (box) => locked ? /* @__PURE__ */ jsx(LockedReason, { lock, className: cn("block", className), children: box }) : box;
   if (label === void 0) {
     const select = /* @__PURE__ */ jsx(
       "select",
@@ -905,6 +1051,7 @@ const Select = forwardRef(function Select2(props, ref) {
         id,
         size: nativeSize,
         ...rest,
+        ...interaction,
         "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
         "aria-describedby": describedBy,
         className: cn(
@@ -912,6 +1059,7 @@ const Select = forwardRef(function Select2(props, ref) {
           dress,
           listBox && "py-0",
           small && SELECT_SM,
+          locked && FIELD_LOCKED,
           selectClassName,
           isInvalid && FIELD_INVALID
         ),
@@ -919,60 +1067,100 @@ const Select = forwardRef(function Select2(props, ref) {
       }
     );
     if (hasContent(hint) && !textHint) {
-      return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", className), children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
-          select,
-          chevron
-        ] }),
-        /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: hint })
-      ] }) });
+      return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: withReason(
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", boxClass), children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
+            select,
+            chevron
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: hint })
+        ] })
+      ) });
     }
-    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
-      select,
-      chevron
-    ] }) });
+    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: withReason(
+      /* @__PURE__ */ jsxs("div", { className: cn("relative", boxClass), children: [
+        select,
+        chevron
+      ] })
+    ) });
   }
-  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, staticLabel: true, hint: textHint ? void 0 : hint, children: [
-    /* @__PURE__ */ jsx(
-      "select",
+  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: withReason(
+    /* @__PURE__ */ jsxs(
+      FloatingField,
       {
-        ref,
-        id: fieldId,
-        size: nativeSize,
-        ...rest,
-        "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
-        "aria-describedby": describedBy,
-        className: cn(
-          FIELD_BASE,
-          // The floated label takes the top strip of a list box too, so its first
-          // row starts under the label rather than behind it. No bottom padding — see
-          // `dress`.
-          listBox ? "pt-5 pb-0" : FIELD_FLOATING_PAD,
-          "peer",
-          dress,
-          selectClassName,
-          isInvalid && FIELD_INVALID
-        ),
-        children
+        className: boxClass,
+        htmlFor: fieldId,
+        label,
+        staticLabel: true,
+        hint: textHint ? void 0 : hint,
+        children: [
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              ref,
+              id: fieldId,
+              size: nativeSize,
+              ...rest,
+              ...interaction,
+              "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+              "aria-describedby": describedBy,
+              className: cn(
+                FIELD_BASE,
+                // The floated label takes the top strip of a list box too, so its first
+                // row starts under the label rather than behind it. No bottom padding — see
+                // `dress`.
+                listBox ? "pt-5 pb-0" : FIELD_FLOATING_PAD,
+                "peer",
+                dress,
+                locked && FIELD_LOCKED,
+                selectClassName,
+                isInvalid && FIELD_INVALID
+              ),
+              children
+            }
+          ),
+          chevron
+        ]
       }
-    ),
-    chevron
-  ] }) });
+    )
+  ) });
 });
 Select.displayName = "Select";
 const Textarea = forwardRef(function Textarea2(props, ref) {
-  const { className, label, id, placeholder, invalid, error, ...rest } = props;
-  const reserve = "error" in props;
+  const { className, label, id, placeholder, invalid, error, hint, showCount, countLabels, ...rest } = props;
+  const reserve = "error" in props || "hint" in props || "showCount" in props;
   const generated = useId();
   const fieldId = id ?? generated;
+  const countId = useId();
+  const hintParts = useFieldHint(hint, rest["aria-describedby"]);
+  const maxLength = rest.maxLength;
+  const counting = Boolean(showCount) && typeof maxLength === "number" && maxLength > 0;
+  const length = useTypedLength(rest.value, rest.defaultValue);
+  const countText = useCharacterCountLabels(countLabels);
   const { isInvalid, describedBy, errorEl } = useFieldError(
     error,
     invalid,
-    rest["aria-describedby"],
+    mergeDescribedBy(hintParts.describedBy, counting && countId),
     rest["aria-invalid"]
   );
+  const counter = counting ? /* @__PURE__ */ jsx(
+    CharacterCount,
+    {
+      id: countId,
+      used: length.used,
+      max: maxLength,
+      labels: countText,
+      caption: /* @__PURE__ */ jsx(FieldCaption, { parts: hintParts, className: "mt-0" })
+    }
+  ) : null;
+  const below = fieldBelow(hintParts, counter, errorEl);
+  const onChange = counting ? (e) => {
+    length.track(e.target.value);
+    rest.onChange?.(e);
+  } : rest.onChange;
   if (label === void 0) {
-    return /* @__PURE__ */ jsx(FieldGroup, { errorEl, reserve, children: /* @__PURE__ */ jsx(
+    const endHint = hintParts.labelHint;
+    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsx(EndHintRow, { hint: endHint, className, children: /* @__PURE__ */ jsx(
       "textarea",
       {
         ref,
@@ -981,20 +1169,27 @@ const Textarea = forwardRef(function Textarea2(props, ref) {
         ...rest,
         "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
         "aria-describedby": describedBy,
-        className: cn(FIELD_BASE, className, isInvalid && FIELD_INVALID)
+        onChange,
+        className: cn(FIELD_BASE, endHint === void 0 && className, isInvalid && FIELD_INVALID)
       }
-    ) });
+    ) }) });
   }
-  return /* @__PURE__ */ jsx(FieldGroup, { errorEl, reserve, children: /* @__PURE__ */ jsx(FloatingField, { className, htmlFor: fieldId, label, children: /* @__PURE__ */ jsx(
+  const ownPlaceholder = hasPlaceholderText(placeholder);
+  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsx(FloatingField, { className, htmlFor: fieldId, label, hint: hintParts.labelHint, children: /* @__PURE__ */ jsx(
     "textarea",
     {
       ref,
       id: fieldId,
-      placeholder: " ",
+      placeholder: ownPlaceholder ? placeholder : " ",
       ...rest,
       "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
       "aria-describedby": describedBy,
-      className: cn(FLOATING_INPUT_CLASS, isInvalid && FIELD_INVALID)
+      onChange,
+      className: cn(
+        FLOATING_INPUT_CLASS,
+        ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS,
+        isInvalid && FIELD_INVALID
+      )
     }
   ) }) });
 });
@@ -1546,6 +1741,7 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
+  DEFAULT_CHARACTER_COUNT_LABELS,
   DEFAULT_PASSWORD_REVEAL_LABELS,
   DEFAULT_TABS_LABELS,
   EmptyState,
@@ -1557,7 +1753,7 @@ export {
   FIELD_WRITABLE_LOOK,
   FLOATING_INPUT_CLASS,
   FLOATING_LABEL_CLASS,
-  FLOATING_LABEL_STATIC,
+  FLOATING_LABEL_STATIC2 as FLOATING_LABEL_STATIC,
   FieldChevron,
   FieldHint,
   FieldLabel,