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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-angular",
-  "version": "7.2.0",
+  "version": "8.0.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.2.0"
+    "@uni-design-system/uni-core": "^8.0.0"
   },
   "module": "fesm2022/uni-design-system-uni-angular.mjs",
   "typings": "types/uni-design-system-uni-angular.d.ts",

package/schematics/ng-add/index.js

@@ -2,6 +2,19 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let _angular_devkit_schematics = require("@angular-devkit/schematics");
 let _angular_devkit_schematics_tasks = require("@angular-devkit/schematics/tasks");
 //#region ../core/dist/esm/index.js
+/** Duration (seconds) the default theme assigns `expand`'s `transitionSpeed`. */
+var EXPAND_DEFAULT_SPEED = .35;
+/**
+* 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;
+EXPAND_MIN_DURATION / EXPAND_DEFAULT_SPEED;
+EXPAND_MAX_DURATION / EXPAND_DEFAULT_SPEED;
 var cycle = (angle) => {
 	if (angle > 360) return angle - 360;
 	if (angle < 0) return angle + 360;
@@ -631,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",
@@ -827,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,
@@ -972,6 +1021,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",
@@ -1019,6 +1100,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",
@@ -1322,11 +1476,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 }) => ({
@@ -1474,6 +1628,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");
@@ -1528,7 +1687,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`,
@@ -1709,7 +1868,7 @@ var UniThemes = {
 Object.keys(UniThemes)[0];
 //#endregion
 //#region package.json
-var version = "7.2.0";
+var version = "8.0.0";
 //#endregion
 //#region schematics-src/ng-add/transforms.ts
 var addDependencies = (packageJsonText, deps) => {