@orioncactuscorp/ui 1.5.1 → 1.7.0

package/dist/components/Modal/Modal.js

@@ -1,30 +1,34 @@
 'use client';
-import { jsx as d, jsxs as X } from "react/jsx-runtime";
-import { useCallback as R, useEffect as z, useRef as j, useState as T, useMemo as ge, useLayoutEffect as ve } from "react";
-import { Dialog as A } from "@base-ui-components/react/dialog";
-import ye from "@orioncactuscorp/icons/orioncactus/CloseThick";
-import Ce from "../Background/Background.js";
-import Se from "../BackgroundIconButton/BackgroundIconButton.js";
-import { ScrollArea as Me, ScrollAreaContainer as Ne } from "../ScrollArea/ScrollArea.js";
-import { useModalContext as Y, ModalProvider as we } from "./contexts.js";
-import { useControllableState as Fe } from "./useControllableState.js";
-import { useMeasuredElement as pe } from "./useElementSize.js";
-import { useModalDrag as Re } from "./useModalDrag.js";
-import { useModalPlacement as Te } from "./useModalPlacement.js";
-import { useModalStackDepth as He } from "./useModalStackDepth.js";
-import { getModalScrollState as Ae } from "./modalScrollArbitration.js";
-import { resolveModalSnapMetrics as Be, resolveModalPopupSnapPositions as De } from "./snapPoints.js";
-import l from "./Modal.module.scss.js";
+import { jsx as s, jsxs as Z } from "react/jsx-runtime";
+import { useCallback as R, useEffect as ne, useRef as Y, useState as T, useMemo as be, useLayoutEffect as Ce, useId as Me } from "react";
+import { Dialog as L } from "@base-ui-components/react/dialog";
+import Pe from "@orioncactuscorp/icons/orioncactus/CloseThick";
+import { MotionExpand as Re } from "../../react/motion.js";
+import He from "../Background/Background.js";
+import Te from "../BackgroundIconButton/BackgroundIconButton.js";
+import we from "../Interaction/Interaction.js";
+import { ScrollArea as ve, ScrollAreaContainer as ye } from "../ScrollArea/ScrollArea.js";
+import { DisclosureIndicator as Fe } from "../internal/DisclosureIndicator.js";
+import { normalizeSlotIcon as xe } from "../internal/slot.js";
+import { useModalContext as re, ModalProvider as Ae } from "./contexts.js";
+import { useControllableState as ke } from "./useControllableState.js";
+import { useMeasuredElement as ue } from "./useElementSize.js";
+import { useModalDrag as Be } from "./useModalDrag.js";
+import { useModalPlacement as De } from "./useModalPlacement.js";
+import { useModalStackDepth as Ie } from "./useModalStackDepth.js";
+import { getModalScrollState as Ee } from "./modalScrollArbitration.js";
+import { resolveModalSnapMetrics as je, resolveModalPopupSnapPositions as Le } from "./snapPoints.js";
+import n from "./Modal.module.scss.js";
 function H(...e) {
   return e.filter(Boolean).join(" ");
 }
