@brandsync/wc 1.15.0 → 1.17.0

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: 'fb73a8063a6a5b82df89fe43fe8e2101f676ef1b', part: "container", class: "bs-tree", role: "tree", "aria-label": this.ariaLabel }, h("slot", { key: 'b72a24a057489b00bfc0966ff98328a174f54a14' })));
+    }
+    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 } };

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

@@ -0,0 +1,187 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { userEvent } from "vitest/browser";
+import { assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
+const tree = () => (h("bs-tree", { ariaLabel: "Files" }, h("bs-tree-item", { label: "src", value: "src", expanded: true }, h("bs-tree-item", { label: "components", value: "components", expanded: true }, h("bs-tree-item", { label: "button.tsx", value: "button" })), h("bs-tree-item", { label: "index.ts", value: "index" }))));
+const byValue = (root, v) => Array.from(root.querySelectorAll('bs-tree-item')).find(i => i.value === v);
+const pill = (item) => item.shadowRoot.querySelector('[part="container"]');
+const bgOf = (el) => getComputedStyle(el).backgroundColor;
+const probe = (token) => {
+    const p = document.createElement('div');
+    p.style.background = `var(${token})`;
+    document.body.appendChild(p);
+    const c = getComputedStyle(p).backgroundColor;
+    p.remove();
+    return c;
+};
+describe('bs-tree-item', () => {
+    it('computes level, indent and row geometry', async () => {
+        const { root } = await render(tree());
+        const [l1, l2, l3] = ['src', 'components', 'button'].map(v => byValue(root, v));
+        expect(l1).toEqualAttribute('aria-level', '1');
+        expect(l2).toEqualAttribute('aria-level', '2');
+        expect(l3).toEqualAttribute('aria-level', '3');
+        const host = l1.getBoundingClientRect();
+        [l1, l2, l3].forEach((item, i) => {
+            const row = item.shadowRoot.querySelector('.bs-tree-item__row');
+            expect(row.getBoundingClientRect().height).toBe(48);
+            expect(getComputedStyle(row).paddingInlineStart).toBe(`${i * 40}px`);
+            const p = pill(item);
+            expect(p.getBoundingClientRect().left - host.left).toBe(i * 40);
+            expect(getComputedStyle(p).paddingLeft).toBe('4px');
+            expect(getComputedStyle(p).borderTopLeftRadius).toBe('8px');
+        });
+    });
+    it('parent has caret + 12px gap, 8px icon gap; leaf has no caret', async () => {
+        const { root } = await render(tree());
+        const parent = byValue(root, 'src');
+        const leaf = byValue(root, 'index');
+        expect(getComputedStyle(pill(parent)).columnGap).toBe('12px');
+        const content = parent.shadowRoot.querySelector('.bs-tree-item__content');
+        expect(getComputedStyle(content).columnGap).toBe('8px');
+        expect(parent.shadowRoot.querySelector('[part="caret"]')).not.toBeNull();
+        expect(leaf.shadowRoot.querySelector('[part="caret"]')).toBeNull();
+        expect(pill(leaf).querySelector('[part="icon"]').getBoundingClientRect().left - pill(leaf).getBoundingClientRect().left).toBe(4);
+        assertShadowParts(parent.shadowRoot, ['container', 'caret', 'icon', 'label', 'group']);
+    });
+    it('rotates the caret when open, and aria-expanded only on parents', async () => {
+        const { root, waitForChanges } = await render(h("bs-tree-item", { label: "Docs" }, h("bs-tree-item", { label: "a" })));
+        const item = root;
+        await waitForChanges();
+        const caret = item.shadowRoot.querySelector('[part="caret"]');
+        expect(item).toEqualAttribute('aria-expanded', 'false');
+        expect(getComputedStyle(caret).transform).toBe('none');
+        item.expanded = true;
+        await waitForChanges();
+        expect(item).toEqualAttribute('aria-expanded', 'true');
+        expect(getComputedStyle(caret).transform).not.toBe('none');
+        const child = item.querySelector('bs-tree-item');
+        expect(child.hasAttribute('aria-expanded')).toBe(false);
+    });
+    it('only renders children (group) while expanded', async () => {
+        const { root, waitForChanges } = await render(h("bs-tree-item", { label: "Docs" }, h("bs-tree-item", { label: "a" })));
+        const item = root;
+        const child = item.querySelector('bs-tree-item');
+        await waitForChanges();
+        expect(item.shadowRoot.querySelector('[role="group"]')).toBeNull();
+        expect(child.getBoundingClientRect().height).toBe(0);
+        item.expanded = true;
+        await waitForChanges();
+        expect(item.shadowRoot.querySelector('[role="group"]')).not.toBeNull();
+        expect(child.getBoundingClientRect().height).toBe(48);
+    });
+    it('emits bsToggle from the caret without selecting, and bsSelect from the row', async () => {
+        const { root, waitForChanges } = await render(h("bs-tree-item", { label: "Docs", value: "docs" }, h("bs-tree-item", { label: "a" })));
+        const item = root;
+        await waitForChanges();
+        const toggles = [];
+        const selects = [];
+        item.addEventListener('bsToggle', e => toggles.push(e.detail));
+        item.addEventListener('bsSelect', e => selects.push(e.detail));
+        item.shadowRoot.querySelector('[part="caret"]').click();
+        await waitForChanges();
+        expect(toggles).toEqual([true]);
+        expect(selects).toEqual([]);
+        expect(item.expanded).toBe(true);
+        pill(item).click();
+        expect(selects).toEqual(['docs']);
+        expect(toggles).toEqual([true]);
+    });
+    it('showIcon=false hides the icon and the icon slot overrides the default', async () => {
+        const { root, waitForChanges } = await render(h("div", null, h("bs-tree-item", { id: "a", label: "A", showIcon: false }), h("bs-tree-item", { id: "b", label: "B" }, h("span", { slot: "icon", id: "custom" }, "*"))));
+        await waitForChanges();
+        const a = root.querySelector('#a');
+        const b = root.querySelector('#b');
+        expect(a.shadowRoot.querySelector('[part="icon"]')).toBeNull();
+        const slot = b.shadowRoot.querySelector('slot[name="icon"]');
+        expect(slot.assignedElements()[0].id).toBe('custom');
+    });
+    it('label slot overrides the label', async () => {
+        const { root, waitForChanges } = await render(h("bs-tree-item", { label: "Plain" }, h("b", { slot: "label" }, "Rich")));
+        await waitForChanges();
+        const slot = root.shadowRoot.querySelector('slot[name="label"]');
+        expect(slot.assignedElements()[0].textContent).toBe('Rich');
+    });
+    it('pill background per state matches the token', async () => {
+        const { root, waitForChanges } = await render(h("div", null, h("bs-tree-item", { id: "n", label: "n" }), h("bs-tree-item", { id: "s", label: "s", selected: true })));
+        await waitForChanges();
+        const n = root.querySelector('#n');
+        const s = root.querySelector('#s');
+        // The shared browser keeps its pointer where an earlier test left it, which can leave a row
+        // hovered (and mid-fade); move it away and let transitions finish before reading backgrounds.
+        await userEvent.unhover(pill(n));
+        await new Promise(r => setTimeout(r, 250));
+        expect(bgOf(pill(n))).toBe('rgba(0, 0, 0, 0)');
+        expect(bgOf(pill(s))).toBe(probe('--bs-surface-selected'));
+        // Hover via a real pointer move.
+        await userEvent.hover(pill(n));
+        expect(bgOf(pill(n))).toBe(probe('--bs-surface-hover'));
+        await userEvent.hover(pill(s));
+        expect(bgOf(pill(s))).toBe(probe('--bs-surface-selected-hover'));
+    });
+    it('shows the focus surface and a 2px ring on keyboard focus', async () => {
+        const { root, waitForChanges } = await render(h("div", null, h("bs-tree-item", { id: "n", label: "n" }), h("bs-tree-item", { id: "s", label: "s", selected: true })));
+        await waitForChanges();
+        const n = root.querySelector('#n');
+        const s = root.querySelector('#s');
+        await userEvent.tab();
+        expect(document.activeElement).toBe(n);
+        const cs = getComputedStyle(pill(n));
+        expect(cs.outlineWidth).toBe('2px');
+        expect(cs.outlineStyle).toBe('solid');
+        expect(cs.outlineColor).toBe(probe('--bs-border-primary-hover'));
+        expect(cs.outlineOffset).toBe('0px');
+        expect(cs.backgroundColor).toBe(probe('--bs-surface-focus'));
+        await userEvent.tab();
+        expect(document.activeElement).toBe(s);
+        expect(bgOf(pill(s))).toBe(probe('--bs-surface-selected-focus'));
+    });
+    it('disabled: not focusable, ignores clicks, dimmed text', async () => {
+        const { root, waitForChanges } = await render(h("div", null, h("bs-tree-item", { id: "d", label: "d", disabled: true }, h("bs-tree-item", { label: "x" })), h("bs-tree-item", { id: "e", label: "e" })));
+        await waitForChanges();
+        const d = root.querySelector('#d');
+        const e = root.querySelector('#e');
+        expect(d).toEqualAttribute('aria-disabled', 'true');
+        expect(d.hasAttribute('tabindex')).toBe(false);
+        let selects = 0;
+        d.addEventListener('bsSelect', () => selects++);
+        pill(d).click();
+        d.shadowRoot.querySelector('[part="caret"]').click();
+        await waitForChanges();
+        expect(selects).toBe(0);
+        expect(d.expanded).toBe(false);
+        await userEvent.tab();
+        expect(document.activeElement).toBe(e);
+        expect(getComputedStyle(d).color).toBe(probe('--bs-text-on-disabled').replace(/^/, ''));
+        expect(getComputedStyle(pill(d)).cursor).toBe('default');
+        await userEvent.hover(pill(d));
+        expect(bgOf(pill(d))).toBe('rgba(0, 0, 0, 0)');
+    });
+    it('text colour follows the theme (dark mode)', async () => {
+        const { root, waitForChanges } = await render(h("bs-tree-item", { label: "Theme" }));
+        await waitForChanges();
+        const item = root;
+        const light = getComputedStyle(item).color;
+        const html = document.documentElement;
+        const prev = html.getAttribute('data-theme');
+        html.setAttribute('data-theme', 'dark');
+        try {
+            const dark = getComputedStyle(item).color;
+            const p = document.createElement('span');
+            p.style.color = 'var(--bs-text-default)';
+            document.body.appendChild(p);
+            expect(dark).toBe(getComputedStyle(p).color);
+            p.remove();
+            expect(dark).not.toBe(light);
+        }
+        finally {
+            if (prev === null)
+                html.removeAttribute('data-theme');
+            else
+                html.setAttribute('data-theme', prev);
+        }
+    });
+    it('has no axe violations', async () => {
+        const { root } = await render(tree());
+        await runAxeCheck(root);
+    });
+});