@lucca-front/scss 19.1.6 → 19.2.0

package/src/components/filterPill/states.scss

@@ -0,0 +1,112 @@
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin checkboxChecked {
+	--components-filterPill-borderColor: var(--palettes-product-300);
+	--components-filterPill-backgroundColor: var(--palettes-product-50);
+	--components-filterPill-color: var(--palettes-product-800);
+
+	--components-filterPill-checkbox-backgroundColor: var(--palettes-product-700);
+	--components-filterPill-checkbox-borderColor: var(--palettes-product-700);
+	--components-filterPill-checkbox-icon-scale: 1;
+	--components-filterPill-checkbox-icon-timingFonction: cubic-bezier(0.5, 1, 0.5, 1.5);
+
+	--components-filterPill-label-fontWeight: var(--components-filterPill-label-fontWeightChecked);
+}
+
+@mixin focusVisible {
+	@include a11y.focusVisible($offset: 3px);
+}
+
+@mixin hover {
+	--components-filterPill-borderColor: var(--palettes-product-400);
+	--components-filterPill-checkbox-borderColor: var(--palettes-neutral-600);
+	--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor), var(--pr-t-elevation-shadow-raised);
+}
+
+@mixin active {
+	--components-filterPill-backgroundColor: var(--palettes-neutral-0);
+	box-shadow:
+		0 0 0 1px var(--palettes-product-500),
+		var(--pr-t-elevation-shadow-raised);
+}
+
+@mixin filledHover {
+	--components-filterPill-borderColor: var(--palettes-product-400);
+	--components-filterPill-checkbox-borderColor: var(--palettes-product-600);
+	--components-filterPill-checkbox-backgroundColor: var(--palettes-product-600);
+}
+
+@mixin filledActive {
+	--components-filterPill-backgroundColor: var(--palettes-product-100);
+	--components-filterPill-checkbox-borderColor: var(--palettes-product-700);
+	--components-filterPill-checkbox-backgroundColor: var(--palettes-product-700);
+}
+
+@mixin checkboxDisabled {
+	--components-filterPill-backgroundColor: var(--palettes-neutral-50);
+	--components-filterPill-borderColor: var(--palettes-neutral-300);
+	--components-filterPill-checkbox-borderColor: var(--palettes-neutral-500);
+	--components-filterPill-color: var(--palettes-neutral-500);
+	--components-filterPill-label-cursor: default;
+
+	box-shadow: 0 0 0 1px var(--components-filterPill-borderColor);
+}
+
+@mixin checkboxCheckedDisabled {
+	--components-filterPill-backgroundColor: var(--palettes-neutral-50);
+	--components-filterPill-borderColor: var(--palettes-neutral-300);
+	--components-filterPill-checkbox-borderColor: var(--palettes-neutral-100);
+	--components-filterPill-checkbox-backgroundColor: var(--palettes-neutral-100);
+	--components-filterPill-color: var(--palettes-neutral-500);
+	--components-filterPill-checkbox-color: var(--palettes-neutral-500);
+	--components-filterPill-label-cursor: default;
+}
+
+@mixin filled {
+	--components-filterPill-borderColor: var(--palettes-product-300);
+	--components-filterPill-backgroundColor: var(--palettes-product-50);
+	--components-filterPill-color: var(--palettes-product-800);
+	--components-filterPill-toggle-iconColor: var(--palettes-product-700);
+	--components-filterPill-clear-display: grid;
+}
+
+@mixin notFilled {
+	.filterPill-combobox {
+		@include a11y.mask;
+	}
+}
+
+@mixin comboboxHidden {
+}
+
+@mixin opened {
+	--components-filterPill-toggle-rotation: -0.5turn;
+}
+
+@mixin beginning {
+	--components-filterBar-displayBefore: none;
+}
+
+@mixin ending {
+	--components-filterBar-displayAfter: none;
+}
+
+@mixin disabled {
+	--components-filterPill-clear-display: none;
+	--components-filterPill-backgroundColor: var(--palettes-neutral-50);
+	--components-filterPill-borderColor: var(--palettes-neutral-300) !important;
+	--components-filterPill-color: var(--palettes-neutral-500);
+	--components-filterPill-toggle-iconColor: var(--palettes-neutral-500);
+	--components-filterPill-label-cursor: default;
+	--components-filterPill-arrowColor: var(--palettes-neutral-500);
+	--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);
+
+	box-shadow: var(--components-filterPill-shadow);
+
+	// TODO
+	//--components-filterPill-checkbox-borderColor: var(--palettes-neutral-600);
+}
+
+@mixin hidden {
+	--components-filterPill-display: none;
+}

package/src/components/filterPill/vars.scss

@@ -0,0 +1,25 @@
+@mixin vars {
+	--components-filterPill-gap: 0;
+	--components-filterPill-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);
+	--components-filterPill-label-fontWeightNormal: 400;
+	--components-filterPill-label-fontWeightChecked: 600;
+	--components-filterPill-borderColor: var(--palettes-neutral-100);
+	--components-filterPill-backgroundColor: var(--palettes-neutral-0);
+	--components-filterPill-color: var(--palettes-neutral-700);
+	--components-filterPill-label-cursor: pointer;
+	--components-filterPill-checkbox-backgroundColor: var(--palettes-neutral-0);
+	--components-filterPill-checkbox-color: var(--palettes-neutral-0);
+	--components-filterPill-checkbox-borderColor: var(--palettes-neutral-700);
+	--components-filterPill-checkbox-icon-scale: 0;
+	--components-filterPill-checkbox-icon-timingFonction: cubic-bezier(0.5, -0.5, 0.5, 0);
+	--components-filterPill-clear-display: none;
+	--components-filterPill-toggle-rotation: 0;
+	--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);
+}
+
+@mixin barVars {
+	--components-filterBar-extremitiesDisplay: none;
+}

package/src/components/filters/component.scss

@@ -3,7 +3,7 @@
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: var(--components-filters-background);
 	box-shadow: 0 1px 0 0 var(--commons-border-200);
-	min-height: var(--components-filters-height);
+	min-block-size: var(--components-filters-height);
 	align-items: center;
 	display: flex;
 	position: relative;
@@ -13,25 +13,25 @@
 		.filters-sectionLeft {
 			align-items: center;
 			display: flex;
-			padding-right: var(--pr-t-spacings-400);
+			padding-inline-end: var(--pr-t-spacings-400);
 		}
 
 		.filters-sectionRight {
 			align-items: center;
 			display: flex;
-			margin-left: auto;
-			padding-left: var(--pr-t-spacings-400);
+			margin-inline-start: auto;
+			padding-inline-start: var(--pr-t-spacings-400);
 
 			.textfield.mod-framed {
-				border-left: var(--commons-divider-width) solid var(--commons-divider-color);
-				border-right: 0 !important;
+				border-inline-start: var(--commons-divider-width) solid var(--commons-divider-color);
+				border-inline-end: 0 !important;
 			}
 		}
 	}
 
 	.textfield.mod-framed {
-		border-right: var(--commons-divider-width) solid var(--commons-divider-color);
-		max-width: 16rem;
+		border-inline-end: var(--commons-divider-width) solid var(--commons-divider-color);
+		max-inline-size: 16rem;
 
 		.textfield-input {
 			box-shadow: none !important;

package/src/components/filters/mods.scss

@@ -1,17 +1,16 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 @mixin sticky {
-	top: var(--commons-banner-height);
+	inset-block-start: var(--commons-banner-height);
 	position: fixed;
-	left: 0;
-	right: 0;
+	inset-inline: 0;
 
 	@include media.max('S') {
-		left: 0 !important;
-		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
+		inset-inline-start: 0 !important;
+		inset-block-start: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
 	}
 }
 
 @mixin stickyNavSide {
-	left: var(--commons-navSide-width);
+	inset-inline-start: var(--commons-navSide-width);
 }

package/src/components/footer/component.scss

@@ -2,13 +2,14 @@
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: var(--pr-t-elevation-surface-raised);
-	padding: var(--pr-t-spacings-200) var(--components-footer-paddingInline);
+	padding-block: var(--pr-t-spacings-200);
+	padding-inline: var(--components-footer-paddingInline);
 	display: flex;
 	justify-content: space-between;
 	gap: var(--pr-t-spacings-200);
 	align-items: var(--components-footer-alignItems);
 	box-shadow: var(--pr-t-elevation-shadow-overflow);
-	bottom: 0;
+	inset-block-end: 0;
 	position: var(--components-footer-position);
 	flex-direction: var(--components-footer-direction);
 
@@ -18,7 +19,7 @@
 		}
 
 		.footer-actions {
-			margin-left: var(--components-footer-actions-margin);
+			margin-inline-start: var(--components-footer-actions-margin);
 			display: flex;
 			gap: var(--pr-t-spacings-200);
 			flex-direction: var(--components-footer-direction);
@@ -33,7 +34,7 @@
 			flex-grow: 1;
 			justify-content: space-between;
 			flex-direction: var(--components-footer-direction);
-			max-width: calc(var(--commons-container-maxWidth) - var(--components-footer-paddingInline) * 2);
+			max-inline-size: calc(var(--commons-container-maxWidth) - var(--components-footer-paddingInline) * 2);
 		}
 	}
 }

package/src/components/form/component.scss

@@ -28,12 +28,13 @@
 @mixin componentDeprecated($atRoot: namespace.$defaultAtRoot) {
 	padding: 0;
 	border: 0;
-	margin: 0 0 var(--components-form-group-margin-bottom);
+	margin-block: 0 var(--components-form-group-margin-bottom);
+	margin-inline: 0;
 	position: relative;
 
 	@at-root ($atRoot) {
 		.form-header {
-			margin-bottom: var(--pr-t-spacings-300);
+			margin-block-end: var(--pr-t-spacings-300);
 		}
 
 		.form-header-title {
@@ -56,6 +57,8 @@
 			display: flex;
 			flex-direction: column;
 			gap: var(--pr-t-spacings-50);
+			width: var(--components-form-field-width);
+			max-inline-size: 100%;
 
 			.formLabel {
 				@include formLabel.label;
@@ -71,20 +74,21 @@
 			font-weight: 600;
 			font-size: var(--components-form-label-font-size);
 			margin: 0;
-			padding: 0 0 var(--components-form-label-margin-bottom);
-			width: 100%;
-			text-align: left;
+			padding-block: 0 var(--components-form-label-margin-bottom);
+			padding-inline: 0;
+			inline-size: 100%;
+			text-align: start;
 		}
 
 		.form-group-legend,
 		.form-group-title {
 			font-size: var(--components-field-framed-title-font-size);
 			line-height: var(--components-field-framed-title-line-height);
-			padding-bottom: var(--pr-t-spacings-50);
+			padding-block-end: var(--pr-t-spacings-50);
 		}
 
 		.form-actions {
-			text-align: right;
+			text-align: end;
 		}
 
 		.form {
@@ -92,7 +96,7 @@
 			.radiosfield,
 			.checkboxesfield,
 			.checkbox.mod-field {
-				margin-bottom: var(--components-form-field-margin-bottom);
+				margin-block-end: var(--components-form-field-margin-bottom);
 			}
 		}
 

package/src/components/form/index.scss

@@ -48,6 +48,12 @@
 		@include XS;
 	}
 
+	@each $value in config.$fieldsWidth {
+		&.mod-width#{$value} {
+			@include width($value);
+		}
+	}
+
 	&.mod-checkable,
 	&:has(.radioField),
 	&:has(.checkboxField),
@@ -59,7 +65,7 @@
 		&:has(
 				.textField-input-value[aria-invalid='true'],
 				.timePicker-fieldset-group-textfield-input[aria-invalid='true'],
-				.simpleSelect-input[aria-invalid='true'],
+				.simpleSelect-field-input[aria-invalid='true'],
 				.multipleSelect-displayer-search[aria-invalid='true']
 			) {
 			@include invalid;
@@ -133,9 +139,9 @@
 
 .checkboxesfield.mod-framed,
 .radiosfield.mod-framed {
-	margin-top: 0;
-	padding: var(--components-field-framed-side-padding) var(--components-field-framed-side-padding)
-		var(--components-field-framed-bottom-padding);
+	margin-block-start: 0;
+	padding-block: var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding);
+	padding-inline: var(--components-field-framed-side-padding);
 }
 
 .form-group-label {

package/src/components/form/mods.scss

@@ -14,7 +14,7 @@
 @use '@lucca-front/scss/src/components/box/exports' as box;
 
 @mixin maxWidth {
-	max-width: var(--components-form-maxWidth);
+	max-inline-size: var(--components-form-maxWidth);
 }
 
 @mixin inline {
@@ -27,6 +27,62 @@
 	}
 }
 
+@mixin selectOption {
+	padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100);
+	position: relative;
+	border-radius: var(--commons-borderRadius-M);
+
+	.formLabel {
+		@include formLabel.widthAuto;
+
+		position: static;
+
+		&::after {
+			content: '';
+			position: absolute;
+			inset: 0;
+		}
+	}
+
+	&:not(:has(.checkboxField-input:disabled, .checkboxField-input.is-disabled)) {
+		&:hover {
+			background-color: var(--palettes-neutral-50);
+		}
+
+		&:has(
+				.checkboxField-input:checked,
+				.checkboxField-input.is-checked,
+				.checkboxField-input[aria-checked='mixed'],
+				.checkboxField-input.is-mixed
+			) {
+			background-color: var(--palettes-product-50);
+
+			&:hover {
+				background-color: var(--palettes-product-100);
+			}
+		}
+
+		&:has(.checkboxField-input[aria-invalid='true'], .checkboxField-input.is-invalid) {
+			&:hover {
+				background-color: var(--palettes-error-50);
+			}
+
+			&:has(
+					.checkboxField-input:checked,
+					.checkboxField-input.is-checked,
+					.checkboxField-input[aria-checked='mixed'],
+					.checkboxField-input.is-mixed
+				) {
+				background-color: var(--palettes-error-50);
+
+				&:hover {
+					background-color: var(--palettes-error-100);
+				}
+			}
+		}
+	}
+}
+
 @mixin S {
 	.formLabel {
 		@include formLabel.S;
@@ -91,16 +147,20 @@
 	}
 
 	.checkboxField {
-		top: var(--component-checkboxField-top);
+		inset-block-start: var(--component-checkboxField-top);
 	}
 
 	.radioField {
-		top: var(--component-radioField-top);
+		inset-block-start: var(--component-radioField-top);
 	}
 }
 
+@mixin width($value) {
+	--components-form-field-width: #{math.div($value, 2) * 1rem};
+}
+
 @mixin withArrow {
-	padding-bottom: var(--pr-t-spacings-200);
+	padding-block-end: var(--pr-t-spacings-200);
 	margin-block-end: 0;
 
 	.form-field-arrow {
@@ -121,7 +181,7 @@
 }
 
 @mixin withArrowS {
-	padding-bottom: var(--pr-t-spacings-100);
+	padding-block-end: var(--pr-t-spacings-100);
 
 	.form-field-arrow {
 		@include box.arrowS;
@@ -180,11 +240,11 @@
 		+ .radio,
 		+ .select {
 			position: absolute;
-			bottom: 0;
-			right: 0;
+			inset-block-end: 0;
+			inset-inline-end: 0;
 			z-index: 10;
-			padding: var(--components-field-framed-label-top-offset) var(--components-field-framed-side-padding)
-				var(--components-field-framed-bottom-padding);
+			padding-block: var(--components-field-framed-label-top-offset) var(--components-field-framed-bottom-padding);
+			padding-inline: var(--components-field-framed-side-padding);
 		}
 	}
 }
@@ -198,8 +258,7 @@
 		+ .checkbox,
 		+ .radio,
 		+ .select {
-			top: 0;
-			bottom: auto;
+			inset-block: 0 auto;
 		}
 	}
 }
@@ -214,12 +273,12 @@
 }
 
 @mixin framed {
-	margin-bottom: 0;
+	margin-block-end: 0;
 	background-color: var(--palettes-neutral-0);
 	padding: 0;
 	box-shadow: form.fakeBorderOverlay(var(--palettes-neutral-200));
 	transition: background-color var(--commons-animations-durations-standard);
-	margin-bottom: 0 !important;
+	margin-block-end: 0 !important;
 
 	&::before,
 	&::after {
@@ -251,9 +310,10 @@
 	.radiosfield,
 	.checkboxesfield {
 		display: block;
-		margin-top: var(--components-field-framed-side-padding);
-		margin-bottom: 0;
-		padding: 0 var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding);
+		margin-block-start: var(--components-field-framed-side-padding);
+		margin-block-end: 0;
+		padding-block: 0 var(--components-field-framed-bottom-padding);
+		padding-inline: var(--components-field-framed-side-padding);
 	}
 
 	&.is-disabled,
@@ -266,10 +326,8 @@
 
 		&::before,
 		&::after {
-			left: auto !important;
-			bottom: auto !important;
-			right: var(--components-field-framed-side-padding) !important;
-			top: var(--components-field-framed-side-padding) !important;
+			inset-block: var(--components-field-framed-side-padding) auto !important;
+			inset-inline: auto var(--components-field-framed-side-padding) !important;
 		}
 	}
 }
@@ -299,14 +357,14 @@
 @mixin fieldMaterialFilled($fieldname) {
 	~ .#{$fieldname}-label {
 		font-size: var(--sizes-S-fontSize);
-		top: 0;
+		inset-block-start: 0;
 	}
 }
 
 %isRequired {
 	color: var(--palettes-error-700);
 	display: inline-block;
-	margin-left: 0.2em;
+	margin-inline-start: 0.2em;
 	content: '*';
 	content: '*' / '';
 }

package/src/components/form/vars.scss

@@ -2,6 +2,7 @@
 	--components-form-maxWidth: 40rem;
 	--components-form-group-margin-bottom: 1.2rem;
 	--components-form-field-margin-bottom: var(--pr-t-spacings-200);
+	--components-form-field-width: auto;
 	--components-form-label-font-size: var(--sizes-M-fontSize);
 	--components-form-label-margin-bottom: var(--pr-t-spacings-50);
 	--components-field-framed-side-padding: var(--pr-t-spacings-200);

package/src/components/formLabel/component.scss

@@ -8,15 +8,15 @@
 	font-size: var(--components-formLabel-fontSize);
 	font-weight: 400;
 	line-height: var(--components-formLabel-lineHeight);
-	width: var(--components-formLabel-width);
-	padding-right: var(--components-formLabel-paddingRight);
+	inline-size: var(--components-formLabel-width);
+	padding-inline-end: var(--components-formLabel-paddingRight);
 	cursor: var(--components-formLabel-cursor);
 
 	.lucca-icon {
 		color: var(--palettes-neutral-600);
 		font-size: var(--components-formLabel-help-fontSize);
 		line-height: var(--components-formLabel-help-lineHeight);
-		margin-left: var(--pr-t-spacings-25);
+		margin-inline-start: var(--pr-t-spacings-25);
 		vertical-align: top;
 	}
 
@@ -27,8 +27,8 @@
 			line-height: inherit;
 			font-weight: 600;
 			text-rendering: geometricPrecision;
-			margin-left: var(--pr-t-spacings-25);
-			top: 0; // Reset sup HTML element
+			margin-inline-start: var(--pr-t-spacings-25);
+			inset-block-start: 0; // Reset sup HTML element
 		}
 
 		.formLabel-info {
@@ -51,8 +51,8 @@
 			font-size: var(--sizes-XS-fontSize);
 			color: var(--palettes-neutral-600);
 			position: absolute;
-			right: 0;
-			top: 0;
+			inset-inline-end: 0;
+			inset-block-start: 0;
 		}
 	}
 }

package/src/components/formLabel/mods.scss

@@ -18,7 +18,12 @@
 	--components-formLabel-cursor: pointer;
 }
 
-@mixin counter {
+@mixin widthAuto {
 	--components-formLabel-width: auto;
+}
+
+@mixin counter {
+	@include widthAuto;
+	
 	--components-formLabel-paddingRight: var(--pr-t-spacings-600);
 }

package/src/components/gauge/component.scss

@@ -2,7 +2,7 @@
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	border-radius: var(--commons-borderRadius-full);
-	height: var(--components-gauge-height);
+	block-size: var(--components-gauge-height);
 	overflow: hidden;
 	position: relative;
 	background-color: var(--components-gauge-background);
@@ -10,13 +10,13 @@
 	@at-root ($atRoot) {
 		.gauge-bar {
 			color: var(--palettes-700, var(--palettes-product-700));
-			border-bottom-width: var(--components-gauge-height);
+			border-block-end-width: var(--components-gauge-height);
 			transition-duration: var(--commons-animations-durations-standard);
 			transition-property: border-color, width, height;
-			top: 0;
-			left: 0;
+			inset-block-start: 0;
+			inset-inline-start: 0;
 			position: absolute;
-			border-bottom-style: solid;
+			border-block-end-style: solid;
 			border-color: currentColor;
 			border-radius: var(--commons-borderRadius-full);
 		}

package/src/components/gauge/mods.scss

@@ -3,12 +3,12 @@
 }
 
 @mixin vertical {
-	width: var(--components-gauge-height);
-	height: 100%;
+	inline-size: var(--components-gauge-height);
+	block-size: 100%;
 
 	.gauge-bar {
-		border-left-width: var(--components-gauge-height);
-		border-bottom-width: 0;
-		border-left-style: solid;
+		border-inline-start-width: var(--components-gauge-height);
+		border-inline-start-style: solid;
+		border-block-end-width: 0;
 	}
 }

package/src/components/grid/component.scss

@@ -11,9 +11,9 @@
 	gap: var(--grid-row-gap) var(--grid-column-gap);
 
 	// workaround for Angular replacing CamelCase by kebab-case
-	// max-width: var(--grid-max-width, var(--grid-maxWidth));
-	width: var(--grid-max-width, var(--grid-maxWidth));
-	max-width: 100%;
+	// max-inline-size: var(--grid-max-width, var(--grid-maxWidth));
+	inline-size: var(--grid-max-width, var(--grid-maxWidth));
+	max-inline-size: 100%;
 
 	@at-root ($atRoot) {
 		.grid-containerWrapper {
@@ -31,7 +31,7 @@
 			grid-column-end: span var(--grid-colspan, var(--grid-column-end));
 			grid-row-end: span var(--grid-rowspan, var(--grid-row-end));
 
-			min-width: 0;
+			min-inline-size: 0;
 
 			@each $breakpoint, $value in config.$breakpoints {
 				@include media.min($breakpoint) {