@volverjs/style 0.1.23 → 0.1.24-beta.2

package/src/components/vv-table.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-table);
 $component-map: $vv-table;
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-text.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-text);
 $component-map: $vv-text;
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-textarea.scss

@@ -2,6 +2,7 @@
 @use 'sass:list';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-textarea);
 $component-map: $vv-textarea;
 $component-selector: '.#{ $component-name}';
@@ -9,7 +10,7 @@ $component-selector: '.#{ $component-name}';
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
@@ -96,3 +97,5 @@ $component-selector: '.#{ $component-name}';
 		}
 	}
 }
+
+}

package/src/components/vv-tooltip.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-tooltip);
 $component-map: $vv-tooltip;
 $component-selector: '.#{ $component-name}';
@@ -8,7 +9,7 @@ $component-selector: '.#{ $component-name}';
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
@@ -21,13 +22,10 @@ $component-selector: '.#{ $component-name}';
 }
 
 @include wrap-with-where(
-	$selector: '*:has(> #{$component-selector})',
+	$selector: '*:has(> #{$component-selector}):hover > #{$component-selector}, *:has(> #{$component-selector}):focus-visible > #{$component-selector}, *:has(> #{$component-selector}).hover > #{$component-selector}, *:has(> #{$component-selector}).focus-visible > #{$component-selector}',
 	$enabled: $zero-specificity-for-components
 ) {
-	&:hover,
-	&:focus-visible,
-	&.hover,
-	&.focus-visible {
-		@extend %vv-tooltip--visible !optional;
-	}
+	@extend %vv-tooltip--visible !optional;
+}
+
 }

package/src/export.scss

@@ -541,7 +541,6 @@
 	// translate
 	@each $key, $value in $translate {
 		$name: meta.inspect($key);
-		$name: str-replace($name, '\\/', '/');
 
 		#{'translate__' + $name}: $value;
 	}

package/src/props/background.scss

@@ -1,6 +1,8 @@
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($background-image, $prefix: bg);
-	@include spread-map-into-props($gradient, $prefix: gradient);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props($background-image, $prefix: bg);
+		@include spread-map-into-props($gradient, $prefix: gradient);
+	}
 }

package/src/props/borders.scss

@@ -1,6 +1,8 @@
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($border-radius, $prefix: rounded);
-	@include spread-map-into-props($border-width, $prefix: border);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props($border-radius, $prefix: rounded);
+		@include spread-map-into-props($border-width, $prefix: border);
+	}
 }

package/src/props/breakpoints.scss

@@ -1,16 +1,18 @@
 @use 'sass:map';
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props(
-		$map: map.remove($breakpoints, 'xxs'),
-		$prefix: breakpoint
-	);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props(
+			$map: map.remove($breakpoints, 'xxs'),
+			$prefix: breakpoint
+		);
 
-	@each $breakpoint, $breakpoint-value in $breakpoints {
-		@media screen and (min-width: $breakpoint-value) {
-			--breakpoint-key: #{$breakpoint};
-			--breakpoint-value: #{$breakpoint-value};
+		@each $breakpoint, $breakpoint-value in $breakpoints {
+			@media screen and (min-width: $breakpoint-value) {
+				--breakpoint-key: #{$breakpoint};
+				--breakpoint-value: #{$breakpoint-value};
+			}
 		}
 	}
 }

package/src/props/colors.scss

@@ -1,5 +1,7 @@
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($colors, $prefix: color);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props($colors, $prefix: color);
+	}
 }

package/src/props/effects.scss

@@ -1,6 +1,8 @@
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($box-shadow, $prefix: shadow);
-	@include spread-map-into-props($opacity, $prefix: opacity);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props($box-shadow, $prefix: shadow);
+		@include spread-map-into-props($opacity, $prefix: opacity);
+	}
 }

package/src/props/filters.scss

@@ -1,7 +1,9 @@
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($blur, $prefix: blur);
-	@include spread-map-into-props($brightness, $prefix: brightness);
-	@include spread-map-into-props($saturation, $prefix: saturate);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props($blur, $prefix: blur);
+		@include spread-map-into-props($brightness, $prefix: brightness);
+		@include spread-map-into-props($saturation, $prefix: saturate);
+	}
 }

package/src/props/input.scss

@@ -1,5 +1,7 @@
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($map: $input, $prefix: input);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props($map: $input, $prefix: input);
+	}
 }

package/src/props/layout.scss

@@ -1,6 +1,8 @@
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($map: $aspect-ratio, $prefix: aspect);
-	@include spread-map-into-props($map: $z-index, $prefix: z);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props($map: $aspect-ratio, $prefix: aspect);
+		@include spread-map-into-props($map: $z-index, $prefix: z);
+	}
 }

package/src/props/sizing.scss

@@ -1,6 +1,8 @@
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($width, $prefix: w);
-	@include spread-map-into-props($height, $prefix: h);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props($width, $prefix: w);
+		@include spread-map-into-props($height, $prefix: h);
+	}
 }

package/src/props/spacing.scss

