@volverjs/style 0.1.2-beta.3 → 0.1.2-beta.30

package/src/components/{vv-input-checkbox.scss → vv-checkbox.scss}

@@ -1,20 +1,21 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
-$component-name: map.get($components-names, vv-input-checkbox);
-$component-map: $vv-input-checkbox;
+$component-name: map.get($components-names, vv-checkbox);
+$component-map: $vv-checkbox;
 $component-selector: '.#{ $component-name}';
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
 );
 
 @include wrap-with-where(
 	$selector: '#{$component-selector}:has(> input[type="checkbox"]:disabled)',
-	$enabled: $zero-specificity-for-compoenents
+	$enabled: $zero-specificity-for-components
 ) {
 	@extend %#{$component-name}--disabled !optional;
 }
@@ -22,7 +23,7 @@ $component-selector: '.#{ $component-name}';
 @include wrap-with-where(
 	$selector:
 		'#{$component-selector}:has(> input[type="checkbox"]:indeterminate)',
-	$enabled: $zero-specificity-for-compoenents
+	$enabled: $zero-specificity-for-components
 ) {
 	@extend %#{$component-name}--indeterminate !optional;
 }

package/src/components/vv-dialog.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-dialog);
 $component-map: $vv-dialog;
@@ -8,5 +8,6 @@ $component-map: $vv-dialog;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
 );

package/src/components/vv-dropdown.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-dropdown);
 $component-map: $vv-dropdown;
@@ -8,5 +8,6 @@ $component-map: $vv-dropdown;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
 );

package/src/components/vv-input-text.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-input-text);
 $component-map: $vv-input-text;
@@ -9,14 +9,15 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
 );
 
 // disabled and readonly
 @each $state in ('disabled', 'readonly') {
 	@include wrap-with-where(
 		$selector: '#{$component-selector}:has(input:#{$state})',
-		$enabled: $zero-specificity-for-compoenents
+		$enabled: $zero-specificity-for-components
 	) {
 		@extend %#{$component-name}--#{$state} !optional;
 	}
@@ -28,7 +29,7 @@ $component-selector: '.#{ $component-name}';
 			@include wrap-with-where(
 				$selector:
 					'#{$component-selector}:has(input:#{$state}) #{$component-selector}__#{$element}',
-				$enabled: $zero-specificity-for-compoenents
+				$enabled: $zero-specificity-for-components
 			) {
 				@extend %#{$component-name}-state-#{$state}__#{$element}
 						!optional;
@@ -38,7 +39,7 @@ $component-selector: '.#{ $component-name}';
 				@include wrap-with-where(
 					$selector:
 						'#{$component-selector}:has(input:#{$state}) #{$component-selector}__#{$element}:#{$elementState}',
-					$enabled: $zero-specificity-for-compoenents
+					$enabled: $zero-specificity-for-components
 				) {
 					@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$elementState}
 							!optional;

package/src/components/vv-nav.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-nav);
+$component-map: $vv-nav;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);

package/src/components/vv-progress.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-progress);
 $component-map: $vv-progress;
@@ -8,5 +8,6 @@ $component-map: $vv-progress;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
 );

package/src/components/vv-radio-group.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-radio-group);
+$component-map: $vv-radio-group;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);

package/src/components/{vv-input-radio.scss → vv-radio.scss}

@@ -1,20 +1,21 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
-$component-name: map.get($components-names, vv-input-radio);
-$component-map: $vv-input-radio;
+$component-name: map.get($components-names, vv-radio);
+$component-map: $vv-radio;
 $component-selector: '.#{ $component-name}';
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
 );
 
 @include wrap-with-where(
 	$selector: '#{$component-selector}:has(> input[type="radio"]:disabled)',
-	$enabled: $zero-specificity-for-compoenents
+	$enabled: $zero-specificity-for-components
 ) {
 	@extend %#{$component-name}--disabled !optional;
 }

package/src/components/vv-select.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-select);
 $component-map: $vv-select;
