@smwb/ui-solid 0.11.2 → 0.12.1

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

@@ -1,4 +1,4 @@
-import { Show, mergeProps, splitProps } from "solid-js";
+import { Show, children, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Typography } from "../../dataDisplay/typography";
 import { mergeRefs } from "../../../primitives/mergeRefs";
@@ -13,33 +13,37 @@ function PageHeader(props) {
     "class",
     "ref"
   ]);
+  const title = children(() => local.title);
+  const subtitle = children(() => local.subtitle);
+  const breadcrumbs = children(() => local.breadcrumbs);
+  const actions = children(() => local.actions);
   return <header
     {...rest}
     ref={mergeRefs(local.ref)}
     data-testid="page-header"
     class={cn("smwb-page-header", { "smwb-page-header_divider": local.divider }, local.class)}
   >
-      <Show when={local.breadcrumbs}>
-        <div class="smwb-page-header__breadcrumbs">{local.breadcrumbs}</div>
+      <Show when={breadcrumbs()}>
+        <div class="smwb-page-header__breadcrumbs">{breadcrumbs()}</div>
       </Show>
       <div class="smwb-page-header__row">
         <div class="smwb-page-header__titles">
           <Show
-    when={typeof local.title === "string"}
-    fallback={<div class="smwb-page-header__title">{local.title}</div>}
+    when={typeof title() === "string"}
+    fallback={<div class="smwb-page-header__title">{title()}</div>}
   >
             <Typography variant="h4" component="h1" class="smwb-page-header__title">
-              {local.title}
+              {title()}
             </Typography>
           </Show>
-          <Show when={local.subtitle}>
+          <Show when={subtitle()}>
             <Typography variant="body2" color="textSecondary" class="smwb-page-header__subtitle">
-              {local.subtitle}
+              {subtitle()}
             </Typography>
           </Show>
         </div>
-        <Show when={local.actions}>
-          <div class="smwb-page-header__actions">{local.actions}</div>
+        <Show when={actions()}>
+          <div class="smwb-page-header__actions">{actions()}</div>
         </Show>
       </div>
     </header>;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/layout/pageHeader/pageHeader.tsx"],"sourcesContent":["import { type JSX, Show, 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  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={local.breadcrumbs}>\n        <div class=\"smwb-page-header__breadcrumbs\">{local.breadcrumbs}</div>\n      </Show>\n      <div class=\"smwb-page-header__row\">\n        <div class=\"smwb-page-header__titles\">\n          <Show\n            when={typeof local.title === \"string\"}\n            fallback={<div class=\"smwb-page-header__title\">{local.title}</div>}\n          >\n            <Typography variant=\"h4\" component=\"h1\" class=\"smwb-page-header__title\">\n              {local.title}\n            </Typography>\n          </Show>\n          <Show when={local.subtitle}>\n            <Typography variant=\"body2\" color=\"textSecondary\" class=\"smwb-page-header__subtitle\">\n              {local.subtitle}\n            </Typography>\n          </Show>\n        </div>\n        <Show when={local.actions}>\n          <div class=\"smwb-page-header__actions\">{local.actions}</div>\n        </Show>\n      </div>\n    </header>\n  );\n}\n\nexport default PageHeader;\n"],"mappings":"AAAA,SAAmB,MAAM,YAAY,kBAAkB;AACvD,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;AAED,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,MAAM,aAAa;AAAA,QAC7B,CAAC,IAAI,MAAM,iCAAiC,MAAM,YAAY,EAA7D,IAAmE;AAAA,MACtE,EAFC,KAEM;AAAA,MACP,CAAC,IAAI,MAAM,wBAAwB;AAAA,QACjC,CAAC,IAAI,MAAM,2BAA2B;AAAA,UACpC,CAAC;AAAA,IACC,MAAM,OAAO,MAAM,UAAU;AAAA,IAC7B,UAAU,CAAC,IAAI,MAAM,2BAA2B,MAAM,MAAM,EAAjD;AAAA,GACZ;AAAA,YACC,CAAC,WAAW,QAAQ,KAAK,UAAU,KAAK,MAAM,0BAA0B;AAAA,eACrE,MAAM,MAAM;AAAA,YACf,EAFC,WAEY;AAAA,UACf,EAPC,KAOM;AAAA,UACP,CAAC,KAAK,MAAM,MAAM,UAAU;AAAA,YAC1B,CAAC,WAAW,QAAQ,QAAQ,MAAM,gBAAgB,MAAM,6BAA6B;AAAA,eAClF,MAAM,SAAS;AAAA,YAClB,EAFC,WAEY;AAAA,UACf,EAJC,KAIM;AAAA,QACT,EAdC,IAcK;AAAA,QACN,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,UACzB,CAAC,IAAI,MAAM,6BAA6B,MAAM,QAAQ,EAArD,IAA2D;AAAA,QAC9D,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 { 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,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"}

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

@@ -0,0 +1,6 @@
+import { SectionHeader, default as default2 } from "./sectionHeader";
+export {
+  SectionHeader,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/layout/sectionHeader/index.ts"],
+  "sourcesContent": ["export { SectionHeader, default } from \"./sectionHeader\";\nexport type { SectionHeaderProps } from \"./sectionHeader\";\n"],
+  "mappings": "AAAA,SAAS,eAAe,WAAAA,gBAAe;",
+  "names": ["default"]
+}

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

