@volverjs/style 0.1.12-beta.9 → 0.1.13

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

@@ -13,6 +13,11 @@ $vv-checkbox: (
 		disabled: (
 			opacity: var(--opacity-30),
 			cursor: not-allowed,
+			element: (
+				input: (
+					cursor: not-allowed,
+				),
+			),
 		),
 	),
 	element: (
@@ -42,6 +47,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),
@@ -72,11 +73,12 @@ $vv-input-file: (
 			white-space: nowrap,
 			cursor: pointer,
 			color: var(--input-color),
-			[padding-block]: var(--input-spacing-top) 0,
 			[padding-inline]: var(--input-spacing-left)
 				var(--input-spacing-right),
 			min-width: 0,
 			min-height: var(--input-min-height),
+			display: flex,
+			align-items: center,
 			text-overflow: var(--input-text-overflow),
 			pseudo: (
 				file-selector-button: (
@@ -86,6 +88,7 @@ $vv-input-file: (
 					cursor: pointer,
 					text-decoration: underline,
 					color: var(--input-color),
+					min-height: var(--input-min-height),
 				),
 			),
 			state: (
@@ -121,6 +124,7 @@ $vv-input-file: (
 			height: var(--input-min-height),
 			margin: var(--input-icon-margin),
 			pointer-events: var(--input-icon-pointer-events),
+			flex-shrink: 0,
 		),
 		icon-after: (
 			_alias: 'input + :where(svg, [data-icon])',
@@ -172,6 +176,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,
@@ -190,7 +200,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,
@@ -217,12 +227,19 @@ $vv-input-file: (
 			),
 		),
 		item: (
+			position: relative,
+			overflow: hidden,
 			display: flex,
 			font-size: var(--input-label-font-size),
 			align-items: center,
 			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,
@@ -236,14 +253,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,
@@ -253,7 +278,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: (
@@ -421,6 +445,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

@@ -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),
@@ -150,6 +151,7 @@ $vv-input-text: (
 			height: var(--input-min-height),
 			margin: var(--input-icon-margin),
 			pointer-events: var(--input-icon-pointer-events),
+			flex-shrink: 0,
 		),
 		icon-after: (
 			_alias: 'input + :where(svg, [data-icon])',
@@ -199,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),
@@ -304,7 +307,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-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),
@@ -132,6 +133,7 @@ $vv-select: (
 			height: var(--input-min-height),
 			margin: var(--input-icon-margin),
 			pointer-events: var(--input-icon-pointer-events),
+			flex-shrink: 0,
 		),
 		icon-after: (
 			_alias: 'select + :where(svg, [data-icon])',
@@ -139,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),
@@ -256,7 +259,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

@@ -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),
@@ -82,6 +83,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),
@@ -116,6 +118,7 @@ $vv-textarea: (
 			height: var(--input-min-height),
 			margin: var(--input-icon-margin),
 			pointer-events: var(--input-icon-pointer-events),
+			flex-shrink: 0,
 		),
 		icon-after: (
 			_alias: 'textarea + :where(svg, [data-icon])',
@@ -131,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),
@@ -224,7 +228,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/themes/dark/settings/_colors.scss

@@ -4,8 +4,8 @@
 @use '../../../settings/colors' as *;
 
 $dark-color-scheme: dark !default;
-$dark-color-word: hsl(color.hue($color-brand) 15% 85%) !default;
-$dark-color-surface: hsl(color.hue($color-brand) 10% 5%) !default;
+$dark-color-word: hsl(color-hue($color-brand) 15% 85%) !default;
+$dark-color-surface: hsl(color-hue($color-brand) 10% 5%) !default;
 $dark-color-surface-palette: (
 	brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) 10%),
 	accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) 10%),
