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

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/filterPill/component.scss

@@ -106,7 +106,6 @@
 			font-weight: var(--components-filterPill-label-fontWeight);
 			overflow: hidden;
 			text-overflow: ellipsis;
-			outline: none;
 			text-align: center;
 			flex-shrink: 0;
 			max-inline-size: var(--components-filterPill-label-maxInlineSize);
@@ -170,10 +169,6 @@
 			cursor: var(--components-filterPill-label-cursor);
 			max-inline-size: 15rem;
 
-			&:focus-visible {
-				outline: none;
-			}
-
 			.lucca-icon {
 				color: var(--components-filterPill-arrowColor);
 			}

package/src/components/filterPill/index.scss

@@ -19,11 +19,6 @@
 			@include active;
 		}
 
-		&:has(.filterPill-label:focus-visible),
-		&:has(.filterPill-value:focus-visible) {
-			@include focusVisible;
-		}
-
 		&[aria-expanded='true'] {
 			@include opened;
 		}

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,7 +116,7 @@
 @forward 'bubbleIllustration';
 @forward 'bubbleIcon';
 @forward 'softwareIcon';
-@forward 'icon';
+@forward 'priorityLevels';
 @forward 'progressStepper';
 @forward 'activityFeed';
 @forward 'impersonation';

package/src/components/indexTable/component.scss

@@ -277,6 +277,8 @@
 
 	.statusBadge,
 	.tag,
+	lu-tag,
+	pr-tag,
 	.avatar {
 		vertical-align: top;
 	}

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/listboxOption/component.scss

@@ -66,6 +66,11 @@
 			}
 		}
 
+		.listboxOption-content-value {
+			flex-grow: 1;
+			min-inline-size: 0;
+		}
+
 		.listboxOption-content-checkboxField.checkboxField {
 			margin-block-start: var(--pr-t-spacings-25);
 			display: var(--components-listboxOption-content-checkboxField-display);

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);
@@ -57,6 +62,12 @@
 		overflow: auto;
 	}
 
+	.multiSelect-field-icon {
+		&.mod-search {
+			margin-inline-start: auto;
+		}
+	}
+
 	.lu-picker-content {
 		animation: none;
 		box-shadow: none;
@@ -70,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);

package/src/components/priorityLevels/component.scss

@@ -0,0 +1,38 @@
+@use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	display: flex;
+	align-items: center;
+	color: var(--pr-t-color-text);
+	font: var(--components-priorityLevels-font);
+	gap: var(--components-priorityLevels-gap);
+	min-block-size: var(--components-priorityLevels-minBlockSize);
+
+	@at-root ($atRoot) {
+		.priorityLevels-icon {
+			display: inline-flex;
+
+			&:focus-visible {
+				@include a11y.focusVisible($borderRadius: var(--pr-t-border-radius-small));
+			}
+		}
+
+		.priorityLevels-icon .lucca-icon {
+			&::before {
+				background:
+					linear-gradient(
+						to right,
+						var(--components-priorityLevels-icon-color1) 0%,
+						var(--components-priorityLevels-icon-color1) calc(100% / 3),
+						var(--components-priorityLevels-icon-color2) calc(100% / 3),
+						var(--components-priorityLevels-icon-color2) calc(100% / 3 * 2),
+						var(--components-priorityLevels-icon-color3) calc(100% / 3 * 2),
+						var(--components-priorityLevels-icon-color3) 100%
+					);
+				background-clip: text;
+				color: transparent;
+			}
+		}
+	}
+}

package/src/components/priorityLevels/index.scss

@@ -0,0 +1,30 @@
+@use 'exports' as *;
+
+.priorityLevels {
+	@layer components {
+		@include vars;
+		@include component;
+	}
+
+	@layer mods {
+		&.mod-low {
+			@include low;
+		}
+
+		&.mod-medium {
+			@include medium;
+		}
+
+		&.mod-high {
+			@include high;
+		}
+
+		&.mod-S {
+			@include S;
+		}
+
+		&.mod-L {
+			@include L;
+		}
+	}
+}

package/src/components/priorityLevels/mods.scss

@@ -0,0 +1,28 @@
+@mixin low {
+	--components-priorityLevels-icon-color1: var(--pr-t-color-text);
+	--components-priorityLevels-icon-color2: var(--palettes-neutral-400);
+	--components-priorityLevels-icon-color3: var(--palettes-neutral-400);
+}
+
+@mixin medium {
+	--components-priorityLevels-icon-color1: var(--palettes-warning-800);
+	--components-priorityLevels-icon-color2: var(--palettes-warning-800);
+	--components-priorityLevels-icon-color3: var(--palettes-neutral-400);
+}
+
+@mixin high {
+	--components-priorityLevels-icon-color1: var(--palettes-critical-800);
+	--components-priorityLevels-icon-color2: var(--palettes-critical-800);
+	--components-priorityLevels-icon-color3: var(--palettes-critical-800);
+}
+
+@mixin S {
+	--components-priorityLevels-font: var(--pr-t-font-body-XS);
+	--components-priorityLevels-minBlockSize: var(--pr-t-font-body-XS-lineHeight);
+	--components-priorityLevels-gap: var(--pr-t-spacings-25);
+}
+
+@mixin L {
+	--components-priorityLevels-font: var(--pr-t-font-body-M);
+	--components-priorityLevels-minBlockSize: var(--pr-t-font-body-M-lineHeight);
+}

package/src/components/priorityLevels/vars.scss

