@12-apps/ui 6.43.1 → 6.44.1

package/dist/types-native/components/form/Checkbox/Checkbox.base.d.ts

@@ -5,15 +5,25 @@
  * and a native consumer has no `@mui/material` to resolve a type import
  * against. See `Button.base.ts`.
  */
+import type { SizeValue } from '../../../tokens/vocabulary';
 export type CheckboxVariant = 'default' | 'rounded' | 'toggle';
+/**
+ * MUI's own words for the glyph's size — `CHECKBOX_GLYPH_SIZES` in
+ * `Checkbox.metrics.ts` gives each one's pixel value.
+ *
+ * @deprecated `size` now also accepts `SizeValue` (`'xs' | 'sm' | 'md' | 'lg' |
+ * 'xl'`), the house vocabulary every other sized component in the package
+ * speaks — translated to this at the MUI boundary by `resolveCheckboxSize`
+ * (`Checkbox.metrics.ts`). These words keep working for one release; pass
+ * `SizeValue` instead. Removed in the next major version.
+ */
+export type CheckboxSize = 'small' | 'medium' | 'large';
 /**
  * The contract both renderers honour.
  *
  * `checked`, `defaultChecked` and `onChange` are NOT here: MUI types the change
  * as a DOM `ChangeEvent` and the native side synthesises the
- * `{ target: { checked } }` shape those handlers already read. Neither is
- * `size`, which this component takes in MUI's own words (`small | medium`)
- * rather than the house scale — narrowing it would reject the callers it has.
+ * `{ target: { checked } }` shape those handlers already read.
  */
 export interface CheckboxBaseProps {
     variant?: CheckboxVariant;
@@ -30,6 +40,16 @@ export interface CheckboxBaseProps {
     /** The third state: neither checked nor unchecked, drawn as a dash. */
     indeterminate?: boolean;
     disabled?: boolean;
+    /**
+     * The size of the box and glyph.
+     *
+     * `SizeValue` (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) is the documented house
+     * vocabulary every other sized component in the package speaks, translated
+     * to MUI's own word at the MUI boundary (`resolveCheckboxSize`, in
+     * `Checkbox.metrics.ts`) — the same pattern `Chip`/`Button` already follow.
+     * MUI's own words (`CheckboxSize`) still work; see its `@deprecated` note.
+     */
+    size?: SizeValue | CheckboxSize;
     testID?: string;
     dataTestId?: string;
 }

package/dist/types-native/components/form/Checkbox/Checkbox.base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.base.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/D;;;;;;;;GAQG;AACH,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}
+{"version":3,"file":"Checkbox.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.base.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/D;;;;;;;;;GASG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD;;;;;;GAMG;AACH,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/types-native/components/form/Checkbox/Checkbox.metrics.d.ts

@@ -1,4 +1,6 @@
-import type { CheckboxVariant } from './Checkbox.base';
+import type { SizeValue } from '../../../tokens/vocabulary';
+import type { CheckboxSize, CheckboxVariant } from './Checkbox.base';
+export type { CheckboxSize } from './Checkbox.base';
 /**
  * THE NUMBERS BOTH `Checkbox` RENDERERS DRAW WITH.
  *
@@ -11,14 +13,27 @@ import type { CheckboxVariant } from './Checkbox.base';
  */
 /** MUI's `SwitchBase`: 9px of padding around the glyph, at every size. */
 export declare const CHECKBOX_PADDING = 9;
-/** `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the glyph. */
-export declare const CHECKBOX_GLYPH_SIZES: {
-    readonly small: 20;
-    readonly medium: 24;
-    readonly large: 35;
-};
-export type CheckboxSize = keyof typeof CHECKBOX_GLYPH_SIZES;
+/**
+ * `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the
+ * glyph. Typed against {@link CheckboxSize} (declared in `Checkbox.base.ts`,
+ * the contract file, since it is part of the public prop type) rather than the
+ * other way around, so a step added to one and not the other fails here.
+ */
+export declare const CHECKBOX_GLYPH_SIZES: Record<CheckboxSize, number>;
 export declare const glyphSize: (size: CheckboxSize | undefined) => number;
+/**
+ * `size` at the MUI boundary.
+ *
+ * A `SizeValue` is translated via `muiSize()` — the pattern `Chip`/`Button`/
+ * `Carousel` already follow. MUI's own deprecated word (see
+ * {@link CheckboxSize}) is passed through UNCHANGED rather than re-derived,
+ * so a caller who has not migrated renders at exactly the size it always has —
+ * translating it through `muiSize()` too would not change any of the three
+ * words' own geometry, but passing it through untouched is the one route that
+ * cannot drift from what "unchanged" already means. `undefined` stays
+ * `undefined`, so a caller who names no size keeps MUI's own default.
+ */
+export declare const resolveCheckboxSize: (size: SizeValue | CheckboxSize | undefined) => CheckboxSize | undefined;
 /**
  * The three glyphs MUI draws, by state.
  *

package/dist/types-native/components/form/Checkbox/Checkbox.metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.metrics.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD;;;;;;;;;GASG;AAEH,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAElC,qFAAqF;AACrF,eAAO,MAAM,oBAAoB;;;;CAAgD,CAAC;AAClF,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAE7D,eAAO,MAAM,SAAS,GAAI,MAAM,YAAY,GAAG,SAAS,KAAG,MACY,CAAC;AAExE;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,eAAe,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAIlG,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,MAAM,CAAC;AACxC,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,sEAAsE;AACtE,eAAO,MAAM,gBAAgB;;;CAAqC,CAAC;AAEnE;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;CAAkF,CAAC;AAC7G,eAAO,MAAM,cAAc;;;;CAAgD,CAAC;AAE5E,uEAAuE;AACvE,eAAO,MAAM,SAAS,GAAI,YAAY,MAAM,KAAG,MAAgD,CAAC;AAEhG,uEAAuE;AACvE,eAAO,MAAM,cAAc;;;CAA2C,CAAC;AAEvE,iEAAiE;AACjE,eAAO,MAAM,eAAe;;;;;CAAuF,CAAC"}
+{"version":3,"file":"Checkbox.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.metrics.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAErE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;GASG;AAEH,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAElC;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAAwC,CAAC;AAEvG,eAAO,MAAM,SAAS,GAAI,MAAM,YAAY,GAAG,SAAS,KAAG,MACY,CAAC;AAExE;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,GAC9B,MAAM,SAAS,GAAG,YAAY,GAAG,SAAS,KACzC,YAAY,GAAG,SAIjB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,eAAe,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAIlG,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,MAAM,CAAC;AACxC,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,sEAAsE;AACtE,eAAO,MAAM,gBAAgB;;;CAAqC,CAAC;AAEnE;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;CAAkF,CAAC;AAC7G,eAAO,MAAM,cAAc;;;;CAAgD,CAAC;AAE5E,uEAAuE;AACvE,eAAO,MAAM,SAAS,GAAI,YAAY,MAAM,KAAG,MAAgD,CAAC;AAEhG,uEAAuE;AACvE,eAAO,MAAM,cAAc;;;CAA2C,CAAC;AAEvE,iEAAiE;AACjE,eAAO,MAAM,eAAe;;;;;CAAuF,CAAC"}

package/dist/types-native/components/form/Checkbox/Checkbox.native.d.ts

@@ -12,7 +12,6 @@ import { View, type GestureResponderEvent, type ViewStyle } from 'react-native';
 export declare const Checkbox: React.ForwardRefExoticComponent<import("./Checkbox.base").CheckboxBaseProps & Omit<import("react-native").ViewProps, "style" | keyof import("./Checkbox.base").CheckboxBaseProps> & {
     checked?: boolean;
     defaultChecked?: boolean;
-    size?: import("./Checkbox.metrics").CheckboxSize;
     onChange?: (event: import("./Checkbox.types.native").CheckboxChangeEvent, checked: boolean) => void;
     onClick?: (event: GestureResponderEvent) => void;
     onPress?: (event: GestureResponderEvent) => void;

package/dist/types-native/components/form/Checkbox/Checkbox.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAML,IAAI,EACJ,KAAK,qBAAqB,EAE1B,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAkJtB;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ;;;;;;;;8BAyDnB,CAAC"}
+{"version":3,"file":"Checkbox.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAML,IAAI,EACJ,KAAK,qBAAqB,EAE1B,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAmJtB;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ;;;;;;;8BAyDnB,CAAC"}

package/dist/types-native/components/form/Checkbox/Checkbox.types.native.d.ts

@@ -1,8 +1,6 @@
 import type { GestureResponderEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';
 import type { CheckboxBaseProps } from './Checkbox.base';
-import type { CheckboxSize } from './Checkbox.metrics';
-export type { CheckboxBaseProps, CheckboxVariant } from './Checkbox.base';
-export type { CheckboxSize } from './Checkbox.metrics';
+export type { CheckboxBaseProps, CheckboxSize, CheckboxVariant } from './Checkbox.base';
 /**
  * The change a native `Checkbox` reports: the `{ target: { checked } }` shape
  * MUI's `ChangeEvent` gives, and the resolved flag second, as MUI passes it.
@@ -16,8 +14,6 @@ export interface CheckboxChangeEvent {
 export type CheckboxProps = CheckboxBaseProps & Omit<ViewProps, keyof CheckboxBaseProps | 'style'> & {
     checked?: boolean;
     defaultChecked?: boolean;
-    /** MUI's own words for the glyph's size, which is what this component takes. */
-    size?: CheckboxSize;
     onChange?: (event: CheckboxChangeEvent, checked: boolean) => void;
     /** Both spellings fire, as `Button`'s do. */
     onClick?: (event: GestureResponderEvent) => void;

package/dist/types-native/components/form/Checkbox/Checkbox.types.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.types.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC1E,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;CAC9B;AAED,6EAA6E;AAC7E,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAC3C,IAAI,CAAC,SAAS,EAAE,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gFAAgF;IAChF,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAClE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}
+{"version":3,"file":"Checkbox.types.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.types.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAExF;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;CAC9B;AAED,6EAA6E;AAC7E,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAC3C,IAAI,CAAC,SAAS,EAAE,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAClE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}

package/dist/utility/InfiniteScroll.js

@@ -1,9 +1,9 @@
 import "../chunk-H7NA4TXY.js";
 import {
   InfiniteScroll
-} from "../chunk-HBP2OU4Q.js";
-import "../chunk-5KNDAC24.js";
+} from "../chunk-HNFZLXZI.js";
 import "../chunk-Y2X7LYIN.js";
