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

package/src/components/dialog/component.scss

@@ -43,7 +43,7 @@
 					flex-grow: 1;
 					min-block-size: 0;
 
-					&:has(.dialog-content:focus-visible) {
+					&:has(.dialog-inside-content:focus-visible) {
 						&::after {
 							@include a11y.focusVisible($offset: -4px);
 
@@ -64,7 +64,7 @@
 				flex-grow: 1;
 				min-block-size: 0;
 
-				&:has(.dialog-content:focus-visible) {
+				&:has(.dialog-inside-content:focus-visible) {
 					&::after {
 						@include a11y.focusVisible($offset: -4px);
 

package/src/components/dialog/index.scss

@@ -33,6 +33,10 @@
 			@include XL;
 		}
 
+		&.mod-XXL {
+			@include XXL;
+		}
+
 		&.mod-neutralBackground {
 			@include neutralBackground;
 		}

package/src/components/dialog/mods.scss

@@ -22,6 +22,10 @@
 	--components-dialog-size: 60rem;
 }
 
+@mixin XXL {
+	--components-dialog-size: 100rem;
+}
+
 @mixin drawer {
 	--components-dialog-animationOpening: slideFromRight;
 	--components-dialog-maxHeight: none;

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,6 +65,16 @@
 			}
 		}
 
+		.form-field-contentOptional {
+			display: flex;
+			gap: var(--pr-t-spacings-100);
+			align-items: center;
+
+			> :first-child {
+				flex-grow: 1;
+			}
+		}
+
 		// deprecated
 
 		.form-group-label,

package/src/components/gauge/component.scss

@@ -1,24 +1,81 @@
 @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(-1/4 * 1turn);
+			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 {
+	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,29 @@
 			@include thin;
 		}
 
+		&:has(.gauge-circleBackground) {
+			@include circular;
+		}
+
+		// .mod-vertical is deprecated
 		&.mod-vertical {
 			@include vertical;
+
+			&.mod-thin {
+				@include verticalThin;
+			}
+		}
+	}
+
+	@layer states {
+		&.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/index.scss

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

package/src/components/inputFramed/component.scss

@@ -56,6 +56,7 @@
 			justify-content: space-between;
 			align-content: flex-start;
 			gap: var(--pr-t-spacings-100);
+			align-items: var(--components-inputFramed-header-alignItems);
 		}
 
 		.inputFramed-header-illustration {

package/src/components/inputFramed/index.scss

@@ -39,6 +39,10 @@
 			}
 		}
 	}
+
+	&.mod-center {
+		@include center;
+	}
 }
 
 .inputFramedWrapper {

package/src/components/inputFramed/mods.scss

@@ -0,0 +1,3 @@
+@mixin center {
+	--components-inputFramed-header-alignItems: center;
+}

package/src/components/inputFramed/vars.scss

@@ -5,4 +5,5 @@
 	--components-inputFramed-padding: var(--pr-t-spacings-150);
 	--components-inputFramed-header-backgroundColor: transparent;
 	--components-inputFramed-header-info-color: inherit;
+	--components-inputFramed-header-alignItems: normal;
 }

package/src/components/numericBadge/states.scss

@@ -25,3 +25,8 @@
 @mixin focusVisible {
 	@include a11y.focusVisible;
 }
+
+@mixin state {
+	--components-numericBadge-background: transparent;
+	--components-numericBadge-color: transparent;
+}

package/src/components/readMore/component.scss

@@ -44,7 +44,8 @@
 			content: var(--components-readMore-content-lastChild-content) / '';
 			visibility: hidden;
 			white-space: nowrap;
-			font-weight: 600;
+			font: var(--pr-t-font-body-M);
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 			padding-inline-start: var(--components-readMore-link-paddingInlineStart);
 		}
 
@@ -56,17 +57,32 @@
 			padding: var(--pr-t-spacings-50);
 			margin: calc(var(--pr-t-spacings-50) * -1);
 
