@cas-smartdesign/splitter 0.1.0

package/dist/splitter.d.ts

@@ -0,0 +1,53 @@
+import { LitElement } from "lit";
+export declare class Splitter extends LitElement {
+    static readonly ID = "sd-splitter";
+    ratio: [number, number];
+    private _root;
+    private _leftPane;
+    private _leftSlot;
+    private _rightSlot;
+    private _splitterSlot;
+    private _defaultSplitter;
+    private _leftSlotted?;
+    private _rightSlotted?;
+    private _customSplitter?;
+    private _customSplitterCleanup?;
+    _hovering: boolean;
+    _dragging: boolean;
+    private _resizeObserver;
+    private _startX;
+    private _startLeftWidth;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onLeftSlotChange;
+    private _onRightSlotChange;
+    private _onSplitterSlotChange;
+    private _assignSlotted;
+    private _enterDragArea;
+    private _leaveDragArea;
+    private _handleResize;
+    private _startDrag;
+    private _doDrag;
+    private _endDrag;
+    private _preventContextMenu;
+    private _recomputeRatio;
+    private _getAvailableWidth;
+    private _getSplitter;
+    private _getMinMaxWidth;
+    private _setRatio;
+    render(): import("lit").TemplateResult<1>;
+    static get styles(): import("lit").CSSResult[];
+}
+export declare class SplitterResizedEvent extends Event {
+    readonly ratio: [number, number];
+    constructor(ratio: [number, number]);
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sd-splitter": Splitter;
+    }
+    interface HTMLElementEventMap {
+        "sd-splitter-resized": SplitterResizedEvent;
+    }
+}

package/dist/splitter.mjs

