@lucca-front/scss 21.3.0-rc.5 → 22.0.0-rc.2

package/src/components/fileToolbar/mods.scss

@@ -1,17 +1,22 @@
 @use '@lucca-front/scss/src/components/button/exports' as button;
 
-@mixin disablePositioning {
-	--components-fileToolbar-display: contents;
-}
-
-@mixin disablePositioningS {
-	--components-fileToolbar-list-padding: 0;
-}
-
 @mixin button {
 	@include button.ghost;
 	@include button.S;
 
 	--components-button-borderRadius: 4px;
 	--components-button-padding: var(--pr-t-spacings-75);
+
+	&:has(.icon-trashDelete) {
+		@include button.critical;
+	}
+}
+
+@mixin disablePositioning {
+	--components-fileToolbar-display: contents;
+	--components-fileToolbar-list-padding: 0;
+}
+
+@mixin disablePositioningL {
+	--components-fileToolbar-list-padding: var(--pr-t-spacings-50);
 }

package/src/components/fileUpload/component.scss

@@ -5,7 +5,8 @@
 @use '@lucca-front/scss/src/components/button/exports' as button;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	position: relative;
+	position: var(--components-fileUpload-position);
+	inset: var(--components-fileUpload-inset);
 	border: 1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);
 	overflow: hidden;
 	border-radius: var(--components-fileUpload-borderRadius);
@@ -71,7 +72,7 @@
 
 		.fileUpload-instruction-action {
 			display: block;
-			margin-block-end: var(--fileUpload-instruction-action-marginBottom);
+			margin-bottom: var(--fileUpload-instruction-action-marginBottom);
 			line-height: var(--pr-t-font-body-M-lineHeight);
 
 			span {

package/src/components/fileUpload/index.scss

@@ -15,22 +15,14 @@
 			@include structure;
 		}
 
-		&.mod-S {
-			@include S;
-
-			&.is-loading {
-				@include loadingS;
-			}
+		&.mod-L {
+			@include L;
 		}
 
 		&:hover {
 			@include hover;
 		}
 
-		&.is-loading {
-			@include loading;
-		}
-
 		&.is-hidden {
 			@include hidden;
 		}

package/src/components/fileUpload/mods.scss

@@ -1,26 +1,31 @@
-@mixin S {
-	--components-fileUpload-button-display: none;
-	--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);
-	--components-fileUpload-textAlign: left;
-	--components-fileUpload-flexDirection: row;
-	--components-fileUpload-instruction-alignItems: stretch;
-	--components-fileUpload-instruction-display: block;
-	--components-fileUpload-instruction-maxWidth: none;
-	--components-fileUpload-instruction-action-fontWeight: 600;
-	--fileUpload-instruction-action-marginBottom: 0;
-	--components-fileUpload-instruction-action-color: var(--palettes-product-700);
-	--components-fileUpload-alignItems: flex-start;
-	--components-fileUpload-minHeight: none;
-	--components-fileUpload-instruction-filename-position: static;
-	--components-fileUpload-instruction-filename-marginTop: 0;
-	--components-fileUpload-justifyContent: flex-start;
-	--components-fileUpload-status-img-inset: 0;
-	--components-fileUpload-status-img-size: var(--pr-t-spacings-600);
+@mixin L {
+	--components-fileUpload-button-display: block;
+	--components-fileUpload-padding: var(--pr-t-spacings-300);
+	--components-fileUpload-textAlign: center;
+	--components-fileUpload-flexDirection: column;
+	--components-fileUpload-instruction-alignItems: center;
+	--components-fileUpload-instruction-display: flex;
+	--components-fileUpload-instruction-maxWidth: 30rem;
+	--components-fileUpload-instruction-action-fontWeight: 400;
+	--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);
+	--components-fileUpload-instruction-action-color: inherit;
+	--components-fileUpload-alignItems: center;
+	--components-fileUpload-minHeight: 21.5rem;
+	--components-fileUpload-instruction-filename-position: relative;
+	--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);
+	--components-fileUpload-justifyContent: center;
+	--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);
+	--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);
 }
 
 @mixin dropzone {
-	position: fixed;
-	inset: var(--pr-t-spacings-200);
+	--components-fileUpload-position: fixed;
+	--components-fileUpload-flexDirection: column;
+	--components-fileUpload-alignItems: center;
+	--components-fileUpload-justifyContent: center;
+	--components-fileUpload-instruction-display: flex;
+	--components-fileUpload-instruction-alignItems: center;
+	--components-fileUpload-inset: var(--pr-t-spacings-200);
 }
 
 @mixin structure {

package/src/components/fileUpload/states.scss

@@ -23,15 +23,6 @@
 	--components-fileUpload-borderColor: var(--palettes-critical-600);
 }
 
