@volverjs/style 0.1.12-beta.15 → 0.1.12-beta.17

package/package.json

@@ -24,11 +24,10 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.12-beta.15",
+  "version": "0.1.12-beta.17",
   "engines": {
     "node": ">= 12.x"
   },
-  "packageManager": "pnpm@7.8.0",
   "type": "module",
   "main": "dist/volver.css",
   "style": "dist/volver.css",
@@ -37,47 +36,47 @@
     "dist/*"
   ],
   "devDependencies": {
-    "@iconify/vue": "^4.1.1",
-    "@vitejs/plugin-vue": "^5.0.0",
-    "@vueuse/core": "^10.7.1",
+    "@iconify/vue": "^4.1.2",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vueuse/core": "^10.11.0",
     "@vueuse/head": "^2.0.0",
-    "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.19.2",
-    "glob": "^10.3.10",
+    "eslint-plugin-vue": "^9.26.0",
+    "glob": "^10.4.2",
     "icss-utils": "^5.1.0",
-    "markdown-it-anchor": "^8.6.7",
+    "markdown-it-anchor": "^9.0.1",
     "markdown-it-prism": "^2.3.0",
-    "postcss": "^8.4.32",
-    "postcss-html": "^1.5.0",
-    "postcss-preset-env": "^9.3.0",
+    "postcss": "^8.4.39",
+    "postcss-html": "^1.7.0",
+    "postcss-preset-env": "^9.5.15",
+    "prettier": "^3.3.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": "^9.1.2",
-    "sass": "^1.69.6",
-    "stylelint": "^16.1.0",
+    "remark-lint": "^10.0.0",
+    "sass": "^1.77.6",
+    "stylelint": "^16.6.1",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-config-recommended-vue": "^1.5.0",
-    "stylelint-config-standard-scss": "^12.0.0",
-    "unplugin-auto-import": "^0.17.3",
-    "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.0.10",
-    "vite-plugin-css-export": "^2.0.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "unplugin-auto-import": "^0.17.6",
+    "unplugin-vue-components": "^0.27.2",
+    "vite": "^5.3.2",
+    "vite-plugin-css-export": "^3.0.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-handlebars": "^1.6.0",
-    "vite-plugin-markdown": "^2.1.0",
-    "vite-plugin-pages": "^0.32.0",
+    "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-vue-layouts": "^0.11.0",
-    "vite-ssg": "^0.23.6",
-    "vite-ssg-sitemap": "^0.6.1",
-    "vue": "^3.4.0",
+    "vite-ssg": "^0.23.7",
+    "vite-ssg-sitemap": "^0.7.1",
+    "vue": "^3.4.31",
     "vue-live": "^2.5.4",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.4.0"
   },
   "exports": {
     ".": "./dist/volver.css",

package/src/components/vv-tooltip.scss

@@ -14,7 +14,7 @@ $component-selector: '.#{ $component-name}';
 );
 
 @include wrap-with-where(
-	$selector: '*:has(#{$component-selector})',
+	$selector: '*:has(> #{$component-selector})',
 	$enabled: $zero-specificity-for-components
 ) {
 	position: relative;

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

@@ -65,7 +65,7 @@ $vv-avatar: (
 			),
 		),
 		bordered: (
-			border-color: var(--color-brand-darken-3),
+			border-color: var(--color-brand-lighten-3),
 			border-width: var(--border),
 			border-style: solid,
 		),
