@lucca-front/scss 21.2.2 → 21.3.0-rc.1

package/src/components/form/component.scss

@@ -5,6 +5,7 @@
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: block;
+	max-inline-size: var(--components-form-maxWidth);
 
 	.divider:not(.mod-vertical) {
 		margin-block: var(--pr-t-spacings-300);
@@ -150,5 +151,10 @@
 				}
 			}
 		}
+
+		.option-additional {
+			font: var(--pr-t-font-body-S);
+			color: var(--pr-t-color-text-subtle);
+		}
 	}
 }

package/src/components/form/mods.scss

@@ -15,7 +15,7 @@
 @use '@lucca-front/scss/src/components/color/exports' as color;
 
 @mixin maxWidth {
-	max-inline-size: var(--components-form-maxWidth);
+	--components-form-maxWidth: 50rem;
 }
 
 @mixin inline {

package/src/components/form/vars.scss

@@ -1,5 +1,5 @@
 @mixin vars {
-	--components-form-maxWidth: 40rem;
+	--components-form-maxWidth: none;
 	--components-form-group-margin-bottom: 1.2rem;
 	--components-form-field-margin-bottom: var(--pr-t-spacings-200);
 	--components-form-field-width: auto;

package/src/components/grid/mods.scss

@@ -14,7 +14,7 @@
 
 @mixin form {
 	--grid-columns: 4;
-	--grid-maxWidth: 50rem;
+	--grid-maxWidth: var(--components-form-maxWidth, 50rem);
 }
 
 @mixin dense {

package/src/components/highlightText/component.scss

@@ -0,0 +1,30 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	padding-inline: 0.125em;
+	margin-inline: -0.125em;
+	background-repeat: no-repeat;
+	box-decoration-break: clone;
+	font-weight: inherit;
+	background-image:
+		linear-gradient(var(--components-highlightText-backgroundColor)),
+		linear-gradient(var(--components-highlightText-backgroundColor)),
+		radial-gradient(var(--components-highlightText-backgroundDiameter) circle at var(--components-highlightText-backgroundStart) var(--components-highlightText-backgroundEnd), var(--components-highlightText-backgroundColor) calc(50% - 1px), transparent 50%),
+		radial-gradient(var(--components-highlightText-backgroundDiameter) circle at var(--components-highlightText-backgroundEnd) var(--components-highlightText-backgroundEnd), var(--components-highlightText-backgroundColor) calc(50% - 1px), transparent 50%),
+		radial-gradient(var(--components-highlightText-backgroundDiameter) circle at var(--components-highlightText-backgroundStart) calc(100% - var(--components-highlightText-backgroundBlockSize) + var(--components-highlightText-backgroundRadius)), var(--components-highlightText-backgroundColor) calc(50% - 1px), transparent 50%),
+		radial-gradient(var(--components-highlightText-backgroundDiameter) circle at var(--components-highlightText-backgroundEnd) calc(100% - var(--components-highlightText-backgroundBlockSize) + var(--components-highlightText-backgroundRadius)), var(--components-highlightText-backgroundColor) calc(50% - 1px), transparent 50%);
+	background-size:
+		100% calc(var(--components-highlightText-backgroundBlockSize) - var(--components-highlightText-backgroundDiameter)),
+		calc(100% - var(--components-highlightText-backgroundDiameter)) var(--components-highlightText-backgroundBlockSize),
+		100% 100%,
+		100% 100%,
+		100% 100%,
+		100% 100%;
+	background-position:
+		50% calc(100% - var(--components-highlightText-backgroundRadius)),
+		50% 100%,
+		0 0,
+		0 0,
+		0 0,
+		0 0;
+}

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/inputFramed/states.scss

@@ -3,10 +3,17 @@
 }
 
 @mixin disabled {
-
 	--components-inputFramed-header-borderColor: var(--palettes-neutral-50);
 	--components-inputFramed-borderColor: var(--palettes-neutral-300);
 	--components-inputFramed-header-info-color: var(--pr-t-color-input-text-disabled);
+
+	.inputFramed-header-label {
+		--components-formLabel-color: var(--pr-t-color-text-disabled);
+	}
+
+	.inlineMessage {
+		--components-inlineMessage-color: var(--pr-t-color-text-disabled);
+	}
 }
 
 @mixin checked {

package/src/components/listboxOption/mods.scss

@@ -28,9 +28,9 @@
 		--components-listboxOption-content-insetBlockStart: var(--pr-t-spacings-50);
 		--components-listboxOption-content-boxShadow:
 			calc(var(--pr-t-spacings-100) * -1) 0 0 0 var(--pr-t-elevation-surface-raised),
-			calc(var(--pr-t-spacings-100) * 1)  0 0 0 var(--pr-t-elevation-surface-raised),
+			calc(var(--pr-t-spacings-100) * 1) 0 0 0 var(--pr-t-elevation-surface-raised),
 			calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1) 0 0 var(--pr-t-elevation-surface-raised),
-			calc(var(--pr-t-spacings-100) * 1)  calc(var(--pr-t-spacings-100) * -1) 0 0 var(--pr-t-elevation-surface-raised);
+			calc(var(--pr-t-spacings-100) * 1) calc(var(--pr-t-spacings-100) * -1) 0 0 var(--pr-t-elevation-surface-raised);
 	}
 
 	.listboxOptionWrapper {
@@ -48,7 +48,7 @@
 		--components-listboxOption-content-fontWeight: var(--pr-t-font-fontWeight-semibold);
 		--components-listboxOption-content-marginBlockStart: var(--pr-t-spacings-100);
 		--components-listboxOption-content-boxShadow:
-			calc(var(--pr-t-spacings-50) * 1)  0 0 var(--pr-t-spacings-50) var(--pr-t-elevation-surface-raised),
+			calc(var(--pr-t-spacings-50) * 1) 0 0 var(--pr-t-spacings-50) var(--pr-t-elevation-surface-raised),
 			calc(var(--pr-t-spacings-50) * -1) 0 0 var(--pr-t-spacings-50) var(--pr-t-elevation-surface-raised);
 	}
 }

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/resourceCard/mods.scss

