@volverjs/style 0.1.23 → 0.1.24-beta.2

package/package.json

@@ -24,9 +24,9 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.23",
+  "version": "0.1.24-beta.2",
   "engines": {
-    "node": ">= 12.x"
+    "node": ">= 20.x"
   },
   "type": "module",
   "main": "dist/volver.css",
@@ -38,21 +38,21 @@
   "devDependencies": {
     "@iconify/vue": "^5.0.0",
     "@nabla/vite-plugin-eslint": "^2.0.6",
-    "@types/node": "^24.9.1",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vueuse/core": "^13.9.0",
+    "@types/node": "^25.0.3",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vueuse/core": "^14.1.0",
     "@vueuse/head": "^2.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-vue": "^10.5.1",
-    "glob": "^11.0.3",
+    "eslint-plugin-vue": "^10.6.2",
+    "glob": "^13.0.0",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^9.2.0",
-    "markdown-it-prism": "^3.0.0",
+    "markdown-it-prism": "^3.0.1",
     "postcss": "^8.5.6",
     "postcss-html": "^1.8.0",
-    "postcss-preset-env": "^10.4.0",
-    "prettier": "^3.6.2",
+    "postcss-preset-env": "^10.6.0",
+    "prettier": "^3.7.4",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.30.0",
     "reduce-css-calc": "^2.1.8",
@@ -60,25 +60,25 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "remark-lint": "^10.0.1",
-    "sass-embedded": "^1.93.2",
-    "stylelint": "^16.25.0",
+    "sass-embedded": "^1.97.1",
+    "stylelint": "^16.26.1",
     "stylelint-config-recommended-scss": "^16.0.2",
     "stylelint-config-recommended-vue": "^1.6.1",
     "stylelint-config-standard-scss": "^16.0.0",
-    "unplugin-auto-import": "^20.2.0",
+    "unplugin-auto-import": "^20.3.0",
     "unplugin-vue-components": "^30.0.0",
-    "vite": "^7.1.11",
+    "vite": "^7.3.0",
     "vite-plugin-css-export": "^3.0.3",
     "vite-plugin-handlebars": "^2.0.0",
     "vite-plugin-markdown": "^2.2.0",
-    "vite-plugin-pages": "^0.33.1",
+    "vite-plugin-pages": "^0.33.2",
     "vite-plugin-stylelint": "^6.0.2",
     "vite-plugin-vue-layouts": "^0.11.0",
     "vite-ssg": "^28.2.2",
     "vite-ssg-sitemap": "^0.10.0",
-    "vue": "^3.5.22",
+    "vue": "^3.5.26",
     "vue-live": "^2.5.4",
-    "vue-router": "^4.6.3"
+    "vue-router": "^4.6.4"
   },
   "exports": {
     ".": "./dist/volver.css",

package/src/_config.scss

@@ -1,6 +1,18 @@
 // use custom props for components
 $use-custom-props-for-components: true !default;
 
+// use CSS Relative Color Syntax for color shades (modern browsers)
+// When true: uses hsl(from var(--color) h s calc(l +/- X)) with a single base variable
+// When false: uses legacy HSL channel separation (hue, saturation, lightness)
+$use-color-mix: true !default;
+
+// use CSS @layer for cascade management
+$use-css-layers: false !default;
+
+// layer names (order matters - later = higher priority)
+$layer-order: (reset, preflight, props, components, themes, utilities) !default;
+$layer-prefix: 'volver' !default;
+
 // enable zero specificity for components
 $zero-specificity-for-components: true !default;
 

package/src/_layers.scss

@@ -0,0 +1,4 @@
+@use 'context' as *;
+
+// Define CSS layer order first (if enabled)
+@include define-layers($use-css-layers, $layer-order, $layer-prefix);

package/src/_preflight.scss

@@ -9,6 +9,7 @@
 // utilities
 @use 'utilities';
 
+@include layer(preflight, $use-css-layers, $layer-prefix) {
 @if $preflight {
 	:where(.preflight) {
 		:not(.preflight-revert *) {
@@ -448,3 +449,4 @@
 		}
 	}
 }
+}

package/src/components/vv-accordion-group.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-accordion-group);
 $component-map: $vv-accordion-group;
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-accordion.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-accordion);
 $component-map: $vv-accordion;
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-alert-group.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-alert-group);
 $component-map: $vv-alert-group;
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-alert.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $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,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-avatar-group.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-avatar-group);
 $component-map: $vv-avatar-group;
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-avatar.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $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,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-badge.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-badge);
 $component-map: $vv-badge;
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-breadcrumb.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-breadcrumb);
 $component-map: $vv-breadcrumb;
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-button-group.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-button-group);
 $component-map: $vv-button-group;
 $component-selector: '.#{ $component-name}';
