@smwb/ui-solid 0.12.0 → 0.13.0

package/dist/components/navigation/menu/menuSubmenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuSubmenu.js","sources":["../../../../src/components/navigation/menu/menuSubmenu.tsx"],"sourcesContent":["import { type JSX, type ParentProps, createSignal, splitProps } from \"solid-js\";\nimport { type Middleware, offset } from \"@floating-ui/dom\";\nimport cn from \"clsx\";\nimport { MenuContext, useMenuContext } from \"./menuContext\";\nimport { MenuFloating } from \"./menuFloating\";\nimport type { Placement } from \"../../../utils/floating\";\n\nexport interface MenuSubmenuProps {\n  placement?: Placement;\n  onClose?: () => void;\n  /** Content of the toggle row (e.g. an icon + <MenuItemText/>). */\n  toggleElement?: JSX.Element;\n  /** Items and/or nested `MenuSubmenu` elements (multi-level supported). */\n  children: JSX.Element;\n  /** Open the submenu on pointer hover in addition to click. */\n  openOnHover?: boolean;\n  class?: string;\n}\n\n/**\n * Solid redesign of MenuSubmenu. React injected props into a cloned toggle and\n * cloned each child's onClick; Solid renders its own toggle row and closes the\n * menu chain via click delegation on the floating content (leaf menuitems close,\n * nested submenu toggles — which carry `aria-haspopup` — do not).\n */\nexport function MenuSubmenu(props: ParentProps<MenuSubmenuProps>): JSX.Element {\n  const parentCtx = useMenuContext();\n  const [local] = splitProps(props, [\"placement\", \"onClose\", \"toggleElement\", \"children\", \"openOnHover\", \"class\"]);\n  const [isOpen, setIsOpen] = createSignal(false);\n  const [anchor, setAnchor] = createSignal<HTMLElement | null>(null);\n\n  const middleware: Middleware[] = [\n    offset(({ placement }) => {\n      switch (placement) {\n        case \"right-start\":\n        case \"left-start\":\n          return { crossAxis: -8, mainAxis: 0 };\n        case \"right-end\":\n        case \"left-end\":\n          return { crossAxis: 8, mainAxis: 0 };\n        default:\n          return { crossAxis: 0, mainAxis: 0 };\n      }\n    }),\n  ];\n\n  const onToggle: JSX.EventHandler<HTMLLIElement, MouseEvent> = (event) => {\n    if (event.button !== 0) return;\n    setIsOpen((prev) => !prev);\n  };\n\n  const close = (): void => {\n    setIsOpen(false);\n    local.onClose?.();\n  };\n\n  const onToggleKeyDown: JSX.EventHandler<HTMLLIElement, KeyboardEvent> = (event) => {\n    if (event.key === \"ArrowRight\" || event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      setIsOpen(true);\n    } else if (event.key === \"ArrowLeft\" || event.key === \"Escape\") {\n      setIsOpen(false);\n    }\n  };\n\n  const onContentClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    const item = (event.target as HTMLElement).closest('[role=\"menuitem\"]');\n    if (item && !item.hasAttribute(\"aria-haspopup\")) {\n      close();\n      parentCtx.onClose();\n    }\n  };\n\n  const value = {\n    get dense() {\n      return parentCtx.dense;\n    },\n    variant: \"floating\" as const,\n    onClose: close,\n  };\n\n  return (\n    <MenuContext.Provider value={value}>\n      <li\n        role=\"menuitem\"\n        ref={setAnchor}\n        class={cn(\"smwb-menu__item\", local.class, { \"smwb-menu__item--selected\": isOpen() })}\n        tabindex={0}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen()}\n        onClick={onToggle}\n        onKeyDown={onToggleKeyDown}\n        onMouseEnter={local.openOnHover ? () => setIsOpen(true) : undefined}\n      >\n        <span class=\"smwb-menu__item-inner\">{local.toggleElement}</span>\n      </li>\n      <MenuFloating\n        placement={local.placement ?? \"right-start\"}\n        isOpen={isOpen()}\n        onClose={close}\n        anchorElement={anchor()}\n        middleware={middleware}\n        onClick={onContentClick}\n      >\n        {local.children}\n      </MenuFloating>\n    </MenuContext.Provider>\n  );\n}\n\nexport default MenuSubmenu;\n"],"names":["MenuSubmenu","props","parentCtx","useMenuContext","local","splitProps","isOpen","setIsOpen","createSignal","anchor","setAnchor","middleware","offset","placement","crossAxis","mainAxis","onToggle","event","button","prev","close","onClose","onToggleKeyDown","key","preventDefault","onContentClick","item","target","closest","hasAttribute","value","dense","variant","_$createComponent","MenuContext","Provider","children","_el$","_tmpl$","_el$2","firstChild","_$addEventListener","openOnHover","undefined","$$keydown","$$click","_$use","_$insert","toggleElement","_$effect","_p$","_v$","cn","class","_v$2","e","_$className","t","_$setAttribute","MenuFloating","anchorElement","onClick","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"menuSubmenu.js","sources":["../../../../src/components/navigation/menu/menuSubmenu.tsx"],"sourcesContent":["import { type JSX, type ParentProps, createSignal, splitProps } from \"solid-js\";\nimport { type Middleware, offset } from \"@floating-ui/dom\";\nimport cn from \"clsx\";\nimport { MenuContext, useMenuContext } from \"./menuContext\";\nimport { ENABLED_ITEM_SELECTOR } from \"./menuList\";\nimport { MenuFloating } from \"./menuFloating\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport type { Placement } from \"../../../utils/floating\";\nimport type { Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface MenuSubmenuProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  placement?: Placement;\n  onClose?: () => void;\n  /** Content of the toggle row (e.g. an icon + <MenuItemText/>). */\n  toggleElement?: JSX.Element;\n  /** Items and/or nested `MenuSubmenu` elements (multi-level supported). */\n  children: JSX.Element;\n  /** Open the submenu on pointer hover in addition to click. */\n  openOnHover?: boolean;\n  /**\n   * Class of the floating panel that holds the items, as in React. The other HTML\n   * attributes and `style` go to the panel too; the toggle row takes none of them.\n   */\n  class?: string;\n  /** Gets the floating panel that holds the items, while it is open. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Solid redesign of MenuSubmenu. React injected props into a cloned toggle and\n * cloned each child's onClick; Solid renders its own toggle row and closes the\n * menu chain via click delegation on the floating content (leaf menuitems close,\n * nested submenu toggles — which carry `aria-haspopup` — do not).\n */\nexport function MenuSubmenu(props: ParentProps<MenuSubmenuProps>): JSX.Element {\n  const parentCtx = useMenuContext();\n  const [local, rest] = splitProps(props, [\n    \"placement\",\n    \"onClose\",\n    \"toggleElement\",\n    \"children\",\n    \"openOnHover\",\n    \"onClick\",\n    \"ref\",\n  ]);\n  const [isOpen, setIsOpen] = createSignal(false);\n  const [anchor, setAnchor] = createSignal<HTMLElement | null>(null);\n  let rippleActions: RippleActionsRef | undefined;\n\n  const middleware: Middleware[] = [\n    offset(({ placement }) => {\n      switch (placement) {\n        case \"right-start\":\n        case \"left-start\":\n          return { crossAxis: -8, mainAxis: 0 };\n        case \"right-end\":\n        case \"left-end\":\n          return { crossAxis: 8, mainAxis: 0 };\n        default:\n          return { crossAxis: 0, mainAxis: 0 };\n      }\n    }),\n  ];\n\n  const onToggle: JSX.EventHandler<HTMLLIElement, MouseEvent> = (event) => {\n    if (event.button !== 0) return;\n    setIsOpen((prev) => !prev);\n  };\n\n  // The toggle row ripples like MenuItem's rows: on pointerdown, so touch and\n  // pen get it too.\n  const onTogglePointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  const close = (): void => {\n    setIsOpen(false);\n    local.onClose?.();\n  };\n\n  // A keyboard open hands focus to the submenu's first item. Solid draws the list as soon\n  // as isOpen is set, as the element right after the row (MenuFloating adds no wrapper).\n  const focusFirstItem = (): void => {\n    anchor()?.nextElementSibling?.querySelector<HTMLElement>(ENABLED_ITEM_SELECTOR)?.focus();\n  };\n\n  const onToggleKeyDown: JSX.EventHandler<HTMLLIElement, KeyboardEvent> = (event) => {\n    if (event.key === \"ArrowRight\" || event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      setIsOpen(true);\n      focusFirstItem();\n    } else if (event.key === \"ArrowLeft\" || event.key === \"Escape\") {\n      // Closing its own open submenu takes the key: the menu the row is in stays open.\n      if (isOpen()) event.preventDefault();\n      setIsOpen(false);\n    }\n  };\n\n  // Always attached and checks `openOnHover` itself. Solid binds event handlers\n  // once, and the context provider builds the toggle in a tracked scope, so\n  // choosing the handler by that prop there would rebuild the toggle whenever\n  // it changes.\n  const onToggleMouseEnter = (): void => {\n    if (local.openOnHover) setIsOpen(true);\n  };\n\n  const onContentClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    // The caller's onClick on the panel runs first.\n    callHandler(local.onClick, event);\n    const item = (event.target as HTMLElement).closest('[role=\"menuitem\"]');\n    if (item && !item.hasAttribute(\"aria-haspopup\")) {\n      close();\n      parentCtx.onClose();\n    }\n  };\n\n  const value = {\n    get dense() {\n      return parentCtx.dense;\n    },\n    variant: \"floating\" as const,\n    onClose: close,\n    submenu: true,\n  };\n\n  return (\n    <MenuContext.Provider value={value}>\n      <li\n        role=\"menuitem\"\n        ref={setAnchor}\n        class={cn(\"smwb-menu__item\", {\n          \"smwb-menu__item--dense\": parentCtx.dense,\n          \"smwb-menu__item--selected\": isOpen(),\n        })}\n        tabindex={0}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen()}\n        onClick={onToggle}\n        onPointerDown={onTogglePointerDown}\n        onKeyDown={onToggleKeyDown}\n        onMouseEnter={onToggleMouseEnter}\n      >\n        <span class=\"smwb-menu__item-inner\">{local.toggleElement}</span>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} />\n      </li>\n      <MenuFloating\n        {...rest}\n        ref={local.ref}\n        placement={local.placement ?? \"right-start\"}\n        isOpen={isOpen()}\n        onClose={close}\n        anchorElement={anchor()}\n        middleware={middleware}\n        onClick={onContentClick}\n      >\n        {local.children}\n      </MenuFloating>\n    </MenuContext.Provider>\n  );\n}\n\nexport default MenuSubmenu;\n"],"names":["MenuSubmenu","props","parentCtx","useMenuContext","local","rest","splitProps","isOpen","setIsOpen","createSignal","anchor","setAnchor","rippleActions","middleware","offset","placement","crossAxis","mainAxis","onToggle","event","button","prev","onTogglePointerDown","onRipple","close","onClose","focusFirstItem","nextElementSibling","querySelector","ENABLED_ITEM_SELECTOR","focus","onToggleKeyDown","key","preventDefault","onToggleMouseEnter","openOnHover","onContentClick","callHandler","onClick","item","target","closest","hasAttribute","value","dense","variant","submenu","_$createComponent","MenuContext","Provider","children","_el$","_tmpl$","_el$2","firstChild","addEventListener","$$keydown","$$pointerdown","$$click","_$use","_$insert","toggleElement","Ripple","actionRef","actions","_$effect","_p$","_v$","cn","_v$2","e","_$className","t","_$setAttribute","undefined","MenuFloating","_$mergeProps","ref","r$","_ref$","anchorElement","_$delegateEvents"],"mappings":"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"}

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

