@volverjs/style 0.1.11 → 0.1.12-beta.1

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.11",
+  "version": "0.1.12-beta.1",
   "engines": {
     "node": ">= 12.x"
   },
@@ -43,12 +43,12 @@
     "@vueuse/head": "^1.1.26",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.14.0",
+    "eslint-plugin-vue": "^9.14.1",
     "glob": "^10.2.6",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-prism": "^2.3.0",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.24",
     "postcss-html": "^1.5.0",
     "postcss-preset-env": "^8.4.1",
     "prism-themes": "^1.9.0",
@@ -63,9 +63,9 @@
     "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard-scss": "^9.0.0",
-    "unplugin-auto-import": "^0.16.2",
-    "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.3.8",
+    "unplugin-auto-import": "^0.16.4",
+    "unplugin-vue-components": "^0.25.0",
+    "vite": "^4.3.9",
     "vite-plugin-css-export": "^2.0.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^1.6.0",
@@ -77,7 +77,7 @@
     "vite-ssg-sitemap": "^0.5.1",
     "vue": "^3.3.4",
     "vue-live": "^2.5.3",
-    "vue-router": "^4.2.1"
+    "vue-router": "^4.2.2"
   },
   "exports": {
     ".": "./dist/volver.css",

package/src/props/transitions.scss

@@ -48,39 +48,39 @@
 // keyframes
 @keyframes indeterminate {
 	0% {
-		transform: scaleX(0);
+		scale: 0 1;
 	}
 
 	50% {
-		transform: scaleX(1);
+		scale: 1;
 		transform-origin: left;
 	}
 
 	51% {
-		transform: scaleX(1);
+		scale: 1;
 		transform-origin: center right;
 	}
 
 	100% {
-		transform: scaleX(0);
+		scale: 0 1;
 		transform-origin: center right;
 	}
 }
 
 @keyframes spin {
 	from {
-		transform: rotate(0deg);
+		rotate: 0deg;
 	}
 
 	to {
-		transform: rotate(360deg);
+		rotate: 360deg;
 	}
 }
 
 @keyframes ping {
 	75%,
 	100% {
-		transform: scale(2);
+		scale: 2;
 		opacity: 0;
 	}
 }
@@ -99,12 +99,12 @@
 @keyframes bounce {
 	0%,
 	100% {
-		transform: translateY(-25%);
+		translate: 0 -25%;
 		animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
 	}
 
 	50% {
-		transform: translateY(0);
+		translate: 0;
 		animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
 	}
 }

package/src/settings/_input.scss

@@ -55,7 +55,7 @@ $input: (
 		padding-bottom: calc(var(--input-spacing-bottom) - 0.55em),
 		label: (
 			font-size: var(--text-12),
-			transform: translateY(-0.8em),
+			translate: 0 -0.8em,
 		),
 	),
 ) !default;

package/src/settings/_transitions.scss

@@ -6,7 +6,7 @@ $transition-property: (
 		'color, background-color, border-color, text-decoration-color, fill, stroke',
 	opacity: opacity,
 	shadow: box-shadow,
-	transform: transform,
+	transform: 'transform, scale, rotate, translate, skew',
 ) !default;
 
 // transition duration and transition delay

package/src/settings/components/_vv-accordion.scss

@@ -13,7 +13,7 @@ $vv-accordion: (
 					background-color: var(--color-surface-2),
 					pseudo: (
 						before: (
-							transform: rotate(0),
+							rotate: 0,
 						),
 					),
 				),
