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

package/src/components/filterPill/component.scss

@@ -10,7 +10,7 @@
 @use '@lucca-front/scss/src/components/textField/exports' as textField;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	display: var(--components-filterPill-display);
+	display: flex;
 	gap: var(--components-filterPill-gap);
 	align-items: center;
 	background-color: var(--components-filterPill-backgroundColor);
@@ -24,8 +24,15 @@
 	white-space: nowrap;
 	transition-property: box-shadow;
 	transition-duration: var(--commons-animations-durations-fast);
+	border: 0;
 
 	@at-root ($atRoot) {
+		.filterPillWrapper {
+			position: relative;
+			inline-size: fit-content;
+			display: var(--components-filterPillWrapper-display);
+		}
+
 		.filterPill_popover-content.popover-contentOptional {
 			--components-dateInput-width: none;
 
@@ -96,6 +103,7 @@
 			@include reset.button;
 
 			display: flex;
+			margin-block-start: -1px;
 			margin-inline-start: var(--pr-t-spacings-50);
 			inline-size: calc(var(--pr-t-spacings-50) + var(--pr-t-spacings-200));
 			flex-shrink: 0;
@@ -108,6 +116,10 @@
 				transition-duration: var(--commons-animations-durations-fast);
 				transform: rotate(var(--components-filterPill-toggle-rotation));
 			}
+
+			.filterPill-value + & {
+				margin-inline-start: var(--components-filterPill-toggle-marginInlineStart);
+			}
 		}
 
 		.filterPill-clear.clear {
@@ -119,7 +131,16 @@
 			@include clear.product;
 		}
 
