@volverjs/style 0.1.2-beta.8 → 0.1.2

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

@@ -5,6 +5,7 @@ $vv-input-text: (
 	margin-bottom: var(--input-gap),
 	font-size: var(--input-font-size),
 	line-height: var(--input-line-height),
+	min-width: var(--input-min-width),
 	element: (
 		label: (
 			_alias: '> label',
@@ -25,7 +26,8 @@ $vv-input-text: (
 			overflow: hidden,
 			background-color: var(--input-background-color),
 			will-change: background-color,
-			transition: background-color 0.3s ease-in-out,
+			transition: var(--transition-colors),
+			min-height: var(--spacing-50),
 			pseudo: (
 				before: (
 					position: absolute,
@@ -41,7 +43,7 @@ $vv-input-text: (
 					transform: scaleX(0),
 					transform-origin: left,
 					will-change: transform,
-					transition: transform 0.3s ease-in-out,
+					transition: var(--transition-transform),
 				),
 			),
 			state: (
@@ -63,9 +65,11 @@ $vv-input-text: (
 			display: block,
 			flex: 1,
 			color: var(--input-color),
-			[padding]: var(--input-padding-top) var(--input-padding-right)
-				var(--input-padding-bottom) var(--input-padding-left),
-			min-height: var(--spacing-50),
+			[margin-block]: var(--input-spacing-top) var(--input-spacing-bottom),
+			[padding-inline]: var(--input-spacing-left)
+				var(--input-spacing-right),
+			min-width: 0,
+			block-size: calc(var(--input-line-height) * var(--input-font-size)),
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
@@ -78,19 +82,16 @@ $vv-input-text: (
 					opacity: 0,
 				),
 				search-cancel-button: (
-					display: none,
+					-webkit-appearance: none,
+					opacity: 0,
 				),
 				color-swatch-wrapper: (
-					display: block,
-					border: none,
-					height: 100%,
-					padding: 0,
+					padding: 1px,
 				),
 				color-swatch: (
-					display: block,
-					border: none,
 					height: var(--spacing-20),
 					border-radius: var(--spacing-4),
+					padding: 0,
 				),
 				outer-spin-button: (
 					display: none,
@@ -98,6 +99,12 @@ $vv-input-text: (
 				inner-spin-button: (
 					display: none,
 				),
+				datetime-edit-fields-wrapper: (
+					padding: 0,
+				),
+				datetime-edit-day-field: (
+					padding: 0,
+				),
 			),
 			state: (
 				disabled: (
@@ -114,35 +121,52 @@ $vv-input-text: (
 		),
 		icon: (
 			_alias: ':where(svg, [data-icon])',
-			margin: var(--input-padding-top) var(--input-padding-right)
-				var(--input-padding-bottom) var(--input-padding-left),
-			position: var(--input-icon-position),
+			margin: var(--input-spacing-top) var(--input-spacing-right)
+				var(--input-spacing-bottom) var(--input-spacing-left),
 			width: var(--input-icon-width),
 			height: var(--input-icon-height),
 			padding: var(--input-icon-padding),
+		),
+		icon-left: (
+			_alias: '> div > :where(svg, [data-icon])',
+			position: var(--input-icon-position),
 			pointer-events: var(--input-icon-pointer-events),
 		),
 		icon-right: (
 			_alias: 'input + :where(svg, [data-icon])',
+			position: var(--input-icon-position),
+			pointer-events: var(--input-icon-pointer-events),
 			right: 0,
 		),
 		actions-group: (
 			display: flex,
 			flex-direction: column,
-			position: absolute,
-			right: 0,
-			top: 0,
-			bottom: var(--spacing-px),
+			height: var(--input-min-height),
+		),
+		action: (
+			cursor: pointer,
+			state: (
+				focus-visible: (
+					text-shadow: 0 1px 0 var(--color-gray-darken-5),
+				),
+			),
 		),
 		action-chevron: (
 			flex: 1,
-			width: calc(1em + var(--spacing-sm) * 2),
+			width:
+				calc(
+					var(--input-icon-width) + var(--input-spacing-left) +
+						var(--input-spacing-right)
+				),
 			background-position: center var(--spacing-2),
 			background-size: var(--text-14) auto,
 			background-repeat: no-repeat,
 			background-image: var(--bg-chevron),
 			cursor: pointer,
 			state: (
+				focus-visible: (
+					background-color: var(--color-surface-3),
+				),
 				hover: (
 					background-color: var(--color-surface-4),
 				),
@@ -166,13 +190,23 @@ $vv-input-text: (
 			overflow: var(--input-hint-overflow),
 			max-width: var(--input-hint-max-width),
 		),
+		limit: (
+			[padding-right]: var(--input-spacing-right),
+			font-size: var(--input-hint-font-size),
+			color: var(--input-hint-color),
+		),
 	),
 	modifier: (
 		icon-left: (
-			--input-padding-left: calc(var(--spacing-sm) * 2 + 1em),
+			--input-spacing-left: calc(var(--spacing-sm) * 2 + 1em),
 		),
 		icon-right: (
-			--input-padding-right: calc(var(--spacing-sm) * 2 + 1em),
+			--input-spacing-right: calc(var(--spacing-sm) * 2 + 1em),
+			element: (
+				limit: (
+					margin-left: calc((var(--spacing-sm) + 1em) * -1),
+				),
+			),
 		),
 		valid: (
 			element: (
@@ -187,6 +221,9 @@ $vv-input-text: (
 				hint: (
 					color: var(--input-valid-color),
 				),
+				limit: (
+					color: var(--input-valid-color),
+				),
 				icon-right: (
 					color: var(--input-valid-color),
 				),
@@ -205,6 +242,9 @@ $vv-input-text: (
 				hint: (
 					color: var(--input-invalid-color),
 				),
+				limit: (
+					color: var(--input-invalid-color),
+				),
 				icon-right: (
 					color: var(--input-invalid-color),
 				),
@@ -219,40 +259,46 @@ $vv-input-text: (
 							background: var(--color-brand-lighten-5),
 						),
 						after: (
-							animation: var(--animate-indeterminate),
+							animation: var(--animation-indeterminate),
 						),
 					),
 				),
 			),
 		),
 		floating: (
-			[margin-left]: var(--input-padding-left),
-			[margin-right]: var(--input-padding-right),
+			[margin-left]: var(--input-spacing-left),
+			[margin-right]: var(--input-spacing-right),
 			element: (
 				wrapper: (
-					[margin-left]: calc(var(--input-padding-left) * -1),
-					[margin-right]: calc(var(--input-padding-right) * -1),
+					[margin-left]: calc(var(--input-spacing-left) * -1),
+					[margin-right]: calc(var(--input-spacing-right) * -1),
 				),
 				hint: (
-					[margin-left]: calc(var(--input-padding-left) * -1),
-					[margin-right]: calc(var(--input-padding-right) * -1),
+					[margin-left]: calc(var(--input-spacing-left) * -1),
+					[margin-right]: calc(var(--input-spacing-right) * -1),
 				),
 				label: (
 					position: absolute,
 					z-index: 1,
+					display: flex,
+					align-items: center,
+					min-height: var(--input-min-height),
 					pointer-events: none,
 					font-size: inherit,
-					[padding-top]: var(--input-padding-top),
-					[padding-bottom]: var(--input-padding-bottom),
+					[padding-top]: var(--input-spacing-top),
+					[padding-bottom]: var(--input-spacing-bottom),
 					padding-inline: 0,
 					margin: 0,
 					will-change: 'transform',
-					transform-origin: left,
-					transition: all 0.3s ease-in-out,
+					transition: var(--transition-all),
 				),
 				input: (
+					will-change: 'transform',
+					transition: var(--transition-all),
 					pseudo: (
 						placeholder: (
+							will-change: 'opacity',
+							transition: var(--transition-opacity),
 							opacity: 0,
 						),
 					),
@@ -262,11 +308,11 @@ $vv-input-text: (
 				focus-within: (
 					element: (
 						label: (
-							transform: translateY(-1.2ch),
+							transform: translateY(-0.8em),
 							font-size: var(--text-12),
 						),
 						input: (
-							transform: translateY(0.85ch),
+							transform: translateY(0.55em),
 							pseudo: (
 								placeholder: (
 									opacity: 1,
@@ -278,11 +324,11 @@ $vv-input-text: (
 				dirty: (
 					element: (
 						label: (
-							transform: translateY(-1.2ch),
+							transform: translateY(-0.8em),
 							font-size: var(--text-12),
 						),
 						input: (
-							transform: translateY(0.85ch),
+							transform: translateY(0.55em),
 							pseudo: (
 								placeholder: (
 									opacity: 1,

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

@@ -1,5 +1,6 @@
 $vv-nav: (
 	--nav-item-padding: var(--spacing-xs) var(--spacing-sm),
+	display: flex,
 	element: (
 		menu: (
 			_alias: 'ul',
@@ -12,29 +13,23 @@ $vv-nav: (
 			_alias: 'li',
 		),
 		heading-label: (
-			_alias: '[aria-hidden="true"]',
 			display: block,
 			font-weight: var(--font-semibold),
 			[padding]: var(--nav-item-padding),
 		),
 		item-label: (
 			_alias: 'li > a',
-			display: block,
+			display: flex,
+			align-items: center,
 			will-change: background-color color,
-			transition: all 0.3s ease-in-out,
-			border-radius: var(--rounded-md),
+			transition: var(--transition-all),
 			color: var(--color-word-3),
 			[padding]: var(--nav-item-padding),
 			state: (
 				hover: (
-					background-color: var(--color-surface-2),
 					color: var(--color-word-1),
 				),
-				active: (
-					background-color: var(--color-surface-3),
-				),
 				current: (
-					background-color: var(--color-surface-2),
 					color: var(--color-word-1),
 				),
 			),
@@ -48,10 +43,100 @@ $vv-nav: (
 		),
 	),
 	modifier: (
-		menu: (
-			font-size: 0.9em,
-			display: flex,
-			flex-direction: column,
+		sidebar: (
+			font-size: var(--text-14),
+			element: (
+				item-label: (
+					border-radius: var(--rounded-md),
+					state: (
+						hover: (
+							background-color: var(--color-surface-2),
+						),
+						active: (
+							background-color: var(--color-surface-3),
+						),
+						current: (
+							background-color: var(--color-surface-2),
+						),
+					),
+				),
+			),
+		),
+		aside: (
+			--nav-item-padding: var(--spacing-8) var(--spacing-12),
+			font-size: var(--text-12),
+			border-left: var(--border) solid var(--color-surface-3),
+			element: (
+				heading-label: (
+					text-transform: uppercase,
+				),
+				item-label: (
+					margin-left: calc(-1 * var(--border)),
+					border-left: var(--border) solid var(--color-surface-3),
+					border-radius: 0,
+					state: (
+						hover: (
+							border-color: var(--color-brand),
+						),
+						current: (
+							border-color: var(--color-brand),
+						),
+					),
+				),
+				divider: (
+					margin-block: var(--spacing-8),
+				),
+			),
+		),
+		tabs: (
+			element: (
+				menu: (
+					overflow: auto hidden,
+					overscroll-behavior-x: contain,
+					scroll-behavior: smooth,
+					scroll-snap-type: x mandatory,
+					flex-direction: row,
+					border-bottom: 1px solid var(--color-surface-4),
+					scrollbar-width: none,
+					pseudo: (
+						-webkit-scrollbar: (
+								width: 0,
+								height: 0,
+							),
+					),
+				),
+				item-label: (
+					border-bottom: 2px solid transparent,
+					margin-bottom: -1px,
+					white-space: nowrap,
+					state: (
+						hover: (
+							color: var(--color-brand),
+						),
+						current: (
+							color: var(--color-brand),
+							border-color: var(--color-brand),
+							background-color:
+								hsla(
+									var(--color-brand-hue)
+										var(--color-brand-saturation)
+										var(--color-brand-lightness) / 5%
+								),
+						),
+					),
+				),
+			),
+		),
+		full: (
+			element: (
+				item: (
+					flex: 1 1 0%,
+				),
+				item-label: (
+					display: block,
+					text-align: center,
+				),
+			),
 		),
 	),
 ) !default;

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

@@ -31,7 +31,7 @@ $vv-progress: (
 					var(--color-surface-2) 30%
 				)
 				top left/150% 150% no-repeat,
-			animation: var(--animate-progress-indeterminate),
+			animation: var(--animation-progress-indeterminate),
 			pseudo: (
 				progress-bar: (
 					background: transparent,

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

@@ -0,0 +1,3 @@
+@use 'vv-checkbox-group' as *;
+
+$vv-radio-group: $vv-checkbox-group !default;

package/src/settings/components/{_vv-input-radio.scss → _vv-radio.scss}

@@ -1,6 +1,6 @@
-$vv-input-radio: (
+$vv-radio: (
 	display: inline-flex,
-	flex-wrap: nowrap,
+	flex-wrap: wrap,
 	align-items: center,
 	cursor: pointer,
 	user-select: none,
@@ -8,22 +8,39 @@ $vv-input-radio: (
 	color: var(--input-color),
 	font-size: var(--input-font-size),
 	line-height: var(--input-line-height),
+	min-width: var(--input-min-width),
 	state: (
 		disabled: (
 			opacity: 0.3,
 			cursor: not-allowed,
 		),
+	),
+	modifier: (
 		readonly: (
 			opacity: 1,
 			cursor: default,
 			pointer-events: none,
 		),
+		valid: (
+			element: (
+				hint: (
+					color: var(--input-valid-color),
+				),
+			),
+		),
+		invalid: (
+			element: (
+				hint: (
+					color: var(--input-invalid-color),
+				),
+			),
+		),
 	),
 	element: (
 		input: (
 			_alias: "> input[type='radio']",
 			border: var(--spacing-2) solid var(--input-color),
-			width: var(--spacing-20),
+			min-width: var(--spacing-20),
 			height: var(--spacing-20),
 			border-radius: 50%,
 			margin: 0 var(--input-label-gap) 0 0,
@@ -40,7 +57,7 @@ $vv-input-radio: (
 					border-radius: 50%,
 					transform: translate(-50%, -50%) scale(0),
 					will-change: transform,
-					transition: transform 0.3s ease-in-out,
+					transition: var(--transition-transform),
 				),
 			),
 			state: (
@@ -57,5 +74,17 @@ $vv-input-radio: (
 				),
 			),
 		),
+		hint: (
+			_alias: '> small',
+			flex-basis: 100%,
+			display: var(--input-hint-display),
+			font-size: var(--input-hint-font-size),
+			color: var(--input-hint-color),
+			padding-top: var(--input-hint-gap),
+			white-space: var(--input-hint-white-space),
+			text-overflow: var(--input-hint-text-overflow),
+			overflow: var(--input-hint-overflow),
+			max-width: var(--input-hint-max-width),
+		),
 	),
 ) !default;

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

@@ -6,6 +6,7 @@ $vv-select: (
 	font-size: var(--input-font-size),
 	line-height: var(--input-line-height),
 	user-select: none,
+	min-width: var(--input-min-width),
 	element: (
 		label: (
 			_alias: '> label',
@@ -25,7 +26,7 @@ $vv-select: (
 			flex: 1,
 			background-color: var(--input-background-color),
 			will-change: background-color,
-			transition: background-color 0.3s ease-in-out,
+			transition: var(--transition-colors),
 			pseudo: (
 				before: (
 					position: absolute,
@@ -41,7 +42,7 @@ $vv-select: (
 					transform: scaleX(0),
 					transform-origin: left,
 					will-change: transform,
-					transition: transform 0.3s ease-in-out,
+					transition: var(--transition-transform),
 				),
 			),
 			state: (
@@ -68,26 +69,35 @@ $vv-select: (
 		),
 		input: (
 			_alias: 'select',
-			display: block,
+			display: flex,
+			align-items: center,
 			flex: 1,
 			color: var(--input-placeholder-color),
-			[padding]: var(--input-padding-top) var(--input-padding-right)
-				var(--input-padding-bottom) var(--input-padding-left),
-			min-height: var(--spacing-50),
+			[padding]: var(--input-spacing-top) var(--input-spacing-right)
+				var(--input-spacing-bottom) var(--input-spacing-left),
 			background-image: var(--bg-chevron),
 			background-repeat: no-repeat,
-			[background-position]: right var(--input-padding-right) center,
+			[background-position]: right var(--input-spacing-right) center,
 			background-size: 1em,
+			min-height: var(--spacing-50),
 			state: (
 				disabled: (
 					cursor: not-allowed,
 				),
 			),
+			pseudo: (
+				marker: (
+					display: none,
+				),
+				-webkit-details-marker: (
+						display: none,
+					),
+			),
 		),
 		icon: (
 			_alias: ':where(svg, [data-icon])',
-			margin: var(--input-padding-top) var(--input-padding-right)
-				var(--input-padding-bottom) var(--input-padding-left),
+			margin: var(--input-spacing-top) var(--input-spacing-right)
+				var(--input-spacing-bottom) var(--input-spacing-left),
 			position: var(--input-icon-position),
 			width: var(--input-icon-width),
 			height: var(--input-icon-height),
@@ -120,10 +130,10 @@ $vv-select: (
 			),
 		),
 		icon-left: (
-			--input-padding-left: calc(var(--spacing-sm) * 2 + 1em),
+			--input-spacing-left: calc(var(--spacing-sm) * 2 + 1em),
 		),
 		icon-right: (
-			--input-padding-right: calc(var(--spacing-sm) * 2 + 1em),
+			--input-spacing-right: calc(var(--spacing-sm) * 2 + 1em),
 		),
 		valid: (
 			element: (
@@ -170,36 +180,36 @@ $vv-select: (
 							background: var(--color-brand-lighten-5),
 						),
 						after: (
-							animation: var(--animate-indeterminate),
+							animation: var(--animation-indeterminate),
 						),
 					),
 				),
 			),
 		),
 		floating: (
-			[margin-left]: var(--input-padding-left),
-			[margin-right]: var(--input-padding-right),
+			[margin-left]: var(--input-spacing-left),
+			[margin-right]: var(--input-spacing-right),
 			element: (
 				wrapper: (
-					[margin-left]: calc(var(--input-padding-left) * -1),
-					[margin-right]: calc(var(--input-padding-right) * -1),
+					[margin-left]: calc(var(--input-spacing-left) * -1),
+					[margin-right]: calc(var(--input-spacing-right) * -1),
 				),
 				hint: (
-					[margin-left]: calc(var(--input-padding-left) * -1),
-					[margin-right]: calc(var(--input-padding-right) * -1),
+					[margin-left]: calc(var(--input-spacing-left) * -1),
+					[margin-right]: calc(var(--input-spacing-right) * -1),
 				),
 				label: (
 					position: absolute,
 					z-index: 1,
 					pointer-events: none,
 					font-size: inherit,
-					[padding-top]: var(--input-padding-top),
-					[padding-bottom]: var(--input-padding-bottom),
+					[padding-top]: var(--input-spacing-top),
+					[padding-bottom]: var(--input-spacing-bottom),
 					padding-inline: 0,
 					margin: 0,
 					will-change: 'transform',
 					transform-origin: left,
-					transition: all 0.3s ease-in-out,
+					transition: var(--transition-all),
 				),
 				input: (
 					pseudo: (
@@ -210,36 +220,17 @@ $vv-select: (
 				),
 			),
 			state: (
-				focus-within: (
-					element: (
-						label: (
-							transform: translateY(-1.2ch),
-							font-size: var(--text-12),
-						),
-						input: (
-							[padding-top]:
-								calc(var(--input-padding-top) + 0.85ch),
-							[padding-bottom]:
-								calc(var(--input-padding-bottom) - 0.85ch),
-							pseudo: (
-								placeholder: (
-									opacity: 1,
-								),
-							),
-						),
-					),
-				),
 				dirty: (
 					element: (
 						label: (
-							transform: translateY(-1.2ch),
+							transform: translateY(-0.8em),
 							font-size: var(--text-12),
 						),
 						input: (
 							[padding-top]:
-								calc(var(--input-padding-top) + 0.85ch),
+								calc(var(--input-spacing-top) + 0.55em),
 							[padding-bottom]:
-								calc(var(--input-padding-bottom) - 0.85ch),
+								calc(var(--input-spacing-bottom) - 0.55em),
 							pseudo: (
 								placeholder: (
 									opacity: 1,

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

@@ -0,0 +1,22 @@
+$vv-skeleton: (
+	--skeleton-background: var(--color-surface-2),
+	--skeleton-shine-color: var(--color-surface),
+	display: grid,
+	gap: calc(1em * (var(--leading-normal) - 1)),
+	element: (
+		item: (
+			[background]:
+				linear-gradient(
+					110deg,
+					var(--skeleton-background) 8%,
+					var(--skeleton-shine-color) 18%,
+					var(--skeleton-background) 33%
+				),
+			[color]: transparent,
+			background-size: 200% 100%,
+			height: 1em,
+			border-radius: var(--rounded),
+			animation: var(--animation-shine),
+		),
+	),
+) !default;