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

package/src/utilities/flexbox.scss

@@ -1,22 +1,32 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 // flex direction
 @include spread-map-into-utilities(
 	$map: $flex-direction,
 	$class: flex,
-	$attribute: flex-direction
+	$attribute: flex-direction,
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // flex wrap
 @include spread-map-into-utilities(
 	$map: $flex-wrap,
 	$class: flex,
-	$attribute: flex-wrap
+	$attribute: flex-wrap,
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // flex
-@include spread-map-into-utilities($map: $flex, $class: flex, $attribute: flex);
+@include spread-map-into-utilities(
+	$map: $flex,
+	$class: flex,
+	$attribute: flex,
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
+);
 
 // flex grow
 @each $prefix, $prop in (grow: flex-grow, shrink: flex-shrink) {
@@ -37,7 +47,9 @@
 @include spread-map-into-utilities(
 	$map: $order,
 	$class: order,
-	$attribute: order
+	$attribute: order,
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // gap
@@ -90,7 +102,9 @@
 	@include spread-map-into-utilities(
 		$map: $justify-align-content,
 		$class: $class,
-		$attribute: $attribute
+		$attribute: $attribute,
+		$bps: $breakpoints,
+		$zero-specificity: $zero-specificity-for-utilities
 	);
 }
 
@@ -99,7 +113,9 @@
 	@include spread-map-into-utilities(
 		$map: $justify-align-items,
 		$class: $class,
-		$attribute: $attribute
+		$attribute: $attribute,
+		$bps: $breakpoints,
+		$zero-specificity: $zero-specificity-for-utilities
 	);
 }
 
@@ -108,6 +124,8 @@
 	@include spread-map-into-utilities(
 		$map: $justify-align-self,
 		$class: $class,
-		$attribute: $attribute
+		$attribute: $attribute,
+		$bps: $breakpoints,
+		$zero-specificity: $zero-specificity-for-utilities
 	);
 }

package/src/utilities/grid.scss

@@ -1,18 +1,22 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 // grid template columns
 @include spread-map-into-utilities(
 	$map: $grid-template-columns,
 	$class: grid-cols,
-	$attribute: grid-template-columns
+	$attribute: grid-template-columns,
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // grid column
 @include spread-map-into-utilities(
 	$map: $grid-column,
 	$class: col,
-	$attribute: grid-column
+	$attribute: grid-column,
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // grid column start/end
@@ -22,7 +26,9 @@
 	@include spread-map-into-utilities(
 		$map: $grid-column-start-end,
 		$class: $class,
-		$attribute: $attribute
+		$attribute: $attribute,
+		$bps: $breakpoints,
+		$zero-specificity: $zero-specificity-for-utilities
 	);
 }
 
@@ -30,14 +36,18 @@
 @include spread-map-into-utilities(
 	$map: $grid-template-rows,
 	$class: grid-rows,
-	$attribute: grid-template-rows
+	$attribute: grid-template-rows,
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // grid row
 @include spread-map-into-utilities(
 	$map: $grid-row,
 	$class: row,
-	$attribute: grid-row
+	$attribute: grid-row,
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // grid row start/end
@@ -45,7 +55,9 @@
 	@include spread-map-into-utilities(
 		$map: $grid-row-start-end,
 		$class: $class,
-		$attribute: $attribute
+		$attribute: $attribute,
+		$bps: $breakpoints,
+		$zero-specificity: $zero-specificity-for-utilities
 	);
 }
 
@@ -53,7 +65,9 @@
 @include spread-map-into-utilities(
 	$map: $grid-auto-flow,
 	$class: grid-flow,
-	$attribute: grid-auto-flow
+	$attribute: grid-auto-flow,
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // grid auto rows/columns
@@ -63,6 +77,8 @@
 	@include spread-map-into-utilities(
 		$map: $grid-auto-rows-columns,
 		$class: $class,
-		$attribute: $attribute
+		$attribute: $attribute,
+		$bps: $breakpoints,
+		$zero-specificity: $zero-specificity-for-utilities
 	);
 }

package/src/utilities/index.scss

@@ -1,12 +1,13 @@
-@import 'animation';
-@import 'backgrounds';
-@import 'borders';
-@import 'colors';
-@import 'effects';
-@import 'filters';
-@import 'flexbox';
-@import 'grid';
-@import 'layout';
-@import 'sizing';
-@import 'spacing';
-@import 'typography';
+@forward 'backgrounds';
+@forward 'borders';
+@forward 'colors';
+@forward 'effects';
+@forward 'filters';
+@forward 'flexbox';
+@forward 'grid';
+@forward 'interactivity';
+@forward 'layout';
+@forward 'sizing';
+@forward 'spacing';
+@forward 'transitions';
+@forward 'typography';

package/src/utilities/interactivity.scss

@@ -0,0 +1,10 @@
+@use 'sass:map';
+@use '../context' as *;
+
+// grid template columns
+@include spread-map-into-utilities(
+	$map: $cursor,
+	$class: cursor,
+	$attribute: cursor,
+	$zero-specificity: $zero-specificity-for-utilities
+);

package/src/utilities/layout.scss

@@ -1,12 +1,14 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 // aspect
 @include spread-map-into-utilities(
 	$map: $aspect-ratio,
 	$class: aspect,
 	$attribute: aspect-ratio,
-	$prop: aspect
+	$prop: aspect,
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // container
@@ -15,7 +17,7 @@
 
 	@each $breakpoint, $value in $breakpoints {
 		@if $value > 0 {
-			@include media-breakpoint-up($breakpoint) {
+			@include media-breakpoint-up($breakpoint, $breakpoints) {
 				max-width: $value;
 			}
 		}
@@ -33,79 +35,87 @@
 	$map: $columns,
 	$class: columns,
 	$attribute: column-count,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // break-after
 @include spread-map-into-utilities(
 	$map: $break-after,
 	$class: break-after,
-	$attribute: break-after
+	$attribute: break-after,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // break-before
 @include spread-map-into-utilities(
 	$map: $break-before,
 	$class: break-before,
-	$attribute: break-before
+	$attribute: break-before,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // break-inside
 @include spread-map-into-utilities(
 	$map: $break-inside,
 	$class: break-inside,
-	$attribute: break-inside
+	$attribute: break-inside,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // display
 @include spread-map-into-utilities(
 	$map: $display-without-breakpoints,
-	$attribute: display
+	$attribute: display,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @include spread-map-into-utilities(
 	$map: $display-with-breakpoints,
 	$attribute: display,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // object-fit
 @include spread-map-into-utilities(
 	$map: $object-fit,
 	$class: object,
-	$attribute: object-fit
+	$attribute: object-fit,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // object-position
 @include spread-map-into-utilities(
 	$map: $object-position,
 	$class: object,
-	$attribute: object-position
+	$attribute: object-position,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // overflow
-@each $overflow in (auto, hidden, clip, visible, scroll) {
-	%overflow-#{$overflow} {
-		overflow: #{$overflow};
+@each $key, $value in $overflow {
+	%overflow-#{$key} {
+		overflow: #{$value};
 	}
 
 	@include wrap-with-where(
-		$selector: '.overflow-#{$overflow}',
+		$selector: '.overflow-#{$key}',
 		$enabled: $zero-specificity-for-utilities
 	) {
-		@extend %overflow-#{$overflow};
+		@extend %overflow-#{$key};
 	}
 
 	@each $prefix in (x, y) {
-		%overflow-#{$prefix}-#{$overflow} {
-			overflow-#{$prefix}: #{$overflow};
+		%overflow-#{$prefix}-#{$key} {
+			overflow-#{$prefix}: #{$value};
 		}
 
 		@include wrap-with-where(
-			$selector: '.overflow-#{$prefix}-#{$overflow}',
+			$selector: '.overflow-#{$prefix}-#{$key}',
 			$enabled: $zero-specificity-for-utilities
 		) {
-			@extend %overflow-#{$prefix}-#{$overflow};
+			@extend %overflow-#{$prefix}-#{$key};
 		}
 	}
 }
@@ -114,14 +124,16 @@
 @include spread-map-into-utilities(
 	$map: $position,
 	$attribute: position,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // visibility
 @include spread-map-into-utilities(
 	$map: $visibility,
 	$attribute: visibility,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // top / right / bottom / left
@@ -184,5 +196,6 @@
 	$map: $z-index,
 	$class: z,
 	$attribute: z-index,
-	$prop: z
+	$prop: z,
+	$zero-specificity: $zero-specificity-for-utilities
 );

package/src/utilities/sizing.scss

@@ -1,27 +1,18 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 // width / height / max-width / max-height
-@each $dimension,
-	$attr in(w: width, h: height, max-w: max-width, max-h: max-height)
+@each $class,
+	$attribute in(w: width, h: height, max-w: max-width, max-h: max-height)
 {
-	@each $size, $value in map.merge($spacing, $spacing-dynamic) {
-		// check if value is not a map (spacing-dynamic)
-		$var: var(--spacing-#{$size});
-		@if type-of($value) != 'map' {
-			$var: var(--spacing-#{$size}, #{$value});
-		}
-
-		%#{$dimension}-#{$size} {
-			#{$attr}: #{$var};
-		}
-		@include wrap-with-where(
-			$selector: '.#{$dimension}-#{$size}',
-			$enabled: $zero-specificity-for-utilities
-		) {
-			@extend %#{$dimension}-#{$size};
-		}
-	}
+	@include spread-map-into-utilities(
+		$map: map.merge($spacing, $spacing-dynamic),
+		$class: $class,
+		$attribute: $attribute,
+		$bps: $breakpoints,
+		$prop: spacing,
+		$zero-specificity: $zero-specificity-for-utilities
+	);
 }
 
 @include spread-map-into-utilities(
@@ -29,7 +20,8 @@
 	$class: w,
 	$attribute: width,
 	$bps: $breakpoints,
-	$prop: w
+	$prop: w,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @include spread-map-into-utilities(
@@ -37,19 +29,22 @@
 	$class: h,
 	$attribute: height,
 	$bps: $breakpoints,
-	$prop: h
+	$prop: h,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @include spread-map-into-utilities(
 	$map: $max-width,
 	$class: max-w,
-	$attribute: max-width
+	$attribute: max-width,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @include spread-map-into-utilities(
 	$map: $max-height,
 	$class: max-h,
-	$attribute: max-height
+	$attribute: max-height,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @each $breakpoint, $breakpoint-value in $breakpoints {
@@ -70,11 +65,13 @@
 @include spread-map-into-utilities(
 	$map: $min-width,
 	$class: min-w,
-	$attribute: min-width
+	$attribute: min-width,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @include spread-map-into-utilities(
 	$map: $min-height,
 	$class: min-h,
-	$attribute: min-height
+	$attribute: min-height,
+	$zero-specificity: $zero-specificity-for-utilities
 );

package/src/utilities/spacing.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 @each $prefix, $prop in (m: margin, p: padding, n: margin) {
 	@each $size, $value in map.merge($spacing, $spacing-dynamic) {

package/src/utilities/transitions.scss

@@ -0,0 +1,47 @@
+@use 'sass:map';
+@use 'sass:string';
+@use '../context' as *;
+
+// transition property
+@include spread-map-into-utilities(
+	$map: $transition-property,
+	$class: transition-property,
+	$attribute: transition-property,
+	$zero-specificity: $zero-specificity-for-utilities
+);
+
+// transition duration and transition delay
+@each $class,
+	$attribute in (duration: transition-duration, delay: transition-delay)
+{
+	@include spread-map-into-utilities(
+		$map: $transition-duration-delay,
+		$class: $class,
+		$attribute: $attribute,
+		$zero-specificity: $zero-specificity-for-utilities
+	);
+}
+
+// transition timing function
+@include spread-map-into-utilities(
+	$map: $transition-timing-function,
+	$class: ease,
+	$attribute: transition-timing-function,
+	$zero-specificity: $zero-specificity-for-utilities
+);
+
+@each $property, $value in $transition-property {
+	@include wrap-with-where(
+		$selector: '.transition-#{$property}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		transition-property: string.unquote($value);
+		@if $property != 'none' {
+			transition-duration: map.get($transition-duration-delay, 300);
+			transition-timing-function: map.get(
+				$transition-timing-function,
+				'in-out'
+			);
+		}
+	}
+}

package/src/utilities/typography.scss

@@ -1,12 +1,13 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 // font-family
 @include spread-map-into-utilities(
 	$map: $font-family,
 	$class: font,
 	$attribute: font-family,
-	$prop: font
+	$prop: font,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // font-weight
@@ -14,7 +15,8 @@
 	$map: $font-weight,
 	$class: font,
 	$attribute: font-weight,
-	$prop: font
+	$prop: font,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // font-size
@@ -22,8 +24,10 @@
 	$map: map.merge($font-size, $font-size-dynamic),
 	$class: text,
 	$attribute: font-size,
+	$bps: $breakpoints,
 	$prop: text,
-	$deep: false
+	$deep: false,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // font-style
@@ -75,7 +79,8 @@
 	$map: $line-height,
 	$class: leading,
 	$attribute: line-height,
-	$prop: leading
+	$prop: leading,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // letter-spacing
@@ -83,67 +88,77 @@
 	$map: $letter-spacing,
 	$class: tracking,
 	$attribute: letter-spacing,
-	$prop: tracking
+	$prop: tracking,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // font-variant-numeric
 @include spread-map-into-utilities(
 	$map: $font-variant-numeric,
-	$attribute: font-variant-numeric
+	$attribute: font-variant-numeric,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // list-style-type
 @include spread-map-into-utilities(
 	$map: $list-style-type,
 	$class: list,
-	$attribute: list-style-type
+	$attribute: list-style-type,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // list-style-position
 @include spread-map-into-utilities(
 	$map: $list-style-position,
 	$class: list,
-	$attribute: list-style-position
+	$attribute: list-style-position,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // text-align
 @include spread-map-into-utilities(
 	$map: $text-align,
 	$class: text,
-	$attribute: text-align
+	$attribute: text-align,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // text-decorator-line
 @include spread-map-into-utilities(
 	$map: $text-decorator-line,
-	$attribute: text-decoration-line
+	$attribute: text-decoration-line,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // text-decorator-style
 @include spread-map-into-utilities(
 	$map: $text-decorator-style,
 	$class: decoration,
-	$attribute: text-decoration-style
+	$attribute: text-decoration-style,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // text-decorator-thickness
 @include spread-map-into-utilities(
 	$map: $text-decorator-thickness,
 	$class: decoration,
-	$attribute: text-decoration-thickness
+	$attribute: text-decoration-thickness,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // text-underline-offset
 @include spread-map-into-utilities(
 	$map: $text-underline-offset,
 	$class: underline-offset,
-	$attribute: text-underline-offset
+	$attribute: text-underline-offset,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // text-transform
 @include spread-map-into-utilities(
 	$map: $text-transform,
-	$attribute: text-transform
+	$attribute: text-transform,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // text-overflow
@@ -215,12 +230,14 @@
 @include spread-map-into-utilities(
 	$map: $vertical-align,
 	$class: align,
-	$attribute: vertical-align
+	$attribute: vertical-align,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // white-space
 @include spread-map-into-utilities(
 	$map: $white-space,
 	$class: whitespace,
-	$attribute: white-space
+	$attribute: white-space,
+	$zero-specificity: $zero-specificity-for-utilities
 );

package/src/volver.scss

@@ -0,0 +1,14 @@
+// reset
+@use 'reset';
+
+// props
+@use 'props';
+
+// components
+@use 'components';
+
+// utilities
+@use 'utilities';
+
+// preflight
+@import 'preflight';

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