@lucca-front/scss 21.2.3-rc.4 → 21.3.0-rc.1

package/src/components/highlightText/exports.scss

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

package/src/components/highlightText/index.scss

@@ -0,0 +1,8 @@
+@use 'exports' as *;
+
+.highlightText {
+	@layer components {
+		@include vars;
+		@include component;
+	}
+}

package/src/components/highlightText/vars.scss

@@ -0,0 +1,9 @@
+@mixin vars {
+	--components-highlightText-backgroundColor: var(--palettes-300, var(--palettes-product-300));
+	--components-highlightText-backgroundDiameter: 0.25em;
+	--components-highlightText-backgroundBlockSize: 0.5em;
+
+	--components-highlightText-backgroundRadius: calc(var(--components-highlightText-backgroundDiameter) / 2);
+	--components-highlightText-backgroundStart: var(--components-highlightText-backgroundRadius);
+	--components-highlightText-backgroundEnd: calc(100% - var(--components-highlightText-backgroundRadius));
+}

package/src/components/horizontalNavigation/component.scss

@@ -28,11 +28,18 @@
 	}
 
 	@at-root ($atRoot) {
+		.horizontalNavigationWrapper {
+			grid-area: overflow;
+			min-block-size: 0;
+			display: flex;
+			flex-direction: column;
+		}
+
 		// stylelint-disable-next-line selector-disallowed-list -- .menu-containerOptional is deprecated
 		.menu-containerOptional,
 		.horizontalNavigation-containerOptional {
 			max-inline-size: var(--commons-container-maxWidth);
-			padding: var(--commons-container-padding);
+			padding: var(--components-horizontalNavigation-containerOptional-padding);
 		}
 
 		// stylelint-disable-next-line selector-disallowed-list -- .menu-list is deprecated
@@ -138,5 +145,20 @@
 				font-weight: var(--pr-t-font-fontWeight-semibold);
 			}
 		}
+
+		.horizontalNavigation_panel {
+			display: var(--components-horizontalNavigation-panel-display);
+			overflow: var(--components-horizontalNavigation-panel-overflow);
+			min-height: 0;
+			flex-direction: column;
+
+			&:focus-visible {
+				@include a11y.focusVisible($offset: -2px, $borderRadius: var(--pr-t-border-radius-small));
+			}
+
+			&:not(.is-active) {
+				display: none;
+			}
+		}
 	}
 }

package/src/components/horizontalNavigation/index.scss

@@ -21,6 +21,10 @@
 			@include noBorder;
 		}
 
+		.dialog & {
+			@include insideDialog;
+		}
+
 		&.mod-vertical {
 			@include vertical;
 
@@ -28,6 +32,7 @@
 			.menu-list-item-action,
 			.horizontalNavigation-list-item-action {
 				&[aria-current='page'],
+				&[aria-selected='true'],
 				&.is-active {
 					@include activeVertical;
 				}
@@ -40,6 +45,18 @@
 	}
 }
 
+.horizontalNavigation_panel {
+	@layer components {
+		@include varsPanel;
+	}
+
+	@layer mods {
+		.dialog & {
+			@include insideDialogPanel;
+		}
+	}
+}
+
 .menu-link, // stylelint-disable-line selector-disallowed-list -- .menu-link is deprecated
 .menu-list-item-action, // stylelint-disable-line selector-disallowed-list -- .menu-list-item-action is deprecated
 .horizontalNavigation-list-item-action {
@@ -47,12 +64,13 @@
 		// .active is deprecated
 		&.active,
 		&[aria-current='page'],
+		&[aria-selected='true'],
 		&.is-active {
 			@include active;
 		}
 
 		&.disabled, // .disabled is deprecated
-		&[disabled], // [disabled] is deprecated
+		&[disabled],
 		&.is-disabled {
 			@include disabled;
 		}

package/src/components/horizontalNavigation/mods.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
+@use '@lucca-front/scss/src/commons/utils/a11y';
 
 @mixin header {
 	--components-horizontalNavigation-listPadding: 0 var(--pr-t-spacings-500);
@@ -106,3 +107,16 @@
 		}
 	}
 }
+
+@mixin insideDialog {
+	--components-horizontalNavigation-containerOptional-padding: 0 var(--components-dialog-insideContent-paddingInline);
+}
+
+@mixin insideDialogPanel {
+	--components-horizontalNavigation-panel-display: flex;
+	--components-horizontalNavigation-panel-overflow: auto;
+
+	&:focus-visible {
+		@include a11y.focusVisible($offset: -4px, $borderRadius: var(--pr-t-border-radius-structure));
+	}
+}

package/src/components/horizontalNavigation/vars.scss

