@rcarls/rc-splitter 0.6.0 → 0.7.0

package/dist/rc-splitter-_P5HsZI9.js

@@ -0,0 +1,437 @@
+import { css as k, LitElement as M, html as m, nothing as $ } from "lit";
+import { property as l, state as _, query as V, queryAssignedElements as S } from "lit/decorators.js";
+import { MessagesController as w, DragGestureController as C, FlowController as A, renderedOrientation as y, resolveFlow as p, numberFormat as b, physicalAxis as d, isReversed as z, logicalDelta as g, findNextSnapIndex as B, findNearestSnapIndex as E, cssZoom as u, parseCssTime as P, keyNavigation as R, keyInteraction as T, bidiIsolate as x } from "@rcarls/rc-common";
+const N = k`*,:before,:after{box-sizing:border-box}:host{--rc-splitter-separator-size:6px;flex-direction:row;align-items:stretch;display:flex;position:relative}:host([orientation=vertical]){flex-direction:column}:host([hidden]){display:none}:host([data-interaction-mode=keyboard]):focus-within{outline:auto}::slotted(*){width:100%;height:100%}#separator{flex:0 0 var(--rc-splitter-separator-size,6px);background-color:var(--rc-splitter-separator-color,color-mix(in srgb, ButtonBorder 35%, Canvas 65%));border-inline-start:var(--rc-splitter-separator-border-inline-start,var(--rc-splitter-keyline,1px solid ButtonBorder));border-inline-end:var(--rc-splitter-separator-border-inline-end,var(--rc-splitter-keyline,1px solid ButtonBorder));z-index:1;flex-direction:column;grid-column:separator;justify-content:center;display:flex;position:relative;:host([orientation=vertical]) &{border-inline-start:unset;border-inline-end:unset;border-block-start:var(--rc-splitter-separator-border-block-start,var(--rc-splitter-keyline,1px solid ButtonBorder));border-block-end:var(--rc-splitter-separator-border-block-end,var(--rc-splitter-keyline,1px solid ButtonBorder));flex-direction:row}}#collapse-button{inline-size:var(--rc-splitter-collapse-button-size,20px);block-size:var(--rc-splitter-collapse-button-size,20px);border:1px solid var(--rc-splitter-collapse-button-border,ButtonBorder);background:var(--rc-splitter-collapse-button-bg,Canvas);color:var(--rc-splitter-collapse-button-color,ButtonText);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;margin-inline:auto;padding:0;line-height:1;display:flex;position:absolute;inset-block-start:var(--rc-splitter-collapse-button-offset,8px);inset-inline:0;&:hover{background:var(--rc-splitter-collapse-button-hover-bg,ButtonFace)}&:focus-visible{outline-offset:2px;outline:2px solid highlight}:host([orientation=vertical]) &{inset-block:0;inset-inline:var(--rc-splitter-collapse-button-offset,8px) auto;margin-block:auto;margin-inline:0}}#separator-handle{touch-action:none;inline-size:100%;block-size:var(--rc-splitter-separator-handle-size,100%);justify-content:center;align-items:center;display:flex;position:relative;&:before{content:"";inline-size:var(--rc-splitter-handle-thickness,4px);background-color:var(--rc-splitter-handle-fill,transparent);background-image:var(--rc-splitter-handle-pattern,radial-gradient(circle 1px at 50% calc(50% - 5px), var(--rc-splitter-handle-color,ButtonBorder) 100%, transparent 100%), radial-gradient(circle 1px at 50% 50%, var(--rc-splitter-handle-color,ButtonBorder) 100%, transparent 100%), radial-gradient(circle 1px at 50% calc(50% + 5px), var(--rc-splitter-handle-color,ButtonBorder) 100%, transparent 100%));border-radius:var(--rc-splitter-handle-border-radius,0);pointer-events:none;block-size:100%;transition:background-color var(--rc-splitter-handle-transition,0s);display:block}&:hover:before{background-color:var(--rc-splitter-handle-hover-fill,transparent)}&:after{content:"";pointer-events:none;border-radius:50%;block-size:24px;inline-size:24px;margin:auto;position:absolute;inset:0}:host([orientation=vertical]) &{inline-size:var(--rc-splitter-separator-handle-size,100%);block-size:100%;&:before{inline-size:100%;block-size:var(--rc-splitter-handle-thickness,4px)}}&[data-bar=vertical]{cursor:col-resize}&[data-bar=horizontal]{cursor:row-resize;&:before{background-image:var(--rc-splitter-handle-pattern,radial-gradient(circle 1px at calc(50% - 5px) 50%, var(--rc-splitter-handle-color,ButtonBorder) 100%, transparent 100%), radial-gradient(circle 1px at 50% 50%, var(--rc-splitter-handle-color,ButtonBorder) 100%, transparent 100%), radial-gradient(circle 1px at calc(50% + 5px) 50%, var(--rc-splitter-handle-color,ButtonBorder) 100%, transparent 100%))}}:host([fixed]) &{pointer-events:none}}@media (any-pointer:coarse){#separator-handle:after{pointer-events:auto}}#primary,#secondary{overflow:hidden}#primary{flex:none;grid-column:primary}#secondary{flex:1;grid-column:secondary}`;
+var I = Object.defineProperty, U = Object.getOwnPropertyDescriptor, r = (h, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? U(e, t) : e, n = h.length - 1, o; n >= 0; n--)
+    (o = h[n]) && (s = (i ? o(e, t, s) : o(s)) || s);
+  return i && s && I(e, t, s), s;
+};
+const D = {
+  left: "M 7 1 L 3 5 L 7 9",
+  right: "M 3 1 L 7 5 L 3 9",
+  up: "M 1 7 L 5 3 L 9 7",
+  down: "M 1 3 L 5 7 L 9 3"
+}, O = {
+  left: "right",
+  right: "left",
+  up: "down",
+  down: "up"
+};
+function F(h, e) {
+  const t = z(h, e);
+  return d(h, e) === "x" ? t ? "right" : "left" : t ? "down" : "up";
+}
+const L = 24, G = 200, H = "cubic-bezier(0.4, 0, 0.2, 1)", K = Object.freeze({
+  label: "Splitter",
+  expand: (h) => `Expand ${x(h)}`,
+  collapse: (h) => `Collapse ${x(h)}`
+}), f = class f extends M {
+  constructor() {
+    super(...arguments), this._messages = new w(
+      this,
+      "rc-splitter",
+      K,
+      {
+        overrides: () => this.messages
+      }
+    ), this.orientation = "horizontal", this.mode = "length", this.step = 1, this.min = 0, this.max = void 0, this._valueInitialized = !1, this._value = 0, this.fixed = !1, this.collapsible = !1, this.snapPoints = "", this.swipeVelocity = 500, this._minValue = 0, this._maxValue = 0, this._lastValue = 0, this._initialMax = 0, this._gestureStartValue = 0, this._gestureRestoreValue = 0, this._activeSnapAnimation = null, this._reducedMotion = typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null, this._gesture = new C(this, {
+      target: () => this._$separatorHandle,
+      axis: this.orientation === "horizontal" ? "x" : "y",
+      focusOnStart: !0,
+      onStart: (e) => this._onGestureStart(e),
+      onMove: (e) => this._onGestureMove(e),
+      onEnd: (e) => this._onGestureEnd(e),
+      onCancel: () => this._onGestureCancel()
+    }), this._resizeObserver = new ResizeObserver(() => this._onResize()), this._flow = new A(this);
+  }
+  set value(e) {
+    const t = this._hostValue;
+    this._hostValue = e, this._initialMax && this._setValue(e, !1), this.requestUpdate("value", t);
+  }
+  /** The current splitter value, corresponding to the separator position, in either pixels or percentage points depending on `mode`. */
+  get value() {
+    return this._value;
+  }
+  set defaultValue(e) {
+    const t = this._defaultValue;
+    this._defaultValue = e, !this._initialMax && this._hostValue === void 0 && e !== void 0 && this._setValue(e, !1), this.requestUpdate("defaultValue", t);
+  }
+  /** Initial uncontrolled splitter value. */
+  get defaultValue() {
+    return this._defaultValue;
+  }
+  get _effectiveMin() {
+    return Math.max(this._minValue, this.min);
+  }
+  get _effectiveMax() {
+    return Math.min(this._maxValue, this.max ?? this._maxValue);
+  }
+  /** True once initialized and the primary pane is at its effective minimum. */
+  get _isCollapsed() {
+    return this._initialMax > 0 && this.value <= this._effectiveMin;
+  }
+  _toggleCollapse() {
+    this._setUserValue(this._isCollapsed ? this._lastValue : this._effectiveMin);
+  }
+  _onCollapseButtonClick() {
+    this._toggleCollapse();
+  }
+  _onCollapseKeydown(e) {
+    if (!this.collapsible || this.fixed || !e.ctrlKey && !e.metaKey)
+      return;
+    (y(this.orientation, p(this)) === "horizontal" ? e.key === "ArrowLeft" || e.key === "ArrowRight" : e.key === "ArrowUp" || e.key === "ArrowDown") && (e.preventDefault(), e.stopImmediatePropagation(), this._toggleCollapse());
+  }
+  get _collapseButtonIcon() {
+    const e = F(this._paneAxis, this._flow.flow), t = this._isCollapsed ? O[e] : e, i = D[t];
+    return m`<svg
+      data-points=${t}
+      aria-hidden="true"
+      viewBox="0 0 10 10"
+      width="10"
+      height="10"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d=${i} />
+    </svg>`;
+  }
+  _setValue(e, t) {
+    const i = this._value;
+    this._value = Math.min(
+      Math.max(Math.round(e / this.step) * this.step, this._effectiveMin),
+      this._effectiveMax
+    ), t && this._value !== i && this.dispatchEvent(
+      new CustomEvent("rc-splitter-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this._value, valueText: this.valueText }
+      })
+    );
+  }
+  _setUserValue(e) {
+    this._valueInitialized = !0, this._hostValue = void 0, this._value > this._effectiveMin && (this._lastValue = this._value), this._setValue(e, !0);
+  }
+  /** The value as a CSS length, such as `40%` or `240px`. */
+  get valueText() {
+    return `${this.value}${this.mode === "percent" ? "%" : "px"}`;
+  }
+  /** The value for `aria-valuetext`, with digits in the splitter's locale. */
+  get _accessibleValueText() {
+    const e = this._messages.locale;
+    return this.mode === "percent" ? b(e, { style: "percent", maximumFractionDigits: 2 }).format(
+      this.value / 100
+    ) : `${b(e, { maximumFractionDigits: 2 }).format(this.value)}px`;
+  }
+  /**
+   * The logical axis the panes sit along: `horizontal` places them side by
+   * side along the inline axis, `vertical` stacks them along the block axis.
+   */
+  get _paneAxis() {
+    return this.orientation === "horizontal" ? "inline" : "block";
+  }
+  _onKeyboardResize(e) {
+    if (!this.fixed)
+      switch (e) {
+        case "next":
+          this._setUserValue(this.value + this.step);
+          break;
+        case "prev":
+          this._setUserValue(this.value - this.step);
+          break;
+        case "next-large":
+          this._setUserValue(this.value + this.step * 10);
+          break;
+        case "prev-large":
+          this._setUserValue(this.value - this.step * 10);
+          break;
+        case "start":
+          this._setUserValue(this._effectiveMin);
+          break;
+        case "end":
+          this._setUserValue(this._effectiveMax);
+          break;
+        case "toggle":
+          this._setUserValue(
+            this.value === this._effectiveMin ? this._lastValue : this._effectiveMin
+          );
+          break;
+      }
+  }
+  _onPointerResize(e) {
+    if (this.fixed)
+      return;
+    const t = p(this), i = this._paneAxis, s = this.getBoundingClientRect(), n = d(i, t) === "x", o = n ? s.width : s.height, c = n ? e.clientX - s.left : e.clientY - s.top, v = z(i, t) ? o - c : c;
+    this._setUserValue(v / o * this._maxValue);
+  }
+  /**
+   * Settles at a declared snap point by zero-based index.
+   *
+   * Finite fractional indices are truncated and clamped. Calls without valid
+   * snap points or with a non-finite index have no effect.
+   *
+   * @param index - zero-based index into `snapPoints`
+   * @param behavior - whether to animate the movement
+   */
+  snapTo(e, t = "animated") {
+    const i = this._resolvedSnapPoints();
+    if (!Number.isFinite(e) || i.length === 0)
+      return;
+    const s = Math.max(0, Math.min(Math.trunc(e), i.length - 1));
+    this._settleToValue(i[s], t);
+  }
+  _onGestureStart(e) {
+    this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null, this._gestureStartValue = this.value, this._gestureRestoreValue = this._lastValue;
+  }
+  _onGestureMove(e) {
+    this._onPointerResize({ clientX: e.x, clientY: e.y });
+  }
+  _onGestureEnd(e) {
+    const t = p(this), i = g({ dx: e.deltaX, dy: e.deltaY }, this._paneAxis, t), s = g(
+      { dx: e.velocityX, dy: e.velocityY },
+      this._paneAxis,
+      t
+    ), n = Math.abs(i) >= L && Math.abs(s) >= this.swipeVelocity;
+    if (n && this.collapsible) {
+      if (s < 0) {
+        const v = this._gestureRestoreValue > this._effectiveMin ? this._gestureRestoreValue : this._gestureStartValue;
+        this._settleToValue(this._effectiveMin, "animated"), this._lastValue = v;
+        return;
+      }
+      if (this._gestureStartValue <= this._effectiveMin) {
+        this._settleToValue(
+          Math.max(this._gestureRestoreValue, this._effectiveMin),
+          "animated"
+        );
+        return;
+      }
+    }
+    const o = this._resolvedSnapPoints();
+    if (o.length === 0)
+      return;
+    const c = n ? B(o, this._gestureStartValue, s > 0 ? 1 : -1) : E(o, this.value);
+    c >= 0 && this._settleToValue(o[c], "animated");
+  }
+  _onGestureCancel() {
+    this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null;
+  }
+  _resolvedSnapPoints() {
+    return this.snapPoints.trim() ? this.snapPoints.trim().split(/\s+/).map(Number).filter(Number.isFinite).map((e) => Math.min(Math.max(e, this._effectiveMin), this._effectiveMax)).filter((e, t, i) => t === 0 || e !== i[t - 1]) : [];
+  }
+  async _settleToValue(e, t) {
+    const i = this._$primary, s = this._sizeAlong(i.getBoundingClientRect(), this._paneAxis) / u(i);
+    if (this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null, this._setUserValue(e), await this.updateComplete, t === "instant" || this._reducedMotion?.matches)
+      return;
+    const n = this._sizeAlong(i.getBoundingClientRect(), this._paneAxis) / u(i);
+    if (s === n)
+      return;
+    const o = this._paneAxis === "inline" ? "inlineSize" : "blockSize", c = i.animate(
+      [{ [o]: `${s}px` }, { [o]: `${n}px` }],
+      {
+        duration: this._snapDuration(),
+        easing: H
+      }
+    );
+    this._activeSnapAnimation = c;
+    try {
+      await c.finished;
+    } catch {
+    } finally {
+      this._activeSnapAnimation === c && (this._activeSnapAnimation = null);
+    }
+  }
+  _snapDuration() {
+    const e = getComputedStyle(this).getPropertyValue("--rc-splitter-snap-duration");
+    return P(e) ?? G;
+  }
+  _onPrimaryChange(e) {
+    queueMicrotask(() => {
+      this._$primaryElements.length < 2 || this._$primaryElements.slice(1).forEach((t) => t.setAttribute("slot", "secondary"));
+    });
+  }
+  _onSecondaryChange(e) {
+    queueMicrotask(() => {
+      !this._$secondaryElements.length || this._$primaryElements.length || this._$secondaryElements.at(0)?.removeAttribute("slot");
+    });
+  }
+  /**
+   * The extent of `rect` along a logical axis. The pane axis is vertical on
+   * screen in vertical text, so a physical width would measure the wrong one.
+   */
+  _sizeAlong(e, t) {
+    return d(t, p(this)) === "x" ? e.width : e.height;
+  }
+  _measureHostSize(e) {
+    const t = this._sizeAlong(this.getBoundingClientRect(), e) / u(this);
+    if (t > 0)
+      return Math.ceil(t);
+    const i = getComputedStyle(this), s = e === "inline" ? i.inlineSize : i.blockSize, n = Number.parseFloat(s);
+    return Number.isFinite(n) ? Math.ceil(n) : 0;
+  }
+  _onResize() {
+    const e = this._$primaryElements.at(0), t = this._$primary.style.getPropertyValue("display");
+    globalThis.requestAnimationFrame(() => {
+      this._$primary.style.setProperty("display", "contents");
+      const i = e?.getBoundingClientRect() ?? this.getBoundingClientRect();
+      if (this.mode !== "percent") {
+        const s = this.orientation === "horizontal" ? (
+          // For horizontal splitters, just take the host width...
+          this._measureHostSize("inline")
+        ) : (
+          // ...otherwise try to use the first lightDOM element's auto height, and cache it
+          this._initialMax || Math.ceil(this._sizeAlong(i, "block") / u(this)) || this._measureHostSize("block")
+        );
+        (s > 0 || !this._initialMax) && (this._maxValue = s);
+      } else
+        this._maxValue = 100;
+      this._initialMax ? this._hostValue !== void 0 ? this._setValue(this._hostValue, !1) : this._setValue(this.value, !1) : (this._initialMax = this._maxValue, this._setValue(
+        this._valueInitialized ? this._value : this._hostValue ?? this.defaultValue ?? this._maxValue / 2,
+        !1
+      )), t ? this._$primary.style.setProperty("display", t) : this._$primary.style.removeProperty("display");
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    this._resizeObserver.disconnect(), this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null, super.disconnectedCallback();
+  }
+  firstUpdated() {
+    this._onResize();
+  }
+  updated() {
+    this._gesture.setOptions({
+      axis: d(this._paneAxis, this._flow.flow),
+      target: () => this._$separatorHandle
+    });
+  }
+  render() {
+    const e = y(
+      this.orientation === "horizontal" ? "vertical" : "horizontal",
+      this._flow.flow
+    ), t = this._messages.value, i = this.label ?? t.label;
+    return m`
+      <div
+        id="primary"
+        part="primary"
+        aria-label=${i}
+        style=${`${this._paneAxis === "inline" ? "inline" : "block"}-size: ${this.valueText}`}
+        ?hidden=${this.value === this._minValue}
+      >
+        <slot @slotchange=${this._onPrimaryChange}></slot>
+      </div>
+
+      <div id="separator" part="separator">
+        ${this.collapsible && this._$secondaryElements.length && !this.fixed ? m`<button
+              id="collapse-button"
+              part="collapse-button"
+              aria-label=${this._isCollapsed ? t.expand(i) : t.collapse(i)}
+              aria-expanded=${String(!this._isCollapsed)}
+              aria-controls="primary"
+              @click=${this._onCollapseButtonClick}
+            >
+              ${this._collapseButtonIcon}
+            </button>` : $}
+        <div
+          id="separator-handle"
+          role="separator"
+          tabindex="0"
+          part="separator-handle"
+          aria-labelledby="primary"
+          aria-controls="primary"
+          aria-orientation=${e}
+          data-bar=${e}
+          aria-valuenow=${this.value}
+          aria-valuetext=${this._accessibleValueText}
+          aria-valuemin=${this._effectiveMin}
+          aria-valuemax=${this._effectiveMax}
+          @keydown=${this._onCollapseKeydown}
+          ${R(this._onKeyboardResize)}
+          ${T()}
+          ?hidden=${!this._$secondaryElements.length}
+        ></div>
+      </div>
+
+      <aside
+        id="secondary"
+        part="secondary"
+        ?hidden=${!this._$secondaryElements.length || this.value === this._maxValue}
+      >
+        <slot name="secondary" @slotchange=${this._onSecondaryChange}></slot>
+      </aside>
+    `;
+  }
+};
+f.styles = [N];
+let a = f;
+r([
+  l({ attribute: !1 })
+], a.prototype, "messages", 2);
+r([
+  l({ type: String })
+], a.prototype, "label", 2);
+r([
+  l({ type: String, reflect: !0 })
+], a.prototype, "orientation", 2);
+r([
+  l({ type: String, reflect: !0 })
+], a.prototype, "mode", 2);
+r([
+  l({ type: Number })
+], a.prototype, "step", 2);
+r([
+  l({ type: Number })
+], a.prototype, "min", 2);
+r([
+  l({ type: Number })
+], a.prototype, "max", 2);
+r([
+  l({ type: Number })
+], a.prototype, "value", 1);
+r([
+  l({ type: Number, attribute: "default-value" })
+], a.prototype, "defaultValue", 1);
+r([
+  _()
+], a.prototype, "_value", 2);
+r([
+  l({ type: Boolean })
+], a.prototype, "fixed", 2);
+r([
+  l({ type: Boolean })
+], a.prototype, "collapsible", 2);
+r([
+  l({ type: String, attribute: "snap-points" })
+], a.prototype, "snapPoints", 2);
+r([
+  l({ type: Number, attribute: "swipe-velocity" })
+], a.prototype, "swipeVelocity", 2);
+r([
+  _()
+], a.prototype, "_minValue", 2);
+r([
+  _()
+], a.prototype, "_maxValue", 2);
+r([
+  _()
+], a.prototype, "_lastValue", 2);
+r([
+  V("#primary", !0)
+], a.prototype, "_$primary", 2);
+r([
+  V("#separator-handle")
+], a.prototype, "_$separatorHandle", 2);
+r([
+  S()
+], a.prototype, "_$primaryElements", 2);
+r([
+  S({ slot: "secondary" })
+], a.prototype, "_$secondaryElements", 2);
+export {
+  K as D,
+  a as R
+};
+//# sourceMappingURL=rc-splitter-_P5HsZI9.js.map

package/dist/rc-splitter-_P5HsZI9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-splitter-_P5HsZI9.js","sources":["../src/rc-splitter.styles.ts","../src/rc-splitter.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const splitterStyles = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --rc-splitter-separator-size: 6px;\n\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    align-items: stretch;\n  }\n\n  :host([orientation='vertical']) {\n    flex-direction: column;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* because :has(:focus-visible) doesn't work across slot boundary */\n  :host([data-interaction-mode='keyboard']):focus-within {\n    outline: auto;\n  }\n\n  ::slotted(*) {\n    width: 100%;\n    height: 100%;\n  }\n\n  #separator {\n    grid-column: separator;\n    flex: 0 0 var(--rc-splitter-separator-size, 6px);\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    background-color: var(\n      --rc-splitter-separator-color,\n      color-mix(in srgb, ButtonBorder 35%, Canvas 65%)\n    );\n    border-inline-start: var(\n      --rc-splitter-separator-border-inline-start,\n      var(--rc-splitter-keyline, 1px solid ButtonBorder)\n    );\n    border-inline-end: var(\n      --rc-splitter-separator-border-inline-end,\n      var(--rc-splitter-keyline, 1px solid ButtonBorder)\n    );\n    /* z-index: 1 as a flex item stacks separator above pane siblings so the\n       ::after touch-target circle (which extends past the strip) is hittable */\n    z-index: 1;\n    /* Required for collapse-button absolute positioning */\n    position: relative;\n\n    :host([orientation='vertical']) & {\n      flex-direction: row;\n      border-inline-start: unset;\n      border-inline-end: unset;\n      border-block-start: var(\n        --rc-splitter-separator-border-block-start,\n        var(--rc-splitter-keyline, 1px solid ButtonBorder)\n      );\n      border-block-end: var(\n        --rc-splitter-separator-border-block-end,\n        var(--rc-splitter-keyline, 1px solid ButtonBorder)\n      );\n    }\n  }\n\n  #collapse-button {\n    /* Positioned at the start of the separator strip, centered on the cross\n       axis. The button intentionally protrudes into the primary pane so it\n       is visible and hittable at a reasonable size even on narrow strips. */\n    position: absolute;\n    /* Centered on the cross axis with auto margins, which hold in RTL and in\n       vertical text where a physical 50% offset plus translate would not. */\n    inset-block-start: var(--rc-splitter-collapse-button-offset, 8px);\n    inset-inline: 0;\n    margin-inline: auto;\n    inline-size: var(--rc-splitter-collapse-button-size, 20px);\n    block-size: var(--rc-splitter-collapse-button-size, 20px);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: 1px solid var(--rc-splitter-collapse-button-border, ButtonBorder);\n    border-radius: 50%;\n    background: var(--rc-splitter-collapse-button-bg, Canvas);\n    color: var(--rc-splitter-collapse-button-color, ButtonText);\n    cursor: pointer;\n    line-height: 1;\n\n    &:hover {\n      background: var(--rc-splitter-collapse-button-hover-bg, ButtonFace);\n    }\n\n    &:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    :host([orientation='vertical']) & {\n      inset-block: 0;\n      margin-block: auto;\n      inset-inline: var(--rc-splitter-collapse-button-offset, 8px) auto;\n      margin-inline: 0;\n    }\n  }\n\n  #separator-handle {\n    touch-action: none;\n    inline-size: 100%;\n    block-size: var(--rc-splitter-separator-handle-size, 100%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /* Required so ::after is positioned relative to this element */\n    position: relative;\n\n    /* ── Visual drag indicator ─────────────────────────────────────────────\n       The box follows the orientation attribute in logical terms; the dots\n       and cursor are physical and follow data-bar, the bar's rendered\n       direction, so they stay right in vertical text.\n       Default: 3-dot grip along a vertical bar.\n       Themes override via --rc-splitter-handle-pattern (background-image) and\n       --rc-splitter-handle-fill (background-color). */\n    &::before {\n      content: '';\n      display: block;\n      inline-size: var(--rc-splitter-handle-thickness, 4px);\n      block-size: 100%;\n      background-color: var(--rc-splitter-handle-fill, transparent);\n      background-image: var(\n        --rc-splitter-handle-pattern,\n        radial-gradient(\n          circle 1px at 50% calc(50% - 5px),\n          var(--rc-splitter-handle-color, ButtonBorder) 100%,\n          transparent 100%\n        ),\n        radial-gradient(\n          circle 1px at 50% 50%,\n          var(--rc-splitter-handle-color, ButtonBorder) 100%,\n          transparent 100%\n        ),\n        radial-gradient(\n          circle 1px at 50% calc(50% + 5px),\n          var(--rc-splitter-handle-color, ButtonBorder) 100%,\n          transparent 100%\n        )\n      );\n      border-radius: var(--rc-splitter-handle-border-radius, 0);\n      pointer-events: none;\n      transition: background-color var(--rc-splitter-handle-transition, 0ms);\n    }\n\n    /* Hover highlight stays on the visual indicator only, never the full strip */\n    &:hover::before {\n      background-color: var(--rc-splitter-handle-hover-fill, transparent);\n    }\n\n    /* ── Touch target circle ───────────────────────────────────────────────\n       24 px diameter transparent circle, centered on the handle. Invisible\n       and non-interactive for mouse/keyboard. On coarse-pointer (touch)\n       devices the circle becomes hittable, giving a WCAG-compliant touch\n       target without widening the visual separator. */\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      margin: auto;\n      inline-size: 24px;\n      block-size: 24px;\n      border-radius: 50%;\n      pointer-events: none;\n    }\n\n    :host([orientation='vertical']) & {\n      inline-size: var(--rc-splitter-separator-handle-size, 100%);\n      block-size: 100%;\n\n      &::before {\n        inline-size: 100%;\n        block-size: var(--rc-splitter-handle-thickness, 4px);\n      }\n    }\n\n    &[data-bar='vertical'] {\n      cursor: col-resize;\n    }\n\n    &[data-bar='horizontal'] {\n      cursor: row-resize;\n\n      /* 3-dot grip along a horizontal bar */\n      &::before {\n        background-image: var(\n          --rc-splitter-handle-pattern,\n          radial-gradient(\n            circle 1px at calc(50% - 5px) 50%,\n            var(--rc-splitter-handle-color, ButtonBorder) 100%,\n            transparent 100%\n          ),\n          radial-gradient(\n            circle 1px at 50% 50%,\n            var(--rc-splitter-handle-color, ButtonBorder) 100%,\n            transparent 100%\n          ),\n          radial-gradient(\n            circle 1px at calc(50% + 5px) 50%,\n            var(--rc-splitter-handle-color, ButtonBorder) 100%,\n            transparent 100%\n          )\n        );\n      }\n    }\n\n    :host([fixed]) & {\n      pointer-events: none;\n    }\n  }\n\n  /* Activate the touch target circle only on coarse-pointer (touch) devices */\n  @media (any-pointer: coarse) {\n    #separator-handle::after {\n      pointer-events: auto;\n    }\n  }\n\n  #primary,\n  #secondary {\n    overflow: hidden;\n  }\n\n  #primary {\n    grid-column: primary;\n    flex: 0 0 auto;\n  }\n\n  #secondary {\n    grid-column: secondary;\n    flex: 1;\n  }\n`;\n\nexport default splitterStyles;\n","import { LitElement, html, nothing } from 'lit';\nimport { property, state, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport {\n  cssZoom,\n  bidiIsolate,\n  MessagesController,\n  numberFormat,\n  DragGestureController,\n  FlowController,\n  findNearestSnapIndex,\n  findNextSnapIndex,\n  isReversed,\n  keyInteraction,\n  keyNavigation,\n  logicalDelta,\n  parseCssTime,\n  physicalAxis,\n  renderedOrientation,\n  resolveFlow,\n  type DragGestureDetail,\n  type Flow,\n  type KeyboardNavigationAction,\n  type LogicalAxis,\n} from '@rcarls/rc-common';\n\nimport splitterStyles from './rc-splitter.styles.js';\n\ntype SplitterOrientation = 'horizontal' | 'vertical';\n\ntype ChevronSide = 'left' | 'right' | 'up' | 'down';\n\nconst CHEVRON_PATHS: Record<ChevronSide, string> = {\n  left: 'M 7 1 L 3 5 L 7 9',\n  right: 'M 3 1 L 7 5 L 3 9',\n  up: 'M 1 7 L 5 3 L 9 7',\n  down: 'M 1 3 L 5 7 L 9 3',\n};\n\nconst OPPOSITE_SIDE: Record<ChevronSide, ChevronSide> = {\n  left: 'right',\n  right: 'left',\n  up: 'down',\n  down: 'up',\n};\n\n/** The physical side the start of `axis` sits on. */\nfunction paneStartSide(axis: LogicalAxis, flow: Flow): ChevronSide {\n  const reversed = isReversed(axis, flow);\n\n  if (physicalAxis(axis, flow) === 'x') {\n    return reversed ? 'right' : 'left';\n  }\n\n  return reversed ? 'down' : 'up';\n}\n\ntype SplitterMode = 'length' | 'percent' | 'fixed';\n\nconst MIN_SWIPE_DISTANCE = 24;\nconst DEFAULT_SNAP_DURATION_MS = 200;\nconst SNAP_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-splitter': RCSplitter;\n  }\n}\n\n/** Built-in text of `rc-splitter`. */\nexport interface RCSplitterMessages {\n  /** Default name of the primary pane, when `label` is unset. */\n  label: string;\n  expand: (label: string) => string;\n  collapse: (label: string) => string;\n}\n\nexport const DEFAULT_SPLITTER_MESSAGES: Readonly<RCSplitterMessages> = Object.freeze({\n  label: 'Splitter',\n  expand: (label: string) => `Expand ${bidiIsolate(label)}`,\n  collapse: (label: string) => `Collapse ${bidiIsolate(label)}`,\n});\n\ndeclare module '@rcarls/rc-common' {\n  interface RcMessageCatalog {\n    'rc-splitter': RCSplitterMessages;\n  }\n}\n\n/**\n * Resizable pane splitter with pointer, keyboard, anchored settling, and\n * collapse/restore controls, following the WAI-ARIA Window Splitter pattern.\n *\n * Set `orientation=\"vertical\"` for a vertical splitter\n *\n * Built-in text (the collapse button name and default pane name; the separator value text is formatted for the same locale) follows the element's own `lang`, else\n * `<html lang>`: per element through `messages`, or for every instance\n * through `registerMessages()` from `@rcarls/rc-common` under `rc-splitter`.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-splitter rc-splitter docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/ WAI-ARIA Window Splitter pattern}\n *\n * @slot - Primary pane contents\n * @slot secondary - Secondary pane contents (optional)\n *\n * @fires rc-splitter-change - Fired when the separator position changes; `detail: { value, valueText }`\n *\n * @attr label - Accessible label applied to the primary pane and referenced by the separator\n *   handle's `aria-labelledby`. Defaults to the `label` message.\n * @attr orientation - Layout: `horizontal` places the panes side by side along the inline axis\n *   (left/right in LTR, right/left in RTL), `vertical` stacks them along the block axis. Both turn\n *   over in vertical writing modes; the separator's `aria-orientation`, arrow keys, and dragging\n *   follow the layout actually rendered.\n * @attr mode - Value units and pane sizing behavior: `length`, `percent`, or `fixed`.\n * @attr step - Keyboard resize step size, in the current mode's units.\n * @attr min - Minimum primary pane size, in the current mode's units.\n * @attr max - Maximum primary pane size, in the current mode's units. Defaults to the full\n *   container size.\n * @attr value - Current primary pane size. Host writes update silently.\n * @attr default-value - Initial uncontrolled primary pane size.\n * @attr fixed - Disables pointer and keyboard resizing without changing pane size.\n * @attr collapsible - Renders a collapse/expand toggle button on the separator.\n * @attr snap-points - Ascending whitespace-separated anchors, in the current mode's units.\n * @attr swipe-velocity - Minimum release velocity, in px/s, that qualifies as a swipe.\n *\n * @cssprop [--rc-splitter-separator-size=6px] - Thickness of the separator bar\n * @cssprop [--rc-splitter-separator-handle-size=100%] - Length of the drag handle area within the separator (also the length of the visible indicator)\n * @cssprop [--rc-splitter-separator-color=color-mix(in srgb, ButtonBorder 35%, Canvas 65%)] - Separator background color\n * @cssprop [--rc-splitter-keyline=1px solid ButtonBorder] - Shared separator keyline border\n * @cssprop [--rc-splitter-handle-color=ButtonBorder] - Color of the dot grip indicators (default visual)\n * @cssprop [--rc-splitter-handle-thickness=4px] - Cross-axis size of the visual indicator (dot column width or pill/line thickness)\n * @cssprop [--rc-splitter-handle-border-radius=0] - Border-radius of the visual indicator; set to a large value (e.g. 999px) for a pill shape\n * @cssprop [--rc-splitter-handle-pattern=<3-dot radial-gradient>] - background-image for the visual indicator; set to `none` to use a solid fill via --rc-splitter-handle-fill instead\n * @cssprop [--rc-splitter-handle-fill=transparent] - background-color of the visual indicator; effective when --rc-splitter-handle-pattern is none (e.g. for a solid pill)\n * @cssprop [--rc-splitter-handle-hover-fill=transparent] - background-color of the visual indicator on hover; scoped to the indicator element only, not the full separator strip\n * @cssprop [--rc-splitter-handle-transition=0ms] - CSS transition duration/easing for the visual indicator's background-color changes\n * @cssprop [--rc-splitter-snap-duration=200ms] - Duration of anchored settling after pointer release or `snapTo()`\n * @cssprop [--rc-splitter-collapse-button-size=20px] - Diameter of the collapse/expand toggle button\n * @cssprop [--rc-splitter-collapse-button-offset=8px] - Distance from the start edge of the separator to the collapse button center\n * @cssprop [--rc-splitter-collapse-button-bg=Canvas] - Collapse button background color\n * @cssprop [--rc-splitter-collapse-button-hover-bg=ButtonFace] - Collapse button background color on hover\n * @cssprop [--rc-splitter-collapse-button-border=ButtonBorder] - Collapse button border color\n * @cssprop [--rc-splitter-collapse-button-color=ButtonText] - Collapse button icon color\n * @cssprop [--rc-splitter-separator-border-inline-start=1px solid ButtonBorder] - Inline-start border\n * @cssprop [--rc-splitter-separator-border-inline-end=1px solid ButtonBorder] - Inline-end border\n * @cssprop [--rc-splitter-separator-border-block-start=1px solid ButtonBorder] - Block-start border (vertical orientation)\n * @cssprop [--rc-splitter-separator-border-block-end=1px solid ButtonBorder] - Block-end border (vertical orientation)\n * @csspart primary - Primary pane container\n * @csspart secondary - Secondary pane container\n * @csspart separator - The separator bar\n * @csspart separator-handle - The focusable drag handle\n * @csspart collapse-button - The collapse/expand toggle button (only rendered when `collapsible` is set)\n */\nexport class RCSplitter extends LitElement {\n  static styles = [splitterStyles];\n\n  /** Built-in text overrides; unset keys fall back to registered text, then English. */\n  @property({ attribute: false })\n  messages: Partial<RCSplitterMessages> | undefined;\n\n  private readonly _messages = new MessagesController(\n    this,\n    'rc-splitter',\n    DEFAULT_SPLITTER_MESSAGES,\n    {\n      overrides: () => this.messages,\n    },\n  );\n\n  /** Accessible label for this splitter. Defaults to the `label` message. */\n  @property({ type: String })\n  label: string | undefined;\n\n  /** Splitter orientation, for keyboard navigation and initial sizing. */\n  @property({ type: String, reflect: true })\n  orientation: SplitterOrientation = 'horizontal';\n\n  /**\n   * Determines value units and pane sizing behavior.\n   *\n   * - `length` uses px for the primary pane size.\n   * - `percent` uses percentage points.\n   * - `fixed` uses px for a clampable fixed primary pane while the secondary pane flexes.\n   */\n  @property({ type: String, reflect: true })\n  mode: SplitterMode = 'length';\n\n  /** The step size for resizing, in either pixels or percentage points depending on `mode`. */\n  @property({ type: Number })\n  step: number = 1;\n\n  /** Minimum size of the primary pane in current mode units. Defaults to 0. */\n  @property({ type: Number })\n  min: number = 0;\n\n  /** Maximum size of the primary pane in current mode units. Defaults to the full container size. */\n  @property({ type: Number })\n  max: number | undefined = undefined;\n\n  private _defaultValue: number | undefined;\n  private _hostValue: number | undefined;\n  private _valueInitialized = false;\n\n  /** The current splitter value. Host writes update silently. */\n  @property({ type: Number })\n  set value(val: number) {\n    const oldValue = this._hostValue;\n\n    this._hostValue = val;\n\n    if (this._initialMax) {\n      this._setValue(val, false);\n    }\n\n    this.requestUpdate('value', oldValue);\n  }\n\n  /** The current splitter value, corresponding to the separator position, in either pixels or percentage points depending on `mode`. */\n  get value() {\n    return this._value;\n  }\n\n  /** Initial uncontrolled splitter value. */\n  @property({ type: Number, attribute: 'default-value' })\n  set defaultValue(val: number | undefined) {\n    const oldValue = this._defaultValue;\n\n    this._defaultValue = val;\n\n    if (!this._initialMax && this._hostValue === undefined && val !== undefined) {\n      this._setValue(val, false);\n    }\n\n    this.requestUpdate('defaultValue', oldValue);\n  }\n\n  /** Initial uncontrolled splitter value. */\n  get defaultValue() {\n    return this._defaultValue;\n  }\n\n  protected get _effectiveMin(): number {\n    return Math.max(this._minValue, this.min);\n  }\n\n  protected get _effectiveMax(): number {\n    return Math.min(this._maxValue, this.max ?? this._maxValue);\n  }\n\n  /** True once initialized and the primary pane is at its effective minimum. */\n  protected get _isCollapsed(): boolean {\n    return this._initialMax > 0 && this.value <= this._effectiveMin;\n  }\n\n  protected _toggleCollapse(): void {\n    this._setUserValue(this._isCollapsed ? this._lastValue : this._effectiveMin);\n  }\n\n  protected _onCollapseButtonClick(): void {\n    this._toggleCollapse();\n  }\n\n  protected _onCollapseKeydown(e: KeyboardEvent): void {\n    if (!this.collapsible || this.fixed) {\n      return;\n    }\n\n    if (!e.ctrlKey && !e.metaKey) {\n      return;\n    }\n\n    const isRelevantKey =\n      renderedOrientation(this.orientation, resolveFlow(this)) === 'horizontal'\n        ? e.key === 'ArrowLeft' || e.key === 'ArrowRight'\n        : e.key === 'ArrowUp' || e.key === 'ArrowDown';\n\n    if (isRelevantKey) {\n      e.preventDefault();\n      e.stopImmediatePropagation();\n      this._toggleCollapse();\n    }\n  }\n\n  protected get _collapseButtonIcon() {\n    // The chevron points toward the primary pane to collapse (the separator\n    // moves toward it) and away from it to expand. The primary pane sits at\n    // the start of the pane axis, which the flow places on a physical side.\n    const startSide = paneStartSide(this._paneAxis, this._flow.flow);\n    const points = this._isCollapsed ? OPPOSITE_SIDE[startSide] : startSide;\n    const d = CHEVRON_PATHS[points];\n\n    return html`<svg\n      data-points=${points}\n      aria-hidden=\"true\"\n      viewBox=\"0 0 10 10\"\n      width=\"10\"\n      height=\"10\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <path d=${d} />\n    </svg>`;\n  }\n\n  protected _setValue(val: number, dispatch: boolean): void {\n    const oldValue = this._value;\n\n    this._value = Math.min(\n      Math.max(Math.round(val / this.step) * this.step, this._effectiveMin),\n      this._effectiveMax,\n    );\n\n    if (dispatch && this._value !== oldValue) {\n      this.dispatchEvent(\n        new CustomEvent('rc-splitter-change', {\n          bubbles: true,\n          composed: true,\n          detail: { value: this._value, valueText: this.valueText },\n        }),\n      );\n    }\n  }\n\n  protected _setUserValue(val: number): void {\n    this._valueInitialized = true;\n    this._hostValue = undefined;\n\n    // Capture the last position above the effective minimum before a user-driven\n    // change so toggle-collapse can restore it. Internal resize callbacks use\n    // _setValue directly and must not overwrite this.\n    if (this._value > this._effectiveMin) {\n      this._lastValue = this._value;\n    }\n\n    this._setValue(val, true);\n  }\n\n  @state()\n  private _value: number = 0;\n\n  /** Disables pointer and keyboard resizing without changing pane size. */\n  @property({ type: Boolean })\n  fixed: boolean = false;\n\n  /** Renders a collapse/expand toggle button on the separator. */\n  @property({ type: Boolean })\n  collapsible: boolean = false;\n\n  /**\n   * Ascending whitespace-separated snap points in the current mode's units.\n   * An empty value keeps pointer resizing continuous.\n   */\n  @property({ type: String, attribute: 'snap-points' })\n  snapPoints = '';\n\n  /** Minimum release velocity, in px/s, that qualifies as a swipe. */\n  @property({ type: Number, attribute: 'swipe-velocity' })\n  swipeVelocity = 500;\n\n  /** The value as a CSS length, such as `40%` or `240px`. */\n  get valueText() {\n    return `${this.value}${this.mode === 'percent' ? '%' : 'px'}`;\n  }\n\n  /** The value for `aria-valuetext`, with digits in the splitter's locale. */\n  protected get _accessibleValueText(): string {\n    const locale = this._messages.locale;\n\n    return this.mode === 'percent'\n      ? numberFormat(locale, { style: 'percent', maximumFractionDigits: 2 }).format(\n          this.value / 100,\n        )\n      : `${numberFormat(locale, { maximumFractionDigits: 2 }).format(this.value)}px`;\n  }\n\n  @state()\n  protected _minValue: number = 0;\n\n  @state()\n  protected _maxValue: number = 0;\n\n  /** Last valid value, for collapse functionality. */\n  @state()\n  protected _lastValue: number = 0;\n\n  @query('#primary', true)\n  protected _$primary!: HTMLDivElement;\n\n  @query('#separator-handle')\n  protected _$separatorHandle!: HTMLDivElement;\n\n  @queryAssignedElements()\n  protected _$primaryElements!: Array<HTMLElement>;\n\n  @queryAssignedElements({ slot: 'secondary' })\n  protected _$secondaryElements!: Array<HTMLElement>;\n\n  protected _initialMax: number = 0;\n\n  protected _gestureStartValue = 0;\n  protected _gestureRestoreValue = 0;\n  protected _activeSnapAnimation: Animation | null = null;\n  protected readonly _reducedMotion =\n    typeof window !== 'undefined' ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;\n\n  protected readonly _gesture = new DragGestureController(this, {\n    target: () => this._$separatorHandle,\n    axis: this.orientation === 'horizontal' ? 'x' : 'y',\n    focusOnStart: true,\n    onStart: (detail) => this._onGestureStart(detail),\n    onMove: (detail) => this._onGestureMove(detail),\n    onEnd: (detail) => this._onGestureEnd(detail),\n    onCancel: () => this._onGestureCancel(),\n  });\n\n  protected _resizeObserver = new ResizeObserver(() => this._onResize());\n\n  /** Keeps the separator's aria-orientation and drag axis on the rendered layout. */\n  protected readonly _flow = new FlowController(this);\n\n  /**\n   * The logical axis the panes sit along: `horizontal` places them side by\n   * side along the inline axis, `vertical` stacks them along the block axis.\n   */\n  protected get _paneAxis(): LogicalAxis {\n    return this.orientation === 'horizontal' ? 'inline' : 'block';\n  }\n\n  protected _onKeyboardResize(action: KeyboardNavigationAction) {\n    if (this.fixed) {\n      return;\n    }\n\n    switch (action) {\n      case 'next':\n        this._setUserValue(this.value + this.step);\n        break;\n      case 'prev':\n        this._setUserValue(this.value - this.step);\n        break;\n      case 'next-large':\n        this._setUserValue(this.value + this.step * 10);\n        break;\n      case 'prev-large':\n        this._setUserValue(this.value - this.step * 10);\n        break;\n      case 'start':\n        this._setUserValue(this._effectiveMin);\n        break;\n      case 'end':\n        this._setUserValue(this._effectiveMax);\n        break;\n      case 'toggle':\n        this._setUserValue(\n          this.value === this._effectiveMin ? this._lastValue : this._effectiveMin,\n        );\n        break;\n    }\n  }\n\n  protected _onPointerResize(e: Pick<PointerEvent, 'clientX' | 'clientY'>) {\n    if (this.fixed) {\n      return;\n    }\n\n    // Measured from the primary pane's logical start edge, which is the\n    // right edge in RTL and the top or right edge in vertical text.\n    const flow = resolveFlow(this);\n    const axis = this._paneAxis;\n    const clientRect = this.getBoundingClientRect();\n    const alongX = physicalAxis(axis, flow) === 'x';\n    const size = alongX ? clientRect.width : clientRect.height;\n    const fromPhysicalStart = alongX ? e.clientX - clientRect.left : e.clientY - clientRect.top;\n    const offset = isReversed(axis, flow) ? size - fromPhysicalStart : fromPhysicalStart;\n\n    this._setUserValue((offset / size) * this._maxValue);\n  }\n\n  /**\n   * Settles at a declared snap point by zero-based index.\n   *\n   * Finite fractional indices are truncated and clamped. Calls without valid\n   * snap points or with a non-finite index have no effect.\n   *\n   * @param index - zero-based index into `snapPoints`\n   * @param behavior - whether to animate the movement\n   */\n  snapTo(index: number, behavior: 'animated' | 'instant' = 'animated'): void {\n    const points = this._resolvedSnapPoints();\n\n    if (!Number.isFinite(index) || points.length === 0) {\n      return;\n    }\n\n    const clampedIndex = Math.max(0, Math.min(Math.trunc(index), points.length - 1));\n\n    void this._settleToValue(points[clampedIndex], behavior);\n  }\n\n  protected _onGestureStart(_detail: DragGestureDetail): void {\n    this._activeSnapAnimation?.cancel();\n    this._activeSnapAnimation = null;\n    this._gestureStartValue = this.value;\n    this._gestureRestoreValue = this._lastValue;\n  }\n\n  protected _onGestureMove(detail: DragGestureDetail): void {\n    this._onPointerResize({ clientX: detail.x, clientY: detail.y });\n  }\n\n  protected _onGestureEnd(detail: DragGestureDetail): void {\n    // Positive toward the pane axis's logical end, i.e. away from the primary pane.\n    const flow = resolveFlow(this);\n    const delta = logicalDelta({ dx: detail.deltaX, dy: detail.deltaY }, this._paneAxis, flow);\n    const velocity = logicalDelta(\n      { dx: detail.velocityX, dy: detail.velocityY },\n      this._paneAxis,\n      flow,\n    );\n    const decisive =\n      Math.abs(delta) >= MIN_SWIPE_DISTANCE && Math.abs(velocity) >= this.swipeVelocity;\n\n    if (decisive && this.collapsible) {\n      if (velocity < 0) {\n        const restoreValue =\n          this._gestureRestoreValue > this._effectiveMin\n            ? this._gestureRestoreValue\n            : this._gestureStartValue;\n\n        void this._settleToValue(this._effectiveMin, 'animated');\n        this._lastValue = restoreValue;\n\n        return;\n      }\n\n      if (this._gestureStartValue <= this._effectiveMin) {\n        void this._settleToValue(\n          Math.max(this._gestureRestoreValue, this._effectiveMin),\n          'animated',\n        );\n\n        return;\n      }\n    }\n\n    const points = this._resolvedSnapPoints();\n\n    if (points.length === 0) {\n      return;\n    }\n\n    const index = decisive\n      ? findNextSnapIndex(points, this._gestureStartValue, velocity > 0 ? 1 : -1)\n      : findNearestSnapIndex(points, this.value);\n\n    if (index >= 0) {\n      void this._settleToValue(points[index], 'animated');\n    }\n  }\n\n  protected _onGestureCancel(): void {\n    this._activeSnapAnimation?.cancel();\n    this._activeSnapAnimation = null;\n  }\n\n  protected _resolvedSnapPoints(): number[] {\n    if (!this.snapPoints.trim()) {\n      return [];\n    }\n\n    return this.snapPoints\n      .trim()\n      .split(/\\s+/)\n      .map(Number)\n      .filter(Number.isFinite)\n      .map((point) => Math.min(Math.max(point, this._effectiveMin), this._effectiveMax))\n      .filter((point, index, points) => index === 0 || point !== points[index - 1]);\n  }\n\n  protected async _settleToValue(value: number, behavior: 'animated' | 'instant'): Promise<void> {\n    const $primary = this._$primary;\n    const fromSizeCssPx =\n      this._sizeAlong($primary.getBoundingClientRect(), this._paneAxis) / cssZoom($primary);\n\n    this._activeSnapAnimation?.cancel();\n    this._activeSnapAnimation = null;\n    this._setUserValue(value);\n    await this.updateComplete;\n\n    if (behavior === 'instant' || this._reducedMotion?.matches) {\n      return;\n    }\n\n    const toSizeCssPx =\n      this._sizeAlong($primary.getBoundingClientRect(), this._paneAxis) / cssZoom($primary);\n\n    if (fromSizeCssPx === toSizeCssPx) {\n      return;\n    }\n\n    const property = this._paneAxis === 'inline' ? 'inlineSize' : 'blockSize';\n    const animation = $primary.animate(\n      [{ [property]: `${fromSizeCssPx}px` }, { [property]: `${toSizeCssPx}px` }],\n      {\n        duration: this._snapDuration(),\n        easing: SNAP_EASING,\n      },\n    );\n\n    this._activeSnapAnimation = animation;\n\n    try {\n      await animation.finished;\n    } catch {\n      // A newer gesture or snap call owns the final visual state.\n    } finally {\n      if (this._activeSnapAnimation === animation) {\n        this._activeSnapAnimation = null;\n      }\n    }\n  }\n\n  protected _snapDuration(): number {\n    const raw = getComputedStyle(this).getPropertyValue('--rc-splitter-snap-duration');\n\n    // Themes may resolve motion tokens in seconds (`.3s`); Web Animations\n    // durations are milliseconds.\n    return parseCssTime(raw) ?? DEFAULT_SNAP_DURATION_MS;\n  }\n\n  protected _onPrimaryChange(_e: Event) {\n    queueMicrotask(() => {\n      if (this._$primaryElements.length < 2) {\n        return;\n      }\n\n      this._$primaryElements.slice(1).forEach(($el) => $el.setAttribute('slot', 'secondary'));\n    });\n  }\n\n  protected _onSecondaryChange(_e: Event) {\n    queueMicrotask(() => {\n      if (!this._$secondaryElements.length || this._$primaryElements.length) {\n        return;\n      }\n\n      this._$secondaryElements.at(0)?.removeAttribute('slot');\n    });\n  }\n\n  /**\n   * The extent of `rect` along a logical axis. The pane axis is vertical on\n   * screen in vertical text, so a physical width would measure the wrong one.\n   */\n  protected _sizeAlong(rect: DOMRect, axis: LogicalAxis): number {\n    return physicalAxis(axis, resolveFlow(this)) === 'x' ? rect.width : rect.height;\n  }\n\n  protected _measureHostSize(axis: 'inline' | 'block'): number {\n    const measuredSize = this._sizeAlong(this.getBoundingClientRect(), axis) / cssZoom(this);\n\n    if (measuredSize > 0) {\n      return Math.ceil(measuredSize);\n    }\n\n    const computedStyle = getComputedStyle(this);\n    const fallbackSize = axis === 'inline' ? computedStyle.inlineSize : computedStyle.blockSize;\n    const parsedFallbackSize = Number.parseFloat(fallbackSize);\n\n    return Number.isFinite(parsedFallbackSize) ? Math.ceil(parsedFallbackSize) : 0;\n  }\n\n  protected _onResize() {\n    const $el = this._$primaryElements.at(0);\n    const prevStyle = this._$primary.style.getPropertyValue('display');\n\n    // Request animation frame to prevent layout paint jank.\n    globalThis.requestAnimationFrame(() => {\n      // Temporarily display the first light DOM element as a direct child for measurement.\n      this._$primary.style.setProperty('display', 'contents');\n\n      const clientRect = $el?.getBoundingClientRect() ?? this.getBoundingClientRect();\n\n      if (this.mode !== 'percent') {\n        const measured =\n          this.orientation === 'horizontal'\n            ? // For horizontal splitters, just take the host width...\n              this._measureHostSize('inline')\n            : // ...otherwise try to use the first lightDOM element's auto height, and cache it\n              this._initialMax ||\n              Math.ceil(this._sizeAlong(clientRect, 'block') / cssZoom(this)) ||\n              this._measureHostSize('block');\n\n        // After initialization, ignore spurious zero measurements (e.g. during\n        // Chromium's layout recalculation triggered by a secondary ResizeObserver\n        // callback). A temporarily-zero result would clamp _value to 0 incorrectly.\n        if (measured > 0 || !this._initialMax) {\n          this._maxValue = measured;\n        }\n      } else {\n        // Percentage max is always just 100%\n        this._maxValue = 100.0;\n      }\n\n      if (!this._initialMax) {\n        this._initialMax = this._maxValue;\n\n        this._setValue(\n          this._valueInitialized\n            ? this._value\n            : (this._hostValue ?? this.defaultValue ?? this._maxValue / 2),\n          false,\n        );\n      } else if (this._hostValue !== undefined) {\n        this._setValue(this._hostValue, false);\n      } else {\n        this._setValue(this.value, false);\n      }\n\n      // Restore previous display mode\n      prevStyle\n        ? this._$primary.style.setProperty('display', prevStyle)\n        : this._$primary.style.removeProperty('display');\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._resizeObserver.observe(this);\n  }\n\n  disconnectedCallback(): void {\n    this._resizeObserver.disconnect();\n    this._activeSnapAnimation?.cancel();\n    this._activeSnapAnimation = null;\n    super.disconnectedCallback();\n  }\n\n  firstUpdated() {\n    this._onResize();\n  }\n\n  protected updated(): void {\n    this._gesture.setOptions({\n      axis: physicalAxis(this._paneAxis, this._flow.flow),\n      target: () => this._$separatorHandle,\n    });\n  }\n\n  render() {\n    // The separator bar's rendered direction, which turns with the text. The\n    // grip dots and resize cursor are physical, so they key off this rather\n    // than the orientation attribute, which names a layout.\n    const bar = renderedOrientation(\n      this.orientation === 'horizontal' ? 'vertical' : 'horizontal',\n      this._flow.flow,\n    );\n\n    const m = this._messages.value;\n    const label = this.label ?? m.label;\n\n    return html`\n      <div\n        id=\"primary\"\n        part=\"primary\"\n        aria-label=${label}\n        style=${`${this._paneAxis === 'inline' ? 'inline' : 'block'}-size: ${this.valueText}`}\n        ?hidden=${this.value === this._minValue}\n      >\n        <slot @slotchange=${this._onPrimaryChange}></slot>\n      </div>\n\n      <div id=\"separator\" part=\"separator\">\n        ${this.collapsible && this._$secondaryElements.length && !this.fixed\n          ? html`<button\n              id=\"collapse-button\"\n              part=\"collapse-button\"\n              aria-label=${this._isCollapsed ? m.expand(label) : m.collapse(label)}\n              aria-expanded=${String(!this._isCollapsed)}\n              aria-controls=\"primary\"\n              @click=${this._onCollapseButtonClick}\n            >\n              ${this._collapseButtonIcon}\n            </button>`\n          : nothing}\n        <div\n          id=\"separator-handle\"\n          role=\"separator\"\n          tabindex=\"0\"\n          part=\"separator-handle\"\n          aria-labelledby=\"primary\"\n          aria-controls=\"primary\"\n          aria-orientation=${bar}\n          data-bar=${bar}\n          aria-valuenow=${this.value}\n          aria-valuetext=${this._accessibleValueText}\n          aria-valuemin=${this._effectiveMin}\n          aria-valuemax=${this._effectiveMax}\n          @keydown=${this._onCollapseKeydown}\n          ${keyNavigation(this._onKeyboardResize)}\n          ${keyInteraction()}\n          ?hidden=${!this._$secondaryElements.length}\n        ></div>\n      </div>\n\n      <aside\n        id=\"secondary\"\n        part=\"secondary\"\n        ?hidden=${!this._$secondaryElements.length || this.value === this._maxValue}\n      >\n        <slot name=\"secondary\" @slotchange=${this._onSecondaryChange}></slot>\n      </aside>\n    `;\n  }\n}\n\nexport default RCSplitter;\n"],"names":["splitterStyles","css","CHEVRON_PATHS","OPPOSITE_SIDE","paneStartSide","axis","flow","reversed","isReversed","physicalAxis","MIN_SWIPE_DISTANCE","DEFAULT_SNAP_DURATION_MS","SNAP_EASING","DEFAULT_SPLITTER_MESSAGES","label","bidiIsolate","_RCSplitter","LitElement","MessagesController","DragGestureController","detail","FlowController","val","oldValue","renderedOrientation","resolveFlow","startSide","points","d","html","dispatch","locale","numberFormat","action","clientRect","alongX","size","fromPhysicalStart","offset","index","behavior","clampedIndex","_detail","delta","logicalDelta","velocity","decisive","restoreValue","findNextSnapIndex","findNearestSnapIndex","point","value","$primary","fromSizeCssPx","cssZoom","toSizeCssPx","property","animation","raw","parseCssTime","_e","$el","rect","measuredSize","computedStyle","fallbackSize","parsedFallbackSize","prevStyle","measured","bar","m","nothing","keyNavigation","keyInteraction","RCSplitter","__decorateClass","state","query","queryAssignedElements"],"mappings":"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"}

package/dist/rc-splitter-define.js

@@ -1,6 +1,8 @@
-import { R as t } from "./rc-splitter-CJTLxYi3.js";
+import { R as t } from "./rc-splitter-_P5HsZI9.js";
+import { D as m } from "./rc-splitter-_P5HsZI9.js";
 customElements.get("rc-splitter") || customElements.define("rc-splitter", t);
 export {
+  m as DEFAULT_SPLITTER_MESSAGES,
   t as RCSplitter
 };
 //# sourceMappingURL=rc-splitter-define.js.map

package/dist/rc-splitter-define.js.map

@@ -1 +1 @@
-{"version":3,"file":"rc-splitter-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCSplitter } from './index.js';\n\ncustomElements.get('rc-splitter') || customElements.define('rc-splitter', RCSplitter);\n\nexport * from './index.js';\n"],"names":["RCSplitter"],"mappings":";AAEA,eAAe,IAAI,aAAa,KAAK,eAAe,OAAO,eAAeA,CAAU;"}
+{"version":3,"file":"rc-splitter-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCSplitter } from './index.js';\n\ncustomElements.get('rc-splitter') || customElements.define('rc-splitter', RCSplitter);\n\nexport * from './index.js';\n"],"names":["RCSplitter"],"mappings":";;AAEA,eAAe,IAAI,aAAa,KAAK,eAAe,OAAO,eAAeA,CAAU;"}

package/dist/rc-splitter.js

@@ -1,5 +1,6 @@
-import { R as e } from "./rc-splitter-CJTLxYi3.js";
+import { D as r, R as t } from "./rc-splitter-_P5HsZI9.js";
 export {
-  e as RCSplitter
+  r as DEFAULT_SPLITTER_MESSAGES,
+  t as RCSplitter
 };
 //# sourceMappingURL=rc-splitter.js.map