@uni-design-system/uni-angular 5.1.0 → 6.0.0

package/package.json

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

@@ -555,6 +555,26 @@ var generateShadows = (colors, mode = "light") => {
 		warn: `0 0 5px ${rgba(error, .5)}, inset 0 0 5px ${rgba(error, .3)}`
 	};
 };
+/**
+* Default icon primitives shipped with every theme. Each icon is an inline
+* SVG data URI rendered as a CSS mask over `currentColor`, so icons recolor
+* with the theme automatically. `createTheme` merges a theme's own `icons`
+* over this set — add or override under any name; components render them by
+* token via `uni-icon`, never by inlining SVG.
+*/
+var BaseIcons = {
+	alertCircle: "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M0 0h24v24H0V0z' fill='none'/%3e%3cpath d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3e%3c/svg%3e",
+	calendar: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'%3E%3C/path%3E%3C/svg%3E",
+	checkCircle: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg%3E%3Cpath d='M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm2.0873,41.5-5.4107,5.4106-.02.02L14.1751,32.4492l5.4306-5.4306,9.051,9.0509L46.2861,18.44l5.4305,5.4306Z'/%3E%3C/g%3E%3C/svg%3E",
+	chevronUp: "data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m296-345-56-56 240-240 240 240-56 56-184-184-184 184Z'/%3E%3C/svg%3E",
+	chevronDown: "data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E",
+	chevronLeft: "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z'/%3E%3C/svg%3E",
+	chevronRight: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/%3E%3C/svg%3E",
+	xCircle: "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3e%3cg%3e%3cpath d='M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0ZM47.4649,42.3543l-5.4306,5.43L31.68,37.4305,21.3257,47.7848l-5.4306-5.43L26.25,32,15.8951,21.6456l5.4306-5.4305L31.68,26.5694,42.0343,16.2151l5.4306,5.4305L37.1106,32Z'/%3e%3c/g%3e%3c/svg%3e",
+	search: "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3e%3cg%3e%3cpath d='M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e",
+	close: "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cg%3e%3cpath fill='currentColor' d='M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z'%3e%3c/path%3e%3c/g%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 "
+};
 var BaseTypography = {
 	"display-large": {
 		fontFamily: "Red Hat Display",
@@ -692,6 +712,13 @@ var BaseTypography = {
 		fontSize: 16,
 		lineHeight: 24
 	},
+	stat: {
+		fontFamily: "Red Hat Display",
+		fontSize: 32,
+		lineHeight: 38,
+		fontWeight: 600,
+		letterSpacing: -.32
+	},
 	tag: {
 		fontFamily: "Red Hat Display",
 		fontSize: 15,
@@ -751,7 +778,107 @@ var buildComponents = (c) => ({
 		transitionSpeed: .35,
 		elevation: "md"
 	} },
-	checkbox: { options: { size: 20 } },
+	breadcrumb: { options: {
+		typeface: "label",
+		color: "on-background-variant",
+		currentColor: "on-background",
+		separatorSymbol: "chevron_right",
+		gap: "xs"
+	} },
+	appBar: { options: {
+		color: "surface",
+		height: 56,
+		divider: "light",
+		typeface: "title-large",
+		padding: "md",
+		gap: "md",
+		elevation: void 0
+	} },
+	drawer: { options: {
+		color: "surface",
+		width: 280,
+		divider: "light",
+		elevation: "menu",
+		padding: "md",
+		backdrop: { background: "rgba(0, 0, 0, 0.4)" }
+	} },
+	avatar: {
+		options: {
+			borderRadius: "max",
+			typeface: "subtitle-2",
+			fallbackSymbol: "person"
+		},
+		variants: {
+			primary: {
+				backgroundColor: c["primary-container"],
+				color: c["on-primary-container"]
+			},
+			secondary: {
+				backgroundColor: c["secondary-container"],
+				color: c["on-secondary-container"]
+			},
+			tertiary: {
+				backgroundColor: c["tertiary-container"],
+				color: c["on-tertiary-container"]
+			},
+			quaternary: {
+				backgroundColor: c["surface-variant"],
+				color: c["on-surface-variant"]
+			},
+			warn: {
+				backgroundColor: c["warn-container"],
+				color: c["on-warn-container"]
+			},
+			success: {
+				backgroundColor: c["success-container"],
+				color: c["on-success-container"]
+			}
+		},
+		sizes: {
+			sm: {
+				height: 24,
+				width: 24,
+				fontSize: 10
+			},
+			md: {
+				height: 32,
+				width: 32,
+				fontSize: 13
+			},
+			lg: {
+				height: 40,
+				width: 40,
+				fontSize: 16
+			},
+			xl: {
+				height: 56,
+				width: 56,
+				fontSize: 22
+			}
+		}
+	},
+	avatarGroup: { options: {
+		overlap: "sm",
+		ringColor: "surface",
+		ringWidth: 2
+	} },
+	searchInput: { options: {
+		searchSymbol: "search",
+		clearSymbol: "close",
+		listColor: "primary-surface",
+		listShadow: "menu",
+		listBorderRadius: "xs",
+		maxSuggestions: 8
+	} },
+	checkbox: { options: {
+		size: 20,
+		boxColor: "surface"
+	} },
+	radio: { options: {
+		size: 20,
+		ringColor: "outline",
+		fillColor: "surface"
+	} },
 	dialog: { options: {
 		borderRadius: "lg",
 		color: "primary-surface",
@@ -799,6 +926,22 @@ var buildComponents = (c) => ({
 		focusOutline: `2px solid ${c.primary}`,
 		focusOutlineOffset: 2
 	} },
+	textarea: { options: {
+		rows: 3,
+		resize: "vertical"
+	} },
+	tabs: { options: {
+		typeface: "title-small",
+		textColor: "on-surface-variant",
+		activeTextColor: "primary",
+		indicatorColor: "primary",
+		indicatorThickness: "standard",
+		divider: "light",
+		gap: "sm",
+		borderRadius: "none",
+		padding: "md",
+		activeColor: void 0
+	} },
 	multiSelectDropdown: { options: {
 		textRole: "input",
 		textColor: "on-primary-surface",
@@ -810,13 +953,16 @@ var buildComponents = (c) => ({
 	} },
 	badge: { options: { borderRadius: "xxs" } },
 	button: {
+		options: {
+			borderRadius: "max",
+			typeface: "button"
+		},
 		fixed: {
 			position: "relative",
 			overflow: "hidden",
 			outline: "0",
 			border: "0",
 			cursor: "pointer",
-			fontFamily: "Euphemia, sans-serif",
 			transition: "all 0.28s ease"
 		},
 		variants: {
@@ -867,33 +1013,29 @@ var buildComponents = (c) => ({
 		sizes: {
 			sm: {
 				height: 22,
-				borderRadius: 11,
 				fontSize: 12,
 				padding: "0 12px",
-				fontFamily: "Euphemia Bold, sans-serif",
 				fontWeight: 600
 			},
 			md: {
 				height: 26,
-				borderRadius: 13,
 				fontSize: 16,
 				padding: "0 16px"
 			},
 			lg: {
 				height: 36,
-				borderRadius: 18,
 				fontSize: 18,
 				padding: "0 18px"
 			},
 			xl: {
 				height: 48,
-				borderRadius: 24,
 				fontSize: 24,
 				padding: "0 22px"
 			}
 		}
 	},
 	iconButton: {
+		options: { borderRadius: "max" },
 		variants: {
 			ghost: {
 				backgroundColor: "transparent",
@@ -959,23 +1101,23 @@ var buildComponents = (c) => ({
 		fixed: { textFill: c["on-background"] },
 		variants: {
 			primary: {
-				backgroundColor: "#b3d4ea",
+				backgroundColor: c["primary-container"],
 				color: c.primary
 			},
 			secondary: {
-				backgroundColor: "#b3e7c2",
+				backgroundColor: c["secondary-container"],
 				color: c.secondary
 			},
 			tertiary: {
-				backgroundColor: "#ffe2b3",
+				backgroundColor: c["tertiary-container"],
 				color: c.tertiary
 			},
 			warn: {
-				backgroundColor: "#ffc2b3",
+				backgroundColor: c["warn-container"],
 				color: c.warn
 			},
 			success: {
-				backgroundColor: "#b3e7c2",
+				backgroundColor: c["success-container"],
 				color: c.success
 			}
 		},
@@ -987,33 +1129,10 @@ var buildComponents = (c) => ({
 		}
 	},
 	card: {
+		options: { borderRadius: "xs" },
 		fixed: {
-			borderStyle: "solid",
-			borderWidth: "1px",
-			borderRadius: "8px",
-			overflow: "hidden"
-		},
-		variants: {
-			primary: {
-				borderColor: c.primary,
-				backgroundColor: c.background
-			},
-			secondary: {
-				borderColor: c.secondary,
-				backgroundColor: c.background
-			},
-			tertiary: {
-				borderColor: c.tertiary,
-				backgroundColor: c.background
-			},
-			warn: {
-				borderColor: c.warn,
-				backgroundColor: c.background
-			},
-			success: {
-				borderColor: c.success,
-				backgroundColor: c.background
-			}
+			overflow: "hidden",
+			backgroundColor: c.background
 		}
 	},
 	cardHeader: {
@@ -1084,6 +1203,34 @@ var buildComponents = (c) => ({
 		currentPageBorder: "light",
 		currentPageBorderRadius: "xs"
 	} },
+	stat: { options: {
+		labelTypeface: "label",
+		valueTypeface: "stat",
+		color: "surface",
+		border: "light",
+		borderRadius: "xs",
+		positiveColor: "success",
+		negativeColor: "error",
+		trendColor: "outline",
+		trendAccent: "primary",
+		padding: "md",
+		gap: "xxs"
+	} },
+	slider: { options: {
+		color: "primary",
+		trackColor: "surface-variant",
+		borderRadius: "max",
+		trackHeight: 4,
+		thumbSize: 16
+	} },
+	skeleton: { options: {
+		color: "surface-variant",
+		highlightColor: "surface",
+		borderRadius: "xs",
+		animation: "shimmer",
+		duration: 1.4,
+		gap: "sm"
+	} },
 	snackbar: { options: {
 		bottomPosition: 40,
 		transitionDelay: "0.35s",
@@ -1095,7 +1242,11 @@ var buildComponents = (c) => ({
 		grade: 0,
 		opticalSize: 24
 	} },
-	toggle: { options: { size: 20 } },
+	toggle: { options: {
+		size: 20,
+		trackColor: "surface-variant",
+		knobColor: "surface"
+	} },
 	tooltip: { options: {
 		border: void 0,
 		borderRadius: "xs",
@@ -1121,7 +1272,10 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
 	shadows,
 	spacing: BaseSpacing,
 	thicknesses: BaseThicknesses,
-	icons,
+	icons: {
+		...BaseIcons,
+		...icons
+	},
 	components: deepMerge(buildComponents(colors), components)
 });
 /**
@@ -1283,6 +1437,7 @@ var themeExport = (exportName, displayName, colorsConst, shadowsConst, radii) =>
 	`  borders: borders(${colorsConst}),`,
 	`  components: components(${colorsConst}),`,
 	`  shadows: ${shadowsConst},`,
+	"  icons,",
 	...radii ? ["  radii,"] : [],
 	"});"
 ].join("\n");
@@ -1337,6 +1492,7 @@ var emitThemeFile = (input) => {
 			"  type Borders,",
 			"  type Colors,",
 			"  type ComponentThemes,",
+			"  type Icons,",
 			"  type Shadows,",
 			"  type UniTheme,",
 			"} from '@uni-design-system/uni-core';",
@@ -1354,6 +1510,15 @@ var emitThemeFile = (input) => {
 			" */",
 			"const components = (colors: Colors): ComponentThemes => ({});",
 			"",
+			"/**",
+			" * Icon primitives, merged over the built-in set (close, search, spinner,",
+			" * chevrons, …). Define an icon ONCE here as an inline SVG data URI — it is",
+			" * masked with currentColor, so it recolors with the theme — and render it",
+			" * anywhere via `<uni-icon name='…'/>`. Never inline SVG in components.",
+			" * Example: logo: \"data:image/svg+xml,%3Csvg xmlns='…' viewBox='0 0 24 24'%3E…%3C/svg%3E\",",
+			" */",
+			"const icons: Icons = {};",
+			"",
 			...radii ? [
 				`/** Shape language: '${input.shape}'. */`,
 				`const radii = {\n${recordLiteral(radii, "  ")}\n};`,
@@ -1466,7 +1631,7 @@ var UniThemes = {
 Object.keys(UniThemes)[0];
 //#endregion
 //#region package.json
-var version = "5.1.0";
+var version = "6.0.0";
 //#endregion
 //#region schematics-src/ng-add/transforms.ts
 var addDependencies = (packageJsonText, deps) => {