@brandsync/wc 1.15.0 → 1.17.0

package/dist/collection/components/bs-shortcut-row/bs-shortcut-row.js

@@ -0,0 +1,154 @@
+import { h } from "@stencil/core";
+/**
+ * One row of a shortcut list: an action label on the left and its keyboard shortcut on the right.
+ * Static information, not interactive. Standalone it has no role; `bs-keyboard-shortcuts` sets
+ * `selectionRole="listitem"` on its rows (same pattern as `bs-list-item`).
+ *
+ * Built from `bs-key-caps` (and so `bs-key`).
+ *
+ * ## When to use
+ * - A line in a keyboard-shortcut reference, usually inside `bs-keyboard-shortcuts`.
+ *
+ * ## When not to use
+ * - A clickable command or menu entry -- use `bs-menu-item` (which has its own shortcut slot).
+ *
+ * @slot - The action label (overrides the `action` prop).
+ * @slot keys - Your own `bs-key-caps` (or custom keys), replacing the generated one.
+ * @part container - The row.
+ * @part action - The action label wrapper.
+ * @part keys - The wrapper around the key caps.
+ * @prop --bs-shortcut-row-height - Row height. Defaults to `36px` (Figma).
+ * @prop --bs-shortcut-row-padding-x - Horizontal padding. Aliased to `--bs-spacing-100`.
+ * @prop --bs-shortcut-row-gap - Gap between label and keys. Aliased to `--bs-spacing-100`.
+ * @prop --bs-shortcut-row-radius - Corner radius. Aliased to `--bs-border-radius-75`.
+ * @prop --bs-shortcut-row-color - Label colour. Aliased to `--bs-text-default`.
+ * @prop --bs-shortcut-row-color-disabled - Label colour while `disabled`. Aliased to `--bs-text-on-disabled`.
+ */
+export class BsShortcutRow {
+    /** The action, e.g. "Save". The default slot overrides it. */
+    action;
+    /** The keys, e.g. `"Ctrl+S"`, or an array (`['Ctrl', '+']`) for a literal plus key. See `bs-key-caps`. */
+    keys;
+    /** Accessible name of the key caps, e.g. "Control plus S". Defaults to the keys joined with "plus". */
+    label;
+    /** Dims the label and the keys. */
+    disabled = false;
+    /** Set by the parent list (`"listitem"`). Standalone rows have no role. */
+    selectionRole = null;
+    render() {
+        return (h("div", { key: '3594dbd6526283414539f46dbf83430c35b6aa03', part: "container", class: "bs-shortcut-row", role: this.selectionRole ?? undefined }, h("span", { key: '74bf12e32a4fc15c77ee4b650ae1facee76f68c0', part: "action", class: "bs-shortcut-row__action" }, h("slot", { key: '6bfc823e7ffb68d7a2d677d828dfe5f765f1d094' }, this.action)), h("span", { key: '4f6ba475754e26dffdae4dbbc29d64c1f01d2463', part: "keys", class: "bs-shortcut-row__keys" }, h("slot", { key: '251e7333354292aacc6f93265d3ebce68db0af53', name: "keys" }, h("bs-key-caps", { key: 'f887b73b0c21c92997cee5a4742e23b5caad358d', keys: this.keys, label: this.label, disabled: this.disabled })))));
+    }
+    static get is() { return "bs-shortcut-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-shortcut-row.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-shortcut-row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "action": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The action, e.g. \"Save\". The default slot overrides it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action"
+            },
+            "keys": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The keys, e.g. `\"Ctrl+S\"`, or an array (`['Ctrl', '+']`) for a literal plus key. See `bs-key-caps`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keys"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the key caps, e.g. \"Control plus S\". Defaults to the keys joined with \"plus\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dims the label and the keys."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "selectionRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'listitem' | null",
+                    "resolved": "\"listitem\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the parent list (`\"listitem\"`). Standalone rows have no role."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selection-role",
+                "defaultValue": "null"
+            }
+        };
+    }
+}

