@lucca-front/scss 20.3.3-rc.6 → 21.0.0-rc.1

package/src/components/fancyBox/index.scss

@@ -12,4 +12,8 @@
 			@include narrow;
 		}
 	}
+
+	&.mod-S {
+		@include S;
+	}
 }

package/src/components/fancyBox/mods.scss

@@ -4,3 +4,14 @@
 	--components-fancyBox-offsetInline: -8.75rem;
 	--components-fancyBox-offsetBlock: -0.5rem;
 }
+
+@mixin S {
+	--components-fancyBox-contentMinBlockSize: 9.75rem;
+	--components-fancyBox-offsetInline: -9rem;
+	--components-fancyBox-offsetBlock: -0.75rem;
+	--components-fancyBox-imageWidth: 9.375rem;
+	--components-fancyBox-imageHeight: 7.5rem;
+	--components-fancyBox-contentMinInlineSize: min(17rem, 100%);
+	--components-fancyBox-contentPaddingBlock: var(--pr-t-spacings-150);
+	--components-fancyBox-contentPaddingInline: var(--pr-t-spacings-200);
+}

package/src/components/fancyBox/vars.scss

@@ -1,4 +1,14 @@
 @mixin vars {
+	--components-fancyBox-paddingInline: var(--pr-t-spacings-200);
+  --components-fancyBox-marginInline: auto;
+
+	// Content
+	--components-fancyBox-contentMinBlockSize: 11.25rem;
+	--components-fancyBox-contentMinInlineSize: min(22rem, 100%);
+  --components-fancyBox-contentPaddingBlock: var(--pr-t-spacings-300);
+  --components-fancyBox-contentPaddingInline: var(--pr-t-spacings-700);
+
+	// Visuals
 	--components-fancyBox-background-left: none;
 	--components-fancyBox-background-right: none;
 	--components-fancyBox-foreground: none;

package/src/components/filterPill/component.scss

@@ -104,7 +104,6 @@
 			margin-inline-end: var(--pr-t-spacings-25);
 			position: relative;
 			z-index: 1;
-			display: var(--components-filterPill-clear-display);
 
 			@include clear.product;
 		}

package/src/components/filterPill/states.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/components/clear/exports' as clear;
 
 @mixin checkboxChecked {
 	--components-filterPill-borderColor: var(--palettes-product-300);
@@ -66,7 +67,6 @@
 	--components-filterPill-backgroundColor: var(--palettes-product-50);
 	--components-filterPill-color: var(--palettes-product-800);
 	--components-filterPill-toggle-iconColor: var(--palettes-product-700);
-	--components-filterPill-clear-display: grid;
 }
 
 @mixin notFilled {
@@ -91,7 +91,6 @@
 }
 
 @mixin disabled {
-	--components-filterPill-clear-display: none;
 	--components-filterPill-backgroundColor: var(--palettes-neutral-50);
 	--components-filterPill-borderColor: var(--palettes-neutral-300) !important;
 	--components-filterPill-color: var(--palettes-neutral-500);
@@ -102,6 +101,8 @@
 
 	box-shadow: var(--components-filterPill-shadow);
 
+	@include clear.hidden;
+
 	// TODO
 	// --components-filterPill-checkbox-borderColor: var(--palettes-neutral-600);
 }

package/src/components/filterPill/vars.scss

@@ -12,7 +12,6 @@
 	--components-filterPill-checkbox-borderColor: var(--palettes-neutral-700);
 	--components-filterPill-checkbox-icon-scale: 0;
 	--components-filterPill-checkbox-icon-timingFonction: cubic-bezier(0.5, -0.5, 0.5, 0);
-	--components-filterPill-clear-display: none;
 	--components-filterPill-toggle-rotation: 0;
 	--components-filterPill-toggle-iconColor: var(--palettes-neutral-600);
 	--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);

package/src/components/form/component.scss

@@ -1,9 +1,12 @@
 @use '@lucca-front/scss/src/commons/utils/form';
 @use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
 @use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
+@use '@lucca-front/scss/src/components/title/exports' as title;
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
+	display: block;
+
 	.divider {
 		margin-block: var(--pr-t-spacings-300);
 	}
