@lucca-front/scss 18.3.0 → 18.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "18.3.0",
+  "version": "18.3.2",
   "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": "18.3.0"
+    "@lucca-front/icons": "18.3.2"
   }
 }

package/src/commons/core.scss

@@ -115,7 +115,7 @@ $overflow: 'hidden', 'auto', 'visible', 'scroll';
 	@each $corner in $corners {
 		@each $key, $value in config.$borderRadius {
 			.u-border#{transform.capitalize(transform.camelize($corner))}Radius#{transform.capitalize($key)} {
-				border-#{$corner}radius: $value #{$suffix};
+				border-#{$corner}radius: var(--commons-borderRadius-#{$key}) #{$suffix};
 			}
 		}
 	}

package/src/components/calloutDisclosure/component.scss

@@ -37,6 +37,10 @@
 					box-shadow: none;
 				}
 			}
+
+			&::-webkit-details-marker {
+				display: none;
+			}
 		}
 
 		.calloutDisclosure-summary-icon {
@@ -48,6 +52,7 @@
 		}
 
 		.calloutDisclosure-summary-chevron {
+			align-self: start;
 			color: var(--palettes-neutral-700);
 			margin-left: auto;
 			transition: transform var(--commons-animations-durations-standard) ease;

package/src/components/checkboxField/index.scss

@@ -21,25 +21,49 @@
 
 	&:hover {
 		@include hover;
+
+		&[aria-checked='mixed'] {
+			@include checkedHover;
+		}
 	}
 
 	&:active {
 		@include active;
+
+		&[aria-checked='mixed'] {
+			@include checkedActive;
+		}
 	}
 
 	&:disabled {
 		@include disabled;
+
+		&[aria-checked='mixed'] {
+			@include checkedDisabled;
+		}
 	}
 
 	&[aria-invalid='true'] {
 		@include invalid;
 
+		&[aria-checked='mixed'] {
+			@include checkedInvalid;
+		}
+
 		&:hover {
 			@include invalidHover;
+
+			&[aria-checked='mixed'] {
+				@include checkedInvalidHover;
+			}
 		}
 
 		&:active {
 			@include invalidActive;
+
+			&[aria-checked='mixed'] {
+				@include checkedInvalidActive;
+			}
 		}
 	}
 

package/src/components/comment/component.scss

@@ -79,7 +79,7 @@
 		}
 
 		// .comment-content-textContainer is deprecated
-		.comment-content-textContainerOptionnal,
+		.comment-content-textContainerOptional,
 		.comment-content-textContainer {
 			display: flex;
 			flex-direction: column;

package/src/components/dialog/component.scss

@@ -90,6 +90,8 @@
 		}
 
 		.dialog-inside-footer {
+			grid-area: footer;
+
 			&.footer {
 				background-color: transparent;
 				position: relative;
@@ -106,6 +108,7 @@
 			gap: var(--pr-t-spacings-200);
 			position: relative;
 			z-index: 1;
+			grid-area: header;
 		}
 
 		.dialog-inside-content {

package/src/components/form/index.scss

@@ -20,6 +20,23 @@
 	&.mod-S {
 		@include S;
 	}
+
+	&:has(~ .box) {
+		.form-field {
+			&.mod-withArrow {
+				@include withArrow;
+
+				&.mod-S {
+					@include withArrowS;
+				}
+			}
+		}
+	}
+
+	&:has(.radioField-input[aria-invalid='true']),
+	&:has(.checkboxField-input[aria-invalid='true']) {
+		@include legendInvalid;
+	}
 }
 
 .form-field {
@@ -31,14 +48,6 @@
 		@include XS;
 	}
 
-	&.mod-withArrow {
-		@include withArrow;
-
-		&.mod-S {
-			@include withArrowS;
-		}
-	}
-
 	&.mod-checkable,
 	&:has(.radioField),
 	&:has(.checkboxField),
@@ -46,12 +55,16 @@
 		@include checkable;
 	}
 
