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

package/src/components/approbationInbox/mods.scss

@@ -0,0 +1,78 @@
+@mixin center {
+	--components-approbationInbox-list-content-items-item-content-info-alignItems: center;
+}
+
+@mixin noDescription {
+	--components-approbationInbox-detail-header-main-delegation-marginBlockStart: 0;
+}
+
+@mixin insideDialog {
+	--components-approbationInbox-detail-header-main-actions-display: none;
+	--components-approbationInbox-detail-container-display: contents;
+	--components-approbationInbox-detail-headerMain-padding: var(--pr-t-spacings-150);
+	--components-approbationInbox-detail-headerMain-margin: 0 calc(var(--pr-t-spacings-150) * -1);
+	--components-approbationInbox-detail-gap: var(--pr-t-spacings-50);
+	--components-approbationInbox-detail-main-gap: var(--pr-t-spacings-150);
+	--components-approbationInbox-detail-header-main-block-content-paddingBlockEnd: var(--pr-t-spacings-150);
+	--components-approbationInbox-detail-header-minBlockSize: 0;
+
+	.dialog-inside-content:has(&) {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.approbationInbox-detail-main-block-divider.divider {
+		margin: var(--components-divider-margin);
+	}
+}
+
+@mixin outsideDialogMediaMaxM {
+	display: none;
+}
+
+@mixin listMediaMinS {
+	--components-approbationInbox-list-marginInlineEnd: var(--pr-t-spacings-400);
+	--components-approbationInbox-list-marginInlineStart: var(--pr-t-spacings-400);
+}
+
+@mixin listMediaMinM {
+	--components-approbationInbox-list-inlineSize: 17rem;
+	--components-approbationInbox-list-marginInlineEnd: 0;
+}
+
+@mixin listMediaMinL {
+	--components-approbationInbox-list-inlineSize: 22.5rem;
+}
+
+@mixin listMediaMaxM {
+	--components-approbationInbox-list-footer-backgroundColor: var(--pr-t-elevation-surface-raised);
+	--components-approbationInbox-list-footer-borderRadius: 0;
+	--components-approbationInbox-list-footer-marginBlock: var(--pr-t-spacings-150) calc(var(--pr-t-spacings-300) * -1);
+	--components-approbationInbox-list-footer-paddingBlock: var(--pr-t-spacings-100) var(--pr-t-spacings-200);
+	--components-approbationInbox-list-footer-paddingInline: var(--pr-t-spacings-400);
+	--components-approbationInbox-list-footer-marginInline: calc(var(--components-approbationInbox-list-footer-paddingInline) * -1);
+}
+
+@mixin listMediaMaxS {
+	--components-approbationInbox-list-footer-paddingInline: var(--pr-t-spacings-300);
+}
+
+@mixin blockLastChild {
+	--components-approbationInbox-detail-header-main-block-content-paddingBlockEnd: 0;
+
+	.approbationInbox-detail-main-block-divider.divider {
+		--components-divider-display: none;
+	}
+}
+
+@mixin mainLayoutSidebar {
+	overflow: visible;
+}
+
+@mixin mainLayoutSidebarMediaMaxM {
+	block-size: 100%;
+}
+
+@mixin detailMediaMaxL {
+	--components-approbationInbox-detail-header-main-flexWrap: wrap;
+}

package/src/components/approbationInbox/states.scss

@@ -0,0 +1,20 @@
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin focusVisible {
+	&::before {
+		@include a11y.focusVisible;
+	}
+}
+
+@mixin selected {
+	--components-approbationInbox-list-content-items-item-content-before-background: var(--palettes-50, var(--palettes-product-50));
+	--components-approbationInbox-list-content-items-item-content-before-boxShadow: 0 0 0 1px var(--palettes-500, var(--palettes-product-500));
+}
+
+@mixin current {
+	--components-approbationInbox-list-content-items-item-content-before-boxShadow: 0 0 0 1px var(--palettes-400, var(--palettes-product-400)), 0 0 0 1px var(--palettes-400, var(--palettes-product-400)) inset;
+}
+
+@mixin empty {
+	--components-approbationInbox-detail-empty-display: flex;
+}

package/src/components/approbationInbox/vars.scss

@@ -0,0 +1,29 @@
+@mixin vars {
+	--components-approbationInbox-list-marginInlineEnd: var(--pr-t-spacings-200);
+	--components-approbationInbox-list-marginInlineStart: var(--pr-t-spacings-200);
+	--components-approbationInbox-list-inlineSize: auto;
+	--components-approbationInbox-list-content-groupOptional-header-action-icon-backgroundColor: transparent;
+	--components-approbationInbox-list-content-groupOptional-content-display: flex;
+	--components-approbationInbox-list-content-groupOptional-marginBlockStart: var(--pr-t-spacings-50);
+	--components-approbationInbox-list-content-items-item-content-info-alignItems: start;
+	--components-approbationInbox-list-content-items-item-content-before-background: var(--pr-t-elevation-surface-raised);
+	--components-approbationInbox-list-content-items-item-content-before-boxShadow: var(--pr-t-elevation-shadow-raised);
+	--components-approbationInbox-list-footer-backgroundColor: var(--pr-t-elevation-surface-sunken);
+	--components-approbationInbox-list-footer-borderRadius: var(--pr-t-border-radius-structure);
+	--components-approbationInbox-list-footer-paddingInline: var(--pr-t-spacings-100);
+	--components-approbationInbox-list-footer-paddingBlock: var(--pr-t-spacings-100);
+	--components-approbationInbox-list-footer-marginInline: 0;
+	--components-approbationInbox-list-footer-marginBlock: 0;
+
+	--components-approbationInbox-detail-header-main-actions-display: flex;
+	--components-approbationInbox-detail-main-gap: var(--pr-t-spacings-300);
+	--components-approbationInbox-detail-header-main-block-content-paddingBlockEnd: var(--pr-t-spacings-300);
+	--components-approbationInbox-detail-container-display: flex;
+	--components-approbationInbox-detail-headerMain-padding: var(--pr-t-spacings-300);
+	--components-approbationInbox-detail-gap: var(--pr-t-spacings-200);
+	--components-approbationInbox-detail-headerMain-margin: 0;
+	--components-approbationInbox-detail-header-main-delegation-marginBlockStart: var(--pr-t-spacings-150);
+	--components-approbationInbox-detail-empty-display: none;
+	--components-approbationInbox-detail-header-main-flexWrap: nowrap;
+	--components-approbationInbox-detail-header-minBlockSize: calc(var(--components-approbationInbox-detail-headerMain-padding) * 2 + var(--pr-t-spacings-600) + var(--pr-t-spacings-50));
+}

package/src/components/button/states.scss

@@ -31,6 +31,10 @@
 	&,
 	&:disabled {
 		--components-button-color: transparent;
+
+		.lucca-icon {
+			color: transparent;
+		}
 	}
 
 	.numericBadge {
@@ -74,8 +78,8 @@
 		@include icon.generate('sign_confirm');
 
 		color: var(--palettes-neutral-0);
-		font-size: calc(1.5 * var(--pr-t-font-body-M-fontSize));
-		block-size: var(--pr-t-font-body-M-lineHeight);
+		font-size: calc(1.5 * var(--components-button-font-size));
+		block-size: var(--components-button-line-height);
 		inset: 0;
 		margin: auto;
 		position: absolute;

package/src/components/calloutPopover/component.scss

@@ -33,7 +33,7 @@
 		}
 
 		.calloutPopover-overlay {
-			max-inline-size: calc(100vw - (var(--pr-t-spacings-200) * 2));
+			max-inline-size: calc(100vi - (var(--pr-t-spacings-200) * 2));
 			display: flex;
 			gap: var(--pr-t-spacings-100);
 

package/src/components/color/component.scss

@@ -54,18 +54,19 @@
 }
 
 @mixin componentPanel($atRoot: namespace.$defaultAtRoot) {
-	.lu-picker-content {
+	.lu-select-panel-layout-content {
 		.cdk-overlay-pane:has(&) {
 			min-inline-size: 0 !important;
 			inline-size: 17rem;
 		}
 	}
 
-	.lu-picker-content-option {
+	// Options are now projected into the listbox wrapper; lay them out as a wrapping swatch grid.
+	.listboxOptionWrapper {
 		flex-direction: row;
 		display: flex;
 		flex-wrap: wrap;
-		padding: var(--pr-t-spacings-100);
+		padding: var(--pr-t-spacings-50);
 		gap: 0;
 	}
 
@@ -77,7 +78,7 @@
 		.colorPanel-highlighted {
 			display: flex;
 			padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100);
-			margin: 0 var(--pr-t-spacings-100) var(--pr-t-spacings-100);
+			margin: var(--pr-t-spacings-50);
 			gap: var(--pr-t-spacings-50);
 		}
 	}

package/src/components/color/index.scss

@@ -23,7 +23,9 @@
 			@include selected;
 		}
 
-		.lu-picker-panel .optionItem.is-highlighted & {
+		// The option's highlight (keyboard + hover) now lives as `is-highlighted` on the
+		// `luCoreSelectPanelElement` host, so the picker/optionItem selectors no longer apply.
+		.is-highlighted & {
 			@include highlighted;
 		}
 	}

package/src/components/color/mods.scss

@@ -37,7 +37,7 @@
 		padding: 0;
 	}
 
