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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-angular",
-  "version": "7.3.0",
+  "version": "8.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
     "@angular/core": "^21.2.0",
     "@angular/forms": "^21.2.0",
     "@emotion/css": "^11.0.0",
-    "@uni-design-system/uni-core": "^7.3.0"
+    "@uni-design-system/uni-core": "^8.1.0"
   },
   "module": "fesm2022/uni-design-system-uni-angular.mjs",
   "typings": "types/uni-design-system-uni-angular.d.ts",

package/schematics/ng-add/index.js

@@ -644,6 +644,23 @@ var BaseIcons = {
 	logout: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M212.31-140Q182-140 161-161q-21-21-21-51.31v-535.38Q140-778 161-799q21-21 51.31-21h268.07v60H212.31q-4.62 0-8.46 3.85-3.85 3.84-3.85 8.46v535.38q0 4.62 3.85 8.46 3.84 3.85 8.46 3.85h268.07v60H212.31Zm436.92-169.23-41.54-43.39L705.08-450H363.85v-60h341.23l-97.39-97.38 41.54-43.39L820-480 649.23-309.23Z'/%3e%3c/svg%3e",
 	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 "
 };
+/**
+* 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";
 var BaseTypography = {
 	"display-large": {
 		fontFamily: "Red Hat Display",
@@ -840,6 +857,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,
@@ -941,12 +977,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",
@@ -1010,7 +1049,7 @@ var buildComponents = (c) => ({
 		},
 		variants: { warn: {
 			color: c.warn,
-			"&:hover, &:focus": {
+			[HOVER_OR_KEYBOARD_FOCUS]: {
 				backgroundColor: c["warn-container"],
 				color: c["on-warn-container"]
 			}
@@ -1064,6 +1103,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",
@@ -1367,14 +1529,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,
@@ -1383,7 +1545,10 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
 	radii,
 	shadows,
 	spacing: BaseSpacing,
-	thicknesses: BaseThicknesses,
+	thicknesses: {
+		...BaseThicknesses,
+		...thicknesses
+	},
 	icons: {
 		...BaseIcons,
 		...icons
@@ -1519,6 +1684,11 @@ 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`}`;
 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");
@@ -1573,7 +1743,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`,
@@ -1754,7 +1924,7 @@ var UniThemes = {
 Object.keys(UniThemes)[0];
 //#endregion
 //#region package.json
-var version = "7.3.0";
+var version = "8.1.0";
 //#endregion
 //#region schematics-src/ng-add/transforms.ts
 var addDependencies = (packageJsonText, deps) => {