@astryxdesign/core 0.5.2-canary.2da7a39 → 0.5.2-canary.2e51213

package/dist/MultiSelector/MultiSelector.js

@@ -101,6 +101,15 @@ const styles = {
     k3aq6I: "x1c071of x1pdlv7q",
     $$css: true
   },
+  triggerReadOnly: {
+    kkrTdU: "xt0e3qv",
+    $$css: true
+  },
+  triggerGhostReadOnly: {
+    kKwaWg: "x18o3ruo",
+    k3aq6I: "x1c071of x1pdlv7q",
+    $$css: true
+  },
   statusButton: {
     k1xSpc: "x78zum5",
     kGNEyG: "x6s0dn4",
@@ -261,6 +270,7 @@ export function MultiSelector({
   isOptional = false,
   isRequired = false,
   isDisabled = false,
+  isReadOnly = false,
   disabledMessage,
   options,
   value,
@@ -308,11 +318,13 @@ export function MultiSelector({
   const emptySearchText = emptySearchTextFromProps ?? t('@astryx.multiSelector.emptySearchResults');
   const size = useSize(sizeProp, 'md');
   const effectiveStatusVariant = variant === 'ghost' && statusVariant === 'attached' ? 'detached' : statusVariant;
+  const isEffectivelyReadOnly = isReadOnly && !isDisabled;
   const triggerId = useId();
   const listboxId = useId();
   const descriptionId = useId();
   const statusMessageId = useId();
   const inputLabelId = useId();
+  const readOnlyDescriptionId = useId();
   const searchId = useId();
   const triggerRef = useRef(null);
   const searchRef = useRef(null);
@@ -351,7 +363,7 @@ export function MultiSelector({
   const {
     ariaLabelledBy,
     ariaDescribedBy
-  } = getInputARIA(inputLabelId, [description ? descriptionId : null, !inputGroup && effectiveStatusVariant !== 'tooltip' && status?.message ? statusMessageId : null, effectiveStatusVariant === 'tooltip' && status?.message ? statusTooltip.describedBy : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
+  } = getInputARIA(inputLabelId, [description ? descriptionId : null, !inputGroup && effectiveStatusVariant !== 'tooltip' && status?.message ? statusMessageId : null, effectiveStatusVariant === 'tooltip' && status?.message ? statusTooltip.describedBy : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null, isEffectivelyReadOnly ? readOnlyDescriptionId : null], inputGroup);
 
   // Flatten options for keyboard navigation
   const selectableItems = useMemo(() => getSelectableOptions(options), [options]);
@@ -457,16 +469,27 @@ export function MultiSelector({
   const {
     popover
   } = surface;
+  const hideSurface = surface.hide;
+  const isSurfaceOpen = surface.isOpen;
   const keepOpenProps = useKeepLayerOpenProps(popover.id, popover.isOpen);
 
-  // Open dropdown on mount when isDefaultOpen is true
+  // Open dropdown on mount when isDefaultOpen is true and interaction is allowed.
   useEffect(() => {
-    if (isDefaultOpen) {
+    if (isDefaultOpen && !isEffectivelyReadOnly) {
       surface.show();
     }
     // eslint-disable-next-line @eslint-react/exhaustive-deps -- mount-only: isDefaultOpen is not reactive
   }, []);
 
+  // Read-only is controlled by caller policy, so an already-open surface must
+  // close when that policy changes. The presentation controller keeps a sheet
+  // mounted through its exit and lets BottomSheet return final focus.
+  useEffect(() => {
+    if (isEffectivelyReadOnly && isSurfaceOpen) {
+      hideSurface();
+    }
+  }, [isEffectivelyReadOnly, isSurfaceOpen, hideSurface]);
+
   // Announce the filtered result count from the query-change handler (matching
   // BaseTypeahead) rather than a reactive effect: computing the count for the
   // next query here fires the announcement exactly once per keystroke and does
@@ -595,7 +618,7 @@ export function MultiSelector({
   } = useMultiCombobox({
     wasJustDismissed: surface.wasJustDismissed,
     selectableItems: sortedItems,
-    isDisabled,
+    isDisabled: isDisabled || isEffectivelyReadOnly,
     isOpen: surface.isOpen,
     hasSearch,
     onOpen: useCallback(() => {
@@ -975,19 +998,48 @@ export function MultiSelector({
       children: renderOptions()
     })
   });
-  const selectionSurface = surface.activePresentation === 'bottom-sheet' ? /*#__PURE__*/_jsx(SelectorBottomSheet, {
-    isOpen: surface.isSheetOpen,
-    onOpenChange: surface.onSheetOpenChange,
-    finalFocusRef: triggerRef,
-    initialFocusRef: hasSearch ? searchRef : listboxRef,
-    label: label,
-    children: panelContent
-  }) : popover.render(panelContent, {
-    placement: 'below',
-    alignment: 'start',
-    offset: spacingVars['--spacing-1'],
-    xstyle: styles.popover
-  });
+  let selectionSurface = null;
+  if (surface.activePresentation === 'bottom-sheet') {
+    if (!isEffectivelyReadOnly || surface.isSheetPresented) {
+      selectionSurface = /*#__PURE__*/_jsx(SelectorBottomSheet, {
+        isOpen: surface.isSheetOpen,
+        onOpenChange: surface.onSheetOpenChange,
+        finalFocusRef: triggerRef,
+        initialFocusRef: hasSearch ? searchRef : listboxRef,
+        label: label,
+        children: panelContent
+      });
+    }
+  } else if (!isEffectivelyReadOnly) {
+    selectionSurface = popover.render(panelContent, {
+      placement: 'below',
+      alignment: 'start',
+      offset: spacingVars['--spacing-1'],
+      xstyle: styles.popover
+    });
+  }
+  const triggerSharedProps = {
+    id: triggerId,
+    'aria-describedby': ariaDescribedBy,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-required': isEffectivelyRequired ? 'true' : undefined,
+    'aria-invalid': status?.type === 'error' ? 'true' : undefined,
+    'aria-busy': isBusy || undefined,
+    onKeyDown,
+    onFocus: event => {
+      onFocus?.(event);
+      surface.onTriggerFocus(event);
+    },
+    tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
+    ...{
+      0: {
+        className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x16khyan x1a2a7pz xh6dtrn"
+      },
+      1: {
+        className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1a2a7pz xh6dtrn xt0e3qv"
+      }
+    }[!!isEffectivelyReadOnly << 0]
+  };
   const multiSelectorContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
       ref: el => {
@@ -1003,47 +1055,39 @@ export function MultiSelector({
         variant,
         size,
         status: status?.type ?? null,
-        disabled: isDisabled ? 'disabled' : null
-      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, variant === 'ghost' && interactionOverlayStyles.backgroundImage, variant === 'ghost' && focusOutlineStyles.focusWithin, surface.isTriggerFocusRingSuppressed && selectorPresentationStyles.pointerRestoredFocus, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, optimisticValue.length === 0 && styles.triggerPlaceholder, variant !== 'ghost' && status && inputStatusBorderStyles[status.type], variant !== 'ghost' && status && !isDisabled && inputStatusHoverShadowStyles[status.type], variant !== 'ghost' && inputGroup && groupStyles.inGroup, xstyle), className, style),
+        disabled: isDisabled ? 'disabled' : null,
+        readonly: isEffectivelyReadOnly ? 'readonly' : null
+      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, variant === 'ghost' && interactionOverlayStyles.backgroundImage, variant === 'ghost' && focusOutlineStyles.focusWithin, surface.isTriggerFocusRingSuppressed && selectorPresentationStyles.pointerRestoredFocus, isDisabled && inputWrapperStyles.disabled, isEffectivelyReadOnly && styles.triggerReadOnly, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, variant === 'ghost' && isEffectivelyReadOnly && styles.triggerGhostReadOnly, optimisticValue.length === 0 && styles.triggerPlaceholder, variant !== 'ghost' && status && inputStatusBorderStyles[status.type], variant !== 'ghost' && status && !isDisabled && inputStatusHoverShadowStyles[status.type], variant !== 'ghost' && inputGroup && groupStyles.inGroup, xstyle), className, style),
       children: [startIcon && renderIconSlot(startIcon, {
         size: 'sm',
         color: 'secondary'
       }), inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
         id: inputLabelId,
         children: label
+      }), isEffectivelyReadOnly && /*#__PURE__*/_jsx(VisuallyHidden, {
+        id: readOnlyDescriptionId,
+        children: t('@astryx.input.readOnly')
       }), /*#__PURE__*/_jsx("button", {
+        ...triggerSharedProps,
         ref: triggerRef,
-        id: triggerId,
         type: "button"
-        // In hasSearch mode the popup's search input is the combobox (it owns
-        // focus + aria-activedescendant, comboboxes-4), so the trigger is a
-        // plain button that opens the listbox — not a second combobox.
+        // The read-only trigger stays a combobox even when hasSearch is set:
+        // no search input is rendered in that state, and preserving the role
+        // keeps the control's programmatic identity stable. Editable search
+        // mode still moves combobox semantics to the popup input.
         ,
-        role: hasSearch ? undefined : 'combobox',
-        "aria-haspopup": surface.activePresentation === 'bottom-sheet' ? 'dialog' : 'listbox',
-        "aria-expanded": surface.isOpen,
-        "aria-controls": listboxId,
-        "aria-activedescendant": !hasSearch && surface.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
-        "aria-describedby": ariaDescribedBy,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-required": isEffectivelyRequired ? 'true' : undefined,
-        "aria-invalid": status?.type === 'error' ? 'true' : undefined,
-        "aria-busy": isBusy || undefined
+        role: isEffectivelyReadOnly || !hasSearch ? 'combobox' : undefined,
+        "aria-haspopup": isEffectivelyReadOnly ? undefined : surface.activePresentation === 'bottom-sheet' ? 'dialog' : 'listbox',
+        "aria-expanded": isEffectivelyReadOnly ? false : surface.isOpen,
+        "aria-controls": isEffectivelyReadOnly ? undefined : listboxId,
+        "aria-readonly": isEffectivelyReadOnly || undefined,
+        "aria-activedescendant": !isEffectivelyReadOnly && !hasSearch && surface.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined
         // With a disabledMessage the trigger keeps focusability via
         // aria-disabled so the reason is focus-discoverable; activation is
         // still blocked by the isDisabled guards in useMultiCombobox.
         ,
         disabled: isDisabled && !showsDisabledMessage,
         "aria-disabled": showsDisabledMessage ? 'true' : undefined,
-        onKeyDown: onKeyDown,
-        onFocus: event => {
-          onFocus?.(event);
-          surface.onTriggerFocus(event);
-        },
-        tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
-        ...{
-          className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x16khyan x1a2a7pz xh6dtrn"
-        },
         children: /*#__PURE__*/_jsx("span", {
           ...{
             className: "x78zum5 x6s0dn4 xzye2dw x1iyjqo2 xs83m0k x1r8uery xeuugli xb3r6kr"
@@ -1060,7 +1104,7 @@ export function MultiSelector({
         disabled: isDisabled
       }, v)), isBusy && /*#__PURE__*/_jsx(Spinner, {
         size: "sm"
-      }), hasClear && value.length > 0 && !isDisabled && /*#__PURE__*/_jsx(InternalInputClearButton, {
+      }), hasClear && value.length > 0 && !isDisabled && !isEffectivelyReadOnly && /*#__PURE__*/_jsx(InternalInputClearButton, {
         ...keepOpenProps,
         label: t('@astryx.multiSelector.clearAll', {
           label
@@ -1086,7 +1130,7 @@ export function MultiSelector({
         size: "sm",
         color: STATUS_ICON_COLOR_MAP[status.type],
         xstyle: styles.triggerIcon
-      }) : /*#__PURE__*/_jsx(Icon, {
+      }) : !isEffectivelyReadOnly ? /*#__PURE__*/_jsx(Icon, {
         icon: "chevronDown",
         size: "sm",
         color: "secondary"
@@ -1104,7 +1148,7 @@ export function MultiSelector({
         ...themeProps('multi-selector-indicator-icon', {
           state: surface.isOpen ? 'expanded' : 'collapsed'
         })
-      })]
+      }) : null]
     }), selectionSurface, showStatusTooltip && statusTooltip.renderTooltip(status?.message ?? ''), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
   if (inputGroup) {

package/dist/RadioList/RadioListItem.d.ts

@@ -18,17 +18,42 @@ import type { BaseProps } from '../BaseProps';
 export interface RadioListItemProps extends BaseProps<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
     /**
-     * Label text for the radio item.
+     * Primary label for the radio item.
+     *
+     * Accepts a plain string or a ReactNode for rich content. Links and buttons
+     * in the label keep their own behavior; only non-interactive row clicks
+     * delegate to the radio. The radio points at the rendered label for its
+     * accessible name, so a rich label still names it from its own text — pass
+     * `aria-label` when that text is absent or too noisy to announce.
      */
-    label: string;
+    label: ReactNode;
+    /**
+     * Plain-text accessible name for the radio, applied to the control rather
+     * than the row. It replaces the name the label would otherwise supply — a
+     * plain string label included — so reach for it when a rich label's own
+     * text is absent or reads badly, not as a routine addition.
+     *
+     * @example
+     * ```
+     * <RadioListItem
+     *   label={<span>Pro plan <Badge label="Recommended" /></span>}
+     *   aria-label="Pro plan"
+     *   value="pro"
+     * />
+     * ```
+     */
+    'aria-label'?: string;
     /**
      * Value of this radio item.
      */
     value: string;
     /**
-     * Description text displayed below the label.
+     * Secondary content displayed below the label. Accepts a plain string or a
+     * ReactNode. Links and buttons anywhere in the row keep their own click
+     * behaviour — the row only delegates clicks from its non-interactive
+     * surface to the radio.
      */
-    description?: string;
+    description?: ReactNode;
     /**
      * Whether this individual radio item is disabled.
      * @default false
@@ -56,7 +81,7 @@ export interface RadioListItemProps extends BaseProps<HTMLDivElement> {
  * />
  * ```
  */
-export declare function RadioListItem({ ref, label, value, description, isDisabled: isItemDisabled, startContent, endContent, xstyle, className, style, onClick, ...rest }: RadioListItemProps): React.JSX.Element;
+export declare function RadioListItem({ ref, label, 'aria-label': ariaLabel, value, description, isDisabled: isItemDisabled, startContent, endContent, xstyle, className, style, onClick, ...rest }: RadioListItemProps): React.JSX.Element;
 export declare namespace RadioListItem {
     var displayName: string;
 }

package/dist/RadioList/RadioListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyF5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,IAAI,EACR,EAAE,kBAAkB,qBA4IpB;yBAzJe,aAAa"}
+{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyF5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;;OAQG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;OAcG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAsJpB;yBApKe,aAAa"}

package/dist/RadioList/RadioListItem.js

@@ -94,6 +94,7 @@ const rowStyles = {
 export function RadioListItem({
   ref,
   label,
+  'aria-label': ariaLabel,
   value,
   description,
   isDisabled: isItemDisabled = false,
@@ -110,6 +111,7 @@ export function RadioListItem({
     throw new Error('RadioListItem must be used within an RadioList');
   }
   const id = useId();
+  const labelID = useId();
   const descriptionID = useId();
   const isDisabled = context.isDisabled || isItemDisabled;
   // When the whole group is disabled with a disabledMessage, radios stay
@@ -118,6 +120,10 @@ export function RadioListItem({
   // and always uses the native disabled attribute.
   const keepsFocusableForMessage = context.hasDisabledMessage && !isItemDisabled;
   const isChecked = context.value === value;
+  // One predicate for both the rendered element and the aria-describedby that
+  // points at it. A ReactNode description can be `false` or `''`, which render
+  // nothing — a `!= null` check would leave the link dangling.
+  const hasDescription = isRenderable(description);
   const size = context.size;
   // The radio visual is an indicator: a theme can restyle it through the
   // `radio` / `radio-dot` targets or replace the component outright.
@@ -148,7 +154,6 @@ export function RadioListItem({
       name: context.name,
       value: value,
       checked: isChecked,
-      "aria-label": label,
       disabled: isDisabled && !keepsFocusableForMessage,
       "aria-disabled": keepsFocusableForMessage ? 'true' : undefined
       // A focusable-disabled radio is not natively disabled, so detach it
@@ -167,8 +172,15 @@ export function RadioListItem({
       // both direct control clicks and row-surface clicks the row delegates
       // to the input — the same routing CheckboxListItem uses.
       ,
-      onClick: onClick,
-      "aria-describedby": description ? descriptionID : undefined,
+      onClick: onClick
+      // The radio names itself from the visible label element, which works
+      // for a rich label as well as a plain string. `aria-label` replaces
+      // that name rather than adding to it, so the two are mutually
+      // exclusive — aria-labelledby would otherwise win over it.
+      ,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabel == null ? labelID : undefined,
+      "aria-describedby": hasDescription ? descriptionID : undefined,
       ...stylex.props(styles.input, wrapperSizeStyles[size], isDisabled && styles.inputDisabled)
     }), /*#__PURE__*/_jsx("span", {
       ref: indicatorRef,
@@ -195,9 +207,10 @@ export function RadioListItem({
     interactiveRef: radioRef,
     isDisabled: isDisabled,
     label: /*#__PURE__*/_jsx("span", {
+      id: labelID,
       children: label
     }),
-    description: isRenderable(description) ? /*#__PURE__*/_jsx("span", {
+    description: hasDescription ? /*#__PURE__*/_jsx("span", {
       id: descriptionID,
       children: description
     }) : undefined,

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;AAW5C,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,+BAuVnB;yBAtWe,YAAY"}

package/dist/Resizable/ResizeHandle.js

@@ -21,9 +21,19 @@
  * 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';
+import { devWarn } from "../utils/devWarning.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, durationVars, easeVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
@@ -66,6 +76,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 +297,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);
@@ -295,48 +320,73 @@ export function ResizeHandle({
   }, []);
   const isInteracting = isHovered || isFocused;
 
+  // A handle whose axis disagrees with its hook drags along one axis while the
+  // hook measures percentage bounds on the other. `ResizableProps` is exported,
+  // so `_direction` is optional for old hand-built objects; absent means there
+  // is no hook axis to compare, not that the hook is horizontal.
+  const didWarnAxisRef = useRef(false);
+  useEffect(() => {
+    const hookDirection = resizable?._direction;
+    if (hookDirection != null && hookDirection !== direction && !didWarnAxisRef.current) {
+      didWarnAxisRef.current = true;
+      devWarn('ResizeHandle', `direction="${direction}" but its useResizable region is ` + `"${hookDirection}". They must match: the hook measures one axis ` + 'and the handle drags the other.');
+    }
+  }, [direction, resizable]);
+
   // --- 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();
+    // Not a resize end, but still the end of the gesture: the region froze
+    // state for the duration of the drag and has to be told it is over.
+    resizable?._onResizeCancel?.();
+  }, [clearDrag, resizable]);
 
   // --- Keyboard ---
   const handleKeyDown = useCallback(e => {
@@ -406,16 +456,20 @@ 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 — and the region, which outlives this handle, still has to hear
+  // that its gesture is over.
+  const cancelOnUnmountRef = useRef(undefined);
+  cancelOnUnmountRef.current = resizable?._onResizeCancel;
   useEffect(() => {
     return () => {
-      if (dragCleanupRef.current) {
-        dragCleanupRef.current();
-        document.body.style.cursor = '';
-        document.body.style.userSelect = '';
+      if (dragRef.current) {
+        dragRef.current = null;
+        clearBodyDragStyles();
+        cancelOnUnmountRef.current?.();
       }
     };
   }, []);
@@ -464,6 +518,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/Resizable/index.d.ts

@@ -4,7 +4,9 @@
  * @output Re-exports all public Resizable API
  * @position Package entry point for Resizable
  */
+export { percent } from './utils';
 export { useResizable } from './useResizable';
+export type { ResizablePercentSize, ResizableSize } from './utils';
 export type { ResizableRegion, ResizableRegionConfig, ResizableProps, ResizableConfig, UseResizableSingleConfig, UseResizableMultiConfig, } from './useResizable';
 export { ResizeHandle } from './ResizeHandle';
 export type { ResizeHandleProps } from './ResizeHandle';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Resizable/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Resizable/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,SAAS,CAAC;AAChC,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,oBAAoB,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC"}

package/dist/Resizable/index.js

@@ -8,5 +8,6 @@
  * @output Re-exports all public Resizable API
  * @position Package entry point for Resizable
  */
+export { percent } from "./utils.js";
 export { useResizable } from "./useResizable.js";
 export { ResizeHandle } from "./ResizeHandle.js";