@carbon/ibm-products-web-components 0.35.0 → 0.36.0

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

@@ -1,520 +1,385 @@
 /**
- * Copyright IBM Corp. 2024
+ * Copyright IBM Corp. 2020, 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.
  */
 
-import { __decorate } from 'tslib';
-import { LitElement, html } from 'lit';
-import { query, queryAssignedElements, state, property } from 'lit/decorators.js';
-import { prefix, carbonPrefix } from '../../globals/settings.js';
-import HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';
-import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
-import { SIDE_PANEL_PLACEMENT, SIDE_PANEL_SIZE } from './defs.js';
-import styles from './side-panel.scss.js';
-import { selectorTabbable } from '@carbon/web-components/es/globals/settings.js';
-import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
-import ArrowLeft16 from '@carbon/icons/es/arrow--left/16';
-import Close16 from '@carbon/icons/es/close/16';
-import { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';
-import { moderate02 } from '@carbon/motion';
+import { carbonPrefix, prefix } from "../../globals/settings.js";
+import { SIDE_PANEL_PLACEMENT, SIDE_PANEL_SIZE } from "./defs.js";
+import side_panel_default$1 from "./side-panel.scss.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { LitElement, html } from "lit";
+import { property, query, queryAssignedElements, state } from "lit/decorators.js";
+import HostListener from "@carbon/web-components/es/globals/decorators/host-listener.js";
+import HostListenerMixin from "@carbon/web-components/es/globals/mixins/host-listener.js";
+import { selectorTabbable } from "@carbon/web-components/es/globals/settings.js";
+import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
+import ArrowLeft16 from "@carbon/icons/es/arrow--left/16";
+import Close from "@carbon/icons/es/close/16";
+import { iconLoader } from "@carbon/web-components/es/globals/internal/icon-loader.js";
+import { moderate02 } from "@carbon/motion";
 import '@carbon/web-components/es-custom/components/button/index.js';
 import '@carbon/web-components/es-custom/components/button/button-set-base.js';
 import '@carbon/web-components/es-custom/components/icon-button/index.js';
 import '@carbon/web-components/es-custom/components/layer/index.js';
 
+//#region src/components/side-panel/side-panel.ts
 /**
- * @license
- *
- * Copyright IBM Corp. 2023, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
+* @license
+*
+* Copyright IBM Corp. 2023, 2024
+*
+* 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 blockClass = `${prefix}--side-panel`;
 const blockClassActionSet = `${prefix}--action-set`;
 /**
- * Observes resize of the given element with the given resize observer.
- *
- * @param observer The resize observer.
- * @param elem The element to observe the resize.
- */
+* Observes resize of the given element with the given resize observer.
+*
+* @param observer The resize observer.
+* @param elem The element to observe the resize.
+*/
 const observeResize = (observer, elem) => {
-    if (!elem) {
-        return null;
-    }
-    observer.observe(elem);
-    return {
-        release() {
-            observer.unobserve(elem);
-            return null;
-        },
-    };
+	if (!elem) return null;
+	observer.observe(elem);
+	return { release() {
+		observer.unobserve(elem);
+		return null;
+	} };
 };
 /**
- * SidePanel.
- *
- * @element c4p-side-panel
- * @csspart dialog The dialog.
- * @fires c4p-side-panel-beingclosed
- *   The custom event fired before this side-panel is being closed upon a user gesture.
- *   Cancellation of this event stops the user-initiated action of closing this side-panel.
- * @fires c4p-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.
- * @fires c4p-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)
- */
+* SidePanel.
+*
+* @element c4p-side-panel
+* @csspart dialog The dialog.
+* @fires c4p-side-panel-beingclosed
+*   The custom event fired before this side-panel is being closed upon a user gesture.
+*   Cancellation of this event stops the user-initiated action of closing this side-panel.
+* @fires c4p-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.
+* @fires c4p-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)
+*/
 let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
