@rcarls/rc-splitter 0.2.0 → 0.3.1

package/package.json

@@ -3,14 +3,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
-  "description": "Headless resizable pane splitter web component built with Lit",
+  "version": "0.3.1",
+  "description": "Resizable pane splitter with pointer, keyboard, and collapse/restore controls.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
     "directory": "packages/rc-splitter"
   },
-  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-splitter",
   "license": "MIT",
   "type": "module",
   "files": [
@@ -37,21 +37,18 @@
   ],
   "customElements": "dist/custom-elements.json",
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build && cem analyze",
     "cem:analyze": "cem analyze",
     "preview": "vite preview",
-    "test:browser": "vitest",
-    "test:browser:chrome": "vitest --project=chromium",
-    "test:browser:firefox": "vitest --project=firefox",
-    "yalc:publish": "yalc publish --push"
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
   },
   "dependencies": {
-    "@rcarls/rc-common": "workspace:^"
+    "@rcarls/rc-common": "workspace:*"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",
-    "@guanghechen/rollup-plugin-copy": "^6.0.9",
     "@vitest/browser-playwright": "4.1.5",
     "lit": "^3.0.0",
     "playwright": "^1.56.0",

package/dist/demo.css

@@ -1,85 +0,0 @@
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-:root {
-  color-scheme: light dark;
-  --rc-accent: Highlight; /* Chrome doesn't support AccentColor on the open web */
-}
-
-@supports (color: AccentColor) {
-  :root {
-    --rc-accent: AccentColor;
-  }
-}
-
-[data-theme="light"] { color-scheme: light; }
-[data-theme="dark"]  { color-scheme: dark;  }
-
-[data-theme="solarized-light"] {
-  color-scheme: light;
-  --rc-surface: #fdf6e3;
-  --rc-text:    #657b83;
-  --rc-border:  1px solid #93a1a1;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .12);
-}
-
-[data-theme="solarized-dark"] {
-  color-scheme: dark;
-  --rc-surface: #002b36;
-  --rc-text:    #839496;
-  --rc-border:  1px solid #586e75;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .3);
-}
-
-body {
-  font-family: system-ui, sans-serif;
-  margin: 0;
-}
-
-.demo-page {
-  max-width: 60rem;
-  margin: 0 auto;
-  padding: 2rem 1.5rem;
-}
-
-.demo-controls {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid ButtonBorder;
-}
-
-.demo-controls .demo-title {
-  flex: 1;
-}
-
-.demo-controls h1 {
-  margin: 0 0 0.15rem;
-  font-size: 1.5rem;
-}
-
-.demo-controls a {
-  font-size: 0.8rem;
-}
-
-.demo-section {
-  margin-bottom: 2rem;
-}
-
-.demo-section h2 {
-  margin: 0 0 0.5rem;
-}
-
-.theme-picker {
-  padding: 0.35em 0.75em;
-  font-family: inherit;
-  font-size: 0.8rem;
-  cursor: pointer;
-  border: 1px solid ButtonBorder;
-  border-radius: 4px;
-  background: Canvas;
-  color: CanvasText;
-}

package/dist/demo.js

@@ -1,40 +0,0 @@
-const THEMES = ['', 'light', 'dark', 'solarized-light', 'solarized-dark'];
-const LABELS = ['Auto', 'Light', 'Dark', 'Solarized ☀', 'Solarized ☾'];
-
-const stored = localStorage.getItem('rc-demo-theme') ?? '';
-applyTheme(stored);
-
-function applyTheme(theme) {
-  if (theme) {
-    document.documentElement.dataset.theme = theme;
-  } else {
-    delete document.documentElement.dataset.theme;
-  }
-}
-
-function currentIndex() {
-  const current = document.documentElement.dataset.theme ?? '';
-  const idx = THEMES.indexOf(current);
-  return idx === -1 ? 0 : idx;
-}
-
-function updateButtons() {
-  const label = LABELS[currentIndex()];
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.textContent = label;
-  });
-}
-
-window.cycleTheme = function () {
-  const next = THEMES[(currentIndex() + 1) % THEMES.length];
-  applyTheme(next);
-  localStorage.setItem('rc-demo-theme', next);
-  updateButtons();
-};
-
-document.addEventListener('DOMContentLoaded', () => {
-  updateButtons();
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.addEventListener('click', window.cycleTheme);
-  });
-});

package/dist/rc-splitter-CkpiDBPA.js

@@ -1,314 +0,0 @@
-import { css as c, LitElement as _, html as m } from "lit";
-import { property as l, state as h, query as y, queryAssignedElements as d } from "lit/decorators.js";
-import { keyNavigation as v, mouseMove as b } from "@rcarls/rc-common";
-const f = c`
-  *,
-  *::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) doens'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));
-
-    :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));
-    }
-  }
-
-  #separator-handle {
-    width: 100%;
-    height: var(--rc-splitter-separator-handle-size, 100%);
-    background:
-      linear-gradient(
-        to bottom,
-        transparent,
-        transparent calc(50% - 1px),
-        var(--rc-splitter-handle-color, ButtonBorder) calc(50% - 1px),
-        var(--rc-splitter-handle-color, ButtonBorder) calc(50% + 1px),
-        transparent calc(50% + 1px),
-        transparent
-      );
-    cursor: col-resize;
-
-    :host([orientation='vertical']) & {
-      width: var(--rc-splitter-separator-handle-size, 100%);
-      height: 100%;
-      background:
-        linear-gradient(
-          to right,
-          transparent,
-          transparent calc(50% - 1px),
-          var(--rc-splitter-handle-color, ButtonBorder) calc(50% - 1px),
-          var(--rc-splitter-handle-color, ButtonBorder) calc(50% + 1px),
-          transparent calc(50% + 1px),
-          transparent
-        );
-      cursor: row-resize;
-    }
-
-    :host([fixed]) {
-      pointer-events: none;
-    }
-  }
-
-  #primary,
-  #secondary {
-    overflow: hidden;
-  }
-
-  #primary {
-    grid-column: primary;
-    flex: 0 0 auto;
-  }
-
-  #secondary {
-    grid-column: secondary;
-    flex: 1;
-  }
-`;
-var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (p, e, t, a) => {
-  for (var s = a > 1 ? void 0 : a ? g(e, t) : e, n = p.length - 1, o; n >= 0; n--)
-    (o = p[n]) && (s = (a ? o(e, t, s) : o(s)) || s);
-  return a && s && x(e, t, s), s;
-};
-const u = class u extends _ {
-  constructor() {
-    super(...arguments), this.label = "Splitter", this.orientation = "horizontal", this.mode = "length", this.step = 1, this._value = 0, this.fixed = !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;
-  }
-  _setValue(e, t) {
-    const a = this._value;
-    this._lastValue = a, this._value = Math.min(
-      Math.max(Math.round(e / this.step) * this.step, this._minValue),
-      this._maxValue
-    ), t && this._value !== a && this.dispatchEvent(
-      new CustomEvent("rc-splitter-change", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: this._value, valueText: this.valueText }
-      })
-    );
-  }
-  _setUserValue(e) {
-    this._hostValue = void 0, 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 "start":
-          this._setUserValue(0);
-          break;
-        case "end":
-          this._setUserValue(this._maxValue);
-          break;
-        case "toggle":
-          this._setUserValue(this.value === 0 ? this._lastValue : 0);
-          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(), a = e === "inline" ? t.width : t.height;
-    if (a > 0)
-      return Math.ceil(a);
-    const s = getComputedStyle(this), n = e === "inline" ? s.width : s.height, o = Number.parseFloat(n);
-    return Number.isFinite(o) ? Math.ceil(o) : 0;
-  }
-  _onResize() {
-    const e = this._$primaryElements.at(0), t = this._$primary.style.getPropertyValue("display");
-    globalThis.requestAnimationFrame(() => {
-      this._$primary.style.setProperty("display", "contents");
-      const a = e?.getBoundingClientRect() ?? this.getBoundingClientRect();
-      this.mode === "length" ? this._maxValue = 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(a.height) || this._measureHostSize("block")
-      ) : 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._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 m`
-      <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">
-        <div
-          id="separator-handle"
-          role="separator"
-          tabindex="0"
-          part="separator-handle"
-          aria-labelledby="primary"
-          aria-controls="primary"
-          aria-orientation=${this.orientation}
-          aria-valuenow=${this.value}
-          aria-valuetext=${this.valueText}
-          aria-valuemin=${this._minValue}
-          aria-valuemax=${this._maxValue}
-          ${v(this._onKeyboardResize)}
-          ${b(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>
-    `;
-  }
-};
-u.styles = [f];
-let r = u;
-i([
-  l({ type: String })
-], r.prototype, "label", 2);
-i([
-  l({ type: String, reflect: !0 })
-], r.prototype, "orientation", 2);
-i([
-  l({ type: String })
-], r.prototype, "mode", 2);
-i([
-  l({ type: Number })
-], r.prototype, "step", 2);
-i([
-  l({ type: Number })
-], r.prototype, "value", 1);
-i([
-  l({ type: Number, attribute: "default-value" })
-], r.prototype, "defaultValue", 1);
-i([
-  h()
-], r.prototype, "_value", 2);
-i([
-  l({ type: Boolean })
-], r.prototype, "fixed", 2);
-i([
-  h()
-], r.prototype, "_minValue", 2);
-i([
-  h()
-], r.prototype, "_maxValue", 2);
-i([
-  h()
-], r.prototype, "_lastValue", 2);
-i([
-  y("#primary", !0)
-], r.prototype, "_$primary", 2);
-i([
-  d()
-], r.prototype, "_$primaryElements", 2);
-i([
-  d({ slot: "secondary" })
-], r.prototype, "_$secondaryElements", 2);
-export {
-  r as R
-};
-//# sourceMappingURL=rc-splitter-CkpiDBPA.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"rc-splitter-CkpiDBPA.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) doens'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\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  #separator-handle {\n    width: 100%;\n    height: var(--rc-splitter-separator-handle-size, 100%);\n    background:\n      linear-gradient(\n        to bottom,\n        transparent,\n        transparent calc(50% - 1px),\n        var(--rc-splitter-handle-color, ButtonBorder) calc(50% - 1px),\n        var(--rc-splitter-handle-color, ButtonBorder) calc(50% + 1px),\n        transparent calc(50% + 1px),\n        transparent\n      );\n    cursor: col-resize;\n\n    :host([orientation='vertical']) & {\n      width: var(--rc-splitter-separator-handle-size, 100%);\n      height: 100%;\n      background:\n        linear-gradient(\n          to right,\n          transparent,\n          transparent calc(50% - 1px),\n          var(--rc-splitter-handle-color, ButtonBorder) calc(50% - 1px),\n          var(--rc-splitter-handle-color, ButtonBorder) calc(50% + 1px),\n          transparent calc(50% + 1px),\n          transparent\n        );\n      cursor: row-resize;\n    }\n\n    :host([fixed]) {\n      pointer-events: none;\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 } from \"lit\";\nimport {\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from \"lit/decorators.js\";\n\nimport {\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 * An accessible splitter layout component.\n *\n * Set `orientation=\"vertical\"` for a vertical splitter\n *\n * @slot - Primary pane contents\n * @slot secondary - Secondary pane contents (optional)\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/\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 within the separator\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] - Visible handle line 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 */\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  private _defaultValue: number | undefined;\n  private _hostValue: number | undefined;\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  private _setValue(val: number, dispatch: boolean): void {\n    const oldValue = this._value;\n    this._lastValue = oldValue;\n\n    this._value = Math.min(\n      Math.max(Math.round(val / this.step) * this.step, this._minValue),\n      this._maxValue,\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._hostValue = undefined;\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  /** 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 \"start\":\n        this._setUserValue(0);\n        break;\n      case \"end\":\n        this._setUserValue(this._maxValue);\n        break;\n      case \"toggle\":\n        this._setUserValue(this.value === 0 ? this._lastValue : 0);\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        this._maxValue =\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      } 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._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        <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}\n          aria-valuenow=${this.value}\n          aria-valuetext=${this.valueText}\n          aria-valuemin=${this._minValue}\n          aria-valuemax=${this._maxValue}\n          ${keyNavigation(this._onKeyboardResize)}\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","dispatch","action","clientRect","_e","el","axis","measuredSize","computedStyle","fallbackSize","parsedFallbackSize","prevStyle","html","keyNavigation","mouseMove","RCSplitter","__decorateClass","property","state","query","queryAssignedElements"],"mappings":"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"}