@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/_chunk/menu.js

@@ -1,74 +1,186 @@
+/*
+* Copyright 2023 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@adobe/react-spectrum/src/menu/ContextualHelpTrigger.tsx
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Menu.tsx
 import { mergeStyles } from "../style/runtime.js";
-import { useProviderProps, useTheme } from "../provider/index.js";
+import { a as useProviderProps } from "./provider.js";
+import { i as ToggleButtonContext, t as ActionButtonContext } from "./context.js";
 import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "./spectrum-context.js";
 import { t as s2IntlStrings } from "./intl.js";
 import { centerBaseline } from "../icon/center-baseline.js";
 import { pressScale } from "../pressScale.js";
 import { a as createUIIcon, t as IconContext } from "./spectrum-icon.js";
-import { c as TextContext, f as HeadingContext, l as Keyboard, o as HeaderContext, s as Text, u as KeyboardContext } from "./text.js";
-import { _ as menuSectionHeader, a as menuItemCheckboxIcon, c as menuItemDescriptor, d as menuItemIconCenterWrapper, f as menuItemKeyboard, g as menuSection, h as menuPopover, i as menuItemCheckbox, l as menuItemDescriptorIcon, m as menuItemValue, n as menuFrame, o as menuItemCheckmark, p as menuItemLabel, r as menuItem, s as menuItemDescription, t as menu, u as menuItemIcon, v as menuSectionHeading } from "./s2-menu-styles.js";
-import { t as Checkmark } from "./Checkmark.js";
+import { n as KeyboardContext, t as Keyboard } from "./Keyboard.js";
+import { c as TextContext$1, o as HeaderContext, s as Text$1, u as HeadingContext } from "./text.js";
+import { _ as menuSectionHeading, a as menuItemCheckboxIcon, c as menuItemDescriptor, d as menuItemIconCenterWrapper, f as menuItemKeyboard, g as menuSectionHeader, h as menuSection, i as menuItemCheckbox, l as menuItemDescriptorIcon, m as menuItemValue, n as menuFrame, o as menuItemCheckmark, p as menuItemLabel, r as menuItem, s as menuItemDescription, t as menu, u as menuItemIcon } from "./s2-menu-styles.js";
 import { t as Chevron } from "./Chevron.js";
+import { Popover as Popover$1 } from "../popover/index.js";
+import { t as Checkmark } from "./Checkmark.js";
 import { t as InfoCircleIcon } from "./InfoCircleIcon.js";
-import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, spread, style, template } from "solid-js/web";
-import { Show, createContext, createSignal, createUniqueId, mergeProps as mergeProps$1, splitProps, useContext } from "solid-js";
-import { createStringFormatter, useLocale } from "@proyecto-viviana/solidaria";
-import { Collection, ContextualHelpTrigger, Menu, MenuButton, MenuItem, MenuSection, MenuTrigger, MenuTriggerContext, Popover, PopoverTriggerContext, SubmenuTrigger, usePopoverTrigger } from "@proyecto-viviana/solidaria-components";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, readShallow, runHydrationEvents, scope, setAttribute, spread, style, template } from "@solidjs/web";
+import { Show, createContext, createSignal, createUniqueId, useContext } from "solid-js";
+import { attrString, mergeProps as mergeProps$1, splitProps } from "@proyecto-viviana/solidaria/utils";
+import { Button, Collection, ContextualHelpTrigger, Menu, MenuItem, MenuSection, MenuTrigger, MenuTriggerContext, PopoverTriggerContext, SubmenuTrigger, usePopoverTrigger } from "@proyecto-viviana/solidaria-components";
+import { createStringFormatter, mergeProps as mergeProps$2, useLocale } from "@proyecto-viviana/solidaria";
 //#region src/menu/menu-context.ts
 const MenuSizeContext = createContext("M");
 const MenuLinkOutIconContext = createContext(false);
 const MenuTriggerOptionsContext = createContext(null);
 //#endregion
 //#region src/icon/ui-icons/LinkOut.tsx
-var _tmpl$$2 = /*#__PURE__*/ template(`<svg xmlns=http://www.w3.org/2000/svg width=10 height=10 viewBox="0 0 10 10"><path fill="var(--iconPrimary, #222)"d="M8.125 1H3.741a.875.875 0 1 0 0 1.75h2.27l-4.88 4.88a.88.88 0 0 0 0 1.24.873.873 0 0 0 1.238 0L7.25 3.987v2.27a.875.875 0 1 0 1.75 0V1.876A.875.875 0 0 0 8.125 1">`), _tmpl$2$2 = /*#__PURE__*/ template(`<svg xmlns=http://www.w3.org/2000/svg width=12 height=12 viewBox="0 0 12 12"><path fill="var(--iconPrimary, #222)"d="M10.089 1h-5.51a.911.911 0 0 0 0 1.822h3.31L1.355 9.355a.91.91 0 1 0 1.29 1.29L9.178 4.11v3.31a.911.911 0 0 0 1.822 0v-5.51A.91.91 0 0 0 10.089 1">`), _tmpl$3$2 = /*#__PURE__*/ template(`<svg xmlns=http://www.w3.org/2000/svg width=14 height=14 viewBox="0 0 14 14"><path fill="var(--iconPrimary, #222)"d="M12.05 1H5.164a.949.949 0 1 0 0 1.898h4.595l-8.18 8.18a.95.95 0 0 0 1.344 1.344l8.18-8.18v4.595a.949.949 0 1 0 1.898 0V1.949A.95.95 0 0 0 12.05 1">`), _tmpl$4$2 = /*#__PURE__*/ template(`<svg xmlns=http://www.w3.org/2000/svg width=16 height=16 viewBox="0 0 16 16"><path fill="var(--iconPrimary, #222)"d="M14.01 1h-8a.99.99 0 0 0 0 1.979h5.613L1.551 13.05a.988.988 0 1 0 1.398 1.398L13.021 4.377v5.612a.99.99 0 0 0 1.979 0v-8A.99.99 0 0 0 14.01 1">`);
+var _tmpl$$2 = /* @__PURE__ */ template(`<svg><path fill="var(--iconPrimary, #222)"d="M8.125 1H3.741a.875.875 0 1 0 0 1.75h2.27l-4.88 4.88a.88.88 0 0 0 0 1.24.873.873 0 0 0 1.238 0L7.25 3.987v2.27a.875.875 0 1 0 1.75 0V1.876A.875.875 0 0 0 8.125 1">`);
+var _tmpl$2$2 = /* @__PURE__ */ template(`<svg><path fill="var(--iconPrimary, #222)"d="M10.089 1h-5.51a.911.911 0 0 0 0 1.822h3.31L1.355 9.355a.91.91 0 1 0 1.29 1.29L9.178 4.11v3.31a.911.911 0 0 0 1.822 0v-5.51A.91.91 0 0 0 10.089 1">`);
+var _tmpl$3$2 = /* @__PURE__ */ template(`<svg><path fill="var(--iconPrimary, #222)"d="M12.05 1H5.164a.949.949 0 1 0 0 1.898h4.595l-8.18 8.18a.95.95 0 0 0 1.344 1.344l8.18-8.18v4.595a.949.949 0 1 0 1.898 0V1.949A.95.95 0 0 0 12.05 1">`);
+var _tmpl$4$2 = /* @__PURE__ */ template(`<svg><path fill="var(--iconPrimary, #222)"d="M14.01 1h-8a.99.99 0 0 0 0 1.979h5.613L1.551 13.05a.988.988 0 1 0 1.398 1.398L13.021 4.377v5.612a.99.99 0 0 0 1.979 0v-8A.99.99 0 0 0 14.01 1">`);
+const styles = function anonymous(props) {
+	let rules = " ";
+	if (props.size === "XXL") rules += " Zu17";
+	else if (props.size === "XL") rules += " Zk17";
+	else if (props.size === "L") rules += " Zj17";
+	else if (props.size === "M") rules += " Zi17";
+	if (props.size === "XXL") rules += " Ft17";
+	else if (props.size === "XL") rules += " Fl17";
+	else if (props.size === "L") rules += " Fk17";
+	else if (props.size === "M") rules += " Fj17";
+	return rules;
+};
 function LinkOut_MSvg(props) {
-	const { class: className, width: _width, height: _height, ...rest } = props;
-	return (() => {
-		var _el$ = getNextElement(_tmpl$$2);
-		spread(_el$, mergeProps(rest, { "class": className }), true, true);
-		runHydrationEvents();
-		return _el$;
-	})();
+	const [local, rest] = splitProps(props, [
+		"class",
+		"width",
+		"height"
+	]);
+	var _el$ = getNextElement(_tmpl$$2);
+	spread(_el$, [
+		{
+			xmlns: "http://www.w3.org/2000/svg",
+			width: "10",
+			height: "10",
+			viewBox: "0 0 10 10"
+		},
+		rest,
+		{ get "class"() {
+			return local.class;
+		} }
+	], true);
+	runHydrationEvents();
+	return _el$;
 }
 function LinkOut_LSvg(props) {
-	const { class: className, width: _width, height: _height, ...rest } = props;
-	return (() => {
-		var _el$2 = getNextElement(_tmpl$2$2);
-		spread(_el$2, mergeProps(rest, { "class": className }), true, true);
-		runHydrationEvents();
-		return _el$2;
-	})();
+	const [local, rest] = splitProps(props, [
+		"class",
+		"width",
+		"height"
+	]);
+	var _el$2 = getNextElement(_tmpl$2$2);
+	spread(_el$2, [
+		{
+			xmlns: "http://www.w3.org/2000/svg",
+			width: "12",
+			height: "12",
+			viewBox: "0 0 12 12"
+		},
+		rest,
+		{ get "class"() {
+			return local.class;
+		} }
+	], true);
+	runHydrationEvents();
+	return _el$2;
 }
 function LinkOut_XLSvg(props) {
-	const { class: className, width: _width, height: _height, ...rest } = props;
-	return (() => {
-		var _el$3 = getNextElement(_tmpl$3$2);
-		spread(_el$3, mergeProps(rest, { "class": className }), true, true);
-		runHydrationEvents();
-		return _el$3;
-	})();
+	const [local, rest] = splitProps(props, [
+		"class",
+		"width",
+		"height"
+	]);
+	var _el$3 = getNextElement(_tmpl$3$2);
+	spread(_el$3, [
+		{
+			xmlns: "http://www.w3.org/2000/svg",
+			width: "14",
+			height: "14",
+			viewBox: "0 0 14 14"
+		},
+		rest,
+		{ get "class"() {
+			return local.class;
+		} }
+	], true);
+	runHydrationEvents();
+	return _el$3;
 }
 function LinkOut_XXLSvg(props) {
-	const { class: className, width: _width, height: _height, ...rest } = props;
-	return (() => {
-		var _el$4 = getNextElement(_tmpl$4$2);
-		spread(_el$4, mergeProps(rest, { "class": className }), true, true);
-		runHydrationEvents();
-		return _el$4;
-	})();
+	const [local, rest] = splitProps(props, [
+		"class",
+		"width",
+		"height"
+	]);
+	var _el$4 = getNextElement(_tmpl$4$2);
+	spread(_el$4, [
+		{
+			xmlns: "http://www.w3.org/2000/svg",
+			width: "16",
+			height: "16",
+			viewBox: "0 0 16 16"
+		},
+		rest,
+		{ get "class"() {
+			return local.class;
+		} }
+	], true);
+	runHydrationEvents();
+	return _el$4;
 }
 const LinkOut_M = createUIIcon(LinkOut_MSvg);
 const LinkOut_L = createUIIcon(LinkOut_LSvg);
 const LinkOut_XL = createUIIcon(LinkOut_XLSvg);
 const LinkOut_XXL = createUIIcon(LinkOut_XXLSvg);
 function LinkOut(props) {
-	const { size = "M", class: className, width: _width, height: _height, ...rest } = props;
+	const [local, rest] = splitProps(props, [
+		"size",
+		"class",
+		"width",
+		"height"
+	]);
+	const size = local.size ?? "M";
+	const mergedClass = () => `${local.class ?? ""}${styles({ size })}`;
 	switch (size) {
-		case "M": return createComponent(LinkOut_M, mergeProps(rest, { "class": className }));
-		case "L": return createComponent(LinkOut_L, mergeProps(rest, { "class": className }));
-		case "XL": return createComponent(LinkOut_XL, mergeProps(rest, { "class": className }));
-		case "XXL": return createComponent(LinkOut_XXL, mergeProps(rest, { "class": className }));
-		default: return createComponent(LinkOut_M, mergeProps(rest, { "class": className }));
+		case "M": return createComponent(LinkOut_M, mergeProps(rest, { get "class"() {
+			return mergedClass();
+		} }));
+		case "L": return createComponent(LinkOut_L, mergeProps(rest, { get "class"() {
+			return mergedClass();
+		} }));
+		case "XL": return createComponent(LinkOut_XL, mergeProps(rest, { get "class"() {
+			return mergedClass();
+		} }));
+		case "XXL": return createComponent(LinkOut_XXL, mergeProps(rest, { get "class"() {
+			return mergedClass();
+		} }));
+		default: return createComponent(LinkOut_M, mergeProps(rest, { get "class"() {
+			return mergedClass();
+		} }));
 	}
 }
 //#endregion
