@brandsync/wc 1.20.0 → 1.20.1

package/dist/cjs/bs-popover.cjs.entry.js

@@ -86,6 +86,7 @@ const BsPopover = class {
         });
     }
     componentDidRender() {
+        this.syncTriggerAria();
         if (!this.open && this.closing && this.exitPending) {
             this.exitPending = false;
             this.playExit();
@@ -161,6 +162,29 @@ const BsPopover = class {
         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();
@@ -183,7 +207,7 @@ const BsPopover = class {
         }
     };
     render() {
-        return (index.h("div", { key: '60037b8ebeead636ca7cfb1d1fb5656662053854', class: "bs-popover" }, index.h("div", { key: '216a52057acbae40f00d5c7e09ad7141fe356a3b', part: "trigger", class: "bs-popover__trigger", "aria-haspopup": "true", "aria-expanded": String(this.open), "aria-controls": this.popupId, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, index.h("slot", { key: '08bd0b15dbf67de5fbfa5323570886f2ea7a5468', name: "trigger", ref: el => (this.triggerSlot = el) })), index.h("div", { key: '5e409b359b7afcf4da286cfb66a264897698018d', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open && !this.closing, ref: el => (this.popupEl = el) }, index.h("slot", { key: '35a194b6369502fa0da50795aff5ee418376d009' }))));
+        return (index.h("div", { key: 'd69fccefc43e1fbf8a2e97dce079634b2113f988', class: "bs-popover" }, index.h("div", { key: 'b42473957daa2f3db84c59f6da2e391b8387df23', part: "trigger", class: "bs-popover__trigger", onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, index.h("slot", { key: '899294fecb6b2912c3c4f8865893e62ba74cc4fb', name: "trigger", ref: el => (this.triggerSlot = el), onSlotchange: this.syncTriggerAria })), index.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) }, index.h("slot", { key: '22e665b595f9dd2938919da88de45e0016f4a0e2' }))));
     }
     static get watchers() { return {
         "open": [{

package/dist/cjs/bs-search-item.cjs.entry.js

@@ -39,7 +39,7 @@ const BsSearchItem = class {
     slotFilled = (set) => (ev) => set(ev.target.assignedNodes().length > 0);
     render() {
         const role = this.selectionRole ?? undefined;
-        return (index.h("div", { key: '4e02263a2d377be0989f3469555f19f9b4933840', part: "container", class: "bs-search-item", role: role, "aria-selected": role ? String(this.active) : undefined, "aria-disabled": role && this.disabled ? 'true' : undefined }, !this.disabled && index.h("bs-ripple", { key: '00523f734a7d994cf448df045a73d4588da1c00c', part: "ripple" }), index.h("span", { key: '2d030afeec12e555c72d1659f0ac7d2ecb4df70a', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, index.h("slot", { key: 'ab14918cfcb5425b33c1489232ea18bf940dc49d', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), index.h("span", { key: 'eee1f17e15fa4195f3a65fa7bc7f3ad12d839b7c', part: "content", class: "bs-search-item__content" }, index.h("span", { key: '75cd5ada24d085dce96331782c4e71317d0d8ed4', part: "label", class: "bs-search-item__label" }, index.h("slot", { key: '47fbf5d269d2a23eb824ba32084886efdad2aa96' })), index.h("span", { key: 'b2e4154147a02059d08505bc9f452931bbcff2bf', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, index.h("slot", { key: '8b72f89b59fa15c21c0d02b3db88b3e291d72f81', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), index.h("span", { key: 'e0b5675b2d71fe5e740fd90ff2aea5eecca2f9eb', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, index.h("slot", { key: 'c0dc999d7b4da6b670690b72071f5b844b86b35b', name: "trailing", onSlotchange: this.slotFilled(v => (this.hasTrailingSlot = v)) }, this.trailing))));
+        return (index.h("div", { key: 'd06ef043c3fa15df8d3adf3ff62b105dcef5dc1d', part: "container", class: "bs-search-item", role: role, "aria-selected": role ? String(this.active) : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, !this.disabled && index.h("bs-ripple", { key: 'a9dbae40775340f256d9ac2dd54c43f7144dda41', part: "ripple" }), index.h("span", { key: '2b80eb34ad0901c6e179770807cca6cd306acd25', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, index.h("slot", { key: '7fc3bef2ba29179b425b2f470c61b6c70dae01a2', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), index.h("span", { key: '67481270ed566846d87cf12325db53d44f2230d1', part: "content", class: "bs-search-item__content" }, index.h("span", { key: 'e5993e5796e55fcf03def1d33787fe43a8b652f6', part: "label", class: "bs-search-item__label" }, index.h("slot", { key: '8aab4906967341b2938a5ec5ecab5794139a4acf' })), index.h("span", { key: '8a9453d5303e6b89c3abef8864e536726cea9906', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, index.h("slot", { key: '7f2ef31966d836fbef03d5e4610263081cab87b5', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), index.h("span", { key: 'fcac22f41850199ef148124f9ddbdb3b687418a9', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, index.h("slot", { key: '19167fcf2502d2a16f36f3620f3257a3cd5f5cf3', name: "trailing", onSlotchange: this.slotFilled(v => (this.hasTrailingSlot = v)) }, this.trailing))));
     }
 };
 BsSearchItem.style = bsSearchItemCss();

package/dist/cjs/bs-shortcut-row.cjs.entry.js

@@ -19,7 +19,7 @@ const BsShortcutRow = class {
     /** Set by the parent list (`"listitem"`). Standalone rows have no role. */
     selectionRole = null;
     render() {
-        return (index.h("div", { key: 'e7f79909833204fb269402972500a9d97401665d', part: "container", class: "bs-shortcut-row", role: this.selectionRole ?? undefined }, index.h("span", { key: '68dae2196bda22cd09bbc0b07958f8f2be66e332', part: "action", class: "bs-shortcut-row__action" }, index.h("slot", { key: '892a107840f1861f3c4ef5ae03e781839dead497' }, this.action)), index.h("span", { key: '06637079e74f4c944984133ab5cd897b40d64fd1', part: "keys", class: "bs-shortcut-row__keys" }, index.h("slot", { key: 'a21d5b51332d383a8d3670a0531e536f240c8e09', name: "keys" }, index.h("bs-key-caps", { key: '231389f5cf6d712a14b68a84bd9c02ce65be0ff7', keys: this.keys, label: this.label, disabled: this.disabled })))));
+        return (index.h("div", { key: '01234047de01effc5d7ae411a6180d02e663d9af', part: "container", class: "bs-shortcut-row", role: this.selectionRole ?? undefined, "aria-disabled": this.disabled ? 'true' : undefined }, index.h("span", { key: 'd8c80f480f4f463f5c0ee46719e4b051e1f54816', part: "action", class: "bs-shortcut-row__action" }, index.h("slot", { key: '8c5da35b9c05f1544892808b75b4b24701554dc7' }, this.action)), index.h("span", { key: '3588f962523eabfdbebc2de3d8cdd3cface4ca07', part: "keys", class: "bs-shortcut-row__keys" }, index.h("slot", { key: '3315142746d44c8c27ce6952a5cffad1f51473d8', name: "keys" }, index.h("bs-key-caps", { key: '70a4155ce7ed5b0e585ab45e9f2a8b1c69880e4e', keys: this.keys, label: this.label, disabled: this.disabled })))));
     }
 };
 BsShortcutRow.style = bsShortcutRowCss();

package/dist/cjs/bs-slider.cjs.entry.js

@@ -223,7 +223,7 @@ const BsSlider = class {
     render() {
         const isRange = this.type === 'range';
         const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
-        return (index.h("div", { key: '242e99440bf989ab9e8370772a415ef98ea4df97', class: rootClasses }, this.showLabel && (index.h("div", { key: '23063ed9dd2dfefc2df1ae8794fdb6d54195ee39', class: "bs-slider__header" }, index.h("span", { key: '15debc72803ed291564d1573179e9e30fd4a40f6', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (index.h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? this.startValueLabel), index.h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : this.endValueLabel))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), index.h("div", { key: 'b975a8200846dbd43622473d3e62255c805e0359', class: "bs-slider__row" }, this.showLabel && (index.h("span", { key: 'c82b225aa14924963005a578fdaf0ab1accf8c2b', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (index.h("span", { key: '5e85c40cb85d2b71591020249cac4d5ae0c300a4', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (index.h("div", { key: 'edb31a417eff920fb2fbff7cd26620629038449b', class: rootClasses, "aria-disabled": this.disabled ? 'true' : undefined }, this.showLabel && (index.h("div", { key: '8732ee01cd1441c0a715b45257ac560b062fc384', class: "bs-slider__header" }, index.h("span", { key: '25440a9c9bee46d3c82c1eda056e24b7e92e8302', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (index.h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? this.startValueLabel), index.h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : this.endValueLabel))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), index.h("div", { key: '9fcd6e0729266f1c38719347f6b48590788fb8c5', class: "bs-slider__row" }, this.showLabel && (index.h("span", { key: 'c55a68e9244d1ab2102d6c90d31b35df49f6119c', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (index.h("span", { key: '1140fda48f69433161dc2fd1e65f18d1f09f2ed9', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

package/dist/cjs/bs-stepper-step.cjs.entry.js

@@ -34,7 +34,7 @@ const BsStepperStep = class {
     }
     render() {
         const state = this.state;
-        return (index.h(index.Host, { key: '85fbebb638a7e323d2e524b74c1077c261c00066', role: "listitem", class: `bs-stepper-step--${this.direction}` }, index.h("div", { key: 'a44a6b58bf74b27cee279c761ed596373882791a', class: "bs-stepper-step__top" }, index.h("span", { key: 'ae7045a3049b42d245292960fa8eb3f7dfe61864', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && index.h("span", { key: '1ff646a4f8fbb2f81b2208086d280c183ddba61c', class: "bs-stepper-step__icon-dot" }), state === 'done' && index.h(CheckIcon, { key: '9fbe0328c61ac5108b22be369c1db1652523eb00' }), state === 'error' && index.h(ExclamationIcon, { key: 'ea56eb9dc52b9d1b9070ef273d46fece166c362d' })), index.h("span", { key: '0c4b5fde931c626e2b3652e7f047c1ac21b51f02', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, index.h("span", { key: '06a69e6f61bb744be078feee462fe293947326fa', class: "bs-stepper-step__connector-line" }))), index.h("span", { key: '982de1069e1eb3e409ac81600f4fc3c7512fe190', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, index.h("span", { key: 'f946599b4130219b91e76aec9ab6442bf08bd901', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (index.h("span", { key: '043581dd2db1ffc8fae23ebc32a5346ba5bf325e', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (index.h(index.Host, { key: 'a413a500376629d039afab3168b83cae5c636dc1', role: "listitem", class: `bs-stepper-step--${this.direction}`, "aria-disabled": state === 'disabled' ? 'true' : undefined }, index.h("div", { key: '7978cd670eeafe2dee95a2e3d97625ff22cd006d', class: "bs-stepper-step__top" }, index.h("span", { key: '0d0e5ef0199013cd0ed59b26fe169c2bac727920', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && index.h("span", { key: '6c9ab59838f63958a54b852c4a8f3babf1ddc48e', class: "bs-stepper-step__icon-dot" }), state === 'done' && index.h(CheckIcon, { key: '284d95f3e0ae3033ab2baa079c00cb2dc1fbcd3f' }), state === 'error' && index.h(ExclamationIcon, { key: '45b894a13cf54b0d5cb027d89646c712584bf6bb' })), index.h("span", { key: '79621665f9aecb82c4135ac2e1139ce1ee9af6be', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, index.h("span", { key: '91454b553634d90734dbd2b8bb9ab53d9bead49c', class: "bs-stepper-step__connector-line" }))), index.h("span", { key: 'd5f1606511df9745571d96cad36d38774fd943b4', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, index.h("span", { key: '81df6e0b9607c22cfdad7e37095d245ec428e0f1', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (index.h("span", { key: '77c4951d570219071e8acedc361a73eed6a89612', part: "description", class: "bs-stepper-step__description" }, this.description)))));
     }
 };
 const CheckIcon = () => (index.h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M2.5 9L6 12.5L14 4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

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

@@ -113,7 +113,7 @@ export class BsAccordion {
         // `<div role="button">`: it gets click, keyboard activation (Enter/Space), focus-visible
         // styling, and `disabled` semantics (not focusable, no events) for free, and flexbox handles
         // laying out its children as easily as a <div>'s -- no layout reason to hand-roll any of that.
-        return (h("div", { key: 'b7645b3be5116d906a2aa6e4e680859a9c19323f', part: "container", class: `bs-accordion bs-accordion--${this.size} ${this.disabled ? 'bs-accordion--disabled' : ''}` }, h("button", { key: 'a1c824c54a529b2214dbb47cb93adea5cdadee84', type: "button", part: "header", class: `bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon ? '' : 'bs-accordion__header--no-icon'}`, disabled: this.disabled, "aria-expanded": String(this.expanded), onClick: this.onActivate }, this.showIcon && (h("span", { key: '5d35f4e2c05704a6bef532919301e765f8195aa7', part: "icon", class: `bs-accordion__icon bs-accordion__icon--${this.size}`, "aria-hidden": "true" }, h("slot", { key: '137280692f375379ef43be918094192d6030e2ad', name: "icon" }, h(PlusIcon, { key: '8826de2813774382dcf21e856288ff936eb12425' })))), h("span", { key: '57f370d082a86b7488bf309a114b82077d1f6711', part: "label", class: `bs-accordion__label ${this.showIcon ? '' : 'bs-accordion__label--no-icon'}` }, h("slot", { key: '5563063582ee2e1fb79d02acdc3d0feb5ac07eec', name: "label" })), h("span", { key: '8d8afd4433823aa8122b2ed167fd5ed3c32dc21a', part: "caret", class: `bs-accordion__caret bs-accordion__caret--${this.size} ${this.expanded ? 'bs-accordion__caret--open' : ''}`, "aria-hidden": "true" }, h(CaretDownIcon, { key: '51dfcbdfa5ccff5c3e6a6c2f983fc4d7fb460c18' }))), (this.expanded || this.showPreview || this.closing) && (h("div", { key: '8d62decaf3dc7a98f91eaea1723fc26a8fc520a4', ref: el => (this.contentEl = el), part: "content", class: `bs-accordion__content ${this.showIcon ? '' : 'bs-accordion__content--no-icon'} ${this.expanded ? 'bs-accordion__content--expanded' : 'bs-accordion__content--collapsed'}` }, h("slot", { key: '56493eb5b425134b38ac60f481219a823379626e' })))));
+        return (h("div", { key: '5b7922ce5d634a43d1ca3020b02e61b2749646f1', part: "container", class: `bs-accordion bs-accordion--${this.size} ${this.disabled ? 'bs-accordion--disabled' : ''}`, "aria-disabled": this.disabled ? 'true' : undefined }, h("button", { key: '36a5a7504c9d4301db2268652037a28cee8cc395', type: "button", part: "header", class: `bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon ? '' : 'bs-accordion__header--no-icon'}`, disabled: this.disabled, "aria-expanded": String(this.expanded), onClick: this.onActivate }, this.showIcon && (h("span", { key: '2933f14e71ec7902e310761481c7408aa5afdb07', part: "icon", class: `bs-accordion__icon bs-accordion__icon--${this.size}`, "aria-hidden": "true" }, h("slot", { key: 'd156fc7944f2177764a5622c6753c45190176549', name: "icon" }, h(PlusIcon, { key: 'c570019c3b65661d9237c9d182ab5b0aa6fcc808' })))), h("span", { key: 'dafef9038d6d29fa3193515d605244d371efc2bb', part: "label", class: `bs-accordion__label ${this.showIcon ? '' : 'bs-accordion__label--no-icon'}` }, h("slot", { key: 'c752f678a8032bd3cb01b1d9d43eb9d863707a67', name: "label" })), h("span", { key: '20fd3835f885ad26ebfea64c02bd16dfd0c3fea1', part: "caret", class: `bs-accordion__caret bs-accordion__caret--${this.size} ${this.expanded ? 'bs-accordion__caret--open' : ''}`, "aria-hidden": "true" }, h(CaretDownIcon, { key: 'af7922ee4c4280e17dddd51f6681415c70389ef6' }))), (this.expanded || this.showPreview || this.closing) && (h("div", { key: 'ac8fb07634032e1035e88c0f713841d9276df2f8', ref: el => (this.contentEl = el), part: "content", class: `bs-accordion__content ${this.showIcon ? '' : 'bs-accordion__content--no-icon'} ${this.expanded ? 'bs-accordion__content--expanded' : 'bs-accordion__content--collapsed'}` }, h("slot", { key: '6263559f2a03fd514cdc98538e1c9faee0767313' })))));
     }
     static get is() { return "bs-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,7 +28,7 @@ import { h } from "@stencil/core";
  * - A strict sequence of steps -- use `bs-stepper`.
  * - Paging through a large, addressable result set -- use `bs-pagination`.
  *
- * @slot - Default slot: the slides. Each direct child is one slide.
+ * @slot - Default slot: the slides. Each direct child is one slide and gets `role="group"`, so wrap an image in an element (don't slot a bare `<img>`).
  * @part carousel - The outer region (`role="region"`, `aria-roledescription="carousel"`).
  * @part slides - The row holding the visible slides.
  * @part tracker - The row holding the tracker and the Pause/Play button.
@@ -257,7 +257,7 @@ export class BsCarousel {
         // While auto-advance is actually running, slide changes must not be announced (it would
         // interrupt the user constantly); otherwise announce them politely.
         const rotating = this.autoplay && !this.paused && !this.interacting;
-        return (h("section", { key: 'fe38898b10611d2bb20c3428cbc4009449186453', part: "carousel", class: "bs-carousel", role: "region", "aria-roledescription": "carousel", "aria-label": this.label, style: { '--bs-carousel-slides-per-view': String(this.perView) } }, h("div", { key: 'd1d01494417dc282a52931307406970b8a1b7011', part: "slides", class: "bs-carousel__slides", "aria-live": rotating ? 'off' : 'polite' }, h("slot", { key: '955bb5229671a23babeea85b7f23b5ec3b330ebe', onSlotchange: this.onSlotChange })), showTracker && (h("div", { key: '7c4c3e73bc8dbf05e351cb0628e26e138d0a4028', part: "tracker", class: "bs-carousel__tracker" }, this.tracker === 'numbers' ? (h("bs-pagination", { part: "pagination", totalPages: this.pageCount, currentPage: this.page, onBsPageChange: (ev) => {
+        return (h("section", { key: 'cc9bb48b594809276ba1d7a37bdab86e6406ce4b', part: "carousel", class: "bs-carousel", role: "region", "aria-roledescription": "carousel", "aria-label": this.label, style: { '--bs-carousel-slides-per-view': String(this.perView) } }, h("div", { key: 'd6505ef1cf25ba7ad7f43e733c72324e54138882', part: "slides", class: "bs-carousel__slides", "aria-live": rotating ? 'off' : 'polite' }, h("slot", { key: 'd619f41a54d346f05e56dae300fc8e6f8e0d9161', onSlotchange: this.onSlotChange })), showTracker && (h("div", { key: '4cc21ab05421bdba11a2588a6628041f8ef57e64', part: "tracker", class: "bs-carousel__tracker" }, this.tracker === 'numbers' ? (h("bs-pagination", { part: "pagination", totalPages: this.pageCount, currentPage: this.page, onBsPageChange: (ev) => {
                 ev.stopPropagation();
                 this.goTo(ev.detail);
             } })) : (h("div", { class: "bs-carousel__nav" }, this.renderDotsTracker())), this.renderPause()))));

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

@@ -19,12 +19,16 @@ const PHOTO_IDS = [
     'photo-1512917774080-9991f1c4c750',
     'photo-1660496247667-3fb697c396af',
 ];
+// Each slide is a wrapper <div>, not a bare <img>: the carousel gives every slide role="group" and an
+// "n of N" label, which is invalid on an <img> (and would replace its alt text).
 const slot = (n) => html `
-  <img
-    src="https://images.unsplash.com/${PHOTO_IDS[(n - 1) % PHOTO_IDS.length]}?fm=jpg&q=80&w=640&h=360&fit=crop&auto=format"
-    alt="Landscape photograph ${n}"
-    style="display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--bs-border-radius-100);"
-  />
+  <div>
+    <img
+      src="https://images.unsplash.com/${PHOTO_IDS[(n - 1) % PHOTO_IDS.length]}?fm=jpg&q=80&w=640&h=360&fit=crop&auto=format"
+      alt="Landscape photograph ${n}"
+      style="display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--bs-border-radius-100);"
+    />
+  </div>
 `;
 const meta = {
     title: 'Components/bs-carousel',

package/dist/collection/components/bs-chip/bs-chip-informative/bs-chip-informative.js

@@ -44,7 +44,7 @@ export class BsChipInformative {
     };
     render() {
         const paddingVariant = this.hasIcon ? 'icon' : 'text';
-        return (h(Host, { key: '300d18219fd28709d023bf5d8884ecd7365eb259', class: `bs-chip-informative bs-chip-informative--${this.color} bs-chip-informative--${this.size} bs-chip-informative--${paddingVariant}` }, h("span", { key: '9e75b6aa312abd6433dd83af37f27587cee98590', part: "icon", class: `bs-chip-informative__icon ${this.hasIcon ? 'bs-chip-informative__icon--visible' : ''}` }, h("slot", { key: 'cc55742c7d920b535efb6c3e2f721a88172dbe68', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '198316a11fa1fd0a2eeca15d138f92bb00a5de6b', part: "label", class: "bs-chip-informative__label" }, h("slot", { key: '346399cea299338a6110e34fe9a7130e99aa6c09' }))));
+        return (h(Host, { key: '859a7b1d4d42f8dcb3954b66d013c588453a2dfd', class: `bs-chip-informative bs-chip-informative--${this.color} bs-chip-informative--${this.size} bs-chip-informative--${paddingVariant}`, "aria-disabled": this.disabled ? 'true' : undefined }, h("span", { key: 'f9d97bc62eea33379adb890e004ecd0a2a8c5c3d', part: "icon", class: `bs-chip-informative__icon ${this.hasIcon ? 'bs-chip-informative__icon--visible' : ''}` }, h("slot", { key: '4e41027828c2514bfdc68a1e13b4bb0ca0278653', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '9519ca92daaadce0572e0dccb6607390d7e019c8', part: "label", class: "bs-chip-informative__label" }, h("slot", { key: '1231db6420ffbfbb63cbba714ca51d571f5bd981' }))));
     }
     static get is() { return "bs-chip-informative"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-company-switcher/bs-company-switcher.cmp.test.js

@@ -85,6 +85,17 @@ describe('bs-company-switcher', () => {
         expect(q(el, '[part="list"]')).toBeNull();
         expect(q(el, '[part="footer"]')).not.toBeNull();
     });
+    it('reports the search combobox as expanded only while there is a listbox to control', async () => {
+        const { el, type } = await make({ open: true });
+        const search = q(el, '[part="search"]');
+        expect(search.getAttribute('aria-expanded')).toBe('true');
+        expect(search.getAttribute('aria-controls')).toBe(q(el, '[part="list"]').id);
+        await type('zzz');
+        expect(search.getAttribute('aria-expanded')).toBe('false');
+        expect(search.hasAttribute('aria-controls')).toBe(false);
+        await type('');
+        expect(search.getAttribute('aria-expanded')).toBe('true');
+    });
     it('navigates with arrow keys and switches with Enter', async () => {
         const { el, press, waitForChanges } = await make({ open: true });
         await settle();
@@ -157,15 +168,10 @@ describe('bs-company-switcher', () => {
         expect(q(el, 'bs-input').placeholder).toBe('Finn selskap');
         expect(q(el, '[part="footer"]').textContent).toContain('Administrer');
     });
-    it('has no axe violations open (apart from bs-popover\'s own trigger wrapper)', async () => {
+    it('has no axe violations open', async () => {
         const { el } = await make({ open: true });
-        // Known gap in bs-popover: its trigger wrapper <div> carries aria-expanded/haspopup without a role
-        // (bs-popover's own tests assert those attributes), so axe flags aria-allowed-attr on it.
         const results = await axe.run(el);
-        const violations = results.violations
-            .map(v => ({ ...v, nodes: v.nodes.filter(n => !n.html.includes('bs-popover__trigger')) }))
-            .filter(v => v.nodes.length)
-            .map(v => `${v.id}: ${v.help}`);
+        const violations = results.violations.map(v => `${v.id}: ${v.help}`);
         expect(violations).toEqual([]);
     });
 });

package/dist/collection/components/bs-company-switcher/bs-company-switcher.js

@@ -234,10 +234,10 @@ export class BsCompanySwitcher {
         const empty = !!this.q && groups.length === 0;
         const listId = `${this.id}-listbox`;
         const total = groups.reduce((n, g) => n + g.items.length, 0);
-        return (h("bs-popover", { key: '5980bccab6835ad9384ba9314e35f0013053d2c9', class: "bs-company-switcher", open: this.open, placement: "bottom-start", onBsOpenChange: this.onPopoverOpenChange }, this.renderTrigger(), h("bs-card", { key: '6afff3828ecd224660d171514c23e7b3ca30f7ee', part: "panel", class: "bs-company-switcher__panel", surface: "base" }, h("div", { key: 'a046f869f51c0024e26efabf572dff82a8e2f787', class: "bs-company-switcher__search", onMouseDown: (ev) => ev.preventDefault() }, h("div", { key: '90e931c5129383fdb6443dae3ff9bed40fe61935', part: "search", role: "combobox", "aria-label": this.searchPlaceholder, "aria-expanded": "true", "aria-haspopup": "listbox", "aria-controls": groups.length ? listId : undefined, "aria-activedescendant": this.activeId ?? undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: 'c52a69879cdf3e7053f8b2fe97b5954b443121b6', ref: el => (this.inputEl = el), type: "search", value: this.query, placeholder: this.searchPlaceholder, onBsInput: this.onInput }))), groups.length > 0 && (h("div", { key: 'fd72b97de3388bb607abab5ec55fe5602314f281', id: listId, part: "list", class: "bs-company-switcher__list", role: "listbox", "aria-label": this.listLabel, onMouseDown: (ev) => ev.preventDefault(), onMouseLeave: () => (this.activeId = null) }, groups.map(g => {
+        return (h("bs-popover", { key: '5980bccab6835ad9384ba9314e35f0013053d2c9', class: "bs-company-switcher", open: this.open, placement: "bottom-start", onBsOpenChange: this.onPopoverOpenChange }, this.renderTrigger(), h("bs-card", { key: '6afff3828ecd224660d171514c23e7b3ca30f7ee', part: "panel", class: "bs-company-switcher__panel", surface: "base" }, h("div", { key: 'a046f869f51c0024e26efabf572dff82a8e2f787', class: "bs-company-switcher__search", onMouseDown: (ev) => ev.preventDefault() }, h("div", { key: '9cbdbdc07a5c673c21bb2af85d0e22d941278cc7', part: "search", role: "combobox", "aria-label": this.searchPlaceholder, "aria-expanded": groups.length ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": groups.length ? listId : undefined, "aria-activedescendant": this.activeId ?? undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: 'd48151ab5c7b3c52bd5272b276ed65b050ba8a86', ref: el => (this.inputEl = el), type: "search", value: this.query, placeholder: this.searchPlaceholder, onBsInput: this.onInput }))), groups.length > 0 && (h("div", { key: 'd7cbca7fbfea209e5063e997e0277e72833bae6e', id: listId, part: "list", class: "bs-company-switcher__list", role: "listbox", "aria-label": this.listLabel, onMouseDown: (ev) => ev.preventDefault(), onMouseLeave: () => (this.activeId = null) }, groups.map(g => {
             const hid = `${this.id}-h-${g.key}`;
             return (h("div", { part: "group", class: "bs-company-switcher__group", role: "group", "aria-labelledby": hid }, h("div", { part: "group-header", id: hid, class: "bs-company-switcher__group-header" }, g.header), g.items.map(c => this.renderRow(c))));
-        }))), empty && (h("bs-empty-state", { key: 'ec7b430654c356c6746c66e416e67ee436b1fdd0', part: "empty", class: "bs-company-switcher__empty", heading: this.emptyHeading.replace('{query}', this.query.trim()), description: this.emptyDescription }, h("svg", { key: '5a40d259338fabb61f69ebdcb0e3a9940f351ffe', slot: "icon", ...svgProps }, h("circle", { key: '757a039bb1b483c08f08af14e1b14dba2ae68c88', cx: "11", cy: "11", r: "7" }), h("path", { key: '5271a517de56a069843454c4f58c559ad458e20e', d: "m20 20-3.5-3.5" })))), h("bs-divider", { key: 'd5c25f9dc46b3272a7734ccc8b8d6fd5ed06986c', class: "bs-company-switcher__divider", decorative: true }), h("div", { key: 'd862e4c545a508f5306c07b76e92b1b381b68bc7', part: "footer", class: "bs-company-switcher__footer" }, h("bs-button", { key: '319614a523516d33c33cd6245c74787374e5304f', variant: "subtle", size: "sm", onClick: () => this.bsManageCompanies.emit() }, h("svg", { key: 'fd832a30f82be7bd8c61e236ecb605e12e2a1c0c', slot: "icon", ...svgProps }, h("circle", { key: '4efb646b40beb60f8b9eda1ea0204e2940c5272d', cx: "12", cy: "12", r: "3" }), h("path", { key: '199d7121c6ae29d435daa2c9e7c13af9f4415b19', d: "M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z" })), this.manageLabel), h("bs-button", { key: 'b5c5f44bdbde03b5192c1aba73fffd22424594a9', variant: "subtle", size: "sm", onClick: () => this.bsAddCompanies.emit() }, h("svg", { key: 'c5ba249024a7fdd303cea0c94ad44befd17be2b1', slot: "icon", ...svgProps }, h("path", { key: 'a1b62a0f772ec9f89126d70ac0bc18c76208d6e3', d: "M12 5v14M5 12h14" })), this.addLabel)), h("span", { key: '1a23f13dcd3eba63ba9d69e54b6311bbc622a5d1', class: "bs-company-switcher__live", "aria-live": "polite" }, this.open && this.q ? (empty ? this.emptyHeading.replace('{query}', this.query.trim()) : `${total} ${total === 1 ? this.matchLabel : this.matchesLabel}`) : ''))));
+        }))), empty && (h("bs-empty-state", { key: '5dbff2f753d480fb8e3633ceed77ee4b746e96af', part: "empty", class: "bs-company-switcher__empty", heading: this.emptyHeading.replace('{query}', this.query.trim()), description: this.emptyDescription }, h("svg", { key: 'b179aa273060b4f8b2c4e07844d6616f33f3985d', slot: "icon", ...svgProps }, h("circle", { key: 'd48847aaaea92eb7e6af0c39285cfa445f508114', cx: "11", cy: "11", r: "7" }), h("path", { key: '9b5f6c641c50a6d280c149da5f70871ee2d85032', d: "m20 20-3.5-3.5" })))), h("bs-divider", { key: '25bee440e7b15f68b3f451ef669c2efaae26c400', class: "bs-company-switcher__divider", decorative: true }), h("div", { key: '2c29e55970179036fc837352f5112bbc5b3b5429', part: "footer", class: "bs-company-switcher__footer" }, h("bs-button", { key: '34a9b9188c87c2c335a7eaf96fd3e0b445d1f374', variant: "subtle", size: "sm", onClick: () => this.bsManageCompanies.emit() }, h("svg", { key: '14277686d69b74c005f62ce0d483b1f6ef70ee7e', slot: "icon", ...svgProps }, h("circle", { key: '98423b978ae2ba9d0b8e17892d6269d2baf005e1', cx: "12", cy: "12", r: "3" }), h("path", { key: 'b61815c0f8c56ca6dd9de05d5d5b58738648a08d', d: "M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z" })), this.manageLabel), h("bs-button", { key: '4c83a67e7f54352e839b84b23a4aeb3b74ea26af', variant: "subtle", size: "sm", onClick: () => this.bsAddCompanies.emit() }, h("svg", { key: 'e504aeb192774bd8093e04c0795bd3ab700596a8', slot: "icon", ...svgProps }, h("path", { key: '0806d38b7b739308432dff3f71696cd92923f4ca', d: "M12 5v14M5 12h14" })), this.addLabel)), h("span", { key: 'e7ef671da5d9ac2431cd8f27dcc30985046946ac', class: "bs-company-switcher__live", "aria-live": "polite" }, this.open && this.q ? (empty ? this.emptyHeading.replace('{query}', this.query.trim()) : `${total} ${total === 1 ? this.matchLabel : this.matchesLabel}`) : ''))));
     }
     static get is() { return "bs-company-switcher"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,7 +62,7 @@ export const AllStates = {
             <h4 style="margin:0; font-family: sans-serif; text-transform: capitalize;">${variant}</h4>
             ${states.map(state => html `
                 <div>
-                  <div style="font-size: 12px; font-family: monospace; color: #888; margin-bottom: 4px;">${state}</div>
+                  <div style="font-size: 12px; font-family: monospace; color: var(--bs-text-secondary); margin-bottom: 4px;">${state}</div>
                   <bs-composer
                     variant=${variant}
                     state=${state}

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

@@ -127,9 +127,7 @@ describe('bs-dropdown', () => {
     it('passes axe when open', async () => {
         const { root, waitForChanges } = await setup({ open: true });
         await settle(waitForChanges);
-        // bs-popover puts aria-haspopup/aria-expanded on its role-less trigger wrapper div (pre-existing, flagged
-        // by aria-allowed-attr); every other rule must pass.
-        const results = await axe.run(root, { rules: { 'aria-allowed-attr': { enabled: false } } });
+        const results = await axe.run(root);
         expect(results.violations.map(v => v.id)).toEqual([]);
     });
 });

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-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: '60037b8ebeead636ca7cfb1d1fb5656662053854', class: "bs-popover" }, h("div", { key: '216a52057acbae40f00d5c7e09ad7141fe356a3b', 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: '08bd0b15dbf67de5fbfa5323570886f2ea7a5468', name: "trigger", ref: el => (this.triggerSlot = el) })), h("div", { key: '5e409b359b7afcf4da286cfb66a264897698018d', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open && !this.closing, ref: el => (this.popupEl = el) }, h("slot", { key: '35a194b6369502fa0da50795aff5ee418376d009' }))));
+        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-search-item/bs-search-item.js

@@ -69,7 +69,7 @@ export class BsSearchItem {
     slotFilled = (set) => (ev) => set(ev.target.assignedNodes().length > 0);
     render() {
         const role = this.selectionRole ?? undefined;
-        return (h("div", { key: '4e02263a2d377be0989f3469555f19f9b4933840', part: "container", class: "bs-search-item", role: role, "aria-selected": role ? String(this.active) : undefined, "aria-disabled": role && this.disabled ? 'true' : undefined }, !this.disabled && h("bs-ripple", { key: '00523f734a7d994cf448df045a73d4588da1c00c', part: "ripple" }), h("span", { key: '2d030afeec12e555c72d1659f0ac7d2ecb4df70a', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, h("slot", { key: 'ab14918cfcb5425b33c1489232ea18bf940dc49d', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), h("span", { key: 'eee1f17e15fa4195f3a65fa7bc7f3ad12d839b7c', part: "content", class: "bs-search-item__content" }, h("span", { key: '75cd5ada24d085dce96331782c4e71317d0d8ed4', part: "label", class: "bs-search-item__label" }, h("slot", { key: '47fbf5d269d2a23eb824ba32084886efdad2aa96' })), h("span", { key: 'b2e4154147a02059d08505bc9f452931bbcff2bf', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, h("slot", { key: '8b72f89b59fa15c21c0d02b3db88b3e291d72f81', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), h("span", { key: 'e0b5675b2d71fe5e740fd90ff2aea5eecca2f9eb', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, h("slot", { key: 'c0dc999d7b4da6b670690b72071f5b844b86b35b', name: "trailing", onSlotchange: this.slotFilled(v => (this.hasTrailingSlot = v)) }, this.trailing))));
+        return (h("div", { key: 'd06ef043c3fa15df8d3adf3ff62b105dcef5dc1d', part: "container", class: "bs-search-item", role: role, "aria-selected": role ? String(this.active) : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, !this.disabled && h("bs-ripple", { key: 'a9dbae40775340f256d9ac2dd54c43f7144dda41', part: "ripple" }), h("span", { key: '2b80eb34ad0901c6e179770807cca6cd306acd25', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, h("slot", { key: '7fc3bef2ba29179b425b2f470c61b6c70dae01a2', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), h("span", { key: '67481270ed566846d87cf12325db53d44f2230d1', part: "content", class: "bs-search-item__content" }, h("span", { key: 'e5993e5796e55fcf03def1d33787fe43a8b652f6', part: "label", class: "bs-search-item__label" }, h("slot", { key: '8aab4906967341b2938a5ec5ecab5794139a4acf' })), h("span", { key: '8a9453d5303e6b89c3abef8864e536726cea9906', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, h("slot", { key: '7f2ef31966d836fbef03d5e4610263081cab87b5', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), h("span", { key: 'fcac22f41850199ef148124f9ddbdb3b687418a9', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, h("slot", { key: '19167fcf2502d2a16f36f3620f3257a3cd5f5cf3', name: "trailing", onSlotchange: this.slotFilled(v => (this.hasTrailingSlot = v)) }, this.trailing))));
     }
     static get is() { return "bs-search-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@ export class BsShortcutRow {
     /** Set by the parent list (`"listitem"`). Standalone rows have no role. */
     selectionRole = null;
     render() {
-        return (h("div", { key: 'e7f79909833204fb269402972500a9d97401665d', part: "container", class: "bs-shortcut-row", role: this.selectionRole ?? undefined }, h("span", { key: '68dae2196bda22cd09bbc0b07958f8f2be66e332', part: "action", class: "bs-shortcut-row__action" }, h("slot", { key: '892a107840f1861f3c4ef5ae03e781839dead497' }, this.action)), h("span", { key: '06637079e74f4c944984133ab5cd897b40d64fd1', part: "keys", class: "bs-shortcut-row__keys" }, h("slot", { key: 'a21d5b51332d383a8d3670a0531e536f240c8e09', name: "keys" }, h("bs-key-caps", { key: '231389f5cf6d712a14b68a84bd9c02ce65be0ff7', keys: this.keys, label: this.label, disabled: this.disabled })))));
+        return (h("div", { key: '01234047de01effc5d7ae411a6180d02e663d9af', part: "container", class: "bs-shortcut-row", role: this.selectionRole ?? undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("span", { key: 'd8c80f480f4f463f5c0ee46719e4b051e1f54816', part: "action", class: "bs-shortcut-row__action" }, h("slot", { key: '8c5da35b9c05f1544892808b75b4b24701554dc7' }, this.action)), h("span", { key: '3588f962523eabfdbebc2de3d8cdd3cface4ca07', part: "keys", class: "bs-shortcut-row__keys" }, h("slot", { key: '3315142746d44c8c27ce6952a5cffad1f51473d8', name: "keys" }, h("bs-key-caps", { key: '70a4155ce7ed5b0e585ab45e9f2a8b1c69880e4e', keys: this.keys, label: this.label, disabled: this.disabled })))));
     }
     static get is() { return "bs-shortcut-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -233,7 +233,7 @@ export class BsSlider {
     render() {
         const isRange = this.type === 'range';
         const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
-        return (h("div", { key: '242e99440bf989ab9e8370772a415ef98ea4df97', class: rootClasses }, this.showLabel && (h("div", { key: '23063ed9dd2dfefc2df1ae8794fdb6d54195ee39', class: "bs-slider__header" }, h("span", { key: '15debc72803ed291564d1573179e9e30fd4a40f6', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? this.startValueLabel), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : this.endValueLabel))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: 'b975a8200846dbd43622473d3e62255c805e0359', class: "bs-slider__row" }, this.showLabel && (h("span", { key: 'c82b225aa14924963005a578fdaf0ab1accf8c2b', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '5e85c40cb85d2b71591020249cac4d5ae0c300a4', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (h("div", { key: 'edb31a417eff920fb2fbff7cd26620629038449b', class: rootClasses, "aria-disabled": this.disabled ? 'true' : undefined }, this.showLabel && (h("div", { key: '8732ee01cd1441c0a715b45257ac560b062fc384', class: "bs-slider__header" }, h("span", { key: '25440a9c9bee46d3c82c1eda056e24b7e92e8302', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? this.startValueLabel), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : this.endValueLabel))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '9fcd6e0729266f1c38719347f6b48590788fb8c5', class: "bs-slider__row" }, this.showLabel && (h("span", { key: 'c55a68e9244d1ab2102d6c90d31b35df49f6119c', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '1140fda48f69433161dc2fd1e65f18d1f09f2ed9', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get is() { return "bs-slider"; }
     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: '85fbebb638a7e323d2e524b74c1077c261c00066', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: 'a44a6b58bf74b27cee279c761ed596373882791a', class: "bs-stepper-step__top" }, h("span", { key: 'ae7045a3049b42d245292960fa8eb3f7dfe61864', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '1ff646a4f8fbb2f81b2208086d280c183ddba61c', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '9fbe0328c61ac5108b22be369c1db1652523eb00' }), state === 'error' && h(ExclamationIcon, { key: 'ea56eb9dc52b9d1b9070ef273d46fece166c362d' })), h("span", { key: '0c4b5fde931c626e2b3652e7f047c1ac21b51f02', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '06a69e6f61bb744be078feee462fe293947326fa', class: "bs-stepper-step__connector-line" }))), h("span", { key: '982de1069e1eb3e409ac81600f4fc3c7512fe190', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'f946599b4130219b91e76aec9ab6442bf08bd901', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '043581dd2db1ffc8fae23ebc32a5346ba5bf325e', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (h(Host, { key: 'a413a500376629d039afab3168b83cae5c636dc1', role: "listitem", class: `bs-stepper-step--${this.direction}`, "aria-disabled": state === 'disabled' ? 'true' : undefined }, h("div", { key: '7978cd670eeafe2dee95a2e3d97625ff22cd006d', class: "bs-stepper-step__top" }, h("span", { key: '0d0e5ef0199013cd0ed59b26fe169c2bac727920', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '6c9ab59838f63958a54b852c4a8f3babf1ddc48e', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '284d95f3e0ae3033ab2baa079c00cb2dc1fbcd3f' }), state === 'error' && h(ExclamationIcon, { key: '45b894a13cf54b0d5cb027d89646c712584bf6bb' })), h("span", { key: '79621665f9aecb82c4135ac2e1139ce1ee9af6be', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '91454b553634d90734dbd2b8bb9ab53d9bead49c', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'd5f1606511df9745571d96cad36d38774fd943b4', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '81df6e0b9607c22cfdad7e37095d245ec428e0f1', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '77c4951d570219071e8acedc361a73eed6a89612', 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-tab/bs-tab/bs-tab.stories.js

@@ -1,4 +1,4 @@
-import { html, nothing } from "lit";
+import { html } from "lit";
 import { componentDescription, propDescription } from "../../../stories-utils";
 const iconPositions = ['start', 'top'];
 // `start`/`top` are the real prop values, but "Horizontal"/"Vertical" is what the layout actually
@@ -19,18 +19,18 @@ const meta = {
     // it can strip the element's own role. A plain block-level div has no visual effect worth
     // avoiding here (each story below is a single isolated demo, not part of a larger page layout).
     //
-    // aria-label uses lit's `nothing` sentinel below, not null/'' -- a plain (non-boolean) lit
-    // attribute binding renders null/'' as aria-label="" (present but empty), not an absent
-    // attribute. axe-core then treats the light-DOM <bs-tab> host as ARIA-meaningful in its own
-    // right and stops looking inside its shadow root for the real role="tab", which surfaces as an
-    // aria-required-children violation on the *parent* tablist -- a very confusing place to look.
+    // ariaLabel is bound as a property (`.ariaLabel`), not an `aria-label` attribute. Any aria-label
+    // attribute on the light-DOM <bs-tab> host (even an empty one) makes axe-core treat the host as
+    // ARIA-meaningful in its own right and stop looking inside its shadow root for the real
+    // role="tab", which surfaces as an aria-required-children violation on the *parent* tablist -- a
+    // very confusing place to look. A property reaches the inner button without touching the host.
     render: args => html `
     <div role="tablist">
       <bs-tab
         ?selected=${args.selected}
         ?disabled=${args.disabled}
         icon-position=${args.iconPosition}
-        aria-label=${args.ariaLabel || nothing}
+        .ariaLabel=${args.ariaLabel || null}
       >
         ${args.icon ? homeIcon : ''}${args.label}
         ${args.badge ? html `<bs-badge slot="badge" variant="primary">3</bs-badge>` : ''}

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

@@ -137,13 +137,8 @@ describe('bs-toolbar', () => {
     it('has no axe violations with overflow enabled', async () => {
         const { root } = await render(h("div", { style: { width: '200px' } }, h("bs-toolbar", { label: "Actions", overflow: true }, ['One', 'Two', 'Three', 'Four'].map(t => (h("bs-button", { slot: "left", variant: "subtle" }, t))))));
         await tick(200);
-        // Known gap in the composed bs-popover (not this component): it puts aria-haspopup/aria-expanded
-        // on a role-less wrapper div, which axe flags as aria-allowed-attr. Everything else must be clean.
         const results = await axe.run(root);
-        const violations = results.violations
-            .map(v => ({ ...v, nodes: v.nodes.filter(n => !(v.id === 'aria-allowed-attr' && n.html.includes('bs-popover__trigger'))) }))
-            .filter(v => v.nodes.length > 0)
-            .map(v => `${v.id}: ${v.help}`);
+        const violations = results.violations.map(v => `${v.id}: ${v.help}`);
         expect(violations).toEqual([]);
     });
 });

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

@@ -1,10 +1,12 @@
 import { html } from "lit";
 import { componentDescription } from "../../stories-utils";
+// A bs-tree-item is role="treeitem", which must sit inside a role="tree" -- a bare `div` stands in for
+// bs-tree here so the item is shown on its own without the tree's roving-tabindex behaviour.
 const meta = {
     title: 'Components/bs-tree-item',
     parameters: { docs: { description: { component: componentDescription('bs-tree-item') } } },
     render: args => html `
-    <div style="width: 360px">
+    <div role="tree" aria-label="Example tree" style="width: 360px">
       <bs-tree-item label=${args.label} ?expanded=${args.expanded} ?selected=${args.selected} ?disabled=${args.disabled} .showIcon=${args.showIcon}>
         <bs-tree-item label="Child item"></bs-tree-item>
       </bs-tree-item>
@@ -27,12 +29,12 @@ export const Disabled = { args: { disabled: true } };
 export const WithoutIcon = { args: { showIcon: false } };
 export const Child = {
     render: () => html `
-    <div style="width: 360px"><bs-tree-item label="Leaf item"></bs-tree-item></div>
+    <div role="tree" aria-label="Example tree" style="width: 360px"><bs-tree-item label="Leaf item"></bs-tree-item></div>
   `,
 };
 export const Levels = {
     render: () => html `
-    <div style="width: 360px">
+    <div role="tree" aria-label="Example tree" style="width: 360px">
       <bs-tree-item label="Level 1" expanded>
         <bs-tree-item label="Level 2" expanded>
           <bs-tree-item label="Level 3"></bs-tree-item>
@@ -43,7 +45,7 @@ export const Levels = {
 };
 export const CustomIcon = {
     render: () => html `
-    <div style="width: 360px">
+    <div role="tree" aria-label="Example tree" style="width: 360px">
       <bs-tree-item label="Starred">
         <svg slot="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
           <path d="M12 3.75L14.6 9.1L20.5 9.9L16.2 14L17.3 19.9L12 17.1L6.7 19.9L7.8 14L3.5 9.9L9.4 9.1L12 3.75Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />