@smwb/ui-solid 2.0.0 → 2.1.0

package/dist/components/layout/sheet/sheet.js

@@ -1,20 +1,23 @@
-import { createComponent as l, Portal as q, use as _, insert as d, effect as x, className as D, isServer as G, template as f, mergeProps as R, spread as J, setAttribute as g, memo as y, delegateEvents as Q } from "solid-js/web";
+import { createComponent as l, Portal as G, use as L, insert as h, effect as k, style as P, className as T, isServer as J, template as y, mergeProps as I, spread as Q, setAttribute as b, memo as _, delegateEvents as Z } from "solid-js/web";
 import '../../../assets/styles/less/components/sheet/sheet.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                     */
-import { mergeProps as B, splitProps as M, createSignal as I, createEffect as K, onCleanup as N, Show as w, on as Z } from "solid-js";
-import C from "clsx";
-import { createCssTransition as W } from "../../../primitives/createCssTransition.js";
-import { isTopOverlayLayer as ee } from "../../../primitives/overlayLayer.js";
-import { restoreFocus as te } from "../../../primitives/restoreFocus.js";
-import { mergeRefs as re } from "../../../primitives/mergeRefs.js";
-import { mergeStyle as ne } from "../../../primitives/mergeStyle.js";
-import { ClickAwayListener as oe } from "../../clickAwayListener/clickAwayListener.js";
-import { Button as H } from "../../inputs/button/button.js";
-import { Icon as P } from "../../base/icon/icon.js";
-var ae = /* @__PURE__ */ f("<div class=smwb-sheet__drag-handle data-testid=sheet-drag-handle role=separator tabindex=0><span class=smwb-sheet__drag-handle-bar>"), ie = /* @__PURE__ */ f("<div class=smwb-sheet__header>"), se = /* @__PURE__ */ f("<div class=smwb-sheet__inner>"), le = /* @__PURE__ */ f("<div>"), T = /* @__PURE__ */ f("<div data-smwb-overlay-layer>");
-const ce = (m) => m === "bottom" || m === "top";
-function de(m) {
-  const z = B({
+import { mergeProps as K, splitProps as N, createSignal as Y, createEffect as W, onCleanup as U, Show as z, on as ee } from "solid-js";
+import $ from "clsx";
+import { createCssTransition as X } from "../../../primitives/createCssTransition.js";
+import { isTopOverlayLayer as te } from "../../../primitives/overlayLayer.js";
+import { restoreFocus as re } from "../../../primitives/restoreFocus.js";
+import { mergeRefs as ne } from "../../../primitives/mergeRefs.js";
+import { mergeStyle as oe } from "../../../primitives/mergeStyle.js";
+import { ClickAwayListener as ie } from "../../clickAwayListener/clickAwayListener.js";
+import { Button as R } from "../../inputs/button/button.js";
+import { Icon as B } from "../../base/icon/icon.js";
+var ae = /* @__PURE__ */ y("<div class=smwb-sheet__drag-handle data-testid=sheet-drag-handle role=separator tabindex=0><span class=smwb-sheet__drag-handle-bar>"), se = /* @__PURE__ */ y("<div class=smwb-sheet__header>"), le = /* @__PURE__ */ y("<div class=smwb-sheet__inner>"), ce = /* @__PURE__ */ y("<div>"), M = /* @__PURE__ */ y("<div data-smwb-overlay-layer>");
+const de = (c, f) => {
+  const e = "changedTouches" in c ? c.changedTouches[0]?.clientY : c.clientY;
+  return f != null && e !== void 0 && e < f.getBoundingClientRect().top;
+}, me = (c) => c === "bottom" || c === "top";
+function ue(c) {
+  const f = K({
     size: "60%",
     withSizeToggle: !0,
     hideHeaderActions: !1,
@@ -27,9 +30,9 @@ function de(m) {
     minSize: 80,
     resizeStep: 24,
     resizeHandleAriaLabel: "Resize sheet"
-  }, m), [e, A] = M(z, ["isOpen", "placement", "class", "mode", "size", "variant", "onClose", "withSizeToggle", "hideHeaderActions", "reverseHeaderActions", "closeAriaLabel", "expandAriaLabel", "collapseAriaLabel", "restoreAriaLabel", "resizable", "minSize", "maxSize", "resizeStep", "resizeHandleAriaLabel", "onResize", "style", "handleClose", "handleSizeButton", "children", "ref", "data-testid"]);
-  let h;
-  const [c, u] = I(null), s = () => ce(e.placement), S = W({
+  }, c), [e, x] = N(f, ["isOpen", "placement", "class", "mode", "size", "variant", "onClose", "withSizeToggle", "hideHeaderActions", "reverseHeaderActions", "closeAriaLabel", "expandAriaLabel", "collapseAriaLabel", "restoreAriaLabel", "resizable", "minSize", "maxSize", "resizeStep", "resizeHandleAriaLabel", "onResize", "style", "handleClose", "handleSizeButton", "children", "ref", "data-testid"]);
+  let w;
+  const [u, p] = Y(null), s = () => me(e.placement), C = X({
     in: () => e.isOpen,
     timeout: {
       enter: 120,
@@ -39,63 +42,63 @@ function de(m) {
       enterDone: "smwb-sheet_entered"
     },
     appear: !0
-  }), b = (t) => {
-    const a = s() ? window.innerHeight : window.innerWidth, r = e.maxSize ?? a;
-    return Math.max(e.minSize, Math.min(r, t));
-  }, p = () => {
-    const t = h?.getBoundingClientRect();
+  }), A = (t) => {
+    const i = s() ? window.innerHeight : window.innerWidth, n = e.maxSize ?? i;
+    return Math.max(e.minSize, Math.min(n, t));
+  }, g = () => {
+    const t = w?.getBoundingClientRect();
     return t ? s() ? t.height : t.width : e.minSize;
-  }, n = (t) => {
-    const a = b(t);
-    u(a), e.onResize?.(a);
+  }, d = (t) => {
+    const i = A(t);
+    p(i), e.onResize?.(i);
   };
-  let o = null;
-  const U = (t) => {
-    t.preventDefault(), o = {
+  let r = null;
+  const o = (t) => {
+    t.preventDefault(), r = {
       start: s() ? t.clientY : t.clientX,
-      size: p()
+      size: g()
     };
     try {
       t.currentTarget.setPointerCapture?.(t.pointerId);
     } catch {
     }
-  }, X = (t) => {
-    if (!o) return;
-    const r = (s() ? t.clientY : t.clientX) - o.start, i = e.placement === "bottom" || e.placement === "right" ? -r : r;
-    n(o.size + i);
-  }, L = (t) => {
-    o = null, t.currentTarget.hasPointerCapture?.(t.pointerId) && t.currentTarget.releasePointerCapture?.(t.pointerId);
-  }, Y = (t) => {
-    const a = c() ?? p(), r = e.maxSize ?? (s() ? window.innerHeight : window.innerWidth), i = e.placement === "bottom" ? "ArrowUp" : e.placement === "top" ? "ArrowDown" : e.placement === "left" ? "ArrowRight" : "ArrowLeft", v = e.placement === "bottom" ? "ArrowDown" : e.placement === "top" ? "ArrowUp" : e.placement === "left" ? "ArrowLeft" : "ArrowRight";
-    t.key === i ? (t.preventDefault(), n(a + e.resizeStep)) : t.key === v ? (t.preventDefault(), n(a - e.resizeStep)) : t.key === "Home" ? (t.preventDefault(), n(e.minSize)) : t.key === "End" && (t.preventDefault(), n(r));
+  }, v = (t) => {
+    if (!r) return;
+    const n = (s() ? t.clientY : t.clientX) - r.start, a = e.placement === "bottom" || e.placement === "right" ? -n : n;
+    d(r.size + a);
+  }, m = (t) => {
+    r = null, t.currentTarget.hasPointerCapture?.(t.pointerId) && t.currentTarget.releasePointerCapture?.(t.pointerId);
+  }, F = (t) => {
+    const i = u() ?? g(), n = e.maxSize ?? (s() ? window.innerHeight : window.innerWidth), a = e.placement === "bottom" ? "ArrowUp" : e.placement === "top" ? "ArrowDown" : e.placement === "left" ? "ArrowRight" : "ArrowLeft", S = e.placement === "bottom" ? "ArrowDown" : e.placement === "top" ? "ArrowUp" : e.placement === "left" ? "ArrowLeft" : "ArrowRight";
+    t.key === a ? (t.preventDefault(), d(i + e.resizeStep)) : t.key === S ? (t.preventDefault(), d(i - e.resizeStep)) : t.key === "Home" ? (t.preventDefault(), d(e.minSize)) : t.key === "End" && (t.preventDefault(), d(n));
   };
-  K(Z(() => e.isOpen, (t) => {
+  W(ee(() => e.isOpen, (t) => {
     if (!t) {
-      u(null);
+      p(null);
       return;
     }
-    const a = h, r = a?.contains(document.activeElement) ? null : document.activeElement;
-    a?.focus(), N(() => te(r, a));
+    const i = w, n = i?.contains(document.activeElement) ? null : document.activeElement;
+    i?.focus(), U(() => re(n, i));
   }));
-  const F = () => !e.hideHeaderActions && (!!e.onClose || e.withSizeToggle), V = () => {
+  const V = () => !e.hideHeaderActions && (!!e.onClose || e.withSizeToggle), j = () => {
     const t = [];
-    return e.withSizeToggle && t.push(l(H, {
+    return e.withSizeToggle && t.push(l(R, {
       variant: "outlined",
       size: "small",
       get onClick() {
         return e.handleSizeButton;
       },
       get "aria-label"() {
-        return y(() => e.mode === "expanded")() ? e.collapseAriaLabel : y(() => e.mode === "small")() ? e.restoreAriaLabel : e.expandAriaLabel;
+        return _(() => e.mode === "expanded")() ? e.collapseAriaLabel : _(() => e.mode === "small")() ? e.restoreAriaLabel : e.expandAriaLabel;
       },
       get children() {
-        return l(P, {
+        return l(B, {
           get name() {
             return e.mode === "expanded" ? "close_fullscreen" : "open_in_full";
           }
         });
       }
-    })), e.onClose && t.push(l(H, {
+    })), e.onClose && t.push(l(R, {
       variant: "outlined",
       size: "small",
       get onClick() {
@@ -105,14 +108,14 @@ function de(m) {
         return e.closeAriaLabel;
       },
       get children() {
-        return l(P, {
+        return l(B, {
           name: "close"
         });
       }
     })), e.reverseHeaderActions && t.reverse(), t;
-  }, j = () => {
-    if (e.resizable && c() !== null) {
-      const t = `${c()}px`;
+  }, q = () => {
+    if (e.resizable && u() !== null) {
+      const t = `${u()}px`;
       return {
         ...s() ? {
           height: t
@@ -125,8 +128,8 @@ function de(m) {
     return {};
   };
   return (() => {
-    var t = le(), a = re(e.ref, (r) => h = r);
-    return typeof a == "function" && _(a, t), J(t, R(A, {
+    var t = ce(), i = ne(e.ref, (n) => w = n);
+    return typeof i == "function" && L(i, t), Q(t, I(x, {
       get "data-testid"() {
         return e["data-testid"] ?? "sheet";
       },
@@ -136,62 +139,62 @@ function de(m) {
         return e.variant === "modal" || void 0;
       },
       get class() {
-        return C("smwb-sheet", e.class, `smwb-sheet_${e.variant}`, `smwb-${e.placement}`, S.classes(), {
+        return $("smwb-sheet", e.class, `smwb-sheet_${e.variant}`, `smwb-${e.placement}`, C.classes(), {
           "smwb-expanded": e.mode === "expanded",
           "smwb-small": e.mode === "small",
           "smwb-sheet_resizable": e.resizable
         });
       },
       get style() {
-        return ne({
+        return oe({
           "--sizeProp": e.size,
-          ...j()
+          ...q()
         }, e.style);
       }
-    }), !1, !0), d(t, l(w, {
+    }), !1, !0), h(t, l(z, {
       get when() {
         return e.resizable;
       },
       get children() {
-        var r = ae();
-        return r.$$keydown = Y, r.addEventListener("pointercancel", L), r.$$pointerup = L, r.$$pointermove = X, r.$$pointerdown = U, x((i) => {
-          var v = s() ? "horizontal" : "vertical", $ = e.resizeHandleAriaLabel, k = e.minSize, O = Math.round(e.maxSize ?? (s() ? window.innerHeight : window.innerWidth)), E = Math.round(c() ?? p());
-          return v !== i.e && g(r, "aria-orientation", i.e = v), $ !== i.t && g(r, "aria-label", i.t = $), k !== i.a && g(r, "aria-valuemin", i.a = k), O !== i.o && g(r, "aria-valuemax", i.o = O), E !== i.i && g(r, "aria-valuenow", i.i = E), i;
+        var n = ae();
+        return n.$$keydown = F, n.addEventListener("pointercancel", m), n.$$pointerup = m, n.$$pointermove = v, n.$$pointerdown = o, k((a) => {
+          var S = s() ? "horizontal" : "vertical", O = e.resizeHandleAriaLabel, E = e.minSize, D = Math.round(e.maxSize ?? (s() ? window.innerHeight : window.innerWidth)), H = Math.round(u() ?? g());
+          return S !== a.e && b(n, "aria-orientation", a.e = S), O !== a.t && b(n, "aria-label", a.t = O), E !== a.a && b(n, "aria-valuemin", a.a = E), D !== a.o && b(n, "aria-valuemax", a.o = D), H !== a.i && b(n, "aria-valuenow", a.i = H), a;
         }, {
           e: void 0,
           t: void 0,
           a: void 0,
           o: void 0,
           i: void 0
-        }), r;
+        }), n;
       }
-    }), null), d(t, l(w, {
+    }), null), h(t, l(z, {
       get when() {
-        return F();
+        return V();
       },
       get children() {
-        var r = ie();
-        return d(r, V), r;
+        var n = se();
+        return h(n, j), n;
       }
-    }), null), d(t, l(w, {
+    }), null), h(t, l(z, {
       get when() {
-        return y(() => !!e.isOpen)() && e.mode !== "small";
+        return _(() => !!e.isOpen)() && e.mode !== "small";
       },
       get children() {
-        var r = se();
-        return d(r, () => e.children), r;
+        var n = le();
+        return h(n, () => e.children), n;
       }
     }), null), t;
   })();
 }
-function _e(m) {
-  const z = B({
+function _e(c) {
+  const f = K({
     variant: "default",
     placement: "bottom",
     closeOnEsc: !0
-  }, m), [e, A] = M(z, ["isOpen", "onClose", "variant", "children", "placement", "disableOutsideClick", "closeOnEsc", "ref"]), [h, c] = I(null);
-  let u;
-  const s = W({
+  }, c), [e, x] = N(f, ["isOpen", "onClose", "variant", "children", "placement", "disableOutsideClick", "closeOnEsc", "offsetTop", "ref"]), [w, u] = Y(null);
+  let p;
+  const s = X({
     in: () => e.isOpen,
     timeout: {
       enter: 70,
@@ -202,21 +205,26 @@ function _e(m) {
     },
     appear: !0
   });
-  K(() => {
+  W(() => {
     if (!e.isOpen || !e.closeOnEsc || !e.onClose) return;
-    const n = (o) => {
-      o.key === "Escape" && !o.defaultPrevented && ee(u) && e.onClose?.();
+    const r = (o) => {
+      o.key === "Escape" && !o.defaultPrevented && te(p) && e.onClose?.();
     };
-    document.addEventListener("keydown", n), N(() => document.removeEventListener("keydown", n));
+    document.addEventListener("keydown", r), U(() => document.removeEventListener("keydown", r));
   });
-  const S = () => {
-    c((n) => n === "expanded" ? "small" : n === null ? "expanded" : null);
-  }, b = () => {
-    e.onClose?.(), c(null);
-  }, p = () => l(de, R(A, {
-    ref(n) {
+  const C = () => {
+    u((r) => r === "expanded" ? "small" : r === null ? "expanded" : null);
+  }, A = () => {
+    e.onClose?.(), u(null);
+  }, g = () => {
+    const r = e.offsetTop;
+    return r === void 0 ? void 0 : {
+      "--smui-sheet-offset-top": typeof r == "number" ? `${r}px` : r
+    };
+  }, d = () => l(ue, I(x, {
+    ref(r) {
       var o = e.ref;
-      typeof o == "function" ? o(n) : e.ref = n;
+      typeof o == "function" ? o(r) : e.ref = r;
     },
     get isOpen() {
       return e.isOpen;
@@ -224,10 +232,10 @@ function _e(m) {
     get onClose() {
       return e.onClose;
     },
-    handleSizeButton: S,
-    handleClose: b,
+    handleSizeButton: C,
+    handleClose: A,
     get mode() {
-      return h();
+      return w();
     },
     get placement() {
       return e.placement;
@@ -239,34 +247,46 @@ function _e(m) {
       return e.children;
     }
   }));
-  return l(w, {
+  return l(z, {
     get when() {
       return s.mounted();
     },
     get children() {
-      return l(q, {
+      return l(G, {
         get mount() {
-          return G ? void 0 : document.body;
+          return J ? void 0 : document.body;
         },
         get children() {
-          return l(w, {
+          return l(z, {
             get when() {
               return e.variant === "default";
             },
             get fallback() {
               return (() => {
-                var n = T();
-                return _((o) => u = o, n), d(n, l(oe, {
-                  onClickAway: () => !e.disableOutsideClick && b(),
+                var r = M();
+                return L((o) => p = o, r), h(r, l(ie, {
+                  onClickAway: (o) => !e.disableOutsideClick && !de(o, p) && A(),
                   get children() {
-                    return p();
+                    return d();
                   }
-                })), x(() => D(n, C("smwb-sheet__overlay", "smwb-dark", `smwb-${e.placement}`, `smwb-sheet_${e.variant}`, s.classes()))), n;
+                })), k((o) => {
+                  var v = g(), m = $("smwb-sheet__overlay", "smwb-dark", `smwb-${e.placement}`, `smwb-sheet_${e.variant}`, s.classes());
+                  return o.e = P(r, v, o.e), m !== o.t && T(r, o.t = m), o;
+                }, {
+                  e: void 0,
+                  t: void 0
+                }), r;
               })();
             },
             get children() {
-              var n = T();
-              return _((o) => u = o, n), d(n, p), x(() => D(n, C(e.disableOutsideClick ? "smwb-sheet__overlay" : "smwb-sheet__default", s.classes()))), n;
+              var r = M();
+              return L((o) => p = o, r), h(r, d), k((o) => {
+                var v = g(), m = $(e.disableOutsideClick ? "smwb-sheet__overlay" : "smwb-sheet__default", s.classes());
+                return o.e = P(r, v, o.e), m !== o.t && T(r, o.t = m), o;
+              }, {
+                e: void 0,
+                t: void 0
+              }), r;
             }
           });
         }
@@ -274,7 +294,7 @@ function _e(m) {
     }
   });
 }
-Q(["pointerdown", "pointermove", "pointerup", "keydown"]);
+Z(["pointerdown", "pointermove", "pointerup", "keydown"]);
 export {
   _e as Sheet
 };

package/dist/components/layout/sheet/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","sources":["../../../../src/components/layout/sheet/sheet.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, on, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Button } from \"../../inputs/button\";\nimport { Icon } from \"../../base/icon\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { restoreFocus } from \"../../../primitives/restoreFocus\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport interface SheetProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onResize\"> {\n  placement?: \"top\" | \"bottom\" | \"right\" | \"left\";\n  isOpen: boolean;\n  onClose?: (() => void) | undefined;\n  variant?: \"default\" | \"modal\";\n  withSizeToggle?: boolean;\n  /** Hide built-in header actions; onClose still handles Esc and backdrop. */\n  hideHeaderActions?: boolean;\n  reverseHeaderActions?: boolean;\n  /** Accessible name of the header close button (default \"Close sheet\"). */\n  closeAriaLabel?: string;\n  /**\n   * Accessible name of the size toggle while the sheet is at its normal size (default \"Expand sheet\"). The toggle\n   * cycles normal, expanded, collapsed and back, and its name always says what the next press does; the\n   * name changing is how it exposes its state. It shows the `open_in_full` icon, and `close_fullscreen` while expanded.\n   */\n  expandAriaLabel?: string;\n  /** Accessible name of the size toggle while the sheet is expanded (default \"Collapse sheet\"). */\n  collapseAriaLabel?: string;\n  /** Accessible name of the size toggle while the sheet is collapsed to its header (default \"Restore sheet size\"). */\n  restoreAriaLabel?: string;\n  size?: string;\n  disableOutsideClick?: boolean;\n  /** Close the sheet when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Allow drag-to-resize (mobile bottom-sheet style). Off by default. */\n  resizable?: boolean;\n  /** Minimum size in px while resizing (default 80). */\n  minSize?: number;\n  /** Maximum size in px while resizing (default: viewport dimension). */\n  maxSize?: number;\n  /** Step in px for keyboard resizing (default 24). */\n  resizeStep?: number;\n  /** Accessible label for the resize handle. */\n  resizeHandleAriaLabel?: string;\n  /** Called with the new size in px while/after resizing. */\n  onResize?: (size: number) => void;\n  \"aria-label\"?: string;\n  /** Test id of the sheet panel (the dialog); `sheet` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype Mode = \"small\" | \"expanded\" | null;\n\nconst isVerticalAxis = (placement: SheetProps[\"placement\"]): boolean => placement === \"bottom\" || placement === \"top\";\n\ninterface SheetBlockProps extends ParentProps<SheetProps> {\n  mode: Mode;\n  handleSizeButton: () => void;\n  handleClose: () => void;\n}\n\nfunction SheetBlock(props: SheetBlockProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      size: \"60%\",\n      withSizeToggle: true,\n      hideHeaderActions: false,\n      reverseHeaderActions: false,\n      closeAriaLabel: \"Close sheet\",\n      expandAriaLabel: \"Expand sheet\",\n      collapseAriaLabel: \"Collapse sheet\",\n      restoreAriaLabel: \"Restore sheet size\",\n      resizable: false,\n      minSize: 80,\n      resizeStep: 24,\n      resizeHandleAriaLabel: \"Resize sheet\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"isOpen\",\n    \"placement\",\n    \"class\",\n    \"mode\",\n    \"size\",\n    \"variant\",\n    \"onClose\",\n    \"withSizeToggle\",\n    \"hideHeaderActions\",\n    \"reverseHeaderActions\",\n    \"closeAriaLabel\",\n    \"expandAriaLabel\",\n    \"collapseAriaLabel\",\n    \"restoreAriaLabel\",\n    \"resizable\",\n    \"minSize\",\n    \"maxSize\",\n    \"resizeStep\",\n    \"resizeHandleAriaLabel\",\n    \"onResize\",\n    \"style\",\n    \"handleClose\",\n    \"handleSizeButton\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  let rootEl: HTMLDivElement | undefined;\n  const [dragSize, setDragSize] = createSignal<number | null>(null);\n  const vertical = (): boolean => isVerticalAxis(local.placement);\n\n  const inner = createCssTransition({\n    in: () => local.isOpen,\n    timeout: { enter: 120, exit: 120 },\n    classNames: { enterDone: \"smwb-sheet_entered\" },\n    appear: true,\n  });\n\n  const clamp = (px: number): number => {\n    const viewport = vertical() ? window.innerHeight : window.innerWidth;\n    const max = local.maxSize ?? viewport;\n    return Math.max(local.minSize, Math.min(max, px));\n  };\n\n  const currentSizePx = (): number => {\n    const rect = rootEl?.getBoundingClientRect();\n    if (!rect) return local.minSize;\n    return vertical() ? rect.height : rect.width;\n  };\n\n  const applySize = (px: number): void => {\n    const next = clamp(px);\n    setDragSize(next);\n    local.onResize?.(next);\n  };\n\n  let drag: { start: number; size: number } | null = null;\n\n  const onPointerDown = (event: PointerEvent & { currentTarget: HTMLDivElement }): void => {\n    event.preventDefault();\n    drag = { start: vertical() ? event.clientY : event.clientX, size: currentSizePx() };\n    try {\n      event.currentTarget.setPointerCapture?.(event.pointerId);\n    } catch {\n      /* best-effort */\n    }\n  };\n\n  const onPointerMove = (event: PointerEvent): void => {\n    if (!drag) return;\n    const pos = vertical() ? event.clientY : event.clientX;\n    const delta = pos - drag.start;\n    const grow = local.placement === \"bottom\" || local.placement === \"right\" ? -delta : delta;\n    applySize(drag.size + grow);\n  };\n\n  const endDrag = (event: PointerEvent & { currentTarget: HTMLDivElement }): void => {\n    drag = null;\n    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n      event.currentTarget.releasePointerCapture?.(event.pointerId);\n    }\n  };\n\n  const onHandleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    const base = dragSize() ?? currentSizePx();\n    const max = local.maxSize ?? (vertical() ? window.innerHeight : window.innerWidth);\n    const incKey =\n      local.placement === \"bottom\" ? \"ArrowUp\" : local.placement === \"top\" ? \"ArrowDown\" : local.placement === \"left\" ? \"ArrowRight\" : \"ArrowLeft\";\n    const decKey =\n      local.placement === \"bottom\" ? \"ArrowDown\" : local.placement === \"top\" ? \"ArrowUp\" : local.placement === \"left\" ? \"ArrowLeft\" : \"ArrowRight\";\n    if (event.key === incKey) {\n      event.preventDefault();\n      applySize(base + local.resizeStep);\n    } else if (event.key === decKey) {\n      event.preventDefault();\n      applySize(base - local.resizeStep);\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      applySize(local.minSize);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      applySize(max);\n    }\n  };\n\n  // Keyed on `isOpen` alone: root.focus() fires focus handlers synchronously, and Solid runs those\n  // without untrack, so any signal they read would otherwise re-run this effect and steal focus.\n  createEffect(\n    on(\n      () => local.isOpen,\n      (open) => {\n        if (!open) {\n          setDragSize(null);\n          return;\n        }\n        const root = rootEl;\n        // The element that had focus when the sheet opened gets it back when it closes (or unmounts\n        // while open), unless the app has put focus somewhere else by then.\n        const opener = root?.contains(document.activeElement) ? null : document.activeElement;\n        root?.focus();\n        onCleanup(() => restoreFocus(opener, root));\n      },\n    ),\n  );\n\n  const showActions = (): boolean => !local.hideHeaderActions && (!!local.onClose || local.withSizeToggle);\n  const actionNodes = (): JSX.Element[] => {\n    const nodes: JSX.Element[] = [];\n    if (local.withSizeToggle) {\n      nodes.push(\n        <Button\n          variant=\"outlined\"\n          size=\"small\"\n          onClick={local.handleSizeButton}\n          aria-label={\n            local.mode === \"expanded\" ? local.collapseAriaLabel : local.mode === \"small\" ? local.restoreAriaLabel : local.expandAriaLabel\n          }\n        >\n          <Icon name={local.mode === \"expanded\" ? \"close_fullscreen\" : \"open_in_full\"} />\n        </Button>\n      );\n    }\n    if (local.onClose) {\n      nodes.push(\n        <Button variant=\"outlined\" size=\"small\" onClick={local.handleClose} aria-label={local.closeAriaLabel}>\n          <Icon name=\"close\" />\n        </Button>\n      );\n    }\n    if (local.reverseHeaderActions) nodes.reverse();\n    return nodes;\n  };\n\n  const sizeStyle = (): JSX.CSSProperties => {\n    if (local.resizable && dragSize() !== null) {\n      const px = `${dragSize()}px`;\n      return { ...(vertical() ? { height: px } : { width: px }), transition: \"none\" };\n    }\n    return {};\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => (rootEl = el as HTMLDivElement))}\n      data-testid={local[\"data-testid\"] ?? \"sheet\"}\n      tabindex={-1}\n      role=\"dialog\"\n      aria-modal={local.variant === \"modal\" || undefined}\n      class={cn(\"smwb-sheet\", local.class, `smwb-sheet_${local.variant}`, `smwb-${local.placement}`, inner.classes(), {\n        \"smwb-expanded\": local.mode === \"expanded\",\n        \"smwb-small\": local.mode === \"small\",\n        \"smwb-sheet_resizable\": local.resizable,\n      })}\n      style={mergeStyle({ \"--sizeProp\": local.size, ...sizeStyle() }, local.style)}\n    >\n      <Show when={local.resizable}>\n        <div\n          class=\"smwb-sheet__drag-handle\"\n          data-testid=\"sheet-drag-handle\"\n          role=\"separator\"\n          tabindex={0}\n          aria-orientation={vertical() ? \"horizontal\" : \"vertical\"}\n          aria-label={local.resizeHandleAriaLabel}\n          aria-valuemin={local.minSize}\n          aria-valuemax={Math.round(local.maxSize ?? (vertical() ? window.innerHeight : window.innerWidth))}\n          aria-valuenow={Math.round(dragSize() ?? currentSizePx())}\n          onPointerDown={onPointerDown}\n          onPointerMove={onPointerMove}\n          onPointerUp={endDrag}\n          onPointerCancel={endDrag}\n          onKeyDown={onHandleKeyDown}\n        >\n          <span class=\"smwb-sheet__drag-handle-bar\" />\n        </div>\n      </Show>\n      <Show when={showActions()}>\n        <div class=\"smwb-sheet__header\">{actionNodes()}</div>\n      </Show>\n      <Show when={local.isOpen && local.mode !== \"small\"}>\n        <div class=\"smwb-sheet__inner\">{local.children}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport function Sheet(props: ParentProps<SheetProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"default\" as const, placement: \"bottom\" as const, closeOnEsc: true }, props);\n  const [local, rest] = splitProps(merged, [\n    \"isOpen\",\n    \"onClose\",\n    \"variant\",\n    \"children\",\n    \"placement\",\n    \"disableOutsideClick\",\n    \"closeOnEsc\",\n    \"ref\",\n  ]);\n\n  const [mode, setMode] = createSignal<Mode>(null);\n  let wrapperEl: HTMLDivElement | undefined;\n\n  const outer = createCssTransition({\n    in: () => local.isOpen,\n    timeout: { enter: 70, exit: 70 },\n    classNames: { enterDone: \"smwb-entered\" },\n    appear: true,\n  });\n\n  createEffect(() => {\n    if (!local.isOpen || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      // Only the topmost overlay layer reacts to Escape, and not to one handled inside\n      // it, e.g. by a menu closing on it.\n      if (event.key === \"Escape\" && !event.defaultPrevented && isTopOverlayLayer(wrapperEl)) local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  const handleSizeButton = (): void => {\n    setMode((prev) => (prev === \"expanded\" ? \"small\" : prev === null ? \"expanded\" : null));\n  };\n  const handleClose = (): void => {\n    local.onClose?.();\n    setMode(null);\n  };\n\n  const block = (): JSX.Element => (\n    <SheetBlock\n      {...rest}\n      ref={local.ref}\n      isOpen={local.isOpen}\n      onClose={local.onClose}\n      handleSizeButton={handleSizeButton}\n      handleClose={handleClose}\n      mode={mode()}\n      placement={local.placement}\n      variant={local.variant}\n    >\n      {local.children}\n    </SheetBlock>\n  );\n\n  return (\n    <Show when={outer.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <Show\n          when={local.variant === \"default\"}\n          fallback={\n            <div\n              ref={(el) => (wrapperEl = el)}\n              data-smwb-overlay-layer\n              class={cn(\"smwb-sheet__overlay\", \"smwb-dark\", `smwb-${local.placement}`, `smwb-sheet_${local.variant}`, outer.classes())}\n            >\n              <ClickAwayListener onClickAway={() => !local.disableOutsideClick && handleClose()}>\n                {block()}\n              </ClickAwayListener>\n            </div>\n          }\n        >\n          <div\n            ref={(el) => (wrapperEl = el)}\n            data-smwb-overlay-layer\n            class={cn(local.disableOutsideClick ? \"smwb-sheet__overlay\" : \"smwb-sheet__default\", outer.classes())}\n          >\n            {block()}\n          </div>\n        </Show>\n      </Portal>\n    </Show>\n  );\n}\n\nexport default Sheet;\n"],"names":["isVerticalAxis","placement","SheetBlock","props","merged","mergeProps","size","withSizeToggle","hideHeaderActions","reverseHeaderActions","closeAriaLabel","expandAriaLabel","collapseAriaLabel","restoreAriaLabel","resizable","minSize","resizeStep","resizeHandleAriaLabel","local","rest","splitProps","rootEl","dragSize","setDragSize","createSignal","vertical","inner","createCssTransition","in","isOpen","timeout","enter","exit","classNames","enterDone","appear","clamp","px","viewport","window","innerHeight","innerWidth","max","maxSize","Math","min","currentSizePx","rect","getBoundingClientRect","height","width","applySize","next","onResize","drag","onPointerDown","event","preventDefault","start","clientY","clientX","currentTarget","setPointerCapture","pointerId","onPointerMove","delta","grow","endDrag","hasPointerCapture","releasePointerCapture","onHandleKeyDown","base","incKey","decKey","key","createEffect","on","open","root","opener","contains","document","activeElement","focus","onCleanup","restoreFocus","showActions","onClose","actionNodes","nodes","push","_$createComponent","Button","variant","onClick","handleSizeButton","_$memo","mode","children","Icon","name","handleClose","reverse","sizeStyle","transition","_el$","_tmpl$4","_ref$","mergeRefs","ref","el","_$use","_$spread","_$mergeProps","undefined","cn","class","classes","style","mergeStyle","_$insert","Show","when","_el$2","_tmpl$","$$keydown","addEventListener","$$pointerup","$$pointermove","$$pointerdown","_$effect","_p$","_v$","_v$2","_v$3","_v$4","round","_v$5","e","_$setAttribute","t","a","o","i","_el$3","_tmpl$2","_el$4","_tmpl$3","Sheet","closeOnEsc","setMode","wrapperEl","outer","onKeyDown","defaultPrevented","isTopOverlayLayer","removeEventListener","prev","block","r$","_ref$2","mounted","Portal","mount","isServer","body","fallback","_el$6","_tmpl$5","ClickAwayListener","onClickAway","disableOutsideClick","_$className","_el$5","_$delegateEvents"],"mappings":";;;;;;;;;;;;;;AA2DA,MAAMA,KAAiBA,CAACC,MAAgDA,MAAc,YAAYA,MAAc;AAQhH,SAASC,GAAWC,GAAqC;AACvD,QAAMC,IAASC,EACb;AAAA,IACEC,MAAM;AAAA,IACNC,gBAAgB;AAAA,IAChBC,mBAAmB;AAAA,IACnBC,sBAAsB;AAAA,IACtBC,gBAAgB;AAAA,IAChBC,iBAAiB;AAAA,IACjBC,mBAAmB;AAAA,IACnBC,kBAAkB;AAAA,IAClBC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,uBAAuB;AAAA,EAAA,GAEzBd,CACF,GACM,CAACe,GAAOC,CAAI,IAAIC,EAAWhB,GAAQ,CACvC,UACA,aACA,SACA,QACA,QACA,WACA,WACA,kBACA,qBACA,wBACA,kBACA,mBACA,qBACA,oBACA,aACA,WACA,WACA,cACA,yBACA,YACA,SACA,eACA,oBACA,YACA,OACA,aAAa,CACd;AAED,MAAIiB;AACJ,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAA4B,IAAI,GAC1DC,IAAWA,MAAezB,GAAekB,EAAMjB,SAAS,GAExDyB,IAAQC,EAAoB;AAAA,IAChCC,IAAIA,MAAMV,EAAMW;AAAAA,IAChBC,SAAS;AAAA,MAAEC,OAAO;AAAA,MAAKC,MAAM;AAAA,IAAA;AAAA,IAC7BC,YAAY;AAAA,MAAEC,WAAW;AAAA,IAAA;AAAA,IACzBC,QAAQ;AAAA,EAAA,CACT,GAEKC,IAAQA,CAACC,MAAuB;AACpC,UAAMC,IAAWb,EAAAA,IAAac,OAAOC,cAAcD,OAAOE,YACpDC,IAAMxB,EAAMyB,WAAWL;AAC7B,WAAOM,KAAKF,IAAIxB,EAAMH,SAAS6B,KAAKC,IAAIH,GAAKL,CAAE,CAAC;AAAA,EAClD,GAEMS,IAAgBA,MAAc;AAClC,UAAMC,IAAO1B,GAAQ2B,sBAAAA;AACrB,WAAKD,IACEtB,EAAAA,IAAasB,EAAKE,SAASF,EAAKG,QADrBhC,EAAMH;AAAAA,EAE1B,GAEMoC,IAAYA,CAACd,MAAqB;AACtC,UAAMe,IAAOhB,EAAMC,CAAE;AACrBd,IAAAA,EAAY6B,CAAI,GAChBlC,EAAMmC,WAAWD,CAAI;AAAA,EACvB;AAEA,MAAIE,IAA+C;AAEnD,QAAMC,IAAgBA,CAACC,MAAkE;AACvFA,IAAAA,EAAMC,eAAAA,GACNH,IAAO;AAAA,MAAEI,OAAOjC,EAAAA,IAAa+B,EAAMG,UAAUH,EAAMI;AAAAA,MAAStD,MAAMwC,EAAAA;AAAAA,IAAc;AAChF,QAAI;AACFU,MAAAA,EAAMK,cAAcC,oBAAoBN,EAAMO,SAAS;AAAA,IACzD,QAAQ;AAAA,IACN;AAAA,EAEJ,GAEMC,IAAgBA,CAACR,MAA8B;AACnD,QAAI,CAACF,EAAM;AAEX,UAAMW,KADMxC,EAAAA,IAAa+B,EAAMG,UAAUH,EAAMI,WAC3BN,EAAKI,OACnBQ,IAAOhD,EAAMjB,cAAc,YAAYiB,EAAMjB,cAAc,UAAU,CAACgE,IAAQA;AACpFd,IAAAA,EAAUG,EAAKhD,OAAO4D,CAAI;AAAA,EAC5B,GAEMC,IAAUA,CAACX,MAAkE;AACjFF,IAAAA,IAAO,MACHE,EAAMK,cAAcO,oBAAoBZ,EAAMO,SAAS,KACzDP,EAAMK,cAAcQ,wBAAwBb,EAAMO,SAAS;AAAA,EAE/D,GAEMO,IAAoEd,CAAAA,MAAU;AAClF,UAAMe,IAAOjD,EAAAA,KAAcwB,EAAAA,GACrBJ,IAAMxB,EAAMyB,YAAYlB,MAAac,OAAOC,cAAcD,OAAOE,aACjE+B,IACJtD,EAAMjB,cAAc,WAAW,YAAYiB,EAAMjB,cAAc,QAAQ,cAAciB,EAAMjB,cAAc,SAAS,eAAe,aAC7HwE,IACJvD,EAAMjB,cAAc,WAAW,cAAciB,EAAMjB,cAAc,QAAQ,YAAYiB,EAAMjB,cAAc,SAAS,cAAc;AAClI,IAAIuD,EAAMkB,QAAQF,KAChBhB,EAAMC,eAAAA,GACNN,EAAUoB,IAAOrD,EAAMF,UAAU,KACxBwC,EAAMkB,QAAQD,KACvBjB,EAAMC,eAAAA,GACNN,EAAUoB,IAAOrD,EAAMF,UAAU,KACxBwC,EAAMkB,QAAQ,UACvBlB,EAAMC,eAAAA,GACNN,EAAUjC,EAAMH,OAAO,KACdyC,EAAMkB,QAAQ,UACvBlB,EAAMC,eAAAA,GACNN,EAAUT,CAAG;AAAA,EAEjB;AAIAiC,EAAAA,EACEC,EACE,MAAM1D,EAAMW,QACXgD,CAAAA,MAAS;AACR,QAAI,CAACA,GAAM;AACTtD,MAAAA,EAAY,IAAI;AAChB;AAAA,IACF;AACA,UAAMuD,IAAOzD,GAGP0D,IAASD,GAAME,SAASC,SAASC,aAAa,IAAI,OAAOD,SAASC;AACxEJ,IAAAA,GAAMK,MAAAA,GACNC,EAAU,MAAMC,GAAaN,GAAQD,CAAI,CAAC;AAAA,EAC5C,CACF,CACF;AAEA,QAAMQ,IAAcA,MAAe,CAACpE,EAAMV,sBAAsB,CAAC,CAACU,EAAMqE,WAAWrE,EAAMX,iBACnFiF,IAAcA,MAAqB;AACvC,UAAMC,IAAuB,CAAA;AAC7B,WAAIvE,EAAMX,kBACRkF,EAAMC,KAAIC,EACPC,GAAM;AAAA,MACLC,SAAO;AAAA,MACPvF,MAAI;AAAA,MAAA,IACJwF,UAAO;AAAA,eAAE5E,EAAM6E;AAAAA,MAAgB;AAAA,MAAA,IAAA,eAAA;AAAA,eAE7BC,EAAA,MAAA9E,EAAM+E,SAAS,UAAU,EAAA,IAAG/E,EAAMN,oBAAoBoF,QAAA9E,EAAM+E,SAAS,OAAO,MAAG/E,EAAML,mBAAmBK,EAAMP;AAAAA,MAAe;AAAA,MAAA,IAAAuF,WAAA;AAAA,eAAAP,EAG9HQ,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAElF,EAAM+E,SAAS,aAAa,qBAAqB;AAAA,UAAc;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,CAE/E,GAEE/E,EAAMqE,WACRE,EAAMC,KAAIC,EACPC,GAAM;AAAA,MAACC,SAAO;AAAA,MAAYvF,MAAI;AAAA,MAAA,IAASwF,UAAO;AAAA,eAAE5E,EAAMmF;AAAAA,MAAW;AAAA,MAAA,IAAA,eAAA;AAAA,eAAcnF,EAAMR;AAAAA,MAAc;AAAA,MAAA,IAAAwF,WAAA;AAAA,eAAAP,EACjGQ,GAAI;AAAA,UAACC,MAAI;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,CAEd,GAEElF,EAAMT,wBAAsBgF,EAAMa,QAAAA,GAC/Bb;AAAAA,EACT,GAEMc,IAAYA,MAAyB;AACzC,QAAIrF,EAAMJ,aAAaQ,EAAAA,MAAe,MAAM;AAC1C,YAAMe,IAAK,GAAGf,EAAAA,CAAU;AACxB,aAAO;AAAA,QAAE,GAAIG,MAAa;AAAA,UAAEwB,QAAQZ;AAAAA,QAAAA,IAAO;AAAA,UAAEa,OAAOb;AAAAA,QAAAA;AAAAA,QAAOmE,YAAY;AAAA,MAAA;AAAA,IACzE;AACA,WAAO,CAAA;AAAA,EACT;AAEA,UAAA,MAAA;AAAA,QAAAC,IAAAC,GAAAA,GAAAC,IAGSC,GAAU1F,EAAM2F,KAAMC,CAAAA,MAAQzF,IAASyF,CAAqB;AAAC,kBAAAH,KAAA,cAAAI,EAAAJ,GAAAF,CAAA,GAAAO,EAAAP,GAAAQ,EAD9D9F,GAAI;AAAA,MAAA,IAAA,gBAAA;AAAA,eAEKD,EAAM,aAAa,KAAK;AAAA,MAAO;AAAA,MAAA,UAAA;AAAA,MAAA,MAEvC;AAAA,MAAQ,IAAA,eAAA;AAAA,eACDA,EAAM2E,YAAY,WAAWqB;AAAAA,MAAS;AAAA,MAAA,IAAA,QAAA;AAAA,eAC3CC,EAAG,cAAcjG,EAAMkG,OAAO,cAAclG,EAAM2E,OAAO,IAAI,QAAQ3E,EAAMjB,SAAS,IAAIyB,EAAM2F,WAAW;AAAA,UAC9G,iBAAiBnG,EAAM+E,SAAS;AAAA,UAChC,cAAc/E,EAAM+E,SAAS;AAAA,UAC7B,wBAAwB/E,EAAMJ;AAAAA,QAAAA,CAC/B;AAAA,MAAC;AAAA,MAAA,IACFwG,QAAK;AAAA,eAAEC,GAAW;AAAA,UAAE,cAAcrG,EAAMZ;AAAAA,UAAM,GAAGiG,EAAAA;AAAAA,QAAU,GAAKrF,EAAMoG,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAE,EAAAf,GAAAd,EAE3E8B,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAExG,EAAMJ;AAAAA,MAAS;AAAA,MAAA,IAAAoF,WAAA;AAAA,YAAAyB,IAAAC,GAAAA;AAAAD,eAAAA,EAAAE,YAeZvD,GAAeqD,EAAAG,iBAAA,iBADT3D,CAAO,GAAAwD,EAAAI,cADX5D,GAAOwD,EAAAK,gBADLhE,GAAa2D,EAAAM,gBADb1E,GAAa2E,EAAAC,CAAAA,MAAA;AAAA,cAAAC,IALV3G,EAAAA,IAAa,eAAe,YAAU4G,IAC5CnH,EAAMD,uBAAqBqH,IACxBpH,EAAMH,SAAOwH,IACb3F,KAAK4F,MAAMtH,EAAMyB,YAAYlB,EAAAA,IAAac,OAAOC,cAAcD,OAAOE,WAAW,GAACgG,IAClF7F,KAAK4F,MAAMlH,EAAAA,KAAcwB,GAAe;AAACsF,iBAAAA,MAAAD,EAAAO,KAAAC,EAAAhB,GAAA,oBAAAQ,EAAAO,IAAAN,CAAA,GAAAC,MAAAF,EAAAS,KAAAD,EAAAhB,GAAA,cAAAQ,EAAAS,IAAAP,CAAA,GAAAC,MAAAH,EAAAU,KAAAF,EAAAhB,GAAA,iBAAAQ,EAAAU,IAAAP,CAAA,GAAAC,MAAAJ,EAAAW,KAAAH,EAAAhB,GAAA,iBAAAQ,EAAAW,IAAAP,CAAA,GAAAE,MAAAN,EAAAY,KAAAJ,EAAAhB,GAAA,iBAAAQ,EAAAY,IAAAN,CAAA,GAAAN;AAAAA,QAAA,GAAA;AAAA,UAAAO,GAAAxB;AAAAA,UAAA0B,GAAA1B;AAAAA,UAAA2B,GAAA3B;AAAAA,UAAA4B,GAAA5B;AAAAA,UAAA6B,GAAA7B;AAAAA,QAAAA,CAAA,GAAAS;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAH,EAAAf,GAAAd,EAU3D8B,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEpC,EAAAA;AAAAA,MAAa;AAAA,MAAA,IAAAY,WAAA;AAAA,YAAA8C,IAAAC,GAAAA;AAAAzB,eAAAA,EAAAwB,GACUxD,CAAW,GAAAwD;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAxB,EAAAf,GAAAd,EAE7C8B,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE1B,EAAA,MAAA,CAAA,CAAA9E,EAAMW,MAAM,OAAIX,EAAM+E,SAAS;AAAA,MAAO;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAgD,IAAAC,GAAAA;AAAA3B,eAAAA,EAAA0B,GAAA,MAChBhI,EAAMgF,QAAQ,GAAAgD;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAzC;AAAAA,EAAA,GAAA;AAItD;AAEO,SAAS2C,GAAMjJ,GAA6C;AACjE,QAAMC,IAASC,EAAW;AAAA,IAAEwF,SAAS;AAAA,IAAoB5F,WAAW;AAAA,IAAmBoJ,YAAY;AAAA,EAAA,GAAQlJ,CAAK,GAC1G,CAACe,GAAOC,CAAI,IAAIC,EAAWhB,GAAQ,CACvC,UACA,WACA,WACA,YACA,aACA,uBACA,cACA,KAAK,CACN,GAEK,CAAC6F,GAAMqD,CAAO,IAAI9H,EAAmB,IAAI;AAC/C,MAAI+H;AAEJ,QAAMC,IAAQ7H,EAAoB;AAAA,IAChCC,IAAIA,MAAMV,EAAMW;AAAAA,IAChBC,SAAS;AAAA,MAAEC,OAAO;AAAA,MAAIC,MAAM;AAAA,IAAA;AAAA,IAC5BC,YAAY;AAAA,MAAEC,WAAW;AAAA,IAAA;AAAA,IACzBC,QAAQ;AAAA,EAAA,CACT;AAEDwC,EAAAA,EAAa,MAAM;AACjB,QAAI,CAACzD,EAAMW,UAAU,CAACX,EAAMmI,cAAc,CAACnI,EAAMqE,QAAS;AAC1D,UAAMkE,IAAYA,CAACjG,MAA+B;AAGhD,MAAIA,EAAMkB,QAAQ,YAAY,CAAClB,EAAMkG,oBAAoBC,GAAkBJ,CAAS,KAAGrI,EAAMqE,UAAAA;AAAAA,IAC/F;AACAN,aAAS6C,iBAAiB,WAAW2B,CAAS,GAC9CrE,EAAU,MAAMH,SAAS2E,oBAAoB,WAAWH,CAAS,CAAC;AAAA,EACpE,CAAC;AAED,QAAM1D,IAAmBA,MAAY;AACnCuD,IAAAA,EAASO,OAAUA,MAAS,aAAa,UAAUA,MAAS,OAAO,aAAa,IAAK;AAAA,EACvF,GACMxD,IAAcA,MAAY;AAC9BnF,IAAAA,EAAMqE,UAAAA,GACN+D,EAAQ,IAAI;AAAA,EACd,GAEMQ,IAAQA,MAAenE,EAC1BzF,IAAU+G,EACL9F,GAAI;AAAA,IAAA0F,IAAAkD,GAAA;AAAA,UAAAC,IACH9I,EAAM2F;AAAG,aAAAmD,KAAA,aAAAA,EAAAD,CAAA,IAAT7I,EAAM2F,MAAGkD;AAAAA,IAAA;AAAA,IAAA,IACdlI,SAAM;AAAA,aAAEX,EAAMW;AAAAA,IAAM;AAAA,IAAA,IACpB0D,UAAO;AAAA,aAAErE,EAAMqE;AAAAA,IAAO;AAAA,IACtBQ,kBAAAA;AAAAA,IACAM,aAAAA;AAAAA,IAAwB,IACxBJ,OAAI;AAAA,aAAEA,EAAAA;AAAAA,IAAM;AAAA,IAAA,IACZhG,YAAS;AAAA,aAAEiB,EAAMjB;AAAAA,IAAS;AAAA,IAAA,IAC1B4F,UAAO;AAAA,aAAE3E,EAAM2E;AAAAA,IAAO;AAAA,IAAA,IAAAK,WAAA;AAAA,aAErBhF,EAAMgF;AAAAA,IAAQ;AAAA,EAAA,CAAA,CAAA;AAInB,SAAAP,EACG8B,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAE8B,EAAMS,QAAAA;AAAAA,IAAS;AAAA,IAAA,IAAA/D,WAAA;AAAA,aAAAP,EACxBuE,GAAM;AAAA,QAAA,IAACC,QAAK;AAAA,iBAAGC,IAAWlD,SAAYjC,SAASoF;AAAAA,QAAa;AAAA,QAAA,IAAAnE,WAAA;AAAA,iBAAAP,EAC1D8B,GAAI;AAAA,YAAA,IACHC,OAAI;AAAA,qBAAExG,EAAM2E,YAAY;AAAA,YAAS;AAAA,YAAA,IACjCyE,WAAQ;AAAA,sBAAA,MAAA;AAAA,oBAAAC,IAAAC,EAAAA;AAAAzD,uBAAAA,EAEED,CAAAA,MAAQyC,IAAYzC,GAAGyD,CAAA,GAAA/C,EAAA+C,GAAA5E,EAI5B8E,IAAiB;AAAA,kBAACC,aAAaA,MAAM,CAACxJ,EAAMyJ,uBAAuBtE,EAAAA;AAAAA,kBAAa,IAAAH,WAAA;AAAA,2BAC9E4D,EAAAA;AAAAA,kBAAO;AAAA,gBAAA,CAAA,CAAA,GAAA5B,EAAA,MAAA0C,EAAAL,GAHHpD,EAAG,uBAAuB,aAAa,QAAQjG,EAAMjB,SAAS,IAAI,cAAciB,EAAM2E,OAAO,IAAI2D,EAAMnC,QAAAA,CAAS,CAAC,CAAA,GAAAkD;AAAAA,cAAA,GAAA;AAAA,YAAA;AAAA,YAAA,IAAArE,WAAA;AAAA,kBAAA2E,IAAAL,EAAAA;AAAAzD,qBAAAA,EASpHD,CAAAA,MAAQyC,IAAYzC,GAAG+D,CAAA,GAAArD,EAAAqD,GAI5Bf,CAAK,GAAA5B,EAAA,MAAA0C,EAAAC,GAFC1D,EAAGjG,EAAMyJ,sBAAsB,wBAAwB,uBAAuBnB,EAAMnC,QAAAA,CAAS,CAAC,CAAA,GAAAwD;AAAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAQjH;AAEqBC,EAAA,CAAA,eAAA,eAAA,aAAA,SAAA,CAAA;"}
+{"version":3,"file":"sheet.js","sources":["../../../../src/components/layout/sheet/sheet.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, on, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Button } from \"../../inputs/button\";\nimport { Icon } from \"../../base/icon\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { restoreFocus } from \"../../../primitives/restoreFocus\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport interface SheetProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onResize\"> {\n  placement?: \"top\" | \"bottom\" | \"right\" | \"left\";\n  isOpen: boolean;\n  onClose?: (() => void) | undefined;\n  variant?: \"default\" | \"modal\";\n  withSizeToggle?: boolean;\n  /** Hide built-in header actions; onClose still handles Esc and backdrop. */\n  hideHeaderActions?: boolean;\n  reverseHeaderActions?: boolean;\n  /** Accessible name of the header close button (default \"Close sheet\"). */\n  closeAriaLabel?: string;\n  /**\n   * Accessible name of the size toggle while the sheet is at its normal size (default \"Expand sheet\"). The toggle\n   * cycles normal, expanded, collapsed and back, and its name always says what the next press does; the\n   * name changing is how it exposes its state. It shows the `open_in_full` icon, and `close_fullscreen` while expanded.\n   */\n  expandAriaLabel?: string;\n  /** Accessible name of the size toggle while the sheet is expanded (default \"Collapse sheet\"). */\n  collapseAriaLabel?: string;\n  /** Accessible name of the size toggle while the sheet is collapsed to its header (default \"Restore sheet size\"). */\n  restoreAriaLabel?: string;\n  size?: string;\n  /**\n   * Gap between the top edge of the window and the top of the sheet and of its modal scrim (px, or any CSS length),\n   * so a panel can start below a fixed app bar and leave it visible and clickable. It applies to the `top`, `left`\n   * and `right` placements and to the scrim of every placement. Without it the sheet takes the page's\n   * `--smui-sheet-offset-top`, which `AppLayout` sets to the height of its sticky header and which is 0 elsewhere;\n   * `offsetTop={0}` covers the header anyway. A press in the strip above a modal scrim belongs to the page and does\n   * not close the sheet, so a header button can toggle it. The modal sheet keeps `aria-modal`, though that strip can\n   * still be reached by pointer and Tab; for a header that must stay available to assistive technology, use\n   * `variant=\"default\"`.\n   */\n  offsetTop?: number | string;\n  disableOutsideClick?: boolean;\n  /** Close the sheet when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Allow drag-to-resize (mobile bottom-sheet style). Off by default. */\n  resizable?: boolean;\n  /** Minimum size in px while resizing (default 80). */\n  minSize?: number;\n  /** Maximum size in px while resizing (default: viewport dimension). */\n  maxSize?: number;\n  /** Step in px for keyboard resizing (default 24). */\n  resizeStep?: number;\n  /** Accessible label for the resize handle. */\n  resizeHandleAriaLabel?: string;\n  /** Called with the new size in px while/after resizing. */\n  onResize?: (size: number) => void;\n  \"aria-label\"?: string;\n  /** Test id of the sheet panel (the dialog); `sheet` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype Mode = \"small\" | \"expanded\" | null;\n\n/**\n * Whether a press ended above the top edge of the scrim, i.e. in the strip an `offsetTop` leaves uncovered. The page\n * owns that strip (a header button there, say), so it is not \"away\" from a modal sheet: a button that toggles the\n * sheet would otherwise see it close on the release and open again on the click.\n */\nconst landedAboveScrim = (event: MouseEvent | TouchEvent, scrim: HTMLElement | null | undefined): boolean => {\n  const y = \"changedTouches\" in event ? event.changedTouches[0]?.clientY : event.clientY;\n  return scrim != null && y !== undefined && y < scrim.getBoundingClientRect().top;\n};\n\nconst isVerticalAxis = (placement: SheetProps[\"placement\"]): boolean => placement === \"bottom\" || placement === \"top\";\n\ninterface SheetBlockProps extends ParentProps<SheetProps> {\n  mode: Mode;\n  handleSizeButton: () => void;\n  handleClose: () => void;\n}\n\nfunction SheetBlock(props: SheetBlockProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      size: \"60%\",\n      withSizeToggle: true,\n      hideHeaderActions: false,\n      reverseHeaderActions: false,\n      closeAriaLabel: \"Close sheet\",\n      expandAriaLabel: \"Expand sheet\",\n      collapseAriaLabel: \"Collapse sheet\",\n      restoreAriaLabel: \"Restore sheet size\",\n      resizable: false,\n      minSize: 80,\n      resizeStep: 24,\n      resizeHandleAriaLabel: \"Resize sheet\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"isOpen\",\n    \"placement\",\n    \"class\",\n    \"mode\",\n    \"size\",\n    \"variant\",\n    \"onClose\",\n    \"withSizeToggle\",\n    \"hideHeaderActions\",\n    \"reverseHeaderActions\",\n    \"closeAriaLabel\",\n    \"expandAriaLabel\",\n    \"collapseAriaLabel\",\n    \"restoreAriaLabel\",\n    \"resizable\",\n    \"minSize\",\n    \"maxSize\",\n    \"resizeStep\",\n    \"resizeHandleAriaLabel\",\n    \"onResize\",\n    \"style\",\n    \"handleClose\",\n    \"handleSizeButton\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  let rootEl: HTMLDivElement | undefined;\n  const [dragSize, setDragSize] = createSignal<number | null>(null);\n  const vertical = (): boolean => isVerticalAxis(local.placement);\n\n  const inner = createCssTransition({\n    in: () => local.isOpen,\n    timeout: { enter: 120, exit: 120 },\n    classNames: { enterDone: \"smwb-sheet_entered\" },\n    appear: true,\n  });\n\n  const clamp = (px: number): number => {\n    const viewport = vertical() ? window.innerHeight : window.innerWidth;\n    const max = local.maxSize ?? viewport;\n    return Math.max(local.minSize, Math.min(max, px));\n  };\n\n  const currentSizePx = (): number => {\n    const rect = rootEl?.getBoundingClientRect();\n    if (!rect) return local.minSize;\n    return vertical() ? rect.height : rect.width;\n  };\n\n  const applySize = (px: number): void => {\n    const next = clamp(px);\n    setDragSize(next);\n    local.onResize?.(next);\n  };\n\n  let drag: { start: number; size: number } | null = null;\n\n  const onPointerDown = (event: PointerEvent & { currentTarget: HTMLDivElement }): void => {\n    event.preventDefault();\n    drag = { start: vertical() ? event.clientY : event.clientX, size: currentSizePx() };\n    try {\n      event.currentTarget.setPointerCapture?.(event.pointerId);\n    } catch {\n      /* best-effort */\n    }\n  };\n\n  const onPointerMove = (event: PointerEvent): void => {\n    if (!drag) return;\n    const pos = vertical() ? event.clientY : event.clientX;\n    const delta = pos - drag.start;\n    const grow = local.placement === \"bottom\" || local.placement === \"right\" ? -delta : delta;\n    applySize(drag.size + grow);\n  };\n\n  const endDrag = (event: PointerEvent & { currentTarget: HTMLDivElement }): void => {\n    drag = null;\n    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n      event.currentTarget.releasePointerCapture?.(event.pointerId);\n    }\n  };\n\n  const onHandleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    const base = dragSize() ?? currentSizePx();\n    const max = local.maxSize ?? (vertical() ? window.innerHeight : window.innerWidth);\n    const incKey =\n      local.placement === \"bottom\" ? \"ArrowUp\" : local.placement === \"top\" ? \"ArrowDown\" : local.placement === \"left\" ? \"ArrowRight\" : \"ArrowLeft\";\n    const decKey =\n      local.placement === \"bottom\" ? \"ArrowDown\" : local.placement === \"top\" ? \"ArrowUp\" : local.placement === \"left\" ? \"ArrowLeft\" : \"ArrowRight\";\n    if (event.key === incKey) {\n      event.preventDefault();\n      applySize(base + local.resizeStep);\n    } else if (event.key === decKey) {\n      event.preventDefault();\n      applySize(base - local.resizeStep);\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      applySize(local.minSize);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      applySize(max);\n    }\n  };\n\n  // Keyed on `isOpen` alone: root.focus() fires focus handlers synchronously, and Solid runs those\n  // without untrack, so any signal they read would otherwise re-run this effect and steal focus.\n  createEffect(\n    on(\n      () => local.isOpen,\n      (open) => {\n        if (!open) {\n          setDragSize(null);\n          return;\n        }\n        const root = rootEl;\n        // The element that had focus when the sheet opened gets it back when it closes (or unmounts\n        // while open), unless the app has put focus somewhere else by then.\n        const opener = root?.contains(document.activeElement) ? null : document.activeElement;\n        root?.focus();\n        onCleanup(() => restoreFocus(opener, root));\n      },\n    ),\n  );\n\n  const showActions = (): boolean => !local.hideHeaderActions && (!!local.onClose || local.withSizeToggle);\n  const actionNodes = (): JSX.Element[] => {\n    const nodes: JSX.Element[] = [];\n    if (local.withSizeToggle) {\n      nodes.push(\n        <Button\n          variant=\"outlined\"\n          size=\"small\"\n          onClick={local.handleSizeButton}\n          aria-label={\n            local.mode === \"expanded\" ? local.collapseAriaLabel : local.mode === \"small\" ? local.restoreAriaLabel : local.expandAriaLabel\n          }\n        >\n          <Icon name={local.mode === \"expanded\" ? \"close_fullscreen\" : \"open_in_full\"} />\n        </Button>\n      );\n    }\n    if (local.onClose) {\n      nodes.push(\n        <Button variant=\"outlined\" size=\"small\" onClick={local.handleClose} aria-label={local.closeAriaLabel}>\n          <Icon name=\"close\" />\n        </Button>\n      );\n    }\n    if (local.reverseHeaderActions) nodes.reverse();\n    return nodes;\n  };\n\n  const sizeStyle = (): JSX.CSSProperties => {\n    if (local.resizable && dragSize() !== null) {\n      const px = `${dragSize()}px`;\n      return { ...(vertical() ? { height: px } : { width: px }), transition: \"none\" };\n    }\n    return {};\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => (rootEl = el as HTMLDivElement))}\n      data-testid={local[\"data-testid\"] ?? \"sheet\"}\n      tabindex={-1}\n      role=\"dialog\"\n      aria-modal={local.variant === \"modal\" || undefined}\n      class={cn(\"smwb-sheet\", local.class, `smwb-sheet_${local.variant}`, `smwb-${local.placement}`, inner.classes(), {\n        \"smwb-expanded\": local.mode === \"expanded\",\n        \"smwb-small\": local.mode === \"small\",\n        \"smwb-sheet_resizable\": local.resizable,\n      })}\n      style={mergeStyle({ \"--sizeProp\": local.size, ...sizeStyle() }, local.style)}\n    >\n      <Show when={local.resizable}>\n        <div\n          class=\"smwb-sheet__drag-handle\"\n          data-testid=\"sheet-drag-handle\"\n          role=\"separator\"\n          tabindex={0}\n          aria-orientation={vertical() ? \"horizontal\" : \"vertical\"}\n          aria-label={local.resizeHandleAriaLabel}\n          aria-valuemin={local.minSize}\n          aria-valuemax={Math.round(local.maxSize ?? (vertical() ? window.innerHeight : window.innerWidth))}\n          aria-valuenow={Math.round(dragSize() ?? currentSizePx())}\n          onPointerDown={onPointerDown}\n          onPointerMove={onPointerMove}\n          onPointerUp={endDrag}\n          onPointerCancel={endDrag}\n          onKeyDown={onHandleKeyDown}\n        >\n          <span class=\"smwb-sheet__drag-handle-bar\" />\n        </div>\n      </Show>\n      <Show when={showActions()}>\n        <div class=\"smwb-sheet__header\">{actionNodes()}</div>\n      </Show>\n      <Show when={local.isOpen && local.mode !== \"small\"}>\n        <div class=\"smwb-sheet__inner\">{local.children}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport function Sheet(props: ParentProps<SheetProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"default\" as const, placement: \"bottom\" as const, closeOnEsc: true }, props);\n  const [local, rest] = splitProps(merged, [\n    \"isOpen\",\n    \"onClose\",\n    \"variant\",\n    \"children\",\n    \"placement\",\n    \"disableOutsideClick\",\n    \"closeOnEsc\",\n    \"offsetTop\",\n    \"ref\",\n  ]);\n\n  const [mode, setMode] = createSignal<Mode>(null);\n  let wrapperEl: HTMLDivElement | undefined;\n\n  const outer = createCssTransition({\n    in: () => local.isOpen,\n    timeout: { enter: 70, exit: 70 },\n    classNames: { enterDone: \"smwb-entered\" },\n    appear: true,\n  });\n\n  createEffect(() => {\n    if (!local.isOpen || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      // Only the topmost overlay layer reacts to Escape, and not to one handled inside\n      // it, e.g. by a menu closing on it.\n      if (event.key === \"Escape\" && !event.defaultPrevented && isTopOverlayLayer(wrapperEl)) local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  const handleSizeButton = (): void => {\n    setMode((prev) => (prev === \"expanded\" ? \"small\" : prev === null ? \"expanded\" : null));\n  };\n  const handleClose = (): void => {\n    local.onClose?.();\n    setMode(null);\n  };\n\n  // The variable goes on the wrapper, so the panel and the scrim both inherit it. Left off when not given: an\n  // undefined style key would print `style=\"\"` on the server.\n  const wrapperStyle = (): JSX.CSSProperties | undefined => {\n    const offset = local.offsetTop;\n    return offset === undefined ? undefined : { \"--smui-sheet-offset-top\": typeof offset === \"number\" ? `${offset}px` : offset };\n  };\n\n  const block = (): JSX.Element => (\n    <SheetBlock\n      {...rest}\n      ref={local.ref}\n      isOpen={local.isOpen}\n      onClose={local.onClose}\n      handleSizeButton={handleSizeButton}\n      handleClose={handleClose}\n      mode={mode()}\n      placement={local.placement}\n      variant={local.variant}\n    >\n      {local.children}\n    </SheetBlock>\n  );\n\n  return (\n    <Show when={outer.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <Show\n          when={local.variant === \"default\"}\n          fallback={\n            <div\n              ref={(el) => (wrapperEl = el)}\n              data-smwb-overlay-layer\n              style={wrapperStyle()}\n              class={cn(\"smwb-sheet__overlay\", \"smwb-dark\", `smwb-${local.placement}`, `smwb-sheet_${local.variant}`, outer.classes())}\n            >\n              <ClickAwayListener\n                onClickAway={(event) => !local.disableOutsideClick && !landedAboveScrim(event, wrapperEl) && handleClose()}\n              >\n                {block()}\n              </ClickAwayListener>\n            </div>\n          }\n        >\n          <div\n            ref={(el) => (wrapperEl = el)}\n            data-smwb-overlay-layer\n            style={wrapperStyle()}\n            class={cn(local.disableOutsideClick ? \"smwb-sheet__overlay\" : \"smwb-sheet__default\", outer.classes())}\n          >\n            {block()}\n          </div>\n        </Show>\n      </Portal>\n    </Show>\n  );\n}\n\nexport default Sheet;\n"],"names":["landedAboveScrim","event","scrim","y","changedTouches","clientY","undefined","getBoundingClientRect","top","isVerticalAxis","placement","SheetBlock","props","merged","mergeProps","size","withSizeToggle","hideHeaderActions","reverseHeaderActions","closeAriaLabel","expandAriaLabel","collapseAriaLabel","restoreAriaLabel","resizable","minSize","resizeStep","resizeHandleAriaLabel","local","rest","splitProps","rootEl","dragSize","setDragSize","createSignal","vertical","inner","createCssTransition","in","isOpen","timeout","enter","exit","classNames","enterDone","appear","clamp","px","viewport","window","innerHeight","innerWidth","max","maxSize","Math","min","currentSizePx","rect","height","width","applySize","next","onResize","drag","onPointerDown","preventDefault","start","clientX","currentTarget","setPointerCapture","pointerId","onPointerMove","delta","grow","endDrag","hasPointerCapture","releasePointerCapture","onHandleKeyDown","base","incKey","decKey","key","createEffect","on","open","root","opener","contains","document","activeElement","focus","onCleanup","restoreFocus","showActions","onClose","actionNodes","nodes","push","_$createComponent","Button","variant","onClick","handleSizeButton","_$memo","mode","children","Icon","name","handleClose","reverse","sizeStyle","transition","_el$","_tmpl$4","_ref$","mergeRefs","ref","el","_$use","_$spread","_$mergeProps","cn","class","classes","style","mergeStyle","_$insert","Show","when","_el$2","_tmpl$","$$keydown","addEventListener","$$pointerup","$$pointermove","$$pointerdown","_$effect","_p$","_v$","_v$2","_v$3","_v$4","round","_v$5","e","_$setAttribute","t","a","o","i","_el$3","_tmpl$2","_el$4","_tmpl$3","Sheet","closeOnEsc","setMode","wrapperEl","outer","onKeyDown","defaultPrevented","isTopOverlayLayer","removeEventListener","prev","wrapperStyle","offset","offsetTop","block","r$","_ref$2","mounted","Portal","mount","isServer","body","fallback","_el$6","_tmpl$5","ClickAwayListener","onClickAway","disableOutsideClick","_v$8","_v$9","_$style","_$className","_el$5","_v$6","_v$7","_$delegateEvents"],"mappings":"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"}

package/dist/components/layout/tabGroups/index.d.ts

@@ -1,4 +1,4 @@
 export { TabGroups, default } from "./tabGroups";
-export type { TabGroupsProps, TabGroupsTab } from "./tabGroups";
+export type { TabGroupsProps, TabGroupsStripGroup, TabGroupsTab } from "./tabGroups";
 export * as tabGroupsLayout from "./tabGroupsLayout";
 export type { TabGroupsChange, TabGroupsDropZone, TabGroupsEdge, TabGroupsGroup, TabGroupsLabels, TabGroupsLayout, TabGroupsMoveTarget, TabGroupsNode, TabGroupsSplit, } from "./tabGroupsLayout";

package/dist/components/layout/tabGroups/tabGroups.d.ts

@@ -11,7 +11,8 @@ export interface TabGroupsTab {
     label: JSX.Element;
     /**
      * Plain text for the announcements and for a screen reader that cannot read the label (markup,
-     * an icon). `label` when it is a string, else the tab id.
+     * an icon). `label` when it is a string, else the tab id. With `fit` it is also the tab's `title`, the
+     * tooltip of a label that is not a string; a string label is its own tooltip, so leave `title` out for it.
      */
     title?: string | undefined;
     /** An icon drawn before the label. */
@@ -28,6 +29,18 @@ export interface TabGroupsTab {
     /** Greys the tab out: it cannot be selected, moved or dragged. */
     disabled?: boolean | undefined;
 }
+/**
+ * What `stripActions` is asked about: the group whose tab row the content goes into. The fields
+ * are getters that always give the current value (see `stripActions`).
+ */
+export interface TabGroupsStripGroup {
+    /** The group's place among the groups in reading order, from 0. */
+    readonly index: number;
+    /** How many groups there are. */
+    readonly count: number;
+    /** Whether this is the group in use, the one the user works in (the header marked when there are two groups or more). */
+    readonly active: boolean;
+}
 export interface TabGroupsProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "id"> {
     /**
      * The arrangement to draw: the split tree, every group's tabs and the selected one. Controlled
@@ -64,8 +77,38 @@ export interface TabGroupsProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>,
     keyboardStep?: number | undefined;
     /** Draw each group's actions button and menu; true by default. */
     groupActions?: boolean | undefined;
+    /**
+     * Content at the end of a group's tab row, before the group's actions button: buttons that act on
+     * the group ("new terminal", "split"). Called for every group with `{ index, count, active }`:
+     * its place from 0, how many groups there are and whether it is the one in use, so the app can
+     * return content for some groups only; `null`, `undefined`, `false` or an empty fragment draws
+     * nothing, not even a wrapper. The tabs scroll beside it while the content stays in view; in a
+     * header too narrow for both, the tabs give way first, then the content is clipped at its end, and
+     * the group's actions button stays. It comes after the tabs in the Tab order, and the tab row's
+     * arrow keys neither enter it nor read the keys pressed in it.
+     *
+     * The function runs once per header, and the group's fields are getters, read like props: read
+     * in the content (`<Show when={group.active}>`, `{group.count}`) they update it in place, so its
+     * nodes, their state and the focus stay; read in the function's body (`group.active ? … : null`)
+     * they make it run again, with new content, when that value changes. Read the layout itself in
+     * the handlers.
+     *
+     * A slot control that has the focus when a change takes it out of the document (a split or a
+     * close from the slot, the slot going to the group in use) hands the focus on: to the control at
+     * the same place in its group's slot, else in the slot of the group in use (the last one when
+     * there are fewer), else to that group's selected tab.
+     */
+    stripActions?: ((group: TabGroupsStripGroup) => JSX.Element) | undefined;
     /** Compact tab rows, as `Tabs`' `dense`; false by default. */
     dense?: boolean | undefined;
+    /**
+     * Content-width tabs, as `Tabs`' `fit`; false by default. Each tab is as wide as its marker,
+     * label and close button, between `--smui-tabFitMinWidth` and `--smui-tabFitMaxWidth`, and what is
+     * left of the header stays empty: `stripActions` and the group's actions button keep the end of
+     * it. A long label is cut with an ellipsis and shows its text as a tooltip: a string label is its
+     * own, and the tab's `title` is the tooltip of a label that is not a string.
+     */
+    fit?: boolean | undefined;
     /** The texts of the component: its menus, labels and announcements. English by default. */
     labels?: Partial<TabGroupsLabels> | undefined;
     /** Base of the generated ids and the id of the root element. Generated by default. */