package/dist/collection/components/bs-shortcut-row/bs-shortcut-row.stories.js

@@ -0,0 +1,24 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-shortcut-row',
+    parameters: { docs: { description: { component: componentDescription('bs-shortcut-row') } } },
+    render: args => html `<bs-shortcut-row style="width: 318px;" action=${args.action} keys=${args.keys} ?disabled=${args.disabled}></bs-shortcut-row>`,
+    argTypes: { action: { control: 'text' }, keys: { control: 'text' }, disabled: { control: 'boolean' } },
+    args: { action: 'Save', keys: 'Ctrl+S', disabled: false },
+};
+export default meta;
+export const Default = {};
+export const Disabled = { args: { disabled: true } };
+export const ThreeKeys = { args: { action: 'Save as view', keys: 'Ctrl+Shift+S' } };
+export const IconKey = {
+    name: 'Icon key (keys slot)',
+    render: () => html `
+    <bs-shortcut-row style="width: 318px;" action="Submit">
+      <bs-key-caps slot="keys" label="Control plus Return">
+        <bs-key label="Ctrl"></bs-key>
+        <bs-key><svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5" /><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11" /></svg></bs-key>
+      </bs-key-caps>
+    </bs-shortcut-row>
+  `,
+};

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

@@ -60,7 +60,7 @@ export class BsSkeleton {
             lines.push(h("span", { part: "line", class: { 'bs-skeleton__line': true, [`bs-skeleton__line--${this.variant}`]: true, 'bs-skeleton__line--short': isShortLast }, style: style }));
         }
         const hasLabel = !!this.label;
