@astryxdesign/core 0.7.2-canary.86e8392 → 0.7.2-canary.9da2d0b

package/dist/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AAEH,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAe7C,OAAO,KAAK,EAAC,WAAW,EAAe,MAAM,WAAW,CAAC;AA+LzD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAEvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;OAKG;IACH,YAAY,CAAC,EAAE;QACb;;;;;;WAMG;QACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;IAEF;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,IAAY,EACZ,KAAW,EACX,YAAY,EACZ,KAAK,EACL,QAAe,EACf,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BA4Kb;yBA9Le,MAAM"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AAEH,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAe7C,OAAO,KAAK,EAAC,WAAW,EAAe,MAAM,WAAW,CAAC;AAgMzD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAEvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;OAKG;IACH,YAAY,CAAC,EAAE;QACb;;;;;;WAMG;QACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;IAEF;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,IAAY,EACZ,KAAW,EACX,YAAY,EACZ,KAAK,EACL,QAAe,EACf,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BA4Kb;yBA9Le,MAAM"}

package/dist/Drawer/Drawer.js

@@ -123,11 +123,11 @@ const styles = {
     k2ei4v: "xgbv0en",
     kVhnKS: "x1t7ytsu",
     kGJrpR: "x1j92z86",
-    k3aq6I: "xumwmo6 x1df3fe5",
+    k3aq6I: "xumwmo6 xbw113y",
     $$css: true
   },
   endOpen: {
-    k3aq6I: "xbryuvx x1yqmsfc x1lymnkk",
+    k3aq6I: "xbryuvx x1yqmsfc xrxqmjf",
     $$css: true
   },
   start: {
@@ -136,11 +136,11 @@ const styles = {
     ke9TFa: "xw8tdv1",
     k8ry5P: "x18b5jzi",
     kBCPoo: "x1gejf6u",
-    k3aq6I: "x5i6ehr xttggg",
+    k3aq6I: "x5i6ehr x1eqdj8u",
     $$css: true
   },
   startOpen: {
-    k3aq6I: "xbryuvx x6mt36l x14gflnl",
+    k3aq6I: "xbryuvx x6mt36l x1r0dqvm",
     $$css: true
   },
   scrim: {

package/dist/Drawer/DrawerHeader.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file DrawerHeader.tsx
- * @input Uses React, StyleX, LayoutHeader, Button, Icon, Heading, Text, i18n, BaseProps, mergeProps, themeProps
+ * @input Uses React, StyleX, LayoutHeader, Button, Icon, Heading, Text, i18n, BaseProps, isRenderable, mergeProps, themeProps
  * @output Exports DrawerHeader component and DrawerHeaderProps
  * @position Drawer header; composed in a Layout header slot inside Drawer, tested by DrawerHeader.test.tsx
  *
@@ -18,6 +18,7 @@
  * - /packages/cli/assets/templates/blocks/components/Drawer/ (showcase blocks)
  * - /packages/cli/assets/templates/blocks/components/DrawerHeader/ (showcase blocks)
  * - /apps/storybook/stories/Drawer.stories.tsx (examples and visual coverage)
+ * - /apps/storybook/stories/DrawerHeader.stories.tsx (component audit fixture)
  */
 import type { ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/Drawer/DrawerHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerHeader.d.ts","sourceRoot":"","sources":["../../src/Drawer/DrawerHeader.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,0BAA0B,EAC1B,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,iBAAiB,+BAqFnB;yBAlGe,YAAY"}
+{"version":3,"file":"DrawerHeader.d.ts","sourceRoot":"","sources":["../../src/Drawer/DrawerHeader.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,0BAA0B,EAC1B,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,iBAAiB,+BAoFnB;yBAjGe,YAAY"}

package/dist/Drawer/DrawerHeader.js

@@ -4,7 +4,7 @@
 
 /**
  * @file DrawerHeader.tsx
- * @input Uses React, StyleX, LayoutHeader, Button, Icon, Heading, Text, i18n, BaseProps, mergeProps, themeProps
+ * @input Uses React, StyleX, LayoutHeader, Button, Icon, Heading, Text, i18n, BaseProps, isRenderable, mergeProps, themeProps
  * @output Exports DrawerHeader component and DrawerHeaderProps
  * @position Drawer header; composed in a Layout header slot inside Drawer, tested by DrawerHeader.test.tsx
  *
@@ -22,6 +22,7 @@
  * - /packages/cli/assets/templates/blocks/components/Drawer/ (showcase blocks)
  * - /packages/cli/assets/templates/blocks/components/DrawerHeader/ (showcase blocks)
  * - /apps/storybook/stories/Drawer.stories.tsx (examples and visual coverage)
+ * - /apps/storybook/stories/DrawerHeader.stories.tsx (component audit fixture)
  */
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
@@ -32,7 +33,7 @@ import { Icon } from "../Icon/index.js";
 import { LayoutHeader } from "../Layout/index.js";
 import { Text } from "../Text/index.js";
 import { useTranslator } from "../i18n/index.js";
-import { mergeProps, themeProps } from "../utils/index.js";
+import { isRenderable, mergeProps, themeProps } from "../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Header for a Drawer: a title, optional subtitle and start/end content, and a
@@ -63,9 +64,9 @@ export function DrawerHeader({
   ...rest
 }) {
   const t = useTranslator();
-  // A node subtitle may be `0`: render it inside Text instead of letting a
-  // truthiness check leak a bare text node, and skip only empty values.
-  const hasSubtitle = subtitle != null && typeof subtitle !== 'boolean' && subtitle !== '';
+  const hasSubtitle = isRenderable(subtitle);
+  const hasStartContent = isRenderable(startContent);
+  const hasEndContent = isRenderable(endContent);
   const shouldCompensateEndBlock = endContentEdgeCompensation == null ? onOpenChange != null : endContentEdgeCompensation === 'block' || endContentEdgeCompensation === 'all';
   const shouldCompensateEndInline = endContentEdgeCompensation == null ? onOpenChange != null : endContentEdgeCompensation === 'inline' || endContentEdgeCompensation === 'all';
   return /*#__PURE__*/_jsx(LayoutHeader, {
@@ -79,7 +80,7 @@ export function DrawerHeader({
       ...mergeProps(themeProps('drawer-header'), {
         className: "x78zum5 x1cy8zhl x1qughib xjcht0a"
       }),
-      children: [startContent && /*#__PURE__*/_jsx("div", {
+      children: [hasStartContent && /*#__PURE__*/_jsx("div", {
         ...mergeProps(themeProps('drawer-header-start-content'), {
           className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
         }),
@@ -97,7 +98,7 @@ export function DrawerHeader({
           color: "secondary",
           children: subtitle
         })]
-      }), (endContent || onOpenChange) && /*#__PURE__*/_jsxs("div", {
+      }), (hasEndContent || onOpenChange != null) && /*#__PURE__*/_jsxs("div", {
         ...mergeProps(themeProps('drawer-header-end-content'), {
           0: {
             className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"

package/dist/DropdownMenu/DropdownMenuDivider.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../BaseProps';
-export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
+export interface DropdownMenuDividerProps extends Omit<BaseProps<HTMLDivElement>, 'role' | 'aria-orientation'> {
     /** Ref forwarded to the separator element. */
     ref?: React.Ref<HTMLDivElement>;
 }
@@ -7,7 +7,9 @@ export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'cl
  * A horizontal rule separating groups of menu rows.
  *
  * Renders `role="separator"`, so it is never a stop in the menu's arrow-key
- * order. Equivalent to `{type: 'divider'}` in the `items` data API.
+ * order. Equivalent to `{type: 'divider'}` in the `items` data API. Host
+ * attributes (`id`, `data-*`, `aria-*`) and DOM handlers reach the separator;
+ * its role and orientation stay component-owned.
  *
  * @example
  * ```
@@ -18,7 +20,7 @@ export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'cl
  * </DropdownMenu>
  * ```
  */
-export declare function DropdownMenuDivider({ xstyle, className, style, ref, }: DropdownMenuDividerProps): import("react").JSX.Element;
+export declare function DropdownMenuDivider({ xstyle, className, style, ref, ...rest }: DropdownMenuDividerProps): import("react").JSX.Element;
 export declare namespace DropdownMenuDivider {
     var displayName: string;
 }

package/dist/DropdownMenu/DropdownMenuDivider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuDivider.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuDivider.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,wBAAwB,+BAW1B;yBAhBe,mBAAmB"}
+{"version":3,"file":"DropdownMenuDivider.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuDivider.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,cAAc,CAAC,EACzB,MAAM,GAAG,kBAAkB,CAC5B;IACC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,wBAAwB,+BAY1B;yBAlBe,mBAAmB"}

package/dist/DropdownMenu/DropdownMenuDivider.js

@@ -4,7 +4,7 @@
 
 /**
  * @file DropdownMenuDivider.tsx
- * @input Uses Divider, spacing tokens, themeProps
+ * @input Uses Divider, spacing tokens, themeProps; forwards host props to Divider
  * @output Exports DropdownMenuDivider component and DropdownMenuDividerProps
  * @position Sub-component; used inside DropdownMenu
  *
@@ -39,7 +39,9 @@ const THEME_CLASS_NAME = themeProps('dropdown-menu-divider').className;
  * A horizontal rule separating groups of menu rows.
  *
  * Renders `role="separator"`, so it is never a stop in the menu's arrow-key
- * order. Equivalent to `{type: 'divider'}` in the `items` data API.
+ * order. Equivalent to `{type: 'divider'}` in the `items` data API. Host
+ * attributes (`id`, `data-*`, `aria-*`) and DOM handlers reach the separator;
+ * its role and orientation stay component-owned.
  *
  * @example
  * ```
@@ -54,9 +56,11 @@ export function DropdownMenuDivider({
   xstyle,
   className,
   style,
-  ref
+  ref,
+  ...rest
 }) {
   return /*#__PURE__*/_jsx(Divider, {
+    ...rest,
     ref: ref,
     xstyle: [styles.divider, xstyle],
     className: className ? `${THEME_CLASS_NAME} ${className}` : THEME_CLASS_NAME,

package/dist/TabList/TabMenu.d.ts

@@ -22,7 +22,7 @@ export interface TabMenuOption {
      */
     icon?: ReactNode | IconType;
 }
-export interface TabMenuProps extends Pick<BaseProps<HTMLButtonElement>, 'xstyle' | 'className' | 'style'> {
+export interface TabMenuProps extends Omit<BaseProps<HTMLButtonElement>, 'role' | 'tabIndex' | 'aria-haspopup' | 'aria-expanded' | 'aria-controls'> {
     ref?: React.Ref<HTMLButtonElement>;
     /**
      * Label for the trigger button and dropdown heading.
@@ -50,7 +50,7 @@ export interface TabMenuProps extends Pick<BaseProps<HTMLButtonElement>, 'xstyle
  * </TabList>
  * ```
  */
-export declare function TabMenu({ ref, label, options, xstyle, className, style, }: TabMenuProps): React.JSX.Element;
+export declare function TabMenu({ ref, label, options, xstyle, className, style, onClick, ...rest }: TabMenuProps): React.JSX.Element;
 export declare namespace TabMenu {
     var displayName: string;
 }

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,EAA6B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGxE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAoBtD,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;AA+KD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,YAAY,qBA4Ld;yBAnMe,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;AAoBtD,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,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,eAAe,GAAG,eAAe,CAC1E;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;AA+KD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,IAAI,EACR,EAAE,YAAY,qBA6Ld;yBAtMe,OAAO"}

package/dist/TabList/TabMenu.js

@@ -28,7 +28,7 @@ import { useListFocus } from "../hooks/useListFocus.js";
 import { useTabListContext } from "./TabListContext.js";
 import "./tab.markers.stylex.js";
 import { tabScope } from "./tab.markers.stylex.js";
-import { mergeProps } from "../utils/index.js";
+import { composeEventHandlers, mergeProps } from "../utils/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -166,7 +166,9 @@ export function TabMenu({
   options,
   xstyle,
   className,
-  style
+  style,
+  onClick,
+  ...rest
 }) {
   const tabListCtx = useTabListContext();
   const menuId = useId();
@@ -231,6 +233,7 @@ export function TabMenu({
   const setButtonRef = useMergedRefs(popover.triggerRef, buttonRef, ref);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("button", {
+      ...rest,
       ref: setButtonRef,
       type: "button",
       "aria-haspopup": "menu",
@@ -238,7 +241,7 @@ export function TabMenu({
       "aria-controls": menuId,
       "data-tab-menu": "",
       tabIndex: hasSelectedOption ? 0 : -1,
-      onClick: handleToggle,
+      onClick: composeEventHandlers(handleToggle, onClick),
       ...mergeProps(themeProps('tab-menu'), focusOutlineProps.focusVisible(styles.trigger, sizeStyles[size], hasSelectedOption && styles.triggerSelected, tabScope, xstyle), className, style),
       children: [/*#__PURE__*/_jsx("span", {
         "aria-hidden": "true",

package/dist/astryx.css

@@ -1535,6 +1535,8 @@
   .xxdn8bs:has(> div > .astryx-layout-content):not(#\#):not(#\#):not(#\#){padding-inline-end:max(0px,calc((100% - var(--layout-content-width)) / 2))}
   .xmnmr5y:has(.astryx-nav-icon):not(#\#):not(#\#):not(#\#){padding-inline-start:0}
   .x1vvd0s7:has(> div > .astryx-layout-content):not(#\#):not(#\#):not(#\#){padding-inline-start:max(0px,calc((100% - var(--layout-content-width)) / 2))}
+  .xbw113y:dir(rtl):not(#\#):not(#\#):not(#\#){transform:translateX(-100%)}
+  .x1eqdj8u:dir(rtl):not(#\#):not(#\#):not(#\#){transform:translateX(100%)}
   .x1xrp5p4:first-child:not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--radius-element)}
   .xyf0ibl:first-child:not(#\#):not(#\#):not(#\#){border-inline-start-style:none}
   .x1pjv70x:first-child:not(#\#):not(#\#):not(#\#){border-inline-start-width:0}
@@ -2079,6 +2081,8 @@
   .xubczrd.xubczrd:where(:not(:disabled,[aria-disabled="true"]))[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-image:var(--_press-paint-image)}
   @starting-style{.x1lymnkk.x1lymnkk:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:translateX(-100%)}}
   @starting-style{.x14gflnl.x14gflnl:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:translateX(100%)}}
+  @starting-style{.xrxqmjf.xrxqmjf:dir(rtl):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:translateX(-100%)}}
+  @starting-style{.x1r0dqvm.x1r0dqvm:dir(rtl):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:translateX(100%)}}
   @media (forced-colors: active){.x1pjcgc3.x1pjcgc3[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:Highlight}}
   @media (forced-colors: active){.x1r4mieh.x1r4mieh[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:Highlight}}
   .x1k48kgn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-radius:inherit}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.2-canary.86e8392",
+  "version": "0.7.2-canary.9da2d0b",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -792,8 +792,8 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.2-canary.86e8392",
-    "@astryxdesign/cli": "0.7.2-canary.86e8392",
+    "@astryxdesign/a11y-spec": "0.7.2-canary.9da2d0b",
+    "@astryxdesign/cli": "0.7.2-canary.9da2d0b",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/Drawer/Drawer.spec.md

@@ -239,11 +239,13 @@ Consumer prop syntax and examples remain in `Drawer.doc.mjs`.
 - **AR5 — Close affordance.** Drawer provides no close control of its own. When
   rendered, the `DrawerHeader` close action keeps its translated accessible name
   and Button-owned keyboard/focus behavior in both presentations.
-- **AR6 — Direction and motion.** Logical inset placement follows computed
-  direction; slide-direction mirroring currently requires a `[dir="rtl"]`
-  ancestor. Self-applied `dir="rtl"` and CSS-only direction do not trigger
-  transform mirroring. Motion reduces under `prefers-reduced-motion` without
-  changing the final state.
+- **AR6 — Direction and motion.** Logical inset placement and slide-direction
+  mirroring follow DOM directionality from the nearest effective `dir` attribute,
+  including an explicit local override or an inherited direction. As required by
+  `design:bidirectionality`, a region whose direction differs from its ancestor
+  describes that direction in DOM `dir`; a CSS-only `direction` declaration is
+  not a supported substitute. Motion reduces under `prefers-reduced-motion`
+  without changing the final state.
 
 ## Design relationships
 
@@ -299,7 +301,7 @@ decide future target qualification.
 | FR15            | `Drawer.test.tsx` purpose suite                                                                                           | `info`, `form`, `required`; modal and non-modal; a sibling behind a required drawer                                     | A `form` drawer closes on a scrim click, a `required` drawer closes or lets Escape reach the drawer behind it, or its role semantics drift.                                                        | `audit:Drawer/behavior`      |
 | FR12            | source, `Drawer.doc.mjs`, `DrawerHeader.doc.mjs`, the `DrawerHeader` target test, and current target discovery            | start/end root Panel and inherited container context                                                                    | Current root target/axis or padding reset changes, or the record claims an unreachable child target or decides future admission.                                                                   | `audit:Drawer/theming`       |
 | FR16            | `Drawer.test.tsx` container padding suites; `defineTheme.test.ts` drawer mapping; browser evidence                        | default, `padding` prop, theme `padding`, lone padded Section child, Layout composition                                 | The published inset differs from the applied padding, the default drawer changes geometry, or the block-end safe area is lost or double-subtracted.                                                | `audit:Drawer/theming`       |
-| AR6             | side tests and source inspection plus Storybook ancestor-RTL audit                                                        | settled `end` placement under ancestor RTL; transform mirroring and reduced motion source-inspected                     | Audited settled placement or source-inspected ancestor mirroring/reduced-motion behavior changes without corresponding evidence.                                                                   | `audit:Drawer/accessibility` |
+| AR6             | `DrawerDirection.test.tsx` DOM-direction and closed/entry parity suites plus exact-head Storybook RTL evidence            | start/end; self-applied, inherited, and nested opposite `dir`; closed and opening transforms                            | Any effective DOM direction or local override moves the panel from a different edge than its logical placement, or closed and opening transforms diverge.                                          | `audit:Drawer/accessibility` |
 
 ## Decision log
 

package/src/Drawer/Drawer.tsx

@@ -153,8 +153,9 @@ const styles = stylex.create({
   rendered: {
     display: 'flex',
   },
-  // start/end transforms flip under RTL so the panel always slides in from
-  // the edge it is anchored to.
+  // DOM directionality comes from the nearest effective `dir` attribute. A
+  // local override and an inherited region therefore agree with the logical
+  // edge the panel is anchored to.
   end: {
     insetInlineEnd: 0,
     insetInlineStart: 'auto',
@@ -163,7 +164,7 @@ const styles = stylex.create({
     borderInlineStartColor: colorVars['--color-border'],
     transform: {
       default: 'translateX(100%)',
-      ':is([dir="rtl"] *)': 'translateX(-100%)',
+      ':dir(rtl)': 'translateX(-100%)',
     },
   },
   endOpen: {
@@ -171,7 +172,7 @@ const styles = stylex.create({
       default: 'translateX(0)',
       '@starting-style': {
         default: 'translateX(100%)',
-        ':is([dir="rtl"] *)': 'translateX(-100%)',
+        ':dir(rtl)': 'translateX(-100%)',
       },
     },
   },
@@ -183,7 +184,7 @@ const styles = stylex.create({
     borderInlineEndColor: colorVars['--color-border'],
     transform: {
       default: 'translateX(-100%)',
-      ':is([dir="rtl"] *)': 'translateX(100%)',
+      ':dir(rtl)': 'translateX(100%)',
     },
   },
   startOpen: {
@@ -191,7 +192,7 @@ const styles = stylex.create({
       default: 'translateX(0)',
       '@starting-style': {
         default: 'translateX(-100%)',
-        ':is([dir="rtl"] *)': 'translateX(100%)',
+        ':dir(rtl)': 'translateX(100%)',
       },
     },
   },

package/src/Drawer/DrawerDirection.test.tsx

@@ -0,0 +1,127 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file DrawerDirection.test.tsx
+ * @input Drawer closed transforms and the matching @starting-style declarations
+ * @output Regression coverage for resolved DOM LTR/RTL motion on both logical sides
+ * @position Focused direction contract; complements Drawer.test.tsx behavior coverage
+ */
+
+import {readFileSync} from 'node:fs';
+import {join} from 'node:path';
+import * as ts from 'typescript';
+import {describe, expect, it} from 'vitest';
+import {render, screen} from '@testing-library/react';
+import {Drawer} from './Drawer';
+
+function closedTransform(): string {
+  return getComputedStyle(screen.getByRole('dialog', {hidden: true})).transform;
+}
+
+describe.each([
+  {side: 'start' as const, ltr: 'translateX(-100%)', rtl: 'translateX(100%)'},
+  {side: 'end' as const, ltr: 'translateX(100%)', rtl: 'translateX(-100%)'},
+])('Drawer direction on side=$side', ({side, ltr, rtl}) => {
+  it('uses a self-applied RTL direction', () => {
+    render(
+      <Drawer
+        isOpen={false}
+        onOpenChange={() => {}}
+        label="Details"
+        side={side}
+        dir="rtl">
+        Content
+      </Drawer>,
+    );
+    expect(closedTransform()).toBe(rtl);
+  });
+
+  it('honors a nearer LTR override inside an RTL page', () => {
+    render(
+      <div dir="rtl">
+        <Drawer
+          isOpen={false}
+          onOpenChange={() => {}}
+          label="Details"
+          side={side}
+          dir="ltr">
+          Content
+        </Drawer>
+      </div>,
+    );
+    expect(closedTransform()).toBe(ltr);
+  });
+});
+
+const SOURCE = readFileSync(join(__dirname, 'Drawer.tsx'), 'utf8');
+
+function styleDefinition(name: string): ts.ObjectLiteralExpression {
+  const file = ts.createSourceFile(
+    'Drawer.tsx',
+    SOURCE,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TSX,
+  );
+  let found: ts.ObjectLiteralExpression | undefined;
+  const visit = (node: ts.Node) => {
+    if (
+      ts.isPropertyAssignment(node) &&
+      ts.isIdentifier(node.name) &&
+      node.name.text === name &&
+      ts.isObjectLiteralExpression(node.initializer)
+    ) {
+      found = node.initializer;
+    }
+    ts.forEachChild(node, visit);
+  };
+  visit(file);
+  if (found == null) {
+    throw new Error(`No style named "${name}" in Drawer.tsx`);
+  }
+  return found;
+}
+
+function property(style: ts.ObjectLiteralExpression, key: string): string {
+  const entry = style.properties.find(
+    candidate =>
+      ts.isPropertyAssignment(candidate) &&
+      (ts.isIdentifier(candidate.name) || ts.isStringLiteral(candidate.name)) &&
+      candidate.name.text === key,
+  );
+  if (entry == null) {
+    throw new Error(`No "${key}" in ${style.getText().slice(0, 40)}…`);
+  }
+  return (entry as ts.PropertyAssignment).initializer.getText();
+}
+
+describe.each([
+  {
+    side: 'start',
+    closed: 'start',
+    open: 'startOpen',
+    ltr: 'translateX(-100%)',
+    rtl: 'translateX(100%)',
+  },
+  {
+    side: 'end',
+    closed: 'end',
+    open: 'endOpen',
+    ltr: 'translateX(100%)',
+    rtl: 'translateX(-100%)',
+  },
+])('Drawer $side entry declaration', ({closed, open, ltr, rtl}) => {
+  it('parks closed on the computed logical edge', () => {
+    const transform = property(styleDefinition(closed), 'transform');
+    expect(transform).toContain(`default: '${ltr}'`);
+    expect(transform).toContain(`':dir(rtl)': '${rtl}'`);
+  });
+
+  it('starts opening from the same computed logical edge', () => {
+    const transform = property(styleDefinition(open), 'transform');
+    expect(transform).toContain("default: 'translateX(0)'");
+    expect(transform).toContain('@starting-style');
+    expect(transform).toContain(`default: '${ltr}'`);
+    expect(transform).toContain(`':dir(rtl)': '${rtl}'`);
+  });
+});

package/src/Drawer/DrawerHeader.test.tsx

@@ -50,6 +50,19 @@ describe('DrawerHeader', () => {
     expect(names).toEqual(['Back', 'Edit', 'Close']);
   });
 
+  it('renders 0 values inside their start and end content slots', () => {
+    const {container} = render(
+      <DrawerHeader title="Details" startContent={0} endContent={0} />,
+    );
+
+    expect(
+      container.querySelector('.astryx-drawer-header-start-content'),
+    ).toHaveTextContent('0');
+    expect(
+      container.querySelector('.astryx-drawer-header-end-content'),
+    ).toHaveTextContent('0');
+  });
+
   it('renders a 0 subtitle and skips an empty one', () => {
     const {rerender, container} = render(
       <DrawerHeader title="Details" subtitle={0} />,

package/src/Drawer/DrawerHeader.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file DrawerHeader.tsx
- * @input Uses React, StyleX, LayoutHeader, Button, Icon, Heading, Text, i18n, BaseProps, mergeProps, themeProps
+ * @input Uses React, StyleX, LayoutHeader, Button, Icon, Heading, Text, i18n, BaseProps, isRenderable, mergeProps, themeProps
  * @output Exports DrawerHeader component and DrawerHeaderProps
  * @position Drawer header; composed in a Layout header slot inside Drawer, tested by DrawerHeader.test.tsx
  *
@@ -22,6 +22,7 @@
  * - /packages/cli/assets/templates/blocks/components/Drawer/ (showcase blocks)
  * - /packages/cli/assets/templates/blocks/components/DrawerHeader/ (showcase blocks)
  * - /apps/storybook/stories/Drawer.stories.tsx (examples and visual coverage)
+ * - /apps/storybook/stories/DrawerHeader.stories.tsx (component audit fixture)
  */
 
 import type {ReactNode} from 'react';
@@ -34,7 +35,7 @@ import {Icon} from '../Icon';
 import {LayoutHeader} from '../Layout';
 import {Text} from '../Text';
 import {useTranslator} from '../i18n';
-import {mergeProps, themeProps} from '../utils';
+import {isRenderable, mergeProps, themeProps} from '../utils';
 
 const styles = stylex.create({
   container: {
@@ -147,10 +148,9 @@ export function DrawerHeader({
   ...rest
 }: DrawerHeaderProps) {
   const t = useTranslator();
-  // A node subtitle may be `0`: render it inside Text instead of letting a
-  // truthiness check leak a bare text node, and skip only empty values.
-  const hasSubtitle =
-    subtitle != null && typeof subtitle !== 'boolean' && subtitle !== '';
+  const hasSubtitle = isRenderable(subtitle);
+  const hasStartContent = isRenderable(startContent);
+  const hasEndContent = isRenderable(endContent);
   const shouldCompensateEndBlock =
     endContentEdgeCompensation == null
       ? onOpenChange != null
@@ -175,7 +175,7 @@ export function DrawerHeader({
           themeProps('drawer-header'),
           stylex.props(styles.container),
         )}>
-        {startContent && (
+        {hasStartContent && (
           <div
             {...mergeProps(
               themeProps('drawer-header-start-content'),
@@ -196,7 +196,7 @@ export function DrawerHeader({
             </Text>
           )}
         </div>
-        {(endContent || onOpenChange) && (
+        {(hasEndContent || onOpenChange != null) && (
           <div
             {...mergeProps(
               themeProps('drawer-header-end-content'),