@mortenbrudvik/waveui 0.11.0 → 0.13.0

package/dist/components/overlays/Dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.mjs","names":["useId","_Fragment","useId$1","React","DialogContext","inertDialogContext","inertModalTrigger","useDialogContext","useRequiredContext","componentName","DialogRoot","openState","requestOpen","useModalOpenState","open","defaultOpen","onOpenChange","isClient","useIsClient","isOpen","trigger","useModalTrigger","contentId","setContentId","registerContentId","id","current","context","modalType","finalFocusRef","unmountOnClose","DialogTrigger","useModalTriggerPart","props","DialogClose","useModalClosePart","sizeClasses","fullTitleActionsClasses","TITLE_ACTIONS_GAP","BACKDROP_IGNORED_WARNING_KEY","BACKDROP_IGNORED_WARNING","NON_MODAL_FULL_WARNING_KEY","NON_MODAL_FULL_WARNING","useTitleActionsWidth","width","setWidth","area","observer","entry","entries","DialogContent","rest","presenceRef","usePresence","keptMounted","generatedId","propTitleId","titles","useTitleRegistry","surface","setSurface","surfaceRef","attachSurface","node","registerId","mergedRef","useMergedRefs","ref","portalRef","backdropPress","useBackdropPress","onDismiss","useModalDismiss","layer","useModalLayer","nonModal","opener","useModalOpener","onTabOrderKeyDown","usePopoverTabOrder","getTabbableThrough","useUnnamedModalWarning","useOpenInsideWarning","backdropIgnored","backdrop","warnOnce","coversUsablePage","size","titleActionsArea","setTitleActionsArea","titleActionsOutlet","setTitleActionsOutlet","titleActionsWidth","footerHeight","setFooterHeight","surfaceContext","isMounted","hasTitle","slotRendersContent","title","titleEndPadding","surfaceStyle","style","Portal","ModalBackdrop","dialogContentClassNames","presenceProps","cn","composeEventHandlers","onKeyDown","className","ModalSurfaceContext","dialogTitleClassNames","titleAction","renderSlot","ModalCloseButton","DialogTitle","titleId","titleRef","useModalTitle","outlet","heading","action","actionElement","Fragment","createPortal","stickyFooterClasses","footerRowClasses","DialogFooter","outsideContent","footer","setFooter","dialogFooterClassNames","Dialog"],"sources":["../../../src/components/overlays/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { cn } from '../../lib/cn';\nimport {\n  dialogContentClassNames,\n  dialogFooterClassNames,\n  dialogTitleClassNames,\n} from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { renderSlot, slotRendersContent, type Slot, type SlotObject } from '../../lib/slot';\nimport type {\n  BackdropAppearance,\n  ModalOpenChangeReason,\n  ModalType,\n  OpenChangeDetails,\n  SurfaceSize,\n} from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useModalLayer } from '../../hooks/useModalLayer';\nimport { usePresence } from '../../hooks/usePresence';\nimport { Portal } from '../portal/Portal';\nimport {\n  inertModalTrigger,\n  ModalSurfaceContext,\n  useBackdropPress,\n  useModalClosePart,\n  useModalDismiss,\n  useModalOpener,\n  useModalOpenState,\n  useModalTitle,\n  useModalTrigger,\n  useModalTriggerPart,\n  useModalTriggerSession,\n  useOpenInsideWarning,\n  useRaiseOnOpen,\n  useRequiredContext,\n  useTitleRegistry,\n  useUnnamedModalWarning,\n  type ModalRequestOpen,\n  type ModalSurfaceContextValue,\n  type ModalTrigger,\n} from './Dialog.shared';\nimport { ModalBackdrop, ModalCloseButton } from './Dialog.slots';\nimport { getTabbableThrough, usePopoverTabOrder } from './Popover.shared';\n\n/**\n * Why a {@link Dialog} asks to open or close: `trigger` (`Dialog.Trigger`), `close`\n * (`Dialog.Close`), `close-button` (the built-in Close button), `escape`, `outside-press` (the\n * backdrop). The shared `ModalOpenChangeReason`.\n */\nexport type DialogOpenChangeReason = ModalOpenChangeReason;\n\n/** The second argument of a {@link Dialog}'s `onOpenChange`: the reason and the DOM event. */\nexport type DialogOpenChangeDetails = OpenChangeDetails<DialogOpenChangeReason>;\n\n/**\n * How a {@link Dialog} relates to the page: `modal`, `alert` or `non-modal` (the shared\n * `ModalType`; `DrawerModalType` is the same type).\n */\nexport type DialogModalType = ModalType;\n\n/**\n * The width cap of a {@link Dialog}'s surface: `small` 400px, `medium` 600px, `large` 940px, or\n * `full`, the whole viewport (the shared `SurfaceSize`; `DrawerSize` is the same type).\n */\nexport type DialogSize = SurfaceSize;\n\n/** Properties for the Dialog component. */\nexport interface DialogProps {\n  /**\n   * Controlled open state of the dialog. The surface renders only in the browser: an open dialog\n   * is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Default open state for uncontrolled usage. The surface renders only in the browser: a dialog\n   * open by default is closed in the server HTML and opens once it has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Called with the new open state when it changes. `details.reason` tells how — `trigger`,\n   * `close` (a `.Close` part), `close-button` (the built-in Close button), `escape` or\n   * `outside-press` (the backdrop) — so a controlled dialog can refuse only some ways of closing\n   * (for example keep a form with unsaved changes open on `outside-press`); `details.event` is the\n   * DOM event behind the request. WaveUI always passes `details`; it is typed optional until 1.0\n   * so that code which calls this prop itself keeps compiling.\n   *\n   * Fires only when the value changes; a controlled dialog stays as it is until the parent updates\n   * `open`.\n   */\n  onOpenChange?: (open: boolean, details?: DialogOpenChangeDetails) => void;\n  /**\n   * `modal`: the page behind is `inert` and does not scroll; a backdrop press, Escape, the Close\n   * button and `Dialog.Close` close it. `alert`: a confirmation that needs an answer —\n   * `role=\"alertdialog\"`, and a backdrop press does not close it (Escape still does). `non-modal`:\n   * the page stays usable — no backdrop, no focus trap, nothing inert, the page scrolls; Tab and\n   * Shift+Tab leave the dialog in the page's order right after the element that opened it, Escape\n   * closes it while focus is inside it, presses on the page never close it, and focus returns to\n   * the opener only when it was inside the dialog. A non-modal dialog covers the page under it\n   * while Tab still reaches that page: keep the controls the user works with outside it, or use\n   * `modal` (with `size=\"full\"` it covers everything, and a development warning says so). Every\n   * type moves focus to the first focusable element on open (a title action, else the built-in\n   * Close button); give another element `autoFocus` to start there (an alert dialog's least\n   * destructive action). `Dialog.Trigger` toggles the dialog. Fluent's `modalType`.\n   * @default 'modal'\n   */\n  modalType?: DialogModalType;\n  /**\n   * Where focus goes when the dialog closes, if it can take focus. Otherwise focus returns to the\n   * element that had focus when the dialog opened, then to the trigger, then to an element next to\n   * where that opener was (the next row's action after a confirm dialog deleted the row). Use it to\n   * send focus somewhere else.\n   */\n  finalFocusRef?: React.RefObject<HTMLElement | null>;\n  /**\n   * Removes `Dialog.Content` (the surface and everything in it) when the dialog closes. `false`\n   * keeps it mounted while closed, `hidden` and `inert`, so a form inside keeps what was typed and\n   * the components inside keep their state; the surface then mounts with the Dialog, closed (in\n   * the browser only, as an open one), and an `autoFocus` inside it never applies (each open\n   * focuses the first focusable element). A popup opened inside that is still open when the\n   * dialog closes stays open over the page (a development warning says so): close it first.\n   * Fluent's `unmountOnClose`.\n   * @default true\n   */\n  unmountOnClose?: boolean;\n  /** `Dialog.Trigger` and `Dialog.Content`. */\n  children: React.ReactNode;\n}\n\n/** Properties for the DialogContent sub-component. */\nexport interface DialogContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  /**\n   * Title rendered as the dialog's heading; it names the dialog (`aria-labelledby`). Without it,\n   * render a `Dialog.Title` or pass `aria-label`/`aria-labelledby`. A title that renders nothing\n   * (`''`, `[]`, `true`) counts as none.\n   */\n  title?: React.ReactNode;\n  /**\n   * Width cap: 400px (`small`), 600px (`medium`) or 940px (`large`), never wider than the viewport\n   * (a 1rem margin). `full` covers the viewport: no margin, radius or border, the viewport's\n   * dynamic height, and the safe-area insets as padding (with `viewport-fit=cover`); the body\n   * scrolls under the sticky `Dialog.Footer`. Rendered as `data-size`. Fluent has no size. For\n   * another width, put a width cap in `className` (it replaces the size's).\n   * @default 'medium'\n   */\n  size?: DialogSize;\n  /**\n   * The backdrop of a modal or alert dialog: a `div` behind the dialog, `aria-hidden`. Shorthand\n   * content renders inside it; a slot object's `className` (merged last), `style`, data\n   * attributes, `ref` and handlers go to it, and its `appearance` (`'dimmed'` or `'transparent'`)\n   * overrides the automatic one: while another modal Dialog or Drawer is open below this one the\n   * backdrop is transparent, so the page is dimmed once. `null` renders no backdrop (the page stays\n   * inert, and a press outside still closes a modal dialog); a boolean is no slot. Ignored with\n   * `modalType=\"non-modal\"` (a development warning says so). Fluent's `backdrop`.\n   */\n  backdrop?: Slot<'div'> | (SlotObject<'div'> & { appearance?: BackdropAppearance });\n  /**\n   * Content of the built-in Close button (the dismiss glyph by default). It renders inside the\n   * button, decorative (`aria-hidden`), so the button keeps the name `closeLabel`; a slot object's\n   * `aria-label`, `aria-labelledby` or `title` names it instead, and its handlers run before the\n   * close (`preventDefault()` keeps the dialog open). `null` hides the button (Escape and\n   * `Dialog.Close` still close); a boolean is no slot, so `closeButton={cond && <MyIcon />}` keeps\n   * the default; content that renders nothing keeps the default glyph. A `<button>` or Wave\n   * `Button` passed here is merged into the built-in button, never nested (a development warning\n   * says so): its props apply, its text label (`<button>Done</button>`) names the button instead\n   * of `closeLabel`, and a Button's `icon`, `iconPosition` and `disabledFocusable` apply while\n   * `appearance` and `size` are ignored. Fluent's `DialogTitle` `action` holds Fluent's close\n   * button; WaveUI renders its own.\n   */\n  closeButton?: Slot<'span'>;\n  /**\n   * Header buttons for the `title` prop form, placed before the built-in Close button in the\n   * dialog's top end corner, in DOM and Tab order (an expand toggle, a menu). The title's end\n   * padding makes room for them. Interactive: name icon-only buttons. Renders nothing when empty.\n   * See also `Dialog.Title`'s `action`. Fluent's `DialogTitle` `action`, for the `title` prop\n   * form.\n   */\n  titleAction?: Slot<'span'>;\n  /**\n   * Accessible name of the built-in Close button (an icon-only button). Localize it with the\n   * page's language. A text label of a button merged into `closeButton` names it instead.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /** Content rendered inside the dialog body (put `Dialog.Footer` here as well). */\n  children: React.ReactNode;\n  /** Ref to the dialog surface (`role=\"dialog\"`, or `alertdialog` with `modalType=\"alert\"`). */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the DialogFooter sub-component. */\nexport interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Footer content, typically action buttons (wrap closing buttons in `Dialog.Close`). */\n  children: React.ReactNode;\n  /** Ref to the footer element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the DialogTitle sub-component. */\nexport interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /** The title; any content. */\n  children: React.ReactNode;\n  /**\n   * Header buttons for this title, placed before the built-in Close button in the dialog's top end\n   * corner (after `Dialog.Content`'s `titleAction`), not inside the heading, so they never become\n   * part of the dialog's name. Outside `Dialog.Content` (in a Drawer) they render right after the\n   * heading. Interactive: name icon-only buttons. Renders nothing when empty. Fluent's\n   * `DialogTitle` `action`; unlike Fluent's, it is never filled by default (the Close button is\n   * the Content's).\n   */\n  action?: Slot<'span'>;\n  /** Ref to the heading element. */\n  ref?: React.Ref<HTMLHeadingElement>;\n}\n\n/** Props a `Dialog.Trigger` puts on its element (and passes to a render-prop child). */\nexport interface DialogTriggerRenderProps extends React.HTMLAttributes<HTMLElement> {\n  'aria-haspopup': 'dialog';\n  'aria-expanded': boolean;\n  /** The dialog surface's id, while the dialog is open. */\n  'aria-controls'?: string;\n  onClick: React.MouseEventHandler<HTMLElement>;\n  /** A callback ref, so the props spread onto any element type. */\n  ref: React.RefCallback<HTMLElement>;\n}\n\n/** Properties for the DialogTrigger sub-component. */\nexport interface DialogTriggerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  /**\n   * The element that opens and closes the dialog. A single element receives the trigger props\n   * (merged with its own: handlers composed, classes joined, its own `id` kept); a function\n   * receives them.\n   */\n  children: React.ReactNode | ((props: DialogTriggerRenderProps) => React.ReactNode);\n  /**\n   * `false` renders the 0.4 wrapper `<span>` around the children instead of merging the trigger\n   * props onto the child. The span carries the click handler; `aria-haspopup`, `aria-expanded`\n   * and `aria-controls` go to the first element in the tab order inside it.\n   * @default true\n   */\n  asChild?: boolean;\n  /** Ref to the trigger element (the child, or the wrapper span). */\n  ref?: React.Ref<HTMLElement>;\n}\n\n/** Props a `Dialog.Close` puts on its element (and passes to a render-prop child). */\nexport interface DialogCloseRenderProps extends React.HTMLAttributes<HTMLElement> {\n  onClick: React.MouseEventHandler<HTMLElement>;\n  /** A callback ref, so the props spread onto any element type. */\n  ref: React.RefCallback<HTMLElement>;\n}\n\n/** Properties for the DialogClose sub-component. */\nexport interface DialogCloseProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  /**\n   * The element that closes the dialog, typically a footer button. A single element receives an\n   * `onClick` composed with its own (its handler runs first; `preventDefault()` keeps the dialog\n   * open); a function receives the props.\n   */\n  children: React.ReactNode | ((props: DialogCloseRenderProps) => React.ReactNode);\n  /** `false` renders a wrapper `<span>` that closes the dialog on click. @default true */\n  asChild?: boolean;\n  /** Ref to the close element (the child, or the wrapper span). */\n  ref?: React.Ref<HTMLElement>;\n}\n\ninterface DialogContextValue {\n  open: boolean;\n  /** Asks the root to open or close, with the reason and event for `onOpenChange`. */\n  requestOpen: ModalRequestOpen;\n  /** The resolved `modalType`. */\n  modalType: DialogModalType;\n  /** The trigger element (`attach`) and the focus-restore target resolved from it (`focusRef`). */\n  trigger: ModalTrigger;\n  finalFocusRef: React.RefObject<HTMLElement | null> | undefined;\n  /** The resolved `unmountOnClose`: `false` keeps `Dialog.Content` mounted while closed. */\n  unmountOnClose: boolean;\n  /** The id of the open dialog surface (for the trigger's `aria-controls`), or `undefined`. */\n  contentId: string | undefined;\n  /** Registers the surface's id while it is mounted; returns the unregister function. */\n  registerContentId: (id: string) => () => void;\n}\n\nconst DialogContext = React.createContext<DialogContextValue | null>(null);\nDialogContext.displayName = 'DialogContext';\n\nconst inertDialogContext: DialogContextValue = {\n  open: false,\n  requestOpen: () => {},\n  modalType: 'modal',\n  trigger: inertModalTrigger,\n  finalFocusRef: undefined,\n  unmountOnClose: true,\n  contentId: undefined,\n  registerContentId: () => () => {},\n};\n\nfunction useDialogContext(componentName: string): DialogContextValue {\n  return useRequiredContext(DialogContext, componentName, 'Dialog', () => inertDialogContext);\n}\n\n// The root of `Dialog` (documented on the export below). A const arrow (like DrawerRoot): its type\n// can be named in consumers' declaration files, e.g. a story's `satisfies Meta<typeof Dialog>` (a\n// function declaration's `typeof` cannot, TS4023).\nconst DialogRoot = ({\n  open,\n  defaultOpen,\n  onOpenChange,\n  modalType = 'modal',\n  finalFocusRef,\n  unmountOnClose = true,\n  children,\n}: DialogProps) => {\n  const [openState, requestOpen] = useModalOpenState(open, defaultOpen, onOpenChange);\n  // The surface lives in a portal, which renders only in the browser: until then (the server\n  // HTML, hydration) the dialog reports itself closed, so the trigger's aria-expanded never\n  // describes a dialog that is not there.\n  const isClient = useIsClient();\n  const isOpen = openState && isClient;\n  const trigger = useModalTrigger();\n  // After Dialog.Content's focus restore (a child's layout effects run first), start the trigger\n  // session, or end it and forget the trigger that opened it.\n  useModalTriggerSession(trigger, isOpen);\n  const [contentId, setContentId] = React.useState<string | undefined>(undefined);\n  const registerContentId = React.useCallback((id: string) => {\n    setContentId(id);\n    return () => setContentId((current) => (current === id ? undefined : current));\n  }, []);\n\n  const context = React.useMemo<DialogContextValue>(\n    () => ({\n      open: isOpen,\n      requestOpen,\n      modalType,\n      trigger,\n      finalFocusRef,\n      unmountOnClose,\n      contentId,\n      registerContentId,\n    }),\n    [\n      isOpen,\n      requestOpen,\n      modalType,\n      trigger,\n      finalFocusRef,\n      unmountOnClose,\n      contentId,\n      registerContentId,\n    ],\n  );\n\n  return <DialogContext.Provider value={context}>{children}</DialogContext.Provider>;\n};\nDialogRoot.displayName = 'Dialog';\n\n/**\n * Opens and closes the dialog: a click while it is open asks it to close (reason `trigger`). Only a\n * non-modal dialog's trigger, or a trigger rendered inside the dialog's own content, can receive\n * one (a modal dialog makes the page inert). Fluent's `DialogTrigger` never toggles (outside the\n * surface it only opens, inside it only closes); this trigger always does. Puts\n * `aria-haspopup=\"dialog\"`, `aria-expanded`, `aria-controls` (while open), a click handler and a\n * ref on its single child (no wrapper element), or passes them to a render-prop child. A custom\n * child component must forward `ref` and spread its props; one that does not is wrapped in a\n * `<span>` automatically (with a development warning), the span that `asChild={false}` renders.\n * Focus returns to the trigger when the dialog closes (with several triggers, to the one that\n * opened it). On the span, the state ARIA goes to the first element in the tab order inside it,\n * and focus returns to that element (to the span when you made it the trigger with a `role` such\n * as `button` and `tabIndex={0}`, or when nothing inside it can take focus).\n */\nexport const DialogTrigger = (props: DialogTriggerProps) => {\n  const { open, requestOpen, trigger, contentId } = useDialogContext('Dialog.Trigger');\n  return useModalTriggerPart<DialogTriggerRenderProps>(\n    { open, requestOpen, trigger, controlsId: contentId },\n    props,\n    'Dialog.Trigger',\n  );\n};\nDialogTrigger.displayName = 'DialogTrigger';\n\n/**\n * Closes the dialog: composes a click handler onto its single child (its own `onClick` runs first;\n * calling `preventDefault()` there keeps the dialog open), or passes it to a render-prop child.\n *\n * @example\n * <Dialog.Close><Button appearance=\"subtle\">Cancel</Button></Dialog.Close>\n */\nexport const DialogClose = (props: DialogCloseProps) => {\n  const { requestOpen } = useDialogContext('Dialog.Close');\n  return useModalClosePart<DialogCloseRenderProps>(requestOpen, props, 'Dialog.Close');\n};\nDialogClose.displayName = 'DialogClose';\n\n/**\n * The surface's width cap per size. `full` lifts the caps, the margin, the radius and the border,\n * takes the viewport's dynamic height and pads the safe-area insets (`max()` keeps the 24px\n * padding where there is no inset, and never adds the two). The side insets are physical (the\n * left inset pads the left side in either direction), so the side padding is too: one class per\n * side, with no direction override that a consumer's padding class would leave behind.\n */\nconst sizeClasses: Record<DialogSize, string> = {\n  small: 'max-w-[400px]',\n  medium: 'max-w-[600px]',\n  large: 'max-w-[940px]',\n  full: 'm-0 h-dvh max-h-none max-w-none rounded-none border-0 pt-[max(1.5rem,env(safe-area-inset-top))] pb-[max(1.5rem,env(safe-area-inset-bottom))] pl-[max(1.5rem,env(safe-area-inset-left))] pr-[max(1.5rem,env(safe-area-inset-right))]', // wave-allow-physical: the safe-area insets are physical sides\n};\n\n/** The title-actions area of a `full` dialog moves by the safe-area insets, as the padding does. */\nconst fullTitleActionsClasses =\n  'top-[max(1rem,env(safe-area-inset-top))] end-[max(1rem,env(safe-area-inset-right))] wave-rtl:end-[max(1rem,env(safe-area-inset-left))]';\n\n/** The gap (px) between the titles' text and the title-actions area. */\nconst TITLE_ACTIONS_GAP = 8;\n\nconst BACKDROP_IGNORED_WARNING_KEY = 'Dialog.Content:backdrop-ignored';\nconst BACKDROP_IGNORED_WARNING =\n  'Dialog.Content: `backdrop` is ignored with `modalType=\"non-modal\"`: a non-modal dialog has no backdrop, so the page behind it stays usable.';\n\nconst NON_MODAL_FULL_WARNING_KEY = 'Dialog.Content:non-modal-full';\nconst NON_MODAL_FULL_WARNING =\n  'Dialog.Content: `size=\"full\"` with `modalType=\"non-modal\"` covers the whole page while leaving it usable, so Tab reaches controls hidden behind the dialog. Use `modalType=\"modal\"`, or a smaller size with the page\\'s controls kept clear of it.';\n\n/**\n * The width (px) of the title-actions area, measured with a `ResizeObserver` (`null` until the\n * first measurement, and without `ResizeObserver`). The observer's first callback arrives before\n * the next paint.\n */\nfunction useTitleActionsWidth(area: HTMLElement | null): number | null {\n  const [width, setWidth] = React.useState<number | null>(null);\n  React.useLayoutEffect(() => {\n    if (!area || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[entries.length - 1];\n      if (!entry) return;\n      setWidth(entry.borderBoxSize?.[0]?.inlineSize ?? area.offsetWidth);\n    });\n    observer.observe(area, { box: 'border-box' });\n    return () => {\n      observer.disconnect();\n      setWidth(null);\n    };\n  }, [area]);\n  return width;\n}\n\n/**\n * The dialog surface, rendered in a portal (inheriting the WaveProvider theme) while the dialog is\n * open, and kept there while it is closed, `hidden` and `inert`, when the Dialog has\n * `unmountOnClose={false}`: the backdrop, and the surface centred in the positioner (the\n * backdrop's sibling) with the title, the title-actions area (title actions, then the Close\n * button) and a scrolling body. It takes the full width up to its `size` and never exceeds the\n * viewport (the body scrolls, also sideways for content wider than the dialog); `size=\"full\"`\n * fills the viewport. Its 1rem gap to the viewport edges is its own margin, so a margin in\n * `className` replaces the gap: with the width and height caps lifted as well and its height set\n * to the viewport's, it fills the viewport. It is `role=\"dialog\"`, or `role=\"alertdialog\"` when the\n * Dialog has `modalType=\"alert\"` (a `role` you pass wins), and carries `data-modal-type` and\n * `data-size` with the resolved values. A non-modal dialog has no backdrop: the positioner only\n * centres the surface and lets presses through to the page. The titles' end padding follows the\n * width of the title-actions area (`--wave-dialog-title-end-padding`, 2rem until it is measured).\n *\n * It mounts through the presence core: the backdrop, the positioner and the surface render\n * `data-presence` (`entered` while open, `exited` while kept closed; `entering` and `exiting`\n * only while a motion of yours runs on the surface), and the backdrop and the positioner are\n * `inert` while exiting and `hidden` and `inert` while kept closed. No motion ships: animate the\n * surface with `data-[presence=…]:` classes in `className` (an enter's start as\n * `data-[presence=entering]:starting:`, each with a `motion-reduce:` counterpart); a closed\n * surface waits for that motion before it unmounts or hides, while focus, the trap and the\n * isolation follow the open state at once.\n */\nexport const DialogContent = ({\n  title,\n  size = 'medium',\n  backdrop,\n  closeButton,\n  titleAction,\n  closeLabel = 'Close',\n  children,\n  className,\n  style,\n  id,\n  onKeyDown,\n  ref,\n  ...rest\n}: DialogContentProps) => {\n  const {\n    open,\n    requestOpen,\n    modalType,\n    trigger,\n    finalFocusRef,\n    unmountOnClose,\n    registerContentId,\n  } = useDialogContext('Dialog.Content');\n  // Every surface mounts through the presence core (D5, D103), with no motion of its own: kept\n  // mounted while closed with `unmountOnClose={false}`, else removed once it has exited.\n  const {\n    isMounted,\n    ref: presenceRef,\n    presenceProps,\n  } = usePresence(open, { unmountOnExit: unmountOnClose });\n  const keptMounted = !unmountOnClose;\n  const generatedId = useId('wave-dialog');\n  const contentId = id ?? generatedId;\n  const propTitleId = useId('wave-dialog-title');\n  const titles = useTitleRegistry();\n\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const attachSurface = React.useCallback((node: HTMLDivElement | null) => {\n    surfaceRef.current = node;\n    setSurface(node);\n  }, []);\n  // Reports the surface's id to the root (the trigger's `aria-controls`) while it is mounted. A new\n  // `id` makes a new callback, which useMergedRefs re-attaches after the commit (re-registering).\n  const registerId = React.useCallback(\n    (node: HTMLDivElement | null) => (node ? registerContentId(contentId) : undefined),\n    [registerContentId, contentId],\n  );\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, attachSurface, registerId, presenceRef);\n  // The portal wrapper: a kept-mounted surface moves to the top of its stack when it opens\n  // (before the layer registers and the trap moves focus in).\n  const portalRef = React.useRef<HTMLDivElement | null>(null);\n  useRaiseOnOpen(open, keptMounted, portalRef);\n\n  // An alert dialog needs an answer: a backdrop press does not close it (Escape still does;\n  // useModalLayer registers its layer without outside presses).\n  const backdropPress = useBackdropPress(surfaceRef, modalType !== 'alert');\n  const onDismiss = useModalDismiss(requestOpen, 'Dialog', backdropPress.afterOutsidePress);\n  const layer = useModalLayer({\n    open,\n    modalType,\n    onDismiss,\n    refs: [surfaceRef],\n    container: surface,\n    triggerRef: trigger.focusRef,\n    finalFocusRef,\n  });\n  // A non-modal dialog keeps its place in the page's keyboard order right after its opener. The\n  // opener is captured whenever the dialog opens, so a modal dialog that turns non-modal while open\n  // (focus inside it by then) still knows it.\n  const nonModal = modalType === 'non-modal';\n  const opener = useModalOpener(open, trigger, surface);\n  const onTabOrderKeyDown = usePopoverTabOrder({\n    enabled: open && nonModal,\n    surface,\n    anchorRef: opener,\n    getPreviousStop: getTabbableThrough,\n  });\n  useUnnamedModalWarning(open ? surface : null, titles.hasTitle, 'Dialog.Content', 'Dialog.Title');\n  useOpenInsideWarning(open, keptMounted, layer.layerId, 'Dialog');\n\n  // A non-modal dialog has no backdrop: a given slot (not undefined, null or a boolean) is ignored.\n  const backdropIgnored =\n    nonModal && backdrop !== undefined && backdrop !== null && typeof backdrop !== 'boolean';\n  React.useEffect(() => {\n    if (backdropIgnored) warnOnce(BACKDROP_IGNORED_WARNING_KEY, BACKDROP_IGNORED_WARNING);\n  }, [backdropIgnored]);\n  // A full non-modal dialog covers the page it leaves usable (D87.8).\n  const coversUsablePage = open && nonModal && size === 'full';\n  React.useEffect(() => {\n    if (coversUsablePage) warnOnce(NON_MODAL_FULL_WARNING_KEY, NON_MODAL_FULL_WARNING);\n  }, [coversUsablePage]);\n\n  // The title-actions area (held in state) and the outlet `Dialog.Title` actions portal into. Both\n  // attach in the commit that mounts the surface, so a title's action is in the DOM in the next\n  // commit, the one in which the focus trap starts (it waits for the surface held in state). The\n  // area is measured only while the dialog is open (a kept-mounted closed one measures nothing).\n  const [titleActionsArea, setTitleActionsArea] = React.useState<HTMLDivElement | null>(null);\n  const [titleActionsOutlet, setTitleActionsOutlet] = React.useState<HTMLSpanElement | null>(null);\n  const titleActionsWidth = useTitleActionsWidth(open ? titleActionsArea : null);\n\n  // The height of the sticky Dialog.Footer, reserved as the body's scroll padding.\n  const [footerHeight, setFooterHeight] = React.useState<number | null>(null);\n  const surfaceContext = React.useMemo<ModalSurfaceContextValue>(\n    () => ({ ...titles.context, setFooterHeight, titleActionsOutlet }),\n    [titles.context, titleActionsOutlet],\n  );\n\n  if (!isMounted) return null;\n\n  const hasTitle = slotRendersContent(title);\n  // The titles' end padding: the area's width and a gap while it has a size, none while it is\n  // empty; unset (the 2rem fallback) until it is measured.\n  const titleEndPadding =\n    titleActionsWidth === null\n      ? undefined\n      : titleActionsWidth > 0\n        ? `${titleActionsWidth + TITLE_ACTIONS_GAP}px`\n        : '0px';\n  const surfaceStyle =\n    titleEndPadding === undefined\n      ? style\n      : ({ '--wave-dialog-title-end-padding': titleEndPadding, ...style } as React.CSSProperties);\n\n  return (\n    <Portal ref={portalRef} layerId={layer.layerId}>\n      {/* Each top-level element carries the presence attributes (D7, D103): hidden and inert while\n          kept closed, so a closed dialog leaves no backdrop over the page. */}\n      {!nonModal && (\n        <ModalBackdrop\n          backdrop={backdrop}\n          className={dialogContentClassNames.backdrop}\n          layerId={layer.layerId}\n          open={open}\n          onMouseDown={backdropPress.onMouseDown}\n          presenceProps={presenceProps}\n        />\n      )}\n      <div\n        {...presenceProps}\n        // Centres the surface and lets presses through to the backdrop (modal) or the page\n        // (non-modal) around it.\n        className={cn(\n          dialogContentClassNames.positioner,\n          'pointer-events-none fixed inset-0 flex items-center justify-center',\n        )}\n      >\n        <div\n          ref={mergedRef}\n          role={modalType === 'alert' ? 'alertdialog' : 'dialog'}\n          id={contentId}\n          aria-labelledby={hasTitle ? propTitleId : titles.titleId}\n          tabIndex={-1}\n          data-modal-type={modalType}\n          data-size={size}\n          {...rest}\n          data-presence={presenceProps['data-presence']}\n          style={surfaceStyle}\n          onKeyDown={composeEventHandlers(onKeyDown, onTabOrderKeyDown)}\n          className={cn(\n            dialogContentClassNames.root,\n            // The border marks the surface where the shadow cannot: in high contrast the page,\n            // the backdrop and the surface are black, and forced colors drop shadows. The 1rem gap\n            // to the viewport edges is the surface's own margin, not the positioner's padding, so\n            // a margin in `className` replaces it and a full-screen dialog can reach the edges.\n            // Its minimum width is zero, so content wider than the room inside the gap scrolls in\n            // the body instead of pushing the surface over the gap.\n            'pointer-events-auto relative m-4 flex min-w-0 max-h-[calc(100dvh-2rem)] w-full flex-col rounded-lg border border-border bg-background p-6 text-foreground shadow-64',\n            sizeClasses[size],\n            className,\n          )}\n        >\n          <ModalSurfaceContext.Provider value={surfaceContext}>\n            {hasTitle && (\n              <h2\n                id={propTitleId}\n                className={cn(\n                  dialogTitleClassNames.root,\n                  'pe-[var(--wave-dialog-title-end-padding,2rem)] text-subtitle-1 font-semibold',\n                )}\n              >\n                {title}\n              </h2>\n            )}\n            <div\n              ref={setTitleActionsArea}\n              className={cn(\n                dialogContentClassNames.titleActions,\n                'absolute end-4 top-4 flex items-start gap-1',\n                size === 'full' && fullTitleActionsClasses,\n              )}\n            >\n              {slotRendersContent(titleAction)\n                ? renderSlot(\n                    titleAction,\n                    'span',\n                    cn(dialogContentClassNames.titleAction, 'inline-flex items-center gap-1'),\n                  )\n                : null}\n              {/* Each Dialog.Title action portals here, in mount order. */}\n              <span ref={setTitleActionsOutlet} className=\"contents\" />\n              <ModalCloseButton\n                componentName=\"Dialog.Content\"\n                closeButton={closeButton}\n                closeLabel={closeLabel}\n                onClose={(event) => requestOpen(false, { reason: 'close-button', event })}\n                className={cn(dialogContentClassNames.closeButton, 'text-muted-foreground')}\n              />\n            </div>\n            <div\n              // The scroll padding keeps a focused field above the sticky footer (WCAG 2.4.11).\n              className={cn(\n                dialogContentClassNames.body,\n                '-mx-1 mt-1 min-h-0 flex-1 overflow-y-auto scroll-pb-(--wave-dialog-footer-height) p-1 text-body-1',\n              )}\n              style={\n                footerHeight === null\n                  ? undefined\n                  : ({ '--wave-dialog-footer-height': `${footerHeight}px` } as React.CSSProperties)\n              }\n            >\n              {children}\n            </div>\n          </ModalSurfaceContext.Provider>\n        </div>\n      </div>\n    </Portal>\n  );\n};\nDialogContent.displayName = 'DialogContent';\n\n/**\n * A heading that names the dialog (`aria-labelledby`), for rich titles or custom layouts. Render it\n * inside `Dialog.Content` (instead of the `title` prop). Like the `title` heading, its end padding\n * follows the width of the dialog's title-actions area (2rem until it is measured), so a long first\n * line stays clear of the title actions and the Close button; a `className` padding wins. Its\n * `action` renders in that area, before the Close button, and never inside the heading.\n */\nexport const DialogTitle = ({\n  id,\n  action,\n  className,\n  children,\n  ref,\n  ...rest\n}: DialogTitleProps) => {\n  const { id: titleId, ref: titleRef } = useModalTitle('Dialog.Title', 'Dialog.Content', id, ref);\n  // `undefined` outside Dialog.Content (a Drawer), `null` until the content's outlet is attached.\n  const outlet = React.useContext(ModalSurfaceContext)?.titleActionsOutlet;\n  const heading = (\n    <h2\n      {...rest}\n      id={titleId}\n      ref={titleRef}\n      className={cn(\n        dialogTitleClassNames.root,\n        'pe-[var(--wave-dialog-title-end-padding,2rem)] text-subtitle-1 font-semibold text-foreground',\n        className,\n      )}\n    >\n      {children}\n    </h2>\n  );\n  if (!slotRendersContent(action)) return heading;\n  const actionElement = renderSlot(\n    action,\n    'span',\n    cn(dialogTitleClassNames.action, 'inline-flex items-center gap-1'),\n  );\n  return (\n    <>\n      {heading}\n      {outlet === undefined ? actionElement : outlet && createPortal(actionElement, outlet)}\n    </>\n  );\n};\nDialogTitle.displayName = 'DialogTitle';\n\n/**\n * `Dialog.Footer` inside `Dialog.Content`. The body is `p-1`, and sticky positioning stops at its\n * padding edge: `-bottom-1` with `-mb-1 pb-2` covers the body's bottom padding, `-mx-1 px-1` its\n * focus-ring inset, and `pt-3` separates the actions from the content scrolling under them.\n */\nconst stickyFooterClasses =\n  'sticky -bottom-1 z-10 -mx-1 -mb-1 mt-6 flex justify-end gap-2 bg-background px-1 pb-2 pt-3';\n\n/**\n * `Dialog.Footer` where no body reserves its height as scroll padding (a Drawer's body): a plain\n * action row, which never covers a focused field.\n */\nconst footerRowClasses = 'mt-6 flex justify-end gap-2';\n\n/**\n * Action row at the end of the dialog body. It stays where you render it in the DOM and sticks to\n * the bottom of the body while long content scrolls under it (with an opaque background); the body\n * reserves its height as scroll padding, so a focused field is never hidden behind it. Inside a\n * `<form>` that wraps the fields and the footer it sticks too: make it the form's last child.\n * Render it inside `Dialog.Content`: outside it, it would stay on the page while the dialog is\n * closed (a development warning says so). Inside a `Drawer`, whose body reserves no footer height,\n * it does not stick: it is an action row at the end of the content. Render one `Dialog.Footer` per\n * `Dialog.Content`: with two at once, the body reserves the height of the one measured last, and\n * unmounting either clears it until the other resizes (swapping one footer for another is fine).\n */\nexport const DialogFooter = ({ children, className, ref, ...rest }: DialogFooterProps) => {\n  const surfaceContext = React.useContext(ModalSurfaceContext);\n  const outsideContent = surfaceContext === null;\n  const setFooterHeight = surfaceContext?.setFooterHeight;\n  const [footer, setFooter] = React.useState<HTMLDivElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, setFooter);\n\n  React.useEffect(() => {\n    if (!outsideContent) return;\n    warnOnce(\n      'Dialog.Footer:outside-content',\n      'Dialog.Footer must be rendered inside Dialog.Content. Outside it, the footer stays on the page while the dialog is closed.',\n    );\n  }, [outsideContent]);\n\n  // Reports the footer's border-box height to Dialog.Content. The observer's first callback,\n  // delivered before the next paint, supplies the first value; without ResizeObserver the body\n  // keeps its default scroll padding.\n  React.useLayoutEffect(() => {\n    if (!footer || !setFooterHeight || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[entries.length - 1];\n      if (!entry) return;\n      setFooterHeight(entry.borderBoxSize?.[0]?.blockSize ?? footer.offsetHeight);\n    });\n    observer.observe(footer, { box: 'border-box' });\n    return () => {\n      observer.disconnect();\n      setFooterHeight(null);\n    };\n  }, [footer, setFooterHeight]);\n\n  return (\n    <div\n      ref={mergedRef}\n      {...rest}\n      // Sticky only where the surface reserves the footer's height (Dialog.Content).\n      className={cn(\n        dialogFooterClassNames.root,\n        setFooterHeight ? stickyFooterClasses : footerRowClasses,\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\nDialogFooter.displayName = 'DialogFooter';\n\n/**\n * A dialog (Fluent UI v2 style), modal by default: `Dialog` holds the open state; `Dialog.Trigger`\n * opens and closes it and `Dialog.Content` renders the surface in a portal while open (and, with\n * `unmountOnClose={false}`, keeps it there while closed, `hidden` and `inert`).\n *\n * - **Modal**: focus moves into the dialog and Tab stays inside it (toasts included), the rest of\n *   the page is `inert` (instead of `aria-modal`, so toasts and live regions stay announced), and\n *   the page does not scroll.\n * - **Closing**: Escape (only the topmost layer: a popup opened inside closes first), a click on\n *   the backdrop (a drag that starts inside does not close it), the Close button and `Dialog.Close`.\n *   `onOpenChange` gets the reason as its second argument (`details.reason`), so a controlled\n *   dialog can refuse some of them. A backdrop press blurs the focused field before the dialog\n *   closes, so a typed value is committed as with the Close button; when a controlled dialog\n *   refuses the press, the field gets focus back (an alert dialog's press leaves focus where it\n *   was). Focus returns to the first of these that can take focus: `finalFocusRef`, the element\n *   that had focus when the dialog opened, the trigger, an element next to where that opener was.\n * - **Alert dialogs**: `modalType=\"alert\"` renders `role=\"alertdialog\"` for a confirmation that\n *   needs an answer; a backdrop press does not close it.\n * - **Non-modal dialogs**: `modalType=\"non-modal\"` leaves the page usable (no backdrop, no focus\n *   trap, nothing inert, the page scrolls). Focus moves in on open; Tab and Shift+Tab leave the\n *   dialog in the page's order right after the element that opened it; Escape closes it only while\n *   focus is inside it; presses on the page never close it; focus returns to the opener only from\n *   inside. Keep the page's controls clear of the dialog, which covers the page under it.\n * - **Size**: `Dialog.Content` `size` caps the width at 400px (`small`), 600px (`medium`, the\n *   default) or 940px (`large`); `full` covers the viewport and pads its safe-area insets.\n * - **Backdrop**: the backdrop is the surface's sibling and a slot (`backdrop`: `null` removes it,\n *   `appearance` picks `dimmed` or `transparent`). A modal opened over another modal dims the page\n *   once: its backdrop is transparent while the lower one is open.\n * - **Close button and title actions**: `closeButton` sets the built-in Close button's content, or\n *   hides it (`null`); a button passed there is merged into it. `titleAction` and `Dialog.Title`'s\n *   `action` place header buttons before the Close button in the top end corner, in DOM and Tab\n *   order, and the titles' end padding makes room for them. Initial focus goes to the first\n *   focusable element: a title action, else the Close button.\n * - **Footer**: `Dialog.Footer` sticks to the bottom of the scrolling body, and the body keeps a\n *   focused field above it.\n * - **Kept mounted**: `unmountOnClose={false}` keeps the content mounted while the dialog is\n *   closed, so a form keeps what was typed and the components inside keep their state; each open\n *   focuses the first focusable element again (an `autoFocus` inside never applies), and a kept\n *   dialog opened while another overlay is open stacks above it.\n * - **Presence**: the surface mounts through the presence core and renders `data-presence`; no\n *   motion ships, and `data-[presence=…]:` classes on `Dialog.Content` animate it.\n * - **Naming**: give `Dialog.Content` a `title`, a `Dialog.Title`, or `aria-label`.\n *\n * The sub-components are also exported under flat names (`DialogTrigger`, `DialogContent`,\n * `DialogFooter`, `DialogTitle`, `DialogClose`) for React Server Components, which cannot use the\n * dotted form; dotted access (`Dialog.Content`) needs a client file.\n *\n * @example\n * <Dialog>\n *   <Dialog.Trigger><Button>Delete</Button></Dialog.Trigger>\n *   <Dialog.Content title=\"Delete file?\">\n *     This cannot be undone.\n *     <Dialog.Footer>\n *       <Dialog.Close><Button appearance=\"subtle\">Cancel</Button></Dialog.Close>\n *       <Button appearance=\"primary\" onClick={remove}>Delete</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog>\n */\nexport const Dialog = /* @__PURE__ */ Object.assign(DialogRoot, {\n  Trigger: DialogTrigger,\n  Content: DialogContent,\n  Footer: DialogFooter,\n  Title: DialogTitle,\n  Close: DialogClose,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Dialog.mjs","names":["useId","_Fragment","useId$1","React","DialogContext","inertDialogContext","inertModalTrigger","useDialogContext","useRequiredContext","componentName","DialogRoot","openState","requestOpen","useModalOpenState","open","defaultOpen","onOpenChange","isClient","useIsClient","isOpen","trigger","useModalTrigger","contentId","setContentId","registerContentId","id","current","context","modalType","finalFocusRef","unmountOnClose","DialogTrigger","useModalTriggerPart","props","DialogClose","useModalClosePart","sizeClasses","fullTitleActionsClasses","TITLE_ACTIONS_GAP","BACKDROP_IGNORED_WARNING_KEY","BACKDROP_IGNORED_WARNING","NON_MODAL_FULL_WARNING_KEY","NON_MODAL_FULL_WARNING","useTitleActionsWidth","width","setWidth","area","observer","entry","entries","DialogContent","rest","presenceRef","usePresence","keptMounted","generatedId","propTitleId","titles","useTitleRegistry","surface","setSurface","surfaceRef","attachSurface","node","registerId","mergedRef","useMergedRefs","ref","portalRef","backdropPress","useBackdropPress","onDismiss","useModalDismiss","layer","useModalLayer","nonModal","opener","useModalOpener","onTabOrderKeyDown","usePopoverTabOrder","getTabbableThrough","useUnnamedModalWarning","useOpenInsideWarning","backdropIgnored","backdrop","warnOnce","coversUsablePage","size","titleActionsArea","setTitleActionsArea","titleActionsOutlet","setTitleActionsOutlet","titleActionsWidth","footerHeight","setFooterHeight","surfaceContext","isMounted","hasTitle","slotRendersContent","title","titleEndPadding","surfaceStyle","style","Portal","ModalBackdrop","dialogContentClassNames","presenceProps","cn","composeEventHandlers","onKeyDown","className","ModalSurfaceContext","dialogTitleClassNames","titleAction","renderSlot","ModalCloseButton","DialogTitle","titleId","titleRef","useModalTitle","outlet","heading","action","actionElement","Fragment","createPortal","stickyFooterClasses","footerRowClasses","DialogFooter","outsideContent","footer","setFooter","dialogFooterClassNames","Dialog"],"sources":["../../../src/components/overlays/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { cn } from '../../lib/cn';\nimport {\n  dialogContentClassNames,\n  dialogFooterClassNames,\n  dialogTitleClassNames,\n} from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { renderSlot, slotRendersContent, type Slot, type SlotObject } from '../../lib/slot';\nimport type {\n  BackdropAppearance,\n  ModalOpenChangeReason,\n  ModalType,\n  OpenChangeDetails,\n  SurfaceSize,\n} from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useModalLayer } from '../../hooks/useModalLayer';\nimport { usePresence } from '../../hooks/usePresence';\nimport { Portal } from '../portal/Portal';\nimport {\n  inertModalTrigger,\n  ModalSurfaceContext,\n  useBackdropPress,\n  useModalClosePart,\n  useModalDismiss,\n  useModalOpener,\n  useModalOpenState,\n  useModalTitle,\n  useModalTrigger,\n  useModalTriggerPart,\n  useModalTriggerSession,\n  useOpenInsideWarning,\n  useRaiseOnOpen,\n  useRequiredContext,\n  useTitleRegistry,\n  useUnnamedModalWarning,\n  type ModalRequestOpen,\n  type ModalSurfaceContextValue,\n  type ModalTrigger,\n} from './Dialog.shared';\nimport { ModalBackdrop, ModalCloseButton } from './Dialog.slots';\nimport { getTabbableThrough, usePopoverTabOrder } from './Popover.shared';\n\n/**\n * Why a {@link Dialog} asks to open or close: `trigger` (`Dialog.Trigger`), `close`\n * (`Dialog.Close`), `close-button` (the built-in Close button), `escape`, `outside-press` (the\n * backdrop). The shared `ModalOpenChangeReason`.\n */\nexport type DialogOpenChangeReason = ModalOpenChangeReason;\n\n/** The second argument of a {@link Dialog}'s `onOpenChange`: the reason and the DOM event. */\nexport type DialogOpenChangeDetails = OpenChangeDetails<DialogOpenChangeReason>;\n\n/**\n * How a {@link Dialog} relates to the page: `modal`, `alert` or `non-modal` (the shared\n * `ModalType`; `DrawerModalType` is the same type).\n */\nexport type DialogModalType = ModalType;\n\n/**\n * The width cap of a {@link Dialog}'s surface: `small` 400px, `medium` 600px, `large` 940px, or\n * `full`, the whole viewport (the shared `SurfaceSize`; `DrawerSize` is the same type).\n */\nexport type DialogSize = SurfaceSize;\n\n/** Properties for the Dialog component. */\nexport interface DialogProps {\n  /**\n   * Controlled open state of the dialog. The surface renders only in the browser: an open dialog\n   * is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Default open state for uncontrolled usage. The surface renders only in the browser: a dialog\n   * open by default is closed in the server HTML and opens once it has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Called with the new open state when it changes. `details.reason` tells how — `trigger`,\n   * `close` (a `.Close` part), `close-button` (the built-in Close button), `escape` or\n   * `outside-press` (the backdrop) — so a controlled dialog can refuse only some ways of closing\n   * (for example keep a form with unsaved changes open on `outside-press`); `details.event` is the\n   * DOM event behind the request. WaveUI always passes `details`; it is typed optional until 1.0\n   * so that code which calls this prop itself keeps compiling.\n   *\n   * Fires only when the value changes; a controlled dialog stays as it is until the parent updates\n   * `open`.\n   */\n  onOpenChange?: (open: boolean, details?: DialogOpenChangeDetails) => void;\n  /**\n   * `modal`: the page behind is `inert` and does not scroll; a backdrop press, Escape, the Close\n   * button and `Dialog.Close` close it. `alert`: a confirmation that needs an answer —\n   * `role=\"alertdialog\"`, and a backdrop press does not close it (Escape still does). `non-modal`:\n   * the page stays usable — no backdrop, no focus trap, nothing inert, the page scrolls; Tab and\n   * Shift+Tab leave the dialog in the page's order right after the element that opened it, Escape\n   * closes it while focus is inside it, presses on the page never close it, and focus returns to\n   * the opener only when it was inside the dialog. A non-modal dialog covers the page under it\n   * while Tab still reaches that page: keep the controls the user works with outside it, or use\n   * `modal` (with `size=\"full\"` it covers everything, and a development warning says so). Every\n   * type moves focus to the first focusable element on open (a title action, else the built-in\n   * Close button); give another element `autoFocus` to start there (an alert dialog's least\n   * destructive action). `Dialog.Trigger` toggles the dialog. Fluent's `modalType`.\n   * @default 'modal'\n   */\n  modalType?: DialogModalType;\n  /**\n   * Where focus goes when the dialog closes, if it can take focus. Otherwise focus returns to the\n   * element that had focus when the dialog opened, then to the trigger, then to an element next to\n   * where that opener was (the next row's action after a confirm dialog deleted the row). Use it to\n   * send focus somewhere else.\n   */\n  finalFocusRef?: React.RefObject<HTMLElement | null>;\n  /**\n   * Removes `Dialog.Content` (the surface and everything in it) when the dialog closes. `false`\n   * keeps it mounted while closed, `hidden` and `inert`, so a form inside keeps what was typed and\n   * the components inside keep their state; the surface then mounts with the Dialog, closed (in\n   * the browser only, as an open one), and an `autoFocus` inside it never applies (each open\n   * focuses the first focusable element). A popup opened inside that is still open when the\n   * dialog closes stays open over the page (a development warning says so): close it first.\n   * Fluent's `unmountOnClose`.\n   * @default true\n   */\n  unmountOnClose?: boolean;\n  /** `Dialog.Trigger` and `Dialog.Content`. */\n  children: React.ReactNode;\n}\n\n/** Properties for the DialogContent sub-component. */\nexport interface DialogContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  /**\n   * Title rendered as the dialog's heading; it names the dialog (`aria-labelledby`). Without it,\n   * render a `Dialog.Title` or pass `aria-label`/`aria-labelledby`. A title that renders nothing\n   * (`''`, `[]`, `true`) counts as none.\n   */\n  title?: React.ReactNode;\n  /**\n   * Width cap: 400px (`small`), 600px (`medium`) or 940px (`large`), never wider than the viewport\n   * (a 1rem margin). `full` covers the viewport: no margin, radius or border, the viewport's\n   * dynamic height, and the safe-area insets as padding (with `viewport-fit=cover`); the body\n   * scrolls under the sticky `Dialog.Footer`. Rendered as `data-size`. Fluent has no size. For\n   * another width, put a width cap in `className` (it replaces the size's).\n   * @default 'medium'\n   */\n  size?: DialogSize;\n  /**\n   * The backdrop of a modal or alert dialog: a `div` behind the dialog, `aria-hidden`. Shorthand\n   * content renders inside it; a slot object's `className` (merged last), `style`, data\n   * attributes, `ref` and handlers go to it, and its `appearance` (`'dimmed'` or `'transparent'`)\n   * overrides the automatic one: while another modal Dialog or Drawer is open below this one the\n   * backdrop is transparent, so the page is dimmed once. `null` renders no backdrop (the page stays\n   * inert, and a press outside still closes a modal dialog); a boolean is no slot. Ignored with\n   * `modalType=\"non-modal\"` (a development warning says so). Fluent's `backdrop`.\n   */\n  backdrop?: Slot<'div'> | (SlotObject<'div'> & { appearance?: BackdropAppearance });\n  /**\n   * Content of the built-in Close button (the dismiss glyph by default). It renders inside the\n   * button, decorative (`aria-hidden`), so the button keeps the name `closeLabel`; a slot object's\n   * `aria-label`, `aria-labelledby` or `title` names it instead, and its handlers run before the\n   * close (`preventDefault()` keeps the dialog open). `null` hides the button (Escape and\n   * `Dialog.Close` still close); a boolean is no slot, so `closeButton={cond && <MyIcon />}` keeps\n   * the default; content that renders nothing keeps the default glyph. A `<button>` or Wave\n   * `Button` passed here is merged into the built-in button, never nested (a development warning\n   * says so): its props apply, its text label (`<button>Done</button>`) names the button instead\n   * of `closeLabel`, and a Button's `icon`, `iconPosition` and `disabledFocusable` apply while\n   * `appearance` and `size` are ignored. Fluent's `DialogTitle` `action` holds Fluent's close\n   * button; WaveUI renders its own.\n   */\n  closeButton?: Slot<'span'>;\n  /**\n   * Header buttons for the `title` prop form, placed before the built-in Close button in the\n   * dialog's top end corner, in DOM and Tab order (an expand toggle, a menu). The title's end\n   * padding makes room for them. Interactive: name icon-only buttons. Renders nothing when empty.\n   * See also `Dialog.Title`'s `action`. Fluent's `DialogTitle` `action`, for the `title` prop\n   * form.\n   */\n  titleAction?: Slot<'span'>;\n  /**\n   * Accessible name of the built-in Close button (an icon-only button). Localize it with the\n   * page's language. A text label of a button merged into `closeButton` names it instead.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /** Content rendered inside the dialog body (put `Dialog.Footer` here as well). */\n  children: React.ReactNode;\n  /** Ref to the dialog surface (`role=\"dialog\"`, or `alertdialog` with `modalType=\"alert\"`). */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the DialogFooter sub-component. */\nexport interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Footer content, typically action buttons (wrap closing buttons in `Dialog.Close`). */\n  children: React.ReactNode;\n  /** Ref to the footer element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the DialogTitle sub-component. */\nexport interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /** The title; any content. */\n  children: React.ReactNode;\n  /**\n   * Header buttons for this title, placed before the built-in Close button in the dialog's top end\n   * corner (after `Dialog.Content`'s `titleAction`), not inside the heading, so they never become\n   * part of the dialog's name. Outside `Dialog.Content` (in a Drawer) they render right after the\n   * heading. Interactive: name icon-only buttons. Renders nothing when empty. Fluent's\n   * `DialogTitle` `action`; unlike Fluent's, it is never filled by default (the Close button is\n   * the Content's).\n   */\n  action?: Slot<'span'>;\n  /** Ref to the heading element. */\n  ref?: React.Ref<HTMLHeadingElement>;\n}\n\n/** Props a `Dialog.Trigger` puts on its element (and passes to a render-prop child). */\nexport interface DialogTriggerRenderProps extends React.HTMLAttributes<HTMLElement> {\n  'aria-haspopup': 'dialog';\n  'aria-expanded': boolean;\n  /** The dialog surface's id, while the dialog is open. */\n  'aria-controls'?: string;\n  onClick: React.MouseEventHandler<HTMLElement>;\n  /** A callback ref, so the props spread onto any element type. */\n  ref: React.RefCallback<HTMLElement>;\n}\n\n/** Properties for the DialogTrigger sub-component. */\nexport interface DialogTriggerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  /**\n   * The element that opens and closes the dialog. A single element receives the trigger props\n   * (merged with its own: handlers composed, classes joined, its own `id` kept); a function\n   * receives them.\n   */\n  children: React.ReactNode | ((props: DialogTriggerRenderProps) => React.ReactNode);\n  /**\n   * `false` renders the 0.4 wrapper `<span>` around the children instead of merging the trigger\n   * props onto the child. The span carries the click handler; `aria-haspopup`, `aria-expanded`\n   * and `aria-controls` go to the first element in the tab order inside it.\n   * @default true\n   */\n  asChild?: boolean;\n  /** Ref to the trigger element (the child, or the wrapper span). */\n  ref?: React.Ref<HTMLElement>;\n}\n\n/** Props a `Dialog.Close` puts on its element (and passes to a render-prop child). */\nexport interface DialogCloseRenderProps extends React.HTMLAttributes<HTMLElement> {\n  onClick: React.MouseEventHandler<HTMLElement>;\n  /** A callback ref, so the props spread onto any element type. */\n  ref: React.RefCallback<HTMLElement>;\n}\n\n/** Properties for the DialogClose sub-component. */\nexport interface DialogCloseProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  /**\n   * The element that closes the dialog, typically a footer button. A single element receives an\n   * `onClick` composed with its own (its handler runs first; `preventDefault()` keeps the dialog\n   * open); a function receives the props.\n   */\n  children: React.ReactNode | ((props: DialogCloseRenderProps) => React.ReactNode);\n  /** `false` renders a wrapper `<span>` that closes the dialog on click. @default true */\n  asChild?: boolean;\n  /** Ref to the close element (the child, or the wrapper span). */\n  ref?: React.Ref<HTMLElement>;\n}\n\ninterface DialogContextValue {\n  open: boolean;\n  /** Asks the root to open or close, with the reason and event for `onOpenChange`. */\n  requestOpen: ModalRequestOpen;\n  /** The resolved `modalType`. */\n  modalType: DialogModalType;\n  /** The trigger element (`attach`) and the focus-restore target resolved from it (`focusRef`). */\n  trigger: ModalTrigger;\n  finalFocusRef: React.RefObject<HTMLElement | null> | undefined;\n  /** The resolved `unmountOnClose`: `false` keeps `Dialog.Content` mounted while closed. */\n  unmountOnClose: boolean;\n  /** The id of the open dialog surface (for the trigger's `aria-controls`), or `undefined`. */\n  contentId: string | undefined;\n  /** Registers the surface's id while it is mounted; returns the unregister function. */\n  registerContentId: (id: string) => () => void;\n}\n\nconst DialogContext = React.createContext<DialogContextValue | null>(null);\nDialogContext.displayName = 'DialogContext';\n\nconst inertDialogContext: DialogContextValue = {\n  open: false,\n  requestOpen: () => {},\n  modalType: 'modal',\n  trigger: inertModalTrigger,\n  finalFocusRef: undefined,\n  unmountOnClose: true,\n  contentId: undefined,\n  registerContentId: () => () => {},\n};\n\nfunction useDialogContext(componentName: string): DialogContextValue {\n  return useRequiredContext(DialogContext, componentName, 'Dialog', () => inertDialogContext);\n}\n\n// The root of `Dialog` (documented on the export below). A const arrow (like DrawerRoot): its type\n// can be named in consumers' declaration files, e.g. a story's `satisfies Meta<typeof Dialog>` (a\n// function declaration's `typeof` cannot, TS4023).\nconst DialogRoot = ({\n  open,\n  defaultOpen,\n  onOpenChange,\n  modalType = 'modal',\n  finalFocusRef,\n  unmountOnClose = true,\n  children,\n}: DialogProps) => {\n  const [openState, requestOpen] = useModalOpenState(open, defaultOpen, onOpenChange);\n  // The surface lives in a portal, which renders only in the browser: until then (the server\n  // HTML, hydration) the dialog reports itself closed, so the trigger's aria-expanded never\n  // describes a dialog that is not there.\n  const isClient = useIsClient();\n  const isOpen = openState && isClient;\n  const trigger = useModalTrigger();\n  // After Dialog.Content's focus restore (a child's layout effects run first), start the trigger\n  // session, or end it and forget the trigger that opened it.\n  useModalTriggerSession(trigger, isOpen);\n  const [contentId, setContentId] = React.useState<string | undefined>(undefined);\n  const registerContentId = React.useCallback((id: string) => {\n    setContentId(id);\n    return () => setContentId((current) => (current === id ? undefined : current));\n  }, []);\n\n  const context = React.useMemo<DialogContextValue>(\n    () => ({\n      open: isOpen,\n      requestOpen,\n      modalType,\n      trigger,\n      finalFocusRef,\n      unmountOnClose,\n      contentId,\n      registerContentId,\n    }),\n    [\n      isOpen,\n      requestOpen,\n      modalType,\n      trigger,\n      finalFocusRef,\n      unmountOnClose,\n      contentId,\n      registerContentId,\n    ],\n  );\n\n  return <DialogContext.Provider value={context}>{children}</DialogContext.Provider>;\n};\nDialogRoot.displayName = 'Dialog';\n\n/**\n * Opens and closes the dialog: a click while it is open asks it to close (reason `trigger`). Only a\n * non-modal dialog's trigger, or a trigger rendered inside the dialog's own content, can receive\n * one (a modal dialog makes the page inert). Fluent's `DialogTrigger` never toggles (outside the\n * surface it only opens, inside it only closes); this trigger always does. Puts\n * `aria-haspopup=\"dialog\"`, `aria-expanded`, `aria-controls` (while open), a click handler and a\n * ref on its single child (no wrapper element), or passes them to a render-prop child. A custom\n * child component must forward `ref` and spread its props; one that does not is wrapped in a\n * `<span>` automatically (with a development warning), the span that `asChild={false}` renders.\n * Focus returns to the trigger when the dialog closes (with several triggers, to the one that\n * opened it). On the span, the state ARIA goes to the first element in the tab order inside it,\n * and focus returns to that element (to the span when you made it the trigger with a `role` such\n * as `button` and `tabIndex={0}`, or when nothing inside it can take focus).\n */\nexport const DialogTrigger = (props: DialogTriggerProps) => {\n  const { open, requestOpen, trigger, contentId } = useDialogContext('Dialog.Trigger');\n  return useModalTriggerPart<DialogTriggerRenderProps>(\n    { open, requestOpen, trigger, controlsId: contentId },\n    props,\n    'Dialog.Trigger',\n  );\n};\nDialogTrigger.displayName = 'DialogTrigger';\n\n/**\n * Closes the dialog: composes a click handler onto its single child (its own `onClick` runs first;\n * calling `preventDefault()` there keeps the dialog open), or passes it to a render-prop child.\n *\n * @example\n * <Dialog.Close><Button appearance=\"subtle\">Cancel</Button></Dialog.Close>\n */\nexport const DialogClose = (props: DialogCloseProps) => {\n  const { requestOpen } = useDialogContext('Dialog.Close');\n  return useModalClosePart<DialogCloseRenderProps>(requestOpen, props, 'Dialog.Close');\n};\nDialogClose.displayName = 'DialogClose';\n\n/**\n * The surface's width cap per size. `full` lifts the caps, the margin, the radius and the border,\n * takes the viewport's dynamic height and pads the safe-area insets (`max()` keeps the 24px\n * padding where there is no inset, and never adds the two). The side insets are physical (the\n * left inset pads the left side in either direction), so the side padding is too: one class per\n * side, with no direction override that a consumer's padding class would leave behind.\n */\nconst sizeClasses: Record<DialogSize, string> = {\n  small: 'max-w-[400px]',\n  medium: 'max-w-[600px]',\n  large: 'max-w-[940px]',\n  full: 'm-0 h-dvh max-h-none max-w-none rounded-none border-0 pt-[max(1.5rem,env(safe-area-inset-top))] pb-[max(1.5rem,env(safe-area-inset-bottom))] pl-[max(1.5rem,env(safe-area-inset-left))] pr-[max(1.5rem,env(safe-area-inset-right))]', // wave-allow-physical: the safe-area insets are physical sides\n};\n\n/** The title-actions area of a `full` dialog moves by the safe-area insets, as the padding does. */\nconst fullTitleActionsClasses =\n  'top-[max(1rem,env(safe-area-inset-top))] end-[max(1rem,env(safe-area-inset-right))] wave-rtl:end-[max(1rem,env(safe-area-inset-left))]';\n\n/** The gap (px) between the titles' text and the title-actions area. */\nconst TITLE_ACTIONS_GAP = 8;\n\nconst BACKDROP_IGNORED_WARNING_KEY = 'Dialog.Content:backdrop-ignored';\nconst BACKDROP_IGNORED_WARNING =\n  'Dialog.Content: `backdrop` is ignored with `modalType=\"non-modal\"`: a non-modal dialog has no backdrop, so the page behind it stays usable.';\n\nconst NON_MODAL_FULL_WARNING_KEY = 'Dialog.Content:non-modal-full';\nconst NON_MODAL_FULL_WARNING =\n  'Dialog.Content: `size=\"full\"` with `modalType=\"non-modal\"` covers the whole page while leaving it usable, so Tab reaches controls hidden behind the dialog. Use `modalType=\"modal\"`, or a smaller size with the page\\'s controls kept clear of it.';\n\n/**\n * The width (px) of the title-actions area, measured with a `ResizeObserver` (`null` until the\n * first measurement, and without `ResizeObserver`). The observer's first callback arrives before\n * the next paint.\n */\nfunction useTitleActionsWidth(area: HTMLElement | null): number | null {\n  const [width, setWidth] = React.useState<number | null>(null);\n  React.useLayoutEffect(() => {\n    if (!area || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[entries.length - 1];\n      if (!entry) return;\n      setWidth(entry.borderBoxSize?.[0]?.inlineSize ?? area.offsetWidth);\n    });\n    observer.observe(area, { box: 'border-box' });\n    return () => {\n      observer.disconnect();\n      setWidth(null);\n    };\n  }, [area]);\n  return width;\n}\n\n/**\n * The dialog surface, rendered in a portal (inheriting the WaveProvider theme) while the dialog is\n * open, and kept there while it is closed, `hidden` and `inert`, when the Dialog has\n * `unmountOnClose={false}`: the backdrop, and the surface centred in the positioner (the\n * backdrop's sibling) with the title, the title-actions area (title actions, then the Close\n * button) and a scrolling body. It takes the full width up to its `size` and never exceeds the\n * viewport (the body scrolls, also sideways for content wider than the dialog); `size=\"full\"`\n * fills the viewport. Its 1rem gap to the viewport edges is its own margin, so a margin in\n * `className` replaces the gap: with the width and height caps lifted as well and its height set\n * to the viewport's, it fills the viewport. It is `role=\"dialog\"`, or `role=\"alertdialog\"` when the\n * Dialog has `modalType=\"alert\"` (a `role` you pass wins), and carries `data-modal-type` and\n * `data-size` with the resolved values. A non-modal dialog has no backdrop: the positioner only\n * centres the surface and lets presses through to the page. The titles' end padding follows the\n * width of the title-actions area (`--wave-dialog-title-end-padding`, 2rem until it is measured).\n *\n * It mounts through the presence core: the backdrop, the positioner and the surface render\n * `data-presence` (`entered` while open, `exited` while kept closed; `entering` and `exiting`\n * only while a motion of yours runs on the surface), and the backdrop and the positioner are\n * `inert` while exiting and `hidden` and `inert` while kept closed. No motion ships: animate the\n * surface with `data-[presence=…]:` classes in `className` (an enter's start as\n * `data-[presence=entering]:starting:`, each with a `motion-reduce:` counterpart); a closed\n * surface waits for that motion before it unmounts or hides, while focus, the trap and the\n * isolation follow the open state at once.\n */\nexport const DialogContent = ({\n  title,\n  size = 'medium',\n  backdrop,\n  closeButton,\n  titleAction,\n  closeLabel = 'Close',\n  children,\n  className,\n  style,\n  id,\n  onKeyDown,\n  ref,\n  ...rest\n}: DialogContentProps) => {\n  const {\n    open,\n    requestOpen,\n    modalType,\n    trigger,\n    finalFocusRef,\n    unmountOnClose,\n    registerContentId,\n  } = useDialogContext('Dialog.Content');\n  // Every surface mounts through the presence core (D5, D103), with no motion of its own: kept\n  // mounted while closed with `unmountOnClose={false}`, else removed once it has exited.\n  const {\n    isMounted,\n    ref: presenceRef,\n    presenceProps,\n  } = usePresence(open, { unmountOnExit: unmountOnClose });\n  const keptMounted = !unmountOnClose;\n  const generatedId = useId('wave-dialog');\n  const contentId = id ?? generatedId;\n  const propTitleId = useId('wave-dialog-title');\n  const titles = useTitleRegistry();\n\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const attachSurface = React.useCallback((node: HTMLDivElement | null) => {\n    surfaceRef.current = node;\n    setSurface(node);\n  }, []);\n  // Reports the surface's id to the root (the trigger's `aria-controls`) while it is mounted. A new\n  // `id` makes a new callback, which useMergedRefs re-attaches after the commit (re-registering).\n  const registerId = React.useCallback(\n    (node: HTMLDivElement | null) => (node ? registerContentId(contentId) : undefined),\n    [registerContentId, contentId],\n  );\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, attachSurface, registerId, presenceRef);\n  // The portal wrapper: a kept-mounted surface moves to the top of its stack when it opens\n  // (before the layer registers and the trap moves focus in).\n  const portalRef = React.useRef<HTMLDivElement | null>(null);\n  useRaiseOnOpen(open, keptMounted, portalRef);\n\n  // An alert dialog needs an answer: a backdrop press does not close it (Escape still does;\n  // useModalLayer registers its layer without outside presses).\n  const backdropPress = useBackdropPress(surfaceRef, modalType !== 'alert');\n  const onDismiss = useModalDismiss(requestOpen, 'Dialog', backdropPress.afterOutsidePress);\n  const layer = useModalLayer({\n    open,\n    modalType,\n    onDismiss,\n    refs: [surfaceRef],\n    container: surface,\n    triggerRef: trigger.focusRef,\n    finalFocusRef,\n  });\n  // A non-modal dialog keeps its place in the page's keyboard order right after its opener. The\n  // opener is captured whenever the dialog opens, so a modal dialog that turns non-modal while open\n  // (focus inside it by then) still knows it.\n  const nonModal = modalType === 'non-modal';\n  const opener = useModalOpener(open, trigger, surface);\n  const onTabOrderKeyDown = usePopoverTabOrder({\n    enabled: open && nonModal,\n    surface,\n    anchorRef: opener,\n    getPreviousStop: getTabbableThrough,\n  });\n  useUnnamedModalWarning(open ? surface : null, titles.hasTitle, 'Dialog.Content', 'Dialog.Title');\n  useOpenInsideWarning(open, keptMounted, layer.layerId, 'Dialog');\n\n  // A non-modal dialog has no backdrop: a given slot (not undefined, null or a boolean) is ignored.\n  const backdropIgnored =\n    nonModal && backdrop !== undefined && backdrop !== null && typeof backdrop !== 'boolean';\n  React.useEffect(() => {\n    if (backdropIgnored) warnOnce(BACKDROP_IGNORED_WARNING_KEY, BACKDROP_IGNORED_WARNING);\n  }, [backdropIgnored]);\n  // A full non-modal dialog covers the page it leaves usable (D87.8).\n  const coversUsablePage = open && nonModal && size === 'full';\n  React.useEffect(() => {\n    if (coversUsablePage) warnOnce(NON_MODAL_FULL_WARNING_KEY, NON_MODAL_FULL_WARNING);\n  }, [coversUsablePage]);\n\n  // The title-actions area (held in state) and the outlet `Dialog.Title` actions portal into. Both\n  // attach in the commit that mounts the surface, so a title's action is in the DOM in the next\n  // commit, the one in which the focus trap starts (it waits for the surface held in state). The\n  // area is measured only while the dialog is open (a kept-mounted closed one measures nothing).\n  const [titleActionsArea, setTitleActionsArea] = React.useState<HTMLDivElement | null>(null);\n  const [titleActionsOutlet, setTitleActionsOutlet] = React.useState<HTMLSpanElement | null>(null);\n  const titleActionsWidth = useTitleActionsWidth(open ? titleActionsArea : null);\n\n  // The height of the sticky Dialog.Footer, reserved as the body's scroll padding.\n  const [footerHeight, setFooterHeight] = React.useState<number | null>(null);\n  const surfaceContext = React.useMemo<ModalSurfaceContextValue>(\n    () => ({ ...titles.context, setFooterHeight, titleActionsOutlet }),\n    [titles.context, titleActionsOutlet],\n  );\n\n  if (!isMounted) return null;\n\n  const hasTitle = slotRendersContent(title);\n  // The titles' end padding: the area's width and a gap while it has a size, none while it is\n  // empty; unset (the 2rem fallback) until it is measured.\n  const titleEndPadding =\n    titleActionsWidth === null\n      ? undefined\n      : titleActionsWidth > 0\n        ? `${titleActionsWidth + TITLE_ACTIONS_GAP}px`\n        : '0px';\n  const surfaceStyle =\n    titleEndPadding === undefined\n      ? style\n      : ({ '--wave-dialog-title-end-padding': titleEndPadding, ...style } as React.CSSProperties);\n\n  return (\n    <Portal ref={portalRef} layerId={layer.layerId}>\n      {/* Each top-level element carries the presence attributes (D7, D103): hidden and inert while\n          kept closed, so a closed dialog leaves no backdrop over the page. */}\n      {!nonModal && (\n        <ModalBackdrop\n          backdrop={backdrop}\n          className={dialogContentClassNames.backdrop}\n          layerId={layer.layerId}\n          open={open}\n          onMouseDown={backdropPress.onMouseDown}\n          presenceProps={presenceProps}\n        />\n      )}\n      <div\n        {...presenceProps}\n        // Centres the surface and lets presses through to the backdrop (modal) or the page\n        // (non-modal) around it.\n        className={cn(\n          dialogContentClassNames.positioner,\n          'pointer-events-none fixed inset-0 flex items-center justify-center',\n        )}\n      >\n        <div\n          ref={mergedRef}\n          role={modalType === 'alert' ? 'alertdialog' : 'dialog'}\n          id={contentId}\n          aria-labelledby={hasTitle ? propTitleId : titles.titleId}\n          tabIndex={-1}\n          data-modal-type={modalType}\n          data-size={size}\n          {...rest}\n          data-presence={presenceProps['data-presence']}\n          style={surfaceStyle}\n          onKeyDown={composeEventHandlers(onKeyDown, onTabOrderKeyDown)}\n          className={cn(\n            dialogContentClassNames.root,\n            // The border marks the surface where the shadow cannot: in high contrast the page,\n            // the backdrop and the surface are black, and forced colors drop shadows. The 1rem gap\n            // to the viewport edges is the surface's own margin, not the positioner's padding, so\n            // a margin in `className` replaces it and a full-screen dialog can reach the edges.\n            // Its minimum width is zero, so content wider than the room inside the gap scrolls in\n            // the body instead of pushing the surface over the gap.\n            'pointer-events-auto relative m-4 flex min-w-0 max-h-[calc(100dvh-2rem)] w-full flex-col rounded-lg border border-border bg-background p-6 text-foreground shadow-64',\n            sizeClasses[size],\n            className,\n          )}\n        >\n          <ModalSurfaceContext.Provider value={surfaceContext}>\n            {hasTitle && (\n              <h2\n                id={propTitleId}\n                className={cn(\n                  dialogTitleClassNames.root,\n                  'pe-[var(--wave-dialog-title-end-padding,2rem)] text-subtitle-1 font-semibold',\n                )}\n              >\n                {title}\n              </h2>\n            )}\n            <div\n              ref={setTitleActionsArea}\n              className={cn(\n                dialogContentClassNames.titleActions,\n                'absolute end-4 top-4 flex items-start gap-1',\n                size === 'full' && fullTitleActionsClasses,\n              )}\n            >\n              {slotRendersContent(titleAction)\n                ? renderSlot(\n                    titleAction,\n                    'span',\n                    cn(dialogContentClassNames.titleAction, 'inline-flex items-center gap-1'),\n                  )\n                : null}\n              {/* Each Dialog.Title action portals here, in mount order. */}\n              <span ref={setTitleActionsOutlet} className=\"contents\" />\n              <ModalCloseButton\n                componentName=\"Dialog.Content\"\n                closeButton={closeButton}\n                closeLabel={closeLabel}\n                onClose={(event) => requestOpen(false, { reason: 'close-button', event })}\n                className={cn(dialogContentClassNames.closeButton, 'text-muted-foreground')}\n              />\n            </div>\n            <div\n              // The scroll padding keeps a focused field above the sticky footer (WCAG 2.4.11).\n              className={cn(\n                dialogContentClassNames.body,\n                '-mx-1 mt-1 min-h-0 flex-1 overflow-y-auto scroll-pb-(--wave-dialog-footer-height) p-1 text-body-1',\n              )}\n              style={\n                footerHeight === null\n                  ? undefined\n                  : ({ '--wave-dialog-footer-height': `${footerHeight}px` } as React.CSSProperties)\n              }\n            >\n              {children}\n            </div>\n          </ModalSurfaceContext.Provider>\n        </div>\n      </div>\n    </Portal>\n  );\n};\nDialogContent.displayName = 'DialogContent';\n\n/**\n * A heading that names the dialog (`aria-labelledby`), for rich titles or custom layouts. Render it\n * inside `Dialog.Content` (instead of the `title` prop). Like the `title` heading, its end padding\n * follows the width of the dialog's title-actions area (2rem until it is measured), so a long first\n * line stays clear of the title actions and the Close button; a `className` padding wins. Its\n * `action` renders in that area, before the Close button, and never inside the heading.\n */\nexport const DialogTitle = ({\n  id,\n  action,\n  className,\n  children,\n  ref,\n  ...rest\n}: DialogTitleProps) => {\n  const { id: titleId, ref: titleRef } = useModalTitle('Dialog.Title', 'Dialog.Content', id, ref);\n  // `undefined` outside Dialog.Content (a Drawer), `null` until the content's outlet is attached.\n  const outlet = React.useContext(ModalSurfaceContext)?.titleActionsOutlet;\n  const heading = (\n    <h2\n      {...rest}\n      id={titleId}\n      ref={titleRef}\n      className={cn(\n        dialogTitleClassNames.root,\n        'pe-[var(--wave-dialog-title-end-padding,2rem)] text-subtitle-1 font-semibold text-foreground',\n        className,\n      )}\n    >\n      {children}\n    </h2>\n  );\n  if (!slotRendersContent(action)) return heading;\n  const actionElement = renderSlot(\n    action,\n    'span',\n    cn(dialogTitleClassNames.action, 'inline-flex items-center gap-1'),\n  );\n  return (\n    <>\n      {heading}\n      {outlet === undefined ? actionElement : outlet && createPortal(actionElement, outlet)}\n    </>\n  );\n};\nDialogTitle.displayName = 'DialogTitle';\n\n/**\n * `Dialog.Footer` inside `Dialog.Content`. The body is `p-1`, and sticky positioning stops at its\n * padding edge: `-bottom-1` with `-mb-1 pb-2` covers the body's bottom padding, `-mx-1 px-1` its\n * focus-ring inset, and `pt-3` separates the actions from the content scrolling under them.\n */\nconst stickyFooterClasses =\n  'sticky -bottom-1 z-10 -mx-1 -mb-1 mt-6 flex justify-end gap-2 bg-background px-1 pb-2 pt-3';\n\n/**\n * `Dialog.Footer` where no body reserves its height as scroll padding (a Drawer's body): a plain\n * action row, which never covers a focused field.\n */\nconst footerRowClasses = 'mt-6 flex justify-end gap-2';\n\n/**\n * Action row at the end of the dialog body. It stays where you render it in the DOM and sticks to\n * the bottom of the body while long content scrolls under it (with an opaque background); the body\n * reserves its height as scroll padding, so a focused field is never hidden behind it. Inside a\n * `<form>` that wraps the fields and the footer it sticks too: make it the form's last child.\n * Render it inside `Dialog.Content`: outside it, it would stay on the page while the dialog is\n * closed (a development warning says so). Inside a `Drawer`, whose body reserves no footer height,\n * it does not stick: it is an action row at the end of the content. Render one `Dialog.Footer` per\n * `Dialog.Content`: with two at once, the body reserves the height of the one measured last, and\n * unmounting either clears it until the other resizes (swapping one footer for another is fine).\n */\nexport const DialogFooter = ({ children, className, ref, ...rest }: DialogFooterProps) => {\n  const surfaceContext = React.useContext(ModalSurfaceContext);\n  const outsideContent = surfaceContext === null;\n  const setFooterHeight = surfaceContext?.setFooterHeight;\n  const [footer, setFooter] = React.useState<HTMLDivElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, setFooter);\n\n  React.useEffect(() => {\n    if (!outsideContent) return;\n    warnOnce(\n      'Dialog.Footer:outside-content',\n      'Dialog.Footer must be rendered inside Dialog.Content. Outside it, the footer stays on the page while the dialog is closed.',\n    );\n  }, [outsideContent]);\n\n  // Reports the footer's border-box height to Dialog.Content. The observer's first callback,\n  // delivered before the next paint, supplies the first value; without ResizeObserver the body\n  // keeps its default scroll padding.\n  React.useLayoutEffect(() => {\n    if (!footer || !setFooterHeight || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[entries.length - 1];\n      if (!entry) return;\n      setFooterHeight(entry.borderBoxSize?.[0]?.blockSize ?? footer.offsetHeight);\n    });\n    observer.observe(footer, { box: 'border-box' });\n    return () => {\n      observer.disconnect();\n      setFooterHeight(null);\n    };\n  }, [footer, setFooterHeight]);\n\n  return (\n    <div\n      ref={mergedRef}\n      {...rest}\n      // Sticky only where the surface reserves the footer's height (Dialog.Content).\n      className={cn(\n        dialogFooterClassNames.root,\n        setFooterHeight ? stickyFooterClasses : footerRowClasses,\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\nDialogFooter.displayName = 'DialogFooter';\n\n/**\n * A dialog (Fluent UI v2 style), modal by default: `Dialog` holds the open state; `Dialog.Trigger`\n * opens and closes it and `Dialog.Content` renders the surface in a portal while open (and, with\n * `unmountOnClose={false}`, keeps it there while closed, `hidden` and `inert`).\n *\n * - **Modal**: focus moves into the dialog and Tab stays inside it (toasts included), the rest of\n *   the page is `inert` (instead of `aria-modal`, so toasts and live regions stay announced), and\n *   the page does not scroll.\n * - **Closing**: Escape (only the topmost layer: a popup opened inside closes first), a click on\n *   the backdrop (a drag that starts inside does not close it), the Close button and `Dialog.Close`.\n *   `onOpenChange` gets the reason as its second argument (`details.reason`), so a controlled\n *   dialog can refuse some of them. A backdrop press blurs the focused field before the dialog\n *   closes, so a typed value is committed as with the Close button; when a controlled dialog\n *   refuses the press, the field gets focus back (an alert dialog's press leaves focus where it\n *   was). Focus returns to the first of these that can take focus: `finalFocusRef`, the element\n *   that had focus when the dialog opened, the trigger, an element next to where that opener was.\n * - **Alert dialogs**: `modalType=\"alert\"` renders `role=\"alertdialog\"` for a confirmation that\n *   needs an answer; a backdrop press does not close it.\n * - **Non-modal dialogs**: `modalType=\"non-modal\"` leaves the page usable (no backdrop, no focus\n *   trap, nothing inert, the page scrolls). Focus moves in on open; Tab and Shift+Tab leave the\n *   dialog in the page's order right after the element that opened it; Escape closes it only while\n *   focus is inside it; presses on the page never close it; focus returns to the opener only from\n *   inside. Keep the page's controls clear of the dialog, which covers the page under it.\n * - **Size**: `Dialog.Content` `size` caps the width at 400px (`small`), 600px (`medium`, the\n *   default) or 940px (`large`); `full` covers the viewport and pads its safe-area insets.\n * - **Backdrop**: the backdrop is the surface's sibling and a slot (`backdrop`: `null` removes it,\n *   `appearance` picks `dimmed` or `transparent`). A modal opened over another modal dims the page\n *   once: its backdrop is transparent while the lower one is open.\n * - **Close button and title actions**: `closeButton` sets the built-in Close button's content, or\n *   hides it (`null`); a button passed there is merged into it. `titleAction` and `Dialog.Title`'s\n *   `action` place header buttons before the Close button in the top end corner, in DOM and Tab\n *   order, and the titles' end padding makes room for them. Initial focus goes to the first\n *   focusable element: a title action, else the Close button.\n * - **Footer**: `Dialog.Footer` sticks to the bottom of the scrolling body, and the body keeps a\n *   focused field above it.\n * - **Kept mounted**: `unmountOnClose={false}` keeps the content mounted while the dialog is\n *   closed, so a form keeps what was typed and the components inside keep their state; each open\n *   focuses the first focusable element again (an `autoFocus` inside never applies), and a kept\n *   dialog opened while another overlay is open stacks above it.\n * - **Presence**: the surface mounts through the presence core and renders `data-presence`; no\n *   motion ships, and `data-[presence=…]:` classes on `Dialog.Content` animate it.\n * - **Naming**: give `Dialog.Content` a `title`, a `Dialog.Title`, or `aria-label`.\n *\n * The sub-components are also exported under flat names (`DialogTrigger`, `DialogContent`,\n * `DialogFooter`, `DialogTitle`, `DialogClose`) for React Server Components, which cannot use the\n * dotted form; dotted access (`Dialog.Content`) needs a client file.\n *\n * @example\n * <Dialog>\n *   <Dialog.Trigger><Button>Delete</Button></Dialog.Trigger>\n *   <Dialog.Content title=\"Delete file?\">\n *     This cannot be undone.\n *     <Dialog.Footer>\n *       <Dialog.Close><Button appearance=\"subtle\">Cancel</Button></Dialog.Close>\n *       <Button appearance=\"primary\" onClick={remove}>Delete</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog>\n */\nexport const Dialog = /* @__PURE__ */ Object.assign(DialogRoot, {\n  Trigger: DialogTrigger,\n  Content: DialogContent,\n  Footer: DialogFooter,\n  Title: DialogTitle,\n  Close: DialogClose,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA+RA,IAAMI,IAAgBD,EAAM,cAAyC,IAAI;AACzE,EAAc,cAAc;AAE5B,IAAME,IAAyC;CAC7C,MAAM;CACN,mBAAmB,CAAC;CACpB,WAAW;CACX,SAASC;CACT,eAAe,KAAA;CACf,gBAAgB;CAChB,WAAW,KAAA;CACX,+BAA+B,CAAC;AAClC;AAEA,SAASC,EAAiB,GAA2C;CACnE,OAAOC,EAAmBJ,GAAeK,GAAe,gBAAgBJ,CAAkB;AAC5F;AAKA,IAAMK,KAAc,EAClB,SACA,gBACA,iBACA,eAAY,SACZ,kBACA,oBAAiB,IACjB,kBACiB;CACjB,IAAM,CAACC,GAAWC,KAAeC,EAAkBC,GAAMC,GAAaC,CAAY,GAI5EC,IAAWC,EAAY,GACvBC,IAASR,KAAaM,GACtBG,IAAUC,GAAgB;CAGhC,EAAuBD,GAASD,CAAM;CACtC,IAAM,CAACG,GAAWC,KAAgBpB,EAAM,SAA6B,KAAA,CAAS,GACxEqB,IAAoBrB,EAAM,aAAa,OAC3CoB,EAAaE,CAAE,SACFF,GAAc,MAAaG,MAAYD,IAAK,KAAA,IAAYC,CAAQ,IAC5E,CAAC,CAAC,GAECC,IAAUxB,EAAM,eACb;EACL,MAAMgB;EACN;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACEA;EACAP;EACAgB;EACAR;EACAS;EACAC;EACAR;EACAE;CACF,CACF;CAEA,OAAO,kBAACpB,EAAc,UAAf;EAAwB,OAAOuB;EAAU;CAAiC,CAAA;AACnF;AACA,EAAW,cAAc;AAgBzB,IAAaI,KAAiB,MAA8B;CAC1D,IAAM,EAAE,SAAM,gBAAa,YAAS,iBAAcxB,EAAiB,gBAAgB;CACnF,OAAOyB,GACL;EAAE;EAAM;EAAa;EAAS,YAAYV;CAAU,GACpDW,GACA,gBACF;AACF;AACA,EAAc,cAAc;AAS5B,IAAaC,KAAe,MAA4B;CACtD,IAAM,EAAE,mBAAgB3B,EAAiB,cAAc;CACvD,OAAO4B,GAA0CvB,GAAaqB,GAAO,cAAc;AACrF;AACA,EAAY,cAAc;AAS1B,IAAMG,KAA0C;CAC9C,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;AACR,GAGMC,KACJ,0IAGIC,KAAoB,GAEpBC,KAA+B,mCAC/BC,KACJ,iJAEIC,KAA6B,iCAC7BC,KACJ;AAOF,SAASC,GAAqB,GAAyC;CACrE,IAAM,CAACC,GAAOC,KAAY1C,EAAM,SAAwB,IAAI;CAc5D,OAbAA,EAAM,sBAAsB;EAC1B,IAAI,CAAC2C,KAAQ,OAAO,iBAAmB,KAAa;EACpD,IAAMC,IAAW,IAAI,gBAAgB,MAAY;GAC/C,IAAMC,IAAQC,EAAQA,EAAQ,SAAS;GACvC,AAAKD,KACLH,EAASG,EAAM,gBAAgB,EAAE,EAAE,cAAcF,EAAK,WAAW;EACnE,CAAC;EAED,OADAC,EAAS,QAAQD,GAAM,EAAE,KAAK,aAAa,CAAC,SAC/B;GAEX,AADAC,EAAS,WAAW,GACpBF,EAAS,IAAI;EACf;CACF,GAAG,CAACC,CAAI,CAAC,GACFF;AACT;AA0BA,IAAaM,KAAiB,EAC5B,UACA,UAAO,UACP,aACA,iBACA,gBACA,gBAAa,SACb,cACA,eACA,UACA,OACA,cACA,QACA,GAAGC,QACqB;CACxB,IAAM,EACJ,SACA,gBACA,cACA,YACA,kBACA,mBACA,yBACE5C,EAAiB,gBAAgB,GAG/B,EACJ,cACA,KAAK6C,GACL,qBACEC,EAAYvC,GAAM,EAAE,eAAegB,EAAe,CAAC,GACjDwB,IAAc,CAACxB,GACfyB,KAAcvD,EAAM,aAAa,GACjCsB,IAAYG,KAAM8B,IAClBC,IAAcxD,EAAM,mBAAmB,GACvCyD,IAASC,GAAiB,GAE1B,CAACC,GAASC,MAAczD,EAAM,SAAgC,IAAI,GAClE0D,IAAa1D,EAAM,OAA8B,IAAI,GACrD2D,KAAgB3D,EAAM,aAAa,MAAgC;EAEvE,AADA,EAAW,UAAU4D,GACrBH,GAAWG,CAAI;CACjB,GAAG,CAAC,CAAC,GAGCC,KAAa7D,EAAM,aACtB,MAAiC4D,IAAOvC,EAAkBF,CAAS,IAAI,KAAA,GACxE,CAACE,GAAmBF,CAAS,CAC/B,GACM2C,KAAYC,EAA8BC,GAAKL,IAAeE,IAAYZ,CAAW,GAGrFgB,IAAYjE,EAAM,OAA8B,IAAI;CAC1D,GAAeW,GAAMwC,GAAac,CAAS;CAI3C,IAAMC,IAAgBC,GAAiBT,GAAYjC,MAAc,OAAO,GAClE2C,KAAYC,GAAgB5D,GAAa,UAAUyD,EAAc,iBAAiB,GAClFI,IAAQC,EAAc;EAC1B;EACA;EACA;EACA,MAAM,CAACb,CAAU;EACjB,WAAWF;EACX,YAAYvC,EAAQ;EACpB;CACF,CAAC,GAIKuD,IAAW/C,MAAc,aACzBgD,KAASC,GAAe/D,GAAMM,GAASuC,CAAO,GAC9CmB,KAAoBC,EAAmB;EAC3C,SAASjE,KAAQ6D;EACjB;EACA,WAAWC;EACX,iBAAiBI;CACnB,CAAC;CAED,AADAC,GAAuBnE,IAAO6C,IAAU,MAAMF,EAAO,UAAU,kBAAkB,cAAc,GAC/FyB,GAAqBpE,GAAMwC,GAAamB,EAAM,SAAS,QAAQ;CAG/D,IAAMU,IACJR,KAAYS,KAAuC,QAAQ,OAAOA,KAAa;CACjF,EAAM,gBAAgB;EACpB,AAAID,KAAiBE,EAAS9C,IAA8BC,EAAwB;CACtF,GAAG,CAAC2C,CAAe,CAAC;CAEpB,IAAMG,IAAmBxE,KAAQ6D,KAAYY,MAAS;CACtD,EAAM,gBAAgB;EACpB,AAAID,KAAkBD,EAAS5C,IAA4BC,EAAsB;CACnF,GAAG,CAAC4C,CAAgB,CAAC;CAMrB,IAAM,CAACE,IAAkBC,MAAuBtF,EAAM,SAAgC,IAAI,GACpF,CAACuF,GAAoBC,MAAyBxF,EAAM,SAAiC,IAAI,GACzFyF,IAAoBjD,GAAqB7B,IAAO0E,KAAmB,IAAI,GAGvE,CAACK,IAAcC,MAAmB3F,EAAM,SAAwB,IAAI,GACpE4F,KAAiB5F,EAAM,eACpB;EAAE,GAAGsD,EAAO;EAAS;EAAiB;CAAmB,IAChE,CAACA,EAAO,SAASiC,CAAkB,CACrC;CAEA,IAAI,CAACM,GAAW,OAAO;CAEvB,IAAMC,KAAWC,EAAmBC,CAAK,GAGnCC,IACJR,MAAsB,OAClB,KAAA,IACAA,IAAoB,IAClB,GAAGA,IAAoBtD,GAAkB,MACzC,OACF+D,KACJD,MAAoB,KAAA,IAChBE,IACC;EAAE,mCAAmCF;EAAiB,GAAGE;CAAM;CAEtE,OACE,kBAACC,GAAD;EAAQ,KAAKnC;EAAW,SAASK,EAAM;EAAvC,UAAA,CAGG,CAACE,KACA,kBAAC6B,IAAD;GACY;GACV,WAAWC,EAAwB;GACnC,SAAShC,EAAM;GACT;GACN,aAAaJ,EAAc;GACZ;EAChB,CAAA,GAEH,kBAAC,OAAD;GACE,GAAIqC;GAGJ,WAAWC,EACTF,EAAwB,YACxB,oEACF;GAEA,UAAA,kBAAC,OAAD;IACE,KAAKxC;IACL,MAAMrC,MAAc,UAAU,gBAAgB;IAC9C,IAAIN;IACJ,mBAAiB2E,KAAWzC,IAAcC,EAAO;IACjD,UAAU;IACV,mBAAiB7B;IACjB,aAAW2D;IACX,GAAIpC;IACJ,iBAAeuD,EAAc;IAC7B,OAAOL;IACP,WAAWO,EAAqBC,GAAW/B,EAAiB;IAC5D,WAAW6B,EACTF,EAAwB,MAOxB,uKACArE,GAAYmD,IACZuB,EACF;IAEA,UAAA,kBAACC,EAAoB,UAArB;KAA8B,OAAOhB;KAArC,UAAA;MACGE,MACC,kBAAC,MAAD;OACE,IAAIzC;OACJ,WAAWmD,EACTK,EAAsB,MACtB,8EACF;OAEC,UAAAb;MACC,CAAA;MAEN,kBAAC,OAAD;OACE,KAAKV;OACL,WAAWkB,EACTF,EAAwB,cACxB,+CACAlB,MAAS,UAAUlD,EACrB;OANF,UAAA;QAQG6D,EAAmBe,CAAW,IAC3BC,EACED,GACA,QACAN,EAAGF,EAAwB,aAAa,gCAAgC,CAC1E,IACA;QAEJ,kBAAC,QAAD;SAAM,KAAKd;SAAuB,WAAU;QAAY,CAAA;QACxD,kBAACwB,IAAD;SACE,eAAc;SACD;SACD;SACZ,UAAU,MAAUvG,EAAY,IAAO;UAAE,QAAQ;UAAgB;SAAM,CAAC;SACxE,WAAW+F,EAAGF,EAAwB,aAAa,uBAAuB;QAC3E,CAAA;OACE;;MACL,kBAAC,OAAD;OAEE,WAAWE,EACTF,EAAwB,MACxB,mGACF;OACA,OACEZ,OAAiB,OACb,KAAA,IACC,EAAE,+BAA+B,GAAGA,GAAa,IAAI;OAG3D;MACE,CAAA;KACuB;;GAC3B,CAAA;EACF,CAAA,CACC;;AAEZ;AACA,EAAc,cAAc;AAS5B,IAAauB,KAAe,EAC1B,OACA,WACA,cACA,aACA,QACA,GAAGjE,QACmB;CACtB,IAAM,EAAE,IAAIkE,GAAS,KAAKC,MAAaC,EAAc,gBAAgB,kBAAkB9F,GAAI0C,CAAG,GAExFqD,IAASrH,EAAM,WAAW4G,CAAmB,CAAC,EAAE,oBAChDU,IACJ,kBAAC,MAAD;EACE,GAAItE;EACJ,IAAIkE;EACJ,KAAKC;EACL,WAAWX,EACTK,EAAsB,MACtB,gGACAF,CACF;EAEC;CACC,CAAA;CAEN,IAAI,CAACZ,EAAmBwB,CAAM,GAAG,OAAOD;CACxC,IAAME,IAAgBT,EACpBQ,GACA,QACAf,EAAGK,EAAsB,QAAQ,gCAAgC,CACnE;CACA,OACE,kBAAA/G,GAAA,EAAA,UAAA,CACGwH,GACAD,MAAW,KAAA,IAAYG,IAAgBH,KAAUK,EAAaF,GAAeH,CAAM,CACpF,EAAA,CAAA;AAEN;AACA,EAAY,cAAc;AAO1B,IAAMM,IACJ,8FAMIC,IAAmB,+BAaZC,KAAgB,EAAE,aAAU,cAAW,QAAK,GAAG7E,QAA8B;CACxF,IAAM4C,IAAiB5F,EAAM,WAAW4G,CAAmB,GACrDkB,IAAiBlC,MAAmB,MACpCD,IAAkBC,GAAgB,iBAClC,CAACmC,GAAQC,KAAahI,EAAM,SAAgC,IAAI,GAChE8D,IAAYC,EAA8BC,GAAKgE,CAAS;CA2B9D,OAzBAhI,EAAM,gBAAgB;EACpB,AAAK8H,KACL5C,EACE,iCACA,4HACF;CACF,GAAG,CAAC4C,CAAc,CAAC,GAKnB9H,EAAM,sBAAsB;EAC1B,IAAI,CAAC+H,KAAU,CAACpC,KAAmB,OAAO,iBAAmB,KAAa;EAC1E,IAAM/C,IAAW,IAAI,gBAAgB,MAAY;GAC/C,IAAMC,IAAQC,EAAQA,EAAQ,SAAS;GACvC,AAAKD,KACL8C,EAAgB9C,EAAM,gBAAgB,EAAE,EAAE,aAAakF,EAAO,YAAY;EAC5E,CAAC;EAED,OADAnF,EAAS,QAAQmF,GAAQ,EAAE,KAAK,aAAa,CAAC,SACjC;GAEX,AADAnF,EAAS,WAAW,GACpB+C,EAAgB,IAAI;EACtB;CACF,GAAG,CAACoC,GAAQpC,CAAe,CAAC,GAG1B,kBAAC,OAAD;EACE,KAAK7B;EACL,GAAId;EAEJ,WAAWwD,EACTyB,EAAuB,MACvBtC,IAAkBgC,IAAsBC,GACxCjB,CACF;EAEC;CACE,CAAA;AAET;AACA,EAAa,cAAc;AA6D3B,IAAauB,IAAyB,uBAAO,OAAO3H,GAAY;CAC9D,SAASqB;CACT,SAASmB;CACT,QAAQ8E;CACR,OAAOZ;CACP,OAAOlF;AACT,CAAC"}