-	.optionItem-value {
+	.listboxOption-content {
 		padding: 0;
 		background-color: transparent !important;
 

package/src/components/comment/component.scss

@@ -49,13 +49,15 @@
 		}
 
 		.comment-infos-name {
-			color: var(--pr-t-color-text);
-
-			& + .comment-infos-date {
-				&::before {
-					color: var(--palettes-neutral-400);
-					padding-inline: 1ch;
-					content: var(--components-comment-info-separator) / '';
+			&:not(:empty) {
+				color: var(--pr-t-color-text);
+
+				& + .comment-infos-date {
+					&::before {
+						color: var(--palettes-neutral-400);
+						padding-inline: 1ch;
+						content: var(--components-comment-info-separator) / '';
+					}
 				}
 			}
 		}
@@ -77,6 +79,7 @@
 			margin-block-end: 0;
 			overflow-wrap: anywhere;
 			font: var(--components-comment-text-font);
+			white-space: var(--components-comment-text-whiteSpace);
 		}
 
 		.comment-content-textContainerOptional {

package/src/components/comment/index.scss

@@ -17,6 +17,10 @@
 			@include noAvatar;
 		}
 
+		&.mod-plainText {
+			@include plainText;
+		}
+
 		&:has(.comment-infos) {
 			@include container.max(25rem, $name: 'comment') {
 				@include narrow;

package/src/components/comment/mods.scss

@@ -57,3 +57,7 @@
 		margin-inline: 0 var(--components-comment-content-margin);
 	}
 }
+
+@mixin plainText {
+	--components-comment-text-whiteSpace: pre-line;
+}

package/src/components/comment/vars.scss

@@ -1,5 +1,6 @@
 @mixin vars {
 	--components-comment-max-width: 66ch;
+	--components-comment-text-whiteSpace: normal;
 	--components-comment-text-font: var(--pr-t-font-body-M);
 	--components-comment-margin: 0;
 	--components-comment-content-margin: calc(1.5rem + var(--pr-t-spacings-100)); // 1.5rem for the width of the avatar and 0.5rem for the gap

package/src/components/container/mods.scss

@@ -4,7 +4,7 @@
 
 // deprecated
 @mixin S {
-	--commons-container-padding: 0 var(--pr-t-spacings-200);
+	--commons-container-paddingInline: var(--pr-t-spacings-200);
 }
 
 @mixin maxM {

package/src/components/dataTable/mods.scss

@@ -131,6 +131,11 @@
 			@include button.critical;
 		}
 
+		&.is-loading {
+			@include button.loadingS;
+			@include button.loadingGhost;
+		}
+
 		transition-property: box-shadow, color;
 	}
 

package/src/components/dateRangeField/mods.scss

@@ -48,7 +48,7 @@
 	}
 
 	.dateRangeField-fieldset-arrow {
-		left: calc(50% - var(--pr-t-spacings-100) - var(--pr-t-spacings-25));
+		inset-inline-start: calc(50% - var(--pr-t-spacings-100) - var(--pr-t-spacings-25));
 	}
 
 	.dateRangeField-fieldset-textField.textField {

package/src/components/dialog/component.scss

@@ -26,7 +26,7 @@
 	translate: var(--components-dialog-translateX) var(--components-dialog-translateY);
 	scale: var(--components-dialog-scale);
 
-	@supports not (height: 1dvh) {
+	@supports not (height: 1dvb) {
 		--components-dialog-maxHeight: var(--components-dialog-maxHeightFallback);
 	}
 
@@ -122,6 +122,10 @@
 			&.footer {
 				@include footer.insideDialog;
 			}
+
+			.icon-menuDots {
+				display: var(--components-dialog-inside-footer-actions-button-icon-menuDots-display) !important;
+			}
 		}
 
 		.dialog-inside-header {
@@ -158,8 +162,13 @@
 			padding-inline: var(--components-dialog-insideContent-paddingInline);
 			grid-area: overflow;
 			overflow: var(--components-dialog-insideContent-overflow);
+			flex-grow: var(--components-dialog-insideContent-flexGrow);
 			display: block;
 			outline: none;
+
+			&:empty {
+				display: none;
+			}
 		}
 
 		.dialog-inside-header-container {

package/src/components/dialog/index.scss

@@ -48,11 +48,21 @@
 
 			&:where(.mod-fromBottom) {
 				@include fromBottom;
+
+				&:where(.mod-sheet) {
+					@include sheet;
+
+					@include media.max('XXS') {
+						@include sheetNarrow;
+					}
+				}
 			}
 
-			@include media.max('S') {
-				@include fromBottom;
-				@include maxContent;
+			&:where(:not(.mod-sheet)) {
+				@include media.max('S') {
+					@include fromBottom;
+					@include maxContent;
+				}
 			}
 		}
 
@@ -64,6 +74,11 @@
 			@include withAction;
 		}
 
+		&:not(:has(.dialog-inside-content)),
+		&:has(.dialog-inside-content:empty) {
+			@include noContent;
+		}
+
 		&:has(.horizontalNavigation) {
 			@include withHorizontalNavigation;
 		}

package/src/components/dialog/mods.scss

@@ -34,7 +34,7 @@
 	--components-dialog-maxHeight: none;
 	--components-dialog-maxHeightFallback: var(--components-dialog-maxHeight);
 	--components-dialog-height: calc(100% - var(--pr-t-spacings-100) * 2);
-	--components-dialog-maxWidth: calc(100vw - var(--pr-t-spacings-200) - var(--commons-pushPanel-inlineSize));
+	--components-dialog-maxWidth: calc(100vi - var(--pr-t-spacings-200) - var(--commons-pushPanel-inlineSize));
 	--components-dialog-borderRadius: var(--pr-t-border-radius-structure);
 	--components-dialog-inset: var(--pr-t-spacings-100) calc(var(--pr-t-spacings-100) + var(--commons-pushPanel-inlineSize)) var(--pr-t-spacings-100) auto;
 	--components-dialog-translateX: var(--components-dialog-translate);
@@ -46,7 +46,8 @@
 
 @mixin fromBottom {
 	--components-dialog-animationOpening: slideFromBottom;
-	--components-dialog-maxHeight: calc(100dvh - var(--pr-t-spacings-200));
+	--components-dialog-maxHeight: calc(100dvb - var(--pr-t-spacings-200));
+	// stylelint-disable-next-line unit-layout-mappings -- Physical fallback: browsers without `dvb` do not support `vb` either.
 	--components-dialog-maxHeightFallback: calc(100vh - var(--pr-t-spacings-200));
 	--components-dialog-maxWidth: none;
 	--components-dialog-inset: auto calc(var(--pr-t-spacings-100) + var(--commons-pushPanel-inlineSize)) var(--pr-t-spacings-100) var(--pr-t-spacings-100);
@@ -75,6 +76,26 @@
 	--components-dialog-inset: 0;
 }
 
+@mixin sheet {
+	--components-dialog-width: 100%;
+	--components-dialog-maxWidth: none;
+	--components-dialog-maxHeight: calc(100% - var(--pr-t-spacings-150));
+	--components-dialog-maxHeightFallback: var(--components-dialog-maxHeight);
+	--components-dialog-borderRadius: var(--pr-t-border-radius-structure) var(--pr-t-border-radius-structure) 0 0;
+	--components-dialog-inset: auto 0 0;
+}
+
+@mixin sheetNarrow {
+	--components-dialog-inside-footer-actions-button-icon-menuDots-display: none;
+	--components-dialog-inside-footer-actions-button-icon-mask-all: unset !important;
+
+	.icon-menuDots {
+		+ .pr-u-mask {
+			all: unset !important;
+		}
+	}
+}
+
 @mixin surfaceDefault {
 	--components-dialog-insideContent-background: var(--pr-t-elevation-surface-default);
 }
@@ -155,6 +176,11 @@
 
 @mixin withHorizontalNavigation {
 	--components-dialog-insideContent-overflow: none;
+	--components-dialog-insideContent-flexGrow: 1;
 	--components-dialog-inside-header-boxShadow: none;
 	--components-dialog-inside-header-paddingBlock: var(--pr-t-spacings-200) 0;
 }
+
+@mixin noContent {
+	--components-dialog-inside-header-boxShadow: none;
+}

package/src/components/dialog/vars.scss

@@ -2,8 +2,9 @@
 	--components-dialog-size: 40rem;
 	--components-dialog-width: var(--components-dialog-size);
 	--components-dialog-height: fit-content;
-	--components-dialog-maxWidth: calc(100vw - (var(--pr-t-spacings-200) * 2) - var(--commons-pushPanel-inlineSize));
-	--components-dialog-maxHeight: calc(100dvh - (var(--pr-t-spacings-200) * 2));
+	--components-dialog-maxWidth: calc(100vi - (var(--pr-t-spacings-200) * 2) - var(--commons-pushPanel-inlineSize));
+	--components-dialog-maxHeight: calc(100dvb - (var(--pr-t-spacings-200) * 2));
+	// stylelint-disable-next-line unit-layout-mappings -- Physical fallback: browsers without `dvb` do not support `vb` either.
 	--components-dialog-maxHeightFallback: calc(100vh - (var(--pr-t-spacings-200) * 2));
 	--components-dialog-borderRadius: var(--pr-t-border-radius-structure);
 	--components-dialog-inset: 0 var(--commons-pushPanel-inlineSize) 0 0;
@@ -20,6 +21,7 @@
 	--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-insideContent-flexGrow: 0;
 	--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);
@@ -41,4 +43,5 @@
 	--components-dialog-inside-header-button-insetInlineEnd: var(--pr-t-spacings-300);
 	--components-dialog-inside-header-marginBlock: 0px;
 	--components-dialog-inside-footer-marginBlock: 0px;
+	--components-dialog-inside-footer-actions-button-icon-menuDots-display: block;
 }

