@astryxdesign/core 0.7.4 → 0.7.5-canary.04434e7

package/dist/Icon/index.d.ts

@@ -6,9 +6,9 @@
  *
  * SYNC: When modified, update this header and /packages/core/src/Icon/Icon.doc.mjs
  */
-export { Icon, renderIconSlot } from './Icon';
-export { useIcon } from './useIcon';
-export type { IconProps, IconColor, IconSize, IconType } from './Icon';
-export { registerIcons, getIconRegistry, getIcon, getExtendedIcon, resetIcons, } from './globalIconRegistry';
-export type { IconName, ExtendedIconName, NamespacedIconName, IconRegistry, IconRegistrySource, } from './globalIconRegistry';
+export { Icon, renderIconSlot } from './Icon.js';
+export { useIcon } from './useIcon.js';
+export type { IconProps, IconColor, IconSize, IconType } from './Icon.js';
+export { registerIcons, getIconRegistry, getIcon, getExtendedIcon, resetIcons, } from './globalIconRegistry.js';
+export type { IconName, ExtendedIconName, NamespacedIconName, IconRegistry, IconRegistrySource, } from './globalIconRegistry.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Icon/useIcon.d.ts

@@ -5,7 +5,7 @@
  * @position Client hook for components that render registry icons directly
  */
 import type { ReactNode } from 'react';
-import { type IconName, type NamespacedIconName } from './globalIconRegistry';
+import { type IconName, type NamespacedIconName } from './globalIconRegistry.js';
 /**
  * Resolve a semantic icon name from the nearest Theme, falling back through
  * root theme registration, global icon overrides, and built-in defaults.

package/dist/IconButton/IconButton.d.ts

@@ -12,7 +12,7 @@
  * - /packages/cli/assets/templates/blocks/components/IconButton/ (showcase blocks)
  */
 import type { ReactNode } from 'react';
-import type { ButtonProps } from '../Button/Button';
+import type { ButtonProps } from '../Button/Button.js';
 /**
  * Props for IconButton.
  *

package/dist/IconButton/index.d.ts

@@ -6,6 +6,6 @@
  *
  * SYNC: When modified, update this header and /packages/core/src/IconButton/IconButton.doc.mjs
  */
-export { IconButton } from './IconButton';
-export type { IconButtonProps } from './IconButton';
+export { IconButton } from './IconButton.js';
+export type { IconButtonProps } from './IconButton.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Indicator/CheckIndicator.d.ts

@@ -1,4 +1,4 @@
-import type { IndicatorProps } from './types';
+import type { IndicatorProps } from './types.js';
 /**
  * The default single-selection mark: a checkmark when chosen, nothing when not.
  *

package/dist/Indicator/CheckboxIndicator.d.ts

@@ -1,4 +1,4 @@
-import type { IndicatorProps } from './types';
+import type { IndicatorProps } from './types.js';
 /**
  * The default checkbox visual: a square box with a checkmark or an
  * indeterminate bar.

package/dist/Indicator/RadioIndicator.d.ts

@@ -1,4 +1,4 @@
-import type { IndicatorProps } from './types';
+import type { IndicatorProps } from './types.js';
 /**
  * The default radio visual: a circle with a filled inner dot when selected.
  *

package/dist/Indicator/index.d.ts

@@ -13,12 +13,12 @@
  * replaceable wholesale by name through `defineTheme({indicators})` — replace
  * `check` and every single-selection mark in the app follows.
  */
-export { CheckboxIndicator } from './CheckboxIndicator';
-export { CheckIndicator } from './CheckIndicator';
-export { RadioIndicator } from './RadioIndicator';
-export { defaultIndicators, getIndicator } from './indicatorRegistry';
-export type { CoreIndicatorName, IndicatorRegistrySource, } from './indicatorRegistry';
-export { useIndicator } from './useIndicator';
-export { indicatorScope } from './indicator.markers.stylex';
-export type { IndicatorComponent, IndicatorFamily, IndicatorFamilyMap, IndicatorMap, IndicatorName, IndicatorNameOfFamily, IndicatorPosition, IndicatorProps, IndicatorRegistry, IndicatorSize, IndicatorState, } from './types';
+export { CheckboxIndicator } from './CheckboxIndicator.js';
+export { CheckIndicator } from './CheckIndicator.js';
+export { RadioIndicator } from './RadioIndicator.js';
+export { defaultIndicators, getIndicator } from './indicatorRegistry.js';
+export type { CoreIndicatorName, IndicatorRegistrySource, } from './indicatorRegistry.js';
+export { useIndicator } from './useIndicator.js';
+export { indicatorScope } from './indicator.markers.stylex.js';
+export type { IndicatorComponent, IndicatorFamily, IndicatorFamilyMap, IndicatorMap, IndicatorName, IndicatorNameOfFamily, IndicatorPosition, IndicatorProps, IndicatorRegistry, IndicatorSize, IndicatorState, } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Indicator/indicatorRegistry.d.ts