@@ -0,0 +1,80 @@
+import { Show, children, createSignal, mergeProps, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import cn from "clsx";
+import { Icon } from "../../base/icon";
+import { Tooltip } from "../../feedBack/tooltip";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function HelpHint(props) {
+  const [open, setOpen] = createSignal(false);
+  return <Tooltip
+    class="smwb-section-header__tooltip"
+    message={props.text}
+    trigger="manual"
+    open={open()}
+    placement="top"
+    offset={{ offsetY: 6 }}
+  >
+      <span
+    class="smwb-section-header__help"
+    role="img"
+    aria-label={props.label ?? props.text}
+    tabindex="0"
+    onPointerEnter={() => setOpen(true)}
+    onPointerLeave={() => setOpen(false)}
+    onFocus={() => setOpen(true)}
+    onBlur={() => setOpen(false)}
+    onKeyDown={(event) => {
+      if (event.key === "Escape") setOpen(false);
+    }}
+  >
+        <Icon name="help" size={16} />
+      </span>
+    </Tooltip>;
+}
+function SectionHeader(props) {
+  const merged = mergeProps({ level: 2 }, props);
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "title",
+    "level",
+    "count",
+    "help",
+    "helpLabel",
+    "titleId",
+    "subtitle",
+    "children",
+    "ref"
+  ]);
+  const subtitle = children(() => local.subtitle);
+  const actions = children(() => local.children);
+  return <header
+    data-testid="section-header"
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-section-header", `smwb-section-header_level-${local.level}`, local.class)}
+  >
+      <div class="smwb-section-header__titles">
+        <div class="smwb-section-header__title-line">
+          <Dynamic component={`h${local.level}`} id={local.titleId} class="smwb-section-header__title">
+            {local.title}
+          </Dynamic>
+          <Show when={local.count !== void 0 && local.count !== null}>
+            <span class="smwb-section-header__count">{local.count}</span>
+          </Show>
+          <Show when={local.help}>{(text) => <HelpHint text={text()} label={local.helpLabel} />}</Show>
+        </div>
+        <Show when={subtitle()}>
+          <div class="smwb-section-header__subtitle">{subtitle()}</div>
+        </Show>
+      </div>
+      <Show when={actions()}>
+        <div class="smwb-section-header__actions">{actions()}</div>
+      </Show>
+    </header>;
+}
+var sectionHeader_default = SectionHeader;
+export {
+  SectionHeader,
+  sectionHeader_default as default
+};
+//# sourceMappingURL=sectionHeader.jsx.map

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

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

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

@@ -18,6 +18,7 @@ function Stack(props) {
     "ref"
   ]);
   const resolved = resolveChildren(() => local.children);
+  const firstDivider = resolveChildren(() => resolved.toArray().length > 1 ? local.divider : void 0);
   return <div
     {...rest}
     ref={mergeRefs(local.ref)}
@@ -33,11 +34,11 @@ function Stack(props) {
       ...typeof local.style === "object" && local.style ? local.style : {}
     }}
   >
-      <Show when={local.divider} fallback={local.children}>
+      <Show when={firstDivider()} fallback={resolved()}>
         <For each={resolved.toArray()}>
           {(child, index) => <>
               <Show when={index() > 0}>
-                <div class="smwb-stack__divider">{local.divider}</div>
+                <div class="smwb-stack__divider">{index() === 1 ? firstDivider() : local.divider}</div>
               </Show>
               {child}
             </>}

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

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

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

@@ -1,4 +1,4 @@
-import { Show, mergeProps, splitProps } from "solid-js";
+import { Show, children, mergeProps, splitProps } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
@@ -26,6 +26,8 @@ function AppBar(props) {
     "color",
     "ref"
   ]);
+  const content = children(() => local.children);
+  const title = children(() => content() ? void 0 : local.title);
   return <Dynamic
     component={local.placement === "top" ? "header" : "footer"}
     {...rest}
@@ -41,11 +43,11 @@ function AppBar(props) {
     )}
   >
       <Show
-    when={local.children}
+    when={content()}
     fallback={<div class="smwb-appbar__inner">
             <div class="smwb-appbar__left">
-              <Show when={local.title}>
-                <div class="smwb-appbar__left__title">{local.title}</div>
+              <Show when={title()}>
+                <div class="smwb-appbar__left__title">{title()}</div>
               </Show>
               {local.leftContent}
             </div>
@@ -53,7 +55,7 @@ function AppBar(props) {
             <div class="smwb-appbar__right">{local.rightContent}</div>
           </div>}
   >
-        {local.children}
+        {content()}
       </Show>
     </Dynamic>;
 }

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

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

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

@@ -1,4 +1,4 @@
-import { For, Show, children, createSignal, mergeProps, splitProps } from "solid-js";
+import { For, Show, children, createMemo, createSignal, mergeProps, splitProps } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import cn from "clsx";
 import { Icon } from "../../base/icon";
@@ -61,9 +61,10 @@ function BottomBar(props) {
   });
   const [overflowOpen, setOverflowOpen] = createSignal(false);
   const [overflowAnchor, setOverflowAnchor] = createSignal(null);
+  const menuItems = createMemo(() => local.menuItems);
   const safeVisibleCount = () => Math.max(0, local.visibleCount);
