@volverjs/style 0.1.6 → 0.1.8

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

@@ -1,37 +1,112 @@
 $vv-dropdown: (
-	position: absolute,
-	inset: auto 0,
+	--dropdown-border-radius: 0px,
+	position: relative,
 	z-index: var(--z-dropdown),
 	display: flex,
 	flex-direction: column,
-	background-color: var(--color-surface-1),
 	box-shadow: var(--shadow-lg),
+	width: 'max-content',
 	element: (
+		list: (
+			_alias: 'ul',
+			[border-radius]: var(--dropdown-border-radius),
+			background-color: var(--color-surface-1),
+			overflow: auto,
+		),
 		item: (
-			_alias: '> li > :where(a, label, button)',
+			_alias: 'li',
+		),
+		item-first: (
+			_alias: 'li:first-child',
+			[border-top-left-radius]: var(--dropdown-border-radius),
+			[border-top-right-radius]: var(--dropdown-border-radius),
+		),
+		item-last: (
+			_alias: 'li:last-child',
+			[border-bottom-left-radius]: var(--dropdown-border-radius),
+			[border-bottom-right-radius]: var(--dropdown-border-radius),
+		),
+		item-not-last: (
+			_alias: 'li:not(:last-child)',
+			border-width: 0 0 var(--border) 0,
+			border-color: var(--color-surface-3),
+			border-style: solid,
+		),
+		search: (
 			display: block,
+			min-width: 0,
+			align-items: center,
+			min-height: var(--spacing-50),
+			background-color: var(--color-surface-2),
 			padding: var(--spacing-sm),
-			state: (
-				hover: (
-					background-color: var(--color-surface-2),
-				),
-				active: (
-					background-color: var(--color-surface-3),
+			pseudo: (
+				search-cancel-button: (
+					-webkit-appearance: none,
+					opacity: var(--opacity-0),
 				),
-				checked-within: (
-					color: var(--color-brand),
-					background-color: var(--color-surface-3),
+				placeholder: (
+					color: var(--color-word-4),
+					text-overflow: ellipsis,
 				),
 			),
 		),
-		input: (
-			_alias: '> li > input',
-			display: none,
+		arrow: (
+			position: absolute,
+			width: var(--spacing-20),
+			height: var(--spacing-20),
+			z-index: -1,
+			pointer-events: none,
+			border: none,
+			pseudo: (
+				before: (
+					position: absolute,
+					top: 0,
+					left: 0,
+					width: 0,
+					height: 0,
+					border-left: var(--spacing-10) solid transparent,
+					border-right: var(--spacing-10) solid transparent,
+					border-bottom: var(--spacing-10) solid
+						var(--color-surface-1),
+				),
+				after: (
+					position: absolute,
+					bottom: 0,
+					left: 0,
+					width: 0,
+					height: 0,
+					border-left: var(--spacing-10) solid transparent,
+					border-right: var(--spacing-10) solid transparent,
+					border-top: var(--spacing-10) solid var(--color-surface-1),
+				),
+			),
 		),
 	),
 	modifier: (
-		place-top: (
+		rounded: (
+			--dropdown-border-radius: var(--rounded),
+		),
+		block: (
+			width: 100%,
+		),
+		bottom: (
+			position: absolute,
+			top: 100%,
+			right: 0,
+			left: 0,
+		),
+		top: (
+			position: absolute,
+			left: 0,
+			right: 0,
 			bottom: 100%,
 		),
+		full-bleed: (
+			element: (
+				item: (
+					min-width: 20ch,
+				),
+			),
+		),
 	),
 ) !default;

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

@@ -60,12 +60,18 @@ $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),
-			line-height: var(--leading-none),
+			line-height: var(--leading-normal),
 			[padding-block]: var(--input-spacing-top)
 				var(--input-spacing-bottom),
 			[padding-inline]: var(--input-spacing-left)
@@ -75,7 +81,7 @@ $vv-input-text: (
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
-					text-overlow: ellipsis,
+					text-overflow: ellipsis,
 				),
 				calendar-picker-indicator: (
 					position: absolute,
@@ -102,6 +108,9 @@ $vv-input-text: (
 				inner-spin-button: (
 					display: none,
 				),
+				datetime-edit: (
+					padding: 0,
+				),
 				datetime-edit-fields-wrapper: (
 					padding: 0,
 				),
@@ -118,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: (
@@ -200,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: (
@@ -227,7 +238,7 @@ $vv-input-text: (
 				limit: (
 					color: var(--input-valid-color),
 				),
-				icon-right: (
+				icon-after: (
 					color: var(--input-valid-color),
 				),
 			),
@@ -248,7 +259,7 @@ $vv-input-text: (
 				limit: (
 					color: var(--input-invalid-color),
 				),
-				icon-right: (
+				icon-after: (
 					color: var(--input-invalid-color),
 				),
 			),

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

@@ -5,8 +5,8 @@ $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',
@@ -68,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,
@@ -95,20 +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,
 		),
@@ -163,10 +180,10 @@ $vv-select: (
 				),
 			),
 		),
-		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),
 		),
 		valid: (
@@ -182,7 +199,7 @@ $vv-select: (
 				hint: (
 					color: var(--input-valid-color),
 				),
-				icon-right: (
+				icon-after: (
 					color: var(--input-valid-color),
 				),
 			),
@@ -200,7 +217,7 @@ $vv-select: (
 				hint: (
 					color: var(--input-invalid-color),
 				),
-				icon-right: (
+				icon-after: (
 					color: var(--input-invalid-color),
 				),
 			),

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

@@ -26,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,
@@ -79,7 +84,7 @@ $vv-textarea: (
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
-					text-overlow: ellipsis,
+					text-overflow: ellipsis,
 				),
 			),
 			state: (
@@ -91,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,
 		),
@@ -127,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: (
@@ -156,7 +171,7 @@ $vv-textarea: (
 				limit: (
 					color: var(--input-valid-color),
 				),
-				icon-right: (
+				icon-after: (
 					color: var(--input-valid-color),
 				),
 			),
@@ -177,7 +192,7 @@ $vv-textarea: (
 				limit: (
 					color: var(--input-invalid-color),
 				),
-				icon-right: (
+				icon-after: (
 					color: var(--input-invalid-color),
 				),
 			),

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

@@ -422,6 +422,7 @@
 					disabled,
 					checked,
 					checked-within,
+					selected,
 					readonly,
 					empty,
 					placeholder-shown,
@@ -569,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,
@@ -675,6 +688,7 @@
 			progress-bar,
 			progress-value,
 			progress-inner-element,
+			datetime-edit,
 			datetime-edit-fields-wrapper,
 			datetime-edit-day-field
 		),
@@ -739,6 +753,7 @@
 										progress-value,
 										inner-element,
 										marker,
+										datetime-edit,
 										datetime-edit-fields-wrapper,
 										datetime-edit-day-field,
 										-webkit-progress-bar,

package/src/utilities/layout.scss

@@ -14,15 +14,9 @@
 // container
 %container {
 	width: 100%;
-
-	@each $breakpoint, $value in $breakpoints {
-		@if $value > 0 {
-			@include media-breakpoint-up($breakpoint, $breakpoints) {
-				max-width: $value;
-			}
-		}
-	}
+	max-width: var(--breakpoint-value, 100%);
 }
+
 @include wrap-with-where(
 	$selector: '.container',
 	$enabled: $zero-specificity-for-utilities

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}',

package/src/volver.scss

@@ -1,8 +1,5 @@
-// reset
-@use 'reset';
-
-// props
-@use 'props';
+// base
+@use 'base';
 
 // components
 @use 'components';