@carbon/web-components 2.61.0 → 2.62.0

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

@@ -0,0 +1,350 @@
+/**
+ * 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 { ARIA, DOUBLE_TAP, EVENTS, KEYBOARD, SELECTORS, SLOTS, calculateFlexRatio, createCustomEvent, determineAxis, formatSplitRatio, getOrientationFromAxis, isWithinDistance, safeClosest, safeQuerySelectorAll, triggerHapticFeedback } from "./defs.js";
+import resizer_handle_default$1 from "./resizer-handle.scss.js";
+import { LitElement, html } from "lit";
+import { property, state } from "lit/decorators.js";
+//#region src/components/resizer/resizer-handle.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 handle component for resizing panels.
+* @element cds-custom-resizer-handle
+* @fires resize-start - Fired when dragging starts
+* @fires resize-drag  - Fired during dragging (detail: { axis, delta, position })
+* @fires resize-end   - Fired when dragging ends (detail: { axis, delta, position })
+* @fires resize-reset - Fired on double-tap / double-click
+*/
+let CDSResizerHandle = class CDSResizerHandle extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.axis = "y";
+		this._isDragging = false;
+		this._startSize = 0;
+		this._endSize = 0;
+		this._lastTapTime = 0;
+		this._lastTapPosition = {
+			x: 0,
+			y: 0
+		};
+		this.startDrag = (e) => {
+			this._handlePointerDown(e);
+		};
+		this.resetSizes = (e) => {
+			e.preventDefault();
+			this.dispatchEvent(createCustomEvent(EVENTS.RESIZE_RESET));
+			if (this._grid) {
+				this._grid.style.removeProperty("--start-element-size");
+				this._grid.style.removeProperty("--end-element-size");
+				const handleTransitionEnd = () => {
+					this._updateAriaAttributes();
+					this._grid?.removeEventListener("transitionend", handleTransitionEnd);
+				};
+				this._grid.addEventListener("transitionend", handleTransitionEnd, { once: true });
+			}
+		};
+		this._handlePointerDown = (e) => {
+			if (this._detectDoubleTap(e)) return;
+			e.preventDefault();
+			this._isDragging = true;
+			this.setSyntheticActiveState(true);
+			const startPosition = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			const startValue = this.axis === "x" ? e.clientX : e.clientY;
+			this.dispatchEvent(createCustomEvent(EVENTS.RESIZE_START, {
+				axis: this.axis,
+				startPosition
+			}));
+			if (this._grid && this._startNode && this._endNode) {
+				const rectStart = this._startNode.getBoundingClientRect();
+				const rectEnd = this._endNode.getBoundingClientRect();
+				this._startSize = this.axis === "x" ? rectStart.width : rectStart.height;
+				this._endSize = this.axis === "x" ? rectEnd.width : rectEnd.height;
+			}
+			this._boundMove = this._createMoveHandler(startValue);
+			this._boundStop = this._createStopHandler(startValue);
+			window.addEventListener("pointermove", this._boundMove);
+			window.addEventListener("pointerup", this._boundStop);
+		};
+		this._handleKeyDown = (e) => {
+			if (![
+				"ArrowUp",
+				"ArrowDown",
+				"ArrowLeft",
+				"ArrowRight",
+				"Home",
+				"End",
+				"PageUp",
+				"PageDown"
+			].includes(e.key)) return;
+			e.preventDefault();
+			e.stopPropagation();
+			const step = e.shiftKey ? KEYBOARD.LARGE_STEP_PX : KEYBOARD.DEFAULT_STEP_PX;
+			const isHorizontal = this.axis === "x";
+			let delta = 0;
+			if (e.key === "ArrowUp" && !isHorizontal) delta = -step;
+			else if (e.key === "ArrowDown" && !isHorizontal) delta = step;
+			else if (e.key === "ArrowLeft" && isHorizontal) delta = -step;
+			else if (e.key === "ArrowRight" && isHorizontal) delta = step;
+			else if (e.key === "Home" && this._grid && this._startNode) {
+				const rect = this._startNode.getBoundingClientRect();
+				delta = isHorizontal ? -rect.width : -rect.height;
+			} else if (e.key === "End" && this._grid && this._endNode) {
+				const rect = this._endNode.getBoundingClientRect();
+				delta = isHorizontal ? rect.width : rect.height;
+			}
+			if (delta !== 0) this._handleKeyboardResize(delta);
+		};
+	}
+	static {
+		this.styles = resizer_handle_default$1;
+	}
+	setSyntheticHoverState(isHovered) {
+		this.toggleAttribute("data-synthetic-hover", isHovered);
+		this.requestUpdate();
+	}
+	setSyntheticActiveState(isActive) {
+		this.toggleAttribute("data-synthetic-active", isActive);
+		this.requestUpdate();
+	}
+	get pivot() {
+		return this._pivot;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._initializeComponent();
+		this._setupEventListeners();
+	}
+	firstUpdated() {
+		if (this._grid && this._startNode && this._endNode) requestAnimationFrame(() => {
+			this._updateAriaAttributes();
+		});
+	}
+	disconnectedCallback() {
+		this._cleanup();
+		super.disconnectedCallback();
+	}
+	_initializeComponent() {
+		this._grid = safeClosest(this, SELECTORS.GRID) || void 0;
+		const slot = this.getAttribute("slot");
+		const cursor = getComputedStyle(this).cursor;
+		this.axis = determineAxis(slot, cursor);
+		if (this._grid) {
+			const panels = safeQuerySelectorAll(this._grid, SELECTORS.PANEL);
+			if (this.axis === "x") {
+				this._startNode = panels.find((p) => p.slot === SLOTS.LEFT);
+				this._endNode = panels.find((p) => p.slot === SLOTS.RIGHT);
+			} else {
+				this._startNode = panels.find((p) => p.slot === SLOTS.TOP);
+				this._endNode = panels.find((p) => p.slot === SLOTS.BOTTOM);
+			}
+		}
+		this._setupAccessibility();
+	}
+	_setupAccessibility() {
+		this.setAttribute("role", ARIA.ROLE_SEPARATOR);
+		this.setAttribute("tabindex", "0");
+		this.setAttribute("aria-orientation", getOrientationFromAxis(this.axis));
+		this.setAttribute("aria-live", ARIA.LIVE_ASSERTIVE);
+		if (this._grid && this._startNode && this._endNode) {
+			this.setAttribute("aria-valuenow", ARIA.VALUE_DEFAULT);
+			this.setAttribute("aria-valuemin", ARIA.VALUE_MIN);
+			this.setAttribute("aria-valuemax", ARIA.VALUE_MAX);
+			this.setAttribute("aria-valuetext", formatSplitRatio(50));
+		}
+	}
+	_setupEventListeners() {
+		this._boundStartDrag = this._handlePointerDown.bind(this);
+		this._boundHandleKeyDown = this._handleKeyDown.bind(this);
+		this.addEventListener("pointerdown", this._boundStartDrag);
+		this.addEventListener("keydown", this._boundHandleKeyDown);
+	}
+	_cleanup() {
+		if (this._boundStartDrag) {
+			this.removeEventListener("pointerdown", this._boundStartDrag);
+			this._boundStartDrag = void 0;
+		}
+		if (this._boundHandleKeyDown) {
+			this.removeEventListener("keydown", this._boundHandleKeyDown);
+			this._boundHandleKeyDown = void 0;
+		}
+		if (this._boundMove) {
+			window.removeEventListener("pointermove", this._boundMove);
+			this._boundMove = void 0;
+		}
+		if (this._boundStop) {
+			window.removeEventListener("pointerup", this._boundStop);
+			this._boundStop = void 0;
+		}
+		this.removeAttribute("data-synthetic-hover");
+		this.removeAttribute("data-synthetic-active");
+		this._isDragging = false;
+	}
+	get _pivot() {
+		const panel = safeClosest(this, SELECTORS.PANEL);
+		if (!panel) return void 0;
+		const slot = panel.getAttribute("slot");
+		if (slot === SLOTS.LEFT) return "end";
+		if (slot === SLOTS.RIGHT) return "start";
+	}
+	_updateAriaAttributes() {
+		if (!this._grid || !this._startNode || !this._endNode) return;
+		const rectStart = this._startNode.getBoundingClientRect();
+		const rectEnd = this._endNode.getBoundingClientRect();
+		const isHorizontal = this.axis === "x";
+		const startSize = isHorizontal ? rectStart.width : rectStart.height;
+		const totalSize = startSize + (isHorizontal ? rectEnd.width : rectEnd.height);
+		if (totalSize > 0) {
+			const percentage = Math.round(startSize / totalSize * 100);
+			this.setAttribute("aria-valuenow", percentage.toString());
+			this.setAttribute("aria-valuemin", ARIA.VALUE_MIN);
+			this.setAttribute("aria-valuemax", ARIA.VALUE_MAX);
+			this.setAttribute("aria-valuetext", formatSplitRatio(percentage));
+		}
+	}
+	_detectDoubleTap(e) {
+		const now = Date.now();
+		const dt = now - this._lastTapTime;
+		const currentPos = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		if (dt < DOUBLE_TAP.MAX_TIME_MS && isWithinDistance(currentPos, this._lastTapPosition, DOUBLE_TAP.MAX_DISTANCE_PX)) {
+			triggerHapticFeedback(DOUBLE_TAP.VIBRATION_MS);
+			this.resetSizes(e);
+			this._lastTapTime = 0;
+			return true;
+		}
+		this._lastTapTime = now;
+		this._lastTapPosition = currentPos;
+		return false;
+	}
+	_createMoveHandler(startValue) {
+		return (e) => {
+			if (!this._isDragging) return;
+			const delta = (this.axis === "x" ? e.clientX : e.clientY) - startValue;
+			const position = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			this.dispatchEvent(createCustomEvent(EVENTS.RESIZE_DRAG, {
+				axis: this.axis,
+				delta,
+				position
+			}));
+			if (this._grid && this._startNode && this._endNode) this._updateGridSizes(delta);
+		};
+	}
+	_createStopHandler(startValue) {
+		return (e) => {
+			const delta = (this.axis === "x" ? e.clientX : e.clientY) - startValue;
+			const position = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			this.dispatchEvent(createCustomEvent(EVENTS.RESIZE_END, {
+				axis: this.axis,
+				delta,
+				position
+			}));
+			if (this._boundMove) {
+				window.removeEventListener("pointermove", this._boundMove);
+				this._boundMove = void 0;
+			}
+			if (this._boundStop) {
+				window.removeEventListener("pointerup", this._boundStop);
+				this._boundStop = void 0;
+			}
+			if (this._grid) this._grid.style.removeProperty("transition");
+			this._isDragging = false;
+			this.setSyntheticActiveState(false);
+		};
+	}
+	_updateGridSizes(delta) {
+		if (!this._grid) return;
+		this._grid.style.transition = "none";
+		const start = this._startSize + delta;
+		const end = this._endSize - delta;
+		const total = start + end || 1;
+		this._grid.style.setProperty("--start-element-size", `${calculateFlexRatio(start, total)}fr`);
+		this._grid.style.setProperty("--end-element-size", `${calculateFlexRatio(end, total)}fr`);
+		this._updateAriaAttributes();
+	}
+	_handleKeyboardResize(delta) {
+		const position = {
+			x: 0,
+			y: 0
+		};
+		this.dispatchEvent(createCustomEvent(EVENTS.RESIZE_START, {
+			axis: this.axis,
+			startPosition: position
+		}));
+		if (this._grid && this._startNode && this._endNode) {
+			const rectStart = this._startNode.getBoundingClientRect();
+			const rectEnd = this._endNode.getBoundingClientRect();
+			const isHorizontal = this.axis === "x";
+			this._startSize = isHorizontal ? rectStart.width : rectStart.height;
+			this._endSize = isHorizontal ? rectEnd.width : rectEnd.height;
+			const start = this._startSize + delta;
+			const end = this._endSize - delta;
+			const total = start + end || 1;
+			this._grid.style.setProperty("--start-element-size", `${calculateFlexRatio(start, total)}fr`);
+			this._grid.style.setProperty("--end-element-size", `${calculateFlexRatio(end, total)}fr`);
+			this._updateAriaAttributes();
+		}
+		this.dispatchEvent(createCustomEvent(EVENTS.RESIZE_DRAG, {
+			axis: this.axis,
+			delta,
+			position
+		}));
+		this.dispatchEvent(createCustomEvent(EVENTS.RESIZE_END, {
+			axis: this.axis,
+			delta,
+			position
+		}));
+	}
+	render() {
+		return html`
+      <div class="handle-content">
+        <span class="sr-only">
+          Use arrow keys to resize, hold Shift for larger steps. Double-click to
+          reset.
+        </span>
+        <div>
+          ${this._pivot === "start" ? html`<slot name="${SLOTS.PIVOT}"></slot>` : ""}
+        </div>
+        <div class="icon-container" part="icon-container">
+          <slot name="${SLOTS.ICON}"></slot>
+        </div>
+        <div>
+          ${this._pivot === "end" ? html`<slot name="${SLOTS.PIVOT}"></slot>` : ""}
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSResizerHandle.prototype, "axis", void 0);
+__decorate([state()], CDSResizerHandle.prototype, "_isDragging", void 0);
+CDSResizerHandle = __decorate([carbonElement(`cds-custom-resizer-handle`)], CDSResizerHandle);
+var resizer_handle_default = CDSResizerHandle;
+//#endregion
+export { resizer_handle_default as default };
+
+//# sourceMappingURL=resizer-handle.js.map

package/es-custom/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-custom-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-custom-resizer-handle': CDSResizerHandle;\n  }\n}\n\nexport default CDSResizerHandle;\n"],"mappings":"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"}

package/es-custom/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-custom/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-custom/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-custom-resizer-panel
+ */
+declare class CDSResizerPanel extends LitElement {
+    static styles: any;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cds-custom-resizer-panel': CDSResizerPanel;
+    }
+}
+export default CDSResizerPanel;
+//# sourceMappingURL=resizer-panel.d.ts.map

package/es-custom/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-custom/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-custom-resizer-panel
+*/
+let CDSResizerPanel = class CDSResizerPanel extends LitElement {
+	static {
+		this.styles = resizer_panel_default$1;
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+CDSResizerPanel = __decorate([carbonElement(`cds-custom-resizer-panel`)], CDSResizerPanel);
+var resizer_panel_default = CDSResizerPanel;
+//#endregion
+export { resizer_panel_default as default };
+
+//# sourceMappingURL=resizer-panel.js.map

package/es-custom/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-custom-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-custom-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-custom/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-custom/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":""}