@mortenbrudvik/waveui 0.14.1 → 0.16.0

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","names":["DrawerRoot","DrawerTrigger","DrawerClose","DrawerTitle","DrawerHeader","DrawerHeaderTitle","DrawerHeaderNavigation","DrawerBody","DrawerFooter","require_Drawer_parts","require_Drawer_root","Drawer"],"sources":["../../../src/components/overlays/Drawer.tsx"],"sourcesContent":["import {\n  DrawerBody,\n  DrawerClose,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerHeaderNavigation,\n  DrawerHeaderTitle,\n  DrawerTitle,\n  DrawerTrigger,\n} from './Drawer.parts';\nimport { DrawerRoot } from './Drawer.root';\n\nexport type {\n  DrawerPosition,\n  DrawerSize,\n  DrawerType,\n  DrawerModalType,\n  DrawerOpenChangeReason,\n  DrawerOpenChangeDetails,\n} from './Drawer.context';\nexport type { DrawerProps } from './Drawer.root';\nexport type {\n  DrawerTriggerProps,\n  DrawerTriggerRenderProps,\n  DrawerCloseProps,\n  DrawerCloseRenderProps,\n  DrawerTitleProps,\n  DrawerHeaderProps,\n  DrawerHeaderTitleProps,\n  DrawerHeaderNavigationProps,\n  DrawerBodyProps,\n  DrawerFooterProps,\n} from './Drawer.parts';\n\n/**\n * A side or bottom panel (Fluent UI v2 style): by default an overlay, modal unless it is\n * non-modal, rendered in a portal (inheriting the WaveProvider theme) while open; with\n * `type=\"inline\"` a panel in the page layout, rendered in place. With `unmountOnClose={false}`\n * either kind stays mounted while closed, `hidden` and `inert`.\n *\n * - **Opening**: controlled (`open`), or uncontrolled with a `Drawer.Trigger` placed directly inside\n *   the Drawer or in a Fragment there (it renders in place, outside the panel); the trigger opens\n *   and closes it.\n * - **Modal**: focus moves into the panel and Tab stays inside it (toasts included), the rest of the\n *   page is `inert` (instead of `aria-modal`), and the page does not scroll. `modalType=\"alert\"`\n *   renders `role=\"alertdialog\"`, and a backdrop press does not close it.\n * - **Non-modal**: `modalType=\"non-modal\"` leaves the page usable (no backdrop, no focus trap,\n *   nothing inert, the page scrolls). Focus moves in on open; Tab and Shift+Tab leave the panel in\n *   the page's order right after the element that opened it; Escape closes it only while focus is\n *   inside it; presses on the page never close it; focus returns to the opener only from inside.\n *   Reserve the panel's room in the page layout while it is open, so it hides no page control.\n * - **Inline**: `type=\"inline\"` renders the panel where the Drawer is, after its direct triggers,\n *   as an `<aside>` (a complementary landmark named by its title), also in the server HTML. It is\n *   page content: no portal, backdrop, focus trap, inert page or scroll lock, and toasts keep\n *   their corner next to it. Its trigger toggles it (with `aria-expanded` and `aria-controls`, no\n *   `aria-haspopup`); opening it moves no focus; Escape and presses outside never close it;\n *   closing it returns focus only when focus was inside. `position` picks its inner edge and\n *   `size` its width (its height at the bottom); `separator` draws the inner edge. Place it in\n *   your layout, for example a flex row of the panel and the page content. Changing `type`\n *   remounts the panel and its content.\n * - **Closing**: Escape (only the topmost layer: a popup opened inside closes first), a click on the\n *   backdrop (a drag that starts inside does not close it), the Close button and `Drawer.Close`\n *   (an inline drawer: the trigger, the Close button and `Drawer.Close`).\n *   `onOpenChange` gets the reason as its second argument (`details.reason`), so a controlled\n *   drawer can refuse some of them. A backdrop press blurs the focused field before the drawer\n *   closes, so a typed value is committed as with the Close button; when a controlled drawer\n *   refuses the press, the field gets focus back. Focus returns to the first of these that can\n *   take focus: `finalFocusRef`, the element that had focus when the drawer opened, the trigger,\n *   an element next to where that opener was.\n * - **Size and position**: `position` is `end` (default) or `start`, which follow the text\n *   direction, `left` or `right`, or `bottom` (along the bottom edge, the window wide). `size` sets\n *   the width at a side and the height at the bottom: `small` (default, 320px), `medium` (592px),\n *   `large` (940px) or `full`; the panel never grows past the window (an inline one past its\n *   container). A width class in `className` (a height class for `bottom`) replaces the size. An\n *   overlay panel pads the safe-area insets of the screen edges it touches (the iOS home\n *   indicator, once the page sets `viewport-fit=cover`). Both render as `data-position` and\n *   `data-size`, next to `data-type`.\n * - **Layout**: the `title` prop and the built-in Close button make the header row; a\n *   `Drawer.Header` replaces it, with a `Drawer.HeaderNavigation` row (a Back button, commands)\n *   and a `Drawer.HeaderTitle` (the heading, an `action` area and the Close button). The rest of\n *   the content scrolls in the body (`Drawer.Body` gives it your props); a `Drawer.Footer` is an\n *   action row below the body that never scrolls. Make the parts direct children of the Drawer (a\n *   Fragment there is fine). The header draws a line under itself once the body is scrolled, the\n *   footer one above itself while content continues below: the body, the header and the footer\n *   render the body's scroll state as `data-scroll-state` (`none`, `top`, `middle`, `bottom`).\n * - **Backdrop, Close button and title actions**: the backdrop is the panel's sibling and a slot\n *   (`backdrop`: `null` removes it, `appearance` picks `dimmed` or `transparent`); a modal opened\n *   over another modal dims the page once. `closeButton` sets the content of every built-in Close\n *   button, or hides them (`null`); a button passed there is merged into it. `titleAction` places\n *   header buttons between the `title` heading and the Close button.\n * - **Kept mounted**: `unmountOnClose={false}` keeps the panel and its content mounted while the\n *   drawer is closed, so a form keeps what was typed and the components inside keep their state;\n *   each open of an overlay focuses the first focusable element again (an `autoFocus` inside never\n *   applies), and a kept overlay opened while another overlay is open stacks above it. A kept\n *   inline drawer is in the server HTML, hidden.\n * - **Presence**: the panel and the backdrop mount through the presence core and render\n *   `data-presence` (`entered` while open, `exited` while kept closed); the backdrop and the\n *   panel (an inline drawer's `<aside>`) are `inert` while exiting and `hidden` and `inert` while\n *   kept closed. No motion ships:\n *   `data-[presence=…]:` classes in `className` animate the panel, whose motion a closed drawer\n *   waits for before it unmounts or hides (focus, the trap and the isolation follow the open\n *   state at once).\n *\n * The sub-components are also exported under flat names (`DrawerTrigger`, `DrawerClose`,\n * `DrawerTitle`, `DrawerHeader`, `DrawerHeaderTitle`, `DrawerHeaderNavigation`, `DrawerBody`,\n * `DrawerFooter`) for React Server Components, which cannot use the dotted form; dotted access\n * (`Drawer.Trigger`) needs a client file.\n *\n * @example\n * <Drawer>\n *   <Drawer.Trigger><Button>Filters</Button></Drawer.Trigger>\n *   <Drawer.Header>\n *     <Drawer.HeaderTitle>Filters</Drawer.HeaderTitle>\n *   </Drawer.Header>\n *   <FilterForm id=\"filters\" />\n *   <Drawer.Footer>\n *     <Button appearance=\"primary\" type=\"submit\" form=\"filters\">Apply</Button>\n *     <Drawer.Close><Button>Cancel</Button></Drawer.Close>\n *   </Drawer.Footer>\n * </Drawer>\n */\nexport const Drawer = /* @__PURE__ */ Object.assign(DrawerRoot, {\n  Trigger: DrawerTrigger,\n  Close: DrawerClose,\n  Title: DrawerTitle,\n  Header: DrawerHeader,\n  HeaderTitle: DrawerHeaderTitle,\n  HeaderNavigation: DrawerHeaderNavigation,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n});\n\nexport {\n  DrawerTrigger,\n  DrawerClose,\n  DrawerTitle,\n  DrawerHeader,\n  DrawerHeaderTitle,\n  DrawerHeaderNavigation,\n  DrawerBody,\n  DrawerFooter,\n};\n"],"mappings":"kFAyHA,IAAaW,EAAyB,OAAO,OAAOX,EAAAA,WAAY,CAC9D,QAASC,EAAAA,cACT,MAAOC,EAAAA,YACP,MAAOC,EAAAA,YACP,OAAQC,EAAAA,aACR,YAAaC,EAAAA,kBACb,iBAAkBC,EAAAA,uBAClB,KAAMC,EAAAA,WACN,OAAQC,EAAAA,YACV,CAAC"}
+{"version":3,"file":"Drawer.cjs","names":["DrawerRoot","DrawerTrigger","DrawerClose","DrawerTitle","DrawerHeader","DrawerHeaderTitle","DrawerHeaderNavigation","DrawerBody","DrawerFooter","require_Drawer_parts","require_Drawer_root","Drawer"],"sources":["../../../src/components/overlays/Drawer.tsx"],"sourcesContent":["import {\n  DrawerBody,\n  DrawerClose,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerHeaderNavigation,\n  DrawerHeaderTitle,\n  DrawerTitle,\n  DrawerTrigger,\n} from './Drawer.parts';\nimport { DrawerRoot } from './Drawer.root';\n\nexport type {\n  DrawerPosition,\n  DrawerSize,\n  DrawerType,\n  DrawerModalType,\n  DrawerOpenChangeReason,\n  DrawerOpenChangeDetails,\n} from './Drawer.context';\nexport type { DrawerProps } from './Drawer.root';\nexport type {\n  DrawerTriggerProps,\n  DrawerTriggerRenderProps,\n  DrawerCloseProps,\n  DrawerCloseRenderProps,\n  DrawerTitleProps,\n  DrawerHeaderProps,\n  DrawerHeaderTitleProps,\n  DrawerHeaderNavigationProps,\n  DrawerBodyProps,\n  DrawerFooterProps,\n} from './Drawer.parts';\n\n/**\n * A side or bottom panel (Fluent UI v2 style): by default an overlay, modal unless it is\n * non-modal, rendered in a portal (inheriting the WaveProvider theme) while open; with\n * `type=\"inline\"` a panel in the page layout, rendered in place. With `unmountOnClose={false}`\n * either kind stays mounted while closed, `hidden` and `inert`.\n *\n * - **Opening**: controlled (`open`), or uncontrolled with a `Drawer.Trigger` placed directly inside\n *   the Drawer or in a Fragment there (it renders in place, outside the panel); the trigger opens\n *   and closes it.\n * - **Modal**: focus moves into the panel and Tab stays inside it (toasts included), the rest of the\n *   page is `inert` (instead of `aria-modal`), and the page does not scroll. `modalType=\"alert\"`\n *   renders `role=\"alertdialog\"`, and a backdrop press does not close it.\n * - **Non-modal**: `modalType=\"non-modal\"` leaves the page usable (no backdrop, no focus trap,\n *   nothing inert, the page scrolls). Focus moves in on open; Tab and Shift+Tab leave the panel in\n *   the page's order right after the element that opened it; Escape closes it only while focus is\n *   inside it; presses on the page never close it; focus returns to the opener only from inside.\n *   Reserve the panel's room in the page layout while it is open, so it hides no page control.\n * - **Inline**: `type=\"inline\"` renders the panel where the Drawer is, after its direct triggers,\n *   as an `<aside>` (a complementary landmark named by its title), also in the server HTML. It is\n *   page content: no portal, backdrop, focus trap, inert page or scroll lock, and toasts keep\n *   their corner next to it. Its trigger toggles it (with `aria-expanded` and `aria-controls`, no\n *   `aria-haspopup`); opening it moves no focus; Escape and presses outside never close it;\n *   closing it returns focus only when focus was inside. `position` picks its inner edge and\n *   `size` its width (its height at the bottom); `separator` draws the inner edge. Place it in\n *   your layout, for example a flex row of the panel and the page content. Changing `type`\n *   remounts the panel and its content.\n * - **Closing**: Escape (only the topmost layer: a popup opened inside closes first), a click on the\n *   backdrop (a drag that starts inside does not close it), the Close button and `Drawer.Close`\n *   (an inline drawer: the trigger, the Close button and `Drawer.Close`).\n *   `onOpenChange` gets the reason as its second argument (`details.reason`), so a controlled\n *   drawer can refuse some of them. A backdrop press blurs the focused field before the drawer\n *   closes, so a typed value is committed as with the Close button; when a controlled drawer\n *   refuses the press, the field gets focus back. Focus returns to the first of these that can\n *   take focus: `finalFocusRef`, the element that had focus when the drawer opened, the trigger,\n *   an element next to where that opener was.\n * - **Size and position**: `position` is `end` (default) or `start`, which follow the text\n *   direction, `left` or `right`, or `bottom` (along the bottom edge, the window wide). `size` sets\n *   the width at a side and the height at the bottom: `small` (default, 320px), `medium` (592px),\n *   `large` (940px) or `full`; the panel never grows past the window (an inline one past its\n *   container). A width class in `className` (a height class for `bottom`) replaces the size. An\n *   overlay panel pads the safe-area insets of the screen edges it touches (the iOS home\n *   indicator, once the page sets `viewport-fit=cover`). Both render as `data-position` and\n *   `data-size`, next to `data-type`.\n * - **Layout**: the `title` prop and the built-in Close button make the header row; a\n *   `Drawer.Header` replaces it, with a `Drawer.HeaderNavigation` row (a Back button, commands)\n *   and a `Drawer.HeaderTitle` (the heading, an `action` area and the Close button). The rest of\n *   the content scrolls in the body (`Drawer.Body` gives it your props); a `Drawer.Footer` is an\n *   action row below the body that never scrolls. Make the parts direct children of the Drawer (a\n *   Fragment there is fine). The header draws a line under itself once the body is scrolled, the\n *   footer one above itself while content continues below: the body, the header and the footer\n *   render the body's scroll state as `data-scroll-state` (`none`, `top`, `middle`, `bottom`).\n * - **Backdrop, Close button and title actions**: the backdrop is the panel's sibling and a slot\n *   (`backdrop`: `null` removes it, `appearance` picks `dimmed` or `transparent`); a modal opened\n *   over another modal dims the page once. `closeButton` sets the content of every built-in Close\n *   button, or hides them (`null`); a button passed there is merged into it. `titleAction` places\n *   header buttons between the `title` heading and the Close button.\n * - **Kept mounted**: `unmountOnClose={false}` keeps the panel and its content mounted while the\n *   drawer is closed, so a form keeps what was typed and the components inside keep their state;\n *   each open of an overlay focuses the first focusable element again (an `autoFocus` inside never\n *   applies), and a kept overlay opened while another overlay is open stacks above it. A kept\n *   inline drawer is in the server HTML, hidden.\n * - **Motion**: an overlay panel slides in from its edge and fades in, and slides back and fades\n *   out, over 250 ms (`small`), 300 ms (`medium`), 400 ms (`large`) or 500 ms (`full`), and its\n *   backdrop fades with it; an overlay 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 *   its panel held at its size and fading, so it reads as sliding out from its edge; one open by\n *   default does not animate in, and one at `full` has no motion (a percentage width in\n *   `className` resizes oddly during the motion: give it a length, or pass `motion={null}`).\n *   Under reduced motion every drawer appears and disappears at once. `motion` (the panel, or an\n *   inline drawer's space) and `backdropMotion` (the backdrop) turn each off (`null`) or replace\n *   it, and `WaveProvider motion=\"none\"` turns both defaults off. `data-[presence=…]:` classes in\n *   `className` keep 0.14's behaviour: no default motion, they animate the panel.\n * - **Presence**: the panel and the backdrop mount through the presence core and render\n *   `data-presence` (`entering` and `exiting` while the drawer's motion runs, `entered` while\n *   open, `exited` while kept closed). An inline drawer's `<aside>` is the only child of an\n *   element of its own (`wave-drawer__collapse`), which renders the same phases, carries the\n *   inline motion and has no box while open, so the `<aside>` lays out in your page as without\n *   it. The backdrop and the panel (an inline drawer's `<aside>` and the element around it) are\n *   `inert` while exiting and `hidden` and `inert` while kept closed. A closed drawer waits for\n *   its motion (the panel's, an inline one's on the element around it) before it unmounts or\n *   hides, while focus, the trap, the isolation and the scroll lock follow the open state at\n *   once: an exiting overlay lets clicks through to the page (an `inert` element takes no pointer\n *   events). Opened again during its exit, the same panel enters again.\n *\n * The sub-components are also exported under flat names (`DrawerTrigger`, `DrawerClose`,\n * `DrawerTitle`, `DrawerHeader`, `DrawerHeaderTitle`, `DrawerHeaderNavigation`, `DrawerBody`,\n * `DrawerFooter`) for React Server Components, which cannot use the dotted form; dotted access\n * (`Drawer.Trigger`) needs a client file.\n *\n * @example\n * <Drawer>\n *   <Drawer.Trigger><Button>Filters</Button></Drawer.Trigger>\n *   <Drawer.Header>\n *     <Drawer.HeaderTitle>Filters</Drawer.HeaderTitle>\n *   </Drawer.Header>\n *   <FilterForm id=\"filters\" />\n *   <Drawer.Footer>\n *     <Button appearance=\"primary\" type=\"submit\" form=\"filters\">Apply</Button>\n *     <Drawer.Close><Button>Cancel</Button></Drawer.Close>\n *   </Drawer.Footer>\n * </Drawer>\n */\nexport const Drawer = /* @__PURE__ */ Object.assign(DrawerRoot, {\n  Trigger: DrawerTrigger,\n  Close: DrawerClose,\n  Title: DrawerTitle,\n  Header: DrawerHeader,\n  HeaderTitle: DrawerHeaderTitle,\n  HeaderNavigation: DrawerHeaderNavigation,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n});\n\nexport {\n  DrawerTrigger,\n  DrawerClose,\n  DrawerTitle,\n  DrawerHeader,\n  DrawerHeaderTitle,\n  DrawerHeaderNavigation,\n  DrawerBody,\n  DrawerFooter,\n};\n"],"mappings":"kFAwIA,IAAaW,EAAyB,OAAO,OAAOX,EAAAA,WAAY,CAC9D,QAASC,EAAAA,cACT,MAAOC,EAAAA,YACP,MAAOC,EAAAA,YACP,OAAQC,EAAAA,aACR,YAAaC,EAAAA,kBACb,iBAAkBC,EAAAA,uBAClB,KAAMC,EAAAA,WACN,OAAQC,EAAAA,YACV,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.mjs","names":["Drawer","DrawerRoot","DrawerTrigger","DrawerClose","DrawerTitle","DrawerHeader","DrawerHeaderTitle","DrawerHeaderNavigation","DrawerBody","DrawerFooter"],"sources":["../../../src/components/overlays/Drawer.tsx"],"sourcesContent":["import {\n  DrawerBody,\n  DrawerClose,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerHeaderNavigation,\n  DrawerHeaderTitle,\n  DrawerTitle,\n  DrawerTrigger,\n} from './Drawer.parts';\nimport { DrawerRoot } from './Drawer.root';\n\nexport type {\n  DrawerPosition,\n  DrawerSize,\n  DrawerType,\n  DrawerModalType,\n  DrawerOpenChangeReason,\n  DrawerOpenChangeDetails,\n} from './Drawer.context';\nexport type { DrawerProps } from './Drawer.root';\nexport type {\n  DrawerTriggerProps,\n  DrawerTriggerRenderProps,\n  DrawerCloseProps,\n  DrawerCloseRenderProps,\n  DrawerTitleProps,\n  DrawerHeaderProps,\n  DrawerHeaderTitleProps,\n  DrawerHeaderNavigationProps,\n  DrawerBodyProps,\n  DrawerFooterProps,\n} from './Drawer.parts';\n\n/**\n * A side or bottom panel (Fluent UI v2 style): by default an overlay, modal unless it is\n * non-modal, rendered in a portal (inheriting the WaveProvider theme) while open; with\n * `type=\"inline\"` a panel in the page layout, rendered in place. With `unmountOnClose={false}`\n * either kind stays mounted while closed, `hidden` and `inert`.\n *\n * - **Opening**: controlled (`open`), or uncontrolled with a `Drawer.Trigger` placed directly inside\n *   the Drawer or in a Fragment there (it renders in place, outside the panel); the trigger opens\n *   and closes it.\n * - **Modal**: focus moves into the panel and Tab stays inside it (toasts included), the rest of the\n *   page is `inert` (instead of `aria-modal`), and the page does not scroll. `modalType=\"alert\"`\n *   renders `role=\"alertdialog\"`, and a backdrop press does not close it.\n * - **Non-modal**: `modalType=\"non-modal\"` leaves the page usable (no backdrop, no focus trap,\n *   nothing inert, the page scrolls). Focus moves in on open; Tab and Shift+Tab leave the panel in\n *   the page's order right after the element that opened it; Escape closes it only while focus is\n *   inside it; presses on the page never close it; focus returns to the opener only from inside.\n *   Reserve the panel's room in the page layout while it is open, so it hides no page control.\n * - **Inline**: `type=\"inline\"` renders the panel where the Drawer is, after its direct triggers,\n *   as an `<aside>` (a complementary landmark named by its title), also in the server HTML. It is\n *   page content: no portal, backdrop, focus trap, inert page or scroll lock, and toasts keep\n *   their corner next to it. Its trigger toggles it (with `aria-expanded` and `aria-controls`, no\n *   `aria-haspopup`); opening it moves no focus; Escape and presses outside never close it;\n *   closing it returns focus only when focus was inside. `position` picks its inner edge and\n *   `size` its width (its height at the bottom); `separator` draws the inner edge. Place it in\n *   your layout, for example a flex row of the panel and the page content. Changing `type`\n *   remounts the panel and its content.\n * - **Closing**: Escape (only the topmost layer: a popup opened inside closes first), a click on the\n *   backdrop (a drag that starts inside does not close it), the Close button and `Drawer.Close`\n *   (an inline drawer: the trigger, the Close button and `Drawer.Close`).\n *   `onOpenChange` gets the reason as its second argument (`details.reason`), so a controlled\n *   drawer can refuse some of them. A backdrop press blurs the focused field before the drawer\n *   closes, so a typed value is committed as with the Close button; when a controlled drawer\n *   refuses the press, the field gets focus back. Focus returns to the first of these that can\n *   take focus: `finalFocusRef`, the element that had focus when the drawer opened, the trigger,\n *   an element next to where that opener was.\n * - **Size and position**: `position` is `end` (default) or `start`, which follow the text\n *   direction, `left` or `right`, or `bottom` (along the bottom edge, the window wide). `size` sets\n *   the width at a side and the height at the bottom: `small` (default, 320px), `medium` (592px),\n *   `large` (940px) or `full`; the panel never grows past the window (an inline one past its\n *   container). A width class in `className` (a height class for `bottom`) replaces the size. An\n *   overlay panel pads the safe-area insets of the screen edges it touches (the iOS home\n *   indicator, once the page sets `viewport-fit=cover`). Both render as `data-position` and\n *   `data-size`, next to `data-type`.\n * - **Layout**: the `title` prop and the built-in Close button make the header row; a\n *   `Drawer.Header` replaces it, with a `Drawer.HeaderNavigation` row (a Back button, commands)\n *   and a `Drawer.HeaderTitle` (the heading, an `action` area and the Close button). The rest of\n *   the content scrolls in the body (`Drawer.Body` gives it your props); a `Drawer.Footer` is an\n *   action row below the body that never scrolls. Make the parts direct children of the Drawer (a\n *   Fragment there is fine). The header draws a line under itself once the body is scrolled, the\n *   footer one above itself while content continues below: the body, the header and the footer\n *   render the body's scroll state as `data-scroll-state` (`none`, `top`, `middle`, `bottom`).\n * - **Backdrop, Close button and title actions**: the backdrop is the panel's sibling and a slot\n *   (`backdrop`: `null` removes it, `appearance` picks `dimmed` or `transparent`); a modal opened\n *   over another modal dims the page once. `closeButton` sets the content of every built-in Close\n *   button, or hides them (`null`); a button passed there is merged into it. `titleAction` places\n *   header buttons between the `title` heading and the Close button.\n * - **Kept mounted**: `unmountOnClose={false}` keeps the panel and its content mounted while the\n *   drawer is closed, so a form keeps what was typed and the components inside keep their state;\n *   each open of an overlay focuses the first focusable element again (an `autoFocus` inside never\n *   applies), and a kept overlay opened while another overlay is open stacks above it. A kept\n *   inline drawer is in the server HTML, hidden.\n * - **Presence**: the panel and the backdrop mount through the presence core and render\n *   `data-presence` (`entered` while open, `exited` while kept closed); the backdrop and the\n *   panel (an inline drawer's `<aside>`) are `inert` while exiting and `hidden` and `inert` while\n *   kept closed. No motion ships:\n *   `data-[presence=…]:` classes in `className` animate the panel, whose motion a closed drawer\n *   waits for before it unmounts or hides (focus, the trap and the isolation follow the open\n *   state at once).\n *\n * The sub-components are also exported under flat names (`DrawerTrigger`, `DrawerClose`,\n * `DrawerTitle`, `DrawerHeader`, `DrawerHeaderTitle`, `DrawerHeaderNavigation`, `DrawerBody`,\n * `DrawerFooter`) for React Server Components, which cannot use the dotted form; dotted access\n * (`Drawer.Trigger`) needs a client file.\n *\n * @example\n * <Drawer>\n *   <Drawer.Trigger><Button>Filters</Button></Drawer.Trigger>\n *   <Drawer.Header>\n *     <Drawer.HeaderTitle>Filters</Drawer.HeaderTitle>\n *   </Drawer.Header>\n *   <FilterForm id=\"filters\" />\n *   <Drawer.Footer>\n *     <Button appearance=\"primary\" type=\"submit\" form=\"filters\">Apply</Button>\n *     <Drawer.Close><Button>Cancel</Button></Drawer.Close>\n *   </Drawer.Footer>\n * </Drawer>\n */\nexport const Drawer = /* @__PURE__ */ Object.assign(DrawerRoot, {\n  Trigger: DrawerTrigger,\n  Close: DrawerClose,\n  Title: DrawerTitle,\n  Header: DrawerHeader,\n  HeaderTitle: DrawerHeaderTitle,\n  HeaderNavigation: DrawerHeaderNavigation,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n});\n\nexport {\n  DrawerTrigger,\n  DrawerClose,\n  DrawerTitle,\n  DrawerHeader,\n  DrawerHeaderTitle,\n  DrawerHeaderNavigation,\n  DrawerBody,\n  DrawerFooter,\n};\n"],"mappings":";;;;AAyHA,IAAaA,IAAyB,uBAAO,OAAOC,GAAY;CAC9D,SAASC;CACT,OAAOC;CACP,OAAOC;CACP,QAAQC;CACR,aAAaC;CACb,kBAAkBC;CAClB,MAAMC;CACN,QAAQC;AACV,CAAC"}
+{"version":3,"file":"Drawer.mjs","names":["Drawer","DrawerRoot","DrawerTrigger","DrawerClose","DrawerTitle","DrawerHeader","DrawerHeaderTitle","DrawerHeaderNavigation","DrawerBody","DrawerFooter"],"sources":["../../../src/components/overlays/Drawer.tsx"],"sourcesContent":["import {\n  DrawerBody,\n  DrawerClose,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerHeaderNavigation,\n  DrawerHeaderTitle,\n  DrawerTitle,\n  DrawerTrigger,\n} from './Drawer.parts';\nimport { DrawerRoot } from './Drawer.root';\n\nexport type {\n  DrawerPosition,\n  DrawerSize,\n  DrawerType,\n  DrawerModalType,\n  DrawerOpenChangeReason,\n  DrawerOpenChangeDetails,\n} from './Drawer.context';\nexport type { DrawerProps } from './Drawer.root';\nexport type {\n  DrawerTriggerProps,\n  DrawerTriggerRenderProps,\n  DrawerCloseProps,\n  DrawerCloseRenderProps,\n  DrawerTitleProps,\n  DrawerHeaderProps,\n  DrawerHeaderTitleProps,\n  DrawerHeaderNavigationProps,\n  DrawerBodyProps,\n  DrawerFooterProps,\n} from './Drawer.parts';\n\n/**\n * A side or bottom panel (Fluent UI v2 style): by default an overlay, modal unless it is\n * non-modal, rendered in a portal (inheriting the WaveProvider theme) while open; with\n * `type=\"inline\"` a panel in the page layout, rendered in place. With `unmountOnClose={false}`\n * either kind stays mounted while closed, `hidden` and `inert`.\n *\n * - **Opening**: controlled (`open`), or uncontrolled with a `Drawer.Trigger` placed directly inside\n *   the Drawer or in a Fragment there (it renders in place, outside the panel); the trigger opens\n *   and closes it.\n * - **Modal**: focus moves into the panel and Tab stays inside it (toasts included), the rest of the\n *   page is `inert` (instead of `aria-modal`), and the page does not scroll. `modalType=\"alert\"`\n *   renders `role=\"alertdialog\"`, and a backdrop press does not close it.\n * - **Non-modal**: `modalType=\"non-modal\"` leaves the page usable (no backdrop, no focus trap,\n *   nothing inert, the page scrolls). Focus moves in on open; Tab and Shift+Tab leave the panel in\n *   the page's order right after the element that opened it; Escape closes it only while focus is\n *   inside it; presses on the page never close it; focus returns to the opener only from inside.\n *   Reserve the panel's room in the page layout while it is open, so it hides no page control.\n * - **Inline**: `type=\"inline\"` renders the panel where the Drawer is, after its direct triggers,\n *   as an `<aside>` (a complementary landmark named by its title), also in the server HTML. It is\n *   page content: no portal, backdrop, focus trap, inert page or scroll lock, and toasts keep\n *   their corner next to it. Its trigger toggles it (with `aria-expanded` and `aria-controls`, no\n *   `aria-haspopup`); opening it moves no focus; Escape and presses outside never close it;\n *   closing it returns focus only when focus was inside. `position` picks its inner edge and\n *   `size` its width (its height at the bottom); `separator` draws the inner edge. Place it in\n *   your layout, for example a flex row of the panel and the page content. Changing `type`\n *   remounts the panel and its content.\n * - **Closing**: Escape (only the topmost layer: a popup opened inside closes first), a click on the\n *   backdrop (a drag that starts inside does not close it), the Close button and `Drawer.Close`\n *   (an inline drawer: the trigger, the Close button and `Drawer.Close`).\n *   `onOpenChange` gets the reason as its second argument (`details.reason`), so a controlled\n *   drawer can refuse some of them. A backdrop press blurs the focused field before the drawer\n *   closes, so a typed value is committed as with the Close button; when a controlled drawer\n *   refuses the press, the field gets focus back. Focus returns to the first of these that can\n *   take focus: `finalFocusRef`, the element that had focus when the drawer opened, the trigger,\n *   an element next to where that opener was.\n * - **Size and position**: `position` is `end` (default) or `start`, which follow the text\n *   direction, `left` or `right`, or `bottom` (along the bottom edge, the window wide). `size` sets\n *   the width at a side and the height at the bottom: `small` (default, 320px), `medium` (592px),\n *   `large` (940px) or `full`; the panel never grows past the window (an inline one past its\n *   container). A width class in `className` (a height class for `bottom`) replaces the size. An\n *   overlay panel pads the safe-area insets of the screen edges it touches (the iOS home\n *   indicator, once the page sets `viewport-fit=cover`). Both render as `data-position` and\n *   `data-size`, next to `data-type`.\n * - **Layout**: the `title` prop and the built-in Close button make the header row; a\n *   `Drawer.Header` replaces it, with a `Drawer.HeaderNavigation` row (a Back button, commands)\n *   and a `Drawer.HeaderTitle` (the heading, an `action` area and the Close button). The rest of\n *   the content scrolls in the body (`Drawer.Body` gives it your props); a `Drawer.Footer` is an\n *   action row below the body that never scrolls. Make the parts direct children of the Drawer (a\n *   Fragment there is fine). The header draws a line under itself once the body is scrolled, the\n *   footer one above itself while content continues below: the body, the header and the footer\n *   render the body's scroll state as `data-scroll-state` (`none`, `top`, `middle`, `bottom`).\n * - **Backdrop, Close button and title actions**: the backdrop is the panel's sibling and a slot\n *   (`backdrop`: `null` removes it, `appearance` picks `dimmed` or `transparent`); a modal opened\n *   over another modal dims the page once. `closeButton` sets the content of every built-in Close\n *   button, or hides them (`null`); a button passed there is merged into it. `titleAction` places\n *   header buttons between the `title` heading and the Close button.\n * - **Kept mounted**: `unmountOnClose={false}` keeps the panel and its content mounted while the\n *   drawer is closed, so a form keeps what was typed and the components inside keep their state;\n *   each open of an overlay focuses the first focusable element again (an `autoFocus` inside never\n *   applies), and a kept overlay opened while another overlay is open stacks above it. A kept\n *   inline drawer is in the server HTML, hidden.\n * - **Motion**: an overlay panel slides in from its edge and fades in, and slides back and fades\n *   out, over 250 ms (`small`), 300 ms (`medium`), 400 ms (`large`) or 500 ms (`full`), and its\n *   backdrop fades with it; an overlay 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 *   its panel held at its size and fading, so it reads as sliding out from its edge; one open by\n *   default does not animate in, and one at `full` has no motion (a percentage width in\n *   `className` resizes oddly during the motion: give it a length, or pass `motion={null}`).\n *   Under reduced motion every drawer appears and disappears at once. `motion` (the panel, or an\n *   inline drawer's space) and `backdropMotion` (the backdrop) turn each off (`null`) or replace\n *   it, and `WaveProvider motion=\"none\"` turns both defaults off. `data-[presence=…]:` classes in\n *   `className` keep 0.14's behaviour: no default motion, they animate the panel.\n * - **Presence**: the panel and the backdrop mount through the presence core and render\n *   `data-presence` (`entering` and `exiting` while the drawer's motion runs, `entered` while\n *   open, `exited` while kept closed). An inline drawer's `<aside>` is the only child of an\n *   element of its own (`wave-drawer__collapse`), which renders the same phases, carries the\n *   inline motion and has no box while open, so the `<aside>` lays out in your page as without\n *   it. The backdrop and the panel (an inline drawer's `<aside>` and the element around it) are\n *   `inert` while exiting and `hidden` and `inert` while kept closed. A closed drawer waits for\n *   its motion (the panel's, an inline one's on the element around it) before it unmounts or\n *   hides, while focus, the trap, the isolation and the scroll lock follow the open state at\n *   once: an exiting overlay lets clicks through to the page (an `inert` element takes no pointer\n *   events). Opened again during its exit, the same panel enters again.\n *\n * The sub-components are also exported under flat names (`DrawerTrigger`, `DrawerClose`,\n * `DrawerTitle`, `DrawerHeader`, `DrawerHeaderTitle`, `DrawerHeaderNavigation`, `DrawerBody`,\n * `DrawerFooter`) for React Server Components, which cannot use the dotted form; dotted access\n * (`Drawer.Trigger`) needs a client file.\n *\n * @example\n * <Drawer>\n *   <Drawer.Trigger><Button>Filters</Button></Drawer.Trigger>\n *   <Drawer.Header>\n *     <Drawer.HeaderTitle>Filters</Drawer.HeaderTitle>\n *   </Drawer.Header>\n *   <FilterForm id=\"filters\" />\n *   <Drawer.Footer>\n *     <Button appearance=\"primary\" type=\"submit\" form=\"filters\">Apply</Button>\n *     <Drawer.Close><Button>Cancel</Button></Drawer.Close>\n *   </Drawer.Footer>\n * </Drawer>\n */\nexport const Drawer = /* @__PURE__ */ Object.assign(DrawerRoot, {\n  Trigger: DrawerTrigger,\n  Close: DrawerClose,\n  Title: DrawerTitle,\n  Header: DrawerHeader,\n  HeaderTitle: DrawerHeaderTitle,\n  HeaderNavigation: DrawerHeaderNavigation,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n});\n\nexport {\n  DrawerTrigger,\n  DrawerClose,\n  DrawerTitle,\n  DrawerHeader,\n  DrawerHeaderTitle,\n  DrawerHeaderNavigation,\n  DrawerBody,\n  DrawerFooter,\n};\n"],"mappings":";;;;AAwIA,IAAaA,IAAyB,uBAAO,OAAOC,GAAY;CAC9D,SAASC;CACT,OAAOC;CACP,OAAOC;CACP,QAAQC;CACR,aAAaC;CACb,kBAAkBC;CAClB,MAAMC;CACN,QAAQC;AACV,CAAC"}

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

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

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

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

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

