@volverjs/style 0.1.16 → 0.1.18

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.16",
+  "version": "0.1.18",
   "engines": {
     "node": ">= 12.x"
   },
@@ -36,48 +36,48 @@
     "dist/*"
   ],
   "devDependencies": {
-    "@iconify/vue": "^4.3.0",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vueuse/core": "^12.5.0",
+    "@iconify/vue": "^5.0.0",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vueuse/core": "^13.2.0",
     "@vueuse/head": "^2.0.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-prettier": "^5.2.3",
-    "eslint-plugin-vue": "^9.32.0",
-    "glob": "^11.0.1",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.4.0",
+    "eslint-plugin-vue": "^10.1.0",
+    "glob": "^11.0.2",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^9.2.0",
-    "markdown-it-prism": "^2.3.0",
-    "postcss": "^8.5.1",
+    "markdown-it-prism": "^3.0.0",
+    "postcss": "^8.5.3",
     "postcss-html": "^1.8.0",
-    "postcss-preset-env": "^10.1.3",
-    "prettier": "^3.4.2",
+    "postcss-preset-env": "^10.1.6",
+    "prettier": "^3.5.3",
     "prism-themes": "^1.9.0",
-    "prismjs": "^1.29.0",
+    "prismjs": "^1.30.0",
     "reduce-css-calc": "^2.1.8",
     "remark": "^15.0.1",
     "remark-frontmatter": "^5.0.0",
-    "remark-gfm": "^4.0.0",
+    "remark-gfm": "^4.0.1",
     "remark-lint": "^10.0.1",
-    "sass": "^1.84.0",
-    "stylelint": "^16.14.1",
-    "stylelint-config-recommended-scss": "^14.1.0",
+    "sass": "^1.89.0",
+    "stylelint": "^16.19.1",
+    "stylelint-config-recommended-scss": "^15.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",
+    "stylelint-config-standard-scss": "^15.0.1",
+    "unplugin-auto-import": "^19.2.0",
+    "unplugin-vue-components": "^28.5.0",
+    "vite": "^6.3.5",
     "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.4",
+    "vite-plugin-pages": "^0.33.0",
     "vite-plugin-stylelint": "^6.0.0",
     "vite-plugin-vue-layouts": "^0.11.0",
-    "vite-ssg": "^25.0.0",
-    "vite-ssg-sitemap": "^0.8.1",
-    "vue": "^3.5.13",
+    "vite-ssg": "^27.0.1",
+    "vite-ssg-sitemap": "^0.9.0",
+    "vue": "^3.5.14",
     "vue-live": "^2.5.4",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.1"
   },
   "exports": {
     ".": "./dist/volver.css",

package/src/settings/_background.scss

@@ -199,33 +199,33 @@ $gradient: (
 	17: conic-gradient(from -90deg at 50% -25%, blue, blueviolet),
 	18: #{linear-gradient(
 			0deg,
-			hsla(0deg 100% 50% / 80%),
-			hsla(0deg 100% 50% / 0%) 75%
+			hsl(0deg 100% 50% / 80%),
+			hsl(0deg 100% 50% / 0%) 75%
 		),
 	linear-gradient(
 		60deg,
-		hsla(60deg 100% 50% / 80%),
-		hsla(60deg 100% 50% / 0%) 75%,
+		hsl(60deg 100% 50% / 80%),
+		hsl(60deg 100% 50% / 0%) 75%,
 	),
 	linear-gradient(
 		120deg,
-		hsla(120deg 100% 50% / 80%),
-		hsla(120deg 100% 50% / 0%) 75%,
+		hsl(120deg 100% 50% / 80%),
+		hsl(120deg 100% 50% / 0%) 75%,
 	),
 	linear-gradient(
 		180deg,
-		hsla(180deg 100% 50% / 80%),
-		hsla(180deg 100% 50% / 0%) 75%,
+		hsl(180deg 100% 50% / 80%),
+		hsl(180deg 100% 50% / 0%) 75%,
 	),
 	linear-gradient(
 		240deg,
-		hsla(240deg 100% 50% / 80%),
-		hsla(240deg 100% 50% / 0%) 75%,
+		hsl(240deg 100% 50% / 80%),
+		hsl(240deg 100% 50% / 0%) 75%,
 	),
 	linear-gradient(
 			300deg,
-			hsla(300deg 100% 50% / 80%),
-			hsla(300deg 100% 50% / 0%) 75%
+			hsl(300deg 100% 50% / 80%),
+			hsl(300deg 100% 50% / 0%) 75%
 		)},
 	19: linear-gradient(to bottom right, #ffe259, #ffa751),
 	20:

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

@@ -68,7 +68,7 @@ $vv-badge: (
 		),
 		white: (
 			background-color:
-				hsla(
+				hsl(
 					var(--color-white-hue) var(--color-white-saturation)
 						var(--color-white-lightness) / 80%
 				),
@@ -76,7 +76,7 @@ $vv-badge: (
 		),
 		black: (
 			background-color:
-				hsla(
+				hsl(
 					var(--color-black-hue) var(--color-black-saturation)
 						var(--color-black-lightness) / 80%
 				),

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

@@ -46,7 +46,7 @@ $vv-card: (
 	modifier: (
 		glass: (
 			background-color:
-				hsla(
+				hsl(
 					var(--color-surface-hue) var(--color-surface-saturation)
 						var(--color-surface-lightness) / 60%
 				),
@@ -54,7 +54,7 @@ $vv-card: (
 			element: (
 				header: (
 					background-color:
-						hsla(
+						hsl(
 							var(--color-surface-hue)
 								var(--color-surface-saturation)
 								var(--color-surface-lightness) / 30%
@@ -62,7 +62,7 @@ $vv-card: (
 				),
 				footer: (
 					background-color:
-						hsla(
+						hsl(
 							var(--color-surface-hue)
 								var(--color-surface-saturation)
 								var(--color-surface-lightness) / 30%

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: (
@@ -118,7 +123,7 @@ $vv-nav: (
 							color: var(--color-brand),
 							border-color: currentcolor,
 							background-color:
-								hsla(
+								hsl(
 									var(--color-brand-hue)
 										var(--color-brand-saturation)
 										var(--color-brand-lightness) / 5%

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

@@ -139,6 +139,31 @@ $vv-select: (
 			_alias: 'select + :where(svg, [data-icon])',
 			right: 0,
 		),
+		action: (
+			position: relative,
+			width:
+				calc(
+					var(--input-icon-width) + var(--input-spacing-left) +
+						var(--input-spacing-right)
+				),
+			height: var(--input-min-height),
+			cursor: pointer,
+			state: (
+				disabled: (
+					cursor: not-allowed,
+					opacity: var(--opacity-50),
+				),
+				focus-visible: (
+					background-color: var(--color-surface-3),
+				),
+				hover: (
+					background-color: var(--color-surface-4),
+				),
+				active: (
+					background-color: var(--color-surface-5),
+				),
+			),
+		),
 		hint: (
 			_alias: '> small',
 			_combinator: '>',
@@ -153,6 +178,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,39 +361,11 @@ $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: (
 			opacity: var(--opacity-50),
+			cursor: not-allowed,
 			element: (
 				wrapper: (
 					state: (
@@ -350,6 +376,14 @@ $vv-select: (
 							background-color: var(--input-background-color),
 						),
 					),
+					pseudo: (
+						before: (
+							opacity: var(--opacity-0),
+						),
+						after: (
+							opacity: var(--opacity-0),
+						),
+					),
 				),
 			),
 		),

package/src/themes/dark/components/_vv-select.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-select);
+$component-map: $dark-vv-select;
+
+@mixin theme-dark-vv-select {
+	@include spread-map-into-props(
+		$map: $component-map,
+		$prefix: $component-name
+	);
+}
+
+:where(:host, :root, .theme):not(.theme--light) {
+	@media (prefers-color-scheme: dark) {
+		@include theme-dark-vv-select;
+	}
+}
+
+:where(.theme.theme--dark) {
+	@include theme-dark-vv-select;
+}

package/src/themes/dark/components/index.scss

@@ -5,3 +5,4 @@
 @use 'vv-dropdown-action';
 @use 'vv-dropdown-option';
 @use 'vv-nav';
+@use 'vv-select';

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

@@ -8,3 +8,4 @@
 @forward 'components/vv-dropdown-action';
 @forward 'components/vv-dropdown-option';
 @forward 'components/vv-nav';
+@forward 'components/vv-select';

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

@@ -0,0 +1,7 @@
+$dark-vv-select: (
+	state: (
+		disabled: (
+			opacity: var(--opacity-80),
+		),
+	),
+);