@volverjs/style 0.1.5 → 0.1.7

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

@@ -10,6 +10,7 @@ $vv-input-text: (
 		label: (
 			_alias: '> label',
 			display: var(--input-label-display),
+			align-items: var(--input-label-align-items),
 			font-size: var(--input-label-font-size),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
@@ -27,7 +28,6 @@ $vv-input-text: (
 			background-color: var(--input-background-color),
 			will-change: background-color,
 			transition: var(--transition-colors),
-			min-height: var(--input-min-height),
 			pseudo: (
 				before: (
 					position: absolute,
@@ -60,19 +60,28 @@ $vv-input-text: (
 				),
 			),
 		),
+		inner: (
+			position: relative,
+			display: flex,
+			flex: 1,
+		),
 		input: (
 			_alias: 'input',
-			display: block,
+			display: flex,
 			flex: 1,
+			align-items: center,
 			color: var(--input-color),
-			[margin-block]: var(--input-spacing-top) var(--input-spacing-bottom),
+			line-height: var(--leading-normal),
+			[padding-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)),
+			min-height: var(--input-min-height),
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
+					text-overflow: ellipsis,
 				),
 				calendar-picker-indicator: (
 					position: absolute,
@@ -99,6 +108,9 @@ $vv-input-text: (
 				inner-spin-button: (
 					display: none,
 				),
+				datetime-edit: (
+					padding: 0,
+				),
 				datetime-edit-fields-wrapper: (
 					padding: 0,
 				),
@@ -115,27 +127,29 @@ $vv-input-text: (
 				),
 			),
 		),
+		input-before: (
+			display: flex,
+			padding-left: var(--input-spacing-left),
+		),
+		input-after: (
+			display: flex,
+			padding-right: var(--input-spacing-right),
+		),
 		number: (
 			_alias: 'input[type="number"]',
 			-moz-appearance: textfield,
 		),
 		icon: (
-			_alias: ':where(svg, [data-icon])',
-			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),
+			width: var(--input-icon-width),
+			height: var(--input-min-height),
+			margin: var(--input-icon-margin),
 			pointer-events: var(--input-icon-pointer-events),
 		),
-		icon-right: (
+		icon-after: (
 			_alias: 'input + :where(svg, [data-icon])',
 			position: var(--input-icon-position),
-			pointer-events: var(--input-icon-pointer-events),
 			right: 0,
 		),
 		actions-group: (
@@ -197,10 +211,10 @@ $vv-input-text: (
 		),
 	),
 	modifier: (
-		icon-left: (
+		icon-before: (
 			--input-spacing-left: calc(var(--spacing-sm) * 2 + 1em),
 		),
-		icon-right: (
+		icon-after: (
 			--input-spacing-right: calc(var(--spacing-sm) * 2 + 1em),
 			element: (
 				limit: (
@@ -224,7 +238,7 @@ $vv-input-text: (
 				limit: (
 					color: var(--input-valid-color),
 				),
-				icon-right: (
+				icon-after: (
 					color: var(--input-valid-color),
 				),
 			),
@@ -245,7 +259,7 @@ $vv-input-text: (
 				limit: (
 					color: var(--input-invalid-color),
 				),
-				icon-right: (
+				icon-after: (
 					color: var(--input-invalid-color),
 				),
 			),
@@ -306,11 +320,13 @@ $vv-input-text: (
 				focus-within: (
 					element: (
 						label: (
-							transform: translateY(-0.8em),
-							font-size: var(--text-12),
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
-							transform: translateY(0.55em),
+							[padding-top]: var(--input-floating-padding-top),
+							[padding-bottom]:
+								var(--input-floating-padding-bottom),
 							pseudo: (
 								placeholder: (
 									opacity: var(--opacity-100),
@@ -322,11 +338,13 @@ $vv-input-text: (
 				dirty: (
 					element: (
 						label: (
-							transform: translateY(-0.8em),
-							font-size: var(--text-12),
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
-							transform: translateY(0.55em),
+							[padding-top]: var(--input-floating-padding-top),
+							[padding-bottom]:
+								var(--input-floating-padding-bottom),
 							pseudo: (
 								placeholder: (
 									opacity: var(--opacity-100),

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

@@ -5,12 +5,13 @@ $vv-select: (
 	margin-bottom: var(--input-gap),
 	font-size: var(--input-font-size),
 	line-height: var(--input-line-height),
-	user-select: none,
 	min-width: var(--input-min-width),
+	user-select: none,
 	element: (
 		label: (
 			_alias: '> label',
 			display: var(--input-label-display),
+			align-items: var(--input-label-align-items),
 			font-size: var(--input-label-font-size),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
@@ -67,19 +68,30 @@ $vv-select: (
 				),
 			),
 		),
+		inner: (
+			position: relative,
+			display: flex,
+			flex: 1,
+			width: 100%,
+		),
 		input: (
 			_alias: 'select',
 			display: flex,
 			align-items: center,
-			flex: 1,
+			flex-grow: 1,
+			flex-shrink: 1,
+			flex-wrap: wrap,
+			min-width: 0,
 			color: var(--input-placeholder-color),
-			[padding]: var(--input-spacing-top) var(--input-spacing-right)
+			[padding]: var(--input-spacing-top)
+				calc(var(--input-spacing-right) * 2 + 1em)
 				var(--input-spacing-bottom) var(--input-spacing-left),
 			background-image: var(--bg-chevron),
 			background-repeat: no-repeat,
 			[background-position]: right var(--input-spacing-right) center,
 			background-size: 1em,
 			min-height: var(--input-min-height),
+			gap: 0.5ch,
 			state: (
 				disabled: (
 					cursor: not-allowed,
@@ -94,17 +106,26 @@ $vv-select: (
 					),
 			),
 		),
+		input-before: (
+			display: flex,
+			padding-left: var(--input-spacing-left),
+		),
+		input-after: (
+			display: flex,
+			padding-right: var(--input-spacing-right),
+		),
+		option: (
+			_alias: 'select > option',
+		),
 		icon: (
-			_alias: ':where(svg, [data-icon])',
-			margin: var(--input-spacing-top) var(--input-spacing-right)
-				var(--input-spacing-bottom) var(--input-spacing-left),
+			_alias: '> div > :where(svg, [data-icon])',
 			position: var(--input-icon-position),
 			width: var(--input-icon-width),
-			height: var(--input-icon-height),
-			padding: var(--input-icon-padding),
+			height: var(--input-min-height),
+			margin: var(--input-icon-margin),
 			pointer-events: var(--input-icon-pointer-events),
 		),
-		icon-right: (
+		icon-after: (
 			_alias: 'select + :where(svg, [data-icon])',
 			right: 0,
 		),
@@ -129,10 +150,40 @@ $vv-select: (
 				),
 			),
 		),
-		icon-left: (
+		multiple: (
+			element: (
+				wrapper: (
+					align-items: flex-start,
+				),
+				input: (
+					overflow: auto,
+					background-image: none,
+					padding: 0,
+				),
+				option: (
+					[padding]: var(--input-spacing-top)
+						var(--input-spacing-right) var(--input-spacing-bottom)
+						var(--input-spacing-left),
+					min-height: var(--input-min-height),
+					display: flex,
+					align-items: center,
+					color: var(--input-color),
+					state: (
+						checked: (
+							color: var(--color-brand),
+							background-color: var(--color-surface-brand),
+						),
+						disabled: (
+							color: var(--input-placeholder-color),
+						),
+					),
+				),
+			),
+		),
+		icon-before: (
 			--input-spacing-left: calc(var(--spacing-sm) * 2 + 1em),
 		),
-		icon-right: (
+		icon-after: (
 			--input-spacing-right: calc(var(--spacing-sm) * 2 + 1em),
 		),
 		valid: (
@@ -148,7 +199,7 @@ $vv-select: (
 				hint: (
 					color: var(--input-valid-color),
 				),
-				icon-right: (
+				icon-after: (
 					color: var(--input-valid-color),
 				),
 			),
@@ -166,7 +217,7 @@ $vv-select: (
 				hint: (
 					color: var(--input-invalid-color),
 				),
-				icon-right: (
+				icon-after: (
 					color: var(--input-invalid-color),
 				),
 			),
@@ -213,30 +264,37 @@ $vv-select: (
 					transition: var(--transition-all),
 				),
 				input: (
-					pseudo: (
-						placeholder: (
-							opacity: var(--opacity-0),
+					opacity: var(--opacity-0),
+				),
+			),
+			state: (
+				focus-within: (
+					element: (
+						label: (
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
+						),
+						input: (
+							[padding-top]: var(--input-floating-padding-top),
+							[padding-bottom]:
+								var(--input-floating-padding-bottom),
+							opacity: var(--opacity-100),
 						),
 					),
 				),
 			),
-			state: (
+			modifier: (
 				dirty: (
 					element: (
 						label: (
-							transform: translateY(-0.8em),
-							font-size: var(--text-12),
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
-							[padding-top]:
-								calc(var(--input-spacing-top) + 0.55em),
+							[padding-top]: var(--input-floating-padding-top),
 							[padding-bottom]:
-								calc(var(--input-spacing-bottom) - 0.55em),
-							pseudo: (
-								placeholder: (
-									opacity: var(--opacity-100),
-								),
-							),
+								var(--input-floating-padding-bottom),
+							opacity: var(--opacity-100),
 						),
 					),
 				),

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

@@ -10,6 +10,7 @@ $vv-textarea: (
 		label: (
 			_alias: '> label',
 			display: var(--input-label-display),
+			align-items: var(--input-label-align-items),
 			font-size: var(--input-label-font-size),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
@@ -25,6 +26,11 @@ $vv-textarea: (
 			font-size: var(--input-hint-font-size),
 			color: var(--input-hint-color),
 		),
+		inner: (
+			position: relative,
+			display: flex,
+			flex: 1,
+		),
 		wrapper: (
 			position: relative,
 			display: flex,
@@ -78,6 +84,7 @@ $vv-textarea: (
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
+					text-overflow: ellipsis,
 				),
 			),
 			state: (
@@ -89,17 +96,27 @@ $vv-textarea: (
 				),
 			),
 		),
+		input-before: (
+			display: flex,
+			align-items: center,
+			margin-top: var(--input-spacing-top),
+			margin-left: var(--input-spacing-left),
+		),
+		input-after: (
+			display: flex,
+			align-items: center,
+			margin-top: var(--input-spacing-top),
+			margin-right: var(--input-spacing-right),
+		),
 		icon: (
-			_alias: ':where(svg, [data-icon])',
-			margin: var(--input-spacing-top) var(--input-spacing-right)
-				var(--input-spacing-bottom) var(--input-spacing-left),
+			_alias: '> div > :where(svg, [data-icon])',
 			position: var(--input-icon-position),
 			width: var(--input-icon-width),
-			height: var(--input-icon-height),
-			padding: var(--input-icon-padding),
+			height: var(--input-min-height),
+			margin: var(--input-icon-margin),
 			pointer-events: var(--input-icon-pointer-events),
 		),
-		icon-right: (
+		icon-after: (
 			_alias: 'textarea + :where(svg, [data-icon])',
 			right: 0,
 		),
@@ -125,10 +142,10 @@ $vv-textarea: (
 		),
 	),
 	modifier: (
-		icon-left: (
+		icon-before: (
 			--input-spacing-left: calc(var(--spacing-sm) * 2 + 1em),
 		),
-		icon-right: (
+		icon-after: (
 			--input-spacing-right: calc(var(--spacing-sm) * 2 + 1em),
 		),
 		resizable: (
@@ -154,7 +171,7 @@ $vv-textarea: (
 				limit: (
 					color: var(--input-valid-color),
 				),
-				icon-right: (
+				icon-after: (
 					color: var(--input-valid-color),
 				),
 			),
@@ -175,7 +192,7 @@ $vv-textarea: (
 				limit: (
 					color: var(--input-invalid-color),
 				),
-				icon-right: (
+				icon-after: (
 					color: var(--input-invalid-color),
 				),
 			),
@@ -236,11 +253,13 @@ $vv-textarea: (
 				focus-within: (
 					element: (
 						label: (
-							transform: translateY(-0.8em),
-							font-size: var(--text-12),
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
-							transform: translateY(0.55em),
+							[padding-top]: var(--input-floating-padding-top),
+							[padding-bottom]:
+								var(--input-floating-padding-bottom),
 							pseudo: (
 								placeholder: (
 									opacity: var(--opacity-100),
@@ -252,11 +271,13 @@ $vv-textarea: (
 				dirty: (
 					element: (
 						label: (
-							transform: translateY(-0.8em),
-							font-size: var(--text-12),
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
-							transform: translateY(0.55em),
+							[padding-top]: var(--input-floating-padding-top),
+							[padding-bottom]:
+								var(--input-floating-padding-bottom),
 							pseudo: (
 								placeholder: (
 									opacity: var(--opacity-100),

package/src/tools/_functions.scss

@@ -179,6 +179,22 @@
 	@return $string;
 }
 
+@function str-split($string, $separator) {
+	$split-arr: ();
+	$index: string.index($string, $separator);
+
+	@while $index != null {
+		$item: string.slice($string, 1, $index - 1);
+		$split-arr: list.append($split-arr, $item);
+		$string: string.slice($string, $index + 1);
+		$index: string.index($string, $separator);
+	}
+
+	$split-arr: list.append($split-arr, $string);
+
+	@return $split-arr;
+}
+
 @function list-to-string($list, $glue: ', ') {
 	$result: null;
 

package/src/tools/_mixins.scss

@@ -173,34 +173,40 @@
 
 // Transform a map into a list of modifiers
 @mixin spread-map-into-modifiers(
+	$original: null,
 	$map: (),
 	$prefix: '',
 	$key: 'modifier',
 	$block: null,
+	$modifier: '',
 	$props: true,
 	$zero-specificity: true,
 	$bps: (
 		xxs: 0,
 	)
 ) {
+	@if not $original {
+		$original: $map;
+	}
 	@if not $block {
 		$block: &;
 	}
 	@if type-of(map.get($map, $key)) == 'map' {
-		@each $modifier, $value in map.get($map, $key) {
-			$selector: $block + '--' + $modifier;
+		@each $item, $value in map.get($map, $key) {
+			$selector: $block + '--' + $item;
 
-			%#{$prefix + '--' + $modifier} {
+			%#{$prefix + '--' + $item} {
 				@include spread-map-into-attrs(
-					$original: $map,
+					$original: $original,
 					$map: $value,
 					$prefix: $prefix,
-					$variant: #{$key}-#{$modifier},
+					$variant: #{$key}-#{$item},
 					$deep: true,
 					$ignore: (
 						'state',
 						'breakpoint',
 						'element',
+						'modifier',
 					),
 					$props: $props
 				);
@@ -208,21 +214,21 @@
 
 			// map props and attributes
 			@include wrap-with-where(
-				$selector: $selector + $block,
+				$selector: $modifier + $selector + $block,
 				$enabled: $zero-specificity
 			) {
-				@extend %#{$prefix + '--' + $modifier};
+				@extend %#{$prefix + '--' + $item};
 			}
 
 			// map elements
 			@if map.get($value, 'element') {
 				@include spread-map-into-elements(
-					$original: $map,
+					$original: $original,
 					$map: $value,
-					$prefix: #{$prefix}-#{$key}-#{$modifier},
+					$prefix: #{$prefix}-#{$key}-#{$item},
 					$key: 'element',
 					$block: $block,
-					$modifier: $selector,
+					$modifier: $modifier + $selector,
 					$props: $props,
 					$zero-specificity: $zero-specificity
 				);
@@ -231,12 +237,12 @@
 			// map states
 			@if map.get($value, 'state') {
 				@include spread-map-into-states(
-					$original: $map,
+					$original: $original,
 					$map: $value,
-					$prefix: #{$prefix}-#{$key}-#{$modifier},
+					$prefix: #{$prefix}-#{$key}-#{$item},
 					$key: 'state',
 					$block: $block,
-					$modifier: $selector,
+					$modifier: $modifier + $selector,
 					$props: $props,
 					$zero-specificity: $zero-specificity
 				);
@@ -246,13 +252,28 @@
 			@if map.get($value, 'breakpoint') {
 				@include spread-map-into-breakpoints(
 					$map: $value,
-					$prefix: #{$prefix}-#{$key}-#{$modifier},
+					$prefix: #{$prefix}-#{$key}-#{$item},
 					$key: 'breakpoint',
 					$block: $selector,
 					$props: $props,
 					$zero-specificity: $zero-specificity
 				);
 			}
+
+			// map modifiers
+			@if map.get($value, 'modifier') {
+				@include spread-map-into-modifiers(
+					$original: $original,
+					$map: $value,
+					$prefix: #{$prefix}-#{$key}-#{$item},
+					$key: 'modifier',
+					$block: $block,
+					$modifier: $modifier + $selector,
+					$props: $props,
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
+				);
+			}
 		}
 	}
 }
@@ -401,6 +422,7 @@
 					disabled,
 					checked,
 					checked-within,
+					selected,
 					readonly,
 					empty,
 					placeholder-shown,
@@ -548,6 +570,18 @@
 								'#{$modifier}#{$alias}[aria-pressed="true"]'
 							);
 						}
+					} @else if $state == 'selected' {
+						$selectors: list.join(
+							$selectors,
+							'#{$modifier}#{$block-item}[aria-selected="true"]'
+						);
+
+						@if $alias {
+							$selectors: list.join(
+								$selectors,
+								'#{$modifier}#{$alias}[aria-selected="true"]'
+							);
+						}
 					} @else if $state != 'current' {
 						$selectors: list.join(
 							$selectors,
@@ -654,6 +688,7 @@
 			progress-bar,
 			progress-value,
 			progress-inner-element,
+			datetime-edit,
 			datetime-edit-fields-wrapper,
 			datetime-edit-day-field
 		),
@@ -718,6 +753,7 @@
 										progress-value,
 										inner-element,
 										marker,
+										datetime-edit,
 										datetime-edit-fields-wrapper,
 										datetime-edit-day-field,
 										-webkit-progress-bar,

package/src/utilities/transforms.scss

@@ -52,7 +52,7 @@
 // translate
 @each $size, $value in $translate {
 	%translate-#{$size} {
-		transform: translate(#{$value});
+		transform: translate(#{$value}, #{$value});
 	}
 	@include wrap-with-where(
 		$selector: '.translate-#{$size}',
@@ -82,7 +82,7 @@
 	}
 
 	%-translate-#{$size} {
-		transform: translate(-#{$value});
+		transform: translate(-#{$value}, -#{$value});
 	}
 	@include wrap-with-where(
 		$selector: '.-translate-#{$size}',