@lucca-front/ng 20.2.0-rc.4 → 20.3.0-rc.1

package/src/components/cdk/_overlay.scss

@@ -2,68 +2,70 @@
 @use '@lucca-front/scss/src/commons/utils/keyframe';
 @use '@lucca-front/scss/src/commons/utils/color';
 
-@include namespace.appendRootVars {
-	--components-cdk-backdrop-opacity: 0.4;
-}
+@layer components {
+	@include namespace.appendRootVars {
+		--components-cdk-backdrop-opacity: 0.4;
+	}
 
-.cdk-overlay-container {
-	position: fixed;
-	z-index: 1000;
-	block-size: 100%;
-	inset-inline-start: 0;
-	pointer-events: none;
-	inset-block-start: 0;
-	inline-size: 100%;
-}
+	.cdk-overlay-container {
+		position: fixed;
+		z-index: 1000;
+		block-size: 100%;
+		inset-inline-start: 0;
+		pointer-events: none;
+		inset-block-start: 0;
+		inline-size: 100%;
+	}
 
-.cdk-overlay-connected-position-bounding-box {
-	position: absolute;
-	z-index: 1000;
-	display: flex;
-	flex-direction: column;
-	min-inline-size: 1px;
-	min-block-size: 1px;
-}
+	.cdk-overlay-connected-position-bounding-box {
+		position: absolute;
+		z-index: 1000;
+		display: flex;
+		flex-direction: column;
+		min-inline-size: 1px;
+		min-block-size: 1px;
+	}
 
-.cdk-overlay-pane {
-	box-sizing: border-box;
-	position: absolute;
-	pointer-events: auto;
-	z-index: 1000;
+	.cdk-overlay-pane {
+		box-sizing: border-box;
+		position: absolute;
+		pointer-events: auto;
+		z-index: 1000;
 
-	> * {
-		flex-grow: 1;
-	}
+		> * {
+			flex-grow: 1;
+		}
 
-	&.mod-optionPicker {
-		min-inline-size: 13rem;
-		max-inline-size: 30rem;
+		&.mod-optionPicker {
+			min-inline-size: 13rem;
+			max-inline-size: 30rem;
+		}
 	}
-}
 
-.cdk-overlay-backdrop {
-	opacity: 0;
-	pointer-events: auto;
-	position: absolute;
-	inset: 0;
-	transition: opacity var(--commons-animations-durations-fast) ease-in-out;
-	z-index: 1000;
+	.cdk-overlay-backdrop {
+		opacity: 0;
+		pointer-events: auto;
+		position: absolute;
+		inset: 0;
+		transition: opacity var(--commons-animations-durations-fast) ease-in-out;
+		z-index: 1000;
 
-	&.cdk-overlay-backdrop-showing {
-		opacity: 0.4;
-	}
+		&.cdk-overlay-backdrop-showing {
+			opacity: 0.4;
+		}
 
-	&.cdk-overlay-dark-backdrop {
-		background-color: color.transparentize(var(--palettes-neutral-900), 0.6);
-	}
+		&.cdk-overlay-dark-backdrop {
+			background-color: color.transparentize(var(--palettes-neutral-900), 0.6);
+		}
 
-	&.cdk-overlay-transparent-backdrop {
-		background: 0 0;
+		&.cdk-overlay-transparent-backdrop {
+			background: 0 0;
+		}
 	}
-}
 
-.cdk-overlay-backdrop.cdk-overlay-backdrop-showing.lu-popup-backdrop {
-	opacity: var(--pr-t-elevation-surface-backdrop);
+	.cdk-overlay-backdrop.cdk-overlay-backdrop-showing.lu-popup-backdrop {
+		opacity: var(--pr-t-elevation-surface-backdrop);
 
-	@include keyframe.fadeIn;
+		@include keyframe.fadeIn;
+	}
 }

package/src/components/cdk/_textarea.scss

@@ -1,26 +1,28 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
-@include namespace.appendRootVars {
-	--components-cdk-textarea-input-padding-horizontal: var(--pr-t-spacings-100);
-}
+@layer components {
+	@include namespace.appendRootVars {
+		--components-cdk-textarea-input-padding-horizontal: var(--pr-t-spacings-100);
+	}
 
-.cdk-textarea-autosize {
-	resize: none;
-	line-height: 1.3;
-	box-sizing: content-box;
-	inline-size: calc(100% - (2 * var(--components-cdk-textarea-input-padding-horizontal)));
+	.cdk-textarea-autosize {
+		resize: none;
+		line-height: 1.3;
+		box-sizing: content-box;
+		inline-size: calc(100% - (2 * var(--components-cdk-textarea-input-padding-horizontal)));
 
-	// specificity to override .textField-input-value:is(textarea)
-	&.textField-input-value {
-		block-size: auto;
-		min-block-size: 0;
+		// specificity to override .textField-input-value:is(textarea)
+		&.textField-input-value {
+			block-size: auto;
+			min-block-size: 0;
+		}
 	}
-}
 
-.cdk-textarea-autosize-measuring {
-	block-size: auto !important;
-	overflow: hidden !important;
-	padding-block: 2px !important;
-	padding-inline: 0 !important;
-	box-sizing: content-box !important;
+	.cdk-textarea-autosize-measuring {
+		block-size: auto !important;
+		overflow: hidden !important;
+		padding-block: 2px !important;
+		padding-inline: 0 !important;
+		box-sizing: content-box !important;
+	}
 }

package/src/definitions/option/_option-item.scss

@@ -3,196 +3,219 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
 
 @include namespace.appendRootVars {
-	--components-options-item-padding-vertical: var(--pr-t-spacings-50);
-	--components-options-item-padding-horizontal: var(--pr-t-spacings-100);
-	--components-options-item-multiple-padding: 2.25rem;
-	--components-options-item-icon-color: var(--palettes-neutral-800);
-	--components-options-checkbox-size: 1.25rem;
-	--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));
-	--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);
-	--components-options-checkbox-border-color: var(--palettes-neutral-700);
-	--components-options-establishment-multiple-padding: 2rem;
+	@layer components {
+		--components-options-item-padding-vertical: var(--pr-t-spacings-50);
+		--components-options-item-padding-horizontal: var(--pr-t-spacings-100);
+		--components-options-item-multiple-padding: 2.25rem;
+		--components-options-item-icon-color: var(--palettes-neutral-800);
+		--components-options-checkbox-size: 1.25rem;
+		--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));
+		--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);
+		--components-options-checkbox-border-color: var(--palettes-neutral-700);
+		--components-options-establishment-multiple-padding: 2rem;
+	}
 }
 
 @mixin optionItemStyle {
 	:host {
-		--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700)); // Allow palette override
+		@layer components {
+			--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700)); // Allow palette override
 
