@astryxdesign/core 0.7.2-canary.6fddf4f → 0.7.2-canary.72db6f9

package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CAqEtC;yBA9Ee,mBAAmB"}
+{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CAuEtC;yBAhFe,mBAAmB"}

package/dist/AvatarGroup/AvatarGroupOverflow.js

@@ -142,7 +142,10 @@ export function AvatarGroupOverflow({
     });
   }
   return /*#__PURE__*/_jsx("span", {
-    ref: ref,
+    ref: ref
+    // Before the caller's props so a caller-supplied role still wins.
+    ,
+    role: "img",
     ...rest,
     "aria-label": label,
     ...mergeProps(themeProps('avatar-group-overflow', {

package/dist/Chat/ChatLayoutScrollButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAsED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,qBAuC7B;yBAhDe,sBAAsB"}
+{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAuED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,qBAwC7B;yBAjDe,sBAAsB"}

package/dist/Chat/ChatLayoutScrollButton.js

@@ -89,6 +89,7 @@ export function ChatLayoutScrollButton({
       ...mergeProps(stylex.props(styles.wrapper, xstyle), className, style),
       ...rest,
       children: /*#__PURE__*/_jsx("div", {
+        inert: !isVisible,
         ...mergeProps(themeProps('chat-layout-scroll-button'), {
           0: {
             className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x1ueg155 xrgg2z9 xlr8y92 x2rcmwa x12w9bfk xg01cxk x47corl xlshs6z x1jys5uj"

package/dist/CheckboxList/CheckboxList.d.ts

@@ -115,7 +115,7 @@ export interface CheckboxListProps extends Omit<FieldInputBaseProps<HTMLDivEleme
  * </CheckboxList>
  * ```
  */
-export declare function CheckboxList({ label, isLabelHidden, description, status, value, onChange, changeAction, density, hasDividers, isDisabled, disabledMessage, isReadOnly, children, ref, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, 'aria-describedby': ariaDescribedByProp, ...restProps }: CheckboxListProps): import("react").JSX.Element;
+export declare function CheckboxList({ label, isLabelHidden, description, status, value, onChange, changeAction, density, hasDividers, isDisabled, disabledMessage, isReadOnly, children, ref, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, ...restProps }: CheckboxListProps): import("react").JSX.Element;
 export declare namespace CheckboxList {
     var displayName: string;
 }

package/dist/CheckboxList/CheckboxList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxList.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEhD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAYrD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,OAAoB,EACpB,WAAmB,EACnB,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,SAAS,EACb,EAAE,iBAAiB,+BA0InB;yBAlKe,YAAY"}
+{"version":3,"file":"CheckboxList.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEhD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAarD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,OAAoB,EACpB,WAAmB,EACnB,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EAAE,kBAAkB,EACrC,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,SAAS,EACb,EAAE,iBAAiB,+BA2InB;yBApKe,YAAY"}

package/dist/CheckboxList/CheckboxList.js

@@ -24,6 +24,7 @@ import { useTooltip } from "../Tooltip/index.js";
 import * as stylex from '@stylexjs/stylex';
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
+import { joinAriaIDs } from "../utils/inputAria.js";
 import { CheckboxListContext } from "./CheckboxListContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const EMPTY_ARRAY = [];
@@ -67,6 +68,7 @@ export function CheckboxList({
   controlXstyle,
   controlClassName,
   controlStyle,
+  'aria-labelledby': ariaLabelledByProp,
   'aria-describedby': ariaDescribedByProp,
   ...restProps
 }) {
@@ -152,8 +154,10 @@ export function CheckboxList({
         // internally by isEnabled, so attaching unconditionally is safe.
         ref: useMergedRefs(ref, disabledMessageTooltip.ref),
         ...mergeProps(stylex.props(controlXstyle), controlClassName, controlStyle),
-        role: "group",
-        "aria-labelledby": labelID,
+        role: "group"
+        // A caller aria-labelledby names the group together with its label.
+        ,
+        "aria-labelledby": joinAriaIDs(labelID, ariaLabelledByProp),
         "aria-describedby": [ariaDescribedByProp, description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined,
         children: /*#__PURE__*/_jsx(List, {
           density: density,

package/dist/FormLayout/FormLayout.d.ts

@@ -28,10 +28,11 @@ export interface FormLayoutProps extends BaseProps<HTMLDivElement> {
      * Direction of field arrangement.
      *
      * - `'vertical'` — Fields stack top-to-bottom (default). Most common.
-     * - `'horizontal'` — Fields arrange left-to-right in equal-width columns
-     *   using CSS Grid. Each child occupies one equal column.
-     * - `'horizontal-labels'` — CSS Grid with labels to the left of inputs.
-     *   Collapses to vertical when the container is narrow (≤480px).
+     * - `'horizontal'` — Fields occupy one `1fr` CSS Grid track per child in
+     *   logical inline order.
+     * - `'horizontal-labels'` — CSS Grid with labels beside their inputs on the
+     *   inline-start side. Collapses to vertical when the viewport is narrow
+     *   (≤480px).
      *
      * @default 'vertical'
      */

package/dist/FormLayout/FormLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../src/FormLayout/FormLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AA2C7B,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAEhC;;;;;;;;;;;;;;;;;OAiBG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC;CACtC;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAsB,EACtB,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BA0BjB;yBAnCe,UAAU"}
+{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../src/FormLayout/FormLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AA2C7B,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAEhC;;;;;;;;;;;;;;;;;OAiBG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC;CACtC;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAsB,EACtB,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BA0BjB;yBAnCe,UAAU"}

package/dist/FormLayout/FormLayout.js

@@ -105,10 +105,10 @@ export function FormLayout({
     value: contextValue,
     children: /*#__PURE__*/_jsx("div", {
       ref: ref,
+      ...props,
       ...mergeProps(themeProps('form-layout', {
         direction
       }), stylex.props(styles.base, direction === 'horizontal' && styles.horizontal, direction === 'horizontal-labels' && styles.horizontalLabels, xstyle), className, style),
-      ...props,
       children: children
     })
   });

package/dist/FormLayout/FormLayoutContext.d.ts

@@ -2,9 +2,9 @@
  * Direction of form field arrangement.
  *
  * - `'vertical'` — Fields stack top-to-bottom (default). Most common.
- * - `'horizontal'` — Fields arrange left-to-right, wrapping when needed.
- * - `'horizontal-labels'` — Fields stack vertically but labels sit to the left
- *   of their inputs (settings/admin panel pattern).
+ * - `'horizontal'` — Fields occupy one `1fr` grid track per child in logical inline order.
+ * - `'horizontal-labels'` — Fields stack vertically while labels sit beside
+ *   their inputs on the inline-start side (settings/admin panel pattern).
  */
 export type FormLayoutDirection = 'vertical' | 'horizontal' | 'horizontal-labels';
 /**

package/dist/FormLayout/FormLayoutContext.js

@@ -19,9 +19,9 @@ import { createLayerScopedContext as createContext } from "../Layer/layerScopedC
  * Direction of form field arrangement.
  *
  * - `'vertical'` — Fields stack top-to-bottom (default). Most common.
- * - `'horizontal'` — Fields arrange left-to-right, wrapping when needed.
- * - `'horizontal-labels'` — Fields stack vertically but labels sit to the left
- *   of their inputs (settings/admin panel pattern).
+ * - `'horizontal'` — Fields occupy one `1fr` grid track per child in logical inline order.
+ * - `'horizontal-labels'` — Fields stack vertically while labels sit beside
+ *   their inputs on the inline-start side (settings/admin panel pattern).
  */
 
 /**

package/dist/Grid/Grid.js

@@ -368,6 +368,7 @@ export function Grid({
   const columnsVariant = typeof columns === 'number' ? columns : typeof columns === 'object' ? undefined : undefined;
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
+    ...props,
     ...mergeProps(themeProps('grid', {
       columns: columnsVariant,
       gap,
@@ -377,7 +378,6 @@ export function Grid({
       ...style,
       ...inlineStyle
     }),
-    ...props,
     children: children
   });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PowerSearchValueEditor.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearchValueEditor.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EAIZ,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AAqBxD,MAAM,WAAW,2BAA2B;IAC1C,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,UAAU,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA0pBD,wBAAgB,sBAAsB,CAAC,EACrC,aAAa,EACb,WAAW,EACX,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,UAAU,GACX,EAAE,2BAA2B,4BA+H7B"}
+{"version":3,"file":"PowerSearchValueEditor.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearchValueEditor.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EAIZ,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AAqBxD,MAAM,WAAW,2BAA2B;IAC1C,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,UAAU,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA4rBD,wBAAgB,sBAAsB,CAAC,EACrC,aAAa,EACb,WAAW,EACX,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,UAAU,GACX,EAAE,2BAA2B,4BA0I7B"}

package/dist/PowerSearch/PowerSearchValueEditor.js

@@ -59,7 +59,8 @@ function StringEditor({
   filterValue,
   onChange,
   onEnter: _onEnter,
-  maxMenuItems
+  maxMenuItems,
+  isDisabled
 }) {
   const t = useTranslator();
   const currentValue = filterValue?.type === 'string' ? filterValue.value : '';
@@ -74,6 +75,7 @@ function StringEditor({
     return /*#__PURE__*/_jsx(Typeahead, {
       label: t('@astryx.powersearch.valueEditor.value'),
       isLabelHidden: true,
+      isDisabled: isDisabled,
       searchSource: operatorValue.searchSource,
       value: selectedItem,
       onChange: item => {
@@ -97,6 +99,7 @@ function StringEditor({
   return /*#__PURE__*/_jsx(TextInput, {
     label: t('@astryx.powersearch.valueEditor.value'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     value: currentValue,
     placeholder: t('@astryx.powersearch.valueEditor.enterValuePlaceholder'),
     onChange: value => {
@@ -111,7 +114,8 @@ function StringListEditor({
   operatorValue,
   filterValue,
   onChange,
-  maxMenuItems
+  maxMenuItems,
+  isDisabled
 }) {
   const t = useTranslator();
   const currentValue = useMemo(() => {
@@ -140,6 +144,7 @@ function StringListEditor({
   return /*#__PURE__*/_jsx(Tokenizer, {
     label: t('@astryx.powersearch.valueEditor.values'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     searchSource: source,
     value: currentValue,
     onChange: items => {
@@ -212,7 +217,8 @@ function IntegerEditor({
   operatorValue,
   filterValue,
   onChange,
-  onEnter
+  onEnter,
+  isDisabled
 }) {
   const t = useTranslator();
   const currentValue = filterValue?.type === 'integer' ? filterValue.value : undefined;
@@ -227,6 +233,7 @@ function IntegerEditor({
   return /*#__PURE__*/_jsx(NumberInput, {
     label: t('@astryx.powersearch.valueEditor.value'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     value: currentValue ?? null,
     onChange: handlers.handleChange,
     onFocus: handlers.handleFocus,
@@ -244,7 +251,8 @@ function FloatEditor({
   operatorValue,
   filterValue,
   onChange,
-  onEnter
+  onEnter,
+  isDisabled
 }) {
   const t = useTranslator();
   const currentValue = filterValue?.type === 'float' ? filterValue.value : undefined;
@@ -259,6 +267,7 @@ function FloatEditor({
   return /*#__PURE__*/_jsx(NumberInput, {
     label: t('@astryx.powersearch.valueEditor.value'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     value: currentValue ?? null,
     onChange: handlers.handleChange,
     onFocus: handlers.handleFocus,
@@ -274,13 +283,15 @@ function FloatEditor({
 function TimeEditor({
   operatorValue,
   filterValue,
-  onChange
+  onChange,
+  isDisabled
 }) {
   const t = useTranslator();
   const currentValue = filterValue?.type === 'time' ? filterValue.value : undefined;
   return /*#__PURE__*/_jsx(TimeInput, {
     label: t('@astryx.powersearch.valueEditor.time'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     value: currentValue,
     onChange: value => {
       if (value != null) {
@@ -296,7 +307,8 @@ function TimeEditor({
 }
 function DateAbsoluteEditor({
   filterValue,
-  onChange
+  onChange,
+  isDisabled
 }) {
   const t = useTranslator();
   // Convert unixSeconds to ISO date string for the date input
@@ -310,6 +322,7 @@ function DateAbsoluteEditor({
   return /*#__PURE__*/_jsx(DateInput, {
     label: t('@astryx.powersearch.valueEditor.date'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     value: currentValue,
     onChange: value => {
       if (value != null) {
@@ -325,7 +338,8 @@ function DateAbsoluteEditor({
 function DateRelativeEditor({
   operatorValue,
   filterValue,
-  onChange
+  onChange,
+  isDisabled
 }) {
   const t = useTranslator();
   const currentValue = filterValue?.type === 'date_relative' ? filterValue.value : undefined;
@@ -366,6 +380,7 @@ function DateRelativeEditor({
   return /*#__PURE__*/_jsx(Selector, {
     label: t('@astryx.powersearch.valueEditor.relativeDate'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     options: options,
     value: currentValue,
     onChange: value => {
@@ -378,7 +393,8 @@ function DateRelativeEditor({
 }
 function DateRangeEditor({
   filterValue,
-  onChange
+  onChange,
+  isDisabled
 }) {
   const t = useTranslator();
   const currentValue = useMemo(() => {
@@ -425,6 +441,7 @@ function DateRangeEditor({
     children: /*#__PURE__*/_jsx(DateRangeInput, {
       label: t('@astryx.powersearch.valueEditor.dateRange'),
       isLabelHidden: true,
+      isDisabled: isDisabled,
       value: currentValue,
       onChange: handleChange,
       hasClear: false
@@ -434,7 +451,8 @@ function DateRangeEditor({
 function EnumEditor({
   operatorValue,
   filterValue,
-  onChange
+  onChange,
+  isDisabled
 }) {
   const t = useTranslator();
   const currentValue = filterValue?.type === 'enum' ? filterValue.value : undefined;
@@ -445,6 +463,7 @@ function EnumEditor({
   return /*#__PURE__*/_jsx(Selector, {
     label: t('@astryx.powersearch.valueEditor.value'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     options: options,
     value: currentValue,
     onChange: value => {
@@ -458,7 +477,8 @@ function EnumEditor({
 function EnumListEditor({
   operatorValue,
   filterValue,
-  onChange
+  onChange,
+  isDisabled
 }) {
   const t = useTranslator();
   const items = useMemo(() => enumItemsToSearchableItems(operatorValue.values), [operatorValue.values]);
@@ -478,6 +498,7 @@ function EnumListEditor({
   return /*#__PURE__*/_jsx(Tokenizer, {
     label: t('@astryx.powersearch.valueEditor.values'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     searchSource: source,
     value: currentValue,
     onChange: selectedItems => {
@@ -500,7 +521,8 @@ function EntityListEditor({
   operatorValue,
   filterValue,
   onChange,
-  maxMenuItems
+  maxMenuItems,
+  isDisabled
 }) {
   const t = useTranslator();
   const source = useMemo(() => {
@@ -529,6 +551,7 @@ function EntityListEditor({
   return /*#__PURE__*/_jsx(Tokenizer, {
     label: t('@astryx.powersearch.valueEditor.entities'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     searchSource: source,
     value: currentValue,
     onChange: items => {
@@ -594,6 +617,7 @@ export function PowerSearchValueEditor({
       return null;
     case 'string':
       return /*#__PURE__*/_jsx(StringEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange,
@@ -602,6 +626,7 @@ export function PowerSearchValueEditor({
       });
     case 'string_list':
       return /*#__PURE__*/_jsx(StringListEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange,
@@ -609,6 +634,7 @@ export function PowerSearchValueEditor({
       });
     case 'integer':
       return /*#__PURE__*/_jsx(IntegerEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange,
@@ -616,6 +642,7 @@ export function PowerSearchValueEditor({
       });
     case 'float':
       return /*#__PURE__*/_jsx(FloatEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange,
@@ -623,42 +650,49 @@ export function PowerSearchValueEditor({
       });
     case 'time':
       return /*#__PURE__*/_jsx(TimeEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange
       });
     case 'date_absolute':
       return /*#__PURE__*/_jsx(DateAbsoluteEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange
       });
     case 'date_relative':
       return /*#__PURE__*/_jsx(DateRelativeEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange
       });
     case 'date_range':
       return /*#__PURE__*/_jsx(DateRangeEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange
       });
     case 'enum':
       return /*#__PURE__*/_jsx(EnumEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange
       });
     case 'enum_list':
       return /*#__PURE__*/_jsx(EnumListEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange
       });
     case 'entity_list':
       return /*#__PURE__*/_jsx(EntityListEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange,

package/dist/SideNav/SideNavItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AA4ShF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,sCAkalB;yBApbe,WAAW"}
+{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AA4ShF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,sCAqalB;yBAvbe,WAAW"}

package/dist/SideNav/SideNavItem.js

@@ -405,7 +405,9 @@ export function SideNavItem({
         size,
         selected: isSelected ? 'selected' : null,
         disabled: isDisabled ? 'disabled' : null
-      }), focusOutlineProps.focusVisible(navItemStyles.item, interactionOverlayStyles.backgroundColor, navItemStyles[size], styles.itemCollapsed, size === 'sm' && styles.itemCollapsedSm, size === 'lg' && styles.itemCollapsedLg, isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled)),
+      }), focusOutlineProps.focusVisible(navItemStyles.item, interactionOverlayStyles.backgroundColor, navItemStyles[size], styles.itemCollapsed, size === 'sm' && styles.itemCollapsedSm, size === 'lg' && styles.itemCollapsedLg, isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled),
+      // Spread after `rest`, so keep the caller's class beside these.
+      rest.className),
       ...pressable
     };
     const collapsedAccessibleLabel = rest['aria-label'] != null && rest['aria-label'].trim() !== '' ? rest['aria-label'] : label;
@@ -512,8 +514,10 @@ export function SideNavItem({
 
   // The indent is a runtime value, so it reaches the element as an inline
   // style. These props are spread after `rest`, so fold the caller's `style`
-  // back in (caller wins) rather than letting the indent replace it.
+  // back in (caller wins) rather than letting the indent replace it, and the
+  // caller's `className` beside the row's own classes.
   const callerStyle = {
+    className: rest.className,
     style: rest.style
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.2-canary.6fddf4f",
+  "version": "0.7.2-canary.72db6f9",
   "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.6fddf4f",
-    "@astryxdesign/cli": "0.7.2-canary.6fddf4f",
+    "@astryxdesign/a11y-spec": "0.7.2-canary.72db6f9",
+    "@astryxdesign/cli": "0.7.2-canary.72db6f9",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/AvatarGroup/AvatarGroupOverflow.test.tsx

@@ -21,6 +21,29 @@ describe('AvatarGroupOverflow', () => {
     expect(overflow).toHaveTextContent('+5');
   });
 
+  it('exposes the static overflow as a named image', () => {
+    render(
+      <AvatarGroup>
+        <Avatar name="Alice" />
+        <AvatarGroupOverflow count={5} />
+      </AvatarGroup>,
+    );
+
+    const overflow = screen.getByRole('img', {name: '5 more'});
+    expect(overflow).toHaveAttribute('role', 'img');
+  });
+
+  it('keeps a caller-supplied role on the static overflow', () => {
+    render(
+      <AvatarGroup>
+        <Avatar name="Alice" />
+        <AvatarGroupOverflow count={5} role="note" />
+      </AvatarGroup>,
+    );
+
+    expect(screen.getByLabelText('5 more')).toHaveAttribute('role', 'note');
+  });
+
   it('reflects the group size on the overflow chip', () => {
     render(
       <AvatarGroup size="lg">
@@ -66,7 +89,7 @@ describe('AvatarGroupOverflow', () => {
       </AvatarGroup>,
     );
 
-    const overflow = screen.getByLabelText('3 more');
+    const overflow = screen.getByRole('button', {name: '3 more'});
     expect(overflow.tagName).toBe('BUTTON');
   });
 

package/src/AvatarGroup/AvatarGroupOverflow.tsx

@@ -208,6 +208,8 @@ export function AvatarGroupOverflow({
   return (
     <span
       ref={ref}
+      // Before the caller's props so a caller-supplied role still wins.
+      role="img"
       {...rest}
       aria-label={label}
       {...mergeProps(

package/src/Chat/ChatLayoutScrollButton.test.tsx

@@ -70,6 +70,19 @@ describe('ChatLayoutScrollButton', () => {
     ).toHaveFocus();
   });
 
+  it('makes the pill inert whenever the visible state turns off', () => {
+    const {container, rerender} = render(
+      <ChatLayoutScrollButton isVisible onClick={() => {}} />,
+    );
+    const pill = container.querySelector('.astryx-chat-layout-scroll-button');
+
+    expect(pill).not.toHaveAttribute('inert');
+
+    rerender(<ChatLayoutScrollButton isVisible={false} onClick={() => {}} />);
+
+    expect(pill).toHaveAttribute('inert');
+  });
+
   it('is not keyboard reachable while hidden', async () => {
     const user = userEvent.setup();
     render(

package/src/Chat/ChatLayoutScrollButton.tsx

@@ -86,8 +86,9 @@ const styles = stylex.create({
     opacity: 0,
     pointerEvents: 'none',
     // The hidden pill paints nothing, so focus landing on it would have no
-    // visible indicator (WCAG 2.2 SC 2.4.7). `opacity` and `pointer-events`
-    // leave the button in sequential focus navigation; `visibility` removes it.
+    // visible indicator (WCAG 2.2 SC 2.4.7). `visibility` removes it from
+    // sequential navigation after the fade; `inert` immediately prevents new
+    // focus and makes an already-focused descendant relinquish focus.
     visibility: 'hidden',
     maxWidth: sizeVars['--size-element-md'],
   },
@@ -151,6 +152,7 @@ export function ChatLayoutScrollButton({
       {...mergeProps(stylex.props(styles.wrapper, xstyle), className, style)}
       {...rest}>
       <div
+        inert={!isVisible}
         {...mergeProps(
           themeProps('chat-layout-scroll-button'),
           stylex.props(