@volverjs/style 0.1.24 → 0.1.26

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

@@ -19,7 +19,31 @@ $-valid-states: (
 	active, focus, hover, focus-within, target, visited, focus-visible,
 	disabled, checked, checked-within, multiple, selected, readonly,
 	empty, placeholder-shown, dirty, valid, invalid, indeterminate,
-	first-child, last-child, open, close, determinate, pressed, current
+	first-child, last-child, open, close, determinate, pressed, current,
+	popover, popover-open
+);
+
+// Selector suffixes appended to the block, and to its alias when there is one,
+// for the states that are not plain pseudo-classes. A state can need more than
+// one suffix: "disabled" also matches the aria attribute. States missing here
+// fall back to ":not([disabled]):<state>", while "current" adds no suffix at
+// all and keeps only the BEM selectors built by the caller.
+$-state-suffixes: (
+	checked: ':checked',
+	checked-within: ':has(input:checked)',
+	close: ':not([open])',
+	dirty: ':not(:has(*:placeholder-shown))',
+	disabled: ('[disabled]', '[aria-disabled="true"]'),
+	focus-visible: ':not(:active):not([disabled]):not([tabindex="-1"]):not([aria-disabled="true"]):focus-visible',
+	multiple: '[multiple]',
+	open: '[open]',
+	// Element promoted to the top layer through the Popover API: "popover"
+	// matches it whether it is open or not, "popover-open" only when it is
+	popover: '[popover]',
+	popover-open: ':popover-open',
+	pressed: '[aria-pressed="true"]',
+	readonly: '[readonly]',
+	selected: '[aria-selected="true"]',
 );
 
 // ============================================
@@ -494,79 +518,17 @@ $-valid-states: (
 // Helper to add state-specific selectors
 // Returns the updated selectors list
 @function -add-state-selectors($state, $block-item, $modifier, $alias, $selectors) {
-	@if $state == 'checked-within' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}:has(input:checked)');
-
-		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}:has(input:checked)');
-		}
-	} @else if $state == 'open' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}[open]');
-
-		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}[open]');
-		}
-	} @else if $state == 'close' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}:not([open])');
-
-		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}:not([open])');
-		}
-	} @else if $state == 'dirty' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}:not(:has(*:placeholder-shown))');
-
-		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}:not(:has(*:placeholder-shown))');
-		}
-	} @else if $state == 'disabled' or $state == 'readonly' or $state == 'multiple' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}[#{$state}]');
-
-		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}[#{$state}]');
-		}
-
-		@if $state == 'disabled' {
-			$selectors: list.join($selectors, '#{$modifier}#{$block-item}[aria-disabled="true"]');
-
-			@if $alias {
-				$selectors: list.join($selectors, '#{$modifier}#{$alias}[aria-disabled="true"]');
-			}
-		}
-	} @else if $state == 'focus-visible' {
-		$selectors: list.join(
-			$selectors,
-			'#{$modifier}#{$block-item}:not(:active):not([disabled]):not([tabindex="-1"]):not([aria-disabled="true"]):#{$state}'
-		);
-
-		@if $alias {
-			$selectors: list.join(
-				$selectors,
-				'#{$modifier}#{$alias}:not(:active):not([disabled]):not([tabindex="-1"]):not([aria-disabled="true"]):#{$state}'
-			);
-		}
-	} @else if $state == 'checked' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}:#{$state}');
-
-		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}:#{$state}');
-		}
-	} @else if $state == 'pressed' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}[aria-pressed="true"]');
+	@if $state == 'current' {
+		@return $selectors;
+	}
 
-		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}[aria-pressed="true"]');
-		}
-	} @else if $state == 'selected' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}[aria-selected="true"]');
+	$suffixes: map.get($-state-suffixes, $state) or ':not([disabled]):#{$state}';
 
-		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}[aria-selected="true"]');
-		}
-	} @else if $state != 'current' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}:not([disabled]):#{$state}');
+	@each $suffix in $suffixes {
+		$selectors: list.join($selectors, '#{$modifier}#{$block-item}#{$suffix}');
 
 		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}:not([disabled]):#{$state}');
+			$selectors: list.join($selectors, '#{$modifier}#{$alias}#{$suffix}');
 		}
 	}
 
@@ -749,3 +711,120 @@ $-valid-states: (
 		}
 	}
 }
+
+// ============================================
+// 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');
+
+				@if $alias {
+					$element-selector: list.append(
+						$element-selector,
+						('#{$selector} #{$alias}')
+					);
+				}
+
+				@include wrap-with-where(
+					$selector: $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: $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: $element-selector-pseudo,
+							$enabled: $zero-specificity
+						) {
+							@extend %#{$block}-state-#{$state}-element-#{$element}--#{$pseudo}
+									!optional;
+						}
+					}
+				}
+			}
+		}
+	}
+}