@@ -15,12 +15,12 @@ $dark-color-surface-palette: (
 	warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 10%),
 ) !default;
 $dark-color-surface-palette-no-vars: (
-	brand: hsl(color.hue($color-brand) color.saturation($color-brand) 10%),
-	accent: hsl(color.hue($color-accent) color.saturation($color-accent) 10%),
-	success: hsl(color.hue($color-success) color.saturation($color-success) 10%),
-	danger: hsl(color.hue($color-danger) color.saturation($color-danger) 10%),
-	info: hsl(color.hue($color-info) color.saturation($color-info) 10%),
-	warning: hsl(color.hue($color-warning) color.saturation($color-warning) 10%),
+	brand: hsl(color-hue($color-brand) color-saturation($color-brand) 10%),
+	accent: hsl(color-hue($color-accent) color-saturation($color-accent) 10%),
+	success: hsl(color-hue($color-success) color-saturation($color-success) 10%),
+	danger: hsl(color-hue($color-danger) color-saturation($color-danger) 10%),
+	info: hsl(color-hue($color-info) color-saturation($color-info) 10%),
+	warning: hsl(color-hue($color-warning) color-saturation($color-warning) 10%),
 ) !default;
 
 // color map

package/src/tools/_breakpoints.scss

@@ -19,21 +19,31 @@
 	$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
 	);
 }
 
+@function bp-next($name, $bps: $breakpoints, $bps-names: map.keys($bps)) {
+	@return breakpoint-next($name, $bps, $bps-names);
+}
+
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
-@function breakpoint-min($name, $bps) {
+@function breakpoint-min($name, $bps: $breakpoints) {
 	$min: map.get($bps, $name);
+
 	@return if($min != 0, $min, null);
 }
 
+@function bp-min($name, $bps: $breakpoints) {
+	@return breakpoint-min($name, $bps);
+}
+
 // Maximum breakpoint width. Null for the largest (last) breakpoint.
 // The maximum value is calculated as the minimum of the next one less 0.02px
 // to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
@@ -42,50 +52,81 @@
 // See https://bugs.webkit.org/show_bug.cgi?id=178261
 //    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    767.98px
-@function breakpoint-max($name, $bps) {
+@function breakpoint-max($name, $bps: $breakpoints) {
 	$next: breakpoint-next($name, $bps);
+
 	@return if($next, breakpoint-min($next, $bps) - 0.02, null);
 }
 
+@function bp-max($name, $bps: $breakpoints) {
+	@return breakpoint-max($name, $bps);
+}
+
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
 // Useful for making responsive utilities.
 //    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    ""  (Returns a blank string)
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    "-sm"
-@function breakpoint-infix($name, $bps) {
+@function breakpoint-infix($name, $bps: $breakpoints) {
 	@return if(breakpoint-min($name, $bps) == null, '', '-#{$name}');
 }
 
+@function bp-infix($name, $bps: $breakpoints) {
+	@return breakpoint-infix($name, $bps);
+}
+
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $bps) {
+@mixin media-breakpoint-up($name, $bps: $breakpoints) {
 	$min: breakpoint-min($name, $bps);
+
 	@if $min {
 		@media (min-width: $min) {
-			@content;
+			& {
+				@content;
+			}
 		}
 	} @else {
+		& {
+			@content;
+		}
+	}
+}
+
+@mixin bp-up($name, $bps: $breakpoints) {
+	@include media-breakpoint-up($name, $bps) {
 		@content;
 	}
 }
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $bps) {
+@mixin media-breakpoint-down($name, $bps: $breakpoints) {
 	$max: breakpoint-max($name, $bps);
+
 	@if $max {
 		@media (max-width: $max) {
-			@content;
+			& {
+				@content;
+			}
 		}
 	} @else {
+		& {
+			@content;
+		}
+	}
+}
+
+@mixin bp-down($name, $bps: $breakpoints) {
+	@include media-breakpoint-down($name, $bps) {
 		@content;
 	}
 }
 
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $bps) {
+@mixin media-breakpoint-between($lower, $upper, $bps: $breakpoints) {
 	$min: breakpoint-min($lower, $bps);
 	$max: breakpoint-max($upper, $bps);
 
@@ -104,10 +145,16 @@
 	}
 }
 
+@mixin bp-between($lower, $upper, $bps: $breakpoints) {
+	@include media-breakpoint-between($lower, $upper, $bps) {
+		@content;
+	}
+}
+
 // Media between the breakpoint's minimum and maximum widths.
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $bps) {
+@mixin media-breakpoint-only($name, $bps: $breakpoints) {
 	$min: breakpoint-min($name, $bps);
 	$max: breakpoint-max($name, $bps);
 
@@ -125,3 +172,9 @@
 		}
 	}
 }
+
+@mixin bp-only($name, $bps: $breakpoints) {
+	@include media-breakpoint-only($name, $bps) {
+		@content;
+	}
+}