@lucca-front/scss 22.0.0-rc.2 → 22.0.0-rc.4

package/src/components/calendar/component.scss

@@ -195,9 +195,9 @@
 			color: var(--palettes-neutral-700);
 
 			&::before {
-				background-color: var(--palettes-50, var(--palettes-product-50));
+				background-color: var(--components-calendar-table-body-row-cellSelectedBeforeBackgroundColor);
 				position: absolute;
-				inset: var(--pr-t-spacings-25) 0;
+				inset: var(--components-calendar-table-body-row-cellSelectedBeforeInset);
 				content: var(--components-calendar-table-body-row-cellSelectedBeforeContent);
 				border-radius: var(--components-calendar-table-body-row-cellSelectedBeforeBorderRadius);
 			}
@@ -217,7 +217,8 @@
 			display: var(--components-calendar-table-body-row-cell-actionDisplay);
 			block-size: 100%;
 			text-transform: lowercase;
-			cursor: var(--components-calendar-table-body-row-cell-actionCursor);
+			place-items: center;
+			cursor: default;
 
 			/* autoprefixer: off */
 			text-decoration: var(--components-calendar-table-body-row-cell-actionTextDecoration);
@@ -225,31 +226,43 @@
 				0 0 0 1px var(--components-calendar-table-body-row-cell-actionHighlight),
 				0 0 0 1px var(--components-calendar-table-body-row-cell-actionHighlight) inset;
 
-			&:not(:disabled, [aria-disabled='true']) {
-				&:hover {
-					@include a11y.focusVisible;
+			&:not(.mod-week) {
+				cursor: var(--components-calendar-table-body-row-cell-actionCursor);
 
-					outline-width: var(--components-calendar-table-body-row-cell-actionOutlineWidth);
-					outline-offset: var(--components-calendar-table-body-row-cell-actionOutlineOffset);
-					outline-color: var(--palettes-700, var(--palettes-product-700));
-				}
+				&:not(:disabled, [aria-disabled='true']) {
+					&:hover {
+						@include a11y.focusVisible($offset: var(--components-calendar-table-body-row-cell-actionOutlineOffset), $color: var(--palettes-700, var(--palettes-product-700)), $width: var(--components-calendar-table-body-row-cell-actionOutlineWidth));
+					}
 
-				&:active {
-					outline: 2px solid var(--palettes-800, var(--palettes-product-800));
-					background-color: var(--palettes-800, var(--palettes-product-800));
-					color: var(--palettes-0, var(--palettes-product-0));
+					&:active {
+						outline: 2px solid var(--palettes-800, var(--palettes-product-800));
+						background-color: var(--palettes-800, var(--palettes-product-800));
+						color: var(--palettes-0, var(--palettes-product-0));
+					}
 				}
-			}
 
-			&:focus-visible {
-				@include a11y.focusVisible;
+				&:focus-visible {
+					&:not(:has(.calendar-table-body-row-cell-action-week)) {
+						@include a11y.focusVisible($offset: var(--components-calendar-table-body-row-cell-actionOutlineOffset), $color: var(--palettes-700, var(--palettes-product-700)), $width: var(--components-calendar-table-body-row-cell-actionOutlineWidth));
+					}
 
-				outline-width: var(--components-calendar-table-body-row-cell-actionOutlineWidth);
-				outline-offset: var(--components-calendar-table-body-row-cell-actionOutlineOffset);
-				outline-color: var(--palettes-700, var(--palettes-product-700));
+					&:has(.calendar-table-body-row-cell-action-week) {
+						outline: none;
+					}
+				}
 			}
 		}
 
+		.calendar-table-body-row-cell-action-week {
+			outline: 1px solid var(--components-calendar-table-body-row-cell-action-week-outlineColor);
+			line-height: var(--pr-t-font-body-XS-lineHeight);
+			border-radius: var(--pr-t-border-radius-small);
+			min-inline-size: calc(var(--pr-t-spacings-250) + var(--pr-t-spacings-25));
+			aspect-ratio: 1;
+			display: grid;
+			place-items: center;
+		}
+
 		.calendar-table-body-row-cell-action-stripes {
 			position: absolute;
 			inset-block-start: 0;

package/src/components/calendar/index.scss

@@ -14,6 +14,10 @@
 		&.mod-daysOverflowingHidden {
 			@include daysOverflowingHidden;
 		}
+
+		&:has(.calendar-table-body-row-cell-action-week) {
+			@include week;
+		}
 	}
 }
 
@@ -28,6 +32,50 @@
 		&:has(.calendar-table-body-row-cell:nth-child(3):last-child) {
 			@include third;
 		}
+
+		// if rows have height columns (display for weeks)
+		&:has(.calendar-table-body-row-cell:nth-child(8):last-child) {
+			@include week;
+
+			.calendar-table-body-row-cell {
+				&.is-selected {
+					@include selected;
+					@include weekSelected;
+				}
+			}
+
+			.calendar-table-body-row {
+				&:has(.calendar-table-body-row-cell-action:focus-visible) {
+					@include weekFocusVisible;
+				}
+			}
+
+			.calendar-table-body-row {
+				&:not(:has(.calendar-table-body-row-cell.is-selected), :has(.calendar-table-body-row-cell:nth-child(7):empty)) {
+					&:hover {
+						@include weekHover;
+					}
+
+					&:active {
+						@include weekActive;
+					}
+				}
+
+				&:has(.calendar-table-body-row-cell.is-selected) {
+					&:hover {
+						@include weekSelectedHover;
+					}
+
+					&:active {
+						@include weekSelectedActive;
+					}
+
+					&:has(.calendar-table-body-row-cell-action:focus-visible) {
+						@include weekSelectedFocusVisible;
+					}
+				}
+			}
+		}
 	}
 }
 

package/src/components/calendar/mods.scss

@@ -17,3 +17,9 @@
 @mixin third {
 	--components-calendarBorderSpacing: 0 var(--pr-t-spacings-200);
 }
+
+@mixin week {
+	--components-calendarWrapperWidth: 19.5rem;
+	--components-calendar-table-body-row-cellSelectedBeforeBackgroundColor: var(--palettes-700, var(--palettes-product-700));
+	--components-calendar-table-body-row-cellSelectedBeforeInset: 1px 0;
+}

package/src/components/calendar/states.scss

@@ -1,3 +1,5 @@
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
 @mixin daysOff {
 	.calendar-table-body-row-cell-action {
 		&:not(:disabled, [aria-disabled='true']) {
@@ -44,6 +46,10 @@
 }
 
 @mixin extremity {
+	.calendar-table-body-row-cell-action-week {
+		--components-calendar-table-body-row-cell-action-week-outlineColor: var(--palettes-neutral-0);
+	}
+
 	.calendar-table-body-row-cell-action {
 		--components-calendar-table-body-row-cell-actionColor: var(--palettes-0, var(--palettes-product-0));
 		--components-calendar-table-body-row-cell-actionHighlight: var(--palettes-700, var(--palettes-product-700));
@@ -174,3 +180,74 @@
 	--components-calendar-table-body-row-cell-actionTextDecoration: line-through;
 	--components-calendar-table-body-row-cell-actionCursor: default;
 }
+
+@mixin weekFocusVisible {
+	@include a11y.focusVisible($borderRadius: var(--pr-t-border-radius-structure), $offset: -2px);
+}
+
+@mixin weekSelectedFocusVisible {
+	@include a11y.focusVisible($borderRadius: var(--pr-t-border-radius-default), $offset: -0);
+}
+
+@mixin weekSelected {
+	.calendar-table-body-row-cell-action {
+		--components-calendar-table-body-row-cell-actionColor: var(--palettes-0, var(--palettes-product-0));
+	}
+}
+
+@mixin weekSelectedHover {
+	--components-calendar-table-body-row-cellSelectedBeforeBackgroundColor: var(--palettes-600, var(--palettes-product-600));
+
+	.calendar-table-body-row-cell-action {
+		--components-calendar-table-body-row-cell-actionHighlight: var(--components-calendar-table-body-row-cellSelectedBeforeBackgroundColor);
+	}
+
+	&,
+	.calendar-table-body-row-cell-action {
+		cursor: pointer;
+	}
+}
+
+@mixin weekSelectedActive {
+	--components-calendar-table-body-row-cellSelectedBeforeBackgroundColor: var(--palettes-800, var(--palettes-product-800));
+
+	.calendar-table-body-row-cell-action {
+		--components-calendar-table-body-row-cell-action-stripesColor: var(--palettes-900, var(--palettes-product-900));
+	}
+}
+
+@mixin weekHover {
+	@include a11y.focusVisible($borderRadius: var(--pr-t-border-radius-structure), $offset: -2px);
+
+	&,
+	.calendar-table-body-row-cell-action {
+		cursor: pointer;
+	}
+
+	.calendar-table-body-row-cell-action {
+		outline: none;
+	}
+}
+
+@mixin weekActive {
+	.calendar-table-body-row-cell {
+		@include selected;
+
+		&:first-child {
+			@include start;
+		}
+
+		&:last-child {
+			@include end;
+		}
+	}
+
+	.calendar-table-body-row-cell-action {
+		--components-calendar-table-body-row-cell-actionColor: var(--palettes-0, var(--palettes-product-0));
+		--components-calendar-table-body-row-cell-actionHighlight: var(--components-calendar-table-body-row-cellSelectedBeforeBackgroundColor) !important;
+		--components-calendar-table-body-row-cell-action-stripesColor: var(--palettes-900, var(--palettes-product-900)) !important;
+	}
+
+	@include weekSelected;
+	@include weekSelectedActive;
+}

package/src/components/calendar/vars.scss

@@ -15,9 +15,12 @@
 	--components-calendar-table-body-row-cell-actionTextDecoration: none;
 	--components-calendar-table-body-row-cellSelectedBeforeContent: none;
 	--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: 0;
-	--components-calendar-table-body-row-cell-actionDisplay: block;
+	--components-calendar-table-body-row-cellSelectedBeforeBackgroundColor: var(--palettes-50, var(--palettes-product-50));
+	--components-calendar-table-body-row-cellSelectedBeforeInset: var(--pr-t-spacings-25) 0;
+	--components-calendar-table-body-row-cell-actionDisplay: grid;
 	--components-calendar-table-body-row-cell-action-stripesDisplay: block;
 	--components-calendarBackground: var(--components-calendarWrapperBackground, var(--palettes-neutral-0));
 	--components-calendarWidth: var(--components-calendarWrapperWidth, 17.25rem);
 	--components-calendarBorderSpacing: 0;
+	--components-calendar-table-body-row-cell-action-week-outlineColor: var(--palettes-neutral-200);
 }

package/src/components/callout/mods.scss

@@ -34,7 +34,7 @@
 	--components-callout-boxShadow: var(--pr-t-elevation-shadow-button);
 	--components-callout-backgroundColor: var(--pr-t-elevation-surface-raised);
 
-	@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500));
+	@include color.borderGradient($gradient: var(--pr-t-color-border-ai));
 
 	.callout-icon {
 		.lucca-icon {

package/src/components/card/index.scss

@@ -7,9 +7,7 @@
 	}
 
 	@layer mods {
-		// .mod-grey is deprecated
-		&.mod-neutral,
-		&.mod-grey {
+		&.mod-neutral {
 			@include neutral;
 		}
 

package/src/components/checkbox/states.scss

@@ -7,7 +7,7 @@
 		cursor: default;
 
 		&::before {
-			border-color: var(--palettes-neutral-500); // disabled token candidate
+			border-color: var(--palettes-neutral-300); // disabled token candidate
 		}
 
 		.checkbox-label-helper {

package/src/components/checkboxField/states.scss

@@ -70,7 +70,7 @@
 	cursor: default;
 
 	~ .checkboxField-icon {
-		--component-checkboxField-borderColor: var(--palettes-neutral-500);
+		--component-checkboxField-borderColor: var(--palettes-neutral-300);
 	}
 }
 

package/src/components/code/component.scss

@@ -9,4 +9,5 @@
 	padding-block: 0;
 	padding-inline: 0.3rem;
 	tab-size: 2;
+	overflow-wrap: anywhere;
 }

package/src/components/color/component.scss

@@ -61,10 +61,12 @@
 		}
 	}
 
