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

package/src/components/listboxOption/states.scss

@@ -7,7 +7,7 @@
 }
 
 @mixin disabledHover {
-	--components-listboxOption-content-backgroundColor: var(--pr-t-elevation-surface-raised);
+	--components-listboxOption-content-backgroundColor: var(--pr-t-elevation-surface-raised) !important;
 }
 
 @mixin selectedDisabled {
@@ -78,9 +78,10 @@
 
 @mixin empty {
 	.listboxOption-content {
+		--components-listboxOption-content-color: var(--pr-t-color-text-subtle);
 		--components-listboxOption-content-checkboxField-display: none;
 		--components-listboxOption-content-cursor: default;
-		--components-listboxOption-content-backgroundColor: var(--pr-t-elevation-surface-raised);
+		--components-listboxOption-content-backgroundColor: var(--pr-t-elevation-surface-raised) !important;
 	}
 }
 
@@ -91,7 +92,7 @@
 
 @mixin groupHover {
 	.listboxOption-content {
-		--components-listboxOption-content-opacity: 1;
+		--components-listboxOption-content-link-opacity: 1;
 	}
 }
 
@@ -106,6 +107,10 @@
 
 @mixin hover {
 	--components-listboxOption-content-backgroundColor: var(--palettes-neutral-50);
+
+	.listboxOption-content-checkboxField-input {
+		@include checkboxField.hover;
+	}
 }
 
 @mixin active {

package/src/components/listboxOption/vars.scss

@@ -23,10 +23,10 @@
 	--components-listboxOption-content-position: relative;
 	--components-listboxOption-content-before-content: var(--components-listboxOptionWrapper-childrenBefore-content, '');
 	--components-listboxOption-content-after-content: none;
-	--components-listboxOption-content-opacity: 1;
 	--components-listboxOption-content-boxShadow: none;
 	--components-listboxOption-content-flexWrap: nowrap;
 	--components-listboxOption-content-justifyContent: normal;
+	--components-listboxOption-content-link-opacity: 0;
 }
 
 @mixin varsWrapper {
@@ -35,5 +35,5 @@
 	--components-listboxOptionWrapper-childrenPaddingInlineStart: var(--pr-t-spacings-100);
 	--components-listboxOptionWrapper-childrenCheckboxField-display: none;
 	--components-listboxOptionWrapper-childrenBefore-content: '';
-	--components-listboxOptionWrapper-overflow: auto;
+	--components-listboxOptionWrapper-overflow: visible;
 }

package/src/components/loading/mods.scss

@@ -39,6 +39,7 @@
 	@include popin;
 
 	// legacy, approximate centering
+	// stylelint-disable-next-line unit-layout-mappings -- translateY is physical; pair it with physical vh.
 	--components-loading-transform: translateY(35vh);
 }
 
@@ -47,6 +48,7 @@
 
 	// legacy, approximate centering
 	--components-loading-margin: 0 auto;
+	// stylelint-disable-next-line unit-layout-mappings -- translateY is physical; pair it with physical vh.
 	--components-loading-transform: translateY(35vh);
 }
 

package/src/components/main/states.scss

@@ -2,7 +2,7 @@
 
 @mixin notScrollable {
 	@include media.max('S') {
-		block-size: 100vh;
+		block-size: 100vb;
 		overflow: hidden;
 	}
 }

package/src/components/mainLayout/component.scss

@@ -7,10 +7,9 @@
 	display: flex;
 	flex-direction: var(--components-mainLayout-flexDirection);
 	block-size: 100%;
