From de7f4b869c8efecdeb9735cf3161e3e5989d7b93 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Thu, 11 Sep 2025 15:04:57 -0700
Subject: [PATCH 1/5] fix(@clayui/css): LPD-64729 Sidebar prints properties
 twice

---
 .../clay-css/src/scss/mixins/_sidebar.scss    | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/packages/clay-css/src/scss/mixins/_sidebar.scss b/packages/clay-css/src/scss/mixins/_sidebar.scss
index 493c05ce6e..acc9789142 100644
--- a/packages/clay-css/src/scss/mixins/_sidebar.scss
+++ b/packages/clay-css/src/scss/mixins/_sidebar.scss
@@ -112,6 +112,12 @@
 			)
 		);
 
+		@each $key, $value in $base {
+			@if (type-of($value) != 'map') {
+				$map: map-remove($map, $key);
+			}
+		}
+
 		$panel: map-merge(
 			setter(map-get($map, sidebar-panel), ()),
 			setter(map-get($map, panel), ())
@@ -128,40 +134,57 @@
 			)
 		);
 
+		$map: map-remove($map, sidebar-panel, panel);
+
 		$header: map-merge(
 			setter(map-get($map, sidebar-header), ()),
 			setter(map-get($map, header), ())
 		);
 
+		$map: map-remove($map, sidebar-header, header);
+
 		$header-component-title: map-merge(
 			setter(map-get($header, component-title), ()),
 			setter(map-get($map, component-header-title), ())
 		);
 
+		$map: map-remove($map, component-title, component-header-title);
+
 		$header-component-subtitle: map-merge(
 			setter(map-get($header, component-subtitle), ()),
 			setter(map-get($map, component-header-subtitle), ())
 		);
 
+		$map: map-remove($map, component-subtitle, component-header-subtitle);
+
 		$body: map-merge(
 			setter(map-get($map, sidebar-body), ()),
 			setter(map-get($map, body), ())
 		);
 
+		$map: map-remove($map, sidebar-body, body);
+
 		$footer: map-merge(
 			setter(map-get($map, sidebar-footer), ()),
 			setter(map-get($map, footer), ())
 		);
 
+		$map: map-remove($map, sidebar-footer, footer);
+
 		$dt: map-merge(
 			setter(map-get($map, sidebar-dt), ()),
 			setter(map-get($map, dt), ())
 		);
+
+		$map: map-remove($map, sidebar-dt, dt);
+
 		$dd: map-merge(
 			setter(map-get($map, sidebar-dd), ()),
 			setter(map-get($map, dd), ())
 		);
 
+		$map: map-remove($map, sidebar-dd, dd);
+
 		$nav-nested: setter(map-get($map, nav-nested), ());
 
 		$nav-nested-nav-link: map-merge(
@@ -169,8 +192,12 @@
 			setter(map-get($map, nav-nested-link), ())
 		);
 
+		$map: map-remove($map, nav-link, nav-nested, nav-nested-link);
+
 		$sidebar-list-group: setter(map-get($map, sidebar-list-group), ());
 
+		$map: map-remove($map, sidebar-list-group);
+
 		$sidebar-list-group-item: setter(
 			map-get($sidebar-list-group, list-group-item),
 			()
@@ -199,36 +226,63 @@
 			)
 		);
 
+		$map: map-remove(
+			$map,
+			list-group-item,
+			sidebar-list-group-item-bg,
+			sidebar-list-group-item-border-color
+		);
+
 		$sidebar-list-group-title: map-merge(
 			setter(map-get($sidebar-list-group, list-group-title), ()),
 			setter(map-get($map, sidebar-list-group-title), ())
 		);
 
+		$map: map-remove($map, list-group-title, sidebar-list-group-title);
+
 		$sidebar-list-group-subtitle: map-merge(
 			setter(map-get($sidebar-list-group, list-group-subtitle), ()),
 			setter(map-get($map, sidebar-list-group-subtitle), ())
 		);
 
