@lucca-front/scss 20.2.2 → 20.3.0-rc.2

package/src/components/timeline/index.scss

@@ -1,108 +1,114 @@
 @use 'exports' as *;
 
 .timeline-step {
-	&:is([aria-current='step']) {
-		@include current;
+	@layer states {
+		&:is([aria-current='step']) {
+			@include current;
+		}
 	}
 }
 
 .timeline {
-	@include vars;
-	@include component;
-
-	&.mod-number {
-		@include number;
-
-		&.mod-L {
-			@include numberL;
-		}
-	}
-
-	&.mod-S {
-		@include S;
-	}
-
-	&.mod-L {
-		@include L;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-vertical {
-		@include vertical;
+	@layer mods {
+		&.mod-number {
+			@include number;
 
-		&:not(.mod-S, .mod-L) {
-			@include verticalNotSNotL;
+			&.mod-L {
+				@include numberL;
+			}
 		}
 
 		&.mod-S {
-			@include verticalS;
+			@include S;
 		}
 
 		&.mod-L {
-			@include verticalL;
+			@include L;
 		}
 
-		&.mod-progress {
-			@include verticalProgress;
-		}
-	}
+		&.mod-vertical {
+			@include vertical;
 
-	&.mod-addStep {
-		@include addStep;
+			&:not(.mod-S, .mod-L) {
+				@include verticalNotSNotL;
+			}
 
-		&.mod-L {
-			@include addStepL;
-		}
+			&.mod-S {
+				@include verticalS;
+			}
 
-		&.mod-vertical {
-			@include addStepVertical;
+			&.mod-L {
+				@include verticalL;
+			}
 
-			&:not(.mod-L) {
-				@include addStepVerticalNotL;
+			&.mod-progress {
+				@include verticalProgress;
 			}
+		}
+
+		&.mod-addStep {
+			@include addStep;
 
 			&.mod-L {
-				@include addStepVerticalL;
+				@include addStepL;
 			}
-		}
-	}
 
-	&.mod-checkedPastStep {
-		@include checkedPastStep;
+			&.mod-vertical {
+				@include addStepVertical;
 
-		&.mod-L {
-			@include checkedPastStepL;
-		}
+				&:not(.mod-L) {
+					@include addStepVerticalNotL;
+				}
 
-		&.mod-vertical:not(.mod-L) {
-			@include checkedPastStepVerticalNotL;
+				&.mod-L {
+					@include addStepVerticalL;
+				}
+			}
 		}
-	}
 
-	&.mod-addBetweenStep {
-		@include addBetweenStep;
+		&.mod-checkedPastStep {
+			@include checkedPastStep;
 
-		&.mod-vertical:not(.mod-L) {
-			@include addBetweenStepVerticalNotL;
+			&.mod-L {
+				@include checkedPastStepL;
+			}
+
+			&.mod-vertical:not(.mod-L) {
+				@include checkedPastStepVerticalNotL;
+			}
 		}
 
-		&.mod-L {
-			@include addBetweenStepL;
+		&.mod-addBetweenStep {
+			@include addBetweenStep;
+
+			&.mod-vertical:not(.mod-L) {
+				@include addBetweenStepVerticalNotL;
+			}
+
+			&.mod-L {
+				@include addBetweenStepL;
+			}
 		}
-	}
 
-	&.mod-progress {
-		@include progress;
-	}
+		&.mod-progress {
+			@include progress;
+		}
 
-	&.mod-dashed {
-		@include dashed;
+		&.mod-dashed {
+			@include dashed;
 
-		&.mod-vertical {
-			@include dashedVertical;
+			&.mod-vertical {
+				@include dashedVertical;
+			}
 		}
-	}
 
-	&:not(.mod-checkedPastStep) {
-		@include notPastChecked;
+		&:not(.mod-checkedPastStep) {
+			@include notPastChecked;
+		}
 	}
 }

package/src/components/timepicker/index.scss

@@ -2,26 +2,32 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
 
 .timePicker {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-stepper {
-		@include stepper;
-	}
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-stepperHover {
-		@include stepperHover;
-	}
+		&.mod-stepper {
+			@include stepper;
+		}
 
-	&:has([aria-invalid='true']) {
-		@include invalid;
+		&.mod-stepperHover {
+			@include stepperHover;
+		}
 	}
 
-	&:has([disabled]) {
-		@include disabled;
+	@layer states {
+		&:has([aria-invalid='true']) {
+			@include invalid;
+		}
+
+		&:has([disabled]) {
+			@include disabled;
+		}
 	}
 }

package/src/components/title/index.scss

@@ -1,39 +1,56 @@
 @use 'exports' as *;
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	@include vars;
-	@include component;
-}
+@layer base {
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		@include vars;
+		@include component;
+	}
 
-h1 {
-	@include h1;
+	h1 {
+		@include h1;
+	}
 
-	&.mod-XXXL {
-		@include XXXL;
+	h2 {
+		@include h2;
 	}
-}
 
-h2 {
-	@include h2;
-}
+	h3 {
+		@include h3;
+	}
 
-h3 {
-	@include h3;
-}
+	h4 {
+		@include h4;
+	}
 
-h4 {
-	@include h4;
-}
+	h5 {
+		@include h5;
+	}
 
-h5 {
-	@include h5;
+	h6 {
+		@include h6;
+	}
 }
 
-h6 {
-	@include h6;
+@layer mods {
+	h1 {
+		&.mod-XXXL {
+			@include XXXL;
+		}
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		&.mod-elementAfterText {
+			@include elementAfterText;
+		}
+	}
 }

package/src/components/title/mods.scss

@@ -23,7 +23,7 @@
 	--sizes-verticalPadding: var(--sizes-M-verticalPadding); // Deprecated
 }
 
-/* Deprecated */
+// Deprecated
 @mixin h5 {
 	--components-title-font: 600 var(--pr-t-font-fontSize-175)/var(--pr-t-font-lineHeight-250) var(--pr-t-font-family);
 	--sizes-verticalPadding: var(--sizes-S-verticalPadding);
@@ -33,3 +33,9 @@
 	--components-title-font: 600 var(--pr-t-font-fontSize-150)/var(--pr-t-font-lineHeight-200) var(--pr-t-font-family);
 	--sizes-verticalPadding: var(--sizes-XS-verticalPadding);
 }
+
+@mixin elementAfterText {
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: var(--pr-t-spacings-100);
+}

package/src/components/titleSection/index.scss

@@ -2,43 +2,51 @@
 @use 'exports' as *;
 
 .titleSection {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 }
 
 %titleXXXL {
-	@include XXXL('!important');
+	@layer components {
+		@include XXXL('!important');
+	}
 }
 
 %titleImportant {
-	@include title('!important');
+	@layer components {
+		@include title('!important');
+	}
 }
 
 .titleSection-sub {
-	:is(h1, h1.mod-XXXL) ~ & {
-		@include XXXL;
-	}
-
-	:is(.pr-u-h1, .pr-u-h1.mod-XXXL) ~ & {
-		@extend %titleXXXL;
-	}
-
-	:is(h2, h3, h4, h5, h6) ~ & {
-		@include title;
-	}
-
-	:is(.pr-u-h2, .pr-u-h3, .pr-u-h4, .pr-u-h5, .pr-u-h6) ~ & {
-		@extend %titleImportant;
-	}
+	@layer components {
+		:is(h1, h1.mod-XXXL) ~ & {
+			@include XXXL;
+		}
 
-	// Deprecated .u- utilities
-	@if config.$deprecatedUtilityPrefix {
-		:is(.u-h1, .u-h1.mod-XXXL) ~ & {
+		:is(.pr-u-h1, .pr-u-h1.mod-XXXL) ~ & {
 			@extend %titleXXXL;
 		}
 
-		:is(.u-h2, .u-h3, .u-h4, .u-h5, .u-h6) ~ & {
+		:is(h2, h3, h4, h5, h6) ~ & {
+			@include title;
+		}
+
+		:is(.pr-u-h2, .pr-u-h3, .pr-u-h4, .pr-u-h5, .pr-u-h6) ~ & {
 			@extend %titleImportant;
 		}
+
+		// Deprecated .u- utilities
+		@if config.$deprecatedUtilityPrefix {
+			:is(.u-h1, .u-h1.mod-XXXL) ~ & {
+				@extend %titleXXXL;
+			}
+
+			:is(.u-h2, .u-h3, .u-h4, .u-h5, .u-h6) ~ & {
+				@extend %titleImportant;
+			}
+		}
 	}
 }

package/src/components/toast/index.scss

@@ -1,10 +1,14 @@
 @use 'exports' as *;
 
 .toasts {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-bottom {
-		@include bottom;
+	@layer mods {
+		&.mod-bottom {
+			@include bottom;
+		}
 	}
 }

package/src/components/tooltip/index.scss

@@ -1,38 +1,42 @@
 @use 'exports' as *;
 
 .tooltip {
-	@include vars;
-	@include component;
-
-	&.is-above {
-		@include above;
-	}
-
-	&.is-below {
-		@include below;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.is-before {
-		@include before;
-
+	@layer states {
 		&.is-above {
-			@include beforeAbove;
+			@include above;
 		}
 
 		&.is-below {
-			@include beforeBelow;
+			@include below;
 		}
-	}
 
-	&.is-after {
-		@include after;
+		&.is-before {
+			@include before;
 
-		&.is-above {
-			@include afterAbove;
+			&.is-above {
+				@include beforeAbove;
+			}
+
+			&.is-below {
+				@include beforeBelow;
+			}
 		}
 
-		&.is-below {
-			@include afterBelow;
+		&.is-after {
+			@include after;
+
+			&.is-above {
+				@include afterAbove;
+			}
+
+			&.is-below {
+				@include afterBelow;
+			}
 		}
 	}
 }

package/src/components/userPopover/component.scss

@@ -31,6 +31,7 @@
 
 		.userPopover-details-info {
 			min-inline-size: 0;
+			flex-grow: 1;
 		}
 
 		.userPopover-details-info-name {

package/src/components/userPopover/index.scss

@@ -1,6 +1,8 @@
 @use 'exports' as *;
 
 .userPopover {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 }

package/src/components/userTile/index.scss

@@ -1,33 +1,37 @@
 @use 'exports' as *;
 
 .userTile {
-	@include vars;
-	@include component;
-
-	&.mod-XS {
-		@include XS;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-S {
-		@include S;
-	}
+	@layer mods {
+		&.mod-XS {
+			@include XS;
+		}
 
-	&.mod-L {
-		@include L;
-	}
+		&.mod-S {
+			@include S;
+		}
 
-	// .mod-XL is deprecated
-	&.mod-XL {
-		@include XL;
-	}
+		&.mod-L {
+			@include L;
+		}
 
-	// .mod-XXL is deprecated
-	&.mod-XXL {
-		@include XXL;
-	}
+		// .mod-XL is deprecated
+		&.mod-XL {
+			@include XL;
+		}
+
+		// .mod-XXL is deprecated
+		&.mod-XXL {
+			@include XXL;
+		}
 
-	// .mod-XXXL is deprecated
-	&.mod-XXXL {
-		@include XXXL;
+		// .mod-XXXL is deprecated
+		&.mod-XXXL {
+			@include XXXL;
+		}
 	}
 }

package/src/components/verticalNavigation/index.scss

@@ -1,35 +1,45 @@
 @use 'exports' as *;
 
 .verticalNavigation {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-iconless {
-		@include iconless;
+	@layer mods {
+		&.mod-iconless {
+			@include iconless;
+		}
 	}
 }
 
 .verticalNavigation-list {
-	&.mod-child {
-		@include child;
+	@layer mods {
+		&.mod-child {
+			@include child;
+		}
 	}
 }
 
 .verticalNavigation-list-item-link {
-	&[aria-expanded='true'] {
-		@include expanded;
-	}
+	@layer states {
+		&[aria-expanded='true'] {
+			@include expanded;
+		}
 
-	&[aria-current='page'] {
-		@include active;
-	}
+		&[aria-current='page'] {
+			@include active;
+		}
 
-	&[disabled],
-	&.is-disabled {
-		@include disabled;
+		&[disabled],
+		&.is-disabled {
+			@include disabled;
+		}
 	}
 }
 
 span.verticalNavigation-list-item-link {
-	@include disabled;
+	@layer states {
+		@include disabled;
+	}
 }