@m3e/web 2.2.2 → 2.3.0

package/dist/split-pane.js

@@ -0,0 +1,627 @@
+/**
+ * @license MIT
+ * Copyright (c) 2025 matraic
+ * See LICENSE file in the project root for full license text.
+ */
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { state, query, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { FormAssociated, Disabled, ReconnectedCallback, AttachInternals, PressedController, setCustomState, MutationController, formValue, deleteCustomState, prefersReducedMotion, addCustomState, registerStyleSheet, DesignToken, spaceSeparatedStringConverter, customElement } from '@m3e/web/core';
+import { M3eBreakpointObserver, Breakpoint } from '@m3e/web/core/layout';
+import { M3eDirectionality } from '@m3e/web/core/bidi';
+
+var _M3eSplitPaneElement_instances, _M3eSplitPaneElement_breakpointUnobserve, _M3eSplitPaneElement_dragPos, _M3eSplitPaneElement_valueChanged, _M3eSplitPaneElement_cachedSize, _M3eSplitPaneElement_snapAnimation, _M3eSplitPaneElement_pressedController, _M3eSplitPaneElement_startMutationController, _M3eSplitPaneElement_endMutationController, _M3eSplitPaneElement_renderDragHandle, _M3eSplitPaneElement_handleStartSlotChange, _M3eSplitPaneElement_handleEndSlotChange, _M3eSplitPaneElement_handleSlotChange, _M3eSplitPaneElement_updatePaneVisibility, _M3eSplitPaneElement_hasVisibleElements, _M3eSplitPaneElement_initialize, _M3eSplitPaneElement_initBreakpointMonitoring, _M3eSplitPaneElement_updateOrientation, _M3eSplitPaneElement_clearOrientation, _M3eSplitPaneElement_handlePointerDown, _M3eSplitPaneElement_handlePointerMove, _M3eSplitPaneElement_handlePointerUp, _M3eSplitPaneElement_handleKeyDown, _M3eSplitPaneElement_changeValue, _M3eSplitPaneElement_getClosestDetent, _M3eSplitPaneElement_getNextHigherDetent, _M3eSplitPaneElement_getNextLowerDetent, _M3eSplitPaneElement_computeDetent, _M3eSplitPaneElement_clearSnapAnimation, _M3eSplitPaneElement_snapToValue, _M3eSplitPaneElement_cycleDetent;
+/**
+ * A dual-view layout that separates content with a movable drag handle.
+ * @description
+ * The `m3e-split-pane` component delivers a Material 3-inspired split view with a
+ * movable drag handle, enabling responsive layout composition and pane resizing.
+ * It supports keyboard interaction, adaptive orientation, and optional detent snapping
+ * for consistent, accessible content distribution.
+ *
+ * @example
+ * The following example illustrates the basic use of the `m3e-split-pane` with start and end content.
+ * In this example, the start pane occupies 25% of the available width.
+ * ```html
+ * <m3e-split-pane value="25">
+ *  <m3e-card slot="start"></m3e-card>
+ *  <m3e-card slot="end"></m3e-card>
+ * </m3e-split-pane>
+ * ```
+ *
+ * @example
+ * The next example demonstrates minimum and maximum constraints, where the start pane
+ * may shrink to 25% but cannot grow beyond 50% of the available space.
+ * ```html
+ * <m3e-split-pane value="25" min="25" max="50">
+ *  <m3e-card slot="start"></m3e-card>
+ *  <m3e-card slot="end"></m3e-card>
+ * </m3e-split-pane>
+ * ```
+ *
+ * @example
+ * The next example demonstrates percentage‑based detents, allowing the drag handle to snap at
+ * 0%, 25%, 50%, 75%, and 100% of the available space.
+ * ```html
+ * <m3e-split-pane value="50" detents="0 25 50 75 100">
+ *  <m3e-card slot="start"></m3e-card>
+ *  <m3e-card slot="end"></m3e-card>
+ * </m3e-split-pane>
+ * ```
+ *
+ * @tag m3e-split-pane
+ *
+ * @slot start - Renders content at the logical start side of the pane.
+ * @slot end - Renders content at the logical end side of the pane.
+ *
+ * @attr detents - Detents (discrete sizes) the start pane can snap to.
+ * @attr label - The accessible label given to the moveable drag handle.
+ * @attr max - A fractional value, between 0 and 100, indicating the maximum size of the start pane.
+ * @attr min - A fractional value, between 0 and 100, indicating the minimum size of the start pane.
+ * @attr orientation - The orientation of the split.
+ * @attr step - A fractional value, between 0 and 100, indicating the increment by which to adjust the value when resized via keyboard.
+ * @attr value - A fractional value, between 0 and 100, indicating the size of the start pane.
+ * @attr wrap-detents - Whether cycling through detents will wrap.
+ *
+ * @fires input - Fired continuously while the user adjusts the drag handle.
+ * @fires change - Fired when the user finishes adjusting the drag handle.
+ *
+ * @cssprop --m3e-split-pane-drag-handle-hover-color - Color used for the drag handle hover state.
+ * @cssprop --m3e-split-pane-drag-handle-hover-opacity - Opacity used for the drag handle hover state.
+ * @cssprop --m3e-split-pane-drag-handle-focus-color - Color used for the drag handle focus state.
+ * @cssprop --m3e-split-pane-drag-handle-focus-opacity - Opacity used for the drag handle focus state.
+ * @cssprop --m3e-split-pane-drag-handle-color - Background color of the drag handle when not pressed.
+ * @cssprop --m3e-split-pane-drag-handle-shape - Corner shape of the drag handle when not pressed.
+ * @cssprop --m3e-split-pane-drag-handle-pressed-color - Background color of the drag handle when pressed.
+ * @cssprop --m3e-split-pane-drag-handle-pressed-shape - Corner shape of the drag handle when pressed.
+ * @cssprop --m3e-split-pane-drag-handle-container-width - Width of the drag handle container.
+ * @cssprop --m3e-split-pane-drag-handle-width - Thickness of the drag handle when not pressed.
+ * @cssprop --m3e-split-pane-drag-handle-height - Length of the drag handle when not pressed.
+ * @cssprop --m3e-split-pane-drag-handle-pressed-width - Thickness of the drag handle when pressed.
+ * @cssprop --m3e-split-pane-drag-handle-pressed-height - Length of the drag handle when pressed.
+ */
+let M3eSplitPaneElement = class M3eSplitPaneElement extends FormAssociated(Disabled(ReconnectedCallback(AttachInternals(LitElement)))) {
+  constructor() {
+    super(...arguments);
+    _M3eSplitPaneElement_instances.add(this);
+    /** @private */
+    _M3eSplitPaneElement_breakpointUnobserve.set(this, void 0);
+    /** @private */
+    _M3eSplitPaneElement_dragPos.set(this, 0);
+    /** @private */
+    _M3eSplitPaneElement_valueChanged.set(this, false);
+    /** @private */
+    _M3eSplitPaneElement_cachedSize.set(this, 0);
+    /** @private */
+    _M3eSplitPaneElement_snapAnimation.set(this, void 0);
+    /** @private */
+    _M3eSplitPaneElement_pressedController.set(this, new PressedController(this, {
+      target: null,
+      isPressedKey: key => key === " ",
+      minPressedDuration: 150,
+      callback: pressed => setCustomState(this, "-pressed", pressed && !this.disabled)
+    }));
+    /** @private */
+    _M3eSplitPaneElement_startMutationController.set(this, new MutationController(this, {
+      target: null,
+      config: {
+        attributeFilter: ["hidden"]
+      },
+      callback: () => __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_updatePaneVisibility).call(this, "start")
+    }));
+    /** @private */
+    _M3eSplitPaneElement_endMutationController.set(this, new MutationController(this, {
+      target: null,
+      config: {
+        attributeFilter: ["hidden"]
+      },
+      callback: () => __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_updatePaneVisibility).call(this, "end")
+    }));
+    /**
+     * A fractional value, between 0 and 100, indicating the size of the start pane.
+     * @default 50
+     */
+    this.value = 50;
+    /**
+     * A fractional value, between 0 and 100, indicating the minimum size of the start pane.
+     * @default 0
+     */
+    this.min = 0;
+    /**
+     * A fractional value, between 0 and 100, indicating the maximum size of the start pane.
+     * @default 100
+     */
+    this.max = 100;
+    /**
+     * A fractional value, between 0 and 100, indicating the increment by which to adjust the value when resized via keyboard.
+     * @default 1
+     */
+    this.step = 1;
+    /**
+     * Detents (discrete sizes) the start pane can snap to.
+     * @default []
+     */
+    this.detents = [];
+    /**
+     * Whether cycling through detents will wrap.
+     * @default false
+     */
+    this.wrapDetents = false;
+    /**
+     * The orientation of the split.
+     * @default "horizontal"
+     */
+    this.orientation = "horizontal";
+    /**
+     * The accessible label given to the movable drag handle.
+     * @default "Resize panes"
+     */
+    this.label = "Resize panes";
+    /** A function used to generates human readable text for the accessible value (`aria-valuetext`) of the drag handle. */
+    this.valueFormatter = (value, orientation, dir) => {
+      value = Math.round(value);
+      if (value >= 48 && value <= 52) {
+        return "Panes equally sized";
+      }
+      switch (value) {
+        case 0:
+          return orientation === "horizontal" ? dir === "ltr" ? "Left pane collapsed" : "Right pane collapsed" : "Top pane collapsed";
+        case 100:
+          return orientation === "horizontal" ? dir === "ltr" ? "Right pane collapsed" : "Left pane collapsed" : "Bottom pane collapsed";
+        default:
+          return orientation === "horizontal" ? dir === "ltr" ? `Left pane ${value}%, right pane ${100 - value}%` : `Left pane ${100 - value}%, right pane ${value}%` : `Top pane ${value}%, bottom pane ${100 - value}%`;
+      }
+    };
+  }
+  /** The current orientation of the split. */
+  get currentOrientation() {
+    return this._orientation ?? (this.orientation !== "vertical" ? "horizontal" : "vertical");
+  }
+  /** @inheritdoc */
+  get [(_M3eSplitPaneElement_breakpointUnobserve = new WeakMap(), _M3eSplitPaneElement_dragPos = new WeakMap(), _M3eSplitPaneElement_valueChanged = new WeakMap(), _M3eSplitPaneElement_cachedSize = new WeakMap(), _M3eSplitPaneElement_snapAnimation = new WeakMap(), _M3eSplitPaneElement_pressedController = new WeakMap(), _M3eSplitPaneElement_startMutationController = new WeakMap(), _M3eSplitPaneElement_endMutationController = new WeakMap(), _M3eSplitPaneElement_instances = new WeakSet(), formValue)]() {
+    return this.value?.toString() ?? null;
+  }
+  /**
+   * Moves the drag handle to the collapsed position. If detents exist, snaps to the collapsed detent.
+   * If no detents exist, moves to the minimum allowed value.
+   */
+  collapse() {
+    this.snapToValue(this.min);
+  }
+  /**
+   * Moves the drag handle to the expanded position. If detents exist, snaps to the expanded detent.
+   * If no detents exist, moves to the maximum allowed value.
+   */
+  expand() {
+    this.snapToValue(this.max);
+  }
+  /**
+   * Moves the drag handle to the specified position. If detents exist, snaps to the closest detent.
+   * If no detents exist, moves to the specified value.
+   * @param {number} value A fractional value, between 0 and 100, indicating the size of the start pane.
+   */
+  snapToValue(value) {
+    const detent = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getClosestDetent).call(this, value);
+    value = detent > -1 ? __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_computeDetent).call(this, this.detents[detent]) : value;
+    if (!__classPrivateFieldGet(this, _M3eSplitPaneElement_snapAnimation, "f")) {
+      __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_snapToValue).call(this, value);
+    } else {
+      __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_changeValue).call(this, value);
+    }
+  }
+  /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_clearOrientation).call(this);
+    __classPrivateFieldGet(this, _M3eSplitPaneElement_pressedController, "f").unobserve(this._dragHandle);
+  }
+  /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_initialize).call(this);
+    if (this.orientation === "auto") {
+      __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_initBreakpointMonitoring).call(this);
+    }
+  }
+  /** @inheritdoc */
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("orientation")) {
+      __classPrivateFieldGet(this, _M3eSplitPaneElement_breakpointUnobserve, "f")?.call(this);
+      if (this.orientation === "auto") {
+        __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_initBreakpointMonitoring).call(this);
+      } else {
+        this._orientation = undefined;
+        __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_updateOrientation).call(this);
+      }
+    }
+  }
+  /** @inheritdoc */
+  updated(_changedProperties) {
+    super.updated(_changedProperties);
+    if (_changedProperties.has("value")) {
+      this._base.style.setProperty("--_split-pane-value", `${this.value}%`);
+    }
+  }
+  /** @inheritdoc */
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_initialize).call(this);
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<div class="base"><div class="start" id="start" ?inert="${this.value <= 0}"><slot name="start" @slotchange="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handleStartSlotChange)}"></slot></div>${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_renderDragHandle).call(this)}<div class="end" ?inert="${this.value >= 100}"><slot name="end" @slotchange="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handleEndSlotChange)}"></slot></div></div>`;
+  }
+};
+_M3eSplitPaneElement_renderDragHandle = function _M3eSplitPaneElement_renderDragHandle() {
+  return html`<div id="drag-handle" class="drag-handle" role="separator" ?hidden="${this.disabled}" tabindex="0" aria-label="${this.label}" aria-controls="start" aria-orientation="${this.currentOrientation === "horizontal" ? "vertical" : "horizontal"}" aria-valuemin="${this.min}" aria-valuemax="${this.max}" aria-valuenow="${this.value}" aria-valuetext="${ifDefined(this.valueFormatter?.(this.value, this.currentOrientation, M3eDirectionality.current))}" @pointerdown="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handlePointerDown)}" @pointerup="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handlePointerUp)}" @pointermove="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handlePointerMove)}" @keydown="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handleKeyDown)}" @dblclick="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_cycleDetent)}"><div class="handle"><m3e-focus-ring for="drag-handle"></m3e-focus-ring><m3e-state-layer for="drag-handle"></m3e-state-layer></div><div class="touch"></div></div>`;
+};
+_M3eSplitPaneElement_handleStartSlotChange = function _M3eSplitPaneElement_handleStartSlotChange(e) {
+  __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handleSlotChange).call(this, e.target, __classPrivateFieldGet(this, _M3eSplitPaneElement_startMutationController, "f"), "-with-start");
+};
+_M3eSplitPaneElement_handleEndSlotChange = function _M3eSplitPaneElement_handleEndSlotChange(e) {
+  __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handleSlotChange).call(this, e.target, __classPrivateFieldGet(this, _M3eSplitPaneElement_endMutationController, "f"), "-with-end");
+};
+_M3eSplitPaneElement_handleSlotChange = function _M3eSplitPaneElement_handleSlotChange(slot, mutationController, state) {
+  for (const target of mutationController.targets) {
+    mutationController.unobserve(target);
+  }
+  const assignedElements = new Array();
+  setCustomState(this, state, __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_hasVisibleElements).call(this, slot, assignedElements));
+  for (const element of assignedElements) {
+    if (element instanceof HTMLElement) {
+      mutationController.observe(element);
+    }
+  }
+};
+_M3eSplitPaneElement_updatePaneVisibility = function _M3eSplitPaneElement_updatePaneVisibility(pane) {
+  setCustomState(this, `-with-${pane}`, __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_hasVisibleElements).call(this, this.shadowRoot?.querySelector(`slot[name='${pane}']`)));
+};
+_M3eSplitPaneElement_hasVisibleElements = function _M3eSplitPaneElement_hasVisibleElements(slot, assignedElements) {
+  assignedElements = assignedElements ?? [];
+  assignedElements.push(...(slot?.assignedElements({
+    flatten: true
+  }) ?? []));
+  return assignedElements.length > 0 && !assignedElements.every(x => x.hasAttribute("hidden"));
+};
+_M3eSplitPaneElement_initialize = function _M3eSplitPaneElement_initialize() {
+  __classPrivateFieldGet(this, _M3eSplitPaneElement_pressedController, "f").observe(this._dragHandle);
+};
+_M3eSplitPaneElement_initBreakpointMonitoring = function _M3eSplitPaneElement_initBreakpointMonitoring() {
+  __classPrivateFieldSet(this, _M3eSplitPaneElement_breakpointUnobserve, M3eBreakpointObserver.observe([Breakpoint.XSmall], matches => {
+    this._orientation = matches.get(Breakpoint.XSmall) ? "vertical" : "horizontal";
+    __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_updateOrientation).call(this);
+  }), "f");
+};
+_M3eSplitPaneElement_updateOrientation = function _M3eSplitPaneElement_updateOrientation() {
+  setCustomState(this, "-vertical", this.currentOrientation === "vertical");
+};
+_M3eSplitPaneElement_clearOrientation = function _M3eSplitPaneElement_clearOrientation() {
+  deleteCustomState(this, "-vertical");
+  this._orientation = undefined;
+  __classPrivateFieldGet(this, _M3eSplitPaneElement_breakpointUnobserve, "f")?.call(this);
+  __classPrivateFieldSet(this, _M3eSplitPaneElement_breakpointUnobserve, undefined, "f");
+};
+_M3eSplitPaneElement_handlePointerDown = function _M3eSplitPaneElement_handlePointerDown(e) {
+  if (e.pointerType === "mouse" && e.button > 1) return;
+  if (this.disabled) return;
+  this._dragHandle.setPointerCapture(e.pointerId);
+  __classPrivateFieldSet(this, _M3eSplitPaneElement_valueChanged, false, "f");
+  __classPrivateFieldSet(this, _M3eSplitPaneElement_dragPos, this.currentOrientation === "vertical" ? e.clientY : e.clientX, "f");
+  __classPrivateFieldSet(this, _M3eSplitPaneElement_cachedSize, this.currentOrientation === "vertical" ? this.clientHeight : this.clientWidth, "f");
+};
+_M3eSplitPaneElement_handlePointerMove = function _M3eSplitPaneElement_handlePointerMove(e) {
+  if (!this._dragHandle.hasPointerCapture(e.pointerId)) return;
+  const pos = this.currentOrientation === "vertical" ? e.clientY : e.clientX;
+  let delta = __classPrivateFieldGet(this, _M3eSplitPaneElement_cachedSize, "f") > 0 ? (pos - __classPrivateFieldGet(this, _M3eSplitPaneElement_dragPos, "f")) / __classPrivateFieldGet(this, _M3eSplitPaneElement_cachedSize, "f") * 100 : 0;
+  if (M3eDirectionality.current === "rtl" && this.currentOrientation !== "vertical") {
+    delta = -delta;
+  }
+  if (__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_changeValue).call(this, this.value + delta, false)) {
+    __classPrivateFieldSet(this, _M3eSplitPaneElement_dragPos, pos, "f");
+    __classPrivateFieldSet(this, _M3eSplitPaneElement_valueChanged, true, "f");
+  }
+};
+_M3eSplitPaneElement_handlePointerUp = function _M3eSplitPaneElement_handlePointerUp(e) {
+  if (e.pointerType === "mouse" && e.button > 1) return;
+  if (this._dragHandle.hasPointerCapture(e.pointerId)) {
+    this._dragHandle.releasePointerCapture(e.pointerId);
+    __classPrivateFieldSet(this, _M3eSplitPaneElement_dragPos, 0, "f");
+    __classPrivateFieldSet(this, _M3eSplitPaneElement_cachedSize, 0, "f");
+    const detent = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getClosestDetent).call(this, this.value);
+    if (detent >= 0) {
+      const value = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_computeDetent).call(this, this.detents[detent]);
+      if (value !== undefined) {
+        __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_snapToValue).call(this, value, false);
+      }
+    }
+    if (__classPrivateFieldGet(this, _M3eSplitPaneElement_valueChanged, "f")) {
+      this.dispatchEvent(new Event("change", {
+        bubbles: true,
+        composed: true
+      }));
+      __classPrivateFieldSet(this, _M3eSplitPaneElement_valueChanged, false, "f");
+    }
+  }
+};
+_M3eSplitPaneElement_handleKeyDown = function _M3eSplitPaneElement_handleKeyDown(e) {
+  const ltr = M3eDirectionality.current === "ltr" || this.currentOrientation === "vertical";
+  switch (e.key) {
+    case "Up":
+    case "ArrowUp":
+    case "Left":
+    case "ArrowLeft":
+      {
+        e.preventDefault();
+        const detent = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getClosestDetent).call(this, this.value);
+        if (detent >= 0) {
+          const nextDetent = ltr ? __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getNextLowerDetent).call(this, detent) : __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getNextHigherDetent).call(this, detent);
+          if (nextDetent !== detent && !__classPrivateFieldGet(this, _M3eSplitPaneElement_snapAnimation, "f")) {
+            const value = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_computeDetent).call(this, this.detents[nextDetent]);
+            if (value !== undefined) {
+              __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_snapToValue).call(this, value);
+            }
+          }
+        } else if (this.step > 1) {
+          if (!__classPrivateFieldGet(this, _M3eSplitPaneElement_snapAnimation, "f")) {
+            __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_snapToValue).call(this, this.value + (ltr ? -this.step : this.step));
+          }
+        } else {
+          __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_changeValue).call(this, this.value + (ltr ? -this.step : this.step));
+        }
+        break;
+      }
+    case "Down":
+    case "ArrowDown":
+    case "Right":
+    case "ArrowRight":
+      {
+        e.preventDefault();
+        const detent = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getClosestDetent).call(this, this.value);
+        if (detent >= 0) {
+          const nextDetent = ltr ? __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getNextHigherDetent).call(this, detent) : __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getNextLowerDetent).call(this, detent);
+          if (nextDetent !== detent && !__classPrivateFieldGet(this, _M3eSplitPaneElement_snapAnimation, "f")) {
+            const value = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_computeDetent).call(this, this.detents[nextDetent]);
+            if (value !== undefined) {
+              __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_snapToValue).call(this, value);
+            }
+          }
+        } else if (this.step > 1) {
+          if (!__classPrivateFieldGet(this, _M3eSplitPaneElement_snapAnimation, "f")) {
+            __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_snapToValue).call(this, this.value + (ltr ? this.step : -this.step));
+          }
+        } else {
+          __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_changeValue).call(this, this.value + (ltr ? this.step : -this.step));
+        }
+        break;
+      }
+    case "Home":
+      {
+        e.preventDefault();
+        if (!__classPrivateFieldGet(this, _M3eSplitPaneElement_snapAnimation, "f")) {
+          const next = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getClosestDetent).call(this, this.min);
+          if (next > -1) {
+            __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_snapToValue).call(this, __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_computeDetent).call(this, this.detents[next]));
+          } else {
+            __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_snapToValue).call(this, this.min);
+          }
+        }
+        break;
+      }
+    case "End":
+      {
+        e.preventDefault();
+        if (!__classPrivateFieldGet(this, _M3eSplitPaneElement_snapAnimation, "f")) {
+          const next = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getClosestDetent).call(this, this.max);
+          if (next > -1) {
+            __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_snapToValue).call(this, __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_computeDetent).call(this, this.detents[next]));
+          } else {
+            __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_snapToValue).call(this, this.max);
+          }
+        }
+        break;
+      }
+    case "PageUp":
+      {
+        e.preventDefault();
+        if (!__classPrivateFieldGet(this, _M3eSplitPaneElement_snapAnimation, "f")) {
+          const detent = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getClosestDetent).call(this, this.value);
+          if (detent >= 0) {
+            const nextDetent = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getNextLowerDetent).call(this, detent);
+            if (nextDetent !== detent) {
+              const value = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_computeDetent).call(this, this.detents[nextDetent]);
+              if (value !== undefined) {
+                __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_snapToValue).call(this, value);
+              }
+            }
+          } else {
+            __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_snapToValue).call(this, this.value - Math.max(10, this.step));
+          }
+        }
+        break;
+      }
+    case "PageDown":
+      {
+        e.preventDefault();
+        if (!__classPrivateFieldGet(this, _M3eSplitPaneElement_snapAnimation, "f")) {
+          const detent = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getClosestDetent).call(this, this.value);
+          if (detent >= 0) {
+            const nextDetent = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getNextHigherDetent).call(this, detent);
+            if (nextDetent !== detent) {
+              const value = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_computeDetent).call(this, this.detents[nextDetent]);
+              if (value !== undefined) {
+                __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_snapToValue).call(this, value);
+              }
+            }
+          } else {
+            __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_snapToValue).call(this, this.value + Math.max(10, this.step));
+          }
+        }
+        break;
+      }
+    case "Enter":
+      if (!__classPrivateFieldGet(this, _M3eSplitPaneElement_snapAnimation, "f")) {
+        __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_cycleDetent).call(this);
+      }
+      break;
+    case " ":
+      e.preventDefault();
+      if (!__classPrivateFieldGet(this, _M3eSplitPaneElement_snapAnimation, "f")) {
+        __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_cycleDetent).call(this);
+      }
+      break;
+  }
+};
+_M3eSplitPaneElement_changeValue = function _M3eSplitPaneElement_changeValue(value, emitChange = true) {
+  __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_clearSnapAnimation).call(this);
+  value = Math.max(this.min, Math.min(this.max, value));
+  if (value != this.value) {
+    const prev = this.value;
+    this.value = value;
+    if (this.dispatchEvent(new Event("input", {
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    }))) {
+      this._base.style.setProperty("--_split-pane-value", `${this.value}%`);
+      if (emitChange) {
+        this.dispatchEvent(new Event("change", {
+          bubbles: true,
+          composed: true
+        }));
+      }
+      return true;
+    } else {
+      this.value = prev;
+    }
+  }
+  return false;
+};
+_M3eSplitPaneElement_getClosestDetent = function _M3eSplitPaneElement_getClosestDetent(value) {
+  let closestDetent = -1;
+  let closestDistance = Infinity;
+  for (let i = 0; i < this.detents.length; i++) {
+    const detent = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_computeDetent).call(this, this.detents[i]);
+    if (detent === undefined) continue;
+    const distance = Math.abs(value - detent);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestDetent = i;
+    }
+  }
+  return closestDetent;
+};
+_M3eSplitPaneElement_getNextHigherDetent = function _M3eSplitPaneElement_getNextHigherDetent(detentIndex) {
+  const currentValue = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_computeDetent).call(this, this.detents[detentIndex]);
+  if (currentValue === undefined) return detentIndex;
+  let value = Infinity;
+  let nextDetent = detentIndex;
+  for (let i = 0; i < this.detents.length; i++) {
+    if (i === detentIndex) continue;
+    const detent = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_computeDetent).call(this, this.detents[i]);
+    if (detent === undefined) continue;
+    if (detent > currentValue && detent < value) {
+      value = detent;
+      nextDetent = i;
+    }
+  }
+  return nextDetent;
+};
+_M3eSplitPaneElement_getNextLowerDetent = function _M3eSplitPaneElement_getNextLowerDetent(detentIndex) {
+  const currentValue = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_computeDetent).call(this, this.detents[detentIndex]);
+  if (currentValue === undefined) return detentIndex;
+  let value = -Infinity;
+  let nextDetent = detentIndex;
+  for (let i = 0; i < this.detents.length; i++) {
+    if (i === detentIndex) continue;
+    const detent = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_computeDetent).call(this, this.detents[i]);
+    if (detent === undefined) continue;
+    if (detent < currentValue && detent > value) {
+      value = detent;
+      nextDetent = i;
+    }
+  }
+  return nextDetent;
+};
+_M3eSplitPaneElement_computeDetent = function _M3eSplitPaneElement_computeDetent(detent) {
+  const value = detent.endsWith("px") ? this.clientWidth / parseFloat(detent) : parseFloat(detent);
+  return !isNaN(value) ? value : undefined;
+};
+_M3eSplitPaneElement_clearSnapAnimation = function _M3eSplitPaneElement_clearSnapAnimation() {
+  __classPrivateFieldGet(this, _M3eSplitPaneElement_snapAnimation, "f")?.cancel();
+  __classPrivateFieldSet(this, _M3eSplitPaneElement_snapAnimation, undefined, "f");
+};
+_M3eSplitPaneElement_snapToValue = function _M3eSplitPaneElement_snapToValue(value, emitChange = true) {
+  __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_clearSnapAnimation).call(this);
+  value = Math.max(this.min, Math.min(this.max, value));
+  if (value === this.value) return;
+  if (!prefersReducedMotion()) {
+    addCustomState(this, "-animating");
+    __classPrivateFieldSet(this, _M3eSplitPaneElement_snapAnimation, this._base.animate([{
+      "--_split-pane-value": `${this.value}%`
+    }, {
+      "--_split-pane-value": `${value}%`
+    }], {
+      duration: 250,
+      easing: "cubic-bezier(0.2, 0.0, 0, 1.0)"
+    }), "f");
+    __classPrivateFieldGet(this, _M3eSplitPaneElement_snapAnimation, "f").onfinish = () => {
+      __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_changeValue).call(this, value, emitChange);
+      __classPrivateFieldSet(this, _M3eSplitPaneElement_snapAnimation, undefined, "f");
+      deleteCustomState(this, "-animating");
+    };
+  } else {
+    __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_changeValue).call(this, value, emitChange);
+  }
+};
+_M3eSplitPaneElement_cycleDetent = function _M3eSplitPaneElement_cycleDetent() {
+  if (this.detents.length === 0) return;
+  const detent = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getClosestDetent).call(this, this.value);
+  if (detent === -1) return;
+  let next = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getNextHigherDetent).call(this, detent);
+  if (next === detent && this.wrapDetents) {
+    next = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_getClosestDetent).call(this, 0);
+    if (next === -1) return;
+  }
+  const value = __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_computeDetent).call(this, this.detents[next]);
+  if (value !== undefined) {
+    __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_snapToValue).call(this, value);
+  }
+};
+(() => {
+  registerStyleSheet(css`@property --_split-pane-value { syntax: "<length-percentage>"; inherits: true; initial-value: 50%; }</length-percentage>`);
+})();
+/** The styles of the element. */
+M3eSplitPaneElement.styles = css`:host { display: block; } .base { display: flex; width: 100%; height: 100%; overflow: hidden; } :host(:not(:state(-vertical))) .base { flex-direction: row; } :host(:state(-vertical)) .base { flex-direction: column; } :host(:state(-with-start):state(-with-end)) .base:not(:has(.drag-handle[hidden])) .start { flex: 0 1 calc(var(--_split-pane-value) - calc(var(--m3e-split-pane-drag-handle-container-width, 1.5rem) / 2)); } :host(:state(-with-start):state(-with-end)) .base:has(.drag-handle[hidden]) .start { flex: 0 1 var(--_split-pane-value); } :host(:not(:state(-with-end))) .start { flex: 1 1 auto; } :host(:state(-with-end)) .end { flex: 1 1 auto; } :host(:not(:state(-with-end))) .end { display: none; } :host(:not(:state(-animating))) .start[inert], :host(:not(:state(-animating))) .end[inert] { visibility: hidden; } .drag-handle { flex: none; display: flex; align-items: center; justify-content: center; outline: none; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); --m3e-state-layer-hover-color: var(--m3e-split-pane-drag-handle-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-hover-opacity: var(--m3e-split-pane-drag-handle-hover-opacity, 8%); --m3e-state-layer-focus-color: var(--m3e-split-pane-drag-handle-focus-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-opacity: var(--m3e-split-pane-drag-handle-focus-opacity, 10%); } :host(:is(:not(:state(-with-start)), :not(:state(-with-end)))) .drag-handle, .drag-handle[hidden] { display: none; } :host(:not(:state(-pressed))) .drag-handle:not([aria-disabled]) { cursor: grab; } :host(:state(-pressed)) .drag-handle:not([aria-disabled]) { cursor: grabbing; } .handle { position: relative; transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
+        width ${DesignToken.motion.spring.fastEffects}, height ${DesignToken.motion.spring.fastEffects}`)}; } .touch { z-index: 1; position: absolute; height: 3rem; width: 3rem; margin: auto; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:state(-pressed))) .handle { background-color: var(--m3e-split-pane-drag-handle-color, ${DesignToken.color.outline}); border-radius: var(--m3e-split-pane-drag-handle-shape, ${DesignToken.shape.corner.full}); } :host(:state(-pressed)) .handle { background-color: var(--m3e-split-pane-drag-handle-pressed-color, ${DesignToken.color.onSurface}); border-radius: var(--m3e-split-pane-drag-handle-pressed-shape, ${DesignToken.shape.corner.medium}); } :host(:not(:state(-vertical))) .drag-handle { flex-direction: column; width: var(--m3e-split-pane-drag-handle-container-width, 1.5rem); } :host(:not(:state(-vertical)):not(:state(-pressed))) .handle { width: var(--m3e-split-pane-drag-handle-width, 0.25rem); height: var(--m3e-split-pane-drag-handle-height, 3rem); } :host(:not(:state(-vertical)):state(-pressed)) .handle { width: var(--m3e-split-pane-drag-handle-pressed-width, 0.75rem); height: var(--m3e-split-pane-drag-handle-pressed-height, 3.25rem); } :host(:state(-vertical)) .drag-handle { height: var(--m3e-split-pane-drag-handle-container-width, 1.5rem); } :host(:state(-vertical):not(:state(-pressed))) .handle { width: var(--m3e-split-pane-drag-handle-height, 3rem); height: var(--m3e-split-pane-drag-handle-width, 0.25rem); } :host(:state(-vertical):state(-pressed)) .handle { width: var(--m3e-split-pane-drag-handle-pressed-height, 3.25rem); height: var(--m3e-split-pane-drag-handle-pressed-width, 0.75rem); } @media (prefers-reduced-motion) { .handle { transition: none; } } @media (forced-colors: active) { :host(:state(-pressed)) .handle, :host(:not(:state(-pressed))) .handle { background-color: ButtonText; } }`;
+__decorate([state()], M3eSplitPaneElement.prototype, "_orientation", void 0);
+__decorate([query(".base")], M3eSplitPaneElement.prototype, "_base", void 0);
+__decorate([query(".drag-handle")], M3eSplitPaneElement.prototype, "_dragHandle", void 0);
+__decorate([property({
+  type: Number
+})], M3eSplitPaneElement.prototype, "value", void 0);
+__decorate([property({
+  type: Number
+})], M3eSplitPaneElement.prototype, "min", void 0);
+__decorate([property({
+  type: Number
+})], M3eSplitPaneElement.prototype, "max", void 0);
+__decorate([property({
+  type: Number
+})], M3eSplitPaneElement.prototype, "step", void 0);
+__decorate([property({
+  attribute: "detents",
+  converter: spaceSeparatedStringConverter
+})], M3eSplitPaneElement.prototype, "detents", void 0);
+__decorate([property({
+  attribute: "wrap-detents",
+  type: Boolean
+})], M3eSplitPaneElement.prototype, "wrapDetents", void 0);
+__decorate([property()], M3eSplitPaneElement.prototype, "orientation", void 0);
+__decorate([property()], M3eSplitPaneElement.prototype, "label", void 0);
+__decorate([property()], M3eSplitPaneElement.prototype, "valueFormatter", void 0);
+M3eSplitPaneElement = __decorate([customElement("m3e-split-pane")], M3eSplitPaneElement);
+
+export { M3eSplitPaneElement };
+//# sourceMappingURL=split-pane.js.map