@lucca-front/scss 19.1.6 → 19.2.0

package/src/components/radio/mods.scss

@@ -1,21 +1,20 @@
 @mixin inline {
 	display: inline-block;
-	margin-right: var(--pr-t-spacings-300);
-	margin-top: 0;
-	margin-bottom: 0;
+	margin-inline-end: var(--pr-t-spacings-300);
+	margin-block: 0;
 }
 
 @mixin S {
 	.radio-label {
 		line-height: var(--sizes-S-lineHeight);
-		min-height: var(--sizes-S-lineHeight);
+		min-block-size: var(--sizes-S-lineHeight);
 		font-size: var(--sizes-S-fontSize);
 		padding: var(--components-radio-S-label-padding);
 
 		&::before,
 		&::after {
-			height: var(--components-radio-S-input-size);
-			width: var(--components-radio-S-input-size);
+			block-size: var(--components-radio-S-input-size);
+			inline-size: var(--components-radio-S-input-size);
 		}
 	}
 
@@ -26,7 +25,7 @@
 
 	.radio-input:checked ~ .radio-label {
 		&::after {
-			transform: scale(.5);
+			transform: scale(0.5);
 		}
 	}
 }

package/src/components/radioButtons/component.scss

@@ -8,10 +8,10 @@
 	@at-root ($atRoot) {
 		.radioButtons-item {
 			position: relative;
-			margin-left: 1px;
+			margin-inline-start: 1px;
 
 			&:first-child {
-				margin-left: 0;
+				margin-inline-start: 0;
 
 				.radioButtons-item-label {
 					border-radius: var(--commons-borderRadius-M) 0 0 var(--commons-borderRadius-M);
@@ -50,7 +50,7 @@
 			transition-property: background-color, color, box-shadow;
 			overflow: hidden;
 			position: relative;
-			height: 100%;
+			block-size: 100%;
 			cursor: pointer;
 		}
 

package/src/components/radioField/component.scss

@@ -4,8 +4,8 @@
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	position: relative;
-	width: fit-content;
-	height: fit-content;
+	inline-size: fit-content;
+	block-size: fit-content;
 	display: grid;
 	grid-template-areas: 'radio';
 	grid-template-columns: var(--component-radioField-size);
@@ -40,8 +40,8 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			width: 100%;
-			height: 100%;
+			inline-size: 100%;
+			block-size: 100%;
 			transform: scale(0);
 			transition-property: transform;
 			transition-duration: var(--commons-animations-durations-fast);
@@ -66,8 +66,8 @@
 			opacity: 0.0001;
 			cursor: pointer;
 			grid-area: radio;
-			width: 100%;
-			height: 100%;
+			inline-size: 100%;
+			block-size: 100%;
 		}
 	}
 }

package/src/components/scrollBox/component.scss

@@ -1,31 +1,37 @@
 @use '@lucca-front/scss/src/commons/utils/color';
+@use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: var(--components-scrollBox-backgroundColor);
 	position: relative;
 	display: flex;
+	flex-wrap: var(--components-scrollBox-wrap);
+	gap: var(--components-scrollBox-gap);
 	overflow: auto;
-	scrollbar-width: thin;
+	scrollbar-width: var(--components-scrollBox-scrollBarWidth);
+	margin-inline: var(--components-scrollBox-marginInline);
+	padding-inline: var(--components-scrollBox-paddingInline);
+	padding-block: var(--components-scrollBox-paddingBlock);
+	margin-block: var(--components-scrollBox-marginBlock);
+	border-radius: var(--commons-borderRadius-M);
 
-	@media (hover: none) {
-		scrollbar-width: none;
-
-		&::-webkit-scrollbar {
-			display: none;
-		}
+	&:focus-visible {
+		@include a11y.focusVisible($offset: 0);
 	}
 
 	&::before,
 	&::after {
-		content: '';
+		content: var(--components-scrollBox-pseudoElementsContent);
 		pointer-events: none;
 		position: sticky;
 		flex-shrink: 0;
-		width: var(--components-scrollBox-shadowWidth);
-		top: 0;
-		bottom: 0;
+		inline-size: var(--components-scrollBox-shadowSize);
+		inset-block: 0;
+		margin-block: calc(var(--components-scrollBox-paddingBlock) * -1);
 		background-repeat: no-repeat;
+		z-index: 10;
+		align-self: stretch;
 		background-size:
 			75% 100%,
 			25% 100%,
@@ -33,7 +39,9 @@
 	}
 
 	&::before {
-		left: 0;
+		opacity: var(--components-scrollBox-beforeOpacity);
+		inset-inline-start: calc(var(--components-scrollBox-paddingInline) * -1);
+		margin-inline-end: calc(var(--components-scrollBox-shadowSize) * -1 - var(--components-scrollBox-gap));
 		background-position: 0% 50%;
 		background-image: radial-gradient(
 				farthest-side at 0% 50%,
@@ -53,7 +61,9 @@
 	}
 
 	&::after {
-		right: 0;
+		opacity: var(--components-scrollBox-afterOpacity);
+		inset-inline-end: calc(var(--components-scrollBox-paddingInline) * -1);
+		margin-inline-start: calc(var(--components-scrollBox-shadowSize) * -1 - var(--components-scrollBox-gap));
 		background-position: 100% 50%;
 		background-image: radial-gradient(
 				farthest-side at 100% 50%,
@@ -71,48 +81,4 @@
 				color.transparentize(var(--palettes-neutral-900), 0)
 			);
 	}
-
-	@at-root ($atRoot) {
-		.scrollBox-inner {
-			flex-shrink: 0;
-			position: relative;
-
-			&::before,
-			&::after {
-				content: '';
-				position: absolute;
-				z-index: 1;
-				display: block;
-				top: 1px;
-				bottom: 1px;
-				width: calc(var(--components-scrollBox-shadowWidth) / 2);
-				pointer-events: none;
-			}
-
-			&::before {
-				left: calc(var(--components-scrollBox-shadowWidth) * -1);
-				background-image: linear-gradient(
-					to right,
-					var(--components-scrollBox-backgroundColor) var(--components-scrollBox-shadowWidth),
-					color.transparentize(var(--palettes-neutral-900), 0)
-				);
-			}
-
-			&::after {
-				right: calc(var(--components-scrollBox-shadowWidth) * -1);
-				background-image: linear-gradient(
-					to left,
-					var(--components-scrollBox-backgroundColor) var(--components-scrollBox-shadowWidth),
-					color.transparentize(var(--palettes-neutral-900), 0)
-				);
-			}
-		}
-
-		.scrollBox-inner-content {
-			margin-left: calc(var(--components-scrollBox-shadowWidth) * -1);
-			margin-right: calc(var(--components-scrollBox-shadowWidth) * -1);
-			position: relative;
-			z-index: 2;
-		}
-	}
 }

package/src/components/scrollBox/index.scss

@@ -3,4 +3,16 @@
 .scrollBox {
 	@include vars;
 	@include component;
+
+	&.is-firstVisible {
+		@include firstVisible;
+	}
+
+	&.is-lastVisible {
+		@include lastVisible;
+	}
+
+	&.is-disabled {
+		@include disabled;
+	}
 }

package/src/components/scrollBox/mods.scss

@@ -1,2 +0,0 @@
-@mixin mod {
-}

package/src/components/scrollBox/states.scss

@@ -1,2 +1,12 @@
-@mixin state {
+@mixin firstVisible {
+	--components-scrollBox-beforeOpacity: 0;
+}
+
+@mixin lastVisible {
+	--components-scrollBox-afterOpacity: 0;
+}
+
+@mixin disabled {
+	--components-scrollBox-wrap: wrap;
+	--components-scrollBox-pseudoElementsContent: none;
 }

package/src/components/scrollBox/vars.scss

@@ -1,5 +1,15 @@
 @mixin vars {
 	--components-scrollBox-backgroundColor: var(--pr-t-elevation-surface-default);
 	--components-scrollBox-shadowColor: var(--palettes-neutral-400);
-	--components-scrollBox-shadowWidth: var(--pr-t-spacings-150);
+	--components-scrollBox-shadowSize: var(--pr-t-spacings-150);
+	--components-scrollBox-beforeOpacity: 1;
+	--components-scrollBox-afterOpacity: 1;
+	--components-scrollBox-gap: var(--pr-t-spacings-100);
+	--components-scrollBox-scrollBarWidth: thin;
+	--components-scrollBox-paddingInline: var(--pr-t-spacings-200);
+	--components-scrollBox-paddingBlock: var(--pr-t-spacings-100);
+	--components-scrollBox-marginInline: calc(var(--components-scrollBox-paddingInline) * -1);
+	--components-scrollBox-marginBlock: calc(var(--components-scrollBox-paddingBlock) * -1);
+	--components-scrollBox-wrap: nowrap;
+	--components-scrollBox-pseudoElementsContent: '';
 }

package/src/components/section/component.scss

@@ -1,5 +1,5 @@
 @mixin component {
 	background-color: var(--pr-t-elevation-surface-raised);
-	border-bottom: 1px solid #e5e5e5;
+	border-block-end: 1px solid #e5e5e5;
 	padding: var(--pr-t-spacings-600);
 }

package/src/components/section/mods.scss

@@ -3,11 +3,9 @@
 }
 
 @mixin S {
-	padding-left: var(--pr-t-spacings-400);
-	padding-right: var(--pr-t-spacings-400);
+	padding-inline: var(--pr-t-spacings-400);
 }
 
 @mixin XS {
-	padding-left: var(--pr-t-spacings-200);
-	padding-right: var(--pr-t-spacings-200);
+	padding-inline: var(--pr-t-spacings-200);
 }

package/src/components/segmentedControl/component.scss

@@ -5,14 +5,16 @@
 	margin: 0;
 	list-style-type: none;
 	display: flex;
-	flex-wrap: wrap;
-	width: var(--components-segmentedControl-width);
+	flex-wrap: var(--components-segmentedControl-wrap);
+	inline-size: var(--components-segmentedControl-width);
 	flex-direction: var(--components-segmentedControl-direction);
-	box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-300);
+	box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);
 	border-radius: var(--components-segmentedControl-borderRadius);
 	background-color: var(--palettes-neutral-0);
 	font-size: var(--components-segmentedControl-fontSize);
 	line-height: var(--components-segmentedControl-lineHeight);
+	gap: var(--commons-divider-width);
+	white-space: var(--components-segmentedControl-whiteSpace);
 
 	@at-root ($atRoot) {
 		.segmentedControl-item-input {
@@ -37,33 +39,33 @@
 				content: '';
 				border-width: 0;
 				inset: var(--components-segmentedControl-dividerInset);
-				border-color: var(--palettes-grey-200);
+				border-color: var(--palettes-neutral-100);
 				position: absolute;
 				border-style: solid;
 			}
 
 			&::before {
-				right: calc(var(--commons-divider-width) * -1);
-				border-left-width: var(--commons-divider-width);
-				left: auto;
+				inset-inline-end: calc(var(--commons-divider-width) * -1);
+				border-inline-start-width: var(--commons-divider-width);
+				inset-inline-start: auto;
 			}
 
 			&::after {
-				bottom: calc(var(--commons-divider-width) * -1);
-				border-top-width: var(--commons-divider-width);
-				top: auto;
+				inset-block-end: calc(var(--commons-divider-width) * -1);
+				border-block-start-width: var(--commons-divider-width);
+				inset-block-start: auto;
 			}
 		}
 
 		//.viewTabs-item-tab is deprecated
 		.segmentedControl-item-action,
 		.viewTabs-item-tab {
-			width: 100%;
+			inline-size: 100%;
 			border: 0;
 			margin: 0;
 			padding: var(--components-segmentedControl-padding);
 			background-color: var(--components-segmentedControl-background);
-			box-shadow: 0 0 0 var(--commons-divider-width) var(--components-segmentedControl-shadow);
+			box-shadow: var(--components-segmentedControl-shadow);
 			border-radius: var(--components-segmentedControl-borderRadius);
 			gap: var(--pr-t-spacings-100);
 			color: var(--components-segmentedControl-color);
@@ -75,30 +77,23 @@
 			cursor: var(--components-segmentedControl-cursor);
 			z-index: var(--components-segmentedControl-zIndex);
 			font: inherit;
+			transition-property: box-shadow;
+			transition-duration: var(--commons-animations-durations-fast);
 
 			&:focus-visible {
 				@include a11y.focusVisible($offset: 3px);
 			}
 
-			&::before {
-				content: var(--components-segmentedControl-backgroundContent);
-				z-index: -1;
-				position: absolute;
-				background-color: var(--palettes-neutral-50);
-				inset: var(--pr-t-spacings-75);
-				bottom: calc(var(--pr-t-spacings-75) - var(--commons-divider-width));
-				border-radius: var(--commons-borderRadius-M);
-				transition-property: scale, opacity;
-				transition-duration: var(--commons-animations-durations-standard);
-				opacity: 0;
-				scale: 0;
+			&:hover {
+				--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-400),
+					var(--pr-t-elevation-shadow-raised);
+				--components-segmentedControl-zIndex: 1;
 			}
 
-			&:hover {
-				&::before {
-					opacity: 1;
-					scale: 1;
-				}
+			&:active {
+				--components-segmentedControl-background: var(--palettes-neutral-0);
+				--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-500),
+					var(--pr-t-elevation-shadow-raised);
 			}
 		}
 