-    constructor() {
-        super(...arguments);
-        /**
-         * The handle for observing resize of the parent element of this element.
-         */
-        this._hObserveResize = null;
-        /**
-         * The element that had focus before this side-panel gets open.
-         */
-        this._launcher = null;
-        this._doAnimateTitle = true;
-        this._isOpen = false;
-        this._containerScrollTop = -16;
-        this._hasSubtitle = false;
-        this._hasSlug = false;
-        this._hasActionToolbar = false;
-        this._actionsCount = 0;
-        this._slugCloseSize = 'sm';
-        this._customHeaderElements = [];
-        /**
-         * Handle the keydown event.
-         * Trap the focus inside the side-panel by tracking keydown.key == `Tab`
-         *
-         * @param {KeyboardEvent} event The keyboard event object.
-         */
-        this._handleHostKeydown = (event) => {
-            var _a;
-            if (event.key === 'Tab' && !this.slideIn) {
-                const { first: _firstElement, last: _lastElement } = this.getFocusable();
-                if (event.shiftKey &&
-                    (((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === _firstElement ||
-                        document.activeElement === _firstElement)) {
-                    event.preventDefault();
-                    _lastElement === null || _lastElement === void 0 ? void 0 : _lastElement.focus();
-                }
-                else if (!event.shiftKey && document.activeElement === _lastElement) {
-                    event.preventDefault();
-                    _firstElement === null || _firstElement === void 0 ? void 0 : _firstElement.focus();
-                }
-            }
-        };
-        this._handleKeydown = ({ key, target }) => {
-            if (key === 'Esc' || key === 'Escape') {
-                this._handleUserInitiatedClose(target);
-            }
-        };
-        this._reducedMotion = typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.matchMedia)
-            ? window.matchMedia('(prefers-reduced-motion: reduce)')
-            : { matches: true };
-        this._adjustPageContent = () => {
-            var _a, _b;
-            // sets/resets styles based on slideIn property and selectorPageContent;
-            if (this.selectorPageContent) {
-                const pageContentEl = document.querySelector(this.selectorPageContent);
-                if (pageContentEl) {
-                    const newValues = {
-                        marginInlineStart: '',
-                        marginInlineEnd: '',
-                        inlineSize: '',
-                        transition: this._reducedMotion.matches
-                            ? 'none'
-                            : `all ${moderate02}`,
-                        transitionProperty: 'margin-inline-start, margin-inline-end',
-                    };
-                    if (this.open) {
-                        newValues.inlineSize = 'auto';
-                        if (this.placement === 'left') {
-                            newValues.marginInlineStart = `${(_a = this === null || this === void 0 ? void 0 : this._sidePanel) === null || _a === void 0 ? void 0 : _a.offsetWidth}px`;
-                        }
-                        else {
-                            newValues.marginInlineEnd = `${(_b = this === null || this === void 0 ? void 0 : this._sidePanel) === null || _b === void 0 ? void 0 : _b.offsetWidth}px`;
-                        }
-                    }
-                    if (this.slideIn) {
-                        Object.keys(newValues).forEach((key) => {
-                            pageContentEl.style[key] = newValues[key];
-                        });
-                    }
-                }
-            }
-        };
-        this._checkSetOpen = () => {
-            var _a;
-            const { _sidePanel: sidePanel } = this;
-            if (sidePanel && this._isOpen) {
-                if ((_a = this._reducedMotion) === null || _a === void 0 ? void 0 : _a.matches) {
-                    this._isOpen = false;
-                }
-                else {
-                    // wait until the side panel has transitioned off the screen to remove
-                    sidePanel.addEventListener('transitionend', () => {
-                        this._isOpen = false;
-                    });
-                }
-            }
-            else if (this.open) {
-                // allow the html to render before animating in the side panel
-                // Use requestAnimationFrame to ensure the DOM is rendered before triggering animation
-                requestAnimationFrame(() => {
-                    this._isOpen = this.open;
-                });
-            }
-            else {
-                // When closing, set immediately
-                this._isOpen = false;
-            }
-        };
-        this._checkUpdateIconButtonSizes = () => {
-            var _a, _b;
-            const slug = this.querySelector(`${prefix}-slug`);
-            const otherButtons = (_a = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('#nav-back-button, #close-button');
-            let iconButtonSize = 'sm';
-            if (slug || (otherButtons === null || otherButtons === void 0 ? void 0 : otherButtons.length)) {
-                const actions = (_b = this === null || this === void 0 ? void 0 : this.querySelectorAll) === null || _b === void 0 ? void 0 : _b.call(this, `${prefix}-button[slot='actions']`);
-                if ((actions === null || actions === void 0 ? void 0 : actions.length) && /l/.test(this.size)) {
-                    iconButtonSize = 'md';
-                }
-            }
-            if (slug) {
-                slug === null || slug === void 0 ? void 0 : 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 = () => {
-            var _a, _b, _c;
-            let canDoAnimateTitle = false;
-            if (this._sidePanel &&
-                this.open &&
-                this.animateTitle &&
-                ((_a = this === null || this === void 0 ? void 0 : this.title) === null || _a === void 0 ? void 0 : _a.length) &&
-                !this._reducedMotion.matches) {
-                const scrollAnimationDistance = this._getScrollAnimationDistance();
-                // used to calculate the header moves
-                (_c = (_b = this === null || this === void 0 ? void 0 : this._sidePanel) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.setProperty(`--${blockClass}--scroll-animation-distance`, `${scrollAnimationDistance}`);
-                let scrollEl = this._animateScrollWrapper;
-                if (!scrollEl && this.animateTitle && !this._doAnimateTitle) {
-                    scrollEl = this._innerContent;
-                }
-                if (scrollEl) {
-                    const innerComputed = window === null || window === void 0 ? void 0 : window.getComputedStyle(this._innerContent);
-                    const innerPaddingHeight = innerComputed
-                        ? parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingTop) +
-                            parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingBottom)
-                        : 0;
-                    canDoAnimateTitle =
-                        (!!this.labelText || !!this._hasActionToolbar || this._hasSubtitle) &&
-                            scrollEl.scrollHeight - scrollEl.clientHeight >=
-                                scrollAnimationDistance + innerPaddingHeight;
-                }
-            }
-            this._doAnimateTitle = canDoAnimateTitle;
-        };
-        /**
-         * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.
-         */
-        // TODO: Wait for `.d.ts` update to support `ResizeObserver`
-        // @ts-ignore
-        this._resizeObserver = new ResizeObserver(() => {
-            if (this._sidePanel) {
-                this._checkSetDoAnimateTitle();
-            }
-        });
-        this._getScrollAnimationDistance = () => {
-            var _a, _b, _c, _d;
-            const labelHeight = (_b = (_a = this === null || this === void 0 ? void 0 : this._label) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
-            const subtitleHeight = (_d = (_c = this === null || this === void 0 ? void 0 : this._subtitle) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0;
-            const titleVerticalBorder = this._hasActionToolbar
-                ? this._title.offsetHeight - this._title.clientHeight
-                : 0;
-            return labelHeight + subtitleHeight + titleVerticalBorder;
-        };
-        this._scrollObserver = () => {
-            var _a, _b, _c, _d;
-            const scrollTop = (_b = (_a = this._animateScrollWrapper) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0;
-            const scrollAnimationDistance = this._getScrollAnimationDistance();
-            const animationProgress = Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance;
-            (_d = (_c = this === null || this === void 0 ? void 0 : this._sidePanel) === null || _c === void 0 ? void 0 : _c.style) === null || _d === void 0 ? void 0 : _d.setProperty(`--${blockClass}--scroll-animation-progress`, `${animationProgress}`);
-            if (animationProgress === 1) {
-                this._customHeaderElements.forEach((el) => {
-                    el.classList.add(`cds-custom--visually-hidden`);
-                });
-            }
-            else {
-                this._customHeaderElements.forEach((el) => {
-                    el.classList.remove(`cds-custom--visually-hidden`);
-                });
-            }
-        };
-        this._handleCurrentStepUpdate = () => {
-            var _a;
-            const scrollable = (_a = this._animateScrollWrapper) !== null && _a !== void 0 ? _a : this._innerContent;
-            if (scrollable) {
-                scrollable.scrollTop = 0;
-            }
-        };
-        /**
-         * Determines if the title will animate on scroll
-         */
-        this.animateTitle = true;
-        /**
-         * Sets the close button icon description
-         */
-        this.closeIconDescription = 'Close';
-        /**
-         * Sets the close button tooltip alignment
-         */
-        this.closeIconTooltipAlignment = 'left';
-        /**
-         * Determines whether the side panel should render the condensed version (affects action buttons primarily)
-         */
-        this.condensedActions = false;
-        /**
-         * Determines whether the side panel should render with an overlay
-         */
-        this.includeOverlay = false;
-        /**
-         * Sets the icon description for the navigation back icon button
-         */
-        this.navigationBackIconDescription = 'Back';
-        /**
-         * `true` if the side-panel should be open.
-         */
-        this.open = false;
-        /**
-         * SidePanel placement.
-         */
-        this.placement = SIDE_PANEL_PLACEMENT.RIGHT;
-        /**
-         * Prevent closing on click outside of side-panel
-         */
-        this.preventCloseOnClickOutside = false;
-        /**
-         * Selector for page content, used to push content to side except
-         */
-        this.selectorPageContent = '';
-        /**
-         * Show/hide the "X" close button
-         */
-        this.hideCloseButton = false;
-        /**
-         * SidePanel size.
-         */
-        this.size = SIDE_PANEL_SIZE.MEDIUM;
-        /**
-         * Determines if this panel slides in
-         */
-        this.slideIn = false;
-    }
-    /**
-     * Get focusable elements.
-     *
-     * Querying all tabbable items.
-     *
-     * @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.
-     */
-    getFocusable() {
-        var _a, _b;
-        const elements = [];
-        // Add slug elements if present
-        if (this._hasSlug) {
-            elements.push(this.querySelectorAll(`${carbonPrefix}-slug`));
-        }
-        // Add close button if not hidden
-        if (!this.hideCloseButton) {
-            const closeButtons = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`${carbonPrefix}-icon-button`);
-            if (closeButtons) {
-                elements.push(closeButtons);
-            }
-        }
-        // Add tabbable elements inside light DOM
-        const _tabbableItems = this.querySelectorAll(selectorTabbable);
-        if (_tabbableItems) {
-            elements.push(_tabbableItems);
-        }
-        // Flatten NodeList arrays and filter for focusable items
-        const all = (_b = elements === null || elements === void 0 ? void 0 : elements.flatMap((nodeList) => Array.from(nodeList))) === null || _b === void 0 ? void 0 : _b.filter((el) => typeof (el === null || el === void 0 ? void 0 : el.focus) === 'function');
-        return {
-            first: all[0],
-            last: all[all.length - 1],
-            all,
-        };
-    }
-    /**
-     * Handles `click` event on the side-panel container.
-     *
-     * @param event The event.
-     */
-    _handleClickOnOverlay(event) {
-        if (!this.preventCloseOnClickOutside) {
-            this._handleUserInitiatedClose(event.target);
-        }
-    }
-    /**
-     * Handles `click` event on the side-panel container.
-     *
-     * @param event The event.
-     */
-    _handleCloseClick(event) {
-        this._handleUserInitiatedClose(event.target);
-    }
-    /**
-     * Handles user-initiated close request of this side-panel.
-     *
-     * @param triggeredBy The element that triggered this close request.
-     */
-    _handleUserInitiatedClose(triggeredBy) {
-        if (this.open) {
-            const init = {
-                bubbles: true,
-                cancelable: true,
-                composed: true,
-                detail: {
-                    triggeredBy,
-                },
-            };
-            if (this.dispatchEvent(new CustomEvent(this.constructor.eventBeforeClose, init))) {
-                this.open = false;
-                this.dispatchEvent(new CustomEvent(this.constructor.eventClose, init));
-            }
-        }
-    }
-    _handleNavigateBack(triggeredBy) {
-        this.dispatchEvent(new CustomEvent(this.constructor.eventNavigateBack, {
-            composed: true,
-            detail: {
-                triggeredBy,
-            },
-        }));
-    }
-    _handleSlugChange(e) {
-        this._checkUpdateIconButtonSizes();
-        const childItems = e.target.assignedElements();
-        this._hasSlug = childItems.length > 0;
-    }
-    _handleSubtitleChange(e) {
-        const target = e.target;
-        const subtitle = target === null || target === void 0 ? void 0 : target.assignedElements();
-        this._hasSubtitle = subtitle.length > 0;
-    }
-    _handleCustomHeaderSlotChange(e) {
-        const target = e.target;
-        const customHeaderElms = target === null || target === void 0 ? void 0 : target.assignedElements();
-        customHeaderElms.forEach((el) => {
-            if (el instanceof HTMLElement) {
-                el.style.opacity = `calc(1 - var(--${blockClass}--scroll-animation-progress))`;
-                this._customHeaderElements.push(el);
-            }
-        });
-    }
-    _handleActionToolbarChange(e) {
-        const target = e.target;
-        const toolbarActions = target === null || target === void 0 ? void 0 : target.assignedElements();
-        this._hasActionToolbar = toolbarActions && toolbarActions.length > 0;
-        if (this._hasActionToolbar) {
-            for (const toolbarAction of toolbarActions) {
-                // toolbar actions size should always be sm
-                toolbarAction.setAttribute('size', 'sm');
-            }
-        }
-    }
-    _handleActionsChange(e) {
-        var _a;
-        const target = e.target;
-        const actions = target === null || target === void 0 ? void 0 : target.assignedElements();
-        // update slug size
-        this._checkUpdateIconButtonSizes();
-        const actionsCount = (_a = actions === null || actions === void 0 ? void 0 : actions.length) !== null && _a !== void 0 ? _a : 0;
-        if (actionsCount > this._maxActions) {
-            this._actionsCount = this._maxActions;
-            if (process.env.NODE_ENV === 'development') {
-                console.error(`Too many side-panel actions, max ${this._maxActions}.`);
-            }
-        }
-        else {
-            this._actionsCount = actionsCount;
-        }
-        for (let i = 0; i < (actions === null || actions === void 0 ? void 0 : actions.length); i++) {
-            if (i + 1 > this._maxActions) {
-                // hide excessive side panel actions
-                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();
-    }
-    async connectObservers() {
-        await this.updateComplete;
-        this._hObserveResize = observeResize(this._resizeObserver, this._sidePanel);
-    }
-    disconnectObservers() {
-        if (this._hObserveResize) {
-            this._hObserveResize = this._hObserveResize.release();
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.disconnectObservers();
-        this.connectObservers();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.disconnectObservers();
-    }
-    render() {
-        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
+	constructor(..._args) {
+		super(..._args);
+		this._hObserveResize = null;
+		this._launcher = null;
+		this._doAnimateTitle = true;
+		this._isOpen = false;
+		this._containerScrollTop = -16;
+		this._hasSubtitle = false;
+		this._hasSlug = false;
+		this._hasActionToolbar = false;
+		this._actionsCount = 0;
+		this._slugCloseSize = "sm";
+		this._customHeaderElements = [];
+		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();
+				}
+			}
+		};
+		this._handleKeydown = ({ key, target }) => {
+			if (key === "Esc" || key === "Escape") this._handleUserInitiatedClose(target);
+		};
+		this._reducedMotion = typeof window !== "undefined" && window?.matchMedia ? window.matchMedia("(prefers-reduced-motion: reduce)") : { matches: true };
+		this._adjustPageContent = () => {
+			if (this.selectorPageContent) {
+				const pageContentEl = document.querySelector(this.selectorPageContent);
+				if (pageContentEl) {
+					const newValues = {
+						marginInlineStart: "",
+						marginInlineEnd: "",
+						inlineSize: "",
+						transition: this._reducedMotion.matches ? "none" : `all ${moderate02}`,
+						transitionProperty: "margin-inline-start, margin-inline-end"
+					};
+					if (this.open) {
+						newValues.inlineSize = "auto";
+						if (this.placement === "left") newValues.marginInlineStart = `${this?._sidePanel?.offsetWidth}px`;
+						else newValues.marginInlineEnd = `${this?._sidePanel?.offsetWidth}px`;
+					}
+					if (this.slideIn) Object.keys(newValues).forEach((key) => {
+						pageContentEl.style[key] = newValues[key];
+					});
+				}
+			}
+		};
+		this._checkSetOpen = () => {
+			const { _sidePanel: sidePanel } = this;
+			if (sidePanel && this._isOpen) if (this._reducedMotion?.matches) this._isOpen = false;
+			else sidePanel.addEventListener("transitionend", () => {
+				this._isOpen = false;
+			});
+			else if (this.open) requestAnimationFrame(() => {
+				this._isOpen = this.open;
+			});
+			else this._isOpen = false;
+		};
+		this._checkUpdateIconButtonSizes = () => {
+			const slug = this.querySelector(`${prefix}-slug`);
+			const otherButtons = this?.shadowRoot?.querySelectorAll("#nav-back-button, #close-button");
+			let iconButtonSize = "sm";
+			if (slug || otherButtons?.length) {
+				if ((this?.querySelectorAll?.(`${prefix}-button[slot='actions']`))?.length && /l/.test(this.size)) iconButtonSize = "md";
+			}
+			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) {
+				const scrollAnimationDistance = this._getScrollAnimationDistance();
+				this?._sidePanel?.style?.setProperty(`--${blockClass}--scroll-animation-distance`, `${scrollAnimationDistance}`);
+				let scrollEl = this._animateScrollWrapper;
+				if (!scrollEl && this.animateTitle && !this._doAnimateTitle) scrollEl = this._innerContent;
+				if (scrollEl) {
+					const innerComputed = window?.getComputedStyle(this._innerContent);
+					const innerPaddingHeight = innerComputed ? parseFloat(innerComputed?.paddingTop) + parseFloat(innerComputed?.paddingBottom) : 0;
+					canDoAnimateTitle = (!!this.labelText || !!this._hasActionToolbar || this._hasSubtitle) && scrollEl.scrollHeight - scrollEl.clientHeight >= scrollAnimationDistance + innerPaddingHeight;
+				}
+			}
+			this._doAnimateTitle = canDoAnimateTitle;
+		};
+		this._resizeObserver = new ResizeObserver(() => {
+			if (this._sidePanel) this._checkSetDoAnimateTitle();
+		});
+		this._getScrollAnimationDistance = () => {
+			const labelHeight = this?._label?.offsetHeight ?? 0;
+			const subtitleHeight = this?._subtitle?.offsetHeight ?? 0;
+			const titleVerticalBorder = this._hasActionToolbar ? this._title.offsetHeight - this._title.clientHeight : 0;
+			return labelHeight + subtitleHeight + titleVerticalBorder;
+		};
+		this._scrollObserver = () => {
+			const scrollTop = this._animateScrollWrapper?.scrollTop ?? 0;
+			const scrollAnimationDistance = this._getScrollAnimationDistance();
+			const animationProgress = Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance;
+			this?._sidePanel?.style?.setProperty(`--${blockClass}--scroll-animation-progress`, `${animationProgress}`);
+			if (animationProgress === 1) this._customHeaderElements.forEach((el) => {
+				el.classList.add(`cds-custom--visually-hidden`);
+			});
+			else this._customHeaderElements.forEach((el) => {
+				el.classList.remove(`cds-custom--visually-hidden`);
+			});
+		};
+		this._handleCurrentStepUpdate = () => {
+			const scrollable = this._animateScrollWrapper ?? this._innerContent;
+			if (scrollable) scrollable.scrollTop = 0;
+		};
+		this.animateTitle = true;
+		this.closeIconDescription = "Close";
+		this.closeIconTooltipAlignment = "left";
+		this.condensedActions = false;
+		this.includeOverlay = false;
+		this.navigationBackIconDescription = "Back";
+		this.open = false;
+		this.placement = SIDE_PANEL_PLACEMENT.RIGHT;
+		this.preventCloseOnClickOutside = false;
+		this.selectorPageContent = "";
+		this.hideCloseButton = false;
+		this.size = SIDE_PANEL_SIZE.MEDIUM;
+		this.slideIn = 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(`${carbonPrefix}-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.
+	*
+	* @param event The event.
+	*/
+	_handleClickOnOverlay(event) {
+		if (!this.preventCloseOnClickOutside) this._handleUserInitiatedClose(event.target);
+	}
+	/**
+	* Handles `click` event on the side-panel container.
+	*
+	* @param event The event.
+	*/
+	_handleCloseClick(event) {
+		this._handleUserInitiatedClose(event.target);
+	}
+	/**
+	* Handles user-initiated close request of this side-panel.
+	*
+	* @param triggeredBy The element that triggered this close request.
+	*/
+	_handleUserInitiatedClose(triggeredBy) {
+		if (this.open) {
+			const init = {
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+				detail: { triggeredBy }
+			};
+			if (this.dispatchEvent(new CustomEvent(this.constructor.eventBeforeClose, init))) {
+				this.open = false;
+				this.dispatchEvent(new CustomEvent(this.constructor.eventClose, init));
+			}
+		}
+	}
+	_handleNavigateBack(triggeredBy) {
+		this.dispatchEvent(new CustomEvent(this.constructor.eventNavigateBack, {
+			composed: true,
+			detail: { triggeredBy }
+		}));
+	}
+	_handleSlugChange(e) {
+		this._checkUpdateIconButtonSizes();
+		this._hasSlug = e.target.assignedElements().length > 0;
+	}
+	_handleSubtitleChange(e) {
+		this._hasSubtitle = (e.target?.assignedElements()).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 (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();
+	}
+	async connectObservers() {
+		await this.updateComplete;
+		this._hObserveResize = observeResize(this._resizeObserver, this._sidePanel);
+	}
+	disconnectObservers() {
+		if (this._hObserveResize) this._hObserveResize = this._hObserveResize.release();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.disconnectObservers();
+		this.connectObservers();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.disconnectObservers();
+	}
+	render() {
+		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
       class=${`${blockClass}__title`}
       ?no-label=${!!labelText}
     >
-      <h2 class=${title ? `${blockClass}__title-text` : ''}>${title}</h2>
-      ${this._doAnimateTitle
-            ? html `<h2
+      <h2 class=${title ? `${blockClass}__title-text` : ""} tabindex="0">
+        ${title}
+      </h2>
+      ${this._doAnimateTitle ? html`<h2
             class=${`${blockClass}__collapsed-title-text`}
             aria-hidden="true"
           >
             ${title}
-          </h2>`
-            : ''}
+          </h2>` : ""}
     </div>`;
-        const headerHasTitleClass = this.title
-            ? ` ${blockClass}__header--has-title `
-            : '';
-        const headerTemplate = html `
+		const headerTemplate = html`
       <div
-        class=${`${blockClass}__header${headerHasTitleClass}`}
+        class=${`${blockClass}__header${this.title ? ` ${blockClass}__header--has-title ` : ""}`}
         ?detail-step=${currentStep > 0}
         ?no-title-animation=${!this._doAnimateTitle}
         ?reduced-motion=${this._reducedMotion.matches}
       >
         <!-- render back button -->
-        ${currentStep > 0
-            ? html `<cds-custom-icon-button
+        ${currentStep > 0 ? html`<cds-custom-icon-button
               align="bottom-left"
               aria-label=${navigationBackIconDescription}
               kind="ghost"
@@ -522,12 +387,11 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
               class=${`${prefix}--btn ${blockClass}__navigation-back-button`}
               @click=${this._handleNavigateBack}
             >
-              ${iconLoader(ArrowLeft16, { slot: 'icon' })}
+              ${iconLoader(ArrowLeft16, { slot: "icon" })}
               <span slot="tooltip-content">
                 ${navigationBackIconDescription}
               </span>
-            </cds-custom-icon-button>`
-            : ''}
+            </cds-custom-icon-button>` : ""}
 
         <!-- slot for custom header components -->
         <slot
@@ -536,19 +400,18 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
         ></slot>
 
         <!-- render title label -->
-        ${(title === null || title === void 0 ? void 0 : title.length) && (labelText === null || labelText === void 0 ? void 0 : 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 : ''}
+        ${title ? titleTemplate : ""}
 
         <!-- render slug and close button area -->
         <div class=${`${blockClass}__slug-and-close`}>
           <slot name="slug" @slotchange=${this._handleSlugChange}></slot>
           <!-- {normalizedSlug} -->
-          ${!hideCloseButton
-            ? html `<cds-custom-icon-button
+          ${!hideCloseButton ? html`<cds-custom-icon-button
                 align=${closeIconTooltipAlignment}
                 aria-label=${closeIconDescription}
                 kind="ghost"
@@ -556,19 +419,19 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
                 class=${`${blockClass}__close-button`}
                 @click=${this._handleCloseClick}
               >
-                ${iconLoader(Close16, { slot: 'icon' })}
+                ${iconLoader(Close, { slot: "icon" })}
                 <span slot="tooltip-content"> ${closeIconDescription} </span>
-              </cds-custom-icon-button>`
-            : ''}
+              </cds-custom-icon-button>` : ""}
         </div>
 
         <!-- render sub title -->
         <p
-          class=${this._hasSubtitle ? `${blockClass}__subtitle-text` : ''}
+          class=${this._hasSubtitle ? `${blockClass}__subtitle-text` : ""}
           ?hidden=${!this._hasSubtitle}
           ?no-title-animation=${!this._doAnimateTitle}
           ?no-action-toolbar=${!this._hasActionToolbar}
           ?no-title=${!title}
+          tabindex="0"
         >
           <slot
             name="subtitle"
@@ -583,7 +446,7 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
         ></slot>
 
         <div
-          class=${this._hasActionToolbar ? `${blockClass}__action-toolbar` : ''}
+          class=${this._hasActionToolbar ? `${blockClass}__action-toolbar` : ""}
           ?hidden=${!this._hasActionToolbar}
           ?no-title-animation=${!this._doAnimateTitle}
         >
@@ -594,7 +457,7 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
         </div>
       </div>
     `;
-        const mainTemplate = html `<div
+		const mainTemplate = html`<div
       class=${`${blockClass}__inner-content`}
       ?scrolls=${!this._doAnimateTitle}
     >
@@ -602,12 +465,9 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
         <slot></slot>
       </cds-custom-layer>
     </div> `;
-        const sidePanelAnimateTitleClass = this._doAnimateTitle
-            ? ` ${blockClass}--animated-title`
-            : '';
-        return html `
+		return html`
       <div
-        class=${`${blockClass}${sidePanelAnimateTitleClass}`}
+        class=${`${blockClass}${this._doAnimateTitle ? ` ${blockClass}--animated-title` : ""}`}
         part="dialog"
         role="complementary"
         placement="${placement}"
@@ -620,11 +480,9 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
         ?slide-in=${slideIn}
         size=${size}
       >
-        ${this._doAnimateTitle
-            ? html `<div class=${`${blockClass}__animated-scroll-wrapper`} scrolls>
+        ${this._doAnimateTitle ? html`<div class=${`${blockClass}__animated-scroll-wrapper`} scrolls>
               ${headerTemplate} ${mainTemplate}
-            </div>`
-            : html ` ${headerTemplate} ${mainTemplate}`}
+            </div>` : html` ${headerTemplate} ${mainTemplate}`}
 
         <cds-custom-button-set-base
           class=${`${blockClass}__actions-container`}
@@ -637,8 +495,7 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
         </cds-custom-button-set-base>
       </div>
 
-      ${includeOverlay
-            ? html `<div
+      ${includeOverlay ? html`<div
             ?slide-in=${slideIn}
             class=${`${blockClass}__overlay`}
             ?open=${this.open}
@@ -646,221 +503,175 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
             ?closing=${!open && this._isOpen}
             tabindex="-1"
             @click=${this._handleClickOnOverlay}
-          ></div>`
-            : ''}
+          ></div>` : ""}
     `;
-    }
-    async updated(changedProperties) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (changedProperties.has('condensedActions')) {
-            this._checkUpdateActionSizes();
-        }
-        if (changedProperties.has('currentStep')) {
-            this._handleCurrentStepUpdate();
-        }
-        if (changedProperties.has('_doAnimateTitle')) {
-            (_a = this === null || this === void 0 ? void 0 : this._animateScrollWrapper) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this._scrollObserver);
-            if (this._doAnimateTitle) {
-                (_b = this === null || this === void 0 ? void 0 : this._animateScrollWrapper) === null || _b === void 0 ? void 0 : _b.addEventListener('scroll', this._scrollObserver);
-            }
-            else {
-                (_d = (_c = this === null || this === void 0 ? void 0 : this._sidePanel) === null || _c === void 0 ? void 0 : _c.style) === null || _d === void 0 ? void 0 : _d.setProperty(`--${blockClass}--scroll-animation-progress`, '0');
-            }
-        }
-        if (changedProperties.has('_isOpen') ||
-            changedProperties.has('animateTitle')) {
-            /* @state property changed */
-            this._checkSetDoAnimateTitle();
-        }
-        if (changedProperties.has('slideIn') ||
-            changedProperties.has('open') ||
-            changedProperties.has('includeOverlay')) {
-            this._adjustPageContent();
-        }
-        if (changedProperties.has('open')) {
-            this._checkSetOpen();
-            this.disconnectObservers();
-            if (this.open) {
-                this.connectObservers();
-                this._launcher = this.ownerDocument.activeElement;
-                await this.constructor._delay();
-                if ((_f = (_e = this.selectorInitialFocus) === null || _e === void 0 ? void 0 : _e.trim()) === null || _f === void 0 ? void 0 : _f.length) {
-                    const focusNode = this.querySelector(this.selectorInitialFocus);
-                    focusNode === null || focusNode === void 0 ? void 0 : focusNode.focus();
-                }
-                else if (!this.slideIn) {
-                    const { first: _firstElement } = this.getFocusable();
-                    _firstElement === null || _firstElement === void 0 ? void 0 : _firstElement.focus();
-                }
-            }
-            else if (this._launcher &&
-                typeof ((_g = this._launcher) === null || _g === void 0 ? void 0 : _g.focus) === 'function') {
-                (_h = this._launcher) === null || _h === void 0 ? void 0 : _h.focus();
-                this._launcher = null;
-            }
-        }
-    }
-    /**
-     * @param ms The number of milliseconds.
-     * @returns A promise that is resolves after the given milliseconds.
-     */
-    static _delay(ms = 0) {
-        return new Promise((resolve) => {
-            setTimeout(resolve, ms);
-        });
-    }
-    /**
-     * A selector selecting tabbable nodes.
-     */
-    static get selectorTabbable() {
-        return selectorTabbable;
-    }
-    /**
-     * The name of the custom event fired before this side-panel is being closed upon a user gesture.
-     * Cancellation of this event stops the user-initiated action of closing this side-panel.
-     */
-    static get eventBeforeClose() {
-        return `${prefix}-side-panel-beingclosed`;
-    }
-    /**
-     * The name of the custom event fired after this side-panel is closed upon a user gesture.
-     */
-    static get eventClose() {
-        return `${prefix}-side-panel-closed`;
-    }
-    /**
-     * The name of the custom event fired on clicking the navigate back button
-     */
-    static get eventNavigateBack() {
-        return `${prefix}-side-panel-navigate-back`;
-    }
+	}
+	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);
+			if (this._doAnimateTitle) this?._animateScrollWrapper?.addEventListener("scroll", this._scrollObserver);
+			else this?._sidePanel?.style?.setProperty(`--${blockClass}--scroll-animation-progress`, "0");
+		}
+		if (changedProperties.has("_isOpen") || changedProperties.has("animateTitle")) this._checkSetDoAnimateTitle();
+		if (changedProperties.has("slideIn") || changedProperties.has("open") || changedProperties.has("includeOverlay")) this._adjustPageContent();
+		if (changedProperties.has("open")) {
+			this._checkSetOpen();
+			this.disconnectObservers();
+			if (this.open) {
+				this.connectObservers();
+				this._launcher = this.ownerDocument.activeElement;
+				await this.constructor._delay();
+				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;
+			}
+		}
+	}
+	/**
+	* @param ms The number of milliseconds.
+	* @returns A promise that is resolves after the given milliseconds.
+	*/
+	static _delay(ms = 0) {
+		return new Promise((resolve) => {
+			setTimeout(resolve, ms);
+		});
+	}
+	/**
+	* A selector selecting tabbable nodes.
+	*/
+	static get selectorTabbable() {
+		return selectorTabbable;
+	}
+	/**
+	* The name of the custom event fired before this side-panel is being closed upon a user gesture.
+	* Cancellation of this event stops the user-initiated action of closing this side-panel.
+	*/
+	static get eventBeforeClose() {
+		return `${prefix}-side-panel-beingclosed`;
+	}
+	/**
+	* The name of the custom event fired after this side-panel is closed upon a user gesture.
+	*/
+	static get eventClose() {
+		return `${prefix}-side-panel-closed`;
+	}
+	/**
+	* The name of the custom event fired on clicking the navigate back button
+	*/
+	static get eventNavigateBack() {
+		return `${prefix}-side-panel-navigate-back`;
+	}
+	static {
+		this.styles = side_panel_default$1;
+	}
 };
-CDSSidePanel.styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-__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: `${carbonPrefix}-button`,
-    })
-], CDSSidePanel.prototype, "_actions", void 0);
-__decorate([
-    state()
-], CDSSidePanel.prototype, "_doAnimateTitle", void 0);
-__decorate([
-    state()
-], CDSSidePanel.prototype, "_isOpen", void 0);
-__decorate([
-    state()
-], CDSSidePanel.prototype, "_containerScrollTop", void 0);
-__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, "_slugCloseSize", void 0);
-__decorate([
-    state()
-], CDSSidePanel.prototype, "_customHeaderElements", void 0);
-__decorate([
-    HostListener('keydown')
-], CDSSidePanel.prototype, "_handleHostKeydown", void 0);
-__decorate([
-    HostListener('document:keydown')
-    // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-], CDSSidePanel.prototype, "_handleKeydown", void 0);
-__decorate([
-    property({ reflect: true, attribute: 'animate-title', type: Boolean })
-], CDSSidePanel.prototype, "animateTitle", void 0);
-__decorate([
-    property({
-        reflect: true,
-        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, attribute: 'condensed-actions' })
-], CDSSidePanel.prototype, "condensedActions", void 0);
-__decorate([
-    property({ reflect: true, attribute: 'current-step', type: Number })
-], CDSSidePanel.prototype, "currentStep", void 0);
-__decorate([
-    property({ attribute: 'include-overlay', type: Boolean, reflect: true })
-], CDSSidePanel.prototype, "includeOverlay", void 0);
-__decorate([
-    property({ reflect: true, attribute: 'label-text' })
-], CDSSidePanel.prototype, "labelText", void 0);
-__decorate([
-    property({ reflect: true, attribute: 'navigation-back-icon-description' })
-], CDSSidePanel.prototype, "navigationBackIconDescription", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], CDSSidePanel.prototype, "open", void 0);
-__decorate([
-    property({ reflect: true, type: String })
-], CDSSidePanel.prototype, "placement", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })
-], CDSSidePanel.prototype, "preventCloseOnClickOutside", void 0);
-__decorate([
-    property({
-        reflect: true,
-        attribute: 'selector-initial-focus',
-        type: String,
-    })
-], CDSSidePanel.prototype, "selectorInitialFocus", void 0);
-__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 })
-], CDSSidePanel.prototype, "size", void 0);
-__decorate([
-    property({ attribute: 'slide-in', type: Boolean, reflect: true })
-], CDSSidePanel.prototype, "slideIn", void 0);
-__decorate([
-    property({ reflect: false, type: String })
-], CDSSidePanel.prototype, "title", void 0);
-CDSSidePanel = __decorate([
-    carbonElement(`${prefix}-side-panel`)
-], CDSSidePanel);
-var CDSSidePanel_default = CDSSidePanel;
+__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: `${carbonPrefix}-button`
+})], CDSSidePanel.prototype, "_actions", void 0);
+__decorate([state()], CDSSidePanel.prototype, "_doAnimateTitle", void 0);
+__decorate([state()], CDSSidePanel.prototype, "_isOpen", void 0);
+__decorate([state()], CDSSidePanel.prototype, "_containerScrollTop", void 0);
+__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, "_slugCloseSize", void 0);
+__decorate([state()], CDSSidePanel.prototype, "_customHeaderElements", void 0);
+__decorate([HostListener("keydown")], CDSSidePanel.prototype, "_handleHostKeydown", void 0);
+__decorate([HostListener("document:keydown")], CDSSidePanel.prototype, "_handleKeydown", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "animate-title",
+	type: Boolean
+})], CDSSidePanel.prototype, "animateTitle", void 0);
+__decorate([property({
+	reflect: true,
+	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,
+	attribute: "condensed-actions"
+})], CDSSidePanel.prototype, "condensedActions", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "current-step",
+	type: Number
+})], CDSSidePanel.prototype, "currentStep", void 0);
+__decorate([property({
+	attribute: "include-overlay",
+	type: Boolean,
+	reflect: true
+})], CDSSidePanel.prototype, "includeOverlay", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "label-text"
+})], CDSSidePanel.prototype, "labelText", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "navigation-back-icon-description"
+})], CDSSidePanel.prototype, "navigationBackIconDescription", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSSidePanel.prototype, "open", void 0);
+__decorate([property({
+	reflect: true,
+	type: String
+})], CDSSidePanel.prototype, "placement", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "prevent-close-on-click-outside"
+})], CDSSidePanel.prototype, "preventCloseOnClickOutside", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "selector-initial-focus",
+	type: String
+})], CDSSidePanel.prototype, "selectorInitialFocus", void 0);
+__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
+})], CDSSidePanel.prototype, "size", void 0);
+__decorate([property({
+	attribute: "slide-in",
+	type: Boolean,
+	reflect: true
+})], CDSSidePanel.prototype, "slideIn", void 0);
+__decorate([property({
+	reflect: false,
+	type: String
+})], CDSSidePanel.prototype, "title", void 0);
+CDSSidePanel = __decorate([carbonElement(`${prefix}-side-panel`)], CDSSidePanel);
+var side_panel_default = CDSSidePanel;
 
-export { SIDE_PANEL_PLACEMENT, SIDE_PANEL_SIZE, CDSSidePanel_default as default };
-//# sourceMappingURL=side-panel.js.map
+//#endregion
+export { SIDE_PANEL_PLACEMENT, SIDE_PANEL_SIZE, side_panel_default as default };
+//# sourceMappingURL=side-panel.js.map