@@ -9,14 +9,15 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
 );
 
 // disabled
 @each $state in ('disabled') {
 	@include wrap-with-where(
 		$selector: '#{$component-selector}:has(select:#{$state})',
-		$enabled: $zero-specificity-for-compoenents
+		$enabled: $zero-specificity-for-components
 	) {
 		@extend %#{$component-name}--#{$state} !optional;
 	}
@@ -28,7 +29,7 @@ $component-selector: '.#{ $component-name}';
 			@include wrap-with-where(
 				$selector:
 					'#{$component-selector}:has(select:#{$state}) #{$component-selector}__#{$element}',
-				$enabled: $zero-specificity-for-compoenents
+				$enabled: $zero-specificity-for-components
 			) {
 				@extend %#{$component-name}-state-#{$state}__#{$element}
 						!optional;
@@ -38,7 +39,7 @@ $component-selector: '.#{ $component-name}';
 				@include wrap-with-where(
 					$selector:
 						'#{$component-selector}:has(select:#{$state}) #{$component-selector}__#{$element}:#{$elementState}',
-					$enabled: $zero-specificity-for-compoenents
+					$enabled: $zero-specificity-for-components
 				) {
 					@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$elementState}
 							!optional;

package/src/components/vv-skeleton.scss

@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-skeleton);
+$component-map: $vv-skeleton;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);

package/src/components/vv-tab.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-tab);
+$component-map: $vv-tab;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);

package/src/components/vv-table.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-table);
 $component-map: $vv-table;
@@ -8,5 +8,6 @@ $component-map: $vv-table;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
 );

package/src/components/vv-text.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-text);
 $component-map: $vv-text;
@@ -8,5 +8,6 @@ $component-map: $vv-text;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
 );

package/src/components/vv-textarea.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-textarea);
 $component-map: $vv-textarea;
@@ -9,14 +9,15 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
 );
 
 // disabled and readonly
 @each $state in ('disabled', 'readonly') {
 	@include wrap-with-where(
 		$selector: '#{$component-selector}:has(textarea:#{$state})',
-		$enabled: $zero-specificity-for-compoenents
+		$enabled: $zero-specificity-for-components
 	) {
 		@extend %#{$component-name}--#{$state} !optional;
 	}
@@ -28,7 +29,7 @@ $component-selector: '.#{ $component-name}';
 			@include wrap-with-where(
 				$selector:
 					'#{$component-selector}:has(textarea:#{$state}) #{$component-selector}__#{$element}',
-				$enabled: $zero-specificity-for-compoenents
+				$enabled: $zero-specificity-for-components
 			) {
 				@extend %#{$component-name}-state-#{$state}__#{$element}
 						!optional;
@@ -38,7 +39,7 @@ $component-selector: '.#{ $component-name}';
 				@include wrap-with-where(
 					$selector:
 						'#{$component-selector}:has(textarea:#{$state}) #{$component-selector}__#{$element}:#{$elementState}',
-					$enabled: $zero-specificity-for-compoenents
+					$enabled: $zero-specificity-for-components
 				) {
 					@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$elementState}
 							!optional;

package/src/components/vv-toast.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-toast);
+$component-map: $vv-toast;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);

package/src/components/vv-tooltip.scss

@@ -0,0 +1,33 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-tooltip);
+$component-map: $vv-tooltip;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+@include wrap-with-where(
+	$selector: '*:has(#{$component-selector})',
+	$enabled: $zero-specificity-for-components
+) {
+	position: relative;
+}
+
+@include wrap-with-where(
+	$selector: '*:has(> #{$component-selector})',
+	$enabled: $zero-specificity-for-components
+) {
+	&:hover,
+	&:focus-visible,
+	&.hover,
+	&.focus-visible {
+		@extend %vv-tooltip--visible !optional;
+	}
+}

package/src/export.scss

@@ -3,7 +3,7 @@
 @use 'sass:string';
 
 // context