package/src/components/segmentedControl/states.scss

@@ -2,7 +2,7 @@
 
 @mixin selected {
 	--components-segmentedControl-background: var(--palettes-product-50);
-	--components-segmentedControl-shadow: var(--palettes-product-500);
+	--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-500);
 	--components-segmentedControl-color: var(--palettes-product-800);
 	--components-segmentedControl-cursor: default;
 	--components-segmentedControl-backgroundContent: none;

package/src/components/segmentedControl/vars.scss

@@ -4,12 +4,13 @@
 	--components-segmentedControl-fontSize: var(--sizes-M-fontSize);
 	--components-segmentedControl-lineHeight: var(--sizes-M-lineHeight);
 	--components-segmentedControl-background: transparent;
-	--components-segmentedControl-shadow: transparent;
+	--components-segmentedControl-shadow: none;
 	--components-segmentedControl-color: var(--palettes-neutral-700);
 	--components-segmentedControl-cursor: pointer;
 	--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);
 	--components-segmentedControl-direction: row;
 	--components-segmentedControl-width: fit-content;
-	--components-segmentedControl-backgroundContent: '';
 	--components-segmentedControl-zIndex: 0;
+	--components-segmentedControl-wrap: wrap;
+	--components-segmentedControl-whiteSpace: normal;
 }

package/src/components/simpleSelect/component.scss

