@volverjs/style 0.1.25 → 0.1.27

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.25",
+  "version": "0.1.27",
   "engines": {
     "node": ">= 20.x"
   },
@@ -37,24 +37,27 @@
     "design-tokens.json"
   ],
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@iconify/vue": "^5.0.1",
     "@nabla/vite-plugin-eslint": "^3.0.1",
-    "@types/node": "^26.0.0",
-    "@vitejs/plugin-vue": "^6.0.7",
-    "@vueuse/core": "^14.3.0",
+    "@types/node": "^26.4.1",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vueuse/core": "^14.4.0",
     "@vueuse/head": "^2.0.0",
+    "eslint": "^10.10.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.6",
-    "eslint-plugin-vue": "^10.9.2",
+    "eslint-plugin-vue": "^10.11.0",
     "glob": "^13.0.6",
+    "globals": "^17.12.0",
     "icss-utils": "^5.1.0",
-    "markdown-it": "^15.0.0",
-    "markdown-it-anchor": "^9.2.0",
-    "markdown-it-prism": "^3.0.1",
-    "postcss": "^8.5.15",
+    "markdown-it": "^15.0.1",
+    "markdown-it-anchor": "^10.0.0",
+    "markdown-it-prism": "^4.0.0",
+    "postcss": "^8.5.28",
     "postcss-html": "^2.0.0",
-    "postcss-preset-env": "^11.3.1",
-    "prettier": "^3.8.4",
+    "postcss-preset-env": "^11.5.2",
+    "prettier": "^3.9.6",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.30.0",
     "reduce-css-calc": "^2.1.8",
@@ -62,25 +65,25 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "remark-lint": "^10.0.1",
-    "sass-embedded": "^1.100.0",
-    "stylelint": "^17.13.0",
+    "sass-embedded": "^1.104.0",
+    "stylelint": "^17.15.0",
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-config-recommended-vue": "^2.0.0",
     "stylelint-config-standard-scss": "^17.0.0",
-    "unplugin-auto-import": "^21.0.0",
+    "unplugin-auto-import": "^21.1.0",
     "unplugin-vue-components": "^32.1.0",
-    "vite": "^8.0.16",
+    "vite": "^8.2.2",
     "vite-plugin-css-export": "^3.1.0",
     "vite-plugin-handlebars": "^2.0.3",
     "vite-plugin-markdown": "^2.2.0",
     "vite-plugin-pages": "^0.33.3",
-    "vite-plugin-stylelint": "^6.1.0",
+    "vite-plugin-stylelint": "^6.3.0",
     "vite-plugin-vue-layouts": "^0.11.0",
     "vite-ssg": "^28.3.0",
     "vite-ssg-sitemap": "^0.10.0",
-    "vue": "^3.5.38",
+    "vue": "^3.5.42",
     "vue-live": "^2.5.4",
