@volverjs/style 0.1.14 → 0.1.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@volverjs/style",
   "description": "@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui-* and static webpages as well.",
-  "author": "24/Consulting",
+  "author": "8 wave",
   "license": "MIT",
   "keywords": [
     "css",
@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.14",
+  "version": "0.1.16",
   "engines": {
     "node": ">= 12.x"
   },
@@ -36,48 +36,48 @@
     "dist/*"
   ],
   "devDependencies": {
-    "@iconify/vue": "^4.1.2",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vueuse/core": "^11.1.0",
+    "@iconify/vue": "^4.3.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vueuse/core": "^12.5.0",
     "@vueuse/head": "^2.0.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-vue": "^9.29.0",
-    "glob": "^11.0.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-vue": "^9.32.0",
+    "glob": "^11.0.1",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^9.2.0",
     "markdown-it-prism": "^2.3.0",
-    "postcss": "^8.4.47",
-    "postcss-html": "^1.7.0",
-    "postcss-preset-env": "^10.0.7",
-    "prettier": "^3.3.3",
+    "postcss": "^8.5.1",
+    "postcss-html": "^1.8.0",
+    "postcss-preset-env": "^10.1.3",
+    "prettier": "^3.4.2",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
     "reduce-css-calc": "^2.1.8",
     "remark": "^15.0.1",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
-    "remark-lint": "^10.0.0",
-    "sass": "^1.80.2",
-    "stylelint": "^16.10.0",
+    "remark-lint": "^10.0.1",
+    "sass": "^1.84.0",
+    "stylelint": "^16.14.1",
     "stylelint-config-recommended-scss": "^14.1.0",
-    "stylelint-config-recommended-vue": "^1.5.0",
-    "stylelint-config-standard-scss": "^13.1.0",
-    "unplugin-auto-import": "^0.18.3",
-    "unplugin-vue-components": "^0.27.4",
-    "vite": "^5.4.9",
-    "vite-plugin-css-export": "^3.0.1",
+    "stylelint-config-recommended-vue": "^1.6.0",
+    "stylelint-config-standard-scss": "^14.0.0",
+    "unplugin-auto-import": "^19.0.0",
+    "unplugin-vue-components": "^28.0.0",
+    "vite": "^6.1.0",
+    "vite-plugin-css-export": "^3.0.2",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^2.0.0",
     "vite-plugin-markdown": "^2.2.0",
-    "vite-plugin-pages": "^0.32.3",
-    "vite-plugin-stylelint": "^5.3.1",
+    "vite-plugin-pages": "^0.32.4",
+    "vite-plugin-stylelint": "^6.0.0",
     "vite-plugin-vue-layouts": "^0.11.0",
-    "vite-ssg": "^0.23.8",
+    "vite-ssg": "^25.0.0",
     "vite-ssg-sitemap": "^0.8.1",
-    "vue": "^3.5.12",
+    "vue": "^3.5.13",
     "vue-live": "^2.5.4",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.5.0"
   },
   "exports": {
     ".": "./dist/volver.css",
@@ -234,6 +234,8 @@
     "styleguide": "vite-ssg build",
     "preview": "vite preview",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "stylelint": "stylelint \"src/**/*.scss\"",
+    "stylelint:fix": "stylelint --fix \"src/**/*.scss\""
   }
 }

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

