@astryxdesign/core 0.1.2 → 0.1.3-canary.6d57c8d

package/dist/PowerSearch/PowerSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PowerSearch.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearch.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PowerSearch.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearch.tsx"],"names":[],"mappings":"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"}

package/dist/PowerSearch/PowerSearch.js

@@ -371,6 +371,7 @@ export function PowerSearch({
   hasClear = true,
   isReadOnly = false,
   isDisabled = false,
+  disabledMessage,
   startIcon,
   onFocus,
   onBlur,
@@ -408,7 +409,10 @@ export function PowerSearch({
     onHide: handleLayerHide,
     hasLightDismiss: true,
     hasCloseButton: false,
-    hasAutoFocus: false
+    hasAutoFocus: false,
+    // The popup's own listbox/menu content is the exposed semantics; focus
+    // stays on the tokenizer input, so a modal dialog wrapper is incorrect.
+    role: 'none'
   });
 
   // Wrapper that manages layer visibility and tokenizer focus alongside state
@@ -740,6 +744,7 @@ export function PowerSearch({
         startIcon: startIcon,
         endContent: combinedEndContent,
         isDisabled: isDisabled,
+        disabledMessage: disabledMessage,
         size: size,
         tokenOverflowBehavior: tokenOverflowBehavior,
         hasEntriesOnFocus: true,

package/dist/ProgressBar/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAkHD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,gBAA0C,EAC1C,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAmFlB;yBAnGe,WAAW"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAkHD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,gBAA0C,EAC1C,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAiFlB;yBAjGe,WAAW"}

package/dist/ProgressBar/ProgressBar.js

@@ -21,6 +21,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, fontWeightVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
 
 /**
  * Extensible variant map for ProgressBar.
@@ -194,14 +195,11 @@ export function ProgressBar({
         }[!!isDisabled << 0],
         children: valueText
       })]
-    }) : /*#__PURE__*/_jsx("span", {
+    }) : /*#__PURE__*/_jsx(VisuallyHidden, {
       id: labelId,
-      ...{
-        className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
-      },
       children: label
     }), /*#__PURE__*/_jsx("div", {
-      role: isIndeterminate ? 'progressbar' : 'meter',
+      role: "progressbar",
       "aria-valuenow": isIndeterminate ? undefined : clampedValue,
       "aria-valuemin": isIndeterminate ? undefined : 0,
       "aria-valuemax": isIndeterminate ? undefined : max,

package/dist/RadioList/RadioList.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file RadioList.tsx
- * @input Uses React useId, createContext, ReactNode, Field, InputStatus
+ * @input Uses React useId, useCallback, useRef, createContext, ReactNode, Field, InputStatus
  * @output Exports RadioList component, RadioListProps, RadioListContext
  * @position Core implementation; consumed by index.ts, tested by RadioList.test.tsx
  *
@@ -24,6 +24,13 @@ export interface RadioListContextValue {
     value: string;
     onChange: (value: string) => void;
     isDisabled: boolean;
+    /**
+     * True when the whole group is disabled *and* a `disabledMessage` is set. In
+     * that mode radios stay focusable via `aria-disabled` (instead of the native
+     * `disabled` attribute) so the disabled-reason tooltip is keyboard- and
+     * AT-discoverable; selection is still blocked in the item's onChange guard.
+     */
+    hasDisabledMessage: boolean;
     isRequired: boolean;
     size: RadioListSize;
     status?: InputStatus;
@@ -62,6 +69,17 @@ export interface RadioListProps extends Omit<BaseProps<HTMLElement>, 'onChange'>
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * Explains why the radio group is disabled. Applies to the whole-group
+     * disabled state (`isDisabled`), not individual items. When set together with
+     * `isDisabled`, the group shows a tooltip with this text on hover and keyboard
+     * focus, and its radios stay focusable (via `aria-disabled`) so the reason is
+     * discoverable by keyboard and assistive technology. Selection stays blocked.
+     *
+     * Use this instead of wrapping a disabled group in `Tooltip` — disabled
+     * controls don't emit the pointer events an external tooltip needs.
+     */
+    disabledMessage?: string;
     /**
      * Whether the radio group is required.
      * @default false
@@ -118,7 +136,7 @@ export interface RadioListProps extends Omit<BaseProps<HTMLElement>, 'onChange'>
  * </RadioList>
  * ```
  */
-export declare function RadioList({ ref, label, isLabelHidden, description, value, onChange, orientation, isDisabled, isRequired, isOptional, size, status, labelTooltip, width, xstyle, className, style, 'data-testid': dataTestId, children, }: RadioListProps): React.JSX.Element;
+export declare function RadioList({ ref, label, isLabelHidden, description, value, onChange, orientation, isDisabled, disabledMessage, isRequired, isOptional, size, status, labelTooltip, width, xstyle, className, style, 'data-testid': dataTestId, children, }: RadioListProps): React.JSX.Element;
 export declare namespace RadioList {
     var displayName: string;
 }

package/dist/RadioList/RadioList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioList.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI3E,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AAExC,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6CACsB,CAAC;AAiBpD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,KAAK,EACL,QAAQ,EACR,WAAwB,EACxB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,MAAM,EACN,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,QAAQ,GACT,EAAE,cAAc,qBAgEhB;yBApFe,SAAS"}
+{"version":3,"file":"RadioList.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AAExC,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6CAE5B,CAAC;AAiBF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,KAAK,EACL,QAAQ,EACR,WAAwB,EACxB,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,MAAM,EACN,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,QAAQ,GACT,EAAE,cAAc,qBAgMhB;yBArNe,SAAS"}

package/dist/RadioList/RadioList.js

@@ -4,7 +4,7 @@
 
 /**
  * @file RadioList.tsx
- * @input Uses React useId, createContext, ReactNode, Field, InputStatus
+ * @input Uses React useId, useCallback, useRef, createContext, ReactNode, Field, InputStatus
  * @output Exports RadioList component, RadioListProps, RadioListContext
  * @position Core implementation; consumed by index.ts, tested by RadioList.test.tsx
  *
@@ -15,18 +15,19 @@
  * - /apps/storybook/stories/RadioList.stories.tsx
  * - /packages/cli/templates/blocks/components/RadioList/ (showcase blocks)
  */
-import React, { createContext, useId, useMemo } from 'react';
+import React, { createContext, useCallback, useId, useMemo, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import { Field } from "../Field/Field.js";
+import { useTooltip } from "../Tooltip/index.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 
 /**
  * Size of the radio controls, matching CheckboxInput sizes.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const RadioListContext = /*#__PURE__*/createContext(null);
 RadioListContext.displayName = 'RadioListContext';
 /**
@@ -53,6 +54,7 @@ export function RadioList({
   onChange,
   orientation = 'vertical',
   isDisabled = false,
+  disabledMessage,
   isRequired = false,
   isOptional = false,
   size = 'md',
@@ -67,24 +69,110 @@ export function RadioList({
 }) {
   const name = useId();
   const inputID = useId();
+  const labelID = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
+  const groupRef = useRef(null);
+
+  // Disabled-reason tooltip. Applies to the whole-group disabled state. Disabled
+  // controls swallow pointer events, so the tooltip listeners attach to the
+  // radiogroup container and the radios stay perceivable via aria-disabled
+  // instead of the disabled attribute. Selection is blocked in the item's
+  // onChange guard.
+  const showsDisabledMessage = isDisabled && !!disabledMessage;
+  const disabledMessageTooltip = useTooltip({
+    placement: 'above',
+    // The radiogroup container is not naturally focusable; focusin bubbles up
+    // from the radios, so always attach focus listeners.
+    focusTrigger: 'always',
+    isEnabled: showsDisabledMessage
+  });
   const contextValue = useMemo(() => ({
     name,
     value,
     onChange,
     isDisabled,
+    hasDisabledMessage: showsDisabledMessage,
     isRequired,
     size,
     status
-  }), [name, value, onChange, isDisabled, isRequired, size, status]);
-  return /*#__PURE__*/_jsx(Field, {
+  }), [name, value, onChange, isDisabled, showsDisabledMessage, isRequired, size, status]);
+
+  /**
+   * Make the tab stop deterministic when a radio group has no selected value.
+   *
+   * Native `<input type="radio">` groups (same `name`) implement roving
+   * tabindex for free: when a value is selected, that radio is the single tab
+   * stop and receives focus, so no correction is needed there. But the ARIA
+   * radio-group pattern (APG) also requires a deterministic tab stop when the
+   * group has *no* selection — and browsers disagree here. Chrome, when
+   * Shift+Tab moves focus backward into an unselected group, lands on the
+   * *last* radio; forward Tab lands on the *first*. To keep the entry point
+   * predictable we redirect focus:
+   *   - forward entry  → first enabled radio (APG default)
+   *   - backward entry → last enabled radio (matches Chrome's backward tab)
+   *
+   * The redirect only runs when focus arrives from *outside* the group's own
+   * radios (guarded via `relatedTarget` containment). Moving between radios
+   * inside the group — arrow keys, clicks, programmatic focus of a sibling —
+   * is never hijacked.
+   */
+  const handleFocus = useCallback(e => {
+    // Only correct the no-selection case; a selected value already provides
+    // a deterministic native tab stop.
+    if (value !== '') {
+      return;
+    }
+    const group = groupRef.current;
+    if (!group) {
+      return;
+    }
+
+    // Ignore focus moving *within* the group. `relatedTarget` is the element
+    // losing focus; if it was inside the group, this is intra-group movement
+    // (arrow keys, clicking a sibling) and must not be hijacked. Some browsers
+    // report a null `relatedTarget`; fall back to checking whether the group
+    // already contained the active element before this focus landed.
+    const relatedTarget = e.relatedTarget;
+    if (relatedTarget) {
+      if (group.contains(relatedTarget)) {
+        return;
+      }
+    } else if (document.activeElement && document.activeElement !== e.target && group.contains(document.activeElement)) {
+      return;
+    }
+    const radios = Array.from(group.querySelectorAll('input[type="radio"]:not([disabled])'));
+    if (radios.length === 0) {
+      return;
+    }
+    const target = e.target;
+    const targetIndex = radios.findIndex(radio => radio === target);
+    // Only correct when the focus target is one of our enabled radios (not a
+    // nested control such as end-content).
+    if (targetIndex === -1) {
+      return;
+    }
+
+    // Infer tab direction from which end the browser chose. On a backward
+    // (Shift+Tab) entry into an unselected group, browsers focus the *last*
+    // radio; keep it as the deterministic backward tab stop. Any other entry
+    // (forward Tab, or a browser that lands mid-group) is normalized to the
+    // *first* enabled radio, the APG default.
+    const isBackwardEntry = targetIndex === radios.length - 1;
+    const intended = isBackwardEntry ? radios[radios.length - 1] : radios[0];
+    if (target !== intended) {
+      intended.focus();
+    }
+  }, [value]);
+  return /*#__PURE__*/_jsxs(Field, {
     ref: ref,
     "data-testid": dataTestId,
     label: label,
     isLabelHidden: isLabelHidden,
     description: description,
     inputID: inputID,
+    labelID: labelID,
+    isGroupLabel: true,
     descriptionID: description ? descriptionID : undefined,
     isOptional: isOptional,
     isRequired: isRequired,
@@ -100,10 +188,18 @@ export function RadioList({
     xstyle: xstyle,
     className: className,
     style: style,
-    children: /*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: el => {
+        groupRef.current = el;
+        // Anchor + hover/focus listeners for the disabled-message tooltip.
+        // Handlers are gated internally by isEnabled, so attaching
+        // unconditionally is safe.
+        disabledMessageTooltip.ref(el);
+      },
       role: "radiogroup",
-      "aria-label": label,
-      "aria-describedby": [description ? descriptionID : null, status?.message ? statusMessageID : null].filter(Boolean).join(' ') || undefined,
+      "aria-labelledby": labelID,
+      onFocus: handleFocus,
+      "aria-describedby": [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined,
       "aria-invalid": status?.type === 'error' ? true : undefined,
       "aria-required": isRequired || undefined,
       ...mergeProps(themeProps('radio-list', {
@@ -121,7 +217,7 @@ export function RadioList({
         value: contextValue,
         children: children
       })
-    })
+    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }
 RadioList.displayName = 'RadioList';

package/dist/RadioList/RadioListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsJ5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,aAAa,EAAE,UAAU,GAC1B,EAAE,kBAAkB,qBAoGpB;yBA7Ge,aAAa"}
+{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsJ5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,aAAa,EAAE,UAAU,GAC1B,EAAE,kBAAkB,qBAgHpB;yBAzHe,aAAa"}

package/dist/RadioList/RadioListItem.js

@@ -177,6 +177,11 @@ export function RadioListItem({
   const id = useId();
   const descriptionID = useId();
   const isDisabled = context.isDisabled || isItemDisabled;
+  // When the whole group is disabled with a disabledMessage, radios stay
+  // focusable via aria-disabled (instead of native `disabled`) so the group's
+  // reason tooltip is keyboard-discoverable. Per-item disabling is unaffected
+  // and always uses the native disabled attribute.
+  const keepsFocusableForMessage = context.hasDisabledMessage && !isItemDisabled;
   const isChecked = context.value === value;
   const size = context.size;
   const radioCircle = /*#__PURE__*/_jsxs("div", {
@@ -187,9 +192,15 @@ export function RadioListItem({
       name: context.name,
       value: value,
       checked: isChecked,
-      disabled: isDisabled,
+      disabled: isDisabled && !keepsFocusableForMessage,
+      "aria-disabled": keepsFocusableForMessage ? 'true' : undefined,
       required: context.isRequired,
-      onChange: () => context.onChange(value),
+      onChange: () => {
+        if (isDisabled) {
+          return;
+        }
+        context.onChange(value);
+      },
       "aria-describedby": description ? descriptionID : undefined,
       ...stylex.props(styles.input, wrapperSizeStyles[size], isDisabled && styles.inputDisabled)
     }), /*#__PURE__*/_jsx("div", {

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file SegmentedControl.tsx
- * @input Uses React, StyleX, SegmentedControlContext
+ * @input Uses React, StyleX, SegmentedControlContext, useListFocus, useKeyboardHint
  * @output Exports SegmentedControl component and SegmentedControlProps type
  * @position Container wrapper; provides context to SegmentedControlItem children
  *
@@ -44,6 +44,17 @@ export interface SegmentedControlProps extends Omit<BaseProps<HTMLDivElement>, '
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * Explains why the control is disabled. Applies to the whole-group disabled
+     * state (`isDisabled`), not individual segments. When set together with
+     * `isDisabled`, the control shows a tooltip with this text on hover and
+     * keyboard focus, and stays focusable (via `aria-disabled`) so the reason is
+     * discoverable by keyboard and assistive technology. Selection stays blocked.
+     *
+     * Use this instead of wrapping a disabled control in `Tooltip` — disabled
+     * controls don't emit the pointer events an external tooltip needs.
+     */
+    disabledMessage?: string;
     /**
      * SegmentedControlItem children.
      */
@@ -62,7 +73,7 @@ export interface SegmentedControlProps extends Omit<BaseProps<HTMLDivElement>, '
  * </SegmentedControl>
  * ```
  */
-export declare function SegmentedControl({ ref, value, onChange, label, size: sizeProp, layout, isDisabled, children, xstyle, className, style, }: SegmentedControlProps): React.JSX.Element;
+export declare function SegmentedControl({ ref, value, onChange, label, size: sizeProp, layout, isDisabled, disabledMessage, children, xstyle, className, style, }: SegmentedControlProps): React.JSX.Element;
 export declare namespace SegmentedControl {
     var displayName: string;
 }

package/dist/SegmentedControl/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAA+B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI1E,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAwCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,QAAQ,EACd,MAAc,EACd,UAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,qBAAqB,qBA0FvB;yBAtGe,gBAAgB"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAOlE,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AA8CD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,QAAQ,EACd,MAAc,EACd,UAAkB,EAClB,eAAe,EACf,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,qBAAqB,qBAqHvB;yBAlIe,gBAAgB"}

package/dist/SegmentedControl/SegmentedControl.js

@@ -4,7 +4,7 @@
 
 /**
  * @file SegmentedControl.tsx
- * @input Uses React, StyleX, SegmentedControlContext
+ * @input Uses React, StyleX, SegmentedControlContext, useListFocus, useKeyboardHint
  * @output Exports SegmentedControl component and SegmentedControlProps type
  * @position Container wrapper; provides context to SegmentedControlItem children
  *
@@ -14,15 +14,18 @@
  * - /packages/core/src/SegmentedControl/SegmentedControl.test.tsx
  * - /packages/cli/templates/blocks/components/SegmentedControl/ (showcase blocks)
  */
-import React, { useMemo, useRef, useCallback } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars } from "../theme/tokens.stylex.js";
 import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import { useListFocus } from "../hooks/useListFocus.js";
+import { useKeyboardHint } from "../hooks/useKeyboardHint.js";
+import { useTooltip } from "../Tooltip/index.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -46,6 +49,10 @@ const styles = {
     kSiTet: "xbyyjgo",
     kfzvcC: "x47corl",
     $$css: true
+  },
+  disabledWithMessage: {
+    kSiTet: "xbyyjgo",
+    $$css: true
   }
 };
 const sizeStyles = {
@@ -87,71 +94,98 @@ export function SegmentedControl({
   size: sizeProp,
   layout = 'hug',
   isDisabled = false,
+  disabledMessage,
   children,
   xstyle,
   className,
   style
 }) {
   const size = useSize(sizeProp, 'md');
-  const containerRef = useRef(null);
-  const handleKeyDown = useCallback(e => {
+
+  // Disabled-reason tooltip. Applies to the whole-group disabled state. Disabled
+  // controls swallow pointer events, so the tooltip listeners attach to the
+  // radiogroup container (and the container keeps pointer events on in this
+  // mode) while the radios stay perceivable via aria-disabled. Selection is
+  // blocked by the isDisabled guards in the click/focus handlers.
+  const showsDisabledMessage = isDisabled && !!disabledMessage;
+  const disabledMessageTooltip = useTooltip({
+    placement: 'above',
+    // The radiogroup container is not naturally focusable; focusin bubbles up
+    // from the radios, so always attach focus listeners.
+    focusTrigger: 'always',
+    isEnabled: showsDisabledMessage
+  });
+
+  // Roving tabindex + arrow/Home/End navigation is owned by the shared
+  // useListFocus primitive: it stamps a single tab stop (tabIndex 0/-1) across
+  // 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({
+    itemSelector: '[role="radio"]:not([aria-disabled="true"])',
+    hasRovingTabIndex: true,
+    wrap: true,
+    orientation: 'horizontal'
+  });
+  const hint = useKeyboardHint({
+    orientation: 'horizontal',
+    isEnabled: !isDisabled
+  });
+  const handleContainerKeyDown = useCallback(e => {
+    hint.onKeyDown(e);
+    handleKeyDown(e);
+  }, [hint, handleKeyDown]);
+
+  // Selection-follows-focus (APG radiogroup): useListFocus only *moves* focus,
+  // so whenever it lands focus on a new radio (arrow/Home/End, or a click) we
+  // select that radio's value. Reading the focused element's data-value here
+  // keeps selection in lockstep with focus without duplicating the navigation
+  // logic. Disabled radios are ignored (they should never become the value),
+  // and the already-selected value is skipped so an initial Tab-in (or a click
+  // on the current segment) is a no-op, matching click behavior.
+  const handleContainerFocus = useCallback(e => {
+    hint.onFocus(e);
+    handleFocus(e);
     if (isDisabled) {
       return;
     }
-    const container = containerRef.current;
-    if (!container) {
+    const focused = e.target?.closest('[role="radio"][data-value]');
+    if (!focused || focused.getAttribute('aria-disabled') === 'true') {
       return;
     }
-    const items = Array.from(container.querySelectorAll('[role="radio"]:not([aria-disabled="true"])'));
-    if (items.length === 0) {
-      return;
-    }
-    const currentIndex = items.findIndex(item => item === document.activeElement);
-    let nextIndex;
-    switch (e.key) {
-      case 'ArrowRight':
-        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
-        break;
-      case 'ArrowLeft':
-        nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
-        break;
-      case 'Home':
-        nextIndex = 0;
-        break;
-      case 'End':
-        nextIndex = items.length - 1;
-        break;
-      default:
-        return;
-    }
-    e.preventDefault();
-    const nextItem = items[nextIndex];
-    nextItem.focus();
-    const nextValue = nextItem.dataset.value;
-    if (nextValue != null) {
+    const nextValue = focused.dataset.value;
+    if (nextValue != null && nextValue !== value) {
       onChange(nextValue);
     }
-  }, [isDisabled, onChange]);
+  }, [hint, handleFocus, isDisabled, onChange, value]);
   const contextValue = useMemo(() => ({
     value,
     onChange,
     size,
     layout,
-    isDisabled
-  }), [value, onChange, size, layout, isDisabled]);
-  return /*#__PURE__*/_jsx(SegmentedControlContext, {
+    isDisabled,
+    hasDisabledMessage: showsDisabledMessage
+  }), [value, onChange, size, layout, isDisabled, showsDisabledMessage]);
+  return /*#__PURE__*/_jsxs(SegmentedControlContext, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx("div", {
-      ref: mergeRefs(ref, containerRef),
+    children: [/*#__PURE__*/_jsxs("div", {
+      ref: mergeRefs(ref, listRef, disabledMessageTooltip.ref),
       role: "radiogroup",
       "aria-label": label,
       "aria-disabled": isDisabled || undefined,
-      onKeyDown: handleKeyDown,
+      "aria-describedby": showsDisabledMessage ? disabledMessageTooltip.describedBy : undefined,
+      onKeyDown: handleContainerKeyDown,
+      onFocus: handleContainerFocus,
+      onBlur: hint.onBlur,
       ...mergeProps(themeProps('segmented-control', {
         size
-      }), stylex.props(styles.container, sizeStyles[size], layout === 'fill' && styles.fill, isDisabled && styles.disabled, xstyle), className, style),
-      children: children
-    })
+      }), stylex.props(styles.container, sizeStyles[size], layout === 'fill' && styles.fill, isDisabled && (showsDisabledMessage ? styles.disabledWithMessage : styles.disabled), xstyle), className, style),
+      children: [children, hint.hintElement]
+    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }
 SegmentedControl.displayName = 'SegmentedControl';

package/dist/SegmentedControl/SegmentedControlContext.d.ts

@@ -6,6 +6,13 @@ export interface SegmentedControlContextValue {
     size: SegmentedControlSize;
     layout: SegmentedControlLayout;
     isDisabled: boolean;
+    /**
+     * True when the whole control is disabled *and* a `disabledMessage` is set.
+     * In that mode the selected segment stays focusable (via `aria-disabled`
+     * rather than being dropped from the tab order) so the group's disabled-reason
+     * tooltip is keyboard-discoverable; selection is still blocked.
+     */
+    hasDisabledMessage?: boolean;
 }
 export declare const SegmentedControlContext: import("react").Context<SegmentedControlContextValue | null>;
 export declare function useSegmentedControlContext(): SegmentedControlContextValue;

package/dist/SegmentedControl/SegmentedControlContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlContext.ts"],"names":[],"mappings":"AAeA,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtD,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,8DACsB,CAAC;AAG3D,wBAAgB,0BAA0B,IAAI,4BAA4B,CASzE"}
+{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlContext.ts"],"names":[],"mappings":"AAeA,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtD,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,uBAAuB,8DACsB,CAAC;AAG3D,wBAAgB,0BAA0B,IAAI,4BAA4B,CASzE"}

package/dist/SegmentedControl/SegmentedControlItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAezD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,yBAA0B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC7E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA6FD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,UAAkB,GACnB,EAAE,yBAAyB,qBAgD3B;yBAvDe,oBAAoB"}
+{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAezD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,yBAA0B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC7E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA6FD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,UAAkB,GACnB,EAAE,yBAAyB,qBA6D3B;yBApEe,oBAAoB"}

package/dist/SegmentedControl/SegmentedControlItem.js

@@ -139,6 +139,11 @@ export function SegmentedControlItem({
   const ctx = useSegmentedControlContext();
   const isSelected = ctx.value === value;
   const isItemDisabled = isDisabled || ctx.isDisabled;
+  // When the whole group is disabled with a disabledMessage, keep the selected
+  // 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.
+  const keepsSelectedFocusable = isSelected && (ctx.hasDisabledMessage ?? false) && !isDisabled;
   const size = ctx.size;
   const isFill = ctx.layout === 'fill';
   const handleClick = useCallback(() => {
@@ -157,8 +162,14 @@ export function SegmentedControlItem({
     "aria-checked": isSelected,
     "aria-disabled": isItemDisabled || undefined,
     "aria-label": isLabelHidden ? label : undefined,
-    "data-value": value,
-    tabIndex: isSelected ? 0 : -1,
+    "data-value": value
+    // Disabled items (including when the whole group is disabled) are not tab
+    // stops — otherwise the selected segment stays keyboard-focusable but is
+    // silently dead (arrows and activation are no-ops) (navigation-13). The
+    // exception is a whole-group disabledMessage, where the selected segment
+    // stays focusable so the reason tooltip is keyboard-discoverable.
+    ,
+    tabIndex: isSelected && !isItemDisabled || keepsSelectedFocusable ? 0 : -1,
     onClick: handleClick,
     ...mergeProps(themeProps('segmented-control-item', {
       size,