@rcarls/rc-splitter 0.2.0 → 0.3.1

package/dist/rc-splitter-BZgnDbmR.js

@@ -0,0 +1,473 @@
+import { css as v, LitElement as _, html as c, nothing as f } from "lit";
+import { property as o, state as h, query as b, queryAssignedElements as u } from "lit/decorators.js";
+import { keyNavigation as m, keyInteraction as y, mouseMove as g } from "@rcarls/rc-common";
+const x = v`
+  *,
+  *::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 {
+    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 V = Object.defineProperty, k = Object.getOwnPropertyDescriptor, r = (d, e, t, s) => {
+  for (var a = s > 1 ? void 0 : s ? k(e, t) : e, n = d.length - 1, l; n >= 0; n--)
+    (l = d[n]) && (a = (s ? l(e, t, a) : l(a)) || a);
+  return s && a && V(e, t, a), a;
+};
+const p = class p extends _ {
+  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._minValue = 0, this._maxValue = 0, this._lastValue = 0, this._initialMax = 0, this._resizeObserver = new ResizeObserver(() => this._onResize());
+  }
+  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;
+    (this.orientation === "horizontal" ? e.key === "ArrowLeft" || e.key === "ArrowRight" : e.key === "ArrowUp" || e.key === "ArrowDown") && (e.preventDefault(), e.stopImmediatePropagation(), this._toggleCollapse());
+  }
+  get _collapseButtonIcon() {
+    const t = 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 c`<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=${t} />
+    </svg>`;
+  }
+  _setValue(e, t) {
+    const s = this._value;
+    this._value = Math.min(
+      Math.max(Math.round(e / this.step) * this.step, this._effectiveMin),
+      this._effectiveMax
+    ), t && this._value !== s && 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);
+  }
+  /** A human-readable string representation of the value. */
+  get valueText() {
+    return `${this.value}${this.mode === "length" ? "px" : "%"}`;
+  }
+  _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 = this.getBoundingClientRect();
+    this.orientation === "vertical" ? this._setUserValue(
+      (e.clientY - t.top) / t.height * this._maxValue
+    ) : this._setUserValue(
+      (e.clientX - t.left) / t.width * this._maxValue
+    );
+  }
+  _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");
+    });
+  }
+  _measureHostSize(e) {
+    const t = this.getBoundingClientRect(), s = e === "inline" ? t.width : t.height;
+    if (s > 0)
+      return Math.ceil(s);
+    const a = getComputedStyle(this), n = e === "inline" ? a.width : a.height, l = Number.parseFloat(n);
+    return Number.isFinite(l) ? Math.ceil(l) : 0;
+  }
+  _onResize() {
+    const e = this._$primaryElements.at(0), t = this._$primary.style.getPropertyValue("display");
+    globalThis.requestAnimationFrame(() => {
+      this._$primary.style.setProperty("display", "contents");
+      const s = e?.getBoundingClientRect() ?? this.getBoundingClientRect();
+      if (this.mode === "length") {
+        const a = 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(s.height) || this._measureHostSize("block")
+        );
+        (a > 0 || !this._initialMax) && (this._maxValue = a);
+      } 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(), super.disconnectedCallback();
+  }
+  firstUpdated() {
+    this._onResize();
+  }
+  render() {
+    return c`
+      <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 ? c`<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>` : f}
+        <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}
+          ${m(this._onKeyboardResize)}
+          ${y()}
+          ${g(this._onPointerResize)}
+          ?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>
+    `;
+  }
+};
+p.styles = [x];
+let i = p;
+r([
+  o({ type: String })
+], i.prototype, "label", 2);
+r([
+  o({ type: String, reflect: !0 })
+], i.prototype, "orientation", 2);
+r([
+  o({ type: String })
+], i.prototype, "mode", 2);
+r([
+  o({ type: Number })
+], i.prototype, "step", 2);
+r([
+  o({ type: Number })
+], i.prototype, "min", 2);
+r([
+  o({ type: Number })
+], i.prototype, "max", 2);
+r([
+  o({ type: Number })
+], i.prototype, "value", 1);
+r([
+  o({ type: Number, attribute: "default-value" })
+], i.prototype, "defaultValue", 1);
+r([
+  h()
+], i.prototype, "_value", 2);
+r([
+  o({ type: Boolean })
+], i.prototype, "fixed", 2);
+r([
+  o({ type: Boolean })
+], i.prototype, "collapsible", 2);
+r([
+  h()
+], i.prototype, "_minValue", 2);
+r([
+  h()
+], i.prototype, "_maxValue", 2);
+r([
+  h()
+], i.prototype, "_lastValue", 2);
+r([
+  b("#primary", !0)
+], i.prototype, "_$primary", 2);
+r([
+  u()
+], i.prototype, "_$primaryElements", 2);
+r([
+  u({ slot: "secondary" })
+], i.prototype, "_$secondaryElements", 2);
+export {
+  i as R
+};
+//# sourceMappingURL=rc-splitter-BZgnDbmR.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-splitter-BZgnDbmR.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(--rc-splitter-separator-color, color-mix(in srgb, ButtonBorder 35%, Canvas 65%));\n    border-left: var(--rc-splitter-separator-border-inline-start, var(--rc-splitter-keyline, 1px solid ButtonBorder));\n    border-right: var(--rc-splitter-separator-border-inline-end, var(--rc-splitter-keyline, 1px solid ButtonBorder));\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-left: unset;\n      border-right: unset;\n      border-top: var(--rc-splitter-separator-border-block-start, var(--rc-splitter-keyline, 1px solid ButtonBorder));\n      border-bottom: var(--rc-splitter-separator-border-block-end, var(--rc-splitter-keyline, 1px solid ButtonBorder));\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    top: var(--rc-splitter-collapse-button-offset, 8px);\n    left: 50%;\n    transform: translateX(-50%);\n    width: var(--rc-splitter-collapse-button-size, 20px);\n    height: 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      top: 50%;\n      left: var(--rc-splitter-collapse-button-offset, 8px);\n      transform: translateY(-50%);\n    }\n  }\n\n  #separator-handle {\n    width: 100%;\n    height: var(--rc-splitter-separator-handle-size, 100%);\n    cursor: col-resize;\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       Default: 3-dot vertical grip (horizontal splitter / 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      width: var(--rc-splitter-handle-thickness, 4px);\n      height: 100%;\n      background-color: var(--rc-splitter-handle-fill, transparent);\n      background-image: var(\n        --rc-splitter-handle-pattern,\n        radial-gradient(circle 1px at 50% calc(50% - 5px), var(--rc-splitter-handle-color, ButtonBorder) 100%, transparent 100%),\n        radial-gradient(circle 1px at 50% 50%, var(--rc-splitter-handle-color, ButtonBorder) 100%, transparent 100%),\n        radial-gradient(circle 1px at 50% calc(50% + 5px), var(--rc-splitter-handle-color, ButtonBorder) 100%, transparent 100%)\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      width: 24px;\n      height: 24px;\n      border-radius: 50%;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      pointer-events: none;\n    }\n\n    :host([orientation='vertical']) & {\n      width: var(--rc-splitter-separator-handle-size, 100%);\n      height: 100%;\n      cursor: row-resize;\n\n      /* Horizontal 3-dot grip (vertical splitter / horizontal bar) */\n      &::before {\n        width: 100%;\n        height: var(--rc-splitter-handle-thickness, 4px);\n        background-image: var(\n          --rc-splitter-handle-pattern,\n          radial-gradient(circle 1px at calc(50% - 5px) 50%, var(--rc-splitter-handle-color, ButtonBorder) 100%, transparent 100%),\n          radial-gradient(circle 1px at 50% 50%, var(--rc-splitter-handle-color, ButtonBorder) 100%, transparent 100%),\n          radial-gradient(circle 1px at calc(50% + 5px) 50%, var(--rc-splitter-handle-color, ButtonBorder) 100%, transparent 100%)\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 {\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from \"lit/decorators.js\";\n\nimport {\n  keyInteraction,\n  keyNavigation,\n  type KeyboardNavigationAction,\n  mouseMove,\n} from \"@rcarls/rc-common\";\n\nimport splitterStyles from \"./rc-splitter.styles\";\n\ntype SplitterOrientation = \"horizontal\" | \"vertical\";\n\ntype SplitterMode = \"length\" | \"percent\";\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"rc-splitter\": RCSplitter;\n  }\n}\n\n/**\n * Resizable pane splitter with pointer, keyboard, and collapse/restore controls, following\n * the WAI-ARIA Window Splitter pattern.\n *\n * Set `orientation=\"vertical\"` for a vertical 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 * @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-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  /** Accessible label for this splitter. Default label is 'Splitter'. */\n  @property({ type: String })\n  label = \"Splitter\";\n\n  /** Splitter orientation, for keyboard navigation and initial sizing. */\n  @property({ type: String, reflect: true })\n  orientation: SplitterOrientation = \"horizontal\";\n\n  /** Determines length units for min, max and step attributes, one of either `length` (default) or `percent` */\n  @property({ type: String })\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(\n      this._isCollapsed ? this._lastValue : this._effectiveMin,\n    );\n  }\n\n  protected _onCollapseButtonClick(): void {\n    this._toggleCollapse();\n  }\n\n  protected _onCollapseKeydown(e: KeyboardEvent): void {\n    if (!this.collapsible || this.fixed) return;\n    if (!e.ctrlKey && !e.metaKey) return;\n\n    const isRelevantKey =\n      this.orientation === \"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  private get _collapseButtonIcon() {\n    const isHorizontal = this.orientation === \"horizontal\";\n    // Chevron points LEFT/UP to collapse (separator moves toward primary),\n    // RIGHT/DOWN to expand (separator moves away from primary).\n    const d = isHorizontal\n      ? this._isCollapsed\n        ? \"M 3 1 L 7 5 L 3 9\"\n        : \"M 7 1 L 3 5 L 7 9\"\n      : this._isCollapsed\n        ? \"M 1 3 L 5 7 L 9 3\"\n        : \"M 1 7 L 5 3 L 9 7\";\n\n    return html`<svg\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  private _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  private _setUserValue(val: number): void {\n    this._valueInitialized = true;\n    this._hostValue = undefined;\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    this._setValue(val, true);\n  }\n\n  @state()\n  private _value: number = 0;\n\n  /** Toggles resizing ability */\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  /** A human-readable string representation of the value. */\n  get valueText() {\n    return `${this.value}${this.mode === \"length\" ? \"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  @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 _resizeObserver = new ResizeObserver(() => this._onResize());\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: MouseEvent) {\n    if (this.fixed) {\n      return;\n    }\n\n    const clientRect = this.getBoundingClientRect();\n\n    if (this.orientation === \"vertical\") {\n      this._setUserValue(\n        ((e.clientY - clientRect.top) / clientRect.height) * this._maxValue,\n      );\n    } else {\n      this._setUserValue(\n        ((e.clientX - clientRect.left) / clientRect.width) * this._maxValue,\n      );\n    }\n  }\n\n  protected _onPrimaryChange(_e: Event) {\n    queueMicrotask(() => {\n      if (this._$primaryElements.length < 2) return;\n\n      this._$primaryElements\n        .slice(1)\n        .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  private _measureHostSize(axis: \"inline\" | \"block\"): number {\n    const clientRect = this.getBoundingClientRect();\n    const measuredSize = axis === \"inline\" ? clientRect.width : clientRect.height;\n\n    if (measuredSize > 0) {\n      return Math.ceil(measuredSize);\n    }\n\n    const computedStyle = getComputedStyle(this);\n    const fallbackSize =\n      axis === \"inline\" ? computedStyle.width : computedStyle.height;\n    const parsedFallbackSize = Number.parseFloat(fallbackSize);\n\n    return Number.isFinite(parsedFallbackSize)\n      ? Math.ceil(parsedFallbackSize)\n      : 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 =\n        el?.getBoundingClientRect() ?? this.getBoundingClientRect();\n\n      if (this.mode === \"length\") {\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(clientRect.height) ||\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        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    super.disconnectedCallback();\n  }\n\n  firstUpdated() {\n    this._onResize();\n  }\n\n  render() {\n    return html`\n      <div\n        id=\"primary\"\n        part=\"primary\"\n        aria-label=${this.label}\n        style=${this.orientation === \"horizontal\"\n          ? `width: ${this.valueText}`\n          : `height: ${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\n                ? `Expand ${this.label}`\n                : `Collapse ${this.label}`}\n              aria-expanded=${String(!this._isCollapsed)}\n              aria-controls=\"primary\"\n              @click=${this._onCollapseButtonClick}\n            >${this._collapseButtonIcon}</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=${this.orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n          aria-valuenow=${this.value}\n          aria-valuetext=${this.valueText}\n          aria-valuemin=${this._effectiveMin}\n          aria-valuemax=${this._effectiveMax}\n          @keydown=${this._onCollapseKeydown}\n          ${keyNavigation(this._onKeyboardResize)}\n          ${keyInteraction()}\n          ${mouseMove(this._onPointerResize)}\n          ?hidden=${!this._$secondaryElements.length}\n        ></div>\n      </div>\n\n      <aside\n        id=\"secondary\"\n        part=\"secondary\"\n        ?hidden=${!this._$secondaryElements.length ||\n        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","_RCSplitter","LitElement","val","oldValue","d","html","dispatch","action","clientRect","_e","el","axis","measuredSize","computedStyle","fallbackSize","parsedFallbackSize","prevStyle","measured","nothing","keyNavigation","keyInteraction","mouseMove","RCSplitter","__decorateClass","property","state","query","queryAssignedElements"],"mappings":"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"}

