@lucca-front/scss 18.2.2 → 18.2.3

package/src/components/loading/component.scss

@@ -3,10 +3,6 @@
 @mixin component {
 	@include loading.spinner();
 
-	@supports not (height: 1dvh) {
-		--components-loading-transform: var(--components-loading-transformFallback);
-	}
-
 	min-height: var(--components-loading-size);
 	padding: var(--components-loading-padding);
 	margin: var(--components-loading-margin);
@@ -14,7 +10,7 @@
 	transform: var(--components-loading-transform);
 	color: var(--components-loading-color);
 	position: relative;
-	text-align: center;
+	text-align: var(--components-loading-textAlign);
 	vertical-align: top;
 
 	&:not(:empty) {

package/src/components/loading/mods.scss

@@ -2,11 +2,12 @@
 
 @mixin block {
 	--components-loading-display: block;
-	--components-loading-margin: 0 auto;
+	--components-loading-margin: auto;
 	--components-loading-spinnerMargin: 0 auto;
+	--components-loading-textAlign: center;
 
 	&:not(:empty) {
-		--components-loading-padding: var(--components-loading-size) 0 0;
+		--components-loading-padding: calc(var(--components-loading-size) + var(--pr-t-spacings-50)) 0 0;
 	}
 }
 
@@ -16,14 +17,6 @@
 	--components-loading-size: var(--components-loading-size-big);
 }
 
-@mixin fullPage {
-	@include block;
-	@include L;
-
-	--components-loading-transform: translateY(30vh);
-	--components-loading-padding: 0;
-}
-
 @mixin invert {
 	--components-loading-color: var(--palettes-neutral-0);
 
@@ -35,19 +28,19 @@
 @mixin popin {
 	@include block;
 	@include L;
-
-	&,
-	&:not(:empty) {
-		--components-loading-padding: 8rem 0 0;
-	}
-
-	--components-loading-margin: 0 var(--pr-t-spacings-400) var(--pr-t-spacings-400);
-	--components-loading-spinnerMargin: auto;
 }
 
 @mixin drawer {
-	@include fullPage;
 	@include popin;
 
+	// legacy, approximate centering
+	--components-loading-transform: translateY(35vh);
+}
+
+@mixin fullPage {
+	@include block;
+	@include L;
+
+	// legacy, approximate centering
 	--components-loading-transform: translateY(35vh);
 }

package/src/components/loading/vars.scss

@@ -7,5 +7,5 @@
 	--components-loading-spinnerMargin: 0;
 	--components-loading-color: currentColor;
 	--components-loading-transform: none;
-	--components-loading-transformFallback: var(--components-loading-transform);
+	--components-loading-textAlign: inherit;
 }

package/src/components/menu/component.scss

@@ -1,6 +1,7 @@
 @use '@lucca-front/scss/src/commons/utils/reset';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	position: relative;
 	column-gap: var(--pr-t-spacings-400);
 	align-items: center;

package/src/components/menu/states.scss

@@ -20,7 +20,7 @@
 	}
 
 	.numericBadge {
-		@include numericBadge.product;
+		@include numericBadge.inherit;
 	}
 }
 

package/src/components/mobileHeader/component.scss

@@ -1,4 +1,6 @@
-@mixin component($atRoot: 'without: rule') {
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: flex;
 	align-items: center;
 	gap: var(--pr-t-spacings-100);

package/src/components/mobileNavigation/component.scss

@@ -1,7 +1,8 @@
 @use '@lucca-front/scss/src/commons/utils/reset';
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: var(--pr-t-elevation-surface-raised);
 	bottom: 0;
 	box-shadow: var(--pr-t-elevation-shadow-overflow);

package/src/components/multiSelect/component.scss

@@ -1,8 +1,9 @@
 @use '@lucca-front/scss/src/commons/utils/reset';
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/icons/src/icon/exports' as icon;
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: flex;
 	box-shadow: 0 0 0 1px var(--components-multiSelect-border-color);
 	background-color: var(--components-multiSelect-background);
@@ -12,6 +13,10 @@
 	gap: var(--components-multiSelect-gap);
 	cursor: pointer;
 
+	&:hover {
+		--components-multiSelect-border-color: var(--palettes-neutral-400);
+	}
+
 	&:has(.multipleSelect-displayer-search:focus-visible) {
 		@include a11y.focusVisible($offset: 3px);
 	}
@@ -67,6 +72,8 @@
 		.multipleSelect-arrow {
 			@include icon.M;
 			color: var(--components-multiSelect-arrow-color);
+			transition-property: transform;
+			transition-duration: var(--commons-animations-durations-standard);
 		}
 	}
 }