@@ -81,10 +193,20 @@ function SubmenuTrigger$1(props) {
 }
 //#endregion
 //#region src/menu/ContextualHelpTrigger.tsx
-var _tmpl$$1 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 16 16"fill=none aria-hidden=true><circle cx=8 cy=8 r=7 stroke=currentColor stroke-width=1.5></circle><text x=8 y=12 text-anchor=middle fill=currentColor font-size=10 font-weight=bold>?`), _tmpl$2$1 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 16 16"fill=none aria-hidden=true><circle cx=8 cy=8 r=7 stroke=currentColor stroke-width=1.5></circle><text x=8 y=12 text-anchor=middle fill=currentColor font-size=10 font-weight=bold>i`), _tmpl$3$1 = /*#__PURE__*/ template(`<span style=display:inline-flex;align-items:center;gap:4px><!$><!/><!$><!/>`), _tmpl$4$1 = /*#__PURE__*/ template(`<span>`), _tmpl$5$1 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/>`), _tmpl$6 = /*#__PURE__*/ template(`<div style=font-weight:600;margin-bottom:4px>`), _tmpl$7 = /*#__PURE__*/ template(`<p style=margin:0>`);
-const triggerStyles = "qwNQeb";
-const helpIcon = getNextElement(_tmpl$$1);
-const infoIcon = getNextElement(_tmpl$2$1);
+var _tmpl$$1 = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 16 16"fill=none aria-hidden=true><circle cx=8 cy=8 r=7 stroke=currentColor stroke-width=1.5></circle><path d="M6.2 6.15c0-1.25 1.05-2.15 1.95-2.15.95 0 1.95.85 1.95 2.05 0 1.15-1.05 1.55-1.55 2.05-.4.4-.55.85-.55 1.45"stroke=currentColor stroke-width=1.4 stroke-linecap=round fill=none></path><circle cx=8 cy=12.15 r=0.85 fill=currentColor>`);
+var _tmpl$2$1 = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 16 16"fill=none aria-hidden=true><circle cx=8 cy=8 r=7 stroke=currentColor stroke-width=1.5></circle><circle cx=8 cy=5.15 r=1 fill=currentColor></circle><rect x=7.25 y=7.15 width=1.5 height=5 rx=0.6 fill=currentColor>`);
+var _tmpl$3$1 = /* @__PURE__ */ template(`<span style=display:inline-flex;align-items:center;gap:4px><!$><!/><!$><!/>`);
+var _tmpl$4$1 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/>`);
+var _tmpl$5$1 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div style=font-weight:600;margin-bottom:4px>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<p style=margin:0>`);
+const triggerStyles = "v3J7fb";
+function HelpIcon() {
+	return getNextElement(_tmpl$$1);
+}
+function InfoIcon() {
+	return getNextElement(_tmpl$2$1);
+}
 /**
 * A button that opens contextual help in a popover.
 *
@@ -98,8 +220,7 @@ const infoIcon = getNextElement(_tmpl$2$1);
 *   {[<span>Trigger</span>, <div>Content</div>]}
 * </ContextualHelpTrigger>
 * ```
-*/
-function ContextualHelpTrigger$1(props) {
+*/ function ContextualHelpTrigger$1(props) {
 	const [local, headlessProps] = splitProps(props, [
 		"class",
 		"title",
@@ -110,45 +231,68 @@ function ContextualHelpTrigger$1(props) {
 	]);
 	const children = () => {
 		if (local.children) return local.children;
-		const icon = local.variant === "info" ? infoIcon : helpIcon;
-		return [(() => {
-			var _el$3 = getNextElement(_tmpl$3$1), _el$4 = _el$3.firstChild, [_el$5, _co$] = getNextMarker(_el$4.nextSibling), _el$6 = _el$5.nextSibling, [_el$7, _co$2] = getNextMarker(_el$6.nextSibling);
-			insert(_el$3, icon, _el$5, _co$);
-			insert(_el$3, (() => {
-				var _c$ = memo(() => !!local.title);
-				return () => _c$() && (() => {
-					var _el$8 = getNextElement(_tmpl$4$1);
-					insert(_el$8, () => local.title);
-					return _el$8;
-				})();
-			})(), _el$7, _co$2);
-			return _el$3;
-		})(), (() => {
-			var _el$9 = getNextElement(_tmpl$5$1), _el$0 = _el$9.firstChild, [_el$1, _co$3] = getNextMarker(_el$0.nextSibling), _el$10 = _el$1.nextSibling, [_el$11, _co$4] = getNextMarker(_el$10.nextSibling);
-			insert(_el$9, (() => {
-				var _c$2 = memo(() => !!local.title);
-				return () => _c$2() && (() => {
-					var _el$12 = getNextElement(_tmpl$6);
-					insert(_el$12, () => local.title);
-					return _el$12;
-				})();
-			})(), _el$1, _co$3);
-			insert(_el$9, (() => {
-				var _c$3 = memo(() => !!local.content);
-				return () => _c$3() && (() => {
-					var _el$13 = getNextElement(_tmpl$7);
-					insert(_el$13, () => local.content);
-					return _el$13;
-				})();
-			})(), _el$11, _co$4);
-			return _el$9;
-		})()];
+		const icon = local.variant === "info" ? createComponent(InfoIcon, {}) : createComponent(HelpIcon, {});
+		var _el$3 = getNextElement(_tmpl$3$1);
+		var _el$4 = _el$3.firstChild;
+		var [_el$5, _el$6] = getNextMarker(_el$4.nextSibling);
+		var _el$7 = _el$5.nextSibling;
+		var [_el$8, _el$9] = getNextMarker(_el$7.nextSibling);
+		insert(_el$3, icon, _el$5, _el$6);
+		insert(_el$3, scope((() => {
+			var _c$ = memo(() => {
+				return !!local.title;
+			});
+			return () => {
+				return _c$() ? (() => {
+					var _el$17 = getNextElement(_tmpl$5$1);
+					insert(_el$17, () => {
+						return local.title;
+					});
+					return _el$17;
+				})() : local.title;
+			};
+		})()), _el$8, _el$9);
+		const trigger = _el$3;
+		var _el$10 = getNextElement(_tmpl$4$1);
+		var _el$11 = _el$10.firstChild;
+		var [_el$12, _el$13] = getNextMarker(_el$11.nextSibling);
+		var _el$14 = _el$12.nextSibling;
+		var [_el$15, _el$16] = getNextMarker(_el$14.nextSibling);
+		insert(_el$10, scope((() => {
+			var _c$2 = memo(() => {
+				return !!local.title;
+			});
+			return () => {
+				return _c$2() ? (() => {
+					var _el$18 = getNextElement(_tmpl$6);
+					insert(_el$18, () => {
+						return local.title;
+					});
+					return _el$18;
+				})() : local.title;
+			};
+		})()), _el$12, _el$13);
+		insert(_el$10, scope((() => {
+			var _c$3 = memo(() => {
+				return !!local.content;
+			});
+			return () => {
+				return _c$3() ? (() => {
+					var _el$19 = getNextElement(_tmpl$7);
+					insert(_el$19, () => {
+						return local.content;
+					});
+					return _el$19;
+				})() : local.content;
+			};
+		})()), _el$15, _el$16);
+		return [trigger, _el$10];
 	};
 	return createComponent(ContextualHelpTrigger, mergeProps(headlessProps, {
-		get ["aria-label"]() {
-			return local["aria-label"] ?? local.title ?? "Contextual help";
+		get "aria-label"() {
+			return local["aria-label"] ?? (local.children || local.title ? void 0 : "Contextual help");
 		},
-		get ["class"]() {
+		get "class"() {
 			return [triggerStyles, local.class].filter(Boolean).join(" ");
 		},
 		get children() {
@@ -158,7 +302,11 @@ function ContextualHelpTrigger$1(props) {
 }
 //#endregion
 //#region src/menu/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<span aria-hidden=true data-rsp-slot=selection-indicator>`), _tmpl$3 = /*#__PURE__*/ template(`<span slot=descriptor data-rsp-slot=descriptor>`), _tmpl$4 = /*#__PURE__*/ template(`<div role=separator>`), _tmpl$5 = /*#__PURE__*/ template(`<svg fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M19 9l-7 7-7-7">`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span aria-hidden=true data-rsp-slot=selection-indicator>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span slot=descriptor data-rsp-slot=descriptor>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div role=separator>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<svg fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M19 9l-7 7-7-7">`);
 const UnavailableMenuItemContext = createContext(false);
 const MenuContext = createContext(null);
 const linkOutIconSize = {
@@ -175,132 +323,137 @@ const selectionIconSize = {
 };
 const menuButtonStyles = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " sh151";
-	rules += " eb151";
-	rules += " _Ca151";
-	rules += " oY4qurc151";
-	rules += " nY4qurc151";
-	rules += " kY4qurc151";
-	rules += " jY4qurc151";
-	rules += " _jf151";
-	rules += " _kb151";
-	rules += " hb151";
-	rules += " mb151";
-	rules += " lb151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " sh17";
+	rules += " eb17";
+	rules += " _Ca17";
+	rules += " oY4qurc17";
+	rules += " nY4qurc17";
+	rules += " kY4qurc17";
+	rules += " jY4qurc17";
+	rules += " _jf17";
+	rules += " _kb17";
+	rules += " hb17";
+	rules += " mb17";
+	rules += " lb17";
 	if (props.size === "XL") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "L") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "M") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "S") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	}
-	rules += " ri151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.size === "XL") rules += " Fy151";
-	else if (props.size === "L") rules += " Fz151";
-	else if (props.size === "M") rules += " Fv151";
-	else if (props.size === "S") rules += " Fx151";
-	if (props.size === "XL") rules += " uxe7h4151";
-	else if (props.size === "L") rules += " uxe7h4151";
-	else if (props.size === "M") rules += " uxe7h4151";
-	else if (props.size === "S") rules += " uxe7h4151";
+	rules += " ri17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.size === "XL") rules += " Fy17";
+	else if (props.size === "L") rules += " Fz17";
+	else if (props.size === "M") rules += " Fv17";
+	else if (props.size === "S") rules += " Fx17";
+	if (props.size === "XL") rules += " uxe7h417";
+	else if (props.size === "L") rules += " uxe7h417";
+	else if (props.size === "M") rules += " uxe7h417";
+	else if (props.size === "S") rules += " uxe7h417";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "M") {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	}
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "M") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
-	if (props.isDisabled) rules += " pUvnvv151";
-	else if (props.variant === "primary") rules += " px151";
-	else rules += " pHKLAu151";
-	if (props.size === "XL") rules += " Sh151";
-	else if (props.size === "L") rules += " Sg151";
-	else if (props.size === "M") rules += " Sf151";
-	else if (props.size === "S") rules += " Se151";
-	if (props.size === "XL") rules += " Rh151";
-	else if (props.size === "L") rules += " Rg151";
-	else if (props.size === "M") rules += " Rf151";
-	else if (props.size === "S") rules += " Re151";
-	if (props.size === "XL") rules += " Ug151";
-	else if (props.size === "L") rules += " Ug151";
-	else if (props.size === "M") rules += " Ue151";
-	else if (props.size === "S") rules += " Ue151";
-	if (props.size === "XL") rules += " qg151";
-	else if (props.size === "L") rules += " qg151";
-	else if (props.size === "M") rules += " qe151";
-	else if (props.size === "S") rules += " qe151";
-	if (props.isDisabled) rules += " gkDWoNd151";
-	else if (props.variant === "quiet") if (props.isPressed) rules += " gkDWoNd151";
-	else if (props.isHovered) rules += " gkDWoNd151";
-	else rules += " g9151";
-	else if (props.variant === "secondary") if (props.isPressed) rules += " gkDWoNd151";
-	else if (props.isHovered) rules += " gkDWoNd151";
-	else rules += " g9ORGnd151";
-	else if (props.variant === "primary") if (props.isPressed) rules += " g8KaFke151";
-	else if (props.isHovered) rules += " g8KaFke151";
-	else rules += " gdeCgNc151";
-	if (props.isDisabled) rules += " iA151";
-	else if (props.variant === "quiet") rules += " iA151";
-	else if (props.variant === "secondary") if (props.isHovered) rules += " iUvnvv151";
-	else rules += " ifbAdGe151";
-	else if (props.variant === "primary") rules += " iA151";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	else if (props.variant === "primary") rules += " px17";
+	else rules += " pmiKvLd17";
+	if (props.size === "XL") rules += " Sh17";
+	else if (props.size === "L") rules += " Sg17";
+	else if (props.size === "M") rules += " Sf17";
+	else if (props.size === "S") rules += " Se17";
+	if (props.size === "XL") rules += " Rh17";
+	else if (props.size === "L") rules += " Rg17";
+	else if (props.size === "M") rules += " Rf17";
+	else if (props.size === "S") rules += " Re17";
+	if (props.size === "XL") rules += " Ug17";
+	else if (props.size === "L") rules += " Ug17";
+	else if (props.size === "M") rules += " Ue17";
+	else if (props.size === "S") rules += " Ue17";
+	if (props.size === "XL") rules += " qg17";
+	else if (props.size === "L") rules += " qg17";
+	else if (props.size === "M") rules += " qe17";
+	else if (props.size === "S") rules += " qe17";
+	if (props.isDisabled) rules += " gLX7Xt17";
+	else if (props.variant === "quiet") {
+		if (props.isPressed) rules += " gLX7Xt17";
+		else if (props.isHovered) rules += " gLX7Xt17";
+		else rules += " g917";
+	} else if (props.variant === "secondary") {
+		if (props.isPressed) rules += " gLX7Xt17";
+		else if (props.isHovered) rules += " gLX7Xt17";
+		else rules += " g9ORGnd17";
+	} else if (props.variant === "primary") {
+		if (props.isPressed) rules += " gr2Mazb17";
+		else if (props.isHovered) rules += " gr2Mazb17";
+		else rules += " gpC4Gxe17";
+	}
+	if (props.isDisabled) rules += " iA17";
+	else if (props.variant === "quiet") rules += " iA17";
+	else if (props.variant === "secondary") {
+		if (props.isHovered) rules += " i8H6Pad17";
+		else rules += " iSNu3ze17";
+	} else if (props.variant === "primary") rules += " iA17";
 	return rules;
 };
 const menuButtonChevronStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " _va151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.size === "XL") rules += " Z8KB0xb151";
-	else if (props.size === "L") rules += " Zo151";
-	else if (props.size === "M") rules += " Zm151";
-	else if (props.size === "S") rules += " Zu151";
-	if (props.size === "XL") rules += " F8KB0xb151";
-	else if (props.size === "L") rules += " Fp151";
-	else if (props.size === "M") rules += " Fn151";
-	else if (props.size === "S") rules += " Ft151";
-	if (props.isOpen) rules += " _Sc151";
-	else rules += " _Sb151";
+	rules += " _va17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.size === "XL") rules += " Z8KB0xb17";
+	else if (props.size === "L") rules += " Zo17";
+	else if (props.size === "M") rules += " Zm17";
+	else if (props.size === "S") rules += " Zu17";
+	if (props.size === "XL") rules += " F8KB0xb17";
+	else if (props.size === "L") rules += " Fp17";
+	else if (props.size === "M") rules += " Fn17";
+	else if (props.size === "S") rules += " Ft17";
+	if (props.isOpen) rules += " _Sc17";
+	else rules += " _Sb17";
 	return rules;
 };
-const triggerWrapperStyles = " _Pc151 sg151";
-const separatorStyles = " Js151 Gs151 _kb151 _jf151 ifbAdGe151";
-const destructiveTextStyles = " pYjUhNc151";
+const triggerWrapperStyles = " _Pc17 sg17";
+const separatorStyles = " Js17 Gs17 _kb17 _jf17 iSNu3ze17";
+const destructiveTextStyles = " plIkJnc17";
 function normalizeMenuSize(size) {
 	switch (size) {
 		case "sm":
@@ -325,16 +478,13 @@ function menuPlacement(direction, align) {
 		default: return `${resolvedDirection} ${resolvedAlign}`;
 	}
 }
-function menuPlacementAxis(direction) {
-	if (direction === "start") return "left";
-	if (direction === "end") return "right";
-	return direction ?? "bottom";
-}
 /**
 * A menu trigger wraps a button and menu, handling the open/close state.
-*/
-function MenuTrigger$1(props) {
-	const [local, headlessProps] = splitProps(useProviderProps(props), [
+*/ function MenuTrigger$1(props) {
+	const mergedProps = useProviderProps(props);
+	const actionButtonContext = useContext(ActionButtonContext);
+	const toggleButtonContext = useContext(ToggleButtonContext);
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"size",
 		"align",
 		"direction",
@@ -342,24 +492,43 @@ function MenuTrigger$1(props) {
 		"class"
 	]);
 	const size = () => normalizeMenuSize(local.size);
-	return createComponent(MenuSizeContext.Provider, {
+	const actionButtonContextValue = mergeProps$1(actionButtonContext ?? {}, { get holdAffordance() {
+		return headlessProps.trigger === "longPress";
+	} });
+	const toggleButtonContextValue = mergeProps$1(toggleButtonContext ?? {}, { get holdAffordance() {
+		return headlessProps.trigger === "longPress";
+	} });
+	return createComponent(MenuSizeContext, {
 		get value() {
 			return size();
 		},
 		get children() {
-			var _el$ = getNextElement(_tmpl$);
-			insert(_el$, createComponent(MenuTrigger, mergeProps(headlessProps, { get children() {
-				return createComponent(MenuTriggerOverlayContext, {
-					align: () => local.align,
-					direction: () => local.direction,
-					shouldFlip: () => local.shouldFlip,
-					get children() {
-						return props.children;
-					}
-				});
-			} })));
-			effect(() => className(_el$, [triggerWrapperStyles, local.class].filter(Boolean).join(" ")));
-			return _el$;
+			return createComponent(ActionButtonContext, {
+				value: actionButtonContextValue,
+				get children() {
+					return createComponent(ToggleButtonContext, {
+						value: toggleButtonContextValue,
+						get children() {
+							var _el$ = getNextElement(_tmpl$);
+							insert(_el$, createComponent(MenuTrigger, mergeProps(headlessProps, { get children() {
+								return createComponent(MenuTriggerOverlayContext, {
+									align: () => local.align,
+									direction: () => local.direction,
+									shouldFlip: () => local.shouldFlip,
+									trigger: () => headlessProps.trigger,
+									get children() {
+										return props.children;
+									}
+								});
+							} })));
+							effect(() => readShallow([triggerWrapperStyles, local.class].filter(Boolean).join(" ")), (_v$, _$p) => {
+								className(_el$, _v$, _$p);
+							});
+							return _el$;
+						}
+					});
+				}
+			});
 		}
 	});
 }
@@ -371,27 +540,38 @@ function MenuTriggerOverlayContext(props) {
 			isOpen: () => triggerContext?.state.isOpen() ?? false,
 			open: () => triggerContext?.state.open(),
 			close: () => triggerContext?.state.close(),
-			toggle: () => triggerContext?.state.toggle()
+			toggle: () => triggerContext?.state.toggle(),
+			point: () => triggerContext?.state.point() ?? null
 		},
 		triggerRef: () => triggerElement(),
 		setTriggerRef: (element) => {
 			if (!element) return;
 			const current = triggerElement();
-			if (!current || !current.isConnected) setTriggerElement(element);
+			if (!current || !current.isConnected) {
+				setTriggerElement(element);
+				triggerContext?.setTriggerRef?.(element);
+			}
 		},
 		triggerId: createUniqueId(),
-		trigger: "MenuTrigger"
+		trigger: "MenuTrigger",
+		get triggerProps() {
+			return triggerContext?.triggerProps;
+		},
+		get overlayProps() {
+			return { "aria-labelledby": triggerContext?.menuProps["aria-labelledby"] };
+		}
 	};
-	return createComponent(MenuTriggerOptionsContext.Provider, {
+	return createComponent(MenuTriggerOptionsContext, {
 		get value() {
 			return {
 				align: props.align,
 				direction: props.direction,
-				shouldFlip: props.shouldFlip
+				shouldFlip: props.shouldFlip,
+				trigger: props.trigger
 			};
 		},
 		get children() {
-			return createComponent(PopoverTriggerContext.Provider, {
+			return createComponent(PopoverTriggerContext, {
 				value: popoverTriggerContext,
 				get children() {
 					return props.children;
@@ -401,11 +581,11 @@ function MenuTriggerOverlayContext(props) {
 	});
 }
 /**
-* A button that opens a menu.
-* SSR-compatible - renders children and chevron icon directly without render props.
-*/
-function MenuButton$1(props) {
-	const [local, headlessProps] = splitProps(useProviderProps(props), [
+* Local addition: a convenience menu trigger. RAC and S2 compose `MenuTrigger` +
+* `Button`; this wrapper only adds ui-package styling and a chevron.
+*/ function MenuButton(props) {
+	const mergedProps = useProviderProps(props);
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"class",
 		"variant",
 		"ref"
@@ -414,32 +594,46 @@ function MenuButton$1(props) {
 	const popoverTrigger = usePopoverTrigger();
 	const variant = local.variant ?? "secondary";
 	const customClass = local.class ?? "";
+	const isOpen = () => popoverTrigger?.state.isOpen() ?? false;
 	const getClassName = (renderProps) => [menuButtonStyles({
 		...renderProps,
+		isOpen: isOpen(),
 		size,
 		variant
 	}), customClass].filter(Boolean).join(" ");
-	return createComponent(MenuButton, mergeProps(headlessProps, {
+	return createComponent(Button, mergeProps(headlessProps, {
 		ref: (element) => {
 			popoverTrigger?.setTriggerRef(element);
 			mergeContextRefs(local.ref)(element);
 		},
-		"class": getClassName,
-		children: (renderProps) => [memo(() => props.children), createComponent(ChevronIcon, { get ["class"]() {
+		class: getClassName,
+		children: (renderProps) => [memo(() => {
+			return memo(() => {
+				return typeof props.children === "function";
+			})() ? props.children(renderProps) : props.children;
+		}), createComponent(ChevronIcon, { get "class"() {
 			return menuButtonChevronStyles({
 				size,
-				isOpen: renderProps.isOpen
+				isOpen: isOpen()
 			});
 		} })]
 	}));
 }
 /**
 * A menu displays a list of actions or options for the user to choose from.
-*/
-function Menu$1(props) {
+*/ function Menu$1(props) {
 	const providerProps = useProviderProps(props);
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
 	const contextProps = getSlottedContextProps(useContext(MenuContext), props.slot);
-	const [local, headlessProps] = splitProps(mergeProps$1(providerProps, contextProps ?? {}, props), [
+	const mergedProps = mergeProps$2(flags, contextProps ?? {}, props);
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"class",
 		"hideLinkOutIcon",
 		"size",
@@ -452,7 +646,6 @@ function Menu$1(props) {
 	]);
 	const triggerSize = useContext(MenuSizeContext);
 	const size = () => normalizeMenuSize(local.size ?? triggerSize);
-	const theme = useTheme();
 	const popoverTrigger = usePopoverTrigger();
 	const triggerOptions = useContext(MenuTriggerOptionsContext);
 	const isSubmenu = () => popoverTrigger?.trigger === "SubmenuTrigger";
@@ -483,30 +676,22 @@ function Menu$1(props) {
 	].filter(Boolean).join(" ");
 	const getFrameStyle = () => mergedUnsafeStyle();
 	const popoverPlacement = () => menuPlacement(triggerOptions?.direction(), triggerOptions?.align());
-	const popoverPlacementAxis = () => menuPlacementAxis(triggerOptions?.direction());
 	const popoverShouldFlip = () => triggerOptions?.shouldFlip();
-	const getPopoverClassName = (renderProps) => {
-		return menuPopover({
-			...renderProps,
-			placement: renderProps.placement ?? popoverPlacementAxis(),
-			colorScheme: theme.colorScheme
-		});
-	};
-	const menuContent = () => createComponent(MenuSizeContext.Provider, {
+	const menuContent = () => createComponent(MenuSizeContext, {
 		get value() {
 			return size();
 		},
 		get children() {
-			return createComponent(HeaderContext.Provider, {
+			return createComponent(HeaderContext, {
 				value: { styles: () => menuSectionHeader({ size: size() }) },
 				get children() {
-					return createComponent(HeadingContext.Provider, {
+					return createComponent(HeadingContext, {
 						value: {
 							role: "presentation",
 							styles: menuSectionHeading
 						},
 						get children() {
-							return createComponent(TextContext.Provider, {
+							return createComponent(TextContext$1, {
 								value: { slots: {
 									default: {
 										styles: () => menuItemLabel({ size: size() }),
@@ -528,7 +713,7 @@ function Menu$1(props) {
 								get children() {
 									return createComponent(Menu, mergeProps(headlessProps, {
 										ref: mergedRef,
-										"class": getClassName,
+										class: getClassName,
 										style: getStandaloneStyle,
 										get children() {
 											return local.children;
@@ -542,71 +727,79 @@ function Menu$1(props) {
 			});
 		}
 	});
-	if (isSubmenu()) return createComponent(MenuLinkOutIconContext.Provider, {
+	if (isSubmenu()) return createComponent(MenuLinkOutIconContext, {
 		get value() {
 			return local.hideLinkOutIcon ?? false;
 		},
 		get children() {
-			return createComponent(Popover, {
+			return createComponent(Popover$1, {
+				hideArrow: true,
+				padding: "none",
 				trigger: "SubmenuTrigger",
 				placement: "end top",
 				offset: -2,
 				crossOffset: -8,
 				isNonModal: true,
 				autoFocus: false,
-				"class": getPopoverClassName,
 				get children() {
 					var _el$2 = getNextElement(_tmpl$);
-					insert(_el$2, menuContent);
-					effect((_p$) => {
-						var _v$ = getFrameClassName(), _v$2 = getFrameStyle();
-						_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-						_p$.t = style(_el$2, _v$2, _p$.t);
-						return _p$;
-					}, {
-						e: void 0,
-						t: void 0
+					insert(_el$2, scope(() => {
+						return menuContent();
+					}));
+					effect(() => {
+						return {
+							e: readShallow(getFrameClassName()),
+							t: readShallow(getFrameStyle())
+						};
+					}, ({ e, t }, _p$) => {
+						className(_el$2, e, _p$?.e);
+						style(_el$2, t, _p$?.t);
 					});
 					return _el$2;
 				}
 			});
 		}
 	});
-	if (isMenuTriggerPopover()) return createComponent(MenuLinkOutIconContext.Provider, {
+	if (isMenuTriggerPopover()) return createComponent(MenuLinkOutIconContext, {
 		get value() {
 			return local.hideLinkOutIcon ?? false;
 		},
 		get children() {
-			return createComponent(Popover, {
+			return createComponent(Popover$1, {
+				hideArrow: true,
+				padding: "none",
 				trigger: "MenuTrigger",
 				triggerRef: () => popoverTrigger?.triggerRef() ?? null,
 				get placement() {
 					return popoverPlacement();
 				},
-				offset: 8,
+				get offset() {
+					return triggerOptions?.trigger() === "contextMenu" ? 0 : 8;
+				},
 				get shouldFlip() {
 					return popoverShouldFlip();
 				},
 				autoFocus: false,
-				"class": getPopoverClassName,
 				get children() {
 					var _el$3 = getNextElement(_tmpl$);
-					insert(_el$3, menuContent);
-					effect((_p$) => {
-						var _v$3 = getFrameClassName(), _v$4 = getFrameStyle();
-						_v$3 !== _p$.e && className(_el$3, _p$.e = _v$3);
-						_p$.t = style(_el$3, _v$4, _p$.t);
-						return _p$;
-					}, {
-						e: void 0,
-						t: void 0
+					insert(_el$3, scope(() => {
+						return menuContent();
+					}));
+					effect(() => {
+						return {
+							e: readShallow(getFrameClassName()),
+							t: readShallow(getFrameStyle())
+						};
+					}, ({ e, t }, _p$) => {
+						className(_el$3, e, _p$?.e);
+						style(_el$3, t, _p$?.t);
 					});
 					return _el$3;
 				}
 			});
 		}
 	});
-	return createComponent(MenuLinkOutIconContext.Provider, {
+	return createComponent(MenuLinkOutIconContext, {
 		get value() {
 			return local.hideLinkOutIcon ?? false;
 		},
@@ -618,8 +811,7 @@ function Menu$1(props) {
 /**
 * An item in a menu.
 * SSR-compatible - renders icon, content, and shortcut directly without render props.
-*/
-function MenuItem$1(props) {
+*/ function MenuItem$1(props) {
 	const [local, headlessProps] = splitProps(props, [
 		"children",
 		"class",
@@ -681,7 +873,7 @@ function MenuItem$1(props) {
 			"data-rsp-slot": "text"
 		},
 		description: {
-			id: renderProps.descriptionProps?.id,
+			id: attrString(renderProps.descriptionProps?.id),
 			styles: () => menuItemDescription(itemStyleProps(renderProps)),
 			"data-rsp-slot": "text"
 		},
@@ -691,7 +883,7 @@ function MenuItem$1(props) {
 		}
 	} });
 	const keyboardContextValue = (renderProps) => ({
-		id: renderProps.keyboardShortcutProps?.id,
+		id: attrString(renderProps.keyboardShortcutProps?.id),
 		styles: () => menuItemKeyboard(itemStyleProps(renderProps))
 	});
 	const MenuItemContents = (contentProps) => {
@@ -699,7 +891,9 @@ function MenuItem$1(props) {
 		return [
 			createComponent(Show, {
 				get when() {
-					return memo(() => contentProps.renderProps.selectionMode === "single")() && !contentProps.renderProps.hasSubmenu;
+					return memo(() => {
+						return contentProps.renderProps.selectionMode === "single";
+					})() && !contentProps.renderProps.hasSubmenu;
 				},
 				get children() {
 					return createComponent(Checkmark, {
@@ -708,7 +902,7 @@ function MenuItem$1(props) {
 						get size() {
 							return selectionIconSize[size];
 						},
-						get ["class"]() {
+						get "class"() {
 							return menuItemCheckmark(itemStyleProps(contentProps.renderProps));
 						}
 					});
@@ -716,7 +910,9 @@ function MenuItem$1(props) {
 			}),
 			createComponent(Show, {
 				get when() {
-					return memo(() => contentProps.renderProps.selectionMode === "multiple")() && !contentProps.renderProps.hasSubmenu;
+					return memo(() => {
+						return contentProps.renderProps.selectionMode === "multiple";
+					})() && !contentProps.renderProps.hasSubmenu;
 				},
 				get children() {
 					var _el$4 = getNextElement(_tmpl$2);
@@ -729,37 +925,51 @@ function MenuItem$1(props) {
 								get size() {
 									return selectionIconSize[size];
 								},
-								"class": menuItemCheckboxIcon
+								class: menuItemCheckboxIcon
 							});
 						}
 					}));
-					effect(() => className(_el$4, menuItemCheckbox(itemStyleProps(contentProps.renderProps))));
+					effect(() => readShallow(menuItemCheckbox(itemStyleProps(contentProps.renderProps))), (_v$, _$p) => {
+						className(_el$4, _v$, _$p);
+					});
 					return _el$4;
 				}
 			}),
-			memo(() => local.icon?.()),
-			memo(() => memo(() => !!isTextOnlyChildren(children))() ? createComponent(Text, {
-				slot: "label",
-				children
-			}) : children),
-			memo(() => memo(() => !!local.shortcut)() ? createComponent(Keyboard, { get children() {
-				return local.shortcut;
-			} }) : null),
+			memo(() => {
+				return local.icon?.();
+			}),
+			memo(() => {
+				return memo(() => {
+					return !!isTextOnlyChildren(children);
+				})() ? createComponent(Text$1, {
+					slot: "label",
+					children
+				}) : children;
+			}),
+			memo(() => {
+				return memo(() => {
+					return !!local.shortcut;
+				})() ? createComponent(Keyboard, { get children() {
+					return local.shortcut;
+				} }) : null;
+			}),
 			createComponent(Show, {
 				get when() {
 					return isLinkOut() && !hideLinkOutIcon;
 				},
 				get children() {
 					var _el$5 = getNextElement(_tmpl$3);
-					className(_el$5, menuItemDescriptor);
 					insert(_el$5, createComponent(LinkOut, {
 						get size() {
 							return linkOutIconSize[size];
 						},
-						get ["class"]() {
+						get "class"() {
 							return menuItemDescriptorIcon({ size });
 						}
 					}));
+					effect(() => readShallow(menuItemDescriptor), (_v$, _$p) => {
+						className(_el$5, _v$, _$p);
+					});
 					return _el$5;
 				}
 			}),
@@ -769,16 +979,18 @@ function MenuItem$1(props) {
 				},
 				get children() {
 					var _el$6 = getNextElement(_tmpl$3);
-					className(_el$6, menuItemDescriptor);
 					insert(_el$6, createComponent(Chevron, {
 						size,
-						get ["class"]() {
+						get "class"() {
 							return menuItemDescriptorIcon({ size });
 						},
 						get style() {
 							return chevronStyle();
 						}
 					}));
+					effect(() => readShallow(menuItemDescriptor), (_v$, _$p) => {
+						className(_el$6, _v$, _$p);
+					});
 					return _el$6;
 				}
 			}),
@@ -787,30 +999,32 @@ function MenuItem$1(props) {
 				get children() {
 					var _el$7 = getNextElement(_tmpl$3);
 					setAttribute(_el$7, "id", unavailableDescriptionId);
-					className(_el$7, menuItemDescriptor);
 					insert(_el$7, createComponent(InfoCircleIcon, {
-						get ["aria-label"]() {
+						get "aria-label"() {
 							return stringFormatter().format("menu.unavailable");
 						},
-						get ["class"]() {
+						get "class"() {
 							return menuItemDescriptorIcon({ size });
 						}
 					}));
+					effect(() => readShallow(menuItemDescriptor), (_v$, _$p) => {
+						className(_el$7, _v$, _$p);
+					});
 					return _el$7;
 				}
 			})
 		];
 	};
 	const renderChildren = (renderProps) => {
-		return createComponent(IconContext.Provider, {
+		return createComponent(IconContext, {
 			value: iconContextValue,
 			get children() {
-				return createComponent(TextContext.Provider, {
+				return createComponent(TextContext$1, {
 					get value() {
 						return textContextValue(renderProps);
 					},
 					get children() {
-						return createComponent(KeyboardContext.Provider, {
+						return createComponent(KeyboardContext, {
 							get value() {
 								return keyboardContextValue(renderProps);
 							},
@@ -825,14 +1039,14 @@ function MenuItem$1(props) {
 	};
 	const ariaDescribedBy = () => [headlessProps["aria-describedby"], isUnavailable ? unavailableDescriptionId : void 0].filter(Boolean).join(" ") || void 0;
 	return createComponent(MenuItem, mergeProps(headlessProps, {
-		get ["aria-describedby"]() {
+		get "aria-describedby"() {
 			return ariaDescribedBy();
 		},
 		ref: (element) => {
 			setItemElement(element);
 			mergeContextRefs(local.ref)(element);
 		},
-		"class": getClassName,
+		class: getClassName,
 		style: getStyle,
 		children: renderChildren
 	}));
@@ -847,7 +1061,7 @@ function UnavailableMenuItemTrigger(props) {
 			return children()[0];
 		},
 		get children() {
-			return createComponent(UnavailableMenuItemContext.Provider, {
+			return createComponent(UnavailableMenuItemContext, {
 				value: true,
 				get children() {
 					return createComponent(SubmenuTrigger, { get children() {
@@ -862,7 +1076,7 @@ function MenuSection$1(props) {
 	const [local, headlessProps] = splitProps(props, ["class"]);
 	const size = useContext(MenuSizeContext);
 	return createComponent(MenuSection, mergeProps(headlessProps, {
-		get ["class"]() {
+		get "class"() {
 			return [menuSection({ size }), local.class ?? ""].filter(Boolean).join(" ");
 		},
 		get children() {
@@ -872,28 +1086,27 @@ function MenuSection$1(props) {
 }
 /**
 * A visual separator between menu items.
-*/
-function MenuSeparator(props) {
-	return (() => {
-		var _el$8 = getNextElement(_tmpl$4);
-		effect(() => className(_el$8, [separatorStyles, props.class].filter(Boolean).join(" ")));
-		return _el$8;
-	})();
+*/ function MenuSeparator(props) {
+	var _el$8 = getNextElement(_tmpl$4);
+	effect(() => readShallow([separatorStyles, props.class].filter(Boolean).join(" ")), (_v$, _$p) => {
+		className(_el$8, _v$, _$p);
+	});
+	return _el$8;
 }
 function ChevronIcon(props) {
-	return (() => {
-		var _el$9 = getNextElement(_tmpl$5);
-		effect(() => setAttribute(_el$9, "class", props.class));
-		return _el$9;
-	})();
+	var _el$9 = getNextElement(_tmpl$5);
+	effect(() => readShallow(props.class), (_v$, _$p) => {
+		className(_el$9, _v$, _$p);
+	});
+	return _el$9;
 }
 Menu$1.Item = MenuItem$1;
 Menu$1.Section = MenuSection$1;
 Menu$1.Separator = MenuSeparator;
-MenuTrigger$1.Button = MenuButton$1;
+MenuTrigger$1.Button = MenuButton;
 const Item = MenuItem$1;
 const Section = MenuSection$1;
 //#endregion
-export { MenuContext as a, MenuSeparator as c, UnavailableMenuItemTrigger as d, ContextualHelpTrigger$1 as f, MenuSizeContext as g, MenuLinkOutIconContext as h, MenuButton$1 as i, MenuTrigger$1 as l, LinkOut as m, Item as n, MenuItem$1 as o, SubmenuTrigger$1 as p, Menu$1 as r, MenuSection$1 as s, Collection as t, Section as u };
+export { MenuContext as a, MenuSeparator as c, UnavailableMenuItemTrigger as d, ContextualHelpTrigger$1 as f, MenuSizeContext as g, MenuLinkOutIconContext as h, MenuButton as i, MenuTrigger$1 as l, LinkOut as m, Item as n, MenuItem$1 as o, SubmenuTrigger$1 as p, Menu$1 as r, MenuSection$1 as s, Collection as t, Section as u };
 
 //# sourceMappingURL=menu.js.map