@volverjs/style 0.1.2-beta.24 → 0.1.2-beta.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.24",
+  "version": "0.1.2-beta.26",
   "description": "@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui and static webpages as well.",
   "main": "dist/style.css",
   "style": "dist/style.css",
@@ -59,6 +59,8 @@
     "./scss/components/vv-progress": "./src/components/vv-progress.scss",
     "./components/vv-select": "./dist/components/vv-select.css",
     "./scss/components/vv-select": "./src/components/vv-select.scss",
+    "./components/vv-skeleton": "./dist/components/vv-skeleton.css",
+    "./scss/components/vv-skeleton": "./src/components/vv-skeleton.scss",
     "./components/vv-tab": "./dist/components/vv-tab.css",
     "./scss/components/vv-tab": "./src/components/vv-tab.scss",
     "./components/vv-table": "./dist/components/vv-table.css",
@@ -73,8 +75,6 @@
     "./scss/components/vv-tooltip": "./src/components/vv-tooltip.scss",
     "./export": "./dist/export.css",
     "./scss/export": "./src/export.scss",
-    "./props/animation": "./dist/props/animation.css",
-    "./scss/props/animation": "./src/props/animation.scss",
     "./props/background": "./dist/props/background.css",
     "./scss/props/background": "./src/props/background.scss",
     "./props/borders": "./dist/props/borders.css",
@@ -97,6 +97,8 @@
     "./scss/props/sizing": "./src/props/sizing.scss",
     "./props/spacing": "./dist/props/spacing.css",
     "./scss/props/spacing": "./src/props/spacing.scss",
+    "./props/transitions": "./dist/props/transitions.css",
+    "./scss/props/transitions": "./src/props/transitions.scss",
     "./props/typography": "./dist/props/typography.css",
     "./scss/props/typography": "./src/props/typography.scss",
     "./reset": "./dist/reset.css",
@@ -107,8 +109,6 @@
     "./scss/themes/dark/props": "./src/themes/dark/props/index.scss",
     "./themes/dark": "./dist/themes/dark/volver.css",
     "./scss/themes/dark": "./src/themes/dark/volver.scss",
-    "./utilities/animation": "./dist/utilities/animation.css",
-    "./scss/utilities/animation": "./src/utilities/animation.scss",
     "./utilities/backgrounds": "./dist/utilities/backgrounds.css",
     "./scss/utilities/backgrounds": "./src/utilities/backgrounds.scss",
     "./utilities/borders": "./dist/utilities/borders.css",
@@ -125,6 +125,8 @@
     "./scss/utilities/grid": "./src/utilities/grid.scss",
     "./utilities": "./dist/utilities.css",
     "./scss/utilities": "./src/utilities/index.scss",
+    "./utilities/interactivity": "./dist/utilities/interactivity.css",
+    "./scss/utilities/interactivity": "./src/utilities/interactivity.scss",
     "./utilities/layout": "./dist/utilities/layout.css",
     "./scss/utilities/layout": "./src/utilities/layout.scss",
     "./utilities/sizing": "./dist/utilities/sizing.css",
