@smwb/ui-solid 0.12.0 → 0.13.0

package/dist/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/components/navigation/tabs/tab/tab.js

@@ -1,78 +1,89 @@
-import { createComponent as s, Dynamic as C, mergeProps as k, use as R, insert as a, memo as x, template as c } from "solid-js/web";
+import { createComponent as s, Dynamic as x, mergeProps as C, use as A, insert as a, memo as D, template as l } from "solid-js/web";
 import '../../../../assets/styles/less/components/tabs/tab/tab.entry.css';import '../../../../assets/styles/less/tokens.entry.css';/* empty css                                        */
 /* empty css                                                         */
-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 { 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 M(_) {
-  const r = T(), i = r ? r.registerTab() : -1, v = P({
+import { callHandler as _ } from "../../../../primitives/callHandler.js";
+import { Ripple as q } from "../../../base/ripple/ripple.js";
+var z = /* @__PURE__ */ l("<span class=smwb-tab__icon>"), B = /* @__PURE__ */ l("<span class=smwb-tab__text-label>"), E = /* @__PURE__ */ l("<span class=smwb-tab__content>");
+function Q(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), p = f(() => t.label);
+  }, 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), p = f(() => t.label);
   let b;
-  const l = () => r ? r.value() === i : t.isActive, h = (e) => {
-    r ? r.onChange(e, i) : D(t.onClick, e);
-  }, $ = (e) => {
-    b?.onRipple(e);
+  const i = () => r ? r.value() === c() : t.isActive, P = (e) => {
+    _(t.onClick, e), r?.onChange(e, c());
+  }, R = (e) => {
+    _(t.onPointerDown, e), b?.onRipple(e);
   }, d = () => t.tag ?? "button";
-  return s(C, k({
+  return s(x, C({
     get component() {
       return d();
     }
-  }, w, {
+  }, k, {
     ref(e) {
-      var o = g(t.ref);
-      typeof o == "function" && o(e);
+      var n = g(t.ref, h);
+      typeof n == "function" && n(e);
     },
     get class() {
-      return y("smwb-tab", t.class, {
-        "smwb-tab--active": l(),
+      return H("smwb-tab", t.class, {
+        "smwb-tab--active": i(),
         "smwb-tab--stacked": t.stacked,
         "smwb-tab--disabled": t.disabled
       });
     },
-    onClick: h,
-    onPointerDown: $,
+    onClick: P,
+    onPointerDown: R,
     role: "tab",
     get "aria-selected"() {
-      return l();
+      return i();
     },
     get "aria-disabled"() {
       return t.disabled || void 0;
     },
     get tabindex() {
-      return l() ? 0 : -1;
+      return i() ? 0 : -1;
     },
     get disabled() {
-      return x(() => d() === "button")() ? t.disabled : void 0;
+      return D(() => d() === "button")() ? t.disabled : void 0;
     },
     get children() {
       return [(() => {
-        var e = q(), o = g(t.contentRef, (n) => {
-          r?.indicatorContent && r.setContentRef(i, n);
-        });
-        return typeof o == "function" && R(o, e), a(e, s(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 n = S();
-            return a(n, m), n;
+            var o = z();
+            return a(o, m), o;
           }
         }), null), a(e, s(u, {
           get when() {
             return p();
           },
           get children() {
-            var n = j();
-            return a(n, p), n;
+            var o = B();
+            return a(o, p), o;
           }
         }), null), e;
-      })(), s(H, {
+      })(), s(q, {
         actionRef: (e) => b = e,
         classes: {
           child: "tab__ripple-child"
@@ -82,6 +93,6 @@ function M(_) {
   }));
 }
 export {
-  M as Tab
+  Q as Tab
 };
 //# sourceMappingURL=tab.js.map

package/dist/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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"}

package/dist/components/navigation/tabs/tabs.d.ts

@@ -2,11 +2,18 @@ import { type JSX, type ParentProps } from "solid-js";
 import { Tab } from "./tab/tab";
 import { type Ref } from "../../../primitives/mergeRefs";
 export interface TabsProps {
+    /**
+     * Index of the selected tab: its position in the row. Tabs count in the order they
+     * render, so a tab behind a `<Show>` that is off takes no index, and tabs added,
+     * removed or reordered count by their new place.
+     */
     value: number;
+    /** Called with the index of the clicked tab, counted as for `value`. */
     onChange: (event: MouseEvent & {
         currentTarget: HTMLElement;
         target: Element;
     }, index: number) => void;
+    /** Draw the indicator as wide as the selected tab's label rather than the whole tab. */
     indicatorContent?: boolean;
     /**
      * Let the tab row scroll sideways instead of clipping it. The edge beyond which

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

@@ -1,28 +1,34 @@
-import { createComponent as b, use as L, spread as H, mergeProps as J, insert as u, effect as m, setAttribute as p, setStyleProperty as x, style as K, template as w, delegateEvents as Q } from "solid-js/web";
+import { createComponent as d, use as S, spread as J, mergeProps as K, insert as u, effect as g, setAttribute as E, setStyleProperty as k, style as Q, template as _, isServer as U, memo as Y, delegateEvents as Z } from "solid-js/web";
 import '../../../assets/styles/less/components/tabs/tabs.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                   */
-import { mergeProps as U, splitProps as Y, createSignal as h, onMount as k, createEffect as O, on as Z, onCleanup as tt, Show as S } from "solid-js";
-import et from "clsx";
-import { debounce as rt } from "../../../utils/debounce.js";
-import { animate as lt } from "../../../utils/animate.js";
-import { TabsContext as ot } from "./tabsContext.js";
-import { mergeRefs as st } from "../../../primitives/mergeRefs.js";
-import { Icon as T } from "../../base/icon/icon.js";
-var nt = /* @__PURE__ */ w('<button type=button class="smwb-tabs__scroll-button smwb-tabs__scroll-button--start">'), at = /* @__PURE__ */ w("<span class=smwb-tabs__indicator><span class=smwb-tabs__indicator-content>"), it = /* @__PURE__ */ w('<button type=button class="smwb-tabs__scroll-button smwb-tabs__scroll-button--end">'), ct = /* @__PURE__ */ w("<div><div class=smwb-tabs__scroller><div class=smwb-tabs__scroll-area role=tablist>");
-const W = 40, dt = 0.8;
-function Lt(I) {
-  const V = U({
+import { mergeProps as tt, splitProps as et, createSignal as v, onMount as O, createEffect as T, on as rt, onCleanup as lt, Show as M, createMemo as ot, children as st, createComputed as nt } from "solid-js";
+import at from "clsx";
+import { debounce as it } from "../../../utils/debounce.js";
+import { animate as ct } from "../../../utils/animate.js";
+import { TabsContext as dt } from "./tabsContext.js";
+import { mergeRefs as ft } from "../../../primitives/mergeRefs.js";
+import { Icon as W } from "../../base/icon/icon.js";
+var bt = /* @__PURE__ */ _('<button type=button class="smwb-tabs__scroll-button smwb-tabs__scroll-button--start">'), ut = /* @__PURE__ */ _("<span class=smwb-tabs__indicator><span class=smwb-tabs__indicator-content>"), vt = /* @__PURE__ */ _('<button type=button class="smwb-tabs__scroll-button smwb-tabs__scroll-button--end">'), mt = /* @__PURE__ */ _("<div><div class=smwb-tabs__scroller><div class=smwb-tabs__scroll-area role=tablist>");
+const V = 40, ht = 0.8;
+function wt(m) {
+  const h = st(() => m.children);
+  return U || nt(() => m.onItems(h.toArray().filter((s) => s instanceof Element))), Y(h);
+}
+function At(m) {
+  const h = tt({
     indicatorContent: !1,
     scrollable: !1,
     scrollButtons: !1,
     dense: !1,
     scrollBackAriaLabel: "Scroll tabs back",
     scrollForwardAriaLabel: "Scroll tabs forward"
-  }, I), [s, F] = Y(V, ["class", "children", "onChange", "value", "indicatorContent", "scrollable", "scrollButtons", "dense", "scrollBackAriaLabel", "scrollForwardAriaLabel", "aria-label", "ref"]), [X, D] = h(!1), [d, E] = h({
+  }, m), [s, F] = et(h, ["class", "children", "onChange", "value", "indicatorContent", "scrollable", "scrollButtons", "dense", "scrollBackAriaLabel", "scrollForwardAriaLabel", "aria-label", "ref"]), [X, q] = v(!1), [f, y] = v({
     root: {}
-  }), [g, M] = h(!1), [_, B] = h(!1);
-  let l, f, G = 0;
-  const y = [], $ = () => {
+  }), [L, B] = v(!1), [p, A] = v(!1);
+  let l, b;
+  const [$, D] = v();
+  let G = 0;
+  const I = () => {
     let t;
     if (l) {
       const i = l.getBoundingClientRect();
@@ -34,21 +40,21 @@ function Lt(I) {
       };
     }
     let r = null, a = null;
-    if (l && f && f.children.length > 0) {
-      const i = f.children[s.value];
-      r = i ? i.getBoundingClientRect() : null, s.indicatorContent && (a = y[s.value]?.getBoundingClientRect() ?? null);
+    if (l && b && b.children.length > 0) {
+      const i = b.children[s.value];
+      r = i ? i.getBoundingClientRect() : null, s.indicatorContent && (a = i?.querySelector(".smwb-tab__content")?.getBoundingClientRect() ?? null);
     }
     return {
       tabsMeta: t,
       tabMeta: r,
       tabContentMeta: a
     };
-  }, A = () => {
+  }, x = () => {
     const {
       tabsMeta: t,
       tabMeta: r,
       tabContentMeta: a
-    } = $();
+    } = I();
     let i = 0;
     r && t && (i = r.left - t.left + t.scrollLeft);
     const e = {
@@ -60,123 +66,132 @@ function Lt(I) {
     s.indicatorContent && a && (e.content = {
       width: a.width
     });
-    const o = d();
+    const o = f();
     if (o.root.left === void 0 || o.root.width === void 0) {
-      E(e);
+      y(e);
       return;
     }
     const n = Math.abs((o.root.left ?? 0) - (e.root.left ?? 0)), c = Math.abs((o.root.width ?? 0) - (e.root.width ?? 0));
-    (n >= 1 || c >= 1) && E(e);
-  }, v = () => {
+    (n >= 1 || c >= 1) && y(e);
+  }, w = () => {
     if (!l || !s.scrollable) {
-      M(!1), B(!1);
+      B(!1), A(!1);
       return;
     }
     const t = l.scrollWidth - l.clientWidth;
-    M(l.scrollLeft > 1), B(l.scrollLeft < t - 1);
+    B(l.scrollLeft > 1), A(l.scrollLeft < t - 1);
   }, C = (t) => {
-    l && lt(l, "scrollLeft", t, {
+    l && ct(l, "scrollLeft", t, {
       duration: 300
     });
-  }, R = (t) => {
-    l && C(l.scrollLeft + t * l.clientWidth * dt);
+  }, z = (t) => {
+    l && C(l.scrollLeft + t * l.clientWidth * ht);
   }, N = () => {
     const {
       tabsMeta: t,
       tabMeta: r
-    } = $();
-    !r || !t || (r.left < t.left ? C(t.scrollLeft + (r.left - t.left) - W) : r.right > t.right && C(t.scrollLeft + (r.right - t.right) + W));
+    } = I();
+    !r || !t || (r.left < t.left ? C(t.scrollLeft + (r.left - t.left) - V) : r.right > t.right && C(t.scrollLeft + (r.right - t.right) + V));
   };
-  k(() => D(!0)), O(Z(() => s.value, () => A())), k(() => {
-    const t = rt(() => {
-      A(), v();
+  O(() => q(!0)), T(rt([() => s.value, $], () => x())), O(() => {
+    const t = it(() => {
+      x(), w();
     }, 166), r = l?.ownerDocument.defaultView;
-    r?.addEventListener("resize", t), l?.addEventListener("scroll", v, {
+    r?.addEventListener("resize", t), l?.addEventListener("scroll", w, {
       passive: !0
     });
     let a;
-    typeof ResizeObserver < "u" && f && (a = new ResizeObserver(t), l && a.observe(l), Array.from(f.children).forEach((i) => a?.observe(i))), v(), tt(() => {
-      t.cancel(), r?.removeEventListener("resize", t), l?.removeEventListener("scroll", v), a?.disconnect();
+    typeof ResizeObserver < "u" && b && (a = new ResizeObserver(t), l && a.observe(l), Array.from(b.children).forEach((i) => a?.observe(i))), w(), lt(() => {
+      t.cancel(), r?.removeEventListener("resize", t), l?.removeEventListener("scroll", w), a?.disconnect();
     });
-  }), O(() => {
-    d(), N();
+  }), T(() => {
+    f(), N();
   });
   const j = {
     value: () => s.value,
     onChange: s.onChange,
-    indicatorContent: s.indicatorContent,
-    registerTab: () => G++,
-    setContentRef: (t, r) => {
-      y[t] = r;
+    registerTab: (t) => {
+      const r = G++;
+      return ot(() => {
+        const a = $();
+        if (!a) return r;
+        const i = t();
+        return i ? a.findIndex((e) => e.contains(i)) : -1;
+      });
     }
-  }, z = () => s.scrollable && s.scrollButtons && (g() || _());
-  return b(ot.Provider, {
+  }, P = () => s.scrollable && s.scrollButtons && (L() || p());
+  return d(dt.Provider, {
     value: j,
     get children() {
-      var t = ct(), r = t.firstChild, a = r.firstChild, i = st(s.ref);
-      return typeof i == "function" && L(i, t), H(t, J(F, {
+      var t = mt(), r = t.firstChild, a = r.firstChild, i = ft(s.ref);
+      return typeof i == "function" && S(i, t), J(t, K(F, {
         get class() {
-          return et("smwb-tabs", {
+          return at("smwb-tabs", {
             "smwb-tabs--dense": s.dense,
-            "smwb-tabs--overflow-start": g(),
-            "smwb-tabs--overflow-end": _()
+            "smwb-tabs--overflow-start": L(),
+            "smwb-tabs--overflow-end": p()
           }, s.class);
         },
         role: "tabpanel"
-      }), !1, !0), u(t, b(S, {
+      }), !1, !0), u(t, d(M, {
         get when() {
-          return z();
+          return P();
         },
         get children() {
-          var e = nt();
-          return e.$$click = () => R(-1), u(e, b(T, {
+          var e = bt();
+          return e.$$click = () => z(-1), u(e, d(W, {
             name: "chevron_left",
             size: 20
-          })), m((o) => {
-            var n = s.scrollBackAriaLabel, c = !g();
-            return n !== o.e && p(e, "aria-label", o.e = n), c !== o.t && (e.disabled = o.t = c), o;
+          })), g((o) => {
+            var n = s.scrollBackAriaLabel, c = !L();
+            return n !== o.e && E(e, "aria-label", o.e = n), c !== o.t && (e.disabled = o.t = c), o;
           }, {
             e: void 0,
             t: void 0
           }), e;
         }
-      }), r), L((e) => l = e, r), L((e) => f = e, a), u(a, () => s.children), u(r, b(S, {
+      }), r), S((e) => l = e, r), S((e) => b = e, a), u(a, d(wt, {
+        onItems: D,
+        get children() {
+          return s.children;
+        }
+      })), u(r, d(M, {
         get when() {
           return X();
         },
         get children() {
-          var e = at(), o = e.firstChild;
-          return m((n) => {
-            var c = `${d().root.left ?? 0}px`, P = `${d().root.width ?? 0}px`, q = d().content ? {
-              width: `${d().content?.width ?? 0}px`
+          var e = ut(), o = e.firstChild;
+          return g((n) => {
+            var c = `${f().root.left ?? 0}px`, R = `${f().root.width ?? 0}px`, H = f().content ? {
+              width: `${f().content?.width ?? 0}px`
             } : {};
-            return c !== n.e && x(e, "left", n.e = c), P !== n.t && x(e, "width", n.t = P), n.a = K(o, q, n.a), n;
+            return c !== n.e && k(e, "left", n.e = c), R !== n.t && k(e, "width", n.t = R), n.a = Q(o, H, n.a), n;
           }, {
             e: void 0,
             t: void 0,
             a: void 0
           }), e;
         }
-      }), null), u(t, b(S, {
+      }), null), u(t, d(M, {
         get when() {
-          return z();
+          return P();
         },
         get children() {
-          var e = it();
-          return e.$$click = () => R(1), u(e, b(T, {
+          var e = vt();
+          return e.$$click = () => z(1), u(e, d(W, {
             name: "chevron_right",
             size: 20
-          })), m((o) => {
-            var n = s.scrollForwardAriaLabel, c = !_();
-            return n !== o.e && p(e, "aria-label", o.e = n), c !== o.t && (e.disabled = o.t = c), o;
+          })), g((o) => {
+            var n = s.scrollForwardAriaLabel, c = !p();
+            return n !== o.e && E(e, "aria-label", o.e = n), c !== o.t && (e.disabled = o.t = c), o;
           }, {
             e: void 0,
             t: void 0
           }), e;
         }
-      }), null), m((e) => {
+      }), null), g((e) => {
         var o = !!s.scrollable, n = s["aria-label"];
-        return o !== e.e && r.classList.toggle("smwb-tabs__scroller--scrollable", e.e = o), n !== e.t && p(a, "aria-label", e.t = n), e;
+        return o !== e.e && r.classList.toggle("smwb-tabs__scroller--scrollable", e.e = o), n !== e.t && E(a, "aria-label", e.t = n), e;
       }, {
         e: void 0,
         t: void 0
@@ -184,8 +199,8 @@ function Lt(I) {
     }
   });
 }
-Q(["click"]);
+Z(["click"]);
 export {
-  Lt as Tabs
+  At as Tabs
 };
 //# sourceMappingURL=tabs.js.map