@carbon/web-components 2.61.0 → 2.62.0-rc.0

package/es-custom/components/side-panel/side-panel.js

@@ -11,27 +11,28 @@ import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm
 import iconLoader from "../../globals/internal/icon-loader.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
-import "../button/button-set-base.js";
 import "../button/index.js";
 import "../icon-button/index.js";
+import "../action-set/index.js";
 import "../layer/index.js";
+import "../resizer/index.js";
 import { SIDE_PANEL_PLACEMENT, SIDE_PANEL_SIZE } from "./defs.js";
+import side_panel_default$1 from "./side-panel.scss.js";
 import { LitElement, html } from "lit";
-import { property, query, queryAssignedElements, state } from "lit/decorators.js";
-import Close20 from "@carbon/icons/es/close/20.js";
-import ArrowLeft16 from "@carbon/icons/es/arrow--left/16.js";
+import { property, query, state } from "lit/decorators.js";
+import ArrowLeft16 from "@carbon/icons/es/arrow--left/16";
+import Close16 from "@carbon/icons/es/close/16";
 import { moderate02 } from "@carbon/motion";
 //#region src/components/side-panel/side-panel.ts
 /**
+* @license
+*
 * Copyright IBM Corp. 2023, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-const PRECEDING = Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
-const FOLLOWING = Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
 const blockClass = `cds-custom--side-panel`;
-const blockClassActionSet = `cds-custom--action-set`;
 /**
 * Observes resize of the given element with the given resize observer.
 *
@@ -47,32 +48,8 @@ const observeResize = (observer, elem) => {
 	} };
 };
 /**
-* Tries to focus on the given elements and bails out if one of them is successful.
-*
-* @param elems The elements.
-* @param reverse `true` to go through the list in reverse order.
-* @returns `true` if one of the attempts is successful, `false` otherwise.
-*/
-function tryFocusElems(elems, reverse) {
-	if (!reverse) for (let i = 0; i < elems.length; ++i) {
-		const elem = elems[i];
-		elem.focus();
-		if (elem.ownerDocument.activeElement === elem) return true;
-	}
-	else for (let i = elems.length - 1; i >= 0; --i) {
-		const elem = elems[i];
-		elem.focus();
-		if (elem.ownerDocument.activeElement === elem) return true;
-	}
-	return false;
-}
-/**
 * SidePanel.
 *
-* @deprecated Use Carbon for IBM Products `side-panel` component.
-*   This component has been deprecated in `@carbon/web-components` and will instead be maintained
-*   in the Carbon for IBM Products library:
-*   https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components
 * @element cds-custom-side-panel
 * @csspart dialog The dialog.
 * @fires cds-custom-side-panel-beingclosed
@@ -93,20 +70,20 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 		this._hasSlug = false;
 		this._hasActionToolbar = false;
 		this._actionsCount = 0;
+		this._actionsMultiple = "";
 		this._slugCloseSize = "sm";
-		this._handleBlur = async ({ target, relatedTarget }) => {
-			const { open, _startSentinelNode: startSentinelNode, _endSentinelNode: endSentinelNode } = this;
-			const oldContains = target !== this && this.contains(target);
-			const currentContains = relatedTarget !== this && (this.contains(relatedTarget) || this.shadowRoot?.contains(relatedTarget) && relatedTarget !== startSentinelNode && relatedTarget !== endSentinelNode);
-			const { selectorTabbable: selectorTabbableForSidePanel } = this.constructor;
-			if (open && relatedTarget && oldContains && !currentContains) {
-				const comparisonResult = target.compareDocumentPosition(relatedTarget);
-				if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {
-					await this.constructor._delay();
-					if (!tryFocusElems(this.querySelectorAll(selectorTabbableForSidePanel), true) && relatedTarget !== this) this.focus();
-				} else if (relatedTarget === endSentinelNode || comparisonResult & FOLLOWING) {
-					await this.constructor._delay();
-					if (!tryFocusElems(this.querySelectorAll(selectorTabbableForSidePanel), true)) this.focus();
+		this._customHeaderElements = [];
+		this._customHeaderHidden = false;
+		this._accumulatedDelta = 0;
+		this._handleHostKeydown = (event) => {
+			if (event.key === "Tab" && !this.slideIn) {
+				const { first: _firstElement, last: _lastElement } = this.getFocusable();
+				if (event.shiftKey && (this.shadowRoot?.activeElement === _firstElement || document.activeElement === _firstElement)) {
+					event.preventDefault();
+					_lastElement?.focus();
+				} else if (!event.shiftKey && document.activeElement === _lastElement) {
+					event.preventDefault();
+					_firstElement?.focus();
 				}
 			}
 		};
@@ -130,7 +107,7 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 						if (this.placement === "left") newValues.marginInlineStart = `${this?._sidePanel?.offsetWidth}px`;
 						else newValues.marginInlineEnd = `${this?._sidePanel?.offsetWidth}px`;
 					}
-					Object.keys(newValues).forEach((key) => {
+					if (this.slideIn) Object.keys(newValues).forEach((key) => {
 						pageContentEl.style[key] = newValues[key];
 					});
 				}
@@ -138,28 +115,27 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 		};
 		this._checkSetOpen = () => {
 			const { _sidePanel: sidePanel } = this;
-			if (sidePanel && this._isOpen) if (this._reducedMotion) this._isOpen = false;
+			if (sidePanel && this._isOpen) if (this._reducedMotion?.matches) this._isOpen = false;
 			else sidePanel.addEventListener("transitionend", () => {
 				this._isOpen = false;
 			});
-			else this._isOpen = this.open;
+			else if (this.open) requestAnimationFrame(() => {
+				this._isOpen = this.open;
+			});
+			else this._isOpen = false;
 		};
 		this._checkUpdateIconButtonSizes = () => {
 			const slug = this.querySelector(`cds-custom-slug`);
 			const otherButtons = this?.shadowRoot?.querySelectorAll("#nav-back-button, #close-button");
-			let iconButtonSize = "sm";
-			if (slug || otherButtons?.length) {
-				if ((this?.querySelectorAll?.(`cds-custom-button[slot='actions']`))?.length && /l/.test(this.size)) iconButtonSize = "md";
+			const shouldUpgrade = (this?.querySelectorAll?.(`cds-custom-button[slot='actions']`))?.length && /l/.test(this.size);
+			if (slug && shouldUpgrade) slug.setAttribute("size", "md");
+			if (otherButtons) {
+				const iconButtonSize = shouldUpgrade ? "md" : "sm";
+				[...otherButtons].forEach((btn) => {
+					btn.setAttribute("size", iconButtonSize);
+				});
 			}
-			if (slug) slug?.setAttribute("size", iconButtonSize);
-			if (otherButtons) [...otherButtons].forEach((btn) => {
-				btn.setAttribute("size", iconButtonSize);
-			});
 		};
-		this._checkUpdateActionSizes = () => {
-			if (this._actions) for (let i = 0; i < this._actions.length; i++) this._actions[i].setAttribute("size", this.condensedActions ? "lg" : "xl");
-		};
-		this._maxActions = 3;
 		this._checkSetDoAnimateTitle = () => {
 			let canDoAnimateTitle = false;
 			if (this._sidePanel && this.open && this.animateTitle && this?.title?.length && !this._reducedMotion.matches) {
@@ -187,7 +163,62 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 		this._scrollObserver = () => {
 			const scrollTop = this._animateScrollWrapper?.scrollTop ?? 0;
 			const scrollAnimationDistance = this._getScrollAnimationDistance();
-			this?._sidePanel?.style?.setProperty(`--${blockClass}--scroll-animation-progress`, `${Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance}`);
+			const animationProgress = Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance;
+			this?._sidePanel?.style?.setProperty(`--${blockClass}--scroll-animation-progress`, `${animationProgress}`);
+			this._customHeaderHidden = animationProgress === 1;
+		};
+		this._handleResizeStart = () => {
+			this._sidePanelWidth = this._sidePanel?.clientWidth;
+			this._accumulatedDelta = 0;
+		};
+		this._handleResizeDrag = (event) => {
+			const { delta, isKeyboard, key } = event.detail;
+			if (!this._sidePanelWidth) this._sidePanelWidth = this._sidePanel?.clientWidth;
+			if (isKeyboard && (key === "Home" || key === "End")) {
+				if (key === "Home") this.style.setProperty("--cds-side-panel-modified-size", "75vw");
+				else this.style.setProperty("--cds-side-panel-modified-size", "16rem");
+				return;
+			}
+			let calculatedWidth;
+			if (isKeyboard) {
+				this._accumulatedDelta += delta;
+				calculatedWidth = this._sidePanelWidth - (this.placement === "right" ? this._accumulatedDelta : -this._accumulatedDelta);
+			} else calculatedWidth = this._sidePanelWidth - (this.placement === "right" ? delta : -delta);
+			if (this._sidePanel?.style) this._sidePanel.style.transition = "none";
+			const minWidth = 256;
+			const maxWidth = window.innerWidth * .75;
+			const newWidth = Math.max(minWidth, Math.min(maxWidth, calculatedWidth));
+			this.style.setProperty("--cds-side-panel-modified-size", `${newWidth}px`);
+		};
+		this._handleResizeEnd = () => {
+			this._accumulatedDelta = 0;
+			this._sidePanel?.style?.removeProperty("transition");
+			this._sidePanelWidth = this._sidePanel?.clientWidth;
+			if (this._resizerHandle) {
+				this._resizerHandle.setAttribute("aria-label", `side panel is covering ${this._getPanelWidthPercent()}% of screen`);
+				this._resizerHandle.setAttribute("aria-valuenow", this._getPanelWidthPercent().toString());
+			}
+		};
+		this._handleResizeReset = () => {
+			const sizeMap = {
+				xs: "16rem",
+				sm: "20rem",
+				md: "30rem",
+				lg: "40rem",
+				xl: "65rem",
+				"2xl": "80rem"
+			};
+			const defaultSize = sizeMap[this.size] || sizeMap.md;
+			const defaultSizeInPx = parseFloat(defaultSize) * 16;
+			this._sidePanelWidth = Math.min(defaultSizeInPx, window.innerWidth * .75);
+			this.style.removeProperty("--cds-side-panel-modified-size");
+		};
+		this._getPanelWidthPercent = (customWidth) => {
+			if (customWidth) {
+				const remInPixels = parseFloat(customWidth) * parseFloat(getComputedStyle(document.documentElement).fontSize);
+				return Math.round(remInPixels / window.innerWidth * 100);
+			}
+			return Math.round((this._sidePanel?.clientWidth || 0) / window.innerWidth * 100);
 		};
 		this._handleCurrentStepUpdate = () => {
 			const scrollable = this._animateScrollWrapper ?? this._innerContent;
@@ -195,6 +226,7 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 		};
 		this.animateTitle = true;
 		this.closeIconDescription = "Close";
+		this.closeIconTooltipAlignment = "left";
 		this.condensedActions = false;
 		this.includeOverlay = false;
 		this.navigationBackIconDescription = "Back";
@@ -202,8 +234,69 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 		this.placement = "right";
 		this.preventCloseOnClickOutside = false;
 		this.selectorPageContent = "";
+		this.hideCloseButton = false;
 		this.size = "md";
 		this.slideIn = false;
+		this.resizable = false;
+	}
+	/**
+	* Get focusable elements.
+	*
+	* Querying all tabbable items.
+	*
+	* @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.
+	*/
+	getFocusable() {
+		const elements = [];
+		if (this.currentStep > 0) {
+			const backButton = this.shadowRoot?.querySelector(`.${blockClass}__navigation-back-button`);
+			if (backButton) elements.push(backButton);
+		}
+		const aboveTitleSlot = this.shadowRoot?.querySelector("slot[name=\"above-title\"]");
+		if (aboveTitleSlot) {
+			const aboveTitleElements = aboveTitleSlot.assignedElements({ flatten: true }).flatMap((el) => Array.from(el.querySelectorAll(selectorTabbable)));
+			elements.push(...aboveTitleElements);
+		}
+		const labelText = this.shadowRoot?.querySelector(`.${blockClass}__label-text`);
+		if (labelText) elements.push(labelText);
+		const titleText = this.shadowRoot?.querySelector(`.${blockClass}__title-text`);
+		if (titleText) elements.push(titleText);
+		if (this._hasSlug) {
+			const slugElements = Array.from(this.querySelectorAll(`cds-custom-slug`));
+			elements.push(...slugElements);
+		}
+		if (!this.hideCloseButton) {
+			const closeButton = this.shadowRoot?.querySelector(`.${blockClass}__close-button`);
+			if (closeButton) elements.push(closeButton);
+		}
+		const subtitleText = this.shadowRoot?.querySelector(`.${blockClass}__subtitle-text`);
+		if (subtitleText && !subtitleText.hidden) elements.push(subtitleText);
+		const belowTitleSlot = this.shadowRoot?.querySelector("slot[name=\"below-title\"]");
+		if (belowTitleSlot) {
+			const belowTitleElements = belowTitleSlot.assignedElements({ flatten: true }).flatMap((el) => Array.from(el.querySelectorAll(selectorTabbable)));
+			elements.push(...belowTitleElements);
+		}
+		const actionToolbarSlot = this.shadowRoot?.querySelector("slot[name=\"action-toolbar\"]");
+		if (actionToolbarSlot) {
+			const actionToolbarElements = actionToolbarSlot.assignedElements({ flatten: true }).filter((el) => el instanceof HTMLElement && typeof el.focus === "function");
+			elements.push(...actionToolbarElements);
+		}
+		const defaultSlot = this.shadowRoot?.querySelector("slot:not([name])");
+		if (defaultSlot) {
+			const bodyElements = defaultSlot.assignedElements({ flatten: true }).flatMap((el) => Array.from(el.querySelectorAll(selectorTabbable)));
+			elements.push(...bodyElements);
+		}
+		const actionsSlot = this.shadowRoot?.querySelector("slot[name=\"actions\"]");
+		if (actionsSlot) {
+			const actionElements = actionsSlot.assignedElements({ flatten: true }).filter((el) => el instanceof HTMLElement && typeof el.focus === "function");
+			elements.push(...actionElements);
+		}
+		const all = elements.filter((el) => typeof el?.focus === "function");
+		return {
+			first: all[0],
+			last: all[all.length - 1],
+			all
+		};
 	}
 	/**
 	* Handles `click` event on the side-panel container.
@@ -255,24 +348,33 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 		const subtitle = e.target?.assignedElements();
 		this._hasSubtitle = subtitle.length > 0;
 	}
+	_handleCustomHeaderSlotChange(e) {
+		(e.target?.assignedElements()).forEach((el) => {
+			if (el instanceof HTMLElement) {
+				el.style.opacity = `calc(1 - var(--${blockClass}--scroll-animation-progress))`;
+				this._customHeaderElements.push(el);
+			}
+		});
+	}
 	_handleActionToolbarChange(e) {
 		const toolbarActions = e.target?.assignedElements();
 		this._hasActionToolbar = toolbarActions && toolbarActions.length > 0;
-		if (this._hasActionToolbar) for (const toolbarAction of toolbarActions) toolbarAction.setAttribute("size", "sm");
+		if (this._hasActionToolbar) for (let i = 0; i < toolbarActions.length; i++) {
+			const toolbarAction = toolbarActions[i];
+			toolbarAction.setAttribute("size", "sm");
+			if (i === 0) toolbarAction.classList.add(`${blockClass}__action-toolbar-leading-button`);
+			else toolbarAction.classList.remove(`${blockClass}__action-toolbar-leading-button`);
+		}
 	}
 	_handleActionsChange(e) {
 		const actions = e.target?.assignedElements();
 		this._checkUpdateIconButtonSizes();
 		const actionsCount = actions?.length ?? 0;
-		if (actionsCount > this._maxActions) {
-			this._actionsCount = this._maxActions;
-			console.error(`Too many side-panel actions, max ${this._maxActions}.`);
-		} else this._actionsCount = actionsCount;
-		for (let i = 0; i < actions?.length; i++) if (i + 1 > this._maxActions) {
-			actions[i].setAttribute("hidden", "true");
-			actions[i].setAttribute(`data-actions-limit-${this._maxActions}-exceeded`, `${actions.length}`);
-		} else actions[i].classList.add(`${blockClassActionSet}__action-button`);
-		this._checkUpdateActionSizes();
+		this._actionsCount = actionsCount;
+		if (actionsCount === 1) this._actionsMultiple = "single";
+		else if (actionsCount === 2) this._actionsMultiple = "double";
+		else if (actionsCount === 3) this._actionsMultiple = "triple";
+		else this._actionsMultiple = "";
 	}
 	async connectObservers() {
 		await this.updateComplete;
@@ -285,30 +387,30 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 		super.connectedCallback();
 		this.disconnectObservers();
 		this.connectObservers();
+		this.addEventListener("resize-start", this._handleResizeStart);
+		this.addEventListener("resize-drag", this._handleResizeDrag);
+		this.addEventListener("resize-end", this._handleResizeEnd);
+		this.addEventListener("resize-reset", this._handleResizeReset);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.disconnectObservers();
+		this.removeEventListener("resize-start", this._handleResizeStart);
+		this.removeEventListener("resize-drag", this._handleResizeDrag);
+		this.removeEventListener("resize-end", this._handleResizeEnd);
+		this.removeEventListener("resize-reset", this._handleResizeReset);
 	}
 	render() {
-		const { closeIconDescription, condensedActions, currentStep, includeOverlay, labelText, navigationBackIconDescription, open, placement, size, slideIn, title } = this;
+		const { closeIconDescription, closeIconTooltipAlignment, condensedActions, currentStep, includeOverlay, labelText, navigationBackIconDescription, open, placement, hideCloseButton, size, slideIn, title } = this;
 		if (!open && !this._isOpen) return html``;
-		const actionsMultiple = [
-			"",
-			"single",
-			"double",
-			"triple"
-		][this._actionsCount];
-		const titleTemplate = html`<div
+		const titleTemplate = html` <div
       class=${`${blockClass}__title`}
       ?no-label=${!!labelText}>
-      <h2 class=${title ? `${blockClass}__title-text` : ""} title=${title}>
+      <h2 class=${title ? `${blockClass}__title-text` : ""} tabindex="0">
         ${title}
       </h2>
-
       ${this._doAnimateTitle ? html`<h2
             class=${`${blockClass}__collapsed-title-text`}
-            title=${title}
             aria-hidden="true">
             ${title}
           </h2>` : ""}
@@ -334,8 +436,18 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
               </span>
             </cds-custom-icon-button>` : ""}
 
+        <!-- slot for custom header components -->
+        <div
+          class=${`${blockClass}__custom-header-wrapper${this._customHeaderHidden ? ` ${blockClass}__custom-header-wrapper--hidden` : ""}`}>
+          <slot
+            name="above-title"
+            @slotchange=${this._handleCustomHeaderSlotChange}></slot>
+        </div>
+
         <!-- render title label -->
-        ${title?.length && labelText?.length ? html` <p class=${`${blockClass}__label-text`}>${labelText}</p>` : ""}
+        ${title?.length && labelText?.length ? html` <p class=${`${blockClass}__label-text`} tabindex="0">
+              ${labelText}
+            </p>` : ""}
 
         <!-- title -->
         ${title ? titleTemplate : ""}
@@ -344,16 +456,16 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
         <div class=${`${blockClass}__slug-and-close`}>
           <slot name="slug" @slotchange=${this._handleSlugChange}></slot>
           <!-- {normalizedSlug} -->
-          <cds-custom-icon-button
-            align="bottom-right"
-            aria-label=${closeIconDescription}
-            kind="ghost"
-            size="sm"
-            class=${`${blockClass}__close-button`}
-            @click=${this._handleCloseClick}>
-            ${iconLoader(Close20, { slot: "icon" })}
-            <span slot="tooltip-content"> ${closeIconDescription} </span>
-          </cds-custom-icon-button>
+          ${!hideCloseButton ? html`<cds-custom-icon-button
+                align=${closeIconTooltipAlignment}
+                aria-label=${closeIconDescription}
+                kind="ghost"
+                size="sm"
+                class=${`${blockClass}__close-button`}
+                @click=${this._handleCloseClick}>
+                ${iconLoader(Close16, { slot: "icon" })}
+                <span slot="tooltip-content"> ${closeIconDescription} </span>
+              </cds-custom-icon-button>` : ""}
         </div>
 
         <!-- render sub title -->
@@ -362,12 +474,21 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
           ?hidden=${!this._hasSubtitle}
           ?no-title-animation=${!this._doAnimateTitle}
           ?no-action-toolbar=${!this._hasActionToolbar}
-          ?no-title=${!title}>
+          ?no-title=${!title}
+          tabindex="0">
           <slot
             name="subtitle"
             @slotchange=${this._handleSubtitleChange}></slot>
         </p>
 
+        <!-- slot for custom header components -->
+        <div
+          class=${`${blockClass}__custom-header-wrapper${this._customHeaderHidden ? ` ${blockClass}__custom-header-wrapper--hidden` : ""}`}>
+          <slot
+            name="below-title"
+            @slotchange=${this._handleCustomHeaderSlotChange}></slot>
+        </div>
+
         <div
           class=${this._hasActionToolbar ? `${blockClass}__action-toolbar` : ""}
           ?hidden=${!this._hasActionToolbar}
@@ -399,33 +520,31 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
         ?condensed-actions=${condensedActions}
         ?overlay=${includeOverlay || slideIn}
         ?slide-in=${slideIn}
+        ?resizable=${this.resizable && !slideIn}
         size=${size}>
-        <a
-          id="start-sentinel"
-          class="sentinel"
-          hidden
-          href="javascript:void 0"
-          role="navigation"></a>
-
+        ${!slideIn && this.resizable && typeof window !== "undefined" && window.innerWidth > 768 ? html`<cds-custom-resizer-handle
+              class="${blockClass}__resizer"
+              orientation="horizontal"
+              aria-valuemin="${this._getPanelWidthPercent("16rem")}"
+              aria-valuemax="75"
+              aria-valuenow="${this._getPanelWidthPercent()}"
+              aria-label="side panel is covering ${this._getPanelWidthPercent()}% of screen"
+              @resize-start=${this._handleResizeStart}
+              @resize-drag=${this._handleResizeDrag}
+              @resize-end=${this._handleResizeEnd}
+              @resize-reset=${this._handleResizeReset}></cds-custom-resizer-handle>` : ""}
         ${this._doAnimateTitle ? html`<div class=${`${blockClass}__animated-scroll-wrapper`} scrolls>
               ${headerTemplate} ${mainTemplate}
             </div>` : html` ${headerTemplate} ${mainTemplate}`}
 
-        <cds-custom-button-set-base
+        <cds-custom-action-set
           class=${`${blockClass}__actions-container`}
           ?hidden=${this._actionsCount === 0}
-          ?condensed=${condensedActions}
-          actions-multiple=${actionsMultiple}
-          size=${size}>
+          size=${/^(lg|xl|2xl)$/.test(size) ? "lg" : "md"}
+          button-size=${condensedActions ? "md" : "lg"}
+          actions-multiple=${this._actionsMultiple}>
           <slot name="actions" @slotchange=${this._handleActionsChange}></slot>
-        </cds-custom-button-set-base>
-
-        <a
-          id="end-sentinel"
-          class="sentinel"
-          hidden
-          href="javascript:void 0"
-          role="navigation"></a>
+        </cds-custom-action-set>
       </div>
 
       ${includeOverlay ? html`<div
@@ -439,7 +558,6 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
     `;
 	}
 	async updated(changedProperties) {
-		if (changedProperties.has("condensedActions")) this._checkUpdateActionSizes();
 		if (changedProperties.has("currentStep")) this._handleCurrentStepUpdate();
 		if (changedProperties.has("_doAnimateTitle")) {
 			this?._animateScrollWrapper?.removeEventListener("scroll", this._scrollObserver);
@@ -453,16 +571,23 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 			this.disconnectObservers();
 			if (this.open) {
 				this.connectObservers();
-				this._launcher = this.ownerDocument.activeElement;
-				const focusNode = this.selectorInitialFocus && this.querySelector(this.selectorInitialFocus);
+				this._launcher = this.ownerDocument?.activeElement ?? null;
 				await this.constructor._delay();
-				if (focusNode) focusNode.focus();
-				else if (!tryFocusElems(this.querySelectorAll(this.constructor.selectorTabbable), true)) this.focus();
-			} else if (this._launcher && typeof this._launcher.focus === "function") {
-				this._launcher.focus();
+				if (this.selectorInitialFocus?.trim()?.length) this.querySelector(this.selectorInitialFocus)?.focus();
+				else if (!this.slideIn) {
+					const { first: _firstElement } = this.getFocusable();
+					_firstElement?.focus();
+				}
+			} else if (this._launcher && typeof this._launcher?.focus === "function") {
+				this._launcher?.focus();
 				this._launcher = null;
 			}
 		}
+		if (changedProperties.has("size") && this.resizable && !this.slideIn || changedProperties.has("resizable") && !this.resizable) this.style.removeProperty("--cds-side-panel-modified-size");
+		if ((changedProperties.has("resizable") || changedProperties.has("open")) && this.resizable && !this.slideIn && this.open) {
+			await this.updateComplete;
+			this._sidePanelWidth = this._sidePanel?.clientWidth;
+		}
 	}
 	/**
 	* @param ms The number of milliseconds.
@@ -498,19 +623,17 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 	static get eventNavigateBack() {
 		return `cds-custom-side-panel-navigate-back`;
 	}
+	static {
+		this.styles = side_panel_default$1;
+	}
 };
-__decorate([query("#start-sentinel")], CDSSidePanel.prototype, "_startSentinelNode", void 0);
-__decorate([query("#end-sentinel")], CDSSidePanel.prototype, "_endSentinelNode", void 0);
 __decorate([query(`.${blockClass}`)], CDSSidePanel.prototype, "_sidePanel", void 0);
 __decorate([query(`.${blockClass}__animated-scroll-wrapper`)], CDSSidePanel.prototype, "_animateScrollWrapper", void 0);
 __decorate([query(`.${blockClass}__label-text`)], CDSSidePanel.prototype, "_label", void 0);
 __decorate([query(`.${blockClass}__title-text`)], CDSSidePanel.prototype, "_title", void 0);
 __decorate([query(`.${blockClass}__subtitle-text`)], CDSSidePanel.prototype, "_subtitle", void 0);
 __decorate([query(`.${blockClass}__inner-content`)], CDSSidePanel.prototype, "_innerContent", void 0);
-__decorate([queryAssignedElements({
-	slot: "actions",
-	selector: `cds-custom-button`
-})], CDSSidePanel.prototype, "_actions", void 0);
+__decorate([query(`cds-custom-resizer-handle`)], CDSSidePanel.prototype, "_resizerHandle", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_doAnimateTitle", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_isOpen", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_containerScrollTop", void 0);
@@ -518,8 +641,13 @@ __decorate([state()], CDSSidePanel.prototype, "_hasSubtitle", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_hasSlug", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_hasActionToolbar", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_actionsCount", void 0);
+__decorate([state()], CDSSidePanel.prototype, "_actionsMultiple", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_slugCloseSize", void 0);
-__decorate([HostListener("shadowRoot:focusout")], CDSSidePanel.prototype, "_handleBlur", void 0);
+__decorate([state()], CDSSidePanel.prototype, "_customHeaderElements", void 0);
+__decorate([state()], CDSSidePanel.prototype, "_customHeaderHidden", void 0);
+__decorate([state()], CDSSidePanel.prototype, "_sidePanelWidth", void 0);
+__decorate([state()], CDSSidePanel.prototype, "_accumulatedDelta", void 0);
+__decorate([HostListener("keydown")], CDSSidePanel.prototype, "_handleHostKeydown", void 0);
 __decorate([HostListener("document:keydown")], CDSSidePanel.prototype, "_handleKeydown", void 0);
 __decorate([property({
 	reflect: true,
@@ -528,8 +656,14 @@ __decorate([property({
 })], CDSSidePanel.prototype, "animateTitle", void 0);
 __decorate([property({
 	reflect: true,
-	attribute: "close-icon-description"
+	attribute: "close-icon-description",
+	type: String
 })], CDSSidePanel.prototype, "closeIconDescription", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "close-icon-tooltip-alignment",
+	type: String
+})], CDSSidePanel.prototype, "closeIconTooltipAlignment", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true,
@@ -574,6 +708,10 @@ __decorate([property({
 	reflect: true,
 	attribute: "selector-page-content"
 })], CDSSidePanel.prototype, "selectorPageContent", void 0);
+__decorate([property({
+	attribute: "hide-close-button",
+	type: Boolean
+})], CDSSidePanel.prototype, "hideCloseButton", void 0);
 __decorate([property({
 	reflect: true,
 	type: String
@@ -583,6 +721,10 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], CDSSidePanel.prototype, "slideIn", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSSidePanel.prototype, "resizable", void 0);
 __decorate([property({
 	reflect: false,
 	type: String