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

package/src/components/field/index.scss

@@ -8,9 +8,7 @@
 		.checkboxesfield {
 			@include framed;
 		}
-	}
 
-	@layer states {
 		.is-error {
 			@include fieldFramedState('error');
 			@include fieldFramedError('textfield');
@@ -45,9 +43,7 @@
 		&.mod-block {
 			@include block;
 		}
-	}
 
-	@layer states {
 		&:is(.is-required, .required) {
 			@include required;
 		}
@@ -63,9 +59,7 @@
 		&:is(.is-error, .error, .is-invalid, .invalid) {
 			@include error;
 		}
-	}
 
-	@layer mods {
 		&.mod-compact {
 			@include compact;
 
@@ -73,20 +67,14 @@
 				@include compactBlock;
 			}
 		}
-	}
 
-	@layer mods {
 		&.mod-framed {
 			@include framed;
 
 			&.mod-search {
 				@include framedSearch;
 			}
-		}
-	}
 
-	@layer states {
-		&.mod-framed {
 			&.is-error {
 				@include fieldFramedState('error');
 				@include fieldFramedError('textfield');
@@ -103,12 +91,10 @@
 				@include fieldFramedState('success');
 			}
 		}
-	}
 
-	.textfield-input,
-	.radiosfield-input,
-	.checkboxesfield-input {
-		@layer states {
+		.textfield-input,
+		.radiosfield-input,
+		.checkboxesfield-input {
 			&:is([disabled], [readonly]) {
 				@include inputDisabled;
 			}
@@ -124,23 +110,15 @@
 			&:is(.is-invalid, .invalid, .is-error, .error) {
 				@include inputState('error');
 			}
-		}
 
-		@layer mods {
-			&.mod-row {
-				@include inputRow;
+			&:is([required]),
+			&:is([aria-required='true']) {
+				@include required;
 			}
 		}
-	}
-}
 
-.textfield-input,
-.radiosfield-input,
-.checkboxesfield-input {
-	@layer states {
-		&:is([required]),
-		&:is([aria-required='true']) {
-			@include required;
+		&.mod-row {
+			@include inputRow;
 		}
 	}
 }

package/src/components/fieldset/component.scss

@@ -42,7 +42,7 @@
 
 		.fieldset-title-content-text-helper {
 			font: var(--pr-t-font-body-S);
-			font-weight: 400;
+			font-weight: var(--pr-t-font-fontWeight-regular);
 			color: var(--palettes-neutral-700);
 			display: block;
 		}

package/src/components/fieldset/index.scss

@@ -18,9 +18,7 @@
 		&.mod-expandable {
 			@include expandable;
 		}
-	}
 
-	@layer states {
 		&:has(.fieldset-title-content[aria-expanded='true']) {
 			@include expanded;
 		}

package/src/components/file/component.scss

@@ -21,7 +21,7 @@
 		font-size: var(--pr-t-font-body-M-fontSize);
 		line-height: var(--pr-t-font-body-M-lineHeight);
 		margin-block-end: 0;
-		font-weight: 600;
+		font-weight: var(--pr-t-font-fontWeight-semibold);
 		display: block;
 		position: relative;
 		color: var(--palettes-neutral-700);

package/src/components/file/index.scss

@@ -14,9 +14,7 @@
 		&.mod-icon {
 			@include icon;
 		}
-	}
 
-	@layer states {
 		&:is(.is-droppable, .droppable) {
 			@include legacyDroppable;
 		}
@@ -27,8 +25,8 @@
 	}
 }
 
