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

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 {
 	// ============================================================== */
@@ -27,7 +27,7 @@
 					}
 				}
 			}
-		} @else {
+		} @else if $key != 'scheme' {
 			#{'colors__' + $key}: $value;
 		}
 	}
@@ -45,7 +45,7 @@
 	}
 
 	// breakpoints
-	@each $key, $value in $breakpoints {
+	@each $key, $value in map.remove($breakpoints, 'xxs') {
 		#{'breakpoints__' + $key}: $value;
 	}
 
@@ -89,6 +89,11 @@
 		#{'object-position__' + $key}: $value;
 	}
 
+	// overflow
+	@each $key, $value in $overflow {
+		#{'overflow__' + $key}: $value;
+	}
+
 	// position
 	@each $index in $position {
 		#{'position__' + $index}: $index;
@@ -219,27 +224,27 @@
 	// width spacer
 	@each $key, $value in $width {
 		$name: meta.inspect($key);
-		$name: str-replace($name, '\\/', '/');
+		$name: str-replace($name, '\\/', '_');
 
-		#{'width-spacer__' + $name}: $value;
+		#{'width__' + $name}: $value;
 	}
 
 	// height spacer
 	@each $key, $value in $height {
 		$name: meta.inspect($key);
-		$name: str-replace($name, '\\/', '/');
+		$name: str-replace($name, '\\/', '_');
 
-		#{'height-spacer__' + $name}: $value;
+		#{'height__' + $name}: $value;
 	}
 
 	// border radius
 	@each $key, $value in $border-radius {
-		#{'border-radius-spacer__' + $key}: $value;
+		#{'border-radius__' + $key}: $value;
 	}
 
 	// border width
 	@each $key, $value in $border-width {
-		#{'border-width-spacer__' + $key}: $value;
+		#{'border-width__' + $key}: $value;
 	}
 
 	// #endregion
@@ -402,9 +407,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,6 +1,11 @@
-@import '../context';
+@use 'sass:map';
+@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 spread-map-into-props(
+		$map: map.remove($breakpoints, 'xxs'),
+		$prefix: breakpoint
+	);
 }

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