@rcarls/rc-splitter 0.6.0 → 0.7.0

package/dist/rc-splitter-CJTLxYi3.js

@@ -1,608 +0,0 @@
-import { css as f, LitElement as m, html as p, nothing as g } from "lit";
-import { property as l, state as c, query as _, queryAssignedElements as v } from "lit/decorators.js";
-import { DragGestureController as y, findNextSnapIndex as b, findNearestSnapIndex as x, keyNavigation as V, keyInteraction as M } from "@rcarls/rc-common";
-const z = f`
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    --rc-splitter-separator-size: 6px;
-
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-  }
-
-  :host([orientation='vertical']) {
-    flex-direction: column;
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  /* because :has(:focus-visible) doesn't work across slot boundary */
-  :host([data-interaction-mode='keyboard']):focus-within {
-    outline: auto;
-  }
-
-  ::slotted(*) {
-    width: 100%;
-    height: 100%;
-  }
-
-  #separator {
-    grid-column: separator;
-    flex: 0 0 var(--rc-splitter-separator-size, 6px);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    background-color: var(
-      --rc-splitter-separator-color,
-      color-mix(in srgb, ButtonBorder 35%, Canvas 65%)
-    );
-    border-left: var(
-      --rc-splitter-separator-border-inline-start,
-      var(--rc-splitter-keyline, 1px solid ButtonBorder)
-    );
-    border-right: var(
-      --rc-splitter-separator-border-inline-end,
-      var(--rc-splitter-keyline, 1px solid ButtonBorder)
-    );
-    /* z-index: 1 as a flex item stacks separator above pane siblings so the
-       ::after touch-target circle (which extends past the strip) is hittable */
-    z-index: 1;
-    /* Required for collapse-button absolute positioning */
-    position: relative;
-
-    :host([orientation='vertical']) & {
-      flex-direction: row;
-      border-left: unset;
-      border-right: unset;
-      border-top: var(
-        --rc-splitter-separator-border-block-start,
-        var(--rc-splitter-keyline, 1px solid ButtonBorder)
-      );
-      border-bottom: var(
-        --rc-splitter-separator-border-block-end,
-        var(--rc-splitter-keyline, 1px solid ButtonBorder)
-      );
-    }
-  }
-
-  #collapse-button {
-    /* Positioned at the start of the separator strip, centered on the cross
-       axis. The button intentionally protrudes into the primary pane so it
-       is visible and hittable at a reasonable size even on narrow strips. */
-    position: absolute;
-    top: var(--rc-splitter-collapse-button-offset, 8px);
-    left: 50%;
-    transform: translateX(-50%);
-    width: var(--rc-splitter-collapse-button-size, 20px);
-    height: var(--rc-splitter-collapse-button-size, 20px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border: 1px solid var(--rc-splitter-collapse-button-border, ButtonBorder);
-    border-radius: 50%;
-    background: var(--rc-splitter-collapse-button-bg, Canvas);
-    color: var(--rc-splitter-collapse-button-color, ButtonText);
-    cursor: pointer;
-    line-height: 1;
-
-    &:hover {
-      background: var(--rc-splitter-collapse-button-hover-bg, ButtonFace);
-    }
-
-    &:focus-visible {
-      outline: 2px solid Highlight;
-      outline-offset: 2px;
-    }
-
-    :host([orientation='vertical']) & {
-      top: 50%;
-      left: var(--rc-splitter-collapse-button-offset, 8px);
-      transform: translateY(-50%);
-    }
-  }
-
-  #separator-handle {
-    touch-action: none;
-    width: 100%;
-    height: var(--rc-splitter-separator-handle-size, 100%);
-    cursor: col-resize;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    /* Required so ::after is positioned relative to this element */
-    position: relative;
-
-    /* ── Visual drag indicator ─────────────────────────────────────────────
-       Default: 3-dot vertical grip (horizontal splitter / vertical bar).
-       Themes override via --rc-splitter-handle-pattern (background-image) and
-       --rc-splitter-handle-fill (background-color). */
-    &::before {
-      content: '';
-      display: block;
-      width: var(--rc-splitter-handle-thickness, 4px);
-      height: 100%;
-      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;
-      transition: background-color var(--rc-splitter-handle-transition, 0ms);
-    }
-
-    /* Hover highlight stays on the visual indicator only, never the full strip */
-    &:hover::before {
-      background-color: var(--rc-splitter-handle-hover-fill, transparent);
-    }
-
-    /* ── Touch target circle ───────────────────────────────────────────────
-       24 px diameter transparent circle, centered on the handle. Invisible
-       and non-interactive for mouse/keyboard. On coarse-pointer (touch)
-       devices the circle becomes hittable, giving a WCAG-compliant touch
-       target without widening the visual separator. */
-    &::after {
-      content: '';
-      position: absolute;
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      pointer-events: none;
-    }
-
-    :host([orientation='vertical']) & {
-      width: var(--rc-splitter-separator-handle-size, 100%);
-      height: 100%;
-      cursor: row-resize;
-
-      /* Horizontal 3-dot grip (vertical splitter / horizontal bar) */
-      &::before {
-        width: 100%;
-        height: var(--rc-splitter-handle-thickness, 4px);
-        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;
-    }
-  }
-
-  /* Activate the touch target circle only on coarse-pointer (touch) devices */
-  @media (any-pointer: coarse) {
-    #separator-handle::after {
-      pointer-events: auto;
-    }
-  }
-
-  #primary,
-  #secondary {
-    overflow: hidden;
-  }
-
-  #primary {
-    grid-column: primary;
-    flex: 0 0 auto;
-  }
-
-  #secondary {
-    grid-column: secondary;
-    flex: 1;
-  }
-`;
-var w = Object.defineProperty, S = Object.getOwnPropertyDescriptor, s = (d, t, e, i) => {
-  for (var r = i > 1 ? void 0 : i ? S(t, e) : t, o = d.length - 1, n; o >= 0; o--)
-    (n = d[o]) && (r = (i ? n(t, e, r) : n(r)) || r);
-  return i && r && w(t, e, r), r;
-};
-const $ = 24, k = 200, C = "cubic-bezier(0.4, 0, 0.2, 1)", u = class u extends m {
-  constructor() {
-    super(...arguments), this.label = "Splitter", 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 y(this, {
-      target: () => this._$separatorHandle,
-      axis: this.orientation === "horizontal" ? "x" : "y",
-      focusOnStart: !0,
-      onStart: (t) => this._onGestureStart(t),
-      onMove: (t) => this._onGestureMove(t),
-      onEnd: (t) => this._onGestureEnd(t),
-      onCancel: () => this._onGestureCancel()
-    }), this._resizeObserver = new ResizeObserver(() => this._onResize());
-  }
-  set value(t) {
-    const e = this._hostValue;
-    this._hostValue = t, this._initialMax && this._setValue(t, !1), this.requestUpdate("value", e);
-  }
-  /** 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(t) {
-    const e = this._defaultValue;
-    this._defaultValue = t, !this._initialMax && this._hostValue === void 0 && t !== void 0 && this._setValue(t, !1), this.requestUpdate("defaultValue", e);
-  }
-  /** 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(t) {
-    if (!this.collapsible || this.fixed || !t.ctrlKey && !t.metaKey)
-      return;
-    (this.orientation === "horizontal" ? t.key === "ArrowLeft" || t.key === "ArrowRight" : t.key === "ArrowUp" || t.key === "ArrowDown") && (t.preventDefault(), t.stopImmediatePropagation(), this._toggleCollapse());
-  }
-  get _collapseButtonIcon() {
-    const e = this.orientation === "horizontal" ? this._isCollapsed ? "M 3 1 L 7 5 L 3 9" : "M 7 1 L 3 5 L 7 9" : this._isCollapsed ? "M 1 3 L 5 7 L 9 3" : "M 1 7 L 5 3 L 9 7";
-    return p`<svg
-      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=${e} />
-    </svg>`;
-  }
-  _setValue(t, e) {
-    const i = this._value;
-    this._value = Math.min(
-      Math.max(Math.round(t / this.step) * this.step, this._effectiveMin),
-      this._effectiveMax
-    ), e && this._value !== i && this.dispatchEvent(
-      new CustomEvent("rc-splitter-change", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: this._value, valueText: this.valueText }
-      })
-    );
-  }
-  _setUserValue(t) {
-    this._valueInitialized = !0, this._hostValue = void 0, this._value > this._effectiveMin && (this._lastValue = this._value), this._setValue(t, !0);
-  }
-  /** A human-readable string representation of the value. */
-  get valueText() {
-    return `${this.value}${this.mode === "percent" ? "%" : "px"}`;
-  }
-  _onKeyboardResize(t) {
-    if (!this.fixed)
-      switch (t) {
-        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(t) {
-    if (this.fixed)
-      return;
-    const e = this.getBoundingClientRect();
-    this.orientation === "vertical" ? this._setUserValue((t.clientY - e.top) / e.height * this._maxValue) : this._setUserValue((t.clientX - e.left) / e.width * 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(t, e = "animated") {
-    const i = this._resolvedSnapPoints();
-    if (!Number.isFinite(t) || i.length === 0)
-      return;
-    const r = Math.max(0, Math.min(Math.trunc(t), i.length - 1));
-    this._settleToValue(i[r], e);
-  }
-  _onGestureStart(t) {
-    this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null, this._gestureStartValue = this.value, this._gestureRestoreValue = this._lastValue;
-  }
-  _onGestureMove(t) {
-    this._onPointerResize({ clientX: t.x, clientY: t.y });
-  }
-  _onGestureEnd(t) {
-    const e = this.orientation === "horizontal" ? t.deltaX : t.deltaY, i = this.orientation === "horizontal" ? t.velocityX : t.velocityY, r = Math.abs(e) >= $ && Math.abs(i) >= this.swipeVelocity;
-    if (r && this.collapsible) {
-      if (i < 0) {
-        const h = this._gestureRestoreValue > this._effectiveMin ? this._gestureRestoreValue : this._gestureStartValue;
-        this._settleToValue(this._effectiveMin, "animated"), this._lastValue = h;
-        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 n = r ? b(o, this._gestureStartValue, i > 0 ? 1 : -1) : x(o, this.value);
-    n >= 0 && this._settleToValue(o[n], "animated");
-  }
-  _onGestureCancel() {
-    this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null;
-  }
-  _resolvedSnapPoints() {
-    return this.snapPoints.trim() ? this.snapPoints.trim().split(/\s+/).map(Number).filter(Number.isFinite).map((t) => Math.min(Math.max(t, this._effectiveMin), this._effectiveMax)).filter((t, e, i) => e === 0 || t !== i[e - 1]) : [];
-  }
-  async _settleToValue(t, e) {
-    const i = this._$primary, r = this.orientation === "horizontal" ? i.getBoundingClientRect().width : i.getBoundingClientRect().height;
-    if (this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null, this._setUserValue(t), await this.updateComplete, e === "instant" || this._reducedMotion?.matches)
-      return;
-    const o = this.orientation === "horizontal" ? i.getBoundingClientRect().width : i.getBoundingClientRect().height;
-    if (r === o)
-      return;
-    const n = this.orientation === "horizontal" ? "width" : "height", h = i.animate(
-      [{ [n]: `${r}px` }, { [n]: `${o}px` }],
-      {
-        duration: this._snapDuration(),
-        easing: C
-      }
-    );
-    this._activeSnapAnimation = h;
-    try {
-      await h.finished;
-    } catch {
-    } finally {
-      this._activeSnapAnimation === h && (this._activeSnapAnimation = null);
-    }
-  }
-  _snapDuration() {
-    const t = getComputedStyle(this).getPropertyValue("--rc-splitter-snap-duration").trim(), e = Number.parseFloat(t);
-    return Number.isFinite(e) ? e : k;
-  }
-  _onPrimaryChange(t) {
-    queueMicrotask(() => {
-      this._$primaryElements.length < 2 || this._$primaryElements.slice(1).forEach((e) => e.setAttribute("slot", "secondary"));
-    });
-  }
-  _onSecondaryChange(t) {
-    queueMicrotask(() => {
-      !this._$secondaryElements.length || this._$primaryElements.length || this._$secondaryElements.at(0)?.removeAttribute("slot");
-    });
-  }
-  _measureHostSize(t) {
-    const e = this.getBoundingClientRect(), i = t === "inline" ? e.width : e.height;
-    if (i > 0)
-      return Math.ceil(i);
-    const r = getComputedStyle(this), o = t === "inline" ? r.width : r.height, n = Number.parseFloat(o);
-    return Number.isFinite(n) ? Math.ceil(n) : 0;
-  }
-  _onResize() {
-    const t = this._$primaryElements.at(0), e = this._$primary.style.getPropertyValue("display");
-    globalThis.requestAnimationFrame(() => {
-      this._$primary.style.setProperty("display", "contents");
-      const i = t?.getBoundingClientRect() ?? this.getBoundingClientRect();
-      if (this.mode !== "percent") {
-        const r = 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(i.height) || this._measureHostSize("block")
-        );
-        (r > 0 || !this._initialMax) && (this._maxValue = r);
-      } 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
-      )), e ? this._$primary.style.setProperty("display", e) : 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: this.orientation === "horizontal" ? "x" : "y",
-      target: () => this._$separatorHandle
-    });
-  }
-  render() {
-    return p`
-      <div
-        id="primary"
-        part="primary"
-        aria-label=${this.label}
-        style=${this.orientation === "horizontal" ? `width: ${this.valueText}` : `height: ${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 ? p`<button
-              id="collapse-button"
-              part="collapse-button"
-              aria-label=${this._isCollapsed ? `Expand ${this.label}` : `Collapse ${this.label}`}
-              aria-expanded=${String(!this._isCollapsed)}
-              aria-controls="primary"
-              @click=${this._onCollapseButtonClick}
-            >
-              ${this._collapseButtonIcon}
-            </button>` : g}
-        <div
-          id="separator-handle"
-          role="separator"
-          tabindex="0"
-          part="separator-handle"
-          aria-labelledby="primary"
-          aria-controls="primary"
-          aria-orientation=${this.orientation === "horizontal" ? "vertical" : "horizontal"}
-          aria-valuenow=${this.value}
-          aria-valuetext=${this.valueText}
-          aria-valuemin=${this._effectiveMin}
-          aria-valuemax=${this._effectiveMax}
-          @keydown=${this._onCollapseKeydown}
-          ${V(this._onKeyboardResize)}
-          ${M()}
-          ?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>
-    `;
-  }
-};
-u.styles = [z];
-let a = u;
-s([
-  l({ type: String })
-], a.prototype, "label", 2);
-s([
-  l({ type: String, reflect: !0 })
-], a.prototype, "orientation", 2);
-s([
-  l({ type: String, reflect: !0 })
-], a.prototype, "mode", 2);
-s([
-  l({ type: Number })
-], a.prototype, "step", 2);
-s([
-  l({ type: Number })
-], a.prototype, "min", 2);
-s([
-  l({ type: Number })
-], a.prototype, "max", 2);
-s([
-  l({ type: Number })
-], a.prototype, "value", 1);
-s([
-  l({ type: Number, attribute: "default-value" })
-], a.prototype, "defaultValue", 1);
-s([
-  c()
-], a.prototype, "_value", 2);
-s([
-  l({ type: Boolean })
-], a.prototype, "fixed", 2);
-s([
-  l({ type: Boolean })
-], a.prototype, "collapsible", 2);
-s([
-  l({ type: String, attribute: "snap-points" })
-], a.prototype, "snapPoints", 2);
-s([
-  l({ type: Number, attribute: "swipe-velocity" })
-], a.prototype, "swipeVelocity", 2);
-s([
-  c()
-], a.prototype, "_minValue", 2);
-s([
-  c()
-], a.prototype, "_maxValue", 2);
-s([
-  c()
-], a.prototype, "_lastValue", 2);
-s([
-  _("#primary", !0)
-], a.prototype, "_$primary", 2);
-s([
-  _("#separator-handle")
-], a.prototype, "_$separatorHandle", 2);
-s([
-  v()
-], a.prototype, "_$primaryElements", 2);
-s([
-  v({ slot: "secondary" })
-], a.prototype, "_$secondaryElements", 2);
-export {
-  a as R
-};
-//# sourceMappingURL=rc-splitter-CJTLxYi3.js.map