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

package/es/components/resizer/resizer-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizer-handle.js","names":["styles","customElement"],"sources":["../../../src/components/resizer/resizer-handle.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026, 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, state } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './resizer-handle.scss?lit';\nimport type { ResizerAxis, Position } from './defs';\nimport {\n  DOUBLE_TAP,\n  KEYBOARD,\n  ARIA,\n  SELECTORS,\n  SLOTS,\n  EVENTS,\n  determineAxis,\n  calculateFlexRatio,\n  formatSplitRatio,\n  isWithinDistance,\n  triggerHapticFeedback,\n  createCustomEvent,\n  getOrientationFromAxis,\n  safeClosest,\n  safeQuerySelectorAll,\n} from './defs';\n\n/**\n * Resizer handle component for resizing panels.\n * @element cds-resizer-handle\n * @fires resize-start - Fired when dragging starts\n * @fires resize-drag  - Fired during dragging (detail: { axis, delta, position })\n * @fires resize-end   - Fired when dragging ends (detail: { axis, delta, position })\n * @fires resize-reset - Fired on double-tap / double-click\n */\n@customElement(`${prefix}-resizer-handle`)\nclass CDSResizerHandle extends LitElement {\n  static styles = styles;\n\n  /** Resize axis — determined automatically from slot, or set explicitly. */\n  @property({ type: String, reflect: true })\n  axis: ResizerAxis = 'y';\n\n  @state()\n  private _isDragging = false;\n\n  private _startNode?: HTMLElement;\n  private _endNode?: HTMLElement;\n  private _grid?: HTMLElement;\n  private _startSize = 0;\n  private _endSize = 0;\n  private _lastTapTime = 0;\n  private _lastTapPosition: Position = { x: 0, y: 0 };\n\n  private _boundStartDrag?: (e: PointerEvent) => void;\n  private _boundHandleKeyDown?: (e: KeyboardEvent) => void;\n  private _boundMove?: (e: PointerEvent) => void;\n  private _boundStop?: (e: PointerEvent) => void;\n\n  // ─── Public API (used by resizer-handle-pivot) ──────────────────────────────\n\n  setSyntheticHoverState(isHovered: boolean): void {\n    this.toggleAttribute('data-synthetic-hover', isHovered);\n    this.requestUpdate();\n  }\n\n  setSyntheticActiveState(isActive: boolean): void {\n    this.toggleAttribute('data-synthetic-active', isActive);\n    this.requestUpdate();\n  }\n\n  /** Start dragging (called by pivot component). */\n  startDrag = (e: PointerEvent): void => {\n    this._handlePointerDown(e);\n  };\n\n  /** Reset panel sizes to default (called by pivot component or double-click). */\n  resetSizes = (e: MouseEvent): void => {\n    e.preventDefault();\n    this.dispatchEvent(createCustomEvent(EVENTS.RESIZE_RESET));\n\n    if (this._grid) {\n      this._grid.style.removeProperty('--start-element-size');\n      this._grid.style.removeProperty('--end-element-size');\n      const handleTransitionEnd = () => {\n        this._updateAriaAttributes();\n        this._grid?.removeEventListener('transitionend', handleTransitionEnd);\n      };\n      this._grid.addEventListener('transitionend', handleTransitionEnd, {\n        once: true,\n      });\n    }\n  };\n\n  get pivot(): 'start' | 'end' | undefined {\n    return this._pivot;\n  }\n\n  // ─── Lifecycle ──────────────────────────────────────────────────────────────\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._initializeComponent();\n    this._setupEventListeners();\n  }\n\n  firstUpdated(): void {\n    if (this._grid && this._startNode && this._endNode) {\n      requestAnimationFrame(() => {\n        this._updateAriaAttributes();\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    this._cleanup();\n    super.disconnectedCallback();\n  }\n\n  // ─── Internals ──────────────────────────────────────────────────────────────\n\n  private _initializeComponent(): void {\n    this._grid = safeClosest(this, SELECTORS.GRID) || undefined;\n\n    const slot = this.getAttribute('slot');\n    const cursor = getComputedStyle(this).cursor;\n    this.axis = determineAxis(slot, cursor);\n\n    if (this._grid) {\n      const panels = safeQuerySelectorAll<HTMLElement>(\n        this._grid,\n        SELECTORS.PANEL\n      );\n      if (this.axis === 'x') {\n        this._startNode = panels.find((p) => p.slot === SLOTS.LEFT);\n        this._endNode = panels.find((p) => p.slot === SLOTS.RIGHT);\n      } else {\n        this._startNode = panels.find((p) => p.slot === SLOTS.TOP);\n        this._endNode = panels.find((p) => p.slot === SLOTS.BOTTOM);\n      }\n    }\n\n    this._setupAccessibility();\n  }\n\n  private _setupAccessibility(): void {\n    this.setAttribute('role', ARIA.ROLE_SEPARATOR);\n    this.setAttribute('tabindex', '0');\n    this.setAttribute('aria-orientation', getOrientationFromAxis(this.axis));\n    this.setAttribute('aria-live', ARIA.LIVE_ASSERTIVE);\n    if (this._grid && this._startNode && this._endNode) {\n      this.setAttribute('aria-valuenow', ARIA.VALUE_DEFAULT);\n      this.setAttribute('aria-valuemin', ARIA.VALUE_MIN);\n      this.setAttribute('aria-valuemax', ARIA.VALUE_MAX);\n      this.setAttribute('aria-valuetext', formatSplitRatio(50));\n    }\n  }\n\n  private _setupEventListeners(): void {\n    this._boundStartDrag = this._handlePointerDown.bind(this);\n    this._boundHandleKeyDown = this._handleKeyDown.bind(this);\n    this.addEventListener('pointerdown', this._boundStartDrag);\n    this.addEventListener('keydown', this._boundHandleKeyDown);\n  }\n\n  private _cleanup(): void {\n    if (this._boundStartDrag) {\n      this.removeEventListener('pointerdown', this._boundStartDrag);\n      this._boundStartDrag = undefined;\n    }\n    if (this._boundHandleKeyDown) {\n      this.removeEventListener('keydown', this._boundHandleKeyDown);\n      this._boundHandleKeyDown = undefined;\n    }\n    if (this._boundMove) {\n      window.removeEventListener('pointermove', this._boundMove);\n      this._boundMove = undefined;\n    }\n    if (this._boundStop) {\n      window.removeEventListener('pointerup', this._boundStop);\n      this._boundStop = undefined;\n    }\n    this.removeAttribute('data-synthetic-hover');\n    this.removeAttribute('data-synthetic-active');\n    this._isDragging = false;\n  }\n\n  private get _pivot(): 'start' | 'end' | undefined {\n    const panel = safeClosest(this, SELECTORS.PANEL);\n    if (!panel) return undefined;\n    const slot = panel.getAttribute('slot');\n    if (slot === SLOTS.LEFT) return 'end';\n    if (slot === SLOTS.RIGHT) return 'start';\n    return undefined;\n  }\n\n  private _updateAriaAttributes(): void {\n    if (!this._grid || !this._startNode || !this._endNode) return;\n    const rectStart = this._startNode.getBoundingClientRect();\n    const rectEnd = this._endNode.getBoundingClientRect();\n    const isHorizontal = this.axis === 'x';\n    const startSize = isHorizontal ? rectStart.width : rectStart.height;\n    const endSize = isHorizontal ? rectEnd.width : rectEnd.height;\n    const totalSize = startSize + endSize;\n    if (totalSize > 0) {\n      const percentage = Math.round((startSize / totalSize) * 100);\n      this.setAttribute('aria-valuenow', percentage.toString());\n      this.setAttribute('aria-valuemin', ARIA.VALUE_MIN);\n      this.setAttribute('aria-valuemax', ARIA.VALUE_MAX);\n      this.setAttribute('aria-valuetext', formatSplitRatio(percentage));\n    }\n  }\n\n  private _detectDoubleTap(e: PointerEvent): boolean {\n    const now = Date.now();\n    const dt = now - this._lastTapTime;\n    const currentPos: Position = { x: e.clientX, y: e.clientY };\n    if (\n      dt < DOUBLE_TAP.MAX_TIME_MS &&\n      isWithinDistance(\n        currentPos,\n        this._lastTapPosition,\n        DOUBLE_TAP.MAX_DISTANCE_PX\n      )\n    ) {\n      triggerHapticFeedback(DOUBLE_TAP.VIBRATION_MS);\n      this.resetSizes(e as MouseEvent);\n      this._lastTapTime = 0;\n      return true;\n    }\n    this._lastTapTime = now;\n    this._lastTapPosition = currentPos;\n    return false;\n  }\n\n  private _handlePointerDown = (e: PointerEvent): void => {\n    if (this._detectDoubleTap(e)) return;\n    e.preventDefault();\n    this._isDragging = true;\n    this.setSyntheticActiveState(true);\n\n    const startPosition: Position = { x: e.clientX, y: e.clientY };\n    const startValue = this.axis === 'x' ? e.clientX : e.clientY;\n\n    this.dispatchEvent(\n      createCustomEvent(EVENTS.RESIZE_START, { axis: this.axis, startPosition })\n    );\n\n    if (this._grid && this._startNode && this._endNode) {\n      const rectStart = this._startNode.getBoundingClientRect();\n      const rectEnd = this._endNode.getBoundingClientRect();\n      this._startSize = this.axis === 'x' ? rectStart.width : rectStart.height;\n      this._endSize = this.axis === 'x' ? rectEnd.width : rectEnd.height;\n    }\n\n    this._boundMove = this._createMoveHandler(startValue);\n    this._boundStop = this._createStopHandler(startValue);\n    window.addEventListener('pointermove', this._boundMove);\n    window.addEventListener('pointerup', this._boundStop);\n  };\n\n  private _createMoveHandler(startValue: number): (e: PointerEvent) => void {\n    return (e: PointerEvent) => {\n      if (!this._isDragging) return;\n      const currentValue = this.axis === 'x' ? e.clientX : e.clientY;\n      const delta = currentValue - startValue;\n      const position: Position = { x: e.clientX, y: e.clientY };\n      this.dispatchEvent(\n        createCustomEvent(EVENTS.RESIZE_DRAG, {\n          axis: this.axis,\n          delta,\n          position,\n        })\n      );\n      if (this._grid && this._startNode && this._endNode) {\n        this._updateGridSizes(delta);\n      }\n    };\n  }\n\n  private _createStopHandler(startValue: number): (e: PointerEvent) => void {\n    return (e: PointerEvent) => {\n      const currentValue = this.axis === 'x' ? e.clientX : e.clientY;\n      const delta = currentValue - startValue;\n      const position: Position = { x: e.clientX, y: e.clientY };\n      this.dispatchEvent(\n        createCustomEvent(EVENTS.RESIZE_END, {\n          axis: this.axis,\n          delta,\n          position,\n        })\n      );\n      if (this._boundMove) {\n        window.removeEventListener('pointermove', this._boundMove);\n        this._boundMove = undefined;\n      }\n      if (this._boundStop) {\n        window.removeEventListener('pointerup', this._boundStop);\n        this._boundStop = undefined;\n      }\n      if (this._grid) this._grid.style.removeProperty('transition');\n      this._isDragging = false;\n      this.setSyntheticActiveState(false);\n    };\n  }\n\n  private _updateGridSizes(delta: number): void {\n    if (!this._grid) return;\n    this._grid.style.transition = 'none';\n    const start = this._startSize + delta;\n    const end = this._endSize - delta;\n    const total = start + end || 1;\n    this._grid.style.setProperty(\n      '--start-element-size',\n      `${calculateFlexRatio(start, total)}fr`\n    );\n    this._grid.style.setProperty(\n      '--end-element-size',\n      `${calculateFlexRatio(end, total)}fr`\n    );\n    this._updateAriaAttributes();\n  }\n\n  private _handleKeyDown = (e: KeyboardEvent): void => {\n    const navKeys = [\n      'ArrowUp',\n      'ArrowDown',\n      'ArrowLeft',\n      'ArrowRight',\n      'Home',\n      'End',\n      'PageUp',\n      'PageDown',\n    ];\n    if (!navKeys.includes(e.key)) return;\n    e.preventDefault();\n    e.stopPropagation();\n\n    const step = e.shiftKey ? KEYBOARD.LARGE_STEP_PX : KEYBOARD.DEFAULT_STEP_PX;\n    const isHorizontal = this.axis === 'x';\n    let delta = 0;\n\n    if (e.key === 'ArrowUp' && !isHorizontal) delta = -step;\n    else if (e.key === 'ArrowDown' && !isHorizontal) delta = step;\n    else if (e.key === 'ArrowLeft' && isHorizontal) delta = -step;\n    else if (e.key === 'ArrowRight' && isHorizontal) delta = step;\n    else if (e.key === 'Home' && this._grid && this._startNode) {\n      const rect = this._startNode.getBoundingClientRect();\n      delta = isHorizontal ? -rect.width : -rect.height;\n    } else if (e.key === 'End' && this._grid && this._endNode) {\n      const rect = this._endNode.getBoundingClientRect();\n      delta = isHorizontal ? rect.width : rect.height;\n    }\n\n    if (delta !== 0) this._handleKeyboardResize(delta);\n  };\n\n  private _handleKeyboardResize(delta: number): void {\n    const position: Position = { x: 0, y: 0 };\n    this.dispatchEvent(\n      createCustomEvent(EVENTS.RESIZE_START, {\n        axis: this.axis,\n        startPosition: position,\n      })\n    );\n    if (this._grid && this._startNode && this._endNode) {\n      const rectStart = this._startNode.getBoundingClientRect();\n      const rectEnd = this._endNode.getBoundingClientRect();\n      const isHorizontal = this.axis === 'x';\n      this._startSize = isHorizontal ? rectStart.width : rectStart.height;\n      this._endSize = isHorizontal ? rectEnd.width : rectEnd.height;\n      const start = this._startSize + delta;\n      const end = this._endSize - delta;\n      const total = start + end || 1;\n      this._grid.style.setProperty(\n        '--start-element-size',\n        `${calculateFlexRatio(start, total)}fr`\n      );\n      this._grid.style.setProperty(\n        '--end-element-size',\n        `${calculateFlexRatio(end, total)}fr`\n      );\n      this._updateAriaAttributes();\n    }\n    this.dispatchEvent(\n      createCustomEvent(EVENTS.RESIZE_DRAG, {\n        axis: this.axis,\n        delta,\n        position,\n      })\n    );\n    this.dispatchEvent(\n      createCustomEvent(EVENTS.RESIZE_END, { axis: this.axis, delta, position })\n    );\n  }\n\n  render() {\n    return html`\n      <div class=\"handle-content\">\n        <span class=\"sr-only\">\n          Use arrow keys to resize, hold Shift for larger steps. Double-click to\n          reset.\n        </span>\n        <div>\n          ${this._pivot === 'start'\n            ? html`<slot name=\"${SLOTS.PIVOT}\"></slot>`\n            : ''}\n        </div>\n        <div class=\"icon-container\" part=\"icon-container\">\n          <slot name=\"${SLOTS.ICON}\"></slot>\n        </div>\n        <div>\n          ${this._pivot === 'end'\n            ? html`<slot name=\"${SLOTS.PIVOT}\"></slot>`\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cds-resizer-handle': CDSResizerHandle;\n  }\n}\n\nexport default CDSResizerHandle;\n"],"mappings":"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"}

package/es/components/resizer/resizer-handle.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/resizer/resizer-handle.scss?lit
+var resizer_handle_default = css([".handle-content{display:flex;block-size:100%;inline-size:100%}.icon-container{display:flex;flex-grow:1;align-items:center;justify-content:center;block-size:100%}:host{display:grid;background:var(--cds-border-subtle);cursor:ns-resize;min-block-size:max(1px,var(--resizer-thickness));min-inline-size:max(1px,var(--resizer-thickness));touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host .icon-container{position:relative}:host .icon-container:before{position:absolute;background-color:var(--resizer-grab-color);block-size:calc(max(1px, var(--resizer-thickness)) + max(0px, var(--resizer-grab-thickness)));content:\"\";inline-size:100%;inset-inline-start:0}@media (prefers-reduced-motion:no-preference){:host(:hover),:host([data-synthetic-hover]){background-color:var(--cds-border-interactive);transition:background-color var(--cds-duration-moderate-01)}}:host(:focus){background-color:var(--cds-border-interactive);outline:none}:host(:active),:host([data-synthetic-active]){background-color:var(--cds-border-interactive)}:host(:focus:not(:focus-visible)){box-shadow:none;outline:none}:host([orientation=horizontal]),:host([slot=handle-horizontal]){cursor:ew-resize}:host([orientation=horizontal]) .icon-container,:host([slot=handle-horizontal]) .icon-container{position:relative}:host([orientation=horizontal]) .icon-container:before,:host([slot=handle-horizontal]) .icon-container:before{position:absolute;background-color:var(--resizer-grab-color);block-size:100%;content:\"\";inline-size:calc(max(1px, var(--resizer-thickness)) + max(0px, var(--resizer-grab-thickness)));inset-block-start:0;inset-inline-start:auto}:host([orientation=vertical]),:host([slot=handle-vertical]){cursor:ns-resize;min-inline-size:0}:host([orientation=vertical]) .icon-container,:host([slot=handle-vertical]) .icon-container{position:relative}:host([orientation=vertical]) .icon-container:before,:host([slot=handle-vertical]) .icon-container:before{position:absolute;background-color:var(--resizer-grab-color);block-size:calc(max(1px, var(--resizer-thickness)) + max(0px, var(--resizer-grab-thickness)));content:\"\";inline-size:100%;inset-inline-start:0}.sr-only{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;white-space:nowrap}"]);
+//#endregion
+export { resizer_handle_default as default };
+
+//# sourceMappingURL=resizer-handle.scss.js.map

package/es/components/resizer/resizer-handle.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizer-handle.scss.js","names":[],"sources":["../../../src/components/resizer/resizer-handle.scss?lit"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026, 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.handle-content {\n  display: flex;\n  block-size: 100%;\n  inline-size: 100%;\n}\n\n.icon-container {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  block-size: 100%;\n}\n\n:host {\n  display: grid;\n  background: var(--cds-border-subtle);\n  cursor: ns-resize;\n  min-block-size: max(1px, var(--resizer-thickness));\n  min-inline-size: max(1px, var(--resizer-thickness));\n  touch-action: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n\n  .icon-container {\n    position: relative;\n\n    &::before {\n      position: absolute;\n      background-color: var(--resizer-grab-color);\n      block-size: calc(\n        max(1px, var(--resizer-thickness)) +\n          max(0px, var(--resizer-grab-thickness))\n      );\n      content: '';\n      inline-size: 100%;\n      inset-inline-start: 0;\n    }\n  }\n}\n\n:host(:hover),\n:host([data-synthetic-hover]) {\n  @media (prefers-reduced-motion: no-preference) {\n    background-color: var(--cds-border-interactive);\n    transition: background-color var(--cds-duration-moderate-01);\n  }\n}\n\n:host(:focus) {\n  background-color: var(--cds-border-interactive);\n  outline: none;\n}\n\n:host(:active),\n:host([data-synthetic-active]) {\n  background-color: var(--cds-border-interactive);\n}\n\n:host(:focus:not(:focus-visible)) {\n  box-shadow: none;\n  outline: none;\n}\n\n:host([slot='handle-horizontal']),\n:host([orientation='horizontal']) {\n  cursor: ew-resize;\n\n  .icon-container {\n    position: relative;\n\n    &::before {\n      position: absolute;\n      background-color: var(--resizer-grab-color);\n      block-size: 100%;\n      content: '';\n      inline-size: calc(\n        max(1px, var(--resizer-thickness)) +\n          max(0px, var(--resizer-grab-thickness))\n      );\n      inset-block-start: 0;\n      inset-inline-start: auto;\n    }\n  }\n}\n\n:host([slot='handle-vertical']),\n:host([orientation='vertical']) {\n  cursor: ns-resize;\n  min-inline-size: 0;\n\n  .icon-container {\n    position: relative;\n\n    &::before {\n      position: absolute;\n      background-color: var(--resizer-grab-color);\n      block-size: calc(\n        max(1px, var(--resizer-thickness)) +\n          max(0px, var(--resizer-grab-thickness))\n      );\n      content: '';\n      inline-size: 100%;\n      inset-inline-start: 0;\n    }\n  }\n}\n\n.sr-only {\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  white-space: nowrap;\n}\n"],"mappings":""}

