@astryxdesign/core 0.5.2-canary.4c2a424 → 0.5.2-canary.501e975

package/dist/AppShell/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AA+BhD;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AA2KD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBA6Yf;yBA5Ze,QAAQ"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AA+BhD;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AA4KD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBAkZf;yBAjae,QAAQ"}

package/dist/AppShell/AppShell.js

@@ -105,6 +105,7 @@ const styles = {
     k1xSpc: "x78zum5",
     kXwgrk: "xdt5ytf",
     kVAEAm: "x1n2onr6",
+    kVQacm: "x7giv3",
     $$css: true
   },
   variantWash: {
@@ -294,6 +295,9 @@ export function AppShell({
   const navHasDividers = variant === 'section';
   const isElevated = variant === 'elevated';
   const navAreaStyle = variant === 'wash' || variant === 'elevated' ? styles.navAreaWash : variant === 'surface' ? styles.navAreaSurface : undefined;
+  // Section normally inherits the shell's surface background. Its auto-height
+  // header needs to paint that surface itself while content scrolls beneath it.
+  const headerAreaStyle = navAreaStyle ?? (isAuto && variant === 'section' ? styles.navAreaSurface : undefined);
   const contentAreaStyle = variant === 'wash' ? styles.contentBgWash : variant === 'elevated' && hasTopNav && hasSideNav && !isBelowBreakpoint ? styles.contentBgTransparent : variant === 'surface' || variant === 'elevated' ? styles.contentBgSurface : undefined;
 
   // Background for sticky elements in auto mode — must be opaque so content
@@ -395,7 +399,7 @@ export function AppShell({
     role: "banner",
     ...mergeProps(themeProps('app-shell-header', {
       variant
-    }), stylex.props(navAreaStyle, isAuto && styles.headerSticky)),
+    }), stylex.props(headerAreaStyle, isAuto && styles.headerSticky)),
     children: headerInner
   }) : undefined;
 