+import "../chunk-5KNDAC24.js";
 import "../chunk-YKCAJ2TN.js";
 import "../chunk-PZ5AY32C.js";
 export {

package/dist/utility/WorkflowStep.js

@@ -1,13 +1,14 @@
 import "../chunk-IO36MEBD.js";
 import {
   WorkflowStep
-} from "../chunk-Y2C2S4R7.js";
-import "../chunk-7OO3BELX.js";
-import "../chunk-KJID4PRD.js";
-import "../chunk-RXNIOPOA.js";
-import "../chunk-ZSTSISM6.js";
+} from "../chunk-JHW62I7Z.js";
+import "../chunk-Y6RSQEOU.js";
+import "../chunk-6S25ZCEW.js";
+import "../chunk-TM5QQJTF.js";
+import "../chunk-FHWXRHMA.js";
 import "../chunk-7ZPUN7TV.js";
-import "../chunk-DJKVSUXH.js";
+import "../chunk-2GG5W6LR.js";
+import "../chunk-532XOWZ5.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-M47ZOUGF.js";
 import "../chunk-7FDU3FIN.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.43.1",
+  "version": "6.44.1",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/form/Autocomplete/useAutocomplete.ts

@@ -245,6 +245,14 @@ function runSelectItem<T>(item: T, p: AutocompleteProps<T>, s: AutocompleteState
   // commitMultiSelect already clears inputValue and resets the flag itself,
   // so the empty-input branch of the filter effect keeps the list closed.
   const isSingleSelectPick = isLink || !p.multiple;
+  // Cancel a still-pending keystroke debounce BEFORE dispatching the pick, so
+  // no branch below — including `openLink`, which never touches `onChange`
+  // at all — can leave it armed to fire the STALE pre-pick text later
+  // (FUT-2779 #1). `commitSingleSelect`/`commitMultiSelect` already clear it
+  // as a side effect of calling the same `debouncedOnChange`; this makes it
+  // unconditional so a `link` pick (which skips `onChange` entirely) is
+  // covered too.
+  if (s.debounceRef.current) window.clearTimeout(s.debounceRef.current);
   commitPick(item, isLink ? (url as string) : null, p, s, onChange);
   s.setOpen(false);
   s.setActiveIndex(-1);
@@ -347,6 +355,15 @@ export function useAutocomplete<T>(p: AutocompleteProps<T>): AutocompleteView<T>
       if (!s.open || s.filteredSuggestions.length === 0) s.setActiveIndex(-1);
       setDeliberateClose(s, false);
     },