+	position: relative;
 
 	&:focus-visible {
-		position: relative;
-
 		&::after {
 			content: '';
 			position: absolute;
@@ -28,6 +27,7 @@
 			overflow-y: auto;
 			flex-shrink: 0;
 			inline-size: var(--components-mainLayout-sidebar-inlineSize);
+			position: relative;
 
 			&:focus-visible {
 				@include a11y.focusVisible($offset: -4px);
@@ -113,5 +113,53 @@
 				display: none;
 			}
 		}
+
+		.mainLayout-bubblesEndStart {
+			position: absolute;
+			inset-block-end: 0;
+			inset-inline-start: 0;
+			display: flex;
+			block-size: var(--components-mainLayout-bubblesEndStartBlockSize);
+
+			svg {
+				display: block;
+				inline-size: var(--components-mainLayout-bubblesEndStartSvgInlineSize);
+				block-size: var(--components-mainLayout-bubblesEndStartBlockSize);
+			}
+		}
+
+		.mainLayout-bubblesStartEnd {
+			position: absolute;
+			inset-block-start: 0;
+			inset-inline-start: var(--components-mainLayout-bubblesStartEndInsetInlineStart);
+			inline-size: var(--components-mainLayout-bubblesStartEndInlineSize);
+			block-size: var(--components-mainLayout-bubblesStartEndBlockSize);
+			pointer-events: none;
+			overflow: hidden;
+
+			svg {
+				display: block;
+				position: relative;
+				inset-inline-end: var(--components-mainLayout-bubblesStartEndSvgInsetInlineEnd);
+				inline-size: var(--components-mainLayout-bubblesStartEndSvgInlineSize);
+				block-size: var(--components-mainLayout-bubblesStartEndBlockSize);
+			}
+		}
+
+		.mainLayout-bubblesEndStart-illustration,
+		.mainLayout-bubblesStartEnd-illustration {
+			position: absolute;
+			block-size: auto;
+			inset-block-start: 0;
+		}
+
+		.mainLayout-bubblesEndStart-illustration {
+			inline-size: var(--components-mainLayout-bubblesEndStartSvgInlineSize);
+		}
+
+		.mainLayout-bubblesStartEnd-illustration {
+			inline-size: var(--components-mainLayout-bubblesStartEndSvgInlineSize);
+			inset-inline-start: calc(var(--components-mainLayout-bubblesStartEndSvgInsetInlineEnd) * -1);
+		}
 	}
 }

package/src/components/mainLayout/index.scss

@@ -6,8 +6,20 @@
 		@include vars;
 		@include component;
 
-		@include media.min('S') {
-			@include wide;
+		&:not(.mod-wideM) {
+			@include media.min('S') {
+				@include wide;
+			}
+		}
+
+		&.mod-wideM {
+			@include media.min('M') {
+				@include wide;
+			}
+		}
+
+		@include media.max('S') {
+			@include narrow;
 		}
 	}
 

package/src/components/mainLayout/mods.scss

@@ -25,3 +25,12 @@
 @mixin stickyBlock {
 	--components-mainLayout-content-inside-block-position: sticky;
 }
+
+@mixin narrow {
+	// ratio: 0.75
+	--components-mainLayout-bubblesStartEndSvgInlineSize: 162px;
+	--components-mainLayout-bubblesEndStartSvgInlineSize: 186px;
+	--components-mainLayout-bubblesStartEndBlockSize: 174px;
+	--components-mainLayout-bubblesEndStartBlockSize: 174px;
+	--components-mainLayout-bubblesStartEndSvgInsetInlineEnd: -1.5rem;
+}

package/src/components/mainLayout/vars.scss

@@ -9,4 +9,16 @@
 	--components-mainLayout-content-inside-block-firstLastOfType-marginBlock: var(--pr-t-spacings-200);
 	--components-mainLayout-content-inside-header-backgroundColor: transparent;
 	--components-mainLayout-content-inside-footer-backgroundColor: transparent;