-@mixin loading {
-	--components-fileUpload-instruction-display: none;
-	--components-fileUpload-button-display: none;
-}
-
-@mixin loadingS {
-	--components-fileUpload-instruction-display: block;
-}
-
 @mixin hidden {
 	--components-fileUpload-display: none;
 }

package/src/components/fileUpload/vars.scss

@@ -1,27 +1,30 @@
 @mixin vars {
-	--components-fileUpload-button-display: block;
+	--components-fileUpload-inset: auto;
+	--components-fileUpload-position: relative;
 	--components-fileUpload-button-visibility: visible;
-	--components-fileUpload-padding: var(--pr-t-spacings-300);
-	--components-fileUpload-textAlign: center;
-	--components-fileUpload-flexDirection: column;
 	--components-fileUpload-borderRadius: var(--pr-t-border-radius-input);
-	--components-fileUpload-instruction-display: flex;
-	--components-fileUpload-instruction-alignItems: center;
-	--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);
 	--components-fileUpload-width: auto;
 	--components-fileUpload-display: flex;
-	--components-fileUpload-instruction-maxWidth: 30rem;
-	--components-fileUpload-instruction-action-fontWeight: 400;
-	--components-fileUpload-instruction-action-color: inherit;
 	--components-fileUpload-borderColor: var(--palettes-neutral-300);
 	--components-fileUpload-borderStyle: dashed;
 	--components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);
-	--components-fileUpload-alignItems: center;
 	--components-fileUpload-instruction-filename-color: inherit;
-	--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);
-	--components-fileUpload-minHeight: 21.5rem;
-	--components-fileUpload-instruction-filename-position: relative;
-	--components-fileUpload-justifyContent: center;
-	--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);
-	--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);
+
+	--components-fileUpload-button-display: none;
+	--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);
+	--components-fileUpload-textAlign: left;
+	--components-fileUpload-flexDirection: row;
+	--components-fileUpload-instruction-alignItems: stretch;
+	--components-fileUpload-instruction-display: block;
+	--components-fileUpload-instruction-maxWidth: none;
+	--components-fileUpload-instruction-action-fontWeight: 600;
+	--fileUpload-instruction-action-marginBottom: 0;
+	--components-fileUpload-instruction-action-color: var(--palettes-product-700);
+	--components-fileUpload-alignItems: flex-start;
+	--components-fileUpload-minHeight: none;
+	--components-fileUpload-instruction-filename-position: static;
+	--components-fileUpload-instruction-filename-marginTop: 0;
+	--components-fileUpload-justifyContent: flex-start;
+	--components-fileUpload-status-img-inset: 0;
+	--components-fileUpload-status-img-size: var(--pr-t-spacings-600);
 }

package/src/components/filterPill/component.scss

@@ -10,7 +10,7 @@
 @use '@lucca-front/scss/src/components/textField/exports' as textField;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	display: flex;
+	display: var(--components-filterPill-display);
 	gap: var(--components-filterPill-gap);
 	align-items: center;
 	background-color: var(--components-filterPill-backgroundColor);
@@ -24,15 +24,8 @@
 	white-space: nowrap;
 	transition-property: box-shadow;
 	transition-duration: var(--commons-animations-durations-fast);
-	border: 0;
 
 	@at-root ($atRoot) {
-		.filterPillWrapper {
-			position: relative;
-			inline-size: fit-content;
-			display: var(--components-filterPillWrapper-display);
-		}
-
 		.filterPill_popover-content.popover-contentOptional {
 			--components-dateInput-width: none;
 
@@ -103,7 +96,6 @@
 			@include reset.button;
 
 			display: flex;
-			margin-block-start: -1px;
 			margin-inline-start: var(--pr-t-spacings-50);
 			inline-size: calc(var(--pr-t-spacings-50) + var(--pr-t-spacings-200));
 			flex-shrink: 0;
@@ -116,10 +108,6 @@
 				transition-duration: var(--commons-animations-durations-fast);
 				transform: rotate(var(--components-filterPill-toggle-rotation));
 			}
-
-			.filterPill-value + & {
-				margin-inline-start: var(--components-filterPill-toggle-marginInlineStart);
-			}
 		}
 
 		.filterPill-clear.clear {
@@ -131,16 +119,7 @@
 			@include clear.product;
 		}
 
