@brandsync/wc 1.19.0 → 1.20.1

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

@@ -11,6 +11,10 @@ import { h } from "@stencil/core";
  * - Navigation between app sections -- use `bs-navigation-drawer`.
  * - Multi-column, sortable or paged data -- use `bs-data-table`.
  *
+ * `variant` switches between a plain list, a bulleted list and a numbered list; `dividers` gives a divided
+ * list. The list keeps real list semantics in every variant (`role="list"` with `listitem` rows); the bullet
+ * or number is drawn by the row and hidden from assistive technology, which announces position itself.
+ *
  * Built from `bs-list-item` children (light DOM; the list never moves nodes).
  *
  * @slot - The `bs-list-item` rows.
@@ -24,6 +28,8 @@ export class BsList {
     selectable = false;
     /** `value` of the selected item (selectable mode). */
     value = null;
+    /** `plain` (default), `bulleted` (a bullet before each row) or `numbered` (1., 2., 3., ...). Ignored when `selectable`. */
+    variant = 'plain';
     /** Draws a 1px separator between rows. */
     dividers = false;
     /** Accessible name of the list. */
@@ -44,7 +50,8 @@ export class BsList {
     }
     sync() {
         const items = this.items();
-        items.forEach(i => {
+        items.forEach((i, idx) => {
+            i.marker = this.selectable || this.variant === 'plain' ? null : this.variant === 'bulleted' ? '\u2022' : `${idx + 1}.`;
             i.selectionRole = this.selectable ? 'option' : 'listitem';
             if (this.selectable)
                 i.selected = this.value != null && i.value === this.value;
@@ -97,7 +104,7 @@ export class BsList {
         enabled[next].focus();
     }
     render() {
-        return (h("div", { key: '9956c0d827c6ea78a2ed0a93e823555eac9af301', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: '054ef607c962bdb4171e2b3818928f7e1765f692', onSlotchange: () => this.sync() })));
+        return (h("div", { key: 'c90bfe88e3be35377190d55c7ed25338e1baf2c2', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: '7c4ceaa24552ced7b6b09b1d1ff1e189cb144b6b', onSlotchange: () => this.sync() })));
     }
     static get is() { return "bs-list"; }
     static get encapsulation() { return "shadow"; }
@@ -153,6 +160,26 @@ export class BsList {
                 "attribute": "value",
                 "defaultValue": "null"
             },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'plain' | 'bulleted' | 'numbered'",
+                    "resolved": "\"bulleted\" | \"numbered\" | \"plain\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`plain` (default), `bulleted` (a bullet before each row) or `numbered` (1., 2., 3., ...). Ignored when `selectable`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'plain'"
+            },
             "dividers": {
                 "type": "boolean",
                 "mutable": false,
@@ -221,6 +248,9 @@ export class BsList {
             }, {
                 "propName": "selectable",
                 "methodName": "onChange"
+            }, {
+                "propName": "variant",
+                "methodName": "onChange"
             }];
     }
     static get listeners() {

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

@@ -6,11 +6,12 @@ const meta = {
     argTypes: {
         selectable: { control: 'boolean' },
         dividers: { control: 'boolean' },
+        variant: { control: 'select', options: ['plain', 'bulleted', 'numbered'] },
         value: { control: 'text' },
     },
-    args: { selectable: false, dividers: false, value: '' },
+    args: { selectable: false, dividers: false, variant: 'plain', value: '' },
     render: args => html `
-    <bs-list style="width: 360px;" aria-label="Items" ?selectable=${args.selectable} ?dividers=${args.dividers} .value=${args.value || null}>
+    <bs-list style="width: 360px;" aria-label="Items" ?selectable=${args.selectable} ?dividers=${args.dividers} variant=${args.variant} .value=${args.value || null}>
       <bs-list-item value="a" label="First" description="Paragraph" show-arrow></bs-list-item>
       <bs-list-item value="b" label="Second" description="Paragraph" support-text="Support text" show-arrow></bs-list-item>
       <bs-list-item value="c" label="Third (disabled)" description="Paragraph" disabled></bs-list-item>
@@ -41,3 +42,35 @@ export const AvatarList = {
     </bs-list>
   `,
 };
+export const Bulleted = {
+    args: { variant: 'bulleted' },
+    render: () => html `
+    <bs-list style="width: 360px;" aria-label="Requirements" variant="bulleted">
+      <bs-list-item label="A valid email address"></bs-list-item>
+      <bs-list-item label="At least 12 characters"></bs-list-item>
+      <bs-list-item label="One number or symbol"></bs-list-item>
+    </bs-list>
+  `,
+};
+export const Numbered = {
+    render: () => html `
+    <bs-list style="width: 360px;" aria-label="Steps" variant="numbered">
+      <bs-list-item label="Create an account"></bs-list-item>
+      <bs-list-item label="Verify your email"></bs-list-item>
+      <bs-list-item label="Invite your team"></bs-list-item>
+    </bs-list>
+  `,
+};
+export const DividedWithTrailingAction = {
+    name: 'Divided with trailing action',
+    render: () => html `
+    <bs-list style="width: 420px;" aria-label="Members" dividers>
+      ${['Sam Lee', 'Alex Kim'].map(n => html `<bs-list-item label=${n} description="Member">
+          <bs-avatar slot="leading" type="initials" initials=${n.split(' ').map(w => w[0]).join('')} size="lg" aria-label=${n}></bs-avatar>
+          <bs-icon-button slot="trailing" variant="subtle" aria-label=${'Remove ' + n}>
+            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M12.5 3.5L3.5 12.5M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" /></svg>
+          </bs-icon-button>
+        </bs-list-item>`)}
+    </bs-list>
+  `,
+};

package/dist/collection/components/bs-list-item/bs-list-item.css

@@ -89,6 +89,14 @@
   opacity: 0.5;
 }
 
+.bs-list-item__marker {
+  flex-shrink: 0;
+  min-width: 1.5em;
+  color: var(--bs-text-secondary);
+  font-weight: var(--bs-font-weight-semibold);
+  text-align: end;
+}
+
 .bs-list-item__leading {
   display: none;
   flex-shrink: 0;

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

@@ -24,6 +24,7 @@ import { Host, h } from "@stencil/core";
  * @slot trailing - Replaces the default caret. Rendered when `showArrow` is set or the slot has content.
  * @slot - Rich content that replaces `label`, `description` and `supportText` entirely.
  * @part container - The row.
+ * @part marker - The bullet or number drawn by a bulleted / numbered `bs-list`.
  * @part leading - Wrapper around the leading slot.
  * @part content - The text column.
  * @part label - The label line.
@@ -72,6 +73,8 @@ export class BsListItem {
     interactive = false;
     /** Set by the parent `bs-list`: `listitem` (plain list) or `option` (selectable list). Do not set by hand. */
     selectionRole = null;
+    /** Set by the parent `bs-list` for `bulleted` / `numbered` variants: the visual marker. Hidden from assistive technology. Do not set by hand. */
+    marker = null;
     hasLeading = false;
     hasTrailing = false;
     hasDefault = false;
@@ -102,7 +105,7 @@ export class BsListItem {
         const role = this.selectionRole === 'option' ? 'option' : this.selectionRole === 'listitem' ? 'listitem' : this.interactive ? 'button' : undefined;
         const standaloneFocusable = this.interactive && !this.selectionRole && !this.disabled;
         const showTrailing = this.showArrow || this.hasTrailing;
-        return (h(Host, { key: 'a4036266a279faf010db1b74aafec4e82574e921', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, h("div", { key: '5536afa9b97d2813b04ae1b81731a9a9598f326a', part: "container", class: "bs-list-item" }, interactive && !this.disabled && h("bs-ripple", { key: 'b88b81c3aa539eb54f275ec26c63049e9f3c8163', part: "ripple" }), h("div", { key: 'c297bb864a5744e51ef7053e1ee965cd5bb4184b', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, h("slot", { key: '7f67174fcaff9518c2b5b6303b0ea817f1a151c0', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), h("div", { key: 'dc21fd490e75685ca49619f4eafb76e175c4d15d', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (h("div", { key: '857cb18376ff874ae8f651f4b354a7e01c4992d0', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (h("div", { key: '0c21f5a9300f1ef3ebd633e22467f05ccc4d4bc7', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (h("div", { key: '0b5aa6198aec09d9a4a7cd3086407e71bd3daf99', part: "support-text", class: "bs-list-item__support" }, this.supportText)), h("slot", { key: 'ce13d14cb3d11f7ec93782dae33e83e802f56e5b', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), h("div", { key: '723bf038e7b070a17080c15183a8ea1b3b4abe79', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, h("slot", { key: '48057fb7c77264a761185f029a3f8a8c55f3eed4', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (h("svg", { key: 'b13854ebfc8bfe7571f91ffd0b1d15043c4edf5d', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, h("path", { key: '386a20723c7b54845ef2fff0b2292828775f3c06', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: 'b2cf244c2795882e80d9d0de8e450089f31096ec', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, h("div", { key: '9c803a23b4b7857e3486d73a082703ae980bcfc1', part: "container", class: "bs-list-item" }, interactive && !this.disabled && h("bs-ripple", { key: 'c7cf9815786dd62cd2b2048b1b698d76bd75c13d', part: "ripple" }), this.marker && (h("span", { key: '891fe2a184b721b68467872b18785e1af4246c99', part: "marker", class: "bs-list-item__marker", "aria-hidden": "true" }, this.marker)), h("div", { key: '0aaf314ca2fe62569e687ae960edfed7dc00f4c4', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, h("slot", { key: 'cef319ce4b0ca1b8a8b7d5b375c3507375354a95', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), h("div", { key: '441781f53d2b1e73ffd3a1eccf0769716e7da628', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (h("div", { key: '2348b17d9f0d5da77e4481b2c26b7b39ef9525ab', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (h("div", { key: '4b8931a5c9e36ac4c3bfa4f376bbd6e23604f0f9', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (h("div", { key: '1f63bcbce2b0b30f28f9c90a50443a6d78d15242', part: "support-text", class: "bs-list-item__support" }, this.supportText)), h("slot", { key: 'e1d67c08ad98d76619f4ad3171689cf79ebe565d', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), h("div", { key: '5e1fbe9de74e62b54a2c67debcef1228a434a6a0', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, h("slot", { key: 'c2dbc64f61a448dc13adfe7642be0fa398453427', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (h("svg", { key: '2dce987756aed8aa5eac4949473d3a30022b3792', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, h("path", { key: 'f79e5c78fb72b30b29248e4a47048312d3779a2f', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "bs-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -297,6 +300,26 @@ export class BsListItem {
                 "reflect": false,
                 "attribute": "selection-role",
                 "defaultValue": "null"
+            },
+            "marker": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the parent `bs-list` for `bulleted` / `numbered` variants: the visual marker. Hidden from assistive technology. Do not set by hand."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "marker",
+                "defaultValue": "null"
             }
         };
     }

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

@@ -162,7 +162,7 @@ export class BsMegaMenu {
         const hasFeatured = !!this.featured || !!this.el.querySelector(':scope > [slot="featured"]');
         const tracks = this.columns.length + (hasFeatured ? 1 : 0);
         const removed = this.open === false && !this.closing;
-        return (h(Host, { key: '036de0d22f6fd097b063cf3e18db04bbffac3590', "data-closed": removed ? '' : undefined }, h("bs-card", { key: '551c8aa2d4d2dcaca5d50d6fa1b694007685cde9', part: "panel", class: "bs-mega-menu", surface: "base", role: "navigation", "aria-label": this.label, onKeyDown: this.onKeyDown, inert: this.closing, ref: el => (this.panelEl = el) }, h("div", { key: '00fd782414ca6032b20fd5bb9d07c892389dd9fe', part: "columns", class: "bs-mega-menu__columns", style: { '--bs-mega-menu-tracks': String(Math.max(tracks, 1)) } }, this.columns.map(col => this.renderColumn(col)), hasFeatured && this.renderFeatured()), h("bs-divider", { key: 'f1e4ea55ae169e992cf7b48698016cc9c13382ff', decorative: true }), h("div", { key: '4a71517320983a6f01f81fdb44a893750ecc0516', part: "footer", class: "bs-mega-menu__footer" }, h("span", { key: 'b4192ab9c345ce706aaab400c0445b0ac50472f0', class: "bs-mega-menu__footer-start" }, h("slot", { key: 'ebdb724b4546c04243c7c5d65f9b2acfb001df6b', name: "footer-start" }, this.recent.length > 0 && `${this.recentLabel} ${this.recent.join(', ')}`)), h("span", { key: '78554ecd4de584ed7aedec599f6dd8556f4652cc', class: "bs-mega-menu__footer-end" }, h("slot", { key: '68bd8c2fc4a76dc78e4f0399a875bf509974d760', name: "footer-end" }, h("span", { key: '5a26bb373a4b3a0934df88c2f4b138fe153332e2', class: "bs-mega-menu__shortcut" }, this.shortcutLabel, h("bs-key-caps", { key: 'be2bc62ab7d2aaada1ab1539d341bead5d2f8897', part: "shortcut", keys: this.shortcutKeys, label: this.shortcutKeysLabel }))))))));
+        return (h(Host, { key: '4e1ca5f61433cf2bb6c19b4ba62c6b936932401e', "data-closed": removed ? '' : undefined }, h("bs-card", { key: '4858dba5bafae10221a4acbaa03b0ebe6a2bdc1a', part: "panel", class: "bs-mega-menu", surface: "base", role: "navigation", "aria-label": this.label, onKeyDown: this.onKeyDown, inert: this.closing, ref: el => (this.panelEl = el) }, h("div", { key: 'ccecfe4344c62e17e987a3d9d12ac3d2444bcbd6', part: "columns", class: "bs-mega-menu__columns", style: { '--bs-mega-menu-tracks': String(Math.max(tracks, 1)) } }, this.columns.map(col => this.renderColumn(col)), hasFeatured && this.renderFeatured()), h("bs-divider", { key: 'ce7d19d9bf5c5a8afaae6be8a28cc80ff91644a3', decorative: true }), h("div", { key: '1dfb2400b86b11b6fd2bdd0deb856d3610d13e13', part: "footer", class: "bs-mega-menu__footer" }, h("span", { key: 'ab18853838c0e412b3f5e6d7d146e61150355569', class: "bs-mega-menu__footer-start" }, h("slot", { key: '7edae96d3388a26b2c6d52a1a0e2719a816d1a47', name: "footer-start" }, this.recent.length > 0 && `${this.recentLabel} ${this.recent.join(', ')}`)), h("span", { key: 'f67686ddb8f5eac6c58ba7ab5d9386c38b306ae1', class: "bs-mega-menu__footer-end" }, h("slot", { key: 'd3ec0812f016f8fc1639013212e4f804d050a591', name: "footer-end" }, h("span", { key: '58235b6c41e41c541b79c55108fa7f0f24c40cdf', class: "bs-mega-menu__shortcut" }, this.shortcutLabel, h("bs-key-caps", { key: '1d2d4a53a33ac046af88b78b59bc83e7b925ad56', part: "shortcut", keys: this.shortcutKeys, label: this.shortcutKeysLabel }))))))));
     }
     static get is() { return "bs-mega-menu"; }
     static get encapsulation() { return "shadow"; }

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: 'b6cc3be6f6df9dab73a50bc0c398ec48e9c81c04', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'ee7a51748f40144e04f9deac9117b175e9cc2f3d' })));
+        return (h("div", { key: 'c14d9bedef9bcb0bef69c739c8f477d7390af729', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '6e26c1a053dee4b7ad91e603b82609ac1fee1abb' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -47,10 +47,10 @@ export class BsMenuBlock {
     render() {
         const common = { part: 'container', class: 'bs-menu-block' };
         const body = [
-            h("bs-icon-tile", { key: 'f16451b0269c9e2147303016a9a8eff3054804fa', part: "icon", class: "bs-menu-block__icon", size: "md" }, this.icon ? h("span", { class: "bs-menu-block__glyph", style: { '--bs-menu-block-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
-            h("span", { key: 'b0ec2c28feb0db796dd9c252da01db7297680916', class: "bs-menu-block__text" }, h("span", { key: '512bfedc88a49232164be59eba523ca673876f2e', class: "bs-menu-block__title" }, h("span", { key: 'a75951dfa734644f3fbd5abd1f97e51b9a023a36', part: "name", class: "bs-menu-block__name" }, this.name), this.badge && (h("bs-chip-informative", { key: 'b4769585e7578532a68be1cb19bd1dc0553a7d52', part: "badge", class: "bs-menu-block__badge", color: "info", size: "sm" }, this.badge))), this.description && (h("span", { key: 'bc5049f8180aff51f96bad7bfedc6e5b7704f459', part: "description", class: "bs-menu-block__description" }, this.description))),
+            h("bs-icon-tile", { key: '8190c2b054e8cde19db39aa704315673f42902e1', part: "icon", class: "bs-menu-block__icon", size: "md" }, this.icon ? h("span", { class: "bs-menu-block__glyph", style: { '--bs-menu-block-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
+            h("span", { key: '1ea5bb36e09e02be9c42496fdc4e0ff5f82fb39e', class: "bs-menu-block__text" }, h("span", { key: '4b285a1380f7fd257b03a5cee0a57d7c82670622', class: "bs-menu-block__title" }, h("span", { key: '6ad1444db9ce3fba93d841f5e0a365bdf22b33f7', part: "name", class: "bs-menu-block__name" }, this.name), this.badge && (h("bs-chip-informative", { key: '514c1eac5779e91b1a2e6d52d24f47f329141d9b', part: "badge", class: "bs-menu-block__badge", color: "info", size: "sm" }, this.badge))), this.description && (h("span", { key: 'bcb1508304f1544a8b78bee9036d6be020efd451', part: "description", class: "bs-menu-block__description" }, this.description))),
         ];
-        return (h("button", { key: 'f468826125b6743495c96049081f94ea7f372a0d', ...common, type: "button" }, body));
+        return (h("button", { key: 'd87cc4926cd17e36ee6ae1295e6c38c19052f3aa', ...common, type: "button" }, body));
     }
     static get is() { return "bs-menu-block"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,7 +48,7 @@ export class BsMenuItem {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: 'a6022e318de72f62cf5b4be5c924d472221b4cff', 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("bs-ripple", { key: '5c330b32fb6450c9015ea5549ec522bbab0a3ac0', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '16fece8c1363813f05410e120be8bdee4281ccfa', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: 'e8ceb7834a709543718dd0145d753fb186a74489', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '7ddb04608737ffeb097bebcdb5c00f825e058b9f', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'd24f52e58bfb3629ba8512e17e41844ad0b3baab' }))));
+        return (h("button", { key: 'c52e126d6150c7814a0d53cc260b3c5ab8aa3c5e', 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("bs-ripple", { key: 'f9da7fdf2cfb591562764f67a84c4c4b511bb348', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'a91da1d5500117b6d67a5c6a7398ad8b40064385', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '3fa07f929ac18f5aab4ceb26c9712f79379c5f4a', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '2e7e80d88803abc7a6cb54c1eb18df53d49f85a9', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'ad8413c282494014160497635cec1f5efaf44e12' }))));
     }
     static get is() { return "bs-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,32 +1,36 @@
 import { html } from "lit";
 import { componentDescription } from "../../stories-utils";
+// A bs-menu-item is role="menuitem", which must sit inside a role="menu" -- a bare `div` stands in for
+// bs-menu here so the item is shown on its own, without the menu's surface and padding.
 const meta = {
     title: 'Components/bs-menu-item',
     parameters: { docs: { description: { component: componentDescription('bs-menu-item') } } },
-    render: () => html ` <bs-menu-item style="width: 210px;">Read aloud</bs-menu-item> `,
+    render: () => html `<div role="menu"><bs-menu-item style="width: 210px;">Read aloud</bs-menu-item></div>`,
 };
 export default meta;
 export const Default = {};
 export const WithIcon = {
     name: 'With an icon',
     render: () => html `
-    <bs-menu-item style="width: 210px;">
-      <svg slot="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <path
-          d="M7.5 15.75H3C2.80109 15.75 2.61032 15.671 2.46967 15.5303C2.32902 15.3897 2.25 15.1989 2.25 15V9C2.25 8.80109 2.32902 8.61032 2.46967 8.46967C2.61032 8.32902 2.80109 8.25 3 8.25H7.5L14.25 3V21L7.5 15.75Z"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M7.5 8.25V15.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      Read aloud
-    </bs-menu-item>
+    <div role="menu">
+      <bs-menu-item style="width: 210px;">
+        <svg slot="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <path
+            d="M7.5 15.75H3C2.80109 15.75 2.61032 15.671 2.46967 15.5303C2.32902 15.3897 2.25 15.1989 2.25 15V9C2.25 8.80109 2.32902 8.61032 2.46967 8.46967C2.61032 8.32902 2.80109 8.25 3 8.25H7.5L14.25 3V21L7.5 15.75Z"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path d="M7.5 8.25V15.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+        Read aloud
+      </bs-menu-item>
+    </div>
   `,
 };
 export const Disabled = {
-    render: () => html ` <bs-menu-item style="width: 210px;" disabled>Read aloud</bs-menu-item> `,
+    render: () => html `<div role="menu"><bs-menu-item style="width: 210px;" disabled>Read aloud</bs-menu-item></div>`,
 };
 export const InAMenu = {
     name: 'In a bs-menu',

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

@@ -45,7 +45,7 @@ export class BsMessage {
     /** Delivery/render state. `error` uses error colours; `pending` dims the bubble and sets `aria-busy`. */
     status = 'default';
     render() {
-        return (h("div", { key: 'db1349965dab9cdb4ca7cddd47d9df6aa21227d2', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, h("div", { key: 'd1bee0f3145b3bd789ffe90b2603caefba8fcf1e', part: "avatar", class: "bs-message__avatar" }, h("slot", { key: '487a6d52013d52ac80f8906fbccf3017a1dd927d', name: "avatar" })), h("div", { key: 'c0713ad732145108ee0a40991fcc3f7955d6d263', class: "bs-message__column" }, h("bs-card", { key: 'ffa3b7c127f117c61e704e3209b031c0d1e0f385', part: "container", class: "bs-message__bubble", surface: "base" }, h("div", { key: 'f7b852caaecf770856fdb332db9e3af6540d99c2', part: "content", class: "bs-message__content" }, h("slot", { key: 'd3cacbf1031960c074b67115cdd110910eeb116b' }))), h("div", { key: '7161bd50553b2a2f4047c23501877ede4ff4facf', part: "footer", class: "bs-message__footer" }, h("slot", { key: '7109f10f94523fd2d58b6dd4de2195626b385dfb', name: "footer" })), h("div", { key: 'bf4e8e6c4817d33c69dd12362b397860d70766e9', part: "timestamp", class: "bs-message__timestamp" }, h("slot", { key: '6b70a022b77a2e20d4c0c3524d2ef00b45f1b583', name: "timestamp" }, this.timestamp && h("time", { key: '4e421395a0537ce46369fe9555cf308b052d71f1', dateTime: this.datetime }, this.timestamp))))));
+        return (h("div", { key: 'f80d1149391aef141fdcabfcc1a0c1fd0537cbf9', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, h("div", { key: 'd640f5a34fc67643da3755aaed1d0cdc8a39d628', part: "avatar", class: "bs-message__avatar" }, h("slot", { key: '961d1226493b04581259b1e445afabc82f90a7a9', name: "avatar" })), h("div", { key: '742e803b174a31f2c5db3c35315e62bc108cec02', class: "bs-message__column" }, h("bs-card", { key: '09f5449eb4d01309597301b516dc31a0fd008786', part: "container", class: "bs-message__bubble", surface: "base" }, h("div", { key: 'eda71ddcc2a3b0546919b78119bc7c70c3c3be07', part: "content", class: "bs-message__content" }, h("slot", { key: '790751ff09be551fe5b6fcbe7d1fb67522d86944' }))), h("div", { key: '30ccab14d2c8348c5ccd23298ad102ef39409847', part: "footer", class: "bs-message__footer" }, h("slot", { key: '869e264a07fdd6926e7740717bf98183f437b0ed', name: "footer" })), h("div", { key: 'c5d5da384993775c18a0edd4f2658331b12835ce', part: "timestamp", class: "bs-message__timestamp" }, h("slot", { key: 'd157e9a0467ab7dc9105c348960a3b890d5055b1', name: "timestamp" }, this.timestamp && h("time", { key: '7bef51f7106b6fe82e991a46a43cf271cafef448', dateTime: this.datetime }, this.timestamp))))));
     }
     static get is() { return "bs-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-message-list/bs-message-list.js

@@ -75,7 +75,7 @@ export class BsMessageList {
         }
     };
     render() {
-        return (h("div", { key: 'b10cb414ec777f2ee2b793788f1d7cd1c8be7c03', class: "bs-message-list" }, h("div", { key: 'cdc9d56810ccab43ecc5a4f2a8c2fa0d7f87a238', part: "viewport", class: "bs-message-list__viewport", role: "log", "aria-live": "polite", tabindex: "0", ref: el => (this.viewport = el), onScroll: this.onScroll }, h("slot", { key: '54e2d0281818c3f0a6e9b4d8d147b7769b4bfd62' })), this.showScrollButton && (h("bs-icon-button", { key: 'dbe6009a3905d63fd50e69860e1f287a625d6d25', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, h("svg", { key: '000793a84e2f256bcf59cd7e000e54a6dcb0e63d', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '6d8447826dc8ae2534156820f45fe761797bf70a', d: "M8 3v10M3.5 8.5L8 13l4.5-4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+        return (h("div", { key: '4a9aba669da325e805219d3f4d11dfbfdd235147', class: "bs-message-list" }, h("div", { key: '86a867dda211c2648a7e1a82f18b94a3924a774e', part: "viewport", class: "bs-message-list__viewport", role: "log", "aria-live": "polite", tabindex: "0", ref: el => (this.viewport = el), onScroll: this.onScroll }, h("slot", { key: '649dd0db989cea62876092ed384a704468392e0d' })), this.showScrollButton && (h("bs-icon-button", { key: 'e4066ec90ac6ea3000e10db1920eeaf028611548', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, h("svg", { key: 'c6f25699e0f1de5b543b6297c4158a05e3f04eb3', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '044b506ee58e69c3dec36eb107c5565899a036e5', d: "M8 3v10M3.5 8.5L8 13l4.5-4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
     }
     static get is() { return "bs-message-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-page-header/bs-page-header.js

@@ -109,7 +109,7 @@ export class BsPageHeader {
         const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 1));
         const showMeta = !!this.meta || this.slotted.meta;
         const hasTabs = this.slotted.tabs && !this.compact;
-        return (h("div", { key: 'bc53e187af58ecbf3d923e4a7a4c2d6753706664', part: "container", class: { 'bs-page-header': true, 'bs-page-header--compact': this.compact, 'bs-page-header--tabs': hasTabs } }, h("div", { key: '66d18bcfa396e4b65027e204ebe78db904c353f5', part: "breadcrumb", class: { 'bs-page-header__breadcrumb': true, 'bs-page-header__empty': !this.slotted.breadcrumb } }, h("slot", { key: '7160cb117c4a9734c8975ef5dfdd0562465736e7', name: "breadcrumb", onSlotchange: this.onSlotChange('breadcrumb') })), h("div", { key: '16f1c1ebf185d8900a900a262fcbbdf0b5fd9670', part: "row", class: "bs-page-header__row" }, h("div", { key: '9d97f5e3235be3c947253248c0473aa390da2892', part: "main", class: { 'bs-page-header__main': true, 'bs-page-header__main--back': this.back } }, this.back && (h("bs-icon-button", { key: 'c9a71a1eea484c739fea7aeb00b218d10db7a30b', part: "back", class: "bs-page-header__back", variant: "subtle", size: "sm", ariaLabel: this.backLabel, onClick: () => this.bsBack.emit() }, h(ArrowLeftIcon, { key: '196d12852cd144fc95411d06a06f366168733d23' }))), h("div", { key: '763d905494ae6d453a259d70bd1d80baefb7e264', part: "title", class: { 'bs-page-header__title': true, 'bs-page-header__title--controls': this.back || this.favoritable } }, h(`h${level}`, { part: 'heading', class: { 'bs-page-header__heading': true } }, this.heading), h("span", { key: '0e533d399af320f3a79659f46c493b4cf1bf2b50', part: "status", class: { 'bs-page-header__status': true, 'bs-page-header__empty': !this.slotted.status } }, h("slot", { key: '396f0352a4c9c84a362fc2266bd69ee695b0f9aa', name: "status", onSlotchange: this.onSlotChange('status') })), this.favoritable && (h("bs-icon-button", { key: '81b8992250fac52af9e9e2ae415aa759122acd94', part: "favorite", class: "bs-page-header__favorite", variant: "subtle", size: "sm", ariaLabel: this.favoriteLabel, pressed: this.favorite, onClick: this.onFavoriteClick }, this.favorite ? h(StarFillIcon, null) : h(StarIcon, null)))), h("div", { key: 'b4e5e1d5cb1d680120059455d2a69152dd0bc8d3', part: "meta", class: { 'bs-page-header__meta': true, 'bs-page-header__empty': !showMeta } }, h("slot", { key: '597180318543618a258ae56f8e9d26a2dc882243', name: "meta", onSlotchange: this.onSlotChange('meta') }, this.meta))), h("div", { key: '18296c20d248dcdf531e1ff0a9b4230c459625e8', part: "actions", class: { 'bs-page-header__actions': true, 'bs-page-header__empty': !this.slotted.actions } }, h("slot", { key: 'c4ea0d5ce7c80995be1335fe62f9b76629303722', name: "actions", onSlotchange: this.onSlotChange('actions') }))), h("div", { key: '2a942c6f3bef3d546942794368ee22b4f521a4a4', part: "tabs", class: { 'bs-page-header__tabs': true, 'bs-page-header__empty': !this.slotted.tabs } }, h("slot", { key: 'd870267922ea0ffe8f5fc7503e76c038a7a47406', name: "tabs", onSlotchange: this.onSlotChange('tabs') })), hasTabs && h("bs-divider", { key: '988231057dd030bd096948e6cdab39288784c8c3', part: "divider", class: "bs-page-header__divider", decorative: true })));
+        return (h("div", { key: '38f51471c2c9c98dc0a84b82813399f12f221aa0', part: "container", class: { 'bs-page-header': true, 'bs-page-header--compact': this.compact, 'bs-page-header--tabs': hasTabs } }, h("div", { key: '3313d74119c09977fa812a17f183da9c2981bc50', part: "breadcrumb", class: { 'bs-page-header__breadcrumb': true, 'bs-page-header__empty': !this.slotted.breadcrumb } }, h("slot", { key: '8c4668a0d782fd22c73d0b85cffc49d3139c62f2', name: "breadcrumb", onSlotchange: this.onSlotChange('breadcrumb') })), h("div", { key: '6cf0fb207aff871d1366e6ced2beb05a1ff86e57', part: "row", class: "bs-page-header__row" }, h("div", { key: 'e21c28244990e259d802192f414e3c7fa909ac7d', part: "main", class: { 'bs-page-header__main': true, 'bs-page-header__main--back': this.back } }, this.back && (h("bs-icon-button", { key: '4cb2a4347504ec675d2f678c7eb478491f7f3cef', part: "back", class: "bs-page-header__back", variant: "subtle", size: "sm", ariaLabel: this.backLabel, onClick: () => this.bsBack.emit() }, h(ArrowLeftIcon, { key: 'ff9323bc90d6697ea54556e7d03fc147738579ee' }))), h("div", { key: '1e9065ec14b16ec8f354ed54d3403098cb69e55c', part: "title", class: { 'bs-page-header__title': true, 'bs-page-header__title--controls': this.back || this.favoritable } }, h(`h${level}`, { part: 'heading', class: { 'bs-page-header__heading': true } }, this.heading), h("span", { key: 'f332178c13713ea9ae7864344795baa390e0be56', part: "status", class: { 'bs-page-header__status': true, 'bs-page-header__empty': !this.slotted.status } }, h("slot", { key: '2881dfb50b69b93c24263e0d9ea5a43787be779c', name: "status", onSlotchange: this.onSlotChange('status') })), this.favoritable && (h("bs-icon-button", { key: '341c9b1b79fb05203a0d59fa752856b2d0de96cc', part: "favorite", class: "bs-page-header__favorite", variant: "subtle", size: "sm", ariaLabel: this.favoriteLabel, pressed: this.favorite, onClick: this.onFavoriteClick }, this.favorite ? h(StarFillIcon, null) : h(StarIcon, null)))), h("div", { key: '2021b23ac34262168aa063079c2cdcf249297d44', part: "meta", class: { 'bs-page-header__meta': true, 'bs-page-header__empty': !showMeta } }, h("slot", { key: '0937a7986fb7a8338cc228b58d45dd679942e067', name: "meta", onSlotchange: this.onSlotChange('meta') }, this.meta))), h("div", { key: '284547154c9cfe20b1455b4dd51e9d336cc4fb91', part: "actions", class: { 'bs-page-header__actions': true, 'bs-page-header__empty': !this.slotted.actions } }, h("slot", { key: 'e6a7bf0ca86f9864bebe7d87ddcefd7030c8bf32', name: "actions", onSlotchange: this.onSlotChange('actions') }))), h("div", { key: '267dd69b1732befe8c06193ff1dab20288f2053a', part: "tabs", class: { 'bs-page-header__tabs': true, 'bs-page-header__empty': !this.slotted.tabs } }, h("slot", { key: '8b778bf7c356205ac65e843112415b344f5bf332', name: "tabs", onSlotchange: this.onSlotChange('tabs') })), hasTabs && h("bs-divider", { key: 'ba4351e50cbeef3088514f84a83966dabe10c4a7', part: "divider", class: "bs-page-header__divider", decorative: true })));
     }
     static get is() { return "bs-page-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -92,7 +92,7 @@ export class BsPagination {
     }
     render() {
         const pageList = this.getPageList();
-        return (h("nav", { key: '574bba698954fefe6083b1c0b46215b53cd929cc', "aria-label": this.navLabel }, h("ul", { key: 'db7a37916e2f2bb8739828936048b9b73af2c93f', part: "list", class: "bs-pagination__list" }, h("li", { key: '25fc9453e309eec5c7226fc3a2255fe20f138ebc', part: "item", class: "bs-pagination__item" }, h("button", { key: '654898cca41f9868f3780b16a01d25e39c76de06', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h("bs-ripple", { key: '544bddaee750f3d18519cf676fccf2788ae65b8f', part: "ripple", centered: true }), h(ChevronLeftIcon, { key: 'c8913363a09dada9765383ab59d309058b272b65' }))), 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": `${this.pageLabel} ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, h("bs-ripple", { part: "ripple", centered: true }), item)))), h("li", { key: '8ce36f14052801aa1ef9b2f750f6d030de1ed6b1', part: "item", class: "bs-pagination__item" }, h("button", { key: 'a944585c463d4a8035b2932e1a1c881fb5ad68ee', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h("bs-ripple", { key: '3082d79238e9242cbfc52e08be0d53160f85bfed', part: "ripple", centered: true }), h(ChevronRightIcon, { key: 'be4c48d8075ecf6e9389546e63c8e192da50ed30' }))))));
+        return (h("nav", { key: 'e0b7a524e5dee62d3938a5123d442bbed1dc7343', "aria-label": this.navLabel }, h("ul", { key: 'f4f7a7b9fade966be1cfec316f2fd7d9ac6bf07d', part: "list", class: "bs-pagination__list" }, h("li", { key: 'bc4c790a0c8044292226a51a80c1386227216f59', part: "item", class: "bs-pagination__item" }, h("button", { key: '555d5aac5bbe09201113e679dc15c605f73d9c01', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h("bs-ripple", { key: '3e0b6b85c01e65fef17d58842f8c28e3dbfa735c', part: "ripple", centered: true }), h(ChevronLeftIcon, { key: '73ac62d07eb2291ae51a40d666c6e5584d32114d' }))), 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": `${this.pageLabel} ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, h("bs-ripple", { part: "ripple", centered: true }), item)))), h("li", { key: 'a17911f50aef86dbeadeff8b78c9a7bf0ec7af38', part: "item", class: "bs-pagination__item" }, h("button", { key: '222299e7a5037a045e228fdbf37942bb00067d18', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h("bs-ripple", { key: '7c69b46ac6ee810a733b463090301e277e421f9d', part: "ripple", centered: true }), h(ChevronRightIcon, { key: '2f4a37edd28e4430b25e7b20ee37c0704667ce16' }))))));
     }
     static get is() { return "bs-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,15 +2,22 @@ import { render, h, describe, it, expect } from "@stencil/vitest";
 const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 const setup = () => render(h("bs-popover", null, h("button", { slot: "trigger" }, "Open"), h("div", null, "Content")));
 describe('bs-popover', () => {
-    it('is closed by default with aria wiring on the trigger wrapper', async () => {
+    it('is closed by default with aria wiring on the slotted trigger, not the role-less wrapper', async () => {
         const { root } = await setup();
-        const trigger = root.shadowRoot.querySelector('[part="trigger"]');
+        const wrapper = root.shadowRoot.querySelector('[part="trigger"]');
+        const trigger = root.querySelector('[slot="trigger"]');
         const popup = root.shadowRoot.querySelector('[part="popup"]');
         expect(trigger).toEqualAttribute('aria-expanded', 'false');
         expect(trigger).toEqualAttribute('aria-haspopup', 'true');
-        expect(trigger.getAttribute('aria-controls')).toBe(popup.id);
+        expect(wrapper).not.toHaveAttribute('aria-expanded');
+        expect(wrapper).not.toHaveAttribute('aria-haspopup');
         expect(popup.hasAttribute('hidden')).toBe(true);
     });
+    it('keeps an aria-haspopup the trigger already declares', async () => {
+        const { root, waitForChanges } = await render(h("bs-popover", null, h("button", { slot: "trigger", "aria-haspopup": "menu" }, "Open"), h("div", null, "Content")));
+        await waitForChanges();
+        expect(root.querySelector('[slot="trigger"]')).toEqualAttribute('aria-haspopup', 'menu');
+    });
     it('toggles on trigger click and emits bsOpenChange', async () => {
         const { root, waitForChanges, spyOnEvent } = await setup();
         const spy = spyOnEvent('bsOpenChange');
@@ -19,7 +26,7 @@ describe('bs-popover', () => {
         await waitForChanges();
         expect(root.open).toBe(true);
         expect(root).toHaveAttribute('open');
-        expect(trigger).toEqualAttribute('aria-expanded', 'true');
+        expect(root.querySelector('[slot="trigger"]')).toEqualAttribute('aria-expanded', 'true');
         expect(spy).toHaveReceivedEventDetail(true);
         trigger.click();
         await waitForChanges();

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

@@ -16,7 +16,7 @@ let popoverId = 0;
  *
  * @slot trigger - The element that toggles the popup (e.g. a `bs-button`).
  * @slot - Default slot: the popup content.
- * @part trigger - The wrapper around the trigger; carries aria-expanded/aria-haspopup/aria-controls.
+ * @part trigger - The wrapper around the trigger. `aria-haspopup`/`aria-expanded` are set on the slotted trigger element itself, not on this wrapper.
  * @part popup - The popup surface.
  * @prop --bs-popover-bg - Popup background. Aliased to `--bs-surface-raised`.
  * @prop --bs-popover-radius - Popup corner radius. Aliased to `--bs-border-radius-100`.
@@ -107,6 +107,7 @@ export class BsPopover {
         });
     }
     componentDidRender() {
+        this.syncTriggerAria();
         if (!this.open && this.closing && this.exitPending) {
             this.exitPending = false;
             this.playExit();
@@ -182,6 +183,29 @@ export class BsPopover {
         this.open = next;
         this.bsOpenChange.emit(next);
     }
+    /**
+     * Keeps `aria-haspopup`/`aria-expanded` on the slotted trigger -- the element that is actually
+     * focusable and announced -- rather than on the role-less wrapper div, where they are invalid ARIA.
+     * `bs-*` triggers (bs-button, bs-icon-button) forward these to their inner `<button>` through their
+     * JS properties; an attribute on the host would sit on a role-less element. A trigger that already
+     * declares its own `aria-haspopup` (e.g. bs-dropdown's `menu`) keeps it.
+     */
+    syncTriggerAria = () => {
+        const trigger = this.triggerSlot?.assignedElements()[0];
+        if (!trigger)
+            return;
+        if (trigger.tagName.startsWith('BS-')) {
+            const t = trigger;
+            if (!t.ariaHasPopup)
+                t.ariaHasPopup = 'true';
+            t.ariaExpanded = String(this.open);
+        }
+        else {
+            if (!trigger.hasAttribute('aria-haspopup'))
+                trigger.setAttribute('aria-haspopup', 'true');
+            trigger.setAttribute('aria-expanded', String(this.open));
+        }
+    };
     focusTrigger() {
         const first = this.triggerSlot?.assignedElements()[0];
         first?.focus();
@@ -204,7 +228,7 @@ export class BsPopover {
         }
     };
     render() {
-        return (h("div", { key: '39151f3b9bf56616c0e96cf0c5312d75331d89bb', class: "bs-popover" }, h("div", { key: 'dd05791d8e55c9abf1447761bd3c411b86bc20f4', part: "trigger", class: "bs-popover__trigger", "aria-haspopup": "true", "aria-expanded": String(this.open), "aria-controls": this.popupId, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("slot", { key: '5aaf9d25f29381bc005e2424a43e806d01a74ec4', name: "trigger", ref: el => (this.triggerSlot = el) })), h("div", { key: 'bc734ecdcb751ff09bb5ccdc5829035d8fd56f72', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open && !this.closing, ref: el => (this.popupEl = el) }, h("slot", { key: 'b10ce9654f2c0f899fded5b13bf0d66f841d3f2e' }))));
+        return (h("div", { key: 'd69fccefc43e1fbf8a2e97dce079634b2113f988', class: "bs-popover" }, h("div", { key: 'b42473957daa2f3db84c59f6da2e391b8387df23', part: "trigger", class: "bs-popover__trigger", onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("slot", { key: '899294fecb6b2912c3c4f8865893e62ba74cc4fb', name: "trigger", ref: el => (this.triggerSlot = el), onSlotchange: this.syncTriggerAria })), h("div", { key: 'e1e6209b661a16954b9b61586624dea57efa2c08', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open && !this.closing, ref: el => (this.popupEl = el) }, h("slot", { key: '22e665b595f9dd2938919da88de45e0016f4a0e2' }))));
     }
     static get is() { return "bs-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -89,7 +89,7 @@ export class BsPresence {
     }
     render() {
         const preset = PRESETS.includes(this.preset) ? this.preset : 'fade';
-        return (h(Host, { key: '2defd735d80a2efdccffd600c23f1db31ef5914d', inert: this.active ? undefined : true, "aria-hidden": this.active ? null : 'true' }, h("div", { key: 'bebdec566c415bcb0baa196c3f74b04adc80dfb4', part: "content", class: `bs-presence bs-presence--${preset}${this.active ? '' : ' bs-presence--closed'}`, ref: el => (this.shell = el) }, h("div", { key: 'fac80d18429fe4aa2b00533ede5b7ae228cf142e', class: "bs-presence__clip", ref: el => (this.clip = el) }, h("slot", { key: '86fc247c13f2c64c365f8c8f9d959af6befaa89a' })))));
+        return (h(Host, { key: '9d25523c831b2851a7fb0f2c012361ddb6726e73', inert: this.active ? undefined : true, "aria-hidden": this.active ? null : 'true' }, h("div", { key: '14726f5a42d6821866737b46f23cd4b103ca5649', part: "content", class: `bs-presence bs-presence--${preset}${this.active ? '' : ' bs-presence--closed'}`, ref: el => (this.shell = el) }, h("div", { key: '35619f949a9e75db1c25ebca2c05d9e629d2ba51', class: "bs-presence__clip", ref: el => (this.clip = el) }, h("slot", { key: '65da3ddd001ae35ae919550b10c1118285bbaffa' })))));
     }
     static get is() { return "bs-presence"; }
     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: 'b91ecdb26db2711f65f9b35169d30f8c21c85ef0', part: "container", class: "bs-progress" }, h("div", { key: 'cafa73aaacde863f5a82185fe75454b0004d68f3', 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: '187ceff8a1b9d4f0adedaea62de6ac2aeb416d84', part: "container", class: "bs-progress" }, h("div", { key: '89b1434e55d1e431a298a8744a3b3bc2f305f68c', 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: '3d9d1fb48f12171fe4e7bfae6ee86b5d97bc094c', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+            } }))), isDeterminate && this.showLabel && (h("span", { key: 'be64ef0cb99048d327e42799915544cd5eff1205', 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.css

@@ -47,6 +47,9 @@
   border-radius: var(--bs-progress-linear-radius);
   background: var(--bs-progress-linear-track);
   overflow: hidden;
+  /* Lets the indeterminate keyframes translate by the track's width (100cqw); a % translate would
+     be relative to the comet's own, much narrower, width. */
+  container-type: inline-size;
 }
 
 .bs-progress-linear__track--small {
@@ -87,7 +90,7 @@
     transform: translateX(-100%);
   }
   to {
-    transform: translateX(250%);
+    transform: translateX(100cqw);
   }
 }
 

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: 'b8413e4b2007893cf2a30243eaa6018c0e7321c8', part: "container", class: "bs-progress-linear" }, h("div", { key: 'a169168b32f47f5d62a14c54a3d1fde9e2beb219', 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: '3573f6a22f8fd305b00e6e6a6cbd956225c84d23', part: "container", class: "bs-progress-linear" }, h("div", { key: 'a5ea4ab901d1d944b279846855b12995f6cb7bed', 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: 'dbde538356381fb557ec01cab90b6d8ba67a479b', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: 'e9f6bced860f1147a88171fade7e3e0a6947c17e' })))));
+        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: '5108afa0263e9532864557f284a78e101825e32f', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: 'f11208b6b20dd14946b9c8a115677749d0d4c524' })))));
     }
     // 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-qr-code/bs-qr-code.js

@@ -168,7 +168,7 @@ export class BsQrCode {
         const buttonSize = this.size === 'sm' ? 'sm' : 'md';
         // Figma shows the unavailable actions as filled-disabled (grey) rather than a faded outline,
         // which is what bs-button's disabled primary looks like.
-        return (h("bs-card", { key: '4e167a1963bdcf3cfab55d45512b9a6892967863', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: '6515eda31ed66c48f751a030aac2a1e8787168bb', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '3fcb2f17e996eec1f0d7b63ce801a0c2afaa34f5', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: '2918e13d5155c393d5bcd38770f4288c4a580249', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: '9e78a07d15f1c796d5d3a95250048f792dffed66', class: "bs-qr-code__body" }, h("div", { key: 'f11274026541602224216fd1c9125ee6747fa863', part: "head", class: "bs-qr-code__head" }, h("p", { key: '2bad1953d7f5c67c92e3759999d4aa4010b016c5', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: 'abb48d14fbf8b307d4f370601cd2eb5ffc4df421', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: '17af9e23f1a66d89367d9c26bb8ea551c069b2c0', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: '2092115e613237a13c31243d7370f20bd3fc4c09', part: "code", class: "bs-qr-code__code" }, h("slot", { key: 'c189b0b1edf6f61489e9d1ebe8275c2685862e77', name: "code" }, this.renderMatrix()), h("div", { key: '1e082f0d8b7ee552ab35f2da7ec13c0a9c5d7d86', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: '5c305729c9771f95d3bf1877efe86de9f63054e7', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: 'd896562fc83349ada191a1956dfe8b3ffe02dfda', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: '8523dd83e68c5f7af690afa71152d82a8f33280d', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: 'b558183ed05e918b49f17901c5f4a90455527c07', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: 'b2e14982c041255d561c733465ec946191f71308', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: '73443e59dd874d9888b4635d25f8abfb66e2ba15', part: "expiry", size: "md" }, h(TimerIcon, { key: 'e2c8e896629106af6b6e43f5927cc40cb986c895', slot: "icon" }), this.expiry)), showActions && (h("div", { key: 'c0e4e621b7535020de664c18b156a40ebd0f9cc5', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: '7d20bfd9ef09f9f739f7c2482d4f6a460dc4380d', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: '27ea6048df80bc0882178f428ab8484d9c2d3e0c', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: '814e7b49e0b2b3d1c55042910495cb33da115210', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: '82af9fe245268df404461f9f750c61b0b4ade027', slot: "icon" }), this.copyLabel)))))));
+        return (h("bs-card", { key: '9dcc08a36b53be095268fa035cd353e9b7c41c99', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: 'a21cc673270c2c62b45d940f64c0bb699015aea6', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '041c7fa3a28984132b902790be6eb39a705d3264', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: '98674de35512104169431e97649bc3c96503e0f8', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: '7a23d1ca31ca4783e1dbd38b104d9b03b9005a22', class: "bs-qr-code__body" }, h("div", { key: '6dd6d0b87236d6014a0139cde0eb4f1c49f58b6f', part: "head", class: "bs-qr-code__head" }, h("p", { key: 'daceb6bc02f5222d57d2927646eaf070b7bd2eb8', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: '093646862310a7c1e1e69d50ce2fbb3e4a314b4c', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: '1f72b15e61abefa109b2df0fbce25ca2361dc7ad', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: '734ed44250b1c83b06cebadb1a79c4fdab8bd08a', part: "code", class: "bs-qr-code__code" }, h("slot", { key: 'c2387e32896dcff0b40cf6120c9a87288d473e2d', name: "code" }, this.renderMatrix()), h("div", { key: '2201211627ac42a11c353d436133cc130d69fafd', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: 'f9951a31812036669bf4a478964b3ebfab6d1de6', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: '13f499cb0d56c35f86dfd068e576d61ea2e7780f', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: 'ac7fa6ac5d9367812f679c8d43a5abdb65b07bbb', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: '93d93733c7fa87f8def870f000b713347b0c991c', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: '6ba70952dc39ec3feb3e1e93bcdbddad1ae0502d', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: '9a010954e75bee6c336aa252497309774d99b186', part: "expiry", size: "md" }, h(TimerIcon, { key: 'b8e4be04e71c93ce27c0ce62e33414d83a710d45', slot: "icon" }), this.expiry)), showActions && (h("div", { key: '6f3c1a0894ddf3dad11981fae385fd5f8e8c1c22', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: '6fcc1e9e93b22ce2a71195e471fc0283eba308ae', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: 'c8f881995f35bba01785f8c170625857c24c1a62', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: 'd0277646f40e5703dafa7d526d873c1f68506396', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: 'e4e0c6bd298beba16a1f60c11a0cbecff494a972', slot: "icon" }), this.copyLabel)))))));
     }
     static get is() { return "bs-qr-code"; }
     static get encapsulation() { return "shadow"; }