-.file-input {
-	@layer states {
+@layer mods {
+	.file-input {
 		&:is(:disabled) {
 			@include disabled;
 		}

package/src/components/file/states.scss

@@ -26,7 +26,7 @@
 @mixin uploading {
 	~ .file-content {
 		.file-title {
-			font-weight: 400;
+			font-weight: var(--pr-t-font-fontWeight-regular);
 			color: var(--palettes-neutral-600);
 			font-size: var(--pr-t-font-body-S-fontSize);
 			line-height: var(--pr-t-font-body-S-lineHeight);

package/src/components/fileEntry/index.scss

@@ -18,9 +18,7 @@
 				@include mediaS;
 			}
 		}
-	}
 
-	@layer states {
 		&.is-error {
 			@include error;
 

package/src/components/fileUpload/component.scss

@@ -93,7 +93,7 @@
 
 		.fileUpload-instruction-filename {
 			display: block;
-			font-weight: 600;
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 			color: var(--components-fileUpload-instruction-filename-color);
 			margin-block-start: var(--components-fileUpload-instruction-filename-marginTop);
 			inset-block-end: var(--pr-t-spacings-100);

package/src/components/fileUpload/index.scss

@@ -22,9 +22,7 @@
 				@include loadingS;
 			}
 		}
-	}
 
-	@layer states {
 		&:hover {
 			@include hover;
 		}

package/src/components/filterPill/component.scss

@@ -179,7 +179,7 @@
 			}
 
 			&::before {
-				font-weight: 400;
+				font-weight: var(--pr-t-font-fontWeight-regular);
 				font-size: 1rem;
 				direction: ltr;
 

package/src/components/filterPill/index.scss

@@ -6,7 +6,7 @@
 		@include component;
 	}
 
-	@layer states {
+	@layer mods {
 		&:not(.is-filled) {
 			@include notFilled;
 		}
@@ -43,9 +43,7 @@
 				@include filledActive;
 			}
 		}
-	}
 
-	@layer mods {
 		&.mod-checkbox {
 			@include checkbox;
 
@@ -77,9 +75,7 @@
 		&.mod-button {
 			@include button;
 		}
-	}
 
-	@layer states {
 		&:has(.filterPill-combobox:disabled) {
 			@include disabled;
 		}

package/src/components/footer/component.scss

@@ -19,7 +19,6 @@
 		}
 
 		.footer-actions {
-			flex-shrink: 0;
 			margin-inline-start: var(--components-footer-actions-margin);
 			display: flex;
 			gap: var(--pr-t-spacings-150);

package/src/components/form/component.scss

@@ -65,13 +65,23 @@
 			}
 		}
 
+		.form-field-contentOptional {
+			display: flex;
+			gap: var(--pr-t-spacings-100);
+			align-items: center;
+
+			> :first-child {
+				flex-grow: 1;
+			}
+		}
+
 		// deprecated
 
 		.form-group-label,
 		.form-group-legend,
 		.form-group-title {
 			display: block;
-			font-weight: 600;
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 			font-size: var(--components-form-label-font-size);
 			margin: 0;
 			padding-block: 0 var(--components-form-label-margin-bottom);

package/src/components/form/index.scss

@@ -17,8 +17,8 @@
 	}
 }
 
-.form-fieldset {
-	@layer mods {
+@layer mods {
+	.form-fieldset {
 		&.mod-inline {
 			@include inline;
 		}
@@ -38,18 +38,14 @@
 				}
 			}
 		}
-	}
 
-	@layer states {
 		&:has(.radioField-input[aria-invalid='true']),
 		&:has(.checkboxField-input[aria-invalid='true']) {
 			@include legendInvalid;
 		}
 	}
-}
 
-.form-field {
-	@layer mods {
+	.form-field {
 		&.mod-S {
 			@include S;
 		}
@@ -70,9 +66,7 @@
 		&:has(.switchField) {
 			@include checkable;
 		}
-	}
 
-	@layer states {
 		&:not(lu-form-field) {
 			&:has(
 					.textField-input-value[aria-invalid='true'],
@@ -99,9 +93,7 @@
 				@include tag.disabled;
 			}
 		}
-	}
 
-	@layer mods {
 		&.mod-withArrow {
 			@include withArrow;
 
@@ -128,8 +120,8 @@
 	}
 }
 
-.form-group-line-col {
-	@layer mods {
+@layer mods {
+	.form-group-line-col {
 		&[class*='mod-overlay'] {
 			@include overlay;
 		}
@@ -146,38 +138,30 @@
 			}
 		}
 	}
-}
 
-.form-group-label,
-.radiosfield-label,
-.checkboxesfield-label,
-.textfield-label {
-	@layer states {
+	.form-group-label,
+	.radiosfield-label,
+	.checkboxesfield-label,
+	.textfield-label {
 		&:is(.is-required, .required) {
 			@include required;
 		}
 	}
-}
 
-.checkboxesfield.mod-framed,
-.radiosfield.mod-framed,
-.form.mod-framed .fieldsetWrapper {
-	@layer mods {
+	.checkboxesfield.mod-framed,
+	.radiosfield.mod-framed,
+	.form.mod-framed .fieldsetWrapper {
 		@include framed;
 	}
-}
 
-.checkboxesfield.mod-framed,
-.radiosfield.mod-framed {
-	@layer mods {
+	.checkboxesfield.mod-framed,
+	.radiosfield.mod-framed {
 		margin-block-start: 0;
 		padding-block: var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding);
 		padding-inline: var(--components-field-framed-side-padding);
 	}
-}
 
-.form-group-label {
-	@layer states {
+	.form-group-label {
 		&.is-required {
 			&:not(:empty) {
 				&::after {
@@ -186,12 +170,10 @@
 			}
 		}
 	}
-}
 
-.radiosfield-label,
-.checkboxesfield-label,
-.textfield-label {
-	@layer states {
+	.radiosfield-label,
+	.checkboxesfield-label,
+	.textfield-label {
 		&.is-required {
 			&:not(:empty) {
 				&::after {

package/src/components/form/mods.scss

@@ -362,7 +362,7 @@
 }
 
 %isRequired {
-	@layer states {
+	@layer mods {
 		color: var(--palettes-error-700);
 		display: inline-block;
 		margin-inline-start: 0.2em;

package/src/components/formLabel/component.scss

@@ -27,7 +27,7 @@
 			color: var(--palettes-error-700);
 			font-size: inherit;
 			line-height: inherit;
-			font-weight: 600;
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 			margin-inline-start: var(--pr-t-spacings-25);
 			inset-block-start: 0; // Reset sup HTML element
 		}

package/src/components/formLabel/index.scss

@@ -18,9 +18,7 @@
 		&.mod-counter {
 			@include counter;
 		}
-	}
 
-	@layer states {
 		&.is-error {
 			// To replace by :has as soon as it is implemented in Firefox to cover usage as legend for checkboxes and radio states.
 			@include error;

package/src/components/gauge/component.scss

@@ -1,24 +1,83 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	border-radius: var(--pr-t-border-radius-full);
-	block-size: var(--components-gauge-height);
-	overflow: hidden;
-	position: relative;
+	border-radius: var(--components-gauge-borderRadius);
+	block-size: var(--components-gauge-blockSize);
+	inline-size: var(--components-gauge-inlineSize);
 	background-color: var(--components-gauge-background);
+	display: block;
+	color: var(--components-gauge-color);
+
+	&::before {
+		content: '';
+		display: block;
+
+		@extend %gaugeBar;
+	}
+
+	&:has(.gauge-bar) {
+		&::before {
+			content: none;
+		}
+	}
 
 	@at-root ($atRoot) {
 		.gauge-bar {
-			color: var(--palettes-700, var(--palettes-product-700));
-			border-block-end-width: var(--components-gauge-height);
-			transition-duration: var(--commons-animations-durations-standard);
-			transition-property: border-color, width, height;
-			inset-block-start: 0;
-			inset-inline-start: 0;
-			position: absolute;
-			border-block-end-style: solid;
-			border-color: currentColor;
-			border-radius: var(--pr-t-border-radius-full);
+			@extend %gaugeBar;
+		}
+
+		.gauge-circleBackground {
+			fill: transparent;
+			stroke-width: var(--components-gauge-circle-strokeWidth);
+			stroke: var(--components-gauge-circle-background);
+		}
+
+		.gauge-circleBar {
+			fill: transparent;
+			stroke-width: var(--components-gauge-circle-strokeWidth);
+			stroke-linecap: round;
+			stroke-dashoffset: 0;
+			transform: rotate(-0.25turn);
+			transform-origin: 50% 50%;
+			stroke-dasharray: calc(var(--components-gauge-circleP) / 100 * var(--components-gauge-value)), 9999;
+			stroke: currentColor;
+			animation-name: var(--components-gauge-animationName);
+			animation-duration: var(--components-gauge-animationDuration);
+			animation-timing-function: var(--components-gauge-animationTimingFunction);
+
+			@media (prefers-reduced-motion: reduce) {
+				--components-gauge-animationDuration: var(--commons-animations-durations-fast);
+				--components-gauge-animationTimingFunction: ease;
+			}
+		}
+
+		@keyframes gauge-fill {
+			from {
+				stroke-dasharray: 0, 9999;
+				inline-size: 0;
+			}
+		}
+	}
+}
+
+%gaugeBar {
+	@layer components {
+		color: currentColor;
+		transition-duration: var(--commons-animations-durations-standard);
+		transition-property: background-color, inline-size, block-size;
+		block-size: var(--components-gauge-blockSize);
+		inline-size: var(--components-gauge-value);
+		background-color: currentColor;
+		border-radius: var(--pr-t-border-radius-full);
+		min-inline-size: var(--components-gauge-before-minInlineSize);
+		min-block-size: var(--components-gauge-before-minInlineSize);
+		animation-name: var(--components-gauge-animationName);
+		animation-duration: var(--components-gauge-animationDuration);
+		animation-timing-function: var(--components-gauge-animationTimingFunction);
+
+		@media (prefers-reduced-motion: reduce) {
+			--components-gauge-animationDuration: var(--commons-animations-durations-fast);
+			--components-gauge-animationTimingFunction: ease;
 		}
 	}
 }

package/src/components/gauge/index.scss

@@ -11,8 +11,27 @@
 			@include thin;
 		}
 
+		&:has(.gauge-circleBackground) {
+			@include circular;
+		}
+
+		// .mod-vertical is deprecated
 		&.mod-vertical {
 			@include vertical;
+
+			&.mod-thin {
+				@include verticalThin;
+			}
+		}
+
+		&.is-zero,
+		&:not([style]),
+		&[style*='--components-gauge-value: 0%'] {
+			@include zero;
+		}
+
+		&.is-animated {
+			@include animated;
 		}
 	}
 }

package/src/components/gauge/mods.scss

@@ -1,14 +1,28 @@
 @mixin thin {
-	--components-gauge-height: var(--pr-t-spacings-50);
+	--components-gauge-blockSize: var(--pr-t-spacings-50);
+	--components-gauge-circle-strokeWidth: var(--pr-t-spacings-50);
 }
 
+// @mixin vertical is deprecated
 @mixin vertical {
-	inline-size: var(--components-gauge-height);
-	block-size: 100%;
+	--components-gauge-blockSize: 100%;
+	--components-gauge-inlineSize: var(--components-gauge-height, var(--pr-t-spacings-100));
+	--components-gauge-before-minInlineSize: var(--components-gauge-inlineSize);
 
-	.gauge-bar {
-		border-inline-start-width: var(--components-gauge-height);
-		border-inline-start-style: solid;
-		border-block-end-width: 0;
+	.gauge-bar,
+	&::before {
+		inline-size: 100%;
+		block-size: var(--components-gauge-value);
 	}
 }
+
+// @mixin verticalThin is deprecated
+@mixin verticalThin {
+	--components-gauge-inlineSize: var(--pr-t-spacings-50);
+}
+
+@mixin circular {
+	--components-gauge-borderRadius: 0;
+	--components-gauge-blockSize: auto;
+	--components-gauge-background: transparent;
+}

package/src/components/gauge/states.scss

@@ -0,0 +1,8 @@
+@mixin zero {
+	--components-gauge-before-minInlineSize: 0;
+	--components-gauge-color: var(--components-gauge-background);
+}
+
+@mixin animated {
+	--components-gauge-animationName: gauge-fill;
+}

package/src/components/gauge/vars.scss

@@ -1,4 +1,19 @@
+// --components-gauge-height is deprecated
 @mixin vars {
-	--components-gauge-height: 0.5rem;
+	--components-gauge-blockSize: var(--components-gauge-height, var(--pr-t-spacings-100));
+	--components-gauge-inlineSize: auto;
 	--components-gauge-background: var(--palettes-neutral-100);
+	--components-gauge-before-minInlineSize: var(--components-gauge-blockSize);
+	--components-gauge-value: 0;
+	--components-gauge-borderRadius: var(--pr-t-border-radius-full);
+	--components-gauge-color:	var(--palettes-700, var(--palettes-product-700));
+	--components-gauge-animationName: name;
+	--components-gauge-animationDuration: var(--commons-animations-durations-slow);
+	--components-gauge-animationTimingFunction: cubic-bezier(.9,.9,.9,1.1);
+
+	--components-gauge-circle-background: var(--palettes-neutral-100);
+	--components-gauge-circle-strokeWidth: var(--pr-t-spacings-100);
+	--components-gauge-circleR: 76px;
+	--components-gauge-circleP: calc(2 * pi * var(--components-gauge-circleR));
+
 }

package/src/components/header/index.scss

@@ -19,9 +19,7 @@
 		&.mod-nav {
 			@include nav;
 		}
-	}
 
-	@layer states {
 		&:is(.is-loading, .loading) {
 			@include loading;
 		}

package/src/components/horizontalNavigation/component.scss

@@ -137,7 +137,7 @@
 				display: block;
 				block-size: 0;
 				overflow: hidden;
-				font-weight: 600;
+				font-weight: var(--pr-t-font-fontWeight-semibold);
 			}
 		}
 	}

package/src/components/horizontalNavigation/index.scss

@@ -45,7 +45,7 @@
 .horizontalNavigation-list-item-action,
 .menu-link,
 .menu-list-item-action {
-	@layer states {
+	@layer mods {
 		// .active is deprecated
 		&[aria-current='page'],
 		&.is-active,

package/src/components/index.scss

@@ -108,6 +108,7 @@
 @forward 'appLayout';
 @forward 'mainLayout';
 @forward 'listboxOption';
+@forward 'suggestion';
 
 @forward 'filterBarDeprecated';
 @forward 'tableFixedDeprecated';

package/src/components/indexTable/component.scss

@@ -49,7 +49,7 @@
 		.indexTable-foot-row-cell {
 			display: table-cell;
 			text-align: start;
-			font-weight: 400;
+			font-weight: var(--pr-t-font-fontWeight-regular);
 		}
 
 		.indexTable-head-row-transparentCell,
@@ -244,7 +244,7 @@
 		}
 
 		.indexTable-body-row-cellTitle-title {
-			font-weight: 600;
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
 
 		// A wrapper is needed for pagination

package/src/components/indexTable/index.scss

@@ -65,9 +65,7 @@
 				@include selectableStackableResponsiveCardList;
 			}
 		}
-	}
 
-	@layer states {
 		&:not(:has(.indexTable-head[inert='inert'])) {
 			@include focusedRow;
 			@include hoveredRow;