@volverjs/style 0.1.15 → 0.1.17

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.15",
+  "version": "0.1.17",
   "engines": {
     "node": ">= 12.x"
   },
@@ -36,48 +36,48 @@
     "dist/*"
   ],
   "devDependencies": {
-    "@iconify/vue": "^4.1.2",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vueuse/core": "^11.2.0",
+    "@iconify/vue": "^4.3.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vueuse/core": "^12.7.0",
     "@vueuse/head": "^2.0.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-vue": "^9.30.0",
-    "glob": "^11.0.0",
+    "eslint-config-prettier": "^10.0.2",
+    "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.9",
-    "prettier": "^3.3.3",
+    "postcss": "^8.5.3",
+    "postcss-html": "^1.8.0",
+    "postcss-preset-env": "^10.1.5",
+    "prettier": "^3.5.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.6",
-    "stylelint": "^16.10.0",
+    "remark-gfm": "^4.0.1",
+    "remark-lint": "^10.0.1",
+    "sass": "^1.85.1",
+    "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.10",
-    "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.1.0",
+    "unplugin-vue-components": "^28.4.0",
+    "vite": "^6.2.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.5",
+    "vite-plugin-stylelint": "^6.0.0",
     "vite-plugin-vue-layouts": "^0.11.0",
-    "vite-ssg": "^0.24.1",
+    "vite-ssg": "^25.2.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/settings/components/_vv-nav.scss

@@ -33,6 +33,11 @@ $vv-nav: (
 				current: (
 					color: var(--color-word-1),
 				),
+				disabled: (
+					opacity: var(--opacity-50),
+					cursor: not-allowed,
+					pointer-events: none,			
+				),
 			),
 		),
 		separator: (

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

@@ -153,6 +153,35 @@ $vv-select: (
 		),
 	),
 	modifier: (
+		readonly: (
+			opacity: var(--opacity-100),
+			cursor: text,
+			user-select: text,
+			element: (
+				wrapper: (
+					pseudo: (
+						before: (
+							opacity: var(--opacity-0),
+						),
+						after: (
+							opacity: var(--opacity-0),
+						),
+					),
+					state: (
+						hover: (
+							background-color: var(--input-background-color),
+						),
+						focus-within: (
+							background-color: var(--input-background-color),
+						),
+					),
+				),
+				input: (
+					background-image: none,
+					cursor: 'text',
+				),
+			),
+		),
 		dirty: (
 			element: (
 				input: (
@@ -307,35 +336,6 @@ $vv-select: (
 				),
 			),
 		),
-		readonly: (
-			opacity: var(--opacity-100),
-			cursor: text,
-			user-select: text,
-			element: (
-				wrapper: (
-					pseudo: (
-						before: (
-							opacity: var(--opacity-0),
-						),
-						after: (
-							opacity: var(--opacity-0),
-						),
-					),
-					state: (
-						hover: (
-							background-color: var(--input-background-color),
-						),
-						focus-within: (
-							background-color: var(--input-background-color),
-						),
-					),
-				),
-				input: (
-					background-image: none,
-					cursor: 'text',
-				),
-			),
-		),
 	),
 	state: (
 		disabled: (

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/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(