@uni-design-system/uni-core 10.4.0 → 11.1.0

package/dist/esm/index.js

@@ -740,6 +740,10 @@ var BaseIcons = {
 	chevronRight: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='m517.85-480-184-184L376-706.15 602.15-480 376-253.85 333.85-296l184-184Z'/%3e%3c/svg%3e",
 	arrowLeft: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='m294.92-450 227.85 227.85L480-180 180-480l300-300 42.77 42.15L294.92-510H780v60H294.92Z'/%3e%3c/svg%3e",
 	arrowRight: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M665.08-450H180v-60h485.08L437.23-737.85 480-780l300 300-300 300-42.77-42.15L665.08-450Z'/%3e%3c/svg%3e",
+	arrowUp: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M450-180v-485.08L222.15-437.23 180-480l300-300 300 300-42.15 42.77L510-665.08V-180h-60Z'/%3e%3c/svg%3e",
+	arrowDown: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M450-780v485.08L222.15-522.77 180-480l300 300 300-300-42.15-42.77L510-294.92V-780h-60Z'/%3e%3c/svg%3e",
+	chevronsLeft: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M445-253.85 218.85-480 445-706.15 487.15-664 303.77-480l183.38 184L445-253.85Zm254 0L472.85-480 699-706.15 741.15-664 557.77-480l183.38 184L699-253.85Z'/%3e%3c/svg%3e",
+	chevronsRight: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M402.23-480 218.85-664 261-706.15 487.15-480 261-253.85 218.85-296l183.38-184Zm254 0L472.85-664 515-706.15 741.15-480 515-253.85 472.85-296l183.38-184Z'/%3e%3c/svg%3e",
 	home: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M240-200h133.85v-237.69h212.3V-200H720v-360L480-740.77 240-560v360Zm-60 60v-450l300-225.77L780-590v450H526.15v-237.69h-92.3V-140H180Zm300-330.38Z'/%3e%3c/svg%3e",
 	building: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M130-136.92v-540h160v-160h380v320h160v380H530v-160H430v160H130Zm60-60h100v-100H190v100Zm0-160h100v-100H190v100Zm0-160h100v-100H190v100Zm160 160h100v-100H350v100Zm0-160h100v-100H350v100Zm0-160h100v-100H350v100Zm160 320h100v-100H510v100Zm0-160h100v-100H510v100Zm0-160h100v-100H510v100Zm160 480h100v-100H670v100Zm0-160h100v-100H670v100Z'/%3e%3c/svg%3e",
 	externalLink: "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-21h252.3v60h-252.3q-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.85h535.38q4.62 0 8.46-3.85 3.85-3.84 3.85-8.46v-252.3h60v252.3Q820-182 799-161q-21 21-51.31 21H212.31Zm176.46-206.62-42.15-42.15L717.85-760H560v-60h260v260h-60v-157.85L388.77-346.62Z'/%3e%3c/svg%3e",
@@ -964,7 +968,7 @@ var BaseTypography = {
 		fontFamily: "Red Hat Display",
 		fontSize: 15,
 		lineHeight: 20,
-		fontWeight: 600
+		fontWeight: 500
 	},
 	input: {
 		fontFamily: "Red Hat Display",
@@ -1028,6 +1032,10 @@ var BaseMotion = {
 	control: {
 		duration: 300,
 		easing: "ease"
+	},
+	snap: {
+		duration: 120,
+		easing: "ease"
 	}
 };
 /**
@@ -1093,14 +1101,26 @@ var SELECTION_ACCENTS = {
 var tagVariant = (c, role) => ({ [role]: {
 	backgroundColor: c[`${role}-container`],
 	color: c[`on-${role}-container`],
-	"&.tone-solid": {
+	"&.tag-selected": {
 		backgroundColor: c[role],
 		color: c[`on-${role}`]
 	},
+	"&.tag-interactive:hover": { filter: "brightness(0.95)" },
+	"&.tone-solid": {
+		backgroundColor: c[role],
+		color: c[`on-${role}`],
+		"&.tag-selected": { filter: "brightness(0.9)" },
+		"&.tag-selected.tag-interactive:hover": { filter: "brightness(0.85)" }
+	},
 	"&.tone-outline": {
 		backgroundColor: "transparent",
 		color: c[role],
-		borderColor: c[`on-${role}-container-border`] ?? c[role]
+		borderColor: c[`on-${role}-container-border`] ?? c[role],
+		"&.tag-selected": {
+			backgroundColor: c[role],
+			color: c[`on-${role}`],
+			borderColor: c[role]
+		}
 	}
 } });
 var buildComponents = (c) => ({
@@ -1114,7 +1134,7 @@ var buildComponents = (c) => ({
 		typeface: "label",
 		color: "on-background-variant",
 		currentColor: "on-background",
-		separatorSymbol: "chevron_right",
+		separatorIcon: "chevronRight",
 		gap: "xs"
 	} },
 	appBar: { options: {
@@ -1162,7 +1182,7 @@ var buildComponents = (c) => ({
 		options: {
 			borderRadius: "max",
 			typeface: "subtitle-2",
-			fallbackSymbol: "person"
+			fallbackIcon: "profile"
 		},
 		variants: {
 			primary: {
@@ -1219,8 +1239,8 @@ var buildComponents = (c) => ({
 		ringWidth: 2
 	} },
 	searchInput: { options: {
-		searchSymbol: "search",
-		clearSymbol: "close",
+		searchIcon: "search",
+		clearIcon: "close",
 		listColor: "primary-surface",
 		listShadow: "menu",
 		listBorderRadius: "xs",
@@ -1229,6 +1249,7 @@ var buildComponents = (c) => ({
 	} },
 	checkbox: {
 		options: {
+			motion: "control",
 			size: 20,
 			boxColor: "surface",
 			borderRadius: 2,
@@ -1278,6 +1299,22 @@ var buildComponents = (c) => ({
 		closeButtonIcon: "close",
 		closeButtonSize: "md"
 	} },
+	select: { options: {
+		toggleIcon: "chevronDown",
+		toggleColor: "on-background-variant",
+		toggleSize: 20
+	} },
+	buttonGroup: { options: {
+		border: "quaternary",
+		borderRadius: 4
+	} },
+	progressBar: { options: {
+		trackColor: "primary-surface",
+		fillColor: "secondary-surface",
+		completeColor: "secondary",
+		borderColor: "on-background-variant",
+		strokeWidth: 1
+	} },
 	dropdown: { options: {
 		border: "none",
 		borderRadius: "xxs",
@@ -1305,7 +1342,7 @@ var buildComponents = (c) => ({
 			typeface: "label",
 			textColor: void 0,
 			hoverColor: "primary-container",
-			activeSymbol: "check",
+			activeIcon: "check",
 			motion: "control"
 		},
 		variants: {
@@ -1329,7 +1366,7 @@ var buildComponents = (c) => ({
 		maxWidth: "38ch",
 		offset: 7,
 		arrowSize: 8,
-		closeSymbol: "close",
+		closeIcon: "close",
 		headerTypeface: "title-small",
 		tooltipPadding: "4px 8px",
 		tooltipOpenDelay: 500,
@@ -1337,12 +1374,6 @@ var buildComponents = (c) => ({
 		motion: "panel"
 	} },
 	expand: { options: { motion: "reveal" } },
-	footer: { options: {
-		height: 52,
-		color: "primary",
-		logoHeight: 18.6,
-		logoPadding: "md"
-	} },
 	input: { options: {
 		typeface: "input",
 		color: "primary-surface",
@@ -1401,6 +1432,7 @@ var buildComponents = (c) => ({
 		}
 	},
 	tabs: { options: {
+		motion: "snap",
 		typeface: "title-small",
 		textColor: "on-surface-variant",
 		activeTextColor: "primary",
@@ -1428,14 +1460,15 @@ var buildComponents = (c) => ({
 			typeface: "tag",
 			gap: "xs",
 			removeIcon: "close",
-			selectedIcon: "check"
+			selectedIcon: "check",
+			motion: "control",
+			endInset: "auto"
 		},
 		fixed: {
 			display: "inline-flex",
 			alignItems: "center",
 			maxWidth: "100%",
-			border: "1px solid transparent",
-			transition: "background-color .2s ease, color .2s ease"
+			border: "1px solid transparent"
 		},
 		variants: {
 			...tagVariant(c, "primary"),
@@ -1446,13 +1479,25 @@ var buildComponents = (c) => ({
 			ghost: {
 				backgroundColor: "transparent",
 				color: c["on-background"],
-				"&.tone-solid": {
+				"&.tag-selected": {
 					backgroundColor: c["surface-variant"],
 					color: c["on-surface-variant"]
 				},
+				"&.tag-interactive:hover": { filter: "brightness(0.95)" },
+				"&.tone-solid": {
+					backgroundColor: c["surface-variant"],
+					color: c["on-surface-variant"],
+					"&.tag-selected": { filter: "brightness(0.9)" },
+					"&.tag-selected.tag-interactive:hover": { filter: "brightness(0.85)" }
+				},
 				"&.tone-outline": {
 					backgroundColor: "transparent",
-					borderColor: c.outline
+					borderColor: c.outline,
+					"&.tag-selected": {
+						backgroundColor: c["surface-variant"],
+						color: c["on-surface-variant"],
+						borderColor: c.outline
+					}
 				}
 			},
 			disabled: {
@@ -1472,20 +1517,31 @@ var buildComponents = (c) => ({
 			sm: {
 				height: 20,
 				fontSize: 12,
-				padding: "0 8px"
+				paddingInline: 8
 			},
 			md: {
 				height: 24,
 				fontSize: 13,
-				padding: "0 10px"
+				paddingInline: 10
 			},
 			lg: {
 				height: 32,
 				fontSize: 15,
-				padding: "0 12px"
+				paddingInline: 12
 			}
 		}
 	},
+	tagGroup: {
+		options: {
+			gap: "xs",
+			rowGap: "xs"
+		},
+		fixed: {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "center"
+		}
+	},
 	tagInput: { options: {
 		chipGap: "xs",
 		chipSize: "md",
@@ -1501,8 +1557,8 @@ var buildComponents = (c) => ({
 			dayBorderRadius: "max",
 			typeface: "label",
 			gap: "xxs",
-			navPrevSymbol: "chevron_left",
-			navNextSymbol: "chevron_right",
+			navPrevIcon: "chevronLeft",
+			navNextIcon: "chevronRight",
 			weekdayFormat: "short",
 			showOutsideDays: false,
 			todayStyle: "outline"
@@ -1541,13 +1597,13 @@ var buildComponents = (c) => ({
 		descriptionColor: "on-primary-surface-variant"
 	} },
 	dateInput: { options: {
-		toggleSymbol: "calendar_month",
+		toggleIcon: "calendar",
 		popupShadow: "menu",
 		popupBorderRadius: "xs",
 		popupColor: "primary-surface"
 	} },
 	timeInput: { options: {
-		toggleSymbol: "schedule",
+		toggleIcon: "clock",
 		listColor: "primary-surface",
 		listShadow: "menu",
 		listBorderRadius: "xs",
@@ -1561,15 +1617,15 @@ var buildComponents = (c) => ({
 	button: {
 		options: {
 			borderRadius: "max",
-			typeface: "button"
+			typeface: "button",
+			motion: "control"
 		},
 		fixed: {
 			position: "relative",
 			overflow: "hidden",
 			outline: "0",
 			border: "0",
-			cursor: "pointer",
-			transition: "all 0.28s ease"
+			cursor: "pointer"
 		},
 		variantOptions: {
 			primary: { focusColor: "primary" },
@@ -1650,7 +1706,10 @@ var buildComponents = (c) => ({
 		}
 	},
 	iconButton: {
-		options: { borderRadius: "max" },
+		options: {
+			borderRadius: "max",
+			motion: "control"
+		},
 		variantOptions: {
 			primary: { focusColor: "primary" },
 			secondary: { focusColor: "secondary" },
@@ -1727,6 +1786,13 @@ var buildComponents = (c) => ({
 			}
 		}
 	},
+	inlineButton: { options: {
+		linkColor: "primary",
+		underline: false,
+		underlineOnHover: true,
+		underlineOffset: "0.15em",
+		gap: "xxs"
+	} },
 	progressGauge: {
 		fixed: { textFill: c["on-background"] },
 		variants: {
@@ -1762,7 +1828,8 @@ var buildComponents = (c) => ({
 		options: { borderRadius: "xs" },
 		fixed: {
 			overflow: "hidden",
-			backgroundColor: c.background
+			backgroundColor: c.background,
+			color: c["on-background"]
 		}
 	},
 	cardHeader: {
@@ -1798,6 +1865,7 @@ var buildComponents = (c) => ({
 		placeholderColor: "disabled"
 	} },
 	dataTable: { options: {
+		motion: "control",
 		color: "primary-surface",
 		border: "light",
 		borderRadius: "sm",
@@ -1861,7 +1929,7 @@ var buildComponents = (c) => ({
 		tooltipTextColor: "on-inverse-surface",
 		tooltipShadow: "menu",
 		tooltipBorderRadius: "xs",
-		transitionMs: 120
+		motion: "snap"
 	} },
 	skeleton: { options: {
 		color: "surface-variant",
@@ -1910,6 +1978,7 @@ var buildComponents = (c) => ({
 		}
 	},
 	tooltip: { options: {
+		motion: "notification",
 		border: void 0,
 		borderRadius: "xs",
 		shadow: "raised",
@@ -1924,7 +1993,7 @@ var buildComponents = (c) => ({
 		padding: "16px",
 		headerTypeface: "title-small",
 		typeface: "label",
-		closeSymbol: "close",
+		closeIcon: "close",
 		arrowSize: 8,
 		offset: 12,
 		scrimColor: "rgba(0, 0, 0, 0.45)",