@astryxdesign/core 0.7.4 → 0.7.5-canary.0418c47

package/dist/NumberInput/NumberInput.js

@@ -17,7 +17,7 @@
  * - /apps/storybook/stories/NumberInput.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/NumberInput/ (showcase blocks)
  */
-import { useId, useState, useMemo, useCallback, useRef } from 'react';
+import { use, useId, useState, useMemo, useCallback, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, spacingVars, typographyVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
@@ -26,13 +26,16 @@ import { Icon, renderIconSlot } from "../Icon/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { getInputARIA } from "../utils/index.js";
+import { joinAriaIDs } from "../utils/inputAria.js";
 import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { usePressFeedback } from "../hooks/usePressFeedback.js";
+import { inputDisabledFocusStyles } from "../Field/inputDisabledFocus.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
 import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
+import { InputGroupInternalContext } from "../InputGroup/InputGroupInternalContext.js";
 
 // Public padding tokens for the `number-input` theme target. A theme writes an
 // ordinary `padding` (in ANY spelling — the shorthand, `paddingBlock`, or a
@@ -118,7 +121,7 @@ const sizeStyles = {
     $$css: true
   }
 };
-import { groupStyles } from "../InputGroup/groupStyles.js";
+import { groupStyles, inputGroupItemProps } from "../InputGroup/groupStyles.js";
 
 // Re-export shared types for convenience
 
