@astryxdesign/core 0.7.6-canary.f73623d → 0.7.6-canary.f77aaf2

package/src/Resizable/useResizable.ts

@@ -765,10 +765,14 @@ function useSingleResizable(config: UseResizableSingleConfig): ResizableRegion {
   // otherwise move the bound under the pointer; the new basis applies once the
   // gesture ends.
   const gestureBasisRef = useRef<number | null>(null);
-  // Only forces the render that releases the frozen basis when a gesture ends.
+  // Only forces the render that ends a gesture: it releases the frozen basis,
+  // and its commit writes the size the gesture settled on.
   const [gestureTick, setGestureTick] = useState(0);
   void gestureTick;
   const basis = gestureBasisRef.current ?? liveBasis;
+  // The frozen basis also marks a gesture in flight, from `_onResizeStart`
+  // until `_onResizeEnd` or `_onResizeCancel`.
+  const isGestureActive = gestureBasisRef.current != null;
 
   const didWarnMinRef = useRef(false);
   const didWarnMaxRef = useRef(false);
@@ -945,15 +949,52 @@ function useSingleResizable(config: UseResizableSingleConfig): ResizableRegion {
     }
   }, [resolvedMin, resolvedMax]);
 
+  // The size a gesture in flight has reached, for a region that unmounts
+  // before the gesture ends.
+  const pendingWriteRef = useRef<{
+    key: string;
+    state: PersistedResizableState;
+  } | null>(null);
+
   useEffect(() => {
+    // Synchronizes the `autoSaveId` entry in localStorage with the size.
     // Nothing is written while the basis is still the temporary stand-in. The
     // size on such a render is a placeholder, and persisting it overwrites the
     // real saved size with a value derived from a basis that was never real
     // (AST-010 Platform support, FR9).
-    if (autoSaveId && isBasisMeasured) {
-      persistState(autoSaveId, {size, isCollapsed});
+    if (!autoSaveId || !isBasisMeasured) {
+      pendingWriteRef.current = null;
+      return;
+    }
+    // Nor while a gesture is in flight. A drag commits a new size on every
+    // pointer move, and each write reaches every other open document of the
+    // origin as a `storage` event.
+    if (isGestureActive) {
+      pendingWriteRef.current = {key: autoSaveId, state: {size, isCollapsed}};
+      return;
     }
-  }, [size, isCollapsed, autoSaveId, isBasisMeasured]);
+    // A gesture's one write happens here, in the commit that applies its
+    // release, not in the handler that ended it: this render is the first to
+    // know the final size. A basis that changed mid-gesture applies only at
+    // the release and can re-clamp the size (AST-010 FR7), and a move the
+    // release arrived before renders together with it. The handler sees
+    // neither.
+    pendingWriteRef.current = null;
+    persistState(autoSaveId, {size, isCollapsed});
+  }, [size, isCollapsed, autoSaveId, isBasisMeasured, isGestureActive]);
+
+  // A region that unmounts mid-gesture never commits a release, so the size
+  // the gesture reached is written on the way out.
+  useEffect(
+    () => () => {
+      const pending = pendingWriteRef.current;
+      pendingWriteRef.current = null;
+      if (pending != null) {
+        persistState(pending.key, pending.state);
+      }
+    },
+    [],
+  );
 
   const collapse = useCallback(() => {
     // The already-collapsed guard keeps a repeated call from re-notifying a
@@ -1049,7 +1090,7 @@ function useSingleResizable(config: UseResizableSingleConfig): ResizableRegion {
   );
 
   // Releasing the frozen basis needs a render to apply whatever the basis
-  // became during the gesture.
+  // became during the gesture; that render's commit writes the final size.
   const releaseGestureBasis = useCallback(() => {
     if (gestureBasisRef.current != null) {
       gestureBasisRef.current = null;
@@ -1058,7 +1099,8 @@ function useSingleResizable(config: UseResizableSingleConfig): ResizableRegion {
   }, []);
 
   const onResizeEnd = useCallback(() => {
-    // Sizes are already committed during move; only the basis is held.
+    // Sizes are already committed during move; the basis is held, and the
+    // commit that releases it writes the final size to storage.
     releaseGestureBasis();
   }, [releaseGestureBasis]);
 
@@ -1066,7 +1108,8 @@ function useSingleResizable(config: UseResizableSingleConfig): ResizableRegion {
   // capture, a handle unmounted mid-drag — is still over. It does not signal a
   // resize end (that is #5297's contract, and the sizes were committed during
   // move anyway), but the basis it froze has to come back, or every later
-  // percentage bound stays pinned to the container size at grab time.
+  // percentage bound stays pinned to the container size at grab time, and the
+  // size it reached has to reach storage.
   const onResizeCancel = releaseGestureBasis;
 
   // The maximum a handle REPORTS (End uses only a configured maximum). A

package/src/SegmentedControl/SegmentedControl.tsx

@@ -19,7 +19,8 @@ import React, {useMemo, useCallback, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {colorVars, spacingVars, radiusVars} from '../theme/tokens.stylex';
 import {SegmentedControlContext} from './SegmentedControlContext';
-import {useListFocus} from '../hooks/useListFocus';
+import {useInternalListFocus} from '../hooks/useListFocus';
+import {isSegmentDisabledOnItsOwn} from '../privateAttributes/segmentDisabled.stylex';
 import {useKeyboardHint} from '../hooks/useKeyboardHint';
 import {useTooltip} from '../Tooltip';
 import type {
@@ -198,12 +199,17 @@ export function SegmentedControl({
   // the radios, skips disabled ones, wraps at the ends, handles Home/End, and
   // repairs the tab stop on mount and whenever items mount/disable — replacing
   // the component's former inline keyboard handler and tab-stop repair effect.
-  const {listRef, handleKeyDown, handleFocus} = useListFocus<HTMLDivElement>({
-    itemSelector: '[role="radio"]:not([aria-disabled="true"])',
-    hasRovingTabIndex: true,
-    wrap: true,
-    orientation: 'horizontal',
-  });
+  const {listRef, handleKeyDown, handleFocus} =
+    useInternalListFocus<HTMLDivElement>({
+      itemSelector: '[role="radio"]:not([aria-disabled="true"])',
+      hasRovingTabIndex: true,
+      // Disabled with a reason, the control keeps one Tab stop so the reason is
+      // reachable (FR2, FR7): the selected segment, else the first segment not
+      // disabled by its own isDisabled, else the first.
+      disabledTabStop: showsDisabledMessage ? orderDisabledTabStop : undefined,
+      wrap: true,
+      orientation: 'horizontal',
+    });
 
   const hint = useKeyboardHint({
     orientation: 'horizontal',
@@ -271,8 +277,19 @@ export function SegmentedControl({
       layout,
       isDisabled,
       hasDisabledMessage: showsDisabledMessage,
+      disabledReasonID: showsDisabledMessage
+        ? disabledMessageTooltip.describedBy
+        : undefined,
     }),
-    [value, onChange, size, layout, isDisabled, showsDisabledMessage],
+    [
+      value,
+      onChange,
+      size,
+      layout,
+      isDisabled,
+      showsDisabledMessage,
+      disabledMessageTooltip.describedBy,
+    ],
   );
 
   return (
@@ -316,3 +333,21 @@ export function SegmentedControl({
 }
 
 SegmentedControl.displayName = 'SegmentedControl';
+
+/**
+ * The segments of a control disabled with a reason, its Tab stop first: the
+ * selected segment, else the first segment not disabled by its own
+ * isDisabled, else the first (FR2, FR7).
+ */
+function orderDisabledTabStop(list: HTMLElement): ReadonlyArray<HTMLElement> {
+  const segments = Array.from(
+    list.querySelectorAll<HTMLElement>('[role="radio"]'),
+  );
+  const stop =
+    segments.find(segment => segment.getAttribute('aria-checked') === 'true') ??
+    segments.find(segment => !isSegmentDisabledOnItsOwn(segment)) ??
+    segments[0];
+  return stop == null
+    ? []
+    : [stop, ...segments.filter(segment => segment !== stop)];
+}

package/src/SegmentedControl/SegmentedControlContext.ts

@@ -30,6 +30,12 @@ export interface SegmentedControlContextValue {
    * tooltip is keyboard-discoverable; selection is still blocked.
    */
   hasDisabledMessage?: boolean;
+  /**
+   * The id of the group's disabled-reason tooltip while `hasDisabledMessage`
+   * is true. It also describes each segment, so the segment that has focus is
+   * described by the reason (spec:AST-085 FR5).
+   */
+  disabledReasonID?: string;
 }
 
 export const SegmentedControlContext =

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -16,6 +16,8 @@
  */
 
 import React, {type ReactNode} from 'react';
+import {joinAriaIDs} from '../utils/inputAria';
+import {segmentDisabledProps} from '../privateAttributes/segmentDisabled.stylex';
 import * as stylex from '@stylexjs/stylex';
 import {
   colorVars,
@@ -192,6 +194,7 @@ export function SegmentedControlItem({
   isDisabled = false,
   onClick: onClickProp,
   xstyle,
+  'aria-describedby': ariaDescribedByProp,
   ...rest
 }: SegmentedControlItemProps) {
   const pressable = usePressFeedback();
@@ -203,8 +206,11 @@ export function SegmentedControlItem({
   // segment focusable so the group's reason tooltip is keyboard-discoverable.
   // Per-item disabling (`isDisabled` on the item) always drops out of the tab
   // order. Activation stays blocked by the isItemDisabled guard in handleClick.
+  // Disabled with a reason, the selected segment keeps the Tab stop even when
+  // it is itself disabled (FR4); with no selected segment, the group places
+  // the stop (SegmentedControl FR2).
   const keepsSelectedFocusable =
-    isSelected && (ctx.hasDisabledMessage ?? false) && !isDisabled;
+    isSelected && (ctx.hasDisabledMessage ?? false);
   const size: SegmentedControlSize = ctx.size;
   const isFill = ctx.layout === 'fill';
 
@@ -235,7 +241,12 @@ export function SegmentedControlItem({
       aria-checked={isSelected}
       aria-disabled={isItemDisabled || undefined}
       aria-label={isLabelHidden ? label : undefined}
+      // A caller description, then the group's disabled reason, which
+      // describes each segment (FR7).
+      aria-describedby={joinAriaIDs(ariaDescribedByProp, ctx.disabledReasonID)}
       data-value={value}
+      // The group's fallback Tab stop skips segments disabled on their own.
+      {...segmentDisabledProps(isDisabled)}
       {...(!isSelected && !isItemDisabled ? pressable : undefined)}
       // Disabled items (including when the whole group is disabled) are not tab
       // stops — otherwise the selected segment stays keyboard-focusable but is

package/src/Selector/Selector.tsx

@@ -10,7 +10,7 @@
  * @position Core implementation; consumed by index.ts
  *
  * SYNC: When modified, update:
- * - /packages/core/src/Selector/Selector.spec.md
+ * - /docs/specs/components/Selector/Selector.spec.md
  * - /packages/core/src/Selector/Selector.doc.mjs
  * - /packages/core/src/Selector/Selector.test.tsx
  * - /packages/core/src/Selector/index.ts
@@ -42,7 +42,6 @@ import {
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputWrapperStyles,
-  type FieldStatusVariant,
 } from '../Field';
 import {Divider} from '../Divider';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
@@ -89,6 +88,7 @@ import {
 } from '../Field/fieldParts';
 import {composeEventHandlers} from '../utils/composeEventHandlers';
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {useInteractionModalityTracking} from '../utils/interactionModality';
 import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
@@ -104,6 +104,7 @@ import type {AdaptivePresentation} from '../hooks/useAdaptivePresentation';
 import {SelectorBottomSheet} from './SelectorBottomSheet';
 import {useSelectorPresentation} from './useSelectorPresentation';
 import {selectorPresentationStyles} from './selectorPresentation.stylex';
+import type {FieldStatusPlacement} from '../Field/fieldStatusPlacement';
 
 const styles = stylex.create({
   // Trigger container — the enhanced click target wrapping the combobox button and clear button as siblings
@@ -726,7 +727,7 @@ interface SelectorPropsBase<
    * - 'tooltip': message is exposed from the on-field status icon
    * @default 'attached' for input selectors; 'detached' for secondary/ghost selectors
    */
-  statusVariant?: FieldStatusVariant;
+  statusVariant?: FieldStatusPlacement;
 
   /**
    * Width of the field. Numbers are treated as pixels, strings are used as-is
@@ -1038,8 +1039,10 @@ export function Selector<T extends SelectorOptionType>(
   // shorter inner button makes every size's selected row land too low.
   const anchorRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLElement>(null);
+  const triggerModality = useInteractionModalityTracking();
   const triggerButtonRef = useMergedRefs<HTMLButtonElement>(
     triggerRef as React.Ref<HTMLButtonElement>,
+    triggerModality.ref,
     ref,
   );
   const searchRef = useRef<HTMLInputElement>(null);
@@ -1060,11 +1063,9 @@ export function Selector<T extends SelectorOptionType>(
   useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), triggerRef);
   const announce = useAnnounce();
 
-  // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
-  // tooltip listeners attach to the trigger container (which already exists)
-  // and the trigger button stays perceivable via aria-disabled instead of the
-  // disabled attribute. Activation is blocked by the isDisabled guards in
-  // useCombobox (onTriggerClick / onKeyDown).
+  // Disabled-reason tooltip. The container receives hover and bubbled focus
+  // while the trigger stays focusable via aria-disabled. Opening and selection
+  // are guarded independently, including options in an already-open surface.
   const showsDisabledMessage = isDisabled && !!disabledMessage;
   const disabledMessageTooltip = useTooltip({
     placement: 'above',
@@ -1183,6 +1184,7 @@ export function Selector<T extends SelectorOptionType>(
     onHide: handleLayerHide,
     onShow: handleLayerShow,
     triggerRef,
+    triggerModality,
     popoverOptions: {
       hasLightDismiss: true,
       hasCloseButton: false,
@@ -1327,6 +1329,11 @@ export function Selector<T extends SelectorOptionType>(
 
   const commitValue = useCallback(
     (newValue: string) => {
+      // A surface or pointer gesture can outlive the enabled state that opened
+      // it. Enforce current availability before callbacks or optimistic state.
+      if (isDisabled || isEffectivelyReadOnly) {
+        return;
+      }
       onChange?.(newValue);
       if (changeAction) {
         startTransition(async () => {
@@ -1335,7 +1342,14 @@ export function Selector<T extends SelectorOptionType>(
         });
       }
     },
-    [onChange, changeAction, startTransition, setOptimisticValue],
+    [
+      isDisabled,
+      isEffectivelyReadOnly,
+      onChange,
+      changeAction,
+      startTransition,
+      setOptimisticValue,
+    ],
   );
 
   // Selector behavior (keyboard nav, selection)

package/src/Selector/hooks.ts

@@ -301,13 +301,13 @@ export function useCombobox<T extends ComboboxOption = SelectorOptionData>({
 
   const selectItem = useCallback(
     (item: T) => {
-      if (item.disabled) {
+      if (isDisabled || item.disabled) {
         return;
       }
       onSelect?.(item.value);
       closeAndReset();
     },
-    [onSelect, closeAndReset],
+    [isDisabled, onSelect, closeAndReset],
   );
 
   const onTriggerClick = useCallback(() => {

package/src/Selector/useSelectorPresentation.ts

@@ -26,6 +26,7 @@ import {
   type AdaptivePresentation,
   type ResolvedAdaptivePresentation,
 } from '../hooks/useAdaptivePresentation';
+import type {InteractionModalityTracking} from '../utils/interactionModality';
 import {useFocusReturnVisibility} from '../hooks/useFocusReturnVisibility';
 
 interface UseSelectorPresentationOptions {
@@ -34,6 +35,11 @@ interface UseSelectorPresentationOptions {
   onShow: () => void;
   popoverOptions: Omit<UsePopoverOptions, 'onHide' | 'onShow'>;
   triggerRef: RefObject<HTMLElement | null>;
+  /**
+   * The component's one modality tracking, its `ref` attached to the trigger,
+   * so the returned trigger's ring follows the trigger's own document.
+   */
+  triggerModality: Pick<InteractionModalityTracking, 'readModality'>;
   /**
    * Return focus to the trigger on every close, even when a press already
    * moved focus to another element. A caller-rendered trigger needs this
@@ -62,6 +68,7 @@ export function useSelectorPresentation({
   onShow,
   popoverOptions,
   triggerRef,
+  triggerModality,
   isFocusReturnAlways = false,
 }: UseSelectorPresentationOptions): SelectorPresentationController {
   const resolvedPresentation = useAdaptivePresentation(presentation);
@@ -84,7 +91,7 @@ export function useSelectorPresentation({
     onFocusReturnTargetFocus,
     prepareFocusReturn,
     resetFocusReturn,
-  } = useFocusReturnVisibility();
+  } = useFocusReturnVisibility(triggerModality);
   onHideRef.current = onHide;
   onShowRef.current = onShow;