@volverjs/style 0.1.25 → 0.1.27

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-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
 						);

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

@@ -322,6 +322,10 @@ $-state-suffixes: (
 
 	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $element, $value in map.get($map, $key) {
+			// `$block` is the block selector alone, threaded down unchanged
+			// from `spread-map-into-bem`: what a state or a transition
+			// expands to travels in `$modifier` instead. Passing a selector
+			// list here would suffix its last entry alone.
 			$selector: $block + '__' + $element;
 
 			// combinator
@@ -354,6 +358,10 @@ $-state-suffixes: (
 
 			@if $alias {
 				@if $modifier {
+					// One entry per selector of the modifier, in the same
+					// order as `$selector` above: `spread-map-into-states`
+					// pairs the two lists by index, so an `_alias` has to be
+					// a single selector, not a list of them.
 					$aliases: ();
 
 					@each $item in selector.parse($modifier) {
@@ -442,15 +450,35 @@ $-state-suffixes: (
 		@each $state, $value in map.get($map, $key) {
 			@if list.index($-valid-states, $state) {
 				$selectors: ();
+				$block-items: selector.parse($block);
+				$alias-items: ();
+
+				// `$block` and `$alias` are built side by side by the caller,
+				// one entry per selector of the parent, so they are walked by
+				// index: the alias belongs to the block item it was nested
+				// under. Suffixing the list as a whole would reach its last
+				// entry alone and leave the ones before it in the rule bare.
+				@if $alias {
+					$alias-items: selector.parse($alias);
+				}
+
+				$i: 0;
+
+				@each $block-item in $block-items {
+					$i: $i + 1;
+					$alias-item: null;
+
+					@if $i <= list.length($alias-items) {
+						$alias-item: list.nth($alias-items, $i);
+					}
 
-				@each $block-item in selector.parse($block) {
 					$selectors: list.join(
 						$selectors,
 						('#{$modifier}#{$block-item}--#{$state}', '#{$modifier}#{$block-item}.#{$state}')
 					);
 
-					@if $alias {
-						$selectors: list.join($selectors, '#{$modifier}#{$alias}.#{$state}');
+					@if $alias-item {
+						$selectors: list.join($selectors, '#{$modifier}#{$alias-item}.#{$state}');
 					}
 
 					// Special state handling - use function to get updated selectors
@@ -458,7 +486,7 @@ $-state-suffixes: (
 						$state: $state,
 						$block-item: $block-item,
 						$modifier: $modifier,
-						$alias: $alias,
+						$alias: $alias-item,
 						$selectors: $selectors
 					);
 				}
@@ -558,6 +586,27 @@ $-state-suffixes: (
 		$block: &;
 	}
 
+	// A state and a transition hand their whole selector list down as the
+	// modifier, so the block is compounded onto each of its entries: written
+	// as one interpolation it would reach the last entry alone and leave the
+	// ones before it in the rule unscoped.
+	$selector: '#{$modifier}#{$block}';
+
+	@if $modifier and $modifier != '' and $block {
+		$selectors: ();
+
+		@each $modifier-item in selector.parse($modifier) {
+			@each $block-item in selector.parse($block) {
+				$selectors: list.join(
+					$selectors,
+					'#{$modifier-item}#{$block-item}'
+				);
+			}
+		}
+
+		$selector: list-to-string($selectors);
+	}
+
 	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $breakpoint, $value in map.get($map, $key) {
 			@if string.index($breakpoint, '-') {
@@ -566,7 +615,7 @@ $-state-suffixes: (
 
 				@if map.has-key($bps, $bp) {
 					@if $operator == 'up' {
-						@include wrap-with-where($selector: '#{$modifier}#{$block}', $enabled: $zero-specificity) {
+						@include wrap-with-where($selector: $selector, $enabled: $zero-specificity) {
 							@include media-breakpoint-up($bp, $bps) {
 								@include spread-map-into-attrs(
 									$original: $original,
@@ -581,7 +630,7 @@ $-state-suffixes: (
 					}
 
 					@if $operator == 'down' {
-						@include wrap-with-where($selector: '#{$modifier}#{$block}', $enabled: $zero-specificity) {
+						@include wrap-with-where($selector: $selector, $enabled: $zero-specificity) {
 							@include media-breakpoint-down($bp, $bps) {
 								@include spread-map-into-attrs(
 									$original: $original,
@@ -596,7 +645,7 @@ $-state-suffixes: (
 					}
 
 					@if map.has-key($bps, $operator) {
-						@include wrap-with-where($selector: '#{$modifier}#{$block}', $enabled: $zero-specificity) {
+						@include wrap-with-where($selector: $selector, $enabled: $zero-specificity) {
 							@include media-breakpoint-between($operator, $bp, $bps) {
 								@include spread-map-into-attrs(
 									$original: $original,
@@ -611,7 +660,7 @@ $-state-suffixes: (
 					}
 				}
 			} @else if map.has-key($bps, $breakpoint) {
-				@include wrap-with-where($selector: '#{$modifier}#{$block}', $enabled: $zero-specificity) {
+				@include wrap-with-where($selector: $selector, $enabled: $zero-specificity) {
 					@include media-breakpoint-up($breakpoint, $bps) {
 						@include spread-map-into-attrs(
 							$original: $original,
@@ -711,3 +760,125 @@ $-state-suffixes: (
 		}
 	}
 }
+
+// ============================================
+// Control states
+// ============================================
+// A field component is a wrapper element around a native control, so its own
+// `state` maps generate selectors (`.vv-input-text:disabled`) that can never
+// match. This re-applies those placeholders on the control's attribute
+// instead, through `:has()`, block first and then element by element.
+
+// `$states` are read from the map's `state` key and must name an attribute of
+// the control: `disabled` and `readonly` for a text field, `disabled` alone
+// where HTML has no readonly (`select`, `input[type="range"]`). Components
+// that spell readonly as a modifier because they freeze the control with the
+// disabled attribute list that modifier in `$except-modifiers`, otherwise the
+// hook would dim a readonly field: `:has()` carries the specificity of its
+// argument, so with `$zero-specificity: false` it outweighs the modifier and
+// source order alone would not settle it.
+@mixin spread-map-into-control-states(
+	$map,
+	$block,
+	$control: 'input',
+	$states: ('disabled', 'readonly'),
+	$except-modifiers: (),
+	$zero-specificity: true
+) {
+	$component-selector: '.#{$block}';
+	$exception: '';
+
+	@each $modifier in $except-modifiers {
+		$exception: '#{$exception}:not(#{$component-selector}--#{$modifier})';
+	}
+
+	@each $state in $states {
+		$selector: (
+			'#{$component-selector}#{$exception}:has(#{$control}[#{$state}])'
+		);
+
+		@include wrap-with-where(
+			$selector: $selector,
+			$enabled: $zero-specificity
+		) {
+			@extend %#{$block}--#{$state} !optional;
+		}
+
+		// element
+		@if map.get($map, 'state', $state, 'element') {
+			@each $element, $element-map
+				in map.get($map, 'state', $state, 'element')
+			{
+				$element-selector: (
+					'#{$selector} #{$component-selector}__#{$element}'
+				);
+				$alias: map.get($map, 'element', $element, '_alias');
+
+				// The alias is a second selector for the same element, not a
+				// descendant of the first, so the list is glued with a comma
+				// before it is emitted: interpolating it would join the two
+				// with a space and compile them to one selector that matches
+				// a `.vv-input-text` nested inside its own element.
+				@if $alias {
+					$element-selector: list.append(
+						$element-selector,
+						('#{$selector} #{$alias}')
+					);
+				}
+
+				@include wrap-with-where(
+					$selector: list-to-string($element-selector),
+					$enabled: $zero-specificity
+				) {
+					@extend %#{$block}-state-#{$state}__#{$element} !optional;
+				}
+
+				// element state
+				@each $element-state, $state-map
+					in map.get($element-map, 'state')
+				{
+					@if $element-state {
+						$element-selector-state: ();
+
+						@each $item in $element-selector {
+							$element-selector-state: list.append(
+								$element-selector-state,
+								('#{$item}:#{$element-state}')
+							);
+						}
+
+						@include wrap-with-where(
+							$selector: list-to-string($element-selector-state),
+							$enabled: $zero-specificity
+						) {
+							@extend %#{$block}-state-#{$state}-element-#{$element}--#{$element-state}
+									!optional;
+						}
+					}
+				}
+
+				// element pseudo
+				@each $pseudo, $pseudo-map in map.get($element-map, 'pseudo') {
+					@if $pseudo {
+						$element-selector-pseudo: ();
+
+						@each $item in $element-selector {
+							$element-selector-pseudo: list.append(
+								$element-selector-pseudo,
+								('#{$item}::#{$pseudo}')
+							);
+						}
+
+						@include wrap-with-where(
+							$selector: list-to-string($element-selector-pseudo),
+							$enabled: $zero-specificity
+						) {
+							@extend %#{$block}-state-#{$state}-element-#{$element}--#{$pseudo}
+									!optional;
+						}
+					}
+				}
+			}
+		}
+	}
+}