@lucca-front/scss 20.4.0-rc.1 → 21.0.0-rc.2

package/src/components/indexTable/mods.scss

@@ -4,10 +4,6 @@
 @use '@lucca-front/scss/src/components/button/exports' as button;
 
 @mixin selectable {
-	.indexTable-head-row {
-		cursor: pointer;
-	}
-
 	.indexTable-body-row {
 		&:is(:focus-within, :hover) {
 			outline: none;
@@ -310,7 +306,7 @@
 		.indexTable-head-row-cell,
 		.indexTable-body-row-cell,
 		.indexTable-foot-row-cell {
-			@include cellFixedWidth;
+			@include cellInlineSize;
 		}
 	}
 
@@ -323,14 +319,14 @@
 				.indexTable-head-row-cell,
 				.indexTable-body-row-cell,
 				.indexTable-foot-row-cell {
-					@include cellFixedWidth;
+					@include cellInlineSize;
 				}
 			}
 		}
 	}
 }
 
-@mixin cellFixedWidth {
+@mixin cellInlineSize {
 	min-inline-size: var(--cell-width, auto);
 	max-inline-size: var(--cell-width, auto);
 	inline-size: var(--cell-width, auto);
@@ -359,10 +355,49 @@
 	}
 }
 
-@mixin alignRight {
-	text-align: end;
+@mixin alignEnd {
+	&,
+	.indexTable-body-row-cell-link {
+		text-align: end;
+	}
 }
 
 @mixin alignCenter {
-	text-align: center;
+	&,
+	.indexTable-body-row-cell-link {
+		text-align: center;
+	}
+}
+
+@mixin alignStart {
+	&,
+	.indexTable-body-row-cell-link {
+		text-align: start;
+	}
+}
+
+@mixin tfoot {
+	padding-block: var(--pr-t-spacings-50);
+
+	&::before,
+	&::after {
+		content: none;
+	}
+}
+
+@mixin groupButton {
+	@include button.ghost;
+	@include button.S;
+	@include button.onlyIconS;
+
+	--components-button-padding: var(--pr-t-spacings-25);
+
+	// Extend button reactive zone to his whole parent
+	position: static;
+
+	&::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+	}
 }

package/src/components/indexTable/states.scss

@@ -8,7 +8,7 @@
 		}
 	}
 
-	.indexTable-body-row-cellTitle-button[aria-expanded='false'] .lucca-icon {
+	.indexTable-body-row-cellTitle-button[aria-expanded='false'] .icon-arrowChevronTop {
 		transform: rotate(180deg);
 	}
 
@@ -79,3 +79,7 @@
 	--components-indexTable-cell-z-index: 2;
 	--components-indexTable-cell-subAction-opacity: 1;
 }
+
+@mixin rowsHidden {
+	--components-indexTable-row-display: none;
+}

package/src/components/indexTable/vars.scss

@@ -3,6 +3,7 @@
 	--components-indexTable-border-radius: var(--pr-t-border-radius-structure);
 	--components-indexTable-background-color: var(--palettes-neutral-50);
 	--components-indexTable-row-spacing: 4px;
+	--components-indexTable-row-display: table-row;
 
 	// on responsive, row spacing is increased
 	--components-indexTable-row-spacing-responsive: 8px;

package/src/components/inputFramed/component.scss

@@ -3,7 +3,7 @@
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	position: relative;
 	overflow: hidden;
-	padding: var(--pr-t-spacings-50);
+	padding: var(--components-inputFramed-padding);
 	border: solid 1px var(--components-inputFramed-borderColor);
 	border-radius: var(--pr-t-border-radius-default);
 	background-color: var(--palettes-neutral-0);
