@brandsync/wc 1.8.0 → 1.10.0

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

@@ -0,0 +1,63 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-datepicker',
+    parameters: { docs: { description: { component: componentDescription('bs-datepicker') } } },
+    render: args => html `
+    <bs-datepicker
+      ?range=${args.range}
+      value=${args.value}
+      start=${args.start}
+      end=${args.end}
+      min=${args.min || undefined}
+      max=${args.max || undefined}
+      locale=${args.locale}
+      first-day-of-week=${args.firstDayOfWeek}
+      @bsChange=${(ev) => console.log('bsChange', ev.detail)}
+    ></bs-datepicker>
+  `,
+    argTypes: {
+        range: { control: 'boolean', description: propDescription('bs-datepicker', 'range') },
+        value: { control: 'text', description: propDescription('bs-datepicker', 'value') },
+        start: { control: 'text', description: propDescription('bs-datepicker', 'start') },
+        end: { control: 'text', description: propDescription('bs-datepicker', 'end') },
+        min: { control: 'text', description: propDescription('bs-datepicker', 'min') },
+        max: { control: 'text', description: propDescription('bs-datepicker', 'max') },
+        locale: { control: 'text', description: propDescription('bs-datepicker', 'locale') },
+        firstDayOfWeek: { control: { type: 'number', min: 0, max: 6 }, description: propDescription('bs-datepicker', 'firstDayOfWeek') },
+    },
+    args: {
+        range: false,
+        value: '2026-09-16',
+        start: '',
+        end: '',
+        min: '',
+        max: '',
+        locale: 'en-GB',
+        firstDayOfWeek: 0,
+    },
+};
+export default meta;
+// Figma "Default" type: month/year dropdowns, 16 September 2026 selected.
+export const Default = {};
+// Figma "Range" type: start/end fields, Mon-Sat of one week selected. The Figma's own dates (11-16
+// September) don't line up with the real 2026 calendar, so this uses 14-19 September -- the same
+// Monday-to-Saturday shape, so the band sits in a single row like the design.
+export const Range = {
+    args: { range: true, value: '', start: '2026-09-14', end: '2026-09-19' },
+};
+export const RangeAcrossWeeks = {
+    name: 'Range across weeks',
+    args: { range: true, value: '', start: '2026-09-11', end: '2026-09-24' },
+};
+export const MinMax = {
+    name: 'Min and max',
+    args: { min: '2026-09-10', max: '2026-09-25' },
+};
+export const MondayFirst = {
+    name: 'Week starts on Monday',
+    args: { firstDayOfWeek: 1 },
+};
+export const Danish = {
+    args: { locale: 'da-DK', firstDayOfWeek: 1 },
+};

package/dist/collection/components/bs-file-upload/bs-file-upload.js