@@ -1,25 +1,27 @@
 @use 'sass:map';
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	// static
-	@each $size, $value in $spacing {
-		--spacing-#{$size}: #{$value};
-	}
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		// static
+		@each $size, $value in $spacing {
+			--spacing-#{$size}: #{$value};
+		}
 
-	// dynamic
-	@each $name, $sizes in $spacing-dynamic {
-		@each $breakpoint, $size in $sizes {
-			@if map.has-key($breakpoints, $breakpoint) {
-				@include media-breakpoint-up($breakpoint, $breakpoints) {
-					$var: $size;
+		// dynamic
+		@each $name, $sizes in $spacing-dynamic {
+			@each $breakpoint, $size in $sizes {
+				@if map.has-key($breakpoints, $breakpoint) {
+					@include media-breakpoint-up($breakpoint, $breakpoints) {
+						$var: $size;
 
-					// if is a static spacing
-					@if map.has-key($spacing, $size) {
-						$var: var(--spacing-#{$size});
-					}
+						// if is a static spacing
+						@if map.has-key($spacing, $size) {
+							$var: var(--spacing-#{$size});
+						}
 
-					--spacing-#{$name}: #{$var};
+						--spacing-#{$name}: #{$var};
+					}
 				}
 			}
 		}

package/src/props/transitions.scss

@@ -1,167 +1,199 @@
 @use '../context' as *;
 @use 'sass:string';
 
-:where(:host, :root, .theme) {
-	// animation
-	@media (prefers-reduced-motion: no-preference) {
-		// transition-property
-		@include spread-map-into-props(
-			$transition-property,
-			$prefix: transition-property
-		);
-
-		// duration
-		@include spread-map-into-props(
-			$transition-duration-delay,
-			$prefix: duration
-		);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		// Default values for reduced-motion users
+		// These ensure variables are always defined but with no animation
+
+		// duration - set all to 0s for reduced motion
+		@each $key, $value in $transition-duration-delay {
+			--duration-#{$key}: 0s;
+		}
 
-		// ease
+		// ease - keep timing functions but they won't matter with 0s duration
 		@include spread-map-into-props(
 			$transition-timing-function,
 			$prefix: ease
 		);
 
-		// animation
-		@include spread-map-into-props($animation, animation);
+		// transition-property - define properties but transitions will be none
+		@include spread-map-into-props(
+			$transition-property,
+			$prefix: transition-property
+		);
 
-		// transition
+		// transition - set all to none for reduced motion
 		@each $property, $value in $transition-property {
-			@if $property != 'none' {
-				$transition: '';
-
-				@each $prop in str-split($value, ', ') {
-					$transition: $transition +
-						$prop +
-						' var(--duration-300) var(--ease-in-out), ';
-				}
+			--transition-#{$property}: none;
+		}
 
-				$transition: string.slice($transition, 1, -3);
+		// animation - set all to none for reduced motion
+		@each $key, $value in $animation {
+			--animation-#{$key}: none;
+		}
 
-				--transition-#{$property}: #{$transition};
-			} @else {
-				--transition-#{$property}: none;
+		// animation
+		@media (prefers-reduced-motion: no-preference) {
+			// transition-property
+			@include spread-map-into-props(
+				$transition-property,
+				$prefix: transition-property
+			);
+
+			// duration
+			@include spread-map-into-props(
+				$transition-duration-delay,
+				$prefix: duration
+			);
+
+			// ease
+			@include spread-map-into-props(
+				$transition-timing-function,
+				$prefix: ease
+			);
+
+			// animation
+			@include spread-map-into-props($animation, animation);
+
+			// transition
+			@each $property, $value in $transition-property {
+				@if $property != 'none' {
+					$transition: '';
+
+					@each $prop in str-split($value, ', ') {
+						$transition: $transition +
+							$prop +
+							' var(--duration-300) var(--ease-in-out), ';
+					}
+
+					$transition: string.slice($transition, 1, -3);
+
+					--transition-#{$property}: #{$transition};
+				} @else {
+					--transition-#{$property}: none;
+				}
 			}
 		}
 	}
-}
 
-// keyframes
-@keyframes indeterminate {
-	0% {
-		scale: 0 1;
-	}
+	// keyframes
+	@keyframes indeterminate {
+		0% {
+			scale: 0 1;
+		}
 
-	50% {
-		scale: 1;
-		transform-origin: left;
-	}
+		50% {
+			scale: 1;
+			transform-origin: left;
+		}
 
-	51% {
-		scale: 1;
-		transform-origin: center right;
-	}
+		51% {
+			scale: 1;
+			transform-origin: center right;
+		}
 
-	100% {
-		scale: 0 1;
-		transform-origin: center right;
+		100% {
+			scale: 0 1;
+			transform-origin: center right;
+		}
 	}
-}
 
-@keyframes spin {
-	from {
-		rotate: 0deg;
-	}
+	@keyframes spin {
+		from {
+			rotate: 0deg;
+		}
 
-	to {
-		rotate: 360deg;
+		to {
+			rotate: 360deg;
+		}
 	}
-}
 
-@keyframes ping {
-	75%,
-	100% {
-		scale: 2;
-		opacity: 0;
+	@keyframes ping {
+		75%,
+		100% {
+			scale: 2;
+			opacity: 0;
+		}
 	}
-}
 
-@keyframes pulse {
-	0%,
-	100% {
-		opacity: 1;
-	}
+	@keyframes pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
 
-	50% {
-		opacity: 0.5;
+		50% {
+			opacity: 0.5;
+		}
 	}
-}
 
-@keyframes bounce {
-	0%,
-	100% {
-		translate: 0 -25%;
-		animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-	}
+	@keyframes bounce {
+		0%,
+		100% {
+			translate: 0 -25%;
+			animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+		}
 
-	50% {
-		translate: 0;
-		animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+		50% {
+			translate: 0;
+			animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+		}
 	}
-}
 
-@keyframes progress-indeterminate {
-	0% {
-		background-position: 200% 0;
-	}
+	@keyframes progress-indeterminate {
+		0% {
+			background-position: 200% 0;
+		}
 
-	100% {
-		background-position: -200% 0;
+		100% {
+			background-position: -200% 0;
+		}
 	}
-}
 
-@keyframes pie-masks {
-	0% {
-		opacity: 1;
-	}
+	@keyframes pie-masks {
+		0% {
+			opacity: 1;
+		}
 
-	50%,
-	100% {
-		opacity: 0;
+		50%,
+		100% {
+			opacity: 0;
+		}
 	}
-}
 
-@keyframes fade-out {
-	95% {
-		opacity: 1;
-	}
+	@keyframes fade-out {
+		95% {
+			opacity: 1;
+		}
 
-	100% {
-		opacity: 0;
+		100% {
+			opacity: 0;
+		}
 	}
-}
 
-@keyframes shine {
-	to {
-		background-position-x: -200%;
+	@keyframes shine {
+		to {
+			background-position-x: -200%;
+		}
 	}
-}
 
-@keyframes clippath {
-	0%,
-	100% {
-		clip-path: inset(0 0 95% 0);
-	}
+	@keyframes clippath {
+		0%,
+		100% {
+			clip-path: inset(0 0 95% 0);
+		}
 
-	25% {
-		clip-path: inset(0 95% 0 0);
-	}
+		25% {
+			clip-path: inset(0 95% 0 0);
+		}
 
-	50% {
-		clip-path: inset(95% 0 0 0);
-	}
+		50% {
+			clip-path: inset(95% 0 0 0);
+		}
 
-	75% {
-		clip-path: inset(0 0 0 95%);
+		75% {
+			clip-path: inset(0 0 0 95%);
+		}
 	}
 }

package/src/props/typography.scss

@@ -1,37 +1,39 @@
 @use 'sass:map';
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	// font-family
-	@include spread-map-into-props($font-family, $prefix: font);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		// font-family
+		@include spread-map-into-props($font-family, $prefix: font);
 
-	// font-weight
-	@include spread-map-into-props($font-weight, $prefix: font);
+		// font-weight
+		@include spread-map-into-props($font-weight, $prefix: font);
 
-	// line-height
-	@include spread-map-into-props($line-height, $prefix: leading);
+		// line-height
+		@include spread-map-into-props($line-height, $prefix: leading);
 
-	// letter-spacing
-	@include spread-map-into-props($letter-spacing, $prefix: tracking);
+		// letter-spacing
+		@include spread-map-into-props($letter-spacing, $prefix: tracking);
 
-	// font-size
-	@each $size, $value in $font-size {
-		--text-#{$size}: #{$value};
-	}
+		// font-size
+		@each $size, $value in $font-size {
+			--text-#{$size}: #{$value};
+		}
 
-	// font-size dynamic
-	@each $name, $sizes in $font-size-dynamic {
-		@each $breakpoint, $size in $sizes {
-			@if map.has-key($breakpoints, $breakpoint) {
-				@include media-breakpoint-up($breakpoint, $breakpoints) {
-					$var: $size;
+		// font-size dynamic
+		@each $name, $sizes in $font-size-dynamic {
+			@each $breakpoint, $size in $sizes {
+				@if map.has-key($breakpoints, $breakpoint) {
+					@include media-breakpoint-up($breakpoint, $breakpoints) {
+						$var: $size;
 
-					// if is a static font-size
-					@if map.has-key($font-size, $size) {
-						$var: var(--text-#{$size});
-					}
+						// if is a static font-size
+						@if map.has-key($font-size, $size) {
+							$var: var(--text-#{$size});
+						}
 
-					--text-#{$name}: #{$var};
+						--text-#{$name}: #{$var};
+					}
 				}
 			}
 		}

package/src/reset.scss

@@ -1,3 +1,6 @@
+@use 'context' as *;
+
+@include layer(reset, $use-css-layers, $layer-prefix) {
 /*
     Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
     - The "symbol *" part is to solve Firefox SVG sprite bug
@@ -95,3 +98,4 @@
 	scrollbar-color: initial;
 	font-family: initial;
 }
+}