@lucca-front/scss 21.1.0-rc.0 → 21.1.0-rc.1

package/src/components/emptyState/component.scss

@@ -18,12 +18,7 @@
 			inset-inline-start: var(--components-emptyState-container-left);
 			padding: 0;
 			inline-size: 100%;
-			position: sticky;
-
-			.container & {
-				--components-emptyState-container-maxWidth: none;
-				--components-emptyState-container-left: auto;
-			}
+			position: var(--components-emptyState-container-position);
 		}
 
 		.emptyState-content {

package/src/components/emptyState/index.scss

@@ -14,5 +14,15 @@
 		&.mod-center {
 			@include center;
 		}
+
+		.table &,
+		.indexTable &,
+		.dataTable & {
+			@include insideTable;
+		}
+
+		.container & {
+			@include insideContainer;
+		}
 	}
 }

package/src/components/emptyState/mods.scss

@@ -55,3 +55,12 @@
 		justify-content: center;
 	}
 }
+
+@mixin insideTable {
+	--components-emptyState-container-position: sticky;
+}
+
+@mixin insideContainer {
+	--components-emptyState-container-maxWidth: none;
+	--components-emptyState-container-left: auto;
+}

package/src/components/emptyState/vars.scss

@@ -1,6 +1,7 @@
 @mixin vars {
 	--components-emptyState-container-maxWidth: calc(100vw - var(--commons-navSide-width) - 7rem);
-	--components-emptyState-container-left: calc(var(--commons-navSide-width) + 3.5rem);
+	--components-emptyState-container-left: calc(var(--commons-navSide-width) + var(--pr-t-spacings-400));
+	--components-emptyState-container-position: static;
 
 	--components-emptyState-background-color: var(--pr-t-elevation-surface-default);
 	--components-emptyState-illustration-top-right-offset-left: min(

package/src/components/errorPage/component.scss

@@ -1,66 +1,50 @@
-@mixin component {
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: var(--components-errorPage-background);
 	block-size: 100vh;
 	inline-size: 100vw;
 	line-height: 1.2;
 	overflow: hidden;
 
-	.errorPage-section {
-		block-size: 100%;
-		max-inline-size: 1200px;
-		padding-block: 0;
-		padding-inline: var(--pr-t-spacings-400);
-		inline-size: 100vw;
-		margin-block: 0;
-		margin-inline: auto;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.errorPage-section-info {
-		margin-block-start: 10vh;
-		max-inline-size: 90vw;
-		inline-size: 450px;
-		padding-inline-end: var(--pr-t-spacings-400);
-	}
-
-	.errorPage-section-info-title {
-		font: var(--pr-t-font-heading-1);
-		margin-block-end: var(--pr-t-spacings-50);
-	}
-
-	.errorPage-section-info-text {
-		font-size: var(--pr-t-font-body-1-fontSize);
-		line-height: var(--pr-t-font-body-1-lineHeight);
-		margin-block-end: var(--pr-t-spacings-150);
-	}
-
-	.errorPage-section-image {
-		margin-block-start: 10vh;
-		inline-size: 50%;
-		max-inline-size: 580px;
-		min-inline-size: 350px;
-		block-size: auto;
-	}
-}
-
-@mixin compact {
-	overflow-y: auto;
-
-	.errorPage-section {
-		flex-direction: column;
-		justify-content: center;
-	}
-
-	.errorPage-section-info {
-		margin-block: var(--pr-t-spacings-400);
-		order: 1;
-		padding: 0;
-	}
-
-	.errorPage-section-image {
-		margin-block-start: var(--pr-t-spacings-400);
-		order: 0;
+	@at-root ($atRoot) {
+		.errorPage-section {
+			block-size: 100%;
+			max-inline-size: 1200px;
+			padding-block: 0;
+			padding-inline: var(--pr-t-spacings-400);
+			inline-size: 100vw;
+			margin-block: 0;
+			margin-inline: auto;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		.errorPage-section-info {
+			margin-block-start: 10vh;
+			max-inline-size: 90vw;
+			inline-size: 450px;
+			padding-inline-end: var(--pr-t-spacings-400);
+		}
+
+		.errorPage-section-info-title {
+			font: var(--pr-t-font-heading-1);
+			margin-block-end: var(--pr-t-spacings-50);
+		}
+
+		.errorPage-section-info-text {
+			font-size: var(--pr-t-font-body-1-fontSize);
+			line-height: var(--pr-t-font-body-1-lineHeight);
+			margin-block-end: var(--pr-t-spacings-150);
+		}
+
+		.errorPage-section-image {
+			margin-block-start: 10vh;
+			inline-size: 50%;
+			max-inline-size: 580px;
+			min-inline-size: 350px;
+			block-size: auto;
+		}
 	}
 }

package/src/components/errorPage/index.scss

@@ -11,5 +11,9 @@
 		@include media.max('S') {
 			@include compact;
 		}
+
+		.appLayout & {
+			@include inAppLayout;
+		}
 	}
 }

package/src/components/errorPage/mods.scss

@@ -0,0 +1,38 @@
+@mixin compact {
+	overflow-y: auto;
+
+	.errorPage-section {
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.errorPage-section-info {
+		margin-block: var(--pr-t-spacings-400);
+		order: 1;
+		padding: 0;
+	}
+
+	.errorPage-section-image {
+		margin-block-start: var(--pr-t-spacings-400);
+		order: 0;
+	}
+}
+
+@mixin inAppLayout {
+	&,
+	.errorPage-section {
+		block-size: 100%;
+		inline-size: 100%;
+	}
+
+	.errorPage-section {
+		gap: var(--pr-t-spacings-400);
+	}
+
+	.errorPage-section-image,
+	.errorPage-section-info {
+		margin-block-start: 0;
+		padding: 0;
+		max-inline-size: 100%;
+	}
+}

package/src/components/fieldset/component.scss

@@ -17,6 +17,10 @@
 			inline-size: 100%;
 			min-block-size: var(--pr-t-spacings-300);
 			display: contents;
+
+			&:has(.fieldset-title-content-text:empty) {
+				display: none;
+			}
 		}
 
 		.fieldset-title-content {

package/src/components/filterPill/component.scss

@@ -40,7 +40,18 @@
 
 		.filterPill_popover-content-option {
 			padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100);
-			border-radius: var(--pr-t-border-radius-50);
+			border-radius: var(--pr-t-border-radius-default);
+			position: relative;
+
+			.formLabel {
+				position: static;
+
+				&::before {
+					content: '';
+					position: absolute;
+					inset: 0;
+				}
+			}
 
 			&:hover {
 				background-color: var(--palettes-neutral-50);

package/src/components/form/component.scss

@@ -6,7 +6,7 @@
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: block;
 
-	.divider {
+	.divider:not(.mod-vertical) {
 		margin-block: var(--pr-t-spacings-300);
 	}
 

package/src/components/form/index.scss

@@ -101,6 +101,12 @@
 				@include withArrowS;
 			}
 		}
+
+		&:has(.formLabel.pr-u-mask) {
+			&:not(:has(.inlineMessage)) {
+				@include hiddenLabel;
+			}
+		}
 	}
 }
 

package/src/components/form/mods.scss

@@ -12,6 +12,7 @@
 @use '@lucca-front/scss/src/components/multiSelect/exports' as multiSelect;
 @use '@lucca-front/scss/src/components/timepicker/exports' as timepicker;
 @use '@lucca-front/scss/src/components/box/exports' as box;
+@use '@lucca-front/scss/src/components/color/exports' as color;
 
 @mixin maxWidth {
 	max-inline-size: var(--components-form-maxWidth);
@@ -115,6 +116,10 @@
 	.timePicker {
 		@include timepicker.S;
 	}
+
+	.color {
+		@include color.M;
+	}
 }
 
 @mixin XS {
@@ -369,3 +374,7 @@
 		content: '*' / '';
 	}
 }
+
+@mixin hiddenLabel {
+	gap: 0;
+}

package/src/components/highlightData/component.scss

@@ -35,6 +35,7 @@
 		}
 
 		.highlightData-content-subText {
+			grid-area: subtext;
 			font: var(--pr-t-font-body-XS);
 			color: var(--pr-t-color-text-subtle);
 			margin-block-start: var(--pr-t-spacings-100) !important; // Override list reset

package/src/components/highlightData/mods.scss

@@ -7,8 +7,9 @@
 }
 
 @mixin valueFirst {
-	--components-highlightData-grid : 'value action'
-	                                  'title action';
+	--components-highlightData-grid : 'value   action'
+	                                  'title   action'
+																		'subtext action';
 }
 
 @mixin valueFirstIllustrations {

package/src/components/highlightData/vars.scss

@@ -1,7 +1,8 @@
 @mixin vars {
 	--components-highlightData-display: grid;
-	--components-highlightData-grid: 'title action'
-	                                 'value action';
+	--components-highlightData-grid: 'title   action'
+																		'value   action'
+																		'subtext action';
 	--components-highlightData-alignItem: center;
 	--components-highlightData-background: var(--pr-t-elevation-surface-raised);
 	--components-highlightData-padding-inline: var(--pr-t-spacings-200);

package/src/components/horizontalNavigation/component.scss

@@ -32,7 +32,7 @@
 		.horizontalNavigation-containerOptional,
 		.menu-containerOptional {
 			max-inline-size: var(--commons-container-maxWidth);
-			padding-inline: var(--commons-container-padding);
+			padding: var(--commons-container-padding);
 		}
 
 		// .menu-list is deprecated

package/src/components/index.scss

@@ -110,7 +110,10 @@
 @forward 'listboxOption';
 @forward 'suggestion';
 @forward 'resourceCard';
-@forward 'formPresentation';
+@forward 'presentation';
+@forward 'color';
+@forward 'bubbleIllustration';
+@forward 'bubbleIcon';
 
 @forward 'filterBarDeprecated';
 @forward 'tableFixedDeprecated';

package/src/components/inputFramed/component.scss

@@ -13,18 +13,12 @@
 	display: flex;
 	flex-direction: column;
 
-	@at-root ($atRoot) {
-		.inputFramed-header-label.formLabel {
-			position: static;
-			font-weight: var(--components-inputFramed-header-label-fontWeight);
-
-			&::after {
-				content: '';
-				position: absolute;
-				inset: calc(var(--pr-t-spacings-50) * -1);
-			}
-		}
+	.formLabel-info {
+		position: relative;
+		z-index: 1;
+	}
 
+	@at-root ($atRoot) {
 		.inputFramed-header-field {
 			flex: 1;
 
@@ -48,6 +42,17 @@
 			align-content: flex-start;
 			gap: var(--pr-t-spacings-100);
 			align-items: var(--components-inputFramed-header-alignItems);
+
+			.inputFramed-header-label.formLabel {
+				position: static;
+				font-weight: var(--components-inputFramed-header-label-fontWeight);
+
+				&::after {
+					content: '';
+					position: absolute;
+					inset: calc(var(--pr-t-spacings-50) * -1);
+				}
+			}
 		}
 
 		.inputFramed-header-illustration {

package/src/components/mainLayout/component.scss

@@ -75,11 +75,11 @@
 				--components-mainLayout-content-inside-block-firstLastOfType-marginBlock: var(--pr-t-spacings-300);
 			}
 
-			&:first-of-type {
+			&:not(& + &) {
 				margin-block-start: var(--components-mainLayout-content-inside-block-firstLastOfType-marginBlock);
 			}
 
-			&:last-of-type {
+			&:not(:has(+ &)) {
 				margin-block-end: var(--components-mainLayout-content-inside-block-firstLastOfType-marginBlock);
 			}
 
@@ -95,6 +95,7 @@
 			z-index: 1;
 			inset-block-start: var(--components-mainLayout-content-inside-header-insetBlockStart);
 			inset-inline-start: 0;
+			background-color: var(--components-mainLayout-content-inside-header-backgroundColor);
 
 			&:empty {
 				display: none;
@@ -106,6 +107,7 @@
 			inset-block-end: var(--components-mainLayout-content-inside-footer-insetBlockEnd);
 			inset-inline-start: 0;
 			margin-block-start: auto;
+			background-color: var(--components-mainLayout-content-inside-footer-backgroundColor);
 
 			&:empty {
 				display: none;

package/src/components/mainLayout/mods.scss

@@ -4,10 +4,12 @@
 
 @mixin stickyHeader {
 	--components-mainLayout-content-inside-header-position: sticky;
+	--components-mainLayout-content-inside-header-backgroundColor: var(--commons-background-base);
 }
 
 @mixin stickyFooter {
 	--components-mainLayout-content-inside-footer-position: sticky;
+	--components-mainLayout-content-inside-footer-backgroundColor: var(--commons-background-base);
 }
 
 @mixin stickyBlock {

package/src/components/mainLayout/vars.scss

@@ -7,4 +7,6 @@
 	--components-mainLayout-content-inside-header-insetBlockStart: auto;
 	--components-mainLayout-content-inside-footer-insetBlockEnd: auto;
 	--components-mainLayout-content-inside-block-firstLastOfType-marginBlock: var(--pr-t-spacings-200);
+	--components-mainLayout-content-inside-header-backgroundColor: transparent;
+	--components-mainLayout-content-inside-footer-backgroundColor: transparent;
 }

package/src/components/multiSelect/mods.scss

@@ -61,7 +61,7 @@
 		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);
+		margin: var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
 
 		lu-simple-select-default-option.pr-u-ellipsis {
 			white-space: normal !important;

package/src/components/navside/component.scss

@@ -116,6 +116,10 @@
 			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
 
+		.navSide-item-link-title {
+			overflow-wrap: anywhere;
+		}
+
 		.navSide-item-link-badgesOptional {
 			display: flex;
 			column-gap: var(--pr-t-spacings-150);

package/src/components/presentation/component.scss

@@ -0,0 +1,20 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	@at-root ($atRoot) {
+		.presentation-description {
+			margin: 0;
+		}
+
+		.presentation-description-term {
+			font: var(--pr-t-font-body-S);
+			color: var(--pr-t-color-text-subtle);
+			display: var(--components-presentation-description-term-display);
+		}
+
+		.presentation-description-definition {
+			display: var(--components-presentation-description-definition-display);
+			margin: 0;
+		}
+	}
+}

package/src/components/presentation/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/{formPresentation → presentation}/index.scss

@@ -1,6 +1,6 @@
 @use 'exports' as *;
 
-.formPresentation {
+.presentation {
 	@layer components {
 		@include vars;
 		@include component;

package/src/components/presentation/mods.scss

@@ -0,0 +1,3 @@
+@mixin checkable {
+	--components-presentation-description-child-display: inline-block
+}

package/src/components/presentation/vars.scss

@@ -0,0 +1,5 @@
+@mixin vars {
+	--components-presentation-description-child-display: block;
+	--components-presentation-description-term-display: var(--components-presentation-description-child-display);
+	--components-presentation-description-definition-display: var(--components-presentation-description-child-display);
+}

package/src/components/resourceCard/mods.scss

@@ -1,6 +1,8 @@
 @use '@lucca-front/scss/src/commons/utils/color';
 @use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
+@use '@lucca-front/scss/src/components/bubbleIllustration/exports' as bubbleIllustration;
+@use '@lucca-front/scss/src/components/bubbleIcon/exports' as bubbleIcon;
 
 @mixin gridWrapper {
 	--components-resourceCardWrapper-display: grid;
@@ -23,6 +25,14 @@
 	--components-resourceCard-layout-content-font: var(--pr-t-font-body-S);
 	--components-resourceCard-layout-header-title-font: var(--pr-t-font-heading-4);
 	--components-resourceCard-layout-before-illustration-minSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50));
+
+	.bubbleIllustration {
+		@include bubbleIllustration.S;
+  }
+  
+	.bubbleIcon {
+		@include bubbleIcon.S;
+	}
 }
 
 @mixin hasIllustrationGridS {

package/src/components/resourceCard/states.scss

@@ -20,6 +20,16 @@
 	--components-resourceCard-color: var(--palettes-neutral-500);
 	--components-resourceCard-layout-header-title-action-color: var(--palettes-neutral-500);
 	--components-resourceCard-before-boxShadow: 0 0 0 1px var(--palettes-neutral-50);
+
+
+	.bubbleIllustration {
+		--palettes-brand-600: var(--pr-t-color-input-icon-disabled);
+  }
+  
+	.bubbleIcon {
+		--components-bubbleIcon-color: var(--pr-t-color-input-icon-disabled);
+		--components-bubbleIcon-bubble-path-fill: var(--pr-t-color-input-background-disabled);
+	}
 }
 
 @mixin active {

package/src/components/simpleSelect/mods.scss

@@ -62,6 +62,6 @@
 		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);
+		margin: var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
 	}
 }

package/src/components/timepicker/component.scss

@@ -60,13 +60,13 @@
 			justify-content: center;
 			border: 0;
 			block-size: var(--components-timepicker-input-height);
-			inline-size: var(--components-timepicker-input-width);
+			inline-size: calc(var(--components-timepicker-input-minInlineSize) + var(--components-timepicker-input-digits, 2) * 1ch);
 			outline: none;
 			color: inherit;
 			background-color: transparent;
 			text-align: center;
-			padding-block: var(--components-timepicker-paddingInput-inline);
-			padding-inline: var(--components-timepicker-paddingInput-block);
+			padding-block: var(--components-timepicker-input-padding-block);
+			padding-inline: var(--components-timepicker-input-padding-inline);
 			box-sizing: content-box;
 			opacity: 0.0001;
 
@@ -83,7 +83,7 @@
 
 		.timePicker-fieldset-group-textfield-display {
 			position: absolute;
-			inset: var(--components-timepicker-paddingInput-inline) var(--components-timepicker-paddingInput-block);
+			inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
 			border-radius: var(--pr-t-border-radius-50);
 			pointer-events: none;
 			display: grid;
@@ -133,7 +133,9 @@
 		}
 
 		.timePicker-fieldset-meridiem {
-			inline-size: calc(var(--components-timepicker-input-width) + var(--components-timepicker-paddingInput-block) * 2);
+			box-sizing: content-box;
+			inline-size: calc(var(--components-timepicker-input-minInlineSize) + 2ch);
+			padding-inline: var(--components-timepicker-display-padding-block);
 			position: relative;
 			align-self: stretch;
 			margin-inline-start: calc(var(--pr-t-spacings-50) * -1);
@@ -141,7 +143,7 @@
 			&::after {
 				content: '';
 				position: absolute;
-				inset: var(--components-timepicker-paddingInput-inline) var(--components-timepicker-paddingInput-block);
+				inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
 				border-radius:var(--pr-t-border-radius-50);
 				display: grid;
 				place-items: center;

package/src/components/timepicker/mods.scss

@@ -2,10 +2,11 @@
 
 @mixin S {
 	--components-timepicker-font: var(--pr-t-font-body-S);
-	--components-timepicker-paddingInput-inline: var(--pr-t-spacings-25);
-	--components-timepicker-paddingInput-block: var(--pr-t-spacings-75);
+	--components-timepicker-display-padding-inline: var(--pr-t-spacings-25);
+	--components-timepicker-display-padding-block: var(--pr-t-spacings-75);
+	--components-timepicker-input-padding-inline: var(--pr-t-spacings-75);
+	--components-timepicker-input-padding-block: var(--pr-t-spacings-25);
 	--components-timepicker-input-height: 1.75rem;
-	--components-timepicker-input-width: 1.25rem;
 	--components-timepicker-separator-left: 1.875rem;
 }
 

package/src/components/timepicker/vars.scss

@@ -4,9 +4,11 @@
 	--components-timepicker-color: var(--pr-t-color-input-text);
 	--components-timepicker-font: var(--pr-t-font-body-M);
 	--components-timepicker-input-height: 2rem;
-	--components-timepicker-input-width: 1.5rem;
+	--components-timepicker-input-minInlineSize: 0.5rem;
+	--components-timepicker-input-padding-inline: var(--pr-t-spacings-100);
+	--components-timepicker-input-padding-block: var(--pr-t-spacings-50);
 	--components-timepicker-padding: 0;
-	--components-timepicker-paddingInput-inline: var(--pr-t-spacings-50);
-	--components-timepicker-paddingInput-block: var(--pr-t-spacings-100);
+	--components-timepicker-display-padding-inline: var(--pr-t-spacings-50);
+	--components-timepicker-display-padding-block: var(--pr-t-spacings-100);
 	--components-timepicker-separator-left: 2.375rem;
 }