-    "vue-router": "^5.1.0"
+    "vue-router": "^5.3.1"
   },
   "exports": {
     ".": "./dist/volver.css",
@@ -105,6 +108,7 @@
     "./components/vv-dropdown-optgroup": "./dist/components/vv-dropdown-optgroup.css",
     "./components/vv-dropdown-option": "./dist/components/vv-dropdown-option.css",
     "./components/vv-input-file": "./dist/components/vv-input-file.css",
+    "./components/vv-input-range": "./dist/components/vv-input-range.css",
     "./components/vv-input-text": "./dist/components/vv-input-text.css",
     "./components/vv-nav": "./dist/components/vv-nav.css",
     "./components/vv-progress": "./dist/components/vv-progress.css",
@@ -155,6 +159,7 @@
     "./scss/components/vv-dropdown-optgroup": "./src/components/vv-dropdown-optgroup.scss",
     "./scss/components/vv-dropdown-option": "./src/components/vv-dropdown-option.scss",
     "./scss/components/vv-input-file": "./src/components/vv-input-file.scss",
+    "./scss/components/vv-input-range": "./src/components/vv-input-range.scss",
     "./scss/components/vv-input-text": "./src/components/vv-input-text.scss",
     "./scss/components/vv-nav": "./src/components/vv-nav.scss",
     "./scss/components/vv-progress": "./src/components/vv-progress.scss",

package/src/_config.scss

@@ -46,6 +46,7 @@ $components-names: (
 	vv-dropdown-option: $components-prefix + -dropdown-option,
 	vv-dropdown: $components-prefix + -dropdown,
 	vv-input-file: $components-prefix + -input-file,
+	vv-input-range: $components-prefix + -input-range,
 	vv-input-text: $components-prefix + -input-text,
 	vv-nav: $components-prefix + -nav,
 	vv-progress: $components-prefix + -progress,

package/src/components/index.scss

@@ -20,6 +20,7 @@
 @use 'vv-avatar-group';
 @use 'vv-input-text';
 @use 'vv-input-file';
+@use 'vv-input-range';
 @use 'vv-nav';
 @use 'vv-progress';
 @use 'vv-select';

package/src/components/vv-input-file.scss

@@ -1,11 +1,9 @@
 @use 'sass:map';
-@use 'sass:list';
 @use '../context' as *;
 
 @include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-input-file);
 $component-map: $vv-input-file;
-$component-selector: '.#{$component-name}';
 
 @include spread-map-into-bem(
 	$map: $component-map,
@@ -16,86 +14,12 @@ $component-selector: '.#{$component-name}';
 );
 
 // disabled and readonly
-@each $state in ('disabled', 'readonly') {
-	$selector: '#{$component-selector}:has(input[#{$state}])';
-
-	@include wrap-with-where(
-		$selector: $selector,
-		$enabled: $zero-specificity-for-components
-	) {
-		@extend %#{$component-name}--#{$state} !optional;
-	}
-
-	// element
-	@if map.get($component-map, 'state', $state, 'element') {
-		@each $element,
-			$map in map.get($component-map, 'state', $state, 'element')
-		{
-			$element-selector: (
-				'#{$selector} #{$component-selector}__#{$element}'
-			);
-			$alias: map.get($component-map, 'element', $element, '_alias');
-
-			@if $alias {
-				$element-selector: list.append(
-					$element-selector,
-					('#{$selector} #{$alias}')
-				);
-			}
-
-			@include wrap-with-where(
-				$selector: $element-selector,
-				$enabled: $zero-specificity-for-components
-			) {
-				@extend %#{$component-name}-state-#{$state}__#{$element}
-						!optional;
-			}
-
-			// element state
-			@each $elementState, $elementMap in map.get($map, 'state') {
-				@if $elementState {
-					$element-selector-state: ();
-
-					@each $item in $element-selector {
-						$element-selector-state: list.append(
-							$element-selector-state,
-							('#{$item}:#{$elementState}')
-						);
-					}
-
-					@include wrap-with-where(
-						$selector: $element-selector-state,
-						$enabled: $zero-specificity-for-components
-					) {
-						@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$elementState}
-								!optional;
-					}
-				}
-			}
-
-			// element pseudo
-			@each $pseudo, $pseudoMap in map.get($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-for-components
-					) {
-						@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$pseudo}
-								!optional;
-					}
-				}
-			}
-		}
-	}
-}
+@include spread-map-into-control-states(
+	$map: $component-map,
+	$block: $component-name,
+	$control: 'input',
+	$states: ('disabled', 'readonly'),
+	$zero-specificity: $zero-specificity-for-components
+);
 
 }

package/src/components/vv-input-range.scss

@@ -0,0 +1,28 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-input-range);
+$component-map: $vv-input-range;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+// A range input has no readonly state in HTML, so `disabled` is the only
+// attribute that can style the field without the modifier class, and the
+// readonly modifier is what the field uses to undo that look.
+@include spread-map-into-control-states(
+	$map: $component-map,
+	$block: $component-name,
+	$control: 'input',
+	$states: ('disabled'),
+	$except-modifiers: ('readonly'),
+	$zero-specificity: $zero-specificity-for-components
+);
+
+}

package/src/components/vv-input-text.scss

@@ -1,11 +1,9 @@
 @use 'sass:map';
-@use 'sass:list';
 @use '../context' as *;
 
 @include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-input-text);
 $component-map: $vv-input-text;
-$component-selector: '.#{$component-name}';
 
 @include spread-map-into-bem(
 	$map: $component-map,
@@ -16,86 +14,12 @@ $component-selector: '.#{$component-name}';
 );
 
 // disabled and readonly