@@ -17,6 +17,7 @@ $component-selector: '.#{$component-name}';
 // disabled and readonly
 @each $state in ('disabled', 'readonly') {
 	$selector: '#{$component-selector}:has(input[#{$state}])';
+
 	@include wrap-with-where(
 		$selector: $selector,
 		$enabled: $zero-specificity-for-components
@@ -33,6 +34,7 @@ $component-selector: '.#{$component-name}';
 				'#{$selector} #{$component-selector}__#{$element}'
 			);
 			$alias: map.get($component-map, 'element', $element, '_alias');
+
 			@if $alias {
 				$element-selector: list.append(
 					$element-selector,
@@ -52,6 +54,7 @@ $component-selector: '.#{$component-name}';
 			@each $elementState, $elementMap in map.get($map, 'state') {
 				@if $elementState {
 					$element-selector-state: ();
+
 					@each $item in $element-selector {
 						$element-selector-state: list.append(
 							$element-selector-state,
@@ -73,12 +76,14 @@ $component-selector: '.#{$component-name}';
 			@each $pseudo, $pseudoMap in map.get($map, 'pseudo') {
 				@if $pseudo {
 					$element-selector-pseudo: ();
+
 					@each $item in $element-selector {
 						$element-selector-pseudo: list.append(
 							$element-selector-pseudo,
 							('#{$item}::#{$pseudo}')
 						);
 					}
+
 					@include wrap-with-where(
 						$selector: $element-selector-pseudo,
 						$enabled: $zero-specificity-for-components

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

@@ -17,6 +17,7 @@ $component-selector: '.#{$component-name}';
 // disabled and readonly
 @each $state in ('disabled', 'readonly') {
 	$selector: '#{$component-selector}:has(input[#{$state}])';
+
 	@include wrap-with-where(
 		$selector: $selector,
 		$enabled: $zero-specificity-for-components
@@ -33,6 +34,7 @@ $component-selector: '.#{$component-name}';
 				'#{$selector} #{$component-selector}__#{$element}'
 			);
 			$alias: map.get($component-map, 'element', $element, '_alias');
+
 			@if $alias {
 				$element-selector: list.append(
 					$element-selector,
@@ -52,6 +54,7 @@ $component-selector: '.#{$component-name}';
 			@each $elementState, $elementMap in map.get($map, 'state') {
 				@if $elementState {
 					$element-selector-state: ();
+
 					@each $item in $element-selector {
 						$element-selector-state: list.append(
 							$element-selector-state,
@@ -73,12 +76,14 @@ $component-selector: '.#{$component-name}';
 			@each $pseudo, $pseudoMap in map.get($map, 'pseudo') {
 				@if $pseudo {
 					$element-selector-pseudo: ();
+
 					@each $item in $element-selector {
 						$element-selector-pseudo: list.append(
 							$element-selector-pseudo,
 							('#{$item}::#{$pseudo}')
 						);
 					}
+
 					@include wrap-with-where(
 						$selector: $element-selector-pseudo,
 						$enabled: $zero-specificity-for-components

package/src/components/vv-select.scss

@@ -17,6 +17,7 @@ $component-selector: '.#{ $component-name}';
 // disabled
 @each $state in ('disabled') {
 	$selector: '#{$component-selector}:has(select[#{$state}])';
+
 	@include wrap-with-where(
 		$selector: $selector,
 		$enabled: $zero-specificity-for-components
@@ -33,6 +34,7 @@ $component-selector: '.#{ $component-name}';
 				'#{$selector} #{$component-selector}__#{$element}'
 			);
 			$alias: map.get($component-map, 'element', $element, '_alias');
+
 			@if $alias {
 				$element-selector: list.append(
 					$element-selector,
@@ -52,6 +54,7 @@ $component-selector: '.#{ $component-name}';
 			@each $elementState, $elementMap in map.get($map, 'state') {
 				@if $elementState {
 					$element-selector-state: ();
+
 					@each $item in $element-selector {
 						$element-selector-state: list.append(
 							$element-selector-state,
@@ -73,12 +76,14 @@ $component-selector: '.#{ $component-name}';
 			@each $pseudo, $pseudoMap in map.get($map, 'pseudo') {
 				@if $pseudo {
 					$element-selector-pseudo: ();
+
 					@each $item in $element-selector {
 						$element-selector-pseudo: list.append(
 							$element-selector-pseudo,
 							('#{$item}::#{$pseudo}')
 						);
 					}
+
 					@include wrap-with-where(
 						$selector: $element-selector-pseudo,
 						$enabled: $zero-specificity-for-components

package/src/components/vv-textarea.scss

@@ -17,6 +17,7 @@ $component-selector: '.#{ $component-name}';
 // disabled and readonly
 @each $state in ('disabled', 'readonly') {
 	$selector: '#{$component-selector}:has(textarea[#{$state}])';
+
 	@include wrap-with-where(
 		$selector: $selector,
 		$enabled: $zero-specificity-for-components
@@ -33,6 +34,7 @@ $component-selector: '.#{ $component-name}';
 				'#{$selector} #{$component-selector}__#{$element}'
 			);
 			$alias: map.get($component-map, 'element', $element, '_alias');
+
 			@if $alias {
 				$element-selector: list.append(
 					$element-selector,
@@ -52,6 +54,7 @@ $component-selector: '.#{ $component-name}';
 			@each $elementState, $elementMap in map.get($map, 'state') {
 				@if $elementState {
 					$element-selector-state: ();
+
 					@each $item in $element-selector {
 						$element-selector-state: list.append(
 							$element-selector-state,
@@ -73,12 +76,14 @@ $component-selector: '.#{ $component-name}';
 			@each $pseudo, $pseudoMap in map.get($map, 'pseudo') {
 				@if $pseudo {
 					$element-selector-pseudo: ();
+
 					@each $item in $element-selector {
 						$element-selector-pseudo: list.append(
 							$element-selector-pseudo,
 							('#{$item}::#{$pseudo}')
 						);
 					}
+
 					@include wrap-with-where(
 						$selector: $element-selector-pseudo,
 						$enabled: $zero-specificity-for-components

package/src/props/transitions.scss

@@ -29,6 +29,7 @@
 		@each $property, $value in $transition-property {
 			@if $property != 'none' {
 				$transition: '';
+
 				@each $prop in str-split($value, ', ') {
 					$transition: $transition +
 						$prop +

package/src/settings/components/_vv-card.scss

@@ -4,11 +4,8 @@ $vv-card: (
 	flex-direction: column,
 	overflow: hidden,
 	border-color: var(--color-surface-4),
-	border-top-width: var(--border),
-	border-right-width: var(--border),
-	border-bottom-width: var(--border),
-	border-left-width: var(--border),
-	border-style: none,
+	border-width: var(--border),
+	border-style: solid,
 	border-radius: var(--rounded-lg),
 	margin: var(--spacing-0),
 	background-color: var(--color-surface),

package/src/themes/dark/settings/_index.scss

@@ -1,7 +1,6 @@
 @forward 'colors';
 @forward 'background';
 @forward 'input';
-
 @forward 'components/vv-alert';
 @forward 'components/vv-avatar';
 @forward 'components/vv-badge';

package/src/utilities/borders.scss

@@ -44,7 +44,6 @@
 	$bps: $breakpoints,
 	$zero-specificity: $zero-specificity-for-utilities
 );
-
 @include spread-map-into-utilities(
 	$map: $border-width,
 	$class: border-x,
@@ -56,7 +55,6 @@
 	$prop: border,
 	$zero-specificity: $zero-specificity-for-utilities
 );
-
 @include spread-map-into-utilities(
 	$map: $border-width,
 	$class: border-y,

package/src/utilities/sizing.scss

@@ -31,7 +31,6 @@
 	$prop: w,
 	$zero-specificity: $zero-specificity-for-utilities
 );
-
 @include spread-map-into-utilities(
 	$map: $height,
 	$class: h,
@@ -40,18 +39,18 @@
 	$prop: h,
 	$zero-specificity: $zero-specificity-for-utilities
 );
-
 @include spread-map-into-utilities(
 	$map: $max-width,
 	$class: max-w,
 	$attribute: max-width,
+	$bps: $breakpoints,
 	$zero-specificity: $zero-specificity-for-utilities
 );
-
 @include spread-map-into-utilities(
 	$map: $max-height,
 	$class: max-h,
 	$attribute: max-height,
+	$bps: $breakpoints,
 	$zero-specificity: $zero-specificity-for-utilities
 );
 
@@ -60,6 +59,7 @@
 		%max-w-screen-#{$breakpoint} {
 			max-width: $breakpoint-value;
 		}
+
 		@include wrap-with-where(
 			$selector: '.max-w-screen-#{$breakpoint}',
 			$enabled: $zero-specificity-for-utilities
@@ -74,12 +74,13 @@
 	$map: $min-width,
 	$class: min-w,
 	$attribute: min-width,
+	$bps: $breakpoints,
 	$zero-specificity: $zero-specificity-for-utilities
 );
-
 @include spread-map-into-utilities(
 	$map: $min-height,
 	$class: min-h,
 	$attribute: min-height,
+	$bps: $breakpoints,
 	$zero-specificity: $zero-specificity-for-utilities
 );

package/src/utilities/transitions.scss

@@ -36,6 +36,7 @@
 		$enabled: $zero-specificity-for-utilities
 	) {
 		transition-property: string.unquote($value);
+
 		@if $property != 'none' {
 			transition-duration: map.get($transition-duration-delay, 300);
 			transition-timing-function: map.get(