-	&:has(.textField-input-value[aria-invalid='true'], .timePicker-fieldset-group-textfield-input[aria-invalid='true']) {
+	&:has(.textField-input-value[aria-invalid='true']),
+	&:has(.timePicker-fieldset-group-textfield-input[aria-invalid='true']),
+	&:has(.simpleSelect-input[aria-invalid='true']),
+	&:has(.multipleSelect-displayer-search[aria-invalid='true']) {
 		@include invalid;
 	}
 
 	&:has(.radioField-input:disabled),
-	&:has(.checkboxField-input:disabled) {
+	&:has(.checkboxField-input:disabled),
+	&:has(.switchField-input:disabled) {
 		.formLabel {
 			@include formLabel.disabled;
 		}
@@ -60,6 +73,14 @@
 			@include inlineMessage.disabled;
 		}
 	}
+
+	&.mod-withArrow {
+		@include withArrow;
+
+		&.mod-S {
+			@include withArrowS;
+		}
+	}
 }
 
 // deprecated

package/src/components/form/mods.scss

@@ -101,7 +101,7 @@
 
 @mixin withArrow {
 	padding-bottom: var(--pr-t-spacings-200);
-	margin-block: 0;
+	margin-block-end: 0;
 
 	.form-field-arrow {
 		@include box.arrow;

package/src/components/form/states.scss

@@ -13,6 +13,12 @@
 	}
 }
 
+@mixin legendInvalid {
+	legend.formLabel {
+		@include formLabel.error;
+	}
+}
+
 // deprecated
 
 @mixin required {

package/src/components/indexTable/index.scss

@@ -34,6 +34,7 @@
 
 	.indexTable-head-row-cell,
 	.indexTable-body-row-cell,
+	.indexTable-body-row-transparentCell,
 	.indexTable-foot-row-cell {
 		&.mod-alignRight {
 			@include alignRight;

package/src/components/loading/mods.scss

@@ -42,5 +42,6 @@
 	@include L;
 
 	// legacy, approximate centering
+	--components-loading-margin: 0 auto;
 	--components-loading-transform: translateY(35vh);
 }

package/src/components/tableFixedDeprecated/index.scss

@@ -2,18 +2,24 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 @use 'exports' as *;
 
+.table {
+	&.mod-layoutFixed {
+		@include layoutFixed;
+	}
+}
+
 .table-head-row-cell,
 .table-body-row-cell,
 .table-foot-row-cell {
 	@for $i from 2 through 20 {
 		&.mod-layoutFixed-#{$i} {
-			@include layoutFixed($i);
+			@include layoutFixedCell($i);
 		}
 
 		@each $breakpoint, $value in config.$breakpoints {
 			@include media.min($breakpoint) {
 				&.mod-layoutFixed-#{$i}\@mediaMin#{$breakpoint} {
-					@include layoutFixed($i);
+					@include layoutFixedCell($i);
 				}
 			}
 		}

package/src/components/tableFixedDeprecated/mods.scss

@@ -1,4 +1,8 @@
-@mixin layoutFixed($i) {
+@mixin layoutFixed {
+	table-layout: fixed;
+}
+
+@mixin layoutFixedCell($i) {
 	min-width: $i * 1rem;
 	max-width: $i * 1rem;
 	width: $i * 1rem;

package/src/components/textField/component.scss

@@ -87,6 +87,10 @@
 				&:not([rows]) {
 					height: calc(3lh + var(--component-textField-padding) * 2);
 				}
+
+				&[rows='1'] {
+					min-height: calc(1lh + var(--component-textField-padding) * 2);
+				}
 			}
 		}
 

package/src/components/userTile/component.scss

@@ -10,10 +10,17 @@
 		display: flex;
 		align-self: start;
 		align-items: center;
-		height: calc(var(--components-userTile-title-lineHeight) + var(--components-userTile-info-lineHeight));
 		min-height: var(--components-avatar-size);
 	}
 
+	// .user-tile-label is deprecated
+	&:has(.userTile-content-info, .user-tile-label) {
+		// Apply height to avatar (calculed on title & info height) to avoid img overflow
+		.avatar {
+			height: calc(var(--components-userTile-title-lineHeight) + var(--components-userTile-info-lineHeight));
+		}
+	}
+
 	@at-root ($atRoot) {
 		// .user-info is deprecated
 		.userTile-content,