@volverjs/style 0.1.22 → 0.1.24-beta.1

package/package.json

@@ -24,9 +24,9 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.22",
+  "version": "0.1.24-beta.1",
   "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.3.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.4.0",
-    "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.3.1",
-    "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.92.1",
-    "stylelint": "^16.24.0",
-    "stylelint-config-recommended-scss": "^16.0.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": "^15.0.1",
-    "unplugin-auto-import": "^20.1.0",
-    "unplugin-vue-components": "^29.0.0",
-    "vite": "^7.0.7",
-    "vite-plugin-css-export": "^3.0.2",
+    "stylelint-config-standard-scss": "^16.0.0",
+    "unplugin-auto-import": "^20.3.0",
+    "unplugin-vue-components": "^30.0.0",
+    "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.1.0",
+    "vite-ssg": "^28.2.2",
     "vite-ssg-sitemap": "^0.10.0",
-    "vue": "^3.5.21",
+    "vue": "^3.5.26",
     "vue-live": "^2.5.4",
-    "vue-router": "^4.5.1"
+    "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,6 +1,7 @@
 @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;
 
@@ -11,3 +12,5 @@ $component-map: $vv-accordion-group;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-accordion.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-accordion);
 $component-map: $vv-accordion;
 
@@ -11,3 +12,5 @@ $component-map: $vv-accordion;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-alert-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-alert-group);
 $component-map: $vv-alert-group;
 
@@ -11,3 +12,5 @@ $component-map: $vv-alert-group;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-alert.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-alert);
 $component-map: $vv-alert;
 
@@ -11,3 +12,5 @@ $component-map: $vv-alert;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-avatar-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-avatar-group);
 $component-map: $vv-avatar-group;
 
@@ -11,3 +12,5 @@ $component-map: $vv-avatar-group;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-avatar.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-avatar);
 $component-map: $vv-avatar;
 
@@ -11,3 +12,5 @@ $component-map: $vv-avatar;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-badge.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-badge);
 $component-map: $vv-badge;
 
@@ -11,3 +12,5 @@ $component-map: $vv-badge;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-breadcrumb.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-breadcrumb);
 $component-map: $vv-breadcrumb;
 
@@ -11,3 +12,5 @@ $component-map: $vv-breadcrumb;
 	$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}';
@@ -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}';
@@ -47,3 +48,5 @@ $component-selector: '.#{ $component-name}';
 		}
 	}
 }
+
+}

package/src/components/vv-card.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-card);
 $component-map: $vv-card;
 
@@ -11,3 +12,5 @@ $component-map: $vv-card;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-checkbox-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-checkbox-group);
 $component-map: $vv-checkbox-group;
 
@@ -11,3 +12,5 @@ $component-map: $vv-checkbox-group;
 	$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}';
@@ -27,3 +28,5 @@ $component-selector: '.#{ $component-name}';
 ) {
 	@extend %#{$component-name}--indeterminate !optional;
 }
+
+}

package/src/components/vv-dialog.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-dialog);
 $component-map: $vv-dialog;
 
@@ -11,3 +12,5 @@ $component-map: $vv-dialog;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-dropdown-action.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-dropdown-action);
 $component-map: $vv-dropdown-action;
 
@@ -11,3 +12,5 @@ $component-map: $vv-dropdown-action;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-dropdown-optgroup.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-dropdown-optgroup);
 $component-map: $vv-dropdown-optgroup;
 
@@ -11,3 +12,5 @@ $component-map: $vv-dropdown-optgroup;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-dropdown-option.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-dropdown-option);
 $component-map: $vv-dropdown-option;
 
@@ -11,3 +12,5 @@ $component-map: $vv-dropdown-option;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-dropdown.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-dropdown);
 $component-map: $vv-dropdown;
 
@@ -11,3 +12,5 @@ $component-map: $vv-dropdown;
 	$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}';
@@ -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}';
@@ -96,3 +97,5 @@ $component-selector: '.#{$component-name}';
 		}
 	}
 }
+
+}

