@eifi1/ui-kit 0.33.1 → 0.34.0

package/src/components/one-time-code-input.tsx

@@ -1,8 +1,14 @@
-import { forwardRef, useId, useState } from "react";
-import type { ChangeEvent, ClipboardEvent, FocusEvent, InputHTMLAttributes, ReactNode } from "react";
+import { useId, useState } from "react";
+import type { ChangeEvent, ClipboardEvent, FocusEvent, InputHTMLAttributes, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
-import { hasMessage, mergeDescribedBy } from "./choice-parts";
-import { FIELD_BASE, FIELD_INVALID, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FloatingField } from "./ui";
+import { EndHintRow, FieldCaption, useFieldError, useFieldHint } from "./field-parts";
+import {
+  FIELD_BASE,
+  FIELD_INVALID,
+  FIELD_WRITABLE_LOOK,
+  FLOATING_INPUT_CLASS,
+  FloatingField,
+} from "./field-base";
 
 /**
  * The field for a verification code — the six digits an authenticator app shows, or the
@@ -101,13 +107,11 @@ export interface OneTimeCodeInputProps
    * a saved login actually lands in the field.
    */
   readOnlyUntilFocus?: boolean;
+  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it
+   *  was `forwardRef`. */
+  ref?: Ref<HTMLInputElement>;
 }
 
-// The error line under a field — the type of `ui.tsx`'s (module-private) one, so this
-// field's message is indistinguishable from an Input's.
-const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
-const FIELD_CAPTION_CLASS = "mt-1 text-caption leading-tight text-[var(--text-muted)]";
-
 // Equal-width digits, spaced a little apart, so a code reads — and compares against the
 // authenticator's screen — digit by digit.
 const CODE_TYPE = "tabular-nums tracking-widest";
@@ -117,172 +121,153 @@ function digitsOf(text: string): string {
   return text.normalize("NFKC").replace(/\D/g, "");
 }
 
