@astryxdesign/core 0.1.2 → 0.1.3

package/dist/Slider/Slider.js

@@ -4,7 +4,7 @@
 
 /**
  * @file Slider.tsx
- * @input Uses React, useId, useRef, useCallback, Field, Tooltip
+ * @input Uses React, useId, useRef, useCallback, Field, Tooltip, useTooltip
  * @output Exports Slider component, SliderProps, SliderSingleProps, SliderRangeProps, SliderBaseProps
  * @position Core implementation; consumed by index.ts, tested by Slider.test.tsx
  *
@@ -21,6 +21,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Field } from "../Field/Field.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
+import { useTooltip } from "../Tooltip/index.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 
@@ -82,6 +83,7 @@ export function Slider({
     isLabelHidden = false,
     description,
     isDisabled = false,
+    disabledMessage,
     isOptional = false,
     isRequired = false,
     status,
@@ -112,6 +114,20 @@ export function Slider({
   const draggingThumbRef = useRef(null);
   const [draggingThumb, setDraggingThumb] = useState(null);
 
+  // Disabled-reason tooltip. This is a *separate* useTooltip instance from the
+  // per-thumb value bubble (the `<Tooltip>` component below): it anchors to the
+  // track container and fires on hover/focus of the whole control. Disabled
+  // controls swallow pointer events, so the thumb stays perceivable via
+  // aria-disabled while pointer/keyboard handlers early-return on isDisabled.
+  const showsDisabledMessage = isDisabled && !!disabledMessage;
+  const disabledMessageTooltip = useTooltip({
+    placement: 'above',
+    // The track container is not naturally focusable; focusin bubbles up from
+    // the thumb, so always attach focus listeners.
+    focusTrigger: 'always',
+    isEnabled: showsDisabledMessage
+  });
+
   // Build aria-describedby
   const describedByParts = [];
   if (description) {
@@ -120,6 +136,9 @@ export function Slider({
   if (status?.message) {
     describedByParts.push(statusMessageID);
   }
+  if (showsDisabledMessage) {
+    describedByParts.push(disabledMessageTooltip.describedBy);
+  }
   const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(' ') : undefined;
 
   // Value helpers — guard against undefined value (e.g. playground previews
@@ -306,12 +325,20 @@ export function Slider({
       left: '50%'
     };
     const thumbLabel = isRange ? thumbIndex === 0 ? `${label}, minimum value` : `${label}, maximum value` : label;
-    const useTooltip = valueDisplay === 'tooltip';
+
+    // Suppress the per-thumb value bubble while the disabled-message tooltip is
+    // showing, so a disabled slider surfaces the *reason* on hover/focus rather
+    // than stacking two tooltips over the same thumb.
+    const useValueTooltip = valueDisplay === 'tooltip' && !showsDisabledMessage;
     const tooltipPlacement = isHorizontal ? 'above' : 'start';
     const thumbElement = /*#__PURE__*/_jsx("div", {
       id: !isRange ? id : undefined,
-      role: "slider",
-      tabIndex: isDisabled ? -1 : 0,
+      role: "slider"
+      // With a disabledMessage the thumb keeps focusability so the reason is
+      // focus-discoverable; value changes stay blocked by the isDisabled
+      // guards in the pointer/keyboard handlers.
+      ,
+      tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
       "aria-valuemin": min,
       "aria-valuemax": max,
       "aria-valuenow": val,
@@ -376,7 +403,7 @@ export function Slider({
         }
       }[!!isHorizontal << 3 | !!!isDisabled << 2 | !!!isDisabled << 1 | !!isDisabled << 0], undefined, positionStyle)
     }, thumbIndex);