-		.filterPill_clear.clear {
-			position: absolute;
-			z-index: 1;
-			inset-inline-end: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25));
-			inset-block-start: var(--pr-t-spacings-100);
-
-			@include clear.product;
-		}
-
-		.filterPill-value {
+		.filterPill-combobox {
 			@include reset.button;
 
 			font-weight: var(--components-filterPill-label-fontWeightChecked);
@@ -151,6 +130,9 @@
 			overflow: hidden;
 			text-overflow: ellipsis;
 			cursor: var(--components-filterPill-label-cursor);
+			display: flex;
+			align-items: center;
+			gap: var(--pr-t-spacings-50);
 			max-inline-size: 15rem;
 
 			&:focus-visible {
@@ -160,12 +142,6 @@
 			.lucca-icon {
 				color: var(--components-filterPill-arrowColor);
 			}
-
-			&:has(.lucca-icon) {
-				display: flex;
-				align-items: center;
-				gap: var(--pr-t-spacings-50);
-			}
 		}
 
 		.filterPill-label-placeholder {

package/src/components/filterPill/index.scss

@@ -15,16 +15,20 @@
 			@include hover;
 		}
 
-		&:active {
+		&:active,
+		&:has(:active) {
 			@include active;
 		}
 
-		&:has(.filterPill-label:focus-visible),
-		&:has(.filterPill-value:focus-visible) {
+		&.is-comboboxHidden {
+			@include comboboxHidden;
+		}
+
+		&:has(.filterPill-combobox:focus-visible) {
 			@include focusVisible;
 		}
 
-		&[aria-expanded='true'] {
+		&:has(.filterPill-combobox[aria-expanded='true']) {
 			@include opened;
 		}
 
@@ -35,7 +39,7 @@
 				@include filledHover;
 			}
 
-			&:active {
+			&:has(.filterPill-combobox:active) {
 				@include filledActive;
 			}
 		}
@@ -47,7 +51,6 @@
 				@include focusVisible;
 			}
 
-			&[aria-pressed='true'],
 			&:has(.filterPill-checkbox-input:checked) {
 				@include checkboxChecked;
 
@@ -55,16 +58,14 @@
 					@include filledHover;
 				}
 
-				&:active {
+				&:has(.filterPill-combobox:active) {
 					@include filledActive;
 				}
 			}
 
-			&[disabled],
 			&:has(.filterPill-checkbox-input:disabled) {
 				@include checkboxDisabled;
 
-				&[aria-pressed='true'],
 				&:has(.filterPill-checkbox-input:checked) {
 					@include checkboxCheckedDisabled;
 				}
@@ -75,14 +76,10 @@
 			@include button;
 		}
 
-		&[disabled] {
+		&:has(.filterPill-combobox:disabled) {
 			@include disabled;
 		}
-	}
-}
 
-.filterPillWrapper {
-	@layer mods {
 		&.is-hidden {
 			@include hidden;
 		}

package/src/components/filterPill/states.scss

@@ -13,7 +13,7 @@
 }
 
 @mixin focusVisible {
-	@include a11y.focusVisible($offset: 2px);
+	@include a11y.focusVisible($offset: 3px);
 }
 
 @mixin hover {
@@ -67,17 +67,15 @@
 	--components-filterPill-backgroundColor: var(--palettes-product-50);
 	--components-filterPill-color: var(--palettes-product-800);
 	--components-filterPill-toggle-iconColor: var(--palettes-product-700);
-	--components-filterPill-toggle-marginInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
 }
 
 @mixin notFilled {
-	.filterPill-value {
+	.filterPill-combobox {
 		@include a11y.mask;
 	}
+}
 
-	+ .filterPill_clear.clear {
-		@include clear.hidden;
-	}
+@mixin comboboxHidden {
 }
 
 @mixin opened {
@@ -104,8 +102,11 @@
 	box-shadow: var(--components-filterPill-shadow);
 
 	@include clear.hidden;
+
+	// TODO
+	// --components-filterPill-checkbox-borderColor: var(--palettes-neutral-600);
 }
 
 @mixin hidden {
-	--components-filterPillWrapper-display: none;
+	--components-filterPill-display: none;
 }

package/src/components/filterPill/vars.scss

@@ -15,8 +15,7 @@
 	--components-filterPill-toggle-rotation: 0deg;
 	--components-filterPill-toggle-iconColor: var(--palettes-neutral-600);
 	--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);
+	--components-filterPill-display: flex;
 	--components-filterPill-arrowColor: var(--palettes-product-700);
 	--components-filterPill-label-maxInlineSize: none;
-	--components-filterPill-toggle-marginInlineStart: var(--pr-t-spacings-50);
-	--components-filterPillWrapper-display: block;
 }

package/src/components/form/component.scss

@@ -5,7 +5,6 @@
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: block;
-	max-inline-size: var(--components-form-maxWidth);
 
 	.divider:not(.mod-vertical) {
 		margin-block: var(--pr-t-spacings-300);
@@ -151,10 +150,5 @@
 				}
 			}
 		}