-export const OneTimeCodeInput = forwardRef<HTMLInputElement, OneTimeCodeInputProps>(
-  function OneTimeCodeInput(props, ref) {
-    const {
-      value,
-      onChange,
-      length = 6,
-      onComplete,
-      label,
-      hint,
-      error,
-      invalid: invalidProp,
-      className,
-      inputClassName,
-      readOnlyUntilFocus = false,
-      readOnly,
-      id,
-      placeholder,
-      onFocus,
-      onPaste,
-      "aria-describedby": ariaDescribedBy,
-      "aria-invalid": ariaInvalid,
-      ...rest
-    } = props;
-    // A length below one is no code at all; a fractional one is a typo.
-    const size = Math.max(1, Math.floor(length) || 1);
-    const generatedId = useId();
-    const fieldId = id ?? generatedId;
-    const hintId = useId();
-    const errorId = useId();
-    // Text is a caption under the field; a FieldHint rides the label line. See `hint`.
-    const textHint = (typeof hint === "string" && hint !== "") || typeof hint === "number";
-    const hasError = hasMessage(error);
-    // Passed at all — even as `undefined` — the field keeps its box, so the `<input>` is
-    // never re-parented (and never loses focus) when a message comes or goes. See
-    // `FieldGroup` in ui.tsx.
-    const reserve = "error" in props || "hint" in props;
-    const describedBy = mergeDescribedBy(ariaDescribedBy, textHint && hintId, hasError && errorId);
-    const invalid = Boolean(invalidProp) || hasError || ariaInvalid === true || ariaInvalid === "true";
-    const labelled = label !== undefined;
+export function OneTimeCodeInput(props: OneTimeCodeInputProps) {
+  const {
+    ref,
+    value,
+    onChange,
+    length = 6,
+    onComplete,
+    label,
+    hint,
+    error,
+    invalid: invalidProp,
+    className,
+    inputClassName,
+    readOnlyUntilFocus = false,
+    readOnly,
+    id,
+    placeholder,
+    onFocus,
+    onPaste,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    ...rest
+  } = props;
+  // A length below one is no code at all; a fractional one is a typo.
+  const size = Math.max(1, Math.floor(length) || 1);
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  // Text is a caption under the field; a FieldHint rides the label line, and is that
+  // caption at Large and on touch (§4). See `hint`. Through useFieldHint and
+  // useFieldError since 0.34, not copies of their rules (DUP-2, DUP-8).
+  const hintParts = useFieldHint(hint, ariaDescribedBy);
+  const {
+    isInvalid: invalid,
+    describedBy,
+    errorEl,
+  } = useFieldError(error, invalidProp, hintParts.describedBy, ariaInvalid);
+  // Passed at all — even as `undefined` — the field keeps its box, so the `<input>` is
+  // never re-parented (and never loses focus) when a message comes or goes. See
+  // `FieldGroup` in field-base.tsx.
+  const reserve = "error" in props || "hint" in props;
+  const labelled = label !== undefined;
 
-    // Focused once = in use; the guard is down for good from then on (see the prop).
-    const [focusedOnce, setFocusedOnce] = useState(false);
-    const guarding = readOnlyUntilFocus && !focusedOnce;
+  // Focused once = in use; the guard is down for good from then on (see the prop).
+  const [focusedOnce, setFocusedOnce] = useState(false);
+  const guarding = readOnlyUntilFocus && !focusedOnce;
 
-    const commit = (next: string) => {
-      if (next === value) return;
-      onChange(next);
-      if (next.length === size) onComplete?.(next);
-    };
+  const commit = (next: string) => {
+    if (next === value) return;
+    onChange(next);
+    if (next.length === size) onComplete?.(next);
+  };
 
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-      const input = e.currentTarget;
-      const raw = input.value;
-      const cleaned = digitsOf(raw);
-      // Past the length: a full field refuses the digit (what `maxLength` does), a
-      // partial one keeps the first `size` — a paste longer than the room left.
-      const refused = cleaned.length > size && value.length >= size;
-      const next = refused ? value : cleaned.slice(0, size);
-      if (next !== raw) {
-        // Write the cleaned text back NOW, with the caret where the typist left it.
-        // React would otherwise put its value back after this handler, and setting an
-        // input's value moves the caret to the end — so a space typed mid-code threw
-        // the caret to the last digit. React finds the DOM already agreeing and leaves
-        // it alone.
-        const caret = input.selectionStart ?? raw.length;
-        const at = refused
-          ? Math.max(0, caret - (raw.length - value.length))
-          : Math.min(digitsOf(raw.slice(0, caret)).length, next.length);
-        input.value = next;
-        try {
-          input.setSelectionRange(at, at);
-        } catch {
-          /* not every input type has a selection; a text field does */
-        }
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const input = e.currentTarget;
+    const raw = input.value;
+    const cleaned = digitsOf(raw);
+    // Past the length: a full field refuses the digit (what `maxLength` does), a
+    // partial one keeps the first `size` — a paste longer than the room left.
+    const refused = cleaned.length > size && value.length >= size;
+    const next = refused ? value : cleaned.slice(0, size);
+    if (next !== raw) {
+      // Write the cleaned text back NOW, with the caret where the typist left it.
+      // React would otherwise put its value back after this handler, and setting an
+      // input's value moves the caret to the end — so a space typed mid-code threw
+      // the caret to the last digit. React finds the DOM already agreeing and leaves
+      // it alone.
+      const caret = input.selectionStart ?? raw.length;
+      const at = refused
+        ? Math.max(0, caret - (raw.length - value.length))
+        : Math.min(digitsOf(raw.slice(0, caret)).length, next.length);
+      input.value = next;
+      try {
+        input.setSelectionRange(at, at);
+      } catch {
+        /* not every input type has a selection; a text field does */
       }
-      commit(next);
-    };
+    }
+    commit(next);
+  };
 
-    const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
-      onPaste?.(e);
-      // A read-only field still receives the event; it must not take the code.
-      if (e.defaultPrevented || readOnly || guarding || rest.disabled) return;
-      const pasted = digitsOf(e.clipboardData.getData("text"));
-      // Anything else — a few digits into a partial code — is an ordinary insertion,
-      // and the change handler cleans it.
-      if (pasted.length !== size) return;
-      e.preventDefault();
-      commit(pasted);
-    };
+  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
+    onPaste?.(e);
+    // A read-only field still receives the event; it must not take the code.
+    if (e.defaultPrevented || readOnly || guarding || rest.disabled) return;
+    const pasted = digitsOf(e.clipboardData.getData("text"));
+    // Anything else — a few digits into a partial code — is an ordinary insertion,
+    // and the change handler cleans it.
+    if (pasted.length !== size) return;
+    e.preventDefault();
+    commit(pasted);
+  };
 
