@proyecto-viviana/ui 0.4.1 → 0.6.0

package/dist/_chunk/LinkButton.js

@@ -0,0 +1,400 @@
+import { useProviderProps } from "../provider/index.js";
+import { s as useLinkButtonContext } from "./context.js";
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "./spectrum-context.js";
+/* empty css                                                                       */
+import { centerBaseline } from "../icon/center-baseline.js";
+import { pressScale } from "../pressScale.js";
+import { SkeletonContext } from "../skeleton/index.js";
+import { t as IconContext } from "./spectrum-icon.js";
+import { c as TextContext } from "./text.js";
+import { t as getSingleTextChild } from "./text-child.js";
+/* empty css                                                                       */
+/* empty css                                                                       */
+import { className, createComponent, effect, getNextElement, insert, mergeProps, template } from "solid-js/web";
+import { children, mergeProps as mergeProps$1, splitProps, useContext } from "solid-js";
+import { DialogTriggerContext, Link, PopoverTriggerContext } from "@proyecto-viviana/solidaria-components";
+//#region src/button/s2-button-styles.ts
+const s2Button = function anonymous(props, overrides) {
+	let rules = " ";
+	let minWidth = false;
+	let position = false;
+	let width = false;
+	let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "N") minWidth = true;
+		if (p[1] === "_P") position = true;
+		if (p[1] === "Z") width = true;
+		rules += p[0];
+	}
+	if (props.isFocusVisible) rules += " _Lf151";
+	else rules += " _Le151";
+	if (props.isStaticColor) rules += " Oe151";
+	else rules += " O8KaFke151";
+	rules += " Olc151";
+	rules += " _Mc151";
+	rules += " _Kd151";
+	if (props.staticColor === "white") rules += " -Ovbhqd-gcwrnr151";
+	else if (props.staticColor === "black") rules += " -Ovbhqd-g4hn3s151";
+	rules += " uxe7h4151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	rules += " xb151";
+	rules += " _xa151";
+	if (props.size === "XL") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "L") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "S") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "XS") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	if (props.isStaticColor) {
+		if (props.isDisabled) rules += " pi151";
+		else if (props.fillStyle === "outline") if (props.isPressed) rules += " pl151";
+		else if (props.isFocusVisible) rules += " pl151";
+		else if (props.isHovered) rules += " pl151";
+		else rules += " pl151";
+		else if (props.fillStyle === "fill") {
+			if (props.variant === "secondary") if (props.isPressed) rules += " pl151";
+			else if (props.isFocusVisible) rules += " pl151";
+			else if (props.isHovered) rules += " pl151";
+			else rules += " pl151";
+			else if (props.variant === "primary") rules += " ph151";
+		}
+	} else if (props.fillStyle === "outline") if (props.isDisabled) rules += " pUvnvv151";
+	else if (props.variant === "create") rules += " peUY0e151";
+	else if (props.variant === "secondary") if (props.isPressed) rules += " pQKeKoe151";
+	else if (props.isFocusVisible) rules += " pQKeKoe151";
+	else if (props.isHovered) rules += " pQKeKoe151";
+	else rules += " pUUi0Fe151";
+	else if (props.isPressed) rules += " pMwyHo151";
+	else if (props.isFocusVisible) rules += " pMwyHo151";
+	else if (props.isHovered) rules += " pMwyHo151";
+	else rules += " pHKLAu151";
+	else if (props.fillStyle === "fill") {
+		if (props.isDisabled) rules += " pUvnvv151";
+		else if (props.variant === "create") rules += " pzI0joc151";
+		else if (props.variant === "success") rules += " px151";
+		else if (props.variant === "warning") rules += " px151";
+		else if (props.variant === "negative") rules += " px151";
+		else if (props.variant === "accent") rules += " px151";
+		else if (props.variant === "secondary") if (props.isPressed) rules += " pMwyHo151";
+		else if (props.isFocusVisible) rules += " pMwyHo151";
+		else if (props.isHovered) rules += " pMwyHo151";
+		else rules += " pHKLAu151";
+		else if (props.variant === "primary") rules += " pLZZSrd151";
+	}
+	if (props.fillStyle === "outline") if (props.isDisabled) rules += " plc151";
+	else rules += " plb151";
+	else if (props.fillStyle === "fill") if (props.isDisabled) rules += " ple151";
+	else rules += " pla151";
+	rules += " sd151";
+	rules += " ea151";
+	rules += " enpkAwdb151";
+	rules += " _oa151";
+	rules += " Sv151";
+	rules += " SnpkAwdd151";
+	rules += " Rv151";
+	rules += " RnpkAwdd151";
+	if (props.size === "XL") {
+		if (!minWidth) rules += " Nl151";
+	} else if (props.size === "L") {
+		if (!minWidth) rules += " Nj151";
+	} else if (props.size === "S") {
+		if (!minWidth) rules += " Nf151";
+	} else if (props.size === "XS") {
+		if (!minWidth) rules += " Ne151";
+	} else if (!minWidth) rules += " Nk151";
+	rules += " osmOfn151";
+	rules += " nsmOfn151";
+	rules += " ksmOfn151";
+	rules += " jsmOfn151";
+	rules += " _neYWWze151";
+	rules += " qc151";
+	rules += " qsd151";
+	rules += " -Qg41Lb-IAxCW0c151";
+	rules += " -Qg41Lb-npkAwdIy151";
+	rules += " MAyFGYc151";
+	rules += " Td151";
+	rules += " Qd151";
+	rules += " -aRvJDd-Tu7Fubd151";
+	if (!position) rules += " _Pc151";
+	rules += " _Ca151";
+	rules += " _Wd151";
+	rules += " _4c151";
+	if (!width) rules += " ZJ151";
+	rules += " _Xa151";
+	rules += " Yd151";
+	rules += " Xb151";
+	rules += " _2b151";
+	rules += " _jf151";
+	rules += " _kJ8iPYd151";
+	rules += " hXMFGYc151";
+	if (props.variant === "create") rules += " mb151";
+	else if (props.fillStyle === "outline") rules += " mb151";
+	else if (props.fillStyle === "fill") rules += " mb151";
+	if (props.variant === "create") rules += " lb151";
+	else if (props.fillStyle === "outline") rules += " lb151";
+	else if (props.fillStyle === "fill") rules += " lb151";
+	if (props.isStaticColor) {
+		if (props.isDisabled) rules += " ig151";
+		else if (props.variant === "secondary") if (props.isPressed) rules += " ih151";
+		else if (props.isFocusVisible) rules += " ih151";
+		else if (props.isHovered) rules += " ih151";
+		else rules += " ig151";
+		else if (props.variant === "primary") if (props.isPressed) rules += " ij151";
+		else if (props.isFocusVisible) rules += " ij151";
+		else if (props.isHovered) rules += " ij151";
+		else rules += " ii151";
+	} else if (props.isDisabled) rules += " ifbAdGe151";
+	else if (props.fillStyle === "fill") {
+		if (props.variant === "success") if (props.isFocusVisible) rules += " i50Aju151";
+		else if (props.isPressed) rules += " i50Aju151";
+		else if (props.isHovered) rules += " i50Aju151";
+		else rules += " iLdhqLc151";
+		else if (props.variant === "warning") if (props.isFocusVisible) rules += " iyYQgL151";
+		else if (props.isPressed) rules += " iyYQgL151";
+		else if (props.isHovered) rules += " iyYQgL151";
+		else rules += " izNv0pd151";
+		else if (props.variant === "negative") if (props.isFocusVisible) rules += " itq3xC151";
+		else if (props.isPressed) rules += " itq3xC151";
+		else if (props.isHovered) rules += " itq3xC151";
+		else rules += " i7xrik151";
+		else if (props.variant === "accent") if (props.isFocusVisible) rules += " iJLwrv151";
+		else if (props.isPressed) rules += " iJLwrv151";
+		else if (props.isHovered) rules += " iJLwrv151";
+		else rules += " iI9Ko6c151";
+		else if (props.variant === "create") rules += " iruR7Yc151";
+		else if (props.variant === "secondary") rules += " irHHOgb151";
+		else if (props.variant === "primary") if (props.isPressed) rules += " iMwyHo151";
+		else if (props.isFocusVisible) rules += " iMwyHo151";
+		else if (props.isHovered) rules += " iMwyHo151";
+		else rules += " iHKLAu151";
+	} else if (props.variant === "create") rules += " iruR7Yc151";
+	else if (props.variant === "secondary") rules += " irHHOgb151";
+	else if (props.variant === "primary") if (props.isPressed) rules += " iMwyHo151";
+	else if (props.isFocusVisible) rules += " iMwyHo151";
+	else if (props.isHovered) rules += " iMwyHo151";
+	else rules += " iHKLAu151";
+	if (props.isDisabled) rules += " ilc151";
+	else if (props.isHovered) rules += " ild151";
+	else rules += " ila151";
+	rules += " gqMFGYc151";
+	rules += " -_8sjo0b-t5ZbAob151";
+	rules += " _yb151";
+	rules += " __ca151";
+	if (props.size === "XL") rules += " -M_-Mk151";
+	else if (props.size === "L") rules += " -M_-Mh151";
+	else if (props.size === "S") rules += " -M_-Mg151";
+	else if (props.size === "XS") rules += " -M_-Mf151";
+	else rules += " -M_-Mi151";
+	if (props.variant === "create") rules += " -_k_-_kb151";
+	else if (props.fillStyle === "outline") rules += " -_k_-_kb151";
+	else if (props.fillStyle === "fill") rules += " -_k_-_kb151";
+	if (props.variant === "create") rules += " -h_-hb151";
+	else if (props.fillStyle === "outline") rules += " -h_-hb151";
+	else if (props.fillStyle === "fill") rules += " -h_-hb151";
+	if (props.isStaticColor) {
+		if (props.fillStyle === "outline") if (props.isDisabled) rules += " -g_-g9151";
+		else if (props.isFocusVisible) rules += " -g_-gf151";
+		else if (props.isPressed) rules += " -g_-gf151";
+		else if (props.isHovered) rules += " -g_-gf151";
+		else rules += " -g_-g9151";
+		else if (props.fillStyle === "fill") {
+			if (props.isDisabled) rules += " -g_-gf151";
+			else if (props.variant === "secondary") if (props.isPressed) rules += " -g_-gg151";
+			else if (props.isFocusVisible) rules += " -g_-gg151";
+			else if (props.isHovered) rules += " -g_-gg151";
+			else rules += " -g_-gf151";
+			else if (props.variant === "primary") if (props.isPressed) rules += " -g_-gj151";
+			else if (props.isFocusVisible) rules += " -g_-gj151";
+			else if (props.isHovered) rules += " -g_-gj151";
+			else rules += " -g_-gi151";
+		}
+	} else if (props.fillStyle === "outline") if (props.isDisabled) rules += " -g_-g9151";
+	else if (props.isFocusVisible) rules += " -g_-gkDWoNd151";
+	else if (props.isPressed) rules += " -g_-gkDWoNd151";
+	else if (props.isHovered) rules += " -g_-gkDWoNd151";
+	else rules += " -g_-g9151";
+	else if (props.fillStyle === "fill") {
+		if (props.isDisabled) rules += " -g_-gkDWoNd151";
+		else if (props.variant === "create") if (props.isFocusVisible) rules += " -g_-gCJuNDb151";
+		else if (props.isPressed) rules += " -g_-gCJuNDb151";
+		else if (props.isHovered) rules += " -g_-gCJuNDb151";
+		else rules += " -g_-gGWdLfb151";
+		else if (props.variant === "success") if (props.isFocusVisible) rules += " -g_-g50Aju151";
+		else if (props.isPressed) rules += " -g_-g50Aju151";
+		else if (props.isHovered) rules += " -g_-g50Aju151";
+		else rules += " -g_-gLdhqLc151";
+		else if (props.variant === "warning") if (props.isFocusVisible) rules += " -g_-gyYQgL151";
+		else if (props.isPressed) rules += " -g_-gyYQgL151";
+		else if (props.isHovered) rules += " -g_-gyYQgL151";
+		else rules += " -g_-gzNv0pd151";
+		else if (props.variant === "negative") if (props.isFocusVisible) rules += " -g_-gtq3xC151";
+		else if (props.isPressed) rules += " -g_-gtq3xC151";
+		else if (props.isHovered) rules += " -g_-gtq3xC151";
+		else rules += " -g_-g7xrik151";
+		else if (props.variant === "accent") if (props.isFocusVisible) rules += " -g_-gJLwrv151";
+		else if (props.isPressed) rules += " -g_-gJLwrv151";
+		else if (props.isHovered) rules += " -g_-gJLwrv151";
+		else rules += " -g_-gI9Ko6c151";
+		else if (props.variant === "secondary") if (props.isFocusVisible) rules += " -g_-gG1H3ce151";
+		else if (props.isPressed) rules += " -g_-gG1H3ce151";
+		else if (props.isHovered) rules += " -g_-gG1H3ce151";
+		else rules += " -g_-gykFHp151";
+		else if (props.variant === "primary") if (props.isPressed) rules += " -g_-gMwyHo151";
+		else if (props.isFocusVisible) rules += " -g_-gMwyHo151";
+		else if (props.isHovered) rules += " -g_-gMwyHo151";
+		else rules += " -g_-gHKLAu151";
+	}
+	if (props.fillStyle === "outline") rules += " -g_-lgb151";
+	else if (props.fillStyle === "fill") if (props.isDisabled) rules += " -g_-lgd151";
+	else if (props.isHovered) rules += " -g_-lge151";
+	else rules += " -g_-lgc151";
+	return rules;
+};
+const s2ButtonText = function anonymous(props) {
+	let rules = " ";
+	rules += " TAzEcG151";
+	rules += " QAzEcG151";
+	rules += " _Jb151";
+	if (props.isProgressVisible) rules += " _6b151";
+	return rules;
+};
+const s2ButtonPendingIndicator = function anonymous(props) {
+	let rules = " ";
+	rules += " _Pa151";
+	rules += " WF151";
+	rules += " _EF151";
+	rules += " _Zc151";
+	if (props.isProgressVisible) rules += " _6c151";
+	else rules += " _6b151";
+	return rules;
+};
+//#endregion
+//#region src/button/LinkButton.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span data-rsp-slot=text>`);
+/**
+* A LinkButton navigates like a link while using the S2 Button visual treatment.
+*/
+function LinkButton(props) {
+	const providerProps = useProviderProps(props);
+	const contextProps = getSlottedContextProps(useLinkButtonContext(), props.slot);
+	const [local, headlessProps] = splitProps(mergeProps$1({
+		variant: "primary",
+		size: "M",
+		fillStyle: "fill"
+	}, providerProps, contextProps ?? {}, props), [
+		"variant",
+		"fillStyle",
+		"size",
+		"staticColor",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"children",
+		"ref"
+	]);
+	const variant = () => local.variant ?? "primary";
+	const fillStyle = () => local.fillStyle ?? "fill";
+	const size = () => local.size ?? "M";
+	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	const dialogTriggerContext = useContext(DialogTriggerContext);
+	const popoverTriggerContext = useContext(PopoverTriggerContext);
+	let linkElement;
+	const assignLinkRefs = mergeContextRefs(contextProps?.ref, props.ref);
+	const isOverlayTriggerOpen = () => !!linkElement && (dialogTriggerContext?.triggerRef() === linkElement && dialogTriggerContext.state.isOpen() || popoverTriggerContext?.triggerRef() === linkElement && popoverTriggerContext.state.isOpen());
+	const getClassName = (renderProps) => [local.UNSAFE_className, s2Button({
+		isHovered: renderProps.isHovered || isOverlayTriggerOpen(),
+		isPressed: renderProps.isPressed,
+		isFocused: renderProps.isFocused,
+		isFocusVisible: renderProps.isFocusVisible,
+		isDisabled: renderProps.isDisabled,
+		isPending: false,
+		variant: variant(),
+		fillStyle: fillStyle(),
+		size: size(),
+		staticColor: local.staticColor,
+		isStaticColor: !!local.staticColor
+	}, mergedStyles())].filter(Boolean).join(" ");
+	const getStyle = (renderProps) => pressScale(() => linkElement, mergedUnsafeStyle())(renderProps);
+	function LinkButtonContent() {
+		const iconContextValue = {
+			slot: "icon",
+			render: centerBaseline({
+				slot: "icon",
+				styles: " _Ja151"
+			}),
+			styles: " ZuUmpre151 FuUmpre151 I67logd151 _va151"
+		};
+		const textContextValue = {
+			styles: () => s2ButtonText({ isProgressVisible: false }),
+			"data-rsp-slot": "text"
+		};
+		function ResolvedContent() {
+			const resolvedChildren = children(() => local.children);
+			const content = () => resolvedChildren();
+			const textChild = () => getSingleTextChild(content());
+			return textChild() !== void 0 ? (() => {
+				var _el$ = getNextElement(_tmpl$);
+				insert(_el$, textChild);
+				effect(() => className(_el$, s2ButtonText({ isProgressVisible: false })));
+				return _el$;
+			})() : content();
+		}
+		return createComponent(SkeletonContext.Provider, {
+			value: null,
+			get children() {
+				return createComponent(TextContext.Provider, {
+					value: textContextValue,
+					get children() {
+						return createComponent(IconContext.Provider, {
+							value: iconContextValue,
+							get children() {
+								return createComponent(ResolvedContent, {});
+							}
+						});
+					}
+				});
+			}
+		});
+	}
+	return createComponent(Link, mergeProps(headlessProps, {
+		"class": getClassName,
+		style: getStyle,
+		ref: (element) => {
+			linkElement = element;
+			assignLinkRefs(element);
+		},
+		get children() {
+			return createComponent(LinkButtonContent, {});
+		}
+	}));
+}
+//#endregion
+export { s2ButtonText as i, s2Button as n, s2ButtonPendingIndicator as r, LinkButton as t };
+
+//# sourceMappingURL=LinkButton.js.map

