@mortenbrudvik/waveui 0.14.0 → 0.15.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","exiting","presenceProps","surfaceMotion","useMotionClasses","motion","dialogMotion","className","backdropMotionClassName","backdropMotion","dialogBackdropMotion","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","cn","composeEventHandlers","onKeyDown","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 { dialogBackdropMotion, dialogMotion } from '../../lib/motion';\nimport { renderSlot, slotRendersContent, type Slot, type SlotObject } from '../../lib/slot';\nimport type {\n  BackdropAppearance,\n  ModalOpenChangeReason,\n  ModalType,\n  MotionSlot,\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 { useMotionClasses } from '../../hooks/useMotion';\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, once its\n   * exit motion has ended. `false` keeps it mounted while closed, `hidden` and `inert`, so a form\n   * inside keeps what was typed and the components inside keep their state; the surface then\n   * mounts with the Dialog, closed (in the browser only, as an open one), and an `autoFocus`\n   * inside it never applies (each open focuses the first focusable element). A popup opened inside\n   * that is still open when the dialog closes stays open over the page (a development warning says\n   * so): close it first. 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   * The surface's motion. By default it scales up from 85% of its size and fades in over 250 ms\n   * with a decelerating curve, and scales down and fades out over 200 ms with an accelerating\n   * curve; under reduced motion it appears and disappears at once. `null` turns the motion off\n   * (the surface still renders its `data-presence` phases, which then end at once); a class string\n   * or `{ className }` replaces the default classes with yours (see `MotionSlot`), also under a\n   * `WaveProvider` with `motion=\"none\"`, which otherwise turns the default off. A `className` that\n   * holds `data-[presence=…]` classes while `motion` is unset keeps 0.14's behaviour: no default\n   * motion, your classes animate the surface. Fluent's `Dialog` `surfaceMotion`.\n   * @default the scale and fade above\n   */\n  motion?: MotionSlot | null;\n  /**\n   * The backdrop's motion. By default it fades in over 250 ms and out over 200 ms, the surface's\n   * exit, with an easy-ease curve; under reduced motion it appears and disappears at once. `null`\n   * turns the motion off; a class string or `{ className }` replaces the default classes with yours\n   * (see `MotionSlot`), also under a `WaveProvider` with `motion=\"none\"`, which otherwise turns the\n   * default off. The surface's motion decides when the dialog unmounts or hides: a replacement\n   * longer than the surface's exit is cut off there. Ignored with `modalType=\"non-modal\"` (a\n   * development warning says so). Fluent's `DialogSurface` `backdropMotion`.\n   * @default the fade above\n   */\n  backdropMotion?: MotionSlot | null;\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` and `backdropMotion` are 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 moves in and out: the surface scales up from 85% of its size and fades in over 250 ms, and\n * scales down and fades out over 200 ms, while the backdrop fades in over 250 ms and out with the\n * surface; a dialog open by default animates in when it mounts in the browser. Under reduced\n * motion both appear and disappear at once. `motion` (the surface) and `backdropMotion` (the\n * backdrop) turn each motion off (`null`) or replace its classes, and a `WaveProvider` with\n * `motion=\"none\"` turns both defaults off. It mounts through the presence core: the backdrop, the\n * positioner and the surface render `data-presence` (`entering` and `exiting` while the surface's\n * motion runs, `entered` while open, `exited` while kept closed), and the backdrop and the\n * positioner are `inert` while exiting and `hidden` and `inert` while kept closed. A closed\n * surface waits for its motion before it unmounts or hides, while focus, the trap, the isolation\n * and the scroll lock follow the open state at once: an exiting dialog lets clicks through to the\n * page (an `inert` element takes no pointer events), and the page's scrollbar comes back while the\n * dialog still fades. Opened again during its exit, the same surface enters again.\n */\nexport const DialogContent = ({\n  title,\n  size = 'medium',\n  backdrop,\n  motion,\n  backdropMotion,\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), and enters also when it mounts open\n  // (D9: a dialog open by default animates in on a client render as after hydration): 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, { appear: true, unmountOnExit: unmountOnClose });\n  const exiting = presenceProps['data-presence'] === 'exiting';\n  // The motion classes of the surface (a `className` with presence variants keeps 0.14's own\n  // motion, D19) and of the backdrop.\n  const surfaceMotion = useMotionClasses(motion, dialogMotion, className);\n  const backdropMotionClassName = useMotionClasses(backdropMotion, dialogBackdropMotion);\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) and a\n  // given backdrop motion are ignored.\n  const backdropIgnored =\n    nonModal &&\n    ((backdrop !== undefined && backdrop !== null && typeof backdrop !== 'boolean') ||\n      backdropMotion !== undefined);\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 while the dialog is open and while it exits, so the titles keep their end\n  // padding through the exit motion (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 || exiting ? 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          motionClassName={backdropMotionClassName}\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            surfaceMotion,\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 * - **Motion**: the surface scales and fades in and out and the backdrop fades with it (none under\n *   reduced motion); `Dialog.Content`'s `motion` and `backdropMotion` turn each off (`null`) or\n *   replace it, and `WaveProvider motion=\"none\"` turns both off. The surface mounts through the\n *   presence core and renders `data-presence`; while it exits it stays on screen, `inert`, and\n *   focus, the trap and the scroll lock are already released.\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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"}

package/dist/components/overlays/Dialog.slots.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/composeEventHandlers.cjs"),o=require("../../hooks/useMergedRefs.cjs"),s=require("../../lib/layers.cjs"),c=require("../button/Button.cjs"),l=require("../button/Button.slots.cjs"),u=require("../../lib/icons.cjs"),d=require("../../lib/labelInName.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=new Set([`aria-label`,`aria-labelledby`,`title`]),h=/^on[A-Z]/,g=()=>{},_=()=>(0,p.jsx)(u.DismissIcon,{});function v(){return{buttonProps:{},icon:_(),iconPosition:void 0,children:void 0,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1,merged:null}}function y(e){return e===`button`||e===c.Button}function b(e,t,n,r){let a={};for(let[t,n]of Object.entries(e))t===`children`||t===`dangerouslySetInnerHTML`||l.BUTTON_OWN_PROP_KEYS.has(t)||(a[t]=n);let o=e.dangerouslySetInnerHTML,s=o==null?i.materialiseSlotContent(t):(0,p.jsx)(`span`,{className:`inline-flex items-center`,dangerouslySetInnerHTML:o}),c=n&&i.slotRendersContent(e.icon)?e.icon:null,u=c!==null||i.slotRendersContent(s);return{buttonProps:a,icon:u?c??void 0:_(),iconPosition:n?e.iconPosition:void 0,children:u?s:void 0,contentMayName:!0,literalTextLabel:d.hasTextLabel(s),disabledFocusable:n&&!!e.disabledFocusable,merged:r}}function x(e){if(e===null)return null;if(e===void 0||typeof e==`boolean`)return v();let t=e;if(n.isElementOfType(t,`button`,c.Button))return b(t.props,t.props.children,n.isElementOfType(t,c.Button),`a button element`);let r=i.resolveSlot(e,`span`);if(!r)return v();let{Component:a,props:o,children:s}=r;if(y(a))return b(o,s,a===c.Button,`a slot object that renders a button`);let l={},u={};for(let[e,t]of Object.entries(o))m.has(e)||h.test(e)?l[e]=t:u[e]=t;let d;return i.slotRendersContent(s)?d=s:i.slotWrapsDefaultContent(a,{...u,children:s})&&(d=_()),{buttonProps:l,icon:{...u,as:a,children:d},iconPosition:void 0,children:void 0,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1,merged:null}}function S({componentName:e,closeButton:n,slotName:i=`closeButton`,closeLabel:s,onClose:l,className:u}){let h=x(n),_=h?.merged??null;f.useEffect(()=>{_!==null&&r.warnOnce(`${e}:${i}-button-element`,`${e}: \`${i}\` received ${_}; its props were merged into the built-in Close button (buttons cannot be nested). Pass icon content instead, e.g. \`${i}={<CloseIcon />}\`.`)},[_,e,i]);let{ref:v,onClick:y,className:b,...S}=h?.buttonProps??{},C=Object.keys(S).some(e=>m.has(e)&&S[e]!=null),w=h!==null&&h.contentMayName&&!C,T=h?.literalTextLabel??!1,[E,D]=f.useState(null),O=f.useCallback(e=>E?d.observeTextLabel(E,e):g,[E]),k=f.useSyncExternalStore(O,()=>E?d.hasRenderedTextLabel(E):T,()=>T),A=w&&k,j=o.useMergedRefs(v,w?D:void 0);return h===null?null:(0,p.jsx)(c.Button,{appearance:`subtle`,size:`small`,"aria-label":C||A?void 0:s,...S,ref:j,icon:h.icon,iconPosition:h.iconPosition,disabledFocusable:h.disabledFocusable,onClick:a.composeEventHandlers(y,e=>l(e.nativeEvent)),className:t.cn(u,b),children:h.children})}S.displayName=`ModalCloseButton`;var C=()=>`dimmed`;function w(e,t){let n=f.useCallback(()=>t&&s.hasIsolatingModalBelow(e)?`transparent`:`dimmed`,[e,t]);return f.useSyncExternalStore(s.subscribeLayers,n,C)}function T({backdrop:e,className:n,layerId:r,open:s,onMouseDown:c,presenceProps:l}){let u=w(r,s),d=e===null||typeof e==`boolean`?void 0:e,f=d===void 0?null:i.resolveSlot(d,`div`),{appearance:m,className:h,onMouseDown:g,ref:_,...v}=f?.props??{},y=o.useMergedRefs(_);if(e===null)return null;let b=m===`dimmed`||m===`transparent`?m:u,x=f?.Component??`div`;return(0,p.jsx)(x,{"data-appearance":b,...v,...l,ref:y,"aria-hidden":`true`,onMouseDown:a.composeEventHandlers(g,c),className:t.cn(n,`fixed inset-0`,b===`transparent`?`bg-transparent`:`bg-backdrop`,h),children:f?.children})}T.displayName=`ModalBackdrop`,exports.ModalBackdrop=T,exports.ModalCloseButton=S,exports.useBackdropAppearance=w;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/composeEventHandlers.cjs"),o=require("../../hooks/useMergedRefs.cjs"),s=require("../../lib/layers.cjs"),c=require("../button/Button.cjs"),l=require("../button/Button.slots.cjs"),u=require("../../lib/icons.cjs"),d=require("../../lib/labelInName.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=new Set([`aria-label`,`aria-labelledby`,`title`]),h=/^on[A-Z]/,g=()=>{},_=()=>(0,p.jsx)(u.DismissIcon,{});function v(){return{buttonProps:{},icon:_(),iconPosition:void 0,children:void 0,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1,merged:null}}function y(e){return e===`button`||e===c.Button}function b(e,t,n,r){let a={};for(let[t,n]of Object.entries(e))t===`children`||t===`dangerouslySetInnerHTML`||l.BUTTON_OWN_PROP_KEYS.has(t)||(a[t]=n);let o=e.dangerouslySetInnerHTML,s=o==null?i.materialiseSlotContent(t):(0,p.jsx)(`span`,{className:`inline-flex items-center`,dangerouslySetInnerHTML:o}),c=n&&i.slotRendersContent(e.icon)?e.icon:null,u=c!==null||i.slotRendersContent(s);return{buttonProps:a,icon:u?c??void 0:_(),iconPosition:n?e.iconPosition:void 0,children:u?s:void 0,contentMayName:!0,literalTextLabel:d.hasTextLabel(s),disabledFocusable:n&&!!e.disabledFocusable,merged:r}}function x(e){if(e===null)return null;if(e===void 0||typeof e==`boolean`)return v();let t=e;if(n.isElementOfType(t,`button`,c.Button))return b(t.props,t.props.children,n.isElementOfType(t,c.Button),`a button element`);let r=i.resolveSlot(e,`span`);if(!r)return v();let{Component:a,props:o,children:s}=r;if(y(a))return b(o,s,a===c.Button,`a slot object that renders a button`);let l={},u={};for(let[e,t]of Object.entries(o))m.has(e)||h.test(e)?l[e]=t:u[e]=t;let d;return i.slotRendersContent(s)?d=s:i.slotWrapsDefaultContent(a,{...u,children:s})&&(d=_()),{buttonProps:l,icon:{...u,as:a,children:d},iconPosition:void 0,children:void 0,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1,merged:null}}function S({componentName:e,closeButton:n,slotName:i=`closeButton`,closeLabel:s,onClose:l,className:u}){let h=x(n),_=h?.merged??null;f.useEffect(()=>{_!==null&&r.warnOnce(`${e}:${i}-button-element`,`${e}: \`${i}\` received ${_}; its props were merged into the built-in Close button (buttons cannot be nested). Pass icon content instead, e.g. \`${i}={<CloseIcon />}\`.`)},[_,e,i]);let{ref:v,onClick:y,className:b,...S}=h?.buttonProps??{},C=Object.keys(S).some(e=>m.has(e)&&S[e]!=null),w=h!==null&&h.contentMayName&&!C,T=h?.literalTextLabel??!1,[E,D]=f.useState(null),O=f.useCallback(e=>E?d.observeTextLabel(E,e):g,[E]),k=f.useSyncExternalStore(O,()=>E?d.hasRenderedTextLabel(E):T,()=>T),A=w&&k,j=o.useMergedRefs(v,w?D:void 0);return h===null?null:(0,p.jsx)(c.Button,{appearance:`subtle`,size:`small`,"aria-label":C||A?void 0:s,...S,ref:j,icon:h.icon,iconPosition:h.iconPosition,disabledFocusable:h.disabledFocusable,onClick:a.composeEventHandlers(y,e=>l(e.nativeEvent)),className:t.cn(u,b),children:h.children})}S.displayName=`ModalCloseButton`;var C=()=>`dimmed`;function w(e,t){let n=f.useCallback(()=>t&&s.hasIsolatingModalBelow(e)?`transparent`:`dimmed`,[e,t]),r=f.useSyncExternalStore(s.subscribeLayers,n,C),[i,a]=f.useState(r);return t&&r!==i&&a(r),t?r:i}function T({backdrop:e,className:n,layerId:r,open:s,onMouseDown:c,presenceProps:l,motionClassName:u}){let d=w(r,s),f=e===null||typeof e==`boolean`?void 0:e,m=f===void 0?null:i.resolveSlot(f,`div`),{appearance:h,className:g,onMouseDown:_,ref:v,...y}=m?.props??{},b=o.useMergedRefs(v);if(e===null)return null;let x=h===`dimmed`||h===`transparent`?h:d,S=m?.Component??`div`;return(0,p.jsx)(S,{"data-appearance":x,...y,...l,ref:b,"aria-hidden":`true`,onMouseDown:a.composeEventHandlers(_,c),className:t.cn(n,`fixed inset-0`,x===`transparent`?`bg-transparent`:`bg-backdrop`,u,g),children:m?.children})}T.displayName=`ModalBackdrop`,exports.ModalBackdrop=T,exports.ModalCloseButton=S,exports.useBackdropAppearance=w;
 //# sourceMappingURL=Dialog.slots.cjs.map