@@ -84,24 +84,24 @@ $vv-avatar: (
 		),
 		surface: (
 			background-color: var(--color-surface-2),
-			border-color: var(--color-surface-3),
+			border-color: var(--color-surface-5),
 			color: var(--color-word-2),
 		),
 		danger: (
 			background-color: var(--color-danger),
-			border-color: var(--color-danger-darken-3),
+			border-color: var(--color-danger-lighten-3),
 		),
 		success: (
 			background-color: var(--color-success),
-			border-color: var(--color-success-darken-3),
+			border-color: var(--color-success-lighten-3),
 		),
 		warning: (
 			background-color: var(--color-warning-darken-5),
-			border-color: var(--color-warning-darken-3),
+			border-color: var(--color-warning-darken-2),
 		),
 		info: (
 			background-color: var(--color-info-darken-5),
-			border-color: var(--color-info-darken-3),
+			border-color: var(--color-info-darken-2),
 		),
 		accent: (
 			background-color: var(--color-accent),
@@ -109,7 +109,7 @@ $vv-avatar: (
 		),
 		gray: (
 			background-color: var(--color-gray-darken-1),
-			border-color: var(--color-gray-darken-3),
+			border-color: var(--color-gray-lighten-2),
 		),
 		ring: (
 			color: var(--color-brand-darken-3),

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

@@ -18,6 +18,7 @@ $vv-button: (
 	transition: var(--transition-all),
 	will-change: all,
 	min-width: 0,
+	pointer-events: auto,
 	state: (
 		focus-visible: (
 			outline-offset: var(--spacing-4),

package/src/settings/components/_vv-input-file.scss

@@ -444,6 +444,11 @@ $vv-input-file: (
 				preview: (
 					border-radius: var(--rounded-full),
 				),
+				drop-area-action: (
+					position: relative,
+					top: auto,
+					right: auto,
+				),
 			),
 		),
 	),

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

@@ -82,6 +82,7 @@ $vv-textarea: (
 				var(--input-spacing-bottom) var(--input-spacing-left),
 			overflow: auto,
 			text-overflow: var(--input-text-overflow),
+			min-height: var(--input-min-height),
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),

package/src/tools/_mixins.scss

@@ -11,6 +11,7 @@
 @mixin assert-ascending($map, $map-name) {
 	$prev-key: null;
 	$prev-num: null;
+
 	@each $key, $num in $map {
 		@if not $prev-num or unit($num) == '%' {
 			// Do nothing
@@ -30,6 +31,7 @@
 @mixin assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
 	$values: map.values($map);
 	$first-value: list.nth($values, 1);
+
 	@if $first-value != 0 {
 		@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
 	}
@@ -39,6 +41,7 @@
 @mixin spread-map-into-props($map: (), $prefix: '', $old-key: '', $deep: true) {
 	@each $key, $value in $map {
 		$name: meta.inspect($key);
+
 		@if $name == meta.inspect($old-key) {
 			$name: $prefix;
 		} @else if $prefix != '' and meta.inspect($prefix) != meta.inspect($key)
@@ -87,10 +90,12 @@
 			@if $breakpoint-value > 0 {
 				$prefix: $breakpoint + '\\:';
 			}
+
 			@each $key, $value in $map {
 				@if $name != '' and meta.inspect($key) != meta.inspect($name) {
 					$key: #{$name}-#{meta.inspect($key)};
 				}
+
 				@if type-of($value) == 'map' and $deep {
 					@include spread-map-into-utilities(
 						$map: $value,
@@ -146,6 +151,7 @@
 							@if type-of($attribute) != 'list' {
 								$attribute: ($attribute);
 							}
+
 							@each $attr in $attribute {
 								@if $default {
 									@if $var != '' {
@@ -159,6 +165,7 @@
 							}
 						}
 					}
+
 					@include wrap-with-where(
 						$selector: '.' + $prefix + $class-name,
 						$enabled: $zero-specificity
@@ -188,9 +195,11 @@
 	@if not $original {
 		$original: $map;
 	}
+
 	@if not $block {
 		$block: &;
 	}
+
 	@if type-of(map.get($map, $key)) == 'map' {
 		@each $item, $value in map.get($map, $key) {
 			$selector: $block + '--' + $item;
@@ -306,10 +315,11 @@
 
 			@if $modifier {
 				$selectors: ();
+
 				@each $item in selector.parse($modifier) {
 					$selectors: list.join(
 						$selectors,
-						selector.nest($item, $selector)
+						selector.nest('#{$item} > ', $selector)
 					);
 				}
 
@@ -326,6 +336,7 @@
 			@if $alias {
 				@if $modifier {
 					$aliases: ();
+
 					@each $item in selector.parse($modifier) {
 						$aliases: list.join(
 							$aliases,
@@ -685,9 +696,11 @@
 	@if not $original {
 		$original: $map;
 	}
+
 	@if not $block {
 		$block: &;
 	}
+
 	@if type-of(map.get($map, $key)) == 'map' {
 		@each $breakpoint, $value in map.get($map, $key) {
 			@if string.index($breakpoint, '-') {
@@ -712,6 +725,7 @@
 							}
 						}
 					}
+
 					@if $operator == 'down' {
 						@include wrap-with-where(
 							$selector: '#{$modifier}#{$block}',
@@ -729,6 +743,7 @@
 							}
 						}
 					}
+
 					@if map.has-key($bps, $operator) {
 						@include wrap-with-where(
 							$selector: '#{$modifier}#{$block}',
@@ -831,6 +846,7 @@
 					@if $postfix != '' {
 						$key: #{$postfix}-#{$key};
 					}
+
 					@if $key == 'pseudo' {
 						@each $pseudo-element, $pseudo-map in $value {
 							@if type-of($pseudo-map) == 'map' {
@@ -971,6 +987,7 @@
 	@if type-of($selector) == 'map' or type-of($selector) == 'list' {
 		$selector: #{$selector};
 	}
+
 	@if $enabled {
 		$selector: ':where(#{unquote($selector)})';
 	}
@@ -1028,6 +1045,7 @@
 				// content
 				@content;
 			}
+
 			@include wrap-with-where(
 				$selector: $selector,
 				$enabled: $zero-specificity
@@ -1131,6 +1149,7 @@
 	@if not $block {
 		$block: &;
 	}
+
 	@if type-of(map.get($map, $key)) == 'map' {
 		@each $transition, $states in map.get($map, $key) {
 			@each $state, $value in $states {

package/src/utilities/typography.scss

@@ -34,6 +34,7 @@
 %italic {
 	font-style: italic;
 }
+
 @include wrap-with-where(
 	$selector: '.italic',
 	$enabled: $zero-specificity-for-utilities
@@ -44,6 +45,7 @@
 %non-italic {
 	font-style: normal;
 }
+
 @include wrap-with-where(
 	$selector: '.non-italic',
 	$enabled: $zero-specificity-for-utilities
@@ -56,6 +58,7 @@
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
+
 @include wrap-with-where(
 	$selector: '.antialiased',
 	$enabled: $zero-specificity-for-utilities
@@ -67,6 +70,7 @@
 	-webkit-font-smoothing: auto;
 	-moz-osx-font-smoothing: auto;
 }
+
 @include wrap-with-where(
 	$selector: '.subpixel-antialiased',
 	$enabled: $zero-specificity-for-utilities
@@ -168,6 +172,7 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
+
 @include wrap-with-where(
 	$selector: '.truncate',
 	$enabled: $zero-specificity-for-utilities
@@ -178,6 +183,7 @@
 %text-ellipsis {
 	text-overflow: ellipsis;
 }
+
 @include wrap-with-where(
 	$selector: '.text-ellipsis',
 	$enabled: $zero-specificity-for-utilities
@@ -188,6 +194,7 @@
 %text-clip {
 	text-overflow: clip;
 }
+
 @include wrap-with-where(
 	$selector: '.text-clip',
 	$enabled: $zero-specificity-for-utilities
@@ -198,6 +205,7 @@
 %text-balance {
 	text-wrap: balance;
 }
+
 @include wrap-with-where(
 	$selector: '.text-balance',
 	$enabled: $zero-specificity-for-utilities
@@ -210,6 +218,7 @@
 	overflow-wrap: normal;
 	word-break: normal;
 }
+
 @include wrap-with-where(
 	$selector: '.break-normal',
 	$enabled: $zero-specificity-for-utilities
@@ -220,6 +229,7 @@
 %break-words {
 	overflow-wrap: break-word;
 }
+
 @include wrap-with-where(
 	$selector: '.break-words',
 	$enabled: $zero-specificity-for-utilities
@@ -230,6 +240,7 @@
 %break-all {
 	word-break: break-all;
 }
+
 @include wrap-with-where(
 	$selector: '.break-all',
 	$enabled: $zero-specificity-for-utilities