@@ -153,42 +155,42 @@
   },
   "homepage": "https://github.com/volverjs/style#readme",
   "devDependencies": {
-    "@iconify/vue": "^4.0.0",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@iconify/vue": "^4.0.2",
+    "@vitejs/plugin-vue": "^4.0.0",
     "@vueuse/core": "^9.6.0",
-    "@vueuse/head": "^1.0.18",
-    "eslint": "^8.28.0",
+    "@vueuse/head": "^1.0.22",
+    "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-vue": "^9.8.0",
     "glob": "^8.0.3",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^8.6.5",
     "markdown-it-prism": "^2.3.0",
-    "postcss": "^8.4.19",
+    "postcss": "^8.4.20",
     "postcss-html": "^1.5.0",
     "postcss-preset-env": "^7.8.3",
     "prism-themes": "^1.9.0",
     "prismjs": "1.29.0",
-    "sass": "^1.56.1",
-    "stylelint": "^14.15.0",
+    "sass": "^1.56.2",
+    "stylelint": "^14.16.0",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-recommended-scss": "^8.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard-scss": "^6.1.0",
-    "unplugin-auto-import": "^0.11.5",
-    "unplugin-vue-components": "^0.22.11",
-    "vite": "^3.2.4",
-    "vite-plugin-css-export": "^1.2.0",
+    "unplugin-auto-import": "^0.12.1",
+    "unplugin-vue-components": "^0.22.12",
+    "vite": "^4.0.1",
+    "vite-plugin-css-export": "^1.2.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^1.6.0",
     "vite-plugin-markdown": "^2.1.0",
-    "vite-plugin-pages": "^0.27.1",
-    "vite-plugin-stylelint": "^3.0.9",
+    "vite-plugin-pages": "^0.28.0",
+    "vite-plugin-stylelint": "^4.1.3",
     "vite-plugin-vue-layouts": "^0.7.0",
-    "vite-ssg": "^0.22.0",
+    "vite-ssg": "^0.22.1",
     "vite-ssg-sitemap": "^0.4.3",
     "vue": "^3.2.45",
-    "vue-live": "2.1.0",
+    "vue-live": "2.3.2",
     "vue-router": "^4.1.6"
   },
   "scripts": {

package/src/_config.scss

@@ -1,8 +1,8 @@
 // use custom props for components
 $use-custom-props-for-components: true !default;
 
-// enable zero specificity for compoenents
-$zero-specificity-for-compoenents: true !default;
+// enable zero specificity for components
+$zero-specificity-for-components: true !default;
 
 // enable zero specificity for utilities
 $zero-specificity-for-utilities: true !default;
@@ -30,6 +30,7 @@ $components-names: (
 	vv-nav: $components-prefix + -nav,
 	vv-progress: $components-prefix + -progress,
 	vv-select: $components-prefix + -select,
+	vv-skeleton: $components-prefix + -skeleton,
 	vv-tab: $components-prefix + -tab,
 	vv-table: $components-prefix + -table,
 	vv-text: $components-prefix + -text,

package/src/components/index.scss

@@ -16,6 +16,7 @@
 @use 'vv-nav';
 @use 'vv-progress';
 @use 'vv-select';
+@use 'vv-skeleton';
 @use 'vv-tab';
 @use 'vv-table';
 @use 'vv-text';

package/src/components/vv-accordion.scss

@@ -8,6 +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

@@ -8,6 +8,6 @@ $component-map: $vv-alert;
 	$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-avatar.scss

@@ -8,6 +8,6 @@ $component-map: $vv-avatar;
 	$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-badge.scss

@@ -8,6 +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

@@ -8,6 +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

@@ -11,7 +11,7 @@ $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
 );
 
@@ -23,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;
 				}
@@ -32,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;
 		}
@@ -49,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;
@@ -58,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;
@@ -68,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);
 						}
@@ -82,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;
@@ -91,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;
@@ -101,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

@@ -9,7 +9,7 @@ $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,
 	$custom-block: true,
 	$bps: $breakpoints
 ) {
@@ -30,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

@@ -8,6 +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-dialog.scss

@@ -8,6 +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

@@ -8,6 +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-checkbox-group.scss

@@ -8,6 +8,6 @@ $component-map: $vv-input-checkbox-group;
 	$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-checkbox.scss

@@ -9,13 +9,13 @@ $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
 );
 
 @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;
 }
@@ -23,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-input-radio-group.scss

@@ -8,6 +8,6 @@ $component-map: $vv-input-radio-group;
 	$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-radio.scss

@@ -9,13 +9,13 @@ $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
 );
 
 @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-input-text.scss

@@ -9,7 +9,7 @@ $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
 );
 
@@ -17,7 +17,7 @@ $component-selector: '.#{ $component-name}';
 @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;
 	}
@@ -29,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;
@@ -39,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

@@ -8,6 +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

@@ -8,6 +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-select.scss

@@ -9,7 +9,7 @@ $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
 );
 
@@ -17,7 +17,7 @@ $component-selector: '.#{ $component-name}';
 @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;
 	}
@@ -29,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;
@@ -39,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

@@ -8,6 +8,6 @@ $component-map: $vv-tab;
 	$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-table.scss

@@ -8,6 +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

@@ -8,6 +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

@@ -9,7 +9,7 @@ $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
 );
 
@@ -17,7 +17,7 @@ $component-selector: '.#{ $component-name}';
 @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;
 	}
@@ -29,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;
@@ -39,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

@@ -8,6 +8,6 @@ $component-map: $vv-toast;
 	$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-tooltip.scss

@@ -9,20 +9,20 @@ $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
 );
 
 @include wrap-with-where(
 	$selector: '*:has(#{$component-selector})',
-	$enabled: $zero-specificity-for-compoenents
+	$enabled: $zero-specificity-for-components
 ) {
 	position: relative;
 }
 
 @include wrap-with-where(
 	$selector: '*:has(> #{$component-selector})',
-	$enabled: $zero-specificity-for-compoenents
+	$enabled: $zero-specificity-for-components
 ) {
 	&:hover,
 	&:focus-visible,

package/src/export.scss

@@ -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;
 	}

package/src/props/index.scss

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