+	--components-mainLayout-bubblesStartEndSvgInlineSize: 216px;
+	--components-mainLayout-bubblesEndStartSvgInlineSize: 248px;
+	--components-mainLayout-bubblesStartEndBlockSize: 232px;
+	--components-mainLayout-bubblesEndStartBlockSize: 232px;
+	--components-mainLayout-bubblesStartEndInsetInlineStart:
+		min(
+			calc(100% + var(--commons-container-paddingInline) * 2 - var(--components-mainLayout-bubblesStartEndSvgInlineSize)),
+			calc(var(--commons-container-maxWidth) + var(--commons-container-paddingInline) * 2 - var(--components-mainLayout-bubblesStartEndSvgInlineSize))
+		);
+	--components-mainLayout-bubblesStartEndInlineSize: calc(100% - var(--components-mainLayout-bubblesStartEndInsetInlineStart));
+	--components-mainLayout-bubblesStartEndSvgInsetInlineEnd: -1rem;
+	--components-mainLayout-backgroundImage: none;
 }

package/src/components/multiSelect/mods.scss

@@ -45,7 +45,7 @@
 	padding: 0;
 	gap: 0;
 	inline-size: 26.5rem;
-	max-inline-size: calc(100vw - 2.5rem);
+	max-inline-size: calc(100vi - 2.5rem);
 
 	.multipleSelect-displayer {
 		box-shadow: 0 0 0 1px var(--components-multiSelect-border-color);
@@ -53,7 +53,7 @@
 		padding: var(--components-multiSelect-padding);
 		z-index: 1;
 		position: relative;
-		max-block-size: min(14rem, 80vh);
+		max-block-size: min(14rem, 80vb);
 		overflow: auto;
 	}
 

package/src/components/multiSelect/states.scss

@@ -12,7 +12,7 @@
 }
 
 @mixin disabled {
-	--components-multiSelect-background: var(--commons-disabled-background);
+	--components-multiSelect-background: var(--pr-t-color-input-background-disabled);
 	--components-multiSelect-placeholder: var(--commons-disabled-placeholder);
 	--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);
 

package/src/components/navside/states.scss

