@smwb/ui-solid 0.11.2 → 0.12.1

package/dist/headless/components/layout/divider/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sources":["../../../../../src/components/layout/divider/divider.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, 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  const hasText = (): boolean =>\n    local.children !== undefined && local.children !== null && (local.children as unknown) !== false;\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() && local.orientation === \"horizontal\",\n        [`smwb-divider_align-${local.textAlign}`]: hasText() && local.orientation === \"horizontal\",\n        \"smwb-divider_flex-item\": local.flexItem,\n      }, local.class)}\n      style={dividerStyle()}\n    >\n      <Show when={hasText() && local.orientation === \"horizontal\"}>\n        <span class=\"smwb-divider__text\">{local.children}</span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Divider;\n"],"names":["colorVar","default","undefined","primary","secondary","error","success","warning","info","Divider","props","merged","mergeProps","orientation","variant","textAlign","color","local","rest","splitProps","hasText","children","dividerStyle","c","t","thickness","style","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","flexItem","class","_$insert","_$createComponent","Show","when","_$memo","_el$2","_tmpl$"],"mappings":";;;;;AAsBA,MAAMA,IAAqD;AAAA,EACzDC,SAASC;AAAAA,EACTC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,OAAO;AAAA,EACPC,SAAS;AAAA,EACTC,SAAS;AAAA,EACTC,MAAM;AACR;AAEO,SAASC,EAAQC,GAA+C;AACrE,QAAMC,IAASC,EACb;AAAA,IACEC,aAAa;AAAA,IACbC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,OAAO;AAAA,EAAA,GAETN,CACF,GACM,CAACO,GAAOC,CAAI,IAAIC,EAAWR,GAAQ,CACvC,SACA,eACA,WACA,aACA,SACA,aACA,YACA,SACA,YACA,KAAK,CACN,GAEKS,IAAUA,MACdH,EAAMI,aAAanB,UAAae,EAAMI,aAAa,QAASJ,EAAMI,aAAyB,IAEvFC,IAAeA,MAAyB;AAC5C,UAAMC,IAAIvB,EAASiB,EAAMD,KAAK,GACxBQ,IAAI,OAAOP,EAAMQ,aAAc,WAAW,GAAGR,EAAMQ,SAAS,OAAOR,EAAMQ;AAC/E,WAAO;AAAA,MACL,GAAI,OAAOR,EAAMS,SAAU,YAAYT,EAAMS,QAAQT,EAAMS,QAAQ,CAAA;AAAA,MACnE,GAAIH,IAAI;AAAA,QAAE,gBAAgBA;AAAAA,MAAAA,IAAM,CAAA;AAAA,MAChC,GAAIC,IAAKP,EAAMJ,gBAAgB,aAAa;AAAA,QAAE,qBAAqBW;AAAAA,MAAAA,IAAM;AAAA,QAAE,uBAAuBA;AAAAA,MAAAA,IAAO,CAAA;AAAA,IAAC;AAAA,EAE9G;AAEA,UAAA,MAAA;AAAA,QAAAG,IAAAC,EAAAA,GAAAC,IAGSC,EAAUb,EAAMc,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBhB,GAAI;AAAA,MAAA,eAEI;AAAA,MAAS,MAChB;AAAA,MAAW,IAAA,qBAAA;AAAA,eACED,EAAMJ;AAAAA,MAAW;AAAA,MAAA,IAAA,QAAA;AAAA,eAC5BsB,EAAG,gBAAgB,gBAAgBlB,EAAMJ,WAAW,IAAI,gBAAgBI,EAAMH,OAAO,IAAI;AAAA,UAC9F,0BAA0BM,EAAAA,KAAaH,EAAMJ,gBAAgB;AAAA,UAC7D,CAAC,sBAAsBI,EAAMF,SAAS,EAAE,GAAGK,EAAAA,KAAaH,EAAMJ,gBAAgB;AAAA,UAC9E,0BAA0BI,EAAMmB;AAAAA,QAAAA,GAC/BnB,EAAMoB,KAAK;AAAA,MAAC;AAAA,MAAA,IACfX,QAAK;AAAA,eAAEJ,EAAAA;AAAAA,MAAc;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAgB,EAAAX,GAAAY,EAEpBC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEC,EAAA,MAAA,CAAA,CAAAtB,GAAS,OAAIH,EAAMJ,gBAAgB;AAAA,MAAY;AAAA,MAAA,IAAAQ,WAAA;AAAA,YAAAsB,IAAAC,EAAAA;AAAAN,eAAAA,EAAAK,GAAA,MACvB1B,EAAMI,QAAQ,GAAAsB;AAAAA,MAAA;AAAA,IAAA,CAAA,CAAA,GAAAhB;AAAAA,EAAA,GAAA;AAIxD;"}
+{"version":3,"file":"divider.js","sources":["../../../../../src/components/layout/divider/divider.tsx"],"sourcesContent":["import { 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"],"names":["colorVar","default","undefined","primary","secondary","error","success","warning","info","Divider","props","merged","mergeProps","orientation","variant","textAlign","color","local","rest","splitProps","text","children","hasText","resolved","dividerStyle","c","t","thickness","style","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","flexItem","class","_$insert","_$createComponent","Show","when","_el$2","_tmpl$"],"mappings":";;;;;AAsBA,MAAMA,IAAqD;AAAA,EACzDC,SAASC;AAAAA,EACTC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,OAAO;AAAA,EACPC,SAAS;AAAA,EACTC,SAAS;AAAA,EACTC,MAAM;AACR;AAEO,SAASC,EAAQC,GAA+C;AACrE,QAAMC,IAASC,EACb;AAAA,IACEC,aAAa;AAAA,IACbC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,OAAO;AAAA,EAAA,GAETN,CACF,GACM,CAACO,GAAOC,CAAI,IAAIC,EAAWR,GAAQ,CACvC,SACA,eACA,WACA,aACA,SACA,aACA,YACA,SACA,YACA,KAAK,CACN,GAKKS,IAAOC,EAAS,MAAOJ,EAAMJ,gBAAgB,eAAeI,EAAMI,WAAWnB,MAAU,GACvFoB,IAAUA,MAAe;AAC7B,UAAMC,IAAWH,EAAAA;AACjB,WAAiCG,KAAa,QAASA,MAAyB;AAAA,EAClF,GAEMC,IAAeA,MAAyB;AAC5C,UAAMC,IAAIzB,EAASiB,EAAMD,KAAK,GACxBU,IAAI,OAAOT,EAAMU,aAAc,WAAW,GAAGV,EAAMU,SAAS,OAAOV,EAAMU;AAC/E,WAAO;AAAA,MACL,GAAI,OAAOV,EAAMW,SAAU,YAAYX,EAAMW,QAAQX,EAAMW,QAAQ,CAAA;AAAA,MACnE,GAAIH,IAAI;AAAA,QAAE,gBAAgBA;AAAAA,MAAAA,IAAM,CAAA;AAAA,MAChC,GAAIC,IAAKT,EAAMJ,gBAAgB,aAAa;AAAA,QAAE,qBAAqBa;AAAAA,MAAAA,IAAM;AAAA,QAAE,uBAAuBA;AAAAA,MAAAA,IAAO,CAAA;AAAA,IAAC;AAAA,EAE9G;AAEA,UAAA,MAAA;AAAA,QAAAG,IAAAC,EAAAA,GAAAC,IAGSC,EAAUf,EAAMgB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBlB,GAAI;AAAA,MAAA,eAEI;AAAA,MAAS,MAChB;AAAA,MAAW,IAAA,qBAAA;AAAA,eACED,EAAMJ;AAAAA,MAAW;AAAA,MAAA,IAAA,QAAA;AAAA,eAC5BwB,EAAG,gBAAgB,gBAAgBpB,EAAMJ,WAAW,IAAI,gBAAgBI,EAAMH,OAAO,IAAI;AAAA,UAC9F,0BAA0BQ,EAAAA;AAAAA,UAC1B,CAAC,sBAAsBL,EAAMF,SAAS,EAAE,GAAGO,EAAAA;AAAAA,UAC3C,0BAA0BL,EAAMqB;AAAAA,QAAAA,GAC/BrB,EAAMsB,KAAK;AAAA,MAAC;AAAA,MAAA,IACfX,QAAK;AAAA,eAAEJ,EAAAA;AAAAA,MAAc;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAgB,EAAAX,GAAAY,EAEpBC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAErB,EAAAA;AAAAA,MAAS;AAAA,MAAA,IAAAD,WAAA;AAAA,YAAAuB,IAAAC,EAAAA;AAAAL,eAAAA,EAAAI,GACexB,CAAI,GAAAwB;AAAAA,MAAA;AAAA,IAAA,CAAA,CAAA,GAAAf;AAAAA,EAAA,GAAA;AAI9C;"}