package/src/components/multiSelect/index.scss

@@ -20,6 +20,9 @@
 		@include disabled;
 	}
 
+	&:has([aria-expanded="true"]) {
+		@include expanded;
+	}
 }
 
 .multipleSelect-displayer {
@@ -31,7 +34,7 @@
 		}
 
 		&:has([aria-expanded="true"]):not(:has(:placeholder-shown)) {
-			@include displayerFilterExpended;
+			@include displayerFilterExpanded;
 		}
 	}
 }

package/src/components/multiSelect/states.scss

@@ -18,13 +18,19 @@
 	pointer-events: none;
 }
 
+@mixin expanded {
+	.multipleSelect-arrow {
+		transform: rotate(-180deg);
+	}
+}
+
 @mixin displayerFilterFilled {
 	.multipleSelect-displayer-search {
 		opacity: 0;
 	}
 }
 
-@mixin displayerFilterExpended {
+@mixin displayerFilterExpanded {
 	.multipleSelect-displayer-filter {
 		display: none;
 	}

package/src/components/navside/component.scss

@@ -3,9 +3,10 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/commons/utils/color';
 @use '@lucca-front/scss/src/commons/utils/keyframe';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	bottom: 0;
 	left: 0;
 	top: 0;

package/src/components/navside/vars.scss

@@ -1,4 +1,6 @@
-@mixin vars($atRoot: 'without: rule') {
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin vars($atRoot: namespace.$defaultAtRoot) {
 	@at-root ($atRoot) {
 		:root {
 			--commons-navSide-width: 15rem;

package/src/components/numericBadge/mods.scss

@@ -14,9 +14,9 @@
 	--components-numericBadge-lineHeight: var(--sizes-XS-lineHeight);
 }
 
-@mixin product {
-	--components-numericBadge-background: var(--palettes-product-200);
-	--components-numericBadge-color: var(--palettes-product-800);
+@mixin inherit {
+	--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));
+	--components-numericBadge-color: var(--palettes-800, var(--palettes-product-700));
 }
 
 @mixin brand {

package/src/components/pageHeader/component.scss

@@ -1,6 +1,7 @@
 @use '@lucca-front/scss/src/commons/utils/media';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	padding: var(--components-pageHeader-padding);
 
 	.menu {

package/src/components/pagination/component.scss

@@ -1,4 +1,6 @@
-@mixin component($atRoot: 'without: rule') {
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: flex;
 	flex-wrap: wrap;
 	padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);

package/src/components/plgPush/component.scss

@@ -2,8 +2,9 @@
 @use '@lucca-front/scss/src/commons/utils/reset';
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/components/link/exports' as link;
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: flex;
 	align-items: flex-start;
 	gap: var(--pr-t-spacings-100);
@@ -14,6 +15,12 @@
 	border-radius: var(--commons-borderRadius-L);
 	background-color: var(--palettes-brand-50);
 
+	.link {
+		@include link.brand;
+
+		display: inline-block;
+	}
+
 	@at-root ($atRoot) {
 		.plgPush-icons {
 			position: relative;
@@ -53,11 +60,5 @@
 			gap: var(--pr-t-spacings-25);
 			padding: var(--pr-t-spacings-0);
 		}
-
-		.link {
-			@include link.brand;
-
-			display: inline-block;
-		}
 	}
 }

package/src/components/popover/component.scss

@@ -1,7 +1,8 @@
 @use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: block;
 	background-color: var(--pr-t-elevation-surface-raised);
 	box-shadow: var(--pr-t-elevation-shadow-overlay);
@@ -11,31 +12,27 @@
 	min-width: var(--pr-t-spacings-500);
 	animation: popup var(--commons-animations-durations-fast) ease 1 forwards;
 
-	@at-root {
-		.popover-close {
-			// :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
-			&.button,
-			&:not(.button) {
-				@include button.outlined;
-				@include button.XS;
-				@include button.onlyIconXS;
+	// need of a higher specificity
+	.popover-close {
+		@include button.outlined;
+		@include button.XS;
+		@include button.onlyIconXS;
 
-				--components-button-padding: var(--pr-t-spacings-50);
+		--components-button-padding: var(--pr-t-spacings-50);
 
-				padding: 0;
-				border-radius: 50%;
-				position: absolute;
-				left: calc(var(--pr-t-spacings-100) * -1);
-				top: calc(var(--pr-t-spacings-100) * -1);
-				z-index: 2;
+		padding: 0;
+		border-radius: 50%;
+		position: absolute;
+		left: calc(var(--pr-t-spacings-100) * -1);
+		top: calc(var(--pr-t-spacings-100) * -1);
+		z-index: 2;
 
-				&:not(:focus-visible) {
-					@include a11y.mask;
-				}
-			}
+		&:not(:focus-visible) {
+			@include a11y.mask;
 		}
+	}
 
+	@at-root ($atRoot) {
 		.popover-contentOptional {
 			padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);
 		}

package/src/components/progress/component.scss

@@ -1,6 +1,7 @@
 @use '@lucca-front/scss/src/commons/utils/keyframe';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	@keyframes progress {
 		0% {
 			transform: scale(0, 1);

package/src/components/radioButtons/component.scss

@@ -1,7 +1,8 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: flex;
 
 	@at-root ($atRoot) {
@@ -74,7 +75,7 @@
 						color: var(--palettes-product-800);
 
 						.numericBadge {
-							@include numericBadge.product;
+							@include numericBadge.inherit;
 						}
 					}
 				}

package/src/components/radioField/component.scss

@@ -1,7 +1,8 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	position: relative;
 	width: fit-content;
 	height: fit-content;

package/src/components/scrollBox/component.scss

@@ -1,6 +1,7 @@
 @use '@lucca-front/scss/src/commons/utils/color';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: var(--components-scrollBox-backgroundColor);
 	position: relative;
 	display: flex;

package/src/components/segmentedControl/component.scss

@@ -84,8 +84,9 @@
 				content: var(--components-segmentedControl-backgroundContent);
 				z-index: -1;
 				position: absolute;
-				inset: var(--pr-t-spacings-50);
-				bottom: calc(var(--pr-t-spacings-50) - var(--commons-divider-width));
+				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);
@@ -95,7 +96,6 @@
 
 			&:hover {
 				&::before {
-					background-color: var(--palettes-neutral-50);
 					opacity: 1;
 					scale: 1;
 				}

package/src/components/segmentedControl/states.scss

@@ -9,7 +9,7 @@
 	--components-segmentedControl-zIndex: 1;
 
 	.numericBadge {
-		@include numericBadge.product;
+		@include numericBadge.inherit;
 	}
 }
 

package/src/components/simpleSelect/component.scss

@@ -1,6 +1,7 @@
 @use '@lucca-front/icons/src/icon/exports' as icon;
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: grid;
 	grid-template-columns: 1fr auto auto;
 	align-items: center;

package/src/components/skeleton/component.scss

@@ -1,4 +1,6 @@
-@mixin component($atRoot: 'without: rule') {
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	@at-root ($atRoot) {
 		.skeleton-item {
 			animation: skeletonFade var(--commons-animations-durations-fast) ease-in 1 forwards;

package/src/components/sortableList/component.scss

@@ -1,6 +1,7 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: var(--pr-t-elevation-surface-raised);
 	border: var(--commons-divider-width) solid var(--commons-divider-color);
 	border-radius: var(--commons-borderRadius-M);

package/src/components/statusBadge/component.scss

@@ -1,4 +1,6 @@
-@mixin component($atRoot: 'without: rule') {
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	align-items: flex-start;
 	background-color: var(--palettes-100, var(--palettes-product-100));
 	border-radius: var(--commons-borderRadius-L);

package/src/components/switch/component.scss

@@ -1,7 +1,8 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: block;
 	position: relative;
 	line-height: var(--components-switch-lineHeight);

package/src/components/switchField/component.scss

@@ -1,7 +1,8 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	position: relative;
 
 	@at-root ($atRoot) {

package/src/components/table/component.scss

@@ -1,6 +1,7 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	font-size: var(--components-table-font-size);
 	line-height: var(--components-table-line-height);
 	border-spacing: 0;

package/src/components/table/mods.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin S {
 	font-size: var(--sizes-S-fontSize);
@@ -207,7 +208,7 @@
 	}
 }
 
-@mixin draggable($atRoot: 'without: rule') {
+@mixin draggable($atRoot: namespace.$defaultAtRoot) {
 	@at-root ($atRoot) {
 		.table-body-row-cell-handler,
 		.table-foot-row-cell-handler {
@@ -272,7 +273,7 @@
 	}
 }
 
-@mixin twoLines($atRoot: 'without: rule') {
+@mixin twoLines($atRoot: namespace.$defaultAtRoot) {
 	@at-root ($atRoot) {
 		.table-head-row-cell-secondLine {
 			margin-top: var(--pr-t-spacings-50);

package/src/components/tableOfContent/component.scss

@@ -1,6 +1,7 @@
 @use '@lucca-front/scss/src/commons/utils/reset';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	align-items: flex-start;
 	display: flex;
 	flex-direction: column;

package/src/components/tableSortable/component.scss

@@ -1,7 +1,8 @@
 @use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/icons/src/icon/exports' as icon;
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	@include button.text;
 	@include button.withIcon;
 
@@ -11,7 +12,8 @@
 	user-select: none;
 	font-weight: var(--components-sortable-fontWeight);
 	vertical-align: top;
-	align-items: flex-start;
+	align-items: flex-end;
+	white-space: wrap;
 	left: var(--components-sortable-offset);
 	text-align: inherit;
 	flex-direction: var(--components-sortable-direction);
@@ -21,7 +23,7 @@
 
 	@at-root ($atRoot) {
 		.tableSortable-arrows {
-			margin-top: var(--components-sortable-arrowsOffset);
+			margin-bottom: var(--components-sortable-arrowsOffset);
 			position: relative;
 			width: 1rem;
 			height: 1rem;

package/src/components/tag/component.scss

@@ -1,6 +1,7 @@
 @use '@lucca-front/icons/src/icon/exports' as icon;
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: var(--components-tag-background);
 	border-radius: var(--commons-borderRadius-M);
 	font-size: var(--components-tag-fontSize);

package/src/components/textField/component.scss

@@ -2,14 +2,19 @@
 @use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/icons/src/icon/exports' as icon;
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: flex;
 	align-items: stretch;
 	border-radius: var(--commons-borderRadius-M);
 	background-color: var(--component-textField-background);
 	box-shadow: 0 0 0 1px var(--component-textField-border);
 
+	&:hover {
+		--component-textField-border: var(--palettes-neutral-400);
+	}
+
 	&:has(.textField-input-value:focus-visible) {
 		@include a11y.focusVisible($offset: 3px);
 	}
@@ -30,10 +35,6 @@
 			background-color: var(--component-textField-background);
 			position: relative;
 
-			&:hover {
-				--component-textField-border: var(--palettes-neutral-400);
-			}
-
 			&:has(.textField-input-affix-icon) {
 				--component-textField-affix-padding: 2.5rem;
 			}

package/src/components/textField/states.scss

@@ -3,7 +3,7 @@
 	--component-textField-background: var(--palettes-error-50);
 	--component-textField-placeholder: var(--palettes-error-400);
 
-	.textField-input:hover {
+	&:hover {
 		--component-textField-border: var(--palettes-error-600);
 	}
 }

package/src/components/textfields/component.scss

@@ -1,4 +1,6 @@
-@mixin component($atRoot: 'without: rule') {
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	vertical-align: middle;
 	width: var(--components-textfield-sizes-default);
 

package/src/components/timeline/component.scss

@@ -1,6 +1,7 @@
 @use '@lucca-front/scss/src/commons/utils/reset';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	list-style-type: none;
 	padding: 0;
 	margin: var(--pr-t-spacings-200) 0;

package/src/components/timepicker/component.scss

@@ -1,7 +1,8 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/icons/src/icon/exports' as icons;
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	padding: var(--components-timepicker-padding);
 	width: fit-content;
 

package/src/components/timepickerDeprecated/component.scss

@@ -1,6 +1,7 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	padding: var(--components-timepicker-padding);
 	border: 0;
 	border-radius: var(--commons-borderRadius-M);