-  const visibleItems = () => local.menuItems.slice(0, safeVisibleCount());
-  const overflowItems = () => local.menuItems.slice(safeVisibleCount());
+  const visibleItems = () => menuItems().slice(0, safeVisibleCount());
+  const overflowItems = () => menuItems().slice(safeVisibleCount());
   const hasOverflow = () => overflowItems().length > 0;
   const overflowActive = () => hasOverflow() && activeItem() !== null && activeItem() >= safeVisibleCount();
   return <nav {...rest} ref={mergeRefs(local.ref)} class={cn("smwb-bottom-bar", local.class)} role="navigation">

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/bottomBar/bottomBar.tsx"],"sourcesContent":["import { type JSX, For, Show, children, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Menu, MenuItem, MenuItemIcon, MenuItemText } from \"../menu\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport type { SidebarMenuItemProps } from \"../sidebar/sidebar\";\n\nexport type BottomBarMenuItemProps = SidebarMenuItemProps;\n\nexport interface BottomBarProps extends JSX.HTMLAttributes<HTMLElement> {\n  menuItems?: SidebarMenuItemProps[];\n  visibleCount?: number;\n  activeItem?: number | null;\n  defaultActiveItem?: number | null;\n  onActiveItemChange?: (index: number) => void;\n  overflowMenuAriaLabel?: string;\n  ref?: Ref<HTMLElement>;\n}\n\ninterface BarItemProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: JSX.Element;\n  title?: string;\n  isActive?: boolean;\n  as?: string | undefined;\n  href?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nfunction BarItem(props: BarItemProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"isActive\", \"icon\", \"title\", \"as\", \"href\", \"ref\"]);\n  let rippleActions: RippleActionsRef | undefined;\n  // Resolve the icon in this item's context so a pre-created element passed via\n  // menuItems hydrates (see the same fix in Sidebar/AppLayout).\n  const icon = children(() => local.icon);\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n  return (\n    <Dynamic\n      component={local.as ?? \"div\"}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      role=\"menuitem\"\n      class={cn(\"smwb-bottom-bar__item\", { \"smwb-bottom-bar__item_active\": local.isActive })}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      <Show when={icon()}>\n        <span class=\"smwb-bottom-bar__item-icon\">{icon()}</span>\n      </Show>\n      <Show when={local.title}>\n        <span class=\"smwb-bottom-bar__item-title\">{local.title}</span>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </Dynamic>\n  );\n}\n\nexport function BottomBar(props: BottomBarProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      menuItems: [] as SidebarMenuItemProps[],\n      visibleCount: 4,\n      defaultActiveItem: null as number | null,\n      overflowMenuAriaLabel: \"More navigation\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"menuItems\",\n    \"visibleCount\",\n    \"activeItem\",\n    \"defaultActiveItem\",\n    \"onActiveItemChange\",\n    \"overflowMenuAriaLabel\",\n    \"ref\",\n  ]);\n\n  const [activeItem, setActiveItem] = createControllableState<number | null>({\n    value: () => local.activeItem,\n    defaultValue: local.defaultActiveItem,\n    onChange: (next) => {\n      if (next !== null) local.onActiveItemChange?.(next);\n    },\n  });\n  const [overflowOpen, setOverflowOpen] = createSignal(false);\n  const [overflowAnchor, setOverflowAnchor] = createSignal<HTMLElement | null>(null);\n\n  const safeVisibleCount = (): number => Math.max(0, local.visibleCount);\n  const visibleItems = (): SidebarMenuItemProps[] => local.menuItems.slice(0, safeVisibleCount());\n  const overflowItems = (): SidebarMenuItemProps[] => local.menuItems.slice(safeVisibleCount());\n  const hasOverflow = (): boolean => overflowItems().length > 0;\n  const overflowActive = (): boolean =>\n    hasOverflow() && activeItem() !== null && (activeItem() as number) >= safeVisibleCount();\n\n  return (\n    <nav {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-bottom-bar\", local.class)} role=\"navigation\">\n      <div class=\"smwb-bottom-bar__nav\" role=\"menubar\">\n        <For each={visibleItems()}>\n          {(item, idx) => (\n            <BarItem\n              as={item.as}\n              isActive={activeItem() === idx()}\n              onClick={(event) => {\n                setActiveItem(idx());\n                callHandler(item.onClick, event);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n            />\n          )}\n        </For>\n        <Show when={hasOverflow()}>\n          <BarItem\n            ref={(el) => setOverflowAnchor(el as HTMLElement)}\n            isActive={overflowActive()}\n            onClick={() => setOverflowOpen((prev) => !prev)}\n            icon={<Icon name=\"menu\" size={24} />}\n            aria-label={local.overflowMenuAriaLabel}\n            aria-haspopup=\"menu\"\n            aria-expanded={overflowOpen()}\n          />\n        </Show>\n      </div>\n      <Show when={hasOverflow()}>\n        <Menu\n          isOpen={overflowOpen()}\n          onClose={() => setOverflowOpen(false)}\n          anchorElement={overflowAnchor()}\n          placement=\"top\"\n          dense\n        >\n          <For each={overflowItems()}>\n            {(item, idx) => {\n              const itemIndex = (): number => safeVisibleCount() + idx();\n              return (\n                <MenuItem\n                  selected={activeItem() === itemIndex()}\n                  href={item.href}\n                  onClick={(event) => {\n                    setActiveItem(itemIndex());\n                    callHandler(\n                      item.onClick,\n                      event as unknown as MouseEvent & { currentTarget: HTMLDivElement; target: Element }\n                    );\n                    setOverflowOpen(false);\n                  }}\n                >\n                  <Show when={item.icon}>\n                    <MenuItemIcon>{item.icon}</MenuItemIcon>\n                  </Show>\n                  <MenuItemText inset={!item.icon}>{item.title}</MenuItemText>\n                </MenuItem>\n              );\n            }}\n          </For>\n        </Menu>\n      </Show>\n    </nav>\n  );\n}\n\nexport default BottomBar;\n"],"mappings":"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","names":[],"file":"bottomBar.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/bottomBar/bottomBar.tsx"],"sourcesContent":["import { type JSX, For, Show, children, createMemo, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Menu, MenuItem, MenuItemIcon, MenuItemText } from \"../menu\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport type { SidebarMenuItemProps } from \"../sidebar/sidebar\";\n\nexport type BottomBarMenuItemProps = SidebarMenuItemProps;\n\nexport interface BottomBarProps extends JSX.HTMLAttributes<HTMLElement> {\n  menuItems?: SidebarMenuItemProps[];\n  visibleCount?: number;\n  activeItem?: number | null;\n  defaultActiveItem?: number | null;\n  onActiveItemChange?: (index: number) => void;\n  overflowMenuAriaLabel?: string;\n  ref?: Ref<HTMLElement>;\n}\n\ninterface BarItemProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: JSX.Element;\n  title?: string;\n  isActive?: boolean;\n  as?: string | undefined;\n  href?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nfunction BarItem(props: BarItemProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"isActive\", \"icon\", \"title\", \"as\", \"href\", \"ref\"]);\n  let rippleActions: RippleActionsRef | undefined;\n  // Resolve the icon in this item's context so a pre-created element passed via\n  // menuItems hydrates (see the same fix in Sidebar/AppLayout).\n  const icon = children(() => local.icon);\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n  return (\n    <Dynamic\n      component={local.as ?? \"div\"}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      role=\"menuitem\"\n      class={cn(\"smwb-bottom-bar__item\", { \"smwb-bottom-bar__item_active\": local.isActive })}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      <Show when={icon()}>\n        <span class=\"smwb-bottom-bar__item-icon\">{icon()}</span>\n      </Show>\n      <Show when={local.title}>\n        <span class=\"smwb-bottom-bar__item-title\">{local.title}</span>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </Dynamic>\n  );\n}\n\nexport function BottomBar(props: BottomBarProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      menuItems: [] as SidebarMenuItemProps[],\n      visibleCount: 4,\n      defaultActiveItem: null as number | null,\n      overflowMenuAriaLabel: \"More navigation\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"menuItems\",\n    \"visibleCount\",\n    \"activeItem\",\n    \"defaultActiveItem\",\n    \"onActiveItemChange\",\n    \"overflowMenuAriaLabel\",\n    \"ref\",\n  ]);\n\n  const [activeItem, setActiveItem] = createControllableState<number | null>({\n    value: () => local.activeItem,\n    defaultValue: local.defaultActiveItem,\n    onChange: (next) => {\n      if (next !== null) local.onActiveItemChange?.(next);\n    },\n  });\n  const [overflowOpen, setOverflowOpen] = createSignal(false);\n  const [overflowAnchor, setOverflowAnchor] = createSignal<HTMLElement | null>(null);\n\n  // Read menuItems once. An inline array literal is re-evaluated on every read,\n  // re-creating the icons in it; during hydration an icon created by a read that\n  // renders nothing (e.g. the overflow check) has no server DOM node to adopt.\n  const menuItems = createMemo(() => local.menuItems);\n  const safeVisibleCount = (): number => Math.max(0, local.visibleCount);\n  const visibleItems = (): SidebarMenuItemProps[] => menuItems().slice(0, safeVisibleCount());\n  const overflowItems = (): SidebarMenuItemProps[] => menuItems().slice(safeVisibleCount());\n  const hasOverflow = (): boolean => overflowItems().length > 0;\n  const overflowActive = (): boolean =>\n    hasOverflow() && activeItem() !== null && (activeItem() as number) >= safeVisibleCount();\n\n  return (\n    <nav {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-bottom-bar\", local.class)} role=\"navigation\">\n      <div class=\"smwb-bottom-bar__nav\" role=\"menubar\">\n        <For each={visibleItems()}>\n          {(item, idx) => (\n            <BarItem\n              as={item.as}\n              isActive={activeItem() === idx()}\n              onClick={(event) => {\n                setActiveItem(idx());\n                callHandler(item.onClick, event);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n            />\n          )}\n        </For>\n        <Show when={hasOverflow()}>\n          <BarItem\n            ref={(el) => setOverflowAnchor(el as HTMLElement)}\n            isActive={overflowActive()}\n            onClick={() => setOverflowOpen((prev) => !prev)}\n            icon={<Icon name=\"menu\" size={24} />}\n            aria-label={local.overflowMenuAriaLabel}\n            aria-haspopup=\"menu\"\n            aria-expanded={overflowOpen()}\n          />\n        </Show>\n      </div>\n      <Show when={hasOverflow()}>\n        <Menu\n          isOpen={overflowOpen()}\n          onClose={() => setOverflowOpen(false)}\n          anchorElement={overflowAnchor()}\n          placement=\"top\"\n          dense\n        >\n          <For each={overflowItems()}>\n            {(item, idx) => {\n              const itemIndex = (): number => safeVisibleCount() + idx();\n              return (\n                <MenuItem\n                  selected={activeItem() === itemIndex()}\n                  href={item.href}\n                  onClick={(event) => {\n                    setActiveItem(itemIndex());\n                    callHandler(\n                      item.onClick,\n                      event as unknown as MouseEvent & { currentTarget: HTMLDivElement; target: Element }\n                    );\n                    setOverflowOpen(false);\n                  }}\n                >\n                  <Show when={item.icon}>\n                    <MenuItemIcon>{item.icon}</MenuItemIcon>\n                  </Show>\n                  <MenuItemText inset={!item.icon}>{item.title}</MenuItemText>\n                </MenuItem>\n              );\n            }}\n          </For>\n        </Menu>\n      </Show>\n    </nav>\n  );\n}\n\nexport default BottomBar;\n"],"mappings":"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","names":[],"file":"bottomBar.jsx"}

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

