@12-apps/ui 6.43.0 → 6.44.0

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.0",
+  "version": "6.44.0",
   "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/layout/SettingsLayout/SettingsSectionChips.scroll.ts

@@ -39,6 +39,13 @@ const SCROLL_DELTA_EPSILON = 2;
  */
 const POINTER_MOVE_EPSILON = 2;
 
+/**
+ * How long a key, sideways wheel or pan stays armed through a scroll the strip
+ * made itself (FUT-2848): a busy thread can finish a re-centre before the key's
+ * scroll ticks once. Past this it lapses, so a later clamp is not the visitor.
+ */
+const NUDGE_FRESH_MS = 1000;
+
 interface VisitorScrollWatch {
   /** True once the visitor has moved the strip themselves. */
   hasScrolled: () => boolean;
@@ -79,6 +86,9 @@ interface WatchState {
   pointer: boolean;
   touch: boolean;
   nudged: boolean;
+  /** When `nudged` was set (`Date.now()` ms), and whether it outlived an own verdict. */
+  nudgedAt: number;
+  nudgeKept: boolean;
   undecided: boolean;
   scrolled: boolean;
   aimed: number;
@@ -177,6 +187,11 @@ export function toRawScrollLeft(strip: HTMLElement, physical: number): number {
   return physical;
 }
 
+/** Whether the gesture that armed `nudged` happened within {@link NUDGE_FRESH_MS}. */
+function nudgeIsFresh(state: WatchState): boolean {
+  return Date.now() - state.nudgedAt <= NUDGE_FRESH_MS;
+}
+
 /** Whether the strip came to rest where it last aimed itself — clamped as the browser would. */
 function restsOnAim(strip: HTMLElement, aimed: number): boolean {
   const reachable = Math.min(aimed, strip.scrollWidth - strip.clientWidth);
@@ -222,15 +237,18 @@ function createGestureListeners(state: WatchState): { onStrip: Listeners; onView
     state.touch = false;
     state.touchDownAt = Number.NaN;
   };
-  const onPointerCancel = (): void => {
+  const nudge = (): void => {
     state.nudged = true;
-    onPointerUp();
+    state.nudgedAt = Date.now();
+    state.nudgeKept = false;
   };
-  const onKeydown = (): void => {
-    state.nudged = true;
+  const onPointerCancel = (): void => {
+    nudge();
+    onPointerUp();
   };
+  const onKeydown = nudge;
   const onWheel = (event: Event): void => {
-    if (horizontalDelta(event) !== 0) state.nudged = true;
+    if (horizontalDelta(event) !== 0) nudge();
   };
   return {
     onStrip: [
@@ -252,6 +270,31 @@ function createGestureListeners(state: WatchState): { onStrip: Listeners; onView
   };
 }
 
+/**
+ * Judge the scroll under judgement once the strip rests. Only a scroll UNDER
+ * JUDGEMENT disarms: Chromium can fire `scrollend` for the strip's own scroll
+ * cut off by another BEFORE that one's first `scroll`, and disarming there
+ * would hand the visitor's scroll to nobody.
+ */
+function settleJudgement(strip: HTMLElement, state: WatchState): void {
+  if (!state.undecided) return;
+  state.undecided = false;
+  const own = restsOnAim(strip, state.aimed);
+  if (!own) state.scrolled = true;
+  // The strip's own scroll does not use up a gesture armed moments ago: the
+  // scroll that gesture causes may still be on its way (FUT-2848).
+  state.nudgeKept = own && nudgeIsFresh(state);
+  if (!state.nudgeKept) state.nudged = false;
+  state.settled();
+}
+
+/** A gesture kept through the strip's own scroll lapses once stale (FUT-2848). */
+function dropStaleNudge(state: WatchState): void {
+  if (!state.nudgeKept || nudgeIsFresh(state)) return;
+  state.nudged = false;
+  state.nudgeKept = false;
+}
+
 /**
  * Tell a scroll the VISITOR made from every other one.
  *
@@ -291,6 +334,8 @@ export function watchVisitorScroll(strip: HTMLElement): VisitorScrollWatch {
     pointer: false,
     touch: false,
     nudged: false,
+    nudgedAt: Number.NaN,
+    nudgeKept: false,
     undecided: false,
     scrolled: false,
     aimed: Number.NaN,
@@ -302,17 +347,7 @@ export function watchVisitorScroll(strip: HTMLElement): VisitorScrollWatch {
     touchDownAt: Number.NaN,
     touchMoved: false,
   };
-  const settle = (): void => {
-    // Only a scroll that was UNDER JUDGEMENT disarms. Chromium can end the
-    // strip's own smooth scroll with a `scrollend` when another scroll cuts it
-    // off, fired BEFORE that scroll's first `scroll` (seen with an instant one);
-    // disarming there would hand the visitor's scroll to nobody.
-    if (!state.undecided) return;
-    state.undecided = false;
-    state.nudged = false;
-    if (!restsOnAim(strip, state.aimed)) state.scrolled = true;
-    state.settled();
-  };
+  const settle = (): void => settleJudgement(strip, state);
   const onScroll = (): void => {
     const now = physicalScrollLeft(strip);
     const movedFarEnough = Math.abs(now - state.lastScrollLeft) > SCROLL_DELTA_EPSILON;
@@ -324,6 +359,7 @@ export function watchVisitorScroll(strip: HTMLElement): VisitorScrollWatch {
     // arm under a delta-only check (`pointerMoved`/`touchMoved` rules that out);
     // a pointer that drifts a sub-epsilon amount while resting would arm under
     // a moved-only check with no delta floor (`movedFarEnough` rules that out).
+    dropStaleNudge(state);
     const pointerDrag = state.pointer && state.pointerMoved && movedFarEnough;
     const touchDrag = state.touch && state.touchMoved && movedFarEnough;
     // `nudged` (a keypress, a sideways wheel, the browser taking the pointer

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';
 

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

@@ -2,7 +2,7 @@ import Box from '@mui/material/Box/index.js';
 import { styled } from '@mui/material/styles/index.js';
 import React, { forwardRef, useCallback, useMemo } from 'react';
 
-import { progressValueText, resolveWorkflowStepProps, withDerivedStatus } from './WorkflowStep.helpers';
+import { progressValueRange, progressValueText, resolveWorkflowStepProps, withDerivedStatus } from './WorkflowStep.helpers';
 import { StepRow } from './WorkflowStepRow';
 import type { WorkflowStepItem, WorkflowStepProps } from './WorkflowStep.types';
 
@@ -62,6 +62,8 @@ export const WorkflowStep = forwardRef<HTMLDivElement, WorkflowStepProps>((rawPr
     [steps, currentStep],
   );
 
+  const { max: valueMax, now: valueNow } = progressValueRange(steps, currentStep);
+
   return (
     <StepContainer
       ref={ref}
@@ -71,8 +73,8 @@ export const WorkflowStep = forwardRef<HTMLDivElement, WorkflowStepProps>((rawPr
       style={style}
       role="progressbar"
       aria-valuemin={0}
-      aria-valuemax={steps.length - 1}
-      aria-valuenow={currentStep}
+      aria-valuemax={valueMax}
+      aria-valuenow={valueNow}
       aria-valuetext={progressValueText(steps, currentStep)}
       data-testid={dataTestId}
       {...other}

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

@@ -117,6 +117,14 @@ export interface StepConnectorProps {
   orientation: WorkflowStepOrientation;
   variant: WorkflowStepVariant;
   color: WorkflowStepColor;
+  /**
+   * Gates the connector's colour transition (FUT-2773), the same way the
+   * indicator's already did. Optional and defaults to `true` — the
+   * connector's own prior, unconditional behaviour — so an external caller
+   * that already builds a `StepConnectorProps`-typed value without this
+   * field keeps rendering exactly as it did before this field existed.
+   */
+  animated?: boolean;
   'data-testid'?: string;
 }
 
@@ -125,10 +133,12 @@ export interface StepConnectorProps {
  */
 export interface StepContentProps {
   step: WorkflowStepItem;
+  /** @deprecated Unused since FUT-2773 — the content block is inert and no longer keyed off it. */
   index: number;
   orientation: WorkflowStepOrientation;
   interactive: boolean;
   disabled: boolean;
+  /** @deprecated Unused since FUT-2773 — the content block is inert and never calls this itself; the indicator is the step's one interactive element. */
   onClick?: (index: number, step: WorkflowStepItem) => void;
   'data-testid'?: string;
 }

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

@@ -88,6 +88,7 @@ export const StepRow: React.FC<StepRowProps> = ({
           orientation={orientation}
           variant={variant}
           color={color}
+          animated={animated}
           data-testid={`${dataTestId}-connector-${index}`}
         />
       )}

package/src/provider/mui-bridge.ts

@@ -1,6 +1,7 @@
 import type { PaletteColor, Theme, ThemeOptions } from '@mui/material/styles/index.js';
 
 import { cssLengthToPx, cssTrackingToEm } from '../tokens/css-units';
+import { chipDensityOverrides, iconButtonDensityOverrides } from '../tokens/density-overrides';
 import { densityFontSize, resolveDensityFactor } from '../tokens/density';
 import { resolveFieldHeight } from '../tokens/field-height.core';
 import { fieldOverrides, mergeMuiComponents } from '../tokens/field-height';
@@ -144,10 +145,14 @@ export function muiThemeOptionsFrom(ui: UiTheme): ThemeOptions {
     shape: { borderRadius: ui.radius.md },
     fieldRadius: ui.radius.field,
     fieldHeight: ui.fieldHeight,
-    // Additive: children 2–4 (FUT-2766–2768) each add one more source here as
-    // their own geometry overrides land — this PR wires the merge helper to
-    // `fieldOverrides` alone, since no geometry override exists yet.
-    components: mergeMuiComponents(fieldOverrides(ui.radius.field, ui.fieldHeight)),
+    // Additive: children 3/4 (FUT-2767/2768) each add one more source here as
+    // their own geometry overrides land — this PR (FUT-2766) adds IconButton's
+    // and Chip's.
+    components: mergeMuiComponents(
+      fieldOverrides(ui.radius.field, ui.fieldHeight),
+      iconButtonDensityOverrides(),
+      chipDensityOverrides(),
+    ),
     spacing: ui.spacingUnit,
     density: ui.density,
     typography: {