-    const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
-      if (guarding) setFocusedOnce(true);
-      onFocus?.(e);
-    };
+  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
+    if (guarding) setFocusedOnce(true);
+    onFocus?.(e);
+  };
 
-    const input = (
-      <input
-        ref={ref}
-        id={labelled ? fieldId : id}
-        {...rest}
-        type="text"
-        inputMode="numeric"
-        autoComplete="one-time-code"
-        // The numeric keypad's older cue, for the browsers that predate `inputMode`.
-        // The value is digits only, so it can never fail the pattern.
-        pattern="[0-9]*"
-        // A labelled field's placeholder is a single space: it drives the floating
-        // label's `placeholder-shown` trick. Unlabelled, the caller's ("000000") shows.
-        placeholder={labelled ? " " : placeholder}
-        value={value}
-        readOnly={readOnly || guarding}
-        onChange={handleChange}
-        onPaste={handlePaste}
-        onFocus={handleFocus}
-        aria-invalid={invalid || undefined}
-        aria-describedby={describedBy}
-        className={cn(
-          labelled ? FLOATING_INPUT_CLASS : FIELD_BASE,
-          CODE_TYPE,
-          // Read-only for the guard's sake only: keep the editable look. A caller's
-          // own `readOnly` keeps FIELD_BASE's settled grey, as everywhere else.
-          guarding && !readOnly && FIELD_WRITABLE_LOOK,
-          !labelled && className,
-          inputClassName,
-          invalid && FIELD_INVALID,
-        )}
-      />
-    );
+  const input = (
+    <input
+      ref={ref}
+      id={labelled ? fieldId : id}
+      {...rest}
+      type="text"
+      inputMode="numeric"
+      autoComplete="one-time-code"
+      // The numeric keypad's older cue, for the browsers that predate `inputMode`.
+      // The value is digits only, so it can never fail the pattern.
+      pattern="[0-9]*"
+      // A labelled field's placeholder is a single space: it drives the floating
+      // label's `placeholder-shown` trick. Unlabelled, the caller's ("000000") shows.
+      placeholder={labelled ? " " : placeholder}
+      value={value}
+      readOnly={readOnly || guarding}
+      onChange={handleChange}
+      onPaste={handlePaste}
+      onFocus={handleFocus}
+      aria-invalid={invalid || undefined}
+      aria-describedby={describedBy}
+      className={cn(
+        labelled ? FLOATING_INPUT_CLASS : FIELD_BASE,
+        CODE_TYPE,
+        // Read-only for the guard's sake only: keep the editable look. A caller's
+        // own `readOnly` keeps FIELD_BASE's settled grey, as everywhere else.
+        guarding && !readOnly && FIELD_WRITABLE_LOOK,
+        !labelled && className,
+        inputClassName,
+        invalid && FIELD_INVALID,
+      )}
+    />
+  );
 
-    const nonTextHint = hasMessage(hint) && !textHint;
-    let field: ReactNode;
-    if (labelled) {
-      field = (
-        <FloatingField className={className} htmlFor={fieldId} label={label} hint={nonTextHint ? hint : undefined}>
-          {input}
-        </FloatingField>
-      );
-    } else if (nonTextHint) {
-      // No label line to ride: the "?" goes at the field's end edge, outside the box —
-      // where an unlabelled Select puts it.
-      field = (
-        <div className="flex items-center gap-1.5">
-          <div className="min-w-0 flex-1">{input}</div>
-          <span className="flex shrink-0 items-center">{hint}</span>
-        </div>
-      );
-    } else {
-      field = input;
-    }
+  const field: ReactNode = labelled ? (
+    <FloatingField className={className} htmlFor={fieldId} label={label} hint={hintParts.labelHint}>
+      {input}
+    </FloatingField>
+  ) : (
+    // No label line to ride: a "?" goes at the field's end edge, outside the box —
+    // where an unlabelled Select puts it.
+    <EndHintRow hint={hintParts.labelHint}>{input}</EndHintRow>
+  );
 
