@carbon/web-components 2.61.0 → 2.62.0

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

@@ -1 +1 @@
-{"version":3,"file":"side-panel.js","names":["customElement"],"sources":["../../../src/components/side-panel/side-panel.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs';\nimport { selectorTabbable } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport ArrowLeft16 from '@carbon/icons/es/arrow--left/16.js';\nimport Close20 from '@carbon/icons/es/close/20.js';\nimport { moderate02 } from '@carbon/motion';\nimport '../button/index';\nimport '../icon-button/index';\nimport '../layer/index';\nimport Handle from '../../globals/internal/handle';\nimport '../button/button-set-base';\n\nexport { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT };\n\nconst PRECEDING =\n  Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;\n\nconst FOLLOWING =\n  Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;\n\nconst blockClass = `${prefix}--side-panel`;\nconst blockClassActionSet = `${prefix}--action-set`;\n\n/**\n * Observes resize of the given element with the given resize observer.\n *\n * @param observer The resize observer.\n * @param elem The element to observe the resize.\n */\nconst observeResize = (observer: ResizeObserver, elem: Element) => {\n  if (!elem) {\n    return null;\n  }\n  observer.observe(elem);\n  return {\n    release() {\n      observer.unobserve(elem);\n      return null;\n    },\n  } as Handle;\n};\n\n/**\n * Tries to focus on the given elements and bails out if one of them is successful.\n *\n * @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n */\nfunction tryFocusElems(elems: NodeListOf<HTMLElement>, reverse: boolean) {\n  if (!reverse) {\n    for (let i = 0; i < elems.length; ++i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  } else {\n    for (let i = elems.length - 1; i >= 0; --i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\n/**\n * SidePanel.\n *\n * @deprecated Use Carbon for IBM Products `side-panel` component.\n *   This component has been deprecated in `@carbon/web-components` and will instead be maintained\n *   in the Carbon for IBM Products library:\n *   https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components\n * @element cds-custom-side-panel\n * @csspart dialog The dialog.\n * @fires cds-custom-side-panel-beingclosed\n *   The custom event fired before this side-panel is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this side-panel.\n * @fires cds-custom-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.\n * @fires cds-custom-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)\n */\n@customElement(`${prefix}-side-panel`)\nclass CDSSidePanel extends HostListenerMixin(LitElement) {\n  /**\n   * The handle for observing resize of the parent element of this element.\n   */\n  private _hObserveResize: Handle | null = null;\n\n  /**\n   * The element that had focus before this side-panel gets open.\n   */\n  private _launcher: Element | null = null;\n\n  /**\n   * Node to track focus going outside of side-panel content.\n   */\n  @query('#start-sentinel')\n  private _startSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track focus going outside of side-panel content.\n   */\n  @query('#end-sentinel')\n  private _endSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track side panel.\n   */\n  @query(`.${blockClass}`)\n  private _sidePanel!: HTMLDivElement;\n\n  @query(`.${blockClass}__animated-scroll-wrapper`)\n  private _animateScrollWrapper?: HTMLElement;\n\n  @query(`.${blockClass}__label-text`)\n  private _label!: HTMLElement;\n\n  @query(`.${blockClass}__title-text`)\n  private _title!: HTMLElement;\n\n  @query(`.${blockClass}__subtitle-text`)\n  private _subtitle!: HTMLElement;\n\n  @query(`.${blockClass}__inner-content`)\n  private _innerContent!: HTMLElement;\n\n  @queryAssignedElements({ slot: 'actions', selector: `${prefix}-button` })\n  private _actions!: Array<HTMLElement>;\n\n  @state()\n  _doAnimateTitle = true;\n\n  @state()\n  _isOpen = false;\n\n  @state()\n  _containerScrollTop = -16;\n\n  @state()\n  _hasSubtitle = false;\n\n  @state()\n  _hasSlug = false;\n\n  @state()\n  _hasActionToolbar = false;\n\n  @state()\n  _actionsCount = 0;\n\n  @state()\n  _slugCloseSize = 'sm';\n\n  /**\n   * Handles `blur` event on this element.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   * @param event.relatedTarget The event relatedTarget.\n   */\n  @HostListener('shadowRoot:focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n    const {\n      open,\n      _startSentinelNode: startSentinelNode,\n      _endSentinelNode: endSentinelNode,\n    } = this;\n\n    const oldContains = target !== this && this.contains(target as Node);\n    const currentContains =\n      relatedTarget !== this &&\n      (this.contains(relatedTarget as Node) ||\n        (this.shadowRoot?.contains(relatedTarget as Node) &&\n          relatedTarget !== (startSentinelNode as Node) &&\n          relatedTarget !== (endSentinelNode as Node)));\n\n    // Performs focus wrapping if _all_ of the following is met:\n    // * This side-panel is open\n    // * The viewport still has focus\n    // * SidePanel body used to have focus but no longer has focus\n    const { selectorTabbable: selectorTabbableForSidePanel } = this\n      .constructor as typeof CDSSidePanel;\n\n    if (open && relatedTarget && oldContains && !currentContains) {\n      const comparisonResult = (target as Node).compareDocumentPosition(\n        relatedTarget as Node\n      );\n\n      if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {\n        await (this.constructor as typeof CDSSidePanel)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForSidePanel),\n            true\n          ) &&\n          relatedTarget !== this\n        ) {\n          this.focus();\n        }\n      } else if (\n        relatedTarget === endSentinelNode ||\n        comparisonResult & FOLLOWING\n      ) {\n        await (this.constructor as typeof CDSSidePanel)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForSidePanel),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      }\n    }\n  };\n\n  @HostListener('document:keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedClose(target);\n    }\n  };\n\n  private _reducedMotion =\n    typeof window !== 'undefined' && window?.matchMedia\n      ? window.matchMedia('(prefers-reduced-motion: reduce)')\n      : { matches: true };\n\n  /**\n   * Handles `click` event on the side-panel container.\n   *\n   * @param event The event.\n   */\n  private _handleClickOnOverlay(event: MouseEvent) {\n    if (!this.preventCloseOnClickOutside) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  }\n\n  /**\n   * Handles `click` event on the side-panel container.\n   *\n   * @param event The event.\n   */\n  private _handleCloseClick(event: MouseEvent) {\n    this._handleUserInitiatedClose(event.target);\n  }\n\n  /**\n   * Handles user-initiated close request of this side-panel.\n   *\n   * @param triggeredBy The element that triggered this close request.\n   */\n  private _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSSidePanel).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSSidePanel).eventClose,\n            init\n          )\n        );\n      }\n    }\n  }\n\n  private _handleNavigateBack(triggeredBy: EventTarget | null) {\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSSidePanel).eventNavigateBack,\n        {\n          composed: true,\n          detail: {\n            triggeredBy,\n          },\n        }\n      )\n    );\n  }\n\n  private _adjustPageContent = () => {\n    // sets/resets styles based on slideIn property and selectorPageContent;\n    if (this.selectorPageContent) {\n      const pageContentEl: HTMLElement | null = document.querySelector(\n        this.selectorPageContent\n      );\n\n      if (pageContentEl) {\n        const newValues = {\n          marginInlineStart: '',\n          marginInlineEnd: '',\n          inlineSize: '',\n          transition: this._reducedMotion.matches\n            ? 'none'\n            : `all ${moderate02}`,\n          transitionProperty: 'margin-inline-start, margin-inline-end',\n        };\n        if (this.open) {\n          newValues.inlineSize = 'auto';\n          if (this.placement === 'left') {\n            newValues.marginInlineStart = `${this?._sidePanel?.offsetWidth}px`;\n          } else {\n            newValues.marginInlineEnd = `${this?._sidePanel?.offsetWidth}px`;\n          }\n        }\n\n        Object.keys(newValues).forEach((key) => {\n          pageContentEl.style[key] = newValues[key];\n        });\n      }\n    }\n  };\n\n  private _checkSetOpen = () => {\n    const { _sidePanel: sidePanel } = this;\n    if (sidePanel && this._isOpen) {\n      if (this._reducedMotion) {\n        this._isOpen = false;\n      } else {\n        // wait until the side panel has transitioned off the screen to remove\n        sidePanel.addEventListener('transitionend', () => {\n          this._isOpen = false;\n        });\n      }\n    } else {\n      // allow the html to render before animating in the side panel\n      this._isOpen = this.open;\n    }\n  };\n\n  private _checkUpdateIconButtonSizes = () => {\n    const slug = this.querySelector(`${prefix}-slug`);\n    const otherButtons = this?.shadowRoot?.querySelectorAll(\n      '#nav-back-button, #close-button'\n    );\n\n    let iconButtonSize = 'sm';\n\n    if (slug || otherButtons?.length) {\n      const actions = this?.querySelectorAll?.(\n        `${prefix}-button[slot='actions']`\n      );\n\n      if (actions?.length && /l/.test(this.size)) {\n        iconButtonSize = 'md';\n      }\n    }\n\n    if (slug) {\n      slug?.setAttribute('size', iconButtonSize);\n    }\n\n    if (otherButtons) {\n      [...otherButtons].forEach((btn) => {\n        btn.setAttribute('size', iconButtonSize);\n      });\n    }\n  };\n\n  private _handleSlugChange(e: Event) {\n    this._checkUpdateIconButtonSizes();\n    const childItems = (e.target as HTMLSlotElement).assignedElements();\n\n    this._hasSlug = childItems.length > 0;\n  }\n\n  private _handleSubtitleChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const subtitle = target?.assignedElements();\n\n    this._hasSubtitle = subtitle.length > 0;\n  }\n\n  private _handleActionToolbarChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const toolbarActions = target?.assignedElements();\n\n    this._hasActionToolbar = toolbarActions && toolbarActions.length > 0;\n\n    if (this._hasActionToolbar) {\n      for (const toolbarAction of toolbarActions) {\n        // toolbar actions size should always be sm\n        toolbarAction.setAttribute('size', 'sm');\n      }\n    }\n  }\n\n  private _checkUpdateActionSizes = () => {\n    if (this._actions) {\n      for (let i = 0; i < this._actions.length; i++) {\n        this._actions[i].setAttribute(\n          'size',\n          this.condensedActions ? 'lg' : 'xl'\n        );\n      }\n    }\n  };\n\n  private _maxActions = 3;\n  private _handleActionsChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const actions = target?.assignedElements();\n\n    // update slug size\n    this._checkUpdateIconButtonSizes();\n\n    const actionsCount = actions?.length ?? 0;\n    if (actionsCount > this._maxActions) {\n      this._actionsCount = this._maxActions;\n      if (process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.error(`Too many side-panel actions, max ${this._maxActions}.`);\n      }\n    } else {\n      this._actionsCount = actionsCount;\n    }\n\n    for (let i = 0; i < actions?.length; i++) {\n      if (i + 1 > this._maxActions) {\n        // hide excessive side panel actions\n        actions[i].setAttribute('hidden', 'true');\n        actions[i].setAttribute(\n          `data-actions-limit-${this._maxActions}-exceeded`,\n          `${actions.length}`\n        );\n      } else {\n        actions[i].classList.add(`${blockClassActionSet}__action-button`);\n      }\n    }\n    this._checkUpdateActionSizes();\n  }\n\n  private _checkSetDoAnimateTitle = () => {\n    let canDoAnimateTitle = false;\n\n    if (\n      this._sidePanel &&\n      this.open &&\n      this.animateTitle &&\n      this?.title?.length &&\n      !this._reducedMotion.matches\n    ) {\n      const scrollAnimationDistance = this._getScrollAnimationDistance();\n      // used to calculate the header moves\n      this?._sidePanel?.style?.setProperty(\n        `--${blockClass}--scroll-animation-distance`,\n        `${scrollAnimationDistance}`\n      );\n\n      let scrollEl = this._animateScrollWrapper;\n      if (!scrollEl && this.animateTitle && !this._doAnimateTitle) {\n        scrollEl = this._innerContent;\n      }\n\n      if (scrollEl) {\n        const innerComputed = window?.getComputedStyle(this._innerContent);\n        const innerPaddingHeight = innerComputed\n          ? parseFloat(innerComputed?.paddingTop) +\n            parseFloat(innerComputed?.paddingBottom)\n          : 0;\n\n        canDoAnimateTitle =\n          (!!this.labelText || !!this._hasActionToolbar || this._hasSubtitle) &&\n          scrollEl.scrollHeight - scrollEl.clientHeight >=\n            scrollAnimationDistance + innerPaddingHeight;\n      }\n    }\n\n    this._doAnimateTitle = canDoAnimateTitle;\n  };\n\n  /**\n   * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.\n   */\n  // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _resizeObserver = new ResizeObserver(() => {\n    if (this._sidePanel) {\n      this._checkSetDoAnimateTitle();\n    }\n  });\n\n  private _getScrollAnimationDistance = () => {\n    const labelHeight = this?._label?.offsetHeight ?? 0;\n    const subtitleHeight = this?._subtitle?.offsetHeight ?? 0;\n    const titleVerticalBorder = this._hasActionToolbar\n      ? this._title.offsetHeight - this._title.clientHeight\n      : 0;\n\n    return labelHeight + subtitleHeight + titleVerticalBorder;\n  };\n\n  private _scrollObserver = () => {\n    const scrollTop = this._animateScrollWrapper?.scrollTop ?? 0;\n    const scrollAnimationDistance = this._getScrollAnimationDistance();\n    this?._sidePanel?.style?.setProperty(\n      `--${blockClass}--scroll-animation-progress`,\n      `${\n        Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance\n      }`\n    );\n  };\n\n  private _handleCurrentStepUpdate = () => {\n    const scrollable = this._animateScrollWrapper ?? this._innerContent;\n    if (scrollable) {\n      scrollable.scrollTop = 0;\n    }\n  };\n\n  /**\n   * Determines if the title will animate on scroll\n   */\n  @property({ reflect: true, attribute: 'animate-title', type: Boolean })\n  animateTitle = true;\n\n  /**\n   * Sets the close button icon description\n   */\n  @property({ reflect: true, attribute: 'close-icon-description' })\n  closeIconDescription = 'Close';\n\n  /**\n   * Determines whether the side panel should render the condensed version (affects action buttons primarily)\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'condensed-actions' })\n  condensedActions = false;\n\n  /**\n   * Sets the current step of the side panel\n   */\n  @property({ reflect: true, attribute: 'current-step', type: Number })\n  currentStep;\n\n  /**\n   * Determines whether the side panel should render with an overlay\n   */\n  @property({ attribute: 'include-overlay', type: Boolean, reflect: true })\n  includeOverlay = false;\n\n  /**\n   * Sets the label text which will display above the title text\n   */\n  @property({ reflect: true, attribute: 'label-text' })\n  labelText;\n\n  /**\n   * Sets the icon description for the navigation back icon button\n   */\n  @property({ reflect: true, attribute: 'navigation-back-icon-description' })\n  navigationBackIconDescription = 'Back';\n\n  /**\n   * `true` if the side-panel should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * SidePanel placement.\n   */\n  @property({ reflect: true, type: String })\n  placement = SIDE_PANEL_PLACEMENT.RIGHT;\n\n  /**\n   * Prevent closing on click outside of side-panel\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n  preventCloseOnClickOutside = false;\n\n  /**\n   * The initial location of focus in the side panel\n   */\n  @property({\n    reflect: true,\n    attribute: 'selector-initial-focus',\n    type: String,\n  })\n  selectorInitialFocus;\n\n  /**\n   * Selector for page content, used to push content to side except\n   */\n  @property({ reflect: true, attribute: 'selector-page-content' })\n  selectorPageContent = '';\n\n  /**\n   * SidePanel size.\n   */\n  @property({ reflect: true, type: String })\n  size = SIDE_PANEL_SIZE.MEDIUM;\n\n  /**\n   * Determines if this panel slides in\n   */\n  @property({ attribute: 'slide-in', type: Boolean, reflect: true })\n  slideIn = false;\n\n  /**\n   * Sets the title text\n   */\n  @property({ reflect: false, type: String })\n  title;\n\n  async connectObservers() {\n    await this.updateComplete;\n    this._hObserveResize = observeResize(this._resizeObserver, this._sidePanel);\n  }\n\n  disconnectObservers() {\n    if (this._hObserveResize) {\n      this._hObserveResize = this._hObserveResize.release();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.disconnectObservers();\n    this.connectObservers();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.disconnectObservers();\n  }\n\n  render() {\n    const {\n      closeIconDescription,\n      condensedActions,\n      currentStep,\n      includeOverlay,\n      labelText,\n      navigationBackIconDescription,\n      open,\n      placement,\n      size,\n      slideIn,\n      title,\n    } = this;\n\n    if (!open && !this._isOpen) {\n      return html``;\n    }\n\n    const actionsMultiple = ['', 'single', 'double', 'triple'][\n      this._actionsCount\n    ];\n\n    const titleTemplate = html`<div\n      class=${`${blockClass}__title`}\n      ?no-label=${!!labelText}>\n      <h2 class=${title ? `${blockClass}__title-text` : ''} title=${title}>\n        ${title}\n      </h2>\n\n      ${this._doAnimateTitle\n        ? html`<h2\n            class=${`${blockClass}__collapsed-title-text`}\n            title=${title}\n            aria-hidden=\"true\">\n            ${title}\n          </h2>`\n        : ''}\n    </div>`;\n\n    const headerHasTitleClass = this.title\n      ? ` ${blockClass}__header--has-title `\n      : '';\n    const headerTemplate = html`\n      <div\n        class=${`${blockClass}__header${headerHasTitleClass}`}\n        ?detail-step=${currentStep > 0}\n        ?no-title-animation=${!this._doAnimateTitle}\n        ?reduced-motion=${this._reducedMotion.matches}>\n        <!-- render back button -->\n        ${currentStep > 0\n          ? html`<cds-custom-icon-button\n              align=\"bottom-left\"\n              aria-label=${navigationBackIconDescription}\n              kind=\"ghost\"\n              size=\"sm\"\n              class=${`${prefix}--btn ${blockClass}__navigation-back-button`}\n              @click=${this._handleNavigateBack}>\n              ${iconLoader(ArrowLeft16, { slot: 'icon' })}\n              <span slot=\"tooltip-content\">\n                ${navigationBackIconDescription}\n              </span>\n            </cds-custom-icon-button>`\n          : ''}\n\n        <!-- render title label -->\n        ${title?.length && labelText?.length\n          ? html` <p class=${`${blockClass}__label-text`}>${labelText}</p>`\n          : ''}\n\n        <!-- title -->\n        ${title ? titleTemplate : ''}\n\n        <!-- render slug and close button area -->\n        <div class=${`${blockClass}__slug-and-close`}>\n          <slot name=\"slug\" @slotchange=${this._handleSlugChange}></slot>\n          <!-- {normalizedSlug} -->\n          <cds-custom-icon-button\n            align=\"bottom-right\"\n            aria-label=${closeIconDescription}\n            kind=\"ghost\"\n            size=\"sm\"\n            class=${`${blockClass}__close-button`}\n            @click=${this._handleCloseClick}>\n            ${iconLoader(Close20, { slot: 'icon' })}\n            <span slot=\"tooltip-content\"> ${closeIconDescription} </span>\n          </cds-custom-icon-button>\n        </div>\n\n        <!-- render sub title -->\n        <p\n          class=${this._hasSubtitle ? `${blockClass}__subtitle-text` : ''}\n          ?hidden=${!this._hasSubtitle}\n          ?no-title-animation=${!this._doAnimateTitle}\n          ?no-action-toolbar=${!this._hasActionToolbar}\n          ?no-title=${!title}>\n          <slot\n            name=\"subtitle\"\n            @slotchange=${this._handleSubtitleChange}></slot>\n        </p>\n\n        <div\n          class=${this._hasActionToolbar ? `${blockClass}__action-toolbar` : ''}\n          ?hidden=${!this._hasActionToolbar}\n          ?no-title-animation=${!this._doAnimateTitle}>\n          <slot\n            name=\"action-toolbar\"\n            @slotchange=${this._handleActionToolbarChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const mainTemplate = html`<div\n      class=${`${blockClass}__inner-content`}\n      ?scrolls=${!this._doAnimateTitle}>\n      <cds-custom-layer level=\"1\">\n        <slot></slot>\n      </cds-custom-layer>\n    </div> `;\n\n    const sidePanelAnimateTitleClass = this._doAnimateTitle\n      ? ` ${blockClass}--animated-title`\n      : '';\n\n    return html`\n      <div\n        class=${`${blockClass}${sidePanelAnimateTitleClass}`}\n        part=\"dialog\"\n        role=\"complementary\"\n        placement=\"${placement}\"\n        ?has-slug=${this._hasSlug}\n        ?open=${this._isOpen}\n        ?opening=${open && !this._isOpen}\n        ?closing=${!open && this._isOpen}\n        ?condensed-actions=${condensedActions}\n        ?overlay=${includeOverlay || slideIn}\n        ?slide-in=${slideIn}\n        size=${size}>\n        <a\n          id=\"start-sentinel\"\n          class=\"sentinel\"\n          hidden\n          href=\"javascript:void 0\"\n          role=\"navigation\"></a>\n\n        ${this._doAnimateTitle\n          ? html`<div class=${`${blockClass}__animated-scroll-wrapper`} scrolls>\n              ${headerTemplate} ${mainTemplate}\n            </div>`\n          : html` ${headerTemplate} ${mainTemplate}`}\n\n        <cds-custom-button-set-base\n          class=${`${blockClass}__actions-container`}\n          ?hidden=${this._actionsCount === 0}\n          ?condensed=${condensedActions}\n          actions-multiple=${actionsMultiple}\n          size=${size}>\n          <slot name=\"actions\" @slotchange=${this._handleActionsChange}></slot>\n        </cds-custom-button-set-base>\n\n        <a\n          id=\"end-sentinel\"\n          class=\"sentinel\"\n          hidden\n          href=\"javascript:void 0\"\n          role=\"navigation\"></a>\n      </div>\n\n      ${includeOverlay\n        ? html`<div\n            ?slide-in=${slideIn}\n            class=${`${blockClass}__overlay`}\n            ?open=${this.open}\n            ?opening=${open && !this._isOpen}\n            ?closing=${!open && this._isOpen}\n            tabindex=\"-1\"\n            @click=${this._handleClickOnOverlay}></div>`\n        : ''}\n    `;\n  }\n\n  async updated(changedProperties) {\n    if (changedProperties.has('condensedActions')) {\n      this._checkUpdateActionSizes();\n    }\n\n    if (changedProperties.has('currentStep')) {\n      this._handleCurrentStepUpdate();\n    }\n\n    if (changedProperties.has('_doAnimateTitle')) {\n      this?._animateScrollWrapper?.removeEventListener(\n        'scroll',\n        this._scrollObserver\n      );\n\n      if (this._doAnimateTitle) {\n        this?._animateScrollWrapper?.addEventListener(\n          'scroll',\n          this._scrollObserver\n        );\n      } else {\n        this?._sidePanel?.style?.setProperty(\n          `--${blockClass}--scroll-animation-progress`,\n          '0'\n        );\n      }\n    }\n\n    if (\n      changedProperties.has('_isOpen') ||\n      changedProperties.has('animateTitle')\n    ) {\n      /* @state property changed */\n      this._checkSetDoAnimateTitle();\n    }\n\n    if (\n      changedProperties.has('slideIn') ||\n      changedProperties.has('open') ||\n      changedProperties.has('includeOverlay')\n    ) {\n      this._adjustPageContent();\n    }\n\n    if (changedProperties.has('open')) {\n      this._checkSetOpen();\n\n      this.disconnectObservers();\n      if (this.open) {\n        this.connectObservers();\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n        this._launcher = this.ownerDocument!.activeElement;\n        const focusNode =\n          this.selectorInitialFocus &&\n          this.querySelector(this.selectorInitialFocus);\n\n        await (this.constructor as typeof CDSSidePanel)._delay();\n        if (focusNode) {\n          // For cases where a `carbon-web-components` component (e.g. `<cds-custom-button>`) being `primaryFocusNode`,\n          // where its first update/render cycle that makes it focusable happens after `<cds-custom-side-panel>`'s first update/render cycle\n          (focusNode as HTMLElement).focus();\n        } else if (\n          !tryFocusElems(\n            this.querySelectorAll(\n              (this.constructor as typeof CDSSidePanel).selectorTabbable\n            ),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      } else if (\n        this._launcher &&\n        typeof (this._launcher as HTMLElement).focus === 'function'\n      ) {\n        (this._launcher as HTMLElement).focus();\n        this._launcher = null;\n      }\n    }\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  private static _delay(ms = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * The name of the custom event fired before this side-panel is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this side-panel.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-side-panel-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this side-panel is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-side-panel-closed`;\n  }\n\n  /**\n   * The name of the custom event fired on clicking the navigate back button\n   */\n  static get eventNavigateBack() {\n    return `${prefix}-side-panel-navigate-back`;\n  }\n}\n\nexport default CDSSidePanel;\n"],"mappings":"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"}
+{"version":3,"file":"side-panel.js","names":["styles","customElement"],"sources":["../../../src/components/side-panel/side-panel.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2023, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs';\nimport styles from './side-panel.scss?lit';\nimport { selectorTabbable } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport ArrowLeft16 from '@carbon/icons/es/arrow--left/16';\nimport Close16 from '@carbon/icons/es/close/16';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport { moderate02 } from '@carbon/motion';\nimport Handle from '../../globals/internal/handle';\nimport '../button/index';\nimport '../icon-button/index';\nimport '../layer/index';\nimport '../action-set/index.js';\nimport '../resizer/index.js';\n\nexport { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT };\n\nconst blockClass = `${prefix}--side-panel`;\n\n/**\n * Observes resize of the given element with the given resize observer.\n *\n * @param observer The resize observer.\n * @param elem The element to observe the resize.\n */\nconst observeResize = (observer: ResizeObserver, elem: Element) => {\n  if (!elem) {\n    return null;\n  }\n  observer.observe(elem);\n  return {\n    release() {\n      observer.unobserve(elem);\n      return null;\n    },\n  } as Handle;\n};\n\n/**\n * SidePanel.\n *\n * @element cds-custom-side-panel\n * @csspart dialog The dialog.\n * @fires cds-custom-side-panel-beingclosed\n *   The custom event fired before this side-panel is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this side-panel.\n * @fires cds-custom-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.\n * @fires cds-custom-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)\n */\n@customElement(`${prefix}-side-panel`)\nclass CDSSidePanel extends HostListenerMixin(LitElement) {\n  /**\n   * The handle for observing resize of the parent element of this element.\n   */\n  private _hObserveResize: Handle | null = null;\n\n  /**\n   * The element that had focus before this side-panel gets open.\n   */\n  private _launcher: Element | null = null;\n\n  /**\n   * Node to track side panel.\n   */\n  @query(`.${blockClass}`)\n  private _sidePanel!: HTMLDivElement;\n\n  @query(`.${blockClass}__animated-scroll-wrapper`)\n  private _animateScrollWrapper?: HTMLElement;\n\n  @query(`.${blockClass}__label-text`)\n  private _label!: HTMLElement;\n\n  @query(`.${blockClass}__title-text`)\n  private _title!: HTMLElement;\n\n  @query(`.${blockClass}__subtitle-text`)\n  private _subtitle!: HTMLElement;\n\n  @query(`.${blockClass}__inner-content`)\n  private _innerContent!: HTMLElement;\n\n  /**\n   * Reference to the resizer handle element\n   */\n  @query(`${prefix}-resizer-handle`)\n  private _resizerHandle?: HTMLElement;\n\n  @state()\n  _doAnimateTitle = true;\n\n  @state()\n  _isOpen = false;\n\n  @state()\n  _containerScrollTop = -16;\n\n  @state()\n  _hasSubtitle = false;\n\n  @state()\n  _hasSlug = false;\n\n  @state()\n  _hasActionToolbar = false;\n\n  @state()\n  _actionsCount = 0;\n\n  @state()\n  _actionsMultiple: 'single' | 'double' | 'triple' | '' = '';\n\n  @state()\n  _slugCloseSize = 'sm';\n\n  @state()\n  _customHeaderElements: Element[] = [];\n\n  @state()\n  _customHeaderHidden = false;\n\n  @state()\n  _sidePanelWidth?: number;\n\n  @state()\n  _accumulatedDelta = 0;\n\n  /**\n   * Get focusable elements.\n   *\n   * Querying all tabbable items.\n   *\n   * @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.\n   */\n  private getFocusable(): {\n    first: HTMLElement | undefined;\n    last: HTMLElement | undefined;\n    all: HTMLElement[];\n  } {\n    const elements: HTMLElement[] = [];\n\n    // Add back button if present (shadow DOM)\n    if (this.currentStep > 0) {\n      const backButton = this.shadowRoot?.querySelector<HTMLElement>(\n        `.${blockClass}__navigation-back-button`\n      );\n      if (backButton) {\n        elements.push(backButton);\n      }\n    }\n\n    // Add tabbable elements from above-title slot (light DOM - breadcrumbs, etc.)\n    const aboveTitleSlot = this.shadowRoot?.querySelector<HTMLSlotElement>(\n      'slot[name=\"above-title\"]'\n    );\n    if (aboveTitleSlot) {\n      const aboveTitleElements = aboveTitleSlot\n        .assignedElements({ flatten: true })\n        .flatMap((el) =>\n          Array.from(el.querySelectorAll<HTMLElement>(selectorTabbable))\n        );\n      elements.push(...aboveTitleElements);\n    }\n\n    // Add label text if present (shadow DOM)\n    const labelText = this.shadowRoot?.querySelector<HTMLElement>(\n      `.${blockClass}__label-text`\n    );\n    if (labelText) {\n      elements.push(labelText);\n    }\n\n    // Add title if present (shadow DOM)\n    const titleText = this.shadowRoot?.querySelector<HTMLElement>(\n      `.${blockClass}__title-text`\n    );\n    if (titleText) {\n      elements.push(titleText);\n    }\n\n    // Add slug elements if present (light DOM)\n    if (this._hasSlug) {\n      const slugElements = Array.from(\n        this.querySelectorAll<HTMLElement>(`${prefix}-slug`)\n      );\n      elements.push(...slugElements);\n    }\n\n    // Add close button if not hidden (shadow DOM)\n    if (!this.hideCloseButton) {\n      const closeButton = this.shadowRoot?.querySelector<HTMLElement>(\n        `.${blockClass}__close-button`\n      );\n      if (closeButton) {\n        elements.push(closeButton);\n      }\n    }\n\n    // Add subtitle if present (shadow DOM)\n    const subtitleText = this.shadowRoot?.querySelector<HTMLElement>(\n      `.${blockClass}__subtitle-text`\n    );\n    if (subtitleText && !subtitleText.hidden) {\n      elements.push(subtitleText);\n    }\n\n    // Add tabbable elements from below-title slot (light DOM)\n    const belowTitleSlot = this.shadowRoot?.querySelector<HTMLSlotElement>(\n      'slot[name=\"below-title\"]'\n    );\n    if (belowTitleSlot) {\n      const belowTitleElements = belowTitleSlot\n        .assignedElements({ flatten: true })\n        .flatMap((el) =>\n          Array.from(el.querySelectorAll<HTMLElement>(selectorTabbable))\n        );\n      elements.push(...belowTitleElements);\n    }\n\n    // Add action toolbar elements (light DOM)\n    const actionToolbarSlot = this.shadowRoot?.querySelector<HTMLSlotElement>(\n      'slot[name=\"action-toolbar\"]'\n    );\n    if (actionToolbarSlot) {\n      const actionToolbarElements = actionToolbarSlot\n        .assignedElements({ flatten: true })\n        .filter(\n          (el): el is HTMLElement =>\n            el instanceof HTMLElement &&\n            typeof (el as HTMLElement).focus === 'function'\n        );\n      elements.push(...actionToolbarElements);\n    }\n\n    // Add body content tabbable elements (light DOM - default slot)\n    const defaultSlot =\n      this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (defaultSlot) {\n      const bodyElements = defaultSlot\n        .assignedElements({ flatten: true })\n        .flatMap((el) =>\n          Array.from(el.querySelectorAll<HTMLElement>(selectorTabbable))\n        );\n      elements.push(...bodyElements);\n    }\n\n    // Add action buttons (light DOM)\n    const actionsSlot = this.shadowRoot?.querySelector<HTMLSlotElement>(\n      'slot[name=\"actions\"]'\n    );\n    if (actionsSlot) {\n      const actionElements = actionsSlot\n        .assignedElements({ flatten: true })\n        .filter(\n          (el): el is HTMLElement =>\n            el instanceof HTMLElement &&\n            typeof (el as HTMLElement).focus === 'function'\n        );\n      elements.push(...actionElements);\n    }\n\n    // Filter for focusable items\n    const all = elements.filter(\n      (el): el is HTMLElement => typeof el?.focus === 'function'\n    );\n\n    return {\n      first: all[0],\n      last: all[all.length - 1],\n      all,\n    };\n  }\n\n  /**\n   * Handle the keydown event.\n   * Trap the focus inside the side-panel by tracking keydown.key == `Tab`\n   *\n   * @param {KeyboardEvent} event The keyboard event object.\n   */\n  @HostListener('keydown')\n  protected _handleHostKeydown = (event: KeyboardEvent) => {\n    if (event.key === 'Tab' && !this.slideIn) {\n      const { first: _firstElement, last: _lastElement } = this.getFocusable();\n\n      if (\n        event.shiftKey &&\n        (this.shadowRoot?.activeElement === _firstElement ||\n          document.activeElement === _firstElement)\n      ) {\n        event.preventDefault();\n\n        _lastElement?.focus();\n      } else if (!event.shiftKey && document.activeElement === _lastElement) {\n        event.preventDefault();\n\n        _firstElement?.focus();\n      }\n    }\n  };\n\n  @HostListener('document:keydown')\n  // @ts-expect-error: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedClose(target);\n    }\n  };\n\n  private _reducedMotion =\n    typeof window !== 'undefined' && window?.matchMedia\n      ? window.matchMedia('(prefers-reduced-motion: reduce)')\n      : { matches: true };\n\n  /**\n   * Handles `click` event on the side-panel container.\n   *\n   * @param event The event.\n   */\n  private _handleClickOnOverlay(event: MouseEvent) {\n    if (!this.preventCloseOnClickOutside) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  }\n\n  /**\n   * Handles `click` event on the side-panel container.\n   *\n   * @param event The event.\n   */\n  private _handleCloseClick(event: MouseEvent) {\n    this._handleUserInitiatedClose(event.target);\n  }\n\n  /**\n   * Handles user-initiated close request of this side-panel.\n   *\n   * @param triggeredBy The element that triggered this close request.\n   */\n  private _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSSidePanel).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSSidePanel).eventClose,\n            init\n          )\n        );\n      }\n    }\n  }\n\n  private _handleNavigateBack(triggeredBy: EventTarget | null) {\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSSidePanel).eventNavigateBack,\n        {\n          composed: true,\n          detail: {\n            triggeredBy,\n          },\n        }\n      )\n    );\n  }\n\n  private _adjustPageContent = () => {\n    // sets/resets styles based on slideIn property and selectorPageContent;\n    if (this.selectorPageContent) {\n      const pageContentEl: HTMLElement | null = document.querySelector(\n        this.selectorPageContent\n      );\n\n      if (pageContentEl) {\n        const newValues = {\n          marginInlineStart: '',\n          marginInlineEnd: '',\n          inlineSize: '',\n          transition: this._reducedMotion.matches\n            ? 'none'\n            : `all ${moderate02}`,\n          transitionProperty: 'margin-inline-start, margin-inline-end',\n        };\n        if (this.open) {\n          newValues.inlineSize = 'auto';\n          if (this.placement === 'left') {\n            newValues.marginInlineStart = `${this?._sidePanel?.offsetWidth}px`;\n          } else {\n            newValues.marginInlineEnd = `${this?._sidePanel?.offsetWidth}px`;\n          }\n        }\n        if (this.slideIn) {\n          Object.keys(newValues).forEach((key) => {\n            pageContentEl.style[key] = newValues[key];\n          });\n        }\n      }\n    }\n  };\n\n  private _checkSetOpen = () => {\n    const { _sidePanel: sidePanel } = this;\n    if (sidePanel && this._isOpen) {\n      if (this._reducedMotion?.matches) {\n        this._isOpen = false;\n      } else {\n        // wait until the side panel has transitioned off the screen to remove\n        sidePanel.addEventListener('transitionend', () => {\n          this._isOpen = false;\n        });\n      }\n    } else if (this.open) {\n      // allow the html to render before animating in the side panel\n      // Use requestAnimationFrame to ensure the DOM is rendered before triggering animation\n      requestAnimationFrame(() => {\n        this._isOpen = this.open;\n      });\n    } else {\n      // When closing, set immediately\n      this._isOpen = false;\n    }\n  };\n\n  private _checkUpdateIconButtonSizes = () => {\n    const slug = this.querySelector(`${prefix}-slug`);\n    const otherButtons = this?.shadowRoot?.querySelectorAll(\n      '#nav-back-button, #close-button'\n    );\n\n    const actions = this?.querySelectorAll?.(\n      `${prefix}-button[slot='actions']`\n    );\n    const shouldUpgrade = actions?.length && /l/.test(this.size);\n\n    if (slug && shouldUpgrade) {\n      slug.setAttribute('size', 'md');\n    }\n\n    if (otherButtons) {\n      const iconButtonSize = shouldUpgrade ? 'md' : 'sm';\n      [...otherButtons].forEach((btn) => {\n        btn.setAttribute('size', iconButtonSize);\n      });\n    }\n  };\n\n  private _handleSlugChange(e: Event) {\n    this._checkUpdateIconButtonSizes();\n    const childItems = (e.target as HTMLSlotElement).assignedElements();\n\n    this._hasSlug = childItems.length > 0;\n  }\n\n  private _handleSubtitleChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const subtitle = target?.assignedElements();\n\n    this._hasSubtitle = subtitle.length > 0;\n  }\n\n  private _handleCustomHeaderSlotChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const customHeaderElms = target?.assignedElements();\n    customHeaderElms.forEach((el) => {\n      if (el instanceof HTMLElement) {\n        el.style.opacity = `calc(1 - var(--${blockClass}--scroll-animation-progress))`;\n        this._customHeaderElements.push(el);\n      }\n    });\n  }\n\n  private _handleActionToolbarChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const toolbarActions = target?.assignedElements();\n\n    this._hasActionToolbar = toolbarActions && toolbarActions.length > 0;\n\n    if (this._hasActionToolbar) {\n      for (let i = 0; i < toolbarActions.length; i++) {\n        const toolbarAction = toolbarActions[i];\n        // toolbar actions size should always be sm\n        toolbarAction.setAttribute('size', 'sm');\n\n        // Add leading button class to first button\n        if (i === 0) {\n          toolbarAction.classList.add(\n            `${blockClass}__action-toolbar-leading-button`\n          );\n        } else {\n          toolbarAction.classList.remove(\n            `${blockClass}__action-toolbar-leading-button`\n          );\n        }\n      }\n    }\n  }\n\n  private _handleActionsChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const actions = target?.assignedElements();\n\n    // update slug size\n    this._checkUpdateIconButtonSizes();\n\n    const actionsCount = actions?.length ?? 0;\n    this._actionsCount = actionsCount;\n\n    // Set actions-multiple attribute for container query styling\n    if (actionsCount === 1) {\n      this._actionsMultiple = 'single';\n    } else if (actionsCount === 2) {\n      this._actionsMultiple = 'double';\n    } else if (actionsCount === 3) {\n      this._actionsMultiple = 'triple';\n    } else {\n      this._actionsMultiple = '';\n    }\n  }\n\n  private _checkSetDoAnimateTitle = () => {\n    let canDoAnimateTitle = false;\n\n    if (\n      this._sidePanel &&\n      this.open &&\n      this.animateTitle &&\n      this?.title?.length &&\n      !this._reducedMotion.matches\n    ) {\n      const scrollAnimationDistance = this._getScrollAnimationDistance();\n      // used to calculate the header moves\n      this?._sidePanel?.style?.setProperty(\n        `--${blockClass}--scroll-animation-distance`,\n        `${scrollAnimationDistance}`\n      );\n\n      let scrollEl = this._animateScrollWrapper;\n      if (!scrollEl && this.animateTitle && !this._doAnimateTitle) {\n        scrollEl = this._innerContent;\n      }\n\n      if (scrollEl) {\n        const innerComputed = window?.getComputedStyle(this._innerContent);\n        const innerPaddingHeight = innerComputed\n          ? parseFloat(innerComputed?.paddingTop) +\n            parseFloat(innerComputed?.paddingBottom)\n          : 0;\n\n        canDoAnimateTitle =\n          (!!this.labelText || !!this._hasActionToolbar || this._hasSubtitle) &&\n          scrollEl.scrollHeight - scrollEl.clientHeight >=\n            scrollAnimationDistance + innerPaddingHeight;\n      }\n    }\n\n    this._doAnimateTitle = canDoAnimateTitle;\n  };\n\n  /**\n   * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.\n   */\n  private _resizeObserver = new ResizeObserver(() => {\n    if (this._sidePanel) {\n      this._checkSetDoAnimateTitle();\n    }\n  });\n\n  private _getScrollAnimationDistance = () => {\n    const labelHeight = this?._label?.offsetHeight ?? 0;\n    const subtitleHeight = this?._subtitle?.offsetHeight ?? 0;\n    const titleVerticalBorder = this._hasActionToolbar\n      ? this._title.offsetHeight - this._title.clientHeight\n      : 0;\n\n    return labelHeight + subtitleHeight + titleVerticalBorder;\n  };\n\n  private _scrollObserver = () => {\n    const scrollTop = this._animateScrollWrapper?.scrollTop ?? 0;\n    const scrollAnimationDistance = this._getScrollAnimationDistance();\n    const animationProgress =\n      Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance;\n\n    this?._sidePanel?.style?.setProperty(\n      `--${blockClass}--scroll-animation-progress`,\n      `${animationProgress}`\n    );\n\n    this._customHeaderHidden = animationProgress === 1;\n  };\n\n  /**\n   * Handles resize start event from the resizer handle\n   */\n  private _handleResizeStart = () => {\n    this._sidePanelWidth = this._sidePanel?.clientWidth;\n    this._accumulatedDelta = 0;\n  };\n\n  /**\n   * Handles resize drag event from the resizer handle\n   */\n  private _handleResizeDrag = (event: CustomEvent) => {\n    const { delta, isKeyboard, key } = event.detail;\n\n    if (!this._sidePanelWidth) {\n      this._sidePanelWidth = this._sidePanel?.clientWidth;\n    }\n\n    // Handle Home/End keys specially (like React implementation)\n    if (isKeyboard && (key === 'Home' || key === 'End')) {\n      if (key === 'Home') {\n        // Home = maximize to 75vw\n        this.style.setProperty('--cds-side-panel-modified-size', '75vw');\n      } else {\n        // End = minimize to 16rem\n        this.style.setProperty('--cds-side-panel-modified-size', '16rem');\n      }\n      return;\n    }\n\n    let calculatedWidth: number;\n\n    if (isKeyboard) {\n      // For keyboard arrow keys, accumulate delta (like React implementation)\n      this._accumulatedDelta += delta;\n      calculatedWidth =\n        this._sidePanelWidth -\n        (this.placement === 'right'\n          ? this._accumulatedDelta\n          : -this._accumulatedDelta);\n    } else {\n      // For mouse events, use delta directly\n      calculatedWidth =\n        this._sidePanelWidth - (this.placement === 'right' ? delta : -delta);\n    }\n\n    // Remove transition during drag for smooth resizing\n    if (this._sidePanel?.style) {\n      this._sidePanel.style.transition = 'none';\n    }\n\n    // Clamp width between minimum (16rem = 256px) and maximum (75% of viewport)\n    const minWidth = 256; // 16rem\n    const maxWidth = window.innerWidth * 0.75;\n    const newWidth = Math.max(minWidth, Math.min(maxWidth, calculatedWidth));\n\n    // Apply the new width via CSS variable\n    this.style.setProperty('--cds-side-panel-modified-size', `${newWidth}px`);\n  };\n\n  /**\n   * Handles resize end event from the resizer handle\n   */\n  private _handleResizeEnd = () => {\n    this._accumulatedDelta = 0;\n    this._sidePanel?.style?.removeProperty('transition');\n    this._sidePanelWidth = this._sidePanel?.clientWidth;\n\n    // Update ARIA attributes on the resizer handle\n    if (this._resizerHandle) {\n      this._resizerHandle.setAttribute(\n        'aria-label',\n        `side panel is covering ${this._getPanelWidthPercent()}% of screen`\n      );\n      this._resizerHandle.setAttribute(\n        'aria-valuenow',\n        this._getPanelWidthPercent().toString()\n      );\n    }\n  };\n\n  /**\n   * Handles double-click/double-tap on resizer to reset size\n   */\n  private _handleResizeReset = () => {\n    // Get the default size for current size setting\n    const sizeMap = {\n      xs: '16rem',\n      sm: '20rem',\n      md: '30rem',\n      lg: '40rem',\n      xl: '65rem',\n      '2xl': '80rem',\n    };\n\n    const defaultSize = sizeMap[this.size] || sizeMap.md;\n    const defaultSizeInPx = parseFloat(defaultSize) * 16;\n\n    // Reset to default size (or 75vw if default is larger)\n    this._sidePanelWidth = Math.min(defaultSizeInPx, window.innerWidth * 0.75);\n\n    // Remove custom size\n    this.style.removeProperty('--cds-side-panel-modified-size');\n  };\n\n  /**\n   * Get the percentage of screen width the panel is covering\n   */\n  private _getPanelWidthPercent = (customWidth?: string): number => {\n    if (customWidth) {\n      const remValue = parseFloat(customWidth);\n      const remInPixels =\n        remValue *\n        parseFloat(getComputedStyle(document.documentElement).fontSize);\n      return Math.round((remInPixels / window.innerWidth) * 100);\n    }\n    return Math.round(\n      ((this._sidePanel?.clientWidth || 0) / window.innerWidth) * 100\n    );\n  };\n\n  private _handleCurrentStepUpdate = () => {\n    const scrollable = this._animateScrollWrapper ?? this._innerContent;\n    if (scrollable) {\n      scrollable.scrollTop = 0;\n    }\n  };\n\n  /**\n   * Determines if the title will animate on scroll\n   */\n  @property({ reflect: true, attribute: 'animate-title', type: Boolean })\n  animateTitle = true;\n\n  /**\n   * Sets the close button icon description\n   */\n  @property({\n    reflect: true,\n    attribute: 'close-icon-description',\n    type: String,\n  })\n  closeIconDescription = 'Close';\n\n  /**\n   * Sets the close button tooltip alignment\n   */\n  @property({\n    reflect: true,\n    attribute: 'close-icon-tooltip-alignment',\n    type: String,\n  })\n  closeIconTooltipAlignment = 'left';\n\n  /**\n   * Determines whether the side panel should render the condensed version (affects action buttons primarily)\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'condensed-actions' })\n  condensedActions = false;\n\n  /**\n   * Sets the current step of the side panel\n   */\n  @property({ reflect: true, attribute: 'current-step', type: Number })\n  currentStep;\n\n  /**\n   * Determines whether the side panel should render with an overlay\n   */\n  @property({ attribute: 'include-overlay', type: Boolean, reflect: true })\n  includeOverlay = false;\n\n  /**\n   * Sets the label text which will display above the title text\n   */\n  @property({ reflect: true, attribute: 'label-text' })\n  labelText;\n\n  /**\n   * Sets the icon description for the navigation back icon button\n   */\n  @property({ reflect: true, attribute: 'navigation-back-icon-description' })\n  navigationBackIconDescription = 'Back';\n\n  /**\n   * `true` if the side-panel should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * SidePanel placement.\n   */\n  @property({ reflect: true, type: String })\n  placement = SIDE_PANEL_PLACEMENT.RIGHT;\n\n  /**\n   * Prevent closing on click outside of side-panel\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n  preventCloseOnClickOutside = false;\n\n  /**\n   * The initial location of focus in the side panel\n   */\n  @property({\n    reflect: true,\n    attribute: 'selector-initial-focus',\n    type: String,\n  })\n  selectorInitialFocus;\n\n  /**\n   * Selector for page content, used to push content to side except\n   */\n  @property({ reflect: true, attribute: 'selector-page-content' })\n  selectorPageContent = '';\n\n  /**\n   * Show/hide the \"X\" close button\n   */\n  @property({ attribute: 'hide-close-button', type: Boolean })\n  hideCloseButton = false;\n\n  /**\n   * SidePanel size.\n   */\n  @property({ reflect: true, type: String })\n  size = SIDE_PANEL_SIZE.MEDIUM;\n\n  /**\n   * Determines if this panel slides in\n   */\n  @property({ attribute: 'slide-in', type: Boolean, reflect: true })\n  slideIn = false;\n\n  /**\n   * Determines if the side panel is resizable\n   */\n  @property({ type: Boolean, reflect: true })\n  resizable = false;\n\n  /**\n   * Sets the title text\n   */\n  @property({ reflect: false, type: String })\n  title;\n\n  async connectObservers() {\n    await this.updateComplete;\n    this._hObserveResize = observeResize(this._resizeObserver, this._sidePanel);\n  }\n\n  disconnectObservers() {\n    if (this._hObserveResize) {\n      this._hObserveResize = this._hObserveResize.release();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.disconnectObservers();\n    this.connectObservers();\n\n    // Listen for resize events from resizer handle\n    this.addEventListener(\n      'resize-start',\n      this._handleResizeStart as EventListener\n    );\n    this.addEventListener(\n      'resize-drag',\n      this._handleResizeDrag as EventListener\n    );\n    this.addEventListener('resize-end', this._handleResizeEnd as EventListener);\n    this.addEventListener(\n      'resize-reset',\n      this._handleResizeReset as EventListener\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.disconnectObservers();\n\n    // Remove resize event listeners\n    this.removeEventListener(\n      'resize-start',\n      this._handleResizeStart as EventListener\n    );\n    this.removeEventListener(\n      'resize-drag',\n      this._handleResizeDrag as EventListener\n    );\n    this.removeEventListener(\n      'resize-end',\n      this._handleResizeEnd as EventListener\n    );\n    this.removeEventListener(\n      'resize-reset',\n      this._handleResizeReset as EventListener\n    );\n  }\n\n  render() {\n    const {\n      closeIconDescription,\n      closeIconTooltipAlignment,\n      condensedActions,\n      currentStep,\n      includeOverlay,\n      labelText,\n      navigationBackIconDescription,\n      open,\n      placement,\n      hideCloseButton,\n      size,\n      slideIn,\n      title,\n    } = this;\n\n    if (!open && !this._isOpen) {\n      return html``;\n    }\n\n    const titleTemplate = html` <div\n      class=${`${blockClass}__title`}\n      ?no-label=${!!labelText}>\n      <h2 class=${title ? `${blockClass}__title-text` : ''} tabindex=\"0\">\n        ${title}\n      </h2>\n      ${this._doAnimateTitle\n        ? html`<h2\n            class=${`${blockClass}__collapsed-title-text`}\n            aria-hidden=\"true\">\n            ${title}\n          </h2>`\n        : ''}\n    </div>`;\n\n    const headerHasTitleClass = this.title\n      ? ` ${blockClass}__header--has-title `\n      : '';\n    const headerTemplate = html`\n      <div\n        class=${`${blockClass}__header${headerHasTitleClass}`}\n        ?detail-step=${currentStep > 0}\n        ?no-title-animation=${!this._doAnimateTitle}\n        ?reduced-motion=${this._reducedMotion.matches}>\n        <!-- render back button -->\n        ${currentStep > 0\n          ? html`<cds-custom-icon-button\n              align=\"bottom-left\"\n              aria-label=${navigationBackIconDescription}\n              kind=\"ghost\"\n              size=\"sm\"\n              class=${`${prefix}--btn ${blockClass}__navigation-back-button`}\n              @click=${this._handleNavigateBack}>\n              ${iconLoader(ArrowLeft16, { slot: 'icon' })}\n              <span slot=\"tooltip-content\">\n                ${navigationBackIconDescription}\n              </span>\n            </cds-custom-icon-button>`\n          : ''}\n\n        <!-- slot for custom header components -->\n        <div\n          class=${`${blockClass}__custom-header-wrapper${this._customHeaderHidden ? ` ${blockClass}__custom-header-wrapper--hidden` : ''}`}>\n          <slot\n            name=\"above-title\"\n            @slotchange=${this._handleCustomHeaderSlotChange}></slot>\n        </div>\n\n        <!-- render title label -->\n        ${title?.length && labelText?.length\n          ? html` <p class=${`${blockClass}__label-text`} tabindex=\"0\">\n              ${labelText}\n            </p>`\n          : ''}\n\n        <!-- title -->\n        ${title ? titleTemplate : ''}\n\n        <!-- render slug and close button area -->\n        <div class=${`${blockClass}__slug-and-close`}>\n          <slot name=\"slug\" @slotchange=${this._handleSlugChange}></slot>\n          <!-- {normalizedSlug} -->\n          ${!hideCloseButton\n            ? html`<cds-custom-icon-button\n                align=${closeIconTooltipAlignment}\n                aria-label=${closeIconDescription}\n                kind=\"ghost\"\n                size=\"sm\"\n                class=${`${blockClass}__close-button`}\n                @click=${this._handleCloseClick}>\n                ${iconLoader(Close16, { slot: 'icon' })}\n                <span slot=\"tooltip-content\"> ${closeIconDescription} </span>\n              </cds-custom-icon-button>`\n            : ''}\n        </div>\n\n        <!-- render sub title -->\n        <p\n          class=${this._hasSubtitle ? `${blockClass}__subtitle-text` : ''}\n          ?hidden=${!this._hasSubtitle}\n          ?no-title-animation=${!this._doAnimateTitle}\n          ?no-action-toolbar=${!this._hasActionToolbar}\n          ?no-title=${!title}\n          tabindex=\"0\">\n          <slot\n            name=\"subtitle\"\n            @slotchange=${this._handleSubtitleChange}></slot>\n        </p>\n\n        <!-- slot for custom header components -->\n        <div\n          class=${`${blockClass}__custom-header-wrapper${this._customHeaderHidden ? ` ${blockClass}__custom-header-wrapper--hidden` : ''}`}>\n          <slot\n            name=\"below-title\"\n            @slotchange=${this._handleCustomHeaderSlotChange}></slot>\n        </div>\n\n        <div\n          class=${this._hasActionToolbar ? `${blockClass}__action-toolbar` : ''}\n          ?hidden=${!this._hasActionToolbar}\n          ?no-title-animation=${!this._doAnimateTitle}>\n          <slot\n            name=\"action-toolbar\"\n            @slotchange=${this._handleActionToolbarChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const mainTemplate = html`<div\n      class=${`${blockClass}__inner-content`}\n      ?scrolls=${!this._doAnimateTitle}>\n      <cds-custom-layer level=\"1\">\n        <slot></slot>\n      </cds-custom-layer>\n    </div> `;\n\n    const sidePanelAnimateTitleClass = this._doAnimateTitle\n      ? ` ${blockClass}--animated-title`\n      : '';\n\n    return html`\n      <div\n        class=${`${blockClass}${sidePanelAnimateTitleClass}`}\n        part=\"dialog\"\n        role=\"complementary\"\n        placement=\"${placement}\"\n        ?has-slug=${this._hasSlug}\n        ?open=${this._isOpen}\n        ?opening=${open && !this._isOpen}\n        ?closing=${!open && this._isOpen}\n        ?condensed-actions=${condensedActions}\n        ?overlay=${includeOverlay || slideIn}\n        ?slide-in=${slideIn}\n        ?resizable=${this.resizable && !slideIn}\n        size=${size}>\n        ${!slideIn &&\n        this.resizable &&\n        typeof window !== 'undefined' &&\n        window.innerWidth > 768\n          ? html`<cds-custom-resizer-handle\n              class=\"${blockClass}__resizer\"\n              orientation=\"horizontal\"\n              aria-valuemin=\"${this._getPanelWidthPercent('16rem')}\"\n              aria-valuemax=\"75\"\n              aria-valuenow=\"${this._getPanelWidthPercent()}\"\n              aria-label=\"side panel is covering ${this._getPanelWidthPercent()}% of screen\"\n              @resize-start=${this._handleResizeStart}\n              @resize-drag=${this._handleResizeDrag}\n              @resize-end=${this._handleResizeEnd}\n              @resize-reset=${this._handleResizeReset}></cds-custom-resizer-handle>`\n          : ''}\n        ${this._doAnimateTitle\n          ? html`<div class=${`${blockClass}__animated-scroll-wrapper`} scrolls>\n              ${headerTemplate} ${mainTemplate}\n            </div>`\n          : html` ${headerTemplate} ${mainTemplate}`}\n\n        <cds-custom-action-set\n          class=${`${blockClass}__actions-container`}\n          ?hidden=${this._actionsCount === 0}\n          size=${/^(lg|xl|2xl)$/.test(size) ? 'lg' : 'md'}\n          button-size=${condensedActions ? 'md' : 'lg'}\n          actions-multiple=${this._actionsMultiple}>\n          <slot name=\"actions\" @slotchange=${this._handleActionsChange}></slot>\n        </cds-custom-action-set>\n      </div>\n\n      ${includeOverlay\n        ? html`<div\n            ?slide-in=${slideIn}\n            class=${`${blockClass}__overlay`}\n            ?open=${this.open}\n            ?opening=${open && !this._isOpen}\n            ?closing=${!open && this._isOpen}\n            tabindex=\"-1\"\n            @click=${this._handleClickOnOverlay}></div>`\n        : ''}\n    `;\n  }\n\n  async updated(changedProperties) {\n    if (changedProperties.has('currentStep')) {\n      this._handleCurrentStepUpdate();\n    }\n\n    if (changedProperties.has('_doAnimateTitle')) {\n      this?._animateScrollWrapper?.removeEventListener(\n        'scroll',\n        this._scrollObserver\n      );\n\n      if (this._doAnimateTitle) {\n        this?._animateScrollWrapper?.addEventListener(\n          'scroll',\n          this._scrollObserver\n        );\n      } else {\n        this?._sidePanel?.style?.setProperty(\n          `--${blockClass}--scroll-animation-progress`,\n          '0'\n        );\n      }\n    }\n\n    if (\n      changedProperties.has('_isOpen') ||\n      changedProperties.has('animateTitle')\n    ) {\n      /* @state property changed */\n      this._checkSetDoAnimateTitle();\n    }\n\n    if (\n      changedProperties.has('slideIn') ||\n      changedProperties.has('open') ||\n      changedProperties.has('includeOverlay')\n    ) {\n      this._adjustPageContent();\n    }\n\n    if (changedProperties.has('open')) {\n      this._checkSetOpen();\n\n      this.disconnectObservers();\n      if (this.open) {\n        this.connectObservers();\n\n        this._launcher = this.ownerDocument?.activeElement ?? null;\n\n        await (this.constructor as typeof CDSSidePanel)._delay();\n\n        if (this.selectorInitialFocus?.trim()?.length) {\n          const focusNode = this.querySelector(this.selectorInitialFocus);\n\n          (focusNode as HTMLElement)?.focus();\n        } else if (!this.slideIn) {\n          const { first: _firstElement } = this.getFocusable();\n\n          _firstElement?.focus();\n        }\n      } else if (\n        this._launcher &&\n        typeof (this._launcher as HTMLElement)?.focus === 'function'\n      ) {\n        (this._launcher as HTMLElement)?.focus();\n        this._launcher = null;\n      }\n    }\n\n    // Reset custom size when size prop changes or when resizable is disabled\n    if (\n      (changedProperties.has('size') && this.resizable && !this.slideIn) ||\n      (changedProperties.has('resizable') && !this.resizable)\n    ) {\n      this.style.removeProperty('--cds-side-panel-modified-size');\n    }\n\n    // Update stored width when resizable changes or panel opens\n    if (\n      (changedProperties.has('resizable') || changedProperties.has('open')) &&\n      this.resizable &&\n      !this.slideIn &&\n      this.open\n    ) {\n      await this.updateComplete;\n      this._sidePanelWidth = this._sidePanel?.clientWidth;\n    }\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  private static _delay(ms = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * The name of the custom event fired before this side-panel is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this side-panel.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-side-panel-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this side-panel is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-side-panel-closed`;\n  }\n\n  /**\n   * The name of the custom event fired on clicking the navigate back button\n   */\n  static get eventNavigateBack() {\n    return `${prefix}-side-panel-navigate-back`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSSidePanel;\n"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 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 { css } from "lit";
+//#region src/components/side-panel/side-panel.scss?lit
+var side_panel_default = css(["a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{padding:0;border:0;margin:0;font:inherit;font-feature-settings:\"liga\" 1;font-size:100%;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}:root{color-scheme:var(--cds-color-scheme,light)}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-background,#fff);color:var(--cds-text-primary,#161616);line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:100%}body{font-weight:400;font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}strong{font-weight:600}@media screen and (-ms-high-contrast:active){svg{fill:ButtonText}}h1{font-size:var(--cds-heading-06-font-size,2.625rem);font-weight:var(--cds-heading-06-font-weight,300);line-height:var(--cds-heading-06-line-height,1.199);letter-spacing:var(--cds-heading-06-letter-spacing,0)}h2{font-size:var(--cds-heading-05-font-size,2rem);font-weight:var(--cds-heading-05-font-weight,400);line-height:var(--cds-heading-05-line-height,1.25);letter-spacing:var(--cds-heading-05-letter-spacing,0)}h3{font-size:var(--cds-heading-04-font-size,1.75rem);font-weight:var(--cds-heading-04-font-weight,400);line-height:var(--cds-heading-04-line-height,1.28572);letter-spacing:var(--cds-heading-04-letter-spacing,0)}h4{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);line-height:var(--cds-heading-03-line-height,1.4);letter-spacing:var(--cds-heading-03-letter-spacing,0)}h5{font-size:var(--cds-heading-02-font-size,1rem);font-weight:var(--cds-heading-02-font-weight,600);line-height:var(--cds-heading-02-line-height,1.5);letter-spacing:var(--cds-heading-02-letter-spacing,0)}h6{font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);line-height:var(--cds-heading-01-line-height,1.42857);letter-spacing:var(--cds-heading-01-letter-spacing,.16px)}p{font-size:var(--cds-body-02-font-size,1rem);font-weight:var(--cds-body-02-font-weight,400);line-height:var(--cds-body-02-line-height,1.5);letter-spacing:var(--cds-body-02-letter-spacing,0)}a{color:var(--cds-link-primary,#0062fe)}em{font-style:italic}@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds-custom--assistive-text,.cds-custom--visually-hidden,:host(cds-custom-side-panel) .cds-custom--side-panel .cds-custom--side-panel__action-toolbar[hidden],:host(cds-custom-side-panel) .cds-custom--side-panel__action-toolbar[hidden],:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container ::slotted(cds-custom-button[hidden]),:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container[hidden],:host(cds-custom-side-panel) .cds-custom--side-panel__subtitle-text[hidden],:host(cds-custom-side-panel) .sentinel{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}@keyframes side-panel-entrance-reduced{0%{opacity:0}to{opacity:1}}@keyframes side-panel-exit-reduced{0%{opacity:1}to{opacity:0}}@keyframes side-panel-entrance-right{0%{opacity:0;transform:translateX(var(--panel-transform,320px))}to{opacity:1;transform:translateX(0)}}@keyframes side-panel-entrance-left{0%{opacity:0;transform:translateX(calc(var(--panel-transform, 320px)*-1))}to{opacity:1;transform:translateX(0)}}@keyframes side-panel-exit-right{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(var(--panel-transform,320px))}}@keyframes side-panel-exit-left{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(calc(var(--panel-transform, 320px)*-1))}}.cds-custom--side-panel .cds-custom--side-panel__header.cds-custom--side-panel__header--reduced-motion.cds-custom--side-panel__header--no-title-animation,:host(cds-custom-side-panel) .cds-custom--side-panel .cds-custom--side-panel__header.cds-custom--side-panel__header--no-title-animation[reduced-motion],:host(cds-custom-side-panel) .cds-custom--side-panel .cds-custom--side-panel__header.cds-custom--side-panel__header--reduced-motion[no-title-animation],:host(cds-custom-side-panel) .cds-custom--side-panel .cds-custom--side-panel__header[reduced-motion][no-title-animation]{border-block-end:0;margin-block-end:0}@property --panel-transform{inherits:true;initial-value:320px;syntax:\"<length>\"}.cds-custom--side-panel--scrolls,:host(cds-custom-side-panel) [scrolls]{overflow:auto;overflow-x:hidden}@supports (overflow-inline:hidden){.cds-custom--side-panel--scrolls,:host(cds-custom-side-panel) [scrolls]{overflow-inline:hidden}}.cds-custom--side-panel,:host(cds-custom-side-panel) .cds-custom--side-panel{--panel-transform:320px;--cds--side-panel--title-stop:1rem;--cds--side-panel--scroll-animation-progress:0;--cds--side-panel--title-padding-right:2rem;--cds--side-panel--actions-height:4rem;position:fixed;z-index:9000;display:grid;box-sizing:border-box;background-color:var(--cds-layer-01,#f4f4f4);block-size:calc(100% - 3rem);color:var(--cds-text-primary,#161616);grid-template-rows:auto 1fr auto;inset-block-start:3rem;max-inline-size:100%;min-inline-size:16rem;transform:translateX(0);transition-behavior:allow-discrete;transition-duration:.15s;transition-property:display,opacity,transform}.cds-custom--side-panel:not(.cds-custom--side-panel--slide-in).cds-custom--side-panel--resizable:has(.cds-custom--resizer){grid-template-columns:0 1fr}@media (prefers-reduced-motion:no-preference){.cds-custom--side-panel:not(.cds-custom--side-panel--slide-in).cds-custom--side-panel--resizable:has(.cds-custom--resizer){transition:all .15s linear}}@starting-style{.cds-custom--side-panel,:host(cds-custom-side-panel) .cds-custom--side-panel{opacity:0;transform:translateX(var(--panel-transform))}}@media (min-width:42rem){.cds-custom--side-panel,:host(cds-custom-side-panel) .cds-custom--side-panel{max-inline-size:75vw}}.cds-custom--side-panel.cds-custom--side-panel--xs,:host(cds-custom-side-panel) .cds-custom--side-panel[size=xs]{inline-size:clamp(16rem,var(--cds-side-panel-modified-size,16rem),100%)}.cds-custom--side-panel.cds-custom--side-panel--sm,:host(cds-custom-side-panel) .cds-custom--side-panel[size=sm]{inline-size:clamp(16rem,var(--cds-side-panel-modified-size,20rem),100%)}.cds-custom--side-panel.cds-custom--side-panel--md,:host(cds-custom-side-panel) .cds-custom--side-panel[size=md]{inline-size:clamp(16rem,var(--cds-side-panel-modified-size,30rem),100%)}.cds-custom--side-panel.cds-custom--side-panel--lg,:host(cds-custom-side-panel) .cds-custom--side-panel[size=lg]{inline-size:clamp(16rem,var(--cds-side-panel-modified-size,40rem),100%)}.cds-custom--side-panel.cds-custom--side-panel--xl,:host(cds-custom-side-panel) .cds-custom--side-panel[size=xl]{inline-size:clamp(16rem,var(--cds-side-panel-modified-size,65rem),100%)}.cds-custom--side-panel.cds-custom--side-panel--2xl,:host(cds-custom-side-panel) .cds-custom--side-panel[size=\"2xl\"]{inline-size:clamp(16rem,var(--cds-side-panel-modified-size,80rem),100%)}.cds-custom--side-panel.cds-custom--side-panel--open.cds-custom--side-panel--right-placement,:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--open[placement=right]{animation:side-panel-entrance-right .15s cubic-bezier(0,0,.38,.9) forwards}.cds-custom--side-panel.cds-custom--side-panel--open.cds-custom--side-panel--left-placement,:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--open[placement=left]{animation:side-panel-entrance-left .15s cubic-bezier(0,0,.38,.9) forwards}.cds-custom--side-panel.cds-custom--side-panel--closing.cds-custom--side-panel--right-placement,:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--closing[placement=right]{animation:side-panel-exit-right .15s cubic-bezier(.2,0,1,.9) forwards}.cds-custom--side-panel.cds-custom--side-panel--closing.cds-custom--side-panel--left-placement,:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--closing[placement=left]{animation:side-panel-exit-left .15s cubic-bezier(.2,0,1,.9) forwards}@supports (transition-behavior:allow-discrete){.cds-custom--side-panel.cds-custom--side-panel--closing{opacity:0;transform:translateX(var(--panel-transform,320px));transition-duration:.15s}.cds-custom--side-panel.cds-custom--side-panel--closing.cds-custom--side-panel--left-placement,:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--closing[placement=left]{transform:translateX(calc(var(--panel-transform, 320px)*-1))}}@media (prefers-reduced-motion){.cds-custom--side-panel.cds-custom--side-panel--open.cds-custom--side-panel--left-placement,.cds-custom--side-panel.cds-custom--side-panel--open.cds-custom--side-panel--right-placement,:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--open[placement=left],:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--open[placement=right]{animation:side-panel-entrance-reduced .15s cubic-bezier(.2,0,1,.9) forwards}@starting-style{.cds-custom--side-panel.cds-custom--side-panel--open.cds-custom--side-panel--left-placement,.cds-custom--side-panel.cds-custom--side-panel--open.cds-custom--side-panel--right-placement,:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--open[placement=left],:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--open[placement=right]{opacity:0;transform:translateX(0)}}.cds-custom--side-panel.cds-custom--side-panel--closing.cds-custom--side-panel--left-placement,.cds-custom--side-panel.cds-custom--side-panel--closing.cds-custom--side-panel--right-placement,:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--closing[placement=left],:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--closing[placement=right]{animation:side-panel-exit-reduced .15s cubic-bezier(.2,0,1,.9) forwards}@starting-style{.cds-custom--side-panel.cds-custom--side-panel--closing.cds-custom--side-panel--left-placement,.cds-custom--side-panel.cds-custom--side-panel--closing.cds-custom--side-panel--right-placement,:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--closing[placement=left],:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--closing[placement=right]{opacity:1;transform:translateX(0)}}}.cds-custom--side-panel.cds-custom--side-panel--animated-title{grid-template-rows:1fr auto}.cds-custom--side-panel.cds-custom--side-panel--condensed-actions,:host(cds-custom-side-panel) .cds-custom--side-panel[condensed-actions]{--cds--side-panel--actions-height:3rem}.cds-custom--side-panel:not(.cds-custom--side-panel--has-overlay){box-shadow:0 .125rem .25rem var(--cds-overlay,rgba(0,0,0,.6))}.cds-custom--side-panel.cds-custom--side-panel--slide-in,.cds-custom--side-panel.cds-custom--side-panel--slide-in:not(.cds-custom--side-panel--has-overlay){box-shadow:none}.cds-custom--side-panel .cds-custom--side-panel__actions-container{inline-size:100%}.cds-custom--side-panel.cds-custom--side-panel--right-placement,:host(cds-custom-side-panel) .cds-custom--side-panel[placement=right]{border-inline-start:1px solid var(--cds-border-subtle-01,#c6c6c6);inset-inline-end:0}.cds-custom--side-panel.cds-custom--side-panel--left-placement .cds-custom--resizer,:host(cds-custom-side-panel) .cds-custom--side-panel[placement=left] .cds-custom--resizer{grid-column:2;inset-inline-start:0}.cds-custom--side-panel.cds-custom--side-panel--left-placement .cds-custom--resizer:before,:host(cds-custom-side-panel) .cds-custom--side-panel[placement=left] .cds-custom--resizer:before{inset-inline-start:0}.cds-custom--side-panel.cds-custom--side-panel--left-placement:not(.cds-custom--side-panel--slide-in).cds-custom--side-panel--resizable:has(.cds-custom--resizer),:host(cds-custom-side-panel) .cds-custom--side-panel[placement=left]:not(.cds-custom--side-panel--slide-in).cds-custom--side-panel--resizable:has(.cds-custom--resizer){grid-template-columns:1fr 0}@media (prefers-reduced-motion:no-preference){.cds-custom--side-panel.cds-custom--side-panel--left-placement:not(.cds-custom--side-panel--slide-in).cds-custom--side-panel--resizable:has(.cds-custom--resizer),:host(cds-custom-side-panel) .cds-custom--side-panel[placement=left]:not(.cds-custom--side-panel--slide-in).cds-custom--side-panel--resizable:has(.cds-custom--resizer){transition:all .15s linear}}.cds-custom--side-panel.cds-custom--side-panel--left-placement,:host(cds-custom-side-panel) .cds-custom--side-panel[placement=left]{border-inline-end:1px solid var(--cds-border-subtle-01,#c6c6c6);inset-inline-start:0}.cds-custom--side-panel.cds-custom--side-panel.cds-custom--side-panel--has-ai-label,.cds-custom--side-panel.cds-custom--side-panel.cds-custom--side-panel--has-decorator,.cds-custom--side-panel.cds-custom--side-panel.cds-custom--side-panel--has-slug,:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--has-ai-label,:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--has-decorator,:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--has-slug,:host(cds-custom-side-panel) .cds-custom--side-panel[has-slug]{border-color:transparent;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 4px 10px 2px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.cds-custom--side-panel .cds-custom--resizer--vertical:before{position:absolute;z-index:-1;background-color:transparent;block-size:100%;content:\"\";inline-size:.125rem;inset-block-end:0;inset-inline-end:0;transition:background-color .15s cubic-bezier(.2,0,.38,.9)}.cds-custom--side-panel:hover .cds-custom--resizer--vertical:before{background-color:var(--cds-button-secondary-hover,#474747)}.cds-custom--side-panel .cds-custom--resizer{background-color:transparent;grid-row:span 4/span 3;inset-inline-start:-.25rem}.cds-custom--side-panel .cds-custom--resizer--vertical:after{position:absolute;z-index:10;block-size:100%;content:\"\";inline-size:.5rem;inset-inline-start:-.125rem}.cds-custom--side-panel .cds-custom--resizer:focus,.cds-custom--side-panel .cds-custom--resizer:hover{background-color:var(--cds-border-interactive,#0f62fe)}.cds-custom--side-panel .cds-custom--side-panel__header{--cds--side-panel--title-padding-bottom:1rem;position:sticky;z-index:4;padding:1rem;background-color:var(--cds-layer-01,#f4f4f4);inset-block-start:calc(-1px*var(--cds--side-panel--scroll-animation-distance));min-block-size:2.5rem;padding-block-end:0}.cds-custom--side-panel .cds-custom--side-panel__header.cds-custom--side-panel__header--has-title{min-block-size:auto}.cds-custom--side-panel .cds-custom--side-panel__header.cds-custom--side-panel__header--has-subtitle,.cds-custom--side-panel .cds-custom--side-panel__header:has(.cds-custom--side-panel__subtitle-text){--cds--side-panel--title-padding-bottom:0.5rem}.cds-custom--side-panel .cds-custom--side-panel__header.cds-custom--side-panel__header--has-navigation-back,.cds-custom--side-panel .cds-custom--side-panel__header:has(.cds-custom--side-panel__navigation-back-button){padding-block-start:2rem}.cds-custom--side-panel .cds-custom--side-panel__header.cds-custom--side-panel__header--has-navigation-back.cds-custom--btn--md,.cds-custom--side-panel .cds-custom--side-panel__header:has(.cds-custom--side-panel__navigation-back-button.cds-custom--btn--md){padding-block-start:2.5rem}.cds-custom--side-panel .cds-custom--side-panel__header:before{position:absolute;background-color:var(--cds-border-subtle-01,#c6c6c6);block-size:1px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;opacity:var(--cds--side-panel--scroll-animation-progress);z-index:9}.cds-custom--side-panel .cds-custom--side-panel__header.cds-custom--side-panel__header--no-title-animation,:host(cds-custom-side-panel) .cds-custom--side-panel .cds-custom--side-panel__header[no-title-animation]{position:relative;inset-block-start:0}.cds-custom--side-panel .cds-custom--side-panel__header.cds-custom--side-panel__header--no-title-animation:before,:host(cds-custom-side-panel) .cds-custom--side-panel .cds-custom--side-panel__header[no-title-animation]:before{opacity:1}.cds-custom--side-panel .cds-custom--side-panel__header.cds-custom--side-panel__header--reduced-motion,:host(cds-custom-side-panel) .cds-custom--side-panel .cds-custom--side-panel__header[reduced-motion]{z-index:5;border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);margin-block-end:1rem}.cds-custom--side-panel .cds-custom--side-panel__header.cds-custom--side-panel__header--reduced-motion.cds-custom--side-panel__header--no-title-animation,:host(cds-custom-side-panel) .cds-custom--side-panel .cds-custom--side-panel__header.cds-custom--side-panel__header--no-title-animation[reduced-motion],:host(cds-custom-side-panel) .cds-custom--side-panel .cds-custom--side-panel__header.cds-custom--side-panel__header--reduced-motion[no-title-animation],:host(cds-custom-side-panel) .cds-custom--side-panel .cds-custom--side-panel__header[no-title-animation][reduced-motion]{border-block-end:0;margin-block-end:0}.cds-custom--side-panel .cds-custom--side-panel__header.cds-custom--side-panel__header--on-detail-step .cds-custom--side-panel__navigation-back-button.cds-custom--btn--md~.cds-custom--side-panel__collapsed-title-text,:host(cds-custom-side-panel) .cds-custom--side-panel .cds-custom--side-panel__header[detail-step] .cds-custom--side-panel__navigation-back-button.cds-custom--btn--md~.cds-custom--side-panel__collapsed-title-text{inset-block-start:1.5rem}.cds-custom--side-panel .cds-custom--side-panel__header.cds-custom--side-panel__header--on-detail-step:not(.cds-custom--side-panel__header--has-title),:host(cds-custom-side-panel) .cds-custom--side-panel .cds-custom--side-panel__header[detail-step]:not(.cds-custom--side-panel__header--has-title){padding:1rem 1rem .5rem;block-size:2.75rem}.cds-custom--side-panel .cds-custom--side-panel__header:not(.cds-custom--side-panel__header--has-title):before{background-color:transparent}.cds-custom--side-panel .cds-custom--side-panel__header:empty{min-block-size:unset}.cds-custom--side-panel.cds-custom--side-panel--has-action-toolbar,.cds-custom--side-panel.cds-custom--side-panel--has-ai-label,.cds-custom--side-panel.cds-custom--side-panel--has-decorator,.cds-custom--side-panel.cds-custom--side-panel--has-slug,.cds-custom--side-panel.cds-custom--side-panel:has(.cds-custom--side-panel__action-toolbar),:host(cds-custom-side-panel) .cds-custom--side-panel[has-slug]{--cds--side-panel--title-padding-right:4rem}.cds-custom--side-panel.cds-custom--side-panel--has-action-toolbar.cds-custom--side-panel--has-ai-label,.cds-custom--side-panel.cds-custom--side-panel--has-action-toolbar.cds-custom--side-panel--has-decorator,.cds-custom--side-panel.cds-custom--side-panel--has-action-toolbar.cds-custom--side-panel--has-slug,.cds-custom--side-panel.cds-custom--side-panel:has(.cds-custom--side-panel__action-toolbar).cds-custom--side-panel--has-ai-label,.cds-custom--side-panel.cds-custom--side-panel:has(.cds-custom--side-panel__action-toolbar).cds-custom--side-panel--has-decorator,.cds-custom--side-panel.cds-custom--side-panel:has(.cds-custom--side-panel__action-toolbar).cds-custom--side-panel--has-slug,:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--has-action-toolbar[has-slug],:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel[has-slug]:has(.cds-custom--side-panel__action-toolbar){--cds--side-panel--title-padding-right:5rem}.cds-custom--side-panel .cds-custom--side-panel__animated-scroll-wrapper{display:grid;grid-template-rows:auto 1fr}.cds-custom--side-panel .cds-custom--side-panel__title{position:sticky;z-index:4;background-color:var(--cds-layer-01,#f4f4f4);border-block-end:var(--cds--side-panel--title-padding-bottom) solid transparent;inset-block-start:var(--cds--side-panel--title-stop)}.cds-custom--side-panel .cds-custom--side-panel__title-text{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);line-height:var(--cds-heading-03-line-height,1.4);letter-spacing:var(--cds-heading-03-letter-spacing,0);padding-inline-end:var(--cds--side-panel--title-padding-right);opacity:calc(1 - var(--cds--side-panel--scroll-animation-progress))}.cds-custom--side-panel .cds-custom--side-panel__title--no-label .cds-custom--side-panel__title-text{transform:translateY(calc(-1rem*var(--cds--side-panel--scroll-animation-progress)))}.cds-custom--side-panel .cds-custom--side-panel__header--no-title-animation .cds-custom--side-panel__title-text,:host(cds-custom-side-panel) .cds-custom--side-panel .cds-custom--side-panel__header[no-title-animation] .cds-custom--side-panel__title-text{position:static}.cds-custom--side-panel .cds-custom--side-panel__label-text{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);opacity:calc(1 - var(--cds--side-panel--scroll-animation-progress));padding-inline-end:var(--cds--side-panel--title-padding-right)}.cds-custom--side-panel .cds-custom--side-panel__collapsed-title-text{font-size:var(--cds-heading-compact-02-font-size,1rem);font-weight:var(--cds-heading-compact-02-font-weight,600);line-height:var(--cds-heading-compact-02-line-height,1.375);letter-spacing:var(--cds-heading-compact-02-letter-spacing,0);padding-inline-end:var(--cds--side-panel--title-padding-right);position:absolute;inset-block-start:0;opacity:var(--cds--side-panel--scroll-animation-progress)}.cds-custom--side-panel .cds-custom--side-panel__title--no-label .cds-custom--side-panel__collapsed-title-text{transform:translateY(calc(1rem*(1 - var(--cds--side-panel--scroll-animation-progress))))}.cds-custom--side-panel .cds-custom--side-panel__subtitle-text{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);opacity:calc(1 - var(--cds--side-panel--scroll-animation-progress));padding-block-end:1rem;padding-inline-end:var(--cds--side-panel--title-padding-right)}.cds-custom--side-panel .cds-custom--side-panel__header--no-title-animation .cds-custom--side-panel__subtitle-text,:host(cds-custom-side-panel) .cds-custom--side-panel .cds-custom--side-panel__header[no-title-animation] .cds-custom--side-panel__subtitle-text{z-index:2;background-color:var(--cds-layer-01,#f4f4f4)}.cds-custom--side-panel .cds-custom--side-panel__title-text+.cds-custom--side-panel__subtitle-text{padding-block-start:1rem}.cds-custom--side-panel .cds-custom--side-panel__inner-content{padding:0 1rem 1rem}.cds-custom--side-panel .cds-custom--side-panel__inner-content--no-animated-title{padding-block-start:1rem}.cds-custom--side-panel .cds-custom--side-panel__header--has-action-toolbar+.cds-custom--side-panel__inner-content,.cds-custom--side-panel .cds-custom--side-panel__header:has(.cds-custom--side-panel__action-toolbar)+.cds-custom--side-panel__inner-content{padding-block-start:.5rem}.cds-custom--side-panel.cds-custom--side-panel--has-ai-label .cds-custom--side-panel--scrolls,.cds-custom--side-panel.cds-custom--side-panel--has-decorator .cds-custom--side-panel--scrolls,.cds-custom--side-panel.cds-custom--side-panel--has-slug .cds-custom--side-panel--scrolls,:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--has-ai-label [scrolls],:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--has-decorator [scrolls],:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--has-slug [scrolls],:host(cds-custom-side-panel) .cds-custom--side-panel[has-slug] .cds-custom--side-panel--scrolls,:host(cds-custom-side-panel) .cds-custom--side-panel[has-slug] [scrolls]{background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 4px 10px 2px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.cds-custom--side-panel .cds-custom--side-panel__action-toolbar{position:sticky;z-index:4;display:flex;align-items:center;justify-content:flex-start;background-color:var(--cds-layer-01,#f4f4f4)}.cds-custom--side-panel .cds-custom--side-panel__action-toolbar-leading-button{margin-inline-end:.5rem}.cds-custom--side-panel .cds-custom--btn.cds-custom--side-panel__navigation-back-button{position:fixed;z-index:5;inset-block-start:0;inset-inline-start:0}.cds-custom--side-panel .cds-custom--btn.cds-custom--side-panel__close-button,.cds-custom--side-panel .cds-custom--btn.cds-custom--side-panel__navigation-back-button{display:flex;align-items:center;justify-content:center;padding:0;background-color:unset;block-size:2rem;color:var(--cds-text-primary,#161616);inline-size:2rem;min-block-size:0}.cds-custom--side-panel .cds-custom--btn.cds-custom--side-panel__close-button:hover,.cds-custom--side-panel .cds-custom--btn.cds-custom--side-panel__navigation-back-button:hover{background-color:var(--cds-background-hover,hsla(0,0%,55.3%,.12))}.cds-custom--side-panel .cds-custom--btn.cds-custom--side-panel__close-button .cds-custom--side-panel--btn__icon,.cds-custom--side-panel .cds-custom--btn.cds-custom--side-panel__navigation-back-button .cds-custom--side-panel--btn__icon{margin:0}.cds-custom--side-panel .cds-custom--btn--md.cds-custom--side-panel__close-button,.cds-custom--side-panel .cds-custom--btn--md.cds-custom--side-panel__navigation-back-button{block-size:2.5rem;inline-size:2.5rem}.cds-custom--side-panel .cds-custom--side-panel__ai-label-and-close,.cds-custom--side-panel .cds-custom--side-panel__decorator-and-close,.cds-custom--side-panel .cds-custom--side-panel__slug-and-close{position:absolute;z-index:10;display:flex;block-size:2rem;inset-block-start:0;inset-inline-end:0}@media (prefers-reduced-motion){.cds-custom--side-panel .cds-custom--side-panel__ai-label-and-close,.cds-custom--side-panel .cds-custom--side-panel__decorator-and-close,.cds-custom--side-panel .cds-custom--side-panel__slug-and-close{position:absolute}}.cds-custom--side-panel .cds-custom--side-panel__decorator-and-close .cds-custom--ai-label__button--xs{margin:.25rem}.cds-custom--side-panel .cds-custom--side-panel__actions-container{position:sticky;background-color:var(--cds-layer-01,#f4f4f4);border-block-start:1px solid var(--cds-border-subtle-01,#c6c6c6);inset-block-end:0}.cds-custom--side-panel .cds-custom--side-panel__actions-container.cds-custom--action-set--2xl .cds-custom--action-set__action-button{inline-size:100%;max-inline-size:100%}@media (min-width:42rem){.cds-custom--side-panel .cds-custom--side-panel__actions-container.cds-custom--action-set--2xl{flex-direction:row}.cds-custom--side-panel .cds-custom--side-panel__actions-container.cds-custom--action-set--2xl .cds-custom--action-set__action-button{inline-size:25%}}.cds-custom--side-panel .cds-custom--side-panel__actions-container .cds-custom--action-set__action-button.cds-custom--action-set__action-button{block-size:var(--cds--side-panel--actions-height)}.cds-custom--side-panel.cds-custom--side-panel.cds-custom--side-panel--xs .cds-custom--side-panel__actions-container.cds-custom--action-set--sm,:host(cds-custom-side-panel) .cds-custom--side-panel.cds-custom--side-panel--xs .cds-custom--side-panel__actions-container.cds-custom--action-set--sm,:host(cds-custom-side-panel) .cds-custom--side-panel[size=xs] .cds-custom--side-panel__actions-container.cds-custom--action-set--sm{inline-size:clamp(16rem,var(--cds-side-panel-modified-size,16rem),100%)}.cds-custom--side-panel .cds-custom--date-picker__input,.cds-custom--side-panel .cds-custom--dropdown,.cds-custom--side-panel .cds-custom--dropdown-list,.cds-custom--side-panel .cds-custom--multi-select,.cds-custom--side-panel .cds-custom--number input[type=number],.cds-custom--side-panel .cds-custom--search-input,.cds-custom--side-panel .cds-custom--select-input,.cds-custom--side-panel .cds-custom--text-area,.cds-custom--side-panel .cds-custom--text-input{background-color:var(--cds-field-02,#fff)}@keyframes side-panel-overlay-entrance{0%{opacity:0}to{opacity:1}}@keyframes side-panel-overlay-exit{0%{opacity:1}to{opacity:0}}.cds-custom--side-panel__visually-hidden{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds-custom--side-panel__overlay{position:fixed;z-index:6000;animation:side-panel-overlay-entrance .15s cubic-bezier(0,0,.38,.9) forwards;background-color:var(--cds-overlay,rgba(0,0,0,.6));block-size:100%;inline-size:100%;inset:0}.cds-custom--side-panel__overlay--closing{animation:side-panel-overlay-exit .15s cubic-bezier(.2,0,1,.9) forwards}.cds-custom--side-panel--has-ai-label+.cds-custom--side-panel__overlay,.cds-custom--side-panel--has-decorator+.cds-custom--side-panel__overlay,.cds-custom--side-panel--has-slug+.cds-custom--side-panel__overlay,:host(cds-custom-side-panel) .cds-custom--side-panel[has-slug]+.cds-custom--side-panel__overlay{background-color:var(--cds-ai-overlay,rgba(0,17,65,.5))}.cds-custom--action-set,:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container{align-items:stretch;justify-content:flex-end;background-color:var(--cds-layer-01,#f4f4f4)}.cds-custom--action-set .cds-custom--action-set__action-button,:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container .cds-custom--action-set__action-button{font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);line-height:var(--cds-body-short-01-line-height,1.28572);letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);align-items:center;margin:0}.cds-custom--action-set .cds-custom--action-set__action-button.cds-custom--action-set__action-button--expressive,:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container .cds-custom--action-set__action-button.cds-custom--action-set__action-button--expressive{block-size:4rem;padding-block:1rem 2rem}.cds-custom--action-set.cds-custom--btn-set .cds-custom--action-set__action-button.cds-custom--btn,.cds-custom--action-set.cds-custom--btn-set .cds-custom--action-set__action-button.cds-custom--btn.cds-custom--btn--expressive,:host(cds-custom-side-panel) .cds-custom--btn-set.cds-custom--side-panel__actions-container .cds-custom--action-set__action-button.cds-custom--btn{max-inline-size:none}.cds-custom--action-set:not(.cds-custom--action-set--stacking) .cds-custom--action-set__action-button--ghost,:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container:not(.cds-custom--action-set--stacking) .cds-custom--action-set__action-button--ghost{padding-inline-start:1rem}.cds-custom--action-set.cds-custom--action-set--row-single .cds-custom--action-set__action-button--ghost,.cds-custom--action-set.cds-custom--action-set--row-single.cds-custom--action-set--md .cds-custom--action-set__action-button,:host(cds-custom-side-panel) .cds-custom--action-set--row-single.cds-custom--action-set--md.cds-custom--side-panel__actions-container .cds-custom--action-set__action-button,:host(cds-custom-side-panel) .cds-custom--action-set--row-single.cds-custom--side-panel__actions-container .cds-custom--action-set__action-button--ghost{flex:0 0 100%}.cds-custom--action-set.cds-custom--action-set--row-double .cds-custom--action-set__action-button--ghost,:host(cds-custom-side-panel) .cds-custom--action-set--row-double.cds-custom--side-panel__actions-container .cds-custom--action-set__action-button--ghost{flex:1 1 75%}.cds-custom--action-set.cds-custom--action-set--row-double.cds-custom--action-set--lg .cds-custom--action-set__action-button,.cds-custom--action-set.cds-custom--action-set--row-double.cds-custom--action-set--md .cds-custom--action-set__action-button,.cds-custom--action-set.cds-custom--action-set--row-single.cds-custom--action-set--lg .cds-custom--action-set__action-button:not(.cds-custom--action-set__action-button--ghost),.cds-custom--action-set.cds-custom--action-set--row-triple .cds-custom--action-set__action-button--ghost,:host(cds-custom-side-panel) .cds-custom--action-set--row-double.cds-custom--action-set--lg.cds-custom--side-panel__actions-container .cds-custom--action-set__action-button,:host(cds-custom-side-panel) .cds-custom--action-set--row-double.cds-custom--action-set--md.cds-custom--side-panel__actions-container .cds-custom--action-set__action-button,:host(cds-custom-side-panel) .cds-custom--action-set--row-single.cds-custom--action-set--lg.cds-custom--side-panel__actions-container .cds-custom--action-set__action-button:not(.cds-custom--action-set__action-button--ghost),:host(cds-custom-side-panel) .cds-custom--action-set--row-triple.cds-custom--side-panel__actions-container .cds-custom--action-set__action-button--ghost{flex:0 1 50%}.cds-custom--action-set.cds-custom--action-set--row-triple .cds-custom--action-set__action-button--ghost,:host(cds-custom-side-panel) .cds-custom--action-set--row-triple.cds-custom--side-panel__actions-container .cds-custom--action-set__action-button--ghost{flex:1 1 50%}.cds-custom--action-set.cds-custom--btn-set.cds-custom--action-set--2xl .cds-custom--action-set__action-button:not(.cds-custom--action-set__action-button--ghost),.cds-custom--action-set.cds-custom--btn-set.cds-custom--action-set--row-quadruple .cds-custom--action-set__action-button:not(.cds-custom--action-set__action-button--ghost),.cds-custom--action-set.cds-custom--btn-set.cds-custom--action-set--row-triple.cds-custom--action-set--lg .cds-custom--action-set__action-button:not(.cds-custom--action-set__action-button--ghost),.cds-custom--action-set.cds-custom--btn-set.cds-custom--action-set--xl .cds-custom--action-set__action-button:not(.cds-custom--action-set__action-button--ghost),:host(cds-custom-side-panel) .cds-custom--btn-set.cds-custom--action-set--2xl.cds-custom--side-panel__actions-container .cds-custom--action-set__action-button:not(.cds-custom--action-set__action-button--ghost),:host(cds-custom-side-panel) .cds-custom--btn-set.cds-custom--action-set--row-quadruple.cds-custom--side-panel__actions-container .cds-custom--action-set__action-button:not(.cds-custom--action-set__action-button--ghost),:host(cds-custom-side-panel) .cds-custom--btn-set.cds-custom--action-set--row-triple.cds-custom--action-set--lg.cds-custom--side-panel__actions-container .cds-custom--action-set__action-button:not(.cds-custom--action-set__action-button--ghost),:host(cds-custom-side-panel) .cds-custom--btn-set.cds-custom--action-set--xl.cds-custom--side-panel__actions-container .cds-custom--action-set__action-button:not(.cds-custom--action-set__action-button--ghost){flex:0 1 25%;max-inline-size:14.5rem}.cds-custom--action-set.cds-custom--btn-set.cds-custom--action-set--row-quadruple .cds-custom--action-set__action-button--ghost,:host(cds-custom-side-panel) .cds-custom--btn-set.cds-custom--action-set--row-quadruple.cds-custom--side-panel__actions-container .cds-custom--action-set__action-button--ghost{flex:1 1 25%}.cds-custom--action-set .cds-custom--action-set__action-button .cds-custom--inline-loading,:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container .cds-custom--action-set__action-button .cds-custom--inline-loading{position:absolute;inline-size:2rem;inset-block-start:0;inset-inline-end:0}:host(cds-custom-side-panel){--cds--side-panel--displaced:100%}:host(cds-custom-side-panel) *{box-sizing:border-box}:host(cds-custom-side-panel) .cds-custom--side-panel{container-name:side-panel;container-type:inline-size}:host(cds-custom-side-panel) .cds-custom--side-panel[placement=left]{--cds--side-panel--displaced:-100%}:host(cds-custom-side-panel) .cds-custom--side-panel[opening]{transform:translateX(var(--cds--side-panel--displaced))}:host(cds-custom-side-panel) .cds-custom--side-panel[open]{transform:translateX(0);transition:all .24s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){:host(cds-custom-side-panel) .cds-custom--side-panel[open]{transition:none}}:host(cds-custom-side-panel) .cds-custom--side-panel[closing]{transform:translateX(var(--cds--side-panel--displaced));transition:all .15s cubic-bezier(.2,0,1,.9)}@media screen and (prefers-reduced-motion:reduce){:host(cds-custom-side-panel) .cds-custom--side-panel[closing]{transition:none}}:host(cds-custom-side-panel) .cds-custom--side-panel[placement=right]{border-inline-end:none;inset-inline-end:0}:host(cds-custom-side-panel) .cds-custom--side-panel[placement=left]{border-inline-end:1px solid var(--cds-border-subtle-01,#c6c6c6);inset-inline-start:0}:host(cds-custom-side-panel) cds-custom-layer{display:contents}:host(cds-custom-side-panel) .cds-custom--side-panel__overlay[opening]{opacity:0}@media screen and (prefers-reduced-motion:reduce){:host(cds-custom-side-panel) .cds-custom--side-panel__overlay[open]{opacity:1;transition:none}}:host(cds-custom-side-panel) .cds-custom--side-panel__overlay[open]{opacity:1;transition:all .24s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){:host(cds-custom-side-panel) .cds-custom--side-panel__overlay[closing]{opacity:0;transition:none}}:host(cds-custom-side-panel) .cds-custom--side-panel__overlay[closing]{opacity:0;transition:all .15s cubic-bezier(.2,0,1,.9)}:host(cds-custom-side-panel) .cds-custom--side-panel[slide-in]:not(.cds-custom--side-panel__overlay){box-shadow:none}:host(cds-custom-side-panel) .cds-custom--side-panel__header:before{z-index:99}:host(cds-custom-side-panel) .cds-custom--side-panel__header[has-action-toolbar]{margin-block-end:.5rem;padding-block-end:0}:host(cds-custom-side-panel) .cds-custom--side-panel .cds-custom--side-panel__header[has-action-toolbar]:before{content:normal}:host(cds-custom-side-panel) .cds-custom--side-panel__custom-header-wrapper--hidden{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}:host(cds-custom-side-panel) .cds-custom--side-panel__title-text{padding-inline-end:0}:host(cds-custom-side-panel) .cds-custom--side-panel__subtitle-text[hidden]{display:none}:host(cds-custom-side-panel) .cds-custom--side-panel__action-toolbar{margin-block-end:0;padding-inline-start:0}:host(cds-custom-side-panel) .cds-custom--side-panel__action-toolbar ::slotted(.cds-custom--side-panel__action-toolbar-leading-button){margin-inline-end:.5rem}:host(cds-custom-side-panel) .cds-custom--side-panel[has-slug] [scrolls]{background:linear-gradient(to top,var(--cds-layer) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1))}:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container{inline-size:100%}:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container[hidden]{display:none}:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container[actions-multiple=single] ::slotted(cds-custom-button){flex:0 0 100%;max-inline-size:none}:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container[actions-multiple=double] ::slotted(cds-custom-button){flex:0 1 50%;max-inline-size:none}:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container[actions-multiple=triple] ::slotted(cds-custom-button){flex:0 1 33.33%;max-inline-size:none}:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container{--flex-direction:row;flex-direction:var(--flex-direction)}:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container ::slotted(cds-custom-button){flex:0 1 25%;max-inline-size:14.5rem}:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container ::slotted(cds-custom-button[kind=ghost]){flex:1 1 25%;max-inline-size:none}:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container ::slotted(cds-custom-button[hidden]){display:none}@container (width <= 40rem){:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container[actions-multiple=double] ::slotted(cds-custom-button){flex:0 1 50%;max-inline-size:none}}@container (width <= 30rem){:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container[actions-multiple] ::slotted(cds-custom-button){flex:0 0 100%;max-inline-size:none}:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container[actions-multiple=double] ::slotted(cds-custom-button){flex:0 1 50%;max-inline-size:none}:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container[actions-multiple=triple]{--flex-direction:column-reverse}:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container[actions-multiple=triple] ::slotted(cds-custom-button){flex:initial;inline-size:100%;max-inline-size:none}}@container (width <= 20rem){:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container{--flex-direction:column-reverse}:host(cds-custom-side-panel) .cds-custom--side-panel__actions-container ::slotted(cds-custom-button){flex:initial;inline-size:100%;max-inline-size:none}}:host(cds-custom-side-panel) .cds-custom--side-panel__close-button{inline-size:2rem}:host(cds-custom-side-panel) .cds-custom--side-panel__resizer{position:absolute;z-index:9000;inset-block-end:0;inset-block-start:0;--resizer-thickness:4px;--resizer-grab-thickness:4px;--resizer-grab-color:transparent}:host(cds-custom-side-panel) .cds-custom--side-panel[placement=right] .cds-custom--side-panel__resizer{inset-inline-start:0}:host(cds-custom-side-panel) .cds-custom--side-panel[placement=left] .cds-custom--side-panel__resizer{inset-inline-end:0}"]);
+//#endregion
+export { side_panel_default as default };
+
+//# sourceMappingURL=side-panel.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel.scss.js","names":[],"sources":["../../../src/components/side-panel/side-panel.scss?lit"],"sourcesContent":["/*\n * Copyright IBM Corp. 2023, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n$css--plex: true !default;\n@use 'sass:map';\n\n/* Other Carbon settings. */\n@use '@carbon/styles/scss/reset';\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/utilities/ai-gradient' as *;\n@use '@carbon/styles/scss/utilities/convert' as *;\n@use '@carbon/styles/scss/utilities' as *;\n\n@use '@carbon/styles/scss/components/side-panel' as side-panel-styles;\n@use '@carbon/styles/scss/components/side-panel/side-panel-variables' as spv;\n@use '@carbon/styles/scss/components/action-set' as action-set-styles;\n\n// Emit Carbon side-panel and action-set class rules\n@include side-panel-styles.side-panel;\n@include action-set-styles.action-set;\n\n$block-class: #{$prefix}--side-panel;\n$block-class-action-set: #{$prefix}--action-set;\n\n:host(#{$prefix}-side-panel) {\n  /* Replaces use of Framer for slide in / out animation */\n  --#{$block-class}--displaced: 100%;\n\n  * {\n    /* not sure why things are coming out as content-box */\n    box-sizing: border-box;\n  }\n\n  .#{$block-class} {\n    @extend .#{$block-class} !optional;\n\n    /* for actions container query - note this changes the size calculation */\n    container-name: side-panel;\n    container-type: inline-size;\n\n    &[placement='left'] {\n      --#{$block-class}--displaced: -100%;\n    }\n\n    &[opening] {\n      transform: translateX(var(--#{$block-class}--displaced));\n    }\n\n    &[open] {\n      transform: translateX(0);\n      transition: all $duration-moderate-02 motion(standard, productive);\n    }\n\n    @media screen and (prefers-reduced-motion: reduce) {\n      &[open] {\n        transition: none;\n      }\n    }\n\n    &[closing] {\n      transform: translateX(var(--#{$block-class}--displaced));\n      transition: all $duration-moderate-01 motion(exit, productive);\n    }\n\n    @media screen and (prefers-reduced-motion: reduce) {\n      &[closing] {\n        transition: none;\n      }\n    }\n\n    &[placement='right'] {\n      @extend .#{$block-class}--right-placement !optional;\n\n      /* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */\n      border-inline-end: none;\n      inset-inline-end: 0;\n    }\n\n    &[placement='left'] {\n      @extend .#{$block-class}--left-placement !optional;\n\n      /* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */\n      border-inline-end: 1px solid $border-subtle-01;\n      inset-inline-start: 0;\n    }\n\n    @each $size, $size_value in spv.$side-panel-sizes {\n      &[size='#{$size}'] {\n        @extend .#{$block-class}--#{$size} !optional;\n      }\n    }\n\n    &[condensed-actions] {\n      @extend .#{$block-class}--condensed-actions !optional;\n    }\n  }\n\n  #{$prefix}-layer {\n    display: contents;\n  }\n\n  .#{$block-class}__overlay {\n    &[opening] {\n      opacity: 0;\n    }\n\n    @media screen and (prefers-reduced-motion: reduce) {\n      &[open] {\n        opacity: 1;\n        transition: none;\n      }\n    }\n\n    &[open] {\n      opacity: 1;\n      transition: all $duration-moderate-02 motion(standard, productive);\n    }\n\n    @media screen and (prefers-reduced-motion: reduce) {\n      &[closing] {\n        opacity: 0;\n        transition: none;\n      }\n    }\n\n    &[closing] {\n      opacity: 0;\n      transition: all $duration-moderate-01 motion(exit, productive);\n    }\n  }\n\n  // Slide-in panels should use border not shadows since they don't layer\n  .#{$block-class}[slide-in]:not(.#{$block-class}__overlay) {\n    box-shadow: none;\n  }\n\n  .#{$block-class}__header {\n    &::before {\n      z-index: 99; /* must be higher than action toolbar */\n    }\n\n    &[detail-step] {\n      @extend .#{$block-class}__header--on-detail-step !optional;\n    }\n\n    &[no-title-animation] {\n      @extend .#{$block-class}__header--no-title-animation !optional;\n    }\n\n    &[reduced-motion] {\n      @extend .#{$block-class}__header--reduced-motion !optional;\n    }\n\n    &[has-action-toolbar] {\n      margin-block-end: $spacing-03;\n      padding-block-end: 0;\n    }\n  }\n\n  .#{$block-class} .#{$block-class}__header[has-action-toolbar]::before {\n    content: initial; /* remove border below */\n  }\n\n  .#{$block-class}__custom-header-wrapper--hidden {\n    position: absolute;\n    overflow: hidden;\n    padding: 0;\n    border: 0;\n    margin: -1px;\n    block-size: 1px;\n    clip: rect(0, 0, 0, 0);\n    inline-size: 1px;\n    visibility: inherit;\n    white-space: nowrap;\n  }\n\n  .#{$block-class}__title-text {\n    padding-inline-end: 0;\n  }\n\n  .#{$block-class}__subtitle-text {\n    &[hidden] {\n      @extend .#{$prefix}--visually-hidden !optional;\n\n      display: none;\n    }\n  }\n\n  .#{$block-class}__action-toolbar {\n    margin-block-end: 0;\n    padding-inline-start: 0;\n\n    &[hidden] {\n      @extend .#{$prefix}--visually-hidden !optional;\n    }\n\n    ::slotted(.#{$block-class}__action-toolbar-leading-button) {\n      margin-inline-end: $spacing-03;\n    }\n  }\n\n  .#{$block-class} .#{$block-class}__action-toolbar[hidden] {\n    @extend .#{$prefix}--visually-hidden !optional;\n  }\n\n  .#{$block-class}[has-slug] {\n    @extend .#{$block-class}--has-slug !optional;\n  }\n\n  .#{$block-class}[has-slug] [scrolls] {\n    /* override carbon ai removing background gradient */\n    background:\n      linear-gradient(\n          to top,\n          var(--cds-layer) 0%,\n          $ai-aura-start 0%,\n          15%,\n          $ai-aura-end 50%\n        )\n        padding-box,\n      linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box,\n      linear-gradient(to bottom, $ai-border-start, $ai-border-end) border-box,\n      linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;\n    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;\n  }\n\n  [scrolls] {\n    @extend .#{$block-class}--scrolls !optional;\n  }\n\n  @mixin actions-placement() {\n    --flex-direction: row;\n    /* non carbon for IBM Products adjustment */\n    flex-direction: var(--flex-direction);\n\n    ::slotted(#{$prefix}-button) {\n      flex: 0 1 25%;\n      max-inline-size: to-rem(232px);\n    }\n\n    ::slotted(#{$prefix}-button[kind='ghost']) {\n      flex: 1 1 25%;\n      max-inline-size: none;\n    }\n\n    ::slotted(#{$prefix}-button[hidden]) {\n      @extend .#{$prefix}--visually-hidden !optional;\n\n      display: none;\n    }\n\n    // -1 in @container query is for 1px left border\n    @container (width <= #{map.get(spv.$side-panel-sizes, lg)}) {\n      &[actions-multiple='double'] ::slotted(#{$prefix}-button) {\n        // double on lg uses 50%\n        flex: 0 1 50%;\n        max-inline-size: none;\n      }\n    }\n\n    // -1 in @container query is for 1px left border\n    @container (width <= #{map.get(spv.$side-panel-sizes, md)}) {\n      // md is 50% for two and 100% for one\n      // column for triple\n      &[actions-multiple] ::slotted(#{$prefix}-button) {\n        flex: 0 0 100%;\n        max-inline-size: none;\n      }\n\n      &[actions-multiple='double'] ::slotted(#{$prefix}-button) {\n        flex: 0 1 50%;\n        max-inline-size: none;\n      }\n\n      &[actions-multiple='triple'] {\n        --flex-direction: column-reverse;\n\n        ::slotted(#{$prefix}-button) {\n          flex: initial;\n          inline-size: 100%;\n          max-inline-size: none;\n        }\n      }\n    }\n\n    // -1 in @container query is for 1px left border\n    @container (width <= #{map.get(spv.$side-panel-sizes, sm)}) {\n      --flex-direction: column-reverse;\n\n      ::slotted(#{$prefix}-button) {\n        flex: initial;\n        inline-size: 100%;\n        max-inline-size: none;\n      }\n    }\n  }\n\n  .#{$block-class}__actions-container {\n    @extend .#{$block-class-action-set} !optional;\n\n    inline-size: 100%;\n\n    &[hidden] {\n      @extend .#{$prefix}--visually-hidden !optional;\n\n      display: none;\n    }\n\n    // Override ActionSet styles for side-panel specific behavior\n    // Single button should always be full width in side-panel\n    &[actions-multiple='single'] ::slotted(#{$prefix}-button) {\n      flex: 0 0 100%;\n      max-inline-size: none;\n    }\n\n    // Double buttons should be 50% width each\n    &[actions-multiple='double'] ::slotted(#{$prefix}-button) {\n      flex: 0 1 50%;\n      max-inline-size: none;\n    }\n\n    // Triple buttons should be 33% width each\n    &[actions-multiple='triple'] ::slotted(#{$prefix}-button) {\n      flex: 0 1 33.33%;\n      max-inline-size: none;\n    }\n\n    @include actions-placement();\n  }\n\n  .sentinel {\n    @extend .#{$prefix}--visually-hidden !optional;\n  }\n\n  .#{$block-class}__close-button {\n    inline-size: 2rem;\n  }\n\n  .#{$block-class}__resizer {\n    position: absolute;\n    z-index: z('modal');\n    inset-block-end: 0;\n    inset-block-start: 0;\n    --resizer-thickness: 4px;\n    --resizer-grab-thickness: 4px;\n    --resizer-grab-color: transparent;\n  }\n\n  .#{$block-class}[placement='right'] .#{$block-class}__resizer {\n    inset-inline-start: 0;\n  }\n\n  .#{$block-class}[placement='left'] .#{$block-class}__resizer {\n    inset-inline-end: 0;\n  }\n}\n"],"mappings":""}

package/es-custom/components/side-panel/story-styles.scss.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 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 { css } from "lit";
+//#region src/components/side-panel/story-styles.scss?lit
+var story_styles_default = css([".side-panel-stories__body-content{display:flex;flex-direction:column;padding:1rem;gap:1rem}.side-panel-stories__text-inputs{display:flex;gap:1rem}.side-panel-stories__text-inputs>*{flex-basis:50%}.side-panel-stories__story-container{position:fixed;display:grid;block-size:100vh;grid-template-rows:3rem 1fr;inline-size:100vw;inset-block-start:0;inset-inline-start:0}.side-panel-stories__story-header{background:var(--cds-background-inverse,#393939)}.side-panel-stories__story-content{position:relative;display:flex;align-items:center;justify-content:center}.side-panel-stories__custom-header-content{margin-block-end:.5rem}"]);
+//#endregion
+export { story_styles_default as default };
+
+//# sourceMappingURL=story-styles.scss.js.map

package/es-custom/components/side-panel/story-styles.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"story-styles.scss.js","names":[],"sources":["../../../src/components/side-panel/story-styles.scss?lit"],"sourcesContent":["/*\n* Copyright IBM Corp. 2023, 2026\n*\n* This source code is licensed under the Apache-2.0 license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/spacing' as *;\n\n$story-prefix: 'side-panel-stories__';\n\n.#{$story-prefix}body-content {\n  display: flex;\n  flex-direction: column;\n  padding: $spacing-05;\n  gap: $spacing-05;\n}\n\n.#{$story-prefix}text-inputs {\n  display: flex;\n  gap: $spacing-05;\n\n  > * {\n    flex-basis: 50%;\n  }\n}\n\n.#{$story-prefix}story-container {\n  position: fixed;\n  display: grid;\n  block-size: 100vh;\n  grid-template-rows: 3rem 1fr;\n  inline-size: 100vw;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n}\n\n.#{$story-prefix}story-header {\n  background: $background-inverse;\n}\n\n.#{$story-prefix}story-content {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.#{$story-prefix}custom-header-content {\n  margin-block-end: $spacing-03;\n}\n"],"mappings":""}