@lucca-front/scss 21.1.2 → 21.2.0-rc.1

package/src/components/dialog/mods.scss

@@ -1,6 +1,8 @@
 @use '@lucca-front/scss/src/components/button/exports' as button;
-@use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/components/title/exports' as title;
+@use '@lucca-front/scss/src/components/header/exports' as header;
+@use '@lucca-front/scss/src/components/footer/exports' as footer;
+@use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/commons/utils/keyframe';
 
 @mixin XS {
@@ -32,9 +34,9 @@
 	--components-dialog-maxHeight: none;
 	--components-dialog-maxHeightFallback: var(--components-dialog-maxHeight);
 	--components-dialog-height: calc(100% - var(--pr-t-spacings-100) * 2);
-	--components-dialog-maxWidth: calc(100vw - var(--pr-t-spacings-200));
+	--components-dialog-maxWidth: calc(100vw - var(--pr-t-spacings-200) - var(--commons-pushPanel-width));
 	--components-dialog-borderRadius: var(--pr-t-border-radius-structure);
-	--components-dialog-inset: var(--pr-t-spacings-100) var(--pr-t-spacings-100) var(--pr-t-spacings-100) auto;
+	--components-dialog-inset: var(--pr-t-spacings-100) calc(var(--pr-t-spacings-100) + var(--commons-pushPanel-width)) var(--pr-t-spacings-100) auto;
 	--components-dialog-translateX: var(--components-dialog-translate);
 	--components-dialog-translateY: 0;
 	--components-dialog-translate-spacing: calc(var(--pr-t-spacings-500) * 2);
@@ -47,9 +49,9 @@
 	--components-dialog-maxHeight: calc(100dvh - var(--pr-t-spacings-200));
 	--components-dialog-maxHeightFallback: calc(100vh - var(--pr-t-spacings-200));
 	--components-dialog-maxWidth: none;
-	--components-dialog-inset: auto var(--pr-t-spacings-100) var(--pr-t-spacings-100) var(--pr-t-spacings-100);
+	--components-dialog-inset: auto calc(var(--pr-t-spacings-100) + var(--commons-pushPanel-width)) var(--pr-t-spacings-100) var(--pr-t-spacings-100);
 	--components-dialog-borderRadius: var(--pr-t-border-radius-structure);
-	--components-dialog-width: calc(100% - var(--pr-t-spacings-100) * 2);
+	--components-dialog-width: calc(100% - var(--pr-t-spacings-100) * 2 - var(--commons-pushPanel-width));
 	--components-dialog-height: fit-content;
 	--components-dialog-translateX: 0;
 	--components-dialog-translateY: var(--components-dialog-translate);
@@ -78,7 +80,7 @@
 }
 
 @mixin withCloseButton {
-	.dialog-inside-header-button.button {
+	.dialog-inside-header-button {
 		@include button.ghost;
 		@include button.S;
 		@include button.onlyIconS;
@@ -95,6 +97,43 @@
 	--components-dialog-insideHeaderColumns: 1fr auto auto;
 }
 
-@mixin stacked {
+@mixin fancy {
+	// padding and minimum height are in pixels because they correspond to the size of the image
+	--components-dialog-inside-paddingInlineEnd: 220px;
+	--components-dialog-minBlockSize: 304px;
+	--components-dialog-inside-gridTemplateRows: auto auto auto;
+	--components-dialog-inside-alignContent: center;
+	--components-dialog-inside-header-boxShadow: none;
+	--components-dialog-inside-header-position: static;
+	--components-dialog-inside-header-paddingBlock: var(--pr-t-spacings-200) 0;
+	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-50) var(--pr-t-spacings-200);
+	--components-dialog-inside-header-button-position: absolute;
+	--components-dialog-inside-header-button-insetBlockStart: var(--pr-t-spacings-100);
+	--components-dialog-inside-header-button-insetBlockEnd: var(--pr-t-spacings-100);
+
+	.dialog-inside-footer {
+		@include footer.fancy;
+	}
+
+	.dialog-inside-header {
+		@include header.fancy;
+	}
+
+	.dialog-inside-header-button.button {
+		@include button.outlined;
+		@include button.M;
+	}
+}
+
+@mixin fancySmall {
+	// padding and minimum height are in pixels because they correspond to the size of the image
+	--components-dialog-inside-paddingInlineEnd: 140px;
+	--components-dialog-minBlockSize: 194px;
+}
 
+@mixin fancyNarrow {
+	--components-dialog-inside-header-paddingBlock: var(--pr-t-spacings-200);
+	--components-dialog-inside-header-paddingInline: var(--pr-t-spacings-300) calc(var(--pr-t-spacings-800) + var(--pr-t-spacings-200) + var(--pr-t-spacings-50));
+	--components-dialog-inside-paddingInlineEnd: 0px;
+	--components-dialog-minBlockSize: 0px;
 }

package/src/components/dialog/vars.scss

@@ -2,11 +2,11 @@
 	--components-dialog-size: 40rem;
 	--components-dialog-width: var(--components-dialog-size);
 	--components-dialog-height: fit-content;
-	--components-dialog-maxWidth: calc(100vw - (var(--pr-t-spacings-200) * 2));
+	--components-dialog-maxWidth: calc(100vw - (var(--pr-t-spacings-200) * 2) - var(--commons-pushPanel-width));
 	--components-dialog-maxHeight: calc(100dvh - (var(--pr-t-spacings-200) * 2));
 	--components-dialog-maxHeightFallback: calc(100vh - (var(--pr-t-spacings-200) * 2));
 	--components-dialog-borderRadius: var(--pr-t-border-radius-structure);
-	--components-dialog-inset: 0;
+	--components-dialog-inset: 0 var(--commons-pushPanel-width) 0 0;
 	--components-dialog-animationOpening: scaleIn;
 	--components-dialog-insideHeaderAreas: 'container close';
 	--components-dialog-insideHeaderTitleAlign: left;
@@ -21,4 +21,18 @@
 	--components-dialog-translateX: 0;
 	--components-dialog-translateY: var(--components-dialog-translate);
 	--components-dialog-scale: calc(1 - (var(--components-dialog-level) * 0.05));
+	--components-dialog-inside-header-boxShadow: 0 1px 0 0 var(--palettes-neutral-100);
+	--components-dialog-inside-header-position: relative;
+	--components-dialog-inside-header-paddingBlock: var(--pr-t-spacings-200);
+	--components-dialog-inside-header-paddingInline: var(--pr-t-spacings-300);
+	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-200);
+	--components-dialog-inside-header-button-position: static;
+	--components-dialog-inside-backgroundImage: none;
+	--components-dialog-minBlockSize: 0px;
+	--components-dialog-inside-paddingInlineEnd: 0px;
+	--components-dialog-inside-gridTemplateRows: auto 1fr auto;
+	--components-dialog-inside-alignContent: normal;
+	--components-dialog-inside-fancyIllustrations-inlineSize: var(--components-dialog-inside-paddingInlineEnd);
+	--components-dialog-inside-header-button-insetBlockStart: var(--pr-t-spacings-200);
+	--components-dialog-inside-header-button-insetBlockEnd: var(--pr-t-spacings-300);
 }

