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

package/src/components/link/vars.scss

@@ -5,4 +5,5 @@
 	--components-link-color-hover: var(--commons-text-link-hover);
 	--components-link-cursor: pointer;
 	--components-link-icon-marginInlineStart: 0;
+	--components-link-icon-opacity: 1;
 }

package/src/components/listing/component.scss

@@ -30,7 +30,7 @@
 			&::before {
 				content: var(--components-listing-item-before-content);
 				border-inline-start: var(--commons-divider-border);
-				height: 0.75lh;
+				block-size: 0.75lh;
 				align-self: center;
 			}
 		}
@@ -59,7 +59,7 @@
 		.listing-item-icon {
 			inline-size: var(--pr-t-spacings-250);
 			aspect-ratio: 1;
-			margin-top: var(--pr-t-spacings-25);
+			margin-block-start: var(--pr-t-spacings-25);
 			background-color: var(--components-listing-item-icon-backgroundColor);
 			color: var(--palettes-700, var(--palettes-neutral-700));
 			border-radius: var(--pr-t-border-radius-full);

package/src/components/mobilePush/component.scss

@@ -58,7 +58,7 @@
 
 		.mobilePush-content-downloadApps-link-badge {
 			display: block;
-			height: 1.75rem;
+			block-size: 1.75rem;
 		}
 	}
 }

package/src/components/multiSelect/component.scss

@@ -32,6 +32,13 @@
 			flex: 1;
 		}
 
+		.multipleSelect-displayer-suffix {
+			display: var(--components-multiSelect-displayer-suffix-display);
+			gap: var(--pr-t-spacings-50);
+			flex: 1;
+			order: 1;
+		}
+
 		.multipleSelect-displayer-chip.chip {
 			min-inline-size: 0;
 
@@ -92,5 +99,9 @@
 		.multipleSelect-pill-displayer-label {
 			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
+
+		.multiSelect-field-icon {
+			order: 1;
+		}
 	}
 }

package/src/components/multiSelect/index.scss

@@ -23,10 +23,16 @@
 					@include filterPillDisplayerFocused;
 				}
 			}
+
+			&.is-selected {
+				@include filterPillSelected;
+			}
 		}
 
-		&.is-selected {
-			@include selected;
+		&:not(.mod-filterPill) {
+			&.is-selected {
+				@include selected;
+			}
 		}
 
 		&:has(.multipleSelect-displayer-search:focus-visible) {

package/src/components/multiSelect/mods.scss

@@ -37,6 +37,8 @@
 }
 
 @mixin filterPill {
+	--components-multiSelect-displayer-suffix-display: flex;
+
 	flex-direction: column;
 	align-items: stretch;
 	box-shadow: none;

package/src/components/multiSelect/states.scss

@@ -42,8 +42,16 @@
 
 @mixin selected {
 	.multipleSelect-displayer-search {
-		&[readonly],
-		&:not(:focus) {
+		&:not(:focus),
+		&[readonly] {
+			@include a11y.mask;
+		}
+	}
+}
+
+@mixin filterPillSelected {
+	.multipleSelect-displayer-search {
+		&[readonly] {
 			@include a11y.mask;
 		}
 	}

package/src/components/multiSelect/vars.scss

@@ -6,4 +6,5 @@
 	--components-multiSelect-border-color: var(--pr-t-color-input-border);
 	--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder);
 	--components-multiSelect-arrow-color: var(--pr-t-color-input-icon);
+	--components-multiSelect-displayer-suffix-display: contents;
 }

package/src/components/numericBadge/component.scss

@@ -8,8 +8,6 @@
 	min-inline-size: var(--components-numericBadge-size);
 	padding: var(--pr-t-spacings-50);
 	font: var(--components-numericBadge-font);
-	font-size: var(--components-numericBadge-fontSize); // Deprecated
-	line-height: var(--components-numericBadge-lineHeight); // Deprecated
 	font-weight: var(--pr-t-font-fontWeight-semibold);
 	background-color: var(--components-numericBadge-background);
 	color: var(--components-numericBadge-color);

package/src/components/numericBadge/mods.scss

@@ -4,30 +4,18 @@
 	--components-numericBadge-size: 1.5rem;
 	--components-numericBadge-borderRadius: var(--pr-t-border-radius-default);
 	--components-numericBadge-font: var(--pr-t-font-body-S);
-
-	// Deprecated
-	--components-numericBadge-fontSize: var(--pr-t-font-body-S-fontSize);
-	--components-numericBadge-lineHeight: var(--pr-t-font-body-S-lineHeight);
 }
 
 @mixin S {
 	--components-numericBadge-size: 1.25rem;
 	--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);
 	--components-numericBadge-font: var(--pr-t-font-body-XS);
-
-	// Deprecated
-	--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);
-	--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight);
 }
 
 @mixin XS {
 	--components-numericBadge-size: 1rem;
 	--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);
 	--components-numericBadge-font: var(--pr-t-font-body-XS);
