@smwb/ui-solid 0.11.1 → 0.12.0

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

@@ -1,34 +1,34 @@
-import { use as L, spread as S, mergeProps as M, insert as c, createComponent as t, template as b, Dynamic as V } from "solid-js/web";
-import { mergeProps as z, splitProps as O, createSignal as _, For as A, Show as s, children as E } from "solid-js";
-import P from "clsx";
-import { createControllableState as F } from "../../../primitives/createControllableState.js";
-import { mergeRefs as k } from "../../../primitives/mergeRefs.js";
-import { callHandler as C } from "../../../primitives/callHandler.js";
-import { Icon as H } from "../../base/icon/icon.js";
-import { Menu as T } from "../menu/menu.js";
-import { MenuItem as j } from "../menu/menuItem.js";
-import { MenuItemIcon as q } from "../menu/menuItemIcon.js";
-import { MenuItemText as G } from "../menu/menuItemText.js";
-import { Ripple as J } from "../../base/ripple/ripple.js";
-var K = /* @__PURE__ */ b("<span class=smwb-bottom-bar__item-icon>"), N = /* @__PURE__ */ b("<span class=smwb-bottom-bar__item-title>"), Q = /* @__PURE__ */ b("<nav><div class=smwb-bottom-bar__nav role=menubar>");
+import { use as S, spread as V, mergeProps as O, insert as a, createComponent as t, template as b, Dynamic as z } from "solid-js/web";
+import { mergeProps as E, splitProps as P, createSignal as A, createMemo as F, For as C, Show as s, children as H } from "solid-js";
+import k from "clsx";
+import { createControllableState as T } from "../../../primitives/createControllableState.js";
+import { mergeRefs as R } from "../../../primitives/mergeRefs.js";
+import { callHandler as M } from "../../../primitives/callHandler.js";
+import { Icon as j } from "../../base/icon/icon.js";
+import { Menu as q } from "../menu/menu.js";
+import { MenuItem as G } from "../menu/menuItem.js";
+import { MenuItemIcon as J } from "../menu/menuItemIcon.js";
+import { MenuItemText as K } from "../menu/menuItemText.js";
+import { Ripple as N } from "../../base/ripple/ripple.js";
+var Q = /* @__PURE__ */ b("<span class=smwb-bottom-bar__item-icon>"), U = /* @__PURE__ */ b("<span class=smwb-bottom-bar__item-title>"), W = /* @__PURE__ */ b("<nav><div class=smwb-bottom-bar__nav role=menubar>");
 function $(p) {
-  const [o, n] = O(p, ["isActive", "icon", "title", "as", "href", "ref"]);
+  const [o, n] = P(p, ["isActive", "icon", "title", "as", "href", "ref"]);
   let u;
-  const i = E(() => o.icon);
-  return t(V, M({
+  const i = H(() => o.icon);
+  return t(z, O({
     get component() {
       return o.as ?? "div";
     },
     ref(r) {
-      var a = k(o.ref);
-      typeof a == "function" && a(r);
+      var c = R(o.ref);
+      typeof c == "function" && c(r);
     },
     get href() {
       return o.href;
     },
     role: "menuitem",
     get class() {
-      return P("smwb-bottom-bar__item", {
+      return k("smwb-bottom-bar__item", {
         "smwb-bottom-bar__item_active": o.isActive
       });
     },
@@ -42,46 +42,46 @@ function $(p) {
           return i();
         },
         get children() {
-          var r = K();
-          return c(r, i), r;
+          var r = Q();
+          return a(r, i), r;
         }
       }), t(s, {
         get when() {
           return o.title;
         },
         get children() {
-          var r = N();
-          return c(r, () => o.title), r;
+          var r = U();
+          return a(r, () => o.title), r;
         }
-      }), t(J, {
+      }), t(N, {
         actionRef: (r) => u = r
       })];
     }
   }));
 }
-function ae(p) {
-  const o = z({
+function se(p) {
+  const o = E({
     menuItems: [],
     visibleCount: 4,
     defaultActiveItem: null,
     overflowMenuAriaLabel: "More navigation"
-  }, p), [n, u] = O(o, ["class", "menuItems", "visibleCount", "activeItem", "defaultActiveItem", "onActiveItemChange", "overflowMenuAriaLabel", "ref"]), [i, v] = F({
+  }, p), [n, u] = P(o, ["class", "menuItems", "visibleCount", "activeItem", "defaultActiveItem", "onActiveItemChange", "overflowMenuAriaLabel", "ref"]), [i, v] = T({
     value: () => n.activeItem,
     defaultValue: n.defaultActiveItem,
     onChange: (l) => {
       l !== null && n.onActiveItemChange?.(l);
     }
-  }), [r, a] = _(!1), [R, x] = _(null), m = () => Math.max(0, n.visibleCount), y = () => n.menuItems.slice(0, m()), d = () => n.menuItems.slice(m()), h = () => d().length > 0, B = () => h() && i() !== null && i() >= m();
+  }), [r, c] = A(!1), [x, y] = A(null), d = F(() => n.menuItems), m = () => Math.max(0, n.visibleCount), B = () => d().slice(0, m()), w = () => d().slice(m()), h = () => w().length > 0, D = () => h() && i() !== null && i() >= m();
   return (() => {
-    var l = Q(), w = l.firstChild, I = k(n.ref);
-    return typeof I == "function" && L(I, l), S(l, M(u, {
+    var l = W(), I = l.firstChild, _ = R(n.ref);
+    return typeof _ == "function" && S(_, l), V(l, O(u, {
       get class() {
-        return P("smwb-bottom-bar", n.class);
+        return k("smwb-bottom-bar", n.class);
       },
       role: "navigation"
-    }), !1, !0), c(w, t(A, {
+    }), !1, !0), a(I, t(C, {
       get each() {
-        return y();
+        return B();
       },
       children: (e, f) => t($, {
         get as() {
@@ -91,7 +91,7 @@ function ae(p) {
           return i() === f();
         },
         onClick: (g) => {
-          v(f()), C(e.onClick, g);
+          v(f()), M(e.onClick, g);
         },
         get icon() {
           return e.icon;
@@ -103,19 +103,19 @@ function ae(p) {
           return e.href;
         }
       })
-    }), null), c(w, t(s, {
+    }), null), a(I, t(s, {
       get when() {
         return h();
       },
       get children() {
         return t($, {
-          ref: (e) => x(e),
+          ref: (e) => y(e),
           get isActive() {
-            return B();
+            return D();
           },
-          onClick: () => a((e) => !e),
+          onClick: () => c((e) => !e),
           get icon() {
-            return t(H, {
+            return t(j, {
               name: "menu",
               size: 24
             });
@@ -129,37 +129,37 @@ function ae(p) {
           }
         });
       }
-    }), null), c(l, t(s, {
+    }), null), a(l, t(s, {
       get when() {
         return h();
       },
       get children() {
-        return t(T, {
+        return t(q, {
           get isOpen() {
             return r();
           },
-          onClose: () => a(!1),
+          onClose: () => c(!1),
           get anchorElement() {
-            return R();
+            return x();
           },
           placement: "top",
           dense: !0,
           get children() {
-            return t(A, {
+            return t(C, {
               get each() {
-                return d();
+                return w();
               },
               children: (e, f) => {
                 const g = () => m() + f();
-                return t(j, {
+                return t(G, {
                   get selected() {
                     return i() === g();
                   },
                   get href() {
                     return e.href;
                   },
-                  onClick: (D) => {
-                    v(g()), C(e.onClick, D), a(!1);
+                  onClick: (L) => {
+                    v(g()), M(e.onClick, L), c(!1);
                   },
                   get children() {
                     return [t(s, {
@@ -167,13 +167,13 @@ function ae(p) {
                         return e.icon;
                       },
                       get children() {
-                        return t(q, {
+                        return t(J, {
                           get children() {
                             return e.icon;
                           }
                         });
                       }
-                    }), t(G, {
+                    }), t(K, {
                       get inset() {
                         return !e.icon;
                       },
@@ -192,6 +192,6 @@ function ae(p) {
   })();
 }
 export {
-  ae as BottomBar
+  se as BottomBar
 };
 //# sourceMappingURL=bottomBar.js.map

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

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

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

@@ -1,95 +1,110 @@
-import { use as A, spread as B, mergeProps as D, insert as s, createComponent as n, addEventListener as $, memo as S, effect as F, className as I, setAttribute as c, template as o, delegateEvents as N } from "solid-js/web";
-import { mergeProps as R, splitProps as j, For as q, Show as d } from "solid-js";
-import C from "clsx";
-import { mergeRefs as G } from "../../../primitives/mergeRefs.js";
-import { Icon as H } from "../../base/icon/icon.js";
-var J = /* @__PURE__ */ o("<div>"), K = /* @__PURE__ */ o("<span class=smwb-stepper__optional>"), M = /* @__PURE__ */ o("<span class=smwb-stepper__description>"), O = /* @__PURE__ */ o("<div><div class=smwb-stepper__icon aria-hidden=true></div><div class=smwb-stepper__text><span class=smwb-stepper__label>"), Q = /* @__PURE__ */ o("<div class=smwb-stepper__connector aria-hidden=true>"), T = /* @__PURE__ */ o("<span>");
-function Z(y) {
-  const L = R({
+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 { 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) {
+  const z = R({
     orientation: "horizontal",
     alternativeLabel: !1
-  }, y), [t, P] = j(L, ["class", "steps", "activeStep", "orientation", "alternativeLabel", "onStepClick", "ref"]);
-  return (() => {
-    var p = J(), _ = G(t.ref);
-    return typeof _ == "function" && A(_, p), B(p, D(P, {
+  }, E), [t, A] = U(z, ["class", "steps", "activeStep", "orientation", "alternativeLabel", "onStepClick", "ref"]), 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",
+      get "data-steps"() {
+        return y(() => !!_())() ? String(Math.min(m().length, Z)) : void 0;
+      },
       get class() {
-        return C("smwb-stepper", `smwb-stepper_${t.orientation}`, {
-          "smwb-stepper_alt-label": t.alternativeLabel && t.orientation === "horizontal"
+        return P("smwb-stepper", _() ? "smwb-stepper_horizontal smwb-stepper_auto" : `smwb-stepper_${t.orientation}`, {
+          "smwb-stepper_alt-label": t.alternativeLabel && t.orientation !== "vertical"
         }, t.class);
       }
-    }), !1, !0), s(p, n(q, {
+    }), !1, !0), a(n, i(j, {
       get each() {
-        return t.steps;
+        return m();
       },
-      children: (r, a) => {
-        const v = () => a() < t.activeStep, b = () => a() === t.activeStep, z = () => a() === t.steps.length - 1, l = () => !!t.onStepClick && !r.disabled;
+      children: (r, l) => {
+        const w = () => l() < t.activeStep, g = () => l() === t.activeStep, M = () => l() === m().length - 1, p = () => !!t.onStepClick && !r.disabled;
         return [(() => {
-          var i = O(), u = i.firstChild, m = u.nextSibling, E = m.firstChild;
-          return $(i, "keydown", l() ? (e) => {
-            (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t.onStepClick?.(a()));
-          } : void 0, !0), $(i, "click", l() ? () => t.onStepClick?.(a()) : void 0, !0), s(u, n(d, {
+          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, {
             get when() {
               return r.icon;
             },
             get fallback() {
-              return S(() => !!v())() ? n(H, {
+              return y(() => !!w())() ? i(G, {
                 name: "check",
                 size: 16
               }) : (() => {
-                var e = T();
-                return s(e, () => a() + 1), e;
+                var e = W();
+                return a(e, () => l() + 1), e;
               })();
             },
             get children() {
               return r.icon;
             }
-          })), s(E, () => r.label), s(m, n(d, {
+          })), a(T, () => r.label), a(v, i(c, {
             get when() {
               return r.optional;
             },
             get children() {
-              var e = K();
-              return s(e, () => r.optional), e;
+              var e = J();
+              return a(e, () => r.optional), e;
             }
-          }), null), s(m, n(d, {
+          }), null), a(v, i(c, {
             get when() {
-              return S(() => !!r.description)() && t.orientation === "vertical";
+              return r.description;
             },
             get children() {
-              var e = M();
-              return s(e, () => r.description), e;
+              var e = K();
+              return a(e, () => r.description), e;
             }
-          }), null), F((e) => {
-            var w = C("smwb-stepper__step", {
-              "smwb-stepper__step_active": b(),
-              "smwb-stepper__step_completed": v(),
+          }), null), I((e) => {
+            var f = 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_clickable": l()
-            }), f = b() ? "step" : void 0, g = r.disabled || void 0, h = l() ? "button" : void 0, k = l() ? 0 : void 0;
-            return w !== e.e && I(i, e.e = w), f !== e.t && c(i, "aria-current", e.t = f), g !== e.a && c(i, "aria-disabled", e.a = g), h !== e.o && c(i, "role", e.o = h), k !== e.i && c(i, "tabindex", e.i = k), e;
+              "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;
           }, {
             e: void 0,
             t: void 0,
             a: void 0,
             o: void 0,
             i: void 0
-          }), i;
-        })(), n(d, {
+          }), s;
+        })(), i(c, {
           get when() {
-            return !z();
+            return !M();
           },
           get children() {
-            return Q();
+            return V();
           }
         })];
       }
-    })), p;
+    })), n;
   })();
+  return i(c, {
+    get when() {
+      return _();
+    },
+    get fallback() {
+      return u();
+    },
+    get children() {
+      var n = Y();
+      return a(n, u), n;
+    }
+  });
 }
-N(["click", "keydown"]);
+O(["click", "keydown"]);
 export {
-  Z as Stepper
+  ae 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, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface StepItem {\n  label: JSX.Element;\n  description?: JSX.Element;\n  optional?: JSX.Element;\n  /** Marks the step as errored. */\n  error?: boolean;\n  /** Disables interaction with the step. */\n  disabled?: boolean;\n  /** Custom icon overriding the default number/check. */\n  icon?: JSX.Element;\n}\n\nexport interface StepperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  steps: StepItem[];\n  /** Index of the active (current) step. */\n  activeStep: number;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Place the label under the icon (horizontal only). */\n  alternativeLabel?: boolean;\n  /** Makes steps clickable; receives the clicked step index. */\n  onStepClick?: (index: number) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Stepper(props: StepperProps): JSX.Element {\n  const merged = mergeProps({ orientation: \"horizontal\" as const, alternativeLabel: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"steps\",\n    \"activeStep\",\n    \"orientation\",\n    \"alternativeLabel\",\n    \"onStepClick\",\n    \"ref\",\n  ]);\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"stepper\"\n      class={cn(\n        \"smwb-stepper\",\n        `smwb-stepper_${local.orientation}`,\n        { \"smwb-stepper_alt-label\": local.alternativeLabel && local.orientation === \"horizontal\" },\n        local.class\n      )}\n    >\n      <For each={local.steps}>\n        {(step, index) => {\n          const completed = (): boolean => index() < local.activeStep;\n          const active = (): boolean => index() === local.activeStep;\n          const isLast = (): boolean => index() === local.steps.length - 1;\n          const clickable = (): boolean => Boolean(local.onStepClick) && !step.disabled;\n\n          return (\n            <>\n              <div\n                class={cn(\"smwb-stepper__step\", {\n                  \"smwb-stepper__step_active\": active(),\n                  \"smwb-stepper__step_completed\": completed(),\n                  \"smwb-stepper__step_error\": step.error,\n                  \"smwb-stepper__step_disabled\": step.disabled,\n                  \"smwb-stepper__step_clickable\": clickable(),\n                })}\n                aria-current={active() ? \"step\" : undefined}\n                aria-disabled={step.disabled || undefined}\n                role={clickable() ? \"button\" : undefined}\n                tabindex={clickable() ? 0 : undefined}\n                onClick={clickable() ? () => local.onStepClick?.(index()) : undefined}\n                onKeyDown={\n                  clickable()\n                    ? (event) => {\n                        if (event.key === \"Enter\" || event.key === \" \") {\n                          event.preventDefault();\n                          local.onStepClick?.(index());\n                        }\n                      }\n                    : undefined\n                }\n              >\n                <div class=\"smwb-stepper__icon\" aria-hidden=\"true\">\n                  <Show when={step.icon} fallback={completed() ? <Icon name=\"check\" size={16} /> : <span>{index() + 1}</span>}>\n                    {step.icon}\n                  </Show>\n                </div>\n                <div class=\"smwb-stepper__text\">\n                  <span class=\"smwb-stepper__label\">{step.label}</span>\n                  <Show when={step.optional}>\n                    <span class=\"smwb-stepper__optional\">{step.optional}</span>\n                  </Show>\n                  <Show when={step.description && local.orientation === \"vertical\"}>\n                    <span class=\"smwb-stepper__description\">{step.description}</span>\n                  </Show>\n                </div>\n              </div>\n              <Show when={!isLast()}>\n                <div class=\"smwb-stepper__connector\" aria-hidden=\"true\" />\n              </Show>\n            </>\n          );\n        }}\n      </For>\n    </div>\n  );\n}\n\nexport default Stepper;\n"],"names":["Stepper","props","merged","mergeProps","orientation","alternativeLabel","local","rest","splitProps","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","For","each","steps","children","step","index","completed","activeStep","active","isLast","length","clickable","Boolean","onStepClick","disabled","_el$2","_tmpl$4","_el$3","firstChild","_el$4","nextSibling","_el$5","_$addEventListener","event","key","preventDefault","undefined","Show","when","icon","fallback","_$memo","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","_$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  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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"}

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

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