-    if (!textHint && !hasError && !reserve) return field;
-    return (
-      <div>
-        {field}
-        {textHint && (
-          <p id={hintId} className={FIELD_CAPTION_CLASS}>
-            {hint}
-          </p>
-        )}
-        {hasError && (
-          <p id={errorId} className={FIELD_ERROR_CLASS}>
-            {error}
-          </p>
-        )}
-      </div>
-    );
-  },
-);
-OneTimeCodeInput.displayName = "OneTimeCodeInput";
+  if (hintParts.captionText === undefined && errorEl === null && !reserve) return field;
+  return (
+    <div>
+      {field}
+      <FieldCaption parts={hintParts} />
+      {errorEl}
+    </div>
+  );
+}

package/src/components/page-contents-labels.ts

@@ -0,0 +1,9 @@
+// The English words of ./page-contents, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./page-contents re-exports them.
+
+import type { PageContentsLabels } from "./page-contents";
+
+export const DEFAULT_PAGE_CONTENTS_LABELS: PageContentsLabels = {
+  title: "On this page",
+};

package/src/components/page-contents.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../lib/cn";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { DEFAULT_PAGE_CONTENTS_LABELS } from "./page-contents-labels";
 
 /**
  * "On this page": a page's own table of contents, with the section being read marked.
@@ -33,9 +34,8 @@ export interface PageContentsLabels {
   title: string;
 }
 
-export const DEFAULT_PAGE_CONTENTS_LABELS: PageContentsLabels = {
-  title: "On this page",
-};
+// Defined in ./page-contents-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_PAGE_CONTENTS_LABELS };
 
 export interface UseScrollSpyOptions {
   /** The element that scrolls. Defaults to the viewport. In `AppShell`, pass its
@@ -102,7 +102,7 @@ export function useScrollSpy(ids: readonly string[], options: UseScrollSpyOption
   return current;
 }
 
-export interface PageContentsProps extends Omit<ComponentPropsWithoutRef<"nav">, "children"> {
+export interface PageContentsProps extends Omit<ComponentPropsWithRef<"nav">, "children"> {
   items: PageContentsItem[];
   /** The current entry — typically `useScrollSpy(items.map(i => i.id), …)`. */
   activeId?: string | null;
@@ -112,7 +112,7 @@ export interface PageContentsProps extends Omit<ComponentPropsWithoutRef<"nav">,
   /** `rail` — a list beside the page. `disclosure` — collapsed under a summary line,
    *  for narrow screens where a rail has no room. */
   variant?: "rail" | "disclosure";
