@lucca-front/scss 22.0.5 → 22.1.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "22.0.5",
+  "version": "22.1.0-rc.2",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -24,7 +24,7 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "22.0.5",
-    "@lucca/prisme": "22.0.5"
+    "@lucca-front/icons": "22.1.0-rc.2",
+    "@lucca/prisme": "22.1.0-rc.2"
   }
 }

package/src/commons/config.scss

@@ -184,7 +184,7 @@ $palettesAssets: (
 	'timmi': ('brand': 'brand', 'secondary': 'glacier')
 );
 
-$fieldsWidth: 20, 30, 40, 50, 60 !default;
+$fieldsWidth: 10, 20, 30, 40, 50, 60 !default;
 
 // Palettes
 

package/src/commons/utils/highlight-prisme.scss

@@ -20,6 +20,7 @@
 	.newBadge,
 	.numericBadge,
 	.plgPush,
+	.priorityLevels,
 	.readMore,
 	.statusBadge,
 	.tag,
@@ -155,6 +156,7 @@
 	lu-new-badge,
 	lu-numeric-badge,
 	lu-plg-push .plgPush,
+	lu-priority-levels,
 	lu-read-more,
 	lu-status-badge,
 	lu-tag .tag,

package/src/components/activityFeed/component.scss

@@ -1,5 +1,6 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 @use '@lucca-front/scss/src/commons/utils/reset';
+@use '@lucca-front/icons/src/icon/exports' as icons;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	list-style-type: '';
@@ -36,6 +37,11 @@
 		}
 
 		.activityFeed-step-state {
+			@include icons.S;
+
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			inline-size: var(--pr-t-spacings-400);
 			block-size: var(--pr-t-spacings-400);
 			border-radius: var(--pr-t-border-radius-full);
@@ -44,12 +50,8 @@
 
 			&::before {
 				color: var(--palettes-700, var(--palettes-neutral-700));
-				font-size: calc(1.5 * var(--pr-t-font-body-M-fontSize));
+				font-size: var(--icon-size);
 				block-size: var(--pr-t-font-body-M-lineHeight);
-				inset: 0;
-				margin: auto;
-				position: absolute;
-				text-align: center;
 			}
 		}
 

package/src/components/activityFeed/index.scss

@@ -34,6 +34,10 @@
 		@include critical;
 	}
 
+	.activityFeed-step-state.mod-icon {
+		@include withIcon;
+	}
+
 	.activityFeed-content-update-item {
 		&:has(.activityFeed-content-update-item-before:empty, .activityFeed-content-update-item-after:empty) {
 			@include single;

package/src/components/activityFeed/states.scss

@@ -24,3 +24,9 @@
 		@include icon.generate('sign_close');
 	}
 }
+
+@mixin withIcon {
+	@include color.palette('product');
+
+	color: var(--palettes-product-700);
+}

package/src/components/dataTableSticked/mods.scss

@@ -155,6 +155,12 @@
 			}
 		}
 	}