@@ -34,12 +37,13 @@
 
 	@at-root ($atRoot) {
 		.form-header {
+			display: block;
 			margin-block-end: var(--pr-t-spacings-300);
 		}
 
 		.form-header-title {
-			margin: 0;
-			padding: 0;
+			@include title.component;
+			@include title.h1;
 		}
 
 		.form-header-mandatory {

package/src/components/indexTable/component.scss

@@ -1,7 +1,6 @@
 @use 'vars' as *;
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/commons/utils/reset';
-@use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
@@ -39,7 +38,7 @@
 		.indexTable-head-row,
 		.indexTable-body-row,
 		.indexTable-foot-row {
-			display: table-row;
+			display: var(--components-indexTable-row-display);
 		}
 
 		.indexTable-head-row-transparentCell,
@@ -180,9 +179,7 @@
 
 		.indexTable-body-row-cell-checkbox,
 		.indexTable-head-row-cell-checkbox {
-			margin-block: var(--pr-t-spacings-50);
-			margin-inline-start: var(--pr-t-spacings-50);
-			margin-inline-end: var(--pr-t-spacings-150);
+			margin: var(--pr-t-spacings-50);
 		}
 
 		// .indexTable-body-row-cell-action is deprecated
@@ -217,31 +214,10 @@
 			display: flex;
 			align-items: center;
 			gap: var(--pr-t-spacings-100);
+			padding: var(--pr-t-spacings-25);
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
 
-		.indexTable-body-row-cellTitle-button {
-			// :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.ghost;
-				@include button.S;
-				@include button.onlyIconS;
-
-				position: static;
-
-				.lucca-icon {
-					transition: transform var(--commons-animations-durations-fast) ease;
-				}
-
-				// Extend button reactive zone to his whole parent
-				&::before {
-					content: '';
-					position: absolute;
-					inset: 0;
-				}
-			}
-		}
 
 		.indexTable-body-row-cellTitle-title {
 			font-weight: var(--pr-t-font-fontWeight-semibold);
@@ -276,6 +252,12 @@
 		}
 	}
 
+	.indexTableWrapper-pagination {
+		&:empty {
+			display: none;
+		}
+	}
+
 	.statusBadge,
 	.tag,
 	.avatar {
@@ -293,6 +275,7 @@
 
 	.tableSortable.button:hover {
 		--components-button-backgroundColor: var(--palettes-neutral-100);
+
 		color: var(--palettes-neutral-700);
 	}
 }

package/src/components/indexTable/index.scss

@@ -14,6 +14,7 @@
 			@include selectableHoveredRow;
 		}
 
+		&:has(.mod-stack2, .mod-stack3),
 		&.mod-stackable {
 			@include stackable;
 		}
@@ -31,21 +32,37 @@
 			@include massSelection;
 		}
 
-		.indexTable-body-row-cell.mod-actions {
-			@include actions;
+		.indexTable-head-row-cell,
+		.indexTable-body-row-cell {
+			&.mod-actions {
+				@include actions;
+			}
+		}
+
+		.indexTable-body-row-cell,
+		.indexTable-foot-row-cell {
+			&.mod-tfoot {
+				@include tfoot;
+			}
 		}
 
 		.indexTable-head-row-cell,
 		.indexTable-body-row-cell,
 		.indexTable-body-row-transparentCell,
 		.indexTable-foot-row-cell {
+			&.mod-alignEnd,
 			&.mod-alignRight {
-				@include alignRight;
+				@include alignEnd;
 			}
 
 			&.mod-alignCenter {
 				@include alignCenter;
 			}
+
+			&.mod-alignStart,
+			&.mod-alignLeft {
+				@include alignStart;
+			}
 		}
 
 		@include media.max('S') {
@@ -72,5 +89,19 @@
 		}
 
 		@include openClosedRow;
+
+		.indexTable-body-row {
+			&:first-child {
+				&:has(.indexTable-body-row-cellTitle-button.button[aria-expanded='false']) {
+					~ .indexTable-body-row {
+						@include rowsHidden;
+					}
+				}
+			}
+		}
+
+		.indexTable-body-row-cellTitle-button.button {
+			@include groupButton;
+		}
 	}
 }

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/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;
 		}
 	}
 }