@astryxdesign/core 0.1.3 → 0.1.4-canary.01e5b29

package/dist/Switch/Switch.d.ts

@@ -17,7 +17,9 @@ import type { InputStatus } from '../Field/types';
 import type { BaseProps } from '../BaseProps';
 import type { SizeValue } from '../utils/types';
 export type SwitchLabelPosition = 'start' | 'end';
-export type SwitchLabelSpacing = 'default' | 'spread';
+export type SwitchLabelSpacing = 'hug' | 'spread'
+/** @deprecated Use `'hug'` instead. */
+ | 'default';
 export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLInputElement>;
@@ -56,6 +58,11 @@ export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * The HTML name attribute for the underlying checkbox input.
+     * Useful for form submissions.
+     */
+    htmlName?: string;
     /**
      * 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
@@ -118,9 +125,11 @@ export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
     labelPosition?: SwitchLabelPosition;
     /**
      * Spacing behavior between label and switch.
-     * - 'default': Label and switch are positioned next to each other
+     * - 'hug': Label and switch are positioned next to each other
      * - 'spread': Label and switch are pushed to opposite ends
-     * @default 'default'
+     *
+     * 'default' is a deprecated alias for 'hug'.
+     * @default 'hug'
      */
     labelSpacing?: SwitchLabelSpacing;
     /**
@@ -147,7 +156,7 @@ export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
  * />
  * ```
  */
