@brandsync/wc 1.14.0 → 1.16.0

package/dist/collection/components/bs-timepicker/bs-timepicker.js

@@ -200,14 +200,14 @@ export class BsTimepicker {
         return (h("div", { part: "spinner", class: "bs-timepicker__spinner" }, h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel(this.increaseLabel), tabindex: -1, onClick: () => this.stepBy(col, 1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M18 15L12 9L6 15", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { part: "value", class: "bs-timepicker__value", role: "spinbutton", tabindex: 0, "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": n, "aria-valuetext": pad(n), onKeyDown: this.onKeyDown(col), onBlur: () => (this.typed = '') }, pad(n)), h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel(this.decreaseLabel), tabindex: -1, onClick: () => this.stepBy(col, -1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     render() {
-        return (h("bs-card", { key: '74af930fdaa05b2d91f4ca447078175a1c978994', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: 'f67c4d6f522e5ee39dad612521324d87a1d2c48d', class: "bs-timepicker__body" }, h("div", { key: 'c9bef71e51c20f5a09ae38519f89b7823fd2f9ad', part: "header", class: "bs-timepicker__header" }, h("div", { key: '4c4aa31d8f11f92bb789d7720222a39914a283a7', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: 'db8fbe9176836ccf19d60079fd21655a6f078eed', class: "bs-timepicker__format" }, h("span", { key: '42dd4163160e475dc5b27ec99534edf5df1e5a3d' }, this.formatLabel), h("bs-switch", { key: '1eca77cb8284366630ec8a53c2e5ca00ecea4382', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: 'ec60756f323a04ddc74f9cf8bd6c84276cbe2a0b', class: "bs-timepicker__divider" }), h("div", { key: '15609379e051fe0eddbe491f0ccaeb7efad3ae81', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '40760ac8da6112c1c82554ed807f156c3998ceeb', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: 'b15b5bf4db3790c167b13caae40e1d1e7e92bfb7', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: 'cdc4cee6cd246b05be5f11939425b44160a65d54', cx: "2", cy: "10", r: "2" }), h("circle", { key: '65a5393d6f05c241d7c1aa3c8090c22266386b0e', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '4292168e81da8883d93b1ce9e3e60edd00726cfb', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
+        return (h("bs-card", { key: 'ad3c51871ca4b0b1871944b658bae070140d1e99', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: 'b522d8a85e0161c4f7cd7938364919eda0585cf9', class: "bs-timepicker__body" }, h("div", { key: 'a3dd5ea83fa63cd9e8e6db2dfeb32b195e084f58', part: "header", class: "bs-timepicker__header" }, h("div", { key: '9af7c0024a4341ed1bbaccb4fb25e0e7558de93e', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: 'e18dcfcfe44a19f8dbac0737e487b23234d92fd6', class: "bs-timepicker__format" }, h("span", { key: '954b1579e9789c76521ba9364ed84caee882a05d' }, this.formatLabel), h("bs-switch", { key: '020b23405f62aa272c8af71d9071e0090bec5c30', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: '283ba5ff1525c6561b7d00552dfc86ed34284f9b', class: "bs-timepicker__divider" }), h("div", { key: 'c2dfc0cb7b7cc0e5d106565746f3426b4065af9a', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '1d017fd059c36955ba5ba4c5da5a05b9fb18e7d2', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: '6b182c00b7dbd9150640c47aee43423d20e270c5', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: '531640b6870cc87a284ac9ea64ca5b292c4f529f', cx: "2", cy: "10", r: "2" }), h("circle", { key: '323a4a90bebd8203b5c2f9803ffe03055991f9e2', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '3d7ec2986824358b3f1e795a9ce05b1b81d14432', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
                 { label: 'AM', value: 'AM' },
                 { label: 'PM', value: 'PM' },
             ], onBsChange: (ev) => {
                 const pm = ev.detail === 'PM';
                 if (pm !== this.isPm)
                     this.hour = (this.hour + 12) % 24;
-            } }))), h("div", { key: '9ceb4e065f2851ae0b4adc22fa6795d593df362a', class: "bs-timepicker__divider" }), h("div", { key: '8cbe32e5381d83e27ab7b97c50091fbf837428b8', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: '17fb1f5fcb3b40033951d13c460500c0bbc3f5a1', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '4a3a6a6bb3ef01a66e6198c1bcb148b94a164f8d', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
+            } }))), h("div", { key: '664da910d0c1849ff6a47ca326945b37f837760a', class: "bs-timepicker__divider" }), h("div", { key: '852c88b44cbb5cc3f236363181920163776a4521', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: 'e92e26209c7ed2e45094265a54ad8347ce697f05', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '110338b7a98727089613a3eb661ca5e0d8346691', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
     }
     static get is() { return "bs-timepicker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-toast/bs-toast.js

@@ -27,7 +27,7 @@ export class BsToast {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '759d3745ca8ffca53fa286408fa694ffe374b99d', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '7f46844194cbb5fa9efd7ac475c8a417fbde9f27', class: "bs-toast__content" }, h("span", { key: 'cc4ca41ce6060f7ad6b84a9d0400d0515d200877', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: 'dc3754b7390e54fd84bde93903c57326046a5d3f', state: this.state })), h("span", { key: '1fbecaf2d09591e08708ee99381d0acc1ded3a8f', part: "message", class: "bs-toast__message" }, h("slot", { key: 'b7aba4aee990aec06d3782ab38332825b74ed85a' }))), h("div", { key: '1a4bb03633bf3aa703005c44b4d0d807a20dd51d', class: "bs-toast__actions" }, h("button", { key: 'a8ca2bc51acd31d3b21a63e128d98d029d638030', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '97dc7540e08a0bff5784a8bb22830370513b930b' })))));
+        return (h("div", { key: '335782bd5c8c1c721105684ee50efb71dc8a9dd8', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '77c48c6315299064a6904646f46bb787dc4dada2', class: "bs-toast__content" }, h("span", { key: '8aef9bc3f662320fb3d60bbfdf8d4d8672297bd4', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: 'b1501a806e5866b69fbea2073741325f65b1209c', state: this.state })), h("span", { key: '751407d5dc04f3f8b4e57c5b47d1639f66e673a6', part: "message", class: "bs-toast__message" }, h("slot", { key: '9407fe265762817eb68e8119a40b792b53dbdb6e' }))), h("div", { key: '4bcd82ca67e8ce49998c7c954b3764df242e4eeb', class: "bs-toast__actions" }, h("button", { key: '352a9789b6f773ee385396bda80fde2ed972af30', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '5296f2811fda1f42b95087c4494fa05d3e0efff4' })))));
     }
     static get is() { return "bs-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tooltip/bs-tooltip.js

@@ -42,7 +42,7 @@ export class BsTooltip {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: 'f29c467c70eb488ef6d1d83af7a71be2d26307be', class: "bs-tooltip" }, h("span", { key: 'e74432210ae015c44a87f1d5f60c3e448f016893', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '10ef531bf6076636e890ae6f679c0bd368714802', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '0a634836408d120230bfed0c9dc11c014c4f0c4d' }))));
+        return (h("div", { key: 'e55b4605c7b2293c533ba267d7af4f4832079749', class: "bs-tooltip" }, h("span", { key: '67f361a8f7600897914b2257346f42f837103e82', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '3dba38a0960caa3ac0efded8d152c1e6c6ab0d5b', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '6b6d297440f1386d134911c1f219f441a4251d9f' }))));
     }
     static get is() { return "bs-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tooltip-trigger/bs-tooltip-trigger.js

@@ -48,7 +48,7 @@ export class BsTooltipTrigger {
     };
     render() {
         const show = this.visible && !!this.text;
-        return (h("div", { key: 'a0038c387bb975237a46686d49a8cab159809056', part: "trigger", class: "bs-tooltip-trigger", "aria-describedby": this.tooltipId, onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide, onKeyDown: this.onKeyDown }, h("slot", { key: 'ab487b1303922867a4f36f148c504af7bc01f454' }), h("div", { key: '336ebebfd45f33b0a22c31af8d024d9c271e8793', part: "tooltip", id: this.tooltipId, class: "bs-tooltip-trigger__tooltip", role: "tooltip", hidden: !show }, h("bs-tooltip", { key: '97ffe6cc68d68fd4716169dd7a158ac5586435f8' }, this.text))));
+        return (h("div", { key: '399a6f518855e7ba3ac3824276933d3b1ec913cc', part: "trigger", class: "bs-tooltip-trigger", "aria-describedby": this.tooltipId, onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide, onKeyDown: this.onKeyDown }, h("slot", { key: 'bf83352404bcdf757325421b86c8c571f89bae47' }), h("div", { key: '44f5fed6608f49041f206e44302a22404c1b6fc2', part: "tooltip", id: this.tooltipId, class: "bs-tooltip-trigger__tooltip", role: "tooltip", hidden: !show }, h("bs-tooltip", { key: 'f04fab6b6e9c6fba4c0dbdfe01db5927e98227cb' }, this.text))));
     }
     static get is() { return "bs-tooltip-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tree/bs-tree.cmp.test.js

@@ -0,0 +1,166 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { userEvent } from "vitest/browser";
+const mount = (props = {}) => render(h("bs-tree", { ariaLabel: "Files", ...props }, h("bs-tree-item", { label: "src", value: "src", expanded: true }, h("bs-tree-item", { label: "components", value: "components" }, h("bs-tree-item", { label: "button.tsx", value: "button" })), h("bs-tree-item", { label: "locked", value: "locked", disabled: true }), h("bs-tree-item", { label: "index.ts", value: "index" })), h("bs-tree-item", { label: "docs", value: "docs" }, h("bs-tree-item", { label: "readme", value: "readme" })), h("bs-tree-item", { label: "package.json", value: "pkg" })));
+const get = (root, v) => Array.from(root.querySelectorAll('bs-tree-item')).find(i => i.value === v);
+const tabbables = (root) => Array.from(root.querySelectorAll('bs-tree-item')).filter(i => i.getAttribute('tabindex') === '0');
+const press = async (key, waitForChanges) => {
+    await userEvent.keyboard(key);
+    await waitForChanges();
+};
+describe('bs-tree', () => {
+    it('renders role=tree with the label and a single roving tab stop', async () => {
+        const { root, waitForChanges } = await mount();
+        await waitForChanges();
+        const tree = root;
+        const inner = tree.shadowRoot.querySelector('[role="tree"]');
+        expect(inner).toEqualAttribute('aria-label', 'Files');
+        expect(tabbables(root)).toEqual([get(root, 'src')]);
+        expect(get(root, 'locked').hasAttribute('tabindex')).toBe(false);
+    });
+    it('puts the roving tab stop on the selected item', async () => {
+        const { root, waitForChanges } = await mount({ value: 'index' });
+        await waitForChanges();
+        expect(tabbables(root)).toEqual([get(root, 'index')]);
+        expect(get(root, 'index').selected).toBe(true);
+        expect(get(root, 'index')).toEqualAttribute('aria-selected', 'true');
+    });
+    it('selects on click, emits bsChange once, and keeps selection single', async () => {
+        const { root, waitForChanges } = await mount();
+        const changes = [];
+        root.addEventListener('bsChange', e => changes.push(e.detail));
+        get(root, 'index').shadowRoot.querySelector('[part="container"]').click();
+        await waitForChanges();
+        get(root, 'src').shadowRoot.querySelector('[part="container"]').click();
+        await waitForChanges();
+        expect(changes).toEqual(['index', 'src']);
+        expect(root.value).toBe('src');
+        expect(Array.from(root.querySelectorAll('bs-tree-item')).filter(i => i.selected)).toEqual([get(root, 'src')]);
+        // Row click on a parent selects but does not toggle.
+        expect(get(root, 'src').expanded).toBe(true);
+    });
+    it('syncs value set from code without emitting bsChange', async () => {
+        const { root, waitForChanges } = await mount();
+        const changes = [];
+        root.addEventListener('bsChange', e => changes.push(e.detail));
+        root.value = 'pkg';
+        await waitForChanges();
+        expect(get(root, 'pkg').selected).toBe(true);
+        expect(changes).toEqual([]);
+        root.value = '';
+        await waitForChanges();
+        expect(get(root, 'pkg').selected).toBe(false);
+    });
+    it('selectable=false: rows do not select but caret still expands', async () => {
+        const { root, waitForChanges } = await mount({ selectable: false });
+        const changes = [];
+        root.addEventListener('bsChange', e => changes.push(e.detail));
+        get(root, 'index').shadowRoot.querySelector('[part="container"]').click();
+        await waitForChanges();
+        expect(changes).toEqual([]);
+        expect(get(root, 'index').selected).toBe(false);
+        get(root, 'docs').shadowRoot.querySelector('[part="caret"]').click();
+        await waitForChanges();
+        expect(get(root, 'docs').expanded).toBe(true);
+    });
+    it('collapsed children leave the layout and navigation', async () => {
+        const { root, waitForChanges } = await mount();
+        await waitForChanges();
+        const readme = get(root, 'readme');
+        expect(readme.getBoundingClientRect().height).toBe(0);
+        get(root, 'docs').expanded = true;
+        await waitForChanges();
+        expect(readme.getBoundingClientRect().height).toBe(48);
+    });
+    it('ArrowDown / ArrowUp / Home / End move focus over visible, enabled items', async () => {
+        const { root, waitForChanges } = await mount();
+        await waitForChanges();
+        await userEvent.tab();
+        expect(document.activeElement).toBe(get(root, 'src'));
+        await press('{ArrowDown}', waitForChanges);
+        expect(document.activeElement).toBe(get(root, 'components'));
+        await press('{ArrowDown}', waitForChanges);
+        // 'locked' is disabled -> skipped.
+        expect(document.activeElement).toBe(get(root, 'index'));
+        await press('{ArrowDown}', waitForChanges);
+        expect(document.activeElement).toBe(get(root, 'docs'));
+        // readme is collapsed -> next is package.json
+        await press('{ArrowDown}', waitForChanges);
+        expect(document.activeElement).toBe(get(root, 'pkg'));
+        expect(tabbables(root)).toEqual([get(root, 'pkg')]);
+        await press('{ArrowUp}', waitForChanges);
+        expect(document.activeElement).toBe(get(root, 'docs'));
+        await press('{Home}', waitForChanges);
+        expect(document.activeElement).toBe(get(root, 'src'));
+        await press('{End}', waitForChanges);
+        expect(document.activeElement).toBe(get(root, 'pkg'));
+    });
+    it('ArrowRight expands then enters; ArrowLeft collapses then goes to the parent', async () => {
+        const { root, waitForChanges } = await mount();
+        await waitForChanges();
+        await userEvent.tab();
+        await press('{ArrowDown}', waitForChanges); // components (closed)
+        const toggles = [];
+        get(root, 'components').addEventListener('bsToggle', e => toggles.push(e.detail));
+        await press('{ArrowRight}', waitForChanges);
+        expect(get(root, 'components').expanded).toBe(true);
+        expect(get(root, 'components')).toEqualAttribute('aria-expanded', 'true');
+        expect(document.activeElement).toBe(get(root, 'components'));
+        await press('{ArrowRight}', waitForChanges);
+        expect(document.activeElement).toBe(get(root, 'button'));
+        await press('{ArrowLeft}', waitForChanges); // leaf -> parent
+        expect(document.activeElement).toBe(get(root, 'components'));
+        await press('{ArrowLeft}', waitForChanges); // collapse
+        expect(get(root, 'components').expanded).toBe(false);
+        expect(toggles).toEqual([true, false]);
+        await press('{ArrowLeft}', waitForChanges); // closed -> parent
+        expect(document.activeElement).toBe(get(root, 'src'));
+    });
+    it('Enter and Space select the focused item', async () => {
+        const { root, waitForChanges } = await mount();
+        const changes = [];
+        root.addEventListener('bsChange', e => changes.push(e.detail));
+        await waitForChanges();
+        await userEvent.tab();
+        await press('{Enter}', waitForChanges);
+        await press('{ArrowDown}', waitForChanges);
+        await press(' ', waitForChanges);
+        expect(changes).toEqual(['src', 'components']);
+        expect(get(root, 'components').selected).toBe(true);
+        expect(get(root, 'src').selected).toBe(false);
+    });
+    it('* expands all siblings of the focused item', async () => {
+        const { root, waitForChanges } = await mount();
+        await waitForChanges();
+        await userEvent.tab();
+        await press('{ArrowDown}', waitForChanges); // components
+        await press('*', waitForChanges);
+        expect(get(root, 'components').expanded).toBe(true);
+        await press('{End}', waitForChanges); // pkg (top level)
+        await press('*', waitForChanges);
+        expect(get(root, 'docs').expanded).toBe(true);
+    });
+    it('expandAll / collapseAll', async () => {
+        const { root, waitForChanges } = await mount();
+        await root.expandAll();
+        await waitForChanges();
+        expect(Array.from(root.querySelectorAll('bs-tree-item')).filter(i => i.expanded).length).toBe(root.querySelectorAll('bs-tree-item').length);
+        await root.collapseAll();
+        await waitForChanges();
+        expect(Array.from(root.querySelectorAll('bs-tree-item')).some(i => i.expanded)).toBe(false);
+    });
+    it('handles items added later (levels, tabindex)', async () => {
+        const { root, waitForChanges } = await mount();
+        await waitForChanges();
+        const docs = get(root, 'docs');
+        const added = document.createElement('bs-tree-item');
+        added.label = 'late';
+        added.value = 'late';
+        docs.appendChild(added);
+        docs.expanded = true;
+        await waitForChanges();
+        await new Promise(r => setTimeout(r, 50));
+        expect(added).toEqualAttribute('aria-level', '2');
+        expect(added.getAttribute('tabindex')).toBe('-1');
+        expect(tabbables(root).length).toBe(1);
+    });
+});

package/dist/collection/components/bs-tree/bs-tree.css

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+}
+
+.bs-tree {
+  display: block;
+  width: 100%;
+}

package/dist/collection/components/bs-tree/bs-tree.js

@@ -0,0 +1,354 @@
+import { h } from "@stencil/core";
+/**
+ * A hierarchical list of `bs-tree-item` rows with single selection, expand/collapse and the
+ * WAI-ARIA tree keyboard pattern.
+ *
+ * The tree owns `role="tree"`, the roving `tabindex` (exactly one enabled, visible item is
+ * tabbable: the selected one, otherwise the first), selection (kept in sync with each item's
+ * `selected`) and keyboard navigation over the visible (rendered, non-disabled) items. Items own
+ * their expansion state and emit `bsSelect` / `bsToggle`.
+ *
+ * Built from: `bs-tree-item` rows.
+ *
+ * @slot - Default slot: top-level `bs-tree-item` elements (nested ones go inside their parent item).
+ * @part container - The `role="tree"` wrapper.
+ */
+export class BsTree {
+    el;
+    /** Accessible name of the tree. Bound onto the internal `role="tree"` element (an `aria-label`
+     * on the host would not reach it). */
+    ariaLabel = null;
+    /** The `value` (or, when empty, the `label`) of the selected item. Two-way synced with each
+     * item's `selected` (single selection). Setting it from code does not emit `bsChange`. */
+    value = '';
+    /** When `false`, rows do not select (clicks and Enter/Space do nothing) but parents still
+     * expand and collapse. */
+    selectable = true;
+    /** Emitted when the user changes the selection (click, Enter/Space), with the new value. Not
+     * emitted when `value` is set from code. */
+    bsChange;
+    observer;
+    connectedCallback() {
+        this.observer = new MutationObserver(() => this.refresh());
+        this.observer.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['expanded', 'disabled'],
+        });
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    componentDidLoad() {
+        if (!this.value) {
+            const preselected = this.items().find(i => i.selected || i.hasAttribute('selected'));
+            if (preselected)
+                this.value = this.keyOf(preselected);
+        }
+        this.syncSelection();
+        this.refresh();
+    }
+    onValueChange() {
+        this.syncSelection();
+        this.refresh();
+    }
+    /** Expands every parent item. */
+    async expandAll() {
+        this.items().forEach(i => (i.expanded = true));
+    }
+    /** Collapses every parent item. */
+    async collapseAll() {
+        this.items().forEach(i => (i.expanded = false));
+    }
+    items() {
+        return Array.from(this.el.querySelectorAll('bs-tree-item'));
+    }
+    keyOf(item) {
+        return item.value || item.label;
+    }
+    isParent(item) {
+        return Array.from(item.children).some(c => c.tagName === 'BS-TREE-ITEM');
+    }
+    isRendered(item) {
+        let p = item.parentElement;
+        while (p && p !== this.el) {
+            if (p.tagName === 'BS-TREE-ITEM' && !p.expanded)
+                return false;
+            p = p.parentElement;
+        }
+        return true;
+    }
+    navigable() {
+        return this.items().filter(i => !i.disabled && this.isRendered(i));
+    }
+    syncSelection() {
+        let found = false;
+        this.items().forEach(i => {
+            const sel = !!this.value && !found && this.keyOf(i) === this.value;
+            if (sel)
+                found = true;
+            if (i.selected !== sel)
+                i.selected = sel;
+        });
+    }
+    /** Roving tabindex: one tabbable item (selected if navigable, else the first). */
+    refresh(preferred) {
+        const nav = this.navigable();
+        const target = preferred && nav.includes(preferred) ? preferred : nav.find(i => i.selected) ?? nav[0];
+        this.items().forEach(i => {
+            if (i.disabled)
+                i.removeAttribute('tabindex');
+            else
+                i.setAttribute('tabindex', i === target ? '0' : '-1');
+        });
+    }
+    focusItem(item) {
+        if (!item)
+            return;
+        this.refresh(item);
+        item.focus();
+    }
+    select(item) {
+        if (!this.selectable || item.disabled)
+            return;
+        const key = this.keyOf(item);
+        if (key === this.value)
+            return;
+        this.value = key;
+        this.syncSelection();
+        this.refresh(item);
+        this.bsChange.emit(key);
+    }
+    onItemSelect(e) {
+        const item = e.target.closest('bs-tree-item');
+        if (item)
+            this.select(item);
+    }
+    onFocusIn(e) {
+        const item = e.target.closest?.('bs-tree-item');
+        if (item && !item.disabled && e.target === item)
+            this.refresh(item);
+    }
+    onKeyDown(e) {
+        const item = e.target.closest?.('bs-tree-item');
+        if (!item || e.target !== item || e.altKey || e.ctrlKey || e.metaKey)
+            return;
+        const nav = this.navigable();
+        const idx = nav.indexOf(item);
+        const rtl = getComputedStyle(this.el).direction === 'rtl';
+        let key = e.key;
+        if (rtl && key === 'ArrowRight')
+            key = 'ArrowLeft';
+        else if (rtl && key === 'ArrowLeft')
+            key = 'ArrowRight';
+        const parent = this.isParent(item);
+        switch (key) {
+            case 'ArrowDown':
+                this.focusItem(nav[idx + 1]);
+                break;
+            case 'ArrowUp':
+                if (idx > 0)
+                    this.focusItem(nav[idx - 1]);
+                break;
+            case 'Home':
+                this.focusItem(nav[0]);
+                break;
+            case 'End':
+                this.focusItem(nav[nav.length - 1]);
+                break;
+            case 'ArrowRight':
+                if (!parent)
+                    return;
+                if (!item.expanded)
+                    item.setExpanded(true);
+                else
+                    this.focusItem(nav.find(i => i.parentElement === item));
+                break;
+            case 'ArrowLeft':
+                if (parent && item.expanded)
+                    item.setExpanded(false);
+                else {
+                    const up = item.parentElement;
+                    if (up && up.tagName === 'BS-TREE-ITEM' && !up.disabled)
+                        this.focusItem(up);
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                this.select(item);
+                break;
+            case '*':
+                Array.from(item.parentElement.children)
+                    .filter((c) => c.tagName === 'BS-TREE-ITEM')
+                    .forEach(sib => sib.setExpanded(true));
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+    }
+    render() {
+        return (h("div", { key: '40bf9c9ae1f488a82f3d2972e5f9206db865928d', part: "container", class: "bs-tree", role: "tree", "aria-label": this.ariaLabel }, h("slot", { key: 'eb72026e90f834759d8249ed1a291aa7ca30ac2d' })));
+    }
+    static get is() { return "bs-tree"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-tree.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-tree.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the tree. Bound onto the internal `role=\"tree\"` element (an `aria-label`\non the host would not reach it)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The `value` (or, when empty, the `label`) of the selected item. Two-way synced with each\nitem's `selected` (single selection). Setting it from code does not emit `bsChange`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `false`, rows do not select (clicks and Enter/Space do nothing) but parents still\nexpand and collapse."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user changes the selection (click, Enter/Space), with the new value. Not\nemitted when `value` is set from code."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "expandAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Expands every parent item.",
+                    "tags": []
+                }
+            },
+            "collapseAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Collapses every parent item.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bsSelect",
+                "method": "onItemSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusin",
+                "method": "onFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/bs-tree/bs-tree.stories.js

@@ -0,0 +1,34 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const items = html `
+  <bs-tree-item label="src" value="src" expanded>
+    <bs-tree-item label="components" value="components" expanded>
+      <bs-tree-item label="button.tsx" value="button"></bs-tree-item>
+      <bs-tree-item label="input.tsx" value="input"></bs-tree-item>
+    </bs-tree-item>
+    <bs-tree-item label="index.ts" value="index"></bs-tree-item>
+  </bs-tree-item>
+  <bs-tree-item label="docs" value="docs">
+    <bs-tree-item label="readme.md" value="readme"></bs-tree-item>
+  </bs-tree-item>
+  <bs-tree-item label="archive" value="archive" disabled></bs-tree-item>
+  <bs-tree-item label="package.json" value="package"></bs-tree-item>
+`;
+const meta = {
+    title: 'Components/bs-tree',
+    parameters: { docs: { description: { component: componentDescription('bs-tree') } } },
+    render: args => html `
+    <div style="width: 360px">
+      <bs-tree ariaLabel="Project files" .value=${args.value} .selectable=${args.selectable}>${items}</bs-tree>
+    </div>
+  `,
+    argTypes: {
+        value: { control: 'text' },
+        selectable: { control: 'boolean' },
+    },
+    args: { value: '', selectable: true },
+};
+export default meta;
+export const Default = {};
+export const ControlledValue = { args: { value: 'button' } };
+export const NonSelectable = { args: { selectable: false } };