@volverjs/style 0.1.24 → 0.1.26

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

@@ -82,7 +82,8 @@ $vv-checkbox: (
 							height: var(--spacing-20),
 							border-radius: 50%,
 							position: absolute,
-							inset: var(--spacing-2) 0 0 var(--spacing-2),
+							inset-block: var(--spacing-2) 0,
+							inset-inline: var(--spacing-2) 0,
 							background: var(--color-white),
 							will-change: transform,
 							transition: var(--transition-transform),
@@ -99,7 +100,7 @@ $vv-checkbox: (
 							background-image: none,
 							pseudo: (
 								after: (
-									translate: 50%,
+									[translate]: calc(50% * var(--direction, 1)),
 								),
 							),
 						),
@@ -108,7 +109,8 @@ $vv-checkbox: (
 							background-color: var(--color-brand),
 							pseudo: (
 								after: (
-									translate: 100%,
+									[translate]:
+										calc(100% * var(--direction, 1)),
 								),
 							),
 						),

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

@@ -114,7 +114,7 @@ $vv-dialog: (
 				opacity: var(--opacity-0),
 				element: (
 					wrapper: (
-						translate: -100%,
+						[translate]: calc(-100% * var(--direction, 1)),
 					),
 				),
 			),
@@ -122,7 +122,7 @@ $vv-dialog: (
 				opacity: var(--opacity-0),
 				element: (
 					wrapper: (
-						translate: 100%,
+						[translate]: calc(100% * var(--direction, 1)),
 					),
 				),
 			),
@@ -145,6 +145,24 @@ $vv-dialog: (
 				),
 			),
 		),
