@uni-design-system/uni-core 10.3.0 → 11.0.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",
@@ -1028,8 +1032,22 @@ var BaseMotion = {
 	control: {
 		duration: 300,
 		easing: "ease"
+	},
+	snap: {
+		duration: 120,
+		easing: "ease"
 	}
 };
+/**
+* The one wash every modal surface lays over the page it covers. Dialog and
+* drawer both point at `scrim` by name, so a theme redresses them together —
+* before this they owned a `backdrop` blob each and had drifted apart, the
+* dialog washing the page white and blurred while the drawer dimmed it dark.
+*/
+var BaseBackdrops = { scrim: {
+	background: "rgba(255, 255, 255, 0.6)",
+	backdropFilter: "blur(2px)"
+} };
 var BaseRadii = {
 	none: "none",
 	xxs: "4px",
@@ -1104,7 +1122,7 @@ var buildComponents = (c) => ({
 		typeface: "label",
 		color: "on-background-variant",
 		currentColor: "on-background",
-		separatorSymbol: "chevron_right",
+		separatorIcon: "chevronRight",
 		gap: "xs"
 	} },
 	appBar: { options: {
@@ -1122,9 +1140,10 @@ var buildComponents = (c) => ({
 		divider: "light",
 		elevation: "menu",
 		padding: "md",
-		backdrop: { background: "rgba(0, 0, 0, 0.4)" },
+		backdrop: "scrim",
 		scrim: true,
-		background: "solid"
+		background: "solid",
+		motion: "panel"
 	} },
 	drawerHeader: { options: {
 		color: void 0,
@@ -1151,7 +1170,7 @@ var buildComponents = (c) => ({
 		options: {
 			borderRadius: "max",
 			typeface: "subtitle-2",
-			fallbackSymbol: "person"
+			fallbackIcon: "profile"
 		},
 		variants: {
 			primary: {
@@ -1208,8 +1227,8 @@ var buildComponents = (c) => ({
 		ringWidth: 2
 	} },
 	searchInput: { options: {
-		searchSymbol: "search",
-		clearSymbol: "close",
+		searchIcon: "search",
+		clearIcon: "close",
 		listColor: "primary-surface",
 		listShadow: "menu",
 		listBorderRadius: "xs",
@@ -1218,6 +1237,7 @@ var buildComponents = (c) => ({
 	} },
 	checkbox: {
 		options: {
+			motion: "control",
 			size: 20,
 			boxColor: "surface",
 			borderRadius: 2,
@@ -1239,17 +1259,18 @@ var buildComponents = (c) => ({
 		color: "primary-surface",
 		border: "quaternary",
 		padding: "sm",
+		bodyPadding: void 0,
+		inset: "lg",
 		elevation: "dialog",
-		backdrop: {
-			background: "rgba(255, 255, 255, 0.6)",
-			backdropFilter: "blur(2px)"
-		}
+		backdrop: "scrim",
+		motion: "panel"
 	} },
 	dialogButtons: { options: {
 		gap: "md",
 		padding: "md",
 		paddingBottom: "lg",
 		justifyContent: "center",
+		divider: void 0,
 		confirmButtonVariant: "primary",
 		cancelButtonVariant: "warn",
 		buttonSize: "lg",
@@ -1262,9 +1283,26 @@ var buildComponents = (c) => ({
 		height: 48,
 		textRole: "title-large",
 		textAlign: "center",
+		divider: void 0,
 		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",
@@ -1292,7 +1330,7 @@ var buildComponents = (c) => ({
 			typeface: "label",
 			textColor: void 0,
 			hoverColor: "primary-container",
-			activeSymbol: "check",
+			activeIcon: "check",
 			motion: "control"
 		},
 		variants: {
@@ -1316,7 +1354,7 @@ var buildComponents = (c) => ({
 		maxWidth: "38ch",
 		offset: 7,
 		arrowSize: 8,
-		closeSymbol: "close",
+		closeIcon: "close",
 		headerTypeface: "title-small",
 		tooltipPadding: "4px 8px",
 		tooltipOpenDelay: 500,
@@ -1324,12 +1362,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",
@@ -1388,6 +1420,7 @@ var buildComponents = (c) => ({
 		}
 	},
 	tabs: { options: {
+		motion: "snap",
 		typeface: "title-small",
 		textColor: "on-surface-variant",
 		activeTextColor: "primary",
@@ -1415,14 +1448,14 @@ var buildComponents = (c) => ({
 			typeface: "tag",
 			gap: "xs",
 			removeIcon: "close",
-			selectedIcon: "check"
+			selectedIcon: "check",
+			motion: "control"
 		},
 		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"),
@@ -1488,8 +1521,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"
@@ -1528,13 +1561,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",
@@ -1548,15 +1581,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" },
@@ -1637,7 +1670,10 @@ var buildComponents = (c) => ({
 		}
 	},
 	iconButton: {
-		options: { borderRadius: "max" },
+		options: {
+			borderRadius: "max",
+			motion: "control"
+		},
 		variantOptions: {
 			primary: { focusColor: "primary" },
 			secondary: { focusColor: "secondary" },
@@ -1714,6 +1750,13 @@ var buildComponents = (c) => ({
 			}
 		}
 	},
+	inlineButton: { options: {
+		linkColor: "primary",
+		underline: false,
+		underlineOnHover: true,
+		underlineOffset: "0.15em",
+		gap: "xxs"
+	} },
 	progressGauge: {
 		fixed: { textFill: c["on-background"] },
 		variants: {
@@ -1749,7 +1792,8 @@ var buildComponents = (c) => ({
 		options: { borderRadius: "xs" },
 		fixed: {
 			overflow: "hidden",
-			backgroundColor: c.background
+			backgroundColor: c.background,
+			color: c["on-background"]
 		}
 	},
 	cardHeader: {
@@ -1785,6 +1829,7 @@ var buildComponents = (c) => ({
 		placeholderColor: "disabled"
 	} },
 	dataTable: { options: {
+		motion: "control",
 		color: "primary-surface",
 		border: "light",
 		borderRadius: "sm",
@@ -1848,7 +1893,7 @@ var buildComponents = (c) => ({
 		tooltipTextColor: "on-inverse-surface",
 		tooltipShadow: "menu",
 		tooltipBorderRadius: "xs",
-		transitionMs: 120
+		motion: "snap"
 	} },
 	skeleton: { options: {
 		color: "surface-variant",
@@ -1897,6 +1942,7 @@ var buildComponents = (c) => ({
 		}
 	},
 	tooltip: { options: {
+		motion: "notification",
 		border: void 0,
 		borderRadius: "xs",
 		shadow: "raised",
@@ -1911,7 +1957,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)",
@@ -1932,7 +1978,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, motion, typography, borders, thicknesses, spacing, components }) => ({
+var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, motion, backdrops, typography, borders, thicknesses, spacing, components }) => ({
 	id,
 	name,
 	colors,
@@ -1948,6 +1994,10 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
 		...BaseMotion,
 		...motion
 	},
+	backdrops: {
+		...BaseBackdrops,
+		...backdrops
+	},
 	thicknesses: {
 		...BaseThicknesses,
 		...thicknesses