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

package/dist/_chunk/menu.jsx

@@ -1,45 +1,101 @@
+/*
+* 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 { t as mergeStyles } from "./runtime.jsx";
-import { useProviderProps, useTheme } from "../provider/index.jsx";
+import { a as useProviderProps } from "./provider.jsx";
+import { i as ToggleButtonContext, t as ActionButtonContext } from "./context.jsx";
 import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "./spectrum-context.jsx";
 import { t as s2IntlStrings } from "./intl.jsx";
 import { centerBaseline } from "../icon/center-baseline.jsx";
 import { pressScale } from "../pressScale.jsx";
 import { a as createUIIcon, t as IconContext } from "./spectrum-icon.jsx";
-import { c as TextContext, f as HeadingContext, l as Keyboard, o as HeaderContext, s as Text, u as KeyboardContext } from "./text.jsx";
-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.jsx";
+import { n as KeyboardContext, t as Keyboard } from "./Keyboard.jsx";
+import { c as TextContext$1, o as HeaderContext, s as Text$1, u as HeadingContext } from "./text.jsx";
+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.jsx";
+import { Popover as Popover$1 } from "../popover/index.jsx";
 import { t as Checkmark } from "./Checkmark.jsx";
 import { t as Chevron } from "./Chevron.jsx";
 import { t as InfoCircleIcon } from "./InfoCircleIcon.jsx";
-import { Show, createContext, createSignal, createUniqueId, mergeProps, 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 { Show, createContext, createSignal, createUniqueId, useContext } from "solid-js";
+import { attrString, mergeProps, 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$1, 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
+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 <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" {...rest} class={className}>
+	const [local, rest] = splitProps(props, [
+		"class",
+		"width",
+		"height"
+	]);
+	return <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" {...rest} class={local.class}>
       <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" />
     </svg>;
 }
 function LinkOut_LSvg(props) {
-	const { class: className, width: _width, height: _height, ...rest } = props;
-	return <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" {...rest} class={className}>
+	const [local, rest] = splitProps(props, [
+		"class",
+		"width",
+		"height"
+	]);
+	return <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" {...rest} class={local.class}>
       <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" />
     </svg>;
 }
 function LinkOut_XLSvg(props) {
-	const { class: className, width: _width, height: _height, ...rest } = props;
-	return <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" {...rest} class={className}>
+	const [local, rest] = splitProps(props, [
+		"class",
+		"width",
+		"height"
+	]);
+	return <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" {...rest} class={local.class}>
       <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" />
     </svg>;
 }
 function LinkOut_XXLSvg(props) {
-	const { class: className, width: _width, height: _height, ...rest } = props;
-	return <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" {...rest} class={className}>
+	const [local, rest] = splitProps(props, [
+		"class",
+		"width",
+		"height"
+	]);
+	return <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" {...rest} class={local.class}>
       <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" />
     </svg>;
 }
@@ -48,13 +104,20 @@ 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 <LinkOut_M {...rest} class={className} />;
-		case "L": return <LinkOut_L {...rest} class={className} />;
-		case "XL": return <LinkOut_XL {...rest} class={className} />;
-		case "XXL": return <LinkOut_XXL {...rest} class={className} />;
-		default: return <LinkOut_M {...rest} class={className} />;
+		case "M": return <LinkOut_M {...rest} class={mergedClass()} />;
+		case "L": return <LinkOut_L {...rest} class={mergedClass()} />;
+		case "XL": return <LinkOut_XL {...rest} class={mergedClass()} />;
+		case "XXL": return <LinkOut_XXL {...rest} class={mergedClass()} />;
+		default: return <LinkOut_M {...rest} class={mergedClass()} />;
 	}
 }
 //#endregion
@@ -67,19 +130,21 @@ function SubmenuTrigger$1(props) {
 }
 //#endregion
 //#region src/menu/ContextualHelpTrigger.tsx
-const triggerStyles = "qwNQeb";
-const helpIcon = <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" />
-    <text x="8" y="12" text-anchor="middle" fill="currentColor" font-size="10" font-weight="bold">
-      ?
-    </text>
-  </svg>;
-const infoIcon = <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" />
-    <text x="8" y="12" text-anchor="middle" fill="currentColor" font-size="10" font-weight="bold">
-      i
-    </text>
-  </svg>;
+const triggerStyles = "v3J7fb";
+function HelpIcon() {
+	return <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" />
+      <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" />
+      <circle cx="8" cy="12.15" r="0.85" fill="currentColor" />
+    </svg>;
+}
+function InfoIcon() {
+	return <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 cx="8" cy="5.15" r="1" fill="currentColor" />
+      <rect x="7.25" y="7.15" width="1.5" height="5" rx="0.6" fill="currentColor" />
+    </svg>;
+}
 /**
 * A button that opens contextual help in a popover.
 *
@@ -104,7 +169,7 @@ const infoIcon = <svg width="16" height="16" viewBox="0 0 16 16" fill="none" ari
 	]);
 	const children = () => {
 		if (local.children) return local.children;
-		const icon = local.variant === "info" ? infoIcon : helpIcon;
+		const icon = local.variant === "info" ? <InfoIcon /> : <HelpIcon />;
 		return [<span style={{
 			display: "inline-flex",
 			"align-items": "center",
@@ -120,7 +185,7 @@ const infoIcon = <svg width="16" height="16" viewBox="0 0 16 16" fill="none" ari
         {local.content && <p style={{ margin: "0" }}>{local.content}</p>}
       </div>];
 	};
-	return <ContextualHelpTrigger {...headlessProps} aria-label={local["aria-label"] ?? local.title ?? "Contextual help"} class={[triggerStyles, local.class].filter(Boolean).join(" ")}>
+	return <ContextualHelpTrigger {...headlessProps} aria-label={local["aria-label"] ?? (local.children || local.title ? void 0 : "Contextual help")} class={[triggerStyles, local.class].filter(Boolean).join(" ")}>
       {children()}
     </ContextualHelpTrigger>;
 }
@@ -142,132 +207,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 += " 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 += " 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 += " 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":
@@ -292,15 +362,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), [
+	const mergedProps = useProviderProps(props);
+	const actionButtonContext = useContext(ActionButtonContext);
+	const toggleButtonContext = useContext(ToggleButtonContext);
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"size",
 		"align",
 		"direction",
@@ -308,15 +376,25 @@ function menuPlacementAxis(direction) {
 		"class"
 	]);
 	const size = () => normalizeMenuSize(local.size);
-	return <MenuSizeContext.Provider value={size()}>
-      <div class={[triggerWrapperStyles, local.class].filter(Boolean).join(" ")}>
-        <MenuTrigger {...headlessProps}>
-          <MenuTriggerOverlayContext align={() => local.align} direction={() => local.direction} shouldFlip={() => local.shouldFlip}>
-            {props.children}
-          </MenuTriggerOverlayContext>
-        </MenuTrigger>
-      </div>
-    </MenuSizeContext.Provider>;
+	const actionButtonContextValue = mergeProps(actionButtonContext ?? {}, { get holdAffordance() {
+		return headlessProps.trigger === "longPress";
+	} });
+	const toggleButtonContextValue = mergeProps(toggleButtonContext ?? {}, { get holdAffordance() {
+		return headlessProps.trigger === "longPress";
+	} });
+	return <MenuSizeContext value={size()}>
+      <ActionButtonContext value={actionButtonContextValue}>
+        <ToggleButtonContext value={toggleButtonContextValue}>
+          <div class={[triggerWrapperStyles, local.class].filter(Boolean).join(" ")}>
+            <MenuTrigger {...headlessProps}>
+              <MenuTriggerOverlayContext align={() => local.align} direction={() => local.direction} shouldFlip={() => local.shouldFlip} trigger={() => headlessProps.trigger}>
+                {props.children}
+              </MenuTriggerOverlayContext>
+            </MenuTrigger>
+          </div>
+        </ToggleButtonContext>
+      </ActionButtonContext>
+    </MenuSizeContext>;
 }
 function MenuTriggerOverlayContext(props) {
 	const triggerContext = useContext(MenuTriggerContext);
@@ -326,32 +404,42 @@ 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 <MenuTriggerOptionsContext.Provider value={{
+	return <MenuTriggerOptionsContext value={{
 		align: props.align,
 		direction: props.direction,
-		shouldFlip: props.shouldFlip
+		shouldFlip: props.shouldFlip,
+		trigger: props.trigger
 	}}>
-      <PopoverTriggerContext.Provider value={popoverTriggerContext}>
-        {props.children}
-      </PopoverTriggerContext.Provider>
-    </MenuTriggerOptionsContext.Provider>;
+      <PopoverTriggerContext value={popoverTriggerContext}>{props.children}</PopoverTriggerContext>
+    </MenuTriggerOptionsContext>;
 }
 /**
-* 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"
@@ -360,30 +448,41 @@ function MenuTriggerOverlayContext(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 <MenuButton {...headlessProps} ref={(element) => {
+	return <Button {...headlessProps} ref={(element) => {
 		popoverTrigger?.setTriggerRef(element);
 		mergeContextRefs(local.ref)(element);
 	}} class={getClassName}>
       {(renderProps) => <>
-          {props.children}
+          {typeof props.children === "function" ? props.children(renderProps) : props.children}
           <ChevronIcon class={menuButtonChevronStyles({
 		size,
-		isOpen: renderProps.isOpen
+		isOpen: isOpen()
 	})} />
         </>}
-    </MenuButton>;
+    </Button>;
 }
 /**
 * A menu displays a list of actions or options for the user to choose from.
 */ 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(providerProps, contextProps ?? {}, props), [
+	const mergedProps = mergeProps$1(flags, contextProps ?? {}, props);
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"class",
 		"hideLinkOutIcon",
 		"size",
@@ -396,7 +495,6 @@ function MenuTriggerOverlayContext(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";
@@ -427,22 +525,14 @@ function MenuTriggerOverlayContext(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 = () => <MenuSizeContext.Provider value={size()}>
-      <HeaderContext.Provider value={{ styles: () => menuSectionHeader({ size: size() }) }}>
-        <HeadingContext.Provider value={{
+	const menuContent = () => <MenuSizeContext value={size()}>
+      <HeaderContext value={{ styles: () => menuSectionHeader({ size: size() }) }}>
+        <HeadingContext value={{
 		role: "presentation",
 		styles: menuSectionHeading
 	}}>
-          <TextContext.Provider value={{ slots: {
+          <TextContext$1 value={{ slots: {
 		default: {
 			styles: () => menuItemLabel({ size: size() }),
 			"data-rsp-slot": "text"
@@ -461,27 +551,27 @@ function MenuTriggerOverlayContext(props) {
 		}
 	} }}>
             <Menu {...headlessProps} ref={mergedRef} class={getClassName} style={getStandaloneStyle} children={local.children} />
-          </TextContext.Provider>
-        </HeadingContext.Provider>
-      </HeaderContext.Provider>
-    </MenuSizeContext.Provider>;
-	if (isSubmenu()) return <MenuLinkOutIconContext.Provider value={local.hideLinkOutIcon ?? false}>
-        <Popover trigger="SubmenuTrigger" placement="end top" offset={-2} crossOffset={-8} isNonModal autoFocus={false} class={getPopoverClassName}>
+          </TextContext$1>
+        </HeadingContext>
+      </HeaderContext>
+    </MenuSizeContext>;
+	if (isSubmenu()) return <MenuLinkOutIconContext value={local.hideLinkOutIcon ?? false}>
+        <Popover$1 hideArrow padding="none" trigger="SubmenuTrigger" placement="end top" offset={-2} crossOffset={-8} isNonModal autoFocus={false}>
           <div class={getFrameClassName()} style={getFrameStyle()}>
             {menuContent()}
           </div>
-        </Popover>
-      </MenuLinkOutIconContext.Provider>;
-	if (isMenuTriggerPopover()) return <MenuLinkOutIconContext.Provider value={local.hideLinkOutIcon ?? false}>
-        <Popover trigger="MenuTrigger" triggerRef={() => popoverTrigger?.triggerRef() ?? null} placement={popoverPlacement()} offset={8} shouldFlip={popoverShouldFlip()} autoFocus={false} class={getPopoverClassName}>
+        </Popover$1>
+      </MenuLinkOutIconContext>;
+	if (isMenuTriggerPopover()) return <MenuLinkOutIconContext value={local.hideLinkOutIcon ?? false}>
+        <Popover$1 hideArrow padding="none" trigger="MenuTrigger" triggerRef={() => popoverTrigger?.triggerRef() ?? null} placement={popoverPlacement()} offset={triggerOptions?.trigger() === "contextMenu" ? 0 : 8} shouldFlip={popoverShouldFlip()} autoFocus={false}>
           <div class={getFrameClassName()} style={getFrameStyle()}>
             {menuContent()}
           </div>
-        </Popover>
-      </MenuLinkOutIconContext.Provider>;
-	return <MenuLinkOutIconContext.Provider value={local.hideLinkOutIcon ?? false}>
+        </Popover$1>
+      </MenuLinkOutIconContext>;
+	return <MenuLinkOutIconContext value={local.hideLinkOutIcon ?? false}>
       {menuContent()}
-    </MenuLinkOutIconContext.Provider>;
+    </MenuLinkOutIconContext>;
 }
 /**
 * An item in a menu.
@@ -548,7 +638,7 @@ function MenuTriggerOverlayContext(props) {
 			"data-rsp-slot": "text"
 		},
 		description: {
-			id: renderProps.descriptionProps?.id,
+			id: attrString(renderProps.descriptionProps?.id),
 			styles: () => menuItemDescription(itemStyleProps(renderProps)),
 			"data-rsp-slot": "text"
 		},
@@ -558,7 +648,7 @@ function MenuTriggerOverlayContext(props) {
 		}
 	} });
 	const keyboardContextValue = (renderProps) => ({
-		id: renderProps.keyboardShortcutProps?.id,
+		id: attrString(renderProps.keyboardShortcutProps?.id),
 		styles: () => menuItemKeyboard(itemStyleProps(renderProps))
 	});
 	const MenuItemContents = (contentProps) => {
@@ -575,7 +665,7 @@ function MenuTriggerOverlayContext(props) {
           </span>
         </Show>
         {local.icon?.()}
-        {isTextOnlyChildren(children) ? <Text slot="label">{children}</Text> : children}
+        {isTextOnlyChildren(children) ? <Text$1 slot="label">{children}</Text$1> : children}
         {local.shortcut ? <Keyboard>{local.shortcut}</Keyboard> : null}
         <Show when={isLinkOut() && !hideLinkOutIcon}>
           <span slot="descriptor" class={menuItemDescriptor} data-rsp-slot="descriptor">
@@ -595,13 +685,13 @@ function MenuTriggerOverlayContext(props) {
       </>;
 	};
 	const renderChildren = (renderProps) => {
-		return <IconContext.Provider value={iconContextValue}>
-        <TextContext.Provider value={textContextValue(renderProps)}>
-          <KeyboardContext.Provider value={keyboardContextValue(renderProps)}>
+		return <IconContext value={iconContextValue}>
+        <TextContext$1 value={textContextValue(renderProps)}>
+          <KeyboardContext value={keyboardContextValue(renderProps)}>
             <MenuItemContents renderProps={renderProps} />
-          </KeyboardContext.Provider>
-        </TextContext.Provider>
-      </IconContext.Provider>;
+          </KeyboardContext>
+        </TextContext$1>
+      </IconContext>;
 	};
 	const ariaDescribedBy = () => [headlessProps["aria-describedby"], isUnavailable ? unavailableDescriptionId : void 0].filter(Boolean).join(" ") || void 0;
 	return <MenuItem {...headlessProps} aria-describedby={ariaDescribedBy()} ref={(element) => {
@@ -612,9 +702,9 @@ function MenuTriggerOverlayContext(props) {
 function UnavailableMenuItemTrigger(props) {
 	const children = () => Array.isArray(props.children) ? props.children : [props.children];
 	return <Show when={props.isUnavailable} fallback={children()[0]}>
-      <UnavailableMenuItemContext.Provider value>
+      <UnavailableMenuItemContext value>
         <SubmenuTrigger>{children()}</SubmenuTrigger>
-      </UnavailableMenuItemContext.Provider>
+      </UnavailableMenuItemContext>
     </Show>;
 }
 function MenuSection$1(props) {
@@ -637,10 +727,10 @@ function ChevronIcon(props) {
 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.jsx.map