@lucca-front/scss 22.0.0-rc.4 → 22.0.0

package/src/components/filterPill/component.scss

@@ -48,10 +48,15 @@
 		.filterPill_popover-content-option {
 			padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100);
 			border-radius: var(--pr-t-border-radius-default);
+			background-color: var(--components-filterPill-option-backgroundColor);
 			position: relative;
+			display: flex;
+			gap: var(--pr-t-spacings-100);
+			justify-content: space-between;
 
 			.formLabel {
 				position: static;
+				cursor: pointer;
 
 				&::before {
 					content: '';
@@ -60,15 +65,31 @@
 				}
 			}
 
+			.filterPill_popover-content-option-input {
+				@include a11y.mask;
+			}
+
 			&:hover {
-				background-color: var(--palettes-neutral-50);
+				--components-filterPill-option-backgroundColor: var(--palettes-neutral-50);
 			}
 
 			&:has(:checked) {
-				background-color: var(--palettes-product-50);
+				--components-filterPill-option-backgroundColor: var(--palettes-product-50);
+
+				.filterPill_popover-content-option-actions {
+					&:hover {
+						background-color: var(--palettes-product-200);
+					}
+				}
 
 				&:hover {
-					background-color: var(--palettes-product-100);
+					--components-filterPill-option-backgroundColor: var(--palettes-product-100);
+				}
+			}
+
+			.filterPill_popover-content-option-actions {
+				&:hover {
+					background-color: var(--palettes-neutral-100);
 				}
 			}
 		}
@@ -104,22 +125,18 @@
 
 			display: flex;
 			margin-block-start: -1px;
-			margin-inline-start: var(--pr-t-spacings-50);
 			inline-size: calc(var(--pr-t-spacings-50) + var(--pr-t-spacings-200));
 			flex-shrink: 0;
 			z-index: 1;
 			color: var(--components-filterPill-toggle-iconColor);
 			cursor: var(--components-filterPill-label-cursor);
+			margin-inline-start: var(--components-filterPill-toggle-marginInlineStart);
 
 			.icon-arrowChevronBottom {
 				transition-property: transform;
 				transition-duration: var(--commons-animations-durations-fast);
 				transform: rotate(var(--components-filterPill-toggle-rotation));
 			}
