@m3e/web 2.2.2 → 2.3.0

package/dist/all.js

@@ -6,7 +6,7 @@
 import { __classPrivateFieldGet, __decorate, __classPrivateFieldSet } from 'tslib';
 import { unsafeCSS, css, LitElement, html, nothing, isServer, noChange, svg } from 'lit';
 import { query, property, queryAssignedElements, state } from 'lit/decorators.js';
-import { DesignToken as DesignToken$1, HtmlFor as HtmlFor$1, Role as Role$1, hasAssignedNodes as hasAssignedNodes$1, debounce as debounce$1, customElement as customElement$1, EventAttribute as EventAttribute$1, MutationController as MutationController$1, setCustomState as setCustomState$1, deleteCustomState as deleteCustomState$1, prefersReducedMotion as prefersReducedMotion$1, scrollIntoViewIfNeeded as scrollIntoViewIfNeeded$1, forcedColorsActive as forcedColorsActive$1, addCustomState as addCustomState$1, ActionElementBase as ActionElementBase$1, ReconnectedCallback as ReconnectedCallback$1, SuppressInitialAnimation as SuppressInitialAnimation$1, AttachInternals as AttachInternals$1, VelocityTracker as VelocityTracker$1, ScrollLockController as ScrollLockController$1, InertController as InertController$1, ResizeController as ResizeController$1, focusWhenReady as focusWhenReady$1, hasCustomState as hasCustomState$1, computeCssSize as computeCssSize$1, registerStyleSheet as registerStyleSheet$1, spaceSeparatedStringConverter as spaceSeparatedStringConverter$1, KeyboardClick as KeyboardClick$1, LinkButton as LinkButton$1, FormSubmitter as FormSubmitter$1, Focusable as Focusable$1, DisabledInteractive as DisabledInteractive$1, Disabled as Disabled$1, FocusController as FocusController$1, PressedController as PressedController$1, renderPseudoLink as renderPseudoLink$1, isSelectedMixin as isSelectedMixin$1, dateConverter as dateConverter$1, Labelled as Labelled$1, RequiredConstraintValidation as RequiredConstraintValidation$1, Dirty as Dirty$1, Touched as Touched$1, Required as Required$1, ConstraintValidation as ConstraintValidation$1, CheckedIndeterminate as CheckedIndeterminate$1, FormAssociated as FormAssociated$1, HoverController as HoverController$1, formValue as formValue$1, isDisabledMixin as isDisabledMixin$1, isDisabledInteractiveMixin as isDisabledInteractiveMixin$1, isLinkButtonMixin as isLinkButtonMixin$1, getTextContent as getTextContent$1, Vertical as Vertical$1, Selected as Selected$1, ScrollController as ScrollController$1, isReadOnlyMixin as isReadOnlyMixin$1, interceptProperty as interceptProperty$1, computeLineCount as computeLineCount$1, generateClipPaths as generateClipPaths$1, Checked as Checked$1, AnimationLoopController as AnimationLoopController$1, resolveFragmentUrl as resolveFragmentUrl$1, safeStyleMap as safeStyleMap$1, updateLabels as updateLabels$1, guid as guid$1, IntersectionController as IntersectionController$1, LongPressController as LongPressController$1 } from '@m3e/web/core';
+import { DesignToken as DesignToken$1, HtmlFor as HtmlFor$1, Role as Role$1, hasAssignedNodes as hasAssignedNodes$1, debounce as debounce$1, customElement as customElement$1, EventAttribute as EventAttribute$1, MutationController as MutationController$1, setCustomState as setCustomState$1, deleteCustomState as deleteCustomState$1, prefersReducedMotion as prefersReducedMotion$1, scrollIntoViewIfNeeded as scrollIntoViewIfNeeded$1, forcedColorsActive as forcedColorsActive$1, addCustomState as addCustomState$1, ActionElementBase as ActionElementBase$1, ReconnectedCallback as ReconnectedCallback$1, SuppressInitialAnimation as SuppressInitialAnimation$1, AttachInternals as AttachInternals$1, VelocityTracker as VelocityTracker$1, ScrollLockController as ScrollLockController$1, InertController as InertController$1, ResizeController as ResizeController$1, focusWhenReady as focusWhenReady$1, hasCustomState as hasCustomState$1, computeCssSize as computeCssSize$1, registerStyleSheet as registerStyleSheet$1, spaceSeparatedStringConverter as spaceSeparatedStringConverter$1, KeyboardClick as KeyboardClick$1, LinkButton as LinkButton$1, FormSubmitter as FormSubmitter$1, Focusable as Focusable$1, DisabledInteractive as DisabledInteractive$1, Disabled as Disabled$1, FocusController as FocusController$1, PressedController as PressedController$1, renderPseudoLink as renderPseudoLink$1, isSelectedMixin as isSelectedMixin$1, dateConverter as dateConverter$1, Labelled as Labelled$1, RequiredConstraintValidation as RequiredConstraintValidation$1, Dirty as Dirty$1, Touched as Touched$1, Required as Required$1, ConstraintValidation as ConstraintValidation$1, CheckedIndeterminate as CheckedIndeterminate$1, FormAssociated as FormAssociated$1, HoverController as HoverController$1, formValue as formValue$1, isDisabledMixin as isDisabledMixin$1, isDisabledInteractiveMixin as isDisabledInteractiveMixin$1, isLinkButtonMixin as isLinkButtonMixin$1, getTextContent as getTextContent$1, Vertical as Vertical$1, Selected as Selected$1, ScrollController as ScrollController$1, isReadOnlyMixin as isReadOnlyMixin$1, interceptProperty as interceptProperty$1, computeLineCount as computeLineCount$1, generateClipPaths as generateClipPaths$1, Checked as Checked$1, AnimationLoopController as AnimationLoopController$1, resolveFragmentUrl as resolveFragmentUrl$1, safeStyleMap as safeStyleMap$1, updateLabels as updateLabels$1, waitForUpgrade as waitForUpgrade$1, guid as guid$1, IntersectionController as IntersectionController$1, LongPressController as LongPressController$1 } from '@m3e/web/core';
 import { ListKeyManager, M3eLiveAnnouncer, M3eInteractivityChecker, isModifierAllowed, addAriaReferencedId, removeAriaReferencedId, selectionManager, SelectionManager, ListManager, RovingTabIndexManager, M3eAriaDescriber, typeaheadLabel } from '@m3e/web/core/a11y';
 import { M3eOptGroupElement as M3eOptGroupElement$1 } from '@m3e/web/option';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