-@each $state in ('disabled', 'readonly') {
-	$selector: '#{$component-selector}:has(input[#{$state}])';
-
-	@include wrap-with-where(
-		$selector: $selector,
-		$enabled: $zero-specificity-for-components
-	) {
-		@extend %#{$component-name}--#{$state} !optional;
-	}
-
-	// element
-	@if map.get($component-map, 'state', $state, 'element') {
-		@each $element,
-			$map in map.get($component-map, 'state', $state, 'element')
-		{
-			$element-selector: (
-				'#{$selector} #{$component-selector}__#{$element}'
-			);
-			$alias: map.get($component-map, 'element', $element, '_alias');
-
-			@if $alias {
-				$element-selector: list.append(
-					$element-selector,
-					('#{$selector} #{$alias}')
-				);
-			}
-
-			@include wrap-with-where(
-				$selector: $element-selector,
-				$enabled: $zero-specificity-for-components
-			) {
-				@extend %#{$component-name}-state-#{$state}__#{$element}
-						!optional;
-			}
-
-			// element state
-			@each $elementState, $elementMap in map.get($map, 'state') {
-				@if $elementState {
-					$element-selector-state: ();
-
-					@each $item in $element-selector {
-						$element-selector-state: list.append(
-							$element-selector-state,
-							('#{$item}:#{$elementState}')
-						);
-					}
-
-					@include wrap-with-where(
-						$selector: $element-selector-state,
-						$enabled: $zero-specificity-for-components
-					) {
-						@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$elementState}
-								!optional;
-					}
-				}
-			}
-
-			// element pseudo
-			@each $pseudo, $pseudoMap in map.get($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-for-components
-					) {
-						@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$pseudo}
-								!optional;
-					}
-				}
-			}
-		}
-	}
-}
+@include spread-map-into-control-states(
+	$map: $component-map,
+	$block: $component-name,
+	$control: 'input',
+	$states: ('disabled', 'readonly'),
+	$zero-specificity: $zero-specificity-for-components
+);
 
 }

package/src/components/vv-select.scss

@@ -1,11 +1,9 @@
 @use 'sass:map';
-@use 'sass:list';
 @use '../context' as *;
 
 @include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-select);
 $component-map: $vv-select;
-$component-selector: '.#{ $component-name}';
 
 @include spread-map-into-bem(
 	$map: $component-map,
@@ -16,86 +14,12 @@ $component-selector: '.#{ $component-name}';
 );
 
 // disabled
-@each $state in ('disabled') {
-	$selector: '#{$component-selector}:has(select[#{$state}])';
-
-	@include wrap-with-where(
-		$selector: $selector,
-		$enabled: $zero-specificity-for-components
-	) {
-		@extend %#{$component-name}--#{$state} !optional;
-	}
-
-	// element
-	@if map.get($component-map, 'state', $state, 'element') {
-		@each $element,
-			$map in map.get($component-map, 'state', $state, 'element')
-		{
-			$element-selector: (
-				'#{$selector} #{$component-selector}__#{$element}'
-			);
-			$alias: map.get($component-map, 'element', $element, '_alias');
-
-			@if $alias {
-				$element-selector: list.append(
-					$element-selector,
-					('#{$selector} #{$alias}')
-				);
-			}
-
-			@include wrap-with-where(
-				$selector: $element-selector,
-				$enabled: $zero-specificity-for-components
-			) {
-				@extend %#{$component-name}-state-#{$state}__#{$element}
-						!optional;
-			}
-
-			// element state
-			@each $elementState, $elementMap in map.get($map, 'state') {
-				@if $elementState {
-					$element-selector-state: ();
-
-					@each $item in $element-selector {
-						$element-selector-state: list.append(
-							$element-selector-state,
-							('#{$item}:#{$elementState}')
-						);
-					}
-
-					@include wrap-with-where(
-						$selector: $element-selector-state,
-						$enabled: $zero-specificity-for-components
-					) {
-						@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$elementState}
-								!optional;
-					}
-				}
-			}
-
-			// element pseudo
-			@each $pseudo, $pseudoMap in map.get($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-for-components
-					) {
-						@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$pseudo}
-								!optional;
-					}
-				}
-			}
-		}
-	}
-}
+@include spread-map-into-control-states(
+	$map: $component-map,
+	$block: $component-name,
+	$control: 'select',
+	$states: ('disabled'),
+	$zero-specificity: $zero-specificity-for-components
+);
 
 }

package/src/components/vv-textarea.scss

@@ -1,11 +1,9 @@
 @use 'sass:map';
