@uni-design-system/uni-core 4.0.0 → 5.0.0

package/dist/esm/index.js

@@ -29,6 +29,11 @@ var collapseFadeOut = {
 };
 //#endregion
 //#region src/concepts/color/color.records.ts
+/**
+* @deprecated HSL saturation ranges are superseded by the perceptual OKLCH
+* chroma model inside `concepts/generation` (see `generateThemes`). Kept for
+* legacy callers of `uniColor`; removal follows the changeset major process.
+*/
 var CategorySaturation = {
 	jewel: {
 		low: 73,
@@ -55,6 +60,10 @@ var CategorySaturation = {
 		high: 0
 	}
 };
+/**
+* @deprecated HSL lightness ranges are superseded by the perceptual OKLCH
+* tone slots inside `concepts/generation` (see `generateThemes`).
+*/
 var CategoryLightness = {
 	jewel: {
 		low: 56,
@@ -130,6 +139,11 @@ var RoleHues = {
 };
 //#endregion
 //#region src/concepts/color/color.utils.ts
+/**
+* @deprecated Randomized generation is superseded by the deterministic OKLCH
+* engine in `concepts/generation` — same input, same theme. Seeded "surprise
+* me" behavior belongs in the consumer (playground), not the engine.
+*/
 var randomRangeValue = ({ low, high }) => {
 	low = Math.ceil(low);
 	high = Math.floor(high);
@@ -144,6 +158,52 @@ var getAnalogousHues = (hue) => [cycle(hue + 30), cycle(hue + 60)];
 var getComplimentaryHue = (hue) => cycle(hue + 180);
 var getTriadicHues = (hue) => [cycle(hue + 120), cycle(hue - 120)];
 var getSplitComplimentaryHues = (hue) => [cycle(hue + 150), cycle(hue - 150)];
+/**
+* Derive the primary/secondary/tertiary hues from a seed hue using the color
+* wheel relationships in {@link ColorScheme}. Pure angle math — works in any
+* hue space (HSL historically, OKLCH in the generation engine).
+*/
+var schemeHues = (hue, scheme) => {
+	switch (scheme) {
+		case "monochromatic": return {
+			primary: hue,
+			secondary: hue,
+			tertiary: hue
+		};
+		case "analogous": {
+			const [a, b] = getAnalogousHues(hue);
+			return {
+				primary: hue,
+				secondary: a,
+				tertiary: b
+			};
+		}
+		case "complimentary": {
+			const [a] = getAnalogousHues(hue);
+			return {
+				primary: hue,
+				secondary: getComplimentaryHue(hue),
+				tertiary: a
+			};
+		}
+		case "splitComplimentary": {
+			const [a, b] = getSplitComplimentaryHues(hue);
+			return {
+				primary: hue,
+				secondary: a,
+				tertiary: b
+			};
+		}
+		case "triadic": {
+			const [a, b] = getTriadicHues(hue);
+			return {
+				primary: hue,
+				secondary: a,
+				tertiary: b
+			};
+		}
+	}
+};
 //#endregion
 //#region src/concepts/color/color.helper.ts
 function HSLAToString({ hue, saturation, lightness, alpha = 1 }) {
@@ -152,6 +212,11 @@ function HSLAToString({ hue, saturation, lightness, alpha = 1 }) {
 function RGBToString({ red, green, blue }) {
 	return `rgb(${red}, ${green}, ${blue})`;
 }
+/**
+* @deprecated Random HSL generation produces non-deterministic, perceptually
+* uneven colors. Use the OKLCH engine (`generateThemes` in
+* `concepts/generation`) or `generatePalette` instead.
+*/
 function uniColor({ role, category, alpha = 1 }) {
 	return HSLAToString({
 		hue: randomRangeValue(RoleHues[role]),
@@ -173,234 +238,530 @@ var RGBToHSL = ({ red, green, blue }) => {
 		lightness: 100 * (2 * l - s) / 2
 	};
 };
-//#endregion
-//#region src/concepts/elevation/zIndex.ts
-var Z_INDEX = {
-	dropdown: 1e3,
-	sticky: 1020,
-	fixed: 1030,
-	backdrop: 1040,
-	dialog: 1050,
-	popover: 1060,
-	tooltip: 1070,
-	overlay: 1080
-};
-//#endregion
-//#region src/concepts/gradient/gradient.helper.ts
-function gradient(config) {
-	return ``;
-}
-//#endregion
-//#region src/concepts/layout/layout.helper.ts
-function getDeviceSize(height, width) {
-	if (!height || !width) return "md";
-	const max = Math.max(height, width);
-	if (max <= 600) return "xs";
-	if (max <= 960) return "sm";
-	if (max <= 1264) return "md";
-	if (max <= 1904) return "lg";
-	return "xl";
-}
-function getDeviceOrientation(height, width) {
-	if (!height || !width) return "landscape";
-	return height > width ? "portrait" : "landscape";
-}
-//#endregion
-//#region src/concepts/shadow/shadow.utils.ts
-var GetBoxShadow = ({ offset, blur, opacity }) => {
-	return `0 ${offset}px ${blur}px rgba(0,0,0,0.${opacity})`;
+var clamp$2 = (value, min, max) => Math.min(max, Math.max(min, value));
+var toHex2 = (value) => clamp$2(Math.round(value), 0, 255).toString(16).padStart(2, "0");
+var rgbToHex = ({ red, green, blue }) => `#${toHex2(red)}${toHex2(green)}${toHex2(blue)}`.toUpperCase();
+var hexToRgb = (hex) => {
+	let h = hex.replace("#", "").trim();
+	if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+	const int = parseInt(h, 16);
+	return {
+		red: int >> 16 & 255,
+		green: int >> 8 & 255,
+		blue: int & 255
+	};
 };
-var GetBoxShadows = ({ umbra, penumbra }) => {
-	return GetBoxShadow(umbra) + ", " + GetBoxShadow(penumbra);
+var HSLToRGB = ({ hue = 0, saturation = 0, lightness = 0 }) => {
+	const s = clamp$2(saturation, 0, 100) / 100;
+	const l = clamp$2(lightness, 0, 100) / 100;
+	const c = (1 - Math.abs(2 * l - 1)) * s;
+	const hp = (hue % 360 + 360) % 360 / 60;
+	const x = c * (1 - Math.abs(hp % 2 - 1));
+	const [r1, g1, b1] = hp < 1 ? [
+		c,
+		x,
+		0
+	] : hp < 2 ? [
+		x,
+		c,
+		0
+	] : hp < 3 ? [
+		0,
+		c,
+		x
+	] : hp < 4 ? [
+		0,
+		x,
+		c
+	] : hp < 5 ? [
+		x,
+		0,
+		c
+	] : [
+		c,
+		0,
+		x
+	];
+	const m = l - c / 2;
+	return {
+		red: (r1 + m) * 255,
+		green: (g1 + m) * 255,
+		blue: (b1 + m) * 255
+	};
 };
-//#endregion
-//#region src/concepts/shadow/shadow.records.ts
-var ShadowMap = {
-	pressed: {
-		umbra: {
-			offset: 1,
-			blur: 2,
-			opacity: 24
-		},
-		penumbra: {
-			offset: 1,
-			blur: 3,
-			opacity: 12
-		}
-	},
-	raised: {
-		umbra: {
-			offset: 3,
-			blur: 6,
-			opacity: 23
-		},
-		penumbra: {
-			offset: 3,
-			blur: 6,
-			opacity: 16
-		}
-	},
-	focussed: {
-		umbra: {
-			offset: 6,
-			blur: 6,
-			opacity: 23
-		},
-		penumbra: {
-			offset: 10,
-			blur: 20,
-			opacity: 19
-		}
-	},
-	navigation: {
-		umbra: {
-			offset: 10,
-			blur: 10,
-			opacity: 22
-		},
-		penumbra: {
-			offset: 14,
-			blur: 28,
-			opacity: 25
-		}
-	},
-	modal: {
-		umbra: {
-			offset: 15,
-			blur: 12,
-			opacity: 22
-		},
-		penumbra: {
-			offset: 19,
-			blur: 38,
-			opacity: 30
-		}
-	}
+/** Build an sRGB hex string straight from HSL channel values. */
+var HSLToHex = (hsl) => rgbToHex(HSLToRGB(hsl));
+var hexToHSL = (hex) => RGBToHSL(hexToRgb(hex));
+/** WCAG relative luminance of an sRGB color (0 = black, 1 = white). */
+var relativeLuminance = ({ red, green, blue }) => {
+	const channel = (value) => {
+		const v = value / 255;
+		return v <= .03928 ? v / 12.92 : Math.pow((v + .055) / 1.055, 2.4);
+	};
+	return .2126 * channel(red) + .7152 * channel(green) + .0722 * channel(blue);
 };
-var ShadowCssMap = {
-	pressed: GetBoxShadows(ShadowMap["pressed"]),
-	raised: GetBoxShadows(ShadowMap["raised"]),
-	focussed: GetBoxShadows(ShadowMap["focussed"]),
-	navigation: GetBoxShadows(ShadowMap["navigation"]),
-	modal: GetBoxShadows(ShadowMap["modal"])
+/** WCAG contrast ratio between two colors (1:1 – 21:1). Accepts RGB or hex. */
+var contrastRatio = (a, b) => {
+	const la = relativeLuminance(typeof a === "string" ? hexToRgb(a) : a);
+	const lb = relativeLuminance(typeof b === "string" ? hexToRgb(b) : b);
+	const [hi, lo] = la > lb ? [la, lb] : [lb, la];
+	return (hi + .05) / (lo + .05);
 };
 //#endregion
-//#region src/concepts/style/inputs.constants.ts
-var removeInputPlatformStyling = {
-	appearance: "none",
-	background: "none",
-	border: "none",
-	outline: "none",
-	boxShadow: "none",
-	padding: 0,
-	width: "100%"
+//#region src/concepts/generation/oklch.helper.ts
+var clamp$1 = (value, min, max) => Math.min(max, Math.max(min, value));
+var srgbToLinear = (channel) => channel <= .04045 ? channel / 12.92 : Math.pow((channel + .055) / 1.055, 2.4);
+var linearToSrgb = (channel) => channel <= .0031308 ? 12.92 * channel : 1.055 * Math.pow(channel, 1 / 2.4) - .055;
+var linearRgbToOklab = ({ r, g, b }) => {
+	const l = Math.cbrt(.4122214708 * r + .5363325363 * g + .0514459929 * b);
+	const m = Math.cbrt(.2119034982 * r + .6806995451 * g + .1073969566 * b);
+	const s = Math.cbrt(.0883024619 * r + .2817188376 * g + .6299787005 * b);
+	return {
+		l: .2104542553 * l + .793617785 * m - .0040720468 * s,
+		a: 1.9779984951 * l - 2.428592205 * m + .4505937099 * s,
+		b: .0259040371 * l + .7827717662 * m - .808675766 * s
+	};
 };
-//#endregion
-//#region src/concepts/theme/palettes/theme.palette.ts
-var genericLightTheme = {
-	primary: "#0066B2",
-	secondary: "#008528",
-	tertiary: "#D97706",
-	quaternary: "#52525B",
-	warn: "#DC2626",
-	success: "#008528",
-	light: "#F4F4F5",
-	onLight: "#18181B",
-	onLightVariant: "rgba(24, 24, 27, 0.6)",
-	dark: "#18181B",
-	onDark: "rgba(255, 255, 255, 0.85)",
-	background: "#FFFFFF",
-	disabled: "rgba(24, 24, 27, 0.08)",
-	onDisabled: "rgba(24, 24, 27, 0.4)"
+var oklabToLinearRgb = (l, a, b) => {
+	const l_ = Math.pow(l + .3963377774 * a + .2158037573 * b, 3);
+	const m_ = Math.pow(l - .1055613458 * a - .0638541728 * b, 3);
+	const s_ = Math.pow(l - .0894841775 * a - 1.291485548 * b, 3);
+	return {
+		r: 4.0767416621 * l_ - 3.3077115913 * m_ + .2309699292 * s_,
+		g: -1.2684380046 * l_ + 2.6097574011 * m_ - .3413193965 * s_,
+		b: -.0041960863 * l_ - .7034186147 * m_ + 1.707614701 * s_
+	};
 };
-//#endregion
-//#region src/concepts/typography/typography.records.ts
-var FontWeightMap = {
-	thin: 100,
-	"extra-light": 200,
-	light: 200,
-	normal: 400,
-	medium: 500,
-	"semi-bold": 600,
-	bold: 700,
-	"extra-bold": 800,
-	black: 900,
-	"extra-black": 950
+var oklchToLinearRgb = ({ l, c, h }) => {
+	const rad = h * Math.PI / 180;
+	return oklabToLinearRgb(l, c * Math.cos(rad), c * Math.sin(rad));
+};
+var GAMUT_EPSILON = 1e-4;
+var inSrgbGamut = ({ r, g, b }) => r >= -GAMUT_EPSILON && r <= 1 + GAMUT_EPSILON && g >= -GAMUT_EPSILON && g <= 1 + GAMUT_EPSILON && b >= -GAMUT_EPSILON && b <= 1 + GAMUT_EPSILON;
+/** Parse a hex color (`#RGB` or `#RRGGBB`) into OKLCH. */
+var hexToOklch = (hex) => {
+	const { red, green, blue } = hexToRgb(hex);
+	const { l, a, b } = linearRgbToOklab({
+		r: srgbToLinear(red / 255),
+		g: srgbToLinear(green / 255),
+		b: srgbToLinear(blue / 255)
+	});
+	const c = Math.hypot(a, b);
+	const h = c < 1e-6 ? 0 : Math.atan2(b, a) * 180 / Math.PI;
+	return {
+		l,
+		c,
+		h: h < 0 ? h + 360 : h
+	};
 };
-//#endregion
-//#region src/concepts/typography/typeface.helpers.ts
-var px = (value) => `${value}px`;
 /**
-* Converts a TextStyle (numeric, design-token oriented) into a
-* TypeFaceDefinition (CSS-ready) so a theme's `typefaces` map can be
-* derived from its `typography` block instead of being duplicated.
+* Render OKLCH as an sRGB hex string. Out-of-gamut colors are mapped back
+* into sRGB by reducing chroma only — lightness and hue are preserved, so
+* vivid seeds desaturate gracefully instead of shifting hue or clipping.
 */
-var toTypeface = (style) => ({
-	fontFamily: style.fontFamily,
-	fontSize: px(style.fontSize),
-	lineHeight: px(style.lineHeight),
-	...style.letterSpacing !== void 0 && { letterSpacing: px(style.letterSpacing) },
-	...style.textTransform === "uppercase" && { textTransform: "uppercase" },
-	...style.fontWeight !== void 0 && { fontWeight: style.fontWeight },
-	...style.fontStyle && { fontStyle: style.fontStyle }
+var oklchToHex = (color) => {
+	const target = {
+		l: clamp$1(color.l, 0, 1),
+		c: Math.max(color.c, 0),
+		h: color.h
+	};
+	let rgb = oklchToLinearRgb(target);
+	if (!inSrgbGamut(rgb)) {
+		let low = 0;
+		let high = target.c;
+		for (let i = 0; i < 24; i++) {
+			const mid = (low + high) / 2;
+			if (inSrgbGamut(oklchToLinearRgb({
+				...target,
+				c: mid
+			}))) low = mid;
+			else high = mid;
+		}
+		rgb = oklchToLinearRgb({
+			...target,
+			c: low
+		});
+	}
+	return rgbToHex(toSrgb255(rgb));
+};
+var toSrgb255 = ({ r, g, b }) => ({
+	red: 255 * linearToSrgb(clamp$1(r, 0, 1)),
+	green: 255 * linearToSrgb(clamp$1(g, 0, 1)),
+	blue: 255 * linearToSrgb(clamp$1(b, 0, 1))
 });
-var toTypefaces = (typography) => Object.fromEntries(Object.entries(typography).map(([role, style]) => [role, toTypeface(style)]));
 //#endregion
-//#region src/concepts/theme/themes/base.theme.ts
-var BaseButton = {
-	borderRadius: 100,
-	color: "primary-container",
-	contentColor: "on-primary-container",
-	verticalPadding: {
-		xxs: 2,
-		xs: 5,
-		sm: 8,
-		md: 12,
-		lg: 16,
-		xl: 20,
-		xxl: 24
-	},
-	horizontalPadding: {
-		xxs: 4,
-		xs: 8,
-		sm: 12,
-		md: 18,
-		lg: 24,
-		xl: 30,
-		xxl: 36
-	}
+//#region src/concepts/generation/palette.factory.ts
+var toneMap = (dark) => dark ? {
+	accent: .78,
+	container: .42,
+	roleSurface: .26,
+	background: .18,
+	surface: .21,
+	surfaceVariant: .32,
+	outline: .66,
+	onSurface: .93,
+	mutedText: .76,
+	inverse: .93,
+	onInverse: .25,
+	onDeep: .2,
+	onLight: .985,
+	grey: .72,
+	disabledContainer: .3
+} : {
+	accent: .55,
+	container: .9,
+	roleSurface: .97,
+	background: .995,
+	surface: .985,
+	surfaceVariant: .94,
+	outline: .6,
+	onSurface: .25,
+	mutedText: .48,
+	inverse: .3,
+	onInverse: .97,
+	onDeep: .24,
+	onLight: .985,
+	grey: .5,
+	disabledContainer: .96
+};
+var CategoryChroma = {
+	jewel: .17,
+	pastel: .055,
+	earth: .08,
+	neutral: .03,
+	florescent: .26,
+	shades: 0
 };
-var BaseContainer = {
-	color: "primary-container",
-	contentColor: "on-primary-container",
-	borderRadii: {
-		xxs: 4,
-		xs: 8,
-		sm: 12,
-		md: 16,
-		lg: 20,
-		xl: 24,
-		xxl: 28
+/** Dark-mode accents cap chroma so they don't vibrate on dark surfaces. */
+var DARK_ACCENT_CHROMA_CAP = .16;
+var SemanticColors = {
+	error: {
+		hue: 27,
+		chroma: .2
 	},
-	horizontalPadding: {
-		xxs: 6,
-		xs: 12,
-		sm: 18,
-		md: 24,
-		lg: 30,
-		xl: 36,
-		xxl: 42
+	warn: {
+		hue: 55,
+		chroma: .18
 	},
-	contentSpacing: {
-		xxs: 4,
-		xs: 8,
-		sm: 12,
-		md: 16,
-		lg: 20,
-		xl: 24,
-		xxl: 28
+	success: {
+		hue: 152,
+		chroma: .16
 	}
 };
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+/**
+* Generate a complete {@link Colors} token set in OKLCH. Same contract as
+* `generatePalette` (which delegates here), plus soft brand targets and a
+* contrast-check sink for {@link ContrastReport} consumers.
+*/
+var generateColors = (config) => {
+	const { seed, scheme, category, mode = "light", accentSaturationFloor = 18, brand = {}, targets = {}, checks } = config;
+	const dark = mode === "dark";
+	const t = toneMap(dark);
+	const anchor = hexToOklch(brand.primary ?? targets.primary ?? seed);
+	const hues = schemeHues(anchor.h, scheme);
+	const chromaFloor = accentSaturationFloor / 100 * .28;
+	let accentC = Math.max(CategoryChroma[category], chromaFloor);
+	if (dark) accentC = Math.min(accentC, DARK_ACCENT_CHROMA_CAP);
+	const containerC = Math.max(CategoryChroma[category] * .45, accentC * .35);
+	const surfaceC = Math.min(CategoryChroma[category], .012);
+	const tone = (hue, c, l) => oklchToHex({
+		l,
+		c,
+		h: hue
+	});
+	/**
+	* The WCAG guard-rail: walk the foreground's OKLCH lightness away from the
+	* background until the pair meets `target` (≤ 50 steps). Hue is never
+	* touched; chroma only shrinks as a last resort when L runs out of room.
+	*/
+	const ensureContrast = (fg, bg, target) => {
+		const out = { ...fg };
+		let hex = oklchToHex(out);
+		if (contrastRatio(hex, bg) >= target) return out;
+		const bgY = relativeLuminance(hexToRgb(bg));
+		const darkCeiling = (bgY + .05) / .05;
+		const lightCeiling = 1.05 / (bgY + .05);
+		let lighten = relativeLuminance(hexToRgb(hex)) >= bgY;
+		if (lighten && lightCeiling < target && darkCeiling >= target) lighten = false;
+		if (!lighten && darkCeiling < target && lightCeiling >= target) lighten = true;
+		const step = lighten ? .015 : -.015;
+		for (let i = 0; i < 50 && contrastRatio(hex, bg) < target; i++) {
+			if (step > 0 && out.l < .995 || step < 0 && out.l > .02) out.l = clamp(out.l + step, 0, 1);
+			else out.c = Math.max(0, out.c - .02);
+			hex = oklchToHex(out);
+		}
+		return out;
+	};
+	/** Guard-railed token: adjust toward `target` contrast, then record the pair. */
+	const contrasted = (fg, bgHex, target) => oklchToHex(ensureContrast(fg, bgHex, target));
+	const record = (foreground, background, foregroundColor, backgroundColor, required) => {
+		if (!checks) return;
+		const ratio = contrastRatio(foregroundColor, backgroundColor);
+		checks.push({
+			mode,
+			foreground,
+			background,
+			foregroundColor,
+			backgroundColor,
+			ratio: Math.round(ratio * 100) / 100,
+			required,
+			pass: ratio >= required,
+			level: ratio < required ? "fail" : ratio >= 7 ? "AAA" : "AA"
+		});
+	};
+	const background = tone(anchor.h, surfaceC, t.background);
+	const surface = tone(anchor.h, surfaceC, t.surface);
+	const surfaceVariant = tone(anchor.h, surfaceC, t.surfaceVariant);
+	const onColor = (hue, bg, c) => {
+		const deep = {
+			l: t.onDeep,
+			c: Math.min(c, .05),
+			h: hue
+		};
+		const light = {
+			l: t.onLight,
+			c: Math.min(c, .02),
+			h: hue
+		};
+		return contrasted(contrastRatio(oklchToHex(deep), bg) >= contrastRatio(oklchToHex(light), bg) ? deep : light, bg, 4.5);
+	};
+	const adaptPinForDark = (hex) => {
+		const pin = hexToOklch(hex);
+		pin.l = Math.max(pin.l, .6);
+		return oklchToHex(ensureContrast(pin, background, 3));
+	};
+	/**
+	* Resolve a role's base color: hard pins are verbatim in light mode and
+	* lightness-lifted in dark; soft targets and generated tones are pulled to
+	* ≥ 4.5:1 as standalone ink on `background` and `surface` (§3.6).
+	*/
+	const baseFor = (name, hue, c) => {
+		const pinned = brand[name];
+		if (pinned) return dark ? adaptPinForDark(pinned) : pinned;
+		const target = targets[name];
+		let base;
+		if (target) {
+			base = hexToOklch(target);
+			if (dark) {
+				base.c = Math.min(base.c, DARK_ACCENT_CHROMA_CAP);
+				base.l = Math.max(base.l, t.accent - .08);
+			}
+		} else base = {
+			l: t.accent,
+			c,
+			h: hue
+		};
+		return oklchToHex(ensureContrast(ensureContrast(base, background, 4.5), surface, 4.5));
+	};
+	const disabled = dark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.12)";
+	const onDisabled = dark ? "rgba(255,255,255,0.38)" : "rgba(0,0,0,0.38)";
+	const role = (name, base, cC = containerC) => {
+		const { h, c } = hexToOklch(base);
+		const container = tone(h, cC, t.container);
+		const roleSurface = tone(h, surfaceC, t.roleSurface);
+		const onBase = onColor(h, base, c);
+		const onContainer = onColor(h, container, c);
+		const onContainerVariant = contrasted({
+			l: t.mutedText,
+			c: Math.min(cC, .06),
+			h
+		}, container, 4.5);
+		const borderHex = oklchToHex(ensureContrast(ensureContrast(hexToOklch(base), container, 3), surface, 3));
+		const onRoleSurface = onColor(h, roleSurface, surfaceC);
+		const onRoleSurfaceVariant = contrasted(hexToOklch(base), roleSurface, 4.5);
+		record(`on-${name}`, name, onBase, base, 4.5);
+		record(`on-${name}-container`, `${name}-container`, onContainer, container, 4.5);
+		record(`on-${name}-container-variant`, `${name}-container`, onContainerVariant, container, 4.5);
+		record(`on-${name}-container-border`, `${name}-container`, borderHex, container, 3);
+		record(`on-${name}-container-border`, "surface", borderHex, surface, 3);
+		record(`on-${name}-surface`, `${name}-surface`, onRoleSurface, roleSurface, 4.5);
+		record(`on-${name}-surface-variant`, `${name}-surface`, onRoleSurfaceVariant, roleSurface, 4.5);
+		record(name, "background", base, background, 4.5);
+		record(name, "surface", base, surface, 4.5);
+		return {
+			[name]: base,
+			[`on-${name}`]: onBase,
+			[`${name}-container`]: container,
+			[`on-${name}-container`]: onContainer,
+			[`on-${name}-container-variant`]: onContainerVariant,
+			[`on-${name}-container-border`]: borderHex,
+			[`${name}-surface`]: roleSurface,
+			[`on-${name}-surface`]: onRoleSurface,
+			[`on-${name}-surface-variant`]: onRoleSurfaceVariant
+		};
+	};
+	const primaryBase = baseFor("primary", hues.primary, accentC);
+	const secondaryBase = baseFor("secondary", hues.secondary, accentC);
+	const tertiaryBase = baseFor("tertiary", hues.tertiary, accentC);
+	const quaternaryGrey = brand.quaternary ? dark ? adaptPinForDark(brand.quaternary) : brand.quaternary : oklchToHex(ensureContrast({
+		l: t.grey,
+		c: surfaceC,
+		h: anchor.h
+	}, surface, 3));
+	const quaternarySurface = tone(anchor.h, surfaceC, t.roleSurface);
+	const onQuaternary = onColor(anchor.h, quaternaryGrey, surfaceC);
+	const onQuaternarySurface = onColor(anchor.h, quaternarySurface, surfaceC);
+	const onQuaternarySurfaceVariant = contrasted(hexToOklch(primaryBase), quaternarySurface, 4.5);
+	const onQuaternaryContainerVariant = contrasted({
+		l: t.mutedText,
+		c: Math.min(containerC, .06),
+		h: anchor.h
+	}, quaternarySurface, 4.5);
+	record("on-quaternary", "quaternary", onQuaternary, quaternaryGrey, 4.5);
+	record("on-quaternary-surface", "quaternary-surface", onQuaternarySurface, quaternarySurface, 4.5);
+	record("on-quaternary-surface-variant", "quaternary-surface", onQuaternarySurfaceVariant, quaternarySurface, 4.5);
+	const semantic = (name) => {
+		const { hue, chroma } = SemanticColors[name];
+		const base = baseFor(name, hue, dark ? Math.min(chroma, DARK_ACCENT_CHROMA_CAP) : chroma);
+		const { h } = hexToOklch(base);
+		const container = tone(h, containerC + .04, t.container);
+		const onBase = onColor(h, base, chroma);
+		const onContainer = onColor(h, container, chroma);
+		record(`on-${name}`, name, onBase, base, 4.5);
+		record(`on-${name}-container`, `${name}-container`, onContainer, container, 4.5);
+		record(name, "background", base, background, 4.5);
+		record(name, "surface", base, surface, 4.5);
+		return {
+			base,
+			container,
+			onBase,
+			onContainer,
+			h
+		};
+	};
+	const error = semantic("error");
+	const warn = semantic("warn");
+	const success = semantic("success");
+	const semanticExtras = (name, s) => {
+		const variant = contrasted({
+			l: t.mutedText,
+			c: .06,
+			h: s.h
+		}, s.container, 4.5);
+		const border = oklchToHex(ensureContrast(ensureContrast(hexToOklch(s.base), s.container, 3), surface, 3));
+		record(`on-${name}-container-variant`, `${name}-container`, variant, s.container, 4.5);
+		record(`on-${name}-container-border`, `${name}-container`, border, s.container, 3);
+		return {
+			variant,
+			border
+		};
+	};
+	const warnExtras = semanticExtras("warn", warn);
+	const successExtras = semanticExtras("success", success);
+	const onBackground = tone(anchor.h, surfaceC, t.onSurface);
+	const onBackgroundVariant = contrasted({
+		l: t.mutedText,
+		c: surfaceC,
+		h: anchor.h
+	}, background, 4.5);
+	const onSurface = tone(anchor.h, surfaceC, t.onSurface);
+	const onSurfaceVariant = contrasted({
+		l: dark ? t.mutedText : t.mutedText - .14,
+		c: surfaceC,
+		h: anchor.h
+	}, surfaceVariant, 4.5);
+	record("on-background", "background", onBackground, background, 4.5);
+	record("on-background-variant", "background", onBackgroundVariant, background, 4.5);
+	record("on-surface", "surface", onSurface, surface, 4.5);
+	record("on-surface-variant", "surface-variant", onSurfaceVariant, surfaceVariant, 4.5);
+	const inverseSurface = tone(anchor.h, surfaceC, t.inverse);
+	const onInverse = tone(anchor.h, surfaceC, t.onInverse);
+	const inversePrimary = contrasted(hexToOklch(primaryBase), inverseSurface, 4.5);
+	record("on-inverse-surface", "inverse-surface", onInverse, inverseSurface, 4.5);
+	record("on-inverse-surface-primary", "inverse-surface", inversePrimary, inverseSurface, 4.5);
+	record("on-inverse-container", "inverse-container", onInverse, inverseSurface, 4.5);
+	const outline = oklchToHex(ensureContrast(ensureContrast({
+		l: t.outline,
+		c: Math.min(surfaceC, .02),
+		h: hues.primary
+	}, surface, 3), background, 3));
+	record("outline", "surface", outline, surface, 3);
+	record("outline", "background", outline, background, 3);
+	return {
+		...role("primary", primaryBase),
+		...role("secondary", secondaryBase),
+		...role("tertiary", tertiaryBase),
+		quaternary: quaternaryGrey,
+		"on-quaternary": onQuaternary,
+		"quaternary-surface": quaternarySurface,
+		"on-quaternary-surface": onQuaternarySurface,
+		"on-quaternary-surface-variant": onQuaternarySurfaceVariant,
+		"on-quaternary-container-variant": onQuaternaryContainerVariant,
+		"on-quaternary-container-border": quaternaryGrey,
+		error: error.base,
+		"on-error": error.onBase,
+		"error-container": error.container,
+		"on-error-container": error.onContainer,
+		warn: warn.base,
+		"on-warn": warn.onBase,
+		"warn-container": warn.container,
+		"on-warn-container": warn.onContainer,
+		"on-warn-container-variant": warnExtras.variant,
+		"on-warn-container-border": warnExtras.border,
+		success: success.base,
+		"on-success": success.onBase,
+		"success-container": success.container,
+		"on-success-container": success.onContainer,
+		"on-success-container-variant": successExtras.variant,
+		"on-success-container-border": successExtras.border,
+		background,
+		"on-background": onBackground,
+		"on-background-variant": onBackgroundVariant,
+		surface,
+		"on-surface": onSurface,
+		"surface-variant": surfaceVariant,
+		"on-surface-variant": onSurfaceVariant,
+		"inverse-surface": inverseSurface,
+		"on-inverse-surface": onInverse,
+		"on-inverse-surface-primary": inversePrimary,
+		"on-inverse-surface-variant": inversePrimary,
+		"inverse-container": inverseSurface,
+		"on-inverse-container": onInverse,
+		outline,
+		shadow: "#000000",
+		scrim: "#000000",
+		"surface-tint": primaryBase,
+		transparent: "rgba(0,0,0,0)",
+		ghost: "rgba(0,0,0,0)",
+		disabled,
+		"on-disabled": onDisabled,
+		"disabled-container": tone(hues.primary, surfaceC, t.disabledContainer),
+		"on-disabled-container": onDisabled,
+		"disabled-surface": disabled,
+		"on-disabled-surface": dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)",
+		"on-disabled-surface-variant": dark ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.4)"
+	};
+};
+//#endregion
+//#region src/concepts/color/color.factory.ts
+/**
+* Generate a complete {@link Colors} token set from a single seed color, a
+* {@link ColorScheme} and a {@link ColorCategory}. Produces a light or dark
+* variant of the same palette; `on-*` colors are driven to WCAG AA contrast
+* so text stays legible for any seed.
+*
+* Delegates to the OKLCH engine in `concepts/generation` — all lightness and
+* chroma math is perceptual, and every derived pair passes through the WCAG
+* guard-rail. Accepts the engine's extended config, so callers may also pass
+* soft `targets` (brand-faithful but guard-railed) and a `checks` sink. Use
+* `generateThemes()` for the light+dark pair plus a {@link ContrastReport}.
+*/
+var generatePalette = (config) => generateColors(config);
+//#endregion
+//#region src/concepts/elevation/zIndex.ts
+var Z_INDEX = {
+	dropdown: 1e3,
+	sticky: 1020,
+	fixed: 1030,
+	backdrop: 1040,
+	dialog: 1050,
+	popover: 1060,
+	tooltip: 1070,
+	overlay: 1080
+};
+//#endregion
+//#region src/concepts/theme/themes/base.theme.ts
 var BaseTypography = {
 	"display-large": {
 		fontFamily: "Red Hat Display",
@@ -532,684 +893,851 @@ var BaseTypography = {
 		fontSize: 14,
 		lineHeight: 22,
 		fontStyle: "italic"
-	}
-};
-var BaseTheme = {
-	id: "BaseTheme",
-	name: "Base Theme",
-	colors: {
-		primary: "#6750A4",
-		"on-primary": "#FFFFFF",
-		"primary-container": "#EADDFF",
-		"on-primary-container": "#21005E",
-		secondary: "#625B71",
-		"on-secondary": "#FFFFFF",
-		"secondary-container": "#E8DEF8",
-		"on-secondary-container": "#1E192B",
-		tertiary: "#7D5260",
-		"on-tertiary": "#FFFFFF",
-		"tertiary-container": "#FFD8E4",
-		"on-tertiary-container": "#370B1E",
-		error: "#B3261E",
-		"on-error": "#FFFFFF",
-		"error-container": "#F9DEDC",
-		"on-error-container": "#370B1E",
-		background: "#FFFBFE",
-		"on-background": "#1C1B1F",
-		surface: "#FFFBFE",
-		"on-surface": "#1C1B1F",
-		"surface-variant": "#E7E0EC",
-		"on-surface-variant": "#49454E",
-		outline: "#79747E",
-		shadow: "#000000",
-		"surface-tint": "#6750A4",
-		"inverse-surface": "#313033",
-		"on-inverse-surface": "#F4EFF4",
-		"on-inverse-surface-primary": "#D0BCFF",
-		scrim: "#000000",
-		transparent: "rgba(0,0,0,0)",
-		ghost: "rgba(0,0,0,0)",
-		quaternary: "#79747E",
-		"on-quaternary": "#FFFFFF",
-		warn: "#B3261E",
-		"on-warn": "#FFFFFF",
-		success: "#2E7D32",
-		"on-success": "#FFFFFF",
-		disabled: "rgba(0,0,0,0.12)",
-		"on-disabled": "rgba(0,0,0,0.38)",
-		"on-primary-container-variant": "rgba(0,0,0,0.4)",
-		"on-primary-container-border": "#6750A4",
-		"on-secondary-container-variant": "rgba(0,0,0,0.4)",
-		"on-secondary-container-border": "#625B71",
-		"on-tertiary-container-variant": "rgba(0,0,0,0.4)",
-		"on-tertiary-container-border": "#7D5260",
-		"warn-container": "#F9DEDC",
-		"on-warn-container": "#8C1D18",
-		"on-warn-container-variant": "rgba(0,0,0,0.4)",
-		"on-warn-container-border": "#8C1D18",
-		"success-container": "#C6F0CD",
-		"on-success-container": "#1E5128",
-		"on-success-container-variant": "rgba(0,0,0,0.4)",
-		"on-success-container-border": "#1E5128",
-		"disabled-container": "#F2F2F2",
-		"on-disabled-container": "rgba(0,0,0,0.38)",
-		"inverse-container": "#313033",
-		"on-inverse-container": "#F4EFF4",
-		"primary-surface": genericLightTheme.background,
-		"on-primary-surface": genericLightTheme.onLight,
-		"on-primary-surface-variant": genericLightTheme.primary,
-		"secondary-surface": "#F3EDF7",
-		"on-secondary-surface": "#1C1B1F",
-		"on-secondary-surface-variant": "#6750A4",
-		"tertiary-surface": "#F2F2F2",
-		"on-tertiary-surface": "#1C1B1F",
-		"on-tertiary-surface-variant": "#6750A4",
-		"quaternary-surface": "#E8DEF8",
-		"on-quaternary-surface": "#1C1B1F",
-		"on-quaternary-surface-variant": "#6750A4",
-		"disabled-surface": "rgba(0,0,0,0.12)",
-		"on-disabled-surface": "rgba(0,0,0,0.5)",
-		"on-disabled-surface-variant": "rgba(0,0,0,0.4)",
-		"on-inverse-surface-variant": "#D0BCFF",
-		"on-background-variant": "#959595"
-	},
-	typography: BaseTypography,
-	borders: {
-		primary: `1px solid ${genericLightTheme.primary}`,
-		secondary: `1px solid ${genericLightTheme.secondary}`,
-		tertiary: `1px solid ${genericLightTheme.tertiary}`,
-		quaternary: `1px solid ${genericLightTheme.quaternary}`,
-		warn: `1px solid ${genericLightTheme.warn}`,
-		success: `1px solid ${genericLightTheme.secondary}`,
-		light: `1px solid ${genericLightTheme.light}`,
-		dark: `1px solid ${genericLightTheme.dark}`,
-		dotted: `1px dotted ${genericLightTheme.dark}`
-	},
-	shadows: {
-		raised: "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px",
-		menu: "rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;",
-		dialog: "rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px",
-		warn: "0 0 5px rgba(255, 0, 0, 0.5), inset 0 0 5px rgba(255, 0, 0, 0.3)"
 	},
-	spacing: {
-		none: "none",
-		xxs: "2px",
-		xs: "4px",
-		sm: "8px",
-		md: "16px",
-		lg: "32px",
-		xl: "64px"
-	},
-	thicknesses: {
-		thin: 1,
-		standard: 2,
-		thick: 4
+	badge: {
+		fontFamily: "Red Hat Display",
+		fontSize: 16,
+		lineHeight: 24
 	},
-	radii: {
-		none: "none",
-		xxs: "4px",
-		xs: "8px",
-		sm: "16px",
-		md: "24px",
-		lg: "32px",
-		max: "999px"
+	tag: {
+		fontFamily: "Red Hat Display",
+		fontSize: 15,
+		lineHeight: 20,
+		fontWeight: 600
 	},
-	buttons: {
-		elevated: {
-			...BaseButton,
-			color: "surface",
-			contentColor: "on-surface",
-			shadowElevation: "raised"
-		},
-		filled: {
-			...BaseButton,
-			color: "primary"
-		},
-		"filled-secondary": {
-			...BaseButton,
-			color: "secondary",
-			contentColor: "on-secondary"
-		},
-		outlined: {
-			...BaseButton,
-			color: "transparent",
-			borderColor: "primary",
-			contentColor: "on-primary",
-			borderWidth: 1
-		},
-		text: {
-			...BaseButton,
-			color: "transparent",
-			contentColor: "on-surface"
-		},
-		icon: {
-			...BaseButton,
-			color: "transparent",
-			contentColor: "on-surface",
-			horizontalPadding: BaseButton.verticalPadding
-		},
-		"floating-action": {
-			...BaseButton,
-			color: "secondary",
-			contentColor: "on-secondary",
-			borderRadii: {
-				xxs: 3,
-				xs: 5,
-				sm: 8,
-				md: 12,
-				lg: 16,
-				xl: 12,
-				xxl: 20
-			},
-			shadowElevation: "navigation",
-			verticalPadding: {
-				xxs: 4,
-				xs: 8,
-				sm: 12,
-				md: 18,
-				lg: 24,
-				xl: 30,
-				xxl: 36
-			},
-			horizontalPadding: {
-				xxs: 4,
-				xs: 8,
-				sm: 12,
-				md: 18,
-				lg: 24,
-				xl: 30,
-				xxl: 36
-			}
+	input: {
+		fontFamily: "Red Hat Display",
+		fontSize: 14,
+		lineHeight: 24
+	}
+};
+var BaseShadows = {
+	raised: "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px",
+	menu: "rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;",
+	dialog: "rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px",
+	warn: "0 0 5px rgba(255, 0, 0, 0.5), inset 0 0 5px rgba(255, 0, 0, 0.3)"
+};
+var BaseSpacing = {
+	none: "none",
+	xxs: "2px",
+	xs: "4px",
+	sm: "8px",
+	md: "16px",
+	lg: "32px",
+	xl: "64px"
+};
+var BaseThicknesses = {
+	thin: 1,
+	standard: 2,
+	thick: 4
+};
+var BaseRadii = {
+	none: "none",
+	xxs: "4px",
+	xs: "8px",
+	sm: "16px",
+	md: "24px",
+	lg: "32px",
+	max: "999px"
+};
+var buildBorders = (c) => ({
+	primary: `1px solid ${c.primary}`,
+	secondary: `1px solid ${c.secondary}`,
+	tertiary: `1px solid ${c.tertiary}`,
+	quaternary: `1px solid ${c.quaternary}`,
+	warn: `1px solid ${c.warn}`,
+	success: `1px solid ${c.success}`,
+	light: `1px solid ${c.outline}`,
+	dark: `1px solid ${c["on-background"]}`,
+	dotted: `1px dotted ${c["on-background"]}`
+});
+var buildComponents = (c) => ({
+	alert: { options: {
+		topPosition: 40,
+		borderRadius: "sm",
+		transitionSpeed: .35,
+		elevation: "md"
+	} },
+	checkbox: { options: { size: 20 } },
+	dialog: { options: {
+		borderRadius: "lg",
+		color: "primary-surface",
+		border: "quaternary",
+		padding: "sm",
+		elevation: "dialog",
+		backdrop: {
+			background: "rgba(255, 255, 255, 0.6)",
+			backdropFilter: "blur(2px)"
 		}
-	},
-	containers: {
-		card: {
-			...BaseContainer,
-			color: "surface",
-			contentColor: "on-surface",
-			shadowMode: "interactive"
+	} },
+	dialogHeader: { options: {
+		borderRadius: "max",
+		color: "primary",
+		height: 48,
+		textRole: "title-large",
+		textAlign: "center",
+		closeButtonIcon: "close",
+		closeButtonSize: "md"
+	} },
+	dropdown: { options: {
+		border: "none",
+		borderRadius: "xxs",
+		color: "primary-surface",
+		shadow: "menu"
+	} },
+	footer: { options: {
+		height: 52,
+		color: "primary",
+		logoHeight: 18.6,
+		logoPadding: "md"
+	} },
+	input: { options: {
+		typeFace: "input",
+		color: "primary-surface",
+		textColor: "on-primary-surface",
+		disabledColor: "disabled-surface",
+		disabledTextColor: "on-disabled-surface",
+		border: "light",
+		borderRadius: "xs",
+		errorShadow: "warn",
+		errorBorder: "warn",
+		height: 32,
+		paddingLeft: "sm",
+		focusOutline: `2px solid ${c.primary}`,
+		focusOutlineOffset: 2
+	} },
+	multiSelectDropdown: { options: {
+		textRole: "input",
+		textColor: "on-primary-surface",
+		dividerBorder: "light",
+		searchInputBorder: "light",
+		searchInputBorderRadius: "xxs",
+		focusOutline: `2px solid ${c.primary}`,
+		focusOutlineOffset: 2
+	} },
+	badge: { options: { borderRadius: "xxs" } },
+	button: {
+		fixed: {
+			position: "relative",
+			overflow: "hidden",
+			outline: "0",
+			border: "0",
+			cursor: "pointer",
+			fontFamily: "Euphemia, sans-serif",
+			transition: "all 0.28s ease"
 		},
-		screen: {
-			...BaseContainer,
-			color: "background",
-			contentColor: "on-background"
+		variants: {
+			ghost: {
+				backgroundColor: "transparent",
+				color: "currentcolor",
+				"&:hover": { backgroundColor: "rgba(0,0,0,0.06)" }
+			},
+			primary: {
+				backgroundColor: c.primary,
+				color: c["on-primary"],
+				border: "0",
+				"&:hover": { filter: "brightness(0.92)" }
+			},
+			secondary: {
+				backgroundColor: "transparent",
+				color: c.secondary,
+				border: `1px solid ${c.secondary}`,
+				"&:hover": {
+					backgroundColor: c.secondary,
+					color: c["on-secondary"]
+				}
+			},
+			tertiary: {
+				backgroundColor: c.tertiary,
+				color: c["on-tertiary"],
+				border: "0",
+				"&:hover": { filter: "brightness(0.92)" }
+			},
+			warn: {
+				backgroundColor: c.warn,
+				color: c["on-warn"],
+				border: "0",
+				"&:hover": { filter: "brightness(0.92)" }
+			},
+			success: {
+				backgroundColor: c.success,
+				color: c["on-success"],
+				border: "0",
+				"&:hover": { filter: "brightness(0.92)" }
+			},
+			disabled: {
+				backgroundColor: `${c.disabled} !important`,
+				color: `${c["on-disabled"]} !important`,
+				border: "0"
+			}
 		},
-		modal: {
-			...BaseContainer,
-			borderRadii: {
-				xxs: 8,
-				xs: 16,
-				sm: 22,
-				md: 28,
-				lg: 32,
-				xl: 38,
-				xxl: 44
+		sizes: {
+			sm: {
+				height: 22,
+				borderRadius: 11,
+				fontSize: 12,
+				padding: "0 12px",
+				fontFamily: "Euphemia Bold, sans-serif",
+				fontWeight: 600
+			},
+			md: {
+				height: 26,
+				borderRadius: 13,
+				fontSize: 16,
+				padding: "0 16px"
+			},
+			lg: {
+				height: 36,
+				borderRadius: 18,
+				fontSize: 18,
+				padding: "0 18px"
 			},
-			color: "surface",
-			contentColor: "on-surface",
-			shadowMode: "static",
-			shadowElevation: "modal",
-			maxWidth: 560
+			xl: {
+				height: 48,
+				borderRadius: 24,
+				fontSize: 24,
+				padding: "0 22px"
+			}
 		}
 	},
-	typefaces: {
-		...toTypefaces(BaseTypography),
-		badge: {
-			fontFamily: "Red Hat Display",
-			fontSize: "16px",
-			lineHeight: "24px"
-		},
-		tag: {
-			fontFamily: "Red Hat Display",
-			fontSize: "15px",
-			lineHeight: "20px",
-			fontWeight: 600
+	iconButton: {
+		variants: {
+			ghost: {
+				backgroundColor: "transparent",
+				color: "currentcolor"
+			},
+			primary: {
+				backgroundColor: c.primary,
+				color: c["on-primary"]
+			},
+			secondary: {
+				backgroundColor: c.secondary,
+				color: c["on-secondary"]
+			},
+			tertiary: {
+				backgroundColor: c.tertiary,
+				color: c["on-tertiary"]
+			},
+			warn: {
+				backgroundColor: c.warn,
+				color: c["on-warn"]
+			},
+			success: {
+				backgroundColor: c.success,
+				color: c["on-success"]
+			},
+			disabled: {
+				backgroundColor: "transparent !important",
+				color: `${c["on-disabled"]} !important`
+			}
 		},
-		input: {
-			fontFamily: "Red Hat Display",
-			fontSize: "14px",
-			lineHeight: "24px"
+		sizes: {
+			sm: {
+				height: 22,
+				minHeight: 22,
+				width: 22,
+				minWidth: 22,
+				fontSize: 18
+			},
+			md: {
+				height: 26,
+				minHeight: 26,
+				width: 26,
+				minWidth: 26,
+				fontSize: 22
+			},
+			lg: {
+				height: 36,
+				minHeight: 36,
+				width: 36,
+				minWidth: 36,
+				fontSize: 30
+			},
+			xl: {
+				height: 40,
+				minHeight: 40,
+				width: 40,
+				minWidth: 40,
+				fontSize: 34
+			}
 		}
 	},
-	icons: {},
-	components: {
-		alert: { options: {
-			topPosition: 40,
-			borderRadius: "sm",
-			transitionSpeed: .35,
-			elevation: "md"
-		} },
-		checkbox: { options: { size: 20 } },
-		dialog: { options: {
-			borderRadius: "lg",
-			color: "primary-surface",
-			border: "quaternary",
-			padding: "sm",
-			elevation: "dialog",
-			backdrop: {
-				background: "rgba(255, 255, 255, 0.6)",
-				backdropFilter: "blur(2px)"
-			}
-		} },
-		dialogHeader: { options: {
-			borderRadius: "max",
-			color: "primary",
-			height: 48,
-			textRole: "title-large",
-			textAlign: "center",
-			closeButtonIcon: "close",
-			closeButtonSize: "md"
-		} },
-		dropdown: { options: {
-			border: "none",
-			borderRadius: "xxs",
-			color: "primary-surface",
-			shadow: "menu"
-		} },
-		footer: { options: {
-			height: 52,
-			color: "primary",
-			logoHeight: 18.6,
-			logoPadding: "md"
-		} },
-		input: { options: {
-			typeFace: "input",
-			color: "primary-surface",
-			textColor: "on-primary-surface",
-			disabledColor: "disabled-surface",
-			disabledTextColor: "on-disabled-surface",
-			border: "light",
-			borderRadius: "xs",
-			errorShadow: "warn",
-			errorBorder: "warn",
-			height: 32,
-			paddingLeft: "sm",
-			focusOutline: `2px solid ${genericLightTheme.primary}`,
-			focusOutlineOffset: 2
-		} },
-		multiSelectDropdown: { options: {
-			textRole: "input",
-			textColor: "on-primary-surface",
-			dividerBorder: "light",
-			searchInputBorder: "light",
-			searchInputBorderRadius: "xxs",
-			focusOutline: `2px solid ${genericLightTheme.primary}`,
-			focusOutlineOffset: 2
-		} },
-		badge: { options: { borderRadius: "xxs" } },
-		button: {
-			fixed: {
-				position: "relative",
-				overflow: "hidden",
-				outline: "0",
-				border: "0",
-				cursor: "pointer",
-				fontFamily: "Euphemia, sans-serif",
-				transition: "all 0.28s ease"
+	progressGauge: {
+		fixed: { textFill: c["on-background"] },
+		variants: {
+			primary: {
+				backgroundColor: "#b3d4ea",
+				color: c.primary
 			},
-			colors: {
-				ghost: {
-					backgroundColor: "transparent",
-					color: "currentcolor"
-				},
-				primary: {
-					backgroundColor: genericLightTheme.primary,
-					color: genericLightTheme.onDark
-				},
-				secondary: {
-					backgroundColor: genericLightTheme.secondary,
-					color: genericLightTheme.onDark
-				},
-				tertiary: {
-					backgroundColor: genericLightTheme.tertiary,
-					color: genericLightTheme.onDark
-				},
-				warn: {
-					backgroundColor: genericLightTheme.warn,
-					color: genericLightTheme.onDark
-				},
-				disabled: {
-					backgroundColor: `${genericLightTheme.disabled} !important`,
-					color: "#fff !important"
-				},
-				success: {
-					backgroundColor: genericLightTheme.success,
-					color: genericLightTheme.onDark
-				}
+			secondary: {
+				backgroundColor: "#b3e7c2",
+				color: c.secondary
 			},
-			sizes: {
-				sm: {
-					height: 22,
-					borderRadius: 11,
-					fontSize: 12,
-					padding: "0 12px",
-					fontFamily: "Euphemia Bold, sans-serif",
-					fontWeight: 600
-				},
-				md: {
-					height: 26,
-					borderRadius: 13,
-					fontSize: 16,
-					padding: "0 16px"
-				},
-				lg: {
-					height: 36,
-					borderRadius: 18,
-					fontSize: 18,
-					padding: "0 18px"
-				},
-				xl: {
-					height: 48,
-					borderRadius: 24,
-					fontSize: 24,
-					padding: "0 22px"
-				}
-			}
-		},
-		iconButton: {
-			colors: {
-				ghost: {
-					backgroundColor: "transparent",
-					color: "currentcolor"
-				},
-				primary: {
-					backgroundColor: genericLightTheme.primary,
-					color: genericLightTheme.onDark
-				},
-				secondary: {
-					backgroundColor: genericLightTheme.secondary,
-					color: genericLightTheme.onDark
-				},
-				tertiary: {
-					backgroundColor: genericLightTheme.tertiary,
-					color: genericLightTheme.onDark
-				},
-				warn: {
-					backgroundColor: genericLightTheme.warn,
-					color: genericLightTheme.onDark
-				},
-				success: {
-					backgroundColor: genericLightTheme.success,
-					color: genericLightTheme.onDark
-				},
-				disabled: {
-					backgroundColor: "transparent !important",
-					color: "rgba(0,0,0,0.25) !important"
-				}
+			tertiary: {
+				backgroundColor: "#ffe2b3",
+				color: c.tertiary
 			},
-			sizes: {
-				sm: {
-					height: 22,
-					minHeight: 22,
-					width: 22,
-					minWidth: 22,
-					fontSize: 18
-				},
-				md: {
-					height: 26,
-					minHeight: 26,
-					width: 26,
-					minWidth: 26,
-					fontSize: 22
-				},
-				lg: {
-					height: 36,
-					minHeight: 36,
-					width: 36,
-					minWidth: 36,
-					fontSize: 30
-				},
-				xl: {
-					height: 40,
-					minHeight: 40,
-					width: 40,
-					minWidth: 40,
-					fontSize: 34
-				}
+			warn: {
+				backgroundColor: "#ffc2b3",
+				color: c.warn
+			},
+			success: {
+				backgroundColor: "#b3e7c2",
+				color: c.success
 			}
 		},
-		progressGauge: {
-			fixed: { textFill: genericLightTheme.onLight },
-			colors: {
-				primary: {
-					backgroundColor: "#b3d4ea",
-					color: genericLightTheme.primary
-				},
-				secondary: {
-					backgroundColor: "#b3e7c2",
-					color: genericLightTheme.secondary
-				},
-				tertiary: {
-					backgroundColor: "#ffe2b3",
-					color: genericLightTheme.tertiary
-				},
-				warn: {
-					backgroundColor: "#ffc2b3",
-					color: genericLightTheme.warn
-				},
-				success: {
-					backgroundColor: "#b3e7c2",
-					color: genericLightTheme.success
-				}
+		sizes: {
+			sm: { height: "54px" },
+			md: { height: "68px" },
+			lg: { height: "82px" },
+			xl: { height: "104px" }
+		}
+	},
+	card: {
+		fixed: {
+			borderStyle: "solid",
+			borderWidth: "1px",
+			borderRadius: "8px",
+			overflow: "hidden"
+		},
+		variants: {
+			primary: {
+				borderColor: c.primary,
+				backgroundColor: c.background
+			},
+			secondary: {
+				borderColor: c.secondary,
+				backgroundColor: c.background
+			},
+			tertiary: {
+				borderColor: c.tertiary,
+				backgroundColor: c.background
 			},
-			sizes: {
-				sm: { height: "54px" },
-				md: { height: "68px" },
-				lg: { height: "82px" },
-				xl: { height: "104px" }
+			warn: {
+				borderColor: c.warn,
+				backgroundColor: c.background
+			},
+			success: {
+				borderColor: c.success,
+				backgroundColor: c.background
 			}
-		},
-		card: {
-			fixed: {
-				borderStyle: "solid",
-				borderWidth: "1px",
-				borderRadius: "8px",
-				overflow: "hidden"
+		}
+	},
+	cardHeader: {
+		fixed: { padding: "12px 24px" },
+		variants: {
+			primary: {
+				backgroundColor: c.primary,
+				color: c["on-primary"]
 			},
-			colors: {
-				primary: {
-					borderColor: genericLightTheme.primary,
-					backgroundColor: genericLightTheme.background
-				},
-				secondary: {
-					borderColor: genericLightTheme.secondary,
-					backgroundColor: genericLightTheme.background
-				},
-				tertiary: {
-					borderColor: genericLightTheme.tertiary,
-					backgroundColor: genericLightTheme.background
-				},
-				warn: {
-					borderColor: genericLightTheme.warn,
-					backgroundColor: genericLightTheme.background
-				},
-				success: {
-					borderColor: genericLightTheme.success,
-					backgroundColor: genericLightTheme.background
-				}
+			secondary: {
+				backgroundColor: c.secondary,
+				color: c["on-secondary"]
+			},
+			tertiary: {
+				backgroundColor: c.tertiary,
+				color: c["on-tertiary"]
+			},
+			warn: {
+				backgroundColor: c.warn,
+				color: c["on-warn"]
+			},
+			success: {
+				backgroundColor: c.success,
+				color: c["on-success"]
 			}
+		}
+	},
+	cardContent: { fixed: { padding: "12px 24px" } },
+	dataSearch: { options: {
+		border: "light",
+		borderRadius: "xs",
+		color: "primary-surface",
+		placeholderColor: "disabled"
+	} },
+	dataTable: { options: {
+		color: "primary-surface",
+		border: "light",
+		borderRadius: "sm",
+		elevation: void 0,
+		headerPadding: "sm",
+		footerPadding: "sm",
+		thTextRole: "headline-small",
+		thColor: "primary-container",
+		thVerticalBorder: "dotted",
+		thHorizontalBorder: "light",
+		thPadding: "sm",
+		tdTextRole: "title-small",
+		tdColor: "primary-surface",
+		tdStickyColor: "primary-container",
+		tdPadding: "sm",
+		tdVerticalBorder: "dotted",
+		tdHorizontalBorder: "light",
+		rowHoverColor: "primary-container",
+		loadingOverlayColor: "scrim",
+		loadingSpinnerColor: "primary",
+		loadingSpinnerSize: 40
+	} },
+	notificationBadge: { options: {
+		borderRadius: "sm",
+		offset: -10
+	} },
+	paginator: { options: {
+		gap: "xs",
+		textRole: "label",
+		inputBorder: "light",
+		inputBorderRadius: "xs",
+		pageBorderRadius: "xs",
+		currentPageBorder: "light",
+		currentPageBorderRadius: "xs"
+	} },
+	snackbar: { options: {
+		bottomPosition: 40,
+		transitionDelay: "0.35s",
+		autoCloseDelay: 35e3
+	} },
+	symbol: { options: {
+		fill: 0,
+		weight: 400,
+		grade: 0,
+		opticalSize: 24
+	} },
+	toggle: { options: { size: 20 } },
+	tooltip: { options: {
+		border: void 0,
+		borderRadius: "xs",
+		shadow: "raised",
+		color: "inverse-surface",
+		typeface: "label"
+	} }
+});
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var deepMerge = (base, override) => {
+	if (!override) return base;
+	const out = { ...base };
+	for (const [key, value] of Object.entries(override)) out[key] = isRecord(value) && isRecord(out[key]) ? deepMerge(out[key], value) : value;
+	return out;
+};
+var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, borders, components }) => ({
+	id,
+	name,
+	colors,
+	typography: BaseTypography,
+	borders: deepMerge(buildBorders(colors), borders),
+	radii,
+	shadows,
+	spacing: BaseSpacing,
+	thicknesses: BaseThicknesses,
+	icons,
+	components: deepMerge(buildComponents(colors), components)
+});
+/**
+* Build a full {@link UniTheme} straight from a {@link PaletteConfig} — the
+* one-call path a theme builder uses to turn a brand color (or a seed +
+* scheme + category) into a complete, ready-to-apply theme.
+*/
+var createThemeFromPalette = (config) => createTheme({
+	id: config.id ?? "CustomTheme",
+	name: config.name ?? "Custom Theme",
+	colors: generatePalette(config),
+	icons: config.icons
+});
+/**
+* Seed for the shipped Light/Dark themes. Swap these three values (or call
+* `generatePalette` with your own) to reskin the entire system — every color
+* token is derived, so there is nothing else to hand-author.
+*/
+var BASE_PALETTE_CONFIG = {
+	seed: "#4F46E5",
+	scheme: "triadic",
+	category: "neutral"
+};
+var lightColors = generatePalette({
+	...BASE_PALETTE_CONFIG,
+	mode: "light"
+});
+var BaseTheme = createTheme({
+	id: "BaseTheme",
+	name: "Base Theme",
+	colors: lightColors
+});
+//#endregion
+//#region src/concepts/generation/theme.generator.ts
+/** Radii presets per shape language (PRD §3.5.A). Same keys as `BaseRadii`. */
+var ShapeRadii = {
+	sharp: {
+		none: "none",
+		xxs: "0px",
+		xs: "0px",
+		sm: "0px",
+		md: "0px",
+		lg: "0px",
+		max: "0px"
+	},
+	modern: {
+		none: "none",
+		xxs: "4px",
+		xs: "8px",
+		sm: "16px",
+		md: "24px",
+		lg: "32px",
+		max: "999px"
+	},
+	playful: {
+		none: "none",
+		xxs: "8px",
+		xs: "16px",
+		sm: "24px",
+		md: "32px",
+		lg: "48px",
+		max: "9999px"
+	}
+};
+/** Shortest angular distance between two hue angles, in degrees (0–180). */
+var hueDistance = (a, b) => {
+	const d = Math.abs(a - b) % 360;
+	return d > 180 ? 360 - d : d;
+};
+/**
+* Classify 2–3 brand hues against {@link ColorScheme} by their angular
+* distances from the primary hue. Heuristic bands, widest match wins.
+*/
+var classifyScheme = (primaryHue, otherHues) => {
+	const distances = otherHues.map((h) => hueDistance(primaryHue, h));
+	if (distances.length === 0) return "analogous";
+	if (distances.every((d) => d < 15)) return "monochromatic";
+	if (distances.every((d) => d <= 65)) return "analogous";
+	if (distances.some((d) => d >= 165)) return "complimentary";
+	if (distances.length > 1 && distances.every((d) => d >= 130)) return "splitComplimentary";
+	return "triadic";
+};
+/**
+* Infer a tonal category from the seed's own chroma, so an unstated "vibe"
+* preserves the brand's character — vivid stays vivid, muted stays muted.
+*/
+var inferCategory = (seedHex) => {
+	const { c } = hexToOklch(seedHex);
+	if (c >= .13) return "jewel";
+	if (c >= .07) return "earth";
+	if (c >= .03) return "pastel";
+	return "neutral";
+};
+/**
+* The theme generation engine (PRD §3.3): brand seed(s) in, complete WCAG-AA
+* light+dark {@link Colors} pair out, with a machine-readable contrast report.
+* Pure and deterministic — identical input yields identical output.
+*/
+var generateThemes = (input) => {
+	const seeds = (Array.isArray(input.seed) ? input.seed : [input.seed]).slice(0, 3);
+	const [primary, secondary, tertiary] = seeds;
+	const scheme = input.scheme ?? (seeds.length > 1 ? classifyScheme(hexToOklch(primary).h, seeds.slice(1).map((s) => hexToOklch(s).h)) : "analogous");
+	const category = input.vibe ?? inferCategory(primary);
+	const applyVibe = (hex) => {
+		if (!input.vibe) return hex;
+		const color = hexToOklch(hex);
+		return oklchToHex({
+			...color,
+			c: Math.min(color.c, CategoryChroma[input.vibe])
+		});
+	};
+	const targets = { primary: applyVibe(primary) };
+	if (secondary) targets.secondary = applyVibe(secondary);
+	if (tertiary) targets.tertiary = applyVibe(tertiary);
+	const checks = [];
+	const base = {
+		seed: primary,
+		scheme,
+		category,
+		targets,
+		checks
+	};
+	const lightColors = generateColors({
+		...base,
+		mode: "light"
+	});
+	const darkColors = generateColors({
+		...base,
+		mode: "dark"
+	});
+	const worstRatio = checks.reduce((worst, check) => Math.min(worst, check.ratio), 21);
+	return {
+		lightColors,
+		darkColors,
+		radii: input.shape ? ShapeRadii[input.shape] : void 0,
+		report: {
+			checks,
+			worstRatio,
+			pass: checks.every((check) => check.pass)
+		}
+	};
+};
+/**
+* Convenience wrapper: {@link generateThemes} piped through `createTheme()`,
+* returning a registration-ready light/dark {@link UniTheme} pair.
+*/
+var generateUniThemes = (input) => {
+	const { lightColors, darkColors, radii } = generateThemes(input);
+	const name = input.name ?? "Brand";
+	const id = name.replace(/\W+/g, "") || "Brand";
+	return {
+		light: createTheme({
+			id: `${id}Light`,
+			name: `${name} Light`,
+			colors: lightColors,
+			radii
+		}),
+		dark: createTheme({
+			id: `${id}Dark`,
+			name: `${name} Dark`,
+			colors: darkColors,
+			radii
+		})
+	};
+};
+//#endregion
+//#region src/concepts/generation/theme-file.emitter.ts
+var IDENT = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+var asKey = (k) => IDENT.test(k) ? k : `'${k}'`;
+var recordLiteral = (record, indent) => Object.entries(record).map(([k, v]) => `${indent}${asKey(k)}: '${v}',`).join("\n");
+var bordersLiteral = () => [
+	"/**",
+	" * Named border primitives. These mirror the derived defaults — edit them, or",
+	" * add your own under any token name and point component options (or the",
+	" * `components` overrides below) at it. Every component deriving from a",
+	" * shared token picks up the change.",
+	" */",
+	"const borders = (colors: Colors): Borders => ({",
+	"  primary: `1px solid ${colors.primary}`,",
+	"  secondary: `1px solid ${colors.secondary}`,",
+	"  tertiary: `1px solid ${colors.tertiary}`,",
+	"  quaternary: `1px solid ${colors.quaternary}`,",
+	"  warn: `1px solid ${colors.warn}`,",
+	"  success: `1px solid ${colors.success}`,",
+	"  light: `1px solid ${colors.outline}`,",
+	"  dark: `1px solid ${colors['on-background']}`,",
+	"  dotted: `1px dotted ${colors['on-background']}`,",
+	"});"
+].join("\n");
+var themeExport = (exportName, displayName, colorsConst, radii) => [
+	`export const ${exportName}: UniTheme = createTheme({`,
+	`  id: '${exportName}',`,
+	`  name: '${displayName}',`,
+	`  colors: ${colorsConst},`,
+	`  borders: borders(${colorsConst}),`,
+	`  components: components(${colorsConst}),`,
+	...radii ? ["  radii,"] : [],
+	"});"
+].join("\n");
+/**
+* Render a static `uni-theme.ts` from a brand seed — the file the `ng add`
+* schematic writes and the MCP `generate_uni_theme` tool returns.
+*
+* The file is the system's **source of truth**: literal colors, the border
+* primitives spelled out, and a sparse `components` override section — so a
+* human (or an AI agent) can retheme by editing tokens in place, with no
+* runtime generation. Deterministic: same input, same file.
+*/
+var emitThemeFile = (input) => {
+	const { darkMode = true, name = "Brand" } = input;
+	const { lightColors, darkColors, radii, report } = generateThemes(input);
+	const id = name.replace(/\W+/g, "") || "Brand";
+	const regenerate = [
+		`--brand=${(Array.isArray(input.seed) ? input.seed : [input.seed]).join(",")}`,
+		input.vibe && `--vibe=${input.vibe}`,
+		input.scheme && `--scheme=${input.scheme}`,
+		input.shape && `--shape=${input.shape}`,
+		!darkMode && "--dark-mode=false"
+	].filter(Boolean).join(" ");
+	const reportSummary = `${report.checks.length} contrast pairs checked · worst ${report.worstRatio}:1 · ${report.pass ? "all AA" : `${report.checks.filter((c) => !c.pass).length} failing`}`;
+	const modes = [{
+		exportName: `${id}Light`,
+		displayName: `${name} Light`,
+		colorsConst: "lightColors",
+		colors: lightColors
+	}, ...darkMode ? [{
+		exportName: `${id}Dark`,
+		displayName: `${name} Dark`,
+		colorsConst: "darkColors",
+		colors: darkColors
+	}] : []];
+	return {
+		content: [
+			"/**",
+			` * ${name} theme for Uni — generated data, yours to edit.`,
+			" *",
+			` * Regenerate colors: ng add @uni-design-system/uni-angular ${regenerate}`,
+			" * (or the `generate-uni-theme` MCP tool). Edits are never overwritten silently —",
+			" * regeneration rewrites this file, so commit before regenerating.",
+			` * ${reportSummary}.`,
+			" */",
+			"import {",
+			"  createTheme,",
+			"  type Borders,",
+			"  type Colors,",
+			"  type ComponentThemes,",
+			"  type UniTheme,",
+			"} from '@uni-design-system/uni-core';",
+			"",
+			...modes.map(({ colorsConst, colors }) => `const ${colorsConst}: Colors = {\n${recordLiteral(colors, "  ")}\n};\n`),
+			bordersLiteral(),
+			"",
+			"/**",
+			" * Sparse component overrides, deep-merged over Uni component defaults: only",
+			" * what you write here changes. Point components at your own primitives, e.g.:",
+			" *   button: { variants: { secondary: { border: `2px dashed ${colors.tertiary}` } } },",
+			" *   input: { options: { borderRadius: 'max' } },",
+			" */",
+			"const components = (colors: Colors): ComponentThemes => ({});",
+			"",
+			...radii ? [
+				`/** Shape language: '${input.shape}'. */`,
+				`const radii = {\n${recordLiteral(radii, "  ")}\n};`,
+				""
+			] : [],
+			...modes.map(({ exportName, displayName, colorsConst }) => `${themeExport(exportName, displayName, colorsConst, !!radii)}\n`),
+			"/** First key wins as the default theme when registered via UNI_THEMES. */",
+			`export const ${id}Themes = { ${modes.map((m) => m.exportName).join(", ")} };`,
+			""
+		].join("\n"),
+		providerSnippet: [
+			`import { UNI_THEMES } from '@uni-design-system/uni-angular';`,
+			`import { ${id}Themes } from './uni-theme';`,
+			"",
+			"// app.config.ts → providers:",
+			`{ provide: UNI_THEMES, useValue: ${id}Themes },`
+		].join("\n"),
+		report,
+		reportSummary
+	};
+};
+//#endregion
+//#region src/concepts/gradient/gradient.helper.ts
+function gradient(config) {
+	return ``;
+}
+//#endregion
+//#region src/concepts/layout/layout.helper.ts
+function getDeviceSize(height, width) {
+	if (!height || !width) return "md";
+	const max = Math.max(height, width);
+	if (max <= 600) return "xs";
+	if (max <= 960) return "sm";
+	if (max <= 1264) return "md";
+	if (max <= 1904) return "lg";
+	return "xl";
+}
+function getDeviceOrientation(height, width) {
+	if (!height || !width) return "landscape";
+	return height > width ? "portrait" : "landscape";
+}
+//#endregion
+//#region src/concepts/shadow/shadow.utils.ts
+var GetBoxShadow = ({ offset, blur, opacity }) => {
+	return `0 ${offset}px ${blur}px rgba(0,0,0,0.${opacity})`;
+};
+var GetBoxShadows = ({ umbra, penumbra }) => {
+	return GetBoxShadow(umbra) + ", " + GetBoxShadow(penumbra);
+};
+//#endregion
+//#region src/concepts/shadow/shadow.records.ts
+var ShadowMap = {
+	pressed: {
+		umbra: {
+			offset: 1,
+			blur: 2,
+			opacity: 24
 		},
-		cardHeader: {
-			fixed: { padding: "12px 24px" },
-			colors: {
-				primary: {
-					backgroundColor: genericLightTheme.primary,
-					color: genericLightTheme.onDark
-				},
-				secondary: {
-					backgroundColor: genericLightTheme.secondary,
-					color: genericLightTheme.onDark
-				},
-				tertiary: {
-					backgroundColor: genericLightTheme.tertiary,
-					color: genericLightTheme.onDark
-				},
-				warn: {
-					backgroundColor: genericLightTheme.warn,
-					color: genericLightTheme.onDark
-				},
-				success: {
-					backgroundColor: genericLightTheme.success,
-					color: genericLightTheme.onDark
-				}
-			}
+		penumbra: {
+			offset: 1,
+			blur: 3,
+			opacity: 12
+		}
+	},
+	raised: {
+		umbra: {
+			offset: 3,
+			blur: 6,
+			opacity: 23
 		},
-		cardContent: { fixed: { padding: "12px 24px" } },
-		dataSearch: { options: {
-			border: "light",
-			borderRadius: "xs",
-			color: "primary-surface",
-			placeholderColor: "disabled"
-		} },
-		dataTable: { options: {
-			color: "primary-surface",
-			border: "light",
-			borderRadius: "sm",
-			elevation: void 0,
-			headerPadding: "sm",
-			footerPadding: "sm",
-			thTextRole: "headline-small",
-			thColor: "primary-container",
-			thVerticalBorder: "dotted",
-			thHorizontalBorder: "light",
-			thPadding: "sm",
-			tdTextRole: "title-small",
-			tdColor: "primary-surface",
-			tdStickyColor: "primary-container",
-			tdPadding: "sm",
-			tdVerticalBorder: "dotted",
-			tdHorizontalBorder: "light",
-			rowHoverColor: "primary-container",
-			loadingOverlayColor: "scrim",
-			loadingSpinnerColor: "primary",
-			loadingSpinnerSize: 40
-		} },
-		notificationBadge: { options: {
-			borderRadius: "sm",
-			offset: -10
-		} },
-		paginator: { options: {
-			gap: "xs",
-			textRole: "label",
-			inputBorder: "light",
-			inputBorderRadius: "xs",
-			pageBorderRadius: "xs",
-			currentPageBorder: "light",
-			currentPageBorderRadius: "xs"
-		} },
-		snackbar: { options: {
-			bottomPosition: 40,
-			transitionDelay: "0.35s",
-			autoCloseDelay: 35e3
-		} },
-		symbol: { options: {
-			fill: 0,
-			weight: 400,
-			grade: 0,
-			opticalSize: 24
-		} },
-		toggle: { options: { size: 20 } },
-		tooltip: { options: {
-			border: void 0,
-			borderRadius: "xs",
-			shadow: "raised",
-			color: "inverse-surface",
-			typeface: "label"
-		} }
+		penumbra: {
+			offset: 3,
+			blur: 6,
+			opacity: 16
+		}
+	},
+	focussed: {
+		umbra: {
+			offset: 6,
+			blur: 6,
+			opacity: 23
+		},
+		penumbra: {
+			offset: 10,
+			blur: 20,
+			opacity: 19
+		}
+	},
+	navigation: {
+		umbra: {
+			offset: 10,
+			blur: 10,
+			opacity: 22
+		},
+		penumbra: {
+			offset: 14,
+			blur: 28,
+			opacity: 25
+		}
+	},
+	modal: {
+		umbra: {
+			offset: 15,
+			blur: 12,
+			opacity: 22
+		},
+		penumbra: {
+			offset: 19,
+			blur: 38,
+			opacity: 30
+		}
 	}
 };
+var ShadowCssMap = {
+	pressed: GetBoxShadows(ShadowMap["pressed"]),
+	raised: GetBoxShadows(ShadowMap["raised"]),
+	focussed: GetBoxShadows(ShadowMap["focussed"]),
+	navigation: GetBoxShadows(ShadowMap["navigation"]),
+	modal: GetBoxShadows(ShadowMap["modal"])
+};
+//#endregion
+//#region src/concepts/style/inputs.constants.ts
+var removeInputPlatformStyling = {
+	appearance: "none",
+	background: "none",
+	border: "none",
+	outline: "none",
+	boxShadow: "none",
+	padding: 0,
+	width: "100%"
+};
 //#endregion
 //#region src/concepts/theme/themes/dark.theme.ts
-var DarkTheme = {
-	...BaseTheme,
+var darkColors = generatePalette({
+	...BASE_PALETTE_CONFIG,
+	mode: "dark"
+});
+var DarkTheme = createTheme({
 	id: "DarkTheme",
 	name: "Dark Theme",
-	colors: {
-		primary: "#D0BCFF",
-		"on-primary": "#371E73",
-		"primary-container": "#4F378B",
-		"on-primary-container": "#EADDFF",
-		secondary: "#CCC2DC",
-		"on-secondary": "#332D41",
-		"secondary-container": "#4A4458",
-		"on-secondary-container": "#E8DEF8",
-		tertiary: "#EFB8C8",
-		"on-tertiary": "#492532",
-		"tertiary-container": "#633B48",
-		"on-tertiary-container": "#FFD8E4",
-		error: "#F2B8B5",
-		"on-error": "#601410",
-		"error-container": "#8C1D18",
-		"on-error-container": "#F9DEDC",
-		background: "#1C1B1F",
-		"on-background": "#E6E1E5",
-		surface: "#1C1B1F",
-		"on-surface": "#E6E1E5",
-		"surface-variant": "#49454F",
-		"on-surface-variant": "#CAC4D0",
-		outline: "#938F99",
-		shadow: "#000000",
-		"surface-tint": "#D0BCFF",
-		"inverse-surface": "#E6E1E5",
-		"inverse-on-surface": "#313033",
-		"inverse-on-surface-primary": "#6750A4",
-		"on-inverse-surface": "#313033",
-		"on-inverse-surface-primary": "#6750A4",
-		scrim: "#000000",
-		transparent: "rgba(0,0,0,0)",
-		ghost: "rgba(0,0,0,0)",
-		quaternary: "#938F99",
-		"on-quaternary": "#1C1B1F",
-		warn: "#F2B8B5",
-		"on-warn": "#601410",
-		success: "#7FD98F",
-		"on-success": "#00390F",
-		disabled: "rgba(255,255,255,0.12)",
-		"on-disabled": "rgba(255,255,255,0.38)",
-		"on-primary-container-variant": "rgba(255,255,255,0.4)",
-		"on-primary-container-border": "#EADDFF",
-		"on-secondary-container-variant": "rgba(255,255,255,0.4)",
-		"on-secondary-container-border": "#E8DEF8",
-		"on-tertiary-container-variant": "rgba(255,255,255,0.4)",
-		"on-tertiary-container-border": "#FFD8E4",
-		"warn-container": "#8C1D18",
-		"on-warn-container": "#F9DEDC",
-		"on-warn-container-variant": "rgba(255,255,255,0.4)",
-		"on-warn-container-border": "#F9DEDC",
-		"success-container": "#1E5128",
-		"on-success-container": "#C6F0CD",
-		"on-success-container-variant": "rgba(255,255,255,0.4)",
-		"on-success-container-border": "#C6F0CD",
-		"disabled-container": "#2B2930",
-		"on-disabled-container": "rgba(255,255,255,0.38)",
-		"inverse-container": "#E6E1E5",
-		"on-inverse-container": "#313033",
-		"primary-surface": "#1C1B1F",
-		"on-primary-surface": "#E6E1E5",
-		"on-primary-surface-variant": "#D0BCFF",
-		"secondary-surface": "#211F26",
-		"on-secondary-surface": "#E6E1E5",
-		"on-secondary-surface-variant": "#D0BCFF",
-		"tertiary-surface": "#2B2930",
-		"on-tertiary-surface": "#E6E1E5",
-		"on-tertiary-surface-variant": "#D0BCFF",
-		"quaternary-surface": "#36343B",
-		"on-quaternary-surface": "#E6E1E5",
-		"on-quaternary-surface-variant": "#D0BCFF",
-		"disabled-surface": "rgba(255,255,255,0.12)",
-		"on-disabled-surface": "rgba(255,255,255,0.5)",
-		"on-disabled-surface-variant": "rgba(255,255,255,0.4)",
-		"on-inverse-surface-variant": "#6750A4",
-		"on-background-variant": "#8F8C93"
-	}
-};
+	colors: darkColors
+});
 //#endregion
 //#region src/concepts/theme/themes/light.theme.ts
-var LightTheme = {
-	...BaseTheme,
+var LightTheme = createTheme({
 	id: "LightTheme",
-	name: "Light Theme"
-};
+	name: "Light Theme",
+	colors: lightColors
+});
 //#endregion
 //#region src/concepts/theme/theme.records.ts
 var UniThemes = {
@@ -1218,6 +1746,38 @@ var UniThemes = {
 };
 var DefaultThemeId = Object.keys(UniThemes)[0];
 //#endregion
+//#region src/concepts/typography/typography.records.ts
+var FontWeightMap = {
+	thin: 100,
+	"extra-light": 200,
+	light: 200,
+	normal: 400,
+	medium: 500,
+	"semi-bold": 600,
+	bold: 700,
+	"extra-bold": 800,
+	black: 900,
+	"extra-black": 950
+};
+//#endregion
+//#region src/concepts/typography/typeface.helpers.ts
+var px = (value) => `${value}px`;
+/**
+* Converts a TextStyle (numeric, design-token oriented) into a
+* TypeFaceDefinition (CSS-ready) so a theme's `typefaces` map can be
+* derived from its `typography` block instead of being duplicated.
+*/
+var toTypeface = (style) => ({
+	fontFamily: style.fontFamily,
+	fontSize: px(style.fontSize),
+	lineHeight: px(style.lineHeight),
+	...style.letterSpacing !== void 0 && { letterSpacing: px(style.letterSpacing) },
+	...style.textTransform === "uppercase" && { textTransform: "uppercase" },
+	...style.fontWeight !== void 0 && { fontWeight: style.fontWeight },
+	...style.fontStyle && { fontStyle: style.fontStyle }
+});
+var toTypefaces = (typography) => Object.fromEntries(Object.entries(typography).map(([role, style]) => [role, toTypeface(style)]));
+//#endregion
 //#region src/utils/getValue.ts
 function getValue(data, path, defaultValue) {
 	const value = path.split(/[.[\]]/).filter(Boolean).reduce((value, key) => value?.[key], data);
@@ -1235,6 +1795,6 @@ var debounce = (callback, timeout) => {
 	};
 };
 //#endregion
-export { BaseTheme, CategoryLightness, CategorySaturation, DarkTheme, DefaultThemeId, FontWeightMap, HSLAToString, LightTheme, RGBToHSL, RGBToString, RoleHues, ShadowCssMap, ShadowMap, UniThemes, Z_INDEX, collapseFadeOut, cycle, debounce, expandFadeIn, fadeIn, fadeOut, getAnalogousHues, getComplimentaryHue, getDeviceOrientation, getDeviceSize, getSplitComplimentaryHues, getTriadicHues, getValue, gradient, randomRangeValue, removeInputPlatformStyling, toTypeface, toTypefaces, uniColor };
+export { BASE_PALETTE_CONFIG, BaseTheme, CategoryChroma, CategoryLightness, CategorySaturation, DarkTheme, DefaultThemeId, FontWeightMap, HSLAToString, HSLToHex, HSLToRGB, LightTheme, RGBToHSL, RGBToString, RoleHues, ShadowCssMap, ShadowMap, ShapeRadii, UniThemes, Z_INDEX, classifyScheme, collapseFadeOut, contrastRatio, createTheme, createThemeFromPalette, cycle, darkColors, debounce, emitThemeFile, expandFadeIn, fadeIn, fadeOut, generateColors, generatePalette, generateThemes, generateUniThemes, getAnalogousHues, getComplimentaryHue, getDeviceOrientation, getDeviceSize, getSplitComplimentaryHues, getTriadicHues, getValue, gradient, hexToHSL, hexToOklch, hexToRgb, inferCategory, lightColors, oklchToHex, randomRangeValue, relativeLuminance, removeInputPlatformStyling, rgbToHex, schemeHues, toTypeface, toTypefaces, uniColor };
 
 //# sourceMappingURL=index.js.map