package/dist/components/overlays/Drawer.panel.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../hooks/useMergedRefs.cjs"),a=require("../../hooks/useIsClient.cjs"),o=require("../../hooks/usePresence.cjs"),s=require("../portal/Portal.cjs"),c=require("../../lib/styles.cjs"),l=require("../../hooks/useRestoreFocus.cjs"),u=require("./Popover.shared.cjs"),d=require("./Dialog.shared.cjs"),ee=require("../../hooks/useModalLayer.cjs"),te=require("./Dialog.slots.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");function m(e,t){let n=a.useIsClient();return e===`inline`?t:t&&n}function h(e){return e===`bottom`?`height`:`width`}var g={width:{small:`w-80`,medium:`w-148`,large:`w-235`,full:`w-full`},height:{small:`h-80`,medium:`h-148`,large:`h-235`,full:`h-full`}},_={start:`border-e`,end:`border-s`,left:`border-r`,right:`border-l`,bottom:`border-t`},v={start:`start-0 top-0 h-full max-w-full`,end:`end-0 top-0 h-full max-w-full`,left:`left-0 top-0 h-full max-w-full`,right:`right-0 top-0 h-full max-w-full`,bottom:`inset-x-0 bottom-0 w-full max-h-full`};function y(e,t){return e===`bottom`&&t!==`full`?`pb-[env(safe-area-inset-bottom)]`:`pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]`}function ne(e,t){return[v[e],_[e],g[h(e)][t],y(e,t)].join(` `)}var re=[`relative flex min-h-0 shrink-0 flex-col max-w-full bg-background text-foreground`,`border-transparent data-[separator]:border-border`,c.forcedColors.border].join(` `);function b(e,t){let n=h(e);return[_[e],n===`height`?`w-full max-h-full`:``,g[n][t]].filter(Boolean).join(` `)}var ie=`fixed flex flex-col border-border bg-background text-foreground shadow-64`,x=({componentName:e,type:a,open:c,requestOpen:m,position:h,size:g,separator:_,modalType:v,unmountOnClose:y,inlineAs:x,trigger:S,finalFocusRef:C,rootClassName:w,backdropClassName:T,backdrop:E,id:D,className:O,onKeyDown:k,ref:A,children:j,...M})=>{let N=a===`inline`,P=!N,F=v===`non-modal`,I=P&&F,L=!y,{isMounted:R,ref:z,presenceProps:B}=o.usePresence(c,{unmountOnExit:y}),[V,H]=f.useState(null),[U,W]=f.useState(null),G=f.useRef(null),K=f.useCallback(e=>{if(e)return G.current=e,H(e),()=>{G.current===e&&(G.current=null),H(null)}},[]),q=f.useCallback(e=>{if(e)return G.current=e,W(e),()=>{G.current===e&&(G.current=null),W(null)}},[]),J=i.useMergedRefs(A,K,z),ae=i.useMergedRefs(A,q,z);l.useRestoreFocus({enabled:c&&N,container:U,triggerRef:S.focusRef,finalFocusRef:C,requireFocusInside:!0});let Y=f.useRef(null);d.useRaiseOnOpen(c&&P,L,Y);let X=d.useBackdropPress(G,v!==`alert`),oe=d.useModalDismiss(m,e,X.afterOutsidePress),Z=ee.useModalLayer({open:c&&P,modalType:v,onDismiss:oe,refs:[G],container:V,triggerRef:S.focusRef,finalFocusRef:C}),se=d.useModalOpener(c&&P,S,V),ce=u.usePopoverTabOrder({enabled:c&&I,surface:V,anchorRef:se,getPreviousStop:u.getTabbableThrough});d.useOpenInsideWarning(c,L,Z.layerId,e,G);let Q=(F||N)&&E!=null&&typeof E!=`boolean`;f.useEffect(()=>{Q&&n.warnOnce(`${e}:backdrop-ignored`,`${e}: \`backdrop\` is ignored: a non-modal or inline drawer has no backdrop, so the page around it stays usable.`)},[Q,e]);let $=c&&I&&g===`full`;return f.useEffect(()=>{$&&n.warnOnce(`${e}:non-modal-full`,`${e}: \`size="full"\` with \`modalType="non-modal"\` covers the whole page while leaving it usable, so Tab reaches controls hidden behind the drawer. Use \`modalType="modal"\`, \`type="inline"\`, or a smaller size with its room reserved in the page layout.`)},[$,e]),R?N?(0,p.jsx)(x,{ref:ae,id:D,"data-type":`inline`,"data-position":h,"data-size":g,"data-separator":_?``:void 0,...M,...B,onKeyDown:k,className:t.cn(w,re,b(h,g),O),children:j}):(0,p.jsxs)(s.Portal,{ref:Y,layerId:Z.layerId,children:[!F&&(0,p.jsx)(te.ModalBackdrop,{backdrop:E,className:T,layerId:Z.layerId,open:c,onMouseDown:X.onMouseDown,presenceProps:B}),(0,p.jsx)(`div`,{ref:J,role:v===`alert`?`alertdialog`:`dialog`,id:D,tabIndex:-1,"data-type":`overlay`,"data-position":h,"data-size":g,"data-modal-type":v,...M,...B,onKeyDown:r.composeEventHandlers(k,ce),className:t.cn(w,ie,ne(h,g),O),children:j})]}):null};x.displayName=`DrawerPanel`,exports.DrawerPanel=x,exports.useDrawerOpen=m;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../hooks/useMergedRefs.cjs"),a=require("../../hooks/useIsClient.cjs"),ee=require("../../hooks/usePresence.cjs"),o=require("../../hooks/useRestoreFocus.cjs"),s=require("../../hooks/useModalLayer.cjs"),c=require("../../lib/styles.cjs"),l=require("../portal/Portal.cjs"),u=require("./Popover.shared.cjs"),d=require("./Dialog.shared.cjs"),f=require("./Dialog.slots.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");function h(e,t){let n=a.useIsClient();return e===`inline`?t:t&&n}function g(e){return e===`bottom`?`height`:`width`}var _={width:{small:`w-80`,medium:`w-148`,large:`w-235`,full:`w-full`},height:{small:`h-80`,medium:`h-148`,large:`h-235`,full:`h-full`}},v={start:`border-e`,end:`border-s`,left:`border-r`,right:`border-l`,bottom:`border-t`},y={start:`start-0 top-0 h-full max-w-full`,end:`end-0 top-0 h-full max-w-full`,left:`left-0 top-0 h-full max-w-full`,right:`right-0 top-0 h-full max-w-full`,bottom:`inset-x-0 bottom-0 w-full max-h-full`};function b(e,t){return e===`bottom`&&t!==`full`?`pb-[env(safe-area-inset-bottom)]`:`pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]`}function te(e,t){return[y[e],v[e],_[g(e)][t],b(e,t)].join(` `)}var ne=[`relative flex min-h-0 shrink-0 flex-col max-w-full bg-background text-foreground`,`border-transparent data-[separator]:border-border`,c.forcedColors.border].join(` `);function x(e,t){let n=g(e);return[v[e],n===`height`?`w-full max-h-full`:``,_[n][t]].filter(Boolean).join(` `)}var re=`fixed flex flex-col border-border bg-background text-foreground shadow-64`,S=({componentName:e,type:a,open:c,requestOpen:h,position:g,size:_,separator:v,modalType:y,unmountOnClose:b,inlineAs:S,trigger:C,finalFocusRef:w,rootClassName:T,backdropClassName:ie,backdrop:E,id:D,className:O,onKeyDown:k,ref:A,children:j,...M})=>{let N=a===`inline`,P=!N,F=y===`non-modal`,I=P&&F,L=!b,{isMounted:R,ref:z,presenceProps:B}=ee.usePresence(c,{unmountOnExit:b}),[V,H]=p.useState(null),[U,W]=p.useState(null),G=p.useRef(null),K=p.useCallback(e=>{if(e)return G.current=e,H(e),()=>{G.current===e&&(G.current=null),H(null)}},[]),q=p.useCallback(e=>{if(e)return G.current=e,W(e),()=>{G.current===e&&(G.current=null),W(null)}},[]),J=i.useMergedRefs(A,K,z),ae=i.useMergedRefs(A,q,z);o.useRestoreFocus({enabled:c&&N,container:U,triggerRef:C.focusRef,finalFocusRef:w,requireFocusInside:!0});let Y=p.useRef(null);d.useRaiseOnOpen(c&&P,L,Y);let X=d.useBackdropPress(G,y!==`alert`),oe=d.useModalDismiss(h,e,X.afterOutsidePress),Z=s.useModalLayer({open:c&&P,modalType:y,onDismiss:oe,refs:[G],container:V,triggerRef:C.focusRef,finalFocusRef:w}),se=d.useModalOpener(c&&P,C,V),ce=u.usePopoverTabOrder({enabled:c&&I,surface:V,anchorRef:se,getPreviousStop:u.getTabbableThrough});d.useOpenInsideWarning(c,L,Z.layerId,e,G);let Q=(F||N)&&E!=null&&typeof E!=`boolean`;p.useEffect(()=>{Q&&n.warnOnce(`${e}:backdrop-ignored`,`${e}: \`backdrop\` is ignored: a non-modal or inline drawer has no backdrop, so the page around it stays usable.`)},[Q,e]);let $=c&&I&&_===`full`;return p.useEffect(()=>{$&&n.warnOnce(`${e}:non-modal-full`,`${e}: \`size="full"\` with \`modalType="non-modal"\` covers the whole page while leaving it usable, so Tab reaches controls hidden behind the drawer. Use \`modalType="modal"\`, \`type="inline"\`, or a smaller size with its room reserved in the page layout.`)},[$,e]),R?N?(0,m.jsx)(S,{ref:ae,id:D,"data-type":`inline`,"data-position":g,"data-size":_,"data-separator":v?``:void 0,...M,...B,onKeyDown:k,className:t.cn(T,ne,x(g,_),O),children:j}):(0,m.jsxs)(l.Portal,{ref:Y,layerId:Z.layerId,children:[!F&&(0,m.jsx)(f.ModalBackdrop,{backdrop:E,className:ie,layerId:Z.layerId,open:c,onMouseDown:X.onMouseDown,presenceProps:B}),(0,m.jsx)(`div`,{ref:J,role:y===`alert`?`alertdialog`:`dialog`,id:D,tabIndex:-1,"data-type":`overlay`,"data-position":g,"data-size":_,"data-modal-type":y,...M,...B,onKeyDown:r.composeEventHandlers(k,ce),className:t.cn(T,re,te(g,_),O),children:j})]}):null};S.displayName=`DrawerPanel`,exports.DrawerPanel=S,exports.useDrawerOpen=h;
 //# sourceMappingURL=Drawer.panel.cjs.map

package/dist/components/overlays/Drawer.panel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.panel.cjs","names":["useIsClient","forcedColors","usePresence","React","useMergedRefs","useBackdropPress","useModalDismiss","useModalLayer","useModalOpener","usePopoverTabOrder","getTabbableThrough","InlinePanel","cn","Portal","ModalBackdrop","composeEventHandlers","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_useMergedRefs","require_useIsClient","require_usePresence","require_Portal","require_styles","require_useRestoreFocus","require_Popover_shared","require_Dialog_shared","require_useModalLayer","require_Dialog_slots","react","react_jsx_runtime","useDrawerOpen","isClient","type","openState","getDrawerSizeAxis","position","drawerSizeClasses","drawerEdgeClasses","overlayPlacementClasses","getOverlayInsetClasses","size","getOverlayPanelClasses","inlinePanelClasses","getInlinePanelClasses","axis","OVERLAY_PANEL_CLASSES","DrawerPanel","rest","inline","overlay","nonModal","modalType","nonModalOverlay","keptMounted","unmountOnClose","presenceRef","open","overlayPanel","setOverlayPanel","inlinePanel","setInlinePanel","panelRef","attachOverlayPanel","node","attachInlinePanel","overlayRef","ref","inlineRef","trigger","portalRef","backdropPress","onDismiss","requestOpen","componentName","layer","opener","onTabOrderKeyDown","backdropIgnored","backdrop","coversUsablePage","isMounted","inlineAs","separator","presenceProps","rootClassName","className","backdropClassName","onKeyDown"],"sources":["../../../src/components/overlays/Drawer.panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport type { Slot, SlotObject } from '../../lib/slot';\nimport { forcedColors } from '../../lib/styles';\nimport type { BackdropAppearance, ModalType } from '../../lib/types';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useModalLayer } from '../../hooks/useModalLayer';\nimport { usePresence } from '../../hooks/usePresence';\nimport { useRestoreFocus } from '../../hooks/useRestoreFocus';\nimport { Portal } from '../portal/Portal';\nimport {\n  useBackdropPress,\n  useModalDismiss,\n  useModalOpener,\n  useOpenInsideWarning,\n  useRaiseOnOpen,\n  type ModalRequestOpen,\n  type ModalTrigger,\n} from './Dialog.shared';\nimport { ModalBackdrop } from './Dialog.slots';\nimport type { DrawerPosition, DrawerSize, DrawerType } from './Drawer.context';\nimport { getTabbableThrough, usePopoverTabOrder } from './Popover.shared';\n\n/*\n * The drawer panel shell (D108): the panel element of both drawer types with its machinery, its\n * open state, and its placement, size and safe-area classes. Drawer's root and NavDrawer render it.\n * Imports the context module only among the Drawer modules (never the root, the parts or\n * `Drawer.tsx`), and no Nav module.\n */\n\n/**\n * The open state a drawer reports (its triggers' `aria-expanded`, its contexts): an inline\n * drawer's state as it is; an overlay's `false` until the page has hydrated (the portal renders\n * only in the browser), so the server HTML never points `aria-controls` at a panel that is not\n * there.\n */\nexport function useDrawerOpen(type: DrawerType, openState: boolean): boolean {\n  const isClient = useIsClient();\n  return type === 'inline' ? openState : openState && isClient;\n}\n\n/** The axis a drawer's `size` applies to: the width at a side, the height at the bottom. */\ntype DrawerSizeAxis = 'width' | 'height';\n\n/** The axis `size` sets for a drawer at `position`. */\nfunction getDrawerSizeAxis(position: DrawerPosition): DrawerSizeAxis {\n  return position === 'bottom' ? 'height' : 'width';\n}\n\n/**\n * The size classes, keyed by axis: 320px, 592px and 940px on the spacing scale (rem, so they\n * follow the user's font size), and `full` the whole axis. A width (height) class in the\n * consumer's `className` replaces the size, as the consumer's class comes last in `cn()`.\n */\nconst drawerSizeClasses: Readonly<Record<DrawerSizeAxis, Readonly<Record<DrawerSize, string>>>> = {\n  width: { small: 'w-80', medium: 'w-148', large: 'w-235', full: 'w-full' },\n  height: { small: 'h-80', medium: 'h-148', large: 'h-235', full: 'h-full' },\n};\n\n/**\n * A border on the panel's inner edge (the one facing the page): it marks the panel where the\n * shadow cannot, in high contrast (page, backdrop and panel are black) and in forced colors\n * (which drop shadows).\n */\nconst drawerEdgeClasses: Readonly<Record<DrawerPosition, string>> = {\n  start: 'border-e',\n  end: 'border-s',\n  left: 'border-r', // wave-allow-physical: the consumer asked for the physical left edge\n  right: 'border-l', // wave-allow-physical: the consumer asked for the physical right edge\n  bottom: 'border-t',\n};\n\n/**\n * Where an overlay panel is pinned: a side panel spans the window's height, a bottom one its\n * width; neither grows past the window (a size larger than the screen acts as `full`).\n */\nconst overlayPlacementClasses: Readonly<Record<DrawerPosition, string>> = {\n  start: 'start-0 top-0 h-full max-w-full',\n  end: 'end-0 top-0 h-full max-w-full',\n  left: 'left-0 top-0 h-full max-w-full', // wave-allow-physical: the consumer asked for the physical left edge\n  right: 'right-0 top-0 h-full max-w-full', // wave-allow-physical: the consumer asked for the physical right edge\n  bottom: 'inset-x-0 bottom-0 w-full max-h-full',\n};\n\n/**\n * The safe-area insets of the screen edges an overlay panel touches (the iOS home indicator, a\n * notch; `0` unless the page sets `viewport-fit=cover`). The panel has no padding of its own, so\n * the inset is the whole padding. A side panel touches the top and bottom edges; a bottom panel\n * the bottom edge, and the top one too at `full`. The side insets (a landscape notch) are not\n * padded.\n */\nfunction getOverlayInsetClasses(position: DrawerPosition, size: DrawerSize): string {\n  if (position === 'bottom' && size !== 'full') return 'pb-[env(safe-area-inset-bottom)]';\n  return 'pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]';\n}\n\n/**\n * The classes that place and size an overlay panel at `position`: the placement, the inner-edge\n * border, the size on the position's axis and the safe-area insets. They go after the panel's\n * base classes and before the consumer's `className`.\n */\nfunction getOverlayPanelClasses(position: DrawerPosition, size: DrawerSize): string {\n  return [\n    overlayPlacementClasses[position],\n    drawerEdgeClasses[position],\n    drawerSizeClasses[getDrawerSizeAxis(position)][size],\n    getOverlayInsetClasses(position, size),\n  ].join(' ');\n}\n\n/**\n * The base classes of an inline panel: an element of the page layout that keeps its width in a\n * flex row and lets its body scroll once the layout bounds its height. Its inner edge is\n * transparent unless the Drawer has `separator` (`data-separator`), and always drawn in forced\n * colors.\n */\nconst inlinePanelClasses = [\n  'relative flex min-h-0 shrink-0 flex-col max-w-full bg-background text-foreground',\n  'border-transparent data-[separator]:border-border',\n  forcedColors.border,\n].join(' ');\n\n/**\n * The classes that place and size an inline panel at `position`: the inner-edge border and the\n * size on the position's axis (a bottom panel is as wide as its container and never taller than\n * it). `full` is the container's width (height). No placement, insets or shadow: where the panel\n * sits is up to the page layout. They go after {@link inlinePanelClasses} and before the\n * consumer's `className`.\n */\nfunction getInlinePanelClasses(position: DrawerPosition, size: DrawerSize): string {\n  const axis = getDrawerSizeAxis(position);\n  return [\n    drawerEdgeClasses[position],\n    axis === 'height' ? 'w-full max-h-full' : '',\n    drawerSizeClasses[axis][size],\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n\n/** What the drawer panel shell renders and wires (the frozen contract of D108). */\nexport interface DrawerPanelProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  /**\n   * The public component, for the warning keys and texts: `'Drawer'`, `'NavDrawer'`\n   * (`<componentName>:open-inside`, `:backdrop-ignored`, `:focus-outside`, `:non-modal-full`).\n   */\n  componentName: string;\n  /**\n   * `'overlay'`: a portal, the backdrop, `role=\"dialog\"` and the modal or non-modal machinery;\n   * `'inline'`: the panel in place, with the inline focus restore only.\n   */\n  type: DrawerType;\n  /** The reported open state, from {@link useDrawerOpen}. */\n  open: boolean;\n  /** The root's request function (`useModalOpenState`): Escape and the backdrop ask through it. */\n  requestOpen: ModalRequestOpen;\n  /** Rendered as `data-position`; picks the overlay's edge or the inline panel's inner edge. */\n  position: DrawerPosition;\n  /** Rendered as `data-size` (always: the component resolves its own default). */\n  size: DrawerSize;\n  /** Inline only: draws the inner edge (`data-separator`). Ignored by an overlay. */\n  separator: boolean;\n  /**\n   * Overlay only: `modal`, `alert` or `non-modal` (`data-modal-type`, the role and the layer kind).\n   * Ignored inline.\n   */\n  modalType: ModalType;\n  /** `false` keeps the panel mounted while closed, `hidden` and `inert`. */\n  unmountOnClose: boolean;\n  /**\n   * The element of an inline panel: `'aside'` (Drawer, a complementary landmark) or `'div'`\n   * (NavDrawer, whose `<nav>` is the landmark).\n   */\n  inlineAs: 'aside' | 'div';\n  /**\n   * The root's triggers (`useModalTrigger()`), or `inertModalTrigger` for a component without\n   * trigger parts (the layer and the inline restore then capture the element that had focus).\n   */\n  trigger: ModalTrigger;\n  /** Where focus goes when the panel closes, if it can take focus (the root's `finalFocusRef`). */\n  finalFocusRef?: React.RefObject<HTMLElement | null>;\n  /**\n   * The panel's stable class(es), first in its `cn()`: `drawerClassNames.root`, followed by a\n   * variant's root (`cn(drawerClassNames.root, navDrawerClassNames.root)`).\n   */\n  rootClassName: string;\n  /**\n   * The backdrop's stable class(es), first in its `cn()`: `drawerClassNames.backdrop`, followed by\n   * a variant's (`cn(drawerClassNames.backdrop, navDrawerClassNames.backdrop)`).\n   */\n  backdropClassName: string;\n  /**\n   * The `backdrop` slot (overlay `modal` and `alert` only; a slot on a non-modal or inline panel\n   * renders nothing and warns). `null` renders no backdrop.\n   */\n  backdrop?: Slot<'div'> | (SlotObject<'div'> & { appearance?: BackdropAppearance });\n  /** The panel's id (always set: triggers point `aria-controls` at it). */\n  id: string;\n  /** Merged with the shell's own ref and the presence ref. */\n  ref?: React.Ref<HTMLElement>;\n  /** The panel's content, rendered as is: the shell adds no header, Close button or padding. */\n  children?: React.ReactNode;\n}\n\n/**\n * The classes every overlay panel carries after its stable class: a fixed flex column on the\n * page's background with the overlay shadow, its inner edge in the border colour.\n */\nconst OVERLAY_PANEL_CLASSES =\n  'fixed flex flex-col border-border bg-background text-foreground shadow-64';\n\n/**\n * The drawer panel shell: the panel element of an overlay (in a portal, with its backdrop and the\n * modal or non-modal machinery) or of an inline drawer (in place, with the inline focus restore),\n * on the presence core, with the placement, size, separator and safe-area classes and the\n * `data-type`, `data-position`, `data-size`, `data-modal-type`, `data-separator` and\n * `data-presence` attributes. Returns `null` while unmounted. Its hooks key on `open`.\n *\n * It renders its `children` raw and provides no context: no header, title registry, Close button\n * or padding. The component that renders it holds the open state (`useModalOpenState`, then\n * {@link useDrawerOpen}), renders its triggers itself, names the panel, and calls\n * `useModalTriggerSession(trigger, open)` after rendering it (the shell's effects run first). A\n * change of `type` remounts the panel and its content.\n */\nexport const DrawerPanel = ({\n  componentName,\n  type,\n  open,\n  requestOpen,\n  position,\n  size,\n  separator,\n  modalType,\n  unmountOnClose,\n  inlineAs,\n  trigger,\n  finalFocusRef,\n  rootClassName,\n  backdropClassName,\n  backdrop,\n  id,\n  className,\n  onKeyDown,\n  ref,\n  children,\n  ...rest\n}: DrawerPanelProps): React.ReactNode => {\n  const inline = type === 'inline';\n  const overlay = !inline;\n  const nonModal = modalType === 'non-modal';\n  const nonModalOverlay = overlay && nonModal;\n  const keptMounted = !unmountOnClose;\n  // The panel mounts through the presence core (D5, D103), with no motion of its own: kept mounted\n  // while closed with `unmountOnClose={false}`, else removed once it has exited.\n  const {\n    isMounted,\n    ref: presenceRef,\n    presenceProps,\n  } = usePresence(open, { unmountOnExit: unmountOnClose });\n\n  // The panel element of each type, held in state through its own callback ref. A change of `type`\n  // remounts the panel (D105): the overlay's hooks see only the portaled element and the inline\n  // restore only the inline one, also in the commit that swaps them (the inline restore then still\n  // knows the panel that focus was lost from).\n  const [overlayPanel, setOverlayPanel] = React.useState<HTMLElement | null>(null);\n  const [inlinePanel, setInlinePanel] = React.useState<HTMLElement | null>(null);\n  // The mounted panel of either type; each element clears it only while it is still the one held.\n  const panelRef = React.useRef<HTMLElement | null>(null);\n  const attachOverlayPanel = React.useCallback((node: HTMLElement | null) => {\n    if (!node) return undefined;\n    panelRef.current = node;\n    setOverlayPanel(node);\n    return () => {\n      if (panelRef.current === node) panelRef.current = null;\n      setOverlayPanel(null);\n    };\n  }, []);\n  const attachInlinePanel = React.useCallback((node: HTMLElement | null) => {\n    if (!node) return undefined;\n    panelRef.current = node;\n    setInlinePanel(node);\n    return () => {\n      if (panelRef.current === node) panelRef.current = null;\n      setInlinePanel(null);\n    };\n  }, []);\n  const overlayRef = useMergedRefs<HTMLElement>(ref, attachOverlayPanel, presenceRef);\n  const inlineRef = useMergedRefs<HTMLElement>(ref, attachInlinePanel, presenceRef);\n\n  // An inline panel takes no focus on open and returns it on close only from inside (D101). Called\n  // before useModalLayer: on a switch from inline to overlay it restores before the overlay's trap\n  // moves focus in.\n  useRestoreFocus({\n    enabled: open && inline,\n    container: inlinePanel,\n    triggerRef: trigger.focusRef,\n    finalFocusRef,\n    requireFocusInside: true,\n  });\n  // The portal wrapper: a kept-mounted overlay moves to the top of its stack when it opens (D104),\n  // before the layer registers and the trap moves focus in.\n  const portalRef = React.useRef<HTMLDivElement | null>(null);\n  useRaiseOnOpen(open && overlay, keptMounted, portalRef);\n\n  // A backdrop press asks to close, except an alert's (Escape still does; useModalLayer registers\n  // its layer without outside presses).\n  const backdropPress = useBackdropPress(panelRef, modalType !== 'alert');\n  const onDismiss = useModalDismiss(requestOpen, componentName, backdropPress.afterOutsidePress);\n  // Only an overlay is a layer: an inline panel is page content (no trap, isolation, scroll lock,\n  // Escape or outside press; toasts keep their corner). The overlay's layer is the one the Toaster\n  // measures (`modal`, or `dialog` for a non-modal one).\n  const layer = useModalLayer({\n    open: open && overlay,\n    modalType,\n    onDismiss,\n    refs: [panelRef],\n    container: overlayPanel,\n    triggerRef: trigger.focusRef,\n    finalFocusRef,\n  });\n  // A non-modal overlay keeps its place in the page's keyboard order right after its opener\n  // (D87.5). Both hooks are always called (C-HOOKS, D91). The opener is captured whenever the\n  // overlay opens, so a modal panel that turns non-modal while open (focus inside it by then)\n  // still knows it.\n  const opener = useModalOpener(open && overlay, trigger, overlayPanel);\n  const onTabOrderKeyDown = usePopoverTabOrder({\n    enabled: open && nonModalOverlay,\n    surface: overlayPanel,\n    anchorRef: opener,\n    getPreviousStop: getTabbableThrough,\n  });\n  // A popup opened inside a kept-mounted panel that is still open when the panel closes (D106).\n  useOpenInsideWarning(open, keptMounted, layer.layerId, componentName, panelRef);\n  // A non-modal or inline panel has no backdrop: a given slot (not undefined, null or a boolean)\n  // is ignored.\n  const backdropIgnored =\n    (nonModal || inline) &&\n    backdrop !== undefined &&\n    backdrop !== null &&\n    typeof backdrop !== 'boolean';\n  React.useEffect(() => {\n    if (!backdropIgnored) return;\n    warnOnce(\n      `${componentName}:backdrop-ignored`,\n      `${componentName}: \\`backdrop\\` is ignored: a non-modal or inline drawer has no backdrop, so the page around it stays usable.`,\n    );\n  }, [backdropIgnored, componentName]);\n  // A full non-modal overlay covers the page it leaves usable (D87.8).\n  const coversUsablePage = open && nonModalOverlay && size === 'full';\n  React.useEffect(() => {\n    if (!coversUsablePage) return;\n    warnOnce(\n      `${componentName}:non-modal-full`,\n      `${componentName}: \\`size=\"full\"\\` with \\`modalType=\"non-modal\"\\` covers the whole page while leaving it usable, so Tab reaches controls hidden behind the drawer. Use \\`modalType=\"modal\"\\`, \\`type=\"inline\"\\`, or a smaller size with its room reserved in the page layout.`,\n    );\n  }, [coversUsablePage, componentName]);\n\n  if (!isMounted) return null;\n\n  if (inline) {\n    const InlinePanel = inlineAs;\n    // In place: no role, tabIndex or modal attributes (D100). The presence attributes come after\n    // the consumer's props: hidden and inert while kept closed.\n    return (\n      <InlinePanel\n        ref={inlineRef}\n        id={id}\n        data-type=\"inline\"\n        data-position={position}\n        data-size={size}\n        data-separator={separator ? '' : undefined}\n        {...rest}\n        {...presenceProps}\n        onKeyDown={onKeyDown}\n        className={cn(\n          rootClassName,\n          inlinePanelClasses,\n          getInlinePanelClasses(position, size),\n          className,\n        )}\n      >\n        {children}\n      </InlinePanel>\n    );\n  }\n\n  return (\n    <Portal ref={portalRef} layerId={layer.layerId}>\n      {/* The backdrop of a modal or alert panel, the panel's sibling; a non-modal one has none.\n          Both carry the presence attributes (D7, D103): hidden and inert while kept closed, so a\n          closed panel leaves no backdrop over the page. */}\n      {!nonModal && (\n        <ModalBackdrop\n          backdrop={backdrop}\n          className={backdropClassName}\n          layerId={layer.layerId}\n          open={open}\n          onMouseDown={backdropPress.onMouseDown}\n          presenceProps={presenceProps}\n        />\n      )}\n      <div\n        ref={overlayRef}\n        role={modalType === 'alert' ? 'alertdialog' : 'dialog'}\n        id={id}\n        tabIndex={-1}\n        data-type=\"overlay\"\n        data-position={position}\n        data-size={size}\n        data-modal-type={modalType}\n        {...rest}\n        {...presenceProps}\n        onKeyDown={composeEventHandlers(onKeyDown, onTabOrderKeyDown)}\n        className={cn(\n          rootClassName,\n          OVERLAY_PANEL_CLASSES,\n          getOverlayPanelClasses(position, size),\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </Portal>\n  );\n};\nDrawerPanel.displayName = 'DrawerPanel';\n"],"mappings":"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"}
+{"version":3,"file":"Drawer.panel.cjs","names":["useIsClient","forcedColors","usePresence","React","useMergedRefs","useBackdropPress","useModalDismiss","useModalLayer","useModalOpener","usePopoverTabOrder","getTabbableThrough","InlinePanel","cn","Portal","ModalBackdrop","composeEventHandlers","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_useMergedRefs","require_useIsClient","require_usePresence","require_useRestoreFocus","require_useModalLayer","require_styles","require_Portal","require_Popover_shared","require_Dialog_shared","require_Dialog_slots","react","react_jsx_runtime","useDrawerOpen","isClient","type","openState","getDrawerSizeAxis","position","drawerSizeClasses","drawerEdgeClasses","overlayPlacementClasses","getOverlayInsetClasses","size","getOverlayPanelClasses","inlinePanelClasses","getInlinePanelClasses","axis","OVERLAY_PANEL_CLASSES","DrawerPanel","rest","inline","overlay","nonModal","modalType","nonModalOverlay","keptMounted","unmountOnClose","presenceRef","open","overlayPanel","setOverlayPanel","inlinePanel","setInlinePanel","panelRef","attachOverlayPanel","node","attachInlinePanel","overlayRef","ref","inlineRef","trigger","portalRef","backdropPress","onDismiss","requestOpen","componentName","layer","opener","onTabOrderKeyDown","backdropIgnored","backdrop","coversUsablePage","isMounted","inlineAs","separator","presenceProps","rootClassName","className","backdropClassName","onKeyDown"],"sources":["../../../src/components/overlays/Drawer.panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport type { Slot, SlotObject } from '../../lib/slot';\nimport { forcedColors } from '../../lib/styles';\nimport type { BackdropAppearance, ModalType } from '../../lib/types';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useModalLayer } from '../../hooks/useModalLayer';\nimport { usePresence } from '../../hooks/usePresence';\nimport { useRestoreFocus } from '../../hooks/useRestoreFocus';\nimport { Portal } from '../portal/Portal';\nimport {\n  useBackdropPress,\n  useModalDismiss,\n  useModalOpener,\n  useOpenInsideWarning,\n  useRaiseOnOpen,\n  type ModalRequestOpen,\n  type ModalTrigger,\n} from './Dialog.shared';\nimport { ModalBackdrop } from './Dialog.slots';\nimport type { DrawerPosition, DrawerSize, DrawerType } from './Drawer.context';\nimport { getTabbableThrough, usePopoverTabOrder } from './Popover.shared';\n\n/*\n * The drawer panel shell (D108): the panel element of both drawer types with its machinery, its\n * open state, and its placement, size and safe-area classes. Drawer's root and NavDrawer render it.\n * Imports the context module only among the Drawer modules (never the root, the parts or\n * `Drawer.tsx`), and no Nav module.\n */\n\n/**\n * The open state a drawer reports (its triggers' `aria-expanded`, its contexts): an inline\n * drawer's state as it is; an overlay's `false` until the page has hydrated (the portal renders\n * only in the browser), so the server HTML never points `aria-controls` at a panel that is not\n * there.\n */\nexport function useDrawerOpen(type: DrawerType, openState: boolean): boolean {\n  const isClient = useIsClient();\n  return type === 'inline' ? openState : openState && isClient;\n}\n\n/** The axis a drawer's `size` applies to: the width at a side, the height at the bottom. */\ntype DrawerSizeAxis = 'width' | 'height';\n\n/** The axis `size` sets for a drawer at `position`. */\nfunction getDrawerSizeAxis(position: DrawerPosition): DrawerSizeAxis {\n  return position === 'bottom' ? 'height' : 'width';\n}\n\n/**\n * The size classes, keyed by axis: 320px, 592px and 940px on the spacing scale (rem, so they\n * follow the user's font size), and `full` the whole axis. A width (height) class in the\n * consumer's `className` replaces the size, as the consumer's class comes last in `cn()`.\n */\nconst drawerSizeClasses: Readonly<Record<DrawerSizeAxis, Readonly<Record<DrawerSize, string>>>> = {\n  width: { small: 'w-80', medium: 'w-148', large: 'w-235', full: 'w-full' },\n  height: { small: 'h-80', medium: 'h-148', large: 'h-235', full: 'h-full' },\n};\n\n/**\n * A border on the panel's inner edge (the one facing the page): it marks the panel where the\n * shadow cannot, in high contrast (page, backdrop and panel are black) and in forced colors\n * (which drop shadows).\n */\nconst drawerEdgeClasses: Readonly<Record<DrawerPosition, string>> = {\n  start: 'border-e',\n  end: 'border-s',\n  left: 'border-r', // wave-allow-physical: the consumer asked for the physical left edge\n  right: 'border-l', // wave-allow-physical: the consumer asked for the physical right edge\n  bottom: 'border-t',\n};\n\n/**\n * Where an overlay panel is pinned: a side panel spans the window's height, a bottom one its\n * width; neither grows past the window (a size larger than the screen acts as `full`).\n */\nconst overlayPlacementClasses: Readonly<Record<DrawerPosition, string>> = {\n  start: 'start-0 top-0 h-full max-w-full',\n  end: 'end-0 top-0 h-full max-w-full',\n  left: 'left-0 top-0 h-full max-w-full', // wave-allow-physical: the consumer asked for the physical left edge\n  right: 'right-0 top-0 h-full max-w-full', // wave-allow-physical: the consumer asked for the physical right edge\n  bottom: 'inset-x-0 bottom-0 w-full max-h-full',\n};\n\n/**\n * The safe-area insets of the screen edges an overlay panel touches (the iOS home indicator, a\n * notch; `0` unless the page sets `viewport-fit=cover`). The panel has no padding of its own, so\n * the inset is the whole padding. A side panel touches the top and bottom edges; a bottom panel\n * the bottom edge, and the top one too at `full`. The side insets (a landscape notch) are not\n * padded.\n */\nfunction getOverlayInsetClasses(position: DrawerPosition, size: DrawerSize): string {\n  if (position === 'bottom' && size !== 'full') return 'pb-[env(safe-area-inset-bottom)]';\n  return 'pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]';\n}\n\n/**\n * The classes that place and size an overlay panel at `position`: the placement, the inner-edge\n * border, the size on the position's axis and the safe-area insets. They go after the panel's\n * base classes and before the consumer's `className`.\n */\nfunction getOverlayPanelClasses(position: DrawerPosition, size: DrawerSize): string {\n  return [\n    overlayPlacementClasses[position],\n    drawerEdgeClasses[position],\n    drawerSizeClasses[getDrawerSizeAxis(position)][size],\n    getOverlayInsetClasses(position, size),\n  ].join(' ');\n}\n\n/**\n * The base classes of an inline panel: an element of the page layout that keeps its width in a\n * flex row and lets its body scroll once the layout bounds its height. Its inner edge is\n * transparent unless the Drawer has `separator` (`data-separator`), and always drawn in forced\n * colors.\n */\nconst inlinePanelClasses = [\n  'relative flex min-h-0 shrink-0 flex-col max-w-full bg-background text-foreground',\n  'border-transparent data-[separator]:border-border',\n  forcedColors.border,\n].join(' ');\n\n/**\n * The classes that place and size an inline panel at `position`: the inner-edge border and the\n * size on the position's axis (a bottom panel is as wide as its container and never taller than\n * it). `full` is the container's width (height). No placement, insets or shadow: where the panel\n * sits is up to the page layout. They go after {@link inlinePanelClasses} and before the\n * consumer's `className`.\n */\nfunction getInlinePanelClasses(position: DrawerPosition, size: DrawerSize): string {\n  const axis = getDrawerSizeAxis(position);\n  return [\n    drawerEdgeClasses[position],\n    axis === 'height' ? 'w-full max-h-full' : '',\n    drawerSizeClasses[axis][size],\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n\n/** What the drawer panel shell renders and wires (the frozen contract of D108). */\nexport interface DrawerPanelProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  /**\n   * The public component, for the warning keys and texts: `'Drawer'`, `'NavDrawer'`\n   * (`<componentName>:open-inside`, `:backdrop-ignored`, `:focus-outside`, `:non-modal-full`).\n   */\n  componentName: string;\n  /**\n   * `'overlay'`: a portal, the backdrop, `role=\"dialog\"` and the modal or non-modal machinery;\n   * `'inline'`: the panel in place, with the inline focus restore only.\n   */\n  type: DrawerType;\n  /** The reported open state, from {@link useDrawerOpen}. */\n  open: boolean;\n  /** The root's request function (`useModalOpenState`): Escape and the backdrop ask through it. */\n  requestOpen: ModalRequestOpen;\n  /** Rendered as `data-position`; picks the overlay's edge or the inline panel's inner edge. */\n  position: DrawerPosition;\n  /** Rendered as `data-size` (always: the component resolves its own default). */\n  size: DrawerSize;\n  /** Inline only: draws the inner edge (`data-separator`). Ignored by an overlay. */\n  separator: boolean;\n  /**\n   * Overlay only: `modal`, `alert` or `non-modal` (`data-modal-type`, the role and the layer kind).\n   * Ignored inline.\n   */\n  modalType: ModalType;\n  /** `false` keeps the panel mounted while closed, `hidden` and `inert`. */\n  unmountOnClose: boolean;\n  /**\n   * The element of an inline panel: `'aside'` (Drawer, a complementary landmark) or `'div'`\n   * (NavDrawer, whose `<nav>` is the landmark).\n   */\n  inlineAs: 'aside' | 'div';\n  /**\n   * The root's triggers (`useModalTrigger()`), or `inertModalTrigger` for a component without\n   * trigger parts (the layer and the inline restore then capture the element that had focus).\n   */\n  trigger: ModalTrigger;\n  /** Where focus goes when the panel closes, if it can take focus (the root's `finalFocusRef`). */\n  finalFocusRef?: React.RefObject<HTMLElement | null>;\n  /**\n   * The panel's stable class(es), first in its `cn()`: `drawerClassNames.root`, followed by a\n   * variant's root (`cn(drawerClassNames.root, navDrawerClassNames.root)`).\n   */\n  rootClassName: string;\n  /**\n   * The backdrop's stable class(es), first in its `cn()`: `drawerClassNames.backdrop`, followed by\n   * a variant's (`cn(drawerClassNames.backdrop, navDrawerClassNames.backdrop)`).\n   */\n  backdropClassName: string;\n  /**\n   * The `backdrop` slot (overlay `modal` and `alert` only; a slot on a non-modal or inline panel\n   * renders nothing and warns). `null` renders no backdrop.\n   */\n  backdrop?: Slot<'div'> | (SlotObject<'div'> & { appearance?: BackdropAppearance });\n  /** The panel's id (always set: triggers point `aria-controls` at it). */\n  id: string;\n  /** Merged with the shell's own ref and the presence ref. */\n  ref?: React.Ref<HTMLElement>;\n  /** The panel's content, rendered as is: the shell adds no header, Close button or padding. */\n  children?: React.ReactNode;\n}\n\n/**\n * The classes every overlay panel carries after its stable class: a fixed flex column on the\n * page's background with the overlay shadow, its inner edge in the border colour.\n */\nconst OVERLAY_PANEL_CLASSES =\n  'fixed flex flex-col border-border bg-background text-foreground shadow-64';\n\n/**\n * The drawer panel shell: the panel element of an overlay (in a portal, with its backdrop and the\n * modal or non-modal machinery) or of an inline drawer (in place, with the inline focus restore),\n * on the presence core, with the placement, size, separator and safe-area classes and the\n * `data-type`, `data-position`, `data-size`, `data-modal-type`, `data-separator` and\n * `data-presence` attributes. Returns `null` while unmounted. Its hooks key on `open`.\n *\n * It renders its `children` raw and provides no context: no header, title registry, Close button\n * or padding. The component that renders it holds the open state (`useModalOpenState`, then\n * {@link useDrawerOpen}), renders its triggers itself, names the panel, and calls\n * `useModalTriggerSession(trigger, open)` after rendering it (the shell's effects run first). A\n * change of `type` remounts the panel and its content.\n */\nexport const DrawerPanel = ({\n  componentName,\n  type,\n  open,\n  requestOpen,\n  position,\n  size,\n  separator,\n  modalType,\n  unmountOnClose,\n  inlineAs,\n  trigger,\n  finalFocusRef,\n  rootClassName,\n  backdropClassName,\n  backdrop,\n  id,\n  className,\n  onKeyDown,\n  ref,\n  children,\n  ...rest\n}: DrawerPanelProps): React.ReactNode => {\n  const inline = type === 'inline';\n  const overlay = !inline;\n  const nonModal = modalType === 'non-modal';\n  const nonModalOverlay = overlay && nonModal;\n  const keptMounted = !unmountOnClose;\n  // The panel mounts through the presence core (D5, D103), with no motion of its own: kept mounted\n  // while closed with `unmountOnClose={false}`, else removed once it has exited.\n  const {\n    isMounted,\n    ref: presenceRef,\n    presenceProps,\n  } = usePresence(open, { unmountOnExit: unmountOnClose });\n\n  // The panel element of each type, held in state through its own callback ref. A change of `type`\n  // remounts the panel (D105): the overlay's hooks see only the portaled element and the inline\n  // restore only the inline one, also in the commit that swaps them (the inline restore then still\n  // knows the panel that focus was lost from).\n  const [overlayPanel, setOverlayPanel] = React.useState<HTMLElement | null>(null);\n  const [inlinePanel, setInlinePanel] = React.useState<HTMLElement | null>(null);\n  // The mounted panel of either type; each element clears it only while it is still the one held.\n  const panelRef = React.useRef<HTMLElement | null>(null);\n  const attachOverlayPanel = React.useCallback((node: HTMLElement | null) => {\n    if (!node) return undefined;\n    panelRef.current = node;\n    setOverlayPanel(node);\n    return () => {\n      if (panelRef.current === node) panelRef.current = null;\n      setOverlayPanel(null);\n    };\n  }, []);\n  const attachInlinePanel = React.useCallback((node: HTMLElement | null) => {\n    if (!node) return undefined;\n    panelRef.current = node;\n    setInlinePanel(node);\n    return () => {\n      if (panelRef.current === node) panelRef.current = null;\n      setInlinePanel(null);\n    };\n  }, []);\n  const overlayRef = useMergedRefs<HTMLElement>(ref, attachOverlayPanel, presenceRef);\n  const inlineRef = useMergedRefs<HTMLElement>(ref, attachInlinePanel, presenceRef);\n\n  // An inline panel takes no focus on open and returns it on close only from inside (D101). Called\n  // before useModalLayer: on a switch from inline to overlay it restores before the overlay's trap\n  // moves focus in.\n  useRestoreFocus({\n    enabled: open && inline,\n    container: inlinePanel,\n    triggerRef: trigger.focusRef,\n    finalFocusRef,\n    requireFocusInside: true,\n  });\n  // The portal wrapper: a kept-mounted overlay moves to the top of its stack when it opens (D104),\n  // before the layer registers and the trap moves focus in.\n  const portalRef = React.useRef<HTMLDivElement | null>(null);\n  useRaiseOnOpen(open && overlay, keptMounted, portalRef);\n\n  // A backdrop press asks to close, except an alert's (Escape still does; useModalLayer registers\n  // its layer without outside presses).\n  const backdropPress = useBackdropPress(panelRef, modalType !== 'alert');\n  const onDismiss = useModalDismiss(requestOpen, componentName, backdropPress.afterOutsidePress);\n  // Only an overlay is a layer: an inline panel is page content (no trap, isolation, scroll lock,\n  // Escape or outside press; toasts keep their corner). The overlay's layer is the one the Toaster\n  // measures (`modal`, or `dialog` for a non-modal one).\n  const layer = useModalLayer({\n    open: open && overlay,\n    modalType,\n    onDismiss,\n    refs: [panelRef],\n    container: overlayPanel,\n    triggerRef: trigger.focusRef,\n    finalFocusRef,\n  });\n  // A non-modal overlay keeps its place in the page's keyboard order right after its opener\n  // (D87.5). Both hooks are always called (C-HOOKS, D91). The opener is captured whenever the\n  // overlay opens, so a modal panel that turns non-modal while open (focus inside it by then)\n  // still knows it.\n  const opener = useModalOpener(open && overlay, trigger, overlayPanel);\n  const onTabOrderKeyDown = usePopoverTabOrder({\n    enabled: open && nonModalOverlay,\n    surface: overlayPanel,\n    anchorRef: opener,\n    getPreviousStop: getTabbableThrough,\n  });\n  // A popup opened inside a kept-mounted panel that is still open when the panel closes (D106).\n  useOpenInsideWarning(open, keptMounted, layer.layerId, componentName, panelRef);\n  // A non-modal or inline panel has no backdrop: a given slot (not undefined, null or a boolean)\n  // is ignored.\n  const backdropIgnored =\n    (nonModal || inline) &&\n    backdrop !== undefined &&\n    backdrop !== null &&\n    typeof backdrop !== 'boolean';\n  React.useEffect(() => {\n    if (!backdropIgnored) return;\n    warnOnce(\n      `${componentName}:backdrop-ignored`,\n      `${componentName}: \\`backdrop\\` is ignored: a non-modal or inline drawer has no backdrop, so the page around it stays usable.`,\n    );\n  }, [backdropIgnored, componentName]);\n  // A full non-modal overlay covers the page it leaves usable (D87.8).\n  const coversUsablePage = open && nonModalOverlay && size === 'full';\n  React.useEffect(() => {\n    if (!coversUsablePage) return;\n    warnOnce(\n      `${componentName}:non-modal-full`,\n      `${componentName}: \\`size=\"full\"\\` with \\`modalType=\"non-modal\"\\` covers the whole page while leaving it usable, so Tab reaches controls hidden behind the drawer. Use \\`modalType=\"modal\"\\`, \\`type=\"inline\"\\`, or a smaller size with its room reserved in the page layout.`,\n    );\n  }, [coversUsablePage, componentName]);\n\n  if (!isMounted) return null;\n\n  if (inline) {\n    const InlinePanel = inlineAs;\n    // In place: no role, tabIndex or modal attributes (D100). The presence attributes come after\n    // the consumer's props: hidden and inert while kept closed.\n    return (\n      <InlinePanel\n        ref={inlineRef}\n        id={id}\n        data-type=\"inline\"\n        data-position={position}\n        data-size={size}\n        data-separator={separator ? '' : undefined}\n        {...rest}\n        {...presenceProps}\n        onKeyDown={onKeyDown}\n        className={cn(\n          rootClassName,\n          inlinePanelClasses,\n          getInlinePanelClasses(position, size),\n          className,\n        )}\n      >\n        {children}\n      </InlinePanel>\n    );\n  }\n\n  return (\n    <Portal ref={portalRef} layerId={layer.layerId}>\n      {/* The backdrop of a modal or alert panel, the panel's sibling; a non-modal one has none.\n          Both carry the presence attributes (D7, D103): hidden and inert while kept closed, so a\n          closed panel leaves no backdrop over the page. */}\n      {!nonModal && (\n        <ModalBackdrop\n          backdrop={backdrop}\n          className={backdropClassName}\n          layerId={layer.layerId}\n          open={open}\n          onMouseDown={backdropPress.onMouseDown}\n          presenceProps={presenceProps}\n        />\n      )}\n      <div\n        ref={overlayRef}\n        role={modalType === 'alert' ? 'alertdialog' : 'dialog'}\n        id={id}\n        tabIndex={-1}\n        data-type=\"overlay\"\n        data-position={position}\n        data-size={size}\n        data-modal-type={modalType}\n        {...rest}\n        {...presenceProps}\n        onKeyDown={composeEventHandlers(onKeyDown, onTabOrderKeyDown)}\n        className={cn(\n          rootClassName,\n          OVERLAY_PANEL_CLASSES,\n          getOverlayPanelClasses(position, size),\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </Portal>\n  );\n};\nDrawerPanel.displayName = 'DrawerPanel';\n"],"mappings":"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"}

package/dist/components/overlays/Drawer.panel.mjs

@@ -5,12 +5,12 @@ import { composeEventHandlers as n } from "../../lib/composeEventHandlers.mjs";
 import { useMergedRefs as r } from "../../hooks/useMergedRefs.mjs";
 import { useIsClient as i } from "../../hooks/useIsClient.mjs";
 import { usePresence as ee } from "../../hooks/usePresence.mjs";
-import { Portal as te } from "../portal/Portal.mjs";
+import { useRestoreFocus as te } from "../../hooks/useRestoreFocus.mjs";
+import { useModalLayer as ne } from "../../hooks/useModalLayer.mjs";
 import { forcedColors as a } from "../../lib/styles.mjs";
-import { useRestoreFocus as ne } from "../../hooks/useRestoreFocus.mjs";
-import { getTabbableThrough as re, usePopoverTabOrder as o } from "./Popover.shared.mjs";
-import { useBackdropPress as s, useModalDismiss as c, useModalOpener as l, useOpenInsideWarning as u, useRaiseOnOpen as d } from "./Dialog.shared.mjs";
-import { useModalLayer as ie } from "../../hooks/useModalLayer.mjs";
+import { Portal as re } from "../portal/Portal.mjs";
+import { getTabbableThrough as o, usePopoverTabOrder as s } from "./Popover.shared.mjs";
+import { useBackdropPress as c, useModalDismiss as l, useModalOpener as u, useOpenInsideWarning as d, useRaiseOnOpen as ie } from "./Dialog.shared.mjs";
 import { ModalBackdrop as ae } from "./Dialog.slots.mjs";
 import * as f from "react";
 import { jsx as p, jsxs as oe } from "react/jsx-runtime";
@@ -82,7 +82,7 @@ var C = "fixed flex flex-col border-border bg-background text-foreground shadow-
 			q.current === e && (q.current = null), K(null);
 		};
 	}, []), de = r(N, le, H), fe = r(N, ue, H);
-	ne({
+	te({
 		enabled: m && I,
 		container: ce,
 		triggerRef: E.focusRef,
@@ -90,8 +90,8 @@ var C = "fixed flex flex-col border-border bg-background text-foreground shadow-
 		requireFocusInside: !0
 	});
 	let J = f.useRef(null);
-	d(m && L, B, J);
-	let Y = s(q, y !== "alert"), X = c(h, i, Y.afterOutsidePress), Z = ie({
+	ie(m && L, B, J);
+	let Y = c(q, y !== "alert"), X = l(h, i, Y.afterOutsidePress), Z = ne({
 		open: m && L,
 		modalType: y,
 		onDismiss: X,
@@ -99,13 +99,13 @@ var C = "fixed flex flex-col border-border bg-background text-foreground shadow-
 		container: W,
 		triggerRef: E.focusRef,
 		finalFocusRef: D
-	}), pe = l(m && L, E, W), me = o({
+	}), pe = u(m && L, E, W), me = s({
 		enabled: m && z,
 		surface: W,
 		anchorRef: pe,
-		getPreviousStop: re
+		getPreviousStop: o
 	});
-	u(m, B, Z.layerId, i, q);
+	d(m, B, Z.layerId, i, q);
 	let Q = (R || I) && k != null && typeof k != "boolean";
 	f.useEffect(() => {
 		Q && t(`${i}:backdrop-ignored`, `${i}: \`backdrop\` is ignored: a non-modal or inline drawer has no backdrop, so the page around it stays usable.`);
@@ -125,7 +125,7 @@ var C = "fixed flex flex-col border-border bg-background text-foreground shadow-
 		onKeyDown: M,
 		className: e(O, x, S(g, _), j),
 		children: P
-	}) : /* @__PURE__ */ oe(te, {
+	}) : /* @__PURE__ */ oe(re, {
 		ref: J,
 		layerId: Z.layerId,
 		children: [!R && /* @__PURE__ */ p(ae, {