-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 function Switch({ label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, htmlName, disabledMessage, isOptional, isRequired, onFocus, onBlur, labelIcon, labelTooltip, labelPosition, labelSpacing, status, width, xstyle, className, style, ref, ...rest }: 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;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"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}

package/dist/Switch/Switch.js

@@ -30,7 +30,7 @@ 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";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 const SWITCH_WIDTH = 40;
 const SWITCH_HEIGHT = 24;
 const THUMB_SIZE_OFF = 16;
@@ -90,6 +90,7 @@ export function Switch({
   isLoading = false,
   value,
   isDisabled = false,
+  htmlName,
   disabledMessage,
   isOptional = false,
   isRequired = false,
@@ -98,13 +99,14 @@ export function Switch({
   labelIcon,
   labelTooltip,
   labelPosition = 'end',
-  labelSpacing = 'default',
+  labelSpacing = 'hug',
   status,
   width,
   xstyle,
   className,
   style,
-  ref
+  ref,
+  ...rest
 }) {
   const id = useId();
   const descriptionID = useId();
@@ -114,6 +116,9 @@ export function Switch({
   const isBusy = isLoading || optimisticValue !== value;
   const isOn = optimisticValue === true;
 
+  // 'default' is a deprecated alias for 'hug' (#2889).
+  const resolvedLabelSpacing = labelSpacing === 'default' ? 'hug' : labelSpacing;
+
   // 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
@@ -140,15 +145,20 @@ export function Switch({
     describedByParts.push(disabledMessageTooltip.describedBy);
   }
   const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(' ') : undefined;
-  const switchElement = /*#__PURE__*/_jsxs("div", {
+  const switchElement = /*#__PURE__*/_jsxDEV("div", {
     ...{
       className: "x1n2onr6 x78zum5 x6s0dn4 x2lah0s x100vrsf xxk0z11 xc8icb0"
     },
-    children: [/*#__PURE__*/_jsx("input", {
+    children: [/*#__PURE__*/_jsxDEV("input", {
       ref: mergeRefs(ref, disabledMessageTooltip.positionRef),
       id: id,
       type: "checkbox",
-      role: "switch",
+      role: "switch"
+      // Withhold the name while disabled: with a disabledMessage the
+      // input stays focusable (not natively disabled), and a disabled
+      // control must not submit.
+      ,
+      name: isDisabled ? undefined : htmlName,
       checked: isOn
       // With a disabledMessage the switch keeps focusability via aria-disabled
       // so the reason is focus-discoverable; toggling is still blocked by the
@@ -189,7 +199,7 @@ export function Switch({
           className: "x10l6tqk x1ghz6dp x1717udv xg01cxk x1vjfegm x100vrsf xxk0z11 x1h6gzvc x47corl"
         }
       }[!!isDisabled << 1 | !!isBusy << 0]
-    }), /*#__PURE__*/_jsx("div", {
+    }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
       "aria-hidden": "true",
       ...mergeProps(themeProps('switch', {
         checked: isOn ? 'checked' : null,
@@ -244,7 +254,7 @@ export function Switch({
           className: "x78zum5 x6s0dn4 x100vrsf xxk0z11 xfawy5m xjspbzw x15406qy xuedmi6 x12w9bfk xlr8y92 x9f619 x1a2a7pz x1gj1ihy x1edzap1 xbyyjgo xspzpui"
         }
       }[!!isOn << 3 | !!!isDisabled << 2 | !!isDisabled << 1 | !!(isDisabled && !isOn) << 0]),
-      children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsxDEV("div", {
         ...mergeProps(themeProps('switch-thumb', {
           checked: isOn ? 'checked' : null
         }), {
@@ -255,20 +265,20 @@ export function Switch({
             className: "x78zum5 x6s0dn4 xl56j7k xjspbzw x10xzikg xh3q6i0 xuedmi6 x12w9bfk xlr8y92 xw4jnvo x1qx5ct2 x15481yp"
           }
         }[!!isOn << 0]),
-        children: isBusy && /*#__PURE__*/_jsx(Spinner, {
+        children: isBusy && /*#__PURE__*/_jsxDEV(Spinner, {
           size: "sm"
-        })
-      })
-    }), isBusy && /*#__PURE__*/_jsx(VisuallyHidden, {
+        }, void 0, false)
+      }, void 0, false)
+    }, void 0, false), isBusy && /*#__PURE__*/_jsxDEV(VisuallyHidden, {
       role: "status",
       children: "Loading"
-    })]
-  });
-  const labelElement = /*#__PURE__*/_jsx("div", {
+    }, void 0, false)]
+  }, void 0, true);
+  const labelElement = /*#__PURE__*/_jsxDEV("div", {
     ...{
       className: "x78zum5 xdt5ytf x1lsbc85 xl56j7k xjwf9q1"
     },
-    children: /*#__PURE__*/_jsx(FieldLabel, {
+    children: /*#__PURE__*/_jsxDEV(FieldLabel, {
       label: label,
       inputID: id,
       isLabelHidden: isLabelHidden,
@@ -279,14 +289,15 @@ export function Switch({
       labelTooltip: labelTooltip,
       description: description,
       descriptionID: descriptionID
-    })
-  });
-  return /*#__PURE__*/_jsxs("div", {
+    }, void 0, false)
+  }, void 0, false);
+  return /*#__PURE__*/_jsxDEV("div", {
     ...mergeProps(themeProps('switch-field', {
       labelPosition: labelPosition !== 'end' ? labelPosition : undefined,
-      labelSpacing: labelSpacing !== 'default' ? labelSpacing : undefined
+      labelSpacing: resolvedLabelSpacing !== 'hug' ? resolvedLabelSpacing : undefined
     }), stylex.props(width != null && dynamicWidthStyles.width(width), xstyle), className, style),
-    children: [/*#__PURE__*/_jsxs("div", {
+    ...rest,
+    children: [/*#__PURE__*/_jsxDEV("div", {
       ref: el => {
         // Interaction (hover/focus) listeners for the disabled-message
         // tooltip attach to the whole row for a larger trigger target;
@@ -296,23 +307,23 @@ export function Switch({
         // unconditionally is safe.
         disabledMessageTooltip.interactionRef(el);
       },
-      ...stylex.props(styles.container, labelSpacing === 'spread' && styles.containerSpread, !isDisabled && switchScope),
-      children: [' ', labelPosition === 'start' ? /*#__PURE__*/_jsxs(_Fragment, {
+      ...stylex.props(styles.container, resolvedLabelSpacing === 'spread' && styles.containerSpread, !isDisabled && switchScope),
+      children: [' ', labelPosition === 'start' ? /*#__PURE__*/_jsxDEV(_Fragment, {
         children: [labelElement, switchElement]
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
+      }, void 0, true) : /*#__PURE__*/_jsxDEV(_Fragment, {
         children: [switchElement, labelElement]
-      })]
-    }), status?.message && /*#__PURE__*/_jsx("div", {
+      }, void 0, true)]
+    }, void 0, true), status?.message && /*#__PURE__*/_jsxDEV("div", {
       ...{
         className: "xtbrsbv"
       },
-      children: /*#__PURE__*/_jsx(FieldStatus, {
+      children: /*#__PURE__*/_jsxDEV(FieldStatus, {
         type: status.type,
         message: status.message,
         id: statusMessageID,
         variant: "detached"
-      })
-    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
-  });
+      }, void 0, false)
+    }, void 0, false), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+  }, void 0, true);
 }
 Switch.displayName = 'Switch';

package/dist/TabList/Tab.js

@@ -26,7 +26,7 @@ import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { mergeProps } from "../utils/index.js";
 import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -176,10 +176,10 @@ export function Tab({
   const handleSelect = useCallback(() => {
     tabListCtx.onChange(value);
   }, [tabListCtx, value]);
-  const iconElement = displayIcon ? /*#__PURE__*/_jsx("span", {
+  const iconElement = displayIcon ? /*#__PURE__*/_jsxDEV("span", {
     ...stylex.props(styles.icon, iconSizeStyles[size]),
     children: displayIcon
-  }) : null;
+  }, void 0, false) : null;
   const sharedProps = {
     ...restProps,
     ...(isLabelHidden ? {
@@ -197,11 +197,11 @@ export function Tab({
       selected: isSelected ? 'selected' : null
     }), stylex.props(styles.base, sizeStyles[size], isSelected && styles.selected, isFill && layoutStyles.fill, tabScope, xstyle), className, style)
   };
-  const hoverBgElement = /*#__PURE__*/_jsx("span", {
+  const hoverBgElement = /*#__PURE__*/_jsxDEV("span", {
     "aria-hidden": "true",
     ...stylex.props(styles.hoverBg, hoverSizeStyles[size])
-  });
-  const indicatorElement = /*#__PURE__*/_jsx("span", {
+  }, void 0, false);
+  const indicatorElement = /*#__PURE__*/_jsxDEV("span", {
     ...mergeProps(themeProps('tab-indicator', {
       selected: isSelected ? 'selected' : null
     }), {
@@ -212,45 +212,45 @@ export function Tab({
         className: "x10l6tqk xqmqy1e xnp31yv xmz3bnw x36qwtl xjspbzw x47corl xnpjden xuedmi6 xlr8y92 x1ewilqj x1hc1fzr"
       }
     }[!!isSelected << 0])
-  });
-  const labelElement = hasVisibleLabel ? /*#__PURE__*/_jsxs("span", {
+  }, void 0, false);
+  const labelElement = hasVisibleLabel ? /*#__PURE__*/_jsxDEV("span", {
     ...{
       className: "xwz0xwf"
     },
-    children: [/*#__PURE__*/_jsx("span", {
+    children: [/*#__PURE__*/_jsxDEV("span", {
       ...{
         className: "x1agbcgv xcrlgei"
       },
       children: label
-    }), /*#__PURE__*/_jsx("span", {
+    }, void 0, false), /*#__PURE__*/_jsxDEV("span", {
       "aria-hidden": "true",
       ...{
         className: "x1agbcgv xcrlgei xlshs6z x47corl x2mo6ok"
       },
       children: label
-    })]
-  }) : null;
-  const endContentElement = endContent ? /*#__PURE__*/_jsx("span", {
+    }, void 0, false)]
+  }, void 0, true) : null;
+  const endContentElement = endContent ? /*#__PURE__*/_jsxDEV("span", {
     ...{
       className: "x3nfvp2 x6s0dn4 x2lah0s"
     },
     children: endContent
-  }) : null;
+  }, void 0, false) : null;
   if (href != null) {
-    return /*#__PURE__*/_jsxs(LinkComponent, {
+    return /*#__PURE__*/_jsxDEV(LinkComponent, {
       ref: ref,
       href: href,
       onClick: handleSelect,
       ...sharedProps,
       children: [hoverBgElement, iconElement, labelElement, endContentElement, indicatorElement]
-    });
+    }, void 0, true);
   }
-  return /*#__PURE__*/_jsxs("button", {
+  return /*#__PURE__*/_jsxDEV("button", {
     ref: ref,
     type: "button",
     onClick: handleSelect,
     ...sharedProps,
     children: [hoverBgElement, iconElement, labelElement, endContentElement, indicatorElement]
-  });
+  }, void 0, true);
 }
 Tab.displayName = 'Tab';

package/dist/TabList/TabList.js

@@ -33,7 +33,7 @@ import { themeProps } from "../utils/themeProps.js";
  * (`[data-tab-value]`) and every TabMenu trigger (`[data-tab-menu]`),
  * in DOM order. Disabled stops are filtered out by the handler.
  */
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const TAB_STOP_SELECTOR = '[data-tab-value],[data-tab-menu]';
 const styles = {
   nav: {
@@ -155,9 +155,9 @@ export function TabList({
     }
     onHintBlur(e);
   }, [onBlurProp, onHintBlur]);
-  return /*#__PURE__*/_jsx(TabListContext, {
+  return /*#__PURE__*/_jsxDEV(TabListContext, {
     value: contextValue,
-    children: /*#__PURE__*/_jsxs("nav", {
+    children: /*#__PURE__*/_jsxDEV("nav", {
       ref: mergeRefs(ref, listRef),
       ...restProps,
       "aria-label": ariaLabel,
@@ -169,7 +169,7 @@ export function TabList({
         size
       }), stylex.props(styles.nav, layout === 'fill' && styles.fill, hasDivider && styles.divider, xstyle), className, style),
       children: [children, hintElement]
-    })
-  });
+    }, void 0, true)
+  }, void 0, false);
 }
 TabList.displayName = 'TabList';

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

@@ -1 +1 @@
-{"version":3,"file":"TabMenu.d.ts","sourceRoot":"","sources":["../../src/TabList/TabMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAiBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,iBAAiB,CAAC,EAC5B,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AA8KD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,YAAY,qBAiJd;yBAxJe,OAAO"}
+{"version":3,"file":"TabMenu.d.ts","sourceRoot":"","sources":["../../src/TabList/TabMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAA6B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGxE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAiBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,iBAAiB,CAAC,EAC5B,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AA8KD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,YAAY,qBAqLd;yBA5Le,OAAO"}

package/dist/TabList/TabMenu.js

@@ -15,7 +15,7 @@
  * - /packages/core/src/TabList/TabList.test.tsx
  * - /packages/cli/templates/blocks/components/TabList/ (showcase blocks)
  */
-import React, { useCallback, useId } from 'react';
+import React, { useCallback, useId, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { Icon } from "../Icon/index.js";
 import { renderIconSlot } from "../Icon/index.js";
@@ -28,7 +28,7 @@ import "./tab.markers.stylex.js";
 import { tabScope } from "./tab.markers.stylex.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -135,18 +135,31 @@ export function TabMenu({
 }) {
   const tabListCtx = useTabListContext();
   const menuId = useId();
+  const buttonRef = useRef(null);
   const popover = usePopover({
     hasLightDismiss: true,
     hasCloseButton: false,
     hasAutoFocus: false,
     // The popup's own role="menu" is the exposed semantics; a modal dialog
     // wrapper would announce an unnamed dialog around the menu.
-    role: 'none'
+    role: 'none',
+    // Return focus to the trigger when the menu closes (Escape, Tab, select,
+    // or light dismiss) so keyboard focus is never dropped to <body>.
+    onHide: useCallback(() => {
+      buttonRef.current?.focus();
+    }, [])
   });
+
+  // The overflow menu is a composite widget: a single roving tab stop with
+  // arrow-key navigation between items, per the APG menu pattern. The hook owns
+  // item tabindex — items render tabIndex={-1} and exactly one is promoted to 0.
   const {
     listRef,
-    handleKeyDown: handleListKeyDown
+    handleKeyDown: handleListKeyDown,
+    handleFocus,
+    focusFirst
   } = useListFocus({
+    hasRovingTabIndex: true,
     onEscape: () => popover.hide()
   });
   const handleToggle = useCallback(() => {
@@ -154,8 +167,21 @@ export function TabMenu({
       popover.hide();
     } else {
       popover.show();
+      // Move focus into the menu on open so arrow navigation works and the
+      // roving tab stop lands on a real item (APG menu-button focus-on-open).
+      requestAnimationFrame(() => focusFirst());
+    }
+  }, [popover, focusFirst]);
+  const handleMenuKeyDown = useCallback(e => {
+    // APG menu-button: Tab leaves the menu rather than walking its items.
+    // Close and let onHide return focus to the trigger, from which the
+    // browser's default Tab continues to the next element.
+    if (e.key === 'Tab') {
+      popover.hide();
+      return;
     }
-  }, [popover]);
+    handleListKeyDown(e);
+  }, [handleListKeyDown, popover]);
   const selectedOption = options.find(o => o.value === tabListCtx.value);
   const triggerLabel = selectedOption?.label ?? label;
   const hasSelectedOption = selectedOption != null;
@@ -164,9 +190,9 @@ export function TabMenu({
     tabListCtx.onChange(value);
     popover.hide();
   }, [tabListCtx, popover]);
-  const setButtonRef = mergeRefs(popover.triggerRef, ref);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs("button", {
+  const setButtonRef = mergeRefs(popover.triggerRef, buttonRef, ref);
+  return /*#__PURE__*/_jsxDEV(_Fragment, {
+    children: [/*#__PURE__*/_jsxDEV("button", {
       ref: setButtonRef,
       type: "button",
       "aria-haspopup": "menu",
@@ -176,26 +202,26 @@ export function TabMenu({
       tabIndex: hasSelectedOption ? 0 : -1,
       onClick: handleToggle,
       ...mergeProps(themeProps('tab-menu'), stylex.props(styles.trigger, sizeStyles[size], hasSelectedOption && styles.triggerSelected, tabScope, xstyle), className, style),
-      children: [/*#__PURE__*/_jsx("span", {
+      children: [/*#__PURE__*/_jsxDEV("span", {
         "aria-hidden": "true",
         ...stylex.props(styles.hoverBg, hoverSizeStyles[size])
-      }), /*#__PURE__*/_jsxs("span", {
+      }, void 0, false), /*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x1n2onr6 xwz0xwf x6s0dn4 xkh2ocl"
         },
-        children: [/*#__PURE__*/_jsx("span", {
+        children: [/*#__PURE__*/_jsxDEV("span", {
           ...{
             className: "x1agbcgv xcrlgei"
           },
           children: triggerLabel
-        }), /*#__PURE__*/_jsx("span", {
+        }, void 0, false), /*#__PURE__*/_jsxDEV("span", {
           "aria-hidden": "true",
           ...{
             className: "x1agbcgv xcrlgei xlshs6z x47corl x2mo6ok"
           },
           children: triggerLabel
-        })]
-      }), /*#__PURE__*/_jsx("span", {
+        }, void 0, false)]
+      }, void 0, true), /*#__PURE__*/_jsxDEV("span", {
         "aria-hidden": "true",
         ...{
           0: {
@@ -205,38 +231,39 @@ export function TabMenu({
             className: "x12xnipv x6b6gus x2lah0s x11xpdln xuedmi6 xlr8y92 x19jd1h0"
           }
         }[!!popover.isOpen << 0],
-        children: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsxDEV(Icon, {
           icon: "chevronDown",
           size: "sm",
           color: "inherit"
-        })
-      }), hasSelectedOption && /*#__PURE__*/_jsx("span", {
+        }, void 0, false)
+      }, void 0, false), hasSelectedOption && /*#__PURE__*/_jsxDEV("span", {
         ...mergeProps(themeProps('tab-indicator', {
           selected: 'selected'
         }), {
           className: "x10l6tqk xqmqy1e xnp31yv xmz3bnw x36qwtl xjspbzw x47corl xnpjden xuedmi6 xlr8y92 xowkcby x1hc1fzr"
         })
-      })]
-    }), popover.render(/*#__PURE__*/_jsxs("div", {
+      }, void 0, false)]
+    }, void 0, true), popover.render(/*#__PURE__*/_jsxDEV("div", {
       ref: listRef,
       id: menuId,
       role: "menu",
       "aria-label": label,
-      onKeyDown: handleListKeyDown,
+      onKeyDown: handleMenuKeyDown,
+      onFocus: handleFocus,
       ...mergeProps(themeProps('tab-menu-dropdown'), {
         className: "x78zum5 xdt5ytf x1lsbc85 xu0wf1k x7a5moj"
       }),
-      children: [/*#__PURE__*/_jsx("span", {
+      children: [/*#__PURE__*/_jsxDEV("span", {
         role: "presentation",
         ...{
           className: "x141an7d x1ltkj2j x2mo6ok xv1l7n4 xu0wf1k xrrkdod"
         },
         children: label
-      }), options.map(option => {
+      }, void 0, false), options.map(option => {
         const isSelected = tabListCtx.value === option.value;
-        return /*#__PURE__*/_jsxs("div", {
+        return /*#__PURE__*/_jsxDEV("div", {
           role: "menuitem",
-          tabIndex: 0,
+          tabIndex: -1,
           "aria-current": isSelected ? 'true' : undefined,
           onClick: () => handleSelect(option.value),
           onKeyDown: e => {
@@ -253,7 +280,7 @@ export function TabMenu({
               className: "x78zum5 x6s0dn4 x1qughib x1txdalj xce4md1 xrrkdod xh6dtrn xjb2p0i xcr08ib x1kq96og x1tgivj0 x1ypdohk x15406qy xuedmi6 xlr8y92 xjbqb8w xe9uy6x x17nn4n9 x1e4wzip"
             }
           }[!!isSelected << 0]),
-          children: [/*#__PURE__*/_jsxs("span", {
+          children: [/*#__PURE__*/_jsxDEV("span", {
             ...{
               className: "x78zum5 x6s0dn4 x1txdalj"
             },
@@ -261,17 +288,17 @@ export function TabMenu({
               size: 'sm',
               color: 'secondary'
             }), option.label]
-          }), isSelected && /*#__PURE__*/_jsx(Icon, {
+          }, void 0, true), isSelected && /*#__PURE__*/_jsxDEV(Icon, {
             icon: "check",
             size: "sm",
             color: "accent"
-          })]
-        }, option.value);
+          }, void 0, false)]
+        }, option.value, true);
       })]
-    }), {
+    }, void 0, true), {
       placement: 'below',
       alignment: 'start'
     })]
-  });
+  }, void 0, true);
 }
 TabMenu.displayName = 'TabMenu';

package/dist/TabList/tab.markers.stylex.d.ts

@@ -5,6 +5,6 @@ import * as stylex from '@stylexjs/stylex';
  * and ensure they don't leak from parent containers.
  */
 export declare const tabScope: Readonly<{
-    readonly marker: stylex.StyleXClassNameFor<"marker", typeof import("@stylexjs/stylex/lib/types/StyleXTypes").StyleXMarkerTag>;
+    readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
 }>;
 //# sourceMappingURL=tab.markers.stylex.d.ts.map

package/dist/Table/BaseTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AA6hBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}
+{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AA0iBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}