@smwb/ui-solid 0.12.1 → 0.13.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

@@ -7,6 +7,7 @@ import { ClickAwayListener } from "../../clickAwayListener";
 import { createCssTransition } from "../../../primitives/createCssTransition";
 import { isTopOverlayLayer } from "../../../primitives/overlayLayer";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { mergeStyle } from "../../../primitives/mergeStyle";
 const isVerticalAxis = (placement) => placement === "bottom" || placement === "top";
 function SheetBlock(props) {
   const merged = mergeProps(
@@ -43,7 +44,8 @@ function SheetBlock(props) {
     "handleClose",
     "handleSizeButton",
     "children",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   let rootEl;
   const [dragSize, setDragSize] = createSignal(null);
@@ -147,7 +149,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 +158,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 +211,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, 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\";\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  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      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    \"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  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={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/navigation/appBar/appBar.jsx

@@ -24,7 +24,8 @@ function AppBar(props) {
     "rightContent",
     "title",
     "color",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const content = children(() => local.children);
   const title = children(() => content() ? void 0 : local.title);
@@ -32,7 +33,7 @@ function AppBar(props) {
     component={local.placement === "top" ? "header" : "footer"}
     {...rest}
     ref={mergeRefs(local.ref)}
-    data-testid="app-bar"
+    data-testid={local["data-testid"] ?? "app-bar"}
     class={cn(
       "smwb-appbar",
       local.class,

package/dist/headless/source/components/navigation/appBar/appBar.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/appBar/appBar.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type AppBarColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface AppBarProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  dense?: boolean;\n  position?: \"relative\" | \"static\" | \"absolute\" | \"sticky\" | \"fixed\";\n  placement?: \"top\" | \"bottom\";\n  leftContent?: JSX.Element;\n  midContent?: JSX.Element;\n  rightContent?: JSX.Element;\n  title?: JSX.Element | string;\n  midContentAlign?: \"middle\" | \"left\" | \"right\";\n  /** Semantic background color. */\n  color?: AppBarColor;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function AppBar(props: ParentProps<AppBarProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      position: \"static\" as const,\n      placement: \"top\" as const,\n      midContentAlign: \"middle\" as const,\n      color: \"default\" as AppBarColor,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"dense\",\n    \"position\",\n    \"placement\",\n    \"leftContent\",\n    \"midContent\",\n    \"midContentAlign\",\n    \"rightContent\",\n    \"title\",\n    \"color\",\n    \"ref\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const content = children(() => local.children);\n  // The title is drawn only without children, so it is read only then.\n  const title = children(() => (content() ? undefined : local.title));\n\n  return (\n    <Dynamic\n      component={local.placement === \"top\" ? \"header\" : \"footer\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"app-bar\"\n      class={cn(\n        \"smwb-appbar\",\n        local.class,\n        `smwb-${local.position}`,\n        `smwb-${local.placement}`,\n        { \"smwb-dense\": local.dense },\n        local.color !== \"default\" && `smwb-appbar_color-${local.color}`\n      )}\n    >\n      <Show\n        when={content()}\n        fallback={\n          <div class=\"smwb-appbar__inner\">\n            <div class=\"smwb-appbar__left\">\n              <Show when={title()}>\n                <div class=\"smwb-appbar__left__title\">{title()}</div>\n              </Show>\n              {local.leftContent}\n            </div>\n            <div class={cn(\"smwb-appbar__mid\", `smwb-${local.midContentAlign}`)}>{local.midContent}</div>\n            <div class=\"smwb-appbar__right\">{local.rightContent}</div>\n          </div>\n        }\n      >\n        {content()}\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport default AppBar;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAkB7B,SAAS,OAAO,OAA8C;AACnE,QAAM,SAAS;AAAA,IACb;AAAA,MACE,UAAU;AAAA,MACV,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,OAAO;AAAA,IACT;AAAA,IACA;AAAA,EACF;AACA,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,IACA;AAAA,EACF,CAAC;AAID,QAAM,UAAU,SAAS,MAAM,MAAM,QAAQ;AAE7C,QAAM,QAAQ,SAAS,MAAO,QAAQ,IAAI,SAAY,MAAM,KAAM;AAElE,SACE,CAAC;AAAA,IACC,WAAW,MAAM,cAAc,QAAQ,WAAW;AAAA,QAC9C;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,QAAQ,MAAM,QAAQ;AAAA,MACtB,QAAQ,MAAM,SAAS;AAAA,MACvB,EAAE,cAAc,MAAM,MAAM;AAAA,MAC5B,MAAM,UAAU,aAAa,qBAAqB,MAAM,KAAK;AAAA,IAC/D;AAAA,GACD;AAAA,MACC,CAAC;AAAA,IACC,MAAM,QAAQ;AAAA,IACd,UACE,CAAC,IAAI,MAAM,qBAAqB;AAAA,YAC9B,CAAC,IAAI,MAAM,oBAAoB;AAAA,cAC7B,CAAC,KAAK,MAAM,MAAM,GAAG;AAAA,gBACnB,CAAC,IAAI,MAAM,4BAA4B,MAAM,EAAE,EAA9C,IAAoD;AAAA,cACvD,EAFC,KAEM;AAAA,eACN,MAAM,YAAY;AAAA,YACrB,EALC,IAKK;AAAA,YACN,CAAC,IAAI,OAAO,GAAG,oBAAoB,QAAQ,MAAM,eAAe,EAAE,IAAI,MAAM,WAAW,EAAtF,IAA4F;AAAA,YAC7F,CAAC,IAAI,MAAM,sBAAsB,MAAM,aAAa,EAAnD,IAAyD;AAAA,UAC5D,EATC;AAAA,GAWJ;AAAA,SACE,QAAQ,EAAE;AAAA,MACb,EAhBC,KAgBM;AAAA,IACT,EA/BC;AAiCL;AAEA,IAAO,iBAAQ;","names":[],"file":"appBar.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/appBar/appBar.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type AppBarColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface AppBarProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  dense?: boolean;\n  position?: \"relative\" | \"static\" | \"absolute\" | \"sticky\" | \"fixed\";\n  placement?: \"top\" | \"bottom\";\n  leftContent?: JSX.Element;\n  midContent?: JSX.Element;\n  rightContent?: JSX.Element;\n  title?: JSX.Element | string;\n  midContentAlign?: \"middle\" | \"left\" | \"right\";\n  /** Semantic background color. */\n  color?: AppBarColor;\n  /** Test id of the root (`<header>`, or `<footer>` at the bottom); `app-bar` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function AppBar(props: ParentProps<AppBarProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      position: \"static\" as const,\n      placement: \"top\" as const,\n      midContentAlign: \"middle\" as const,\n      color: \"default\" as AppBarColor,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"dense\",\n    \"position\",\n    \"placement\",\n    \"leftContent\",\n    \"midContent\",\n    \"midContentAlign\",\n    \"rightContent\",\n    \"title\",\n    \"color\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const content = children(() => local.children);\n  // The title is drawn only without children, so it is read only then.\n  const title = children(() => (content() ? undefined : local.title));\n\n  return (\n    <Dynamic\n      component={local.placement === \"top\" ? \"header\" : \"footer\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"app-bar\"}\n      class={cn(\n        \"smwb-appbar\",\n        local.class,\n        `smwb-${local.position}`,\n        `smwb-${local.placement}`,\n        { \"smwb-dense\": local.dense },\n        local.color !== \"default\" && `smwb-appbar_color-${local.color}`\n      )}\n    >\n      <Show\n        when={content()}\n        fallback={\n          <div class=\"smwb-appbar__inner\">\n            <div class=\"smwb-appbar__left\">\n              <Show when={title()}>\n                <div class=\"smwb-appbar__left__title\">{title()}</div>\n              </Show>\n              {local.leftContent}\n            </div>\n            <div class={cn(\"smwb-appbar__mid\", `smwb-${local.midContentAlign}`)}>{local.midContent}</div>\n            <div class=\"smwb-appbar__right\">{local.rightContent}</div>\n          </div>\n        }\n      >\n        {content()}\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport default AppBar;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAoB7B,SAAS,OAAO,OAA8C;AACnE,QAAM,SAAS;AAAA,IACb;AAAA,MACE,UAAU;AAAA,MACV,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,OAAO;AAAA,IACT;AAAA,IACA;AAAA,EACF;AACA,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,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,UAAU,SAAS,MAAM,MAAM,QAAQ;AAE7C,QAAM,QAAQ,SAAS,MAAO,QAAQ,IAAI,SAAY,MAAM,KAAM;AAElE,SACE,CAAC;AAAA,IACC,WAAW,MAAM,cAAc,QAAQ,WAAW;AAAA,QAC9C;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,aAAa,MAAM,aAAa,KAAK;AAAA,IACrC,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,QAAQ,MAAM,QAAQ;AAAA,MACtB,QAAQ,MAAM,SAAS;AAAA,MACvB,EAAE,cAAc,MAAM,MAAM;AAAA,MAC5B,MAAM,UAAU,aAAa,qBAAqB,MAAM,KAAK;AAAA,IAC/D;AAAA,GACD;AAAA,MACC,CAAC;AAAA,IACC,MAAM,QAAQ;AAAA,IACd,UACE,CAAC,IAAI,MAAM,qBAAqB;AAAA,YAC9B,CAAC,IAAI,MAAM,oBAAoB;AAAA,cAC7B,CAAC,KAAK,MAAM,MAAM,GAAG;AAAA,gBACnB,CAAC,IAAI,MAAM,4BAA4B,MAAM,EAAE,EAA9C,IAAoD;AAAA,cACvD,EAFC,KAEM;AAAA,eACN,MAAM,YAAY;AAAA,YACrB,EALC,IAKK;AAAA,YACN,CAAC,IAAI,OAAO,GAAG,oBAAoB,QAAQ,MAAM,eAAe,EAAE,IAAI,MAAM,WAAW,EAAtF,IAA4F;AAAA,YAC7F,CAAC,IAAI,MAAM,sBAAsB,MAAM,aAAa,EAAnD,IAAyD;AAAA,UAC5D,EATC;AAAA,GAWJ;AAAA,SACE,QAAQ,EAAE;AAAA,MACb,EAhBC,KAgBM;AAAA,IACT,EA/BC;AAiCL;AAEA,IAAO,iBAAQ;","names":[],"file":"appBar.jsx"}

package/dist/headless/source/components/navigation/bottomBar/bottomBar.jsx

@@ -67,66 +67,74 @@ function BottomBar(props) {
   const overflowItems = () => menuItems().slice(safeVisibleCount());
   const hasOverflow = () => overflowItems().length > 0;
   const overflowActive = () => hasOverflow() && activeItem() !== null && activeItem() >= safeVisibleCount();
-  return <nav {...rest} ref={mergeRefs(local.ref)} class={cn("smwb-bottom-bar", local.class)} role="navigation">
+  return (
+    // role="navigation" is a default: the caller's own wins, and an explicit undefined keeps it.
+    <nav
+      {...rest}
+      ref={mergeRefs(local.ref)}
+      class={cn("smwb-bottom-bar", local.class)}
+      role={rest.role ?? "navigation"}
+    >
       <div class="smwb-bottom-bar__nav" role="menubar">
         <For each={visibleItems()}>
           {(item, idx) => <BarItem
-    as={item.as}
-    isActive={activeItem() === idx()}
-    onClick={(event) => {
-      setActiveItem(idx());
-      callHandler(item.onClick, event);
-    }}
-    icon={item.icon}
-    title={item.title}
-    href={item.href}
-  />}
+      as={item.as}
+      isActive={activeItem() === idx()}
+      onClick={(event) => {
+        setActiveItem(idx());
+        callHandler(item.onClick, event);
+      }}
+      icon={item.icon}
+      title={item.title}
+      href={item.href}
+    />}
         </For>
         <Show when={hasOverflow()}>
           <BarItem
-    ref={(el) => setOverflowAnchor(el)}
-    isActive={overflowActive()}
-    onClick={() => setOverflowOpen((prev) => !prev)}
-    icon={<Icon name="menu" size={24} />}
-    aria-label={local.overflowMenuAriaLabel}
-    aria-haspopup="menu"
-    aria-expanded={overflowOpen()}
-  />
+      ref={(el) => setOverflowAnchor(el)}
+      isActive={overflowActive()}
+      onClick={() => setOverflowOpen((prev) => !prev)}
+      icon={<Icon name="menu" size={24} />}
+      aria-label={local.overflowMenuAriaLabel}
+      aria-haspopup="menu"
+      aria-expanded={overflowOpen()}
+    />
         </Show>
       </div>
       <Show when={hasOverflow()}>
         <Menu
-    isOpen={overflowOpen()}
-    onClose={() => setOverflowOpen(false)}
-    anchorElement={overflowAnchor()}
-    placement="top"
-    dense
-  >
+      isOpen={overflowOpen()}
+      onClose={() => setOverflowOpen(false)}
+      anchorElement={overflowAnchor()}
+      placement="top"
+      dense
+    >
           <For each={overflowItems()}>
             {(item, idx) => {
-    const itemIndex = () => safeVisibleCount() + idx();
-    return <MenuItem
-      selected={activeItem() === itemIndex()}
-      href={item.href}
-      onClick={(event) => {
-        setActiveItem(itemIndex());
-        callHandler(
-          item.onClick,
-          event
-        );
-        setOverflowOpen(false);
-      }}
-    >
+      const itemIndex = () => safeVisibleCount() + idx();
+      return <MenuItem
+        selected={activeItem() === itemIndex()}
+        href={item.href}
+        onClick={(event) => {
+          setActiveItem(itemIndex());
+          callHandler(
+            item.onClick,
+            event
+          );
+          setOverflowOpen(false);
+        }}
+      >
                   <Show when={item.icon}>
                     <MenuItemIcon>{item.icon}</MenuItemIcon>
                   </Show>
                   <MenuItemText inset={!item.icon}>{item.title}</MenuItemText>
                 </MenuItem>;
-  }}
+    }}
           </For>
         </Menu>
       </Show>
-    </nav>;
+    </nav>
+  );
 }
 var bottomBar_default = BottomBar;
 export {

package/dist/headless/source/components/navigation/bottomBar/bottomBar.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/bottomBar/bottomBar.tsx"],"sourcesContent":["import { type JSX, For, Show, children, createMemo, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Menu, MenuItem, MenuItemIcon, MenuItemText } from \"../menu\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport type { SidebarMenuItemProps } from \"../sidebar/sidebar\";\n\nexport type BottomBarMenuItemProps = SidebarMenuItemProps;\n\nexport interface BottomBarProps extends JSX.HTMLAttributes<HTMLElement> {\n  menuItems?: SidebarMenuItemProps[];\n  visibleCount?: number;\n  activeItem?: number | null;\n  defaultActiveItem?: number | null;\n  onActiveItemChange?: (index: number) => void;\n  overflowMenuAriaLabel?: string;\n  ref?: Ref<HTMLElement>;\n}\n\ninterface BarItemProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: JSX.Element;\n  title?: string;\n  isActive?: boolean;\n  as?: string | undefined;\n  href?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nfunction BarItem(props: BarItemProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"isActive\", \"icon\", \"title\", \"as\", \"href\", \"ref\"]);\n  let rippleActions: RippleActionsRef | undefined;\n  // Resolve the icon in this item's context so a pre-created element passed via\n  // menuItems hydrates (see the same fix in Sidebar/AppLayout).\n  const icon = children(() => local.icon);\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n  return (\n    <Dynamic\n      component={local.as ?? \"div\"}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      role=\"menuitem\"\n      class={cn(\"smwb-bottom-bar__item\", { \"smwb-bottom-bar__item_active\": local.isActive })}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      <Show when={icon()}>\n        <span class=\"smwb-bottom-bar__item-icon\">{icon()}</span>\n      </Show>\n      <Show when={local.title}>\n        <span class=\"smwb-bottom-bar__item-title\">{local.title}</span>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </Dynamic>\n  );\n}\n\nexport function BottomBar(props: BottomBarProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      menuItems: [] as SidebarMenuItemProps[],\n      visibleCount: 4,\n      defaultActiveItem: null as number | null,\n      overflowMenuAriaLabel: \"More navigation\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"menuItems\",\n    \"visibleCount\",\n    \"activeItem\",\n    \"defaultActiveItem\",\n    \"onActiveItemChange\",\n    \"overflowMenuAriaLabel\",\n    \"ref\",\n  ]);\n\n  const [activeItem, setActiveItem] = createControllableState<number | null>({\n    value: () => local.activeItem,\n    defaultValue: local.defaultActiveItem,\n    onChange: (next) => {\n      if (next !== null) local.onActiveItemChange?.(next);\n    },\n  });\n  const [overflowOpen, setOverflowOpen] = createSignal(false);\n  const [overflowAnchor, setOverflowAnchor] = createSignal<HTMLElement | null>(null);\n\n  // Read menuItems once. An inline array literal is re-evaluated on every read,\n  // re-creating the icons in it; during hydration an icon created by a read that\n  // renders nothing (e.g. the overflow check) has no server DOM node to adopt.\n  const menuItems = createMemo(() => local.menuItems);\n  const safeVisibleCount = (): number => Math.max(0, local.visibleCount);\n  const visibleItems = (): SidebarMenuItemProps[] => menuItems().slice(0, safeVisibleCount());\n  const overflowItems = (): SidebarMenuItemProps[] => menuItems().slice(safeVisibleCount());\n  const hasOverflow = (): boolean => overflowItems().length > 0;\n  const overflowActive = (): boolean =>\n    hasOverflow() && activeItem() !== null && (activeItem() as number) >= safeVisibleCount();\n\n  return (\n    <nav {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-bottom-bar\", local.class)} role=\"navigation\">\n      <div class=\"smwb-bottom-bar__nav\" role=\"menubar\">\n        <For each={visibleItems()}>\n          {(item, idx) => (\n            <BarItem\n              as={item.as}\n              isActive={activeItem() === idx()}\n              onClick={(event) => {\n                setActiveItem(idx());\n                callHandler(item.onClick, event);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n            />\n          )}\n        </For>\n        <Show when={hasOverflow()}>\n          <BarItem\n            ref={(el) => setOverflowAnchor(el as HTMLElement)}\n            isActive={overflowActive()}\n            onClick={() => setOverflowOpen((prev) => !prev)}\n            icon={<Icon name=\"menu\" size={24} />}\n            aria-label={local.overflowMenuAriaLabel}\n            aria-haspopup=\"menu\"\n            aria-expanded={overflowOpen()}\n          />\n        </Show>\n      </div>\n      <Show when={hasOverflow()}>\n        <Menu\n          isOpen={overflowOpen()}\n          onClose={() => setOverflowOpen(false)}\n          anchorElement={overflowAnchor()}\n          placement=\"top\"\n          dense\n        >\n          <For each={overflowItems()}>\n            {(item, idx) => {\n              const itemIndex = (): number => safeVisibleCount() + idx();\n              return (\n                <MenuItem\n                  selected={activeItem() === itemIndex()}\n                  href={item.href}\n                  onClick={(event) => {\n                    setActiveItem(itemIndex());\n                    callHandler(\n                      item.onClick,\n                      event as unknown as MouseEvent & { currentTarget: HTMLDivElement; target: Element }\n                    );\n                    setOverflowOpen(false);\n                  }}\n                >\n                  <Show when={item.icon}>\n                    <MenuItemIcon>{item.icon}</MenuItemIcon>\n                  </Show>\n                  <MenuItemText inset={!item.icon}>{item.title}</MenuItemText>\n                </MenuItem>\n              );\n            }}\n          </For>\n        </Menu>\n      </Show>\n    </nav>\n  );\n}\n\nexport default BottomBar;\n"],"mappings":"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","names":[],"file":"bottomBar.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/bottomBar/bottomBar.tsx"],"sourcesContent":["import { type JSX, For, Show, children, createMemo, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Menu, MenuItem, MenuItemIcon, MenuItemText } from \"../menu\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport type { SidebarMenuItemProps } from \"../sidebar/sidebar\";\n\nexport type BottomBarMenuItemProps = SidebarMenuItemProps;\n\nexport interface BottomBarProps extends JSX.HTMLAttributes<HTMLElement> {\n  menuItems?: SidebarMenuItemProps[];\n  visibleCount?: number;\n  activeItem?: number | null;\n  defaultActiveItem?: number | null;\n  onActiveItemChange?: (index: number) => void;\n  overflowMenuAriaLabel?: string;\n  ref?: Ref<HTMLElement>;\n}\n\ninterface BarItemProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: JSX.Element;\n  title?: string;\n  isActive?: boolean;\n  as?: string | undefined;\n  href?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nfunction BarItem(props: BarItemProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"isActive\", \"icon\", \"title\", \"as\", \"href\", \"ref\"]);\n  let rippleActions: RippleActionsRef | undefined;\n  // Resolve the icon in this item's context so a pre-created element passed via\n  // menuItems hydrates (see the same fix in Sidebar/AppLayout).\n  const icon = children(() => local.icon);\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n  return (\n    <Dynamic\n      component={local.as ?? \"div\"}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      role=\"menuitem\"\n      class={cn(\"smwb-bottom-bar__item\", { \"smwb-bottom-bar__item_active\": local.isActive })}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      <Show when={icon()}>\n        <span class=\"smwb-bottom-bar__item-icon\">{icon()}</span>\n      </Show>\n      <Show when={local.title}>\n        <span class=\"smwb-bottom-bar__item-title\">{local.title}</span>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </Dynamic>\n  );\n}\n\nexport function BottomBar(props: BottomBarProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      menuItems: [] as SidebarMenuItemProps[],\n      visibleCount: 4,\n      defaultActiveItem: null as number | null,\n      overflowMenuAriaLabel: \"More navigation\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"menuItems\",\n    \"visibleCount\",\n    \"activeItem\",\n    \"defaultActiveItem\",\n    \"onActiveItemChange\",\n    \"overflowMenuAriaLabel\",\n    \"ref\",\n  ]);\n\n  const [activeItem, setActiveItem] = createControllableState<number | null>({\n    value: () => local.activeItem,\n    defaultValue: local.defaultActiveItem,\n    onChange: (next) => {\n      if (next !== null) local.onActiveItemChange?.(next);\n    },\n  });\n  const [overflowOpen, setOverflowOpen] = createSignal(false);\n  const [overflowAnchor, setOverflowAnchor] = createSignal<HTMLElement | null>(null);\n\n  // Read menuItems once. An inline array literal is re-evaluated on every read,\n  // re-creating the icons in it; during hydration an icon created by a read that\n  // renders nothing (e.g. the overflow check) has no server DOM node to adopt.\n  const menuItems = createMemo(() => local.menuItems);\n  const safeVisibleCount = (): number => Math.max(0, local.visibleCount);\n  const visibleItems = (): SidebarMenuItemProps[] => menuItems().slice(0, safeVisibleCount());\n  const overflowItems = (): SidebarMenuItemProps[] => menuItems().slice(safeVisibleCount());\n  const hasOverflow = (): boolean => overflowItems().length > 0;\n  const overflowActive = (): boolean =>\n    hasOverflow() && activeItem() !== null && (activeItem() as number) >= safeVisibleCount();\n\n  return (\n    // role=\"navigation\" is a default: the caller's own wins, and an explicit undefined keeps it.\n    <nav\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-bottom-bar\", local.class)}\n      role={rest.role ?? \"navigation\"}\n    >\n      <div class=\"smwb-bottom-bar__nav\" role=\"menubar\">\n        <For each={visibleItems()}>\n          {(item, idx) => (\n            <BarItem\n              as={item.as}\n              isActive={activeItem() === idx()}\n              onClick={(event) => {\n                setActiveItem(idx());\n                callHandler(item.onClick, event);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n            />\n          )}\n        </For>\n        <Show when={hasOverflow()}>\n          <BarItem\n            ref={(el) => setOverflowAnchor(el as HTMLElement)}\n            isActive={overflowActive()}\n            onClick={() => setOverflowOpen((prev) => !prev)}\n            icon={<Icon name=\"menu\" size={24} />}\n            aria-label={local.overflowMenuAriaLabel}\n            aria-haspopup=\"menu\"\n            aria-expanded={overflowOpen()}\n          />\n        </Show>\n      </div>\n      <Show when={hasOverflow()}>\n        <Menu\n          isOpen={overflowOpen()}\n          onClose={() => setOverflowOpen(false)}\n          anchorElement={overflowAnchor()}\n          placement=\"top\"\n          dense\n        >\n          <For each={overflowItems()}>\n            {(item, idx) => {\n              const itemIndex = (): number => safeVisibleCount() + idx();\n              return (\n                <MenuItem\n                  selected={activeItem() === itemIndex()}\n                  href={item.href}\n                  onClick={(event) => {\n                    setActiveItem(itemIndex());\n                    callHandler(\n                      item.onClick,\n                      event as unknown as MouseEvent & { currentTarget: HTMLDivElement; target: Element }\n                    );\n                    setOverflowOpen(false);\n                  }}\n                >\n                  <Show when={item.icon}>\n                    <MenuItemIcon>{item.icon}</MenuItemIcon>\n                  </Show>\n                  <MenuItemText inset={!item.icon}>{item.title}</MenuItemText>\n                </MenuItem>\n              );\n            }}\n          </For>\n        </Menu>\n      </Show>\n    </nav>\n  );\n}\n\nexport default BottomBar;\n"],"mappings":"AAAA,SAAmB,KAAK,MAAM,UAAU,YAAY,cAAc,YAAY,kBAAkB;AAChG,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,cAAqC;AAC9C,SAAS,MAAM,UAAU,cAAc,oBAAoB;AAC3D,SAAS,+BAA+B;AACxC,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAwB5B,SAAS,QAAQ,OAAkC;AACjD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,QAAQ,SAAS,MAAM,QAAQ,KAAK,CAAC;AAC1F,MAAI;AAGJ,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,gBAAgB,CAAC,UAA8B;AACnD,mBAAe,SAAS,KAAK;AAAA,EAC/B;AACA,SACE,CAAC;AAAA,IACC,WAAW,MAAM,MAAM;AAAA,IACvB,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,MAAM,MAAM;AAAA,IACZ,KAAK;AAAA,IACL,OAAO,GAAG,yBAAyB,EAAE,gCAAgC,MAAM,SAAS,CAAC;AAAA,IACrF,eAAe;AAAA,QACX;AAAA,GACL;AAAA,MACC,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,QAClB,CAAC,KAAK,MAAM,8BAA8B,KAAK,EAAE,EAAhD,KAAuD;AAAA,MAC1D,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,QACvB,CAAC,KAAK,MAAM,+BAA+B,MAAM,MAAM,EAAtD,KAA6D;AAAA,MAChE,EAFC,KAEM;AAAA,MACP,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,EAAE;AAAA,IAC/D,EAhBC;AAkBL;AAEO,SAAS,UAAU,OAAoC;AAC5D,QAAM,SAAS;AAAA,IACb;AAAA,MACE,WAAW,CAAC;AAAA,MACZ,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,uBAAuB;AAAA,IACzB;AAAA,IACA;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,YAAY,aAAa,IAAI,wBAAuC;AAAA,IACzE,OAAO,MAAM,MAAM;AAAA,IACnB,cAAc,MAAM;AAAA,IACpB,UAAU,CAAC,SAAS;AAClB,UAAI,SAAS,KAAM,OAAM,qBAAqB,IAAI;AAAA,IACpD;AAAA,EACF,CAAC;AACD,QAAM,CAAC,cAAc,eAAe,IAAI,aAAa,KAAK;AAC1D,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAAiC,IAAI;AAKjF,QAAM,YAAY,WAAW,MAAM,MAAM,SAAS;AAClD,QAAM,mBAAmB,MAAc,KAAK,IAAI,GAAG,MAAM,YAAY;AACrE,QAAM,eAAe,MAA8B,UAAU,EAAE,MAAM,GAAG,iBAAiB,CAAC;AAC1F,QAAM,gBAAgB,MAA8B,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxF,QAAM,cAAc,MAAe,cAAc,EAAE,SAAS;AAC5D,QAAM,iBAAiB,MACrB,YAAY,KAAK,WAAW,MAAM,QAAS,WAAW,KAAgB,iBAAiB;AAEzF;AAAA;AAAA,IAEE,CAAC;AAAA,UACK;AAAA,MACJ,KAAK,UAAU,MAAM,GAAG;AAAA,MACxB,OAAO,GAAG,mBAAmB,MAAM,KAAK;AAAA,MACxC,MAAM,KAAK,QAAQ;AAAA,KACpB;AAAA,MACC,CAAC,IAAI,MAAM,uBAAuB,KAAK,UAAU;AAAA,QAC/C,CAAC,IAAI,MAAM,aAAa,GAAG;AAAA,WACxB,CAAC,MAAM,QACN,CAAC;AAAA,MACC,IAAI,KAAK;AAAA,MACT,UAAU,WAAW,MAAM,IAAI;AAAA,MAC/B,SAAS,CAAC,UAAU;AAClB,sBAAc,IAAI,CAAC;AACnB,oBAAY,KAAK,SAAS,KAAK;AAAA,MACjC;AAAA,MACA,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA,IACb,GACA;AAAA,QACJ,EAdC,IAcK;AAAA,QACN,CAAC,KAAK,MAAM,YAAY,GAAG;AAAA,UACzB,CAAC;AAAA,MACC,KAAK,CAAC,OAAO,kBAAkB,EAAiB;AAAA,MAChD,UAAU,eAAe;AAAA,MACzB,SAAS,MAAM,gBAAgB,CAAC,SAAS,CAAC,IAAI;AAAA,MAC9C,MAAM,CAAC,KAAK,KAAK,OAAO,MAAM,IAAI;AAAA,MAClC,YAAY,MAAM;AAAA,MAClB,cAAc;AAAA,MACd,eAAe,aAAa;AAAA,IAC9B,EAAE;AAAA,QACJ,EAVC,KAUM;AAAA,MACT,EA3BC,IA2BK;AAAA,MACN,CAAC,KAAK,MAAM,YAAY,GAAG;AAAA,QACzB,CAAC;AAAA,MACC,QAAQ,aAAa;AAAA,MACrB,SAAS,MAAM,gBAAgB,KAAK;AAAA,MACpC,eAAe,eAAe;AAAA,MAC9B,UAAU;AAAA,MACV;AAAA,KACD;AAAA,UACC,CAAC,IAAI,MAAM,cAAc,GAAG;AAAA,aACzB,CAAC,MAAM,QAAQ;AACd,YAAM,YAAY,MAAc,iBAAiB,IAAI,IAAI;AACzD,aACE,CAAC;AAAA,QACC,UAAU,WAAW,MAAM,UAAU;AAAA,QACrC,MAAM,KAAK;AAAA,QACX,SAAS,CAAC,UAAU;AAClB,wBAAc,UAAU,CAAC;AACzB;AAAA,YACE,KAAK;AAAA,YACL;AAAA,UACF;AACA,0BAAgB,KAAK;AAAA,QACvB;AAAA,OACD;AAAA,kBACC,CAAC,KAAK,MAAM,KAAK,MAAM;AAAA,oBACrB,CAAC,cAAc,KAAK,KAAK,EAAxB,aAAuC;AAAA,kBAC1C,EAFC,KAEM;AAAA,kBACP,CAAC,aAAa,OAAO,CAAC,KAAK,OAAO,KAAK,MAAM,EAA5C,aAA2D;AAAA,gBAC9D,EAhBC;AAAA,IAkBL,EAAE;AAAA,UACJ,EAvBC,IAuBK;AAAA,QACR,EA/BC,KA+BM;AAAA,MACT,EAjCC,KAiCM;AAAA,IACT,EApEC;AAAA;AAsEL;AAEA,IAAO,oBAAQ;","names":[],"file":"bottomBar.jsx"}

package/dist/headless/source/components/navigation/breadcrumbs/breadcrumbs.jsx

@@ -17,7 +17,8 @@ function Breadcrumbs(props) {
     "onExpand",
     "expandLabel",
     "children",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const [expanded, setExpanded] = createControllableState({
     value: () => local.expanded,
@@ -39,7 +40,13 @@ function Breadcrumbs(props) {
       ...all.slice(all.length - local.itemsAfterCollapse)
     ];
   };
-  return <nav {...rest} ref={mergeRefs(local.ref)} data-testid="breadcrumbs" aria-label="breadcrumb" class={cn("smwb-breadcrumbs", local.class)}>
+  return <nav
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    data-testid={local["data-testid"] ?? "breadcrumbs"}
+    aria-label={rest["aria-label"] ?? "breadcrumb"}
+    class={cn("smwb-breadcrumbs", local.class)}
+  >
       <ol class="smwb-breadcrumbs__list">
         <For each={rendered()}>
           {(crumb, index) => <>

package/dist/headless/source/components/navigation/breadcrumbs/breadcrumbs.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import { type JSX, type ParentProps, For, Show, children as resolveChildren, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface BreadcrumbsProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** Node placed between every crumb. */\n  separator?: JSX.Element;\n  /** Collapse the middle of the trail when there are more than `maxItems` crumbs. */\n  maxItems?: number;\n  /** How many leading crumbs to keep when collapsed. */\n  itemsBeforeCollapse?: number;\n  /** How many trailing crumbs to keep when collapsed. */\n  itemsAfterCollapse?: number;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Fired when the user activates the expand control. */\n  onExpand?: () => void;\n  /** Accessible label for the expand button. */\n  expandLabel?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Breadcrumbs(props: ParentProps<BreadcrumbsProps>): JSX.Element {\n  const merged = mergeProps(\n    { separator: \"/\" as JSX.Element, maxItems: 8, itemsBeforeCollapse: 1, itemsAfterCollapse: 1, expandLabel: \"Show path\" },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"separator\",\n    \"maxItems\",\n    \"itemsBeforeCollapse\",\n    \"itemsAfterCollapse\",\n    \"expanded\",\n    \"onExpand\",\n    \"expandLabel\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [expanded, setExpanded] = createControllableState<boolean>({\n    value: () => local.expanded,\n    defaultValue: false,\n    onChange: () => local.onExpand?.(),\n  });\n\n  const resolved = resolveChildren(() => local.children);\n  const crumbs = (): unknown[] => resolved.toArray();\n\n  const collapsed = (): boolean =>\n    !expanded() &&\n    crumbs().length > local.maxItems &&\n    local.itemsBeforeCollapse + local.itemsAfterCollapse < crumbs().length;\n\n  const handleExpand = (): void => setExpanded(true);\n\n  const rendered = (): unknown[] => {\n    const all = crumbs();\n    if (!collapsed()) return all;\n    return [\n      ...all.slice(0, local.itemsBeforeCollapse),\n      (\n        <button type=\"button\" class=\"smwb-breadcrumbs__expand\" aria-label={local.expandLabel} onClick={handleExpand}>\n          …\n        </button>\n      ),\n      ...all.slice(all.length - local.itemsAfterCollapse),\n    ];\n  };\n\n  return (\n    <nav {...rest} ref={mergeRefs(local.ref)} data-testid=\"breadcrumbs\" aria-label=\"breadcrumb\" class={cn(\"smwb-breadcrumbs\", local.class)}>\n      <ol class=\"smwb-breadcrumbs__list\">\n        <For each={rendered()}>\n          {(crumb, index) => (\n            <>\n              <li class=\"smwb-breadcrumbs__item\">{crumb as JSX.Element}</li>\n              <Show when={index() < rendered().length - 1}>\n                <li class=\"smwb-breadcrumbs__separator\" aria-hidden=\"true\">\n                  {local.separator}\n                </li>\n              </Show>\n            </>\n          )}\n        </For>\n      </ol>\n    </nav>\n  );\n}\n\nexport default Breadcrumbs;\n"],"mappings":"AAAA,SAAqC,KAAK,MAAM,YAAY,iBAAiB,YAAY,kBAAkB;AAC3G,OAAO,QAAQ;AACf,SAAS,+BAA+B;AACxC,SAAS,iBAA2B;AAoB7B,SAAS,YAAY,OAAmD;AAC7E,QAAM,SAAS;AAAA,IACb,EAAE,WAAW,KAAoB,UAAU,GAAG,qBAAqB,GAAG,oBAAoB,GAAG,aAAa,YAAY;AAAA,IACtH;AAAA,EACF;AACA,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,CAAC,UAAU,WAAW,IAAI,wBAAiC;AAAA,IAC/D,OAAO,MAAM,MAAM;AAAA,IACnB,cAAc;AAAA,IACd,UAAU,MAAM,MAAM,WAAW;AAAA,EACnC,CAAC;AAED,QAAM,WAAW,gBAAgB,MAAM,MAAM,QAAQ;AACrD,QAAM,SAAS,MAAiB,SAAS,QAAQ;AAEjD,QAAM,YAAY,MAChB,CAAC,SAAS,KACV,OAAO,EAAE,SAAS,MAAM,YACxB,MAAM,sBAAsB,MAAM,qBAAqB,OAAO,EAAE;AAElE,QAAM,eAAe,MAAY,YAAY,IAAI;AAEjD,QAAM,WAAW,MAAiB;AAChC,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,UAAU,EAAG,QAAO;AACzB,WAAO;AAAA,MACL,GAAG,IAAI,MAAM,GAAG,MAAM,mBAAmB;AAAA,MAEvC,CAAC,OAAO,KAAK,SAAS,MAAM,2BAA2B,YAAY,MAAM,aAAa,SAAS,cAAc;AAAA;AAAA,QAE7G,EAFC;AAAA,MAIH,GAAG,IAAI,MAAM,IAAI,SAAS,MAAM,kBAAkB;AAAA,IACpD;AAAA,EACF;AAEA,SACE,CAAC,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,YAAY,cAAc,WAAW,aAAa,OAAO,GAAG,oBAAoB,MAAM,KAAK,GAAG;AAAA,MACtI,CAAC,GAAG,MAAM,yBAAyB;AAAA,QACjC,CAAC,IAAI,MAAM,SAAS,GAAG;AAAA,WACpB,CAAC,OAAO,UACP,EAAE;AAAA,cACA,CAAC,GAAG,MAAM,0BAA0B,MAAqB,EAAxD,GAA6D;AAAA,cAC9D,CAAC,KAAK,MAAM,MAAM,IAAI,SAAS,EAAE,SAAS,GAAG;AAAA,gBAC3C,CAAC,GAAG,MAAM,8BAA8B,YAAY,OAAO;AAAA,mBACxD,MAAM,UAAU;AAAA,gBACnB,EAFC,GAEI;AAAA,cACP,EAJC,KAIM;AAAA,YACT,IACA;AAAA,QACJ,EAXC,IAWK;AAAA,MACR,EAbC,GAaI;AAAA,IACP,EAfC;AAiBL;AAEA,IAAO,sBAAQ;","names":[],"file":"breadcrumbs.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import { type JSX, type ParentProps, For, Show, children as resolveChildren, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface BreadcrumbsProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** Node placed between every crumb. */\n  separator?: JSX.Element;\n  /** Collapse the middle of the trail when there are more than `maxItems` crumbs. */\n  maxItems?: number;\n  /** How many leading crumbs to keep when collapsed. */\n  itemsBeforeCollapse?: number;\n  /** How many trailing crumbs to keep when collapsed. */\n  itemsAfterCollapse?: number;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Fired when the user activates the expand control. */\n  onExpand?: () => void;\n  /** Accessible label for the expand button. */\n  expandLabel?: string;\n  /** Test id of the root `<nav>`; `breadcrumbs` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Breadcrumbs(props: ParentProps<BreadcrumbsProps>): JSX.Element {\n  const merged = mergeProps(\n    { separator: \"/\" as JSX.Element, maxItems: 8, itemsBeforeCollapse: 1, itemsAfterCollapse: 1, expandLabel: \"Show path\" },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"separator\",\n    \"maxItems\",\n    \"itemsBeforeCollapse\",\n    \"itemsAfterCollapse\",\n    \"expanded\",\n    \"onExpand\",\n    \"expandLabel\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const [expanded, setExpanded] = createControllableState<boolean>({\n    value: () => local.expanded,\n    defaultValue: false,\n    onChange: () => local.onExpand?.(),\n  });\n\n  const resolved = resolveChildren(() => local.children);\n  const crumbs = (): unknown[] => resolved.toArray();\n\n  const collapsed = (): boolean =>\n    !expanded() &&\n    crumbs().length > local.maxItems &&\n    local.itemsBeforeCollapse + local.itemsAfterCollapse < crumbs().length;\n\n  const handleExpand = (): void => setExpanded(true);\n\n  const rendered = (): unknown[] => {\n    const all = crumbs();\n    if (!collapsed()) return all;\n    return [\n      ...all.slice(0, local.itemsBeforeCollapse),\n      (\n        <button type=\"button\" class=\"smwb-breadcrumbs__expand\" aria-label={local.expandLabel} onClick={handleExpand}>\n          …\n        </button>\n      ),\n      ...all.slice(all.length - local.itemsAfterCollapse),\n    ];\n  };\n\n  return (\n    <nav\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"breadcrumbs\"}\n      // A default the caller's own replaces, to name it in their language; an\n      // explicit undefined keeps it.\n      aria-label={rest[\"aria-label\"] ?? \"breadcrumb\"}\n      class={cn(\"smwb-breadcrumbs\", local.class)}\n    >\n      <ol class=\"smwb-breadcrumbs__list\">\n        <For each={rendered()}>\n          {(crumb, index) => (\n            <>\n              <li class=\"smwb-breadcrumbs__item\">{crumb as JSX.Element}</li>\n              <Show when={index() < rendered().length - 1}>\n                <li class=\"smwb-breadcrumbs__separator\" aria-hidden=\"true\">\n                  {local.separator}\n                </li>\n              </Show>\n            </>\n          )}\n        </For>\n      </ol>\n    </nav>\n  );\n}\n\nexport default Breadcrumbs;\n"],"mappings":"AAAA,SAAqC,KAAK,MAAM,YAAY,iBAAiB,YAAY,kBAAkB;AAC3G,OAAO,QAAQ;AACf,SAAS,+BAA+B;AACxC,SAAS,iBAA2B;AAsB7B,SAAS,YAAY,OAAmD;AAC7E,QAAM,SAAS;AAAA,IACb,EAAE,WAAW,KAAoB,UAAU,GAAG,qBAAqB,GAAG,oBAAoB,GAAG,aAAa,YAAY;AAAA,IACtH;AAAA,EACF;AACA,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,CAAC,UAAU,WAAW,IAAI,wBAAiC;AAAA,IAC/D,OAAO,MAAM,MAAM;AAAA,IACnB,cAAc;AAAA,IACd,UAAU,MAAM,MAAM,WAAW;AAAA,EACnC,CAAC;AAED,QAAM,WAAW,gBAAgB,MAAM,MAAM,QAAQ;AACrD,QAAM,SAAS,MAAiB,SAAS,QAAQ;AAEjD,QAAM,YAAY,MAChB,CAAC,SAAS,KACV,OAAO,EAAE,SAAS,MAAM,YACxB,MAAM,sBAAsB,MAAM,qBAAqB,OAAO,EAAE;AAElE,QAAM,eAAe,MAAY,YAAY,IAAI;AAEjD,QAAM,WAAW,MAAiB;AAChC,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,UAAU,EAAG,QAAO;AACzB,WAAO;AAAA,MACL,GAAG,IAAI,MAAM,GAAG,MAAM,mBAAmB;AAAA,MAEvC,CAAC,OAAO,KAAK,SAAS,MAAM,2BAA2B,YAAY,MAAM,aAAa,SAAS,cAAc;AAAA;AAAA,QAE7G,EAFC;AAAA,MAIH,GAAG,IAAI,MAAM,IAAI,SAAS,MAAM,kBAAkB;AAAA,IACpD;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,aAAa,MAAM,aAAa,KAAK;AAAA,IAGrC,YAAY,KAAK,YAAY,KAAK;AAAA,IAClC,OAAO,GAAG,oBAAoB,MAAM,KAAK;AAAA,GAC1C;AAAA,MACC,CAAC,GAAG,MAAM,yBAAyB;AAAA,QACjC,CAAC,IAAI,MAAM,SAAS,GAAG;AAAA,WACpB,CAAC,OAAO,UACP,EAAE;AAAA,cACA,CAAC,GAAG,MAAM,0BAA0B,MAAqB,EAAxD,GAA6D;AAAA,cAC9D,CAAC,KAAK,MAAM,MAAM,IAAI,SAAS,EAAE,SAAS,GAAG;AAAA,gBAC3C,CAAC,GAAG,MAAM,8BAA8B,YAAY,OAAO;AAAA,mBACxD,MAAM,UAAU;AAAA,gBACnB,EAFC,GAEI;AAAA,cACP,EAJC,KAIM;AAAA,YACT,IACA;AAAA,QACJ,EAXC,IAWK;AAAA,MACR,EAbC,GAaI;AAAA,IACP,EAvBC;AAyBL;AAEA,IAAO,sBAAQ;","names":[],"file":"breadcrumbs.jsx"}

package/dist/headless/source/components/navigation/menu/menu.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/menu/menu.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport { MenuContext } from \"./menuContext\";\nimport { MenuComponent } from \"./menuComponent\";\nimport type { MenuFloatingProps } from \"./menuFloating\";\n\nexport type MenuProps = MenuFloatingProps & {\n  variant?: \"static\" | \"floating\";\n  dense?: boolean;\n};\n\nexport function Menu(props: ParentProps<MenuProps>): JSX.Element {\n  const merged = mergeProps({ dense: false, variant: \"floating\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"dense\", \"variant\", \"children\", \"ref\"]);\n\n  const value = {\n    get dense() {\n      return local.dense;\n    },\n    get variant() {\n      return local.variant;\n    },\n    onClose: () => rest.onClose?.(),\n  };\n\n  return (\n    <MenuContext.Provider value={value}>\n      <MenuComponent ref={local.ref} {...rest}>\n        {local.children}\n      </MenuComponent>\n    </MenuContext.Provider>\n  );\n}\n\nexport default Menu;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAQvB,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS,WAAW,EAAE,OAAO,OAAO,SAAS,WAAoB,GAAG,KAAK;AAC/E,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,SAAS,WAAW,YAAY,KAAK,CAAC;AAEhF,QAAM,QAAQ;AAAA,IACZ,IAAI,QAAQ;AACV,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,UAAU;AACZ,aAAO,MAAM;AAAA,IACf;AAAA,IACA,SAAS,MAAM,KAAK,UAAU;AAAA,EAChC;AAEA,SACE,CAAC,YAAY,SAAS,OAAO,OAAO;AAAA,MAClC,CAAC,cAAc,KAAK,MAAM,SAAS,MAAM;AAAA,SACtC,MAAM,SAAS;AAAA,MAClB,EAFC,cAEe;AAAA,IAClB,EAJC,YAAY;AAMjB;AAEA,IAAO,eAAQ;","names":[],"file":"menu.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/menu/menu.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport { MenuContext } from \"./menuContext\";\nimport { MenuComponent } from \"./menuComponent\";\nimport type { MenuFloatingProps } from \"./menuFloating\";\n\nexport type MenuProps = MenuFloatingProps & {\n  variant?: \"static\" | \"floating\";\n  dense?: boolean;\n  /**\n   * Role of the list inside the menu, `menu` by default. A component that draws\n   * a list of its own on the menu's surface sets `presentation`: SelectField's\n   * options are a `listbox` inside it.\n   */\n  listRole?: JSX.AriaAttributes[\"role\"];\n};\n\nexport function Menu(props: ParentProps<MenuProps>): JSX.Element {\n  const merged = mergeProps({ dense: false, variant: \"floating\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"dense\", \"variant\", \"children\", \"ref\"]);\n\n  const value = {\n    get dense() {\n      return local.dense;\n    },\n    get variant() {\n      return local.variant;\n    },\n    onClose: () => rest.onClose?.(),\n  };\n\n  return (\n    <MenuContext.Provider value={value}>\n      <MenuComponent ref={local.ref} {...rest}>\n        {local.children}\n      </MenuComponent>\n    </MenuContext.Provider>\n  );\n}\n\nexport default Menu;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAcvB,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS,WAAW,EAAE,OAAO,OAAO,SAAS,WAAoB,GAAG,KAAK;AAC/E,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,SAAS,WAAW,YAAY,KAAK,CAAC;AAEhF,QAAM,QAAQ;AAAA,IACZ,IAAI,QAAQ;AACV,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,UAAU;AACZ,aAAO,MAAM;AAAA,IACf;AAAA,IACA,SAAS,MAAM,KAAK,UAAU;AAAA,EAChC;AAEA,SACE,CAAC,YAAY,SAAS,OAAO,OAAO;AAAA,MAClC,CAAC,cAAc,KAAK,MAAM,SAAS,MAAM;AAAA,SACtC,MAAM,SAAS;AAAA,MAClB,EAFC,cAEe;AAAA,IAClB,EAJC,YAAY;AAMjB;AAEA,IAAO,eAAQ;","names":[],"file":"menu.jsx"}

package/dist/headless/source/components/navigation/menu/menuComponent.jsx

@@ -1,13 +1,12 @@
-import { Show } from "solid-js";
+import { Show, splitProps } from "solid-js";
 import { useMenuContext } from "./menuContext";
 import { MenuList } from "./menuList";
 import { MenuFloating } from "./menuFloating";
 function MenuComponent(props) {
   const ctx = useMenuContext();
+  const [, listProps] = splitProps(props, ["anchorElement", "isOpen", "onClose", "placement", "middleware"]);
   return <Show when={ctx.variant === "static"} fallback={<MenuFloating {...props} />}>
-      <MenuList ref={props.ref} class={props.class}>
-        {props.children}
-      </MenuList>
+      <MenuList {...listProps} />
     </Show>;
 }
 var menuComponent_default = MenuComponent;

package/dist/headless/source/components/navigation/menu/menuComponent.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuComponent.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show } from \"solid-js\";\nimport { useMenuContext } from \"./menuContext\";\nimport { MenuList } from \"./menuList\";\nimport { MenuFloating, type MenuFloatingProps } from \"./menuFloating\";\n\nexport function MenuComponent(props: ParentProps<MenuFloatingProps>): JSX.Element {\n  const ctx = useMenuContext();\n  return (\n    <Show when={ctx.variant === \"static\"} fallback={<MenuFloating {...props} />}>\n      <MenuList ref={props.ref} class={props.class}>\n        {props.children}\n      </MenuList>\n    </Show>\n  );\n}\n\nexport default MenuComponent;\n"],"mappings":"AAAA,SAAqC,YAAY;AACjD,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,oBAA4C;AAE9C,SAAS,cAAc,OAAoD;AAChF,QAAM,MAAM,eAAe;AAC3B,SACE,CAAC,KAAK,MAAM,IAAI,YAAY,UAAU,UAAU,CAAC,iBAAiB,OAAO,IAAI;AAAA,MAC3E,CAAC,SAAS,KAAK,MAAM,KAAK,OAAO,MAAM,OAAO;AAAA,SAC3C,MAAM,SAAS;AAAA,MAClB,EAFC,SAEU;AAAA,IACb,EAJC;AAML;AAEA,IAAO,wBAAQ;","names":[],"file":"menuComponent.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuComponent.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport { useMenuContext } from \"./menuContext\";\nimport { MenuList } from \"./menuList\";\nimport { MenuFloating, type MenuFloatingProps } from \"./menuFloating\";\n\nexport function MenuComponent(props: ParentProps<MenuFloatingProps>): JSX.Element {\n  const ctx = useMenuContext();\n  // A static menu is the list itself: the caller's props go on its root, except\n  // the floating-only ones (isOpen would become a DOM attribute, onClose a\n  // \"close\" listener). Escape still reaches onClose through the menu context.\n  const [, listProps] = splitProps(props, [\"anchorElement\", \"isOpen\", \"onClose\", \"placement\", \"middleware\"]);\n  return (\n    <Show when={ctx.variant === \"static\"} fallback={<MenuFloating {...props} />}>\n      <MenuList {...listProps} />\n    </Show>\n  );\n}\n\nexport default MenuComponent;\n"],"mappings":"AAAA,SAAqC,MAAM,kBAAkB;AAC7D,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,oBAA4C;AAE9C,SAAS,cAAc,OAAoD;AAChF,QAAM,MAAM,eAAe;AAI3B,QAAM,CAAC,EAAE,SAAS,IAAI,WAAW,OAAO,CAAC,iBAAiB,UAAU,WAAW,aAAa,YAAY,CAAC;AACzG,SACE,CAAC,KAAK,MAAM,IAAI,YAAY,UAAU,UAAU,CAAC,iBAAiB,OAAO,IAAI;AAAA,MAC3E,CAAC,aAAa,WAAW,EAAE;AAAA,IAC7B,EAFC;AAIL;AAEA,IAAO,wBAAQ;","names":[],"file":"menuComponent.jsx"}

package/dist/headless/source/components/navigation/menu/menuContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/navigation/menu/menuContext.ts"],
-  "sourcesContent": ["import { createContext, useContext } from \"solid-js\";\n\nexport interface MenuContextValue {\n  dense: boolean;\n  variant: \"static\" | \"floating\";\n  onClose: () => void;\n}\n\nexport const MenuContext = createContext<MenuContextValue>({\n  dense: false,\n  variant: \"floating\",\n  onClose: () => undefined,\n});\n\nexport function useMenuContext(): MenuContextValue {\n  return useContext(MenuContext);\n}\n"],
-  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAQnC,MAAM,cAAc,cAAgC;AAAA,EACzD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM;AACjB,CAAC;AAEM,SAAS,iBAAmC;AACjD,SAAO,WAAW,WAAW;AAC/B;",
+  "sourcesContent": ["import { createContext, useContext } from \"solid-js\";\n\nexport interface MenuContextValue {\n  dense: boolean;\n  variant: \"static\" | \"floating\";\n  onClose: () => void;\n  /** A submenu's own list: ArrowLeft in it closes the submenu (onClose). */\n  submenu?: boolean;\n}\n\nexport const MenuContext = createContext<MenuContextValue>({\n  dense: false,\n  variant: \"floating\",\n  onClose: () => undefined,\n});\n\nexport function useMenuContext(): MenuContextValue {\n  return useContext(MenuContext);\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAUnC,MAAM,cAAc,cAAgC;AAAA,EACzD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM;AACjB,CAAC;AAEM,SAAS,iBAAmC;AACjD,SAAO,WAAW,WAAW;AAC/B;",
   "names": []
 }