package/src/components/divider/component.scss

@@ -3,7 +3,7 @@
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	border: 0;
-	display: block;
+	display: var(--components-divider-display);
 	margin: var(--components-divider-margin);
 	align-self: var(--components-divider-alignSelf);
 

package/src/components/divider/vars.scss

@@ -8,6 +8,7 @@
 	--components-divider-iconBottom: 0;
 	--components-divider-justify: normal;
 	--components-divider-alignSelf: '';
+	--components-divider-display: block;
 
 	// Deprecated
 	--components-divider-fontSize: var(--pr-t-font-body-M-fontSize);

package/src/components/dropdown/component.scss

@@ -66,11 +66,11 @@
 			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);
-			text-align: left;
+			text-align: start;
 			transition: background-color var(--commons-animations-durations-fast);
 			text-decoration: none;
 			inline-size: 100%;
-			pointer-events: var(--components-dropdown-list-option-action-pointerEvents);
+			pointer-events: auto;
 			cursor: pointer;
 
 			.lucca-icon {

package/src/components/dropdown/states.scss

@@ -1,7 +1,6 @@
 @mixin disabled {
 	--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 {

package/src/components/dropdown/vars.scss

@@ -2,9 +2,8 @@
 	--components-dropdown-minInlineSize: 10rem;
 
 	--components-dropdown-maxInlineSize: 30rem;
-	--components-dropdown-maxBlockSize: min(60vh, 30rem);
+	--components-dropdown-maxBlockSize: min(60vb, 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/emptyState/vars.scss

@@ -1,5 +1,5 @@
 @mixin vars {
-	--components-emptyState-container-maxWidth: calc(100vw - var(--commons-navSide-width) - 7rem);
+	--components-emptyState-container-maxWidth: calc(100vi - var(--commons-navSide-width) - 7rem);
 	--components-emptyState-container-left: calc(var(--commons-navSide-width) + var(--pr-t-spacings-400));
 	--components-emptyState-container-position: static;
 

package/src/components/errorPage/component.scss

@@ -2,8 +2,8 @@
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: var(--components-errorPage-background);
-	block-size: 100vh;
-	inline-size: 100vw;
+	block-size: 100vb;
+	inline-size: 100vi;
 	line-height: 1.2;
 	overflow: hidden;
 	display: block;
@@ -14,7 +14,7 @@
 			max-inline-size: 1200px;
 			padding-block: 0;
 			padding-inline: var(--pr-t-spacings-400);
-			inline-size: 100vw;
+			inline-size: 100vi;
 			margin-block: 0;
 			margin-inline: auto;
 			display: flex;
@@ -23,8 +23,8 @@
 		}
 
 		.errorPage-section-info {
-			margin-block-start: 10vh;
-			max-inline-size: 90vw;
+			margin-block-start: 10vb;
+			max-inline-size: 90vi;
 			inline-size: 450px;
 			padding-inline-end: var(--pr-t-spacings-400);
 		}
@@ -41,7 +41,7 @@
 		}
 
 		.errorPage-section-image {
-			margin-block-start: 10vh;
+			margin-block-start: 10vb;
 			inline-size: 50%;
 			max-inline-size: 580px;
 			min-inline-size: 350px;

package/src/components/errorPage/index.scss

@@ -16,8 +16,8 @@
 			@include narrow;
 		}
 
-		.appLayout & {
-			@include inAppLayout;
+		:is(.appLayout, .dialog) & {
+			@include nested;
 		}
 	}
 }

package/src/components/errorPage/mods.scss

@@ -26,7 +26,7 @@
 	}
 }
 
