@volverjs/style 0.1.2-beta.26 → 0.1.2-beta.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.26",
+  "version": "0.1.2-beta.28",
   "description": "@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui and static webpages as well.",
   "main": "dist/style.css",
   "style": "dist/style.css",
@@ -39,24 +39,24 @@
     "./scss/components/vv-button": "./src/components/vv-button.scss",
     "./components/vv-card": "./dist/components/vv-card.css",
     "./scss/components/vv-card": "./src/components/vv-card.scss",
+    "./components/vv-checkbox-group": "./dist/components/vv-checkbox-group.css",
+    "./scss/components/vv-checkbox-group": "./src/components/vv-checkbox-group.scss",
+    "./components/vv-checkbox": "./dist/components/vv-checkbox.css",
+    "./scss/components/vv-checkbox": "./src/components/vv-checkbox.scss",
     "./components/vv-dialog": "./dist/components/vv-dialog.css",
     "./scss/components/vv-dialog": "./src/components/vv-dialog.scss",
     "./components/vv-dropdown": "./dist/components/vv-dropdown.css",
     "./scss/components/vv-dropdown": "./src/components/vv-dropdown.scss",
-    "./components/vv-input-checkbox-group": "./dist/components/vv-input-checkbox-group.css",
-    "./scss/components/vv-input-checkbox-group": "./src/components/vv-input-checkbox-group.scss",
-    "./components/vv-input-checkbox": "./dist/components/vv-input-checkbox.css",
-    "./scss/components/vv-input-checkbox": "./src/components/vv-input-checkbox.scss",
-    "./components/vv-input-radio-group": "./dist/components/vv-input-radio-group.css",
-    "./scss/components/vv-input-radio-group": "./src/components/vv-input-radio-group.scss",
-    "./components/vv-input-radio": "./dist/components/vv-input-radio.css",
-    "./scss/components/vv-input-radio": "./src/components/vv-input-radio.scss",
     "./components/vv-input-text": "./dist/components/vv-input-text.css",
     "./scss/components/vv-input-text": "./src/components/vv-input-text.scss",
     "./components/vv-nav": "./dist/components/vv-nav.css",
     "./scss/components/vv-nav": "./src/components/vv-nav.scss",
     "./components/vv-progress": "./dist/components/vv-progress.css",
     "./scss/components/vv-progress": "./src/components/vv-progress.scss",
+    "./components/vv-radio-group": "./dist/components/vv-radio-group.css",
+    "./scss/components/vv-radio-group": "./src/components/vv-radio-group.scss",
+    "./components/vv-radio": "./dist/components/vv-radio.css",
+    "./scss/components/vv-radio": "./src/components/vv-radio.scss",
     "./components/vv-select": "./dist/components/vv-select.css",
     "./scss/components/vv-select": "./src/components/vv-select.scss",
     "./components/vv-skeleton": "./dist/components/vv-skeleton.css",
