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

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.12-beta.17",
+  "version": "0.1.12-beta.19",
   "engines": {
     "node": ">= 12.x"
   },
@@ -41,14 +41,14 @@
     "@vueuse/core": "^10.11.0",
     "@vueuse/head": "^2.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.26.0",
-    "glob": "^10.4.2",
+    "eslint-plugin-vue": "^9.27.0",
+    "glob": "^11.0.0",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^9.0.1",
     "markdown-it-prism": "^2.3.0",
     "postcss": "^8.4.39",
     "postcss-html": "^1.7.0",
-    "postcss-preset-env": "^9.5.15",
+    "postcss-preset-env": "^9.6.0",
     "prettier": "^3.3.2",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
@@ -57,14 +57,14 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-lint": "^10.0.0",
-    "sass": "^1.77.6",
+    "sass": "^1.77.7",
     "stylelint": "^16.6.1",
-    "stylelint-config-recommended-scss": "^14.0.0",
+    "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-config-recommended-vue": "^1.5.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": "^5.3.3",
     "vite-plugin-css-export": "^3.0.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^2.0.0",
@@ -72,7 +72,7 @@
     "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": "^0.23.8",
     "vite-ssg-sitemap": "^0.7.1",
     "vue": "^3.4.31",
     "vue-live": "^2.5.4",

package/src/export.scss

