@volverjs/style 0.1.12-beta.1 → 0.1.12-beta.10

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.12-beta.1",
+  "version": "0.1.12-beta.10",
   "engines": {
     "node": ">= 12.x"
   },
@@ -38,46 +38,47 @@
   ],
   "devDependencies": {
     "@iconify/vue": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vueuse/core": "^10.1.2",
-    "@vueuse/head": "^1.1.26",
-    "eslint": "^8.41.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.14.1",
-    "glob": "^10.2.6",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "@vueuse/core": "^10.4.1",
+    "@vueuse/head": "^2.0.0",
+    "eslint": "^8.50.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "glob": "^10.3.10",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-prism": "^2.3.0",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.30",
     "postcss-html": "^1.5.0",
-    "postcss-preset-env": "^8.4.1",
+    "postcss-preset-env": "^9.1.4",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
-    "remark": "^14.0.3",
-    "remark-frontmatter": "^4.0.1",
-    "remark-gfm": "^3.0.1",
+    "reduce-css-calc": "^2.1.8",
+    "remark": "^15.0.1",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0",
     "remark-lint": "^9.1.2",
-    "sass": "^1.62.1",
-    "stylelint": "^15.6.2",
+    "sass": "^1.68.0",
+    "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.0",
-    "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.30.1",
-    "vite-plugin-stylelint": "^4.3.0",
+    "vite-plugin-pages": "^0.31.0",
+    "vite-plugin-stylelint": "^5.1.1",
     "vite-plugin-vue-layouts": "^0.8.0",
-    "vite-ssg": "^0.22.2",
+    "vite-ssg": "^0.23.3",
     "vite-ssg-sitemap": "^0.5.1",
     "vue": "^3.3.4",
-    "vue-live": "^2.5.3",
-    "vue-router": "^4.2.2"
+    "vue-live": "^2.5.4",
+    "vue-router": "^4.2.5"
   },
   "exports": {
     ".": "./dist/volver.css",
@@ -178,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",
@@ -226,7 +229,7 @@
   "scripts": {
     "dev": "vite --port 3000 --open",
     "build": "node ./scripts/build.js",
-    "generate-design-tokens": "node ./scripts/generateDesignTokens.js",
+    "design-tokens": "node ./scripts/generateDesignTokens.js",
     "styleguide": "vite-ssg build"
   }
 }

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

@@ -57,6 +57,10 @@
 			@extend %list-decimal !optional;
 		}
 
+		&:where(li > p) {
+			@extend %inline-block !optional;
+		}
+
 		&:where(b, strong, th) {
 			@extend %font-bold !optional;
 		}
@@ -90,6 +94,10 @@
 			@extend %font-mono !optional;
 		}
 
+		&:where(p > code) {
+			@extend %whitespace-nowrap !optional;
+		}
+
 		&:where(sub) {
 			@extend %align-sub !optional;
 			@extend %text-smaller !optional;
@@ -213,6 +221,7 @@
 		// table
 		&:where(table) {
 			@extend %vv-table !optional;
+			@extend %vv-table--bordered !optional;
 
 			:where(tr) {
 				@extend %vv-table__tr !optional;
@@ -220,10 +229,16 @@
 
 			:where(td) {
 				@extend %vv-table__td !optional;
+				@extend %vv-table-modifier-bordered__td !optional;
 			}
 
 			:where(th) {
 				@extend %vv-table__th !optional;
+				@extend %vv-table-modifier-bordered__th !optional;
+			}
+
+			:where(caption) {
+				@extend %vv-table__caption !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-group.scss

@@ -48,7 +48,7 @@ $button-component-selector: '.' + $button-component-name;
 				#{$button-component-selector} {
 					// clear top border-radius for first child
 					@include wrap-with-where(
-						$selector: '&:not(:first-child)',
+						$selector: '&:not(:first-of-type)',
 						$enabled: $zero-specificity-for-components
 					) {
 						border-top-right-radius: 0;
@@ -57,7 +57,7 @@ $button-component-selector: '.' + $button-component-name;
 
 					// clear bottom border-radius for last child
 					@include wrap-with-where(
-						$selector: '&:not(:last-child)',
+						$selector: '&:not(:last-of-type)',
 						$enabled: $zero-specificity-for-components
 					) {
 						border-bottom-right-radius: 0;
@@ -67,7 +67,7 @@ $button-component-selector: '.' + $button-component-name;
 					// clear margin for inner children
 					@if map.get($vv-button, '--button-border-width') {
 						@include wrap-with-where(
-							$selector: '&:not(:last-child, :last-child)',
+							$selector: '&:not(:first-of-type, :last-of-type)',
 							$enabled: $zero-specificity-for-components
 						) {
 							margin-block: calc(var(--button-border-width) * -1);
@@ -81,7 +81,7 @@ $button-component-selector: '.' + $button-component-name;
 			#{$button-component-selector} {
 				// clear left border-radius for first child
 				@include wrap-with-where(
-					$selector: '&:not(:first-child)',
+					$selector: '&:not(:first-of-type)',
 					$enabled: $zero-specificity-for-components
 				) {
 					border-top-left-radius: 0;
@@ -90,7 +90,7 @@ $button-component-selector: '.' + $button-component-name;
 
 				// clear right border-radius for first child
 				@include wrap-with-where(
-					$selector: '&:not(:last-child)',
+					$selector: '&:not(:last-of-type)',
 					$enabled: $zero-specificity-for-components
 				) {
 					border-top-right-radius: 0;
@@ -100,7 +100,7 @@ $button-component-selector: '.' + $button-component-name;
 				// clear margin for inner children
 				@if map.get($vv-button, '--button-border-width') {
 					@include wrap-with-where(
-						$selector: '&:not(:last-child, :last-child)',
+						$selector: '&:not(:first-of-type, :last-of-type)',
 						$enabled: $zero-specificity-for-components
 					) {
 						margin-inline: calc(var(--button-border-width) * -1);

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;
+					}
 				}
 			}
 		}