@astryxdesign/core 0.7.6-canary.2a905bb → 0.7.6-canary.2fa4cef

package/dist/ToggleButton/ToggleButton.js

@@ -26,7 +26,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, fontWeightVars } from "../theme/tokens.stylex.js";
 import { Button } from "../Button/index.js";
 import { useToggleButtonGroup } from "./ToggleButtonGroup.js";
-import { themeProps } from "../utils/themeProps.js";
+import { themeDataAttributes, themeProps } from "../utils/themeProps.js";
 import { mergeProps } from "../utils/mergeProps.js";
 
 // =============================================================================
@@ -193,7 +193,6 @@ export function ToggleButton({
     isLoading: isLoading,
     isInterruptible: true,
     isIconOnly: isIconOnly,
-    "aria-pressed": isPressed,
     icon: resolvedIcon,
     tooltip: tooltip,
     ...mergeProps(themeProps('toggle-button', {
@@ -205,6 +204,13 @@ export function ToggleButton({
     onClick: handleClick,
     clickAction: clickAction,
     ...props,
+    // The pressed state this component owns wins over a caller's
+    // same-named attributes (public-component-api INV5).
+    "aria-pressed": isPressed,
+    ...themeDataAttributes({
+      isPressed: isPressed ? 'true' : 'false',
+      elevation
+    }),
     children: labelContent
   });
 }

package/dist/gestures/haptics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"haptics.d.ts","sourceRoot":"","sources":["../../src/gestures/haptics.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,0BAA0B,CAAC;AAElC,8EAA8E;AAC9E,eAAO,MAAM,uBAAuB,8BAA8B,CAAC;AAEnE,4CAA4C;AAC5C,wBAAgB,UAAU,IAAI,OAAO,CAIpC;AAED,6EAA6E;AAC7E,wBAAgB,qBAAqB,CAAC,GAAG,CAAC,EAAE,QAAQ,GAAG,OAAO,CAQ7D;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,kBAAkB,GAAG,OAAO,CAK5D;AA0BD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,IAAI,CAuFnE"}
+{"version":3,"file":"haptics.d.ts","sourceRoot":"","sources":["../../src/gestures/haptics.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,0BAA0B,CAAC;AAGlC,8EAA8E;AAC9E,eAAO,MAAM,uBAAuB,8BAA8B,CAAC;AAEnE,4CAA4C;AAC5C,wBAAgB,UAAU,IAAI,OAAO,CAIpC;AAED,6EAA6E;AAC7E,wBAAgB,qBAAqB,CAAC,GAAG,CAAC,EAAE,QAAQ,GAAG,OAAO,CAQ7D;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,kBAAkB,GAAG,OAAO,CAK5D;AAkBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,IAAI,CAuFnE"}

package/dist/gestures/haptics.js

@@ -35,6 +35,7 @@
  */
 
 import { HAPTIC_VIBRATION_PATTERNS } from "../motion/uikit/gestures.js";
+import { isDisabledControl } from "../utils/pressDisabled.js";
 
 /** Marks the hidden switch, so click handlers can recognize and ignore it. */
 export const HAPTIC_SWITCH_ATTRIBUTE = 'data-astryx-haptic-switch';
@@ -69,11 +70,6 @@ export function playHaptic(kind) {
 const VISUALLY_HIDDEN = 'position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;' + 'overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;' + 'opacity:0;pointer-events:none;';
 let nextLabelId = 0;
 
-/** A native disabled control, or one marked `aria-disabled`. */
-function isDisabledControl(control) {
-  return control.matches(':disabled') || control.getAttribute('aria-disabled') === 'true';
-}
-
 /** Whether `input` is a switch checkbox, which plays the tap haptic itself. */
 function isSwitch(input) {
   return input.type === 'checkbox' && input.hasAttribute('switch');

package/dist/hooks/useClickableContainer.d.ts

@@ -1,7 +1,8 @@
 /**
  * @file useClickableContainer.ts
  * @input Container ref, interactive element ref, click/href handlers
- * @output onClick and onMouseUp handlers for the container; INTERACTIVE_SELECTORS list
+ * @output onClick and onMouseUp handlers for the container; INTERACTIVE_SELECTORS list;
+ *   hasInteractiveAncestor and the shared innermostInteractive walk
  * @position Core hook for clickable containers that safely handle nested interactive elements
  *
  * Solves the "nested interactive elements" problem: when a card is clickable
@@ -16,6 +17,12 @@
  * - /packages/core/src/hooks/index.ts (export)
  */
 import { type RefObject, type MouseEvent } from 'react';
+/**
+ * The attribute this hook sets on the container it makes clickable. A click
+ * inside a nested marked container belongs to that container (see
+ * INTERACTIVE_SELECTORS).
+ */
+export declare const PRESSABLE_CONTAINER_ATTRIBUTE = "data-pressable-container";
 /**
  * Canonical list of interactive element selectors — native controls plus
  * role-based interactive elements. Clicks on these (or their descendants)
@@ -29,9 +36,22 @@ import { type RefObject, type MouseEvent } from 'react';
  */
 export declare const INTERACTIVE_SELECTORS: string;
 /**
- * Check whether an element has an interactive ancestor between it and the root.
- * If the click target is inside a nested button/link/etc., we should NOT
- * handle it at the container level.
+ * Whether this element is interactive by INTERACTIVE_SELECTORS: a control,
+ * link, editor, or nested clickable container, and not marked read-only.
+ */
+export declare function matchesInteractiveSelectors(element: Element): boolean;
+/**
+ * The innermost element, from `el` up to (not including) `rootEl` or the
+ * document body, that `isInteractive` accepts: by default the
+ * INTERACTIVE_SELECTORS match. The one walk every "does this event belong
+ * to a control" check shares; a hover layer's tap passes its own test
+ * (useTouchTrigger's `tapLandsOnDisabledControl`).
+ */
+export declare function innermostInteractive(el: Element, rootEl: Element | null, isInteractive?: (element: Element) => boolean): Element | null;
+/**
+ * Check whether an element has an interactive ancestor between it and the
+ * root (the element itself included). If the click target is inside a nested
+ * button/link/etc., we should NOT handle it at the container level.
  *
  * Exported for containers that cannot use the hook itself — a `<tr>` whose
  * props are assembled inside a Table plugin's `transformBodyRow`, for

package/dist/hooks/useClickableContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useClickableContainer.d.ts","sourceRoot":"","sources":["../../src/hooks/useClickableContainer.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,UAAU,EAAC,MAAM,OAAO,CAAC;AAG9E;;;;;;;;;;GAUG;AACH,eAAO,MAAM,qBAAqB,QAmBvB,CAAC;AAIZ;;;;;;;;;;GAUG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAG,OAAO,CAY5E;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO,CASvD;AAED,MAAM,WAAW,4BAA4B;IAC3C,yCAAyC;IACzC,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5C,mEAAmE;IACnE,cAAc,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACrD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,YAAY,EACZ,cAAc,EACd,OAAO,EAAE,WAAW,EACpB,IAAI,EACJ,MAAM,EACN,QAAgB,GACjB,EAAE,4BAA4B,GAAG,wBAAwB,CAmHzD"}
+{"version":3,"file":"useClickableContainer.d.ts","sourceRoot":"","sources":["../../src/hooks/useClickableContainer.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,UAAU,EAAC,MAAM,OAAO,CAAC;AAG9E;;;;GAIG;AACH,eAAO,MAAM,6BAA6B,6BAA6B,CAAC;AAExE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,qBAAqB,QAmBvB,CAAC;AAIZ;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAKrE;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAClC,EAAE,EAAE,OAAO,EACX,MAAM,EAAE,OAAO,GAAG,IAAI,EACtB,aAAa,GAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAqC,GACzE,OAAO,GAAG,IAAI,CAShB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAG,OAAO,CAE5E;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO,CASvD;AAED,MAAM,WAAW,4BAA4B;IAC3C,yCAAyC;IACzC,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5C,mEAAmE;IACnE,cAAc,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACrD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,YAAY,EACZ,cAAc,EACd,OAAO,EAAE,WAAW,EACpB,IAAI,EACJ,MAAM,EACN,QAAgB,GACjB,EAAE,4BAA4B,GAAG,wBAAwB,CAmHzD"}

package/dist/hooks/useClickableContainer.js

@@ -5,7 +5,8 @@
 /**
  * @file useClickableContainer.ts
  * @input Container ref, interactive element ref, click/href handlers
- * @output onClick and onMouseUp handlers for the container; INTERACTIVE_SELECTORS list
+ * @output onClick and onMouseUp handlers for the container; INTERACTIVE_SELECTORS list;
+ *   hasInteractiveAncestor and the shared innermostInteractive walk
  * @position Core hook for clickable containers that safely handle nested interactive elements
  *
  * Solves the "nested interactive elements" problem: when a card is clickable
@@ -22,6 +23,13 @@
 import { useCallback, useEffect } from 'react';
 import { isSafeUrl } from "../utils/safeUrl.js";
 
+/**
+ * The attribute this hook sets on the container it makes clickable. A click
+ * inside a nested marked container belongs to that container (see
+ * INTERACTIVE_SELECTORS).
+ */
+export const PRESSABLE_CONTAINER_ATTRIBUTE = 'data-pressable-container';
+
 /**
  * Canonical list of interactive element selectors — native controls plus
  * role-based interactive elements. Clicks on these (or their descendants)
@@ -33,13 +41,39 @@ import { isSafeUrl } from "../utils/safeUrl.js";
  * consumers that need focusable elements must additionally exclude
  * unfocusable/disabled targets (e.g. `[tabindex="-1"]`, `:disabled`).
  */
-export const INTERACTIVE_SELECTORS = ['button', 'a', 'input', 'select', 'textarea', '[role="button"]', '[role="link"]', '[role="checkbox"]', '[role="radio"]', '[role="switch"]', '[role="tab"]', '[role="menuitem"]', '[role="option"]', '[role="combobox"]', '[role="listbox"]', '[role="slider"]', '[role="spinbutton"]', '[data-pressable-container]'].join(',');
+export const INTERACTIVE_SELECTORS = ['button', 'a', 'input', 'select', 'textarea', '[role="button"]', '[role="link"]', '[role="checkbox"]', '[role="radio"]', '[role="switch"]', '[role="tab"]', '[role="menuitem"]', '[role="option"]', '[role="combobox"]', '[role="listbox"]', '[role="slider"]', '[role="spinbutton"]', `[${PRESSABLE_CONTAINER_ATTRIBUTE}]`].join(',');
 const NON_INTERACTIVE_SELECTORS = '[aria-readonly="true"]';
 
 /**
- * Check whether an element has an interactive ancestor between it and the root.
- * If the click target is inside a nested button/link/etc., we should NOT
- * handle it at the container level.
+ * Whether this element is interactive by INTERACTIVE_SELECTORS: a control,
+ * link, editor, or nested clickable container, and not marked read-only.
+ */
+export function matchesInteractiveSelectors(element) {
+  return element.matches(INTERACTIVE_SELECTORS) && !element.matches(NON_INTERACTIVE_SELECTORS);
+}
+
+/**
+ * The innermost element, from `el` up to (not including) `rootEl` or the
+ * document body, that `isInteractive` accepts: by default the
+ * INTERACTIVE_SELECTORS match. The one walk every "does this event belong
+ * to a control" check shares; a hover layer's tap passes its own test
+ * (useTouchTrigger's `tapLandsOnDisabledControl`).
+ */
+export function innermostInteractive(el, rootEl, isInteractive = matchesInteractiveSelectors) {
+  let current = el;
+  while (current != null && current !== rootEl && current !== document.body) {
+    if (isInteractive(current)) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+
+/**
+ * Check whether an element has an interactive ancestor between it and the
+ * root (the element itself included). If the click target is inside a nested
+ * button/link/etc., we should NOT handle it at the container level.
  *
  * Exported for containers that cannot use the hook itself — a `<tr>` whose
  * props are assembled inside a Table plugin's `transformBodyRow`, for
@@ -48,14 +82,7 @@ const NON_INTERACTIVE_SELECTORS = '[aria-readonly="true"]';
  * instead of a short hand-rolled selector list per caller.
  */
 export function hasInteractiveAncestor(el, rootEl) {
-  let current = el;
-  while (current != null && current !== rootEl && current !== document.body) {
-    if (current.matches(INTERACTIVE_SELECTORS) && !current.matches(NON_INTERACTIVE_SELECTORS)) {
-      return true;
-    }
-    current = current.parentElement;
-  }
-  return false;
+  return innermostInteractive(el, rootEl) != null;
 }
 
 /**
@@ -115,7 +142,7 @@ export function useClickableContainer({
   useEffect(() => {
     const el = containerRef.current;
     if (el) {
-      el.setAttribute('data-pressable-container', 'true');
+      el.setAttribute(PRESSABLE_CONTAINER_ATTRIBUTE, 'true');
     }
   }, [containerRef]);
   const onClick = useCallback(event => {

package/dist/theme/Theme.d.ts

@@ -44,6 +44,16 @@ interface ThemeProps {
     /** Children to render */
     children: React.ReactNode;
 }
+/**
+ * True below a Theme; the root Theme (no parent context) syncs data-theme
+ * to <html>. A detached React root that conceptually sits inside the app
+ * (useToast's fallback viewport) provides it as `true` itself, so a Theme
+ * rendered in toast content themes its subtree without claiming <html> as
+ * if it were the app's root Theme.
+ * @internal Not exported from the theme barrel; useToast imports it from
+ * './theme/Theme' directly.
+ */
+export declare const ThemeNestingContext: React.Context<boolean>;
 /**
  * Theme provider component
  *

package/dist/theme/Theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/theme/Theme.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAgD,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAEvC,OAAO,EAAmB,KAAK,YAAY,EAAC,MAAM,eAAe,CAAC;AAMlE;;GAEG;AACH,UAAU,UAAU;IAClB,+BAA+B;IAC/B,KAAK,EAAE,YAAY,CAAC;IACpB,kDAAkD;IAClD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yBAAyB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AA4KD;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAe,EACf,QAAQ,GACT,EAAE,UAAU,GAAG,KAAK,CAAC,YAAY,CA+BjC;yBAnCe,KAAK"}
+{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/theme/Theme.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAgD,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAEvC,OAAO,EAAmB,KAAK,YAAY,EAAC,MAAM,eAAe,CAAC;AAMlE;;GAEG;AACH,UAAU,UAAU;IAClB,+BAA+B;IAC/B,KAAK,EAAE,YAAY,CAAC;IACpB,kDAAkD;IAClD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yBAAyB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AA0BD;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,wBAA6B,CAAC;AA6I9D;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAe,EACf,QAAQ,GACT,EAAE,UAAU,GAAG,KAAK,CAAC,YAAY,CA+BjC;yBAnCe,KAAK"}

package/dist/theme/Theme.js

@@ -78,11 +78,15 @@ const wrapperStyles = {
 // =============================================================================
 
 /**
- * Context to detect whether this Theme is nested inside another.
- * The root provider (no parent context) syncs data-theme to <html>.
- * @internal
+ * True below a Theme; the root Theme (no parent context) syncs data-theme
+ * to <html>. A detached React root that conceptually sits inside the app
+ * (useToast's fallback viewport) provides it as `true` itself, so a Theme
+ * rendered in toast content themes its subtree without claiming <html> as
+ * if it were the app's root Theme.
+ * @internal Not exported from the theme barrel; useToast imports it from
+ * './theme/Theme' directly.
  */
-const ThemeNestingContext = /*#__PURE__*/React.createContext(false);
+export const ThemeNestingContext = /*#__PURE__*/React.createContext(false);
 ThemeNestingContext.displayName = 'ThemeNestingContext';
 
 // =============================================================================

package/dist/utils/pressDisabled.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @file pressDisabled.ts
+ * @input An element
+ * @output `isDisabledControl`: whether an element is a disabled control, so a
+ *   press on it performs no action
+ * @position The one disabled-control check that press feedback
+ *   (../gestures/haptics) and the hover layers' touch trigger
+ *   (../Layer/useTouchTrigger) share, so the two never disagree about a
+ *   control. It lives outside the gesture code, which a public import that
+ *   uses no gesture never carries (architecture:react-component-runtime
+ *   INV13).
+ */
+/**
+ * Whether `element` is a disabled control: `aria-disabled="true"`, or a form
+ * control the browser counts as `:disabled` (a disabled fieldset's controls
+ * included). A disabled control performs no action, so it gives no press
+ * feedback (spec:AST-094 FR23), and a tap on it opens its reason instead
+ * (component:Tooltip FR5).
+ */
+export declare function isDisabledControl(element: Element): boolean;
+//# sourceMappingURL=pressDisabled.d.ts.map

package/dist/utils/pressDisabled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pressDisabled.d.ts","sourceRoot":"","sources":["../../src/utils/pressDisabled.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAS3D"}

package/dist/utils/pressDisabled.js

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file pressDisabled.ts
+ * @input An element
+ * @output `isDisabledControl`: whether an element is a disabled control, so a
+ *   press on it performs no action
+ * @position The one disabled-control check that press feedback
+ *   (../gestures/haptics) and the hover layers' touch trigger
+ *   (../Layer/useTouchTrigger) share, so the two never disagree about a
+ *   control. It lives outside the gesture code, which a public import that
+ *   uses no gesture never carries (architecture:react-component-runtime
+ *   INV13).
+ */
+
+/**
+ * Whether `element` is a disabled control: `aria-disabled="true"`, or a form
+ * control the browser counts as `:disabled` (a disabled fieldset's controls
+ * included). A disabled control performs no action, so it gives no press
+ * feedback (spec:AST-094 FR23), and a tap on it opens its reason instead
+ * (component:Tooltip FR5).
+ */
+export function isDisabledControl(element) {
+  if (element.getAttribute('aria-disabled') === 'true') {
+    return true;
+  }
+  try {
+    return element.matches(':disabled');
+  } catch {
+    return false;
+  }
+}

package/package.json

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

package/src/BottomSheet/BottomSheetPanel.tsx

@@ -71,7 +71,11 @@ import {
   type BottomSheetSnapPoint,
 } from './snapOffsets';
 import {useMobileKeyboard} from './useMobileKeyboard';
-import {useSheetGestures} from './useSheetGestures';
+import {
+  scrollPreservationPadding,
+  sheetLayoutHeight,
+  useSheetGestures,
+} from './useSheetGestures';
 
 const HEIGHT_BUDGETS = {
   hug: '92dvh',
@@ -592,6 +596,8 @@ export function BottomSheetPanel({
     ignoredSnapPointsMessage !== '',
   );
 
+  // A caller's height owns the element's height: the drag never writes it.
+  const consumerHeight = style?.height;
   const {
     contentProps,
     handleProps,
@@ -616,6 +622,7 @@ export function BottomSheetPanel({
     onDismiss,
     snapHeights,
     onScrimOpacity,
+    hasFixedHeight: consumerHeight != null,
   });
 
   const {getViewportProps, getContentProps} = useScrollableArea({
@@ -758,6 +765,8 @@ export function BottomSheetPanel({
     // transform — the layout height changes at rest, in one reconciling render
     // whose visible geometry is identical (see useSheetGestures).
     //   - dragging above the base restores the full height below the viewport
+    //     (the move that crosses writes that height to the element itself,
+    //     so this render only catches up to it)
     //   - a peek settles with layout 0, so it slides rather than reflowing
     const layoutOffset = isDragging
       ? dragOffset < settledOffset
@@ -774,7 +783,7 @@ export function BottomSheetPanel({
     const isTraveling = isDragging || settlingLayoutOffset != null;
     resizedHeight =
       layoutOffset > 0 || isTraveling
-        ? `${Math.max(0, sheetHeight - Math.max(0, layoutOffset))}px`
+        ? sheetLayoutHeight(sheetHeight, layoutOffset)
         : undefined;
     gestureTransform =
       translation !== 0 ? `translateY(${translation}px)` : undefined;
@@ -791,6 +800,9 @@ export function BottomSheetPanel({
       ? retainedTransform
       : undefined;
   const consumerTransform = style?.transform;
+  const hostHeight =
+    isInteractive || isRetained || isClosing ? resizedHeight : undefined;
+  const bodyEndPadding = scrollPreservationPadding(scrollPreservationInset);
   // The transform is written to the element here, not rendered through the
   // style prop. A drag writes it straight to the element once per input
   // sample (useSheetGestures) and renders nothing in between, so React never
@@ -799,20 +811,39 @@ export function BottomSheetPanel({
   // the finger left it. Written after every commit instead, outside a drag,
   // the resting value lands in the same style update as the restored
   // transition, so a settle or a dismissal animates from the live position.
+  //
+  // The height and the scrolling area's end inset are rendered through props,
+  // but a drag that crosses its base detent writes them to the elements too.
+  // When the release is processed before that move's render commits, React
+  // compares the resting values with the ones it committed before the drag,
+  // finds them unchanged and writes nothing, so the sheet would stay drawn at
+  // the drag's height. They are written here after every commit, outside a
+  // drag, for the same reason as the transform. A caller's height is left to
+  // the style prop: the drag does not write over it, so there is nothing to
+  // restore.
   useLayoutEffect(() => {
-    if (isDragging || consumerTransform != null) {
+    if (isDragging) {
       return;
     }
     const element = elementRef.current;
     if (element != null) {
-      element.style.transform = sheetTransform ?? '';
+      if (consumerTransform == null) {
+        element.style.transform = sheetTransform ?? '';
+      }
+      if (consumerHeight == null) {
+        element.style.height = hostHeight ?? '';
+      }
+    }
+    const body = bodyElementRef.current;
+    if (body != null) {
+      body.style.paddingBlockEnd = bodyEndPadding ?? '';
     }
   });
   const gestureStyle = {
     transition: contentProps.style.transition,
     touchAction: contentProps.style.touchAction,
     overscrollBehavior: contentProps.style.overscrollBehavior,
-    height: resizedHeight,
+    height: hostHeight,
   };
   return (
     <div
@@ -839,7 +870,7 @@ export function BottomSheetPanel({
           ...(isInteractive
             ? gestureStyle
             : isRetained || isClosing
-              ? {height: resizedHeight}
+              ? {height: hostHeight}
               : {}),
           ...style,
         },
@@ -860,8 +891,8 @@ export function BottomSheetPanel({
                 styles.body,
                 height === 'tall' && styles.tallKeyboardBody,
               ),
-              scrollPreservationInset > 0
-                ? {style: {paddingBlockEnd: `${scrollPreservationInset}px`}}
+              bodyEndPadding != null
+                ? {style: {paddingBlockEnd: bodyEndPadding}}
                 : {},
             ),
           }),

package/src/BottomSheet/useSheetGestures.ts

@@ -5,7 +5,8 @@
 /**
  * @file useSheetGestures.ts
  * @input Uses React (useCallback, useEffect, useMemo, useRef, useState)
- * @output Exports useSheetGestures hook and its option/result types
+ * @output Exports useSheetGestures hook, its option/result types, and the
+ *   height and end-inset formats a host renders for the layout split
  * @position Internal to BottomSheet; not exported from the core entry point
  *
  * Drag + snap machinery for the bottom sheet. Tracks a pointer drag down the
@@ -26,10 +27,18 @@
  * A live drag writes that transform straight to the sheet element, once per
  * input sample, and renders nothing: React state changes when the drag begins
  * and ends, and in between only when the layout split changes (a drag that
- * crosses above its base detent restores the full height). The live offset
- * is readable through `activeOffsetRef`. The host owns the element's
- * transform outside a drag and writes the resting value after each commit,
- * so a settle animates from wherever the finger left the sheet.
+ * crosses above its base detent restores the full height). That crossing
+ * changes three things that only look right together: the transform, the
+ * sheet's height and the scrolling area's end inset. The move writes all
+ * three to the elements in the same task, so the browser paints them in one
+ * frame, and the render it schedules catches the host up to the same values
+ * whenever it commits; it never decides what the next frame shows. The live
+ * offset is readable through `activeOffsetRef`. The host owns the element's
+ * transform, height and end inset outside a drag and writes their resting
+ * values after each commit (a host with a fixed height of its own keeps that
+ * height, and the drag never writes it), so a settle animates from wherever the finger
+ * left the sheet, and a release processed before the crossing move's render
+ * commits still leaves the sheet drawn at its resting detent.
  *
  * Those are pixels, and the stops behind them are relative to the viewport, so
  * a sheet at rest re-resolves its detent on `resize` / `orientationchange`,
@@ -206,6 +215,28 @@ function preservationInsetForOffset(
   return Math.max(0, baseOffset - targetOffset - naturalEndGap);
 }
 
+/**
+ * The sheet's height, in px, while it is in motion or rests with a layout
+ * split: the fully open height less the part the scrolling area gives up.
+ * The host renders it and a live drag writes it; one format keeps the two
+ * identical, so the render that follows a written value changes nothing.
+ */
+export function sheetLayoutHeight(
+  sheetHeight: number,
+  layoutOffset: number,
+): string {
+  return `${Math.max(0, sheetHeight - Math.max(0, layoutOffset))}px`;
+}
+
+/**
+ * The scrolling area's end padding that preserves its scroll position across
+ * a height change, or nothing when there is none to add. Shared by the host's
+ * render and a live drag's write for the same reason as sheetLayoutHeight.
+ */
+export function scrollPreservationPadding(inset: number): string | undefined {
+  return inset > 0 ? `${inset}px` : undefined;
+}
+
 function renderedBlockEndPadding(element: HTMLElement): number {
   const value = Number.parseFloat(getComputedStyle(element).paddingBlockEnd);
   return Number.isFinite(value) ? value : 0;
@@ -368,6 +399,14 @@ export interface UseSheetGesturesOptions {
    * on the dismiss overshoot. Lets the owner mirror it onto the scrim.
    */
   onScrimOpacity?: (opacity: number) => void;
+  /**
+   * Whether the host draws the sheet at a fixed height of its own (a caller's
+   * height) rather than the layout-split height. A drag across the base
+   * detent then writes only the transform and the end inset, and leaves the
+   * element's height to the host.
+   * @default false
+   */
+  hasFixedHeight?: boolean;
 }
 
 export interface SheetContentProps {
@@ -508,6 +547,7 @@ export function useSheetGestures({
   snapHeights,
   onSnap,
   onScrimOpacity,
+  hasFixedHeight = false,
 }: UseSheetGesturesOptions): UseSheetGesturesResult {
   const [dragOffset, setDragOffset] = useState(0);
   const [settledOffset, setSettledOffset] = useState(0);
@@ -657,11 +697,13 @@ export function useSheetGestures({
   const canDismissRef = useRef(canDismiss);
   const onSnapRef = useRef(onSnap);
   const onScrimOpacityRef = useRef(onScrimOpacity);
+  const hasFixedHeightRef = useRef(hasFixedHeight);
   useEffect(() => {
     onDismissRef.current = onDismiss;
     canDismissRef.current = canDismiss;
     onSnapRef.current = onSnap;
     onScrimOpacityRef.current = onScrimOpacity;
+    hasFixedHeightRef.current = hasFixedHeight;
   });
 
   // Live drag bookkeeping (refs so pointermove doesn't churn renders).
@@ -954,6 +996,31 @@ export function useSheetGestures({
     [],
   );
 
+  // A live drag's layout split moved. The transform written beside this call
+  // is only correct on the new split, so the height and end inset that pair
+  // with it go to the elements in the same task. They are the values the host
+  // renders from the state this move also sets, in the same format, so its
+  // commit, whenever it lands, leaves them as they are. If the drag ends
+  // before that commit, the host's post-commit write puts the resting values
+  // back, since React sees no change from what it committed before the drag.
+  // A host with a fixed height of its own renders that height throughout and
+  // never restores a written one, so its height is not written.
+  const writeLiveLayout = useCallback(
+    (sheetHeight: number, layoutOffset: number) => {
+      const element = sheetElRef.current;
+      // Unmeasured, the host renders no height to pair with.
+      if (element != null && sheetHeight > 0 && !hasFixedHeightRef.current) {
+        element.style.height = sheetLayoutHeight(sheetHeight, layoutOffset);
+      }
+      const body = bodyNodeRef.current;
+      if (body != null) {
+        body.style.paddingBlockEnd =
+          scrollPreservationPadding(scrollPreservationInsetRef.current) ?? '';
+      }
+    },
+    [],
+  );
+
   const cancelDrag = useCallback(
     (target?: HTMLElement) => {
       const state = dragStateRef.current;
@@ -1262,23 +1329,28 @@ export function useSheetGestures({
       state.renderedOffset = next;
       state.layoutOffset = layoutOffset;
       activeOffsetRef.current = next;
+      updateScrollPreservationInset(
+        preservationInsetForOffset(
+          state.baseLayoutOffset,
+          layoutOffset,
+          state.naturalEndGap,
+        ),
+      );
       writeLiveTransform(next, layoutOffset);
       if (hasLayoutChanged) {
-        // The layout split moved: the host renders the new height, reading
-        // the offset it has to pair with it from state.
+        // The layout split moved. The new height and end inset are written
+        // with the transform, in this task: a render scheduled normally can
+        // commit after the next paint, and the transform alone on the old
+        // height would put the sheet the whole split away from the finger
+        // for that frame. The host still renders them from state, reading
+        // the offset it has to pair with the height from here.
+        writeLiveLayout(state.height, layoutOffset);
         setDragOffset(next);
       }
       if (!state.hasTraveled && next !== state.baseOffset) {
         state.hasTraveled = true;
         setIsTraveling(true);
       }
-      updateScrollPreservationInset(
-        preservationInsetForOffset(
-          state.baseLayoutOffset,
-          layoutOffset,
-          state.naturalEndGap,
-        ),
-      );
 
       // Mirror the scrim to the live drag: full at/above the mid detent,
       // fading to hidden as it collapses onto the peek detent and through the
@@ -1295,7 +1367,12 @@ export function useSheetGestures({
         scrimOpacityForOffset(next, offsets, dismissOffset, peekOffset),
       );
     },
-    [resolveDetents, updateScrollPreservationInset, writeLiveTransform],
+    [
+      resolveDetents,
+      updateScrollPreservationInset,
+      writeLiveLayout,
+      writeLiveTransform,
+    ],
   );
 
   const endDrag = useCallback(