@volverjs/style 0.1.11-beta.1 → 0.1.11-beta.2

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.11-beta.1",
+  "version": "0.1.11-beta.2",
   "engines": {
     "node": ">= 12.x"
   },
@@ -38,46 +38,46 @@
   ],
   "devDependencies": {
     "@iconify/vue": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.2.2",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vueuse/core": "^10.1.2",
     "@vueuse/head": "^1.1.26",
-    "eslint": "^8.40.0",
+    "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.12.0",
-    "glob": "^10.2.3",
+    "eslint-plugin-vue": "^9.14.0",
+    "glob": "^10.2.6",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-prism": "^2.3.0",
     "postcss": "^8.4.23",
     "postcss-html": "^1.5.0",
-    "postcss-preset-env": "^8.3.2",
+    "postcss-preset-env": "^8.4.1",
     "prism-themes": "^1.9.0",
-    "prismjs": "1.29.0",
-    "remark": "^14.0.2",
+    "prismjs": "^1.29.0",
+    "remark": "^14.0.3",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
-    "remark-lint": "^9.1.1",
+    "remark-lint": "^9.1.2",
     "sass": "^1.62.1",
-    "stylelint": "^15.6.1",
+    "stylelint": "^15.6.2",
     "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-recommended-scss": "^11.0.0",
+    "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard-scss": "^9.0.0",
-    "unplugin-auto-import": "^0.15.3",
+    "unplugin-auto-import": "^0.16.2",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.3.5",
+    "vite": "^4.3.8",
     "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.29.0",
+    "vite-plugin-pages": "^0.30.1",
     "vite-plugin-stylelint": "^4.3.0",
     "vite-plugin-vue-layouts": "^0.8.0",
     "vite-ssg": "^0.22.2",
     "vite-ssg-sitemap": "^0.5.1",
-    "vue": "^3.3.1",
-    "vue-live": "2.5.3",
-    "vue-router": "^4.2.0"
+    "vue": "^3.3.4",
+    "vue-live": "^2.5.3",
+    "vue-router": "^4.2.1"
   },
   "exports": {
     ".": "./dist/volver.css",

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

@@ -1,5 +1,6 @@
 $vv-dropdown: (
 	--dropdown-border-radius: 0px,
+	--dropdown-custom-position: false,
 	position: relative,
 	z-index: var(--z-dropdown),
 	display: flex,
@@ -108,5 +109,87 @@ $vv-dropdown: (
 				),
 			),
 		),
+		dialog: (
+			--dropdown-border-radius: var(--rounded-lg),
+			--dropdown-custom-position: true,
+			position: fixed,
+			display: flex,
+			inset: 0,
+			width: auto,
+			height: auto,
+			z-index: var(--z-modal-backdrop),
+			background-color: var(--color-backdrop),
+			backdrop-filter: var(--blur-sm),
+			justify-content: flex-end,
+			align-items: center,
+			padding: var(--spacing-lg),
+			gap: var(--spacing-md),
+			state: (
+				close: (
+					display: none,
+				),
+			),
+			element: (
+				list: (
+					max-width: clamp(30dvw, 40rem, 90dvw),
+					z-index: var(--z-modal),
+				),
+			),
+		),
+		mobile: (
+			breakpoint: (
+				down-xs: (
+					--dropdown-border-radius: var(--rounded-lg),
+					--dropdown-custom-position: true,
+					position: fixed,
+					inset: 0,
+					width: auto,
+					height: auto,
+					z-index: var(--z-modal-backdrop),
+					background-color: var(--color-backdrop),
+					backdrop-filter: var(--blur-sm),
+					justify-content: flex-end,
+					padding: var(--spacing-lg),
+					gap: var(--spacing-md),
+				),
+			),
+			element: (
+				list: (
+					breakpoint: (
+						down-xs: (
+							z-index: var(--z-modal),
+						),
+					),
+				),
+			),
+		),
+	),
+	transition: (
+		fade-block: (
+			active: (
+				transition: var(--transition-opacity),
+				element: (
+					list: (
+						transition: var(--transition-transform),
+					),
+				),
+			),
+			enter-from: (
+				opacity: var(--opacity-0),
+				element: (
+					list: (
+						transform: translateY(100%),
+					),
+				),
+			),
+			leave-to: (
+				opacity: var(--opacity-0),
+				element: (
+					list: (
+						transform: translateY(100%),
+					),
+				),
+			),
+		),
 	),
 ) !default;

package/src/tools/_breakpoints.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:list';
 
 // Breakpoint viewport sizes and media queries.
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:

package/src/tools/_mixins.scss

@@ -667,7 +667,68 @@
 	}
 	@if type-of(map.get($map, $key)) == 'map' {
 		@each $breakpoint, $value in map.get($map, $key) {
-			@if map.has-key($bps, $breakpoint) {
+			@if string.index($breakpoint, '-') {
+				$operator: list.nth(string.split($breakpoint, '-'), 1);
+				$bp: list.nth(string.split($breakpoint, '-'), 2);
+
+				@if map.has-key($bps, $bp) {
+					@if $operator == 'up' {
+						@include wrap-with-where(
+							$selector: '#{$modifier}#{$block}',
+							$enabled: $zero-specificity
+						) {
+							@include media-breakpoint-up($bp, $bps) {
+								@include spread-map-into-attrs(
+									$original: $original,
+									$map: $value,
+									$prefix: $prefix,
+									$variant: #{$key}-#{$breakpoint},
+									$deep: true,
+									$props: $props
+								);
+							}
+						}
+					}
+					@if $operator == 'down' {
+						@include wrap-with-where(
+							$selector: '#{$modifier}#{$block}',
+							$enabled: $zero-specificity
+						) {
+							@include media-breakpoint-down($bp, $bps) {
+								@include spread-map-into-attrs(
+									$original: $original,
+									$map: $value,
+									$prefix: $prefix,
+									$variant: #{$key}-#{$breakpoint},
+									$deep: true,
+									$props: $props
+								);
+							}
+						}
+					}
+					@if map.has-key($bps, $operator) {
+						@include wrap-with-where(
+							$selector: '#{$modifier}#{$block}',
+							$enabled: $zero-specificity
+						) {
+							@include media-breakpoint-between(
+								$operator,
+								$bp,
+								$bps
+							) {
+								@include spread-map-into-attrs(
+									$original: $original,
+									$map: $value,
+									$prefix: $prefix,
+									$variant: #{$key}-#{$breakpoint},
+									$deep: true,
+									$props: $props
+								);
+							}
+						}
+					}
+				}
+			} @else if map.has-key($bps, $breakpoint) {
 				@include wrap-with-where(
 					$selector: '#{$modifier}#{$block}',
 					$enabled: $zero-specificity