@brandsync/wc 1.19.0 → 1.20.1

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

@@ -0,0 +1,345 @@
+import { h } from "@stencil/core";
+const OVERFLOW_ATTR = 'data-bs-toolbar-overflowed';
+/**
+ * A bar of related controls (buttons, toggles, selects) with a left and a right group, grouped
+ * separators, a single tab stop and arrow-key navigation between the controls (WAI-ARIA toolbar
+ * pattern). Optionally, controls that do not fit collapse into a "more" menu.
+ *
+ * Keyboard: the toolbar is ONE tab stop. Left/Right arrows (Up/Down when `orientation="vertical"`,
+ * mirrored in RTL) move focus between the controls and wrap; Home/End jump to the first/last. The
+ * control last focused is the one Tab returns to. Disabled controls are skipped.
+ *
+ * Direct children of the `left`/`right` slots are the toolbar's controls. A slotted `bs-divider` is a
+ * separator: the toolbar sets its `orientation` perpendicular to its own and skips it when navigating.
+ *
+ * ## When to use
+ * - Several related actions that act on the same content (a text editor's formatting row, a table's
+ *   bulk actions, a viewer's zoom controls).
+ *
+ * ## When not to use
+ * - Navigating between pages or sections -- use `bs-tabs`, `bs-navigation-header` or a nav.
+ * - A single action or a form's submit row -- place the `bs-button`s directly.
+ * - A menu of actions that opens on demand -- use `bs-popover` with `bs-menu`.
+ *
+ * ## Overflow
+ * With `overflow` set (horizontal only), controls from the end of the bar that do not fit are hidden and
+ * listed in a `bs-menu` behind a "more" button; choosing an entry activates the original control. An
+ * entry's text is the control's `data-label`, else its `aria-label`, else its text content, else `title`:
+ * give icon-only controls one of these.
+ *
+ * Composition: built from `bs-icon-button`, `bs-popover`, `bs-menu` and `bs-menu-item` (overflow) and
+ * expects `bs-button`, `bs-icon-button`, `bs-divider` etc. as slotted content.
+ *
+ * @slot left - The left (leading) group of controls.
+ * @slot right - The right (trailing) group of controls; pushed to the far end of the bar.
+ * @part container - The element carrying `role="toolbar"`.
+ * @part left - The wrapper around the `left` slot.
+ * @part right - The wrapper around the `right` slot.
+ * @part overflow - The overflow `bs-popover` (only rendered when `overflow` is set).
+ */
+// Note: CSS Custom Properties (--bs-toolbar-*) are documented via @prop comments in bs-toolbar.css.
+export class BsToolbar {
+    el;
+    /** Accessible name of the toolbar (`aria-label`). Required for a good experience, and essential
+     * when a page has more than one toolbar -- say what it controls ("Text formatting"). */
+    label;
+    /** Direction of the bar. Sets `aria-orientation`, switches which arrow keys navigate, and sets the
+     * orientation of slotted `bs-divider`s to the perpendicular one. */
+    orientation = 'horizontal';
+    /** Collapse controls that do not fit into a "more" menu (see Overflow in the description).
+     * Horizontal toolbars only; ignored when `orientation="vertical"`. */
+    overflow = false;
+    /** Accessible name and tooltip of the overflow button. */
+    overflowLabel = 'More actions';
+    overflowed = [];
+    activeEl;
+    resizeObserver;
+    containerEl;
+    triggerEl;
+    popoverEl;
+    componentDidLoad() {
+        this.syncItems();
+        this.observe();
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+    }
+    connectedCallback() {
+        // Re-attached after a disconnect (componentDidLoad only runs once).
+        if (this.containerEl)
+            this.observe();
+    }
+    onConfigChange() {
+        this.syncItems();
+        this.observe();
+    }
+    observe() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+        if (!this.overflowActive() || typeof ResizeObserver === 'undefined' || !this.containerEl)
+            return;
+        this.resizeObserver = new ResizeObserver(() => this.syncItems());
+        this.resizeObserver.observe(this.containerEl);
+    }
+    overflowActive() {
+        return this.overflow && this.orientation === 'horizontal';
+    }
+    /** Every direct child of the two groups, in visual order (left group, then right group). */
+    children() {
+        const slots = Array.from(this.el.shadowRoot?.querySelectorAll('slot') ?? []);
+        return slots.flatMap(s => s.assignedElements({ flatten: true }));
+    }
+    isDivider(el) {
+        return el.tagName === 'BS-DIVIDER';
+    }
+    /** Controls that arrow keys can land on: not separators, not disabled, not collapsed into the menu. */
+    navigable() {
+        const items = this.children().filter(c => !this.isDivider(c) && !c.disabled && c.getAttribute('aria-disabled') !== 'true' && !c.hasAttribute(OVERFLOW_ATTR) && !c.hidden);
+        if (this.triggerEl && this.overflowed.length > 0)
+            items.push(this.triggerEl);
+        return items;
+    }
+    labelOf(el) {
+        return (el.dataset.label || el.getAttribute('aria-label') || el.textContent?.trim() || el.getAttribute('title') || '').trim();
+    }
+    /** Single pass: perpendicular dividers, overflow partitioning, roving tabindex. */
+    syncItems = () => {
+        const perpendicular = this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
+        this.children().forEach(c => {
+            if (this.isDivider(c))
+                c.orientation = perpendicular;
+        });
+        this.updateOverflow();
+        this.syncRoving();
+    };
+    updateOverflow() {
+        const items = this.children();
+        items.forEach(c => c.removeAttribute(OVERFLOW_ATTR));
+        if (!this.overflowActive() || !this.containerEl) {
+            if (this.overflowed.length)
+                this.overflowed = [];
+            return;
+        }
+        const container = this.containerEl;
+        // Reserve room for the "more" button while measuring.
+        if (this.popoverEl)
+            this.popoverEl.hidden = false;
+        const collapsed = [];
+        for (let i = items.length - 1; i >= 0 && container.scrollWidth > container.clientWidth + 0.5; i--) {
+            items[i].setAttribute(OVERFLOW_ATTR, '');
+            if (!this.isDivider(items[i]))
+                collapsed.unshift(items[i]);
+        }
+        // Do not leave a separator dangling at the end of what is still visible.
+        for (let i = items.length - 1; i >= 0; i--) {
+            if (items[i].hasAttribute(OVERFLOW_ATTR))
+                continue;
+            if (this.isDivider(items[i]) && collapsed.length)
+                items[i].setAttribute(OVERFLOW_ATTR, '');
+            else
+                break;
+        }
+        if (this.popoverEl)
+            this.popoverEl.hidden = collapsed.length === 0;
+        const next = collapsed.map(el => ({ el, label: this.labelOf(el) }));
+        const same = next.length === this.overflowed.length && next.every((n, i) => n.el === this.overflowed[i].el && n.label === this.overflowed[i].label);
+        if (!same)
+            this.overflowed = next;
+    }
+    /** Roving tabindex: exactly one control is in the tab order. */
+    syncRoving() {
+        const nav = this.navigable();
+        const all = [...this.children().filter(c => !this.isDivider(c)), ...(this.triggerEl ? [this.triggerEl] : [])];
+        if (!this.activeEl || !nav.includes(this.activeEl))
+            this.activeEl = nav[0];
+        all.forEach(c => c.setAttribute('tabindex', c === this.activeEl ? '0' : '-1'));
+    }
+    componentDidRender() {
+        // The trigger/popover only exist after a render; re-sync tabindex for them.
+        this.syncRoving();
+    }
+    onFocusIn(ev) {
+        const path = ev.composedPath();
+        const hit = this.navigable().find(c => path.includes(c));
+        if (hit && hit !== this.activeEl) {
+            this.activeEl = hit;
+            this.syncRoving();
+        }
+    }
+    onKeyDown(ev) {
+        const vertical = this.orientation === 'vertical';
+        const rtl = getComputedStyle(this.el).direction === 'rtl';
+        const prevKey = vertical ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';
+        const nextKey = vertical ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';
+        if (![prevKey, nextKey, 'Home', 'End'].includes(ev.key))
+            return;
+        // An open overflow menu uses its own arrow keys.
+        if (this.popoverEl?.open)
+            return;
+        const nav = this.navigable();
+        const path = ev.composedPath();
+        const current = nav.findIndex(c => path.includes(c));
+        if (current === -1)
+            return;
+        // Controls that use the arrow keys themselves (text fields, selects) keep them.
+        const origin = path[0];
+        if (origin?.matches?.('input:not([type="button"]):not([type="checkbox"]):not([type="radio"]), textarea, select') && ev.key !== 'Home' && ev.key !== 'End')
+            return;
+        ev.preventDefault();
+        let next = current;
+        if (ev.key === nextKey)
+            next = (current + 1) % nav.length;
+        else if (ev.key === prevKey)
+            next = (current - 1 + nav.length) % nav.length;
+        else if (ev.key === 'Home')
+            next = 0;
+        else
+            next = nav.length - 1;
+        this.activeEl = nav[next];
+        this.syncRoving();
+        nav[next].focus();
+    }
+    activate(entry) {
+        if (this.popoverEl)
+            this.popoverEl.open = false;
+        const inner = entry.el.shadowRoot?.querySelector('button, a');
+        (inner ?? entry.el).click();
+    }
+    render() {
+        const showOverflow = this.overflowActive();
+        return (h("div", { key: '93257f14c9265acd97ba79c3f0fb194ed5d6a9c1', part: "container", role: "toolbar", "aria-label": this.label, "aria-orientation": this.orientation, class: `bs-toolbar bs-toolbar--${this.orientation}`, ref: el => (this.containerEl = el) }, h("div", { key: 'c7354cad6a03fb6f2fa844a37212612111619451', part: "left", class: "bs-toolbar__group bs-toolbar__group--left" }, h("slot", { key: 'f5c27b8a5e4402c1d2e29435b9037980cac485e7', name: "left", onSlotchange: this.syncItems })), h("div", { key: '22e411c3e07a31a5227fcc4acbb6ab86d7a26969', part: "right", class: "bs-toolbar__group bs-toolbar__group--right" }, h("slot", { key: 'c5233aab6977a57022bd98cb3f439808680997db', name: "right", onSlotchange: this.syncItems })), showOverflow && (h("bs-popover", { key: '0f2e2537a2a1ec1d5617bb149a57f4ecba5b4943', part: "overflow", class: "bs-toolbar__overflow", placement: "bottom-end", hidden: this.overflowed.length === 0, ref: el => (this.popoverEl = el) }, h("bs-icon-button", { key: '5fc3dd6a5e2022a1fb6e550fd24ac5c37eab4ba0', slot: "trigger", variant: "subtle", size: "md", ariaLabel: this.overflowLabel, title: this.overflowLabel, ref: el => (this.triggerEl = el) }, h(MoreIcon, { key: '860ac10129d78cf94554c8a21a98dd02aec17372' })), h("bs-menu", { key: '29900699fb44356d6d0e3ff2b8f2bebb3c14395f' }, this.overflowed.map(entry => (h("bs-menu-item", { onBsSelect: () => this.activate(entry) }, entry.label))))))));
+    }
+    static get is() { return "bs-toolbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-toolbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-toolbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the toolbar (`aria-label`). Required for a good experience, and essential\nwhen a page has more than one toolbar -- say what it controls (\"Text formatting\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsToolbarOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BsToolbarOrientation": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-toolbar/bs-toolbar.tsx",
+                            "id": "src/components/bs-toolbar/bs-toolbar.tsx::BsToolbarOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Direction of the bar. Sets `aria-orientation`, switches which arrow keys navigate, and sets the\norientation of slotted `bs-divider`s to the perpendicular one."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "overflow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Collapse controls that do not fit into a \"more\" menu (see Overflow in the description).\nHorizontal toolbars only; ignored when `orientation=\"vertical\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "overflow",
+                "defaultValue": "false"
+            },
+            "overflowLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name and tooltip of the overflow button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overflow-label",
+                "defaultValue": "'More actions'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "overflowed": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "orientation",
+                "methodName": "onConfigChange"
+            }, {
+                "propName": "overflow",
+                "methodName": "onConfigChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "focusin",
+                "method": "onFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+const MoreIcon = () => (h("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "currentColor", "aria-hidden": "true" }, h("circle", { cx: "5", cy: "12", r: "1.75" }), h("circle", { cx: "12", cy: "12", r: "1.75" }), h("circle", { cx: "19", cy: "12", r: "1.75" })));

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