@@ -13,9 +13,9 @@
 	--components-resourceCard-layout-header-alignItems: start;
 	--components-resourceCard-layout-header-flexDirection: column;
 	--components-resourceCard-layout-gridTemplate:
-		'before  header  after'   auto
+		'before  header  after' auto
 		'content content content' auto
-		/auto    1fr     auto;
+		/auto 1fr auto;
 }
 
 @mixin wrapped {
@@ -44,8 +44,8 @@
 @mixin hasNoContentHasIllustrationNoGrid {
 	--components-resourceCard-layout-alignItems: center;
 	--components-resourceCard-layout-gridTemplate:
-		'before  header  after'  1fr
-		/auto    1fr     auto;
+		'before  header  after' 1fr
+		/auto 1fr auto;
 }
 
 @mixin hasContentNoGridHasIllustration {

package/src/components/resourceCard/vars.scss

@@ -25,7 +25,7 @@
 	--components-resourceCard-layout-gridTemplate:
 		'before header  after' auto
 		'before content after' 1fr
-		/ auto   1fr     auto;
+		/ auto 1fr auto;
 }
 
 @mixin varsWrapper {

package/src/components/simpleSelect/index.scss

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

package/src/components/softwareIcon/component.scss

@@ -1,17 +1,79 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/reset';
+@use '@lucca-front/scss/src/commons/utils/a11y';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	display: inline-block;
+	display: var(--components-softwareIcon-display);
 	inline-size: var(--components-softwareIcon-size);
 	block-size: var(--components-softwareIcon-size);
+	z-index: var(--components-softwareIcon-zIndex);
+	position: relative;
+	transform: scale(var(--components-softwareIcon-transformScale));
+	transition-property: transform;
+	transition-duration: var(--commons-animations-durations-fast);
 
-	svg {
-		display: block;
-		inline-size: 100%;
-		block-size: 100%;
+	&:focus-visible {
+		outline: none;
 	}
 
 	@at-root ($atRoot) {
+		.softwareIcon-illustration {
+			overflow: visible;
+		}
 
+		.softwareIcon-illustration-bubble {
+			stroke: var(--components-softwareIcon-illustration-bubble-stroke);
+			stroke-width: var(--components-softwareIcon-illustration-bubble-strokeWidth);
+		}
+
+		.softwareIconWrapper {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: var(--pr-t-spacings-25) 0;
+			padding-inline-start: calc(var(--components-softwareIconWrapper-list-item-marginInlineStart) * -1);
+		}
+
+		.softwareIconWrapper-list {
+			@include reset.list;
+
+			display: contents;
+		}
+
+		.softwareIconWrapper-list-item {
+			margin-inline-start: var(--components-softwareIconWrapper-list-item-marginInlineStart);
+		}
+
+		.softwareIconWrapper-action {
+			@include reset.button;
+
+			border-radius: 68% 35% 45% 55% / 40% 40% 64% 60%;
+			background-color: var(--palettes-neutral-200);
+			inline-size: var(--components-softwareIcon-size);
+			block-size: var(--components-softwareIcon-size);
+			transform: scale(var(--components-softwareIcon-transformScale));
+			transition-property: transform;
+			transition-duration: var(--commons-animations-durations-fast);
+			box-shadow: 0 0 0 var(--components-softwareIcon-action-boxShadowSpread) var(--palettes-neutral-0);
+			margin-inline-start: var(--components-softwareIconWrapper-list-item-marginInlineStart);
+		}
+
+		.softwareIconWrapper-action-more {
+			display: grid;
+			place-items: center;
+			font-family: var(--pr-t-font-family-brand);
+			font-size: var(--components-softwareIconWrapper-action-more-fontSize);
+			font-weight: var(--pr-t-font-fontWeight-semibold);
+		}
+
+		.softwareIconWrapper_popover {
+			@include reset.list;
+
+			display: grid;
+			max-inline-size: calc((var(--components-softwareIcon-size) * 8) + (var(--pr-t-spacings-50) * 7));
+			box-sizing: content-box;
+			gap: var(--pr-t-spacings-50);
+			grid-template-columns: repeat(auto-fit, minmax(var(--components-softwareIcon-size), 1fr));
+		}
 	}
 }