package/es/components/resizer/resizer-panel.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2026, 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 { LitElement } from 'lit';
+/**
+ * Resizer panel component for resizable content areas.
+ * @element cds-resizer-panel
+ */
+declare class CDSResizerPanel extends LitElement {
+    static styles: any;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cds-resizer-panel': CDSResizerPanel;
+    }
+}
+export default CDSResizerPanel;
+//# sourceMappingURL=resizer-panel.d.ts.map

package/es/components/resizer/resizer-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizer-panel.d.ts","sourceRoot":"","sources":["../../../src/components/resizer/resizer-panel.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;GAGG;AACH,cACM,eAAgB,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,MAAU;IAEvB,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF;AAED,eAAe,eAAe,CAAC"}

package/es/components/resizer/resizer-panel.js

@@ -0,0 +1,37 @@
+/**
+ * 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 "../../globals/settings.js";
+import { carbonElement } from "../../globals/decorators/carbon-element.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import resizer_panel_default$1 from "./resizer-panel.scss.js";
+import { LitElement, html } from "lit";
+//#region src/components/resizer/resizer-panel.ts
+/**
+* Copyright IBM Corp. 2026, 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.
+*/
+/**
+* Resizer panel component for resizable content areas.
+* @element cds-resizer-panel
+*/
+let CDSResizerPanel = class CDSResizerPanel extends LitElement {
+	static {
+		this.styles = resizer_panel_default$1;
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+CDSResizerPanel = __decorate([carbonElement(`cds-resizer-panel`)], CDSResizerPanel);
+var resizer_panel_default = CDSResizerPanel;
+//#endregion
+export { resizer_panel_default as default };
+
+//# sourceMappingURL=resizer-panel.js.map

package/es/components/resizer/resizer-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizer-panel.js","names":["styles","customElement"],"sources":["../../../src/components/resizer/resizer-panel.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026, 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 { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './resizer-panel.scss?lit';\n\n/**\n * Resizer panel component for resizable content areas.\n * @element cds-resizer-panel\n */\n@customElement(`${prefix}-resizer-panel`)\nclass CDSResizerPanel extends LitElement {\n  static styles = styles;\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cds-resizer-panel': CDSResizerPanel;\n  }\n}\n\nexport default CDSResizerPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgBA,IAAA,kBAAA,MACM,wBAAwB,WAAW;;gBACvBA;;CAEhB,SAAS;EACP,OAAO,IAAI;CACb;AACF;8BAPCC,cAAc,mBAAyB,CAAA,GAAA,eAAA;AAexC,IAAA,wBAAe"}

package/es/components/resizer/resizer-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/resizer/resizer-panel.scss?lit
+var resizer_panel_default = css([":host{overflow:hidden}"]);
+//#endregion
+export { resizer_panel_default as default };
+
+//# sourceMappingURL=resizer-panel.scss.js.map

package/es/components/resizer/resizer-panel.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizer-panel.scss.js","names":[],"sources":["../../../src/components/resizer/resizer-panel.scss?lit"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026, 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:host {\n  overflow: hidden;\n}\n"],"mappings":""}

package/es/components/side-panel/_story-assets/index.d.ts

@@ -0,0 +1,9 @@
+import '../../breadcrumb/index';
+import '../../notification/index';
+export declare const getContent: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getSubTitle: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getActionToolbarItems: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getActionItems: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getSlug: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getCustomHeaderComponents: (index: any) => import("lit-html").TemplateResult<1> | null;
+//# sourceMappingURL=index.d.ts.map

package/es/components/side-panel/_story-assets/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/side-panel/_story-assets/index.ts"],"names":[],"mappings":"AAYA,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAIlC,eAAO,MAAM,UAAU,GAAI,UAAK,gDAuD/B,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,UAAK,gDAYhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,UAAK,gDA2B1C,CAAC;AAGF,eAAO,MAAM,cAAc,GAAI,UAAK,gDAsEnC,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,UAAK,gDAsB5B,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,UAAK,gDAoD9C,CAAC"}

package/es/components/side-panel/_story-assets/index.js

@@ -0,0 +1,246 @@
+/**
+ * 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 iconLoader from "../../../globals/internal/icon-loader.js";
+import "../../button/defs.js";
+import "../../breadcrumb/index.js";
+import "../../notification/index.js";
+import story_styles_default from "../story-styles.scss.js";
+import { html } from "lit";
+import TrashCan16 from "@carbon/icons/es/trash-can/16";
+import Settings16 from "@carbon/icons/es/settings/16";
+//#region src/components/side-panel/_story-assets/index.ts
+/**
+* Copyright IBM Corp. 2024, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const storyPrefix = "side-panel-stories__";
+const getContent = (index) => {
+	switch (index) {
+		case 1: return html`
+        <style>
+          ${story_styles_default}
+        </style>
+        <h5>Section</h5>
+        <cds-text-input
+          label="Input A"
+          id="side-panel-story-text-input-a"
+          class="${storyPrefix}text-input"></cds-text-input>
+        <cds-text-input
+          label="Input B"
+          id="side-panel-story-text-input-b"
+          class="${storyPrefix}text-input"></cds-text-input>
+      `;
+		case 2: return html`
+        <style>
+          ${story_styles_default}
+        </style>
+        <h5>Section</h5>
+        <div class="${storyPrefix}text-inputs">
+          <cds-text-input
+            label="Input A"
+            id="side-panel-story-text-input-a"></cds-text-input>
+          <cds-text-input
+            label="Input B"
+            id="side-panel-story-text-input-b"></cds-text-input>
+        </div>
+        <div class="${storyPrefix}text-inputs">
+          <cds-text-input
+            label="Input C"
+            id="side-panel-story-text-input-c"></cds-text-input>
+          <cds-text-input
+            label="Input D"
+            id="side-panel-story-text-input-d"></cds-text-input>
+        </div>
+        <div class="${storyPrefix}textarea-container">
+          <cds-textarea
+            label="Notes"
+            value="This is a text area"></cds-textarea>
+          <cds-textarea
+            label="Notes"
+            value="This is a text area"></cds-textarea>
+          <cds-textarea
+            label="Notes"
+            value="This is a text area"></cds-textarea>
+        </div>
+      `;
+		default: return null;
+	}
+};
+const getSubTitle = (index) => {
+	switch (index) {
+		case 1: return html`<div slot="subtitle">This is your subtitle slot.</div>`;
+		case 2: return html`<div slot="subtitle">
+        I am your subtitle slot for <strong>adding detail</strong> that can be
+        one or two lines.
+      </div>`;
+		default: return null;
+	}
+};
+const getActionToolbarItems = (index) => {
+	switch (index) {
+		case 1: return html`
+        <cds-button slot="action-toolbar">Copy</cds-button>
+        <cds-button
+          slot="action-toolbar"
+          aria-label="Settings"
+          has-icon-only="true"
+          kind=${"ghost"}
+          size="sm"
+          tooltip-text="Settings">
+          ${iconLoader(Settings16, { slot: "icon" })}
+        </cds-button>
+        <cds-button
+          slot="action-toolbar"
+          aria-label="Delete"
+          has-icon-only="true"
+          kind=${"ghost"}
+          size="sm"
+          tooltip-text="Delete">
+          ${iconLoader(TrashCan16, { slot: "icon" })}
+        </cds-button>
+      `;
+		default: return null;
+	}
+};
+const getActionItems = (index) => {
+	switch (index) {
+		case 1: return html`<cds-button slot="actions" kind=${"primary"}
+        >Primary</cds-button
+      >`;
+		case 2: return html`<cds-button slot="actions" kind=${"ghost"}
+        >Ghost</cds-button
+      >`;
+		case 3: return html`<cds-button slot="actions" kind=${"danger"}
+        >Danger</cds-button
+      >`;
+		case 4: return html`
+        <cds-button slot="actions" kind=${"secondary"}
+          >Secondary</cds-button
+        >
+        <cds-button slot="actions" kind=${"primary"}
+          >Primary</cds-button
+        >
+      `;
+		case 5: return html`
+        <cds-button slot="actions" kind=${"ghost"}>Ghost</cds-button>
+        <cds-button slot="actions" kind=${"primary"}
+          >Primary</cds-button
+        >
+      `;
+		case 6: return html`<cds-button slot="actions" kind=${"danger"}
+          >Danger</cds-button
+        >
+        <cds-button slot="actions" kind=${"primary"}
+          >Primary</cds-button
+        >`;
+		case 7: return html`<cds-button slot="actions" kind=${"ghost"}
+          >Ghost</cds-button
+        >
+        <cds-button slot="actions" kind=${"secondary"}
+          >Secondary</cds-button
+        >
+        <cds-button slot="actions" kind=${"primary"}
+          >Primary</cds-button
+        >`;
+		case 8: return html`<cds-button slot="actions" kind=${"danger"}
+          >Danger</cds-button
+        >
+        <cds-button slot="actions" kind=${"secondary"}
+          >Secondary</cds-button
+        >
+        <cds-button slot="actions" kind=${"primary"}
+          >Primary</cds-button
+        >`;
+		case 9: return html`<cds-button slot="actions" kind=${"secondary"}
+          >Secondary</cds-button
+        >
+        <cds-button slot="actions" kind=${"secondary"}
+          >Secondary</cds-button
+        >
+        <cds-button slot="actions" kind=${"primary"}
+          >Primary</cds-button
+        >`;
+		default: return null;
+	}
+};
+const getSlug = (index) => {
+	switch (index) {
+		case 1: return html`<cds-slug size="xs" alignment="bottom-right">
+        <div slot="body-text">
+          <p class="secondary">AI Explained</p>
+          <h1>84%</h1>
+          <p class="secondary bold">Confidence score</p>
+          <!-- //cspell: disable -->
+          <p class="secondary">
+            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+          </p>
+          <!-- //cspell: enable -->
+          <hr />
+          <p class="secondary">Model type</p>
+          <p class="bold">Foundation model</p>
+        </div>
+      </cds-slug>`;
+		default: return null;
+	}
+};
+const getCustomHeaderComponents = (index) => {
+	switch (index) {
+		case 1: return html` <style>
+          ${story_styles_default}
+        </style>
+        <div slot="above-title" class="${storyPrefix}custom-header-content">
+          <cds-breadcrumb aria-label="">
+            <cds-breadcrumb-item>
+              <cds-breadcrumb-link href="#">Breadcrumb 1</cds-breadcrumb-link>
+            </cds-breadcrumb-item>
+            <cds-breadcrumb-item>
+              <cds-breadcrumb-link href="#">Breadcrumb 2</cds-breadcrumb-link>
+            </cds-breadcrumb-item>
+          </cds-breadcrumb>
+        </div>`;
+		case 2: return html` <style>
+          ${story_styles_default}
+        </style>
+        <div slot="below-title" class="${storyPrefix}custom-header-content">
+          <cds-inline-notification
+            title="Notification title"
+            subtitle="Subtitle text goes here"
+            kind="error">
+          </cds-inline-notification>
+        </div>`;
+		case 3: return html` <style>
+          ${story_styles_default}
+        </style>
+        <div slot="above-title" class="${storyPrefix}custom-header-content">
+          <cds-breadcrumb aria-label="">
+            <cds-breadcrumb-item>
+              <cds-breadcrumb-link href="#">Breadcrumb 1</cds-breadcrumb-link>
+            </cds-breadcrumb-item>
+            <cds-breadcrumb-item>
+              <cds-breadcrumb-link href="#">Breadcrumb 2</cds-breadcrumb-link>
+            </cds-breadcrumb-item>
+          </cds-breadcrumb>
+        </div>
+
+        <div slot="below-title" class="${storyPrefix}custom-header-content">
+          <cds-inline-notification
+            title="Notification title"
+            subtitle="Subtitle text goes here"
+            kind="error">
+          </cds-inline-notification>
+        </div>`;
+		default: return null;
+	}
+};
+//#endregion
+export { getActionItems, getActionToolbarItems, getContent, getCustomHeaderComponents, getSlug, getSubTitle };
+
+//# sourceMappingURL=index.js.map

package/es/components/side-panel/_story-assets/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["styles"],"sources":["../../../../src/components/side-panel/_story-assets/index.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2024, 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 */\nimport { html } from 'lit';\nimport styles from '../story-styles.scss?lit';\nimport { BUTTON_KIND } from '../../button/defs';\nimport TrashCan16 from '@carbon/icons/es/trash-can/16';\nimport Settings16 from '@carbon/icons/es/settings/16';\nimport { iconLoader } from '../../../globals/internal/icon-loader';\nimport '../../breadcrumb/index';\nimport '../../notification/index';\n\nconst storyPrefix = 'side-panel-stories__';\n\nexport const getContent = (index) => {\n  switch (index) {\n    case 1:\n      return html`\n        <style>\n          ${styles}\n        </style>\n        <h5>Section</h5>\n        <cds-text-input\n          label=\"Input A\"\n          id=\"side-panel-story-text-input-a\"\n          class=\"${storyPrefix}text-input\"></cds-text-input>\n        <cds-text-input\n          label=\"Input B\"\n          id=\"side-panel-story-text-input-b\"\n          class=\"${storyPrefix}text-input\"></cds-text-input>\n      `;\n    case 2:\n      return html`\n        <style>\n          ${styles}\n        </style>\n        <h5>Section</h5>\n        <div class=\"${storyPrefix}text-inputs\">\n          <cds-text-input\n            label=\"Input A\"\n            id=\"side-panel-story-text-input-a\"></cds-text-input>\n          <cds-text-input\n            label=\"Input B\"\n            id=\"side-panel-story-text-input-b\"></cds-text-input>\n        </div>\n        <div class=\"${storyPrefix}text-inputs\">\n          <cds-text-input\n            label=\"Input C\"\n            id=\"side-panel-story-text-input-c\"></cds-text-input>\n          <cds-text-input\n            label=\"Input D\"\n            id=\"side-panel-story-text-input-d\"></cds-text-input>\n        </div>\n        <div class=\"${storyPrefix}textarea-container\">\n          <cds-textarea\n            label=\"Notes\"\n            value=\"This is a text area\"></cds-textarea>\n          <cds-textarea\n            label=\"Notes\"\n            value=\"This is a text area\"></cds-textarea>\n          <cds-textarea\n            label=\"Notes\"\n            value=\"This is a text area\"></cds-textarea>\n        </div>\n      `;\n\n    default:\n      return null;\n  }\n};\n\nexport const getSubTitle = (index) => {\n  switch (index) {\n    case 1:\n      return html`<div slot=\"subtitle\">This is your subtitle slot.</div>`;\n    case 2:\n      return html`<div slot=\"subtitle\">\n        I am your subtitle slot for <strong>adding detail</strong> that can be\n        one or two lines.\n      </div>`;\n    default:\n      return null;\n  }\n};\n\nexport const getActionToolbarItems = (index) => {\n  switch (index) {\n    case 1:\n      return html`\n        <cds-button slot=\"action-toolbar\">Copy</cds-button>\n        <cds-button\n          slot=\"action-toolbar\"\n          aria-label=\"Settings\"\n          has-icon-only=\"true\"\n          kind=${BUTTON_KIND.GHOST}\n          size=\"sm\"\n          tooltip-text=\"Settings\">\n          ${iconLoader(Settings16, { slot: 'icon' })}\n        </cds-button>\n        <cds-button\n          slot=\"action-toolbar\"\n          aria-label=\"Delete\"\n          has-icon-only=\"true\"\n          kind=${BUTTON_KIND.GHOST}\n          size=\"sm\"\n          tooltip-text=\"Delete\">\n          ${iconLoader(TrashCan16, { slot: 'icon' })}\n        </cds-button>\n      `;\n    default:\n      return null;\n  }\n};\n\n// TODO: There are problems switching this\nexport const getActionItems = (index) => {\n  switch (index) {\n    case 1: // One button\n      return html`<cds-button slot=\"actions\" kind=${BUTTON_KIND.PRIMARY}\n        >Primary</cds-button\n      >`;\n    case 2: // One button (ghost)\n      return html`<cds-button slot=\"actions\" kind=${BUTTON_KIND.GHOST}\n        >Ghost</cds-button\n      >`;\n    case 3: // One button (danger)\n      return html`<cds-button slot=\"actions\" kind=${BUTTON_KIND.DANGER}\n        >Danger</cds-button\n      >`;\n    case 4: // Two buttons\n      return html`\n        <cds-button slot=\"actions\" kind=${BUTTON_KIND.SECONDARY}\n          >Secondary</cds-button\n        >\n        <cds-button slot=\"actions\" kind=${BUTTON_KIND.PRIMARY}\n          >Primary</cds-button\n        >\n      `;\n    case 5: // Two buttons with ghost\n      return html`\n        <cds-button slot=\"actions\" kind=${BUTTON_KIND.GHOST}>Ghost</cds-button>\n        <cds-button slot=\"actions\" kind=${BUTTON_KIND.PRIMARY}\n          >Primary</cds-button\n        >\n      `;\n    case 6: // Two buttons with danger\n      return html`<cds-button slot=\"actions\" kind=${BUTTON_KIND.DANGER}\n          >Danger</cds-button\n        >\n        <cds-button slot=\"actions\" kind=${BUTTON_KIND.PRIMARY}\n          >Primary</cds-button\n        >`;\n    case 7: // Three buttons with ghost\n      return html`<cds-button slot=\"actions\" kind=${BUTTON_KIND.GHOST}\n          >Ghost</cds-button\n        >\n        <cds-button slot=\"actions\" kind=${BUTTON_KIND.SECONDARY}\n          >Secondary</cds-button\n        >\n        <cds-button slot=\"actions\" kind=${BUTTON_KIND.PRIMARY}\n          >Primary</cds-button\n        >`;\n    case 8: // Three buttons with danger\n      return html`<cds-button slot=\"actions\" kind=${BUTTON_KIND.DANGER}\n          >Danger</cds-button\n        >\n        <cds-button slot=\"actions\" kind=${BUTTON_KIND.SECONDARY}\n          >Secondary</cds-button\n        >\n        <cds-button slot=\"actions\" kind=${BUTTON_KIND.PRIMARY}\n          >Primary</cds-button\n        >`;\n    case 9: // Three buttons\n      return html`<cds-button slot=\"actions\" kind=${BUTTON_KIND.SECONDARY}\n          >Secondary</cds-button\n        >\n        <cds-button slot=\"actions\" kind=${BUTTON_KIND.SECONDARY}\n          >Secondary</cds-button\n        >\n        <cds-button slot=\"actions\" kind=${BUTTON_KIND.PRIMARY}\n          >Primary</cds-button\n        >`;\n    default:\n      return null;\n  }\n};\n\nexport const getSlug = (index) => {\n  switch (index) {\n    case 1:\n      return html`<cds-slug size=\"xs\" alignment=\"bottom-right\">\n        <div slot=\"body-text\">\n          <p class=\"secondary\">AI Explained</p>\n          <h1>84%</h1>\n          <p class=\"secondary bold\">Confidence score</p>\n          <!-- //cspell: disable -->\n          <p class=\"secondary\">\n            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n          </p>\n          <!-- //cspell: enable -->\n          <hr />\n          <p class=\"secondary\">Model type</p>\n          <p class=\"bold\">Foundation model</p>\n        </div>\n      </cds-slug>`;\n    default:\n      return null;\n  }\n};\n\nexport const getCustomHeaderComponents = (index) => {\n  switch (index) {\n    case 1:\n      return html` <style>\n          ${styles}\n        </style>\n        <div slot=\"above-title\" class=\"${storyPrefix}custom-header-content\">\n          <cds-breadcrumb aria-label=\"\">\n            <cds-breadcrumb-item>\n              <cds-breadcrumb-link href=\"#\">Breadcrumb 1</cds-breadcrumb-link>\n            </cds-breadcrumb-item>\n            <cds-breadcrumb-item>\n              <cds-breadcrumb-link href=\"#\">Breadcrumb 2</cds-breadcrumb-link>\n            </cds-breadcrumb-item>\n          </cds-breadcrumb>\n        </div>`;\n    case 2:\n      return html` <style>\n          ${styles}\n        </style>\n        <div slot=\"below-title\" class=\"${storyPrefix}custom-header-content\">\n          <cds-inline-notification\n            title=\"Notification title\"\n            subtitle=\"Subtitle text goes here\"\n            kind=\"error\">\n          </cds-inline-notification>\n        </div>`;\n    case 3:\n      return html` <style>\n          ${styles}\n        </style>\n        <div slot=\"above-title\" class=\"${storyPrefix}custom-header-content\">\n          <cds-breadcrumb aria-label=\"\">\n            <cds-breadcrumb-item>\n              <cds-breadcrumb-link href=\"#\">Breadcrumb 1</cds-breadcrumb-link>\n            </cds-breadcrumb-item>\n            <cds-breadcrumb-item>\n              <cds-breadcrumb-link href=\"#\">Breadcrumb 2</cds-breadcrumb-link>\n            </cds-breadcrumb-item>\n          </cds-breadcrumb>\n        </div>\n\n        <div slot=\"below-title\" class=\"${storyPrefix}custom-header-content\">\n          <cds-inline-notification\n            title=\"Notification title\"\n            subtitle=\"Subtitle text goes here\"\n            kind=\"error\">\n          </cds-inline-notification>\n        </div>`;\n    default:\n      return null;\n  }\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,cAAc;AAEpB,MAAa,cAAc,UAAU;CACnC,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,IAAI;;YAELA,qBAAO;;;;;;mBAMA,YAAY;;;;mBAIZ,YAAY;;EAE3B,KAAK,GACH,OAAO,IAAI;;YAELA,qBAAO;;;sBAGG,YAAY;;;;;;;;sBAQZ,YAAY;;;;;;;;sBAQZ,YAAY;;;;;;;;;;;;EAa9B,SACE,OAAO;CACX;AACF;AAEA,MAAa,eAAe,UAAU;CACpC,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,IAAI;EACb,KAAK,GACH,OAAO,IAAI;;;;EAIb,SACE,OAAO;CACX;AACF;AAEA,MAAa,yBAAyB,UAAU;CAC9C,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,IAAI;;;;;;yBAMkB;;;YAGvB,WAAW,YAAY,EAAE,MAAM,OAAO,CAAC,EAAE;;;;;;yBAMlB;;;YAGvB,WAAW,YAAY,EAAE,MAAM,OAAO,CAAC,EAAE;;;EAGjD,SACE,OAAO;CACX;AACF;AAGA,MAAa,kBAAkB,UAAU;CACvC,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,IAAI,mCAAA,UAAuD;;;EAGpE,KAAK,GACH,OAAO,IAAI,mCAAA,QAAqD;;;EAGlE,KAAK,GACH,OAAO,IAAI,mCAAA,SAAsD;;;EAGnE,KAAK,GACH,OAAO,IAAI;sDAC+C;;;oDAGF;;;;EAI1D,KAAK,GACH,OAAO,IAAI;kDAC2C;oDACE;;;;EAI1D,KAAK,GACH,OAAO,IAAI,mCAAA,SAAsD;;;oDAGT;;;EAG1D,KAAK,GACH,OAAO,IAAI,mCAAA,QAAqD;;;sDAGN;;;oDAGF;;;EAG1D,KAAK,GACH,OAAO,IAAI,mCAAA,SAAsD;;;sDAGP;;;oDAGF;;;EAG1D,KAAK,GACH,OAAO,IAAI,mCAAA,YAAyD;;;sDAGV;;;oDAGF;;;EAG1D,SACE,OAAO;CACX;AACF;AAEA,MAAa,WAAW,UAAU;CAChC,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,IAAI;;;;;;;;;;;;;;;;EAgBb,SACE,OAAO;CACX;AACF;AAEA,MAAa,6BAA6B,UAAU;CAClD,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,IAAI;YACLA,qBAAO;;yCAEsB,YAAY;;;;;;;;;;EAUjD,KAAK,GACH,OAAO,IAAI;YACLA,qBAAO;;yCAEsB,YAAY;;;;;;;EAOjD,KAAK,GACH,OAAO,IAAI;YACLA,qBAAO;;yCAEsB,YAAY;;;;;;;;;;;yCAWZ,YAAY;;;;;;;EAOjD,SACE,OAAO;CACX;AACF"}

package/es/components/side-panel/defs.d.ts

@@ -1,5 +1,7 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * @license
+ *
+ * Copyright IBM Corp. 2023, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -24,6 +26,10 @@ export declare enum SIDE_PANEL_SIZE {
      * Large size.
      */
     LARGE = "lg",
+    /**
+     * Extra Large size.
+     */
+    EXTRA_LARGE = "xl",
     /**
      * 2X-Large size.
      */

package/es/components/side-panel/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/side-panel/defs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,oBAAY,eAAe;IACzB;;OAEG;IACH,WAAW,OAAO;IAElB;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,MAAM,OAAO;IAEb;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,iBAAiB,QAAQ;CAC1B;AAED,oBAAY,oBAAoB;IAC9B,sBAAsB;IACtB,KAAK,UAAU;IAEf,YAAY;IACZ,IAAI,SAAS;CACd"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/side-panel/defs.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,oBAAY,eAAe;IACzB;;OAEG;IACH,WAAW,OAAO;IAElB;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,MAAM,OAAO;IAEb;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,WAAW,OAAO;IAElB;;OAEG;IACH,iBAAiB,QAAQ;CAC1B;AAED,oBAAY,oBAAoB;IAC9B,sBAAsB;IACtB,KAAK,UAAU;IAEf,YAAY;IACZ,IAAI,SAAS;CACd"}

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

@@ -7,7 +7,9 @@
 
 //#region src/components/side-panel/defs.ts
 /**
-* Copyright IBM Corp. 2023, 2024
+* @license
+*
+* Copyright IBM Corp. 2023, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
@@ -33,6 +35,10 @@ let SIDE_PANEL_SIZE = /* @__PURE__ */ function(SIDE_PANEL_SIZE) {
 	*/
 	SIDE_PANEL_SIZE["LARGE"] = "lg";
 	/**
+	* Extra Large size.
+	*/
+	SIDE_PANEL_SIZE["EXTRA_LARGE"] = "xl";
+	/**
 	* 2X-Large size.
 	*/
 	SIDE_PANEL_SIZE["EXTRA_EXTRA_LARGE"] = "2xl";

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

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/side-panel/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 2024\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/**\n * Modal size.\n */\nexport enum SIDE_PANEL_SIZE {\n  /**\n   * Extra small size.\n   */\n  EXTRA_SMALL = 'xs',\n\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  /**\n   * 2X-Large size.\n   */\n  EXTRA_EXTRA_LARGE = '2xl',\n}\n\nexport enum SIDE_PANEL_PLACEMENT {\n  /** right / default */\n  RIGHT = 'right',\n\n  /** left  */\n  LEFT = 'left',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,kBAAL,yBAAA,iBAAA;;;;CAIL,gBAAA,iBAAA;;;;CAKA,gBAAA,WAAA;;;;CAKA,gBAAA,YAAA;;;;CAKA,gBAAA,WAAA;;;;CAKA,gBAAA,uBAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,uBAAL,yBAAA,sBAAA;;CAEL,qBAAA,WAAA;;CAGA,qBAAA,UAAA;;AACF,EAAA,CAAA,CAAA"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/side-panel/defs.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\n/**\n * Modal size.\n */\nexport enum SIDE_PANEL_SIZE {\n  /**\n   * Extra small size.\n   */\n  EXTRA_SMALL = 'xs',\n\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  /**\n   * Extra Large size.\n   */\n  EXTRA_LARGE = 'xl',\n\n  /**\n   * 2X-Large size.\n   */\n  EXTRA_EXTRA_LARGE = '2xl',\n}\n\nexport enum SIDE_PANEL_PLACEMENT {\n  /** right / default */\n  RIGHT = 'right',\n\n  /** left  */\n  LEFT = 'left',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAYA,IAAY,kBAAL,yBAAA,iBAAA;;;;CAIL,gBAAA,iBAAA;;;;CAKA,gBAAA,WAAA;;;;CAKA,gBAAA,YAAA;;;;CAKA,gBAAA,WAAA;;;;CAKA,gBAAA,iBAAA;;;;CAKA,gBAAA,uBAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,uBAAL,yBAAA,sBAAA;;CAEL,qBAAA,WAAA;;CAGA,qBAAA,UAAA;;AACF,EAAA,CAAA,CAAA"}

package/es/components/side-panel/index.d.ts

@@ -1,5 +1,7 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * @license
+ *
+ * Copyright IBM Corp. 2023, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/side-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/side-panel/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/side-panel/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,cAAc,CAAC"}

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

@@ -6,3 +6,15 @@
  */
 
 import "./side-panel.js";
+//#region src/components/side-panel/index.ts
+/**
+* @license
+*
+* Copyright IBM Corp. 2023, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+//#endregion
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/side-panel/index.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 './side-panel';\n"],"mappings":""}