-	[role='listbox'] {
+	.lu-picker-content-option {
+		flex-direction: row;
 		display: flex;
 		flex-wrap: wrap;
 		padding: var(--pr-t-spacings-100);
+		gap: 0;
 	}
 
 	.color {

package/src/components/color/index.scss

@@ -23,8 +23,7 @@
 			@include selected;
 		}
 
-		.optionItem.is-highlighted &,
-		[role='listbox'] .optionItem:hover & {
+		.lu-picker-panel .optionItem.is-highlighted & {
 			@include highlighted;
 		}
 	}

package/src/components/comment/component.scss

@@ -75,7 +75,7 @@
 
 		.comment-content-text {
 			margin-block-end: 0;
-			overflow-wrap: break-word;
+			overflow-wrap: anywhere;
 			font: var(--components-comment-text-font);
 		}
 

package/src/components/dataTable/component.scss

@@ -92,11 +92,16 @@
 
 			&:first-child {
 				inline-size: var(--components-dataTable-cellFirst-width);
+				inset-inline-start: 0;
 
 				.checkboxField {
 					--component-checkboxField-top: 0;
 				}
 			}
+
+			&:last-child {
+				inset-inline-end: 0;
+			}
 		}
 
 		.dataTable-body-row-cell,
@@ -131,7 +136,7 @@
 
 		.dataTable-body-row-cell-expand-button.button {
 			vertical-align: top;
-			margin-left: calc(var(--pr-t-spacings-25) * -1);
+			margin-inline-start: calc(var(--pr-t-spacings-25) * -1);
 
 			.lucca-icon {
 				transform: rotate(var(--components-dataTable-expand-rotation));

package/src/components/dataTable/index.scss

@@ -24,6 +24,12 @@
 	@layer mods {
 		&.mod-cellBorder {
 			@include cellBorder;
+
+			:is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell) {
+				&.mod-editable {
+					@include cellBorderEditable;
+				}
+			}
 		}
 
 		&.mod-alignTop,

package/src/components/dataTable/mods.scss

@@ -108,6 +108,10 @@
 	--components-dataTable-cell-paddingInlineStart: var(--pr-t-spacings-50);
 }
 
+@mixin cellBorderEditable {
+	--components-dataTable-cell-paddingInlineStart: var(--pr-t-spacings-100);
+}
+
 @mixin actions {
 	padding-block: 0;
 	padding-inline: var(--pr-t-spacings-50);

package/src/components/dateField/index.scss

@@ -20,6 +20,14 @@
 				}
 			}
 
+			&.mod-week {
+				@include week;
+
+				.form-field.mod-S & {
+					@include weekS;
+				}
+			}
+
 			&.mod-month {
 				@include month;
 

package/src/components/dateField/mods.scss

@@ -2,6 +2,10 @@
 	--components-dateField-maxWidth: var(--components-dateField-maxWidthDay);
 }
 
+@mixin week {
+	--components-dateField-maxWidth: var(--components-dateField-maxWidthWeek);
+}
+
 @mixin month {
 	--components-dateField-maxWidth: var(--components-dateField-maxWidthMonth);
 }
@@ -14,6 +18,10 @@
 	--components-dateField-maxWidth: var(--components-dateField-maxWidthDayS);
 }
 
+@mixin weekS {
+	--components-dateField-maxWidth: var(--components-dateField-maxWidthWeekS);
+}
+
 @mixin monthS {
 	--components-dateField-maxWidth: var(--components-dateField-maxWidthMonthS);
 }

package/src/components/dateField/vars.scss

@@ -1,10 +1,12 @@
 @mixin vars {
 	--components-dateField-maxWidth: auto;
 	--components-dateField-maxWidthDay: 10rem;
+	--components-dateField-maxWidthWeek: var(--components-dateField-maxWidthDay);
 	--components-dateField-maxWidthMonth: var(--components-dateField-maxWidthDay);
 	--components-dateField-maxWidthYear: var(--components-dateField-maxWidthDay);
 
 	--components-dateField-maxWidthDayS: 9rem;
+	--components-dateField-maxWidthWeekS: var(--components-dateField-maxWidthDayS);
 	--components-dateField-maxWidthMonthS: var(--components-dateField-maxWidthDayS);
 	--components-dateField-maxWidthYearS: var(--components-dateField-maxWidthDayS);
 }