@@ -2,23 +2,26 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	display: grid;
-	grid-template-columns: 1fr auto auto;
-	align-items: center;
-	box-shadow: 0 0 0 1px var(--components-simpleSelect-border-color);
-	background-color: var(--components-simpleSelect-background);
-	border-radius: var(--commons-borderRadius-M);
-	padding: var(--components-simpleSelect-padding);
-	overflow: hidden;
-	outline: none;
-	cursor: pointer;
-
-	&:hover {
-		--components-simpleSelect-border-color: var(--pr-t-color-input-border-hover);
-	}
+	display: block;
 
 	@at-root ($atRoot) {
-		.simpleSelect-input {
+		.simpleSelect-field {
+			display: grid;
+			grid-template-columns: 1fr auto auto;
+			align-items: center;
+			box-shadow: 0 0 0 1px var(--components-simpleSelect-border-color);
+			background-color: var(--components-simpleSelect-background);
+			border-radius: var(--commons-borderRadius-M);
+			padding: var(--components-simpleSelect-padding);
+			overflow: hidden;
+			outline: none;
+			cursor: pointer;
+
+			&:hover {
+				--components-simpleSelect-border-color: var(--pr-t-color-input-border-hover);
+			}
+		}
+		.simpleSelect-field-input {
 			grid-column-start: 1;
 			grid-row-start: 1;
 			font-size: var(--components-simpleSelect-fontSize);
@@ -30,7 +33,7 @@
 			outline: none;
 			position: relative;
 			z-index: 1;
-			min-width: 0;
+			min-inline-size: 0;
 			cursor: pointer;
 
 			&::placeholder {
@@ -38,10 +41,10 @@
 			}
 		}
 
-		.simpleSelect-value {
+		.simpleSelect-field-value {
 			grid-column-start: 1;
 			grid-row-start: 1;
-			width: 100%;
+			inline-size: 100%;
 			font-size: var(--components-simpleSelect-fontSize);
 			line-height: var(--components-simpleSelect-lineHeight);
 			color: var(--components-simpleSelect-value-color);
@@ -51,17 +54,24 @@
 			transition: color var(--commons-animations-durations-fast) ease;
 		}
 
-		.simpleSelect-clear {
+		.simpleSelect-field-clear {
 			grid-column-start: -2;
-			margin-left: var(--components-simpleSelect-gap);
+			margin-inline-start: var(--components-simpleSelect-gap);
 		}
 
-		.simpleSelect-arrow {
+		.simpleSelect-field-icon {
 			grid-column-start: -1;
-			margin-left: var(--components-simpleSelect-gap);
+			margin-inline-start: var(--components-simpleSelect-gap);
 			color: var(--components-simpleSelect-arrow-color);
 			transition: transform var(--commons-animations-durations-standard) ease;
-			@include icon.M;
+
+			.lucca-icon {
+				@include icon.M;
+			}
+
+			&.mod-search {
+				display: none;
+			}
 		}
 	}
 }

package/src/components/simpleSelect/index.scss

@@ -4,6 +4,29 @@
 	@include vars;
 	@include component;
 
+	&:has(.simpleSelect-field-input:focus-visible) {
+		@include focused;
+
+		&:has(.simpleSelect-field-input[aria-expanded='true']) {
+			@include focusedExpanded;
+		}
+	}
+
+	&:has(.simpleSelect-field-input:focus-visible),
+	&:has(.simpleSelect-field-input[aria-expanded='true']) {
+		&:not(:has(.simpleSelect-field-input:read-only)) {
+			@include searchable;
+		}
+	}
+
+	&:has(.simpleSelect-field-input[aria-invalid='true']) {
+		@include invalid;
+	}
+
+	&:has(.simpleSelect-field-input:disabled) {
+		@include disabled;
+	}
+
 	&.mod-S {
 		@include S;
 	}
@@ -12,12 +35,8 @@
 		@include XS;
 	}
 
-	&:has(.simpleSelect-input:focus-visible) {
-		@include focused;
-
-		&:has(.simpleSelect-input[aria-expanded="true"]) {
-			@include focusedExpanded;
-		}
+	&.mod-filterPill {
+		@include filterPill;
 	}
 
 	&.is-searchFilled {
@@ -31,12 +50,4 @@
 			@include selectedSearchFilled;
 		}
 	}
-
-	&:has(.simpleSelect-input[aria-invalid="true"]) {
-		@include invalid;
-	}
-
-	&:has(.simpleSelect-input:disabled) {
-		@include disabled;
-	}
 }

package/src/components/simpleSelect/mods.scss

@@ -7,11 +7,13 @@
 	--components-simpleSelect-padding: var(--pr-t-spacings-75);
 	--components-simpleSelect-gap: var(--pr-t-spacings-75);
 
-	.simpleSelect-arrow {
-		@include icon.S;
+	.simpleSelect-field-icon {
+		.lucca-icon {
+			@include icon.S;
+		}
 	}
 
-	.simpleSelect-clear {
+	.simpleSelect-field-clear {
 		// :not(.class) is only there to increase specificity when the class isn’t present
 		// but the class should be present, and this code is temporary
 		&.clear,
@@ -27,11 +29,13 @@
 	--components-simpleSelect-padding: var(--pr-t-spacings-50);
 	--components-simpleSelect-gap: var(--pr-t-spacings-50);
 
-	.simpleSelect-arrow {
-		@include icon.XS;
+	.simpleSelect-field-icon {
+		.lucca-icon {
+			@include icon.XS;
+		}
 	}
 
-	.simpleSelect-clear {
+	.simpleSelect-field-clear {
 		// :not(.class) is only there to increase specificity when the class isn’t present
 		// but the class should be present, and this code is temporary
 		&.clear,
@@ -40,3 +44,26 @@
 		}
 	}
 }
+
+@mixin filterPill {
+	width: 21rem;
+	max-width: calc(100vw - 2.5rem);
+
+	.simpleSelect-field {
+		position: relative;
+		z-index: 1;
+	}
+
+	lu-simple-select-default-option.u-ellipsis {
+		white-space: normal !important;
+	}
+
+	.lu-picker-content {
+		animation: none;
+		box-shadow: none;
+		border-radius: 0;
+		background-color: transparent;
+		padding: var(--pr-t-spacings-50);
+		margin: var(--pr-t-spacings-50) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
+	}
+}