@volverjs/style 0.1.2-beta.8 → 0.1.2

package/src/components/index.scss

@@ -1,19 +1,25 @@
-@import 'vv-badge';
-@import 'vv-breadcrumb';
-@import 'vv-button';
-@import 'vv-button-group';
-@import 'vv-progress';
-@import 'vv-accordion';
-@import 'vv-dialog';
-@import 'vv-dropdown';
-@import 'vv-input-checkbox';
-@import 'vv-input-checkbox-group';
-@import 'vv-input-radio';
-@import 'vv-input-radio-group';
-@import 'vv-input-text';
-@import 'vv-nav';
-@import 'vv-textarea';
-@import 'vv-select';
-@import 'vv-table';
-@import 'vv-card';
-@import 'vv-text';
+@use 'vv-accordion';
+@use 'vv-alert';
+@use 'vv-badge';
+@use 'vv-breadcrumb';
+@use 'vv-button';
+@use 'vv-button-group';
+@use 'vv-card';
+@use 'vv-dialog';
+@use 'vv-dropdown';
+@use 'vv-checkbox-group';
+@use 'vv-checkbox';
+@use 'vv-radio-group';
+@use 'vv-radio';
+@use 'vv-avatar';
+@use 'vv-input-text';
+@use 'vv-nav';
+@use 'vv-progress';
+@use 'vv-select';
+@use 'vv-skeleton';
+@use 'vv-tab';
+@use 'vv-table';
+@use 'vv-text';
+@use 'vv-textarea';
+@use 'vv-tooltip';
+@use 'vv-toast';

package/src/components/vv-accordion.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-accordion);
 $component-map: $vv-accordion;
@@ -8,5 +8,6 @@ $component-map: $vv-accordion;
 	$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-alert.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-alert);
+$component-map: $vv-alert;
+
+@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-avatar.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-avatar);
+$component-map: $vv-avatar;
+
+@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-badge.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-badge);
 $component-map: $vv-badge;
@@ -8,5 +8,6 @@ $component-map: $vv-badge;
 	$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-breadcrumb.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-breadcrumb);
 $component-map: $vv-breadcrumb;
@@ -8,5 +8,6 @@ $component-map: $vv-breadcrumb;
 	$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-button-group.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-button-group);
 $component-map: $vv-button-group;
@@ -11,7 +11,8 @@ $button-component-selector: '.' + $button-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
 );
 
 // if has block modifier
@@ -22,7 +23,7 @@ $button-component-selector: '.' + $button-component-name;
 				@include wrap-with-where(
 					$selector:
 						'&.active, &#{$button-component-selector}--active, &:active',
-					$enabled: $zero-specificity-for-compoenents
+					$enabled: $zero-specificity-for-components
 				) {
 					z-index: 1;
 				}
@@ -31,7 +32,7 @@ $button-component-selector: '.' + $button-component-name;
 
 		@include wrap-with-where(
 			$selector: $button-component-selector,
-			$enabled: $zero-specificity-for-compoenents
+			$enabled: $zero-specificity-for-components
 		) {
 			flex: 1;
 		}
@@ -48,7 +49,7 @@ $button-component-selector: '.' + $button-component-name;
 					// clear top border-radius for first child
 					@include wrap-with-where(
 						$selector: '&:not(:first-child)',
-						$enabled: $zero-specificity-for-compoenents
+						$enabled: $zero-specificity-for-components
 					) {
 						border-top-right-radius: 0;
 						border-top-left-radius: 0;
@@ -57,7 +58,7 @@ $button-component-selector: '.' + $button-component-name;
 					// clear bottom border-radius for last child
 					@include wrap-with-where(
 						$selector: '&:not(:last-child)',
-						$enabled: $zero-specificity-for-compoenents
+						$enabled: $zero-specificity-for-components
 					) {
 						border-bottom-right-radius: 0;
 						border-bottom-left-radius: 0;
@@ -67,7 +68,7 @@ $button-component-selector: '.' + $button-component-name;
 					@if map.get($vv-button, '--button-border-width') {
 						@include wrap-with-where(
 							$selector: '&:not(:last-child, :last-child)',
-							$enabled: $zero-specificity-for-compoenents
+							$enabled: $zero-specificity-for-components
 						) {
 							margin-block: calc(var(--button-border-width) * -1);
 						}
@@ -81,7 +82,7 @@ $button-component-selector: '.' + $button-component-name;
 				// clear left border-radius for first child
 				@include wrap-with-where(
 					$selector: '&:not(:first-child)',
-					$enabled: $zero-specificity-for-compoenents
+					$enabled: $zero-specificity-for-components
 				) {
 					border-top-left-radius: 0;
 					border-bottom-left-radius: 0;
@@ -90,7 +91,7 @@ $button-component-selector: '.' + $button-component-name;
 				// clear right border-radius for first child
 				@include wrap-with-where(
 					$selector: '&:not(:last-child)',
-					$enabled: $zero-specificity-for-compoenents
+					$enabled: $zero-specificity-for-components
 				) {
 					border-top-right-radius: 0;
 					border-bottom-right-radius: 0;
@@ -100,7 +101,7 @@ $button-component-selector: '.' + $button-component-name;
 				@if map.get($vv-button, '--button-border-width') {
 					@include wrap-with-where(
 						$selector: '&:not(:last-child, :last-child)',
-						$enabled: $zero-specificity-for-compoenents
+						$enabled: $zero-specificity-for-components
 					) {
 						margin-inline: calc(var(--button-border-width) * -1);
 					}

package/src/components/vv-button.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-button);
 $component-map: $vv-button;
@@ -9,8 +9,9 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
-	$custom-block: true
+	$zero-specificity: $zero-specificity-for-components,
+	$custom-block: true,
+	$bps: $breakpoints
 ) {
 	// custom block
 	%#{$component-name} {
@@ -29,15 +30,11 @@ $component-selector: '.#{ $component-name}';
 			$prefix: $component-name,
 			$props: $use-custom-props-for-components
 		);
-
-		@media (prefers-reduced-motion: reduce) {
-			transition: none;
-		}
 	}
 
 	@include wrap-with-where(
 		$selector: $component-selector,
-		$enabled: $zero-specificity-for-compoenents
+		$enabled: $zero-specificity-for-components
 	) {
 		&:where(a[href], button, input[type='button'], input[type='submit'], input[type='reset']),
 		&::file-selector-button {

package/src/components/vv-card.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-card);
 $component-map: $vv-card;
@@ -8,5 +8,6 @@ $component-map: $vv-card;
 	$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-checkbox-group.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-checkbox-group);
+$component-map: $vv-checkbox-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-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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-nav);
 $component-map: $vv-nav;
@@ -8,5 +8,6 @@ $component-map: $vv-nav;
 	$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-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;
+	}
+}