cursedbelt 5.46.0 → 5.47.0

package/src/react/components/DataTable/DataTable.tsx

@@ -1171,6 +1171,7 @@ export function DataTable<TRow extends Record<string, unknown>>({
             <SortHeader
               column={column}
               label={col.label}
+              icon={col.headerIcon}
               sortable={col.sortable}
               sortIndex={stack.length > 1 ? stack.findIndex((s) => s.id === col.key) : -1}
               onSort={() => toggleSortKey(col.key)}

package/src/react/components/DataTable/SortHeader.tsx

@@ -23,9 +23,36 @@ const withLabelTip = (label: string, children: ReactNode) => (
   </Tooltip>
 );
 
+/**
+ * `ColDef.headerIcon`'s swap below the table's 42rem step (`@max-2xl`; the table is the
+ * `@container`). The label goes `sr-only`, not `hidden`, so the header keeps its name for
+ * assistive tech at every width. One step only: each step costs every consuming app its CSS.
+ */
+const COMPACT_LABEL = '@max-2xl:sr-only';
+const COMPACT_ICON = 'hidden @max-2xl:inline-flex';
+/** A glyph and an arrow are ~30px; the label was what made the button wide enough to tap. */
+const COMPACT_BUTTON = ' @max-2xl:min-w-11 @max-2xl:justify-center';
+
+/** The label, and — with an icon — the glyph that replaces it on a narrow table. */
+function HeaderLabel({ label, icon }: { label: string; icon?: ReactNode }) {
+  if (icon == null) return <span className='min-w-0 truncate'>{label}</span>;
+  return (
+    <>
+      <span data-cb-header-label className={`min-w-0 truncate ${COMPACT_LABEL}`}>
+        {label}
+      </span>
+      <span data-cb-header-icon aria-hidden className={`shrink-0 items-center [&>svg]:size-3.5 ${COMPACT_ICON}`}>
+        {icon}
+      </span>
+    </>
+  );
+}
+
 export interface SortHeaderProps<TRow> {
   column: Column<TRow, unknown>;
   label: string;
+  /** `ColDef.headerIcon` — drawn instead of the label when the table is narrower than 42rem. */
+  icon?: ReactNode;
   sortable?: boolean;
   /**
    * This column's position in the sort STACK, or `-1` when it is not in one (or
@@ -58,6 +85,7 @@ export interface SortHeaderProps<TRow> {
 export function SortHeader<TRow>({
   column,
   label,
+  icon,
   sortable,
   sortIndex = -1,
   onSort,
@@ -69,8 +97,20 @@ export function SortHeader<TRow>({
   // that overflows a `<th>` paints on top of the NEXT header rather than
   // clipping, which reads as a rendering fault ("Sask"/"ACTEMPY" in orch's
   // fleet table, 2026-08-11). `title` keeps the full label one hover away.
-  if (!sortable) return withLabelTip(label, <span className='block truncate'>{label}</span>);
+  if (!sortable)
+    return withLabelTip(
+      label,
+      icon == null ? (
+        <span className='block truncate'>{label}</span>
+      ) : (
+        <span className='flex min-w-0 items-center'>
+          <HeaderLabel label={label} icon={icon} />
+        </span>
+      ),
+    );
   const sorted = column.getIsSorted();
+  // The design law's LAY-13 floor is 44px, and music's audit caught the bare glyph at 390 (task 2577).
+  const compact = icon == null ? '' : COMPACT_BUTTON;
   if (disabledReason)
     // Visible and explained, never hidden — and `aria-disabled` rather than `disabled`, because
     // a disabled button fires no pointer events and the reason could never be hovered.
@@ -81,9 +121,9 @@ export function SortHeader<TRow>({
         type='button'
         aria-disabled
         aria-label={`${label} — ${disabledReason}`}
-        className={`-mx-1 -my-2.5 inline-flex max-w-full cursor-not-allowed items-center gap-1 rounded px-1 py-2.5 uppercase focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${TAP_TARGET_HEIGHT}`}
+        className={`-mx-1 -my-2.5 inline-flex max-w-full cursor-not-allowed items-center gap-1 rounded px-1 py-2.5 uppercase focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${TAP_TARGET_HEIGHT}${compact}`}
       >
-        <span className='min-w-0 truncate'>{label}</span>
+        <HeaderLabel label={label} icon={icon} />
       </button>,
     );
   return withLabelTip(
@@ -104,11 +144,11 @@ export function SortHeader<TRow>({
       // computed styles on orch's Fleet tab, 2026-08-12: `th` uppercase,
       // `button` none. Letter-spacing does inherit (0.55px on both), so only
       // the case needs restating.
-      className={`-mx-1 -my-2.5 inline-flex max-w-full items-center gap-1 rounded px-1 py-2.5 uppercase transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${TAP_TARGET_HEIGHT}`}
+      className={`-mx-1 -my-2.5 inline-flex max-w-full items-center gap-1 rounded px-1 py-2.5 uppercase transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${TAP_TARGET_HEIGHT}${compact}`}
     >
       {/* min-w-0 so the label is what gives way in a narrow track — the sort
           arrow is the affordance and must survive at any width. */}
-      <span className='min-w-0 truncate'>{label}</span>
+      <HeaderLabel label={label} icon={icon} />
       {sorted === 'asc' ? (
         <ArrowUp className='size-3 shrink-0' aria-hidden />
       ) : sorted === 'desc' ? (

package/src/react/components/DataTable/types.ts

@@ -90,6 +90,16 @@ export interface ColDef<TRow = Record<string, unknown>> {
    * Applies to the grid; the card tiers already choose their own fields.
    */
   hideBelow?: 'sm' | 'md' | 'lg';
+  /**
+   * A glyph the header shows INSTEAD of its label when the table (its container) is narrower
+   * than 42rem — {@link hideBelow}'s `'sm'` step — Spotify's clock over the duration column. `label` stays the
+   * accessible name, the hover tip and the Columns-menu name; only the painted text gives way.
+   *
+   * 🔴 Why (forge task 2577): apps/music's Length column read "LE…" at 390px. "LENGTH" and its
+   * sort arrow need ~90px, and on a phone those pixels belong to the title, which is already
+   * truncating real titles. A truncated word is a header nobody can read; a glyph is one.
+   */
+  headerIcon?: ReactNode;
   /**
    * Drop order when the table is too NARROW for its declared tracks — HIGHER numbers go first.
    * Columns without one never drop. The table measures its own width and collapses the

package/src/react/components/DropdownMenu.spec.tsx

@@ -91,4 +91,30 @@ describe('DropdownMenu — a list of verbs in groups, destructive last (OVL-7)',
     const items = Array.from(open.querySelectorAll('[role="menuitem"]')).map((el) => el.textContent);
     expect(items.at(-1)).toBe('Delete');
   });
+
+  test('once one row can be checked, every row keeps its column — icons line up', () => {
+    // The player's ⋯ (forge task 2568): Keep offline and Tag are toggles, Share and Delete are
+    // not, and the toggles' check column pushed their icons 24px right of the others'.
+    render(
+      <DropdownMenu
+        items={[
+          { key: 'share', label: 'Share', icon: <span>s</span> },
+          { key: 'keep', label: 'Keep offline', icon: <span>k</span>, checked: false },
+          { key: 'del', label: 'Delete', icon: <span>d</span>, destructive: true },
+        ]}
+        trigger={<B>actions</B>}
+      />,
+    );
+    fireEvent.pointerDown(screen.getByText('actions'), { button: 0, ctrlKey: false });
+    const rows = Array.from((menu() as HTMLElement).querySelectorAll('[role^="menuitem"]')) as HTMLElement[];
+    expect(rows.map((row) => row.getAttribute('role'))).toEqual(['menuitem', 'menuitemcheckbox', 'menuitem']);
+    for (const row of rows) expect(row.className.split(/\s+/)).toContain('pl-8');
+  });
+
+  test('a menu with no row to check keeps no empty check column', () => {
+    render(<DropdownMenu items={[{ key: 'share', label: 'Share' }]} trigger={<B>actions</B>} />);
+    fireEvent.pointerDown(screen.getByText('actions'), { button: 0, ctrlKey: false });
+    const row = (menu() as HTMLElement).querySelector('[role="menuitem"]') as HTMLElement;
+    expect(row.className.split(/\s+/)).not.toContain('pl-8');
+  });
 });

package/src/react/components/DropdownMenu.tsx

@@ -155,11 +155,17 @@ export function DropdownMenu({
 
 function MenuSections({ items }: { items: readonly DropdownMenuItem[] }) {
   const sections = useMemo(() => arrangeMenuItems(items), [items]);
+  /*
+   * One row that can be checked gives every row of this menu the check column, as a native menu
+   * does: otherwise the toggles' icons sit 24px right of their neighbours' (the player's ⋯, forge
+   * task 2568). A submenu is its own menu and decides for itself.
+   */
+  const inset = items.some((item) => !item.divider && item.checked !== undefined);
   return sections.map((section, index) => (
     <Fragment key={section[0]?.key ?? index}>
       {index > 0 && <RDrop.Separator className='my-1 h-px bg-border' />}
       {section.map((item) => (
-        <DropdownItem key={item.key} item={item} />
+        <DropdownItem key={item.key} item={item} inset={inset} />
       ))}
     </Fragment>
   ));
@@ -195,7 +201,7 @@ function ItemTrailing({ item }: { item: DropdownMenuAction }) {
   );
 }
 
-function DropdownItem({ item }: { item: DropdownMenuItem }) {
+function DropdownItem({ item, inset }: { item: DropdownMenuItem; inset: boolean }) {
   const container = useFloatingContainer();
   if (item.divider) {
     return <RDrop.Separator className='my-1 h-px bg-border' />;
@@ -204,7 +210,7 @@ function DropdownItem({ item }: { item: DropdownMenuItem }) {
   if (item.children?.length) {
     return (
       <RDrop.Sub>
-        <RDrop.SubTrigger className={cn(FLOATING_ITEM_BASE, 'justify-between')}>
+        <RDrop.SubTrigger className={cn(FLOATING_ITEM_BASE, 'justify-between', inset && 'pl-8')}>
           <span className='flex items-center gap-2'>
             {item.icon && (
               <span className='inline-flex size-4 items-center justify-center' aria-hidden>
@@ -262,6 +268,7 @@ function DropdownItem({ item }: { item: DropdownMenuItem }) {
       title={item.title ?? item.disabledReason}
       className={cn(
         FLOATING_ITEM_BASE,
+        inset && 'pl-8',
         item.destructive && 'text-destructive focus:bg-destructive/10 focus:text-destructive',
       )}
     >

package/src/react/components/Field.spec.tsx

@@ -200,6 +200,30 @@ describe('Field', () => {
       expect(container.querySelector('div')?.childElementCount).toBe(before as number);
     });
 
+    test('a `status` (the strength meter) holds the reserved row directly under the control, and gives it to an error (task 2466)', () => {
+      const { container } = render(
+        <Harness>
+          <Field name='email' label='Email' reserveErrorSpace status={<span>Strong</span>}>
+            <input
+              // guardrails-ignore no-raw-inputs: test fixture, not product UI
+            />
+          </Field>
+        </Harness>,
+      );
+      const slot = () => container.querySelector('[data-cb-field-status]');
+      // In the reserved row's place — not under an empty one.
+      expect(container.querySelector('[data-cc-field-error-reserved]')).toBeNull();
+      expect(slot()?.textContent).toBe('Strong');
+      const prev = slot()?.previousElementSibling;
+      expect(prev?.tagName === 'INPUT' || prev?.querySelector('input') != null).toBe(true);
+      const before = container.querySelector('div')?.childElementCount;
+
+      setError('email', 'Required');
+      expect(slot()).toBeNull();
+      expect(container.querySelector('[role="alert"]')?.textContent).toContain('Required');
+      expect(container.querySelector('div')?.childElementCount).toBe(before as number);
+    });
+
     test('is OFF by default — turning it on globally is a density change to every form', () => {
       const { container } = render(
         <Harness>

package/src/react/components/Field.tsx

@@ -1,7 +1,7 @@
-import { AlertCircle } from 'lucide-react';
 import { cloneElement, isValidElement, type ReactElement, type ReactNode, useId } from 'react';
 import { get, useFormContext } from 'react-hook-form';
 import { cn } from '../lib/cn.js';
+import { FieldErrorText } from './fieldErrorText.js';
 import {
   DESCRIPTION_FOLD_CHARS,
   FIELD_WIDTH_CLASS,
@@ -64,6 +64,14 @@ interface FieldBaseProps {
    * reachability gate caught exactly that: "Create an account" did nothing.
    */
   reserveErrorSpace?: boolean;
+  /**
+   * Live feedback on the VALUE — a password-strength meter, a character count — in the error's
+   * slot under the control: shown while there is no error, giving the slot to the error while
+   * one shows (FRM-10), and never folded into the ⓘ the way help is. With `reserveErrorSpace`
+   * it holds the reserved line itself, so it must fit one line of `text-sm`. (Forge task 2466:
+   * the meter used to sit BELOW the reserved empty line, 34px from the field it measures.)
+   */
+  status?: ReactNode;
   /**
    * How wide the CONTROL may grow — a cap, never a fixed width (see {@link FieldWidth}). The
    * label, description and error keep the row's full width.
@@ -140,6 +148,7 @@ export function Field({
   children,
   className,
   reserveErrorSpace = false,
+  status,
   width,
   descriptionOnNarrow = 'auto',
   layout = 'stacked',
@@ -293,10 +302,11 @@ export function Field({
       ) : null}
 
       {error ? (
-        <p id={errId} role='alert' className='m-0 flex items-center gap-1.5 text-sm text-field-error' data-cb-field-error=''>
-          <AlertCircle className='size-4 shrink-0' aria-hidden />
-          {error}
-        </p>
+        <FieldErrorText id={errId}>{error}</FieldErrorText>
+      ) : status != null ? (
+        <div className='min-h-[1lh] text-sm' data-cb-field-status=''>
+          {status}
+        </div>
       ) : reserveErrorSpace && (description == null || foldsAlways) ? (
         // `aria-hidden` + no `role`: this is LAYOUT, and a screen reader must not
         // meet an empty alert region. The height is one line of the same `text-sm`

package/src/react/components/ListToolbar.tsx

@@ -77,6 +77,11 @@ export interface ListToolbarProps {
  * keeps the controls right when everything fits on one line and lets them ride down as
  * a group when it does not.
  *
+ * Except with chips, from `sm:`: a strip sized to its content took the whole row and wrapped the
+ * controls under it (18 genres in flix, at 1440 AND 2560 — forge task 2560), breaking the one
+ * line this component exists for. There the row stops wrapping and the strip becomes a scroll
+ * lane (`flex-1`, `min-w-0` from its own root) between a fixed search box and fixed controls.
+ *
  * No `role='toolbar'`: that role promises arrow-key roving focus between its controls,
  * which would take the arrow keys away from the text box and the native `<select>`
  * that live on this line. Tab order is the correct affordance here.
@@ -115,7 +120,16 @@ export function ListToolbar({
   const showRight = Boolean(sort) || Boolean(view) || Boolean(actions);
 
   return (
-    <div className={cn('flex flex-wrap items-center gap-x-3 gap-y-2', className)}>
+    <div
+      className={cn(
+        'flex flex-wrap items-center gap-x-3 gap-y-2',
+        // From `sm:` a row WITH chips never wraps: the chips are the one item that can give way
+        // (a scroll lane), so they take what the search box and the controls leave. Without
+        // chips nothing on the line can scroll, so it keeps wrapping rather than overflow.
+        showChips && 'sm:flex-nowrap',
+        className,
+      )}
+    >
       {showSearch ? (
         // The one search box (magnifier + themed Input). A bare Input drew an empty, unmarked
         // rectangle whenever a caller passed no placeholder (forge task 2514). `syntax={false}`:
@@ -129,7 +143,7 @@ export function ListToolbar({
           // Full width on a phone (the chips then wrap beneath it, still tappable);
           // a fixed, modest column from `sm:` so the chips share the line rather than
           // being pushed off it by a box that grows with the container.
-          className='w-full min-w-40 sm:w-56'
+          className='w-full min-w-40 sm:w-56 sm:shrink-0'
         />
       ) : null}
       {showChips ? (
@@ -139,11 +153,14 @@ export function ListToolbar({
           onChange={onChipChange}
           multi={multiChips}
           {...(chipsAllLabel === undefined ? {} : { allLabel: chipsAllLabel })}
+          // The scroll lane. Sized to its CONTENT, twenty chips took the whole row and pushed
+          // sort/view onto a second line at 1440 and 2560 (forge task 2560, flix's genres).
+          className='sm:flex-1'
         />
       ) : null}
       {filters}
       {showRight ? (
-        <span className='ml-auto flex flex-wrap items-center gap-2'>
+        <span className={cn('ml-auto flex flex-wrap items-center gap-2', showChips && 'sm:shrink-0 sm:flex-nowrap')}>
           {sort}
           {view}
           {actions}

package/src/react/components/SecretInput.tsx

@@ -1,4 +1,4 @@
-import { type CSSProperties, type KeyboardEvent, type ReactNode, useState } from 'react';
+import { type CSSProperties, type FocusEvent, type KeyboardEvent, type ReactNode, useState } from 'react';
 import { useCopyToClipboard } from '../hooks/useCopyToClipboard.js';
 import { CONTROL_HEIGHT_CLASS, type ControlSize, declareFieldWidth } from '../lib/field.js';
 import { resolveClass, resolveStyle, type StyleableProps } from '../styling.js';
@@ -123,6 +123,8 @@ export interface SecretInputProps extends StyleableProps<SecretInputSlot> {
   disabled?: boolean;
   /** Fires on Enter in THIS field — the login/rotation forms submit from their last field. */
   onEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
+  /** Fires when the INPUT loses focus — a form library's touched/validate-on-blur hook. */
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
   className?: string;
   style?: CSSProperties;
   /** Container height on the shared control-height scale (`--control-h-*`, task
@@ -156,6 +158,7 @@ export const SecretInput = ({
   autoFocus = false,
   disabled,
   onEnter,
+  onBlur,
   className,
   style,
   classNames,
@@ -206,6 +209,7 @@ export const SecretInput = ({
         value={value}
         readOnly={readOnly}
         onChange={onChange ? (e) => onChange(e.target.value) : undefined}
+        onBlur={onBlur}
         onKeyDown={onEnter ? (e) => {
           if (e.key === 'Enter') onEnter(e);
         } : undefined}

package/src/react/components/auth/AuthCard.spec.tsx

@@ -23,6 +23,14 @@ describe('AuthCard', () => {
     expect(getByText('Footer')).not.toBeNull();
   });
 
+  test('embedded, it paints no page background of its own — the host’s surface shows through (task 2466)', () => {
+    const page = render(<AuthCard>x</AuthCard>);
+    expect((page.container.firstElementChild as HTMLElement).className).toContain('bg-background');
+    page.unmount();
+    const embedded = render(<AuthCard fullScreen={false}>x</AuthCard>);
+    expect((embedded.container.firstElementChild as HTMLElement).className).not.toContain('bg-background');
+  });
+
   test('omits the header block entirely when no title/subtitle/logo', () => {
     const { container } = render(
       <AuthCard>

package/src/react/components/auth/AuthCard.tsx

@@ -57,7 +57,10 @@ export function AuthCard({
     <div
       className={cn(
         'flex w-full flex-col items-center justify-center gap-6 p-4',
-        aurora ? 'dark cb-aurora cb-auth-aurora' : 'bg-background',
+        // The page colour belongs to the full-screen page only. Embedded, the card sits on its
+        // host's surface — painting `bg-background` there drew a slab around it, a box on a box
+        // inside the host's panel (forge task 2466).
+        aurora ? 'dark cb-aurora cb-auth-aurora' : fullScreen && 'bg-background',
         fullScreen && 'min-h-dvh',
         className,
       )}

package/src/react/components/auth/PasswordSetFields.tsx

@@ -36,17 +36,13 @@ export function PasswordSetFields({
 
   return (
     <>
-      <div className='flex flex-col gap-1.5'>
-        <AuthPasswordField
-          name={passwordName}
-          label={passwordLabel}
-          autoComplete='new-password'
-          autoFocus={autoFocus}
-        />
-        {showStrength ? (
-          <PasswordStrengthMeter value={password ?? ''} minLength={minPasswordLength} />
-        ) : null}
-      </div>
+      <AuthPasswordField
+        name={passwordName}
+        label={passwordLabel}
+        autoComplete='new-password'
+        autoFocus={autoFocus}
+        status={showStrength && password ? <PasswordStrengthMeter value={password} minLength={minPasswordLength} /> : undefined}
+      />
       {showConfirm ? (
         <AuthPasswordField name={confirmName} label={confirmLabel} autoComplete='new-password' />
       ) : null}

package/src/react/components/auth/PasswordStrengthMeter.tsx

@@ -40,9 +40,11 @@ export function PasswordStrengthMeter({
   if (!value) return null;
   const tone = SEGMENT_TONE[level as Exclude<PasswordStrengthLevel, 'empty'>];
 
+  // ONE line (forge task 2466): it sits in a field's error slot (`Field status`), which is one
+  // line of `text-sm` tall, so the bars and the word share a row rather than stacking.
   return (
-    <div className={cn('flex flex-col gap-1', className)}>
-      <div className='flex gap-1' aria-hidden>
+    <div className={cn('flex min-h-[1lh] items-center gap-3 text-sm', className)}>
+      <div className='flex flex-1 gap-1' aria-hidden>
         {[0, 1, 2, 3].map((i) => (
           <span
             key={i}
@@ -54,7 +56,7 @@ export function PasswordStrengthMeter({
         ))}
       </div>
       <p
-        className='text-xs text-muted-foreground'
+        className='m-0 shrink-0 text-xs text-muted-foreground'
         role='status'
         aria-label={`Password strength: ${LABEL[level]}`}
       >

package/src/react/components/auth/RegisterForm.tsx

@@ -82,12 +82,12 @@ export function RegisterForm({
     >
       {children}
 
-      <div className='flex flex-col gap-1.5'>
-        <AuthPasswordField name='password' label='Password' autoComplete='new-password' />
-        {showStrength ? (
-          <PasswordStrengthMeter value={password} minLength={minPasswordLength} />
-        ) : null}
-      </div>
+      <AuthPasswordField
+        name='password'
+        label='Password'
+        autoComplete='new-password'
+        status={showStrength && password ? <PasswordStrengthMeter value={password} minLength={minPasswordLength} /> : undefined}
+      />
 
       <AuthPasswordField
         name='confirmPassword'

package/src/react/components/auth/SignupForm.spec.tsx

@@ -52,6 +52,23 @@ describe('SignupForm', () => {
     expect(queryByText(/Password strength/)).not.toBeNull();
   });
 
+  test('a password validates on BLUR, like every other field — not only on submit (task 2466)', async () => {
+    const { container, findByText } = render(<SignupForm onSubmit={async () => {}} />);
+    const password = container.querySelector('#cb-f-password') as HTMLInputElement;
+    fireEvent.change(password, { target: { value: 'short' } });
+    fireEvent.blur(password);
+    await findByText('Use at least 8 characters');
+  });
+
+  test("the terms error is a field error like every other — icon, and wired to the checkbox (task 2466)", async () => {
+    const { getByRole, findByText } = render(<SignupForm onSubmit={async () => {}} terms='I agree to the terms' />);
+    fireEvent.click(getByRole('button', { name: 'Create account' }));
+    const error = (await findByText('Please accept to continue')).closest('p') as HTMLElement;
+    expect(error.hasAttribute('data-cb-field-error')).toBe(true);
+    expect(error.querySelector('svg')).not.toBeNull();
+    expect(getByRole('checkbox').getAttribute('aria-describedby')).toBe(error.id);
+  });
+
   test('requires the terms checkbox when terms are given', async () => {
     const onSubmit = mock(async () => {});
     const { container, getByRole, findByText } = render(

package/src/react/components/auth/SignupForm.tsx

@@ -1,8 +1,9 @@
-import { type ReactNode, useMemo } from 'react';
+import { type ReactNode, useId, useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { makeFormConfig } from '../../lib/form.js';
 import { Checkbox } from '../Checkbox.js';
+import { FieldErrorText } from '../fieldErrorText.js';
 import { AuthForm } from './AuthForm.js';
 import { AuthPasswordField, AuthTextField } from './fields.js';
 import { PasswordStrengthMeter } from './PasswordStrengthMeter.js';
@@ -93,6 +94,7 @@ export function SignupForm({
   );
 
   const password = form.watch('password');
+  const termsErrorId = useId();
 
   return (
     <AuthForm
@@ -115,12 +117,12 @@ export function SignupForm({
 
       {children}
 
-      <div className='flex flex-col gap-1.5'>
-        <AuthPasswordField name='password' label='Password' autoComplete='new-password' />
-        {showStrength ? (
-          <PasswordStrengthMeter value={password} minLength={minPasswordLength} />
-        ) : null}
-      </div>
+      <AuthPasswordField
+        name='password'
+        label='Password'
+        autoComplete='new-password'
+        status={showStrength && password ? <PasswordStrengthMeter value={password} minLength={minPasswordLength} /> : undefined}
+      />
 
       {showConfirm ? (
         <AuthPasswordField
@@ -140,12 +142,11 @@ export function SignupForm({
                 checked={field.value}
                 onCheckedChange={(v) => field.onChange(v === true)}
                 aria-invalid={form.formState.errors.acceptTerms ? true : undefined}
+                aria-describedby={form.formState.errors.acceptTerms ? termsErrorId : undefined}
                 label={terms}
               />
               {form.formState.errors.acceptTerms ? (
-                <p role='alert' className='text-sm text-field-error'>
-                  {form.formState.errors.acceptTerms.message as string}
-                </p>
+                <FieldErrorText id={termsErrorId}>{form.formState.errors.acceptTerms.message as string}</FieldErrorText>
               ) : null}
             </div>
           )}

package/src/react/components/auth/TotpEntry.spec.tsx

@@ -32,6 +32,33 @@ describe('TotpEntry', () => {
     expect(onSubmit).toHaveBeenCalledWith({ code: 'ABCDE-FGHIJ', recovery: true });
   });
 
+  test('a refused code is cleared and the caret goes back to the first box (task 2466)', async () => {
+    const onSubmit = mock(async () => {
+      throw { message: 'That code has expired.' };
+    });
+    const { container, getByRole, findByText } = render(<TotpEntry onSubmit={onSubmit} autoSubmit={false} />);
+    const boxes = Array.from(container.querySelectorAll('input')) as HTMLInputElement[];
+    for (let i = 0; i < 6; i++) fireEvent.change(boxes[i], { target: { value: String(i + 1) } });
+    fireEvent.click(getByRole('button', { name: 'Verify' }));
+    await findByText('That code has expired.');
+    const after = Array.from(container.querySelectorAll('input')) as HTMLInputElement[];
+    await waitFor(() => expect(after.map((b) => b.value).join('')).toBe(''));
+    expect(document.activeElement).toBe(after[0]);
+  });
+
+  test('a refused RECOVERY code stays, for the user to correct', async () => {
+    const onSubmit = mock(async () => {
+      throw { message: 'That recovery code was already used.' };
+    });
+    const { container, getByRole, findByText } = render(<TotpEntry onSubmit={onSubmit} autoSubmit={false} />);
+    fireEvent.click(getByRole('button', { name: 'Use a recovery code instead' }));
+    const input = container.querySelector('#cb-f-code') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'ABCDE-FGHIJ' } });
+    fireEvent.click(getByRole('button', { name: 'Verify' }));
+    await findByText('That recovery code was already used.');
+    expect((container.querySelector('#cb-f-code') as HTMLInputElement).value).toBe('ABCDE-FGHIJ');
+  });
+
   test('omits the recovery toggle when allowRecoveryCode is false', () => {
     const { queryByRole } = render(
       <TotpEntry onSubmit={async () => {}} allowRecoveryCode={false} autoSubmit={false} />,

package/src/react/components/auth/TotpEntry.tsx

@@ -72,11 +72,26 @@ export function TotpEntry({
     form.clearErrors();
   };
 
+  // A refused authenticator code is dead — it rotates in seconds — so clear it and put the caret
+  // back on the first box, the way GitHub and Stripe do (forge task 2466). A recovery code is
+  // long and typed by hand, so it stays for the user to correct.
+  const submit: AuthSubmitHandler<TotpValues> = async (values) => {
+    try {
+      return await onSubmit(values);
+    } catch (err) {
+      if (!values.recovery) {
+        form.setValue('code', '');
+        formRef.current?.querySelector<HTMLInputElement>('input')?.focus();
+      }
+      throw err;
+    }
+  };
+
   return (
     <AuthForm
       form={form}
       formRef={formRef}
-      onSubmit={onSubmit}
+      onSubmit={submit}
       onSuccess={onSuccess}
       mapError={mapError}
       submitLabel={submitLabel}
@@ -128,6 +143,8 @@ export function TotpEntry({
                   value={field.value}
                   onChange={field.onChange}
                   length={length}
+                  // Spread across the column, so the boxes end where every other row does.
+                  className='w-full justify-between'
                   onComplete={autoSubmit ? () => formRef.current?.requestSubmit() : undefined}
                   aria-label='Authentication code'
                   aria-invalid={aria['aria-invalid']}

package/src/react/components/auth/fields.tsx

@@ -68,6 +68,8 @@ export interface AuthPasswordFieldProps {
   description?: ReactNode;
   required?: boolean;
   autoFocus?: boolean;
+  /** Live feedback under the field — the strength meter — in its error slot ({@link Field}'s `status`). */
+  status?: ReactNode;
 }
 
 /**
@@ -83,10 +85,11 @@ export function AuthPasswordField({
   description,
   required,
   autoFocus,
+  status,
 }: AuthPasswordFieldProps) {
   const { control } = useFormContext();
   return (
-    <Field name={name} label={label} description={description} required={required} reserveErrorSpace>
+    <Field name={name} label={label} description={description} required={required} reserveErrorSpace status={status}>
       {(aria) => (
         <Controller
           name={name}
@@ -97,6 +100,10 @@ export function AuthPasswordField({
               name={field.name}
               value={field.value ?? ''}
               onChange={field.onChange}
+              // 🔴 Without this a password never validated on blur, only on submit — the forms
+              // are `mode: 'onBlur'`, and RHF only learns of a blur through `field.onBlur`
+              // (forge task 2466: "Use at least 8 characters" never showed until submit).
+              onBlur={field.onBlur}
               label={labelText(label, name)}
               placeholder={placeholder}
               autoComplete={autoComplete}