@uni-design-system/uni-core 7.2.0 → 8.0.0

package/dist/esm/index.js

@@ -1,3 +1,34 @@
+//#region src/concepts/animation/duration.helpers.ts
+/** Duration (seconds) the default theme assigns `expand`'s `transitionSpeed`. */
+var EXPAND_DEFAULT_SPEED = .35;
+/**
+* Content height (px) at which a reveal runs at exactly its `transitionSpeed`.
+* Roughly a few lines of card content — the size the default 0.35s was tuned on.
+*/
+var EXPAND_REFERENCE_HEIGHT = 240;
+/**
+* Duration envelope at the default speed. A tiny region never blinks past
+* faster than the min; a full-page region never drags longer than the max.
+* Expressed at `EXPAND_DEFAULT_SPEED` and applied as scale-factor clamps, so a
+* theme that slows `transitionSpeed` down widens its envelope proportionally
+* instead of being capped back to the stock feel.
+*/
+var EXPAND_MIN_DURATION = .15;
+var EXPAND_MAX_DURATION = .6;
+var MIN_SCALE = EXPAND_MIN_DURATION / EXPAND_DEFAULT_SPEED;
+var MAX_SCALE = EXPAND_MAX_DURATION / EXPAND_DEFAULT_SPEED;
+/**
+* Size-aware reveal duration: `speed × √(height ÷ reference)`, clamped.
+*
+* A fixed duration reads as sluggish on a short region and rushed on a tall
+* one; scaling by the square root of height keeps perceived speed steady —
+* bigger reveals get more time, but sublinearly.
+*/
+var expandDuration = (contentHeight, speed = EXPAND_DEFAULT_SPEED) => {
+	const scale = Math.sqrt((Number.isFinite(contentHeight) ? Math.max(contentHeight, 0) : 0) / 240);
+	return speed * Math.min(Math.max(scale, MIN_SCALE), MAX_SCALE);
+};
+//#endregion
 //#region src/concepts/animation/keyframes.constants.ts
 var fadeIn = {
 	"0%": { opacity: 0 },
@@ -898,6 +929,25 @@ var BaseIcons = {
 	spinner: "data:image/svg+xml;charset=UTF-8,%3csvg stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3e%3cstyle%3e .oui_spinner %7b transform-origin: center; animation: rotate_360 2s linear infinite;%7d .oui_spinner circle %7b stroke-linecap: round; animation: dash 1.5s ease-in-out infinite;%7d %40keyframes rotate_360 %7b 100%25 %7b transform: rotate(360deg);%7d %7d %40keyframes dash %7b 0%25 %7b stroke-dasharray: 0 150; stroke-dashoffset: 0;%7d 47.5%25 %7b stroke-dasharray: 42 150; stroke-dashoffset: -16;%7d 95%25, 100%25 %7b stroke-dasharray: 42 150; stroke-dashoffset: -59;%7d %7d %3c/style%3e%3cg class='oui_spinner'%3e%3ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3e%3c/circle%3e%3c/g%3e%3c/svg%3e "
 };
 //#endregion
+//#region src/concepts/style/selectors.constants.ts
+/**
+* The highlight state for roving-focus composites (menus, and any other widget
+* that moves focus programmatically): pointer hover, or focus the user drove
+* from the keyboard.
+*
+* Why not plain `:focus` — a roving-focus composite calls `.focus()` on an item
+* every time it opens, including pointer opens, and `:focus` would paint that
+* as a highlight the mouse user never asked for, reading as a preselected
+* item. `:focus-visible` excludes programmatic focus that follows a click while
+* still matching keyboard navigation.
+*
+* Shared as a constant because Emotion merges styles by **exact selector
+* text**: a component's base rule and any theme variant restyling that rule
+* must key both with this value, or the variant silently fails to override and
+* reintroduces the phantom highlight.
+*/
+var HOVER_OR_KEYBOARD_FOCUS = "&:hover, &:focus-visible";
+//#endregion
 //#region src/concepts/theme/themes/base.theme.ts
 var BaseTypography = {
 	"display-large": {
@@ -1095,6 +1145,25 @@ var buildBorders = (c) => ({
 	dark: `1px solid ${c["on-background"]}`,
 	dotted: `1px dotted ${c["on-background"]}`
 });
+/**
+* One tag colour role across all three tones. `soft` is the resting look (the
+* container pair), `solid` fills with the role itself, `outline` keeps the
+* surface and draws the edge — so every role stays consistent and a theme can
+* still override any single cell.
+*/
+var tagVariant = (c, role) => ({ [role]: {
+	backgroundColor: c[`${role}-container`],
+	color: c[`on-${role}-container`],
+	"&.tone-solid": {
+		backgroundColor: c[role],
+		color: c[`on-${role}`]
+	},
+	"&.tone-outline": {
+		backgroundColor: "transparent",
+		color: c[role],
+		borderColor: c[`on-${role}-container-border`] ?? c[role]
+	}
+} });
 var buildComponents = (c) => ({
 	alert: { options: {
 		topPosition: 40,
@@ -1240,6 +1309,38 @@ var buildComponents = (c) => ({
 		color: "primary-surface",
 		shadow: "menu"
 	} },
+	menu: { options: {
+		minWidth: 184,
+		color: void 0,
+		border: void 0,
+		borderRadius: void 0,
+		shadow: void 0,
+		paddingVertical: "xs",
+		paddingHorizontal: "none",
+		dividerBorder: "light",
+		dividerSpacing: "xs"
+	} },
+	menuItem: {
+		options: {
+			height: 38,
+			paddingHorizontal: "md",
+			gap: "md",
+			borderRadius: "none",
+			typeface: "label",
+			textColor: void 0,
+			hoverColor: "primary-container",
+			activeSymbol: "check",
+			transitionSpeed: .35
+		},
+		variants: { warn: {
+			color: c.warn,
+			[HOVER_OR_KEYBOARD_FOCUS]: {
+				backgroundColor: c["warn-container"],
+				color: c["on-warn-container"]
+			}
+		} }
+	},
+	expand: { options: { transitionSpeed: .35 } },
 	footer: { options: {
 		height: 52,
 		color: "primary",
@@ -1287,6 +1388,79 @@ var buildComponents = (c) => ({
 		focusOutlineOffset: 2
 	} },
 	badge: { options: { borderRadius: "xxs" } },
+	tag: {
+		options: {
+			borderRadius: "max",
+			typeface: "tag",
+			gap: "xs",
+			removeIcon: "close",
+			selectedIcon: "check"
+		},
+		fixed: {
+			display: "inline-flex",
+			alignItems: "center",
+			maxWidth: "100%",
+			border: "1px solid transparent",
+			transition: "background-color .2s ease, color .2s ease"
+		},
+		variants: {
+			...tagVariant(c, "primary"),
+			...tagVariant(c, "secondary"),
+			...tagVariant(c, "tertiary"),
+			...tagVariant(c, "warn"),
+			...tagVariant(c, "success"),
+			ghost: {
+				backgroundColor: "transparent",
+				color: c["on-background"],
+				"&.tone-solid": {
+					backgroundColor: c["surface-variant"],
+					color: c["on-surface-variant"]
+				},
+				"&.tone-outline": {
+					backgroundColor: "transparent",
+					borderColor: c.outline
+				}
+			},
+			disabled: {
+				backgroundColor: c["disabled-container"],
+				color: c["on-disabled"],
+				"&.tone-solid": {
+					backgroundColor: c.disabled,
+					color: c["on-disabled"]
+				},
+				"&.tone-outline": {
+					backgroundColor: "transparent",
+					borderColor: c.disabled
+				}
+			}
+		},
+		sizes: {
+			sm: {
+				height: 20,
+				fontSize: 12,
+				padding: "0 8px"
+			},
+			md: {
+				height: 24,
+				fontSize: 13,
+				padding: "0 10px"
+			},
+			lg: {
+				height: 32,
+				fontSize: 15,
+				padding: "0 12px"
+			}
+		}
+	},
+	tagInput: { options: {
+		chipGap: "xs",
+		chipSize: "md",
+		minInputWidth: "12ch",
+		listColor: "primary-surface",
+		listShadow: "menu",
+		listBorderRadius: "xs",
+		maxSuggestions: 8
+	} },
 	button: {
 		options: {
 			borderRadius: "max",
@@ -1590,11 +1764,11 @@ var buildComponents = (c) => ({
 		typeface: "label"
 	} }
 });
-var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var isRecord$1 = (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;
+	for (const [key, value] of Object.entries(override)) out[key] = isRecord$1(value) && isRecord$1(out[key]) ? deepMerge(out[key], value) : value;
 	return out;
 };
 var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, borders, components }) => ({
@@ -1614,6 +1788,31 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
 	components: deepMerge(buildComponents(colors), components)
 });
 /**
+* Re-attach the built-in icon set to a theme that traveled without it.
+*
+* A serialized theme is ~50 KB, ~71% of which is {@link BaseIcons} — bytes
+* every uni-core consumer already ships. Transports (MCP tool results, theme
+* JSON over HTTP) send the {@link dehydrateTheme} form and the receiver
+* hydrates, applying exactly the `{...BaseIcons, ...icons}` contract
+* {@link createTheme} applies at construction: the theme's own icons win,
+* built-ins fill the rest.
+*/
+var hydrateTheme = (theme) => ({
+	...theme,
+	icons: {
+		...BaseIcons,
+		...theme.icons
+	}
+});
+/**
+* The wire form of a theme: icons identical to the built-in set are dropped,
+* so only genuine overrides travel. Reverse with {@link hydrateTheme}.
+*/
+var dehydrateTheme = (theme) => ({
+	...theme,
+	icons: Object.fromEntries(Object.entries(theme.icons).filter(([name, uri]) => BaseIcons[name] !== uri))
+});
+/**
 * 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.
@@ -1761,11 +1960,17 @@ var generateThemes = (input) => {
 	};
 };
 /**
+* One-line human summary of a {@link ContrastReport}. Shared so the generated
+* theme file's header and the MCP's theme tools report identical wording.
+*/
+var summarizeContrast = (report) => `${report.checks.length} contrast pairs checked · worst ${report.worstRatio}:1 · ${report.pass ? "all AA" : `${report.checks.filter((check) => !check.pass).length} failing`}`;
+/**
 * Convenience wrapper: {@link generateThemes} piped through `createTheme()`,
-* returning a registration-ready light/dark {@link UniTheme} pair.
+* returning a registration-ready light/dark {@link UniTheme} pair alongside
+* the contrast report the colors were audited against.
 */
 var generateUniThemes = (input) => {
-	const { lightColors, darkColors, radii, lightShadows, darkShadows } = generateThemes(input);
+	const { lightColors, darkColors, radii, lightShadows, darkShadows, report } = generateThemes(input);
 	const name = input.name ?? "Brand";
 	const id = name.replace(/\W+/g, "") || "Brand";
 	return {
@@ -1782,7 +1987,8 @@ var generateUniThemes = (input) => {
 			colors: darkColors,
 			radii,
 			shadows: darkShadows
-		})
+		}),
+		report
 	};
 };
 //#endregion
@@ -1841,7 +2047,7 @@ var emitThemeFile = (input) => {
 		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 reportSummary = summarizeContrast(report);
 	const modes = [{
 		exportName: `${id}Light`,
 		displayName: `${name} Light`,
@@ -2134,6 +2340,235 @@ var UniThemes = {
 };
 var DefaultThemeId = Object.keys(UniThemes)[0];
 //#endregion
+//#region src/concepts/theme/theme.validation.ts
+/**
+* Color tokens components cannot render without: the default variant pairs,
+* the base surfaces, and the disabled/warn states. Themes may define any
+* further tokens; these must exist.
+*/
+var REQUIRED_COLOR_TOKENS = [
+	"primary",
+	"on-primary",
+	"primary-container",
+	"on-primary-container",
+	"primary-surface",
+	"on-primary-surface",
+	"surface",
+	"on-surface",
+	"background",
+	"on-background",
+	"warn",
+	"on-warn",
+	"disabled",
+	"on-disabled",
+	"outline",
+	"transparent"
+];
+/** The canonical type scale; every theme must style each role. */
+var REQUIRED_TEXT_ROLES = [
+	"display-large",
+	"display-medium",
+	"display-small",
+	"headline-large",
+	"headline-medium",
+	"headline-small",
+	"title-large",
+	"title-medium",
+	"title-small",
+	"body-1-long",
+	"body-1-short",
+	"body-2-long",
+	"body-2-short",
+	"subtitle-1",
+	"subtitle-2",
+	"label",
+	"button",
+	"caption",
+	"overline",
+	"paragraph",
+	"quote",
+	"note"
+];
+var REQUIRED_SPACING_SIZES = [
+	"none",
+	"xxs",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+var REQUIRED_RADII_SIZES = [
+	"none",
+	"xxs",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"max"
+];
+var REQUIRED_SHADOWS = [
+	"raised",
+	"menu",
+	"dialog",
+	"warn"
+];
+var REQUIRED_THICKNESSES = [
+	"thin",
+	"standard",
+	"thick"
+];
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var isCssValue = (value) => typeof value === "string" || typeof value === "number";
+/** Nested style expression: string/number leaves, objects for selectors. */
+var checkStyleExpression = (value, path, issues) => {
+	if (!isRecord(value)) {
+		issues.push({
+			path,
+			message: "must be a style object"
+		});
+		return;
+	}
+	for (const [key, entry] of Object.entries(value)) {
+		if (entry === void 0 || isCssValue(entry)) continue;
+		if (isRecord(entry)) checkStyleExpression(entry, `${path}.${key}`, issues);
+		else issues.push({
+			path: `${path}.${key}`,
+			message: "must be a string, number, or nested style object"
+		});
+	}
+};
+var checkStringRecord = (value, path, issues, required = [], allowNumbers = false) => {
+	if (!isRecord(value)) {
+		issues.push({
+			path,
+			message: "must be an object"
+		});
+		return;
+	}
+	for (const key of required) if (!(key in value)) issues.push({
+		path: `${path}.${key}`,
+		message: "is required"
+	});
+	for (const [key, entry] of Object.entries(value)) {
+		if (entry === void 0) continue;
+		if (!(allowNumbers ? isCssValue(entry) : typeof entry === "string")) issues.push({
+			path: `${path}.${key}`,
+			message: allowNumbers ? "must be a string or number" : "must be a string"
+		});
+	}
+};
+var checkTypography = (value, issues) => {
+	if (!isRecord(value)) {
+		issues.push({
+			path: "typography",
+			message: "must be an object"
+		});
+		return;
+	}
+	for (const role of REQUIRED_TEXT_ROLES) if (!(role in value)) issues.push({
+		path: `typography.${role}`,
+		message: "is required"
+	});
+	for (const [role, style] of Object.entries(value)) {
+		if (!isRecord(style)) {
+			issues.push({
+				path: `typography.${role}`,
+				message: "must be a TextStyle object"
+			});
+			continue;
+		}
+		if (typeof style["fontFamily"] !== "string") issues.push({
+			path: `typography.${role}.fontFamily`,
+			message: "must be a string"
+		});
+		for (const field of ["fontSize", "lineHeight"]) if (!isCssValue(style[field])) issues.push({
+			path: `typography.${role}.${field}`,
+			message: "must be a string or number"
+		});
+	}
+};
+var checkComponents = (value, issues) => {
+	if (!isRecord(value)) {
+		issues.push({
+			path: "components",
+			message: "must be an object"
+		});
+		return;
+	}
+	for (const [name, entry] of Object.entries(value)) {
+		if (entry === void 0) continue;
+		if (!isRecord(entry)) {
+			issues.push({
+				path: `components.${name}`,
+				message: "must be a component theme object"
+			});
+			continue;
+		}
+		if (entry["fixed"] !== void 0) checkStyleExpression(entry["fixed"], `components.${name}.fixed`, issues);
+		for (const section of ["variants", "sizes"]) {
+			const styles = entry[section];
+			if (styles === void 0) continue;
+			if (!isRecord(styles)) {
+				issues.push({
+					path: `components.${name}.${section}`,
+					message: "must be an object"
+				});
+				continue;
+			}
+			for (const [key, style] of Object.entries(styles)) if (style !== void 0) checkStyleExpression(style, `components.${name}.${section}.${key}`, issues);
+		}
+		if (entry["options"] !== void 0 && !isRecord(entry["options"])) issues.push({
+			path: `components.${name}.options`,
+			message: "must be an object"
+		});
+	}
+};
+/**
+* Validate a candidate theme, collecting every structural issue. Never
+* throws; a failed result carries the complete repair list.
+*/
+var parseTheme = (input) => {
+	const issues = [];
+	if (!isRecord(input)) return {
+		success: false,
+		issues: [{
+			path: "",
+			message: "theme must be an object"
+		}]
+	};
+	for (const field of ["id", "name"]) if (typeof input[field] !== "string" || input[field] === "") issues.push({
+		path: field,
+		message: "must be a non-empty string"
+	});
+	checkStringRecord(input["colors"], "colors", issues, REQUIRED_COLOR_TOKENS);
+	checkTypography(input["typography"], issues);
+	checkStringRecord(input["borders"], "borders", issues);
+	checkStringRecord(input["radii"], "radii", issues, REQUIRED_RADII_SIZES);
+	checkStringRecord(input["shadows"], "shadows", issues, REQUIRED_SHADOWS);
+	checkStringRecord(input["spacing"], "spacing", issues, REQUIRED_SPACING_SIZES, true);
+	checkStringRecord(input["thicknesses"], "thicknesses", issues, REQUIRED_THICKNESSES, true);
+	checkStringRecord(input["icons"], "icons", issues);
+	checkComponents(input["components"], issues);
+	return issues.length === 0 ? {
+		success: true,
+		theme: input,
+		issues: []
+	} : {
+		success: false,
+		issues
+	};
+};
+/** Format issues for logs and error messages. */
+var formatThemeIssues = (issues) => issues.map(({ path, message }) => path ? `${path} ${message}` : message).join("; ");
+/** Validate or throw, with every reason in the error message. */
+var assertTheme = (input) => {
+	const result = parseTheme(input);
+	if (!result.success) throw new Error(`Invalid UniTheme: ${formatThemeIssues(result.issues)}`);
+	return result.theme;
+};
+var isUniTheme = (input) => parseTheme(input).success;
+//#endregion
 //#region src/concepts/typography/typography.records.ts
 var FontWeightMap = {
 	thin: 100,
@@ -2150,6 +2585,7 @@ var FontWeightMap = {
 //#endregion
 //#region src/concepts/typography/typeface.helpers.ts
 var px = (value) => typeof value === "number" ? `${value}px` : value;
+var weight = (value) => typeof value === "number" ? value : FontWeightMap[value];
 /**
 * Converts a TextStyle (numeric, design-token oriented) into a
 * TypeFaceDefinition (CSS-ready) so a theme's `typefaces` map can be
@@ -2161,7 +2597,7 @@ var toTypeface = (style) => ({
 	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.fontWeight !== void 0 && { fontWeight: weight(style.fontWeight) },
 	...style.fontStyle && { fontStyle: style.fontStyle }
 });
 var toTypefaces = (typography) => Object.fromEntries(Object.entries(typography).map(([role, style]) => [role, toTypeface(style)]));
@@ -2183,6 +2619,6 @@ var debounce = (callback, timeout) => {
 	};
 };
 //#endregion
-export { BASE_PALETTE_CONFIG, BaseIcons, 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, emitDtcgTokens, emitThemeFile, expandFadeIn, fadeIn, fadeOut, generateColors, generatePalette, generateShadows, generateThemes, generateUniThemes, getAnalogousHues, getComplimentaryHue, getDeviceOrientation, getDeviceSize, getSplitComplimentaryHues, getTriadicHues, getValue, gradient, hexToHSL, hexToOklch, hexToRgb, inferCategory, lightColors, oklchToHex, randomRangeValue, relativeLuminance, removeInputPlatformStyling, rgbToHex, schemeHues, svgToIconUri, toTypeface, toTypefaces, uniColor };
+export { BASE_PALETTE_CONFIG, BaseIcons, BaseTheme, CategoryChroma, CategoryLightness, CategorySaturation, DarkTheme, DefaultThemeId, EXPAND_DEFAULT_SPEED, EXPAND_MAX_DURATION, EXPAND_MIN_DURATION, EXPAND_REFERENCE_HEIGHT, FontWeightMap, HOVER_OR_KEYBOARD_FOCUS, HSLAToString, HSLToHex, HSLToRGB, LightTheme, REQUIRED_COLOR_TOKENS, REQUIRED_RADII_SIZES, REQUIRED_SHADOWS, REQUIRED_SPACING_SIZES, REQUIRED_TEXT_ROLES, REQUIRED_THICKNESSES, RGBToHSL, RGBToString, RoleHues, ShadowCssMap, ShadowMap, ShapeRadii, UniThemes, Z_INDEX, assertTheme, classifyScheme, collapseFadeOut, contrastRatio, createTheme, createThemeFromPalette, cycle, darkColors, debounce, dehydrateTheme, emitDtcgTokens, emitThemeFile, expandDuration, expandFadeIn, fadeIn, fadeOut, formatThemeIssues, generateColors, generatePalette, generateShadows, generateThemes, generateUniThemes, getAnalogousHues, getComplimentaryHue, getDeviceOrientation, getDeviceSize, getSplitComplimentaryHues, getTriadicHues, getValue, gradient, hexToHSL, hexToOklch, hexToRgb, hydrateTheme, inferCategory, isUniTheme, lightColors, oklchToHex, parseTheme, randomRangeValue, relativeLuminance, removeInputPlatformStyling, rgbToHex, schemeHues, summarizeContrast, svgToIconUri, toTypeface, toTypefaces, uniColor };
 
 //# sourceMappingURL=index.js.map