@brandsync/wc 1.13.0 → 1.15.0

package/dist/collection/components/bs-split-pane/bs-split-pane.cmp.test.js

@@ -0,0 +1,107 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const mount = (props = {}, panes = 3) => render(h("div", { style: { width: '900px', height: '400px' } }, h("bs-split-pane", { ...props }, h("div", { slot: "pane-1" }, "One"), h("div", { slot: "pane-2" }, "Two"), panes === 3 && h("div", { slot: "pane-3" }, "Three"))));
+const size = (el, axis = 'width') => el.getBoundingClientRect()[axis];
+describe('bs-split-pane', () => {
+    it('renders one divider per gap between panes, with separator semantics', async () => {
+        const { root } = await mount();
+        const split = root.querySelector('bs-split-pane');
+        const dividers = split.shadowRoot.querySelectorAll('[part="divider"]');
+        expect(dividers.length).toBe(2);
+        expect(dividers[0]).toEqualAttribute('role', 'separator');
+        expect(dividers[0]).toEqualAttribute('aria-orientation', 'vertical');
+        expect(dividers[0]).toEqualAttribute('aria-label', 'Resize panes');
+        expect(dividers[0]).toEqualAttribute('tabindex', '0');
+        expect(split.shadowRoot.querySelectorAll('[part~="pane"]').length).toBe(3);
+    });
+    it('follows the filled slots: two panes means one divider', async () => {
+        const { root } = await mount({}, 2);
+        const split = root.querySelector('bs-split-pane');
+        expect(split.shadowRoot.querySelectorAll('[part="divider"]').length).toBe(1);
+    });
+    it('uses horizontal dividers when vertical', async () => {
+        const { root } = await mount({ orientation: 'vertical' });
+        const split = root.querySelector('bs-split-pane');
+        expect(split.shadowRoot.querySelector('[part="divider"]')).toEqualAttribute('aria-orientation', 'horizontal');
+    });
+    it('gives the first pane its fixed size and shrinks it to the rail when collapsed', async () => {
+        const { root, waitForChanges } = await mount();
+        const split = root.querySelector('bs-split-pane');
+        const first = split.shadowRoot.querySelector('[part~="pane-1"]');
+        expect(Math.round(size(first))).toBe(333);
+        split.setAttribute('collapsed', '');
+        await waitForChanges();
+        expect(Math.round(size(first))).toBe(106);
+    });
+    it('resizes the first pane with arrow keys and emits bsResize', async () => {
+        const { root, waitForChanges } = await mount();
+        const split = root.querySelector('bs-split-pane');
+        const events = [];
+        split.addEventListener('bsResize', (e) => events.push(e.detail));
+        const first = split.shadowRoot.querySelector('[part~="pane-1"]');
+        const divider = split.shadowRoot.querySelector('[part="divider"]');
+        divider.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true }));
+        await waitForChanges();
+        expect(Math.round(size(first))).toBe(349);
+        divider.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', shiftKey: true, bubbles: true, cancelable: true }));
+        await waitForChanges();
+        expect(Math.round(size(first))).toBe(285);
+        expect(events.length).toBe(2);
+        expect(events[1][0]).toBe(285);
+    });
+    it('clamps to the minimum size with Home', async () => {
+        const { root, waitForChanges } = await mount();
+        const split = root.querySelector('bs-split-pane');
+        const first = split.shadowRoot.querySelector('[part~="pane-1"]');
+        const divider = split.shadowRoot.querySelector('[part="divider"]');
+        divider.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true, cancelable: true }));
+        await waitForChanges();
+        expect(Math.round(size(first))).toBe(96);
+    });
+    it('resizes by dragging with the pointer', async () => {
+        const { root, waitForChanges } = await mount();
+        const split = root.querySelector('bs-split-pane');
+        const first = split.shadowRoot.querySelector('[part~="pane-1"]');
+        const divider = split.shadowRoot.querySelector('[part="divider"]');
+        const fire = (type, clientX) => divider.dispatchEvent(new PointerEvent(type, { clientX, pointerId: 1, bubbles: true, cancelable: true }));
+        // setPointerCapture throws for synthetic pointer ids; the component only needs the move/up events.
+        divider.setPointerCapture = () => { };
+        fire('pointerdown', 340);
+        fire('pointermove', 440);
+        await waitForChanges();
+        expect(Math.round(size(first))).toBe(433);
+        fire('pointerup', 440);
+        await waitForChanges();
+        expect(Math.round(size(first))).toBe(433);
+    });
+    it('toggles collapsed with Enter on the first divider and emits bsCollapsedChange', async () => {
+        const { root, waitForChanges } = await mount();
+        const split = root.querySelector('bs-split-pane');
+        const events = [];
+        split.addEventListener('bsCollapsedChange', (e) => events.push(e.detail));
+        const divider = split.shadowRoot.querySelector('[part="divider"]');
+        divider.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
+        await waitForChanges();
+        expect(split.collapsed).toBe(true);
+        expect(split).toHaveAttribute('collapsed');
+        expect(events).toEqual([true]);
+    });
+    it('is not focusable and ignores keys when resizable is false', async () => {
+        const { root, waitForChanges } = await mount({ resizable: false });
+        const split = root.querySelector('bs-split-pane');
+        const first = split.shadowRoot.querySelector('[part~="pane-1"]');
+        const divider = split.shadowRoot.querySelector('[part="divider"]');
+        expect(divider).not.toHaveAttribute('tabindex');
+        divider.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true }));
+        await waitForChanges();
+        expect(Math.round(size(first))).toBe(333);
+    });
+    it('follows dark mode: slotted text and panes use the dark tokens', async () => {
+        const { root } = await render(h("div", { "data-theme": "dark", style: { width: '600px', height: '300px' } }, h("bs-split-pane", null, h("div", { slot: "pane-1" }, "One"), h("div", { slot: "pane-2" }, "Two"))));
+        const split = root.querySelector('bs-split-pane');
+        const pane = split.shadowRoot.querySelector('[part~="pane-1"]');
+        const container = split.shadowRoot.querySelector('.bs-split-pane');
+        expect(getComputedStyle(root.querySelector('[slot="pane-1"]')).color).toBe('rgb(255, 255, 255)');
+        expect(getComputedStyle(pane).backgroundColor).not.toBe('rgb(255, 255, 255)');
+        expect(getComputedStyle(container).color).toBe('rgb(255, 255, 255)');
+    });
+});

