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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "20.3.0-rc.2",
+  "version": "20.3.0-rc.3",
   "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.2"
+    "@lucca-front/icons": "20.3.0-rc.3"
   }
 }

package/src/commons/config.scss

@@ -3,7 +3,7 @@
 
 @use '@lucca-front/scss/src/commons/function';
 
-$layers: 'reset, base, components, mods, states, product, utils' !default;
+$layers: 'reset, base, components, mods, product, utils' !default;
 
 /* stylelint-disable-next-line layer-name-pattern */
 @layer #{$layers};

package/src/components/_sample/index.scss

@@ -17,7 +17,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&.is-sampleStateA {
 			@include sampleStateA;
 		}

package/src/components/breadcrumbs/index.scss

@@ -15,7 +15,7 @@
 }
 
 .breadcrumbs-list-item-action {
-	@layer states {
+	@layer mods {
 		// .active is deprecated
 		&.is-active,
 		&.active,

package/src/components/button/index.scss

@@ -138,7 +138,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		// .loading is deprecated
 		&.is-loading,
 		&.loading {

package/src/components/calendar/index.scss

@@ -40,7 +40,7 @@
 }
 
 .calendar-table-body-row-cell {
-	@layer states {
+	@layer mods {
 		&.is-daysOff {
 			@include daysOff;
 		}

package/src/components/calloutDisclosure/index.scss

@@ -6,7 +6,7 @@
 		@include component;
 	}
 
-	@layer states {
+	@layer mods {
 		&[open] {
 			@include open;
 		}

package/src/components/card/component.scss

@@ -19,6 +19,7 @@
 	@at-root ($atRoot) {
 		.card-content {
 			padding: var(--components-card-content-padding);
+			position: relative;
 		}
 
 		.card-title {

package/src/components/card/index.scss

@@ -28,9 +28,11 @@
 		&.mod-nested {
 			@include nested;
 		}
-	}
 
-	@layer states {
+		&.mod-expand {
+			@include expand;
+		}
+
 		&:is(.is-disabled, .disabled) {
 			@include disabled;
 		}

package/src/components/card/mods.scss

@@ -59,3 +59,34 @@
 @mixin nested {
 	--components-card-border-radius: var(--pr-t-border-radius-default);
 }
+
+@mixin expand {
+	border: 0;
+	background-color: transparent;
+	box-shadow: none;
+	cursor: pointer;
+
+	&::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background-color: var(--pr-t-elevation-surface-raised);
+		border-radius: var(--components-card-border-radius);
+		box-shadow: var(--pr-t-elevation-shadow-raised);
+		transition-duration: var(--commons-animations-durations-fast);
+		transition-property: inset, box-shadow;
+	}
+
+	&:hover {
+		box-shadow: none;
+
+		&::before {
+			inset: -2px -6px;
+			box-shadow: var(--pr-t-elevation-shadow-overlay);
+		}
+	}
+
+	.card-content {
+		z-index: 1;
+	}
+}

package/src/components/checkbox/index.scss

@@ -20,7 +20,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&:is(.is-required, .required) {
 			@include required;
 		}

package/src/components/checkboxField/index.scss

@@ -17,7 +17,7 @@
 			@include checklist;
 		}
 
-		@layer states {
+		@layer mods {
 			.checkboxField-input {
 				&:hover {
 					@include checklistHover;
@@ -62,7 +62,7 @@
 }
 
 .checkboxField-input {
-	@layer states {
+	@layer mods {
 		&[aria-checked='mixed'] {
 			@include checked;
 			@include mixed;

package/src/components/chip/index.scss

@@ -26,7 +26,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&.is-disabled {
 			@include disabled;
 		}

package/src/components/clear/index.scss

@@ -12,7 +12,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		// .palette-primary is deprecated
 		&.palette-product:not([disabled]),
 		&.palette-primary:not([disabled]) {

package/src/components/collapse/index.scss

@@ -6,7 +6,7 @@
 		@include component;
 	}
 
-	@layer states {
+	@layer mods {
 		&:not(.is-open, .open, [open]) {
 			@include close;
 		}

package/src/components/dataTable/index.scss

@@ -102,7 +102,7 @@
 }
 
 .dataTable-body-row {
-	@layer states {
+	@layer mods {
 		&.is-collapsed {
 			@include collapsed;
 		}
@@ -118,7 +118,7 @@
 }
 
 .dataTable-body-row-cell-expand-button {
-	@layer states {
+	@layer mods {
 		&[aria-expanded='true'] {
 			@include expanded;
 		}

package/src/components/dataTableSticked/index.scss

@@ -21,7 +21,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&:has(.dataTable.is-firstColumnVisible) {
 			@include firstColumnVisible;
 		}

package/src/components/dropdown/component.scss

@@ -4,11 +4,11 @@
 @use '@lucca-front/scss/src/components/divider/exports' as divider;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	margin: calc(var(--pr-t-spacings-100) * -1);
 	padding: 0 !important;
 	border-radius: var(--pr-t-border-radius-structure);
-	max-inline-size: 90vw;
-	max-block-size: var(--components-dropdown-max-height);
+	min-inline-size: var(--components-dropdown-minInlineSize);
+	max-inline-size: var(--components-dropdown-maxInlineSize);
+	max-block-size: var(--components-dropdown-maxBlockSize);
 	overflow-x: hidden;
 	overflow-y: auto;
 
@@ -20,30 +20,49 @@
 			padding-block: var(--pr-t-spacings-50);
 			padding-inline: 0;
 			margin: 0;
-			min-inline-size: var(--components-dropdown-min-width);
-			max-inline-size: var(--components-dropdown-max-width);
+			display: flex;
+			flex-direction: column;
+			gap: var(--pr-t-spacings-25);
+
+			.dropdown-list {
+				padding-block: 0;
+			}
 		}
 
 		// .lu-dropdown-options-item is deprecated
 		.dropdown-list-option,
 		.lu-dropdown-options-item {
 			padding-block: 0;
-			padding-inline: var(--pr-t-spacings-50);
 
-			&.mod-divider {
-				padding: 0;
+			&:not(:has(.divider.dropdown-list-option-divider, .dropdown-list-option), &.mod-divider) {
+				padding-inline: var(--pr-t-spacings-50);
+			}
+
+			&:has(> .dropdown-list) {
+				padding-block-start: var(--pr-t-spacings-100);
+				padding-inline: var(--pr-t-spacings-150);
+				color: var(--pr-t-color-text-subtle);
+				font: var(--pr-t-font-body-S);
+				font-weight: var(--pr-t-font-fontWeight-semibold);
+			}
+
+			> .dropdown-list {
+				color: var(--pr-t-color-text);
+				font: var(--pr-t-font-body-M);
+				font-weight: var(--pr-t-font-fontWeight-regular);
+				margin-block-start: var(--pr-t-spacings-50);
+				margin-inline: calc(var(--pr-t-spacings-150) * -1);
 			}
 		}
 
 		// .lu-dropdown-options-item-action is deprecated
 		.dropdown-list-option-action,
 		.lu-dropdown-options-item-action {
-			align-items: flex-start;
 			border: 0;
 			border-radius: var(--pr-t-border-radius-default);
-			color: var(--components-dropdown-optionColor);
-			background-color: var(--components-dropdown-option-actionBackground);
+			background-color: var(--components-dropdown-list-option-action-backgroundColor);
 			display: flex;
+			align-items: flex-start;
 			gap: var(--pr-t-spacings-100);
 			line-height: var(--pr-t-font-body-M-lineHeight);
 			padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100);
@@ -51,32 +70,39 @@
 			transition: background-color var(--commons-animations-durations-fast);
 			text-decoration: none;
 			inline-size: 100%;
-			pointer-events: var(--components-dropdown-option-actionEvents);
+			pointer-events: var(--components-dropdown-list-option-action-pointerEvents);
 			cursor: pointer;
 
 			.lucca-icon {
 				@include icon.S;
 
-				margin-block-start: var(--pr-t-spacings-25);
+				margin-block: var(--pr-t-spacings-25);
 			}
 
 			&,
 			&:hover {
-				color: var(--components-dropdown-option-actionColor);
+				color: var(--components-dropdown-list-option-action-color);
 			}
 
 			&:hover,
 			&:focus-visible {
-				--components-dropdown-option-actionBackground: var(--palettes-neutral-25);
+				--components-dropdown-list-option-action-backgroundColor: var(--palettes-neutral-50);
 			}
 
 			&:active {
-				--components-dropdown-option-actionBackground: var(--palettes-neutral-50);
+				--components-dropdown-list-option-action-backgroundColor: var(--palettes-neutral-100);
 			}
 
 			&:focus-visible {
-				@include a11y.focusVisible;
+				@include a11y.focusVisible($offset: 0);
+
+				z-index: 1;
+				position: relative;
 			}
 		}
+
+		.divider.dropdown-list-option-divider {
+			--components-divider-marginBlock: var(--pr-t-spacings-25);
+		}
 	}
 }

package/src/components/dropdown/index.scss

@@ -9,16 +9,17 @@
 	}
 }
 
+// .lu-dropdown-options-item-action is deprecated
 .dropdown-list-option-action,
 .lu-dropdown-options-item-action {
-	@layer states {
+	@layer mods {
+		&[disabled],
 		&.is-disabled {
 			@include disabled;
 		}
-	}
 
-	@layer mods {
-		&.mod-critical, &.mod-delete {
+		&.mod-critical,
+		&.mod-delete {
 			@include critical;
 		}
 	}

package/src/components/dropdown/mods.scss

@@ -1,12 +1,12 @@
 @mixin critical {
-	--components-dropdown-option-actionColor: var(--pr-t-color-text-critical);
-
 	&:hover,
 	&:focus-visible {
-		--components-dropdown-option-actionBackground: var(--palettes-error-50);
+		--components-dropdown-list-option-action-backgroundColor: var(--palettes-error-50);
+		--components-dropdown-list-option-action-color: var(--pr-t-color-text-critical);
 	}
 
 	&:active {
-		--components-dropdown-option-actionBackground: var(--palettes-error-100);
+		--components-dropdown-list-option-action-color: var(--pr-t-color-text-critical);
+		--components-dropdown-list-option-action-backgroundColor: var(--palettes-error-100);
 	}
 }

package/src/components/dropdown/states.scss

@@ -1,9 +1,10 @@
 @mixin disabled {
-	--components-dropdown-option-actionColor: var(--pr-t-color-text-disabled);
-	--components-dropdown-option-actionEvents: none;
+	--components-dropdown-list-option-action-color: var(--pr-t-color-text-disabled);
+	--components-dropdown-list-option-action-backgroundColor: transparent;
+	--components-dropdown-list-option-action-pointerEvents: none;
 
 	&,
 	&:hover {
-		--components-dropdown-option-actionBackground: var(--palettes-neutral-0);
+		--components-dropdown-list-option-action-backgroundColor: var(--palettes-neutral-0);
 	}
 }

package/src/components/dropdown/vars.scss

@@ -1,8 +1,10 @@
 @mixin vars {
-	--components-dropdown-min-width: 10rem;
-	--components-dropdown-max-width: 30rem;
-	--components-dropdown-max-height: 60vh;
-	--components-dropdown-option-actionColor: currentColor;
-	--components-dropdown-option-actionBackground: transparent;
-	--components-dropdown-option-actionEvents: auto;
+	--components-dropdown-minInlineSize: 10rem;
+
+	--components-dropdown-maxInlineSize: 30rem;
+	--components-dropdown-maxBlockSize: min(60vh, 30rem);
+
+	--components-dropdown-list-option-action-color: currentColor;
+	--components-dropdown-list-option-action-backgroundColor: transparent;
+	--components-dropdown-list-option-action-pointerEvents: auto;
 }

package/src/components/field/index.scss

@@ -10,7 +10,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		.is-error {
 			@include fieldFramedState('error');
 			@include fieldFramedError('textfield');
@@ -47,7 +47,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&:is(.is-required, .required) {
 			@include required;
 		}
@@ -85,7 +85,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&.mod-framed {
 			&.is-error {
 				@include fieldFramedState('error');
@@ -108,7 +108,7 @@
 	.textfield-input,
 	.radiosfield-input,
 	.checkboxesfield-input {
-		@layer states {
+		@layer mods {
 			&:is([disabled], [readonly]) {
 				@include inputDisabled;
 			}
@@ -137,7 +137,7 @@
 .textfield-input,
 .radiosfield-input,
 .checkboxesfield-input {
-	@layer states {
+	@layer mods {
 		&:is([required]),
 		&:is([aria-required='true']) {
 			@include required;

package/src/components/fieldset/index.scss

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

package/src/components/file/index.scss

@@ -16,7 +16,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&:is(.is-droppable, .droppable) {
 			@include legacyDroppable;
 		}
@@ -28,7 +28,7 @@
 }
 
 .file-input {
-	@layer states {
+	@layer mods {
 		&:is(:disabled) {
 			@include disabled;
 		}

package/src/components/fileEntry/index.scss

@@ -20,7 +20,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&.is-error {
 			@include error;
 

package/src/components/fileUpload/index.scss

@@ -24,7 +24,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&:hover {
 			@include hover;
 		}

package/src/components/filterPill/index.scss

@@ -6,7 +6,7 @@
 		@include component;
 	}
 
-	@layer states {
+	@layer mods {
 		&:not(.is-filled) {
 			@include notFilled;
 		}
@@ -79,7 +79,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&:has(.filterPill-combobox:disabled) {
 			@include disabled;
 		}

package/src/components/form/index.scss

@@ -40,7 +40,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&:has(.radioField-input[aria-invalid='true']),
 		&:has(.checkboxField-input[aria-invalid='true']) {
 			@include legendInvalid;
@@ -72,7 +72,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&:not(lu-form-field) {
 			&:has(
 					.textField-input-value[aria-invalid='true'],
@@ -152,7 +152,7 @@
 .radiosfield-label,
 .checkboxesfield-label,
 .textfield-label {
-	@layer states {
+	@layer mods {
 		&:is(.is-required, .required) {
 			@include required;
 		}
@@ -177,7 +177,7 @@
 }
 
 .form-group-label {
-	@layer states {
+	@layer mods {
 		&.is-required {
 			&:not(:empty) {
 				&::after {
@@ -191,7 +191,7 @@
 .radiosfield-label,
 .checkboxesfield-label,
 .textfield-label {
-	@layer states {
+	@layer mods {
 		&.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/index.scss

@@ -20,7 +20,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&.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/index.scss

@@ -25,7 +25,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&.is-zero,
 		&:not([style]),
 		&[style*='--components-gauge-value: 0%'] {

package/src/components/header/index.scss

@@ -21,7 +21,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&:is(.is-loading, .loading) {
 			@include loading;
 		}

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/indexTable/index.scss

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

package/src/components/inlineMessage/index.scss

@@ -12,7 +12,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&.is-success {
 			@include success;
 		}

package/src/components/inputFramed/index.scss

@@ -7,7 +7,7 @@
 		@include component;
 	}
 
-	@layer states {
+	@layer mods {
 		&:hover {
 			@include hover;
 		}

package/src/components/layout/index.scss

@@ -66,7 +66,7 @@
 }
 
 html {
-	@layer states {
+	@layer mods {
 		&:is(.has-overlay, .withOverlay) {
 			@include overlay;
 		}

package/src/components/link/index.scss

@@ -16,7 +16,7 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&:is(:disabled, .is-disabled) {
 		@include disabled;
 	}