@lucca-front/scss 19.3.0-rc.3 → 19.3.0-rc.4

package/src/components/filterPill/component.scss

@@ -121,7 +121,6 @@
 			overflow: hidden;
 			text-overflow: ellipsis;
 			cursor: var(--components-filterPill-label-cursor);
-
 			display: flex;
 			align-items: center;
 			gap: var(--pr-t-spacings-50);
@@ -183,6 +182,8 @@
 				font-weight: 400;
 				font-size: 1rem;
 				direction: ltr;
+
+				// stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- This font is for icons and should not have fallback.
 				font-family: 'Lucca icons';
 				font-feature-settings: 'liga';
 				font-style: normal;

package/src/components/filterPill/states.scss

@@ -4,12 +4,10 @@
 	--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);
 }
 
@@ -25,6 +23,7 @@
 
 @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);
@@ -104,7 +103,7 @@
 	box-shadow: var(--components-filterPill-shadow);
 
 	// TODO
-	//--components-filterPill-checkbox-borderColor: var(--palettes-neutral-600);
+	// --components-filterPill-checkbox-borderColor: var(--palettes-neutral-600);
 }
 
 @mixin hidden {

package/src/components/form/index.scss

@@ -95,6 +95,7 @@
 
 // deprecated
 
+// stylelint-disable no-duplicate-selectors -- deprecated
 .form {
 	@include vars;
 }
@@ -165,3 +166,4 @@
 		}
 	}
 }
+// stylelint-enable

package/src/components/form/mods.scss

