@rcarls/rc-splitter 0.1.0

package/README.md

@@ -0,0 +1,159 @@
+# `@rcarls/rc-splitter`
+
+A WAI-ARIA compliant resizable pane splitter implementing the [Window Splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/). Supports horizontal and vertical orientations, pixel and percentage modes, collapse/restore via keyboard, and full pointer and keyboard control. Built with [Lit 3](https://lit.dev).
+
+---
+
+## Installation
+
+```bash
+npm install @rcarls/rc-splitter
+```
+
+## Import
+
+```js
+import '@rcarls/rc-splitter';                        // side-effect: registers <rc-splitter>
+import { RCSplitter } from '@rcarls/rc-splitter';    // named class export
+```
+
+---
+
+## Basic usage
+
+Place the primary pane in the default slot and the secondary pane in the `secondary` slot. The splitter takes up the full available space of its container.
+
+```html
+<rc-splitter style="width: 100%; height: 400px;">
+  <div>Primary pane — resizes when you drag the separator</div>
+  <div slot="secondary">Secondary pane — fills remaining space</div>
+</rc-splitter>
+```
+
+Vertical orientation:
+
+```html
+<rc-splitter orientation="vertical" style="width: 100%; height: 600px;">
+  <div>Top pane</div>
+  <div slot="secondary">Bottom pane</div>
+</rc-splitter>
+```
+
+---
+
+## API
+
+### Properties / attributes
+
+| Property | Attribute | Type | Default | Description |
+|---|---|---|---|---|
+| `label` | `label` | `string` | `'Splitter'` | Accessible label applied to the primary pane and used by the separator handle via `aria-labelledby`. |
+| `orientation` | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction. `horizontal` = left/right panes; `vertical` = top/bottom panes. Reflects to attribute. |
+| `mode` | `mode` | `'length' \| 'percent'` | `'length'` | Unit for `value`. `length` = pixels of the primary pane; `percent` = percentage of total container size. |
+| `step` | `step` | `number` | `1` | Keyboard step size in the current unit (px or %). Shift multiplies by 10×. |
+| `value` | — | `number \| null` | `null` | Initial primary pane size. When `null`, the pane uses its natural size until first interaction. Setting via property updates the separator position. |
+| `fixed` | `fixed` | `boolean` | `false` | Disable resizing. The separator is rendered but non-interactive. |
+
+### CSS custom properties
+
+| Property | Default | Description |
+|---|---|---|
+| `--rc-splitter-separator-size` | `6px` | Thickness of the separator bar |
+| `--rc-splitter-separator-handle-size` | `100%` | Length of the drag handle within the separator (set to a smaller value to create a centred grab handle) |
+| `--rc-splitter-separator-color` | `ButtonFace` | Background color of the separator bar |
+| `--rc-splitter-separator-border-inline-start` | `1px solid ButtonBorder` | Inline-start (left in LTR) border of the separator |
+| `--rc-splitter-separator-border-inline-end` | `1px solid ButtonBorder` | Inline-end (right in LTR) border of the separator |
+| `--rc-splitter-separator-border-block-start` | `1px solid ButtonBorder` | Block-start (top) border when `orientation="vertical"` |
+| `--rc-splitter-separator-border-block-end` | `1px solid ButtonBorder` | Block-end (bottom) border when `orientation="vertical"` |
+
+All color defaults use CSS system color keywords so they adapt automatically to the user's color scheme and forced-color modes.
+
+### CSS parts
+
+| Part | Element | Description |
+|---|---|---|
+| `primary` | `div#primary` | Primary pane container |
+| `secondary` | `aside#secondary` | Secondary pane container |
+| `separator` | `div#separator` | The separator bar |
+| `separator-handle` | `div[role="separator"]` inside separator | The focusable drag handle (narrower than the bar if `--rc-splitter-separator-handle-size` is set) |
+
+### Slots
+
+| Slot | Description |
+|---|---|
+| *(default)* | Primary pane. Its inline-size (or block-size when vertical) is set by the splitter. |
+| `secondary` | Secondary pane. Fills remaining space via `flex: 1`. |
+
+### Events
+
+| Event | Bubbles | Cancelable | Detail | When |
+|---|---|---|---|---|
+| `rc-splitter-change` | Yes (composed) | No | `{ value: number, valueText: string }` | Separator position changes (on every pointer move or key press) |
+
+### Read-only getters
+
+```ts
+value: number | null            // Current primary pane size in the current mode unit
+valueText: string               // Human-readable value string (e.g. "240px" or "40%")
+```
+
+---
+
+## Keyboard behaviour
+
+Focus the separator handle (click or Tab), then:
+
+| Key | Action |
+|---|---|
+| `ArrowRight` / `ArrowDown` | Increase primary pane by `step` (horizontal: right; vertical: down) |
+| `ArrowLeft` / `ArrowUp` | Decrease primary pane by `step` |
+| `Shift` + Arrow | Multiply step by 10× |
+| `Home` | Collapse primary pane to zero |
+| `End` | Expand primary pane to fill all available space |
+| `Enter` | Restore last non-collapsed size (if currently collapsed) |
+
+---
+
+## ARIA
+
+The separator handle implements the WAI-ARIA slider role pattern:
+
+| Attribute | Where | Value |
+|---|---|---|
+| `role="separator"` | Separator handle `div` | — |
+| `aria-label` | Primary pane | Value of `label` property |
+| `aria-orientation` | Separator handle | `"horizontal"` or `"vertical"` |
+| `aria-valuenow` | Separator handle | Current numeric value |
+| `aria-valuemin` | Separator handle | `0` |
+| `aria-valuemax` | Separator handle | Container width or height in current mode units |
+| `aria-valuetext` | Separator handle | Human-readable string (e.g. `"240px"`) |
+| `aria-controls` | Separator handle | `"primary"` — ID of the primary pane |
+| `aria-labelledby` | Separator handle | `"primary"` — uses the primary pane as label context |
+| `tabindex="0"` | Separator handle | Always focusable |
+
+---
+
+## Example: percentage mode with a styled separator
+
+```html
+<rc-splitter
+  mode="percent"
+  style="
+    width: 100%;
+    height: 500px;
+    --rc-splitter-separator-size: 4px;
+    --rc-splitter-separator-color: ButtonFace;
+    --rc-splitter-separator-border-inline-start: none;
+    --rc-splitter-separator-border-inline-end: none;
+  "
+>
+  <nav>Sidebar</nav>
+  <div slot="secondary">Main content</div>
+</rc-splitter>
+```
+
+---
+
+## Browser support
+
+All modern browsers. Requires Web Components support (Chrome 67+, Firefox 63+, Safari 12.1+) and ResizeObserver (Chrome 64+, Firefox 69+, Safari 13.1+).

package/dist/custom-elements.json

@@ -0,0 +1,499 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-splitter",
+          "declaration": {
+            "name": "RCSplitter",
+            "module": "/src/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/rc-splitter"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-splitter.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An accessible splitter layout component.\n\nSet `orientation=\"vertical\"` for a vertical splitter",
+          "name": "RCSplitter",
+          "cssProperties": [
+            {
+              "description": "Thickness of the separator bar",
+              "name": "--rc-splitter-separator-size",
+              "default": "6px"
+            },
+            {
+              "description": "Length of the drag handle within the separator",
+              "name": "--rc-splitter-separator-handle-size",
+              "default": "100%"
+            },
+            {
+              "description": "Separator background color",
+              "name": "--rc-splitter-separator-color",
+              "default": "color-mix(in srgb, ButtonBorder 35%, Canvas 65%)"
+            },
+            {
+              "description": "Shared separator keyline border",
+              "name": "--rc-splitter-keyline",
+              "default": "1px solid ButtonBorder"
+            },
+            {
+              "description": "Visible handle line color",
+              "name": "--rc-splitter-handle-color",
+              "default": "ButtonBorder"
+            },
+            {
+              "description": "Inline-start border",
+              "name": "--rc-splitter-separator-border-inline-start",
+              "default": "1px solid ButtonBorder"
+            },
+            {
+              "description": "Inline-end border",
+              "name": "--rc-splitter-separator-border-inline-end",
+              "default": "1px solid ButtonBorder"
+            },
+            {
+              "description": "Block-start border (vertical orientation)",
+              "name": "--rc-splitter-separator-border-block-start",
+              "default": "1px solid ButtonBorder"
+            },
+            {
+              "description": "Block-end border (vertical orientation)",
+              "name": "--rc-splitter-separator-border-block-end",
+              "default": "1px solid ButtonBorder"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "Primary pane container",
+              "name": "primary"
+            },
+            {
+              "description": "Secondary pane container",
+              "name": "secondary"
+            },
+            {
+              "description": "The separator bar",
+              "name": "separator"
+            },
+            {
+              "description": "The focusable drag handle",
+              "name": "separator-handle"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Primary pane contents",
+              "name": ""
+            },
+            {
+              "description": "Secondary pane contents (optional)",
+              "name": "secondary"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Splitter\"",
+              "description": "Accessible label for this splitter. Default label is 'Splitter'.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "SplitterOrientation"
+              },
+              "default": "\"horizontal\"",
+              "description": "Splitter orientation, for keyboard navigation and initial sizing.",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "SplitterMode"
+              },
+              "default": "\"length\"",
+              "description": "Determines length units for min, max and step attributes, one of either `length` (default) or `percent`",
+              "attribute": "mode"
+            },
+            {
+              "kind": "field",
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "The step size for resizing, in either pixels or percentage points depending on `mode`.",
+              "attribute": "step"
+            },
+            {
+              "kind": "field",
+              "name": "_defaultValue",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_hostValue",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "description": "The current splitter value, corresponding to the separator position, in either pixels or percentage points depending on `mode`.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "defaultValue",
+              "description": "Initial uncontrolled splitter value.",
+              "attribute": "default-value"
+            },
+            {
+              "kind": "method",
+              "name": "_setValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "val",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "dispatch",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_setUserValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "val",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_value",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "fixed",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Toggles resizing ability",
+              "attribute": "fixed"
+            },
+            {
+              "kind": "field",
+              "name": "valueText",
+              "description": "A human-readable string representation of the value.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_minValue",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "protected",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_maxValue",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "protected",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_lastValue",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "protected",
+              "default": "0",
+              "description": "Last valid value, for collapse functionality."
+            },
+            {
+              "kind": "field",
+              "name": "_$primary",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "_$primaryElements",
+              "type": {
+                "text": "Array<HTMLElement>"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "_$secondaryElements",
+              "type": {
+                "text": "Array<HTMLElement>"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "_initialMax",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "protected",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_resizeObserver",
+              "privacy": "protected",
+              "default": "new ResizeObserver(() => this._onResize())"
+            },
+            {
+              "kind": "method",
+              "name": "_onKeyboardResize",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "action",
+                  "type": {
+                    "text": "KeyboardNavigationAction"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onPointerResize",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onPrimaryChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "_e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onSecondaryChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "_e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_measureHostSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "axis",
+                  "type": {
+                    "text": "\"inline\" | \"block\""
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onResize",
+              "privacy": "protected"
+            }
+          ],
+          "events": [
+            {
+              "name": "rc-splitter-change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Splitter\"",
+              "description": "Accessible label for this splitter. Default label is 'Splitter'.",
+              "fieldName": "label"
+            },
+            {
+              "name": "orientation",
+              "type": {
+                "text": "SplitterOrientation"
+              },
+              "default": "\"horizontal\"",
+              "description": "Splitter orientation, for keyboard navigation and initial sizing.",
+              "fieldName": "orientation"
+            },
+            {
+              "name": "mode",
+              "type": {
+                "text": "SplitterMode"
+              },
+              "default": "\"length\"",
+              "description": "Determines length units for min, max and step attributes, one of either `length` (default) or `percent`",
+              "fieldName": "mode"
+            },
+            {
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "The step size for resizing, in either pixels or percentage points depending on `mode`.",
+              "fieldName": "step"
+            },
+            {
+              "name": "value",
+              "description": "The current splitter value, corresponding to the separator position, in either pixels or percentage points depending on `mode`.",
+              "fieldName": "value"
+            },
+            {
+              "name": "default-value",
+              "description": "Initial uncontrolled splitter value.",
+              "fieldName": "defaultValue"
+            },
+            {
+              "name": "fixed",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Toggles resizing ability",
+              "fieldName": "fixed"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "rc-splitter",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCSplitter",
+          "declaration": {
+            "name": "RCSplitter",
+            "module": "src/rc-splitter.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "RCSplitter",
+            "module": "src/rc-splitter.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/demo.css

@@ -0,0 +1,85 @@
+*, *::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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,314 @@
+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

@@ -0,0 +1 @@
+{"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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"}

package/dist/rc-splitter-define.js

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

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

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

package/dist/rc-splitter.js

@@ -0,0 +1,5 @@
+import { R as e } from "./rc-splitter-CkpiDBPA.js";
+export {
+  e as RCSplitter
+};
+//# sourceMappingURL=rc-splitter.js.map

package/dist/rc-splitter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-splitter.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1 @@
+export * from './index.js';

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

@@ -0,0 +1 @@
+export * from './rc-splitter';

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

@@ -0,0 +1,80 @@
+import { LitElement } from 'lit';
+import { KeyboardNavigationAction } from '@rcarls/rc-common';
+type SplitterOrientation = "horizontal" | "vertical";
+type SplitterMode = "length" | "percent";
+declare global {
+    interface HTMLElementTagNameMap {
+        "rc-splitter": RCSplitter;
+    }
+}
+/**
+ * An accessible splitter layout component.
+ *
+ * Set `orientation="vertical"` for a vertical splitter
+ *
+ * @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-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-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)
+ * @cssprop [--rc-splitter-separator-border-block-end=1px solid ButtonBorder] - Block-end border (vertical orientation)
+ * @csspart primary - Primary pane container
+ * @csspart secondary - Secondary pane container
+ * @csspart separator - The separator bar
+ * @csspart separator-handle - The focusable drag handle
+ */
+export declare class RCSplitter extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Accessible label for this splitter. Default label is 'Splitter'. */
+    label: string;
+    /** Splitter orientation, for keyboard navigation and initial sizing. */
+    orientation: SplitterOrientation;
+    /** Determines length units for min, max and step attributes, one of either `length` (default) or `percent` */
+    mode: SplitterMode;
+    /** The step size for resizing, in either pixels or percentage points depending on `mode`. */
+    step: number;
+    private _defaultValue;
+    private _hostValue;
+    /** 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`. */
+    get value(): number;
+    /** Initial uncontrolled splitter value. */
+    set defaultValue(val: number | undefined);
+    /** Initial uncontrolled splitter value. */
+    get defaultValue(): number | undefined;
+    private _setValue;
+    private _setUserValue;
+    private _value;
+    /** Toggles resizing ability */
+    fixed: boolean;
+    /** A human-readable string representation of the value. */
+    get valueText(): string;
+    protected _minValue: number;
+    protected _maxValue: number;
+    /** Last valid value, for collapse functionality. */
+    protected _lastValue: number;
+    protected _$primary: HTMLDivElement;
+    protected _$primaryElements: Array<HTMLElement>;
+    protected _$secondaryElements: Array<HTMLElement>;
+    protected _initialMax: number;
+    protected _resizeObserver: ResizeObserver;
+    protected _onKeyboardResize(action: KeyboardNavigationAction): void;
+    protected _onPointerResize(e: MouseEvent): void;
+    protected _onPrimaryChange(_e: Event): void;
+    protected _onSecondaryChange(_e: Event): void;
+    private _measureHostSize;
+    protected _onResize(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+export default RCSplitter;

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

@@ -0,0 +1,2 @@
+export declare const splitterStyles: import('lit').CSSResult;
+export default splitterStyles;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@rcarls/rc-splitter",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "description": "Headless resizable pane splitter web component built with Lit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-splitter"
+  },
+  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-splitter.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-splitter/src/index.d.ts",
+        "default": "./dist/rc-splitter.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-splitter/src/define.d.ts",
+        "default": "./dist/rc-splitter-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-splitter/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-splitter-define.js"
+  ],
+  "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"
+  },
+  "dependencies": {
+    "@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",
+    "rollup": "^4.60.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}