@smwb/ui-solid 0.12.1 → 0.13.0

package/dist/headless/source/components/navigation/menu/menuFloating.jsx

@@ -1,9 +1,10 @@
-import { Show, createEffect, createSignal, mergeProps, onCleanup, splitProps } from "solid-js";
+import { Show, createEffect, createSignal, mergeProps, on, onCleanup, splitProps } from "solid-js";
 import { buildFloatingMiddleware, resolvePlacement } from "../../../utils/floating";
 import { createFloating } from "../../../primitives/createFloating";
 import { ClickAwayListener } from "../../clickAwayListener";
 import { MenuList } from "./menuList";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { mergeStyle } from "../../../primitives/mergeStyle";
 function buildMenuFloatingMiddleware(resolved, custom) {
   return buildFloatingMiddleware(resolved, custom);
 }
@@ -53,6 +54,29 @@ function MenuFloating(props) {
     if (raf !== void 0) cancelAnimationFrame(raf);
     if (timer !== void 0) clearTimeout(timer);
   });
+  createEffect(() => {
+    const anchor = local.anchorElement;
+    const onClose = local.onClose;
+    if (!local.isOpen || !onClose || !anchor) return;
+    const onAnchorKeyDown = (event) => {
+      if (event.key === "Escape" && !event.defaultPrevented) {
+        event.preventDefault();
+        onClose();
+      }
+    };
+    anchor.addEventListener("keydown", onAnchorKeyDown);
+    onCleanup(() => anchor.removeEventListener("keydown", onAnchorKeyDown));
+  });
+  createEffect(
+    on(
+      () => Boolean(local.isOpen),
+      (open) => {
+        if (!open && menuEl?.contains(document.activeElement)) {
+          local.anchorElement?.focus?.();
+        }
+      }
+    )
+  );
   const onAwayClick = (event) => {
     if (!local.isOpen || !local.onClose || !menuEl) return;
     const target = event.target;
@@ -61,9 +85,7 @@ function MenuFloating(props) {
     }
     local.onClose();
   };
