@volverjs/style 0.1.12-beta.8 → 0.1.12

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

@@ -18,6 +18,7 @@ $vv-card: (
 	element: (
 		header: (
 			_alias: '> header',
+			_combinator: '>',
 			overflow: hidden,
 			padding: var(--spacing-md),
 			background-color: var(--color-surface-1),
@@ -40,6 +41,7 @@ $vv-card: (
 		),
 		footer: (
 			_alias: '> footer',
+			_combinator: '>',
 			border-top: var(--border) solid var(--color-surface-4),
 			padding: var(--spacing-md),
 		),

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

@@ -6,6 +6,7 @@ $vv-checkbox-group: (
 	element: (
 		legend: (
 			_alias: '> legend',
+			_combinator: '>',
 			display: var(--input-label-display),
 			font-size: var(--input-label-font-size),
 			font-weight: var(--input-label-font-weight),
@@ -24,6 +25,7 @@ $vv-checkbox-group: (
 		),
 		hint: (
 			_alias: '> small',
+			_combinator: '>',
 			display: var(--input-hint-display),
 			font-size: var(--input-hint-font-size),
 			color: var(--input-hint-color),

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

@@ -13,6 +13,11 @@ $vv-checkbox: (
 		disabled: (
 			opacity: var(--opacity-30),
 			cursor: not-allowed,
+			element: (
+				input: (
+					cursor: not-allowed,
+				),
+			),
 		),
 	),
 	element: (
@@ -42,6 +47,7 @@ $vv-checkbox: (
 		),
 		hint: (
 			_alias: '> small',
+			_combinator: '>',
 			flex-basis: 100%,
 			display: var(--input-hint-display),
 			font-size: var(--input-hint-font-size),

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

@@ -25,6 +25,7 @@ $vv-dialog: (
 	element: (
 		wrapper: (
 			_alias: '> article',
+			_combinator: '>',
 			display: flex,
 			flex-direction: column,
 			position: relative,

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

@@ -9,6 +9,7 @@ $vv-input-file: (
 	element: (
 		label: (
 			_alias: '> label',
+			_combinator: '>',
 			display: var(--input-label-display),
 			font-size: var(--input-label-font-size),
 			font-weight: var(--input-label-font-weight),
@@ -72,11 +73,12 @@ $vv-input-file: (
 			white-space: nowrap,
 			cursor: pointer,
 			color: var(--input-color),
-			[padding-block]: var(--input-spacing-top) 0,
 			[padding-inline]: var(--input-spacing-left)
 				var(--input-spacing-right),
 			min-width: 0,
 			min-height: var(--input-min-height),
+			display: flex,
+			align-items: center,
 			text-overflow: var(--input-text-overflow),
 			pseudo: (
 				file-selector-button: (
@@ -86,6 +88,7 @@ $vv-input-file: (
 					cursor: pointer,
 					text-decoration: underline,
 					color: var(--input-color),
+					min-height: var(--input-min-height),
 				),
 			),
 			state: (
@@ -121,6 +124,7 @@ $vv-input-file: (
 			height: var(--input-min-height),
 			margin: var(--input-icon-margin),
 			pointer-events: var(--input-icon-pointer-events),
+			flex-shrink: 0,
 		),
 		icon-after: (
 			_alias: 'input + :where(svg, [data-icon])',
@@ -172,6 +176,12 @@ $vv-input-file: (
 				),
 			),
 		),
+		drop-area-action: (
+			position: absolute,
+			top: var(--spacing-8),
+			right: var(--spacing-8),
+			z-index: var(--z-1),
+		),
 		preview: (
 			position: absolute,
 			display: flex,
@@ -190,7 +200,7 @@ $vv-input-file: (
 			height: var(--border-2),
 			bottom: 0,
 			left: 0,
-			z-index: 1,
+			z-index: var(--z-1),
 			pseudo: (
 				-webkit-progress-bar: (
 						background-color: transparent,
@@ -217,12 +227,19 @@ $vv-input-file: (
 			),
 		),
 		item: (
+			position: relative,
+			overflow: hidden,
 			display: flex,
 			font-size: var(--input-label-font-size),
 			align-items: center,
 			gap: var(--spacing-8),
 			background-color: var(--input-background-color),
 			padding: var(--spacing-8),
+			state: (
+				active: (
+					background-color: var(--color-surface-2),
+				),
+			),
 		),
 		item-name: (
 			white-space: nowrap,
@@ -236,14 +253,22 @@ $vv-input-file: (
 			align-self: flex-end,
 		),
 		item-link: (
+			white-space: nowrap,
+			text-overflow: ellipsis,
+			overflow: hidden,
 			cursor: pointer,
 			text-decoration: underline,
 		),
 		item-icon: (
 			flex-shrink: 0,
 		),
+		item-action: (
+			flex-shrink: 0,
+			cursor: pointer,
+		),
 		item-remove: (
 			flex-shrink: 0,
+			cursor: pointer,
 			background-image: var(--bg-close),
 			width: 1.4em,
 			height: 1.4em,
@@ -253,7 +278,6 @@ $vv-input-file: (
 			border-radius: var(--rounded-full),
 			background-color: var(--color-surface-3),
 			margin-inline-start: auto,
-			cursor: pointer,
 			transition: var(--transition-colors),
 			state: (
 				hover: (
@@ -421,6 +445,11 @@ $vv-input-file: (
 				preview: (
 					border-radius: var(--rounded-full),
 				),
+				drop-area-action: (
+					position: relative,
+					top: auto,
+					right: auto,
+				),
 			),
 		),
 	),

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

@@ -9,6 +9,7 @@ $vv-input-text: (
 	element: (
 		label: (
 			_alias: '> label',
+			_combinator: '>',
 			display: var(--input-label-display),
 			font-size: var(--input-label-font-size),
 			font-weight: var(--input-label-font-weight),
@@ -150,6 +151,7 @@ $vv-input-text: (
 			height: var(--input-min-height),
 			margin: var(--input-icon-margin),
 			pointer-events: var(--input-icon-pointer-events),
+			flex-shrink: 0,
 		),
 		icon-after: (
 			_alias: 'input + :where(svg, [data-icon])',
@@ -199,6 +201,7 @@ $vv-input-text: (
 		),
 		hint: (
 			_alias: '> small',
+			_combinator: '>',
 			display: var(--input-hint-display),
 			font-size: var(--input-hint-font-size),
 			color: var(--input-hint-color),
@@ -304,7 +307,7 @@ $vv-input-text: (
 				),
 				label: (
 					position: absolute,
-					z-index: 1,
+					z-index: var(--z-1),
 					min-height: var(--input-min-height),
 					line-height: var(--input-min-height),
 					pointer-events: none,

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

@@ -18,7 +18,7 @@ $vv-nav: (
 			[padding]: var(--nav-item-padding),
 		),
 		item-label: (
-			_alias: 'li > a',
+			_alias: 'li > :is(a, button)',
 			display: flex,
 			align-items: center,
 			will-change: background-color color,

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

@@ -79,6 +79,7 @@ $vv-radio: (
 		),
 		hint: (
 			_alias: '> small',
+			_combinator: '>',
 			flex-basis: 100%,
 			display: var(--input-hint-display),
 			font-size: var(--input-hint-font-size),

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

@@ -10,6 +10,7 @@ $vv-select: (
 	element: (
 		label: (
 			_alias: '> label',
+			_combinator: '>',
 			display: var(--input-label-display),
 			font-size: var(--input-label-font-size),
 			font-weight: var(--input-label-font-weight),
@@ -132,6 +133,7 @@ $vv-select: (
 			height: var(--input-min-height),
 			margin: var(--input-icon-margin),
 			pointer-events: var(--input-icon-pointer-events),
+			flex-shrink: 0,
 		),
 		icon-after: (
 			_alias: 'select + :where(svg, [data-icon])',
@@ -139,6 +141,7 @@ $vv-select: (
 		),
 		hint: (
 			_alias: '> small',
+			_combinator: '>',
 			display: var(--input-hint-display),
 			font-size: var(--input-hint-font-size),
 			color: var(--input-hint-color),
@@ -256,7 +259,7 @@ $vv-select: (
 				),
 				label: (
 					position: absolute,
-					z-index: 1,
+					z-index: var(--z-1),
 					min-height: var(--input-min-height),
 					line-height: var(--input-min-height),
 					pointer-events: none,

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

@@ -29,6 +29,10 @@ $vv-table: (
 				),
 			),
 		),
+		tfoot-tr: (
+			_alias: 'tfoot > tr',
+			border-width: 1px 0 0 0,
+		),
 		th: (
 			_alias: 'th',
 			font-weight: var(--font-semibold),
@@ -48,7 +52,21 @@ $vv-table: (
 	modifier: (
 		inline-spacing: (
 			--table-cell-padding: var(--spacing-md),
-			border-width: 0,
+		),
+		bordered: (
+			--table-cell-padding: var(--spacing-md),
+			element: (
+				th: (
+					border-width: 1px,
+					border-style: solid,
+					border-color: var(--color-surface-5),
+				),
+				td: (
+					border-width: 1px,
+					border-style: solid,
+					border-color: var(--color-surface-5),
+				),
+			),
 		),
 	),
 ) !default;

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

@@ -9,6 +9,7 @@ $vv-textarea: (
 	element: (
 		label: (
 			_alias: '> label',
+			_combinator: '>',
 			display: var(--input-label-display),
 			font-size: var(--input-label-font-size),
 			font-weight: var(--input-label-font-weight),
@@ -82,6 +83,7 @@ $vv-textarea: (
 				var(--input-spacing-bottom) var(--input-spacing-left),
 			overflow: auto,
 			text-overflow: var(--input-text-overflow),
+			min-height: var(--input-min-height),
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
@@ -116,6 +118,7 @@ $vv-textarea: (
 			height: var(--input-min-height),
 			margin: var(--input-icon-margin),
 			pointer-events: var(--input-icon-pointer-events),
+			flex-shrink: 0,
 		),
 		icon-after: (
 			_alias: 'textarea + :where(svg, [data-icon])',
@@ -131,6 +134,7 @@ $vv-textarea: (
 		),
 		hint: (
 			_alias: '> small',
+			_combinator: '>',
 			display: var(--input-hint-display),
 			font-size: var(--input-hint-font-size),
 			color: var(--input-hint-color),
@@ -224,7 +228,7 @@ $vv-textarea: (
 				),
 				label: (
 					position: absolute,
-					z-index: 1,
+					z-index: var(--z-1),
 					min-height: var(--input-min-height),
 					line-height: var(--input-min-height),
 					pointer-events: none,

package/src/themes/dark/settings/_colors.scss

@@ -4,8 +4,8 @@
 @use '../../../settings/colors' as *;
 
 $dark-color-scheme: dark !default;
-$dark-color-word: hsl(color.hue($color-brand) 15% 85%) !default;
-$dark-color-surface: hsl(color.hue($color-brand) 10% 5%) !default;
+$dark-color-word: hsl(color-hue($color-brand) 15% 85%) !default;
+$dark-color-surface: hsl(color-hue($color-brand) 10% 5%) !default;
 $dark-color-surface-palette: (
 	brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) 10%),
 	accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) 10%),
@@ -15,12 +15,12 @@ $dark-color-surface-palette: (
 	warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 10%),
 ) !default;
 $dark-color-surface-palette-no-vars: (
-	brand: hsl(color.hue($color-brand) color.saturation($color-brand) 10%),
-	accent: hsl(color.hue($color-accent) color.saturation($color-accent) 10%),
-	success: hsl(color.hue($color-success) color.saturation($color-success) 10%),
-	danger: hsl(color.hue($color-danger) color.saturation($color-danger) 10%),
-	info: hsl(color.hue($color-info) color.saturation($color-info) 10%),
-	warning: hsl(color.hue($color-warning) color.saturation($color-warning) 10%),
+	brand: hsl(color-hue($color-brand) color-saturation($color-brand) 10%),
+	accent: hsl(color-hue($color-accent) color-saturation($color-accent) 10%),
+	success: hsl(color-hue($color-success) color-saturation($color-success) 10%),
+	danger: hsl(color-hue($color-danger) color-saturation($color-danger) 10%),
+	info: hsl(color-hue($color-info) color-saturation($color-info) 10%),
+	warning: hsl(color-hue($color-warning) color-saturation($color-warning) 10%),
 ) !default;
 
 // color map

package/src/tools/_breakpoints.scss

@@ -19,9 +19,10 @@
 	$bps-names: map.keys($bps)
 ) {
 	$n: list.index($bps-names, $name);
+
 	@return if(
-		$n != null and $n < length($bps-names),
-		nth($bps-names, $n + 1),
+		$n != null and $n < list.length($bps-names),
+		list.nth($bps-names, $n + 1),
 		null
 	);
 }
@@ -31,6 +32,7 @@
 //    576px
 @function breakpoint-min($name, $bps) {
 	$min: map.get($bps, $name);
+
 	@return if($min != 0, $min, null);
 }
 
@@ -44,6 +46,7 @@
 //    767.98px
 @function breakpoint-max($name, $bps) {
 	$next: breakpoint-next($name, $bps);
+
 	@return if($next, breakpoint-min($next, $bps) - 0.02, null);
 }
 
@@ -61,12 +64,17 @@
 // Makes the @content apply to the given breakpoint and wider.
 @mixin media-breakpoint-up($name, $bps) {
 	$min: breakpoint-min($name, $bps);
+
 	@if $min {
 		@media (min-width: $min) {
-			@content;
+			& {
+				@content;
+			}
 		}
 	} @else {
-		@content;
+		& {
+			@content;
+		}
 	}
 }
 
@@ -74,6 +82,7 @@
 // Makes the @content apply to the given breakpoint and narrower.
 @mixin media-breakpoint-down($name, $bps) {
 	$max: breakpoint-max($name, $bps);
+
 	@if $max {
 		@media (max-width: $max) {
 			@content;

package/src/tools/_functions.scss

@@ -5,17 +5,55 @@
 @use 'sass:list';
 @use 'sass:math';
 
+@function color-hue($color) {
+	@return color.channel($color, 'hue', $space: hsl);
+}
+
+@function color-saturation($color) {
+	@return color.channel($color, 'saturation', $space: hsl);
+}
+
+@function color-lightness($color) {
+	@return color.channel($color, 'lightness', $space: hsl);
+}
+
+@function color-alpha($color) {
+	@return color.channel($color, 'alpha');
+}
+
+@function color-hsla($color) {
+	@return hsla(
+		color-hue($color),
+		color.channel($color, 'saturation', $space: hsl),
+		color.channel($color, 'lightness', $space: hsl),
+		color.channel($color, 'alpha')
+	);
+}
+
+@function color-red($color) {
+	@return color.channel($color, 'red', $space: rgb);
+}
+
+@function color-green($color) {
+	@return color.channel($color, 'green', $space: rgb);
+}
+
+@function color-blue($color) {
+	@return color.channel($color, 'blue', $space: rgb);
+}
+
 @function hsla-map($color, $name, $noVarExport: false) {
 	@if $noVarExport {
 		@return (
-			#{$name}: hsla(color.hue($color), color.saturation($color), color.lightness($color), color.alpha($color))
+			#{$name}: hsla(color-hue($color), color.channel($color, 'saturation', $space:
+							hsl), color.channel($color, 'lightness', $space: hsl), color.channel($color, 'alpha'))
 		);
 	} @else {
 		@return (
-			hue: color.hue($color),
-			saturation: color.saturation($color),
-			lightness: color.lightness($color),
-			#{$name}: hsla(var(--color-#{$name}-hue), var(--color-#{$name}-saturation), var(--color-#{$name}-lightness), color.alpha($color))
+			hue: color-hue($color),
+			saturation: color.channel($color, 'saturation', $space: hsl),
+			lightness: color.channel($color, 'lightness', $space: hsl),
+			#{$name}: hsla(var(--color-#{$name}-hue), var(--color-#{$name}-saturation), var(--color-#{$name}-lightness), color.channel($color, 'alpha'))
 		);
 	}
 }
@@ -24,9 +62,9 @@
 	@if $noVarExport {
 		@return (
 			hsla(
-				color.hue($color),
-				color.saturation($color),
-				color.lightness($color),
+				color-hue($color),
+				color.channel($color, 'saturation', $space: hsl),
+				color.channel($color, 'lightness', $space: hsl),
 				$alpha
 			)
 		);
@@ -41,7 +79,9 @@
 }
 
 @function hex-to-rgb($hex) {
-	@return red($hex), green($hex), blue($hex);
+	@return color.channel($hex, 'red', $space: rgb),
+		color.channel($hex, 'green', $space: rgb),
+		color.channel($hex, 'blue', $space: rgb);
 }
 
 @function color-alpha-map(
@@ -52,6 +92,7 @@
 	$noVarExport: false
 ) {
 	$result: hsla-map($color, $name, $noVarExport);
+
 	@for $index from 1 to ($steps + 1) {
 		$result: map.merge(
 			$result,
@@ -61,6 +102,7 @@
 			)
 		);
 	}
+
 	@return $result;
 }
 
@@ -96,6 +138,7 @@
 			$noVarExport
 		)
 	);
+
 	@return $result;
 }
 
@@ -110,29 +153,38 @@
 	$inverted: true
 ) {
 	$result: hsla-map($color, $name, $noVarExport);
+
 	@for $counter from 1 to ($steps + 1) {
 		$index: $counter;
+
 		@if $inverted {
 			$index: $steps + 1 - $counter;
 		}
 
 		$key: $index;
+
 		@if $prefix != '' {
 			$key: $prefix + '-' + $index;
 		}
 
 		@if $fixed {
 			$increment: $scale * $index;
+
 			@if $noVarExport {
-				$alpha: color.lightness($color) + $increment;
+				$alpha: color.channel($color, 'lightness', $space: hsl) +
+					$increment;
 				$result: map.merge(
 					$result,
 					(
 						#{$key}:
 							hsla(
-								color.hue($color),
-								color.saturation($color),
-								color.lightness($color),
+								color-hue($color),
+								color.channel(
+									$color,
+									'saturation',
+									$space: hsl
+								),
+								color.channel($color, 'lightness', $space: hsl),
 								$alpha
 							)
 					)
@@ -157,16 +209,22 @@
 			$increment: math.div($scale * $index, 100);
 			$increment: math.div($increment, ($increment * 0 + 1));
 			$increment: $increment + 1;
+
 			@if $noVarExport {
-				$alpha: color.lightness($color) * $increment;
+				$alpha: color.channel($color, 'lightness', $space: hsl) *
+					$increment;
 				$result: map.merge(
 					$result,
 					(
 						#{$key}:
 							hsla(
-								color.hue($color),
-								color.saturation($color),
-								color.lightness($color),
+								color-hue($color),
+								color.channel(
+									$color,
+									'saturation',
+									$space: hsl
+								),
+								color.channel($color, 'lightness', $space: hsl),
 								$alpha
 							)
 					)
@@ -189,6 +247,7 @@
 			}
 		}
 	}
+
 	@return $result;
 }
 
@@ -206,27 +265,35 @@
 
 	@for $counter from 1 to ($steps + 1) {
 		$index: $counter;
+
 		@if $inverted {
 			$index: $steps + 1 - $counter;
 		}
 
 		$key: $index;
+
 		@if $prefix != '' {
 			$key: $prefix + '-' + $index;
 		}
 
 		@if $fixed {
 			$decrement: $scale * $index;
+
 			@if $noVarExport {
-				$alpha: color.lightness($color) - $decrement;
+				$alpha: color.channel($color, 'lightness', $space: hsl) -
+					$decrement;
 				$result: map.merge(
 					$result,
 					(
 						#{$key}:
 							hsla(
-								color.hue($color),
-								color.saturation($color),
-								color.lightness($color),
+								color-hue($color),
+								color.channel(
+									$color,
+									'saturation',
+									$space: hsl
+								),
+								color.channel($color, 'lightness', $space: hsl),
 								$alpha
 							)
 					)
@@ -251,16 +318,22 @@
 			$decrement: math.div($scale * $index, 100);
 			$decrement: math.div($decrement, ($decrement * 0 + 1));
 			$decrement: 1 - $decrement;
+
 			@if $noVarExport {
-				$alpha: color.lightness($color) * $decrement;
+				$alpha: color.channel($color, 'lightness', $space: hsl) *
+					$decrement;
 				$result: map.merge(
 					$result,
 					(
 						#{$key}:
 							hsla(
-								color.hue($color),
-								color.saturation($color),
-								color.lightness($color),
+								color-hue($color),
+								color.channel(
+									$color,
+									'saturation',
+									$space: hsl
+								),
+								color.channel($color, 'lightness', $space: hsl),
 								$alpha
 							)
 					)
@@ -283,6 +356,7 @@
 			}
 		}
 	}
+
 	@return $result;
 }
 
@@ -320,7 +394,7 @@
 @function list-to-string($list, $glue: ', ') {
 	$result: null;
 
-	@for $i from 1 through length($list) {
+	@for $i from 1 through list.length($list) {
 		$e: list.nth($list, $i);
 
 		@if $result and $e {