@volverjs/style 0.1.17 → 0.1.19

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.17",
+  "version": "0.1.19",
   "engines": {
     "node": ">= 12.x"
   },
@@ -36,48 +36,48 @@
     "dist/*"
   ],
   "devDependencies": {
-    "@iconify/vue": "^4.3.0",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vueuse/core": "^12.7.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.2",
-    "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",
+    "markdown-it-prism": "^3.0.0",
     "postcss": "^8.5.3",
     "postcss-html": "^1.8.0",
-    "postcss-preset-env": "^10.1.5",
-    "prettier": "^3.5.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.1",
     "remark-lint": "^10.0.1",
-    "sass": "^1.85.1",
-    "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.1.0",
-    "unplugin-vue-components": "^28.4.0",
-    "vite": "^6.2.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.5",
+    "vite-plugin-pages": "^0.33.0",
     "vite-plugin-stylelint": "^6.0.0",
     "vite-plugin-vue-layouts": "^0.11.0",
-    "vite-ssg": "^25.2.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

@@ -123,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

@@ -129,6 +129,8 @@ $vv-select: (
 		icon: (
 			_alias: '> div > :where(svg, [data-icon])',
 			position: var(--input-icon-position),
+			top: 0,
+			left: 0,
 			width: var(--input-icon-width),
 			height: var(--input-min-height),
 			margin: var(--input-icon-margin),
@@ -137,7 +139,34 @@ $vv-select: (
 		),
 		icon-after: (
 			_alias: 'select + :where(svg, [data-icon])',
+			position: var(--input-icon-position),
 			right: 0,
+			left: auto,
+		),
+		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',
@@ -340,6 +369,7 @@ $vv-select: (
 	state: (
 		disabled: (
 			opacity: var(--opacity-50),
+			cursor: not-allowed,
 			element: (
 				wrapper: (
 					state: (
@@ -350,6 +380,14 @@ $vv-select: (
 							background-color: var(--input-background-color),
 						),
 					),
+					pseudo: (
+						before: (
+							opacity: var(--opacity-0),
+						),
+						after: (
+							opacity: var(--opacity-0),
+						),
+					),
 				),
 			),
 		),

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

@@ -114,6 +114,8 @@ $vv-textarea: (
 		icon: (
 			_alias: '> div > :where(svg, [data-icon])',
 			position: var(--input-icon-position),
+			top: 0,
+			left: 0,
 			width: var(--input-icon-width),
 			height: var(--input-min-height),
 			margin: var(--input-icon-margin),
@@ -122,7 +124,9 @@ $vv-textarea: (
 		),
 		icon-after: (
 			_alias: 'textarea + :where(svg, [data-icon])',
+			position: var(--input-icon-position),
 			right: 0,
+			left: auto,
 		),
 		actions-group: (
 			display: flex,

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),
+		),
+	),
+);