@mond-design-system/react 5.0.0 → 6.0.0

package/dist/index.d.cts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import { CSSProperties, HTMLAttributes, JSX, ReactElement, Ref, ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithRef, MouseEventHandler, InputHTMLAttributes, HTMLInputTypeAttribute, TextareaHTMLAttributes, SelectHTMLAttributes, RefObject, KeyboardEvent } from 'react';
+import { CSSProperties, HTMLAttributes, JSX, ReactElement, Ref, ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithRef, MouseEventHandler, InputHTMLAttributes, HTMLInputTypeAttribute, TextareaHTMLAttributes, SelectHTMLAttributes, RefObject, MouseEvent, KeyboardEvent, PointerEvent, FocusEvent } from 'react';
+import { Placement } from '@floating-ui/dom';
 
 /**
  * Join class names, dropping anything falsy.
@@ -959,8 +960,7 @@ declare function ListItem({ title, description, leading, trailing, actions, onCl
 
 interface DataColumn<Row> {
     key: string;
-    /** Read in the header row, and echoed beside the cell once the table has
-        folded into cards. */
+    /** Read in the header row. */
     header: ReactNode;
     /** CSS width for the column, applied through the colgroup. */
     width?: string;
@@ -1011,11 +1011,13 @@ type DataTableProps<Row> = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
     ref?: Ref<HTMLDivElement>;
 } & DataTableSelection;
 /**
- * Rows and columns, folded into cards on a narrow screen.
+ * Rows and columns, at every width.
  *
- * Below the wide breakpoint a table cannot be read across, so each row becomes
- * a card and every cell carries its column's header beside it. The markup is
- * one table either way: what changes is the layout, never the semantics.
+ * A table is for reading across a row and comparing down a column, and it stays
+ * one on a narrow screen rather than turning into something else: where the
+ * columns need more room than there is, the table pans sideways inside a box
+ * that takes focus. An app wanting cards on a phone builds cards — that is a
+ * different component, not this one wearing a second layout.
  *
  * ```tsx
  * <DataTable
@@ -1355,6 +1357,141 @@ declare function SheetFooter({ children }: {
     children: ReactNode;
 }): react.JSX.Element;
 
+type PopoverPlacement = Placement;
+interface PopoverProps {
+    open: boolean;
+    onClose: () => void;
+    /** The trigger the panel hangs off. It stays interactive while open. */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** Accessible name of the panel. */
+    label: string;
+    /** Side it prefers. It flips and slides to stay on screen. Default "bottom-start". */
+    placement?: PopoverPlacement;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Anchored, non-modal surface. The page behind it stays live and scrollable
+ * and the panel travels with the anchor; a press outside, Escape, or the
+ * trigger itself dismisses it.
+ *
+ * Modal by contrast: reach for Modal when the answer must come before anything
+ * else, and for Sheet when the content is a task rather than a detail — a
+ * form with its own header and footer belongs in one of those, not here.
+ *
+ * ```tsx
+ * const anchor = useRef<HTMLButtonElement>(null);
+ * const [open, setOpen] = useState(false);
+ * <Button ref={anchor} aria-expanded={open} onClick={() => setOpen((v) => !v)}>
+ *   Equipment
+ * </Button>
+ * <Popover open={open} onClose={() => setOpen(false)} anchorRef={anchor} label="Equipment">
+ *   <PopoverBody>…</PopoverBody>
+ * </Popover>
+ * ```
+ */
+declare function Popover({ open, onClose, anchorRef, label, placement, className, children, }: PopoverProps): react.ReactPortal | null;
+type PopoverHeaderProps = {
+    children: ReactNode;
+} & ({
+    /** Renders a close button after the title. Wire it to the popover's own onClose. */
+    onClose: () => void;
+    /** Accessible name of the close button (localise). */
+    closeLabel: string;
+} | {
+    onClose?: undefined;
+    closeLabel?: undefined;
+});
+declare function PopoverHeader({ children, onClose, closeLabel }: PopoverHeaderProps): react.JSX.Element;
+declare function PopoverBody({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+declare function PopoverFooter({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+
+type MenuPlacement = Placement;
+/** What Menu needs to be able to put on its trigger. */
+type MenuTriggerProps = {
+    ref?: Ref<HTMLElement> | undefined;
+    "aria-haspopup"?: "menu" | undefined;
+    "aria-expanded"?: boolean | undefined;
+    onClick?: ((event: MouseEvent<HTMLElement>) => void) | undefined;
+    onKeyDown?: ((event: KeyboardEvent<HTMLElement>) => void) | undefined;
+};
+interface MenuProps {
+    /** Accessible name of the menu — what the list of actions is *for*. */
+    label: string;
+    /** The control that opens it. Gets the ref, the ARIA and the key handling. */
+    trigger: ReactElement<MenuTriggerProps>;
+    /** Side it prefers. It flips and slides to stay on screen. Default "bottom-end". */
+    placement?: MenuPlacement;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * A button that opens a short list of actions (APG's menu button).
+ *
+ * Open state is the menu's own: a list of actions has no meaning outside the
+ * button that opened it, so unlike Modal, Sheet and Popover there is nothing
+ * for a caller to hold. Reach for Popover instead the moment the panel holds
+ * anything but actions — a form, a filter, a list of things to read.
+ *
+ * ```tsx
+ * <Menu label="Heat actions" trigger={<Button variant="ghost">Actions</Button>}>
+ *   <MenuItem onSelect={edit}>Edit</MenuItem>
+ *   <MenuItem onSelect={remove} tone="danger">Delete</MenuItem>
+ * </Menu>
+ * ```
+ */
+declare function Menu({ label, trigger, placement, className, children }: MenuProps): react.JSX.Element;
+interface MenuItemProps {
+    /** What the action does. The menu closes itself around it. */
+    onSelect: () => void;
+    disabled?: boolean;
+    /** "danger" for an action that destroys something. Default "default". */
+    tone?: "default" | "danger";
+    children: ReactNode;
+}
+declare function MenuItem({ onSelect, disabled, tone, children }: MenuItemProps): react.JSX.Element;
+
+type TooltipPlacement = Placement;
+/** What Tooltip needs to be able to put on its trigger. */
+type TriggerProps = {
+    ref?: Ref<HTMLElement> | undefined;
+    "aria-describedby"?: string | undefined;
+    onPointerEnter?: ((event: PointerEvent<HTMLElement>) => void) | undefined;
+    onPointerLeave?: ((event: PointerEvent<HTMLElement>) => void) | undefined;
+    onFocus?: ((event: FocusEvent<HTMLElement>) => void) | undefined;
+    onBlur?: ((event: FocusEvent<HTMLElement>) => void) | undefined;
+};
+interface TooltipProps {
+    /** The label. Plain text — nothing here is reachable by pointer or key. */
+    content: ReactNode;
+    /** Side it prefers. It flips and slides to stay on screen. Default "top". */
+    placement?: TooltipPlacement;
+    /** Pointer dwell in ms. Keyboard focus ignores it. Default 400. */
+    delayMs?: number;
+    /** The control being labelled. Gets the ref and the handlers. */
+    children: ReactElement<TriggerProps>;
+}
+/**
+ * A name for a control that shows only its glyph, on hover and on focus.
+ *
+ * It describes; it does not hold anything. There is nothing to click inside
+ * it and focus never moves into it, so anything the reader has to act on —
+ * a link, a button, a form — belongs in a Popover instead. A control whose
+ * label is *only* here still needs an aria-label of its own: this is the
+ * accessible description, not the accessible name.
+ *
+ * ```tsx
+ * <Tooltip content="Remove from heat">
+ *   <Button variant="ghost" aria-label="Remove from heat"><Icon name="x" /></Button>
+ * </Tooltip>
+ * ```
+ */
+declare function Tooltip({ content, placement, delayMs, children, }: TooltipProps): react.JSX.Element;
+
 type ConfirmDialogTone = "default" | "danger" | "warning";
 interface ConfirmDialogProps<T = void> {
     /** The row in question, or null when nothing is being asked. Held by the
@@ -1902,14 +2039,23 @@ declare function Breadcrumb({ items, label, linkAs, className, ...rest }: Breadc
 interface UseOverlayOptions {
     open: boolean;
     onClose: () => void;
+    /**
+     * Freeze the page behind the surface. Default true.
+     *
+     * False for anchored surfaces: a popover is pinned to a trigger that scrolls
+     * with the page, so locking the page would strand it over content the reader
+     * can no longer reach, and locking it *and* letting the popover follow the
+     * anchor are the same gesture answered two ways.
+     */
+    lockScroll?: boolean;
 }
 /**
  * Shared modal-surface behaviour: focus capture and restore, Escape to
  * close, Tab cycling inside the panel, body scroll lock. Attach the
  * returned ref to the dialog element (it needs tabIndex={-1}).
  *
- * Anchor-positioned overlays (Tooltip/Popover) will extend this hook with
- * a floating-ui middleware pass; the options object leaves room for that.
+ * Popover uses it too, with `lockScroll: false`; where it sits on the screen
+ * is a separate question, answered by useAnchoredPosition.
  */
 declare function useOverlay<T extends HTMLElement>(options: UseOverlayOptions): RefObject<T | null>;
 
@@ -1979,4 +2125,4 @@ interface RovingGroupOptions {
  */
 declare function useRovingGroup(ref: RefObject<HTMLElement | null>, { selector, orientation }: RovingGroupOptions): (event: KeyboardEvent<HTMLElement>) => void;
 
-export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, type CardBodyProps, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
+export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, type CardBodyProps, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Menu, MenuItem, type MenuItemProps, type MenuPlacement, type MenuProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, Popover, PopoverBody, PopoverFooter, PopoverHeader, type PopoverHeaderProps, type PopoverPlacement, type PopoverProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, Tooltip, type TooltipPlacement, type TooltipProps, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import { CSSProperties, HTMLAttributes, JSX, ReactElement, Ref, ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithRef, MouseEventHandler, InputHTMLAttributes, HTMLInputTypeAttribute, TextareaHTMLAttributes, SelectHTMLAttributes, RefObject, KeyboardEvent } from 'react';
+import { CSSProperties, HTMLAttributes, JSX, ReactElement, Ref, ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithRef, MouseEventHandler, InputHTMLAttributes, HTMLInputTypeAttribute, TextareaHTMLAttributes, SelectHTMLAttributes, RefObject, MouseEvent, KeyboardEvent, PointerEvent, FocusEvent } from 'react';
+import { Placement } from '@floating-ui/dom';
 
 /**
  * Join class names, dropping anything falsy.
@@ -959,8 +960,7 @@ declare function ListItem({ title, description, leading, trailing, actions, onCl
 
 interface DataColumn<Row> {
     key: string;
-    /** Read in the header row, and echoed beside the cell once the table has
-        folded into cards. */
+    /** Read in the header row. */
     header: ReactNode;
     /** CSS width for the column, applied through the colgroup. */
     width?: string;
@@ -1011,11 +1011,13 @@ type DataTableProps<Row> = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
     ref?: Ref<HTMLDivElement>;
 } & DataTableSelection;
 /**
- * Rows and columns, folded into cards on a narrow screen.
+ * Rows and columns, at every width.
  *
- * Below the wide breakpoint a table cannot be read across, so each row becomes
- * a card and every cell carries its column's header beside it. The markup is
- * one table either way: what changes is the layout, never the semantics.
+ * A table is for reading across a row and comparing down a column, and it stays
+ * one on a narrow screen rather than turning into something else: where the
+ * columns need more room than there is, the table pans sideways inside a box
+ * that takes focus. An app wanting cards on a phone builds cards — that is a
+ * different component, not this one wearing a second layout.
  *
  * ```tsx
  * <DataTable
@@ -1355,6 +1357,141 @@ declare function SheetFooter({ children }: {
     children: ReactNode;
 }): react.JSX.Element;
 
+type PopoverPlacement = Placement;
+interface PopoverProps {
+    open: boolean;
+    onClose: () => void;
+    /** The trigger the panel hangs off. It stays interactive while open. */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** Accessible name of the panel. */
+    label: string;
+    /** Side it prefers. It flips and slides to stay on screen. Default "bottom-start". */
+    placement?: PopoverPlacement;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Anchored, non-modal surface. The page behind it stays live and scrollable
+ * and the panel travels with the anchor; a press outside, Escape, or the
+ * trigger itself dismisses it.
+ *
+ * Modal by contrast: reach for Modal when the answer must come before anything
+ * else, and for Sheet when the content is a task rather than a detail — a
+ * form with its own header and footer belongs in one of those, not here.
+ *
+ * ```tsx
+ * const anchor = useRef<HTMLButtonElement>(null);
+ * const [open, setOpen] = useState(false);
+ * <Button ref={anchor} aria-expanded={open} onClick={() => setOpen((v) => !v)}>
+ *   Equipment
+ * </Button>
+ * <Popover open={open} onClose={() => setOpen(false)} anchorRef={anchor} label="Equipment">
+ *   <PopoverBody>…</PopoverBody>
+ * </Popover>
+ * ```
+ */
+declare function Popover({ open, onClose, anchorRef, label, placement, className, children, }: PopoverProps): react.ReactPortal | null;
+type PopoverHeaderProps = {
+    children: ReactNode;
+} & ({
+    /** Renders a close button after the title. Wire it to the popover's own onClose. */
+    onClose: () => void;
+    /** Accessible name of the close button (localise). */
+    closeLabel: string;
+} | {
+    onClose?: undefined;
+    closeLabel?: undefined;
+});
+declare function PopoverHeader({ children, onClose, closeLabel }: PopoverHeaderProps): react.JSX.Element;
+declare function PopoverBody({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+declare function PopoverFooter({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+
+type MenuPlacement = Placement;
+/** What Menu needs to be able to put on its trigger. */
+type MenuTriggerProps = {
+    ref?: Ref<HTMLElement> | undefined;
+    "aria-haspopup"?: "menu" | undefined;
+    "aria-expanded"?: boolean | undefined;
+    onClick?: ((event: MouseEvent<HTMLElement>) => void) | undefined;
+    onKeyDown?: ((event: KeyboardEvent<HTMLElement>) => void) | undefined;
+};
+interface MenuProps {
+    /** Accessible name of the menu — what the list of actions is *for*. */
+    label: string;
+    /** The control that opens it. Gets the ref, the ARIA and the key handling. */
+    trigger: ReactElement<MenuTriggerProps>;
+    /** Side it prefers. It flips and slides to stay on screen. Default "bottom-end". */
+    placement?: MenuPlacement;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * A button that opens a short list of actions (APG's menu button).
+ *
+ * Open state is the menu's own: a list of actions has no meaning outside the
+ * button that opened it, so unlike Modal, Sheet and Popover there is nothing
+ * for a caller to hold. Reach for Popover instead the moment the panel holds
+ * anything but actions — a form, a filter, a list of things to read.
+ *
+ * ```tsx
+ * <Menu label="Heat actions" trigger={<Button variant="ghost">Actions</Button>}>
+ *   <MenuItem onSelect={edit}>Edit</MenuItem>
+ *   <MenuItem onSelect={remove} tone="danger">Delete</MenuItem>
+ * </Menu>
+ * ```
+ */
+declare function Menu({ label, trigger, placement, className, children }: MenuProps): react.JSX.Element;
+interface MenuItemProps {
+    /** What the action does. The menu closes itself around it. */
+    onSelect: () => void;
+    disabled?: boolean;
+    /** "danger" for an action that destroys something. Default "default". */
+    tone?: "default" | "danger";
+    children: ReactNode;
+}
+declare function MenuItem({ onSelect, disabled, tone, children }: MenuItemProps): react.JSX.Element;
+
+type TooltipPlacement = Placement;
+/** What Tooltip needs to be able to put on its trigger. */
+type TriggerProps = {
+    ref?: Ref<HTMLElement> | undefined;
+    "aria-describedby"?: string | undefined;
+    onPointerEnter?: ((event: PointerEvent<HTMLElement>) => void) | undefined;
+    onPointerLeave?: ((event: PointerEvent<HTMLElement>) => void) | undefined;
+    onFocus?: ((event: FocusEvent<HTMLElement>) => void) | undefined;
+    onBlur?: ((event: FocusEvent<HTMLElement>) => void) | undefined;
+};
+interface TooltipProps {
+    /** The label. Plain text — nothing here is reachable by pointer or key. */
+    content: ReactNode;
+    /** Side it prefers. It flips and slides to stay on screen. Default "top". */
+    placement?: TooltipPlacement;
+    /** Pointer dwell in ms. Keyboard focus ignores it. Default 400. */
+    delayMs?: number;
+    /** The control being labelled. Gets the ref and the handlers. */
+    children: ReactElement<TriggerProps>;
+}
+/**
+ * A name for a control that shows only its glyph, on hover and on focus.
+ *
+ * It describes; it does not hold anything. There is nothing to click inside
+ * it and focus never moves into it, so anything the reader has to act on —
+ * a link, a button, a form — belongs in a Popover instead. A control whose
+ * label is *only* here still needs an aria-label of its own: this is the
+ * accessible description, not the accessible name.
+ *
+ * ```tsx
+ * <Tooltip content="Remove from heat">
+ *   <Button variant="ghost" aria-label="Remove from heat"><Icon name="x" /></Button>
+ * </Tooltip>
+ * ```
+ */
+declare function Tooltip({ content, placement, delayMs, children, }: TooltipProps): react.JSX.Element;
+
 type ConfirmDialogTone = "default" | "danger" | "warning";
 interface ConfirmDialogProps<T = void> {
     /** The row in question, or null when nothing is being asked. Held by the
@@ -1902,14 +2039,23 @@ declare function Breadcrumb({ items, label, linkAs, className, ...rest }: Breadc
 interface UseOverlayOptions {
     open: boolean;
     onClose: () => void;
+    /**
+     * Freeze the page behind the surface. Default true.
+     *
+     * False for anchored surfaces: a popover is pinned to a trigger that scrolls
+     * with the page, so locking the page would strand it over content the reader
+     * can no longer reach, and locking it *and* letting the popover follow the
+     * anchor are the same gesture answered two ways.
+     */
+    lockScroll?: boolean;
 }
 /**
  * Shared modal-surface behaviour: focus capture and restore, Escape to
  * close, Tab cycling inside the panel, body scroll lock. Attach the
  * returned ref to the dialog element (it needs tabIndex={-1}).
  *
- * Anchor-positioned overlays (Tooltip/Popover) will extend this hook with
- * a floating-ui middleware pass; the options object leaves room for that.
+ * Popover uses it too, with `lockScroll: false`; where it sits on the screen
+ * is a separate question, answered by useAnchoredPosition.
  */
 declare function useOverlay<T extends HTMLElement>(options: UseOverlayOptions): RefObject<T | null>;
 
@@ -1979,4 +2125,4 @@ interface RovingGroupOptions {
  */
 declare function useRovingGroup(ref: RefObject<HTMLElement | null>, { selector, orientation }: RovingGroupOptions): (event: KeyboardEvent<HTMLElement>) => void;
 
-export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, type CardBodyProps, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
+export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, type CardBodyProps, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Menu, MenuItem, type MenuItemProps, type MenuPlacement, type MenuProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, Popover, PopoverBody, PopoverFooter, PopoverHeader, type PopoverHeaderProps, type PopoverPlacement, type PopoverProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, Tooltip, type TooltipPlacement, type TooltipProps, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };