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

package/src/components/_input.scss

@@ -1,54 +1,56 @@
 @use '@lucca-front/scss/src/components/field/exports' as field;
 @use '@lucca-front/scss/src/components/form/exports' as form;
 
-.textfield {
-	.textfield-input.ng-invalid.ng-touched {
-		@include field.inputState('error');
-	}
+@layer states {
+	.textfield {
+		.textfield-input.ng-invalid.ng-touched {
+			@include field.inputState('error');
+		}
 
-	&.mod-material .textfield-input.ng-invalid.ng-touched {
-		@include form.fieldMaterialError('textfield');
+		&.mod-material .textfield-input.ng-invalid.ng-touched {
+			@include form.fieldMaterialError('textfield');
+		}
+
+		&.mod-framed {
+			.textfield-input {
+				&.ng-invalid.ng-touched,
+				&.is-invalid,
+				&.is-error {
+					@include field.fieldFramedError('textfield');
+				}
+			}
+		}
 	}
 
-	&.mod-framed {
+	.form.mod-framed {
 		.textfield-input {
-			&.ng-invalid.ng-touched,
+			&.is-error,
 			&.is-invalid,
-			&.is-error {
+			&.ng-invalid.ng-touched {
 				@include field.fieldFramedError('textfield');
 			}
 		}
-	}
-}
 
-.form.mod-framed {
-	.textfield-input {
-		&.is-error,
-		&.is-invalid,
-		&.ng-invalid.ng-touched {
-			@include field.fieldFramedError('textfield');
-		}
-	}
-
-	.checkbox,
-	.radio {
-		&.is-error,
-		&.is-invalid,
-		&.ng-invalid.ng-touched {
-			@include field.fieldFramedError('radiosfield');
+		.checkbox,
+		.radio {
+			&.is-error,
+			&.is-invalid,
+			&.ng-invalid.ng-touched {
+				@include field.fieldFramedError('radiosfield');
+			}
 		}
 	}
-}
 
-.radiosfield,
-.checkboxesfield {
-	&.mod-framed {
-		.checkbox-input,
-		.radio-input {
-			&.ng-invalid.ng-touched,
-			&.is-invalid,
-			&.is-error {
-				@include field.fieldFramedError('radiosfield');
+	.radiosfield,
+	.checkboxesfield {
+		&.mod-framed {
+			.checkbox-input,
+			.radio-input {
+				&.ng-invalid.ng-touched,
+				&.is-invalid,
+				&.is-error {
+					@include field.fieldFramedError('radiosfield');
+				}
 			}
 		}
 	}

package/src/components/_picker.scss

@@ -1,136 +1,138 @@
 @use 'popover';
 @use '@lucca-front/scss/src/commons/utils/a11y';
 
-.lu-picker-panel {
-	@extend %popover-panel;
-}
-
-.lu-picker-content {
-	@extend %popover-content;
-
-	max-block-size: 20rem;
-	padding: var(--pr-t-spacings-50);
-	overflow-y: auto;
-	display: block;
-	animation: scaleIn 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
-	margin-inline-start: calc(var(--pr-t-spacings-50) * -1);
-	margin-inline-end: calc(var(--pr-t-spacings-50) * -1);
+@layer components {
+	.lu-picker-panel {
+		@extend %popover-panel;
+	}
 
-	&.is-loading {
-		// block-size: 17.5rem;
+	.lu-picker-content {
+		@extend %popover-content;
+
+		max-block-size: 20rem;
+		padding: var(--pr-t-spacings-50);
+		overflow-y: auto;
+		display: block;
+		animation: scaleIn 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
+		margin-inline-start: calc(var(--pr-t-spacings-50) * -1);
+		margin-inline-end: calc(var(--pr-t-spacings-50) * -1);
+
+		&.is-loading {
+			// block-size: 17.5rem;
+		}
 	}
-}
 
-.lu-picker-content-option {
-	display: flex;
-	flex-direction: column;
-	gap: var(--pr-t-spacings-50);
-}
+	.lu-picker-content-option {
+		display: flex;
+		flex-direction: column;
+		gap: var(--pr-t-spacings-50);
+	}
 
-.lu-picker-content-option-emptyState {
-	color: var(--palettes-neutral-600);
-	padding-inline: var(--pr-t-spacings-100);
-	text-align: center;
-}
+	.lu-picker-content-option-emptyState {
+		color: var(--palettes-neutral-600);
+		padding-inline: var(--pr-t-spacings-100);
+		text-align: center;
+	}
 
-.lu-picker-content-option-group {
-	margin-block-end: var(--pr-t-spacings-50);
-}
+	.lu-picker-content-option-group {
+		margin-block-end: var(--pr-t-spacings-50);
+	}
 
-.lu-picker-content-option-group-title {
-	font: var(--pr-t-font-body-S);
-	font-weight: 600;
-	padding-block: var(--components-options-item-padding-vertical);
-	padding-inline: var(--components-options-item-padding-horizontal);
-	color: var(--palettes-neutral-600);
-	position: sticky;
-	inset-block-start: 0;
-	background-color: var(--pr-t-elevation-surface-raised);
-	z-index: 1;
-	display: flex;
-	gap: var(--pr-t-spacings-100);
-	justify-content: space-between;
-	box-shadow: calc(var(--pr-t-spacings-50) * -0.5) calc(var(--pr-t-spacings-50) * -0.5) 0 2px var(--pr-t-elevation-surface-raised); // Mask background options scrolling behind
-
-	&.is-highlighted {
-		background-color: var(--palettes-neutral-50);
-		border-radius: var(--pr-t-border-radius-default);
-		outline: 4px solid var(--palettes-neutral-0);
+	.lu-picker-content-option-group-title {
+		font: var(--pr-t-font-body-S);
+		font-weight: 600;
+		padding-block: var(--components-options-item-padding-vertical);
+		padding-inline: var(--components-options-item-padding-horizontal);
+		color: var(--palettes-neutral-600);
+		position: sticky;
+		inset-block-start: 0;
+		background-color: var(--pr-t-elevation-surface-raised);
+		z-index: 1;
+		display: flex;
+		gap: var(--pr-t-spacings-100);
+		justify-content: space-between;
+		box-shadow: calc(var(--pr-t-spacings-50) * -0.5) calc(var(--pr-t-spacings-50) * -0.5) 0 2px var(--pr-t-elevation-surface-raised); // Mask background options scrolling behind
+
+		&.is-highlighted {
+			background-color: var(--palettes-neutral-50);
+			border-radius: var(--pr-t-border-radius-default);
+			outline: 4px solid var(--palettes-neutral-0);
+		}
 	}
-}
 
-.lu-picker-content-add {
-	position: sticky;
-	display: block;
-	inset-block-end: 0;
-	background-color: var(--palettes-neutral-0);
-	box-shadow: var(--pr-t-elevation-shadow-overflow);
-	padding: var(--pr-t-spacings-50);
-	margin-block: 0;
-	margin-inline: calc(var(--pr-t-spacings-50) * -1);
-	transform: translateY(var(--pr-t-spacings-50));
-}
+	.lu-picker-content-add {
+		position: sticky;
+		display: block;
+		inset-block-end: 0;
+		background-color: var(--palettes-neutral-0);
+		box-shadow: var(--pr-t-elevation-shadow-overflow);
+		padding: var(--pr-t-spacings-50);
+		margin-block: 0;
+		margin-inline: calc(var(--pr-t-spacings-50) * -1);
+		transform: translateY(var(--pr-t-spacings-50));
+	}
 
-.lu-picker-content-loading {
-	padding: var(--pr-t-spacings-50);
-	display: flex;
-	color: var(--palettes-neutral-600);
-}
+	.lu-picker-content-loading {
+		padding: var(--pr-t-spacings-50);
+		display: flex;
+		color: var(--palettes-neutral-600);
+	}
 
-.lu-picker-loading {
-	// deprecated
-	position: absolute;
-	inset-inline-start: 50%;
-	inset-block-start: 50%;
-	transform: translateX(-50%) translateY(-50%);
-}
+	.lu-picker-loading {
+		// deprecated
+		position: absolute;
+		inset-inline-start: 50%;
+		inset-block-start: 50%;
+		transform: translateX(-50%) translateY(-50%);
+	}
 
-.lu-picker-header {
-	background-color: var(--pr-t-elevation-surface-raised);
-	position: sticky;
-	inset-block-start: 0;
-	inset-inline: 0;
-	display: block;
-	z-index: 1;
-	margin-block-end: var(--pr-t-spacings-50);
-	box-shadow: 0 -4px 0 var(--pr-t-spacings-100) var(--pr-t-elevation-surface-raised); // Avoid showing options list while scrolling due to header sticky potisionning
-}
+	.lu-picker-header {
+		background-color: var(--pr-t-elevation-surface-raised);
+		position: sticky;
+		inset-block-start: 0;
+		inset-inline: 0;
+		display: block;
+		z-index: 1;
+		margin-block-end: var(--pr-t-spacings-50);
+		box-shadow: 0 -4px 0 var(--pr-t-spacings-100) var(--pr-t-elevation-surface-raised); // Avoid showing options list while scrolling due to header sticky potisionning
+	}
 
-.lu-picker-textfield {
-	inline-size: 100%;
-	padding-block-end: var(--pr-t-spacings-100);
+	.lu-picker-textfield {
+		inline-size: 100%;
+		padding-block-end: var(--pr-t-spacings-100);
 
-	.textfield-input {
-		background-color: var(--palettes-neutral-0);
-		outline: none;
+		.textfield-input {
+			background-color: var(--palettes-neutral-0);
+			outline: none;
+		}
 	}
-}
 
-.lu-picker-footer {
-	background-color: var(--pr-t-elevation-surface-raised);
-	position: sticky;
-	inset-block-end: 0;
-	inset-inline: 0;
-	display: block;
-	z-index: 1;
-}
+	.lu-picker-footer {
+		background-color: var(--pr-t-elevation-surface-raised);
+		position: sticky;
+		inset-block-end: 0;
+		inset-inline: 0;
+		display: block;
+		z-index: 1;
+	}
 
-.lu-date-picker-panel {
-	inline-size: var(--components-calendar-width);
+	.lu-date-picker-panel {
+		inline-size: var(--components-calendar-width);
 
-	.lu-picker-content {
-		max-block-size: none;
+		.lu-picker-content {
+			max-block-size: none;
+		}
 	}
-}
 
-.lu-picker-content-group {
-	display: flex;
-	flex-direction: column;
-	gap: var(--pr-t-spacings-50);
+	.lu-picker-content-group {
+		display: flex;
+		flex-direction: column;
+		gap: var(--pr-t-spacings-50);
 
-	&:not(:hover, :has(.is-highlighted)) {
-		.link {
-			@include a11y.mask;
+		&:not(:hover, :has(.is-highlighted)) {
+			.link {
+				@include a11y.mask;
+			}
 		}
 	}
 }

package/src/components/_popover.scss

@@ -1,49 +1,57 @@
 %popover-panel {
-	display: flex;
-	flex-direction: column;
-	max-block-size: calc(100vh + 48px);
-	position: relative;
-
-	&.is-above {
-		transform-origin: bottom center;
-	}
-
-	&.is-below {
-		transform-origin: top center;
+	@layer components {
+		display: flex;
+		flex-direction: column;
+		max-block-size: calc(100vh + 48px);
+		position: relative;
 	}
 
-	&.is-before {
-		transform-origin: center right;
-
+	@layer mods {
 		&.is-above {
-			transform-origin: bottom right;
+			transform-origin: bottom center;
 		}
 
 		&.is-below {
-			transform-origin: top right;
+			transform-origin: top center;
 		}
-	}
 
-	&.is-after {
-		transform-origin: center left;
+		&.is-before {
+			transform-origin: center right;
 
-		&.is-above {
-			transform-origin: bottom left;
+			&.is-above {
+				transform-origin: bottom right;
+			}
+
+			&.is-below {
+				transform-origin: top right;
+			}
 		}
 
-		&.is-below {
-			transform-origin: top left;
+		&.is-after {
+			transform-origin: center left;
+
+			&.is-above {
+				transform-origin: bottom left;
+			}
+
+			&.is-below {
+				transform-origin: top left;
+			}
 		}
 	}
 }
 
 %popover-content {
-	background-color: var(--pr-t-elevation-surface-raised);
-	box-shadow: var(--pr-t-elevation-shadow-overlay);
-	border-radius: var(--pr-t-border-radius-structure);
+	@layer components {
+		background-color: var(--pr-t-elevation-surface-raised);
+		box-shadow: var(--pr-t-elevation-shadow-overlay);
+		border-radius: var(--pr-t-border-radius-structure);
+	}
 
-	&:focus-within {
-		outline: none;
+	@layer states {
+		&:focus-within {
+			outline: none;
+		}
 	}
 }
 
@@ -54,6 +62,8 @@
 .lu-popover-content {
 	@extend %popover-content;
 
-	padding-block: var(--pr-t-spacings-100);
-	padding-inline: var(--pr-t-spacings-150);
+	@layer components {
+		padding-block: var(--pr-t-spacings-100);
+		padding-inline: var(--pr-t-spacings-150);
+	}
 }