-function Pe(e) {
+function Se(e) {
   return e != null && e !== !1 && e !== "";
 }
-function de(e, t) {
+function pe(e, t) {
   typeof e == "function" ? e(t) : e && (e.current = t);
 }
-function xe(e) {
+function $e(e) {
   if (!e) return;
   const t = Object.entries(e).filter(
     ([r]) => r.startsWith("--")
@@ -32,44 +36,46 @@ function xe(e) {
   if (t.length !== 0)
     return Object.fromEntries(t);
 }
-function je(e) {
+function Ve(e) {
   const t = e.trim();
   return t.endsWith("ms") ? Number.parseFloat(t) || 0 : t.endsWith("s") ? (Number.parseFloat(t) || 0) * 1e3 : 0;
 }
 function fe(e) {
-  return e.split(",").reduce((t, r) => Math.max(t, je(r)), 0);
+  return e.split(",").reduce((t, r) => Math.max(t, Ve(r)), 0);
 }
-function Ee(e) {
-  const t = window.getComputedStyle(e), r = fe(t.animationDuration), a = fe(t.animationDelay);
-  return r + a + 250;
+function Oe(e) {
+  const t = window.getComputedStyle(e), r = fe(t.animationDuration), c = fe(t.animationDelay);
+  return r + c + 250;
 }
-function Ie({
+function qe({
   defaultSnapPosition: e,
   node: t,
   snapPositions: r
 }) {
   if (!r?.length) return;
-  const a = De({
+  const c = Le({
     defaultSnapPosition: e,
     snapPositions: r,
     surfaceMotion: t
   });
-  a && (t.style.setProperty(
+  if (!c) return;
+  const l = c.defaultTarget;
+  t.style.setProperty(
     "--oc-modal-translate-x",
-    `${a.defaultTarget.x}px`
+    l.settledTranslate?.x ?? `${l.x}px`
   ), t.style.setProperty(
     "--oc-modal-translate-y",
-    `${a.defaultTarget.y}px`
-  ));
+    l.settledTranslate?.y ?? `${l.y}px`
+  );
 }
-function Oe(e) {
+function Ke(e) {
   if (e && typeof e == "object" && "reason" in e && typeof e.reason == "string")
     return e.reason;
 }
-function ce(e) {
+function de(e) {
   e && typeof e == "object" && "cancel" in e && typeof e.cancel == "function" && e.cancel();
 }
-function qe(e, t) {
+function ze(e, t) {
   switch (t) {
     case "drag-dismiss":
       return e?.drag ?? "auto";
@@ -87,22 +93,22 @@ function qe(e, t) {
       return e?.programmatic ?? "auto";
   }
 }
-function Le(e, t) {
+function We(e, t) {
   return t > 0 && (e === "drag-dismiss" || e === "backdrop-press" || e === "outside-press");
 }
-function he(e, t) {
+function ge(e, t) {
   return t && (e === "backdrop-press" || e === "outside-press");
 }
-function $e({
+function Ue({
   backdrop: e,
   canSnapPopup: t,
   placement: r,
-  presentationState: a
+  presentationState: c
 }) {
-  return e !== "auto" ? e : r === "bottom" && a === "peeked" || t ? "hidden" : "visible";
+  return e !== "auto" ? e : r === "bottom" && c === "peeked" || t ? "hidden" : "visible";
 }
-function Ke(e) {
-  switch (Oe(e)) {
+function _e(e) {
+  switch (Ke(e)) {
     case "close-press":
       return "close-button";
     case "outside-press":
@@ -117,369 +123,380 @@ function Ke(e) {
       return "programmatic";
   }
 }
-function be({
+function Ge(e) {
+  return e >= 2 && e <= 6;
+}
+function he({
   children: e,
   open: t,
   defaultOpen: r,
-  modal: a = !0,
-  onOpenChange: p,
-  canCloseAttempt: y,
-  onCloseAttempt: u,
-  presentationState: g,
+  modal: c = !0,
+  onOpenChange: l,
+  canCloseAttempt: k,
+  onCloseAttempt: p,
+  presentationState: h,
   defaultPresentationState: f = "visible",
-  onPresentationStateChange: M,
-  disablePointerDismissal: i,
-  navigationDepth: k = 0,
-  dismissBehavior: c
+  onPresentationStateChange: S,
+  disablePointerDismissal: d,
+  navigationDepth: b = 0,
+  dismissBehavior: i
 }) {
-  const v = t !== void 0, [E, I] = T(
+  const v = t !== void 0, [$, V] = T(
     r ?? !1
-  ), U = v ? t : E, [O, se] = T("bottom"), [o, _] = T(!1), [q, Z] = T(!1), [s, G] = T(!1), [ee, te] = T(!1), [L, J] = T(0), [C, N] = T(null), [oe, $] = T({
+  ), O = v ? t : $, [q, ce] = T("bottom"), [a, K] = T(!1), [A, J] = T(!1), [u, B] = T(!1), [g, ee] = T(!1), [z, Q] = T(0), [N, M] = T(0), [te, W] = T(null), [U, w] = T({
     canScroll: !1,
     scrolledFromTop: !1,
     scrolledToBottom: !0
-  }), [B, S] = Fe({
-    value: g,
+  }), [C, D] = ke({
+    value: h,
     defaultValue: f,
-    onChange: M
-  }), w = pe(), D = pe(), K = Math.max(0, k), F = R(
-    (n, h) => {
-      v || I(n), p?.(n, h);
+    onChange: S
+  }), F = ue(), P = ue(), X = Math.max(0, b), y = R(
+    (o, m) => {
+      v || V(o), l?.(o, m);
     },
-    [p, v]
-  ), P = R(
-    (n = { reason: "programmatic" }) => y?.(n) !== !1,
-    [y]
-  ), b = R(
-    (n = { reason: "programmatic" }) => {
-      J((h) => h + 1);
+    [l, v]
+  ), I = R(
+    (o = { reason: "programmatic" }) => k?.(o) !== !1,
+    [k]
+  ), x = R(
+    (o = { reason: "programmatic" }) => {
+      Q((m) => m + 1);
     },
     []
-  ), V = R(
-    (n = { reason: "programmatic" }) => {
-      if (he(n.reason, s))
+  ), oe = R(() => {
+    M((o) => o + 1);
+  }, []), E = R(
+    (o = { reason: "programmatic" }) => {
+      if (ge(o.reason, u))
         return !1;
-      const h = qe(c, n.reason);
-      return h === "allow" ? !0 : h === "block" ? !1 : !Le(n.reason, K);
+      const m = ze(i, o.reason);
+      return m === "allow" ? !0 : m === "block" ? !1 : !We(o.reason, X);
     },
-    [s, c, K]
-  ), W = R(
-    (n = { reason: "programmatic" }, h = {}) => {
-      const { commit: Q = !0, skipAttempt: m = !1 } = h;
-      return !m && he(n.reason, s) ? (ce(n.eventDetails), !1) : !m && !V(n) || !m && !P(n) || !m && u?.(n) === !1 ? (ce(n.eventDetails), b(n), !1) : (Q && F(!1, n.eventDetails), !0);
+    [u, i, X]
+  ), _ = R(
+    (o = { reason: "programmatic" }, m = {}) => {
+      const { commit: le = !0, skipAttempt: j = !1 } = m;
+      return !j && ge(o.reason, u) ? (de(o.eventDetails), !1) : !j && !E(o) || !j && !I(o) || !j && p?.(o) === !1 ? (de(o.eventDetails), x(o), !1) : (le && y(!1, o.eventDetails), !0);
     },
     [
-      P,
-      s,
-      V,
-      F,
-      b,
-      u
+      I,
+      u,
+      E,
+      y,
+      x,
+      p
     ]
-  ), le = R(
-    (n, h) => {
-      if (n && B === "peeked" && S("visible"), !n) {
-        W({
-          reason: Ke(h),
-          eventDetails: h
+  ), ae = R(
+    (o, m) => {
+      if (o && C === "peeked" && D("visible"), !o) {
+        _({
+          reason: _e(m),
+          eventDetails: m
         });
         return;
       }
-      F(n, h);
+      y(o, m);
     },
-    [F, B, W, S]
-  ), ae = B === "visible" && !ee ? a : !1, ie = i || O === "bottom" && o, re = ge(
+    [y, C, _, D]
+  ), G = C === "visible" && !g ? c : !1, se = d || q === "bottom" && a, ie = be(
     () => ({
-      open: U,
-      placement: O,
-      setPlacement: se,
-      presentationState: B,
-      setPresentationState: S,
-      requestClose: W,
-      canDismissByBehavior: V,
-      canCloseAttempt: P,
-      closeAttemptFeedbackKey: L,
-      notifyCloseAttemptRejected: b,
-      disablePointerDismissal: i ?? !1,
-      setBackdropDismissalDisabled: G,
-      setBackgroundInteractive: te,
-      canPeek: o,
-      setCanPeek: _,
-      canRenderHandle: q,
-      setCanRenderHandle: Z,
-      headerHeight: w.height,
-      footerHeight: D.height,
-      setHeaderNode: w.setNode,
-      setFooterNode: D.setNode,
-      bodyNode: C,
-      setBodyNode: N,
-      scrollState: oe,
-      setScrollState: $
+      open: O,
+      placement: q,
+      setPlacement: ce,
+      presentationState: C,
+      setPresentationState: D,
+      requestClose: _,
+      canDismissByBehavior: E,
+      canCloseAttempt: I,
+      closeAttemptFeedbackKey: z,
+      notifyCloseAttemptRejected: x,
+      disablePointerDismissal: d ?? !1,
+      setBackdropDismissalDisabled: B,
+      setBackgroundInteractive: ee,
+      canPeek: a,
+      setCanPeek: K,
+      canRenderHandle: A,
+      setCanRenderHandle: J,
+      popupSnapLayoutVersion: N,
+      notifyPopupSnapLayoutChange: oe,
+      headerHeight: F.height,
+      footerHeight: P.height,
+      setHeaderNode: F.setNode,
+      setFooterNode: P.setNode,
+      bodyNode: te,
+      setBodyNode: W,
+      scrollState: U,
+      setScrollState: w
     }),
     [
-      C,
-      o,
+      te,
+      a,
+      A,
+      E,
+      I,
+      z,
+      P.height,
+      P.setNode,
+      F.height,
+      F.setNode,
+      x,
+      oe,
+      N,
+      O,
       q,
-      V,
-      P,
-      L,
-      D.height,
-      D.setNode,
-      w.height,
-      w.setNode,
-      b,
+      _,
       U,
-      O,
-      W,
-      oe,
-      i,
-      B,
-      S
+      d,
+      C,
+      D
     ]
   );
-  return /* @__PURE__ */ d(we, { value: re, children: /* @__PURE__ */ d(
-    A.Root,
+  return /* @__PURE__ */ s(Ae, { value: ie, children: /* @__PURE__ */ s(
+    L.Root,
     {
-      open: U,
-      modal: ae,
-      onOpenChange: le,
-      disablePointerDismissal: ie,
+      open: O,
+      modal: G,
+      onOpenChange: ae,
+      disablePointerDismissal: se,
       children: e
     }
   ) });
 }
-function Ve({
+function Je({
   className: e = "",
   children: t,
   render: r,
-  nativeButton: a
+  nativeButton: c
 }) {
-  return r ? /* @__PURE__ */ d(
-    A.Trigger,
+  return r ? /* @__PURE__ */ s(
+    L.Trigger,
     {
       render: r,
-      nativeButton: a,
+      nativeButton: c,
       "data-oc-component": "modal-trigger",
       children: t
     }
-  ) : /* @__PURE__ */ d(
-    A.Trigger,
+  ) : /* @__PURE__ */ s(
+    L.Trigger,
     {
-      className: H(l.trigger, e),
-      nativeButton: a,
+      className: H(n.trigger, e),
+      nativeButton: c,
       "data-oc-component": "modal-trigger",
       children: t
     }
   );
 }
-function We({
+function Qe({
   className: e = "",
   children: t,
   variant: r = "adaptive",
-  size: a = "medium",
-  resize: p = "hug",
-  backdrop: y = "auto",
-  drag: u = "content",
-  peekable: g = !1,
+  size: c = "medium",
+  resize: l = "hug",
+  backdrop: k = "auto",
+  drag: p = "content",
+  peekable: h = !1,
   snapPoints: f,
-  defaultSnapPoint: M,
-  snapPositions: i,
-  defaultSnapPosition: k,
-  initialFocus: c,
+  defaultSnapPoint: S,
+  snapPositions: d,
+  defaultSnapPosition: b,
+  initialFocus: i,
   peekHeight: v,
-  closeThreshold: E,
-  scrollLockTimeout: I,
-  container: U,
-  style: O,
-  ...se
+  closeThreshold: $,
+  scrollLockTimeout: V,
+  container: O,
+  style: q,
+  ...ce
 }) {
-  const o = Y("ModalContent"), { setCanPeek: _, setCanRenderHandle: q, setPlacement: Z } = o, s = Te(r), G = j(null), ee = j(null), te = j(null), L = j(null), J = j(0), C = j(null), N = j(null), [oe, $] = T(), B = u === "handle" || u === "content", S = s === "popup" && u === "content" && !!i?.length, w = $e({
-    backdrop: y,
-    canSnapPopup: S,
-    placement: s,
-    presentationState: o.presentationState
-  }), D = S && w === "hidden", K = (s === "bottom" || S) && B, F = s === "bottom" && K && g, P = F && v !== void 0 ? v : o.headerHeight > 0 ? o.headerHeight : void 0, b = ge(() => {
+  const a = re("ModalContent"), { setCanPeek: K, setCanRenderHandle: A, setPlacement: J } = a, u = De(r), B = Y(null), g = Y(null), ee = Y(null), z = Y(null), Q = Y(0), N = Y(null), M = Y(null), [te, W] = T(), U = p === "handle" || p === "content", w = u === "popup" && U && !!d?.length, C = Ue({
+    backdrop: k,
+    canSnapPopup: w,
+    placement: u,
+    presentationState: a.presentationState
+  }), D = w && C === "hidden", F = (u === "bottom" || w) && U, P = u === "bottom" && F && h, X = P && v !== void 0 ? v : a.headerHeight > 0 ? a.headerHeight : void 0, y = be(() => {
     if (!(!f?.length || typeof window > "u"))
-      return Be({
+      return je({
         snapPoints: f,
-        defaultSnapPoint: M,
+        defaultSnapPoint: S,
         viewportHeight: window.innerHeight
       });
-  }, [M, f]), V = He(o.open);
-  z(() => {
-    Z(s);
-  }, [s, Z]), z(() => {
-    o.open || (L.current = null);
-  }, [o.open]), z(() => (_(F), () => _(!1)), [F, _]), z(() => (q(K), () => q(!1)), [K, q]);
-  const W = Re({
-    enabled: u !== !1,
-    drag: u,
-    open: o.open,
-    placement: s,
-    surfaceMotionRef: G,
-    backdropRef: te,
-    bodyNode: o.bodyNode,
-    snapHeights: b?.snapHeights,
-    peekHeight: F ? v : void 0,
-    peekFallback: F ? "header" : void 0,
-    presentationState: o.presentationState,
-    setPresentationState: o.setPresentationState,
-    requestClose: o.requestClose,
-    canCloseAttempt: o.canCloseAttempt,
-    dismissible: !o.disablePointerDismissal && o.canDismissByBehavior({ reason: "drag-dismiss" }),
-    visibleTranslate: b?.visibleTranslate,
-    snapPositions: S ? i : void 0,
-    defaultSnapPosition: k,
-    closeThreshold: E,
-    scrollLockTimeout: I
-  }), le = R(
-    (m) => {
-      G.current = m, m && o.open && S && L.current !== m && (Ie({
-        defaultSnapPosition: k,
-        node: m,
-        snapPositions: i
-      }), L.current = m);
+  }, [S, f]), I = Ie(a.open);
+  ne(() => {
+    J(u);
+  }, [u, J]), ne(() => {
+    a.open || (z.current = null);
+  }, [a.open]), ne(() => (K(P), () => K(!1)), [P, K]), ne(() => (A(F), () => A(!1)), [F, A]);
+  const x = Be({
+    enabled: p !== !1,
+    drag: p,
+    open: a.open,
+    placement: u,
+    surfaceMotionRef: B,
+    backdropRef: ee,
+    bodyNode: a.bodyNode,
+    snapHeights: y?.snapHeights,
+    peekHeight: P ? v : void 0,
+    peekFallback: P ? "header" : void 0,
+    presentationState: a.presentationState,
+    setPresentationState: a.setPresentationState,
+    requestClose: a.requestClose,
+    canCloseAttempt: a.canCloseAttempt,
+    dismissible: !a.disablePointerDismissal && a.canDismissByBehavior({ reason: "drag-dismiss" }),
+    visibleTranslate: y?.visibleTranslate,
+    snapPositions: w ? d : void 0,
+    defaultSnapPosition: b,
+    closeThreshold: $,
+    scrollLockTimeout: V,
+    popupSnapLayoutVersion: a.popupSnapLayoutVersion
+  }), oe = R(
+    (o) => {
+      B.current = o, o && a.open && w && z.current !== o && (qe({
+        defaultSnapPosition: b,
+        node: o,
+        snapPositions: d
+      }), z.current = o);
     },
-    [S, o.open, k, i]
+    [w, a.open, b, d]
   );
-  z(() => {
-    const m = o.closeAttemptFeedbackKey;
-    if (m === 0 || s !== "popup" || J.current === m) {
-      J.current = m, $(void 0);
+  ne(() => {
+    const o = a.closeAttemptFeedbackKey;
+    if (o === 0 || u !== "popup" || Q.current === o) {
+      Q.current = o, W(void 0);
       return;
     }
-    const x = ee.current;
-    if (!x) return;
-    J.current = m, C.current !== null && window.cancelAnimationFrame(C.current), N.current !== null && window.clearTimeout(N.current), $(void 0);
-    const ue = () => {
-      $(void 0), N.current = null;
-    }, ne = (me) => {
-      me.target === x && me.animationName === "oc-modal-reject-shake" && (x.removeEventListener("animationend", ne), N.current !== null && window.clearTimeout(N.current), ue());
+    const m = g.current;
+    if (!m) return;
+    Q.current = o, N.current !== null && window.cancelAnimationFrame(N.current), M.current !== null && window.clearTimeout(M.current), W(void 0);
+    const le = () => {
+      W(void 0), M.current = null;
+    }, j = (me) => {
+      me.target === m && me.animationName === "oc-modal-reject-shake" && (m.removeEventListener("animationend", j), M.current !== null && window.clearTimeout(M.current), le());
     };
-    return x.addEventListener("animationend", ne), C.current = window.requestAnimationFrame(() => {
-      C.current = null, $("reject"), C.current = window.requestAnimationFrame(() => {
-        C.current = null, N.current = window.setTimeout(() => {
-          x.removeEventListener("animationend", ne), ue();
-        }, Ee(x));
+    return m.addEventListener("animationend", j), N.current = window.requestAnimationFrame(() => {
+      N.current = null, W("reject"), N.current = window.requestAnimationFrame(() => {
+        N.current = null, M.current = window.setTimeout(() => {
+          m.removeEventListener("animationend", j), le();
+        }, Oe(m));
       });
     }), () => {
-      x.removeEventListener("animationend", ne), C.current !== null && (window.cancelAnimationFrame(C.current), C.current = null), N.current !== null && (window.clearTimeout(N.current), N.current = null);
+      m.removeEventListener("animationend", j), N.current !== null && (window.cancelAnimationFrame(N.current), N.current = null), M.current !== null && (window.clearTimeout(M.current), M.current = null);
     };
-  }, [o.closeAttemptFeedbackKey, s]);
-  const ae = xe(O), ie = {
-    ...ae,
-    ...o.headerHeight > 0 ? { "--oc-modal-header-height": `${o.headerHeight}px` } : {},
-    ...o.footerHeight > 0 ? { "--oc-modal-footer-height": `${o.footerHeight}px` } : {},
-    ...P !== void 0 ? { "--oc-modal-peek-height": `${P}px` } : {},
-    ...b?.sheetHeight !== void 0 ? { "--oc-modal-sheet-height": `${b.sheetHeight}px` } : {},
-    ...b?.visibleTranslate !== void 0 ? {
-      "--oc-modal-translate-y": `${b.visibleTranslate}px`
+  }, [a.closeAttemptFeedbackKey, u]);
+  const E = $e(q), _ = {
+    ...E,
+    ...a.headerHeight > 0 ? { "--oc-modal-header-height": `${a.headerHeight}px` } : {},
+    ...a.footerHeight > 0 ? { "--oc-modal-footer-height": `${a.footerHeight}px` } : {},
+    ...X !== void 0 ? { "--oc-modal-peek-height": `${X}px` } : {},
+    ...y?.sheetHeight !== void 0 ? { "--oc-modal-sheet-height": `${y.sheetHeight}px` } : {},
+    ...y?.visibleTranslate !== void 0 ? {
+      "--oc-modal-translate-y": `${y.visibleTranslate}px`
     } : {}
-  }, re = {
+  }, ae = {
     // Each modal reserves one backdrop slot and one viewport slot.
-    "--oc-modal-stack-offset": V * 2
-  }, n = c === "content" ? G : c, { setBackdropDismissalDisabled: h, setBackgroundInteractive: Q } = o;
-  return ve(() => (h(w === "hidden"), Q(D), () => {
-    h(!1), Q(!1);
+    "--oc-modal-stack-offset": I * 2
+  }, G = i === "content" ? B : i, { setBackdropDismissalDisabled: se, setBackgroundInteractive: ie } = a;
+  return Ce(() => (se(C === "hidden"), ie(D), () => {
+    se(!1), ie(!1);
   }), [
     D,
-    w,
-    h,
-    Q
-  ]), /* @__PURE__ */ X(A.Portal, { container: U, children: [
-    /* @__PURE__ */ d(
-      A.Backdrop,
+    C,
+    se,
+    ie
+  ]), /* @__PURE__ */ Z(L.Portal, { container: O, children: [
+    /* @__PURE__ */ s(
+      L.Backdrop,
       {
-        ref: te,
-        className: l.backdrop,
+        ref: ee,
+        className: n.backdrop,
         "data-oc-part": "backdrop",
         "data-oc-component": "modal-backdrop",
-        "data-oc-modal-backdrop": w,
-        "data-oc-modal-placement": s,
-        "data-oc-modal-presentation-state": o.presentationState,
-        style: re,
-        onClick: (m) => {
-          if (w === "hidden") {
-            m.stopPropagation();
+        "data-oc-modal-backdrop": C,
+        "data-oc-modal-placement": u,
+        "data-oc-modal-presentation-state": a.presentationState,
+        style: ae,
+        onClick: (o) => {
+          if (C === "hidden") {
+            o.stopPropagation();
             return;
           }
-          if (o.disablePointerDismissal) {
-            o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
+          if (a.disablePointerDismissal) {
+            a.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
-          if (!o.canDismissByBehavior({ reason: "backdrop-press" })) {
-            o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
+          if (!a.canDismissByBehavior({ reason: "backdrop-press" })) {
+            a.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
-          if (s === "bottom" && F) {
-            o.presentationState === "visible" && o.setPresentationState("peeked");
+          if (u === "bottom" && P) {
+            a.presentationState === "visible" && a.setPresentationState("peeked");
             return;
           }
-          o.requestClose({ reason: "backdrop-press" });
+          a.requestClose({ reason: "backdrop-press" });
         }
       }
     ),
-    /* @__PURE__ */ d(
-      A.Viewport,
+    /* @__PURE__ */ s(
+      L.Viewport,
       {
-        className: l.viewport,
+        className: n.viewport,
         "data-oc-part": "viewport",
         "data-oc-component": "modal-viewport",
-        "data-oc-modal-placement": s,
-        style: re,
-        children: /* @__PURE__ */ X(
-          A.Popup,
+        "data-oc-modal-placement": u,
+        style: ae,
+        children: /* @__PURE__ */ Z(
+          L.Popup,
           {
-            ...se,
-            ...W,
-            ref: le,
-            initialFocus: n,
+            ...ce,
+            ...x,
+            ref: oe,
+            initialFocus: G,
             className: H(
-              l.surfaceMotion,
-              l[a],
+              n.surfaceMotion,
+              n[c],
               e
             ),
             "data-oc-part": "surface-motion",
             "data-oc-component": "modal-content",
-            "data-oc-modal-backdrop": w,
+            "data-oc-modal-backdrop": C,
             "data-oc-variant": r,
-            "data-oc-size": a,
-            "data-oc-resize": p,
-            "data-oc-modal-feedback": s === "popup" ? oe : void 0,
-            "data-oc-modal-placement": s,
-            "data-oc-modal-snapping": b || S ? "true" : void 0,
-            style: ie,
+            "data-oc-size": c,
+            "data-oc-resize": l,
+            "data-oc-modal-feedback": u === "popup" ? te : void 0,
+            "data-oc-modal-placement": u,
+            "data-oc-modal-snapping": y || w ? "true" : void 0,
+            style: _,
             children: [
-              s === "bottom" ? /* @__PURE__ */ d(
+              u === "bottom" ? /* @__PURE__ */ s(
                 "div",
                 {
                   "aria-hidden": "true",
                   className: H(
-                    l.bottomFill,
-                    l[a],
+                    n.bottomFill,
+                    n[c],
                     e
                   ),
                   "data-oc-part": "bottom-fill",
                   "data-oc-component": "modal-bottom-fill",
-                  "data-oc-size": a,
-                  style: ae
+                  "data-oc-size": c,
+                  style: E
                 }
               ) : null,
-              /* @__PURE__ */ d(
+              /* @__PURE__ */ s(
                 "div",
                 {
-                  ref: ee,
+                  ref: g,
                   className: H(
-                    l.surface,
-                    l[p],
+                    n.surface,
+                    n[l],
                     e
                   ),
                   "data-oc-part": "surface",
                   "data-oc-variant": r,
-                  "data-oc-size": a,
-                  "data-oc-resize": p,
-                  "data-oc-modal-placement": s,
-                  style: O,
+                  "data-oc-size": c,
+                  "data-oc-resize": l,
+                  "data-oc-modal-placement": u,
+                  "data-oc-scrollable": a.scrollState.canScroll ? "true" : "false",
+                  style: q,
                   children: t
                 }
               )
@@ -490,59 +507,59 @@ function We({
     )
   ] });
 }
-function ze({
+function Xe({
   className: e = "",
   title: t,
   children: r,
-  leadingContent: a,
-  trailingContent: p,
-  closeLabel: y = "닫기",
-  closeButton: u = !0,
-  handle: g = !0,
+  leadingContent: c,
+  trailingContent: l,
+  closeLabel: k = "닫기",
+  closeButton: p = !0,
+  handle: h = !0,
   ref: f,
-  ...M
+  ...S
 }) {
-  const i = Y("ModalHeader"), { setHeaderNode: k, scrollState: c } = i, v = R(
-    (I) => {
-      k(I), de(f, I);
+  const d = re("ModalHeader"), { setHeaderNode: b, scrollState: i } = d, v = R(
+    (V) => {
+      b(V), pe(f, V);
     },
-    [f, k]
-  ), E = Pe(a);
-  return /* @__PURE__ */ X(
-    Ce,
+    [f, b]
+  ), $ = Se(c);
+  return /* @__PURE__ */ Z(
+    He,
     {
-      ...M,
+      ...S,
       as: "header",
       ref: v,
       backdrop: "compact",
-      className: H(l.header, e),
+      className: H(n.header, e),
       backColor: "var(--oc-color-theme-background-elevated-normal)",
       frontColor: "transparent",
       "data-oc-part": "header",
       "data-oc-component": "modal-header",
       variant: "strong",
-      "data-oc-sticky": c.scrolledFromTop ? "true" : "false",
+      "data-oc-sticky": i.scrolledFromTop ? "true" : "false",
       children: [
-        g && i.canRenderHandle ? /* @__PURE__ */ d(
+        h && d.canRenderHandle ? /* @__PURE__ */ s(
           "div",
           {
             "aria-hidden": "true",
-            className: l.handle,
+            className: n.handle,
             "data-oc-part": "handle"
           }
         ) : null,
-        /* @__PURE__ */ X(
+        /* @__PURE__ */ Z(
           "div",
           {
-            className: l.headerInner,
-            "data-oc-has-leading": E ? "true" : "false",
+            className: n.headerInner,
+            "data-oc-has-leading": $ ? "true" : "false",
             "data-oc-part": "header-inner",
             children: [
-              E ? /* @__PURE__ */ d("div", { className: l.headerLeading, "data-oc-part": "header-leading", children: a }) : null,
-              /* @__PURE__ */ d("div", { className: l.headerTitle, "data-oc-part": "header-title", children: t ? /* @__PURE__ */ d(A.Title, { children: t }) : r }),
-              /* @__PURE__ */ X("div", { className: l.headerTrailing, "data-oc-part": "header-trailing", children: [
-                p,
-                u ? /* @__PURE__ */ d(ke, { label: y }) : null
+              $ ? /* @__PURE__ */ s("div", { className: n.headerLeading, "data-oc-part": "header-leading", children: c }) : null,
+              /* @__PURE__ */ s("div", { className: n.headerTitle, "data-oc-part": "header-title", children: t ? /* @__PURE__ */ s(L.Title, { children: t }) : r }),
+              /* @__PURE__ */ Z("div", { className: n.headerTrailing, "data-oc-part": "header-trailing", children: [
+                l,
+                p ? /* @__PURE__ */ s(Ne, { label: k }) : null
               ] })
             ]
           }
@@ -551,52 +568,214 @@ function ze({
     }
   );
 }
-function Ue({
+function Ye({
+  className: e = "",
+  title: t,
+  children: r,
+  expanded: c,
+  defaultExpanded: l = !0,
+  onExpandedChange: k,
+  disabled: p = !1,
+  forceMount: h = !0,
+  handle: f = !0,
+  headingLevel: S = 2,
+  indicator: d,
+  titleAsDialogTitle: b = !0,
+  navigationProps: i,
+  panelProps: v,
+  panelContentProps: $,
+  ref: V,
+  style: O,
+  ...q
+}) {
+  const ce = re("ModalNavigationSection"), {
+    canRenderHandle: a,
+    notifyPopupSnapLayoutChange: K,
+    placement: A
+  } = ce, { height: J, setNode: u } = ue(), B = Me(), [g, ee] = ke({
+    value: c,
+    defaultValue: l,
+    onChange: k
+  }), [z, Q] = T(
+    g ? "open" : "closed"
+  ), N = `h${Ge(S) ? S : 2}`, {
+    className: M = "",
+    id: te,
+    onClick: W,
+    ...U
+  } = i ?? {}, {
+    className: w = "",
+    id: C,
+    role: D,
+    ...F
+  } = v ?? {}, { className: P = "", ...X } = $ ?? {}, y = te ?? `${B}-navigation`, I = C ?? `${B}-panel`, x = `${B}-dialog-title`, oe = Se(t), E = f && a, _ = J > 0 ? {
+    ...O,
+    "--oc-modal-navigation-block-size": `${J}px`
+  } : O, ae = R(
+    (G) => {
+      Q(G), A === "popup" && K();
+    },
+    [K, A]
+  );
+  return /* @__PURE__ */ Z(
+    "section",
+    {
+      ref: V,
+      className: H(n.navigationSection, e),
+      style: _,
+      ...q,
+      "data-oc-component": "modal-navigation-section",
+      "data-oc-motion-state": z,
+      "data-oc-state": g ? "open" : "closed",
+      children: [
+        b && oe ? /* @__PURE__ */ s(
+          L.Title,
+          {
+            className: n.navigationDialogTitle,
+            id: x,
+            children: t
+          }
+        ) : null,
+        E ? /* @__PURE__ */ s(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: n.handle,
+            "data-oc-part": "handle"
+          }
+        ) : null,
+        /* @__PURE__ */ s(N, { className: n.navigationHeading, "data-oc-part": "heading", children: /* @__PURE__ */ Z(
+          "button",
+          {
+            ...U,
+            ref: u,
+            id: y,
+            className: H(n.navigation, M),
+            type: "button",
+            disabled: p,
+            "aria-disabled": p ? "true" : U["aria-disabled"],
+            "aria-expanded": g,
+            "aria-controls": I,
+            onClick: (G) => {
+              W?.(G), !(G.defaultPrevented || p) && ee(!g);
+            },
+            "data-oc-component": "modal-navigation",
+            "data-oc-part": "navigation",
+            "data-oc-state": g ? "open" : "closed",
+            children: [
+              /* @__PURE__ */ s("span", { className: n.navigationTitle, "data-oc-part": "title", children: t }),
+              d === void 0 ? /* @__PURE__ */ s(
+                Fe,
+                {
+                  className: n.navigationIndicator,
+                  open: g
+                }
+              ) : d ? /* @__PURE__ */ s(
+                "span",
+                {
+                  className: n.navigationIndicator,
+                  "data-oc-part": "indicator",
+                  "data-oc-state": g ? "open" : "closed",
+                  children: xe(d)
+                }
+              ) : null,
+              p ? null : /* @__PURE__ */ s(we, { variant: "light" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ s(
+          Re,
+          {
+            className: H(n.navigationPanel, w),
+            open: g,
+            forceMount: h,
+            intent: "expand",
+            measureBlockSize: "rendered",
+            onMotionStateChange: ae,
+            contentProps: {
+              className: n.navigationPanelFrame,
+              "data-oc-part": "panel-inner"
+            },
+            ...F,
+            "aria-hidden": g ? void 0 : !0,
+            "aria-labelledby": y,
+            id: I,
+            inert: g ? void 0 : !0,
+            role: D ?? "region",
+            "data-oc-component": "modal-navigation-panel",
+            "data-oc-state": g ? "open" : "closed",
+            children: /* @__PURE__ */ s(
+              ve,
+              {
+                className: n.navigationPanelScroll,
+                "data-oc-component": "modal-navigation-panel-scroll-area",
+                "data-oc-part": "panel-scroll-area",
+                children: /* @__PURE__ */ s(
+                  ye,
+                  {
+                    ...X,
+                    className: H(
+                      n.navigationPanelInner,
+                      P
+                    ),
+                    "data-oc-component": "modal-navigation-panel-content",
+                    children: r
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function Ze({
   className: e = "",
   children: t,
   containerClassName: r = "",
-  containerProps: a,
-  ref: p,
-  ...y
+  containerProps: c,
+  ref: l,
+  ...k
 }) {
-  const u = Y("ModalBody"), { bodyNode: g, setBodyNode: f, setScrollState: M } = u, i = R(
-    (c) => {
-      M(Ae(c));
+  const p = re("ModalBody"), { bodyNode: h, setBodyNode: f, setScrollState: S } = p, d = R(
+    (i) => {
+      S(Ee(i));
     },
-    [M]
-  ), k = R(
-    (c) => {
-      f(c), de(p, c), i(c);
+    [S]
+  ), b = R(
+    (i) => {
+      f(i), pe(l, i), d(i);
     },
-    [p, f, i]
+    [l, f, d]
   );
-  return z(() => {
-    const c = g;
-    if (!c || (i(c), typeof ResizeObserver > "u")) return;
-    const v = new ResizeObserver(() => i(c));
-    return v.observe(c), c.firstElementChild && v.observe(c.firstElementChild), () => v.disconnect();
-  }, [g, i]), /* @__PURE__ */ d(
-    Me,
+  return ne(() => {
+    const i = h;
+    if (!i || (d(i), typeof ResizeObserver > "u")) return;
+    const v = new ResizeObserver(() => d(i));
+    return v.observe(i), i.firstElementChild && v.observe(i.firstElementChild), () => v.disconnect();
+  }, [h, d]), /* @__PURE__ */ s(
+    ve,
     {
-      ...y,
-      className: H(l.body, e),
+      ...k,
+      className: H(n.body, e),
       "data-oc-part": "body",
       "data-oc-component": "modal-body",
-      children: /* @__PURE__ */ d(
-        Ne,
+      children: /* @__PURE__ */ s(
+        ye,
         {
-          ref: k,
-          className: l.bodyContainer,
+          ref: b,
+          className: n.bodyContainer,
           "data-oc-part": "body-container",
           "data-oc-component": "modal-body-container",
-          onScroll: (c) => {
-            a?.onScroll?.(c), i(c.currentTarget);
+          onScroll: (i) => {
+            c?.onScroll?.(i), d(i.currentTarget);
           },
-          children: /* @__PURE__ */ d(
+          children: /* @__PURE__ */ s(
             "section",
             {
-              ...a,
-              className: H(l.bodyContent, r),
+              ...c,
+              className: H(n.bodyContent, r),
               "data-oc-part": "body-content",
               "data-oc-component": "modal-body-content",
               children: t
@@ -607,75 +786,77 @@ function Ue({
     }
   );
 }
-function _e({
+function et({
   className: e = "",
   children: t,
   background: r = "auto",
-  ref: a,
-  ...p
+  ref: c,
+  ...l
 }) {
-  const y = Y("ModalFooter"), { scrollState: u, setFooterNode: g } = y, f = R(
-    (k) => {
-      g(k), de(a, k);
+  const k = re("ModalFooter"), { scrollState: p, setFooterNode: h } = k, f = R(
+    (b) => {
+      h(b), pe(c, b);
     },
-    [a, g]
-  ), M = r === !0 || r === "auto" && u.canScroll && !u.scrolledToBottom;
-  return /* @__PURE__ */ d(
+    [c, h]
+  ), S = r === !0 || r === "auto" && p.canScroll && !p.scrolledToBottom;
+  return /* @__PURE__ */ s(
     "footer",
     {
-      ...p,
+      ...l,
       ref: f,
-      className: H(l.footer, e),
+      className: H(n.footer, e),
       "data-oc-part": "footer",
       "data-oc-component": "modal-footer",
-      "data-oc-background": M ? "true" : "false",
+      "data-oc-background": S ? "true" : "false",
       children: t
     }
   );
 }
-function ke({
+function Ne({
   className: e = "",
-  children: t = /* @__PURE__ */ d(ye, {}),
+  children: t = /* @__PURE__ */ s(Pe, {}),
   label: r = "닫기",
-  size: a = 24,
-  disabled: p,
-  onClick: y,
-  ...u
+  size: c = 24,
+  disabled: l,
+  onClick: k,
+  ...p
 }) {
-  const g = Y("ModalClose");
-  return /* @__PURE__ */ d(
-    Se,
+  const h = re("ModalClose");
+  return /* @__PURE__ */ s(
+    Te,
     {
-      ...u,
-      className: H(l.close, e),
-      "aria-label": u["aria-label"] ?? r,
+      ...p,
+      className: H(n.close, e),
+      "aria-label": p["aria-label"] ?? r,
       "data-oc-part": "close",
       "data-oc-component": "modal-close",
-      disabled: p,
+      disabled: l,
       onClick: (f) => {
-        y?.(f), !f.defaultPrevented && !p && g.requestClose({ reason: "close-button" });
+        k?.(f), !f.defaultPrevented && !l && h.requestClose({ reason: "close-button" });
       },
-      size: a,
+      size: c,
       children: t
     }
   );
 }
-const dt = Object.assign(be, {
-  Root: be,
-  Trigger: Ve,
-  Content: We,
-  Header: ze,
-  Body: Ue,
-  Footer: _e,
-  Close: ke
+const St = Object.assign(he, {
+  Root: he,
+  Trigger: Je,
+  Content: Qe,
+  Header: Xe,
+  NavigationSection: Ye,
+  Body: Ze,
+  Footer: et,
+  Close: Ne
 });
 export {
-  Ue as ModalBody,
-  ke as ModalClose,
-  We as ModalContent,
-  _e as ModalFooter,
-  ze as ModalHeader,
-  be as ModalRoot,
-  Ve as ModalTrigger,
-  dt as default
+  Ze as ModalBody,
+  Ne as ModalClose,
+  Qe as ModalContent,
+  et as ModalFooter,
+  Xe as ModalHeader,
+  Ye as ModalNavigationSection,
+  he as ModalRoot,
+  Je as ModalTrigger,
+  St as default
 };