@@ -16,8 +16,7 @@
 	@at-root ($atRoot) {
 		.inputFramed-header-label.formLabel {
 			position: static;
-			font-weight: var(--pr-t-font-fontWeight-semibold);
-
+			font-weight: var(--components-inputFramed-header-label-fontWeight);
 
 			&::after {
 				content: '';
@@ -36,7 +35,7 @@
 		}
 
 		.inputFramed-header {
-			padding: var(--components-inputFramed-padding);
+			padding: var(--components-inputFramed-header-padding);
 			border-radius: var(--pr-t-border-radius-50);
 			background-color: var(--components-inputFramed-header-backgroundColor);
 			transition-property: background-color;
@@ -60,8 +59,8 @@
 		.inputFramed-header-info {
 			flex-basis: 100%;
 			border-block-start: 1px solid var(--components-inputFramed-header-info-borderColor);
-			margin-block-start: var(--pr-t-spacings-100);
-			padding-block-start: var(--pr-t-spacings-200);
+			padding-block-start: var(--components-inputFramed-header-info-paddingBlockStart);
+			margin-block-start: var(--components-inputFramed-header-info-marginBlockStart);
 			color: var(--components-inputFramed-header-info-color);
 
 			&:empty {
@@ -71,8 +70,8 @@
 
 		.inputFramed-content {
 			display: var(--components-inputFramed-content-display);
-			padding: var(--components-inputFramed-padding);
-			margin-block-start: var(--pr-t-spacings-50);
+			padding: var(--components-inputFramed-content-padding);
+			margin-block-start: var(--components-inputFramed-content-marginBlockStart);
 		}
 	}
 }
@@ -80,6 +79,6 @@
 @mixin wrapper($atRoot: namespace.$defaultAtRoot) {
 	display: flex;
 	flex-direction: column;
-	gap: var(--pr-t-spacings-150);
+	gap: var(--components-inputFramed-wrapper-gap);
 	margin-block: var(--pr-t-spacings-50);
 }

package/src/components/inputFramed/index.scss

@@ -40,10 +40,14 @@
 				@include disabled;
 			}
 		}
-	}
 
-	&.mod-center {
-		@include center;
+		&.mod-center {
+			@include center;
+		}
+
+		&.mod-L {
+			@include L;
+		}
 	}
 }
 
@@ -52,4 +56,10 @@
 		@include vars;
 		@include wrapper;
 	}
+
+	@layer mods {
+		&:has(.inputFramed.mod-L) {
+			@include wrapperL;
+		}
+	}
 }

package/src/components/inputFramed/mods.scss

@@ -1,3 +1,17 @@
 @mixin center {
 	--components-inputFramed-header-alignItems: center;
 }
+
+@mixin L {
+	--components-inputFramed-header-label-fontWeight: var(--pr-t-font-fontWeight-semibold);
+	--components-inputFramed-padding: var(--pr-t-spacings-50);
+	--components-inputFramed-header-padding: var(--pr-t-spacings-150);
+	--components-inputFramed-content-padding: var(--pr-t-spacings-150);
+	--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-50);
+	--components-inputFramed-header-info-marginBlockStart: var(--pr-t-spacings-100);
+	--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-200);
+}
+
+@mixin wrapperL {
+	--components-inputFramed-wrapper-gap: var(--pr-t-spacings-150);
+}

package/src/components/inputFramed/vars.scss

@@ -1,9 +1,16 @@
 @mixin vars {
+	--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);
 	--components-inputFramed-content-display: none;
 	--components-inputFramed-borderColor: var(--palettes-neutral-300);
 	--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);
-	--components-inputFramed-padding: var(--pr-t-spacings-150);
+	--components-inputFramed-padding: var(--pr-t-spacings-25);
+	--components-inputFramed-header-padding: var(--pr-t-spacings-75);
+	--components-inputFramed-content-padding: var(--pr-t-spacings-75);
+	--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);
 	--components-inputFramed-header-backgroundColor: transparent;
-	--components-inputFramed-header-info-color: inherit;
 	--components-inputFramed-header-alignItems: normal;
+	--components-inputFramed-header-label-fontWeight: var(--pr-t-font-fontWeight-regular);
+	--components-inputFramed-header-info-color: inherit;
+	--components-inputFramed-header-info-marginBlockStart: 0;
+	--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);
 }

package/src/components/link/mods.scss