package/dist/collection/components/bs-split-pane/bs-split-pane.css

@@ -0,0 +1,108 @@
+:host {
+  display: block;
+  height: 100%;
+  min-height: 0;
+  --bs-split-pane-radius: var(--bs-border-radius-100);
+  --bs-split-pane-bg: var(--bs-surface-base);
+  --bs-split-pane-color: var(--bs-text-default);
+  /* Pane sizes below are the literal values from the Figma "Split pane" variants (333 / 106). */
+  --bs-split-pane-first-size: 333px;
+  --bs-split-pane-collapsed-size: 106px;
+  --bs-split-pane-min-size: 96px;
+  --bs-split-pane-divider-size: var(--bs-spacing-75);
+  --bs-split-pane-divider-bg: var(--bs-surface-container);
+  --bs-split-pane-divider-thumb: var(--bs-border-neutral-container);
+  --bs-split-pane-divider-thumb-active: var(--bs-border-neutral-hover);
+  --bs-split-pane-divider-thumb-length: 250px;
+  --bs-split-pane-border: var(--bs-border-neutral-container);
+  --bs-split-pane-focus-ring: var(--bs-border-neutral-focus);
+}
+
+.bs-split-pane {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: clip;
+  border-radius: var(--bs-split-pane-radius);
+  background: var(--bs-split-pane-bg);
+  color: var(--bs-split-pane-color);
+}
+
+.bs-split-pane--vertical {
+  flex-direction: column;
+}
+
+.bs-split-pane__pane {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  background: var(--bs-split-pane-bg);
+}
+
+.bs-split-pane--horizontal > .bs-split-pane__pane {
+  min-width: min(var(--bs-split-pane-min-size), 100%);
+}
+
+.bs-split-pane--vertical > .bs-split-pane__pane {
+  min-height: min(var(--bs-split-pane-min-size), 100%);
+}
+
+.bs-split-pane__divider {
+  position: relative;
+  flex: 0 0 var(--bs-split-pane-divider-size);
+  display: flex;
+  background: var(--bs-split-pane-divider-bg);
+  touch-action: none;
+  outline: none;
+}
+
+.bs-split-pane--horizontal > .bs-split-pane__divider {
+  cursor: col-resize;
+  flex-direction: column;
+}
+
+.bs-split-pane--vertical > .bs-split-pane__divider {
+  cursor: row-resize;
+  flex-direction: row;
+}
+
+.bs-split-pane__divider--static {
+  cursor: default;
+  pointer-events: none;
+}
+
+.bs-split-pane__thumb {
+  display: block;
+  border-radius: var(--bs-border-radius-full);
+  background: var(--bs-split-pane-divider-thumb);
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-split-pane--horizontal > .bs-split-pane__divider > .bs-split-pane__thumb {
+  width: 100%;
+  height: min(var(--bs-split-pane-divider-thumb-length), 100%);
+}
+
+.bs-split-pane--vertical > .bs-split-pane__divider > .bs-split-pane__thumb {
+  height: 100%;
+  width: min(var(--bs-split-pane-divider-thumb-length), 100%);
+}
+
+.bs-split-pane__divider:hover > .bs-split-pane__thumb,
+.bs-split-pane__divider--active > .bs-split-pane__thumb,
+.bs-split-pane__divider:focus-visible > .bs-split-pane__thumb {
+  background: var(--bs-split-pane-divider-thumb-active);
+}
+
+.bs-split-pane__divider:focus-visible {
+  outline: 2px solid var(--bs-split-pane-focus-ring);
+  outline-offset: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bs-split-pane__thumb {
+    transition: none;
+  }
+}

package/dist/collection/components/bs-split-pane/bs-split-pane.js

@@ -0,0 +1,404 @@
+import { h } from "@stencil/core";
+const MAX_PANES = 3;
+const DEFAULT_MIN_SIZE = 96;
+/**
+ * A resizable layout of two or three panes separated by draggable, keyboard-operable dividers
+ * (the WAI-ARIA "window splitter" pattern). Content goes into the named slots `pane-1`, `pane-2`
+ * and (optionally) `pane-3`; the pane count follows which slots have content.
+ *
+ * `orientation="horizontal"` places panes side by side (vertical dividers); `"vertical"` stacks
+ * them (horizontal dividers). The first pane has a fixed size (`--bs-split-pane-first-size`) that
+ * the user can change by dragging; the last pane absorbs the remaining space. `collapsed` shrinks
+ * the first pane to a narrow rail (`--bs-split-pane-collapsed-size`) -- the component reflects the
+ * attribute so slotted content can switch to its compact rendering (e.g. icon-only list items).
+ *
+ * ## When to use
+ * - Master/detail layouts: a navigation or list pane next to one or two detail panes.
+ *
+ * ## When not to use
+ * - A temporary overlay panel (use `bs-side-panel`).
+ * - A fixed, non-resizable two-column layout (plain CSS grid; or set `resizable="false"` to keep
+ *   the dividers purely visual).
+ *
+ * @slot pane-1 - The first pane (the one that collapses).
+ * @slot pane-2 - The second pane.
+ * @slot pane-3 - Optional third pane.
+ * @part container - The flex wrapper around all panes and dividers.
+ * @part pane - Every pane wrapper (`pane-1`, `pane-2`, `pane-3` are also exposed as separate parts).
+ * @part divider - Every divider (the focusable `role="separator"` element).
+ * @part divider-thumb - The visible thumb on a divider.
+ * @prop --bs-split-pane-radius - Corner radius of the container. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-split-pane-bg - Pane background. Aliased to `--bs-surface-base`.
+ * @prop --bs-split-pane-color - Text colour inherited by slotted content. Aliased to `--bs-text-default`.
+ * @prop --bs-split-pane-first-size - Initial size of the first pane along the layout axis. Defaults to `333px` (Figma).
+ * @prop --bs-split-pane-collapsed-size - Size of the first pane while `collapsed`. Defaults to `106px` (Figma).
+ * @prop --bs-split-pane-min-size - Smallest size a resized pane may take. Defaults to `96px`.
+ * @prop --bs-split-pane-divider-size - Thickness of a divider. Aliased to `--bs-spacing-75`.
+ * @prop --bs-split-pane-divider-bg - Divider track colour. Aliased to `--bs-surface-container`.
+ * @prop --bs-split-pane-divider-thumb - Divider thumb colour. Aliased to `--bs-border-neutral-container`.
+ * @prop --bs-split-pane-divider-thumb-active - Divider thumb colour on hover, focus and drag. Aliased to `--bs-border-neutral-hover`.
+ * @prop --bs-split-pane-divider-thumb-length - Length of the divider thumb. Defaults to `250px` (Figma).
+ * @prop --bs-split-pane-border - Border between the first pane and the rest when dividers are not resizable. Aliased to `--bs-border-neutral-container`.
+ * @prop --bs-split-pane-focus-ring - Divider focus ring colour. Aliased to `--bs-border-neutral-focus`.
+ */
+export class BsSplitPane {
+    el;
+    /** `horizontal` = panes side by side, `vertical` = panes stacked. */
+    orientation = 'horizontal';
+    /** Collapses the first pane to a narrow rail. Mutable: the Enter key on the first divider toggles it. */
+    collapsed = false;
+    /** Whether the dividers can be dragged / operated by keyboard. `false` keeps them as visual separators. */
+    resizable = true;
+    /** Accessible name of each divider. */
+    dividerLabel = 'Resize panes';
+    /** Pixels moved per arrow-key press (Shift multiplies by 4). */
+    step = 16;
+    /** Fires after a resize (pointer release or key press) with the pixel size of every pane except the last. */
+    bsResize;
+    /** Fires when `collapsed` changes through user interaction. */
+    bsCollapsedChange;
+    paneCount = 2;
+    sizes = [];
+    draggingIndex = -1;
+    observer;
+    dragStart;
+    /** Toggles `collapsed` and emits `bsCollapsedChange`. */
+    async toggleCollapsed() {
+        this.collapsed = !this.collapsed;
+        this.bsCollapsedChange.emit(this.collapsed);
+    }
+    componentWillLoad() {
+        this.countPanes();
+    }
+    connectedCallback() {
+        this.observer = new MutationObserver(() => this.countPanes());
+        this.observer.observe(this.el, { childList: true, attributes: true, attributeFilter: ['slot'], subtree: false });
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    countPanes() {
+        let count = 1;
+        for (let i = 1; i <= MAX_PANES; i++) {
+            if (this.el.querySelector(`:scope > [slot="pane-${i}"]`))
+                count = i;
+        }
+        this.paneCount = Math.max(count, 1);
+    }
+    isRtl() {
+        return this.orientation === 'horizontal' && getComputedStyle(this.el).direction === 'rtl';
+    }
+    axisSize(pane) {
+        const rect = pane.getBoundingClientRect();
+        return this.orientation === 'horizontal' ? rect.width : rect.height;
+    }
+    minSize() {
+        const raw = parseFloat(getComputedStyle(this.el).getPropertyValue('--bs-split-pane-min-size'));
+        return Number.isFinite(raw) ? raw : DEFAULT_MIN_SIZE;
+    }
+    /** Largest size pane `index` may take: leave `minSize` for each pane after it, and the dividers. */
+    maxSize(index) {
+        const container = this.el.shadowRoot.querySelector('.bs-split-pane');
+        const total = this.axisSize(container);
+        const dividers = Array.from(container.querySelectorAll('.bs-split-pane__divider'));
+        const dividerTotal = dividers.reduce((sum, d) => sum + this.axisSize(d), 0);
+        const before = Array.from(container.querySelectorAll('.bs-split-pane__pane'))
+            .slice(0, index)
+            .reduce((sum, p) => sum + this.axisSize(p), 0);
+        const after = (this.paneCount - 1 - index) * this.minSize();
+        return Math.max(this.minSize(), total - dividerTotal - before - after);
+    }
+    paneEl(index) {
+        return this.el.shadowRoot.querySelectorAll('.bs-split-pane__pane')[index];
+    }
+    setSize(index, value) {
+        const clamped = Math.min(Math.max(value, this.minSize()), this.maxSize(index));
+        const next = this.sizes.slice();
+        next[index] = clamped;
+        this.sizes = next;
+    }
+    emitResize() {
+        const sizes = [];
+        // Prefer the size just committed to state: the DOM hasn't re-rendered yet when this runs.
+        for (let i = 0; i < this.paneCount - 1; i++)
+            sizes.push(Math.round(this.sizes[i] ?? this.axisSize(this.paneEl(i))));
+        this.bsResize.emit(sizes);
+    }
+    onPointerDown = (index) => (ev) => {
+        if (!this.resizable || (index === 0 && this.collapsed))
+            return;
+        ev.preventDefault();
+        ev.currentTarget.setPointerCapture(ev.pointerId);
+        this.dragStart = {
+            pointer: this.orientation === 'horizontal' ? ev.clientX : ev.clientY,
+            size: this.axisSize(this.paneEl(index)),
+            index,
+        };
+        this.draggingIndex = index;
+    };
+    onPointerMove = (ev) => {
+        if (!this.dragStart)
+            return;
+        const pointer = this.orientation === 'horizontal' ? ev.clientX : ev.clientY;
+        const delta = (pointer - this.dragStart.pointer) * (this.isRtl() ? -1 : 1);
+        this.setSize(this.dragStart.index, this.dragStart.size + delta);
+    };
+    onPointerUp = (ev) => {
+        if (!this.dragStart)
+            return;
+        ev.currentTarget.releasePointerCapture?.(ev.pointerId);
+        this.dragStart = undefined;
+        this.draggingIndex = -1;
+        this.emitResize();
+    };
+    onKeyDown = (index) => (ev) => {
+        if (!this.resizable)
+            return;
+        const horizontal = this.orientation === 'horizontal';
+        const grow = horizontal ? (this.isRtl() ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown';
+        const shrink = horizontal ? (this.isRtl() ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp';
+        const amount = this.step * (ev.shiftKey ? 4 : 1);
+        const current = this.axisSize(this.paneEl(index));
+        let handled = true;
+        if (ev.key === 'Enter' && index === 0) {
+            void this.toggleCollapsed();
+        }
+        else if (this.collapsed && index === 0) {
+            handled = false;
+        }
+        else if (ev.key === grow) {
+            this.setSize(index, current + amount);
+        }
+        else if (ev.key === shrink) {
+            this.setSize(index, current - amount);
+        }
+        else if (ev.key === 'Home') {
+            this.setSize(index, this.minSize());
+        }
+        else if (ev.key === 'End') {
+            this.setSize(index, this.maxSize(index));
+        }
+        else {
+            handled = false;
+        }
+        if (!handled)
+            return;
+        ev.preventDefault();
+        this.emitResize();
+    };
+    paneStyle(index) {
+        const last = index === this.paneCount - 1;
+        if (index === 0 && this.collapsed && this.paneCount > 1) {
+            return { flex: '0 0 var(--bs-split-pane-collapsed-size)' };
+        }
+        const size = this.sizes[index];
+        if (size !== undefined && !last)
+            return { flex: `0 0 ${size}px` };
+        if (index === 0 && !last)
+            return { flex: '0 0 var(--bs-split-pane-first-size)' };
+        return { flex: '1 1 0' };
+    }
+    percentFor(index) {
+        const container = this.el.shadowRoot?.querySelector('.bs-split-pane');
+        const pane = this.el.shadowRoot?.querySelectorAll('.bs-split-pane__pane')[index];
+        if (!container || !pane)
+            return 0;
+        const total = this.axisSize(container);
+        return total ? Math.round((this.axisSize(pane) / total) * 100) : 0;
+    }
+    render() {
+        const dividerOrientation = this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
+        const nodes = [];
+        for (let i = 0; i < this.paneCount; i++) {
+            nodes.push(h("div", { part: `pane pane-${i + 1}`, class: `bs-split-pane__pane bs-split-pane__pane--${i + 1}`, style: this.paneStyle(i) }, h("slot", { name: `pane-${i + 1}` })));
+            if (i < this.paneCount - 1) {
+                nodes.push(h("div", { part: "divider", class: { 'bs-split-pane__divider': true, 'bs-split-pane__divider--active': this.draggingIndex === i, 'bs-split-pane__divider--static': !this.resizable }, role: "separator", "aria-orientation": dividerOrientation, "aria-label": this.dividerLabel, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": this.percentFor(i), tabindex: this.resizable ? 0 : undefined, onPointerDown: this.onPointerDown(i), onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onPointerCancel: this.onPointerUp, onKeyDown: this.onKeyDown(i) }, h("span", { part: "divider-thumb", class: "bs-split-pane__thumb" })));
+            }
+        }
+        return (h("div", { key: '67d978089645337e56106163c6d6ac38fd6d063c', part: "container", class: `bs-split-pane bs-split-pane--${this.orientation}` }, nodes));
+    }
+    static get is() { return "bs-split-pane"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-split-pane.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-split-pane.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsSplitPaneOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BsSplitPaneOrientation": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-split-pane/bs-split-pane.tsx",
+                            "id": "src/components/bs-split-pane/bs-split-pane.tsx::BsSplitPaneOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`horizontal` = panes side by side, `vertical` = panes stacked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Collapses the first pane to a narrow rail. Mutable: the Enter key on the first divider toggles it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "collapsed",
+                "defaultValue": "false"
+            },
+            "resizable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dividers can be dragged / operated by keyboard. `false` keeps them as visual separators."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resizable",
+                "defaultValue": "true"
+            },
+            "dividerLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of each divider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "divider-label",
+                "defaultValue": "'Resize panes'"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pixels moved per arrow-key press (Shift multiplies by 4)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "16"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "paneCount": {},
+            "sizes": {},
+            "draggingIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsResize",
+                "name": "bsResize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires after a resize (pointer release or key press) with the pixel size of every pane except the last."
+                },
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                }
+            }, {
+                "method": "bsCollapsedChange",
+                "name": "bsCollapsedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when `collapsed` changes through user interaction."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleCollapsed": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles `collapsed` and emits `bsCollapsedChange`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/bs-split-pane/bs-split-pane.stories.js

@@ -0,0 +1,47 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const list = html `
+  <div style="padding: var(--bs-spacing-300)">
+    <strong>Pane title</strong>
+    <div>Description</div>
+  </div>
+`;
+const detail = (title) => html `
+  <div style="padding: var(--bs-spacing-300)">
+    <strong>${title}</strong>
+    <div>Description</div>
+    <p>Title<br /><strong>Details</strong></p>
+    <p>Title<br /><strong>Details</strong></p>
+  </div>
+`;
+const meta = {
+    title: 'Components/bs-split-pane',
+    parameters: { docs: { description: { component: componentDescription('bs-split-pane') } } },
+    render: args => html `
+    <div style="height: 480px; border: 1px solid var(--bs-border-neutral-container)">
+      <bs-split-pane orientation=${args.orientation} ?collapsed=${args.collapsed} .resizable=${args.resizable}>
+        <div slot="pane-1">${list}</div>
+        <div slot="pane-2">${detail('Detail pane')}</div>
+        ${args.panes === 3 ? html `<div slot="pane-3">${detail('Second detail pane')}</div>` : ''}
+      </bs-split-pane>
+    </div>
+  `,
+    argTypes: {
+        orientation: { control: 'inline-radio', options: ['horizontal', 'vertical'] },
+        collapsed: { control: 'boolean' },
+        resizable: { control: 'boolean' },
+        panes: { control: 'inline-radio', options: [2, 3] },
+    },
+    args: { orientation: 'horizontal', collapsed: false, resizable: true, panes: 3 },
+};
+export default meta;
+export const Horizontal = {};
+export const HorizontalCollapsed = { args: { collapsed: true } };
+export const Vertical = { args: { orientation: 'vertical' } };
+export const TwoPanes = {
+    args: {
+        panes: 2,
+        orientation: 'vertical',
+    },
+};
+export const NotResizable = { args: { resizable: false } };