@@ -21,8 +21,8 @@
  * promise a component for `getIndicator('brand-star')` and hand back
  * `undefined` at runtime.
  */
-import type { DefinedTheme } from '../theme/defineTheme';
-import type { IndicatorComponent, IndicatorMap, IndicatorName } from './types';
+import type { DefinedTheme } from '../theme/defineTheme.js';
+import type { IndicatorComponent, IndicatorMap, IndicatorName } from './types.js';
 /**
  * The indicator names Astryx ships a default for.
  *

package/dist/Indicator/types.d.ts

@@ -32,7 +32,7 @@
  * `state={isOpen ? 'on' : 'off'}`.
  */
 import type { ComponentType, ReactNode, Ref } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 /**
  * The indicator families, each mapped to the states it can express.
  *

package/dist/Indicator/useIndicator.d.ts

@@ -1,5 +1,5 @@
-import { type CoreIndicatorName } from './indicatorRegistry';
-import type { IndicatorComponent, IndicatorMap, IndicatorName } from './types';
+import { type CoreIndicatorName } from './indicatorRegistry.js';
+import type { IndicatorComponent, IndicatorMap, IndicatorName } from './types.js';
 /**
  * Resolve an indicator component from the nearest `<Theme>`.
  *

package/dist/InputGroup/InputGroup.d.ts

@@ -15,8 +15,8 @@
  * - /packages/cli/assets/templates/blocks/components/InputGroup/
  */
 import { type ReactNode } from 'react';