@@ -4,8 +4,9 @@
 	.lucca-icon {
 		text-decoration: none;
 		font-size: 1em;
-		line-height: 1lh;
-		vertical-align: bottom;
+		vertical-align: baseline;
+		position: relative;
+		top: 0.075rem; // magic number
 	}
 
 	&:has(.link-text) {

package/src/components/listing/component.scss

@@ -5,20 +5,32 @@
 	padding: 0;
 	margin: 0;
 	padding-inline-start: var(--components-listing-paddingInlineStart);
+	margin-inline-start: var(--components-listing-marginInlineStart);
 	display: flex;
-	flex-direction: column;
-	gap: var(--pr-t-spacings-50);
+	flex-direction: var(--components-listing-flexDirection);
+	flex-wrap: var(--components-listing-flexWrap);
+	row-gap: var(--pr-t-spacings-50);
+	column-gap: var(--pr-t-spacings-100);
 	list-style-type: var(--components-listing-listStyleType);
+	clip-path: var(--components-listing-clipPath);
 
 	@at-root ($atRoot) {
 		.listing-item {
 			display: var(--components-listing-item-display);
 			align-items: flex-start;
 			gap: var(--pr-t-spacings-100);
+			margin-inline-start: 0;
 
 			&::marker {
 				line-height: 1;
 			}
+
+			&::before {
+				content: var(--components-listing-item-before-content);
+				border-inline-start: var(--commons-divider-border);
+				height: 0.75lh;
+				align-self: center;
+			}
 		}
 
 		.listing-item-icon {
@@ -32,5 +44,11 @@
 
 			@include icon.S;
 		}
+
+		.listing-item-content {
+			display: var(--components-listing-item-content-display);
+			gap: var(--components-listing-item-content-rowGap) var(--components-listing-item-content-columnGap);
+			flex-wrap: var(--components-listing-item-content-flexWrap);
+		}
 	}
 }

package/src/components/listing/index.scss

@@ -12,6 +12,16 @@
 			@include ordered;
 		}
 
+		&.mod-inline {
+			@include inline;
+			@include hideFirstItems;
+			@include nestedInline;
+
+			&.mod-divider {
+				@include divider;
+			}
+		}
+
 		.listing {
 			@include nested;
 

package/src/components/listing/mods.scss

@@ -48,3 +48,52 @@
 		--components-listing-listStyleType: lower-roman;
 	}
 }
+
+@mixin inline {
+	--components-listing-paddingInlineStart: 0;
+	--components-listing-flexDirection: row;
+	--components-listing-item-display: flex;
+	--components-listing-flexWrap: wrap;
+	--components-listing-item-content-flexWrap: wrap;
+	--components-listing-item-content-rowGap: var(--pr-t-spacings-50);
+}
+
+@mixin nestedInline {
+	&:has(.listing) {
+		.listing {
+			--components-listing-clipPath: 0;
+
+			@include inline;
+		}
+
+		.listing-item {
+			--components-listing-item-content-display: flex;
+			--components-listing-item-content-columnGap: var(--pr-t-spacings-100);
+		}
+	}
+
+	&.mod-divider:has(.listing) {
+		.listing {
+			--components-listing-marginInlineStart: calc(var(--components-listing-inlineFirst) * -1);
+
+			@include divider;
+		}
+
+		.listing-item-content {
+			--components-listing-item-content-columnGap: var(--pr-t-spacings-200);
+		}
+	}
+}
+
+@mixin hideFirstItems {
+	--components-listing-marginInlineStart: calc(var(--components-listing-inlineFirst) * -1);
+	--components-listing-clipPath: inset(
+		calc(var(--pr-t-spacings-50) * -1) calc(var(--pr-t-spacings-50) * -1) calc(var(--pr-t-spacings-50) * -1)
+			calc(var(--components-listing-inlineFirst) - var(--pr-t-spacings-50))
+	);
+}
+
+@mixin divider {
+	--components-listing-item-before-content: '';
+	--components-listing-inlineFirst: calc(var(--pr-t-spacings-100) + var(--pr-t-spacings-25) - var(--commons-divider-width));
+}

package/src/components/listing/vars.scss