package/src/components/dropdown/component.scss

@@ -13,9 +13,9 @@
 	overflow-y: auto;
 
 	@at-root ($atRoot) {
-		// .lu-dropdown-options is deprecated
-		.dropdown-list,
-		.lu-dropdown-options {
+		// stylelint-disable-next-line selector-disallowed-list -- .lu-dropdown-options is deprecated
+		.lu-dropdown-options,
+		.dropdown-list {
 			list-style-type: none;
 			padding-block: var(--pr-t-spacings-50);
 			padding-inline: 0;
@@ -29,9 +29,9 @@
 			}
 		}
 
-		// .lu-dropdown-options-item is deprecated
-		.dropdown-list-option,
-		.lu-dropdown-options-item {
+		// stylelint-disable-next-line selector-disallowed-list -- .lu-dropdown-options-item is deprecated
+		.lu-dropdown-options-item,
+		.dropdown-list-option {
 			padding-block: 0;
 
 			&:not(:has(.divider.dropdown-list-option-divider, .dropdown-list-option), &.mod-divider) {
@@ -55,9 +55,9 @@
 			}
 		}
 
-		// .lu-dropdown-options-item-action is deprecated
-		.dropdown-list-option-action,
-		.lu-dropdown-options-item-action {
+		// stylelint-disable-next-line selector-disallowed-list -- .lu-dropdown-options-item-action is deprecated
+		.lu-dropdown-options-item-action,
+		.dropdown-list-option-action {
 			border: 0;
 			border-radius: var(--pr-t-border-radius-default);
 			background-color: var(--components-dropdown-list-option-action-backgroundColor);

package/src/components/dropdown/index.scss

@@ -1,17 +1,17 @@
 @use 'exports' as *;
 
-// .lu-dropdown-content is deprecated
-.dropdown,
-.lu-dropdown-content.lu-popover-content {
+// stylelint-disable-next-line selector-disallowed-list -- .lu-dropdown-content is deprecated
+.lu-dropdown-content.lu-popover-content,
+.dropdown {
 	@layer components {
 		@include vars;
 		@include component;
 	}
 }
 
-// .lu-dropdown-options-item-action is deprecated
-.dropdown-list-option-action,
-.lu-dropdown-options-item-action {
+// stylelint-disable-next-line selector-disallowed-list -- .lu-dropdown-options-item-action is deprecated
+.lu-dropdown-options-item-action,
+.dropdown-list-option-action {
 	@layer mods {
 		&.mod-critical,
 		&.mod-delete {

package/src/components/emptyState/component.scss

@@ -12,6 +12,7 @@
 		.emptyState-container {
 			align-items: center;
 			display: flex;
+			flex-direction: var(--components-emptyState-container-flexDirection);
 			flex-grow: 1;
 			justify-content: center;
 			max-inline-size: var(--components-emptyState-container-maxWidth);
@@ -19,9 +20,26 @@
 			padding: 0;
 			inline-size: 100%;
 			position: var(--components-emptyState-container-position);
+			gap: var(--pr-t-spacings-700);
+		}
+
+		.emptyState-illustration {
+			max-inline-size: min(360px, 100%);
+			place-items: center;
+			display: var(--components-emptyState-illustration-display);
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		.emptyState-illustration-img {
+			max-inline-size: 100%;
+			block-size: auto;
 		}
 
 		.emptyState-content {
+			flex-shrink: 0;
 			border-radius: var(--pr-t-border-radius-structure);
 			max-inline-size: 100%;
 			padding: var(--pr-t-spacings-50);
@@ -38,15 +56,13 @@
 
 		.emptyState-content-text {
 			padding-inline: var(--pr-t-spacings-50);
+			display: flex;
+			flex-direction: column;
+			gap: var(--pr-t-spacings-150);
 		}
 
 		.emptyState-content-heading {
 			font: var(--pr-t-font-heading-3);
-			margin-block-end: var(--pr-t-spacings-50);
-
-			@if config.$deprecatedSpacings {
-				margin-block-end: 0;
-			}
 		}
 
 		.emptyState-content-description {
@@ -57,7 +73,6 @@
 			display: flex;
 			flex-wrap: wrap;
 			align-items: center;
-			margin-block-start: var(--pr-t-spacings-200);
 			gap: var(--pr-t-spacings-200);
 
 			.button {

package/src/components/emptyState/index.scss

@@ -1,3 +1,4 @@
+@use '@lucca-front/scss/src/commons/utils/media';
 @use 'exports' as *;
 
 .emptyState {
@@ -24,5 +25,19 @@
 		.container & {
 			@include insideContainer;
 		}
+
+		&:has(.emptyState-illustration:not(:empty)) {
+			@include hasIllustration;
+
+			@include media.max('S') {
+				@include hasIllustrationNarrow;
+			}
+		}
+
+		&:has(.emptyState-illustration-img) {
+			@include media.max('S') {
+				@include hasIllustrationImgNarrow;
+			}
+		}
 	}
 }

package/src/components/emptyState/mods.scss

@@ -3,8 +3,10 @@
 @mixin page {
 	--components-emptyState-container-maxWidth: var(--commons-container-maxWidth);
 
-	background-image: var(--components-emptyState-illustration-foreground-bottom-left),
-		var(--components-emptyState-illustration-background-bottom-left), var(--components-emptyState-illustration-foreground-top-right),
+	background-image:
+		var(--components-emptyState-illustration-foreground-bottom-left),
+		var(--components-emptyState-illustration-background-bottom-left),
+		var(--components-emptyState-illustration-foreground-top-right),
 		var(--components-emptyState-illustration-background-top-right);
 	background-repeat: no-repeat;
 	background-position:
@@ -64,3 +66,19 @@
 	--components-emptyState-container-maxWidth: none;
 	--components-emptyState-container-left: auto;
 }
+
+@mixin hasIllustration {
+	--components-emptyState-background-color: transparent !important;
+	--components-emptyState-illustration-background-bottom-left: none !important;
+	--components-emptyState-illustration-foreground-bottom-left: none !important;
+	--components-emptyState-illustration-background-top-right: none !important;
+	--components-emptyState-illustration-foreground-top-right: none !important;
+}
+
+@mixin hasIllustrationNarrow {
+	--components-emptyState-container-flexDirection: column;
+}
+
+@mixin hasIllustrationImgNarrow {
+	--components-emptyState-illustration-display: none;
+}

package/src/components/emptyState/vars.scss

@@ -4,21 +4,21 @@
 	--components-emptyState-container-position: static;
 
 	--components-emptyState-background-color: var(--pr-t-elevation-surface-default);
-	--components-emptyState-illustration-top-right-offset-left: min(
-		calc(100% + 5rem),
-		calc(var(--components-emptyState-container-maxWidth) - 8.5rem)
-	);
-	--components-emptyState-illustration-top-right-offset-left-S: min(
-		calc(100% + 3.5rem),
-		calc(var(--components-emptyState-container-maxWidth) - 8.5rem)
-	);
-	--background-left-01: url('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg');
-	--foreground-left-01: url('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg');
-	--background-right-01: url('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg');
-	--foreground-right-01: url('https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg');
+	--components-emptyState-illustration-top-right-offset-left:
+		min(
+			calc(100% + 5rem),
+			calc(var(--components-emptyState-container-maxWidth) - 8.5rem)
+		);
+	--components-emptyState-illustration-top-right-offset-left-S:
+		min(
+			calc(100% + 3.5rem),
+			calc(var(--components-emptyState-container-maxWidth) - 8.5rem)
+		);
+	--components-emptyState-container-flexDirection: row;
+	--components-emptyState-illustration-display: grid;
 
-	--components-emptyState-illustration-background-bottom-left: var(--background-left-01);
-	--components-emptyState-illustration-foreground-bottom-left: var(--foreground-left-01);
-	--components-emptyState-illustration-background-top-right: var(--background-right-01);
-	--components-emptyState-illustration-foreground-top-right: var(--foreground-right-01);
+	--components-emptyState-illustration-background-bottom-left: url('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg');
+	--components-emptyState-illustration-foreground-bottom-left: url('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg');
+	--components-emptyState-illustration-background-top-right: url('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg');
+	--components-emptyState-illustration-foreground-top-right: url('https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg');
 }

package/src/components/fancyBox/vars.scss

@@ -1,12 +1,12 @@
 @mixin vars {
 	--components-fancyBox-paddingInline: var(--pr-t-spacings-200);
-  --components-fancyBox-marginInline: auto;
+	--components-fancyBox-marginInline: auto;
 
 	// Content
 	--components-fancyBox-contentMinBlockSize: 7rem;
 	--components-fancyBox-contentMinInlineSize: min(22rem, 100%);
-  --components-fancyBox-contentPaddingBlock: var(--pr-t-spacings-300);
-  --components-fancyBox-contentPaddingInline: var(--pr-t-spacings-700);
+	--components-fancyBox-contentPaddingBlock: var(--pr-t-spacings-300);
+	--components-fancyBox-contentPaddingInline: var(--pr-t-spacings-700);
 
 	// Visuals
 	--components-fancyBox-background-left: none;

package/src/components/field/mods.scss

@@ -13,10 +13,12 @@
 	align-items: center;
 	flex-direction: row;
 	margin-block-end: var(--pr-t-spacings-200);
-	inline-size: calc(
-		var(--components-field-sizes-default) + var(--components-field-compact-label-right-margin) +
-			var(--components-field-compact-label-sizes-default)
-	);
+	inline-size:
+		calc(
+			var(--components-field-sizes-default)
+			+ var(--components-field-compact-label-right-margin)
+			+ var(--components-field-compact-label-sizes-default)
+		);
 
 	.textfield-label,
 	.radiosfield-label,

package/src/components/fieldset/index.scss

@@ -29,7 +29,6 @@
 			@include withAction;
 		}
 
-
 		@include media.max('XXS') {
 			@include narrow;
 		}

package/src/components/filterBarDeprecated/component.scss

@@ -2,6 +2,7 @@
 @use '@lucca-front/scss/src/commons/utils/container';
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
+// stylelint-disable selector-disallowed-list -- Selectors are all deprecated.
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: var(--components-filterBar-backgroundColor);
 	border-radius: var(--pr-t-border-radius-structure);

package/src/components/filterBarDeprecated/index.scss

@@ -1,5 +1,6 @@
 @use 'exports' as *;
 
+// stylelint-disable selector-disallowed-list -- Selectors are all deprecated.
 .filterBarDeprecated {
 	@layer components {
 		@include vars;

package/src/components/filterPill/component.scss

@@ -199,7 +199,7 @@
 				line-height: 1;
 				text-transform: none;
 				white-space: nowrap;
-				word-wrap: normal;
+				overflow-wrap: normal;
 				content: '\e97d' / '';
 			}
 		}

package/src/components/footer/component.scss

@@ -1,17 +1,18 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	background-color: var(--pr-t-elevation-surface-raised);
-	padding-block: var(--pr-t-spacings-150);
+	background-color: var(--components-footer-backgroundColor);
+	padding-block: var(--components-footer-paddingBlock);
 	padding-inline: var(--components-footer-paddingInline);
 	display: flex;
 	justify-content: space-between;
 	gap: var(--pr-t-spacings-200);
 	align-items: var(--components-footer-alignItems);
-	box-shadow: var(--pr-t-elevation-shadow-overflow);
+	box-shadow: var(--components-footer-boxShadow);
 	inset-block-end: 0;
 	position: var(--components-footer-position);
 	flex-direction: var(--components-footer-direction);
+	overflow: var(--components-footer-overflow);
 
 	@at-root ($atRoot) {
 		.footer-content {

package/src/components/footer/mods.scss

@@ -8,9 +8,17 @@
 	--components-footer-actions-margin: 0;
 }
 
+@mixin fancy {
+	--components-footer-actions-margin: 0;
+	--components-footer-boxShadow: none;
+	--components-footer-paddingBlock: 0 var(--pr-t-spacings-150);
+	--components-footer-overflow: visible;
+}
+
 @mixin insideDialog {
 	--components-footer-paddingInline: var(--pr-t-spacings-300);
 	--commons-container-padding: 0;
+	--components-footer-overflow: hidden;
 }
 
 @mixin wide {

package/src/components/footer/vars.scss

@@ -4,4 +4,8 @@
 	--components-footer-alignItems: center;
 	--components-footer-actions-margin: auto;
 	--components-footer-paddingInline: var(--pr-t-spacings-200);
+	--components-footer-paddingBlock: var(--pr-t-spacings-150);
+	--components-footer-boxShadow: var(--pr-t-elevation-shadow-overflow);
+	--components-footer-overflow: visible;
+	--components-footer-backgroundColor: var(--pr-t-elevation-surface-raised);
 }

package/src/components/form/index.scss

@@ -69,11 +69,11 @@
 
 		&:not(lu-form-field) {
 			&:has(
-					.textField-input-value[aria-invalid='true'],
-					.timePicker-fieldset-group-textfield-input[aria-invalid='true'],
-					.simpleSelect-field-input[aria-invalid='true'],
-					.multipleSelect-displayer-search[aria-invalid='true']
-				) {
+				.textField-input-value[aria-invalid='true'],
+				.timePicker-fieldset-group-textfield-input[aria-invalid='true'],
+				.simpleSelect-field-input[aria-invalid='true'],
+				.multipleSelect-displayer-search[aria-invalid='true']
+			) {
 				@include invalid;
 			}
 		}
@@ -114,8 +114,6 @@
 }
 
 // deprecated
-
-// stylelint-disable no-duplicate-selectors -- deprecated
 .form {
 	@layer components {
 		@include vars;
@@ -192,4 +190,3 @@
 		}
 	}
 }
-// stylelint-enable

package/src/components/form/mods.scss

@@ -51,11 +51,11 @@
 		}
 
 		&:has(
-				.checkboxField-input:checked,
-				.checkboxField-input.is-checked,
-				.checkboxField-input[aria-checked='mixed'],
-				.checkboxField-input.is-mixed
-			) {
+			.checkboxField-input:checked,
+			.checkboxField-input.is-checked,
+			.checkboxField-input[aria-checked='mixed'],
+			.checkboxField-input.is-mixed
+		) {
 			background-color: var(--palettes-product-50);
 
 			&:hover {
@@ -69,11 +69,11 @@
 			}
 
 			&:has(
-					.checkboxField-input:checked,
-					.checkboxField-input.is-checked,
-					.checkboxField-input[aria-checked='mixed'],
-					.checkboxField-input.is-mixed
-				) {
+				.checkboxField-input:checked,
+				.checkboxField-input.is-checked,
+				.checkboxField-input[aria-checked='mixed'],
+				.checkboxField-input.is-mixed
+			) {
 				background-color: var(--palettes-error-50);
 
 				&:hover {
@@ -286,7 +286,6 @@
 
 	&::before,
 	&::after {
-		// stylelint-disable-next-line no-irregular-whitespace
 		content: ' ' / '';
 		display: table;
 	}

package/src/components/gauge/vars.scss

@@ -6,14 +6,13 @@
 	--components-gauge-before-minInlineSize: var(--components-gauge-blockSize);
 	--components-gauge-value: 0;
 	--components-gauge-borderRadius: var(--pr-t-border-radius-full);
-	--components-gauge-color:	var(--palettes-700, var(--palettes-product-700));
+	--components-gauge-color: var(--palettes-700, var(--palettes-product-700));
 	--components-gauge-animationName: name;
 	--components-gauge-animationDuration: var(--commons-animations-durations-slow);
-	--components-gauge-animationTimingFunction: cubic-bezier(.9,.9,.9,1.1);
+	--components-gauge-animationTimingFunction: cubic-bezier(0.9, 0.9, 0.9, 1.1);
 
 	--components-gauge-circle-background: var(--palettes-neutral-100);
 	--components-gauge-circle-strokeWidth: var(--pr-t-spacings-100);
 	--components-gauge-circleR: 76px;
 	--components-gauge-circleP: calc(2 * pi * var(--components-gauge-circleR));
-
 }

package/src/components/header/component.scss

@@ -6,7 +6,7 @@
 	background-color: var(--components-header-background);
 	min-block-size: var(--components-header-height);
 	padding: var(--components-header-padding);
-	position: relative;
+	position: var(--components-header-position);
 	display: flex;
 	align-items: center;
 	z-index: 99;

package/src/components/header/mods.scss

@@ -24,3 +24,8 @@
 		inset-block-start: var(--commons-navSide-mobile-toggle-height);
 	}
 }
+
+@mixin fancy {
+	--components-header-position: static;
+	--components-header-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200) 0;
+}

package/src/components/header/vars.scss

@@ -2,4 +2,5 @@
 	--components-header-background: var(--pr-t-elevation-surface-raised);
 	--components-header-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);
 	--components-header-height: 4rem;
+	--components-header-position: relative;
 }

package/src/components/highlightData/mods.scss

@@ -7,9 +7,10 @@
 }
 
 @mixin valueFirst {
-	--components-highlightData-grid : 'value   action'
-	                                  'title   action'
-																		'subtext action';
+	--components-highlightData-grid:
+		'value   action'
+		'title   action'
+		'subtext action';
 }
 
 @mixin valueFirstIllustrations {

package/src/components/highlightData/vars.scss

@@ -1,8 +1,9 @@
 @mixin vars {
 	--components-highlightData-display: grid;
-	--components-highlightData-grid: 'title   action'
-																		'value   action'
-																		'subtext action';
+	--components-highlightData-grid:
+		'title   action'
+		'value   action'
+		'subtext action';
 	--components-highlightData-alignItem: center;
 	--components-highlightData-background: var(--pr-t-elevation-surface-raised);
 	--components-highlightData-padding-inline: var(--pr-t-spacings-200);