@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/components/navigation/sidebar/sidebar.js

@@ -1,7 +1,7 @@
-import { use as k, spread as y, mergeProps as A, insert as s, createComponent as n, effect as R, setAttribute as C, template as p, Dynamic as T, delegateEvents as D } from "solid-js/web";
+import { use as k, spread as y, mergeProps as A, insert as c, createComponent as n, effect as R, setAttribute as C, template as p, Dynamic as T, delegateEvents as D } from "solid-js/web";
 import '../../../assets/styles/less/components/sidebar/sidebar.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                         */
-import { mergeProps as L, splitProps as I, Show as v, For as S, children as V } from "solid-js";
+import { mergeProps as L, splitProps as I, Show as d, For as S, children as V } from "solid-js";
 import $ from "clsx";
 import { createControllableState as w } from "../../../primitives/createControllableState.js";
 import { mergeRefs as z } from "../../../primitives/mergeRefs.js";
@@ -9,97 +9,101 @@ import { Icon as E } from "../../base/icon/icon.js";
 import { Ripple as F } from "../../base/ripple/ripple.js";
 var M = /* @__PURE__ */ p("<span class=smwb-nav-item__icon>"), N = /* @__PURE__ */ p("<span class=smwb-nav-item__title>"), j = /* @__PURE__ */ p("<div class=smwb-sidebar__collapse><button type=button class=smwb-sidebar__collapse-btn>"), q = /* @__PURE__ */ p("<aside><nav class=smwb-sidebar__nav>");
 function x(u) {
-  const [r, e] = I(u, ["isActive", "icon", "title", "as", "href", "variant"]);
-  let c;
-  const m = V(() => r.icon);
+  const [l, e] = I(u, ["isActive", "icon", "title", "as", "href", "variant"]);
+  let s;
+  const m = V(() => l.icon);
   return n(T, A({
     get component() {
-      return r.as ?? "div";
+      return l.as ?? "div";
     },
     get href() {
-      return r.href;
+      return l.href;
     },
     role: "menuitem",
     get class() {
-      return $("sidebar__nav__item", "smwb-nav-item", r.variant, {
-        active: r.isActive
+      return $("sidebar__nav__item", "smwb-nav-item", l.variant, {
+        active: l.isActive
       });
     },
     onPointerDown: (t) => {
-      c?.onRipple(t);
+      s?.onRipple(t);
     }
   }, e, {
     get children() {
-      return [n(v, {
+      return [n(d, {
         get when() {
           return m();
         },
         get children() {
           var t = M();
-          return s(t, m), t;
+          return c(t, m), t;
         }
-      }), n(v, {
+      }), n(d, {
         get when() {
-          return r.title;
+          return l.title;
         },
         get children() {
           var t = N();
-          return s(t, () => r.title), t;
+          return c(t, () => l.title), t;
         }
       }), n(F, {
-        actionRef: (t) => c = t
+        actionRef: (t) => s = t
       })];
     }
   }));
 }
 function X(u) {
-  const r = L({
+  const l = L({
     variant: "default",
     defaultActiveItem: null,
     collapsible: !1,
     defaultCollapsed: !1,
-    collapseToggleAriaLabel: "Toggle navigation"
-  }, u), [e, c] = I(r, ["class", "variant", "menuItems", "activeItem", "defaultActiveItem", "onActiveItemChange", "collapsible", "collapsed", "defaultCollapsed", "onCollapsedChange", "collapseToggleAriaLabel", "ref"]), [m, d] = w({
+    collapseToggleAriaLabel: "Toggle navigation",
+    contained: !1
+  }, u), [e, s] = I(l, ["class", "variant", "menuItems", "activeItem", "defaultActiveItem", "onActiveItemChange", "collapsible", "collapsed", "defaultCollapsed", "onCollapsedChange", "collapseToggleAriaLabel", "contained", "ref"]), [m, v] = w({
     value: () => e.activeItem,
     defaultValue: e.defaultActiveItem,
-    onChange: (l) => {
-      l !== null && e.onActiveItemChange?.(l);
+    onChange: (r) => {
+      r !== null && e.onActiveItemChange?.(r);
     }
   }), [t, P] = w({
     value: () => e.collapsed,
     defaultValue: e.defaultCollapsed,
-    onChange: (l) => e.onCollapsedChange?.(l)
+    onChange: (r) => e.onCollapsedChange?.(r)
   }), f = () => e.collapsible && t() ? "compactMini" : e.variant;
   return (() => {
-    var l = q(), g = l.firstChild, b = z(e.ref);
-    return typeof b == "function" && k(b, l), y(l, A(c, {
+    var r = q(), g = r.firstChild, b = z(e.ref);
+    return typeof b == "function" && k(b, r), y(r, A(s, {
       get class() {
         return $("smwb-sidebar", e.class, `smwb-${f()}`, {
           "smwb-sidebar_collapsible": e.collapsible,
-          "smwb-sidebar_collapsed": e.collapsible && t()
+          "smwb-sidebar_collapsed": e.collapsible && t(),
+          "smwb-sidebar_contained": e.contained
         });
       },
-      role: "menubar"
-    }), !1, !0), s(l, n(v, {
+      get role() {
+        return s.role ?? "menubar";
+      }
+    }), !1, !0), c(r, n(d, {
       get when() {
         return e.collapsible;
       },
       get children() {
         var a = j(), i = a.firstChild;
-        return i.$$click = () => P(!t()), s(i, n(E, {
+        return i.$$click = () => P(!t()), c(i, n(E, {
           get name() {
             return t() ? "chevron_right" : "chevron_left";
           },
           size: 20
         })), R((o) => {
-          var h = e.collapseToggleAriaLabel, _ = !t();
-          return h !== o.e && C(i, "aria-label", o.e = h), _ !== o.t && C(i, "aria-expanded", o.t = _), o;
+          var _ = e.collapseToggleAriaLabel, h = !t();
+          return _ !== o.e && C(i, "aria-label", o.e = _), h !== o.t && C(i, "aria-expanded", o.t = h), o;
         }, {
           e: void 0,
           t: void 0
         }), a;
       }
-    }), g), s(g, n(S, {
+    }), g), c(g, n(S, {
       get each() {
         return e.menuItems ?? [];
       },
@@ -111,7 +115,7 @@ function X(u) {
           return m() === i();
         },
         onClick: (o) => {
-          d(i()), typeof a.onClick == "function" && a.onClick(o);
+          v(i()), typeof a.onClick == "function" && a.onClick(o);
         },
         get icon() {
           return a.icon;
@@ -126,7 +130,7 @@ function X(u) {
           return f();
         }
       })
-    })), l;
+    })), r;
   })();
 }
 D(["click"]);

package/dist/components/navigation/sidebar/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","sources":["../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import { type JSX, For, 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 { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SidebarVariant = \"compact\" | \"default\" | \"compactMini\";\n\nexport interface SidebarMenuItemProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: JSX.Element;\n  title: string;\n  isActive?: boolean;\n  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  as?: string | undefined;\n  href?: string | undefined;\n  variant?: SidebarVariant | undefined;\n}\n\nexport interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: SidebarVariant;\n  menuItems?: SidebarMenuItemProps[];\n  /** Controlled index of the active menu item. */\n  activeItem?: number | null;\n  /** Default active index (uncontrolled). */\n  defaultActiveItem?: number | null;\n  /** Called with the index of the activated item. */\n  onActiveItemChange?: (index: number) => void;\n  /** Render a built-in toggle that collapses the rail to an icon-only mini rail. */\n  collapsible?: boolean;\n  /** Controlled collapsed state. */\n  collapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** Accessible label for the built-in collapse toggle. */\n  collapseToggleAriaLabel?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nfunction NavItem(props: SidebarMenuItemProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"isActive\", \"icon\", \"title\", \"as\", \"href\", \"variant\"]);\n  let rippleActions: RippleActionsRef | undefined;\n\n  // Resolve the icon in THIS item's context. A pre-created element passed via\n  // menuItems is keyed at the consumer's position but rendered here, so under\n  // SSR the hydration walk can't find it; children() realigns the key sequence.\n  const icon = children(() => local.icon);\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  return (\n    <Dynamic\n      component={local.as ?? \"div\"}\n      href={local.href}\n      role=\"menuitem\"\n      class={cn(\"sidebar__nav__item\", \"smwb-nav-item\", local.variant, { active: local.isActive })}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      <Show when={icon()}>\n        <span class=\"smwb-nav-item__icon\">{icon()}</span>\n      </Show>\n      <Show when={local.title}>\n        <span class=\"smwb-nav-item__title\">{local.title}</span>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </Dynamic>\n  );\n}\n\nexport function Sidebar(props: SidebarProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      variant: \"default\" as SidebarVariant,\n      defaultActiveItem: null as number | null,\n      collapsible: false,\n      defaultCollapsed: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"menuItems\",\n    \"activeItem\",\n    \"defaultActiveItem\",\n    \"onActiveItemChange\",\n    \"collapsible\",\n    \"collapsed\",\n    \"defaultCollapsed\",\n    \"onCollapsedChange\",\n    \"collapseToggleAriaLabel\",\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\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.collapsed,\n    defaultValue: local.defaultCollapsed,\n    onChange: (next) => local.onCollapsedChange?.(next),\n  });\n\n  // When collapsed the rail always shows the icon-only mini variant.\n  const effectiveVariant = (): SidebarVariant => (local.collapsible && collapsed() ? \"compactMini\" : local.variant);\n\n  return (\n    <aside\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-sidebar\", local.class, `smwb-${effectiveVariant()}`, {\n        \"smwb-sidebar_collapsible\": local.collapsible,\n        \"smwb-sidebar_collapsed\": local.collapsible && collapsed(),\n      })}\n      role=\"menubar\"\n    >\n      <Show when={local.collapsible}>\n        <div class=\"smwb-sidebar__collapse\">\n          <button\n            type=\"button\"\n            class=\"smwb-sidebar__collapse-btn\"\n            aria-label={local.collapseToggleAriaLabel}\n            aria-expanded={!collapsed()}\n            onClick={() => setCollapsed(!collapsed())}\n          >\n            <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n          </button>\n        </div>\n      </Show>\n      <nav class=\"smwb-sidebar__nav\">\n        <For each={local.menuItems ?? []}>\n          {(item, idx) => (\n            <NavItem\n              as={item.as}\n              isActive={activeItem() === idx()}\n              onClick={(event) => {\n                setActiveItem(idx());\n                if (typeof item.onClick === \"function\") item.onClick(event);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n              variant={effectiveVariant()}\n            />\n          )}\n        </For>\n      </nav>\n    </aside>\n  );\n}\n\nexport default Sidebar;\n"],"names":["NavItem","props","local","rest","splitProps","rippleActions","icon","children","_$createComponent","Dynamic","_$mergeProps","component","as","href","role","cn","variant","active","isActive","onPointerDown","event","onRipple","Show","when","_el$","_tmpl$","_$insert","title","_el$2","_tmpl$2","Ripple","actionRef","actions","Sidebar","merged","mergeProps","defaultActiveItem","collapsible","defaultCollapsed","collapseToggleAriaLabel","activeItem","setActiveItem","createControllableState","value","defaultValue","onChange","next","onActiveItemChange","collapsed","setCollapsed","onCollapsedChange","effectiveVariant","_el$3","_tmpl$4","_el$6","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","class","_el$4","_tmpl$3","_el$5","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","undefined","For","each","menuItems","item","idx","onClick","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","sources":["../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import { type JSX, For, 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 { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SidebarVariant = \"compact\" | \"default\" | \"compactMini\";\n\nexport interface SidebarMenuItemProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: JSX.Element;\n  title: string;\n  isActive?: boolean;\n  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  as?: string | undefined;\n  href?: string | undefined;\n  variant?: SidebarVariant | undefined;\n}\n\nexport interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: SidebarVariant;\n  menuItems?: SidebarMenuItemProps[];\n  /** Controlled index of the active menu item. */\n  activeItem?: number | null;\n  /** Default active index (uncontrolled). */\n  defaultActiveItem?: number | null;\n  /** Called with the index of the activated item. */\n  onActiveItemChange?: (index: number) => void;\n  /** Render a built-in toggle that collapses the rail to an icon-only mini rail. */\n  collapsible?: boolean;\n  /** Controlled collapsed state. */\n  collapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** Accessible label for the built-in collapse toggle. */\n  collapseToggleAriaLabel?: string;\n  /**\n   * Place the rail inside its container instead of pinning it to the window.\n   * The sidebar stays in the page flow (`position: relative`), keeps its\n   * variant width as a non-shrinking flex item and scrolls a long menu inside\n   * itself, so sibling content flows beside it and reflows when it collapses.\n   * Give the container a definite height (e.g. a fixed-height flex row) to\n   * make the rail fill it; with an auto-height container the rail sizes\n   * itself to the menu. Defaults to `false`: the sidebar stays viewport-fixed.\n   */\n  contained?: boolean;\n  ref?: Ref<HTMLElement>;\n}\n\nfunction NavItem(props: SidebarMenuItemProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"isActive\", \"icon\", \"title\", \"as\", \"href\", \"variant\"]);\n  let rippleActions: RippleActionsRef | undefined;\n\n  // Resolve the icon in THIS item's context. A pre-created element passed via\n  // menuItems is keyed at the consumer's position but rendered here, so under\n  // SSR the hydration walk can't find it; children() realigns the key sequence.\n  const icon = children(() => local.icon);\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  return (\n    <Dynamic\n      component={local.as ?? \"div\"}\n      href={local.href}\n      role=\"menuitem\"\n      class={cn(\"sidebar__nav__item\", \"smwb-nav-item\", local.variant, { active: local.isActive })}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      <Show when={icon()}>\n        <span class=\"smwb-nav-item__icon\">{icon()}</span>\n      </Show>\n      <Show when={local.title}>\n        <span class=\"smwb-nav-item__title\">{local.title}</span>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </Dynamic>\n  );\n}\n\nexport function Sidebar(props: SidebarProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      variant: \"default\" as SidebarVariant,\n      defaultActiveItem: null as number | null,\n      collapsible: false,\n      defaultCollapsed: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n      contained: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"menuItems\",\n    \"activeItem\",\n    \"defaultActiveItem\",\n    \"onActiveItemChange\",\n    \"collapsible\",\n    \"collapsed\",\n    \"defaultCollapsed\",\n    \"onCollapsedChange\",\n    \"collapseToggleAriaLabel\",\n    \"contained\",\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\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.collapsed,\n    defaultValue: local.defaultCollapsed,\n    onChange: (next) => local.onCollapsedChange?.(next),\n  });\n\n  // When collapsed the rail always shows the icon-only mini variant.\n  const effectiveVariant = (): SidebarVariant => (local.collapsible && collapsed() ? \"compactMini\" : local.variant);\n\n  return (\n    <aside\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-sidebar\", local.class, `smwb-${effectiveVariant()}`, {\n        \"smwb-sidebar_collapsible\": local.collapsible,\n        \"smwb-sidebar_collapsed\": local.collapsible && collapsed(),\n        \"smwb-sidebar_contained\": local.contained,\n      })}\n      // A default: the caller's own wins, and an explicit undefined keeps it.\n      role={rest.role ?? \"menubar\"}\n    >\n      <Show when={local.collapsible}>\n        <div class=\"smwb-sidebar__collapse\">\n          <button\n            type=\"button\"\n            class=\"smwb-sidebar__collapse-btn\"\n            aria-label={local.collapseToggleAriaLabel}\n            aria-expanded={!collapsed()}\n            onClick={() => setCollapsed(!collapsed())}\n          >\n            <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n          </button>\n        </div>\n      </Show>\n      <nav class=\"smwb-sidebar__nav\">\n        <For each={local.menuItems ?? []}>\n          {(item, idx) => (\n            <NavItem\n              as={item.as}\n              isActive={activeItem() === idx()}\n              onClick={(event) => {\n                setActiveItem(idx());\n                if (typeof item.onClick === \"function\") item.onClick(event);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n              variant={effectiveVariant()}\n            />\n          )}\n        </For>\n      </nav>\n    </aside>\n  );\n}\n\nexport default Sidebar;\n"],"names":["NavItem","props","local","rest","splitProps","rippleActions","icon","children","_$createComponent","Dynamic","_$mergeProps","component","as","href","role","cn","variant","active","isActive","onPointerDown","event","onRipple","Show","when","_el$","_tmpl$","_$insert","title","_el$2","_tmpl$2","Ripple","actionRef","actions","Sidebar","merged","mergeProps","defaultActiveItem","collapsible","defaultCollapsed","collapseToggleAriaLabel","contained","activeItem","setActiveItem","createControllableState","value","defaultValue","onChange","next","onActiveItemChange","collapsed","setCollapsed","onCollapsedChange","effectiveVariant","_el$3","_tmpl$4","_el$6","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","class","_el$4","_tmpl$3","_el$5","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","undefined","For","each","menuItems","item","idx","onClick","_$delegateEvents"],"mappings":"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"}

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

@@ -28,6 +28,8 @@ export interface StepperProps extends JSX.HTMLAttributes<HTMLDivElement> {
     alternativeLabel?: boolean;
     /** Makes steps clickable; receives the clicked step index. */
     onStepClick?: (index: number) => void;
+    /** Test id of the stepper `<div>`; `stepper` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 export declare function Stepper(props: StepperProps): JSX.Element;

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

@@ -1,98 +1,102 @@
-import { createComponent as n, 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 '../../../assets/styles/less/components/stepper/stepper.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                         */
 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 ne(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 oe(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 = () => (() => {
-    var i = H(), b = q(t.ref);
-    return typeof b == "function" && B(b, i), D(i, F(A, {
-      "data-testid": "stepper",
+  }, 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), 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}`, {
           "smwb-stepper_alt-label": t.alternativeLabel && t.orientation !== "vertical"
         }, t.class);
       }
-    }), !1, !0), a(i, n(j, {
+    }), !1, !0), a(n, i(j, {
       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, n(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())() ? n(G, {
+              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, n(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, n(c, {
+          }), 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;
-        })(), n(c, {
+          }), r;
+        })(), i(c, {
           get when() {
-            return !M();
+            return !E();
           },
           get children() {
-            return V();
+            return W();
           }
         })];
       }
-    })), i;
+    })), n;
   })();
-  return n(c, {
+  return i(c, {
     get when() {
       return _();
     },
@@ -100,13 +104,13 @@ function ne(E) {
       return u();
     },
     get children() {
-      var i = Y();
-      return a(i, u), i;
+      var n = Z();
+      return a(n, u), n;
     }
   });
 }
 O(["click", "keydown"]);
 export {
-  ne as Stepper
+  oe as Stepper
 };
 //# sourceMappingURL=stepper.js.map

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":";;;;;;;;AA2CA,MAAMA,IAAiB;AAEhB,SAASC,GAAQC,GAAkC;AACxD,QAAMC,IAASC,EAAW;AAAA,IAAEC,aAAa;AAAA,IAAoCC,kBAAkB;AAAA,EAAA,GAASJ,CAAK,GACvG,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,SACA,SACA,cACA,eACA,oBACA,eACA,OACA,aAAa,CACd,GAKKO,IAAQC,EAAW,MAAMJ,EAAMG,KAAK,GACpCE,IAAOA,MAAeL,EAAMF,gBAAgB,QAE5CQ,IAAUA,OAAe,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAGtBC,EAAUV,EAAMW,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBb,GAAI;AAAA,MAAA,IAAA,gBAAA;AAAA,eAEKD,EAAM,aAAa,KAAK;AAAA,MAAS;AAAA,MAAA,IAAA,eAAA;AAAA,eAClCe,UAAAV,EAAAA,CAAM,EAAA,IAAGW,OAAOC,KAAKC,IAAIf,EAAAA,EAAQgB,QAAQ1B,CAAc,CAAC,IAAI2B;AAAAA,MAAS;AAAA,MAAA,IAAA,QAAA;AAAA,eAC1EC,EACL,gBACAhB,MAAS,8CAA8C,gBAAgBL,EAAMF,WAAW,IACxF;AAAA,UAAE,0BAA0BE,EAAMD,oBAAoBC,EAAMF,gBAAgB;AAAA,QAAA,GAC5EE,EAAMsB,KACR;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAhB,GAAAiB,EAEAC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEvB,EAAAA;AAAAA,MAAO;AAAA,MAAAwB,UACfA,CAACC,GAAMC,MAAU;AAChB,cAAMC,IAAYA,MAAeD,EAAAA,IAAU7B,EAAM+B,YAC3CC,IAASA,MAAeH,EAAAA,MAAY7B,EAAM+B,YAC1CE,IAASA,MAAeJ,EAAAA,MAAY1B,EAAAA,EAAQgB,SAAS,GACrDe,IAAYA,MAAeC,EAAQnC,EAAMoC,eAAgB,CAACR,EAAKS,UAK/DC,IAAUA,MAAY;AAC1B,UAAIJ,EAAAA,KAAalC,EAAMoC,cAAcP,GAAO;AAAA,QAC9C,GACMU,IAA8DC,CAAAA,MAAU;AAC5E,UAAIN,QAAgBM,EAAMC,QAAQ,WAAWD,EAAMC,QAAQ,SACzDD,EAAME,eAAAA,GACN1C,EAAMoC,cAAcP,GAAO;AAAA,QAE/B;AAEA,eAAA,EAAA,MAAA;AAAA,cAAAc,IAAAC,KAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IAAAF,EAAAD;AAAAH,iBAAAA,EAAAO,YAeiBX,GAASI,EAAAQ,UADXb,GAAOf,EAAAsB,GAAArB,EAIb4B,GAAI;AAAA,YAAA,IAACC,OAAI;AAAA,qBAAEzB,EAAK0B;AAAAA,YAAI;AAAA,YAAA,IAAEC,WAAQ;AAAA,qBAAExC,UAAAe,GAAW,EAAA,IAAAN,EAAIgC,GAAI;AAAA,gBAACC,MAAI;AAAA,gBAASC,MAAM;AAAA,cAAA,CAAE,KAAA,MAAA;AAAA,oBAAAC,IAAAC,EAAAA;AAAArC,uBAAAA,EAAAoC,GAAA,MAAc9B,EAAAA,IAAU,CAAC,GAAA8B;AAAAA,cAAA,GAAA;AAAA,YAAQ;AAAA,YAAA,IAAAhC,WAAA;AAAA,qBACxGC,EAAK0B;AAAAA,YAAI;AAAA,UAAA,CAAA,CAAA,GAAA/B,EAAA0B,GAAA,MAIuBrB,EAAKiC,KAAK,GAAAtC,EAAAwB,GAAAvB,EAC5C4B,GAAI;AAAA,YAAA,IAACC,OAAI;AAAA,qBAAEzB,EAAKkC;AAAAA,YAAQ;AAAA,YAAA,IAAAnC,WAAA;AAAA,kBAAAoC,IAAAC,EAAAA;AAAAzC,qBAAAA,EAAAwC,GAAA,MACenC,EAAKkC,QAAQ,GAAAC;AAAAA,YAAA;AAAA,UAAA,CAAA,GAAA,IAAA,GAAAxC,EAAAwB,GAAAvB,EAEpD4B,GAAI;AAAA,YAAA,IAACC,OAAI;AAAA,qBAAEzB,EAAKqC;AAAAA,YAAW;AAAA,YAAA,IAAAtC,WAAA;AAAA,kBAAAuC,IAAAC,EAAAA;AAAA5C,qBAAAA,EAAA2C,GAAA,MACetC,EAAKqC,WAAW,GAAAC;AAAAA,YAAA;AAAA,UAAA,CAAA,GAAA,IAAA,GAAAE,EAAAC,CAAAA,MAAA;AAAA,gBAAAC,IAzBtDjD,EAAG,sBAAsB;AAAA,cAC9B,6BAA6BW,EAAAA;AAAAA,cAC7B,gCAAgCF,EAAAA;AAAAA,cAChC,4BAA4BF,EAAK2C;AAAAA,cACjC,+BAA+B3C,EAAKS;AAAAA,cACpC,gCAAgCH,EAAAA;AAAAA,YAAU,CAC3C,GAACsC,IACYxC,MAAW,SAASZ,QAASqD,IAC5B7C,EAAKS,YAAYjB,QAASsD,IACnCxC,MAAc,WAAWd,QAASuD,IAC9BzC,EAAAA,IAAc,IAAId;AAASkD,mBAAAA,MAAAD,EAAAO,KAAAC,EAAAlC,GAAA0B,EAAAO,IAAAN,CAAA,GAAAE,MAAAH,EAAAS,KAAAC,EAAApC,GAAA,gBAAA0B,EAAAS,IAAAN,CAAA,GAAAC,MAAAJ,EAAAW,KAAAD,EAAApC,GAAA,iBAAA0B,EAAAW,IAAAP,CAAA,GAAAC,MAAAL,EAAAY,KAAAF,EAAApC,GAAA,QAAA0B,EAAAY,IAAAP,CAAA,GAAAC,MAAAN,EAAAa,KAAAH,EAAApC,GAAA,YAAA0B,EAAAa,IAAAP,CAAA,GAAAN;AAAAA,UAAA,GAAA;AAAA,YAAAO,GAAAxD;AAAAA,YAAA0D,GAAA1D;AAAAA,YAAA4D,GAAA5D;AAAAA,YAAA6D,GAAA7D;AAAAA,YAAA8D,GAAA9D;AAAAA,UAAAA,CAAA,GAAAuB;AAAAA,QAAA,GAAA,GAAAnB,EAmBtC4B,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAE,CAACpB,EAAAA;AAAAA,UAAQ;AAAA,UAAA,IAAAN,WAAA;AAAA,mBAAAwD,EAAAA;AAAAA,UAAA;AAAA,QAAA,CAAA,CAAA;AAAA,MAK3B;AAAA,IAAA,CAAC,CAAA,GAAA5E;AAAAA,EAAA,GAAA;AAOP,SAAAiB,EACG4B,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEhD,EAAAA;AAAAA,IAAM;AAAA,IAAA,IAAEkD,WAAQ;AAAA,aAAEjD,EAAAA;AAAAA,IAAS;AAAA,IAAA,IAAAqB,WAAA;AAAA,UAAAyD,IAAAC,EAAAA;AAAA9D,aAAAA,EAAA6D,GACL9E,CAAO,GAAA8E;AAAAA,IAAA;AAAA,EAAA,CAAA;AAG7C;AAEuBE,EAAA,CAAA,SAAA,SAAA,CAAA;"}

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

@@ -1,6 +1,8 @@
 export { Tabs } from "./tabs";
 export type { TabsProps } from "./tabs";
 export { Tab } from "./tab/tab";
-export type { TabProps } from "./tab/tab";
+export type { TabActionsApi, TabCloseReason, TabProps } from "./tab/tab";
+export { TabPanel } from "./tabPanel/tabPanel";
+export type { TabPanelProps } from "./tabPanel/tabPanel";
 export { TabsContext, useTabsContext } from "./tabsContext";
 export type { TabsContextValue } from "./tabsContext";

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

@@ -1,15 +1,102 @@
 import { type JSX, type ParentProps } from "solid-js";
+import { type TabCloseReason } from "../tabsContext";
 import { type Ref } from "../../../../primitives/mergeRefs";
-export interface TabProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
+export type { TabCloseReason };
+/** What a function given as `actions` receives. */
+export interface TabActionsApi {
+    /**
+     * Ask for the tab to close, as its close button does: `onClose` is called with this event and the
+     * reason "actions", and `Tabs` moves focus on to the neighbour once the tab goes, even though focus
+     * is in a menu drawn outside the row. Call it from the item that closes the tab ("Terminate"), with
+     * that item's event. It works on a tab that is not `closable`.
+     */
+    close: (event: Event) => void;
+}
+export interface TabProps extends Omit<JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, "onClose"> {
     label?: JSX.Element;
     isActive?: boolean;
+    /**
+     * Whether the tab is the one in the page's Tab order (`tabindex` 0, the others -1). `Tabs` sets
+     * it: the focused tab while focus is in the row, the selected one otherwise. On its own a tab
+     * is the stop while `isActive`.
+     */
+    tabStop?: boolean;
     contentRef?: Ref<HTMLSpanElement>;
+    /**
+     * A decorative status marker drawn left of the label (a running/done/failed icon). Its
+     * wrapper renders `aria-hidden="true"`, so the tab's accessible name stays the label
+     * alone: the icon is not announced on top of it. To have the status read out, put it
+     * in the `label` itself.
+     */
     icon?: JSX.Element;
     stacked?: boolean;
+    /** The element to render. A tab with an `href` is an `a` unless you say otherwise. */
     tag?: string;
-    /** With `tag="a"`: where the link goes, so the tab stays a real link. */
+    /**
+     * Navigation mode: where the tab goes. The tab is then a real link (`<a href role="tab">`, with
+     * no `target`: a tab never opens another window), so it opens in place and middle click, copy
+     * link and the like work. A router takes over the plain click in `onClick` with
+     * `event.preventDefault()`; `Tabs` still calls `onChange` for it. A modified or non-primary click
+     * (Ctrl, Meta, Shift or Alt held, or a button other than the main one) is the browser's, as
+     * "open in a new tab": the router must let it through, and `Tabs` does not call `onChange`.
+     * The one exception is a middle press on a `closable` tab: it closes the tab instead, as in an
+     * editor, and its default is prevented so nothing opens.
+     */
     href?: string;
     disabled?: boolean;
+    /**
+     * Draw a close button after the tab, and let Delete or Backspace on the focused tab close it too
+     * (Backspace because a Mac has no Delete key); the tab lists them in `aria-keyshortcuts`. A
+     * middle click on the tab closes it as well (`reason` "middleClick"): the browser's own
+     * middle-click action (autoscroll, opening a link tab in a new window) is suppressed, and the
+     * click never selects. The tab does not close itself: `onClose` asks for it and the owner
+     * removes the `Tab`. The button is a sibling of the tab, not inside its `role="tab"`, so the
+     * tab's accessible name is its label alone.
+     * It is out of the Tab order (`tabindex` -1), so the row keeps one tab stop, and a press on it takes
+     * no focus and never selects the tab. When the tab that has focus closes, `Tabs` moves focus to the
+     * tab that takes its place (the previous one if it was last), skipping disabled tabs. A disabled tab
+     * has a disabled button.
+     *
+     * The button stays in the accessibility tree, named by `closeLabel`: it is how a screen reader user
+     * who cannot press Delete, as on a touch screen, closes the tab. It sits in the tab list beside its
+     * tab, though, and ARIA 1.2 lets a `tablist` own only `tab`s: a linter that applies that strictly
+     * (axe `aria-required-children`) can flag the button, and whatever `actions` holds.
+     *
+     * To switch it off on a tab, pass `false` rather than leaving it out: a tab given `closable` or
+     * `actions` is wrapped in an item with them, a tab given neither is not, and moving between the two
+     * recreates the tab and drops its focus.
+     */
+    closable?: boolean;
+    /**
+     * Asks for the tab to close, and receives what asked for it: the close button's click (`reason`
+     * "button"), the key press of Delete or Backspace on the tab (`reason` "key", its default is
+     * prevented), the middle press on the tab (`reason` "middleClick", its default is prevented too),
+     * or the event passed to `close` by the tab's `actions` (`reason` "actions"). The owner removes
+     * the `Tab`.
+     */
+    onClose?: (event: Event, reason: TabCloseReason) => void;
+    /** Accessible label of the close button. English by default; set it to localise, or to name the tab ("Close Terminal 1"). */
+    closeLabel?: string;
+    /**
+     * Content after the tab, before the close button: a trigger with a `Menu` ("Rename", "Terminate"),
+     * or any control. Give a function to get `{ close }` (see `TabActionsApi`); it is called once.
+     * Like the close button the content is a sibling of the tab, so it is not part of the tab's name;
+     * the tab's own `ref`, `class` and handlers stay on the `role="tab"` element. It stays in the
+     * accessibility tree as written, inside the tab list (see `closable`).
+     *
+     * The row has one tab stop, so give the trigger `tabindex={-1}`. Shift+F10 or the Menu key on the
+     * focused tab, which the tab lists in `aria-keyshortcuts`, focuses the first control in `actions`
+     * and clicks it, unless that control says `aria-expanded="true"` (it is already open). If the
+     * control names its popup in `aria-controls`, the first enabled `menuitem` in that element then
+     * takes focus, as the WAI-ARIA menu button pattern asks: ArrowDown moves on, Enter chooses, and
+     * Escape hands focus back to the trigger. Without `aria-controls` focus stays on the trigger.
+     *
+     * The row clips what overflows it: draw the menu in a `Portal`, anchored to the trigger and with
+     * the `id` the trigger names. A choice that removes the tab ("Terminate") should call `close` with
+     * its event, so that `onClose` removes the tab and `Tabs` moves focus on to the neighbour; a tab
+     * removed some other way leaves focus on the page.
+     */
+    actions?: JSX.Element | ((api: TabActionsApi) => JSX.Element);
     ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
 }
 export declare function Tab(props: ParentProps<TabProps>): JSX.Element;