-  labels?: Partial<PageContentsLabels>;
+  labels?: LabelOverride<PageContentsLabels>;
 }
 
 /**
@@ -166,7 +166,7 @@ export function PageContents({
     <ul
       ref={listRef}
       className={cn(
-        "space-y-0.5 border-s border-[var(--border)]",
+        "space-y-0.5 border-s border-subtle",
         variant === "rail" && "max-h-[calc(100dvh-10rem)] overflow-y-auto [scrollbar-width:thin]",
       )}
     >
@@ -186,8 +186,8 @@ export function PageContents({
                 variant === "rail" && "[overflow-wrap:anywhere]",
                 item.level === 2 ? "ps-6" : "ps-3",
                 current
-                  ? "border-[var(--brand)] font-medium text-[var(--brand)]"
-                  : "border-transparent text-[var(--text-muted)] hover:border-[var(--border-strong)] hover:text-[var(--text-primary)]",
+                  ? "border-brand font-medium text-brand"
+                  : "border-transparent text-muted hover:border-strong hover:text-primary",
               )}
             >
               {item.label}
@@ -202,18 +202,18 @@ export function PageContents({
     return (
       <details
         className={cn(
-          "group rounded-md border border-[var(--border)] bg-[var(--bg-surface)]",
+          "group rounded-md border border-subtle bg-surface",
           className,
         )}
       >
-        <summary className="flex cursor-pointer list-none items-center justify-between px-3 py-2 text-sm font-medium text-[var(--text-secondary)] [&::-webkit-details-marker]:hidden">
+        <summary className="flex cursor-pointer list-none items-center justify-between px-3 py-2 text-sm font-medium text-secondary [&::-webkit-details-marker]:hidden">
           {l.title}
           <ChevronDown
             aria-hidden
             className="size-4 transition-transform duration-200 group-open:rotate-180 motion-reduce:transition-none"
           />
         </summary>
-        <nav {...rest} aria-label={l.title} className="border-t border-[var(--border)] px-2 py-2">
+        <nav {...rest} aria-label={l.title} className="border-t border-subtle px-2 py-2">
           {list}
         </nav>
       </details>
@@ -222,7 +222,7 @@ export function PageContents({
 
   return (
     <nav {...rest} aria-label={l.title} className={className}>
-      <p className="mb-2 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)]">
+      <p className="mb-2 text-caption font-semibold uppercase tracking-wide text-muted">
         {l.title}
       </p>
       {list}
@@ -230,7 +230,7 @@ export function PageContents({
   );
 }
 
-export interface PageContentsLayoutProps extends ComponentPropsWithoutRef<"div"> {
+export interface PageContentsLayoutProps extends ComponentPropsWithRef<"div"> {
   /** What goes in the rail — typically a `<PageContents variant="rail">`. */
   contents: ReactNode;
   /**

package/src/components/page-header.tsx

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import type { ComponentPropsWithRef, ElementType, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { SECTION_LABEL_CLASS } from "./text";
 
@@ -64,7 +64,7 @@ const ROW_ALIGN: Record<PageHeaderMobileLayout, Record<PageHeaderActionsAlign, s
   inline: { start: "items-start", center: "items-center", end: "items-end" },
 };
 
-export interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+export interface PageHeaderProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
   title: ReactNode;
   /** A sentence under the title. */
   description?: ReactNode;
@@ -139,6 +139,10 @@ export interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "
    * The full title stays in the DOM as the heading's text, so a screen reader and the
    * document outline read all of it. There is deliberately no native `title` tooltip:
    * the kit does not use them (not on touch, not on keyboard focus, not styled).
+   *
+   * At Normal only: from Large up the title wraps (`truncate-until-large`, text size
+   * §10.17; round 0.34 T1), as nothing is cut at Large — the actions then share the row
+   * with a taller title block.
    */
   truncateTitle?: boolean;
 }
@@ -230,14 +234,14 @@ export function PageHeader({
           {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, "mb-1")}>{eyebrow}</p>}
           <Heading
             className={cn(
-              truncateTitle ? "truncate" : "break-words",
-              "text-[var(--text-primary)]",
+              truncateTitle ? "truncate-until-large" : "break-words",
+              "text-primary",
               TITLE[size],
             )}
           >
             {title}
           </Heading>