@@ -6987,6 +6987,27 @@ class VelocityTracker {
 }
 _VelocityTracker_samples = new WeakMap(), _VelocityTracker_windowMs = new WeakMap();
 
+/**
+ * Determines whether an element is a custom element and waits for it to be upgraded.
+ * @param {Element} el The element for which to wait for upgrade.
+ */
+async function waitForUpgrade(el) {
+  const tag = el.tagName.toLowerCase();
+  if (!tag.includes("-")) return;
+  if (!customElements.get(tag)) {
+    await customElements.whenDefined(tag);
+  }
+  const ctor = customElements.get(tag);
+  if (!ctor || el instanceof ctor) {
+    return;
+  }
+  await Promise.resolve();
+  if (el instanceof ctor) {
+    return;
+  }
+  await Promise.resolve();
+}
+
 var _FocusController_instances, _FocusController_touch, _FocusController_callback, _FocusController_keyDownHandler, _FocusController_focusInHandler, _FocusController_focusOutHandler, _FocusController_touchStartHandler, _FocusController_touchEndHandler, _FocusController_hadKeydown, _FocusController_windowKeyDownHandler, _FocusController_windowPointerDownHandler, _FocusController_handleKeyDown, _FocusController_handleFocusIn, _FocusController_handleFocusOut;
 /** A `ReactiveController` used to monitor the focused state of one or more elements. */
 class FocusController extends MonitorControllerBase {
@@ -23362,6 +23383,146 @@ __decorate([property({
 })], M3eShapeElement.prototype, "name", void 0);
 M3eShapeElement = __decorate([customElement$1("m3e-shape")], M3eShapeElement);
 
+var _M3eSkeletonElement_instances, _M3eSkeletonElement_anchoringCleanupMap, _M3eSkeletonElement_handleSlotChange, _M3eSkeletonElement_clearShapes, _M3eSkeletonElement_createShapes, _M3eSkeletonElement_createShape;
+/**
+ * A visual placeholder that mimics the layout of content while it's still loading.
+ * @description
+ * The `m3e-skeleton` component provides a loading placeholder surface with flexible shape variants and
+ * motion-based animations that communicate loading state while preserving layout stability. It mimics
+ * the layout of content while it's still loading, ensuring a smooth user experience during data fetching
+ * or rendering delays. The component supports different animation effects (`pulse`, `wave`, `none`) and
+ * shape variants (`circular`, `rounded`, `square`, `auto`) to adapt to various content types. When the
+ * content is loaded, the skeleton fades out with a smooth transition.
+ *
+ * @example
+ * The following example illustrates a skeleton shaped and sized by the slotted `m3e-card`.
+ * ```html
+ * <m3e-skeleton>
+ *  <m3e-card></m3e-card>
+ * </m3e-skeleton>
+ * ```
+ *
+ * @tag m3e-skeleton
+ *
+ * @attr animation - The animation effect of the skeleton.
+ * @attr shape - The shape of the skeleton.
+ * @attr loaded - Whether the content of the skeleton has been loaded.
+ *
+ * @slot - Renders the content to be mimicked by the skeleton.
+ *
+ * @cssprop --m3e-skeleton-color - Base fill color for the skeleton surface.
+ * @cssprop --m3e-skeleton-tint-color - Tint fill color for the skeleton surface.
+ * @cssprop --m3e-skeleton-tint-opacity - Tint Opacity applied when the skeleton animation is not pulsating.
+ * @cssprop --m3e-skeleton-accent-color - Accent color used in wave animation.
+ * @cssprop --m3e-skeleton-accent-opacity - Opacity of the accent effect in animations.
+ * @cssprop --m3e-skeleton-rounded-shape - Corner radius for the rounded skeleton shape.
+ * @cssprop --m3e-skeleton-circular-shape - Corner radius for the circular skeleton shape.
+ * @cssprop --m3e-skeleton-square-shape - Corner radius for the square skeleton shape.
+ * @cssprop --m3e-skeleton-shape - Corner radius for the skeleton shape.
+ */
+let M3eSkeletonElement = class M3eSkeletonElement extends ReconnectedCallback$1(LitElement) {
+  constructor() {
+    super(...arguments);
+    _M3eSkeletonElement_instances.add(this);
+    /** @private */
+    _M3eSkeletonElement_anchoringCleanupMap.set(this, new Map());
+    /**
+     * The shape of the skeleton.
+     * @default "auto"
+     */
+    this.shape = "auto";
+    /**
+     * The animation effect of the skeleton.
+     * @default "wave"
+     */
+    this.animation = "wave";
+    /**
+     * Whether the content of the skeleton has been loaded.
+     * @default false
+     */
+    this.loaded = false;
+  }
+  /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_clearShapes).call(this);
+  }
+  /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_createShapes).call(this);
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<slot ?inert="${!this.loaded}" @slotchange="${__classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_handleSlotChange)}"></slot>`;
+  }
+};
+_M3eSkeletonElement_anchoringCleanupMap = new WeakMap();
+_M3eSkeletonElement_instances = new WeakSet();
+_M3eSkeletonElement_handleSlotChange = /** @private */
+async function _M3eSkeletonElement_handleSlotChange() {
+  __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_createShapes).call(this);
+};
+_M3eSkeletonElement_clearShapes = function _M3eSkeletonElement_clearShapes() {
+  for (const item of __classPrivateFieldGet(this, _M3eSkeletonElement_anchoringCleanupMap, "f")) {
+    item[0].remove();
+    item[1]();
+  }
+  __classPrivateFieldGet(this, _M3eSkeletonElement_anchoringCleanupMap, "f").clear();
+};
+_M3eSkeletonElement_createShapes = /** @private */
+async function _M3eSkeletonElement_createShapes() {
+  __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_clearShapes).call(this);
+  const slot = this.shadowRoot?.querySelector("slot");
+  if (!slot) return;
+  for (const element of slot.assignedElements({
+    flatten: true
+  }).filter(x => x instanceof HTMLElement)) {
+    await __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_createShape).call(this, element);
+  }
+};
+_M3eSkeletonElement_createShape = /** @private */
+async function _M3eSkeletonElement_createShape(element) {
+  await waitForUpgrade$1(element);
+  const shape = document.createElement("div");
+  shape.classList.add("shape");
+  if (this.shape === "auto") {
+    let borderRadius = getComputedStyle(element).borderRadius;
+    if (!borderRadius || borderRadius === "0px") {
+      const firstElement = element.shadowRoot?.firstElementChild;
+      if (firstElement && !firstElement.nextElementSibling) {
+        borderRadius = getComputedStyle(firstElement).borderRadius;
+      }
+    }
+    if (borderRadius && borderRadius !== "0px") {
+      shape.style.borderRadius = borderRadius;
+    }
+  }
+  const anchoringCleanup = await positionAnchor(shape, element, {
+    position: "bottom"
+  }, (x, y) => {
+    shape.style.left = `${x}px`;
+    shape.style.top = `${y - element.clientHeight}px`;
+    shape.style.width = `${element.clientWidth}px`;
+    shape.style.height = `${element.clientHeight}px`;
+  });
+  __classPrivateFieldGet(this, _M3eSkeletonElement_anchoringCleanupMap, "f").set(shape, anchoringCleanup);
+  this.shadowRoot?.appendChild(shape);
+};
+/** The styles of the element. */
+M3eSkeletonElement.styles = css`:host { display: contents; } .shape { position: absolute; overflow: hidden; pointer-events: none; opacity: 1; background-color: var(--m3e-skeleton-color, ${DesignToken$1.color.surface}); } .shape::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: color-mix( in srgb, var(--m3e-skeleton-tint-color, ${DesignToken$1.color.onSurface}) var(--m3e-skeleton-tint-opacity, 8%), transparent ); } :host(:not([loaded])) slot { visibility: hidden; } :host([loaded]) .shape { opacity: 0; transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}`)}; } :host([shape="rounded"]) .shape { border-radius: var(--m3e-skeleton-rounded-shape, var(--m3e-skeleton-shape, ${DesignToken$1.shape.corner.large})); } :host([shape="circular"]) .shape { border-radius: var(--m3e-skeleton-circular-shape, var(--m3e-skeleton-shape, ${DesignToken$1.shape.corner.full})); } :host([shape="square"]) .shape { border-radius: var(--m3e-skeleton-square-shape, var(--m3e-skeleton-shape, 0px)); } :host([animation="pulse"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: pulse 1.2s ease-in-out infinite; background-color: var(--m3e-skeleton-tint-color, ${DesignToken$1.color.surfaceDim}); } :host([animation="wave"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: -150%; height: 100%; width: 150%; opacity: var(--m3e-skeleton-accent-opacity, 6%); background: linear-gradient( 90deg, transparent, var(--m3e-skeleton-accent-color, ${DesignToken$1.color.onSurface}), transparent ); animation: wave 2.1s linear infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: var(--m3e-skeleton-accent-opacity, 6%); } 100% { opacity: 1; } } @keyframes wave { 0% { left: -150%; } 100% { left: 100%; } } @media (forced-colors: active) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } .shape { background-color: GrayText; } } @media (prefers-reduced-motion) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } }`;
+__decorate([property({
+  reflect: true
+})], M3eSkeletonElement.prototype, "shape", void 0);
+__decorate([property({
+  reflect: true
+})], M3eSkeletonElement.prototype, "animation", void 0);
+__decorate([property({
+  type: Boolean,
+  reflect: true
+})], M3eSkeletonElement.prototype, "loaded", void 0);
+M3eSkeletonElement = __decorate([customElement$1("m3e-skeleton")], M3eSkeletonElement);
+
 var _M3eSlideGroupElement_instances, _M3eSlideGroupElement_directionalitySubscription, _M3eSlideGroupElement_resizeController, _M3eSlideGroupElement_pageStart, _M3eSlideGroupElement_pageEnd;
 /**
  * Presents pagination controls used to scroll overflowing content.
@@ -24573,6 +24734,618 @@ __decorate([property({
 })], M3eSplitButtonElement.prototype, "size", void 0);
 M3eSplitButtonElement = __decorate([customElement$1("m3e-split-button")], M3eSplitButtonElement);
 
+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$1(Disabled$1(ReconnectedCallback$1(AttachInternals$1(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$1(this, {
+      target: null,
+      isPressedKey: key => key === " ",
+      minPressedDuration: 150,
+      callback: pressed => setCustomState$1(this, "-pressed", pressed && !this.disabled)
+    }));
+    /** @private */
+    _M3eSplitPaneElement_startMutationController.set(this, new MutationController$1(this, {
+      target: null,
+      config: {
+        attributeFilter: ["hidden"]
+      },
+      callback: () => __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_updatePaneVisibility).call(this, "start")
+    }));
+    /** @private */
+    _M3eSplitPaneElement_endMutationController.set(this, new MutationController$1(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$1)]() {
+    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$1(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$1(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$1(this, "-vertical", this.currentOrientation === "vertical");
+};
+_M3eSplitPaneElement_clearOrientation = function _M3eSplitPaneElement_clearOrientation() {
+  deleteCustomState$1(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$1()) {
+    addCustomState$1(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$1(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$1(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$1.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$1.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$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard},
+        width ${DesignToken$1.motion.spring.fastEffects}, height ${DesignToken$1.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$1.color.outline}); border-radius: var(--m3e-split-pane-drag-handle-shape, ${DesignToken$1.shape.corner.full}); } :host(:state(-pressed)) .handle { background-color: var(--m3e-split-pane-drag-handle-pressed-color, ${DesignToken$1.color.onSurface}); border-radius: var(--m3e-split-pane-drag-handle-pressed-shape, ${DesignToken$1.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$1
+})], 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$1("m3e-split-pane")], M3eSplitPaneElement);
+
 /**
  * A panel presented for a step in a wizard-like workflow.
  *
@@ -30711,5 +31484,5 @@ M3eTooltipElement.styles = css`:host { display: contents; } .base { position: ab
 __decorate([property()], M3eTooltipElement.prototype, "position", void 0);
 M3eTooltipElement = __decorate([customElement$1("m3e-tooltip")], M3eTooltipElement);
 
-export { ActionElementBase, AnimationLoopController, AttachInternals, CalendarViewElementBase, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, InertController, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eAccordionElement, M3eActionListElement, M3eAppBarElement, M3eAssistChipElement, M3eAutocompleteElement, M3eAvatarElement, M3eBadgeElement, M3eBottomSheetActionElement, M3eBottomSheetElement, M3eBottomSheetTriggerElement, M3eButtonElement, M3eButtonGroupElement, M3eButtonSegmentElement, M3eCalendarElement, M3eCardElement, M3eCheckboxElement, M3eChipElement, M3eChipSetElement, M3eCircularProgressIndicatorElement, M3eCollapsibleElement, M3eDatepickerElement, M3eDatepickerToggleElement, M3eDialogActionElement, M3eDialogElement, M3eDialogTriggerElement, M3eDividerElement, M3eDrawerContainerElement, M3eDrawerToggleElement, M3eElevationElement, M3eExpandableListItemElement, M3eExpansionHeaderElement, M3eExpansionPanelElement, M3eFabElement, M3eFabMenuElement, M3eFabMenuItemElement, M3eFabMenuTriggerElement, M3eFilterChipElement, M3eFilterChipSetElement, M3eFocusRingElement, M3eFormFieldElement, M3eHeadingElement, M3eIconButtonElement, M3eIconElement, M3eInputChipElement, M3eInputChipSetElement, M3eLinearProgressIndicatorElement, M3eListActionElement, M3eListElement, M3eListItemButtonElement, M3eListItemElement, M3eListOptionElement, M3eLoadingIndicatorElement, M3eMenuElement, M3eMenuItemCheckboxElement, M3eMenuItemElement, M3eMenuItemGroupElement, M3eMenuItemRadioElement, M3eMenuTriggerElement, M3eMonthViewElement, M3eMultiYearViewElement, M3eNavBarElement, M3eNavItemElement, M3eNavMenuElement, M3eNavMenuItemElement, M3eNavMenuItemGroupElement, M3eNavRailElement, M3eNavRailToggleElement, M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement, M3ePaginatorElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRadioElement, M3eRadioGroupElement, M3eRichTooltipActionElement, M3eRichTooltipElement, M3eRippleElement, M3eScrollContainerElement, M3eSearchBarElement, M3eSearchViewElement, M3eSegmentedButtonElement, M3eSelectElement, M3eSelectionListElement, M3eShapeElement, M3eSlideElement, M3eSlideGroupElement, M3eSliderElement, M3eSliderThumbElement, M3eSnackbar, M3eSnackbarElement, M3eSplitButtonElement, M3eStateLayerElement, M3eStepElement, M3eStepPanelElement, M3eStepperElement, M3eStepperNextElement, M3eStepperPreviousElement, M3eStepperResetElement, M3eSuggestionChipElement, M3eSwitchElement, M3eTabElement, M3eTabPanelElement, M3eTabsElement, M3eTextHighlightElement, M3eTextOverflowElement, M3eTextareaAutosizeElement, M3eThemeElement, M3eTocElement, M3eTocItemElement, M3eToolbarElement, M3eTooltipElement, M3eYearViewElement, MutationController, PressedController, ProgressElementIndicatorBase, ReadOnly, ReconnectedCallback, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, StepperButtonElementBase, SuppressInitialAnimation, TocGenerator, TooltipElementBase, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, customElement, dateConverter, debounce, defaultValue, deleteCustomState, findFormFieldControl, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getTextContent, guid, hasAssignedNodes, hasCustomState, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormFieldControl, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, registerStyleSheet, renderPseudoLink, resolveElementById, resolveFragmentUrl, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate };
+export { ActionElementBase, AnimationLoopController, AttachInternals, CalendarViewElementBase, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, InertController, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eAccordionElement, M3eActionListElement, M3eAppBarElement, M3eAssistChipElement, M3eAutocompleteElement, M3eAvatarElement, M3eBadgeElement, M3eBottomSheetActionElement, M3eBottomSheetElement, M3eBottomSheetTriggerElement, M3eButtonElement, M3eButtonGroupElement, M3eButtonSegmentElement, M3eCalendarElement, M3eCardElement, M3eCheckboxElement, M3eChipElement, M3eChipSetElement, M3eCircularProgressIndicatorElement, M3eCollapsibleElement, M3eDatepickerElement, M3eDatepickerToggleElement, M3eDialogActionElement, M3eDialogElement, M3eDialogTriggerElement, M3eDividerElement, M3eDrawerContainerElement, M3eDrawerToggleElement, M3eElevationElement, M3eExpandableListItemElement, M3eExpansionHeaderElement, M3eExpansionPanelElement, M3eFabElement, M3eFabMenuElement, M3eFabMenuItemElement, M3eFabMenuTriggerElement, M3eFilterChipElement, M3eFilterChipSetElement, M3eFocusRingElement, M3eFormFieldElement, M3eHeadingElement, M3eIconButtonElement, M3eIconElement, M3eInputChipElement, M3eInputChipSetElement, M3eLinearProgressIndicatorElement, M3eListActionElement, M3eListElement, M3eListItemButtonElement, M3eListItemElement, M3eListOptionElement, M3eLoadingIndicatorElement, M3eMenuElement, M3eMenuItemCheckboxElement, M3eMenuItemElement, M3eMenuItemGroupElement, M3eMenuItemRadioElement, M3eMenuTriggerElement, M3eMonthViewElement, M3eMultiYearViewElement, M3eNavBarElement, M3eNavItemElement, M3eNavMenuElement, M3eNavMenuItemElement, M3eNavMenuItemGroupElement, M3eNavRailElement, M3eNavRailToggleElement, M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement, M3ePaginatorElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRadioElement, M3eRadioGroupElement, M3eRichTooltipActionElement, M3eRichTooltipElement, M3eRippleElement, M3eScrollContainerElement, M3eSearchBarElement, M3eSearchViewElement, M3eSegmentedButtonElement, M3eSelectElement, M3eSelectionListElement, M3eShapeElement, M3eSkeletonElement, M3eSlideElement, M3eSlideGroupElement, M3eSliderElement, M3eSliderThumbElement, M3eSnackbar, M3eSnackbarElement, M3eSplitButtonElement, M3eSplitPaneElement, M3eStateLayerElement, M3eStepElement, M3eStepPanelElement, M3eStepperElement, M3eStepperNextElement, M3eStepperPreviousElement, M3eStepperResetElement, M3eSuggestionChipElement, M3eSwitchElement, M3eTabElement, M3eTabPanelElement, M3eTabsElement, M3eTextHighlightElement, M3eTextOverflowElement, M3eTextareaAutosizeElement, M3eThemeElement, M3eTocElement, M3eTocItemElement, M3eToolbarElement, M3eTooltipElement, M3eYearViewElement, MutationController, PressedController, ProgressElementIndicatorBase, ReadOnly, ReconnectedCallback, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, StepperButtonElementBase, SuppressInitialAnimation, TocGenerator, TooltipElementBase, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, customElement, dateConverter, debounce, defaultValue, deleteCustomState, findFormFieldControl, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getTextContent, guid, hasAssignedNodes, hasCustomState, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormFieldControl, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, registerStyleSheet, renderPseudoLink, resolveElementById, resolveFragmentUrl, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate, waitForUpgrade };
 //# sourceMappingURL=all.js.map