-			&:not(:has(> p)) {
+			$notPlainText: '> p, > ul, > ol, > h1, > h2, > h3, > h4, > h5, > h6';
+			$wrappingElements: 'ol, ul';
+
+			&:not(:has(#{$notPlainText})) {
 				&::after {
 					@extend %after;
 				}
 			}
 
-			&:has(> p) {
+			&:has(#{$notPlainText}) {
 				> * {
 					&:last-child {
-						&::after {
-							@extend %after;
+						&:not(#{$wrappingElements}) {
+							&::after {
+								@extend %after;
+							}
+						}
+
+						&:is(#{$wrappingElements}) {
+							> * {
+								&:last-child {
+									&::after {
+										@extend %after;
+									}
+								}
+							}
 						}
 					}
 				}

package/src/components/readMore/states.scss

@@ -6,6 +6,8 @@
 }
 
 @mixin disabled {
+	--components-readMore-content-lastChild-content: none !important;
+
 	.readMore-link.link {
 		@include a11y.mask;
 	}

package/src/components/richText/component.scss

@@ -131,9 +131,7 @@
 		}
 
 		.richTextField-toolbar-chips-item {
-			@include reset.button;
-
-			width: auto;
+			border: 0;
 		}
 
 		.richTextField-content {

package/src/components/segmentedControl/component.scss

@@ -100,6 +100,7 @@
 		.segmentedControl_panel,
 		.viewTabs_panel {
 			display: var(--components-segmentedControl-display, block);
+			border-radius: var(--pr-t-border-radius-default);
 
 			&:focus-visible {
 				@include a11y.focusVisible;

package/src/components/skeleton/mods.scss

@@ -4,7 +4,7 @@
 }
 
 @mixin square {
-	border-radius: var(--pr-t-border-radius-structure);
+	border-radius: var(--pr-t-border-radius-small);
 	block-size: var(--components-skeleton-shape-height);
 	inline-size: var(--components-skeleton-shape-width);
 }

package/src/components/suggestion/component.scss

@@ -0,0 +1,19 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	display: flex;
+	flex-direction: column;
+	gap: var(--pr-t-spacings-50);
+
+	@at-root ($atRoot) {
+		.suggestion-form-field {
+			z-index: 1;
+			position: relative;
+		}
+
+		.suggestion-callout-text {
+			text-decoration: var(--components-suggestion-textDecoration);
+			color: var(--components-suggestion-color);
+		}
+	}
+}

package/src/components/suggestion/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/suggestion/index.scss

@@ -0,0 +1,16 @@
+@use 'exports' as *;
+
+.suggestion {
+	@include vars;
+	@include component;
+
+	&:has(.suggestion-callout-accept:hover),
+	&:has(.suggestion-callout-accept:focus-visible) {
+		@include accept;
+	}
+
+	&:has(.suggestion-callout-reject:hover),
+	&:has(.suggestion-callout-reject:focus-visible) {
+		@include reject;
+	}
+}

package/src/components/suggestion/states.scss

@@ -0,0 +1,12 @@
+@use '@lucca-front/scss/src/components/textField/exports' as textField;
+
+@mixin reject {
+	--components-suggestion-textDecoration: line-through;
+	--components-suggestion-color: var(--pr-t-color-text-subtle);
+}
+
+@mixin accept {
+	.textField {
+		@include textField.lineThrough;
+	}
+}

package/src/components/suggestion/vars.scss

@@ -0,0 +1,4 @@
+@mixin vars {
+	--components-suggestion-textDecoration: none;
+	--components-suggestion-color: inherit;
+}

package/src/components/tag/component.scss

@@ -8,7 +8,7 @@
 	padding-inline: var(--pr-t-spacings-50);
 	text-decoration: var(--components-tag-decoration);
 	box-shadow: 0 0 0 1px var(--components-tag-shadow);
-	gap: var(--pr-t-spacings-50);
+	gap: var(--components-tag-gap);
 	cursor: var(--components-tag-cursor);
 	display: inline-flex;
 	align-items: center;
@@ -19,6 +19,8 @@
 	font: var(--components-tag-font);
 	font-size: var(--components-tag-fontSize); // Deprecated
 	line-height: var(--components-tag-lineHeight); // Deprecated
+	max-inline-size: 100%;
+	position: relative;
 
 	&,
 	&:is(a, button) {
@@ -31,6 +33,7 @@
 
 	@at-root ($atRoot) {
 		.tag-content {
+			outline: none;
 			text-decoration: var(--components-tag-decoration);
 		}
 	}

package/src/components/tag/index.scss

@@ -7,6 +7,10 @@
 	}
 
 	@layer mods {
+		&.mod-S {
+			@include S;
+		}
+
 		&.mod-L {
 			@include L;
 		}
@@ -20,11 +24,19 @@
 		&.mod-outlined {
 			@include outlined;
 		}
+
+		&.mod-AI {
+			@include AI;
+		}
 	}
 
 	@layer states {
 		&.mod-disabled {
 			@include disabled;
 		}
+
+		&:has(.tag-content:focus-visible) {
+			@include focusVisible;
+		}
 	}
 }

package/src/components/tag/mods.scss

@@ -1,4 +1,5 @@
-@use '@lucca-front/icons/src/icon/exports' as icon;
+@use '@lucca-front/icons/src/icon/exports' as icons;
+@use '@lucca-front/scss/src/commons/utils/color';
 
 @mixin clickable {
 	--components-tag-cursor: pointer;
@@ -20,12 +21,24 @@
 	}
 }
 
+@mixin S {
+	--components-tag-font: var(--pr-t-font-body-XS);
+	--components-tag-gap: var(--pr-t-spacings-25);
+
+	.lucca-icon {
+		@include icons.XXS;
+	}
+
+	// Deprecated
+	--components-tag-fontSize: var(--pr-t-font-body-XS-fontSize);
+	--components-tag-lineHeight: var(--pr-t-font-body-XS-lineHeight);
+}
+
 @mixin L {
 	--components-tag-font: var(--pr-t-font-body-M);
-	--components-tag-iconBottom: 0;
 
 	.lucca-icon {
-		@include icon.S;
+		@include icons.S;
 	}
 
 	// Deprecated
@@ -42,3 +55,17 @@
 	--components-tag-background: var(--palettes-100, var(--palettes-product-100));
 	--components-tag-color: var(--palettes-800, var(--palettes-product-800));
 }
+
+@mixin AI {
+	@include outlined;
+
+	&:not(:disabled) {
+		--components-tag-boxShadow: none;
+
+		@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500), var(--pr-t-border-radius-small));
+
+		.lucca-icon {
+			@include icons.AI;
+		}
+	}
+}

package/src/components/tag/states.scss

@@ -1,4 +1,10 @@
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
 @mixin disabled {
 	--components-tag-background: var(--commons-disabled-background);
 	--components-tag-color: var(--commons-disabled-color);
 }
+
+@mixin focusVisible {
+	@include a11y.focusVisible;
+}

package/src/components/tag/vars.scss

@@ -3,8 +3,10 @@
 	--components-tag-color: var(--palettes-800, var(--palettes-neutral-800));
 	--components-tag-shadow: transparent;
 	--components-tag-font: var(--pr-t-font-body-S);
+	--components-tag-gap: var(--pr-t-spacings-50);
 	--components-tag-decoration: none;
 	--components-tag-cursor: inherit;
+	--components-tag-boxShadow: 0 0 0 1px var(--components-tag-shadow);
 
 	// Deprecated
 	--components-tag-fontSize: var(--pr-t-font-body-S-fontSize);

package/src/components/textField/component.scss

@@ -67,6 +67,7 @@
 			padding-inline: var(--component-textField-padding) var(--component-textField-affix-padding);
 			background-color: transparent;
 			color: var(--component-textField-color);
+			text-decoration: var(--component-textField-textDecoration);
 			text-overflow: ellipsis;
 
 			&:is(textarea, div) {

package/src/components/textField/index.scss

@@ -41,4 +41,8 @@
 			@include filterPill;
 		}
 	}
+
+	&.is-lineThrough {
+		@include lineThrough;
+	}
 }

package/src/components/textField/states.scss

@@ -12,3 +12,8 @@
 	--component-textField-background: var(--pr-t-color-input-background-disabled);
 	--component-textField-color: var(--pr-t-color-input-text-disabled);
 }
+
+@mixin lineThrough {
+	--component-textField-color: var(--pr-t-color-text-subtle);
+	--component-textField-textDecoration: line-through;
+}

package/src/components/textField/vars.scss

@@ -5,6 +5,7 @@
 	--component-textField-border: var(--pr-t-color-input-border);
 	--component-textField-borderHover: var(--pr-t-color-input-border-hover);
 	--component-textField-color: var(--pr-t-color-input-text);
+	--component-textField-textDecoration: none;
 	--component-textField-padding: var(--pr-t-spacings-100);
 	--component-textField-affix-padding: var(--component-textField-padding);
 	--component-textField-affix-size: 1.75rem;

package/src/components/textFlow/component.scss

@@ -36,5 +36,11 @@
 
 	& > :last-child {
 		margin-block-end: 0;
+
+		&:is(ul, ol) {
+			> :last-child {
+				margin-block-end: 0;
+			}
+		}
 	}
 }