+
+	.dataTable-body-row.mod-group .dataTable-body-row-cell-expand {
+		position: sticky;
+		inset-inline-start: var(--components-dataTable-cell-padding-inline);
+		inline-size: fit-content;
+	}
 }
 
 @mixin stickyColumnBorder {

package/src/components/dialog/component.scss

@@ -6,7 +6,7 @@
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	animation-name: var(--components-dialog-animationOpening);
-	animation-duration: var(--commons-animations-durations-standard);
+	animation-duration: var(--components-dialog-animationDuration);
 	inset: var(--components-dialog-inset);
 	inline-size: var(--components-dialog-width);
 	block-size: var(--components-dialog-height);
@@ -21,7 +21,7 @@
 	max-inline-size: var(--components-dialog-maxWidth) !important;
 	max-block-size: var(--components-dialog-maxHeight) !important;
 	transition-property: scale, translate, inline-size, block-size, inset;
-	transition-duration: var(--commons-animations-durations-standard);
+	transition-duration: var(--components-dialog-animationDuration);
 	overflow: hidden;
 	translate: var(--components-dialog-translateX) var(--components-dialog-translateY);
 	scale: var(--components-dialog-scale);
@@ -147,10 +147,12 @@
 			position: var(--components-dialog-inside-header-button-position);
 			inset-block-start: var(--components-dialog-inside-header-button-insetBlockStart);
 			inset-inline-end: var(--components-dialog-inside-header-button-insetInlineEnd);
+			justify-self: var(--components-dialog-inside-header-button-justifySelf);
 		}
 
 		.dialog-inside-header-content {
 			grid-area: content;
+			padding-block-start: var(--components-dialog-inside-header-content-paddingBlockStart);
 
 			&:empty {
 				display: none;
@@ -166,6 +168,7 @@
 			flex-grow: var(--components-dialog-insideContent-flexGrow);
 			display: block;
 			outline: none;
+			isolation: isolate;
 
 			&:empty {
 				display: none;
@@ -177,7 +180,7 @@
 		}
 
 		.dialog-inside-header-container-title {
-			font: var(--pr-t-font-heading-2);
+			font: var(--components-dialog-insideHeaderTitleFont);
 			padding: var(--components-dialog-insideHeaderTitlePadding);
 			text-align: var(--components-dialog-insideHeaderTitleAlign);
 			margin: 0;

package/src/components/dialog/mods.scss

@@ -79,10 +79,10 @@
 @mixin sheet {
 	--components-dialog-width: 100%;
 	--components-dialog-maxWidth: none;
-	--components-dialog-maxHeight: calc(100% - var(--pr-t-spacings-150));
+	--components-dialog-maxHeight: min(calc(100% - var(--pr-t-spacings-150)), calc(var(--components-dialog-visibleViewportBlockSize) - var(--pr-t-spacings-150)));
 	--components-dialog-maxHeightFallback: var(--components-dialog-maxHeight);
 	--components-dialog-borderRadius: var(--pr-t-border-radius-structure) var(--pr-t-border-radius-structure) 0 0;
-	--components-dialog-inset: auto 0 0;
+	--components-dialog-inset: auto 0 var(--components-dialog-insetBlockEnd) 0;
 }
 
 @mixin sheetNarrow {

package/src/components/dialog/vars.scss

@@ -8,11 +8,15 @@
 	--components-dialog-maxHeightFallback: calc(100vh - (var(--pr-t-spacings-200) * 2));
 	--components-dialog-borderRadius: var(--pr-t-border-radius-structure);
 	--components-dialog-inset: 0 var(--commons-pushPanel-inlineSize) 0 0;
+	--components-dialog-insetBlockEnd: 0px;
+	--components-dialog-visibleViewportBlockSize: 100%;
 	--components-dialog-animationOpening: scaleIn;
+	--components-dialog-animationDuration: var(--commons-animations-durations-standard);
 	--components-dialog-insideHeaderAreas:
 		'container close'
 		'content content';
 	--components-dialog-insideHeaderTitleAlign: left;
+	--components-dialog-insideHeaderTitleFont: var(--pr-t-font-heading-2);
 	--components-dialog-insideHeaderTitlePadding: calc(var(--pr-t-spacings-50) / 2) 0;
 	--components-dialog-insideHeaderButtonDisplay: flex;
 	--components-dialog-insideHeaderLinkDisplay: none;
@@ -32,6 +36,7 @@
 	--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-inside-header-content-paddingBlockStart: 0px;
 	--components-dialog-inside-header-button-position: static;
 	--components-dialog-inside-backgroundImage: none;
 	--components-dialog-minBlockSize: 0px;
@@ -41,6 +46,7 @@
 	--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-insetInlineEnd: var(--pr-t-spacings-300);
+	--components-dialog-inside-header-button-justifySelf: auto;
 	--components-dialog-inside-header-marginBlock: 0px;
 	--components-dialog-inside-footer-marginBlock: 0px;
 	--components-dialog-inside-footer-actions-button-icon-menuDots-display: block;

package/src/components/fancyBox/component.scss

@@ -9,7 +9,91 @@
 	margin-inline: var(--components-fancyBox-marginInline);
 	contain: layout;
 
+	&:has(.fancyBox-content-backgroundEndStart),
+	&:has(.fancyBox-content-backgroundStartEnd),
+	&:has(.fancyBox-content-foregroundStartEnd),
+	&:has(.fancyBox-content-foregroundEndStart) {
+		.fancyBox-content {
+			&::before,
+			&::after {
+				content: none;
+			}
+		}
+	}
+
 	@at-root ($atRoot) {
+		:is(
+			.fancyBox-content-backgroundEndStart,
+			.fancyBox-content-backgroundStartEnd,
+			.fancyBox-content-foregroundStartEnd,
+			.fancyBox-content-foregroundEndStart
+		) {
+			position: absolute;
+			transition-duration: var(--commons-animations-durations-slow);
+			pointer-events: none;
+			transition-property: inline-size, block-size, inset;
+
+			svg {
+				display: block;
+				inline-size: 100%;
+				block-size: auto;
+			}
+		}
+
+		.fancyBox-content-backgroundEndStart,
+		.fancyBox-content-backgroundStartEnd {
+			z-index: -1;
+		}
+
+		.fancyBox-content-backgroundEndStart {
+			inset-block-end: var(--components-fancyBox-content-backgroundEndStart-insetBlockEnd);
+			inset-inline-start: var(--components-fancyBox-content-backgroundEndStart-insetInlineStart);
+			inline-size: var(--components-fancyBox-content-backgroundEndStart-inlineSize);
+			block-size: var(--components-fancyBox-content-backgroundEndStart-blockSize);
+		}
+
+		.fancyBox-content-backgroundStartEnd {
+			inset-block-start: var(--components-fancyBox-content-backgroundStartEnd-insetBlockStart);
+			inset-inline-end: var(--components-fancyBox-content-backgroundStartEnd-insetInlineEnd);
+			inline-size: var(--components-fancyBox-content-backgroundStartEnd-inlineSize);
+			block-size: var(--components-fancyBox-content-backgroundStartEnd-blockSize);
+		}
+
+		.fancyBox-content-foregroundStartEnd {
+			inset-block-start: var(--components-fancyBox-content-foregroundStartEnd-insetBlockStart);
+			inset-inline-end: var(--components-fancyBox-content-foregroundStartEnd-insetInlineEnd);
+			inline-size: var(--components-fancyBox-content-foregroundStartEnd-inlineSize);
+			block-size: var(--components-fancyBox-content-foregroundStartEnd-blockSize);
+		}
+
+		.fancyBox-content-foregroundEndStart {
+			inset-block-end: var(--components-fancyBox-content-foregroundEndStart-insetBlockEnd);
+			inset-inline-start: var(--components-fancyBox-content-foregroundEndStart-insetInlineStart);
+			inline-size: var(--components-fancyBox-content-foregroundEndStart-inlineSize);
+			block-size: var(--components-fancyBox-content-foregroundEndStart-blockSize);
+		}
+
+		// deprecated
+		.fancyBox-content-foreground {
+			inset-block-start: var(--components-fancyBox-content-foregroundStartEnd-insetBlockStart);
+			inset-inline-end: var(--components-fancyBox-content-foregroundStartEnd-insetInlineEnd);
+			inline-size: var(--components-fancyBox-content-foregroundStartEnd-inlineSize);
+			block-size: var(--components-fancyBox-content-foregroundStartEnd-blockSize);
+			background-repeat: no-repeat;
+			background-image: var(--components-fancyBox-foreground);
+			background-size: contain;
+			position: absolute;
+			transition-duration: var(--commons-animations-durations-slow);
+			pointer-events: none;
+			transition-property: inline-size, block-size, inset;
+
+			svg {
+				display: block;
+				inline-size: 100%;
+				block-size: auto;
+			}
+		}
+
 		.fancyBox-content {
 			position: relative;
 			min-block-size: var(--components-fancyBox-contentMinBlockSize);
@@ -25,6 +109,7 @@
 			align-items: center;
 			justify-content: center;
 
+			// deprecated
 			&::before,
 			&::after {
 				content: '';
@@ -38,6 +123,7 @@
 				pointer-events: none;
 			}
 
+			// deprecated
 			&::before {
 				transition-property: inline-size, block-size, inset-block-end, inset-inline-start;
 				inset-block-end: var(--components-fancyBox-offsetBlock);
@@ -45,6 +131,7 @@
 				background-image: var(--components-fancyBox-background-left);
 			}
 
+			// deprecated
 			&::after {
 				transition-property: inline-size, block-size, inset-block-start, inset-inline-end;
 				inset-block-start: var(--components-fancyBox-offsetBlock);
@@ -52,19 +139,5 @@
 				background-image: var(--components-fancyBox-background-right);
 			}
 		}
-
-		.fancyBox-content-foreground {
-			position: absolute;
-			inline-size: var(--components-fancyBox-imageWidth);
-			block-size: var(--components-fancyBox-imageHeight);
-			background-repeat: no-repeat;
-			inset-block-start: var(--components-fancyBox-offsetBlock);
-			inset-inline-end: var(--components-fancyBox-offsetInline);
-			background-image: var(--components-fancyBox-foreground);
-			background-size: contain;
-			transition-property: inline-size, block-size, inset-block-start, inset-inline-end;
-			transition-duration: var(--commons-animations-durations-slow);
-			pointer-events: none;
-		}
 	}
 }

package/src/components/fancyBox/mods.scss

@@ -1,16 +1,16 @@
 @mixin narrow {
-	--components-fancyBox-imageWidth: 11.25rem;
-	--components-fancyBox-imageHeight: 9rem;
-	--components-fancyBox-offsetInline: -8.75rem;
-	--components-fancyBox-offsetBlock: -0.5rem;
+	--components-fancyBox-content-foregroundStartEnd-inlineSize: 11.25rem;
+	--components-fancyBox-content-foregroundStartEnd-blockSize: 9rem;
+	--components-fancyBox-content-foregroundStartEnd-insetInlineEnd: -8.75rem;
+	--components-fancyBox-content-foregroundStartEnd-insetBlockStart: -0.5rem;
 }
 
 @mixin S {
-	--components-fancyBox-offsetInline: -9rem;
-	--components-fancyBox-offsetBlock: -0.75rem;
-	--components-fancyBox-imageWidth: 9.375rem;
-	--components-fancyBox-imageHeight: 7.5rem;
 	--components-fancyBox-contentMinInlineSize: min(17rem, 100%);
 	--components-fancyBox-contentPaddingBlock: var(--pr-t-spacings-150);
 	--components-fancyBox-contentPaddingInline: var(--pr-t-spacings-200);
+	--components-fancyBox-content-foregroundStartEnd-insetInlineEnd: -9rem;
+	--components-fancyBox-content-foregroundStartEnd-insetBlockStart: -0.75rem;
+	--components-fancyBox-content-foregroundStartEnd-inlineSize: 9.375rem;
+	--components-fancyBox-content-foregroundStartEnd-blockSize: 7.5rem;
 }

package/src/components/fancyBox/vars.scss

@@ -1,19 +1,37 @@
 @mixin vars {
 	--components-fancyBox-paddingInline: var(--pr-t-spacings-200);
 	--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);
 
-	// Visuals
+	--components-fancyBox-content-foregroundStartEnd-insetBlockStart: -1.5rem;
+	--components-fancyBox-content-foregroundStartEnd-insetInlineEnd: -10rem;
+	--components-fancyBox-content-foregroundStartEnd-inlineSize: 12.5rem;
+	--components-fancyBox-content-foregroundStartEnd-blockSize: 10rem;
+
+	--components-fancyBox-content-backgroundStartEnd-insetBlockStart: var(--components-fancyBox-content-foregroundStartEnd-insetBlockStart);
+	--components-fancyBox-content-backgroundStartEnd-insetInlineEnd: var(--components-fancyBox-content-foregroundStartEnd-insetInlineEnd);
+	--components-fancyBox-content-backgroundStartEnd-inlineSize: var(--components-fancyBox-content-foregroundStartEnd-inlineSize);
+	--components-fancyBox-content-backgroundStartEnd-blockSize: var(--components-fancyBox-content-foregroundStartEnd-blockSize);
+
+	--components-fancyBox-content-foregroundEndStart-insetBlockEnd: var(--components-fancyBox-content-foregroundStartEnd-insetBlockStart);
+	--components-fancyBox-content-foregroundEndStart-insetInlineStart: var(--components-fancyBox-content-foregroundStartEnd-insetInlineEnd);
+	--components-fancyBox-content-foregroundEndStart-inlineSize: var(--components-fancyBox-content-foregroundStartEnd-inlineSize);
+	--components-fancyBox-content-foregroundEndStart-blockSize: var(--components-fancyBox-content-foregroundStartEnd-blockSize);
+
+	--components-fancyBox-content-backgroundEndStart-insetBlockEnd: var(--components-fancyBox-content-foregroundStartEnd-insetBlockStart);
+	--components-fancyBox-content-backgroundEndStart-insetInlineStart: var(--components-fancyBox-content-foregroundStartEnd-insetInlineEnd);
+	--components-fancyBox-content-backgroundEndStart-inlineSize: var(--components-fancyBox-content-foregroundStartEnd-inlineSize);
+	--components-fancyBox-content-backgroundEndStart-blockSize: var(--components-fancyBox-content-foregroundStartEnd-blockSize);
+
+	// Deprecated
+	--components-fancyBox-offsetInline: var(--components-fancyBox-content-foregroundStartEnd-insetInlineEnd);
+	--components-fancyBox-offsetBlock: var(--components-fancyBox-content-foregroundStartEnd-insetBlockStart);
+	--components-fancyBox-imageWidth: var(--components-fancyBox-content-foregroundStartEnd-inlineSize);
+	--components-fancyBox-imageHeight: var(--components-fancyBox-content-foregroundStartEnd-blockSize);
 	--components-fancyBox-background-left: none;
 	--components-fancyBox-background-right: none;
 	--components-fancyBox-foreground: none;
-	--components-fancyBox-imageWidth: 12.5rem;
-	--components-fancyBox-imageHeight: 10rem;
-	--components-fancyBox-offsetInline: -10rem;
-	--components-fancyBox-offsetBlock: -1.5rem;
 }

package/src/components/highlightData/index.scss

@@ -15,6 +15,18 @@
 			@include dark;
 		}
 
+		&.palette-success {
+			@include success;
+		}
+
+		&.palette-warning {
+			@include warning;
+		}
+
+		&.palette-critical {
+			@include critical;
+		}
+
 		&.mod-valueFirst {
 			@include valueFirst;
 		}

package/src/components/highlightData/mods.scss

@@ -4,6 +4,33 @@
 
 @mixin dark {
 	--components-highlightData-background: var(--palettes-100, var(--palettes-product-100));
+	--palettes-assets-primary: var(--components-highlightData-bubble-primary-dark);
+	--palettes-assets-secondary: var(--components-highlightData-bubble-secondary-dark);
+	--palettes-assets-brand: var(--components-highlightData-bubble-brand-dark);
+}
+
+@mixin success {
+	--components-highlightData-bubble-primary-light: var(--palettes-success-100);
+	--components-highlightData-bubble-primary-dark: var(--palettes-success-300);
+	--components-highlightData-bubble-secondary-light: var(--palettes-brand-300);
+	--components-highlightData-bubble-secondary-dark: var(--palettes-brand-100);
+	--components-highlightData-bubble-brand-dark: var(--palettes-assets-primary-light);
+}
+
+@mixin warning {
+	--components-highlightData-bubble-primary-light: var(--palettes-warning-100);
+	--components-highlightData-bubble-primary-dark: var(--palettes-warning-300);
+	--components-highlightData-bubble-secondary-light: var(--palettes-brand-300);
+	--components-highlightData-bubble-secondary-dark: var(--palettes-assets-brand-lighter);
+	--components-highlightData-bubble-brand-dark: var(--palettes-assets-primary-dark);
+}
+
+@mixin critical {
+	--components-highlightData-bubble-primary-light: var(--palettes-critical-100);
+	--components-highlightData-bubble-primary-dark: var(--palettes-critical-300);
+	--components-highlightData-bubble-secondary-light: var(--palettes-brand-300);
+	--components-highlightData-bubble-secondary-dark: var(--palettes-assets-brand-lighter);
+	--components-highlightData-bubble-brand-dark: var(--palettes-brand-300);
 }
 
 @mixin valueFirst {

package/src/components/highlightData/vars.scss

@@ -18,4 +18,13 @@
 	--components-highlightData-illustrations-width: 86px;
 	--components-highlightData-illustrations-height: 72px;
 	--components-highlightData-illustrations-display: grid;
+	--components-highlightData-bubble-primary-light: var(--palettes-assets-primary-light);
+	--components-highlightData-bubble-primary-dark: var(--palettes-assets-primary-dark);
+	--components-highlightData-bubble-secondary-light: var(--palettes-assets-secondary-light);
+	--components-highlightData-bubble-secondary-dark: var(--palettes-assets-secondary-lighter);
+	--components-highlightData-bubble-brand-light: var(--palettes-assets-brand-dark);
+	--components-highlightData-bubble-brand-dark: var(--palettes-assets-brand-lighter);
+	--palettes-assets-primary: var(--components-highlightData-bubble-primary-light);
+	--palettes-assets-secondary: var(--components-highlightData-bubble-secondary-light);
+	--palettes-assets-brand: var(--components-highlightData-bubble-brand-light);
 }

package/src/components/index.scss

@@ -116,6 +116,7 @@
 @forward 'bubbleIllustration';
 @forward 'bubbleIcon';
 @forward 'softwareIcon';
+@forward 'priorityLevels';
 @forward 'progressStepper';
 @forward 'activityFeed';
 @forward 'impersonation';

package/src/components/link/index.scss

@@ -20,6 +20,10 @@
 			}
 		}
 