@@ -0,0 +1,8 @@
+@mixin vars {
+	--components-priorityLevels-font: var(--pr-t-font-body-S);
+	--components-priorityLevels-minBlockSize: var(--pr-t-font-body-S-lineHeight);
+	--components-priorityLevels-gap: var(--pr-t-spacings-50);
+	--components-priorityLevels-icon-color1: var(--palettes-neutral-400);
+	--components-priorityLevels-icon-color2: var(--palettes-neutral-400);
+	--components-priorityLevels-icon-color3: var(--palettes-neutral-400);
+}

package/src/components/simpleSelect/component.scss

@@ -3,6 +3,7 @@
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: block;
+	inline-size: var(--components-simpleSelect-width);
 
 	@at-root ($atRoot) {
 		.simpleSelect-field {
@@ -48,6 +49,28 @@
 			&::placeholder {
 				color: var(--components-simpleSelect-placeholder);
 			}
+
+			// Below the S breakpoint the trigger is a button instead of a text input, so the native
+			// button chrome (centred text, rounded corners on iOS) has to be stripped for it to keep
+			// sitting on the value the way the input did. An empty button would collapse to no height
+			// and stop covering the value it triggers, hence the stretch.
+			&.mod-button {
+				appearance: none;
+				text-align: start;
+				align-self: stretch;
+				display: flex;
+				align-items: center;
+			}
+		}
+
+		// Stands in for the input placeholder, which a button trigger has no equivalent of. It sets its
+		// own colour rather than inheriting so it survives `colorPicker` making the trigger transparent.
+		.simpleSelect-field-placeholder {
+			color: var(--components-simpleSelect-placeholder);
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: block;
 		}
 
 		.simpleSelect-field-value {

package/src/components/simpleSelect/index.scss

@@ -1,3 +1,5 @@
+@use '@lucca-front/scss/src/commons/config';
+
 @use 'exports' as *;
 
 .simpleSelect {
@@ -26,12 +28,22 @@
 
 		&:has(.simpleSelect-field-input[aria-invalid='true']) {
 			@include invalid;
+
+			.simpleSelect-field:hover {
+				@include invalidHover;
+			}
 		}
 
 		&:has(.simpleSelect-field-input:disabled) {
 			@include disabled;
 		}
 
+		@each $value in config.$fieldsWidth {
+			&.mod-width#{$value} {
+				@include width($value);
+			}
+		}
+
 		&.mod-S {
 			@include S;
 		}
@@ -58,3 +70,9 @@
 		}
 	}
 }
+
+@layer mods {
+	.dialog.mod-select {
+		@include select;
+	}
+}

package/src/components/simpleSelect/mods.scss

@@ -1,6 +1,11 @@
+@use 'sass:math';
 @use '@lucca-front/icons/src/icon/exports' as icon;
 @use '@lucca-front/scss/src/components/clear/exports' as clear;
 
+@mixin width($value) {
+	--components-simpleSelect-width: #{math.div($value, 2) * 1rem};
+}
+
 @mixin S {
 	--components-simpleSelect-font: var(--pr-t-font-body-S);
 	--components-simpleSelect-padding: var(--pr-t-spacings-75);
@@ -65,3 +70,18 @@
 		margin: var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
 	}
 }
+
+@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);
+}

package/src/components/simpleSelect/states.scss

@@ -63,6 +63,10 @@
 	--components-simpleSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical);
 }
 
+@mixin invalidHover {
+	--components-simpleSelect-border-color: var(--pr-t-color-input-border-critical-hover);
+}
+
 @mixin disabled {
 	--components-simpleSelect-background: var(--pr-t-color-input-background-disabled);
 	--components-simpleSelect-placeholder: var(--commons-disabled-placeholder); // Deprecated: no placeholder with disabled state

package/src/components/simpleSelect/vars.scss

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

package/src/components/tableSortable/component.scss

@@ -7,7 +7,8 @@
 	font-weight: var(--components-sortable-fontWeight);
 	vertical-align: top;
 	align-items: flex-end;
-	white-space: wrap;
+	min-inline-size: var(--components-sortable-minInlineSize);
+	max-inline-size: var(--components-sortable-maxInlineSize);
 	inset-inline-start: var(--components-sortable-offset);
 	padding: 0 var(--pr-t-spacings-50);
 	gap: var(--pr-t-spacings-25);
@@ -20,11 +21,16 @@
 	@include button.ghost;
 
 	@at-root ($atRoot) {
+		.tableSortable-label {
+			min-inline-size: 0;
+		}
+
 		.tableSortable-arrows {
 			margin-block-end: var(--components-sortable-arrowsOffset);
 			position: relative;
 			inline-size: 1rem;
 			block-size: 1rem;
+			flex-shrink: 0;
 		}
 
 		.tableSortable-arrows-ascending,

package/src/components/tableSortable/index.scss

@@ -7,6 +7,12 @@
 	}
 }
 
+.tableSortable.mod-ellipsis {
+	@layer mods {
+		@include ellipsis;
+	}
+}
+
 .table-head-row-cell,
 .dataTable-head-row-cell,
 .indexTable-head-row-cell {

package/src/components/tableSortable/mods.scss

@@ -1,3 +1,14 @@
+@use '@lucca-front/scss/src/commons/utils/text';
+
+@mixin ellipsis {
+	--components-sortable-minInlineSize: 0;
+	--components-sortable-maxInlineSize: 100%;
+
+	.tableSortable-label {
+		@include text.ellipsis;
+	}
+}
+
 @mixin sortAlignEnd {
 	--components-sortable-direction: row-reverse;
 	--components-sortable-offset: var(--pr-t-spacings-50);