@@ -0,0 +1,177 @@
+import { LitElement as m, html as c, css as S, unsafeCSS as y } from "lit";
+import { property as w, query as n, state as h } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
+import { styleMap as p } from "lit/directives/style-map.js";
+const x = ":host{display:block;--sd-splitter-gap: 0px;--sd-splitter-cursor: ew-resize;--sd-splitter-width: 0px;--sd-splitter-color: transparent;--sd-splitter-handle-width: 5px;--sd-splitter-handle-color: #1467ba}#root{display:flex;height:100%;width:100%;justify-content:space-between;gap:var(--sd-splitter-gap)}.pane{overflow:hidden}::slotted([slot=left]),::slotted([slot=right]){width:100%;height:100%}::slotted([slot=splitter]){flex:none;touch-action:none}#default-splitter{flex:none;touch-action:none;width:var(--sd-splitter-width);position:relative;background-color:var(--sd-splitter-color)}#default-splitter-handle{position:absolute;top:0;left:calc((var(--sd-splitter-width) - var(--sd-splitter-handle-width)) / 2);right:0;bottom:0;width:var(--sd-splitter-handle-width);background-color:var(--sd-splitter-handle-color);opacity:0;transition:opacity .2s}#default-splitter-drag-area{position:absolute;top:0;left:-3px;width:calc(var(--sd-splitter-handle-width) + 6px);bottom:0}#default-splitter-handle.hover,#default-splitter-handle.drag{opacity:1}#default-splitter-handle.hover{transition-delay:.5s}#default-splitter-handle.drag{transition:none}";
+var C = Object.defineProperty, D = Object.getOwnPropertyDescriptor, r = (d, t, e, s) => {
+  for (var o = s > 1 ? void 0 : s ? D(t, e) : t, l = d.length - 1, a; l >= 0; l--)
+    (a = d[l]) && (o = (s ? a(t, e, o) : a(o)) || o);
+  return s && o && C(t, e, o), o;
+};
+const g = class g extends m {
+  constructor() {
+    super(), this.ratio = [1, 1], this._hovering = !1, this._dragging = !1, this._startX = 0, this._startLeftWidth = 0, this._onLeftSlotChange = () => {
+      this._assignSlotted("left", this._leftSlot, (t) => {
+        this._leftSlotted = t;
+      });
+    }, this._onRightSlotChange = () => {
+      this._assignSlotted("right", this._rightSlot, (t) => {
+        this._rightSlotted = t;
+      });
+    }, this._onSplitterSlotChange = () => {
+      if (this._customSplitterCleanup && (this._customSplitterCleanup(), this._customSplitterCleanup = void 0), this._assignSlotted("splitter", this._splitterSlot, (t) => {
+        this._customSplitter = t;
+      }), this._customSplitter) {
+        const t = this._customSplitter.querySelector(".sd-splitter-drag-area") || this._customSplitter;
+        t.addEventListener("pointerenter", this._enterDragArea), t.addEventListener("pointerleave", this._leaveDragArea), t.addEventListener("pointerdown", this._startDrag), this._customSplitterCleanup = () => {
+          t.removeEventListener("pointerenter", this._enterDragArea), t.removeEventListener("pointerleave", this._leaveDragArea), t.removeEventListener("pointerdown", this._startDrag);
+        };
+      }
+    }, this._enterDragArea = () => {
+      this._hovering = !0, this.setAttribute("hovering", "");
+    }, this._leaveDragArea = () => {
+      this._hovering = !1, this._dragging || this.removeAttribute("hovering");
+    }, this._startDrag = (t) => {
+      this._dragging = !0, this.setAttribute("dragging", ""), this._startX = t.clientX, this._startLeftWidth = this._leftPane.offsetWidth, window.addEventListener("pointermove", this._doDrag), window.addEventListener("pointerup", this._endDrag), window.addEventListener("contextmenu", this._preventContextMenu), window.document.body.style.cursor = getComputedStyle(this).getPropertyValue("--sd-splitter-cursor"), t.preventDefault();
+    }, this._doDrag = (t) => {
+      if (!this._dragging)
+        return;
+      const e = t.clientX - this._startX;
+      this._recomputeRatio(this._startLeftWidth + e);
+    }, this._endDrag = () => {
+      this._dragging = !1, this.removeAttribute("dragging"), this._hovering || this.removeAttribute("hovering"), window.removeEventListener("pointermove", this._doDrag), window.removeEventListener("pointerup", this._endDrag), window.removeEventListener("contextmenu", this._preventContextMenu), window.document.body.style.removeProperty("cursor");
+    }, this._preventContextMenu = (t) => {
+      t.preventDefault();
+    }, this._resizeObserver = new ResizeObserver(() => {
+      this._handleResize();
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._resizeObserver.unobserve(this);
+  }
+  _assignSlotted(t, e, s) {
+    e.assignedElements().length > 1 && console.warn(`At most one element can be assigned to slot '${t}' in sd-splitter.`), s(e.assignedElements()[0]);
+  }
+  _handleResize() {
+    !this._leftSlotted || !this._rightSlotted || this._recomputeRatio(this._leftPane.offsetWidth);
+  }
+  _recomputeRatio(t) {
+    const e = this._getAvailableWidth();
+    if (e <= 0)
+      return;
+    const [s, o] = this._getMinMaxWidth(this._leftSlot), [l, a] = this._getMinMaxWidth(this._rightSlot), u = Math.max(s, e - a), v = Math.min(o, e - l), _ = Math.max(u, Math.min(t, v)), f = e - _;
+    this._setRatio(_, f);
+  }
+  _getAvailableWidth() {
+    const t = parseFloat(getComputedStyle(this._root).getPropertyValue("gap")) || 0;
+    return this.offsetWidth - this._getSplitter().offsetWidth - 2 * t;
+  }
+  _getSplitter() {
+    return this._customSplitter || this._defaultSplitter;
+  }
+  _getMinMaxWidth(t) {
+    const e = getComputedStyle(t.assignedElements()[0]);
+    return [parseFloat(e.minWidth) || 0, parseFloat(e.maxWidth) || 1 / 0];
+  }
+  _setRatio(t, e) {
+    const s = t + e;
+    if (s === 0)
+      return [0.5, 0.5];
+    this.ratio = [t / s, e / s], this.dispatchEvent(new L(this.ratio));
+  }
+  render() {
+    if (!this._leftSlotted || !this._rightSlotted)
+      return c`
+                <div id="root">
+                    <slot name="left" @slotchange=${this._onLeftSlotChange} ?hidden=${!this._leftSlotted}></slot>
+                    <slot name="splitter" @slotchange=${this._onSplitterSlotChange} ?hidden=${!0}></slot>
+                    <slot name="right" @slotchange=${this._onRightSlotChange} ?hidden=${!this._rightSlotted}></slot>
+                </div>
+            `;
+    const [t, e] = this.ratio, s = this._hovering ? getComputedStyle(this).getPropertyValue("--sd-splitter-cursor") : "inherit";
+    return c`
+            <div id="root" style=${p({ cursor: s })}>
+                <div id="left" class="pane" style=${p({ flex: t + " " + t + " 0" })}>
+                    <slot name="left" @slotchange=${this._onLeftSlotChange}></slot>
+                </div>
+                <slot name="splitter" @slotchange=${this._onSplitterSlotChange}>
+                    <div id="default-splitter">
+                        <div
+                            id="default-splitter-handle"
+                            class=${b({ hover: this._hovering, drag: this._dragging })}
+                        >
+                            <div
+                                id="default-splitter-drag-area"
+                                @pointerenter=${this._enterDragArea}
+                                @pointerleave=${this._leaveDragArea}
+                                @pointerdown=${this._startDrag}
+                            ></div>
+                        </div>
+                    </div>
+                </slot>
+                <div id="right" class="pane" style=${p({ flex: e + " " + e + " 0" })}>
+                    <slot name="right" @slotchange=${this._onRightSlotChange}></slot>
+                </div>
+            </div>
+        `;
+  }
+  static get styles() {
+    return [
+      S`
+                ${y(x)}
+            `
+    ];
+  }
+};
+g.ID = "sd-splitter";
+let i = g;
+r([
+  w({ type: Array, reflect: !0 })
+], i.prototype, "ratio", 2);
+r([
+  n("#root", !0)
+], i.prototype, "_root", 2);
+r([
+  n("#left")
+], i.prototype, "_leftPane", 2);
+r([
+  n('slot[name="left"]')
+], i.prototype, "_leftSlot", 2);
+r([
+  n('slot[name="right"]')
+], i.prototype, "_rightSlot", 2);
+r([
+  n('slot[name="splitter"]')
+], i.prototype, "_splitterSlot", 2);
+r([
+  n("#default-splitter")
+], i.prototype, "_defaultSplitter", 2);
+r([
+  h()
+], i.prototype, "_leftSlotted", 2);
+r([
+  h()
+], i.prototype, "_rightSlotted", 2);
+r([
+  h()
+], i.prototype, "_customSplitter", 2);
+r([
+  h()
+], i.prototype, "_hovering", 2);
+r([
+  h()
+], i.prototype, "_dragging", 2);
+customElements.get(i.ID) || customElements.define(i.ID, i);
+class L extends Event {
+  constructor(t) {
+    super("sd-splitter-resized", { bubbles: !0, composed: !0 }), this.ratio = t;
+  }
+}
+export {
+  i as Splitter,
+  L as SplitterResizedEvent
+};
+//# sourceMappingURL=splitter.mjs.map

package/dist/splitter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.mjs","sources":["../splitter.ts"],"sourcesContent":["import { LitElement, html, css, unsafeCSS } from \"lit\";\nimport { customElement, property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport style from \"./style.scss?inline\";\n\nexport class Splitter extends LitElement {\n    public static readonly ID = \"sd-splitter\";\n\n    @property({ type: Array, reflect: true })\n    ratio: [number, number] = [1, 1];\n\n    @query(\"#root\", true)\n    private _root: HTMLElement;\n    @query(\"#left\")\n    private _leftPane: HTMLElement;\n    @query('slot[name=\"left\"]')\n    private _leftSlot: HTMLSlotElement;\n    @query('slot[name=\"right\"]')\n    private _rightSlot: HTMLSlotElement;\n    @query('slot[name=\"splitter\"]')\n    private _splitterSlot: HTMLSlotElement;\n    @query(\"#default-splitter\")\n    private _defaultSplitter: HTMLElement;\n\n    @state()\n    private _leftSlotted?: HTMLElement;\n    @state()\n    private _rightSlotted?: HTMLElement;\n    @state()\n    private _customSplitter?: HTMLElement;\n    private _customSplitterCleanup?: () => void;\n\n    @state()\n    _hovering: boolean = false;\n    @state()\n    _dragging: boolean = false;\n\n    private _resizeObserver: ResizeObserver;\n    private _startX = 0;\n    private _startLeftWidth = 0;\n\n    constructor() {\n        super();\n        this._resizeObserver = new ResizeObserver(() => {\n            this._handleResize();\n        });\n    }\n\n    connectedCallback() {\n        super.connectedCallback();\n        this._resizeObserver.observe(this);\n    }\n\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        this._resizeObserver.unobserve(this);\n    }\n\n    private _onLeftSlotChange = () => {\n        this._assignSlotted(\"left\", this._leftSlot, (element) => {\n            this._leftSlotted = element;\n        });\n    };\n\n    private _onRightSlotChange = () => {\n        this._assignSlotted(\"right\", this._rightSlot, (element) => {\n            this._rightSlotted = element;\n        });\n    };\n\n    private _onSplitterSlotChange = () => {\n        if (this._customSplitterCleanup) {\n            this._customSplitterCleanup();\n            this._customSplitterCleanup = undefined;\n        }\n        this._assignSlotted(\"splitter\", this._splitterSlot, (element) => {\n            this._customSplitter = element;\n        });\n        if (this._customSplitter) {\n            const dragArea = this._customSplitter.querySelector(\".sd-splitter-drag-area\") || this._customSplitter;\n            dragArea.addEventListener(\"pointerenter\", this._enterDragArea);\n            dragArea.addEventListener(\"pointerleave\", this._leaveDragArea);\n            dragArea.addEventListener(\"pointerdown\", this._startDrag);\n            this._customSplitterCleanup = () => {\n                dragArea.removeEventListener(\"pointerenter\", this._enterDragArea);\n                dragArea.removeEventListener(\"pointerleave\", this._leaveDragArea);\n                dragArea.removeEventListener(\"pointerdown\", this._startDrag);\n            };\n        }\n    };\n\n    private _assignSlotted(slotName: string, slot: HTMLSlotElement, assignment: (HTMLElement) => void) {\n        const numAssignedElements = slot.assignedElements().length;\n        if (numAssignedElements > 1) {\n            console.warn(`At most one element can be assigned to slot '${slotName}' in sd-splitter.`);\n        }\n        assignment(slot.assignedElements()[0] as HTMLElement);\n    }\n\n    private _enterDragArea = () => {\n        this._hovering = true;\n        this.setAttribute(\"hovering\", \"\");\n    };\n\n    private _leaveDragArea = () => {\n        this._hovering = false;\n        if (!this._dragging) {\n            this.removeAttribute(\"hovering\");\n        }\n    };\n\n    private _handleResize() {\n        if (!this._leftSlotted || !this._rightSlotted) {\n            return;\n        }\n        this._recomputeRatio(this._leftPane.offsetWidth);\n    }\n\n    private _startDrag = (e: PointerEvent) => {\n        this._dragging = true;\n        this.setAttribute(\"dragging\", \"\");\n        this._startX = e.clientX;\n        this._startLeftWidth = this._leftPane.offsetWidth;\n        window.addEventListener(\"pointermove\", this._doDrag);\n        window.addEventListener(\"pointerup\", this._endDrag);\n        window.addEventListener(\"contextmenu\", this._preventContextMenu);\n        window.document.body.style.cursor = getComputedStyle(this).getPropertyValue(\"--sd-splitter-cursor\");\n        e.preventDefault();\n    };\n\n    private _doDrag = (e: PointerEvent) => {\n        if (!this._dragging) {\n            return;\n        }\n        const deltaX = e.clientX - this._startX;\n        this._recomputeRatio(this._startLeftWidth + deltaX);\n    };\n\n    private _endDrag = () => {\n        this._dragging = false;\n        this.removeAttribute(\"dragging\");\n        if (!this._hovering) {\n            this.removeAttribute(\"hovering\");\n        }\n        window.removeEventListener(\"pointermove\", this._doDrag);\n        window.removeEventListener(\"pointerup\", this._endDrag);\n        window.removeEventListener(\"contextmenu\", this._preventContextMenu);\n        window.document.body.style.removeProperty(\"cursor\");\n    };\n\n    private _preventContextMenu = (e: PointerEvent) => {\n        e.preventDefault();\n    };\n\n    private _recomputeRatio(leftWidth: number) {\n        const availableWidth = this._getAvailableWidth();\n        if (availableWidth <= 0) {\n            return;\n        }\n        const [minLeft, maxLeft] = this._getMinMaxWidth(this._leftSlot);\n        const [minRight, maxRight] = this._getMinMaxWidth(this._rightSlot);\n        const effectiveMinLeft = Math.max(minLeft, availableWidth - maxRight);\n        const effectiveMaxLeft = Math.min(maxLeft, availableWidth - minRight);\n        const newLeftWidth = Math.max(effectiveMinLeft, Math.min(leftWidth, effectiveMaxLeft));\n        const newRightWidth = availableWidth - newLeftWidth;\n        this._setRatio(newLeftWidth, newRightWidth);\n    }\n\n    private _getAvailableWidth(): number {\n        const gap = parseFloat(getComputedStyle(this._root).getPropertyValue(\"gap\")) || 0;\n        return this.offsetWidth - this._getSplitter().offsetWidth - 2 * gap;\n    }\n\n    private _getSplitter(): HTMLElement {\n        return this._customSplitter || this._defaultSplitter;\n    }\n\n    private _getMinMaxWidth(slot: HTMLSlotElement): [number, number] {\n        const style = getComputedStyle(slot.assignedElements()[0]);\n        return [parseFloat(style.minWidth) || 0, parseFloat(style.maxWidth) || Infinity];\n    }\n\n    private _setRatio(leftWidth: number, rightWidth: number) {\n        const sum = leftWidth + rightWidth;\n        if (sum === 0) {\n            return [0.5, 0.5];\n        }\n        this.ratio = [leftWidth / sum, rightWidth / sum];\n        this.dispatchEvent(new SplitterResizedEvent(this.ratio));\n    }\n\n    render() {\n        if (!this._leftSlotted || !this._rightSlotted) {\n            return html`\n                <div id=\"root\">\n                    <slot name=\"left\" @slotchange=${this._onLeftSlotChange} ?hidden=${!this._leftSlotted}></slot>\n                    <slot name=\"splitter\" @slotchange=${this._onSplitterSlotChange} ?hidden=${true}></slot>\n                    <slot name=\"right\" @slotchange=${this._onRightSlotChange} ?hidden=${!this._rightSlotted}></slot>\n                </div>\n            `;\n        }\n        const [leftRatio, rightRatio] = this.ratio;\n        const cursor = this._hovering ? getComputedStyle(this).getPropertyValue(\"--sd-splitter-cursor\") : \"inherit\";\n        return html`\n            <div id=\"root\" style=${styleMap({ cursor })}>\n                <div id=\"left\" class=\"pane\" style=${styleMap({ flex: leftRatio + \" \" + leftRatio + \" 0\" })}>\n                    <slot name=\"left\" @slotchange=${this._onLeftSlotChange}></slot>\n                </div>\n                <slot name=\"splitter\" @slotchange=${this._onSplitterSlotChange}>\n                    <div id=\"default-splitter\">\n                        <div\n                            id=\"default-splitter-handle\"\n                            class=${classMap({ hover: this._hovering, drag: this._dragging })}\n                        >\n                            <div\n                                id=\"default-splitter-drag-area\"\n                                @pointerenter=${this._enterDragArea}\n                                @pointerleave=${this._leaveDragArea}\n                                @pointerdown=${this._startDrag}\n                            ></div>\n                        </div>\n                    </div>\n                </slot>\n                <div id=\"right\" class=\"pane\" style=${styleMap({ flex: rightRatio + \" \" + rightRatio + \" 0\" })}>\n                    <slot name=\"right\" @slotchange=${this._onRightSlotChange}></slot>\n                </div>\n            </div>\n        `;\n    }\n\n    static get styles() {\n        return [\n            css`\n                ${unsafeCSS(style)}\n            `,\n        ];\n    }\n}\n\nif (!customElements.get(Splitter.ID)) {\n    customElements.define(Splitter.ID, Splitter);\n}\n\nexport class SplitterResizedEvent extends Event {\n    readonly ratio: [number, number];\n    constructor(ratio: [number, number]) {\n        super(\"sd-splitter-resized\", { bubbles: true, composed: true });\n        this.ratio = ratio;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        \"sd-splitter\": Splitter;\n    }\n    interface HTMLElementEventMap {\n        \"sd-splitter-resized\": SplitterResizedEvent;\n    }\n}\n"],"names":["_Splitter","LitElement","element","dragArea","e","deltaX","slotName","slot","assignment","leftWidth","availableWidth","minLeft","maxLeft","minRight","maxRight","effectiveMinLeft","effectiveMaxLeft","newLeftWidth","newRightWidth","gap","style","rightWidth","sum","SplitterResizedEvent","html","leftRatio","rightRatio","cursor","styleMap","classMap","css","unsafeCSS","Splitter","__decorateClass","property","query","state","ratio"],"mappings":"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"}

