@pathscale/ui 2.5.0 → 2.6.0

package/dist/components/live-chat/LiveChatPanel.generated.js

@@ -1,12 +1,12 @@
-import { createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./LiveChat.css";
-import { For, Show, createEffect, createSignal, onCleanup, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { For, Show, createEffect, createSignal, omit, onCleanup } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import button_0 from "../button/index.js";
 import input from "../input/index.js";
 import { CLASSES, componentRecipe } from "./LiveChat.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template('<div><div><div><svg xmlns=http://www.w3.org/2000/svg><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg><h3></h3></div><button><svg xmlns=http://www.w3.org/2000/svg><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12"></path></svg></button></div><div></div><div>'), _tmpl$3 = /*#__PURE__*/ template("<div><div></div><div><div><p></p></div><span>"), _tmpl$4 = /*#__PURE__*/ template("<span>");
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template('<div><div><div><svg><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg><h3></h3></div><button><svg><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12"></path></svg></button></div><div><!><!></div><div><!><!>'), _tmpl$3 = /*#__PURE__*/ template("<div><div></div><div><div><p></p></div><span>"), _tmpl$4 = /*#__PURE__*/ template("<span>");
 const getMockMessages = ()=>{
     const salesMessages = [
         {
@@ -65,23 +65,7 @@ const formatTime = (timestamp)=>new Intl.DateTimeFormat("en-US", {
         hour12: true
     }).format(new Date(timestamp));
 const __solidLayoutLiveChatPanel = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "onClose",
-        "title",
-        "placeholder",
-        "closeLabel",
-        "sendLabel",
-        "emptyMessage",
-        "mockMode",
-        "messages",
-        "onSendMessage",
-        "isSending",
-        "autoScrollOnNewMessage",
-        "autoScrollBehavior",
-        "stickToBottomThreshold",
-        "class",
-        "style"
-    ]);
+    const others = omit(p, "onClose", "title", "placeholder", "closeLabel", "sendLabel", "emptyMessage", "mockMode", "messages", "onSendMessage", "isSending", "autoScrollOnNewMessage", "autoScrollBehavior", "stickToBottomThreshold", "class", "style");
     const [internalMessages, setInternalMessages] = createSignal([]);
     const [inputValue, setInputValue] = createSignal("");
     const [sending, setSending] = createSignal(false);
@@ -92,15 +76,15 @@ const __solidLayoutLiveChatPanel = (_stable, p)=>{
     let scrollRafId;
     let scrollRafNestedId;
     createEffect(()=>{
-        if (local.mockMode) setInternalMessages(getMockMessages());
-        else if (local.messages) setInternalMessages(local.messages);
+        if (p.mockMode) setInternalMessages(getMockMessages());
+        else if (p.messages) setInternalMessages(p.messages);
     });
     createEffect(()=>{
-        if (!local.mockMode && local.messages) setInternalMessages(local.messages);
+        if (!p.mockMode && p.messages) setInternalMessages(p.messages);
     });
-    const isSending = ()=>local.isSending ?? sending();
-    const autoScrollOnNewMessage = ()=>local.autoScrollOnNewMessage ?? true;
-    const autoScrollBehavior = ()=>local.autoScrollBehavior ?? "instant";
+    const isSending = ()=>p.isSending ?? sending();
+    const autoScrollOnNewMessage = ()=>p.autoScrollOnNewMessage ?? true;
+    const autoScrollBehavior = ()=>p.autoScrollBehavior ?? "instant";
     const scrollToBottom = ()=>{
         if (!scrollContainer) return;
         if ("smooth" === autoScrollBehavior()) return void scrollContainer.scrollTo({
@@ -148,7 +132,7 @@ const __solidLayoutLiveChatPanel = (_stable, p)=>{
     const handleSend = async ()=>{
         const content = inputValue().trim();
         if (!content || isSending()) return;
-        if (local.mockMode) {
+        if (p.mockMode) {
             const userMessage = {
                 messageId: `user-${Date.now()}`,
                 content,
@@ -172,10 +156,10 @@ const __solidLayoutLiveChatPanel = (_stable, p)=>{
                         agentMessage
                     ]);
             }, 1000);
-        } else if (local.onSendMessage) {
+        } else if (p.onSendMessage) {
             setSending(true);
             try {
-                const response = await local.onSendMessage({
+                const response = await p.onSendMessage({
                     message: content
                 });
                 const userMessage = {
@@ -202,153 +186,151 @@ const __solidLayoutLiveChatPanel = (_stable, p)=>{
             handleSend();
         }
     };
-    const classes = ()=>twMerge(CLASSES.panel.base, local.class);
-    return (()=>{
-        var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$3.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$2.nextSibling, _el$0 = _el$8.nextSibling;
-        spread(_el$, mergeProps(others, ()=>({
-                class: classes()
-            }), {
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        spread(_el$2, mergeProps(()=>({
-                class: CLASSES.panel.header
-            })), false, true);
-        spread(_el$3, mergeProps(()=>({
-                class: CLASSES.panel.headerTitleWrap
-            })), false, true);
-        spread(_el$4, mergeProps(()=>({
-                class: CLASSES.panel.headerIcon
-            }), {
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor"
-        }), true, true);
-        spread(_el$5, mergeProps(()=>({
-                class: CLASSES.panel.headerTitle
-            })), false, true);
-        insert(_el$5, ()=>local.title ?? "Chat with us");
-        spread(_el$6, mergeProps({
-            get onClick () {
-                return local.onClose;
-            }
-        }, ()=>({
-                class: CLASSES.panel.closeButton
-            }), {
-            get ["aria-label"] () {
-                return local.closeLabel ?? "Close chat";
-            }
-        }), false, true);
-        spread(_el$7, mergeProps(()=>({
-                class: CLASSES.panel.closeIcon
-            }), {
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor"
-        }), true, true);
-        use((element)=>{
+    const classes = ()=>twMerge(CLASSES.panel.base, p.class);
+    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$3.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$2.nextSibling, _el$0 = _el$8.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$8.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling;
+    spread(_el$, mergeProps(others, ()=>({
+            class: classes()
+        }), {
+        get style () {
+            return p.style;
+        }
+    }), true);
+    spread(_el$2, mergeProps(()=>({
+            class: CLASSES.panel.header
+        })), true);
+    spread(_el$3, mergeProps(()=>({
+            class: CLASSES.panel.headerTitleWrap
+        })), true);
+    spread(_el$4, mergeProps({
+        xmlns: "http://www.w3.org/2000/svg"
+    }, ()=>({
+            class: CLASSES.panel.headerIcon
+        }), {
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor"
+    }), true);
+    spread(_el$5, mergeProps(()=>({
+            class: CLASSES.panel.headerTitle
+        })), true);
+    insert(_el$5, ()=>p.title ?? "Chat with us");
+    spread(_el$6, mergeProps({
+        get onClick () {
+            return p.onClose;
+        }
+    }, ()=>({
+            class: CLASSES.panel.closeButton
+        }), {
+        get ["aria-label"] () {
+            return p.closeLabel ?? "Close chat";
+        }
+    }), true);
+    spread(_el$7, mergeProps({
+        xmlns: "http://www.w3.org/2000/svg"
+    }, ()=>({
+            class: CLASSES.panel.closeIcon
+        }), {
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor"
+    }), true);
+    ref(()=>(element)=>{
             scrollContainer = element;
         }, _el$8);
-        spread(_el$8, mergeProps(()=>({
-                class: CLASSES.panel.messages
-            })), false, true);
-        insert(_el$8, createComponent(For, {
-            get each () {
-                return internalMessages();
-            },
-            children: (message)=>{
-                const isUser = "user" === message.sender;
-                return (()=>{
-                    var _el$1 = _tmpl$3(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling;
-                    spread(_el$1, mergeProps(()=>({
-                            class: twMerge(CLASSES.panel.row, isUser ? CLASSES.panel.rowUser : CLASSES.panel.rowAgent)
-                        })), false, true);
-                    spread(_el$10, mergeProps(()=>({
-                            class: twMerge(CLASSES.panel.avatar, isUser ? CLASSES.panel.avatarUser : CLASSES.panel.avatarAgent)
-                        })), false, true);
-                    insert(_el$10, isUser ? "U" : "A");
-                    spread(_el$11, mergeProps(()=>({
-                            class: twMerge(CLASSES.panel.messageColumn, isUser ? CLASSES.panel.messageColumnUser : CLASSES.panel.messageColumnAgent)
-                        })), false, true);
-                    spread(_el$12, mergeProps(()=>({
-                            class: twMerge(CLASSES.panel.messageBubble, isUser ? CLASSES.panel.messageBubbleUser : CLASSES.panel.messageBubbleAgent)
-                        })), false, true);
-                    spread(_el$13, mergeProps(()=>({
-                            class: CLASSES.panel.messageText
-                        })), false, true);
-                    insert(_el$13, ()=>message.content);
-                    spread(_el$14, mergeProps(()=>({
-                            class: CLASSES.panel.timestamp
-                        })), false, true);
-                    insert(_el$14, ()=>formatTime(message.timestamp));
-                    return _el$1;
-                })();
-            }
-        }), null);
-        insert(_el$8, createComponent(Show, {
-            get when () {
-                return 0 === internalMessages().length;
-            },
-            get children () {
-                var _el$9 = _tmpl$();
-                spread(_el$9, mergeProps(()=>({
-                        class: CLASSES.panel.empty
-                    })), false, true);
-                insert(_el$9, ()=>local.emptyMessage ?? "No messages yet. Start a conversation!");
-                return _el$9;
-            }
-        }), null);
-        spread(_el$0, mergeProps(()=>({
-                class: CLASSES.panel.inputArea
-            })), false, true);
-        insert(_el$0, createComponent(input, mergeProps({
-            type: "text",
-            get value () {
-                return inputValue();
-            },
-            onInput: (e)=>setInputValue(e.currentTarget.value),
-            onKeyPress: handleKeyPress,
-            get placeholder () {
-                return local.placeholder ?? "Message support...";
-            },
-            get disabled () {
-                return isSending();
-            }
-        }, ()=>({
-                class: CLASSES.panel.input
-            }))), null);
-        insert(_el$0, createComponent(button_0, mergeProps({
-            onClick: handleSend,
-            get state () {
-                return memo(()=>!!isSending())() ? "loading" : inputValue().trim() ? "default" : "disabled";
-            }
-        }, ()=>({
-                class: CLASSES.panel.sendButton
-            }), {
-            flavor: "primary",
-            get children () {
-                return createComponent(Show, {
-                    get when () {
-                        return !isSending();
-                    },
-                    get fallback () {
-                        return (()=>{
-                            var _el$15 = _tmpl$4();
-                            spread(_el$15, mergeProps(()=>({
-                                    class: CLASSES.panel.spinner
-                                })), false, false);
-                            return _el$15;
-                        })();
-                    },
-                    get children () {
-                        return local.sendLabel ?? "Send";
-                    }
-                });
-            }
-        })), null);
-        return _el$;
-    })();
+    spread(_el$8, mergeProps(()=>({
+            class: CLASSES.panel.messages
+        })), true);
+    insert(_el$8, createComponent(For, {
+        get each () {
+            return internalMessages();
+        },
+        children: (message)=>{
+            const isUser = "user" === message.sender;
+            var _el$13 = _tmpl$3(), _el$14 = _el$13.firstChild, _el$15 = _el$14.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$16.nextSibling;
+            spread(_el$13, mergeProps(()=>({
+                    class: twMerge(CLASSES.panel.row, isUser ? CLASSES.panel.rowUser : CLASSES.panel.rowAgent)
+                })), true);
+            spread(_el$14, mergeProps(()=>({
+                    class: twMerge(CLASSES.panel.avatar, isUser ? CLASSES.panel.avatarUser : CLASSES.panel.avatarAgent)
+                })), true);
+            insert(_el$14, isUser ? "U" : "A");
+            spread(_el$15, mergeProps(()=>({
+                    class: twMerge(CLASSES.panel.messageColumn, isUser ? CLASSES.panel.messageColumnUser : CLASSES.panel.messageColumnAgent)
+                })), true);
+            spread(_el$16, mergeProps(()=>({
+                    class: twMerge(CLASSES.panel.messageBubble, isUser ? CLASSES.panel.messageBubbleUser : CLASSES.panel.messageBubbleAgent)
+                })), true);
+            spread(_el$17, mergeProps(()=>({
+                    class: CLASSES.panel.messageText
+                })), true);
+            insert(_el$17, ()=>message.content);
+            spread(_el$18, mergeProps(()=>({
+                    class: CLASSES.panel.timestamp
+                })), true);
+            insert(_el$18, ()=>formatTime(message.timestamp));
+            return _el$13;
+        }
+    }), _el$0);
+    insert(_el$8, createComponent(Show, {
+        get when () {
+            return 0 === internalMessages().length;
+        },
+        get children () {
+            var _el$9 = _tmpl$();
+            spread(_el$9, mergeProps(()=>({
+                    class: CLASSES.panel.empty
+                })), true);
+            insert(_el$9, ()=>p.emptyMessage ?? "No messages yet. Start a conversation!");
+            return _el$9;
+        }
+    }), _el$1);
+    spread(_el$10, mergeProps(()=>({
+            class: CLASSES.panel.inputArea
+        })), true);
+    insert(_el$10, createComponent(input, mergeProps({
+        type: "text",
+        get value () {
+            return inputValue();
+        },
+        onInput: (e)=>setInputValue(e.currentTarget.value),
+        onKeyPress: handleKeyPress,
+        get placeholder () {
+            return p.placeholder ?? "Message support...";
+        },
+        get disabled () {
+            return isSending();
+        }
+    }, ()=>({
+            class: CLASSES.panel.input
+        }))), _el$11);
+    insert(_el$10, createComponent(button_0, mergeProps({
+        onClick: handleSend,
+        get state () {
+            return memo(()=>!!isSending())() ? "loading" : inputValue().trim() ? "default" : "disabled";
+        }
+    }, ()=>({
+            class: CLASSES.panel.sendButton
+        }), {
+        flavor: "primary",
+        get children () {
+            return createComponent(Show, {
+                get when () {
+                    return !isSending();
+                },
+                get fallback () {
+                    var _el$19 = _tmpl$4();
+                    spread(_el$19, mergeProps(()=>({
+                            class: CLASSES.panel.spinner
+                        })), false);
+                    return _el$19;
+                },
+                get children () {
+                    return p.sendLabel ?? "Send";
+                }
+            });
+        }
+    })), _el$12);
+    return _el$;
 };
 const LiveChatPanel = defineComponent({
     recipe: componentRecipe,

package/dist/components/menu/Menu.generated.d.ts

@@ -1,7 +1,8 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Menu.css";
-import { type JSX } from "solid-js";
-import type { UIBaseProps, State } from "../vocabulary";
+import type { JSX } from "@solidjs/web";
+import "../_shared/material.css";
+import type { Material, State, UIBaseProps } from "../vocabulary";
 import { type MenuSelectionMode } from "./context";
 import MenuItem, { MenuItemIndicator, MenuItemRoot } from "./MenuItem.generated";
 import MenuSection, { MenuSectionRoot } from "./MenuSection.generated";
@@ -18,6 +19,8 @@ export type MenuRootProps<T = unknown> = Omit<JSX.HTMLAttributes<HTMLDivElement>
     onAction?: (key: string) => void;
     state?: State;
     disabled?: boolean;
+    /** What the surface is made of. `solid` by default. */
+    material?: Material;
 };
 declare const MenuRoot: __LayoutComponent<MenuRootProps>;
 declare const Menu: __LayoutComponent<MenuRootProps<unknown>> & {

package/dist/components/menu/Menu.generated.js

@@ -1,8 +1,9 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Menu.css";
-import { For, createMemo, createSignal, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { For, createMemo, createSignal, omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
+import "../_shared/material.css";
 import { CLASSES, componentRecipe } from "./Menu.recipe.js";
 import { MenuContext } from "./context.js";
 import MenuItem_generated, { MenuItemIndicator, MenuItemRoot } from "./MenuItem.generated.js";
@@ -26,33 +27,15 @@ const invokeEventHandler = (handler, event)=>{
     if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
 };
 const __solidLayoutMenuRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "items",
-        "renderEmpty",
-        "selectionMode",
-        "selectedKeys",
-        "defaultSelectedKeys",
-        "disabledKeys",
-        "disallowEmptySelection",
-        "onSelectionChange",
-        "onAction",
-        "state",
-        "disabled",
-        "role",
-        "onKeyDown"
-    ]);
-    const [internalSelectedKeys, setInternalSelectedKeys] = createSignal(normalizeKeys(local.defaultSelectedKeys));
+    const others = omit(p, "children", "class", "dataTheme", "style", "items", "renderEmpty", "selectionMode", "selectedKeys", "defaultSelectedKeys", "disabledKeys", "disallowEmptySelection", "onSelectionChange", "onAction", "material", "state", "disabled", "role", "onKeyDown");
+    const [internalSelectedKeys, setInternalSelectedKeys] = createSignal(normalizeKeys(p.defaultSelectedKeys));
     const [focusedKey, setFocusedKey] = createSignal();
     const [registeredItems, setRegisteredItems] = createSignal([]);
-    const selectionMode = ()=>local.selectionMode ?? "none";
-    const isControlled = ()=>void 0 !== local.selectedKeys;
-    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
-    const selectedKeys = createMemo(()=>isControlled() ? normalizeKeys(local.selectedKeys) : internalSelectedKeys());
-    const disabledKeys = createMemo(()=>normalizeKeys(local.disabledKeys));
+    const selectionMode = ()=>p.selectionMode ?? "none";
+    const isControlled = ()=>void 0 !== p.selectedKeys;
+    const isDisabled = ()=>Boolean("disabled" === p.state) || Boolean(p.disabled);
+    const selectedKeys = createMemo(()=>isControlled() ? normalizeKeys(p.selectedKeys) : internalSelectedKeys());
+    const disabledKeys = createMemo(()=>normalizeKeys(p.disabledKeys));
     const getEnabledItems = ()=>registeredItems().filter((item)=>!item.disabled && !disabledKeys().has(item.key) && !isDisabled());
     const focusItem = (item)=>{
         if (!item) return;
@@ -81,27 +64,27 @@ const __solidLayoutMenuRoot = (_stable, p)=>{
     };
     const updateSelection = (nextKeys)=>{
         if (!isControlled()) setInternalSelectedKeys(nextKeys);
-        local.onSelectionChange?.(nextKeys);
+        p.onSelectionChange?.(nextKeys);
     };
     const activateKey = (key, event)=>{
         if (event.defaultPrevented || isDisabled()) return;
         if (disabledKeys().has(key)) return;
-        if ("none" === selectionMode()) return void local.onAction?.(key);
+        if ("none" === selectionMode()) return void p.onAction?.(key);
         const current = selectedKeys();
         if ("single" === selectionMode()) {
             if (!(1 === current.size && current.has(key))) updateSelection(new Set([
                 key
             ]));
-            local.onAction?.(key);
+            p.onAction?.(key);
             return;
         }
         const next = new Set(current);
         if (next.has(key)) {
-            if (local.disallowEmptySelection && 1 === next.size) return void local.onAction?.(key);
+            if (p.disallowEmptySelection && 1 === next.size) return void p.onAction?.(key);
             next.delete(key);
         } else next.add(key);
         updateSelection(next);
-        local.onAction?.(key);
+        p.onAction?.(key);
     };
     const registerItem = (item)=>{
         setRegisteredItems((current)=>sortItemsByDomOrder([
@@ -125,7 +108,7 @@ const __solidLayoutMenuRoot = (_stable, p)=>{
         return -1;
     };
     const handleKeyDown = (event)=>{
-        invokeEventHandler(local.onKeyDown, event);
+        invokeEventHandler(p.onKeyDown, event);
         if (event.defaultPrevented) return;
         if (event.target !== event.currentTarget) return;
         if ("ArrowDown" === event.key || "ArrowRight" === event.key) {
@@ -146,15 +129,15 @@ const __solidLayoutMenuRoot = (_stable, p)=>{
         }
     };
     const renderChildren = ()=>{
-        const isItemRenderer = "function" == typeof local.children && local.children.length > 0;
-        const resolvedStaticChildren = "function" == typeof local.children ? isItemRenderer ? null : local.children() : local.children ?? null;
-        if (local.items) {
-            if (0 === local.items.length) return local.renderEmpty?.() ?? null;
+        const isItemRenderer = "function" == typeof p.children && p.children.length > 0;
+        const resolvedStaticChildren = "function" == typeof p.children ? isItemRenderer ? null : p.children() : p.children ?? null;
+        if (p.items) {
+            if (0 === p.items.length) return p.renderEmpty?.() ?? null;
             if (isItemRenderer) {
-                const renderItem = local.children;
+                const renderItem = p.children;
                 return createComponent(For, {
                     get each () {
-                        return local.items;
+                        return p.items;
                     },
                     children: (item)=>renderItem(item)
                 });
@@ -162,7 +145,7 @@ const __solidLayoutMenuRoot = (_stable, p)=>{
         }
         return resolvedStaticChildren;
     };
-    return createComponent(MenuContext.Provider, {
+    return createComponent(MenuContext, {
         value: {
             selectionMode,
             selectedKeys,
@@ -183,14 +166,17 @@ const __solidLayoutMenuRoot = (_stable, p)=>{
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(others, {
                 get role () {
-                    return local.role ?? "menu";
+                    return p.role ?? "menu";
                 },
                 get ["aria-disabled"] () {
                     return isDisabled() ? "true" : void 0;
                 },
                 "data-slot": "menu",
+                get ["data-material"] () {
+                    return p.material ?? "solid";
+                },
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get ["data-selection-mode"] () {
                     return selectionMode();
@@ -199,13 +185,13 @@ const __solidLayoutMenuRoot = (_stable, p)=>{
                     return isDisabled() ? "true" : "false";
                 }
             }, ()=>({
-                    class: twMerge(CLASSES.Root.base, local.class)
+                    class: twMerge(CLASSES.Root.base, p.class)
                 }), {
                 get style () {
-                    return local.style;
+                    return p.style;
                 },
                 onKeyDown: handleKeyDown
-            }), false, true);
+            }), true);
             insert(_el$, renderChildren);
             return _el$;
         }

package/dist/components/menu/Menu.recipe.d.ts

@@ -18,7 +18,7 @@ export declare const CLASSES: {
         readonly title: "menu-section__title";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "menu";
     readonly slots: {
         readonly heading: {};

package/dist/components/menu/MenuItem.generated.d.ts

@@ -1,5 +1,5 @@
 import type { Component as __LayoutComponent } from "solid-js";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps, State } from "../vocabulary";
 import { type MenuItemVariant, type MenuSelectionMode } from "./context";
 type MenuItemRenderProps = {