@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/headless/source/components/layout/sectionHeader/sectionHeader.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/layout/sectionHeader/sectionHeader.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { Tooltip } from \"../../feedBack/tooltip\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface SectionHeaderProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  /** The section's name. */\n  title: JSX.Element;\n  /** Heading level of the title: 2 by default. */\n  level?: 2 | 3 | 4 | 5 | 6;\n  /** How many items the section holds, beside the title. Nothing is shown for null. */\n  count?: number | string | null;\n  /**\n   * How to read the section, behind a \"?\" icon: shown on hover and on keyboard\n   * focus, and the icon's accessible name. Text only — the tooltip renders in\n   * the browser.\n   */\n  help?: string;\n  /** The \"?\" icon's accessible name, e.g. \"Explanation: …\"; the help text by default. */\n  helpLabel?: string;\n  /** Id of the heading, for anchors and aria-labelledby. */\n  titleId?: string;\n  /** A line under the title. */\n  subtitle?: JSX.Element;\n  ref?: Ref<HTMLElement>;\n}\n\n/** The \"?\" icon with its tooltip, open on hover and on keyboard focus. */\nfunction HelpHint(props: { text: string; label?: string | undefined }): JSX.Element {\n  const [open, setOpen] = createSignal(false);\n  return (\n    <Tooltip\n      class=\"smwb-section-header__tooltip\"\n      message={props.text}\n      trigger=\"manual\"\n      open={open()}\n      placement=\"top\"\n      offset={{ offsetY: 6 }}\n    >\n      <span\n        class=\"smwb-section-header__help\"\n        role=\"img\"\n        aria-label={props.label ?? props.text}\n        tabindex=\"0\"\n        onPointerEnter={() => setOpen(true)}\n        onPointerLeave={() => setOpen(false)}\n        onFocus={() => setOpen(true)}\n        onBlur={() => setOpen(false)}\n        onKeyDown={(event) => {\n          if (event.key === \"Escape\") setOpen(false);\n        }}\n      >\n        <Icon name=\"help\" size={16} />\n      </span>\n    </Tooltip>\n  );\n}\n\n/**\n * A section's heading row: the title with a count and a help hint, a subtitle\n * under them, and the section's actions (the children) at the end. On a narrow\n * screen the actions wrap under the title.\n */\nexport function SectionHeader(props: ParentProps<SectionHeaderProps>): JSX.Element {\n  const merged = mergeProps({ level: 2 as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"title\",\n    \"level\",\n    \"count\",\n    \"help\",\n    \"helpLabel\",\n    \"titleId\",\n    \"subtitle\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  // Read the slots once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const subtitle = children(() => local.subtitle);\n  const actions = children(() => local.children);\n\n  return (\n    <header\n      data-testid=\"section-header\"\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-section-header\", `smwb-section-header_level-${local.level}`, local.class)}\n    >\n      <div class=\"smwb-section-header__titles\">\n        <div class=\"smwb-section-header__title-line\">\n          <Dynamic component={`h${local.level}`} id={local.titleId} class=\"smwb-section-header__title\">\n            {local.title}\n          </Dynamic>\n          <Show when={local.count !== undefined && local.count !== null}>\n            <span class=\"smwb-section-header__count\">{local.count}</span>\n          </Show>\n          <Show when={local.help}>{(text) => <HelpHint text={text()} label={local.helpLabel} />}</Show>\n        </div>\n        <Show when={subtitle()}>\n          <div class=\"smwb-section-header__subtitle\">{subtitle()}</div>\n        </Show>\n      </div>\n      <Show when={actions()}>\n        <div class=\"smwb-section-header__actions\">{actions()}</div>\n      </Show>\n    </header>\n  );\n}\n\nexport default SectionHeader;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,cAAc,YAAY,kBAAkB;AACjG,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,iBAA2B;AAyBpC,SAAS,SAAS,OAAkE;AAClF,QAAM,CAAC,MAAM,OAAO,IAAI,aAAa,KAAK;AAC1C,SACE,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS,MAAM;AAAA,IACf,QAAQ;AAAA,IACR,MAAM,KAAK;AAAA,IACX,UAAU;AAAA,IACV,QAAQ,EAAE,SAAS,EAAE;AAAA,GACtB;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,YAAY,MAAM,SAAS,MAAM;AAAA,IACjC,SAAS;AAAA,IACT,gBAAgB,MAAM,QAAQ,IAAI;AAAA,IAClC,gBAAgB,MAAM,QAAQ,KAAK;AAAA,IACnC,SAAS,MAAM,QAAQ,IAAI;AAAA,IAC3B,QAAQ,MAAM,QAAQ,KAAK;AAAA,IAC3B,WAAW,CAAC,UAAU;AACpB,UAAI,MAAM,QAAQ,SAAU,SAAQ,KAAK;AAAA,IAC3C;AAAA,GACD;AAAA,QACC,CAAC,KAAK,KAAK,OAAO,MAAM,IAAI,EAAE;AAAA,MAChC,EAdC,KAcM;AAAA,IACT,EAvBC;AAyBL;AAOO,SAAS,cAAc,OAAqD;AACjF,QAAM,SAAS,WAAW,EAAE,OAAO,EAAW,GAAG,KAAK;AACtD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,WAAW,SAAS,MAAM,MAAM,QAAQ;AAC9C,QAAM,UAAU,SAAS,MAAM,MAAM,QAAQ;AAE7C,SACE,CAAC;AAAA,IACC,YAAY;AAAA,QACR;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,uBAAuB,6BAA6B,MAAM,KAAK,IAAI,MAAM,KAAK;AAAA,GACzF;AAAA,MACC,CAAC,IAAI,MAAM,8BAA8B;AAAA,QACvC,CAAC,IAAI,MAAM,kCAAkC;AAAA,UAC3C,CAAC,QAAQ,WAAW,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,SAAS,MAAM,6BAA6B;AAAA,aAC1F,MAAM,MAAM;AAAA,UACf,EAFC,QAES;AAAA,UACV,CAAC,KAAK,MAAM,MAAM,UAAU,UAAa,MAAM,UAAU,MAAM;AAAA,YAC7D,CAAC,KAAK,MAAM,8BAA8B,MAAM,MAAM,EAArD,KAA4D;AAAA,UAC/D,EAFC,KAEM;AAAA,UACP,CAAC,KAAK,MAAM,MAAM,OAAO,CAAC,SAAS,CAAC,SAAS,MAAM,KAAK,GAAG,OAAO,MAAM,WAAW,GAAG,EAArF,KAA4F;AAAA,QAC/F,EARC,IAQK;AAAA,QACN,CAAC,KAAK,MAAM,SAAS,GAAG;AAAA,UACtB,CAAC,IAAI,MAAM,iCAAiC,SAAS,EAAE,EAAtD,IAA4D;AAAA,QAC/D,EAFC,KAEM;AAAA,MACT,EAbC,IAaK;AAAA,MACN,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,QACrB,CAAC,IAAI,MAAM,gCAAgC,QAAQ,EAAE,EAApD,IAA0D;AAAA,MAC7D,EAFC,KAEM;AAAA,IACT,EAvBC;AAyBL;AAEA,IAAO,wBAAQ;","names":[],"file":"sectionHeader.jsx"}
+{"version":3,"sources":["../../../../../../src/components/layout/sectionHeader/sectionHeader.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { Tooltip } from \"../../feedBack/tooltip\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { createDismissOnEscape } from \"../../../primitives/createDismissOnEscape\";\n\nexport interface SectionHeaderProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  /** The section's name. */\n  title: JSX.Element;\n  /** Heading level of the title: 2 by default. */\n  level?: 2 | 3 | 4 | 5 | 6;\n  /** How many items the section holds, beside the title. Nothing is shown for null. */\n  count?: number | string | null;\n  /**\n   * How to read the section, behind a \"?\" icon: shown on hover and on keyboard\n   * focus, and the icon's accessible name. Text only — the tooltip renders in\n   * the browser.\n   */\n  help?: string;\n  /** The \"?\" icon's accessible name, e.g. \"Explanation: …\"; the help text by default. */\n  helpLabel?: string;\n  /** Id of the heading, for anchors and aria-labelledby. */\n  titleId?: string;\n  /** A line under the title. */\n  subtitle?: JSX.Element;\n  /** Test id of the root `<header>`; `section-header` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\n/** The \"?\" icon with its tooltip, open on hover and on keyboard focus. */\nfunction HelpHint(props: { text: string; label?: string | undefined }): JSX.Element {\n  const [open, setOpen] = createSignal(false);\n  // Escape hides the tooltip wherever focus is, shown by hover or by focus (WCAG 1.4.13),\n  // and is marked as handled, so a window, panel, Modal or Sheet around the hint stays\n  // open; with the tooltip hidden, the key is theirs.\n  createDismissOnEscape(open, () => setOpen(false));\n  return (\n    <Tooltip\n      class=\"smwb-section-header__tooltip\"\n      message={props.text}\n      trigger=\"manual\"\n      open={open()}\n      placement=\"top\"\n      offset={{ offsetY: 6 }}\n    >\n      <span\n        class=\"smwb-section-header__help\"\n        role=\"img\"\n        aria-label={props.label ?? props.text}\n        tabindex=\"0\"\n        onPointerEnter={() => setOpen(true)}\n        onPointerLeave={() => setOpen(false)}\n        onFocus={() => setOpen(true)}\n        onBlur={() => setOpen(false)}\n      >\n        <Icon name=\"help\" size={16} />\n      </span>\n    </Tooltip>\n  );\n}\n\n/**\n * A section's heading row: the title with a count and a help hint, a subtitle\n * under them, and the section's actions (the children) at the end. On a narrow\n * screen the actions wrap under the title.\n */\nexport function SectionHeader(props: ParentProps<SectionHeaderProps>): JSX.Element {\n  const merged = mergeProps({ level: 2 as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"title\",\n    \"level\",\n    \"count\",\n    \"help\",\n    \"helpLabel\",\n    \"titleId\",\n    \"subtitle\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read the slots once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const subtitle = children(() => local.subtitle);\n  const actions = children(() => local.children);\n\n  return (\n    <header\n      data-testid={local[\"data-testid\"] ?? \"section-header\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-section-header\", `smwb-section-header_level-${local.level}`, local.class)}\n    >\n      <div class=\"smwb-section-header__titles\">\n        <div class=\"smwb-section-header__title-line\">\n          <Dynamic component={`h${local.level}`} id={local.titleId} class=\"smwb-section-header__title\">\n            {local.title}\n          </Dynamic>\n          <Show when={local.count !== undefined && local.count !== null}>\n            <span class=\"smwb-section-header__count\">{local.count}</span>\n          </Show>\n          <Show when={local.help}>{(text) => <HelpHint text={text()} label={local.helpLabel} />}</Show>\n        </div>\n        <Show when={subtitle()}>\n          <div class=\"smwb-section-header__subtitle\">{subtitle()}</div>\n        </Show>\n      </div>\n      <Show when={actions()}>\n        <div class=\"smwb-section-header__actions\">{actions()}</div>\n      </Show>\n    </header>\n  );\n}\n\nexport default SectionHeader;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,cAAc,YAAY,kBAAkB;AACjG,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,iBAA2B;AACpC,SAAS,6BAA6B;AA2BtC,SAAS,SAAS,OAAkE;AAClF,QAAM,CAAC,MAAM,OAAO,IAAI,aAAa,KAAK;AAI1C,wBAAsB,MAAM,MAAM,QAAQ,KAAK,CAAC;AAChD,SACE,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS,MAAM;AAAA,IACf,QAAQ;AAAA,IACR,MAAM,KAAK;AAAA,IACX,UAAU;AAAA,IACV,QAAQ,EAAE,SAAS,EAAE;AAAA,GACtB;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,YAAY,MAAM,SAAS,MAAM;AAAA,IACjC,SAAS;AAAA,IACT,gBAAgB,MAAM,QAAQ,IAAI;AAAA,IAClC,gBAAgB,MAAM,QAAQ,KAAK;AAAA,IACnC,SAAS,MAAM,QAAQ,IAAI;AAAA,IAC3B,QAAQ,MAAM,QAAQ,KAAK;AAAA,GAC5B;AAAA,QACC,CAAC,KAAK,KAAK,OAAO,MAAM,IAAI,EAAE;AAAA,MAChC,EAXC,KAWM;AAAA,IACT,EApBC;AAsBL;AAOO,SAAS,cAAc,OAAqD;AACjF,QAAM,SAAS,WAAW,EAAE,OAAO,EAAW,GAAG,KAAK;AACtD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,WAAW,SAAS,MAAM,MAAM,QAAQ;AAC9C,QAAM,UAAU,SAAS,MAAM,MAAM,QAAQ;AAE7C,SACE,CAAC;AAAA,IACC,aAAa,MAAM,aAAa,KAAK;AAAA,QACjC;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,uBAAuB,6BAA6B,MAAM,KAAK,IAAI,MAAM,KAAK;AAAA,GACzF;AAAA,MACC,CAAC,IAAI,MAAM,8BAA8B;AAAA,QACvC,CAAC,IAAI,MAAM,kCAAkC;AAAA,UAC3C,CAAC,QAAQ,WAAW,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,SAAS,MAAM,6BAA6B;AAAA,aAC1F,MAAM,MAAM;AAAA,UACf,EAFC,QAES;AAAA,UACV,CAAC,KAAK,MAAM,MAAM,UAAU,UAAa,MAAM,UAAU,MAAM;AAAA,YAC7D,CAAC,KAAK,MAAM,8BAA8B,MAAM,MAAM,EAArD,KAA4D;AAAA,UAC/D,EAFC,KAEM;AAAA,UACP,CAAC,KAAK,MAAM,MAAM,OAAO,CAAC,SAAS,CAAC,SAAS,MAAM,KAAK,GAAG,OAAO,MAAM,WAAW,GAAG,EAArF,KAA4F;AAAA,QAC/F,EARC,IAQK;AAAA,QACN,CAAC,KAAK,MAAM,SAAS,GAAG;AAAA,UACtB,CAAC,IAAI,MAAM,iCAAiC,SAAS,EAAE,EAAtD,IAA4D;AAAA,QAC/D,EAFC,KAEM;AAAA,MACT,EAbC,IAaK;AAAA,MACN,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,QACrB,CAAC,IAAI,MAAM,gCAAgC,QAAQ,EAAE,EAApD,IAA0D;AAAA,MAC7D,EAFC,KAEM;AAAA,IACT,EAvBC;AAyBL;AAEA,IAAO,wBAAQ;","names":[],"file":"sectionHeader.jsx"}

package/dist/headless/source/components/layout/sheet/sheet.jsx

@@ -1,4 +1,4 @@
-import { Show, createEffect, createSignal, mergeProps, onCleanup, splitProps } from "solid-js";
+import { Show, createEffect, createSignal, mergeProps, on, onCleanup, splitProps } from "solid-js";
 import { Portal, isServer } from "solid-js/web";
 import cn from "clsx";
 import { Button } from "../../inputs/button";
@@ -6,7 +6,9 @@ import { Icon } from "../../base/icon";
 import { ClickAwayListener } from "../../clickAwayListener";
 import { createCssTransition } from "../../../primitives/createCssTransition";
 import { isTopOverlayLayer } from "../../../primitives/overlayLayer";
+import { restoreFocus } from "../../../primitives/restoreFocus";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { mergeStyle } from "../../../primitives/mergeStyle";
 const isVerticalAxis = (placement) => placement === "bottom" || placement === "top";
 function SheetBlock(props) {
   const merged = mergeProps(
@@ -15,6 +17,10 @@ function SheetBlock(props) {
       withSizeToggle: true,
       hideHeaderActions: false,
       reverseHeaderActions: false,
+      closeAriaLabel: "Close sheet",
+      expandAriaLabel: "Expand sheet",
+      collapseAriaLabel: "Collapse sheet",
+      restoreAriaLabel: "Restore sheet size",
       resizable: false,
       minSize: 80,
       resizeStep: 24,
@@ -33,6 +39,10 @@ function SheetBlock(props) {
     "withSizeToggle",
     "hideHeaderActions",
     "reverseHeaderActions",
+    "closeAriaLabel",
+    "expandAriaLabel",
+    "collapseAriaLabel",
+    "restoreAriaLabel",
     "resizable",
     "minSize",
     "maxSize",
@@ -43,7 +53,8 @@ function SheetBlock(props) {
     "handleClose",
     "handleSizeButton",
     "children",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   let rootEl;
   const [dragSize, setDragSize] = createSignal(null);
@@ -110,26 +121,39 @@ function SheetBlock(props) {
       applySize(max);
     }
   };
-  createEffect(() => {
-    if (!local.isOpen) {
-      setDragSize(null);
-      return;
-    }
-    rootEl?.focus();
-  });
+  createEffect(
+    on(
+      () => local.isOpen,
+      (open) => {
+        if (!open) {
+          setDragSize(null);
+          return;
+        }
+        const root = rootEl;
+        const opener = root?.contains(document.activeElement) ? null : document.activeElement;
+        root?.focus();
+        onCleanup(() => restoreFocus(opener, root));
+      }
+    )
+  );
   const showActions = () => !local.hideHeaderActions && (!!local.onClose || local.withSizeToggle);
   const actionNodes = () => {
     const nodes = [];
     if (local.withSizeToggle) {
       nodes.push(
-        <Button variant="outlined" size="small" onClick={local.handleSizeButton}>
-          <Icon name="open_in_full" />
+        <Button
+          variant="outlined"
+          size="small"
+          onClick={local.handleSizeButton}
+          aria-label={local.mode === "expanded" ? local.collapseAriaLabel : local.mode === "small" ? local.restoreAriaLabel : local.expandAriaLabel}
+        >
+          <Icon name={local.mode === "expanded" ? "close_fullscreen" : "open_in_full"} />
         </Button>
       );
     }
     if (local.onClose) {
       nodes.push(
-        <Button variant="outlined" size="small" onClick={local.handleClose}>
+        <Button variant="outlined" size="small" onClick={local.handleClose} aria-label={local.closeAriaLabel}>
           <Icon name="close" />
         </Button>
       );
@@ -147,7 +171,7 @@ function SheetBlock(props) {
   return <div
     {...rest}
     ref={mergeRefs(local.ref, (el) => rootEl = el)}
-    data-testid="sheet"
+    data-testid={local["data-testid"] ?? "sheet"}
     tabindex={-1}
     role="dialog"
     aria-modal={local.variant === "modal" || void 0}
@@ -156,11 +180,7 @@ function SheetBlock(props) {
       "smwb-small": local.mode === "small",
       "smwb-sheet_resizable": local.resizable
     })}
-    style={{
-      "--sizeProp": local.size,
-      ...sizeStyle(),
-      ...typeof local.style === "object" && local.style ? local.style : {}
-    }}
+    style={mergeStyle({ "--sizeProp": local.size, ...sizeStyle() }, local.style)}
   >
       <Show when={local.resizable}>
         <div
@@ -213,7 +233,7 @@ function Sheet(props) {
   createEffect(() => {
     if (!local.isOpen || !local.closeOnEsc || !local.onClose) return;
     const onKeyDown = (event) => {
-      if (event.key === "Escape" && isTopOverlayLayer(wrapperEl)) local.onClose?.();
+      if (event.key === "Escape" && !event.defaultPrevented && isTopOverlayLayer(wrapperEl)) local.onClose?.();
     };
     document.addEventListener("keydown", onKeyDown);
     onCleanup(() => document.removeEventListener("keydown", onKeyDown));

package/dist/headless/source/components/layout/sheet/sheet.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/layout/sheet/sheet.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, 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 { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\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  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  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      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    \"resizable\",\n    \"minSize\",\n    \"maxSize\",\n    \"resizeStep\",\n    \"resizeHandleAriaLabel\",\n    \"onResize\",\n    \"style\",\n    \"handleClose\",\n    \"handleSizeButton\",\n    \"children\",\n    \"ref\",\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  createEffect(() => {\n    if (!local.isOpen) {\n      setDragSize(null);\n      return;\n    }\n    rootEl?.focus();\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 variant=\"outlined\" size=\"small\" onClick={local.handleSizeButton}>\n          <Icon name=\"open_in_full\" />\n        </Button>\n      );\n    }\n    if (local.onClose) {\n      nodes.push(\n        <Button variant=\"outlined\" size=\"small\" onClick={local.handleClose}>\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=\"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={{\n        \"--sizeProp\": local.size,\n        ...sizeStyle(),\n        ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      }}\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.\n      if (event.key === \"Escape\" && 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"],"mappings":"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","names":[],"file":"sheet.jsx"}
+{"version":3,"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"],"mappings":"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","names":[],"file":"sheet.jsx"}

package/dist/headless/source/components/layout/stack/stack.jsx

@@ -1,6 +1,7 @@
 import { For, Show, children as resolveChildren, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { mergeStyle } from "../../../primitives/mergeStyle";
 const flexAlign = (v) => v === "start" || v === "end" ? `flex-${v}` : v;
 const resolveGap = (s) => typeof s === "number" ? `calc(var(--smui-spacing-unit, 4px) * ${s})` : s === "none" ? "0" : `var(--smui-space-${s})`;
 function Stack(props) {
@@ -15,24 +16,27 @@ function Stack(props) {
     "class",
     "style",
     "children",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const resolved = resolveChildren(() => local.children);
   const firstDivider = resolveChildren(() => resolved.toArray().length > 1 ? local.divider : void 0);
   return <div
     {...rest}
     ref={mergeRefs(local.ref)}
-    data-testid="stack"
+    data-testid={local["data-testid"] ?? "stack"}
     class={cn("smwb-stack", local.class)}
-    style={{
-      display: "flex",
-      "flex-direction": local.direction,
-      "flex-wrap": local.wrap ? "wrap" : void 0,
-      "align-items": flexAlign(local.align),
-      "justify-content": flexAlign(local.justify),
-      gap: resolveGap(local.spacing),
-      ...typeof local.style === "object" && local.style ? local.style : {}
-    }}
+    style={mergeStyle(
+      {
+        display: "flex",
+        "flex-direction": local.direction,
+        "flex-wrap": local.wrap ? "wrap" : void 0,
+        "align-items": flexAlign(local.align),
+        "justify-content": flexAlign(local.justify),
+        gap: resolveGap(local.spacing)
+      },
+      local.style
+    )}
   >
       <Show when={firstDivider()} fallback={resolved()}>
         <For each={resolved.toArray()}>

package/dist/headless/source/components/layout/stack/stack.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/layout/stack/stack.tsx"],"sourcesContent":["import { type JSX, type ParentProps, For, Show, children as resolveChildren, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type StackSpacing = number | \"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"xxxl\";\n\nexport interface StackProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  direction?: \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\";\n  /** Gap between items: scale keyword, or a number = N × spacing unit. */\n  spacing?: StackSpacing;\n  align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\n  justify?: \"start\" | \"center\" | \"end\" | \"space-between\" | \"space-around\" | \"space-evenly\";\n  wrap?: boolean;\n  /** Optional element rendered between each child. */\n  divider?: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst flexAlign = (v?: string): string | undefined => (v === \"start\" || v === \"end\" ? `flex-${v}` : v);\n\nconst resolveGap = (s: StackSpacing): string =>\n  typeof s === \"number\" ? `calc(var(--smui-spacing-unit, 4px) * ${s})` : s === \"none\" ? \"0\" : `var(--smui-space-${s})`;\n\nexport function Stack(props: ParentProps<StackProps>): JSX.Element {\n  const merged = mergeProps({ direction: \"column\" as const, spacing: \"md\" as StackSpacing }, props);\n  const [local, rest] = splitProps(merged, [\n    \"direction\",\n    \"spacing\",\n    \"align\",\n    \"justify\",\n    \"wrap\",\n    \"divider\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const resolved = resolveChildren(() => local.children);\n  // The divider is read where it is drawn: the first gap takes this copy, and\n  // each further gap reads its own. Without gaps (a single child) it is not\n  // read at all — markup read and not drawn has no server node to hydrate.\n  const firstDivider = resolveChildren(() => (resolved.toArray().length > 1 ? local.divider : undefined));\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"stack\"\n      class={cn(\"smwb-stack\", local.class)}\n      style={{\n        display: \"flex\",\n        \"flex-direction\": local.direction,\n        \"flex-wrap\": local.wrap ? \"wrap\" : undefined,\n        \"align-items\": flexAlign(local.align),\n        \"justify-content\": flexAlign(local.justify),\n        gap: resolveGap(local.spacing),\n        ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      }}\n    >\n      <Show when={firstDivider()} fallback={resolved()}>\n        <For each={resolved.toArray()}>\n          {(child, index) => (\n            <>\n              <Show when={index() > 0}>\n                <div class=\"smwb-stack__divider\">{index() === 1 ? firstDivider() : local.divider}</div>\n              </Show>\n              {child}\n            </>\n          )}\n        </For>\n      </Show>\n    </div>\n  );\n}\n\nexport default Stack;\n"],"mappings":"AAAA,SAAqC,KAAK,MAAM,YAAY,iBAAiB,YAAY,kBAAkB;AAC3G,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAgBpC,MAAM,YAAY,CAAC,MAAoC,MAAM,WAAW,MAAM,QAAQ,QAAQ,CAAC,KAAK;AAEpG,MAAM,aAAa,CAAC,MAClB,OAAO,MAAM,WAAW,wCAAwC,CAAC,MAAM,MAAM,SAAS,MAAM,oBAAoB,CAAC;AAE5G,SAAS,MAAM,OAA6C;AACjE,QAAM,SAAS,WAAW,EAAE,WAAW,UAAmB,SAAS,KAAqB,GAAG,KAAK;AAChG,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,WAAW,gBAAgB,MAAM,MAAM,QAAQ;AAIrD,QAAM,eAAe,gBAAgB,MAAO,SAAS,QAAQ,EAAE,SAAS,IAAI,MAAM,UAAU,MAAU;AAEtG,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,OAAO,GAAG,cAAc,MAAM,KAAK;AAAA,IACnC,OAAO;AAAA,MACL,SAAS;AAAA,MACT,kBAAkB,MAAM;AAAA,MACxB,aAAa,MAAM,OAAO,SAAS;AAAA,MACnC,eAAe,UAAU,MAAM,KAAK;AAAA,MACpC,mBAAmB,UAAU,MAAM,OAAO;AAAA,MAC1C,KAAK,WAAW,MAAM,OAAO;AAAA,MAC7B,GAAI,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ,CAAC;AAAA,IACtE;AAAA,GACD;AAAA,MACC,CAAC,KAAK,MAAM,aAAa,GAAG,UAAU,SAAS,GAAG;AAAA,QAChD,CAAC,IAAI,MAAM,SAAS,QAAQ,GAAG;AAAA,WAC5B,CAAC,OAAO,UACP,EAAE;AAAA,cACA,CAAC,KAAK,MAAM,MAAM,IAAI,GAAG;AAAA,gBACvB,CAAC,IAAI,MAAM,uBAAuB,MAAM,MAAM,IAAI,aAAa,IAAI,MAAM,QAAQ,EAAhF,IAAsF;AAAA,cACzF,EAFC,KAEM;AAAA,eACN,MAAM;AAAA,YACT,IACA;AAAA,QACJ,EATC,IASK;AAAA,MACR,EAXC,KAWM;AAAA,IACT,EA3BC;AA6BL;AAEA,IAAO,gBAAQ;","names":[],"file":"stack.jsx"}
+{"version":3,"sources":["../../../../../../src/components/layout/stack/stack.tsx"],"sourcesContent":["import { type JSX, type ParentProps, For, Show, children as resolveChildren, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport type StackSpacing = number | \"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"xxxl\";\n\nexport interface StackProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  direction?: \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\";\n  /** Gap between items: scale keyword, or a number = N × spacing unit. */\n  spacing?: StackSpacing;\n  align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\n  justify?: \"start\" | \"center\" | \"end\" | \"space-between\" | \"space-around\" | \"space-evenly\";\n  wrap?: boolean;\n  /** Optional element rendered between each child. */\n  divider?: JSX.Element;\n  /** Test id of the root `<div>`; `stack` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst flexAlign = (v?: string): string | undefined => (v === \"start\" || v === \"end\" ? `flex-${v}` : v);\n\nconst resolveGap = (s: StackSpacing): string =>\n  typeof s === \"number\" ? `calc(var(--smui-spacing-unit, 4px) * ${s})` : s === \"none\" ? \"0\" : `var(--smui-space-${s})`;\n\nexport function Stack(props: ParentProps<StackProps>): JSX.Element {\n  const merged = mergeProps({ direction: \"column\" as const, spacing: \"md\" as StackSpacing }, props);\n  const [local, rest] = splitProps(merged, [\n    \"direction\",\n    \"spacing\",\n    \"align\",\n    \"justify\",\n    \"wrap\",\n    \"divider\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const resolved = resolveChildren(() => local.children);\n  // The divider is read where it is drawn: the first gap takes this copy, and\n  // each further gap reads its own. Without gaps (a single child) it is not\n  // read at all — markup read and not drawn has no server node to hydrate.\n  const firstDivider = resolveChildren(() => (resolved.toArray().length > 1 ? local.divider : undefined));\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"stack\"}\n      class={cn(\"smwb-stack\", local.class)}\n      style={mergeStyle(\n        {\n          display: \"flex\",\n          \"flex-direction\": local.direction,\n          \"flex-wrap\": local.wrap ? \"wrap\" : undefined,\n          \"align-items\": flexAlign(local.align),\n          \"justify-content\": flexAlign(local.justify),\n          gap: resolveGap(local.spacing),\n        },\n        local.style\n      )}\n    >\n      <Show when={firstDivider()} fallback={resolved()}>\n        <For each={resolved.toArray()}>\n          {(child, index) => (\n            <>\n              <Show when={index() > 0}>\n                <div class=\"smwb-stack__divider\">{index() === 1 ? firstDivider() : local.divider}</div>\n              </Show>\n              {child}\n            </>\n          )}\n        </For>\n      </Show>\n    </div>\n  );\n}\n\nexport default Stack;\n"],"mappings":"AAAA,SAAqC,KAAK,MAAM,YAAY,iBAAiB,YAAY,kBAAkB;AAC3G,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,kBAAkB;AAkB3B,MAAM,YAAY,CAAC,MAAoC,MAAM,WAAW,MAAM,QAAQ,QAAQ,CAAC,KAAK;AAEpG,MAAM,aAAa,CAAC,MAClB,OAAO,MAAM,WAAW,wCAAwC,CAAC,MAAM,MAAM,SAAS,MAAM,oBAAoB,CAAC;AAE5G,SAAS,MAAM,OAA6C;AACjE,QAAM,SAAS,WAAW,EAAE,WAAW,UAAmB,SAAS,KAAqB,GAAG,KAAK;AAChG,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,WAAW,gBAAgB,MAAM,MAAM,QAAQ;AAIrD,QAAM,eAAe,gBAAgB,MAAO,SAAS,QAAQ,EAAE,SAAS,IAAI,MAAM,UAAU,MAAU;AAEtG,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,aAAa,MAAM,aAAa,KAAK;AAAA,IACrC,OAAO,GAAG,cAAc,MAAM,KAAK;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,QACE,SAAS;AAAA,QACT,kBAAkB,MAAM;AAAA,QACxB,aAAa,MAAM,OAAO,SAAS;AAAA,QACnC,eAAe,UAAU,MAAM,KAAK;AAAA,QACpC,mBAAmB,UAAU,MAAM,OAAO;AAAA,QAC1C,KAAK,WAAW,MAAM,OAAO;AAAA,MAC/B;AAAA,MACA,MAAM;AAAA,IACR;AAAA,GACD;AAAA,MACC,CAAC,KAAK,MAAM,aAAa,GAAG,UAAU,SAAS,GAAG;AAAA,QAChD,CAAC,IAAI,MAAM,SAAS,QAAQ,GAAG;AAAA,WAC5B,CAAC,OAAO,UACP,EAAE;AAAA,cACA,CAAC,KAAK,MAAM,MAAM,IAAI,GAAG;AAAA,gBACvB,CAAC,IAAI,MAAM,uBAAuB,MAAM,MAAM,IAAI,aAAa,IAAI,MAAM,QAAQ,EAAhF,IAAsF;AAAA,cACzF,EAFC,KAEM;AAAA,eACN,MAAM;AAAA,YACT,IACA;AAAA,QACJ,EATC,IASK;AAAA,MACR,EAXC,KAWM;AAAA,IACT,EA7BC;AA+BL;AAEA,IAAO,gBAAQ;","names":[],"file":"stack.jsx"}

package/dist/headless/source/components/layout/tabGroups/index.js

@@ -0,0 +1,8 @@
+import { TabGroups, default as default2 } from "./tabGroups";
+import * as tabGroupsLayout from "./tabGroupsLayout";
+export {
+  TabGroups,
+  default2 as default,
+  tabGroupsLayout
+};
+//# sourceMappingURL=index.js.map

package/dist/headless/source/components/layout/tabGroups/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/layout/tabGroups/index.ts"],
+  "sourcesContent": ["export { TabGroups, default } from \"./tabGroups\";\nexport type { TabGroupsProps, TabGroupsTab } from \"./tabGroups\";\n// The pure model behind the component: `tabGroupsLayout.addTab`, `parseTabGroupsLayout`, \u2026\n// Generic names stay inside the namespace, so the barrel gains no ambiguous top-level functions.\nexport * as tabGroupsLayout from \"./tabGroupsLayout\";\nexport type {\n  TabGroupsChange,\n  TabGroupsDropZone,\n  TabGroupsEdge,\n  TabGroupsGroup,\n  TabGroupsLabels,\n  TabGroupsLayout,\n  TabGroupsMoveTarget,\n  TabGroupsNode,\n  TabGroupsSplit,\n} from \"./tabGroupsLayout\";\n"],
+  "mappings": "AAAA,SAAS,WAAW,WAAAA,gBAAe;AAInC,YAAY,qBAAqB;",
+  "names": ["default"]
+}