@lucca-front/scss 20.3.0-rc.11 → 20.3.0-rc.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "20.3.0-rc.11",
+  "version": "20.3.0-rc.13",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -23,6 +23,6 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "20.3.0-rc.11"
+    "@lucca-front/icons": "20.3.0-rc.13"
   }
 }

package/src/components/appLayout/component.scss

@@ -7,6 +7,7 @@
 	inline-size: var(--components-appLayout-inlineSize);
 	grid-template: var(--components-appLayout-gridTemplate);
 	display: grid;
+	isolation: isolate;
 
 	@at-root ($atRoot) {
 		.appLayout-banner {

package/src/components/callout/mods.scss

@@ -3,6 +3,7 @@
 @use '@lucca-front/scss/src/components/button/exports' as button;
 
 @mixin S {
+	--components-callout-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);
 	--components-callout-gap: var(--pr-t-spacings-100);
 	--components-callout-font: var(--pr-t-font-body-S);
 	--components-callout-kill-size: 1.25rem;

package/src/components/calloutDisclosure/component.scss

@@ -18,9 +18,8 @@
 	@at-root ($atRoot) {
 		.calloutDisclosure-summary {
 			display: flex;
-			gap: var(--pr-t-spacings-150);
-			padding-block: var(--pr-t-spacings-100);
-			padding-inline: var(--components-calloutDisclosure-paddingHorizontal);
+			gap: var(--components-calloutDisclosure-gap);
+			padding: var(--components-calloutDisclosure-padding);
 			border-radius: var(--pr-t-border-radius-default);
 			transition: background-color var(--commons-animations-durations-fast) ease;
 			cursor: pointer;

package/src/components/calloutDisclosure/mods.scss

@@ -2,8 +2,13 @@
 @use '@lucca-front/scss/src/components/calloutFeedbackList/exports' as calloutFeedbackList;
 
 @mixin S {
+	--components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-100);
+  --components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-75);
+	--components-calloutDisclosure-gap: var(--pr-t-spacings-100);
+
 	.calloutDisclosure-summary-title {
 		font: var(--pr-t-font-body-S);
+		font-weight: var(--pr-t-font-fontWeight-semibold);
 	}
 
 	.calloutDisclosure-summary-icon {

package/src/components/calloutDisclosure/vars.scss

@@ -1,3 +1,6 @@
 @mixin vars {
+	--components-calloutDisclosure-padding: var(--components-calloutDisclosure-paddingVertical) var(--components-calloutDisclosure-paddingHorizontal);
   --components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-150);
+  --components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-100);
+	--components-calloutDisclosure-gap: var(--pr-t-spacings-150);
 }

package/src/components/container/component.scss

@@ -6,4 +6,5 @@
 	max-inline-size: var(--commons-container-maxWidth);
 	margin-inline: var(--commons-container-marginInline);
 	position: relative;
+	display: block;
 }

package/src/components/dataTable/component.scss

@@ -22,6 +22,7 @@
 			overflow: var(--components-dataTable-overflow);
 			background-color: var(--components-dataTable-cell-background);
 			contain: paint; // Fix overflow on webkit when table has scroll
+			display: block;
 
 			&:focus-visible {
 				@include a11y.focusVisible;
@@ -67,6 +68,7 @@
 			text-align: var(--components-dataTable-cell-textAlign);
 			transition-property: background-color;
 			transition-duration: var(--commons-animations-durations-fast);
+			font-weight: var(--pr-t-font-fontWeight-regular);
 
 			&:first-child {
 				inline-size: var(--components-dataTable-cellFirst-width);
@@ -90,6 +92,12 @@
 
 		.dataTable-body-row-cell {
 			vertical-align: var(--components-dataTable-cell-verticalAlign);
+
+			&:first-child {
+				&:has(.checkboxField-input) {
+					padding-bottom: var(--pr-t-spacings-150);
+				}
+			}
 		}
 
 		.dataTable-foot-row-cell {
@@ -104,6 +112,7 @@
 
 		.dataTable-body-row-cell-expand-button.button {
 			vertical-align: top;
+			margin-left: calc(var(--pr-t-spacings-25) * -1);
 
 			.lucca-icon {
 				transform: rotate(var(--components-dataTable-expand-rotation));

package/src/components/dataTable/index.scss

@@ -22,8 +22,17 @@
 			@include cellBorder;
 		}
 
-		&.mod-alignTop {
-			@include alignTop;
+		&.mod-alignTop,
+		&.mod-verticalAlignTop {
+			@include verticalAlignTop;
+		}
+
+		&.mod-verticalAlignBottom {
+			@include verticalAlignBottom;
+		}
+
+		&.mod-verticalAlignMiddle {
+			@includeverticalAlignMiddle;
 		}
 
 		&.mod-layoutFixed {
@@ -40,7 +49,7 @@
 		}
 
 		&.mod-hover {
-			:is(.dataTable-head-row.mod-selectable, .dataTable-body-row) {
+			:is(.mod-selectable, .dataTable-body-row:not(.mod-group)) {
 				&:hover {
 					@include hover;
 				}
@@ -63,6 +72,7 @@
 			@include group;
 		}
 
+		&:has([selectable]),
 		&.mod-selectable {
 			@include selectable;
 
@@ -85,8 +95,13 @@
 			@include alignCenter;
 		}
 
-		&.mod-alignRight {
-			@include alignRight;
+		&.mod-alignRight,
+		&.mod-alignEnd {
+			@include alignEnd;
+		}
+
+		&.mod-alignStart {
+			@include alignStart;
 		}
 
 		&.mod-editable {

package/src/components/dataTable/mods.scss

@@ -14,10 +14,18 @@
 	}
 }
 
-@mixin alignTop {
+@mixin verticalAlignTop {
 	--components-dataTable-cell-verticalAlign: top;
 }
 
+@mixin verticalAlignBottom {
+	--components-dataTable-cell-verticalAlign: bottom;
+}
+
+@mixin verticalAlignMiddle {
+	--components-dataTable-cell-verticalAlign: middle;
+}
+
 @mixin buttonExpand {
 	--components-dataTable-tree-extraPadding: calc(1.5rem + var(--pr-t-spacings-100));
 
@@ -47,7 +55,16 @@
 }
 
 @mixin selectable {
-	--components-dataTable-cellFirst-width: 2.5rem;
+	--components-dataTable-cellFirst-width: 2.625rem;
+
+	.dataTable-head-row-cell,
+	.dataTable-body-row-cell,
+	.dataTable-foot-row-cell {
+		&:first-child {
+			inline-size: var(--components-dataTable-cellFirst-width);
+			max-inline-size: var(--components-dataTable-cellFirst-width);
+		}
+	}
 }
 
 @mixin draggable {
@@ -73,7 +90,7 @@
 
 @mixin editable {
 	--components-dataTable-cell-padding: var(--pr-t-spacings-100);
-	--components-dataTable-cell-paddingInlineStart: var(--components-dataTable-cell-padding);
+	--components-dataTable-cell-paddingInlineStart: var(--pr-t-spacings-50);
 }
 
 @mixin actions {
@@ -87,6 +104,8 @@
 		@include button.onlyIcon;
 		@include button.onlyIconS;
 		@include button.ghost;
+
+		transition-property: box-shadow, color;
 	}
 
 	&:is(.dataTable-head-row-cell) {
@@ -101,8 +120,12 @@
 	--components-dataTable-cell-textAlign: center;
 }
 
-@mixin alignRight {
-	--components-dataTable-cell-textAlign: right;
+@mixin alignEnd {
+	--components-dataTable-cell-textAlign: end;
+}
+
+@mixin alignStart {
+	--components-dataTable-cell-textAlign: start;
 }
 
 @mixin layoutFixed {

package/src/components/dataTableSticked/index.scss

@@ -8,7 +8,7 @@
 	}
 
 	@layer mods {
-		&:has(.dataTable.mod-stickyHeader) {
+		&:has(.dataTable.mod-stickyHeader, .dataTable-head.mod-sticky) {
 			@include stickyHeader;
 		}
 
@@ -44,4 +44,8 @@
 			}
 		}
 	}
+
+	&:has(.dataTable-head.is-firstBodyRowVisible) {
+		@include firstBodyRowVisible;
+	}
 }

package/src/components/dataTableSticked/mods.scss

@@ -6,7 +6,7 @@
 	.dataTable-head {
 		position: sticky;
 		inset-block-start: -1px;
-		z-index: 1;
+		z-index: 2;
 
 		&::after {
 			content: '';
@@ -16,6 +16,7 @@
 			background-image: linear-gradient(#{color.transparentize(var(--palettes-neutral-400), 0.24)}, transparent);
 			pointer-events: none;
 			box-shadow: 0 1px var(--commons-border-200) inset;
+			opacity: var(--components-dataTable-header-shadow-opacity);
 		}
 	}
 }
@@ -103,7 +104,7 @@
 	.dataTable-head-row-cell {
 		&.mod-stickyColumn {
 			&:first-child {
-				z-index: 1;
+				z-index: 2;
 			}
 		}
 	}
@@ -124,6 +125,7 @@
 
 			&:has(~ :is(.dataTable-body-row-cell, .dataTable-head-row-cell, .dataTable-foot-row-cell):not(.mod-stickyColumn)) {
 				transform: translateX(-1px);
+				z-index: 1;
 
 				&:not(:has(+ :is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell).mod-stickyColumn)) {
 					&::after {

package/src/components/dataTableSticked/states.scss

@@ -13,3 +13,8 @@
 @mixin lastRowVisible {
 	--components-dataTable-shadow-lastRowOpacity: 0;
 }
+
+@mixin firstBodyRowVisible {
+	--components-dataTable-header-shadow-opacity: 0;
+}
+

package/src/components/dataTableSticked/vars.scss

@@ -3,4 +3,5 @@
 	--components-dataTable-shadow-lastColumnOpacity: 1;
 	--components-dataTable-shadow-firstRowOpacity: 1;
 	--components-dataTable-shadow-lastRowOpacity: 1;
+	--components-dataTable-header-shadow-opacity: 1;
 }

package/src/components/gauge/component.scss

@@ -23,6 +23,8 @@
 
 	@at-root ($atRoot) {
 		.gauge-bar {
+			position: absolute;
+
 			@extend %gaugeBar;
 		}
 

package/src/components/indexTable/component.scss

@@ -268,6 +268,11 @@
 				padding-inline: 0;
 				margin-inline-end: var(--pr-t-spacings-100);
 			}
+
+			.pagination-scrolling .button:hover {
+				--components-button-backgroundColor: var(--palettes-neutral-100);
+				--components-button-color: var(--palettes-neutral-700);
+			}
 		}
 	}
 
@@ -285,4 +290,9 @@
 	.avatarWrapper {
 		display: inline-flex;
 	}
+
+	.tableSortable.button:hover {
+		--components-button-backgroundColor: var(--palettes-neutral-100);
+		color: var(--palettes-neutral-700);
+	}
 }

package/src/components/mainLayout/component.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/media';
 @use '@lucca-front/scss/src/commons/utils/namespace';
 @use '@lucca-front/scss/src/components/container/exports' as container;
 
@@ -7,6 +8,20 @@
 	flex-direction: var(--components-mainLayout-flexDirection);
 	block-size: 100%;
 
+	&:target {
+		position: relative;
+
+		&::after {
+			content: '';
+			position: absolute;
+			inset: 0;
+			z-index: 5;
+			pointer-events: none;
+
+			@include a11y.focusVisible($offset: -4px, $borderRadius: var(--pr-t-border-radius-default));
+		}
+	}
+
 	@at-root ($atRoot) {
 		.mainLayout-sidebar {
 			overflow-x: hidden;
@@ -56,6 +71,18 @@
 			inset-inline-start: 0;
 			position: var(--components-mainLayout-content-inside-block-position);
 
+			@include media.min(XS) {
+				--components-mainLayout-content-inside-block-firstLastOfType-marginBlock: var(--pr-t-spacings-300);
+			}
+
+			&:first-of-type {
+				margin-block-start: var(--components-mainLayout-content-inside-block-firstLastOfType-marginBlock);
+			}
+
+			&:last-of-type {
+				margin-block-end: var(--components-mainLayout-content-inside-block-firstLastOfType-marginBlock);
+			}
+
 			&.mod-overflow {
 				.container {
 					@include container.overflow;

package/src/components/mainLayout/vars.scss

@@ -6,4 +6,5 @@
 	--components-mainLayout-content-inside-block-position: static;
 	--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);
 }

package/src/components/richText/component.scss

@@ -72,6 +72,7 @@
 			animation-duration: var(--commons-animations-durations-fast);
 			animation-delay: var(--commons-animations-durations-fast);
 			opacity: 0;
+			flex-shrink: 0;
 			animation-fill-mode: forwards;
 
 			@include keyframe.fadeIn;

package/src/components/statusBadge/component.scss

@@ -6,12 +6,14 @@
 	border-radius: var(--pr-t-border-radius-full);
 	display: inline-flex;
 	font-size: var(--components-statusBadge-fontSize);
-	gap: var(--pr-t-spacings-50);
+	font-weight: var(--pr-t-font-fontWeight-regular);
+	font-family: var(--pr-t-font-family);
 	line-height: var(--components-statusBadge-lineHeight);
+	gap: var(--pr-t-spacings-50);
 	padding-block: calc(var(--pr-t-spacings-50) / 2);
 	padding-inline: var(--pr-t-spacings-75) var(--pr-t-spacings-100);
 	white-space: nowrap;
-	font-weight: var(--pr-t-font-fontWeight-regular);
+	max-inline-size: 100%;
 
 	&::before {
 		background-color: var(--palettes-700, var(--palettes-product-700));
@@ -27,5 +29,10 @@
 	}
 
 	@at-root ($atRoot) {
+		.statusBadge-content {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			outline: none;
+		}
 	}
 }

package/src/components/statusBadge/index.scss

@@ -11,4 +11,8 @@
 			@include L;
 		}
 	}
+
+	&:has(.statusBadge-content:focus-visible) {
+		@include focusVisible;
+	}
 }

package/src/components/statusBadge/states.scss

@@ -0,0 +1,5 @@
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin focusVisible {
+	@include a11y.focusVisible;
+}

package/src/components/tableSortable/index.scss

@@ -11,9 +11,17 @@
 .dataTable-head-row-cell,
 .indexTable-head-row-cell {
 	@layer mods {
+		&.mod-alignStart,
+		&.mod-alignLeft {
+			.tableSortable {
+				@include sortAlignStart;
+			}
+		}
+
+		&.mod-alignEnd,
 		&.mod-alignRight {
 			.tableSortable {
-				@include sortAlignRight;
+				@include sortAlignEnd;
 			}
 		}
 

package/src/components/tableSortable/mods.scss

@@ -1,8 +1,13 @@
-@mixin sortAlignRight {
+@mixin sortAlignEnd {
 	--components-sortable-direction: row-reverse;
 	--components-sortable-offset: var(--pr-t-spacings-50);
 }
 
+@mixin sortAlignStart {
+	--components-sortable-direction: row;
+	--components-sortable-offset: calc(var(--pr-t-spacings-50) * -1);
+}
+
 @mixin sortAlignCenter {
-	--components-sortable-offset: 0;
+	--components-sortable-offset: var(--pr-t-spacings-100);
 }

package/src/components/tag/component.scss

@@ -20,7 +20,7 @@
 	font-size: var(--components-tag-fontSize); // Deprecated
 	line-height: var(--components-tag-lineHeight); // Deprecated
 	max-inline-size: 100%;
-	position: relative;
+	position: var(--components-tag-position);
 
 	&,
 	&:is(a, button) {

package/src/components/tag/mods.scss

@@ -61,6 +61,7 @@
 
 	&:not(:disabled) {
 		--components-tag-boxShadow: none;
+		--components-tag-position: relative;
 
 		@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500), var(--pr-t-border-radius-small));
 

package/src/components/tag/vars.scss

@@ -7,6 +7,7 @@
 	--components-tag-decoration: none;
 	--components-tag-cursor: inherit;
 	--components-tag-boxShadow: 0 0 0 1px var(--components-tag-shadow);
+	--components-tag-position: static;
 
 	// Deprecated
 	--components-tag-fontSize: var(--pr-t-font-body-S-fontSize);