@@ -112,7 +112,7 @@ export class BsFileUpload {
             this.handleFiles(files);
     };
     render() {
-        return (h("div", { key: 'baa70a704a4c3508cd3186f567d0887218a9c04d', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("div", { key: 'c5fe3207ba56506a272c42097ec23881bcf863d4', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: 'd33d8f0f7b17bab679124823c61a1b7c6d031345', name: "icon" }, h(UploadIcon, { key: 'd0356e97a031867f323de21905a2bbca57963962' }))), h("div", { key: 'a5f4fb403556b2b596291bfddad2b73b1765f91f', class: "bs-file-upload__content" }, h("div", { key: 'b99afac250a8d40e54c97f74afde42620da2ff07', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '33a2ce5aac1d8bf15c55dcf8ccfe4fbce6892fd1', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: 'eec7f2fcc598412107e7b9c78efae30a3714c674', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: 'f44a5747bb0e9452aefa1fe2fc1d51b1af7da9b1', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: 'c8e19f95978d103f535bf26fb64c34ff69c4c7ee', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
+        return (h("div", { key: 'b33535fd240d2d406118fd64fd9c227dea7ecd6e', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("div", { key: '38cc0d7e10cbdfd9daef5749c2b50ec7c9123f71', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: '0e9cadb8101a73f55410eb30b2ddbf9c5e2cd0ed', name: "icon" }, h(UploadIcon, { key: '3f745666d0967ab5de4a6824a0fc8b3e0f7f900b' }))), h("div", { key: '7e347497915149907ade2e90aa19bd339b013be9', class: "bs-file-upload__content" }, h("div", { key: 'ea3a760d44b38cd5397d5952dbee998ddb2bea1b', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '9e00cc05d2b479964502243e1dda32eb7fa81e42', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: 'abb9857cdd2c85a7730101d05a5704d947c669bd', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: '98dea0715d7c0c641c552025403febd13fe4c32f', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '0c83fdaba93b46128e4990f9d15a746fd95479f5', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
     }
     static get is() { return "bs-file-upload"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-file-upload-item/bs-file-upload-item.js

@@ -86,7 +86,7 @@ export class BsFileUploadItem {
     }
     render() {
         const removing = this.state === 'success';
-        return (h("div", { key: 'd26aebbbdb7858444d2ff3084c421ce1e70acd9e', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: '2bf21442cc31bc9f85178e97bdae140de59fd7ce', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: 'fb9a9d723855e6d2556e61fb5cc7414e296ddf89', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'ca1cab03c21d93b4fe754e8e4575bbee5c6c11bd', class: "bs-file-upload-item__content" }, h("div", { key: '072532a7cfb4a699ab9920594ed4299bd094eea3', class: "bs-file-upload-item__meta" }, h("span", { key: 'f30ec89b3af9d5a4fc3ea2cf9252713f47a68ba2', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '63aeb6db94d78011a649fa1a0771d488890c330b', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '5434d917777db308f8b16f84e2ccd5efcfb46dc8', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
+        return (h("div", { key: '6b7fc89949cfa70838cc60d94ccb91afe09f75cd', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: '55923d2fc56d8b1794a3a0d835440cd428e1e168', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '25f93a00ba465db98c73f1bf38abc46110ae5c82', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'ab975fe4e7e888755f9ceae00b6633f86b856c47', class: "bs-file-upload-item__content" }, h("div", { key: '6b1c9161edd76c799f0c545e2f939907bbb1dcee', class: "bs-file-upload-item__meta" }, h("span", { key: '3b7ca85e645d19b1ef1affff55a8e2a2284aff72', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '70dd2e29628bd536dac520ffe653bc7651f41c33', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '5ac7e596601ebdb35add9e278f17f67db4758e48', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
     }
     static get is() { return "bs-file-upload-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -314,7 +314,10 @@ export class BsInput {
     }
     renderStandardControl() {
         const nativeType = this.type === 'password' ? (this.passwordVisible ? 'text' : 'password') : this.type === 'dropdown' ? 'text' : this.type;
-        return (h("input", { id: "control", part: "control", class: "bs-input__control", type: nativeType, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.type === 'dropdown', min: this.type === 'number' ? this.min : undefined, max: this.type === 'number' ? this.max : undefined, step: this.type === 'number' ? this.step : undefined, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }));
+        return (h("input", { id: "control", part: "control", class: "bs-input__control", type: nativeType, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.type === 'dropdown',
+            // The popup state belongs on the focusable control (a roleless wrapper div can't carry
+            // aria-haspopup/aria-expanded -- axe's aria-allowed-attr flags it).
+            role: this.type === 'dropdown' ? 'combobox' : undefined, "aria-haspopup": this.type === 'dropdown' ? 'listbox' : undefined, "aria-expanded": this.type === 'dropdown' ? String(this.open) : undefined, min: this.type === 'number' ? this.min : undefined, max: this.type === 'number' ? this.max : undefined, step: this.type === 'number' ? this.step : undefined, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }));
     }
     renderSelectControl() {
         return (h("select", { id: "control", part: "control", class: "bs-input__control", disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }, this.options.map(opt => (h("option", { value: opt.value, selected: opt.value === this.value }, opt.label)))));
@@ -374,7 +377,7 @@ export class BsInput {
             .filter(Boolean)
             .join(' ');
         const isDropdown = this.type === 'dropdown';
-        return (h("div", { class: "bs-input__field-wrapper" }, h("div", { part: "field", class: fieldClasses, onClick: isDropdown ? this.onDropdownToggle : undefined, onKeyDown: isDropdown ? this.onDropdownKeydown : undefined, "aria-haspopup": isDropdown ? 'listbox' : undefined, "aria-expanded": isDropdown ? String(this.open) : undefined }, h("span", { part: "icon", class: `bs-input__icon ${this.showsIconArea ? 'bs-input__icon--visible' : ''}` }, this.renderIconContent()), this.renderControl(), h("span", { part: "end-icon", class: `bs-input__end-icon ${this.showsEndIconArea ? 'bs-input__end-icon--visible' : ''}` }, this.renderEndIconContent())), isDropdown && this.open && this.options.length > 0 && (h("bs-menu", { part: "menu", class: "bs-input__dropdown-menu", role: "listbox" }, this.options.map(option => (h("bs-menu-item", { key: option.value, onBsSelect: this.onDropdownOptionSelect(option) }, option.label)))))));
+        return (h("div", { class: "bs-input__field-wrapper" }, h("div", { part: "field", class: fieldClasses, onClick: isDropdown ? this.onDropdownToggle : undefined, onKeyDown: isDropdown ? this.onDropdownKeydown : undefined }, h("span", { part: "icon", class: `bs-input__icon ${this.showsIconArea ? 'bs-input__icon--visible' : ''}` }, this.renderIconContent()), this.renderControl(), h("span", { part: "end-icon", class: `bs-input__end-icon ${this.showsEndIconArea ? 'bs-input__end-icon--visible' : ''}` }, this.renderEndIconContent())), isDropdown && this.open && this.options.length > 0 && (h("bs-menu", { part: "menu", class: "bs-input__dropdown-menu", role: "listbox" }, this.options.map(option => (h("bs-menu-item", { key: option.value, onBsSelect: this.onDropdownOptionSelect(option) }, option.label)))))));
     }
     renderPinField() {
         this.pinInputs = [];
@@ -383,10 +386,10 @@ export class BsInput {
         return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (h("div", { key: '1149cfe8eaa6085007a8d9a963b6c909bb6cda13', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '70497bf30b0a244e1df36075d0db77cec5345d6c', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: 'd737018c1e1ebcde529710d8ea58c6bed76f2abf', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '5993b19cbfcb8725550c1292c00795c8463e554c', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: '527e0d146170d9d11a004d452fa2cb363c5cc7d2', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '9dd54a626ec80c774d6deacc3c9dcf02d1fef8a9', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+import { vi } from "vitest";
 describe('bs-logo', () => {
     it('renders role="img" and aria-label="BrandSync"', async () => {
         const { root } = await render(h("bs-logo", null));
@@ -37,9 +38,9 @@ describe('bs-logo', () => {
             expect(getComputedStyle(darkAsset).display).toBe('none');
         });
         it('shows the dark asset and hides the light one when an ambient dark theme sets --bs-logo-asset-*-display', async () => {
-            // Simulates what src/global/base.css's [data-theme="dark"] rule sets on <html> in a real
-            // app -- setting the same custom properties directly on the render stage container here,
-            // since this isolated component test doesn't load that global stylesheet. CSS custom
+            // Simulates what src/global/base.css's [data-theme="dark"] rule sets, by setting the same
+            // custom properties directly on the render stage container. (The real selector is exercised
+            // in the "follows the real [data-theme="dark"] attribute" tests below.) CSS custom
             // properties inherit through the shadow boundary regardless of where they're defined.
             const { root } = await render(h("bs-logo", null), {
                 stageAttrs: { style: '--bs-logo-asset-light-display: none; --bs-logo-asset-dark-display: block;' },
@@ -50,6 +51,54 @@ describe('bs-logo', () => {
             expect(getComputedStyle(darkAsset).display).not.toBe('none');
         });
     });
+    // The tests above set the --bs-logo-asset-*-display variables by hand. These exercise the real
+    // `[data-theme="dark"]` rule from src/global/base.css (loaded by vitest-setup.ts), i.e. what a
+    // consuming app actually does -- including WHERE the attribute may sit (issue: dark logo on a dark
+    // theme).
+    describe('background="auto" follows the real [data-theme="dark"] attribute', () => {
+        const shown = (root) => ({
+            light: getComputedStyle(root.shadowRoot.querySelector('.bs-logo__asset--light')).display !== 'none',
+            dark: getComputedStyle(root.shadowRoot.querySelector('.bs-logo__asset--dark')).display !== 'none',
+        });
+        it('flips to the dark asset when data-theme="dark" is on <html>', async () => {
+            document.documentElement.setAttribute('data-theme', 'dark');
+            try {
+                const { root } = await render(h("bs-logo", null));
+                expect(shown(root)).toEqual({ light: false, dark: true });
+            }
+            finally {
+                document.documentElement.removeAttribute('data-theme');
+            }
+        });
+        it('flips to the dark asset when data-theme="dark" is on <body>', async () => {
+            document.body.setAttribute('data-theme', 'dark');
+            try {
+                const { root } = await render(h("bs-logo", null));
+                expect(shown(root)).toEqual({ light: false, dark: true });
+            }
+            finally {
+                document.body.removeAttribute('data-theme');
+            }
+        });
+        it('flips to the dark asset when data-theme="dark" is on any ancestor wrapper', async () => {
+            const { root } = await render(h("div", { "data-theme": "dark" }, h("bs-logo", null)));
+            expect(shown(root.querySelector('bs-logo'))).toEqual({ light: false, dark: true });
+        });
+        it('does NOT flip for a logo outside the data-theme="dark" element', async () => {
+            const { root } = await render(h("div", null, h("div", { "data-theme": "dark" }), h("bs-logo", null)));
+            expect(shown(root.querySelector('bs-logo'))).toEqual({ light: true, dark: false });
+        });
+        it('does not follow prefers-color-scheme (only the data-theme attribute)', async () => {
+            const spy = vi.spyOn(window, 'matchMedia').mockImplementation((q) => ({ matches: q.includes('prefers-color-scheme: dark'), media: q, addEventListener: () => undefined, removeEventListener: () => undefined, addListener: () => undefined, removeListener: () => undefined, onchange: null, dispatchEvent: () => false }));
+            try {
+                const { root } = await render(h("bs-logo", null));
+                expect(shown(root)).toEqual({ light: true, dark: false });
+            }
+            finally {
+                spy.mockRestore();
+            }
+        });
+    });
     describe('background="light"/"dark" (explicit)', () => {
         it('pins the light asset even when an ambient dark theme is set', async () => {
             const { root } = await render(h("bs-logo", { background: "light" }), {

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

@@ -44,7 +44,7 @@ export class BsMenu {
         items[next].shadowRoot?.querySelector('button')?.focus();
     }
     render() {
-        return (h("div", { key: '4f2995d0f53f85656de8595fb6a9909833c6369d', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '0824f2a784eb4cfa28a2868f19c056570b56ba63' })));
+        return (h("div", { key: '24e54ac14b17bc1e45bcd5d7d0fda3250350672a', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '57e28eafbb83da6bb14dfe588793edd33b2b5316' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,3 +13,57 @@ const meta = {
 };
 export default meta;
 export const Default = {};
+// `bs-menu` is only the popup surface: it does not open, close or position itself. This story is the
+// recipe for turning it into a dropdown with the pieces the library already has (a button, the menu,
+// and ~25 lines of wiring). The same code is shown in bs-menu.mdx.
+export const DropdownRecipe = {
+    name: 'Dropdown (recipe)',
+    render: () => {
+        const host = document.createElement('div');
+        host.style.minHeight = '220px';
+        host.innerHTML = `
+      <div class="dropdown" style="position: relative; display: inline-block;">
+        <bs-button aria-haspopup="menu" aria-expanded="false">Actions</bs-button>
+        <bs-menu style="display: none; position: absolute; top: calc(100% + var(--bs-spacing-50)); inset-inline-start: 0; z-index: var(--bs-z-index-popover); width: 210px;">
+          <bs-menu-item>Edit</bs-menu-item>
+          <bs-menu-item>Duplicate</bs-menu-item>
+          <bs-menu-item disabled>Archive</bs-menu-item>
+          <bs-menu-item>Delete</bs-menu-item>
+        </bs-menu>
+      </div>`;
+        const wrapper = host.querySelector('.dropdown');
+        const trigger = wrapper.querySelector('bs-button');
+        const menu = wrapper.querySelector('bs-menu');
+        const onDocumentClick = (ev) => {
+            // composedPath() so a click inside the shadow DOM of the button / menu items counts as inside
+            if (!ev.composedPath().includes(wrapper))
+                setOpen(false);
+        };
+        function setOpen(open, restoreFocus = false) {
+            menu.style.display = open ? 'block' : 'none';
+            trigger.setAttribute('aria-expanded', String(open));
+            if (open) {
+                document.addEventListener('click', onDocumentClick);
+                // bs-menu handles Up/Down/Home/End once focus is inside; put it on the first enabled item
+                menu.querySelector('bs-menu-item:not([disabled])')?.shadowRoot?.querySelector('button')?.focus();
+            }
+            else {
+                document.removeEventListener('click', onDocumentClick);
+                if (restoreFocus)
+                    trigger.focus();
+            }
+        }
+        trigger.addEventListener('click', () => setOpen(menu.style.display === 'none'));
+        wrapper.addEventListener('keydown', (ev) => {
+            if (ev.key === 'Escape')
+                setOpen(false, true);
+        });
+        wrapper.addEventListener('focusout', (ev) => {
+            // Tab (or anything else) moving focus out of the whole dropdown closes it
+            if (menu.style.display !== 'none' && !wrapper.contains(ev.relatedTarget))
+                setOpen(false);
+        });
+        menu.addEventListener('bsSelect', () => setOpen(false, true));
+        return host;
+    },
+};

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

@@ -47,7 +47,7 @@ export class BsMenuItem {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '02e1255e64ab0bd0b283927f1321fb5e660c78b6', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: 'fb36594dd48bd601a26d9debda9fb1c9bde37f88', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '19049f5f1f79e6136cd9cc8bcb3669ff97d79c18', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '6ac351a3d3a07bea5bbb5f69bd58c1a7189283fe', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '04215578eb545d824c090cb72f1e493474dca409' }))));
+        return (h("button", { key: '5aabea2ec3ad0181e3ff53b3f22873563da69ccd', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: '7e180921d99d4f430d72d8dbfeda0ca00881b74a', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '9d6d15f2d51c271de699b0101f781d8c0f3ab7e9', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '88645fe2991eb91a145e33a4f5e5e59a9ade3248', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'd3cc0ffcf0f354ffa9c48cbc88a99ec99d4f2db4' }))));
     }
     static get is() { return "bs-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -87,7 +87,7 @@ export class BsPagination {
     }
     render() {
         const pageList = this.getPageList();
-        return (h("nav", { key: 'f5f1e20a72ffc81ca14b05ad735e3ca714069ed3', "aria-label": "Pagination" }, h("ul", { key: '416ef86fe6aca589869e529d1248cbca7ad254ac', part: "list", class: "bs-pagination__list" }, h("li", { key: 'c550eada1eb765db7734e0971f4a2222ad1488e8', part: "item", class: "bs-pagination__item" }, h("button", { key: '8a88280dc813abe71ba3315048ca8931ef2b20cf', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: 'ea30181c70ff4c7c39852cb978b4cc9307bfa736' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `Go to page ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: '1c587333c1795e4b189c793b442c03e75937ab11', part: "item", class: "bs-pagination__item" }, h("button", { key: '707144112eb882431b9d6ad43f7557be32d08e78', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: '5c94c76cbda7938da625f326ea2ef7ddadce3929' }))))));
+        return (h("nav", { key: '9c08eac677410bc05682ff8e4219b63226eb81bd', "aria-label": "Pagination" }, h("ul", { key: '2d62248f42a4a19470ac6a259ab759ccdfd9a245', part: "list", class: "bs-pagination__list" }, h("li", { key: 'db5f800712d37adb8d3d28cd24016a2e3c2cdda1', part: "item", class: "bs-pagination__item" }, h("button", { key: 'cdee1107fa0f38d3e92adb58d2147f97b7b0605f', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: 'f1293927db7446d8ceb6b8391e9a5796b0fad61c' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `Go to page ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: '530829cfaccd79476c8788f1079991cd7ccc3a4b', part: "item", class: "bs-pagination__item" }, h("button", { key: '9a38949a2dd2de77cf57e3fe7e281c1fe49fcc50', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: '10f3d9f6a79b431ece2c1b8f12e579b210e95e2f' }))))));
     }
     static get is() { return "bs-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -69,7 +69,7 @@ export class BsProgress {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
         const dashOffset = circumference * (1 - value / 100);
-        return (h("div", { key: 'add8dfafdbee4eaa9712c6e2ba6ddff6f8f6c47f', part: "container", class: "bs-progress" }, h("div", { key: 'fd89c73aa247fc3770187a45dc4681857e257d4e', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
+        return (h("div", { key: 'b1516c02f0f6ec3865930a5ef1be7bab30c9cdfe', part: "container", class: "bs-progress" }, h("div", { key: '0689f281619a940d73d24bb79d25d54a0863c1af', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
         // Figma's indeterminate ring is a fading "comet tail" (transparent -> solid color),
         // not a flat-colored partial arc -- SVG has no angular/conic gradient primitive, so a
         // CSS conic-gradient (color varying by angle) + a radial-gradient mask (carving the
@@ -78,7 +78,7 @@ export class BsProgress {
         h("div", { part: "arc", class: "bs-progress__spinner", style: {
                 '--bs-progress-spinner-stroke-width': `${this.strokeWidth}px`,
                 '--bs-progress-spinner-sweep': `${INDETERMINATE_SWEEP_DEGREES}deg`,
-            } }))), isDeterminate && this.showLabel && (h("span", { key: '9c86dc195204f28c06e05bf09f823241bf9f3a86', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+            } }))), isDeterminate && this.showLabel && (h("span", { key: '2482112c5f6cac5dceffe49bd878e05a526ea64e', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
     }
     static get is() { return "bs-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-progress-linear/bs-progress-linear.js

@@ -51,13 +51,13 @@ export class BsProgressLinear {
     render() {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
-        return (h("div", { key: '279dbb0cd17b9584b500570d58cc09bd91e8a0d7', part: "container", class: "bs-progress-linear" }, h("div", { key: '9299c229184d172f743fb7fb0dce2a9c55a4496f', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
+        return (h("div", { key: '84a59a0536a42cbf196fe981b8574a2e530e99a0', part: "container", class: "bs-progress-linear" }, h("div", { key: '6ef60ecc713e514ee0d11c4f26fe12fd395c685d', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
         // Figma's indeterminate bar is a soft "comet" gradient segment (transparent -> blue ->
         // transparent) sliding left-to-right across the track's full width in a loop -- the
         // same fade concept as bs-progress's indeterminate ring's conic-gradient comet tail,
         // but along a straight line via a linear-gradient + `transform: translateX(...)`
         // keyframe animation instead of a rotating conic-gradient.
-        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: '51a75cae90630fec1d8757d483c239a534385aa7', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: '7e6639ff4f7219cbb3fa09d7c7570268534530b4' })))));
+        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: 'd637632ca0bebe53088d4ee0ba984bbb2cf0b212', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: '01830596779d6f41387cff50bbcbc9892ab71162' })))));
     }
     // The default slot's assigned content lives in the host's light DOM regardless of whether a
     // <slot> is currently rendered in the shadow tree, so this can be computed directly from the

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

@@ -104,7 +104,7 @@ export class BsRadio {
         }
     };
     render() {
-        return (h("label", { key: '84bfc39d5714d15c45936c8150b9bd7473b79574', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '0a118d5e59f4d33b0411f7be0fba08a706cda298', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), h("span", { key: '889dadd67126819c3d39a5823d48be58a9c71f9f', class: "bs-radio__hit-area" }, h("span", { key: '5bbed4d44bcf4d810693b5912a90855d680540d0', class: "bs-radio__state-layer" }, h("span", { key: '509389527b876127ca456900e3bb4aa21c735f72', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '9a7e335f9646eb72fb06fb0ca9436e763c3ad278', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '2017790d3d99355b4eb93e3659c809df58c61065', part: "label", class: "bs-radio__label" }, h("slot", { key: '199450bb26f7966cdd64b04c78e3015300d793c9' }))));
+        return (h("label", { key: 'd261741b6d1823387c7df668759910761da6afec', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '649a22151782938d8aff9229446060a54ce84e98', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), h("span", { key: '3399b1629f64b148957031eac2787dd4a673e0fe', class: "bs-radio__hit-area" }, h("span", { key: 'ed5e9f03d38d76b6e69e3800489ae50c48dfcd19', class: "bs-radio__state-layer" }, h("span", { key: 'e8384a66bf5785aef4c608dde2ff96d0208cd798', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: 'abbe35f86db25e6c4732cf056d2f359f73938024', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '6d29a3fd68fdaa511c66535893bedf5e49205d8c', part: "label", class: "bs-radio__label" }, h("slot", { key: '20d9bc9f8008cf775a520f25cef88cec5a36021a' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -229,7 +229,7 @@ export class BsSlider {
     render() {
         const isRange = this.type === 'range';
         const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
-        return (h("div", { key: 'f2db9b3d88d97f4183227dca165e4943586100b7', class: rootClasses }, this.showLabel && (h("div", { key: 'b5898da538670e481c1e0c0120f8ac67fec49ffe', class: "bs-slider__header" }, h("span", { key: '3f0257ee85b18fdce7a51825f9e3005b7c8c8985', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '74adbfd1c596cb0de4bf484cd2ffbc2f283d9074', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '334f03095f5246d4156e7853a1b9d3ddcb594f0a', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '5173a19292bd029121cf9412a2087383700ec61b', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (h("div", { key: 'c6648b04d434b95f21b9020ee7eb773c30bad01d', class: rootClasses }, this.showLabel && (h("div", { key: '441e317ad19da525a721da0529aadd959a73c3ad', class: "bs-slider__header" }, h("span", { key: '5ed50642ee23d285a472a701bca67f68a05848fc', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '2883165b7d7c649f317442a5925300c34b183e63', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '7b9d60275fb8e71371277012b4fb460b357da8c8', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '1b450b15db44433662a916dd52aaf961217e71dd', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get is() { return "bs-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -61,7 +61,7 @@ export class BsSnackbar {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: 'c84de130f993938339fd16d9f534f1da18fe6c0a', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '0941f900229f6b3208f8268d34b0cde49e4dba22', class: "bs-snackbar__content" }, h("span", { key: 'cf89eff5ea640950573f9b610d6eff46e5d0154e', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: 'd4ae7e62ecaea7b53962b08d69bae435ecf0a810', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'a99ec601f27f79f42fc61cd14c0fed742d2fa334' }))), h("div", { key: 'a139c0287e2eacb26ccbd604ff0343bca23eeb5d', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: 'f22c4a63903fdb50da087ab2c38dd076298a12ed', part: "action", variant: ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), h("bs-icon-button", { key: '4cd5c8f367ee71f11dad1f6f47ff1cdf6436a764', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'a52e6af7acf7c95a54aa6cb5237f2b53e30ea601' })))));
+        return (h("div", { key: '26d056b4b494847c48b1c60ac0c392334d27d54e', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '583ad744a0b8c274992bf2e98f5bc06f8937ed4c', class: "bs-snackbar__content" }, h("span", { key: '518b02e526a261be557587bb4d39a93964bcdf24', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: 'ad8436b86fc5232e74a5e92604adfca129b9c698', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'b6fa1efe3c4da2e03f3c45fb18f5b899411af791' }))), h("div", { key: '674f7dc064863843406f87cc5c2534e90c7d4b30', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: '56a7051b28197f34a5a11eb3f92087defd3a495a', part: "action", variant: ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), h("bs-icon-button", { key: 'cfb7f10a70ed48f0c0ecfde5212e2ce41aca17f1', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '75fd2a71af3f309a19322304e7937a39729638b9' })))));
     }
     static get is() { return "bs-snackbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,8 +51,8 @@ export class BsSourceLink {
     };
     render() {
         const inner = [
-            h("span", { key: '5c6382ad80cc971f302da1d80af089306a612e73', class: "bs-source-link__left" }, h("span", { key: '07c8591469e23fe4304846e9282cea0a9eae3ba2', class: "bs-source-link__filename-row" }, h("span", { key: 'ffdb99816134be212cc4d30ebdbf8dd8bcdc085f', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '475cd85bcb5caa1d3a82d08318731ef4bdf6cb60', name: "icon" }, h(FileTextIcon, { key: '6915810a89f15b823b2b744d30db5b2cefff8162' }))), h("p", { key: '14facc92c71f91701654ea2ce2f9f2ef4b980c5e', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'ecd7080f8bc8ce5d7e169f917aaae275ac7a474e', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'f1697d3e278225b26909ec1c40ce2c4cb51c884b', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '8efe25341dc7c68ec9c66b91f5f399c9b8ed659f', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'cddd46792f911af65434554e56d1cb72d2b88cae', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: '166b5070329771cd7e8f20689e5b257d3f6f1fd0', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'c2a820c6b36ead5f1bbfd74d84c70cb9894c8f1f' })),
+            h("span", { key: '0b24af45da9ac7753eabcfde75547e08e19c2fa5', class: "bs-source-link__left" }, h("span", { key: '305dd947e35832c5dc2cb04585b3289e0c36072e', class: "bs-source-link__filename-row" }, h("span", { key: '09658f61e3806bbd2c4c03c0367ab79ad9a3faa6', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'dcbe10c8789f9dbcd95c3d796a555a387a5626ee', name: "icon" }, h(FileTextIcon, { key: 'c56ece8394e6fce4d7a327203c109e72b883ab91' }))), h("p", { key: '293a17d2135821a549b7874338b02c8cec345632', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'ac200e11ee885d366f146d7413526661b9d76cfa', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'd076f98b5a70593e575ff764da84cfbecf5ffdef', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '50fca70a24f3c4f6c8d8b4a5f1cdb46dba4d7de3', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'ccdf4864ed01b0a517118219b55bf8cc7c442548', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: '48ef2cf4c2441fb94d48112860a0ee5982176152', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '6942e3329d26b9244d57377498ac2b46966c0c64' })),
         ];
         return this.href ? (h("a", { class: "bs-source-link", href: this.href, target: this.target, rel: "noopener noreferrer", onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "bs-source-link", onClick: this.onClick }, inner));
     }

package/dist/collection/components/bs-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: 'a9c1838c549b0c3ea9cc145624bc38e9edb32a51', role: "list" }, h("slot", { key: '549a18512ad246b5988008b8d2b6a9142e5380a5', onSlotchange: this.onSlotChange })));
+        return (h(Host, { key: 'db168a586dfd3142f6dc75627f6f13fd6bde56dd', role: "list" }, h("slot", { key: 'fe06e525cb9e790d97be4d153cc07757c3624732', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "bs-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,7 +57,7 @@ export class BsStepperStep {
     }
     render() {
         const state = this.state;
-        return (h(Host, { key: 'fe270c356f44c25a3a12450eec8e1a7657d4d88f', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '1bc833a5ca917d141078e3b69e9e455ec8d877ad', class: "bs-stepper-step__top" }, h("span", { key: 'aa91b7e91d600b08c389be456b28f4a65450d72e', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: 'e3fee594c97bf9f5d47e1b922bf9adffa1c0d438', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '4930e7653d7c81c8fcf18920fdd0a9a0e975eee4' }), state === 'error' && h(ExclamationIcon, { key: 'ca757e769dd4411c987bf5f22b7cda904d9fd067' })), h("span", { key: '2b0621849727e355d4d0944087ff1d9eacb5b5f7', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '0d08b9591ea2c9a967ebf85dce105f667cb86370', class: "bs-stepper-step__connector-line" }))), h("span", { key: '3bd0490ef190a4e4f33f822383be230e4e20e7dc', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'cf6cb4f72fcf546a954085d125a72548cfe521fe', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: 'b0ef234071983ae8c87d68440e7bfa4a491a35f5', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (h(Host, { key: '809ebc9656bc8c309b603c1940ea982d02560630', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '05484ab3c56d0c42dac1b8af99d715109679389b', class: "bs-stepper-step__top" }, h("span", { key: '2076c16d90d907a4b40de84304bd77a7b9ae1bf9', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '6fcbca00f7010e49583522a83f54f2db5ea01441', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '17589e79f8806e30aa6f6683fc6f7acd857dc8c9' }), state === 'error' && h(ExclamationIcon, { key: '29fd2fdd31b9d899153396e758bcc8c69cbddaea' })), h("span", { key: 'cbd47c375dc0f287449e2b1ea9f49bc15302389a', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '6d29361f15e62a945f7f9c8a37b05025b3173214', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'edb0ca51856917b8703ec88655bd4c8c1a1ff5df', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'abe23448bb9bc8a818551dc219aa89f05b9a6721', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: 'e469eb84389527f380c37f7e7724809528d624ae', part: "description", class: "bs-stepper-step__description" }, this.description)))));
     }
     static get is() { return "bs-stepper-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,7 +75,7 @@ export class BsSwitch {
         const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: '37466aa7ca1b18c07b92bd7855fd974d62ad5845', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: 'f4e0073dd9a322692003593385da04a9289ea848', 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: 'f8cbdb6bb25964ba79e9cb09d82beab0c3946a14', part: "track", class: trackClasses }, h("span", { key: '7e8598698e08a95d1ada9829264df99abd507d81', part: "knob", class: knobClasses })), h("span", { key: '11d464eaf95f555f3874524adc5fb2373b1fd056', part: "label", class: "bs-switch__label" }, h("slot", { key: '2409cb732d23f613c2595fa62e9fd7539bb2041e' }))));
+        return (h("label", { key: '29aaef97a7a237cddfdfffb7cdb693c8934a9d4f', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '03a1e41e0b66f823a95b76c85a19c8ca6c418763', 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: '4dc7254d5855d91221048aa2fbddcb0532c4f572', part: "track", class: trackClasses }, h("span", { key: '11dbb2724c94e6a58413d36b8d673015ad44a5e3', part: "knob", class: knobClasses })), h("span", { key: '9954a8d69131ca00bcd177d1d7cfe7ca83bc32a1', part: "label", class: "bs-switch__label" }, h("slot", { key: '98058212aed27b2d6b589eb769fddd5fe3156510' }))));
     }
     static get is() { return "bs-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,6 +48,10 @@ export class BsInlineTab {
      * violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute
      * automatically, same as `bs-tab`'s identical prop. */
     ariaLabel = null;
+    /** Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's
+     * `value`, and `bsChange` reports it. Optional -- a tab without one is identified by its
+     * zero-based position in the group (`"0"`, `"1"`...). */
+    value;
     /** Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the
      * Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays
      * a normal tab stop. */
@@ -90,7 +94,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: '72a2298b0dff31e192dc679ee153d1d87e6a8723', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: '25679b5cfc3bfec29f91b12f6180048429706b86', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: 'f5c996ae38a4e5ace60c8b1145dfb64114097600', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '101ac663fa1b05e3f4f2faaaff865e02ecbd4e90', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: 'a705183b26ad7d7ad3e286939b256cfbafb78580', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: '2b53f8013cdcd94dd7297ece3cff679d158a86a8', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: '4e4832cffe54b28cdd68f7c35c9741dfe001b4d5', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: 'ccc3225b1a9047a0a346b8fb8bf6f02a63ecc988', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '95c8ac8ba725cf9ed20887dfee0c88d0dd0ce180', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: 'f9551ac1fe994a7e66fe48d23b39f2936c6b5a37', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-inline-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -166,6 +170,25 @@ export class BsInlineTab {
                 "attribute": "aria-label",
                 "defaultValue": "null"
             },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's\n`value`, and `bsChange` reports it. Optional -- a tab without one is identified by its\nzero-based position in the group (`\"0\"`, `\"1\"`...)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
             "tabbable": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -53,6 +53,10 @@ export class BsTab {
      * violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute
      * automatically, same as `bs-button`'s identical prop. */
     ariaLabel = null;
+    /** Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's
+     * `value`, and `bsChange` reports it. Optional -- a tab without one is identified by its
+     * zero-based position in the group (`"0"`, `"1"`...). */
+    value;
     /** Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the
      * Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays
      * a normal tab stop. */
@@ -103,7 +107,7 @@ export class BsTab {
         const iconOnly = this.hasIcon && !this.hasLabel;
         const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
         const showBadge = this.hasBadge && !iconOnly && !vertical;
-        return (h("button", { key: '368a2f20536d169e06e47500dcca4d6a54f17dde', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: '3b22e92a5d6bca27c0b12b6f80ef29af06bcc564', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: 'd75cb8cc85547a8c6a8be3bca3fc82a61d3cfa38', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '43ff4feb2425f1b0dd9485f323b1886b42e10a32', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '74a0af9a35043faa3baa2415c3b4a204f5745155', onSlotchange: this.onLabelSlotchange })), h("span", { key: '22b5c4671b7a7c93abffae5a34a4e3bb600d8ed3', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '17b123826ca4b78ff00b89d3a0944e1d805ad4fe', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: 'd51f23caa9d0fd0abddd37c7394994e1ffef0586', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: '87234360dfed766afe447c3e8f037d8b59868a15', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: 'cecdf03d52896828f098956a25342209c0244f39', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: 'f4bbc1ac9ee7df0db6cb393c69b43227add0db3e', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'c14726bc5b6f47d0a96fdf5807a2dd7b2466a27f', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '88936beb454b7fa0b9d1c67d39e812f86e89ae56', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'a32984bfa7879e702748171fc51a4679b58d0b8b', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'ad516087badafb57ff4df818d0b9a100373f205e', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '30e25441bd650875ce8b6dd97befc1053c40ca47', part: "indicator", class: "bs-tab__indicator" })));
     }
     static get is() { return "bs-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -205,6 +209,25 @@ export class BsTab {
                 "attribute": "aria-label",
                 "defaultValue": "null"
             },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's\n`value`, and `bsChange` reports it. Optional -- a tab without one is identified by its\nzero-based position in the group (`\"0\"`, `\"1\"`...)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
             "tabbable": {
                 "type": "boolean",
                 "mutable": false,