@@ -1,7 +1,8 @@
-import { For, Show, mergeProps, splitProps } from "solid-js";
+import { For, Show, createMemo, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Icon } from "../../base/icon";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+const AUTO_MAX_STEPS = 12;
 function Stepper(props) {
   const merged = mergeProps({ orientation: "horizontal", alternativeLabel: false }, props);
   const [local, rest] = splitProps(merged, [
@@ -13,22 +14,25 @@ function Stepper(props) {
     "onStepClick",
     "ref"
   ]);
-  return <div
+  const steps = createMemo(() => local.steps);
+  const auto = () => local.orientation === "auto";
+  const stepper = () => <div
     {...rest}
     ref={mergeRefs(local.ref)}
     data-testid="stepper"
+    data-steps={auto() ? String(Math.min(steps().length, AUTO_MAX_STEPS)) : void 0}
     class={cn(
       "smwb-stepper",
-      `smwb-stepper_${local.orientation}`,
-      { "smwb-stepper_alt-label": local.alternativeLabel && local.orientation === "horizontal" },
+      auto() ? "smwb-stepper_horizontal smwb-stepper_auto" : `smwb-stepper_${local.orientation}`,
+      { "smwb-stepper_alt-label": local.alternativeLabel && local.orientation !== "vertical" },
       local.class
     )}
   >
-      <For each={local.steps}>
+      <For each={steps()}>
         {(step, index) => {
     const completed = () => index() < local.activeStep;
     const active = () => index() === local.activeStep;
-    const isLast = () => index() === local.steps.length - 1;
+    const isLast = () => index() === steps().length - 1;
     const clickable = () => Boolean(local.onStepClick) && !step.disabled;
     return <>
               <div
@@ -61,7 +65,7 @@ function Stepper(props) {
                   <Show when={step.optional}>
                     <span class="smwb-stepper__optional">{step.optional}</span>
                   </Show>
-                  <Show when={step.description && local.orientation === "vertical"}>
+                  <Show when={step.description}>
                     <span class="smwb-stepper__description">{step.description}</span>
                   </Show>
                 </div>
@@ -73,6 +77,9 @@ function Stepper(props) {
   }}
       </For>
     </div>;
+  return <Show when={auto()} fallback={stepper()}>
+      <div class="smwb-stepper-auto">{stepper()}</div>
+    </Show>;
 }
 var stepper_default = Stepper;
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/stepper/stepper.tsx"],"sourcesContent":["import { type JSX, For, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface StepItem {\n  label: JSX.Element;\n  description?: JSX.Element;\n  optional?: JSX.Element;\n  /** Marks the step as errored. */\n  error?: boolean;\n  /** Disables interaction with the step. */\n  disabled?: boolean;\n  /** Custom icon overriding the default number/check. */\n  icon?: JSX.Element;\n}\n\nexport interface StepperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  steps: StepItem[];\n  /** Index of the active (current) step. */\n  activeStep: number;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Place the label under the icon (horizontal only). */\n  alternativeLabel?: boolean;\n  /** Makes steps clickable; receives the clicked step index. */\n  onStepClick?: (index: number) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Stepper(props: StepperProps): JSX.Element {\n  const merged = mergeProps({ orientation: \"horizontal\" as const, alternativeLabel: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"steps\",\n    \"activeStep\",\n    \"orientation\",\n    \"alternativeLabel\",\n    \"onStepClick\",\n    \"ref\",\n  ]);\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"stepper\"\n      class={cn(\n        \"smwb-stepper\",\n        `smwb-stepper_${local.orientation}`,\n        { \"smwb-stepper_alt-label\": local.alternativeLabel && local.orientation === \"horizontal\" },\n        local.class\n      )}\n    >\n      <For each={local.steps}>\n        {(step, index) => {\n          const completed = (): boolean => index() < local.activeStep;\n          const active = (): boolean => index() === local.activeStep;\n          const isLast = (): boolean => index() === local.steps.length - 1;\n          const clickable = (): boolean => Boolean(local.onStepClick) && !step.disabled;\n\n          return (\n            <>\n              <div\n                class={cn(\"smwb-stepper__step\", {\n                  \"smwb-stepper__step_active\": active(),\n                  \"smwb-stepper__step_completed\": completed(),\n                  \"smwb-stepper__step_error\": step.error,\n                  \"smwb-stepper__step_disabled\": step.disabled,\n                  \"smwb-stepper__step_clickable\": clickable(),\n                })}\n                aria-current={active() ? \"step\" : undefined}\n                aria-disabled={step.disabled || undefined}\n                role={clickable() ? \"button\" : undefined}\n                tabindex={clickable() ? 0 : undefined}\n                onClick={clickable() ? () => local.onStepClick?.(index()) : undefined}\n                onKeyDown={\n                  clickable()\n                    ? (event) => {\n                        if (event.key === \"Enter\" || event.key === \" \") {\n                          event.preventDefault();\n                          local.onStepClick?.(index());\n                        }\n                      }\n                    : undefined\n                }\n              >\n                <div class=\"smwb-stepper__icon\" aria-hidden=\"true\">\n                  <Show when={step.icon} fallback={completed() ? <Icon name=\"check\" size={16} /> : <span>{index() + 1}</span>}>\n                    {step.icon}\n                  </Show>\n                </div>\n                <div class=\"smwb-stepper__text\">\n                  <span class=\"smwb-stepper__label\">{step.label}</span>\n                  <Show when={step.optional}>\n                    <span class=\"smwb-stepper__optional\">{step.optional}</span>\n                  </Show>\n                  <Show when={step.description && local.orientation === \"vertical\"}>\n                    <span class=\"smwb-stepper__description\">{step.description}</span>\n                  </Show>\n                </div>\n              </div>\n              <Show when={!isLast()}>\n                <div class=\"smwb-stepper__connector\" aria-hidden=\"true\" />\n              </Show>\n            </>\n          );\n        }}\n      </For>\n    </div>\n  );\n}\n\nexport default Stepper;\n"],"mappings":"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","names":[],"file":"stepper.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/stepper/stepper.tsx"],"sourcesContent":["import { type JSX, For, Show, createMemo, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface StepItem {\n  label: JSX.Element;\n  /** Longer text under the label, in every orientation. */\n  description?: JSX.Element;\n  optional?: JSX.Element;\n  /** Marks the step as errored. */\n  error?: boolean;\n  /** Disables interaction with the step. */\n  disabled?: boolean;\n  /** Custom icon overriding the default number/check. */\n  icon?: JSX.Element;\n}\n\n/**\n * `auto` lays the steps out in a row while the stepper's container is wide\n * enough for them — about 8rem per step, a theme variable — and in a column when\n * it is not. It is a CSS container query, so the server renders the same markup\n * and nothing changes on hydration.\n */\nexport type StepperOrientation = \"horizontal\" | \"vertical\" | \"auto\";\n\nexport interface StepperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  steps: StepItem[];\n  /** Index of the active (current) step. */\n  activeStep: number;\n  orientation?: StepperOrientation;\n  /** Place the label under the icon (in a row: horizontal, or auto while wide). */\n  alternativeLabel?: boolean;\n  /** Makes steps clickable; receives the clicked step index. */\n  onStepClick?: (index: number) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** Step counts with their own `auto` breakpoint; longer steppers use the last one. */\nconst AUTO_MAX_STEPS = 12;\n\nexport function Stepper(props: StepperProps): JSX.Element {\n  const merged = mergeProps({ orientation: \"horizontal\" as StepperOrientation, alternativeLabel: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"steps\",\n    \"activeStep\",\n    \"orientation\",\n    \"alternativeLabel\",\n    \"onStepClick\",\n    \"ref\",\n  ]);\n\n  // Read the steps once. An inline array is re-evaluated on every read, creating\n  // the markup in it (icons, labels, descriptions) again; during hydration a copy\n  // that is not the rendered one has no server DOM node to adopt.\n  const steps = createMemo(() => local.steps);\n  const auto = (): boolean => local.orientation === \"auto\";\n\n  const stepper = (): JSX.Element => (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"stepper\"\n      data-steps={auto() ? String(Math.min(steps().length, AUTO_MAX_STEPS)) : undefined}\n      class={cn(\n        \"smwb-stepper\",\n        auto() ? \"smwb-stepper_horizontal smwb-stepper_auto\" : `smwb-stepper_${local.orientation}`,\n        { \"smwb-stepper_alt-label\": local.alternativeLabel && local.orientation !== \"vertical\" },\n        local.class\n      )}\n    >\n      <For each={steps()}>\n        {(step, index) => {\n          const completed = (): boolean => index() < local.activeStep;\n          const active = (): boolean => index() === local.activeStep;\n          const isLast = (): boolean => index() === steps().length - 1;\n          const clickable = (): boolean => Boolean(local.onStepClick) && !step.disabled;\n\n          return (\n            <>\n              <div\n                class={cn(\"smwb-stepper__step\", {\n                  \"smwb-stepper__step_active\": active(),\n                  \"smwb-stepper__step_completed\": completed(),\n                  \"smwb-stepper__step_error\": step.error,\n                  \"smwb-stepper__step_disabled\": step.disabled,\n                  \"smwb-stepper__step_clickable\": clickable(),\n                })}\n                aria-current={active() ? \"step\" : undefined}\n                aria-disabled={step.disabled || undefined}\n                role={clickable() ? \"button\" : undefined}\n                tabindex={clickable() ? 0 : undefined}\n                onClick={clickable() ? () => local.onStepClick?.(index()) : undefined}\n                onKeyDown={\n                  clickable()\n                    ? (event) => {\n                        if (event.key === \"Enter\" || event.key === \" \") {\n                          event.preventDefault();\n                          local.onStepClick?.(index());\n                        }\n                      }\n                    : undefined\n                }\n              >\n                <div class=\"smwb-stepper__icon\" aria-hidden=\"true\">\n                  <Show when={step.icon} fallback={completed() ? <Icon name=\"check\" size={16} /> : <span>{index() + 1}</span>}>\n                    {step.icon}\n                  </Show>\n                </div>\n                <div class=\"smwb-stepper__text\">\n                  <span class=\"smwb-stepper__label\">{step.label}</span>\n                  <Show when={step.optional}>\n                    <span class=\"smwb-stepper__optional\">{step.optional}</span>\n                  </Show>\n                  <Show when={step.description}>\n                    <span class=\"smwb-stepper__description\">{step.description}</span>\n                  </Show>\n                </div>\n              </div>\n              <Show when={!isLast()}>\n                <div class=\"smwb-stepper__connector\" aria-hidden=\"true\" />\n              </Show>\n            </>\n          );\n        }}\n      </For>\n    </div>\n  );\n\n  // `auto` needs a query container around the stepper: its own flex direction is\n  // what the container query switches.\n  return (\n    <Show when={auto()} fallback={stepper()}>\n      <div class=\"smwb-stepper-auto\">{stepper()}</div>\n    </Show>\n  );\n}\n\nexport default Stepper;\n"],"mappings":"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","names":[],"file":"stepper.jsx"}

package/dist/headless/source/components/navigation/tabs/tab/tab.jsx

@@ -1,4 +1,4 @@
-import { Show, mergeProps, splitProps } from "solid-js";
+import { Show, children, mergeProps, splitProps } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import cn from "clsx";
 import { Ripple } from "../../../base/ripple";
@@ -21,6 +21,8 @@ function Tab(props) {
     "onClick",
     "ref"
   ]);
+  const icon = children(() => local.icon);
+  const label = children(() => local.label);
   let rippleActions;
   const active = () => ctx ? ctx.value() === index : local.isActive;
   const onClick = (event) => {
@@ -57,11 +59,11 @@ function Tab(props) {
       if (ctx?.indicatorContent) ctx.setContentRef(index, el);
     })}
   >
-        <Show when={local.icon}>
-          <span class="smwb-tab__icon">{local.icon}</span>
+        <Show when={icon()}>
+          <span class="smwb-tab__icon">{icon()}</span>
         </Show>
-        <Show when={local.label}>
-          <span class="smwb-tab__text-label">{local.label}</span>
+        <Show when={label()}>
+          <span class="smwb-tab__text-label">{label()}</span>
         </Show>
       </span>
       <Ripple actionRef={(actions) => rippleActions = actions} classes={{ child: "tab__ripple-child" }} />

package/dist/headless/source/components/navigation/tabs/tab/tab.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../../base/ripple\";\nimport { useTabsContext } from \"../tabsContext\";\nimport { mergeRefs, type Ref } from \"../../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../../primitives/callHandler\";\n\nexport interface TabProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: JSX.Element;\n  isActive?: boolean;\n  contentRef?: Ref<HTMLSpanElement>;\n  icon?: JSX.Element;\n  stacked?: boolean;\n  tag?: string;\n  disabled?: boolean;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport function Tab(props: ParentProps<TabProps>): JSX.Element {\n  const ctx = useTabsContext();\n  const index = ctx ? ctx.registerTab() : -1;\n  const merged = mergeProps({ isActive: false, stacked: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"isActive\",\n    \"contentRef\",\n    \"icon\",\n    \"stacked\",\n    \"tag\",\n    \"disabled\",\n    \"onClick\",\n    \"ref\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const active = (): boolean => (ctx ? ctx.value() === index : local.isActive);\n\n  const onClick: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    if (ctx) {\n      ctx.onChange(event, index);\n    } else {\n      callHandler(local.onClick, event);\n    }\n  };\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  const tag = (): string => local.tag ?? \"button\";\n\n  return (\n    <Dynamic\n      component={tag()}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-tab\", local.class, {\n        \"smwb-tab--active\": active(),\n        \"smwb-tab--stacked\": local.stacked,\n        \"smwb-tab--disabled\": local.disabled,\n      })}\n      onClick={onClick}\n      onPointerDown={onPointerDown}\n      role=\"tab\"\n      aria-selected={active()}\n      aria-disabled={local.disabled || undefined}\n      tabindex={active() ? 0 : -1}\n      disabled={tag() === \"button\" ? local.disabled : undefined}\n    >\n      <span\n        class=\"smwb-tab__content\"\n        ref={mergeRefs(local.contentRef, (el) => {\n          if (ctx?.indicatorContent) ctx.setContentRef(index, el as HTMLSpanElement);\n        })}\n      >\n        <Show when={local.icon}>\n          <span class=\"smwb-tab__icon\">{local.icon}</span>\n        </Show>\n        <Show when={local.label}>\n          <span class=\"smwb-tab__text-label\">{local.label}</span>\n        </Show>\n      </span>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} classes={{ child: \"tab__ripple-child\" }} />\n    </Dynamic>\n  );\n}\n\nexport default Tab;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,sBAAsB;AAC/B,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAarB,SAAS,IAAI,OAA2C;AAC7D,QAAM,MAAM,eAAe;AAC3B,QAAM,QAAQ,MAAM,IAAI,YAAY,IAAI;AACxC,QAAM,SAAS,WAAW,EAAE,UAAU,OAAO,SAAS,MAAM,GAAG,KAAK;AACpE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AAEJ,QAAM,SAAS,MAAgB,MAAM,IAAI,MAAM,MAAM,QAAQ,MAAM;AAEnE,QAAM,UAA+E,CAAC,UAAU;AAC9F,QAAI,KAAK;AACP,UAAI,SAAS,OAAO,KAAK;AAAA,IAC3B,OAAO;AACL,kBAAY,MAAM,SAAS,KAAK;AAAA,IAClC;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,mBAAe,SAAS,KAAK;AAAA,EAC/B;AAEA,QAAM,MAAM,MAAc,MAAM,OAAO;AAEvC,SACE,CAAC;AAAA,IACC,WAAW,IAAI;AAAA,QACX;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,YAAY,MAAM,OAAO;AAAA,MACjC,oBAAoB,OAAO;AAAA,MAC3B,qBAAqB,MAAM;AAAA,MAC3B,sBAAsB,MAAM;AAAA,IAC9B,CAAC;AAAA,IACD,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,IACL,eAAe,OAAO;AAAA,IACtB,eAAe,MAAM,YAAY;AAAA,IACjC,UAAU,OAAO,IAAI,IAAI;AAAA,IACzB,UAAU,IAAI,MAAM,WAAW,MAAM,WAAW;AAAA,GACjD;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,KAAK,UAAU,MAAM,YAAY,CAAC,OAAO;AACvC,UAAI,KAAK,iBAAkB,KAAI,cAAc,OAAO,EAAqB;AAAA,IAC3E,CAAC;AAAA,GACF;AAAA,QACC,CAAC,KAAK,MAAM,MAAM,MAAM;AAAA,UACtB,CAAC,KAAK,MAAM,kBAAkB,MAAM,KAAK,EAAxC,KAA+C;AAAA,QAClD,EAFC,KAEM;AAAA,QACP,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,KAAK,MAAM,wBAAwB,MAAM,MAAM,EAA/C,KAAsD;AAAA,QACzD,EAFC,KAEM;AAAA,MACT,EAZC,KAYM;AAAA,MACP,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,SAAS,EAAE,OAAO,oBAAoB,GAAG,EAAE;AAAA,IACxG,EA/BC;AAiCL;AAEA,IAAO,cAAQ;","names":[],"file":"tab.jsx"}
+{"version":3,"sources":["../../../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../../base/ripple\";\nimport { useTabsContext } from \"../tabsContext\";\nimport { mergeRefs, type Ref } from \"../../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../../primitives/callHandler\";\n\nexport interface TabProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: JSX.Element;\n  isActive?: boolean;\n  contentRef?: Ref<HTMLSpanElement>;\n  icon?: JSX.Element;\n  stacked?: boolean;\n  tag?: string;\n  /** With `tag=\"a\"`: where the link goes, so the tab stays a real link. */\n  href?: string;\n  disabled?: boolean;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport function Tab(props: ParentProps<TabProps>): JSX.Element {\n  const ctx = useTabsContext();\n  const index = ctx ? ctx.registerTab() : -1;\n  const merged = mergeProps({ isActive: false, stacked: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"isActive\",\n    \"contentRef\",\n    \"icon\",\n    \"stacked\",\n    \"tag\",\n    \"disabled\",\n    \"onClick\",\n    \"ref\",\n  ]);\n\n  // Read the icon and the label once: markup passed as a prop is created anew on\n  // every read, and during hydration the copy made for the <Show> test has no\n  // server DOM node to adopt (\"Unable to find DOM nodes for hydration key\").\n  const icon = children(() => local.icon);\n  const label = children(() => local.label);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const active = (): boolean => (ctx ? ctx.value() === index : local.isActive);\n\n  const onClick: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    if (ctx) {\n      ctx.onChange(event, index);\n    } else {\n      callHandler(local.onClick, event);\n    }\n  };\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  const tag = (): string => local.tag ?? \"button\";\n\n  return (\n    <Dynamic\n      component={tag()}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-tab\", local.class, {\n        \"smwb-tab--active\": active(),\n        \"smwb-tab--stacked\": local.stacked,\n        \"smwb-tab--disabled\": local.disabled,\n      })}\n      onClick={onClick}\n      onPointerDown={onPointerDown}\n      role=\"tab\"\n      aria-selected={active()}\n      aria-disabled={local.disabled || undefined}\n      tabindex={active() ? 0 : -1}\n      disabled={tag() === \"button\" ? local.disabled : undefined}\n    >\n      <span\n        class=\"smwb-tab__content\"\n        ref={mergeRefs(local.contentRef, (el) => {\n          if (ctx?.indicatorContent) ctx.setContentRef(index, el as HTMLSpanElement);\n        })}\n      >\n        <Show when={icon()}>\n          <span class=\"smwb-tab__icon\">{icon()}</span>\n        </Show>\n        <Show when={label()}>\n          <span class=\"smwb-tab__text-label\">{label()}</span>\n        </Show>\n      </span>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} classes={{ child: \"tab__ripple-child\" }} />\n    </Dynamic>\n  );\n}\n\nexport default Tab;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,sBAAsB;AAC/B,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAerB,SAAS,IAAI,OAA2C;AAC7D,QAAM,MAAM,eAAe;AAC3B,QAAM,QAAQ,MAAM,IAAI,YAAY,IAAI;AACxC,QAAM,SAAS,WAAW,EAAE,UAAU,OAAO,SAAS,MAAM,GAAG,KAAK;AACpE,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,MAAM,MAAM,IAAI;AACtC,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AAExC,MAAI;AAEJ,QAAM,SAAS,MAAgB,MAAM,IAAI,MAAM,MAAM,QAAQ,MAAM;AAEnE,QAAM,UAA+E,CAAC,UAAU;AAC9F,QAAI,KAAK;AACP,UAAI,SAAS,OAAO,KAAK;AAAA,IAC3B,OAAO;AACL,kBAAY,MAAM,SAAS,KAAK;AAAA,IAClC;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,mBAAe,SAAS,KAAK;AAAA,EAC/B;AAEA,QAAM,MAAM,MAAc,MAAM,OAAO;AAEvC,SACE,CAAC;AAAA,IACC,WAAW,IAAI;AAAA,QACX;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,YAAY,MAAM,OAAO;AAAA,MACjC,oBAAoB,OAAO;AAAA,MAC3B,qBAAqB,MAAM;AAAA,MAC3B,sBAAsB,MAAM;AAAA,IAC9B,CAAC;AAAA,IACD,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,IACL,eAAe,OAAO;AAAA,IACtB,eAAe,MAAM,YAAY;AAAA,IACjC,UAAU,OAAO,IAAI,IAAI;AAAA,IACzB,UAAU,IAAI,MAAM,WAAW,MAAM,WAAW;AAAA,GACjD;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,KAAK,UAAU,MAAM,YAAY,CAAC,OAAO;AACvC,UAAI,KAAK,iBAAkB,KAAI,cAAc,OAAO,EAAqB;AAAA,IAC3E,CAAC;AAAA,GACF;AAAA,QACC,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,UAClB,CAAC,KAAK,MAAM,kBAAkB,KAAK,EAAE,EAApC,KAA2C;AAAA,QAC9C,EAFC,KAEM;AAAA,QACP,CAAC,KAAK,MAAM,MAAM,GAAG;AAAA,UACnB,CAAC,KAAK,MAAM,wBAAwB,MAAM,EAAE,EAA3C,KAAkD;AAAA,QACrD,EAFC,KAEM;AAAA,MACT,EAZC,KAYM;AAAA,MACP,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,SAAS,EAAE,OAAO,oBAAoB,GAAG,EAAE;AAAA,IACxG,EA/BC;AAiCL;AAEA,IAAO,cAAQ;","names":[],"file":"tab.jsx"}