@@ -18,4 +18,11 @@
 	--components-horizontalNavigation-listItemActionRadius: var(--pr-t-border-radius-default) var(--pr-t-border-radius-default) 0 0;
 	--components-horizontalNavigation-listItemActionRadiusWidth: auto;
 	--components-horizontalNavigation-listItemActionRadiusHeight: var(--components-horizontalNavigation-listItemActionSize);
+
+	--components-horizontalNavigation-containerOptional-padding: var(--commons-container-padding);
+}
+
+@mixin varsPanel {
+	--components-horizontalNavigation-panel-display: block;
+	--components-horizontalNavigation-panel-overflow: visible;
 }

package/src/components/impersonation/component.scss

@@ -0,0 +1,59 @@
+@use '@lucca-front/scss/src/commons/config';
+@use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/reset';
+@use '@lucca-front/scss/src/components/clear/exports' as clear;
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	position: relative;
+	inline-size: fit-content;
+	display: block;
+
+	@at-root ($atRoot) {
+		.impersonation-trigger {
+			@include reset.button;
+
+			border: 1px solid var(--components-impersonation-trigger-borderColor);
+			background-color: var(--components-impersonation-trigger-backgroundColor);
+			border-radius: var(--pr-t-border-radius-200);
+			inline-size: fit-content;
+			display: flex;
+			align-items: center;
+			gap: var(--pr-t-spacings-100);
+			padding: var(--pr-t-spacings-50);
+			padding-inline-end: var(--pr-t-spacings-100);
+			min-block-size: var(--pr-t-spacings-500);
+			font-weight: var(--components-impersonation-trigger-fontWeight);
+			color: var(--components-impersonation-trigger-color);
+			box-shadow: var(--components-impersonation-trigger-boxShadow);
+			transition-property: box-shadow, border-color;
+			transition-duration: var(--commons-animations-durations-fast);
+		}
+
+		.impersonation-trigger-icon {
+			color: var(--components-impersonation-trigger-icon-color);
+			rotate: var(--components-impersonation-trigger-icon-rotate);
+			transition-property: rotate;
+			transition-duration: var(--commons-animations-durations-fast);
+			margin-inline-start: var(--components-impersonation-trigger-icon-marginInlineStart);
+		}
+
+		.impersonation-clear.clear {
+			position: absolute;
+			z-index: 1;
+			inset-inline-end: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-75));
+			inset-block-start: calc(var(--pr-t-spacings-150) + 1px);
+			display: var(--components-impersonation-clear-display);
+
+			@include clear.product;
+		}
+
+		.impersonation_popover-content-option {
+			display: flex;
+			color: var(--pr-t-color-text);
+
+			&.mod-me {
+				font-weight: var(--pr-t-font-fontWeight-semibold);
+			}
+		}
+	}
+}

package/src/components/impersonation/exports.scss

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

package/src/components/impersonation/index.scss

@@ -0,0 +1,22 @@
+@use 'exports' as *;
+
+.impersonation {
+	@layer components {
+		@include vars;
+		@include component;
+	}
+
+	@layer mods {
+		&:has(.impersonation-trigger.is-active) {
+			@include triggerActive;
+		}
+
+		&:has(.impersonation-trigger:hover) {
+			@include triggerHover;
+		}
+
+		&:has(.impersonation-trigger[aria-expanded='true']) {
+			@include triggerExpanded;
+		}
+	}
+}

package/src/components/impersonation/states.scss

@@ -0,0 +1,18 @@
+@mixin triggerHover {
+	--components-impersonation-trigger-borderColor: var(--palettes-product-400);
+	--components-impersonation-trigger-shadow: var(--pr-t-elevation-shadow-button);
+}
+
+@mixin triggerExpanded {
+	--components-impersonation-trigger-icon-rotate: 180deg;
+}
+
+@mixin triggerActive {
+	--components-impersonation-trigger-backgroundColor: var(--palettes-product-50);
+	--components-impersonation-trigger-borderColor: var(--palettes-product-200);
+	--components-impersonation-trigger-fontWeight: var(--pr-t-font-fontWeight-semibold);
+	--components-impersonation-trigger-color: var(--palettes-product-800);
+	--components-impersonation-trigger-icon-color: var(--palettes-product-700);
+	--components-impersonation-clear-display: grid;
+	--components-impersonation-trigger-icon-marginInlineStart: var(--pr-t-spacings-250);
+}

package/src/components/impersonation/vars.scss

@@ -0,0 +1,11 @@
+@mixin vars {
+	--components-impersonation-trigger-borderColor: var(--palettes-neutral-100);
+	--components-impersonation-trigger-icon-rotate: 0deg;
+	--components-impersonation-trigger-backgroundColor: var(--palettes-neutral-0);
+	--components-impersonation-trigger-fontWeight: var(--pr-t-font-fontWeight-regular);
+	--components-impersonation-trigger-color: var(--pr-t-color-text);
+	--components-impersonation-trigger-icon-color: var(--pr-t-color-text-subtle);
+	--components-impersonation-trigger-boxShadow: none;
+	--components-impersonation-clear-display: none;
+	--components-impersonation-trigger-icon-marginInlineStart: auto;
+}