-import { type InputStatus } from '../Field';
-import type { BaseProps } from '../BaseProps';
+import { type InputStatus } from '../Field/index.js';
+import type { BaseProps } from '../BaseProps.js';
 export type InputGroupSize = 'sm' | 'md' | 'lg';
 export interface InputGroupProps extends Omit<BaseProps<HTMLDivElement>, 'children'> {
     /** Ref forwarded to the group container element */

package/dist/InputGroup/InputGroupText.d.ts

@@ -10,7 +10,7 @@
  * - /packages/cli/assets/templates/blocks/components/InputGroup/
  */
 import React, { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export interface InputGroupTextProps extends BaseProps<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
     /**

package/dist/InputGroup/index.d.ts

@@ -4,10 +4,10 @@
  * @output Exports InputGroup, InputGroupText, context hook, and types
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  */
-export { InputGroup } from './InputGroup';
-export type { InputGroupProps, InputGroupSize } from './InputGroup';
-export { InputGroupText } from './InputGroupText';
-export type { InputGroupTextProps } from './InputGroupText';
-export { useInputGroup } from './InputGroupContext';
-export type { InputGroupContextValue } from './InputGroupContext';
+export { InputGroup } from './InputGroup.js';
+export type { InputGroupProps, InputGroupSize } from './InputGroup.js';
+export { InputGroupText } from './InputGroupText.js';
+export type { InputGroupTextProps } from './InputGroupText.js';
+export { useInputGroup } from './InputGroupContext.js';
+export type { InputGroupContextValue } from './InputGroupContext.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/InteractiveRoleContext/InteractiveRoleContext.d.ts

@@ -1,4 +1,4 @@
-import type { InteractiveRole } from '../hooks/useInteractiveRole';
+import type { InteractiveRole } from '../hooks/useInteractiveRole.js';
 /**
  * Context that provides a role override to child components.
  *

package/dist/InteractiveRoleContext/index.d.ts

@@ -4,5 +4,5 @@
  * @output Exports InteractiveRoleContext module public API
  * @position Entry point for InteractiveRoleContext module
  */
-export { InteractiveRoleContext, useInteractiveRoleContext, } from './InteractiveRoleContext';
+export { InteractiveRoleContext, useInteractiveRoleContext, } from './InteractiveRoleContext.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Item/Item.d.ts

@@ -21,7 +21,7 @@
  * - /packages/cli/assets/templates/blocks/components/Item/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export type ItemAlign = 'center' | 'start' | 'first-line';
 export type ItemDensity = 'compact' | 'balanced' | 'spacious';
 /**

package/dist/Item/ItemSwipeLayer.d.ts

@@ -16,8 +16,8 @@
  * split — no element is added for the swipe (spec AST-057, FR2).
  */
 import { type RefObject } from 'react';
-import { type SwipeHandlers } from './useSwipeAction';
-import type { ItemSwipeAction, ItemSwipeBehavior } from './Item';
+import { type SwipeHandlers } from './useSwipeAction.js';
+import type { ItemSwipeAction, ItemSwipeBehavior } from './Item.js';
 /**
  * What the root needs from the gesture: the handlers it forwards its events
  * into, and the test for the click the browser synthesizes after a drag. The

package/dist/Item/index.d.ts

@@ -4,6 +4,6 @@
  * @output Exports Item component and types
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  */
-export { Item } from './Item';
-export type { ItemProps, ItemAlign, ItemDensity, ItemSwipeAction, ItemSwipeActions, ItemSwipeActionVariant, ItemSwipeBehavior, } from './Item';
+export { Item } from './Item.js';
+export type { ItemProps, ItemAlign, ItemDensity, ItemSwipeAction, ItemSwipeActions, ItemSwipeActionVariant, ItemSwipeBehavior, } from './Item.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Kbd/Kbd.d.ts

@@ -9,7 +9,7 @@
  * - /packages/cli/assets/templates/blocks/components/Kbd/ (showcase blocks)
  */
 import React from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export interface KbdProps extends BaseProps<HTMLSpanElement> {
     ref?: React.Ref<HTMLSpanElement>;
     /**

package/dist/Kbd/index.d.ts

@@ -4,6 +4,6 @@
  * @output Exports public API for @astryxdesign/core Kbd
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  */
-export { Kbd } from './Kbd';
-export type { KbdProps } from './Kbd';
+export { Kbd } from './Kbd.js';
+export type { KbdProps } from './Kbd.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Layer/LayerProvider.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { type LayerInset, type LayerToastConfig } from './LayerContext';
+import { type LayerInset, type LayerToastConfig } from './LayerContext.js';
 export interface LayerProviderProps {
     children: ReactNode;
     /** Toast configuration. Omit to use defaults. */

package/dist/Layer/index.d.ts

@@ -11,22 +11,22 @@
  * New code should import from @astryxdesign/core/Popover, @astryxdesign/core/HoverCard,
  * or @astryxdesign/core/Tooltip directly.
  */
-export { useLayer } from './useLayer';
-export type { LayerAlignment, LayerPlacement, ContextRenderProps, FixedRenderProps, ContextLayerOptions, FixedLayerOptions, ContextLayerReturn, FixedLayerReturn, } from './useLayer';
-export { useLayerDismissal } from './useLayerDismissal';
-export type { LayerEscapeBehavior, UseLayerDismissalOptions, UseLayerDismissalReturn, } from './useLayerDismissal';
-export { LayerDepthProvider } from './LayerDepthContext';
-export { useTouchTrigger, isActionTrigger } from './useTouchTrigger';
-export type { LayerTouchTrigger, UseTouchTriggerOptions, UseTouchTriggerReturn, } from './useTouchTrigger';
-export { LayerProvider } from './LayerProvider';
-export type { LayerProviderProps } from './LayerProvider';
-export { LayerContext, useLayerContext } from './LayerContext';
-export type { LayerContextValue, LayerInset, LayerToastConfig, } from './LayerContext';
-export { layerAnimations } from './layerAnimations.stylex';
-export { usePopover, Popover } from '../Popover';
-export type { UsePopoverOptions, UsePopoverReturn, PopoverProps, } from '../Popover';
-export { useHoverCard, HoverCard } from '../HoverCard';
-export type { HoverCardFocusTrigger, HoverCardTouchTrigger, HoverCardOptions, HoverCardReturn, HoverCardProps, } from '../HoverCard';
-export { useTooltip, Tooltip } from '../Tooltip';
-export type { TooltipFocusTrigger, TooltipTouchTrigger, TooltipOptions, TooltipReturn, TooltipProps, } from '../Tooltip';
+export { useLayer } from './useLayer.js';
+export type { LayerAlignment, LayerPlacement, ContextRenderProps, FixedRenderProps, ContextLayerOptions, FixedLayerOptions, ContextLayerReturn, FixedLayerReturn, } from './useLayer.js';
+export { useLayerDismissal } from './useLayerDismissal.js';
+export type { LayerEscapeBehavior, UseLayerDismissalOptions, UseLayerDismissalReturn, } from './useLayerDismissal.js';
+export { LayerDepthProvider } from './LayerDepthContext.js';
+export { useTouchTrigger, isActionTrigger } from './useTouchTrigger.js';
+export type { LayerTouchTrigger, UseTouchTriggerOptions, UseTouchTriggerReturn, } from './useTouchTrigger.js';
+export { LayerProvider } from './LayerProvider.js';
+export type { LayerProviderProps } from './LayerProvider.js';
+export { LayerContext, useLayerContext } from './LayerContext.js';
+export type { LayerContextValue, LayerInset, LayerToastConfig, } from './LayerContext.js';
+export { layerAnimations } from './layerAnimations.stylex.js';
+export { usePopover, Popover } from '../Popover/index.js';
+export type { UsePopoverOptions, UsePopoverReturn, PopoverProps, } from '../Popover/index.js';
+export { useHoverCard, HoverCard } from '../HoverCard/index.js';
+export type { HoverCardFocusTrigger, HoverCardTouchTrigger, HoverCardOptions, HoverCardReturn, HoverCardProps, } from '../HoverCard/index.js';
+export { useTooltip, Tooltip } from '../Tooltip/index.js';
+export type { TooltipFocusTrigger, TooltipTouchTrigger, TooltipOptions, TooltipReturn, TooltipProps, } from '../Tooltip/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Layer/layerInset.d.ts

@@ -8,7 +8,7 @@
  *   prop is the public surface.
  */
 import type { CSSProperties } from 'react';
-import type { LayerInset } from './LayerContext';
+import type { LayerInset } from './LayerContext.js';
 /**
  * The inline custom properties that carry a declared inset to the element
  * whose gutter reads them — the layer, or the toast viewport. One property

package/dist/Layer/layerSlideRules.d.ts

@@ -22,7 +22,7 @@
  * layer: a sibling would change what a parent's last child is, and text
  * inside a role-bearing layer would name it to assistive technology.
  */
-import type { LayerAlignment, LayerPlacement } from './useLayer';
+import type { LayerAlignment, LayerPlacement } from './useLayer.js';
 /** The custom property a layer writes its anchor clearance to. */
 export declare const LAYER_CLEARANCE_PROPERTY = "--_astryx-layer-clearance";
 type Side = 'same' | 'opposite';

package/dist/Layer/modalOutlet.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file modalOutlet.ts
- * @input The open Dialog `<dialog>` elements
+ * @input The open Dialog and scrim BottomSheet `<dialog>` elements
  * @output Exports useModalOutlet (a modal supplies its outlet),
  *   getActiveModalOutlet, and subscribeModalOutlets (a global host follows
  *   the latest one)

package/dist/Layer/modalOutlet.js

@@ -4,7 +4,7 @@
 
 /**
  * @file modalOutlet.ts
- * @input The open Dialog `<dialog>` elements
+ * @input The open Dialog and scrim BottomSheet `<dialog>` elements
  * @output Exports useModalOutlet (a modal supplies its outlet),
  *   getActiveModalOutlet, and subscribeModalOutlets (a global host follows
  *   the latest one)

package/dist/Layer/useLayerDismissal.d.ts

@@ -1,4 +1,4 @@
-import { type LayerEscapeBehavior } from './layerStack';
+import { type LayerEscapeBehavior } from './layerStack.js';
 export type { LayerEscapeBehavior };
 export interface UseLayerDismissalOptions {
     /**

package/dist/Layer/useTouchTrigger.d.ts

@@ -20,6 +20,17 @@
  * lose, so the tap opens the layer and the next tap outside dismisses it. That
  * is `auto`; `tap` and `none` state the choice outright, which is what an
  * icon-button whose only job is to reveal the layer needs.
+ *
+ * A touch decides nothing until it is a tap. A finger landing on the trigger
+ * may be starting a scroll, a pinch or a long press, and only the browser
+ * knows which once the finger moves or lifts. Its `click` is that verdict (on
+ * iOS it comes from UIKit's own tap recognizer), so the press only records
+ * itself and the tap's `click` opens or closes the layer; a press the browser
+ * takes for scrolling ends in `pointercancel` and never gets there. That is
+ * how a UIKit tap behaves: it recognizes when the finger lifts and fails once
+ * the scroll view claims the touch. The tap outside that closes a tap-opened
+ * layer counts when the finger lifts too, or when a scroll takes the touch,
+ * which is when UIKit dismisses a popover.
  */
 import { type RefObject } from 'react';
 /**
@@ -86,7 +97,9 @@ export interface UseTouchTriggerReturn {
     /**
      * Attach to the trigger. Returns true when the press was a touch one and
      * this hook has dealt with it, meaning the caller's own pointer-down
-     * behavior must not also run.
+     * behavior must not also run. A touch press opens or closes nothing by
+     * itself: the hook waits for that press's tap (the `click` the browser
+     * fires when the finger lifts without scrolling) on the same element.
      */
     handlePointerDown: (event: PointerEvent) => boolean;
     /** Forget a tap-open. Call from every other close path (Escape, controlled). */

package/dist/Layer/useTouchTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTouchTrigger.d.ts","sourceRoot":"","sources":["../../src/Layer/useTouchTrigger.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAMrE;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAmCxD;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAoB7D;AAeD,MAAM,WAAW,sBAAsB;IACrC,sDAAsD;IACtD,YAAY,EAAE,iBAAiB,CAAC;IAEhC,oDAAoD;IACpD,SAAS,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAC;IAEtB,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAEhB,oDAAoD;IACpD,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C,uDAAuD;IACvD,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB,mCAAmC;IACnC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,iBAAiB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAEtC;;;;OAIG;IACH,kBAAkB,EAAE,MAAM,OAAO,CAAC;IAElC;;;;OAIG;IACH,kBAAkB,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAElD;;;;OAIG;IACH,iBAAiB,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,OAAO,CAAC;IAEpD,gFAAgF;IAChF,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,sBAAsB,GAC9B,qBAAqB,CA+JvB"}
+{"version":3,"file":"useTouchTrigger.d.ts","sourceRoot":"","sources":["../../src/Layer/useTouchTrigger.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAOrE;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAmCxD;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAoB7D;AAeD,MAAM,WAAW,sBAAsB;IACrC,sDAAsD;IACtD,YAAY,EAAE,iBAAiB,CAAC;IAEhC,oDAAoD;IACpD,SAAS,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAC;IAEtB,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAEhB,oDAAoD;IACpD,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C,uDAAuD;IACvD,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB,mCAAmC;IACnC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,iBAAiB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAEtC;;;;OAIG;IACH,kBAAkB,EAAE,MAAM,OAAO,CAAC;IAElC;;;;OAIG;IACH,kBAAkB,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAElD;;;;;;OAMG;IACH,iBAAiB,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,OAAO,CAAC;IAEpD,gFAAgF;IAChF,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,sBAAsB,GAC9B,qBAAqB,CAuMvB"}

package/dist/Layer/useTouchTrigger.js

@@ -24,8 +24,20 @@
  * lose, so the tap opens the layer and the next tap outside dismisses it. That
  * is `auto`; `tap` and `none` state the choice outright, which is what an
  * icon-button whose only job is to reveal the layer needs.
+ *
+ * A touch decides nothing until it is a tap. A finger landing on the trigger
+ * may be starting a scroll, a pinch or a long press, and only the browser
+ * knows which once the finger moves or lifts. Its `click` is that verdict (on
+ * iOS it comes from UIKit's own tap recognizer), so the press only records
+ * itself and the tap's `click` opens or closes the layer; a press the browser
+ * takes for scrolling ends in `pointercancel` and never gets there. That is
+ * how a UIKit tap behaves: it recognizes when the finger lifts and fails once
+ * the scroll view claims the touch. The tap outside that closes a tap-opened
+ * layer counts when the finger lifts too, or when a scroll takes the touch,
+ * which is when UIKit dismisses a popover.
  */
 import { useCallback, useEffect, useRef } from 'react';
+import { currentGesture } from "./gestureCounter.js";
 import { getInteractionModality, useInteractionModalityTracking } from "../utils/interactionModality.js";
 
 /**
@@ -144,6 +156,9 @@ export function useTouchTrigger(options) {
   // pointer-leave, and a controlled one is not ours to close.
   const isTapOpenRef = useRef(false);
   const outsideListenerRef = useRef(null);
+  // A touch press on the trigger still waiting for its tap: calling it stops
+  // waiting. The next press, a cancel, the tap itself or unmounting calls it.
+  const forgetPendingTapRef = useRef(null);
   useInteractionModalityTracking();
   const disarmOutsideDismiss = useCallback(() => {
     isTapOpenRef.current = false;
@@ -152,22 +167,26 @@ export function useTouchTrigger(options) {
       return;
     }
     outsideListenerRef.current = null;
-    document.removeEventListener('pointerdown', listener, true);
+    document.removeEventListener('pointerup', listener, true);
+    document.removeEventListener('pointercancel', listener, true);
   }, []);
 
   // Capture phase, so a trigger that stops propagation cannot strand an open
-  // layer. The opening tap's own capture phase at the document has already
-  // passed by the time this runs, so the listener never sees it.
+  // layer. It is armed by the opening tap's `click`, after that tap's own
+  // `pointerup`, so the listener never sees the tap that opened the layer.
+  // A tap outside counts when it lifts (`pointerup`); a scroll or pinch that
+  // starts outside counts as soon as the browser takes it (`pointercancel`).
   const armOutsideDismiss = useCallback(() => {
     isTapOpenRef.current = true;
     if (outsideListenerRef.current != null) {
       return;
     }
-    const handleOutsidePointerDown = event => {
+    const handleOutsidePointerEnd = event => {
       const target = event.target;
       if (target != null) {
-        // The trigger's own handler owns the toggle.
-        if (triggerRef.current?.contains(target) === true) {
+        // A tap on the trigger is the trigger's to toggle. A scroll that
+        // starts there is a scroll outside the layer, and it does close it.
+        if (event.type === 'pointerup' && triggerRef.current?.contains(target) === true) {
           return;
         }
         // Hover card content is interactive; a tap inside it is not a dismiss.
@@ -178,10 +197,12 @@ export function useTouchTrigger(options) {
       disarmOutsideDismiss();
       hideRef.current();
     };
-    outsideListenerRef.current = handleOutsidePointerDown;
-    document.addEventListener('pointerdown', handleOutsidePointerDown, true);
+    outsideListenerRef.current = handleOutsidePointerEnd;
+    document.addEventListener('pointerup', handleOutsidePointerEnd, true);
+    document.addEventListener('pointercancel', handleOutsidePointerEnd, true);
   }, [triggerRef, disarmOutsideDismiss]);
   useEffect(() => disarmOutsideDismiss, [disarmOutsideDismiss]);
+  useEffect(() => () => forgetPendingTapRef.current?.(), []);
   const isTouchInteraction = useCallback(() => isTouchPointerRef.current && getInteractionModality() === 'pointer', []);
   const handlePointerEnter = useCallback(event => {
     // Only a finger is hoverless on arrival. A pen in detection range hovers
@@ -190,19 +211,18 @@ export function useTouchTrigger(options) {
     // presses is a tap, and `handlePointerDown` still reads it as one.
     isTouchPointerRef.current = event.pointerType === 'touch';
   }, []);
-  const handlePointerDown = useCallback(event => {
-    const isTouch = TOUCH_POINTER_TYPES.has(event.pointerType);
-    isTouchPointerRef.current = isTouch;
-    if (!isTouch || isControlled) {
-      return false;
-    }
+
+  // What a tap on the trigger does. It runs from the tap's `click`, after the
+  // render that armed it, so it reads the latest props through this ref.
+  const answerTapRef = useRef(() => {});
+  answerTapRef.current = () => {
     const trigger = triggerRef.current;
     const mode = touchTrigger === 'auto' ? trigger != null && isActionTrigger(trigger) ? 'none' : 'tap' : touchTrigger;
     if (mode === 'none' || !isEnabled) {
       // A layer left open by an earlier tap must not survive the next one.
       disarmOutsideDismiss();
       hide();
-      return true;
+      return;
     }
 
     // A lazily mounted layer reports `isOpen` a tick after `show()`, so the
@@ -210,12 +230,47 @@ export function useTouchTrigger(options) {
     if (isOpenRef.current || isTapOpenRef.current) {
       disarmOutsideDismiss();
       hide();
-      return true;
+      return;
     }
     armOutsideDismiss();
     show();
+  };
+  const handlePointerDown = useCallback(event => {
+    const isTouch = TOUCH_POINTER_TYPES.has(event.pointerType);
+    isTouchPointerRef.current = isTouch;
+    // A new press replaces one that never became a tap.
+    forgetPendingTapRef.current?.();
+    if (!isTouch || isControlled) {
+      return false;
+    }
+    const trigger = event.currentTarget instanceof Element ? event.currentTarget : triggerRef.current;
+    if (trigger == null) {
+      return true;
+    }
+
+    // The tap must belong to this press. A key press or a new pointer press
+    // advances the gesture, so a keyboard activation that later fires
+    // `click` on the trigger (Enter on a button) is not mistaken for it.
+    const gesture = currentGesture();
+    const forget = () => {
+      trigger.removeEventListener('click', handleTap);
+      trigger.removeEventListener('pointercancel', forget);
+      if (forgetPendingTapRef.current === forget) {
+        forgetPendingTapRef.current = null;
+      }
+    };
+    const handleTap = () => {
+      forget();
+      if (currentGesture() === gesture) {
+        answerTapRef.current();
+      }
+    };
+    trigger.addEventListener('click', handleTap);
+    // The browser took the touch for a scroll or a pinch: no tap is coming.
+    trigger.addEventListener('pointercancel', forget);
+    forgetPendingTapRef.current = forget;
     return true;
-  }, [touchTrigger, isEnabled, isControlled, triggerRef, show, hide, armOutsideDismiss, disarmOutsideDismiss]);
+  }, [isControlled, triggerRef]);
 
   // A layer closed by any other path (Escape, a consumer, the browser) leaves
   // no tap-open to dismiss. Only a true open→closed transition counts: a

package/dist/Layout/Layout.d.ts

@@ -13,8 +13,8 @@
  * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { SizeValue, SpacingStep } from '../utils/types';
+import type { BaseProps } from '../BaseProps.js';
+import type { SizeValue, SpacingStep } from '../utils/types.js';
 /**
  * Height behavior for the layout.
  * - `fill`: Layout fills container height, content scrolls internally (default)

package/dist/Layout/LayoutContent.d.ts

@@ -11,8 +11,8 @@
  * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
  */
 import type { AriaRole, ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { SpacingStep } from '../utils/types';
+import type { BaseProps } from '../BaseProps.js';
+import type { SpacingStep } from '../utils/types.js';
 export interface LayoutContentProps extends BaseProps<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
     /**

package/dist/Layout/LayoutFooter.d.ts

@@ -11,8 +11,8 @@
  * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
  */
 import type { AriaRole, ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { SizeValue, SpacingStep } from '../utils/types';
+import type { BaseProps } from '../BaseProps.js';
+import type { SizeValue, SpacingStep } from '../utils/types.js';
 export interface LayoutFooterProps extends BaseProps<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
     /**

package/dist/Layout/LayoutHeader.d.ts

@@ -12,8 +12,8 @@
  * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
  */
 import type { AriaRole, ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { SizeValue, SpacingStep } from '../utils/types';
+import type { BaseProps } from '../BaseProps.js';
+import type { SizeValue, SpacingStep } from '../utils/types.js';
 export interface LayoutHeaderProps extends BaseProps<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
     /**

package/dist/Layout/LayoutPanel.d.ts

@@ -11,9 +11,9 @@
  * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
  */
 import type { AriaRole, ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { SizeValue, SpacingStep } from '../utils/types';
-import type { ResizableProps } from '../Resizable/useResizable';
+import type { BaseProps } from '../BaseProps.js';
+import type { SizeValue, SpacingStep } from '../utils/types.js';
+import type { ResizableProps } from '../Resizable/useResizable.js';
 export interface LayoutPanelProps extends BaseProps<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
     /**