@@ -34,6 +34,7 @@ $vv-accordion: (
 			_alias: '> summary',
 			position: relative,
 			cursor: pointer,
+			user-select: none,
 			[padding-top]: var(--accordion-padding-top),
 			[padding-right]: var(--accordion-padding-right),
 			[padding-bottom]: var(--accordion-padding-bottom),
@@ -61,9 +62,9 @@ $vv-accordion: (
 					background-position: center,
 					background-size: 1em,
 					background-repeat: no-repeat,
-					will-change: transform,
+					will-change: rotate,
 					transition: var(--transition-transform),
-					transform: rotate(-90deg),
+					rotate: -90deg,
 				),
 				marker: (
 					display: none,
@@ -102,7 +103,7 @@ $vv-accordion: (
 						before: (
 							left: auto,
 							[right]: var(--accordion-padding-right),
-							transform: rotate(0def),
+							rotate: 0,
 						),
 					),
 				),
@@ -113,7 +114,7 @@ $vv-accordion: (
 						summary: (
 							pseudo: (
 								before: (
-									transform: rotate(-180deg),
+									rotate: -180deg,
 								),
 							),
 						),

package/src/settings/components/_vv-alert-group.scss

@@ -72,7 +72,7 @@ $vv-alert-group: (
 		top-middle: (
 			inset-block: 0 auto,
 			inset-inline: 50% auto,
-			transform: translateX(-50%),
+			translate: -50%,
 		),
 		top-end: (
 			inset-block: 0 auto,
@@ -80,18 +80,18 @@ $vv-alert-group: (
 		),
 		center-start: (
 			inset-block: 50% auto,
-			transform: translateY(-50%),
+			translate: 0 -50%,
 			inset-inline: 0 auto,
 		),
 		center-middle: (
 			inset-block: 50% auto,
 			inset-inline: 50% auto,
-			transform: translate(-50%, -50%),
+			translate: -50% -50%,
 		),
 		center-end: (
 			inset-block: 50% auto,
 			inset-inline: auto 0,
-			transform: translateY(-50%),
+			translate: 0 -50%,
 		),
 		bottom-start: (
 			inset-block: auto 0,
@@ -100,7 +100,7 @@ $vv-alert-group: (
 		bottom-middle: (
 			inset-block: auto 0,
 			inset-inline: 50% auto,
-			transform: translateX(-50%),
+			translate: -50%,
 		),
 		bottom-end: (
 			inset-block: auto 0,
@@ -119,9 +119,8 @@ $vv-alert-group: (
 					z-index: var(--z-notification-alert),
 				),
 				not-first: (
-					[transform]:
-						translateY(calc(-100% * (var(--alert-counter, 1) - 1)))
-						scale(calc(1 - 0.05 * (var(--alert-counter, 1) - 1))),
+					[translate]: 0 calc(-100% * (var(--alert-counter, 1) - 1)),
+					[scale]: calc(1 - 0.05 * (var(--alert-counter, 1) - 1)),
 					[z-index]:
 						calc(
 							var(--z-notification-alert) -
@@ -137,7 +136,8 @@ $vv-alert-group: (
 				hover: (
 					element: (
 						not-first: (
-							transform: none,
+							translate: 0,
+							scale: 1,
 							filter: none,
 						),
 					),
@@ -147,22 +147,18 @@ $vv-alert-group: (
 				reverse: (
 					element: (
 						not-first: (
-							[transform]:
-								translateY(
-									calc(100% * (var(--alert-counter, 1) - 1))
-								)
-								scale(
-									calc(
-										1 - 0.05 * (var(--alert-counter, 1) - 1)
-									)
-								),
+							[translate]: 0
+								calc(100% * (var(--alert-counter, 1) - 1)),
+							[scale]:
+								calc(1 - 0.05 * (var(--alert-counter, 1) - 1)),
 						),
 					),
 					state: (
 						hover: (
 							element: (
 								not-first: (
-									transform: none,
+									translate: 0,
+									scale: 1,
 								),
 							),
 						),

package/src/settings/components/_vv-alert.scss

@@ -152,73 +152,6 @@ $vv-alert: (
 				),
 			),
 		),
-		auto-close: (
-			element: (
-				close: (
-					background-color: var(--color-white),
-					border: var(--border) solid var(--color-white),
-					border-radius: 50%,
-					overflow: hidden,
-					opacity: var(--opacity-80),
-					background-image: none,
-					background-size: 70% auto,
-					inline-size: 1.1em,
-					block-size: 1.1em,
-					[animation]: fade-out var(--alert-duration) forwards,
-					pseudo: (
-						before: (
-							position: absolute,
-							top: 0,
-							width: 50%,
-							height: 100%,
-							transform-origin: 100% 50%,
-							background-color: var(--color-gray),
-							border-radius: 100% 0 0 100% / 50% 0 0 50%,
-							[animation]: spin var(--alert-duration) linear,
-						),
-						after: (
-							position: absolute,
-							top: 0,
-							width: 50%,
-							height: 100%,
-							background-color: var(--color-white),
-							border-radius: 100% 0 0 100% / 50% 0 0 50%,
-							[animation]: pie-masks var(--alert-duration)
-								steps(1, end),
-							opacity: var(--opacity-0),
-						),
-					),
-				),
-				close-mask: (
-					display: block,
-				),
-			),
-			state: (
-				hover: (
-					element: (
-						close-mask: (
-							opacity: var(--opacity-0),
-							animation: none,
-						),
-						close: (
-							border-radius: var(--rounded),
-							background-image: var(--bg-close),
-							animation: none,
-							pseudo: (
-								before: (
-									opacity: var(--opacity-0),
-									animation: none,
-								),
-								after: (
-									opacity: var(--opacity-0),
-									animation: none,
-								),
-							),
-						),
-					),
-				),
-			),
-		),
 		notification: (
 			padding: var(--spacing-0),
 			width: clamp(15dvw, 20rem, 80dvw),
@@ -330,6 +263,73 @@ $vv-alert: (
 				),
 			),
 		),
+		auto-close: (
+			element: (
+				close: (
+					background-color: var(--color-white),
+					border: var(--border) solid var(--color-white),
+					border-radius: 50%,
+					overflow: hidden,
+					opacity: var(--opacity-80),
+					background-image: none,
+					background-size: 70% auto,
+					inline-size: 1.1em,
+					block-size: 1.1em,
+					[animation]: fade-out var(--alert-duration) forwards,
+					pseudo: (
+						before: (
+							position: absolute,
+							top: 0,
+							width: 50%,
+							height: 100%,
+							transform-origin: 100% 50%,
+							background-color: var(--color-gray),
+							border-radius: 100% 0 0 100% / 50% 0 0 50%,
+							[animation]: spin var(--alert-duration) linear,
+						),
+						after: (
+							position: absolute,
+							top: 0,
+							width: 50%,
+							height: 100%,
+							background-color: var(--color-white),
+							border-radius: 100% 0 0 100% / 50% 0 0 50%,
+							[animation]: pie-masks var(--alert-duration)
+								steps(1, end),
+							opacity: var(--opacity-0),
+						),
+					),
+				),
+				close-mask: (
+					display: block,
+				),
+			),
+			state: (
+				hover: (
+					element: (
+						close-mask: (
+							opacity: var(--opacity-0),
+							animation: none,
+						),
+						close: (
+							border-radius: var(--rounded),
+							background-image: var(--bg-close),
+							animation: none,
+							pseudo: (
+								before: (
+									opacity: var(--opacity-0),
+									animation: none,
+								),
+								after: (
+									opacity: var(--opacity-0),
+									animation: none,
+								),
+							),
+						),
+					),
+				),
+			),
+		),
 	),
 	transition: (
 		fade-inline-end: (
@@ -338,11 +338,11 @@ $vv-alert: (
 			),
 			enter-from: (
 				opacity: var(--opacity-0),
-				transform: translateX(100%),
+				translate: 100%,
 			),
 			leave-to: (
 				opacity: var(--opacity-0),
-				transform: translateX(100%),
+				translate: 100%,
 			),
 		),
 		fade-inline-start: (
@@ -351,11 +351,11 @@ $vv-alert: (
 			),
 			enter-from: (
 				opacity: var(--opacity-0),
-				transform: translateX(-100%),
+				translate: -100%,
 			),
 			leave-to: (
 				opacity: var(--opacity-0),
-				transform: translateX(-100%),
+				translate: -100%,
 			),
 		),
 		fade-block-top: (
@@ -364,11 +364,11 @@ $vv-alert: (
 			),
 			enter-from: (
 				opacity: var(--opacity-0),
-				transform: translateY(-100%),
+				translate: 0 -100%,
 			),
 			leave-to: (
 				opacity: var(--opacity-0),
-				transform: translateY(-100%),
+				translate: 0 -100%,
 			),
 		),
 		fade-block-bottom: (
@@ -377,11 +377,11 @@ $vv-alert: (
 			),
 			enter-from: (
 				opacity: var(--opacity-0),
-				transform: translateY(100%),
+				translate: 0 100%,
 			),
 			leave-to: (
 				opacity: var(--opacity-0),
-				transform: translateY(100%),
+				translate: 0 100%,
 			),
 		),
 		fade: (

package/src/settings/components/_vv-avatar.scss

@@ -30,7 +30,7 @@ $vv-avatar: (
 			position: absolute,
 			top: 0,
 			right: 0,
-			transform: translate(50%, -33.3%),
+			translate: 50% -33.3%,
 			box-shadow: var(--shadow-sm),
 		),
 		badge-bottom: (
@@ -38,7 +38,7 @@ $vv-avatar: (
 			position: absolute,
 			bottom: 0,
 			right: 0,
-			transform: translate(50%, 33.3%),
+			translate: 50% 33.3%,
 			box-shadow: var(--shadow-sm),
 		),
 		image: (

package/src/settings/components/_vv-breadcrumb.scss

@@ -49,7 +49,7 @@ $vv-breadcrumb: (
 					background-position: center,
 					background-size: 1em,
 					background-repeat: no-repeat,
-					transform: rotate(-90deg),
+					rotate: -90deg,
 				),
 			),
 		),

package/src/settings/components/_vv-checkbox.scss

@@ -93,7 +93,7 @@ $vv-checkbox: (
 							background-image: none,
 							pseudo: (
 								after: (
-									transform: translateX(50%),
+									translate: 50%,
 								),
 							),
 						),
@@ -102,7 +102,7 @@ $vv-checkbox: (
 							background-color: var(--color-brand),
 							pseudo: (
 								after: (
-									transform: translateX(100%),
+									translate: 100%,
 								),
 							),
 						),

package/src/settings/components/_vv-dialog.scss

@@ -83,7 +83,7 @@ $vv-dialog: (
 				opacity: var(--opacity-0),
 				element: (
 					wrapper: (
-						transform: translateY(100%),
+						translate: 0 100%,
 					),
 				),
 			),
@@ -91,7 +91,7 @@ $vv-dialog: (
 				opacity: var(--opacity-0),
 				element: (
 					wrapper: (
-						transform: translateY(-100%),
+						translate: 0 -100%,
 					),
 				),
 			),
@@ -109,7 +109,7 @@ $vv-dialog: (
 				opacity: var(--opacity-0),
 				element: (
 					wrapper: (
-						transform: translateX(-100%),
+						translate: -100%,
 					),
 				),
 			),
@@ -117,7 +117,7 @@ $vv-dialog: (
 				opacity: var(--opacity-0),
 				element: (
 					wrapper: (
-						transform: translateX(100%),
+						translate: 100%,
 					),
 				),
 			),
@@ -135,7 +135,7 @@ $vv-dialog: (
 				opacity: var(--opacity-0),
 				element: (
 					wrapper: (
-						transform: scale(0%),
+						scale: 0,
 					),
 				),
 			),

package/src/settings/components/_vv-dropdown.scss

@@ -179,7 +179,7 @@ $vv-dropdown: (
 				opacity: var(--opacity-0),
 				element: (
 					list: (
-						transform: translateY(100%),
+						translate: 0 100%,
 					),
 				),
 			),
@@ -187,7 +187,7 @@ $vv-dropdown: (
 				opacity: var(--opacity-0),
 				element: (
 					list: (
-						transform: translateY(100%),
+						translate: 0 100%,
 					),
 				),
 			),

package/src/settings/components/_vv-input-text.scss

@@ -39,7 +39,7 @@ $vv-input-text: (
 					height: var(--spacing-2),
 					inset: auto 0 0 0,
 					background: var(--color-brand),
-					transform: scaleX(0),
+					scale: 0 1,
 					transform-origin: left,
 					will-change: transform,
 					transition: var(--transition-transform),
@@ -53,7 +53,7 @@ $vv-input-text: (
 					background-color: var(--input-background-color-focus),
 					pseudo: (
 						after: (
-							transform: scaleX(1),
+							scale: 1,
 						),
 					),
 				),
@@ -194,7 +194,7 @@ $vv-input-text: (
 			background-image: var(--bg-chevron),
 		),
 		action-chevron-up: (
-			transform: rotate(180deg),
+			rotate: 180deg,
 		),
 		hint: (
 			_alias: '> small',
@@ -240,7 +240,7 @@ $vv-input-text: (
 					pseudo: (
 						after: (
 							background: var(--input-valid-color),
-							transform: scaleX(1),
+							scale: 1,
 						),
 					),
 				),
@@ -261,7 +261,7 @@ $vv-input-text: (
 					pseudo: (
 						after: (
 							background: var(--input-invalid-color),
-							transform: scaleX(1),
+							scale: 1,
 						),
 					),
 				),
@@ -329,7 +329,7 @@ $vv-input-text: (
 				focus-within: (
 					element: (
 						label: (
-							transform: var(--input-floating-label-transform),
+							translate: var(--input-floating-label-translate),
 							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
@@ -347,7 +347,7 @@ $vv-input-text: (
 				dirty: (
 					element: (
 						label: (
-							transform: var(--input-floating-label-transform),
+							translate: var(--input-floating-label-translate),
 							font-size: var(--input-floating-label-font-size),
 						),
 						input: (

package/src/settings/components/_vv-radio.scss

@@ -57,7 +57,8 @@ $vv-radio: (
 					background-color: var(--input-color),
 					inset: 50% 50%,
 					border-radius: 50%,
-					transform: translate(-50%, -50%) scale(0),
+					translate: -50% -50%,
+					scale: 0,
 					will-change: transform,
 					transition: var(--transition-transform),
 				),
@@ -66,7 +67,7 @@ $vv-radio: (
 				checked: (
 					pseudo: (
 						after: (
-							transform: translate(-50%, -50%) scale(1),
+							scale: 1,
 						),
 					),
 				),