@volverjs/style 0.1.12-beta.2 → 0.1.12-beta.20

package/src/tools/_mixins.scss

@@ -3,6 +3,7 @@
 @use 'sass:string';
 @use 'sass:meta';
 @use 'sass:selector';
+@use 'sass:math';
 @use 'functions' as *;
 @use 'breakpoints' as *;
 
@@ -11,10 +12,11 @@
 @mixin assert-ascending($map, $map-name) {
 	$prev-key: null;
 	$prev-num: null;
+
 	@each $key, $num in $map {
-		@if not $prev-num or unit($num) == '%' {
+		@if not $prev-num or math.unit($num) == '%' {
 			// Do nothing
-		} @else if not comparable($prev-num, $num) {
+		} @else if not compatible($prev-num, $num) {
 			@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
 		} @else if $prev-num >= $num {
 			@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
@@ -30,6 +32,7 @@
 @mixin assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
 	$values: map.values($map);
 	$first-value: list.nth($values, 1);
+
 	@if $first-value != 0 {
 		@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
 	}
@@ -39,6 +42,7 @@
 @mixin spread-map-into-props($map: (), $prefix: '', $old-key: '', $deep: true) {
 	@each $key, $value in $map {
 		$name: meta.inspect($key);
+
 		@if $name == meta.inspect($old-key) {
 			$name: $prefix;
 		} @else if $prefix != '' and meta.inspect($prefix) != meta.inspect($key)
@@ -56,7 +60,7 @@
 			string.slice(meta.inspect($key), 1, 1) !=
 			'['
 		{
-			@if type-of($value) == 'map' {
+			@if meta.type-of($value) == 'map' {
 				@if $deep {
 					@include spread-map-into-props($value, $name, $key);
 				}
@@ -81,17 +85,21 @@
 	$prefix: '',
 	$zero-specificity: false
 ) {
-	@if (type-of($map) == 'map' or type-of($map) == 'list') and $attribute != ''
+	@if (meta.type-of($map) == 'map' or meta.type-of($map) == 'list') and
+		$attribute !=
+		''
 	{
 		@each $breakpoint, $breakpoint-value in $bps {
 			@if $breakpoint-value > 0 {
 				$prefix: $breakpoint + '\\:';
 			}
+
 			@each $key, $value in $map {
 				@if $name != '' and meta.inspect($key) != meta.inspect($name) {
 					$key: #{$name}-#{meta.inspect($key)};
 				}
-				@if type-of($value) == 'map' and $deep {
+
+				@if meta.type-of($value) == 'map' and $deep {
 					@include spread-map-into-utilities(
 						$map: $value,
 						$class: $class,
@@ -125,27 +133,28 @@
 					$var: str-replace($var, '\\/', '-');
 
 					// check if value is not a map (spacing-dynamic)
-					@if type-of($value) != 'map' {
+					@if meta.type-of($value) != 'map' {
 						$default: $value;
 					}
 
 					// check if map is a list
-					@if type-of($map) ==
+					@if meta.type-of($map) ==
 						'list' and
 						(not $default or $default == '')
 					{
 						$default: $key;
 					}
 
-					@if type-of($default) == 'string' {
+					@if meta.type-of($default) == 'string' {
 						$default: string.unquote($default);
 					}
 
 					%#{$prefix}#{$class-name} {
 						@include media-breakpoint-up($breakpoint, $bps) {
-							@if type-of($attribute) != 'list' {
+							@if meta.type-of($attribute) != 'list' {
 								$attribute: ($attribute);
 							}
+
 							@each $attr in $attribute {
 								@if $default {
 									@if $var != '' {
@@ -159,6 +168,7 @@
 							}
 						}
 					}
+
 					@include wrap-with-where(
 						$selector: '.' + $prefix + $class-name,
 						$enabled: $zero-specificity
@@ -188,10 +198,12 @@
 	@if not $original {
 		$original: $map;
 	}
+
 	@if not $block {
 		$block: &;
 	}
-	@if type-of(map.get($map, $key)) == 'map' {
+
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $item, $value in map.get($map, $key) {
 			$selector: $block + '--' + $item;
 
@@ -300,13 +312,25 @@
 		$block: &;
 	}
 
-	@if type-of(map.get($map, $key)) == 'map' {
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $element, $value in map.get($map, $key) {
 			$selector: $block + '__' + $element;
 
+			// combinator
+			$combinator: map.get($value, '_combinator');
+
+			@if not $combinator {
+				$combinator: map.get($original, $key, $element, '_combinator');
+			}
+
 			@if $modifier {
 				$selectors: ();
+
 				@each $item in selector.parse($modifier) {
+					@if $combinator {
+						$item: '#{$item} #{$combinator}';
+					}
+
 					$selectors: list.join(
 						$selectors,
 						selector.nest($item, $selector)
@@ -326,6 +350,7 @@
 			@if $alias {
 				@if $modifier {
 					$aliases: ();
+
 					@each $item in selector.parse($modifier) {
 						$aliases: list.join(
 							$aliases,
@@ -414,7 +439,7 @@
 		$blocks: &;
 	}
 
-	@if type-of(map.get($map, $key)) == 'map' {
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $state, $value in map.get($map, $key) {
 			@if list.index(
 				(
@@ -428,6 +453,7 @@
 					disabled,
 					checked,
 					checked-within,
+					multiple,
 					selected,
 					readonly,
 					empty,
@@ -514,7 +540,14 @@
 								'#{$modifier}#{$alias}:not(:has(*:placeholder-shown))'
 							);
 						}
-					} @else if $state == 'disabled' or $state == 'readonly' {
+					} @else if
+						$state ==
+						'disabled' or
+						$state ==
+						'readonly' or
+						$state ==
+						'multiple'
+					{
 						$selectors: list.join(
 							$selectors,
 							'#{$modifier}#{$block-item}[#{$state}]'
@@ -677,10 +710,12 @@
 	@if not $original {
 		$original: $map;
 	}
+
 	@if not $block {
 		$block: &;
 	}
-	@if type-of(map.get($map, $key)) == 'map' {
+
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $breakpoint, $value in map.get($map, $key) {
 			@if string.index($breakpoint, '-') {
 				$operator: list.nth(string.split($breakpoint, '-'), 1);
@@ -704,6 +739,7 @@
 							}
 						}
 					}
+
 					@if $operator == 'down' {
 						@include wrap-with-where(
 							$selector: '#{$modifier}#{$block}',
@@ -721,6 +757,7 @@
 							}
 						}
 					}
+
 					@if map.has-key($bps, $operator) {
 						@include wrap-with-where(
 							$selector: '#{$modifier}#{$block}',
@@ -810,10 +847,13 @@
 		xxs: 0,
 	)
 ) {
-	@if type-of($map) == 'map' and $prefix != '' {
+	@if meta.type-of($map) == 'map' and $prefix != '' {
 		@each $key, $value in $map {
 			@if not list.index($ignore, $key) {
-				@if type-of($value) == 'map' and ($deep or $key == 'pseudo') {
+				@if meta.type-of($value) ==
+					'map' and
+					($deep or $key == 'pseudo')
+				{
 					$original: map.get($original, $key);
 
 					@if not $original {
@@ -823,9 +863,10 @@
 					@if $postfix != '' {
 						$key: #{$postfix}-#{$key};
 					}
+
 					@if $key == 'pseudo' {
 						@each $pseudo-element, $pseudo-map in $value {
-							@if type-of($pseudo-map) == 'map' {
+							@if meta.type-of($pseudo-map) == 'map' {
 								@if list.index(
 									(
 										before,
@@ -844,6 +885,8 @@
 										datetime-edit,
 										datetime-edit-fields-wrapper,
 										datetime-edit-day-field,
+										backdrop,
+										file-selector-button,
 										-webkit-progress-bar,
 										-webkit-progress-value,
 										-webkit-inner-element,
@@ -851,7 +894,9 @@
 										-moz-progress-value,
 										-moz-inner-element,
 										-webkit-details-marker,
-										-webkit-scrollbar
+										-webkit-scrollbar,
+										-webkit-scrollbar-track,
+										-webkit-scrollbar-thumb
 									),
 									$pseudo-element
 								)
@@ -904,7 +949,7 @@
 						);
 					}
 				} @else if
-					type-of($value) !=
+					meta.type-of($value) !=
 					'map' and
 					(string.slice(meta.inspect($key), 1, 1) != '_')
 				{
@@ -933,9 +978,15 @@
 						$prop-to-replace-with: #{$prop-to-replace-with}-#{$key};
 
 						@if map.get($original, $key) {
-							#{$prop-to-replace}: var(#{$prop-to-replace-with});
+							& {
+								#{$prop-to-replace}: var(
+									#{$prop-to-replace-with}
+								);
+							}
 						} @else {
-							#{$key}: var(#{$prop-to-replace-with});
+							& {
+								#{$key}: var(#{$prop-to-replace-with});
+							}
 						}
 					} @else {
 						@if string.slice(meta.inspect($key), 1, 1) == '[' {
@@ -946,7 +997,9 @@
 							);
 						}
 
-						#{$key}: $value;
+						& {
+							#{$key}: $value;
+						}
 					}
 				}
 			}
@@ -956,9 +1009,10 @@
 
 // Wrap selector with :where()
 @mixin wrap-with-where($selector, $enabled: true) {
-	@if type-of($selector) == 'map' or type-of($selector) == 'list' {
+	@if meta.type-of($selector) == 'map' or meta.type-of($selector) == 'list' {
 		$selector: #{$selector};
 	}
+
 	@if $enabled {
 		$selector: ':where(#{unquote($selector)})';
 	}
@@ -988,7 +1042,7 @@
 	$custom-transitions: false,
 	$bps: (xxs: 0)
 ) {
-	@if type-of($map) == 'map' and $block != '' {
+	@if meta.type-of($map) == 'map' and $block != '' {
 		$selector: '.' + $block;
 
 		// custom props
@@ -1016,6 +1070,7 @@
 				// content
 				@content;
 			}
+
 			@include wrap-with-where(
 				$selector: $selector,
 				$enabled: $zero-specificity
@@ -1119,12 +1174,13 @@
 	@if not $block {
 		$block: &;
 	}
-	@if type-of(map.get($map, $key)) == 'map' {
+
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $transition, $states in map.get($map, $key) {
 			@each $state, $value in $states {
 				@if $state in [ 'enter-from', 'enter-active', 'enter-to',
 					'leave-from', 'leave-active', 'leave-to', 'active',
-					'inert'] and type-of($value) == 'map'
+					'inert'] and meta.type-of($value) == 'map'
 				{
 					$selector: '.#{$transition}';
 
@@ -1178,6 +1234,21 @@
 							$bps: $bps
 						);
 					}
+
+					// map breakpoints
+					@if map.get($value, 'breakpoint') {
+						@include spread-map-into-breakpoints(
+							$original: $map,
+							$map: $value,
+							$prefix: #{$prefix}-#{$key}-#{$transition}-#{$state},
+							$key: 'breakpoint',
+							$block: $block,
+							$modifier: $selector,
+							$props: $props,
+							$zero-specificity: $zero-specificity,
+							$bps: $bps
+						);
+					}
 				}
 			}
 		}

package/src/utilities/backgrounds.scss

@@ -3,7 +3,7 @@
 // background-attachment
 @include spread-map-into-utilities(
 	$map: $background-attachment,
-	$class: 'bg',
+	$class: bg,
 	$attribute: 'background-attachment',
 	$zero-specificity: $zero-specificity-for-utilities
 );
@@ -11,7 +11,7 @@
 // background-clip
 @include spread-map-into-utilities(
 	$map: $background-clip,
-	$class: 'bg-clip',
+	$class: bg-clip,
 	$attribute: 'background-clip',
 	$zero-specificity: $zero-specificity-for-utilities
 );
@@ -19,7 +19,7 @@
 // background-origin
 @include spread-map-into-utilities(
 	$map: $background-origin,
-	$class: 'bg-origin',
+	$class: bg-origin,
 	$attribute: 'background-origin',
 	$zero-specificity: $zero-specificity-for-utilities
 );
@@ -27,7 +27,7 @@
 // background-position
 @include spread-map-into-utilities(
 	$map: $background-position,
-	$class: 'bg',
+	$class: bg,
 	$attribute: 'background-position',
 	$zero-specificity: $zero-specificity-for-utilities
 );
@@ -53,5 +53,15 @@
 	$map: $background-image,
 	$class: bg,
 	$attribute: background-image,
+	$prop: bg,
+	$zero-specificity: $zero-specificity-for-utilities
+);
+
+// background gradients
+@include spread-map-into-utilities(
+	$map: $gradient,
+	$class: bg-gradient,
+	$attribute: background-image,
+	$prop: gradient,
 	$zero-specificity: $zero-specificity-for-utilities
 );

package/src/utilities/flexbox.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../context' as *;
 
 // flex direction
@@ -34,6 +35,7 @@
 		%#{$prefix}#{$postfix} {
 			#{$prop}: #{$value};
 		}
+
 		@include wrap-with-where(
 			$selector: '.#{$prefix}#{$postfix}',
 			$enabled: $zero-specificity-for-utilities
@@ -57,7 +59,7 @@
 	$default: null;
 
 	// check if value is not a map (spacing-dynamic)
-	@if type-of($value) != 'map' {
+	@if meta.type-of($value) != 'map' {
 		$default: $value;
 	}
 
@@ -67,6 +69,7 @@
 	%gap-#{$size} {
 		gap: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.gap-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -78,6 +81,7 @@
 	%gap-x-#{$size} {
 		column-gap: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.gap-x-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -89,6 +93,7 @@
 	%gap-y-#{$size} {
 		row-gap: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.gap-y-#{$size}',
 		$enabled: $zero-specificity-for-utilities

package/src/utilities/index.scss

@@ -4,7 +4,6 @@
 @forward 'effects';
 @forward 'filters';
 @forward 'flexbox';
-@forward 'gradients';
 @forward 'grid';
 @forward 'interactivity';
 @forward 'layout';

package/src/utilities/interactivity.scss

@@ -1,10 +1,26 @@
 @use 'sass:map';
 @use '../context' as *;
 
-// grid template columns
+// cursor
 @include spread-map-into-utilities(
 	$map: $cursor,
 	$class: cursor,
 	$attribute: cursor,
 	$zero-specificity: $zero-specificity-for-utilities
 );
+
+// pointer events
+@include spread-map-into-utilities(
+	$map: $pointer-events,
+	$class: pointer-events,
+	$attribute: pointer-events,
+	$zero-specificity: $zero-specificity-for-utilities
+);
+
+// user select
+@include spread-map-into-utilities(
+	$map: $user-select,
+	$class: user-select,
+	$attribute: user-select,
+	$zero-specificity: $zero-specificity-for-utilities
+);

package/src/utilities/layout.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../context' as *;
 
 // aspect
@@ -63,7 +64,6 @@
 	$attribute: display,
 	$zero-specificity: $zero-specificity-for-utilities
 );
-
 @include spread-map-into-utilities(
 	$map: $display-with-breakpoints,
 	$attribute: display,
@@ -135,10 +135,12 @@
 	$value in map.merge($placement, map.merge($spacing, $spacing-dynamic))
 {
 	$var: $value;
-	@if not map-has-key($placement, $size) {
+
+	@if not map.has-key($placement, $size) {
 		// check if value is not a map (spacing-dynamic)
 		$var: var(--spacing-#{$size});
-		@if type-of($value) != 'map' {
+
+		@if meta.type-of($value) != 'map' {
 			$var: var(--spacing-#{$size}, #{$value});
 		}
 	}
@@ -147,6 +149,7 @@
 	%inset-#{$size} {
 		inset: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.inset-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -158,6 +161,7 @@
 	%inset-x-#{$size} {
 		inset-inline: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.inset-x-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -169,6 +173,7 @@
 	%inset-y-#{$size} {
 		inset-block: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.inset-y-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -181,6 +186,7 @@
 		%#{$direction}-#{$size} {
 			#{$direction}: #{$var};
 		}
+
 		@include wrap-with-where(
 			$selector: '.#{$direction}-#{$size}',
 			$enabled: $zero-specificity-for-utilities

package/src/utilities/sizing.scss

@@ -1,9 +1,17 @@
 @use 'sass:map';
 @use '../context' as *;
 
-// width / height / max-width / max-height
+// width / height / max-width / max-height / min-width / min-height
 @each $class,
-	$attribute in(w: width, h: height, max-w: max-width, max-h: max-height)
+	$attribute
+		in(
+			w: width,
+			h: height,
+			max-w: max-width,
+			max-h: max-height,
+			min-w: min-width,
+			min-h: min-height
+		)
 {
 	@include spread-map-into-utilities(
 		$map: map.merge($spacing, $spacing-dynamic),

package/src/utilities/spacing.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../context' as *;
 
 @each $prefix, $prop in (m: margin, p: padding, n: margin) {
@@ -6,7 +7,7 @@
 		$var: var(--spacing-#{$size});
 
 		// check if value is not a map (spacing-dynamic)
-		@if type-of($value) != 'map' {
+		@if meta.type-of($value) != 'map' {
 			$var: var(--spacing-#{$size}, #{$value});
 		}
 
@@ -19,6 +20,7 @@
 		%#{$prefix}#{$size} {
 			#{$prop}: #{$var};
 		}
+
 		@include wrap-with-where(
 			$selector: '.#{$prefix}-#{$size}',
 			$enabled: $zero-specificity-for-utilities
@@ -30,6 +32,7 @@
 		%#{$prefix}x-#{$size} {
 			#{$prop}-inline: #{$var};
 		}
+
 		@include wrap-with-where(
 			$selector: '.#{$prefix}x-#{$size}',
 			$enabled: $zero-specificity-for-utilities
@@ -41,6 +44,7 @@
 		%#{$prefix}y-#{$size} {
 			#{$prop}-block: #{$var};
 		}
+
 		@include wrap-with-where(
 			$selector: '.#{$prefix}y-#{$size}',
 			$enabled: $zero-specificity-for-utilities
@@ -55,6 +59,7 @@
 			%#{$prefix}#{$direction-prefix}-#{$size} {
 				#{$prop}-#{$direction}: #{$var};
 			}
+
 			@include wrap-with-where(
 				$selector: '.#{$prefix}#{$direction-prefix}-#{$size}',
 				$enabled: $zero-specificity-for-utilities
@@ -69,6 +74,7 @@
 %m-auto {
 	margin: auto;
 }
+
 @include wrap-with-where(
 	$selector: '.m-auto',
 	$enabled: $zero-specificity-for-utilities
@@ -79,6 +85,7 @@
 %mx-auto {
 	margin-inline: auto;
 }
+
 @include wrap-with-where(
 	$selector: '.mx-auto',
 	$enabled: $zero-specificity-for-utilities
@@ -89,6 +96,7 @@
 %my-auto {
 	margin-block: auto;
 }
+
 @include wrap-with-where(
 	$selector: '.my-auto',
 	$enabled: $zero-specificity-for-utilities
@@ -100,6 +108,7 @@
 	%m#{$direction-prefix}-auto {
 		margin-#{$direction}: auto;
 	}
+
 	@include wrap-with-where(
 		$selector: '.m#{$direction-prefix}-auto',
 		$enabled: $zero-specificity-for-utilities

package/src/utilities/transforms.scss

@@ -62,7 +62,7 @@
 	}
 
 	%translate-x-#{$size} {
-		translate: #{$value};
+		translate: #{$value} 0;
 	}
 	@include wrap-with-where(
 		$selector: '.translate-x-#{$size}',
@@ -92,7 +92,7 @@
 	}
 
 	%-translate-x-#{$size} {
-		translate: -#{$value};
+		translate: -#{$value} 0;
 	}
 	@include wrap-with-where(
 		$selector: '.-translate-x-#{$size}',