@volverjs/style 0.1.2-beta.3 → 0.1.2-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.3",
+  "version": "0.1.2-beta.6",
   "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",
@@ -9,10 +9,6 @@
     "node": ">= 12.x"
   },
   "packageManager": "pnpm@7.8.0",
-  "scripts": {
-    "dev": "vite --port 3000 --open",
-    "build": "vite build --base=./ && node ./scripts/build.js"
-  },
   "files": [
     "src/*",
     "dist/*"
@@ -21,16 +17,18 @@
     ".": "./dist/style",
     "./components": "./dist/components",
     "./scss/components": "./src/components/index",
+    "./components/vv-accordion": "./dist/components/vv-accordion",
+    "./scss/components/vv-accordion": "./src/components/vv-accordion",
     "./components/vv-badge": "./dist/components/vv-badge",
     "./scss/components/vv-badge": "./src/components/vv-badge",
+    "./components/vv-breadcrumb": "./dist/components/vv-breadcrumb",
+    "./scss/components/vv-breadcrumb": "./src/components/vv-breadcrumb",
     "./components/vv-button-group": "./dist/components/vv-button-group",
     "./scss/components/vv-button-group": "./src/components/vv-button-group",
     "./components/vv-button": "./dist/components/vv-button",
     "./scss/components/vv-button": "./src/components/vv-button",
     "./components/vv-card": "./dist/components/vv-card",
     "./scss/components/vv-card": "./src/components/vv-card",
-    "./components/vv-collapse": "./dist/components/vv-collapse",
-    "./scss/components/vv-collapse": "./src/components/vv-collapse",
     "./components/vv-dialog": "./dist/components/vv-dialog",
     "./scss/components/vv-dialog": "./src/components/vv-dialog",
     "./components/vv-dropdown": "./dist/components/vv-dropdown",
@@ -45,6 +43,8 @@
     "./scss/components/vv-input-radio": "./src/components/vv-input-radio",
     "./components/vv-input-text": "./dist/components/vv-input-text",
     "./scss/components/vv-input-text": "./src/components/vv-input-text",
+    "./components/vv-nav": "./dist/components/vv-nav",
+    "./scss/components/vv-nav": "./src/components/vv-nav",
     "./components/vv-progress": "./dist/components/vv-progress",
     "./scss/components/vv-progress": "./src/components/vv-progress",
     "./components/vv-select": "./dist/components/vv-select",
@@ -147,10 +147,15 @@
     "sass": "^1.55.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard-scss": "^5.0.0",
-    "stylelint": "^14.13.0",
+    "stylelint": "^14.14.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^1.6.0",
-    "vite-plugin-stylelint": "^3.0.7",
+    "vite-plugin-stylelint": "^3.0.8",
     "vite": "^3.1.8"
+  },
+  "scripts": {
+    "dev": "vite --port 3000 --open",
+    "build": "node ./scripts/build.js",
+    "styleguide": "vite build --base=./"
   }
-}
+}

package/src/_config.scss

@@ -13,10 +13,11 @@ $components-prefix: vv !default;
 // components names
 $components-names: (
 	vv-badge: $components-prefix + -badge,
+	vv-breadcrumb: $components-prefix + -breadcrumb,
 	vv-button: $components-prefix + -button,
 	vv-button-group: $components-prefix + -button-group,
 	vv-progress: $components-prefix + -progress,
-	vv-collapse: $components-prefix + -collapse,
+	vv-accordion: $components-prefix + -accordion,
 	vv-dialog: $components-prefix + -dialog,
 	vv-dropdown: $components-prefix + -dropdown,
 	vv-input-checkbox: $components-prefix + -input-checkbox,
@@ -24,6 +25,7 @@ $components-names: (
 	vv-input-radio: $components-prefix + -input-radio,
 	vv-input-radio-group: $components-prefix + -input-radio-group,
 	vv-input-text: $components-prefix + -input-text,
+	vv-nav: $components-prefix + -nav,
 	vv-textarea: $components-prefix + -textarea,
 	vv-select: $components-prefix + -select,
 	vv-table: $components-prefix + -table,

package/src/components/index.scss

@@ -1,8 +1,9 @@
 @import 'vv-badge';
+@import 'vv-breadcrumb';
 @import 'vv-button';
 @import 'vv-button-group';
 @import 'vv-progress';
-@import 'vv-collapse';
+@import 'vv-accordion';
 @import 'vv-dialog';
 @import 'vv-dropdown';
 @import 'vv-input-checkbox';
@@ -10,6 +11,7 @@
 @import 'vv-input-radio';
 @import 'vv-input-radio-group';
 @import 'vv-input-text';
+@import 'vv-nav';
 @import 'vv-textarea';
 @import 'vv-select';
 @import 'vv-table';

package/src/components/vv-accordion.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@import '../context';
+
+$component-name: map.get($components-names, vv-accordion);
+$component-map: $vv-accordion;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-compoenents
+);

package/src/components/vv-breadcrumb.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@import '../context';
+
+$component-name: map.get($components-names, vv-breadcrumb);
+$component-map: $vv-breadcrumb;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-compoenents
+);