package/dist/components/overlays/Dialog.slots.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.slots.cjs","names":["DismissIcon","Button","BUTTON_OWN_PROP_KEYS","materialiseSlotContent","slotRendersContent","hasTextLabel","isElementOfType","resolveSlot","slotWrapsDefaultContent","React","observeTextLabel","hasRenderedTextLabel","useMergedRefs","composeEventHandlers","cn","hasIsolatingModalBelow","subscribeLayers","require_runtime","require_cn","require_children","require_dev","require_slot","require_composeEventHandlers","require_useMergedRefs","require_layers","require_Button","require_Button_slots","require_icons","require_labelInName","react","react_jsx_runtime","NAMING_KEYS","HANDLER_KEY","noop","defaultGlyph","defaultParts","isButtonType","type","mergedParts","buttonProps","key","value","props","markup","content","children","icon","isWaveButton","hasContent","resolveCloseButton","closeButton","element","resolved","Component","contentProps","inner","ModalCloseButton","parts","merged","componentName","slotName","slotRef","slotOnClick","slotClassName","slotButtonProps","hasOwnName","checksContent","literalTextLabel","labelTarget","setLabelTarget","subscribeToContent","onChange","contentHasTextLabel","namedByContent","ref","closeLabel","onClose","event","className","getServerAppearance","useBackdropAppearance","getSnapshot","open","layerId","ModalBackdrop","automatic","slot","backdrop","ownAppearance","slotOnMouseDown","slotProps","appearance","presenceProps","onMouseDown"],"sources":["../../../src/components/overlays/Dialog.slots.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { DismissIcon } from '../../lib/icons';\nimport { hasRenderedTextLabel, hasTextLabel, observeTextLabel } from '../../lib/labelInName';\nimport { hasIsolatingModalBelow, subscribeLayers } from '../../lib/layers';\nimport {\n  materialiseSlotContent,\n  resolveSlot,\n  slotRendersContent,\n  slotWrapsDefaultContent,\n  type Slot,\n  type SlotObject,\n} from '../../lib/slot';\nimport type { BackdropAppearance, IconPosition } from '../../lib/types';\nimport type { PresenceAttributes } from '../../hooks/usePresence';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { Button } from '../button/Button';\nimport { BUTTON_OWN_PROP_KEYS, type UnwrappedButton } from '../button/Button.slots';\n\n/*\n * The Close button and backdrop slots of Dialog and Drawer (P6-06 D93–D95); TeachingPopover.Header\n * renders the Close button too. Internal (not exported from the package). Imports Button, never\n * the reverse.\n */\n\ntype UnknownProps = Record<string, unknown>;\n\n/** The `backdrop` slot of `Dialog.Content`, `Drawer` and the drawer panel shell. */\nexport type ModalBackdropSlot =\n  Slot<'div'> | (SlotObject<'div'> & { appearance?: BackdropAppearance });\n\n/** Attributes of a `closeButton` slot that name the Close button instead of `closeLabel`. */\nconst NAMING_KEYS: ReadonlySet<string> = new Set(['aria-label', 'aria-labelledby', 'title']);\n\nconst HANDLER_KEY = /^on[A-Z]/;\n\nconst noop = () => {};\n\n/** How the `closeButton` slot splits between the built-in Button and the content inside it. */\ninterface CloseButtonParts {\n  /**\n   * Props for the built-in Button: every prop of a merged button (except Wave Button's own), or a\n   * slot object's naming attributes and handlers.\n   */\n  buttonProps: UnknownProps;\n  /** The Button's decorative `icon`: the slot's content, a merged Button's icon, or the glyph. */\n  icon: Slot<'span'> | undefined;\n  /** A merged Wave Button's `iconPosition`. */\n  iconPosition: IconPosition | undefined;\n  /** The Button's children: the content of a merged button (it may name the button). */\n  children: React.ReactNode;\n  /** `true` for a merged button: a text label in its content names the Close button. */\n  contentMayName: boolean;\n  /** Whether a merged button's literal content holds a text label (the server and first render). */\n  literalTextLabel: boolean;\n  /** A merged Wave Button's `disabledFocusable`. */\n  disabledFocusable: boolean;\n  /** What was merged, for the development warning (`null`: nothing). */\n  merged: UnwrappedButton | null;\n}\n\n/** The decorative default glyph of the Close button. */\nconst defaultGlyph = () => <DismissIcon />;\n\nfunction defaultParts(): CloseButtonParts {\n  return {\n    buttonProps: {},\n    icon: defaultGlyph(),\n    iconPosition: undefined,\n    children: undefined,\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n    merged: null,\n  };\n}\n\nfunction isButtonType(type: unknown): boolean {\n  return type === 'button' || type === Button;\n}\n\n/**\n * The parts of a `<button>` or Wave `Button` merged into the built-in Close button: its props go\n * to the Button (Wave Button's own props are applied or dropped), its content becomes the Button's\n * children, and a Wave Button's `icon` stays its icon. Without content of either kind the\n * default glyph stays.\n */\nfunction mergedParts(\n  props: UnknownProps,\n  children: unknown,\n  isWaveButton: boolean,\n  merged: UnwrappedButton,\n): CloseButtonParts {\n  const buttonProps: UnknownProps = {};\n  for (const [key, value] of Object.entries(props)) {\n    if (key === 'children' || key === 'dangerouslySetInnerHTML' || BUTTON_OWN_PROP_KEYS.has(key)) {\n      continue;\n    }\n    buttonProps[key] = value;\n  }\n  // Markup of the merged button is its content too, in a span inside the Button.\n  const markup = props.dangerouslySetInnerHTML as\n    React.HTMLAttributes<HTMLElement>['dangerouslySetInnerHTML'] | undefined;\n  const content =\n    markup != null ? (\n      <span className=\"inline-flex items-center\" dangerouslySetInnerHTML={markup} />\n    ) : (\n      materialiseSlotContent(children)\n    );\n  const icon = isWaveButton && slotRendersContent(props.icon) ? (props.icon as Slot<'span'>) : null;\n  const hasContent = icon !== null || slotRendersContent(content);\n  return {\n    buttonProps,\n    icon: hasContent ? (icon ?? undefined) : defaultGlyph(),\n    iconPosition: isWaveButton ? (props.iconPosition as IconPosition | undefined) : undefined,\n    children: hasContent ? content : undefined,\n    contentMayName: true,\n    literalTextLabel: hasTextLabel(content),\n    disabledFocusable: isWaveButton && Boolean(props.disabledFocusable),\n    merged,\n  };\n}\n\n/**\n * Splits the `closeButton` slot (D95): `null` means no Close button; `undefined` and booleans keep\n * the default; a `<button>`/`Button` element, or a slot object whose `as` is one, is merged; other\n * content is the Button's decorative icon, whose element takes a slot object's other attributes\n * while its naming attributes and handlers go to the Button. Content that renders nothing keeps\n * the default glyph, as does a slot object whose element wraps the default content.\n */\nfunction resolveCloseButton(closeButton: Slot<'span'> | undefined): CloseButtonParts | null {\n  if (closeButton === null) return null;\n  if (closeButton === undefined || typeof closeButton === 'boolean') return defaultParts();\n\n  // A Button written in a Server Component (a lazy client reference) is merged too.\n  const element = closeButton as React.ReactNode;\n  if (isElementOfType<UnknownProps>(element, 'button', Button)) {\n    return mergedParts(\n      element.props,\n      element.props.children,\n      isElementOfType(element, Button),\n      'a button element',\n    );\n  }\n\n  const resolved = resolveSlot(closeButton, 'span');\n  if (!resolved) return defaultParts();\n  const { Component, props, children } = resolved;\n  if (isButtonType(Component)) {\n    return mergedParts(\n      props,\n      children,\n      Component === Button,\n      'a slot object that renders a button',\n    );\n  }\n\n  const buttonProps: UnknownProps = {};\n  const contentProps: UnknownProps = {};\n  for (const [key, value] of Object.entries(props)) {\n    if (NAMING_KEYS.has(key) || HANDLER_KEY.test(key)) buttonProps[key] = value;\n    else contentProps[key] = value;\n  }\n  let inner: React.ReactNode;\n  if (slotRendersContent(children)) inner = children;\n  else if (slotWrapsDefaultContent(Component, { ...contentProps, children }))\n    inner = defaultGlyph();\n  return {\n    buttonProps,\n    // The content element, as a slot object of the Button's icon: Button adds its icon classes\n    // and `aria-hidden`.\n    icon: { ...contentProps, as: Component, children: inner } as SlotObject<'span'>,\n    iconPosition: undefined,\n    children: undefined,\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n    merged: null,\n  };\n}\n\n/** Properties of {@link ModalCloseButton}. */\nexport interface ModalCloseButtonProps {\n  /** `'Dialog.Content'`, `'Drawer'` or `'TeachingPopover.Header'`: the warning key and text. */\n  componentName: string;\n  /** The `closeButton` slot. */\n  closeButton: Slot<'span'> | undefined;\n  /**\n   * The slot's prop name, for the warning key and text (TeachingPopover.Header's `dismissButton`).\n   * @default 'closeButton'\n   */\n  slotName?: string;\n  /** The Button's name unless the slot names it (`closeLabel`). */\n  closeLabel: string;\n  /** Asks to close with `'close-button'`. */\n  onClose: (event: Event) => void;\n  /** The part class and layout classes, after Button's own (`drawerClassNames.closeButton`, …). */\n  className: string;\n}\n\n/**\n * The built-in Close button with the `closeButton` slot rules (D95), shared by `Dialog.Content`,\n * the built-in Drawer header, every `Drawer.HeaderTitle` and `TeachingPopover.Header` (its\n * `dismissButton`): a subtle, small Wave `Button` named by `closeLabel`, holding the dismiss glyph\n * or the slot's decorative content; a merged button's text label (two letters or digits,\n * `labelInName.ts`) names it instead, from the literal content on the server and the first render\n * and from the rendered text after mount. `null` when hidden. Warns once, from an effect, when a\n * button was merged.\n */\nexport function ModalCloseButton({\n  componentName,\n  closeButton,\n  slotName = 'closeButton',\n  closeLabel,\n  onClose,\n  className,\n}: ModalCloseButtonProps): React.ReactNode {\n  const parts = resolveCloseButton(closeButton);\n  const merged = parts?.merged ?? null;\n  React.useEffect(() => {\n    if (merged === null) return;\n    warnOnce(\n      `${componentName}:${slotName}-button-element`,\n      `${componentName}: \\`${slotName}\\` received ${merged}; its props were merged into the built-in Close button (buttons cannot be nested). Pass icon content instead, e.g. \\`${slotName}={<CloseIcon />}\\`.`,\n    );\n  }, [merged, componentName, slotName]);\n\n  const {\n    ref: slotRef,\n    onClick: slotOnClick,\n    className: slotClassName,\n    ...slotButtonProps\n  } = parts?.buttonProps ?? {};\n  const hasOwnName = Object.keys(slotButtonProps).some(\n    (key) => NAMING_KEYS.has(key) && slotButtonProps[key] != null,\n  );\n\n  // WCAG 2.5.3 (Label in Name): a merged button's text label names the Close button, which then\n  // drops `closeLabel`. The literal content decides on the server and the first render; after\n  // mount the rendered text does (text from components, e.g. translations, and later changes).\n  const checksContent = parts !== null && parts.contentMayName && !hasOwnName;\n  const literalTextLabel = parts?.literalTextLabel ?? false;\n  const [labelTarget, setLabelTarget] = React.useState<HTMLButtonElement | null>(null);\n  const subscribeToContent = React.useCallback(\n    (onChange: () => void) => (labelTarget ? observeTextLabel(labelTarget, onChange) : noop),\n    [labelTarget],\n  );\n  const contentHasTextLabel = React.useSyncExternalStore(\n    subscribeToContent,\n    () => (labelTarget ? hasRenderedTextLabel(labelTarget) : literalTextLabel),\n    () => literalTextLabel,\n  );\n  const namedByContent = checksContent && contentHasTextLabel;\n  const ref = useMergedRefs<HTMLButtonElement>(\n    slotRef as React.Ref<HTMLButtonElement> | undefined,\n    checksContent ? setLabelTarget : undefined,\n  );\n\n  if (parts === null) return null;\n  return (\n    <Button\n      appearance=\"subtle\"\n      size=\"small\"\n      aria-label={hasOwnName || namedByContent ? undefined : closeLabel}\n      {...slotButtonProps}\n      ref={ref}\n      icon={parts.icon}\n      iconPosition={parts.iconPosition}\n      disabledFocusable={parts.disabledFocusable}\n      onClick={composeEventHandlers(\n        slotOnClick as React.MouseEventHandler<HTMLButtonElement> | undefined,\n        (event: React.MouseEvent<HTMLButtonElement>) => onClose(event.nativeEvent),\n      )}\n      className={cn(className, slotClassName as string | undefined)}\n    >\n      {parts.children}\n    </Button>\n  );\n}\nModalCloseButton.displayName = 'ModalCloseButton';\n\n/** The server snapshot of {@link useBackdropAppearance}: nothing is stacked on the server. */\nconst getServerAppearance = (): BackdropAppearance => 'dimmed';\n\n/**\n * The automatic look of a modal surface's backdrop (D94): `'transparent'` while the surface is\n * open and another open modal surface whose isolation is active is stacked below it (nested in its\n * content or opened beside it), so the page is dimmed once; `'dimmed'` otherwise. Derived during\n * render from the layer stack (`hasIsolatingModalBelow`), re-read whenever a layer or an isolation\n * changes, so the upper surface dims when the lower one closes. A modal layer without isolation\n * (the DatePicker calendar) never counts.\n */\nexport function useBackdropAppearance(layerId: string, open: boolean): BackdropAppearance {\n  const getSnapshot = React.useCallback(\n    (): BackdropAppearance => (open && hasIsolatingModalBelow(layerId) ? 'transparent' : 'dimmed'),\n    [layerId, open],\n  );\n  return React.useSyncExternalStore(subscribeLayers, getSnapshot, getServerAppearance);\n}\n\n/** Properties of {@link ModalBackdrop}. */\nexport interface ModalBackdropProps {\n  /** The `backdrop` slot. */\n  backdrop: ModalBackdropSlot | undefined;\n  /**\n   * The stable class (`dialogContentClassNames.backdrop`, `drawerClassNames.backdrop`, plus a\n   * variant's), first in the backdrop's classes.\n   */\n  className: string;\n  /** The surface's dismiss layer (for the automatic appearance). */\n  layerId: string;\n  /** Whether the surface is open. */\n  open: boolean;\n  /** The surface's backdrop press handling (`useBackdropPress`), after the slot's own handler. */\n  onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;\n  /** The presence attributes of the surface's top-level elements (P6-07). */\n  presenceProps: PresenceAttributes;\n}\n\n/**\n * The backdrop element of a modal or alert surface with the `backdrop` slot rules (D93) and the\n * automatic appearance (D94): `aria-hidden`, `fixed inset-0`, rendered as `data-appearance` and\n * filled with the backdrop token, or transparent. `null` renders none; `undefined` and booleans\n * the default; shorthand content renders inside it; a slot object's attributes, `className`\n * (merged last), `style`, `ref` and handlers (composed, the slot's first) go to it, its children\n * render inside it, and its `appearance` overrides the automatic one. `aria-hidden=\"true\"` always\n * wins.\n */\nexport function ModalBackdrop({\n  backdrop,\n  className,\n  layerId,\n  open,\n  onMouseDown,\n  presenceProps,\n}: ModalBackdropProps): React.ReactNode {\n  const automatic = useBackdropAppearance(layerId, open);\n  const slot = backdrop === null || typeof backdrop === 'boolean' ? undefined : backdrop;\n  const resolved = slot === undefined ? null : resolveSlot<'div'>(slot as Slot<'div'>, 'div');\n  const {\n    appearance: ownAppearance,\n    className: slotClassName,\n    onMouseDown: slotOnMouseDown,\n    ref: slotRef,\n    ...slotProps\n  } = resolved?.props ?? {};\n  const ref = useMergedRefs<HTMLElement>(slotRef as React.Ref<HTMLElement> | undefined);\n  if (backdrop === null) return null;\n\n  const appearance: BackdropAppearance =\n    ownAppearance === 'dimmed' || ownAppearance === 'transparent' ? ownAppearance : automatic;\n  const Component: React.ElementType = resolved?.Component ?? 'div';\n  return (\n    <Component\n      data-appearance={appearance}\n      {...slotProps}\n      {...presenceProps}\n      ref={ref}\n      aria-hidden=\"true\"\n      onMouseDown={composeEventHandlers(\n        slotOnMouseDown as React.MouseEventHandler<HTMLElement> | undefined,\n        onMouseDown,\n      )}\n      className={cn(\n        className,\n        'fixed inset-0',\n        appearance === 'transparent' ? 'bg-transparent' : 'bg-backdrop',\n        slotClassName as string | undefined,\n      )}\n    >\n      {resolved?.children}\n    </Component>\n  );\n}\nModalBackdrop.displayName = 'ModalBackdrop';\n"],"mappings":"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"}
+{"version":3,"file":"Dialog.slots.cjs","names":["DismissIcon","Button","BUTTON_OWN_PROP_KEYS","materialiseSlotContent","slotRendersContent","hasTextLabel","isElementOfType","resolveSlot","slotWrapsDefaultContent","React","observeTextLabel","hasRenderedTextLabel","useMergedRefs","composeEventHandlers","cn","hasIsolatingModalBelow","subscribeLayers","require_runtime","require_cn","require_children","require_dev","require_slot","require_composeEventHandlers","require_useMergedRefs","require_layers","require_Button","require_Button_slots","require_icons","require_labelInName","react","react_jsx_runtime","NAMING_KEYS","HANDLER_KEY","noop","defaultGlyph","defaultParts","isButtonType","type","mergedParts","buttonProps","key","value","props","markup","content","children","icon","isWaveButton","hasContent","resolveCloseButton","closeButton","element","resolved","Component","contentProps","inner","ModalCloseButton","parts","merged","componentName","slotName","slotRef","slotOnClick","slotClassName","slotButtonProps","hasOwnName","checksContent","literalTextLabel","labelTarget","setLabelTarget","subscribeToContent","onChange","contentHasTextLabel","namedByContent","ref","closeLabel","onClose","event","className","getServerAppearance","useBackdropAppearance","getSnapshot","open","layerId","live","held","setHeld","ModalBackdrop","automatic","slot","backdrop","ownAppearance","slotOnMouseDown","slotProps","appearance","presenceProps","onMouseDown","motionClassName"],"sources":["../../../src/components/overlays/Dialog.slots.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { DismissIcon } from '../../lib/icons';\nimport { hasRenderedTextLabel, hasTextLabel, observeTextLabel } from '../../lib/labelInName';\nimport { hasIsolatingModalBelow, subscribeLayers } from '../../lib/layers';\nimport {\n  materialiseSlotContent,\n  resolveSlot,\n  slotRendersContent,\n  slotWrapsDefaultContent,\n  type Slot,\n  type SlotObject,\n} from '../../lib/slot';\nimport type { BackdropAppearance, IconPosition } from '../../lib/types';\nimport type { PresenceAttributes } from '../../hooks/usePresence';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { Button } from '../button/Button';\nimport { BUTTON_OWN_PROP_KEYS, type UnwrappedButton } from '../button/Button.slots';\n\n/*\n * The Close button and backdrop slots of Dialog and Drawer (P6-06 D93–D95); TeachingPopover.Header\n * renders the Close button too. Internal (not exported from the package). Imports Button, never\n * the reverse.\n */\n\ntype UnknownProps = Record<string, unknown>;\n\n/** The `backdrop` slot of `Dialog.Content`, `Drawer` and the drawer panel shell. */\nexport type ModalBackdropSlot =\n  Slot<'div'> | (SlotObject<'div'> & { appearance?: BackdropAppearance });\n\n/** Attributes of a `closeButton` slot that name the Close button instead of `closeLabel`. */\nconst NAMING_KEYS: ReadonlySet<string> = new Set(['aria-label', 'aria-labelledby', 'title']);\n\nconst HANDLER_KEY = /^on[A-Z]/;\n\nconst noop = () => {};\n\n/** How the `closeButton` slot splits between the built-in Button and the content inside it. */\ninterface CloseButtonParts {\n  /**\n   * Props for the built-in Button: every prop of a merged button (except Wave Button's own), or a\n   * slot object's naming attributes and handlers.\n   */\n  buttonProps: UnknownProps;\n  /** The Button's decorative `icon`: the slot's content, a merged Button's icon, or the glyph. */\n  icon: Slot<'span'> | undefined;\n  /** A merged Wave Button's `iconPosition`. */\n  iconPosition: IconPosition | undefined;\n  /** The Button's children: the content of a merged button (it may name the button). */\n  children: React.ReactNode;\n  /** `true` for a merged button: a text label in its content names the Close button. */\n  contentMayName: boolean;\n  /** Whether a merged button's literal content holds a text label (the server and first render). */\n  literalTextLabel: boolean;\n  /** A merged Wave Button's `disabledFocusable`. */\n  disabledFocusable: boolean;\n  /** What was merged, for the development warning (`null`: nothing). */\n  merged: UnwrappedButton | null;\n}\n\n/** The decorative default glyph of the Close button. */\nconst defaultGlyph = () => <DismissIcon />;\n\nfunction defaultParts(): CloseButtonParts {\n  return {\n    buttonProps: {},\n    icon: defaultGlyph(),\n    iconPosition: undefined,\n    children: undefined,\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n    merged: null,\n  };\n}\n\nfunction isButtonType(type: unknown): boolean {\n  return type === 'button' || type === Button;\n}\n\n/**\n * The parts of a `<button>` or Wave `Button` merged into the built-in Close button: its props go\n * to the Button (Wave Button's own props are applied or dropped), its content becomes the Button's\n * children, and a Wave Button's `icon` stays its icon. Without content of either kind the\n * default glyph stays.\n */\nfunction mergedParts(\n  props: UnknownProps,\n  children: unknown,\n  isWaveButton: boolean,\n  merged: UnwrappedButton,\n): CloseButtonParts {\n  const buttonProps: UnknownProps = {};\n  for (const [key, value] of Object.entries(props)) {\n    if (key === 'children' || key === 'dangerouslySetInnerHTML' || BUTTON_OWN_PROP_KEYS.has(key)) {\n      continue;\n    }\n    buttonProps[key] = value;\n  }\n  // Markup of the merged button is its content too, in a span inside the Button.\n  const markup = props.dangerouslySetInnerHTML as\n    React.HTMLAttributes<HTMLElement>['dangerouslySetInnerHTML'] | undefined;\n  const content =\n    markup != null ? (\n      <span className=\"inline-flex items-center\" dangerouslySetInnerHTML={markup} />\n    ) : (\n      materialiseSlotContent(children)\n    );\n  const icon = isWaveButton && slotRendersContent(props.icon) ? (props.icon as Slot<'span'>) : null;\n  const hasContent = icon !== null || slotRendersContent(content);\n  return {\n    buttonProps,\n    icon: hasContent ? (icon ?? undefined) : defaultGlyph(),\n    iconPosition: isWaveButton ? (props.iconPosition as IconPosition | undefined) : undefined,\n    children: hasContent ? content : undefined,\n    contentMayName: true,\n    literalTextLabel: hasTextLabel(content),\n    disabledFocusable: isWaveButton && Boolean(props.disabledFocusable),\n    merged,\n  };\n}\n\n/**\n * Splits the `closeButton` slot (D95): `null` means no Close button; `undefined` and booleans keep\n * the default; a `<button>`/`Button` element, or a slot object whose `as` is one, is merged; other\n * content is the Button's decorative icon, whose element takes a slot object's other attributes\n * while its naming attributes and handlers go to the Button. Content that renders nothing keeps\n * the default glyph, as does a slot object whose element wraps the default content.\n */\nfunction resolveCloseButton(closeButton: Slot<'span'> | undefined): CloseButtonParts | null {\n  if (closeButton === null) return null;\n  if (closeButton === undefined || typeof closeButton === 'boolean') return defaultParts();\n\n  // A Button written in a Server Component (a lazy client reference) is merged too.\n  const element = closeButton as React.ReactNode;\n  if (isElementOfType<UnknownProps>(element, 'button', Button)) {\n    return mergedParts(\n      element.props,\n      element.props.children,\n      isElementOfType(element, Button),\n      'a button element',\n    );\n  }\n\n  const resolved = resolveSlot(closeButton, 'span');\n  if (!resolved) return defaultParts();\n  const { Component, props, children } = resolved;\n  if (isButtonType(Component)) {\n    return mergedParts(\n      props,\n      children,\n      Component === Button,\n      'a slot object that renders a button',\n    );\n  }\n\n  const buttonProps: UnknownProps = {};\n  const contentProps: UnknownProps = {};\n  for (const [key, value] of Object.entries(props)) {\n    if (NAMING_KEYS.has(key) || HANDLER_KEY.test(key)) buttonProps[key] = value;\n    else contentProps[key] = value;\n  }\n  let inner: React.ReactNode;\n  if (slotRendersContent(children)) inner = children;\n  else if (slotWrapsDefaultContent(Component, { ...contentProps, children }))\n    inner = defaultGlyph();\n  return {\n    buttonProps,\n    // The content element, as a slot object of the Button's icon: Button adds its icon classes\n    // and `aria-hidden`.\n    icon: { ...contentProps, as: Component, children: inner } as SlotObject<'span'>,\n    iconPosition: undefined,\n    children: undefined,\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n    merged: null,\n  };\n}\n\n/** Properties of {@link ModalCloseButton}. */\nexport interface ModalCloseButtonProps {\n  /** `'Dialog.Content'`, `'Drawer'` or `'TeachingPopover.Header'`: the warning key and text. */\n  componentName: string;\n  /** The `closeButton` slot. */\n  closeButton: Slot<'span'> | undefined;\n  /**\n   * The slot's prop name, for the warning key and text (TeachingPopover.Header's `dismissButton`).\n   * @default 'closeButton'\n   */\n  slotName?: string;\n  /** The Button's name unless the slot names it (`closeLabel`). */\n  closeLabel: string;\n  /** Asks to close with `'close-button'`. */\n  onClose: (event: Event) => void;\n  /** The part class and layout classes, after Button's own (`drawerClassNames.closeButton`, …). */\n  className: string;\n}\n\n/**\n * The built-in Close button with the `closeButton` slot rules (D95), shared by `Dialog.Content`,\n * the built-in Drawer header, every `Drawer.HeaderTitle` and `TeachingPopover.Header` (its\n * `dismissButton`): a subtle, small Wave `Button` named by `closeLabel`, holding the dismiss glyph\n * or the slot's decorative content; a merged button's text label (two letters or digits,\n * `labelInName.ts`) names it instead, from the literal content on the server and the first render\n * and from the rendered text after mount. `null` when hidden. Warns once, from an effect, when a\n * button was merged.\n */\nexport function ModalCloseButton({\n  componentName,\n  closeButton,\n  slotName = 'closeButton',\n  closeLabel,\n  onClose,\n  className,\n}: ModalCloseButtonProps): React.ReactNode {\n  const parts = resolveCloseButton(closeButton);\n  const merged = parts?.merged ?? null;\n  React.useEffect(() => {\n    if (merged === null) return;\n    warnOnce(\n      `${componentName}:${slotName}-button-element`,\n      `${componentName}: \\`${slotName}\\` received ${merged}; its props were merged into the built-in Close button (buttons cannot be nested). Pass icon content instead, e.g. \\`${slotName}={<CloseIcon />}\\`.`,\n    );\n  }, [merged, componentName, slotName]);\n\n  const {\n    ref: slotRef,\n    onClick: slotOnClick,\n    className: slotClassName,\n    ...slotButtonProps\n  } = parts?.buttonProps ?? {};\n  const hasOwnName = Object.keys(slotButtonProps).some(\n    (key) => NAMING_KEYS.has(key) && slotButtonProps[key] != null,\n  );\n\n  // WCAG 2.5.3 (Label in Name): a merged button's text label names the Close button, which then\n  // drops `closeLabel`. The literal content decides on the server and the first render; after\n  // mount the rendered text does (text from components, e.g. translations, and later changes).\n  const checksContent = parts !== null && parts.contentMayName && !hasOwnName;\n  const literalTextLabel = parts?.literalTextLabel ?? false;\n  const [labelTarget, setLabelTarget] = React.useState<HTMLButtonElement | null>(null);\n  const subscribeToContent = React.useCallback(\n    (onChange: () => void) => (labelTarget ? observeTextLabel(labelTarget, onChange) : noop),\n    [labelTarget],\n  );\n  const contentHasTextLabel = React.useSyncExternalStore(\n    subscribeToContent,\n    () => (labelTarget ? hasRenderedTextLabel(labelTarget) : literalTextLabel),\n    () => literalTextLabel,\n  );\n  const namedByContent = checksContent && contentHasTextLabel;\n  const ref = useMergedRefs<HTMLButtonElement>(\n    slotRef as React.Ref<HTMLButtonElement> | undefined,\n    checksContent ? setLabelTarget : undefined,\n  );\n\n  if (parts === null) return null;\n  return (\n    <Button\n      appearance=\"subtle\"\n      size=\"small\"\n      aria-label={hasOwnName || namedByContent ? undefined : closeLabel}\n      {...slotButtonProps}\n      ref={ref}\n      icon={parts.icon}\n      iconPosition={parts.iconPosition}\n      disabledFocusable={parts.disabledFocusable}\n      onClick={composeEventHandlers(\n        slotOnClick as React.MouseEventHandler<HTMLButtonElement> | undefined,\n        (event: React.MouseEvent<HTMLButtonElement>) => onClose(event.nativeEvent),\n      )}\n      className={cn(className, slotClassName as string | undefined)}\n    >\n      {parts.children}\n    </Button>\n  );\n}\nModalCloseButton.displayName = 'ModalCloseButton';\n\n/** The server snapshot of {@link useBackdropAppearance}: nothing is stacked on the server. */\nconst getServerAppearance = (): BackdropAppearance => 'dimmed';\n\n/**\n * The automatic look of a modal surface's backdrop (D94): `'transparent'` while the surface is\n * open and another open modal surface whose isolation is active is stacked below it (nested in its\n * content or opened beside it), so the page is dimmed once; `'dimmed'` otherwise. Derived during\n * render from the layer stack (`hasIsolatingModalBelow`), re-read whenever a layer or an isolation\n * changes, so the upper surface dims when the lower one closes. A modal layer without isolation\n * (the DatePicker calendar) never counts. While closed it keeps the look it last had while open,\n * so a stacked surface's backdrop stays transparent through its exit motion instead of dimming the\n * page a second time.\n */\nexport function useBackdropAppearance(layerId: string, open: boolean): BackdropAppearance {\n  const getSnapshot = React.useCallback(\n    (): BackdropAppearance => (open && hasIsolatingModalBelow(layerId) ? 'transparent' : 'dimmed'),\n    [layerId, open],\n  );\n  const live = React.useSyncExternalStore(subscribeLayers, getSnapshot, getServerAppearance);\n  // The look while open, held through the close (a previous-value state, updated only while open).\n  const [held, setHeld] = React.useState(live);\n  if (open && live !== held) setHeld(live);\n  return open ? live : held;\n}\n\n/** Properties of {@link ModalBackdrop}. */\nexport interface ModalBackdropProps {\n  /** The `backdrop` slot. */\n  backdrop: ModalBackdropSlot | undefined;\n  /**\n   * The stable class (`dialogContentClassNames.backdrop`, `drawerClassNames.backdrop`, plus a\n   * variant's), first in the backdrop's classes.\n   */\n  className: string;\n  /** The surface's dismiss layer (for the automatic appearance). */\n  layerId: string;\n  /** Whether the surface is open. */\n  open: boolean;\n  /** The surface's backdrop press handling (`useBackdropPress`), after the slot's own handler. */\n  onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;\n  /** The presence attributes of the surface's top-level elements (P6-07). */\n  presenceProps: PresenceAttributes;\n  /**\n   * The backdrop's motion classes (its `backdropMotion`, resolved), after the base classes and\n   * before the slot's `className`.\n   */\n  motionClassName?: string;\n}\n\n/**\n * The backdrop element of a modal or alert surface with the `backdrop` slot rules (D93) and the\n * automatic appearance (D94): `aria-hidden`, `fixed inset-0`, rendered as `data-appearance` and\n * filled with the backdrop token, or transparent, then its motion classes. `null` renders none;\n * `undefined` and booleans the default; shorthand content renders inside it; a slot object's\n * attributes, `className` (merged last), `style`, `ref` and handlers (composed, the slot's first)\n * go to it, its children render inside it, and its `appearance` overrides the automatic one.\n * `aria-hidden=\"true\"` always wins.\n */\nexport function ModalBackdrop({\n  backdrop,\n  className,\n  layerId,\n  open,\n  onMouseDown,\n  presenceProps,\n  motionClassName,\n}: ModalBackdropProps): React.ReactNode {\n  const automatic = useBackdropAppearance(layerId, open);\n  const slot = backdrop === null || typeof backdrop === 'boolean' ? undefined : backdrop;\n  const resolved = slot === undefined ? null : resolveSlot<'div'>(slot as Slot<'div'>, 'div');\n  const {\n    appearance: ownAppearance,\n    className: slotClassName,\n    onMouseDown: slotOnMouseDown,\n    ref: slotRef,\n    ...slotProps\n  } = resolved?.props ?? {};\n  const ref = useMergedRefs<HTMLElement>(slotRef as React.Ref<HTMLElement> | undefined);\n  if (backdrop === null) return null;\n\n  const appearance: BackdropAppearance =\n    ownAppearance === 'dimmed' || ownAppearance === 'transparent' ? ownAppearance : automatic;\n  const Component: React.ElementType = resolved?.Component ?? 'div';\n  return (\n    <Component\n      data-appearance={appearance}\n      {...slotProps}\n      {...presenceProps}\n      ref={ref}\n      aria-hidden=\"true\"\n      onMouseDown={composeEventHandlers(\n        slotOnMouseDown as React.MouseEventHandler<HTMLElement> | undefined,\n        onMouseDown,\n      )}\n      className={cn(\n        className,\n        'fixed inset-0',\n        appearance === 'transparent' ? 'bg-transparent' : 'bg-backdrop',\n        motionClassName,\n        slotClassName as string | undefined,\n      )}\n    >\n      {resolved?.children}\n    </Component>\n  );\n}\nModalBackdrop.displayName = 'ModalBackdrop';\n"],"mappings":"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"}

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

@@ -108,22 +108,22 @@ function D({ componentName: t, closeButton: r, slotName: i = "closeButton", clos
 D.displayName = "ModalCloseButton";
 var O = () => "dimmed";
 function k(e, t) {
-	let n = _.useCallback(() => t && l(e) ? "transparent" : "dimmed", [e, t]);
-	return _.useSyncExternalStore(u, n, O);
+	let n = _.useCallback(() => t && l(e) ? "transparent" : "dimmed", [e, t]), r = _.useSyncExternalStore(u, n, O), [i, a] = _.useState(r);
+	return t && r !== i && a(r), t ? r : i;
 }
-function A({ backdrop: t, className: n, layerId: r, open: a, onMouseDown: o, presenceProps: l }) {
-	let u = k(r, a), d = t === null || typeof t == "boolean" ? void 0 : t, f = d === void 0 ? null : i(d, "div"), { appearance: p, className: m, onMouseDown: h, ref: g, ..._ } = f?.props ?? {}, y = c(g);
+function A({ backdrop: t, className: n, layerId: r, open: a, onMouseDown: o, presenceProps: l, motionClassName: u }) {
+	let d = k(r, a), f = t === null || typeof t == "boolean" ? void 0 : t, p = f === void 0 ? null : i(f, "div"), { appearance: m, className: h, onMouseDown: g, ref: _, ...y } = p?.props ?? {}, b = c(_);
 	if (t === null) return null;
-	let b = p === "dimmed" || p === "transparent" ? p : u, x = f?.Component ?? "div";
-	return /* @__PURE__ */ v(x, {
-		"data-appearance": b,
-		..._,
+	let x = m === "dimmed" || m === "transparent" ? m : d, S = p?.Component ?? "div";
+	return /* @__PURE__ */ v(S, {
+		"data-appearance": x,
+		...y,
 		...l,
-		ref: y,
+		ref: b,
 		"aria-hidden": "true",
-		onMouseDown: s(h, o),
-		className: e(n, "fixed inset-0", b === "transparent" ? "bg-transparent" : "bg-backdrop", m),
-		children: f?.children
+		onMouseDown: s(g, o),
+		className: e(n, "fixed inset-0", x === "transparent" ? "bg-transparent" : "bg-backdrop", u, h),
+		children: p?.children
 	});
 }
 A.displayName = "ModalBackdrop";

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.slots.mjs","names":["React","NAMING_KEYS","HANDLER_KEY","noop","defaultGlyph","DismissIcon","defaultParts","isButtonType","type","Button","mergedParts","buttonProps","key","value","props","BUTTON_OWN_PROP_KEYS","markup","content","materialiseSlotContent","children","icon","isWaveButton","slotRendersContent","hasContent","hasTextLabel","resolveCloseButton","closeButton","element","isElementOfType","resolved","resolveSlot","Component","contentProps","inner","slotWrapsDefaultContent","ModalCloseButton","parts","merged","warnOnce","componentName","slotName","slotRef","slotOnClick","slotClassName","slotButtonProps","hasOwnName","checksContent","literalTextLabel","labelTarget","setLabelTarget","subscribeToContent","observeTextLabel","onChange","contentHasTextLabel","hasRenderedTextLabel","namedByContent","ref","useMergedRefs","closeLabel","composeEventHandlers","onClose","event","cn","className","getServerAppearance","useBackdropAppearance","getSnapshot","open","hasIsolatingModalBelow","layerId","subscribeLayers","ModalBackdrop","automatic","slot","backdrop","ownAppearance","slotOnMouseDown","slotProps","appearance","presenceProps","onMouseDown"],"sources":["../../../src/components/overlays/Dialog.slots.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { DismissIcon } from '../../lib/icons';\nimport { hasRenderedTextLabel, hasTextLabel, observeTextLabel } from '../../lib/labelInName';\nimport { hasIsolatingModalBelow, subscribeLayers } from '../../lib/layers';\nimport {\n  materialiseSlotContent,\n  resolveSlot,\n  slotRendersContent,\n  slotWrapsDefaultContent,\n  type Slot,\n  type SlotObject,\n} from '../../lib/slot';\nimport type { BackdropAppearance, IconPosition } from '../../lib/types';\nimport type { PresenceAttributes } from '../../hooks/usePresence';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { Button } from '../button/Button';\nimport { BUTTON_OWN_PROP_KEYS, type UnwrappedButton } from '../button/Button.slots';\n\n/*\n * The Close button and backdrop slots of Dialog and Drawer (P6-06 D93–D95); TeachingPopover.Header\n * renders the Close button too. Internal (not exported from the package). Imports Button, never\n * the reverse.\n */\n\ntype UnknownProps = Record<string, unknown>;\n\n/** The `backdrop` slot of `Dialog.Content`, `Drawer` and the drawer panel shell. */\nexport type ModalBackdropSlot =\n  Slot<'div'> | (SlotObject<'div'> & { appearance?: BackdropAppearance });\n\n/** Attributes of a `closeButton` slot that name the Close button instead of `closeLabel`. */\nconst NAMING_KEYS: ReadonlySet<string> = new Set(['aria-label', 'aria-labelledby', 'title']);\n\nconst HANDLER_KEY = /^on[A-Z]/;\n\nconst noop = () => {};\n\n/** How the `closeButton` slot splits between the built-in Button and the content inside it. */\ninterface CloseButtonParts {\n  /**\n   * Props for the built-in Button: every prop of a merged button (except Wave Button's own), or a\n   * slot object's naming attributes and handlers.\n   */\n  buttonProps: UnknownProps;\n  /** The Button's decorative `icon`: the slot's content, a merged Button's icon, or the glyph. */\n  icon: Slot<'span'> | undefined;\n  /** A merged Wave Button's `iconPosition`. */\n  iconPosition: IconPosition | undefined;\n  /** The Button's children: the content of a merged button (it may name the button). */\n  children: React.ReactNode;\n  /** `true` for a merged button: a text label in its content names the Close button. */\n  contentMayName: boolean;\n  /** Whether a merged button's literal content holds a text label (the server and first render). */\n  literalTextLabel: boolean;\n  /** A merged Wave Button's `disabledFocusable`. */\n  disabledFocusable: boolean;\n  /** What was merged, for the development warning (`null`: nothing). */\n  merged: UnwrappedButton | null;\n}\n\n/** The decorative default glyph of the Close button. */\nconst defaultGlyph = () => <DismissIcon />;\n\nfunction defaultParts(): CloseButtonParts {\n  return {\n    buttonProps: {},\n    icon: defaultGlyph(),\n    iconPosition: undefined,\n    children: undefined,\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n    merged: null,\n  };\n}\n\nfunction isButtonType(type: unknown): boolean {\n  return type === 'button' || type === Button;\n}\n\n/**\n * The parts of a `<button>` or Wave `Button` merged into the built-in Close button: its props go\n * to the Button (Wave Button's own props are applied or dropped), its content becomes the Button's\n * children, and a Wave Button's `icon` stays its icon. Without content of either kind the\n * default glyph stays.\n */\nfunction mergedParts(\n  props: UnknownProps,\n  children: unknown,\n  isWaveButton: boolean,\n  merged: UnwrappedButton,\n): CloseButtonParts {\n  const buttonProps: UnknownProps = {};\n  for (const [key, value] of Object.entries(props)) {\n    if (key === 'children' || key === 'dangerouslySetInnerHTML' || BUTTON_OWN_PROP_KEYS.has(key)) {\n      continue;\n    }\n    buttonProps[key] = value;\n  }\n  // Markup of the merged button is its content too, in a span inside the Button.\n  const markup = props.dangerouslySetInnerHTML as\n    React.HTMLAttributes<HTMLElement>['dangerouslySetInnerHTML'] | undefined;\n  const content =\n    markup != null ? (\n      <span className=\"inline-flex items-center\" dangerouslySetInnerHTML={markup} />\n    ) : (\n      materialiseSlotContent(children)\n    );\n  const icon = isWaveButton && slotRendersContent(props.icon) ? (props.icon as Slot<'span'>) : null;\n  const hasContent = icon !== null || slotRendersContent(content);\n  return {\n    buttonProps,\n    icon: hasContent ? (icon ?? undefined) : defaultGlyph(),\n    iconPosition: isWaveButton ? (props.iconPosition as IconPosition | undefined) : undefined,\n    children: hasContent ? content : undefined,\n    contentMayName: true,\n    literalTextLabel: hasTextLabel(content),\n    disabledFocusable: isWaveButton && Boolean(props.disabledFocusable),\n    merged,\n  };\n}\n\n/**\n * Splits the `closeButton` slot (D95): `null` means no Close button; `undefined` and booleans keep\n * the default; a `<button>`/`Button` element, or a slot object whose `as` is one, is merged; other\n * content is the Button's decorative icon, whose element takes a slot object's other attributes\n * while its naming attributes and handlers go to the Button. Content that renders nothing keeps\n * the default glyph, as does a slot object whose element wraps the default content.\n */\nfunction resolveCloseButton(closeButton: Slot<'span'> | undefined): CloseButtonParts | null {\n  if (closeButton === null) return null;\n  if (closeButton === undefined || typeof closeButton === 'boolean') return defaultParts();\n\n  // A Button written in a Server Component (a lazy client reference) is merged too.\n  const element = closeButton as React.ReactNode;\n  if (isElementOfType<UnknownProps>(element, 'button', Button)) {\n    return mergedParts(\n      element.props,\n      element.props.children,\n      isElementOfType(element, Button),\n      'a button element',\n    );\n  }\n\n  const resolved = resolveSlot(closeButton, 'span');\n  if (!resolved) return defaultParts();\n  const { Component, props, children } = resolved;\n  if (isButtonType(Component)) {\n    return mergedParts(\n      props,\n      children,\n      Component === Button,\n      'a slot object that renders a button',\n    );\n  }\n\n  const buttonProps: UnknownProps = {};\n  const contentProps: UnknownProps = {};\n  for (const [key, value] of Object.entries(props)) {\n    if (NAMING_KEYS.has(key) || HANDLER_KEY.test(key)) buttonProps[key] = value;\n    else contentProps[key] = value;\n  }\n  let inner: React.ReactNode;\n  if (slotRendersContent(children)) inner = children;\n  else if (slotWrapsDefaultContent(Component, { ...contentProps, children }))\n    inner = defaultGlyph();\n  return {\n    buttonProps,\n    // The content element, as a slot object of the Button's icon: Button adds its icon classes\n    // and `aria-hidden`.\n    icon: { ...contentProps, as: Component, children: inner } as SlotObject<'span'>,\n    iconPosition: undefined,\n    children: undefined,\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n    merged: null,\n  };\n}\n\n/** Properties of {@link ModalCloseButton}. */\nexport interface ModalCloseButtonProps {\n  /** `'Dialog.Content'`, `'Drawer'` or `'TeachingPopover.Header'`: the warning key and text. */\n  componentName: string;\n  /** The `closeButton` slot. */\n  closeButton: Slot<'span'> | undefined;\n  /**\n   * The slot's prop name, for the warning key and text (TeachingPopover.Header's `dismissButton`).\n   * @default 'closeButton'\n   */\n  slotName?: string;\n  /** The Button's name unless the slot names it (`closeLabel`). */\n  closeLabel: string;\n  /** Asks to close with `'close-button'`. */\n  onClose: (event: Event) => void;\n  /** The part class and layout classes, after Button's own (`drawerClassNames.closeButton`, …). */\n  className: string;\n}\n\n/**\n * The built-in Close button with the `closeButton` slot rules (D95), shared by `Dialog.Content`,\n * the built-in Drawer header, every `Drawer.HeaderTitle` and `TeachingPopover.Header` (its\n * `dismissButton`): a subtle, small Wave `Button` named by `closeLabel`, holding the dismiss glyph\n * or the slot's decorative content; a merged button's text label (two letters or digits,\n * `labelInName.ts`) names it instead, from the literal content on the server and the first render\n * and from the rendered text after mount. `null` when hidden. Warns once, from an effect, when a\n * button was merged.\n */\nexport function ModalCloseButton({\n  componentName,\n  closeButton,\n  slotName = 'closeButton',\n  closeLabel,\n  onClose,\n  className,\n}: ModalCloseButtonProps): React.ReactNode {\n  const parts = resolveCloseButton(closeButton);\n  const merged = parts?.merged ?? null;\n  React.useEffect(() => {\n    if (merged === null) return;\n    warnOnce(\n      `${componentName}:${slotName}-button-element`,\n      `${componentName}: \\`${slotName}\\` received ${merged}; its props were merged into the built-in Close button (buttons cannot be nested). Pass icon content instead, e.g. \\`${slotName}={<CloseIcon />}\\`.`,\n    );\n  }, [merged, componentName, slotName]);\n\n  const {\n    ref: slotRef,\n    onClick: slotOnClick,\n    className: slotClassName,\n    ...slotButtonProps\n  } = parts?.buttonProps ?? {};\n  const hasOwnName = Object.keys(slotButtonProps).some(\n    (key) => NAMING_KEYS.has(key) && slotButtonProps[key] != null,\n  );\n\n  // WCAG 2.5.3 (Label in Name): a merged button's text label names the Close button, which then\n  // drops `closeLabel`. The literal content decides on the server and the first render; after\n  // mount the rendered text does (text from components, e.g. translations, and later changes).\n  const checksContent = parts !== null && parts.contentMayName && !hasOwnName;\n  const literalTextLabel = parts?.literalTextLabel ?? false;\n  const [labelTarget, setLabelTarget] = React.useState<HTMLButtonElement | null>(null);\n  const subscribeToContent = React.useCallback(\n    (onChange: () => void) => (labelTarget ? observeTextLabel(labelTarget, onChange) : noop),\n    [labelTarget],\n  );\n  const contentHasTextLabel = React.useSyncExternalStore(\n    subscribeToContent,\n    () => (labelTarget ? hasRenderedTextLabel(labelTarget) : literalTextLabel),\n    () => literalTextLabel,\n  );\n  const namedByContent = checksContent && contentHasTextLabel;\n  const ref = useMergedRefs<HTMLButtonElement>(\n    slotRef as React.Ref<HTMLButtonElement> | undefined,\n    checksContent ? setLabelTarget : undefined,\n  );\n\n  if (parts === null) return null;\n  return (\n    <Button\n      appearance=\"subtle\"\n      size=\"small\"\n      aria-label={hasOwnName || namedByContent ? undefined : closeLabel}\n      {...slotButtonProps}\n      ref={ref}\n      icon={parts.icon}\n      iconPosition={parts.iconPosition}\n      disabledFocusable={parts.disabledFocusable}\n      onClick={composeEventHandlers(\n        slotOnClick as React.MouseEventHandler<HTMLButtonElement> | undefined,\n        (event: React.MouseEvent<HTMLButtonElement>) => onClose(event.nativeEvent),\n      )}\n      className={cn(className, slotClassName as string | undefined)}\n    >\n      {parts.children}\n    </Button>\n  );\n}\nModalCloseButton.displayName = 'ModalCloseButton';\n\n/** The server snapshot of {@link useBackdropAppearance}: nothing is stacked on the server. */\nconst getServerAppearance = (): BackdropAppearance => 'dimmed';\n\n/**\n * The automatic look of a modal surface's backdrop (D94): `'transparent'` while the surface is\n * open and another open modal surface whose isolation is active is stacked below it (nested in its\n * content or opened beside it), so the page is dimmed once; `'dimmed'` otherwise. Derived during\n * render from the layer stack (`hasIsolatingModalBelow`), re-read whenever a layer or an isolation\n * changes, so the upper surface dims when the lower one closes. A modal layer without isolation\n * (the DatePicker calendar) never counts.\n */\nexport function useBackdropAppearance(layerId: string, open: boolean): BackdropAppearance {\n  const getSnapshot = React.useCallback(\n    (): BackdropAppearance => (open && hasIsolatingModalBelow(layerId) ? 'transparent' : 'dimmed'),\n    [layerId, open],\n  );\n  return React.useSyncExternalStore(subscribeLayers, getSnapshot, getServerAppearance);\n}\n\n/** Properties of {@link ModalBackdrop}. */\nexport interface ModalBackdropProps {\n  /** The `backdrop` slot. */\n  backdrop: ModalBackdropSlot | undefined;\n  /**\n   * The stable class (`dialogContentClassNames.backdrop`, `drawerClassNames.backdrop`, plus a\n   * variant's), first in the backdrop's classes.\n   */\n  className: string;\n  /** The surface's dismiss layer (for the automatic appearance). */\n  layerId: string;\n  /** Whether the surface is open. */\n  open: boolean;\n  /** The surface's backdrop press handling (`useBackdropPress`), after the slot's own handler. */\n  onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;\n  /** The presence attributes of the surface's top-level elements (P6-07). */\n  presenceProps: PresenceAttributes;\n}\n\n/**\n * The backdrop element of a modal or alert surface with the `backdrop` slot rules (D93) and the\n * automatic appearance (D94): `aria-hidden`, `fixed inset-0`, rendered as `data-appearance` and\n * filled with the backdrop token, or transparent. `null` renders none; `undefined` and booleans\n * the default; shorthand content renders inside it; a slot object's attributes, `className`\n * (merged last), `style`, `ref` and handlers (composed, the slot's first) go to it, its children\n * render inside it, and its `appearance` overrides the automatic one. `aria-hidden=\"true\"` always\n * wins.\n */\nexport function ModalBackdrop({\n  backdrop,\n  className,\n  layerId,\n  open,\n  onMouseDown,\n  presenceProps,\n}: ModalBackdropProps): React.ReactNode {\n  const automatic = useBackdropAppearance(layerId, open);\n  const slot = backdrop === null || typeof backdrop === 'boolean' ? undefined : backdrop;\n  const resolved = slot === undefined ? null : resolveSlot<'div'>(slot as Slot<'div'>, 'div');\n  const {\n    appearance: ownAppearance,\n    className: slotClassName,\n    onMouseDown: slotOnMouseDown,\n    ref: slotRef,\n    ...slotProps\n  } = resolved?.props ?? {};\n  const ref = useMergedRefs<HTMLElement>(slotRef as React.Ref<HTMLElement> | undefined);\n  if (backdrop === null) return null;\n\n  const appearance: BackdropAppearance =\n    ownAppearance === 'dimmed' || ownAppearance === 'transparent' ? ownAppearance : automatic;\n  const Component: React.ElementType = resolved?.Component ?? 'div';\n  return (\n    <Component\n      data-appearance={appearance}\n      {...slotProps}\n      {...presenceProps}\n      ref={ref}\n      aria-hidden=\"true\"\n      onMouseDown={composeEventHandlers(\n        slotOnMouseDown as React.MouseEventHandler<HTMLElement> | undefined,\n        onMouseDown,\n      )}\n      className={cn(\n        className,\n        'fixed inset-0',\n        appearance === 'transparent' ? 'bg-transparent' : 'bg-backdrop',\n        slotClassName as string | undefined,\n      )}\n    >\n      {resolved?.children}\n    </Component>\n  );\n}\nModalBackdrop.displayName = 'ModalBackdrop';\n"],"mappings":"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"}
+{"version":3,"file":"Dialog.slots.mjs","names":["React","NAMING_KEYS","HANDLER_KEY","noop","defaultGlyph","DismissIcon","defaultParts","isButtonType","type","Button","mergedParts","buttonProps","key","value","props","BUTTON_OWN_PROP_KEYS","markup","content","materialiseSlotContent","children","icon","isWaveButton","slotRendersContent","hasContent","hasTextLabel","resolveCloseButton","closeButton","element","isElementOfType","resolved","resolveSlot","Component","contentProps","inner","slotWrapsDefaultContent","ModalCloseButton","parts","merged","warnOnce","componentName","slotName","slotRef","slotOnClick","slotClassName","slotButtonProps","hasOwnName","checksContent","literalTextLabel","labelTarget","setLabelTarget","subscribeToContent","observeTextLabel","onChange","contentHasTextLabel","hasRenderedTextLabel","namedByContent","ref","useMergedRefs","closeLabel","composeEventHandlers","onClose","event","cn","className","getServerAppearance","useBackdropAppearance","getSnapshot","open","hasIsolatingModalBelow","layerId","live","subscribeLayers","held","setHeld","ModalBackdrop","automatic","slot","backdrop","ownAppearance","slotOnMouseDown","slotProps","appearance","presenceProps","onMouseDown","motionClassName"],"sources":["../../../src/components/overlays/Dialog.slots.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { DismissIcon } from '../../lib/icons';\nimport { hasRenderedTextLabel, hasTextLabel, observeTextLabel } from '../../lib/labelInName';\nimport { hasIsolatingModalBelow, subscribeLayers } from '../../lib/layers';\nimport {\n  materialiseSlotContent,\n  resolveSlot,\n  slotRendersContent,\n  slotWrapsDefaultContent,\n  type Slot,\n  type SlotObject,\n} from '../../lib/slot';\nimport type { BackdropAppearance, IconPosition } from '../../lib/types';\nimport type { PresenceAttributes } from '../../hooks/usePresence';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { Button } from '../button/Button';\nimport { BUTTON_OWN_PROP_KEYS, type UnwrappedButton } from '../button/Button.slots';\n\n/*\n * The Close button and backdrop slots of Dialog and Drawer (P6-06 D93–D95); TeachingPopover.Header\n * renders the Close button too. Internal (not exported from the package). Imports Button, never\n * the reverse.\n */\n\ntype UnknownProps = Record<string, unknown>;\n\n/** The `backdrop` slot of `Dialog.Content`, `Drawer` and the drawer panel shell. */\nexport type ModalBackdropSlot =\n  Slot<'div'> | (SlotObject<'div'> & { appearance?: BackdropAppearance });\n\n/** Attributes of a `closeButton` slot that name the Close button instead of `closeLabel`. */\nconst NAMING_KEYS: ReadonlySet<string> = new Set(['aria-label', 'aria-labelledby', 'title']);\n\nconst HANDLER_KEY = /^on[A-Z]/;\n\nconst noop = () => {};\n\n/** How the `closeButton` slot splits between the built-in Button and the content inside it. */\ninterface CloseButtonParts {\n  /**\n   * Props for the built-in Button: every prop of a merged button (except Wave Button's own), or a\n   * slot object's naming attributes and handlers.\n   */\n  buttonProps: UnknownProps;\n  /** The Button's decorative `icon`: the slot's content, a merged Button's icon, or the glyph. */\n  icon: Slot<'span'> | undefined;\n  /** A merged Wave Button's `iconPosition`. */\n  iconPosition: IconPosition | undefined;\n  /** The Button's children: the content of a merged button (it may name the button). */\n  children: React.ReactNode;\n  /** `true` for a merged button: a text label in its content names the Close button. */\n  contentMayName: boolean;\n  /** Whether a merged button's literal content holds a text label (the server and first render). */\n  literalTextLabel: boolean;\n  /** A merged Wave Button's `disabledFocusable`. */\n  disabledFocusable: boolean;\n  /** What was merged, for the development warning (`null`: nothing). */\n  merged: UnwrappedButton | null;\n}\n\n/** The decorative default glyph of the Close button. */\nconst defaultGlyph = () => <DismissIcon />;\n\nfunction defaultParts(): CloseButtonParts {\n  return {\n    buttonProps: {},\n    icon: defaultGlyph(),\n    iconPosition: undefined,\n    children: undefined,\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n    merged: null,\n  };\n}\n\nfunction isButtonType(type: unknown): boolean {\n  return type === 'button' || type === Button;\n}\n\n/**\n * The parts of a `<button>` or Wave `Button` merged into the built-in Close button: its props go\n * to the Button (Wave Button's own props are applied or dropped), its content becomes the Button's\n * children, and a Wave Button's `icon` stays its icon. Without content of either kind the\n * default glyph stays.\n */\nfunction mergedParts(\n  props: UnknownProps,\n  children: unknown,\n  isWaveButton: boolean,\n  merged: UnwrappedButton,\n): CloseButtonParts {\n  const buttonProps: UnknownProps = {};\n  for (const [key, value] of Object.entries(props)) {\n    if (key === 'children' || key === 'dangerouslySetInnerHTML' || BUTTON_OWN_PROP_KEYS.has(key)) {\n      continue;\n    }\n    buttonProps[key] = value;\n  }\n  // Markup of the merged button is its content too, in a span inside the Button.\n  const markup = props.dangerouslySetInnerHTML as\n    React.HTMLAttributes<HTMLElement>['dangerouslySetInnerHTML'] | undefined;\n  const content =\n    markup != null ? (\n      <span className=\"inline-flex items-center\" dangerouslySetInnerHTML={markup} />\n    ) : (\n      materialiseSlotContent(children)\n    );\n  const icon = isWaveButton && slotRendersContent(props.icon) ? (props.icon as Slot<'span'>) : null;\n  const hasContent = icon !== null || slotRendersContent(content);\n  return {\n    buttonProps,\n    icon: hasContent ? (icon ?? undefined) : defaultGlyph(),\n    iconPosition: isWaveButton ? (props.iconPosition as IconPosition | undefined) : undefined,\n    children: hasContent ? content : undefined,\n    contentMayName: true,\n    literalTextLabel: hasTextLabel(content),\n    disabledFocusable: isWaveButton && Boolean(props.disabledFocusable),\n    merged,\n  };\n}\n\n/**\n * Splits the `closeButton` slot (D95): `null` means no Close button; `undefined` and booleans keep\n * the default; a `<button>`/`Button` element, or a slot object whose `as` is one, is merged; other\n * content is the Button's decorative icon, whose element takes a slot object's other attributes\n * while its naming attributes and handlers go to the Button. Content that renders nothing keeps\n * the default glyph, as does a slot object whose element wraps the default content.\n */\nfunction resolveCloseButton(closeButton: Slot<'span'> | undefined): CloseButtonParts | null {\n  if (closeButton === null) return null;\n  if (closeButton === undefined || typeof closeButton === 'boolean') return defaultParts();\n\n  // A Button written in a Server Component (a lazy client reference) is merged too.\n  const element = closeButton as React.ReactNode;\n  if (isElementOfType<UnknownProps>(element, 'button', Button)) {\n    return mergedParts(\n      element.props,\n      element.props.children,\n      isElementOfType(element, Button),\n      'a button element',\n    );\n  }\n\n  const resolved = resolveSlot(closeButton, 'span');\n  if (!resolved) return defaultParts();\n  const { Component, props, children } = resolved;\n  if (isButtonType(Component)) {\n    return mergedParts(\n      props,\n      children,\n      Component === Button,\n      'a slot object that renders a button',\n    );\n  }\n\n  const buttonProps: UnknownProps = {};\n  const contentProps: UnknownProps = {};\n  for (const [key, value] of Object.entries(props)) {\n    if (NAMING_KEYS.has(key) || HANDLER_KEY.test(key)) buttonProps[key] = value;\n    else contentProps[key] = value;\n  }\n  let inner: React.ReactNode;\n  if (slotRendersContent(children)) inner = children;\n  else if (slotWrapsDefaultContent(Component, { ...contentProps, children }))\n    inner = defaultGlyph();\n  return {\n    buttonProps,\n    // The content element, as a slot object of the Button's icon: Button adds its icon classes\n    // and `aria-hidden`.\n    icon: { ...contentProps, as: Component, children: inner } as SlotObject<'span'>,\n    iconPosition: undefined,\n    children: undefined,\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n    merged: null,\n  };\n}\n\n/** Properties of {@link ModalCloseButton}. */\nexport interface ModalCloseButtonProps {\n  /** `'Dialog.Content'`, `'Drawer'` or `'TeachingPopover.Header'`: the warning key and text. */\n  componentName: string;\n  /** The `closeButton` slot. */\n  closeButton: Slot<'span'> | undefined;\n  /**\n   * The slot's prop name, for the warning key and text (TeachingPopover.Header's `dismissButton`).\n   * @default 'closeButton'\n   */\n  slotName?: string;\n  /** The Button's name unless the slot names it (`closeLabel`). */\n  closeLabel: string;\n  /** Asks to close with `'close-button'`. */\n  onClose: (event: Event) => void;\n  /** The part class and layout classes, after Button's own (`drawerClassNames.closeButton`, …). */\n  className: string;\n}\n\n/**\n * The built-in Close button with the `closeButton` slot rules (D95), shared by `Dialog.Content`,\n * the built-in Drawer header, every `Drawer.HeaderTitle` and `TeachingPopover.Header` (its\n * `dismissButton`): a subtle, small Wave `Button` named by `closeLabel`, holding the dismiss glyph\n * or the slot's decorative content; a merged button's text label (two letters or digits,\n * `labelInName.ts`) names it instead, from the literal content on the server and the first render\n * and from the rendered text after mount. `null` when hidden. Warns once, from an effect, when a\n * button was merged.\n */\nexport function ModalCloseButton({\n  componentName,\n  closeButton,\n  slotName = 'closeButton',\n  closeLabel,\n  onClose,\n  className,\n}: ModalCloseButtonProps): React.ReactNode {\n  const parts = resolveCloseButton(closeButton);\n  const merged = parts?.merged ?? null;\n  React.useEffect(() => {\n    if (merged === null) return;\n    warnOnce(\n      `${componentName}:${slotName}-button-element`,\n      `${componentName}: \\`${slotName}\\` received ${merged}; its props were merged into the built-in Close button (buttons cannot be nested). Pass icon content instead, e.g. \\`${slotName}={<CloseIcon />}\\`.`,\n    );\n  }, [merged, componentName, slotName]);\n\n  const {\n    ref: slotRef,\n    onClick: slotOnClick,\n    className: slotClassName,\n    ...slotButtonProps\n  } = parts?.buttonProps ?? {};\n  const hasOwnName = Object.keys(slotButtonProps).some(\n    (key) => NAMING_KEYS.has(key) && slotButtonProps[key] != null,\n  );\n\n  // WCAG 2.5.3 (Label in Name): a merged button's text label names the Close button, which then\n  // drops `closeLabel`. The literal content decides on the server and the first render; after\n  // mount the rendered text does (text from components, e.g. translations, and later changes).\n  const checksContent = parts !== null && parts.contentMayName && !hasOwnName;\n  const literalTextLabel = parts?.literalTextLabel ?? false;\n  const [labelTarget, setLabelTarget] = React.useState<HTMLButtonElement | null>(null);\n  const subscribeToContent = React.useCallback(\n    (onChange: () => void) => (labelTarget ? observeTextLabel(labelTarget, onChange) : noop),\n    [labelTarget],\n  );\n  const contentHasTextLabel = React.useSyncExternalStore(\n    subscribeToContent,\n    () => (labelTarget ? hasRenderedTextLabel(labelTarget) : literalTextLabel),\n    () => literalTextLabel,\n  );\n  const namedByContent = checksContent && contentHasTextLabel;\n  const ref = useMergedRefs<HTMLButtonElement>(\n    slotRef as React.Ref<HTMLButtonElement> | undefined,\n    checksContent ? setLabelTarget : undefined,\n  );\n\n  if (parts === null) return null;\n  return (\n    <Button\n      appearance=\"subtle\"\n      size=\"small\"\n      aria-label={hasOwnName || namedByContent ? undefined : closeLabel}\n      {...slotButtonProps}\n      ref={ref}\n      icon={parts.icon}\n      iconPosition={parts.iconPosition}\n      disabledFocusable={parts.disabledFocusable}\n      onClick={composeEventHandlers(\n        slotOnClick as React.MouseEventHandler<HTMLButtonElement> | undefined,\n        (event: React.MouseEvent<HTMLButtonElement>) => onClose(event.nativeEvent),\n      )}\n      className={cn(className, slotClassName as string | undefined)}\n    >\n      {parts.children}\n    </Button>\n  );\n}\nModalCloseButton.displayName = 'ModalCloseButton';\n\n/** The server snapshot of {@link useBackdropAppearance}: nothing is stacked on the server. */\nconst getServerAppearance = (): BackdropAppearance => 'dimmed';\n\n/**\n * The automatic look of a modal surface's backdrop (D94): `'transparent'` while the surface is\n * open and another open modal surface whose isolation is active is stacked below it (nested in its\n * content or opened beside it), so the page is dimmed once; `'dimmed'` otherwise. Derived during\n * render from the layer stack (`hasIsolatingModalBelow`), re-read whenever a layer or an isolation\n * changes, so the upper surface dims when the lower one closes. A modal layer without isolation\n * (the DatePicker calendar) never counts. While closed it keeps the look it last had while open,\n * so a stacked surface's backdrop stays transparent through its exit motion instead of dimming the\n * page a second time.\n */\nexport function useBackdropAppearance(layerId: string, open: boolean): BackdropAppearance {\n  const getSnapshot = React.useCallback(\n    (): BackdropAppearance => (open && hasIsolatingModalBelow(layerId) ? 'transparent' : 'dimmed'),\n    [layerId, open],\n  );\n  const live = React.useSyncExternalStore(subscribeLayers, getSnapshot, getServerAppearance);\n  // The look while open, held through the close (a previous-value state, updated only while open).\n  const [held, setHeld] = React.useState(live);\n  if (open && live !== held) setHeld(live);\n  return open ? live : held;\n}\n\n/** Properties of {@link ModalBackdrop}. */\nexport interface ModalBackdropProps {\n  /** The `backdrop` slot. */\n  backdrop: ModalBackdropSlot | undefined;\n  /**\n   * The stable class (`dialogContentClassNames.backdrop`, `drawerClassNames.backdrop`, plus a\n   * variant's), first in the backdrop's classes.\n   */\n  className: string;\n  /** The surface's dismiss layer (for the automatic appearance). */\n  layerId: string;\n  /** Whether the surface is open. */\n  open: boolean;\n  /** The surface's backdrop press handling (`useBackdropPress`), after the slot's own handler. */\n  onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;\n  /** The presence attributes of the surface's top-level elements (P6-07). */\n  presenceProps: PresenceAttributes;\n  /**\n   * The backdrop's motion classes (its `backdropMotion`, resolved), after the base classes and\n   * before the slot's `className`.\n   */\n  motionClassName?: string;\n}\n\n/**\n * The backdrop element of a modal or alert surface with the `backdrop` slot rules (D93) and the\n * automatic appearance (D94): `aria-hidden`, `fixed inset-0`, rendered as `data-appearance` and\n * filled with the backdrop token, or transparent, then its motion classes. `null` renders none;\n * `undefined` and booleans the default; shorthand content renders inside it; a slot object's\n * attributes, `className` (merged last), `style`, `ref` and handlers (composed, the slot's first)\n * go to it, its children render inside it, and its `appearance` overrides the automatic one.\n * `aria-hidden=\"true\"` always wins.\n */\nexport function ModalBackdrop({\n  backdrop,\n  className,\n  layerId,\n  open,\n  onMouseDown,\n  presenceProps,\n  motionClassName,\n}: ModalBackdropProps): React.ReactNode {\n  const automatic = useBackdropAppearance(layerId, open);\n  const slot = backdrop === null || typeof backdrop === 'boolean' ? undefined : backdrop;\n  const resolved = slot === undefined ? null : resolveSlot<'div'>(slot as Slot<'div'>, 'div');\n  const {\n    appearance: ownAppearance,\n    className: slotClassName,\n    onMouseDown: slotOnMouseDown,\n    ref: slotRef,\n    ...slotProps\n  } = resolved?.props ?? {};\n  const ref = useMergedRefs<HTMLElement>(slotRef as React.Ref<HTMLElement> | undefined);\n  if (backdrop === null) return null;\n\n  const appearance: BackdropAppearance =\n    ownAppearance === 'dimmed' || ownAppearance === 'transparent' ? ownAppearance : automatic;\n  const Component: React.ElementType = resolved?.Component ?? 'div';\n  return (\n    <Component\n      data-appearance={appearance}\n      {...slotProps}\n      {...presenceProps}\n      ref={ref}\n      aria-hidden=\"true\"\n      onMouseDown={composeEventHandlers(\n        slotOnMouseDown as React.MouseEventHandler<HTMLElement> | undefined,\n        onMouseDown,\n      )}\n      className={cn(\n        className,\n        'fixed inset-0',\n        appearance === 'transparent' ? 'bg-transparent' : 'bg-backdrop',\n        motionClassName,\n        slotClassName as string | undefined,\n      )}\n    >\n      {resolved?.children}\n    </Component>\n  );\n}\nModalBackdrop.displayName = 'ModalBackdrop';\n"],"mappings":"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"}