package/npm-third-party-licenses.json

@@ -0,0 +1,192 @@
+{
+    "@cypress/vite-dev-server@5.0.7": {
+        "licenses": "MIT",
+        "repository": "https://github.com/cypress-io/cypress",
+        "licenseUrl": "https://github.com/cypress-io/cypress/tree/develop/npm/vite-dev-server#readme"
+    },
+    "@rollup/plugin-node-resolve@15.2.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/rollup/plugins",
+        "licenseUrl": "https://github.com/rollup/plugins/raw/HEAD/LICENSE"
+    },
+    "@types/node@20.10.6": {
+        "licenses": "MIT",
+        "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
+        "licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
+    },
+    "@types/postcss-prefix-selector@1.16.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
+        "licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
+    },
+    "@typescript-eslint/eslint-plugin@6.17.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/typescript-eslint/typescript-eslint",
+        "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
+    },
+    "@typescript-eslint/parser@6.17.0": {
+        "licenses": "BSD-2-Clause",
+        "repository": "https://github.com/typescript-eslint/typescript-eslint",
+        "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
+    },
+    "@vitest/coverage-v8@1.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitest-dev/vitest",
+        "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
+    },
+    "@vitest/ui@1.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitest-dev/vitest",
+        "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
+    },
+    "axe-core@4.8.3": {
+        "licenses": "MPL-2.0",
+        "repository": "https://github.com/dequelabs/axe-core",
+        "licenseUrl": "https://github.com/dequelabs/axe-core/raw/HEAD/LICENSE"
+    },
+    "cypress-axe@1.5.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/component-driven/cypress-axe",
+        "licenseUrl": "https://github.com/component-driven/cypress-axe/raw/HEAD/License.md"
+    },
+    "cypress-real-events@1.13.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/dmtrKovalenko/cypress-real-events",
+        "licenseUrl": "https://github.com/dmtrKovalenko/cypress-real-events"
+    },
+    "cypress@13.6.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/cypress-io/cypress",
+        "licenseUrl": "https://cypress.io"
+    },
+    "esbuild@0.19.11": {
+        "licenses": "MIT",
+        "repository": "https://github.com/evanw/esbuild",
+        "licenseUrl": "https://github.com/evanw/esbuild/raw/HEAD/LICENSE.md"
+    },
+    "eslint-config-google@0.14.0": {
+        "licenses": "Apache-2.0",
+        "repository": "https://github.com/google/eslint-config-google",
+        "licenseUrl": "https://github.com/google/eslint-config-google/raw/HEAD/LICENSE"
+    },
+    "eslint-config-prettier@9.1.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/prettier/eslint-config-prettier",
+        "licenseUrl": "https://github.com/prettier/eslint-config-prettier/raw/HEAD/LICENSE"
+    },
+    "eslint@8.56.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/eslint/eslint",
+        "licenseUrl": "https://github.com/eslint/eslint/raw/HEAD/LICENSE"
+    },
+    "github-markdown-css@5.5.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/sindresorhus/github-markdown-css",
+        "licenseUrl": "https://github.com/sindresorhus/github-markdown-css/raw/HEAD/license"
+    },
+    "highlight.js@11.9.0": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/highlightjs/highlight.js",
+        "licenseUrl": "https://github.com/highlightjs/highlight.js/raw/HEAD/LICENSE"
+    },
+    "junit-report-builder@3.1.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/davidparsson/junit-report-builder",
+        "licenseUrl": "https://github.com/davidparsson/junit-report-builder/raw/HEAD/LICENSE"
+    },
+    "lint-staged@15.2.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/okonet/lint-staged",
+        "licenseUrl": "https://github.com/okonet/lint-staged/raw/HEAD/LICENSE"
+    },
+    "lit@2.8.0": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/lit/lit",
+        "licenseUrl": "https://github.com/lit/lit/raw/HEAD/LICENSE"
+    },
+    "marked@11.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/markedjs/marked",
+        "licenseUrl": "https://github.com/markedjs/marked/raw/HEAD/LICENSE.md"
+    },
+    "postcss-prefix-selector@1.16.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/RadValentin/postcss-prefix-selector",
+        "licenseUrl": "https://github.com/RadValentin/postcss-prefix-selector/raw/HEAD/LICENSE"
+    },
+    "postcss@8.4.32": {
+        "licenses": "MIT",
+        "repository": "https://github.com/postcss/postcss",
+        "licenseUrl": "https://github.com/postcss/postcss/raw/HEAD/LICENSE"
+    },
+    "prettier@3.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/prettier/prettier",
+        "licenseUrl": "https://github.com/prettier/prettier/raw/HEAD/LICENSE"
+    },
+    "resolve-pkg@2.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/sindresorhus/resolve-pkg",
+        "licenseUrl": "https://github.com/sindresorhus/resolve-pkg/raw/HEAD/license"
+    },
+    "sass@1.69.6": {
+        "licenses": "MIT",
+        "repository": "https://github.com/sass/dart-sass",
+        "licenseUrl": "https://github.com/sass/dart-sass/raw/HEAD/LICENSE"
+    },
+    "stylelint-config-recommended-scss@14.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint-scss/stylelint-config-recommended-scss",
+        "licenseUrl": "https://github.com/stylelint-scss/stylelint-config-recommended-scss/raw/HEAD/LICENSE"
+    },
+    "stylelint-config-standard@36.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint/stylelint-config-standard",
+        "licenseUrl": "https://github.com/stylelint/stylelint-config-standard/raw/HEAD/LICENSE"
+    },
+    "stylelint-scss@6.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint-scss/stylelint-scss",
+        "licenseUrl": "https://github.com/stylelint-scss/stylelint-scss/raw/HEAD/LICENSE"
+    },
+    "stylelint@16.1.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint/stylelint",
+        "licenseUrl": "https://github.com/stylelint/stylelint/raw/HEAD/LICENSE"
+    },
+    "tsup@8.0.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/egoist/tsup",
+        "licenseUrl": "https://github.com/egoist/tsup/raw/HEAD/LICENSE"
+    },
+    "turbo@1.11.2": {
+        "licenses": "MPL-2.0",
+        "repository": "https://github.com/vercel/turbo",
+        "licenseUrl": "https://github.com/vercel/turbo/raw/HEAD/LICENSE"
+    },
+    "typescript@5.3.3": {
+        "licenses": "Apache-2.0",
+        "repository": "https://github.com/Microsoft/TypeScript",
+        "licenseUrl": "https://github.com/Microsoft/TypeScript/raw/HEAD/LICENSE.txt"
+    },
+    "vite-tsconfig-paths@4.2.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/aleclarson/vite-tsconfig-paths",
+        "licenseUrl": "https://github.com/aleclarson/vite-tsconfig-paths/raw/HEAD/LICENSE"
+    },
+    "vite@5.0.10": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitejs/vite",
+        "licenseUrl": "https://github.com/vitejs/vite/raw/HEAD/LICENSE.md"
+    },
+    "vitest@1.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitest-dev/vitest",
+        "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE.md"
+    },
+    "yargs@17.7.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/yargs/yargs",
+        "licenseUrl": "https://github.com/yargs/yargs/raw/HEAD/LICENSE"
+    }
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@cas-smartdesign/splitter",
+  "version": "0.1.0",
+  "description": "A draggable splitter layout for displaying two panels side by side",
+  "main": "dist/splitter-with-externals.js",
+  "module": "dist/splitter.mjs",
+  "license": "SEE LICENSE IN LICENSE",
+  "types": "dist/splitter.d.ts",
+  "dependencies": {
+    "lit": "^2.8.0"
+  },
+  "devDependencies": {
+    "@cas-smartdesign/license-generator": "^1.6.3",
+    "@cas-smartdesign/element-preview": "^0.2.2"
+  },
+  "files": [
+    "dist",
+    "npm-third-party-licenses.json"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "version": "pnpm version",
+    "generate-declaration": "tsc -p tsconfig.types.json",
+    "build:no-license": "vite build && pnpm generate-declaration && vite build --mode documentation",
+    "build": "pnpm generate-license && pnpm build:no-license",
+    "watch": "vite build --watch",
+    "dev": "vite",
+    "generate-license": "sd-license-generator --r ../../"
+  }
+}

