@epilot/spark-ui 0.25.1 → 0.26.0

package/dist/components/theme.cjs

@@ -14,6 +14,7 @@ let cn = require("cn");
 /** The epilot brand accent — the scale `spark-default.css` ships statically. */
 const DEFAULT_ACCENT = "#005EB4";
 const ThemeContext = react.createContext({});
+const ThemeOutputContext = react.createContext(null);
 /** Merged theme values from enclosing `<Theme>` providers. */
 function useTheme() {
 	return react.useContext(ThemeContext);
@@ -21,6 +22,7 @@ function useTheme() {
 /** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */
 const Theme = react.forwardRef(function Theme({ accentColor, backgroundColor, neutralColor, radius, scaling, spacing, styleVariant, highContrast, inverted, labelPosition, inputStyle, inputColor, cardVariant, cardColor, appearance, fontHeading, fontBody, render, className, style, children, ...rest }, ref) {
 	const parent = useTheme();
+	const parentOutput = react.useContext(ThemeOutputContext);
 	const value = react.useMemo(() => ({
 		accentColor: accentColor ?? parent.accentColor,
 		backgroundColor: backgroundColor ?? parent.backgroundColor,
@@ -68,6 +70,8 @@ const Theme = react.forwardRef(function Theme({ accentColor, backgroundColor, ne
 	const accent = react.useMemo(() => {
 		const empty = {
 			inlineVars: {},
+			portalVars: {},
+			portalScope: void 0,
 			css: "",
 			scoped: false
 		};
@@ -89,21 +93,44 @@ const Theme = react.forwardRef(function Theme({ accentColor, backgroundColor, ne
 			const build = (appearance) => {
 				const opts = optsFor(appearance);
 				const scale = require_lib_accent_theme.generateAccentScale(hex, appearance, opts);
-				return emit(inverted ? require_lib_accent_theme.invertAccentScale(scale) : scale, opts != null);
-			};
-			if (value.appearance) return {
-				inlineVars: toVars(build(value.appearance)),
-				css: "",
-				scoped: false
+				const rendered = emit(inverted ? require_lib_accent_theme.invertAccentScale(scale) : scale, opts != null);
+				return {
+					rendered,
+					plain: inverted ? emit(scale, opts != null) : rendered
+				};
 			};
+			if (value.appearance) {
+				const { rendered, plain } = build(value.appearance);
+				const inlineVars = toVars(rendered);
+				return {
+					inlineVars,
+					portalVars: inverted ? toVars(plain) : inlineVars,
+					portalScope: void 0,
+					css: "",
+					scoped: false
+				};
+			}
 			const offCanvasNeutrals = backgroundColor ? require_lib_accent_theme.neutralFamilyVars(resolvedNeutralColor ?? "slate") : [];
-			const scaleFor = (appearance) => bgAppearance === appearance ? build(appearance) : [...build(appearance), ...offCanvasNeutrals];
+			const scaleFor = (appearance) => {
+				const { rendered, plain } = build(appearance);
+				const extra = bgAppearance === appearance ? [] : offCanvasNeutrals;
+				return {
+					rendered: [...rendered, ...extra],
+					plain: [...plain, ...extra]
+				};
+			};
 			const light = scaleFor("light");
 			const dark = scaleFor("dark");
-			const sel = `[data-spark-scope="${scopeId}"]`;
+			const rule = (id, lightDecls, darkDecls) => {
+				const sel = `[data-spark-scope~="${id}"]`;
+				return `${sel}{${lightDecls.join("")}}:is(.dark,.dark-theme) ${sel}{${darkDecls.join("")}}`;
+			};
+			const portalScope = inverted ? `${scopeId}p` : scopeId;
 			return {
 				inlineVars: {},
-				css: `${sel}{${light.join("")}}:is(.dark,.dark-theme) ${sel}{${dark.join("")}}`,
+				portalVars: {},
+				portalScope,
+				css: rule(scopeId, light.rendered, dark.rendered) + (inverted ? rule(portalScope, light.plain, dark.plain) : ""),
 				scoped: true
 			};
 		} catch (error) {
@@ -119,41 +146,108 @@ const Theme = react.forwardRef(function Theme({ accentColor, backgroundColor, ne
 		value.appearance,
 		scopeId
 	]);
+	const attrs = react.useMemo(() => ({
+		"data-neutral-color": neutralColorAttr,
+		"data-radius": radius,
+		"data-scaling": scaling,
+		"data-spacing": spacing,
+		"data-style": styleVariant,
+		"data-high-contrast": highContrast ? "" : void 0,
+		"data-label-position": labelPosition,
+		"data-input-style": inputStyle,
+		"data-input-color": inputColor,
+		"data-card-variant": cardVariant,
+		"data-card-color": cardColor === "accent" ? "accent" : void 0
+	}), [
+		neutralColorAttr,
+		radius,
+		scaling,
+		spacing,
+		styleVariant,
+		highContrast,
+		labelPosition,
+		inputStyle,
+		inputColor,
+		cardVariant,
+		cardColor
+	]);
+	const fontVars = react.useMemo(() => ({
+		...fontHeading ? { "--spark-font-heading": fontHeading } : null,
+		...fontBody ? { "--spark-font-body": fontBody } : null
+	}), [fontHeading, fontBody]);
 	const element = (0, _base_ui_react_use_render.useRender)({
 		defaultTagName: "div",
 		render,
 		ref,
 		props: (0, _base_ui_react_merge_props.mergeProps)({
 			className: (0, cn.cn)("spark-theme", appearance, className),
-			"data-neutral-color": neutralColorAttr,
-			"data-radius": radius,
-			"data-scaling": scaling,
-			"data-spacing": spacing,
-			"data-style": styleVariant,
-			"data-high-contrast": highContrast ? "" : void 0,
+			...attrs,
 			"data-inverted": inverted ? "" : void 0,
-			"data-label-position": labelPosition,
-			"data-input-style": inputStyle,
-			"data-input-color": inputColor,
-			"data-card-variant": cardVariant,
-			"data-card-color": cardColor === "accent" ? "accent" : void 0,
 			"data-spark-scope": accent.scoped ? scopeId : void 0,
 			style: {
 				...accent.inlineVars,
 				...backgroundColor ? { backgroundColor: "var(--spark-background)" } : null,
-				...fontHeading ? { "--spark-font-heading": fontHeading } : null,
-				...fontBody ? { "--spark-font-body": fontBody } : null,
+				...fontVars,
 				...style
 			},
 			children
 		}, rest)
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ThemeContext.Provider, {
+	const output = react.useMemo(() => {
+		const own = Object.fromEntries(Object.entries(attrs).filter((entry) => entry[1] !== void 0));
+		const parentScopes = parentOutput?.scopes ?? [];
+		return {
+			attrs: {
+				...parentOutput?.attrs,
+				...own
+			},
+			vars: {
+				...parentOutput?.vars,
+				...accent.portalVars,
+				...fontVars
+			},
+			scopes: accent.portalScope ? [...parentScopes, accent.portalScope] : parentScopes
+		};
+	}, [
+		parentOutput,
+		attrs,
+		accent,
+		fontVars
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
 		value,
-		children: [accent.css ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: accent.css }) : null, element]
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ThemeOutputContext.Provider, {
+			value: output,
+			children: [accent.css ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: accent.css }) : null, element]
+		})
 	});
 });
+/** Re-emits what the enclosing Themes rendered inside a portal, where CSS inheritance from them stops. */
+function PortalTheme({ children }) {
+	const output = react.useContext(ThemeOutputContext);
+	const theme = useTheme();
+	const value = react.useMemo(() => ({
+		...theme,
+		inverted: false
+	}), [theme]);
+	if (!output) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
+		value,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-slot": "portal-theme",
+			className: (0, cn.cn)("spark-theme", theme.appearance),
+			...output.attrs,
+			"data-spark-scope": output.scopes.length ? output.scopes.join(" ") : void 0,
+			style: {
+				display: "contents",
+				...output.vars
+			},
+			children
+		})
+	});
+}
 //#endregion
+exports.PortalTheme = PortalTheme;
 exports.Theme = Theme;
 exports.useTheme = useTheme;
 

package/dist/components/theme.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"theme.cjs","names":["React","resolveAutoNeutral","isSparkNeutralFamily","isParsableColor","getMatchingNeutral","CURATED_ACCENTS","appearanceForBackground","accentSparkVars","neutralSparkVars","generateAccentScale","invertAccentScale","neutralFamilyVars"],"sources":["../../src/components/theme.tsx"],"sourcesContent":["'use client'\n\nimport { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport {\n  CURATED_ACCENTS,\n  accentSparkVars,\n  appearanceForBackground,\n  generateAccentScale,\n  getMatchingNeutral,\n  invertAccentScale,\n  isParsableColor,\n  neutralFamilyVars,\n  neutralSparkVars,\n  resolveAutoNeutral,\n  type Appearance,\n  type SparkAccentScale,\n} from '../lib/accent-theme'\nimport {\n  isSparkNeutralFamily,\n  type SparkCardColor,\n  type SparkCardVariant,\n  type SparkInputColor,\n  type SparkInputStyle,\n  type SparkLabelPosition,\n  type SparkNeutral,\n  type SparkRadius,\n  type SparkScaling,\n  type SparkSpacing,\n  type SparkStyle,\n} from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type {\n  SparkCardColor,\n  SparkCardVariant,\n  SparkInputColor,\n  SparkInputStyle,\n  SparkLabelPosition,\n  SparkNeutral,\n  SparkNeutralFamily,\n  SparkRadius,\n  SparkScaling,\n  SparkSpacing,\n  SparkStyle,\n} from '../lib/theme-types'\n\n/** The epilot brand accent — the scale `spark-default.css` ships statically. */\nconst DEFAULT_ACCENT = '#005EB4'\n\nexport interface ThemeValue {\n  /** Curated accent name or a custom hex. */\n  accentColor?: string\n  /**\n   * Page canvas as a custom hex. Regenerates BOTH the accent and neutral scales against\n   * it (each alpha step is composited against the canvas, so a saturated colour needs\n   * the neutral ramp regenerated too, not just the accent). Unset → the fixed\n   * `#ffffff` / `#000000` default, and neutrals stay on the static Radix families.\n   */\n  backgroundColor?: string\n  /**\n   * A curated family name, an arbitrary color to seed the neutral scale, or `'auto'` to\n   * resolve one — preferring `backgroundColor`'s own hue when it's perceptibly tinted,\n   * else pairing with the accent (Radix's `grayColor=\"auto\"`). A custom seed (from `auto`\n   * or set directly) only regenerates the scale alongside a `backgroundColor`; without\n   * one, `data-neutral-color` falls back to the accent-matched family and that's what\n   * actually paints.\n   */\n  neutralColor?: SparkNeutral\n  radius?: SparkRadius\n  scaling?: SparkScaling\n  spacing?: SparkSpacing\n  styleVariant?: SparkStyle\n  /** Orthogonal to `styleVariant`: shifts any style toward higher-contrast steps. */\n  highContrast?: boolean\n  /**\n   * Orthogonal to `styleVariant`: re-casts the accent scale for use ON its own solid fill,\n   * for controls sitting on a solid accent surface (a `<Card variant=\"solid\" color=\"accent\">`),\n   * where a solid control would otherwise paint the same `--spark-9` as the card and vanish.\n   * Swaps step 9 with its contrast ink, so the fill/ink pair stays WCAG-safe for any accent.\n   */\n  inverted?: boolean\n  labelPosition?: SparkLabelPosition\n  inputStyle?: SparkInputStyle\n  inputColor?: SparkInputColor\n  /** App-level default `<Card>` chrome; a per-card `variant` prop overrides it. */\n  cardVariant?: SparkCardVariant\n  /** App-level default `<Card>` palette; a per-card `color` prop overrides it. */\n  cardColor?: SparkCardColor\n  appearance?: Appearance\n  /** Font stack for `h1`–`h6`. Any valid CSS `font-family` value. */\n  fontHeading?: string\n  /** Font stack for everything else. Any valid CSS `font-family` value. */\n  fontBody?: string\n}\n\nconst ThemeContext = React.createContext<ThemeValue>({})\n\n/** Merged theme values from enclosing `<Theme>` providers. */\nexport function useTheme(): ThemeValue {\n  return React.useContext(ThemeContext)\n}\n\nexport interface ThemeProps\n  extends useRender.ComponentProps<'div'>, ThemeValue {}\n\n/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */\nexport const Theme = React.forwardRef<HTMLDivElement, ThemeProps>(\n  function Theme(\n    {\n      accentColor,\n      backgroundColor,\n      neutralColor,\n      radius,\n      scaling,\n      spacing,\n      styleVariant,\n      highContrast,\n      inverted,\n      labelPosition,\n      inputStyle,\n      inputColor,\n      cardVariant,\n      cardColor,\n      appearance,\n      fontHeading,\n      fontBody,\n      render,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) {\n    const parent = useTheme()\n\n    const value = React.useMemo<ThemeValue>(\n      () => ({\n        accentColor: accentColor ?? parent.accentColor,\n        backgroundColor: backgroundColor ?? parent.backgroundColor,\n        neutralColor: neutralColor ?? parent.neutralColor,\n        radius: radius ?? parent.radius,\n        scaling: scaling ?? parent.scaling,\n        spacing: spacing ?? parent.spacing,\n        styleVariant: styleVariant ?? parent.styleVariant,\n        highContrast: highContrast ?? parent.highContrast,\n        inverted: inverted ?? parent.inverted,\n        labelPosition: labelPosition ?? parent.labelPosition,\n        inputStyle: inputStyle ?? parent.inputStyle,\n        inputColor: inputColor ?? parent.inputColor,\n        cardVariant: cardVariant ?? parent.cardVariant,\n        cardColor: cardColor ?? parent.cardColor,\n        appearance: appearance ?? parent.appearance,\n        fontHeading: fontHeading ?? parent.fontHeading,\n        fontBody: fontBody ?? parent.fontBody,\n      }),\n      [\n        accentColor,\n        backgroundColor,\n        neutralColor,\n        radius,\n        scaling,\n        spacing,\n        styleVariant,\n        highContrast,\n        inverted,\n        labelPosition,\n        inputStyle,\n        inputColor,\n        cardVariant,\n        cardColor,\n        appearance,\n        fontHeading,\n        fontBody,\n        parent,\n      ],\n    )\n\n    // Scope id for the ambient-appearance case (both scales emitted in a <style>).\n    const scopeId = React.useId()\n\n    // 'auto' pairs a neutral with the canvas's own tint when it has one, else the\n    // effective accent (Radix's grayColor=\"auto\") — see resolveAutoNeutral. Reads the\n    // OWN backgroundColor, not the merged value.backgroundColor: optsFor (below) only\n    // ever regenerates against a scope's own canvas too, so preferring an inherited one\n    // here would resolve a seed that then gets silently discarded.\n    const rawNeutralColor =\n      neutralColor === 'auto'\n        ? resolveAutoNeutral(\n            value.accentColor ?? DEFAULT_ACCENT,\n            backgroundColor,\n          )\n        : neutralColor\n\n    // A custom neutral that isn't a recognized family must be a real, parseable color —\n    // reject invalid input here (e.g. a typo'd family name like \"slat\") so it can't throw\n    // deep inside the shared generator, where the catch below would otherwise blame\n    // accentColor/backgroundColor without ever naming neutralColor as the actual cause.\n    const neutralColorIsValid =\n      rawNeutralColor === undefined ||\n      isSparkNeutralFamily(rawNeutralColor) ||\n      isParsableColor(rawNeutralColor)\n    if (!neutralColorIsValid) {\n      console.warn(\n        `[Theme] Ignoring invalid neutralColor \"${rawNeutralColor}\" — falling back to the accent-matched family.`,\n      )\n    }\n    const resolvedNeutralColor = neutralColorIsValid\n      ? rawNeutralColor\n      : getMatchingNeutral(value.accentColor ?? DEFAULT_ACCENT)\n\n    // The DOM attribute stays one of the 6 static families `[data-neutral-color]` has CSS\n    // for — a raw color (from the canvas-tinted auto path, or an arbitrary neutralColor\n    // prop) falls back to its accent-matched family here instead, so the attribute is\n    // always CSS-selectable/debuggable rather than a sentinel nothing matches.\n    // generateAccentScale still gets the real resolvedNeutralColor for generation, below —\n    // this substitution is display-only, and doesn't by itself guarantee the *other*\n    // appearance's neutrals in ambient (no explicit `appearance`) mode: that's a\n    // pre-existing cross-appearance leak in the same family as review-findings.md #5, not\n    // something this attribute fallback fixes or regresses.\n    const neutralColorAttr =\n      resolvedNeutralColor === undefined\n        ? undefined\n        : isSparkNeutralFamily(resolvedNeutralColor)\n          ? resolvedNeutralColor\n          : getMatchingNeutral(value.accentColor ?? DEFAULT_ACCENT)\n\n    const accent = React.useMemo(() => {\n      const empty = {\n        inlineVars: {} as React.CSSProperties,\n        css: '',\n        scoped: false,\n      }\n      // A custom canvas generates even with no accent of its own: the neutral ramp is\n      // composited against it, and --spark-background has to carry it.\n      if (!accentColor && !backgroundColor) return empty\n\n      const toVars = (decls: string[]) =>\n        Object.fromEntries(\n          decls\n            .filter((decl) => decl.includes(':'))\n            .map((decl) => {\n              const i = decl.indexOf(':')\n              return [\n                decl.slice(0, i).trim(),\n                decl\n                  .slice(i + 1)\n                  .replace(/;$/, '')\n                  .trim(),\n              ]\n            }),\n        ) as React.CSSProperties\n\n      try {\n        const source = value.accentColor ?? DEFAULT_ACCENT\n        const hex = CURATED_ACCENTS[source] ?? source\n\n        // A canvas has a polarity, unlike an accent hue: a yellow page is a *light*\n        // page, and reusing it for the dark scale yields light ink on a light canvas\n        // (measured 1.16:1). So the custom canvas applies to the appearance it actually\n        // belongs to, and the other keeps its default. One knob still covers the common\n        // case — a tenant wanting both sets an explicit appearance per scope.\n        const bgAppearance = backgroundColor\n          ? appearanceForBackground(backgroundColor)\n          : undefined\n\n        // Honouring a mismatched canvas would paint light ink on a light page, so it's\n        // dropped — but say so, or the prop looks broken.\n        if (\n          backgroundColor &&\n          value.appearance &&\n          bgAppearance !== value.appearance\n        ) {\n          console.warn(\n            `[Theme] Ignoring backgroundColor \"${backgroundColor}\": it reads as a ${bgAppearance} canvas on an appearance=\"${value.appearance}\" scope. Pass a ${value.appearance} colour, or set it on a scope whose appearance matches.`,\n          )\n        }\n\n        // Default to slate so a regenerated neutral stays in the family the static\n        // `:root` default already points at, rather than the generator's ECP gray seed.\n        const optsFor = (appearance: Appearance) =>\n          backgroundColor && bgAppearance === appearance\n            ? {\n                background: backgroundColor,\n                neutral: resolvedNeutralColor ?? ('slate' as const),\n              }\n            : undefined\n\n        // Neutrals are only worth regenerating against a custom canvas — see\n        // neutralSparkVars. Without one the static Radix families are already correct.\n        const emit = (scale: SparkAccentScale, custom: boolean) =>\n          custom\n            ? [...accentSparkVars(scale), ...neutralSparkVars(scale)]\n            : accentSparkVars(scale)\n\n        const build = (appearance: Appearance) => {\n          const opts = optsFor(appearance)\n          const scale = generateAccentScale(hex, appearance, opts)\n          // `inverted` re-casts the accent for a solid-accent surface; the neutral ramp is\n          // unrelated to that swap, so it passes through untouched.\n          return emit(inverted ? invertAccentScale(scale) : scale, opts != null)\n        }\n\n        // Explicit appearance → single-scale inline vars. Correct for a light\n        // island inside a dark page (which must NOT pick up the dark scale).\n        if (value.appearance) {\n          return {\n            inlineVars: toVars(build(value.appearance)),\n            css: '',\n            scoped: false,\n          }\n        }\n\n        // Ambient appearance → emit BOTH scales in a scoped <style> so the\n        // `.dark` class selects the right one. Without this, a single-appearance\n        // inline scale (default light) breaks components in dark mode.\n        //\n        // Both blocks must declare the SAME tokens. A custom canvas only regenerates\n        // neutrals for its own appearance (see optsFor), and a custom property the other\n        // block leaves undeclared keeps its sibling's value rather than falling back — so\n        // the off-canvas appearance would paint this one's canvas-tinted neutrals, and\n        // being unlayered they'd beat `[data-neutral-color]`'s @layer base mapping too.\n        // Point it at the static family instead: the same seed the canvas side was given,\n        // so the two appearances agree on family and differ only in canvas.\n        const offCanvasNeutrals = backgroundColor\n          ? neutralFamilyVars(resolvedNeutralColor ?? 'slate')\n          : []\n        const scaleFor = (appearance: Appearance) =>\n          bgAppearance === appearance\n            ? build(appearance)\n            : [...build(appearance), ...offCanvasNeutrals]\n        const light = scaleFor('light')\n        const dark = scaleFor('dark')\n        const sel = `[data-spark-scope=\"${scopeId}\"]`\n        const css = `${sel}{${light.join('')}}:is(.dark,.dark-theme) ${sel}{${dark.join('')}}`\n        return { inlineVars: {} as React.CSSProperties, css, scoped: true }\n      } catch (error) {\n        // A bad accentColor/backgroundColor must not throw through render — fall back\n        // to the default theme.\n        console.warn(\n          `[Theme] Ignoring invalid accentColor \"${accentColor}\" / backgroundColor \"${backgroundColor}\".`,\n          error,\n        )\n        return empty\n      }\n    }, [\n      accentColor,\n      backgroundColor,\n      inverted,\n      resolvedNeutralColor,\n      value.accentColor,\n      value.appearance,\n      scopeId,\n    ])\n\n    const element = useRender({\n      defaultTagName: 'div',\n      render,\n      ref,\n      props: mergeProps<'div'>(\n        {\n          className: cn('spark-theme', appearance, className),\n          'data-neutral-color': neutralColorAttr,\n          'data-radius': radius,\n          'data-scaling': scaling,\n          'data-spacing': spacing,\n          'data-style': styleVariant,\n          'data-high-contrast': highContrast ? '' : undefined,\n          'data-inverted': inverted ? '' : undefined,\n          'data-label-position': labelPosition,\n          'data-input-style': inputStyle,\n          'data-input-color': inputColor,\n          'data-card-variant': cardVariant,\n          'data-card-color': cardColor === 'accent' ? 'accent' : undefined,\n          'data-spark-scope': accent.scoped ? scopeId : undefined,\n          style: {\n            ...accent.inlineVars,\n            // Paint the canvas we were handed, else the prop emits a token and visibly\n            // does nothing. Reads the var (not the raw prop) so the scoped <style>'s\n            // per-appearance value still wins under ambient appearance.\n            ...(backgroundColor\n              ? { backgroundColor: 'var(--spark-background)' }\n              : null),\n            ...(fontHeading ? { '--spark-font-heading': fontHeading } : null),\n            ...(fontBody ? { '--spark-font-body': fontBody } : null),\n            ...style,\n          } as React.CSSProperties,\n          children,\n        } as React.ComponentProps<'div'>,\n        rest,\n      ),\n    })\n\n    return (\n      <ThemeContext.Provider value={value}>\n        {accent.css ? <style>{accent.css}</style> : null}\n        {element}\n      </ThemeContext.Provider>\n    )\n  },\n)\n"],"mappings":"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"}
+{"version":3,"file":"theme.cjs","names":["React","resolveAutoNeutral","isSparkNeutralFamily","isParsableColor","getMatchingNeutral","CURATED_ACCENTS","appearanceForBackground","accentSparkVars","neutralSparkVars","generateAccentScale","invertAccentScale","neutralFamilyVars"],"sources":["../../src/components/theme.tsx"],"sourcesContent":["'use client'\n\nimport { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport {\n  CURATED_ACCENTS,\n  accentSparkVars,\n  appearanceForBackground,\n  generateAccentScale,\n  getMatchingNeutral,\n  invertAccentScale,\n  isParsableColor,\n  neutralFamilyVars,\n  neutralSparkVars,\n  resolveAutoNeutral,\n  type Appearance,\n  type SparkAccentScale,\n} from '../lib/accent-theme'\nimport {\n  isSparkNeutralFamily,\n  type SparkCardColor,\n  type SparkCardVariant,\n  type SparkInputColor,\n  type SparkInputStyle,\n  type SparkLabelPosition,\n  type SparkNeutral,\n  type SparkRadius,\n  type SparkScaling,\n  type SparkSpacing,\n  type SparkStyle,\n} from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type {\n  SparkCardColor,\n  SparkCardVariant,\n  SparkInputColor,\n  SparkInputStyle,\n  SparkLabelPosition,\n  SparkNeutral,\n  SparkNeutralFamily,\n  SparkRadius,\n  SparkScaling,\n  SparkSpacing,\n  SparkStyle,\n} from '../lib/theme-types'\n\n/** The epilot brand accent — the scale `spark-default.css` ships statically. */\nconst DEFAULT_ACCENT = '#005EB4'\n\nexport interface ThemeValue {\n  /** Curated accent name or a custom hex. */\n  accentColor?: string\n  /**\n   * Page canvas as a custom hex. Regenerates BOTH the accent and neutral scales against\n   * it (each alpha step is composited against the canvas, so a saturated colour needs\n   * the neutral ramp regenerated too, not just the accent). Unset → the fixed\n   * `#ffffff` / `#000000` default, and neutrals stay on the static Radix families.\n   */\n  backgroundColor?: string\n  /**\n   * A curated family name, an arbitrary color to seed the neutral scale, or `'auto'` to\n   * resolve one — preferring `backgroundColor`'s own hue when it's perceptibly tinted,\n   * else pairing with the accent (Radix's `grayColor=\"auto\"`). A custom seed (from `auto`\n   * or set directly) only regenerates the scale alongside a `backgroundColor`; without\n   * one, `data-neutral-color` falls back to the accent-matched family and that's what\n   * actually paints.\n   */\n  neutralColor?: SparkNeutral\n  radius?: SparkRadius\n  scaling?: SparkScaling\n  spacing?: SparkSpacing\n  styleVariant?: SparkStyle\n  /** Orthogonal to `styleVariant`: shifts any style toward higher-contrast steps. */\n  highContrast?: boolean\n  /**\n   * Orthogonal to `styleVariant`: re-casts the accent scale for use ON its own solid fill,\n   * for controls sitting on a solid accent surface (a `<Card variant=\"solid\" color=\"accent\">`),\n   * where a solid control would otherwise paint the same `--spark-9` as the card and vanish.\n   * Swaps step 9 with its contrast ink, so the fill/ink pair stays WCAG-safe for any accent.\n   */\n  inverted?: boolean\n  labelPosition?: SparkLabelPosition\n  inputStyle?: SparkInputStyle\n  inputColor?: SparkInputColor\n  /** App-level default `<Card>` chrome; a per-card `variant` prop overrides it. */\n  cardVariant?: SparkCardVariant\n  /** App-level default `<Card>` palette; a per-card `color` prop overrides it. */\n  cardColor?: SparkCardColor\n  appearance?: Appearance\n  /** Font stack for `h1`–`h6`. Any valid CSS `font-family` value. */\n  fontHeading?: string\n  /** Font stack for everything else. Any valid CSS `font-family` value. */\n  fontBody?: string\n}\n\nconst ThemeContext = React.createContext<ThemeValue>({})\n\n/** What a Theme actually wrote to the DOM, merged over its ancestors (nearest wins). */\ninterface ThemeOutput {\n  attrs: Record<string, string>\n  vars: Record<string, string>\n  scopes: string[]\n}\n\nconst ThemeOutputContext = React.createContext<ThemeOutput | null>(null)\n\n/** Merged theme values from enclosing `<Theme>` providers. */\nexport function useTheme(): ThemeValue {\n  return React.useContext(ThemeContext)\n}\n\nexport interface ThemeProps\n  extends useRender.ComponentProps<'div'>, ThemeValue {}\n\n/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */\nexport const Theme = React.forwardRef<HTMLDivElement, ThemeProps>(\n  function Theme(\n    {\n      accentColor,\n      backgroundColor,\n      neutralColor,\n      radius,\n      scaling,\n      spacing,\n      styleVariant,\n      highContrast,\n      inverted,\n      labelPosition,\n      inputStyle,\n      inputColor,\n      cardVariant,\n      cardColor,\n      appearance,\n      fontHeading,\n      fontBody,\n      render,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) {\n    const parent = useTheme()\n    const parentOutput = React.useContext(ThemeOutputContext)\n\n    const value = React.useMemo<ThemeValue>(\n      () => ({\n        accentColor: accentColor ?? parent.accentColor,\n        backgroundColor: backgroundColor ?? parent.backgroundColor,\n        neutralColor: neutralColor ?? parent.neutralColor,\n        radius: radius ?? parent.radius,\n        scaling: scaling ?? parent.scaling,\n        spacing: spacing ?? parent.spacing,\n        styleVariant: styleVariant ?? parent.styleVariant,\n        highContrast: highContrast ?? parent.highContrast,\n        inverted: inverted ?? parent.inverted,\n        labelPosition: labelPosition ?? parent.labelPosition,\n        inputStyle: inputStyle ?? parent.inputStyle,\n        inputColor: inputColor ?? parent.inputColor,\n        cardVariant: cardVariant ?? parent.cardVariant,\n        cardColor: cardColor ?? parent.cardColor,\n        appearance: appearance ?? parent.appearance,\n        fontHeading: fontHeading ?? parent.fontHeading,\n        fontBody: fontBody ?? parent.fontBody,\n      }),\n      [\n        accentColor,\n        backgroundColor,\n        neutralColor,\n        radius,\n        scaling,\n        spacing,\n        styleVariant,\n        highContrast,\n        inverted,\n        labelPosition,\n        inputStyle,\n        inputColor,\n        cardVariant,\n        cardColor,\n        appearance,\n        fontHeading,\n        fontBody,\n        parent,\n      ],\n    )\n\n    // Scope id for the ambient-appearance case (both scales emitted in a <style>).\n    const scopeId = React.useId()\n\n    // 'auto' pairs a neutral with the canvas's own tint when it has one, else the\n    // effective accent (Radix's grayColor=\"auto\") — see resolveAutoNeutral. Reads the\n    // OWN backgroundColor, not the merged value.backgroundColor: optsFor (below) only\n    // ever regenerates against a scope's own canvas too, so preferring an inherited one\n    // here would resolve a seed that then gets silently discarded.\n    const rawNeutralColor =\n      neutralColor === 'auto'\n        ? resolveAutoNeutral(\n            value.accentColor ?? DEFAULT_ACCENT,\n            backgroundColor,\n          )\n        : neutralColor\n\n    // A custom neutral that isn't a recognized family must be a real, parseable color —\n    // reject invalid input here (e.g. a typo'd family name like \"slat\") so it can't throw\n    // deep inside the shared generator, where the catch below would otherwise blame\n    // accentColor/backgroundColor without ever naming neutralColor as the actual cause.\n    const neutralColorIsValid =\n      rawNeutralColor === undefined ||\n      isSparkNeutralFamily(rawNeutralColor) ||\n      isParsableColor(rawNeutralColor)\n    if (!neutralColorIsValid) {\n      console.warn(\n        `[Theme] Ignoring invalid neutralColor \"${rawNeutralColor}\" — falling back to the accent-matched family.`,\n      )\n    }\n    const resolvedNeutralColor = neutralColorIsValid\n      ? rawNeutralColor\n      : getMatchingNeutral(value.accentColor ?? DEFAULT_ACCENT)\n\n    // The DOM attribute stays one of the 6 static families `[data-neutral-color]` has CSS\n    // for — a raw color (from the canvas-tinted auto path, or an arbitrary neutralColor\n    // prop) falls back to its accent-matched family here instead, so the attribute is\n    // always CSS-selectable/debuggable rather than a sentinel nothing matches.\n    // generateAccentScale still gets the real resolvedNeutralColor for generation, below —\n    // this substitution is display-only, and doesn't by itself guarantee the *other*\n    // appearance's neutrals in ambient (no explicit `appearance`) mode: that's a\n    // pre-existing cross-appearance leak in the same family as review-findings.md #5, not\n    // something this attribute fallback fixes or regresses.\n    const neutralColorAttr =\n      resolvedNeutralColor === undefined\n        ? undefined\n        : isSparkNeutralFamily(resolvedNeutralColor)\n          ? resolvedNeutralColor\n          : getMatchingNeutral(value.accentColor ?? DEFAULT_ACCENT)\n\n    const accent = React.useMemo(() => {\n      const empty = {\n        inlineVars: {} as React.CSSProperties,\n        portalVars: {} as React.CSSProperties,\n        portalScope: undefined as string | undefined,\n        css: '',\n        scoped: false,\n      }\n      // A custom canvas generates even with no accent of its own: the neutral ramp is\n      // composited against it, and --spark-background has to carry it.\n      if (!accentColor && !backgroundColor) return empty\n\n      const toVars = (decls: string[]) =>\n        Object.fromEntries(\n          decls\n            .filter((decl) => decl.includes(':'))\n            .map((decl) => {\n              const i = decl.indexOf(':')\n              return [\n                decl.slice(0, i).trim(),\n                decl\n                  .slice(i + 1)\n                  .replace(/;$/, '')\n                  .trim(),\n              ]\n            }),\n        ) as React.CSSProperties\n\n      try {\n        const source = value.accentColor ?? DEFAULT_ACCENT\n        const hex = CURATED_ACCENTS[source] ?? source\n\n        // A canvas has a polarity, unlike an accent hue: a yellow page is a *light*\n        // page, and reusing it for the dark scale yields light ink on a light canvas\n        // (measured 1.16:1). So the custom canvas applies to the appearance it actually\n        // belongs to, and the other keeps its default. One knob still covers the common\n        // case — a tenant wanting both sets an explicit appearance per scope.\n        const bgAppearance = backgroundColor\n          ? appearanceForBackground(backgroundColor)\n          : undefined\n\n        // Honouring a mismatched canvas would paint light ink on a light page, so it's\n        // dropped — but say so, or the prop looks broken.\n        if (\n          backgroundColor &&\n          value.appearance &&\n          bgAppearance !== value.appearance\n        ) {\n          console.warn(\n            `[Theme] Ignoring backgroundColor \"${backgroundColor}\": it reads as a ${bgAppearance} canvas on an appearance=\"${value.appearance}\" scope. Pass a ${value.appearance} colour, or set it on a scope whose appearance matches.`,\n          )\n        }\n\n        // Default to slate so a regenerated neutral stays in the family the static\n        // `:root` default already points at, rather than the generator's ECP gray seed.\n        const optsFor = (appearance: Appearance) =>\n          backgroundColor && bgAppearance === appearance\n            ? {\n                background: backgroundColor,\n                neutral: resolvedNeutralColor ?? ('slate' as const),\n              }\n            : undefined\n\n        // Neutrals are only worth regenerating against a custom canvas — see\n        // neutralSparkVars. Without one the static Radix families are already correct.\n        const emit = (scale: SparkAccentScale, custom: boolean) =>\n          custom\n            ? [...accentSparkVars(scale), ...neutralSparkVars(scale)]\n            : accentSparkVars(scale)\n\n        const build = (appearance: Appearance) => {\n          const opts = optsFor(appearance)\n          const scale = generateAccentScale(hex, appearance, opts)\n          // `inverted` re-casts the accent for a solid-accent surface; the neutral ramp is\n          // unrelated to that swap, so it passes through untouched.\n          const rendered = emit(\n            inverted ? invertAccentScale(scale) : scale,\n            opts != null,\n          )\n          // Popups sit on their own surface, so they get the scale before the inverted re-cast.\n          const plain = inverted ? emit(scale, opts != null) : rendered\n          return { rendered, plain }\n        }\n\n        // Explicit appearance → single-scale inline vars. Correct for a light\n        // island inside a dark page (which must NOT pick up the dark scale).\n        if (value.appearance) {\n          const { rendered, plain } = build(value.appearance)\n          const inlineVars = toVars(rendered)\n          return {\n            inlineVars,\n            portalVars: inverted ? toVars(plain) : inlineVars,\n            portalScope: undefined,\n            css: '',\n            scoped: false,\n          }\n        }\n\n        // Ambient appearance → emit BOTH scales in a scoped <style> so the\n        // `.dark` class selects the right one. Without this, a single-appearance\n        // inline scale (default light) breaks components in dark mode.\n        //\n        // Both blocks must declare the SAME tokens. A custom canvas only regenerates\n        // neutrals for its own appearance (see optsFor), and a custom property the other\n        // block leaves undeclared keeps its sibling's value rather than falling back — so\n        // the off-canvas appearance would paint this one's canvas-tinted neutrals, and\n        // being unlayered they'd beat `[data-neutral-color]`'s @layer base mapping too.\n        // Point it at the static family instead: the same seed the canvas side was given,\n        // so the two appearances agree on family and differ only in canvas.\n        const offCanvasNeutrals = backgroundColor\n          ? neutralFamilyVars(resolvedNeutralColor ?? 'slate')\n          : []\n        const scaleFor = (appearance: Appearance) => {\n          const { rendered, plain } = build(appearance)\n          const extra = bgAppearance === appearance ? [] : offCanvasNeutrals\n          return {\n            rendered: [...rendered, ...extra],\n            plain: [...plain, ...extra],\n          }\n        }\n        const light = scaleFor('light')\n        const dark = scaleFor('dark')\n        const rule = (\n          id: string,\n          lightDecls: string[],\n          darkDecls: string[],\n        ) => {\n          const sel = `[data-spark-scope~=\"${id}\"]`\n          return `${sel}{${lightDecls.join('')}}:is(.dark,.dark-theme) ${sel}{${darkDecls.join('')}}`\n        }\n        const portalScope = inverted ? `${scopeId}p` : scopeId\n        const css =\n          rule(scopeId, light.rendered, dark.rendered) +\n          (inverted ? rule(portalScope, light.plain, dark.plain) : '')\n        return {\n          inlineVars: {} as React.CSSProperties,\n          portalVars: {} as React.CSSProperties,\n          portalScope,\n          css,\n          scoped: true,\n        }\n      } catch (error) {\n        // A bad accentColor/backgroundColor must not throw through render — fall back\n        // to the default theme.\n        console.warn(\n          `[Theme] Ignoring invalid accentColor \"${accentColor}\" / backgroundColor \"${backgroundColor}\".`,\n          error,\n        )\n        return empty\n      }\n    }, [\n      accentColor,\n      backgroundColor,\n      inverted,\n      resolvedNeutralColor,\n      value.accentColor,\n      value.appearance,\n      scopeId,\n    ])\n\n    const attrs = React.useMemo(\n      () => ({\n        'data-neutral-color': neutralColorAttr,\n        'data-radius': radius,\n        'data-scaling': scaling,\n        'data-spacing': spacing,\n        'data-style': styleVariant,\n        'data-high-contrast': highContrast ? '' : undefined,\n        'data-label-position': labelPosition,\n        'data-input-style': inputStyle,\n        'data-input-color': inputColor,\n        'data-card-variant': cardVariant,\n        'data-card-color': cardColor === 'accent' ? 'accent' : undefined,\n      }),\n      [\n        neutralColorAttr,\n        radius,\n        scaling,\n        spacing,\n        styleVariant,\n        highContrast,\n        labelPosition,\n        inputStyle,\n        inputColor,\n        cardVariant,\n        cardColor,\n      ],\n    )\n    const fontVars = React.useMemo(\n      () => ({\n        ...(fontHeading ? { '--spark-font-heading': fontHeading } : null),\n        ...(fontBody ? { '--spark-font-body': fontBody } : null),\n      }),\n      [fontHeading, fontBody],\n    )\n\n    const element = useRender({\n      defaultTagName: 'div',\n      render,\n      ref,\n      props: mergeProps<'div'>(\n        {\n          className: cn('spark-theme', appearance, className),\n          ...attrs,\n          'data-inverted': inverted ? '' : undefined,\n          'data-spark-scope': accent.scoped ? scopeId : undefined,\n          style: {\n            ...accent.inlineVars,\n            // Paint the canvas we were handed, else the prop emits a token and visibly\n            // does nothing. Reads the var (not the raw prop) so the scoped <style>'s\n            // per-appearance value still wins under ambient appearance.\n            ...(backgroundColor\n              ? { backgroundColor: 'var(--spark-background)' }\n              : null),\n            ...fontVars,\n            ...style,\n          } as React.CSSProperties,\n          children,\n        } as React.ComponentProps<'div'>,\n        rest,\n      ),\n    })\n\n    const output = React.useMemo<ThemeOutput>(() => {\n      // An unset own knob must not blank out the ancestor's value it inherits.\n      const own = Object.fromEntries(\n        Object.entries(attrs).filter(\n          (entry): entry is [string, string] => entry[1] !== undefined,\n        ),\n      )\n      const parentScopes = parentOutput?.scopes ?? []\n      return {\n        attrs: { ...parentOutput?.attrs, ...own },\n        vars: {\n          ...parentOutput?.vars,\n          ...(accent.portalVars as Record<string, string>),\n          ...fontVars,\n        },\n        scopes: accent.portalScope\n          ? [...parentScopes, accent.portalScope]\n          : parentScopes,\n      }\n    }, [parentOutput, attrs, accent, fontVars])\n\n    return (\n      <ThemeContext.Provider value={value}>\n        <ThemeOutputContext.Provider value={output}>\n          {accent.css ? <style>{accent.css}</style> : null}\n          {element}\n        </ThemeOutputContext.Provider>\n      </ThemeContext.Provider>\n    )\n  },\n)\n\n/** Re-emits what the enclosing Themes rendered inside a portal, where CSS inheritance from them stops. */\nexport function PortalTheme({ children }: { children: React.ReactNode }) {\n  const output = React.useContext(ThemeOutputContext)\n  const theme = useTheme()\n  // A popup sits on its own surface, never on the solid accent `inverted` is for.\n  const value = React.useMemo(() => ({ ...theme, inverted: false }), [theme])\n  if (!output) return <>{children}</>\n  return (\n    <ThemeContext.Provider value={value}>\n      <div\n        data-slot=\"portal-theme\"\n        className={cn('spark-theme', theme.appearance)}\n        {...output.attrs}\n        data-spark-scope={\n          output.scopes.length ? output.scopes.join(' ') : undefined\n        }\n        style={{ display: 'contents', ...output.vars }}\n      >\n        {children}\n      </div>\n    </ThemeContext.Provider>\n  )\n}\n"],"mappings":"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"}

package/dist/components/theme.d.cts

@@ -56,6 +56,12 @@ declare function useTheme(): ThemeValue;
 interface ThemeProps extends useRender.ComponentProps<'div'>, ThemeValue {}
 /** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */
 declare const Theme: React$1.ForwardRefExoticComponent<Omit<ThemeProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/** Re-emits what the enclosing Themes rendered inside a portal, where CSS inheritance from them stops. */
+declare function PortalTheme({
+  children
+}: {
+  children: React$1.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { type SparkCardColor, type SparkCardVariant, type SparkInputColor, type SparkInputStyle, type SparkLabelPosition, type SparkNeutral, type SparkNeutralFamily, type SparkRadius, type SparkScaling, type SparkSpacing, type SparkStyle, Theme, ThemeProps, ThemeValue, useTheme };
+export { PortalTheme, type SparkCardColor, type SparkCardVariant, type SparkInputColor, type SparkInputStyle, type SparkLabelPosition, type SparkNeutral, type SparkNeutralFamily, type SparkRadius, type SparkScaling, type SparkSpacing, type SparkStyle, Theme, ThemeProps, ThemeValue, useTheme };
 //# sourceMappingURL=theme.d.cts.map

package/dist/components/theme.d.ts

@@ -56,6 +56,12 @@ declare function useTheme(): ThemeValue;
 interface ThemeProps extends useRender.ComponentProps<'div'>, ThemeValue {}
 /** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */
 declare const Theme: React$1.ForwardRefExoticComponent<Omit<ThemeProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/** Re-emits what the enclosing Themes rendered inside a portal, where CSS inheritance from them stops. */
+declare function PortalTheme({
+  children
+}: {
+  children: React$1.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { type SparkCardColor, type SparkCardVariant, type SparkInputColor, type SparkInputStyle, type SparkLabelPosition, type SparkNeutral, type SparkNeutralFamily, type SparkRadius, type SparkScaling, type SparkSpacing, type SparkStyle, Theme, ThemeProps, ThemeValue, useTheme };
+export { PortalTheme, type SparkCardColor, type SparkCardVariant, type SparkInputColor, type SparkInputStyle, type SparkLabelPosition, type SparkNeutral, type SparkNeutralFamily, type SparkRadius, type SparkScaling, type SparkSpacing, type SparkStyle, Theme, ThemeProps, ThemeValue, useTheme };
 //# sourceMappingURL=theme.d.ts.map

package/dist/components/theme.js

@@ -1,16 +1,17 @@
 "use client";
 "use client";
+import { cn } from "../utils/cn.js";
 import { isSparkNeutralFamily } from "../lib/theme-types.js";
 import { CURATED_ACCENTS, accentSparkVars, appearanceForBackground, generateAccentScale, getMatchingNeutral, invertAccentScale, isParsableColor, neutralFamilyVars, neutralSparkVars, resolveAutoNeutral } from "../lib/accent-theme.js";
-import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/theme.tsx
 /** The epilot brand accent — the scale `spark-default.css` ships statically. */
 const DEFAULT_ACCENT = "#005EB4";
 const ThemeContext = React$1.createContext({});
+const ThemeOutputContext = React$1.createContext(null);
 /** Merged theme values from enclosing `<Theme>` providers. */
 function useTheme() {
 	return React$1.useContext(ThemeContext);
@@ -18,6 +19,7 @@ function useTheme() {
 /** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */
 const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor, neutralColor, radius, scaling, spacing, styleVariant, highContrast, inverted, labelPosition, inputStyle, inputColor, cardVariant, cardColor, appearance, fontHeading, fontBody, render, className, style, children, ...rest }, ref) {
 	const parent = useTheme();
+	const parentOutput = React$1.useContext(ThemeOutputContext);
 	const value = React$1.useMemo(() => ({
 		accentColor: accentColor ?? parent.accentColor,
 		backgroundColor: backgroundColor ?? parent.backgroundColor,
@@ -65,6 +67,8 @@ const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor,
 	const accent = React$1.useMemo(() => {
 		const empty = {
 			inlineVars: {},
+			portalVars: {},
+			portalScope: void 0,
 			css: "",
 			scoped: false
 		};
@@ -86,21 +90,44 @@ const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor,
 			const build = (appearance) => {
 				const opts = optsFor(appearance);
 				const scale = generateAccentScale(hex, appearance, opts);
-				return emit(inverted ? invertAccentScale(scale) : scale, opts != null);
-			};
-			if (value.appearance) return {
-				inlineVars: toVars(build(value.appearance)),
-				css: "",
-				scoped: false
+				const rendered = emit(inverted ? invertAccentScale(scale) : scale, opts != null);
+				return {
+					rendered,
+					plain: inverted ? emit(scale, opts != null) : rendered
+				};
 			};
+			if (value.appearance) {
+				const { rendered, plain } = build(value.appearance);
+				const inlineVars = toVars(rendered);
+				return {
+					inlineVars,
+					portalVars: inverted ? toVars(plain) : inlineVars,
+					portalScope: void 0,
+					css: "",
+					scoped: false
+				};
+			}
 			const offCanvasNeutrals = backgroundColor ? neutralFamilyVars(resolvedNeutralColor ?? "slate") : [];
-			const scaleFor = (appearance) => bgAppearance === appearance ? build(appearance) : [...build(appearance), ...offCanvasNeutrals];
+			const scaleFor = (appearance) => {
+				const { rendered, plain } = build(appearance);
+				const extra = bgAppearance === appearance ? [] : offCanvasNeutrals;
+				return {
+					rendered: [...rendered, ...extra],
+					plain: [...plain, ...extra]
+				};
+			};
 			const light = scaleFor("light");
 			const dark = scaleFor("dark");
-			const sel = `[data-spark-scope="${scopeId}"]`;
+			const rule = (id, lightDecls, darkDecls) => {
+				const sel = `[data-spark-scope~="${id}"]`;
+				return `${sel}{${lightDecls.join("")}}:is(.dark,.dark-theme) ${sel}{${darkDecls.join("")}}`;
+			};
+			const portalScope = inverted ? `${scopeId}p` : scopeId;
 			return {
 				inlineVars: {},
-				css: `${sel}{${light.join("")}}:is(.dark,.dark-theme) ${sel}{${dark.join("")}}`,
+				portalVars: {},
+				portalScope,
+				css: rule(scopeId, light.rendered, dark.rendered) + (inverted ? rule(portalScope, light.plain, dark.plain) : ""),
 				scoped: true
 			};
 		} catch (error) {
@@ -116,41 +143,107 @@ const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor,
 		value.appearance,
 		scopeId
 	]);
+	const attrs = React$1.useMemo(() => ({
+		"data-neutral-color": neutralColorAttr,
+		"data-radius": radius,
+		"data-scaling": scaling,
+		"data-spacing": spacing,
+		"data-style": styleVariant,
+		"data-high-contrast": highContrast ? "" : void 0,
+		"data-label-position": labelPosition,
+		"data-input-style": inputStyle,
+		"data-input-color": inputColor,
+		"data-card-variant": cardVariant,
+		"data-card-color": cardColor === "accent" ? "accent" : void 0
+	}), [
+		neutralColorAttr,
+		radius,
+		scaling,
+		spacing,
+		styleVariant,
+		highContrast,
+		labelPosition,
+		inputStyle,
+		inputColor,
+		cardVariant,
+		cardColor
+	]);
+	const fontVars = React$1.useMemo(() => ({
+		...fontHeading ? { "--spark-font-heading": fontHeading } : null,
+		...fontBody ? { "--spark-font-body": fontBody } : null
+	}), [fontHeading, fontBody]);
 	const element = useRender({
 		defaultTagName: "div",
 		render,
 		ref,
 		props: mergeProps({
 			className: cn("spark-theme", appearance, className),
-			"data-neutral-color": neutralColorAttr,
-			"data-radius": radius,
-			"data-scaling": scaling,
-			"data-spacing": spacing,
-			"data-style": styleVariant,
-			"data-high-contrast": highContrast ? "" : void 0,
+			...attrs,
 			"data-inverted": inverted ? "" : void 0,
-			"data-label-position": labelPosition,
-			"data-input-style": inputStyle,
-			"data-input-color": inputColor,
-			"data-card-variant": cardVariant,
-			"data-card-color": cardColor === "accent" ? "accent" : void 0,
 			"data-spark-scope": accent.scoped ? scopeId : void 0,
 			style: {
 				...accent.inlineVars,
 				...backgroundColor ? { backgroundColor: "var(--spark-background)" } : null,
-				...fontHeading ? { "--spark-font-heading": fontHeading } : null,
-				...fontBody ? { "--spark-font-body": fontBody } : null,
+				...fontVars,
 				...style
 			},
 			children
 		}, rest)
 	});
-	return /* @__PURE__ */ jsxs(ThemeContext.Provider, {
+	const output = React$1.useMemo(() => {
+		const own = Object.fromEntries(Object.entries(attrs).filter((entry) => entry[1] !== void 0));
+		const parentScopes = parentOutput?.scopes ?? [];
+		return {
+			attrs: {
+				...parentOutput?.attrs,
+				...own
+			},
+			vars: {
+				...parentOutput?.vars,
+				...accent.portalVars,
+				...fontVars
+			},
+			scopes: accent.portalScope ? [...parentScopes, accent.portalScope] : parentScopes
+		};
+	}, [
+		parentOutput,
+		attrs,
+		accent,
+		fontVars
+	]);
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
 		value,
-		children: [accent.css ? /* @__PURE__ */ jsx("style", { children: accent.css }) : null, element]
+		children: /* @__PURE__ */ jsxs(ThemeOutputContext.Provider, {
+			value: output,
+			children: [accent.css ? /* @__PURE__ */ jsx("style", { children: accent.css }) : null, element]
+		})
 	});
 });
+/** Re-emits what the enclosing Themes rendered inside a portal, where CSS inheritance from them stops. */
+function PortalTheme({ children }) {
+	const output = React$1.useContext(ThemeOutputContext);
+	const theme = useTheme();
+	const value = React$1.useMemo(() => ({
+		...theme,
+		inverted: false
+	}), [theme]);
+	if (!output) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "portal-theme",
+			className: cn("spark-theme", theme.appearance),
+			...output.attrs,
+			"data-spark-scope": output.scopes.length ? output.scopes.join(" ") : void 0,
+			style: {
+				display: "contents",
+				...output.vars
+			},
+			children
+		})
+	});
+}
 //#endregion
-export { Theme, useTheme };
+export { PortalTheme, Theme, useTheme };
 
 //# sourceMappingURL=theme.js.map