package/src/components/vv-nav.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-nav);
 $component-map: $vv-nav;
 
@@ -11,3 +12,5 @@ $component-map: $vv-nav;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-progress.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-progress);
 $component-map: $vv-progress;
 
@@ -11,3 +12,5 @@ $component-map: $vv-progress;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-radio-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-radio-group);
 $component-map: $vv-radio-group;
 
@@ -11,3 +12,5 @@ $component-map: $vv-radio-group;
 	$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}';
@@ -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}';
@@ -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}';
@@ -12,3 +13,5 @@ $component-selector: '.#{ $component-name}';
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-tab.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-tab);
 $component-map: $vv-tab;
 
@@ -11,3 +12,5 @@ $component-map: $vv-tab;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-table.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-table);
 $component-map: $vv-table;
 
@@ -11,3 +12,5 @@ $component-map: $vv-table;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-text.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-text);
 $component-map: $vv-text;
 
@@ -11,3 +12,5 @@ $component-map: $vv-text;
 	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
+
+}

package/src/components/vv-textarea.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-textarea);
 $component-map: $vv-textarea;
 $component-selector: '.#{ $component-name}';
@@ -96,3 +97,5 @@ $component-selector: '.#{ $component-name}';
 		}
 	}
 }
+
+}

package/src/components/vv-tooltip.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-tooltip);
 $component-map: $vv-tooltip;
 $component-selector: '.#{ $component-name}';
@@ -21,13 +22,10 @@ $component-selector: '.#{ $component-name}';
 }
 
 @include wrap-with-where(
-	$selector: '*:has(> #{$component-selector})',
+	$selector: '*:has(> #{$component-selector}):hover > #{$component-selector}, *:has(> #{$component-selector}):focus-visible > #{$component-selector}, *:has(> #{$component-selector}).hover > #{$component-selector}, *:has(> #{$component-selector}).focus-visible > #{$component-selector}',
 	$enabled: $zero-specificity-for-components
 ) {
-	&:hover,
-	&:focus-visible,
-	&.hover,
-	&.focus-visible {
-		@extend %vv-tooltip--visible !optional;
-	}
+	@extend %vv-tooltip--visible !optional;
+}
+
 }

package/src/export.scss

@@ -541,7 +541,6 @@
 	// translate
 	@each $key, $value in $translate {
 		$name: meta.inspect($key);
-		$name: str-replace($name, '\\/', '/');
 
 		#{'translate__' + $name}: $value;
 	}

package/src/props/background.scss

@@ -1,6 +1,8 @@
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($background-image, $prefix: bg);
-	@include spread-map-into-props($gradient, $prefix: gradient);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props($background-image, $prefix: bg);
+		@include spread-map-into-props($gradient, $prefix: gradient);
+	}
 }

package/src/props/borders.scss

@@ -1,6 +1,8 @@
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($border-radius, $prefix: rounded);
-	@include spread-map-into-props($border-width, $prefix: border);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props($border-radius, $prefix: rounded);
+		@include spread-map-into-props($border-width, $prefix: border);
+	}
 }

package/src/props/breakpoints.scss

@@ -1,16 +1,18 @@
 @use 'sass:map';
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props(
-		$map: map.remove($breakpoints, 'xxs'),
-		$prefix: breakpoint
-	);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props(
+			$map: map.remove($breakpoints, 'xxs'),
+			$prefix: breakpoint
+		);
 
-	@each $breakpoint, $breakpoint-value in $breakpoints {
-		@media screen and (min-width: $breakpoint-value) {
-			--breakpoint-key: #{$breakpoint};
-			--breakpoint-value: #{$breakpoint-value};
+		@each $breakpoint, $breakpoint-value in $breakpoints {
+			@media screen and (min-width: $breakpoint-value) {
+				--breakpoint-key: #{$breakpoint};
+				--breakpoint-value: #{$breakpoint-value};
+			}
 		}
 	}
 }

package/src/props/colors.scss

@@ -1,5 +1,7 @@
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($colors, $prefix: color);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props($colors, $prefix: color);
+	}
 }