@smwb/ui-solid 0.12.0 → 0.13.0

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

@@ -1,20 +1,22 @@
-import { createComponent as i, insert as a, template as o, use as B, spread as D, mergeProps as F, memo as y, addEventListener as L, effect as I, className as N, setAttribute as d, delegateEvents as O } from "solid-js/web";
+import { createComponent as i, insert as a, template as o, use as B, spread as F, mergeProps as I, memo as y, effect as K, className as N, setAttribute as d, delegateEvents as O } from "solid-js/web";
 import { mergeProps as R, splitProps as U, createMemo as X, Show as c, For as j } from "solid-js";
 import P from "clsx";
 import { mergeRefs as q } from "../../../primitives/mergeRefs.js";
 import { Icon as G } from "../../base/icon/icon.js";
-var H = /* @__PURE__ */ o("<div>"), J = /* @__PURE__ */ o("<span class=smwb-stepper__optional>"), K = /* @__PURE__ */ o("<span class=smwb-stepper__description>"), Q = /* @__PURE__ */ o("<div><div class=smwb-stepper__icon aria-hidden=true></div><div class=smwb-stepper__text><span class=smwb-stepper__label>"), V = /* @__PURE__ */ o("<div class=smwb-stepper__connector aria-hidden=true>"), W = /* @__PURE__ */ o("<span>"), Y = /* @__PURE__ */ o("<div class=smwb-stepper-auto>");
-const Z = 12;
-function ae(E) {
+var H = /* @__PURE__ */ o("<div>"), J = /* @__PURE__ */ o("<span class=smwb-stepper__optional>"), Q = /* @__PURE__ */ o("<span class=smwb-stepper__description>"), V = /* @__PURE__ */ o("<div><div class=smwb-stepper__icon aria-hidden=true></div><div class=smwb-stepper__text><span class=smwb-stepper__label>"), W = /* @__PURE__ */ o("<div class=smwb-stepper__connector aria-hidden=true>"), Y = /* @__PURE__ */ o("<span>"), Z = /* @__PURE__ */ o("<div class=smwb-stepper-auto>");
+const x = 12;
+function ne(L) {
   const z = R({
     orientation: "horizontal",
     alternativeLabel: !1
-  }, E), [t, A] = U(z, ["class", "steps", "activeStep", "orientation", "alternativeLabel", "onStepClick", "ref"]), m = X(() => t.steps), _ = () => t.orientation === "auto", u = () => (() => {
+  }, L), [t, A] = U(z, ["class", "steps", "activeStep", "orientation", "alternativeLabel", "onStepClick", "ref", "data-testid"]), m = X(() => t.steps), _ = () => t.orientation === "auto", u = () => (() => {
     var n = H(), b = q(t.ref);
-    return typeof b == "function" && B(b, n), D(n, F(A, {
-      "data-testid": "stepper",
+    return typeof b == "function" && B(b, n), F(n, I(A, {
+      get "data-testid"() {
+        return t["data-testid"] ?? "stepper";
+      },
       get "data-steps"() {
-        return y(() => !!_())() ? String(Math.min(m().length, Z)) : void 0;
+        return y(() => !!_())() ? String(Math.min(m().length, x)) : void 0;
       },
       get class() {
         return P("smwb-stepper", _() ? "smwb-stepper_horizontal smwb-stepper_auto" : `smwb-stepper_${t.orientation}`, {
@@ -25,66 +27,68 @@ function ae(E) {
       get each() {
         return m();
       },
-      children: (r, l) => {
-        const w = () => l() < t.activeStep, g = () => l() === t.activeStep, M = () => l() === m().length - 1, p = () => !!t.onStepClick && !r.disabled;
+      children: (s, l) => {
+        const w = () => l() < t.activeStep, g = () => l() === t.activeStep, E = () => l() === m().length - 1, p = () => !!t.onStepClick && !s.disabled, M = () => {
+          p() && t.onStepClick?.(l());
+        }, D = (r) => {
+          p() && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), t.onStepClick?.(l()));
+        };
         return [(() => {
-          var s = Q(), h = s.firstChild, v = h.nextSibling, T = v.firstChild;
-          return L(s, "keydown", p() ? (e) => {
-            (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t.onStepClick?.(l()));
-          } : void 0, !0), L(s, "click", p() ? () => t.onStepClick?.(l()) : void 0, !0), a(h, i(c, {
+          var r = V(), f = r.firstChild, v = f.nextSibling, T = v.firstChild;
+          return r.$$keydown = D, r.$$click = M, a(f, i(c, {
             get when() {
-              return r.icon;
+              return s.icon;
             },
             get fallback() {
               return y(() => !!w())() ? i(G, {
                 name: "check",
                 size: 16
               }) : (() => {
-                var e = W();
+                var e = Y();
                 return a(e, () => l() + 1), e;
               })();
             },
             get children() {
-              return r.icon;
+              return s.icon;
             }
-          })), a(T, () => r.label), a(v, i(c, {
+          })), a(T, () => s.label), a(v, i(c, {
             get when() {
-              return r.optional;
+              return s.optional;
             },
             get children() {
               var e = J();
-              return a(e, () => r.optional), e;
+              return a(e, () => s.optional), e;
             }
           }), null), a(v, i(c, {
             get when() {
-              return r.description;
+              return s.description;
             },
             get children() {
-              var e = K();
-              return a(e, () => r.description), e;
+              var e = Q();
+              return a(e, () => s.description), e;
             }
-          }), null), I((e) => {
-            var f = P("smwb-stepper__step", {
+          }), null), K((e) => {
+            var h = P("smwb-stepper__step", {
               "smwb-stepper__step_active": g(),
               "smwb-stepper__step_completed": w(),
-              "smwb-stepper__step_error": r.error,
-              "smwb-stepper__step_disabled": r.disabled,
+              "smwb-stepper__step_error": s.error,
+              "smwb-stepper__step_disabled": s.disabled,
               "smwb-stepper__step_clickable": p()
-            }), k = g() ? "step" : void 0, $ = r.disabled || void 0, S = p() ? "button" : void 0, C = p() ? 0 : void 0;
-            return f !== e.e && N(s, e.e = f), k !== e.t && d(s, "aria-current", e.t = k), $ !== e.a && d(s, "aria-disabled", e.a = $), S !== e.o && d(s, "role", e.o = S), C !== e.i && d(s, "tabindex", e.i = C), e;
+            }), $ = g() ? "step" : void 0, k = s.disabled || void 0, S = p() ? "button" : void 0, C = p() ? 0 : void 0;
+            return h !== e.e && N(r, e.e = h), $ !== e.t && d(r, "aria-current", e.t = $), k !== e.a && d(r, "aria-disabled", e.a = k), S !== e.o && d(r, "role", e.o = S), C !== e.i && d(r, "tabindex", e.i = C), e;
           }, {
             e: void 0,
             t: void 0,
             a: void 0,
             o: void 0,
             i: void 0
-          }), s;
+          }), r;
         })(), i(c, {
           get when() {
-            return !M();
+            return !E();
           },
           get children() {
-            return V();
+            return W();
           }
         })];
       }
@@ -98,13 +102,13 @@ function ae(E) {
       return u();
     },
     get children() {
-      var n = Y();
+      var n = Z();
       return a(n, u), n;
     }
   });
 }
 O(["click", "keydown"]);
 export {
-  ae as Stepper
+  ne as Stepper
 };
 //# sourceMappingURL=stepper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","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"],"names":["AUTO_MAX_STEPS","Stepper","props","merged","mergeProps","orientation","alternativeLabel","local","rest","splitProps","steps","createMemo","auto","stepper","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","_$memo","String","Math","min","length","undefined","cn","class","_$insert","_$createComponent","For","each","children","step","index","completed","activeStep","active","isLast","clickable","Boolean","onStepClick","disabled","_el$2","_tmpl$4","_el$3","firstChild","_el$4","nextSibling","_el$5","_$addEventListener","event","key","preventDefault","Show","when","icon","fallback","Icon","name","size","_el$9","_tmpl$6","label","optional","_el$6","_tmpl$2","description","_el$7","_tmpl$3","_$effect","_p$","_v$","error","_v$2","_v$3","_v$4","_v$5","e","_$className","t","_$setAttribute","a","o","i","_tmpl$5","_el$0","_tmpl$7","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"stepper.js","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  /** Test id of the stepper `<div>`; `stepper` unless given. */\n  \"data-testid\"?: string | undefined;\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    \"data-testid\",\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={local[\"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          // Solid binds event handlers once, so both are always attached and\n          // check `clickable()` themselves: a step can turn clickable, or stop,\n          // after it renders.\n          const onClick = (): void => {\n            if (clickable()) local.onStepClick?.(index());\n          };\n          const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n            if (clickable() && (event.key === \"Enter\" || event.key === \" \")) {\n              event.preventDefault();\n              local.onStepClick?.(index());\n            }\n          };\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={onClick}\n                onKeyDown={onKeyDown}\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"],"names":["AUTO_MAX_STEPS","Stepper","props","merged","mergeProps","orientation","alternativeLabel","local","rest","splitProps","steps","createMemo","auto","stepper","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","_$memo","String","Math","min","length","undefined","cn","class","_$insert","_$createComponent","For","each","children","step","index","completed","activeStep","active","isLast","clickable","Boolean","onStepClick","disabled","onClick","onKeyDown","event","key","preventDefault","_el$2","_tmpl$4","_el$3","firstChild","_el$4","nextSibling","_el$5","$$keydown","$$click","Show","when","icon","fallback","Icon","name","size","_el$9","_tmpl$6","label","optional","_el$6","_tmpl$2","description","_el$7","_tmpl$3","_$effect","_p$","_v$","error","_v$2","_v$3","_v$4","_v$5","e","_$className","t","_$setAttribute","a","o","i","_tmpl$5","_el$0","_tmpl$7","_$delegateEvents"],"mappings":"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"}

package/dist/headless/components/navigation/tabs/tab/tab.js

@@ -1,40 +1,53 @@
-import { createComponent as o, Dynamic as C, mergeProps as k, use as R, insert as a, memo as x, template as c } from "solid-js/web";
-import { mergeProps as P, splitProps as A, children as f, Show as u } from "solid-js";
-import y from "clsx";
-import { useTabsContext as T } from "../tabsContext.js";
+import { createComponent as s, Dynamic as x, mergeProps as C, use as A, insert as a, memo as D, template as i } from "solid-js/web";
+import { createSignal as y, mergeProps as T, splitProps as S, children as f, Show as u } from "solid-js";
+import H from "clsx";
+import { useTabsContext as j } from "../tabsContext.js";
 import { mergeRefs as g } from "../../../../primitives/mergeRefs.js";
-import { callHandler as D } from "../../../../primitives/callHandler.js";
-import { Ripple as H } from "../../../base/ripple/ripple.js";
-var S = /* @__PURE__ */ c("<span class=smwb-tab__icon>"), j = /* @__PURE__ */ c("<span class=smwb-tab__text-label>"), q = /* @__PURE__ */ c("<span class=smwb-tab__content>");
-function K(_) {
-  const n = T(), i = n ? n.registerTab() : -1, v = P({
+import { callHandler as _ } from "../../../../primitives/callHandler.js";
+import { Ripple as q } from "../../../base/ripple/ripple.js";
+var z = /* @__PURE__ */ i("<span class=smwb-tab__icon>"), B = /* @__PURE__ */ i("<span class=smwb-tab__text-label>"), E = /* @__PURE__ */ i("<span class=smwb-tab__content>");
+function N(w) {
+  const r = j(), [v, h] = y(), c = r ? r.registerTab(v) : () => -1, $ = T({
     isActive: !1,
     stacked: !1
-  }, _), [t, w] = A(v, ["class", "label", "isActive", "contentRef", "icon", "stacked", "tag", "disabled", "onClick", "ref"]), m = f(() => t.icon), b = f(() => t.label);
-  let d;
-  const l = () => n ? n.value() === i : t.isActive, h = (e) => {
-    n ? n.onChange(e, i) : D(t.onClick, e);
-  }, $ = (e) => {
-    d?.onRipple(e);
-  }, p = () => t.tag ?? "button";
-  return o(C, k({
+  }, w), [t, k] = S($, [
+    "class",
+    "label",
+    "isActive",
+    "contentRef",
+    "icon",
+    "stacked",
+    "tag",
+    "disabled",
+    "onClick",
+    "ref",
+    // The tab sets this on its root too; its own handler calls the caller's first.
+    "onPointerDown"
+  ]), m = f(() => t.icon), b = f(() => t.label);
+  let p;
+  const l = () => r ? r.value() === c() : t.isActive, P = (e) => {
+    _(t.onClick, e), r?.onChange(e, c());
+  }, R = (e) => {
+    _(t.onPointerDown, e), p?.onRipple(e);
+  }, d = () => t.tag ?? "button";
+  return s(x, C({
     get component() {
-      return p();
+      return d();
     }
-  }, w, {
+  }, k, {
     ref(e) {
-      var s = g(t.ref);
-      typeof s == "function" && s(e);
+      var n = g(t.ref, h);
+      typeof n == "function" && n(e);
     },
     get class() {
-      return y("smwb-tab", t.class, {
+      return H("smwb-tab", t.class, {
         "smwb-tab--active": l(),
         "smwb-tab--stacked": t.stacked,
         "smwb-tab--disabled": t.disabled
       });
     },
-    onClick: h,
-    onPointerDown: $,
+    onClick: P,
+    onPointerDown: R,
     role: "tab",
     get "aria-selected"() {
       return l();
@@ -46,32 +59,30 @@ function K(_) {
       return l() ? 0 : -1;
     },
     get disabled() {
-      return x(() => p() === "button")() ? t.disabled : void 0;
+      return D(() => d() === "button")() ? t.disabled : void 0;
     },
     get children() {
       return [(() => {
-        var e = q(), s = g(t.contentRef, (r) => {
-          n?.indicatorContent && n.setContentRef(i, r);
-        });
-        return typeof s == "function" && R(s, e), a(e, o(u, {
+        var e = E(), n = g(t.contentRef);
+        return typeof n == "function" && A(n, e), a(e, s(u, {
           get when() {
             return m();
           },
           get children() {
-            var r = S();
-            return a(r, m), r;
+            var o = z();
+            return a(o, m), o;
           }
-        }), null), a(e, o(u, {
+        }), null), a(e, s(u, {
           get when() {
             return b();
           },
           get children() {
-            var r = j();
-            return a(r, b), r;
+            var o = B();
+            return a(o, b), o;
           }
         }), null), e;
-      })(), o(H, {
-        actionRef: (e) => d = e,
+      })(), s(q, {
+        actionRef: (e) => p = e,
         classes: {
           child: "tab__ripple-child"
         }
@@ -80,6 +91,6 @@ function K(_) {
   }));
 }
 export {
-  K as Tab
+  N as Tab
 };
 //# sourceMappingURL=tab.js.map

package/dist/headless/components/navigation/tabs/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","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"],"names":["Tab","props","ctx","useTabsContext","index","registerTab","merged","mergeProps","isActive","stacked","local","rest","splitProps","icon","children","label","rippleActions","active","value","onClick","event","onChange","callHandler","onPointerDown","onRipple","tag","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","disabled","role","undefined","tabindex","_$memo","_el$","_tmpl$3","_ref$2","contentRef","el","indicatorContent","setContentRef","_$use","_$insert","Show","when","_el$2","_tmpl$","_el$3","_tmpl$2","Ripple","actionRef","actions","classes","child"],"mappings":"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"}
+{"version":3,"file":"tab.js","sources":["../../../../../../src/components/navigation/tabs/tab/tab.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 { 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 [root, setRoot] = createSignal<HTMLButtonElement | HTMLAnchorElement>();\n  // The tab's position in the tab list: it follows the tab when tabs around it\n  // are added, removed or reordered.\n  const index = ctx ? ctx.registerTab(root) : () => -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    // The tab sets this on its root too; its own handler calls the caller's first.\n    \"onPointerDown\",\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    // Inside Tabs too the caller's onClick runs first, then the tab list picks the tab.\n    callHandler(local.onClick, event);\n    ctx?.onChange(event, index());\n  };\n\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\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, setRoot)}\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      // The role, the selection and the roving tabindex belong to the tab list:\n      // they win over the caller's. A tab that is not disabled keeps the\n      // caller's aria-disabled.\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 class=\"smwb-tab__content\" ref={mergeRefs(local.contentRef)}>\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"],"names":["Tab","props","ctx","useTabsContext","root","setRoot","createSignal","index","registerTab","merged","mergeProps","isActive","stacked","local","rest","splitProps","icon","children","label","rippleActions","active","value","onClick","event","callHandler","onChange","onPointerDown","onRipple","tag","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","disabled","role","undefined","tabindex","_$memo","_el$","_tmpl$3","_ref$2","contentRef","_$use","_$insert","Show","when","_el$2","_tmpl$","_el$3","_tmpl$2","Ripple","actionRef","actions","classes","child"],"mappings":"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"}