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

package/dist/popover/index.js

@@ -1,94 +1,113 @@
-import { useTheme } from "../provider/index.js";
+/*
+* 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/Popover.tsx
+import { o as useTheme } from "../_chunk/provider.js";
 /* empty css                                                                               */
-import { className, createComponent, effect, getNextElement, getNextMarker, insert, mergeProps, setAttribute, style, template, use } from "solid-js/web";
-import { Show, splitProps } from "solid-js";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, mergeProps, readShallow, ref, scope, style, template } from "@solidjs/web";
+import { Show } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { OverlayArrow, Popover as Popover$1, PopoverTrigger as PopoverTrigger$1 } from "@proyecto-viviana/solidaria-components";
 //#region src/popover/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<svg viewBox="0 0 18 10"><path transform="translate(0 -1)"d="M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1">`), _tmpl$3 = /*#__PURE__*/ template(`<p class=" uxe7h4151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pUUi0Fe151 Js151">`), _tmpl$4 = /*#__PURE__*/ template(`<div><h3 class=" uiWD3ad151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-e151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 pHKLAu151"></h3><!$><!/>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg viewBox="0 0 18 10"><path transform="translate(0 -1)"d="M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1">`);
+var _tmpl$3 = /* @__PURE__ */ template(`<p class=" uxe7h417 -_6BNtrc-b17 vx17 xb17 _xa17 _Fd17 _FnuYUweb17 pLw1gcc17 Js17">`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div><h3 class=" uiWD3ad17 ucJ9TBTb17 ud3Euai17 uea17 ugb17 uhd17 uje17 u2NhKxcl17 uic17 -_6BNtrc-e17 vx17 xe17 _xa17 xX0cczbd17 _xX0cczba17 xfe17 _xfa17 xfX0cczbd17 _xfX0cczba17 _Fd17 _FnuYUweb17 pmiKvLd17"></h3><!$><!/>`);
 const popoverStyles = function anonymous(props) {
 	let rules = " ";
-	if (props.colorScheme === "dark") rules += " -ICUGx-_pa151";
-	else if (props.colorScheme === "light") rules += " -ICUGx-_pb151";
-	else if (props.colorScheme === "light dark") rules += " -ICUGx-_pc151";
-	rules += " _pK8eoyd151";
-	if (props.colorScheme === "dark") rules += " -NvXmrd-_ZLmU151";
-	else if (props.colorScheme === "light") rules += " -NvXmrd-_ZN8Gi4c151";
+	if (props.colorScheme === "dark") rules += " -ICUGx-_pa17";
+	else if (props.colorScheme === "light") rules += " -ICUGx-_pb17";
 	else if (props.colorScheme === "light dark") {
-		rules += " -NvXmrd-_ZN8Gi4c151";
-		rules += " -NvXmrd-D1v0V_ZLmU151";
+		rules += " -ICUGx-_pb17";
+		rules += " -ICUGx-D1v0V_pa17";
 	}
-	if (props.colorScheme === "dark") rules += " -j9blY-_ZN8Gi4c151";
-	else if (props.colorScheme === "light") rules += " -j9blY-_ZLmU151";
+	rules += " _pK8eoyd17";
+	if (props.colorScheme === "dark") rules += " -NvXmrd-_ZLmU17";
+	else if (props.colorScheme === "light") rules += " -NvXmrd-_ZN8Gi4c17";
 	else if (props.colorScheme === "light dark") {
-		rules += " -j9blY-_ZLmU151";
-		rules += " -j9blY-D1v0V_ZN8Gi4c151";
+		rules += " -NvXmrd-_ZN8Gi4c17";
+		rules += " -NvXmrd-D1v0V_ZLmU17";
 	}
-	rules += " -Ovbhqd-gNU7lMd151";
-	rules += " -Ovbhqd-lga151";
-	rules += " gEzkoQe151";
-	rules += " -Jvcevd-xkGPz151";
-	rules += " oY4qurc151";
-	rules += " nY4qurc151";
-	rules += " kY4qurc151";
-	rules += " jY4qurc151";
-	rules += " _nfRoCnb151";
-	rules += " _Lf151";
-	rules += " _Mb151";
-	rules += " OrHHOgb151";
-	rules += " Ola151";
-	if (props.size === "L") rules += " ZE151";
-	else if (props.size === "M") rules += " ZB151";
-	else if (props.size === "S") rules += " Zz151";
-	rules += " LEmL1Zb151";
-	rules += " _oa151";
-	rules += " sd151";
-	if (props.isExiting) rules += " _Ia151";
-	else if (props.isEntering) rules += " _Ia151";
+	if (props.colorScheme === "dark") rules += " -j9blY-_ZN8Gi4c17";
+	else if (props.colorScheme === "light") rules += " -j9blY-_ZLmU17";
+	else if (props.colorScheme === "light dark") {
+		rules += " -j9blY-_ZLmU17";
+		rules += " -j9blY-D1v0V_ZN8Gi4c17";
+	}
+	rules += " -Ovbhqd-gBNUKmd17";
+	rules += " -Ovbhqd-lga17";
+	rules += " gEzkoQe17";
+	rules += " -Jvcevd-0bAVIe17";
+	rules += " ob17";
+	rules += " nb17";
+	rules += " kb17";
+	rules += " jb17";
+	rules += " _nmHdxkc17";
+	rules += " _Lf17";
+	rules += " _Mb17";
+	rules += " OOvEbWc17";
+	rules += " Ola17";
+	if (props.size === "L") rules += " ZE17";
+	else if (props.size === "M") rules += " ZB17";
+	else if (props.size === "S") rules += " Zz17";
+	rules += " LEmL1Zb17";
+	rules += " _oa17";
+	rules += " sd17";
+	if (props.isExiting) rules += " _Ia17";
+	else if (props.isEntering) rules += " _Ia17";
 	if (props.isSubmenu) {
-		rules += " -_8PloMd-s151";
-		rules += " __Ya151";
+		rules += " -_8PloMd-s17";
+		rules += " __Ya17";
 	} else if (props.placement === "bottom") {
 		if (props.isExiting) {
-			rules += " -_8PloMd-l151";
-			rules += " __Ya151";
+			rules += " -_8PloMd-l17";
+			rules += " __Ya17";
 		} else if (props.isEntering) {
-			rules += " -_8PloMd-l151";
-			rules += " __Ya151";
+			rules += " -_8PloMd-l17";
+			rules += " __Ya17";
 		}
 	} else if (props.placement === "top") {
 		if (props.isExiting) {
-			rules += " -_8PloMd-F151";
-			rules += " __Ya151";
+			rules += " -_8PloMd-F17";
+			rules += " __Ya17";
 		} else if (props.isEntering) {
-			rules += " -_8PloMd-F151";
-			rules += " __Ya151";
+			rules += " -_8PloMd-F17";
+			rules += " __Ya17";
 		}
 	}
 	if (props.isSubmenu) {
-		rules += " -_7PloMd-s151";
-		rules += " __Ya151";
+		rules += " -_7PloMd-s17";
+		rules += " __Ya17";
 	} else if (props.placement === "right") {
 		if (props.isExiting) {
-			rules += " -_7PloMd-m151";
-			rules += " __Ya151";
+			rules += " -_7PloMd-m17";
+			rules += " __Ya17";
 		} else if (props.isEntering) {
-			rules += " -_7PloMd-m151";
-			rules += " __Ya151";
+			rules += " -_7PloMd-m17";
+			rules += " __Ya17";
 		}
 	} else if (props.placement === "left") {
 		if (props.isExiting) {
-			rules += " -_7PloMd-G151";
-			rules += " __Ya151";
+			rules += " -_7PloMd-G17";
+			rules += " __Ya17";
 		} else if (props.isEntering) {
-			rules += " -_7PloMd-G151";
-			rules += " __Ya151";
+			rules += " -_7PloMd-G17";
+			rules += " __Ya17";
 		}
 	}
-	rules += " YmenWad151";
-	rules += " Xc151";
-	if (props.isExiting) rules += " _2c151";
-	rules += " _Bb151";
-	if (props.isExiting) rules += " _Ob151";
+	rules += " YmenWad17";
+	rules += " Xc17";
+	if (props.isExiting) rules += " _2c17";
+	rules += " _Bb17";
+	if (props.isExiting) rules += " _Ob17";
 	return rules;
 };
 const innerDivStyle = function anonymous(props, overrides) {
@@ -105,49 +124,49 @@ const innerDivStyle = function anonymous(props, overrides) {
 		if (p[1] === "K") maxHeight = true;
 		rules += p[0];
 	}
-	if (props.padding === "none") rules += " Td151";
-	else if (props.padding === "default") rules += " Tt151";
-	if (props.padding === "none") rules += " Qd151";
-	else if (props.padding === "default") rules += " Qt151";
-	if (props.padding === "none") rules += " Sd151";
-	else if (props.padding === "default") rules += " St151";
-	if (props.padding === "none") rules += " Rd151";
-	else if (props.padding === "default") rules += " Rt151";
-	rules += " _oa151";
-	rules += " _Le151";
-	rules += " oi151";
-	rules += " ni151";
-	rules += " ki151";
-	rules += " ji151";
-	rules += " _Na151";
-	rules += " Pa151";
-	if (!position) rules += " _Pc151";
-	if (!width) rules += " Za151";
-	if (!maxWidth) rules += " L40ub4c151";
-	if (!maxHeight) rules += " K40ub4c151";
+	if (props.padding === "none") rules += " Td17";
+	else if (props.padding === "default") rules += " Tt17";
+	if (props.padding === "none") rules += " Qd17";
+	else if (props.padding === "default") rules += " Qt17";
+	if (props.padding === "none") rules += " Sd17";
+	else if (props.padding === "default") rules += " St17";
+	if (props.padding === "none") rules += " Rd17";
+	else if (props.padding === "default") rules += " Rt17";
+	rules += " _oa17";
+	rules += " _Le17";
+	rules += " oi17";
+	rules += " ni17";
+	rules += " ki17";
+	rules += " ji17";
+	rules += " _Na17";
+	rules += " Pa17";
+	if (!position) rules += " _Pc17";
+	if (!width) rules += " Za17";
+	if (!maxWidth) rules += " L40ub4c17";
+	if (!maxHeight) rules += " K40ub4c17";
 	return rules;
 };
 const arrowStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " sb151";
-	rules += " tEzkoQe151";
-	rules += " Zl151";
-	rules += " Fh151";
-	if (props.placement === "right") rules += " _Sd151";
-	else if (props.placement === "left") rules += " _Sa151";
-	else if (props.placement === "bottom") rules += " _Sc151";
-	else if (props.placement === "top") rules += " _Sb151";
-	else rules += " _Sc151";
+	rules += " sb17";
+	rules += " tEzkoQe17";
+	rules += " Zl17";
+	rules += " Fh17";
+	if (props.placement === "right") rules += " _Sd17";
+	else if (props.placement === "left") rules += " _Sa17";
+	else if (props.placement === "bottom") rules += " _Sc17";
+	else if (props.placement === "top") rules += " _Sb17";
+	else rules += " _Sc17";
 	if (props.placement === "right") {
-		rules += " -_7PloMd-y151";
-		rules += " __Ya151";
+		rules += " -_7PloMd-y17";
+		rules += " __Ya17";
 	} else if (props.placement === "left") {
-		rules += " -_7PloMd-e151";
-		rules += " __Ya151";
+		rules += " -_7PloMd-e17";
+		rules += " __Ya17";
 	}
-	rules += " _Vb151";
-	rules += " VrHHOgb151";
-	rules += " Vlb151";
+	rules += " _Vb17";
+	rules += " VOvEbWc17";
+	rules += " Vlb17";
 	return rules;
 };
 /**
@@ -164,8 +183,7 @@ const arrowStyles = function anonymous(props) {
 *   </Popover>
 * </PopoverTrigger>
 * ```
-*/
-function PopoverTrigger(props) {
+*/ function PopoverTrigger(props) {
 	return createComponent(PopoverTrigger$1, props);
 }
 /**
@@ -181,8 +199,7 @@ function PopoverTrigger(props) {
 *   </Popover>
 * </PopoverTrigger>
 * ```
-*/
-function Popover(props) {
+*/ function Popover(props) {
 	const theme = useTheme();
 	let arrowElement = null;
 	const [local, rest] = splitProps(props, [
@@ -212,7 +229,7 @@ function Popover(props) {
 			return offset();
 		},
 		arrowRef,
-		"class": (renderProps) => popoverStyles({
+		class: (renderProps) => popoverStyles({
 			...renderProps,
 			colorScheme: theme.colorScheme,
 			isArrowShown: !local.hideArrow,
@@ -235,19 +252,21 @@ function Popover(props) {
 			}
 		}), (() => {
 			var _el$ = getNextElement(_tmpl$);
-			insert(_el$, () => props.children);
-			effect((_p$) => {
-				var _v$ = local.UNSAFE_style, _v$2 = [
-					local.UNSAFE_className,
-					local.class,
-					innerDivStyle({ padding: padding() }, local.styles)
-				].filter(Boolean).join(" ");
-				_p$.e = style(_el$, _v$, _p$.e);
-				_v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
-				return _p$;
-			}, {
-				e: void 0,
-				t: void 0
+			insert(_el$, scope(() => {
+				return props.children;
+			}));
+			effect(() => {
+				return {
+					e: readShallow(local.UNSAFE_style),
+					t: readShallow([
+						local.UNSAFE_className,
+						local.class,
+						innerDivStyle({ padding: padding() }, local.styles)
+					].filter(Boolean).join(" "))
+				};
+			}, ({ e, t }, _p$) => {
+				style(_el$, e, _p$?.e);
+				className(_el$, t, _p$?.t);
 			});
 			return _el$;
 		})()]
@@ -256,54 +275,65 @@ function Popover(props) {
 function PopoverArrow(props) {
 	const placement = () => props.placement ?? "bottom";
 	return createComponent(OverlayArrow, {
-		"class": "",
+		class: "",
 		render: () => (() => {
 			var _el$2 = getNextElement(_tmpl$2);
 			var _ref$ = props.setArrowElement;
-			typeof _ref$ === "function" ? use(_ref$, _el$2) : props.setArrowElement = _el$2;
-			effect(() => setAttribute(_el$2, "class", arrowStyles({
+			typeof _ref$ === "function" || Array.isArray(_ref$) ? ref(() => {
+				return _ref$;
+			}, _el$2) : props.setArrowElement = _el$2;
+			effect(() => readShallow(arrowStyles({
 				trigger: null,
 				placement: placement(),
 				isEntering: false,
 				isExiting: false
-			})));
+			})), (_v$, _$p) => {
+				className(_el$2, _v$, _$p);
+			});
 			return _el$2;
 		})()
 	});
 }
-const popoverHeaderStyles = " Gx151";
+const popoverHeaderStyles = " Gx17";
 /**
 * Header section for popover with title and optional description.
-*/
-function PopoverHeader(props) {
-	return (() => {
-		var _el$3 = getNextElement(_tmpl$4), _el$4 = _el$3.firstChild, _el$6 = _el$4.nextSibling, [_el$7, _co$] = getNextMarker(_el$6.nextSibling);
-		insert(_el$4, () => props.title);
-		insert(_el$3, createComponent(Show, {
-			get when() {
+*/ function PopoverHeader(props) {
+	var _el$3 = getNextElement(_tmpl$4);
+	var _el$4 = _el$3.firstChild;
+	var _el$6 = _el$4.nextSibling;
+	var [_el$7, _el$8] = getNextMarker(_el$6.nextSibling);
+	insert(_el$4, () => {
+		return props.title;
+	});
+	insert(_el$3, createComponent(Show, {
+		get when() {
+			return props.description;
+		},
+		get children() {
+			var _el$5 = getNextElement(_tmpl$3);
+			insert(_el$5, () => {
 				return props.description;
-			},
-			get children() {
-				var _el$5 = getNextElement(_tmpl$3);
-				insert(_el$5, () => props.description);
-				return _el$5;
-			}
-		}), _el$7, _co$);
-		effect(() => className(_el$3, [popoverHeaderStyles, props.class].filter(Boolean).join(" ")));
-		return _el$3;
-	})();
+			});
+			return _el$5;
+		}
+	}), _el$7, _el$8);
+	effect(() => readShallow([popoverHeaderStyles, props.class].filter(Boolean).join(" ")), (_v$, _$p) => {
+		className(_el$3, _v$, _$p);
+	});
+	return _el$3;
 }
-const popoverFooterStyles = " sd151 Ue151 qe151 _Cb151 JC151 Te151 _kb151 ha151 ma151 la151 _jf151 ifbAdGe151";
+const popoverFooterStyles = " sd17 Ue17 qe17 _Cb17 JC17 Te17 _kb17 ha17 ma17 la17 _jf17 iaCI3de17";
 /**
 * Footer section for popover actions.
-*/
-function PopoverFooter(props) {
-	return (() => {
-		var _el$8 = getNextElement(_tmpl$);
-		insert(_el$8, () => props.children);
-		effect(() => className(_el$8, [popoverFooterStyles, props.class].filter(Boolean).join(" ")));
-		return _el$8;
-	})();
+*/ function PopoverFooter(props) {
+	var _el$9 = getNextElement(_tmpl$);
+	insert(_el$9, scope(() => {
+		return props.children;
+	}));
+	effect(() => readShallow([popoverFooterStyles, props.class].filter(Boolean).join(" ")), (_v$, _$p) => {
+		className(_el$9, _v$, _$p);
+	});
+	return _el$9;
 }
 //#endregion
 export { Popover, PopoverFooter, PopoverHeader, PopoverTrigger };

package/dist/popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/popover/index.tsx"],"sourcesContent":["import { type JSX, Show, splitProps } from \"solid-js\";\nimport {\n  Popover as HeadlessPopover,\n  PopoverTrigger as HeadlessPopoverTrigger,\n  OverlayArrow as HeadlessOverlayArrow,\n  type PopoverProps as HeadlessPopoverProps,\n  type PopoverTriggerProps as HeadlessPopoverTriggerProps,\n  type PopoverRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { StyleString } from \"../style\";\nimport { setColorScheme, style } from \"../style\" with { type: \"macro\" };\nimport { getAllowedOverrides } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { useTheme, type ColorScheme } from \"../provider\";\n\nexport type PopoverPlacement = NonNullable<HeadlessPopoverProps[\"placement\"]>;\nexport type Placement = PopoverPlacement;\nexport type PlacementAxis = NonNullable<PopoverRenderProps[\"placement\"]>;\nexport type PopoverSize = \"S\" | \"M\" | \"L\";\n/** Mirrors upstream S2: padding is applied to the popover's inner content div. */\nexport type PopoverPadding = \"default\" | \"none\";\n\nexport interface PopoverTriggerProps extends HeadlessPopoverTriggerProps {\n  /** The children of the popover trigger (trigger element and popover). */\n  children: JSX.Element;\n}\n\nexport interface PopoverProps extends Omit<HeadlessPopoverProps, \"class\" | \"style\" | \"children\"> {\n  /** The content of the popover. */\n  children: JSX.Element;\n  /** DOM id for the popover element. */\n  id?: string;\n  /** Accessible label for the popover. */\n  \"aria-label\"?: string;\n  /** Id of the element that labels the popover. */\n  \"aria-labelledby\"?: string;\n  /** Id of the element that describes the popover. */\n  \"aria-describedby\"?: string;\n  /** The position of the popover relative to the trigger. */\n  placement?: PopoverPlacement;\n  /** Size variant of the popover. */\n  size?: PopoverSize;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Whether to hide the arrow pointing to the trigger. */\n  hideArrow?: boolean;\n  /** Custom padding inside the popover. */\n  padding?: PopoverPadding;\n}\n\nconst popoverStyles = style<\n  PopoverRenderProps & {\n    colorScheme: ColorScheme | null;\n    isArrowShown: boolean;\n    isSubmenu: boolean;\n    size?: PopoverSize;\n  }\n>({\n  ...setColorScheme(),\n  \"--s2-container-bg\": {\n    type: \"backgroundColor\",\n    value: {\n      /* Viviana UI v2 (Glasselated): a floating overlay wears the PANEL surface, and\n       * fill and blur have to agree. `layer-1` resolves to `var(--surface-panel)` in\n       * the theme's backgroundColor map (style/spectrum-theme.ts) and pairs with\n       * `--blur-panel` below. This was `layer-2` (= `var(--surface-card)`) carrying\n       * `--blur-card` on the 14px `panel` radius — the card's fill and blur wearing\n       * the panel's corner. Matches the sibling overlay at menu/s2-menu-styles.ts. */\n      default: \"layer-1\",\n      forcedColors: \"Background\",\n    },\n  },\n  backgroundColor: \"--s2-container-bg\",\n  /* The panel register is open-coded here rather than spread from\n   * `glassSurface(\"panel\")` (s2-internal/style-utils.ts), for two reasons specific to\n   * this surface. (1) The fill has to stay behind the `--s2-container-bg` custom\n   * property: `arrowStyles` below paints the arrow with `fill: \"--s2-container-bg\"`,\n   * and the theme's auto/overlay color helpers compute against it as well\n   * (`autoStaticColor`/`generateOverlayColorScale`, style/tokens.ts) — replacing it\n   * with a direct `backgroundColor` would leave the arrow unfilled. (2) This surface\n   * paints its edge with `outline` (below) where the helper paints a `border`, so\n   * spreading it would draw a second 1px edge and shift the box metrics the arrow is\n   * positioned against. Blur is the load-bearing half: translucent fill plus blur is\n   * what reads as glass, and blur cannot ride on a background-color. */\n  backdropFilter: \"var(--blur-panel)\",\n  borderRadius: \"panel\",\n  /* The register's elevation cue is the inset rim, not a cast shadow. A popover is a\n   * translucent container over the page, so it takes the SURFACE rim — `elevated` and\n   * `emphasized` resolve to the same value (style/spectrum-theme.ts); the brighter\n   * `edge-glass` is for opaque controls, whose own fill contains the white.\n   * Unconditional, including when the arrow is shown: the previous\n   * `isArrowShown` branch dropped the rim to `none` and reached for the `filter` map\n   * instead, on the theory that a box-shadow cannot follow the arrow's silhouette.\n   * It does not need to. The rim is an INSET shadow, so it is clipped to the\n   * padding box and cannot spill onto the arrow at all; and the `filter` map is the\n   * one shadow map still resolving to a Spectrum cast drop-shadow, which is the\n   * elevation vocabulary this register does not use. The arrow carries its own edge\n   * via `stroke` in `arrowStyles` below. */\n  boxShadow: \"edge-glass-surface\",\n  outlineStyle: \"solid\",\n  outlineWidth: 1,\n  outlineColor: {\n    /* Was `lightDark(\"transparent-white-25\", \"gray-200\")`. `transparent-white-25` is\n     * the 25th stop of Spectrum's transparent-white ramp — alpha 0, not 25% white —\n     * so that pair drew a solid gray edge in dark and NO edge at all in light. A\n     * scheme-asymmetric edge is wrong under any reading of the register; the glass\n     * edge is `--border-subtle` in both schemes. */\n    default: \"border-subtle\",\n    forcedColors: \"ButtonBorder\",\n  },\n  width: {\n    size: {\n      S: 336,\n      M: 416,\n      L: 576,\n    },\n  },\n  maxWidth: \"calc(100vw - 24px)\",\n  boxSizing: \"border-box\",\n  display: \"flex\",\n  opacity: {\n    isEntering: 0,\n    isExiting: 0,\n  },\n  translateY: {\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4,\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4,\n      },\n    },\n    isSubmenu: 0,\n  },\n  translateX: {\n    placement: {\n      left: {\n        isEntering: 4,\n        isExiting: 4,\n      },\n      right: {\n        isEntering: -4,\n        isExiting: -4,\n      },\n    },\n    isSubmenu: 0,\n  },\n  transition: \"[opacity, translate]\",\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: \"in\",\n  },\n  isolation: \"isolate\",\n  pointerEvents: {\n    isExiting: \"none\",\n  },\n});\n\n// Byte-copied from upstream S2 `Popover.tsx` `innerDivStyle`. In upstream the\n// exported `Popover` paints TWO nested divs: the `AriaPopover` surface (the\n// `popover()`/`popoverStyles` box — bg, outline, radius, shadow, size width)\n// and an inner content div carrying the padding + scroll. `padding` defaults to\n// `'default'` (8px), `'none'` is 0 — the whole `none|sm|md|lg` scale (and its\n// `md`=16 default merged onto the surface) was a self-inflicted divergence.\nconst innerDivStyle = style<{ padding: PopoverPadding }>(\n  {\n    padding: {\n      padding: {\n        default: 8,\n        none: 0,\n      },\n    },\n    boxSizing: \"border-box\",\n    outlineStyle: \"none\",\n    borderRadius: \"inherit\",\n    overflow: \"auto\",\n    position: \"relative\",\n    width: \"full\",\n    maxSize: \"inherit\",\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nconst arrowStyles = style<PopoverRenderProps>({\n  display: \"block\",\n  fill: \"--s2-container-bg\",\n  width: 18,\n  height: 9,\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90,\n    },\n  },\n  translateX: {\n    placement: {\n      left: \"-25%\",\n      right: \"25%\",\n    },\n  },\n  strokeWidth: 1,\n  /* The arrow continues the surface's silhouette, so it wears the surface's edge:\n   * 1px `--border-subtle`, the same value `popoverStyles` puts on its `outline`.\n   * Was the same alpha-0-in-light `lightDark` pair as the outline — see the note\n   * there. This stroke is now the only thing drawing the arrow's edge, the\n   * `filter` drop-shadow having been removed from `popoverStyles`. */\n  stroke: {\n    default: \"border-subtle\",\n    forcedColors: \"ButtonBorder\",\n  },\n});\n\n/**\n * PopoverTrigger wraps around a trigger element and a Popover.\n * It handles opening and closing the Popover when the user interacts\n * with the trigger.\n *\n * @example\n * ```tsx\n * <PopoverTrigger>\n *   <Button>Open Popover</Button>\n *   <Popover>\n *     <p>Popover content here!</p>\n *   </Popover>\n * </PopoverTrigger>\n * ```\n */\nexport function PopoverTrigger(props: PopoverTriggerProps): JSX.Element {\n  return <HeadlessPopoverTrigger {...props} />;\n}\n\n/**\n * Styled popover component that displays content in an overlay.\n *\n * @example\n * ```tsx\n * <PopoverTrigger>\n *   <Button>Settings</Button>\n *   <Popover placement=\"bottom\" size=\"M\">\n *     <h3>Settings</h3>\n *     <p>Configure your preferences here.</p>\n *   </Popover>\n * </PopoverTrigger>\n * ```\n */\nexport function Popover(props: PopoverProps): JSX.Element {\n  const theme = useTheme();\n  let arrowElement: SVGSVGElement | null = null;\n  const [local, rest] = splitProps(props, [\n    \"placement\",\n    \"size\",\n    \"class\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"hideArrow\",\n    \"padding\",\n    \"offset\",\n    \"arrowRef\",\n  ]);\n\n  const placement = () => local.placement ?? \"bottom\";\n  const padding = () => local.padding ?? \"default\";\n  const offset = () => (local.offset ?? 8) + (local.hideArrow ? 0 : 8);\n  const setArrowElement = (element: SVGSVGElement | null) => {\n    arrowElement = element;\n  };\n  const arrowRef = () => (local.hideArrow ? (local.arrowRef?.() ?? null) : arrowElement);\n\n  return (\n    <HeadlessPopover\n      {...rest}\n      placement={placement()}\n      offset={offset()}\n      arrowRef={arrowRef}\n      // Mirror upstream `PopoverBase`: the surface class is PURELY `popoverStyles`\n      // (bg/outline/radius/shadow/size). `UNSAFE_className`/`class`/`styles` are\n      // NOT merged here — upstream routes them to the inner content div below.\n      class={(renderProps: PopoverRenderProps) =>\n        popoverStyles({\n          ...renderProps,\n          colorScheme: theme.colorScheme,\n          isArrowShown: !local.hideArrow,\n          isSubmenu: renderProps.trigger === \"SubmenuTrigger\",\n          size: local.size,\n          trigger: renderProps.trigger,\n        })\n      }\n      // Upstream sets `style={{...UNSAFE_style, zIndex: undefined}}` on the\n      // surface to strip the positioning z-index (our createOverlayPosition\n      // injects z-index:100000) and rely on `isolation: isolate` instead;\n      // `UNSAFE_style` itself moves to the inner div.\n      style={{ \"z-index\": undefined }}\n    >\n      {(renderProps: PopoverRenderProps) => (\n        <>\n          <Show when={!local.hideArrow}>\n            <PopoverArrow placement={renderProps.placement} setArrowElement={setArrowElement} />\n          </Show>\n          {/* Upstream's exported `Popover` inner content div: padding + scroll,\n              and the sink for UNSAFE/class/styles escape hatches. */}\n          <div\n            style={local.UNSAFE_style}\n            class={[\n              local.UNSAFE_className,\n              local.class,\n              innerDivStyle({ padding: padding() }, local.styles),\n            ]\n              .filter(Boolean)\n              .join(\" \")}\n          >\n            {props.children}\n          </div>\n        </>\n      )}\n    </HeadlessPopover>\n  );\n}\n\n/**\n * Arrow component for the popover.\n * Automatically positions itself based on the popover placement.\n */\ninterface PopoverArrowProps {\n  /** The current placement axis. */\n  placement: PlacementAxis | null;\n  /** Sets the arrow element for positioning measurements. */\n  setArrowElement: (element: SVGSVGElement | null) => void;\n}\n\nfunction PopoverArrow(props: PopoverArrowProps): JSX.Element {\n  const placement = () => props.placement ?? \"bottom\";\n\n  // Mirror upstream `<OverlayArrow className=\"\"><svg viewBox=\"0 0 18 10\"\n  // className={arrow(renderProps)}>`. The headless `OverlayArrow` self-positions\n  // (position:absolute + `[placement]:100%` + arrowProps cross-offset), so no\n  // positioning class is passed here — upstream passes an empty string.\n  return (\n    <HeadlessOverlayArrow\n      class=\"\"\n      render={() => (\n        <svg\n          ref={props.setArrowElement}\n          viewBox=\"0 0 18 10\"\n          class={arrowStyles({\n            trigger: null,\n            placement: placement(),\n            isEntering: false,\n            isExiting: false,\n          })}\n        >\n          <path\n            transform=\"translate(0 -1)\"\n            d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\"\n          />\n        </svg>\n      )}\n    />\n  );\n}\n\nexport interface PopoverHeaderProps {\n  /** The title of the popover. */\n  title: string;\n  /** Optional description text. */\n  description?: string;\n  /** Additional CSS class. */\n  class?: string;\n}\n\nconst popoverHeaderStyles = style({ marginBottom: 12 });\nconst popoverTitleStyles = style({ font: \"heading-xs\", color: \"neutral\" });\nconst popoverDescriptionStyles = style({ font: \"ui-sm\", color: \"neutral-subdued\", marginTop: 4 });\n\n/**\n * Header section for popover with title and optional description.\n */\nexport function PopoverHeader(props: PopoverHeaderProps): JSX.Element {\n  return (\n    <div class={[popoverHeaderStyles, props.class].filter(Boolean).join(\" \")}>\n      <h3 class={popoverTitleStyles}>{props.title}</h3>\n      <Show when={props.description}>\n        <p class={popoverDescriptionStyles}>{props.description}</p>\n      </Show>\n    </div>\n  );\n}\n\nexport interface PopoverFooterProps {\n  /** Footer content, typically buttons. */\n  children: JSX.Element;\n  /** Additional CSS class. */\n  class?: string;\n}\n\nconst popoverFooterStyles = style({\n  display: \"flex\",\n  gap: 8,\n  justifyContent: \"end\",\n  marginTop: 16,\n  paddingTop: 12,\n  borderWidth: 0,\n  borderTopWidth: 1,\n  borderStyle: \"solid\",\n  borderColor: \"gray-300\",\n});\n\n/**\n * Footer section for popover actions.\n */\nexport function PopoverFooter(props: PopoverFooterProps): JSX.Element {\n  return (\n    <div class={[popoverFooterStyles, props.class].filter(Boolean).join(\" \")}>{props.children}</div>\n  );\n}\n\nexport type { PopoverRenderProps };\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/popover/index.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Popover.tsx\n\n// Port of packages/@react-spectrum/s2/src/Popover.tsx.\n\nimport { Show } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  Popover as HeadlessPopover,\n  PopoverTrigger as HeadlessPopoverTrigger,\n  OverlayArrow as HeadlessOverlayArrow,\n  type PopoverProps as HeadlessPopoverProps,\n  type PopoverTriggerProps as HeadlessPopoverTriggerProps,\n  type PopoverRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { StyleString } from \"../style\";\nimport { setColorScheme, style } from \"../style\" with { type: \"macro\" };\nimport { getAllowedOverrides } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { useTheme, type ColorScheme } from \"../provider\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport type PopoverPlacement = NonNullable<HeadlessPopoverProps[\"placement\"]>;\nexport type Placement = PopoverPlacement;\nexport type PlacementAxis = NonNullable<PopoverRenderProps[\"placement\"]>;\nexport type PopoverSize = \"S\" | \"M\" | \"L\";\n/** Mirrors upstream S2: padding is applied to the popover's inner content div. */\nexport type PopoverPadding = \"default\" | \"none\";\n\nexport interface PopoverTriggerProps extends HeadlessPopoverTriggerProps {\n  /** The children of the popover trigger (trigger element and popover). */\n  children: JSX.Element;\n}\n\nexport interface PopoverProps extends Omit<HeadlessPopoverProps, \"class\" | \"style\" | \"children\"> {\n  /** The content of the popover. */\n  children: JSX.Element;\n  /** DOM id for the popover element. */\n  id?: string;\n  /** Accessible label for the popover. */\n  \"aria-label\"?: string;\n  /** Id of the element that labels the popover. */\n  \"aria-labelledby\"?: string;\n  /** Id of the element that describes the popover. */\n  \"aria-describedby\"?: string;\n  /** The position of the popover relative to the trigger. */\n  placement?: PopoverPlacement;\n  /** Size variant of the popover. */\n  size?: PopoverSize;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Whether to hide the arrow pointing to the trigger. */\n  hideArrow?: boolean;\n  /** Custom padding inside the popover. */\n  padding?: PopoverPadding;\n}\n\nconst popoverStyles = style<\n  PopoverRenderProps & {\n    colorScheme: ColorScheme | null;\n    isArrowShown: boolean;\n    isSubmenu: boolean;\n    size?: PopoverSize;\n  }\n>({\n  ...setColorScheme(),\n  \"--s2-container-bg\": {\n    type: \"backgroundColor\",\n    value: {\n      /* Terminal Glass: a popover is TIER 2 — it lands OVER a panel or a card, so it\n       * takes the float surface (`var(--surface-float)`, alpha .9) rather than the\n       * panel's .62. This was `layer-1` (= `--surface-panel`) paired with\n       * `--blur-panel`: a panel-weight translucency stacked on a panel has no visible\n       * boundary against the surface underneath it, and its text sits on whatever that\n       * surface was showing. Same tier as the menu, toast and tooltip; the shared value\n       * is `glassSurface(\"float\")` (s2-internal/style-utils.ts). */\n      default: \"float\",\n      forcedColors: \"Background\",\n    },\n  },\n  backgroundColor: \"--s2-container-bg\",\n  /* The float register is open-coded here rather than spread from\n   * `glassSurface(\"float\")` (s2-internal/style-utils.ts), for two reasons specific to\n   * this surface. (1) The fill has to stay behind the `--s2-container-bg` custom\n   * property: `arrowStyles` below paints the arrow with `fill: \"--s2-container-bg\"`,\n   * and the theme's auto/overlay color helpers compute against it as well\n   * (`autoStaticColor`/`generateOverlayColorScale`, style/tokens.ts) — replacing it\n   * with a direct `backgroundColor` would leave the arrow unfilled. (2) This surface\n   * paints its edge with `outline` (below) where the helper paints a `border`, so\n   * spreading it would draw a second 1px edge and shift the box metrics the arrow is\n   * positioned against. Blur is the load-bearing half: translucent fill plus blur is\n   * what reads as glass, and blur cannot ride on a background-color. */\n  backdropFilter: \"var(--blur-clear)\",\n  borderRadius: \"default\",\n  /* The float is the ONE tier in this register that casts. Panels and cards carry the\n   * inset rim alone, but a float lands on a surface of the same family, where a rim\n   * cannot separate the two edges — so it takes `--shadow-float` (the handoff's `sh2`)\n   * AND the rim, exactly as the handoff's own tier-2 overlays do\n   * (`box-shadow: var(--sh2), var(--edge-glass)`, Lesson Player toast / App popover).\n   * Both stay unconditional, arrow shown or not: the rim is an INSET shadow, clipped to\n   * the padding box, so it cannot spill onto the arrow, and the arrow carries its own\n   * edge via `stroke` in `arrowStyles` below. The `filter` map is deliberately not used\n   * — it is the one shadow map still resolving to a Spectrum cast drop-shadow, an\n   * elevation vocabulary this register does not speak. */\n  boxShadow: \"[var(--shadow-float), var(--edge-glass)]\",\n  outlineStyle: \"solid\",\n  outlineWidth: 1,\n  outlineColor: {\n    /* Terminal Glass draws the tier-2 edge in `--track`, not in the glass hairline the\n     * panel/card tiers use: a float sits on a lit surface rather than on the page, and\n     * `--border-subtle` disappears against it (App speed menu and popover, both\n     * `border:1px solid var(--track)`). */\n    default: \"[var(--track)]\",\n    forcedColors: \"ButtonBorder\",\n  },\n  width: {\n    size: {\n      S: 336,\n      M: 416,\n      L: 576,\n    },\n  },\n  maxWidth: \"calc(100vw - 24px)\",\n  boxSizing: \"border-box\",\n  display: \"flex\",\n  opacity: {\n    isEntering: 0,\n    isExiting: 0,\n  },\n  translateY: {\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4,\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4,\n      },\n    },\n    isSubmenu: 0,\n  },\n  translateX: {\n    placement: {\n      left: {\n        isEntering: 4,\n        isExiting: 4,\n      },\n      right: {\n        isEntering: -4,\n        isExiting: -4,\n      },\n    },\n    isSubmenu: 0,\n  },\n  transition: \"[opacity, translate]\",\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: \"in\",\n  },\n  isolation: \"isolate\",\n  pointerEvents: {\n    isExiting: \"none\",\n  },\n});\n\n// Byte-copied from upstream S2 `Popover.tsx` `innerDivStyle`. In upstream the\n// exported `Popover` paints TWO nested divs: the `AriaPopover` surface (the\n// `popover()`/`popoverStyles` box — bg, outline, radius, shadow, size width)\n// and an inner content div carrying the padding + scroll. `padding` defaults to\n// `'default'` (8px), `'none'` is 0 — the whole `none|sm|md|lg` scale (and its\n// `md`=16 default merged onto the surface) was a self-inflicted divergence.\nconst innerDivStyle = style<{ padding: PopoverPadding }>(\n  {\n    padding: {\n      padding: {\n        default: 8,\n        none: 0,\n      },\n    },\n    boxSizing: \"border-box\",\n    outlineStyle: \"none\",\n    borderRadius: \"inherit\",\n    overflow: \"auto\",\n    position: \"relative\",\n    width: \"full\",\n    maxSize: \"inherit\",\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nconst arrowStyles = style<PopoverRenderProps>({\n  display: \"block\",\n  fill: \"--s2-container-bg\",\n  width: 18,\n  height: 9,\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90,\n    },\n  },\n  translateX: {\n    placement: {\n      left: \"-25%\",\n      right: \"25%\",\n    },\n  },\n  strokeWidth: 1,\n  /* The arrow continues the surface's silhouette, so it wears the surface's edge:\n   * 1px `--track`, the same value `popoverStyles` puts on its `outline`.\n   * Was the same alpha-0-in-light `lightDark` pair as the outline — see the note\n   * there. This stroke is now the only thing drawing the arrow's edge, the\n   * `filter` drop-shadow having been removed from `popoverStyles`. */\n  stroke: {\n    default: \"[var(--track)]\",\n    forcedColors: \"ButtonBorder\",\n  },\n});\n\n/**\n * PopoverTrigger wraps around a trigger element and a Popover.\n * It handles opening and closing the Popover when the user interacts\n * with the trigger.\n *\n * @example\n * ```tsx\n * <PopoverTrigger>\n *   <Button>Open Popover</Button>\n *   <Popover>\n *     <p>Popover content here!</p>\n *   </Popover>\n * </PopoverTrigger>\n * ```\n */\nexport function PopoverTrigger(props: PopoverTriggerProps): JSX.Element {\n  return <HeadlessPopoverTrigger {...props} />;\n}\n\n/**\n * Styled popover component that displays content in an overlay.\n *\n * @example\n * ```tsx\n * <PopoverTrigger>\n *   <Button>Settings</Button>\n *   <Popover placement=\"bottom\" size=\"M\">\n *     <h3>Settings</h3>\n *     <p>Configure your preferences here.</p>\n *   </Popover>\n * </PopoverTrigger>\n * ```\n */\nexport function Popover(props: PopoverProps): JSX.Element {\n  const theme = useTheme();\n  let arrowElement: SVGSVGElement | null = null;\n  const [local, rest] = splitProps(props, [\n    \"placement\",\n    \"size\",\n    \"class\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"hideArrow\",\n    \"padding\",\n    \"offset\",\n    \"arrowRef\",\n  ]);\n\n  const placement = () => local.placement ?? \"bottom\";\n  const padding = () => local.padding ?? \"default\";\n  const offset = () => (local.offset ?? 8) + (local.hideArrow ? 0 : 8);\n  const setArrowElement = (element: SVGSVGElement | null) => {\n    arrowElement = element;\n  };\n  const arrowRef = () => (local.hideArrow ? (local.arrowRef?.() ?? null) : arrowElement);\n\n  return (\n    <HeadlessPopover\n      {...rest}\n      placement={placement()}\n      offset={offset()}\n      arrowRef={arrowRef}\n      // Mirror upstream `PopoverBase`: the surface class is PURELY `popoverStyles`\n      // (bg/outline/radius/shadow/size). `UNSAFE_className`/`class`/`styles` are\n      // NOT merged here — upstream routes them to the inner content div below.\n      class={(renderProps: PopoverRenderProps) =>\n        popoverStyles({\n          ...renderProps,\n          colorScheme: theme.colorScheme,\n          isArrowShown: !local.hideArrow,\n          isSubmenu: renderProps.trigger === \"SubmenuTrigger\",\n          size: local.size,\n          trigger: renderProps.trigger,\n        })\n      }\n      // Upstream sets `style={{...UNSAFE_style, zIndex: undefined}}` on the\n      // surface to strip the positioning z-index (our createOverlayPosition\n      // injects z-index:100000) and rely on `isolation: isolate` instead;\n      // `UNSAFE_style` itself moves to the inner div.\n      style={{ \"z-index\": undefined }}\n    >\n      {(renderProps: PopoverRenderProps) => (\n        <>\n          <Show when={!local.hideArrow}>\n            <PopoverArrow placement={renderProps.placement} setArrowElement={setArrowElement} />\n          </Show>\n          {/* Upstream's exported `Popover` inner content div: padding + scroll,\n              and the sink for UNSAFE/class/styles escape hatches. */}\n          <div\n            style={local.UNSAFE_style}\n            class={[\n              local.UNSAFE_className,\n              local.class,\n              innerDivStyle({ padding: padding() }, local.styles),\n            ]\n              .filter(Boolean)\n              .join(\" \")}\n          >\n            {props.children}\n          </div>\n        </>\n      )}\n    </HeadlessPopover>\n  );\n}\n\n/**\n * Arrow component for the popover.\n * Automatically positions itself based on the popover placement.\n */\ninterface PopoverArrowProps {\n  /** The current placement axis. */\n  placement: PlacementAxis | null;\n  /** Sets the arrow element for positioning measurements. */\n  setArrowElement: (element: SVGSVGElement | null) => void;\n}\n\nfunction PopoverArrow(props: PopoverArrowProps): JSX.Element {\n  const placement = () => props.placement ?? \"bottom\";\n\n  // Mirror upstream `<OverlayArrow className=\"\"><svg viewBox=\"0 0 18 10\"\n  // className={arrow(renderProps)}>`. The headless `OverlayArrow` self-positions\n  // (position:absolute + `[placement]:100%` + arrowProps cross-offset), so no\n  // positioning class is passed here — upstream passes an empty string.\n  return (\n    <HeadlessOverlayArrow\n      class=\"\"\n      render={() => (\n        <svg\n          ref={props.setArrowElement}\n          viewBox=\"0 0 18 10\"\n          class={arrowStyles({\n            trigger: null,\n            placement: placement(),\n            isEntering: false,\n            isExiting: false,\n          })}\n        >\n          <path\n            transform=\"translate(0 -1)\"\n            d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\"\n          />\n        </svg>\n      )}\n    />\n  );\n}\n\nexport interface PopoverHeaderProps {\n  /** The title of the popover. */\n  title: string;\n  /** Optional description text. */\n  description?: string;\n  /** Additional CSS class. */\n  class?: string;\n}\n\nconst popoverHeaderStyles = style({ marginBottom: 12 });\nconst popoverTitleStyles = style({ font: \"heading-xs\", color: \"neutral\" });\nconst popoverDescriptionStyles = style({ font: \"ui-sm\", color: \"neutral-subdued\", marginTop: 4 });\n\n/**\n * Header section for popover with title and optional description.\n */\nexport function PopoverHeader(props: PopoverHeaderProps): JSX.Element {\n  return (\n    <div class={[popoverHeaderStyles, props.class].filter(Boolean).join(\" \")}>\n      <h3 class={popoverTitleStyles}>{props.title}</h3>\n      <Show when={props.description}>\n        <p class={popoverDescriptionStyles}>{props.description}</p>\n      </Show>\n    </div>\n  );\n}\n\nexport interface PopoverFooterProps {\n  /** Footer content, typically buttons. */\n  children: JSX.Element;\n  /** Additional CSS class. */\n  class?: string;\n}\n\nconst popoverFooterStyles = style({\n  display: \"flex\",\n  gap: 8,\n  justifyContent: \"end\",\n  marginTop: 16,\n  paddingTop: 12,\n  borderWidth: 0,\n  borderTopWidth: 1,\n  borderStyle: \"solid\",\n  /* The register's own hairline, not a ramp stop: `gray-300` is markedly too light\n   * against the float fill in dark and reads as a second border in light. */\n  borderColor: \"[var(--border-hair)]\",\n});\n\n/**\n * Footer section for popover actions.\n */\nexport function PopoverFooter(props: PopoverFooterProps): JSX.Element {\n  return (\n    <div class={[popoverFooterStyles, props.class].filter(Boolean).join(\" \")}>{props.children}</div>\n  );\n}\n\nexport type { PopoverRenderProps };\n"],"mappings":"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"}