-@use 'sass:list';
 @use '../context' as *;
 
 @include layer(components, $use-css-layers, $layer-prefix) {
 $component-name: map.get($components-names, vv-textarea);
 $component-map: $vv-textarea;
-$component-selector: '.#{ $component-name}';
 
 @include spread-map-into-bem(
 	$map: $component-map,
@@ -16,86 +14,12 @@ $component-selector: '.#{ $component-name}';
 );
 
 // disabled and readonly
-@each $state in ('disabled', 'readonly') {
-	$selector: '#{$component-selector}:has(textarea[#{$state}])';
-
-	@include wrap-with-where(
-		$selector: $selector,
-		$enabled: $zero-specificity-for-components
-	) {
-		@extend %#{$component-name}--#{$state} !optional;
-	}
-
-	// element
-	@if map.get($component-map, 'state', $state, 'element') {
-		@each $element,
-			$map in map.get($component-map, 'state', $state, 'element')
-		{
-			$element-selector: (
-				'#{$selector} #{$component-selector}__#{$element}'
-			);
-			$alias: map.get($component-map, 'element', $element, '_alias');
-
-			@if $alias {
-				$element-selector: list.append(
-					$element-selector,
-					('#{$selector} #{$alias}')
-				);
-			}
-
-			@include wrap-with-where(
-				$selector: $element-selector,
-				$enabled: $zero-specificity-for-components
-			) {
-				@extend %#{$component-name}-state-#{$state}__#{$element}
-						!optional;
-			}
-
-			// element state
-			@each $elementState, $elementMap in map.get($map, 'state') {
-				@if $elementState {
-					$element-selector-state: ();
-
-					@each $item in $element-selector {
-						$element-selector-state: list.append(
-							$element-selector-state,
-							('#{$item}:#{$elementState}')
-						);
-					}
-
-					@include wrap-with-where(
-						$selector: $element-selector-state,
-						$enabled: $zero-specificity-for-components
-					) {
-						@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$elementState}
-								!optional;
-					}
-				}
-			}
-
-			// element pseudo
-			@each $pseudo, $pseudoMap in map.get($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-for-components
-					) {
-						@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$pseudo}
-								!optional;
-					}
-				}
-			}
-		}
-	}
-}
+@include spread-map-into-control-states(
+	$map: $component-map,
+	$block: $component-name,
+	$control: 'textarea',
+	$states: ('disabled', 'readonly'),
+	$zero-specificity: $zero-specificity-for-components
+);
 
 }

package/src/props/layout.scss

@@ -5,4 +5,32 @@
 		@include spread-map-into-props($map: $aspect-ratio, $prefix: aspect);
 		@include spread-map-into-props($map: $z-index, $prefix: z);
 	}
+
+	// Sign of the inline axis: 1 where it runs left to right, -1 where it runs
+	// the other way. CSS has logical properties for the box, but none for
+	// `translate`, `rotate` or `scale`, so a component that moves an element
+	// along the inline axis multiplies its offset by this instead of naming a
+	// physical direction.
+
+	// The default is declared on the document root alone, and not on the
+	// `:host` and `.theme` scopes the props above share: those sit inside the
+	// document and inherit a direction from their ancestors, so re-declaring
+	// the default there would replace it, and a themed section of a
+	// right-to-left document would move its components the other way. Nothing
+	// can be inherited at the root, so the default belongs there and nowhere
+	// else. Every declaration reading the token passes a `1` fallback anyway,
+	// so a cherry-picked component keeps working without this file.
+	:where(:root) {
+		--direction: 1;
+	}
+
+	// The `dir` attribute rather than `:dir()`, so that an island of one
+	// direction inside a document of the other turns with its container.
+	:where([dir='rtl']) {
+		--direction: -1;
+	}
+
+	:where([dir='ltr']) {
+		--direction: 1;
+	}
 }

package/src/settings/_index.scss

@@ -39,6 +39,7 @@
 @forward 'components/vv-avatar';
 @forward 'components/vv-avatar-group';
 @forward 'components/vv-input-file';
+@forward 'components/vv-input-range';
 @forward 'components/vv-input-text';
 @forward 'components/vv-nav';
 @forward 'components/vv-progress';

package/src/settings/_input.scss

@@ -59,4 +59,16 @@ $input: (
 			translate: 0 -0.8em,
 		),
 	),
+	range: (
+		accent-color: var(--color-brand),
+		track-color: var(--color-surface-3),
+		track-height: var(--spacing-6),
+		thumb-size: var(--spacing-20),
+		thumb-shadow: var(--shadow-sm),
+		thumb-shadow-hover: 0 0 0 var(--spacing-4) var(--color-surface-brand),
+		// Share of the track that is filled. A range input exposes no such
+		// value to CSS, so the component writes it inline on the block and
+		// this default keeps static markup from breaking the gradient.
+		progress: 0%,
+	),
 ) !default;

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

@@ -338,11 +338,11 @@ $vv-alert: (
 			),
 			enter-from: (
 				opacity: var(--opacity-0),
-				translate: 100%,
+				[translate]: calc(100% * var(--direction, 1)),
 			),
 			leave-to: (
 				opacity: var(--opacity-0),
-				translate: 100%,
+				[translate]: calc(100% * var(--direction, 1)),
 			),
 		),
 		fade-inline-start: (
@@ -351,11 +351,11 @@ $vv-alert: (
 			),
 			enter-from: (
 				opacity: var(--opacity-0),
-				translate: -100%,
+				[translate]: calc(-100% * var(--direction, 1)),
 			),
 			leave-to: (
 				opacity: var(--opacity-0),
-				translate: -100%,
+				[translate]: calc(-100% * var(--direction, 1)),
 			),
 		),
 		fade-block-top: (

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