@uni-design-system/uni-angular 8.3.1 → 9.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-angular",
-  "version": "8.3.1",
+  "version": "9.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": "^8.3.1"
+    "@uni-design-system/uni-core": "^9.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

@@ -15,6 +15,34 @@ var EXPAND_MIN_DURATION = .15;
 var EXPAND_MAX_DURATION = .6;
 EXPAND_MIN_DURATION / EXPAND_DEFAULT_SPEED;
 EXPAND_MAX_DURATION / EXPAND_DEFAULT_SPEED;
+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
+	};
+};
+/** 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);
+};
+/** 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);
+};
 var cycle = (angle) => {
 	if (angle > 360) return angle - 360;
 	if (angle < 0) return angle + 360;
@@ -70,34 +98,6 @@ var schemeHues = (hue, scheme) => {
 		}
 	}
 };
-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
-	};
-};
-/** 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);
-};
-/** 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);
-};
 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;
@@ -830,13 +830,51 @@ var BaseSpacing = {
 	sm: "8px",
 	md: "16px",
 	lg: "32px",
-	xl: "64px"
+	xl: "64px",
+	xxl: "128px"
 };
 var BaseThicknesses = {
 	thin: 1,
 	standard: 2,
 	thick: 4
 };
+/**
+* Shared motion timing, named by what moves rather than by how fast:
+* a small panel attached to a control snaps (`popup`), a larger free-floating
+* surface settles (`panel`), content growing in place eases at both ends
+* (`reveal`), a transient message arrives and leaves under its own steam
+* (`notification`), and a control answering a pointer should feel immediate
+* (`control`).
+*
+* Fast and linear is deliberate for `popup`. It is the timing every
+* trigger-anchored panel in the library uses — dropdown, menu, multi-select
+* and the combobox-style listboxes — so a form full of them opens uniformly;
+* at 100ms an easing curve is imperceptible anyway, and linear avoids the
+* lag a slow-in curve adds to something the user is waiting on.
+*/
+var BaseMotion = {
+	popup: {
+		duration: 100,
+		easing: "linear",
+		scale: .8
+	},
+	panel: {
+		duration: 250,
+		easing: "ease"
+	},
+	reveal: {
+		duration: 350,
+		easing: "ease-in-out"
+	},
+	notification: {
+		duration: 350,
+		easing: "ease-in-out"
+	},
+	control: {
+		duration: 300,
+		easing: "ease"
+	}
+};
 var BaseRadii = {
 	none: "none",
 	xxs: "4px",
@@ -880,7 +918,7 @@ var buildComponents = (c) => ({
 	alert: { options: {
 		topPosition: 40,
 		borderRadius: "sm",
-		transitionSpeed: .35,
+		motion: "notification",
 		elevation: "md"
 	} },
 	breadcrumb: { options: {
@@ -986,7 +1024,7 @@ var buildComponents = (c) => ({
 		size: 20,
 		ringColor: "outline",
 		fillColor: "surface",
-		transitionSpeed: .3
+		motion: "control"
 	} },
 	dialog: { options: {
 		borderRadius: "lg",
@@ -1023,7 +1061,8 @@ var buildComponents = (c) => ({
 		border: "none",
 		borderRadius: "xxs",
 		color: "primary-surface",
-		shadow: "menu"
+		shadow: "menu",
+		motion: "popup"
 	} },
 	menu: { options: {
 		minWidth: 184,
@@ -1046,7 +1085,7 @@ var buildComponents = (c) => ({
 			textColor: void 0,
 			hoverColor: "primary-container",
 			activeSymbol: "check",
-			transitionSpeed: .35
+			motion: "control"
 		},
 		variants: { warn: {
 			color: c.warn,
@@ -1070,9 +1109,10 @@ var buildComponents = (c) => ({
 		headerTypeface: "title-small",
 		tooltipPadding: "4px 8px",
 		tooltipOpenDelay: 500,
-		tooltipCloseDelay: 150
+		tooltipCloseDelay: 150,
+		motion: "panel"
 	} },
-	expand: { options: { transitionSpeed: .35 } },
+	expand: { options: { motion: "reveal" } },
 	footer: { options: {
 		height: 52,
 		color: "primary",
@@ -1533,11 +1573,13 @@ var buildComponents = (c) => ({
 		borderRadius: "xs",
 		animation: "shimmer",
 		duration: 1.4,
+		direction: "ltr",
+		highlightWidth: 40,
 		gap: "sm"
 	} },
 	snackbar: { options: {
 		bottomPosition: 40,
-		transitionDelay: "0.35s",
+		motion: "notification",
 		autoCloseDelay: 35e3
 	} },
 	symbol: { options: {
@@ -1573,7 +1615,7 @@ var buildComponents = (c) => ({
 		spotlightPadding: 6,
 		spotlightRadius: "xs",
 		ringWidth: 2,
-		transitionMs: 250
+		motion: "panel"
 	} },
 	tour: { options: {
 		progressStyle: "dots",
@@ -1587,7 +1629,7 @@ var deepMerge = (base, override) => {
 	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, typography, borders, thicknesses, components }) => ({
+var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, motion, typography, borders, thicknesses, spacing, components }) => ({
 	id,
 	name,
 	colors,
@@ -1595,7 +1637,14 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
 	borders: deepMerge(buildBorders(colors), borders),
 	radii,
 	shadows,
-	spacing: BaseSpacing,
+	spacing: {
+		...BaseSpacing,
+		...spacing
+	},
+	motion: {
+		...BaseMotion,
+		...motion
+	},
 	thicknesses: {
 		...BaseThicknesses,
 		...thicknesses
@@ -1772,6 +1821,7 @@ var themeExport = (exportName, displayName, colorsConst, shadowsConst, radii) =>
 	`  shadows: ${shadowsConst},`,
 	"  icons,",
 	...radii ? ["  radii,"] : [],
+	"  spacing,",
 	"});"
 ].join("\n");
 /**
@@ -1827,6 +1877,7 @@ var emitThemeFile = (input) => {
 			"  type ComponentThemes,",
 			"  type Icons,",
 			"  type Shadows,",
+			"  type Spacing,",
 			"  type UniTheme,",
 			"} from '@uni-design-system/uni-core';",
 			"",
@@ -1863,6 +1914,15 @@ var emitThemeFile = (input) => {
 			" */",
 			"const icons: Icons = {};",
 			"",
+			"/**",
+			" * Spacing steps, merged over the base scale",
+			" * (none: 0, xxs: 2px, xs: 4px, sm: 8px, md: 16px, lg: 32px, xl: 64px, xxl: 128px).",
+			" * Restate a named step to retune the rhythm, and add your own names for the",
+			" * gaps your design actually uses — every extra key is then a valid `padding`,",
+			" * `gap` or `marginInline` value: `<div stack-layout gap='tight'>`.",
+			" */",
+			"const spacing: Spacing = {};",
+			"",
 			...radii ? [
 				`/** Shape language: '${input.shape}'. */`,
 				`const radii = {\n${recordLiteral(radii, "  ")}\n};`,
@@ -1975,7 +2035,7 @@ var UniThemes = {
 Object.keys(UniThemes)[0];
 //#endregion
 //#region package.json
-var version = "8.3.1";
+var version = "9.0.0";
 //#endregion
 //#region schematics-src/ng-add/transforms.ts
 var addDependencies = (packageJsonText, deps) => {