package/src/components/{vv-collapse.scss → vv-nav.scss}

@@ -1,8 +1,8 @@
 @use 'sass:map';
 @import '../context';
 
-$component-name: map.get($components-names, vv-collapse);
-$component-map: $vv-collapse;
+$component-name: map.get($components-names, vv-nav);
+$component-map: $vv-nav;
 
 @include spread-map-into-bem(
 	$map: $component-map,

package/src/reset.scss

@@ -31,7 +31,7 @@
 
 /* removes spacing between cells in tables */
 :where(table) {
-	border-collapse: collapse;
+	border-accordion: accordion;
 }
 
 /* Safari - solving issue when using user-select:none on the <body> text input doesn't working */

package/src/settings/_index.scss

@@ -16,10 +16,11 @@
 
 // components
 @import 'components/vv-badge';
+@import 'components/vv-breadcrumb';
 @import 'components/vv-button';
 @import 'components/vv-button-group';
 @import 'components/vv-progress';
-@import 'components/vv-collapse';
+@import 'components/vv-accordion';
 @import 'components/vv-dialog';
 @import 'components/vv-dropdown';
 @import 'components/vv-input-checkbox';
@@ -27,6 +28,7 @@
 @import 'components/vv-input-radio';
 @import 'components/vv-input-radio-group';
 @import 'components/vv-input-text';
+@import 'components/vv-nav';
 @import 'components/vv-textarea';
 @import 'components/vv-select';
 @import 'components/vv-table';

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

@@ -0,0 +1,128 @@
+$vv-accordion: (
+	--accordion-marker-size:
+		calc(var(--spacing-sm) + var(--leading-normal) * 1em),
+	--accordion-padding-top: 0px,
+	--accordion-padding-right: 0px,
+	--accordion-padding-bottom: 0px,
+	--accordion-padding-left: 0px,
+	element: (
+		summary: (
+			_alias: '> summary',
+			position: relative,
+			cursor: pointer,
+			[padding-top]: var(--accordion-padding-top),
+			[padding-right]: var(--accordion-padding-right),
+			[padding-bottom]: var(--accordion-padding-bottom),
+			[padding-left]:
+				calc(
+					var(--accordion-padding-left) + var(--accordion-marker-size)
+				),
+			line-height: var(--leading-normal),
+			color: var(--color-word-2),
+			will-change: background-color,
+			transition: background-color 0.2s ease-in-out,
+			font-size: var(--text-sm),
+			pseudo: (
+				before: (
+					display: block,
+					position: absolute,
+					[top]: var(--accordion-padding-top),
+					[left]: var(--accordion-padding-left),
+					width: calc(var(--leading-normal) * 1em),
+					height: calc(var(--leading-normal) * 1em),
+					background-image: var(--bg-chevron),
+					background-position: center,
+					background-size: 1em,
+					background-repeat: no-repeat,
+					will-change: transform,
+					transition: transform 0.2s ease-in-out,
+					transform: rotate(-90deg),
+				),
+				marker: (
+					display: none,
+				),
+				-webkit-details-marker: (
+						display: none,
+					),
+			),
+		),
+		content: (
+			_alias: '> summary + *',
+			padding-block: var(--spacing-sm),
+			[padding-inline]: var(--accordion-padding-left)
+				var(--accordion-padding-right),
+		),
+	),
+	state: (
+		open: (
+			element: (
+				summary: (
+					pseudo: (
+						before: (
+							transform: rotate(0),
+						),
+					),
+				),
+			),
+		),
+	),
+	modifier: (
+		marker-right: (
+			element: (
+				summary: (
+					[padding-right]:
+						calc(
+							var(--accordion-padding-right) +
+								var(--accordion-marker-size)
+						),
+					[padding-left]: var(--accordion-padding-left),
+					pseudo: (
+						before: (
+							left: auto,
+							[right]: var(--accordion-padding-right),
+							transform: rotate(0def),
+						),
+					),
+				),
+			),
+			state: (
+				open: (
+					element: (
+						summary: (
+							pseudo: (
+								before: (
+									transform: rotate(-180deg),
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+		bordered: (
+			--accordion-padding-top: var(--spacing-sm),
+			--accordion-padding-right: var(--spacing-sm),
+			--accordion-padding-bottom: var(--spacing-sm),
+			--accordion-padding-left: var(--spacing-sm),
+			border-bottom: var(--border) solid var(--color-surface-2),
+			element: (
+				summary: (
+					state: (
+						hover: (
+							background-color: var(--color-surface-1),
+						),
+					),
+				),
+			),
+			state: (
+				open: (
+					element: (
+						summary: (
+							background-color: var(--color-surface-2),
+						),
+					),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -8,9 +8,8 @@ $vv-badge: (
 	padding: 0.37em 0.475em,
 	display: inline-flex,
 	justify-content: center,
-	font-weight: normal,
 	font-family: var(--font-sans),
-	text-shadow: none,
+	line-height: var(--leading-normal),
 	state: (
 		empty: (
 			font-size: inherit,

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

@@ -0,0 +1,85 @@
+$vv-breadcrumb: (
+	element: (
+		list: (
+			_alias: '> ol',
+			position: relative,
+			display: flex,
+			flex-wrap: no-wrap,
+			list-style: none,
+			overflow: auto,
+			padding: 0,
+			background: var(--color-surface),
+			pseudo: (
+				after: (
+					position: absolute,
+					top: 0,
+					bottom: 0,
+					right: 0,
+					display: block,
+					width: var(--spacing-sm),
+					background:
+						linear-gradient(
+							45deg,
+							transparent,
+							var(--color-surface)
+						),
+				),
+			),
+		),
+		item: (
+			_alias: '> ol > li:has(a)',
+			display: inline-flex,
+			color: var(--color-word-2),
+			pseudo: (
+				after: (
+					display: block,
+					margin-inline: 1ch,
+					width: calc(var(--leading-normal) * 1em),
+					height: calc(var(--leading-normal) * 1em),
+					background-image: var(--bg-chevron),
+					background-position: center,
+					background-size: 1em,
+					background-repeat: no-repeat,
+					transform: rotate(-90deg),
+				),
+			),
+		),
+		item-active: (
+			_alias: '> ol > li:not(:has(a))',
+			display: inline-flex,
+			font-weight: var(--font-bold),
+			padding-right: var(--spacing-16),
+		),
+		link: (
+			_alias: '> ol > li > a',
+			state: (
+				hover: (
+					text-decoration: underline,
+				),
+				focus-within: (
+					text-decoration: underline,
+				),
+				active: (
+					color: var(--color-brand-darken-2),
+				),
+			),
+		),
+	),
+	modifier: (
+		multiline: (
+			element: (
+				list: (
+					flex-wrap: wrap,
+				),
+				item: (
+					font-size: var(--text-12),
+				),
+				item-active: (
+					width: 100%,
+					font-size: var(--text-18),
+					line-height: var(--leading-relaxed),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -2,7 +2,7 @@ $vv-button: (
 	position: relative,
 	background: var(--color-brand),
 	border-radius: 0.5ch,
-	border-width: var(--spacing-2),
+	border-width: var(--border-2),
 	border-style: solid,
 	border-color: var(--color-brand),
 	color: var(--color-white),
@@ -74,7 +74,6 @@ $vv-button: (
 		),
 		secondary: (
 			background: var(--color-white),
-			border-width: var(--spacing-2),
 			border-style: solid,
 			border-color: var(--color-gray-lighten-4),
 			color: var(--color-word),
@@ -130,7 +129,7 @@ $vv-button: (
 		text: (
 			background: transparent,
 			border-color: var(--color-word),
-			border-width: 0,
+			border-width: var(--border-0),
 			border-radius: 0,
 			padding: 0,
 			color: var(--color-word),
@@ -141,7 +140,8 @@ $vv-button: (
 					outline: none,
 				),
 				hover: (
-					border-width: 0 0 1px 0,
+					text-decoration: underline,
+					text-underline-offset: var(--spacing-4),
 				),
 			),
 		),
@@ -183,6 +183,79 @@ $vv-button: (
 				),
 			),
 		),
+		action: (
+			font-size: 0.875em,
+			background: var(--color-surface-1),
+			color: var(--color-word-1),
+			border-color: var(--color-word-5),
+			border-width: var(--border),
+			font-weight: var(--font-normal),
+			padding-inline: 0.75ch,
+			padding-block: 0.5ch,
+			line-height: var(--leading-none),
+			text-shadow: none,
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+				),
+				hover: (
+					background: var(--color-surface-2),
+				),
+				active: (
+					background: var(--color-surface-5),
+				),
+				selected: (
+					color: var(--color-white),
+					background: var(--color-gray),
+					border-color: var(--color-gray),
+				),
+			),
+			element: (
+				icon: (
+					margin-inline: -0.125ch,
+					block-size: 1.4em,
+					inline-size: 1.4em,
+				),
+			),
+		),
+		action-quiet: (
+			font-size: var(--text-14),
+			background: transparent,
+			color: var(--color-word-1),
+			border-width: var(--border),
+			border-color: transparent,
+			font-weight: var(--font-normal),
+			padding-inline: 0.75ch,
+			padding-block: 0.5ch,
+			line-height: var(--leading-none),
+			text-shadow: none,
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+					outline-offset: 0,
+				),
+				hover: (
+					background: var(--color-surface-2),
+					border-color: var(--color-surface-2),
+				),
+				active: (
+					background: var(--color-surface-5),
+					border-color: var(--color-surface-5),
+				),
+				selected: (
+					color: var(--color-white),
+					background: var(--color-gray),
+					border-color: var(--color-gray),
+				),
+			),
+			element: (
+				icon: (
+					margin-inline: -0.125ch,
+					block-size: 1.4em,
+					inline-size: 1.4em,
+				),
+			),
+		),
 		rounded: (
 			border-radius: var(--rounded-full),
 			element: (

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

@@ -0,0 +1 @@
+$vv-nav: () !default;

package/src/tools/_mixins.scss

@@ -396,7 +396,8 @@
 					open,
 					close,
 					determinate,
-					indeterminate
+					indeterminate,
+					selected
 				),
 				$state
 			)
@@ -503,7 +504,7 @@
 								'#{$modifier}#{$alias}:#{$state}'
 							);
 						}
-					} @else {
+					} @else if $state != 'selected' {
 						$selectors: list.join(
 							$selectors,
 							'#{$modifier}#{$block-item}:not([disabled]):#{$state}'
@@ -664,12 +665,14 @@
 										progress-bar,
 										progress-value,
 										inner-element,
+										marker,
 										-webkit-progress-bar,
 										-webkit-progress-value,
 										-webkit-inner-element,
 										-moz-progress-bar,
 										-moz-progress-value,
-										-moz-inner-element
+										-moz-inner-element,
+										-webkit-details-marker
 									),
 									$pseudo-element
 								)
@@ -684,11 +687,12 @@
 										$pseudo-element
 									) {
 										@if not $original {
-											@if not
+											@if not(
 												map.has-key(
 													$pseudo-map,
 													'content'
 												)
+											)
 											{
 												content: '';
 											}
@@ -763,7 +767,7 @@
 							);
 						}
 
-						#{$key}: #{$value};
+						#{$key}: $value;
 					}
 				}
 			}
@@ -785,6 +789,7 @@
 	} @else if $enabled {
 		$selector: ':where(#{$selector})';
 	}
+
 	#{$selector} {
 		@content;
 	}

package/dist/components/vv-collapse.css

@@ -1 +0,0 @@
-:where(:host,:root,.theme){--vv-collapse-display: block;--vv-collapse-min-width: 2.093em;--vv-collapse-padding: 0;--vv-collapse-border-radius: 0;--vv-collapse-border-bottom: var(--border) solid var(--color-surface-2);--vv-collapse-margin: 0;--vv-collapse-background: none;--vv-collapse-font-family: var(--font-sans);--vv-collapse-font-size: .6em;--vv-collapse-font-weight: normal;--vv-collapse-state-open-display: contents;--vv-collapse-state-open-padding: 0;--vv-collapse-state-open-margin: 0;--vv-collapse-state-open-element-header-list-style-type: none;--vv-collapse-state-open-element-header-color: var(--color-brand);--vv-collapse-state-open-element-header-pseudo-after-transform: rotate(0deg);--vv-collapse-state-open-element-header-pseudo-after-will-change: transform;--vv-collapse-state-open-element-header-pseudo-after-transition: transform .2s ease-in-out;--vv-collapse-state-open-element-content-height: auto;--vv-collapse-state-open-element-content-opacity: 1;--vv-collapse-state-blocked-cursor: not-allowed;--vv-collapse-state-blocked-opacity: .5;--vv-collapse-state-blocked-pointer-events: none;--vv-collapse-state-blocked-user-select: none;--vv-collapse-element-header-cursor: pointer;--vv-collapse-element-header-list-style-type: none;--vv-collapse-element-header-padding: 1em;--vv-collapse-element-header-margin: var(--spacing-0);--vv-collapse-element-header-background: none;--vv-collapse-element-header-color: var(--color-word-3);--vv-collapse-element-header-font-size: var(--text-sm);--vv-collapse-element-header-line-height: 1em;--vv-collapse-element-header-box-shadow: none;--vv-collapse-element-header-pseudo-after-display: block;--vv-collapse-element-header-pseudo-after-float: right;--vv-collapse-element-header-pseudo-after-width: 1em;--vv-collapse-element-header-pseudo-after-height: 1em;--vv-collapse-element-header-pseudo-after-background-image: var(--bg-chevron);--vv-collapse-element-header-pseudo-after-background-position: right center;--vv-collapse-element-header-pseudo-after-background-size: 1em auto;--vv-collapse-element-header-pseudo-after-background-repeat: no-repeat;--vv-collapse-element-header-pseudo-after-transform: rotate(-90deg);--vv-collapse-element-header-pseudo-after-will-change: transform;--vv-collapse-element-header-pseudo-after-transition: transform .2s ease-in-out;--vv-collapse-element-content-display: block;--vv-collapse-element-content-height: 0;--vv-collapse-element-content-padding: var(--spacing-0) 1em 1em 1em;--vv-collapse-element-content-margin: var(--spacing-0);--vv-collapse-element-content-background: none;--vv-collapse-element-content-color: var(--color-word-4);--vv-collapse-element-content-font-size: var(--text-xs);--vv-collapse-element-content-box-shadow: none;--vv-collapse-element-content-opacity: 0;--vv-collapse-element-content-transition: all .7s ease-in-out;--vv-collapse-modifier-minimal-display: contents;--vv-collapse-modifier-minimal-padding: 0;--vv-collapse-modifier-minimal-margin: 0;--vv-collapse-modifier-minimal-state-open-element-header-list-style-type: disclosure-open;--vv-collapse-modifier-minimal-state-open-element-header-color: var(--color-brand);--vv-collapse-modifier-minimal-element-header-display: list-item;--vv-collapse-modifier-minimal-element-header-counter-increment: list-item 0;--vv-collapse-modifier-minimal-element-header-list-style-type: disclosure-closed;--vv-collapse-modifier-minimal-element-header-pseudo-after-display: none}:where(.vv-collapse){display:var(--vv-collapse-display);min-width:var(--vv-collapse-min-width);padding:var(--vv-collapse-padding);border-radius:var(--vv-collapse-border-radius);border-bottom:var(--vv-collapse-border-bottom);margin:var(--vv-collapse-margin);background:var(--vv-collapse-background);font-family:var(--vv-collapse-font-family);font-size:var(--vv-collapse-font-size);font-weight:var(--vv-collapse-font-weight)}:where(.vv-collapse__header){cursor:var(--vv-collapse-element-header-cursor);list-style-type:var(--vv-collapse-element-header-list-style-type);padding:var(--vv-collapse-element-header-padding);margin:var(--vv-collapse-element-header-margin);background:var(--vv-collapse-element-header-background);color:var(--vv-collapse-element-header-color);font-size:var(--vv-collapse-element-header-font-size);line-height:var(--vv-collapse-element-header-line-height);box-shadow:var(--vv-collapse-element-header-box-shadow)}:where(.vv-collapse__header):after{content:"";display:var(--vv-collapse-element-header-pseudo-after-display);float:var(--vv-collapse-element-header-pseudo-after-float);width:var(--vv-collapse-element-header-pseudo-after-width);height:var(--vv-collapse-element-header-pseudo-after-height);background-image:var(--vv-collapse-element-header-pseudo-after-background-image);background-position:var(--vv-collapse-element-header-pseudo-after-background-position);background-size:var(--vv-collapse-element-header-pseudo-after-background-size);background-repeat:var(--vv-collapse-element-header-pseudo-after-background-repeat);transform:var(--vv-collapse-element-header-pseudo-after-transform);will-change:var(--vv-collapse-element-header-pseudo-after-will-change);transition:var(--vv-collapse-element-header-pseudo-after-transition)}:where(.vv-collapse__content){display:var(--vv-collapse-element-content-display);height:var(--vv-collapse-element-content-height);padding:var(--vv-collapse-element-content-padding);margin:var(--vv-collapse-element-content-margin);background:var(--vv-collapse-element-content-background);color:var(--vv-collapse-element-content-color);font-size:var(--vv-collapse-element-content-font-size);box-shadow:var(--vv-collapse-element-content-box-shadow);opacity:var(--vv-collapse-element-content-opacity);transition:var(--vv-collapse-element-content-transition)}:where(.vv-collapse--open,.vv-collapse.open,.vv-collapse[open]){--vv-collapse-display: var(--vv-collapse-state-open-display);--vv-collapse-padding: var(--vv-collapse-state-open-padding);--vv-collapse-margin: var(--vv-collapse-state-open-margin)}:where(.vv-collapse--open .vv-collapse__header,.vv-collapse.open .vv-collapse__header,.vv-collapse[open] .vv-collapse__header){list-style-type:var(--vv-collapse-state-open-element-header-list-style-type);color:var(--vv-collapse-state-open-element-header-color)}:where(.vv-collapse--open .vv-collapse__header,.vv-collapse.open .vv-collapse__header,.vv-collapse[open] .vv-collapse__header):after{content:"";transform:var(--vv-collapse-state-open-element-header-pseudo-after-transform);will-change:var(--vv-collapse-state-open-element-header-pseudo-after-will-change);transition:var(--vv-collapse-state-open-element-header-pseudo-after-transition)}:where(.vv-collapse--open .vv-collapse__content,.vv-collapse.open .vv-collapse__content,.vv-collapse[open] .vv-collapse__content){height:var(--vv-collapse-state-open-element-content-height);opacity:var(--vv-collapse-state-open-element-content-opacity)}:where(.vv-collapse--minimal.vv-collapse){--vv-collapse-display: var(--vv-collapse-modifier-minimal-display);--vv-collapse-padding: var(--vv-collapse-modifier-minimal-padding);--vv-collapse-margin: var(--vv-collapse-modifier-minimal-margin)}:where(.vv-collapse--minimal .vv-collapse__header){display:var(--vv-collapse-modifier-minimal-element-header-display);counter-increment:var(--vv-collapse-modifier-minimal-element-header-counter-increment);list-style-type:var(--vv-collapse-modifier-minimal-element-header-list-style-type)}:where(.vv-collapse--minimal .vv-collapse__header):after{content:"";display:var(--vv-collapse-modifier-minimal-element-header-pseudo-after-display)}:where(.vv-collapse--minimal.vv-collapse--open .vv-collapse__header,.vv-collapse--minimal.vv-collapse.open .vv-collapse__header,.vv-collapse--minimal.vv-collapse[open] .vv-collapse__header){list-style-type:var(--vv-collapse-modifier-minimal-state-open-element-header-list-style-type);color:var(--vv-collapse-modifier-minimal-state-open-element-header-color)}