@lucca-front/scss 19.1.6 → 19.2.0

package/src/components/simpleSelect/states.scss

@@ -1,49 +1,62 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
 
+@mixin searchable {
+	.simpleSelect-field-icon {
+		display: none;
+
+		&.mod-search {
+			display: inline-flex;
+			transform: none;
+		}
+	}
+}
+
 @mixin focused {
-	@include a11y.focusVisible($offset: 3px);
+	.simpleSelect-field {
+		@include a11y.focusVisible($offset: 3px);
+	}
 
-	.simpleSelect-value {
+	.simpleSelect-field-value {
 		color: var(--components-simpleSelect-value-color);
 	}
 }
 
 @mixin focusedExpanded {
-	.simpleSelect-value {
+	.simpleSelect-field-value {
 		color: var(--components-simpleSelect-placeholder);
 	}
 
-	.simpleSelect-arrow {
+	.simpleSelect-field-icon {
 		transform: rotate(-180deg);
 	}
 }
 
 @mixin searchFilled {
-	.simpleSelect-value {
+	.simpleSelect-field-value {
 		display: none;
 	}
 }
 
 @mixin selected {
-	.simpleSelect-input {
+	.simpleSelect-field-input {
 		&::placeholder {
 			color: transparent;
 		}
 	}
 
-	.simpleSelect-value {
+	.simpleSelect-field-value {
 		display: flex;
 	}
 }
 
 @mixin selectedSearchFilled {
-	.simpleSelect-input {
+	.simpleSelect-field-input {
 		&::placeholder {
 			color: transparent;
 		}
 	}
 
-	.simpleSelect-value {
+	.simpleSelect-field-value {
 		display: none;
 	}
 }
@@ -59,5 +72,8 @@
 	--components-simpleSelect-placeholder: var(--commons-disabled-placeholder); // Deprecated: no placeholder with disabled state
 	--components-simpleSelect-value-color: var(--pr-t-color-input-text-disabled);
 	--components-simpleSelect-arrow-color: var(--pr-t-color-input-icon-disabled);
-	pointer-events: none;
+
+	.simpleSelect-field {
+		pointer-events: none;
+	}
 }

package/src/components/skeleton/mods.scss

@@ -5,14 +5,14 @@
 
 @mixin square {
 	border-radius: var(--commons-borderRadius-M);
-	height: var(--components-skeleton-shape-height);
-	width: var(--components-skeleton-shape-width);
+	block-size: var(--components-skeleton-shape-height);
+	inline-size: var(--components-skeleton-shape-width);
 }
 
 @mixin circle {
 	border-radius: var(--commons-borderRadius-full);
-	height: var(--components-skeleton-shape-height);
-	width: var(--components-skeleton-shape-width);
+	block-size: var(--components-skeleton-shape-height);
+	inline-size: var(--components-skeleton-shape-width);
 }
 
 @mixin XS {

package/src/components/skeleton/states.scss

@@ -13,7 +13,7 @@
 				--components-skeleton-text-offset: 0.5rem;
 			}
 
-			height: var(--sizes-#{$size}-lineHeight);
+			block-size: var(--sizes-#{$size}-lineHeight);
 		}
 	}
 }
@@ -21,9 +21,9 @@
 @mixin skeletonTitleSizing($titles...) {
 	@each $title in $titles {
 		&:is(.u-#{$title}, #{$title}) {
-			height: auto;
+			block-size: auto;
 			line-height: var(--sizes-lineHeight);
-			min-height: var(--sizes-lineHeight);
+			min-block-size: var(--sizes-lineHeight);
 
 			@if ($title == 'h1') {
 				--components-skeleton-text-offset: 0.5rem;
@@ -63,8 +63,8 @@
 				calc(var(--components-skeleton-text-offset) + 1px) calc(100% - var(--components-skeleton-text-width, 100%))
 					calc(var(--components-skeleton-text-offset) - 1px) 0 var(--components-skeleton-text-clipPathRound)
 			);
-			height: var(--sizes-M-lineHeight);
-			width: 100%;
+			block-size: var(--sizes-M-lineHeight);
+			inline-size: 100%;
 		}
 	}
 

package/src/components/skipLinks/component.scss

@@ -9,7 +9,7 @@
 	padding: 0;
 	z-index: 9010;
 	inset: var(--pr-t-spacings-150);
-	bottom: auto;
+	inset-block-end: auto;
 
 	@at-root ($atRoot) {
 		.skipLinks-action {
@@ -19,7 +19,8 @@
 			border-radius: var(--commons-borderRadius-M);
 			font-size: var(--sizes-XS-fontSize);
 			line-height: var(--sizes-XS-lineHeight);
-			padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100);
+			padding-block: var(--pr-t-spacings-50);
+			padding-inline: var(--pr-t-spacings-100);
 			transition: all var(--commons-animations-durations-fast);
 			background-color: var(--palettes-neutral-600);
 			display: inline-block;

package/src/components/sortableList/component.scss

@@ -10,9 +10,9 @@
 
 	@at-root ($atRoot) {
 		.sortableList-item {
-			border-bottom-width: var(--commons-divider-width);
-			border-bottom-color: var(--commons-divider-color);
-			border-bottom-style: solid;
+			border-block-end-width: var(--commons-divider-width);
+			border-block-end-color: var(--commons-divider-color);
+			border-block-end-style: solid;
 			color: var(--palettes-neutral-800);
 			display: flex;
 			position: relative;
@@ -28,7 +28,7 @@
 		.sortableList-item-content {
 			color: var(--palettes-neutral-800);
 			text-decoration: none;
-			width: 100%;
+			inline-size: 100%;
 		}
 
 		.sortableList-item-content-description {
@@ -45,9 +45,9 @@
 		}
 
 		.sortableList-item-actions {
-			margin-left: auto;
+			margin-inline-start: auto;
 			white-space: nowrap;
-			padding-left: 0;
+			padding-inline-start: 0;
 		}
 
 		.sortableList-item-handler {
@@ -62,7 +62,7 @@
 		}
 
 		.sortableList-clear {
-			margin-top: var(--pr-t-spacings-50);
+			margin-block-start: var(--pr-t-spacings-50);
 		}
 	}
 }

package/src/components/statusBadge/component.scss

@@ -8,7 +8,8 @@
 	font-size: var(--components-statusBadge-fontSize);
 	gap: var(--pr-t-spacings-50);
 	line-height: var(--components-statusBadge-lineHeight);
-	padding: calc(var(--pr-t-spacings-50) / 2) var(--pr-t-spacings-100) calc(var(--pr-t-spacings-50) / 2) var(--pr-t-spacings-75);
+	padding-block: calc(var(--pr-t-spacings-50) / 2) calc(var(--pr-t-spacings-50) / 2);
+	padding-inline: var(--pr-t-spacings-75) var(--pr-t-spacings-100);
 	white-space: nowrap;
 	font-weight: normal;
 
@@ -17,10 +18,10 @@
 		border-radius: var(--commons-borderRadius-full);
 		content: '\a0'; // Unbreakable space to avoid vertical alignement issues with inline-flex in some contexts like tables
 		display: block;
-		height: var(--components-statusBadge-dot-size);
+		block-size: var(--components-statusBadge-dot-size);
 		flex-shrink: 0;
-		width: var(--components-statusBadge-dot-size);
-		top: var(--components-statusBadge-dot-top);
+		inline-size: var(--components-statusBadge-dot-size);
+		inset-block-start: var(--components-statusBadge-dot-top);
 		position: relative;
 	}
 

package/src/components/switch/component.scss

@@ -14,7 +14,7 @@
 
 		.switch-label {
 			padding: 0;
-			padding-left: calc(var(--components-switch-width) + var(--pr-t-spacings-100));
+			padding-inline-start: calc(var(--components-switch-width) + var(--pr-t-spacings-100));
 			color: var(--palettes-neutral-800);
 			transition: color var(--commons-animations-durations-fast);
 			display: inline-block;
@@ -32,16 +32,16 @@
 				color: var(--palettes-neutral-0);
 				display: flex;
 				font-size: var(--components-switch-icon-size);
-				height: var(--components-switch-height);
-				left: 0;
+				block-size: var(--components-switch-height);
+				inset-inline-start: 0;
 				line-height: var(--components-switch-icon-size);
-				padding-left: calc(var(--components-switch-handler-offset) + var(--components-switch-slider-size));
+				padding-inline-start: calc(var(--components-switch-handler-offset) + var(--components-switch-slider-size));
 				position: absolute;
-				top: var(--components-switch-offset-top);
+				inset-block-start: var(--components-switch-offset-top);
 				transition-duration: var(--commons-animations-durations-fast);
 				transition-timing-function: ease;
 				transition-property: background-color, box-shadow;
-				width: var(--components-switch-width);
+				inline-size: var(--components-switch-width);
 			}
 
 			&::after {
@@ -50,12 +50,12 @@
 				border-radius: var(--commons-borderRadius-full);
 				content: '';
 				display: block;
-				height: var(--components-switch-slider-size);
-				left: var(--components-switch-handler-offset);
+				block-size: var(--components-switch-slider-size);
+				inset-inline-start: var(--components-switch-handler-offset);
 				position: absolute;
-				top: calc(var(--components-switch-offset-top) + var(--components-switch-handler-offset));
+				inset-block-start: calc(var(--components-switch-offset-top) + var(--components-switch-handler-offset));
 				transition: all var(--commons-animations-durations-fast) ease;
-				width: var(--components-switch-slider-size);
+				inline-size: var(--components-switch-slider-size);
 			}
 		}
 

package/src/components/switch/mods.scss

@@ -1,13 +1,13 @@
 @mixin inline {
 	display: inline-block;
-	margin-right: var(--pr-t-spacings-300);
+	margin-inline-end: var(--pr-t-spacings-300);
 }
 
 @mixin S {
 	--components-switch-height: 1rem;
 	--components-switch-width: 1.75rem;
-	--components-switch-slider-size: .75rem;
-	--components-switch-icon-size: .75rem;
+	--components-switch-slider-size: 0.75rem;
+	--components-switch-icon-size: 0.75rem;
 	--components-switch-lineHeight: var(--sizes-S-lineHeight);
 	--components-switch-fontSize: var(--sizes-S-fontSize);
 	--components-switch-helper-lineHeight: var(--sizes-XS-lineHeight);

package/src/components/switch/states.scss

@@ -8,11 +8,13 @@
 
 			display: flex;
 			background-color: var(--palettes-700, var(--palettes-product-700));
-			padding-left: var(--components-switch-handler-offset);
+			padding-inline-start: var(--components-switch-handler-offset);
 		}
 
 		&::after {
-			left: calc(var(--components-switch-width) - var(--components-switch-slider-size) - var(--components-switch-handler-offset));
+			inset-inline-start: calc(
+				var(--components-switch-width) - var(--components-switch-slider-size) - var(--components-switch-handler-offset)
+			);
 		}
 	}
 }

package/src/components/switchField/component.scss

@@ -8,12 +8,12 @@
 	@at-root ($atRoot) {
 		.switchField-icon {
 			display: block;
-			width: var(--component-switchField-label-input-width);
-			height: var(--component-switchField-label-input-height);
+			inline-size: var(--component-switchField-label-input-width);
+			block-size: var(--component-switchField-label-input-height);
 			border: 2px solid var(--palettes-neutral-500);
 			border-radius: var(--component-switchField-label-input-height);
 			position: relative;
-			top: var(--pr-t-spacings-25);
+			inset-block-start: var(--pr-t-spacings-25);
 			color: var(--palettes-neutral-0);
 			transition-property: color, border-color, background-color;
 			transition-duration: var(--commons-animations-durations-fast);
@@ -31,12 +31,12 @@
 			&::before {
 				content: '';
 				position: absolute;
-				width: 50%;
+				inline-size: 50%;
 				aspect-ratio: 1;
 				background-color: var(--palettes-neutral-0);
 				border-radius: var(--commons-borderRadius-full);
-				left: 0;
-				top: 0;
+				inset-inline-start: 0;
+				inset-block-start: 0;
 				transition-property: left;
 				transition-duration: var(--commons-animations-durations-fast);
 				transition-timing-function: cubic-bezier(0.5, 1, 0.5, 1.5);
@@ -48,8 +48,8 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			width: 100%;
-			height: 100%;
+			inline-size: 100%;
+			block-size: 100%;
 
 			&::before {
 				@include icon.generate('confirm');
@@ -65,8 +65,8 @@
 		.switchField-input {
 			position: absolute;
 			z-index: 1;
-			width: var(--component-switchField-label-input-width);
-			height: var(--component-switchField-label-input-height);
+			inline-size: var(--component-switchField-label-input-width);
+			block-size: var(--component-switchField-label-input-height);
 			opacity: 0.0001;
 			cursor: pointer;
 

package/src/components/switchField/states.scss

@@ -4,7 +4,7 @@
 		border-color: var(--palettes-product-700);
 
 		&::before {
-			left: 50%;
+			inset-inline-start: 50%;
 		}
 	}
 

package/src/components/table/component.scss

@@ -6,8 +6,8 @@
 	line-height: var(--components-table-line-height);
 	border-spacing: 0;
 	display: table;
-	text-align: left;
-	width: 100%;
+	text-align: start;
+	inline-size: 100%;
 	color: var(--palettes-neutral-800);
 
 	@at-root ($atRoot) {
@@ -29,11 +29,11 @@
 			font-size: var(--sizes-S-fontSize);
 			line-height: var(--sizes-S-lineHeight);
 			padding: var(--components-table-padding);
-			border-bottom-width: var(--commons-divider-width);
-			border-bottom-color: var(--commons-divider-color);
-			border-bottom-style: solid;
+			border-block-end-width: var(--commons-divider-width);
+			border-block-end-color: var(--commons-divider-color);
+			border-block-end-style: solid;
 			display: table-cell;
-			text-align: left;
+			text-align: start;
 			font-weight: 600;
 		}
 
@@ -49,16 +49,16 @@
 			&:first-child {
 				.table-body-row-cell,
 				.table-foot-row-cell {
-					border-top: none;
+					border-block-start: none;
 				}
 			}
 
 			&:last-child {
 				.table-body-row-cell,
 				.table-foot-row-cell {
-					border-bottom-width: var(--commons-divider-width);
-					border-bottom-color: var(--commons-divider-color);
-					border-bottom-style: solid;
+					border-block-end-width: var(--commons-divider-width);
+					border-block-end-color: var(--commons-divider-color);
+					border-block-end-style: solid;
 				}
 			}
 		}
@@ -66,9 +66,9 @@
 		.table-body-row-cell,
 		.table-foot-row-cell {
 			padding: var(--components-table-padding);
-			border-top-width: var(--commons-divider-width);
-			border-top-color: var(--commons-divider-color);
-			border-top-style: solid;
+			border-block-start-width: var(--commons-divider-width);
+			border-block-start-color: var(--commons-divider-color);
+			border-block-start-style: solid;
 			display: table-cell;
 			vertical-align: middle;
 		}

package/src/components/table/mods.scss

@@ -52,7 +52,7 @@
 }
 
 @mixin card {
-	border-top: 0;
+	border-block-start: 0;
 
 	:where(.table-head, .table-body, .table-foot) {
 		&:first-child {
@@ -60,11 +60,11 @@
 				&:first-child {
 					:where(.table-head-row-cell, .table-body-row-cell) {
 						&:first-child {
-							border-top-left-radius: var(--components-card-border-radius);
+							border-start-start-radius: var(--components-card-border-radius);
 						}
 
 						&:last-child {
-							border-top-right-radius: var(--components-card-border-radius);
+							border-start-end-radius: var(--components-card-border-radius);
 						}
 					}
 				}
@@ -76,11 +76,11 @@
 				&:last-child {
 					:where(.table-body-row-cell, .table-foot-row-cell) {
 						&:first-child {
-							border-bottom-left-radius: var(--components-card-border-radius);
+							border-end-start-radius: var(--components-card-border-radius);
 						}
 
 						&:last-child {
-							border-bottom-right-radius: var(--components-card-border-radius);
+							border-end-end-radius: var(--components-card-border-radius);
 						}
 					}
 				}
@@ -89,7 +89,7 @@
 	}
 
 	.table-head-row-cell {
-		border-top: 0;
+		border-block-start: 0;
 	}
 
 	.table-body,
@@ -97,7 +97,7 @@
 		&:last-child {
 			.table-body-row-cell,
 			.table-foot-row-cell {
-				border-bottom: none;
+				border-block-end: none;
 			}
 		}
 	}
@@ -111,15 +111,15 @@
 	.table-body-row-cell,
 	.table-foot-row-cell {
 		&:first-child {
-			padding-left: var(--components-table-card-padding);
+			padding-inline-start: var(--components-table-card-padding);
 		}
 
 		&:last-child {
-			padding-right: var(--components-table-card-padding);
+			padding-inline-end: var(--components-table-card-padding);
 		}
 
 		&.mod-actions {
-			padding-right: var(--pr-t-spacings-100);
+			padding-inline-end: var(--pr-t-spacings-100);
 		}
 	}
 }
@@ -132,7 +132,7 @@
 	.table-head-row-cell,
 	.table-body-row-cell,
 	.table-foot-row-cell {
-		border-top: none;
+		border-block-start: none;
 	}
 }
 
@@ -141,11 +141,11 @@
 	.table-body-row-cell,
 	.table-foot-row-cell {
 		&:first-child {
-			padding-left: 0;
+			padding-inline-start: 0;
 		}
 
 		&:last-child {
-			padding-right: 0;
+			padding-inline-end: 0;
 		}
 	}
 }
@@ -186,7 +186,7 @@
 
 			font-size: var(--sizes-M-lineHeight);
 			font-weight: 400;
-			margin-right: var(--pr-t-spacings-100);
+			margin-inline-end: var(--pr-t-spacings-100);
 			transition-duration: var(--commons-animations-durations-fast);
 			transition-property: transform;
 			vertical-align: top;
@@ -207,7 +207,7 @@
 	.table-body-row-cell,
 	.table-foot-row-cell {
 		&:first-child {
-			padding-left: var(--pr-t-spacings-600);
+			padding-inline-start: var(--pr-t-spacings-600);
 		}
 	}
 }
@@ -216,10 +216,9 @@
 	@at-root ($atRoot) {
 		.table-body-row-cell-handler,
 		.table-foot-row-cell-handler {
-			top: 0;
-			bottom: 0;
-			left: 0;
-			width: var(--pr-t-spacings-400);
+			inset-block: 0;
+			inset-inline-start: 0;
+			inline-size: var(--pr-t-spacings-400);
 			position: absolute;
 			cursor: move;
 
@@ -228,7 +227,7 @@
 
 				color: var(--palettes-neutral-600);
 				font-size: var(--sizes-M-lineHeight);
-				height: 100%;
+				block-size: 100%;
 				margin: auto;
 				display: flex;
 				align-items: center;
@@ -240,7 +239,7 @@
 	.table-body-row-cell,
 	.table-foot-row-cell {
 		&:first-child {
-			padding-left: var(--pr-t-spacings-400);
+			padding-inline-start: var(--pr-t-spacings-400);
 			position: relative;
 		}
 	}
@@ -251,8 +250,8 @@
 	.table-body-row-cell,
 	.table-foot-row-cell {
 		&:first-child {
-			padding-right: var(--pr-t-spacings-100);
-			width: var(--pr-t-spacings-200);
+			padding-inline-end: var(--pr-t-spacings-100);
+			inline-size: var(--pr-t-spacings-200);
 		}
 	}
 
@@ -280,7 +279,7 @@
 @mixin twoLines($atRoot: namespace.$defaultAtRoot) {
 	@at-root ($atRoot) {
 		.table-head-row-cell-secondLine {
-			margin-top: var(--pr-t-spacings-50);
+			margin-block-start: var(--pr-t-spacings-50);
 			display: block;
 			font-weight: 400;
 		}
@@ -291,30 +290,30 @@
 	}
 
 	.table-head-row-cell-wrapper {
-		max-width: calc(100% - var(--pr-t-spacings-400));
+		max-inline-size: calc(100% - var(--pr-t-spacings-400));
 		display: inline-block;
 		vertical-align: top;
 	}
 
 	.table-head-row-cell-secondLine {
-		margin-top: var(--pr-t-spacings-50);
+		margin-block-start: var(--pr-t-spacings-50);
 		display: block;
 		font-weight: 400;
 	}
 }
 
 @mixin avatar {
-	padding-right: 0;
-	width: var(--pr-t-spacings-400);
+	padding-inline-end: 0;
+	inline-size: var(--pr-t-spacings-400);
 }
 
 @mixin actions {
 	padding: 0.3rem;
-	padding-right: var(--pr-t-spacings-100);
-	padding-left: 0;
+	padding-inline-end: var(--pr-t-spacings-100);
+	padding-inline-start: 0;
 	transition-duration: var(--commons-animations-durations-fast);
 	transition-property: opacity;
-	text-align: right;
+	text-align: end;
 	white-space: nowrap;
 }
 
@@ -349,7 +348,7 @@
 }
 
 @mixin alignRight {
-	text-align: right;
+	text-align: end;
 }
 
 @mixin noOffset {
@@ -357,11 +356,11 @@
 	.table-body-row-cell,
 	.table-foot-row-cell {
 		&:first-child {
-			padding-left: 0;
+			padding-inline-start: 0;
 		}
 
 		&:last-child {
-			padding-right: 0;
+			padding-inline-end: 0;
 		}
 	}
 }

package/src/components/tableFixed/mods.scss

@@ -44,6 +44,6 @@
 }
 
 @mixin cellFixedWidth {
-	min-width: var(--cell-width, auto);
-	width: var(--cell-width, auto);
+	min-inline-size: var(--cell-width, auto);
+	inline-size: var(--cell-width, auto);
 }

package/src/components/tableFixedDeprecated/mods.scss

@@ -3,7 +3,7 @@
 }
 
 @mixin layoutFixedCell($i) {
-	min-width: $i * 1rem;
-	max-width: $i * 1rem;
-	width: $i * 1rem;
+	min-inline-size: $i * 1rem;
+	max-inline-size: $i * 1rem;
+	inline-size: $i * 1rem;
 }

package/src/components/tableOfContent/component.scss

@@ -24,7 +24,7 @@
 			position: relative;
 			transition: all var(--commons-animations-durations-standard);
 			text-decoration: none;
-			width: auto;
+			inline-size: auto;
 		}
 	}
 }