-  const style = () => ({
-    ...floating.floatingStyles(),
-    ...typeof local.style === "object" && local.style ? local.style : {},
+  const style = () => mergeStyle(floating.floatingStyles(), local.style, {
     transition: `opacity ${FADE_MS}ms ease-in-out`,
     opacity: shown() ? 1 : 0
   });

package/dist/headless/source/components/navigation/menu/menuFloating.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuFloating.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport type { Middleware } from \"@floating-ui/dom\";\nimport { buildFloatingMiddleware, type Placement, resolvePlacement, type ResolvedPlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { MenuList } from \"./menuList\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport function buildMenuFloatingMiddleware(resolved: ResolvedPlacement, custom?: Middleware[]): Middleware[] {\n  return buildFloatingMiddleware(resolved, custom);\n}\n\nexport interface MenuFloatingProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  anchorElement?: Element | null | undefined;\n  isOpen?: boolean;\n  onClose?: () => void;\n  placement?: Placement;\n  middleware?: Middleware[] | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function MenuFloating(props: ParentProps<MenuFloatingProps>): JSX.Element {\n  const merged = mergeProps({ placement: \"bottom-start\" as Placement }, props);\n  const [local, rest] = splitProps(merged, [\n    \"anchorElement\",\n    \"isOpen\",\n    \"onClose\",\n    \"placement\",\n    \"middleware\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  let menuEl: HTMLElement | undefined;\n  const resolved = (): ResolvedPlacement => resolvePlacement(local.placement);\n  const floating = createFloating({\n    placement: () => resolved().placement,\n    middleware: () => buildMenuFloatingMiddleware(resolved(), local.middleware),\n  });\n\n  createEffect(() => {\n    floating.setReference(local.anchorElement ?? null);\n  });\n\n  // mountOnEnter + unmountOnExit fade lifecycle (replaces RTG Transition).\n  const [mounted, setMounted] = createSignal(Boolean(local.isOpen));\n  const [shown, setShown] = createSignal(false);\n  let raf: number | undefined;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n\n  createEffect(() => {\n    const open = Boolean(local.isOpen);\n    if (open) {\n      if (timer !== undefined) {\n        clearTimeout(timer);\n        timer = undefined;\n      }\n      setMounted(true);\n      raf = requestAnimationFrame(() => setShown(true));\n    } else {\n      setShown(false);\n      if (mounted()) {\n        timer = setTimeout(() => setMounted(false), FADE_MS);\n      }\n    }\n  });\n  onCleanup(() => {\n    if (raf !== undefined) cancelAnimationFrame(raf);\n    if (timer !== undefined) clearTimeout(timer);\n  });\n\n  const onAwayClick = (event: MouseEvent | TouchEvent): void => {\n    if (!local.isOpen || !local.onClose || !menuEl) return;\n    const target = event.target as HTMLElement;\n    if (menuEl.contains(target) || (local.anchorElement as HTMLElement | null)?.contains(target)) {\n      return;\n    }\n    local.onClose();\n  };\n\n  const style = (): JSX.CSSProperties => ({\n    ...floating.floatingStyles(),\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n    transition: `opacity ${FADE_MS}ms ease-in-out`,\n    opacity: shown() ? 1 : 0,\n  });\n\n  return (\n    <Show when={mounted()}>\n      <ClickAwayListener onClickAway={onAwayClick}>\n        <MenuList {...rest} ref={mergeRefs(local.ref, floating.setFloating, (el) => (menuEl = el))} style={style()}>\n          {local.children}\n        </MenuList>\n      </ClickAwayListener>\n    </Show>\n  );\n}\n\nexport default MenuFloating;\n"],"mappings":"AAAA,SAAqC,MAAM,cAAc,cAAc,YAAY,WAAW,kBAAkB;AAEhH,SAAS,yBAAyC,wBAAgD;AAClG,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;AAE7B,SAAS,4BAA4B,UAA6B,QAAqC;AAC5G,SAAO,wBAAwB,UAAU,MAAM;AACjD;AAWA,MAAM,UAAU;AAET,SAAS,aAAa,OAAoD;AAC/E,QAAM,SAAS,WAAW,EAAE,WAAW,eAA4B,GAAG,KAAK;AAC3E,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AACJ,QAAM,WAAW,MAAyB,iBAAiB,MAAM,SAAS;AAC1E,QAAM,WAAW,eAAe;AAAA,IAC9B,WAAW,MAAM,SAAS,EAAE;AAAA,IAC5B,YAAY,MAAM,4BAA4B,SAAS,GAAG,MAAM,UAAU;AAAA,EAC5E,CAAC;AAED,eAAa,MAAM;AACjB,aAAS,aAAa,MAAM,iBAAiB,IAAI;AAAA,EACnD,CAAC;AAGD,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,QAAQ,MAAM,MAAM,CAAC;AAChE,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAa,KAAK;AAC5C,MAAI;AACJ,MAAI;AAEJ,eAAa,MAAM;AACjB,UAAM,OAAO,QAAQ,MAAM,MAAM;AACjC,QAAI,MAAM;AACR,UAAI,UAAU,QAAW;AACvB,qBAAa,KAAK;AAClB,gBAAQ;AAAA,MACV;AACA,iBAAW,IAAI;AACf,YAAM,sBAAsB,MAAM,SAAS,IAAI,CAAC;AAAA,IAClD,OAAO;AACL,eAAS,KAAK;AACd,UAAI,QAAQ,GAAG;AACb,gBAAQ,WAAW,MAAM,WAAW,KAAK,GAAG,OAAO;AAAA,MACrD;AAAA,IACF;AAAA,EACF,CAAC;AACD,YAAU,MAAM;AACd,QAAI,QAAQ,OAAW,sBAAqB,GAAG;AAC/C,QAAI,UAAU,OAAW,cAAa,KAAK;AAAA,EAC7C,CAAC;AAED,QAAM,cAAc,CAAC,UAAyC;AAC5D,QAAI,CAAC,MAAM,UAAU,CAAC,MAAM,WAAW,CAAC,OAAQ;AAChD,UAAM,SAAS,MAAM;AACrB,QAAI,OAAO,SAAS,MAAM,KAAM,MAAM,eAAsC,SAAS,MAAM,GAAG;AAC5F;AAAA,IACF;AACA,UAAM,QAAQ;AAAA,EAChB;AAEA,QAAM,QAAQ,OAA0B;AAAA,IACtC,GAAG,SAAS,eAAe;AAAA,IAC3B,GAAI,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ,CAAC;AAAA,IACpE,YAAY,WAAW,OAAO;AAAA,IAC9B,SAAS,MAAM,IAAI,IAAI;AAAA,EACzB;AAEA,SACE,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,MACrB,CAAC,kBAAkB,aAAa,aAAa;AAAA,QAC3C,CAAC,aAAa,MAAM,KAAK,UAAU,MAAM,KAAK,SAAS,aAAa,CAAC,OAAQ,SAAS,EAAG,GAAG,OAAO,MAAM,GAAG;AAAA,WACzG,MAAM,SAAS;AAAA,QAClB,EAFC,SAEU;AAAA,MACb,EAJC,kBAImB;AAAA,IACtB,EANC;AAQL;AAEA,IAAO,uBAAQ;","names":[],"file":"menuFloating.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuFloating.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, on, onCleanup, splitProps } from \"solid-js\";\nimport type { Middleware } from \"@floating-ui/dom\";\nimport { buildFloatingMiddleware, type Placement, resolvePlacement, type ResolvedPlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { MenuList } from \"./menuList\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport function buildMenuFloatingMiddleware(resolved: ResolvedPlacement, custom?: Middleware[]): Middleware[] {\n  return buildFloatingMiddleware(resolved, custom);\n}\n\nexport interface MenuFloatingProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  anchorElement?: Element | null | undefined;\n  isOpen?: boolean;\n  onClose?: () => void;\n  placement?: Placement;\n  middleware?: Middleware[] | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function MenuFloating(props: ParentProps<MenuFloatingProps>): JSX.Element {\n  const merged = mergeProps({ placement: \"bottom-start\" as Placement }, props);\n  const [local, rest] = splitProps(merged, [\n    \"anchorElement\",\n    \"isOpen\",\n    \"onClose\",\n    \"placement\",\n    \"middleware\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  let menuEl: HTMLElement | undefined;\n  const resolved = (): ResolvedPlacement => resolvePlacement(local.placement);\n  const floating = createFloating({\n    placement: () => resolved().placement,\n    middleware: () => buildMenuFloatingMiddleware(resolved(), local.middleware),\n  });\n\n  createEffect(() => {\n    floating.setReference(local.anchorElement ?? null);\n  });\n\n  // mountOnEnter + unmountOnExit fade lifecycle (replaces RTG Transition).\n  const [mounted, setMounted] = createSignal(Boolean(local.isOpen));\n  const [shown, setShown] = createSignal(false);\n  let raf: number | undefined;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n\n  createEffect(() => {\n    const open = Boolean(local.isOpen);\n    if (open) {\n      if (timer !== undefined) {\n        clearTimeout(timer);\n        timer = undefined;\n      }\n      setMounted(true);\n      raf = requestAnimationFrame(() => setShown(true));\n    } else {\n      setShown(false);\n      if (mounted()) {\n        timer = setTimeout(() => setMounted(false), FADE_MS);\n      }\n    }\n  });\n  onCleanup(() => {\n    if (raf !== undefined) cancelAnimationFrame(raf);\n    if (timer !== undefined) clearTimeout(timer);\n  });\n\n  // While the menu is open, Escape on its anchor (focus left on the button that opened\n  // it, or on a submenu's row) closes it, marked as handled like an Escape in the list.\n  createEffect(() => {\n    const anchor = local.anchorElement;\n    const onClose = local.onClose;\n    if (!local.isOpen || !onClose || !anchor) return;\n    const onAnchorKeyDown = (event: Event): void => {\n      if ((event as KeyboardEvent).key === \"Escape\" && !event.defaultPrevented) {\n        event.preventDefault();\n        onClose();\n      }\n    };\n    anchor.addEventListener(\"keydown\", onAnchorKeyDown);\n    onCleanup(() => anchor.removeEventListener(\"keydown\", onAnchorKeyDown));\n  });\n\n  // A menu that closes while it holds focus (on Escape, on a chosen item) hands focus\n  // back to its anchor, the button or submenu row it opened from. Otherwise focus falls\n  // to <body> when the items unmount, out of a FloatingWindow or Modal around the menu,\n  // and the next Escape does not reach them.\n  createEffect(\n    on(\n      () => Boolean(local.isOpen),\n      (open) => {\n        if (!open && menuEl?.contains(document.activeElement)) {\n          (local.anchorElement as HTMLElement | null | undefined)?.focus?.();\n        }\n      }\n    )\n  );\n\n  const onAwayClick = (event: MouseEvent | TouchEvent): void => {\n    if (!local.isOpen || !local.onClose || !menuEl) return;\n    const target = event.target as HTMLElement;\n    if (menuEl.contains(target) || (local.anchorElement as HTMLElement | null)?.contains(target)) {\n      return;\n    }\n    local.onClose();\n  };\n\n  // The caller's style over the position, the fade over the caller's style.\n  const style = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle(floating.floatingStyles(), local.style, {\n      transition: `opacity ${FADE_MS}ms ease-in-out`,\n      opacity: shown() ? 1 : 0,\n    });\n\n  return (\n    <Show when={mounted()}>\n      <ClickAwayListener onClickAway={onAwayClick}>\n        <MenuList {...rest} ref={mergeRefs(local.ref, floating.setFloating, (el) => (menuEl = el))} style={style()}>\n          {local.children}\n        </MenuList>\n      </ClickAwayListener>\n    </Show>\n  );\n}\n\nexport default MenuFloating;\n"],"mappings":"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","names":[],"file":"menuFloating.jsx"}