+		slide-inline-end: (
+			active: (
+				transition: var(--transition-opacity),
+				element: (
+					wrapper: (
+						transition: var(--transition-transform),
+					),
+				),
+			),
+			inert: (
+				opacity: var(--opacity-0),
+				element: (
+					wrapper: (
+						[translate]: calc(100% * var(--direction, 1)),
+					),
+				),
+			),
+		),
 	),
 	modifier: (
 		small: (
@@ -158,7 +176,7 @@ $vv-dialog: (
 			padding: 0,
 			element: (
 				wrapper: (
-					border-radius: var(--rounded-0),
+					border-radius: var(--rounded-none),
 					max-width: auto,
 					max-height: auto,
 					width: 100%,
@@ -166,5 +184,40 @@ $vv-dialog: (
 				),
 			),
 		),
+		// Side panel anchored to the inline end, pair it with the
+		// slide-inline-end transition. Full width below sm.
+		drawer: (
+			padding: 0,
+			align-items: stretch,
+			justify-content: flex-end,
+			element: (
+				wrapper: (
+					width: 100%,
+					max-height: 100dvh,
+					border-radius: var(--rounded-none),
+					breakpoint: (
+						up-sm: (
+							width: min(75dvw, 32rem),
+						),
+					),
+				),
+				// Flat header and footer: on a full height panel the filled
+				// bands read as heavy. The footer keeps its divider because
+				// the content above it scrolls.
+				header: (
+					font-weight: var(--font-bold),
+					background: var(--color-transparent),
+					border-bottom: 0,
+				),
+				// Without the divider the header padding already spaces the
+				// title from the first field, so drop the duplicate.
+				content: (
+					padding-top: 0,
+				),
+				footer: (
+					background: var(--color-transparent),
+				),
+			),
+		),
 	),
 ) !default;

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

@@ -7,6 +7,20 @@ $vv-dropdown: (
 	flex-direction: column,
 	box-shadow: var(--shadow-lg),
 	width: max-content,
+	state: (
+		// Neutralize the user agent styles applied to [popover] elements, so a
+		// dropdown promoted to the top layer keeps the coordinates it gets from
+		// its positioning library instead of being centered in the viewport
+		popover: (
+			inset: auto,
+			margin: 0,
+			padding: 0,
+			border: 0,
+			overflow: visible,
+			background: transparent,
+			color: inherit,
+		),
+	),
 	element: (
 		list: (
 			_alias: 'div:is([role="menu"],[role="list-box"])',

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

@@ -0,0 +1,189 @@
+$vv-input-range: (
+	display: var(--input-display),
+	flex: var(--input-flex),
+	flex-direction: var(--input-flex-direction),
+	margin-bottom: var(--input-gap),
+	font-size: var(--input-font-size),
+	line-height: var(--input-line-height),
+	min-width: var(--input-min-width),
+	element: (
+		label: (
+			_alias: '> label',
+			_combinator: '>',
+			display: var(--input-label-display),
+			font-size: var(--input-label-font-size),
+			font-weight: var(--input-label-font-weight),
+			color: var(--input-label-color),
+			margin: 0 0 var(--input-label-gap) 0,
+			white-space: var(--input-label-white-space),
+			text-overflow: var(--input-label-text-overflow),
+			overflow: var(--input-label-overflow),
+			max-width: var(--input-label-max-width),
+		),
+		wrapper: (
+			display: flex,
+			align-items: center,
+			gap: var(--spacing-sm),
+			min-height: var(--input-min-height),
+		),
+		input-before: (
+			display: flex,
+			align-items: center,
+		),
+		input-after: (
+			display: flex,
+			align-items: center,
+		),
+		// Everything reading an --input-range-* token is written as a plain
+		// declaration: a var() inside a custom property is substituted where
+		// that property is declared, so wrapping these in the generated
+		// --vv-input-range-* props would freeze them at the :root values and
+		// the fill, the accent overrides and the hover halo would never move.
+		input: (
+			_alias: 'input[type="range"]',
+			-webkit-appearance: none,
+			appearance: none,
+			flex: 1,
+			min-width: 0,
+			[height]: var(--input-range-thumb-size),
+			margin: 0,
+			padding: 0,
+			background: transparent,
+			cursor: pointer,
+			pseudo: (
+				-webkit-slider-runnable-track: (
+					[height]: var(--input-range-track-height),
+					border-radius: var(--rounded-full),
+					[background]:
+						linear-gradient(
+							to right,
+							var(--input-range-accent-color)
+								var(--input-range-progress),
+							var(--input-range-track-color)
+								var(--input-range-progress)
+						),
+				),
+				-webkit-slider-thumb: (
+					-webkit-appearance: none,
+					appearance: none,
+					[width]: var(--input-range-thumb-size),
+					[height]: var(--input-range-thumb-size),
+					[margin-top]:
+						calc(
+							(
+									var(--input-range-track-height) -
+										var(--input-range-thumb-size)
+								) / 2
+						),
+					border: var(--border-2) solid var(--color-surface),
+					border-radius: var(--rounded-full),
+					[background]: var(--input-range-accent-color),
+					[box-shadow]: var(--input-range-thumb-shadow),
+					will-change: box-shadow,
+					transition: var(--transition-shadow),
+				),
+				-moz-range-track: (
+					[height]: var(--input-range-track-height),
+					border-radius: var(--rounded-full),
+					[background]: var(--input-range-track-color),
+				),
+				-moz-range-progress: (
+					[height]: var(--input-range-track-height),
+					border-radius: var(--rounded-full),
+					[background]: var(--input-range-accent-color),
+				),
+				-moz-range-thumb: (
+					[width]: var(--input-range-thumb-size),
+					[height]: var(--input-range-thumb-size),
+					border: var(--border-2) solid var(--color-surface),
+					border-radius: var(--rounded-full),
+					[background]: var(--input-range-accent-color),
+					[box-shadow]: var(--input-range-thumb-shadow),
+					will-change: box-shadow,
+					transition: var(--transition-shadow),
+				),
+			),
+			state: (
+				hover: (
+					--input-range-thumb-shadow:
+						var(--input-range-thumb-shadow-hover),
+				),
+				focus-visible: (
+					outline: var(--border-2) solid var(--color-brand),
+					outline-offset: var(--spacing-2),
+				),
+				disabled: (
+					cursor: not-allowed,
+				),
+			),
+		),
+		value: (
+			display: flex,
+			align-items: baseline,
+			justify-content: center,
+			gap: var(--spacing-2),
+			flex: 0 0 auto,
+			min-width: var(--spacing-64),
+			padding: var(--spacing-4) var(--spacing-sm),
+			font-size: var(--text-14),
+			font-variant-numeric: tabular-nums,
+			color: var(--input-color),
+			background-color: var(--input-background-color),
+			border: var(--border) solid var(--color-surface-3),
+			border-radius: var(--rounded-md),
+			text-align: center,
+		),
+		unit: (
+			color: var(--input-placeholder-color),
+			font-size: var(--text-12),
+		),
+		hint: (
+			_alias: '> small',
+			_combinator: '>',
+			display: var(--input-hint-display),
+			font-size: var(--input-hint-font-size),
+			color: var(--input-hint-color),
+			padding-top: var(--input-hint-gap),
+			padding-inline: var(--spacing-xs),
+			white-space: var(--input-hint-white-space),
+			text-overflow: var(--input-hint-text-overflow),
+			overflow: var(--input-hint-overflow),
+		),
+	),
+	modifier: (
+		valid: (
+			--input-range-accent-color: var(--input-valid-color),
+			element: (
+				hint: (
+					color: var(--input-valid-color),
+				),
+				value: (
+					border-color: var(--input-valid-color),
+				),
+			),
+		),
+		invalid: (
+			--input-range-accent-color: var(--input-invalid-color),
+			element: (
+				hint: (
+					color: var(--input-invalid-color),
+				),
+				value: (
+					border-color: var(--input-invalid-color),
+				),
+			),
+		),
+		readonly: (
+			--input-range-accent-color: var(--color-word-4),
+			opacity: var(--opacity-100),
+			cursor: default,
+			pointer-events: none,
+		),
+	),
+	state: (
+		disabled: (
+			--input-range-accent-color: var(--color-word-4),
+			opacity: var(--opacity-50),
+		),
+	),
+) !default;

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

@@ -4,7 +4,7 @@ $vv-tooltip: (
 	position: absolute,
 	inset-inline: 100% auto,
 	top: 50%,
-	translate: var(--spacing-10) -50%,
+	[translate]: calc(var(--spacing-10) * var(--direction, 1)) -50%,
 	z-index: var(--z-tooltip),
 	inline-size: max-content,
 	max-inline-size: 25ch,
@@ -24,7 +24,8 @@ $vv-tooltip: (
 			z-index: -1,
 			inset-inline: 0 auto,
 			inset-block: 50% auto,
-			translate: -100% -50%,
+			[translate]: calc(-100% * var(--direction, 1)) -50%,
+			[scale]: var(--direction, 1) 1,
 			border-width: var(--spacing-8),
 			border-style: solid,
 			border-color: transparent var(--color-gray-darken-4) transparent
@@ -38,12 +39,13 @@ $vv-tooltip: (
 		top: (
 			inset-inline: 50% 0,
 			inset-block: auto 100%,
-			translate: -50% calc(var(--spacing-10) * -1),
+			[translate]: calc(-50% * var(--direction, 1))
+				calc(var(--spacing-10) * -1),
 			pseudo: (
 				after: (
 					inset-inline: 50% auto,
 					inset-block: 100% auto,
-					translate: -50%,
+					[translate]: calc(-50% * var(--direction, 1)),
 					rotate: -90deg,
 				),
 			),
@@ -51,24 +53,24 @@ $vv-tooltip: (
 		bottom: (
 			inset-inline: 50% 0,
 			inset-block: 100% auto,
-			translate: -50% var(--spacing-10),
+			[translate]: calc(-50% * var(--direction, 1)) var(--spacing-10),
 			pseudo: (
 				after: (
 					inset-inline: 50% auto,
 					inset-block: 0 auto,
-					translate: -50% -100%,
+					[translate]: calc(-50% * var(--direction, 1)) -100%,
 					rotate: 90deg,
 				),
 			),
 		),
 		left: (
 			inset-inline: auto 100%,
-			translate: calc(var(--spacing-10) * -1) -50%,
+			[translate]: calc(var(--spacing-10) * -1 * var(--direction, 1)) -50%,
 			pseudo: (
 				after: (
 					position: absolute,
 					inset-inline: auto 0,
-					translate: 100% -50%,
+					[translate]: calc(100% * var(--direction, 1)) -50%,
 					rotate: 180deg,
 				),
 			),

package/src/tools/mixin-modules/_attrs.scss

@@ -53,7 +53,9 @@ $-pseudo-elements: (
 	-webkit-progress-bar, -webkit-progress-value, -webkit-inner-element,
 	-moz-progress-bar, -moz-progress-value, -moz-inner-element,
 	-webkit-details-marker, -webkit-scrollbar,
-	-webkit-scrollbar-track, -webkit-scrollbar-thumb
+	-webkit-scrollbar-track, -webkit-scrollbar-thumb,
+	-webkit-slider-runnable-track, -webkit-slider-thumb,
+	-moz-range-track, -moz-range-progress, -moz-range-thumb
 );
 
 // Transform a map into a list of CSS attributes
@@ -81,38 +83,50 @@ $-pseudo-elements: (
 		@each $key, $value in $map {
 			@if not list.index($ignore, $key) {
 				@if meta.type-of($value) == 'map' and ($deep or $key == 'pseudo') {
-					$original: map.get($original, $key);
-
-					@if not $original {
-						$original: ();
+					// Sass assignment reaches the enclosing scope, so the
+					// reference map and the property name of a nested map are
+					// kept in their own variables: reusing $original and $key
+					// left every key after the first one looking itself up in
+					// the wrong map.
+					$nested-original: map.get($original, $key);
+
+					@if not $nested-original {
+						$nested-original: ();
 					}
 
+					$nested-key: $key;
+
 					@if $postfix != '' {
-						$key: #{$postfix}-#{$key};
+						$nested-key: #{$postfix}-#{$key};
 					}
 
+					// The test is on the map key, not on the postfixed name: a
+					// pseudo map nested one level down would otherwise be
+					// spread as plain declarations on the parent selector.
 					@if $key == 'pseudo' {
 						@each $pseudo-element, $pseudo-map in $value {
 							@if meta.type-of($pseudo-map) == 'map' {
 								@if list.index($-pseudo-elements, $pseudo-element) {
-									$original: map.get($original, $pseudo-element);
-									$key: pseudo-#{$pseudo-element};
+									$pseudo-original: (
+										map.get($nested-original, $pseudo-element)
+									);
+									$pseudo-key: pseudo-#{$pseudo-element};
 
 									@include pseudo-element-placeholder($pseudo-element) {
-										@if not $original {
+										@if not $pseudo-original {
 											@if not map.has-key($pseudo-map, 'content') {
 												content: '';
 											}
 
-											$original: ();
+											$pseudo-original: ();
 										}
 
 										@include spread-map-into-attrs(
-											$original: $original,
+											$original: $pseudo-original,
 											$map: $pseudo-map,
 											$prefix: $prefix,
 											$variant: $variant,
-											$postfix: $key,
+											$postfix: $pseudo-key,
 											$deep: true,
 											$use-custom-props: $use-custom-props
 										);
@@ -122,11 +136,11 @@ $-pseudo-elements: (
 						}
 					} @else {
 						@include spread-map-into-attrs(
-							$original: $original,
+							$original: $nested-original,
 							$map: $value,
 							$prefix: $prefix,
 							$variant: $variant,
-							$postfix: $key,
+							$postfix: $nested-key,
 							$deep: true,
 							$use-custom-props: $use-custom-props
 						);