-@import 'context';
+@use 'context' as *;
 
 :export {
 	// ============================================================== */
@@ -219,7 +219,7 @@
 	// width spacer
 	@each $key, $value in $width {
 		$name: meta.inspect($key);
-		$name: str-replace($name, '\\/', '/');
+		$name: str-replace($name, '\\/', '_');
 
 		#{'width-spacer__' + $name}: $value;
 	}
@@ -227,7 +227,7 @@
 	// height spacer
 	@each $key, $value in $height {
 		$name: meta.inspect($key);
-		$name: str-replace($name, '\\/', '/');
+		$name: str-replace($name, '\\/', '_');
 
 		#{'height-spacer__' + $name}: $value;
 	}
@@ -402,9 +402,65 @@
 
 	// ============================================================== */
 	// #region EFFECTS
-	// blend-mode
-	@each $index in $blend-mode {
-		#{'blend-mode__' + $index}: $index;
+	// box-shadow
+	@each $key, $value in $box-shadow {
+		#{'box-shadow__' + $key}: $value;
+	}
+
+	// opacity
+	@each $key, $value in $opacity {
+		#{'opacity__' + $key}: $value;
+	}
+
+	// mix-blend-mode
+	@each $index in $mix-blend-mode {
+		#{'mix-blend-mode__' + $index}: $index;
+	}
+
+	// background-blend-mode
+	@each $index in $background-blend-mode {
+		#{'background-blend-mode__' + $index}: $index;
+	}
+
+	// #endregion
+
+	// ============================================================== */
+	// #region FILTERS
+	// blur
+	@each $key, $value in $blur {
+		#{'blur__' + $key}: $value;
+	}
+
+	// brightness
+	@each $key, $value in $brightness {
+		#{'brightness__' + $key}: $value;
+	}
+
+	// saturation
+	@each $key, $value in $saturation {
+		#{'saturation__' + $key}: $value;
+	}
+
+	// #endregion
+
+	// ============================================================== */
+	// #region TRANSITIONS & ANIMATIONS
+	// transition property
+	@each $key, $value in $transition-property {
+		#{'transition-property__' + $key}: $value;
+	}
+
+	// transition duration
+	@each $key, $value in $transition-duration-delay {
+		#{'transition-duration-delay__' + $key}: $value;
+	}
+
+	@each $key, $value in $transition-timing-function {
+		#{'transition-timing-function__' + $key}: $value;
+	}
+
+	@each $key, $value in $animation {
+		#{'animation__' + $key}: $value;
 	}
 
 	// #endregion

package/src/props/background.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($background-image, $prefix: bg);

package/src/props/borders.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($border-radius, $prefix: rounded);

package/src/props/colors.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($colors, $prefix: color);

package/src/props/effects.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($box-shadow, $prefix: shadow);

package/src/props/filters.scss

@@ -1,6 +1,7 @@
-@import '../context';
+@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);
 }

package/src/props/index.scss

@@ -1,12 +1,12 @@
-@import 'animation';
-@import 'background';
-@import 'borders';
-@import 'colors';
-@import 'effects';
-@import 'filters';
-@import 'layout';
-@import 'media';
-@import 'spacing';
-@import 'typography';
-@import 'sizing';
-@import 'input';
+@use 'background';
+@use 'borders';
+@use 'colors';
+@use 'effects';
+@use 'filters';
+@use 'input';
+@use 'layout';
+@use 'media';
+@use 'sizing';
+@use 'spacing';
+@use 'transitions';
+@use 'typography';

package/src/props/input.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($map: $input, $prefix: input);

package/src/props/layout.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($map: $aspect-ratio, $prefix: aspect);

package/src/props/media.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 // motion
 @custom-media --motion-ok (prefers-reduced-motion: no-preference);

package/src/props/sizing.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($width, $prefix: w);

package/src/props/spacing.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	// static
@@ -11,7 +11,7 @@
 	@each $name, $sizes in $spacing-dynamic {
 		@each $breakpoint, $size in $sizes {
 			@if map-has-key($breakpoints, $breakpoint) {
-				@include media-breakpoint-up($breakpoint) {
+				@include media-breakpoint-up($breakpoint, $breakpoints) {
 					$var: $size;
 
 					// if is a static spacing

package/src/props/{animation.scss → transitions.scss}

@@ -1,11 +1,45 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
+	// animation
 	@media (prefers-reduced-motion: no-preference) {
-		@include spread-map-into-props($animate, $prefix: animate);
+		// 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-#{$property}: var(
+						--transition-property-#{$property}
+					)
+					var(--duration-300)
+					var(--ease-in-out);
+			} @else {
+				--transition-#{$property}: none;
+			}
+		}
 	}
 }
 
+// keyframes
 @keyframes indeterminate {
 	0% {
 		transform: scaleX(0);
@@ -78,3 +112,20 @@
 		background-position: -200% 0;
 	}
 }
+
+@keyframes pie-masks {
+	0% {
+		opacity: 1;
+	}
+
+	50%,
+	100% {
+		opacity: 0;
+	}
+}
+
+@keyframes shine {
+	to {
+		background-position-x: -200%;
+	}
+}

package/src/props/typography.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	// font-family
@@ -22,7 +22,7 @@
 	@each $name, $sizes in $font-size-dynamic {
 		@each $breakpoint, $size in $sizes {
 			@if map-has-key($breakpoints, $breakpoint) {
-				@include media-breakpoint-up($breakpoint) {
+				@include media-breakpoint-up($breakpoint, $breakpoints) {
 					$var: $size;
 
 					// if is a static font-size