@hjmds/react-native 1.41.2 → 1.42.0

package/dist/inputs.js

@@ -14,9 +14,10 @@ import { chipRecipe, searchFieldRecipe, segmentedControlRecipe, selectionControl
 import { visibleControlHeight } from "@hjmds/design-contracts/components/design-system-provider";
 import { passwordFieldRecipe, resolvePasswordFieldDescriptor, } from "@hjmds/design-contracts/components/password-field";
 import { getOtpFieldSlotValues, otpFieldRecipe, resolveOtpFieldValue, } from "@hjmds/design-contracts/components/otp-field";
-import { getCheckboxNextState, reconcileCheckboxSelection, resolveControlAccessibleName, resolveInitialRadioValue, resolveRadioTabStop, resolveInitialTabValue, reconcileRadioSelection, selectionGroupBehaviorDefaults, toggleCheckboxSelection, validateCheckboxSelection, validateRadioSelection, validateSelectionItems, } from "@hjmds/design-contracts/behaviors";
+import { characterCountRecipe, resolveCharacterCount, resolveCharacterCountMaxLength, shouldAnnounceCharacterCount, } from "@hjmds/design-contracts/character-count";
+import { getCheckboxNextState, reconcileCheckboxSelection, resolveControlAccessibleName, resolveInitialRadioValue, resolveRadioTabStop, resolveInitialTabValue, reconcileRadioSelection, resolveScrollRevealOffset, selectionGroupBehaviorDefaults, toggleCheckboxSelection, validateCheckboxSelection, validateRadioSelection, validateSelectionItems, } from "@hjmds/design-contracts/behaviors";
 import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
-import { ActivityIndicator, Animated, AppState, Easing, Platform, Pressable, ScrollView, Switch as NativeSwitch, Text as NativeText, TextInput, View, } from "react-native";
+import { AccessibilityInfo, ActivityIndicator, Animated, AppState, Easing, Platform, Pressable, ScrollView, Switch as NativeSwitch, Text as NativeText, TextInput, View, } from "react-native";
 import { mixedCheckboxState, useControllableState } from "./internal/state.js";
 import { isWebRenderer, webChoiceProps, webOnly } from "./internal/web-a11y.js";
 import { logicalTextAlign, minimumTargetStyle, resolveNativeFontStyle, resolveNativeTextScaleProps, } from "./internal/styles.js";
@@ -34,7 +35,36 @@ function resolveFieldAccessibleName(label, accessibilityLabel) {
         ...(visibleLabel ? { visibleLabel } : {}),
     };
 }
