@volverjs/style 0.1.12-beta.6 → 0.1.12-beta.8

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.12-beta.6",
+  "version": "0.1.12-beta.8",
   "engines": {
     "node": ">= 12.x"
   },
@@ -38,19 +38,19 @@
   ],
   "devDependencies": {
     "@iconify/vue": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vueuse/core": "^10.1.2",
-    "@vueuse/head": "^1.1.26",
-    "eslint": "^8.42.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.14.1",
-    "glob": "^10.2.7",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "@vueuse/core": "^10.4.1",
+    "@vueuse/head": "^2.0.0",
+    "eslint": "^8.49.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "glob": "^10.3.4",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-prism": "^2.3.0",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.29",
     "postcss-html": "^1.5.0",
-    "postcss-preset-env": "^8.4.2",
+    "postcss-preset-env": "^9.1.3",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
     "reduce-css-calc": "^2.1.8",
@@ -58,27 +58,27 @@
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "remark-lint": "^9.1.2",
-    "sass": "^1.63.3",
-    "stylelint": "^15.7.0",
+    "sass": "^1.66.1",
+    "stylelint": "^15.10.3",
     "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-recommended-scss": "^12.0.0",
-    "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard-scss": "^9.0.0",
-    "unplugin-auto-import": "^0.16.4",
-    "unplugin-vue-components": "^0.25.1",
-    "vite": "^4.3.9",
+    "stylelint-config-recommended-scss": "^13.0.0",
+    "stylelint-config-recommended-vue": "^1.5.0",
+    "stylelint-config-standard-scss": "^11.0.0",
+    "unplugin-auto-import": "^0.16.6",
+    "unplugin-vue-components": "^0.25.2",
+    "vite": "^4.4.9",
     "vite-plugin-css-export": "^2.0.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^1.6.0",
     "vite-plugin-markdown": "^2.1.0",
     "vite-plugin-pages": "^0.31.0",
-    "vite-plugin-stylelint": "^4.3.0",
+    "vite-plugin-stylelint": "^5.1.1",
     "vite-plugin-vue-layouts": "^0.8.0",
-    "vite-ssg": "^0.22.2",
+    "vite-ssg": "^0.23.1",
     "vite-ssg-sitemap": "^0.5.1",
     "vue": "^3.3.4",
     "vue-live": "^2.5.4",
-    "vue-router": "^4.2.2"
+    "vue-router": "^4.2.4"
   },
   "exports": {
     ".": "./dist/volver.css",
@@ -179,6 +179,8 @@
     "./scss/components/vv-nav": "./src/components/vv-nav.scss",
     "./components/vv-input-text": "./dist/components/vv-input-text.css",
     "./scss/components/vv-input-text": "./src/components/vv-input-text.scss",
+    "./components/vv-input-file": "./dist/components/vv-input-file.css",
+    "./scss/components/vv-input-file": "./src/components/vv-input-file.scss",
     "./components/vv-dropdown": "./dist/components/vv-dropdown.css",
     "./scss/components/vv-dropdown": "./src/components/vv-dropdown.scss",
     "./components/vv-dropdown-option": "./dist/components/vv-dropdown-option.css",

package/src/_config.scss

@@ -14,27 +14,28 @@ $components-prefix: vv !default;
 $components-names: (
 	vv-accordion-group: $components-prefix + -accordion-group,
 	vv-accordion: $components-prefix + -accordion,
-	vv-alert: $components-prefix + -alert,
 	vv-alert-group: $components-prefix + -alert-group,
+	vv-alert: $components-prefix + -alert,
+	vv-avatar-group: $components-prefix + -avatar-group,
+	vv-avatar: $components-prefix + -avatar,
 	vv-badge: $components-prefix + -badge,
 	vv-breadcrumb: $components-prefix + -breadcrumb,
 	vv-button-group: $components-prefix + -button-group,
 	vv-button: $components-prefix + -button,
 	vv-card: $components-prefix + -card,
+	vv-checkbox-group: $components-prefix + -checkbox-group,
+	vv-checkbox: $components-prefix + -checkbox,
 	vv-dialog: $components-prefix + -dialog,
-	vv-dropdown: $components-prefix + -dropdown,
 	vv-dropdown-action: $components-prefix + -dropdown-action,
-	vv-dropdown-option: $components-prefix + -dropdown-option,
 	vv-dropdown-optgroup: $components-prefix + -dropdown-optgroup,
-	vv-checkbox-group: $components-prefix + -checkbox-group,
-	vv-checkbox: $components-prefix + -checkbox,
-	vv-radio-group: $components-prefix + -radio-group,
-	vv-radio: $components-prefix + -radio,
-	vv-avatar: $components-prefix + -avatar,
-	vv-avatar-group: $components-prefix + -avatar-group,
+	vv-dropdown-option: $components-prefix + -dropdown-option,
+	vv-dropdown: $components-prefix + -dropdown,
+	vv-input-file: $components-prefix + -input-file,
 	vv-input-text: $components-prefix + -input-text,
 	vv-nav: $components-prefix + -nav,
 	vv-progress: $components-prefix + -progress,
+	vv-radio-group: $components-prefix + -radio-group,
+	vv-radio: $components-prefix + -radio,
 	vv-select: $components-prefix + -select,
 	vv-skeleton: $components-prefix + -skeleton,
 	vv-tab: $components-prefix + -tab,

package/src/_preflight.scss

@@ -90,6 +90,10 @@
 			@extend %font-mono !optional;
 		}
 
+		&:where(p > code) {
+			@extend %whitespace-nowrap !optional;
+		}
+
 		&:where(sub) {
 			@extend %align-sub !optional;
 			@extend %text-smaller !optional;

package/src/components/index.scss

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

package/src/components/vv-button.scss

@@ -42,19 +42,8 @@ $component-selector: '.#{ $component-name}';
 				input[type='button'],
 				input[type='submit'],
 				input[type='reset']
-			),
-		&::file-selector-button {
+			) {
 			@extend %#{$component-name};
 		}
-
-		// input file
-		@if map.get($component-map, 'gap') {
-			&::file-selector-button {
-				margin-inline-end: var(
-					--vv-button-gap,
-					map.get($component-map, 'gap')
-				);
-			}
-		}
 	}
 }

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