package/dist/_chunk/LinkButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.js","names":[],"sources":["../../src/button/s2-button-styles.ts","../../src/button/LinkButton.tsx"],"sourcesContent":["// @ts-nocheck\n/*\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\nimport { baseColor, focusRing, lightDark, style } from \"../style\" with { type: \"macro\" };\nimport {\n  control,\n  getAllowedOverrides,\n  staticColor,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport type { ButtonFillStyle, ButtonSize, ButtonVariant, StaticColor } from \"./types\";\n\nexport interface S2ButtonRenderState {\n  isHovered?: boolean;\n  isPressed?: boolean;\n  isFocused?: boolean;\n  isFocusVisible?: boolean;\n  isDisabled?: boolean;\n  isPending?: boolean;\n}\n\nexport interface S2ButtonStyleProps extends S2ButtonRenderState {\n  variant: ButtonVariant;\n  fillStyle: ButtonFillStyle;\n  size: ButtonSize;\n  staticColor?: StaticColor;\n  isStaticColor: boolean;\n}\n\nexport const s2Button = style<S2ButtonStyleProps>(\n  {\n    ...focusRing(),\n    ...staticColor(),\n    ...control({ shape: \"default\", wrap: true, icon: true }),\n    position: \"relative\",\n    justifyContent: \"center\",\n    textAlign: \"start\",\n    /* The Glasselated register — 5px corner, `--edge-glass` rim, mono 400 — now\n     * arrives with `control()` above, which reads it off the handoff's own button\n     * (TerminalGlassLab.tsx:230 `btnBase` over design-handoff-v2.css:283\n     * `--type-button`). It used to be spelled out here, which is exactly why Button\n     * was the only control that converted. Size and padding still come from\n     * `control()`'s S/M/L/XL ramp rather than the mock's single fixed 7px/14px.\n     *\n     * No blur: the handoff's buttons are opaque. Glass is a surface treatment. */\n    userSelect: \"none\",\n    width: \"fit\",\n    textDecoration: \"none\",\n    transition: \"default\",\n    borderStyle: \"solid\",\n    borderWidth: {\n      fillStyle: {\n        /* Filled buttons carry the edge too. Every button the handoff draws has one,\n         * with no exception: accent `1px solid var(--interactive-fill)` over the same\n         * fill (TerminalGlassLab.tsx:303-304), secondary `1px solid var(--border-subtle)`\n         * (:315), create (:326), ghost over a transparent fill (:352), the well-filled\n         * RUN (:365). `btnBase` (:230-235) declares only radius/padding/cursor/shadow,\n         * so each variant spells its own edge — and every one of them does.\n         *\n         * This was 0, which is why `variant.create: 1` below was the only edge in the\n         * component that ever drew. `control()` sets `boxSizing: \"border-box\"`, so the\n         * S/M/L/XL height ramp is unchanged; only the content box narrows by 2px. */\n        fill: 1,\n        /* 1px, not Spectrum's 2px: the handoff's secondary and ghost buttons are\n         * hairline-edged like everything else it draws (TerminalGlassLab.tsx:231),\n         * and a 2px edge beside a 1px field reads as a different weight class. */\n        outline: 1,\n      },\n      variant: {\n        /* The handoff draws create with an explicit 1px rim in its own border token,\n         * not the fill colour — the pale wash needs the edge to hold its shape against\n         * a light surface. `variant` is applied after `fillStyle`, so this is 1px in\n         * both fill and outline, which is what the handoff shows. */\n        create: 1,\n      },\n    },\n    borderColor: {\n      variant: {\n        /* `primary` deliberately stays on the neutral ramp. The handoff's filled CTA\n         * draws its border in its own FILL colour — `1px solid var(--interactive-fill)`\n         * over `background-color: var(--interactive-fill)` (TerminalGlassLab.tsx:303-304)\n         * — so gray-800 tracking the `baseColor(\"neutral\")` fill below is already the\n         * right idiom. A hairline here would break that fill/edge pairing. */\n        primary: baseColor(\"gray-800\"),\n        /* `var(--border-subtle)` — the handoff's secondary (TerminalGlassLab.tsx:315)\n         * and ghost (:352) buttons are both hairlines in it. gray-300 is a solid mid-gray\n         * (#c5d0de light, #67717d dark), a full rule weight rather than an edge.\n         *\n         * Plain string, not `baseColor()`: --border-subtle has no ramp to step along, so\n         * this intentionally drops the hover/press border steps `baseColor()` was emitting\n         * — the handoff declares no hover border change on any button. The sibling\n         * `isStaticColor` branch below stays on `baseColor(\"transparent-overlay-300\")`\n         * on purpose; that is the over-imagery case and keeps its overlay ramp. */\n        secondary: \"border-subtle\",\n        create: \"create-border\",\n      },\n      /* Every FILLED variant needs its border colour spelled out HERE, under\n       * `fillStyle.fill.variant`. The earlier note claimed variants with no entry\n       * \"fall through to `variant` above\" the way `borderWidth` does — that is\n       * WRONG for a colour value, and it shipped Today (secondary-fill) and Create\n       * (create-fill) with a black rim. The reason `borderWidth` falls through is\n       * that BOTH its keys (`fillStyle.fill` and `variant.create`) name a width, so\n       * a fill button always has one to land on. `borderColor` does not: once the\n       * higher-priority `fillStyle` key matches (fillStyle === \"fill\"), it OWNS the\n       * result, and a fill variant with no leaf in this sub-map resolves to nothing\n       * from the winning branch — it does NOT consult the sibling `variant` map\n       * below. The only value left is the `forcedColors` fallback, `ButtonBorder`,\n       * which paints black in a normal viewport. So each fill variant is listed\n       * explicitly, mirroring the proven accent path stop for stop.\n       *\n       * The `variant` map below is kept for the OUTLINE variants (Ghost), which do\n       * not match `fillStyle.fill` and so still read secondary/create from it.\n       *\n       * accent/negative border the button in the same token as their fill\n       * (handoff :303-304), so they mirror the `backgroundColor` map stop for stop,\n       * hover included. secondary and create carry no hover-border step (the\n       * handoff declares none), so each is a flat token: `border-subtle` for the\n       * secondary hairline, `create-border` for the create rim (the pale wash needs\n       * the edge to hold its shape). primary tracks its neutral fill in gray-800,\n       * matching the `variant.primary` idiom. Placed before\n       * `isDisabled`/`isStaticColor`/`forcedColors` so those still win. */\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: baseColor(\"gray-800\"),\n            secondary: \"border-subtle\",\n            create: \"create-border\",\n            accent: {\n              default: lightDark(\"accent-900\", \"accent-700\"),\n              isHovered: lightDark(\"accent-1000\", \"accent-800\"),\n              isPressed: lightDark(\"accent-1000\", \"accent-800\"),\n              isFocusVisible: lightDark(\"accent-1000\", \"accent-800\"),\n            },\n            negative: {\n              default: lightDark(\"negative-900\", \"negative-700\"),\n              isHovered: lightDark(\"negative-1000\", \"negative-600\"),\n              isPressed: lightDark(\"negative-1000\", \"negative-600\"),\n              isFocusVisible: lightDark(\"negative-1000\", \"negative-600\"),\n            },\n            /* warning/success are negative's status counterparts: the same saturated-fill\n             * idiom on the warm (notice -> amber) and success (positive -> green) channels.\n             * Border mirrors the fill stop for stop, exactly as accent/negative do. */\n            warning: {\n              default: lightDark(\"notice-900\", \"notice-700\"),\n              isHovered: lightDark(\"notice-1000\", \"notice-600\"),\n              isPressed: lightDark(\"notice-1000\", \"notice-600\"),\n              isFocusVisible: lightDark(\"notice-1000\", \"notice-600\"),\n            },\n            success: {\n              default: lightDark(\"positive-900\", \"positive-700\"),\n              isHovered: lightDark(\"positive-1000\", \"positive-600\"),\n              isPressed: lightDark(\"positive-1000\", \"positive-600\"),\n              isFocusVisible: lightDark(\"positive-1000\", \"positive-600\"),\n            },\n          },\n        },\n      },\n      isDisabled: \"disabled\",\n      isStaticColor: {\n        variant: {\n          primary: baseColor(\"transparent-overlay-800\"),\n          secondary: baseColor(\"transparent-overlay-300\"),\n        },\n        isDisabled: \"transparent-overlay-300\",\n      },\n      forcedColors: {\n        default: \"ButtonBorder\",\n        isHovered: \"Highlight\",\n        isDisabled: \"GrayText\",\n      },\n    },\n    backgroundColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: baseColor(\"neutral\"),\n            secondary: {\n              /* `var(--btn-secondary-bg)` (TerminalGlassLab.tsx:314) — #e9eff6 in light,\n               * `var(--surface-raised)` = rgb(51,58,68) in dark (design-handoff-v2.css:73,\n               * :196, :179). No pre-existing token covered both schemes: `raised` is\n               * #ffffff in light and `well` is #0a0f14 in dark, so each matches only one.\n               * The backgroundColor map therefore gained a `btn-secondary` entry pointing\n               * at the variable the island already ships. gray-100 (#e5eaf1 / #43474d) was\n               * a step off in both schemes and lost the slate cast in dark.\n               *\n               * The hover/press/focus stops stay on gray-200 (#dbe3ed / #555c64). Against\n               * the new resting fill that darkens in light and lightens in dark, which is\n               * the correct direction in each scheme — hover moves toward contrast with\n               * the page, so it necessarily reverses between schemes. --surface-hover is\n               * NOT usable here: it is an alpha wash (rgba(255,255,255,.75) light,\n               * rgba(58,62,70,.48) dark) meant to composite over a surface, and the macro\n               * bakes fills with no knowledge of the backdrop — see the gray-100/200 note\n               * in style/glasselated-ramps.ts. As a replacement fill it would turn an\n               * opaque button translucent on hover and, composited over the panel, invert\n               * the step in both schemes. */\n              default: \"btn-secondary\",\n              isHovered: \"gray-200\",\n              isPressed: \"gray-200\",\n              isFocusVisible: \"gray-200\",\n            },\n            accent: {\n              default: lightDark(\"accent-900\", \"accent-700\"),\n              isHovered: lightDark(\"accent-1000\", \"accent-800\"),\n              isPressed: lightDark(\"accent-1000\", \"accent-800\"),\n              isFocusVisible: lightDark(\"accent-1000\", \"accent-800\"),\n            },\n            negative: {\n              default: lightDark(\"negative-900\", \"negative-700\"),\n              isHovered: lightDark(\"negative-1000\", \"negative-600\"),\n              isPressed: lightDark(\"negative-1000\", \"negative-600\"),\n              isFocusVisible: lightDark(\"negative-1000\", \"negative-600\"),\n            },\n            /* warning/success fills mirror negative on the warm (notice -> amber) and success\n             * (positive -> green) channels. The green ramp is L-solved to carry the same\n             * white-ink contrast as amber, so all three status fills clear AA identically\n             * (see style/glasselated-ramps.ts). */\n            warning: {\n              default: lightDark(\"notice-900\", \"notice-700\"),\n              isHovered: lightDark(\"notice-1000\", \"notice-600\"),\n              isPressed: lightDark(\"notice-1000\", \"notice-600\"),\n              isFocusVisible: lightDark(\"notice-1000\", \"notice-600\"),\n            },\n            success: {\n              default: lightDark(\"positive-900\", \"positive-700\"),\n              isHovered: lightDark(\"positive-1000\", \"positive-600\"),\n              isPressed: lightDark(\"positive-1000\", \"positive-600\"),\n              isFocusVisible: lightDark(\"positive-1000\", \"positive-600\"),\n            },\n            /* The create CTA does not follow the semantic-fill pattern above. Those step\n             * along a ramp for hover; create-bg has no ramp, so the deeper wash is a named\n             * token. Both schemes are declared in the token itself, hence no lightDark(). */\n            create: {\n              default: \"create-bg\",\n              isHovered: \"create-bg-deep\",\n              isPressed: \"create-bg-deep\",\n              isFocusVisible: \"create-bg-deep\",\n            },\n          },\n          isDisabled: \"disabled\",\n        },\n        outline: {\n          default: \"transparent\",\n          isHovered: \"gray-100\",\n          isPressed: \"gray-100\",\n          isFocusVisible: \"gray-100\",\n          isDisabled: \"transparent\",\n        },\n      },\n      isStaticColor: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: baseColor(\"transparent-overlay-800\"),\n              secondary: baseColor(\"transparent-overlay-100\"),\n            },\n            isDisabled: \"transparent-overlay-100\",\n          },\n          outline: {\n            default: \"transparent\",\n            isHovered: \"transparent-overlay-100\",\n            isPressed: \"transparent-overlay-100\",\n            isFocusVisible: \"transparent-overlay-100\",\n            isDisabled: \"transparent\",\n          },\n        },\n      },\n      forcedColors: {\n        fillStyle: {\n          fill: {\n            default: \"ButtonText\",\n            isHovered: \"Highlight\",\n            isDisabled: \"GrayText\",\n          },\n          outline: \"ButtonFace\",\n        },\n      },\n    },\n    color: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: \"gray-25\",\n            secondary: baseColor(\"neutral\"),\n            accent: \"white\",\n            negative: \"white\",\n            /* warning/success carry white ink on their saturated fills, like accent/negative.\n             * The fill stops (notice/positive -900/-700) are pinned >= 4.5:1 on white. */\n            warning: \"white\",\n            success: \"white\",\n            /* Dark ink on a pale fill — the inverse of every Spectrum variant. #7a5600 on\n             * #ffedb0 is 6.4:1, so this clears AA comfortably in both schemes. */\n            create: \"create-ink\",\n          },\n          isDisabled: \"disabled\",\n        },\n        outline: {\n          default: baseColor(\"neutral\"),\n          variant: {\n            /* Ghost is the register's outlined SECONDARY, and the handoff inks it in the\n             * MUTED slate, not the strong neutral its filled twin (Today) wears: the\n             * `Ghost` button is drawn `color: var(--text-secondary)` on a transparent fill\n             * inside `--border-subtle` (TerminalGlassLab.tsx:273-277), whereas the filled\n             * secondary is `--text-primary`. `--text-secondary` is pinned to `gray-500` in\n             * both schemes (glasselated-ramps.ts:114,855 — #64748b light / #9aa0a8 dark),\n             * so a secondary+outline button de-emphasises its label exactly the way the\n             * register draws it. Every other outline variant keeps `outline.default`'s\n             * neutral ink; only secondary steps down. */\n            secondary: baseColor(\"gray-500\"),\n            /* create-ink is near-black in the dark scheme — legible ON the pale fill, not\n             * against a dark page. Outline drops the fill, so the dark scheme takes the\n             * fill colour as its ink instead. */\n            create: lightDark(\"create-ink\", \"create-bg\"),\n          },\n          isDisabled: \"disabled\",\n        },\n      },\n      isStaticColor: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: \"auto\",\n              secondary: {\n                default: \"transparent-overlay-1000\",\n                isHovered: \"transparent-overlay-1000\",\n                isFocusVisible: \"transparent-overlay-1000\",\n                isPressed: \"transparent-overlay-1000\",\n              },\n            },\n          },\n          outline: {\n            default: {\n              default: \"transparent-overlay-1000\",\n              isHovered: \"transparent-overlay-1000\",\n              isFocusVisible: \"transparent-overlay-1000\",\n              isPressed: \"transparent-overlay-1000\",\n            },\n          },\n        },\n        isDisabled: \"transparent-overlay-400\",\n      },\n      forcedColors: {\n        fillStyle: {\n          fill: {\n            default: \"ButtonFace\",\n            isDisabled: \"HighlightText\",\n          },\n          outline: {\n            default: \"ButtonText\",\n            isDisabled: \"GrayText\",\n          },\n        },\n      },\n    },\n    \"--iconPrimary\": {\n      type: \"fill\",\n      value: \"currentColor\",\n    },\n    outlineColor: {\n      default: \"focus-ring\",\n      isStaticColor: \"transparent-overlay-1000\",\n      forcedColors: \"Highlight\",\n    },\n    forcedColorAdjust: \"none\",\n    disableTapHighlight: true,\n  },\n  getAllowedOverrides(),\n);\n\nexport const s2ButtonText = style<{ isProgressVisible?: boolean }>({\n  paddingY: \"--labelPadding\",\n  order: 1,\n  visibility: {\n    isProgressVisible: \"hidden\",\n  },\n});\n\nexport const s2ButtonPendingIndicator = style<{\n  isPending?: boolean;\n  isProgressVisible?: boolean;\n}>({\n  position: \"absolute\",\n  top: \"50%\",\n  left: \"50%\",\n  transform: \"translate(-50%, -50%)\",\n  visibility: {\n    default: \"hidden\",\n    isProgressVisible: \"visible\",\n  },\n});\n","import {\n  children as resolveChildren,\n  mergeProps,\n  splitProps,\n  useContext,\n  type JSX,\n} from \"solid-js\";\nimport {\n  DialogTriggerContext,\n  Link as HeadlessLink,\n  PopoverTriggerContext,\n  type LinkProps as HeadlessLinkProps,\n  type LinkRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { StyleString } from \"../style\";\nimport { fontRelative, style } from \"../style\" with { type: \"macro\" };\nimport { IconContext } from \"../icon/spectrum-icon\";\nimport { centerBaseline } from \"../icon/center-baseline\";\nimport { SkeletonContext } from \"../skeleton\";\nimport { TextContext } from \"../text\";\nimport { useProviderProps } from \"../provider\";\nimport { pressScale } from \"../pressScale\";\nimport { useLinkButtonContext } from \"./context\";\nimport { s2Button, s2ButtonText } from \"./s2-button-styles\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n} from \"./spectrum-context\";\nimport type { ButtonFillStyle, ButtonSize, ButtonVariant, StaticColor } from \"./types\";\nimport { getSingleTextChild } from \"./text-child\";\n\ntype StyledLinkButtonBaseProps = Omit<\n  HeadlessLinkProps,\n  \"class\" | \"style\" | \"children\" | \"onClick\"\n>;\n\nexport interface LinkButtonProps extends StyledLinkButtonBaseProps {\n  /** The content to display in the LinkButton. */\n  children?: JSX.Element;\n  /** The visual style of the LinkButton. */\n  variant?: ButtonVariant;\n  /** The background style of the LinkButton. */\n  fillStyle?: ButtonFillStyle;\n  /** The size of the LinkButton. */\n  size?: ButtonSize;\n  /** The static color style to apply. Useful when the LinkButton appears over a color background. */\n  staticColor?: StaticColor;\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}\n\n/**\n * A LinkButton navigates like a link while using the S2 Button visual treatment.\n */\nexport function LinkButton(props: LinkButtonProps): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(useLinkButtonContext(), props.slot);\n  const defaultProps: Partial<LinkButtonProps> = {\n    variant: \"primary\",\n    size: \"M\",\n    fillStyle: \"fill\",\n  };\n  const merged = mergeProps(defaultProps, providerProps, contextProps ?? {}, props);\n  const [local, headlessProps] = splitProps(merged, [\n    \"variant\",\n    \"fillStyle\",\n    \"size\",\n    \"staticColor\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const variant = (): ButtonVariant => local.variant ?? \"primary\";\n  const fillStyle = (): ButtonFillStyle => local.fillStyle ?? \"fill\";\n  const size = (): ButtonSize => local.size ?? \"M\";\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const dialogTriggerContext = useContext(DialogTriggerContext);\n  const popoverTriggerContext = useContext(PopoverTriggerContext);\n  let linkElement: HTMLAnchorElement | undefined;\n  const assignLinkRefs = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLElement> } | null)?.ref,\n    props.ref,\n  );\n  const isOverlayTriggerOpen = () =>\n    !!linkElement &&\n    ((dialogTriggerContext?.triggerRef() === linkElement && dialogTriggerContext.state.isOpen()) ||\n      (popoverTriggerContext?.triggerRef() === linkElement &&\n        popoverTriggerContext.state.isOpen()));\n\n  const getClassName = (renderProps: LinkRenderProps): string =>\n    [\n      local.UNSAFE_className,\n      s2Button(\n        {\n          isHovered: renderProps.isHovered || isOverlayTriggerOpen(),\n          isPressed: renderProps.isPressed,\n          isFocused: renderProps.isFocused,\n          isFocusVisible: renderProps.isFocusVisible,\n          isDisabled: renderProps.isDisabled,\n          isPending: false,\n          variant: variant(),\n          fillStyle: fillStyle(),\n          size: size(),\n          staticColor: local.staticColor,\n          isStaticColor: !!local.staticColor,\n        },\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const getStyle = (renderProps: LinkRenderProps): JSX.CSSProperties =>\n    pressScale(() => linkElement, mergedUnsafeStyle())(renderProps);\n\n  function LinkButtonContent() {\n    const iconContextValue = {\n      slot: \"icon\",\n      render: centerBaseline({ slot: \"icon\", styles: style({ order: 0 }) }),\n      styles: style({\n        size: fontRelative(20),\n        marginStart: \"--iconMargin\",\n        flexShrink: 0,\n      }),\n    };\n    const textContextValue = {\n      styles: () => s2ButtonText({ isProgressVisible: false }),\n      \"data-rsp-slot\": \"text\",\n    };\n\n    function ResolvedContent() {\n      const resolvedChildren = resolveChildren(() => local.children);\n      const content = () => resolvedChildren();\n      const textChild = () => getSingleTextChild(content());\n\n      return textChild() !== undefined ? (\n        <span class={s2ButtonText({ isProgressVisible: false })} data-rsp-slot=\"text\">\n          {textChild()}\n        </span>\n      ) : (\n        content()\n      );\n    }\n\n    return (\n      <>\n        <SkeletonContext.Provider value={null}>\n          <TextContext.Provider value={textContextValue}>\n            <IconContext.Provider value={iconContextValue}>\n              <ResolvedContent />\n            </IconContext.Provider>\n          </TextContext.Provider>\n        </SkeletonContext.Provider>\n      </>\n    );\n  }\n\n  return (\n    <HeadlessLink\n      {...headlessProps}\n      class={getClassName}\n      style={getStyle}\n      ref={(element: HTMLElement) => {\n        linkElement = element as HTMLAnchorElement;\n        assignLinkRefs(element);\n      }}\n    >\n      <LinkButtonContent />\n    </HeadlessLink>\n  );\n}\n"],"mappings":"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"}