@@ -1,7 +1,21 @@
 @mixin vars {
-	--components-listing-item-display: list-item;
-	--components-listing-paddingInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
+	--components-listing-marginInlineStart: 0;
+	--components-listing-inlineFirst: 0;
+	--components-listing-flexDirection: column;
+	--components-listing-flexWrap: nowrap;
+	--components-listing-paddingInlineStart: var(--components-listing-inlineStart);
+	--components-listing-inlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
+
+	--components-listing-clipPath: none;
 	--components-listing-listStyleType: disc;
+
+	--components-listing-item-display: list-item;
 	--components-listing-item-icon-backgroundColor: transparent;
 	--components-listing-item-icon-before-content: none;
+	--components-listing-item-before-content: unset;
+
+	--components-listing-item-content-display: block;
+	--components-listing-item-content-flexWrap: nowrap;
+	--components-listing-item-content-rowGap: 0;
+	--components-listing-item-content-columnGap: 0;
 }

package/src/components/multiSelect/component.scss

@@ -3,6 +3,7 @@
 @use '@lucca-front/scss/src/commons/utils/text';
 @use '@lucca-front/icons/src/icon/exports' as icon;
 @use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/color';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: flex;
@@ -32,6 +33,8 @@
 
 		.multipleSelect-displayer-chip {
 			min-inline-size: 0;
+
+			@include color.palette('product');
 		}
 
 		.multipleSelect-displayer-chip-value {

package/src/components/multiSelect/index.scss

@@ -59,21 +59,11 @@
 @layer components {
 	.multipleSelect-displayer-filter {
 		min-inline-size: 0;
-	}
-}
-
-@layer mods {
-	.multipleSelect-displayer {
-		&.mod-filter {
-			@include displayerFilter;
+		display: flex;
+		gap: 0.5ch;
 
-			&.is-filled {
-				@include displayerFilterFilled;
-			}
-
-			&:has([aria-expanded='true']):not(:has(:placeholder-shown)) {
-				@include displayerFilterExpanded;
-			}
+		&:empty {
+			display: none;
 		}
 	}
 }

package/src/components/multiSelect/mods.scss

@@ -1,7 +1,5 @@
 @use '@lucca-front/icons/src/icon/exports' as icon;
-
 @use '@lucca-front/scss/src/commons/utils/a11y';
-
 @use '@lucca-front/scss/src/components/clear/exports' as clear;
 @use '@lucca-front/scss/src/components/chip/exports' as chip;
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
@@ -36,32 +34,6 @@
 			@include chip.S;
 		}
 	}
-
-	.multipleSelect-displayer-numericBadge {
-		// :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
-		&.numericBadge,
-		&:not(.numericBadge) {
-			@include numericBadge.S;
-		}
-	}
-}
-
-@mixin displayerFilter {
-	display: grid;
-
-	.multipleSelect-displayer-filter {
-		grid-column-start: 1;
-		grid-row-start: 1;
-		display: flex;
-		gap: var(--pr-t-spacings-50);
-		min-inline-size: 0;
-	}
-
-	.multipleSelect-displayer-search {
-		grid-column-start: 1;
-		grid-row-start: 1;
-	}
 }
 
 @mixin filterPill {

package/src/components/multiSelect/states.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/components/chip/exports' as chip;
 
 @mixin focused {
 	@include a11y.focusVisible($offset: 3px);
@@ -16,6 +17,10 @@
 	--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);
 
 	pointer-events: none;
+
+	.multipleSelect-displayer-chip {
+		@include chip.disabled;
+	}
 }
 
 @mixin expanded {
@@ -35,22 +40,6 @@
 	}
 }
 
-@mixin displayerFilterFilled {
-	.multipleSelect-displayer-search {
-		opacity: 0;
-	}
-}
-
-@mixin displayerFilterExpanded {
-	.multipleSelect-displayer-filter {
-		display: none;
-	}
-
-	.multipleSelect-displayer-search {
-		opacity: 1;
-	}
-}
-
 @mixin selected {
 	.multipleSelect-displayer-search {
 		&[readonly],

package/src/components/plgPush/component.scss

@@ -59,5 +59,9 @@
 			gap: var(--pr-t-spacings-25);
 			padding: var(--pr-t-spacings-0);
 		}
+
+		.plgPush-close {
+			margin-inline-start: auto;
+		}
 	}
 }

package/src/components/popover/component.scss

@@ -10,6 +10,7 @@
 	position: relative;
 	min-block-size: var(--pr-t-spacings-500);
 	min-inline-size: var(--pr-t-spacings-500);