@@ -0,0 +1,93 @@
+@use 'sass:map';
+@use 'sass:list';
+@use '../context' as *;
+
+$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,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+// 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;
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -1,9 +1,10 @@
 @use 'sass:map';
+@use 'sass:list';
 @use '../context' as *;
 
 $component-name: map.get($components-names, vv-input-text);
 $component-map: $vv-input-text;
-$component-selector: '.#{ $component-name}';
+$component-selector: '.#{$component-name}';
 
 @include spread-map-into-bem(
 	$map: $component-map,
@@ -15,34 +16,76 @@ $component-selector: '.#{ $component-name}';
 
 // disabled and readonly
 @each $state in ('disabled', 'readonly') {
+	$selector: '#{$component-selector}:has(input[#{$state}])';
 	@include wrap-with-where(
-		$selector: '#{$component-selector}:has(input:#{$state})',
+		$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:
-					'#{$component-selector}:has(input:#{$state}) #{$component-selector}__#{$element}',
+				$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') {
-				@include wrap-with-where(
-					$selector:
-						'#{$component-selector}:has(input:#{$state}) #{$component-selector}__#{$element}:#{$elementState}',
-					$enabled: $zero-specificity-for-components
-				) {
-					@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$elementState}
-							!optional;
+				@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;
+					}
 				}
 			}
 		}

package/src/components/vv-select.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:list';
 @use '../context' as *;
 
 $component-name: map.get($components-names, vv-select);
@@ -15,34 +16,76 @@ $component-selector: '.#{ $component-name}';
 
 // disabled
 @each $state in ('disabled') {
+	$selector: '#{$component-selector}:has(select[#{$state}])';
 	@include wrap-with-where(
-		$selector: '#{$component-selector}:has(select:#{$state})',
+		$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:
-					'#{$component-selector}:has(select:#{$state}) #{$component-selector}__#{$element}',
+				$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') {
-				@include wrap-with-where(
-					$selector:
-						'#{$component-selector}:has(select:#{$state}) #{$component-selector}__#{$element}:#{$elementState}',
-					$enabled: $zero-specificity-for-components
-				) {
-					@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$elementState}
-							!optional;
+				@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;
+					}
 				}
 			}
 		}