-
-		.option-additional {
-			font: var(--pr-t-font-body-S);
-			color: var(--pr-t-color-text-subtle);
-		}
 	}
 }

package/src/components/form/mods.scss

@@ -15,7 +15,7 @@
 @use '@lucca-front/scss/src/components/color/exports' as color;
 
 @mixin maxWidth {
-	--components-form-maxWidth: 50rem;
+	max-inline-size: var(--components-form-maxWidth);
 }
 
 @mixin inline {

package/src/components/form/vars.scss

@@ -1,5 +1,5 @@
 @mixin vars {
-	--components-form-maxWidth: none;
+	--components-form-maxWidth: 40rem;
 	--components-form-group-margin-bottom: 1.2rem;
 	--components-form-field-margin-bottom: var(--pr-t-spacings-200);
 	--components-form-field-width: auto;

package/src/components/grid/mods.scss

@@ -14,7 +14,7 @@
 
 @mixin form {
 	--grid-columns: 4;
-	--grid-maxWidth: var(--components-form-maxWidth, 50rem);
+	--grid-maxWidth: 50rem;
 }
 
 @mixin dense {

package/src/components/horizontalNavigation/component.scss

@@ -28,18 +28,11 @@
 	}
 
 	@at-root ($atRoot) {
-		.horizontalNavigationWrapper {
-			grid-area: overflow;
-			min-block-size: 0;
-			display: flex;
-			flex-direction: column;
-		}
-
 		// stylelint-disable-next-line selector-disallowed-list -- .menu-containerOptional is deprecated
 		.menu-containerOptional,
 		.horizontalNavigation-containerOptional {
 			max-inline-size: var(--commons-container-maxWidth);
-			padding: var(--components-horizontalNavigation-containerOptional-padding);
+			padding: var(--commons-container-padding);
 		}
 
 		// stylelint-disable-next-line selector-disallowed-list -- .menu-list is deprecated
@@ -145,20 +138,5 @@
 				font-weight: var(--pr-t-font-fontWeight-semibold);
 			}
 		}
-
-		.horizontalNavigation_panel {
-			display: var(--components-horizontalNavigation-panel-display);
-			overflow: var(--components-horizontalNavigation-panel-overflow);
-			min-height: 0;
-			flex-direction: column;
-
-			&:focus-visible {
-				@include a11y.focusVisible($offset: -2px, $borderRadius: var(--pr-t-border-radius-small));
-			}
-
-			&:not(.is-active) {
-				display: none;
-			}
-		}
 	}
 }

package/src/components/horizontalNavigation/index.scss

@@ -21,10 +21,6 @@
 			@include noBorder;
 		}
 
-		.dialog & {
-			@include insideDialog;
-		}
-
 		&.mod-vertical {
 			@include vertical;
 
@@ -32,7 +28,6 @@
 			.menu-list-item-action,
 			.horizontalNavigation-list-item-action {
 				&[aria-current='page'],
-				&[aria-selected='true'],
 				&.is-active {
 					@include activeVertical;
 				}
@@ -45,18 +40,6 @@
 	}
 }
 
-.horizontalNavigation_panel {
-	@layer components {
-		@include varsPanel;
-	}
-
-	@layer mods {
-		.dialog & {
-			@include insideDialogPanel;
-		}
-	}
-}
-
 .menu-link, // stylelint-disable-line selector-disallowed-list -- .menu-link is deprecated
 .menu-list-item-action, // stylelint-disable-line selector-disallowed-list -- .menu-list-item-action is deprecated
 .horizontalNavigation-list-item-action {
@@ -64,13 +47,12 @@
 		// .active is deprecated
 		&.active,
 		&[aria-current='page'],
-		&[aria-selected='true'],
 		&.is-active {
 			@include active;
 		}
 
 		&.disabled, // .disabled is deprecated
-		&[disabled],
+		&[disabled], // [disabled] is deprecated
 		&.is-disabled {
 			@include disabled;
 		}

package/src/components/horizontalNavigation/mods.scss

@@ -1,5 +1,4 @@
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
-@use '@lucca-front/scss/src/commons/utils/a11y';
 
 @mixin header {
 	--components-horizontalNavigation-listPadding: 0 var(--pr-t-spacings-500);
@@ -107,16 +106,3 @@
 		}
 	}
 }
