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

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.12-beta.13",
+  "version": "0.1.12-beta.15",
   "engines": {
     "node": ">= 12.x"
   },
@@ -38,19 +38,19 @@
   ],
   "devDependencies": {
     "@iconify/vue": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.4.0",
-    "@vueuse/core": "^10.4.1",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vueuse/core": "^10.7.1",
     "@vueuse/head": "^2.0.0",
-    "eslint": "^8.50.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-vue": "^9.19.2",
     "glob": "^10.3.10",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-prism": "^2.3.0",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.32",
     "postcss-html": "^1.5.0",
-    "postcss-preset-env": "^9.1.4",
+    "postcss-preset-env": "^9.3.0",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
     "reduce-css-calc": "^2.1.8",
@@ -58,25 +58,24 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-lint": "^9.1.2",
-    "sass": "^1.68.0",
-    "stylelint": "^15.10.3",
-    "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-recommended-scss": "^13.0.0",
+    "sass": "^1.69.6",
+    "stylelint": "^16.1.0",
+    "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-config-recommended-vue": "^1.5.0",
-    "stylelint-config-standard-scss": "^11.0.0",
-    "unplugin-auto-import": "^0.16.6",
-    "unplugin-vue-components": "^0.25.2",
-    "vite": "^4.4.11",
+    "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",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^1.6.0",
     "vite-plugin-markdown": "^2.1.0",
-    "vite-plugin-pages": "^0.31.0",
-    "vite-plugin-stylelint": "^5.1.1",
-    "vite-plugin-vue-layouts": "^0.8.0",
-    "vite-ssg": "^0.23.3",
-    "vite-ssg-sitemap": "^0.6.0",
-    "vue": "^3.3.4",
+    "vite-plugin-pages": "^0.32.0",
+    "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",
     "vue-live": "^2.5.4",
     "vue-router": "^4.2.5"
   },
@@ -232,6 +231,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/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-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: (

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

@@ -225,7 +225,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/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