package/src/components/vv-textarea.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:list';
 @use '../context' as *;
 
 $component-name: map.get($components-names, vv-textarea);
@@ -15,34 +16,76 @@ $component-selector: '.#{ $component-name}';
 
 // disabled and readonly
 @each $state in ('disabled', 'readonly') {
+	$selector: '#{$component-selector}:has(textarea[#{$state}])';
 	@include wrap-with-where(
-		$selector: '#{$component-selector}:has(textarea:#{$state})',
+		$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:
-					'#{$component-selector}:has(textarea:#{$state}) #{$component-selector}__#{$element}',
+				$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') {
-				@include wrap-with-where(
-					$selector:
-						'#{$component-selector}:has(textarea:#{$state}) #{$component-selector}__#{$element}:#{$elementState}',
-					$enabled: $zero-specificity-for-components
-				) {
-					@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$elementState}
-							!optional;
+				@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;
+					}
 				}
 			}
 		}

package/src/props/transitions.scss

@@ -145,3 +145,22 @@
 		background-position-x: -200%;
 	}
 }
+
+@keyframes clippath {
+	0%,
+	100% {
+		clip-path: inset(0 0 95% 0);
+	}
+
+	25% {
+		clip-path: inset(0 95% 0 0);
+	}
+
+	50% {
+		clip-path: inset(95% 0 0 0);
+	}
+
+	75% {
+		clip-path: inset(0 0 0 95%);
+	}
+}

package/src/settings/_background.scss

@@ -50,6 +50,8 @@ $background-image: (
 	none: none,
 	chevron:
 		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"),
+	chessboard:
+		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='200' height='400'%3E%3Cdefs%3E%3Cpattern id='grid' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Crect fill='black' x='0' y='0' width='10' height='10' opacity='0.1'/%3E%3Crect fill='white' x='10' y='0' width='10' height='10'/%3E%3Crect fill='black' x='10' y='10' width='10' height='10' opacity='0.1'/%3E%3Crect fill='white' x='0' y='10' width='10' height='10'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23grid)' x='0' y='0' width='100%25' height='100%25'/%3E%3C/svg%3E"),
 	grid:
 		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E"),
 	check:

package/src/settings/_colors.scss

@@ -15,7 +15,7 @@ $color-info: #31ccec !default;
 $color-warning: #e7b735 !default;
 $color-gray: hsl(color.hue($color-brand) 15% 50%) !default;
 $color-word: hsl(color.hue($color-brand) 15% 10%) !default;
-$color-surface: hsl(color.hue($color-brand) 10% 98%) !default;
+$color-surface: hsl(color.hue($color-brand) 10% 100%) !default;
 $color-surface-palette: (
 	brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) 90%),
 	accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) 90%),

package/src/settings/_index.scss

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

package/src/settings/_input.scss

@@ -20,6 +20,7 @@ $input: (
 		color: var(--color-word-2),
 		display: inline,
 		font-size: var(--text-14),
+		font-weight: var(--font-normal),
 		gap: var(--spacing-xs),
 		max-width: 100%,
 		overflow: hidden,

package/src/settings/_transitions.scss

@@ -39,4 +39,5 @@ $animation: (
 	pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite,
 	bounce: bounce 1s infinite,
 	shine: shine 1.5s infinite,
+	clippath: clippath 3s infinite,
 ) !default;

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

@@ -22,6 +22,7 @@ $vv-alert: (
 			color: var(--color-word),
 			overflow: hidden,
 			text-overflow: ellipsis,
+			flex-shrink: 0,
 		),
 		title: (
 			min-width: 0,

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

@@ -8,6 +8,7 @@ $vv-checkbox-group: (
 			_alias: '> legend',
 			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),

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

@@ -18,6 +18,9 @@ $vv-dialog: (
 		close: (
 			display: none,
 		),
+		open: (
+			overflow: hidden,
+		),
 	),
 	element: (
 		wrapper: (