@@ -4,25 +4,27 @@ import { warnOnce as t } from "../../lib/dev.mjs";
 import { composeEventHandlers as n } from "../../lib/composeEventHandlers.mjs";
 import { useMergedRefs as r } from "../../hooks/useMergedRefs.mjs";
 import { useIsClient as i } from "../../hooks/useIsClient.mjs";
-import { usePresence as ee } from "../../hooks/usePresence.mjs";
-import { useRestoreFocus as te } from "../../hooks/useRestoreFocus.mjs";
-import { useModalLayer as ne } from "../../hooks/useModalLayer.mjs";
-import { forcedColors as a } from "../../lib/styles.mjs";
-import { Portal as re } from "../portal/Portal.mjs";
-import { getTabbableThrough as o, usePopoverTabOrder as s } from "./Popover.shared.mjs";
-import { useBackdropPress as c, useModalDismiss as l, useModalOpener as u, useOpenInsideWarning as d, useRaiseOnOpen as ie } from "./Dialog.shared.mjs";
-import { ModalBackdrop as ae } from "./Dialog.slots.mjs";
+import { usePresence as a } from "../../hooks/usePresence.mjs";
+import { useRestoreFocus as o } from "../../hooks/useRestoreFocus.mjs";
+import { useModalLayer as ee } from "../../hooks/useModalLayer.mjs";
+import { forcedColors as s } from "../../lib/styles.mjs";
+import { Portal as c } from "../portal/Portal.mjs";
+import { drawerBackdropMotion as l, drawerDurations as u, drawerMotion as te, inlineDrawerMotion as ne, inlineDrawerStructure as re, usesLegacyMotion as ie } from "../../lib/motion.mjs";
+import { useMotionClasses as d } from "../../hooks/useMotion.mjs";
+import { getTabbableThrough as ae, usePopoverTabOrder as oe } from "./Popover.shared.mjs";
+import { useBackdropPress as se, useModalDismiss as ce, useModalOpener as le, useOpenInsideWarning as ue, useRaiseOnOpen as de } from "./Dialog.shared.mjs";
+import { ModalBackdrop as fe } from "./Dialog.slots.mjs";
 import * as f from "react";