@@ -157,21 +157,21 @@
   "devDependencies": {
     "@iconify/vue": "^4.0.2",
     "@vitejs/plugin-vue": "^4.0.0",
-    "@vueuse/core": "^9.6.0",
+    "@vueuse/core": "^9.8.2",
     "@vueuse/head": "^1.0.22",
-    "eslint": "^8.29.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-vue": "^9.8.0",
     "glob": "^8.0.3",
     "icss-utils": "^5.1.0",
-    "markdown-it-anchor": "^8.6.5",
+    "markdown-it-anchor": "^8.6.6",
     "markdown-it-prism": "^2.3.0",
     "postcss": "^8.4.20",
     "postcss-html": "^1.5.0",
     "postcss-preset-env": "^7.8.3",
     "prism-themes": "^1.9.0",
     "prismjs": "1.29.0",
-    "sass": "^1.56.2",
+    "sass": "^1.57.1",
     "stylelint": "^14.16.0",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-recommended-scss": "^8.0.0",
@@ -179,7 +179,7 @@
     "stylelint-config-standard-scss": "^6.1.0",
     "unplugin-auto-import": "^0.12.1",
     "unplugin-vue-components": "^0.22.12",
-    "vite": "^4.0.1",
+    "vite": "^4.0.3",
     "vite-plugin-css-export": "^1.2.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^1.6.0",

package/src/_config.scss

@@ -21,10 +21,10 @@ $components-names: (
 	vv-card: $components-prefix + -card,
 	vv-dialog: $components-prefix + -dialog,
 	vv-dropdown: $components-prefix + -dropdown,
-	vv-input-checkbox-group: $components-prefix + -input-checkbox-group,
-	vv-input-checkbox: $components-prefix + -input-checkbox,
-	vv-input-radio-group: $components-prefix + -input-radio-group,
-	vv-input-radio: $components-prefix + -input-radio,
+	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-input-text: $components-prefix + -input-text,
 	vv-nav: $components-prefix + -nav,

package/src/_preflight.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'context' as *;
 
-:where(:host, :root, [class*='theme']) {
+:where(:host, :root, .theme) {
 	accent-color: var(--color-brand);
 	background: var(--color-surface);
 	caret-color: var(--color-brand);
@@ -169,7 +169,12 @@
 		}
 
 		// buttons
-		&:where(button, input[type='button'], input[type='submit'], input[type='reset']) {
+		&:where(
+				button,
+				input[type='button'],
+				input[type='submit'],
+				input[type='reset']
+			) {
 			@extend %vv-button !optional;
 
 			&:where([type='button']) {
@@ -205,7 +210,12 @@
 			}
 
 			&
-				+ :where(button, input[type='button'], input[type='submit'], input[type='reset']) {
+				+ :where(
+					button,
+					input[type='button'],
+					input[type='submit'],
+					input[type='reset']
+				) {
 				@extend %ml-sm !optional;
 			}
 		}
@@ -234,98 +244,95 @@
 
 		// checkbox
 		&:where(fieldset:has(input[type='checkbox'])) {
-			@extend %vv-input-checkbox-group !optional;
+			@extend %vv-checkbox-group !optional;
 
 			:where(legend) {
-				@extend %vv-input-checkbox-group__legend !optional;
+				@extend %vv-checkbox-group__legend !optional;
 			}
 		}
 
 		&:where(label:has(input[type='checkbox'])) {
 			@extend %w-full !optional;
-			@extend %vv-input-checkbox !optional;
+			@extend %vv-checkbox !optional;
 
 			:where(input[type='checkbox']) {
-				@extend %vv-input-checkbox__input !optional;
+				@extend %vv-checkbox__input !optional;
 
 				&:checked {
-					@extend %vv-input-checkbox-element-input--checked !optional;
+					@extend %vv-checkbox-element-input--checked !optional;
 				}
 
 				&:indeterminate {
-					@extend %vv-input-checkbox-element-input--indeterminate
-							!optional;
+					@extend %vv-checkbox-element-input--indeterminate !optional;
 				}
 
 				&:focus-visible {
-					@extend %vv-input-checkbox-element-input--focus-visible
-							!optional;
+					@extend %vv-checkbox-element-input--focus-visible !optional;
 				}
 			}
 		}
 
 		// switch
 		&:where(label:has(input[type='checkbox'][role='switch'])) {
-			@extend %vv-input-checkbox--switch !optional;
+			@extend %vv-checkbox--switch !optional;
 
 			:where(input[type='checkbox'][role='switch']) {
-				@extend %vv-input-checkbox-modifier-switch__input !optional;
+				@extend %vv-checkbox-modifier-switch__input !optional;
 
 				&:hover {
-					@extend %vv-input-checkbox-modifier-switch-element-input--hover
+					@extend %vv-checkbox-modifier-switch-element-input--hover
 							!optional;
 				}
 
 				&:active {
-					@extend %vv-input-checkbox-modifier-switch-element-input--active
+					@extend %vv-checkbox-modifier-switch-element-input--active
 							!optional;
 				}
 
 				&:checked {
-					@extend %vv-input-checkbox-modifier-switch-element-input--checked
+					@extend %vv-checkbox-modifier-switch-element-input--checked
 							!optional;
 				}
 
 				&:focus-visible {
-					@extend %vv-input-checkbox-modifier-switch-element-input--focus-visible
+					@extend %vv-checkbox-modifier-switch-element-input--focus-visible
 							!optional;
 				}
 			}
 		}
 
 		&:where(label:has(input[type='checkbox']:disabled)) {
-			@extend %vv-input-checkbox--disabled !optional;
+			@extend %vv-checkbox--disabled !optional;
 		}
 
 		// radio
 		&:where(fieldset:has(input[type='radio'])) {
-			@extend %vv-input-radio-group !optional;
+			@extend %vv-radio-group !optional;
 
 			:where(legend) {
-				@extend %vv-input-radio-group__legend !optional;
+				@extend %vv-radio-group__legend !optional;
 			}
 		}
 
 		&:where(label:has(input[type='radio'])) {
 			@extend %w-full !optional;
-			@extend %vv-input-radio !optional;
+			@extend %vv-radio !optional;
 
 			:where(input[type='radio']) {
-				@extend %vv-input-radio__input !optional;
+				@extend %vv-radio__input !optional;
 
 				&:checked {
-					@extend %vv-input-radio-element-input--checked !optional;
+					@extend %vv-radio-element-input--checked !optional;
 				}
 
 				&:focus-visible {
-					@extend %vv-input-radio-element-input--focus-visible
-							!optional;
+					@extend %vv-radio-element-input--focus-visible !optional;
 				}
 			}
 		}
 
 		&:where(label:has(input[type='radio']:disabled)) {
-			@extend %vv-input-radio--disabled !optional;
+			@extend %vv-radio--disabled !optional;
 		}
 
 		// textarea
@@ -365,11 +372,29 @@
 		}
 
 		// input text
-		&:where(label:has(+ input:not([type='radio'], [type='checkbox'], [type='button'], [type='submit'], [type='reset']))) {
+		&:where(
+				label:has(
+						+ input:not(
+								[type='radio'],
+								[type='checkbox'],
+								[type='button'],
+								[type='submit'],
+								[type='reset']
+							)
+					)
+			) {
 			@extend %vv-input-text__label !optional;
 		}
 
-		&:where(input:not([type='radio'], [type='checkbox'], [type='button'], [type='submit'], [type='reset'])) {
+		&:where(
+				input:not(
+						[type='radio'],
+						[type='checkbox'],
+						[type='button'],
+						[type='submit'],
+						[type='reset']
+					)
+			) {
 			@extend %w-full !optional;
 			@extend %vv-input-text !optional;
 			@extend %vv-input-text__wrapper !optional;

package/src/components/index.scss

@@ -7,10 +7,10 @@
 @use 'vv-card';
 @use 'vv-dialog';
 @use 'vv-dropdown';
-@use 'vv-input-checkbox-group';
-@use 'vv-input-checkbox';
-@use 'vv-input-radio-group';
-@use 'vv-input-radio';
+@use 'vv-checkbox-group';
+@use 'vv-checkbox';
+@use 'vv-radio-group';
+@use 'vv-radio';
 @use 'vv-avatar';
 @use 'vv-input-text';
 @use 'vv-nav';

package/src/components/{vv-input-radio-group.scss → vv-checkbox-group.scss}

@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use '../context' as *;
 
-$component-name: map.get($components-names, vv-input-radio-group);
-$component-map: $vv-input-radio-group;
+$component-name: map.get($components-names, vv-checkbox-group);
+$component-map: $vv-checkbox-group;
 
 @include spread-map-into-bem(
 	$map: $component-map,

package/src/components/{vv-input-checkbox.scss → vv-checkbox.scss}

@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use '../context' as *;
 
-$component-name: map.get($components-names, vv-input-checkbox);
-$component-map: $vv-input-checkbox;
+$component-name: map.get($components-names, vv-checkbox);
+$component-map: $vv-checkbox;
 $component-selector: '.#{ $component-name}';
 
 @include spread-map-into-bem(

package/src/components/{vv-input-checkbox-group.scss → vv-radio-group.scss}

@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use '../context' as *;
 
-$component-name: map.get($components-names, vv-input-checkbox-group);
-$component-map: $vv-input-checkbox-group;
+$component-name: map.get($components-names, vv-radio-group);
+$component-map: $vv-radio-group;
 
 @include spread-map-into-bem(
 	$map: $component-map,

package/src/components/{vv-input-radio.scss → vv-radio.scss}

@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use '../context' as *;
 
-$component-name: map.get($components-names, vv-input-radio);
-$component-map: $vv-input-radio;
+$component-name: map.get($components-names, vv-radio);
+$component-map: $vv-radio;
 $component-selector: '.#{ $component-name}';
 
 @include spread-map-into-bem(

package/src/export.scss

@@ -424,6 +424,25 @@
 
 	// #endregion
 
+	// ============================================================== */
+	// #region FILTERS
+	// blur
+	@each $key, $value in $blur {
+		#{'blur__' + $key}: $value;
+	}
+
+	// brightness
+	@each $key, $value in $brightness {
+		#{'brightness__' + $key}: $value;
+	}
+
+	// saturation
+	@each $key, $value in $saturation {
+		#{'saturation__' + $key}: $value;
+	}
+
+	// #endregion
+
 	// ============================================================== */
 	// #region TRANSITIONS & ANIMATIONS
 	// transition property

package/src/props/filters.scss

@@ -3,4 +3,5 @@
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($blur, $prefix: blur);
 	@include spread-map-into-props($brightness, $prefix: brightness);
+	@include spread-map-into-props($saturation, $prefix: saturate);
 }

package/src/settings/_filters.scss

@@ -24,3 +24,12 @@ $brightness: (
 	150: brightness(1.5),
 	200: brightness(2),
 ) !default;
+
+// saturation
+$saturation: (
+	0: saturate(0),
+	50: saturate(0.5),
+	100: saturate(1),
+	150: saturate(1.5),
+	200: saturate(2),
+) !default;

package/src/settings/_index.scss

@@ -25,10 +25,10 @@
 @forward 'components/vv-card';
 @forward 'components/vv-dialog';
 @forward 'components/vv-dropdown';
-@forward 'components/vv-input-checkbox-group';
-@forward 'components/vv-input-checkbox';
-@forward 'components/vv-input-radio-group';
-@forward 'components/vv-input-radio';
+@forward 'components/vv-checkbox-group';
+@forward 'components/vv-checkbox';
+@forward 'components/vv-radio-group';
+@forward 'components/vv-radio';
 @forward 'components/vv-avatar';
 @forward 'components/vv-input-text';
 @forward 'components/vv-nav';

package/src/settings/components/{_vv-input-checkbox-group.scss → _vv-checkbox-group.scss}

@@ -1,4 +1,4 @@
-$vv-input-checkbox-group: (
+$vv-checkbox-group: (
 	display: var(--input-display),
 	flex: var(--input-flex),
 	flex-direction: var(--input-flex-direction),

package/src/settings/components/{_vv-input-checkbox.scss → _vv-checkbox.scss}

@@ -1,6 +1,6 @@
-$vv-input-checkbox: (
+$vv-checkbox: (
 	display: inline-flex,
-	flex-wrap: nowrap,
+	flex-wrap: wrap,
 	align-items: center,
 	cursor: pointer,
 	user-select: none,
@@ -14,17 +14,12 @@ $vv-input-checkbox: (
 			opacity: 0.3,
 			cursor: not-allowed,
 		),
-		readonly: (
-			opacity: 1,
-			cursor: default,
-			pointer-events: none,
-		),
 	),
 	element: (
 		input: (
 			_alias: "> input[type='checkbox']",
 			border: var(--spacing-2) solid var(--input-color),
-			width: var(--spacing-20),
+			min-width: var(--spacing-20),
 			height: var(--spacing-20),
 			margin: 0 var(--input-label-gap) 0 0,
 			background-position: center,
@@ -45,13 +40,30 @@ $vv-input-checkbox: (
 				),
 			),
 		),
+		hint: (
+			_alias: '> small',
+			flex-basis: 100%,
+			display: var(--input-hint-display),
+			font-size: var(--input-hint-font-size),
+			color: var(--input-hint-color),
+			padding-top: var(--input-hint-gap),
+			white-space: var(--input-hint-white-space),
+			text-overflow: var(--input-hint-text-overflow),
+			overflow: var(--input-hint-overflow),
+			max-width: var(--input-hint-max-width),
+		),
 	),
 	modifier: (
+		readonly: (
+			opacity: 1,
+			cursor: default,
+			pointer-events: none,
+		),
 		switch: (
 			element: (
 				input: (
 					border: 0,
-					width: var(--spacing-44),
+					min-width: var(--spacing-44),
 					height: var(--spacing-24),
 					border-radius: var(--spacing-12),
 					background-color: var(--color-word-5),
@@ -98,5 +110,19 @@ $vv-input-checkbox: (
 				),
 			),
 		),
+		valid: (
+			element: (
+				hint: (
+					color: var(--input-valid-color),
+				),
+			),
+		),
+		invalid: (
+			element: (
+				hint: (
+					color: var(--input-invalid-color),
+				),
+			),
+		),
 	),
 ) !default;

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

@@ -0,0 +1,3 @@
+@use 'vv-checkbox-group' as *;
+
+$vv-radio-group: $vv-checkbox-group !default;

package/src/settings/components/{_vv-input-radio.scss → _vv-radio.scss}

@@ -1,6 +1,6 @@
-$vv-input-radio: (
+$vv-radio: (
 	display: inline-flex,
-	flex-wrap: nowrap,
+	flex-wrap: wrap,
 	align-items: center,
 	cursor: pointer,
 	user-select: none,
@@ -14,17 +14,33 @@ $vv-input-radio: (
 			opacity: 0.3,
 			cursor: not-allowed,
 		),
+	),
+	modifier: (
 		readonly: (
 			opacity: 1,
 			cursor: default,
 			pointer-events: none,
 		),
+		valid: (
+			element: (
+				hint: (
+					color: var(--input-valid-color),
+				),
+			),
+		),
+		invalid: (
+			element: (
+				hint: (
+					color: var(--input-invalid-color),
+				),
+			),
+		),
 	),
 	element: (
 		input: (
 			_alias: "> input[type='radio']",
 			border: var(--spacing-2) solid var(--input-color),
-			width: var(--spacing-20),
+			min-width: var(--spacing-20),
 			height: var(--spacing-20),
 			border-radius: 50%,
 			margin: 0 var(--input-label-gap) 0 0,
@@ -58,5 +74,17 @@ $vv-input-radio: (
 				),
 			),
 		),
+		hint: (
+			_alias: '> small',
+			flex-basis: 100%,
+			display: var(--input-hint-display),
+			font-size: var(--input-hint-font-size),
+			color: var(--input-hint-color),
+			padding-top: var(--input-hint-gap),
+			white-space: var(--input-hint-white-space),
+			text-overflow: var(--input-hint-text-overflow),
+			overflow: var(--input-hint-overflow),
+			max-width: var(--input-hint-max-width),
+		),
 	),
 ) !default;

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

@@ -12,6 +12,7 @@ $vv-skeleton: (
 					var(--skeleton-shine-color) 18%,
 					var(--skeleton-background) 33%
 				),
+			[color]: transparent,
 			background-size: 200% 100%,
 			height: 1em,
 			border-radius: var(--rounded),

package/src/utilities/filters.scss

@@ -16,6 +16,14 @@
 	$zero-specificity: $zero-specificity-for-utilities
 );
 
+// saturation
+@include spread-map-into-utilities(
+	$map: $saturation,
+	$class: saturate,
+	$attribute: filter,
+	$zero-specificity: $zero-specificity-for-utilities
+);
+
 // backdrop blur
 @include spread-map-into-utilities(
 	$map: $blur,

package/src/utilities/transitions.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use '../context' as *;
 
 // transition property
@@ -29,14 +30,14 @@
 	$zero-specificity: $zero-specificity-for-utilities
 );
 
-@each $property in $transition-property {
+@each $property, $value in $transition-property {
 	@include wrap-with-where(
 		$selector: '.transition-#{$property}',
 		$enabled: $zero-specificity-for-utilities
 	) {
-		transition-property: $property;
+		transition-property: string.unquote($value);
 		@if $property != 'none' {
-			transition-duration: map.get($transition-duration-delay, '300');
+			transition-duration: map.get($transition-duration-delay, 300);
 			transition-timing-function: map.get(
 				$transition-timing-function,
 				'in-out'

package/dist/components/vv-input-checkbox-group.css

@@ -1 +0,0 @@
-:where(:host,:root,.theme){--vv-input-checkbox-group-display: var(--input-display);--vv-input-checkbox-group-flex: var(--input-flex);--vv-input-checkbox-group-flex-direction: var(--input-flex-direction);--vv-input-checkbox-group-min-width: var(--input-min-width);--vv-input-checkbox-group-element-legend-display: var(--input-label-display);--vv-input-checkbox-group-element-legend-font-size: var(--input-label-font-size);--vv-input-checkbox-group-element-legend-color: var(--input-label-color);--vv-input-checkbox-group-element-legend-margin: 0 0 var(--input-label-gap) 0;--vv-input-checkbox-group-element-legend-white-space: var(--input-label-white-space);--vv-input-checkbox-group-element-legend-text-overflow: var(--input-label-text-overflow);--vv-input-checkbox-group-element-legend-overflow: var(--input-label-overflow);--vv-input-checkbox-group-element-legend-max-width: var(--input-label-max-width);--vv-input-checkbox-group-element-wrapper-position: relative;--vv-input-checkbox-group-element-wrapper-display: flex;--vv-input-checkbox-group-element-wrapper-flex-direction: column;--vv-input-checkbox-group-element-wrapper-flex-wrap: wrap;--vv-input-checkbox-group-element-hint-display: var(--input-hint-display);--vv-input-checkbox-group-element-hint-font-size: var(--input-hint-font-size);--vv-input-checkbox-group-element-hint-color: var(--input-hint-color);--vv-input-checkbox-group-element-hint-padding-top: var(--input-hint-gap);--vv-input-checkbox-group-element-hint-white-space: var(--input-hint-white-space);--vv-input-checkbox-group-element-hint-text-overflow: var(--input-hint-text-overflow);--vv-input-checkbox-group-element-hint-overflow: var(--input-hint-overflow);--vv-input-checkbox-group-element-hint-max-width: var(--input-hint-max-width);--vv-input-checkbox-group-element-hint-margin-top: calc(var(--input-gap) * -1);--vv-input-checkbox-group-element-hint-margin-bottom: var(--input-gap);--vv-input-checkbox-group-modifier-horizontal-element-wrapper-flex-direction: row;--vv-input-checkbox-group-modifier-valid-element-hint-color: var(--input-valid-color);--vv-input-checkbox-group-modifier-invalid-element-hint-color: var(--input-invalid-color)}:where(.vv-input-checkbox-group){display:var(--vv-input-checkbox-group-display);flex:var(--vv-input-checkbox-group-flex);flex-direction:var(--vv-input-checkbox-group-flex-direction);min-width:var(--vv-input-checkbox-group-min-width)}:where(.vv-input-checkbox-group__legend,.vv-input-checkbox-group > legend){display:var(--vv-input-checkbox-group-element-legend-display);font-size:var(--vv-input-checkbox-group-element-legend-font-size);color:var(--vv-input-checkbox-group-element-legend-color);margin:var(--vv-input-checkbox-group-element-legend-margin);white-space:var(--vv-input-checkbox-group-element-legend-white-space);text-overflow:var(--vv-input-checkbox-group-element-legend-text-overflow);overflow:var(--vv-input-checkbox-group-element-legend-overflow);max-width:var(--vv-input-checkbox-group-element-legend-max-width)}:where(.vv-input-checkbox-group__wrapper){position:var(--vv-input-checkbox-group-element-wrapper-position);display:var(--vv-input-checkbox-group-element-wrapper-display);flex-direction:var(--vv-input-checkbox-group-element-wrapper-flex-direction);flex-wrap:var(--vv-input-checkbox-group-element-wrapper-flex-wrap)}:where(.vv-input-checkbox-group__hint,.vv-input-checkbox-group > small){display:var(--vv-input-checkbox-group-element-hint-display);font-size:var(--vv-input-checkbox-group-element-hint-font-size);color:var(--vv-input-checkbox-group-element-hint-color);padding-top:var(--vv-input-checkbox-group-element-hint-padding-top);white-space:var(--vv-input-checkbox-group-element-hint-white-space);text-overflow:var(--vv-input-checkbox-group-element-hint-text-overflow);overflow:var(--vv-input-checkbox-group-element-hint-overflow);max-width:var(--vv-input-checkbox-group-element-hint-max-width);margin-top:var(--vv-input-checkbox-group-element-hint-margin-top);margin-bottom:var(--vv-input-checkbox-group-element-hint-margin-bottom)}:where(.vv-input-checkbox-group--horizontal .vv-input-checkbox-group__wrapper){flex-direction:var(--vv-input-checkbox-group-modifier-horizontal-element-wrapper-flex-direction)}:where(.vv-input-checkbox-group--valid .vv-input-checkbox-group__hint,.vv-input-checkbox-group--valid > small){color:var(--vv-input-checkbox-group-modifier-valid-element-hint-color)}:where(.vv-input-checkbox-group--invalid .vv-input-checkbox-group__hint,.vv-input-checkbox-group--invalid > small){color:var(--vv-input-checkbox-group-modifier-invalid-element-hint-color)}

package/dist/components/vv-input-checkbox.css

@@ -1 +0,0 @@
-:where(:host,:root,.theme){--vv-input-checkbox-display: inline-flex;--vv-input-checkbox-flex-wrap: nowrap;--vv-input-checkbox-align-items: center;--vv-input-checkbox-cursor: pointer;--vv-input-checkbox-user-select: none;--vv-input-checkbox-margin: 0 var(--input-gap) var(--input-gap) 0;--vv-input-checkbox-color: var(--input-color);--vv-input-checkbox-font-size: var(--input-font-size);--vv-input-checkbox-line-height: var(--input-line-height);--vv-input-checkbox-min-width: var(--input-min-width);--vv-input-checkbox-state-disabled-opacity: .3;--vv-input-checkbox-state-disabled-cursor: not-allowed;--vv-input-checkbox-state-readonly-opacity: 1;--vv-input-checkbox-state-readonly-cursor: default;--vv-input-checkbox-state-readonly-pointer-events: none;--vv-input-checkbox-element-input-border: var(--spacing-2) solid var(--input-color);--vv-input-checkbox-element-input-width: var(--spacing-20);--vv-input-checkbox-element-input-height: var(--spacing-20);--vv-input-checkbox-element-input-margin: 0 var(--input-label-gap) 0 0;--vv-input-checkbox-element-input-background-position: center;--vv-input-checkbox-element-input-background-size: var(--text-12) auto;--vv-input-checkbox-element-input-background-repeat: no-repeat;--vv-input-checkbox-element-input-cursor: pointer;--vv-input-checkbox-element-input-position: relative;--vv-input-checkbox-element-input-state-checked-background-image: var(--bg-check);--vv-input-checkbox-element-input-state-indeterminate-background-image: var(--bg-minus);--vv-input-checkbox-element-input-state-focus-visible-outline: var(--spacing-px) solid var(--color-brand);--vv-input-checkbox-element-input-state-focus-visible-outline-offset: var(--spacing-2);--vv-input-checkbox-modifier-switch-element-input-border: 0;--vv-input-checkbox-modifier-switch-element-input-width: var(--spacing-44);--vv-input-checkbox-modifier-switch-element-input-height: var(--spacing-24);--vv-input-checkbox-modifier-switch-element-input-border-radius: var(--spacing-12);--vv-input-checkbox-modifier-switch-element-input-background-color: var(--color-word-5);--vv-input-checkbox-modifier-switch-element-input-position: relative;--vv-input-checkbox-modifier-switch-element-input-will-change: background-color;--vv-input-checkbox-modifier-switch-element-input-transition: var(--transition-colors);--vv-input-checkbox-modifier-switch-element-input-pseudo-after-width: var(--spacing-20);--vv-input-checkbox-modifier-switch-element-input-pseudo-after-height: var(--spacing-20);--vv-input-checkbox-modifier-switch-element-input-pseudo-after-border-radius: 50%;--vv-input-checkbox-modifier-switch-element-input-pseudo-after-position: absolute;--vv-input-checkbox-modifier-switch-element-input-pseudo-after-inset: var(--spacing-2) 0 0 var(--spacing-2);--vv-input-checkbox-modifier-switch-element-input-pseudo-after-background: var(--color-white);--vv-input-checkbox-modifier-switch-element-input-pseudo-after-will-change: transform;--vv-input-checkbox-modifier-switch-element-input-pseudo-after-transition: var(--transition-transform);--vv-input-checkbox-modifier-switch-element-input-state-hover-background-color: var(--color-word-4);--vv-input-checkbox-modifier-switch-element-input-state-active-background-color: var(--color-word-3);--vv-input-checkbox-modifier-switch-element-input-state-indeterminate-background-image: none;--vv-input-checkbox-modifier-switch-element-input-state-indeterminate-pseudo-after-transform: translateX(50%);--vv-input-checkbox-modifier-switch-element-input-state-checked-background-image: none;--vv-input-checkbox-modifier-switch-element-input-state-checked-background-color: var(--color-brand);--vv-input-checkbox-modifier-switch-element-input-state-checked-pseudo-after-transform: translateX(100%)}:where(.vv-input-checkbox){display:var(--vv-input-checkbox-display);flex-wrap:var(--vv-input-checkbox-flex-wrap);align-items:var(--vv-input-checkbox-align-items);cursor:var(--vv-input-checkbox-cursor);-webkit-user-select:var(--vv-input-checkbox-user-select);-moz-user-select:var(--vv-input-checkbox-user-select);user-select:var(--vv-input-checkbox-user-select);margin:var(--vv-input-checkbox-margin);color:var(--vv-input-checkbox-color);font-size:var(--vv-input-checkbox-font-size);line-height:var(--vv-input-checkbox-line-height);min-width:var(--vv-input-checkbox-min-width)}:where(.vv-input-checkbox__input,.vv-input-checkbox > input[type=checkbox]){border:var(--vv-input-checkbox-element-input-border);width:var(--vv-input-checkbox-element-input-width);height:var(--vv-input-checkbox-element-input-height);margin:var(--vv-input-checkbox-element-input-margin);background-position:var(--vv-input-checkbox-element-input-background-position);background-size:var(--vv-input-checkbox-element-input-background-size);background-repeat:var(--vv-input-checkbox-element-input-background-repeat);cursor:var(--vv-input-checkbox-element-input-cursor);position:var(--vv-input-checkbox-element-input-position)}:where(.vv-input-checkbox__input--checked,.vv-input-checkbox__input.checked,.vv-input-checkbox > input[type=checkbox].checked,.vv-input-checkbox__input:checked,.vv-input-checkbox > input[type=checkbox]:checked){background-image:var(--vv-input-checkbox-element-input-state-checked-background-image)}:where(.vv-input-checkbox__input--indeterminate,.vv-input-checkbox__input.indeterminate,.vv-input-checkbox > input[type=checkbox].indeterminate,.vv-input-checkbox__input:not([disabled]):indeterminate,.vv-input-checkbox > input[type=checkbox]:not([disabled]):indeterminate){background-image:var(--vv-input-checkbox-element-input-state-indeterminate-background-image)}:where(.vv-input-checkbox__input--focus-visible,.vv-input-checkbox__input.focus-visible,.vv-input-checkbox > input[type=checkbox].focus-visible,.vv-input-checkbox__input:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible,.vv-input-checkbox > input[type=checkbox]:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-input-checkbox-element-input-state-focus-visible-outline);outline-offset:var(--vv-input-checkbox-element-input-state-focus-visible-outline-offset)}:where(.vv-input-checkbox[\:has\(\%3E\%20input\[type\%3Dcheckbox\]\:disabled\)]),:where(.vv-input-checkbox--disabled,.vv-input-checkbox.disabled,.vv-input-checkbox[disabled],.vv-input-checkbox[aria-disabled=true]){opacity:var(--vv-input-checkbox-state-disabled-opacity);--vv-input-checkbox-cursor: var(--vv-input-checkbox-state-disabled-cursor)}:where(.vv-input-checkbox:has(> input[type=checkbox]:disabled)),:where(.vv-input-checkbox--disabled,.vv-input-checkbox.disabled,.vv-input-checkbox[disabled],.vv-input-checkbox[aria-disabled=true]){opacity:var(--vv-input-checkbox-state-disabled-opacity);--vv-input-checkbox-cursor: var(--vv-input-checkbox-state-disabled-cursor)}:where(.vv-input-checkbox--readonly,.vv-input-checkbox.readonly,.vv-input-checkbox[readonly]){opacity:var(--vv-input-checkbox-state-readonly-opacity);--vv-input-checkbox-cursor: var(--vv-input-checkbox-state-readonly-cursor);pointer-events:var(--vv-input-checkbox-state-readonly-pointer-events)}:where(.vv-input-checkbox--switch .vv-input-checkbox__input,.vv-input-checkbox--switch > input[type=checkbox]){border:var(--vv-input-checkbox-modifier-switch-element-input-border);width:var(--vv-input-checkbox-modifier-switch-element-input-width);height:var(--vv-input-checkbox-modifier-switch-element-input-height);border-radius:var(--vv-input-checkbox-modifier-switch-element-input-border-radius);background-color:var(--vv-input-checkbox-modifier-switch-element-input-background-color);position:var(--vv-input-checkbox-modifier-switch-element-input-position);will-change:var(--vv-input-checkbox-modifier-switch-element-input-will-change);transition:var(--vv-input-checkbox-modifier-switch-element-input-transition)}:where(.vv-input-checkbox--switch .vv-input-checkbox__input,.vv-input-checkbox--switch > input[type=checkbox]):after{content:"";width:var(--vv-input-checkbox-modifier-switch-element-input-pseudo-after-width);height:var(--vv-input-checkbox-modifier-switch-element-input-pseudo-after-height);border-radius:var(--vv-input-checkbox-modifier-switch-element-input-pseudo-after-border-radius);position:var(--vv-input-checkbox-modifier-switch-element-input-pseudo-after-position);inset:var(--vv-input-checkbox-modifier-switch-element-input-pseudo-after-inset);background:var(--vv-input-checkbox-modifier-switch-element-input-pseudo-after-background);will-change:var(--vv-input-checkbox-modifier-switch-element-input-pseudo-after-will-change);transition:var(--vv-input-checkbox-modifier-switch-element-input-pseudo-after-transition)}:where(.vv-input-checkbox--switch .vv-input-checkbox__input--hover,.vv-input-checkbox--switch .vv-input-checkbox__input.hover,.vv-input-checkbox--switch > input[type=checkbox].hover,.vv-input-checkbox--switch .vv-input-checkbox__input:not([disabled]):hover,.vv-input-checkbox--switch > input[type=checkbox]:not([disabled]):hover){--vv-input-checkbox-modifier-switch-element-input-background-color: var(--vv-input-checkbox-modifier-switch-element-input-state-hover-background-color)}:where(.vv-input-checkbox--switch .vv-input-checkbox__input--active,.vv-input-checkbox--switch .vv-input-checkbox__input.active,.vv-input-checkbox--switch > input[type=checkbox].active,.vv-input-checkbox--switch .vv-input-checkbox__input:not([disabled]):active,.vv-input-checkbox--switch > input[type=checkbox]:not([disabled]):active){--vv-input-checkbox-modifier-switch-element-input-background-color: var(--vv-input-checkbox-modifier-switch-element-input-state-active-background-color)}:where(.vv-input-checkbox--switch .vv-input-checkbox__input--indeterminate,.vv-input-checkbox--switch .vv-input-checkbox__input.indeterminate,.vv-input-checkbox--switch > input[type=checkbox].indeterminate,.vv-input-checkbox--switch .vv-input-checkbox__input:not([disabled]):indeterminate,.vv-input-checkbox--switch > input[type=checkbox]:not([disabled]):indeterminate){background-image:var(--vv-input-checkbox-modifier-switch-element-input-state-indeterminate-background-image)}:where(.vv-input-checkbox--switch .vv-input-checkbox__input--indeterminate,.vv-input-checkbox--switch .vv-input-checkbox__input.indeterminate,.vv-input-checkbox--switch > input[type=checkbox].indeterminate,.vv-input-checkbox--switch .vv-input-checkbox__input:not([disabled]):indeterminate,.vv-input-checkbox--switch > input[type=checkbox]:not([disabled]):indeterminate):after{transform:var(--vv-input-checkbox-modifier-switch-element-input-state-indeterminate-pseudo-after-transform)}:where(.vv-input-checkbox--switch .vv-input-checkbox__input--checked,.vv-input-checkbox--switch .vv-input-checkbox__input.checked,.vv-input-checkbox--switch > input[type=checkbox].checked,.vv-input-checkbox--switch .vv-input-checkbox__input:checked,.vv-input-checkbox--switch > input[type=checkbox]:checked){background-image:var(--vv-input-checkbox-modifier-switch-element-input-state-checked-background-image);--vv-input-checkbox-modifier-switch-element-input-background-color: var(--vv-input-checkbox-modifier-switch-element-input-state-checked-background-color)}:where(.vv-input-checkbox--switch .vv-input-checkbox__input--checked,.vv-input-checkbox--switch .vv-input-checkbox__input.checked,.vv-input-checkbox--switch > input[type=checkbox].checked,.vv-input-checkbox--switch .vv-input-checkbox__input:checked,.vv-input-checkbox--switch > input[type=checkbox]:checked):after{transform:var(--vv-input-checkbox-modifier-switch-element-input-state-checked-pseudo-after-transform)}

package/dist/components/vv-input-radio-group.css

@@ -1 +0,0 @@
-:where(:host,:root,.theme){--vv-input-radio-group-display: var(--input-display);--vv-input-radio-group-flex: var(--input-flex);--vv-input-radio-group-flex-direction: var(--input-flex-direction);--vv-input-radio-group-min-width: var(--input-min-width);--vv-input-radio-group-element-legend-display: var(--input-label-display);--vv-input-radio-group-element-legend-font-size: var(--input-label-font-size);--vv-input-radio-group-element-legend-color: var(--input-label-color);--vv-input-radio-group-element-legend-margin: 0 0 var(--input-label-gap) 0;--vv-input-radio-group-element-legend-white-space: var(--input-label-white-space);--vv-input-radio-group-element-legend-text-overflow: var(--input-label-text-overflow);--vv-input-radio-group-element-legend-overflow: var(--input-label-overflow);--vv-input-radio-group-element-legend-max-width: var(--input-label-max-width);--vv-input-radio-group-element-wrapper-position: relative;--vv-input-radio-group-element-wrapper-display: flex;--vv-input-radio-group-element-wrapper-flex-direction: column;--vv-input-radio-group-element-wrapper-flex-wrap: wrap;--vv-input-radio-group-element-hint-display: var(--input-hint-display);--vv-input-radio-group-element-hint-font-size: var(--input-hint-font-size);--vv-input-radio-group-element-hint-color: var(--input-hint-color);--vv-input-radio-group-element-hint-padding-top: var(--input-hint-gap);--vv-input-radio-group-element-hint-white-space: var(--input-hint-white-space);--vv-input-radio-group-element-hint-text-overflow: var(--input-hint-text-overflow);--vv-input-radio-group-element-hint-overflow: var(--input-hint-overflow);--vv-input-radio-group-element-hint-max-width: var(--input-hint-max-width);--vv-input-radio-group-element-hint-margin-top: calc(var(--input-gap) * -1);--vv-input-radio-group-element-hint-margin-bottom: var(--input-gap);--vv-input-radio-group-modifier-horizontal-element-wrapper-flex-direction: row;--vv-input-radio-group-modifier-valid-element-hint-color: var(--input-valid-color);--vv-input-radio-group-modifier-invalid-element-hint-color: var(--input-invalid-color)}:where(.vv-input-radio-group){display:var(--vv-input-radio-group-display);flex:var(--vv-input-radio-group-flex);flex-direction:var(--vv-input-radio-group-flex-direction);min-width:var(--vv-input-radio-group-min-width)}:where(.vv-input-radio-group__legend,.vv-input-radio-group > legend){display:var(--vv-input-radio-group-element-legend-display);font-size:var(--vv-input-radio-group-element-legend-font-size);color:var(--vv-input-radio-group-element-legend-color);margin:var(--vv-input-radio-group-element-legend-margin);white-space:var(--vv-input-radio-group-element-legend-white-space);text-overflow:var(--vv-input-radio-group-element-legend-text-overflow);overflow:var(--vv-input-radio-group-element-legend-overflow);max-width:var(--vv-input-radio-group-element-legend-max-width)}:where(.vv-input-radio-group__wrapper){position:var(--vv-input-radio-group-element-wrapper-position);display:var(--vv-input-radio-group-element-wrapper-display);flex-direction:var(--vv-input-radio-group-element-wrapper-flex-direction);flex-wrap:var(--vv-input-radio-group-element-wrapper-flex-wrap)}:where(.vv-input-radio-group__hint,.vv-input-radio-group > small){display:var(--vv-input-radio-group-element-hint-display);font-size:var(--vv-input-radio-group-element-hint-font-size);color:var(--vv-input-radio-group-element-hint-color);padding-top:var(--vv-input-radio-group-element-hint-padding-top);white-space:var(--vv-input-radio-group-element-hint-white-space);text-overflow:var(--vv-input-radio-group-element-hint-text-overflow);overflow:var(--vv-input-radio-group-element-hint-overflow);max-width:var(--vv-input-radio-group-element-hint-max-width);margin-top:var(--vv-input-radio-group-element-hint-margin-top);margin-bottom:var(--vv-input-radio-group-element-hint-margin-bottom)}:where(.vv-input-radio-group--horizontal .vv-input-radio-group__wrapper){flex-direction:var(--vv-input-radio-group-modifier-horizontal-element-wrapper-flex-direction)}:where(.vv-input-radio-group--valid .vv-input-radio-group__hint,.vv-input-radio-group--valid > small){color:var(--vv-input-radio-group-modifier-valid-element-hint-color)}:where(.vv-input-radio-group--invalid .vv-input-radio-group__hint,.vv-input-radio-group--invalid > small){color:var(--vv-input-radio-group-modifier-invalid-element-hint-color)}