@uni-design-system/uni-core 7.3.0 → 8.1.0

package/dist/cjs/index.cjs

@@ -930,6 +930,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": {
@@ -1127,6 +1146,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,
@@ -1228,12 +1266,15 @@ var buildComponents = (c) => ({
 	} },
 	checkbox: { options: {
 		size: 20,
-		boxColor: "surface"
+		boxColor: "surface",
+		borderRadius: 2,
+		focusRingGap: 2
 	} },
 	radio: { options: {
 		size: 20,
 		ringColor: "outline",
-		fillColor: "surface"
+		fillColor: "surface",
+		transitionSpeed: .3
 	} },
 	dialog: { options: {
 		borderRadius: "lg",
@@ -1297,7 +1338,7 @@ var buildComponents = (c) => ({
 		},
 		variants: { warn: {
 			color: c.warn,
-			"&:hover, &:focus": {
+			[HOVER_OR_KEYBOARD_FOCUS]: {
 				backgroundColor: c["warn-container"],
 				color: c["on-warn-container"]
 			}
@@ -1351,6 +1392,129 @@ 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
+	} },
+	calendar: {
+		options: {
+			dayBorderRadius: "max",
+			typeface: "label",
+			gap: "xxs",
+			navPrevSymbol: "chevron_left",
+			navNextSymbol: "chevron_right",
+			weekdayFormat: "short",
+			showOutsideDays: false,
+			todayStyle: "outline"
+		},
+		fixed: {
+			display: "inline-block",
+			userSelect: "none"
+		},
+		sizes: {
+			sm: {
+				width: 28,
+				height: 28,
+				fontSize: 12
+			},
+			md: {
+				width: 34,
+				height: 34,
+				fontSize: 13
+			},
+			lg: {
+				width: 40,
+				height: 40,
+				fontSize: 15
+			}
+		}
+	},
+	dateInput: { options: {
+		toggleSymbol: "calendar_month",
+		popupShadow: "menu",
+		popupBorderRadius: "xs",
+		popupColor: "primary-surface"
+	} },
+	timeInput: { options: {
+		toggleSymbol: "schedule",
+		listColor: "primary-surface",
+		listShadow: "menu",
+		listBorderRadius: "xs",
+		maxVisibleOptions: 7
+	} },
+	dateTimeInput: { options: {
+		partGap: "sm",
+		dividerColor: "outline"
+	} },
 	button: {
 		options: {
 			borderRadius: "max",
@@ -1654,14 +1818,14 @@ 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 }) => ({
+var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, borders, thicknesses, components }) => ({
 	id,
 	name,
 	colors,
@@ -1670,7 +1834,10 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
 	radii,
 	shadows,
 	spacing: BaseSpacing,
-	thicknesses: BaseThicknesses,
+	thicknesses: {
+		...BaseThicknesses,
+		...thicknesses
+	},
 	icons: {
 		...BaseIcons,
 		...icons
@@ -1678,6 +1845,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.
@@ -1825,11 +2017,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 {
@@ -1846,7 +2044,8 @@ var generateUniThemes = (input) => {
 			colors: darkColors,
 			radii,
 			shadows: darkShadows
-		})
+		}),
+		report
 	};
 };
 //#endregion
@@ -1905,7 +2104,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`,
@@ -2198,6 +2397,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,
@@ -2261,10 +2689,17 @@ exports.EXPAND_MAX_DURATION = EXPAND_MAX_DURATION;
 exports.EXPAND_MIN_DURATION = EXPAND_MIN_DURATION;
 exports.EXPAND_REFERENCE_HEIGHT = EXPAND_REFERENCE_HEIGHT;
 exports.FontWeightMap = FontWeightMap;
+exports.HOVER_OR_KEYBOARD_FOCUS = HOVER_OR_KEYBOARD_FOCUS;
 exports.HSLAToString = HSLAToString;
 exports.HSLToHex = HSLToHex;
 exports.HSLToRGB = HSLToRGB;
 exports.LightTheme = LightTheme;
+exports.REQUIRED_COLOR_TOKENS = REQUIRED_COLOR_TOKENS;
+exports.REQUIRED_RADII_SIZES = REQUIRED_RADII_SIZES;
+exports.REQUIRED_SHADOWS = REQUIRED_SHADOWS;
+exports.REQUIRED_SPACING_SIZES = REQUIRED_SPACING_SIZES;
+exports.REQUIRED_TEXT_ROLES = REQUIRED_TEXT_ROLES;
+exports.REQUIRED_THICKNESSES = REQUIRED_THICKNESSES;
 exports.RGBToHSL = RGBToHSL;
 exports.RGBToString = RGBToString;
 exports.RoleHues = RoleHues;
@@ -2273,6 +2708,7 @@ exports.ShadowMap = ShadowMap;
 exports.ShapeRadii = ShapeRadii;
 exports.UniThemes = UniThemes;
 exports.Z_INDEX = Z_INDEX;
+exports.assertTheme = assertTheme;
 exports.classifyScheme = classifyScheme;
 exports.collapseFadeOut = collapseFadeOut;
 exports.contrastRatio = contrastRatio;
@@ -2281,12 +2717,14 @@ exports.createThemeFromPalette = createThemeFromPalette;
 exports.cycle = cycle;
 exports.darkColors = darkColors;
 exports.debounce = debounce;
+exports.dehydrateTheme = dehydrateTheme;
 exports.emitDtcgTokens = emitDtcgTokens;
 exports.emitThemeFile = emitThemeFile;
 exports.expandDuration = expandDuration;
 exports.expandFadeIn = expandFadeIn;
 exports.fadeIn = fadeIn;
 exports.fadeOut = fadeOut;
+exports.formatThemeIssues = formatThemeIssues;
 exports.generateColors = generateColors;
 exports.generatePalette = generatePalette;
 exports.generateShadows = generateShadows;
@@ -2303,14 +2741,18 @@ exports.gradient = gradient;
 exports.hexToHSL = hexToHSL;
 exports.hexToOklch = hexToOklch;
 exports.hexToRgb = hexToRgb;
+exports.hydrateTheme = hydrateTheme;
 exports.inferCategory = inferCategory;
+exports.isUniTheme = isUniTheme;
 exports.lightColors = lightColors;
 exports.oklchToHex = oklchToHex;
+exports.parseTheme = parseTheme;
 exports.randomRangeValue = randomRangeValue;
 exports.relativeLuminance = relativeLuminance;
 exports.removeInputPlatformStyling = removeInputPlatformStyling;
 exports.rgbToHex = rgbToHex;
 exports.schemeHues = schemeHues;
+exports.summarizeContrast = summarizeContrast;
 exports.svgToIconUri = svgToIconUri;
 exports.toTypeface = toTypeface;
 exports.toTypefaces = toTypefaces;