@@ -273,7 +273,6 @@
 }
 
 @mixin framed {
-	margin-block-end: 0;
 	background-color: var(--palettes-neutral-0);
 	padding: 0;
 	box-shadow: form.fakeBorderOverlay(var(--palettes-neutral-200));

package/src/components/grid/component.scss

@@ -24,13 +24,10 @@
 		.grid-column {
 			align-self: var(--grid-align, var(--grid-column-align));
 			justify-self: var(--grid-justify, var(--grid-column-justify));
-
 			grid-column-start: var(--grid-column, var(--grid-column-start));
 			grid-row-start: var(--grid-row, var(--grid-row-start));
-
 			grid-column-end: span var(--grid-colspan, var(--grid-column-end));
 			grid-row-end: span var(--grid-rowspan, var(--grid-row-end));
-
 			min-inline-size: 0;
 
 			@each $breakpoint, $value in config.$breakpoints {
@@ -51,6 +48,7 @@
 						grid-row-start: var(--grid-rowAtMediaMin#{$breakpoint});
 					}
 
+					// stylelint-disable custom-property-pattern -- TODO Make PR to Stylelint to take SCSS function within CSS variable into consideration.
 					// workaround for Angular replacing CamelCase by kebab-case
 					&[style*='grid-colspan-at-media-min-#{string.to-lower-case($breakpoint)}'] {
 						grid-column-end: span var(--grid-colspan-at-media-min-#{string.to-lower-case($breakpoint)});
@@ -108,6 +106,7 @@
 					&[style*='grid-row-at-container-min-#{string.to-lower-case($breakpoint)}'] {
 						grid-row-start: var(--grid-row-at-container-min-#{string.to-lower-case($breakpoint)});
 					}
+					// stylelint-enable
 				}
 			}
 		}

package/src/components/grid/mods.scss

@@ -4,6 +4,7 @@
 
 @mixin auto {
 	--grid-template-columns: none;
+
 	grid-auto-columns: 1fr;
 
 	.grid-column {

package/src/components/highlightData/component.scss

@@ -14,6 +14,7 @@
 	@at-root ($atRoot) {
 		.highlightData-content {
 			@include reset.list($list: 'dl');
+
 			display: var(--components-highlightData-display);
 			grid-template-columns: 1fr auto;
 			grid-template-areas:
@@ -33,8 +34,10 @@
 
 		.highlightData-content-value {
 			grid-area: value;
+
 			@include title.component;
 			@include title.h1;
+
 			order: var(--components-highlightData-value-order);
 		}
 

package/src/components/highlightData/mods.scss

@@ -34,6 +34,7 @@
 	--components-highlightData-display: flex;
 	--components-highlightData-alignItem: start;
 	--components-highlightData-action-padding: var(--pr-t-spacings-150);
+
 	padding-inline-end: calc(var(--components-highlightData-illustrations-width) + var(--components-highlightData-padding-inline));
 }
 

package/src/components/horizontalNavigation/component.scss

@@ -3,7 +3,6 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	position: relative;
 	column-gap: var(--pr-t-spacings-400);
 	align-items: center;
 	display: flex;
@@ -77,7 +76,7 @@
 			z-index: 1;
 			scroll-margin-inline: var(--pr-t-spacings-200);
 
-			&:before {
+			&::before {
 				content: '';
 				position: absolute;
 				inset-block: calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-25));
@@ -136,7 +135,6 @@
 		.menu-link-placeholder {
 			&::after {
 				content: attr(data-content-after);
-
 				display: block;
 				block-size: 0;
 				overflow: hidden;

package/src/components/horizontalNavigation/index.scss

@@ -47,6 +47,7 @@
 	&.active {
 		@include active;
 	}
+
 	// .disabled is deprecated
 	// [disabled] is deprecated
 	&.is-disabled,

package/src/components/horizontalNavigation/mods.scss

@@ -61,7 +61,7 @@
 		--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-50) var(--pr-t-spacings-200);
 		--components-horizontalNavigation-listItemActionAlign: left;
 
-		&:before {
+		&::before {
 			inset-block: calc(
 				var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-150) - var(--pr-t-spacings-25)
 			);
@@ -95,7 +95,7 @@
 	.menu-list-item-action {
 		--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-50) var(--pr-t-spacings-150);
 
-		&:before {
+		&::before {
 			inset-block: calc(
 				var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-150) - var(--pr-t-spacings-25)
 			);

package/src/components/index.scss

@@ -98,6 +98,9 @@
 @forward 'richText';
 @forward 'readMore';
 @forward 'highlightData';
+@forward 'fileUpload';
+@forward 'fileEntry';
+@forward 'fileToolbar';
 
 // Deprecated CSS components
 // @forward 'tableFixedDeprecated'; // 33 Ko

package/src/components/indexTable/component.scss

@@ -27,7 +27,7 @@
 			display: table-row-group;
 		}
 
-		//There might be more than one footer
+		// There might be more than one footer
 		.indexTable-foot {
 			display: table-row-group;
 
@@ -42,10 +42,6 @@
 			display: table-row;
 		}
 
-		.indexTable-body-row {
-			border-radius: var(--commons-borderRadius-L);
-		}
-
 		.indexTable-head-row-transparentCell,
 		.indexTable-body-row-transparentCell,
 		.indexTable-head-row-cell,
@@ -78,6 +74,8 @@
 		}
 
 		.indexTable-body-row {
+			border-radius: var(--commons-borderRadius-L);
+
 			&:has(.indexTable-body-row-cell-link) {
 				.indexTable-body-row-cell {
 					&:not(:has(button, a, input, textarea, select, details, [tabindex='0']), .mod-allowTextSelection) {
@@ -98,6 +96,7 @@
 		}
 
 		.indexTable-foot-row-cell {
+			text-align: end;
 			padding-block: var(--pr-t-spacings-50);
 		}
 
@@ -149,6 +148,7 @@
 				border-radius: var(--components-indexTable-cell-border-radius-left) var(--components-indexTable-cell-border-radius-right)
 					var(--components-indexTable-cell-border-radius-right) var(--components-indexTable-cell-border-radius-left);
 				background-color: var(--components-indexTable-cell-background-color, var(--components-indexTable-cell-background-color-default));
+
 				// shadow-mask : since the card apparence is put on every cell (du to a Safari bug), we need to hide the left part of the box shadow for everycell exept the first one.
 				// We do this with a rectangular white box-shadow above it.
 				box-shadow: var(--components-indexTable-shadow-mask, 0 0 0 0),
@@ -247,10 +247,6 @@
 			font-weight: 600;
 		}
 
-		.indexTable-foot-row-cell {
-			text-align: end;
-		}
-
 		// A wrapper is needed for pagination
 		.indexTableWrapper {
 			@include vars;

package/src/components/indexTable/index.scss

@@ -7,6 +7,7 @@
 
 	&.mod-selectable {
 		@include selectable;
+
 		// Selectable states
 		@include selectableSelectedRow;
 		@include selectableHoveredRow;
@@ -29,7 +30,7 @@
 		@include massSelection;
 	}
 
-	.indexTable-body-row-cell.mod-actions {
+	:where(.indexTable-body-row-cell.mod-actions) {
 		@include actions;
 	}
 

package/src/components/indexTable/mods.scss

@@ -41,6 +41,7 @@
 	.indexTable-body-row-cell {
 		// because we can't set an individual spacing for each row, transparent border are used for this
 		border-block-end: var(--components-indexTable-row-stack-border-bottom) solid transparent;
+
 		// stack apparence
 		background-image: var(--components-indexTable-row-stack2-background-image, none),
 			var(--components-indexTable-row-stack3-background-image, none);
@@ -80,9 +81,10 @@
 		z-index: 3;
 	}
 
-	//hide box-shadow from underneath rows that slighly appear on edges of the sticky header when scrolling
+	// hide box-shadow from underneath rows that slighly appear on edges of the sticky header when scrolling
 	.indexTable-head-row-cell {
 		position: relative;
+
 		&::before,
 		&::after {
 			content: '';
@@ -90,15 +92,19 @@
 			inset: calc(var(--components-indexTable-row-spacing) * -1) calc(var(--components-indexTable-padding) * -1) 0;
 			z-index: -1;
 		}
+
 		&::before {
 			background-color: var(--commons-background-base);
 		}
+
 		&::after {
 			background-color: var(--components-indexTable-background-color);
 		}
+
 		&:first-child::after {
 			border-start-start-radius: var(--components-indexTable-border-radius);
 		}
+
 		&:last-child::after {
 			border-start-end-radius: var(--components-indexTable-border-radius);
 		}
@@ -124,6 +130,7 @@
 	.indexTable-foot-row {
 		position: relative;
 		display: grid;
+
 		// Grid layout by default is a basic one column template.
 		// The user can override this and build a specific layout by using --components-indexTable-row-responsive-grid-template-columns, --components-indexTable-row-responsive-grid-template-rows and --components-indexTable-row-responsive-grid-template-areas
 		grid-template-columns: var(--components-indexTable-row-responsive-grid-template-columns, 1fr);
@@ -134,11 +141,13 @@
 		padding-block: var(--components-indexTable-row-spacing-responsive);
 		padding-inline: 0;
 		margin-block-end: var(--components-indexTable-row-spacing-responsive);
+
 		// "Title" lines that do not contain "card" cells are smaller
 		&:not(:has(.indexTable-body-row-cell)) {
 			padding: 0;
 			margin-block-end: 0;
 		}
+
 		&:last-child {
 			margin-block-end: 0;
 		}
@@ -160,12 +169,14 @@
 			--components-indexTable-cell-border-radius-left: var(--components-indexTable-cell-border-radius);
 			--components-indexTable-cell-border-radius-right: var(--components-indexTable-cell-border-radius);
 		}
+
 		&::after {
 			--components-indexTable-outline-border-width-left: var(--components-indexTable-outline-border-width);
 			--components-indexTable-outline-border-width-right: var(--components-indexTable-outline-border-width);
 			--components-indexTable-outline-border-radius-left: var(--components-indexTable-outline-border-radius);
 			--components-indexTable-outline-border-radius-right: var(--components-indexTable-outline-border-radius);
 		}
+
 		~ .indexTable-body-row-cell {
 			&::before,
 			&::after {
@@ -198,15 +209,19 @@
 				1fr
 			);
 	}
+
 	.indexTable-body-row-transparentCell {
 		inline-size: auto;
+
 		// we add a padding-inline-start to keep a correct indent between lvl 1 and lvl 2 titles in nested tables. * .75 is just for cosmetic
 		&:first-child[colspan='2'] + .indexTable-body-row-transparentCell {
 			padding-inline-start: calc(var(--components-indexTable-row-cell-transparent-width) * 0.75);
 		}
 	}
+
 	.indexTable-body-row-cell {
 		--components-indexTable-cell-inset-x-left: var(--components-indexTable-row-cell-transparent-width);
+
 		grid-column-start: 2;
 	}
 }
@@ -224,6 +239,7 @@
 		border-block-end-width: var(--components-indexTable-row-stack-border-bottom);
 		border-style: solid;
 		border-color: transparent;
+
 		&::before,
 		&::after {
 			content: '';
@@ -238,19 +254,24 @@
 			transition-property: background-image, background-position;
 			transition-duration: var(--commons-animations-durations-fast);
 		}
+
 		&::before {
 			inset-inline-start: var(--components-indexTable-cell-inset-x-left, 0);
 			inset-inline-end: 50%;
+
 			--components-indexTable-row-stack2-background-position: left -2px bottom 6px;
 			--components-indexTable-row-stack3-background-position: left 1px bottom 2px;
 		}
+
 		&::after {
 			inset-inline-start: 50%;
 			inset-inline-end: 0;
+
 			--components-indexTable-row-stack2-background-position: right -2px bottom 6px;
 			--components-indexTable-row-stack3-background-position: right 1px bottom 2px;
 		}
 	}
+
 	.indexTable-body-row-cell {
 		border-block-end: 0;
 		background-image: none;
@@ -263,7 +284,7 @@
 	padding: var(--pr-t-spacings-50);
 	white-space: nowrap;
 
-	.button {
+	:where(.button) {
 		@include button.S;
 		@include button.text;
 		@include button.onlyIconS;
@@ -277,7 +298,7 @@
 			transition: opacity ease var(--commons-animations-durations-fast);
 		}
 
-		//If there are 4 actions or more, the buttons are hidden (not on touch device) and replaced should be replaced with a dropdown
+		// If there are 4 actions or more, the buttons are hidden (not on touch device) and replaced should be replaced with a dropdown
 		&:has(.indexTable-body-row-cell-subActionDropdownTrigger) {
 			.indexTable-body-row-cell-subAction {
 				display: none;
@@ -300,16 +321,18 @@
 
 	&.mod-layoutFixed {
 		table-layout: fixed;
+
 		[class*='row-cell'] {
 			@include cellFixedWidth;
 		}
 	}
 
-	//Layout fixed at breakpoint
+	// Layout fixed at breakpoint
 	@each $breakpoint, $value in config.$breakpoints {
 		@include media.min($breakpoint) {
 			&.mod-layoutFixedAtMediaMin#{$breakpoint} {
 				table-layout: fixed;
+
 				[class*='row-cell'] {
 					@include cellFixedWidth;
 				}
@@ -328,6 +351,7 @@
 	.indexTable-head-row-cell {
 		padding: 0;
 	}
+
 	.indexTable-head-row-cell-massSelection {
 		display: flex;
 		align-items: center;

package/src/components/indexTable/states.scss

@@ -7,9 +7,11 @@
 			display: none;
 		}
 	}
+
 	.indexTable-body-row-cellTitle-button[aria-expanded='false'] .lucca-icon {
 		transform: rotate(180deg);
 	}
+
 	// subTotal in header are not displayed when the row is open
 	.indexTable-body-row:has(.indexTable-body-row-cellTitle-button[aria-expanded='true']) {
 		.indexTable-body-row-subTotal {
@@ -28,6 +30,7 @@
 			) {
 			--components-indexTable-cell-subAction-opacity: 1;
 		}
+
 		&:has(.indexTable-body-row-cell-action:focus-visible, .indexTable-body-row-cell-link:focus-visible) {
 			--components-indexTable-outline-opacity: 1;
 		}
@@ -62,8 +65,10 @@
 @mixin selectedCells {
 	// !important here for overriding a potential overrided non blank row background color
 	--components-indexTable-cell-background-color: var(--components-indexTable-cell-background-color-selected) !important;
+
 	// !important here if for overriding a potential selectableHoveredRow reset
 	--components-indexTable-cell-shadow: var(--components-indexTable-cell-shadow-selected) !important;
+
 	// if selected stackable row : we also change the stacks background color
 	--components-indexTable-stack-svg: var(--components-indexTable-stack-svg-selected);
 }

package/src/components/indexTable/vars.scss

@@ -3,6 +3,7 @@
 	--components-indexTable-border-radius: 12px;
 	--components-indexTable-background-color: var(--palettes-neutral-50);
 	--components-indexTable-row-spacing: 4px;
+
 	// on responsive, row spacing is increased
 	--components-indexTable-row-spacing-responsive: 8px;
 
@@ -10,6 +11,7 @@
 	--components-indexTable-cell-paddingBlock: var(--pr-t-spacings-100);
 	--components-indexTable-cell-border-radius: var(--commons-borderRadius-L);
 	--components-indexTable-cell-background-color-default: var(--palettes-neutral-0);
+
 	// shadows
 	--components-indexTable-cell-shadow-default: var(--pr-t-elevation-shadow-raised);
 	--components-indexTable-cell-background-color-selected: var(--palettes-product-50);
@@ -25,6 +27,7 @@
 
 	// rows stacks apparence is an url encoded svg
 	--components-indexTable-stack-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2008' height='48' fill='none'%3E%3Cg filter='url(%23a)'%3E%3Crect width='2000' height='40' x='4' y='2' fill='%23fff' rx='8'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' width='2008' height='48' x='0' y='0' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='2'/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.67451 0 0 0 0 0.733333 0 0 0 0 0.843137 0 0 0 0.2 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_1214_48875'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3CfeColorMatrix values='0 0 0 0 0.67451 0 0 0 0 0.733333 0 0 0 0 0.843137 0 0 0 0.4 0'/%3E%3CfeBlend in2='effect1_dropShadow_1214_48875' mode='multiply' result='effect2_dropShadow_1214_48875'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeMorphology in='SourceAlpha' operator='dilate' radius='1' result='effect3_dropShadow_1214_48875'/%3E%3CfeOffset/%3E%3CfeColorMatrix values='0 0 0 0 0.67451 0 0 0 0 0.733333 0 0 0 0 0.843137 0 0 0 0.08 0'/%3E%3CfeBlend in2='effect2_dropShadow_1214_48875' result='effect3_dropShadow_1214_48875'/%3E%3CfeBlend in='SourceGraphic' in2='effect3_dropShadow_1214_48875' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
+
 	// selected rows stacks apparence. Inline svg can't use css vars for coloring or fill :(
 	--components-indexTable-stack-svg-selected: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2008' height='48' fill='none' viewBox='0 0 2008 48'%3E%3Crect width='2000' height='40' x='4' y='2' fill='%23FFF1EB' stroke='%23FF9361' rx='8'/%3E%3C/svg%3E%0A");
 

package/src/components/inlineMessage/component.scss

@@ -1,6 +1,8 @@
 @use '@lucca-front/icons/src/icon/exports' as icon;
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: flex;
 	gap: var(--components-inlineMessage-gap);
@@ -8,12 +10,23 @@
 	font-size: var(--components-inlineMessage-fontSize);
 	line-height: var(--components-inlineMessage-lineHeight);
 	color: var(--components-inlineMessage-color);
+	border-radius: var(--commons-borderRadius-M);
+
+	&:has(.inlineMessage-content:focus-visible) {
+		@include a11y.focusVisible;
+	}
 
 	@at-root ($atRoot) {
 		.inlineMessage-content {
-			display: flex;
-			gap: var(--components-inlineMessage-gap);
-			margin: 0;
+			&:not(p) {
+				display: flex;
+				gap: var(--components-inlineMessage-gap);
+				margin: 0;
+			}
+
+			&:is(p) {
+				outline: none;
+			}
 		}
 
 		// .lucca-icon:first-child is deprecated

package/src/components/link/mods.scss

@@ -1,6 +1,13 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin icon($atRoot: namespace.$defaultAtRoot) {
+	.lucca-icon {
+		text-decoration: none;
+		font-size: 1em;
+		line-height: 1lh;
+		vertical-align: bottom;
+	}
+
 	&:has(.link-text) {
 		text-decoration: none;
 	}
@@ -11,13 +18,6 @@
 		}
 	}
 
-	.lucca-icon {
-		text-decoration: none;
-		font-size: 1em;
-		line-height: 1lh;
-		vertical-align: bottom;
-	}
-
 	@at-root ($atRoot) {
 		.link-text {
 			text-decoration: underline;

package/src/components/list/mods.scss

@@ -45,6 +45,7 @@
 			.button {
 				&:not(:focus) {
 					@include a11y.mask;
+
 					opacity: 0;
 				}
 			}

package/src/components/loading/component.scss

@@ -11,7 +11,7 @@
 	text-align: var(--components-loading-textAlign);
 	vertical-align: top;
 
-	@include loading.spinner();
+	@include loading.spinner;
 
 	&:not(:empty) {
 		--components-loading-padding: 0 0 0 var(--pr-t-spacings-400);

package/src/components/loading/mods.scss

@@ -11,6 +11,10 @@
 	}
 }
 
+@mixin S {
+	--components-loading-size: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50));
+}
+
 @mixin L {
 	@include block;
 

package/src/components/mobileNavigation/component.scss

@@ -13,6 +13,7 @@
 	@at-root ($atRoot) {
 		.mobileNavigation-list {
 			@include reset.list;
+
 			display: flex;
 		}
 
@@ -34,7 +35,7 @@
 			text-decoration: none;
 
 			&:focus-visible {
-				@include a11y.focusVisible($offset: 0px);
+				@include a11y.focusVisible($offset: 0);
 			}
 
 			.lucca-icon {
@@ -50,6 +51,7 @@
 		.mobileNavigation-list-item-link-counter {
 			--components-numericBadge-background: var(--palettes-product-200);
 			--components-numericBadge-color: var(--palettes-product-800);
+
 			box-shadow: 0 0 0 2px var(--palettes-neutral-0);
 			position: absolute;
 			inset-inline-start: calc(50% + 5px);

package/src/components/multiSelect/component.scss

@@ -73,6 +73,7 @@
 		.multipleSelect-arrow,
 		.multipleSelect-searchIcon {
 			@include icon.M;
+
 			color: var(--components-multiSelect-arrow-color);
 			transition-property: transform;
 			transition-duration: var(--commons-animations-durations-standard);

package/src/components/multiSelect/mods.scss

@@ -16,6 +16,10 @@
 		@include icon.S;
 	}
 
+	.multipleSelect-searchIcon {
+		@include icon.S;
+	}
+
 	.multipleSelect-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
@@ -67,7 +71,6 @@
 	box-shadow: none;
 	padding: 0;
 	gap: 0;
-
 	width: 21rem;
 	max-inline-size: calc(100vw - 2.5rem);
 

package/src/components/multiSelect/states.scss

@@ -14,6 +14,7 @@
 	--components-multiSelect-background: var(--commons-disabled-background);
 	--components-multiSelect-placeholder: var(--commons-disabled-placeholder);
 	--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);
+
 	pointer-events: none;
 }
 

package/src/components/navside/component.scss

@@ -44,7 +44,6 @@
 			overflow-x: hidden;
 			overflow-y: auto;
 			position: relative;
-
 			scrollbar-face-color: var(--components-navSide-scrollbar-thumb-color);
 			scrollbar-arrow-color: var(--components-navSide-scrollbar-arrow-color);
 			scrollbar-track-color: var(--components-navSide-scrollbar-bg-color);
@@ -133,7 +132,6 @@
 			margin-inline-start: auto;
 			display: grid;
 			place-items: center;
-			transform: rotate(0);
 			flex-shrink: 0;
 			transform-origin: 50% 50%;
 			transform: rotate(90deg);