@@ -205,7 +208,7 @@ export function NumberInput({
   description,
   isOptional = false,
   isRequired = false,
-  isDisabled = false,
+  isDisabled: isDisabledProp = false,
   isReadOnly = false,
   disabledMessage,
   startIcon,
@@ -243,6 +246,7 @@ export function NumberInput({
   ref,
   id: idProp,
   'aria-describedby': ariaDescribedByProp,
+  'aria-labelledby': ariaLabelledByProp,
   ...restProps
 }) {
   const {
@@ -263,6 +267,7 @@ export function NumberInput({
   const size = useSize(sizeProp, 'md');
   const generatedID = useId();
   const id = idProp ?? generatedID;
+  const fieldLabelID = useId();
   const inputLabelID = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
@@ -270,17 +275,21 @@ export function NumberInput({
   const inputRef = useRef(null);
   const containerRef = useRef(null);
   const inputGroup = useInputGroup();
+  const inputGroupState = use(InputGroupInternalContext);
+  const isDisabled = isDisabledProp || inputGroupState.isDisabled;
 
   // Pending input while user is typing (null = show formatted value)
   const [pendingInput, setPendingInput] = useState(null);
   const [isFocused, setIsFocused] = useState(false);
 
-  // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
-  // tooltip listeners attach to the input container (which already exists) and
+  // Disabled-reason tooltip. The tooltip listeners attach to the input container (which already exists) and
   // the input stays perceivable via aria-disabled instead of the native
   // disabled attribute. The field is made read-only so it can't be typed into,
   // and value mutation is blocked by the isDisabled guard in the handlers.
   const showsDisabledMessage = isDisabled && !!disabledMessage;
+  // A disabled field keeps its tab stop but, like a natively disabled one,
+  // runs no caller event handler other than focus and blur (`spec:AST-085` FR2).
+  const fieldProps = isDisabled ? Object.fromEntries(Object.entries(rest).filter(([key]) => !/^on[A-Z]/.test(key) || /^on(Focus|Blur)/.test(key))) : rest;
   const disabledMessageTooltip = useTooltip({
     placement: 'above',
     // The container div is not naturally focusable; focusin bubbles up from
@@ -306,6 +315,9 @@ export function NumberInput({
   // The tooltip variant renders no message box; describe the input by the
   // tooltip's content instead so the status is still announced.
   statusTooltipDescribedBy, units ? unitsID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
+  // A caller aria-labelledby names the input together with the field's own
+  // label (the Field label standalone, the group and input labels in a group).
+  const inputLabelledBy = ariaLabelledByProp != null ? joinAriaIDs(ariaLabelledBy ?? fieldLabelID, ariaLabelledByProp) : ariaLabelledBy;
   const parseInput = useCallback(text => parseNumberInput(text, {
     min,
     max,
@@ -359,6 +371,12 @@ export function NumberInput({
     if (pendingInput === null) {
       return;
     }
+    if (isDisabled) {
+      // A field disabled mid-entry commits nothing; its draft is dropped, as
+      // a natively disabled field's was (spec:AST-085 FR2).
+      setPendingInput(null);
+      return;
+    }
     const decision = resolveNumberInputCommit(pendingInput, {
       min,
       max,
@@ -376,7 +394,7 @@ export function NumberInput({
     } else if (decision.type === 'commit' && decision.value !== value) {
       onChange(decision.value);
     }
-  }, [hasClear, isIntegerOnly, locale, max, min, onChange, pendingInput, value]);
+  }, [hasClear, isDisabled, isIntegerOnly, locale, max, min, onChange, pendingInput, value]);
 
   // Blur ends the edit and displays the resulting committed value.
   const handleBlur = useCallback(e => {
@@ -419,6 +437,13 @@ export function NumberInput({
 
   // Handle keyboard events
   const handleKeyDown = useCallback(e => {
+    if (isDisabled) {
+      // A read-only field still submits its form on Enter.
+      if (e.key === 'Enter') {
+        e.preventDefault();
+      }
+      return;
+    }
     // The field is type="text" for formatted display, so an IME can compose
     // into it: Enter commits the candidate and the arrows walk the candidate
     // window. The composing keydown fires before compositionend, so without
@@ -442,7 +467,7 @@ export function NumberInput({
       onEnter?.();
     }
     onKeyDown?.(e);
-  }, [commitPendingInput, onEnter, onKeyDown, stepValue]);
+  }, [commitPendingInput, isDisabled, onEnter, onKeyDown, stepValue]);
 
   // React's delegated wheel listener can be passive, so use a native,
   // explicitly non-passive listener to prevent page scrolling only when this
@@ -479,12 +504,13 @@ export function NumberInput({
     if (!e || e.detail === 0) {
       inputRef.current?.focus();
     } else {
-      // Defer focus restoration past the button's unmount task so iOS Safari
-      // and touch browsers don't jump the page scroll to 0 on tap.
-      requestAnimationFrame(() => {
-        inputRef.current?.focus({
-          preventScroll: true
-        });
+      // Focus inside the tap: iOS Safari brings up its keyboard only for a
+      // focus made while handling the touch, so a field the tap reaches
+      // unfocused gets its keyboard, as UIKit's clear button makes the
+      // field first responder. `preventScroll` keeps a scrolled page where
+      // it is.
+      inputRef.current?.focus({
+        preventScroll: true
       });
     }
   }, [hasClear, onChange]);
@@ -508,12 +534,13 @@ export function NumberInput({
     },
     onClick: handleWrapperClick,
     onMouseUp: handleWrapperMouseUp,
+    ...(inputGroup ? inputGroupItemProps : undefined),
     ...mergeProps(themeProps('number-input', {
       size,
       status: status?.type ?? null,
       disabled: isDisabled ? 'disabled' : null,
       readonly: isReadOnly ? 'readonly' : null
-    }), stylex.props(inputWrapperStyles.base, styles.wrapper, hasNumberSteppers && styles.wrapperWithNumberSteppers, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
+    }), stylex.props(inputWrapperStyles.base, styles.wrapper, hasNumberSteppers && styles.wrapperWithNumberSteppers, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, isDisabled && inputDisabledFocusStyles.ring, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
     children: [startIcon && renderIconSlot(startIcon, {
       size: 'sm',
       color: 'secondary'
@@ -521,7 +548,7 @@ export function NumberInput({
       id: inputLabelID,
       children: label
     }), /*#__PURE__*/_jsx("input", {
-      ...rest,
+      ...fieldProps,
       ref: mergedInputRef,
       id: id,
       name: isDisabled || formatValue ? undefined : htmlName,
@@ -535,13 +562,12 @@ export function NumberInput({
       onBlur: handleBlur,
       onKeyDown: handleKeyDown,
       placeholder: placeholder
-      // With a disabledMessage the input keeps focusability via aria-disabled
-      // so the reason is focus-discoverable; readOnly + the handler guards
-      // keep the value from changing.
+      // A disabled input keeps its place in the tab order (spec:AST-085):
+      // aria-disabled instead of the native attribute, with readOnly + the
+      // handler guards keeping the value from changing.
       ,
-      disabled: isDisabled && !showsDisabledMessage,
-      "aria-disabled": showsDisabledMessage ? 'true' : undefined,
-      readOnly: isReadOnly || showsDisabledMessage || undefined,
+      "aria-disabled": isDisabled ? 'true' : undefined,
+      readOnly: isReadOnly || isDisabled || undefined,
       autoFocus: hasAutoFocus,
       "data-autofocus": hasAutoFocus || undefined,
       "aria-valuemin": min ?? undefined,
@@ -554,7 +580,7 @@ export function NumberInput({
       "aria-describedby": [ariaDescribedByProp, ariaDescribedBy].filter(Boolean).join(' ') || undefined,
       "aria-required": isEffectivelyRequired ? 'true' : undefined,
       "aria-invalid": status?.type === 'error' || !isInputValid ? 'true' : undefined,
-      "aria-labelledby": ariaLabelledBy,
+      "aria-labelledby": inputLabelledBy,
       ...{
         0: {
           className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 xf9zqsd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
@@ -597,12 +623,17 @@ export function NumberInput({
         type: "button",
         tabIndex: -1,
         ...pressable,
-        disabled: isDisabled || isReadOnly || !canIncrement,
+        "aria-disabled": isDisabled || isReadOnly || !canIncrement || undefined,
         "aria-label": t('@astryx.numberInput.incrementLabel', {
           label
         }),
         onPointerDown: event => event.preventDefault(),
         onClick: () => {
+          // An aria-disabled stepper does nothing, as a natively disabled
+          // one did (spec:AST-085 FR2).
+          if (isDisabled || isReadOnly || !canIncrement) {
+            return;
+          }
           inputRef.current?.focus();
           stepValue(1);
         },
@@ -617,12 +648,17 @@ export function NumberInput({
         type: "button",
         tabIndex: -1,
         ...pressable,
-        disabled: isDisabled || isReadOnly || !canDecrement,
+        "aria-disabled": isDisabled || isReadOnly || !canDecrement || undefined,
         "aria-label": t('@astryx.numberInput.decrementLabel', {
           label
         }),
         onPointerDown: event => event.preventDefault(),
         onClick: () => {
+          // An aria-disabled stepper does nothing, as a natively disabled
+          // one did (spec:AST-085 FR2).
+          if (isDisabled || isReadOnly || !canDecrement) {
+            return;
+          }
           inputRef.current?.focus();
           stepValue(-1);
         },
@@ -646,6 +682,7 @@ export function NumberInput({
     isLabelHidden: isLabelHidden,
     description: description,
     inputID: id,
+    labelID: ariaLabelledByProp != null ? fieldLabelID : undefined,
     descriptionID: description ? descriptionID : undefined,
     isOptional: isOptional,
     isRequired: isRequired,

package/dist/NumberInput/index.d.ts

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

package/dist/NumberInput/numberInputCommit.d.ts

@@ -10,7 +10,7 @@
  * - /packages/core/src/Table/plugins/filtering/useTableFiltering.tsx
  * - /packages/core/src/PowerSearch/PowerSearchValueEditor.tsx
  */
-import type { Locale } from '../i18n';
+import type { Locale } from '../i18n/index.js';
 interface NumberInputValidationOptions {
     min?: number | null;
     max?: number | null;

package/dist/NumberInput/numberParser.d.ts

@@ -32,7 +32,7 @@
  * - /packages/core/src/NumberInput/numberParser.test.ts
  * - /packages/core/src/NumberInput/numberParser.docblock.test.ts
  */
-import type { Locale } from '../i18n';
+import type { Locale } from '../i18n/index.js';
 /**
  * Read a number out of text the way a person in `locale` writes one: their
  * grouping and decimal separators, their group sizes, their digit script, an

package/dist/Outline/Outline.d.ts

@@ -1,6 +1,6 @@
-import type { BaseProps } from '../BaseProps';
-import type { OutlineItem } from './types';
-export type { OutlineItem } from './types';
+import type { BaseProps } from '../BaseProps.js';
+import type { OutlineItem } from './types.js';
+export type { OutlineItem } from './types.js';
 export interface OutlineProps extends BaseProps<HTMLElement> {
     /** Ref forwarded to the root nav element. */
     ref?: React.Ref<HTMLElement>;

package/dist/Outline/index.d.ts

@@ -6,11 +6,11 @@
  *
  * SYNC: When modified, update /packages/core/src/Outline/Outline.doc.mjs
  */
-export { Outline } from './Outline';
-export type { OutlineProps } from './Outline';
-export type { OutlineItem } from './types';
-export { parseOutlineFromMarkdown } from './parseOutlineFromMarkdown';
-export type { ParseOutlineFromMarkdownOptions } from './parseOutlineFromMarkdown';
-export { useOutlineFromMarkdown } from './useOutlineFromMarkdown';
-export { useOutlineFromDOM } from './useOutlineFromDOM';
+export { Outline } from './Outline.js';
+export type { OutlineProps } from './Outline.js';
+export type { OutlineItem } from './types.js';
+export { parseOutlineFromMarkdown } from './parseOutlineFromMarkdown.js';
+export type { ParseOutlineFromMarkdownOptions } from './parseOutlineFromMarkdown.js';
+export { useOutlineFromMarkdown } from './useOutlineFromMarkdown.js';
+export { useOutlineFromDOM } from './useOutlineFromDOM.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Outline/parseOutlineFromMarkdown.d.ts

@@ -1,5 +1,5 @@
-import type { MarkdownExtensionNode, MarkdownPluginEntry } from '../Markdown/plugins/protocol';
-import type { OutlineItem } from './types';
+import type { MarkdownExtensionNode, MarkdownPluginEntry } from '../Markdown/plugins/protocol.js';
+import type { OutlineItem } from './types.js';
 /**
  * Extract heading items from a Markdown string.
  *

package/dist/Outline/useOutlineFromDOM.d.ts

@@ -1,4 +1,4 @@
-import type { OutlineItem } from './types';
+import type { OutlineItem } from './types.js';
 /** Build outline items from h1-h6 elements inside a DOM container. */
 export declare function useOutlineFromDOM(containerRef: React.RefObject<HTMLElement | null>): OutlineItem[];
 //# sourceMappingURL=useOutlineFromDOM.d.ts.map

package/dist/Outline/useOutlineFromMarkdown.d.ts

@@ -1,6 +1,6 @@
-import type { ParseOutlineFromMarkdownOptions } from './parseOutlineFromMarkdown';
-import type { MarkdownExtensionNode } from '../Markdown/plugins/protocol';
-import type { OutlineItem } from './types';
+import type { ParseOutlineFromMarkdownOptions } from './parseOutlineFromMarkdown.js';
+import type { MarkdownExtensionNode } from '../Markdown/plugins/protocol.js';
+import type { OutlineItem } from './types.js';
 /** Extract a stable outline from a Markdown string. */
 export declare function useOutlineFromMarkdown<Node extends MarkdownExtensionNode = never>(markdown: string, options?: ParseOutlineFromMarkdownOptions<Node>): OutlineItem[];
 //# sourceMappingURL=useOutlineFromMarkdown.d.ts.map

package/dist/Outline/useScrollSpy.d.ts

@@ -1,4 +1,4 @@
-import type { OutlineItem } from './types';
+import type { OutlineItem } from './types.js';
 interface UseScrollSpyOptions {
     activeId?: string;
     items: OutlineItem[];

package/dist/OverflowList/OverflowList.d.ts

@@ -14,8 +14,8 @@
  * - /packages/cli/assets/templates/blocks/components/OverflowList/ (showcase blocks)
  */
 import { type ReactNode, type ReactElement } 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 OverflowItem {
     /** The React element for this item */
     child: ReactElement;

package/dist/OverflowList/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file OverflowList component barrel export
  */
-export { OverflowList } from './OverflowList';
-export type { OverflowListProps, OverflowItem } from './OverflowList';
+export { OverflowList } from './OverflowList.js';
+export type { OverflowListProps, OverflowItem } from './OverflowList.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Overlay/Overlay.d.ts

@@ -11,8 +11,8 @@
  * use the useOverlay hook directly.
  */
 import type { ReactNode, Ref } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { OverlayScrimMode, OverlayPosition, OverlayAlign, OverlayShowOn } from './OverlayScrim';
+import type { BaseProps } from '../BaseProps.js';
+import type { OverlayScrimMode, OverlayPosition, OverlayAlign, OverlayShowOn } from './OverlayScrim.js';
 export interface OverlayProps extends Pick<BaseProps<HTMLDivElement>, 'xstyle' | 'className' | 'style'> {
     /** Ref forwarded to the container element. */
     ref?: Ref<HTMLDivElement>;

package/dist/Overlay/index.d.ts

@@ -2,9 +2,9 @@
  * @file index.ts
  * @position Overlay barrel export
  */
-export { Overlay } from './Overlay';
-export type { OverlayProps } from './Overlay';
-export { useOverlay } from './useOverlay';
-export type { UseOverlayOptions, UseOverlayResult, OverlayContainerProps, } from './useOverlay';
-export type { OverlayScrimMode, OverlayPosition, OverlayAlign, OverlayShowOn, } from './OverlayScrim';
+export { Overlay } from './Overlay.js';
+export type { OverlayProps } from './Overlay.js';
+export { useOverlay } from './useOverlay.js';
+export type { UseOverlayOptions, UseOverlayResult, OverlayContainerProps, } from './useOverlay.js';
+export type { OverlayScrimMode, OverlayPosition, OverlayAlign, OverlayShowOn, } from './OverlayScrim.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Overlay/useOverlay.d.ts

@@ -12,7 +12,7 @@
  * and scrim rendering.
  */
 import { type ReactNode, type ReactElement, type MouseEvent } from 'react';
-import type { OverlayScrimMode, OverlayPosition, OverlayAlign, OverlayShowOn } from './OverlayScrim';
+import type { OverlayScrimMode, OverlayPosition, OverlayAlign, OverlayShowOn } from './OverlayScrim.js';
 export interface UseOverlayOptions {
     /** Content rendered inside the scrim overlay. */
     content?: ReactNode;

package/dist/Pagination/Pagination.d.ts

@@ -1,5 +1,5 @@
-import type { BaseProps } from '../BaseProps';
-import type { PaginationVariantMap } from './index';
+import type { BaseProps } from '../BaseProps.js';
+import type { PaginationVariantMap } from './index.js';
 /** Visual variant controlling what appears between prev/next buttons.
  * Extensible via module augmentation of PaginationVariantMap.
  */

package/dist/Pagination/index.d.ts

@@ -25,6 +25,6 @@ export interface PaginationVariantMap {
     input: true;
     none: true;
 }
-export { Pagination, generatePageRange } from './Pagination';
-export type { PaginationProps, PaginationVariant, PaginationSize, } from './Pagination';
+export { Pagination, generatePageRange } from './Pagination.js';
+export type { PaginationProps, PaginationVariant, PaginationSize, } from './Pagination.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Popover/Popover.d.ts

@@ -6,16 +6,32 @@
  *
  * For hover-triggered overlays, use HoverCard instead.
  *
+ * `presentation` chooses the surface, with the vocabulary DropdownMenu and
+ * Selector use: the anchored popover (the default), a BottomSheet, or
+ * `adaptive` — a BottomSheet on a compact touch screen and the popover
+ * elsewhere (the shared adaptive presentation policy), which is what iOS does
+ * with a popover unless the app keeps it. The surface is chosen when the
+ * popover opens; whichever is open stays until it closes. The BottomSheet
+ * loads on demand (lazyPopoverBottomSheet.ts).
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Popover/Popover.test.tsx
  * - /packages/core/src/Popover/index.ts
+ * - /packages/core/src/Popover/PopoverPresentation.test.tsx
  * - /apps/storybook/stories/Popover.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Popover/ (showcase blocks)
  */
 import React, { type ReactElement, type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { LayerAlignment, LayerPlacement } from '../Layer/useLayer';
-import type { SpacingStep } from '../utils/types';
+import type { AdaptivePresentation } from '../hooks/useAdaptivePresentation.js';
+import type { BaseProps } from '../BaseProps.js';
+import type { LayerAlignment, LayerPlacement } from '../Layer/useLayer.js';
+import type { SpacingStep } from '../utils/types.js';
+/**
+ * The surface a Popover presents its content on: anchored to the trigger, in
+ * a BottomSheet, or adaptive (a BottomSheet on a compact touch screen, the
+ * popover elsewhere).
+ */
+export type PopoverPresentation = AdaptivePresentation;
 /**
  * Props passed to render-prop children for explicit trigger wiring.
  */
@@ -127,7 +143,9 @@ export interface PopoverProps extends Pick<BaseProps, 'xstyle' | 'className' | '
     padding?: SpacingStep;
     /**
      * Accessible label for the popover dialog.
-     * Recommended for accessibility when `role` is `'dialog'`.
+     * Recommended for accessibility when `role` is `'dialog'`. A sheet
+     * (`presentation`) without one is named by the trigger's text, so it is
+     * never an unnamed dialog.
      */
     label?: string;
     /**
@@ -184,6 +202,27 @@ export interface PopoverProps extends Pick<BaseProps, 'xstyle' | 'className' | '
      * @default true
      */
     hasEscapeDismiss?: boolean;
+    /**
+     * The surface that holds the content. `'popover'` anchors it to the
+     * trigger. `'bottom-sheet'` presents it in a modal BottomSheet, labeled
+     * by `label`. `'adaptive'` presents the BottomSheet on a compact touch
+     * screen (a coarse pointer on a screen the theme counts as compact:
+     * narrower than its `md` width point or shorter than 500px, so a phone in
+     * either orientation) and the anchored popover elsewhere, which is what iOS
+     * does with a popover by default.
+     *
+     * In a sheet, `placement`, `alignment`, `width`, `role`, `isModal` and
+     * `hasAutoFocus` do not apply (the sheet is a modal dialog with its own
+     * focus handling); `xstyle`, `className` and `style` style the sheet's
+     * panel, as they style the anchored surface; `padding` insets the
+     * sheet's content. The sheet always light-dismisses (a tap outside it or a
+     * swipe down closes it, whatever `hasLightDismiss` says), Escape follows
+     * `hasEscapeDismiss`, and the fallback close stays hidden as on the
+     * anchored surface. The surface is
+     * chosen when the popover opens and kept until it closes.
+     * @default 'popover'
+     */
+    presentation?: PopoverPresentation;
     /**
      * Test ID for the popover container.
      */
@@ -224,7 +263,7 @@ export interface PopoverProps extends Pick<BaseProps, 'xstyle' | 'className' | '
  * />
  * ```
  */
-export declare function Popover({ children, anchorRef, content, placement, alignment, isOpen, onOpenChange, isEnabled, width, padding, label, role, isModal, hasCloseButton, closeButtonLabel, hasAutoFocus, hasLightDismiss, hasEscapeDismiss, xstyle, className, style, 'data-testid': testId, }: PopoverProps): ReactElement;
+export declare function Popover({ children, anchorRef, content, placement, alignment, isOpen, onOpenChange, isEnabled, width, padding, label, role, isModal, hasCloseButton, closeButtonLabel, hasAutoFocus, hasLightDismiss, hasEscapeDismiss, presentation, xstyle, className, style, 'data-testid': testId, }: PopoverProps): ReactElement;
 export declare namespace Popover {
     var displayName: string;
 }

package/dist/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"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"}