package/src/components/dialog/component.scss

@@ -34,7 +34,7 @@
 
 	@at-root ($atRoot) {
 		.dialog-inside {
-			&:has(.dialog-inside-formOptional, .dialog-formOptional, .dialog-form) {
+			&:has(> .dialog-inside-formOptional, > .dialog-formOptional, > .dialog-form) {
 				display: contents;
 
 				.dialog-formOptional, // stylelint-disable-line selector-disallowed-list -- .dialog-formOptional is deprecated
@@ -62,7 +62,7 @@
 				}
 			}
 
-			&:not(:has(.dialog-inside-formOptional, .dialog-formOptional, .dialog-form)) {
+			&:not(:has(> .dialog-inside-formOptional, > .dialog-formOptional, > .dialog-form)) {
 				display: grid;
 				grid-template-areas:
 					'header  '
@@ -108,7 +108,7 @@
 		}
 
 		.dialog-inside-header-actionOptional {
-			margin-right: calc(var(--pr-t-spacings-100) * -1);
+			margin-inline-end: calc(var(--pr-t-spacings-100) * -1);
 
 			&:empty {
 				display: none;
@@ -117,6 +117,7 @@
 
 		.dialog-inside-footer {
 			grid-area: footer;
+			margin-block: var(--components-dialog-inside-footer-marginBlock);
 
 			&.footer {
 				@include footer.insideDialog;
@@ -125,6 +126,7 @@
 
 		.dialog-inside-header {
 			display: grid;
+			margin-block: var(--components-dialog-inside-header-marginBlock);
 			padding-block: var(--components-dialog-inside-header-paddingBlock);
 			padding-inline: var(--components-dialog-inside-header-paddingInline);
 			grid-template-areas: var(--components-dialog-insideHeaderAreas);
@@ -155,7 +157,8 @@
 			padding-block: var(--components-dialog-insideContent-paddingBlock);
 			padding-inline: var(--components-dialog-insideContent-paddingInline);
 			grid-area: overflow;
-			overflow: auto;
+			overflow: var(--components-dialog-insideContent-overflow);
+			display: block;
 			outline: none;
 		}
 

package/src/components/dialog/index.scss

@@ -37,8 +37,10 @@
 			@include XXL;
 		}
 
-		&.mod-neutralBackground {
-			@include neutralBackground;
+		// neutralBackground is deprecated
+		&.mod-neutralBackground,
+		&.mod-surfaceDefault {
+			@include surfaceDefault;
 		}
 
 		&:where(.mod-drawer) {
@@ -62,6 +64,10 @@
 			@include withAction;
 		}
 
+		&:has(.horizontalNavigation) {
+			@include withHorizontalNavigation;
+		}
+
 		&.mod-fancy {
 			@include fancy;
 

package/src/components/dialog/mods.scss

@@ -75,7 +75,7 @@
 	--components-dialog-inset: 0;
 }
 
-@mixin neutralBackground {
+@mixin surfaceDefault {
 	--components-dialog-insideContent-background: var(--pr-t-elevation-surface-default);
 }
 
@@ -109,16 +109,18 @@
 	--components-dialog-inside-header-button-position: absolute;
 	--components-dialog-inside-header-button-insetBlockStart: var(--pr-t-spacings-100);
 	--components-dialog-inside-header-button-insetInlineEnd: var(--pr-t-spacings-100);
-	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-50) var(--pr-t-spacings-200);
+	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-50) 0;
 	--components-dialog-inside-header-paddingInline: var(--pr-t-spacings-700) var(--pr-t-spacings-400);
 	--components-dialog-insideContent-paddingInline: var(--pr-t-spacings-700) var(--pr-t-spacings-400);
+	--components-dialog-inside-header-marginBlock: var(--pr-t-spacings-500) 0;
+	--components-dialog-inside-footer-marginBlock: 0 var(--pr-t-spacings-500);
 
 	.dialog-inside-footer {
 		--components-footer-actions-margin: 0;
 		--components-footer-boxShadow: none;
-		--components-footer-paddingBlock: 0 var(--pr-t-spacings-150);
 		--components-footer-overflow: visible;
 		--components-footer-paddingInline: var(--pr-t-spacings-700) var(--pr-t-spacings-400);
+		--components-footer-paddingBlock: var(--pr-t-spacings-300) var(--pr-t-spacings-150);
 	}
 
 	.dialog-inside-header {
@@ -150,3 +152,9 @@
 		--components-footer-paddingInline: var(--pr-t-spacings-150);
 	}
 }
+
+@mixin withHorizontalNavigation {
+	--components-dialog-insideContent-overflow: none;
+	--components-dialog-inside-header-boxShadow: none;
+	--components-dialog-inside-header-paddingBlock: var(--pr-t-spacings-200) 0;
+}

package/src/components/dialog/vars.scss

@@ -19,6 +19,7 @@
 	--components-dialog-insideContent-background: transparent;
 	--components-dialog-insideContent-paddingInline: var(--pr-t-spacings-300);
 	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-200);
+	--components-dialog-insideContent-overflow: auto;
 	--components-dialog-level: 0;
 	--components-dialog-translate-spacing: var(--pr-t-spacings-500);
 	--components-dialog-translate: calc(var(--components-dialog-translate-spacing) * var(--components-dialog-level) * -1);
@@ -38,4 +39,6 @@
 	--components-dialog-inside-fancyIllustrations-inlineSize: var(--components-dialog-inside-paddingInlineEnd);
 	--components-dialog-inside-header-button-insetBlockStart: var(--pr-t-spacings-200);
 	--components-dialog-inside-header-button-insetInlineEnd: var(--pr-t-spacings-300);
+	--components-dialog-inside-header-marginBlock: 0px;
+	--components-dialog-inside-footer-marginBlock: 0px;
 }

package/src/components/fieldset/index.scss

@@ -21,6 +21,10 @@
 			@include expandable;
 		}
 
+		&.mod-hiddenLegend {
+			@include hiddenLegend;
+		}
+
 		&:has(.fieldset-title-content[aria-expanded='true']) {
 			@include expanded;
 		}

package/src/components/fieldset/mods.scss

@@ -7,6 +7,8 @@
 
 @mixin horizontal {
 	grid-template-columns: 1fr auto;
+
+	--components-form-maxWidth: initial;
 }
 
 @mixin expandable {
@@ -33,3 +35,11 @@
 @mixin narrow {
 	--components-fieldset-title-content-flexWrap: wrap;
 }
+
+@mixin hiddenLegend {
+	--components-fieldset-gap: 0;
+
+	.fieldset-title-content-text {
+		@include a11y.mask;
+	}
+}

package/src/components/fieldset/vars.scss

@@ -1,7 +1,7 @@
 @mixin vars {
 	--components-fieldset-title: var(--pr-t-font-heading-3);
 	--components-fieldset-gap: var(--pr-t-spacings-100);
-	--components-fieldset-contentMaxWidth: 40rem;
+	--components-fieldset-contentMaxWidth: var(--components-form-maxWidth, 50rem);
 	--components-fieldset-title-iconRotation: 0deg;
 	--components-fieldset-title-content-flexWrap: nowrap;
 }

package/src/components/fileEntry/component.scss

@@ -48,7 +48,7 @@
 			}
 
 			.form-field:has(.fileUpload) + & {
-				margin-top: var(--pr-t-spacings-100);
+				margin-block-start: var(--pr-t-spacings-100);
 			}
 		}
 
@@ -180,7 +180,7 @@
 		}
 
 		.fileEntry_box.box {
-			margin-top: var(--pr-t-spacings-150);
+			margin-block-start: var(--pr-t-spacings-150);
 		}
 
 		.fileEntry_box-field {

package/src/components/fileUpload/component.scss

@@ -72,7 +72,7 @@
 
 		.fileUpload-instruction-action {
 			display: block;
-			margin-bottom: var(--fileUpload-instruction-action-marginBottom);
+			margin-block-end: var(--fileUpload-instruction-action-marginBottom);
 			line-height: var(--pr-t-font-body-M-lineHeight);
 
 			span {