-		.filterPill-combobox {
+		.filterPill_clear.clear {
+			position: absolute;
+			z-index: 1;
+			inset-inline-end: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25));
+			inset-block-start: var(--pr-t-spacings-100);
+
+			@include clear.product;
+		}
+
+		.filterPill-value {
 			@include reset.button;
 
 			font-weight: var(--components-filterPill-label-fontWeightChecked);
@@ -130,9 +151,6 @@
 			overflow: hidden;
 			text-overflow: ellipsis;
 			cursor: var(--components-filterPill-label-cursor);
-			display: flex;
-			align-items: center;
-			gap: var(--pr-t-spacings-50);
 			max-inline-size: 15rem;
 
 			&:focus-visible {
@@ -142,6 +160,12 @@
 			.lucca-icon {
 				color: var(--components-filterPill-arrowColor);
 			}
+
+			&:has(.lucca-icon) {
+				display: flex;
+				align-items: center;
+				gap: var(--pr-t-spacings-50);
+			}
 		}
 
 		.filterPill-label-placeholder {

package/src/components/filterPill/index.scss

@@ -15,20 +15,16 @@
 			@include hover;
 		}
 
-		&:active,
-		&:has(:active) {
+		&:active {
 			@include active;
 		}
 
-		&.is-comboboxHidden {
-			@include comboboxHidden;
-		}
-
-		&:has(.filterPill-combobox:focus-visible) {
+		&:has(.filterPill-label:focus-visible),
+		&:has(.filterPill-value:focus-visible) {
 			@include focusVisible;
 		}
 
-		&:has(.filterPill-combobox[aria-expanded='true']) {
+		&[aria-expanded='true'] {
 			@include opened;
 		}
 
@@ -39,7 +35,7 @@
 				@include filledHover;
 			}
 
-			&:has(.filterPill-combobox:active) {
+			&:active {
 				@include filledActive;
 			}
 		}
@@ -51,6 +47,7 @@
 				@include focusVisible;
 			}
 
+			&[aria-pressed='true'],
 			&:has(.filterPill-checkbox-input:checked) {
 				@include checkboxChecked;
 
@@ -58,14 +55,16 @@
 					@include filledHover;
 				}
 
-				&:has(.filterPill-combobox:active) {
+				&:active {
 					@include filledActive;
 				}
 			}
 
+			&[disabled],
 			&:has(.filterPill-checkbox-input:disabled) {
 				@include checkboxDisabled;
 
+				&[aria-pressed='true'],
 				&:has(.filterPill-checkbox-input:checked) {
 					@include checkboxCheckedDisabled;
 				}
@@ -76,10 +75,14 @@
 			@include button;
 		}
 
-		&:has(.filterPill-combobox:disabled) {
+		&[disabled] {
 			@include disabled;
 		}
+	}
+}
 
+.filterPillWrapper {
+	@layer mods {
 		&.is-hidden {
 			@include hidden;
 		}

package/src/components/filterPill/states.scss

@@ -13,7 +13,7 @@
 }
 
 @mixin focusVisible {
-	@include a11y.focusVisible($offset: 3px);
+	@include a11y.focusVisible($offset: 2px);
 }
 
 @mixin hover {
@@ -67,15 +67,17 @@
 	--components-filterPill-backgroundColor: var(--palettes-product-50);
 	--components-filterPill-color: var(--palettes-product-800);
 	--components-filterPill-toggle-iconColor: var(--palettes-product-700);
+	--components-filterPill-toggle-marginInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
 }
 
 @mixin notFilled {
-	.filterPill-combobox {
+	.filterPill-value {
 		@include a11y.mask;
 	}
-}
 
-@mixin comboboxHidden {
+	+ .filterPill_clear.clear {
+		@include clear.hidden;
+	}
 }
 
 @mixin opened {
@@ -102,11 +104,8 @@
 	box-shadow: var(--components-filterPill-shadow);
 
 	@include clear.hidden;
-
-	// TODO
-	// --components-filterPill-checkbox-borderColor: var(--palettes-neutral-600);
 }
 
 @mixin hidden {
-	--components-filterPill-display: none;
+	--components-filterPillWrapper-display: none;
 }

package/src/components/filterPill/vars.scss

@@ -15,7 +15,8 @@
 	--components-filterPill-toggle-rotation: 0deg;
 	--components-filterPill-toggle-iconColor: var(--palettes-neutral-600);
 	--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);
-	--components-filterPill-display: flex;
 	--components-filterPill-arrowColor: var(--palettes-product-700);
 	--components-filterPill-label-maxInlineSize: none;
+	--components-filterPill-toggle-marginInlineStart: var(--pr-t-spacings-50);
+	--components-filterPillWrapper-display: block;
 }

package/src/components/footer/component.scss

@@ -13,6 +13,7 @@
 	gap: var(--components-footer-gap);
 	align-items: var(--components-footer-alignItems);
 	flex-direction: var(--components-footer-direction);
+	isolation: var(--components-footer-isolation);
 
 	@at-root ($atRoot) {
 		.footer-content {

package/src/components/footer/mods.scss

@@ -14,6 +14,7 @@
 	--components-footer-paddingInline: var(--pr-t-spacings-300);
 	--commons-container-padding: 0;
 	--components-footer-overflow: hidden;
+	--components-footer-isolation: isolate;
 }
 
 @mixin wide {

package/src/components/footer/vars.scss

@@ -12,4 +12,5 @@
 	--components-footer-gap: var(--pr-t-spacings-200);
 	--components-footer-display: flex;
 	--components-footer-container-maxInlineSize: var(--commons-container-maxWidth);
+	--components-footer-isolation: auto;
 }

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

@@ -1,3 +1,4 @@
+@use '@lucca-front/scss/src/commons/utils/color';
 @use 'exports' as *;
 
 // stylelint-disable-next-line selector-disallowed-list -- .menu is deprecated
@@ -21,6 +22,10 @@
 			@include noBorder;
 		}
 
+		.dialog & {
+			@include insideDialog;
+		}
+
 		&.mod-vertical {
 			@include vertical;
 
@@ -28,6 +33,7 @@
 			.menu-list-item-action,
 			.horizontalNavigation-list-item-action {
 				&[aria-current='page'],
+				&[aria-selected='true'],
 				&.is-active {
 					@include activeVertical;
 				}
@@ -40,6 +46,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 +65,20 @@
 		// .active is deprecated
 		&.active,
 		&[aria-current='page'],
+		&[aria-selected='true'],
 		&.is-active {
 			@include active;
 		}
 
+		// .active is deprecated
+		&:not(.active, [aria-current='page'], [aria-selected='true']) {
+			.numericBadge {
+				@include color.palette;
+			}
+		}
+
 		&.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,58 @@
+@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;
+
+			box-shadow: 0 0 0 1px 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);
+			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,10 @@
+@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-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/link/component.scss

@@ -37,6 +37,9 @@
 	@at-root ($atRoot) {
 		.link-icon {
 			white-space: nowrap;
+			opacity: var(--components-link-icon-opacity);
+			transition-property: opacity;
+			transition-duration: var(--commons-animations-durations-fast);
 
 			&::before {
 				content: ' ' / '';

package/src/components/link/index.scss

@@ -1,4 +1,5 @@
 @use 'exports' as *;
+@use '@lucca-front/scss/src/commons/utils/media';
 
 .link {
 	@layer components {
@@ -19,6 +20,14 @@
 			}
 		}
 
+		@include media.isNotTouchDevice {
+			&.mod-hiddenIcon {
+				&:not(:hover, :focus-visible) {
+					@include hiddenIcon;
+				}
+			}
+		}
+
 		&:is(:disabled, .is-disabled) {
 			@include disabled;
 		}

package/src/components/link/mods.scss

@@ -17,3 +17,7 @@
 @mixin legacyIcon {
 	--components-link-icon-marginInlineStart: 0.2em;
 }
+
+@mixin hiddenIcon {
+	--components-link-icon-opacity: 0;
+}