+		$map: map-remove(
+			$map,
+			list-group-subtitle,
+			sidebar-list-group-subtitle
+		);
+
 		$sidebar-list-group-text: map-merge(
 			setter(map-get($sidebar-list-group, list-group-text), ()),
 			setter(map-get($map, sidebar-list-group-text), ())
 		);
 
+		$map: map-remove($map, list-group-text, sidebar-list-group-text);
+
 		$sidebar-list-group-subtext: map-merge(
 			setter(map-get($sidebar-list-group, list-group-subtext), ()),
 			setter(map-get($map, sidebar-list-group-subtext), ())
 		);
 
+		$map: map-remove($map, list-group-subtext, sidebar-list-group-subtext);
+
 		$sidebar-list-group-sticker: map-deep-merge(
 			map-get($sidebar-list-group, sticker),
 			map-get($map, sidebar-list-group-sticker)
 		);
 
+		$map: map-remove($map, sticker, sidebar-list-group-sticker);
+
 		$sidebar-list-group-sticker-secondary: map-deep-merge(
 			map-get($sidebar-list-group, sticker-secondary),
 			map-get($map, sidebar-list-group-sticker-secondary)
 		);
 
+		$map: map-remove(
+			$map,
+			sticker-secondary,
+			sidebar-list-group-sticker-secondary
+		);
+
 		@if ($enabled) {
 			@if (length($base) != 0) {
 				@include clay-css($base);
@@ -236,6 +290,7 @@
 
 			@at-root {
 				$_sidenav-start: map-get($map, sidenav-start);
+				$map: map-remove($map, sidenav-start);
 
 				@if ($_sidenav-start) {
 					#{clay-insert-before(clay-parent(&), '.sidenav-start ')},
@@ -255,6 +310,7 @@
 				}
 
 				$_sidenav-end: map-get($map, sidenav-right);
+				$map: map-remove($map, sidenav-right);
 
 				@if ($_sidenav-end) {
 					#{clay-insert-before(clay-parent(&), '.sidenav-end ')},
@@ -275,6 +331,7 @@
 			}
 
 			$_focus: map-get($map, focus);
+			$map: map-remove($map, focus);
 
 			@if ($_focus) {
 				@at-root {
@@ -287,6 +344,7 @@
 			}
 
 			$_component-link: map-get($map, component-link);
+			$map: map-remove($map, component-link);
 
 			@if ($_component-link) {
 				.component-link {
@@ -295,6 +353,7 @@
 			}
 
 			$_close: map-get($map, close);
+			$map: map-remove($map, close);
 
 			@if ($_close) {
 				.close {
@@ -427,6 +486,7 @@
 			}
 
 			$_panel-unstyled: map-get($map, panel-unstyled);
+			$map: map-remove($map, panel-unstyled);
 
 			@if ($_panel-unstyled) {
 				.panel-unstyled {
@@ -435,6 +495,7 @@
 			}
 
 			$_component-navigation-bar: map-get($map, component-navigation-bar);
+			$map: map-remove($map, component-navigation-bar);
 
 			@if ($_component-navigation-bar) {
 				.component-navigation-bar {
@@ -443,6 +504,7 @@
 			}
 
 			$_panel-group: map-get($map, panel-group);
+			$map: map-remove($map, panel-group);
 
 			@if ($_panel-group) {
 				.panel-group {
@@ -451,6 +513,7 @@
 			}
 
 			$_btn: map-get($map, btn);
+			$map: map-remove($map, btn);
 
 			@if ($_btn) {
 				.btn {
@@ -459,6 +522,7 @@
 			}
 
 			$_form-control: map-get($map, form-control);
+			$map: map-remove($map, form-control);
 
 			@if ($_form-control) {
 				.form-control {
@@ -467,6 +531,7 @@
 			}
 
 			$_form-control-select: map-get($map, form-control-select);
+			$map: map-remove($map, form-control-select);
 
 			@if ($_form-control-select) {
 				select.form-control,
@@ -476,6 +541,7 @@
 			}
 
 			$_form-control-tag-group: map-get($map, form-control-tag-group);
+			$map: map-remove($map, form-control-tag-group);
 
 			@if ($_form-control-tag-group) {
 				.form-control-tag-group {
@@ -484,6 +550,7 @@
 			}
 
 			$_input-group: map-get($map, input-group);
+			$map: map-remove($map, input-group);
 
 			@if ($_input-group) {
 				.input-group {

From 3586e1bcedae7c0759a6c274ef6ab716f28636e2 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Fri, 12 Sep 2025 16:45:07 -0700
Subject: [PATCH 2/5] fix(@clayui/css): LPD-64729 Removes xxl breakpoint, it
 generates too many selectors

---
 packages/clay-css/src/scss/atlas/variables/_globals.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/clay-css/src/scss/atlas/variables/_globals.scss b/packages/clay-css/src/scss/atlas/variables/_globals.scss
index f9d9ce377a..5ead4360c6 100644
--- a/packages/clay-css/src/scss/atlas/variables/_globals.scss
+++ b/packages/clay-css/src/scss/atlas/variables/_globals.scss
@@ -408,7 +408,6 @@ $grid-breakpoints: (
 	md: 768px,
 	lg: 992px,
 	xl: 1280px,
-	xxl: 1360px,
 ) !default;
 
 // Grid columns

From 3406a1358de6c05edeb2e4eefd369cd83f25a6e4 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Fri, 12 Sep 2025 17:04:55 -0700
Subject: [PATCH 3/5] fix(@clayui/css): LPD-64729 c-slideout-fluid should push
 content the correct amount

---
 .../src/scss/cadmin/variables/_slideout.scss  | 47 +++++++++++++++
 .../src/scss/components/_slideout.scss        |  8 ---
 .../clay-css/src/scss/mixins/_slideout.scss   | 16 +++++
 .../src/scss/variables/_slideout.scss         | 59 +++++++++++--------
 4 files changed, 98 insertions(+), 32 deletions(-)

diff --git a/packages/clay-css/src/scss/cadmin/variables/_slideout.scss b/packages/clay-css/src/scss/cadmin/variables/_slideout.scss
index 9b4297933a..afe63916e3 100644
--- a/packages/clay-css/src/scss/cadmin/variables/_slideout.scss
+++ b/packages/clay-css/src/scss/cadmin/variables/_slideout.scss
@@ -6,6 +6,10 @@ $cadmin-c-slideout-tbar-stacked-min-width: 40px !default;
 
 $cadmin-c-slideout-tbar-stacked-min-width-mobile: 40px !default;
 
+$cadmin-c-slideout-fluid-sidebar-width-md: '50vw' !default;
+
+$cadmin-c-slideout-fluid-sidebar-width: '33vw' !default;
+
 // C Slideout Transitions
 
 $cadmin-c-slideout-transition-in: () !default;
@@ -142,6 +146,49 @@ $cadmin-c-slideout-sm-down: map-deep-merge(
 	$cadmin-c-slideout-sm-down
 );
 
+$cadmin-c-slideout-fluid: () !default;
+$cadmin-c-slideout-fluid: map-deep-merge(
+	(
+		'&.c-slideout-push-start': (
+			padding-left: $cadmin-c-slideout-fluid-sidebar-width,
+		),
+		'&.c-slideout-push-end': (
+			padding-right: $cadmin-c-slideout-fluid-sidebar-width,
+		),
+		sidebar: (
+			max-width: $cadmin-c-slideout-fluid-sidebar-width,
+			width: $cadmin-c-slideout-fluid-sidebar-width,
+		),
+		media-breakpoint-down: (
+			md: (
+				'&.c-slideout-push-start': (
+					padding-left: $cadmin-c-slideout-fluid-sidebar-width-md,
+				),
+				'&.c-slideout-push-end': (
+					padding-right: $cadmin-c-slideout-fluid-sidebar-width-md,
+				),
+				sidebar: (
+					max-width: $cadmin-c-slideout-fluid-sidebar-width-md,
+					width: $cadmin-c-slideout-fluid-sidebar-width-md,
+				),
+			),
+			sm: (
+				'&.c-slideout-push-start': (
+					padding-left: 0,
+				),
+				'&.c-slideout-push-end': (
+					padding-right: 0,
+				),
+				sidebar: (
+					max-width: none,
+					width: 100vw,
+				),
+			),
+		),
+	),
+	$cadmin-c-slideout-fluid
+);
+
 // C Slideout Start
 
 $cadmin-c-slideout-start: () !default;
diff --git a/packages/clay-css/src/scss/components/_slideout.scss b/packages/clay-css/src/scss/components/_slideout.scss
index 34cc46684a..3140017b88 100644
--- a/packages/clay-css/src/scss/components/_slideout.scss
+++ b/packages/clay-css/src/scss/components/_slideout.scss
@@ -36,14 +36,6 @@
 
 .c-slideout-fluid {
 	@include clay-slideout-variant($c-slideout-fluid);
-
-	@include media-breakpoint-up(md) {
-		@include clay-slideout-variant($c-slideout-fluid-md-up);
-	}
-
-	@include media-breakpoint-up(xxl) {
-		@include clay-slideout-variant($c-slideout-fluid-xxl-up);
-	}
 }
 
 .c-slideout-start {
diff --git a/packages/clay-css/src/scss/mixins/_slideout.scss b/packages/clay-css/src/scss/mixins/_slideout.scss
index 8ec157d851..7233c22602 100644
--- a/packages/clay-css/src/scss/mixins/_slideout.scss
+++ b/packages/clay-css/src/scss/mixins/_slideout.scss
@@ -25,6 +25,22 @@
 				@include clay-css($map);
 			}
 
+			$_c-slideout-push-start: map-get($map, '&.c-slideout-push-start');
+
+			@if ($_c-slideout-push-start) {
+				&.c-slideout-push-start {
+					@include clay-css($_c-slideout-push-start);
+				}
+			}
+
+			$_c-slideout-push-end: map-get($map, '&.c-slideout-push-end');
+
+			@if ($_c-slideout-push-end) {
+				&.c-slideout-push-end {
+					@include clay-css($_c-slideout-push-end);
+				}
+			}
+
 			$_c-slideout-shown: map-get($map, c-slideout-shown);
 
 			@if ($_c-slideout-shown) {
diff --git a/packages/clay-css/src/scss/variables/_slideout.scss b/packages/clay-css/src/scss/variables/_slideout.scss
index 84178a879f..0274066756 100644
--- a/packages/clay-css/src/scss/variables/_slideout.scss
+++ b/packages/clay-css/src/scss/variables/_slideout.scss
@@ -6,9 +6,9 @@ $c-slideout-tbar-stacked-min-width: 40px !default;
 
 $c-slideout-tbar-stacked-min-width-mobile: 40px !default;
 
-$c-slideout-fluid-width-md: '50vw' !default;
+$c-slideout-fluid-sidebar-width-md: '50vw' !default;
 
-$c-slideout-fluid-width-xxl: '33vw' !default;
+$c-slideout-fluid-sidebar-width: '33vw' !default;
 
 // C Slideout Transitions
 
@@ -149,33 +149,44 @@ $c-slideout-sm-down: map-deep-merge(
 $c-slideout-fluid: () !default;
 $c-slideout-fluid: map-deep-merge(
 	(
-		sidebar: (
-			width: 100vw,
+		'&.c-slideout-push-start': (
+			padding-left: $c-slideout-fluid-sidebar-width,
 		),
-	),
-	$c-slideout-fluid
-);
-
-$c-slideout-fluid-md-up: () !default;
-$c-slideout-fluid-md-up: map-deep-merge(
-	(
-		sidebar: (
-			width: $c-slideout-fluid-width-md,
-			max-width: $c-slideout-fluid-width-md,
+		'&.c-slideout-push-end': (
+			padding-right: $c-slideout-fluid-sidebar-width,
 		),
-	),
-	$c-slideout-fluid-md-up
-);
-
-$c-slideout-fluid-xxl-up: () !default;
-$c-slideout-fluid-xxl-up: map-deep-merge(
-	(
 		sidebar: (
-			width: $c-slideout-fluid-width-xxl,
-			max-width: $c-slideout-fluid-width-xxl,
+			max-width: $c-slideout-fluid-sidebar-width,
+			width: $c-slideout-fluid-sidebar-width,
+		),
+		media-breakpoint-down: (
+			md: (
+				'&.c-slideout-push-start': (
+					padding-left: $c-slideout-fluid-sidebar-width-md,
+				),
+				'&.c-slideout-push-end': (
+					padding-right: $c-slideout-fluid-sidebar-width-md,
+				),
+				sidebar: (
+					max-width: $c-slideout-fluid-sidebar-width-md,
+					width: $c-slideout-fluid-sidebar-width-md,
+				),
+			),
+			sm: (
+				'&.c-slideout-push-start': (
+					padding-left: 0,
+				),
+				'&.c-slideout-push-end': (
+					padding-right: 0,
+				),
+				sidebar: (
+					max-width: none,
+					width: 100vw,
+				),
+			),
 		),
 	),
-	$c-slideout-fluid-xxl-up
+	$c-slideout-fluid
 );
 
 // C Slideout Start

From 7d52b80d465d3da861dc868ac5b972dee79e902b Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Fri, 12 Sep 2025 17:10:19 -0700
Subject: [PATCH 4/5] fix(@clayui/core): LPD-64729 SidePanel moves
 c-slideout-fluid class to container

---
 packages/clay-core/src/side-panel/SidePanel.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/clay-core/src/side-panel/SidePanel.tsx b/packages/clay-core/src/side-panel/SidePanel.tsx
index d111db3c4d..cb3cf44a3a 100644
--- a/packages/clay-core/src/side-panel/SidePanel.tsx
+++ b/packages/clay-core/src/side-panel/SidePanel.tsx
@@ -194,6 +194,10 @@ export function SidePanel({
 
 	useLayoutEffect(() => {
 		containerRef.current?.classList.add('c-slideout-container');
+
+		if (fluid) {
+			containerRef.current?.classList.add('c-slideout-fluid');
+		}
 	}, [containerRef.current]);
 
 	useEffect(() => {
@@ -235,7 +239,6 @@ export function SidePanel({
 				`c-slideout c-slideout-${position} c-slideout-push`,
 				{
 					'c-slideout-end': direction === 'right',
-					'c-slideout-fluid': fluid,
 					'c-slideout-start': direction === 'left',
 				}
 			)}

From f4c039b55f72343e0e88e5375207eb26cbdc8d97 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Fri, 12 Sep 2025 17:22:33 -0700
Subject: [PATCH 5/5] chore(@clayui/core): LPD-64729 SidePanel updates
 snapshots

---
 .../__tests__/__snapshots__/BasicRendering.tsx.snap           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/clay-core/src/side-panel/__tests__/__snapshots__/BasicRendering.tsx.snap b/packages/clay-core/src/side-panel/__tests__/__snapshots__/BasicRendering.tsx.snap
index 31b39983a4..fcb20042eb 100644
--- a/packages/clay-core/src/side-panel/__tests__/__snapshots__/BasicRendering.tsx.snap
+++ b/packages/clay-core/src/side-panel/__tests__/__snapshots__/BasicRendering.tsx.snap
@@ -271,10 +271,10 @@ exports[`SidePanel basic rendering render with custom width 1`] = `
 exports[`SidePanel basic rendering render with fluid width 1`] = `
 <div>
   <div
-    class="c-slideout-container"
+    class="c-slideout-container c-slideout-fluid"
   >
     <div
-      class="c-slideout c-slideout-absolute c-slideout-push c-slideout-end c-slideout-fluid"
+      class="c-slideout c-slideout-absolute c-slideout-push c-slideout-end"
     >
       <div
         aria-labelledby="clay-id-5"