@volverjs/style 0.1.12-beta.14 → 0.1.12-beta.16

package/package.json

@@ -24,11 +24,10 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.12-beta.14",
+  "version": "0.1.12-beta.16",
   "engines": {
     "node": ">= 12.x"
   },
-  "packageManager": "pnpm@7.8.0",
   "type": "module",
   "main": "dist/volver.css",
   "style": "dist/volver.css",
@@ -37,48 +36,47 @@
     "dist/*"
   ],
   "devDependencies": {
-    "@iconify/vue": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.5.1",
-    "@vueuse/core": "^10.6.1",
+    "@iconify/vue": "^4.1.2",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vueuse/core": "^10.11.0",
     "@vueuse/head": "^2.0.0",
-    "eslint": "^8.54.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-vue": "^9.19.2",
-    "glob": "^10.3.10",
+    "eslint-config-prettier": "^9.1.0",
+    "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.31",
-    "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.5",
-    "stylelint": "^15.11.0",
-    "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-recommended-scss": "^13.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": "^11.1.0",
-    "unplugin-auto-import": "^0.17.1",
-    "unplugin-vue-components": "^0.25.2",
-    "vite": "^4.4.11",
-    "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-stylelint": "^5.2.1",
-    "vite-plugin-vue-layouts": "^0.8.0",
-    "vite-ssg": "^0.23.5",
-    "vite-ssg-sitemap": "^0.6.1",
-    "vue": "^3.3.9",
+    "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.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",
@@ -232,6 +230,7 @@
     "dev": "vite --port 3000 --open",
     "build": "node ./scripts/build.js",
     "design-tokens": "node ./scripts/generateDesignTokens.js",
-    "styleguide": "vite-ssg build"
+    "styleguide": "vite-ssg build",
+    "preview": "vite preview"
   }
 }

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/export.scss

@@ -233,6 +233,7 @@
 	@each $size, $value in $spacing {
 		spacing__#{$size}: $value;
 	}
+
 	@each $size, $value in $spacing-dynamic {
 		@if type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
@@ -247,6 +248,7 @@
 	@each $size, $value in $font-size {
 		font-size__#{$size}: $value;
 	}
+
 	@each $size, $value in $font-size-dynamic {
 		@if type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {

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

@@ -64,7 +64,7 @@ $vv-alert: (
 			left: 50%,
 			background-color: var(--color-gray),
 			[animation]: pie-masks var(--alert-duration) steps(1, end) reverse,
-			z-index: 1,
+			z-index: var(--z-1),
 		),
 	),
 	modifier: (

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

@@ -175,6 +175,12 @@ $vv-input-file: (
 				),
 			),
 		),
+		drop-area-action: (
+			position: absolute,
+			top: var(--spacing-8),
+			right: var(--spacing-8),
+			z-index: var(--z-1),
+		),
 		preview: (
 			position: absolute,
 			display: flex,
@@ -193,7 +199,7 @@ $vv-input-file: (
 			height: var(--border-2),
 			bottom: 0,
 			left: 0,
-			z-index: 1,
+			z-index: var(--z-1),
 			pseudo: (
 				-webkit-progress-bar: (
 						background-color: transparent,
@@ -228,6 +234,11 @@ $vv-input-file: (
 			gap: var(--spacing-8),
 			background-color: var(--input-background-color),
 			padding: var(--spacing-8),
+			state: (
+				active: (
+					background-color: var(--color-surface-2),
+				),
+			),
 		),
 		item-name: (
 			white-space: nowrap,
@@ -241,14 +252,22 @@ $vv-input-file: (
 			align-self: flex-end,
 		),
 		item-link: (
+			white-space: nowrap,
+			text-overflow: ellipsis,
+			overflow: hidden,
 			cursor: pointer,
 			text-decoration: underline,
 		),
 		item-icon: (
 			flex-shrink: 0,
 		),
+		item-action: (
+			flex-shrink: 0,
+			cursor: pointer,
+		),
 		item-remove: (
 			flex-shrink: 0,
+			cursor: pointer,
 			background-image: var(--bg-close),
 			width: 1.4em,
 			height: 1.4em,
@@ -258,7 +277,6 @@ $vv-input-file: (
 			border-radius: var(--rounded-full),
 			background-color: var(--color-surface-3),
 			margin-inline-start: auto,
-			cursor: pointer,
 			transition: var(--transition-colors),
 			state: (
 				hover: (
@@ -426,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-input-text.scss

@@ -305,7 +305,7 @@ $vv-input-text: (
 				),
 				label: (
 					position: absolute,
-					z-index: 1,
+					z-index: var(--z-1),
 					min-height: var(--input-min-height),
 					line-height: var(--input-min-height),
 					pointer-events: none,

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

@@ -257,7 +257,7 @@ $vv-select: (
 				),
 				label: (
 					position: absolute,
-					z-index: 1,
+					z-index: var(--z-1),
 					min-height: var(--input-min-height),
 					line-height: var(--input-min-height),
 					pointer-events: none,

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),
@@ -225,7 +226,7 @@ $vv-textarea: (
 				),
 				label: (
 					position: absolute,
-					z-index: 1,
+					z-index: var(--z-1),
 					min-height: var(--input-min-height),
 					line-height: var(--input-min-height),
 					pointer-events: none,

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/layout.scss

@@ -63,7 +63,6 @@
 	$attribute: display,
 	$zero-specificity: $zero-specificity-for-utilities
 );
-
 @include spread-map-into-utilities(
 	$map: $display-with-breakpoints,
 	$attribute: display,
@@ -135,9 +134,11 @@
 	$value in map.merge($placement, map.merge($spacing, $spacing-dynamic))
 {
 	$var: $value;
+
 	@if not map-has-key($placement, $size) {
 		// check if value is not a map (spacing-dynamic)
 		$var: var(--spacing-#{$size});
+
 		@if type-of($value) != 'map' {
 			$var: var(--spacing-#{$size}, #{$value});
 		}
@@ -147,6 +148,7 @@
 	%inset-#{$size} {
 		inset: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.inset-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -158,6 +160,7 @@
 	%inset-x-#{$size} {
 		inset-inline: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.inset-x-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -169,6 +172,7 @@
 	%inset-y-#{$size} {
 		inset-block: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.inset-y-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -181,6 +185,7 @@
 		%#{$direction}-#{$size} {
 			#{$direction}: #{$var};
 		}
+
 		@include wrap-with-where(
 			$selector: '.#{$direction}-#{$size}',
 			$enabled: $zero-specificity-for-utilities

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