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

package/dist/esm/index.js

@@ -1030,6 +1030,16 @@ var BaseMotion = {
 		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",
@@ -1122,9 +1132,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,
@@ -1239,17 +1250,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,6 +1274,7 @@ var buildComponents = (c) => ({
 		height: 48,
 		textRole: "title-large",
 		textAlign: "center",
+		divider: void 0,
 		closeButtonIcon: "close",
 		closeButtonSize: "md"
 	} },
@@ -1558,6 +1571,15 @@ var buildComponents = (c) => ({
 			cursor: "pointer",
 			transition: "all 0.28s ease"
 		},
+		variantOptions: {
+			primary: { focusColor: "primary" },
+			secondary: { focusColor: "secondary" },
+			tertiary: { focusColor: "tertiary" },
+			warn: { focusColor: "warn" },
+			success: { focusColor: "success" },
+			disabled: { focusColor: "disabled" },
+			ghost: { focusColor: "primary" }
+		},
 		variants: {
 			ghost: {
 				backgroundColor: "transparent",
@@ -1629,30 +1651,45 @@ var buildComponents = (c) => ({
 	},
 	iconButton: {
 		options: { borderRadius: "max" },
+		variantOptions: {
+			primary: { focusColor: "primary" },
+			secondary: { focusColor: "secondary" },
+			tertiary: { focusColor: "tertiary" },
+			warn: { focusColor: "warn" },
+			success: { focusColor: "success" },
+			disabled: { focusColor: "disabled" },
+			ghost: { focusColor: "primary" }
+		},
 		variants: {
 			ghost: {
 				backgroundColor: "transparent",
-				color: "currentcolor"
+				color: "currentcolor",
+				"&:hover": { backgroundColor: "rgba(0,0,0,0.1)" }
 			},
 			primary: {
 				backgroundColor: c.primary,
-				color: c["on-primary"]
+				color: c["on-primary"],
+				"&:hover": { boxShadow: BaseShadows.raised }
 			},
 			secondary: {
 				backgroundColor: c.secondary,
-				color: c["on-secondary"]
+				color: c["on-secondary"],
+				"&:hover": { boxShadow: BaseShadows.raised }
 			},
 			tertiary: {
 				backgroundColor: c.tertiary,
-				color: c["on-tertiary"]
+				color: c["on-tertiary"],
+				"&:hover": { boxShadow: BaseShadows.raised }
 			},
 			warn: {
 				backgroundColor: c.warn,
-				color: c["on-warn"]
+				color: c["on-warn"],
+				"&:hover": { boxShadow: BaseShadows.raised }
 			},
 			success: {
 				backgroundColor: c.success,
-				color: c["on-success"]
+				color: c["on-success"],
+				"&:hover": { boxShadow: BaseShadows.raised }
 			},
 			disabled: {
 				backgroundColor: "transparent !important",
@@ -1908,7 +1945,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,
@@ -1924,6 +1961,10 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
 		...BaseMotion,
 		...motion
 	},
+	backdrops: {
+		...BaseBackdrops,
+		...backdrops
+	},
 	thicknesses: {
 		...BaseThicknesses,
 		...thicknesses