+	max-inline-size:  var(--components-popover-maxInlineSize);
 	animation: popup var(--commons-animations-durations-fast) ease 1 forwards;
 
 	// need of a higher specificity

package/src/components/popover/vars.scss

@@ -1,3 +1,4 @@
 @mixin vars {
 	--components-popover-padding: var(--pr-t-spacings-100);
+	--components-popover-maxInlineSize: 25rem;
 }

package/src/components/richText/component.scss

@@ -102,8 +102,12 @@
 			border-block-start: 0;
 		}
 
-		.richTextField-toolbar-chips-item {
+		.richTextField-toolbar-chips-chip {
 			border: 0;
+
+			&:focus-visible {
+				@include a11y.focusVisible;
+			}
 		}
 
 		.richTextField-content {
@@ -119,11 +123,6 @@
 			&:focus-visible {
 				@include a11y.focusVisible;
 			}
-
-			&.is-disabled {
-				--components-chip-backgroundColor: var(--palettes-neutral-200);
-				--components-chip-color: var(--pr-t-color-input-text-disabled);
-			}
 		}
 
 		.richTextField-content-placeholder {

package/src/components/scrollBox/component.scss

@@ -16,6 +16,10 @@
 	margin-block: var(--components-scrollBox-marginBlock);
 	border-radius: var(--pr-t-border-radius-default);
 
+	> * {
+		flex-shrink: 0;
+	}
+
 	&:focus-visible {
 		@include a11y.focusVisible($offset: 0);
 	}

package/src/components/simpleSelect/component.scss

@@ -7,7 +7,7 @@
 	@at-root ($atRoot) {
 		.simpleSelect-field {
 			display: grid;
-			grid-template-columns: 1fr auto auto;
+			grid-template-columns: auto 1fr auto auto;
 			align-items: center;
 			box-shadow: 0 0 0 1px var(--components-simpleSelect-border-color);
 			background-color: var(--components-simpleSelect-background);
@@ -22,8 +22,15 @@
 			}
 		}
 
+		.simpleSelect-field-prefix {
+			&:not(:empty) {
+				display: flex;
+				margin-inline-end: var(--pr-t-spacings-50);
+			}
+		}
+
 		.simpleSelect-field-input {
-			grid-column-start: 1;
+			grid-column-start: 2;
 			grid-row-start: 1;
 			font: var(--components-simpleSelect-font);
 			padding: 0;
@@ -42,7 +49,7 @@
 		}
 
 		.simpleSelect-field-value {
-			grid-column-start: 1;
+			grid-column-start: 2;
 			grid-row-start: 1;
 			inline-size: 100%;
 			font: var(--components-simpleSelect-font);

package/src/components/sortableList/component.scss

@@ -1,5 +1,8 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
 @use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/reset';
+
+@use '@lucca-front/scss/src/components/button/exports' as button;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: var(--pr-t-elevation-surface-raised);
@@ -7,6 +10,7 @@
 	border-radius: var(--pr-t-border-radius-default);
 	list-style: none;
 	padding: 0;
+	overflow: hidden;
 
 	@at-root ($atRoot) {
 		.sortableList-item {
@@ -18,7 +22,9 @@
 			position: relative;
 			text-decoration: none;
 			gap: var(--pr-t-spacings-100);
-			padding: var(--components-sortableList-padding);
+
+			// required to overload the cdk padding reset
+			padding: var(--components-sortableList-padding) !important;
 
 			&:last-child {
 				border: 0;
@@ -51,14 +57,27 @@
 		}
 
 		.sortableList-item-handler {
+			&.button {
+				@include button.S;
+				@include button.onlyIcon;
+				@include button.ghost;
+
+				--components-button-padding: var(--pr-t-spacings-50);
+			}
+
 			color: var(--palettes-neutral-600);
 			font-size: var(--components-sortableList-handler-size);
 			cursor: move;
+			inline-size: auto;
+			border-radius: var(--pr-t-border-radius-small);
+			align-self: center;
 
-			&::before {
-				@include icon.generate('drag');
+			&:not(:has(.lucca-icon)) {
+				&::before {
+					@include icon.generate('drag');
 
-				vertical-align: top;
+					vertical-align: top;
+				}
 			}
 		}