@brandsync/wc 1.14.0 → 1.16.0

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);
+    });
+});

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

@@ -0,0 +1,161 @@
+/**
+ * @prop --bs-tree-item-height: Row height (48px). Aliased to --bs-spacing-600.
+ * @prop --bs-tree-item-indent: Extra indent per nesting level. Set directly in px (no 40px spacing token), matching Figma.
+ * @prop --bs-tree-item-radius: Pill corner radius. Aliased to --bs-border-radius-100.
+ * @prop --bs-tree-item-padding-x: Pill horizontal padding. Aliased to --bs-spacing-50.
+ * @prop --bs-tree-item-caret-gap: Gap between the caret and the icon/label group. Aliased to --bs-spacing-150.
+ * @prop --bs-tree-item-content-gap: Gap between the icon and the label. Aliased to --bs-spacing-100.
+ * @prop --bs-tree-item-font-size: Label font size. Aliased to --bs-font-size-md.
+ * @prop --bs-tree-item-line-height: Label line height (unitless px number). Aliased to --bs-line-height-body-md.
+ * @prop --bs-tree-item-text: Label colour. Aliased to --bs-text-default.
+ * @prop --bs-tree-item-icon: Icon and caret colour. Aliased to --bs-icon-default.
+ * @prop --bs-tree-item-bg-selected: Pill background, selected. Aliased to --bs-surface-selected.
+ * @prop --bs-tree-item-bg-hover: Pill background, hovered. Aliased to --bs-surface-hover.
+ * @prop --bs-tree-item-bg-pressed: Pill background, pressed. Aliased to --bs-surface-pressed.
+ * @prop --bs-tree-item-bg-focus: Pill background, keyboard-focused. Aliased to --bs-surface-focus.
+ * @prop --bs-tree-item-bg-selected-hover: Pill background, selected and hovered. Aliased to --bs-surface-selected-hover.
+ * @prop --bs-tree-item-bg-selected-pressed: Pill background, selected and pressed. Aliased to --bs-surface-selected-pressed.
+ * @prop --bs-tree-item-bg-selected-focus: Pill background, selected and keyboard-focused. Aliased to --bs-surface-selected-focus.
+ * @prop --bs-tree-item-focus-ring: Focus ring colour. Aliased to --bs-border-primary-hover.
+ * @prop --bs-tree-item-text-disabled: Label colour, disabled. Aliased to --bs-text-on-disabled.
+ * @prop --bs-tree-item-icon-disabled: Icon and caret colour, disabled. Aliased to --bs-icon-disabled.
+ */
+:host {
+  display: block;
+  outline: none;
+
+  --bs-tree-item-height: var(--bs-spacing-600);
+  --bs-tree-item-indent: 40px;
+  --bs-tree-item-radius: var(--bs-border-radius-100);
+  --bs-tree-item-padding-x: var(--bs-spacing-50);
+  --bs-tree-item-caret-gap: var(--bs-spacing-150);
+  --bs-tree-item-content-gap: var(--bs-spacing-100);
+  --bs-tree-item-font-size: var(--bs-font-size-md);
+  --bs-tree-item-line-height: var(--bs-line-height-body-md);
+  --bs-tree-item-text: var(--bs-text-default);
+  --bs-tree-item-icon: var(--bs-icon-default);
+  --bs-tree-item-bg-selected: var(--bs-surface-selected);
+  --bs-tree-item-bg-hover: var(--bs-surface-hover);
+  --bs-tree-item-bg-pressed: var(--bs-surface-pressed);
+  --bs-tree-item-bg-focus: var(--bs-surface-focus);
+  --bs-tree-item-bg-selected-hover: var(--bs-surface-selected-hover);
+  --bs-tree-item-bg-selected-pressed: var(--bs-surface-selected-pressed);
+  --bs-tree-item-bg-selected-focus: var(--bs-surface-selected-focus);
+  --bs-tree-item-focus-ring: var(--bs-border-primary-hover);
+  --bs-tree-item-text-disabled: var(--bs-text-on-disabled);
+  --bs-tree-item-icon-disabled: var(--bs-icon-disabled);
+
+  /* Text colour on the host so slotted label/icon content inherits it (light and dark). */
+  color: var(--bs-tree-item-text);
+  font-family: inherit;
+}
+
+:host([disabled]) {
+  color: var(--bs-tree-item-text-disabled);
+}
+
+.bs-tree-item__row {
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--bs-tree-item-height);
+  display: flex;
+  padding-inline-start: calc((var(--bs-tree-item-level, 1) - 1) * var(--bs-tree-item-indent));
+}
+
+.bs-tree-item__container {
+  box-sizing: border-box;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-tree-item-caret-gap);
+  padding-inline: var(--bs-tree-item-padding-x);
+  border-radius: var(--bs-tree-item-radius);
+  background: transparent;
+  cursor: pointer;
+}
+
+.bs-tree-item__container--selected {
+  background: var(--bs-tree-item-bg-selected);
+}
+
+.bs-tree-item__container:not(.bs-tree-item__container--disabled):hover {
+  background: var(--bs-tree-item-bg-hover);
+}
+.bs-tree-item__container--selected:not(.bs-tree-item__container--disabled):hover {
+  background: var(--bs-tree-item-bg-selected-hover);
+}
+.bs-tree-item__container:not(.bs-tree-item__container--disabled):active {
+  background: var(--bs-tree-item-bg-pressed);
+}
+.bs-tree-item__container--selected:not(.bs-tree-item__container--disabled):active {
+  background: var(--bs-tree-item-bg-selected-pressed);
+}
+
+/* Keyboard focus lives on the host; the ring is an outline on the pill (offset 0 = drawn just
+   outside it, following the pill's radius), so nothing clips it. */
+:host(:focus-visible) .bs-tree-item__container {
+  background: var(--bs-tree-item-bg-focus);
+  outline: 2px solid var(--bs-tree-item-focus-ring);
+  outline-offset: 0;
+}
+:host(:focus-visible) .bs-tree-item__container--selected {
+  background: var(--bs-tree-item-bg-selected-focus);
+}
+
+.bs-tree-item__container--disabled {
+  cursor: default;
+}
+
+.bs-tree-item__caret {
+  display: flex;
+  flex: none;
+  width: 24px;
+  height: 24px;
+  color: var(--bs-tree-item-icon);
+  transition: transform 150ms ease;
+}
+.bs-tree-item__caret--open {
+  transform: rotate(90deg);
+}
+.bs-tree-item__caret svg,
+.bs-tree-item__icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-tree-item__content {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-tree-item-content-gap);
+  min-width: 0;
+}
+
+.bs-tree-item__icon {
+  display: flex;
+  flex: none;
+  width: 24px;
+  height: 24px;
+  color: var(--bs-tree-item-icon);
+}
+
+.bs-tree-item__label {
+  min-width: 0;
+  font-size: var(--bs-tree-item-font-size);
+  line-height: calc(var(--bs-tree-item-line-height) * 1px);
+  font-weight: var(--bs-font-weight-regular);
+  color: inherit;
+  word-break: break-word;
+}
+
+.bs-tree-item__container--disabled .bs-tree-item__caret,
+.bs-tree-item__container--disabled .bs-tree-item__icon {
+  color: var(--bs-tree-item-icon-disabled);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bs-tree-item__caret {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,305 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A single row of a `bs-tree`. An item that contains child `bs-tree-item` elements is a parent
+ * (it gets an expand/collapse caret and a folder icon); an item without children is a leaf (no
+ * caret, file icon).
+ *
+ * The host carries `role="treeitem"` and the `aria-*` state; the owning `bs-tree` manages the
+ * roving `tabindex`, selection and keyboard navigation. Nesting depth is computed automatically
+ * from the number of ancestor `bs-tree-item` elements and exposed as `aria-level` -- it is not a
+ * prop. Clicking the row selects it; clicking the caret (or pressing Right/Left in a tree) toggles
+ * expansion -- the two are deliberately separate.
+ *
+ * Built from: inline SVG icons only (no existing `bs-*` component covers a tree row).
+ *
+ * @slot - Default slot: child `bs-tree-item` elements (the subtree). Only rendered, inside a
+ * `role="group"` wrapper, while the item is expanded; collapsed children are not accessible.
+ * @slot label - Overrides the `label` text.
+ * @slot icon - Overrides the default folder / file icon. Only used when `showIcon` is `true`.
+ * @part container - The highlighted row pill (carries the hover / selected / focus states).
+ * @part caret - The expand/collapse caret (parents only).
+ * @part icon - The icon wrapper.
+ * @part label - The label wrapper.
+ * @part group - The `role="group"` wrapper around the child items (while expanded).
+ */
+export class BsTreeItem {
+    el;
+    /** The row's text. Use the `label` slot for rich content. */
+    label = '';
+    /** Whether the child items are shown. Only meaningful for parents. Mutable: the caret, the
+     * keyboard and the owning tree toggle it. Reflected. */
+    expanded = false;
+    /** Marks the row as selected. Owned by the tree (single selection, synced with its `value`).
+     * Reflected. */
+    selected = false;
+    /** Disables the row: not focusable, ignores clicks, dimmed. Reflected. */
+    disabled = false;
+    /** Shows the leading icon (default folder / file, or the `icon` slot). */
+    showIcon = true;
+    /** Identifier used in events and for the tree's `value`. Falls back to `label` when empty. */
+    value = '';
+    /** Emitted when the user toggles expansion (caret click or keyboard), with the new `expanded`
+     * value. Not emitted when `expanded` is set from code. */
+    bsToggle;
+    /** Emitted (bubbling, composed) when the user activates the row, with the item's value. The
+     * owning `bs-tree` listens and updates the selection. */
+    bsSelect;
+    level = 1;
+    hasChildren = false;
+    observer;
+    connectedCallback() {
+        this.computeLevel();
+        this.computeHasChildren();
+        this.observer = new MutationObserver(() => this.computeHasChildren());
+        this.observer.observe(this.el, { childList: true });
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    computeLevel() {
+        let level = 1;
+        let p = this.el.parentElement;
+        while (p) {
+            if (p.tagName === 'BS-TREE-ITEM')
+                level++;
+            p = p.parentElement;
+        }
+        this.level = level;
+    }
+    computeHasChildren() {
+        this.hasChildren = Array.from(this.el.children).some(c => c.tagName === 'BS-TREE-ITEM');
+    }
+    /** Sets `expanded` as a user action: updates the prop and emits `bsToggle`. No-op for leaves,
+     * disabled items, or when the value would not change. */
+    async setExpanded(next) {
+        if (this.disabled || !this.hasChildren || this.expanded === next)
+            return;
+        this.expanded = next;
+        this.bsToggle.emit(next);
+    }
+    onCaretClick = (e) => {
+        e.stopPropagation();
+        if (this.disabled)
+            return;
+        this.setExpanded(!this.expanded);
+    };
+    onRowClick = () => {
+        if (this.disabled)
+            return;
+        this.bsSelect.emit(this.value || this.label);
+    };
+    render() {
+        const isParent = this.hasChildren;
+        const managed = !!this.el.closest('bs-tree');
+        const showChildren = isParent && this.expanded;
+        return (h(Host, { key: 'e0c36ce76f0250f77cd920f0e4ce4f713d5298a3', role: "treeitem", "aria-level": String(this.level), "aria-expanded": isParent ? String(this.expanded) : null, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : null, ...(managed || this.disabled ? {} : { tabindex: '0' }) }, h("div", { key: '6b79b70c4688ebce60d70d42b387b106b42ae950', class: "bs-tree-item__row", style: { '--bs-tree-item-level': String(this.level) } }, h("div", { key: '65bf594501088b7510393ad07ecde34f0e4f2287', part: "container", class: {
+                'bs-tree-item__container': true,
+                'bs-tree-item__container--selected': this.selected,
+                'bs-tree-item__container--disabled': this.disabled,
+            }, onClick: this.onRowClick }, isParent && (h("span", { key: 'cfadf7e6d433b61c79055a872311f6dd5758e8df', part: "caret", class: { 'bs-tree-item__caret': true, 'bs-tree-item__caret--open': this.expanded }, "aria-hidden": "true", onClick: this.onCaretClick }, h(CaretRightIcon, { key: '079088e9abcdb46dc95480b4abe8d51f1b0f8095' }))), h("span", { key: 'b3fcebd0cc01f6e00d59b7901fc9ca7c2c50b2f9', class: "bs-tree-item__content" }, this.showIcon && (h("span", { key: '490160aea2ccbd3101c1a46b44615ead36318361', part: "icon", class: "bs-tree-item__icon", "aria-hidden": "true" }, h("slot", { key: '9dd058da6a37117a5496fa28c6be1443304157ce', name: "icon" }, isParent ? h(FolderIcon, null) : h(FileIcon, null)))), h("span", { key: '40e2a4a618ebf6e661e2208c0cfa4c0c44c1d66d', part: "label", class: "bs-tree-item__label" }, h("slot", { key: 'b1999984ebb958ffa3a46c281f3dde023374f4e4', name: "label" }, this.label))))), showChildren && (h("div", { key: 'b6e68b2c00ee98d89c8c6103f58580075b7a67ba', part: "group", class: "bs-tree-item__group", role: "group" }, h("slot", { key: '24e53e0558b6a73f1d12f8dab3f661988dff1d85' })))));
+    }
+    static get is() { return "bs-tree-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-tree-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-tree-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The row's text. Use the `label` slot for rich content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the child items are shown. Only meaningful for parents. Mutable: the caret, the\nkeyboard and the owning tree toggle it. Reflected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the row as selected. Owned by the tree (single selection, synced with its `value`).\nReflected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the row: not focusable, ignores clicks, dimmed. Reflected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the leading icon (default folder / file, or the `icon` slot)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icon",
+                "defaultValue": "true"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifier used in events and for the tree's `value`. Falls back to `label` when empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "level": {},
+            "hasChildren": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsToggle",
+                "name": "bsToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user toggles expansion (caret click or keyboard), with the new `expanded`\nvalue. Not emitted when `expanded` is set from code."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "bsSelect",
+                "name": "bsSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted (bubbling, composed) when the user activates the row, with the item's value. The\nowning `bs-tree` listens and updates the selection."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setExpanded": {
+                "complexType": {
+                    "signature": "(next: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "next",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets `expanded` as a user action: updates the prop and emits `bsToggle`. No-op for leaves,\ndisabled items, or when the value would not change.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+const CaretRightIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M9.75 6L15.75 12L9.75 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const FolderIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M3.75 6.75C3.75 5.92 4.42 5.25 5.25 5.25H9.4C9.8 5.25 10.18 5.41 10.46 5.69L11.54 6.77C11.82 7.05 12.2 7.21 12.6 7.21H18.75C19.58 7.21 20.25 7.88 20.25 8.71V17.25C20.25 18.08 19.58 18.75 18.75 18.75H5.25C4.42 18.75 3.75 18.08 3.75 17.25V6.75Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" })));
+const FileIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M13.5 3.75H7.5C6.67 3.75 6 4.42 6 5.25V18.75C6 19.58 6.67 20.25 7.5 20.25H16.5C17.33 20.25 18 19.58 18 18.75V8.25L13.5 3.75Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" }), h("path", { d: "M13.5 3.75V8.25H18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" }), h("path", { d: "M9 12.75H15M9 15.75H15", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));