-        return (h("span", { key: '7d2c9b9259f7a7402540d55cdbb66e40809eb8af', part: "container", class: { 'bs-skeleton': true, 'bs-skeleton--animated': this.animated, [`bs-skeleton--${this.variant}`]: true }, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, lines));
+        return (h("span", { key: 'c5cbf5b6a64b8658ffd5b60816db3d226c342d65', part: "container", class: { 'bs-skeleton': true, 'bs-skeleton--animated': this.animated, [`bs-skeleton--${this.variant}`]: true }, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, lines));
     }
     static get is() { return "bs-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -233,7 +233,7 @@ export class BsSlider {
     render() {
         const isRange = this.type === 'range';
         const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
-        return (h("div", { key: '27a3ea5b427fcc77b8d5e3e1ebe2e5bc4e63b7c7', class: rootClasses }, this.showLabel && (h("div", { key: '0d4a3457ce390dd2b05be33e46a3bd67dd6f027e', class: "bs-slider__header" }, h("span", { key: '21fda56ed3bfad6a7838cc6be53fe206634e35a8', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? this.startValueLabel), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : this.endValueLabel))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '1d8b7c5fa72467ae5a58520ad66452331c5d8e16', class: "bs-slider__row" }, this.showLabel && (h("span", { key: 'd45c1e0d5cfe7a66f8bd85a239148b2c13a8b3df', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '063d2007c094ebed57e58fe0fbaa0e1f0581ed71', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (h("div", { key: '8d3274ef80b6bdd4a52efc8f8802ebb3aba86b9a', class: rootClasses }, this.showLabel && (h("div", { key: 'd852f58c8c92a8f69153192e74136362e2ab226e', class: "bs-slider__header" }, h("span", { key: 'e02b3c4fd839d812b516bab33349f1a4f2d5b0c4', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? this.startValueLabel), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : this.endValueLabel))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '30bc9f0bb1380dfa22542d04af160f13f70d276f', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '824de56e2112ef5af4e20ebf097b17e4d7122624', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: 'cd0848d7add9ea1fd53c92ebd5b5f13a4a06fdbe', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get is() { return "bs-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -67,7 +67,7 @@ export class BsSnackbar {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: 'c28affe5d8731108fb850d3a748f529ee387a19b', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'fa1934bd51d1c2c9287d748c28885ca48972160f', class: "bs-snackbar__content" }, h("span", { key: 'b2d96ef66bc8fabf1efb19951ca2559cd17cccd6', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: 'bf425e1893ecc38f5c808589b3e4aa37377ebdc8', part: "message", class: "bs-snackbar__message" }, h("slot", { key: '5ad9c390508942f8d3b380de83100da30a06f02d' }))), h("div", { key: '84d388fa214fc995d5f0f5f3a336984b251373c8', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: 'c96e9fc2252a60a6a33aa31e3b698bf1662f7447', part: "action", variant: this.actionVariant ?? ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), !this.hideClose && (h("bs-icon-button", { key: '8b0a71688b6418ebb2db2fe648334048429d7168', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'bcc155735db55392b049f6b5761e05341e588d35' }))))));
+        return (h("div", { key: '2b54d2d4ddfed7e1942ab21f09cf074ab58b2f22', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'a3ca39bf6b7c1047b013bac648b6fb60acaf520d', class: "bs-snackbar__content" }, h("span", { key: 'fa5a5cc6a24ad4f7ee434bf9f8ae4976872c57df', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '58b52f72b9290a986832b954ad9f7e5d1e51eac8', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'c907524f91afd4b5ac22f0b86bb123ac831021f9' }))), h("div", { key: 'b746a574030f0023826ef131643eb49088db7da0', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: 'fef75f43a0a15208b43ad4601dcc639022160ccc', part: "action", variant: this.actionVariant ?? ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), !this.hideClose && (h("bs-icon-button", { key: 'a582778e2469b68a683c6cff867c5f8839989f2e', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '1e7a6f872373fe2f62a99aa03421815a6f55e8d2' }))))));
     }
     static get is() { return "bs-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-source-link/bs-source-link.js

@@ -51,8 +51,8 @@ export class BsSourceLink {
     };
     render() {
         const inner = [
-            h("span", { key: 'e693ffb8cd5d0fc8c8f602868d17a7b41735a470', class: "bs-source-link__left" }, h("span", { key: '685b3dfbee1ece7cb3ba8cb2c593836a6b557ab6', class: "bs-source-link__filename-row" }, h("span", { key: '4888e161fef6c69a889f29dcd90577904aea81a0', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '806c2219ca588ec505a1e6ea62ebb5e171fbb1ef', name: "icon" }, h(FileTextIcon, { key: '208c43fdfe05fb6f7c987fc760bc37ab9dc7faef' }))), h("p", { key: 'bf34fc21cf242f290c0220f3fd216616f2042fed', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: '2924ba8f19ab78096a532e08946ad5047ab04387', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'b638eea6c0c05f3b5b7eb6f4c02f94910a5aa1fa', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '5d407c3a10813d7f85a1b6a99e3e869e6ce28b8b', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'b25df35eae4fe62bdf1e745dd8f478792adb0129', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: '263a19dd6402cba9057a543921ff669b323b58ac', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '7d2baa2d8f13fe3b6cbd2abed2c6096d5076c667' })),
+            h("span", { key: 'f6cbdaccaa104fa4e6d16db23ae8f66e9d3d7aa7', class: "bs-source-link__left" }, h("span", { key: 'a66ccda2c131b3a708402d0b06206e355fca0dad', class: "bs-source-link__filename-row" }, h("span", { key: '74af0518a127378fc13291c3cec12b8eb470268b', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '9b1f4a71a0c5313210481106988a851ea87b40b6', name: "icon" }, h(FileTextIcon, { key: '1b1b9e285a744a074537fbf4ea19c852343b4513' }))), h("p", { key: 'ecdedebb0281ec56ec08a1657de2d924bb34a421', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'b109074e833ef4feb438f9b4992fe6bd7ebc8279', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '182f41c9115004f345028e991e38345dcc9bc7b2', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '95b31ed9741bbaeb215109139520108991d33ffe', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '3241c29460a9287bba9bebac78cefdb1ef62ca65', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: '67327845908098595d935c87c96809205cb25d38', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'fcf4946e7d5647a6137ff1a6d24851cc7bcb9aef' })),
         ];
         return this.href ? (h("a", { class: "bs-source-link", href: this.href, target: this.target, rel: "noopener noreferrer", onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "bs-source-link", onClick: this.onClick }, inner));
     }

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

@@ -30,7 +30,7 @@ export class BsSpinner {
     label;
     render() {
         const hasLabel = !!this.label;
-        return (h("span", { key: 'ffeef19b6e11c8bae27649f667c65be8b6b211e5', part: "container", class: `bs-spinner bs-spinner--${this.size}`, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: 'afa93c3331107ff2be423c0693ed546d1687c143', part: "svg", class: "bs-spinner__svg", viewBox: "0 0 24 24", fill: "none", focusable: "false" }, h("circle", { key: 'e016a9b43eb8f297f644ba9a1d4f4e2a9dc35752', class: "bs-spinner__track", cx: "12", cy: "12", r: "9", "stroke-width": "3" }), h("path", { key: '68827930d857322dfb7480de9cc76bb18011120d', class: "bs-spinner__arc", d: "M12 3a9 9 0 0 1 9 9", "stroke-width": "3", "stroke-linecap": "round" }))));
+        return (h("span", { key: '3c9d75df5028a1bad32c909ef1e382ffae53fd91', part: "container", class: `bs-spinner bs-spinner--${this.size}`, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: '431baaa3fbe8c6f9a4d9189b46d24d5e15ad8f18', part: "svg", class: "bs-spinner__svg", viewBox: "0 0 24 24", fill: "none", focusable: "false" }, h("circle", { key: 'd71a6901ce3cccd9647287ea06693137cd5c9b64', class: "bs-spinner__track", cx: "12", cy: "12", r: "9", "stroke-width": "3" }), h("path", { key: '65f5e995822a96e293b3541eb16606a178ec6c88', class: "bs-spinner__arc", d: "M12 3a9 9 0 0 1 9 9", "stroke-width": "3", "stroke-linecap": "round" }))));
     }
     static get is() { return "bs-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -215,7 +215,7 @@ export class BsSplitPane {
                 nodes.push(h("div", { part: "divider", class: { 'bs-split-pane__divider': true, 'bs-split-pane__divider--active': this.draggingIndex === i, 'bs-split-pane__divider--static': !this.resizable }, role: "separator", "aria-orientation": dividerOrientation, "aria-label": this.dividerLabel, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": this.percentFor(i), tabindex: this.resizable ? 0 : undefined, onPointerDown: this.onPointerDown(i), onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onPointerCancel: this.onPointerUp, onKeyDown: this.onKeyDown(i) }, h("span", { part: "divider-thumb", class: "bs-split-pane__thumb" })));
             }
         }
-        return (h("div", { key: '67d978089645337e56106163c6d6ac38fd6d063c', part: "container", class: `bs-split-pane bs-split-pane--${this.orientation}` }, nodes));
+        return (h("div", { key: '70a36a863fc3fb144160616725126d0421cea69f', part: "container", class: `bs-split-pane bs-split-pane--${this.orientation}` }, nodes));
     }
     static get is() { return "bs-split-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,7 +81,7 @@ export class BsStack {
                 parts.push(h("slot", { name: `bs-stack-item-${i}`, onSlotchange: this.sync }));
             }
         }
-        return (h(Host, { key: '36539e2d556a29fffe996ae4b53d207ac39e3889', style: { '--bs-stack-gap-token': `var(--bs-spacing-${gap})` } }, h("slot", { key: 'fe94e79e6ded0341d04792c9be2949c6663de5a9', onSlotchange: this.sync }), parts));
+        return (h(Host, { key: 'be2e4a8ecb5d4fd27441b8cafbfd7e8a17ea3b82', style: { '--bs-stack-gap-token': `var(--bs-spacing-${gap})` } }, h("slot", { key: '4eab2557384cb6ae620ea3feef8e36dc0a2e2f08', onSlotchange: this.sync }), parts));
     }
     static get is() { return "bs-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,7 +62,7 @@ export class BsStepper {
     }
     render() {
         // role="list" so each bs-stepper-step's role="listitem" has the required parent.
-        return (h(Host, { key: '974bd59785233de47d55750ede0a3d823ff11c75', role: "list" }, h("slot", { key: 'ce637c2c5631329c747897c66ec2cca9e6f738fb', onSlotchange: this.onSlotChange })));
+        return (h(Host, { key: '3f002aa5977dd81a203b44aeb3ffd9e82e1d78ab', role: "list" }, h("slot", { key: 'f5a64626aba6cef29bcc7710c839583ccc2a2c71', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "bs-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-stepper/bs-stepper-step/bs-stepper-step.js

@@ -57,7 +57,7 @@ export class BsStepperStep {
     }
     render() {
         const state = this.state;
-        return (h(Host, { key: 'aebeb38afde905d2b5d12f6c6218c7f6d8caa6db', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '5ce2ab43631225cabfad3d0a65724fe53475c609', class: "bs-stepper-step__top" }, h("span", { key: '5270d9396ce4eaae1e7f8893d28198df7f87d515', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: 'a2a83808311c13113d9cefa5a2bc9926be9dea97', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: 'acf704a0de2391bac5cddc3eebef1f6aa821e233' }), state === 'error' && h(ExclamationIcon, { key: '4fc253c6ffced8ef5eaf337e39c0912b0765f5aa' })), h("span", { key: '163f5b4e465c4b6b27238ceaf73d7cdd96f5b376', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: 'f71f15dba5235e6176dad102c4ebad976e063900', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'ae5cd8999024687a6a3631dc6887428256899479', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'a5971b572a0f1a2f602e8f888a16d6e0e5599183', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '2873a2ceb40f7abc5e543a0d50192bc42945f3e5', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (h(Host, { key: '8e11ed2e78a5e6468ed6265f90199bdc0c2e4bcc', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '0d50e2845fb886a73e7eeaad474c0d9c1b2e06cb', class: "bs-stepper-step__top" }, h("span", { key: '1bfe85491c42f8e1bf00a4e86c162448564b5142', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: 'e3ac4066de9f1c9bfa824a889c654952891221b8', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '7c1e237ce011d77b47d26e622974d6a2629ecfd3' }), state === 'error' && h(ExclamationIcon, { key: '9420c50c9154f007ae0802473f0a5e0cf18fe8fd' })), h("span", { key: '039f2ca1186b82bebb8e989630f575599c64e85b', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: 'dc5a250a1437eda9baf7cd38a69fa36d26e6cfaa', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'df8d2c94073f134125d34e5686f0c340c2c59d87', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '5bdce9915c1e6e2610bbe101bc41108cfa2e0cd5', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '39ddca52aa59717d22ca56ece74b4518d1ae2370', part: "description", class: "bs-stepper-step__description" }, this.description)))));
     }
     static get is() { return "bs-stepper-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,7 +75,7 @@ export class BsSwitch {
         const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: '8e879cda3d51659448298ad74e0cd72d6a3c7692', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '49e885f0275339b520e601eab3dd5e58e4deaf33', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: '713c1fe5e578730b3afdeff880083ca9df5f0805', part: "track", class: trackClasses }, h("span", { key: 'f64210e5e3c6fa2c814567921922da3a3b93dd5f', part: "knob", class: knobClasses })), h("span", { key: '5a5cdbdb31470bcda460412ddb6f78fa4bb37a4b', part: "label", class: "bs-switch__label" }, h("slot", { key: '4d1857d66cfbed3b59805359692371decec5c374' }))));
+        return (h("label", { key: '49f1cfc9d185ab00f7186dc032b791a23ca26f70', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '8c20d342f636a06e7506008c00b612746e5c5698', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'd1fcfa9efbe5a3bffe23c597770b330622729a62', part: "track", class: trackClasses }, h("span", { key: '54d63b56c139c5b67bff4a61496914b641e498c3', part: "knob", class: knobClasses })), h("span", { key: 'd4ddc5b7e7ca13c74f4693f645fbe375447fe86b', part: "label", class: "bs-switch__label" }, h("slot", { key: '866fd38ac545d1ad19494b267594d7e4aab4b0b1' }))));
     }
     static get is() { return "bs-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.js

@@ -94,7 +94,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: '4b8df7a5f37f0aad60679cbdd3bd03cb20482ba7', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: '037cdaae4331e050b5c02083d1776bb5509ff92b', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '3b67b01e65434c35545fc9f06dab7bb871362001', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'd41611429e951d13df23521f938217716f2afacd', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '8ea82e8ecc120c9961b8288a1162ec03ac0223bf', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: 'ec19773b2ad2363cb5f6dc1f3f845db3755c3d13', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: '561fa96dd2f01fe03b1bdb30675be98aec9e33ef', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: 'c1f0d97a04e41fccd22fb412b3019fd0d63b0cc6', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '07f4873273ef9e91c472344bbdf97b6915d4b14f', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '3bc180fa828034358155abd397aa68661f09fcf3', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-inline-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -107,7 +107,7 @@ export class BsTab {
         const iconOnly = this.hasIcon && !this.hasLabel;
         const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
         const showBadge = this.hasBadge && !iconOnly && !vertical;
-        return (h("button", { key: '23d18710e7c697958aa0a7b4f8248bd85541db04', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: 'd48e487274031e23a9febc4dccec966e939420ff', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '004e5fc7c61b9d4a9813ce8a5ce21e71ff3f9bb8', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'e7d905a2daed877414e43078a2a4460486eee9a2', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '2bc379c7f2bd7a14c1864da3024773a1e392598f', onSlotchange: this.onLabelSlotchange })), h("span", { key: '92aff30ad4fd06d0a16c5fc40202fb4c553e80d6', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'e655135dd81a288e7428d00c0778bb2b42294258', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: 'abecf083399730cc0e84c62109f51b683bf55ac0', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: '9041f39829dd71f2dd2d54a5c2e8329f6fe8e11a', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: 'a57aec34d30bcaf112aa7f5d4530a4d64f2101a7', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: 'a60bd8b1c3b46de2ce9c33ba4f667bc815badcf6', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'd64146a811bbec39d7a9abe85446340b6d2d8988', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'eb7a7f6d6999e6b0e8677fbb6e87ccba699f3977', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'f281adb319e2653ebd2e4ef770750aafa30a9a82', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'fd72ae0865d4cd6cecc8ace8a8da056574f71d3b', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '4a278ac85059a94677816b87df1ff343da5c5f65', part: "indicator", class: "bs-tab__indicator" })));
     }
     static get is() { return "bs-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.js

@@ -135,7 +135,7 @@ export class BsTabs {
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (h("div", { key: '07185cefa2f1a443035e61ba13f080913ce73ca6', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '99fe98e753609bc4f594fb32dab5a7df2f4b3c0d', onSlotchange: () => this.syncRovingTabindex() })));
+        return (h("div", { key: 'eb523e0109735c416498c91955787b00c0d5402d', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '506c2e41eb12e830793431ec474d1ec286a12016', onSlotchange: () => this.syncRovingTabindex() })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -200,14 +200,14 @@ export class BsTimepicker {
         return (h("div", { part: "spinner", class: "bs-timepicker__spinner" }, h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel(this.increaseLabel), tabindex: -1, onClick: () => this.stepBy(col, 1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M18 15L12 9L6 15", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { part: "value", class: "bs-timepicker__value", role: "spinbutton", tabindex: 0, "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": n, "aria-valuetext": pad(n), onKeyDown: this.onKeyDown(col), onBlur: () => (this.typed = '') }, pad(n)), h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel(this.decreaseLabel), tabindex: -1, onClick: () => this.stepBy(col, -1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     render() {
-        return (h("bs-card", { key: 'ad3c51871ca4b0b1871944b658bae070140d1e99', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: 'b522d8a85e0161c4f7cd7938364919eda0585cf9', class: "bs-timepicker__body" }, h("div", { key: 'a3dd5ea83fa63cd9e8e6db2dfeb32b195e084f58', part: "header", class: "bs-timepicker__header" }, h("div", { key: '9af7c0024a4341ed1bbaccb4fb25e0e7558de93e', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: 'e18dcfcfe44a19f8dbac0737e487b23234d92fd6', class: "bs-timepicker__format" }, h("span", { key: '954b1579e9789c76521ba9364ed84caee882a05d' }, this.formatLabel), h("bs-switch", { key: '020b23405f62aa272c8af71d9071e0090bec5c30', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: '283ba5ff1525c6561b7d00552dfc86ed34284f9b', class: "bs-timepicker__divider" }), h("div", { key: 'c2dfc0cb7b7cc0e5d106565746f3426b4065af9a', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '1d017fd059c36955ba5ba4c5da5a05b9fb18e7d2', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: '6b182c00b7dbd9150640c47aee43423d20e270c5', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: '531640b6870cc87a284ac9ea64ca5b292c4f529f', cx: "2", cy: "10", r: "2" }), h("circle", { key: '323a4a90bebd8203b5c2f9803ffe03055991f9e2', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '3d7ec2986824358b3f1e795a9ce05b1b81d14432', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
+        return (h("bs-card", { key: 'b10beb8dd035f96558d0cc1c62d8a9a852372e76', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: 'b75d31cab0ab45200526e32a4fd80ec4bbd0b93f', class: "bs-timepicker__body" }, h("div", { key: 'c76189d083c5e6294fdc3eb1584af65926a27b91', part: "header", class: "bs-timepicker__header" }, h("div", { key: 'd45ff2bd2e9f0057d2fce6235ecec2bc0e2a3904', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: '316576f63687c47440950845933e6236bec58c32', class: "bs-timepicker__format" }, h("span", { key: 'cc5785121a7437e85589e96499744ff963b99566' }, this.formatLabel), h("bs-switch", { key: 'b0b9fd4459092130c4f57a33a7ff3c3cfd8f8b96', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: '8c14c3d42847b567d2abe2a476f9437a20f908c6', class: "bs-timepicker__divider" }), h("div", { key: '24368cea251d0075d4a5c6df2968ff68fc7def5d', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: 'f5ac1c36851ccf6af8ff21c929177e91a04d1a32', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: '0c6a2dc94536c5111c0e8587750b21f843a04861', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: '2d31480fbd0194ee9d6c9e60b25975654ad9952b', cx: "2", cy: "10", r: "2" }), h("circle", { key: '193b270a5c49634359a3fe93729ed3723177ca49', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '2fd70fb4b969a3c078a673df95315e32ee5e9612', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
                 { label: 'AM', value: 'AM' },
                 { label: 'PM', value: 'PM' },
             ], onBsChange: (ev) => {
                 const pm = ev.detail === 'PM';
                 if (pm !== this.isPm)
                     this.hour = (this.hour + 12) % 24;
-            } }))), h("div", { key: '664da910d0c1849ff6a47ca326945b37f837760a', class: "bs-timepicker__divider" }), h("div", { key: '852c88b44cbb5cc3f236363181920163776a4521', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: 'e92e26209c7ed2e45094265a54ad8347ce697f05', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '110338b7a98727089613a3eb661ca5e0d8346691', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
+            } }))), h("div", { key: 'a49af89bf97bd9127917a37d65f192b023b7535f', class: "bs-timepicker__divider" }), h("div", { key: '67c33e73ebff80a943a78d455d0325a905839d4a', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: '4307ff06608b43825fb3618bad115f6ff0249ec9', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '336fbe75a702f49a8640bd4be98826910f2e1a1f', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
     }
     static get is() { return "bs-timepicker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class BsToast {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '335782bd5c8c1c721105684ee50efb71dc8a9dd8', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '77c48c6315299064a6904646f46bb787dc4dada2', class: "bs-toast__content" }, h("span", { key: '8aef9bc3f662320fb3d60bbfdf8d4d8672297bd4', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: 'b1501a806e5866b69fbea2073741325f65b1209c', state: this.state })), h("span", { key: '751407d5dc04f3f8b4e57c5b47d1639f66e673a6', part: "message", class: "bs-toast__message" }, h("slot", { key: '9407fe265762817eb68e8119a40b792b53dbdb6e' }))), h("div", { key: '4bcd82ca67e8ce49998c7c954b3764df242e4eeb', class: "bs-toast__actions" }, h("button", { key: '352a9789b6f773ee385396bda80fde2ed972af30', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '5296f2811fda1f42b95087c4494fa05d3e0efff4' })))));
+        return (h("div", { key: '962b8e77c2a88c3454e5979e133a0afabdc0647d', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'b8412715dc7f6c5562ca4405cfcf032885ed34fb', class: "bs-toast__content" }, h("span", { key: '7cb72a3a3a8338b272b6bd55d31c4524fcc1cb95', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '1497ae74f4214bb0b604da2fe3027d195c025af0', state: this.state })), h("span", { key: 'b6a425877af268bc3625c4fe8904fd278e85652a', part: "message", class: "bs-toast__message" }, h("slot", { key: 'ff37e67ce2652237f85f10a7a8e2596f348d2e67' }))), h("div", { key: '375891513e9d63651f88d9c943ec177ab359cdf6', class: "bs-toast__actions" }, h("button", { key: 'f19133e7fece3fe4ef7bf9477483110183e511cb', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '9379d93d62c959a607ee30c35d999a997da39b72' })))));
     }
     static get is() { return "bs-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class BsTooltip {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: 'f41f09865c1604e9c6f42d77a007ebef233d3b20', class: "bs-tooltip" }, h("span", { key: 'c963a9ffaedeb05e4b6787509e683f20fbd5d893', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: 'ac5c26e3fded66c18cc563b33626645d6049f9e2', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '662c27547a391756b7d1a98d1154c0e01690e110' }))));
+        return (h("div", { key: '4d7f71a8f113cf7d7ddca55936612df27557141f', class: "bs-tooltip" }, h("span", { key: 'e9dcb1f16b34377edbc52f8cbf2bae0c431680e0', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: 'c8fe41efa7ea8d43cbec1e832562f67f06eecc19', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: 'cbc53c4425dd8aafa4fb4ebc4381f17bc622222c' }))));
     }
     static get is() { return "bs-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,7 +48,7 @@ export class BsTooltipTrigger {
     };
     render() {
         const show = this.visible && !!this.text;
-        return (h("div", { key: '399a6f518855e7ba3ac3824276933d3b1ec913cc', part: "trigger", class: "bs-tooltip-trigger", "aria-describedby": this.tooltipId, onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide, onKeyDown: this.onKeyDown }, h("slot", { key: 'bf83352404bcdf757325421b86c8c571f89bae47' }), h("div", { key: '44f5fed6608f49041f206e44302a22404c1b6fc2', part: "tooltip", id: this.tooltipId, class: "bs-tooltip-trigger__tooltip", role: "tooltip", hidden: !show }, h("bs-tooltip", { key: 'f04fab6b6e9c6fba4c0dbdfe01db5927e98227cb' }, this.text))));
+        return (h("div", { key: '6e7f5e9019ed6184d1981e71a47e056d9c00b92a', 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: '4ed822a023c8b5f8c74f21f1e4f962e701a89517' }), h("div", { key: '2246032cca29561ded2e48ff26272b88ed4b4a40', part: "tooltip", id: this.tooltipId, class: "bs-tooltip-trigger__tooltip", role: "tooltip", hidden: !show }, h("bs-tooltip", { key: '40347ad8cd72910b16c9bf2cbd5f15c2a1688f0d' }, this.text))));
     }
     static get is() { return "bs-tooltip-trigger"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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