@mortenbrudvik/waveui 0.14.0 → 0.15.0

package/dist/components/navigation/NavDrawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavDrawer.mjs","names":["useId","useId$1","React","UNREACHABLE_WARNING_KEY","UNREACHABLE_WARNING","LOOSE_ITEMS_WARNING_KEY","LOOSE_ITEMS_WARNING","hasLooseListItem","item","nav","parent","INERT_LAYOUT","useNavDrawerLayout","NavDrawerLayoutContext","reportMissingContext","componentName","NavDrawerRoot","openProp","modalTypeProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","rest","openState","requestOpen","useModalOpenState","defaultOpen","onOpenChange","open","useDrawerOpen","type","navState","useNavRootState","defaultValue","onItemSelect","modalType","generatedId","panelId","id","body","setBody","registerBody","previous","element","scrollState","useScrollState","layout","drawer","unreachable","warnOnce","navRef","isDev","hasWarned","nameProps","panelNameProps","panel","DrawerPanel","inertModalTrigger","cn","drawerClassNames","navDrawerClassNames","useModalTriggerSession","NavContext","NavDrawerContext","NavDrawerHeader","navDrawerHeaderClassNames","scrollSeparatorClasses","className","NavDrawerBody","arrow","focusMode","currentCategory","setCurrentCategory","reportCurrentCategory","holdsCurrent","category","roving","selected","activeValue","useRovingTabIndex","TOOLBAR_ITEM_SELECTOR","attachBody","mergedRef","useMergedRefs","ref","containerProps","listRef","useNavListChildCheck","composeEventHandlers","onKeyDown","onFocus","navDrawerBodyClassNames","NavRovingContext","NavDrawerFooter","navDrawerFooterClassNames","NavDrawer"],"sources":["../../../src/components/navigation/NavDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  drawerClassNames,\n  navDrawerBodyClassNames,\n  navDrawerClassNames,\n  navDrawerFooterClassNames,\n  navDrawerHeaderClassNames,\n} from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { hasWarned, isDev, reportMissingContext, warnOnce } from '../../lib/dev';\nimport type { Slot, SlotObject } from '../../lib/slot';\nimport type { BackdropAppearance, FocusMode, ModalType } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { TOOLBAR_ITEM_SELECTOR } from '../button/Toolbar.navigation';\nimport {\n  inertModalTrigger,\n  useModalOpenState,\n  useModalTriggerSession,\n} from '../overlays/Dialog.shared';\nimport type {\n  DrawerOpenChangeDetails,\n  DrawerPosition,\n  DrawerSize,\n  DrawerType,\n} from '../overlays/Drawer.context';\nimport { DrawerPanel, useDrawerOpen } from '../overlays/Drawer.panel';\nimport { scrollSeparatorClasses, useScrollState } from '../overlays/Drawer.scroll';\nimport {\n  NavContext,\n  NavRovingContext,\n  useNavListChildCheck,\n  type NavRovingContextValue,\n} from './Nav.context';\nimport { useNavRootState, type NavProps } from './Nav.root';\nimport {\n  NavDrawerContext,\n  NavDrawerLayoutContext,\n  type NavDrawerContextValue,\n  type NavDrawerLayoutContextValue,\n} from './NavDrawer.context';\n\n/*\n * NavDrawer: Nav's state (`useNavRootState`) and a navigation landmark in the drawer panel shell\n * (`DrawerPanel`), with its Header, Body and Footer parts. Imports the Nav root and context modules\n * (never `Nav.tsx`) and the shell's modules (never Drawer's root or compound); Nav never imports\n * it, and `Hamburger.tsx` reads only `NavDrawer.context.ts`.\n */\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** Properties for the NavDrawer component. */\nexport interface NavDrawerProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'>,\n    Pick<\n      NavProps,\n      | 'value'\n      | 'defaultValue'\n      | 'onValueChange'\n      | 'openCategories'\n      | 'defaultOpenCategories'\n      | 'onOpenCategoriesChange'\n      | 'currentCategory'\n    > {\n  /**\n   * How the drawer sits on the page (Fluent's `type`).\n   * - `overlay`: a panel over the page, rendered in a portal while open (in the browser only: an\n   *   open overlay is closed in the server HTML and opens once hydrated). Modal by default: focus\n   *   moves in and stays there, the rest of the page is `inert` and does not scroll, and Escape\n   *   and a backdrop press close it. It is a dialog with the navigation's name.\n   * - `inline`: a panel in the page layout, rendered where the NavDrawer is (also in the server\n   *   HTML). The page stays usable around it; Escape and presses outside do nothing; opening it\n   *   moves no focus, and closing it while focus is inside returns focus to `finalFocusRef`, else\n   *   to the element that opened it.\n   *\n   * Changing `type` remounts the panel; the selection and the open categories are kept. Rendered\n   * as `data-type`.\n   * @default 'overlay'\n   */\n  type?: DrawerType;\n  /** Controlled open state. */\n  open?: boolean;\n  /**\n   * Open state for uncontrolled usage. Keep the drawer controlled instead: a closed uncontrolled\n   * NavDrawer cannot be opened again (a Hamburger inside it is not shown while it is closed).\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Called with the new open state when it changes, with `details.reason`: `trigger` (a Hamburger\n   * inside the drawer), `escape` and `outside-press` (the backdrop; overlay only). `details` is\n   * typed optional until 1.0. A controlled drawer stays as it is until you update `open`.\n   */\n  onOpenChange?: (open: boolean, details?: DrawerOpenChangeDetails) => void;\n  /**\n   * Called with an item's value every time an item is activated, also when the current page is\n   * activated again (a disabled item, a link opened in another tab or window, and a button item\n   * whose `onClick` calls `preventDefault()` are not activations). Close an overlay drawer here:\n   * `onValueChange` fires only when the value changes. Fluent's `onNavItemSelect`.\n   */\n  onItemSelect?: (value: string) => void;\n  /**\n   * The edge the panel is attached to: an overlay's screen edge; an inline panel's inner edge is\n   * the opposite one. `start`/`end` follow the text direction; `left`/`right` are physical sides;\n   * `bottom` runs along the bottom edge. Unlike Drawer's (`'end'`), the default is the start edge,\n   * where navigation sits (Fluent's). Rendered as `data-position`.\n   * @default 'start'\n   */\n  position?: DrawerPosition;\n  /**\n   * The panel's width at a side (its height at the bottom), on Drawer's scale: `small` 320px,\n   * `medium` 592px, `large` 940px, `full` the viewport (inline: the container). A width class in\n   * `className` replaces it (Fluent's navigation pane is 260px wide: the width class of 65\n   * spacing steps). Rendered as `data-size`. Drawer's default too.\n   * @default 'small'\n   */\n  size?: DrawerSize;\n  /**\n   * Inline drawers: draws a line on the panel's inner edge (`data-separator`), as Nav does\n   * (Drawer's `separator` defaults to `false`). An overlay always draws that edge; forced colours\n   * always draw it.\n   * @default true\n   */\n  separator?: boolean;\n  /**\n   * Overlay drawers: `modal` (backdrop, focus trapped, page inert and not scrolling) or\n   * `non-modal` (no backdrop, no trap, nothing inert; Escape closes it while focus is inside, and\n   * its Tab place follows the element that opened it). A non-modal overlay covers the page under\n   * it while the page keeps its Tab order: keep the page's controls clear of it (reserve its width,\n   * or its height at the bottom, in your layout while it is open) or use `type=\"inline\"`; with\n   * `size=\"full\"` it hides the whole page and warns. Ignored by inline drawers. Rendered as\n   * `data-modal-type` on an overlay's panel. Fluent's `modalType` (without `alert`: a navigation\n   * pane is never an alert, so an `'alert'` is treated as `'modal'`). Drawer's default too.\n   * @default 'modal'\n   */\n  modalType?: Extract<ModalType, 'modal' | 'non-modal'>;\n  /**\n   * Removes the panel when the drawer closes. `false` keeps it mounted while closed, out of view\n   * and `inert`, so the state of what is inside survives, and a Hamburger outside can point\n   * `aria-controls` at it at all times: always for an inline drawer, and once the page has\n   * hydrated for an overlay (whose panel is not in the server HTML). Fluent's `unmountOnClose`.\n   * Drawer's default too.\n   * @default true\n   */\n  unmountOnClose?: boolean;\n  /**\n   * Where focus goes when the drawer closes with focus inside it (a modal overlay: whenever it\n   * closes). Pass your page's Hamburger, so a Hamburger inside the drawer that closes it hands\n   * focus to the one that opens it again.\n   */\n  finalFocusRef?: React.RefObject<HTMLElement | null>;\n  /**\n   * The backdrop of a modal overlay (Drawer's `backdrop` slot: `null` renders none, a slot\n   * object's `appearance` picks the fill). Ignored, with a development warning, by a non-modal or\n   * inline drawer.\n   */\n  backdrop?: Slot<'div'> | (SlotObject<'div'> & { appearance?: BackdropAppearance });\n  /**\n   * Name of the navigation landmark (and of an overlay's dialog). Localize it; rename it when the\n   * page has another navigation landmark (two with one name are ambiguous). An `aria-labelledby`\n   * replaces the default.\n   * @default 'Navigation'\n   */\n  'aria-label'?: string;\n  /** `NavDrawer.Header`, `NavDrawer.Body` and `NavDrawer.Footer`, rendered in the order written. */\n  children?: React.ReactNode;\n  /** Ref to the panel: the `role=\"dialog\"` element of an overlay drawer, the panel element of an inline one. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the NavDrawerHeader sub-component. */\nexport interface NavDrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** A Hamburger, the app's name, …: any content (Nav items go in the body or the footer). */\n  children?: React.ReactNode;\n  /** Ref to the header element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the NavDrawerBody sub-component. */\nexport interface NavDrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * How the keyboard reaches the items. `'tab'`: every item is a Tab stop and the arrow keys do\n   * nothing (Nav's model). `'arrow'`: the body is one Tab stop, the last focused element (at first\n   * the current page, or the closed category that holds it, else the first item); Down and Right\n   * move to the next element and Up and Left to the previous one (Left and Right swap in a\n   * right-to-left layout), wrapping, and Home and End go to the ends. Every focusable element in\n   * the body joins the order, item actions included. Screen readers do not announce arrow keys in\n   * a navigation landmark: prefer `'tab'` unless your users expect an app pane. Rendered as\n   * `data-focus-mode`. Fluent's NavDrawer uses arrow keys by default (its `tabbable` adds Tab\n   * stops).\n   * @default 'tab'\n   */\n  focusMode?: FocusMode;\n  /** Nav parts: `Nav.Item`, `Nav.Category`, `Nav.SectionHeader`, … (each renders its own list item). */\n  children?: React.ReactNode;\n  /** Ref to the scrolling body element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the NavDrawerFooter sub-component. */\nexport interface NavDrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Nav parts pinned below the body (Settings, Help); wrap other content in an `<li>`. */\n  children?: React.ReactNode;\n  /** Ref to the footer element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Development checks\n// ---------------------------------------------------------------------------\n\nconst UNREACHABLE_WARNING_KEY = 'NavDrawer:unreachable';\nconst UNREACHABLE_WARNING =\n  'NavDrawer is closed and nothing can open it: it is uncontrolled (no `open` prop), and a Hamburger inside it cannot be reached while it is closed. Control it with `open` and `onOpenChange`, and open it from a Hamburger (or any button) outside it.';\n\nconst LOOSE_ITEMS_WARNING_KEY = 'NavDrawer:loose-items';\nconst LOOSE_ITEMS_WARNING =\n  'NavDrawer: a list item sits outside NavDrawer.Body and NavDrawer.Footer, the parts that render a list. Move Nav.Item, Nav.Category and the other Nav parts into NavDrawer.Body or NavDrawer.Footer.';\n\n/** Whether `nav` holds an `<li>` whose parent is not a `<ul>` or `<ol>`. */\nfunction hasLooseListItem(nav: HTMLElement): boolean {\n  for (const item of Array.from(nav.querySelectorAll('li'))) {\n    const parent = item.parentElement?.localName;\n    if (parent !== 'ul' && parent !== 'ol') return true;\n  }\n  return false;\n}\n\n// ---------------------------------------------------------------------------\n// Root\n// ---------------------------------------------------------------------------\n\n/** The scroll state and body registry the parts read outside a NavDrawer in production. */\nconst INERT_LAYOUT: NavDrawerLayoutContextValue = {\n  scrollState: 'none',\n  registerBody: () => () => {},\n};\n\n/** C-CONTEXT: the enclosing NavDrawer's layout for the part `componentName`. */\nfunction useNavDrawerLayout(componentName: string): NavDrawerLayoutContextValue {\n  const context = React.useContext(NavDrawerLayoutContext);\n  if (context) return context;\n  reportMissingContext(componentName, 'NavDrawer');\n  return INERT_LAYOUT;\n}\n\n// The root of `NavDrawer` (documented on the export below).\nconst NavDrawerRoot = ({\n  type = 'overlay',\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  onItemSelect,\n  position = 'start',\n  size = 'small',\n  separator = true,\n  modalType: modalTypeProp = 'modal',\n  unmountOnClose = true,\n  finalFocusRef,\n  backdrop,\n  value,\n  defaultValue,\n  onValueChange,\n  openCategories,\n  defaultOpenCategories,\n  onOpenCategoriesChange,\n  currentCategory,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  id,\n  children,\n  ref,\n  ...rest\n}: NavDrawerProps) => {\n  const [openState, requestOpen] = useModalOpenState(openProp, defaultOpen, onOpenChange);\n  // An overlay reports itself closed until the page has hydrated (its portal renders only in the\n  // browser), so a Hamburger's aria-controls never names a panel that is not there.\n  const open = useDrawerOpen(type, openState);\n  const navState = useNavRootState({\n    componentName: 'NavDrawer',\n    value,\n    defaultValue: defaultValue ?? '',\n    onValueChange,\n    onActivate: onItemSelect,\n    openCategories,\n    defaultOpenCategories,\n    onOpenCategoriesChange,\n    currentCategory,\n    children,\n  });\n  // A navigation pane is never an alert: an 'alert' passed at run time is a modal one.\n  const modalType: ModalType = modalTypeProp === 'non-modal' ? 'non-modal' : 'modal';\n  const generatedId = useId('wave-nav-drawer');\n  const panelId = id ?? generatedId;\n\n  // The first mounted body, measured for the scroll-state separators of the parts.\n  const [body, setBody] = React.useState<HTMLElement | null>(null);\n  const registerBody = React.useCallback((element: HTMLElement) => {\n    setBody((previous) => previous ?? element);\n    return () => setBody((previous) => (previous === element ? null : previous));\n  }, []);\n  const scrollState = useScrollState(body);\n  const layout = React.useMemo<NavDrawerLayoutContextValue>(\n    () => ({ scrollState, registerBody }),\n    [scrollState, registerBody],\n  );\n  const drawer = React.useMemo<NavDrawerContextValue>(\n    () => ({ open, requestOpen, panelId, type }),\n    [open, requestOpen, panelId, type],\n  );\n\n  // An uncontrolled drawer that is closed has no way back: its Hamburgers are inside it.\n  const unreachable = openProp === undefined && !openState;\n  React.useEffect(() => {\n    if (unreachable) warnOnce(UNREACHABLE_WARNING_KEY, UNREACHABLE_WARNING);\n  }, [unreachable]);\n\n  // Development only: after every commit, a list item outside the Body's and Footer's lists.\n  const navRef = React.useRef<HTMLElement>(null);\n  React.useEffect(() => {\n    if (!isDev || hasWarned(LOOSE_ITEMS_WARNING_KEY)) return;\n    const nav = navRef.current;\n    if (nav && hasLooseListItem(nav)) warnOnce(LOOSE_ITEMS_WARNING_KEY, LOOSE_ITEMS_WARNING);\n  });\n\n  // The name goes to the <nav> in both types and, in an overlay, also to its dialog panel. An\n  // aria-labelledby without aria-label drops the default.\n  const nameProps = {\n    'aria-label': ariaLabel ?? (ariaLabelledBy === undefined ? 'Navigation' : undefined),\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n  };\n  const panelNameProps = type === 'overlay' ? nameProps : undefined;\n\n  const panel = (\n    <DrawerPanel\n      componentName=\"NavDrawer\"\n      type={type}\n      open={open}\n      requestOpen={requestOpen}\n      position={position}\n      size={size}\n      separator={separator}\n      modalType={modalType}\n      unmountOnClose={unmountOnClose}\n      inlineAs=\"div\"\n      trigger={inertModalTrigger}\n      finalFocusRef={finalFocusRef}\n      rootClassName={cn(drawerClassNames.root, navDrawerClassNames.root)}\n      backdropClassName={cn(drawerClassNames.backdrop, navDrawerClassNames.backdrop)}\n      backdrop={backdrop}\n      id={panelId}\n      {...panelNameProps}\n      {...rest}\n      ref={ref as React.Ref<HTMLElement> | undefined}\n    >\n      <nav\n        ref={navRef}\n        {...nameProps}\n        className={cn(navDrawerClassNames.nav, 'flex min-h-0 flex-1 flex-col')}\n      >\n        {children}\n      </nav>\n    </DrawerPanel>\n  );\n  // After the shell's effects (focus restore), as the shell's contract asks.\n  useModalTriggerSession(inertModalTrigger, open);\n\n  return (\n    <NavContext.Provider value={navState}>\n      <NavDrawerContext.Provider value={drawer}>\n        <NavDrawerLayoutContext.Provider value={layout}>{panel}</NavDrawerLayoutContext.Provider>\n      </NavDrawerContext.Provider>\n    </NavContext.Provider>\n  );\n};\nNavDrawerRoot.displayName = 'NavDrawer';\n\n// ---------------------------------------------------------------------------\n// Parts\n// ---------------------------------------------------------------------------\n\n/**\n * The header row of a NavDrawer: a Hamburger, the app's name, … (no list: Nav items go in the\n * body or the footer). Its line underneath shows while the body is scrolled away from its top.\n */\nexport const NavDrawerHeader = ({ className, children, ref, ...rest }: NavDrawerHeaderProps) => {\n  const { scrollState } = useNavDrawerLayout('NavDrawer.Header');\n  return (\n    <div\n      data-scroll-state={scrollState}\n      {...rest}\n      ref={ref}\n      className={cn(\n        navDrawerHeaderClassNames.root,\n        'flex shrink-0 items-center gap-2 ps-2.5 pe-2 py-2',\n        scrollSeparatorClasses.header,\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\nNavDrawerHeader.displayName = 'NavDrawerHeader';\n\n/**\n * The scrolling list of a NavDrawer: the Nav parts (`Nav.Item`, `Nav.Category`, …) as the items of\n * its list. With `focusMode=\"arrow\"` it is one Tab stop and the arrow keys move through it.\n */\nexport const NavDrawerBody = ({\n  focusMode = 'tab',\n  className,\n  onKeyDown,\n  onFocus,\n  children,\n  ref,\n  ...rest\n}: NavDrawerBodyProps) => {\n  const { scrollState, registerBody } = useNavDrawerLayout('NavDrawer.Body');\n  const nav = React.useContext(NavContext);\n  const arrow = focusMode === 'arrow';\n\n  // The closed category that holds the current page, reported by the categories of an arrow body\n  // from their layout effects: it holds the first Tab stop while the current page is hidden.\n  const [currentCategory, setCurrentCategory] = React.useState<string | null>(null);\n  const reportCurrentCategory = React.useCallback((category: string, holdsCurrent: boolean) => {\n    setCurrentCategory((previous) =>\n      holdsCurrent ? category : previous === category ? null : previous,\n    );\n  }, []);\n  const roving = React.useMemo<NavRovingContextValue>(\n    () => ({ reportCurrentCategory }),\n    [reportCurrentCategory],\n  );\n  const selected = nav?.value ?? '';\n  const activeValue =\n    currentCategory !== null ? `wave-nav-category:${currentCategory}` : selected || null;\n  // Always called (C-HOOKS); the container attaches only in the arrow mode, and detaching it hands\n  // every element its own tabindex back.\n  const { containerProps } = useRovingTabIndex({\n    itemSelector: TOOLBAR_ITEM_SELECTOR,\n    manageTabIndex: true,\n    tabStop: 'last-focused',\n    orientation: 'both',\n    loop: true,\n    homeEndKeys: true,\n    typeahead: false,\n    activeValue,\n  });\n\n  const attachBody = React.useCallback(\n    (element: HTMLDivElement | null) => (element ? registerBody(element) : undefined),\n    [registerBody],\n  );\n  const mergedRef = useMergedRefs<HTMLDivElement>(\n    ref,\n    attachBody,\n    arrow ? containerProps.ref : null,\n  );\n  // Development only: every child of the list is an <li> (`NavDrawer.Body:list-child`).\n  const listRef = React.useRef<HTMLUListElement>(null);\n  useNavListChildCheck(listRef, 'NavDrawer.Body', 'items');\n\n  return (\n    <div\n      data-focus-mode={focusMode}\n      data-scroll-state={scrollState}\n      {...rest}\n      ref={mergedRef}\n      data-roving-container={arrow ? '' : undefined}\n      onKeyDown={composeEventHandlers(onKeyDown, arrow ? containerProps.onKeyDown : undefined)}\n      onFocus={composeEventHandlers(onFocus, arrow ? containerProps.onFocus : undefined, {\n        checkDefaultPrevented: false,\n      })}\n      className={cn(navDrawerBodyClassNames.root, 'min-h-0 flex-1 overflow-y-auto py-2', className)}\n    >\n      <NavRovingContext.Provider value={arrow ? roving : null}>\n        <ul ref={listRef} className={cn(navDrawerBodyClassNames.list, 'm-0 list-none p-0')}>\n          {children}\n        </ul>\n      </NavRovingContext.Provider>\n    </div>\n  );\n};\nNavDrawerBody.displayName = 'NavDrawerBody';\n\n/**\n * The list pinned below a NavDrawer's body (Settings, Help): Nav parts as the items of its list,\n * each a Tab stop. Its line above shows while more of the body is below.\n */\nexport const NavDrawerFooter = ({ className, children, ref, ...rest }: NavDrawerFooterProps) => {\n  const { scrollState } = useNavDrawerLayout('NavDrawer.Footer');\n  // Development only: every child of the list is an <li> (`NavDrawer.Footer:list-child`).\n  const listRef = React.useRef<HTMLUListElement>(null);\n  useNavListChildCheck(listRef, 'NavDrawer.Footer', 'items');\n  return (\n    <div\n      data-scroll-state={scrollState}\n      {...rest}\n      ref={ref}\n      className={cn(\n        navDrawerFooterClassNames.root,\n        'shrink-0 py-2',\n        scrollSeparatorClasses.footer,\n        className,\n      )}\n    >\n      <ul ref={listRef} className={cn(navDrawerFooterClassNames.list, 'm-0 list-none p-0')}>\n        {children}\n      </ul>\n    </div>\n  );\n};\nNavDrawerFooter.displayName = 'NavDrawerFooter';\n\n// ---------------------------------------------------------------------------\n// Compound\n// ---------------------------------------------------------------------------\n\n/**\n * A navigation pane in a drawer: Nav's items, categories and selection in a `<nav>` landmark that\n * sits over the page (`type=\"overlay\"`) or in the page layout (`type=\"inline\"`). Fluent's\n * `NavDrawer`.\n *\n * - **Composition:** `NavDrawer.Header` (a row: a `Hamburger`, the app's name), `NavDrawer.Body`\n *   (the scrolling list) and `NavDrawer.Footer` (a list pinned below it), rendered in the order\n *   written. Nav parts (`Nav.Item`, `Nav.Category`, `Nav.SectionHeader`, `Nav.Divider`,\n *   `Nav.AppItem`, …) go in the Body and the Footer, which render the lists; wrap anything else\n *   there in an `<li>`.\n * - **Types:** `overlay` (default) is a panel over the page, in a portal, opened in the browser\n *   only; `inline` is a panel in the page layout, also in the server HTML. Changing `type`\n *   remounts the panel; the selection and the open categories are kept.\n * - **Opening and closing:** keep it controlled (`open`, `onOpenChange`): an uncontrolled drawer\n *   that is closed cannot open again. A `Hamburger` inside it toggles it (reason `trigger`);\n *   Escape and a backdrop press close an overlay (`escape`, `outside-press`). Closing an overlay\n *   when an item is chosen is yours, in `onItemSelect`, which also fires when the current page is\n *   activated again. A non-modal overlay (`modalType=\"non-modal\"`) covers the page, which keeps\n *   its Tab order: keep the page's controls clear of it, or use `type=\"inline\"`.\n * - **Focus:** pass your page's Hamburger as `finalFocusRef`, so focus returns to it when a\n *   Hamburger inside the drawer closes it. An overlay moves focus in when it opens; an inline\n *   drawer does not.\n * - **Keyboard:** every item is a Tab stop; `NavDrawer.Body focusMode=\"arrow\"` makes the body one\n *   Tab stop with arrow keys, Home and End.\n * - **Landmark:** one `<nav>`, named \"Navigation\" by default (`aria-label`, `aria-labelledby`);\n *   an overlay is also a dialog with that name. Rename it when the page has another navigation\n *   landmark.\n * - **Selection:** Nav's `value`/`onValueChange` (only on a change), `openCategories` and\n *   `currentCategory`, and `onItemSelect` on every activation (Fluent's `selectedValue` and\n *   `onNavItemSelect`).\n * - **Server Components:** the parts are also exported as `NavDrawerHeader`, `NavDrawerBody` and\n *   `NavDrawerFooter`.\n *\n * @example\n * const [open, setOpen] = useState(false);\n * const hamburgerRef = useRef<HTMLButtonElement>(null);\n * <Hamburger\n *   ref={hamburgerRef}\n *   aria-expanded={open}\n *   aria-controls={open ? 'main-nav' : undefined}\n *   aria-haspopup=\"dialog\"\n *   onClick={() => setOpen(!open)}\n * />\n * <NavDrawer\n *   id=\"main-nav\"\n *   open={open}\n *   onOpenChange={setOpen}\n *   onItemSelect={() => setOpen(false)}\n *   finalFocusRef={hamburgerRef}\n *   defaultValue=\"home\"\n * >\n *   <NavDrawer.Header>\n *     <Hamburger />\n *     Contoso HR\n *   </NavDrawer.Header>\n *   <NavDrawer.Body>\n *     <Nav.Item value=\"home\" href=\"/\">Home</Nav.Item>\n *   </NavDrawer.Body>\n * </NavDrawer>\n */\nexport const NavDrawer = /* @__PURE__ */ Object.assign(NavDrawerRoot, {\n  Header: NavDrawerHeader,\n  Body: NavDrawerBody,\n  Footer: NavDrawerFooter,\n});\n"],"mappings":"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"}
+{"version":3,"file":"NavDrawer.mjs","names":["useId","useId$1","React","UNREACHABLE_WARNING_KEY","UNREACHABLE_WARNING","LOOSE_ITEMS_WARNING_KEY","LOOSE_ITEMS_WARNING","hasLooseListItem","item","nav","parent","INERT_LAYOUT","useNavDrawerLayout","NavDrawerLayoutContext","reportMissingContext","componentName","NavDrawerRoot","openProp","modalTypeProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","rest","openState","requestOpen","useModalOpenState","defaultOpen","onOpenChange","open","useDrawerOpen","type","navState","useNavRootState","defaultValue","onItemSelect","modalType","generatedId","panelId","id","body","setBody","registerBody","previous","element","scrollState","useScrollState","layout","drawer","unreachable","warnOnce","navRef","isDev","hasWarned","nameProps","panelNameProps","panel","DrawerPanel","inertModalTrigger","cn","drawerClassNames","navDrawerClassNames","useModalTriggerSession","NavContext","NavDrawerContext","NavDrawerHeader","navDrawerHeaderClassNames","scrollSeparatorClasses","className","NavDrawerBody","arrow","focusMode","currentCategory","setCurrentCategory","reportCurrentCategory","holdsCurrent","category","roving","selected","activeValue","useRovingTabIndex","TOOLBAR_ITEM_SELECTOR","attachBody","mergedRef","useMergedRefs","ref","containerProps","listRef","useNavListChildCheck","composeEventHandlers","onKeyDown","onFocus","navDrawerBodyClassNames","NavRovingContext","NavDrawerFooter","navDrawerFooterClassNames","NavDrawer"],"sources":["../../../src/components/navigation/NavDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  drawerClassNames,\n  navDrawerBodyClassNames,\n  navDrawerClassNames,\n  navDrawerFooterClassNames,\n  navDrawerHeaderClassNames,\n} from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { hasWarned, isDev, reportMissingContext, warnOnce } from '../../lib/dev';\nimport type { Slot, SlotObject } from '../../lib/slot';\nimport type { BackdropAppearance, FocusMode, ModalType, MotionSlot } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { TOOLBAR_ITEM_SELECTOR } from '../button/Toolbar.navigation';\nimport {\n  inertModalTrigger,\n  useModalOpenState,\n  useModalTriggerSession,\n} from '../overlays/Dialog.shared';\nimport type {\n  DrawerOpenChangeDetails,\n  DrawerPosition,\n  DrawerSize,\n  DrawerType,\n} from '../overlays/Drawer.context';\nimport { DrawerPanel, useDrawerOpen } from '../overlays/Drawer.panel';\nimport { scrollSeparatorClasses, useScrollState } from '../overlays/Drawer.scroll';\nimport {\n  NavContext,\n  NavRovingContext,\n  useNavListChildCheck,\n  type NavRovingContextValue,\n} from './Nav.context';\nimport { useNavRootState, type NavProps } from './Nav.root';\nimport {\n  NavDrawerContext,\n  NavDrawerLayoutContext,\n  type NavDrawerContextValue,\n  type NavDrawerLayoutContextValue,\n} from './NavDrawer.context';\n\n/*\n * NavDrawer: Nav's state (`useNavRootState`) and a navigation landmark in the drawer panel shell\n * (`DrawerPanel`), with its Header, Body and Footer parts. Imports the Nav root and context modules\n * (never `Nav.tsx`) and the shell's modules (never Drawer's root or compound); Nav never imports\n * it, and `Hamburger.tsx` reads only `NavDrawer.context.ts`.\n */\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** Properties for the NavDrawer component. */\nexport interface NavDrawerProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'>,\n    Pick<\n      NavProps,\n      | 'value'\n      | 'defaultValue'\n      | 'onValueChange'\n      | 'openCategories'\n      | 'defaultOpenCategories'\n      | 'onOpenCategoriesChange'\n      | 'currentCategory'\n    > {\n  /**\n   * How the drawer sits on the page (Fluent's `type`).\n   * - `overlay`: a panel over the page, rendered in a portal while open (in the browser only: an\n   *   open overlay is closed in the server HTML and opens once hydrated). Modal by default: focus\n   *   moves in and stays there, the rest of the page is `inert` and does not scroll, and Escape\n   *   and a backdrop press close it. It is a dialog with the navigation's name.\n   * - `inline`: a panel in the page layout, rendered where the NavDrawer is (also in the server\n   *   HTML). The page stays usable around it; Escape and presses outside do nothing; opening it\n   *   moves no focus, and closing it while focus is inside returns focus to `finalFocusRef`, else\n   *   to the element that opened it.\n   *\n   * Changing `type` remounts the panel; the selection and the open categories are kept. Rendered\n   * as `data-type`.\n   * @default 'overlay'\n   */\n  type?: DrawerType;\n  /** Controlled open state. */\n  open?: boolean;\n  /**\n   * Open state for uncontrolled usage. Keep the drawer controlled instead: a closed uncontrolled\n   * NavDrawer cannot be opened again (a Hamburger inside it is not shown while it is closed).\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Called with the new open state when it changes, with `details.reason`: `trigger` (a Hamburger\n   * inside the drawer), `escape` and `outside-press` (the backdrop; overlay only). `details` is\n   * typed optional until 1.0. A controlled drawer stays as it is until you update `open`.\n   */\n  onOpenChange?: (open: boolean, details?: DrawerOpenChangeDetails) => void;\n  /**\n   * Called with an item's value every time an item is activated, also when the current page is\n   * activated again (a disabled item, a link opened in another tab or window, and a button item\n   * whose `onClick` calls `preventDefault()` are not activations). Close an overlay drawer here:\n   * `onValueChange` fires only when the value changes. Fluent's `onNavItemSelect`.\n   */\n  onItemSelect?: (value: string) => void;\n  /**\n   * The edge the panel is attached to: an overlay's screen edge; an inline panel's inner edge is\n   * the opposite one. `start`/`end` follow the text direction; `left`/`right` are physical sides;\n   * `bottom` runs along the bottom edge. Unlike Drawer's (`'end'`), the default is the start edge,\n   * where navigation sits (Fluent's). Rendered as `data-position`.\n   * @default 'start'\n   */\n  position?: DrawerPosition;\n  /**\n   * The panel's width at a side (its height at the bottom), on Drawer's scale: `small` 320px,\n   * `medium` 592px, `large` 940px, `full` the viewport (inline: the container). A width class in\n   * `className` replaces it (Fluent's navigation pane is 260px wide: the width class of 65\n   * spacing steps). It also times the motion, an overlay's slide and an inline drawer's collapse\n   * alike: 250 ms small, 300 ms medium, 400 ms large, 500 ms full (an inline drawer at `full` has\n   * no motion; see `motion`), so a drawer without `size` takes 250 ms whatever width a class gives\n   * it. Rendered as `data-size`. Drawer's default too.\n   * @default 'small'\n   */\n  size?: DrawerSize;\n  /**\n   * Inline drawers: draws a line on the panel's inner edge (`data-separator`), as Nav does\n   * (Drawer's `separator` defaults to `false`). An overlay always draws that edge; forced colours\n   * always draw it.\n   * @default true\n   */\n  separator?: boolean;\n  /**\n   * Overlay drawers: `modal` (backdrop, focus trapped, page inert and not scrolling) or\n   * `non-modal` (no backdrop, no trap, nothing inert; Escape closes it while focus is inside, and\n   * its Tab place follows the element that opened it). A non-modal overlay covers the page under\n   * it while the page keeps its Tab order: keep the page's controls clear of it (reserve its width,\n   * or its height at the bottom, in your layout while it is open) or use `type=\"inline\"`; with\n   * `size=\"full\"` it hides the whole page and warns. Ignored by inline drawers. Rendered as\n   * `data-modal-type` on an overlay's panel. Fluent's `modalType` (without `alert`: a navigation\n   * pane is never an alert, so an `'alert'` is treated as `'modal'`). Drawer's default too.\n   * @default 'modal'\n   */\n  modalType?: Extract<ModalType, 'modal' | 'non-modal'>;\n  /**\n   * Removes the panel when the drawer closes, once its exit motion has ended. `false` keeps it\n   * mounted while closed, out of view and `inert`, so the state of what is inside survives, and a\n   * Hamburger outside can point `aria-controls` at it at all times: always for an inline drawer,\n   * and once the page has hydrated for an overlay (whose panel is not in the server HTML).\n   * Fluent's `unmountOnClose`. Drawer's default too.\n   * @default true\n   */\n  unmountOnClose?: boolean;\n  /**\n   * Where focus goes when the drawer closes with focus inside it (a modal overlay: whenever it\n   * closes). Pass your page's Hamburger, so a Hamburger inside the drawer that closes it hands\n   * focus to the one that opens it again.\n   */\n  finalFocusRef?: React.RefObject<HTMLElement | null>;\n  /**\n   * The backdrop of a modal overlay (Drawer's `backdrop` slot: `null` renders none, a slot\n   * object's `appearance` picks the fill). Ignored, with a development warning, by a non-modal or\n   * inline drawer.\n   */\n  backdrop?: Slot<'div'> | (SlotObject<'div'> & { appearance?: BackdropAppearance });\n  /**\n   * The drawer's motion, as Drawer's. By default an overlay panel slides in from beyond its edge\n   * and fades in with a decelerating curve, and slides back out and fades out with an accelerating\n   * curve; the `start` and `end` edges follow the text direction, `left` and `right` do not\n   * mirror, and a `bottom` panel rises from below. An inline drawer by default opens the space it\n   * takes in your layout from nothing (its width at a side, its height at the bottom) while its\n   * panel fades in, held at its size against its inner edge, so it reads as sliding out from that\n   * edge, with a decelerating curve; closing runs the same backwards with an accelerating curve.\n   * Both take a duration that follows `size` both ways: 250 ms small (also without `size`), 300 ms\n   * medium, 400 ms large, 500 ms full. An inline drawer at `full` has no motion, as its size is\n   * its container's (a value here does not apply to it either), and an inline drawer whose width\n   * (height at the bottom) in `className` is a percentage resizes oddly during the motion,\n   * correctly once open: give it a length, or pass `null`. Under reduced motion the drawer appears\n   * and disappears at once. `null` turns the motion off (the drawer still renders its\n   * `data-presence` phases, which then end at once); a class string or `{ className }` replaces\n   * the default classes with yours (see `MotionSlot`), also under a `WaveProvider` with\n   * `motion=\"none\"`, which otherwise turns the default off. They go on the overlay panel, or on\n   * the element around an inline drawer's panel (`wave-nav-drawer__collapse`), whose phases the\n   * drawer waits for. A `className` that holds `data-[presence=…]` classes while `motion` is unset\n   * keeps 0.14's behaviour: no default motion, your classes animate the panel, and the drawer\n   * waits for the panel's motion (inline too, not the element around it). Fluent's\n   * `OverlayDrawer` and `InlineDrawer` `surfaceMotion`.\n   * @default the slide (overlay) or the collapse (inline) above\n   */\n  motion?: MotionSlot | null;\n  /**\n   * The backdrop's motion (a modal overlay), as Drawer's. By default it fades in and out with a\n   * linear curve over the panel's duration (250 to 500 ms, by `size`), so it ends with the panel;\n   * under reduced motion it appears and disappears at once. `null` turns the motion off; a class\n   * string or `{ className }` replaces the default classes with yours (see `MotionSlot`), also\n   * under a `WaveProvider` with `motion=\"none\"`, which otherwise turns the default off. The\n   * panel's motion decides when the drawer unmounts or hides: a replacement longer than the\n   * panel's exit is cut off there. Ignored, with a development warning, by a non-modal or inline\n   * drawer. Fluent's `OverlayDrawer` `backdropMotion`.\n   * @default the fade above\n   */\n  backdropMotion?: MotionSlot | null;\n  /**\n   * Name of the navigation landmark (and of an overlay's dialog). Localize it; rename it when the\n   * page has another navigation landmark (two with one name are ambiguous). An `aria-labelledby`\n   * replaces the default.\n   * @default 'Navigation'\n   */\n  'aria-label'?: string;\n  /** `NavDrawer.Header`, `NavDrawer.Body` and `NavDrawer.Footer`, rendered in the order written. */\n  children?: React.ReactNode;\n  /** Ref to the panel: the `role=\"dialog\"` element of an overlay drawer, the panel element of an inline one. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the NavDrawerHeader sub-component. */\nexport interface NavDrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** A Hamburger, the app's name, …: any content (Nav items go in the body or the footer). */\n  children?: React.ReactNode;\n  /** Ref to the header element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the NavDrawerBody sub-component. */\nexport interface NavDrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * How the keyboard reaches the items. `'tab'`: every item is a Tab stop and the arrow keys do\n   * nothing (Nav's model). `'arrow'`: the body is one Tab stop, the last focused element (at first\n   * the current page, or the closed category that holds it, else the first item); Down and Right\n   * move to the next element and Up and Left to the previous one (Left and Right swap in a\n   * right-to-left layout), wrapping, and Home and End go to the ends. Every focusable element in\n   * the body joins the order, item actions included. Screen readers do not announce arrow keys in\n   * a navigation landmark: prefer `'tab'` unless your users expect an app pane. Rendered as\n   * `data-focus-mode`. Fluent's NavDrawer uses arrow keys by default (its `tabbable` adds Tab\n   * stops).\n   * @default 'tab'\n   */\n  focusMode?: FocusMode;\n  /** Nav parts: `Nav.Item`, `Nav.Category`, `Nav.SectionHeader`, … (each renders its own list item). */\n  children?: React.ReactNode;\n  /** Ref to the scrolling body element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the NavDrawerFooter sub-component. */\nexport interface NavDrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Nav parts pinned below the body (Settings, Help); wrap other content in an `<li>`. */\n  children?: React.ReactNode;\n  /** Ref to the footer element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Development checks\n// ---------------------------------------------------------------------------\n\nconst UNREACHABLE_WARNING_KEY = 'NavDrawer:unreachable';\nconst UNREACHABLE_WARNING =\n  'NavDrawer is closed and nothing can open it: it is uncontrolled (no `open` prop), and a Hamburger inside it cannot be reached while it is closed. Control it with `open` and `onOpenChange`, and open it from a Hamburger (or any button) outside it.';\n\nconst LOOSE_ITEMS_WARNING_KEY = 'NavDrawer:loose-items';\nconst LOOSE_ITEMS_WARNING =\n  'NavDrawer: a list item sits outside NavDrawer.Body and NavDrawer.Footer, the parts that render a list. Move Nav.Item, Nav.Category and the other Nav parts into NavDrawer.Body or NavDrawer.Footer.';\n\n/** Whether `nav` holds an `<li>` whose parent is not a `<ul>` or `<ol>`. */\nfunction hasLooseListItem(nav: HTMLElement): boolean {\n  for (const item of Array.from(nav.querySelectorAll('li'))) {\n    const parent = item.parentElement?.localName;\n    if (parent !== 'ul' && parent !== 'ol') return true;\n  }\n  return false;\n}\n\n// ---------------------------------------------------------------------------\n// Root\n// ---------------------------------------------------------------------------\n\n/** The scroll state and body registry the parts read outside a NavDrawer in production. */\nconst INERT_LAYOUT: NavDrawerLayoutContextValue = {\n  scrollState: 'none',\n  registerBody: () => () => {},\n};\n\n/** C-CONTEXT: the enclosing NavDrawer's layout for the part `componentName`. */\nfunction useNavDrawerLayout(componentName: string): NavDrawerLayoutContextValue {\n  const context = React.useContext(NavDrawerLayoutContext);\n  if (context) return context;\n  reportMissingContext(componentName, 'NavDrawer');\n  return INERT_LAYOUT;\n}\n\n// The root of `NavDrawer` (documented on the export below).\nconst NavDrawerRoot = ({\n  type = 'overlay',\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  onItemSelect,\n  position = 'start',\n  size = 'small',\n  separator = true,\n  modalType: modalTypeProp = 'modal',\n  unmountOnClose = true,\n  finalFocusRef,\n  backdrop,\n  motion,\n  backdropMotion,\n  value,\n  defaultValue,\n  onValueChange,\n  openCategories,\n  defaultOpenCategories,\n  onOpenCategoriesChange,\n  currentCategory,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  id,\n  children,\n  ref,\n  ...rest\n}: NavDrawerProps) => {\n  const [openState, requestOpen] = useModalOpenState(openProp, defaultOpen, onOpenChange);\n  // An overlay reports itself closed until the page has hydrated (its portal renders only in the\n  // browser), so a Hamburger's aria-controls never names a panel that is not there.\n  const open = useDrawerOpen(type, openState);\n  const navState = useNavRootState({\n    componentName: 'NavDrawer',\n    value,\n    defaultValue: defaultValue ?? '',\n    onValueChange,\n    onActivate: onItemSelect,\n    openCategories,\n    defaultOpenCategories,\n    onOpenCategoriesChange,\n    currentCategory,\n    children,\n  });\n  // A navigation pane is never an alert: an 'alert' passed at run time is a modal one.\n  const modalType: ModalType = modalTypeProp === 'non-modal' ? 'non-modal' : 'modal';\n  const generatedId = useId('wave-nav-drawer');\n  const panelId = id ?? generatedId;\n\n  // The first mounted body, measured for the scroll-state separators of the parts.\n  const [body, setBody] = React.useState<HTMLElement | null>(null);\n  const registerBody = React.useCallback((element: HTMLElement) => {\n    setBody((previous) => previous ?? element);\n    return () => setBody((previous) => (previous === element ? null : previous));\n  }, []);\n  const scrollState = useScrollState(body);\n  const layout = React.useMemo<NavDrawerLayoutContextValue>(\n    () => ({ scrollState, registerBody }),\n    [scrollState, registerBody],\n  );\n  const drawer = React.useMemo<NavDrawerContextValue>(\n    () => ({ open, requestOpen, panelId, type }),\n    [open, requestOpen, panelId, type],\n  );\n\n  // An uncontrolled drawer that is closed has no way back: its Hamburgers are inside it.\n  const unreachable = openProp === undefined && !openState;\n  React.useEffect(() => {\n    if (unreachable) warnOnce(UNREACHABLE_WARNING_KEY, UNREACHABLE_WARNING);\n  }, [unreachable]);\n\n  // Development only: after every commit, a list item outside the Body's and Footer's lists.\n  const navRef = React.useRef<HTMLElement>(null);\n  React.useEffect(() => {\n    if (!isDev || hasWarned(LOOSE_ITEMS_WARNING_KEY)) return;\n    const nav = navRef.current;\n    if (nav && hasLooseListItem(nav)) warnOnce(LOOSE_ITEMS_WARNING_KEY, LOOSE_ITEMS_WARNING);\n  });\n\n  // The name goes to the <nav> in both types and, in an overlay, also to its dialog panel. An\n  // aria-labelledby without aria-label drops the default.\n  const nameProps = {\n    'aria-label': ariaLabel ?? (ariaLabelledBy === undefined ? 'Navigation' : undefined),\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n  };\n  const panelNameProps = type === 'overlay' ? nameProps : undefined;\n\n  const panel = (\n    <DrawerPanel\n      componentName=\"NavDrawer\"\n      type={type}\n      open={open}\n      requestOpen={requestOpen}\n      position={position}\n      size={size}\n      separator={separator}\n      modalType={modalType}\n      unmountOnClose={unmountOnClose}\n      inlineAs=\"div\"\n      trigger={inertModalTrigger}\n      finalFocusRef={finalFocusRef}\n      rootClassName={cn(drawerClassNames.root, navDrawerClassNames.root)}\n      backdropClassName={cn(drawerClassNames.backdrop, navDrawerClassNames.backdrop)}\n      collapseClassName={cn(drawerClassNames.collapse, navDrawerClassNames.collapse)}\n      backdrop={backdrop}\n      motion={motion}\n      backdropMotion={backdropMotion}\n      id={panelId}\n      {...panelNameProps}\n      {...rest}\n      ref={ref as React.Ref<HTMLElement> | undefined}\n    >\n      <nav\n        ref={navRef}\n        {...nameProps}\n        className={cn(navDrawerClassNames.nav, 'flex min-h-0 flex-1 flex-col')}\n      >\n        {children}\n      </nav>\n    </DrawerPanel>\n  );\n  // After the shell's effects (focus restore), as the shell's contract asks.\n  useModalTriggerSession(inertModalTrigger, open);\n\n  return (\n    <NavContext.Provider value={navState}>\n      <NavDrawerContext.Provider value={drawer}>\n        <NavDrawerLayoutContext.Provider value={layout}>{panel}</NavDrawerLayoutContext.Provider>\n      </NavDrawerContext.Provider>\n    </NavContext.Provider>\n  );\n};\nNavDrawerRoot.displayName = 'NavDrawer';\n\n// ---------------------------------------------------------------------------\n// Parts\n// ---------------------------------------------------------------------------\n\n/**\n * The header row of a NavDrawer: a Hamburger, the app's name, … (no list: Nav items go in the\n * body or the footer). Its line underneath shows while the body is scrolled away from its top.\n */\nexport const NavDrawerHeader = ({ className, children, ref, ...rest }: NavDrawerHeaderProps) => {\n  const { scrollState } = useNavDrawerLayout('NavDrawer.Header');\n  return (\n    <div\n      data-scroll-state={scrollState}\n      {...rest}\n      ref={ref}\n      className={cn(\n        navDrawerHeaderClassNames.root,\n        'flex shrink-0 items-center gap-2 ps-2.5 pe-2 py-2',\n        scrollSeparatorClasses.header,\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\nNavDrawerHeader.displayName = 'NavDrawerHeader';\n\n/**\n * The scrolling list of a NavDrawer: the Nav parts (`Nav.Item`, `Nav.Category`, …) as the items of\n * its list. With `focusMode=\"arrow\"` it is one Tab stop and the arrow keys move through it.\n */\nexport const NavDrawerBody = ({\n  focusMode = 'tab',\n  className,\n  onKeyDown,\n  onFocus,\n  children,\n  ref,\n  ...rest\n}: NavDrawerBodyProps) => {\n  const { scrollState, registerBody } = useNavDrawerLayout('NavDrawer.Body');\n  const nav = React.useContext(NavContext);\n  const arrow = focusMode === 'arrow';\n\n  // The closed category that holds the current page, reported by the categories of an arrow body\n  // from their layout effects: it holds the first Tab stop while the current page is hidden.\n  const [currentCategory, setCurrentCategory] = React.useState<string | null>(null);\n  const reportCurrentCategory = React.useCallback((category: string, holdsCurrent: boolean) => {\n    setCurrentCategory((previous) =>\n      holdsCurrent ? category : previous === category ? null : previous,\n    );\n  }, []);\n  const roving = React.useMemo<NavRovingContextValue>(\n    () => ({ reportCurrentCategory }),\n    [reportCurrentCategory],\n  );\n  const selected = nav?.value ?? '';\n  const activeValue =\n    currentCategory !== null ? `wave-nav-category:${currentCategory}` : selected || null;\n  // Always called (C-HOOKS); the container attaches only in the arrow mode, and detaching it hands\n  // every element its own tabindex back.\n  const { containerProps } = useRovingTabIndex({\n    itemSelector: TOOLBAR_ITEM_SELECTOR,\n    manageTabIndex: true,\n    tabStop: 'last-focused',\n    orientation: 'both',\n    loop: true,\n    homeEndKeys: true,\n    typeahead: false,\n    activeValue,\n  });\n\n  const attachBody = React.useCallback(\n    (element: HTMLDivElement | null) => (element ? registerBody(element) : undefined),\n    [registerBody],\n  );\n  const mergedRef = useMergedRefs<HTMLDivElement>(\n    ref,\n    attachBody,\n    arrow ? containerProps.ref : null,\n  );\n  // Development only: every child of the list is an <li> (`NavDrawer.Body:list-child`).\n  const listRef = React.useRef<HTMLUListElement>(null);\n  useNavListChildCheck(listRef, 'NavDrawer.Body', 'items');\n\n  return (\n    <div\n      data-focus-mode={focusMode}\n      data-scroll-state={scrollState}\n      {...rest}\n      ref={mergedRef}\n      data-roving-container={arrow ? '' : undefined}\n      onKeyDown={composeEventHandlers(onKeyDown, arrow ? containerProps.onKeyDown : undefined)}\n      onFocus={composeEventHandlers(onFocus, arrow ? containerProps.onFocus : undefined, {\n        checkDefaultPrevented: false,\n      })}\n      className={cn(navDrawerBodyClassNames.root, 'min-h-0 flex-1 overflow-y-auto py-2', className)}\n    >\n      <NavRovingContext.Provider value={arrow ? roving : null}>\n        <ul ref={listRef} className={cn(navDrawerBodyClassNames.list, 'm-0 list-none p-0')}>\n          {children}\n        </ul>\n      </NavRovingContext.Provider>\n    </div>\n  );\n};\nNavDrawerBody.displayName = 'NavDrawerBody';\n\n/**\n * The list pinned below a NavDrawer's body (Settings, Help): Nav parts as the items of its list,\n * each a Tab stop. Its line above shows while more of the body is below.\n */\nexport const NavDrawerFooter = ({ className, children, ref, ...rest }: NavDrawerFooterProps) => {\n  const { scrollState } = useNavDrawerLayout('NavDrawer.Footer');\n  // Development only: every child of the list is an <li> (`NavDrawer.Footer:list-child`).\n  const listRef = React.useRef<HTMLUListElement>(null);\n  useNavListChildCheck(listRef, 'NavDrawer.Footer', 'items');\n  return (\n    <div\n      data-scroll-state={scrollState}\n      {...rest}\n      ref={ref}\n      className={cn(\n        navDrawerFooterClassNames.root,\n        'shrink-0 py-2',\n        scrollSeparatorClasses.footer,\n        className,\n      )}\n    >\n      <ul ref={listRef} className={cn(navDrawerFooterClassNames.list, 'm-0 list-none p-0')}>\n        {children}\n      </ul>\n    </div>\n  );\n};\nNavDrawerFooter.displayName = 'NavDrawerFooter';\n\n// ---------------------------------------------------------------------------\n// Compound\n// ---------------------------------------------------------------------------\n\n/**\n * A navigation pane in a drawer: Nav's items, categories and selection in a `<nav>` landmark that\n * sits over the page (`type=\"overlay\"`) or in the page layout (`type=\"inline\"`). Fluent's\n * `NavDrawer`.\n *\n * - **Composition:** `NavDrawer.Header` (a row: a `Hamburger`, the app's name), `NavDrawer.Body`\n *   (the scrolling list) and `NavDrawer.Footer` (a list pinned below it), rendered in the order\n *   written. Nav parts (`Nav.Item`, `Nav.Category`, `Nav.SectionHeader`, `Nav.Divider`,\n *   `Nav.AppItem`, …) go in the Body and the Footer, which render the lists; wrap anything else\n *   there in an `<li>`.\n * - **Types:** `overlay` (default) is a panel over the page, in a portal, opened in the browser\n *   only; `inline` is a panel in the page layout, also in the server HTML. Changing `type`\n *   remounts the panel; the selection and the open categories are kept.\n * - **Opening and closing:** keep it controlled (`open`, `onOpenChange`): an uncontrolled drawer\n *   that is closed cannot open again. A `Hamburger` inside it toggles it (reason `trigger`);\n *   Escape and a backdrop press close an overlay (`escape`, `outside-press`). Closing an overlay\n *   when an item is chosen is yours, in `onItemSelect`, which also fires when the current page is\n *   activated again. A non-modal overlay (`modalType=\"non-modal\"`) covers the page, which keeps\n *   its Tab order: keep the page's controls clear of it, or use `type=\"inline\"`.\n * - **Motion:** an overlay slides in from its edge and fades in, and slides back and fades out,\n *   over 250 ms (`small`, the default), 300 ms (`medium`), 400 ms (`large`) or 500 ms (`full`),\n *   with its backdrop fading along; one open by default animates in when it mounts in the browser.\n *   An inline drawer opens and closes the space it takes in the layout over the same durations,\n *   in an element of its own around the panel (`wave-nav-drawer__collapse`, which has no box\n *   while open); one open by default does not animate in, and one at `full` has no motion. Under\n *   reduced motion every drawer appears and disappears at once. `motion` and `backdropMotion`\n *   turn each off (`null`) or replace it, and `WaveProvider motion=\"none\"` turns both defaults\n *   off. While it exits the panel stays on screen, `inert`, and focus, the trap and the scroll\n *   lock are already released.\n * - **Focus:** pass your page's Hamburger as `finalFocusRef`, so focus returns to it when a\n *   Hamburger inside the drawer closes it. An overlay moves focus in when it opens; an inline\n *   drawer does not.\n * - **Keyboard:** every item is a Tab stop; `NavDrawer.Body focusMode=\"arrow\"` makes the body one\n *   Tab stop with arrow keys, Home and End.\n * - **Landmark:** one `<nav>`, named \"Navigation\" by default (`aria-label`, `aria-labelledby`);\n *   an overlay is also a dialog with that name. Rename it when the page has another navigation\n *   landmark.\n * - **Selection:** Nav's `value`/`onValueChange` (only on a change), `openCategories` and\n *   `currentCategory`, and `onItemSelect` on every activation (Fluent's `selectedValue` and\n *   `onNavItemSelect`).\n * - **Server Components:** the parts are also exported as `NavDrawerHeader`, `NavDrawerBody` and\n *   `NavDrawerFooter`.\n *\n * @example\n * const [open, setOpen] = useState(false);\n * const hamburgerRef = useRef<HTMLButtonElement>(null);\n * <Hamburger\n *   ref={hamburgerRef}\n *   aria-expanded={open}\n *   aria-controls={open ? 'main-nav' : undefined}\n *   aria-haspopup=\"dialog\"\n *   onClick={() => setOpen(!open)}\n * />\n * <NavDrawer\n *   id=\"main-nav\"\n *   open={open}\n *   onOpenChange={setOpen}\n *   onItemSelect={() => setOpen(false)}\n *   finalFocusRef={hamburgerRef}\n *   defaultValue=\"home\"\n * >\n *   <NavDrawer.Header>\n *     <Hamburger />\n *     Contoso HR\n *   </NavDrawer.Header>\n *   <NavDrawer.Body>\n *     <Nav.Item value=\"home\" href=\"/\">Home</Nav.Item>\n *   </NavDrawer.Body>\n * </NavDrawer>\n */\nexport const NavDrawer = /* @__PURE__ */ Object.assign(NavDrawerRoot, {\n  Header: NavDrawerHeader,\n  Body: NavDrawerBody,\n  Footer: NavDrawerFooter,\n});\n"],"mappings":"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"}