-@mixin inAppLayout {
+@mixin nested {
 	&,
 	.errorPage-section {
 		block-size: 100%;

package/src/components/fancyBox/component.scss

@@ -39,14 +39,14 @@
 			}
 
 			&::before {
-				transition-property: width, height, bottom, left;
+				transition-property: inline-size, block-size, inset-block-end, inset-inline-start;
 				inset-block-end: var(--components-fancyBox-offsetBlock);
 				inset-inline-start: var(--components-fancyBox-offsetInline);
 				background-image: var(--components-fancyBox-background-left);
 			}
 
 			&::after {
-				transition-property: width, height, top, right;
+				transition-property: inline-size, block-size, inset-block-start, inset-inline-end;
 				inset-block-start: var(--components-fancyBox-offsetBlock);
 				inset-inline-end: var(--components-fancyBox-offsetInline);
 				background-image: var(--components-fancyBox-background-right);
@@ -62,7 +62,7 @@
 			inset-inline-end: var(--components-fancyBox-offsetInline);
 			background-image: var(--components-fancyBox-foreground);
 			background-size: contain;
-			transition-property: width, height, top, right;
+			transition-property: inline-size, block-size, inset-block-start, inset-inline-end;
 			transition-duration: var(--commons-animations-durations-slow);
 			pointer-events: none;
 		}

package/src/components/field/vars.scss

@@ -30,7 +30,7 @@
 	--components-field-framed-label-top-offset: var(--pr-t-spacings-100);
 	--components-field-framed-textarea-height: 8.5rem;
 	--components-field-framed-textarea-min-height: 5.5rem;
-	--components-field-framed-textarea-max-height: 80vh;
+	--components-field-framed-textarea-max-height: 80vb;
 	--components-field-framed-title-font-size: var(--pr-t-font-heading-3-fontSize);
 	--components-field-framed-title-line-height: var(--pr-t-font-heading-3-lineHeight);
 	--components-field-framed-suffix-padding-inline-end: var(--pr-t-spacings-600);

package/src/components/filterBar/component.scss

@@ -24,7 +24,9 @@
 		.filterBar-divider.divider {
 			@include divider.vertical;
 
-			margin-inline: var(--pr-t-spacings-50);
+			margin-inline: 0;
+
+			--components-divider-marginBlock: var(--pr-t-spacings-50);
 
 			&:last-child {
 				display: none;
@@ -51,6 +53,8 @@
 			margin-inline-start: auto;
 			padding-inline-start: var(--pr-t-spacings-200);
 			flex-shrink: 0;
+			display: flex;
+			gap: var(--pr-t-spacings-100);
 		}
 	}
 }