-
-			.filterPill-value + & {
-				margin-inline-start: var(--components-filterPill-toggle-marginInlineStart);
-			}
 		}
 
 		.filterPill-clear.clear {

package/src/components/filterPill/index.scss

@@ -38,6 +38,10 @@
 			&:active {
 				@include filledActive;
 			}
+
+			&:has(~ .filterPill_clear) {
+				@include filledClearable;
+			}
 		}
 
 		&.mod-checkbox {
@@ -82,6 +86,10 @@
 }
 
 .filterPillWrapper {
+	@layer components {
+		@include varsWrapper;
+	}
+
 	@layer mods {
 		&.is-hidden {
 			@include hidden;

package/src/components/filterPill/states.scss

@@ -67,7 +67,6 @@
 	--components-filterPill-backgroundColor: var(--palettes-product-50);
 	--components-filterPill-color: var(--palettes-product-800);
 	--components-filterPill-toggle-iconColor: var(--palettes-product-700);
-	--components-filterPill-toggle-marginInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
 }
 
 @mixin notFilled {
@@ -109,3 +108,7 @@
 @mixin hidden {
 	--components-filterPillWrapper-display: none;
 }
+
+@mixin filledClearable {
+	--components-filterPill-toggle-marginInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
+}

package/src/components/filterPill/vars.scss

@@ -18,5 +18,9 @@
 	--components-filterPill-arrowColor: var(--palettes-product-700);
 	--components-filterPill-label-maxInlineSize: none;
 	--components-filterPill-toggle-marginInlineStart: var(--pr-t-spacings-50);
+}
+
+@mixin varsWrapper {
 	--components-filterPillWrapper-display: block;
+	--components-filterPill-option-backgroundColor: transparent;
 }

package/src/components/footer/component.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/media';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: var(--components-footer-backgroundColor);
@@ -18,6 +19,10 @@
 	@at-root ($atRoot) {
 		.footer-content {
 			flex-grow: 1;
+
+			&:empty {
+				display: none;
+			}
 		}
 
 		.footer-actions {

package/src/components/form/vars.scss

@@ -11,7 +11,7 @@
 	--components-field-framed-label-top-offset: var(--pr-t-spacings-100);
 	--components-field-framed-textarea-height: 8.5rem;
 	--components-field-framed-textarea-min-height: 5.5rem;
-	--components-field-framed-textarea-max-height: 80vh;
+	--components-field-framed-textarea-max-height: 80vb;
 	--components-field-framed-title-font-size: 1.125rem;
 	--components-field-framed-title-line-height: var(--pr-t-font-body-M-lineHeight);
 	--components-field-framed-suffix-padding-right: var(--pr-t-spacings-600);

package/src/components/grid/component.scss

@@ -29,6 +29,7 @@
 			grid-column-end: span var(--grid-colspan, var(--grid-column-end));
 			grid-row-end: span var(--grid-rowspan, var(--grid-row-end));
 			min-inline-size: 0;
+			text-align: inherit; // required for Chrome, which interprets the deprecated `align` attribute
 
 			@each $breakpoint, $value in config.$breakpoints {
 				@include media.min($breakpoint) {

package/src/components/highlightData/component.scss

@@ -55,7 +55,7 @@
 				--commons-text-link-hover: var(--palettes-800, var(--palettes-product-800));
 			}
 
-			.button {
+			.button.mod-outlined {
 				@include color.palette('neutral');
 			}
 		}

package/src/components/highlightSection/component.scss

@@ -0,0 +1,48 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	background-color: var(--components-highlightSection-background);
+	border-radius: var(--components-highlightSection-borderRadius);
+	display: block;
+	overflow: hidden;
+	padding: var(--components-highlightSection-padding);
+	position: relative;
+
+	@at-root ($atRoot) {
+		.highlightSection-content {
+			align-items: flex-start;
+			column-gap: var(--components-highlightSection-gap);
+			display: flex;
+			position: relative;
+		}
+
+		.highlightSection-content-slot {
+			flex-grow: 1;
+			min-inline-size: 0;
+		}
+
+		.highlightSection-content-illustration {
+			block-size: var(--components-highlightSection-illustration-blockSize);
+			inline-size: var(--components-highlightSection-illustration-inlineSize);
+			flex-shrink: 0;
+			display: var(--components-highlightSection-content-illustration-display);
+		}
+
+		.highlightSection-bubbleStart,
+		.highlightSection-bubbleEnd {
+			inset-block-end: 0;
+			position: absolute;
+			pointer-events: none;
+			display: var(--components-highlightSection-bubbleStartBubbleEnd-display);
+		}
+
+		.highlightSection-bubbleStart {
+			inset-inline-start: 0;
+		}
+
+		.highlightSection-bubbleEnd {
+			inset-inline-end: 0;
+			transform: scaleX(-1);
+		}
+	}
+}

package/src/components/highlightSection/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/highlightSection/index.scss

@@ -0,0 +1,23 @@
+@use 'exports' as *;
+@use '@lucca-front/scss/src/commons/utils/media';
+
+.highlightSection {
+	@layer components {
+		@include vars;
+		@include component;
+	}
+
+	@layer mods {
+		&.mod-light {
+			@include light;
+		}
+
+		&.mod-dark {
+			@include dark;
+		}
+
+		@include media.max('XXS') {
+			@include narrow;
+		}
+	}
+}

package/src/components/highlightSection/mods.scss

@@ -0,0 +1,14 @@
+@mixin light {
+	--components-highlightSection-background: var(--palettes-50, var(--palettes-product-50));
+	--palettes-assets-primary: var(--palettes-assets-primary-light);
+}
+
+@mixin dark {
+	--components-highlightSection-background: var(--palettes-100, var(--palettes-product-100));
+	--palettes-assets-primary: var(--palettes-assets-primary-dark);
+}
+
+@mixin narrow {
+	--components-highlightSection-content-illustration-display: none;
+	--components-highlightSection-bubbleStartBubbleEnd-display: none;
+}

package/src/components/highlightSection/vars.scss

@@ -0,0 +1,10 @@
+@mixin vars {
+	--components-highlightSection-background: var(--pr-t-elevation-surface-raised);
+	--components-highlightSection-borderRadius: var(--pr-t-border-radius-structure);
+	--components-highlightSection-gap: var(--pr-t-spacings-100);
+	--components-highlightSection-illustration-blockSize: 150px;
+	--components-highlightSection-illustration-inlineSize: 140px;
+	--components-highlightSection-padding: var(--pr-t-spacings-200);
+	--components-highlightSection-content-illustration-display: block;
+	--components-highlightSection-bubbleStartBubbleEnd-display: flex;
+}

package/src/components/horizontalNavigation/component.scss

@@ -149,7 +149,8 @@
 		.horizontalNavigation_panel {
 			display: var(--components-horizontalNavigation-panel-display);
 			overflow: var(--components-horizontalNavigation-panel-overflow);
-			min-height: 0;
+			flex-grow: var(--components-horizontalNavigation-panel-flexGrow);
+			min-block-size: 0;
 			flex-direction: column;
 
 			&:focus-visible {

package/src/components/horizontalNavigation/mods.scss

@@ -115,6 +115,7 @@
 @mixin insideDialogPanel {
 	--components-horizontalNavigation-panel-display: flex;
 	--components-horizontalNavigation-panel-overflow: auto;
+	--components-horizontalNavigation-panel-flexGrow: 1;
 
 	&:focus-visible {
 		@include a11y.focusVisible($offset: -4px, $borderRadius: var(--pr-t-border-radius-structure));

package/src/components/horizontalNavigation/vars.scss

@@ -25,4 +25,5 @@
 @mixin varsPanel {
 	--components-horizontalNavigation-panel-display: block;
 	--components-horizontalNavigation-panel-overflow: visible;
+	--components-horizontalNavigation-panel-flexGrow: 0;
 }

package/src/components/index.scss

@@ -101,6 +101,7 @@
 @forward 'richText';
 @forward 'readMore';
 @forward 'highlightData';
+@forward 'highlightSection';
 @forward 'listing';
 @forward 'fileUpload';
 @forward 'fileEntry';
@@ -119,6 +120,7 @@
 @forward 'activityFeed';
 @forward 'impersonation';
 @forward 'highlightText';
+@forward 'approbationInbox';
 
 @forward 'filterBarDeprecated';
 @forward 'tableFixedDeprecated';

package/src/components/indexTable/mods.scss

@@ -298,6 +298,11 @@
 			// For specificity purpose. Could be removed if we decide to remove automatic CSS imports in Angular components
 			@include button.critical;
 		}
+
+		&.is-loading {
+			@include button.loadingS;
+			@include button.loadingGhost;
+		}
 	}
 }
 

package/src/components/layout/component.scss

@@ -6,7 +6,7 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	min-block-size: 100vh;
+	min-block-size: 100vb;
 	display: grid;
 
 	@include media.min('L') {
@@ -94,7 +94,7 @@
 
 		.layout-navside,
 		.layout-aside {
-			min-block-size: calc(100vh - var(--commons-banner-height));
+			min-block-size: calc(100vb - var(--commons-banner-height));
 			inset-block-start: var(--commons-banner-height);
 			display: flex;
 			position: sticky;
@@ -116,7 +116,7 @@
 		}
 
 		.layout-navside {
-			max-block-size: calc(100vh - var(--commons-banner-height));
+			max-block-size: calc(100vb - var(--commons-banner-height));
 			grid-area: navside;
 			z-index: 2;
 			overflow: auto;

package/src/components/layout/states.scss

@@ -8,7 +8,7 @@
 @mixin active {
 	@include media.max('S') {
 		inset-block-start: var(--commons-banner-height);
-		block-size: calc(100vh - var(--commons-banner-height));
+		block-size: calc(100vb - var(--commons-banner-height));
 		background-color: var(--pr-t-elevation-surface-raised);
 		position: fixed;
 		overflow: auto;

package/src/components/link/component.scss

@@ -26,7 +26,7 @@
 		font-size: 1em;
 		vertical-align: baseline;
 		position: relative;
-		top: 0.075rem;
+		inset-block-start: 0.075rem;
 		margin-inline-start: var(--components-link-icon-marginInlineStart);
 	}
 

package/src/components/listboxOption/component.scss

@@ -4,7 +4,7 @@
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: var(--components-listboxOption-display);
 	flex-direction: column;
-	gap: var(--pr-t-spacings-25);
+	gap: var(--pr-t-spacings-50);
 	scroll-margin-block: var(--components-listboxOption-scrollMarginBlock);
 	position: var(--components-listboxOption-position);
 	inset-block-end: 0;
@@ -16,7 +16,6 @@
 
 	@at-root ($atRoot) {
 		.listboxOption-content {
-			opacity: var(--components-listboxOption-content-opacity);
 			background-color: var(--components-listboxOption-content-backgroundColor);
 			color: var(--components-listboxOption-content-color);
 			border-radius: var(--pr-t-border-radius-default);
@@ -36,6 +35,7 @@
 			inset-block-start: var(--components-listboxOption-content-insetBlockStart);
 			justify-content: var(--components-listboxOption-content-justifyContent);
 			box-shadow: var(--components-listboxOption-content-boxShadow);
+			overflow-wrap: anywhere;
 
 			&::before {
 				content: var(--components-listboxOption-content-before-content);
@@ -54,6 +54,16 @@
 				pointer-events: none;
 				box-shadow: var(--pr-t-elevation-shadow-overflow);
 			}
+
+			.avatar {
+				margin-inline-end: var(--pr-t-spacings-75);
+			}
+
+			.link {
+				opacity: var(--components-listboxOption-content-link-opacity);
+				transition-property: opacity;
+				transition-duration: var(--commons-animations-durations-fast);
+			}
 		}
 
 		.listboxOption-content-checkboxField.checkboxField {
@@ -65,7 +75,7 @@
 			list-style-type: none;
 			display: flex;
 			flex-direction: column;
-			gap: var(--pr-t-spacings-25);
+			gap: var(--pr-t-spacings-50);
 			background-color: var(--palettes-neutral-0);
 			position: relative;
 			z-index: 1;
@@ -77,11 +87,14 @@
 
 			@include reset.list;
 
-			padding: var(--components-listboxOptionWrapper-padding);
-
 			.listboxOptionWrapper {
 				--components-listboxOptionWrapper-overflow: visible;
 			}
 		}
+
+		.listboxOption-content-group {
+			color: var(--palettes-neutral-600);
+			font: var(--pr-t-font-body-S);
+		}
 	}
 }

package/src/components/listboxOption/index.scss

@@ -10,7 +10,8 @@
 		&.mod-add {
 			@include add;
 
-			&:hover {
+			&:hover,
+			&:has(> .listboxOption-content.is-hovered) {
 				@include addHover;
 			}
 
@@ -30,14 +31,31 @@
 		&[role='group'] {
 			@include group;
 
-			&:hover,
-			&:has(.is-hovered) {
-				@include groupHover;
+			&:hover {
+				.selectPanel.is-pointerNavigation & {
+					@include groupHover;
+				}
 			}
 
-			> .listboxOption-content {
+			&:has(.is-hovered),
+			&:has(.link.is-highlighted) {
+				.selectPanel:not(.is-pointerNavigation) & {
+					@include groupHover;
+				}
+			}
+
+			> .listboxOption-content:has(.link) {
 				&:hover {
-					@include groupHoverReset;
+					.selectPanel.is-pointerNavigation & {
+						@include hover;
+					}
+				}
+
+				&.is-hovered,
+				&:has(.link.is-highlighted) {
+					.selectPanel:not(.is-pointerNavigation) & {
+						@include hover;
+					}
 				}
 			}
 
@@ -53,13 +71,21 @@
 		}
 
 		&[aria-selected='true'],
-		&[aria-checked='true'] {
+		&[aria-checked='true'],
+		&.is-selected {
 			> .listboxOption-content {
 				@include selected;
 
-				&.is-hovered,
 				&:hover {
-					@include selectedHover;
+					.selectPanel.is-pointerNavigation & {
+						@include selectedHover;
+					}
+				}
+
+				&.is-hovered {
+					.selectPanel:not(.is-pointerNavigation) & {
+						@include selectedHover;
+					}
 				}
 
 				&:active {
@@ -68,7 +94,8 @@
 			}
 		}
 
-		&[aria-disabled='true'] {
+		&[aria-disabled='true'],
+		&.is-disabled {
 			> .listboxOption-content {
 				@include disabled;
 
@@ -78,7 +105,8 @@
 			}
 
 			&[aria-selected='true'],
-			&[aria-checked='true'] {
+			&[aria-checked='true'],
+			&.is-selected {
 				> .listboxOption-content {
 					@include selectedDisabled;
 				}
@@ -93,9 +121,16 @@
 	}
 
 	@layer mods {
-		&.is-hovered,
 		&:hover {
-			@include hover;
+			.selectPanel.is-pointerNavigation & {
+				@include hover;
+			}
+		}
+
+		&.is-hovered {
+			.selectPanel:not(.is-pointerNavigation) & {
+				@include hover;
+			}
 		}
 
 		&:active {
@@ -128,13 +163,20 @@
 		}
 
 		&.mod-multiple {
+			// Grouped options keep the same inline alignment as ungrouped ones (checkbox + label),
+			// so the extra group indentation from `@mixin group` must not apply in multi-select.
+			.listboxOption[role='group'] > .listboxOptionWrapper {
+				--components-listboxOptionWrapper-childrenPaddingInlineStart: var(--pr-t-spacings-100);
+			}
+
 			&,
 			.listboxOptionWrapper {
 				@include multiple;
 
 				.listboxOption {
 					&:hover,
-					&.is-hovered {
+					&.is-hovered,
+					&:has(> .listboxOption-content.is-hovered) {
 						@include multipleHover;
 					}
 
@@ -143,7 +185,8 @@
 					}
 
 					&[aria-selected='true'],
-					&[aria-checked='true'] {
+					&[aria-checked='true'],
+					&.is-selected {
 						> .listboxOption-content {
 							@include multipleSelected;
 
@@ -173,13 +216,15 @@
 						}
 					}
 
-					&[aria-disabled='true'], {
+					&[aria-disabled='true'],
+					&.is-disabled {
 						> .listboxOption-content {
 							@include multipleDisabled;
 						}
 
 						&[aria-selected='true'],
-						&[aria-checked='true'] {
+						&[aria-checked='true'],
+						&.is-selected {
 							> .listboxOption-content {
 								@include multipleSelectedDisabled;
 							}

package/src/components/listboxOption/mods.scss

@@ -18,23 +18,22 @@
 	}
 
 	> .listboxOption-content {
-		--components-listboxOption-content-fontWeight: var(--pr-t-font-fontWeight-semibold);
 		--components-listboxOption-content-font: var(--pr-t-font-body-S);
+		--components-listboxOption-content-color: var(--pr-t-color-text-subtle);
 		--components-listboxOption-content-position: sticky;
-		--components-listboxOption-content-marginBlockStart: var(--pr-t-spacings-50);
 		--components-listboxOption-content-checkboxField-display: none;
 		--components-listboxOption-content-flexWrap: wrap;
 		--components-listboxOption-content-justifyContent: space-between;
-		--components-listboxOption-content-insetBlockStart: var(--pr-t-spacings-50);
+		--components-listboxOption-content-insetBlockStart: 0;
 		--components-listboxOption-content-boxShadow:
 			calc(var(--pr-t-spacings-100) * -1) 0 0 0 var(--pr-t-elevation-surface-raised),
-			calc(var(--pr-t-spacings-100) * 1) 0 0 0 var(--pr-t-elevation-surface-raised),
-			calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1) 0 0 var(--pr-t-elevation-surface-raised),
-			calc(var(--pr-t-spacings-100) * 1) calc(var(--pr-t-spacings-100) * -1) 0 0 var(--pr-t-elevation-surface-raised);
+			var(--pr-t-spacings-100) 0 0 0 var(--pr-t-elevation-surface-raised),
+			calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-50) * -1) 0 0 var(--pr-t-elevation-surface-raised),
+			var(--pr-t-spacings-100) calc(var(--pr-t-spacings-50) * -1) 0 0 var(--pr-t-elevation-surface-raised);
 	}
 
 	.listboxOptionWrapper {
-		--components-listboxOptionWrapper-childrenPaddingInlineStart: var(--pr-t-spacings-100);
+		--components-listboxOptionWrapper-childrenPaddingInlineStart: var(--pr-t-spacings-250);
 	}
 }
 
@@ -55,7 +54,6 @@
 
 @mixin select {
 	> .listboxOption-content {
-		--components-listboxOption-content-opacity: 0;
 		--components-listboxOption-content-position: static;
 		--components-listboxOption-content-font: var(--pr-t-font-body-S);
 		--components-listboxOption-content-padding: 0;