package/dist/headless/source/components/navigation/menu/menuItem.jsx

@@ -13,14 +13,27 @@ function MenuItem(props) {
     "disabled",
     "selected",
     "onClick",
+    "onKeyDown",
     "href",
     "linkElement",
     "linkProps",
     "value",
     "optionRenderer",
-    "ref"
+    "ref",
+    // The item sets these on its root too; its own handlers call the caller's.
+    "onMouseDown",
+    "onPointerDown"
   ]);
   let rippleActions;
+  const onKeyDown = (event) => {
+    callHandler(local.onKeyDown, event);
+    if (event.defaultPrevented || local.disabled || event.target !== event.currentTarget) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const link = local.href ? event.currentTarget.firstElementChild : null;
+      (link ?? event.currentTarget).click();
+    }
+  };
   const onClick = (event) => {
     if (local.disabled) {
       if (local.href) event.preventDefault();
@@ -28,7 +41,11 @@ function MenuItem(props) {
     }
     callHandler(local.onClick, event);
   };
+  const onMouseDown = (event) => {
+    if (!local.disabled) callHandler(local.onMouseDown, event);
+  };
   const onPointerDown = (event) => {
+    callHandler(local.onPointerDown, event);
     if (!local.disabled) rippleActions?.onRipple(event);
   };
   const classes = () => cn("smwb-menu__item", local.class, {
@@ -41,10 +58,13 @@ function MenuItem(props) {
     {...rest}
     role="menuitem"
     ref={mergeRefs(local.ref)}
+    aria-disabled={local.disabled || void 0}
     class={classes()}
-    tabindex={local.disabled ? void 0 : 0}
+    tabindex={rest.tabindex ?? (local.disabled ? void 0 : 0)}
     onClick={onClick}
+    onKeyDown={onKeyDown}
     data-value={local.value}
+    onMouseDown={onMouseDown}
     onPointerDown={onPointerDown}
   >
         <Show

package/dist/headless/source/components/navigation/menu/menuItem.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuItem.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { useMenuContext } from \"./menuContext\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface MenuItemProps extends JSX.HTMLAttributes<HTMLLIElement> {\n  disabled?: boolean | undefined;\n  selected?: boolean | undefined;\n  href?: string | undefined;\n  linkElement?: string;\n  linkProps?: JSX.AnchorHTMLAttributes<HTMLAnchorElement>;\n  value?: unknown;\n  optionRenderer?: ((args: MenuItemProps) => JSX.Element) | undefined;\n  onClick?: JSX.EventHandlerUnion<HTMLLIElement, MouseEvent>;\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport function MenuItem(props: ParentProps<MenuItemProps>): JSX.Element {\n  const ctx = useMenuContext();\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"disabled\",\n    \"selected\",\n    \"onClick\",\n    \"href\",\n    \"linkElement\",\n    \"linkProps\",\n    \"value\",\n    \"optionRenderer\",\n    \"ref\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onClick: JSX.EventHandler<HTMLLIElement, MouseEvent> = (event) => {\n    if (local.disabled) {\n      if (local.href) event.preventDefault();\n      return;\n    }\n    callHandler(local.onClick, event);\n  };\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) rippleActions?.onRipple(event);\n  };\n\n  const classes = (): string =>\n    cn(\"smwb-menu__item\", local.class, {\n      \"smwb-menu__item--dense\": ctx.dense,\n      \"smwb-menu__item--disabled\": local.disabled,\n      \"smwb-menu__item--selected\": local.selected,\n    });\n\n  return (\n    <Show when={!local.optionRenderer} fallback={local.optionRenderer?.(props)}>\n      <li\n        {...rest}\n        role=\"menuitem\"\n        ref={mergeRefs(local.ref)}\n        class={classes()}\n        tabindex={local.disabled ? undefined : 0}\n        onClick={onClick}\n        data-value={local.value as string | number | undefined}\n        onPointerDown={onPointerDown}\n      >\n        <Show\n          when={local.href}\n          fallback={<span class=\"smwb-menu__item-inner\">{local.children}</span>}\n        >\n          <Dynamic component={local.linkElement ?? \"a\"} class=\"smwb-menu__item-inner\" href={local.href} {...(local.linkProps ?? {})}>\n            {local.children}\n            <span class=\"smwb-menu__item__helper-text\" />\n          </Dynamic>\n        </Show>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} />\n      </li>\n    </Show>\n  );\n}\n\nexport default MenuItem;\n"],"mappings":"AAAA,SAAqC,MAAM,kBAAkB;AAC7D,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,sBAAsB;AAC/B,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAcrB,SAAS,SAAS,OAAgD;AACvE,QAAM,MAAM,eAAe;AAC3B,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AAEJ,QAAM,UAAuD,CAAC,UAAU;AACtE,QAAI,MAAM,UAAU;AAClB,UAAI,MAAM,KAAM,OAAM,eAAe;AACrC;AAAA,IACF;AACA,gBAAY,MAAM,SAAS,KAAK;AAAA,EAClC;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,QAAM,UAAU,MACd,GAAG,mBAAmB,MAAM,OAAO;AAAA,IACjC,0BAA0B,IAAI;AAAA,IAC9B,6BAA6B,MAAM;AAAA,IACnC,6BAA6B,MAAM;AAAA,EACrC,CAAC;AAEH,SACE,CAAC,KAAK,MAAM,CAAC,MAAM,gBAAgB,UAAU,MAAM,iBAAiB,KAAK,GAAG;AAAA,MAC1E,CAAC;AAAA,QACK;AAAA,IACJ,KAAK;AAAA,IACL,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,QAAQ;AAAA,IACf,UAAU,MAAM,WAAW,SAAY;AAAA,IACvC,SAAS;AAAA,IACT,YAAY,MAAM;AAAA,IAClB,eAAe;AAAA,GAChB;AAAA,QACC,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,UAAU,CAAC,KAAK,MAAM,yBAAyB,MAAM,SAAS,EAAnD;AAAA,GACZ;AAAA,UACC,CAAC,QAAQ,WAAW,MAAM,eAAe,KAAK,MAAM,wBAAwB,MAAM,MAAM,UAAW,MAAM,aAAa,CAAC,GAAI;AAAA,aACxH,MAAM,SAAS;AAAA,YAChB,CAAC,KAAK,MAAM,+BAA+B,EAAE;AAAA,UAC/C,EAHC,QAGS;AAAA,QACZ,EARC,KAQM;AAAA,QACP,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,EAAE;AAAA,MAC/D,EApBC,GAoBI;AAAA,IACP,EAtBC;AAwBL;AAEA,IAAO,mBAAQ;","names":[],"file":"menuItem.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuItem.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { useMenuContext } from \"./menuContext\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface MenuItemProps extends JSX.HTMLAttributes<HTMLLIElement> {\n  /**\n   * Greys the item out and marks it `aria-disabled`. It takes no focus, the arrow keys\n   * skip it, and neither a click nor Enter or Space chooses it.\n   */\n  disabled?: boolean | undefined;\n  selected?: boolean | undefined;\n  href?: string | undefined;\n  linkElement?: string;\n  linkProps?: JSX.AnchorHTMLAttributes<HTMLAnchorElement>;\n  value?: unknown;\n  optionRenderer?: ((args: MenuItemProps) => JSX.Element) | undefined;\n  onClick?: JSX.EventHandlerUnion<HTMLLIElement, MouseEvent>;\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport function MenuItem(props: ParentProps<MenuItemProps>): JSX.Element {\n  const ctx = useMenuContext();\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"disabled\",\n    \"selected\",\n    \"onClick\",\n    \"onKeyDown\",\n    \"href\",\n    \"linkElement\",\n    \"linkProps\",\n    \"value\",\n    \"optionRenderer\",\n    \"ref\",\n    // The item sets these on its root too; its own handlers call the caller's.\n    \"onMouseDown\",\n    \"onPointerDown\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  // Enter or Space chooses the focused item, as it would press a button: through a click,\n  // so the item's onClick and whatever listens for its clicks (a submenu closing the menu)\n  // run as for a pointer. An item with a link clicks the link. A key pressed on something\n  // inside the item, such as the link itself, is that element's own.\n  const onKeyDown: JSX.EventHandler<HTMLLIElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (event.defaultPrevented || local.disabled || event.target !== event.currentTarget) return;\n    if (event.key === \"Enter\" || event.key === \" \") {\n      // Handled: Space doesn't scroll, and Enter doesn't press the button that takes\n      // focus when the menu closes.\n      event.preventDefault();\n      const link = local.href ? event.currentTarget.firstElementChild : null;\n      ((link as HTMLElement | null) ?? event.currentTarget).click();\n    }\n  };\n\n  const onClick: JSX.EventHandler<HTMLLIElement, MouseEvent> = (event) => {\n    if (local.disabled) {\n      if (local.href) event.preventDefault();\n      return;\n    }\n    callHandler(local.onClick, event);\n  };\n\n  // Like a click, a press on a disabled item reaches no handler of the caller's.\n  const onMouseDown: JSX.EventHandler<HTMLLIElement, MouseEvent> = (event) => {\n    if (!local.disabled) callHandler(local.onMouseDown, event);\n  };\n\n  const onPointerDown: JSX.EventHandler<HTMLLIElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    if (!local.disabled) rippleActions?.onRipple(event);\n  };\n\n  const classes = (): string =>\n    cn(\"smwb-menu__item\", local.class, {\n      \"smwb-menu__item--dense\": ctx.dense,\n      \"smwb-menu__item--disabled\": local.disabled,\n      \"smwb-menu__item--selected\": local.selected,\n    });\n\n  return (\n    <Show when={!local.optionRenderer} fallback={local.optionRenderer?.(props)}>\n      <li\n        {...rest}\n        // A menu item's role wins over the caller's, and so does its data-value\n        // where it has a value. Its tabindex is a default: the caller's wins.\n        role=\"menuitem\"\n        ref={mergeRefs(local.ref)}\n        aria-disabled={local.disabled || undefined}\n        class={classes()}\n        tabindex={rest.tabindex ?? (local.disabled ? undefined : 0)}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        data-value={local.value as string | number | undefined}\n        onMouseDown={onMouseDown}\n        onPointerDown={onPointerDown}\n      >\n        <Show\n          when={local.href}\n          fallback={<span class=\"smwb-menu__item-inner\">{local.children}</span>}\n        >\n          <Dynamic component={local.linkElement ?? \"a\"} class=\"smwb-menu__item-inner\" href={local.href} {...(local.linkProps ?? {})}>\n            {local.children}\n            <span class=\"smwb-menu__item__helper-text\" />\n          </Dynamic>\n        </Show>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} />\n      </li>\n    </Show>\n  );\n}\n\nexport default MenuItem;\n"],"mappings":"AAAA,SAAqC,MAAM,kBAAkB;AAC7D,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,sBAAsB;AAC/B,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAkBrB,SAAS,SAAS,OAAgD;AACvE,QAAM,MAAM,eAAe;AAC3B,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AAMJ,QAAM,YAA4D,CAAC,UAAU;AAC3E,gBAAY,MAAM,WAAW,KAAK;AAClC,QAAI,MAAM,oBAAoB,MAAM,YAAY,MAAM,WAAW,MAAM,cAAe;AACtF,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAG9C,YAAM,eAAe;AACrB,YAAM,OAAO,MAAM,OAAO,MAAM,cAAc,oBAAoB;AAClE,OAAE,QAA+B,MAAM,eAAe,MAAM;AAAA,IAC9D;AAAA,EACF;AAEA,QAAM,UAAuD,CAAC,UAAU;AACtE,QAAI,MAAM,UAAU;AAClB,UAAI,MAAM,KAAM,OAAM,eAAe;AACrC;AAAA,IACF;AACA,gBAAY,MAAM,SAAS,KAAK;AAAA,EAClC;AAGA,QAAM,cAA2D,CAAC,UAAU;AAC1E,QAAI,CAAC,MAAM,SAAU,aAAY,MAAM,aAAa,KAAK;AAAA,EAC3D;AAEA,QAAM,gBAA+D,CAAC,UAAU;AAC9E,gBAAY,MAAM,eAAe,KAAK;AACtC,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,QAAM,UAAU,MACd,GAAG,mBAAmB,MAAM,OAAO;AAAA,IACjC,0BAA0B,IAAI;AAAA,IAC9B,6BAA6B,MAAM;AAAA,IACnC,6BAA6B,MAAM;AAAA,EACrC,CAAC;AAEH,SACE,CAAC,KAAK,MAAM,CAAC,MAAM,gBAAgB,UAAU,MAAM,iBAAiB,KAAK,GAAG;AAAA,MAC1E,CAAC;AAAA,QACK;AAAA,IAGJ,KAAK;AAAA,IACL,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,eAAe,MAAM,YAAY;AAAA,IACjC,OAAO,QAAQ;AAAA,IACf,UAAU,KAAK,aAAa,MAAM,WAAW,SAAY;AAAA,IACzD,SAAS;AAAA,IACT,WAAW;AAAA,IACX,YAAY,MAAM;AAAA,IAClB,aAAa;AAAA,IACb,eAAe;AAAA,GAChB;AAAA,QACC,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,UAAU,CAAC,KAAK,MAAM,yBAAyB,MAAM,SAAS,EAAnD;AAAA,GACZ;AAAA,UACC,CAAC,QAAQ,WAAW,MAAM,eAAe,KAAK,MAAM,wBAAwB,MAAM,MAAM,UAAW,MAAM,aAAa,CAAC,GAAI;AAAA,aACxH,MAAM,SAAS;AAAA,YAChB,CAAC,KAAK,MAAM,+BAA+B,EAAE;AAAA,UAC/C,EAHC,QAGS;AAAA,QACZ,EARC,KAQM;AAAA,QACP,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,EAAE;AAAA,MAC/D,EAzBC,GAyBI;AAAA,IACP,EA3BC;AA6BL;AAEA,IAAO,mBAAQ;","names":[],"file":"menuItem.jsx"}

package/dist/headless/source/components/navigation/menu/menuList.jsx

@@ -2,12 +2,25 @@ import { splitProps } from "solid-js";
 import cn from "clsx";
 import { useMenuContext } from "./menuContext";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+const ENABLED_ITEM_SELECTOR = '[role="menuitem"]:not([aria-disabled="true"])';
 function MenuList(props) {
   const ctx = useMenuContext();
-  const [local, rest] = splitProps(props, ["children", "class", "ref"]);
+  const [local, rest] = splitProps(props, ["children", "class", "ref", "listRole"]);
   const onKeyDown = (event) => {
-    const items = Array.from(
-      event.currentTarget.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')
+    if (event.defaultPrevented) return;
+    if (event.key === "Escape") {
+      if (ctx.variant === "floating") event.preventDefault();
+      ctx.onClose();
+      return;
+    }
+    if (event.key === "ArrowLeft" && ctx.submenu) {
+      event.preventDefault();
+      ctx.onClose();
+      return;
+    }
+    const list = event.currentTarget;
+    const items = Array.from(list.querySelectorAll(ENABLED_ITEM_SELECTOR)).filter(
+      (item) => item.closest('[role="menu"]') === list
     );
     if (items.length === 0) return;
     const currentIndex = items.indexOf(document.activeElement);
@@ -23,15 +36,13 @@ function MenuList(props) {
     } else if (event.key === "End") {
       event.preventDefault();
       items[items.length - 1]?.focus();
-    } else if (event.key === "Escape") {
-      ctx.onClose();
     }
   };
   return <div {...rest} ref={mergeRefs(local.ref)} class={cn("smwb-menu", local.class, `smwb-menu--${ctx.variant}`)}>
       <ul
     class={cn("smwb-menu__list", `smwb-menu__list--${ctx.variant}`)}
-    role="menu"
-    aria-orientation="vertical"
+    role={local.listRole ?? "menu"}
+    aria-orientation={(local.listRole ?? "menu") === "menu" ? "vertical" : void 0}
     onKeyDown={onKeyDown}
   >
         {local.children}
@@ -40,6 +51,7 @@ function MenuList(props) {
 }
 var menuList_default = MenuList;
 export {
+  ENABLED_ITEM_SELECTOR,
   MenuList,
   menuList_default as default
 };

package/dist/headless/source/components/navigation/menu/menuList.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuList.tsx"],"sourcesContent":["import { type JSX, type ParentProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { useMenuContext } from \"./menuContext\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface MenuListProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function MenuList(props: ParentProps<MenuListProps>): JSX.Element {\n  const ctx = useMenuContext();\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"ref\"]);\n\n  const onKeyDown: JSX.EventHandler<HTMLUListElement, KeyboardEvent> = (event) => {\n    const items = Array.from(\n      event.currentTarget.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([aria-disabled=\"true\"])')\n    );\n    if (items.length === 0) return;\n    const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n\n    if (event.key === \"ArrowDown\") {\n      event.preventDefault();\n      items[(currentIndex + 1 + items.length) % items.length]?.focus();\n    } else if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      items[(currentIndex - 1 + items.length) % items.length]?.focus();\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      items[0]?.focus();\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      items[items.length - 1]?.focus();\n    } else if (event.key === \"Escape\") {\n      ctx.onClose();\n    }\n  };\n\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-menu\", local.class, `smwb-menu--${ctx.variant}`)}>\n      <ul\n        class={cn(\"smwb-menu__list\", `smwb-menu__list--${ctx.variant}`)}\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        onKeyDown={onKeyDown}\n      >\n        {local.children}\n      </ul>\n    </div>\n  );\n}\n\nexport default MenuList;\n"],"mappings":"AAAA,SAAqC,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,sBAAsB;AAC/B,SAAS,iBAA2B;AAM7B,SAAS,SAAS,OAAgD;AACvE,QAAM,MAAM,eAAe;AAC3B,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,KAAK,CAAC;AAEpE,QAAM,YAA+D,CAAC,UAAU;AAC9E,UAAM,QAAQ,MAAM;AAAA,MAClB,MAAM,cAAc,iBAA8B,+CAA+C;AAAA,IACnG;AACA,QAAI,MAAM,WAAW,EAAG;AACxB,UAAM,eAAe,MAAM,QAAQ,SAAS,aAA4B;AAExE,QAAI,MAAM,QAAQ,aAAa;AAC7B,YAAM,eAAe;AACrB,aAAO,eAAe,IAAI,MAAM,UAAU,MAAM,MAAM,GAAG,MAAM;AAAA,IACjE,WAAW,MAAM,QAAQ,WAAW;AAClC,YAAM,eAAe;AACrB,aAAO,eAAe,IAAI,MAAM,UAAU,MAAM,MAAM,GAAG,MAAM;AAAA,IACjE,WAAW,MAAM,QAAQ,QAAQ;AAC/B,YAAM,eAAe;AACrB,YAAM,CAAC,GAAG,MAAM;AAAA,IAClB,WAAW,MAAM,QAAQ,OAAO;AAC9B,YAAM,eAAe;AACrB,YAAM,MAAM,SAAS,CAAC,GAAG,MAAM;AAAA,IACjC,WAAW,MAAM,QAAQ,UAAU;AACjC,UAAI,QAAQ;AAAA,IACd;AAAA,EACF;AAEA,SACE,CAAC,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,aAAa,MAAM,OAAO,cAAc,IAAI,OAAO,EAAE,GAAG;AAAA,MAC1G,CAAC;AAAA,IACC,OAAO,GAAG,mBAAmB,oBAAoB,IAAI,OAAO,EAAE;AAAA,IAC9D,KAAK;AAAA,IACL,iBAAiB;AAAA,IACjB,WAAW;AAAA,GACZ;AAAA,SACE,MAAM,SAAS;AAAA,MAClB,EAPC,GAOI;AAAA,IACP,EATC;AAWL;AAEA,IAAO,mBAAQ;","names":[],"file":"menuList.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuList.tsx"],"sourcesContent":["import { type JSX, type ParentProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { useMenuContext } from \"./menuContext\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\n/** The items the arrow keys move between; a disabled item is marked aria-disabled. */\nexport const ENABLED_ITEM_SELECTOR = '[role=\"menuitem\"]:not([aria-disabled=\"true\"])';\n\nexport interface MenuListProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n  /** Role of the inner list, `menu` by default (see `MenuProps`). */\n  listRole?: JSX.AriaAttributes[\"role\"] | undefined;\n}\n\nexport function MenuList(props: ParentProps<MenuListProps>): JSX.Element {\n  const ctx = useMenuContext();\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"ref\", \"listRole\"]);\n\n  const onKeyDown: JSX.EventHandler<HTMLUListElement, KeyboardEvent> = (event) => {\n    // Handled inside already, e.g. by a submenu's own list: not this list's key.\n    if (event.defaultPrevented) return;\n    if (event.key === \"Escape\") {\n      // A floating menu closes on it and marks it handled, so what is around the menu\n      // (a parent menu, FloatingWindow, fullscreen ExpansionPanel, Modal, Sheet) leaves\n      // this press alone. A static menu stays in place and lets it through.\n      if (ctx.variant === \"floating\") event.preventDefault();\n      ctx.onClose();\n      return;\n    }\n    if (event.key === \"ArrowLeft\" && ctx.submenu) {\n      // A submenu closes and gives focus back to its row (MenuFloating does that).\n      event.preventDefault();\n      ctx.onClose();\n      return;\n    }\n    // This list's own items: an open submenu drawn inside it keeps its items to itself.\n    const list = event.currentTarget;\n    const items = Array.from(list.querySelectorAll<HTMLElement>(ENABLED_ITEM_SELECTOR)).filter(\n      (item) => item.closest('[role=\"menu\"]') === list\n    );\n    if (items.length === 0) return;\n    const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n\n    if (event.key === \"ArrowDown\") {\n      event.preventDefault();\n      items[(currentIndex + 1 + items.length) % items.length]?.focus();\n    } else if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      items[(currentIndex - 1 + items.length) % items.length]?.focus();\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      items[0]?.focus();\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      items[items.length - 1]?.focus();\n    }\n  };\n\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-menu\", local.class, `smwb-menu--${ctx.variant}`)}>\n      <ul\n        class={cn(\"smwb-menu__list\", `smwb-menu__list--${ctx.variant}`)}\n        role={local.listRole ?? \"menu\"}\n        // ARIA allows an orientation on a menu, not on a presentation list.\n        aria-orientation={(local.listRole ?? \"menu\") === \"menu\" ? \"vertical\" : undefined}\n        onKeyDown={onKeyDown}\n      >\n        {local.children}\n      </ul>\n    </div>\n  );\n}\n\nexport default MenuList;\n"],"mappings":"AAAA,SAAqC,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,sBAAsB;AAC/B,SAAS,iBAA2B;AAG7B,MAAM,wBAAwB;AAQ9B,SAAS,SAAS,OAAgD;AACvE,QAAM,MAAM,eAAe;AAC3B,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,OAAO,UAAU,CAAC;AAEhF,QAAM,YAA+D,CAAC,UAAU;AAE9E,QAAI,MAAM,iBAAkB;AAC5B,QAAI,MAAM,QAAQ,UAAU;AAI1B,UAAI,IAAI,YAAY,WAAY,OAAM,eAAe;AACrD,UAAI,QAAQ;AACZ;AAAA,IACF;AACA,QAAI,MAAM,QAAQ,eAAe,IAAI,SAAS;AAE5C,YAAM,eAAe;AACrB,UAAI,QAAQ;AACZ;AAAA,IACF;AAEA,UAAM,OAAO,MAAM;AACnB,UAAM,QAAQ,MAAM,KAAK,KAAK,iBAA8B,qBAAqB,CAAC,EAAE;AAAA,MAClF,CAAC,SAAS,KAAK,QAAQ,eAAe,MAAM;AAAA,IAC9C;AACA,QAAI,MAAM,WAAW,EAAG;AACxB,UAAM,eAAe,MAAM,QAAQ,SAAS,aAA4B;AAExE,QAAI,MAAM,QAAQ,aAAa;AAC7B,YAAM,eAAe;AACrB,aAAO,eAAe,IAAI,MAAM,UAAU,MAAM,MAAM,GAAG,MAAM;AAAA,IACjE,WAAW,MAAM,QAAQ,WAAW;AAClC,YAAM,eAAe;AACrB,aAAO,eAAe,IAAI,MAAM,UAAU,MAAM,MAAM,GAAG,MAAM;AAAA,IACjE,WAAW,MAAM,QAAQ,QAAQ;AAC/B,YAAM,eAAe;AACrB,YAAM,CAAC,GAAG,MAAM;AAAA,IAClB,WAAW,MAAM,QAAQ,OAAO;AAC9B,YAAM,eAAe;AACrB,YAAM,MAAM,SAAS,CAAC,GAAG,MAAM;AAAA,IACjC;AAAA,EACF;AAEA,SACE,CAAC,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,aAAa,MAAM,OAAO,cAAc,IAAI,OAAO,EAAE,GAAG;AAAA,MAC1G,CAAC;AAAA,IACC,OAAO,GAAG,mBAAmB,oBAAoB,IAAI,OAAO,EAAE;AAAA,IAC9D,MAAM,MAAM,YAAY;AAAA,IAExB,mBAAmB,MAAM,YAAY,YAAY,SAAS,aAAa;AAAA,IACvE,WAAW;AAAA,GACZ;AAAA,SACE,MAAM,SAAS;AAAA,MAClB,EARC,GAQI;AAAA,IACP,EAVC;AAYL;AAEA,IAAO,mBAAQ;","names":[],"file":"menuList.jsx"}

package/dist/headless/source/components/navigation/menu/menuSubmenu.jsx

@@ -2,12 +2,24 @@ import { createSignal, splitProps } from "solid-js";
 import { offset } from "@floating-ui/dom";
 import cn from "clsx";
 import { MenuContext, useMenuContext } from "./menuContext";
+import { ENABLED_ITEM_SELECTOR } from "./menuList";
 import { MenuFloating } from "./menuFloating";
+import { Ripple } from "../../base/ripple";
+import { callHandler } from "../../../primitives/callHandler";
 function MenuSubmenu(props) {
   const parentCtx = useMenuContext();
-  const [local] = splitProps(props, ["placement", "onClose", "toggleElement", "children", "openOnHover", "class"]);
+  const [local, rest] = splitProps(props, [
+    "placement",
+    "onClose",
+    "toggleElement",
+    "children",
+    "openOnHover",
+    "onClick",
+    "ref"
+  ]);
   const [isOpen, setIsOpen] = createSignal(false);
   const [anchor, setAnchor] = createSignal(null);
+  let rippleActions;
   const middleware = [
     offset(({ placement }) => {
       switch (placement) {
@@ -26,19 +38,31 @@ function MenuSubmenu(props) {
     if (event.button !== 0) return;
     setIsOpen((prev) => !prev);
   };
+  const onTogglePointerDown = (event) => {
+    rippleActions?.onRipple(event);
+  };
   const close = () => {
     setIsOpen(false);
     local.onClose?.();
   };
+  const focusFirstItem = () => {
+    anchor()?.nextElementSibling?.querySelector(ENABLED_ITEM_SELECTOR)?.focus();
+  };
   const onToggleKeyDown = (event) => {
     if (event.key === "ArrowRight" || event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       setIsOpen(true);
+      focusFirstItem();
     } else if (event.key === "ArrowLeft" || event.key === "Escape") {
+      if (isOpen()) event.preventDefault();
       setIsOpen(false);
     }
   };
+  const onToggleMouseEnter = () => {
+    if (local.openOnHover) setIsOpen(true);
+  };
   const onContentClick = (event) => {
+    callHandler(local.onClick, event);
     const item = event.target.closest('[role="menuitem"]');
     if (item && !item.hasAttribute("aria-haspopup")) {
       close();
@@ -50,23 +74,31 @@ function MenuSubmenu(props) {
       return parentCtx.dense;
     },
     variant: "floating",
-    onClose: close
+    onClose: close,
+    submenu: true
   };
   return <MenuContext.Provider value={value}>
       <li
     role="menuitem"
     ref={setAnchor}
-    class={cn("smwb-menu__item", local.class, { "smwb-menu__item--selected": isOpen() })}
+    class={cn("smwb-menu__item", {
+      "smwb-menu__item--dense": parentCtx.dense,
+      "smwb-menu__item--selected": isOpen()
+    })}
     tabindex={0}
     aria-haspopup="menu"
     aria-expanded={isOpen()}
     onClick={onToggle}
+    onPointerDown={onTogglePointerDown}
     onKeyDown={onToggleKeyDown}
-    onMouseEnter={local.openOnHover ? () => setIsOpen(true) : void 0}
+    onMouseEnter={onToggleMouseEnter}
   >
         <span class="smwb-menu__item-inner">{local.toggleElement}</span>
+        <Ripple actionRef={(actions) => rippleActions = actions} />
       </li>
       <MenuFloating
+    {...rest}
+    ref={local.ref}
     placement={local.placement ?? "right-start"}
     isOpen={isOpen()}
     onClose={close}

package/dist/headless/source/components/navigation/menu/menuSubmenu.jsx.map

@@ -1 +1 @@
-{"version":3,"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"],"mappings":"AAAA,SAAqC,cAAc,kBAAkB;AACrE,SAA0B,cAAc;AACxC,OAAO,QAAQ;AACf,SAAS,aAAa,sBAAsB;AAC5C,SAAS,oBAAoB;AAqBtB,SAAS,YAAY,OAAmD;AAC7E,QAAM,YAAY,eAAe;AACjC,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO,CAAC,aAAa,WAAW,iBAAiB,YAAY,eAAe,OAAO,CAAC;AAC/G,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,KAAK;AAC9C,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAiC,IAAI;AAEjE,QAAM,aAA2B;AAAA,IAC/B,OAAO,CAAC,EAAE,UAAU,MAAM;AACxB,cAAQ,WAAW;AAAA,QACjB,KAAK;AAAA,QACL,KAAK;AACH,iBAAO,EAAE,WAAW,IAAI,UAAU,EAAE;AAAA,QACtC,KAAK;AAAA,QACL,KAAK;AACH,iBAAO,EAAE,WAAW,GAAG,UAAU,EAAE;AAAA,QACrC;AACE,iBAAO,EAAE,WAAW,GAAG,UAAU,EAAE;AAAA,MACvC;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,WAAwD,CAAC,UAAU;AACvE,QAAI,MAAM,WAAW,EAAG;AACxB,cAAU,CAAC,SAAS,CAAC,IAAI;AAAA,EAC3B;AAEA,QAAM,QAAQ,MAAY;AACxB,cAAU,KAAK;AACf,UAAM,UAAU;AAAA,EAClB;AAEA,QAAM,kBAAkE,CAAC,UAAU;AACjF,QAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC5E,YAAM,eAAe;AACrB,gBAAU,IAAI;AAAA,IAChB,WAAW,MAAM,QAAQ,eAAe,MAAM,QAAQ,UAAU;AAC9D,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,iBAA+D,CAAC,UAAU;AAC9E,UAAM,OAAQ,MAAM,OAAuB,QAAQ,mBAAmB;AACtE,QAAI,QAAQ,CAAC,KAAK,aAAa,eAAe,GAAG;AAC/C,YAAM;AACN,gBAAU,QAAQ;AAAA,IACpB;AAAA,EACF;AAEA,QAAM,QAAQ;AAAA,IACZ,IAAI,QAAQ;AACV,aAAO,UAAU;AAAA,IACnB;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AAEA,SACE,CAAC,YAAY,SAAS,OAAO,OAAO;AAAA,MAClC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,KAAK;AAAA,IACL,OAAO,GAAG,mBAAmB,MAAM,OAAO,EAAE,6BAA6B,OAAO,EAAE,CAAC;AAAA,IACnF,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe,OAAO;AAAA,IACtB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,cAAc,MAAM,cAAc,MAAM,UAAU,IAAI,IAAI;AAAA,GAC3D;AAAA,QACC,CAAC,KAAK,MAAM,yBAAyB,MAAM,cAAc,EAAxD,KAA+D;AAAA,MAClE,EAZC,GAYI;AAAA,MACL,CAAC;AAAA,IACC,WAAW,MAAM,aAAa;AAAA,IAC9B,QAAQ,OAAO;AAAA,IACf,SAAS;AAAA,IACT,eAAe,OAAO;AAAA,IACtB,YAAY;AAAA,IACZ,SAAS;AAAA,GACV;AAAA,SACE,MAAM,SAAS;AAAA,MAClB,EATC,aASc;AAAA,IACjB,EAxBC,YAAY;AA0BjB;AAEA,IAAO,sBAAQ;","names":[],"file":"menuSubmenu.jsx"}
+{"version":3,"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"],"mappings":"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","names":[],"file":"menuSubmenu.jsx"}

package/dist/headless/source/components/navigation/pagination/pagination.jsx

@@ -55,7 +55,8 @@ function Pagination(props) {
     "hidePrevButton",
     "hideNextButton",
     "onChange",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   let navEl;
   const go = (target) => {
@@ -94,8 +95,8 @@ function Pagination(props) {
   return <nav
     {...rest}
     ref={mergeRefs(local.ref, (el) => navEl = el)}
-    data-testid="pagination"
-    aria-label="pagination"
+    data-testid={local["data-testid"] ?? "pagination"}
+    aria-label={rest["aria-label"] ?? "pagination"}
     class={cn(
       "smwb-pagination",
       `smwb-pagination_${local.size}`,

package/dist/headless/source/components/navigation/pagination/pagination.jsx.map

@@ -1 +1 @@
-{"version":3,"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"],"mappings":"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","names":[],"file":"pagination.jsx"}
+{"version":3,"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"],"mappings":"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","names":[],"file":"pagination.jsx"}

package/dist/headless/source/components/navigation/sidebar/sidebar.jsx

@@ -74,7 +74,7 @@ function Sidebar(props) {
       "smwb-sidebar_collapsible": local.collapsible,
       "smwb-sidebar_collapsed": local.collapsible && collapsed()
     })}
-    role="menubar"
+    role={rest.role ?? "menubar"}
   >
       <Show when={local.collapsible}>
         <div class="smwb-sidebar__collapse">

package/dist/headless/source/components/navigation/sidebar/sidebar.jsx.map

@@ -1 +1 @@
-{"version":3,"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"],"mappings":"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","names":[],"file":"sidebar.jsx"}
+{"version":3,"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"],"mappings":"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","names":[],"file":"sidebar.jsx"}

package/dist/headless/source/components/navigation/stepper/stepper.jsx

@@ -12,14 +12,15 @@ function Stepper(props) {
     "orientation",
     "alternativeLabel",
     "onStepClick",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const steps = createMemo(() => local.steps);
   const auto = () => local.orientation === "auto";
   const stepper = () => <div
     {...rest}
     ref={mergeRefs(local.ref)}
-    data-testid="stepper"
+    data-testid={local["data-testid"] ?? "stepper"}
     data-steps={auto() ? String(Math.min(steps().length, AUTO_MAX_STEPS)) : void 0}
     class={cn(
       "smwb-stepper",
@@ -34,6 +35,15 @@ function Stepper(props) {
     const active = () => index() === local.activeStep;
     const isLast = () => index() === steps().length - 1;
     const clickable = () => Boolean(local.onStepClick) && !step.disabled;
+    const onClick = () => {
+      if (clickable()) local.onStepClick?.(index());
+    };
+    const onKeyDown = (event) => {
+      if (clickable() && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        local.onStepClick?.(index());
+      }
+    };
     return <>
               <div
       class={cn("smwb-stepper__step", {
@@ -47,13 +57,8 @@ function Stepper(props) {
       aria-disabled={step.disabled || void 0}
       role={clickable() ? "button" : void 0}
       tabindex={clickable() ? 0 : void 0}
-      onClick={clickable() ? () => local.onStepClick?.(index()) : void 0}
-      onKeyDown={clickable() ? (event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          local.onStepClick?.(index());
-        }
-      } : void 0}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
     >
                 <div class="smwb-stepper__icon" aria-hidden="true">
                   <Show when={step.icon} fallback={completed() ? <Icon name="check" size={16} /> : <span>{index() + 1}</span>}>

package/dist/headless/source/components/navigation/stepper/stepper.jsx.map

@@ -1 +1 @@
-{"version":3,"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"],"mappings":"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","names":[],"file":"stepper.jsx"}
+{"version":3,"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"],"mappings":"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","names":[],"file":"stepper.jsx"}