+		&.mod-neutral {
+			@include neutral;
+		}
+
 		@include media.isNotTouchDevice {
 			&.mod-hiddenIcon {
 				&:not(:hover, :focus-visible) {

package/src/components/link/mods.scss

@@ -10,6 +10,11 @@
 	--components-link-color-hover: var(--palettes-brand-800);
 }
 
+@mixin neutral {
+	--components-link-color: var(--pr-t-color-text);
+	--components-link-color-hover: var(--palettes-neutral-900);
+}
+
 @mixin hasLinkText {
 	--components-link-textDecoration: none;
 }

package/src/components/multiSelect/component.scss

@@ -8,6 +8,7 @@
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: flex;
+	inline-size: var(--components-multiSelect-width);
 	box-shadow: 0 0 0 1px var(--components-multiSelect-border-color);
 	background-color: var(--components-multiSelect-background);
 	border-radius: var(--pr-t-border-radius-input);
@@ -69,6 +70,22 @@
 			&::placeholder {
 				color: var(--components-multiSelect-placeholder);
 			}
+
+			// Below the S breakpoint the trigger is a button instead of a text input, so the native
+			// button chrome has to be stripped and its text — standing in for the placeholder, which a
+			// button has no equivalent of — coloured and aligned the way the placeholder was.
+			&.mod-button {
+				appearance: none;
+				text-align: start;
+				color: var(--components-multiSelect-placeholder);
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+
+				&:empty {
+					@include a11y.mask;
+				}
+			}
 		}
 
 		.multipleSelect-displayer-label {

package/src/components/multiSelect/index.scss

@@ -1,3 +1,5 @@
+@use '@lucca-front/scss/src/commons/config';
+
 @use 'exports' as *;
 
 .multiSelect {
@@ -7,6 +9,12 @@
 	}
 
 	@layer mods {
+		@each $value in config.$fieldsWidth {
+			&.mod-width#{$value} {
+				@include width($value);
+			}
+		}
+
 		&.mod-S {
 			@include S;
 		}
@@ -41,6 +49,10 @@
 
 		&:has(.multipleSelect-displayer-search[aria-invalid='true']) {
 			@include invalid;
+
+			&:hover {
+				@include invalidHover;
+			}
 		}
 
 		&:has(.multipleSelect-displayer-search:disabled) {
@@ -73,3 +85,9 @@
 		}
 	}
 }