package/src/components/index.scss

@@ -117,6 +117,8 @@
 @forward 'softwareIcon';
 @forward 'progressStepper';
 @forward 'activityFeed';
+@forward 'impersonation';
+@forward 'highlightText';
 
 @forward 'filterBarDeprecated';
 @forward 'tableFixedDeprecated';

package/src/components/indexTable/component.scss

@@ -265,6 +265,10 @@
 		}
 
 		.indexTableWrapper-pagination {
+			position: sticky;
+			inset-inline-end: 0;
+			align-self: flex-end;
+
 			&:empty {
 				display: none;
 			}

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,12 @@
 			flex: 1;
 		}
 
+		.multipleSelect-displayer-value {
+			display: flex;
+			gap: var(--pr-t-spacings-50);
+			flex-wrap: wrap;
+		}
+
 		.multipleSelect-displayer-chip.chip {
 			min-inline-size: 0;
 
@@ -92,5 +98,9 @@
 		.multipleSelect-pill-displayer-label {
 			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
+
+		.multiSelect-field-icon {
+			order: 1;
+		}
 	}
 }

package/src/components/presentation/component.scss

@@ -46,6 +46,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/simpleSelect/index.scss

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

package/src/components/tag/mods.scss

@@ -63,7 +63,7 @@
 		--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));
 
 		.lucca-icon {
 			@include icons.AI;

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,6 +28,25 @@
 			&: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 {
@@ -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;

package/src/components/timepicker/mods.scss

@@ -1,13 +1,34 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/icons/src/icon/exports' as icons;
 
 @mixin S {
 	--components-timepicker-font: var(--pr-t-font-body-S);
-	--components-timepicker-display-padding-inline: var(--pr-t-spacings-25);
-	--components-timepicker-display-padding-block: var(--pr-t-spacings-75);
-	--components-timepicker-input-padding-inline: var(--pr-t-spacings-75);
 	--components-timepicker-input-padding-block: var(--pr-t-spacings-25);
 	--components-timepicker-input-height: 1.75rem;
 	--components-timepicker-separator-left: 1.875rem;
+	--components-timepicker-start: var(--pr-t-spacings-25);
+	--components-timepicker-end: var(--pr-t-spacings-75);
+
+	.timePicker-arrow-icon .lucca-icon {
+		@include icons.XS;
+	}
+
+	.timePicker-fieldset-group {
+		--components-timepicker-input-padding-inline: var(--components-timepicker-start) var(--components-timepicker-end);
+		--components-timepicker-display-inset-inline: var(--components-timepicker-input-padding-inline);
+
+		~ .timePicker-fieldset-group {
+			--components-timepicker-input-padding-inline: var(--components-timepicker-end) var(--components-timepicker-start);
+		}
+	}
+
+	.timePicker-fieldset-meridiem {
+		inline-size: calc(var(--pr-t-spacings-50) + 2ch);
+
+		&::after {
+			inset-inline: var(--pr-t-spacings-25);
+		}
+	}
 }
 
 @mixin stepper {

package/src/components/timepicker/vars.scss

@@ -5,10 +5,13 @@
 	--components-timepicker-font: var(--pr-t-font-body-M);
 	--components-timepicker-input-height: 2rem;
 	--components-timepicker-input-minInlineSize: 0.5rem;
-	--components-timepicker-input-padding-inline: var(--pr-t-spacings-100);
+	--components-timepicker-input-padding-inline: var(--components-timepicker-start) var(--components-timepicker-end);
 	--components-timepicker-input-padding-block: var(--pr-t-spacings-50);
 	--components-timepicker-padding: 0;
-	--components-timepicker-display-padding-inline: var(--pr-t-spacings-50);
-	--components-timepicker-display-padding-block: var(--pr-t-spacings-100);
+	--components-timepicker-display-inset-inline: var(--components-timepicker-input-padding-inline);
+	--components-timepicker-display-inset-block: var(--components-timepicker-input-padding-block);
 	--components-timepicker-separator-left: 2.375rem;
+
+	--components-timepicker-start: var(--pr-t-spacings-50);
+	--components-timepicker-end: var(--pr-t-spacings-100);
 }

package/src/components/toast/component.scss

@@ -70,6 +70,7 @@
 
 		.toast-item-content-description {
 			margin: 0;
+			overflow-wrap: anywhere;
 		}
 
 		.toasts-item-kill {