@brandsync/wc 1.21.0 → 1.22.1

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

@@ -61,6 +61,7 @@ export class BsSplitPane {
     sizes = [];
     draggingIndex = -1;
     observer;
+    sizeObserver;
     dragStart;
     /** Toggles `collapsed` and emits `bsCollapsedChange`. */
     async toggleCollapsed() {
@@ -76,7 +77,31 @@ export class BsSplitPane {
     }
     disconnectedCallback() {
         this.observer?.disconnect();
+        this.sizeObserver?.disconnect();
     }
+    componentDidRender() {
+        // Re-observe after every render: panes come and go with `paneCount`, and a pane's slotted content
+        // is what grows past it, so watch both.
+        this.sizeObserver?.disconnect();
+        this.sizeObserver = new ResizeObserver(this.updateScrollable);
+        this.el.shadowRoot?.querySelectorAll('.bs-split-pane__pane').forEach(pane => {
+            this.sizeObserver.observe(pane);
+            pane.querySelector('slot')?.assignedElements().forEach(child => this.sizeObserver.observe(child));
+        });
+        this.updateScrollable();
+    }
+    // A scrollable region must be keyboard-reachable, so a pane whose content overflows gets tabindex=0.
+    // Written straight to the DOM (not via render state) so it is in place as soon as the first render
+    // finishes, rather than a re-render later. Stencil leaves attributes it doesn't manage alone.
+    updateScrollable = () => {
+        this.el.shadowRoot?.querySelectorAll('.bs-split-pane__pane').forEach(pane => {
+            const overflows = pane.scrollHeight > pane.clientHeight + 1 || pane.scrollWidth > pane.clientWidth + 1;
+            if (overflows)
+                pane.setAttribute('tabindex', '0');
+            else
+                pane.removeAttribute('tabindex');
+        });
+    };
     countPanes() {
         let count = 1;
         for (let i = 1; i <= MAX_PANES; i++) {
@@ -215,7 +240,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: '57afdf0fbed93930a76aae2dab8faddacbc8e6e7', part: "container", class: `bs-split-pane bs-split-pane--${this.orientation}` }, nodes));
+        return (h("div", { key: 'b92f350618650af92c99401368a9f7e92dd551b2', 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-split-pane/bs-split-pane.stories.js

@@ -15,7 +15,7 @@ const detail = (title) => html `
   </div>
 `;
 const meta = {
-    title: 'Components/bs-split-pane',
+    title: 'Components/Layout/bs-split-pane',
     parameters: { docs: { description: { component: componentDescription('bs-split-pane') } } },
     render: args => html `
     <div style="height: 480px; border: 1px solid var(--bs-border-neutral-container)">

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: '4761db31dd50f134e1d8b35775a69ff9a177bcfa', style: { '--bs-stack-gap-token': `var(--bs-spacing-${gap})` } }, h("slot", { key: '5714b01e0b05429fae91067b05143b677db998e8', onSlotchange: this.sync }), parts));
+        return (h(Host, { key: 'b07a8e653b7689971c02dc70fe7a9c908108f85e', style: { '--bs-stack-gap-token': `var(--bs-spacing-${gap})` } }, h("slot", { key: '98be3029cd1bc877aa61345e44936f69dc4efdf1', onSlotchange: this.sync }), parts));
     }
     static get is() { return "bs-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { componentDescription } from "../../stories-utils";
 const box = (label) => html `<div style="padding: var(--bs-spacing-150); background: var(--bs-surface-container); border-radius: var(--bs-border-radius-100)">${label}</div>`;
 const meta = {
-    title: 'Components/bs-stack',
+    title: 'Components/Layout/bs-stack',
     parameters: { docs: { description: { component: componentDescription('bs-stack') } } },
     render: args => html `
     <bs-stack

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

@@ -62,7 +62,7 @@ export class BsStat {
         return (h("svg", { part: "trend-icon", class: "bs-stat__trend-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: d, stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
     }
     render() {
-        return (h("bs-card", { key: '6230f6e7164d99fb94e79a37d6301d514bf1c75c', part: "container", class: "bs-stat", surface: this.surface }, h("dl", { key: 'dc1688f2e20f4133c516e7f57ffc5d7b8a4de477', class: "bs-stat__body" }, h("dt", { key: '4772333b022fd6b95655209f7a7775eab653c6e0', class: "bs-stat__head" }, h("span", { key: '7aef50daa2c87b811b1e242753e081416df25b0d', class: { 'bs-stat__icon': true, 'bs-stat__icon--visible': this.hasIcon } }, h("slot", { key: '2ad02c5fffb58d31a4cf4ffb57fd58257fab0280', name: "icon", onSlotchange: (e) => (this.hasIcon = e.target.assignedNodes().length > 0) })), h("span", { key: 'b6b2d089a0b03da7aaad4447dd4291bf916964d3', part: "label", class: "bs-stat__label" }, this.label)), h("dd", { key: '2ccfdbcc3000d8448b2bac965efc23c14fdab5a4', class: "bs-stat__figure" }, h("span", { key: '6f6afb174d960a414fc3f95f862f70d3cd17105a', part: "value", class: "bs-stat__value" }, this.value), this.trend && (h("span", { key: '6887872c440d88f5269f39d65492c54589133d7d', part: "trend", class: `bs-stat__trend bs-stat__trend--${this.intent}` }, this.arrow(), h("span", { key: '0efad11fe74ac272c4f6d8f84cbf77fb45bf44f3', class: "bs-stat__sr" }, this.trendPrefix), this.trendValue && h("span", { key: 'de6eb28c4f20210ad7f9f9f4b2bbc02c5db1af78', class: "bs-stat__trend-value" }, this.trendValue)))), h("dd", { key: 'afc35315402059068afd3caf5bff330e73ab099d', class: { 'bs-stat__extra': true, 'bs-stat__extra--visible': this.hasExtra } }, h("slot", { key: '18280f7d6d2866b76307a1a651c2a21e55fd4c75', onSlotchange: (e) => (this.hasExtra = e.target.assignedNodes().some(n => n.nodeType === 1 || !!n.textContent?.trim())) })))));
+        return (h("bs-card", { key: '99379775abe5bfa1a7ae8d04cab1e0f5c5bddf98', part: "container", class: "bs-stat", surface: this.surface }, h("dl", { key: '963c7c0c2074b2960b98d1fd79f5f4dc22810b20', class: "bs-stat__body" }, h("dt", { key: '83863febf72f6a6b0fb7fc5d4d54836af3f92b4f', class: "bs-stat__head" }, h("span", { key: '14b4c6e47e762b313f554211d8eed6f804081648', class: { 'bs-stat__icon': true, 'bs-stat__icon--visible': this.hasIcon } }, h("slot", { key: '5a2e4ac5f4efc068ea631e3065979b15c9b18310', name: "icon", onSlotchange: (e) => (this.hasIcon = e.target.assignedNodes().length > 0) })), h("span", { key: '7a92fc17fbbf6ba05315be93fddea9d41a6681d8', part: "label", class: "bs-stat__label" }, this.label)), h("dd", { key: 'cb53c1bca2e0b178df127fb6386435602422ef76', class: "bs-stat__figure" }, h("span", { key: '5ecaace08e3c9ef627de9721cba52c7127a45897', part: "value", class: "bs-stat__value" }, this.value), this.trend && (h("span", { key: '12736ee0a0c0041de051fd96e1f031fee58a3387', part: "trend", class: `bs-stat__trend bs-stat__trend--${this.intent}` }, this.arrow(), h("span", { key: '12065cc93349c009411cadec24adac0fbe08067f', class: "bs-stat__sr" }, this.trendPrefix), this.trendValue && h("span", { key: '64d8f0817eee4a093d45dec0362656e2b2f2d300', class: "bs-stat__trend-value" }, this.trendValue)))), h("dd", { key: 'b23d0d60e71a9701b1376d6da5bc481c558f845e', class: { 'bs-stat__extra': true, 'bs-stat__extra--visible': this.hasExtra } }, h("slot", { key: '74dafd7c89d07ec66ab2b9ea5ac41ba7180367eb', onSlotchange: (e) => (this.hasExtra = e.target.assignedNodes().some(n => n.nodeType === 1 || !!n.textContent?.trim())) })))));
     }
     static get is() { return "bs-stat"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { componentDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-stat',
+    title: 'Components/Data display/bs-stat',
     parameters: { docs: { description: { component: componentDescription('bs-stat') } } },
     argTypes: {
         label: { control: 'text' },

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: '247099bad82070cc039de6602c9556df019d66e0', role: "list" }, h("slot", { key: '9243fd55edfbce9ee460f38580951e951eb2e48e', onSlotchange: this.onSlotChange })));
+        return (h(Host, { key: '3689910d22859e209015be08e5faf9d6c54b0c1c', role: "list" }, h("slot", { key: '05171784f3b9309251c1826e5f9ef174579ac7ab', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "bs-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { componentDescription, propDescription } from "../../../stories-utils";
 const meta = {
-    title: 'Components/bs-stepper',
+    title: 'Components/Navigation/bs-stepper',
     parameters: { docs: { description: { component: componentDescription('bs-stepper') } } },
     render: args => html `
     <bs-stepper current-step=${args.currentStep} direction=${args.direction} show-description=${args.showDescription}>

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: 'e4cedd89e79fe57ae5dee2bce70502dcf245eded', role: "listitem", class: `bs-stepper-step--${this.direction}`, "aria-disabled": state === 'disabled' ? 'true' : undefined }, h("div", { key: '9505c6283fd3058f1acaf733e8c393a8e38f5a87', class: "bs-stepper-step__top" }, h("span", { key: '01d9efbed7ea81d3d24da21c3676d619925a4c5f', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '643ecb7b48f6dc08107e1d1a63a6abb4f9b9256b', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: 'a51c760d0ad168574ab87969b1f5838106f4a474' }), state === 'error' && h(ExclamationIcon, { key: 'd3d7c06a38e04440a4cbe6ffc6f8b039e331f835' })), h("span", { key: '905c43488affd27c328457f9158f61e6aa89d219', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '734591eb91413fd6fcf7f9a0c9454544ed953ab4', class: "bs-stepper-step__connector-line" }))), h("span", { key: '89d06195df7aba3b00883a4a104f59a0585a99af', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '5ec9219bddf35ff96578262a07e163993a0a7a50', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '72d1542b56bd129d89b29c2e81b03ec4778eaf02', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (h(Host, { key: '254ec9def4e9cf11e1dc72fa1af8c97a36097581', role: "listitem", class: `bs-stepper-step--${this.direction}`, "aria-disabled": state === 'disabled' ? 'true' : undefined }, h("div", { key: 'c35996eb063c70df0f4c79dc882098ae7de6ecca', class: "bs-stepper-step__top" }, h("span", { key: 'd02c93b65ff3e7eeb5349d8d8ea594f00949b891', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: 'd98fd1d2a084f59c3f9cf1b63961e6a88e230675', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: 'be1bf786dc530015dbe164d36d022dee7b5db055' }), state === 'error' && h(ExclamationIcon, { key: '439fdccdbeee54449ae6e446f95bea75b684b009' })), h("span", { key: '9407db874e21d5871e98ef2c52af0ed7ee88a30b', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: 'c23941c1701d55daabee93e7124ce8e0b9623fba', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'bdfbfb685ce78768a3a9af2ae5ece69937607552', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'f3e8e99da0d0679b8d830f77b28167aa99095aca', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '0c929341027b485bc681aa0406aa323d80f6f0fe', 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

@@ -69,7 +69,7 @@ export class BsSwitch {
             .filter(Boolean)
             .join(' ');
         const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : ''].filter(Boolean).join(' ');
-        return (h("label", { key: '30e18dccef0481bd8859ecf0771246719508c622', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: 'bc94d02e313578cef43fe39b3a490f3f8cecbeec', 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: 'b7a6bf92d5fe4ca044c0ad790a57a4c3ef52d0be', part: "track", class: trackClasses }, h("span", { key: '8fd97319f4eccd6ae4ab24253dcc72ddb4eb7378', part: "knob", class: knobClasses }, h("bs-ripple", { key: '6e574549b8d85273d36d6526216dba51a04b86bf', part: "ripple", class: "bs-switch__ripple", centered: true, triggerSelector: ".bs-switch", disabled: this.disabled }))), h("span", { key: '092ca9f47fb1be8af3aff85d3d8a8e0d17f8d49d', part: "label", class: "bs-switch__label" }, h("slot", { key: '5356de3f833020a83a1aef15cb049a14ebee939c' }))));
+        return (h("label", { key: 'dd09d598001470a5bed9d705633e649366a5cf9e', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '8a49a0aca67c8322862cb8df026b3c3138dab957', 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: '3221302d5f6ead0d1a035b6d7d135a12246e301c', part: "track", class: trackClasses }, h("span", { key: '925c4f407a02cb97c31e174f0a5e90d30385d259', part: "knob", class: knobClasses }, h("bs-ripple", { key: '3fe6447c46e2af73b46db16f9cb2331ef869b6e1', part: "ripple", class: "bs-switch__ripple", centered: true, triggerSelector: ".bs-switch", disabled: this.disabled }))), h("span", { key: '958fb448e07bf4d2af8820fa88497435c9adf150', part: "label", class: "bs-switch__label" }, h("slot", { key: '5399072696520fe3b0f92609c557a45e3ff86188' }))));
     }
     static get is() { return "bs-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,8 +1,10 @@
 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',
+    title: 'Components/Forms/bs-switch',
     parameters: { docs: { description: { component: componentDescription('bs-switch') } } },
     render: args => html `
     <bs-switch size=${args.size} ?checked=${args.checked} ?disabled=${args.disabled}>
@@ -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: 'a4a4466cf06781452bfafb56cbb6dee16f88bfe7', 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: '7fd57ac805ab4945fa1bb33482ef858e0b9a37ec', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '5bccaa37f40238539722e711f4b1cea73a77b5cd', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: 'dac2d6bf01d69058c052763981a6a7caaf7c5f52', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'ccc8dd6c4b7b4a43e264b6888ca778bee8d00ee5', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: 'b446e758154a3efceff74eee58fb8847f044594d', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-inline-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ const homeIcon = html `
   </svg>
 `;
 const meta = {
-    title: 'Components/bs-tab/bs-inline-tab',
+    title: 'Components/Navigation/bs-tab/bs-inline-tab',
     parameters: { docs: { description: { component: componentDescription('bs-inline-tab') } } },
     // role="tab" is only valid ARIA inside a role="tablist" ancestor (axe-core flags a lone
     // bs-inline-tab as a critical aria-required-parent violation otherwise -- see

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: '8fd98c4f12fe25984c07e953a1607b3e4c0a7d17', 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: '896f94565aea13c576dd2ebc028fcaf5bfe6b69a', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'e88a94ed2b764ae78d2d3a5bbf2aaa95bd9106e2', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: 'c611fc1cc9b6b092372c1b2aec47bfe0ed9acb7f', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'c1197f3bbd0a537f6e0a9fd2441bfe1b0e09d760', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'e47b3a7aa890599bfacaaa579115427732099c3a', onSlotchange: this.onLabelSlotchange })), h("span", { key: '9f6dfee9154141ea72bd0f199cfb104b5f78d194', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'c1125351dc7815d59e8cd24db946965e5425975f', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '0ffa3e25e57d3e5f4fddc995229e160dd7545a16', part: "indicator", class: "bs-tab__indicator" })));
     }
     static get is() { return "bs-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ const homeIcon = html `
   </svg>
 `;
 const meta = {
-    title: 'Components/bs-tab/bs-tab',
+    title: 'Components/Navigation/bs-tab/bs-tab',
     parameters: { docs: { description: { component: componentDescription('bs-tab') } } },
     // role="tab" is only valid ARIA inside a role="tablist" ancestor (axe-core flags a lone bs-tab
     // as a critical aria-required-parent violation otherwise -- see bs-tab.mdx's Accessibility

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: '7900adcba506bbd084bfd8c095d0344306faff69', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'ab5b17dfe5d662bd46b573c919728c04b56425f3', 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,10 +1,12 @@
 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'];
 const meta = {
-    title: 'Components/bs-tab/bs-tabs',
+    title: 'Components/Navigation/bs-tab/bs-tabs',
     parameters: { docs: { description: { component: componentDescription('bs-tabs') } } },
     render: args => html `
     <bs-tabs type=${args.type} orientation=${args.orientation}>
@@ -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: '47d775adeb323c4a5c21279d33a20810cbac29da', part: "container", class: "bs-toc", "aria-label": this.label }, !this.hideTitle && (h("p", { key: '9d63c49490aa41184a00d88ab025d1779bfeb166', part: "title", id: this.titleId, class: "bs-toc__title" }, this.label)), nodes.length > 0 && this.renderList(nodes, 1), h("slot", { key: 'e9fda6e655d776fb90f19f958066dcc1777b713d', onSlotchange: this.readSlotted })));
     }
     static get is() { return "bs-table-of-contents"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ const sections = [
     ['toc-demo-a11y', 'Accessibility'],
 ];
 const meta = {
-    title: 'Components/bs-table-of-contents',
+    title: 'Components/Navigation/bs-table-of-contents',
     parameters: { docs: { description: { component: componentDescription('bs-table-of-contents') } } },
     render: args => html `
     <div style="display: flex; gap: 32px; height: 320px; overflow: auto;">

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: '50e70f1c1f279933d1766ec93e7a88bc2ad7503a', onSlotchange: () => (this.labelText = this.readLabel()) });
+        return (h(Host, { key: '29b956ecaf134c660b3ab769e99234727ee5e130' }, h("span", { key: '8e82315255d1c9a7c39c74431c6d41ea230bd34f', part: "container", class: { 'bs-tag': true, 'bs-tag--removable': this.removable } }, h("span", { key: 'dd751bc6feb2f46e421dce234ea8baf2d9cba82b', part: "icon", class: { 'bs-tag__icon': true, 'bs-tag__icon--visible': this.hasIcon } }, h("slot", { key: '503096f32e4426d7a4c6c5a0d11f807d7e668348', 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: 'b1d89e519ec61a444526adf831137f5d6b01f909', part: "remove", class: "bs-tag__remove", size: "xs", variant: "subtle", ariaLabel: `${this.removeLabel} ${this.labelText}`.trim(), onClick: this.onRemove }, h("svg", { key: '8ee1ffffe815823101e45420e443900c02ab0792', viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '4d7cccc12c65ec89735294da8e1aaad0ca545c7d', 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-tag/bs-tag.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { componentDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-tag',
+    title: 'Components/Data display/bs-tag',
     parameters: { docs: { description: { component: componentDescription('bs-tag') } } },
     argTypes: {
         label: { control: 'text' },

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: 'e23cdacde6c2dd10a6e0c603cd76fa60cc999ba0', part: "text", class: `bs-text bs-text--${this.variant}` }, h("slot", { key: '34008aa9788b5e4401cff92d5e7152da91c0d6f5' })));
     }
     static get is() { return "bs-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { componentDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-text',
+    title: 'Components/Typography and media/bs-text',
     parameters: { docs: { description: { component: componentDescription('bs-text') } } },
     render: args => html `<bs-text as=${args.as} variant=${args.variant} tone=${args.tone}>${args.text}</bs-text>`,
     argTypes: {

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: 'dab57e27c56dfa5423148a310367724d053632da', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: '8abc6031e58d31819cf81cf2c91d5d18f58a68a8', class: "bs-timepicker__body" }, h("div", { key: '79853face4f30bce97fe1350108166ab00090989', part: "header", class: "bs-timepicker__header" }, h("div", { key: '0085cc1b6a3395adbd7ffabf700917417add80f7', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: 'a1e597fd56d312412e1abdab7df413c421fb126d', class: "bs-timepicker__format" }, h("span", { key: '5d93f11e944478341ccaf54331f2af21c370b690' }, this.formatLabel), h("bs-switch", { key: '08faec46e401574e7e5ccb4f577248ea4c274a22', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: 'ef7560455a1849f94a698dc4d14b48e51299cb0d', class: "bs-timepicker__divider" }), h("div", { key: '29ae72b663dc9ca61ac1c5a75503b4b33d19817e', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '91ddda51be264b0f332e3068ac1ac8fbe546c91d', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: '91a220300dc5bca693fb5e5ca1f8ad790200256b', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: '4a265c532717e4db04a9e4aa57ae7a4a62db4938', cx: "2", cy: "10", r: "2" }), h("circle", { key: '4285240f0542ca07eca43d6165ab57079828ec00', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '85d78c3c1569bd699ef0a4b65066d25e9cd88a2a', 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: 'd5bb646ad75742995e9b31202621b1e7c88b9796', class: "bs-timepicker__divider" }), h("div", { key: '315e6733a984ef99ad0aa998abbfcb5455725ff5', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: 'f2160b644174d14dfe81d9f84938ad2f29ae9072', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '5131d29cf88ccf5effee5145b85e292229d48247', 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-timepicker/bs-timepicker.stories.js

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { componentDescription, propDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-timepicker',
+    title: 'Components/Forms/bs-timepicker',
     parameters: { docs: { description: { component: componentDescription('bs-timepicker') } } },
     render: args => html `
     <bs-timepicker

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: '0cd3f84b1bc4233de0e60d80feda8e0baa543ff3', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '24cd4dd77e0a0113a2852151442e35067e8e0316', class: "bs-toast__content" }, h("span", { key: '8d6b7e4cb48d352dc1f35c4be4a027abe2678463', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: 'e61563ae68b3f6258b724d41627abbffaec4aa00', state: this.state })), h("span", { key: '85d42a6ebb5ffeb43f1a269267b24b5692470e8d', part: "message", class: "bs-toast__message" }, h("slot", { key: 'c4bbab246538f6bd855f81dda35378e412c677e9' }))), h("div", { key: 'e5dd7640b6c49406fa3fa68e57ecf6073163f373', class: "bs-toast__actions" }, h("button", { key: '483face90818e9db0f75be4a3e188656ce3ce5f4', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '549982d389e2a7b3d767e67f9249cfa68b4f0be8' })))));
     }
     static get is() { return "bs-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ const hideOnDismiss = (ev) => {
     ev.currentTarget.style.display = 'none';
 };
 const meta = {
-    title: 'Components/bs-toast',
+    title: 'Components/Feedback/bs-toast',
     parameters: { docs: { description: { component: componentDescription('bs-toast') } } },
     render: args => html `
     <bs-toast state=${args.state} @bsDismiss=${hideOnDismiss}>${args.message}</bs-toast>

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: '1fed8ac2570a4d23c34d992fe7bc957a2010edf3', 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: '88641d9ed9ab22c439e48654a68570f8bdc46c53', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'd82620a97c11371cbc2f036fca76a2b8ccf0b7ce', part: "icon", class: `bs-toggle-button__icon ${this.hasIcon ? 'bs-toggle-button__icon--has-content' : ''}` }, h("slot", { key: '67ecb03e648a577b4fbdbd98c2ee11ed7803a4ad', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '3b069c34f76d2979382fcee5d31982efa01ff9e9', part: "label", class: "bs-toggle-button__label" }, h("slot", { key: '4ba7842ada798bb5aba6e0329e6f6379f0636797', 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

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { componentDescription, propDescription } from "../../stories-utils";
 const gridIcon = html `<svg slot="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z" stroke="currentColor" stroke-width="1.5"/></svg>`;
 const meta = {
-    title: 'Components/bs-toggle-button',
+    title: 'Components/Actions/bs-toggle-button',
     parameters: { docs: { description: { component: componentDescription('bs-toggle-button') } } },
     render: args => html `<bs-toggle-button ?pressed=${args.pressed} ?disabled=${args.disabled}>${args.label}</bs-toggle-button>`,
     argTypes: {
@@ -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: 'a1fb653e8c7832d1eab642e80b34cf5e8cf4078f', 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: '7d505f52b0f7f0652a2ef048b5c1cc1e4ef9eba6', onSlotchange: () => this.sync() })));
     }
     static get is() { return "bs-toggle-button-group"; }
     static get encapsulation() { return "shadow"; }