@@ -30,7 +30,7 @@
 }
 
 @mixin mobileOpen {
-	block-size: 100vh;
+	block-size: 100vb;
 	overflow-x: hidden;
 	overflow-y: auto;
 
@@ -41,7 +41,7 @@
 }
 
 @mixin mobileOpenBanner {
-	block-size: calc(100vh - var(--commons-banner-height));
+	block-size: calc(100vb - var(--commons-banner-height));
 }
 
 @mixin mobileHidden {

package/src/components/popover/component.scss

@@ -35,8 +35,8 @@
 	@at-root ($atRoot) {
 		.popover-content {
 			overflow: auto;
-			max-block-size: min(var(--components-popover-content-maxBlockSize), calc(100dvh - var(--pr-t-spacings-200)));
-			max-inline-size: min(var(--components-popover-content-maxInlineSize), calc(100dvw - var(--pr-t-spacings-400)));
+			max-block-size: min(var(--components-popover-content-maxBlockSize), calc(100dvb - var(--pr-t-spacings-200)));
+			max-inline-size: min(var(--components-popover-content-maxInlineSize), calc(100dvi - var(--pr-t-spacings-400)));
 
 			&:focus-visible {
 				@include a11y.focusVisible($borderRadius: var(--pr-t-border-radius-default));

package/src/components/progress/component.scss

@@ -26,7 +26,7 @@
 		.progress-bar {
 			background-color: var(--palettes-700, var(--components-progress-bar-background));
 			transition-duration: var(--commons-animations-durations-fast);
-			transition-property: background-color, width;
+			transition-property: background-color, inline-size;
 			inset-block: 0;
 			inset-inline-start: 0;
 			position: absolute;

package/src/components/readMore/component.scss

@@ -62,6 +62,8 @@
 			$wrappingElements: 'ol, ul';
 
 			&:not(:has(#{$notPlainText})) {
+				white-space: var(--components-readMore-content-whiteSpace);
+
 				&::after {
 					@extend %after;
 				}

package/src/components/readMore/index.scss

@@ -28,5 +28,9 @@
 		&.mod-sunken {
 			@include sunken;
 		}
+
+		&.mod-plainText {
+			@include plainText;
+		}
 	}
 }

package/src/components/readMore/mods.scss

@@ -9,3 +9,7 @@
 @mixin linkReset {
 	--components-readMore-link-insetBlockEnd: 0;
 }
+
+@mixin plainText {
+	--components-readMore-content-whiteSpace: pre-line;
+}

package/src/components/readMore/vars.scss

@@ -3,4 +3,5 @@
 	--components-readMore-link-backgroudColor: var(--pr-t-elevation-surface-raised);
 	--components-readMore-link-paddingInlineStart: var(--pr-t-spacings-500);
 	--components-readMore-link-insetBlockEnd: var(--pr-t-spacings-50);
+	--components-readMore-content-whiteSpace: normal;
 }

package/src/components/resourceCard/component.scss

@@ -22,7 +22,17 @@
 
 	@at-root ($atRoot) {
 		.resourceCardWrapper {
-			grid-template-columns: repeat(auto-fill, minmax(var(--components-resourceCardWrapper-gridTemplateColumnsMin), 1fr));
+			grid-template-columns:
+				repeat(
+					auto-fill,
+					minmax(
+						min(
+							var(--components-resourceCardWrapper-gridTemplateColumnsMin),
+							100%
+						),
+						1fr
+					)
+				);
 			display: var(--components-resourceCardWrapper-display);
 			flex-direction: column;
 			gap: var(--pr-t-spacings-100);

package/src/components/richText/vars.scss

@@ -10,5 +10,5 @@
 	--components-richTextField-content-resize: var(--components-richTextField-resize, vertical);
 	--components-richTextField-content-height: var(--components-richTextField-height, calc(3lh + var(--pr-t-spacings-200)));
 	--components-richTextField-content-minHeight: var(--components-richTextField-minHeight, calc(2lh + var(--pr-t-spacings-200)));
-	--components-richTextField-content-maxHeight: var(--components-richTextField-maxHeight, 90dvh);
+	--components-richTextField-content-maxHeight: var(--components-richTextField-maxHeight, 90dvb);
 }

package/src/components/segmentedControl/component.scss

@@ -15,6 +15,18 @@
 	gap: var(--commons-divider-width);
 	white-space: var(--components-segmentedControl-whiteSpace);
 
+	.button.mod-disclosure {
+		margin-block: calc(var(--pr-t-spacings-25) * -1);
+
+		&:focus-visible {
+			@include a11y.focusVisible($offset: 0);
+		}
+
+		&:last-child {
+			margin-inline-end: calc(var(--pr-t-spacings-100) * -1);
+		}
+	}
+
 	@at-root ($atRoot) {
 		.segmentedControl-item-input {
 			@include a11y.mask;

package/src/components/simpleSelect/mods.scss

@@ -45,7 +45,7 @@
 
 @mixin filterPill {
 	inline-size: 26.5rem;
-	max-inline-size: calc(100vw - 2.5rem);
+	max-inline-size: calc(100vi - 2.5rem);
 
 	.simpleSelect-field {
 		position: relative;

package/src/components/switchField/component.scss

@@ -37,7 +37,7 @@
 				border-radius: var(--pr-t-border-radius-full);
 				inset-inline-start: 0;
 				inset-block-start: 0;
-				transition-property: left;
+				transition-property: inset-inline-start;
 				transition-duration: var(--commons-animations-durations-fast);
 				transition-timing-function: cubic-bezier(0.5, 1, 0.5, 1.5);
 				box-shadow: var(--pr-t-elevation-shadow-overflow);

package/src/components/textField/component.scss

@@ -71,7 +71,7 @@
 			&:is(textarea, div) {
 				max-block-size: var(--component-textField-maxHeight);
 
-				@supports not (height: 1dvh) {
+				@supports not (height: 1dvb) {
 					--component-textField-maxHeight: var(--component-textField-maxHeightFallback);
 				}
 			}
@@ -131,18 +131,32 @@
 		}
 
 		.textField-prefix-lang {
-			min-inline-size: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
+			min-inline-size: var(--component-textField-prefix-lang-minInlineSize);
+			padding-inline-end: var(--pr-t-spacings-100);
 			position: relative;
+			text-align: end;
+
+			&:not(.mod-withCulture) {
+				text-transform: uppercase;
+			}
+
+			&:has(.formLabel-required) {
+				--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50));
+			}
+
+			&.mod-withCulture {
+				--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-600) + var(--pr-t-spacings-50));
+
+				&:has(.formLabel-required) {
+					--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-700) + var(--pr-t-spacings-50));
+				}
+			}
 
 			&::after {
 				content: '';
 				position: absolute;
 				inset: var(--pr-t-spacings-25) 0;
-				border-right: 1px solid var(--palettes-neutral-200);
-			}
-
-			&:has(.formLabel-required) {
-				min-inline-size: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50));
+				border-inline-end: 1px solid var(--palettes-neutral-200);
 			}
 		}
 

package/src/components/textField/mods.scss

@@ -6,6 +6,7 @@
 	--component-textField-font: var(--pr-t-font-body-S);
 	--component-textField-padding: var(--pr-t-spacings-75);
 	--component-textField-affix-size: 1.5rem;
+	--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
 
 	.textField-input-affix-toggle {
 		@include icon.S;
@@ -23,6 +24,20 @@
 	.textField-input-affix-icon {
 		@include icon.S;
 	}
+
+	.textField-prefix-lang {
+		&:has(.formLabel-required) {
+			--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50));
+		}
+
+		&.mod-withCulture {
+			--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-500) + var(--pr-t-spacings-50));
+
+			&:has(.formLabel-required) {
+				--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-600) + var(--pr-t-spacings-50));
+			}
+		}
+	}
 }
 
 @mixin XS {

package/src/components/textField/vars.scss

@@ -10,10 +10,12 @@
 	--component-textField-affix-padding: var(--component-textField-padding);
 	--component-textField-affix-size: 1.75rem;
 	--component-textField-scrollMargin: 88rem; // un nombre arbitraire suffit pour scrollIntoView
-	--component-textField-maxHeight: 90dvh;
+	--component-textField-maxHeight: 90dvb;
+	// stylelint-disable-next-line unit-layout-mappings -- Physical fallback: browsers without `dvb` do not support `vb` either.
 	--component-textField-maxHeightFallback: 90vh;
 	--component-textField-borderRadius: var(--pr-t-border-radius-input);
 	--component-textField-width: auto;
+	--component-textField-prefix-lang-minInlineSize: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
 
 	// Deprecated
 	--component-textField-fontSize: var(--pr-t-font-body-M-fontSize);

package/src/components/toast/vars.scss

@@ -5,7 +5,7 @@
 	--components-toasts-left: var(--pr-t-spacings-300);
 	--components-toasts-bottom: var(--pr-t-spacings-300);
 	--components-toasts-margin-bottom: var(--pr-t-spacings-50);
-	--components-toasts-maxwidth: min(22.5rem, calc(100dvw - (var(--components-toasts-right) * 2)));
+	--components-toasts-maxwidth: min(22.5rem, calc(100dvi - (var(--components-toasts-right) * 2)));
 	--components-toasts-inset: var(--components-toasts-top) var(--components-toasts-right) auto auto;
 	--components-toasts-footerHeight: 4.5rem;
 

package/src/components/tooltip/component.scss

@@ -26,7 +26,7 @@
 
 	@at-root ($atRoot) {
 		// Prevent Safari to display a native tooltip
-		[luTooltipWhenEllipsis] {
+		.tooltip_trigger.is-whenEllipsis {
 			@supports (background-image: -webkit-named-image(i)) {
 				@media (hover: hover) {
 					&::after {

package/src/components/userPopover/component.scss

@@ -5,7 +5,7 @@
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	inline-size: 23.5rem;
-	max-inline-size: calc(100vw - var(--pr-t-spacings-200) * 2);
+	max-inline-size: calc(100vi - var(--pr-t-spacings-200) * 2);
 	padding: var(--pr-t-spacings-200) !important;
 
 	@at-root ($atRoot) {