@proyecto-viviana/ui 0.5.0 → 0.6.1

package/dist/badge/index.js

@@ -0,0 +1,328 @@
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.js";
+import { centerBaseline } from "../icon/center-baseline.js";
+import { SkeletonWrapper } from "../skeleton/index.js";
+import { t as IconContext } from "../_chunk/spectrum-icon.js";
+import { c as TextContext, s as Text } from "../_chunk/text.js";
+/* empty css                                                                               */
+/* empty css                                                                               */
+import { createComponent, getNextElement, insert, mergeProps, runHydrationEvents, spread, template, use } from "solid-js/web";
+import { children, createContext, mergeProps as mergeProps$1, splitProps, useContext } from "solid-js";
+import { filterDOMProps } from "@proyecto-viviana/solidaria";
+//#region src/badge/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span>`);
+const BadgeContext = createContext(null);
+const badgeStyles = function anonymous(props, overrides) {
+	let rules = " ";
+	let minWidth = 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;
+		rules += p[0];
+	}
+	rules += " uxe7h4151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	}
+	rules += " xd151";
+	rules += " _xa151";
+	rules += " xX0cczbc151";
+	rules += " _xX0cczba151";
+	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.fillStyle === "outline") if (props.variant === "metric") rules += " pmb1iPc151";
+	else if (props.variant === "live") rules += " pQtAfKc151";
+	else if (props.variant === "negative") rules += " phuKnyb151";
+	else if (props.variant === "notice") rules += " pU7Lghc151";
+	else if (props.variant === "positive") rules += " pbiKgae151";
+	else if (props.variant === "informative") rules += " pY8y2k151";
+	else if (props.variant === "accent") rules += " p5dxOg151";
+	else rules += " pnfaGpb151";
+	else if (props.fillStyle === "subtle") if (props.variant === "metric") rules += " pmb1iPc151";
+	else if (props.variant === "live") rules += " pQtAfKc151";
+	else if (props.variant === "negative") rules += " phuKnyb151";
+	else if (props.variant === "notice") rules += " pU7Lghc151";
+	else if (props.variant === "positive") rules += " pbiKgae151";
+	else if (props.variant === "informative") rules += " pY8y2k151";
+	else if (props.variant === "accent") rules += " p5dxOg151";
+	else rules += " pnfaGpb151";
+	else if (props.fillStyle === "bold") if (props.variant === "metric") rules += " pg151";
+	else if (props.variant === "celery") rules += " pg151";
+	else if (props.variant === "chartreuse") rules += " pg151";
+	else if (props.variant === "yellow") rules += " pg151";
+	else if (props.variant === "orange") rules += " pg151";
+	else if (props.variant === "notice") rules += " pg151";
+	else rules += " px151";
+	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 += " qc151";
+	rules += " qsd151";
+	rules += " -Qg41Lb-IAxCW0c151";
+	rules += " -Qg41Lb-npkAwdIy151";
+	rules += " MAyFGYc151";
+	rules += " Td151";
+	rules += " Qd151";
+	rules += " -aRvJDd-Tu7Fubd151";
+	if (props.fillStyle === "outline") rules += " _nd151";
+	else rules += " _neYWWze151";
+	rules += " _Ca151";
+	if (props.fillStyle === "outline") if (props.variant === "metric") rules += " g9151";
+	else if (props.variant === "live") rules += " g9151";
+	else if (props.variant === "negative") rules += " g9151";
+	else if (props.variant === "notice") rules += " g9151";
+	else if (props.variant === "positive") rules += " g9151";
+	else if (props.variant === "neutral") rules += " g9151";
+	else if (props.variant === "informative") rules += " g9151";
+	else if (props.variant === "accent") rules += " g9151";
+	else rules += " g9ORGnd151";
+	else if (props.fillStyle === "subtle") {
+		if (props.variant === "silver") rules += " g_f151";
+		else if (props.variant === "cinnamon") rules += " gP151";
+		else if (props.variant === "brown") rules += " gO151";
+		else if (props.variant === "turquoise") rules += " gy151";
+		else if (props.variant === "pink") rules += " gT151";
+		else if (props.variant === "magenta") rules += " gS151";
+		else if (props.variant === "fuchsia") rules += " gR151";
+		else if (props.variant === "purple") rules += " gM151";
+		else if (props.variant === "indigo") rules += " gK151";
+		else if (props.variant === "blue") rules += " gWKeJ0c151";
+		else if (props.variant === "cyan") rules += " gC151";
+		else if (props.variant === "seafoam") rules += " gz151";
+		else if (props.variant === "green") rules += " gzVa7R151";
+		else if (props.variant === "celery") rules += " gv151";
+		else if (props.variant === "chartreuse") rules += " gJ151";
+		else if (props.variant === "yellow") rules += " gW151";
+		else if (props.variant === "orange") rules += " gp3QH4b151";
+		else if (props.variant === "red") rules += " gmgnSBe151";
+		else if (props.variant === "gray") rules += " gAYim6b151";
+		else if (props.variant === "metric") rules += " gJ2lU6d151";
+		else if (props.variant === "live") rules += " glnKfNc151";
+		else if (props.variant === "negative") rules += " gmgnSBe151";
+		else if (props.variant === "notice") rules += " gp3QH4b151";
+		else if (props.variant === "positive") rules += " gzVa7R151";
+		else if (props.variant === "neutral") rules += " gAYim6b151";
+		else if (props.variant === "informative") rules += " gWKeJ0c151";
+		else if (props.variant === "accent") rules += " gWKeJ0c151";
+	} else if (props.fillStyle === "bold") {
+		if (props.variant === "silver") rules += " gm151";
+		else if (props.variant === "cinnamon") rules += " gq151";
+		else if (props.variant === "brown") rules += " gn151";
+		else if (props.variant === "turquoise") rules += " g5151";
+		else if (props.variant === "pink") rules += " gx151";
+		else if (props.variant === "magenta") rules += " gD151";
+		else if (props.variant === "fuchsia") rules += " gr151";
+		else if (props.variant === "purple") rules += " go151";
+		else if (props.variant === "indigo") rules += " gl151";
+		else if (props.variant === "blue") rules += " gGAGle151";
+		else if (props.variant === "cyan") rules += " gk151";
+		else if (props.variant === "seafoam") rules += " g4151";
+		else if (props.variant === "green") rules += " gfkXLC151";
+		else if (props.variant === "celery") rules += " g7151";
+		else if (props.variant === "chartreuse") rules += " gp151";
+		else if (props.variant === "yellow") rules += " gN151";
+		else if (props.variant === "orange") rules += " gYNPFce151";
+		else if (props.variant === "red") rules += " geTwQfb151";
+		else if (props.variant === "gray") rules += " g6m8FEd151";
+		else if (props.variant === "metric") rules += " gmb1iPc151";
+		else if (props.variant === "live") rules += " gQtAfKc151";
+		else if (props.variant === "negative") rules += " geTwQfb151";
+		else if (props.variant === "notice") rules += " gYNPFce151";
+		else if (props.variant === "positive") rules += " gfkXLC151";
+		else if (props.variant === "neutral") rules += " g6m8FEd151";
+		else if (props.variant === "informative") rules += " gGAGle151";
+		else if (props.variant === "accent") rules += " gdeCgNc151";
+	}
+	rules += " _jf151";
+	rules += " _kJ8iPYd151";
+	rules += " hXMFGYc151";
+	rules += " mb151";
+	rules += " lb151";
+	if (props.fillStyle === "outline") if (props.variant === "metric") rules += " imb1iPc151";
+	else if (props.variant === "live") rules += " iQtAfKc151";
+	else if (props.variant === "negative") rules += " ihuKnyb151";
+	else if (props.variant === "notice") rules += " iU7Lghc151";
+	else if (props.variant === "positive") rules += " ibiKgae151";
+	else if (props.variant === "neutral") rules += " ifRJx7b151";
+	else if (props.variant === "informative") rules += " iY8y2k151";
+	else if (props.variant === "accent") rules += " i5dxOg151";
+	else rules += " iA151";
+	else rules += " iA151";
+	if (props.variant === "live") {
+		rules += " _gunTat151";
+		rules += " _gdklsgch3TDrc151";
+	}
+	if (props.variant === "live") rules += " _ed6Yuvc151";
+	if (props.variant === "live") rules += " _hmQ16J151";
+	if (props.variant === "live") rules += " __ea151";
+	rules += " -_8sjo0b-t5ZbAob151";
+	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";
+	rules += " -_k_-_kb151";
+	rules += " -h_-hb151";
+	return rules;
+};
+const textStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " TAzEcG151";
+	rules += " QAzEcG151";
+	rules += " _Jb151";
+	rules += " _Nc151";
+	rules += " Pc151";
+	rules += " _Yb151";
+	if (props.overflowMode === "wrap") rules += " _7b151";
+	else if (props.overflowMode === "truncate") rules += " _7c151";
+	return rules;
+};
+const iconCenterStyles = " _Ja151";
+const iconStyles = " ZuUmpre151 FuUmpre151 I67logd151 _va151";
+function normalizeSize(size) {
+	switch (size) {
+		case "sm": return "S";
+		case "md": return "M";
+		case "lg": return "L";
+		default: return size ?? "S";
+	}
+}
+function normalizeVariant(variant) {
+	switch (variant) {
+		case "primary": return "accent";
+		case "secondary": return "neutral";
+		case "success": return "positive";
+		case "warning": return "notice";
+		case "danger": return "negative";
+		case "info": return "informative";
+		default: return variant ?? "neutral";
+	}
+}
+function isTextOnly(value) {
+	if (typeof value === "string" || typeof value === "number") return true;
+	if (Array.isArray(value)) return value.every((item) => item == null || typeof item === "string" || typeof item === "number" || typeof item === "boolean");
+	return value == null || typeof value === "boolean";
+}
+function Badge(props) {
+	const contextProps = getSlottedContextProps(useContext(BadgeContext), props.slot);
+	const [local, domProps] = splitProps(mergeProps$1(contextProps ?? {}, props), [
+		"children",
+		"count",
+		"size",
+		"variant",
+		"fillStyle",
+		"overflowMode",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"slot",
+		"ref"
+	]);
+	const size = () => normalizeSize(local.size);
+	const variant = () => normalizeVariant(local.variant);
+	const fillStyle = () => local.fillStyle ?? "bold";
+	const overflowMode = () => local.overflowMode ?? "wrap";
+	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	const assignRef = mergeContextRefs(contextProps?.ref, props.ref);
+	function BadgeContent() {
+		const resolvedChildren = children(() => local.count !== void 0 ? local.count : local.children);
+		const content = () => resolvedChildren();
+		return isTextOnly(content()) ? createComponent(Text, { get children() {
+			return content();
+		} }) : content();
+	}
+	return createComponent(TextContext.Provider, {
+		value: { styles: () => textStyles({ overflowMode: overflowMode() }) },
+		get children() {
+			return createComponent(IconContext.Provider, {
+				get value() {
+					return {
+						slot: "icon",
+						render: centerBaseline({
+							slot: "icon",
+							styles: iconCenterStyles
+						}),
+						styles: iconStyles
+					};
+				},
+				get children() {
+					return createComponent(SkeletonWrapper, { get children() {
+						var _el$ = getNextElement(_tmpl$);
+						use((element) => assignRef(element), _el$);
+						spread(_el$, mergeProps(() => filterDOMProps(domProps), {
+							"role": "presentation",
+							get ["class"]() {
+								return [
+									contextProps?.UNSAFE_className,
+									local.UNSAFE_className,
+									local.class,
+									badgeStyles({
+										size: size(),
+										variant: variant(),
+										fillStyle: fillStyle()
+									}, mergedStyles())
+								].filter(Boolean).join(" ");
+							},
+							get style() {
+								return mergedUnsafeStyle();
+							}
+						}), false, true);
+						insert(_el$, createComponent(BadgeContent, {}));
+						runHydrationEvents();
+						return _el$;
+					} });
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { Badge, BadgeContext };
+
+//# sourceMappingURL=index.js.map

package/dist/badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/badge/index.tsx"],"sourcesContent":["import {\n  children as resolveChildren,\n  type JSX,\n  createContext,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { filterDOMProps } from \"@proyecto-viviana/solidaria\";\nimport type { StyleString } from \"../style\";\nimport { fontRelative, lightDark, style } from \"../style\" with { type: \"macro\" };\nimport { keyframes } from \"../style/style-macro\" with { type: \"macro\" };\nimport { centerBaseline } from \"../icon/center-baseline\";\nimport { IconContext } from \"../icon/spectrum-icon\";\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport { control, getAllowedOverrides } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { SkeletonWrapper } from \"../skeleton\";\nimport { Text, TextContext } from \"../text\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport type BadgeSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\nexport type BadgeVariant =\n  | \"accent\"\n  | \"informative\"\n  | \"neutral\"\n  | \"positive\"\n  | \"notice\"\n  | \"negative\"\n  | \"live\"\n  | \"metric\"\n  | \"gray\"\n  | \"red\"\n  | \"orange\"\n  | \"yellow\"\n  | \"chartreuse\"\n  | \"celery\"\n  | \"green\"\n  | \"seafoam\"\n  | \"cyan\"\n  | \"blue\"\n  | \"indigo\"\n  | \"purple\"\n  | \"fuchsia\"\n  | \"magenta\"\n  | \"pink\"\n  | \"turquoise\"\n  | \"brown\"\n  | \"cinnamon\"\n  | \"silver\"\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\nexport type BadgeFillStyle = \"bold\" | \"subtle\" | \"outline\";\nexport type BadgeOverflowMode = \"wrap\" | \"truncate\";\n\ntype S2BadgeSize = \"S\" | \"M\" | \"L\" | \"XL\";\ntype S2BadgeVariant = Exclude<\n  BadgeVariant,\n  \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\" | \"info\"\n>;\n\nexport interface BadgeProps extends Omit<\n  JSX.HTMLAttributes<HTMLSpanElement>,\n  \"class\" | \"style\" | \"children\" | \"ref\" | \"slot\"\n> {\n  /** The content to display in the badge. */\n  children?: JSX.Element;\n  /** Backward-compatible count content. Prefer children for S2 parity. */\n  count?: number;\n  /** The size of the badge. @default 'S' */\n  size?: BadgeSize;\n  /** The variant changes the background color of the badge. @default 'neutral' */\n  variant?: BadgeVariant;\n  /** The fill of the badge. @default 'bold' */\n  fillStyle?: BadgeFillStyle;\n  /** Sets the text behavior for the contents. @default 'wrap' */\n  overflowMode?: BadgeOverflowMode;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString | (() => StyleString | undefined);\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  slot?: string | null;\n  ref?: RefLike<HTMLSpanElement>;\n}\n\nexport const BadgeContext = createContext<SpectrumContextValue<BadgeProps>>(null);\n\n/* The register's LIVE breathing (island glxPulse, glasselated.css:316-323): the\n * whole pill dips to 55% opacity and back over 2s. Slow enough (0.25Hz) to sit\n * far under any flash threshold; still gated on prefers-reduced-motion because\n * it is decoration, not information — the label already says LIVE. The gate is\n * the media query itself, NOT a runtime matchMedia check: Solid hydration\n * trusts the server DOM, so an SSR'd inline `animation` never gets removed\n * when the client's check disagrees — CSS is the only layer where the\n * preference applies identically on both sides. (Not css() either: its class\n * wrapper is lost around a nested @media, leaving a selectorless dead block —\n * hence the style()-native media condition key down in badgeStyles.) */\nconst livePulse = keyframes(`\n  0%, 100% {\n    opacity: 0.55;\n  }\n\n  50% {\n    opacity: 1;\n  }\n`);\n\n/* `live` and `metric` are the two register channels the ramps don't carry\n * (glasselated-ramps.ts covers gray/blue/red/orange/yellow/green): the LIVE\n * pulse is a one-off orange-red (`--accent-live`, its own channel by design)\n * and metric is the sky-blue that replaced the retired violet. Both live in\n * viviana-tokens.css per scheme, so they enter here as arbitrary `[var(--…)]`\n * values — the same pattern the token file's header prescribes — rather than\n * as new build-time ramps nothing else would use. */\nconst badgeStyles = style<{\n  size: S2BadgeSize;\n  variant: S2BadgeVariant;\n  fillStyle: BadgeFillStyle;\n}>(\n  {\n    ...control({ shape: \"default\", wrap: true, icon: true, register: \"badge\", rim: false }),\n    /* The rim belongs to the FILL, not to the 5px shape. control()'s `rim` doc\n     * (s2-internal/style-utils.ts) states the rule for this register: its filled\n     * badges add the rim back, its outline badges do not — so the rule keys on a\n     * fill being present, not on that fill being bold, and `subtle` is rimmed too.\n     *\n     * control() cannot make this call itself: the fill is a Badge prop it never\n     * sees, and it is a build-time helper with no view of the variant axis. Hence\n     * `rim: false` above and the conditional here. Shape mirrors the sibling\n     * `borderColor` conditional a few keys down.\n     *\n     * `outline` goes bare in every variant, including the decorative ones that\n     * still keep a `layer-2` fill below — an inset highlight is the raised-control\n     * affordance, and the outline fill is a fallback container rather than a\n     * deliberate raised surface. */\n    boxShadow: {\n      default: \"edge-glass\",\n      fillStyle: {\n        outline: \"none\",\n      },\n    },\n    justifyContent: \"center\",\n    color: {\n      fillStyle: {\n        bold: {\n          default: \"white\",\n          variant: {\n            notice: \"black\",\n            orange: \"black\",\n            yellow: \"black\",\n            chartreuse: \"black\",\n            celery: \"black\",\n            /* Metric's sky-blue is mid-luminance in light (#1c8fc9) and pale in\n               dark (#5ac2ee); black clears 4.5:1 on both, white on neither — same\n               reasoning that puts notice/orange/yellow in the black-ink family.\n               `live` stays on the white default: the spec's LIVE pill is\n               white-on-#ff6b35 verbatim (TerminalGlassLab.tsx:447-448), the\n               saturated-fill/white-ink relationship being the point. */\n            metric: \"black\",\n          },\n        },\n        /* A subtle badge is the register's tinted-plate chip — same-channel ink\n           on a same-channel wash (the spec's streak chip is amber-600 ink on an\n           amber-100 plate, TerminalGlassLab.tsx:466-467). The ink mirrors the\n           outline map below value-for-value, exactly as outline's ink mirrors\n           its border: one channel, two strengths, nothing can drift. Neutral and\n           the decorative variants keep the plain ink for the same reasons they\n           are absent from the outline map. */\n        subtle: {\n          default: \"gray-1000\",\n          variant: {\n            accent: \"accent-900\",\n            informative: lightDark(\"informative-800\", \"informative-900\"),\n            positive: lightDark(\"positive-800\", \"positive-900\"),\n            notice: lightDark(\"notice-800\", \"notice-900\"),\n            negative: lightDark(\"negative-800\", \"negative-900\"),\n            live: \"[var(--accent-live)]\",\n            metric: \"[var(--status-metric)]\",\n          },\n        },\n        /* An outline badge is a rule plus ink in ONE channel, so the ink mirrors the\n           `borderColor` outline map below value-for-value. No new colour enters the\n           system and the two channels cannot drift apart.\n\n           `neutral` is deliberately NOT mirrored, even though it does have a border\n           entry below (gray-500/gray-600). Those are rule weights, picked to read as\n           a hairline; at badge size they would not carry as text. It keeps the\n           neutral ink. The decorative variants (gray, red, orange, …) have no entry\n           in that map at all — no channel to mirror — so they keep it too. */\n        outline: {\n          default: \"gray-1000\",\n          variant: {\n            accent: \"accent-900\",\n            informative: lightDark(\"informative-800\", \"informative-900\"),\n            positive: lightDark(\"positive-800\", \"positive-900\"),\n            notice: lightDark(\"notice-800\", \"notice-900\"),\n            negative: lightDark(\"negative-800\", \"negative-900\"),\n            live: \"[var(--accent-live)]\",\n            metric: \"[var(--status-metric)]\",\n          },\n        },\n      },\n    },\n    backgroundColor: {\n      fillStyle: {\n        bold: {\n          variant: {\n            accent: \"accent\",\n            informative: \"informative\",\n            neutral: \"neutral-subdued\",\n            positive: \"positive\",\n            notice: \"notice\",\n            negative: \"negative\",\n            live: \"[var(--accent-live)]\",\n            metric: \"[var(--status-metric)]\",\n            gray: \"gray\",\n            red: \"red\",\n            orange: \"orange\",\n            yellow: \"yellow\",\n            chartreuse: \"chartreuse\",\n            celery: \"celery\",\n            green: \"green\",\n            seafoam: \"seafoam\",\n            cyan: \"cyan\",\n            blue: \"blue\",\n            indigo: \"indigo\",\n            purple: \"purple\",\n            fuchsia: \"fuchsia\",\n            magenta: \"magenta\",\n            pink: \"pink\",\n            turquoise: \"turquoise\",\n            brown: \"brown\",\n            cinnamon: \"cinnamon\",\n            silver: \"silver\",\n          },\n        },\n        subtle: {\n          variant: {\n            accent: \"accent-subtle\",\n            informative: \"informative-subtle\",\n            neutral: \"neutral-subtle\",\n            positive: \"positive-subtle\",\n            notice: \"notice-subtle\",\n            negative: \"negative-subtle\",\n            /* No ramp → no *-subtle token; the island's own tinted-plate recipe\n               instead (color-mix over transparent, e.g. glasselated.css:2968). */\n            live: \"[color-mix(in srgb, var(--accent-live) 15%, transparent)]\",\n            metric: \"[color-mix(in srgb, var(--status-metric) 15%, transparent)]\",\n            gray: \"gray-subtle\",\n            red: \"red-subtle\",\n            orange: \"orange-subtle\",\n            yellow: \"yellow-subtle\",\n            chartreuse: \"chartreuse-subtle\",\n            celery: \"celery-subtle\",\n            green: \"green-subtle\",\n            seafoam: \"seafoam-subtle\",\n            cyan: \"cyan-subtle\",\n            blue: \"blue-subtle\",\n            indigo: \"indigo-subtle\",\n            purple: \"purple-subtle\",\n            fuchsia: \"fuchsia-subtle\",\n            magenta: \"magenta-subtle\",\n            pink: \"pink-subtle\",\n            turquoise: \"turquoise-subtle\",\n            brown: \"brown-subtle\",\n            cinnamon: \"cinnamon-subtle\",\n            silver: \"silver-subtle\",\n          },\n        },\n        /* The register's outline badge is a rule plus ink and no fill at all, so\n           `layer-2` was painting a card surface behind something drawn as bare text.\n\n           Withdrawn only for the variants that actually own a border channel — the\n           same six the `borderColor` outline map below covers. Every other variant\n           falls through to `transparent` there, so dropping its fill as well would\n           leave a transparent box inside a transparent border: floating text with no\n           container. Those keep `layer-2` unless and until the outline borderColor\n           map grows entries for them. */\n        outline: {\n          default: \"layer-2\",\n          variant: {\n            accent: \"transparent\",\n            informative: \"transparent\",\n            neutral: \"transparent\",\n            positive: \"transparent\",\n            notice: \"transparent\",\n            negative: \"transparent\",\n            live: \"transparent\",\n            metric: \"transparent\",\n          },\n        },\n      },\n    },\n    borderStyle: \"solid\",\n    borderWidth: 1,\n    borderColor: {\n      default: \"transparent\",\n      fillStyle: {\n        outline: {\n          variant: {\n            accent: \"accent-900\",\n            informative: lightDark(\"informative-800\", \"informative-900\"),\n            neutral: lightDark(\"gray-500\", \"gray-600\"),\n            positive: lightDark(\"positive-800\", \"positive-900\"),\n            notice: lightDark(\"notice-800\", \"notice-900\"),\n            negative: lightDark(\"negative-800\", \"negative-900\"),\n            live: \"[var(--accent-live)]\",\n            metric: \"[var(--status-metric)]\",\n          },\n        },\n      },\n    },\n    animation: {\n      variant: {\n        live: {\n          default: livePulse,\n          \"@media (prefers-reduced-motion: reduce)\": \"none\",\n        },\n      },\n    },\n    animationDuration: {\n      variant: {\n        live: 2000,\n      },\n    },\n    animationTimingFunction: {\n      variant: {\n        live: \"[ease-in-out]\",\n      },\n    },\n    animationIterationCount: {\n      variant: {\n        live: \"infinite\",\n      },\n    },\n    \"--iconPrimary\": {\n      type: \"fill\",\n      value: \"currentColor\",\n    },\n  },\n  getAllowedOverrides(),\n);\n\nconst textStyles = style<{ overflowMode: BadgeOverflowMode }>({\n  paddingY: \"--labelPadding\",\n  order: 1,\n  overflowX: \"hidden\",\n  overflowY: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: {\n    overflowMode: {\n      truncate: \"nowrap\",\n      wrap: \"normal\",\n    },\n  },\n});\n\nconst iconCenterStyles = style({ order: 0 });\nconst iconStyles = style({\n  size: fontRelative(20),\n  marginStart: \"--iconMargin\",\n  flexShrink: 0,\n});\n\nfunction normalizeSize(size: BadgeSize | undefined): S2BadgeSize {\n  switch (size) {\n    case \"sm\":\n      return \"S\";\n    case \"md\":\n      return \"M\";\n    case \"lg\":\n      return \"L\";\n    default:\n      return size ?? \"S\";\n  }\n}\n\nfunction normalizeVariant(variant: BadgeVariant | undefined): S2BadgeVariant {\n  switch (variant) {\n    case \"primary\":\n      return \"accent\";\n    case \"secondary\":\n      return \"neutral\";\n    case \"success\":\n      return \"positive\";\n    case \"warning\":\n      return \"notice\";\n    case \"danger\":\n      return \"negative\";\n    case \"info\":\n      return \"informative\";\n    default:\n      return variant ?? \"neutral\";\n  }\n}\n\nfunction isTextOnly(value: unknown): boolean {\n  if (typeof value === \"string\" || typeof value === \"number\") {\n    return true;\n  }\n\n  if (Array.isArray(value)) {\n    return value.every(\n      (item) =>\n        item == null ||\n        typeof item === \"string\" ||\n        typeof item === \"number\" ||\n        typeof item === \"boolean\",\n    );\n  }\n\n  return value == null || typeof value === \"boolean\";\n}\n\nexport function Badge(props: BadgeProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(BadgeContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props);\n  const [local, domProps] = splitProps(merged, [\n    \"children\",\n    \"count\",\n    \"size\",\n    \"variant\",\n    \"fillStyle\",\n    \"overflowMode\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"slot\",\n    \"ref\",\n  ]);\n  const size = () => normalizeSize(local.size);\n  const variant = () => normalizeVariant(local.variant);\n  const fillStyle = () => local.fillStyle ?? \"bold\";\n  const overflowMode = () => local.overflowMode ?? \"wrap\";\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const assignRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLSpanElement> } | null)?.ref,\n    props.ref,\n  );\n\n  function BadgeContent() {\n    const resolvedChildren = resolveChildren(() =>\n      local.count !== undefined ? local.count : local.children,\n    );\n    const content = () => resolvedChildren();\n    return isTextOnly(content()) ? <Text>{content()}</Text> : content();\n  }\n\n  return (\n    <TextContext.Provider\n      value={{\n        styles: () => textStyles({ overflowMode: overflowMode() }),\n      }}\n    >\n      <IconContext.Provider\n        value={{\n          slot: \"icon\",\n          render: centerBaseline({ slot: \"icon\", styles: iconCenterStyles }),\n          styles: iconStyles,\n        }}\n      >\n        <SkeletonWrapper>\n          <span\n            {...filterDOMProps(domProps)}\n            ref={(element) => assignRef(element)}\n            role=\"presentation\"\n            class={[\n              contextProps?.UNSAFE_className,\n              local.UNSAFE_className,\n              local.class,\n              badgeStyles(\n                {\n                  size: size(),\n                  variant: variant(),\n                  fillStyle: fillStyle(),\n                },\n                mergedStyles(),\n              ),\n            ]\n              .filter(Boolean)\n              .join(\" \")}\n            style={mergedUnsafeStyle()}\n          >\n            <BadgeContent />\n          </span>\n        </SkeletonWrapper>\n      </IconContext.Provider>\n    </TextContext.Provider>\n  );\n}\n"],"mappings":"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"}