cursedbelt 5.81.2 → 5.85.0

package/src/react/components/Skeleton.tsx

@@ -57,9 +57,9 @@ export interface SkeletonListProps {
 
 /** A stack of full-width rows — the sensible default skeleton for list/table pages
  *  (used as `QueryBoundary`'s loading fallback). */
-export function SkeletonList({ rows = 6, className }: SkeletonListProps) {
+export function SkeletonList({ rows = 6, className, ...rest }: SkeletonListProps) {
   return (
-    <div className={cn('flex flex-col gap-3', className)} aria-hidden data-cb-skeleton='rows'>
+    <div {...rest} className={cn('flex flex-col gap-3', className)} aria-hidden data-cb-skeleton='rows'>
       {Array.from({ length: rows }).map((_, i) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length skeleton placeholder rows that never reorder
         <Skeleton key={`skeleton-row-${i}`} className='h-14' />
@@ -69,9 +69,9 @@ export function SkeletonList({ rows = 6, className }: SkeletonListProps) {
 }
 
 /** A strip of stat-tile placeholders — the shape of a `StatTileGrid` (label, value, sub). */
-export function SkeletonTiles({ tiles = 4, className }: { tiles?: number; className?: string }) {
+export function SkeletonTiles({ tiles = 4, className, ...rest }: { tiles?: number; className?: string }) {
   return (
-    <div className={cn('grid grid-cols-2 gap-3 md:grid-cols-4', className)} aria-hidden data-cb-skeleton='tiles'>
+    <div {...rest} className={cn('grid grid-cols-2 gap-3 md:grid-cols-4', className)} aria-hidden data-cb-skeleton='tiles'>
       {Array.from({ length: tiles }).map((_, i) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length skeleton placeholder tiles that never reorder
         <div key={`skeleton-tile-${i}`} className='flex flex-col gap-2 rounded-lg border border-border p-3'>
@@ -86,11 +86,11 @@ export function SkeletonTiles({ tiles = 4, className }: { tiles?: number; classN
 
 /** A chart frame's placeholder at the height the chart will take at this width (CHT-9) —
  *  the same `chartHeight` the frame uses, so nothing moves when the chart lands. */
-export function SkeletonChart({ className }: { className?: string }) {
+export function SkeletonChart({ className, ...rest }: { className?: string }) {
   const ref = useRef<HTMLDivElement>(null);
   const { width } = useElementSize(ref, { layout: true });
   return (
-    <div ref={ref} className={cn('w-full', className)} aria-hidden data-cb-skeleton='chart'>
+    <div {...rest} ref={ref} className={cn('w-full', className)} aria-hidden data-cb-skeleton='chart'>
       <Skeleton className='w-full rounded-md' style={{ height: chartHeight(width) }} />
     </div>
   );
@@ -103,13 +103,14 @@ export function ContentSkeleton({
   variant = 'rows',
   count,
   className,
+  ...rest
 }: {
   variant?: SkeletonVariant;
   /** Rows or tiles to draw. */
   count?: number;
   className?: string;
 }) {
-  if (variant === 'tiles') return <SkeletonTiles tiles={count} className={className} />;
-  if (variant === 'chart') return <SkeletonChart className={className} />;
-  return <SkeletonList rows={count} className={className} />;
+  if (variant === 'tiles') return <SkeletonTiles {...rest} tiles={count} className={className} />;
+  if (variant === 'chart') return <SkeletonChart {...rest} className={className} />;
+  return <SkeletonList {...rest} rows={count} className={className} />;
 }

package/src/react/components/Slider.tsx

@@ -51,9 +51,11 @@ export function Slider({
   'aria-valuetext': ariaValueText,
   ticks,
   className,
+  ...rest
 }: SliderProps) {
   return (
     <RadixSlider.Root
+      {...rest}
       value={value == null ? undefined : [value]}
       defaultValue={defaultValue == null ? undefined : [defaultValue]}
       onValueChange={(v) => onChange?.(v[0] ?? min)}
@@ -116,10 +118,12 @@ export function RangeSlider({
   disabled,
   thumbLabels = ['Minimum', 'Maximum'],
   className,
+  ...rest
 }: RangeSliderProps) {
   const pair = (v: number[]): [number, number] => [v[0] ?? min, v[1] ?? max];
   return (
     <RadixSlider.Root
+      {...rest}
       value={value}
       defaultValue={defaultValue}
       onValueChange={(v) => onChange?.(pair(v))}

package/src/react/components/SliderField.tsx

@@ -187,6 +187,7 @@ export function SliderField({
   width = 'capped',
   'aria-label': ariaLabel,
   className,
+  ...rest
 }: SliderFieldProps) {
   const id = useId();
   const helpId = `${id}-help`;
@@ -296,6 +297,7 @@ export function SliderField({
 
   return (
     <div
+      {...rest}
       className={cn('cb-slider-row', className)}
       data-cb-field=''
       data-cb-slider-width={width}

package/src/react/components/Sparkline.tsx

@@ -11,7 +11,7 @@ export interface SparklineProps {
  * {@link StatTile} and {@link StatStrip}. Purely decorative (`aria-hidden`):
  * pair it with a real value/label; never make it the only carrier of a number.
  */
-export function Sparkline({ data, className }: SparklineProps) {
+export function Sparkline({ data, className, ...rest }: SparklineProps) {
   if (data.length < 2) return null;
   const min = Math.min(...data);
   const max = Math.max(...data);
@@ -21,6 +21,7 @@ export function Sparkline({ data, className }: SparklineProps) {
     .join(' ');
   return (
     <svg
+      {...rest}
       viewBox='0 0 100 100'
       preserveAspectRatio='none'
       className={cn('h-8 w-full text-accent', className)}

package/src/react/components/Spinner.tsx

@@ -10,9 +10,10 @@ export interface SpinnerProps {
 
 /** An accent-tinted loading spinner. Announced as a `status` region with a
  *  "Loading" label so it isn't silent to assistive tech. */
-export function Spinner({ className, size = 'md' }: SpinnerProps) {
+export function Spinner({ className, size = 'md', ...rest }: SpinnerProps) {
   return (
     <Loader2
+      {...rest}
       className={cn('animate-spin text-accent', SIZE[size], className)}
       role='status'
       aria-label='Loading'

package/src/react/components/SplitButton.tsx

@@ -51,6 +51,7 @@ export function SplitButton({
   menuLabel = 'More options',
   className,
   tooltip,
+  ...rest
 }: SplitButtonProps) {
   const menuItems: DropdownMenuItem[] = items.map((item) => ({
     key: item.label,
@@ -63,7 +64,7 @@ export function SplitButton({
 
   return (
     // One action drawn as two buttons: the design audit counts it once (FRM-12).
-    <ButtonGroup className={className} data-cb-split-button=''>
+    <ButtonGroup {...rest} className={className} data-cb-split-button=''>
       <Button
         variant={variant}
         size={size}

package/src/react/components/SplitPane.tsx

@@ -63,6 +63,7 @@ export function SplitPane({
   disabled,
   separatorVariant,
   className,
+  ...rest
 }: SplitPaneProps) {
   const leaves: PanelGridLeaf[] = panels.map((p) => ({
     id: p.id,
@@ -76,6 +77,7 @@ export function SplitPane({
   }));
   return (
     <PanelGrid
+      {...rest}
       root={{ type: 'split', id: 'root', direction, children: leaves }}
       storageKey={storageKey}
       disabled={disabled}

package/src/react/components/StarRating.tsx

@@ -114,6 +114,7 @@ export function StarRating({
   readOnly = false,
   disabled = false,
   className,
+  ...rest
 }: StarRatingProps) {
   const rowRef = useRef<HTMLDivElement>(null);
   const [hover, setHover] = useState<number | null>(null);
@@ -145,7 +146,7 @@ export function StarRating({
         ))}
       </div>
     );
-    return <Tooltip content={value ? `${value} / ${max}` : 'unrated'}>{row}</Tooltip>;
+    return <Tooltip {...rest} content={value ? `${value} / ${max}` : 'unrated'}>{row}</Tooltip>;
   }
 
   // ── Whole steps: real buttons, one per star ───────────────────────────────
@@ -155,7 +156,7 @@ export function StarRating({
       // reasoning, kept): each button's accessible name already carries the label
       // ("Rate 3 out of 5 on A Song"), so a labelled group announces the same thing
       // twice and adds nothing a screen reader does not already have.
-      <span className={cn('inline-flex w-fit gap-0.5', className)}>
+      <span {...rest} className={cn('inline-flex w-fit gap-0.5', className)}>
         {stars.map((i) => {
           const star = i + 1;
           return (
@@ -223,6 +224,7 @@ export function StarRating({
 
   return (
     <div
+      {...rest}
       ref={rowRef}
       role='slider'
       aria-label={label ? `rating for ${label}` : 'rating'}

package/src/react/components/StatStrip.tsx

@@ -92,7 +92,13 @@ function ItemBody({ item, orientation }: { item: StatStripItem; orientation: 'ho
  * {@link StatTileGrid} + {@link StatTile} instead when the tiles ARE the page
  * content (a dashboard of equal-weight stats with bars/progress inside).
  */
-export function StatStrip({ items, orientation = 'horizontal', flat = false, className }: StatStripProps) {
+export function StatStrip({
+  items,
+  orientation = 'horizontal',
+  flat = false,
+  className,
+  ...rest
+}: StatStripProps) {
   const horizontal = orientation === 'horizontal';
   // A horizontal strip cuts its last tile mid-word when the pane is narrower than
   // the tiles' floors. That is the intended behavior (below the floor we scroll,
@@ -102,6 +108,7 @@ export function StatStrip({ items, orientation = 'horizontal', flat = false, cla
   const fade = useScrollEdgeFade();
   const row = (
     <div
+      {...rest}
       className={cn(
         horizontal ? 'flex divide-x divide-border' : 'flex flex-col divide-y divide-border',
         className,

package/src/react/components/StatTile.tsx

@@ -223,6 +223,7 @@ export function StatTile({
   copyValue,
   delta,
   budget,
+  ...rest
 }: StatTileProps) {
   const gridSize = useContext(GridValueSize);
   const size = valueSize ?? gridSize ?? statValueSize(value);
@@ -236,7 +237,7 @@ export function StatTile({
   const body = (
     // `flex-1` only when a tone bar sits beside the body — a bare tile keeps its
     // pre-tone layout exactly, so no existing embedding shifts.
-    <div className={cn('flex min-w-0 flex-col justify-between gap-2', tone && 'flex-1')}>
+    <div {...rest} className={cn('flex min-w-0 flex-col justify-between gap-2', tone && 'flex-1')}>
       <div className='flex items-center justify-between gap-2'>
         <span className='flex min-w-0 items-center gap-1'>
           <TruncatedText className='cb-meta-label min-w-0'>{label}</TruncatedText>

package/src/react/components/StatTileGrid.tsx

@@ -79,6 +79,7 @@ export function StatTileGrid({
   flat = false,
   valueSize,
   className,
+  ...rest
 }: StatTileGridProps) {
   const size = valueSize ?? gridValueSize(children);
   // `min(<w>, 100%)` keeps a single narrow container from overflowing horizontally;
@@ -86,7 +87,7 @@ export function StatTileGrid({
   // a short strip into comically wide tiles.
   const columns = `repeat(${fill ? 'auto-fit' : 'auto-fill'}, minmax(min(${minTileWidth}, 100%), 1fr))`;
   return (
-    <StatTileValueSizeProvider value={size}>
+    <StatTileValueSizeProvider {...rest} value={size}>
     <div className={cn('grid gap-3', className)} style={{ gridTemplateColumns: columns }}>
       {Children.map(children, (child) => {
         if (child == null || child === false) return null;

package/src/react/components/SwatchPicker.tsx

@@ -84,6 +84,7 @@ export function SwatchPicker<T extends string = string>({
   activationMode = 'automatic',
   'aria-label': ariaLabel = 'Color',
   className,
+  ...rest
 }: SwatchPickerProps<T>) {
   const manual = activationMode === 'manual';
   // Radix checks the radio an arrow key lands on by calling `click()` from inside its focus
@@ -95,6 +96,7 @@ export function SwatchPicker<T extends string = string>({
   const grid: CSSProperties | undefined = columns ? { gridTemplateColumns: `repeat(${columns}, max-content)` } : undefined;
   return (
     <RadioGroup.Root
+      {...rest}
       aria-label={ariaLabel}
       value={value ?? ''}
       onValueChange={(v) => onChange(v as T)}

package/src/react/components/Tabs.tsx

@@ -80,6 +80,7 @@ export function Tabs<T extends string = string>({
   className,
   contentClassName,
   'aria-label': ariaLabel = 'Tabs',
+  ...passThrough
 }: TabsProps<T>): JSX.Element {
   const listRef = useRef<HTMLDivElement | null>(null);
   const fade = useScrollFade(listRef);
@@ -91,6 +92,7 @@ export function Tabs<T extends string = string>({
 
   return (
     <RadixTabs.Root
+      {...passThrough}
       value={value}
       defaultValue={defaultValue ?? items[0]?.value}
       onValueChange={(v) => {

package/src/react/components/TagStrip.tsx

@@ -40,6 +40,7 @@ export function TagStrip({
   tagMaxWidthClassName = 'max-w-40',
   'aria-label': ariaLabel = 'Tags',
   className,
+  ...rest
 }: TagStripProps) {
   // The edge affordance is cursedbelt's one horizontal-scroll cue — see
   // `useScrollEdgeFade`, extracted FROM this component so `DataTable` could
@@ -48,6 +49,7 @@ export function TagStrip({
 
   return (
     <div
+      {...rest}
       className={cn('min-w-0', className)}
       style={fade.maskStyle}
     >

package/src/react/components/TagsInput.tsx

@@ -67,6 +67,7 @@ export function TagsInput({
   'aria-describedby': ariaDescribedBy,
   className,
   size = 'md',
+  ...rest
 }: TagsInputProps) {
   const [draft, setDraft] = useState('');
   const listId = useId();
@@ -96,6 +97,7 @@ export function TagsInput({
 
   return (
     <div
+      {...rest}
       aria-invalid={ariaInvalid}
       className={cn(
         // `py-1`, not `py-1.5`: the empty row is a 20px line + 8px + 2px border, under the min-height, so it

package/src/react/components/ThresholdMeter.tsx

@@ -68,13 +68,14 @@ export function ThresholdMeter({
   meta,
   className,
   size = 'md',
+  ...rest
 }: ThresholdMeterProps) {
   const ratio = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;
   const tone = thresholdToneOf(ratio, thresholds);
   const pct = Math.round(ratio * 100);
 
   return (
-    <div className={cn('flex min-w-0 flex-col gap-1.5', className)}>
+    <div {...rest} className={cn('flex min-w-0 flex-col gap-1.5', className)}>
       <div className='flex min-w-0 items-baseline justify-between gap-2'>
         <span className='truncate text-sm font-medium text-foreground'>{label}</span>
         {meta && <span className='shrink-0 text-xs text-muted-foreground'>{meta}</span>}

package/src/react/components/TooltipImpl.tsx

@@ -49,6 +49,7 @@ export default function TooltipImpl({
   iconClassName,
   className,
   arm,
+  ...rest
 }: TooltipImplProps) {
   const hasHover = useHasHover();
   // An empty hint is rendered (so the tree is the same shape whether or not there is one —
@@ -336,6 +337,7 @@ export default function TooltipImpl({
             host span drives it for a disabled one. */}
         <RTooltip.Root open={open && hasContent} onOpenChange={setOpen}>
           <RTooltip.Trigger
+            {...rest}
             asChild
             // Radix opens the tooltip on ANY focus — including PROGRAMMATIC focus, e.g. a
             // Dialog auto-focusing its Close button on open. That phantom tooltip is noise,
@@ -449,7 +451,7 @@ export default function TooltipImpl({
     return (
       <RTooltip.Provider delayDuration={HOVER_HINT_INSTANT_MS}>
         <RTooltip.Root open={open} onOpenChange={onTouchOpenChange}>
-          <RTooltip.Trigger asChild {...pressProps}>
+          <RTooltip.Trigger {...rest} asChild {...pressProps}>
             {children}
           </RTooltip.Trigger>
           {bubble}
@@ -462,7 +464,7 @@ export default function TooltipImpl({
   // tooltip (so a tap on the trigger still does its own action).
   if (mobile === 'icon') {
     return (
-      <span className='inline-flex items-center gap-1'>
+      <span {...rest} className='inline-flex items-center gap-1'>
         {children}
         {/* Instant, and legitimately so: the (i) beside the trigger exists for no other
             purpose than showing this hint, and it is opened by a TAP. There is no
@@ -504,7 +506,7 @@ export default function TooltipImpl({
   return (
     <RTooltip.Provider delayDuration={HOVER_HINT_INSTANT_MS}>
       <RTooltip.Root open={open} onOpenChange={onTouchOpenChange}>
-        <RTooltip.Trigger asChild {...touchTriggerProps}>
+        <RTooltip.Trigger {...rest} asChild {...touchTriggerProps}>
           {/* On touch, tapping the trigger toggles the tooltip. Radix's Trigger
               (asChild) merges the real keyboard + ARIA interaction onto this element;
               the bare onClick here is only the tap affordance. */}

package/src/react/components/TreeView.tsx

@@ -197,6 +197,7 @@ export function TreeView({
   className,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
+  ...rest
 }: TreeViewProps) {
   // Every root, in order, whichever way they were given: keyboard paths and parents cross sections.
   const nodes = useMemo(
@@ -374,6 +375,7 @@ export function TreeView({
   return (
     <TreeContext.Provider value={ctx}>
       <div
+        {...rest}
         role='tree'
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}

package/src/react/components/Wizard/ReviewStep.tsx

@@ -43,6 +43,7 @@ export function ReviewStep<T extends FieldValues>({
   form,
   fieldSpecs,
   displayValue,
+  ...rest
 }: ReviewStepProps<T>) {
   const values = form.getValues();
   const labelFor = (key: string): ReactNode => {
@@ -55,7 +56,7 @@ export function ReviewStep<T extends FieldValues>({
   };
 
   return (
-    <Stack gap={6}>
+    <Stack {...rest} gap={6}>
       {steps.map((s) => (
         <Surface key={s.id} level='flat' pad='sm'>
           <Section title={s.title}>

package/src/react/components/Wizard/Stepper.tsx

@@ -54,10 +54,12 @@ export function Stepper({
   compact,
   'aria-label': ariaLabel = 'Form steps',
   className,
+  ...rest
 }: StepperProps) {
   const inert = readOnly || !onJump;
   return (
     <nav
+      {...rest}
       aria-label={ariaLabel}
       data-cb-stepper=''
       // ScrollArea always renders a plain <div> that owns its own ref/style/data-attrs

package/src/react/components/Wizard/Wizard.tsx

@@ -54,6 +54,7 @@ export function Wizard<T extends FieldValues>({
   extraActions,
   labels,
   className,
+  ...rest
 }: WizardProps<T>) {
   // Lazy initializer: load any saved draft synchronously on first render and seed the
   // form with it directly — no defaults-then-reset flash, no mount effect to lint around.
@@ -175,7 +176,7 @@ export function Wizard<T extends FieldValues>({
   }
 
   return (
-    <FormProvider {...form}>
+    <FormProvider {...rest} {...form}>
       <form
         noValidate
         data-cb-wizard=''

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

@@ -0,0 +1,42 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { cleanup, render } from '@testing-library/react';
+import { ExternalLink } from './ExternalLink.js';
+import { KeyBadge } from './KeyBadge.js';
+import { MeterList } from './MeterList.js';
+import { StatStrip } from './StatStrip.js';
+import { StatTile } from './StatTile.js';
+
+afterEach(cleanup);
+
+/**
+ * 🔴 The roots the 3451 codemod could not edit blindly — conditional, variable and call roots —
+ * each forward a `data-testid` on EVERY branch they render (forge task 3452). The AST check
+ * (`scripts/attributesForwarded.ts`) proves a rest is spread; this proves it reaches the DOM.
+ */
+describe('a data-testid reaches the DOM on every branch', () => {
+  test('KeyBadge — alone, and wrapped with its description', () => {
+    expect(render(<KeyBadge data-testid='bare'>K</KeyBadge>).getByTestId('bare').textContent).toBe('K');
+    const wrapped = render(
+      <KeyBadge data-testid='described' description='what it does'>
+        K
+      </KeyBadge>,
+    ).getByTestId('described');
+    expect(wrapped.textContent).toContain('what it does');
+  });
+
+  test('ExternalLink — a URL, and a value that is not one', () => {
+    expect(render(<ExternalLink data-testid='link' url='https://example.com' />).getByTestId('link').tagName).toBe('A');
+    expect(render(<ExternalLink data-testid='not-a-link' url='not a url' />).getByTestId('not-a-link').tagName).not.toBe('A');
+  });
+
+  test('MeterList — flat and on its surface', () => {
+    const items = [{ label: 'CPU', value: '3%' }];
+    expect(render(<MeterList data-testid='flat' flat items={items} />).getByTestId('flat').textContent).toContain('CPU');
+    expect(render(<MeterList data-testid='surface' items={items} />).getByTestId('surface').textContent).toContain('CPU');
+  });
+
+  test('StatStrip and StatTile', () => {
+    expect(render(<StatStrip data-testid='strip' items={[{ label: 'Tasks', value: 3 }]} />).getByTestId('strip').textContent).toContain('Tasks');
+    expect(render(<StatTile data-testid='tile' label='Tasks' value={3} />).getByTestId('tile').textContent).toContain('Tasks');
+  });
+});

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

@@ -52,9 +52,11 @@ export function AuthCard({
   aurora = false,
   children,
   className,
+  ...rest
 }: AuthCardProps) {
   return (
     <div
+      {...rest}
       className={cn(
         'flex w-full flex-col items-center justify-center gap-6 p-4',
         // The page colour belongs to the full-screen page only. Embedded, the card sits on its

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

@@ -52,6 +52,7 @@ export function AuthForm<Values extends FieldValues>({
   children,
   formRef,
   className,
+  ...rest
 }: AuthFormProps<Values>) {
   const rootError = form.formState.errors.root?.message as string | undefined;
 
@@ -72,7 +73,7 @@ export function AuthForm<Values extends FieldValues>({
   });
 
   return (
-    <FormProvider {...form}>
+    <FormProvider {...rest} {...form}>
       <form
         ref={formRef}
         onSubmit={submit}

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

@@ -73,6 +73,7 @@ export function LoginForm({
   footer,
   notice,
   children,
+  ...rest
 }: LoginFormProps) {
   const schema = useMemo(
     () =>
@@ -94,6 +95,7 @@ export function LoginForm({
 
   return (
     <AuthForm
+      {...rest}
       form={form}
       onSubmit={onSubmit}
       onSuccess={onSuccess}

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

@@ -37,6 +37,7 @@ export function PasswordResetConfirm({
   showStrength = true,
   footer,
   notice,
+  ...rest
 }: PasswordResetConfirmProps) {
   const schema = useMemo(
     () =>
@@ -60,6 +61,7 @@ export function PasswordResetConfirm({
 
   return (
     <AuthForm
+      {...rest}
       form={form}
       onSubmit={onSubmit}
       onSuccess={onSuccess}

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

@@ -40,6 +40,7 @@ export function PasswordResetRequest({
   footer,
   notice,
   defaultValues,
+  ...rest
 }: PasswordResetRequestProps) {
   const [submitted, setSubmitted] = useState(false);
   const schema = z.object({ email: z.string().min(1, 'Email is required') });
@@ -49,7 +50,7 @@ export function PasswordResetRequest({
 
   if (submitted) {
     return (
-      <div className='flex flex-col gap-4'>
+      <div {...rest} className='flex flex-col gap-4'>
         {successContent ?? (
           <Alert tone='success' title='Check your email'>
             If an account exists for that address, we've sent a link to reset your password.
@@ -73,6 +74,7 @@ export function PasswordResetRequest({
 
   return (
     <AuthForm
+      {...rest}
       form={form}
       onSubmit={onSubmit}
       onSuccess={() => {

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

@@ -30,6 +30,7 @@ export function PasswordSetFields({
   passwordName = 'newPassword',
   confirmName = 'confirmPassword',
   autoFocus,
+  ...rest
 }: PasswordSetFieldsProps) {
   const { watch } = useFormContext();
   const password = watch(passwordName) as string;
@@ -37,6 +38,7 @@ export function PasswordSetFields({
   return (
     <>
       <AuthPasswordField
+        {...rest}
         name={passwordName}
         label={passwordLabel}
         autoComplete='new-password'

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

@@ -35,6 +35,7 @@ export function PasswordStrengthMeter({
   value,
   minLength = 8,
   className,
+  ...rest
 }: PasswordStrengthMeterProps) {
   const { score, level, fraction } = scorePasswordStrength(value, minLength);
   if (!value) return null;
@@ -43,7 +44,7 @@ export function PasswordStrengthMeter({
   // 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 min-h-[1lh] items-center gap-3 text-sm', className)}>
+    <div {...rest} 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

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

@@ -47,6 +47,7 @@ export function RegisterForm({
   footer,
   notice,
   children,
+  ...rest
 }: RegisterFormProps) {
   const schema = useMemo(
     () =>
@@ -72,6 +73,7 @@ export function RegisterForm({
 
   return (
     <AuthForm
+      {...rest}
       form={form}
       onSubmit={onSubmit}
       onSuccess={onSuccess}

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

@@ -47,6 +47,7 @@ export function SetInitialPassword({
   defaultValues,
   footer,
   notice,
+  ...rest
 }: SetInitialPasswordProps) {
   const lockedEmail = defaultValues?.email != null && defaultValues.email !== '';
   const lockedTemp = defaultValues?.tempPassword != null && defaultValues.tempPassword !== '';
@@ -84,6 +85,7 @@ export function SetInitialPassword({
 
   return (
     <AuthForm
+      {...rest}
       form={form}
       onSubmit={onSubmit}
       onSuccess={onSuccess}