@brandsync/wc 1.3.0 → 1.4.0

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

@@ -22,7 +22,7 @@ import { h } from "@stencil/core";
  */
 export class BsMenu {
     render() {
-        return (h("div", { key: 'dd742f65c43d51805fff4b77412e12d8d8704e3f', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '395c901d030847b07a0936a16bef43ce4c3931cd' })));
+        return (h("div", { key: '9ddd41b5264edea07a8fd9861a5f0c6bcf922e50', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '011a7b612195dbd38047c02acb00756fba1cfc69' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -47,7 +47,7 @@ export class BsMenuItem {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '537a4ef632ef8acf72b0cf7747ade28ba307e1ef', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: '67bb25d41e2066f9e9d2fd106ebb24b3eecdce63', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: 'df844ec5fefff0e64624681f5fddc245fc18d426', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'b657fb13e0a437ecc7300816cbffb91f7668c665', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '273220d5e7c90aae4d677c634f534897c8b980c6' }))));
+        return (h("button", { key: 'dc2ecd8c91134844ee1aeb520295fc6dc0fb2fba', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: '0f20ceeb37ddaf28f231f2ce0897ade44c69d98a', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '0ba45aa14671240b68113a3ed1e1c923552de077', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'fdf7916b79e66b3164260ef399de1e7f8654a246', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '66583fc1d0a0958f0e57c1e4c66f01f77900513d' }))));
     }
     static get is() { return "bs-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -87,7 +87,7 @@ export class BsPagination {
     }
     render() {
         const pageList = this.getPageList();
-        return (h("nav", { key: '1cd9579d68bedee2d0e6e04a96a9ac3230ce21b9', "aria-label": "Pagination" }, h("ul", { key: 'c279f92f1f08f17724a59ddd9a9ff6086307deb1', part: "list", class: "bs-pagination__list" }, h("li", { key: 'cec04dcf7f6e1f6be5774b3a68aacf7f2ec27224', part: "item", class: "bs-pagination__item" }, h("button", { key: 'ed917eaac4275e19de2f9bc2e2cfde4ce03fb93e', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: 'd0448255baeaceb830aa1b4eefc0d065c5730b2e' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `Go to page ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: 'b0acab6503ad12774d3e1fdc9db75a5403439b49', part: "item", class: "bs-pagination__item" }, h("button", { key: 'e8f1fafeb042983b5d2eedbfd9a145337cb91989', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: '4ee1e79e9f3fd68344e871bb376b6027eb50808e' }))))));
+        return (h("nav", { key: 'a717e0c64697d3c0da2f15fcd7d12fc4f25d700b', "aria-label": "Pagination" }, h("ul", { key: 'b18b2e0c20057be81a03af983b9fb59ce5f1e782', part: "list", class: "bs-pagination__list" }, h("li", { key: '8255be4c2d821b54f76e2a48e68d68b2efda5b32', part: "item", class: "bs-pagination__item" }, h("button", { key: '35d48190d024595bd5c99c6a897a617b65a08eee', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: 'c9f3323e63eb497ab717682c0fa28feec19d8033' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `Go to page ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: '809ebb893783eea55974081032bf489761298dce', part: "item", class: "bs-pagination__item" }, h("button", { key: '794f0b9ffd022b5dd973612a54a1c1ac19d46397', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: 'bb639f2573b34133a77a364a3d3ff2c1e071c694' }))))));
     }
     static get is() { return "bs-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -64,7 +64,7 @@ export class BsProgress {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
         const dashOffset = circumference * (1 - value / 100);
-        return (h("div", { key: '359251959b842695100d52b8fb4707708ed8fb5d', part: "container", class: "bs-progress" }, h("div", { key: '397c8cecc86bc564c9c7e4fadbbbcf05bae71c58', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "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: '19bbc9dc90c75faa2c9cc1571eb782f2df76e14b', part: "container", class: "bs-progress" }, h("div", { key: '5e63bdd093f3bcf09740617fe489b9ed9f2f55ca', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "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
@@ -73,7 +73,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: '90b9d66a1e5cb7c8bc392e99636386c765e6479c', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+            } }))), isDeterminate && this.showLabel && (h("span", { key: '9010120dc7781c3ac3c25ced301bc52ad07f4fa6', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
     }
     static get is() { return "bs-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,13 +46,13 @@ export class BsProgressLinear {
     render() {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
-        return (h("div", { key: '5c8e982bad03ed994700f3021a2304f4b51b3f4a', part: "container", class: "bs-progress-linear" }, h("div", { key: 'e2327781cdfbec66cee4a09a0d518cd71f9a8fb7', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "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: '5195d1db1d788c4ad70913aff780ae966e2ae4c7', part: "container", class: "bs-progress-linear" }, h("div", { key: '518f1a552262d455b085acae72388bdcb9437624', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "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: 'adbb34071dedfe8e164f1cf208e95c7f1f241399', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: '74020827d39b5d7d38feee377058c434f7e78f11' })))));
+        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: '7f7fc5eaf10993bdc7b7f0033a483a16b8b33a56', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: '7eab67f682d84fe4808052b5f5eeb5701075af11' })))));
     }
     // The default slot's assigned content lives in the host's light DOM regardless of whether a
     // <slot> is currently rendered in the shadow tree, so this can be computed directly from the

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

@@ -51,7 +51,7 @@ export class BsRadio {
         }
     };
     render() {
-        return (h("label", { key: '161bfbd0b2275f33cb8fbc5b3e4851ec30edbbce', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '264d57cbd6c4f0052d8db28fb0fb11e274448b9b', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: 'c7caedd6dfad0b5808a6e1bea575c4f958d2ea0b', class: "bs-radio__hit-area" }, h("span", { key: '1192afc8c59dce5fdf5c226dd560e4885175a73c', class: "bs-radio__state-layer" }, h("span", { key: '7869c22cde3a99465500cc7cb52b281189db6f94', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '8f9cce005680970137aa380f64792a877a28fee6', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'a1539f067d44caf5988a1a86755bf47d9738fe08', part: "label", class: "bs-radio__label" }, h("slot", { key: 'be0394e88cc984e2d558881be9305753fec90ddc' }))));
+        return (h("label", { key: 'dcf048ee4d4779e54bbefafffe624af7f4714b51', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: 'b79b3a21bddfb3a043a3c509001b1be62ae260c7', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: 'fea39784ffd4e99990fe217f3a6d0fbfd33fb999', class: "bs-radio__hit-area" }, h("span", { key: '30063338cf704559bfe141ba6aed997a30db00e1', class: "bs-radio__state-layer" }, h("span", { key: '528a36ac263b7711a8147306074679f53d48afc6', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '56a4dbed5c8ba67446b2f790e47fc68374676e94', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '018d3fe6d395d9dc571806f47dd4202a28590203', part: "label", class: "bs-radio__label" }, h("slot", { key: '35b436c2b3ccc1de215b1a6613d3351f030f9134' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -199,7 +199,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: '1cbd5e53dd0d8fb327d8584428dd21332661b5e2', class: rootClasses }, this.showLabel && (h("div", { key: '3634d341e67ebc1bfba90b86b104fa5553d67d1d', class: "bs-slider__header" }, h("span", { key: '3ebf6d66bd5c8e51fe9d9b42844cbfc1c45ae696', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '874e62bf31a4fdba314c9999d15abfbf211fb5bc', class: "bs-slider__row" }, this.showLabel && (h("span", { key: 'eb26f532ddac948279faa4bc6c60d263b0538ee6', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '01bab87bfab37495ce857bbfd16d8417aea61a61', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (h("div", { key: 'ddb7ca5769b3d59ef372b95b23fd5cc656f4c425', class: rootClasses }, this.showLabel && (h("div", { key: '8a5d6639e1d4affb8efb874727eae3361eeac8e5', class: "bs-slider__header" }, h("span", { key: '41a26138a837cb6a976d23162443825c8b3ab7ff', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: 'c8275425323bb3ecdffeb7455572d60379be8fe3', class: "bs-slider__row" }, this.showLabel && (h("span", { key: 'aaaaa6d800478963f615bad21af88bb1ffddfa58', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '23b49ac1dc4968a1b3a6cd0706283818c5ebe234', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get is() { return "bs-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,7 +53,10 @@ describe('bs-snackbar', () => {
             const { root } = await render(h("bs-snackbar", null, "Message"));
             const close = root.shadowRoot.querySelector('[part="close"]');
             expect(close).not.toBeNull();
-            expect(close).toEqualAttribute('aria-label', 'Dismiss');
+            // bs-icon-button sets aria-label on its OWN inner <button> (inside its own shadow DOM), not
+            // on its host element -- so the accessible name lives one shadow root deeper than `close` itself.
+            const innerButton = close.shadowRoot.querySelector('button');
+            expect(innerButton).toEqualAttribute('aria-label', 'Dismiss');
         });
         it('emits bsDismiss when the close button is clicked', async () => {
             const { root, spyOnEvent } = await render(h("bs-snackbar", null, "Message"));

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

@@ -10,37 +10,21 @@
  * @prop --bs-snackbar-actions-padding-y: Top/bottom padding of the actions area. Aliased to --bs-spacing-50.
  * @prop --bs-snackbar-actions-padding-x: Right padding of the actions area (the bar's own right edge). Aliased to --bs-spacing-100.
  * @prop --bs-snackbar-actions-gap: Gap between the action button and the close button. Aliased to --bs-spacing-50.
- * @prop --bs-snackbar-action-radius: Corner radius of the action button. Aliased to --bs-border-radius-100.
- * @prop --bs-snackbar-action-font-size: Action button font size. Aliased to --bs-font-size-sm.
- * @prop --bs-snackbar-action-font-weight: Action button font weight. Aliased to --bs-font-weight-medium.
- * @prop --bs-snackbar-action-line-height: Action button line height. Aliased to --bs-line-height-body-sm.
- * @prop --bs-snackbar-close-radius: Corner radius of the close button. Aliased to --bs-border-radius-100.
  * @prop --bs-snackbar-surface-default: Bar background, variant="default". Aliased to --bs-snackbar-bg-default (brandsync-tokens).
  * @prop --bs-snackbar-color-default: Icon/message/close color, variant="default". Aliased to --bs-snackbar-text-default (brandsync-tokens) -- named "-color-", not "-text-", solely to avoid colliding with that vendored token's own name.
- * @prop --bs-snackbar-action-border-default: Action button border, variant="default" (outlined, not filled). Aliased to --bs-blue-300.
- * @prop --bs-snackbar-action-text-default: Action button text, variant="default". Aliased to --bs-snackbar-action-text (brandsync-tokens).
  * @prop --bs-snackbar-surface-info: Bar background, variant="info". Aliased to --bs-color-info-container.
  * @prop --bs-snackbar-text-info: Icon/message/close color, variant="info". Aliased to --bs-text-info.
- * @prop --bs-snackbar-action-bg-info: Action button background, variant="info". Aliased to --bs-snackbar-bg-info (brandsync-tokens).
- * @prop --bs-snackbar-action-bg-info-hover: Action button background, variant="info", hover. Aliased to --bs-color-info-hover.
- * @prop --bs-snackbar-action-bg-info-pressed: Action button background, variant="info", pressed. Aliased to --bs-color-info-pressed.
  * @prop --bs-snackbar-surface-warning: Bar background, variant="warning". Aliased to --bs-color-warning-container.
  * @prop --bs-snackbar-text-warning: Icon/message/close color, variant="warning". Aliased to --bs-text-warning.
- * @prop --bs-snackbar-action-bg-warning: Action button background, variant="warning". Aliased to --bs-snackbar-bg-warning (brandsync-tokens).
- * @prop --bs-snackbar-action-bg-warning-hover: Action button background, variant="warning", hover. Aliased to --bs-color-warning-hover.
- * @prop --bs-snackbar-action-bg-warning-pressed: Action button background, variant="warning", pressed. Aliased to --bs-color-warning-pressed.
  * @prop --bs-snackbar-surface-success: Bar background, variant="success". Aliased to --bs-color-success-container.
  * @prop --bs-snackbar-text-success: Icon/message/close color, variant="success". Aliased to --bs-text-success.
- * @prop --bs-snackbar-action-bg-success: Action button background, variant="success". Aliased to --bs-snackbar-bg-success (brandsync-tokens).
- * @prop --bs-snackbar-action-bg-success-hover: Action button background, variant="success", hover. Aliased to --bs-color-success-hover.
- * @prop --bs-snackbar-action-bg-success-pressed: Action button background, variant="success", pressed. Aliased to --bs-color-success-pressed.
  * @prop --bs-snackbar-surface-error: Bar background, variant="error". Aliased to --bs-color-error-container.
  * @prop --bs-snackbar-text-error: Icon/message/close color, variant="error". Aliased to --bs-text-error.
- * @prop --bs-snackbar-action-bg-error: Action button background, variant="error". Aliased to --bs-snackbar-bg-error (brandsync-tokens).
- * @prop --bs-snackbar-action-bg-error-hover: Action button background, variant="error", hover. Aliased to --bs-color-error-hover.
- * @prop --bs-snackbar-action-bg-error-pressed: Action button background, variant="error", pressed. Aliased to --bs-color-error-pressed.
- * @prop --bs-snackbar-action-text-on-action: Action button text, every colored (filled) variant. Aliased to --bs-text-on-action.
  * @prop --bs-snackbar-spinner-track: Loading spinner's background ring. Aliased to --bs-neutral-200.
+ *
+ * The action/close buttons are composed from bs-button/bs-icon-button (see bs-snackbar.tsx) --
+ * their own fill colors, hover/pressed states, and focus rings are governed by THOSE components'
+ * own custom properties (--bs-button-*, --bs-icon-button-*), not duplicated here.
  */
 :host {
   display: inline-flex;
@@ -59,13 +43,6 @@
   --bs-snackbar-actions-padding-x: var(--bs-spacing-100);
   --bs-snackbar-actions-gap: var(--bs-spacing-50);
 
-  --bs-snackbar-action-radius: var(--bs-border-radius-100);
-  --bs-snackbar-action-font-size: var(--bs-font-size-sm);
-  --bs-snackbar-action-font-weight: var(--bs-font-weight-medium);
-  --bs-snackbar-action-line-height: var(--bs-line-height-body-sm);
-
-  --bs-snackbar-close-radius: var(--bs-border-radius-100);
-
   --bs-snackbar-surface-default: var(--bs-snackbar-bg-default);
   /* Named "-color-", not "-text-", solely to avoid a self-referential cycle: the brandsync-tokens
      vendored token is ALSO literally named --bs-snackbar-text-default, so declaring a property of
@@ -73,34 +50,19 @@
      per the CSS spec -- the property would compute to its initial value (nothing), not fall back
      to the vendored one. */
   --bs-snackbar-color-default: var(--bs-snackbar-text-default);
-  --bs-snackbar-action-border-default: var(--bs-blue-300);
-  --bs-snackbar-action-text-default: var(--bs-snackbar-action-text);
 
   --bs-snackbar-surface-info: var(--bs-color-info-container);
   --bs-snackbar-text-info: var(--bs-text-info);
-  --bs-snackbar-action-bg-info: var(--bs-snackbar-bg-info);
-  --bs-snackbar-action-bg-info-hover: var(--bs-color-info-hover);
-  --bs-snackbar-action-bg-info-pressed: var(--bs-color-info-pressed);
 
   --bs-snackbar-surface-warning: var(--bs-color-warning-container);
   --bs-snackbar-text-warning: var(--bs-text-warning);
-  --bs-snackbar-action-bg-warning: var(--bs-snackbar-bg-warning);
-  --bs-snackbar-action-bg-warning-hover: var(--bs-color-warning-hover);
-  --bs-snackbar-action-bg-warning-pressed: var(--bs-color-warning-pressed);
 
   --bs-snackbar-surface-success: var(--bs-color-success-container);
   --bs-snackbar-text-success: var(--bs-text-success);
-  --bs-snackbar-action-bg-success: var(--bs-snackbar-bg-success);
-  --bs-snackbar-action-bg-success-hover: var(--bs-color-success-hover);
-  --bs-snackbar-action-bg-success-pressed: var(--bs-color-success-pressed);
 
   --bs-snackbar-surface-error: var(--bs-color-error-container);
   --bs-snackbar-text-error: var(--bs-text-error);
-  --bs-snackbar-action-bg-error: var(--bs-snackbar-bg-error);
-  --bs-snackbar-action-bg-error-hover: var(--bs-color-error-hover);
-  --bs-snackbar-action-bg-error-pressed: var(--bs-color-error-pressed);
 
-  --bs-snackbar-action-text-on-action: var(--bs-text-on-action);
   --bs-snackbar-spinner-track: var(--bs-neutral-200);
 }
 
@@ -206,116 +168,7 @@
   padding: var(--bs-snackbar-actions-padding-y) var(--bs-snackbar-actions-padding-x) var(--bs-snackbar-actions-padding-y) 0;
 }
 
-.bs-snackbar__action {
-  height: 32px;
-  padding: 0 var(--bs-spacing-150);
-  border-radius: var(--bs-snackbar-action-radius);
-  font-family: inherit;
-  font-size: var(--bs-snackbar-action-font-size);
-  font-weight: var(--bs-snackbar-action-font-weight);
-  line-height: calc(var(--bs-snackbar-action-line-height) * 1px);
-  white-space: nowrap;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-}
-
-/* default is the only variant whose action button is outlined (transparent, bordered) rather than
-   filled -- matches the Figma spec's dark neutral bar using a lighter bordered button instead of a
-   solid fill, since a solid fill would need its own distinct color unrelated to the bar's own dark
-   surface. */
-.bs-snackbar--default .bs-snackbar__action {
-  border: 1px solid var(--bs-snackbar-action-border-default);
-  color: var(--bs-snackbar-action-text-default);
-}
-
-.bs-snackbar--info .bs-snackbar__action {
-  background: var(--bs-snackbar-action-bg-info);
-  color: var(--bs-snackbar-action-text-on-action);
-}
-.bs-snackbar--info .bs-snackbar__action:hover {
-  background: var(--bs-snackbar-action-bg-info-hover);
-}
-.bs-snackbar--info .bs-snackbar__action:active {
-  background: var(--bs-snackbar-action-bg-info-pressed);
-}
-
-.bs-snackbar--warning .bs-snackbar__action {
-  background: var(--bs-snackbar-action-bg-warning);
-  color: var(--bs-snackbar-action-text-on-action);
-}
-.bs-snackbar--warning .bs-snackbar__action:hover {
-  background: var(--bs-snackbar-action-bg-warning-hover);
-}
-.bs-snackbar--warning .bs-snackbar__action:active {
-  background: var(--bs-snackbar-action-bg-warning-pressed);
-}
-
-.bs-snackbar--success .bs-snackbar__action {
-  background: var(--bs-snackbar-action-bg-success);
-  color: var(--bs-snackbar-action-text-on-action);
-}
-.bs-snackbar--success .bs-snackbar__action:hover {
-  background: var(--bs-snackbar-action-bg-success-hover);
-}
-.bs-snackbar--success .bs-snackbar__action:active {
-  background: var(--bs-snackbar-action-bg-success-pressed);
-}
-
-.bs-snackbar--error .bs-snackbar__action {
-  background: var(--bs-snackbar-action-bg-error);
-  color: var(--bs-snackbar-action-text-on-action);
-}
-.bs-snackbar--error .bs-snackbar__action:hover {
-  background: var(--bs-snackbar-action-bg-error-hover);
-}
-.bs-snackbar--error .bs-snackbar__action:active {
-  background: var(--bs-snackbar-action-bg-error-pressed);
-}
-
-.bs-snackbar__close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  flex-shrink: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  border-radius: var(--bs-snackbar-close-radius);
-  color: inherit;
-  cursor: pointer;
-}
-
-.bs-snackbar__close svg {
-  width: 24px;
-  height: 24px;
-}
-
-/* Hover/active feedback for the close button (every variant) and the default variant's outlined
-   action button -- both have a transparent background with only text/border color, so there's no
-   solid fill to darken the way the filled colored-variant action buttons above do. `opacity` was
-   tried here first and was wrong: dimming a transparent element's opacity blends it TOWARD
-   whatever's behind it, which on the light pastel info/warning/success/error surfaces made a
-   "pressed" dark-colored button look LIGHTER/washed-out -- backwards from a pressed state. A
-   `color-mix()` tint using `currentColor` fixes that (a real added tint, not a blend-toward-behind)
-   while still doing the right thing on the dark `default` surface, where content is white and a
-   light-tint hover is the correct/expected direction (same idea as a ripple highlight on a dark
-   surface). Also automatically matches whichever variant's color is active, no separate per-variant
-   hover token needed here. */
-.bs-snackbar--default .bs-snackbar__action:hover,
-.bs-snackbar__close:hover {
-  background: color-mix(in srgb, currentColor 12%, transparent);
-}
-
-.bs-snackbar--default .bs-snackbar__action:active,
-.bs-snackbar__close:active {
-  background: color-mix(in srgb, currentColor 24%, transparent);
-}
-
-.bs-snackbar__action:focus-visible,
-.bs-snackbar__close:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
+/* The action/close buttons are now composed from the shared bs-button/bs-icon-button components
+   (see bs-snackbar.tsx) instead of hand-rolled <button> markup -- all the button-level styling
+   (fill colors, hover/pressed states, focus rings, and slotted-icon sizing) lives in those
+   components' own CSS, so there's nothing left to style here. */

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

@@ -1,4 +1,14 @@
 import { h } from "@stencil/core";
+// Maps each snackbar variant to the bs-button variant its action button composes -- 'default'
+// (the dark neutral bar) uses 'outlined' since there's no bs-button variant tuned for a dark
+// surface; every colored variant maps 1:1 to the same-named bs-button variant.
+const ACTION_VARIANT = {
+    default: 'outlined',
+    info: 'info',
+    warning: 'warning',
+    success: 'success',
+    error: 'error',
+};
 /**
  * A transient status bar for confirming the result of an action (e.g. "Files uploaded
  * successfully.") -- an icon (or loading spinner), a message, an optional action, and a close
@@ -51,7 +61,7 @@ export class BsSnackbar {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '3251935ac23aa9157004eefdb6e324234eb6bfcb', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'c45e3cbe89cf2b956e46c71db87eb9644d3ef4df', class: "bs-snackbar__content" }, h("span", { key: '840a2ab80a6ff4691eb341157f8285f70310ec33', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '6f947d2327529ae23c4de691ea509b39ce5e2490', part: "message", class: "bs-snackbar__message" }, h("slot", { key: '4cde5846deeb26cfb4fa134e789b641c9674618d' }))), h("div", { key: 'f5c1cc73c36ddfd5feef19fbcc24668c407cbd3d', class: "bs-snackbar__actions" }, this.actionLabel && (h("button", { key: 'ae7b54aee03e21f0d770b6440a5ef0138f835be8', part: "action", type: "button", class: "bs-snackbar__action", onClick: this.onAction }, this.actionLabel)), h("button", { key: 'f689a78a40fbd268760e9624ed0f02ba3ac71b07', part: "close", type: "button", class: "bs-snackbar__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'e731694f295179bb1cf85111116e2bf8f5e83cb7' })))));
+        return (h("div", { key: 'c1eb9a40025848cfe32c54b699c767fd776106cd', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'eed7f9493d6b92033682b5be7704ceab16f68e39', class: "bs-snackbar__content" }, h("span", { key: 'd05b9efc5e1a641ec4f760e65fb6c7ce73986a96', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '63ed931a3f99d4606394380cee69ca8357aaefda', part: "message", class: "bs-snackbar__message" }, h("slot", { key: '103d0dbe2c62f95f49fec719ea4789736faa9968' }))), h("div", { key: 'aad9025a2d6d53dcbed35d787ab13209c428dbac', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: '2aa411a52c800a3861faf5e01c64e367ef34d3b3', part: "action", variant: ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), h("bs-icon-button", { key: '8a9d212a597c98c612c8f0245c510cc5c5b821be', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '0669382c520a2a9d71fa22ede719a9b90ba20b74' })))));
     }
     static get is() { return "bs-snackbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,8 +51,8 @@ export class BsSourceLink {
     };
     render() {
         const inner = [
-            h("span", { key: '6e0bde7df2c893933c6490a995e418a43de6454f', class: "bs-source-link__left" }, h("span", { key: '9724f21e43696b3a07daabd05a348eaee96cd082', class: "bs-source-link__filename-row" }, h("span", { key: '901c8a90c0707197d0ae5f5c053f2e197683c973', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'ca4ecd68ec7149bfe61830b3bd75a45e7086c165', name: "icon" }, h(FileTextIcon, { key: '656b72e726370c03b271e83397666be76544eb65' }))), h("p", { key: 'c20b0bc181548a81c57364b707afba77d535d62a', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: '3178845a3c16d2ffd5fc1942806851370d966290', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '6967d7fa214067d5e0d14123d287c4ce6cf40496', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: 'a58b3e8d2d8ef4a23c8d6155454ab5825fd737b5', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '1701393a524375eee95905308a9b8be1b9647bc8', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: 'a291c8de9d56e8b269660441930b4bf95977883f', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '90a1a20ee9f84e5e339fa2a11c59691f6f45759f' })),
+            h("span", { key: '8cff33c76d9d1d575c48f7088767f7d18b4d73a1', class: "bs-source-link__left" }, h("span", { key: 'aaa27ac4227afcd7b312b9576c625c54f3e603fe', class: "bs-source-link__filename-row" }, h("span", { key: '999466d6ed1910958f03328adcca796db65243ac', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '65f62019fc6c1b50999a568c54cd3ca00139ee59', name: "icon" }, h(FileTextIcon, { key: '7e3d61345cbbe78267440be6fc89773dc2e80a66' }))), h("p", { key: '8505506cc58f4253d472eed1b95625103031fcdc', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: '89803f29243068cf4f6725d728b299eddd960e8d', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '86e1936b8fc642817e60c6bbb3b52d4cb40c1987', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: 'c865f4b4004138a5b0aa8b730813d246f229edf4', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'a63eb0e9a935f7cd13bdc3b4beb6dcac1767092e', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: '403063bde49a647031683cdddfe9f9b3bd6cbe7e', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'e8f9b58ab3e9ad35239423f9fcef3426905af932' })),
         ];
         return this.href ? (h("a", { class: "bs-source-link", href: this.href, target: this.target, rel: "noopener noreferrer", onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "bs-source-link", onClick: this.onClick }, inner));
     }

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

@@ -61,7 +61,7 @@ export class BsStepper {
         });
     }
     render() {
-        return h("slot", { key: 'ce510c14afc31408f1a8b04a6ab6a6bc8480dd97', onSlotchange: this.onSlotChange });
+        return h("slot", { key: '02937ad4080ab9309a5a6a7d63d9e5ee9d15e75a', onSlotchange: this.onSlotChange });
     }
     static get is() { return "bs-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,7 +57,7 @@ export class BsStepperStep {
     }
     render() {
         const state = this.state;
-        return (h(Host, { key: '0885597069b454df03e0797e6fc3ec4bba3357b1', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: 'e5bf87615b06b2ffd35b18329a925171c45cbf4e', class: "bs-stepper-step__top" }, h("span", { key: 'e82c4b4d88769d9301a258f9f8ba10e75aac381d', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '61b0982711c74851add824ccb561f26711ed1162', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: 'f53ba1c507f79cac0ee4cde326c2a95580b95ea2' }), state === 'error' && h(ExclamationIcon, { key: '9671c46079a379711410c878cb520d915ff419b3' })), h("span", { key: 'af6ba4667e1237ff2ade9947a19ccea455aa1cb1', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '337b424d21fa9ad1c1289a314d1e4aee1d868e08', class: "bs-stepper-step__connector-line" }))), h("span", { key: '265d260e904153b4875fecd899affb5e16482e52', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '2402a6d04e7467ea9b14b86569093226253ce934', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: 'ed6b927749fb9b174bf481e862fc4109ca557e1a', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (h(Host, { key: 'f0c04f84a90573ee21e50a9f098539d94bf26624', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: 'a55763b9c34fedb267b1e748df5f533713752074', class: "bs-stepper-step__top" }, h("span", { key: '206ece8ec0ffa8d47409f8a26a2690ae952ee51d', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: 'a5fd7021163730fd8b58cbbdaec2f1f0a387fb88', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '83b594e1a10d83ffe3f9f49cae59334b9a8a55f2' }), state === 'error' && h(ExclamationIcon, { key: '5f033b26ae0a1e9f14d5a2b4f5f8491ab8e53e6b' })), h("span", { key: '958bf5f997011b76e0450ebdae678aa65bd6760f', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: 'a9bd18dd6358559fe9b9c05439e7f0be537a6792', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'e8b9b0e3ac81ed00ff443eeb40c26a99a7af3c0d', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'e4a675a45ee3202fb5c5ee010e25a77018b8ac5c', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '25551051646a9aefacf031f5921c57edf093426e', part: "description", class: "bs-stepper-step__description" }, this.description)))));
     }
     static get is() { return "bs-stepper-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -58,7 +58,7 @@ export class BsSwitch {
         const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: '8cc77a7334a032869209299197e49619d3ac6291', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '2d052950431ecd2ea7dfdfef8252ef2ec5bd2dc4', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'f3a7f7260a0f915e22eb32408495c4e114a9bcff', part: "track", class: trackClasses }, h("span", { key: '4c59c865cca27b3d7f068a2798a5901a43b1ef40', part: "knob", class: knobClasses })), h("span", { key: '807b245462b4b44f224beb892312f914625065e6', part: "label", class: "bs-switch__label" }, h("slot", { key: '056f758a35f0a9f5392561a6a47a3f8a65c9ffc7' }))));
+        return (h("label", { key: '4e0abb3231caa07b7218bc69745c822dfd9a66f2', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '04d56f220629b90573469b78070f2ecb420fae92', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'e4b06fc5c17edca3d4f60d0f378c9d0779167617', part: "track", class: trackClasses }, h("span", { key: 'ce10e1a250a06d8ec850fde56064d3d5e1b9ab68', part: "knob", class: knobClasses })), h("span", { key: '6d9514c041e18206029438680fd5093e4f5b29f5', part: "label", class: "bs-switch__label" }, h("slot", { key: '431bf8fd5581cda363eb0f2dac410b177ae7639d' }))));
     }
     static get is() { return "bs-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -86,7 +86,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: '7a3fe9444808cf379acdef7f06b0e6b07fb52ff0', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '39dbd2c9f65157efaa7a94b119d90c9251a3a4b7', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: 'a3f8079e25a29834beb3a477e5b9c29f9d474429', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'edf1472b4ac667300d24b2fb8c8fea9f51705492', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: 'a3500324e792e92c3f68a4144644a9a8916e1fb4', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: 'dbdf837d83a8c07e65b70f1eb6a3c8de6078214c', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '3e45469cbf9833177b8856f9d5fa061de9f14ce5', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: 'fe9714c3e47cd6e4a752514279a6d96b92650cf8', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '2c5543f2daa2800ffcb4e5f33137403102e40e74', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: 'f67133602a0c75af9263d5e56f9b5e2479cead4d', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-inline-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -99,7 +99,7 @@ export class BsTab {
         const iconOnly = this.hasIcon && !this.hasLabel;
         const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
         const showBadge = this.hasBadge && !iconOnly && !vertical;
-        return (h("button", { key: '582c9b12915fa85e4b05114e4c1d5a15ec9253d1', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'd2e55d29b23478056bb3f24a00ec1237fa9e0a9d', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '767704d1770a124686fa503c0ca19b651412c07f', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '8d4f45d058cbbd5bc64a03862048faaaa1effdf3', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '45805bbb18a4a8a39b01e1bc81a37a2b09449d3c', onSlotchange: this.onLabelSlotchange })), h("span", { key: '27a3379b320a5ac2f2a437c8ca980989cf5ed239', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '2bbd98cc2c68472a9399b3c5ff67ddbeae441949', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '3f75545064c2114483382e1ee65e23f5aad33ccd', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: '0ca426eb442e8ecd8a02d532eae0a7e0fa78e0c7', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '507e8d2f216142177aea162ae42ae56ce84f8759', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: 'ee418438e7f95362be5e5ed701d20d6fc0c300f4', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '5dca3c198272ba04422fcd30a27a020b735af804', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '1026142d478c46c75b27f6eceb984188ce4c28d1', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'a00349806770203091af571e480db67b68cf787f', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'fd1efee948e290272d9bdaca4c11ff6320c17c3e', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '14b2d3857f3b5273e3973c929b83756540c7bfa2', part: "indicator", class: "bs-tab__indicator" })));
     }
     static get is() { return "bs-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,7 +50,7 @@ export class BsTabs {
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (h("div", { key: 'a2e67e62af5aec684a0b79e06905e1d2dbc1d469', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '6b3b19d55ff342c65ef321e6556cf56701dc18a0' })));
+        return (h("div", { key: '9e9050a33459b5941af1440498780d67682d8273', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'd5987d7600183ef348855ac5d0af37e42f1aa9c2' })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class BsToast {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '601af8a97314bc7d5119f0e3d333bf7361253c82', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '3d497021797f520831a4ee896e1a17ccf980c5ce', class: "bs-toast__content" }, h("span", { key: 'c2c881ca3eef65884914f18b5dbed59f20067650', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '0b02a6e4ed1cc0421659cba0479b05ecb638749d', state: this.state })), h("span", { key: '138aedff518384bf0ee185711ba1b2194c71c8e3', part: "message", class: "bs-toast__message" }, h("slot", { key: 'd1e46ef85c2101904234fce982d1f45b8b799ddb' }))), h("div", { key: 'eeaa1695bb943483df6b2c1f91ea99aebf48587b', class: "bs-toast__actions" }, h("button", { key: '300a542e27c8c7c92a51cc25def8a82046fd2ad1', part: "close", type: "button", class: "bs-toast__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '547514944e5c0142f11eec104ac8fe3f161a8b62' })))));
+        return (h("div", { key: 'c2beb9820f201006fc992883a7c217dea3dd3195', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'e99f80f1082a725719f0161f5651624aba8c274b', class: "bs-toast__content" }, h("span", { key: 'dc9e372fe92087e78fabf701272c708e8d996aec', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: 'aeaac660f2ef24a350e85cb528f9ecbc4060190f', state: this.state })), h("span", { key: '3ab1414077f1cead1a6927ff9655a1be667a3a8f', part: "message", class: "bs-toast__message" }, h("slot", { key: '256f8e5941ff379ea829a3fc8f8e3f234583a7a3' }))), h("div", { key: '1e0eef65678280fa58f15d37fd7fc974c355b0e4', class: "bs-toast__actions" }, h("button", { key: '3e16a99f8afce3444213e90547ca2ac107edd986', part: "close", type: "button", class: "bs-toast__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '4177c2c53bca1b703a717241af3d7e845ef6ebaa' })))));
     }
     static get is() { return "bs-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class BsTooltip {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: '062ea3196a5a89090efda9c1740d797302b7e71a', class: "bs-tooltip" }, h("span", { key: 'ede20a2edfd834182b46d143d682cdd994ba74f3', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '05f0ead68e3e70c7ead8c7f0b275e5903ffb73ba', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '0af70f3d08a96110c684a570c03f758cb9388774' }))));
+        return (h("div", { key: 'dfceb9c019f507e3be9590d4ae642d86e89811b2', class: "bs-tooltip" }, h("span", { key: 'd361e87774fa906a4e2703cd8b7c2ab16ff624b9', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '21ab2fb2a83762f3f7a3d3f4b9094f2772ae5e7f', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: 'd64aaa1841796be2ccfc1ac7d55a67d37a8f7615' }))));
     }
     static get is() { return "bs-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.cmp.test.js

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+import { page } from "vitest/browser";
 describe('bs-navigation-drawer', () => {
     it('renders a <nav> landmark with the logo', async () => {
         const { root } = await render(h("bs-navigation-drawer", null));
@@ -109,6 +110,11 @@ describe('bs-navigation-drawer', () => {
             expect(searchClickSpy).toHaveReceivedEventTimes(1);
         });
         it('hides the search-trigger button when not collapsed', async () => {
+            // The default test viewport (414px) is inside this component's own <= 768px small-screen
+            // breakpoint (see bs-navigation-drawer.css), which forces the same visual treatment as
+            // `collapsed` regardless of the prop -- widen the viewport here so this test is isolated to
+            // the `collapsed` *prop*'s own behavior, not the viewport-driven treatment.
+            await page.viewport(1024, 768);
             const { root } = await render(h("bs-navigation-drawer", null));
             const trigger = root.shadowRoot.querySelector('[part="search-trigger"]');
             expect(getComputedStyle(trigger).display).toBe('none');

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.css

@@ -12,7 +12,10 @@
  *   rhythm) -- bumped up from the originally Figma-measured --bs-spacing-150 (12px) at the user's
  *   request after seeing it rendered (felt cramped in practice), not a Figma re-measurement.
  * @prop --bs-navigation-drawer-width: Default width of the drawer. 280px, matching Figma's own
- *   frame -- overridable by a consumer that needs a different fixed width.
+ *   frame -- overridable by a consumer that needs a different fixed width. Below a 768px viewport
+ *   width, this is overridden by a `@media (max-width: 768px)` rule that forces the existing
+ *   `collapsed` 96px icon-only rail treatment instead (see --bs-navigation-drawer-collapsed-width
+ *   below), so the drawer stops reserving a permanent 280px of layout width on small screens.
  * @prop --bs-navigation-drawer-title-font-family: Title text font family. Aliased to
  *   --bs-typography-font-family-heading.
  * @prop --bs-navigation-drawer-title-font-weight: Title text font weight. Aliased to
@@ -255,3 +258,42 @@
 .bs-navigation-drawer__items::-webkit-scrollbar {
   display: none;
 }
+
+/* Below 768px (a standard tablet/small-screen breakpoint, and the narrow end of this component's
+   normal tablet-and-up usage) a permanently-reserved 280px-wide drawer pushes page content down to
+   an unusably narrow remainder on real small-screen viewports (e.g. 390px). This library has no
+   existing width-based @media breakpoint convention to follow (grepping every other component's
+   CSS only turns up `@media (prefers-reduced-motion: reduce)`), so rather than inventing new
+   open/closed overlay API, this reuses the drawer's own existing `collapsed` 96px icon-only rail
+   treatment (see the `:host([collapsed])` rules above) and applies it unconditionally at this
+   width -- same rail, now driven by viewport instead of only by the `collapsed` prop/toggle. Placed
+   last in this file so it wins over the unscoped `.bs-navigation-drawer`/`__title`/etc. rules above
+   on specificity ties, regardless of whether `collapsed` happens to be reflected on the host. */
+@media (max-width: 768px) {
+  .bs-navigation-drawer {
+    width: var(--bs-navigation-drawer-collapsed-width);
+    padding-left: 0;
+    padding-right: 0;
+    align-items: center;
+  }
+
+  .bs-navigation-drawer__logo--full {
+    display: none;
+  }
+
+  .bs-navigation-drawer__logo--mark {
+    display: flex;
+  }
+
+  .bs-navigation-drawer__title {
+    display: none;
+  }
+
+  .bs-navigation-drawer__search {
+    display: none;
+  }
+
+  .bs-navigation-drawer__search-trigger {
+    display: inline-flex;
+  }
+}

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.js

@@ -117,7 +117,7 @@ export class BsNavigationDrawer {
         this.bsSearchClick.emit();
     };
     render() {
-        return (h("nav", { key: '5f9142beebc8a91756b5b081b8f5a1dec70cd0c4', class: "bs-navigation-drawer", "aria-label": this.heading }, this.showLogo && (h("div", { key: '5d09b42c51836937ff0abf74e82504a8bde1b6ff', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '3b4ada54adc5fcdceba8a78e502d2ed2b1f930b9', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: 'b59e5b16a7dbf6fbc5af144d8b4f1d70be68d060', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '4c3192c228124af2f8413852e151977d4ad2427e', variant: "mark", background: this.logoBackground }))), h("div", { key: 'f2d8da6abcc2b1108df1b82cb829573e450aacc9', class: "bs-navigation-drawer__title-row" }, h("span", { key: '11362835e58c41c5d4761218cf3b6fc1e902226f', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: 'a00926b34b406edde376ebf671f9fad790368c14', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: '77f3c08e3d4fae996c99d940cce50d8757cd4c64' })))), h("div", { key: '947e14756be1455fe223e4e5f2601f1be7bc8c52', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '79776006ffd5daa2b523c9827d8887abe2db0175', name: "search" })), h("button", { key: '427a7aa68d05f6d34d903ed93b2e1376e96a5fcb', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '28e2055df8fc91f43ed2df1e061d6e3b43538f31' })), h("div", { key: 'b569bd43632d530ea8b6d898b636460f4e8f9868', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: '62feb03ea99fd499dd864cb931ccd44371a76ea8' }))));
+        return (h("nav", { key: '2682adb685feb040ae0c7dd4cf772e3d27fb6cdb', class: "bs-navigation-drawer", "aria-label": this.heading }, this.showLogo && (h("div", { key: 'cebf3c545f4a7733c231f32a243aab8ea4e41b0b', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: 'c824c6b28effe67f51cedb9f5def01583cfede94', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: '92414de23c17f5db07fba6e4e5d8ff2e2b69871b', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '7562863099e31061446101cf457499e93ba927fa', variant: "mark", background: this.logoBackground }))), h("div", { key: 'b53d86be5dac1611022bec53b2cf6a541e5f0d46', class: "bs-navigation-drawer__title-row" }, h("span", { key: '8d8ec8b76fc54fc69b6d4b0660fc6d0c26f44799', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: '10bd90b98b1ba17636542a48792cc8a1e399b2ce', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: '51c56d5f775611f8f833ccac876a9c153fa10215' })))), h("div", { key: '96d15b3514951553c3d7c769e3f457789aab300a', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '823a85d63fe011729a17df2264a2f04b2d376d72', name: "search" })), h("button", { key: '50198e1efe259e142c70a9fd1e132deabd23c81c', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: 'aea08baafa57881baecacf415bf477d8eb7352aa' })), h("div", { key: 'c0e5816d6e0b0dc7a627672218fde6782e3dfe93', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: 'edb424c5e52a3500a0c85453349bf4369ea1a87e' }))));
     }
     static get is() { return "bs-navigation-drawer"; }
     static get encapsulation() { return "shadow"; }