package/dist/components/overlays/Dialog.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../hooks/useId.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/useIsClient.cjs"),l=require("../../hooks/usePresence.cjs"),u=require("../../hooks/useModalLayer.cjs"),d=require("../portal/Portal.cjs"),f=require("./Popover.shared.cjs"),p=require("./Dialog.shared.cjs"),m=require("./Dialog.slots.cjs");let h=require("react");h=e.__toESM(h,1);let g=require("react/jsx-runtime"),_=require("react-dom");var v=h.createContext(null);v.displayName=`DialogContext`;var y={open:!1,requestOpen:()=>{},modalType:`modal`,trigger:p.inertModalTrigger,finalFocusRef:void 0,unmountOnClose:!0,contentId:void 0,registerContentId:()=>()=>{}};function b(e){return p.useRequiredContext(v,e,`Dialog`,()=>y)}var x=({open:e,defaultOpen:t,onOpenChange:n,modalType:r=`modal`,finalFocusRef:i,unmountOnClose:a=!0,children:o})=>{let[s,l]=p.useModalOpenState(e,t,n),u=c.useIsClient(),d=s&&u,f=p.useModalTrigger();p.useModalTriggerSession(f,d);let[m,_]=h.useState(void 0),y=h.useCallback(e=>(_(e),()=>_(t=>t===e?void 0:t)),[]),b=h.useMemo(()=>({open:d,requestOpen:l,modalType:r,trigger:f,finalFocusRef:i,unmountOnClose:a,contentId:m,registerContentId:y}),[d,l,r,f,i,a,m,y]);return(0,g.jsx)(v.Provider,{value:b,children:o})};x.displayName=`Dialog`;var S=e=>{let{open:t,requestOpen:n,trigger:r,contentId:i}=b(`Dialog.Trigger`);return p.useModalTriggerPart({open:t,requestOpen:n,trigger:r,controlsId:i},e,`Dialog.Trigger`)};S.displayName=`DialogTrigger`;var C=e=>{let{requestOpen:t}=b(`Dialog.Close`);return p.useModalClosePart(t,e,`Dialog.Close`)};C.displayName=`DialogClose`;var ee={small:`max-w-[400px]`,medium:`max-w-[600px]`,large:`max-w-[940px]`,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))]`},te=`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))]`,ne=8,re=`Dialog.Content:backdrop-ignored`,w='Dialog.Content: `backdrop` is ignored with `modalType="non-modal"`: a non-modal dialog has no backdrop, so the page behind it stays usable.',ie=`Dialog.Content:non-modal-full`,ae='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.';function oe(e){let[t,n]=h.useState(null);return h.useLayoutEffect(()=>{if(!e||typeof ResizeObserver>`u`)return;let t=new ResizeObserver(t=>{let r=t[t.length-1];r&&n(r.borderBoxSize?.[0]?.inlineSize??e.offsetWidth)});return t.observe(e,{box:`border-box`}),()=>{t.disconnect(),n(null)}},[e]),t}var T=({title:e,size:c=`medium`,backdrop:_,closeButton:v,titleAction:y,closeLabel:x=`Close`,children:S,className:C,style:T,id:E,onKeyDown:D,ref:O,...k})=>{let{open:A,requestOpen:j,modalType:M,trigger:N,finalFocusRef:se,unmountOnClose:P,registerContentId:F}=b(`Dialog.Content`),{isMounted:ce,ref:le,presenceProps:I}=l.usePresence(A,{unmountOnExit:P}),L=!P,ue=o.useId(`wave-dialog`),R=E??ue,z=o.useId(`wave-dialog-title`),B=p.useTitleRegistry(),[V,de]=h.useState(null),H=h.useRef(null),fe=h.useCallback(e=>{H.current=e,de(e)},[]),pe=h.useCallback(e=>e?F(R):void 0,[F,R]),me=s.useMergedRefs(O,fe,pe,le),U=h.useRef(null);p.useRaiseOnOpen(A,L,U);let W=p.useBackdropPress(H,M!==`alert`),he=p.useModalDismiss(j,`Dialog`,W.afterOutsidePress),G=u.useModalLayer({open:A,modalType:M,onDismiss:he,refs:[H],container:V,triggerRef:N.focusRef,finalFocusRef:se}),K=M===`non-modal`,ge=p.useModalOpener(A,N,V),_e=f.usePopoverTabOrder({enabled:A&&K,surface:V,anchorRef:ge,getPreviousStop:f.getTabbableThrough});p.useUnnamedModalWarning(A?V:null,B.hasTitle,`Dialog.Content`,`Dialog.Title`),p.useOpenInsideWarning(A,L,G.layerId,`Dialog`);let q=K&&_!=null&&typeof _!=`boolean`;h.useEffect(()=>{q&&n.warnOnce(re,w)},[q]);let J=A&&K&&c===`full`;h.useEffect(()=>{J&&n.warnOnce(ie,ae)},[J]);let[ve,ye]=h.useState(null),[Y,be]=h.useState(null),X=oe(A?ve:null),[Z,xe]=h.useState(null),Se=h.useMemo(()=>({...B.context,setFooterHeight:xe,titleActionsOutlet:Y}),[B.context,Y]);if(!ce)return null;let Q=r.slotRendersContent(e),$=X===null?void 0:X>0?`${X+ne}px`:`0px`,Ce=$===void 0?T:{"--wave-dialog-title-end-padding":$,...T};return(0,g.jsxs)(d.Portal,{ref:U,layerId:G.layerId,children:[!K&&(0,g.jsx)(m.ModalBackdrop,{backdrop:_,className:a.dialogContentClassNames.backdrop,layerId:G.layerId,open:A,onMouseDown:W.onMouseDown,presenceProps:I}),(0,g.jsx)(`div`,{...I,className:t.cn(a.dialogContentClassNames.positioner,`pointer-events-none fixed inset-0 flex items-center justify-center`),children:(0,g.jsx)(`div`,{ref:me,role:M===`alert`?`alertdialog`:`dialog`,id:R,"aria-labelledby":Q?z:B.titleId,tabIndex:-1,"data-modal-type":M,"data-size":c,...k,"data-presence":I[`data-presence`],style:Ce,onKeyDown:i.composeEventHandlers(D,_e),className:t.cn(a.dialogContentClassNames.root,`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`,ee[c],C),children:(0,g.jsxs)(p.ModalSurfaceContext.Provider,{value:Se,children:[Q&&(0,g.jsx)(`h2`,{id:z,className:t.cn(a.dialogTitleClassNames.root,`pe-[var(--wave-dialog-title-end-padding,2rem)] text-subtitle-1 font-semibold`),children:e}),(0,g.jsxs)(`div`,{ref:ye,className:t.cn(a.dialogContentClassNames.titleActions,`absolute end-4 top-4 flex items-start gap-1`,c===`full`&&te),children:[r.slotRendersContent(y)?r.renderSlot(y,`span`,t.cn(a.dialogContentClassNames.titleAction,`inline-flex items-center gap-1`)):null,(0,g.jsx)(`span`,{ref:be,className:`contents`}),(0,g.jsx)(m.ModalCloseButton,{componentName:`Dialog.Content`,closeButton:v,closeLabel:x,onClose:e=>j(!1,{reason:`close-button`,event:e}),className:t.cn(a.dialogContentClassNames.closeButton,`text-muted-foreground`)})]}),(0,g.jsx)(`div`,{className:t.cn(a.dialogContentClassNames.body,`-mx-1 mt-1 min-h-0 flex-1 overflow-y-auto scroll-pb-(--wave-dialog-footer-height) p-1 text-body-1`),style:Z===null?void 0:{"--wave-dialog-footer-height":`${Z}px`},children:S})]})})})]})};T.displayName=`DialogContent`;var E=({id:e,action:n,className:i,children:o,ref:s,...c})=>{let{id:l,ref:u}=p.useModalTitle(`Dialog.Title`,`Dialog.Content`,e,s),d=h.useContext(p.ModalSurfaceContext)?.titleActionsOutlet,f=(0,g.jsx)(`h2`,{...c,id:l,ref:u,className:t.cn(a.dialogTitleClassNames.root,`pe-[var(--wave-dialog-title-end-padding,2rem)] text-subtitle-1 font-semibold text-foreground`,i),children:o});if(!r.slotRendersContent(n))return f;let m=r.renderSlot(n,`span`,t.cn(a.dialogTitleClassNames.action,`inline-flex items-center gap-1`));return(0,g.jsxs)(g.Fragment,{children:[f,d===void 0?m:d&&(0,_.createPortal)(m,d)]})};E.displayName=`DialogTitle`;var D=`sticky -bottom-1 z-10 -mx-1 -mb-1 mt-6 flex justify-end gap-2 bg-background px-1 pb-2 pt-3`,O=`mt-6 flex justify-end gap-2`,k=({children:e,className:r,ref:i,...o})=>{let c=h.useContext(p.ModalSurfaceContext),l=c===null,u=c?.setFooterHeight,[d,f]=h.useState(null),m=s.useMergedRefs(i,f);return h.useEffect(()=>{l&&n.warnOnce(`Dialog.Footer:outside-content`,`Dialog.Footer must be rendered inside Dialog.Content. Outside it, the footer stays on the page while the dialog is closed.`)},[l]),h.useLayoutEffect(()=>{if(!d||!u||typeof ResizeObserver>`u`)return;let e=new ResizeObserver(e=>{let t=e[e.length-1];t&&u(t.borderBoxSize?.[0]?.blockSize??d.offsetHeight)});return e.observe(d,{box:`border-box`}),()=>{e.disconnect(),u(null)}},[d,u]),(0,g.jsx)(`div`,{ref:m,...o,className:t.cn(a.dialogFooterClassNames.root,u?D:O,r),children:e})};k.displayName=`DialogFooter`;var A=Object.assign(x,{Trigger:S,Content:T,Footer:k,Title:E,Close:C});exports.Dialog=A,exports.DialogClose=C,exports.DialogContent=T,exports.DialogFooter=k,exports.DialogTitle=E,exports.DialogTrigger=S;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../hooks/useId.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/useIsClient.cjs"),l=require("../../hooks/usePresence.cjs"),u=require("../../hooks/useModalLayer.cjs"),d=require("../portal/Portal.cjs"),f=require("../../lib/motion.cjs"),p=require("../../hooks/useMotion.cjs"),m=require("./Popover.shared.cjs"),h=require("./Dialog.shared.cjs"),g=require("./Dialog.slots.cjs");let _=require("react");_=e.__toESM(_,1);let v=require("react/jsx-runtime"),y=require("react-dom");var b=_.createContext(null);b.displayName=`DialogContext`;var x={open:!1,requestOpen:()=>{},modalType:`modal`,trigger:h.inertModalTrigger,finalFocusRef:void 0,unmountOnClose:!0,contentId:void 0,registerContentId:()=>()=>{}};function S(e){return h.useRequiredContext(b,e,`Dialog`,()=>x)}var C=({open:e,defaultOpen:t,onOpenChange:n,modalType:r=`modal`,finalFocusRef:i,unmountOnClose:a=!0,children:o})=>{let[s,l]=h.useModalOpenState(e,t,n),u=c.useIsClient(),d=s&&u,f=h.useModalTrigger();h.useModalTriggerSession(f,d);let[p,m]=_.useState(void 0),g=_.useCallback(e=>(m(e),()=>m(t=>t===e?void 0:t)),[]),y=_.useMemo(()=>({open:d,requestOpen:l,modalType:r,trigger:f,finalFocusRef:i,unmountOnClose:a,contentId:p,registerContentId:g}),[d,l,r,f,i,a,p,g]);return(0,v.jsx)(b.Provider,{value:y,children:o})};C.displayName=`Dialog`;var w=e=>{let{open:t,requestOpen:n,trigger:r,contentId:i}=S(`Dialog.Trigger`);return h.useModalTriggerPart({open:t,requestOpen:n,trigger:r,controlsId:i},e,`Dialog.Trigger`)};w.displayName=`DialogTrigger`;var T=e=>{let{requestOpen:t}=S(`Dialog.Close`);return h.useModalClosePart(t,e,`Dialog.Close`)};T.displayName=`DialogClose`;var ee={small:`max-w-[400px]`,medium:`max-w-[600px]`,large:`max-w-[940px]`,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))]`},te=`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))]`,ne=8,re=`Dialog.Content:backdrop-ignored`,ie='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.',ae=`Dialog.Content:non-modal-full`,oe='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.';function se(e){let[t,n]=_.useState(null);return _.useLayoutEffect(()=>{if(!e||typeof ResizeObserver>`u`)return;let t=new ResizeObserver(t=>{let r=t[t.length-1];r&&n(r.borderBoxSize?.[0]?.inlineSize??e.offsetWidth)});return t.observe(e,{box:`border-box`}),()=>{t.disconnect(),n(null)}},[e]),t}var E=({title:e,size:c=`medium`,backdrop:y,motion:b,backdropMotion:x,closeButton:C,titleAction:w,closeLabel:T=`Close`,children:E,className:D,style:O,id:ce,onKeyDown:k,ref:A,...le})=>{let{open:j,requestOpen:M,modalType:N,trigger:P,finalFocusRef:ue,unmountOnClose:F,registerContentId:I}=S(`Dialog.Content`),{isMounted:de,ref:fe,presenceProps:L}=l.usePresence(j,{appear:!0,unmountOnExit:F}),pe=L[`data-presence`]===`exiting`,me=p.useMotionClasses(b,f.dialogMotion,D),he=p.useMotionClasses(x,f.dialogBackdropMotion),R=!F,ge=o.useId(`wave-dialog`),z=ce??ge,B=o.useId(`wave-dialog-title`),V=h.useTitleRegistry(),[H,_e]=_.useState(null),U=_.useRef(null),ve=_.useCallback(e=>{U.current=e,_e(e)},[]),ye=_.useCallback(e=>e?I(z):void 0,[I,z]),be=s.useMergedRefs(A,ve,ye,fe),W=_.useRef(null);h.useRaiseOnOpen(j,R,W);let G=h.useBackdropPress(U,N!==`alert`),xe=h.useModalDismiss(M,`Dialog`,G.afterOutsidePress),K=u.useModalLayer({open:j,modalType:N,onDismiss:xe,refs:[U],container:H,triggerRef:P.focusRef,finalFocusRef:ue}),q=N===`non-modal`,Se=h.useModalOpener(j,P,H),Ce=m.usePopoverTabOrder({enabled:j&&q,surface:H,anchorRef:Se,getPreviousStop:m.getTabbableThrough});h.useUnnamedModalWarning(j?H:null,V.hasTitle,`Dialog.Content`,`Dialog.Title`),h.useOpenInsideWarning(j,R,K.layerId,`Dialog`);let J=q&&(y!=null&&typeof y!=`boolean`||x!==void 0);_.useEffect(()=>{J&&n.warnOnce(re,ie)},[J]);let Y=j&&q&&c===`full`;_.useEffect(()=>{Y&&n.warnOnce(ae,oe)},[Y]);let[we,Te]=_.useState(null),[X,Ee]=_.useState(null),Z=se(j||pe?we:null),[Q,De]=_.useState(null),Oe=_.useMemo(()=>({...V.context,setFooterHeight:De,titleActionsOutlet:X}),[V.context,X]);if(!de)return null;let $=r.slotRendersContent(e),ke=Z===null?void 0:Z>0?`${Z+ne}px`:`0px`,Ae=ke===void 0?O:{"--wave-dialog-title-end-padding":ke,...O};return(0,v.jsxs)(d.Portal,{ref:W,layerId:K.layerId,children:[!q&&(0,v.jsx)(g.ModalBackdrop,{backdrop:y,className:a.dialogContentClassNames.backdrop,layerId:K.layerId,open:j,onMouseDown:G.onMouseDown,presenceProps:L,motionClassName:he}),(0,v.jsx)(`div`,{...L,className:t.cn(a.dialogContentClassNames.positioner,`pointer-events-none fixed inset-0 flex items-center justify-center`),children:(0,v.jsx)(`div`,{ref:be,role:N===`alert`?`alertdialog`:`dialog`,id:z,"aria-labelledby":$?B:V.titleId,tabIndex:-1,"data-modal-type":N,"data-size":c,...le,"data-presence":L[`data-presence`],style:Ae,onKeyDown:i.composeEventHandlers(k,Ce),className:t.cn(a.dialogContentClassNames.root,`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`,ee[c],me,D),children:(0,v.jsxs)(h.ModalSurfaceContext.Provider,{value:Oe,children:[$&&(0,v.jsx)(`h2`,{id:B,className:t.cn(a.dialogTitleClassNames.root,`pe-[var(--wave-dialog-title-end-padding,2rem)] text-subtitle-1 font-semibold`),children:e}),(0,v.jsxs)(`div`,{ref:Te,className:t.cn(a.dialogContentClassNames.titleActions,`absolute end-4 top-4 flex items-start gap-1`,c===`full`&&te),children:[r.slotRendersContent(w)?r.renderSlot(w,`span`,t.cn(a.dialogContentClassNames.titleAction,`inline-flex items-center gap-1`)):null,(0,v.jsx)(`span`,{ref:Ee,className:`contents`}),(0,v.jsx)(g.ModalCloseButton,{componentName:`Dialog.Content`,closeButton:C,closeLabel:T,onClose:e=>M(!1,{reason:`close-button`,event:e}),className:t.cn(a.dialogContentClassNames.closeButton,`text-muted-foreground`)})]}),(0,v.jsx)(`div`,{className:t.cn(a.dialogContentClassNames.body,`-mx-1 mt-1 min-h-0 flex-1 overflow-y-auto scroll-pb-(--wave-dialog-footer-height) p-1 text-body-1`),style:Q===null?void 0:{"--wave-dialog-footer-height":`${Q}px`},children:E})]})})})]})};E.displayName=`DialogContent`;var D=({id:e,action:n,className:i,children:o,ref:s,...c})=>{let{id:l,ref:u}=h.useModalTitle(`Dialog.Title`,`Dialog.Content`,e,s),d=_.useContext(h.ModalSurfaceContext)?.titleActionsOutlet,f=(0,v.jsx)(`h2`,{...c,id:l,ref:u,className:t.cn(a.dialogTitleClassNames.root,`pe-[var(--wave-dialog-title-end-padding,2rem)] text-subtitle-1 font-semibold text-foreground`,i),children:o});if(!r.slotRendersContent(n))return f;let p=r.renderSlot(n,`span`,t.cn(a.dialogTitleClassNames.action,`inline-flex items-center gap-1`));return(0,v.jsxs)(v.Fragment,{children:[f,d===void 0?p:d&&(0,y.createPortal)(p,d)]})};D.displayName=`DialogTitle`;var O=`sticky -bottom-1 z-10 -mx-1 -mb-1 mt-6 flex justify-end gap-2 bg-background px-1 pb-2 pt-3`,ce=`mt-6 flex justify-end gap-2`,k=({children:e,className:r,ref:i,...o})=>{let c=_.useContext(h.ModalSurfaceContext),l=c===null,u=c?.setFooterHeight,[d,f]=_.useState(null),p=s.useMergedRefs(i,f);return _.useEffect(()=>{l&&n.warnOnce(`Dialog.Footer:outside-content`,`Dialog.Footer must be rendered inside Dialog.Content. Outside it, the footer stays on the page while the dialog is closed.`)},[l]),_.useLayoutEffect(()=>{if(!d||!u||typeof ResizeObserver>`u`)return;let e=new ResizeObserver(e=>{let t=e[e.length-1];t&&u(t.borderBoxSize?.[0]?.blockSize??d.offsetHeight)});return e.observe(d,{box:`border-box`}),()=>{e.disconnect(),u(null)}},[d,u]),(0,v.jsx)(`div`,{ref:p,...o,className:t.cn(a.dialogFooterClassNames.root,u?O:ce,r),children:e})};k.displayName=`DialogFooter`;var A=Object.assign(C,{Trigger:w,Content:E,Footer:k,Title:D,Close:T});exports.Dialog=A,exports.DialogClose=T,exports.DialogContent=E,exports.DialogFooter=k,exports.DialogTitle=D,exports.DialogTrigger=w;
 //# sourceMappingURL=Dialog.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.cjs","names":["React","inertModalTrigger","useRequiredContext","useModalOpenState","useIsClient","useModalTrigger","useModalTriggerPart","useModalClosePart","usePresence","useId","useTitleRegistry","useMergedRefs","useBackdropPress","useModalDismiss","useModalLayer","useModalOpener","usePopoverTabOrder","getTabbableThrough","slotRendersContent","Portal","ModalBackdrop","dialogContentClassNames","cn","composeEventHandlers","ModalSurfaceContext","dialogTitleClassNames","renderSlot","ModalCloseButton","useModalTitle","_Fragment","createPortal","dialogFooterClassNames","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useId","require_useMergedRefs","require_useIsClient","require_usePresence","require_useModalLayer","require_Portal","require_Popover_shared","require_Dialog_shared","require_Dialog_slots","react","react_jsx_runtime","react_dom","DialogContext","inertDialogContext","useDialogContext","componentName","DialogRoot","openState","requestOpen","open","defaultOpen","onOpenChange","isClient","isOpen","trigger","contentId","setContentId","registerContentId","id","current","context","modalType","finalFocusRef","unmountOnClose","DialogTrigger","props","DialogClose","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","keptMounted","generatedId","propTitleId","titles","surface","setSurface","surfaceRef","attachSurface","node","registerId","mergedRef","ref","portalRef","backdropPress","onDismiss","layer","nonModal","opener","onTabOrderKeyDown","backdropIgnored","backdrop","coversUsablePage","size","titleActionsArea","setTitleActionsArea","titleActionsOutlet","setTitleActionsOutlet","titleActionsWidth","footerHeight","setFooterHeight","surfaceContext","isMounted","hasTitle","title","titleEndPadding","surfaceStyle","style","presenceProps","onKeyDown","className","titleAction","DialogTitle","titleId","titleRef","outlet","heading","action","actionElement","stickyFooterClasses","footerRowClasses","DialogFooter","outsideContent","footer","setFooter","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.cjs","names":["React","inertModalTrigger","useRequiredContext","useModalOpenState","useIsClient","useModalTrigger","useModalTriggerPart","useModalClosePart","usePresence","useMotionClasses","dialogMotion","dialogBackdropMotion","useId","useTitleRegistry","useMergedRefs","useBackdropPress","useModalDismiss","useModalLayer","useModalOpener","usePopoverTabOrder","getTabbableThrough","slotRendersContent","Portal","ModalBackdrop","dialogContentClassNames","cn","composeEventHandlers","ModalSurfaceContext","dialogTitleClassNames","renderSlot","ModalCloseButton","useModalTitle","_Fragment","createPortal","dialogFooterClassNames","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useId","require_useMergedRefs","require_useIsClient","require_usePresence","require_useModalLayer","require_Portal","require_motion","require_useMotion","require_Popover_shared","require_Dialog_shared","require_Dialog_slots","react","react_jsx_runtime","react_dom","DialogContext","inertDialogContext","useDialogContext","componentName","DialogRoot","openState","requestOpen","open","defaultOpen","onOpenChange","isClient","isOpen","trigger","contentId","setContentId","registerContentId","id","current","context","modalType","finalFocusRef","unmountOnClose","DialogTrigger","props","DialogClose","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","exiting","presenceProps","surfaceMotion","motion","className","backdropMotionClassName","backdropMotion","keptMounted","generatedId","propTitleId","titles","surface","setSurface","surfaceRef","attachSurface","node","registerId","mergedRef","ref","portalRef","backdropPress","onDismiss","layer","nonModal","opener","onTabOrderKeyDown","backdropIgnored","backdrop","coversUsablePage","size","titleActionsArea","setTitleActionsArea","titleActionsOutlet","setTitleActionsOutlet","titleActionsWidth","footerHeight","setFooterHeight","surfaceContext","isMounted","hasTitle","title","titleEndPadding","surfaceStyle","style","onKeyDown","titleAction","DialogTitle","titleId","titleRef","outlet","heading","action","actionElement","stickyFooterClasses","footerRowClasses","DialogFooter","outsideContent","footer","setFooter","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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"}