-		display: block;
-		scroll-margin: var(--pr-t-spacings-50);
+			display: block;
+			scroll-margin: var(--pr-t-spacings-50);
 
-		&.withAddOption {
-			scroll-margin-block-end: var(--pr-t-spacings-600);
+			.lu-picker-content-group & {
+				scroll-margin-block-start: var(--pr-t-spacings-400);
+			}
 		}
 
-		.lu-picker-content-group & {
-			scroll-margin-block-start: var(--pr-t-spacings-400);
+		@layer mods {
+			&.withAddOption {
+				scroll-margin-block-end: var(--pr-t-spacings-600);
+			}
 		}
 	}
 
 	.optionItem {
-		position: relative;
+		@layer components {
+			position: relative;
+		}
 	}
 
 	.optionItem-value {
-		position: relative;
-		border-radius: var(--pr-t-border-radius-default);
-		display: block;
-		padding-block: var(--components-options-item-padding-vertical);
-		padding-inline: var(--components-options-item-padding-horizontal);
-		transition: background-color 50ms;
-		cursor: pointer;
-
-		&.is-selected, :host-context([aria-selected="true"]) & {
-			background-color: var(--palettes-50, var(--palettes-product-50));
-
-			&::before {
-				content: '';
-				position: absolute;
-				inset-block: 0;
-				inset-inline-start: calc(var(--pr-t-spacings-50) * -1);
-				inline-size: 2px;
-				background-color: var(--palettes-700, var(--palettes-product-700));
-				border-start-end-radius: var(--pr-t-border-radius-default);
-				border-end-end-radius: var(--pr-t-border-radius-default);
-			}
-
-			&:hover {
-				background-color: var(--palettes-100, var(--palettes-product-100));
-			}
+		@layer components {
+			position: relative;
+			border-radius: var(--pr-t-border-radius-default);
+			display: block;
+			padding-block: var(--components-options-item-padding-vertical);
+			padding-inline: var(--components-options-item-padding-horizontal);
+			transition: background-color 50ms;
+			cursor: pointer;
+		}
 
-			&:active {
-				background-color: var(--palettes-200, var(--palettes-product-200));
-			}
+		@layer states {
+			&.is-selected, :host-context([aria-selected="true"]) & {
+				background-color: var(--palettes-50, var(--palettes-product-50));
 
-			:host-context(.is-highlighted) & {
-				background-color: var(--palettes-100, var(--palettes-product-100));
+				&::before {
+					content: '';
+					position: absolute;
+					inset-block: 0;
+					inset-inline-start: calc(var(--pr-t-spacings-50) * -1);
+					inline-size: 2px;
+					background-color: var(--palettes-700, var(--palettes-product-700));
+					border-start-end-radius: var(--pr-t-border-radius-default);
+					border-end-end-radius: var(--pr-t-border-radius-default);
+				}
 
 				&:hover {
+					background-color: var(--palettes-100, var(--palettes-product-100));
+				}
+
+				&:active {
 					background-color: var(--palettes-200, var(--palettes-product-200));
 				}
-			}
-		}
 
-		&:hover {
-			background-color: var(--palettes-neutral-50);
-		}
+				:host-context(.is-highlighted) & {
+					background-color: var(--palettes-100, var(--palettes-product-100));
 
-		:host-context(.is-highlighted) & {
-			background-color: var(--palettes-neutral-50);
+					&:hover {
+						background-color: var(--palettes-200, var(--palettes-product-200));
+					}
+				}
+			}
 
 			&:hover {
 				background-color: var(--palettes-neutral-50);
 			}
 
+			:host-context(.is-highlighted) & {
+				background-color: var(--palettes-neutral-50);
+
+				&:hover {
+					background-color: var(--palettes-neutral-50);
+				}
+
+				&:active {
+					background-color: var(--palettes-neutral-100);
+				}
+			}
+
 			&:active {
 				background-color: var(--palettes-neutral-100);
 			}
 		}
-
-		&:active {
-			background-color: var(--palettes-neutral-100);
-		}
 	}
 
 	.optionItem-value-group {
-		color: var(--palettes-neutral-600);
-		font: var(--pr-t-font-body-S);
+		@layer components {
+			color: var(--palettes-neutral-600);
+			font: var(--pr-t-font-body-S);
+		}
 	}
 
 	:host-context(.lu-select-value) {
 		.optionItem-value {
-			padding: 0;
-			overflow: hidden;
-			text-overflow: ellipsis;
+			@layer components {
+				padding: 0;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
 
-			&:hover,
-			:host-context(.is-highlighted) & {
-				background-color: inherit;
+			@layer states {
+				&:hover,
+				:host-context(.is-highlighted) & {
+					background-color: inherit;
+				}
 			}
 		}
 	}
 
 	:host-context(.mod-multiple), .formerEmployeeDisplayer {
 		.optionItem-value {
-			position: relative;
-			padding-inline-start: var(--components-options-item-multiple-padding);
-
-			&::after,
-			&::before {
-				display: block;
-				position: absolute;
-				inset-inline-start: var(--pr-t-spacings-100);
-				inset-block-start: var(--pr-t-spacings-75);
-			}
-
-			&::before {
-				content: '';
-				background-color: var(--palettes-neutral-0);
-				border-radius: var(--components-options-checkbox-border-radius);
-				box-shadow: inset 0 0 0 2px var(--components-options-checkbox-border-color);
-				display: block;
-				block-size: var(--components-options-checkbox-size);
-				transition-property: background-color, box-shadow;
-				transition-duration: var(--commons-animations-durations-fast);
-				inline-size: var(--components-options-checkbox-size);
-			}
+			@layer components {
+				position: relative;
+				padding-inline-start: var(--components-options-item-multiple-padding);
 
-			&::after {
-				@include icon.generate('sign_confirm');
-
-				color: transparent;
-				font-size: var(--pr-t-font-body-S-lineHeight);
-				line-height: var(--components-options-checkbox-size);
-				position: absolute;
-				text-align: center;
-				transform: scale(0);
-				transition: all 100ms;
-				inline-size: var(--components-options-checkbox-size);
-			}
+				&::after,
+				&::before {
+					display: block;
+					position: absolute;
+					inset-inline-start: var(--pr-t-spacings-100);
+					inset-block-start: var(--pr-t-spacings-75);
+				}
 
-			&.is-selected, :host-context([aria-selected="true"]) & {
 				&::before {
-					background-color: var(--components-options-checkbox-color);
-					box-shadow: inset 0 0 0 2px var(--components-options-checkbox-color);
+					content: '';
+					background-color: var(--palettes-neutral-0);
+					border-radius: var(--components-options-checkbox-border-radius);
+					box-shadow: inset 0 0 0 2px var(--components-options-checkbox-border-color);
+					display: block;
+					block-size: var(--components-options-checkbox-size);
+					transition-property: background-color, box-shadow;
+					transition-duration: var(--commons-animations-durations-fast);
+					inline-size: var(--components-options-checkbox-size);
 				}
 
 				&::after {
-					color: var(--palettes-neutral-0);
-					transform: scale(1);
+					@include icon.generate('sign_confirm');
+
+					color: transparent;
+					font-size: var(--pr-t-font-body-S-lineHeight);
+					line-height: var(--components-options-checkbox-size);
+					position: absolute;
+					text-align: center;
+					transform: scale(0);
+					transition: all 100ms;
+					inline-size: var(--components-options-checkbox-size);
 				}
+			}
 
-				&.is-disabled {
-					--components-options-checkbox-color: var(--commons-disabled-background);
-
-					background-color: transparent;
+			@layer states {
+				&.is-selected, :host-context([aria-selected="true"]) & {
+					&::before {
+						background-color: var(--components-options-checkbox-color);
+						box-shadow: inset 0 0 0 2px var(--components-options-checkbox-color);
+					}
 
 					&::after {
-						color: var(--palettes-neutral-500); // disabled token candidate
+						color: var(--palettes-neutral-0);
+						transform: scale(1);
 					}
-				}
 
-			}
+					&.is-disabled {
+						--components-options-checkbox-color: var(--commons-disabled-background);
 
-			&.is-disabled {
-				--components-options-checkbox-border-color: var(--palettes-neutral-500); // disabled token candidate
-			}
+						background-color: transparent;
 
-			&:not(.is-disabled):hover {
-				&::before {
-					box-shadow: inset 0 0 0 2px var(--components-options-checkbox-color);
+						&::after {
+							color: var(--palettes-neutral-500); // disabled token candidate
+						}
+					}
+				}
+
+				&.is-disabled {
+					--components-options-checkbox-border-color: var(--palettes-neutral-500); // disabled token candidate
+				}
+
+				&:not(.is-disabled):hover {
+					&::before {
+						box-shadow: inset 0 0 0 2px var(--components-options-checkbox-color);
+					}
 				}
 			}
 		}
 
 		&.establishmentOption {
-			.optionItem-value {
-				position: relative;
-				padding-inline-start: calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2);
+			@layer components {
+				.optionItem-value {
+					position: relative;
+					padding-inline-start: calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2);
 
-				&::before,
-				&::after {
-					inset-inline-start: var(--pr-t-spacings-100);
+					&::before,
+					&::after {
+						inset-inline-start: var(--pr-t-spacings-100);
+					}
 				}
 			}
 		}

package/src/definitions/option/_option-placeholder.scss

@@ -1,9 +1,11 @@
 @mixin optionPlaceholderStyle {
-	.optionPlaceholder {
-		display: block;
-		padding-block: var(--components-options-item-padding-vertical);
-		padding-inline: var(--components-options-item-padding-horizontal);
-		font-style: italic;
-		color: var(--palettes-neutral-600);
+	@layer components {
+		.optionPlaceholder {
+			display: block;
+			padding-block: var(--components-options-item-padding-vertical);
+			padding-inline: var(--components-options-item-padding-horizontal);
+			font-style: italic;
+			color: var(--palettes-neutral-600);
+		}
 	}
 }

package/src/definitions/option/_option-searcher.scss

@@ -1,17 +1,19 @@
 @mixin optionSearcherStyle {
-	.textfield.mod-search {
-		inline-size: 100%;
-	}
+	@layer components {
+		.textfield.mod-search {
+			inline-size: 100%;
+		}
 
-	.textfield-input {
-		outline: none;
-	}
+		.textfield-input {
+			outline: none;
+		}
 
-	.checkbox.mod-formerEmployee {
-		padding-block: var(--pr-t-spacings-50);
-		padding-inline: var(--components-options-item-padding-horizontal);
-		border-block-end: var(--commons-divider-width) solid var(--commons-divider-color);
-		background-color: var(--palettes-neutral-50);
-		font-style: italic;
+		.checkbox.mod-formerEmployee {
+			padding-block: var(--pr-t-spacings-50);
+			padding-inline: var(--components-options-item-padding-horizontal);
+			border-block-end: var(--commons-divider-width) solid var(--commons-divider-color);
+			background-color: var(--palettes-neutral-50);
+			font-style: italic;
+		}
 	}
 }

package/src/definitions/option/_option-selector.scss

@@ -1,11 +1,13 @@
 @mixin optionSelectorStyle {
-	.selectAll-button {
-		color: var(--palettes-neutral-600);
-		font-size: var(--pr-t-font-body-S-fontSize);
-		outline: none;
+	@layer components {
+		.selectAll-button {
+			color: var(--palettes-neutral-600);
+			font-size: var(--pr-t-font-body-S-fontSize);
+			outline: none;
 
-		&:hover {
-			color: var(--palettes-neutral-800);
+			&:hover {
+				color: var(--palettes-neutral-800);
+			}
 		}
 	}
 }

package/src/definitions/select/_select-clearer.scss

@@ -1,14 +1,17 @@
 @mixin selectClearerStyle {
-	:host {
-		display: none;
+	@layer components {
+		:host {
+			display: none;
+		}
 	}
 
-	:host-context(.textfield-input.is-filled) {
-		display: block;
-	}
+	@layer states {
+		:host-context(.textfield-input.is-filled) {
+			display: block;
+		}
 
-	// Disabled
-	:host-context(.textfield-input.is-disabled, .textfield-input[disabled]) {
-		display: none;
+		:host-context(.textfield-input.is-disabled, .textfield-input[disabled]) {
+			display: none;
+		}
 	}
 }