package/readme.md

@@ -0,0 +1,72 @@
+# @cas-smartdesign/splitter
+
+A draggable splitter layout for displaying 2 panels side by side.
+
+An initial ratio can be configured but the user is able to move the
+splitter and therefore resize the panels.
+
+The splitter takes the `min-width` and `max-width` CSS styles on the
+slotted elements into account but might not be able to uphold all size
+restrictions at the same time.
+
+## Slots
+
+- `left`
+  - The left panel.
+  - Supports at most one assigned element.
+- `right`
+  - The right panel.
+  - Supports at most one assigned element.
+- `splitter`
+  - Can be used to assigned a custom splitter element.
+  - Supports at most one assigned element.
+  - The assigned splitter element should have a fixed width.
+  - The assigned splitter element can contain an element with the class `sd-splitter-drag-area`.
+    This element is then used for dragging the splitter.
+    If there is no such element, then the entire splitter element serves as the drag area.
+
+## Attributes
+
+- `ratio` **_[number, number] (default=[1, 1])_**
+  - A tuple of 2 numbers defining the width ratio of the 2 panels.
+    This attribute is kept in sync with the actual ratio by the
+    component implementation.
+- `hovering` **_boolean_ (default=false)**
+  - Read-only attribute to indicate when the cursor is hovering over the splitter's drag area.
+  - Useful for styling custom splitters.
+- `dragging` **_boolean_ (default=false)**
+  - Read-only attribute to indicate when the splitter is being dragged.
+  - Useful for styling custom splitters.
+
+## Properties
+
+- `ratio`
+  - Reflects the corresponding attribute.
+
+## CSS Custom Properties
+
+The following custom properties are always considered:
+
+- `--sd-splitter-gap`
+  - Additional gap separating the splitter from the left and right panels (default: 0px).
+- `--sd-splitter-cursor`
+  - The cursor to display when the user interacts with the splitter (default: ew-resize).
+
+The following custom properties only affect the default splitter (i.e., when the `splitter` slot is not assigned):
+
+- `--sd-splitter-width`
+  - The visible width of the splitter between the 2 panels (default: 0px).
+- `--sd-splitter-color`
+  - The splitter color in case its width is set to a non-zero value (default: transparent).
+- `--sd-splitter-handle-width`
+  - The width of the handle which the user has to drag for moving the splitter (default: 5px).
+- `--sd-splitter-handle-color`
+  - The color of the handle when the user interacts with it, i.e., during hover and drag (default: #1467ba).
+
+## Custom events
+
+- `sd-splitter-resized`
+  - Fired when the ratio is changed / updated. This is generally the case when
+    1. The component is rendered for the 1st time.
+    2. The size of the overall splitter layout changes.
+    3. The user drags the splitter.