@@ -11,9 +11,9 @@
 	// #region CUSTOMIZATION
 	// colors
 	@each $key, $value in $colors {
-		@if type-of($value) == 'map' {
+		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
+				@if meta.type-of($value) not 'map' {
 					@if not
 						str-index($subKey, 'hue') and not
 						str-index($subKey, 'saturation') and not
@@ -35,9 +35,9 @@
 	}
 
 	@each $key, $value in $dark-colors {
-		@if type-of($value) == 'map' {
+		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
+				@if meta.type-of($value) not 'map' {
 					@if not
 						str-index($subKey, 'hue') and not
 						str-index($subKey, 'saturation') and not
@@ -235,9 +235,9 @@
 	}
 
 	@each $size, $value in $spacing-dynamic {
-		@if type-of($value) == 'map' {
+		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
+				@if meta.type-of($value) not 'map' {
 					spacing-dynamic__#{$size}__#{$subKey}: $subValue;
 				}
 			}
@@ -250,9 +250,9 @@
 	}
 
 	@each $size, $value in $font-size-dynamic {
-		@if type-of($value) == 'map' {
+		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
+				@if meta.type-of($value) not 'map' {
 					font-size-dynamic__#{$size}__#{$subKey}: $subValue;
 				}
 			}

package/src/props/breakpoints.scss

@@ -2,14 +2,15 @@
 @use '../context' as *;
 
 :where(:host, :root, .theme) {
+	@include spread-map-into-props(
+		$map: map.remove($breakpoints, 'xxs'),
+		$prefix: breakpoint
+	);
+
 	@each $breakpoint, $breakpoint-value in $breakpoints {
 		@media screen and (min-width: $breakpoint-value) {
 			--breakpoint-key: #{$breakpoint};
 			--breakpoint-value: #{$breakpoint-value};
 		}
 	}
-	@include spread-map-into-props(
-		$map: map.remove($breakpoints, 'xxs'),
-		$prefix: breakpoint
-	);
 }

package/src/props/spacing.scss

@@ -10,12 +10,12 @@
 	// dynamic
 	@each $name, $sizes in $spacing-dynamic {
 		@each $breakpoint, $size in $sizes {
-			@if map-has-key($breakpoints, $breakpoint) {
+			@if map.has-key($breakpoints, $breakpoint) {
 				@include media-breakpoint-up($breakpoint, $breakpoints) {
 					$var: $size;
 
 					// if is a static spacing
-					@if map-has-key($spacing, $size) {
+					@if map.has-key($spacing, $size) {
 						$var: var(--spacing-#{$size});
 					}
 

package/src/props/typography.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../context' as *;
 
 :where(:host, :root, .theme) {
@@ -21,12 +22,12 @@
 	// font-size dynamic
 	@each $name, $sizes in $font-size-dynamic {
 		@each $breakpoint, $size in $sizes {
-			@if map-has-key($breakpoints, $breakpoint) {
+			@if map.has-key($breakpoints, $breakpoint) {
 				@include media-breakpoint-up($breakpoint, $breakpoints) {
 					$var: $size;
 
 					// if is a static font-size
-					@if map-has-key($font-size, $size) {
+					@if map.has-key($font-size, $size) {
 						$var: var(--text-#{$size});
 					}
 

package/src/settings/components/_vv-accordion-group.scss

@@ -1,7 +1,7 @@
 $vv-accordion-group: (
 	display: flex,
 	flex-direction: column,
-	gap: var(--spacing-sm),
+	[gap]: var(--spacing-sm),
 	element: (
 		not-last-child: (
 			_alias: '> details:not(:last-child)',
@@ -9,7 +9,7 @@ $vv-accordion-group: (
 	),
 	modifier: (
 		condensed: (
-			gap: 0,
+			gap: var(--spacing-0),
 			element: (
 				not-last-child: (
 					border-bottom-width: 0,

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

@@ -32,6 +32,7 @@ $vv-accordion: (
 	element: (
 		summary: (
 			_alias: '> summary',
+			_combinator: '>',
 			position: relative,
 			cursor: pointer,
 			user-select: none,
@@ -83,6 +84,7 @@ $vv-accordion: (
 		),
 		content: (
 			_alias: '> summary + *',
+			_combinator: '>',
 			padding-block: var(--spacing-sm),
 			[padding-inline]: var(--accordion-padding-left)
 				var(--accordion-padding-right),

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

@@ -9,6 +9,7 @@ $vv-alert-group: (
 	element: (
 		list: (
 			_alias: '> [role="group"]',
+			_combinator: '>',
 			display: flex,
 			flex-direction: column,
 			gap: var(--spacing-xs),
@@ -130,8 +131,10 @@ $vv-alert-group: (
 					[scale]: calc(1 - 0.05 * (var(--alert-counter, 1) - 1)),
 					[z-index]:
 						calc(
-							var(--z-notification-alert) -
-								var(--alert-counter, 1)
+							var(--z-notification-alert) - var(
+									--alert-counter,
+									1
+								)
 						),
 					filter: grayscale(100%),
 				),

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

@@ -5,6 +5,7 @@ $vv-avatar-group: (
 	element: (
 		item: (
 			_alias: '> *',
+			_combinator: '>',
 			box-shadow: var(--shadow-md),
 		),
 		item-not-first: (

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

@@ -24,6 +24,7 @@ $vv-avatar: (
 	element: (
 		badge: (
 			_alias: '> sup',
+			_combinator: '>',
 			position: absolute,
 			top: 0,
 			right: 0,
@@ -32,6 +33,7 @@ $vv-avatar: (
 		),
 		badge-bottom: (
 			_alias: '> sub',
+			_combinator: '>',
 			position: absolute,
 			bottom: 0,
 			right: 0,
@@ -40,6 +42,7 @@ $vv-avatar: (
 		),
 		image: (
 			_alias: '> img',
+			_combinator: '>',
 			width: 100%,
 			height: 100%,
 			object-fit: inherit,

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

@@ -40,6 +40,7 @@ $vv-badge: (
 	element: (
 		button: (
 			_alias: '> button',
+			_combinator: '>',
 			cursor: pointer,
 			padding: 0 0.5em,
 			margin: 0 -0.5em,

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

@@ -15,6 +15,7 @@ $vv-breadcrumb: (
 	element: (
 		list: (
 			_alias: '> ol',
+			_combinator: '>',
 			position: relative,
 			overflow: auto hidden,
 			overscroll-behavior-x: contain,

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

@@ -18,6 +18,7 @@ $vv-card: (
 	element: (
 		header: (
 			_alias: '> header',
+			_combinator: '>',
 			overflow: hidden,
 			padding: var(--spacing-md),
 			background-color: var(--color-surface-1),
@@ -40,6 +41,7 @@ $vv-card: (
 		),
 		footer: (
 			_alias: '> footer',
+			_combinator: '>',
 			border-top: var(--border) solid var(--color-surface-4),
 			padding: var(--spacing-md),
 		),

package/src/settings/components/_vv-checkbox-group.scss

@@ -6,6 +6,7 @@ $vv-checkbox-group: (
 	element: (
 		legend: (
 			_alias: '> legend',
+			_combinator: '>',
 			display: var(--input-label-display),
 			font-size: var(--input-label-font-size),
 			font-weight: var(--input-label-font-weight),
@@ -24,6 +25,7 @@ $vv-checkbox-group: (
 		),
 		hint: (
 			_alias: '> small',
+			_combinator: '>',
 			display: var(--input-hint-display),
 			font-size: var(--input-hint-font-size),
 			color: var(--input-hint-color),

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

@@ -42,6 +42,7 @@ $vv-checkbox: (
 		),
 		hint: (
 			_alias: '> small',
+			_combinator: '>',
 			flex-basis: 100%,
 			display: var(--input-hint-display),
 			font-size: var(--input-hint-font-size),

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

@@ -25,6 +25,7 @@ $vv-dialog: (
 	element: (
 		wrapper: (
 			_alias: '> article',
+			_combinator: '>',
 			display: flex,
 			flex-direction: column,
 			position: relative,

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

@@ -9,6 +9,7 @@ $vv-input-file: (
 	element: (
 		label: (
 			_alias: '> label',
+			_combinator: '>',
 			display: var(--input-label-display),
 			font-size: var(--input-label-font-size),
 			font-weight: var(--input-label-font-weight),

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

@@ -9,6 +9,7 @@ $vv-input-text: (
 	element: (
 		label: (
 			_alias: '> label',
+			_combinator: '>',
 			display: var(--input-label-display),
 			font-size: var(--input-label-font-size),
 			font-weight: var(--input-label-font-weight),
@@ -200,6 +201,7 @@ $vv-input-text: (
 		),
 		hint: (
 			_alias: '> small',
+			_combinator: '>',
 			display: var(--input-hint-display),
 			font-size: var(--input-hint-font-size),
 			color: var(--input-hint-color),

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

@@ -79,6 +79,7 @@ $vv-radio: (
 		),
 		hint: (
 			_alias: '> small',
+			_combinator: '>',
 			flex-basis: 100%,
 			display: var(--input-hint-display),
 			font-size: var(--input-hint-font-size),

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

@@ -10,6 +10,7 @@ $vv-select: (
 	element: (
 		label: (
 			_alias: '> label',
+			_combinator: '>',
 			display: var(--input-label-display),
 			font-size: var(--input-label-font-size),
 			font-weight: var(--input-label-font-weight),
@@ -140,6 +141,7 @@ $vv-select: (
 		),
 		hint: (
 			_alias: '> small',
+			_combinator: '>',
 			display: var(--input-hint-display),
 			font-size: var(--input-hint-font-size),
 			color: var(--input-hint-color),

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

@@ -9,6 +9,7 @@ $vv-textarea: (
 	element: (
 		label: (
 			_alias: '> label',
+			_combinator: '>',
 			display: var(--input-label-display),
 			font-size: var(--input-label-font-size),
 			font-weight: var(--input-label-font-weight),
@@ -133,6 +134,7 @@ $vv-textarea: (
 		),
 		hint: (
 			_alias: '> small',
+			_combinator: '>',
 			display: var(--input-hint-display),
 			font-size: var(--input-hint-font-size),
 			color: var(--input-hint-color),

package/src/tools/_breakpoints.scss

@@ -19,9 +19,10 @@
 	$bps-names: map.keys($bps)
 ) {
 	$n: list.index($bps-names, $name);
+
 	@return if(
-		$n != null and $n < length($bps-names),
-		nth($bps-names, $n + 1),
+		$n != null and $n < list.length($bps-names),
+		list.nth($bps-names, $n + 1),
 		null
 	);
 }
@@ -31,6 +32,7 @@
 //    576px
 @function breakpoint-min($name, $bps) {
 	$min: map.get($bps, $name);
+
 	@return if($min != 0, $min, null);
 }
 
@@ -44,6 +46,7 @@
 //    767.98px
 @function breakpoint-max($name, $bps) {
 	$next: breakpoint-next($name, $bps);
+
 	@return if($next, breakpoint-min($next, $bps) - 0.02, null);
 }
 
@@ -61,12 +64,17 @@
 // Makes the @content apply to the given breakpoint and wider.
 @mixin media-breakpoint-up($name, $bps) {
 	$min: breakpoint-min($name, $bps);
+
 	@if $min {
 		@media (min-width: $min) {
-			@content;
+			& {
+				@content;
+			}
 		}
 	} @else {
-		@content;
+		& {
+			@content;
+		}
 	}
 }
 
@@ -74,6 +82,7 @@
 // Makes the @content apply to the given breakpoint and narrower.
 @mixin media-breakpoint-down($name, $bps) {
 	$max: breakpoint-max($name, $bps);
+
 	@if $max {
 		@media (max-width: $max) {
 			@content;

package/src/tools/_mixins.scss

@@ -3,6 +3,7 @@
 @use 'sass:string';
 @use 'sass:meta';
 @use 'sass:selector';
+@use 'sass:math';
 @use 'functions' as *;
 @use 'breakpoints' as *;
 
@@ -13,9 +14,9 @@
 	$prev-num: null;
 
 	@each $key, $num in $map {
-		@if not $prev-num or unit($num) == '%' {
+		@if not $prev-num or math.unit($num) == '%' {
 			// Do nothing
-		} @else if not comparable($prev-num, $num) {
+		} @else if not compatible($prev-num, $num) {
 			@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
 		} @else if $prev-num >= $num {
 			@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
@@ -59,7 +60,7 @@
 			string.slice(meta.inspect($key), 1, 1) !=
 			'['
 		{
-			@if type-of($value) == 'map' {
+			@if meta.type-of($value) == 'map' {
 				@if $deep {
 					@include spread-map-into-props($value, $name, $key);
 				}
@@ -84,7 +85,9 @@
 	$prefix: '',
 	$zero-specificity: false
 ) {
-	@if (type-of($map) == 'map' or type-of($map) == 'list') and $attribute != ''
+	@if (meta.type-of($map) == 'map' or meta.type-of($map) == 'list') and
+		$attribute !=
+		''
 	{
 		@each $breakpoint, $breakpoint-value in $bps {
 			@if $breakpoint-value > 0 {
@@ -96,7 +99,7 @@
 					$key: #{$name}-#{meta.inspect($key)};
 				}
 
-				@if type-of($value) == 'map' and $deep {
+				@if meta.type-of($value) == 'map' and $deep {
 					@include spread-map-into-utilities(
 						$map: $value,
 						$class: $class,
@@ -130,25 +133,25 @@
 					$var: str-replace($var, '\\/', '-');
 
 					// check if value is not a map (spacing-dynamic)
-					@if type-of($value) != 'map' {
+					@if meta.type-of($value) != 'map' {
 						$default: $value;
 					}
 
 					// check if map is a list
-					@if type-of($map) ==
+					@if meta.type-of($map) ==
 						'list' and
 						(not $default or $default == '')
 					{
 						$default: $key;
 					}
 
-					@if type-of($default) == 'string' {
+					@if meta.type-of($default) == 'string' {
 						$default: string.unquote($default);
 					}
 
 					%#{$prefix}#{$class-name} {
 						@include media-breakpoint-up($breakpoint, $bps) {
-							@if type-of($attribute) != 'list' {
+							@if meta.type-of($attribute) != 'list' {
 								$attribute: ($attribute);
 							}
 
@@ -200,7 +203,7 @@
 		$block: &;
 	}
 
-	@if type-of(map.get($map, $key)) == 'map' {
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $item, $value in map.get($map, $key) {
 			$selector: $block + '--' + $item;
 
@@ -309,17 +312,28 @@
 		$block: &;
 	}
 
-	@if type-of(map.get($map, $key)) == 'map' {
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $element, $value in map.get($map, $key) {
 			$selector: $block + '__' + $element;
 
+			// combinator
+			$combinator: map.get($value, '_combinator');
+
+			@if not $combinator {
+				$combinator: map.get($original, $key, $element, '_combinator');
+			}
+
 			@if $modifier {
 				$selectors: ();
 
 				@each $item in selector.parse($modifier) {
+					@if $combinator {
+						$item: '#{$item} #{$combinator}';
+					}
+
 					$selectors: list.join(
 						$selectors,
-						selector.nest('#{$item} > ', $selector)
+						selector.nest($item, $selector)
 					);
 				}
 
@@ -425,7 +439,7 @@
 		$blocks: &;
 	}
 
-	@if type-of(map.get($map, $key)) == 'map' {
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $state, $value in map.get($map, $key) {
 			@if list.index(
 				(
@@ -701,7 +715,7 @@
 		$block: &;
 	}
 
-	@if type-of(map.get($map, $key)) == 'map' {
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $breakpoint, $value in map.get($map, $key) {
 			@if string.index($breakpoint, '-') {
 				$operator: list.nth(string.split($breakpoint, '-'), 1);
@@ -833,10 +847,13 @@
 		xxs: 0,
 	)
 ) {
-	@if type-of($map) == 'map' and $prefix != '' {
+	@if meta.type-of($map) == 'map' and $prefix != '' {
 		@each $key, $value in $map {
 			@if not list.index($ignore, $key) {
-				@if type-of($value) == 'map' and ($deep or $key == 'pseudo') {
+				@if meta.type-of($value) ==
+					'map' and
+					($deep or $key == 'pseudo')
+				{
 					$original: map.get($original, $key);
 
 					@if not $original {
@@ -849,7 +866,7 @@
 
 					@if $key == 'pseudo' {
 						@each $pseudo-element, $pseudo-map in $value {
-							@if type-of($pseudo-map) == 'map' {
+							@if meta.type-of($pseudo-map) == 'map' {
 								@if list.index(
 									(
 										before,
@@ -932,7 +949,7 @@
 						);
 					}
 				} @else if
-					type-of($value) !=
+					meta.type-of($value) !=
 					'map' and
 					(string.slice(meta.inspect($key), 1, 1) != '_')
 				{
@@ -984,7 +1001,7 @@
 
 // Wrap selector with :where()
 @mixin wrap-with-where($selector, $enabled: true) {
-	@if type-of($selector) == 'map' or type-of($selector) == 'list' {
+	@if meta.type-of($selector) == 'map' or meta.type-of($selector) == 'list' {
 		$selector: #{$selector};
 	}
 
@@ -1017,7 +1034,7 @@
 	$custom-transitions: false,
 	$bps: (xxs: 0)
 ) {
-	@if type-of($map) == 'map' and $block != '' {
+	@if meta.type-of($map) == 'map' and $block != '' {
 		$selector: '.' + $block;
 
 		// custom props
@@ -1150,12 +1167,12 @@
 		$block: &;
 	}
 
-	@if type-of(map.get($map, $key)) == 'map' {
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $transition, $states in map.get($map, $key) {
 			@each $state, $value in $states {
 				@if $state in [ 'enter-from', 'enter-active', 'enter-to',
 					'leave-from', 'leave-active', 'leave-to', 'active',
-					'inert'] and type-of($value) == 'map'
+					'inert'] and meta.type-of($value) == 'map'
 				{
 					$selector: '.#{$transition}';
 

package/src/utilities/flexbox.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../context' as *;
 
 // flex direction
@@ -34,6 +35,7 @@
 		%#{$prefix}#{$postfix} {
 			#{$prop}: #{$value};
 		}
+
 		@include wrap-with-where(
 			$selector: '.#{$prefix}#{$postfix}',
 			$enabled: $zero-specificity-for-utilities
@@ -57,7 +59,7 @@
 	$default: null;
 
 	// check if value is not a map (spacing-dynamic)
-	@if type-of($value) != 'map' {
+	@if meta.type-of($value) != 'map' {
 		$default: $value;
 	}
 
@@ -67,6 +69,7 @@
 	%gap-#{$size} {
 		gap: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.gap-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -78,6 +81,7 @@
 	%gap-x-#{$size} {
 		column-gap: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.gap-x-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -89,6 +93,7 @@
 	%gap-y-#{$size} {
 		row-gap: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.gap-y-#{$size}',
 		$enabled: $zero-specificity-for-utilities