+    // Unconditionally reopens on a non-empty input, unguarded by
+    // `userClosedDropdownRef` — plausible on a touch device that blurs the
+    // input on `touchstart` before a tap's own `click`/`mousedown` reaches the
+    // option (FUT-2779 #2). Checked under Playwright touch emulation
+    // (`hasTouch`/`isMobile` context, both the `.tap()` API and raw CDP
+    // `Input.dispatchTouchEvent` at the option's coordinates) against this
+    // Chromium build: `document.activeElement` never left the input across
+    // the touch, so the reopen never happened — not reproduced, left
+    // unguarded per the ticket's decision rather than fixed blind.
     onFocus: (): void => {
       s.setIsInputFocused(true);
       setDeliberateClose(s, false);

package/src/components/form/Checkbox/Checkbox.base.ts

@@ -5,16 +5,28 @@
  * and a native consumer has no `@mui/material` to resolve a type import
  * against. See `Button.base.ts`.
  */
+import type { SizeValue } from '../../../tokens/vocabulary';
+
 export type CheckboxVariant = 'default' | 'rounded' | 'toggle';
 
+/**
+ * MUI's own words for the glyph's size — `CHECKBOX_GLYPH_SIZES` in
+ * `Checkbox.metrics.ts` gives each one's pixel value.
+ *
+ * @deprecated `size` now also accepts `SizeValue` (`'xs' | 'sm' | 'md' | 'lg' |
+ * 'xl'`), the house vocabulary every other sized component in the package
+ * speaks — translated to this at the MUI boundary by `resolveCheckboxSize`
+ * (`Checkbox.metrics.ts`). These words keep working for one release; pass
+ * `SizeValue` instead. Removed in the next major version.
+ */
+export type CheckboxSize = 'small' | 'medium' | 'large';
+
 /**
  * The contract both renderers honour.
  *
  * `checked`, `defaultChecked` and `onChange` are NOT here: MUI types the change
  * as a DOM `ChangeEvent` and the native side synthesises the
- * `{ target: { checked } }` shape those handlers already read. Neither is
- * `size`, which this component takes in MUI's own words (`small | medium`)
- * rather than the house scale — narrowing it would reject the callers it has.
+ * `{ target: { checked } }` shape those handlers already read.
  */
 export interface CheckboxBaseProps {
   variant?: CheckboxVariant;
@@ -31,6 +43,16 @@ export interface CheckboxBaseProps {
   /** The third state: neither checked nor unchecked, drawn as a dash. */
   indeterminate?: boolean;
   disabled?: boolean;
+  /**
+   * The size of the box and glyph.
+   *
+   * `SizeValue` (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) is the documented house
+   * vocabulary every other sized component in the package speaks, translated
+   * to MUI's own word at the MUI boundary (`resolveCheckboxSize`, in
+   * `Checkbox.metrics.ts`) — the same pattern `Chip`/`Button` already follow.
+   * MUI's own words (`CheckboxSize`) still work; see its `@deprecated` note.
+   */
+  size?: SizeValue | CheckboxSize;
   testID?: string;
   dataTestId?: string;
 }

package/src/components/form/Checkbox/Checkbox.md

@@ -55,6 +55,7 @@ import { Checkbox } from '@/components/form/Checkbox';
 | glow | `boolean` | `false` | Enable glow animation |
 | pulse | `boolean` | `false` | Enable pulse animation |
 | disabled | `boolean` | `false` | Disable the checkbox |
+| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | MUI's `'medium'` | The house size vocabulary, translated to MUI's own size at the boundary. MUI's own words (`'small' \| 'medium' \| 'large'`) still work but are **deprecated** — migrate to the house vocabulary; removed in the next major version. |
 | data-testid | `string` | - | Custom test ID for testing |
 
 Plus all standard MUI Checkbox props (checked, onChange, indeterminate, etc.)

package/src/components/form/Checkbox/Checkbox.metrics.ts

@@ -1,7 +1,11 @@
 import { alpha } from '../../../tokens/color';
 import { EFFECT_GLOW } from '../../../tokens/ink.core';
+import { muiSize } from '../../../tokens/vocabulary';
+import type { SizeValue } from '../../../tokens/vocabulary';
 
-import type { CheckboxVariant } from './Checkbox.base';
+import type { CheckboxSize, CheckboxVariant } from './Checkbox.base';
+
+export type { CheckboxSize } from './Checkbox.base';
 
 /**
  * THE NUMBERS BOTH `Checkbox` RENDERERS DRAW WITH.
@@ -17,13 +21,37 @@ import type { CheckboxVariant } from './Checkbox.base';
 /** MUI's `SwitchBase`: 9px of padding around the glyph, at every size. */
 export const CHECKBOX_PADDING = 9;
 
-/** `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the glyph. */
-export const CHECKBOX_GLYPH_SIZES = { small: 20, medium: 24, large: 35 } as const;
-export type CheckboxSize = keyof typeof CHECKBOX_GLYPH_SIZES;
+/**
+ * `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the
+ * glyph. Typed against {@link CheckboxSize} (declared in `Checkbox.base.ts`,
+ * the contract file, since it is part of the public prop type) rather than the
+ * other way around, so a step added to one and not the other fails here.
+ */
+export const CHECKBOX_GLYPH_SIZES: Record<CheckboxSize, number> = { small: 20, medium: 24, large: 35 };
 
 export const glyphSize = (size: CheckboxSize | undefined): number =>
   CHECKBOX_GLYPH_SIZES[size ?? 'medium'] ?? CHECKBOX_GLYPH_SIZES.medium;
 
+/**
+ * `size` at the MUI boundary.
+ *
+ * A `SizeValue` is translated via `muiSize()` — the pattern `Chip`/`Button`/
+ * `Carousel` already follow. MUI's own deprecated word (see
+ * {@link CheckboxSize}) is passed through UNCHANGED rather than re-derived,
+ * so a caller who has not migrated renders at exactly the size it always has —
+ * translating it through `muiSize()` too would not change any of the three
+ * words' own geometry, but passing it through untouched is the one route that
+ * cannot drift from what "unchanged" already means. `undefined` stays
+ * `undefined`, so a caller who names no size keeps MUI's own default.
+ */
+export const resolveCheckboxSize = (
+  size: SizeValue | CheckboxSize | undefined,
+): CheckboxSize | undefined => {
+  if (size === undefined) return undefined;
+  if (size === 'small' || size === 'medium' || size === 'large') return size;
+  return muiSize(size);
+};
+
 /**
  * The three glyphs MUI draws, by state.
  *

package/src/components/form/Checkbox/Checkbox.native.tsx

@@ -22,6 +22,7 @@ import {
   CHECKBOX_VARIANT,
   effectInk,
   glyphSize,
+  resolveCheckboxSize,
 } from './Checkbox.metrics';
 import type { CheckboxProps } from './Checkbox.types.native';
 import { Icon } from '../../../icons/Icon.native';
@@ -199,7 +200,7 @@ export const Checkbox = React.forwardRef<View, CheckboxProps>((rawProps, ref) =>
       glow={glow}
       ripple={ripple}
       variant={variant}
-      size={glyphSize(size)}
+      size={glyphSize(resolveCheckboxSize(size))}
       label={label}
       onToggle={toggle}
       rest={withoutTestIdProps(others) as Record<string, unknown>}

package/src/components/form/Checkbox/Checkbox.tsx

@@ -17,6 +17,7 @@ import {
   CHECKBOX_TRANSITION_MS,
   CHECKBOX_VARIANT,
   effectInk,
+  resolveCheckboxSize,
 } from './Checkbox.metrics';
 import type { CheckboxProps } from './Checkbox.types';
 import { splitTestId } from '../../../platform/test-id';
@@ -126,6 +127,7 @@ export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
       glow,
       pulse,
       disabled,
+      size,
       ...others
     } = resolveCheckboxProps(rawProps);
     const theme = useTheme();
@@ -142,6 +144,7 @@ export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
           glow={glow}
           pulse={pulse}
           disabled={isDisabled}
+          size={resolveCheckboxSize(size)}
           data-testid={dataTestId || 'checkbox'}
           {...props}
         />

package/src/components/form/Checkbox/Checkbox.types.native.ts

@@ -1,10 +1,8 @@
 import type { GestureResponderEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';
 
 import type { CheckboxBaseProps } from './Checkbox.base';
-import type { CheckboxSize } from './Checkbox.metrics';
 
-export type { CheckboxBaseProps, CheckboxVariant } from './Checkbox.base';
-export type { CheckboxSize } from './Checkbox.metrics';
+export type { CheckboxBaseProps, CheckboxSize, CheckboxVariant } from './Checkbox.base';
 
 /**
  * The change a native `Checkbox` reports: the `{ target: { checked } }` shape
@@ -19,8 +17,6 @@ export type CheckboxProps = CheckboxBaseProps &
   Omit<ViewProps, keyof CheckboxBaseProps | 'style'> & {
     checked?: boolean;
     defaultChecked?: boolean;
-    /** MUI's own words for the glyph's size, which is what this component takes. */
-    size?: CheckboxSize;
     onChange?: (event: CheckboxChangeEvent, checked: boolean) => void;
     /** Both spellings fire, as `Button`'s do. */
     onClick?: (event: GestureResponderEvent) => void;

package/src/components/form/Checkbox/Checkbox.types.ts

@@ -3,12 +3,15 @@ import type { ChangeEvent, FocusEventHandler, MouseEventHandler } from 'react';
 
 import type { CheckboxBaseProps } from './Checkbox.base';
 
-export type { CheckboxBaseProps, CheckboxVariant } from './Checkbox.base';
+export type { CheckboxBaseProps, CheckboxSize, CheckboxVariant } from './Checkbox.base';
 
 /**
  * The web `Checkbox`: the shared contract, plus everything MUI's `Checkbox`
  * accepts that the contract does not already name — `checked`,
- * `defaultChecked`, `size`, `color`, `icon`, `inputProps`, `sx`.
+ * `defaultChecked`, `color`, `icon`, `inputProps`, `sx`. `size` IS already
+ * named by the contract (`CheckboxBaseProps`), which is why it is omitted
+ * from what flows through here — MUI's own `size` type would otherwise win
+ * over the house `SizeValue` the contract adds.
  */
 export interface CheckboxProps
   extends CheckboxBaseProps,

package/src/components/utility/WorkflowStep/WorkflowStep.helpers.ts

@@ -172,3 +172,28 @@ export const progressValueText = (
   const step = steps[currentStep];
   return step === undefined ? position : `${position}: ${step.title}`;
 };
+
+export interface ProgressValueRange {
+  max?: number;
+  now?: number;
+}
+
+/**
+ * The progressbar's `aria-valuemax`/`aria-valuenow` pair (FUT-2773). With no
+ * steps at all there is no meaningful range to report — a `role="progressbar"`
+ * with zero steps has nothing to measure, and WAI-ARIA's own value attributes
+ * are optional for exactly this case (an indeterminate progressbar omits
+ * `aria-valuenow`) — so both are left out rather than asserting the invalid
+ * range `aria-valuemax={-1}` with `aria-valuenow={0}`. Otherwise `currentStep`
+ * is clamped to `[0, steps.length - 1]` so the reported value never falls
+ * outside `[aria-valuemin, aria-valuemax]`, however far `currentStep` strays.
+ */
+export const progressValueRange = (
+  steps: readonly WorkflowStepItem[],
+  currentStep: number,
+): ProgressValueRange => {
+  if (steps.length === 0) return {};
+
+  const max = steps.length - 1;
+  return { max, now: Math.min(Math.max(currentStep, 0), max) };
+};

package/src/components/utility/WorkflowStep/WorkflowStep.parts.tsx

@@ -123,14 +123,17 @@ const StepContent = styled(Box, {
   orientation: WorkflowStepProps['orientation'];
   interactive: boolean;
   disabled: boolean;
-}>(({ theme, orientation, interactive, disabled }) => ({
+}>(({ theme, orientation, disabled }) => ({
   display: 'flex',
   flexDirection: 'column',
   alignItems: orientation === 'vertical' ? 'flex-start' : 'center',
   textAlign: orientation === 'vertical' ? 'left' : 'center',
   marginTop: orientation === 'vertical' ? theme.spacing(1) : theme.spacing(0.5),
   marginLeft: orientation === 'horizontal' ? theme.spacing(1) : 0,
-  cursor: interactive && !disabled ? 'pointer' : 'default',
+  // Inert (FUT-2773): the content block has no click handling of its own —
+  // the indicator is the step's one interactive element — so its cursor
+  // never claims to be clickable, whatever `interactive` says.
+  cursor: 'default',
   minWidth: 0,
   flex: 1,
 
@@ -160,26 +163,27 @@ const StepContent = styled(Box, {
 }));
 
 const StepConnector = styled(Box, {
-  shouldForwardProp: (prop) => !['orientation', 'isCompleted', 'color', 'variant'].includes(prop as string),
+  shouldForwardProp: (prop) => !['orientation', 'isCompleted', 'color', 'variant', 'animated'].includes(prop as string),
 })<{
   orientation: WorkflowStepProps['orientation'];
   isCompleted: boolean;
   color: WorkflowStepProps['color'];
   variant: WorkflowStepProps['variant'];
-}>(({ theme, orientation, isCompleted, color, variant }) => {
+  animated: boolean;
+}>(({ theme, orientation, isCompleted, color, variant, animated }) => {
   const connectorColor = isCompleted ? stepPalette(theme, color).main : neutralTones(theme).track;
 
   return {
     flex: 1,
     position: 'relative',
-    
+
     ...(orientation === 'horizontal' && {
       height: rem(theme, 2),
       backgroundColor: connectorColor,
       margin: `0 ${theme.spacing(1)}`,
       minWidth: theme.spacing(2),
     }),
-    
+
     ...(orientation === 'vertical' && {
       width: rem(theme, 2),
       backgroundColor: connectorColor,
@@ -191,9 +195,11 @@ const StepConnector = styled(Box, {
       top: '100%',
     }),
 
-    transition: theme.transitions.create('background-color', {
-      duration: theme.transitions.duration.short,
-    }),
+    transition: animated
+      ? theme.transitions.create('background-color', {
+          duration: theme.transitions.duration.short,
+        })
+      : 'none',
 
     ...(variant === 'minimal' && {
       opacity: 0.6,
@@ -223,6 +229,8 @@ const StepIndicatorComponent = forwardRef<HTMLDivElement, StepIndicatorProps>(({
   onClick,
   'data-testid': dataTestId,
 }, ref) => {
+  const isDisabled = Boolean(disabled || step.disabled);
+
   const handleClick = useCallback(() => {
     if (interactive && !disabled && onClick) {
       onClick(index, step);
@@ -265,13 +273,14 @@ const StepIndicatorComponent = forwardRef<HTMLDivElement, StepIndicatorProps>(({
       isError={isError}
       interactive={interactive}
       animated={animated}
-      disabled={Boolean(disabled || step.disabled)}
+      disabled={isDisabled}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
       role={interactive ? 'button' : undefined}
-      tabIndex={interactive && !disabled && !step.disabled ? 0 : -1}
+      tabIndex={!interactive ? undefined : isDisabled ? -1 : 0}
       aria-label={`Step ${index + 1}: ${step.title}`}
       aria-current={isActive ? 'step' : undefined}
+      aria-disabled={interactive && isDisabled ? true : undefined}
       data-testid={dataTestId}
     >
       {renderIndicatorContent()}
@@ -289,6 +298,10 @@ const StepConnectorComponent = forwardRef<HTMLDivElement, StepConnectorProps>(({
   orientation,
   variant,
   color,
+  // Defaults to the connector's own prior, unconditional behaviour (FUT-2773):
+  // an external caller building a `StepConnectorProps` value that predates
+  // this field keeps the transition it always had.
+  animated = true,
   'data-testid': dataTestId,
 }, ref) => (
   <StepConnector
@@ -297,6 +310,7 @@ const StepConnectorComponent = forwardRef<HTMLDivElement, StepConnectorProps>(({
     isCompleted={isCompleted}
     color={color}
     variant={variant}
+    animated={animated}
     data-testid={dataTestId}
   />
 ));
@@ -304,51 +318,34 @@ const StepConnectorComponent = forwardRef<HTMLDivElement, StepConnectorProps>(({
 StepConnectorComponent.displayName = 'StepConnector';
 
 /**
- * Step content component
+ * Step content component.
+ *
+ * Inert on purpose (FUT-2773): the indicator is the step's one focusable
+ * `role="button"` element — it already carries `aria-label="Step N: <title>"`
+ * — so the title/description block gets no `role`, `tabIndex`, click or key
+ * handling of its own. Two independently-interactive elements per step gave
+ * assistive tech two tab stops for what a caller means as a single control.
  */
 const StepContentComponent = forwardRef<HTMLDivElement, StepContentProps>(({
   step,
-  index,
   orientation,
   interactive,
   disabled,
-  onClick,
   'data-testid': dataTestId,
-}, ref) => {
-  const handleClick = useCallback(() => {
-    if (interactive && !disabled && onClick) {
-      onClick(index, step);
-    }
-  }, [interactive, disabled, onClick, index, step]);
-
-  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
-    if (interactive && !disabled && (event.key === 'Enter' || event.key === ' ')) {
-      event.preventDefault();
-      if (onClick) {
-        onClick(index, step);
-      }
-    }
-  }, [interactive, disabled, onClick, index, step]);
-
-  return (
-    <StepContent
-      ref={ref}
-      orientation={orientation}
-      interactive={interactive}
-      disabled={Boolean(disabled || step.disabled)}
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-      role={interactive ? 'button' : undefined}
-      tabIndex={interactive && !disabled && !step.disabled ? 0 : -1}
-      data-testid={dataTestId}
-    >
-      <div className="step-title">{step.title}</div>
-      {step.description && (
-        <div className="step-description">{step.description}</div>
-      )}
-    </StepContent>
-  );
-});
+}, ref) => (
+  <StepContent
+    ref={ref}
+    orientation={orientation}
+    interactive={interactive}
+    disabled={Boolean(disabled || step.disabled)}
+    data-testid={dataTestId}
+  >
+    <div className="step-title">{step.title}</div>
+    {step.description && (
+      <div className="step-description">{step.description}</div>
+    )}
+  </StepContent>
+));
 
 StepContentComponent.displayName = 'StepContent';