-
-@mixin insideDialog {
-	--components-horizontalNavigation-containerOptional-padding: 0 var(--components-dialog-insideContent-paddingInline);
-}
-
-@mixin insideDialogPanel {
-	--components-horizontalNavigation-panel-display: flex;
-	--components-horizontalNavigation-panel-overflow: auto;
-
-	&:focus-visible {
-		@include a11y.focusVisible($offset: -4px, $borderRadius: var(--pr-t-border-radius-structure));
-	}
-}

package/src/components/horizontalNavigation/vars.scss

@@ -18,11 +18,4 @@
 	--components-horizontalNavigation-listItemActionRadius: var(--pr-t-border-radius-default) var(--pr-t-border-radius-default) 0 0;
 	--components-horizontalNavigation-listItemActionRadiusWidth: auto;
 	--components-horizontalNavigation-listItemActionRadiusHeight: var(--components-horizontalNavigation-listItemActionSize);
-
-	--components-horizontalNavigation-containerOptional-padding: var(--commons-container-padding);
-}
-
-@mixin varsPanel {
-	--components-horizontalNavigation-panel-display: block;
-	--components-horizontalNavigation-panel-overflow: visible;
 }

package/src/components/index.scss

@@ -117,8 +117,6 @@
 @forward 'softwareIcon';
 @forward 'progressStepper';
 @forward 'activityFeed';
-@forward 'impersonation';
-@forward 'highlightText';
 
 @forward 'filterBarDeprecated';
 @forward 'tableFixedDeprecated';

package/src/components/indexTable/component.scss

@@ -265,10 +265,6 @@
 		}
 
 		.indexTableWrapper-pagination {
-			position: sticky;
-			inset-inline-end: 0;
-			align-self: flex-end;
-
 			&:empty {
 				display: none;
 			}

package/src/components/listing/component.scss

@@ -30,7 +30,7 @@
 			&::before {
 				content: var(--components-listing-item-before-content);
 				border-inline-start: var(--commons-divider-border);
-				block-size: 0.75lh;
+				height: 0.75lh;
 				align-self: center;
 			}
 		}
@@ -59,7 +59,7 @@
 		.listing-item-icon {
 			inline-size: var(--pr-t-spacings-250);
 			aspect-ratio: 1;
-			margin-block-start: var(--pr-t-spacings-25);
+			margin-top: var(--pr-t-spacings-25);
 			background-color: var(--components-listing-item-icon-backgroundColor);
 			color: var(--palettes-700, var(--palettes-neutral-700));
 			border-radius: var(--pr-t-border-radius-full);

package/src/components/loading/mods.scss

@@ -13,6 +13,10 @@
 	--components-loading-size: var(--pr-t-spacings-250);
 }
 
+@mixin M {
+	--components-loading-size: var(--pr-t-spacings-300);
+}
+
 @mixin L {
 	@include block;
 

package/src/components/mobilePush/component.scss

@@ -58,7 +58,7 @@
 
 		.mobilePush-content-downloadApps-link-badge {
 			display: block;
-			block-size: 1.75rem;
+			height: 1.75rem;
 		}
 	}
 }

package/src/components/multiSelect/component.scss

@@ -32,12 +32,6 @@
 			flex: 1;
 		}
 
-		.multipleSelect-displayer-value {
-			display: flex;
-			gap: var(--pr-t-spacings-50);
-			flex-wrap: wrap;
-		}
-
 		.multipleSelect-displayer-chip.chip {
 			min-inline-size: 0;
 
@@ -98,9 +92,5 @@
 		.multipleSelect-pill-displayer-label {
 			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
-
-		.multiSelect-field-icon {
-			order: 1;
-		}
 	}
 }

package/src/components/presentation/component.scss

@@ -47,7 +47,6 @@
 		.presentation-definition {
 			margin: 0;
 			color: var(--pr-t-color-text);
-			overflow-wrap: anywhere;
 
 			> *:not(:has(.lucca-icon), .presentation-definition-link) {
 				color: var(--pr-t-color-text);