package/dist/headless/components/layout/pageHeader/pageHeader.js

@@ -1,76 +1,76 @@
-import { use as u, spread as h, mergeProps as _, insert as t, createComponent as a, template as i } from "solid-js/web";
-import { mergeProps as b, splitProps as f, Show as l } from "solid-js";
-import v from "clsx";
-import { mergeRefs as w } from "../../../primitives/mergeRefs.js";
-import { Typography as c } from "../../dataDisplay/typography/typography.js";
-var $ = /* @__PURE__ */ i("<div class=smwb-page-header__breadcrumbs>"), y = /* @__PURE__ */ i("<div class=smwb-page-header__actions>"), P = /* @__PURE__ */ i("<header><div class=smwb-page-header__row><div class=smwb-page-header__titles>"), C = /* @__PURE__ */ i("<div class=smwb-page-header__title>");
-function T(m) {
-  const p = b({
+import { use as v, spread as w, mergeProps as $, insert as t, createComponent as s, template as i } from "solid-js/web";
+import { mergeProps as y, splitProps as P, children as l, Show as n } from "solid-js";
+import C from "clsx";
+import { mergeRefs as x } from "../../../primitives/mergeRefs.js";
+import { Typography as h } from "../../dataDisplay/typography/typography.js";
+var S = /* @__PURE__ */ i("<div class=smwb-page-header__breadcrumbs>"), k = /* @__PURE__ */ i("<div class=smwb-page-header__actions>"), H = /* @__PURE__ */ i("<header><div class=smwb-page-header__row><div class=smwb-page-header__titles>"), R = /* @__PURE__ */ i("<div class=smwb-page-header__title>");
+function B(_) {
+  const b = y({
     divider: !1
-  }, m), [e, g] = f(p, ["title", "subtitle", "breadcrumbs", "actions", "divider", "class", "ref"]);
+  }, _), [r, f] = P(b, ["title", "subtitle", "breadcrumbs", "actions", "divider", "class", "ref"]), d = l(() => r.title), c = l(() => r.subtitle), m = l(() => r.breadcrumbs), p = l(() => r.actions);
   return (() => {
-    var s = P(), n = s.firstChild, d = n.firstChild, o = w(e.ref);
-    return typeof o == "function" && u(o, s), h(s, _(g, {
+    var a = H(), o = a.firstChild, g = o.firstChild, u = x(r.ref);
+    return typeof u == "function" && v(u, a), w(a, $(f, {
       "data-testid": "page-header",
       get class() {
-        return v("smwb-page-header", {
-          "smwb-page-header_divider": e.divider
-        }, e.class);
+        return C("smwb-page-header", {
+          "smwb-page-header_divider": r.divider
+        }, r.class);
       }
-    }), !1, !0), t(s, a(l, {
+    }), !1, !0), t(a, s(n, {
       get when() {
-        return e.breadcrumbs;
+        return m();
       },
       get children() {
-        var r = $();
-        return t(r, () => e.breadcrumbs), r;
+        var e = S();
+        return t(e, m), e;
       }
-    }), n), t(d, a(l, {
+    }), o), t(g, s(n, {
       get when() {
-        return typeof e.title == "string";
+        return typeof d() == "string";
       },
       get fallback() {
         return (() => {
-          var r = C();
-          return t(r, () => e.title), r;
+          var e = R();
+          return t(e, d), e;
         })();
       },
       get children() {
-        return a(c, {
+        return s(h, {
           variant: "h4",
           component: "h1",
           class: "smwb-page-header__title",
           get children() {
-            return e.title;
+            return d();
           }
         });
       }
-    }), null), t(d, a(l, {
+    }), null), t(g, s(n, {
       get when() {
-        return e.subtitle;
+        return c();
       },
       get children() {
-        return a(c, {
+        return s(h, {
           variant: "body2",
           color: "textSecondary",
           class: "smwb-page-header__subtitle",
           get children() {
-            return e.subtitle;
+            return c();
           }
         });
       }
-    }), null), t(n, a(l, {
+    }), null), t(o, s(n, {
       get when() {
-        return e.actions;
+        return p();
       },
       get children() {
-        var r = y();
-        return t(r, () => e.actions), r;
+        var e = k();
+        return t(e, p), e;
       }
-    }), null), s;
+    }), null), a;
   })();
 }
 export {
-  T as PageHeader
+  B as PageHeader
 };
 //# sourceMappingURL=pageHeader.js.map

package/dist/headless/components/layout/pageHeader/pageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"pageHeader.js","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"],"names":["PageHeader","props","merged","mergeProps","divider","local","rest","splitProps","_el$","_tmpl$3","_el$3","firstChild","_el$4","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","Show","when","breadcrumbs","children","_el$2","_tmpl$","title","fallback","_el$6","_tmpl$4","Typography","variant","component","subtitle","color","actions","_el$5","_tmpl$2"],"mappings":";;;;;;AAiBO,SAASA,EAAWC,GAAqC;AAC9D,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,EAAA,GAASH,CAAK,GAC7C,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CACvC,SACA,YACA,eACA,WACA,WACA,SACA,KAAK,CACN;AAED,UAAA,MAAA;AAAA,QAAAM,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC,YAAAE,IAGSC,EAAUT,EAAMU,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAL,CAAA,GAAAS,EAAAT,GAAAU,EADrBZ,GAAI;AAAA,MAAA,eAEI;AAAA,MAAa,IAAA,QAAA;AAAA,eAClBa,EAAG,oBAAoB;AAAA,UAAE,4BAA4Bd,EAAMD;AAAAA,QAAAA,GAAWC,EAAMe,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAb,GAAAc,EAExFC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnB,EAAMoB;AAAAA,MAAW;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAP,eAAAA,EAAAM,GAAA,MACiBtB,EAAMoB,WAAW,GAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAjB,CAAA,GAAAW,EAAAT,GAAAU,EAI1DC,GAAI;AAAA,MAAA,IACHC,OAAI;AAAA,eAAE,OAAOnB,EAAMwB,SAAU;AAAA,MAAQ;AAAA,MAAA,IACrCC,WAAQ;AAAA,gBAAA,MAAA;AAAA,cAAAC,IAAAC,EAAAA;AAAAX,iBAAAA,EAAAU,GAAA,MAAwC1B,EAAMwB,KAAK,GAAAE;AAAAA,QAAA,GAAA;AAAA,MAAA;AAAA,MAAA,IAAAL,WAAA;AAAA,eAAAJ,EAE1DW,GAAU;AAAA,UAACC,SAAO;AAAA,UAAMC,WAAS;AAAA,UAAA,OAAA;AAAA,UAAA,IAAAT,WAAA;AAAA,mBAC/BrB,EAAMwB;AAAAA,UAAK;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAR,EAAAT,GAAAU,EAGfC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnB,EAAM+B;AAAAA,MAAQ;AAAA,MAAA,IAAAV,WAAA;AAAA,eAAAJ,EACvBW,GAAU;AAAA,UAACC,SAAO;AAAA,UAASG,OAAK;AAAA,UAAA,OAAA;AAAA,UAAA,IAAAX,WAAA;AAAA,mBAC9BrB,EAAM+B;AAAAA,UAAQ;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAf,EAAAX,GAAAY,EAIpBC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnB,EAAMiC;AAAAA,MAAO;AAAA,MAAA,IAAAZ,WAAA;AAAA,YAAAa,IAAAC,EAAAA;AAAAnB,eAAAA,EAAAkB,GAAA,MACiBlC,EAAMiC,OAAO,GAAAC;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAA/B;AAAAA,EAAA,GAAA;AAK/D;"}
+{"version":3,"file":"pageHeader.js","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"],"names":["PageHeader","props","merged","mergeProps","divider","local","rest","splitProps","title","children","subtitle","breadcrumbs","actions","_el$","_tmpl$3","_el$3","firstChild","_el$4","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","Show","when","_el$2","_tmpl$","fallback","_el$6","_tmpl$4","Typography","variant","component","color","_el$5","_tmpl$2"],"mappings":";;;;;;AAiBO,SAASA,EAAWC,GAAqC;AAC9D,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,EAAA,GAASH,CAAK,GAC7C,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CACvC,SACA,YACA,eACA,WACA,WACA,SACA,KAAK,CACN,GAIKM,IAAQC,EAAS,MAAMJ,EAAMG,KAAK,GAClCE,IAAWD,EAAS,MAAMJ,EAAMK,QAAQ,GACxCC,IAAcF,EAAS,MAAMJ,EAAMM,WAAW,GAC9CC,IAAUH,EAAS,MAAMJ,EAAMO,OAAO;AAE5C,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC,YAAAE,IAGSC,EAAUd,EAAMe,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAL,CAAA,GAAAS,EAAAT,GAAAU,EADrBjB,GAAI;AAAA,MAAA,eAEI;AAAA,MAAa,IAAA,QAAA;AAAA,eAClBkB,EAAG,oBAAoB;AAAA,UAAE,4BAA4BnB,EAAMD;AAAAA,QAAAA,GAAWC,EAAMoB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAb,GAAAc,EAExFC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,EAAAA;AAAAA,MAAa;AAAA,MAAA,IAAAF,WAAA;AAAA,YAAAqB,IAAAC,EAAAA;AAAAL,eAAAA,EAAAI,GACqBnB,CAAW,GAAAmB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAf,CAAA,GAAAW,EAAAT,GAAAU,EAIpDC,GAAI;AAAA,MAAA,IACHC,OAAI;AAAA,eAAE,OAAOrB,OAAY;AAAA,MAAQ;AAAA,MAAA,IACjCwB,WAAQ;AAAA,gBAAA,MAAA;AAAA,cAAAC,IAAAC,EAAAA;AAAAR,iBAAAA,EAAAO,GAAwCzB,CAAK,GAAAyB;AAAAA,QAAA,GAAA;AAAA,MAAA;AAAA,MAAA,IAAAxB,WAAA;AAAA,eAAAkB,EAEpDQ,GAAU;AAAA,UAACC,SAAO;AAAA,UAAMC,WAAS;AAAA,UAAA,OAAA;AAAA,UAAA,IAAA5B,WAAA;AAAA,mBAC/BD,EAAAA;AAAAA,UAAO;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAkB,EAAAT,GAAAU,EAGXC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnB,EAAAA;AAAAA,MAAU;AAAA,MAAA,IAAAD,WAAA;AAAA,eAAAkB,EACnBQ,GAAU;AAAA,UAACC,SAAO;AAAA,UAASE,OAAK;AAAA,UAAA,OAAA;AAAA,UAAA,IAAA7B,WAAA;AAAA,mBAC9BC,EAAAA;AAAAA,UAAU;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAgB,EAAAX,GAAAY,EAIhBC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEjB,EAAAA;AAAAA,MAAS;AAAA,MAAA,IAAAH,WAAA;AAAA,YAAA8B,IAAAC,EAAAA;AAAAd,eAAAA,EAAAa,GACqB3B,CAAO,GAAA2B;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAA1B;AAAAA,EAAA,GAAA;AAKzD;"}

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

@@ -0,0 +1,98 @@
+import { use as f, spread as g, mergeProps as v, insert as n, createComponent as l, Dynamic as b, memo as $, template as a, effect as w, setAttribute as E, delegateEvents as L } from "solid-js/web";
+import { mergeProps as x, splitProps as y, children as _, Show as c, createSignal as P } from "solid-js";
+import k from "clsx";
+import { mergeRefs as C } from "../../../primitives/mergeRefs.js";
+import { Tooltip as H } from "../../feedBack/tooltip/tooltip.js";
+import { Icon as I } from "../../base/icon/icon.js";
+var S = /* @__PURE__ */ a("<span class=smwb-section-header__help role=img tabindex=0>"), z = /* @__PURE__ */ a("<span class=smwb-section-header__count>"), A = /* @__PURE__ */ a("<div class=smwb-section-header__subtitle>"), D = /* @__PURE__ */ a("<div class=smwb-section-header__actions>"), O = /* @__PURE__ */ a("<header data-testid=section-header><div class=smwb-section-header__titles><div class=smwb-section-header__title-line>");
+function R(s) {
+  const [d, e] = P(!1);
+  return l(H, {
+    class: "smwb-section-header__tooltip",
+    get message() {
+      return s.text;
+    },
+    trigger: "manual",
+    get open() {
+      return d();
+    },
+    placement: "top",
+    offset: {
+      offsetY: 6
+    },
+    get children() {
+      var t = S();
+      return t.$$keydown = (o) => {
+        o.key === "Escape" && e(!1);
+      }, t.addEventListener("blur", () => e(!1)), t.addEventListener("focus", () => e(!0)), t.addEventListener("pointerleave", () => e(!1)), t.addEventListener("pointerenter", () => e(!0)), n(t, l(I, {
+        name: "help",
+        size: 16
+      })), w(() => E(t, "aria-label", s.label ?? s.text)), t;
+    }
+  });
+}
+function G(s) {
+  const d = x({
+    level: 2
+  }, s), [e, t] = y(d, ["class", "title", "level", "count", "help", "helpLabel", "titleId", "subtitle", "children", "ref"]), o = _(() => e.subtitle), m = _(() => e.children);
+  return (() => {
+    var i = O(), p = i.firstChild, u = p.firstChild, h = C(e.ref);
+    return typeof h == "function" && f(h, i), g(i, v(t, {
+      get class() {
+        return k("smwb-section-header", `smwb-section-header_level-${e.level}`, e.class);
+      }
+    }), !1, !0), n(u, l(b, {
+      get component() {
+        return `h${e.level}`;
+      },
+      get id() {
+        return e.titleId;
+      },
+      class: "smwb-section-header__title",
+      get children() {
+        return e.title;
+      }
+    }), null), n(u, l(c, {
+      get when() {
+        return $(() => e.count !== void 0)() && e.count !== null;
+      },
+      get children() {
+        var r = z();
+        return n(r, () => e.count), r;
+      }
+    }), null), n(u, l(c, {
+      get when() {
+        return e.help;
+      },
+      children: (r) => l(R, {
+        get text() {
+          return r();
+        },
+        get label() {
+          return e.helpLabel;
+        }
+      })
+    }), null), n(p, l(c, {
+      get when() {
+        return o();
+      },
+      get children() {
+        var r = A();
+        return n(r, o), r;
+      }
+    }), null), n(i, l(c, {
+      get when() {
+        return m();
+      },
+      get children() {
+        var r = D();
+        return n(r, m), r;
+      }
+    }), null), i;
+  })();
+}
+L(["keydown"]);
+export {
+  G as SectionHeader
+};
+//# sourceMappingURL=sectionHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sectionHeader.js","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"],"names":["HelpHint","props","open","setOpen","createSignal","_$createComponent","Tooltip","message","text","trigger","placement","offset","offsetY","children","_el$","_tmpl$","$$keydown","event","key","addEventListener","_$insert","Icon","name","size","_$effect","_$setAttribute","label","SectionHeader","merged","mergeProps","level","local","rest","splitProps","subtitle","actions","_el$2","_tmpl$5","_el$3","firstChild","_el$4","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","Dynamic","component","id","titleId","title","Show","when","_$memo","count","undefined","_el$5","_tmpl$2","help","helpLabel","_el$6","_tmpl$3","_el$7","_tmpl$4","_$delegateEvents"],"mappings":"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"}

package/dist/headless/components/layout/stack/stack.js

@@ -1,59 +1,62 @@
-import { use as u, spread as y, mergeProps as v, insert as a, createComponent as n, template as o } from "solid-js/web";
-import { mergeProps as h, splitProps as w, children as $, Show as c, For as x } from "solid-js";
-import _ from "clsx";
-import { mergeRefs as b } from "../../../primitives/mergeRefs.js";
-var k = /* @__PURE__ */ o("<div>"), j = /* @__PURE__ */ o("<div class=smwb-stack__divider>");
-const l = (r) => r === "start" || r === "end" ? `flex-${r}` : r, P = (r) => typeof r == "number" ? `calc(var(--smui-spacing-unit, 4px) * ${r})` : r === "none" ? "0" : `var(--smui-space-${r})`;
-function G(r) {
-  const p = h({
+import { use as h, spread as $, mergeProps as w, insert as l, createComponent as n, memo as _, template as f } from "solid-js/web";
+import { mergeProps as x, splitProps as b, children as p, Show as d, For as k } from "solid-js";
+import j from "clsx";
+import { mergeRefs as P } from "../../../primitives/mergeRefs.js";
+var A = /* @__PURE__ */ f("<div>"), S = /* @__PURE__ */ f("<div class=smwb-stack__divider>");
+const m = (r) => r === "start" || r === "end" ? `flex-${r}` : r, C = (r) => typeof r == "number" ? `calc(var(--smui-spacing-unit, 4px) * ${r})` : r === "none" ? "0" : `var(--smui-space-${r})`;
+function q(r) {
+  const g = x({
     direction: "column",
     spacing: "md"
-  }, r), [e, d] = w(p, ["direction", "spacing", "align", "justify", "wrap", "divider", "class", "style", "children", "ref"]), m = $(() => e.children);
+  }, r), [e, u] = b(g, ["direction", "spacing", "align", "justify", "wrap", "divider", "class", "style", "children", "ref"]), i = p(() => e.children), s = p(() => i.toArray().length > 1 ? e.divider : void 0);
   return (() => {
-    var t = k(), i = b(e.ref);
-    return typeof i == "function" && u(i, t), y(t, v(d, {
+    var t = A(), a = P(e.ref);
+    return typeof a == "function" && h(a, t), $(t, w(u, {
       "data-testid": "stack",
       get class() {
-        return _("smwb-stack", e.class);
+        return j("smwb-stack", e.class);
       },
       get style() {
         return {
           display: "flex",
           "flex-direction": e.direction,
           "flex-wrap": e.wrap ? "wrap" : void 0,
-          "align-items": l(e.align),
-          "justify-content": l(e.justify),
-          gap: P(e.spacing),
+          "align-items": m(e.align),
+          "justify-content": m(e.justify),
+          gap: C(e.spacing),
           ...typeof e.style == "object" && e.style ? e.style : {}
         };
       }
-    }), !1, !0), a(t, n(c, {
+    }), !1, !0), l(t, n(d, {
       get when() {
-        return e.divider;
+        return s();
       },
       get fallback() {
-        return e.children;
+        return i();
       },
       get children() {
-        return n(x, {
+        return n(k, {
           get each() {
-            return m.toArray();
+            return i.toArray();
           },
-          children: (f, g) => [n(c, {
+          children: (v, o) => [n(d, {
             get when() {
-              return g() > 0;
+              return o() > 0;
             },
             get children() {
-              var s = j();
-              return a(s, () => e.divider), s;
+              var c = S();
+              return l(c, (() => {
+                var y = _(() => o() === 1);
+                return () => y() ? s() : e.divider;
+              })()), c;
             }
-          }), f]
+          }), v]
         });
       }
     })), t;
   })();
 }
 export {
-  G as Stack
+  q as Stack
 };
 //# sourceMappingURL=stack.js.map

package/dist/headless/components/layout/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","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"],"names":["flexAlign","v","resolveGap","s","Stack","props","merged","mergeProps","direction","spacing","local","rest","splitProps","resolved","resolveChildren","children","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","style","display","wrap","undefined","align","justify","gap","_$insert","_$createComponent","Show","when","divider","fallback","For","each","toArray","child","index","_el$2","_tmpl$2"],"mappings":";;;;;AAkBA,MAAMA,IAAYA,CAACC,MAAoCA,MAAM,WAAWA,MAAM,QAAQ,QAAQA,CAAC,KAAKA,GAE9FC,IAAaA,CAACC,MAClB,OAAOA,KAAM,WAAW,wCAAwCA,CAAC,MAAMA,MAAM,SAAS,MAAM,oBAAoBA,CAAC;AAE5G,SAASC,EAAMC,GAA6C;AACjE,QAAMC,IAASC,EAAW;AAAA,IAAEC,WAAW;AAAA,IAAmBC,SAAS;AAAA,EAAA,GAAwBJ,CAAK,GAC1F,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,aACA,WACA,SACA,WACA,QACA,WACA,SACA,SACA,YACA,KAAK,CACN,GAEKO,IAAWC,EAAgB,MAAMJ,EAAMK,QAAQ;AAErD,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAGSC,EAAUT,EAAMU,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBZ,GAAI;AAAA,MAAA,eAEI;AAAA,MAAO,IAAA,QAAA;AAAA,eACZa,EAAG,cAAcd,EAAMe,KAAK;AAAA,MAAC;AAAA,MAAA,IACpCC,QAAK;AAAA,eAAE;AAAA,UACLC,SAAS;AAAA,UACT,kBAAkBjB,EAAMF;AAAAA,UACxB,aAAaE,EAAMkB,OAAO,SAASC;AAAAA,UACnC,eAAe7B,EAAUU,EAAMoB,KAAK;AAAA,UACpC,mBAAmB9B,EAAUU,EAAMqB,OAAO;AAAA,UAC1CC,KAAK9B,EAAWQ,EAAMD,OAAO;AAAA,UAC7B,GAAI,OAAOC,EAAMgB,SAAU,YAAYhB,EAAMgB,QAAQhB,EAAMgB,QAAQ,CAAA;AAAA,QAAC;AAAA,MACrE;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAO,EAAAjB,GAAAkB,EAEAC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE1B,EAAM2B;AAAAA,MAAO;AAAA,MAAA,IAAEC,WAAQ;AAAA,eAAE5B,EAAMK;AAAAA,MAAQ;AAAA,MAAA,IAAAA,WAAA;AAAA,eAAAmB,EAChDK,GAAG;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAE3B,EAAS4B,QAAAA;AAAAA,UAAS;AAAA,UAAA1B,UAC1BA,CAAC2B,GAAOC,MAAK,CAAAT,EAETC,GAAI;AAAA,YAAA,IAACC,OAAI;AAAA,qBAAEO,MAAU;AAAA,YAAC;AAAA,YAAA,IAAA5B,WAAA;AAAA,kBAAA6B,IAAAC,EAAAA;AAAAZ,qBAAAA,EAAAW,GAAA,MACalC,EAAM2B,OAAO,GAAAO;AAAAA,YAAA;AAAA,UAAA,CAAA,GAEhDF,CAAK;AAAA,QAAA,CAET;AAAA,MAAA;AAAA,IAAA,CAAA,CAAA,GAAA1B;AAAAA,EAAA,GAAA;AAKX;"}
+{"version":3,"file":"stack.js","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"],"names":["flexAlign","v","resolveGap","s","Stack","props","merged","mergeProps","direction","spacing","local","rest","splitProps","resolved","resolveChildren","children","firstDivider","toArray","length","divider","undefined","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","style","display","wrap","align","justify","gap","_$insert","_$createComponent","Show","when","fallback","For","each","child","index","_el$2","_tmpl$2","_c$","_$memo"],"mappings":";;;;;AAkBA,MAAMA,IAAYA,CAACC,MAAoCA,MAAM,WAAWA,MAAM,QAAQ,QAAQA,CAAC,KAAKA,GAE9FC,IAAaA,CAACC,MAClB,OAAOA,KAAM,WAAW,wCAAwCA,CAAC,MAAMA,MAAM,SAAS,MAAM,oBAAoBA,CAAC;AAE5G,SAASC,EAAMC,GAA6C;AACjE,QAAMC,IAASC,EAAW;AAAA,IAAEC,WAAW;AAAA,IAAmBC,SAAS;AAAA,EAAA,GAAwBJ,CAAK,GAC1F,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,aACA,WACA,SACA,WACA,QACA,WACA,SACA,SACA,YACA,KAAK,CACN,GAEKO,IAAWC,EAAgB,MAAMJ,EAAMK,QAAQ,GAI/CC,IAAeF,EAAgB,MAAOD,EAASI,QAAAA,EAAUC,SAAS,IAAIR,EAAMS,UAAUC,MAAU;AAEtG,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAGSC,EAAUd,EAAMe,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBjB,GAAI;AAAA,MAAA,eAEI;AAAA,MAAO,IAAA,QAAA;AAAA,eACZkB,EAAG,cAAcnB,EAAMoB,KAAK;AAAA,MAAC;AAAA,MAAA,IACpCC,QAAK;AAAA,eAAE;AAAA,UACLC,SAAS;AAAA,UACT,kBAAkBtB,EAAMF;AAAAA,UACxB,aAAaE,EAAMuB,OAAO,SAASb;AAAAA,UACnC,eAAepB,EAAUU,EAAMwB,KAAK;AAAA,UACpC,mBAAmBlC,EAAUU,EAAMyB,OAAO;AAAA,UAC1CC,KAAKlC,EAAWQ,EAAMD,OAAO;AAAA,UAC7B,GAAI,OAAOC,EAAMqB,SAAU,YAAYrB,EAAMqB,QAAQrB,EAAMqB,QAAQ,CAAA;AAAA,QAAC;AAAA,MACrE;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAM,EAAAhB,GAAAiB,EAEAC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAExB,EAAAA;AAAAA,MAAc;AAAA,MAAA,IAAEyB,WAAQ;AAAA,eAAE5B,EAAAA;AAAAA,MAAU;AAAA,MAAA,IAAAE,WAAA;AAAA,eAAAuB,EAC7CI,GAAG;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAE9B,EAASI,QAAAA;AAAAA,UAAS;AAAA,UAAAF,UAC1BA,CAAC6B,GAAOC,MAAK,CAAAP,EAETC,GAAI;AAAA,YAAA,IAACC,OAAI;AAAA,qBAAEK,MAAU;AAAA,YAAC;AAAA,YAAA,IAAA9B,WAAA;AAAA,kBAAA+B,IAAAC,EAAAA;AAAAV,qBAAAA,EAAAS,IAAA,MAAA;AAAA,oBAAAE,IAAAC,EAAA,MACaJ,EAAAA,MAAY,CAAC;AAAA,uBAAA,MAAbG,EAAAA,IAAgBhC,EAAAA,IAAiBN,EAAMS;AAAAA,cAAO,IAAA,GAAA2B;AAAAA,YAAA;AAAA,UAAA,CAAA,GAEjFF,CAAK;AAAA,QAAA,CAET;AAAA,MAAA;AAAA,IAAA,CAAA,CAAA,GAAAvB;AAAAA,EAAA,GAAA;AAKX;"}

package/dist/headless/components/navigation/appBar/appBar.js

@@ -1,57 +1,57 @@
-import { createComponent as i, Dynamic as b, mergeProps as g, insert as r, effect as _, className as u, template as p } from "solid-js/web";
-import { mergeProps as h, splitProps as w, Show as a } from "solid-js";
-import s from "clsx";
-import { mergeRefs as $ } from "../../../primitives/mergeRefs.js";
-var v = /* @__PURE__ */ p("<div class=smwb-appbar__left__title>"), C = /* @__PURE__ */ p("<div class=smwb-appbar__inner><div class=smwb-appbar__left></div><div></div><div class=smwb-appbar__right>");
-function y(m) {
-  const c = h({
+import { createComponent as i, Dynamic as u, mergeProps as h, insert as r, effect as w, className as $, template as d } from "solid-js/web";
+import { mergeProps as v, splitProps as C, children as p, Show as m } from "solid-js";
+import c from "clsx";
+import { mergeRefs as A } from "../../../primitives/mergeRefs.js";
+var P = /* @__PURE__ */ d("<div class=smwb-appbar__left__title>"), x = /* @__PURE__ */ d("<div class=smwb-appbar__inner><div class=smwb-appbar__left></div><div></div><div class=smwb-appbar__right>");
+function D(f) {
+  const b = v({
     position: "static",
     placement: "top",
     midContentAlign: "middle",
     color: "default"
-  }, m), [e, d] = w(c, ["class", "children", "dense", "position", "placement", "leftContent", "midContent", "midContentAlign", "rightContent", "title", "color", "ref"]);
-  return i(b, g({
+  }, f), [e, g] = C(b, ["class", "children", "dense", "position", "placement", "leftContent", "midContent", "midContentAlign", "rightContent", "title", "color", "ref"]), l = p(() => e.children), s = p(() => l() ? void 0 : e.title);
+  return i(u, h({
     get component() {
       return e.placement === "top" ? "header" : "footer";
     }
-  }, d, {
+  }, g, {
     ref(n) {
-      var t = $(e.ref);
+      var t = A(e.ref);
       typeof t == "function" && t(n);
     },
     "data-testid": "app-bar",
     get class() {
-      return s("smwb-appbar", e.class, `smwb-${e.position}`, `smwb-${e.placement}`, {
+      return c("smwb-appbar", e.class, `smwb-${e.position}`, `smwb-${e.placement}`, {
         "smwb-dense": e.dense
       }, e.color !== "default" && `smwb-appbar_color-${e.color}`);
     },
     get children() {
-      return i(a, {
+      return i(m, {
         get when() {
-          return e.children;
+          return l();
         },
         get fallback() {
           return (() => {
-            var n = C(), t = n.firstChild, l = t.nextSibling, f = l.nextSibling;
-            return r(t, i(a, {
+            var n = x(), t = n.firstChild, o = t.nextSibling, _ = o.nextSibling;
+            return r(t, i(m, {
               get when() {
-                return e.title;
+                return s();
               },
               get children() {
-                var o = v();
-                return r(o, () => e.title), o;
+                var a = P();
+                return r(a, s), a;
               }
-            }), null), r(t, () => e.leftContent, null), r(l, () => e.midContent), r(f, () => e.rightContent), _(() => u(l, s("smwb-appbar__mid", `smwb-${e.midContentAlign}`))), n;
+            }), null), r(t, () => e.leftContent, null), r(o, () => e.midContent), r(_, () => e.rightContent), w(() => $(o, c("smwb-appbar__mid", `smwb-${e.midContentAlign}`))), n;
           })();
         },
         get children() {
-          return e.children;
+          return l();
         }
       });
     }
   }));
 }
 export {
-  y as AppBar
+  D as AppBar
 };
 //# sourceMappingURL=appBar.js.map

package/dist/headless/components/navigation/appBar/appBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"appBar.js","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"],"names":["AppBar","props","merged","mergeProps","position","placement","midContentAlign","color","local","rest","splitProps","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","dense","children","Show","when","fallback","_el$","_tmpl$2","_el$2","firstChild","_el$4","nextSibling","_el$5","_$insert","title","_el$3","_tmpl$","leftContent","midContent","rightContent","_$effect","_$className"],"mappings":";;;;;AAqBO,SAASA,EAAOC,GAA8C;AACnE,QAAMC,IAASC,EACb;AAAA,IACEC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,iBAAiB;AAAA,IACjBC,OAAO;AAAA,EAAA,GAETN,CACF,GACM,CAACO,GAAOC,CAAI,IAAIC,EAAWR,GAAQ,CACvC,SACA,YACA,SACA,YACA,aACA,eACA,cACA,mBACA,gBACA,SACA,SACA,KAAK,CACN;AAED,SAAAS,EACGC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAEN,EAAMH,cAAc,QAAQ,WAAW;AAAA,IAAQ;AAAA,EAAA,GACtDI,GAAI;AAAA,IAAAM,IAAAC,GAAA;AAAA,UAAAC,IACHC,EAAUV,EAAMO,GAAG;AAAC,aAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,eAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAElBG,EACL,eACAX,EAAMY,OACN,QAAQZ,EAAMJ,QAAQ,IACtB,QAAQI,EAAMH,SAAS,IACvB;AAAA,QAAE,cAAcG,EAAMa;AAAAA,MAAAA,GACtBb,EAAMD,UAAU,aAAa,qBAAqBC,EAAMD,KAAK,EAC/D;AAAA,IAAC;AAAA,IAAA,IAAAe,WAAA;AAAA,aAAAX,EAEAY,GAAI;AAAA,QAAA,IACHC,OAAI;AAAA,iBAAEhB,EAAMc;AAAAA,QAAQ;AAAA,QAAA,IACpBG,WAAQ;AAAA,kBAAA,MAAA;AAAA,gBAAAC,IAAAC,KAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IAAAF,EAAAC;AAAAE,mBAAAA,EAAAL,GAAAjB,EAGDY,GAAI;AAAA,cAAA,IAACC,OAAI;AAAA,uBAAEhB,EAAM0B;AAAAA,cAAK;AAAA,cAAA,IAAAZ,WAAA;AAAA,oBAAAa,IAAAC,EAAAA;AAAAH,uBAAAA,EAAAE,GAAA,MACkB3B,EAAM0B,KAAK,GAAAC;AAAAA,cAAA;AAAA,YAAA,CAAA,GAAA,IAAA,GAAAF,EAAAL,GAAA,MAEnDpB,EAAM6B,aAAW,IAAA,GAAAJ,EAAAH,GAAA,MAEkDtB,EAAM8B,UAAU,GAAAL,EAAAD,GAAA,MACrDxB,EAAM+B,YAAY,GAAAC,EAAA,MAAAC,EAAAX,GADvCX,EAAG,oBAAoB,QAAQX,EAAMF,eAAe,EAAE,CAAC,CAAA,GAAAoB;AAAAA,UAAA,GAAA;AAAA,QAAA;AAAA,QAAA,IAAAJ,WAAA;AAAA,iBAKtEd,EAAMc;AAAAA,QAAQ;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAIvB;"}
+{"version":3,"file":"appBar.js","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"],"names":["AppBar","props","merged","mergeProps","position","placement","midContentAlign","color","local","rest","splitProps","content","children","title","undefined","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","dense","Show","when","fallback","_el$","_tmpl$2","_el$2","firstChild","_el$4","nextSibling","_el$5","_$insert","_el$3","_tmpl$","leftContent","midContent","rightContent","_$effect","_$className"],"mappings":";;;;;AAqBO,SAASA,EAAOC,GAA8C;AACnE,QAAMC,IAASC,EACb;AAAA,IACEC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,iBAAiB;AAAA,IACjBC,OAAO;AAAA,EAAA,GAETN,CACF,GACM,CAACO,GAAOC,CAAI,IAAIC,EAAWR,GAAQ,CACvC,SACA,YACA,SACA,YACA,aACA,eACA,cACA,mBACA,gBACA,SACA,SACA,KAAK,CACN,GAIKS,IAAUC,EAAS,MAAMJ,EAAMI,QAAQ,GAEvCC,IAAQD,EAAS,MAAOD,MAAYG,SAAYN,EAAMK,KAAM;AAElE,SAAAE,EACGC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAEV,EAAMH,cAAc,QAAQ,WAAW;AAAA,IAAQ;AAAA,EAAA,GACtDI,GAAI;AAAA,IAAAU,IAAAC,GAAA;AAAA,UAAAC,IACHC,EAAUd,EAAMW,GAAG;AAAC,aAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,eAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAElBG,EACL,eACAf,EAAMgB,OACN,QAAQhB,EAAMJ,QAAQ,IACtB,QAAQI,EAAMH,SAAS,IACvB;AAAA,QAAE,cAAcG,EAAMiB;AAAAA,MAAAA,GACtBjB,EAAMD,UAAU,aAAa,qBAAqBC,EAAMD,KAAK,EAC/D;AAAA,IAAC;AAAA,IAAA,IAAAK,WAAA;AAAA,aAAAG,EAEAW,GAAI;AAAA,QAAA,IACHC,OAAI;AAAA,iBAAEhB,EAAAA;AAAAA,QAAS;AAAA,QAAA,IACfiB,WAAQ;AAAA,kBAAA,MAAA;AAAA,gBAAAC,IAAAC,KAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IAAAF,EAAAC;AAAAE,mBAAAA,EAAAL,GAAAhB,EAGDW,GAAI;AAAA,cAAA,IAACC,OAAI;AAAA,uBAAEd,EAAAA;AAAAA,cAAO;AAAA,cAAA,IAAAD,WAAA;AAAA,oBAAAyB,IAAAC,EAAAA;AAAAF,uBAAAA,EAAAC,GACsBxB,CAAK,GAAAwB;AAAAA,cAAA;AAAA,YAAA,CAAA,GAAA,IAAA,GAAAD,EAAAL,GAAA,MAE7CvB,EAAM+B,aAAW,IAAA,GAAAH,EAAAH,GAAA,MAEkDzB,EAAMgC,UAAU,GAAAJ,EAAAD,GAAA,MACrD3B,EAAMiC,YAAY,GAAAC,EAAA,MAAAC,EAAAV,GADvCV,EAAG,oBAAoB,QAAQf,EAAMF,eAAe,EAAE,CAAC,CAAA,GAAAuB;AAAAA,UAAA,GAAA;AAAA,QAAA;AAAA,QAAA,IAAAjB,WAAA;AAAA,iBAKtED,EAAAA;AAAAA,QAAS;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAIlB;"}