@smwb/ui-solid 0.12.1 → 0.13.0

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

@@ -1,7 +1,7 @@
-import { use as S, spread as V, mergeProps as O, insert as a, createComponent as t, template as b, Dynamic as z } from "solid-js/web";
+import { use as S, spread as V, mergeProps as O, insert as s, createComponent as t, template as b, Dynamic as z } from "solid-js/web";
 import '../../../assets/styles/less/components/bottomBar/bottomBar.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                             */
-import { mergeProps as E, splitProps as P, createSignal as A, createMemo as F, For as C, Show as s, children as H } from "solid-js";
+import { mergeProps as E, splitProps as P, createSignal as A, createMemo as F, For as C, Show as m, children as H } from "solid-js";
 import k from "clsx";
 import { createControllableState as T } from "../../../primitives/createControllableState.js";
 import { mergeRefs as R } from "../../../primitives/mergeRefs.js";
@@ -15,7 +15,7 @@ import { Ripple as N } from "../../base/ripple/ripple.js";
 var Q = /* @__PURE__ */ b("<span class=smwb-bottom-bar__item-icon>"), U = /* @__PURE__ */ b("<span class=smwb-bottom-bar__item-title>"), W = /* @__PURE__ */ b("<nav><div class=smwb-bottom-bar__nav role=menubar>");
 function $(p) {
   const [o, n] = P(p, ["isActive", "icon", "title", "as", "href", "ref"]);
-  let m;
+  let a;
   const i = H(() => o.icon);
   return t(z, O({
     get component() {
@@ -35,28 +35,28 @@ function $(p) {
       });
     },
     onPointerDown: (r) => {
-      m?.onRipple(r);
+      a?.onRipple(r);
     }
   }, n, {
     get children() {
-      return [t(s, {
+      return [t(m, {
         get when() {
           return i();
         },
         get children() {
           var r = Q();
-          return a(r, i), r;
+          return s(r, i), r;
         }
-      }), t(s, {
+      }), t(m, {
         get when() {
           return o.title;
         },
         get children() {
           var r = U();
-          return a(r, () => o.title), r;
+          return s(r, () => o.title), r;
         }
       }), t(N, {
-        actionRef: (r) => m = r
+        actionRef: (r) => a = r
       })];
     }
   }));
@@ -67,131 +67,136 @@ function ue(p) {
     visibleCount: 4,
     defaultActiveItem: null,
     overflowMenuAriaLabel: "More navigation"
-  }, p), [n, m] = P(o, ["class", "menuItems", "visibleCount", "activeItem", "defaultActiveItem", "onActiveItemChange", "overflowMenuAriaLabel", "ref"]), [i, v] = T({
+  }, p), [n, a] = P(o, ["class", "menuItems", "visibleCount", "activeItem", "defaultActiveItem", "onActiveItemChange", "overflowMenuAriaLabel", "ref"]), [i, v] = T({
     value: () => n.activeItem,
     defaultValue: n.defaultActiveItem,
     onChange: (l) => {
       l !== null && n.onActiveItemChange?.(l);
     }
   }), [r, c] = A(!1), [x, y] = A(null), d = F(() => n.menuItems), u = () => Math.max(0, n.visibleCount), B = () => d().slice(0, u()), w = () => d().slice(u()), h = () => w().length > 0, D = () => h() && i() !== null && i() >= u();
-  return (() => {
-    var l = W(), I = l.firstChild, _ = R(n.ref);
-    return typeof _ == "function" && S(_, l), V(l, O(m, {
-      get class() {
-        return k("smwb-bottom-bar", n.class);
-      },
-      role: "navigation"
-    }), !1, !0), a(I, t(C, {
-      get each() {
-        return B();
-      },
-      children: (e, f) => t($, {
-        get as() {
-          return e.as;
+  return (
+    // role="navigation" is a default: the caller's own wins, and an explicit undefined keeps it.
+    (() => {
+      var l = W(), I = l.firstChild, _ = R(n.ref);
+      return typeof _ == "function" && S(_, l), V(l, O(a, {
+        get class() {
+          return k("smwb-bottom-bar", n.class);
         },
-        get isActive() {
-          return i() === f();
-        },
-        onClick: (g) => {
-          v(f()), M(e.onClick, g);
-        },
-        get icon() {
-          return e.icon;
-        },
-        get title() {
-          return e.title;
-        },
-        get href() {
-          return e.href;
+        get role() {
+          return a.role ?? "navigation";
         }
-      })
-    }), null), a(I, t(s, {
-      get when() {
-        return h();
-      },
-      get children() {
-        return t($, {
-          ref: (e) => y(e),
-          get isActive() {
-            return D();
+      }), !1, !0), s(I, t(C, {
+        get each() {
+          return B();
+        },
+        children: (e, f) => t($, {
+          get as() {
+            return e.as;
           },
-          onClick: () => c((e) => !e),
-          get icon() {
-            return t(j, {
-              name: "menu",
-              size: 24
-            });
+          get isActive() {
+            return i() === f();
           },
-          get "aria-label"() {
-            return n.overflowMenuAriaLabel;
+          onClick: (g) => {
+            v(f()), M(e.onClick, g);
           },
-          "aria-haspopup": "menu",
-          get "aria-expanded"() {
-            return r();
-          }
-        });
-      }
-    }), null), a(l, t(s, {
-      get when() {
-        return h();
-      },
-      get children() {
-        return t(q, {
-          get isOpen() {
-            return r();
+          get icon() {
+            return e.icon;
           },
-          onClose: () => c(!1),
-          get anchorElement() {
-            return x();
+          get title() {
+            return e.title;
           },
-          placement: "top",
-          dense: !0,
-          get children() {
-            return t(C, {
-              get each() {
-                return w();
-              },
-              children: (e, f) => {
-                const g = () => u() + f();
-                return t(G, {
-                  get selected() {
-                    return i() === g();
-                  },
-                  get href() {
-                    return e.href;
-                  },
-                  onClick: (L) => {
-                    v(g()), M(e.onClick, L), c(!1);
-                  },
-                  get children() {
-                    return [t(s, {
-                      get when() {
-                        return e.icon;
-                      },
-                      get children() {
-                        return t(J, {
-                          get children() {
-                            return e.icon;
-                          }
-                        });
-                      }
-                    }), t(K, {
-                      get inset() {
-                        return !e.icon;
-                      },
-                      get children() {
-                        return e.title;
-                      }
-                    })];
-                  }
-                });
-              }
-            });
+          get href() {
+            return e.href;
           }
-        });
-      }
-    }), null), l;
-  })();
+        })
+      }), null), s(I, t(m, {
+        get when() {
+          return h();
+        },
+        get children() {
+          return t($, {
+            ref: (e) => y(e),
+            get isActive() {
+              return D();
+            },
+            onClick: () => c((e) => !e),
+            get icon() {
+              return t(j, {
+                name: "menu",
+                size: 24
+              });
+            },
+            get "aria-label"() {
+              return n.overflowMenuAriaLabel;
+            },
+            "aria-haspopup": "menu",
+            get "aria-expanded"() {
+              return r();
+            }
+          });
+        }
+      }), null), s(l, t(m, {
+        get when() {
+          return h();
+        },
+        get children() {
+          return t(q, {
+            get isOpen() {
+              return r();
+            },
+            onClose: () => c(!1),
+            get anchorElement() {
+              return x();
+            },
+            placement: "top",
+            dense: !0,
+            get children() {
+              return t(C, {
+                get each() {
+                  return w();
+                },
+                children: (e, f) => {
+                  const g = () => u() + f();
+                  return t(G, {
+                    get selected() {
+                      return i() === g();
+                    },
+                    get href() {
+                      return e.href;
+                    },
+                    onClick: (L) => {
+                      v(g()), M(e.onClick, L), c(!1);
+                    },
+                    get children() {
+                      return [t(m, {
+                        get when() {
+                          return e.icon;
+                        },
+                        get children() {
+                          return t(J, {
+                            get children() {
+                              return e.icon;
+                            }
+                          });
+                        }
+                      }), t(K, {
+                        get inset() {
+                          return !e.icon;
+                        },
+                        get children() {
+                          return e.title;
+                        }
+                      })];
+                    }
+                  });
+                }
+              });
+            }
+          });
+        }
+      }), null), l;
+    })()
+  );
 }
 export {
   ue as BottomBar

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

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

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

@@ -15,6 +15,8 @@ export interface BreadcrumbsProps extends JSX.HTMLAttributes<HTMLElement> {
     onExpand?: () => void;
     /** Accessible label for the expand button. */
     expandLabel?: string;
+    /** Test id of the root `<nav>`; `breadcrumbs` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLElement>;
 }
 export declare function Breadcrumbs(props: ParentProps<BreadcrumbsProps>): JSX.Element;

package/dist/components/navigation/breadcrumbs/breadcrumbs.js

@@ -1,4 +1,4 @@
-import { use as $, spread as C, mergeProps as v, insert as o, createComponent as p, template as s, effect as w, setAttribute as A, delegateEvents as B } from "solid-js/web";
+import { use as $, spread as C, mergeProps as v, insert as n, createComponent as d, template as s, effect as w, setAttribute as A, delegateEvents as B } from "solid-js/web";
 import '../../../assets/styles/less/components/breadcrumbs/breadcrumbs.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                                 */
 import { mergeProps as E, splitProps as P, children as y, For as I, Show as L } from "solid-js";
@@ -7,17 +7,17 @@ import { createControllableState as k } from "../../../primitives/createControll
 import { mergeRefs as F } from "../../../primitives/mergeRefs.js";
 var R = /* @__PURE__ */ s("<button type=button class=smwb-breadcrumbs__expand>…"), V = /* @__PURE__ */ s("<nav><ol class=smwb-breadcrumbs__list>"), j = /* @__PURE__ */ s("<li class=smwb-breadcrumbs__item>"), q = /* @__PURE__ */ s("<li class=smwb-breadcrumbs__separator aria-hidden=true>");
 function N(c) {
-  const d = E({
+  const i = E({
     separator: "/",
     maxItems: 8,
     itemsBeforeCollapse: 1,
     itemsAfterCollapse: 1,
     expandLabel: "Show path"
-  }, c), [e, i] = P(d, ["class", "separator", "maxItems", "itemsBeforeCollapse", "itemsAfterCollapse", "expanded", "onExpand", "expandLabel", "children", "ref"]), [u, b] = k({
+  }, c), [e, o] = P(i, ["class", "separator", "maxItems", "itemsBeforeCollapse", "itemsAfterCollapse", "expanded", "onExpand", "expandLabel", "children", "ref", "data-testid"]), [u, b] = k({
     value: () => e.expanded,
     defaultValue: !1,
     onChange: () => e.onExpand?.()
-  }), f = y(() => e.children), l = () => f.toArray(), h = () => !u() && l().length > e.maxItems && e.itemsBeforeCollapse + e.itemsAfterCollapse < l().length, _ = () => b(!0), n = () => {
+  }), f = y(() => e.children), l = () => f.toArray(), h = () => !u() && l().length > e.maxItems && e.itemsBeforeCollapse + e.itemsAfterCollapse < l().length, _ = () => b(!0), m = () => {
     const r = l();
     return h() ? [...r.slice(0, e.itemsBeforeCollapse), (() => {
       var t = R();
@@ -25,27 +25,31 @@ function N(c) {
     })(), ...r.slice(r.length - e.itemsAfterCollapse)] : r;
   };
   return (() => {
-    var r = V(), t = r.firstChild, m = F(e.ref);
-    return typeof m == "function" && $(m, r), C(r, v(i, {
-      "data-testid": "breadcrumbs",
-      "aria-label": "breadcrumb",
+    var r = V(), t = r.firstChild, p = F(e.ref);
+    return typeof p == "function" && $(p, r), C(r, v(o, {
+      get "data-testid"() {
+        return e["data-testid"] ?? "breadcrumbs";
+      },
+      get "aria-label"() {
+        return o["aria-label"] ?? "breadcrumb";
+      },
       get class() {
         return S("smwb-breadcrumbs", e.class);
       }
-    }), !1, !0), o(t, p(I, {
+    }), !1, !0), n(t, d(I, {
       get each() {
-        return n();
+        return m();
       },
       children: (g, x) => [(() => {
         var a = j();
-        return o(a, g), a;
-      })(), p(L, {
+        return n(a, g), a;
+      })(), d(L, {
         get when() {
-          return x() < n().length - 1;
+          return x() < m().length - 1;
         },
         get children() {
           var a = q();
-          return o(a, () => e.separator), a;
+          return n(a, () => e.separator), a;
         }
       })]
     })), r;

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import { type JSX, type ParentProps, For, Show, children as resolveChildren, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface BreadcrumbsProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** Node placed between every crumb. */\n  separator?: JSX.Element;\n  /** Collapse the middle of the trail when there are more than `maxItems` crumbs. */\n  maxItems?: number;\n  /** How many leading crumbs to keep when collapsed. */\n  itemsBeforeCollapse?: number;\n  /** How many trailing crumbs to keep when collapsed. */\n  itemsAfterCollapse?: number;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Fired when the user activates the expand control. */\n  onExpand?: () => void;\n  /** Accessible label for the expand button. */\n  expandLabel?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Breadcrumbs(props: ParentProps<BreadcrumbsProps>): JSX.Element {\n  const merged = mergeProps(\n    { separator: \"/\" as JSX.Element, maxItems: 8, itemsBeforeCollapse: 1, itemsAfterCollapse: 1, expandLabel: \"Show path\" },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"separator\",\n    \"maxItems\",\n    \"itemsBeforeCollapse\",\n    \"itemsAfterCollapse\",\n    \"expanded\",\n    \"onExpand\",\n    \"expandLabel\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [expanded, setExpanded] = createControllableState<boolean>({\n    value: () => local.expanded,\n    defaultValue: false,\n    onChange: () => local.onExpand?.(),\n  });\n\n  const resolved = resolveChildren(() => local.children);\n  const crumbs = (): unknown[] => resolved.toArray();\n\n  const collapsed = (): boolean =>\n    !expanded() &&\n    crumbs().length > local.maxItems &&\n    local.itemsBeforeCollapse + local.itemsAfterCollapse < crumbs().length;\n\n  const handleExpand = (): void => setExpanded(true);\n\n  const rendered = (): unknown[] => {\n    const all = crumbs();\n    if (!collapsed()) return all;\n    return [\n      ...all.slice(0, local.itemsBeforeCollapse),\n      (\n        <button type=\"button\" class=\"smwb-breadcrumbs__expand\" aria-label={local.expandLabel} onClick={handleExpand}>\n          …\n        </button>\n      ),\n      ...all.slice(all.length - local.itemsAfterCollapse),\n    ];\n  };\n\n  return (\n    <nav {...rest} ref={mergeRefs(local.ref)} data-testid=\"breadcrumbs\" aria-label=\"breadcrumb\" class={cn(\"smwb-breadcrumbs\", local.class)}>\n      <ol class=\"smwb-breadcrumbs__list\">\n        <For each={rendered()}>\n          {(crumb, index) => (\n            <>\n              <li class=\"smwb-breadcrumbs__item\">{crumb as JSX.Element}</li>\n              <Show when={index() < rendered().length - 1}>\n                <li class=\"smwb-breadcrumbs__separator\" aria-hidden=\"true\">\n                  {local.separator}\n                </li>\n              </Show>\n            </>\n          )}\n        </For>\n      </ol>\n    </nav>\n  );\n}\n\nexport default Breadcrumbs;\n"],"names":["Breadcrumbs","props","merged","mergeProps","separator","maxItems","itemsBeforeCollapse","itemsAfterCollapse","expandLabel","local","rest","splitProps","expanded","setExpanded","createControllableState","value","defaultValue","onChange","onExpand","resolved","resolveChildren","children","crumbs","toArray","collapsed","length","handleExpand","rendered","all","slice","_el$","_tmpl$","$$click","_$effect","_$setAttribute","_el$2","_tmpl$2","_el$3","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","For","each","crumb","index","_el$4","_tmpl$3","Show","when","_el$5","_tmpl$4","_$delegateEvents"],"mappings":";;;;;;;;AAyBO,SAASA,EAAYC,GAAmD;AAC7E,QAAMC,IAASC,EACb;AAAA,IAAEC,WAAW;AAAA,IAAoBC,UAAU;AAAA,IAAGC,qBAAqB;AAAA,IAAGC,oBAAoB;AAAA,IAAGC,aAAa;AAAA,EAAA,GAC1GP,CACF,GACM,CAACQ,GAAOC,CAAI,IAAIC,EAAWT,GAAQ,CACvC,SACA,aACA,YACA,uBACA,sBACA,YACA,YACA,eACA,YACA,KAAK,CACN,GAEK,CAACU,GAAUC,CAAW,IAAIC,EAAiC;AAAA,IAC/DC,OAAOA,MAAMN,EAAMG;AAAAA,IACnBI,cAAc;AAAA,IACdC,UAAUA,MAAMR,EAAMS,WAAAA;AAAAA,EAAW,CAClC,GAEKC,IAAWC,EAAgB,MAAMX,EAAMY,QAAQ,GAC/CC,IAASA,MAAiBH,EAASI,QAAAA,GAEnCC,IAAYA,MAChB,CAACZ,EAAAA,KACDU,EAAAA,EAASG,SAAShB,EAAMJ,YACxBI,EAAMH,sBAAsBG,EAAMF,qBAAqBe,IAASG,QAE5DC,IAAeA,MAAYb,EAAY,EAAI,GAE3Cc,IAAWA,MAAiB;AAChC,UAAMC,IAAMN,EAAAA;AACZ,WAAKE,EAAAA,IACE,CACL,GAAGI,EAAIC,MAAM,GAAGpB,EAAMH,mBAAmB,IAAC,MAAA;AAAA,UAAAwB,IAAAC,EAAAA;AAAAD,aAAAA,EAAAE,UAEuDN,GAAYO,QAAAC,EAAAJ,GAAA,cAAxCrB,EAAMD,WAAW,CAAA,GAAAsB;AAAAA,IAAA,GAAA,GAItF,GAAGF,EAAIC,MAAMD,EAAIH,SAAShB,EAAMF,kBAAkB,CAAC,IAR5BqB;AAAAA,EAU3B;AAEA,UAAA,MAAA;AAAA,QAAAO,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IACsBC,EAAU/B,EAAMgC,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAJ,CAAA,GAAAQ,EAAAR,GAAAS,EAA/BlC,GAAI;AAAA,MAAA,eAAyC;AAAA,MAAa,cAAY;AAAA,MAAY,IAAA,QAAA;AAAA,eAAQmC,EAAG,oBAAoBpC,EAAMqC,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAV,GAAAW,EAEjIC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEvB,EAAAA;AAAAA,MAAU;AAAA,MAAAN,UAClBA,CAAC8B,GAAOC,MAAK,EAAA,MAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAP,eAAAA,EAAAM,GAE0BF,CAAoB,GAAAE;AAAAA,MAAA,GAAA,GAAAL,EACvDO,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEJ,EAAAA,IAAUzB,EAAAA,EAAWF,SAAS;AAAA,QAAC;AAAA,QAAA,IAAAJ,WAAA;AAAA,cAAAoC,IAAAC,EAAAA;AAAAX,iBAAAA,EAAAU,GAAA,MAEtChD,EAAML,SAAS,GAAAqD;AAAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA,CAIvB,CAAA,GAAAtB;AAAAA,EAAA,GAAA;AAKX;AAE2BwB,EAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"breadcrumbs.js","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import { type JSX, type ParentProps, For, Show, children as resolveChildren, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface BreadcrumbsProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** Node placed between every crumb. */\n  separator?: JSX.Element;\n  /** Collapse the middle of the trail when there are more than `maxItems` crumbs. */\n  maxItems?: number;\n  /** How many leading crumbs to keep when collapsed. */\n  itemsBeforeCollapse?: number;\n  /** How many trailing crumbs to keep when collapsed. */\n  itemsAfterCollapse?: number;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Fired when the user activates the expand control. */\n  onExpand?: () => void;\n  /** Accessible label for the expand button. */\n  expandLabel?: string;\n  /** Test id of the root `<nav>`; `breadcrumbs` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Breadcrumbs(props: ParentProps<BreadcrumbsProps>): JSX.Element {\n  const merged = mergeProps(\n    { separator: \"/\" as JSX.Element, maxItems: 8, itemsBeforeCollapse: 1, itemsAfterCollapse: 1, expandLabel: \"Show path\" },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"separator\",\n    \"maxItems\",\n    \"itemsBeforeCollapse\",\n    \"itemsAfterCollapse\",\n    \"expanded\",\n    \"onExpand\",\n    \"expandLabel\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const [expanded, setExpanded] = createControllableState<boolean>({\n    value: () => local.expanded,\n    defaultValue: false,\n    onChange: () => local.onExpand?.(),\n  });\n\n  const resolved = resolveChildren(() => local.children);\n  const crumbs = (): unknown[] => resolved.toArray();\n\n  const collapsed = (): boolean =>\n    !expanded() &&\n    crumbs().length > local.maxItems &&\n    local.itemsBeforeCollapse + local.itemsAfterCollapse < crumbs().length;\n\n  const handleExpand = (): void => setExpanded(true);\n\n  const rendered = (): unknown[] => {\n    const all = crumbs();\n    if (!collapsed()) return all;\n    return [\n      ...all.slice(0, local.itemsBeforeCollapse),\n      (\n        <button type=\"button\" class=\"smwb-breadcrumbs__expand\" aria-label={local.expandLabel} onClick={handleExpand}>\n          …\n        </button>\n      ),\n      ...all.slice(all.length - local.itemsAfterCollapse),\n    ];\n  };\n\n  return (\n    <nav\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"breadcrumbs\"}\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\"] ?? \"breadcrumb\"}\n      class={cn(\"smwb-breadcrumbs\", local.class)}\n    >\n      <ol class=\"smwb-breadcrumbs__list\">\n        <For each={rendered()}>\n          {(crumb, index) => (\n            <>\n              <li class=\"smwb-breadcrumbs__item\">{crumb as JSX.Element}</li>\n              <Show when={index() < rendered().length - 1}>\n                <li class=\"smwb-breadcrumbs__separator\" aria-hidden=\"true\">\n                  {local.separator}\n                </li>\n              </Show>\n            </>\n          )}\n        </For>\n      </ol>\n    </nav>\n  );\n}\n\nexport default Breadcrumbs;\n"],"names":["Breadcrumbs","props","merged","mergeProps","separator","maxItems","itemsBeforeCollapse","itemsAfterCollapse","expandLabel","local","rest","splitProps","expanded","setExpanded","createControllableState","value","defaultValue","onChange","onExpand","resolved","resolveChildren","children","crumbs","toArray","collapsed","length","handleExpand","rendered","all","slice","_el$","_tmpl$","$$click","_$effect","_$setAttribute","_el$2","_tmpl$2","_el$3","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","For","each","crumb","index","_el$4","_tmpl$3","Show","when","_el$5","_tmpl$4","_$delegateEvents"],"mappings":";;;;;;;;AA2BO,SAASA,EAAYC,GAAmD;AAC7E,QAAMC,IAASC,EACb;AAAA,IAAEC,WAAW;AAAA,IAAoBC,UAAU;AAAA,IAAGC,qBAAqB;AAAA,IAAGC,oBAAoB;AAAA,IAAGC,aAAa;AAAA,EAAA,GAC1GP,CACF,GACM,CAACQ,GAAOC,CAAI,IAAIC,EAAWT,GAAQ,CACvC,SACA,aACA,YACA,uBACA,sBACA,YACA,YACA,eACA,YACA,OACA,aAAa,CACd,GAEK,CAACU,GAAUC,CAAW,IAAIC,EAAiC;AAAA,IAC/DC,OAAOA,MAAMN,EAAMG;AAAAA,IACnBI,cAAc;AAAA,IACdC,UAAUA,MAAMR,EAAMS,WAAAA;AAAAA,EAAW,CAClC,GAEKC,IAAWC,EAAgB,MAAMX,EAAMY,QAAQ,GAC/CC,IAASA,MAAiBH,EAASI,QAAAA,GAEnCC,IAAYA,MAChB,CAACZ,EAAAA,KACDU,EAAAA,EAASG,SAAShB,EAAMJ,YACxBI,EAAMH,sBAAsBG,EAAMF,qBAAqBe,IAASG,QAE5DC,IAAeA,MAAYb,EAAY,EAAI,GAE3Cc,IAAWA,MAAiB;AAChC,UAAMC,IAAMN,EAAAA;AACZ,WAAKE,EAAAA,IACE,CACL,GAAGI,EAAIC,MAAM,GAAGpB,EAAMH,mBAAmB,IAAC,MAAA;AAAA,UAAAwB,IAAAC,EAAAA;AAAAD,aAAAA,EAAAE,UAEuDN,GAAYO,QAAAC,EAAAJ,GAAA,cAAxCrB,EAAMD,WAAW,CAAA,GAAAsB;AAAAA,IAAA,GAAA,GAItF,GAAGF,EAAIC,MAAMD,EAAIH,SAAShB,EAAMF,kBAAkB,CAAC,IAR5BqB;AAAAA,EAU3B;AAEA,UAAA,MAAA;AAAA,QAAAO,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAGSC,EAAU/B,EAAMgC,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAJ,CAAA,GAAAQ,EAAAR,GAAAS,EADrBlC,GAAI;AAAA,MAAA,IAAA,gBAAA;AAAA,eAEKD,EAAM,aAAa,KAAK;AAAA,MAAa;AAAA,MAAA,IAAA,eAAA;AAAA,eAGtCC,EAAK,YAAY,KAAK;AAAA,MAAY;AAAA,MAAA,IAAA,QAAA;AAAA,eACvCmC,EAAG,oBAAoBpC,EAAMqC,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAV,GAAAW,EAGvCC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEvB,EAAAA;AAAAA,MAAU;AAAA,MAAAN,UAClBA,CAAC8B,GAAOC,MAAK,EAAA,MAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAP,eAAAA,EAAAM,GAE0BF,CAAoB,GAAAE;AAAAA,MAAA,GAAA,GAAAL,EACvDO,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEJ,EAAAA,IAAUzB,EAAAA,EAAWF,SAAS;AAAA,QAAC;AAAA,QAAA,IAAAJ,WAAA;AAAA,cAAAoC,IAAAC,EAAAA;AAAAX,iBAAAA,EAAAU,GAAA,MAEtChD,EAAML,SAAS,GAAAqD;AAAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA,CAIvB,CAAA,GAAAtB;AAAAA,EAAA,GAAA;AAKX;AAE2BwB,EAAA,CAAA,OAAA,CAAA;"}

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

@@ -3,6 +3,12 @@ import type { MenuFloatingProps } from "./menuFloating";
 export type MenuProps = MenuFloatingProps & {
     variant?: "static" | "floating";
     dense?: boolean;
+    /**
+     * Role of the list inside the menu, `menu` by default. A component that draws
+     * a list of its own on the menu's surface sets `presentation`: SelectField's
+     * options are a `listbox` inside it.
+     */
+    listRole?: JSX.AriaAttributes["role"];
 };
 export declare function Menu(props: ParentProps<MenuProps>): JSX.Element;
 export default Menu;

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

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../../src/components/navigation/menu/menu.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport { MenuContext } from \"./menuContext\";\nimport { MenuComponent } from \"./menuComponent\";\nimport type { MenuFloatingProps } from \"./menuFloating\";\n\nexport type MenuProps = MenuFloatingProps & {\n  variant?: \"static\" | \"floating\";\n  dense?: boolean;\n};\n\nexport function Menu(props: ParentProps<MenuProps>): JSX.Element {\n  const merged = mergeProps({ dense: false, variant: \"floating\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"dense\", \"variant\", \"children\", \"ref\"]);\n\n  const value = {\n    get dense() {\n      return local.dense;\n    },\n    get variant() {\n      return local.variant;\n    },\n    onClose: () => rest.onClose?.(),\n  };\n\n  return (\n    <MenuContext.Provider value={value}>\n      <MenuComponent ref={local.ref} {...rest}>\n        {local.children}\n      </MenuComponent>\n    </MenuContext.Provider>\n  );\n}\n\nexport default Menu;\n"],"names":["Menu","props","merged","mergeProps","dense","variant","local","rest","splitProps","value","onClose","_$createComponent","MenuContext","Provider","children","MenuComponent","_$mergeProps","ref","r$","_ref$"],"mappings":";;;;;;AAYO,SAASA,EAAKC,GAA4C;AAC/D,QAAMC,IAASC,EAAW;AAAA,IAAEC,OAAO;AAAA,IAAOC,SAAS;AAAA,EAAA,GAAuBJ,CAAK,GACzE,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CAAC,SAAS,WAAW,YAAY,KAAK,CAAC,GAE1EO,IAAQ;AAAA,IACZ,IAAIL,QAAQ;AACV,aAAOE,EAAMF;AAAAA,IACf;AAAA,IACA,IAAIC,UAAU;AACZ,aAAOC,EAAMD;AAAAA,IACf;AAAA,IACAK,SAASA,MAAMH,EAAKG,UAAAA;AAAAA,EAAU;AAGhC,SAAAC,EACGC,EAAYC,UAAQ;AAAA,IAACJ,OAAAA;AAAAA,IAAY,IAAAK,WAAA;AAAA,aAAAH,EAC/BI,GAAaC,EAAA;AAAA,QAAAC,IAAAC,GAAA;AAAA,cAAAC,IAAMb,EAAMW;AAAG,iBAAAE,KAAA,aAAAA,EAAAD,CAAA,IAATZ,EAAMW,MAAGC;AAAAA,QAAA;AAAA,MAAA,GAAMX,GAAI;AAAA,QAAA,IAAAO,WAAA;AAAA,iBACpCR,EAAMQ;AAAAA,QAAQ;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAIvB;"}
+{"version":3,"file":"menu.js","sources":["../../../../src/components/navigation/menu/menu.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport { MenuContext } from \"./menuContext\";\nimport { MenuComponent } from \"./menuComponent\";\nimport type { MenuFloatingProps } from \"./menuFloating\";\n\nexport type MenuProps = MenuFloatingProps & {\n  variant?: \"static\" | \"floating\";\n  dense?: boolean;\n  /**\n   * Role of the list inside the menu, `menu` by default. A component that draws\n   * a list of its own on the menu's surface sets `presentation`: SelectField's\n   * options are a `listbox` inside it.\n   */\n  listRole?: JSX.AriaAttributes[\"role\"];\n};\n\nexport function Menu(props: ParentProps<MenuProps>): JSX.Element {\n  const merged = mergeProps({ dense: false, variant: \"floating\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"dense\", \"variant\", \"children\", \"ref\"]);\n\n  const value = {\n    get dense() {\n      return local.dense;\n    },\n    get variant() {\n      return local.variant;\n    },\n    onClose: () => rest.onClose?.(),\n  };\n\n  return (\n    <MenuContext.Provider value={value}>\n      <MenuComponent ref={local.ref} {...rest}>\n        {local.children}\n      </MenuComponent>\n    </MenuContext.Provider>\n  );\n}\n\nexport default Menu;\n"],"names":["Menu","props","merged","mergeProps","dense","variant","local","rest","splitProps","value","onClose","_$createComponent","MenuContext","Provider","children","MenuComponent","_$mergeProps","ref","r$","_ref$"],"mappings":";;;;;;AAkBO,SAASA,EAAKC,GAA4C;AAC/D,QAAMC,IAASC,EAAW;AAAA,IAAEC,OAAO;AAAA,IAAOC,SAAS;AAAA,EAAA,GAAuBJ,CAAK,GACzE,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CAAC,SAAS,WAAW,YAAY,KAAK,CAAC,GAE1EO,IAAQ;AAAA,IACZ,IAAIL,QAAQ;AACV,aAAOE,EAAMF;AAAAA,IACf;AAAA,IACA,IAAIC,UAAU;AACZ,aAAOC,EAAMD;AAAAA,IACf;AAAA,IACAK,SAASA,MAAMH,EAAKG,UAAAA;AAAAA,EAAU;AAGhC,SAAAC,EACGC,EAAYC,UAAQ;AAAA,IAACJ,OAAAA;AAAAA,IAAY,IAAAK,WAAA;AAAA,aAAAH,EAC/BI,GAAaC,EAAA;AAAA,QAAAC,IAAAC,GAAA;AAAA,cAAAC,IAAMb,EAAMW;AAAG,iBAAAE,KAAA,aAAAA,EAAAD,CAAA,IAATZ,EAAMW,MAAGC;AAAAA,QAAA;AAAA,MAAA,GAAMX,GAAI;AAAA,QAAA,IAAAO,WAAA;AAAA,iBACpCR,EAAMQ;AAAAA,QAAQ;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAIvB;"}

package/dist/components/navigation/menu/menuComponent.js

@@ -1,34 +1,23 @@
-import { createComponent as e } from "solid-js/web";
-import { Show as i } from "solid-js";
-import { useMenuContext as f } from "./menuContext.js";
-import { MenuList as u } from "./menuList.js";
-import { MenuFloating as c } from "./menuFloating.js";
-function s(t) {
-  const o = f();
-  return e(i, {
+import { createComponent as t } from "solid-js/web";
+import { splitProps as r, Show as i } from "solid-js";
+import { useMenuContext as m } from "./menuContext.js";
+import { MenuList as p } from "./menuList.js";
+import { MenuFloating as a } from "./menuFloating.js";
+function g(e) {
+  const n = m(), [, o] = r(e, ["anchorElement", "isOpen", "onClose", "placement", "middleware"]);
+  return t(i, {
     get when() {
-      return o.variant === "static";
+      return n.variant === "static";
     },
     get fallback() {
-      return e(c, t);
+      return t(a, e);
     },
     get children() {
-      return e(u, {
-        ref(r) {
-          var n = t.ref;
-          typeof n == "function" ? n(r) : t.ref = r;
-        },
-        get class() {
-          return t.class;
-        },
-        get children() {
-          return t.children;
-        }
-      });
+      return t(p, o);
     }
   });
 }
 export {
-  s as MenuComponent
+  g as MenuComponent
 };
 //# sourceMappingURL=menuComponent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menuComponent.js","sources":["../../../../src/components/navigation/menu/menuComponent.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show } from \"solid-js\";\nimport { useMenuContext } from \"./menuContext\";\nimport { MenuList } from \"./menuList\";\nimport { MenuFloating, type MenuFloatingProps } from \"./menuFloating\";\n\nexport function MenuComponent(props: ParentProps<MenuFloatingProps>): JSX.Element {\n  const ctx = useMenuContext();\n  return (\n    <Show when={ctx.variant === \"static\"} fallback={<MenuFloating {...props} />}>\n      <MenuList ref={props.ref} class={props.class}>\n        {props.children}\n      </MenuList>\n    </Show>\n  );\n}\n\nexport default MenuComponent;\n"],"names":["MenuComponent","props","ctx","useMenuContext","_$createComponent","Show","when","variant","fallback","MenuFloating","children","MenuList","ref","r$","_ref$","class"],"mappings":";;;;;AAKO,SAASA,EAAcC,GAAoD;AAChF,QAAMC,IAAMC,EAAAA;AACZ,SAAAC,EACGC,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEJ,EAAIK,YAAY;AAAA,IAAQ;AAAA,IAAA,IAAEC,WAAQ;AAAA,aAAAJ,EAAGK,GAAiBR,CAAK;AAAA,IAAA;AAAA,IAAA,IAAAS,WAAA;AAAA,aAAAN,EACpEO,GAAQ;AAAA,QAAAC,IAAAC,GAAA;AAAA,cAAAC,IAAMb,EAAMW;AAAG,iBAAAE,KAAA,aAAAA,EAAAD,CAAA,IAATZ,EAAMW,MAAGC;AAAAA,QAAA;AAAA,QAAA,IAAA,QAAA;AAAA,iBAASZ,EAAMc;AAAAA,QAAK;AAAA,QAAA,IAAAL,WAAA;AAAA,iBACzCT,EAAMS;AAAAA,QAAQ;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAIvB;"}
+{"version":3,"file":"menuComponent.js","sources":["../../../../src/components/navigation/menu/menuComponent.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport { useMenuContext } from \"./menuContext\";\nimport { MenuList } from \"./menuList\";\nimport { MenuFloating, type MenuFloatingProps } from \"./menuFloating\";\n\nexport function MenuComponent(props: ParentProps<MenuFloatingProps>): JSX.Element {\n  const ctx = useMenuContext();\n  // A static menu is the list itself: the caller's props go on its root, except\n  // the floating-only ones (isOpen would become a DOM attribute, onClose a\n  // \"close\" listener). Escape still reaches onClose through the menu context.\n  const [, listProps] = splitProps(props, [\"anchorElement\", \"isOpen\", \"onClose\", \"placement\", \"middleware\"]);\n  return (\n    <Show when={ctx.variant === \"static\"} fallback={<MenuFloating {...props} />}>\n      <MenuList {...listProps} />\n    </Show>\n  );\n}\n\nexport default MenuComponent;\n"],"names":["MenuComponent","props","ctx","useMenuContext","listProps","splitProps","_$createComponent","Show","when","variant","fallback","MenuFloating","children","MenuList"],"mappings":";;;;;AAKO,SAASA,EAAcC,GAAoD;AAChF,QAAMC,IAAMC,EAAAA,GAIN,GAAGC,CAAS,IAAIC,EAAWJ,GAAO,CAAC,iBAAiB,UAAU,WAAW,aAAa,YAAY,CAAC;AACzG,SAAAK,EACGC,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEN,EAAIO,YAAY;AAAA,IAAQ;AAAA,IAAA,IAAEC,WAAQ;AAAA,aAAAJ,EAAGK,GAAiBV,CAAK;AAAA,IAAA;AAAA,IAAA,IAAAW,WAAA;AAAA,aAAAN,EACpEO,GAAaT,CAAS;AAAA,IAAA;AAAA,EAAA,CAAA;AAG7B;"}

package/dist/components/navigation/menu/menuContext.d.ts

@@ -2,6 +2,8 @@ export interface MenuContextValue {
     dense: boolean;
     variant: "static" | "floating";
     onClose: () => void;
+    /** A submenu's own list: ArrowLeft in it closes the submenu (onClose). */
+    submenu?: boolean;
 }
 export declare const MenuContext: import("solid-js").Context<MenuContextValue>;
 export declare function useMenuContext(): MenuContextValue;

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

@@ -1 +1 @@
-{"version":3,"file":"menuContext.js","sources":["../../../../src/components/navigation/menu/menuContext.ts"],"sourcesContent":["import { createContext, useContext } from \"solid-js\";\n\nexport interface MenuContextValue {\n  dense: boolean;\n  variant: \"static\" | \"floating\";\n  onClose: () => void;\n}\n\nexport const MenuContext = createContext<MenuContextValue>({\n  dense: false,\n  variant: \"floating\",\n  onClose: () => undefined,\n});\n\nexport function useMenuContext(): MenuContextValue {\n  return useContext(MenuContext);\n}\n"],"names":["MenuContext","createContext","useMenuContext","useContext"],"mappings":";AAQO,MAAMA,IAAcC,EAAgC;AAAA,EACzD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAA;AAAA;AACX,CAAC;AAEM,SAASC,IAAmC;AACjD,SAAOC,EAAWH,CAAW;AAC/B;"}
+{"version":3,"file":"menuContext.js","sources":["../../../../src/components/navigation/menu/menuContext.ts"],"sourcesContent":["import { createContext, useContext } from \"solid-js\";\n\nexport interface MenuContextValue {\n  dense: boolean;\n  variant: \"static\" | \"floating\";\n  onClose: () => void;\n  /** A submenu's own list: ArrowLeft in it closes the submenu (onClose). */\n  submenu?: boolean;\n}\n\nexport const MenuContext = createContext<MenuContextValue>({\n  dense: false,\n  variant: \"floating\",\n  onClose: () => undefined,\n});\n\nexport function useMenuContext(): MenuContextValue {\n  return useContext(MenuContext);\n}\n"],"names":["MenuContext","createContext","useMenuContext","useContext"],"mappings":";AAUO,MAAMA,IAAcC,EAAgC;AAAA,EACzD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAA;AAAA;AACX,CAAC;AAEM,SAASC,IAAmC;AACjD,SAAOC,EAAWH,CAAW;AAC/B;"}