-          {description != null && <p className="mt-1 text-sm text-[var(--text-muted)]">{description}</p>}
+          {description != null && <p className="mt-1 text-sm text-muted">{description}</p>}
         </div>
         {actions != null && (
           <div

package/src/components/password-strength-labels.ts

@@ -0,0 +1,23 @@
+// The English words of ./password-strength, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./password-strength re-exports them.
+
+import type { PasswordStrengthLabels } from "./password-strength";
+
+export const DEFAULT_PASSWORD_STRENGTH_LABELS: PasswordStrengthLabels = {
+  tooShort: "Too short",
+  weak: "Weak",
+  fair: "Fair",
+  good: "Good",
+  strong: "Strong",
+  announcement: (level) => `Password strength: ${level}`,
+  ruleLength: (minLength) => `At least ${minLength} characters`,
+  ruleCase: "Upper and lower case",
+  ruleDigit: "A number",
+  ruleSymbol: "A symbol",
+  optional: (rule) => `${rule} (optional)`,
+  met: "Met:",
+  notMet: "Not met:",
+  tooLong: (maxBytes) =>
+    `At most ${maxBytes} characters (accents and emoji count for more than one).`,
+};

package/src/components/password-strength.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useRef } from "react";
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 import { cn } from "../lib/cn";
 import { useAnnounce } from "../hooks/use-announce";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { DEFAULT_PASSWORD_STRENGTH_LABELS } from "./password-strength-labels";
 
 /**
  * The bar, the word and the advisory checklist under a field where someone is
@@ -117,23 +118,8 @@ export interface PasswordStrengthLabels {
   tooLong: (maxBytes: number) => string;
 }
 
-export const DEFAULT_PASSWORD_STRENGTH_LABELS: PasswordStrengthLabels = {
-  tooShort: "Too short",
-  weak: "Weak",
-  fair: "Fair",
-  good: "Good",
-  strong: "Strong",
-  announcement: (level) => `Password strength: ${level}`,
-  ruleLength: (minLength) => `At least ${minLength} characters`,
-  ruleCase: "Upper and lower case",
-  ruleDigit: "A number",
-  ruleSymbol: "A symbol",
-  optional: (rule) => `${rule} (optional)`,
-  met: "Met:",
-  notMet: "Not met:",
-  tooLong: (maxBytes) =>
-    `At most ${maxBytes} characters (accents and emoji count for more than one).`,
-};
+// Defined in ./password-strength-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_PASSWORD_STRENGTH_LABELS };
 
 const LEVEL_KEYS = ["tooShort", "weak", "fair", "good", "strong"] as const;
 
@@ -144,13 +130,13 @@ const LEVEL_KEYS = ["tooShort", "weak", "fair", "good", "strong"] as const;
 // segment count. Index 0 is never drawn — a too-short secret fills no segment.
 const FILL: Record<PasswordStrengthScore, string> = {
   0: "",
-  1: "bg-[var(--danger)]",
-  2: "bg-[var(--warning)]",
+  1: "bg-danger",
+  2: "bg-warning",
   3: "bg-[color-mix(in_oklab,var(--success)_60%,var(--warning))]",
-  4: "bg-[var(--success)]",
+  4: "bg-success",
 };
 
-export interface PasswordStrengthMeterProps extends ComponentPropsWithoutRef<"div"> {
+export interface PasswordStrengthMeterProps extends ComponentPropsWithRef<"div"> {
   /** The secret being chosen. Nothing visible renders while it is empty. */
   value: string;
   /** Replace the built-in scorer (e.g. with zxcvbn's `score`). Must be pure. */
@@ -167,7 +153,7 @@ export interface PasswordStrengthMeterProps extends ComponentPropsWithoutRef<"di
    */
   maxBytes?: number;
   /** User-facing strings; see {@link PasswordStrengthLabels}. */
-  labels?: Partial<PasswordStrengthLabels>;
+  labels?: LabelOverride<PasswordStrengthLabels>;
 }
 
 /**
@@ -229,7 +215,7 @@ export function PasswordStrengthMeter({
                 />
               ))}
             </div>
-            <p className="min-w-[4.5rem] text-end text-xs text-[var(--text-secondary)]">{level}</p>
+            <p className="min-w-[4.5rem] text-end text-xs text-secondary">{level}</p>
           </div>
           {showRequirements && (
             <ul className="flex flex-wrap gap-x-3 gap-y-0.5 text-xs">
@@ -239,7 +225,7 @@ export function PasswordStrengthMeter({
                   // `relative`: the sr-only state needs a local containing block.
                   className={cn(
                     "relative",
-                    r.met ? "text-[var(--success)]" : "text-[var(--text-muted)]",
+                    r.met ? "text-success" : "text-muted",
                   )}
                   data-met={r.met}
                 >
@@ -250,7 +236,7 @@ export function PasswordStrengthMeter({
               ))}
             </ul>
           )}
-          {tooLong && <p className="text-xs text-[var(--danger)]">{labels.tooLong(maxBytes)}</p>}
+          {tooLong && <p className="text-xs text-danger">{labels.tooLong(maxBytes)}</p>}
         </>
       )}
     </div>

package/src/components/phone-input-labels.ts

@@ -0,0 +1,10 @@
+// The English words of ./phone-input, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./phone-input re-exports them.
+
+import type { PhoneInputLabels } from "./phone-input";
+
+export const DEFAULT_PHONE_INPUT_LABELS: PhoneInputLabels = {
+  countryCode: "Country code",
+  other: "Other",
+};