-import { jsx as p, jsxs as oe } from "react/jsx-runtime";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/overlays/Drawer.panel.tsx
-function m(e, t) {
+function h(e, t) {
 	let n = i();
 	return e === "inline" ? t : t && n;
 }
-function h(e) {
+function g(e) {
 	return e === "bottom" ? "height" : "width";
 }
-var g = {
+var _ = {
 	width: {
 		small: "w-80",
 		medium: "w-148",
@@ -35,125 +37,139 @@ var g = {
 		large: "h-235",
 		full: "h-full"
 	}
-}, _ = {
+}, v = {
 	start: "border-e",
 	end: "border-s",
 	left: "border-r",
 	right: "border-l",
 	bottom: "border-t"
-}, v = {
+}, y = {
 	start: "start-0 top-0 h-full max-w-full",
 	end: "end-0 top-0 h-full max-w-full",
 	left: "left-0 top-0 h-full max-w-full",
 	right: "right-0 top-0 h-full max-w-full",
 	bottom: "inset-x-0 bottom-0 w-full max-h-full"
 };
-function y(e, t) {
+function b(e, t) {
 	return e === "bottom" && t !== "full" ? "pb-[env(safe-area-inset-bottom)]" : "pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]";
 }
-function b(e, t) {
+function pe(e, t) {
 	return [
+		y[e],
 		v[e],
-		_[e],
-		g[h(e)][t],
-		y(e, t)
+		_[g(e)][t],
+		b(e, t)
 	].join(" ");
 }
-var x = [
+var me = [
 	"relative flex min-h-0 shrink-0 flex-col max-w-full bg-background text-foreground",
 	"border-transparent data-[separator]:border-border",
-	a.border
+	s.border
 ].join(" ");
-function S(e, t) {
-	let n = h(e);
+function he(e, t) {
+	let n = g(e);
 	return [
-		_[e],
+		v[e],
 		n === "height" ? "w-full max-h-full" : "",
-		g[n][t]
+		_[n][t]
 	].filter(Boolean).join(" ");
 }
-var C = "fixed flex flex-col border-border bg-background text-foreground shadow-64", w = ({ componentName: i, type: a, open: m, requestOpen: h, position: g, size: _, separator: v, modalType: y, unmountOnClose: w, inlineAs: T, trigger: E, finalFocusRef: D, rootClassName: O, backdropClassName: se, backdrop: k, id: A, className: j, onKeyDown: M, ref: N, children: P, ...F }) => {
-	let I = a === "inline", L = !I, R = y === "non-modal", z = L && R, B = !w, { isMounted: V, ref: H, presenceProps: U } = ee(m, { unmountOnExit: w }), [W, G] = f.useState(null), [ce, K] = f.useState(null), q = f.useRef(null), le = f.useCallback((e) => {
+var ge = "fixed flex flex-col border-border bg-background text-foreground shadow-64", x = ({ componentName: i, type: s, open: h, requestOpen: _, position: v, size: y, separator: b, modalType: x, unmountOnClose: S, inlineAs: _e, trigger: C, finalFocusRef: w, rootClassName: T, backdropClassName: ve, collapseClassName: ye, backdrop: E, motion: D, backdropMotion: O, id: k, className: A, onKeyDown: j, ref: M, children: N, ...P }) => {
+	let F = s === "inline", I = !F, L = x === "non-modal", R = I && L, z = !S, { isMounted: be, ref: B, presenceProps: V } = a(h, {
+		appear: I,
+		unmountOnExit: S
+	}), H = d(D, F ? `${ne[g(v)]} ${u[y]}` : `${te[v]} ${u[y]}`, A), xe = d(O, l[y]), U = ie(D, A), [W, G] = f.useState(null), [Se, K] = f.useState(null), q = f.useRef(null), Ce = f.useCallback((e) => {
 		if (e) return q.current = e, G(e), () => {
 			q.current === e && (q.current = null), G(null);
 		};
-	}, []), ue = f.useCallback((e) => {
+	}, []), we = f.useCallback((e) => {
 		if (e) return q.current = e, K(e), () => {
 			q.current === e && (q.current = null), K(null);
 		};
-	}, []), de = r(N, le, H), fe = r(N, ue, H);
-	te({
-		enabled: m && I,
-		container: ce,
-		triggerRef: E.focusRef,
-		finalFocusRef: D,
+	}, []), Te = r(M, Ce, B), Ee = r(M, we, U ? B : null);
+	o({
+		enabled: h && F,
+		container: Se,
+		triggerRef: C.focusRef,
+		finalFocusRef: w,
 		requireFocusInside: !0
 	});
 	let J = f.useRef(null);
-	ie(m && L, B, J);
-	let Y = c(q, y !== "alert"), X = l(h, i, Y.afterOutsidePress), Z = ne({
-		open: m && L,
-		modalType: y,
+	de(h && I, z, J);
+	let Y = se(q, x !== "alert"), X = ce(_, i, Y.afterOutsidePress), Z = ee({
+		open: h && I,
+		modalType: x,
 		onDismiss: X,
 		refs: [q],
 		container: W,
-		triggerRef: E.focusRef,
-		finalFocusRef: D
-	}), pe = u(m && L, E, W), me = s({
-		enabled: m && z,
+		triggerRef: C.focusRef,
+		finalFocusRef: w
+	}), De = le(h && I, C, W), Oe = oe({
+		enabled: h && R,
 		surface: W,
-		anchorRef: pe,
-		getPreviousStop: o
+		anchorRef: De,
+		getPreviousStop: ae
 	});
-	d(m, B, Z.layerId, i, q);
-	let Q = (R || I) && k != null && typeof k != "boolean";
+	ue(h, z, Z.layerId, i, q);
+	let Q = (L || F) && (E != null && typeof E != "boolean" || O !== void 0);
 	f.useEffect(() => {
-		Q && t(`${i}:backdrop-ignored`, `${i}: \`backdrop\` is ignored: a non-modal or inline drawer has no backdrop, so the page around it stays usable.`);
+		Q && t(`${i}:backdrop-ignored`, `${i}: \`backdrop\` and \`backdropMotion\` are ignored: a non-modal or inline drawer has no backdrop, so the page around it stays usable.`);
 	}, [Q, i]);
-	let $ = m && z && _ === "full";
-	return f.useEffect(() => {
+	let $ = h && R && y === "full";
+	if (f.useEffect(() => {
 		$ && t(`${i}:non-modal-full`, `${i}: \`size="full"\` with \`modalType="non-modal"\` covers the whole page while leaving it usable, so Tab reaches controls hidden behind the drawer. Use \`modalType="modal"\`, \`type="inline"\`, or a smaller size with its room reserved in the page layout.`);
-	}, [$, i]), V ? I ? /* @__PURE__ */ p(T, {
-		ref: fe,
-		id: A,
-		"data-type": "inline",
-		"data-position": g,
-		"data-size": _,
-		"data-separator": v ? "" : void 0,
-		...F,
-		...U,
-		onKeyDown: M,
-		className: e(O, x, S(g, _), j),
-		children: P
-	}) : /* @__PURE__ */ oe(re, {
+	}, [$, i]), !be) return null;
+	if (F) {
+		let t = _e;
+		return /* @__PURE__ */ p("div", {
+			ref: U ? void 0 : B,
+			...V,
+			className: e(ye, re[v], y === "full" ? "" : H),
+			children: /* @__PURE__ */ p(t, {
+				ref: Ee,
+				id: k,
+				"data-type": "inline",
+				"data-position": v,
+				"data-size": y,
+				"data-separator": b ? "" : void 0,
+				...P,
+				...V,
+				onKeyDown: j,
+				className: e(T, me, he(v, y), A),
+				children: N
+			})
+		});
+	}
+	return /* @__PURE__ */ m(c, {
 		ref: J,
 		layerId: Z.layerId,
-		children: [!R && /* @__PURE__ */ p(ae, {
-			backdrop: k,
-			className: se,
+		children: [!L && /* @__PURE__ */ p(fe, {
+			backdrop: E,
+			className: ve,
 			layerId: Z.layerId,
-			open: m,
+			open: h,
 			onMouseDown: Y.onMouseDown,
-			presenceProps: U
+			presenceProps: V,
+			motionClassName: xe
 		}), /* @__PURE__ */ p("div", {
-			ref: de,
-			role: y === "alert" ? "alertdialog" : "dialog",
-			id: A,
+			ref: Te,
+			role: x === "alert" ? "alertdialog" : "dialog",
+			id: k,
 			tabIndex: -1,
 			"data-type": "overlay",
-			"data-position": g,
-			"data-size": _,
-			"data-modal-type": y,
-			...F,
-			...U,
-			onKeyDown: n(M, me),
-			className: e(O, C, b(g, _), j),
-			children: P
+			"data-position": v,
+			"data-size": y,
+			"data-modal-type": x,
+			...P,
+			...V,
+			onKeyDown: n(j, Oe),
+			className: e(T, ge, pe(v, y), H, A),
+			children: N
 		})]
-	}) : null;
+	});
 };
-w.displayName = "DrawerPanel";
+x.displayName = "DrawerPanel";
 //#endregion
-export { w as DrawerPanel, m as useDrawerOpen };
+export { x as DrawerPanel, h as useDrawerOpen };
 
 //# sourceMappingURL=Drawer.panel.mjs.map