+
+@layer mods {
+	.dialog.mod-select {
+		@include select;
+	}
+}

package/src/components/multiSelect/mods.scss

@@ -1,9 +1,14 @@
+@use 'sass:math';
 @use '@lucca-front/icons/src/icon/exports' as icon;
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/components/clear/exports' as clear;
 @use '@lucca-front/scss/src/components/chip/exports' as chip;
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
 
+@mixin width($value) {
+	--components-multiSelect-width: #{math.div($value, 2) * 1rem};
+}
+
 @mixin S {
 	--components-multiSelect-font: var(--pr-t-font-body-S);
 	--components-multiSelect-padding: var(--pr-t-spacings-75);
@@ -76,3 +81,31 @@
 		}
 	}
 }
+
+@mixin select {
+	--components-dialog-animationDuration: 0s;
+	--components-dialog-insideHeaderTitleAlign: center;
+	--components-dialog-insideHeaderTitleFont: var(--pr-t-font-heading-4);
+	--components-dialog-insideHeaderColumns: 1fr auto 1fr;
+	--components-dialog-inside-header-button-justifySelf: end;
+	--components-dialog-insideHeaderAreas:
+		'spacer  container close  '
+		'content content   content';
+	--components-dialog-inside-header-paddingInline: var(--pr-t-spacings-200);
+	--components-dialog-inside-header-content-paddingBlockStart: var(--pr-t-spacings-100);
+	--components-dialog-insideContent-paddingInline: var(--pr-t-spacings-50);
+	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-50);
+
+	// The sheet is how the select is reached on a touch device, where there is no hover to reveal
+	// either the tree's onlyParent/onlyChildren buttons or a group's « select all » link: inside a
+	// sheet both are shown for good. The tree buttons also leave their absolute position on the way,
+	// so that being there all the time shortens the option's label instead of covering it.
+	.optionItem-icons {
+		position: static;
+		opacity: 1;
+	}
+
+	.listboxOption-content {
+		--components-listboxOption-content-link-opacity: 1;
+	}
+}

package/src/components/multiSelect/states.scss

@@ -11,6 +11,10 @@
 	--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical);
 }
 
+@mixin invalidHover {
+	--components-multiSelect-border-color: var(--pr-t-color-input-border-critical-hover);
+}
+
 @mixin disabled {
 	--components-multiSelect-background: var(--pr-t-color-input-background-disabled);
 	--components-multiSelect-placeholder: var(--commons-disabled-placeholder);

package/src/components/multiSelect/vars.scss

@@ -1,4 +1,5 @@
 @mixin vars {
+	--components-multiSelect-width: auto;
 	--components-multiSelect-font: var(--pr-t-font-body-M);
 	--components-multiSelect-padding: var(--pr-t-spacings-100);
 	--components-multiSelect-gap: var(--pr-t-spacings-100);