@@ -22,6 +22,8 @@ export interface PaginationProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "
     hidePrevButton?: boolean;
     hideNextButton?: boolean;
     onChange?: (page: number) => void;
+    /** Test id of the root `<nav>`; `pagination` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLElement>;
 }
 export declare function Pagination(props: PaginationProps): JSX.Element;

package/dist/components/navigation/pagination/pagination.js

@@ -6,14 +6,14 @@ import M from "clsx";
 import { mergeRefs as S } from "../../../primitives/mergeRefs.js";
 import { Icon as D } from "../../base/icon/icon.js";
 var H = /* @__PURE__ */ w('<li><button type=button class="smwb-pagination__item smwb-pagination__nav">'), I = /* @__PURE__ */ w("<nav><ul class=smwb-pagination__list>"), q = /* @__PURE__ */ w("<li><button type=button>"), K = /* @__PURE__ */ w("<li class=smwb-pagination__ellipsis aria-hidden=true>…");
-const b = (n, p) => Array.from({
-  length: Math.max(p - n + 1, 0)
-}, (e, t) => n + t), O = (n, p, e, t) => {
-  const d = b(1, Math.min(t, n)), c = b(Math.max(n - t + 1, t + 1), n), h = Math.max(Math.min(p - e, n - t - e * 2 - 1), t + 2), f = Math.min(Math.max(p + e, t + e * 2 + 2), c.length > 0 ? c[0] - 2 : n - 1);
-  return [...d, ...h > t + 2 ? ["start-ellipsis"] : t + 1 < n - t ? [t + 1] : [], ...b(h, f), ...f < n - t - 1 ? ["end-ellipsis"] : n - t > t ? [n - t] : [], ...c];
+const b = (n, g) => Array.from({
+  length: Math.max(g - n + 1, 0)
+}, (e, t) => n + t), O = (n, g, e, t) => {
+  const d = b(1, Math.min(t, n)), p = b(Math.max(n - t + 1, t + 1), n), h = Math.max(Math.min(g - e, n - t - e * 2 - 1), t + 2), f = Math.min(Math.max(g + e, t + e * 2 + 2), p.length > 0 ? p[0] - 2 : n - 1);
+  return [...d, ...h > t + 2 ? ["start-ellipsis"] : t + 1 < n - t ? [t + 1] : [], ...b(h, f), ...f < n - t - 1 ? ["end-ellipsis"] : n - t > t ? [n - t] : [], ...p];
 };
 function W(n) {
-  const p = F({
+  const g = F({
     siblingCount: 1,
     boundaryCount: 1,
     size: "medium",
@@ -25,34 +25,38 @@ function W(n) {
     showLastButton: !1,
     hidePrevButton: !1,
     hideNextButton: !1
-  }, n), [e, t] = N(p, ["class", "count", "page", "siblingCount", "boundaryCount", "size", "variant", "shape", "color", "disabled", "showFirstButton", "showLastButton", "hidePrevButton", "hideNextButton", "onChange", "ref"]);
+  }, n), [e, t] = N(g, ["class", "count", "page", "siblingCount", "boundaryCount", "size", "variant", "shape", "color", "disabled", "showFirstButton", "showLastButton", "hidePrevButton", "hideNextButton", "onChange", "ref", "data-testid"]);
   let d;
-  const c = (a) => {
+  const p = (a) => {
     e.disabled || a === e.page || a < 1 || a > e.count || e.onChange?.(a);
   }, h = (a) => {
     if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(a.key)) return;
     const i = Array.from(d?.querySelectorAll("button.smwb-pagination__item:not(:disabled)") ?? []);
     if (i.length === 0) return;
-    const r = i.indexOf(document.activeElement);
-    let s = r;
-    a.key === "ArrowRight" ? s = Math.min(r + 1, i.length - 1) : a.key === "ArrowLeft" ? s = Math.max(r - 1, 0) : a.key === "Home" ? s = 0 : a.key === "End" && (s = i.length - 1), a.preventDefault(), i[s]?.focus();
-  }, f = () => O(e.count, e.page, e.siblingCount, e.boundaryCount), u = (a, i, r, s) => _(P, {
+    const l = i.indexOf(document.activeElement);
+    let s = l;
+    a.key === "ArrowRight" ? s = Math.min(l + 1, i.length - 1) : a.key === "ArrowLeft" ? s = Math.max(l - 1, 0) : a.key === "Home" ? s = 0 : a.key === "End" && (s = i.length - 1), a.preventDefault(), i[s]?.focus();
+  }, f = () => O(e.count, e.page, e.siblingCount, e.boundaryCount), u = (a, i, l, s) => _(P, {
     when: !s,
     get children() {
-      var g = H(), l = g.firstChild;
-      return l.$$click = () => c(i), k(l, "aria-label", a), m(l, _(D, {
-        name: r,
+      var c = H(), r = c.firstChild;
+      return r.$$click = () => p(i), k(r, "aria-label", a), m(r, _(D, {
+        name: l,
         get size() {
           return e.size === "small" ? 16 : 18;
         }
-      })), x(() => l.disabled = e.disabled || i < 1 || i > e.count), g;
+      })), x(() => r.disabled = e.disabled || i < 1 || i > e.count), c;
     }
   });
   return (() => {
-    var a = I(), i = a.firstChild, r = S(e.ref, (s) => d = s);
-    return typeof r == "function" && A(r, a), E(a, L(t, {
-      "data-testid": "pagination",
-      "aria-label": "pagination",
+    var a = I(), i = a.firstChild, l = S(e.ref, (s) => d = s);
+    return typeof l == "function" && A(l, a), E(a, L(t, {
+      get "data-testid"() {
+        return e["data-testid"] ?? "pagination";
+      },
+      get "aria-label"() {
+        return t["aria-label"] ?? "pagination";
+      },
       get class() {
         return M("smwb-pagination", `smwb-pagination_${e.size}`, `smwb-pagination_${e.variant}`, `smwb-pagination_shape-${e.shape}`, e.color !== "default" && `smwb-pagination_color-${e.color}`, {
           "smwb-pagination_disabled": e.disabled
@@ -68,17 +72,17 @@ function W(n) {
           return K();
         },
         get children() {
-          var g = q(), l = g.firstChild;
-          return l.$$click = () => c(s), m(l, s), x((o) => {
+          var c = q(), r = c.firstChild;
+          return r.$$click = () => p(s), m(r, s), x((o) => {
             var v = M("smwb-pagination__item", {
               "smwb-pagination__item_selected": s === e.page
             }), $ = s === e.page ? "page" : void 0, B = e.disabled;
-            return v !== o.e && y(l, o.e = v), $ !== o.t && k(l, "aria-current", o.t = $), B !== o.a && (l.disabled = o.a = B), o;
+            return v !== o.e && y(r, o.e = v), $ !== o.t && k(r, "aria-current", o.t = $), B !== o.a && (r.disabled = o.a = B), o;
           }, {
             e: void 0,
             t: void 0,
             a: void 0
-          }), g;
+          }), c;
         }
       })
     }), null), m(i, () => u("Next page", e.page + 1, "chevron_right", e.hideNextButton), null), m(i, () => u("Last page", e.count, "last_page", !e.showLastButton), null), a;

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../../src/components/navigation/pagination/pagination.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 type PaginationColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface PaginationProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"onChange\"> {\n  /** Total number of pages. */\n  count: number;\n  /** Current page (1-based). */\n  page: number;\n  /** Pages shown on each side of the current page. */\n  siblingCount?: number;\n  /** Pages always shown at the start and end. */\n  boundaryCount?: number;\n  size?: \"small\" | \"medium\";\n  /** Item style. */\n  variant?: \"filled\" | \"outlined\";\n  /** Item shape. */\n  shape?: \"rounded\" | \"circular\";\n  color?: PaginationColor;\n  disabled?: boolean;\n  showFirstButton?: boolean;\n  showLastButton?: boolean;\n  hidePrevButton?: boolean;\n  hideNextButton?: boolean;\n  onChange?: (page: number) => void;\n  ref?: Ref<HTMLElement>;\n}\n\ntype PaginationItem = number | \"start-ellipsis\" | \"end-ellipsis\";\n\nconst range = (start: number, end: number): number[] =>\n  Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i);\n\nconst buildItems = (count: number, page: number, siblingCount: number, boundaryCount: number): PaginationItem[] => {\n  const startPages = range(1, Math.min(boundaryCount, count));\n  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);\n\n  const siblingsStart = Math.max(\n    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2\n  );\n  const siblingsEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages.length > 0 ? endPages[0]! - 2 : count - 1\n  );\n\n  return [\n    ...startPages,\n    ...(siblingsStart > boundaryCount + 2\n      ? ([\"start-ellipsis\"] as PaginationItem[])\n      : boundaryCount + 1 < count - boundaryCount\n        ? [boundaryCount + 1]\n        : []),\n    ...range(siblingsStart, siblingsEnd),\n    ...(siblingsEnd < count - boundaryCount - 1\n      ? ([\"end-ellipsis\"] as PaginationItem[])\n      : count - boundaryCount > boundaryCount\n        ? [count - boundaryCount]\n        : []),\n    ...endPages,\n  ];\n};\n\nexport function Pagination(props: PaginationProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      siblingCount: 1,\n      boundaryCount: 1,\n      size: \"medium\" as const,\n      variant: \"filled\" as const,\n      shape: \"circular\" as const,\n      color: \"default\" as PaginationColor,\n      disabled: false,\n      showFirstButton: false,\n      showLastButton: false,\n      hidePrevButton: false,\n      hideNextButton: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"count\",\n    \"page\",\n    \"siblingCount\",\n    \"boundaryCount\",\n    \"size\",\n    \"variant\",\n    \"shape\",\n    \"color\",\n    \"disabled\",\n    \"showFirstButton\",\n    \"showLastButton\",\n    \"hidePrevButton\",\n    \"hideNextButton\",\n    \"onChange\",\n    \"ref\",\n  ]);\n\n  let navEl: HTMLElement | undefined;\n\n  const go = (target: number): void => {\n    if (local.disabled || target === local.page || target < 1 || target > local.count) return;\n    local.onChange?.(target);\n  };\n\n  const onKeyDown: JSX.EventHandler<HTMLUListElement, KeyboardEvent> = (event) => {\n    if (![\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"].includes(event.key)) return;\n    const buttons = Array.from(\n      navEl?.querySelectorAll<HTMLButtonElement>(\"button.smwb-pagination__item:not(:disabled)\") ?? []\n    );\n    if (buttons.length === 0) return;\n    const current = buttons.indexOf(document.activeElement as HTMLButtonElement);\n    let next = current;\n    if (event.key === \"ArrowRight\") next = Math.min(current + 1, buttons.length - 1);\n    else if (event.key === \"ArrowLeft\") next = Math.max(current - 1, 0);\n    else if (event.key === \"Home\") next = 0;\n    else if (event.key === \"End\") next = buttons.length - 1;\n    event.preventDefault();\n    buttons[next]?.focus();\n  };\n\n  const items = (): PaginationItem[] => buildItems(local.count, local.page, local.siblingCount, local.boundaryCount);\n\n  const navButton = (label: string, target: number, iconName: string, hidden?: boolean): JSX.Element => (\n    <Show when={!hidden}>\n      <li>\n        <button\n          type=\"button\"\n          class=\"smwb-pagination__item smwb-pagination__nav\"\n          aria-label={label}\n          disabled={local.disabled || target < 1 || target > local.count}\n          onClick={() => go(target)}\n        >\n          <Icon name={iconName} size={local.size === \"small\" ? 16 : 18} />\n        </button>\n      </li>\n    </Show>\n  );\n\n  return (\n    <nav\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => (navEl = el))}\n      data-testid=\"pagination\"\n      aria-label=\"pagination\"\n      class={cn(\n        \"smwb-pagination\",\n        `smwb-pagination_${local.size}`,\n        `smwb-pagination_${local.variant}`,\n        `smwb-pagination_shape-${local.shape}`,\n        local.color !== \"default\" && `smwb-pagination_color-${local.color}`,\n        { \"smwb-pagination_disabled\": local.disabled },\n        local.class\n      )}\n    >\n      <ul class=\"smwb-pagination__list\" onKeyDown={onKeyDown}>\n        {navButton(\"First page\", 1, \"first_page\", !local.showFirstButton)}\n        {navButton(\"Previous page\", local.page - 1, \"chevron_left\", local.hidePrevButton)}\n        <For each={items()}>\n          {(item) => (\n            <Show\n              when={typeof item === \"number\"}\n              fallback={\n                <li class=\"smwb-pagination__ellipsis\" aria-hidden=\"true\">\n                  …\n                </li>\n              }\n            >\n              <li>\n                <button\n                  type=\"button\"\n                  class={cn(\"smwb-pagination__item\", { \"smwb-pagination__item_selected\": item === local.page })}\n                  aria-current={item === local.page ? \"page\" : undefined}\n                  disabled={local.disabled}\n                  onClick={() => go(item as number)}\n                >\n                  {item}\n                </button>\n              </li>\n            </Show>\n          )}\n        </For>\n        {navButton(\"Next page\", local.page + 1, \"chevron_right\", local.hideNextButton)}\n        {navButton(\"Last page\", local.count, \"last_page\", !local.showLastButton)}\n      </ul>\n    </nav>\n  );\n}\n\nexport default Pagination;\n"],"names":["range","start","end","Array","from","length","Math","max","_","i","buildItems","count","page","siblingCount","boundaryCount","startPages","min","endPages","siblingsStart","siblingsEnd","Pagination","props","merged","mergeProps","size","variant","shape","color","disabled","showFirstButton","showLastButton","hidePrevButton","hideNextButton","local","rest","splitProps","navEl","go","target","onChange","onKeyDown","event","includes","key","buttons","querySelectorAll","current","indexOf","document","activeElement","next","preventDefault","focus","items","navButton","label","iconName","hidden","_$createComponent","Show","when","children","_el$","_tmpl$","_el$2","firstChild","$$click","_$setAttribute","_$insert","Icon","name","_$effect","_el$3","_tmpl$2","_el$4","_ref$","mergeRefs","ref","el","_$use","_$spread","_$mergeProps","cn","class","$$keydown","For","each","item","fallback","_tmpl$4","_el$5","_tmpl$3","_el$6","_p$","_v$","_v$2","undefined","_v$3","e","_$className","t","a","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../../../src/components/navigation/pagination/pagination.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 type PaginationColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface PaginationProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"onChange\"> {\n  /** Total number of pages. */\n  count: number;\n  /** Current page (1-based). */\n  page: number;\n  /** Pages shown on each side of the current page. */\n  siblingCount?: number;\n  /** Pages always shown at the start and end. */\n  boundaryCount?: number;\n  size?: \"small\" | \"medium\";\n  /** Item style. */\n  variant?: \"filled\" | \"outlined\";\n  /** Item shape. */\n  shape?: \"rounded\" | \"circular\";\n  color?: PaginationColor;\n  disabled?: boolean;\n  showFirstButton?: boolean;\n  showLastButton?: boolean;\n  hidePrevButton?: boolean;\n  hideNextButton?: boolean;\n  onChange?: (page: number) => void;\n  /** Test id of the root `<nav>`; `pagination` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\ntype PaginationItem = number | \"start-ellipsis\" | \"end-ellipsis\";\n\nconst range = (start: number, end: number): number[] =>\n  Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i);\n\nconst buildItems = (count: number, page: number, siblingCount: number, boundaryCount: number): PaginationItem[] => {\n  const startPages = range(1, Math.min(boundaryCount, count));\n  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);\n\n  const siblingsStart = Math.max(\n    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2\n  );\n  const siblingsEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages.length > 0 ? endPages[0]! - 2 : count - 1\n  );\n\n  return [\n    ...startPages,\n    ...(siblingsStart > boundaryCount + 2\n      ? ([\"start-ellipsis\"] as PaginationItem[])\n      : boundaryCount + 1 < count - boundaryCount\n        ? [boundaryCount + 1]\n        : []),\n    ...range(siblingsStart, siblingsEnd),\n    ...(siblingsEnd < count - boundaryCount - 1\n      ? ([\"end-ellipsis\"] as PaginationItem[])\n      : count - boundaryCount > boundaryCount\n        ? [count - boundaryCount]\n        : []),\n    ...endPages,\n  ];\n};\n\nexport function Pagination(props: PaginationProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      siblingCount: 1,\n      boundaryCount: 1,\n      size: \"medium\" as const,\n      variant: \"filled\" as const,\n      shape: \"circular\" as const,\n      color: \"default\" as PaginationColor,\n      disabled: false,\n      showFirstButton: false,\n      showLastButton: false,\n      hidePrevButton: false,\n      hideNextButton: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"count\",\n    \"page\",\n    \"siblingCount\",\n    \"boundaryCount\",\n    \"size\",\n    \"variant\",\n    \"shape\",\n    \"color\",\n    \"disabled\",\n    \"showFirstButton\",\n    \"showLastButton\",\n    \"hidePrevButton\",\n    \"hideNextButton\",\n    \"onChange\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  let navEl: HTMLElement | undefined;\n\n  const go = (target: number): void => {\n    if (local.disabled || target === local.page || target < 1 || target > local.count) return;\n    local.onChange?.(target);\n  };\n\n  const onKeyDown: JSX.EventHandler<HTMLUListElement, KeyboardEvent> = (event) => {\n    if (![\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"].includes(event.key)) return;\n    const buttons = Array.from(\n      navEl?.querySelectorAll<HTMLButtonElement>(\"button.smwb-pagination__item:not(:disabled)\") ?? []\n    );\n    if (buttons.length === 0) return;\n    const current = buttons.indexOf(document.activeElement as HTMLButtonElement);\n    let next = current;\n    if (event.key === \"ArrowRight\") next = Math.min(current + 1, buttons.length - 1);\n    else if (event.key === \"ArrowLeft\") next = Math.max(current - 1, 0);\n    else if (event.key === \"Home\") next = 0;\n    else if (event.key === \"End\") next = buttons.length - 1;\n    event.preventDefault();\n    buttons[next]?.focus();\n  };\n\n  const items = (): PaginationItem[] => buildItems(local.count, local.page, local.siblingCount, local.boundaryCount);\n\n  const navButton = (label: string, target: number, iconName: string, hidden?: boolean): JSX.Element => (\n    <Show when={!hidden}>\n      <li>\n        <button\n          type=\"button\"\n          class=\"smwb-pagination__item smwb-pagination__nav\"\n          aria-label={label}\n          disabled={local.disabled || target < 1 || target > local.count}\n          onClick={() => go(target)}\n        >\n          <Icon name={iconName} size={local.size === \"small\" ? 16 : 18} />\n        </button>\n      </li>\n    </Show>\n  );\n\n  return (\n    <nav\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => (navEl = el))}\n      data-testid={local[\"data-testid\"] ?? \"pagination\"}\n      // A default the caller's own replaces, to name it in their language; an\n      // explicit undefined keeps it.\n      aria-label={rest[\"aria-label\"] ?? \"pagination\"}\n      class={cn(\n        \"smwb-pagination\",\n        `smwb-pagination_${local.size}`,\n        `smwb-pagination_${local.variant}`,\n        `smwb-pagination_shape-${local.shape}`,\n        local.color !== \"default\" && `smwb-pagination_color-${local.color}`,\n        { \"smwb-pagination_disabled\": local.disabled },\n        local.class\n      )}\n    >\n      <ul class=\"smwb-pagination__list\" onKeyDown={onKeyDown}>\n        {navButton(\"First page\", 1, \"first_page\", !local.showFirstButton)}\n        {navButton(\"Previous page\", local.page - 1, \"chevron_left\", local.hidePrevButton)}\n        <For each={items()}>\n          {(item) => (\n            <Show\n              when={typeof item === \"number\"}\n              fallback={\n                <li class=\"smwb-pagination__ellipsis\" aria-hidden=\"true\">\n                  …\n                </li>\n              }\n            >\n              <li>\n                <button\n                  type=\"button\"\n                  class={cn(\"smwb-pagination__item\", { \"smwb-pagination__item_selected\": item === local.page })}\n                  aria-current={item === local.page ? \"page\" : undefined}\n                  disabled={local.disabled}\n                  onClick={() => go(item as number)}\n                >\n                  {item}\n                </button>\n              </li>\n            </Show>\n          )}\n        </For>\n        {navButton(\"Next page\", local.page + 1, \"chevron_right\", local.hideNextButton)}\n        {navButton(\"Last page\", local.count, \"last_page\", !local.showLastButton)}\n      </ul>\n    </nav>\n  );\n}\n\nexport default Pagination;\n"],"names":["range","start","end","Array","from","length","Math","max","_","i","buildItems","count","page","siblingCount","boundaryCount","startPages","min","endPages","siblingsStart","siblingsEnd","Pagination","props","merged","mergeProps","size","variant","shape","color","disabled","showFirstButton","showLastButton","hidePrevButton","hideNextButton","local","rest","splitProps","navEl","go","target","onChange","onKeyDown","event","includes","key","buttons","querySelectorAll","current","indexOf","document","activeElement","next","preventDefault","focus","items","navButton","label","iconName","hidden","_$createComponent","Show","when","children","_el$","_tmpl$","_el$2","firstChild","$$click","_$setAttribute","_$insert","Icon","name","_$effect","_el$3","_tmpl$2","_el$4","_ref$","mergeRefs","ref","el","_$use","_$spread","_$mergeProps","cn","class","$$keydown","For","each","item","fallback","_tmpl$4","_el$5","_tmpl$3","_el$6","_p$","_v$","_v$2","undefined","_v$3","e","_$className","t","a","_$delegateEvents"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-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";
@@ -9,24 +9,24 @@ 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() {
@@ -36,57 +36,59 @@ function x(u) {
         },
         get children() {
           var t = M();
-          return s(t, m), t;
+          return c(t, m), t;
         }
       }), n(v, {
         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({
+  }, u), [e, s] = I(l, ["class", "variant", "menuItems", "activeItem", "defaultActiveItem", "onActiveItemChange", "collapsible", "collapsed", "defaultCollapsed", "onCollapsedChange", "collapseToggleAriaLabel", "ref"]), [m, d] = 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()
         });
       },
-      role: "menubar"
-    }), !1, !0), s(l, n(v, {
+      get role() {
+        return s.role ?? "menubar";
+      }
+    }), !1, !0), c(r, n(v, {
       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";
           },
@@ -99,7 +101,7 @@ function X(u) {
           t: void 0
         }), a;
       }
-    }), g), s(g, n(S, {
+    }), g), c(g, n(S, {
       get each() {
         return e.menuItems ?? [];
       },
@@ -126,7 +128,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":";;;;;;;;;;AA4CA,SAASA,EAAQC,GAA0C;AACzD,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,YAAY,QAAQ,SAAS,MAAM,QAAQ,SAAS,CAAC;AAC9F,MAAII;AAKJ,QAAMC,IAAOC,EAAS,MAAML,EAAMI,IAAI;AAMtC,SAAAE,EACGC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAET,EAAMU,MAAM;AAAA,IAAK;AAAA,IAAA,IAC5BC,OAAI;AAAA,aAAEX,EAAMW;AAAAA,IAAI;AAAA,IAChBC,MAAI;AAAA,IAAA,IAAA,QAAA;AAAA,aACGC,EAAG,sBAAsB,iBAAiBb,EAAMc,SAAS;AAAA,QAAEC,QAAQf,EAAMgB;AAAAA,MAAAA,CAAU;AAAA,IAAC;AAAA,IAC3FC,eAVkBA,CAACC,MAA8B;AACnDf,MAAAA,GAAegB,SAASD,CAAK;AAAA,IAC/B;AAAA,EAQID,GACIhB,GAAI;AAAA,IAAA,IAAAI,WAAA;AAAA,aAAA,CAAAC,EAEPc,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEjB,EAAAA;AAAAA,QAAM;AAAA,QAAA,IAAAC,WAAA;AAAA,cAAAiB,IAAAC,EAAAA;AAAAC,iBAAAA,EAAAF,GACmBlB,CAAI,GAAAkB;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAAhB,EAExCc,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAErB,EAAMyB;AAAAA,QAAK;AAAA,QAAA,IAAApB,WAAA;AAAA,cAAAqB,IAAAC,EAAAA;AAAAH,iBAAAA,EAAAE,GAAA,MACe1B,EAAMyB,KAAK,GAAAC;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAApB,EAEhDsB,GAAM;AAAA,QAACC,WAAYC,OAAa3B,IAAgB2B;AAAAA,MAAAA,CAAQ,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAG/D;AAEO,SAASC,EAAQhC,GAAkC;AACxD,QAAMiC,IAASC,EACb;AAAA,IACEnB,SAAS;AAAA,IACToB,mBAAmB;AAAA,IACnBC,aAAa;AAAA,IACbC,kBAAkB;AAAA,IAClBC,yBAAyB;AAAA,EAAA,GAE3BtC,CACF,GACM,CAACC,GAAOC,CAAI,IAAIC,EAAW8B,GAAQ,CACvC,SACA,WACA,aACA,cACA,qBACA,sBACA,eACA,aACA,oBACA,qBACA,2BACA,KAAK,CACN,GAEK,CAACM,GAAYC,CAAa,IAAIC,EAAuC;AAAA,IACzEC,OAAOA,MAAMzC,EAAMsC;AAAAA,IACnBI,cAAc1C,EAAMkC;AAAAA,IACpBS,UAAWC,CAAAA,MAAS;AAClB,MAAIA,MAAS,QAAM5C,EAAM6C,qBAAqBD,CAAI;AAAA,IACpD;AAAA,EAAA,CACD,GAEK,CAACE,GAAWC,CAAY,IAAIP,EAAiC;AAAA,IACjEC,OAAOA,MAAMzC,EAAM8C;AAAAA,IACnBJ,cAAc1C,EAAMoC;AAAAA,IACpBO,UAAWC,CAAAA,MAAS5C,EAAMgD,oBAAoBJ,CAAI;AAAA,EAAA,CACnD,GAGKK,IAAmBA,MAAuBjD,EAAMmC,eAAeW,MAAc,gBAAgB9C,EAAMc;AAEzG,UAAA,MAAA;AAAA,QAAAoC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAGSC,EAAUvD,EAAMwD,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAJ,CAAA,GAAAQ,EAAAR,GAAA1C,EADrBP,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDY,EAAG,gBAAgBb,EAAM2D,OAAO,QAAQV,EAAAA,CAAkB,IAAI;AAAA,UACnE,4BAA4BjD,EAAMmC;AAAAA,UAClC,0BAA0BnC,EAAMmC,eAAeW,EAAAA;AAAAA,QAAU,CAC1D;AAAA,MAAC;AAAA,MAAA,MACG;AAAA,IAAA,CAAS,GAAA,IAAA,EAAA,GAAAtB,EAAA0B,GAAA5C,EAEbc,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAErB,EAAMmC;AAAAA,MAAW;AAAA,MAAA,IAAA9B,WAAA;AAAA,YAAAuD,IAAAC,EAAAA,GAAAC,IAAAF,EAAAP;AAAAS,eAAAA,EAAAC,UAOd,MAAMhB,EAAa,CAACD,GAAW,GAACtB,EAAAsC,GAAAxD,EAExC0D,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEnB,EAAAA,IAAc,kBAAkB;AAAA,UAAc;AAAA,UAAEoB,MAAM;AAAA,QAAA,CAAE,CAAA,GAAAC,EAAAC,CAAAA,MAAA;AAAA,cAAAC,IAJxDrE,EAAMqC,yBAAuBiC,IAC1B,CAACxB,EAAAA;AAAWuB,iBAAAA,MAAAD,EAAAG,KAAAC,EAAAV,GAAA,cAAAM,EAAAG,IAAAF,CAAA,GAAAC,MAAAF,EAAAK,KAAAD,EAAAV,GAAA,iBAAAM,EAAAK,IAAAH,CAAA,GAAAF;AAAAA,QAAA,GAAA;AAAA,UAAAG,GAAAG;AAAAA,UAAAD,GAAAC;AAAAA,QAAAA,CAAA,GAAAd;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAR,CAAA,GAAA5B,EAAA4B,GAAA9C,EAQ9BqE,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE5E,EAAM6E,aAAa,CAAA;AAAA,MAAE;AAAA,MAAAxE,UAC7BA,CAACyE,GAAMC,MAAGzE,EACRR,GAAO;AAAA,QAAA,IACNY,KAAE;AAAA,iBAAEoE,EAAKpE;AAAAA,QAAE;AAAA,QAAA,IACXM,WAAQ;AAAA,iBAAEsB,EAAAA,MAAiByC,EAAAA;AAAAA,QAAK;AAAA,QAChCC,SAAU9D,CAAAA,MAAU;AAClBqB,UAAAA,EAAcwC,GAAK,GACf,OAAOD,EAAKE,WAAY,cAAYF,EAAKE,QAAQ9D,CAAK;AAAA,QAC5D;AAAA,QAAC,IACDd,OAAI;AAAA,iBAAE0E,EAAK1E;AAAAA,QAAI;AAAA,QAAA,IACfqB,QAAK;AAAA,iBAAEqD,EAAKrD;AAAAA,QAAK;AAAA,QAAA,IACjBd,OAAI;AAAA,iBAAEmE,EAAKnE;AAAAA,QAAI;AAAA,QAAA,IACfG,UAAO;AAAA,iBAAEmC,EAAAA;AAAAA,QAAkB;AAAA,MAAA,CAAA;AAAA,IAAA,CAE9B,CAAA,GAAAC;AAAAA,EAAA,GAAA;AAKX;AAEuB+B,EAAA,CAAA,OAAA,CAAA;"}
+{"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      // 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","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