@@ -0,0 +1,49 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-toolbar',
+    parameters: { docs: { description: { component: componentDescription('bs-toolbar') } } },
+    render: args => html `
+    <bs-toolbar label=${args.label} orientation=${args.orientation} ?overflow=${args.overflow} overflow-label=${args.overflowLabel}>
+      <bs-button slot="left" variant="subtle" size="sm">Bold</bs-button>
+      <bs-button slot="left" variant="subtle" size="sm">Italic</bs-button>
+      <bs-button slot="left" variant="subtle" size="sm">Underline</bs-button>
+      <bs-divider slot="left"></bs-divider>
+      <bs-button slot="left" variant="subtle" size="sm">Link</bs-button>
+      <bs-button slot="left" variant="subtle" size="sm" disabled>Image</bs-button>
+      <bs-button slot="right" variant="outlined" size="sm">Preview</bs-button>
+      <bs-button slot="right" size="sm">Publish</bs-button>
+    </bs-toolbar>
+  `,
+    argTypes: {
+        label: { control: 'text', description: propDescription('bs-toolbar', 'label') },
+        orientation: { control: 'select', options: ['horizontal', 'vertical'], description: propDescription('bs-toolbar', 'orientation') },
+        overflow: { control: 'boolean', description: propDescription('bs-toolbar', 'overflow') },
+        overflowLabel: { control: 'text', description: propDescription('bs-toolbar', 'overflowLabel') },
+    },
+    args: { label: 'Text formatting', orientation: 'horizontal', overflow: false, overflowLabel: 'More actions' },
+};
+export default meta;
+export const Default = {};
+export const Vertical = {
+    args: { orientation: 'vertical' },
+};
+export const WithOverflow = {
+    name: 'With overflow',
+    args: { overflow: true },
+    render: args => html `
+    <p>Resize the frame: controls that do not fit move into the "more" menu.</p>
+    <div style="width: 360px; resize: horizontal; overflow: hidden; border: 1px dashed var(--bs-border-default); padding: 4px;">
+      <bs-toolbar label=${args.label} ?overflow=${args.overflow} overflow-label=${args.overflowLabel}>
+        <bs-button slot="left" variant="subtle" size="sm">Bold</bs-button>
+        <bs-button slot="left" variant="subtle" size="sm">Italic</bs-button>
+        <bs-button slot="left" variant="subtle" size="sm">Underline</bs-button>
+        <bs-divider slot="left"></bs-divider>
+        <bs-button slot="left" variant="subtle" size="sm">Link</bs-button>
+        <bs-button slot="left" variant="subtle" size="sm">Image</bs-button>
+        <bs-button slot="right" variant="subtle" size="sm">Preview</bs-button>
+        <bs-button slot="right" variant="subtle" size="sm">Share</bs-button>
+      </bs-toolbar>
+    </div>
+  `,
+};

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