-
-	// Deprecated
-	--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);
-	--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight);
 }
 
 @mixin inherit {

package/src/components/numericBadge/vars.scss

@@ -5,8 +5,4 @@
 	--components-numericBadge-size: 1.5rem;
 	--components-numericBadge-font: var(--pr-t-font-body-S);
 	--components-numericBadge-borderRadius: var(--pr-t-border-radius-default);
-
-	// Deprecated
-	--components-numericBadge-fontSize: var(--pr-t-font-body-S-fontSize);
-	--components-numericBadge-lineHeight: var(--pr-t-font-body-S-lineHeight);
 }

package/src/components/popover/component.scss

@@ -33,6 +33,16 @@
 	}
 
 	@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)));
+
+			&:focus-visible {
+				@include a11y.focusVisible($borderRadius: var(--pr-t-border-radius-default));
+			}
+		}
+
 		.popover-contentOptional {
 			padding: var(--components-popover-padding);
 		}

package/src/components/popover/vars.scss

@@ -1,3 +1,5 @@
 @mixin vars {
 	--components-popover-padding: var(--pr-t-spacings-100);
+	--components-popover-content-maxBlockSize: 9999px;
+	--components-popover-content-maxInlineSize: 9999px;
 }

package/src/components/presentation/component.scss

@@ -47,6 +47,7 @@
 		.presentation-definition {
 			margin: 0;
 			color: var(--pr-t-color-text);
+			overflow-wrap: anywhere;
 
 			> *:not(:has(.lucca-icon), .presentation-definition-link) {
 				color: var(--pr-t-color-text);

package/src/components/radio/states.scss

@@ -4,7 +4,7 @@
 		cursor: default;
 
 		&::before {
-			border-color: var(--palettes-neutral-500);
+			border-color: var(--palettes-neutral-300);
 			border-width: 2px;
 			border-style: solid;
 		}
@@ -18,13 +18,13 @@
 @mixin disabledChecked {
 	~ .radio-label {
 		&::before {
-			border-color: var(--palettes-neutral-500); // disabled token candidate
+			border-color: var(--palettes-neutral-300); // disabled token candidate
 			border-width: 2px;
 			border-style: solid;
 		}
 
 		&::after {
-			background-color: var(--palettes-neutral-500); // disabled token candidate
+			background-color: var(--palettes-neutral-300); // disabled token candidate
 		}
 	}
 }

package/src/components/radioField/states.scss

@@ -28,8 +28,8 @@
 
 @mixin checkedDisabled {
 	~ .radioField-icon {
-		background-color: var(--palettes-neutral-500); // disabled token candidate
-		border-color: var(--palettes-neutral-500); // disabled token candidate
+		background-color: var(--palettes-neutral-300); // disabled token candidate
+		border-color: var(--palettes-neutral-300); // disabled token candidate
 		color: var(--palettes-neutral-500); // disabled token candidate
 	}
 }
@@ -58,7 +58,7 @@
 	cursor: default;
 
 	~ .radioField-icon {
-		border-color: var(--palettes-neutral-500); // disabled token candidate
+		border-color: var(--palettes-neutral-300); // disabled token candidate
 	}
 }
 

package/src/components/richText/vars.scss

@@ -9,6 +9,6 @@
 	// with css vars deprecated before values
 	--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-minHeigh, calc(2lh + 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);
 }

package/src/components/scrollBox/component.scss

@@ -15,6 +15,8 @@
 	padding-block: var(--components-scrollBox-paddingBlock);
 	margin-block: var(--components-scrollBox-marginBlock);
 	border-radius: var(--pr-t-border-radius-default);