package/dist/rc-splitter-define.js

@@ -1,4 +1,4 @@
-import { R as t } from "./rc-splitter-CkpiDBPA.js";
+import { R as t } from "./rc-splitter-BZgnDbmR.js";
 customElements.get("rc-splitter") || customElements.define("rc-splitter", t);
 export {
   t as RCSplitter

package/dist/rc-splitter.js

@@ -1,4 +1,4 @@
-import { R as e } from "./rc-splitter-CkpiDBPA.js";
+import { R as e } from "./rc-splitter-BZgnDbmR.js";
 export {
   e as RCSplitter
 };

package/dist/types/packages/rc-splitter/src/rc-splitter.d.ts

@@ -8,19 +8,34 @@ declare global {
     }
 }
 /**
- * An accessible splitter layout component.
+ * Resizable pane splitter with pointer, keyboard, and collapse/restore controls, following
+ * the WAI-ARIA Window Splitter pattern.
  *
  * Set `orientation="vertical"` for a vertical splitter
  *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-splitter rc-splitter docs}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/ WAI-ARIA Window Splitter pattern}
+ *
  * @slot - Primary pane contents
  * @slot secondary - Secondary pane contents (optional)
  *
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
  * @cssprop [--rc-splitter-separator-size=6px] - Thickness of the separator bar
- * @cssprop [--rc-splitter-separator-handle-size=100%] - Length of the drag handle within the separator
+ * @cssprop [--rc-splitter-separator-handle-size=100%] - Length of the drag handle area within the separator (also the length of the visible indicator)
  * @cssprop [--rc-splitter-separator-color=color-mix(in srgb, ButtonBorder 35%, Canvas 65%)] - Separator background color
  * @cssprop [--rc-splitter-keyline=1px solid ButtonBorder] - Shared separator keyline border
- * @cssprop [--rc-splitter-handle-color=ButtonBorder] - Visible handle line color
+ * @cssprop [--rc-splitter-handle-color=ButtonBorder] - Color of the dot grip indicators (default visual)
+ * @cssprop [--rc-splitter-handle-thickness=4px] - Cross-axis size of the visual indicator (dot column width or pill/line thickness)
+ * @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
+ * @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
+ * @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)
+ * @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
+ * @cssprop [--rc-splitter-handle-transition=0ms] - CSS transition duration/easing for the visual indicator's background-color changes
+ * @cssprop [--rc-splitter-collapse-button-size=20px] - Diameter of the collapse/expand toggle button
+ * @cssprop [--rc-splitter-collapse-button-offset=8px] - Distance from the start edge of the separator to the collapse button center
+ * @cssprop [--rc-splitter-collapse-button-bg=Canvas] - Collapse button background color
+ * @cssprop [--rc-splitter-collapse-button-hover-bg=ButtonFace] - Collapse button background color on hover
+ * @cssprop [--rc-splitter-collapse-button-border=ButtonBorder] - Collapse button border color
+ * @cssprop [--rc-splitter-collapse-button-color=ButtonText] - Collapse button icon color
  * @cssprop [--rc-splitter-separator-border-inline-start=1px solid ButtonBorder] - Inline-start border
  * @cssprop [--rc-splitter-separator-border-inline-end=1px solid ButtonBorder] - Inline-end border
  * @cssprop [--rc-splitter-separator-border-block-start=1px solid ButtonBorder] - Block-start border (vertical orientation)
@@ -29,6 +44,7 @@ declare global {
  * @csspart secondary - Secondary pane container
  * @csspart separator - The separator bar
  * @csspart separator-handle - The focusable drag handle
+ * @csspart collapse-button - The collapse/expand toggle button (only rendered when `collapsible` is set)
  */
 export declare class RCSplitter extends LitElement {
     static styles: import('lit').CSSResult[];
@@ -40,8 +56,13 @@ export declare class RCSplitter extends LitElement {
     mode: SplitterMode;
     /** The step size for resizing, in either pixels or percentage points depending on `mode`. */
     step: number;
+    /** Minimum size of the primary pane in current mode units. Defaults to 0. */
+    min: number;
+    /** Maximum size of the primary pane in current mode units. Defaults to the full container size. */
+    max: number | undefined;
     private _defaultValue;
     private _hostValue;
+    private _valueInitialized;
     /** The current splitter value. Host writes update silently. */
     set value(val: number);
     /** The current splitter value, corresponding to the separator position, in either pixels or percentage points depending on `mode`. */
@@ -50,11 +71,21 @@ export declare class RCSplitter extends LitElement {
     set defaultValue(val: number | undefined);
     /** Initial uncontrolled splitter value. */
     get defaultValue(): number | undefined;
+    protected get _effectiveMin(): number;
+    protected get _effectiveMax(): number;
+    /** True once initialized and the primary pane is at its effective minimum. */
+    protected get _isCollapsed(): boolean;
+    protected _toggleCollapse(): void;
+    protected _onCollapseButtonClick(): void;
+    protected _onCollapseKeydown(e: KeyboardEvent): void;
+    private get _collapseButtonIcon();
     private _setValue;
     private _setUserValue;
     private _value;
     /** Toggles resizing ability */
     fixed: boolean;
+    /** Renders a collapse/expand toggle button on the separator. */
+    collapsible: boolean;
     /** A human-readable string representation of the value. */
     get valueText(): string;
     protected _minValue: number;