-    if (useTooltip) {
+    if (useValueTooltip) {
       return /*#__PURE__*/_jsx(Tooltip, {
         content: displayValue(val),
         placement: tooltipPlacement,
@@ -426,7 +453,7 @@ export function Slider({
     },
     children: isRange ? `${displayValue(values[0])} – ${displayValue(values[1])}` : displayValue(values[0])
   }) : null;
-  return /*#__PURE__*/_jsx(Field, {
+  return /*#__PURE__*/_jsxs(Field, {
     "data-testid": testId,
     label: label,
     isLabelHidden: isLabelHidden,
@@ -447,7 +474,7 @@ export function Slider({
     xstyle: xstyle,
     className: className,
     style: style,
-    children: /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs("div", {
       ...mergeProps(themeProps('slider', {
         orientation,
         disabled: isDisabled ? 'disabled' : null
@@ -455,7 +482,7 @@ export function Slider({
         className: "x78zum5 x6s0dn4 x1txdalj"
       }),
       children: [/*#__PURE__*/_jsxs("div", {
-        ref: mergeRefs(ref, trackRef),
+        ref: mergeRefs(ref, trackRef, disabledMessageTooltip.ref),
         ...(isRange ? {
           role: 'group',
           'aria-label': label
@@ -552,7 +579,7 @@ export function Slider({
           })
         }), values.map((_, i) => renderThumb(i))]
       }), textDisplay]
-    })
+    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }
 Slider.displayName = 'Slider';

package/dist/Spinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;CAKV,CAAC;AA0CF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAW,EACX,KAAiB,EACjB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,SAAS,EACb,EAAE,YAAY,+BA4Id;yBAvJe,OAAO"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;CAKV,CAAC;AAgDF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAW,EACX,KAAiB,EACjB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,SAAS,EACb,EAAE,YAAY,+BA4Id;yBAvJe,OAAO"}

package/dist/Spinner/Spinner.js

@@ -203,7 +203,7 @@ export function Spinner({
     children: /*#__PURE__*/_jsx("canvas", {
       ref: canvasRef,
       ...{
-        className: "xlp1x4z x1lliihq x14qxm4i xa4qsjk x1ka1v4i x1esw782"
+        className: "xlp1x4z x1lliihq x14qxm4i xnh0sag xa4qsjk x1ka1v4i x1esw782"
       }
     })
   });

package/dist/Stack/Stack.d.ts

@@ -11,7 +11,6 @@
  */
 import { type ElementType, type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
-import type { StyleXStyles } from '@stylexjs/stylex';
 import { type StackCrossAlignment, type StackDirection, type StackMainAlignment, type StackWrap, type SpacingStep } from './stack.stylex';
 import type { SizeValue } from '../utils/types';
 /**
@@ -77,11 +76,48 @@ export interface StackProps extends BaseProps<HTMLElement> {
      * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
      */
     height?: SizeValue;
+    /**
+     * Maximum width of the stack container.
+     * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
+     */
+    maxWidth?: SizeValue;
+    /**
+     * Minimum height of the stack container.
+     * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
+     */
+    minHeight?: SizeValue;
     /**
      * Spacing between items.
      * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
      */
     gap?: SpacingStep;
+    /**
+     * Inner padding on all sides, using the spacing scale.
+     * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
+     *
+     * Matches the `padding` prop on `Card`, `LayoutContent`, and `LayoutPanel`.
+     */
+    padding?: SpacingStep;
+    /**
+     * Inline (horizontal) padding, using the spacing scale.
+     * Overrides `padding` on the inline axis when both are set.
+     */
+    paddingInline?: SpacingStep;
+    /**
+     * Block (vertical) padding, using the spacing scale.
+     * Overrides `padding` on the block axis when both are set.
+     */
+    paddingBlock?: SpacingStep;
+    /**
+     * Enables scrollable overflow (`overflow: auto`) for the stack.
+     *
+     * Matches the `isScrollable` prop on `LayoutContent` and `LayoutPanel`.
+     * When the stack is itself a flex child that should scroll, pair it with
+     * a parent `StackItem size="fill" isScrollable` (StackItem applies the
+     * `min-height: 0` reset that flex scroll regions require).
+     * @default false
+     */
+    isScrollable?: boolean;
     /**
      * Whether items should wrap.
      * - `nowrap`: Items stay on one line (default)
@@ -95,27 +131,6 @@ export interface StackProps extends BaseProps<HTMLElement> {
      * @default 'div'
      */
     as?: ElementType;
-    /**
-     * StyleX styles created via `stylex.create()`. Merged with the component's
-     * base styles inside a single `stylex.props()` call for optimal deduplication.
-     *
-     * @example
-     * ```
-     * const overrides = stylex.create({ root: { marginBottom: 8 } });
-     * <Component xstyle={overrides.root} />
-     * ```
-     */
-    xstyle?: StyleXStyles;
-    /**
-     * CSS class name(s) appended to the root element.
-     * If you're using StyleX, prefer `xstyle` for optimal style deduplication.
-     */
-    className?: string;
-    /**
-     * Inline styles to apply to the root element. Spread after StyleX
-     * inline styles, so these values take priority.
-     */
-    style?: React.CSSProperties;
     /**
      * Content to render inside the stack.
      */
@@ -145,7 +160,7 @@ export interface StackProps extends BaseProps<HTMLElement> {
  * </Stack>
  * ```
  */
-export declare function Stack({ direction, hAlign, vAlign, justify, align, gap, width, height, wrap, as: element, xstyle, className, style, children, ref, ...props }: StackProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare function Stack({ direction, hAlign, vAlign, justify, align, gap, padding, paddingInline, paddingBlock, isScrollable, width, height, maxWidth, minHeight, wrap, as: element, xstyle, className, style, children, ref, ...props }: StackProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export declare namespace Stack {
     var displayName: string;
 }

package/dist/Stack/Stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../src/Stack/Stack.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C;;;;;;;;;GASG;AACH,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,mBAAmB,CAAC;AAGtE,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,WAAW,CAAC;IACxD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAE7B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,KAAK,CAAC,EACpB,SAAsB,EACtB,MAAM,EACN,MAAM,EACN,OAAO,EACP,KAAK,EACL,GAAG,EACH,KAAK,EACL,MAAM,EACN,IAAI,EACJ,EAAE,EAAE,OAAe,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,0FAoDZ;yBArEe,KAAK"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../src/Stack/Stack.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAc9C;;;;;;;;;GASG;AACH,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,mBAAmB,CAAC;AAEtE,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,WAAW,CAAC;IACxD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAE7B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAE3B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,KAAK,CAAC,EACpB,SAAsB,EACtB,MAAM,EACN,MAAM,EACN,OAAO,EACP,KAAK,EACL,GAAG,EACH,OAAO,EACP,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,EAAE,EAAE,OAAe,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,0FAkEZ;yBAzFe,KAAK"}

package/dist/Stack/Stack.js

@@ -15,8 +15,15 @@
 import { createElement } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { stack } from "./stack.stylex.js";
+import { paddingInlineStyles, paddingBlockStyles } from "../Layout/padding.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
+const overflowStyles = {
+  scrollable: {
+    kVQacm: "xysyzu8",
+    $$css: true
+  }
+};
 
 /**
  * Alignment values accepted by Stack.
@@ -60,8 +67,14 @@ export function Stack({
   justify,
   align,
   gap,
+  padding,
+  paddingInline,
+  paddingBlock,
+  isScrollable,
   width,
   height,
+  maxWidth,
+  minHeight,
   wrap,
   as: element = 'div',
   xstyle,
@@ -78,13 +91,18 @@ export function Stack({
   // Map hAlign/vAlign to mainAlign/crossAlign based on direction
   const mainAlign = direction === 'horizontal' ? resolvedHAlign : resolvedVAlign;
   const crossAlign = direction === 'horizontal' ? resolvedVAlign : resolvedHAlign;
+
+  // Resolve padding to per-axis values: `padding` sets both axes; `paddingInline`
+  // / `paddingBlock` take precedence on their own axis when provided.
+  const resolvedPaddingInline = paddingInline ?? padding;
+  const resolvedPaddingBlock = paddingBlock ?? padding;
   const stylexProps = stylex.props(...stack({
     direction,
     crossAlign,
     mainAlign,
     gap,
     wrap
-  }), xstyle);
+  }), resolvedPaddingInline != null && paddingInlineStyles[resolvedPaddingInline], resolvedPaddingBlock != null && paddingBlockStyles[resolvedPaddingBlock], isScrollable && overflowStyles.scrollable, xstyle);
 
   // Build inline style for dynamic sizing values
   const sizingStyle = {
@@ -93,6 +111,12 @@ export function Stack({
     }),
     ...(height != null && {
       height: typeof height === 'number' ? `${height}px` : height
+    }),
+    ...(maxWidth != null && {
+      maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth
+    }),
+    ...(minHeight != null && {
+      minHeight: typeof minHeight === 'number' ? `${minHeight}px` : minHeight
     })
   };
   return /*#__PURE__*/createElement(element, {

package/dist/Stack/StackItem.d.ts

@@ -10,7 +10,6 @@
  */
 import { type ElementType, type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
-import type { StyleXStyles } from '@stylexjs/stylex';
 import { type StackItemCrossAlignSelf, type StackItemSize } from './stackItem.stylex';
 export interface StackItemProps extends BaseProps<HTMLElement> {
     /** Ref forwarded to the root element */
@@ -29,31 +28,21 @@ export interface StackItemProps extends BaseProps<HTMLElement> {
      */
     size?: StackItemSize;
     /**
-     * The element type to render.
-     * @default 'div'
-     */
-    as?: ElementType;
-    /**
-     * StyleX styles created via `stylex.create()`. Merged with the component's
-     * base styles inside a single `stylex.props()` call for optimal deduplication.
+     * Enables scrollable overflow (`overflow: auto`) for the item.
      *
-     * @example
-     * ```
-     * const overrides = stylex.create({ root: { marginBottom: 8 } });
-     * <Component xstyle={overrides.root} />
-     * ```
+     * StackItem already applies the flex `min-height: 0` / `min-width: 0`
+     * reset, so `<StackItem size="fill" isScrollable>` is a complete scroll
+     * region — it grows to fill the stack and scrolls its own overflow with
+     * no extra style plumbing. Matches `isScrollable` on `LayoutContent`
+     * and `LayoutPanel`.
+     * @default false
      */
-    xstyle?: StyleXStyles;
+    isScrollable?: boolean;
     /**
-     * CSS class name(s) appended to the root element.
-     * If you're using StyleX, prefer `xstyle` for optimal style deduplication.
-     */
-    className?: string;
-    /**
-     * Inline styles to apply to the root element. Spread after StyleX
-     * inline styles, so these values take priority.
+     * The element type to render.
+     * @default 'div'
      */
-    style?: React.CSSProperties;
+    as?: ElementType;
     /**
      * Content to render inside the stack item.
      */
@@ -73,7 +62,7 @@ export interface StackItemProps extends BaseProps<HTMLElement> {
  * </HStack>
  * ```
  */
-export declare function StackItem({ crossAlignSelf, size, as: element, xstyle, className, style, children, ref, ...props }: StackItemProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare function StackItem({ crossAlignSelf, size, isScrollable, as: element, xstyle, className, style, children, ref, ...props }: StackItemProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export declare namespace StackItem {
     var displayName: string;
 }

package/dist/Stack/StackItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackItem.d.ts","sourceRoot":"","sources":["../../src/Stack/StackItem.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EACnB,MAAM,oBAAoB,CAAC;AAI5B,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,uBAAuB,CAAC;IAEzC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB;;;OAGG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,cAAc,EACd,IAAI,EACJ,EAAE,EAAE,OAAe,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,0FAoBhB;yBA9Be,SAAS"}
+{"version":3,"file":"StackItem.d.ts","sourceRoot":"","sources":["../../src/Stack/StackItem.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EACnB,MAAM,oBAAoB,CAAC;AAU5B,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,uBAAuB,CAAC;IAEzC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,cAAc,EACd,IAAI,EACJ,YAAY,EACZ,EAAE,EAAE,OAAe,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,0FAqBhB;yBAhCe,SAAS"}

package/dist/Stack/StackItem.js

@@ -16,6 +16,12 @@ import * as stylex from '@stylexjs/stylex';
 import { stackItem } from "./stackItem.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
+const overflowStyles = {
+  scrollable: {
+    kVQacm: "xysyzu8",
+    $$css: true
+  }
+};
 /**
  * Stack item component for controlling individual item behavior within a stack.
  *
@@ -33,6 +39,7 @@ import { themeProps } from "../utils/themeProps.js";
 export function StackItem({
   crossAlignSelf,
   size,
+  isScrollable,
   as: element = 'div',
   xstyle,
   className,
@@ -44,7 +51,7 @@ export function StackItem({
   const stylexProps = stylex.props(...stackItem({
     crossAlignSelf,
     size
-  }), xstyle);
+  }), isScrollable && overflowStyles.scrollable, xstyle);
   return /*#__PURE__*/createElement(element, {
     ref: ref,
     ...mergeProps(themeProps('stack-item', {

package/dist/Switch/Switch.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file Switch.tsx
- * @input Uses React, useId, ChangeEvent, FieldLabel, FieldStatus, IconType, InputStatus
+ * @input Uses React, useId, ChangeEvent, FieldLabel, FieldStatus, IconType, InputStatus, useTooltip
  * @output Exports Switch component, SwitchProps, SwitchLabelPosition, SwitchLabelSpacing
  * @position Core implementation; consumed by index.ts, tested by Switch.test.tsx
  *
@@ -56,6 +56,27 @@ export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * Explains why the switch is disabled. When set together with `isDisabled`,
+     * the switch shows a tooltip with this text on hover and keyboard focus, and
+     * the control stays focusable (via `aria-disabled`) so the reason is
+     * discoverable by keyboard and assistive technology. Activation stays
+     * blocked.
+     *
+     * Use this instead of wrapping a disabled switch in `Tooltip` — disabled
+     * controls don't emit the pointer events an external tooltip needs.
+     *
+     * @example
+     * ```
+     * <Switch
+     *   label="Enable notifications"
+     *   value={enabled}
+     *   isDisabled
+     *   disabledMessage="Notifications are turned off org-wide"
+     * />
+     * ```
+     */
+    disabledMessage?: string;
     /**
      * Whether the field is optional. Mutually exclusive with isRequired.
      * @default false
@@ -126,7 +147,7 @@ export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
  * />
  * ```
  */
-export declare function Switch({ label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, isOptional, isRequired, onFocus, onBlur, labelIcon, labelTooltip, labelPosition, labelSpacing, status, width, xstyle, className, style, ref, }: SwitchProps): import("react").JSX.Element;
+export declare function Switch({ label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, disabledMessage, isOptional, isRequired, onFocus, onBlur, labelIcon, labelTooltip, labelPosition, labelSpacing, status, width, xstyle, className, style, ref, }: SwitchProps): import("react").JSX.Element;
 export declare namespace Switch {
     var displayName: string;
 }

package/dist/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAsJ9C,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,CAAC;AAElD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;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,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,OAAO,EACP,MAAM,EACN,SAAS,EACT,YAAY,EACZ,aAAqB,EACrB,YAAwB,EACxB,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,WAAW,+BAmJb;yBA1Ke,MAAM"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AA4I9C,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,CAAC;AAElD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;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,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,OAAO,EACP,MAAM,EACN,SAAS,EACT,YAAY,EACZ,aAAqB,EACrB,YAAwB,EACxB,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,WAAW,+BA8Kb;yBAtMe,MAAM"}

package/dist/Switch/Switch.js

@@ -4,7 +4,7 @@
 
 /**
  * @file Switch.tsx
- * @input Uses React, useId, ChangeEvent, FieldLabel, FieldStatus, IconType, InputStatus
+ * @input Uses React, useId, ChangeEvent, FieldLabel, FieldStatus, IconType, InputStatus, useTooltip
  * @output Exports Switch component, SwitchProps, SwitchLabelPosition, SwitchLabelSpacing
  * @position Core implementation; consumed by index.ts, tested by Switch.test.tsx
  *
@@ -22,10 +22,12 @@ import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typographyV
 import { FieldLabel } from "../Field/FieldLabel.js";
 import { FieldStatus } from "../FieldStatus/FieldStatus.js";
 import { Spinner } from "../Spinner/index.js";
-import { mergeProps } from "../utils/index.js";
+import { useTooltip } from "../Tooltip/index.js";
+import { mergeProps, mergeRefs } from "../utils/index.js";
 import "./switch.markers.stylex.js";
 import { switchScope } from "./switch.markers.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
 
 // Fixed dimensions: 40px width, 24px height, 16px thumb (off), 20px thumb (on)
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -88,6 +90,7 @@ export function Switch({
   isLoading = false,
   value,
   isDisabled = false,
+  disabledMessage,
   isOptional = false,
   isRequired = false,
   onFocus,
@@ -111,6 +114,19 @@ export function Switch({
   const isBusy = isLoading || optimisticValue !== value;
   const isOn = optimisticValue === true;
 
+  // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
+  // tooltip listeners attach to the switch row (which already exists) and the
+  // native checkbox stays perceivable via aria-disabled instead of the disabled
+  // attribute. Toggling is blocked by the isDisabled guard in onChange.
+  const showsDisabledMessage = isDisabled && !!disabledMessage;
+  const disabledMessageTooltip = useTooltip({
+    placement: 'above',
+    // The container row is not naturally focusable; focusin bubbles up from the
+    // native input, so always attach focus listeners.
+    focusTrigger: 'always',
+    isEnabled: showsDisabledMessage
+  });
+
   // Build aria-describedby from description and status message
   // Only include descriptionID when the element actually renders
   const describedByParts = [];
@@ -120,21 +136,29 @@ export function Switch({
   if (status?.message) {
     describedByParts.push(statusMessageID);
   }
+  if (showsDisabledMessage) {
+    describedByParts.push(disabledMessageTooltip.describedBy);
+  }
   const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(' ') : undefined;
   const switchElement = /*#__PURE__*/_jsxs("div", {
     ...{
       className: "x1n2onr6 x78zum5 x6s0dn4 x2lah0s x100vrsf xxk0z11 xc8icb0"
     },
     children: [/*#__PURE__*/_jsx("input", {
-      ref: ref,
+      ref: mergeRefs(ref, disabledMessageTooltip.positionRef),
       id: id,
       type: "checkbox",
       role: "switch",
-      checked: isOn,
-      disabled: isDisabled,
+      checked: isOn
+      // With a disabledMessage the switch keeps focusability via aria-disabled
+      // so the reason is focus-discoverable; toggling is still blocked by the
+      // isDisabled guard in onChange below.
+      ,
+      disabled: isDisabled && !showsDisabledMessage,
+      "aria-disabled": showsDisabledMessage ? 'true' : undefined,
       required: isRequired,
       onChange: e => {
-        if (isBusy) {
+        if (isDisabled || isBusy) {
           return;
         }
         const checked = e.target.checked;
@@ -235,10 +259,7 @@ export function Switch({
           size: "sm"
         })
       })
-    }), isBusy && /*#__PURE__*/_jsx("span", {
-      ...{
-        className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
-      },
+    }), isBusy && /*#__PURE__*/_jsx(VisuallyHidden, {
       role: "status",
       children: "Loading"
     })]
@@ -266,6 +287,15 @@ export function Switch({
       labelSpacing: labelSpacing !== 'default' ? labelSpacing : undefined
     }), stylex.props(width != null && dynamicWidthStyles.width(width), xstyle), className, style),
     children: [/*#__PURE__*/_jsxs("div", {
+      ref: el => {
+        // Interaction (hover/focus) listeners for the disabled-message
+        // tooltip attach to the whole row for a larger trigger target;
+        // positioning anchors on the switch itself (above) so the tooltip
+        // appears next to the control, not the far edge of the row.
+        // Handlers are gated internally by isEnabled, so attaching
+        // unconditionally is safe.
+        disabledMessageTooltip.interactionRef(el);
+      },
       ...stylex.props(styles.container, labelSpacing === 'spread' && styles.containerSpread, !isDisabled && switchScope),
       children: [' ', labelPosition === 'start' ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [labelElement, switchElement]
@@ -282,7 +312,7 @@ export function Switch({
         id: statusMessageID,
         variant: "detached"
       })
-    })]
+    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }
 Switch.displayName = 'Switch';

package/dist/TabList/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAKrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,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,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAoID;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,QAAQ,qBAqGV;yBAnHe,GAAG"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAKrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,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,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAoID;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,QAAQ,qBA2GV;yBAzHe,GAAG"}

package/dist/TabList/Tab.js

@@ -186,7 +186,13 @@ export function Tab({
       'aria-label': label
     } : {}),
     [EDGE_COMP_ATTR]: '',
+    'data-tab-value': value,
     'aria-current': isSelected ? 'page' : undefined,
+    // Roving tabindex: the tab strip is a single Tab stop. The selected tab is
+    // the tabbable one; the rest are reachable via arrow keys (handled by
+    // TabList's onKeyDown). When no tab is selected, TabList's repair effect
+    // makes the first stop tabbable.
+    tabIndex: isSelected ? 0 : -1,
     ...mergeProps(themeProps('tab', {
       selected: isSelected ? 'selected' : null
     }), stylex.props(styles.base, sizeStyles[size], isSelected && styles.selected, isFill && layoutStyles.fill, tabScope, xstyle), className, style)

package/dist/TabList/TabList.d.ts

@@ -1,8 +1,10 @@
 /**
  * @file TabList.tsx
- * @input Uses React, StyleX, TabListContext
+ * @input Uses React, StyleX, TabListContext, useListFocus, useKeyboardHint
  * @output Exports TabList component and TabListProps type
- * @position Nav wrapper; provides TabListContext to Tab and TabMenu children
+ * @position Nav wrapper; provides TabListContext to Tab and TabMenu children.
+ *   Owns roving-tabindex keyboard navigation (Arrow/Home/End) across the tab
+ *   strip via the shared useListFocus hook so it is a single Tab stop.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/TabList/TabList.doc.mjs
@@ -12,7 +14,8 @@
  */
 import React, { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
-import type { TabListSize } from './TabListContext';
+import type { TabListOrientation, TabListSize } from './TabListContext';
+import { EDGE_COMP_ATTR } from '../Layout/edgeCompensation.stylex';
 export interface TabListProps extends Omit<BaseProps<HTMLElement>, 'onChange'> {
     ref?: React.Ref<HTMLElement>;
     /**
@@ -41,6 +44,15 @@ export interface TabListProps extends Omit<BaseProps<HTMLElement>, 'onChange'> {
      * @default false
      */
     hasDivider?: boolean;
+    /**
+     * Orientation of the tab strip, controlling which arrow keys move
+     * focus between tabs.
+     * - `'horizontal'` (default): ArrowLeft / ArrowRight (ArrowUp / ArrowDown
+     *   also work per the WAI-ARIA APG).
+     * - `'vertical'`: ArrowUp / ArrowDown (ArrowLeft / ArrowRight also work).
+     * @default 'horizontal'
+     */
+    orientation?: TabListOrientation;
     /**
      * Tab and TabMenu children.
      */
@@ -62,7 +74,7 @@ export interface TabListProps extends Omit<BaseProps<HTMLElement>, 'onChange'> {
  * </TabList>
  * ```
  */
-export declare function TabList({ ref, value, onChange, size: sizeProp, layout, hasDivider, xstyle, className, style, children, ...restProps }: TabListProps): React.JSX.Element;
+export declare function TabList({ ref, value, onChange, size: sizeProp, layout, hasDivider, orientation, xstyle, className, style, children, onKeyDown: onKeyDownProp, onFocus: onFocusProp, onBlur: onBlurProp, 'aria-label': ariaLabel, 'aria-orientation': _ariaOrientation, [EDGE_COMP_ATTR]: _edgeCompAttr, ...restProps }: TabListProps): React.JSX.Element;
 export declare namespace TabList {
     var displayName: string;
 }