-const FieldRenderer = forwardRef(function FieldRenderer({ label, value, defaultValue = "", onValueChange, description, error, invalid = false, accessibilityHint, required = false, disabled = false, busy = false, variant = fieldRecipe.defaults.variant, shape, accessibilityLabel, layoutStyle, allowFontScaling, multiline, maxVisibleLines, minVisibleLines, align = fieldRecipe.defaults.align, search, recipeMinHeight, recipeTextVariant, disabledOpacity, searchSize = searchFieldRecipe.defaults.size, leading, trailing, leadingAction, hjmCompactMultiline = false, hjmDescriptionAlign = "start", initialFocusTarget, onBlur, onFocus, onContentSizeChange, onSelectionChange, ...props }, ref) {
+/*
+  Character count (characterCountRecipe, 2026-10-23 BurnTok TextLengthHint). The row is hidden from the
+  accessibility tree and its sentence and counter are appended to the input hint, so they are read on focus without
+  a second swipe stop. Entering near/short/over is announced once; announcing each keystroke would talk over the
+  typed text. Both platforms use announceForAccessibility because an Android live region on the row would speak on
+  every counter change.
+*/
+function useCharacterCount(options, value, ownMaxLength) {
+    if (options && ownMaxLength !== undefined) {
+        throw new TypeError("Pass the limit through characterCount.max instead of maxLength");
+    }
+    const state = options ? resolveCharacterCount(value, options) : undefined;
+    const previous = useRef(undefined);
+    const status = state?.status;
+    useEffect(() => {
+        if (state && shouldAnnounceCharacterCount(previous.current, state))
+            AccessibilityInfo.announceForAccessibility(state.message ?? "");
+        previous.current = status;
+        // Only a status change announces; the message inside one status changes with every keystroke.
+    }, [status]);
+    const maxLength = options ? resolveCharacterCountMaxLength(options) : ownMaxLength;
+    return { ...(state ? { state } : {}), ...(maxLength === undefined ? {} : { maxLength }) };
+}
+function CharacterCountRow({ state }) {
+    const { colors, environment } = useHjmNativeTheme();
+    const tone = state.invalid ? "invalid" : "idle";
+    const color = colors[characterCountRecipe.colors[tone]];
+    return (_jsxs(View, { accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", testID: "hjm-field-character-count", style: { flexDirection: "row", alignItems: "flex-start", gap: characterCountRecipe.gap, direction: environment.direction }, children: [state.message ? _jsx(Text, { variant: characterCountRecipe.textVariant, style: { color, flex: 1 }, children: state.message }) : null, _jsx(Text, { variant: characterCountRecipe.textVariant, style: { color, flexShrink: 0, marginStart: "auto", fontVariant: [characterCountRecipe.numeric], fontWeight: characterCountRecipe.counterFontWeight[tone] }, children: state.counter })] }));
+}
+const FieldRenderer = forwardRef(function FieldRenderer({ label, value, defaultValue = "", onValueChange, description, error, invalid = false, accessibilityHint, required = false, disabled = false, busy = false, variant = fieldRecipe.defaults.variant, shape, accessibilityLabel, layoutStyle, allowFontScaling, multiline, maxVisibleLines, minVisibleLines, align = fieldRecipe.defaults.align, search, recipeMinHeight, recipeTextVariant, disabledOpacity, searchSize = searchFieldRecipe.defaults.size, leading, trailing, leadingAction, hjmCompactMultiline = false, hjmDescriptionAlign = "start", initialFocusTarget, onBlur, onFocus, onContentSizeChange, onSelectionChange, characterCount, maxLength: ownMaxLength, ...props }, ref) {
     const resolvedDisabledOpacity = disabledOpacity ?? (search ? searchFieldRecipe.states.disabledOpacity : fieldRecipe.disabledOpacity);
     const theme = useHjmNativeTheme();
     const { colors, environment, textScaling } = theme;
@@ -61,21 +91,25 @@ const FieldRenderer = forwardRef(function FieldRenderer({ label, value, defaultV
     // Disabled and read-only fields are never focused on entry (busy plain fields are locked too).
     useInitialFocusTarget(inputRef, initialFocusTarget, () => !disabled && !props.readOnly && props.editable !== false && (search || !busy));
     const supportText = description;
-    const hint = error ?? accessibilityHint ?? supportText;
+    const count = useCharacterCount(characterCount, currentValue, ownMaxLength);
+    const countHint = count.state ? [count.state.message, count.state.counter].filter(Boolean).join(", ") : undefined;
+    const hint = [error ?? accessibilityHint ?? supportText, countHint].filter(Boolean).join(", ") || undefined;
+    // Over the limit (overflow "allow") draws the invalid border like an external group error.
+    const invalidState = invalid || count.state?.status === "over";
     const { accessibleName, visibleLabel } = resolveFieldAccessibleName(label, accessibilityLabel);
     const resolvedShape = shape ??
         (search ? searchFieldRecipe.defaults.shape : fieldRecipe.defaults.shape);
     const searchSizing = searchFieldRecipe.sizes[searchSize];
     const resolvedMaxVisibleLines = maxVisibleLines ?? fieldRecipe.multilineMaxVisibleLines;
-    const borderWidth = error || invalid ? fieldRecipe.states.invalid.borderWidth
+    const borderWidth = error || invalidState ? fieldRecipe.states.invalid.borderWidth
         : search ? searchFieldRecipe.borderWidth : fieldRecipe.borderWidth;
     const borderColor = search
-        ? resolveColorReference(error || invalid
+        ? resolveColorReference(error || invalidState
             ? searchFieldRecipe.colors.invalid
             : focused
                 ? searchFieldRecipe.colors.focus
                 : searchFieldRecipe.colors.border, theme.palette)
-        : colors[error || invalid
+        : colors[error || invalidState
             ? fieldRecipe.states.invalid.border
             : focused
                 ? fieldRecipe.states.focused.border
@@ -158,7 +192,7 @@ const FieldRenderer = forwardRef(function FieldRenderer({ label, value, defaultV
     // fields keep the lock because their busy means a pending save of the current value.
     // iOS scrolls the one-line viewport before reporting intrinsic growth. Keep bounded
     // composers unscrollable until their content exceeds the recipe cap; ordinary editors retain caller behavior.
-    const editor = (_jsx(TextInput, { ...props, ...inputTextScaleProps, ref: attachInput, accessibilityHint: hint, accessibilityLabel: accessibleName, accessibilityRole: search ? "search" : undefined, accessibilityState: { busy, disabled }, editable: !disabled && !props.readOnly && props.editable !== false && (search || !busy), multiline: multiline, scrollEnabled: multiline && minVisibleLines !== undefined
+    const editor = (_jsx(TextInput, { ...props, ...(count.maxLength === undefined ? {} : { maxLength: count.maxLength }), ...inputTextScaleProps, ref: attachInput, accessibilityHint: hint, accessibilityLabel: accessibleName, accessibilityRole: search ? "search" : undefined, accessibilityState: { busy, disabled }, editable: !disabled && !props.readOnly && props.editable !== false && (search || !busy), multiline: multiline, scrollEnabled: multiline && minVisibleLines !== undefined
             ? !!currentValue && contentHeight > textStyle.lineHeight * (resolvedMaxVisibleLines ?? 1000) + fieldRecipe.paddingVertical * 2
             : props.scrollEnabled, onBlur: (event) => {
             setFocused(false);
@@ -176,26 +210,26 @@ const FieldRenderer = forwardRef(function FieldRenderer({ label, value, defaultV
             setFocused(true);
             onFocus?.(event);
         }, placeholderTextColor: placeholderColor, value: currentValue }, editorKey));
-    return (_jsx(NativeFieldFrame, { frameRef: fieldFrameRef, descriptionAlign: hjmDescriptionAlign, ...(visibleLabel === undefined ? {} : { label: visibleLabel }), required: required, ...(error === undefined ? {} : { error }), ...(supportText === undefined ? {} : { description: supportText }), ...(disabled ? { disabledOpacity: resolvedDisabledOpacity } : {}), style: layoutStyle, children: _jsxs(View, { style: {
-                opacity: disabled ? resolvedDisabledOpacity : 1,
-                alignItems: multiline ? "stretch" : "center",
-                backgroundColor,
-                borderColor,
-                borderRadius: controlRadius,
-                borderWidth,
-                direction: environment.direction,
-                flexDirection: "row",
-                gap: search ? searchSizing.gap : 0,
-                minHeight,
-                paddingHorizontal: search
-                    ? searchSizing.paddingHorizontal
-                    : fieldRecipe.paddingHorizontal,
-            }, children: [leading ? (_jsx(View, { accessibilityElementsHidden: true, accessible: false, importantForAccessibility: "no-hide-descendants", children: leading })) : null, leadingAction ? _jsx(View, { style: { alignSelf: "center" }, children: leadingAction }) : null, multiline && minVisibleLines !== undefined ? _jsxs(View, { style: { flex: 1, flexDirection: "row" }, children: [_jsx(NativeText, { ...resolveNativeTextScaleProps(textScaling, [{
-                                    ...resolveNativeFontStyle(theme.tokens.fontFamily.ui), fontSize: textStyle.fontSize,
-                                    fontWeight: textStyle.fontWeight, lineHeight: textStyle.lineHeight,
-                                    position: "absolute", left: 0, right: 0, opacity: 0,
-                                    paddingVertical: fieldRecipe.paddingVertical,
-                                }], allowFontScaling), accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", pointerEvents: "none", onTextLayout: event => setContentHeight(event.nativeEvent.lines.reduce((height, line) => height + Math.max(line.height, textStyle.lineHeight), 0) + fieldRecipe.paddingVertical * 2), children: currentValue + "\u200b" }), editor] }) : editor, trailing] }) }));
+    return (_jsxs(NativeFieldFrame, { frameRef: fieldFrameRef, descriptionAlign: hjmDescriptionAlign, ...(visibleLabel === undefined ? {} : { label: visibleLabel }), required: required, ...(error === undefined ? {} : { error }), ...(supportText === undefined ? {} : { description: supportText }), ...(disabled ? { disabledOpacity: resolvedDisabledOpacity } : {}), style: layoutStyle, children: [_jsxs(View, { style: {
+                    opacity: disabled ? resolvedDisabledOpacity : 1,
+                    alignItems: multiline ? "stretch" : "center",
+                    backgroundColor,
+                    borderColor,
+                    borderRadius: controlRadius,
+                    borderWidth,
+                    direction: environment.direction,
+                    flexDirection: "row",
+                    gap: search ? searchSizing.gap : 0,
+                    minHeight,
+                    paddingHorizontal: search
+                        ? searchSizing.paddingHorizontal
+                        : fieldRecipe.paddingHorizontal,
+                }, children: [leading ? (_jsx(View, { accessibilityElementsHidden: true, accessible: false, importantForAccessibility: "no-hide-descendants", children: leading })) : null, leadingAction ? _jsx(View, { style: { alignSelf: "center" }, children: leadingAction }) : null, multiline && minVisibleLines !== undefined ? _jsxs(View, { style: { flex: 1, flexDirection: "row" }, children: [_jsx(NativeText, { ...resolveNativeTextScaleProps(textScaling, [{
+                                        ...resolveNativeFontStyle(theme.tokens.fontFamily.ui), fontSize: textStyle.fontSize,
+                                        fontWeight: textStyle.fontWeight, lineHeight: textStyle.lineHeight,
+                                        position: "absolute", left: 0, right: 0, opacity: 0,
+                                        paddingVertical: fieldRecipe.paddingVertical,
+                                    }], allowFontScaling), accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", pointerEvents: "none", onTextLayout: event => setContentHeight(event.nativeEvent.lines.reduce((height, line) => height + Math.max(line.height, textStyle.lineHeight), 0) + fieldRecipe.paddingVertical * 2), children: currentValue + "\u200b" }), editor] }) : editor, trailing] }), count.state ? _jsx(CharacterCountRow, { state: count.state }) : null] }));
 });
 export const TextField = forwardRef(function TextField(props, ref) {
     return _jsx(FieldRenderer, { ...props, ref: ref, multiline: false, search: false });
@@ -410,7 +444,7 @@ layoutStyle, allowFontScaling, onBlur, onFocus, ...props }, ref) {
                                 }) })] }), _jsx(FieldMessage, { ...(error === undefined ? {} : { error }), ...(supportText === undefined ? {} : { supportText }) })] })] }));
 });
 // UI control labels keep the ui font even when their metric variant is body; content still uses reading.
-function ChoiceRow({ kind, label, labelContent, action, description, checked, disabled, readOnly, required, invalid, readOnlyLabel, requiredLabel, invalidLabel, accessibilityHint, presentation = selectionControlRecipe.defaults.presentation, size = selectionControlRecipe.defaults.size, indicator = "default", leading, renderLeading, renderIndicator, onActivate, webTabIndex, layoutStyle, }) {
+function ChoiceRow({ kind, label, labelContent, action, description, checked, disabled, readOnly, required, invalid, readOnlyLabel, requiredLabel, invalidLabel, accessibilityHint, presentation = selectionControlRecipe.defaults.presentation, size = selectionControlRecipe.defaults.size, indicator = "default", leading, renderLeading, renderIndicator, onActivate, webTabIndex, layoutStyle, onRailLayout, onRailFocus, }) {
     const theme = useHjmNativeTheme();
     const metrics = selectionControlRecipe.sizes[size];
     const chips = presentation === "chips", chipMetrics = chipRecipe.sizes[size];
@@ -458,7 +492,7 @@ function ChoiceRow({ kind, label, labelContent, action, description, checked, di
             readOnly,
             onActivate,
             ...(webTabIndex === undefined ? {} : { tabIndex: webTabIndex }),
-        })), disabled: disabled || readOnly, hitSlop: chips ? chipMetrics.hitSlop : plate.useSizePadding ? 0 : metrics.hitSlop, onPress: () => {
+        })), disabled: disabled || readOnly, hitSlop: chips ? chipMetrics.hitSlop : plate.useSizePadding ? 0 : metrics.hitSlop, ...(onRailFocus ? { onFocus: onRailFocus } : {}), ...(onRailLayout && !action ? { onLayout: onRailLayout } : {}), onPress: () => {
             if (!readOnly)
                 onActivate();
         }, style: ({ pressed }) => [
@@ -497,7 +531,7 @@ function ChoiceRow({ kind, label, labelContent, action, description, checked, di
         return target;
     // The selection target owns its accessible label; the action is a separate sibling
     // so rename/manage never changes the selected option or nests a button in a radio.
-    return _jsxs(View, { style: [{
+    return _jsxs(View, { ...(onRailLayout ? { onLayout: onRailLayout } : {}), style: [{
                 alignItems: "center", alignSelf: chips ? "flex-start" : "stretch", flexDirection: "row", direction: theme.environment.direction,
                 minHeight: rowMinHeight,
                 flexGrow: presentation === "card" ? 1 : undefined,
@@ -526,7 +560,34 @@ export function Radio({ label, checked, defaultChecked = false, onCheckedChange,
     });
     return (_jsx(ChoiceRow, { ...visual, accessibilityHint: accessibilityHint, checked: selected, description: description, disabled: disabled, indicator: visual.indicator ?? "default", invalid: invalid, invalidLabel: invalidLabel, kind: "radio", label: label, leading: leading, onActivate: () => setSelected(true), readOnly: readOnly, readOnlyLabel: readOnlyLabel, renderIndicator: renderIndicator, renderLeading: renderLeading, required: required, requiredLabel: requiredLabel }));
 }
-function ChoiceGroupFrame({ label, accessibilityLabel, required, requiredLabel, readOnly, readOnlyLabel, disabled, description, error, role, orientation, presentation, grid, layoutStyle, children, }) {
+/** Measures chips in the rail and scrolls the least distance that shows a focused chip (resolveScrollRevealOffset). */
+function useChipRail(enabled) {
+    const ref = useRef(null);
+    const offset = useRef(0);
+    const viewport = useRef(0);
+    const rects = useRef({});
+    if (!enabled)
+        return undefined;
+    return {
+        ref,
+        onScroll: event => { offset.current = event.nativeEvent.contentOffset.x; },
+        onViewportLayout: event => { viewport.current = event.nativeEvent.layout.width; },
+        itemLayout: id => event => { const { x, width } = event.nativeEvent.layout; rects.current[id] = { x, width }; },
+        reveal: id => {
+            const rect = rects.current[id];
+            if (!rect || viewport.current <= 0)
+                return;
+            // Layout x is inside the padded content row; the scroll offset counts the content padding too.
+            const inset = selectionGroupRecipe.overflow.scrollInset;
+            const next = resolveScrollRevealOffset(offset.current, viewport.current, rect.x + inset, rect.width, inset);
+            if (next !== offset.current) {
+                offset.current = next;
+                ref.current?.scrollTo({ x: next, animated: false });
+            }
+        },
+    };
+}
+function ChoiceGroupFrame({ label, accessibilityLabel, required, requiredLabel, readOnly, readOnlyLabel, disabled, description, error, role, orientation, presentation, grid, layoutStyle, rail, children, }) {
     const theme = useHjmNativeTheme();
     const id = useId().replaceAll(":", "");
     const labelId = `${id}-label`;
@@ -539,7 +600,11 @@ function ChoiceGroupFrame({ label, accessibilityLabel, required, requiredLabel,
     const gap = selectionGroupRecipe.orientations[orientation].gap[presentation];
     useFieldErrorAnnouncement(error);
     return (_jsxs(View, { accessibilityHint: [error ?? description, readOnly ? readOnlyLabel : undefined]
-            .filter(Boolean).join(". ") || undefined, accessibilityLabel: announcedName, accessibilityLabelledBy: label ? labelId : undefined, accessibilityRole: role, accessibilityState: { disabled: disabled || readOnly }, accessibilityValue: error ? { text: error } : undefined, style: [{ direction: theme.environment.direction, gap: selectionGroupRecipe.supportGap }, layoutStyle], children: [label ? (_jsxs(Text, { nativeID: labelId, tone: "primary", variant: selectionGroupRecipe.label.textVariant, children: [label, required ? requiredLabel ? ` (${requiredLabel})` : " *" : ""] })) : null, description && !error ? (_jsx(Text, { tone: "muted", variant: selectionGroupRecipe.description.textVariant, children: description })) : null, grid ? _jsx(Grid, { ...grid, children: children }) : (_jsx(View, { style: {
+            .filter(Boolean).join(". ") || undefined, accessibilityLabel: announcedName, accessibilityLabelledBy: label ? labelId : undefined, accessibilityRole: role, accessibilityState: { disabled: disabled || readOnly }, accessibilityValue: error ? { text: error } : undefined, style: [{ direction: theme.environment.direction, gap: selectionGroupRecipe.supportGap }, layoutStyle], children: [label ? (_jsxs(Text, { nativeID: labelId, tone: "primary", variant: selectionGroupRecipe.label.textVariant, children: [label, required ? requiredLabel ? ` (${requiredLabel})` : " *" : ""] })) : null, description && !error ? (_jsx(Text, { tone: "muted", variant: selectionGroupRecipe.description.textVariant, children: description })) : null, rail ? (
+            // Same scroller as SegmentedControl overflow="scroll": an LTR scroll view with the reading direction on
+            // its row. selectionGroupRecipe.overflow.scrollInset pads every side (focus ring, chip hit slop, equal end
+            // gap) and the negative margin keeps the chips aligned with the column.
+            _jsx(ScrollView, { ref: rail.ref, horizontal: true, keyboardShouldPersistTaps: "handled", onScroll: rail.onScroll, scrollEventThrottle: 16, showsHorizontalScrollIndicator: false, onLayout: rail.onViewportLayout, style: { direction: "ltr", flexGrow: 0, margin: -selectionGroupRecipe.overflow.scrollInset }, contentContainerStyle: { padding: selectionGroupRecipe.overflow.scrollInset }, children: _jsx(View, { style: { direction: theme.environment.direction, flexDirection: "row", flexWrap: "nowrap", gap }, children: children }) })) : grid ? _jsx(Grid, { ...grid, children: children }) : (_jsx(View, { style: {
                     direction: theme.environment.direction,
                     flexDirection: presentation === "chips" || (orientation === "horizontal" && theme.environment.textScale < 1.6) ? "row" : "column",
                     flexWrap: presentation === "chips" ? "wrap" : undefined,
@@ -586,8 +651,12 @@ export function RadioGroup(props) {
         }) }));
 }
 /** Validated controlled/uncontrolled checkbox collection using immutable Sets. */
-export function CheckboxGroup({ label, accessibilityLabel, items, value, defaultValue = new Set(), onValueChange, required = false, disabled = false, readOnly = false, invalid = false, description, error, requiredLabel, readOnlyLabel, invalidLabel, orientation = selectionGroupBehaviorDefaults.orientation, grid, presentation = selectionGroupRecipe.defaults.presentation, size = selectionControlRecipe.defaults.size, indicator = "default", renderLeading, renderIndicator, layoutStyle, ...slotStyles }) {
+export function CheckboxGroup({ label, accessibilityLabel, items, value, defaultValue = new Set(), onValueChange, required = false, disabled = false, readOnly = false, invalid = false, description, error, requiredLabel, readOnlyLabel, invalidLabel, orientation = selectionGroupBehaviorDefaults.orientation, grid, presentation = selectionGroupRecipe.defaults.presentation, overflow = selectionGroupRecipe.overflow.default, size = selectionControlRecipe.defaults.size, indicator = "default", renderLeading, renderIndicator, layoutStyle, ...slotStyles }) {
     validateSelectionItems(items);
+    if (overflow === "scroll" && (presentation !== "chips" || grid)) {
+        throw new TypeError('CheckboxGroup overflow="scroll" requires presentation="chips" without grid');
+    }
+    const rail = useChipRail(overflow === "scroll");
     if (value !== undefined)
         validateCheckboxSelection(items, value);
     const [storedValue, setSelected] = useControllableState({
@@ -601,10 +670,10 @@ export function CheckboxGroup({ label, accessibilityLabel, items, value, default
             setSelected(selected);
     }, [selected, setSelected, storedValue, value]);
     const hasError = invalid || error !== undefined;
-    return (_jsx(ChoiceGroupFrame, { accessibilityLabel: accessibilityLabel, description: description, disabled: disabled, error: error, label: label, orientation: orientation, grid: grid, presentation: presentation, readOnly: readOnly, readOnlyLabel: readOnlyLabel, required: required, requiredLabel: requiredLabel, layoutStyle: layoutStyle, children: items.map((item) => {
+    return (_jsx(ChoiceGroupFrame, { accessibilityLabel: accessibilityLabel, description: description, disabled: disabled, error: error, label: label, orientation: orientation, grid: grid, presentation: presentation, readOnly: readOnly, readOnlyLabel: readOnlyLabel, required: required, requiredLabel: requiredLabel, layoutStyle: layoutStyle, rail: rail, children: items.map((item) => {
             const optionDisabled = disabled || item.disabled === true;
             const optionSelected = selected.has(item.id);
-            return (_createElement(ChoiceRow, { ...slotStyles, key: item.id, checked: optionSelected, description: item.description, disabled: optionDisabled, indicator: indicator, invalid: hasError, invalidLabel: invalidLabel ?? error, kind: "checkbox", label: item.label, onActivate: () => setSelected(toggleCheckboxSelection(items, selected, item.id)), presentation: presentation, readOnly: readOnly, readOnlyLabel: readOnlyLabel, renderIndicator: renderIndicator ? (props) => renderIndicator(item, props) : undefined, renderLeading: renderLeading ? (props) => renderLeading(item, props) : undefined, required: required, requiredLabel: requiredLabel, size: size }));
+            return (_createElement(ChoiceRow, { ...slotStyles, key: item.id, checked: optionSelected, description: item.description, disabled: optionDisabled, indicator: indicator, invalid: hasError, invalidLabel: invalidLabel ?? error, kind: "checkbox", label: item.label, onActivate: () => setSelected(toggleCheckboxSelection(items, selected, item.id)), presentation: presentation, readOnly: readOnly, readOnlyLabel: readOnlyLabel, renderIndicator: renderIndicator ? (props) => renderIndicator(item, props) : undefined, renderLeading: renderLeading ? (props) => renderLeading(item, props) : undefined, required: required, requiredLabel: requiredLabel, size: size, onRailLayout: rail?.itemLayout(item.id), onRailFocus: rail ? () => rail.reveal(item.id) : undefined }));
         }) }));
 }
 export function Switch({ label, labelVisibility = "visible", presentation = switchRecipe.presentationDefaults.native, testID, description, size = switchRecipe.defaults.size, checked, defaultChecked, onCheckedChange, disabled = false, accessibilityLabel, accessibilityHint, layoutStyle, ...props }) {
@@ -695,7 +764,9 @@ function NativeSelectionHighlight({ rect, selection, reducedMotion, pills, disab
     return _jsx(Animated.View, { pointerEvents: "none", accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: { position: "absolute", left: positions.x, top: positions.y, width: positions.width, height: positions.height, borderRadius: pills ? segmentedControlRecipe.pills.radius : theme.tokens.radius[segmentedControlRecipe.item.radius], backgroundColor: resolveColorReference(brand ? segmentedControlRecipe.selectedBrand.background : pills ? segmentedControlRecipe.pills.selectedBackground : segmentedControlRecipe.item.selectedBackground, theme.palette), borderColor: resolveColorReference(segmentedControlRecipe.item.selectedBorder, theme.palette), borderWidth: pills ? 0 : segmentedControlRecipe.item.selectedBorderWidth, opacity: disabled ? segmentedControlRecipe.item.disabledOpacity : 1 } });
 }
 export function SegmentedControl(props) {
-    const { label, items, value, defaultValue, onValueChange, size = segmentedControlRecipe.defaults.size, presentation = "connected", selectionTone = "neutral", textEmphasis = "strong", selectionMotion: suppliedSelectionMotion, disabled = false, layoutStyle, overflow = "wrap", actions, testID, } = props;
+    const { label, items, value, defaultValue, onValueChange, size = segmentedControlRecipe.defaults.size, presentation = "connected", 
+    // Match Web's brand-filled default (2026-10-23 user review); neutral remains opt-in.
+    selectionTone = "brand", textEmphasis = "strong", selectionMotion: suppliedSelectionMotion, disabled = false, layoutStyle, overflow = "wrap", actions, testID, } = props;
     // Removed aliases must not silently change the selected collection in JavaScript callers.
     if ("options" in props || !Array.isArray(items))
         throw new TypeError("SegmentedControl requires items; options was removed");
@@ -763,8 +834,7 @@ export function SegmentedControl(props) {
         if (!scrollRow || !rect || trackWidth <= 0)
             return;
         const offset = railOffset.current;
-        const next = rect.x < offset ? Math.max(0, rect.x) : rect.x + rect.width > offset + trackWidth
-            ? Math.max(0, rect.x + rect.width - trackWidth) : offset;
+        const next = resolveScrollRevealOffset(offset, trackWidth, rect.x, rect.width);
         if (next !== offset) {
             railOffset.current = next;
             railRef.current?.scrollTo({ x: next, animated: false });
@@ -915,6 +985,9 @@ export const Chip = forwardRef(function Chip({ label, size = chipRecipe.defaults
                 _jsx(NativeText, { accessible: false, allowFontScaling: false, style: { ...typography.caption, color: indicatorColor }, children: "\u2713" })) })) : null, _jsx(Text, { fontRole: "ui", align: "center", style: [
                     {
                         color: contentColor,
+                        // Shrink beside the leading glyph and selection mark so a long label wraps inside the chip (chip.md: labels
+                        // wrap). At its natural width the label plus the glyphs overran the chip (2026-10-23 flex audit).
+                        flexShrink: 1,
                         fontWeight: active
                             ? chipRecipe.label.selectedFontWeight
                             : chipRecipe.label.fontWeight,