@@ -473,7 +477,7 @@ export function AppShell({
     role: headerContent == null ? 'banner' : undefined,
     ...mergeProps(themeProps('app-shell-header', {
       variant
-    }), stylex.props(navAreaStyle, isAuto && styles.headerSticky)),
+    }), stylex.props(headerAreaStyle, isAuto && styles.headerSticky)),
     children: /*#__PURE__*/_jsx(LayoutHeader, {
       padding: 0,
       hasDivider: navHasDividers,

package/dist/Banner/Banner.d.ts

@@ -11,6 +11,11 @@
  * - Status icon (themeProps 'banner-icon'): the target rides on the default
  *   <Icon> itself — the element that paints — so 'status:X' overrides reach
  *   the glyph (#4166); for a custom `icon` node it stays on the layout wrapper
+ * - Description (themeProps 'banner-description'): the supporting line owns its
+ *   own colour and type, and the space between it and the title
+ * - The end area carries no target: it is a layout row (flex, wrap, edge
+ *   compensation) rather than a painted surface, and a theme that wants the
+ *   header to grow around its buttons sets `padding-block` on 'banner'
  * - No left border accent — color is expressed through the full header background
  * - Each visual area owns its own border-radius (no overflow:clip on the container)
  * - Children are collapsible by default: a toggle appears in the header end

package/dist/Banner/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,OAAO,EAA0B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,eAAe,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMjE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;;;;OAkBG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAmND;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,WAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAAc,EACd,oBAAoB,EACpB,GAAG,IAAI,EACR,EAAE,WAAW,sCA6Ob;yBAjQe,MAAM"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,OAAO,EAA0B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,eAAe,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMjE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;;;;OAkBG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAmND;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,WAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAAc,EACd,oBAAoB,EACpB,GAAG,IAAI,EACR,EAAE,WAAW,sCAmPb;yBAvQe,MAAM"}

package/dist/Banner/Banner.js

@@ -15,6 +15,11 @@
  * - Status icon (themeProps 'banner-icon'): the target rides on the default
  *   <Icon> itself — the element that paints — so 'status:X' overrides reach
  *   the glyph (#4166); for a custom `icon` node it stays on the layout wrapper
+ * - Description (themeProps 'banner-description'): the supporting line owns its
+ *   own colour and type, and the space between it and the title
+ * - The end area carries no target: it is a layout row (flex, wrap, edge
+ *   compensation) rather than a painted surface, and a theme that wants the
+ *   header to grow around its buttons sets `padding-block` on 'banner'
  * - No left border accent — color is expressed through the full header background
  * - Each visual area owns its own border-radius (no overflow:clip on the container)
  * - Children are collapsible by default: a toggle appears in the header end
@@ -429,9 +434,9 @@ export function Banner({
           },
           children: title
         }), isRenderable(description) && /*#__PURE__*/_jsx("div", {
-          ...{
+          ...mergeProps(themeProps('banner-description'), {
             className: "x1ghz6dp xjb2p0i x141an7d x1sodnla x1ltkj2j xv1l7n4 xj0a0fe"
-          },
+          }),
           children: description
         })]
       }), showEndArea && /*#__PURE__*/_jsxs("div", {

package/dist/Breadcrumbs/BreadcrumbItem.d.ts

@@ -1,8 +1,9 @@
 /**
  * @file BreadcrumbItem.tsx
  * @input Uses React use/useRef/useEffect, stylex, theme tokens, BreadcrumbContext,
- *   and (for the menu trigger) usePopover + the shared DropdownMenu item API
- *   (renderDropdownItems, DropdownMenuContext, MENU_ITEM_SELECTOR, useListFocus)
+ *   rtlStyles for the contextual default slash, and (for the menu trigger)
+ *   usePopover + the shared DropdownMenu item API (renderDropdownItems,
+ *   DropdownMenuContext, MENU_ITEM_SELECTOR, useListFocus)
  * @output Exports BreadcrumbItem component and BreadcrumbItemProps
  * @position Individual breadcrumb item; used inside Breadcrumbs
  *

package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,qCAAqC,CAAC;AAM7C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,8BAA8B,CAAC;AAOrE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B;AAyHD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAsMrB;yBArNe,cAAc"}
+{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,qCAAqC,CAAC;AAM7C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,8BAA8B,CAAC;AAOrE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B;AAqID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAkMrB;yBAjNe,cAAc"}

package/dist/Breadcrumbs/BreadcrumbItem.js

@@ -5,8 +5,9 @@
 /**
  * @file BreadcrumbItem.tsx
  * @input Uses React use/useRef/useEffect, stylex, theme tokens, BreadcrumbContext,
- *   and (for the menu trigger) usePopover + the shared DropdownMenu item API
- *   (renderDropdownItems, DropdownMenuContext, MENU_ITEM_SELECTOR, useListFocus)
+ *   rtlStyles for the contextual default slash, and (for the menu trigger)
+ *   usePopover + the shared DropdownMenu item API (renderDropdownItems,
+ *   DropdownMenuContext, MENU_ITEM_SELECTOR, useListFocus)
  * @output Exports BreadcrumbItem component and BreadcrumbItemProps
  * @position Individual breadcrumb item; used inside Breadcrumbs
  *
@@ -27,7 +28,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, typeScaleVars, radiusVars, fontWeightVars } from "../theme/tokens.stylex.js";
 import { BreadcrumbContext } from "./Breadcrumbs.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
-import { mergeProps } from "../utils/index.js";
+import { mergeProps, rtlStyles } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { Icon } from "../Icon/index.js";
@@ -99,6 +100,20 @@ const itemStyles = {
     $$css: true
   }
 };
+function BreadcrumbSeparator({
+  separator
+}) {
+  return /*#__PURE__*/_jsx("span", {
+    "aria-hidden": "true",
+    ...{
+      className: "x11ke7fs x6s0dn4 xv1l7n4 xu0wf1k x87ps6o"
+    },
+    children: separator === '/' ? /*#__PURE__*/_jsx("span", {
+      ...stylex.props(rtlStyles.mirror),
+      children: "/"
+    }) : separator
+  });
+}
 const menuStyles = {
   popover: {
     k7Eaqz: "x5w4yej",
@@ -220,12 +235,8 @@ export function BreadcrumbItem({
       }), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style),
       "data-testid": testId,
       ...rest,
-      children: [/*#__PURE__*/_jsx("span", {
-        "aria-hidden": "true",
-        ...{
-          className: "x11ke7fs x6s0dn4 xv1l7n4 xu0wf1k x87ps6o"
-        },
-        children: ctx.separator
+      children: [/*#__PURE__*/_jsx(BreadcrumbSeparator, {
+        separator: ctx.separator
       }), hasMenu ?
       /*#__PURE__*/
       // A current crumb can also open a sibling menu — the trigger keeps
@@ -262,12 +273,8 @@ export function BreadcrumbItem({
     }), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style),
     "data-testid": testId,
     ...rest,
-    children: [/*#__PURE__*/_jsx("span", {
-      "aria-hidden": "true",
-      ...{
-        className: "x11ke7fs x6s0dn4 xv1l7n4 xu0wf1k x87ps6o"
-      },
-      children: ctx.separator
+    children: [/*#__PURE__*/_jsx(BreadcrumbSeparator, {
+      separator: ctx.separator
     }), hasMenu ? /*#__PURE__*/_jsx(BreadcrumbMenuTrigger, {
       ref: contentRef,
       menu: menu,

package/dist/Resizable/ResizeHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAQnD,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AA0NzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BA6RnB;yBA5Se,YAAY"}
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAQnD,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAyOzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BA0TnB;yBAzUe,YAAY"}

package/dist/Resizable/ResizeHandle.js

@@ -21,6 +21,15 @@
  * While the panel is collapsed, aria-valuenow is clamped to aria-valuemin
  * (a value below the minimum is invalid per WCAG 4.1.2) and a localized
  * "Collapsed" aria-valuetext announces the real state.
+ *
+ * Dragging takes pointer capture on the grab zone, so the rest of the gesture
+ * is delivered to that element instead of being hit-tested against whatever
+ * the cursor happens to be over. A resizable region that contains an embedded
+ * frame otherwise loses the drag the moment the cursor crosses the frame: the
+ * events go to the guest document, and a listener on the host window never
+ * hears them again. Captured events are delivered to the capturing element,
+ * so the move/up/cancel handlers live on the grab zone (as in Slider), not on
+ * window.
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -66,6 +75,20 @@ function hitAreaBiasDir(effectiveSide) {
   }
   return effectiveSide === 'start' ? -1 : 1;
 }
+
+/**
+ * Drag feedback lives on `<body>`, not on the handle: the pointer spends the
+ * drag off the handle, over whatever the panels contain, and the resize cursor
+ * has to hold there. Module scope so the writes stay outside the component.
+ */
+function applyBodyDragStyles(isHorizontal) {
+  document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';
+  document.body.style.userSelect = 'none';
+}
+function clearBodyDragStyles() {
+  document.body.style.cursor = '';
+  document.body.style.userSelect = '';
+}
 const styles = {
   handle: {
     kVAEAm: "x1n2onr6",
@@ -273,9 +296,10 @@ export function ResizeHandle({
   const t = useTranslator();
   const label = labelFromProps ?? t('@astryx.resizable.handle.label');
   const handleRef = useRef(null);
-  // Removes the in-flight drag's window listeners (and resets body styles).
-  // Held in a ref so unmount can tear down a drag that never got a pointerup.
-  const dragCleanupRef = useRef(null);
+  // The pointer that owns the in-flight drag, plus the values its deltas are
+  // measured against. A ref so moves don't re-render, and so unmount can tell
+  // a live drag from a finished one.
+  const dragRef = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
@@ -296,47 +320,56 @@ export function ResizeHandle({
   const isInteracting = isHovered || isFocused;
 
   // --- Pointer drag ---
+  const clearDrag = useCallback(() => {
+    dragRef.current = null;
+    setIsDragging(false);
+    clearBodyDragStyles();
+  }, []);
   const handlePointerDown = useCallback(e => {
-    if (isDisabled || !resizable) {
+    if (isDisabled || !resizable || dragRef.current) {
       return;
     }
     e.preventDefault();
     e.stopPropagation();
+    // Take the pointer for the whole gesture. Without capture the browser
+    // re-hit-tests every move, so a frame anywhere under the drag path
+    // swallows the rest of it into the guest document.
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    dragRef.current = {
+      pointerId: e.pointerId,
+      startPos: isHorizontal ? e.clientX : e.clientY,
+      rtl: isHorizontal ? getRTLMultiplier() : 1
+    };
     setIsDragging(true);
     resizable._onResizeStart();
-    const startPos = isHorizontal ? e.clientX : e.clientY;
-    const rtl = isHorizontal ? getRTLMultiplier() : 1;
-    document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';
-    document.body.style.userSelect = 'none';
-    const onMove = ev => {
-      const currentPos = isHorizontal ? ev.clientX : ev.clientY;
-      const delta = (currentPos - startPos) * rtl * sign;
-      resizable._onResizeMove(delta);
-    };
-    const onUp = () => {
-      cleanup();
-      setIsDragging(false);
-      resizable._onResizeEnd();
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-    };
-    const onCancel = () => {
-      cleanup();
-      setIsDragging(false);
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-    };
-    function cleanup() {
-      window.removeEventListener('pointermove', onMove);
-      window.removeEventListener('pointerup', onUp);
-      window.removeEventListener('pointercancel', onCancel);
-      dragCleanupRef.current = null;
+    applyBodyDragStyles(isHorizontal);
+  }, [isDisabled, resizable, isHorizontal, getRTLMultiplier]);
+  const handlePointerMove = useCallback(e => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== e.pointerId || !resizable) {
+      return;
     }
-    window.addEventListener('pointermove', onMove);
-    window.addEventListener('pointerup', onUp);
-    window.addEventListener('pointercancel', onCancel);
-    dragCleanupRef.current = cleanup;
-  }, [isDisabled, resizable, isHorizontal, getRTLMultiplier, sign]);
+    const currentPos = isHorizontal ? e.clientX : e.clientY;
+    resizable._onResizeMove((currentPos - drag.startPos) * drag.rtl * sign);
+  }, [resizable, isHorizontal, sign]);
+  const handlePointerUp = useCallback(e => {
+    if (dragRef.current?.pointerId !== e.pointerId) {
+      return;
+    }
+    clearDrag();
+    resizable?._onResizeEnd();
+  }, [clearDrag, resizable]);
+
+  // Serves pointercancel and lostpointercapture alike: an interrupted drag
+  // ends without signalling a resize end. lostpointercapture also fires on the
+  // implicit release after every pointerup/pointercancel, by which point the
+  // drag is already cleared and this is a no-op.
+  const cancelDrag = useCallback(e => {
+    if (dragRef.current?.pointerId !== e.pointerId) {
+      return;
+    }
+    clearDrag();
+  }, [clearDrag]);
 
   // --- Keyboard ---
   const handleKeyDown = useCallback(e => {
@@ -406,16 +439,16 @@ export function ResizeHandle({
   }, [isDisabled, resizable]);
 
   // --- Cleanup on unmount ---
-  // A drag in flight when the handle unmounts never gets its pointerup, so
-  // tear down the window listeners here too — otherwise every pointermove
-  // keeps driving the (still-mounted) region's resize state after the handle
-  // is gone, and the body cursor/user-select overrides stick.
+  // Removing the grab zone implicitly releases its captured pointer and takes
+  // its listeners with it, so an in-flight drag stops driving the region on
+  // its own. The body cursor/user-select overrides are not on the element,
+  // though, so they have to be released here or they stick after the handle
+  // is gone.
   useEffect(() => {
     return () => {
-      if (dragCleanupRef.current) {
-        dragCleanupRef.current();
-        document.body.style.cursor = '';
-        document.body.style.userSelect = '';
+      if (dragRef.current) {
+        dragRef.current = null;
+        clearBodyDragStyles();
       }
     };
   }, []);
@@ -464,6 +497,10 @@ export function ResizeHandle({
       // construction so the two stay aligned in LTR and RTL alike.
       hitBiasDir == null ? isHorizontal ? rtlStyles.centerInline('0px') : styles.hitAreaCenteredY : isHorizontal ? dynamicStyles.hitAreaOffsetX(hitBiasDir) : dynamicStyles.hitAreaOffsetY(hitBiasDir), isDisabled && styles.disabled),
       onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: cancelDrag,
+      onLostPointerCapture: cancelDrag,
       onPointerEnter: () => setIsHovered(true),
       onPointerLeave: () => {
         if (!isDragging) {

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,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyB5C,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;CAKV,CAAC;AAgVF,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;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;;;;;;;;;OAaG;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,+BAuHd;yBAlIe,OAAO"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyB5C,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;CAKV,CAAC;AA+VF,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;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;;;;;;;;;OAaG;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,+BAoHd;yBA/He,OAAO"}

package/dist/Spinner/Spinner.js

@@ -238,6 +238,8 @@ const styles = {
   },
   circle: {
     kDwRjp: "xbh8q5q",
+    kR8GR0: "x1764fhq",
+    k3nNDw: "x1g0ag68",
     kU5bRw: "x1owpc8m",
     kPFa82: "xio8zfp",
     kfJifR: "xgw3ha0",
@@ -371,7 +373,6 @@ export function Spinner({
     diameter
   } = SIZES[size];
   const frameSize = diameter + border * 2;
-  const center = frameSize / 2;
   const circumference = Math.PI * diameter;
   const arcLength = circumference * ARC_FRACTION;
   const hasLabel = label != null;
@@ -418,20 +419,19 @@ export function Spinner({
       ref: syncRotationPhase,
       width: frameSize,
       height: frameSize,
-      viewBox: `0 0 ${frameSize} ${frameSize}`,
       "aria-hidden": "true",
       ...{
-        className: "xlp1x4z x1lliihq x1so62im x1rea2x4 x14qxm4i xnh0sag xa4qsjk x1ka1v4i x1esw782"
+        className: "xlp1x4z x1lliihq x6v0vjy x7yyq19 x1so62im x1rea2x4 x14qxm4i xnh0sag xa4qsjk x1ka1v4i x1esw782"
       },
       children: [/*#__PURE__*/_jsx("circle", {
-        cx: center,
-        cy: center,
+        cx: "50%",
+        cy: "50%",
         r: diameter / 2,
         strokeWidth: border,
         ...stylex.props(styles.circle, styles.track, trackOpacityStyles[shade])
       }), /*#__PURE__*/_jsx("circle", {
-        cx: center,
-        cy: center,
+        cx: "50%",
+        cy: "50%",
         r: diameter / 2,
         strokeWidth: border
         // The size's own dash, for the render with no stylesheet. The rule
@@ -439,9 +439,8 @@ export function Spinner({
         // themed ring keeps this fraction of arc rather than this length.
         ,
         strokeDasharray: `${arcLength} ${circumference - arcLength}`,
-        transform: `rotate(-90 ${center} ${center})`,
         ...{
-          className: "xbh8q5q x1owpc8m xio8zfp xgw3ha0 xtve3lm x1vy8frr"
+          className: "xbh8q5q x1764fhq x1g0ag68 x1owpc8m xio8zfp xgw3ha0 xtve3lm x9tu13d x1vy8frr"
         }
       })]
     })

package/dist/Toast/ToastViewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastViewport.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastViewport.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAa,aAAa,EAAqB,MAAM,SAAS,CAAC;AA8H3E,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IACtE;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAsB,EACtB,UAAc,EACd,KAAK,EACL,UAAiB,EACjB,QAAQ,GACT,EAAE,kBAAkB,+BAkWpB;yBAxWe,aAAa"}
+{"version":3,"file":"ToastViewport.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastViewport.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAa,aAAa,EAAqB,MAAM,SAAS,CAAC;AAwI3E,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IACtE;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAsB,EACtB,UAAc,EACd,KAAK,EACL,UAAiB,EACjB,QAAQ,GACT,EAAE,kBAAkB,+BAkWpB;yBAxWe,aAAa"}

package/dist/Toast/ToastViewport.js

@@ -43,6 +43,7 @@ const styles = {
     kwRFfy: "x1g0rcpp x1n6uwha",
     kfzvcC: "x47corl",
     kpwlN0: "xh3736h",
+    kzqmXN: "x14atkfc",
     kogj98: "x1ghz6dp",
     kWkggS: "xjbqb8w",
     kVQacm: "x1rea2x4",

package/dist/astryx.css

@@ -1175,9 +1175,11 @@
   .x5ve5x3:not(#\#):not(#\#):not(#\#){touch-action:none}
   .x1bblx7b:not(#\#):not(#\#):not(#\#){touch-action:pan-x}
   .xx69xxh:not(#\#):not(#\#):not(#\#){touch-action:pan-y}
+  .x1764fhq:not(#\#):not(#\#):not(#\#){transform-box:fill-box}
   .x1g0ag68:not(#\#):not(#\#):not(#\#){transform-origin:center}
   .x1oyok0e:not(#\#):not(#\#):not(#\#){transform-style:preserve-3d}
   .x1c071of:not(#\#):not(#\#):not(#\#){transform:none}
+  .x9tu13d:not(#\#):not(#\#):not(#\#){transform:rotate(-90deg)}
   .x7p49u4:not(#\#):not(#\#):not(#\#){transform:rotate(0deg)}
   .x19jd1h0:not(#\#):not(#\#):not(#\#){transform:rotate(180deg)}
   .x1iffjtl:not(#\#):not(#\#):not(#\#){transform:rotate(90deg)}
@@ -1532,6 +1534,7 @@
   .xw1wawg:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(44px - 8px)}
   .xg7h5cd:not(#\#):not(#\#):not(#\#):not(#\#){height:fit-content}
   .xhovv34:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_progressbar-mark-height,8px)}
+  .x7yyq19:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_spinner-box-size)}
   .xsyqizj:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--border-width)}
   .x5kfih4:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--resize-handle-hit-area,16px)}
   .xssyfek:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--size-element-lg)}
@@ -1777,6 +1780,7 @@
   .x1y2t9nm:not(#\#):not(#\#):not(#\#):not(#\#){width:calc(44px - 8px)}
   .xeq5yr9:not(#\#):not(#\#):not(#\#):not(#\#){width:fit-content}
   .x63cpjl:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_progressbar-mark-width,2px)}
+  .x6v0vjy:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_spinner-box-size)}
   .xjk4fl7:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--border-width)}
   .xkhob8h:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--resize-handle-hit-area,16px)}
   .x1m747yf:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--size-element-lg)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.5.2-canary.4c2a424",
+  "version": "0.5.2-canary.501e975",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -661,7 +661,7 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.5.2-canary.4c2a424",
+    "@astryxdesign/cli": "0.5.2-canary.501e975",
     "@babel/cli": "^8.0.4",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^8.0.1",

package/src/AppShell/AppShell.test.tsx

@@ -579,6 +579,27 @@ describe('AppShell', () => {
     ).toBeDefined();
   });
 
+  it('renders an opaque section header only in auto mode', () => {
+    const {rerender} = render(
+      <AppShell height="auto" variant="section" topNav={<div>Nav</div>}>
+        <div>Content</div>
+      </AppShell>,
+    );
+
+    expect(
+      getComputedStyle(screen.getByRole('banner')).backgroundColor,
+    ).not.toBe('rgba(0, 0, 0, 0)');
+
+    rerender(
+      <AppShell height="fill" variant="section" topNav={<div>Nav</div>}>
+        <div>Content</div>
+      </AppShell>,
+    );
+    expect(getComputedStyle(screen.getByRole('banner')).backgroundColor).toBe(
+      'rgba(0, 0, 0, 0)',
+    );
+  });
+
   it('does not apply sticky wrapper in fill mode', () => {
     render(
       <AppShell

package/src/AppShell/AppShell.tsx

@@ -269,6 +269,7 @@ const styles = stylex.create({
     display: 'flex',
     flexDirection: 'column',
     position: 'relative',
+    overflow: 'clip',
   },
   variantWash: {
     backgroundColor: colorVars['--color-background-body'],
@@ -554,6 +555,11 @@ export function AppShell({
       : variant === 'surface'
         ? styles.navAreaSurface
         : undefined;
+  // Section normally inherits the shell's surface background. Its auto-height
+  // header needs to paint that surface itself while content scrolls beneath it.
+  const headerAreaStyle =
+    navAreaStyle ??
+    (isAuto && variant === 'section' ? styles.navAreaSurface : undefined);
   const contentAreaStyle =
     variant === 'wash'
       ? styles.contentBgWash
@@ -684,7 +690,7 @@ export function AppShell({
       role="banner"
       {...mergeProps(
         themeProps('app-shell-header', {variant}),
-        stylex.props(navAreaStyle, isAuto && styles.headerSticky),
+        stylex.props(headerAreaStyle, isAuto && styles.headerSticky),
       )}>
       {headerInner}
     </div>
@@ -773,7 +779,7 @@ export function AppShell({
         role={headerContent == null ? 'banner' : undefined}
         {...mergeProps(
           themeProps('app-shell-header', {variant}),
-          stylex.props(navAreaStyle, isAuto && styles.headerSticky),
+          stylex.props(headerAreaStyle, isAuto && styles.headerSticky),
         )}>
         <LayoutHeader padding={0} hasDivider={navHasDividers}>
           <div

package/src/Banner/Banner.doc.mjs

@@ -17,7 +17,7 @@ export const docs = {
       {guidance: true, description: 'Keep titles short and scannable: "Payment failed" not "There was a problem processing your most recent payment."'},
       {guidance: false, description: 'Use Banner for short-lived messages that disappear on their own; use Toast instead.'},
       {guidance: false, description: 'Stack multiple banners with the same status; combine related messages into one banner.'},
-      {guidance: true, description: 'Set collapsible={false} when the user needs the content to act on the message, like the list of fields that failed validation. Keep the default toggle when the detail is long enough to bury the banner\u2019s own message.'},
+      {guidance: true, description: 'Set collapsible={false} when the user needs the content to act on the message, like the list of fields that failed validation. Keep the default toggle when the detail is long enough to bury the banner\'s own message.'},
       {guidance: true, description: 'Error and warning banners render as role="alert"; info and success render as role="status". Mount an alert banner in response to an event rather than on first paint, so assistive tech has a change to report.'},
       {guidance: false, description: 'Rely on the status color or icon alone to carry meaning; say which status it is in the title text, because the icon is decorative to a screen reader.'},
     ],
@@ -129,6 +129,7 @@ export const docs = {
     targets: [
       {className: 'astryx-banner', visualProps: ['container', 'status']},
       {className: 'astryx-banner-icon', visualProps: ['status']},
+      {className: 'astryx-banner-description'},
       {className: 'astryx-banner-content', visualProps: ['container', 'status']},
     ],
     vars: [
@@ -199,6 +200,9 @@ export const docsZh = {
           'status',
         ],
       },
+      {
+        className: 'astryx-banner-description',
+      },
       {
         className: 'astryx-banner-content',
         visualProps: [

package/src/Banner/Banner.tsx

@@ -15,6 +15,11 @@
  * - Status icon (themeProps 'banner-icon'): the target rides on the default
  *   <Icon> itself — the element that paints — so 'status:X' overrides reach
  *   the glyph (#4166); for a custom `icon` node it stays on the layout wrapper
+ * - Description (themeProps 'banner-description'): the supporting line owns its
+ *   own colour and type, and the space between it and the title
+ * - The end area carries no target: it is a layout row (flex, wrap, edge
+ *   compensation) rather than a painted surface, and a theme that wants the
+ *   header to grow around its buttons sets `padding-block` on 'banner'
  * - No left border accent — color is expressed through the full header background
  * - Each visual area owns its own border-radius (no overflow:clip on the container)
  * - Children are collapsible by default: a toggle appears in the header end
@@ -631,7 +636,13 @@ export function Banner({
           )}>
           <div {...stylex.props(styles.title)}>{title}</div>
           {isRenderable(description) && (
-            <div {...stylex.props(styles.description)}>{description}</div>
+            <div
+              {...mergeProps(
+                themeProps('banner-description'),
+                stylex.props(styles.description),
+              )}>
+              {description}
+            </div>
           )}
         </div>
         {showEndArea && (

package/src/BottomSheet/BottomSheet.spec.md

@@ -1,5 +1,5 @@
 ---
-schema_version: 1
+schema_version: 3
 template_version: 3
 kind: component
 id: component:BottomSheet
@@ -16,6 +16,7 @@ verified_by:
     packages/core/src/BottomSheet/BottomSheetPanel.test.tsx,
     scripts/check-knowledge.mjs,
   ]
+modules: []
 families: [family:overlay-dismissal]
 design_specs: []
 architecture: