@smwb/ui-solid 0.12.0 → 0.13.0

package/dist/source/components/layout/appLayout/appLayout.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/appLayout/appLayout.entry.less\";\nimport { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: JSX.Element;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: JSX.Element;\n  /** Footer slot, below the content. */\n  footer?: JSX.Element;\n  /** Sidebar width (px or any CSS length). */\n  sidebarWidth?: number | string;\n  /** Controlled collapsed state of the sidebar rail. */\n  sidebarCollapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultSidebarCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void;\n  /** Renders a built-in toggle button to collapse/expand the sidebar. */\n  collapsible?: boolean;\n  /** Custom toggle node replacing the default icon button. */\n  collapseToggle?: JSX.Element;\n  /** Accessible label for the default toggle button. */\n  collapseToggleAriaLabel?: string;\n  /** Sidebar collapsed width. */\n  sidebarCollapsedWidth?: number | string;\n  /** Keep the header pinned while content scrolls. */\n  stickyHeader?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst len = (v: number | string): string => (typeof v === \"number\" ? `${v}px` : v);\n\nexport function AppLayout(props: ParentProps<AppLayoutProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      sidebarWidth: 260 as number | string,\n      defaultSidebarCollapsed: false,\n      collapsible: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n      sidebarCollapsedWidth: 72 as number | string,\n      stickyHeader: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"header\",\n    \"sidebar\",\n    \"footer\",\n    \"sidebarWidth\",\n    \"sidebarCollapsed\",\n    \"defaultSidebarCollapsed\",\n    \"onSidebarCollapsedChange\",\n    \"collapsible\",\n    \"collapseToggle\",\n    \"collapseToggleAriaLabel\",\n    \"sidebarCollapsedWidth\",\n    \"stickyHeader\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.sidebarCollapsed,\n    defaultValue: local.defaultSidebarCollapsed,\n    onChange: (next) => local.onSidebarCollapsedChange?.(next),\n  });\n\n  const sidebarId = createId();\n\n  // Resolve slot props through `children()` so each is created once, in THIS\n  // component's reactive context. A pre-created element passed straight into a\n  // <Show> gets its hydration key at the caller's position but renders at the\n  // Show's, so the hydration walk can't find it (\"Unable to find DOM nodes for\n  // key\"). Resolving here keeps the key sequence aligned on server and client.\n  const headerSlot = children(() => local.header);\n  const sidebarSlot = children(() => local.sidebar);\n  const footerSlot = children(() => local.footer);\n  // The toggle is drawn only on a collapsible layout, so it is read only then.\n  const collapseToggleSlot = children(() => (local.collapsible ? local.collapseToggle : undefined));\n\n  const style = (): JSX.CSSProperties => ({\n    \"--smui-app-sidebar-w\": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth),\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n  });\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"app-layout\"\n      class={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": local.stickyHeader, \"smwb-app-layout_collapsed\": collapsed() },\n        local.class\n      )}\n      style={style()}\n    >\n      <Show when={headerSlot()}>\n        <div class=\"smwb-app-layout__header\">{headerSlot()}</div>\n      </Show>\n      <div class=\"smwb-app-layout__body\">\n        <Show when={sidebarSlot()}>\n          <aside id={sidebarId} class=\"smwb-app-layout__sidebar\">\n            <Show when={local.collapsible}>\n              <div class=\"smwb-app-layout__collapse\">\n                <Show\n                  when={collapseToggleSlot()}\n                  fallback={\n                    <button\n                      type=\"button\"\n                      class=\"smwb-app-layout__collapse-btn\"\n                      aria-label={local.collapseToggleAriaLabel}\n                      aria-expanded={!collapsed()}\n                      aria-controls={sidebarId}\n                      onClick={() => setCollapsed(!collapsed())}\n                    >\n                      <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n                    </button>\n                  }\n                >\n                  {collapseToggleSlot()}\n                </Show>\n              </div>\n            </Show>\n            {sidebarSlot()}\n          </aside>\n        </Show>\n        <div class=\"smwb-app-layout__content\">\n          {local.children}\n          <Show when={footerSlot()}>\n            <div class=\"smwb-app-layout__footer\">{footerSlot()}</div>\n          </Show>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default AppLayout;\n"],"mappings":"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","names":[],"file":"appLayout.jsx"}
+{"version":3,"sources":["../../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/appLayout/appLayout.entry.less\";\nimport { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: JSX.Element;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: JSX.Element;\n  /** Footer slot, below the content. */\n  footer?: JSX.Element;\n  /** Sidebar width (px or any CSS length). */\n  sidebarWidth?: number | string;\n  /** Controlled collapsed state of the sidebar rail. */\n  sidebarCollapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultSidebarCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void;\n  /** Renders a built-in toggle button to collapse/expand the sidebar. */\n  collapsible?: boolean;\n  /** Custom toggle node replacing the default icon button. */\n  collapseToggle?: JSX.Element;\n  /** Accessible label for the default toggle button. */\n  collapseToggleAriaLabel?: string;\n  /** Sidebar collapsed width. */\n  sidebarCollapsedWidth?: number | string;\n  /** Keep the header pinned while content scrolls. */\n  stickyHeader?: boolean;\n  /** Test id of the root `<div>`; `app-layout` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst len = (v: number | string): string => (typeof v === \"number\" ? `${v}px` : v);\n\nexport function AppLayout(props: ParentProps<AppLayoutProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      sidebarWidth: 260 as number | string,\n      defaultSidebarCollapsed: false,\n      collapsible: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n      sidebarCollapsedWidth: 72 as number | string,\n      stickyHeader: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"header\",\n    \"sidebar\",\n    \"footer\",\n    \"sidebarWidth\",\n    \"sidebarCollapsed\",\n    \"defaultSidebarCollapsed\",\n    \"onSidebarCollapsedChange\",\n    \"collapsible\",\n    \"collapseToggle\",\n    \"collapseToggleAriaLabel\",\n    \"sidebarCollapsedWidth\",\n    \"stickyHeader\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.sidebarCollapsed,\n    defaultValue: local.defaultSidebarCollapsed,\n    onChange: (next) => local.onSidebarCollapsedChange?.(next),\n  });\n\n  const sidebarId = createId();\n\n  // Resolve slot props through `children()` so each is created once, in THIS\n  // component's reactive context. A pre-created element passed straight into a\n  // <Show> gets its hydration key at the caller's position but renders at the\n  // Show's, so the hydration walk can't find it (\"Unable to find DOM nodes for\n  // key\"). Resolving here keeps the key sequence aligned on server and client.\n  const headerSlot = children(() => local.header);\n  const sidebarSlot = children(() => local.sidebar);\n  const footerSlot = children(() => local.footer);\n  // The toggle is drawn only on a collapsible layout, so it is read only then.\n  const collapseToggleSlot = children(() => (local.collapsible ? local.collapseToggle : undefined));\n\n  // The caller's style goes last: its own --smui-app-sidebar-w wins over the width props.\n  const style = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle(\n      { \"--smui-app-sidebar-w\": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth) },\n      local.style\n    );\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"app-layout\"}\n      class={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": local.stickyHeader, \"smwb-app-layout_collapsed\": collapsed() },\n        local.class\n      )}\n      style={style()}\n    >\n      <Show when={headerSlot()}>\n        <div class=\"smwb-app-layout__header\">{headerSlot()}</div>\n      </Show>\n      <div class=\"smwb-app-layout__body\">\n        <Show when={sidebarSlot()}>\n          <aside id={sidebarId} class=\"smwb-app-layout__sidebar\">\n            <Show when={local.collapsible}>\n              <div class=\"smwb-app-layout__collapse\">\n                <Show\n                  when={collapseToggleSlot()}\n                  fallback={\n                    <button\n                      type=\"button\"\n                      class=\"smwb-app-layout__collapse-btn\"\n                      aria-label={local.collapseToggleAriaLabel}\n                      aria-expanded={!collapsed()}\n                      aria-controls={sidebarId}\n                      onClick={() => setCollapsed(!collapsed())}\n                    >\n                      <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n                    </button>\n                  }\n                >\n                  {collapseToggleSlot()}\n                </Show>\n              </div>\n            </Show>\n            {sidebarSlot()}\n          </aside>\n        </Show>\n        <div class=\"smwb-app-layout__content\">\n          {local.children}\n          <Show when={footerSlot()}>\n            <div class=\"smwb-app-layout__footer\">{footerSlot()}</div>\n          </Show>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default AppLayout;\n"],"mappings":"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","names":[],"file":"appLayout.jsx"}

package/dist/source/components/layout/divider/divider.jsx

@@ -3,6 +3,7 @@ import "@smwb/ui-styles/less/components/divider/divider.entry.less";
 import { Show, children, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { mergeStyle } from "../../../primitives/mergeStyle";
 const colorVar = {
   default: void 0,
   primary: "var(--smui-primaryColor)",
@@ -32,7 +33,8 @@ function Divider(props) {
     "flexItem",
     "style",
     "children",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const text = children(() => local.orientation === "horizontal" ? local.children : void 0);
   const hasText = () => {
@@ -42,16 +44,15 @@ function Divider(props) {
   const dividerStyle = () => {
     const c = colorVar[local.color];
     const t = typeof local.thickness === "number" ? `${local.thickness}px` : local.thickness;
-    return {
-      ...typeof local.style === "object" && local.style ? local.style : {},
+    return mergeStyle(local.style, {
       ...c ? { "border-color": c } : {},
       ...t ? local.orientation === "vertical" ? { "border-left-width": t } : { "border-bottom-width": t } : {}
-    };
+    });
   };
   return <div
     {...rest}
     ref={mergeRefs(local.ref)}
-    data-testid="divider"
+    data-testid={local["data-testid"] ?? "divider"}
     role="separator"
     aria-orientation={local.orientation}
     class={cn("smwb-divider", `smwb-divider_${local.orientation}`, `smwb-divider_${local.variant}`, {

package/dist/source/components/layout/divider/divider.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/layout/divider/divider.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/divider/divider.entry.less\";\nimport { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type DividerColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface DividerProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Direction of the divider line. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Inset behaviour of the line relative to its container. */\n  variant?: \"fullWidth\" | \"inset\" | \"middle\";\n  /** Horizontal alignment of the optional text content. */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /** Line color (semantic token). */\n  color?: DividerColor;\n  /** Line thickness (number = px, or any CSS length). */\n  thickness?: number | string;\n  /** Stretch to fill a flex container along the cross axis. */\n  flexItem?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst colorVar: Record<DividerColor, string | undefined> = {\n  default: undefined,\n  primary: \"var(--smui-primaryColor)\",\n  secondary: \"var(--smui-secondaryColor)\",\n  error: \"var(--smui-errorColor)\",\n  success: \"var(--smui-successColor)\",\n  warning: \"var(--smui-warningColor)\",\n  info: \"var(--smui-infoColor)\",\n};\n\nexport function Divider(props: ParentProps<DividerProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      orientation: \"horizontal\" as const,\n      variant: \"fullWidth\" as const,\n      textAlign: \"center\" as const,\n      color: \"default\" as DividerColor,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"orientation\",\n    \"variant\",\n    \"textAlign\",\n    \"color\",\n    \"thickness\",\n    \"flexItem\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  // Read the text once, and only where it is drawn (a horizontal divider):\n  // markup passed as children is created anew on every read, and during\n  // hydration a copy the server never rendered has no DOM node.\n  const text = children(() => (local.orientation === \"horizontal\" ? local.children : undefined));\n  const hasText = (): boolean => {\n    const resolved = text();\n    return resolved !== undefined && resolved !== null && (resolved as unknown) !== false;\n  };\n\n  const dividerStyle = (): JSX.CSSProperties => {\n    const c = colorVar[local.color];\n    const t = typeof local.thickness === \"number\" ? `${local.thickness}px` : local.thickness;\n    return {\n      ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      ...(c ? { \"border-color\": c } : {}),\n      ...(t ? (local.orientation === \"vertical\" ? { \"border-left-width\": t } : { \"border-bottom-width\": t }) : {}),\n    };\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"divider\"\n      role=\"separator\"\n      aria-orientation={local.orientation}\n      class={cn(\"smwb-divider\", `smwb-divider_${local.orientation}`, `smwb-divider_${local.variant}`, {\n        \"smwb-divider_with-text\": hasText(),\n        [`smwb-divider_align-${local.textAlign}`]: hasText(),\n        \"smwb-divider_flex-item\": local.flexItem,\n      }, local.class)}\n      style={dividerStyle()}\n    >\n      <Show when={hasText()}>\n        <span class=\"smwb-divider__text\">{text()}</span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Divider;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAoBpC,MAAM,WAAqD;AAAA,EACzD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAEO,SAAS,QAAQ,OAA+C;AACrE,QAAM,SAAS;AAAA,IACb;AAAA,MACE,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW;AAAA,MACX,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,EACF,CAAC;AAKD,QAAM,OAAO,SAAS,MAAO,MAAM,gBAAgB,eAAe,MAAM,WAAW,MAAU;AAC7F,QAAM,UAAU,MAAe;AAC7B,UAAM,WAAW,KAAK;AACtB,WAAO,aAAa,UAAa,aAAa,QAAS,aAAyB;AAAA,EAClF;AAEA,QAAM,eAAe,MAAyB;AAC5C,UAAM,IAAI,SAAS,MAAM,KAAK;AAC9B,UAAM,IAAI,OAAO,MAAM,cAAc,WAAW,GAAG,MAAM,SAAS,OAAO,MAAM;AAC/E,WAAO;AAAA,MACL,GAAI,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ,CAAC;AAAA,MACpE,GAAI,IAAI,EAAE,gBAAgB,EAAE,IAAI,CAAC;AAAA,MACjC,GAAI,IAAK,MAAM,gBAAgB,aAAa,EAAE,qBAAqB,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAK,CAAC;AAAA,IAC5G;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,kBAAkB,MAAM;AAAA,IACxB,OAAO,GAAG,gBAAgB,gBAAgB,MAAM,WAAW,IAAI,gBAAgB,MAAM,OAAO,IAAI;AAAA,MAC9F,0BAA0B,QAAQ;AAAA,MAClC,CAAC,sBAAsB,MAAM,SAAS,EAAE,GAAG,QAAQ;AAAA,MACnD,0BAA0B,MAAM;AAAA,IAClC,GAAG,MAAM,KAAK;AAAA,IACd,OAAO,aAAa;AAAA,GACrB;AAAA,MACC,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,QACrB,CAAC,KAAK,MAAM,sBAAsB,KAAK,EAAE,EAAxC,KAA+C;AAAA,MAClD,EAFC,KAEM;AAAA,IACT,EAhBC;AAkBL;AAEA,IAAO,kBAAQ;","names":[],"file":"divider.jsx"}
+{"version":3,"sources":["../../../../../src/components/layout/divider/divider.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/divider/divider.entry.less\";\nimport { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport type DividerColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface DividerProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Direction of the divider line. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Inset behaviour of the line relative to its container. */\n  variant?: \"fullWidth\" | \"inset\" | \"middle\";\n  /** Horizontal alignment of the optional text content. */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /** Line color (semantic token). */\n  color?: DividerColor;\n  /** Line thickness (number = px, or any CSS length). */\n  thickness?: number | string;\n  /** Stretch to fill a flex container along the cross axis. */\n  flexItem?: boolean;\n  /** Test id of the root `<div>`; `divider` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst colorVar: Record<DividerColor, string | undefined> = {\n  default: undefined,\n  primary: \"var(--smui-primaryColor)\",\n  secondary: \"var(--smui-secondaryColor)\",\n  error: \"var(--smui-errorColor)\",\n  success: \"var(--smui-successColor)\",\n  warning: \"var(--smui-warningColor)\",\n  info: \"var(--smui-infoColor)\",\n};\n\nexport function Divider(props: ParentProps<DividerProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      orientation: \"horizontal\" as const,\n      variant: \"fullWidth\" as const,\n      textAlign: \"center\" as const,\n      color: \"default\" as DividerColor,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"orientation\",\n    \"variant\",\n    \"textAlign\",\n    \"color\",\n    \"thickness\",\n    \"flexItem\",\n    \"style\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read the text once, and only where it is drawn (a horizontal divider):\n  // markup passed as children is created anew on every read, and during\n  // hydration a copy the server never rendered has no DOM node.\n  const text = children(() => (local.orientation === \"horizontal\" ? local.children : undefined));\n  const hasText = (): boolean => {\n    const resolved = text();\n    return resolved !== undefined && resolved !== null && (resolved as unknown) !== false;\n  };\n\n  const dividerStyle = (): JSX.CSSProperties | string | undefined => {\n    const c = colorVar[local.color];\n    const t = typeof local.thickness === \"number\" ? `${local.thickness}px` : local.thickness;\n    return mergeStyle(local.style, {\n      ...(c ? { \"border-color\": c } : {}),\n      ...(t ? (local.orientation === \"vertical\" ? { \"border-left-width\": t } : { \"border-bottom-width\": t }) : {}),\n    });\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"divider\"}\n      role=\"separator\"\n      aria-orientation={local.orientation}\n      class={cn(\"smwb-divider\", `smwb-divider_${local.orientation}`, `smwb-divider_${local.variant}`, {\n        \"smwb-divider_with-text\": hasText(),\n        [`smwb-divider_align-${local.textAlign}`]: hasText(),\n        \"smwb-divider_flex-item\": local.flexItem,\n      }, local.class)}\n      style={dividerStyle()}\n    >\n      <Show when={hasText()}>\n        <span class=\"smwb-divider__text\">{text()}</span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Divider;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,kBAAkB;AAsB3B,MAAM,WAAqD;AAAA,EACzD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAEO,SAAS,QAAQ,OAA+C;AACrE,QAAM,SAAS;AAAA,IACb;AAAA,MACE,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW;AAAA,MACX,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,EACF,CAAC;AAKD,QAAM,OAAO,SAAS,MAAO,MAAM,gBAAgB,eAAe,MAAM,WAAW,MAAU;AAC7F,QAAM,UAAU,MAAe;AAC7B,UAAM,WAAW,KAAK;AACtB,WAAO,aAAa,UAAa,aAAa,QAAS,aAAyB;AAAA,EAClF;AAEA,QAAM,eAAe,MAA8C;AACjE,UAAM,IAAI,SAAS,MAAM,KAAK;AAC9B,UAAM,IAAI,OAAO,MAAM,cAAc,WAAW,GAAG,MAAM,SAAS,OAAO,MAAM;AAC/E,WAAO,WAAW,MAAM,OAAO;AAAA,MAC7B,GAAI,IAAI,EAAE,gBAAgB,EAAE,IAAI,CAAC;AAAA,MACjC,GAAI,IAAK,MAAM,gBAAgB,aAAa,EAAE,qBAAqB,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAK,CAAC;AAAA,IAC5G,CAAC;AAAA,EACH;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,aAAa,MAAM,aAAa,KAAK;AAAA,IACrC,KAAK;AAAA,IACL,kBAAkB,MAAM;AAAA,IACxB,OAAO,GAAG,gBAAgB,gBAAgB,MAAM,WAAW,IAAI,gBAAgB,MAAM,OAAO,IAAI;AAAA,MAC9F,0BAA0B,QAAQ;AAAA,MAClC,CAAC,sBAAsB,MAAM,SAAS,EAAE,GAAG,QAAQ;AAAA,MACnD,0BAA0B,MAAM;AAAA,IAClC,GAAG,MAAM,KAAK;AAAA,IACd,OAAO,aAAa;AAAA,GACrB;AAAA,MACC,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,QACrB,CAAC,KAAK,MAAM,sBAAsB,KAAK,EAAE,EAAxC,KAA+C;AAAA,MAClD,EAFC,KAEM;AAAA,IACT,EAhBC;AAkBL;AAEA,IAAO,kBAAQ;","names":[],"file":"divider.jsx"}

package/dist/source/components/layout/floatingWindow/floatingWindow.jsx

@@ -13,10 +13,12 @@ import {
 import { Portal, isServer } from "solid-js/web";
 import cn from "clsx";
 import { Icon } from "../../base/icon";
+import { hasOverlayLayerAbove } from "../../../primitives/overlayLayer";
 import { createCssTransition } from "../../../primitives/createCssTransition";
 import { createControllableState } from "../../../primitives/createControllableState";
 import { createId } from "../../../primitives/createId";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { mergeStyle } from "../../../primitives/mergeStyle";
 const RESIZE_DIRS = {
   n: { dx: 0, dy: 1, dw: 0, dh: -1 },
   s: { dx: 0, dy: 0, dw: 0, dh: 1 },
@@ -89,7 +91,8 @@ function FloatingWindow(props) {
     "class",
     "style",
     "children",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   let rootEl;
   const titleId = createId(void 0, "smwb-floating-window-title");
@@ -159,8 +162,9 @@ function FloatingWindow(props) {
   createEffect(() => {
     if (isServer || !local.open || !local.closeOnEsc || !local.onClose) return;
     const onKeyDown = (event) => {
+      if (event.defaultPrevented) return;
       if (event.key !== "Escape") return;
-      if (!rootEl || !rootEl.contains(document.activeElement)) return;
+      if (!rootEl || !rootEl.contains(document.activeElement) || hasOverlayLayerAbove(rootEl)) return;
       local.onClose?.();
     };
     document.addEventListener("keydown", onKeyDown);
@@ -292,21 +296,23 @@ function FloatingWindow(props) {
         <div
     {...rest}
     ref={mergeRefs(local.ref, (el) => rootEl = el)}
-    data-testid="floating-window"
+    data-testid={local["data-testid"] ?? "floating-window"}
     role="dialog"
     tabindex={-1}
     aria-labelledby={local.title ? titleId : void 0}
     class={cn("smwb-floating-window", local.class, transition.classes(), {
       "smwb-collapsed": collapsed()
     })}
-    style={{
-      left: `${rect().x}px`,
-      top: `${rect().y}px`,
-      width: `${rect().width}px`,
-      ...collapsed() ? {} : { height: `${rect().height}px` },
-      ...local.zIndex === void 0 ? {} : { "z-index": local.zIndex },
-      ...typeof local.style === "object" && local.style ? local.style : {}
-    }}
+    style={mergeStyle(
+      {
+        left: `${rect().x}px`,
+        top: `${rect().y}px`,
+        width: `${rect().width}px`,
+        ...collapsed() ? {} : { height: `${rect().height}px` },
+        ...local.zIndex === void 0 ? {} : { "z-index": local.zIndex }
+      },
+      local.style
+    )}
     on:pointerdown={activate}
   >
           <div

package/dist/source/components/layout/floatingWindow/floatingWindow.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/layout/floatingWindow/floatingWindow.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/floatingWindow/floatingWindow.entry.less\";\nimport {\n  type Accessor,\n  For,\n  type JSX,\n  type ParentProps,\n  Show,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface FloatingWindowPosition {\n  x: number;\n  y: number;\n}\n\nexport interface FloatingWindowSize {\n  width: number;\n  height: number;\n}\n\n/** The eight edge/corner resize directions. */\nexport type FloatingWindowResizeDir = \"n\" | \"s\" | \"e\" | \"w\" | \"ne\" | \"nw\" | \"se\" | \"sw\";\n\nexport interface FloatingWindowProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onResize\" | \"title\"> {\n  /** Controlled open state of the window. */\n  open: boolean;\n  /** Title bar content. When given, the window is labelled by it. */\n  title?: JSX.Element;\n  /** Extra header controls, rendered before the built-in collapse/close buttons. */\n  headerActions?: JSX.Element;\n\n  /** Controlled top-left position in viewport px. */\n  position?: FloatingWindowPosition;\n  /** Initial position when uncontrolled. */\n  defaultPosition?: FloatingWindowPosition;\n  /** Called on every move frame and on viewport re-clamp, with the clamped position. */\n  onPositionChange?: ((position: FloatingWindowPosition) => void) | undefined;\n  /** Called once when a move gesture ends — the point at which to persist. */\n  onMoveEnd?: ((position: FloatingWindowPosition) => void) | undefined;\n\n  /** Controlled size in px. */\n  size?: FloatingWindowSize;\n  /** Initial size when uncontrolled. */\n  defaultSize?: FloatingWindowSize;\n  /** Called on every resize frame and on viewport re-clamp, with the clamped size. */\n  onResize?: ((size: FloatingWindowSize) => void) | undefined;\n  /** Called once when a resize gesture ends — the point at which to persist. */\n  onResizeEnd?: ((size: FloatingWindowSize) => void) | undefined;\n\n  /** Minimum width in px (default 200). */\n  minWidth?: number;\n  /** Minimum height in px (default 120). */\n  minHeight?: number;\n  /** Maximum width in px (default: viewport width). */\n  maxWidth?: number;\n  /** Maximum height in px (default: viewport height). */\n  maxHeight?: number;\n  /** Px of the window that must stay inside the viewport (default 56). */\n  keepVisible?: number;\n  /** Step in px for keyboard moving (default 24). */\n  moveStep?: number;\n  /** Step in px for keyboard resizing (default 24). */\n  resizeStep?: number;\n\n  /** Inline stacking order. The host owns z-order across several windows. */\n  zIndex?: number;\n  /** Called on pointerdown anywhere in the window, so the host can raise it. */\n  onActivate?: (() => void) | undefined;\n\n  /** Shade the window down to its title bar. */\n  collapsed?: boolean;\n  /** Initial collapsed state when uncontrolled. */\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: ((collapsed: boolean) => void) | undefined;\n  /** Render the built-in collapse toggle (default true). */\n  collapsible?: boolean;\n\n  /** Allow drag-to-move by the title bar (default true). */\n  movable?: boolean;\n  /** Allow drag-to-resize from the edges and corners (default true). */\n  resizable?: boolean;\n  /** Close on Escape while focus is inside the window (default false). */\n  closeOnEsc?: boolean;\n  onClose?: (() => void) | undefined;\n\n  /** Accessible label for the move handle. */\n  moveHandleAriaLabel?: string;\n  /** Accessible label for the resize handle. */\n  resizeHandleAriaLabel?: string;\n  /** Accessible label for the close button. */\n  closeAriaLabel?: string;\n  /** Accessible label for the collapse toggle while expanded. */\n  collapseAriaLabel?: string;\n  /** Accessible label for the collapse toggle while collapsed. */\n  expandAriaLabel?: string;\n\n  \"aria-label\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface Rect {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\ninterface Viewport {\n  width: number;\n  height: number;\n}\n\n/** Sign vector per resize direction: how the pointer delta maps onto x/y/width/height. */\nconst RESIZE_DIRS: Record<FloatingWindowResizeDir, { dx: 0 | 1; dy: 0 | 1; dw: -1 | 0 | 1; dh: -1 | 0 | 1 }> = {\n  n: { dx: 0, dy: 1, dw: 0, dh: -1 },\n  s: { dx: 0, dy: 0, dw: 0, dh: 1 },\n  e: { dx: 0, dy: 0, dw: 1, dh: 0 },\n  w: { dx: 1, dy: 0, dw: -1, dh: 0 },\n  ne: { dx: 0, dy: 1, dw: 1, dh: -1 },\n  nw: { dx: 1, dy: 1, dw: -1, dh: -1 },\n  se: { dx: 0, dy: 0, dw: 1, dh: 1 },\n  sw: { dx: 1, dy: 0, dw: -1, dh: 1 },\n};\n\nconst RESIZE_ORDER: FloatingWindowResizeDir[] = [\"n\", \"s\", \"e\", \"w\", \"ne\", \"nw\", \"se\", \"sw\"];\n\nconst viewportOf = (): Viewport =>\n  typeof window === \"undefined\" ? { width: 0, height: 0 } : { width: window.innerWidth, height: window.innerHeight };\n\n/**\n * Free-floating, non-modal window: draggable by its title bar, resizable from every\n * edge and corner, clamped so a grabbable strip always stays on screen.\n *\n * Unlike Sheet/Modal it is deliberately NOT an overlay layer: no backdrop, no focus\n * trap, no `data-smwb-overlay-layer`. Several windows are meant to be open and usable\n * at once alongside the page behind them, so it must not trap focus, swallow clicks,\n * or steal Escape from a Modal stacked above it. Stacking order is the host's job —\n * pass `zIndex` and raise the window from `onActivate`.\n */\nexport function FloatingWindow(props: ParentProps<FloatingWindowProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      minWidth: 200,\n      minHeight: 120,\n      keepVisible: 56,\n      moveStep: 24,\n      resizeStep: 24,\n      collapsible: true,\n      movable: true,\n      resizable: true,\n      closeOnEsc: false,\n      defaultPosition: { x: 24, y: 24 },\n      defaultSize: { width: 360, height: 420 },\n      defaultCollapsed: false,\n      moveHandleAriaLabel: \"Move window\",\n      resizeHandleAriaLabel: \"Resize window\",\n      closeAriaLabel: \"Close window\",\n      collapseAriaLabel: \"Collapse window\",\n      expandAriaLabel: \"Expand window\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"open\",\n    \"title\",\n    \"headerActions\",\n    \"position\",\n    \"defaultPosition\",\n    \"onPositionChange\",\n    \"onMoveEnd\",\n    \"size\",\n    \"defaultSize\",\n    \"onResize\",\n    \"onResizeEnd\",\n    \"minWidth\",\n    \"minHeight\",\n    \"maxWidth\",\n    \"maxHeight\",\n    \"keepVisible\",\n    \"moveStep\",\n    \"resizeStep\",\n    \"zIndex\",\n    \"onActivate\",\n    \"collapsed\",\n    \"defaultCollapsed\",\n    \"onCollapsedChange\",\n    \"collapsible\",\n    \"movable\",\n    \"resizable\",\n    \"closeOnEsc\",\n    \"onClose\",\n    \"moveHandleAriaLabel\",\n    \"resizeHandleAriaLabel\",\n    \"closeAriaLabel\",\n    \"collapseAriaLabel\",\n    \"expandAriaLabel\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  let rootEl: HTMLDivElement | undefined;\n  const titleId = createId(undefined, \"smwb-floating-window-title\");\n\n  const transition = createCssTransition({\n    in: () => local.open,\n    timeout: { enter: 120, exit: 120 },\n    classNames: { enterDone: \"smwb-floating-window_entered\" },\n    appear: true,\n  });\n\n  const [position, setPosition] = createControllableState<FloatingWindowPosition>({\n    value: () => local.position,\n    defaultValue: local.defaultPosition,\n    onChange: (next) => local.onPositionChange?.(next),\n  });\n  const [size, setSize] = createControllableState<FloatingWindowSize>({\n    value: () => local.size,\n    defaultValue: local.defaultSize,\n    onChange: (next) => local.onResize?.(next),\n  });\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.collapsed,\n    defaultValue: local.defaultCollapsed,\n    onChange: (next) => local.onCollapsedChange?.(next),\n  });\n\n  /**\n   * Size first, then position against the clamped size. `y` is never negative, so the\n   * title bar can never be dragged above the top edge and become ungrabbable — the gap\n   * that makes an off-screen Sheet unrecoverable.\n   */\n  const clampRect = (rect: Rect, vp: Viewport): Rect => {\n    const maxW = local.maxWidth ?? vp.width;\n    const maxH = local.maxHeight ?? vp.height;\n    const width = Math.max(local.minWidth, Math.min(maxW, rect.width));\n    const height = Math.max(local.minHeight, Math.min(maxH, rect.height));\n    const keep = Math.min(local.keepVisible, width);\n    const x = Math.max(keep - width, Math.min(vp.width - keep, rect.x));\n    const y = Math.max(0, Math.min(Math.max(0, vp.height - keep), rect.y));\n    return { x, y, width, height };\n  };\n\n  /**\n   * Where a window is placed before anyone touches it: fully inside the viewport when\n   * it fits at all. `clampRect` alone only keeps `keepVisible` px reachable, which is\n   * right for a window the user parked at an edge but wrong on opening — a 760px\n   * default on a 375px phone opened a quarter of a screen off to the right.\n   */\n  const fitRect = (rect: Rect, vp: Viewport): Rect => {\n    const clamped = clampRect(rect, vp);\n    return {\n      ...clamped,\n      x: Math.max(0, Math.min(clamped.x, vp.width - clamped.width)),\n      y: Math.max(0, Math.min(clamped.y, vp.height - clamped.height)),\n    };\n  };\n\n  // Set by the first move/resize: from then on the user's placement wins and only the\n  // reachability clamp applies, so a window can still be parked half off-screen.\n  const [placed, setPlaced] = createSignal(false);\n\n  /** The geometry actually rendered. Clamping the CONTROLLED value (not just drag\n   *  frames) means a rect restored from a larger monitor lands on screen immediately. */\n  const rect: Accessor<Rect> = createMemo(() => {\n    const current = { x: position().x, y: position().y, width: size().width, height: size().height };\n    return placed() ? clampRect(current, viewportOf()) : fitRect(current, viewportOf());\n  });\n\n  const commitRect = (next: Rect, gesture = true): void => {\n    if (gesture) setPlaced(true);\n    const clamped = clampRect(next, viewportOf());\n    const pos = position();\n    const dim = size();\n    if (clamped.x !== pos.x || clamped.y !== pos.y) setPosition({ x: clamped.x, y: clamped.y });\n    if (clamped.width !== dim.width || clamped.height !== dim.height) {\n      setSize({ width: clamped.width, height: clamped.height });\n    }\n  };\n\n  // A closed window forgets that it was moved: opening it again should land on screen\n  // like the first time, whatever the viewport is now.\n  createEffect(() => {\n    if (!local.open) setPlaced(false);\n  });\n\n  // Re-clamp when the viewport shrinks, so a window parked near an edge on a large\n  // screen stays reachable on a small one. Sheet has no such listener, which is why a\n  // dragged sheet survives a viewport shrink oversized.\n  createEffect(() => {\n    if (isServer || !local.open) return;\n    const onViewportResize = (): void => commitRect(rect(), false);\n    window.addEventListener(\"resize\", onViewportResize);\n    onCleanup(() => window.removeEventListener(\"resize\", onViewportResize));\n  });\n\n  // Escape only while focus is inside this window. FloatingWindow is not an overlay\n  // layer, so `isTopOverlayLayer` (document order, not z-index) would be the wrong\n  // arbiter with several windows open.\n  createEffect(() => {\n    if (isServer || !local.open || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key !== \"Escape\") return;\n      if (!rootEl || !rootEl.contains(document.activeElement)) return;\n      local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  const activate = (): void => {\n    local.onActivate?.();\n    // Only when focus is elsewhere — an unconditional focus() would steal the caret\n    // from an input inside the window on every raise.\n    if (rootEl && !rootEl.contains(document.activeElement)) rootEl.focus({ preventScroll: true });\n  };\n\n  // Pointer capture keeps `pointermove` flowing to the handle even outside it, so there\n  // are no document-level listeners to leak (Sheet's pattern, not screenDivider's).\n  let move: { px: number; py: number; x: number; y: number } | null = null;\n\n  const onMoveHandlePointerDown = (event: PointerEvent & { currentTarget: HTMLDivElement }): void => {\n    if (!local.movable) return;\n    // Header buttons stay clickable.\n    if ((event.target as Element | null)?.closest(\"button,[data-no-drag]\")) return;\n    event.preventDefault();\n    const current = rect();\n    move = { px: event.clientX, py: event.clientY, x: current.x, y: current.y };\n    try {\n      event.currentTarget.setPointerCapture?.(event.pointerId);\n    } catch {\n      /* best-effort */\n    }\n  };\n\n  const onMoveHandlePointerMove = (event: PointerEvent): void => {\n    if (!move) return;\n    const current = rect();\n    commitRect({\n      ...current,\n      x: move.x + event.clientX - move.px,\n      y: move.y + event.clientY - move.py,\n    });\n  };\n\n  const endMove = (event: PointerEvent & { currentTarget: HTMLDivElement }): void => {\n    if (move) {\n      move = null;\n      const current = rect();\n      local.onMoveEnd?.({ x: current.x, y: current.y });\n    }\n    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n      event.currentTarget.releasePointerCapture?.(event.pointerId);\n    }\n  };\n\n  let resize: { dir: FloatingWindowResizeDir; px: number; py: number; rect: Rect } | null = null;\n\n  const onResizePointerDown = (\n    dir: FloatingWindowResizeDir,\n    event: PointerEvent & { currentTarget: HTMLDivElement }\n  ): void => {\n    event.preventDefault();\n    event.stopPropagation();\n    resize = { dir, px: event.clientX, py: event.clientY, rect: rect() };\n    // Grabbing a resize grip is an interaction with the window, so raise it too. (The root\n    // listener cannot be relied on here — see the `on:pointerdown` note on the root.)\n    activate();\n    try {\n      event.currentTarget.setPointerCapture?.(event.pointerId);\n    } catch {\n      /* best-effort */\n    }\n  };\n\n  const onResizePointerMove = (event: PointerEvent): void => {\n    if (!resize) return;\n    const sign = RESIZE_DIRS[resize.dir];\n    const dx = event.clientX - resize.px;\n    const dy = event.clientY - resize.py;\n    const start = resize.rect;\n    // A west/north drag moves the origin AND changes the size, so width is recomputed from\n    // the moved edge rather than from the delta alone — otherwise dragging past minWidth\n    // would keep sliding the window instead of stopping at the minimum.\n    //\n    // The size must be clamped to BOTH bounds here, before the origin is derived from it.\n    // Clamping only the minimum and leaving the maximum to commitRect's own clamp would\n    // compute the origin from a width that then gets shrunk, so the edge the user is NOT\n    // dragging would drift away under the cursor.\n    const vp = viewportOf();\n    const maxW = local.maxWidth ?? vp.width;\n    const maxH = local.maxHeight ?? vp.height;\n    const width = Math.min(maxW, Math.max(local.minWidth, start.width + sign.dw * dx));\n    const height = Math.min(maxH, Math.max(local.minHeight, start.height + sign.dh * dy));\n    commitRect({\n      x: sign.dx ? start.x + start.width - width : start.x,\n      y: sign.dy ? start.y + start.height - height : start.y,\n      width,\n      height,\n    });\n  };\n\n  const endResize = (event: PointerEvent & { currentTarget: HTMLDivElement }): void => {\n    if (resize) {\n      resize = null;\n      const current = rect();\n      local.onResizeEnd?.({ width: current.width, height: current.height });\n    }\n    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n      event.currentTarget.releasePointerCapture?.(event.pointerId);\n    }\n  };\n\n  /** A keypress is a COMPLETE gesture, so it reports move/resize end as well as the\n   *  per-frame change — otherwise a consumer that persists only on `*End` (the documented\n   *  way to avoid thrashing storage during a drag) would silently never save\n   *  keyboard-driven geometry. */\n  const endKeyboardGesture = (resized: boolean): void => {\n    const current = rect();\n    if (resized) local.onResizeEnd?.({ width: current.width, height: current.height });\n    else local.onMoveEnd?.({ x: current.x, y: current.y });\n  };\n\n  /** Arrows move; Shift+Arrows resize. */\n  const onMoveHandleKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    const current = rect();\n    const step = event.shiftKey ? local.resizeStep : local.moveStep;\n    const delta: Record<string, [number, number]> = {\n      ArrowLeft: [-step, 0],\n      ArrowRight: [step, 0],\n      ArrowUp: [0, -step],\n      ArrowDown: [0, step],\n    };\n    const d = delta[event.key];\n    if (!d) return;\n    event.preventDefault();\n    if (event.shiftKey) {\n      commitRect({ ...current, width: current.width + d[0], height: current.height + d[1] });\n    } else {\n      commitRect({ ...current, x: current.x + d[0], y: current.y + d[1] });\n    }\n    endKeyboardGesture(event.shiftKey);\n  };\n\n  const onResizeHandleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    const current = rect();\n    const vp = viewportOf();\n    if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      const dir = event.key === \"ArrowRight\" ? 1 : -1;\n      commitRect({ ...current, width: current.width + dir * local.resizeStep });\n    } else if (event.key === \"ArrowUp\" || event.key === \"ArrowDown\") {\n      event.preventDefault();\n      const dir = event.key === \"ArrowDown\" ? 1 : -1;\n      commitRect({ ...current, height: current.height + dir * local.resizeStep });\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      commitRect({ ...current, width: local.minWidth, height: local.minHeight });\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      commitRect({ ...current, width: local.maxWidth ?? vp.width, height: local.maxHeight ?? vp.height });\n    } else {\n      return;\n    }\n    endKeyboardGesture(true);\n  };\n\n  const toggleCollapsed = (): void => setCollapsed((prev) => !prev);\n\n  return (\n    <Show when={transition.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <div\n          {...rest}\n          ref={mergeRefs(local.ref, (el) => (rootEl = el as HTMLDivElement))}\n          data-testid=\"floating-window\"\n          role=\"dialog\"\n          tabindex={-1}\n          aria-labelledby={local.title ? titleId : undefined}\n          class={cn(\"smwb-floating-window\", local.class, transition.classes(), {\n            \"smwb-collapsed\": collapsed(),\n          })}\n          style={{\n            left: `${rect().x}px`,\n            top: `${rect().y}px`,\n            width: `${rect().width}px`,\n            ...(collapsed() ? {} : { height: `${rect().height}px` }),\n            ...(local.zIndex === undefined ? {} : { \"z-index\": local.zIndex }),\n            ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n          }}\n          // `on:pointerdown` (native listener), NOT `onPointerDown` (delegated). Solid's\n          // delegated dispatcher walks `_$host`, the LOGICAL owner chain, and Portal sets\n          // `_$host` to its marker's parent — so an event raised inside content a consumer\n          // portals into this window never reaches this handler, and clicking such a panel\n          // would silently fail to raise the window. A native listener follows the real DOM\n          // tree, where the portaled container genuinely is a descendant.\n          on:pointerdown={activate}\n        >\n          <div\n            class=\"smwb-floating-window__header\"\n            data-testid=\"floating-window-header\"\n            onPointerDown={onMoveHandlePointerDown}\n            onPointerMove={onMoveHandlePointerMove}\n            onPointerUp={endMove}\n            onPointerCancel={endMove}\n          >\n            {/* The move affordance is the grip, not the header: the header also hosts the\n                collapse/close buttons and any consumer `headerActions`, and nesting those\n                inside a role=\"button\" is an a11y violation. Pointer drag still works\n                anywhere on the header; only the keyboard affordance lives here. */}\n            <span\n              class=\"smwb-floating-window__grip\"\n              data-testid=\"floating-window-move\"\n              role=\"button\"\n              tabindex={0}\n              aria-label={local.moveHandleAriaLabel}\n              onKeyDown={onMoveHandleKeyDown}\n            >\n              <Icon name=\"drag_indicator\" />\n            </span>\n            <Show when={local.title}>\n              <span class=\"smwb-floating-window__title\" id={titleId}>\n                {local.title}\n              </span>\n            </Show>\n            <div class=\"smwb-floating-window__actions\" data-no-drag>\n              {local.headerActions}\n              <Show when={local.collapsible}>\n                <button\n                  type=\"button\"\n                  class=\"smwb-floating-window__action\"\n                  data-testid=\"floating-window-collapse\"\n                  aria-label={collapsed() ? local.expandAriaLabel : local.collapseAriaLabel}\n                  aria-expanded={!collapsed()}\n                  onClick={toggleCollapsed}\n                >\n                  <Icon name={collapsed() ? \"open_in_full\" : \"close_fullscreen\"} />\n                </button>\n              </Show>\n              <Show when={local.onClose}>\n                <button\n                  type=\"button\"\n                  class=\"smwb-floating-window__action\"\n                  data-testid=\"floating-window-close\"\n                  aria-label={local.closeAriaLabel}\n                  onClick={() => local.onClose?.()}\n                >\n                  <Icon name=\"close\" />\n                </button>\n              </Show>\n            </div>\n          </div>\n\n          <Show when={!collapsed()}>\n            <div class=\"smwb-floating-window__body\" data-testid=\"floating-window-body\">\n              {local.children}\n            </div>\n          </Show>\n\n          <Show when={local.resizable && !collapsed()}>\n            <For each={RESIZE_ORDER}>\n              {(dir) => (\n                <div\n                  class={cn(\"smwb-floating-window__resize\", `smwb-floating-window__resize_${dir}`)}\n                  data-testid={`floating-window-resize-${dir}`}\n                  // Only the south-east grip is reachable by keyboard: eight tab stops per\n                  // window would make Tab unusable once a few windows are open.\n                  {...(dir === \"se\"\n                    ? {\n                        role: \"separator\",\n                        tabindex: 0,\n                        \"aria-label\": local.resizeHandleAriaLabel,\n                        \"aria-valuemin\": local.minWidth,\n                        \"aria-valuemax\": Math.round(local.maxWidth ?? viewportOf().width),\n                        \"aria-valuenow\": Math.round(rect().width),\n                        onKeyDown: onResizeHandleKeyDown,\n                      }\n                    : { \"aria-hidden\": true, tabindex: -1 })}\n                  onPointerDown={(event) => onResizePointerDown(dir, event)}\n                  onPointerMove={onResizePointerMove}\n                  onPointerUp={endResize}\n                  onPointerCancel={endResize}\n                />\n              )}\n            </For>\n          </Show>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\nexport default FloatingWindow;\n"],"mappings":"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","names":["rect"],"file":"floatingWindow.jsx"}
+{"version":3,"sources":["../../../../../src/components/layout/floatingWindow/floatingWindow.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/floatingWindow/floatingWindow.entry.less\";\nimport {\n  type Accessor,\n  For,\n  type JSX,\n  type ParentProps,\n  Show,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { hasOverlayLayerAbove } from \"../../../primitives/overlayLayer\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport interface FloatingWindowPosition {\n  x: number;\n  y: number;\n}\n\nexport interface FloatingWindowSize {\n  width: number;\n  height: number;\n}\n\n/** The eight edge/corner resize directions. */\nexport type FloatingWindowResizeDir = \"n\" | \"s\" | \"e\" | \"w\" | \"ne\" | \"nw\" | \"se\" | \"sw\";\n\nexport interface FloatingWindowProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onResize\" | \"title\"> {\n  /** Controlled open state of the window. */\n  open: boolean;\n  /** Title bar content. When given, the window is labelled by it. */\n  title?: JSX.Element;\n  /** Extra header controls, rendered before the built-in collapse/close buttons. */\n  headerActions?: JSX.Element;\n\n  /** Controlled top-left position in viewport px. */\n  position?: FloatingWindowPosition;\n  /** Initial position when uncontrolled. */\n  defaultPosition?: FloatingWindowPosition;\n  /** Called on every move frame and on viewport re-clamp, with the clamped position. */\n  onPositionChange?: ((position: FloatingWindowPosition) => void) | undefined;\n  /** Called once when a move gesture ends — the point at which to persist. */\n  onMoveEnd?: ((position: FloatingWindowPosition) => void) | undefined;\n\n  /** Controlled size in px. */\n  size?: FloatingWindowSize;\n  /** Initial size when uncontrolled. */\n  defaultSize?: FloatingWindowSize;\n  /** Called on every resize frame and on viewport re-clamp, with the clamped size. */\n  onResize?: ((size: FloatingWindowSize) => void) | undefined;\n  /** Called once when a resize gesture ends — the point at which to persist. */\n  onResizeEnd?: ((size: FloatingWindowSize) => void) | undefined;\n\n  /** Minimum width in px (default 200). */\n  minWidth?: number;\n  /** Minimum height in px (default 120). */\n  minHeight?: number;\n  /** Maximum width in px (default: viewport width). */\n  maxWidth?: number;\n  /** Maximum height in px (default: viewport height). */\n  maxHeight?: number;\n  /** Px of the window that must stay inside the viewport (default 56). */\n  keepVisible?: number;\n  /** Step in px for keyboard moving (default 24). */\n  moveStep?: number;\n  /** Step in px for keyboard resizing (default 24). */\n  resizeStep?: number;\n\n  /** Inline stacking order. The host owns z-order across several windows. */\n  zIndex?: number;\n  /** Called on pointerdown anywhere in the window, so the host can raise it. */\n  onActivate?: (() => void) | undefined;\n\n  /** Shade the window down to its title bar. */\n  collapsed?: boolean;\n  /** Initial collapsed state when uncontrolled. */\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: ((collapsed: boolean) => void) | undefined;\n  /** Render the built-in collapse toggle (default true). */\n  collapsible?: boolean;\n\n  /** Allow drag-to-move by the title bar (default true). */\n  movable?: boolean;\n  /** Allow drag-to-resize from the edges and corners (default true). */\n  resizable?: boolean;\n  /** Close on Escape while focus is inside the window (default false). */\n  closeOnEsc?: boolean;\n  onClose?: (() => void) | undefined;\n\n  /** Accessible label for the move handle. */\n  moveHandleAriaLabel?: string;\n  /** Accessible label for the resize handle. */\n  resizeHandleAriaLabel?: string;\n  /** Accessible label for the close button. */\n  closeAriaLabel?: string;\n  /** Accessible label for the collapse toggle while expanded. */\n  collapseAriaLabel?: string;\n  /** Accessible label for the collapse toggle while collapsed. */\n  expandAriaLabel?: string;\n\n  \"aria-label\"?: string;\n  /** Test id of the window's root `<div>`; `floating-window` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface Rect {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\ninterface Viewport {\n  width: number;\n  height: number;\n}\n\n/** Sign vector per resize direction: how the pointer delta maps onto x/y/width/height. */\nconst RESIZE_DIRS: Record<FloatingWindowResizeDir, { dx: 0 | 1; dy: 0 | 1; dw: -1 | 0 | 1; dh: -1 | 0 | 1 }> = {\n  n: { dx: 0, dy: 1, dw: 0, dh: -1 },\n  s: { dx: 0, dy: 0, dw: 0, dh: 1 },\n  e: { dx: 0, dy: 0, dw: 1, dh: 0 },\n  w: { dx: 1, dy: 0, dw: -1, dh: 0 },\n  ne: { dx: 0, dy: 1, dw: 1, dh: -1 },\n  nw: { dx: 1, dy: 1, dw: -1, dh: -1 },\n  se: { dx: 0, dy: 0, dw: 1, dh: 1 },\n  sw: { dx: 1, dy: 0, dw: -1, dh: 1 },\n};\n\nconst RESIZE_ORDER: FloatingWindowResizeDir[] = [\"n\", \"s\", \"e\", \"w\", \"ne\", \"nw\", \"se\", \"sw\"];\n\nconst viewportOf = (): Viewport =>\n  typeof window === \"undefined\" ? { width: 0, height: 0 } : { width: window.innerWidth, height: window.innerHeight };\n\n/**\n * Free-floating, non-modal window: draggable by its title bar, resizable from every\n * edge and corner, clamped so a grabbable strip always stays on screen.\n *\n * Unlike Sheet/Modal it is deliberately NOT an overlay layer: no backdrop, no focus\n * trap, no `data-smwb-overlay-layer`. Several windows are meant to be open and usable\n * at once alongside the page behind them, so it must not trap focus, swallow clicks,\n * or steal Escape from a Modal stacked above it. Stacking order is the host's job —\n * pass `zIndex` and raise the window from `onActivate`.\n */\nexport function FloatingWindow(props: ParentProps<FloatingWindowProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      minWidth: 200,\n      minHeight: 120,\n      keepVisible: 56,\n      moveStep: 24,\n      resizeStep: 24,\n      collapsible: true,\n      movable: true,\n      resizable: true,\n      closeOnEsc: false,\n      defaultPosition: { x: 24, y: 24 },\n      defaultSize: { width: 360, height: 420 },\n      defaultCollapsed: false,\n      moveHandleAriaLabel: \"Move window\",\n      resizeHandleAriaLabel: \"Resize window\",\n      closeAriaLabel: \"Close window\",\n      collapseAriaLabel: \"Collapse window\",\n      expandAriaLabel: \"Expand window\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"open\",\n    \"title\",\n    \"headerActions\",\n    \"position\",\n    \"defaultPosition\",\n    \"onPositionChange\",\n    \"onMoveEnd\",\n    \"size\",\n    \"defaultSize\",\n    \"onResize\",\n    \"onResizeEnd\",\n    \"minWidth\",\n    \"minHeight\",\n    \"maxWidth\",\n    \"maxHeight\",\n    \"keepVisible\",\n    \"moveStep\",\n    \"resizeStep\",\n    \"zIndex\",\n    \"onActivate\",\n    \"collapsed\",\n    \"defaultCollapsed\",\n    \"onCollapsedChange\",\n    \"collapsible\",\n    \"movable\",\n    \"resizable\",\n    \"closeOnEsc\",\n    \"onClose\",\n    \"moveHandleAriaLabel\",\n    \"resizeHandleAriaLabel\",\n    \"closeAriaLabel\",\n    \"collapseAriaLabel\",\n    \"expandAriaLabel\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  let rootEl: HTMLDivElement | undefined;\n  const titleId = createId(undefined, \"smwb-floating-window-title\");\n\n  const transition = createCssTransition({\n    in: () => local.open,\n    timeout: { enter: 120, exit: 120 },\n    classNames: { enterDone: \"smwb-floating-window_entered\" },\n    appear: true,\n  });\n\n  const [position, setPosition] = createControllableState<FloatingWindowPosition>({\n    value: () => local.position,\n    defaultValue: local.defaultPosition,\n    onChange: (next) => local.onPositionChange?.(next),\n  });\n  const [size, setSize] = createControllableState<FloatingWindowSize>({\n    value: () => local.size,\n    defaultValue: local.defaultSize,\n    onChange: (next) => local.onResize?.(next),\n  });\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.collapsed,\n    defaultValue: local.defaultCollapsed,\n    onChange: (next) => local.onCollapsedChange?.(next),\n  });\n\n  /**\n   * Size first, then position against the clamped size. `y` is never negative, so the\n   * title bar can never be dragged above the top edge and become ungrabbable — the gap\n   * that makes an off-screen Sheet unrecoverable.\n   */\n  const clampRect = (rect: Rect, vp: Viewport): Rect => {\n    const maxW = local.maxWidth ?? vp.width;\n    const maxH = local.maxHeight ?? vp.height;\n    const width = Math.max(local.minWidth, Math.min(maxW, rect.width));\n    const height = Math.max(local.minHeight, Math.min(maxH, rect.height));\n    const keep = Math.min(local.keepVisible, width);\n    const x = Math.max(keep - width, Math.min(vp.width - keep, rect.x));\n    const y = Math.max(0, Math.min(Math.max(0, vp.height - keep), rect.y));\n    return { x, y, width, height };\n  };\n\n  /**\n   * Where a window is placed before anyone touches it: fully inside the viewport when\n   * it fits at all. `clampRect` alone only keeps `keepVisible` px reachable, which is\n   * right for a window the user parked at an edge but wrong on opening — a 760px\n   * default on a 375px phone opened a quarter of a screen off to the right.\n   */\n  const fitRect = (rect: Rect, vp: Viewport): Rect => {\n    const clamped = clampRect(rect, vp);\n    return {\n      ...clamped,\n      x: Math.max(0, Math.min(clamped.x, vp.width - clamped.width)),\n      y: Math.max(0, Math.min(clamped.y, vp.height - clamped.height)),\n    };\n  };\n\n  // Set by the first move/resize: from then on the user's placement wins and only the\n  // reachability clamp applies, so a window can still be parked half off-screen.\n  const [placed, setPlaced] = createSignal(false);\n\n  /** The geometry actually rendered. Clamping the CONTROLLED value (not just drag\n   *  frames) means a rect restored from a larger monitor lands on screen immediately. */\n  const rect: Accessor<Rect> = createMemo(() => {\n    const current = { x: position().x, y: position().y, width: size().width, height: size().height };\n    return placed() ? clampRect(current, viewportOf()) : fitRect(current, viewportOf());\n  });\n\n  const commitRect = (next: Rect, gesture = true): void => {\n    if (gesture) setPlaced(true);\n    const clamped = clampRect(next, viewportOf());\n    const pos = position();\n    const dim = size();\n    if (clamped.x !== pos.x || clamped.y !== pos.y) setPosition({ x: clamped.x, y: clamped.y });\n    if (clamped.width !== dim.width || clamped.height !== dim.height) {\n      setSize({ width: clamped.width, height: clamped.height });\n    }\n  };\n\n  // A closed window forgets that it was moved: opening it again should land on screen\n  // like the first time, whatever the viewport is now.\n  createEffect(() => {\n    if (!local.open) setPlaced(false);\n  });\n\n  // Re-clamp when the viewport shrinks, so a window parked near an edge on a large\n  // screen stays reachable on a small one. Sheet has no such listener, which is why a\n  // dragged sheet survives a viewport shrink oversized.\n  createEffect(() => {\n    if (isServer || !local.open) return;\n    const onViewportResize = (): void => commitRect(rect(), false);\n    window.addEventListener(\"resize\", onViewportResize);\n    onCleanup(() => window.removeEventListener(\"resize\", onViewportResize));\n  });\n\n  // Escape only while focus is inside this window. FloatingWindow is not an overlay\n  // layer, so `isTopOverlayLayer` (document order, not z-index) would be the wrong\n  // arbiter with several windows open. An open layer above it, such as a select menu\n  // opened from inside it, takes the Escape first; other windows never do.\n  createEffect(() => {\n    if (isServer || !local.open || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      // An Escape handled inside the window, e.g. by a menu closing on it, is not the window's.\n      if (event.defaultPrevented) return;\n      if (event.key !== \"Escape\") return;\n      if (!rootEl || !rootEl.contains(document.activeElement) || hasOverlayLayerAbove(rootEl)) return;\n      local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  const activate = (): void => {\n    local.onActivate?.();\n    // Only when focus is elsewhere — an unconditional focus() would steal the caret\n    // from an input inside the window on every raise.\n    if (rootEl && !rootEl.contains(document.activeElement)) rootEl.focus({ preventScroll: true });\n  };\n\n  // Pointer capture keeps `pointermove` flowing to the handle even outside it, so there\n  // are no document-level listeners to leak (Sheet's pattern, not screenDivider's).\n  let move: { px: number; py: number; x: number; y: number } | null = null;\n\n  const onMoveHandlePointerDown = (event: PointerEvent & { currentTarget: HTMLDivElement }): void => {\n    if (!local.movable) return;\n    // Header buttons stay clickable.\n    if ((event.target as Element | null)?.closest(\"button,[data-no-drag]\")) return;\n    event.preventDefault();\n    const current = rect();\n    move = { px: event.clientX, py: event.clientY, x: current.x, y: current.y };\n    try {\n      event.currentTarget.setPointerCapture?.(event.pointerId);\n    } catch {\n      /* best-effort */\n    }\n  };\n\n  const onMoveHandlePointerMove = (event: PointerEvent): void => {\n    if (!move) return;\n    const current = rect();\n    commitRect({\n      ...current,\n      x: move.x + event.clientX - move.px,\n      y: move.y + event.clientY - move.py,\n    });\n  };\n\n  const endMove = (event: PointerEvent & { currentTarget: HTMLDivElement }): void => {\n    if (move) {\n      move = null;\n      const current = rect();\n      local.onMoveEnd?.({ x: current.x, y: current.y });\n    }\n    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n      event.currentTarget.releasePointerCapture?.(event.pointerId);\n    }\n  };\n\n  let resize: { dir: FloatingWindowResizeDir; px: number; py: number; rect: Rect } | null = null;\n\n  const onResizePointerDown = (\n    dir: FloatingWindowResizeDir,\n    event: PointerEvent & { currentTarget: HTMLDivElement }\n  ): void => {\n    event.preventDefault();\n    event.stopPropagation();\n    resize = { dir, px: event.clientX, py: event.clientY, rect: rect() };\n    // Grabbing a resize grip is an interaction with the window, so raise it too. (The root\n    // listener cannot be relied on here — see the `on:pointerdown` note on the root.)\n    activate();\n    try {\n      event.currentTarget.setPointerCapture?.(event.pointerId);\n    } catch {\n      /* best-effort */\n    }\n  };\n\n  const onResizePointerMove = (event: PointerEvent): void => {\n    if (!resize) return;\n    const sign = RESIZE_DIRS[resize.dir];\n    const dx = event.clientX - resize.px;\n    const dy = event.clientY - resize.py;\n    const start = resize.rect;\n    // A west/north drag moves the origin AND changes the size, so width is recomputed from\n    // the moved edge rather than from the delta alone — otherwise dragging past minWidth\n    // would keep sliding the window instead of stopping at the minimum.\n    //\n    // The size must be clamped to BOTH bounds here, before the origin is derived from it.\n    // Clamping only the minimum and leaving the maximum to commitRect's own clamp would\n    // compute the origin from a width that then gets shrunk, so the edge the user is NOT\n    // dragging would drift away under the cursor.\n    const vp = viewportOf();\n    const maxW = local.maxWidth ?? vp.width;\n    const maxH = local.maxHeight ?? vp.height;\n    const width = Math.min(maxW, Math.max(local.minWidth, start.width + sign.dw * dx));\n    const height = Math.min(maxH, Math.max(local.minHeight, start.height + sign.dh * dy));\n    commitRect({\n      x: sign.dx ? start.x + start.width - width : start.x,\n      y: sign.dy ? start.y + start.height - height : start.y,\n      width,\n      height,\n    });\n  };\n\n  const endResize = (event: PointerEvent & { currentTarget: HTMLDivElement }): void => {\n    if (resize) {\n      resize = null;\n      const current = rect();\n      local.onResizeEnd?.({ width: current.width, height: current.height });\n    }\n    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n      event.currentTarget.releasePointerCapture?.(event.pointerId);\n    }\n  };\n\n  /** A keypress is a COMPLETE gesture, so it reports move/resize end as well as the\n   *  per-frame change — otherwise a consumer that persists only on `*End` (the documented\n   *  way to avoid thrashing storage during a drag) would silently never save\n   *  keyboard-driven geometry. */\n  const endKeyboardGesture = (resized: boolean): void => {\n    const current = rect();\n    if (resized) local.onResizeEnd?.({ width: current.width, height: current.height });\n    else local.onMoveEnd?.({ x: current.x, y: current.y });\n  };\n\n  /** Arrows move; Shift+Arrows resize. */\n  const onMoveHandleKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    const current = rect();\n    const step = event.shiftKey ? local.resizeStep : local.moveStep;\n    const delta: Record<string, [number, number]> = {\n      ArrowLeft: [-step, 0],\n      ArrowRight: [step, 0],\n      ArrowUp: [0, -step],\n      ArrowDown: [0, step],\n    };\n    const d = delta[event.key];\n    if (!d) return;\n    event.preventDefault();\n    if (event.shiftKey) {\n      commitRect({ ...current, width: current.width + d[0], height: current.height + d[1] });\n    } else {\n      commitRect({ ...current, x: current.x + d[0], y: current.y + d[1] });\n    }\n    endKeyboardGesture(event.shiftKey);\n  };\n\n  const onResizeHandleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    const current = rect();\n    const vp = viewportOf();\n    if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      const dir = event.key === \"ArrowRight\" ? 1 : -1;\n      commitRect({ ...current, width: current.width + dir * local.resizeStep });\n    } else if (event.key === \"ArrowUp\" || event.key === \"ArrowDown\") {\n      event.preventDefault();\n      const dir = event.key === \"ArrowDown\" ? 1 : -1;\n      commitRect({ ...current, height: current.height + dir * local.resizeStep });\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      commitRect({ ...current, width: local.minWidth, height: local.minHeight });\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      commitRect({ ...current, width: local.maxWidth ?? vp.width, height: local.maxHeight ?? vp.height });\n    } else {\n      return;\n    }\n    endKeyboardGesture(true);\n  };\n\n  const toggleCollapsed = (): void => setCollapsed((prev) => !prev);\n\n  return (\n    <Show when={transition.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <div\n          {...rest}\n          ref={mergeRefs(local.ref, (el) => (rootEl = el as HTMLDivElement))}\n          data-testid={local[\"data-testid\"] ?? \"floating-window\"}\n          role=\"dialog\"\n          tabindex={-1}\n          // Labelled by its title when it has one; without (undefined), the\n          // caller's own stays.\n          aria-labelledby={local.title ? titleId : undefined}\n          class={cn(\"smwb-floating-window\", local.class, transition.classes(), {\n            \"smwb-collapsed\": collapsed(),\n          })}\n          style={mergeStyle(\n            {\n              left: `${rect().x}px`,\n              top: `${rect().y}px`,\n              width: `${rect().width}px`,\n              ...(collapsed() ? {} : { height: `${rect().height}px` }),\n              ...(local.zIndex === undefined ? {} : { \"z-index\": local.zIndex }),\n            },\n            local.style\n          )}\n          // `on:pointerdown` (native listener), NOT `onPointerDown` (delegated). Solid's\n          // delegated dispatcher walks `_$host`, the LOGICAL owner chain, and Portal sets\n          // `_$host` to its marker's parent — so an event raised inside content a consumer\n          // portals into this window never reaches this handler, and clicking such a panel\n          // would silently fail to raise the window. A native listener follows the real DOM\n          // tree, where the portaled container genuinely is a descendant.\n          on:pointerdown={activate}\n        >\n          <div\n            class=\"smwb-floating-window__header\"\n            data-testid=\"floating-window-header\"\n            onPointerDown={onMoveHandlePointerDown}\n            onPointerMove={onMoveHandlePointerMove}\n            onPointerUp={endMove}\n            onPointerCancel={endMove}\n          >\n            {/* The move affordance is the grip, not the header: the header also hosts the\n                collapse/close buttons and any consumer `headerActions`, and nesting those\n                inside a role=\"button\" is an a11y violation. Pointer drag still works\n                anywhere on the header; only the keyboard affordance lives here. */}\n            <span\n              class=\"smwb-floating-window__grip\"\n              data-testid=\"floating-window-move\"\n              role=\"button\"\n              tabindex={0}\n              aria-label={local.moveHandleAriaLabel}\n              onKeyDown={onMoveHandleKeyDown}\n            >\n              <Icon name=\"drag_indicator\" />\n            </span>\n            <Show when={local.title}>\n              <span class=\"smwb-floating-window__title\" id={titleId}>\n                {local.title}\n              </span>\n            </Show>\n            <div class=\"smwb-floating-window__actions\" data-no-drag>\n              {local.headerActions}\n              <Show when={local.collapsible}>\n                <button\n                  type=\"button\"\n                  class=\"smwb-floating-window__action\"\n                  data-testid=\"floating-window-collapse\"\n                  aria-label={collapsed() ? local.expandAriaLabel : local.collapseAriaLabel}\n                  aria-expanded={!collapsed()}\n                  onClick={toggleCollapsed}\n                >\n                  <Icon name={collapsed() ? \"open_in_full\" : \"close_fullscreen\"} />\n                </button>\n              </Show>\n              <Show when={local.onClose}>\n                <button\n                  type=\"button\"\n                  class=\"smwb-floating-window__action\"\n                  data-testid=\"floating-window-close\"\n                  aria-label={local.closeAriaLabel}\n                  onClick={() => local.onClose?.()}\n                >\n                  <Icon name=\"close\" />\n                </button>\n              </Show>\n            </div>\n          </div>\n\n          <Show when={!collapsed()}>\n            <div class=\"smwb-floating-window__body\" data-testid=\"floating-window-body\">\n              {local.children}\n            </div>\n          </Show>\n\n          <Show when={local.resizable && !collapsed()}>\n            <For each={RESIZE_ORDER}>\n              {(dir) => (\n                <div\n                  class={cn(\"smwb-floating-window__resize\", `smwb-floating-window__resize_${dir}`)}\n                  data-testid={`floating-window-resize-${dir}`}\n                  // Only the south-east grip is reachable by keyboard: eight tab stops per\n                  // window would make Tab unusable once a few windows are open.\n                  {...(dir === \"se\"\n                    ? {\n                        role: \"separator\",\n                        tabindex: 0,\n                        \"aria-label\": local.resizeHandleAriaLabel,\n                        \"aria-valuemin\": local.minWidth,\n                        \"aria-valuemax\": Math.round(local.maxWidth ?? viewportOf().width),\n                        \"aria-valuenow\": Math.round(rect().width),\n                        onKeyDown: onResizeHandleKeyDown,\n                      }\n                    : { \"aria-hidden\": true, tabindex: -1 })}\n                  onPointerDown={(event) => onResizePointerDown(dir, event)}\n                  onPointerMove={onResizePointerMove}\n                  onPointerUp={endResize}\n                  onPointerCancel={endResize}\n                />\n              )}\n            </For>\n          </Show>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\nexport default FloatingWindow;\n"],"mappings":"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","names":["rect"],"file":"floatingWindow.jsx"}

package/dist/source/components/layout/grid/grid.jsx

@@ -4,8 +4,13 @@ import { splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 function Grid(props) {
-  const [local, rest] = splitProps(props, ["class", "ref"]);
-  return <div {...rest} ref={mergeRefs(local.ref)} data-testid="grid" class={cn("smwb-grid", local.class)} />;
+  const [local, rest] = splitProps(props, ["class", "ref", "data-testid"]);
+  return <div
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    data-testid={local["data-testid"] ?? "grid"}
+    class={cn("smwb-grid", local.class)}
+  />;
 }
 const wrapOptions = ["wrap", "nowrap", "wrap-reverse"];
 const justifyContentOptions = [
@@ -26,7 +31,8 @@ function Row(props) {
     "direction",
     "wrap",
     "spacing",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const classes = () => {
     const isJustifyContent = local.justifyContent && justifyContentOptions.includes(local.justifyContent) && local.justifyContent !== "flex-start";
@@ -41,7 +47,7 @@ function Row(props) {
       [`smwb-grid__row--${local.wrap}`]: isFlexWrap
     });
   };
-  return <div {...rest} ref={mergeRefs(local.ref)} data-testid="grid-row" class={classes()} />;
+  return <div {...rest} ref={mergeRefs(local.ref)} data-testid={local["data-testid"] ?? "grid-row"} class={classes()} />;
 }
 const hiddenClasses = (hidden) => {
   if (hidden === void 0) {
@@ -70,7 +76,8 @@ function Column(props) {
     "lgOffset",
     "xlOffset",
     "hidden",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const classes = () => cn("smwb-grid__column", local.class, {
     [`smwb-grid__column--xs-${local.xs}`]: local.xs,
@@ -85,11 +92,11 @@ function Column(props) {
     [`smwb-grid__column--xl-offset-${local.xlOffset}`]: local.xlOffset,
     ...hiddenClasses(local.hidden)
   });
-  return <div {...rest} ref={mergeRefs(local.ref)} class={classes()} data-testid="grid-col" />;
+  return <div {...rest} ref={mergeRefs(local.ref)} class={classes()} data-testid={local["data-testid"] ?? "grid-col"} />;
 }
 function Container(props) {
   const merged = props;
-  const [local, rest] = splitProps(merged, ["class", "maxWidth", "disableGutters", "ref"]);
+  const [local, rest] = splitProps(merged, ["class", "maxWidth", "disableGutters", "ref", "data-testid"]);
   const maxWidth = () => local.maxWidth ?? "lg";
   const classes = () => cn(
     "smwb-container",
@@ -99,7 +106,12 @@ function Container(props) {
     },
     local.class
   );
-  return <div {...rest} ref={mergeRefs(local.ref)} data-testid="grid-container" class={classes()} />;
+  return <div
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    data-testid={local["data-testid"] ?? "grid-container"}
+    class={classes()}
+  />;
 }
 export {
   Column,

package/dist/source/components/layout/grid/grid.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/layout/grid/grid.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/grid/grid.entry.less\";\nimport { type JSX, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\ntype DivProps = JSX.HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement> };\n\nexport function Grid(props: DivProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"ref\"]);\n  return <div {...rest} ref={mergeRefs(local.ref)} data-testid=\"grid\" class={cn(\"smwb-grid\", local.class)} />;\n}\n\nexport type ColumnSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n/** Column width per breakpoint: 1–12 grid units, `\"auto\"` (fit content) or `true` (fill remaining). */\nexport type BreakpointType = ColumnSpan | \"auto\" | true;\n/** Column offset (empty leading columns) per breakpoint: 0–11. */\nexport type OffsetType = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;\nexport type Breakpoint = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type ResponsiveBool = boolean | Partial<Record<Breakpoint, boolean>>;\n\nexport const wrapOptions = [\"wrap\", \"nowrap\", \"wrap-reverse\"] as const;\nexport const justifyContentOptions = [\n  \"flex-start\",\n  \"center\",\n  \"flex-end\",\n  \"space-between\",\n  \"space-around\",\n  \"space-evenly\",\n] as const;\nexport const alignItemsOptions = [\"flex-start\", \"center\", \"flex-end\", \"stretch\", \"baseline\"] as const;\nexport const directionOptions = [\"row\", \"row-reverse\", \"column\", \"column-reverse\"] as const;\n\nexport interface RowProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  wrap?: (typeof wrapOptions)[number];\n  justifyContent?: (typeof justifyContentOptions)[number];\n  alignItems?: (typeof alignItemsOptions)[number];\n  direction?: (typeof directionOptions)[number];\n  spacing?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Row(props: RowProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"justifyContent\",\n    \"alignItems\",\n    \"direction\",\n    \"wrap\",\n    \"spacing\",\n    \"ref\",\n  ]);\n\n  const classes = (): string => {\n    const isJustifyContent =\n      local.justifyContent && justifyContentOptions.includes(local.justifyContent) && local.justifyContent !== \"flex-start\";\n    const isAlignItems = local.alignItems && alignItemsOptions.includes(local.alignItems) && local.alignItems !== \"flex-start\";\n    const isDirection = local.direction && directionOptions.includes(local.direction) && local.direction !== \"row\";\n    const isFlexWrap = local.wrap && wrapOptions.includes(local.wrap) && local.wrap !== \"wrap\";\n    return cn(\"smwb-grid__row\", local.class, {\n      [`smwb-grid__row--spacing-${local.spacing}`]: local.spacing,\n      [`smwb-grid__row--justifyContent-${local.justifyContent}`]: isJustifyContent,\n      [`smwb-grid__row--alignItems-${local.alignItems}`]: isAlignItems,\n      [`smwb-grid__row--direction-${local.direction}`]: isDirection,\n      [`smwb-grid__row--${local.wrap}`]: isFlexWrap,\n    });\n  };\n\n  return <div {...rest} ref={mergeRefs(local.ref)} data-testid=\"grid-row\" class={classes()} />;\n}\n\nexport interface ColumnProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"hidden\"> {\n  xs?: BreakpointType;\n  sm?: BreakpointType;\n  md?: BreakpointType;\n  lg?: BreakpointType;\n  xl?: BreakpointType;\n  xsOffset?: OffsetType;\n  smOffset?: OffsetType;\n  mdOffset?: OffsetType;\n  lgOffset?: OffsetType;\n  xlOffset?: OffsetType;\n  /** Hide column: boolean (always) or per breakpoint `{ xs:true, md:false }`. */\n  hidden?: ResponsiveBool;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst hiddenClasses = (hidden?: ResponsiveBool): Record<string, boolean> => {\n  if (hidden === undefined) {\n    return {};\n  }\n  if (typeof hidden === \"boolean\") {\n    return { \"smwb-grid__column--hidden\": hidden };\n  }\n  return (Object.keys(hidden) as Breakpoint[]).reduce<Record<string, boolean>>((acc, bp) => {\n    acc[`smwb-grid__column--hidden-${bp}`] = hidden[bp] === true;\n    acc[`smwb-grid__column--visible-${bp}`] = hidden[bp] === false;\n    return acc;\n  }, {});\n};\n\nexport function Column(props: ColumnProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"xs\",\n    \"sm\",\n    \"md\",\n    \"lg\",\n    \"xl\",\n    \"xsOffset\",\n    \"smOffset\",\n    \"mdOffset\",\n    \"lgOffset\",\n    \"xlOffset\",\n    \"hidden\",\n    \"ref\",\n  ]);\n\n  const classes = (): string =>\n    cn(\"smwb-grid__column\", local.class, {\n      [`smwb-grid__column--xs-${local.xs}`]: local.xs,\n      [`smwb-grid__column--sm-${local.sm}`]: local.sm,\n      [`smwb-grid__column--md-${local.md}`]: local.md,\n      [`smwb-grid__column--lg-${local.lg}`]: local.lg,\n      [`smwb-grid__column--xl-${local.xl}`]: local.xl,\n      [`smwb-grid__column--xs-offset-${local.xsOffset}`]: local.xsOffset,\n      [`smwb-grid__column--sm-offset-${local.smOffset}`]: local.smOffset,\n      [`smwb-grid__column--md-offset-${local.mdOffset}`]: local.mdOffset,\n      [`smwb-grid__column--lg-offset-${local.lgOffset}`]: local.lgOffset,\n      [`smwb-grid__column--xl-offset-${local.xlOffset}`]: local.xlOffset,\n      ...hiddenClasses(local.hidden),\n    });\n\n  return <div {...rest} ref={mergeRefs(local.ref)} class={classes()} data-testid=\"grid-col\" />;\n}\n\nexport type ContainerMaxWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\nexport interface ContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Max-width breakpoint cap; `false` = fluid full width. */\n  maxWidth?: ContainerMaxWidth;\n  /** Remove horizontal gutters. */\n  disableGutters?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Container(props: ContainerProps): JSX.Element {\n  const merged = props;\n  const [local, rest] = splitProps(merged, [\"class\", \"maxWidth\", \"disableGutters\", \"ref\"]);\n  const maxWidth = (): ContainerMaxWidth => local.maxWidth ?? \"lg\";\n  const classes = (): string =>\n    cn(\n      \"smwb-container\",\n      {\n        [`smwb-container--${maxWidth()}`]: maxWidth() !== false,\n        \"smwb-container--gutterless\": local.disableGutters,\n      },\n      local.class\n    );\n  return <div {...rest} ref={mergeRefs(local.ref)} data-testid=\"grid-container\" class={classes()} />;\n}\n"],"mappings":"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","names":[],"file":"grid.jsx"}
+{"version":3,"sources":["../../../../../src/components/layout/grid/grid.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/grid/grid.entry.less\";\nimport { type JSX, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\ntype DivProps = JSX.HTMLAttributes<HTMLDivElement> & {\n  /** Test id of the root `<div>`; `grid` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n};\n\nexport function Grid(props: DivProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"ref\", \"data-testid\"]);\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"grid\"}\n      class={cn(\"smwb-grid\", local.class)}\n    />\n  );\n}\n\nexport type ColumnSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n/** Column width per breakpoint: 1–12 grid units, `\"auto\"` (fit content) or `true` (fill remaining). */\nexport type BreakpointType = ColumnSpan | \"auto\" | true;\n/** Column offset (empty leading columns) per breakpoint: 0–11. */\nexport type OffsetType = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;\nexport type Breakpoint = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type ResponsiveBool = boolean | Partial<Record<Breakpoint, boolean>>;\n\nexport const wrapOptions = [\"wrap\", \"nowrap\", \"wrap-reverse\"] as const;\nexport const justifyContentOptions = [\n  \"flex-start\",\n  \"center\",\n  \"flex-end\",\n  \"space-between\",\n  \"space-around\",\n  \"space-evenly\",\n] as const;\nexport const alignItemsOptions = [\"flex-start\", \"center\", \"flex-end\", \"stretch\", \"baseline\"] as const;\nexport const directionOptions = [\"row\", \"row-reverse\", \"column\", \"column-reverse\"] as const;\n\nexport interface RowProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  wrap?: (typeof wrapOptions)[number];\n  justifyContent?: (typeof justifyContentOptions)[number];\n  alignItems?: (typeof alignItemsOptions)[number];\n  direction?: (typeof directionOptions)[number];\n  spacing?: number;\n  /** Test id of the root `<div>`; `grid-row` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Row(props: RowProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"justifyContent\",\n    \"alignItems\",\n    \"direction\",\n    \"wrap\",\n    \"spacing\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const classes = (): string => {\n    const isJustifyContent =\n      local.justifyContent && justifyContentOptions.includes(local.justifyContent) && local.justifyContent !== \"flex-start\";\n    const isAlignItems = local.alignItems && alignItemsOptions.includes(local.alignItems) && local.alignItems !== \"flex-start\";\n    const isDirection = local.direction && directionOptions.includes(local.direction) && local.direction !== \"row\";\n    const isFlexWrap = local.wrap && wrapOptions.includes(local.wrap) && local.wrap !== \"wrap\";\n    return cn(\"smwb-grid__row\", local.class, {\n      [`smwb-grid__row--spacing-${local.spacing}`]: local.spacing,\n      [`smwb-grid__row--justifyContent-${local.justifyContent}`]: isJustifyContent,\n      [`smwb-grid__row--alignItems-${local.alignItems}`]: isAlignItems,\n      [`smwb-grid__row--direction-${local.direction}`]: isDirection,\n      [`smwb-grid__row--${local.wrap}`]: isFlexWrap,\n    });\n  };\n\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} data-testid={local[\"data-testid\"] ?? \"grid-row\"} class={classes()} />\n  );\n}\n\nexport interface ColumnProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"hidden\"> {\n  xs?: BreakpointType;\n  sm?: BreakpointType;\n  md?: BreakpointType;\n  lg?: BreakpointType;\n  xl?: BreakpointType;\n  xsOffset?: OffsetType;\n  smOffset?: OffsetType;\n  mdOffset?: OffsetType;\n  lgOffset?: OffsetType;\n  xlOffset?: OffsetType;\n  /** Hide column: boolean (always) or per breakpoint `{ xs:true, md:false }`. */\n  hidden?: ResponsiveBool;\n  /** Test id of the root `<div>`; `grid-col` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst hiddenClasses = (hidden?: ResponsiveBool): Record<string, boolean> => {\n  if (hidden === undefined) {\n    return {};\n  }\n  if (typeof hidden === \"boolean\") {\n    return { \"smwb-grid__column--hidden\": hidden };\n  }\n  return (Object.keys(hidden) as Breakpoint[]).reduce<Record<string, boolean>>((acc, bp) => {\n    acc[`smwb-grid__column--hidden-${bp}`] = hidden[bp] === true;\n    acc[`smwb-grid__column--visible-${bp}`] = hidden[bp] === false;\n    return acc;\n  }, {});\n};\n\nexport function Column(props: ColumnProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"xs\",\n    \"sm\",\n    \"md\",\n    \"lg\",\n    \"xl\",\n    \"xsOffset\",\n    \"smOffset\",\n    \"mdOffset\",\n    \"lgOffset\",\n    \"xlOffset\",\n    \"hidden\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const classes = (): string =>\n    cn(\"smwb-grid__column\", local.class, {\n      [`smwb-grid__column--xs-${local.xs}`]: local.xs,\n      [`smwb-grid__column--sm-${local.sm}`]: local.sm,\n      [`smwb-grid__column--md-${local.md}`]: local.md,\n      [`smwb-grid__column--lg-${local.lg}`]: local.lg,\n      [`smwb-grid__column--xl-${local.xl}`]: local.xl,\n      [`smwb-grid__column--xs-offset-${local.xsOffset}`]: local.xsOffset,\n      [`smwb-grid__column--sm-offset-${local.smOffset}`]: local.smOffset,\n      [`smwb-grid__column--md-offset-${local.mdOffset}`]: local.mdOffset,\n      [`smwb-grid__column--lg-offset-${local.lgOffset}`]: local.lgOffset,\n      [`smwb-grid__column--xl-offset-${local.xlOffset}`]: local.xlOffset,\n      ...hiddenClasses(local.hidden),\n    });\n\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={classes()} data-testid={local[\"data-testid\"] ?? \"grid-col\"} />\n  );\n}\n\nexport type ContainerMaxWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\nexport interface ContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Max-width breakpoint cap; `false` = fluid full width. */\n  maxWidth?: ContainerMaxWidth;\n  /** Remove horizontal gutters. */\n  disableGutters?: boolean;\n  /** Test id of the root `<div>`; `grid-container` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Container(props: ContainerProps): JSX.Element {\n  const merged = props;\n  const [local, rest] = splitProps(merged, [\"class\", \"maxWidth\", \"disableGutters\", \"ref\", \"data-testid\"]);\n  const maxWidth = (): ContainerMaxWidth => local.maxWidth ?? \"lg\";\n  const classes = (): string =>\n    cn(\n      \"smwb-container\",\n      {\n        [`smwb-container--${maxWidth()}`]: maxWidth() !== false,\n        \"smwb-container--gutterless\": local.disableGutters,\n      },\n      local.class\n    );\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"grid-container\"}\n      class={classes()}\n    />\n  );\n}\n"],"mappings":"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","names":[],"file":"grid.jsx"}

package/dist/source/components/layout/page/page.jsx

@@ -6,12 +6,20 @@ import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 function Page(props) {
   const merged = mergeProps({ maxWidth: "lg", disableGutters: false }, props);
-  const [local, rest] = splitProps(merged, ["maxWidth", "disableGutters", "component", "class", "children", "ref"]);
+  const [local, rest] = splitProps(merged, [
+    "maxWidth",
+    "disableGutters",
+    "component",
+    "class",
+    "children",
+    "ref",
+    "data-testid"
+  ]);
   return <Dynamic
     component={local.component ?? "main"}
     {...rest}
     ref={mergeRefs(local.ref)}
-    data-testid="page"
+    data-testid={local["data-testid"] ?? "page"}
     class={cn(
       "smwb-page",
       `smwb-page_max-${local.maxWidth}`,

package/dist/source/components/layout/page/page.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/layout/page/page.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/page/page.entry.less\";\nimport { type JSX, type ParentProps, 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 PageMaxWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\nexport interface PageProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** Content max-width cap; `full` = fluid. */\n  maxWidth?: PageMaxWidth;\n  /** Remove the page padding. */\n  disableGutters?: boolean;\n  /** Render as a different element (default `main`). */\n  component?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Page(props: ParentProps<PageProps>): JSX.Element {\n  const merged = mergeProps({ maxWidth: \"lg\" as PageMaxWidth, disableGutters: false }, props);\n  const [local, rest] = splitProps(merged, [\"maxWidth\", \"disableGutters\", \"component\", \"class\", \"children\", \"ref\"]);\n  return (\n    <Dynamic\n      component={local.component ?? \"main\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"page\"\n      class={cn(\n        \"smwb-page\",\n        `smwb-page_max-${local.maxWidth}`,\n        { \"smwb-page_gutterless\": local.disableGutters },\n        local.class\n      )}\n    >\n      <div class=\"smwb-page__inner\">{local.children}</div>\n    </Dynamic>\n  );\n}\n\nexport default Page;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,YAAY,kBAAkB;AACnE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAc7B,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS,WAAW,EAAE,UAAU,MAAsB,gBAAgB,MAAM,GAAG,KAAK;AAC1F,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,YAAY,kBAAkB,aAAa,SAAS,YAAY,KAAK,CAAC;AAChH,SACE,CAAC;AAAA,IACC,WAAW,MAAM,aAAa;AAAA,QAC1B;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA,iBAAiB,MAAM,QAAQ;AAAA,MAC/B,EAAE,wBAAwB,MAAM,eAAe;AAAA,MAC/C,MAAM;AAAA,IACR;AAAA,GACD;AAAA,MACC,CAAC,IAAI,MAAM,oBAAoB,MAAM,SAAS,EAA7C,IAAmD;AAAA,IACtD,EAbC;AAeL;AAEA,IAAO,eAAQ;","names":[],"file":"page.jsx"}
+{"version":3,"sources":["../../../../../src/components/layout/page/page.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/page/page.entry.less\";\nimport { type JSX, type ParentProps, 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 PageMaxWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\nexport interface PageProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** Content max-width cap; `full` = fluid. */\n  maxWidth?: PageMaxWidth;\n  /** Remove the page padding. */\n  disableGutters?: boolean;\n  /** Render as a different element (default `main`). */\n  component?: string;\n  /** Test id of the root element; `page` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Page(props: ParentProps<PageProps>): JSX.Element {\n  const merged = mergeProps({ maxWidth: \"lg\" as PageMaxWidth, disableGutters: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"maxWidth\",\n    \"disableGutters\",\n    \"component\",\n    \"class\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n  return (\n    <Dynamic\n      component={local.component ?? \"main\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"page\"}\n      class={cn(\n        \"smwb-page\",\n        `smwb-page_max-${local.maxWidth}`,\n        { \"smwb-page_gutterless\": local.disableGutters },\n        local.class\n      )}\n    >\n      <div class=\"smwb-page__inner\">{local.children}</div>\n    </Dynamic>\n  );\n}\n\nexport default Page;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,YAAY,kBAAkB;AACnE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAgB7B,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS,WAAW,EAAE,UAAU,MAAsB,gBAAgB,MAAM,GAAG,KAAK;AAC1F,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SACE,CAAC;AAAA,IACC,WAAW,MAAM,aAAa;AAAA,QAC1B;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,aAAa,MAAM,aAAa,KAAK;AAAA,IACrC,OAAO;AAAA,MACL;AAAA,MACA,iBAAiB,MAAM,QAAQ;AAAA,MAC/B,EAAE,wBAAwB,MAAM,eAAe;AAAA,MAC/C,MAAM;AAAA,IACR;AAAA,GACD;AAAA,MACC,CAAC,IAAI,MAAM,oBAAoB,MAAM,SAAS,EAA7C,IAAmD;AAAA,IACtD,EAbC;AAeL;AAEA,IAAO,eAAQ;","names":[],"file":"page.jsx"}

package/dist/source/components/layout/pageHeader/pageHeader.jsx

@@ -13,7 +13,8 @@ function PageHeader(props) {
     "actions",
     "divider",
     "class",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const title = children(() => local.title);
   const subtitle = children(() => local.subtitle);
@@ -22,7 +23,7 @@ function PageHeader(props) {
   return <header
     {...rest}
     ref={mergeRefs(local.ref)}
-    data-testid="page-header"
+    data-testid={local["data-testid"] ?? "page-header"}
     class={cn("smwb-page-header", { "smwb-page-header_divider": local.divider }, local.class)}
   >
       <Show when={breadcrumbs()}>

package/dist/source/components/layout/pageHeader/pageHeader.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/layout/pageHeader/pageHeader.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/pageHeader/pageHeader.entry.less\";\nimport { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Typography } from \"../../dataDisplay/typography\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface PageHeaderProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  title: JSX.Element | string;\n  subtitle?: JSX.Element | string;\n  /** Slot above the title (e.g. <Breadcrumbs />). */\n  breadcrumbs?: JSX.Element;\n  /** Slot on the trailing side (e.g. action buttons). */\n  actions?: JSX.Element;\n  /** Render a divider below the header. */\n  divider?: boolean;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function PageHeader(props: PageHeaderProps): JSX.Element {\n  const merged = mergeProps({ divider: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"title\",\n    \"subtitle\",\n    \"breadcrumbs\",\n    \"actions\",\n    \"divider\",\n    \"class\",\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 title = children(() => local.title);\n  const subtitle = children(() => local.subtitle);\n  const breadcrumbs = children(() => local.breadcrumbs);\n  const actions = children(() => local.actions);\n\n  return (\n    <header\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"page-header\"\n      class={cn(\"smwb-page-header\", { \"smwb-page-header_divider\": local.divider }, local.class)}\n    >\n      <Show when={breadcrumbs()}>\n        <div class=\"smwb-page-header__breadcrumbs\">{breadcrumbs()}</div>\n      </Show>\n      <div class=\"smwb-page-header__row\">\n        <div class=\"smwb-page-header__titles\">\n          <Show\n            when={typeof title() === \"string\"}\n            fallback={<div class=\"smwb-page-header__title\">{title()}</div>}\n          >\n            <Typography variant=\"h4\" component=\"h1\" class=\"smwb-page-header__title\">\n              {title()}\n            </Typography>\n          </Show>\n          <Show when={subtitle()}>\n            <Typography variant=\"body2\" color=\"textSecondary\" class=\"smwb-page-header__subtitle\">\n              {subtitle()}\n            </Typography>\n          </Show>\n        </div>\n        <Show when={actions()}>\n          <div class=\"smwb-page-header__actions\">{actions()}</div>\n        </Show>\n      </div>\n    </header>\n  );\n}\n\nexport default PageHeader;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,UAAU,YAAY,kBAAkB;AACjE,OAAO,QAAQ;AACf,SAAS,kBAAkB;AAC3B,SAAS,iBAA2B;AAc7B,SAAS,WAAW,OAAqC;AAC9D,QAAM,SAAS,WAAW,EAAE,SAAS,MAAM,GAAG,KAAK;AACnD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AACxC,QAAM,WAAW,SAAS,MAAM,MAAM,QAAQ;AAC9C,QAAM,cAAc,SAAS,MAAM,MAAM,WAAW;AACpD,QAAM,UAAU,SAAS,MAAM,MAAM,OAAO;AAE5C,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,OAAO,GAAG,oBAAoB,EAAE,4BAA4B,MAAM,QAAQ,GAAG,MAAM,KAAK;AAAA,GACzF;AAAA,MACC,CAAC,KAAK,MAAM,YAAY,GAAG;AAAA,QACzB,CAAC,IAAI,MAAM,iCAAiC,YAAY,EAAE,EAAzD,IAA+D;AAAA,MAClE,EAFC,KAEM;AAAA,MACP,CAAC,IAAI,MAAM,wBAAwB;AAAA,QACjC,CAAC,IAAI,MAAM,2BAA2B;AAAA,UACpC,CAAC;AAAA,IACC,MAAM,OAAO,MAAM,MAAM;AAAA,IACzB,UAAU,CAAC,IAAI,MAAM,2BAA2B,MAAM,EAAE,EAA7C;AAAA,GACZ;AAAA,YACC,CAAC,WAAW,QAAQ,KAAK,UAAU,KAAK,MAAM,0BAA0B;AAAA,eACrE,MAAM,EAAE;AAAA,YACX,EAFC,WAEY;AAAA,UACf,EAPC,KAOM;AAAA,UACP,CAAC,KAAK,MAAM,SAAS,GAAG;AAAA,YACtB,CAAC,WAAW,QAAQ,QAAQ,MAAM,gBAAgB,MAAM,6BAA6B;AAAA,eAClF,SAAS,EAAE;AAAA,YACd,EAFC,WAEY;AAAA,UACf,EAJC,KAIM;AAAA,QACT,EAdC,IAcK;AAAA,QACN,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,UACrB,CAAC,IAAI,MAAM,6BAA6B,QAAQ,EAAE,EAAjD,IAAuD;AAAA,QAC1D,EAFC,KAEM;AAAA,MACT,EAnBC,IAmBK;AAAA,IACR,EA7BC;AA+BL;AAEA,IAAO,qBAAQ;","names":[],"file":"pageHeader.jsx"}
+{"version":3,"sources":["../../../../../src/components/layout/pageHeader/pageHeader.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/pageHeader/pageHeader.entry.less\";\nimport { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Typography } from \"../../dataDisplay/typography\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface PageHeaderProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  title: JSX.Element | string;\n  subtitle?: JSX.Element | string;\n  /** Slot above the title (e.g. <Breadcrumbs />). */\n  breadcrumbs?: JSX.Element;\n  /** Slot on the trailing side (e.g. action buttons). */\n  actions?: JSX.Element;\n  /** Render a divider below the header. */\n  divider?: boolean;\n  /** Test id of the root `<header>`; `page-header` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function PageHeader(props: PageHeaderProps): JSX.Element {\n  const merged = mergeProps({ divider: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"title\",\n    \"subtitle\",\n    \"breadcrumbs\",\n    \"actions\",\n    \"divider\",\n    \"class\",\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 title = children(() => local.title);\n  const subtitle = children(() => local.subtitle);\n  const breadcrumbs = children(() => local.breadcrumbs);\n  const actions = children(() => local.actions);\n\n  return (\n    <header\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"page-header\"}\n      class={cn(\"smwb-page-header\", { \"smwb-page-header_divider\": local.divider }, local.class)}\n    >\n      <Show when={breadcrumbs()}>\n        <div class=\"smwb-page-header__breadcrumbs\">{breadcrumbs()}</div>\n      </Show>\n      <div class=\"smwb-page-header__row\">\n        <div class=\"smwb-page-header__titles\">\n          <Show\n            when={typeof title() === \"string\"}\n            fallback={<div class=\"smwb-page-header__title\">{title()}</div>}\n          >\n            <Typography variant=\"h4\" component=\"h1\" class=\"smwb-page-header__title\">\n              {title()}\n            </Typography>\n          </Show>\n          <Show when={subtitle()}>\n            <Typography variant=\"body2\" color=\"textSecondary\" class=\"smwb-page-header__subtitle\">\n              {subtitle()}\n            </Typography>\n          </Show>\n        </div>\n        <Show when={actions()}>\n          <div class=\"smwb-page-header__actions\">{actions()}</div>\n        </Show>\n      </div>\n    </header>\n  );\n}\n\nexport default PageHeader;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,UAAU,YAAY,kBAAkB;AACjE,OAAO,QAAQ;AACf,SAAS,kBAAkB;AAC3B,SAAS,iBAA2B;AAgB7B,SAAS,WAAW,OAAqC;AAC9D,QAAM,SAAS,WAAW,EAAE,SAAS,MAAM,GAAG,KAAK;AACnD,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;AAID,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AACxC,QAAM,WAAW,SAAS,MAAM,MAAM,QAAQ;AAC9C,QAAM,cAAc,SAAS,MAAM,MAAM,WAAW;AACpD,QAAM,UAAU,SAAS,MAAM,MAAM,OAAO;AAE5C,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,aAAa,MAAM,aAAa,KAAK;AAAA,IACrC,OAAO,GAAG,oBAAoB,EAAE,4BAA4B,MAAM,QAAQ,GAAG,MAAM,KAAK;AAAA,GACzF;AAAA,MACC,CAAC,KAAK,MAAM,YAAY,GAAG;AAAA,QACzB,CAAC,IAAI,MAAM,iCAAiC,YAAY,EAAE,EAAzD,IAA+D;AAAA,MAClE,EAFC,KAEM;AAAA,MACP,CAAC,IAAI,MAAM,wBAAwB;AAAA,QACjC,CAAC,IAAI,MAAM,2BAA2B;AAAA,UACpC,CAAC;AAAA,IACC,MAAM,OAAO,MAAM,MAAM;AAAA,IACzB,UAAU,CAAC,IAAI,MAAM,2BAA2B,MAAM,EAAE,EAA7C;AAAA,GACZ;AAAA,YACC,CAAC,WAAW,QAAQ,KAAK,UAAU,KAAK,MAAM,0BAA0B;AAAA,eACrE,MAAM,EAAE;AAAA,YACX,EAFC,WAEY;AAAA,UACf,EAPC,KAOM;AAAA,UACP,CAAC,KAAK,MAAM,SAAS,GAAG;AAAA,YACtB,CAAC,WAAW,QAAQ,QAAQ,MAAM,gBAAgB,MAAM,6BAA6B;AAAA,eAClF,SAAS,EAAE;AAAA,YACd,EAFC,WAEY;AAAA,UACf,EAJC,KAIM;AAAA,QACT,EAdC,IAcK;AAAA,QACN,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,UACrB,CAAC,IAAI,MAAM,6BAA6B,QAAQ,EAAE,EAAjD,IAAuD;AAAA,QAC1D,EAFC,KAEM;AAAA,MACT,EAnBC,IAmBK;AAAA,IACR,EA7BC;AA+BL;AAEA,IAAO,qBAAQ;","names":[],"file":"pageHeader.jsx"}

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

@@ -6,8 +6,10 @@ import cn from "clsx";
 import { Icon } from "../../base/icon";
 import { Tooltip } from "../../feedBack/tooltip";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { createDismissOnEscape } from "../../../primitives/createDismissOnEscape";
 function HelpHint(props) {
   const [open, setOpen] = createSignal(false);
+  createDismissOnEscape(open, () => setOpen(false));
   return <Tooltip
     class="smwb-section-header__tooltip"
     message={props.text}
@@ -25,9 +27,6 @@ function HelpHint(props) {
     onPointerLeave={() => setOpen(false)}
     onFocus={() => setOpen(true)}
     onBlur={() => setOpen(false)}
-    onKeyDown={(event) => {
-      if (event.key === "Escape") setOpen(false);
-    }}
   >
         <Icon name="help" size={16} />
       </span>
@@ -45,12 +44,13 @@ function SectionHeader(props) {
     "titleId",
     "subtitle",
     "children",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const subtitle = children(() => local.subtitle);
   const actions = children(() => local.children);
   return <header
-    data-testid="section-header"
+    data-testid={local["data-testid"] ?? "section-header"}
     {...rest}
     ref={mergeRefs(local.ref)}
     class={cn("smwb-section-header", `smwb-section-header_level-${local.level}`, local.class)}