+	transform: translate3d(0, 0, 0);
+	will-change: scroll-position;
 
 	> * {
 		flex-shrink: 0;

package/src/components/section/index.scss

@@ -8,9 +8,7 @@
 	}
 
 	@layer mods {
-		// .mod-grey is deprecated
-		&.mod-neutral,
-		&.mod-grey {
+		&.mod-neutral {
 			@include neutral;
 		}
 

package/src/components/simpleSelect/index.scss

@@ -40,6 +40,7 @@
 			@include XS;
 		}
 
+		&.mod-impersonation,
 		&.mod-filterPill {
 			@include filterPill;
 		}

package/src/components/skeleton/component.scss

@@ -5,6 +5,36 @@
 		.skeleton-item {
 			animation: skeletonFade var(--commons-animations-durations-fast) ease-in 1 forwards;
 		}
+
+		.skeletonCard {
+			background-color: var(--pr-t-elevation-surface-raised);
+			box-shadow: var(--pr-t-elevation-shadow-raised);
+			border-radius: var(--pr-t-border-radius-structure);
+			padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);
+		}
+
+		.skeletonHighlight {
+			background-color: var(--pr-t-elevation-surface-raised);
+			padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);
+			border-radius: var(--pr-t-border-radius-structure);
+
+			&.mod-dark {
+				background-color: var(--pr-t-elevation-surface-default);
+			}
+		}
+
+		.skeletonFancyBox {
+			padding: var(--pr-t-spacings-300) var(--pr-t-spacings-700);
+			background-color: var(--pr-t-elevation-surface-raised);
+			border-radius: var(--pr-t-border-radius-structure);
+			inline-size: fit-content;
+			margin-inline: auto;
+			min-inline-size: min(22rem, 100%);
+			min-block-size: 7rem;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+		}
 	}
 
 	// fades content in on load

package/src/components/skeleton/mods.scss