@@ -42,7 +42,7 @@ export class BsTooltip {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: 'c2d5db93c82893e1fda6baab1b3d238cb18a258c', class: "bs-tooltip" }, h("span", { key: '028716108a7e548e8e5747cb36349f386d279380', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '09d56d5c90014d5bfe752de30fbe50f02a63343c', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '473eb298bd6b402555d0b42922dbf9ee1384785e' }))));
+        return (h("div", { key: '7438b2bc709f2d62040070103f75a4dd0e726114', class: "bs-tooltip" }, h("span", { key: 'cd88ccd274ee0350e98ea445389fcd84ab7d02dc', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: 'c3729dae5e62fd114a16f6ab4fa4022d85b7fc7b', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '37b8b395d40fb5736780013d968be1ff5ce428fc' }))));
     }
     static get is() { return "bs-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -107,7 +107,7 @@ export class BsTooltipTrigger {
     };
     render() {
         const show = (this.visible && !!this.text) || (this.closing && !!this.text);
-        return (h("div", { key: '06db867226380b3fcee2542a04b9697426a0107f', 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: '7f86ca80968a51df576aafb577457bcbbd4c4a6a' }), h("div", { key: '6d5c5600ea220ca7b6189f05a83b93fce16584cb', part: "tooltip", id: this.tooltipId, class: "bs-tooltip-trigger__tooltip", role: "tooltip", hidden: !show, ref: el => (this.tipEl = el) }, h("bs-tooltip", { key: 'feb9d57972b2d8e7e21846b0cf39a532b0004f9b', ref: el => (this.bubbleEl = el) }, this.text))));
+        return (h("div", { key: '0c851c6c284a63da84ff11fd411764c705513245', 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: '3653d362eafdd977e8b9d250d1852195e7ba270f' }), h("div", { key: '64619b9d59eb00b3e453d6bb924ad982a7e2bec6', part: "tooltip", id: this.tooltipId, class: "bs-tooltip-trigger__tooltip", role: "tooltip", hidden: !show, ref: el => (this.tipEl = el) }, h("bs-tooltip", { key: 'a160e7016cf49323d410dc10930d6994e8f41c3f', ref: el => (this.bubbleEl = el) }, this.text))));
     }
     static get is() { return "bs-tooltip-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -189,7 +189,7 @@ export class BsTree {
         e.preventDefault();
     }
     render() {
-        return (h("div", { key: '7d6223a9fa7bf6b434d3051a4a48e88c4006d907', part: "container", class: "bs-tree", role: "tree", "aria-label": this.ariaLabel }, h("slot", { key: '0cd83d4fe6acfda0d4c4ab789af4b2f5fc1c12d7' })));
+        return (h("div", { key: '019cf7e2aaefd8b3f51c40ea0570fa9b89b5e649', part: "container", class: "bs-tree", role: "tree", "aria-label": this.ariaLabel }, h("slot", { key: 'ffe3e5e88c82965542974fa1433c43310d197c66' })));
     }
     static get is() { return "bs-tree"; }
     static get encapsulation() { return "shadow"; }

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