@@ -10,7 +11,7 @@ $button-component-selector: '.' + $button-component-name;
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
@@ -110,3 +111,5 @@ $button-component-selector: '.' + $button-component-name;
 		}
 	}
 }
+
+}

package/src/components/vv-button.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-button);
 $component-map: $vv-button;
 $component-selector: '.#{ $component-name}';
@@ -8,7 +9,7 @@ $component-selector: '.#{ $component-name}';
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$custom-block: true,
 	$bps: $breakpoints
@@ -28,7 +29,7 @@ $component-selector: '.#{ $component-name}';
 		@include spread-map-into-attrs(
 			$map: $component-map,
 			$prefix: $component-name,
-			$props: $use-custom-props-for-components
+			$use-custom-props: $use-custom-props-for-components
 		);
 	}
 
@@ -47,3 +48,5 @@ $component-selector: '.#{ $component-name}';
 		}
 	}
 }
+
+}

package/src/components/vv-card.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-card);
 $component-map: $vv-card;
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-checkbox-group.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $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,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-checkbox.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-checkbox);
 $component-map: $vv-checkbox;
 $component-selector: '.#{ $component-name}';
@@ -8,7 +9,7 @@ $component-selector: '.#{ $component-name}';
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
@@ -27,3 +28,5 @@ $component-selector: '.#{ $component-name}';
 ) {
 	@extend %#{$component-name}--indeterminate !optional;
 }
+
+}

package/src/components/vv-dialog.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-dialog);
 $component-map: $vv-dialog;
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-dropdown-action.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-dropdown-action);
 $component-map: $vv-dropdown-action;
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-dropdown-optgroup.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-dropdown-optgroup);
 $component-map: $vv-dropdown-optgroup;
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-dropdown-option.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-dropdown-option);
 $component-map: $vv-dropdown-option;
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-dropdown.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-dropdown);
 $component-map: $vv-dropdown;
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

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

@@ -2,6 +2,7 @@
 @use 'sass:list';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-input-file);
 $component-map: $vv-input-file;
 $component-selector: '.#{$component-name}';
@@ -9,7 +10,7 @@ $component-selector: '.#{$component-name}';
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
@@ -96,3 +97,5 @@ $component-selector: '.#{$component-name}';
 		}
 	}
 }
+
+}

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

@@ -2,6 +2,7 @@
 @use 'sass:list';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-input-text);
 $component-map: $vv-input-text;
 $component-selector: '.#{$component-name}';
@@ -9,7 +10,7 @@ $component-selector: '.#{$component-name}';
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
@@ -96,3 +97,5 @@ $component-selector: '.#{$component-name}';
 		}
 	}
 }
+
+}

package/src/components/vv-nav.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $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,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-progress.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-progress);
 $component-map: $vv-progress;
 
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-radio-group.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $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,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-radio.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-radio);
 $component-map: $vv-radio;
 $component-selector: '.#{ $component-name}';
@@ -8,7 +9,7 @@ $component-selector: '.#{ $component-name}';
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
@@ -19,3 +20,5 @@ $component-selector: '.#{ $component-name}';
 ) {
 	@extend %#{$component-name}--disabled !optional;
 }
+
+}

package/src/components/vv-select.scss

@@ -2,6 +2,7 @@
 @use 'sass:list';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-select);
 $component-map: $vv-select;
 $component-selector: '.#{ $component-name}';
@@ -9,7 +10,7 @@ $component-selector: '.#{ $component-name}';
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
@@ -96,3 +97,5 @@ $component-selector: '.#{ $component-name}';
 		}
 	}
 }
+
+}

package/src/components/vv-skeleton.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-skeleton);
 $component-map: $vv-skeleton;
 $component-selector: '.#{ $component-name}';
@@ -8,7 +9,9 @@ $component-selector: '.#{ $component-name}';
 @include spread-map-into-bem(
 	$map: $component-map,
 	$block: $component-name,
-	$props: $use-custom-props-for-components,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-tab.scss

@@ -1,13 +1,16 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(components, $use-css-layers, $layer-prefix) {
 $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,
+	$use-custom-props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}