@@ -1,6 +1,6 @@
 @mixin dark {
-	--components-skeleton-gradient-step-one: var(--palettes-neutral-200);
-	--components-skeleton-gradient-step-two: var(--palettes-neutral-500);
+	--components-skeleton-gradient-step-one: var(--palettes-neutral-100);
+	--components-skeleton-gradient-step-two: var(--palettes-neutral-300);
 }
 
 @mixin square {

package/src/components/skeleton/states.scss

@@ -104,9 +104,9 @@
 		background-image:
 			linear-gradient(
 				90deg,
-				var(--components-skeleton-gradient-step-one, var(--palettes-neutral-50)),
-				var(--components-skeleton-gradient-step-two, var(--palettes-neutral-200)),
-				var(--components-skeleton-gradient-step-one, var(--palettes-neutral-50))
+				var(--components-skeleton-gradient-step-one),
+				var(--components-skeleton-gradient-step-two),
+				var(--components-skeleton-gradient-step-one)
 			);
 		background-size: 150% 100%;
 		background-repeat: repeat-x;

package/src/components/skeleton/vars.scss

@@ -1,6 +1,6 @@
 @mixin vars {
-	--components-skeleton-gradient-step-one: var(--palettes-neutral-50);
-	--components-skeleton-gradient-step-two: var(--palettes-neutral-200);
+	--components-skeleton-gradient-step-one: var(--palettes-neutral-25);
+	--components-skeleton-gradient-step-two: var(--palettes-neutral-100);
 	--components-skeleton-shape-height: 1.5rem;
 	--components-skeleton-shape-width: 1.5rem;
 	--components-skeleton-text-offset: var(--pr-t-spacings-75);

package/src/components/skipLinks/component.scss

@@ -5,6 +5,9 @@
 	list-style-type: none;
 	justify-content: center;
 	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--pr-t-spacings-100);
 	margin: 0;
 	padding: 0;
 	z-index: 9010;
@@ -12,6 +15,12 @@
 	inset-block-end: auto;
 
 	@at-root ($atRoot) {
+		.skipLinks_target {
+			&:focus-visible {
+				@include a11y.focusVisible;
+			}
+		}
+
 		.skipLinks-action {
 			border: 0;
 			margin: 0;

package/src/components/statusBadge/component.scss

@@ -19,7 +19,7 @@
 	&::before {
 		background-color: var(--palettes-700, var(--palettes-product-700));
 		border-radius: var(--pr-t-border-radius-full);
-		content: ' ' / ''; // Unbreakable space to avoid vertical alignement issues with inline-flex in some contexts like tables
+		content: ' ' / ''; // Unbreakable space to avoid vertical alignment issues with inline-flex in some contexts like tables
 		display: block;
 		block-size: var(--components-statusBadge-dot-size);
 		flex-shrink: 0;

package/src/components/tableStickedDeprecated/mods.scss

@@ -190,14 +190,14 @@
 
 @mixin stickyHeaderBanner {
 	.table-head-row-cell {
-		inset-block-start: var(commons-banner-height);
+		inset-block-start: var(--commons-banner-height);
 	}
 
 	.table-body-row-cell,
 	.table-foot-row-cell {
 		inset-block-start:
 			calc(
-				var(commons-banner-height)
+				var(--commons-banner-height)
 				+ var(--sticky-header-shadow-offset-top)
 				+ var(--components-tableFixed-column-sticky-shadow-width)
 			);
@@ -206,7 +206,7 @@
 			&::after {
 				inset-block-start:
 					calc(
-						var(commons-banner-height)
+						var(--commons-banner-height)
 						+ var(--sticky-header-shadow-offset-top)
 						+ var(--components-tableFixed-column-sticky-shadow-width)
 					);

package/src/components/tag/component.scss

@@ -24,6 +24,12 @@
 	max-inline-size: 100%;
 	position: var(--components-tag-position);
 
+	&::before {
+		content: var(--components-tag-before-content);
+		inline-size: 0;
+		margin-inline-start: calc(var(--components-tag-gap) * -1);
+	}
+
 	&,
 	&:is(a, button) {
 		color: var(--components-tag-color);

package/src/components/tag/index.scss

@@ -1,3 +1,4 @@
+@use '@lucca-front/scss/src/commons/config';
 @use 'exports' as *;
 
 .tag {
@@ -36,5 +37,9 @@
 		&:has(.tag-content:focus-visible) {
 			@include focusVisible;
 		}
+
+		&:has(.lucca-icon) {
+			@include withIcon;
+		}
 	}
 }

package/src/components/tag/mods.scss

@@ -63,10 +63,18 @@
 		--components-tag-boxShadow: none;
 		--components-tag-position: relative;
 
-		@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500), var(--pr-t-border-radius-small));
+		@include color.borderGradient(
+			$gradient: var(--pr-t-color-border-ai),
+			$radius: var(--pr-t-border-radius-small),
+			$pseudo: '::after',
+		);
 
 		.lucca-icon {
 			@include icons.AI;
 		}
 	}
 }
+
+@mixin withIcon {
+	--components-tag-before-content: ' ';
+}

package/src/components/tag/vars.scss

@@ -8,6 +8,7 @@
 	--components-tag-cursor: inherit;
 	--components-tag-boxShadow: 0 0 0 1px var(--components-tag-shadow);
 	--components-tag-position: static;
+	--components-tag-before-content: none;
 
 	// Deprecated
 	--components-tag-fontSize: var(--pr-t-font-body-S-fontSize);

package/src/components/textField/component.scss

@@ -130,6 +130,22 @@
 			}
 		}
 
+		.textField-prefix-lang {
+			min-inline-size: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
+			position: relative;
+
+			&::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));
+			}
+		}
+
 		.textField-suffix {
 			display: inline-flex;
 			padding-inline-end: var(--component-textField-padding);

package/src/components/textField/index.scss

@@ -13,6 +13,10 @@
 
 		&.mod-S {
 			@include S;
+
+			&.mod-multilanguage {
+				@include multilanguageS;
+			}
 		}
 
 		&.mod-XS {
@@ -23,6 +27,10 @@
 			@include valueAlignRight;
 		}
 
+		&.mod-multilanguage {
+			@include multilanguage;
+		}
+
 		&.is-invalid,
 		&:has(.textField-input-value[aria-invalid='true']) {
 			@include invalid;
@@ -35,6 +43,10 @@
 		&.is-disabled,
 		&:has(.textField-input-value:disabled) {
 			@include disabled;
+
+			&.mod-multilanguage {
+				@include multilanguageDisabled;
+			}
 		}
 
 		&.mod-autoResize {

package/src/components/textField/mods.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/components/clear/exports' as clear;
+@use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/icons/src/icon/exports' as icon;
 
 @mixin S {
@@ -90,3 +91,25 @@
 
 	@include S;
 }
+
+@mixin multilanguage {
+	.textField-input-affix-toggle {
+		@include button.outlined;
+		@include button.S;
+
+		pointer-events: auto;
+		padding: var(--pr-t-spacings-50);
+		color: var(--palettes-product-700);
+
+		&:hover {
+			--components-button-backgroundColor: var(--palettes-product-50);
+			--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-product-300);
+		}
+	}
+}
+
+@mixin multilanguageS {
+	.textField-input-affix-toggle {
+		@include button.XS;
+	}
+}

package/src/components/textField/states.scss

@@ -21,3 +21,9 @@
 	--component-textField-color: var(--pr-t-color-text-subtle);
 	--component-textField-textDecoration: line-through;
 }
+
+@mixin multilanguageDisabled {
+	.textField-input-affix-toggle {
+		color: var(--pr-t-color-text-disabled);
+	}
+}

package/src/components/textFlow/component.scss

@@ -1,6 +1,8 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
+	overflow-wrap: anywhere;
+
 	h1 {
 		margin-block: var(--pr-t-spacings-300);
 	}

package/src/components/timepicker/component.scss

@@ -28,18 +28,37 @@
 			&:focus-within {
 				@include a11y.focusVisible($offset: 3px);
 			}
+
+			.timePicker-fieldset {
+				box-shadow: initial;
+
+				&:focus-within {
+					outline: initial;
+				}
+			}
+		}
+
+		.timePicker-arrow {
+			align-self: stretch;
+			display: flex;
+			align-items: center;
+			color: var(--pr-t-color-text-subtle);
+		}
+
+		.timePicker-arrow-icon .lucca-icon {
+			@include icons.S;
 		}
 
 		.timePicker-fieldset-groupSeparator {
-			pointer-events: none;
 			display: grid;
 			place-items: center;
 			text-align: center;
-			inline-size: var(--pr-t-spacings-200);
-			margin-block: 0;
-			margin-inline: calc(var(--pr-t-spacings-100) * -1);
+			inline-size: fit-content;
+			block-size: calc(var(--components-timepicker-input-height) + var(--components-timepicker-input-padding-block) * 2);
+			margin-inline: calc(var(--pr-t-spacings-25) * -1);
 			position: relative;
 			inset-inline-start: calc(var(--pr-t-spacings-25) * -1);
+			z-index: 1;
 		}
 
 		.timePicker-fieldset-group {
@@ -47,6 +66,9 @@
 
 			~ .timePicker-fieldset-group {
 				margin-inline-start: calc(var(--pr-t-spacings-50) * -1);
+
+				--components-timepicker-input-padding-inline: var(--components-timepicker-end) var(--components-timepicker-start);
+				--components-timepicker-display-inset-inline: var(--components-timepicker-input-padding-inline);
 			}
 		}
 
@@ -83,7 +105,8 @@
 
 		.timePicker-fieldset-group-textfield-display {
 			position: absolute;
-			inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
+			inset-block: var(--components-timepicker-display-inset-block);
+			inset-inline: var(--components-timepicker-display-inset-inline);
 			border-radius: var(--pr-t-border-radius-50);
 			pointer-events: none;
 			display: grid;
@@ -134,8 +157,8 @@
 
 		.timePicker-fieldset-meridiem {
 			box-sizing: content-box;
-			inline-size: calc(var(--components-timepicker-input-minInlineSize) + 2ch);
-			padding-inline: var(--components-timepicker-display-padding-block);
+			inline-size: calc(var(--pr-t-spacings-100) + 2ch);
+			padding-inline: var(--pr-t-spacings-50);
 			position: relative;
 			align-self: stretch;
 			margin-inline-start: calc(var(--pr-t-spacings-50) * -1);
@@ -143,7 +166,8 @@
 			&::after {
 				content: '';
 				position: absolute;
-				inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
+				inset-block: var(--components-timepicker-display-inset-block);
+				inset-inline: var(--pr-t-spacings-50);
 				border-radius: var(--pr-t-border-radius-50);
 				display: grid;
 				place-items: center;