@brandsync/wc 1.21.0 → 1.22.0

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

@@ -1,5 +1,7 @@
 import { html } from "lit";
 import { componentDescription, propDescription } from "../../stories-utils";
+import { expect, userEvent, waitFor } from "storybook/test";
+import { ready, inShadow, recordEvents } from "../../play-utils";
 const sizes = ['md', 'lg'];
 const meta = {
     title: 'Components/bs-switch',
@@ -23,12 +25,34 @@ const meta = {
     },
 };
 export default meta;
-export const Default = {};
+export const Default = {
+    play: async ({ canvasElement }) => {
+        const host = await ready(canvasElement, 'bs-switch');
+        const changes = recordEvents(host, 'bsChange');
+        const control = inShadow(host, 'input[role="switch"]');
+        await expect(control).toHaveAttribute('aria-checked', 'false');
+        await userEvent.click(control);
+        await waitFor(() => expect(control).toHaveAttribute('aria-checked', 'true'));
+        await expect(changes.map(e => e.detail)).toEqual([true]);
+        await userEvent.click(control);
+        await waitFor(() => expect(control).toHaveAttribute('aria-checked', 'false'));
+        await expect(changes.map(e => e.detail)).toEqual([true, false]);
+    },
+};
 export const Checked = {
     args: { checked: true },
 };
 export const Disabled = {
     args: { disabled: true },
+    play: async ({ canvasElement }) => {
+        const host = await ready(canvasElement, 'bs-switch');
+        const changes = recordEvents(host, 'bsChange');
+        const control = inShadow(host, 'input[role="switch"]');
+        await expect(control).toBeDisabled();
+        await userEvent.click(control);
+        await expect(control).toHaveAttribute('aria-checked', 'false');
+        await expect(changes).toHaveLength(0);
+    },
 };
 export const Medium = {
     args: { size: 'md', checked: true },
@@ -46,15 +70,15 @@ export const AllCombinations = {
       <strong>Disabled</strong>
       <strong>Disabled + checked</strong>
       <strong>Md</strong>
-      <bs-switch size="md"></bs-switch>
-      <bs-switch size="md" checked></bs-switch>
-      <bs-switch size="md" disabled></bs-switch>
-      <bs-switch size="md" disabled checked></bs-switch>
+      <bs-switch size="md" aria-label="Md unchecked"></bs-switch>
+      <bs-switch size="md" aria-label="Md checked" checked></bs-switch>
+      <bs-switch size="md" aria-label="Md disabled" disabled></bs-switch>
+      <bs-switch size="md" aria-label="Md disabled and checked" disabled checked></bs-switch>
       <strong>Lg</strong>
-      <bs-switch size="lg"></bs-switch>
-      <bs-switch size="lg" checked></bs-switch>
-      <bs-switch size="lg" disabled></bs-switch>
-      <bs-switch size="lg" disabled checked></bs-switch>
+      <bs-switch size="lg" aria-label="Lg unchecked"></bs-switch>
+      <bs-switch size="lg" aria-label="Lg checked" checked></bs-switch>
+      <bs-switch size="lg" aria-label="Lg disabled" disabled></bs-switch>
+      <bs-switch size="lg" aria-label="Lg disabled and checked" disabled checked></bs-switch>
     </div>
   `,
 };

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

@@ -95,7 +95,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: '2b72dc07fdcc65d132a5c89fa7d20a172e1709d2', 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("bs-ripple", { key: '7f05b1962383007cef24e34d782401d0bb5e0b17', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '358ec65108c746311bb23d729f4d6461c62f3b7b', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '88f3ead3ebfef0e2cad25a2cebbcc21b026b5995', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '67cbc0103d4c458113508cc61ebad5002c141ac4', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '5679e945c154f5a7cd4c4a411c4b28cd4baf3124', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: '72a7b79df2f920240bb9e800b1a662b91481d090', 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("bs-ripple", { key: '62d5478adf647dcf8e61f9cbcb8485edb355d9e2', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'c14a5ede027fc8b5ac941fce332451b4bf5232b6', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '2997b46d314089103fe5738c0cde2600c9fa4121', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'b42c580e6468ad84c30e01b6dddd257f5d0b078d', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '99a55082aa21cca4003033e284bf9c049acc6d52', 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

@@ -108,7 +108,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: '654e4473493ad7523de424a459eb5ef019060e69', 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("bs-ripple", { key: '6de73aa7bd4aef7f835bcba421af52a8dbe84c12', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'b700ddfae91f06999435633b874e7a5c36f421a8', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '9bcbf714ecc276aaf17b85f6a15821d7b1e5ad82', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'aecb0faa30a561eec6190e892c1c3efe83c01e36', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'a8a593d9df938d59af43dec2639d7a55a190e83a', onSlotchange: this.onLabelSlotchange })), h("span", { key: '35d29f0572a84b49d4909532aa0a3c4087db1bfb', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '12caeca4d914f1ecc59331e8ce96b6424876c916', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '5ca57ce091c8ee9e4bcc453ee2163e98a87e2b01', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: 'a74abcd56b3dbe37c84543b6f9c7ffca1e5519d6', 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("bs-ripple", { key: 'c0d7e7a0612ca60facde0d07345406148d43dd89', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '0decf034c01ec42325d55e071405c2ab9d84180e', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '9bfad6e083a8df7afde382e6db551b0d59201f82', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'd9376434f2c2780dcc4f7f0fba92bec00bc8b31c', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '6be3d55acf8e2da19d32f2c821d2f2d956cb0e0c', onSlotchange: this.onLabelSlotchange })), h("span", { key: '9fc2c317d7dcd5fc66225b56619105897c974bf6', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '6174f294d93d4102f21dbff094d505b7e929cae9', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '0723083e4b00d00111b0f0cade36de63b805185d', 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

@@ -142,7 +142,7 @@ export class BsTabs {
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (h("div", { key: '34e3ebfc19d97609fce90bda304107bd966534a0', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '12db22c05fbed6277beb93761b71021594b32a1d', onSlotchange: () => this.syncRovingTabindex() })));
+        return (h("div", { key: 'a48d2ee16e78ca21fce532f10c009d092d889dbb', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'd4a32f7486fdc2c86bbf6cdd9f5bb79197878d9b', onSlotchange: () => this.syncRovingTabindex() })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,7 @@
 import { html } from "lit";
 import { componentDescription, propDescription } from "../../../stories-utils";
+import { expect, userEvent, waitFor } from "storybook/test";
+import { ready, inShadow, recordEvents } from "../../../play-utils";
 const types = ['bs-tab', 'bs-inline-tab'];
 const orientations = ['horizontal', 'vertical'];
 const tabLabels = ['Overview', 'Details', 'Settings', 'Archived'];
@@ -29,7 +31,23 @@ const meta = {
     },
 };
 export default meta;
-export const Default = {};
+export const Default = {
+    play: async ({ canvasElement }) => {
+        const tabs = await ready(canvasElement, 'bs-tabs');
+        const changes = recordEvents(tabs, 'bsChange');
+        const tabButton = (index) => inShadow(canvasElement.querySelectorAll('bs-tab')[index], '[part="tab"]');
+        await expect(tabButton(0)).toHaveAttribute('aria-selected', 'true');
+        await userEvent.click(tabButton(1));
+        await waitFor(() => expect(tabButton(1)).toHaveAttribute('aria-selected', 'true'));
+        await expect(tabButton(0)).toHaveAttribute('aria-selected', 'false');
+        await expect(changes).toHaveLength(1);
+        await expect(tabs.value).toBe(changes[0].detail.value);
+        // The last tab is disabled: clicking it must not select it or emit another change.
+        await userEvent.click(tabButton(3));
+        await expect(tabButton(3)).toHaveAttribute('aria-selected', 'false');
+        await expect(changes).toHaveLength(1);
+    },
+};
 export const InlineTabGroup = {
     name: 'Inline tab group',
     args: { type: 'bs-inline-tab' },

package/dist/collection/components/bs-table-of-contents/bs-table-of-contents.js

@@ -177,7 +177,7 @@ export class BsTableOfContents {
     }
     render() {
         const nodes = this.tree();
-        return (h("nav", { key: '268a5805f66e15beedc713f655c17c53c0bf4e49', part: "container", class: "bs-toc", "aria-label": this.label }, !this.hideTitle && (h("p", { key: '40eae36371714f3d34c43eff90d7ee6e3a63722c', part: "title", id: this.titleId, class: "bs-toc__title" }, this.label)), nodes.length > 0 && this.renderList(nodes, 1), h("slot", { key: '56d428adfb4370bca0f674d018fb3844cd31a4a1', onSlotchange: this.readSlotted })));
+        return (h("nav", { key: 'd804da8cde3c5e97f62ce8c9d7bfba30d6a493b0', part: "container", class: "bs-toc", "aria-label": this.label }, !this.hideTitle && (h("p", { key: 'f797d4a7cb59639cede25a91b5ad3074dda98774', part: "title", id: this.titleId, class: "bs-toc__title" }, this.label)), nodes.length > 0 && this.renderList(nodes, 1), h("slot", { key: '06732b5cf28a816e4a504b3f64a699ec29c2697c', onSlotchange: this.readSlotted })));
     }
     static get is() { return "bs-table-of-contents"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,9 @@
 import { Host, h } from "@stencil/core";
 /**
+ * @deprecated Use `bs-chip-informative` with `removable` and/or `href` instead -- it has the same colours and
+ * sizes plus the remove button and link option, so a separate tag component is redundant. `bs-tag` keeps
+ * working unchanged and will be removed in a later major version.
+ *
  * A small label that categorises or annotates an item (a topic, a keyword, a status of a record). It can be
  * neutral or coloured, optionally removable, and optionally a link.
  *
@@ -56,8 +60,8 @@ export class BsTag {
     };
     render() {
         const rel = this.href && this.target === '_blank' ? 'noopener noreferrer' : undefined;
-        const label = h("slot", { key: '23fda868497edb8f251ed3e0ffb72a0b60b1674b', onSlotchange: () => (this.labelText = this.readLabel()) });
-        return (h(Host, { key: 'e0083836e1bd71f9c976f6ede368e2af7036965f' }, h("span", { key: 'cf6951fbeb6402757317d2fff194f0812184f1ba', part: "container", class: { 'bs-tag': true, 'bs-tag--removable': this.removable } }, h("span", { key: '6922fb233c612ac5b6bdedbb21f50d0487cb6458', part: "icon", class: { 'bs-tag__icon': true, 'bs-tag__icon--visible': this.hasIcon } }, h("slot", { key: 'fbacf7c7549cbc31b6a41c9a345aeed5cfc2cdd5', name: "icon", onSlotchange: (e) => (this.hasIcon = e.target.assignedNodes().length > 0) })), this.href ? (h("a", { part: "label", class: "bs-tag__label bs-tag__label--link", href: this.href, target: this.target, rel: rel }, label)) : (h("span", { part: "label", class: "bs-tag__label" }, label)), this.removable && (h("bs-icon-button", { key: '75f28012c090cdb4ee5817f4fdde2ac0716b7e1d', part: "remove", class: "bs-tag__remove", size: "xs", variant: "subtle", ariaLabel: `${this.removeLabel} ${this.labelText}`.trim(), onClick: this.onRemove }, h("svg", { key: 'f621174e822ac00907dbed900e245d581ab61af5', viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'd7e90796fb3eac85e4c71ab267937143ebfd03ff', d: "M12.5 3.5L3.5 12.5M12.5 12.5L3.5 3.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        const label = h("slot", { key: '9f9ee0444b576ad3e258c942222580112acf9278', onSlotchange: () => (this.labelText = this.readLabel()) });
+        return (h(Host, { key: '0e7e0b30816237f8b1ff4e188989bf5494ebe5b2' }, h("span", { key: '71a97a157c57a9e4bae9f2606f8670913d92f1e2', part: "container", class: { 'bs-tag': true, 'bs-tag--removable': this.removable } }, h("span", { key: '870efd02cc59cc348465aee33f1232660353cc25', part: "icon", class: { 'bs-tag__icon': true, 'bs-tag__icon--visible': this.hasIcon } }, h("slot", { key: '6b44752833f018db3b2c4efe72fab6db9742e017', name: "icon", onSlotchange: (e) => (this.hasIcon = e.target.assignedNodes().length > 0) })), this.href ? (h("a", { part: "label", class: "bs-tag__label bs-tag__label--link", href: this.href, target: this.target, rel: rel }, label)) : (h("span", { part: "label", class: "bs-tag__label" }, label)), this.removable && (h("bs-icon-button", { key: '4cf3c5b4f886806d56fbfe453221130186ac9130', part: "remove", class: "bs-tag__remove", size: "xs", variant: "subtle", ariaLabel: `${this.removeLabel} ${this.labelText}`.trim(), onClick: this.onRemove }, h("svg", { key: '0c3313fdfd20098b98f9d864ac3143dcd647d10a', viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'eecaf5e9b0880265a5eb64973c1b9b7b5c02ab56', d: "M12.5 3.5L3.5 12.5M12.5 12.5L3.5 3.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
     static get is() { return "bs-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class BsText {
     tone = 'default';
     render() {
         const Tag = this.as;
-        return (h(Tag, { key: 'a15f1ac4c4bd9bd2f1518046fb6297d6669fa834', part: "text", class: `bs-text bs-text--${this.variant}` }, h("slot", { key: '58682202f777666c9c454441b8f9cd279df1547b' })));
+        return (h(Tag, { key: '39b932702ac56ba72165816fefadecc19899b302', part: "text", class: `bs-text bs-text--${this.variant}` }, h("slot", { key: '10c274f769fdc64b6994c967eb517997f6a00742' })));
     }
     static get is() { return "bs-text"; }
     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: '6c39211476895cba77bd0d71720707de71a7ca77', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: 'bd0f8c5d6ecedc015e513385579d7a0bac411e28', class: "bs-timepicker__body" }, h("div", { key: 'f23edc581c8e9f8e71ffdeb0308b31024df9c903', part: "header", class: "bs-timepicker__header" }, h("div", { key: '59f19ab0dcafe6b9e88753d51a775e5858908521', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: 'f893f5004b80d81c4d24e80650c421b9a3693ee2', class: "bs-timepicker__format" }, h("span", { key: 'ab25241558e5bfb13272d3dcf988b932734ad088' }, this.formatLabel), h("bs-switch", { key: '1a10a8c9dadb2685c69f6fe8eb9f1a2a99da9947', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: '2d28fa7cbc6ffd8a5571b465ebb08725721a1562', class: "bs-timepicker__divider" }), h("div", { key: 'd76698067c871ff65541c80af059361af2df6bd9', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '1fb97bb0ec1304c850ed29d43043afb998de7a85', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: '4394c594a84e89b7eee6cdc99924e37cccb972d5', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: 'd49adf2c12c3f306e0f391e9f9ceafde48816bc0', cx: "2", cy: "10", r: "2" }), h("circle", { key: '28a40a7892cee72c14b544dbecd3876e39122978', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '6ab743da6d258633490dee94730d0aa660020546', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
+        return (h("bs-card", { key: '57964e003d5d7d6abccb13a17e759721e2aa272e', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: '664469ea766475d939684231e4c1c5f01afe824a', class: "bs-timepicker__body" }, h("div", { key: '75aa6484e5fd2735ef972f3a29ebba5ce89838d4', part: "header", class: "bs-timepicker__header" }, h("div", { key: '06978e8b2b3f245d723bbf8099bc542a1ffcce78', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: '69154fd6015f1d945adcdf954841da6bf2d4d539', class: "bs-timepicker__format" }, h("span", { key: 'f8dadb20d719f379e5f47a888706af6b2ab0202b' }, this.formatLabel), h("bs-switch", { key: '5411272d1141e5c0c9d3742c81df88f78eb113ed', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: '3cb6c8ccad07ec88afab6f9f40a1115f82ed477e', class: "bs-timepicker__divider" }), h("div", { key: '54f473f57a0c498a3267cabf84db3c1a8ba285ab', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '92e9520755d52e58fe4412a073748e9928b3cff7', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: 'cd55a6677dd695e5e93d296302cc429d84e01887', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: 'ef746f64ebb5a49ee0f56c0c50b167316aec5053', cx: "2", cy: "10", r: "2" }), h("circle", { key: '65852107527c34a4aaec9c00fca8d5be4ef2d5aa', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '9d17f6c9401969e52ff99a4b84560617c2525300', 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: '59c34d3ba15c1603262c8d3c08b2a6891477252d', class: "bs-timepicker__divider" }), h("div", { key: '7629f6b868857d48947f74e63991c8370e5e6431', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: 'c96e079ba9d3103db5e0d5e361491bbf2098486c', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '6157268548b8facf83a2efa81a85dab8d2063aef', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
+            } }))), h("div", { key: '914705bd05bf0a3d1a8d85c671241325cc564369', class: "bs-timepicker__divider" }), h("div", { key: '1c1849dde9807f507dc0c7b1446f725f8e5971a0', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: '2e3bd483d598b9539b28742fba2a2dbff56a38ea', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '667c14ac6847e9d27439ea0637038deb019f0ccc', 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: '709a8a42f030c927c032eadefbfe2e9f62a01f86', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '2895b376ebe8e35ef4ae0fe6b0a943c02e2c5c83', class: "bs-toast__content" }, h("span", { key: '2b90fe16b40215eac33d92b7a05e5c86d5ed3a16', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: 'ef1016e3d1035b73110e0fe5728b41f6d2992787', state: this.state })), h("span", { key: '6c63a7d4d38fc71c66336cd1d9bbfa21b8608e7f', part: "message", class: "bs-toast__message" }, h("slot", { key: '5ba3c4fa6b524c466e0d825df6a74bb776d179ef' }))), h("div", { key: '5fdc3cb4c8b1c9c4fb9e34265e13e32ced2666d1', class: "bs-toast__actions" }, h("button", { key: 'cc647daec4eeca19cf674e72fae642cabb03ed05', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '95828c7c5248a65beaf13ffad4fd55c7530999ff' })))));
+        return (h("div", { key: '5bc681de86bd983ebe893b9ea8ed94b473896982', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '4842f349978fedfcceb535da81e90029d98b3432', class: "bs-toast__content" }, h("span", { key: 'c396041be59b6088c2a50ef156b218c7c2cc70d0', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '33342d2bab947b9144e2bee18abb8292c75fe339', state: this.state })), h("span", { key: 'c6b2840d95a518e5d91dc281a81a83e6442bab1b', part: "message", class: "bs-toast__message" }, h("slot", { key: '1505051e3ce412f7b6bcefd82183717f870418b5' }))), h("div", { key: '50e3f96e3f7b325b97d3cf90771374f60aa87f24', class: "bs-toast__actions" }, h("button", { key: '69962e5d154c55372b562b45e06c07b8e16ce306', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '96d3547e268179d3f4799d43bf2d71abfbe8dc07' })))));
     }
     static get is() { return "bs-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-toggle-button/bs-toggle-button.cmp.test.js

@@ -40,6 +40,17 @@ describe('bs-toggle-button', () => {
         expect(btn.getAttribute('aria-label')).toBe('Grid view');
         expect(btn).toHaveClass('bs-toggle-button--icon-only');
     });
+    it('is not icon-only on the very first render when it has label text', async () => {
+        // The class must be right before any `slotchange` fires, or the label is hidden for a frame
+        // and the button briefly has no accessible name.
+        const el = document.createElement('bs-toggle-button');
+        el.textContent = 'Bold';
+        document.body.appendChild(el);
+        await el.componentOnReady();
+        const btn = el.shadowRoot.querySelector('button');
+        expect(btn).not.toHaveClass('bs-toggle-button--icon-only');
+        el.remove();
+    });
     it('tabbable=false sets tabindex -1', async () => {
         const { root } = await render(h("bs-toggle-button", { tabbable: false }, "A"));
         expect(root.shadowRoot.querySelector('button').getAttribute('tabindex')).toBe('-1');

package/dist/collection/components/bs-toggle-button/bs-toggle-button.js

@@ -41,6 +41,14 @@ export class BsToggleButton {
     bsChange;
     hasLabel = false;
     hasIcon = false;
+    // Seed from the light DOM so the first render is already correct. Waiting for `slotchange` leaves
+    // a frame where a labelled button is styled icon-only (label hidden, so no accessible name).
+    componentWillLoad() {
+        const children = Array.from(this.el.childNodes);
+        const slotOf = (n) => (n.nodeType === 1 ? n.getAttribute('slot') : null);
+        this.hasIcon = children.some(n => slotOf(n) === 'icon');
+        this.hasLabel = children.some(n => slotOf(n) === null && (n.nodeType === 1 || !!n.textContent?.trim()));
+    }
     onIconSlotchange = (ev) => {
         this.hasIcon = ev.target.assignedNodes().length > 0;
     };
@@ -62,7 +70,7 @@ export class BsToggleButton {
     };
     render() {
         const radio = this.mode === 'radio';
-        return (h("button", { key: '444c2161afae1af1e82ee454014c61b938ef2b23', type: "button", part: "button", class: `bs-toggle-button ${this.pressed ? 'bs-toggle-button--pressed' : ''} ${this.hasLabel ? '' : 'bs-toggle-button--icon-only'}`, role: radio ? 'radio' : undefined, "aria-pressed": radio ? undefined : String(this.pressed), "aria-checked": radio ? String(this.pressed) : undefined, "aria-label": this.ariaLabel, disabled: this.disabled, tabindex: this.tabbable ? undefined : -1, onClick: this.onClick }, h("bs-ripple", { key: '392b1d00b0d5dda96d0eb7161989579830e31cf9', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'b59e51d2bf13a3ea0a4eedab7dc120d07e812bc2', part: "icon", class: `bs-toggle-button__icon ${this.hasIcon ? 'bs-toggle-button__icon--has-content' : ''}` }, h("slot", { key: '34c7b4c9830b479b57aaef951423c19b551c026f', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '402c92bcd76b444df01aee9f42dfbc765fc8ec96', part: "label", class: "bs-toggle-button__label" }, h("slot", { key: 'de6cbdf862a8dbb028733e25c58312b4a707f827', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: 'f0d0b857c75ded029be27ec9adb00d5f181a3d50', type: "button", part: "button", class: `bs-toggle-button ${this.pressed ? 'bs-toggle-button--pressed' : ''} ${this.hasLabel ? '' : 'bs-toggle-button--icon-only'}`, role: radio ? 'radio' : undefined, "aria-pressed": radio ? undefined : String(this.pressed), "aria-checked": radio ? String(this.pressed) : undefined, "aria-label": this.ariaLabel, disabled: this.disabled, tabindex: this.tabbable ? undefined : -1, onClick: this.onClick }, h("bs-ripple", { key: '4aec0e3eee4ae6a5a407833de52533fc03f6b8f3', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '3917ef305cf87dbbda33c4770cf86e6892423b39', part: "icon", class: `bs-toggle-button__icon ${this.hasIcon ? 'bs-toggle-button__icon--has-content' : ''}` }, h("slot", { key: '4bd9d1e4da1a7a37efa980e36a07266911c04afe', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'e33eeb741ebda53df820aaec814892082fb1076d', part: "label", class: "bs-toggle-button__label" }, h("slot", { key: 'ab303182f9bcc5bb6330f59e4a1d7e2fef698db8', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-toggle-button/bs-toggle-button.stories.js

@@ -18,5 +18,5 @@ export const Pressed = { args: { pressed: true } };
 export const Disabled = { args: { disabled: true } };
 export const IconOnly = {
     name: 'Icon only',
-    render: () => html `<bs-toggle-button ariaLabel="Grid view">${gridIcon}</bs-toggle-button>`,
+    render: () => html `<bs-toggle-button aria-label="Grid view">${gridIcon}</bs-toggle-button>`,
 };

package/dist/collection/components/bs-toggle-button-group/bs-toggle-button-group.js

@@ -97,7 +97,7 @@ export class BsToggleButtonGroup {
             btn?.click();
     }
     render() {
-        return (h("div", { key: '1ca052e150356a59c2a6341a8de13a8b6a99a868', part: "group", class: "bs-toggle-button-group", role: this.multiple ? 'group' : 'radiogroup', "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : undefined }, h("slot", { key: 'e31c4ee55e0501bee85e3772e86f1e3fd326ad2a', onSlotchange: () => this.sync() })));
+        return (h("div", { key: '61d043efa2ecdf437d48bc2ca0b3d75f17a00b43', part: "group", class: "bs-toggle-button-group", role: this.multiple ? 'group' : 'radiogroup', "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : undefined }, h("slot", { key: '4b1c8e64b23cd54607c19b214b938e44dee99fef', onSlotchange: () => this.sync() })));
     }
     static get is() { return "bs-toggle-button-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-toggle-button-group/bs-toggle-button-group.stories.js

@@ -1,5 +1,7 @@
 import { html } from "lit";
 import { componentDescription, propDescription } from "../../stories-utils";
+import { expect, userEvent, waitFor } from "storybook/test";
+import { ready, inShadow, recordEvents } from "../../play-utils";
 const icon = (d) => html `<svg slot="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d=${d} stroke="currentColor" stroke-width="1.5"/></svg>`;
 const meta = {
     title: 'Components/bs-toggle-button-group',
@@ -19,9 +21,37 @@ const meta = {
     args: { multiple: false, disabled: false, value: 'week' },
 };
 export default meta;
-export const Default = {};
+export const Default = {
+    play: async ({ canvasElement }) => {
+        const group = await ready(canvasElement, 'bs-toggle-button-group');
+        const changes = recordEvents(group, 'bsChange');
+        const button = async (value) => {
+            const item = await ready(canvasElement, `bs-toggle-button[value="${value}"]`);
+            return inShadow(item, '[part="button"]');
+        };
+        await expect(group.value).toBe('week');
+        await waitFor(async () => expect(await button('week')).toHaveAttribute('aria-checked', 'true'));
+        // Single choice: picking one deselects the other.
+        await userEvent.click(await button('day'));
+        await waitFor(() => expect(group.value).toBe('day'));
+        await waitFor(async () => expect(await button('day')).toHaveAttribute('aria-checked', 'true'));
+        await waitFor(async () => expect(await button('week')).toHaveAttribute('aria-checked', 'false'));
+        await expect(changes.at(-1)?.detail).toBe('day');
+    },
+};
 export const MultipleChoice = {
     name: 'Multiple choice',
+    play: async ({ canvasElement }) => {
+        const group = await ready(canvasElement, 'bs-toggle-button-group');
+        const changes = recordEvents(group, 'bsChange');
+        const italic = inShadow(await ready(canvasElement, 'bs-toggle-button[value="italic"]'), '[part="button"]');
+        await expect(italic).toHaveAttribute('aria-pressed', 'false');
+        // Multiple choice: adds to the existing selection instead of replacing it.
+        await userEvent.click(italic);
+        await waitFor(() => expect(italic).toHaveAttribute('aria-pressed', 'true'));
+        await expect([...(group.values ?? [])].sort()).toEqual(['bold', 'italic']);
+        await expect([...(changes.at(-1)?.detail ?? [])].sort()).toEqual(['bold', 'italic']);
+    },
     render: () => html `
     <bs-toggle-button-group ariaLabel="Text format" multiple .values=${['bold']}>
       <bs-toggle-button value="bold">Bold</bs-toggle-button>
@@ -34,8 +64,8 @@ export const IconOnly = {
     name: 'Icon only',
     render: () => html `
     <bs-toggle-button-group ariaLabel="Layout" value="grid">
-      <bs-toggle-button value="list" ariaLabel="List view">${icon('M4 6h16M4 12h16M4 18h16')}</bs-toggle-button>
-      <bs-toggle-button value="grid" ariaLabel="Grid view">${icon('M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z')}</bs-toggle-button>
+      <bs-toggle-button value="list" aria-label="List view">${icon('M4 6h16M4 12h16M4 18h16')}</bs-toggle-button>
+      <bs-toggle-button value="grid" aria-label="Grid view">${icon('M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z')}</bs-toggle-button>
     </bs-toggle-button-group>
   `,
 };

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

@@ -208,7 +208,7 @@ export class BsToolbar {
     }
     render() {
         const showOverflow = this.overflowActive();
-        return (h("div", { key: 'ca305772db802c2c868857c29b03f0b90dfad46f', 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: '91ddd8a5b79473d01de05c0880f74a0b4dbc9a70', part: "left", class: "bs-toolbar__group bs-toolbar__group--left" }, h("slot", { key: '57107d0c02dad6082ddb708a5184ab1f32b792e7', name: "left", onSlotchange: this.syncItems })), h("div", { key: '3877575130450cfadd5f48087cd5bc74fc0d97d2', part: "right", class: "bs-toolbar__group bs-toolbar__group--right" }, h("slot", { key: '9aa0176cbb57c372bf4c8ffaf92fbf1bfcab2aee', name: "right", onSlotchange: this.syncItems })), showOverflow && (h("bs-popover", { key: '33481714df4a931d2bb5f902d81ed11f242c53b1', part: "overflow", class: "bs-toolbar__overflow", placement: "bottom-end", hidden: this.overflowed.length === 0, ref: el => (this.popoverEl = el) }, h("bs-icon-button", { key: '5919b7506e2edcdc4af2c80fc676607a55e79d6c', slot: "trigger", variant: "subtle", size: "md", ariaLabel: this.overflowLabel, title: this.overflowLabel, ref: el => (this.triggerEl = el) }, h(MoreIcon, { key: '4f377ac2af7eb805645164df5f79d9b0ecdfb498' })), h("bs-menu", { key: '238caa865b1755ab45a9c2694c535f72199e9ebc' }, this.overflowed.map(entry => (h("bs-menu-item", { onBsSelect: () => this.activate(entry) }, entry.label))))))));
+        return (h("div", { key: 'f868afcd242c835df7455e1a299b7b4eeb259fac', 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: '7fabc6343f6eac5bea9199493c86a0d6d0a36823', part: "left", class: "bs-toolbar__group bs-toolbar__group--left" }, h("slot", { key: 'f05d2cbfbe92dd3d367f05a63c2f74435e434b14', name: "left", onSlotchange: this.syncItems })), h("div", { key: '3abe008852778989a32e7b5f427fc721e19a5d3b', part: "right", class: "bs-toolbar__group bs-toolbar__group--right" }, h("slot", { key: '99f09d60839240ca98daafd867c0df55e1f1b7be', name: "right", onSlotchange: this.syncItems })), showOverflow && (h("bs-popover", { key: '03cb9fab4b0dbb951d3691e3b3adbaf579b97027', part: "overflow", class: "bs-toolbar__overflow", placement: "bottom-end", hidden: this.overflowed.length === 0, ref: el => (this.popoverEl = el) }, h("bs-icon-button", { key: 'bb379ad418223d25c65bfb3c6217f7812bae39d0', slot: "trigger", variant: "subtle", size: "md", ariaLabel: this.overflowLabel, title: this.overflowLabel, ref: el => (this.triggerEl = el) }, h(MoreIcon, { key: '934a48b6148a20f62e409a89202e33dbeaa6a0b0' })), h("bs-menu", { key: 'b00b7aeed798883576dd8241c4a83a2604861526' }, 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"; }

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

@@ -42,7 +42,7 @@ export class BsTooltip {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: 'b873cd9f8733295d91bf062563c085225742e284', class: "bs-tooltip" }, h("span", { key: '811f91b8d71169e5646c6a7676596f5353fc05ab', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '680f7ca007f4dfa868ee18371ab8829524ea2e64', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: 'dd6d3e478e8d244f7050ac6c52cc248abe8b5889' }))));
+        return (h("div", { key: 'caf2503c9f387f7c66e438cec848daa77fb1b750', class: "bs-tooltip" }, h("span", { key: 'eecef927ed27fa9f4fb46eae25adc3314439ae70', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '5dab353dad2f1c0c09451971f9e435c63298ba0c', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: 'bfe731316620db86b129e64df6a0eb0671d79fa4' }))));
     }
     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: '011fa829af16715e0c5d85014e9545382e535238', 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: '7ea208deb719672d9e81c09b589d1a603647a30d' }), h("div", { key: '9219573ef6b0b65a4ec044a1e225fdeb13c5e702', part: "tooltip", id: this.tooltipId, class: "bs-tooltip-trigger__tooltip", role: "tooltip", hidden: !show, ref: el => (this.tipEl = el) }, h("bs-tooltip", { key: '1ae3d77cec6055cfbd308ffc6b6638331fb1ee9e', ref: el => (this.bubbleEl = el) }, this.text))));
+        return (h("div", { key: '23dc0d2d778acade15e99d7a1ecafecafc8aeea1', 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: 'b51a6b71ca1f656b3e3a3a07c5bcc788bdb4abf9' }), h("div", { key: '7fa243b2d8513bb47e42c7bd3a42a68d38f9f835', part: "tooltip", id: this.tooltipId, class: "bs-tooltip-trigger__tooltip", role: "tooltip", hidden: !show, ref: el => (this.tipEl = el) }, h("bs-tooltip", { key: 'dad6fac056f96ce2e64d731b5c477aee6b1bea64', 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: '136cc1baec52b088edfc88dbf65391b6553cb41d', part: "container", class: "bs-tree", role: "tree", "aria-label": this.ariaLabel }, h("slot", { key: '8d056b0f524d3dadea4f03b81c5e7b2637a94ae6' })));
+        return (h("div", { key: 'a44ab667d778f523810e576f64c9b859932c40d1', part: "container", class: "bs-tree", role: "tree", "aria-label": this.ariaLabel }, h("slot", { key: '2b9aae53d7cdd5cf276d6fea7d806337a2247842' })));
     }
     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: '03682589cf5a34887e061889d758bd99fe44af7e', 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: 'd939fe6d91686205bf41ededec514871959c0962', class: "bs-tree-item__row", style: { '--bs-tree-item-level': String(this.level) } }, h("div", { key: 'a20a86ad078cdd6ad9ad453e295e939d05e1cb33', part: "container", class: {
+        return (h(Host, { key: 'b11ed915ade513d084c9d45d41ccc6a74ac030ec', 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: '35f5ea00e89ba7972a7e1dd17fb0d8bda2edfbe6', class: "bs-tree-item__row", style: { '--bs-tree-item-level': String(this.level) } }, h("div", { key: 'a48c3d314f1ba8d2caaeaf94427952de3889f96d', 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: '7f4d48b4fa71d17e26b2cd3a0f90e866ace4c89d', part: "ripple" }), isParent && (h("span", { key: 'ace4fc43cb4713e9bce6e6b52e06d1b0d5593d1b', part: "caret", class: { 'bs-tree-item__caret': true, 'bs-tree-item__caret--open': this.expanded }, "aria-hidden": "true", onClick: this.onCaretClick }, h(CaretRightIcon, { key: 'fdc8560db355733d451dc39cc3f180bd74503428' }))), h("span", { key: 'fb5d33b63f60c2a9a7cc818eab4f246976cf712a', class: "bs-tree-item__content" }, this.showIcon && (h("span", { key: '445d9e91bc0fde1520818727a749ff6202f2a72c', part: "icon", class: "bs-tree-item__icon", "aria-hidden": "true" }, h("slot", { key: '2ed3eec4ca215c78f7ed0b43c836267e3cbe9676', name: "icon" }, isParent ? h(FolderIcon, null) : h(FileIcon, null)))), h("span", { key: '8930c00196136ed661de224d0efa75df44684069', part: "label", class: "bs-tree-item__label" }, h("slot", { key: '98b93991c6cf28a2f8d0892699fa9e0f66c94114', name: "label" }, this.label))))), showChildren && (h("div", { key: '84a4ae3903553b0b53e3ae7e6a9bc10e30a78878', part: "group", class: "bs-tree-item__group", role: "group" }, h("slot", { key: '2215b424caf9817a165bad25bb85625aa7fd40f3' })))));
+            }, onClick: this.onRowClick }, !this.disabled && h("bs-ripple", { key: 'f4a3412c475a136d8cbb1992f3e72d2599e51220', part: "ripple" }), isParent && (h("span", { key: '157b2dd21a6e2e9b5442b0751b280fd2a6d5aeca', part: "caret", class: { 'bs-tree-item__caret': true, 'bs-tree-item__caret--open': this.expanded }, "aria-hidden": "true", onClick: this.onCaretClick }, h(CaretRightIcon, { key: 'cfc6494cf35d532fdcae854f7cb248f4ad530ec5' }))), h("span", { key: 'cf1792c53d54257b23710a4c1c5f42f3aa5f7a16', class: "bs-tree-item__content" }, this.showIcon && (h("span", { key: '0c140478f7f4d4e4fc33386efa010ee7e3459cf8', part: "icon", class: "bs-tree-item__icon", "aria-hidden": "true" }, h("slot", { key: '5413186d19d7b11e26bd7ac04c36e41ffd4abfcb', name: "icon" }, isParent ? h(FolderIcon, null) : h(FileIcon, null)))), h("span", { key: 'cbbdf25c5c4dac64991cd5b59ee7d0c32f30e2d9', part: "label", class: "bs-tree-item__label" }, h("slot", { key: 'cf863304a5041e080e09607cff921016a9435ae5', name: "label" }, this.label))))), showChildren && (h("div", { key: 'e0a16b7ca65e562d902b0b059329e7ce0c701f4e', part: "group", class: "bs-tree-item__group", role: "group" }, h("slot", { key: 'f77d21abe579e32b2d44f912db90ba6501e820f5' })))));
     }
     static get is() { return "bs-tree-item"; }
     static get encapsulation() { return "shadow"; }

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: '84feaae60753eae3c9ed85a2e73be9e663813c50', class: "bs-whats-new-entry" }, (this.tag || this.date || this.unread) && (h("div", { key: 'aa57aaed80480b544f9fb4063530d20507c88e42', part: "meta", class: "bs-whats-new-entry__meta" }, this.tag && (h("bs-chip-informative", { key: '77c6e8343bb8b2861cc269a84391e71c6326c2d3', part: "tag", size: "sm", color: this.tagColor }, this.tag)), this.date && (h("span", { key: '7da15d5f57d1b16e09f5fdaf0554ac7a15721736', part: "date", class: "bs-whats-new-entry__date" }, this.date)), this.unread && (h("span", { key: '998272ae71c247c2ce37aa51f64deba6e5504b18', part: "unread", class: "bs-whats-new-entry__unread" }, h("span", { key: 'f68bad8ebff25260f3f0ef46427588b7402ace2d', class: "bs-whats-new-entry__sr-only" }, this.unreadLabel))))), h("div", { key: 'd4d73a1b0965fe19694b4a91b356e2b356ff2b1c', part: "image", class: { 'bs-whats-new-entry__image': true, 'bs-whats-new-entry__image--visible': this.hasImage } }, h("slot", { key: '2fbd8b4f5314a3d4e805cbe9c4f6d9dee2df77b3', name: "image", onSlotchange: (ev) => (this.hasImage = ev.target.assignedNodes().length > 0) })), h("div", { key: '8a1223ca6e9504e22c4da3da7baf255377c2f9cb', 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: '0a01cb48cba1868e0ee812a81aa51beaefbe0fc3', part: "description", class: "bs-whats-new-entry__description" }, this.description)), this.actionLabel && (h("bs-button", { key: '90af1787ba0e553e3f67454928cb9f72ed86a3be', part: "action", class: "bs-whats-new-entry__action", variant: "subtle", size: "sm", onClick: () => this.bsAction.emit() }, this.actionLabel, h("svg", { key: 'fe06d8fa3ede2e14c68138539c124b97c70a6b30', 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: '4135e8a848a40ae92d881253573285ff84854721', d: "M5 12H19" }), h("path", { key: '3d244f4ef7a4510d601f186c171afc5764af07e4', d: "M13 6L19 12L13 18" }))))), this.divider && h("div", { key: 'f2edb7bbef5a462a5d51c7e4025f82e59514476c', part: "divider", class: "bs-whats-new-entry__divider" })));
+        return (h("div", { key: '9588791a73ea1dc3dd59f255127022bc8e7ca84f', class: "bs-whats-new-entry" }, (this.tag || this.date || this.unread) && (h("div", { key: 'ef7933c404e9369fa575bba61c93b9c6d0fc137f', part: "meta", class: "bs-whats-new-entry__meta" }, this.tag && (h("bs-chip-informative", { key: 'e14464ce12f087fe6e7cc9c22c1ca0cde6f13d87', part: "tag", size: "sm", color: this.tagColor }, this.tag)), this.date && (h("span", { key: '1fa80cbc1f289ddd570622dd4e888ccff056280e', part: "date", class: "bs-whats-new-entry__date" }, this.date)), this.unread && (h("span", { key: '2375dddb04e4cf90c6ae0f39cf43dcb53f7e2916', part: "unread", class: "bs-whats-new-entry__unread" }, h("span", { key: 'c71150186bfe44d01f32736c21ea0b381d01874a', class: "bs-whats-new-entry__sr-only" }, this.unreadLabel))))), h("div", { key: '59fe2922cdae6e40b8f14f4507977c9f763d24b4', part: "image", class: { 'bs-whats-new-entry__image': true, 'bs-whats-new-entry__image--visible': this.hasImage } }, h("slot", { key: '3f7be28fa279ee63967012cc50a74390a0d2854e', name: "image", onSlotchange: (ev) => (this.hasImage = ev.target.assignedNodes().length > 0) })), h("div", { key: '8e5c05f312216a68fc48fba7dd92271c443e2a65', 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: '5699f4c1088fa2aab962cb4f966dc2ed0f45f067', part: "description", class: "bs-whats-new-entry__description" }, this.description)), this.actionLabel && (h("bs-button", { key: 'a003e06ec25ac21075d77050fdc0a072717688f0', part: "action", class: "bs-whats-new-entry__action", variant: "subtle", size: "sm", onClick: () => this.bsAction.emit() }, this.actionLabel, h("svg", { key: '487886a08b44220904edced24176aea518e8d284', 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: '10c8b2f40b39386f9f06a1b91a6e6d0f4a5006c9', d: "M5 12H19" }), h("path", { key: '30bffa1e6b136e035d57ad1d539b6d53ee03ef2a', d: "M13 6L19 12L13 18" }))))), this.divider && h("div", { key: '7cb0b59588e494d376a631138b5d077b3e6aaaa3', 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/tokens/tokens.stories.js

@@ -0,0 +1,90 @@
+import { html, render as litRender } from "lit";
+import tokensCss from "../../global/tokens.css?raw";
+// Live reference for the design tokens (tokens.mdx). The token names are parsed out of the same
+// tokens.css this package ships, so this page can't drift from it, and every value is read back
+// with getComputedStyle -- so the Theme and Brand toolbar switches change what you see here.
+const allNames = [...new Set([...tokensCss.matchAll(/^\s*(--bs-[a-z0-9-]+)\s*:/gm)].map(m => m[1]))];
+const named = (re) => allNames.filter(n => re.test(n));
+// Sort numeric scales by number, everything else alphabetically.
+const byScale = (a, b) => (parseInt(a.match(/(\d+)$/)?.[1] ?? '0') - parseInt(b.match(/(\d+)$/)?.[1] ?? '0')) || a.localeCompare(b);
+// Fills each [data-token] element's [data-value] child with the token's resolved value. Runs after
+// render because the value depends on the active theme/brand, which only the live DOM knows.
+const resolveValues = (root) => requestAnimationFrame(() => {
+    root.querySelectorAll('[data-token]').forEach(el => {
+        const out = el.querySelector('[data-value]');
+        if (out)
+            out.textContent = getComputedStyle(el).getPropertyValue(el.dataset.token).trim() || '(unset)';
+    });
+});
+// t-shirt sizes have no numeric suffix to sort on, so list them smallest to largest explicitly.
+const sizeOrder = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'].map(s => `--bs-font-size-${s}`);
+const grid = (content) => html `<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;">${content}</div>`;
+const label = (name) => html `<div style="font:12px/1.4 var(--bs-typography-font-family-body, sans-serif);color:var(--bs-text-neutral-default);word-break:break-all;"><code>${name}</code></div>`;
+const value = html `<div data-value style="font:11px/1.4 monospace;color:var(--bs-text-neutral-default);opacity:.7;"></div>`;
+const colorTile = (name) => html `
+  <div data-token=${name} style="display:flex;flex-direction:column;gap:6px;">
+    <div style="height:48px;border-radius:6px;border:1px solid var(--bs-border-neutral-container, #8884);background:var(${name});"></div>
+    ${label(name)}${value}
+  </div>`;
+const section = (render) => () => {
+    const host = document.createElement('div');
+    host.style.cssText = 'padding:8px;background:var(--bs-surface-base);';
+    litRender(render(), host);
+    resolveValues(host);
+    return host;
+};
+const meta = {
+    title: 'Guides/Tokens & Theme',
+    parameters: { layout: 'padded' },
+};
+export default meta;
+export const BrandScale = {
+    render: section(() => grid(named(/^--bs-brand-\d+$/).sort(byScale).map(colorTile))),
+};
+export const Surfaces = {
+    render: section(() => grid(named(/^--bs-surface-[a-z0-9-]+$/).map(colorTile))),
+};
+export const SemanticColors = {
+    render: section(() => grid(named(/^--bs-color-[a-z0-9-]+$/).map(colorTile))),
+};
+export const TextColors = {
+    render: section(() => grid(named(/^--bs-text-(?!style)[a-z0-9]+(-[a-z0-9]+)*$/).filter(n => !n.includes('---')).map(name => html `
+    <div data-token=${name} style="display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--bs-border-neutral-container, #8884);border-radius:6px;">
+      <div style="font:600 20px/1.2 var(--bs-typography-font-family-body, sans-serif);color:var(${name});">Aa Sample text</div>
+      ${label(name)}${value}
+    </div>`))),
+};
+export const Spacing = {
+    render: section(() => html `<div style="display:flex;flex-direction:column;gap:8px;">${named(/^--bs-spacing-\d+$/).sort(byScale).map(name => html `
+    <div data-token=${name} style="display:grid;grid-template-columns:230px 90px 1fr;align-items:center;gap:12px;">
+      ${label(name)}${value}
+      <div style="height:12px;width:var(${name});background:var(--bs-brand-500);border-radius:2px;"></div>
+    </div>`)}</div>`),
+};
+export const BorderRadius = {
+    render: section(() => grid(named(/^--bs-border-radius-[a-z0-9]+$/).sort(byScale).map(name => html `
+    <div data-token=${name} style="display:flex;flex-direction:column;gap:6px;">
+      <div style="height:64px;background:var(--bs-brand-100);border:2px solid var(--bs-brand-500);border-radius:var(${name});"></div>
+      ${label(name)}${value}
+    </div>`))),
+};
+export const Typography = {
+    render: section(() => html `
+    <div style="display:flex;flex-direction:column;gap:12px;">
+      ${sizeOrder.filter(n => allNames.includes(n)).map(name => html `
+        <div data-token=${name} style="display:grid;grid-template-columns:230px 90px 1fr;align-items:baseline;gap:12px;">
+          ${label(name)}${value}
+          <div style="font-size:var(${name});color:var(--bs-text-neutral-default);">The quick brown fox</div>
+        </div>`)}
+      <hr style="width:100%;border:0;border-top:1px solid var(--bs-border-neutral-container, #8884);" />
+      ${named(/^--bs-font-weight-[a-z]+$/).map(name => html `
+        <div data-token=${name} style="display:grid;grid-template-columns:230px 90px 1fr;align-items:baseline;gap:12px;">
+          ${label(name)}${value}
+          <div style="font-size:20px;font-weight:var(${name});color:var(--bs-text-neutral-default);">The quick brown fox</div>
+        </div>`)}
+    </div>`),
+};
+export const ZIndex = {
+    render: section(() => html `<table style="border-collapse:collapse;color:var(--bs-text-neutral-default);">${named(/^--bs-z-index-[a-z]+$/).map(name => html `
+    <tr data-token=${name}><td style="padding:4px 24px 4px 0;">${label(name)}</td><td>${value}</td></tr>`)}</table>`),
+};

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: 'ef2563170d2a1432e2361a682336ba805cdb17f8', "data-overlay": this.mobile ? '' : undefined }, this.mobile && h("div", { key: 'e7f19728083c42cb963a3b21f967434b3a864191', part: "backdrop", class: "bs-navigation-drawer__backdrop", onClick: this.requestClose }), h("nav", { key: '5059da6b91d31cd6b5e58e16426f243c0531a49d', ref: el => (this.navRef = el), class: classes, "aria-label": this.heading,
+        return (h(Host, { key: '7b07abf28504f339351b55602257214274139f4d', "data-overlay": this.mobile ? '' : undefined }, this.mobile && h("div", { key: '3bcf1f5e936e8ad1e90966ea70c4041f1e5ed622', part: "backdrop", class: "bs-navigation-drawer__backdrop", onClick: this.requestClose }), h("nav", { key: 'b03c07bbe26d62789f7aa753e69ccd40e87edc9e', 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: '898721d0728cf6f8ef5d14153e80305598b274d3', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '08c731fb855934ce69a87b4b1ce39c23a598aa77', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: 'dbeb1f6486d4110281236634e38d671b48aabee2', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '01bb10c69d07a28077029bb2190f343e3fcf6096', variant: "mark", background: this.logoBackground }))), h("div", { key: 'fdafb01fa51bc0e2286715955a2d60df86f83b5a', class: "bs-navigation-drawer__title-row" }, h("span", { key: '2245aa97f4603f1b220804297e71ed14b47303bb', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: '32fdee9dd95ec46cd40007d4a75fb16e62154399', 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: '42cf0c78b01d55902a0ca46e670dec44197361a1' })))), h("div", { key: '0cc895bf5ddd7a02a9b284edd159b651dca3dfc4', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: 'b0c10b8a6cca6b5c5f2ae078413bcb42900ae4ca', name: "search" })), h("button", { key: '3d45dbea4c356ec480c511f28f57a4a96a666f97', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": this.searchLabel, onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '0474082dfed00211ce85944e40764de680b7bedd' })), h("div", { key: '3a1a16a7696df675932a74c6b40de97654ba6658', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: 'bf7b183fabd8179dd1ea748c1594b4ed4d64755d' })))));
+            tabIndex: this.mobile ? -1 : undefined }, this.showLogo && (h("div", { key: '7404af0b1b6c2d3763cdb753bae716c4f01b7d6b', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: 'df613081072a5329ead4bea8aff55038015a24fd', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: 'c96945a4ff8f1fcab7bf18d4afe799d782a9711d', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '9942c8a61c17618ae2ec7e75015754b3f47ca9eb', variant: "mark", background: this.logoBackground }))), h("div", { key: '13b7941e965cd35f02d802c54323697ab11f7874', class: "bs-navigation-drawer__title-row" }, h("span", { key: 'bc8597651504dbb69c5042e3ca9f8ab5610b300f', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: '8b4b09d267509eaa5c30cb1a074fa71620ee7563', 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: '6db216fe74f8df40ce383fd3fcce6fb45de332d9' })))), h("div", { key: '9a7a427aff7ab9ad186790d6e95b6c2a25bd8c9f', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '483b570d647ede378ae9c5fa765f48c09d4bf149', name: "search" })), h("button", { key: 'a67818a27eeb2a3de81a31c57c5e80978e13b873', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": this.searchLabel, onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '9af8a772869ae0f87ee571556cb24adae922c142' })), h("div", { key: '840732ec91730a642040fd8eb47a2c85651ce503', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: '2546a9541a19321c0af9c577734097736a17394c' })))));
     }
     static get is() { return "bs-navigation-drawer"; }
     static get encapsulation() { return "shadow"; }