@@ -93,11 +93,11 @@ export class BsTreeItem {
         const isParent = this.hasChildren;
         const managed = !!this.el.closest('bs-tree');
         const showChildren = isParent && this.expanded;
-        return (h(Host, { key: '12205542fd8cd7558c9fb3e421c92c06d1809e40', 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: '11d9fe5a0ed281f9ad898bf5221dd00f22e2701d', class: "bs-tree-item__row", style: { '--bs-tree-item-level': String(this.level) } }, h("div", { key: '4ffe7bf7fb24d06fdcde825b9b72370538543854', part: "container", class: {
+        return (h(Host, { key: '6f3c66ebc9521308d5d62c2bf99686aa9a6b81bf', 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: '8e12e8462f1a44affa4497aea0e9a0479b803856', class: "bs-tree-item__row", style: { '--bs-tree-item-level': String(this.level) } }, h("div", { key: 'f741901613fc37b68543bdd9653fee29e4f796fc', 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 }, !this.disabled && h("bs-ripple", { key: '3469a524f59373948dafd9b16bb7eedf1a6f1000', part: "ripple" }), isParent && (h("span", { key: 'd4365c571e5fd5388debcc09e92d4c7fc5bfbe6c', part: "caret", class: { 'bs-tree-item__caret': true, 'bs-tree-item__caret--open': this.expanded }, "aria-hidden": "true", onClick: this.onCaretClick }, h(CaretRightIcon, { key: '1f68d7131a8e9e24bdca9d42c82c1af9af8bb09d' }))), h("span", { key: 'f525e26ee5ff9a0ca603e5e96ae7156da97f0fa0', class: "bs-tree-item__content" }, this.showIcon && (h("span", { key: '81a0810e006cf932cbfc141b87673f7602f19727', part: "icon", class: "bs-tree-item__icon", "aria-hidden": "true" }, h("slot", { key: 'f51ed15e89cbaa18f0f6e70e62f050399d6b339a', name: "icon" }, isParent ? h(FolderIcon, null) : h(FileIcon, null)))), h("span", { key: '181ccdf186bc1d0138094fb689366881301c1960', part: "label", class: "bs-tree-item__label" }, h("slot", { key: 'cc449375c076dc296a1c5047d7aa0d4b27cdc592', name: "label" }, this.label))))), showChildren && (h("div", { key: '535958746bc51e1efde29862f54413b2c9e6b51d', part: "group", class: "bs-tree-item__group", role: "group" }, h("slot", { key: 'f0fc63938c90ea7ebb620db8f2abdf5eedb7f2d1' })))));
+            }, onClick: this.onRowClick }, !this.disabled && h("bs-ripple", { key: 'ecf50e0d6aa5301e1d20c35315472df2350c7096', part: "ripple" }), isParent && (h("span", { key: 'd74db0427a8aabf2af0ea5bd43eaefd7945e014f', part: "caret", class: { 'bs-tree-item__caret': true, 'bs-tree-item__caret--open': this.expanded }, "aria-hidden": "true", onClick: this.onCaretClick }, h(CaretRightIcon, { key: '2f4e12fe239b2527406204e0e3a7f41648dfa4d5' }))), h("span", { key: '4da3bb534d15625c414df6997b7dc7a290b66a29', class: "bs-tree-item__content" }, this.showIcon && (h("span", { key: '17031fb35aabc2e10d030c4434a4e6134d87a76a', part: "icon", class: "bs-tree-item__icon", "aria-hidden": "true" }, h("slot", { key: 'a8893678e82949127398b93cbfd0ab5e6bd83a2c', name: "icon" }, isParent ? h(FolderIcon, null) : h(FileIcon, null)))), h("span", { key: 'ff63bf09058f4e09bde9adcccdc57a0a6b9ffa37', part: "label", class: "bs-tree-item__label" }, h("slot", { key: '556b43ed85f0996034a0ca8b214cca6cc619ed26', name: "label" }, this.label))))), showChildren && (h("div", { key: 'd4d5ffa0b6b9697dd39cc89bb15a752647abb0b6', part: "group", class: "bs-tree-item__group", role: "group" }, h("slot", { key: 'eaec9a53f467af86637e040358bf75eff76dd139' })))));
     }
     static get is() { return "bs-tree-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,10 +1,12 @@
 import { html } from "lit";
 import { componentDescription } from "../../stories-utils";
+// A bs-tree-item is role="treeitem", which must sit inside a role="tree" -- a bare `div` stands in for
+// bs-tree here so the item is shown on its own without the tree's roving-tabindex behaviour.
 const meta = {
     title: 'Components/bs-tree-item',
     parameters: { docs: { description: { component: componentDescription('bs-tree-item') } } },
     render: args => html `
-    <div style="width: 360px">
+    <div role="tree" aria-label="Example tree" style="width: 360px">
       <bs-tree-item label=${args.label} ?expanded=${args.expanded} ?selected=${args.selected} ?disabled=${args.disabled} .showIcon=${args.showIcon}>
         <bs-tree-item label="Child item"></bs-tree-item>
       </bs-tree-item>
@@ -27,12 +29,12 @@ export const Disabled = { args: { disabled: true } };
 export const WithoutIcon = { args: { showIcon: false } };
 export const Child = {
     render: () => html `
-    <div style="width: 360px"><bs-tree-item label="Leaf item"></bs-tree-item></div>
+    <div role="tree" aria-label="Example tree" style="width: 360px"><bs-tree-item label="Leaf item"></bs-tree-item></div>
   `,
 };
 export const Levels = {
     render: () => html `
-    <div style="width: 360px">
+    <div role="tree" aria-label="Example tree" style="width: 360px">
       <bs-tree-item label="Level 1" expanded>
         <bs-tree-item label="Level 2" expanded>
           <bs-tree-item label="Level 3"></bs-tree-item>
@@ -43,7 +45,7 @@ export const Levels = {
 };
 export const CustomIcon = {
     render: () => html `
-    <div style="width: 360px">
+    <div role="tree" aria-label="Example tree" style="width: 360px">
       <bs-tree-item label="Starred">
         <svg slot="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
           <path d="M12 3.75L14.6 9.1L20.5 9.9L16.2 14L17.3 19.9L12 17.1L6.7 19.9L7.8 14L3.5 9.9L9.4 9.1L12 3.75Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />

package/dist/collection/components/bs-whats-new-entry/bs-whats-new-entry.js

@@ -50,7 +50,7 @@ export class BsWhatsNewEntry {
     hasImage = false;
     render() {
         const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 3));
-        return (h("div", { key: '94bd61474a16e5bb5f139017903ccd2c7a00a29e', class: "bs-whats-new-entry" }, (this.tag || this.date || this.unread) && (h("div", { key: 'f19308efc7626e97d1f3b6200cc619f1c6cfef53', part: "meta", class: "bs-whats-new-entry__meta" }, this.tag && (h("bs-chip-informative", { key: 'f296dc3fe97ec2c88e56f08a4aa599326d8ab31f', part: "tag", size: "sm", color: this.tagColor }, this.tag)), this.date && (h("span", { key: '2182add62fff635204bc82fc7244a0c9e86f402c', part: "date", class: "bs-whats-new-entry__date" }, this.date)), this.unread && (h("span", { key: 'd0d7fe472b04e36cebfce769b41b0ec0a03c1189', part: "unread", class: "bs-whats-new-entry__unread" }, h("span", { key: 'f0cecdf0217e1d37de21391aaed2ec9f8e84e2db', class: "bs-whats-new-entry__sr-only" }, this.unreadLabel))))), h("div", { key: 'a91c74c0749d4c3e8753f0ae099db3527b4708bf', part: "image", class: { 'bs-whats-new-entry__image': true, 'bs-whats-new-entry__image--visible': this.hasImage } }, h("slot", { key: '27df8b523ae98ba0ae50bd351b71d33d33fcec79', name: "image", onSlotchange: (ev) => (this.hasImage = ev.target.assignedNodes().length > 0) })), h("div", { key: '0569d8579c03f7acabc42735c7698692cc8e0f7c', class: "bs-whats-new-entry__content" }, this.heading && h(`h${level}`, { part: 'heading', class: { 'bs-whats-new-entry__heading': true } }, this.heading), this.description && (h("p", { key: 'b3044456157b53439ca1c1cb48974ec300a938de', part: "description", class: "bs-whats-new-entry__description" }, this.description)), this.actionLabel && (h("bs-button", { key: 'd57c182eb2a655c1dbff70c97f5aa98327dbb03e', part: "action", class: "bs-whats-new-entry__action", variant: "subtle", size: "sm", onClick: () => this.bsAction.emit() }, this.actionLabel, h("svg", { key: '106945e585e6b38071a0041aa9ab56b48d47a517', slot: "end-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: 'b5a1586a5a2e2831191082d1818971d8c29a54b3', d: "M5 12H19" }), h("path", { key: '273362647cd1098d2d865c9249b3f416d924c54f', d: "M13 6L19 12L13 18" }))))), this.divider && h("div", { key: '29d89b64905a1e0bde5e43540602134fb972cc6a', part: "divider", class: "bs-whats-new-entry__divider" })));
+        return (h("div", { key: 'b0baa810350e1d1ba94e195e5bb71568916648c1', class: "bs-whats-new-entry" }, (this.tag || this.date || this.unread) && (h("div", { key: 'f6aceea84fa2d8093fee7bf1f12e1a33d157773a', part: "meta", class: "bs-whats-new-entry__meta" }, this.tag && (h("bs-chip-informative", { key: '5177b66addbdb1bc0a8896f14bfde2d165bdc22d', part: "tag", size: "sm", color: this.tagColor }, this.tag)), this.date && (h("span", { key: 'bd9e2492cf9b78d808676211be29283a3853a5f1', part: "date", class: "bs-whats-new-entry__date" }, this.date)), this.unread && (h("span", { key: '2a99186b9ac53f76cf8e4e148971dd96bebc3339', part: "unread", class: "bs-whats-new-entry__unread" }, h("span", { key: '777d53e3498d5b9ccc33b196ddefda132ec8966d', class: "bs-whats-new-entry__sr-only" }, this.unreadLabel))))), h("div", { key: '685ca45b3fa9677a29c6cfceb2f142bbd10aeaaa', part: "image", class: { 'bs-whats-new-entry__image': true, 'bs-whats-new-entry__image--visible': this.hasImage } }, h("slot", { key: '39cb638562151a700da6221de805d277fc38a912', name: "image", onSlotchange: (ev) => (this.hasImage = ev.target.assignedNodes().length > 0) })), h("div", { key: '6d93a6efef38d79e711772bd674812721d6c4036', class: "bs-whats-new-entry__content" }, this.heading && h(`h${level}`, { part: 'heading', class: { 'bs-whats-new-entry__heading': true } }, this.heading), this.description && (h("p", { key: '2178e908d195961d7af63f96483978a7727f2daa', part: "description", class: "bs-whats-new-entry__description" }, this.description)), this.actionLabel && (h("bs-button", { key: '1e63a9582f52578d4507b509b1cc31f85f29518f', part: "action", class: "bs-whats-new-entry__action", variant: "subtle", size: "sm", onClick: () => this.bsAction.emit() }, this.actionLabel, h("svg", { key: '5e81c66251de6ac1fadc34acfe38ba69296d1a80', slot: "end-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '4909c3ab738167ff9c4b43a4f3091c5ebc9708ee', d: "M5 12H19" }), h("path", { key: 'e5316c0212c03d7fb576d99e4e823cc23b820d65', d: "M13 6L19 12L13 18" }))))), this.divider && h("div", { key: '77fa0ba2722d89185b6084c50526083e5ce0ddcb', part: "divider", class: "bs-whats-new-entry__divider" })));
     }
     static get is() { return "bs-whats-new-entry"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/disabled-aria.cmp.test.js

@@ -0,0 +1,19 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const cases = [
+    { name: 'bs-accordion', mount: d => h("bs-accordion", { disabled: d }, "Body"), target: r => r.shadowRoot.querySelector('[part="container"]') },
+    { name: 'bs-chip-informative', mount: d => h("bs-chip-informative", { disabled: d }, "Label"), target: r => r },
+    { name: 'bs-shortcut-row', mount: d => h("bs-shortcut-row", { action: "Save", keys: ['s'], disabled: d }), target: r => r.shadowRoot.querySelector('[part="container"]') },
+    { name: 'bs-search-item', mount: d => h("bs-search-item", { disabled: d }, "Result"), target: r => r.shadowRoot.querySelector('[part="container"]') },
+    { name: 'bs-slider', mount: d => h("bs-slider", { disabled: d, ariaLabel: "Volume" }), target: r => r.shadowRoot.querySelector('.bs-slider') },
+    { name: 'bs-stepper-step', mount: d => h("bs-stepper-step", { name: "Confirm", disabled: d }), target: r => r },
+];
+describe('aria-disabled on disabled components', () => {
+    cases.forEach(({ name, mount, target }) => {
+        it(`${name} sets aria-disabled only while disabled`, async () => {
+            const off = await render(mount(false));
+            expect(target(off.root)?.hasAttribute('aria-disabled')).toBe(false);
+            const on = await render(mount(true));
+            expect(target(on.root)).toEqualAttribute('aria-disabled', 'true');
+        });
+    });
+});

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.cmp.test.js

@@ -314,4 +314,29 @@ describe('bs-navigation-drawer: small-screen overlay (<= 768px)', () => {
         await new Promise(r => setTimeout(r, 350));
         await runAxeCheck(root);
     });
+    describe('item spacing', () => {
+        const rows = (els) => els.map(e => e.getBoundingClientRect());
+        it('rendered gap between top-level and nested rows is 12px (spacing-150)', async () => {
+            const { root, waitForChanges } = await render(h("bs-navigation-drawer", { heading: "Docs" }, h("bs-navigation-drawer-item", null, "One"), h("bs-navigation-drawer-item", { expandable: true, expanded: true }, "Two", h("bs-navigation-drawer-item", { slot: "children", nested: true }, "Child A"), h("bs-navigation-drawer-item", { slot: "children", nested: true }, "Child B")), h("bs-navigation-drawer-item", null, "Three")));
+            await waitForChanges();
+            const btn = (el) => el.shadowRoot.querySelector('[part="item"]');
+            const tops = Array.from(root.querySelectorAll(':scope > bs-navigation-drawer-item'));
+            const kids = Array.from(root.querySelectorAll('bs-navigation-drawer-item[slot="children"]'));
+            const [a, b, c] = rows(tops.map(btn));
+            const [k1, k2] = rows(kids.map(btn));
+            // item "Two": its row button, then children wrapper, then next top-level row
+            expect(Math.round(b.top - a.bottom)).toBe(12);
+            expect(Math.round(k2.top - k1.bottom)).toBe(12);
+            expect(Math.round(c.top - k2.bottom)).toBe(12);
+            expect(Math.round(k1.top - b.bottom)).toBe(12);
+            // section gap (logo/title/search/list) stays 24px
+            expect(getComputedStyle(root.shadowRoot.querySelector('nav')).rowGap).toBe('24px');
+        });
+        it('collapsed rows are also 12px apart', async () => {
+            const { root, waitForChanges } = await render(h("bs-navigation-drawer", { collapsed: true }, h("bs-navigation-drawer-item", { collapsed: true }, "One"), h("bs-navigation-drawer-item", { collapsed: true }, "Two")));
+            await waitForChanges();
+            const [a, b] = rows(Array.from(root.querySelectorAll('bs-navigation-drawer-item')).map(e => e.shadowRoot.querySelector('[part="item"]')));
+            expect(Math.round(b.top - a.bottom)).toBe(12);
+        });
+    });
 });

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.css

@@ -38,7 +38,7 @@
  * @prop --bs-navigation-drawer-collapse-icon: Collapse toggle icon color. Aliased to
  *   --bs-icon-default.
  * @prop --bs-navigation-drawer-items-gap: Gap between top-level item rows in the items list.
- *   Aliased to --bs-spacing-100.
+ *   Aliased to --bs-spacing-150 (12px).
  * @prop --bs-navigation-drawer-collapsed-width: Width of the drawer when `collapsed`. 96px, per
  *   Figma node 8028:135374's own frame ("Type=Collapsed").
  * @prop --bs-navigation-drawer-search-trigger-size: Width/height of the compact search-trigger
@@ -81,7 +81,7 @@
   --bs-navigation-drawer-collapse-pressed: var(--bs-color-neutral-container-pressed);
   --bs-navigation-drawer-collapse-icon: var(--bs-icon-default);
 
-  --bs-navigation-drawer-items-gap: var(--bs-spacing-100);
+  --bs-navigation-drawer-items-gap: var(--bs-spacing-150);
 
   --bs-navigation-drawer-collapsed-width: 96px;
 

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.js

@@ -234,11 +234,11 @@ export class BsNavigationDrawer {
     };
     render() {
         const classes = ['bs-navigation-drawer', this.mobile ? 'bs-navigation-drawer--overlay' : '', this.overlayOpen ? 'bs-navigation-drawer--open' : ''].filter(Boolean).join(' ');
-        return (h(Host, { key: '49c52b23f8cd7ded807c916a3d9ca7baae3f10ba', "data-overlay": this.mobile ? '' : undefined }, this.mobile && h("div", { key: 'b852ee92942a375d441320a95c1bd11a07754624', part: "backdrop", class: "bs-navigation-drawer__backdrop", onClick: this.requestClose }), h("nav", { key: 'f5e2aa57f8757f2fbd8dd305aac40504e90fec3f', ref: el => (this.navRef = el), class: classes, "aria-label": this.heading,
+        return (h(Host, { key: 'f95176f9c590fde2d2d6a9dcade6b921510ce653', "data-overlay": this.mobile ? '' : undefined }, this.mobile && h("div", { key: '2d9bdef1463962ca2e2f1f5aee7024636904c5c7', part: "backdrop", class: "bs-navigation-drawer__backdrop", onClick: this.requestClose }), h("nav", { key: 'b527d2a521652628c5b4dfda7004be716dba3b2e', ref: el => (this.navRef = el), class: classes, "aria-label": this.heading,
             // Stays a plain <nav> landmark in every state: ARIA does not allow role="dialog" on <nav>
             // (axe: aria-allowed-role). Modality is behavioral -- focus is held inside, the page behind is
             // scrimmed, Escape closes -- rather than announced through aria-modal.
-            tabIndex: this.mobile ? -1 : undefined }, this.showLogo && (h("div", { key: '505457c0e4ef405aae32ede16e34195996d46a2f', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '7f18718b910241ce69d796853b0abdf451a89ac6', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: '05d02bf25de16dcb7c02b71c385277eafef9ac28', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '63f77b0363d7d262ac87c482e2aa48aee1edc612', variant: "mark", background: this.logoBackground }))), h("div", { key: 'db96e7dc889e58231b1112b9badd7e282c9a6d07', class: "bs-navigation-drawer__title-row" }, h("span", { key: '8d8f37baf13a92325dd1f2912831a5fffcbe2ac8', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: '2f8cfcec017a5f4af5963367c0331b09ee6dd5e4', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? this.expandLabel : this.collapseLabel, "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: '6e6e1d837f20f6837fe2b77cfd7f0c873747e7de' })))), h("div", { key: '3b758c225881964df28f99c6fe477260df86eed6', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: 'cbb3553aa7b80985b58494395a3595fff0fb868d', name: "search" })), h("button", { key: '4661d0113e00a3dbf5e6d06609bd563d7cac9800', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": this.searchLabel, onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '6ff77355d5132b608056e8ca7188a37962d6e1e4' })), h("div", { key: '369e4c1c9a17cddf4954b3d666c6c55335bc7876', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: '56a50dc4c123db7cb2efa15c39cc6f49e819ee3f' })))));
+            tabIndex: this.mobile ? -1 : undefined }, this.showLogo && (h("div", { key: '14dcefaf6fac6349b44dfd0cfeaf0f8b28d48014', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: 'f76b740e5f9378c19f9ca933c0f7910075c473b3', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: '1978885ce2cfca859118159384e093e70bc8c2d9', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '5087b539af51e373703256b9913b4a074e2917f4', variant: "mark", background: this.logoBackground }))), h("div", { key: '31b5f080ce98b4ba96aad0f9ba9df7b31ecfd5b9', class: "bs-navigation-drawer__title-row" }, h("span", { key: 'bf2880d7b095a6ca46d38782b0f9de8aa7cedbb8', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: 'cf6f2d98894c664e38d97563a616912e9d6fef3e', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? this.expandLabel : this.collapseLabel, "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: 'c89adbac8d05ae9d3367683b960d8d35d0422e76' })))), h("div", { key: 'b018a42d16190db2bd6f95365fe36d38eb627300', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '1d217d7ad3c67d1b5e8a8655fd94bdbc77149b4f', name: "search" })), h("button", { key: '2b1bc189a5474dfc76e3d73e9c1623105002fd22', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": this.searchLabel, onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '634ab26e0bf8c38c9e4ba97305a94003112450b4' })), h("div", { key: 'df8559db4c5c25ff5d98b858759d142b1639fdc3', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: 'b643a037ec21cc62d3ae60491028d26cb19e099c' })))));
     }
     static get is() { return "bs-navigation-drawer"; }
     static get encapsulation() { return "shadow"; }