@brandsync/wc 1.8.0 → 1.9.0

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

@@ -7,6 +7,7 @@ const bsTabsCss = () => `:host{display:inline-block;--bs-tabs-tab-gap:var(--bs-s
 const BsTabs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.bsChange = index.createEvent(this, "bsChange");
     }
     get el() { return index.getElement(this); }
     /** Which tab-button family this group wraps. Governs the wrapper's own visual treatment (gap-only
@@ -16,6 +17,16 @@ const BsTabs = class {
     /** Layout direction of the tab bar itself. Sets `aria-orientation` on the internal wrapper and
      * switches `flex-direction`. */
     orientation = 'horizontal';
+    /** The selected tab's `value`. Mutable and reflected: it follows the user's selection, and
+     * setting it from outside (attribute or property) selects the matching tab -- without emitting
+     * `bsChange`, which only fires for user-driven changes. A tab's value is its own `value` prop,
+     * or, for a tab without one, its zero-based position in the group as a string (`"0"`, `"1"`...).
+     * If unset, it is read from whichever tab is already `selected` once the group loads. */
+    value;
+    /** Fires when the user selects a different tab (click, or arrow/Home/End), with the new
+     * `value`. Does not fire when `value` is set programmatically. `bsSelect` on the individual tab
+     * still fires as before. */
+    bsChange;
     /**
      * Catches `bsSelect` bubbling up from any slotted `<bs-tab>`/`<bs-inline-tab>` (Stencil's
      * `@Event()` defaults to `bubbles: true, composed: true`, and `@Listen` without a target listens
@@ -24,15 +35,46 @@ const BsTabs = class {
      * `if (this.disabled) return;`), so no special-casing is needed here.
      */
     onTabSelect(ev) {
-        const tabs = this.el.querySelectorAll(':scope > bs-tab, :scope > bs-inline-tab');
+        const tabs = this.tabs();
         tabs.forEach(tab => {
             tab.selected = tab === ev.target;
         });
         this.syncRovingTabindex();
+        const index = tabs.findIndex(tab => tab === ev.target);
+        if (index === -1)
+            return;
+        const value = this.tabValue(tabs[index], index);
+        if (value !== this.value) {
+            this.value = value;
+            this.bsChange.emit({ value });
+        }
     }
     componentDidLoad() {
+        if (this.value !== undefined) {
+            this.applyValue();
+        }
+        else {
+            // Uncontrolled: report whichever tab the consumer already marked `selected`.
+            const tabs = this.tabs();
+            const index = tabs.findIndex(t => t.selected);
+            if (index !== -1)
+                this.value = this.tabValue(tabs[index], index);
+        }
         this.syncRovingTabindex();
     }
+    tabValue(tab, index) {
+        return tab.value ?? String(index);
+    }
+    /** Selects the tab whose value matches `this.value` (and deselects the rest). */
+    applyValue() {
+        this.tabs().forEach((tab, i) => {
+            tab.selected = this.tabValue(tab, i) === this.value;
+        });
+        this.syncRovingTabindex();
+    }
+    onValueChange() {
+        this.applyValue();
+    }
     syncRovingTabindex() {
         const tabs = this.tabs();
         const anySelected = tabs.some(t => t.selected);
@@ -75,9 +117,12 @@ const BsTabs = class {
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (index.h("div", { key: '81b3b46d54d4acc074b0c59d0da5e3e971e7b62e', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, index.h("slot", { key: 'ba296a99062629de3e331cd7de1ebc41548c77f9', onSlotchange: () => this.syncRovingTabindex() })));
+        return (index.h("div", { key: '251521d36dcf4d6960df344285bc9a060ff87abb', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, index.h("slot", { key: '02216f048eaedb13f00891c30e1c49d15a509c1d', onSlotchange: () => this.syncRovingTabindex() })));
     }
     static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }],
         "orientation": [{
                 "syncRovingTabindex": 0
             }]

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ var index = require('./index-kk9YXF2S.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["bs-carousel.cjs",[[769,"bs-carousel",{"tracker":[1],"slidesPerView":[2,"slides-per-view"],"currentPage":[1538,"current-page"],"autoplay":[4],"interval":[2],"paused":[1540],"label":[1],"previousLabel":[1,"previous-label"],"nextLabel":[1,"next-label"],"pauseLabel":[1,"pause-label"],"playLabel":[1,"play-label"],"slideCount":[32],"interacting":[32]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"],[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"]],{"currentPage":[{"onCurrentPageChange":0}],"autoplay":[{"updateTimer":0}],"paused":[{"updateTimer":0}],"interval":[{"updateTimer":0}],"interacting":[{"updateTimer":0}],"slideCount":[{"updateTimer":0}],"slidesPerView":[{"updateTimer":0}]}]]],["bs-file-upload-item.cjs",[[769,"bs-file-upload-item",{"state":[513],"fileName":[1,"file-name"],"fileSize":[1,"file-size"],"progress":[2],"message":[1],"thumbnailSrc":[1,"thumbnail-src"],"thumbnailAlt":[1,"thumbnail-alt"],"cancelLabel":[1,"cancel-label"],"removeLabel":[1,"remove-label"]}]]],["bs-input.cjs",[[849,"bs-input",{"name":[513],"value":[1025],"type":[1],"label":[1],"placeholder":[1],"description":[1],"error":[1],"disabled":[516],"required":[4],"step":[2],"min":[2],"max":[2],"options":[16],"rows":[2],"chips":[16],"titleOptions":[16],"initialsTitle":[1,"initials-title"],"countryOptions":[16],"country":[1],"length":[2],"open":[1540],"hasIcon":[32],"hasEndIcon":[32],"passwordVisible":[32],"chipDraft":[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]],{"value":[{"onFormStateChange":0}],"type":[{"onFormStateChange":0}],"chips":[{"onFormStateChange":0}],"required":[{"onFormStateChange":0}]}]]],["bs-snackbar.cjs",[[769,"bs-snackbar",{"variant":[1],"loading":[4],"actionLabel":[1,"action-label"]}]]],["bs-attachment.cjs",[[513,"bs-attachment",{"type":[1],"fileName":[1,"file-name"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"loading":[4],"removable":[4]}]]],["bs-breadcrumb-overflow.cjs",[[513,"bs-breadcrumb-overflow",{"items":[16],"overflowLabel":[1,"overflow-label"],"size":[513],"open":[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]]]]],["bs-chatbot-header.cjs",[[769,"bs-chatbot-header",{"heading":[1],"expanded":[1540]}]]],["bs-dialog.cjs",[[769,"bs-dialog",{"open":[1540],"heading":[1],"size":[1],"centered":[516],"hasFooter":[32],"hasImage":[32],"hasIcon":[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]],["bs-file-upload.cjs",[[769,"bs-file-upload",{"direction":[513],"heading":[1],"description":[1],"buttonLabel":[1,"button-label"],"accept":[1],"multiple":[4],"disabled":[516],"dragging":[1540]}]]],["bs-navigation-drawer.cjs",[[769,"bs-navigation-drawer",{"heading":[1],"collapsible":[4],"collapsed":[1540],"logoBackground":[1,"logo-background"],"showLogo":[4,"show-logo"]},null,{"collapsed":[{"onCollapsedChange":0}]}]]],["bs-navigation-header.cjs",[[769,"bs-navigation-header",{"alignment":[1],"ariaLabel":[1,"aria-label"],"skipToContentHref":[1,"skip-to-content-href"],"skipToContentLabel":[1,"skip-to-content-label"],"logoBackground":[1,"logo-background"]}]]],["bs-accordion.cjs",[[769,"bs-accordion",{"expanded":[516],"size":[1],"disabled":[4],"showIcon":[4,"show-icon"],"showPreview":[4,"show-preview"]}]]],["bs-ai-disclaimer.cjs",[[257,"bs-ai-disclaimer"]]],["bs-ai-greeting.cjs",[[513,"bs-ai-greeting",{"assistantName":[1,"assistant-name"],"productName":[1,"product-name"]}]]],["bs-ai-thinking.cjs",[[513,"bs-ai-thinking",{"label":[1]}]]],["bs-attachment-list.cjs",[[769,"bs-attachment-list",{"ariaLabel":[1,"aria-label"],"canScrollRight":[32]}]]],["bs-avatar.cjs",[[513,"bs-avatar",{"type":[1],"size":[1],"initials":[1],"src":[1],"alt":[1],"ariaLabel":[1,"aria-label"],"disabled":[516]}]]],["bs-badge.cjs",[[769,"bs-badge",{"variant":[1]}]]],["bs-breadcrumb.cjs",[[769,"bs-breadcrumb",{"href":[1],"current":[516],"size":[513]}]]],["bs-breadcrumbs.cjs",[[769,"bs-breadcrumbs",{"label":[1],"size":[1]},null,{"size":[{"onSizeChange":0}]}]]],["bs-button-skeleton.cjs",[[513,"bs-button-skeleton",{"size":[1]}]]],["bs-card.cjs",[[769,"bs-card",{"surface":[1],"hasImage":[32]}]]],["bs-chatbot-feedback.cjs",[[513,"bs-chatbot-feedback",{"rating":[1538],"submitted":[1540],"comment":[1025],"heading":[1],"subtitle":[1]}]]],["bs-chatbot-response-action.cjs",[[769,"bs-chatbot-response-action",{"sourcesCount":[2,"sources-count"],"menuOpen":[1540,"menu-open"]},[[4,"click","onDocumentClick"],[4,"keydown","onKeydown"]]]]],["bs-chatbot-sources-drawer.cjs",[[769,"bs-chatbot-sources-drawer",{"heading":[1],"count":[2],"slottedCount":[32]}]]],["bs-chatbot-suggestion-button.cjs",[[769,"bs-chatbot-suggestion-button",{"disabled":[4]}]]],["bs-checkbox.cjs",[[849,"bs-checkbox",{"name":[513],"value":[1],"required":[4],"size":[1],"checked":[1540],"indeterminate":[1540],"disabled":[516],"error":[4],"ariaLabel":[1,"aria-label"]},null,{"checked":[{"syncFormValue":0}],"value":[{"syncFormValue":0}],"required":[{"syncFormValue":0}],"indeterminate":[{"onIndeterminateChange":0}]}]]],["bs-checkbox-skeleton.cjs",[[513,"bs-checkbox-skeleton",{"size":[1]}]]],["bs-chip-filter.cjs",[[785,"bs-chip-filter",{"size":[1],"selected":[516],"dropdown":[4],"disabled":[4],"ariaLabel":[1,"aria-label"],"hasIcon":[32]}]]],["bs-chip-informative.cjs",[[769,"bs-chip-informative",{"color":[1],"size":[1],"disabled":[516],"hasIcon":[32]}]]],["bs-chip-input.cjs",[[785,"bs-chip-input",{"size":[1],"selected":[1540],"disabled":[516],"hasIcon":[32],"labelText":[32]}]]],["bs-composer.cjs",[[785,"bs-composer",{"variant":[1],"placeholder":[1],"value":[1025],"state":[513],"ariaLabel":[1,"aria-label"],"hasAttachments":[32]}]]],["bs-composer-status-banner.cjs",[[769,"bs-composer-status-banner",{"type":[1],"message":[1],"showIcon":[4,"show-icon"],"showButton":[4,"show-button"],"actionLabel":[1,"action-label"],"allowClose":[4,"allow-close"]}]]],["bs-data-table.cjs",[[513,"bs-data-table",{"columns":[16],"rows":[16],"sortColumn":[1,"sort-column"],"sortDirection":[1,"sort-direction"],"selectable":[4],"cellRenderer":[16],"selectedIds":[32],"clearSelection":[64]}]]],["bs-inline-tab.cjs",[[769,"bs-inline-tab",{"selected":[516],"disabled":[4],"ariaLabel":[1,"aria-label"],"tabbable":[4],"hasIcon":[32],"hasLabel":[32]}]]],["bs-navigation-drawer-item.cjs",[[769,"bs-navigation-drawer-item",{"selected":[516],"expandable":[4],"expanded":[1540],"nested":[4],"ariaLabel":[1,"aria-label"],"collapsed":[516],"hasIcon":[32]}]]],["bs-progress.cjs",[[513,"bs-progress",{"type":[1],"size":[1],"strokeWidth":[2,"stroke-width"],"value":[2],"showLabel":[4,"show-label"],"ariaLabel":[1,"aria-label"]}]]],["bs-radio.cjs",[[849,"bs-radio",{"name":[513],"value":[1],"checked":[1540],"disabled":[516],"groupHasChecked":[32]},[[4,"bsChange","onAnyRadioChange"]],{"checked":[{"onCheckedChange":0}],"value":[{"onCheckedChange":0}]}]]],["bs-slider.cjs",[[593,"bs-slider",{"type":[1],"name":[513],"showLabel":[4,"show-label"],"label":[1],"min":[2],"max":[2],"step":[2],"value":[1026],"valueStart":[1026,"value-start"],"valueEnd":[1026,"value-end"],"segments":[2],"disabled":[516],"ariaLabel":[1,"aria-label"]},null,{"value":[{"syncFormValue":0}],"valueStart":[{"syncFormValue":0}],"valueEnd":[{"syncFormValue":0}],"type":[{"syncFormValue":0}]}]]],["bs-source-link.cjs",[[769,"bs-source-link",{"fileName":[1,"file-name"],"sourceName":[1,"source-name"],"version":[1],"href":[1],"target":[1]}]]],["bs-stepper.cjs",[[769,"bs-stepper",{"currentStep":[2,"current-step"],"direction":[513],"showDescription":[4,"show-description"]},null,{"currentStep":[{"onPropChange":0}],"direction":[{"onPropChange":0}],"showDescription":[{"onPropChange":0}]}]]],["bs-stepper-step.cjs",[[513,"bs-stepper-step",{"name":[1],"description":[1],"error":[4],"disabled":[4],"computedState":[1,"computed-state"],"direction":[1],"showDescription":[4,"show-description"]}]]],["bs-switch.cjs",[[849,"bs-switch",{"name":[513],"value":[1],"size":[1],"checked":[1540],"disabled":[516],"ariaLabel":[1,"aria-label"]},null,{"checked":[{"syncFormValue":0}],"value":[{"syncFormValue":0}]}]]],["bs-tab.cjs",[[769,"bs-tab",{"selected":[516],"disabled":[4],"iconPosition":[1,"icon-position"],"ariaLabel":[1,"aria-label"],"tabbable":[4],"hasIcon":[32],"hasLabel":[32],"hasBadge":[32]}]]],["bs-tabs.cjs",[[769,"bs-tabs",{"type":[1],"orientation":[1]},[[0,"bsSelect","onTabSelect"],[0,"keydown","onKeyDown"]],{"orientation":[{"syncRovingTabindex":0}]}]]],["bs-toast.cjs",[[769,"bs-toast",{"state":[1]}]]],["bs-menu-item.cjs",[[769,"bs-menu-item",{"disabled":[4],"hasIcon":[32]}]]],["bs-pagination.cjs",[[513,"bs-pagination",{"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"],"siblingCount":[2,"sibling-count"],"previousLabel":[1,"previous-label"],"nextLabel":[1,"next-label"]}]]],["bs-progress-linear.cjs",[[769,"bs-progress-linear",{"type":[1],"size":[1],"value":[2],"showLabel":[4,"show-label"],"ariaLabel":[1,"aria-label"],"hasLabelContent":[32]}]]],["bs-tooltip.cjs",[[769,"bs-tooltip",{"placement":[1]}]]],["bs-logo.cjs",[[513,"bs-logo",{"variant":[1],"background":[1],"src":[1],"alt":[1]}]]],["bs-menu.cjs",[[257,"bs-menu",null,[[0,"keydown","onKeyDown"]]]]],["bs-button.cjs",[[849,"bs-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasEndIcon":[32],"hasLabel":[32]}]]],["bs-icon-button.cjs",[[849,"bs-icon-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]]], options);
+  return index.bootstrapLazy([["bs-carousel.cjs",[[769,"bs-carousel",{"tracker":[1],"slidesPerView":[2,"slides-per-view"],"currentPage":[1538,"current-page"],"autoplay":[4],"interval":[2],"paused":[1540],"label":[1],"previousLabel":[1,"previous-label"],"nextLabel":[1,"next-label"],"pauseLabel":[1,"pause-label"],"playLabel":[1,"play-label"],"slideCount":[32],"interacting":[32]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"],[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"]],{"currentPage":[{"onCurrentPageChange":0}],"autoplay":[{"updateTimer":0}],"paused":[{"updateTimer":0}],"interval":[{"updateTimer":0}],"interacting":[{"updateTimer":0}],"slideCount":[{"updateTimer":0}],"slidesPerView":[{"updateTimer":0}]}]]],["bs-file-upload-item.cjs",[[769,"bs-file-upload-item",{"state":[513],"fileName":[1,"file-name"],"fileSize":[1,"file-size"],"progress":[2],"message":[1],"thumbnailSrc":[1,"thumbnail-src"],"thumbnailAlt":[1,"thumbnail-alt"],"cancelLabel":[1,"cancel-label"],"removeLabel":[1,"remove-label"]}]]],["bs-input.cjs",[[849,"bs-input",{"name":[513],"value":[1025],"type":[1],"label":[1],"placeholder":[1],"description":[1],"error":[1],"disabled":[516],"required":[4],"step":[2],"min":[2],"max":[2],"options":[16],"rows":[2],"chips":[16],"titleOptions":[16],"initialsTitle":[1,"initials-title"],"countryOptions":[16],"country":[1],"length":[2],"open":[1540],"hasIcon":[32],"hasEndIcon":[32],"passwordVisible":[32],"chipDraft":[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]],{"value":[{"onFormStateChange":0}],"type":[{"onFormStateChange":0}],"chips":[{"onFormStateChange":0}],"required":[{"onFormStateChange":0}]}]]],["bs-snackbar.cjs",[[769,"bs-snackbar",{"variant":[1],"loading":[4],"actionLabel":[1,"action-label"]}]]],["bs-attachment.cjs",[[513,"bs-attachment",{"type":[1],"fileName":[1,"file-name"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"loading":[4],"removable":[4]}]]],["bs-breadcrumb-overflow.cjs",[[513,"bs-breadcrumb-overflow",{"items":[16],"overflowLabel":[1,"overflow-label"],"size":[513],"open":[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]]]]],["bs-chatbot-header.cjs",[[769,"bs-chatbot-header",{"heading":[1],"expanded":[1540]}]]],["bs-dialog.cjs",[[769,"bs-dialog",{"open":[1540],"heading":[1],"size":[1],"centered":[516],"hasFooter":[32],"hasImage":[32],"hasIcon":[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]],["bs-file-upload.cjs",[[769,"bs-file-upload",{"direction":[513],"heading":[1],"description":[1],"buttonLabel":[1,"button-label"],"accept":[1],"multiple":[4],"disabled":[516],"dragging":[1540]}]]],["bs-navigation-drawer.cjs",[[769,"bs-navigation-drawer",{"heading":[1],"collapsible":[4],"collapsed":[1540],"logoBackground":[1,"logo-background"],"showLogo":[4,"show-logo"],"open":[1540],"mobile":[32]},[[4,"keydown","onDocumentKeydown"],[4,"focusin","onDocumentFocusIn"]],{"collapsed":[{"onCollapsedChange":0}],"mobile":[{"onMobileChange":0}],"open":[{"onOpenChange":0}]}]]],["bs-navigation-header.cjs",[[769,"bs-navigation-header",{"alignment":[1],"ariaLabel":[1,"aria-label"],"skipToContentHref":[1,"skip-to-content-href"],"skipToContentLabel":[1,"skip-to-content-label"],"logoBackground":[1,"logo-background"]}]]],["bs-accordion.cjs",[[769,"bs-accordion",{"expanded":[516],"size":[1],"disabled":[4],"showIcon":[4,"show-icon"],"showPreview":[4,"show-preview"]}]]],["bs-ai-disclaimer.cjs",[[257,"bs-ai-disclaimer"]]],["bs-ai-greeting.cjs",[[513,"bs-ai-greeting",{"assistantName":[1,"assistant-name"],"productName":[1,"product-name"]}]]],["bs-ai-thinking.cjs",[[513,"bs-ai-thinking",{"label":[1]}]]],["bs-attachment-list.cjs",[[769,"bs-attachment-list",{"ariaLabel":[1,"aria-label"],"canScrollRight":[32]}]]],["bs-avatar.cjs",[[513,"bs-avatar",{"type":[1],"size":[1],"initials":[1],"src":[1],"alt":[1],"ariaLabel":[1,"aria-label"],"disabled":[516]}]]],["bs-badge.cjs",[[769,"bs-badge",{"variant":[1]}]]],["bs-breadcrumb.cjs",[[769,"bs-breadcrumb",{"href":[1],"current":[516],"size":[513]}]]],["bs-breadcrumbs.cjs",[[769,"bs-breadcrumbs",{"label":[1],"size":[1]},null,{"size":[{"onSizeChange":0}]}]]],["bs-button-skeleton.cjs",[[513,"bs-button-skeleton",{"size":[1]}]]],["bs-card.cjs",[[769,"bs-card",{"surface":[1],"hasImage":[32]}]]],["bs-chatbot-feedback.cjs",[[513,"bs-chatbot-feedback",{"rating":[1538],"submitted":[1540],"comment":[1025],"heading":[1],"subtitle":[1]}]]],["bs-chatbot-response-action.cjs",[[769,"bs-chatbot-response-action",{"sourcesCount":[2,"sources-count"],"menuOpen":[1540,"menu-open"]},[[4,"click","onDocumentClick"],[4,"keydown","onKeydown"]]]]],["bs-chatbot-sources-drawer.cjs",[[769,"bs-chatbot-sources-drawer",{"heading":[1],"count":[2],"slottedCount":[32]}]]],["bs-chatbot-suggestion-button.cjs",[[769,"bs-chatbot-suggestion-button",{"disabled":[4]}]]],["bs-checkbox.cjs",[[849,"bs-checkbox",{"name":[513],"value":[1],"required":[4],"size":[1],"checked":[1540],"indeterminate":[1540],"disabled":[516],"error":[4],"ariaLabel":[1,"aria-label"]},null,{"checked":[{"syncFormValue":0}],"value":[{"syncFormValue":0}],"required":[{"syncFormValue":0}],"indeterminate":[{"onIndeterminateChange":0}]}]]],["bs-checkbox-skeleton.cjs",[[513,"bs-checkbox-skeleton",{"size":[1]}]]],["bs-chip-filter.cjs",[[785,"bs-chip-filter",{"size":[1],"selected":[516],"dropdown":[4],"disabled":[4],"ariaLabel":[1,"aria-label"],"hasIcon":[32]}]]],["bs-chip-informative.cjs",[[769,"bs-chip-informative",{"color":[1],"size":[1],"disabled":[516],"hasIcon":[32]}]]],["bs-chip-input.cjs",[[785,"bs-chip-input",{"size":[1],"selected":[1540],"disabled":[516],"hasIcon":[32],"labelText":[32]}]]],["bs-composer.cjs",[[785,"bs-composer",{"variant":[1],"placeholder":[1],"value":[1025],"state":[513],"ariaLabel":[1,"aria-label"],"hasAttachments":[32]}]]],["bs-composer-status-banner.cjs",[[769,"bs-composer-status-banner",{"type":[1],"message":[1],"showIcon":[4,"show-icon"],"showButton":[4,"show-button"],"actionLabel":[1,"action-label"],"allowClose":[4,"allow-close"]}]]],["bs-data-table.cjs",[[513,"bs-data-table",{"columns":[16],"rows":[16],"sortColumn":[1,"sort-column"],"sortDirection":[1,"sort-direction"],"selectable":[4],"cellRenderer":[16],"selectedIds":[32],"clearSelection":[64]}]]],["bs-inline-tab.cjs",[[769,"bs-inline-tab",{"selected":[516],"disabled":[4],"ariaLabel":[1,"aria-label"],"value":[513],"tabbable":[4],"hasIcon":[32],"hasLabel":[32]}]]],["bs-navigation-drawer-item.cjs",[[769,"bs-navigation-drawer-item",{"selected":[516],"expandable":[4],"expanded":[1540],"nested":[4],"ariaLabel":[1,"aria-label"],"collapsed":[516],"hasIcon":[32]}]]],["bs-progress.cjs",[[513,"bs-progress",{"type":[1],"size":[1],"strokeWidth":[2,"stroke-width"],"value":[2],"showLabel":[4,"show-label"],"ariaLabel":[1,"aria-label"]}]]],["bs-radio.cjs",[[849,"bs-radio",{"name":[513],"value":[1],"checked":[1540],"disabled":[516],"groupHasChecked":[32]},[[4,"bsChange","onAnyRadioChange"]],{"checked":[{"onCheckedChange":0}],"value":[{"onCheckedChange":0}]}]]],["bs-slider.cjs",[[593,"bs-slider",{"type":[1],"name":[513],"showLabel":[4,"show-label"],"label":[1],"min":[2],"max":[2],"step":[2],"value":[1026],"valueStart":[1026,"value-start"],"valueEnd":[1026,"value-end"],"segments":[2],"disabled":[516],"ariaLabel":[1,"aria-label"]},null,{"value":[{"syncFormValue":0}],"valueStart":[{"syncFormValue":0}],"valueEnd":[{"syncFormValue":0}],"type":[{"syncFormValue":0}]}]]],["bs-source-link.cjs",[[769,"bs-source-link",{"fileName":[1,"file-name"],"sourceName":[1,"source-name"],"version":[1],"href":[1],"target":[1]}]]],["bs-stepper.cjs",[[769,"bs-stepper",{"currentStep":[2,"current-step"],"direction":[513],"showDescription":[4,"show-description"]},null,{"currentStep":[{"onPropChange":0}],"direction":[{"onPropChange":0}],"showDescription":[{"onPropChange":0}]}]]],["bs-stepper-step.cjs",[[513,"bs-stepper-step",{"name":[1],"description":[1],"error":[4],"disabled":[4],"computedState":[1,"computed-state"],"direction":[1],"showDescription":[4,"show-description"]}]]],["bs-switch.cjs",[[849,"bs-switch",{"name":[513],"value":[1],"size":[1],"checked":[1540],"disabled":[516],"ariaLabel":[1,"aria-label"]},null,{"checked":[{"syncFormValue":0}],"value":[{"syncFormValue":0}]}]]],["bs-tab.cjs",[[769,"bs-tab",{"selected":[516],"disabled":[4],"iconPosition":[1,"icon-position"],"ariaLabel":[1,"aria-label"],"value":[513],"tabbable":[4],"hasIcon":[32],"hasLabel":[32],"hasBadge":[32]}]]],["bs-tabs.cjs",[[769,"bs-tabs",{"type":[1],"orientation":[1],"value":[1537]},[[0,"bsSelect","onTabSelect"],[0,"keydown","onKeyDown"]],{"value":[{"onValueChange":0}],"orientation":[{"syncRovingTabindex":0}]}]]],["bs-toast.cjs",[[769,"bs-toast",{"state":[1]}]]],["bs-menu-item.cjs",[[769,"bs-menu-item",{"disabled":[4],"hasIcon":[32]}]]],["bs-pagination.cjs",[[513,"bs-pagination",{"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"],"siblingCount":[2,"sibling-count"],"previousLabel":[1,"previous-label"],"nextLabel":[1,"next-label"]}]]],["bs-progress-linear.cjs",[[769,"bs-progress-linear",{"type":[1],"size":[1],"value":[2],"showLabel":[4,"show-label"],"ariaLabel":[1,"aria-label"],"hasLabelContent":[32]}]]],["bs-tooltip.cjs",[[769,"bs-tooltip",{"placement":[1]}]]],["bs-logo.cjs",[[513,"bs-logo",{"variant":[1],"background":[1],"src":[1],"alt":[1]}]]],["bs-menu.cjs",[[257,"bs-menu",null,[[0,"keydown","onKeyDown"]]]]],["bs-button.cjs",[[849,"bs-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasEndIcon":[32],"hasLabel":[32]}]]],["bs-icon-button.cjs",[[849,"bs-icon-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -59,4 +59,67 @@ describe('bs-breadcrumb', () => {
             expect(smFontSize).not.toBe(mdFontSize);
         });
     });
+    describe('bsNavigate', () => {
+        // Dispatches a synthetic click and reports whether the component's own handlers (or a consumer's
+        // bsNavigate listener) prevented it. A window-level guard then blocks the native navigation in
+        // every case -- an un-prevented click on an <a> really navigates the test page, which the test
+        // runner's frame does not survive.
+        const click = (el, init = {}) => {
+            const ev = new MouseEvent('click', { bubbles: true, cancelable: true, composed: true, button: 0, ...init });
+            let prevented = false;
+            const guard = (e) => {
+                prevented = e.defaultPrevented;
+                e.preventDefault();
+            };
+            window.addEventListener('click', guard, { once: true });
+            el.dispatchEvent(ev);
+            window.removeEventListener('click', guard);
+            return { prevented };
+        };
+        const link = (root) => root.shadowRoot.querySelector('a');
+        it('a plain click emits bsNavigate with the href, as a cancelable event', async () => {
+            const { root, spyOnEvent } = await render(h("bs-breadcrumb", { href: "#crumb-a" }, "Home"));
+            const spy = spyOnEvent('bsNavigate');
+            click(link(root));
+            expect(spy).toHaveReceivedEventTimes(1);
+            expect(spy).toHaveReceivedEventDetail({ href: '#crumb-a' });
+            expect(spy.lastEvent.cancelable).toBe(true);
+        });
+        it('without a listener the native navigation still happens (click is not prevented)', async () => {
+            const { root } = await render(h("bs-breadcrumb", { href: "#crumb-b" }, "Home"));
+            expect(click(link(root)).prevented).toBe(false);
+        });
+        it('preventDefault() in a bsNavigate listener cancels the native navigation', async () => {
+            const { root } = await render(h("bs-breadcrumb", { href: "#crumb-c" }, "Home"));
+            root.addEventListener('bsNavigate', e => e.preventDefault());
+            expect(click(link(root)).prevented).toBe(true);
+        });
+        for (const [name, init] of [
+            ['ctrl', { ctrlKey: true }],
+            ['meta', { metaKey: true }],
+            ['shift', { shiftKey: true }],
+            ['alt', { altKey: true }],
+            ['middle button', { button: 1 }],
+        ]) {
+            it(`a ${name}-click does not emit bsNavigate (left to the browser)`, async () => {
+                const { root, spyOnEvent } = await render(h("bs-breadcrumb", { href: "#crumb-d" }, "Home"));
+                const spy = spyOnEvent('bsNavigate');
+                click(link(root), init);
+                expect(spy).not.toHaveReceivedEvent();
+            });
+        }
+        it('bubbles to the surrounding <bs-breadcrumbs>, so one listener covers every crumb', async () => {
+            const { root } = await render(h("bs-breadcrumbs", null, h("bs-breadcrumb", { href: "#one" }, "One"), h("bs-breadcrumb", { href: "#two" }, "Two")));
+            const seen = [];
+            root.addEventListener('bsNavigate', (e) => seen.push(e.detail.href));
+            const crumbs = root.querySelectorAll('bs-breadcrumb');
+            click(link(crumbs[0]));
+            click(link(crumbs[1]));
+            expect(seen).toEqual(['#one', '#two']);
+        });
+        it('the current crumb is never a link, so it never emits', async () => {
+            const { root } = await render(h("bs-breadcrumb", { current: true, href: "#now" }, "Now"));
+            expect(root.shadowRoot.querySelector('a')).toBeNull();
+        });
+    });
 });

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

@@ -42,8 +42,21 @@ export class BsBreadcrumb {
      * size is unchanged, since Figma didn't specify a `sm` icon size and guessing one risked drifting
      * off-brand. Reflected so consumers/CSS can target `bs-breadcrumb[size="sm"]`. */
     size = 'md';
+    /** Fires when the crumb's link is clicked, before the browser navigates. **Cancelable**: call
+     * `event.preventDefault()` to stop the native navigation and route it yourself (an SPA router).
+     * Detail is `{ href }`. Only a plain primary-button click emits it -- ctrl/cmd/shift/alt-clicks
+     * and middle-clicks (open in a new tab/window) are left to the browser. Bubbles and is composed,
+     * so one listener on the surrounding `<bs-breadcrumbs>` covers every crumb. */
+    bsNavigate;
+    onLinkClick = (ev) => {
+        if (ev.defaultPrevented || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey)
+            return;
+        const navigate = this.bsNavigate.emit({ href: this.href });
+        if (navigate.defaultPrevented)
+            ev.preventDefault();
+    };
     render() {
-        return (h(Host, { key: 'f9c93eed4d4844e03cdfc50c9efbee238c188257', role: "listitem" }, h("span", { key: 'e0f26700582662cd4269bd786a9c81fd8031716e', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '77e8ed02ffd367e9b7ca39869ab41a95759450e4' })), this.current ? (h("span", { part: "current", class: "bs-breadcrumb__current", "aria-current": "page" }, h("slot", null))) : this.href ? (h("a", { part: "link", class: "bs-breadcrumb__link", href: this.href }, h("slot", null))) : (h("span", { part: "link", class: "bs-breadcrumb__link" }, h("slot", null)))));
+        return (h(Host, { key: '92b78d6b9eeb98420ed6a42496d632d4d437ea78', role: "listitem" }, h("span", { key: '0fbd23cacfecc6b5ea75c250d65875a1087913f7', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '2799c66de6d3291622bd3dea39e4c1f7f97a1bc9' })), this.current ? (h("span", { part: "current", class: "bs-breadcrumb__current", "aria-current": "page" }, h("slot", null))) : this.href ? (h("a", { part: "link", class: "bs-breadcrumb__link", href: this.href, onClick: this.onLinkClick }, h("slot", null))) : (h("span", { part: "link", class: "bs-breadcrumb__link" }, h("slot", null)))));
     }
     static get is() { return "bs-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
@@ -126,5 +139,23 @@ export class BsBreadcrumb {
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "bsNavigate",
+                "name": "bsNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the crumb's link is clicked, before the browser navigates. **Cancelable**: call\n`event.preventDefault()` to stop the native navigation and route it yourself (an SPA router).\nDetail is `{ href }`. Only a plain primary-button click emits it -- ctrl/cmd/shift/alt-clicks\nand middle-clicks (open in a new tab/window) are left to the browser. Bubbles and is composed,\nso one listener on the surrounding `<bs-breadcrumbs>` covers every crumb."
+                },
+                "complexType": {
+                    "original": "{ href: string }",
+                    "resolved": "{ href: string; }",
+                    "references": {}
+                }
+            }];
+    }
 }
 const CaretRightIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M6 3L11 8L6 13", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.cmp.test.js

@@ -115,4 +115,49 @@ describe('bs-breadcrumb-overflow', () => {
             expect(root).toEqualAttribute('size', 'sm');
         });
     });
+    describe('bsNavigate', () => {
+        const open = async (items) => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-breadcrumb-overflow", null));
+            root.items = items;
+            await waitForChanges();
+            root.shadowRoot.querySelector('[part="ellipsis"]').click();
+            await waitForChanges();
+            return { root, spy: spyOnEvent('bsNavigate') };
+        };
+        // Dispatches a synthetic click and reports whether the component's own handlers (or a consumer's
+        // bsNavigate listener) prevented it. A window-level guard then blocks the native navigation in
+        // every case -- an un-prevented click on an <a> really navigates the test page, which the test
+        // runner's frame does not survive.
+        const click = (el, init = {}) => {
+            const ev = new MouseEvent('click', { bubbles: true, cancelable: true, composed: true, button: 0, ...init });
+            let prevented = false;
+            const guard = (e) => {
+                prevented = e.defaultPrevented;
+                e.preventDefault();
+            };
+            window.addEventListener('click', guard, { once: true });
+            el.dispatchEvent(ev);
+            window.removeEventListener('click', guard);
+            return { prevented };
+        };
+        it('clicking a popup link emits a cancelable bsNavigate with that link\'s href', async () => {
+            const { root, spy } = await open([
+                { label: 'A', href: '#ov-a' },
+                { label: 'B', href: '#ov-b' },
+            ]);
+            const links = root.shadowRoot.querySelectorAll('a[part="link"]');
+            click(links[1]);
+            expect(spy).toHaveReceivedEventTimes(1);
+            expect(spy).toHaveReceivedEventDetail({ href: '#ov-b' });
+            expect(spy.lastEvent.cancelable).toBe(true);
+        });
+        it('preventDefault() cancels the native navigation; a ctrl-click does not emit', async () => {
+            const { root, spy } = await open([{ label: 'A', href: '#ov-c' }]);
+            root.addEventListener('bsNavigate', e => e.preventDefault());
+            const link = root.shadowRoot.querySelector('a[part="link"]');
+            expect(click(link).prevented).toBe(true);
+            click(link, { ctrlKey: true });
+            expect(spy).toHaveReceivedEventTimes(1);
+        });
+    });
 });

package/dist/collection/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.js

@@ -54,6 +54,17 @@ export class BsBreadcrumbOverflow {
     size = 'md';
     /** Whether the overflow popup is open. */
     open = false;
+    /** Fires when one of the popup's links is clicked, before the browser navigates. **Cancelable**
+     * -- see `bs-breadcrumb`'s `bsNavigate`, which this mirrors (same detail, same modified-click
+     * rule). Detail is `{ href }`. */
+    bsNavigate;
+    onItemClick = (href) => (ev) => {
+        if (ev.defaultPrevented || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey)
+            return;
+        const navigate = this.bsNavigate.emit({ href });
+        if (navigate.defaultPrevented)
+            ev.preventDefault();
+    };
     onEllipsisToggle = () => {
         this.open = !this.open;
     };
@@ -77,7 +88,7 @@ export class BsBreadcrumbOverflow {
         }
     }
     render() {
-        return (h(Host, { key: '6219cabef08760aa3940d9a4e12d6e5ecd21e407', role: "listitem" }, h("span", { key: '59261696d02c49b1ea81b29d822d6d42c4fbafd5', part: "separator", class: "bs-breadcrumb-overflow__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '62921ade525de21d7e74e732e0736c345fef87b7' })), h("span", { key: '0a8e9a9dc472ab9d1b63bdd497ceda12e04a736a', class: "bs-breadcrumb-overflow__wrapper" }, h("button", { key: '6930b4b341ee5b810eae5ffe32e33022402a01d3', type: "button", part: "ellipsis", class: "bs-breadcrumb-overflow__ellipsis", "aria-haspopup": "menu", "aria-expanded": String(this.open), "aria-label": this.overflowLabel, onClick: this.onEllipsisToggle }, h(DotsThreeIcon, { key: 'c9cf273fa51bac2bf11953d294184be641a47a9f' })), this.open && this.items.length > 0 && (h("bs-menu", { key: '1a1948a75569ad7639131d2982c8ebdf28027f85', part: "menu", class: "bs-breadcrumb-overflow__menu" }, this.items.map(item => item.href ? (h("a", { part: "link", class: "bs-breadcrumb-overflow__link", href: item.href }, item.label)) : (h("span", { part: "link", class: "bs-breadcrumb-overflow__link" }, item.label))))))));
+        return (h(Host, { key: '4dd958f3f99f42072bb314654fc5a0856d8e41c4', role: "listitem" }, h("span", { key: 'ab7d01467e99b810b62e71d7ed289316470529f5', part: "separator", class: "bs-breadcrumb-overflow__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '6590de37057e39c4c914fde3dc3490e17566ad66' })), h("span", { key: '63081f592180f605716221c80dbb877acf926d48', class: "bs-breadcrumb-overflow__wrapper" }, h("button", { key: '0ec87f47561dc329269b1fefef0ccb76dae4cdb4', type: "button", part: "ellipsis", class: "bs-breadcrumb-overflow__ellipsis", "aria-haspopup": "menu", "aria-expanded": String(this.open), "aria-label": this.overflowLabel, onClick: this.onEllipsisToggle }, h(DotsThreeIcon, { key: '6da3c5bee9f532264e2e58227dccc4dfc3786782' })), this.open && this.items.length > 0 && (h("bs-menu", { key: '66f772f0f53090e960d2a9b08e1283989dfc02f8', part: "menu", class: "bs-breadcrumb-overflow__menu" }, this.items.map(item => item.href ? (h("a", { part: "link", class: "bs-breadcrumb-overflow__link", href: item.href, onClick: this.onItemClick(item.href) }, item.label)) : (h("span", { part: "link", class: "bs-breadcrumb-overflow__link" }, item.label))))))));
     }
     static get is() { return "bs-breadcrumb-overflow"; }
     static get encapsulation() { return "shadow"; }
@@ -171,6 +182,24 @@ export class BsBreadcrumbOverflow {
             "open": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "bsNavigate",
+                "name": "bsNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when one of the popup's links is clicked, before the browser navigates. **Cancelable**\n-- see `bs-breadcrumb`'s `bsNavigate`, which this mirrors (same detail, same modified-click\nrule). Detail is `{ href }`."
+                },
+                "complexType": {
+                    "original": "{ href: string }",
+                    "resolved": "{ href: string; }",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
     static get listeners() {
         return [{

package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.cmp.test.js

@@ -80,4 +80,24 @@ describe('bs-icon-button', () => {
         expect(iconWrapper.querySelector('slot')).not.toBeNull();
         expect(root.querySelector('svg.my-icon')).not.toBeNull();
     });
+    describe('icon-font glyphs', () => {
+        // Issue: a slotted icon-font glyph (<i class="ph-bold ...">) ignored the size prop, because
+        // glyphs are sized by font-size and only width/height were being set.
+        for (const [size, px] of [
+            ['xs', 8],
+            ['sm', 16],
+            ['md', 20],
+            ['lg', 24],
+        ]) {
+            it(`size="${size}" sizes a slotted glyph to ${px}px via font-size`, async () => {
+                const { root } = await render(h("bs-icon-button", { size: size, ariaLabel: "Bell" }, h("i", { class: "glyph" }, "A")));
+                const glyph = root.querySelector('i.glyph');
+                expect(getComputedStyle(glyph).fontSize).toBe(`${px}px`);
+            });
+        }
+        it('does not override a font-size the consumer sets on the glyph themselves', async () => {
+            const { root } = await render(h("bs-icon-button", { size: "md", ariaLabel: "Bell" }, h("i", { class: "glyph", style: { fontSize: '30px' } }, "A")));
+            expect(getComputedStyle(root.querySelector('i.glyph')).fontSize).toBe('30px');
+        });
+    });
 });

package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.css

@@ -2,14 +2,14 @@
  * @prop --bs-icon-button-radius: Corner radius, size="sm"/"md"/"lg". Aliased to --bs-border-radius-100.
  * @prop --bs-icon-button-radius-xs: Corner radius, size="xs" -- a smaller radius than --bs-icon-button-radius, since --bs-border-radius-100 (8px) on a 16px box would look nearly circular. Aliased to --bs-border-radius-50.
  * @prop --bs-icon-button-size-xs: Container width/height at size="xs". 16px.
- * @prop --bs-icon-button-icon-size-xs: Slotted icon width/height at size="xs". 8px.
+ * @prop --bs-icon-button-icon-size-xs: Slotted icon width/height (and font-size, for icon-font glyphs) at size="xs". 8px.
  * @prop --bs-icon-button-padding-xs: Padding on all sides, size="xs" only -- distinct from --bs-icon-button-padding, since 16px/8px icon math (4px) differs from the sm/md/lg constant (12px). Aliased to --bs-spacing-50.
  * @prop --bs-icon-button-size-sm: Container width/height at size="sm". 40px.
  * @prop --bs-icon-button-size-md: Container width/height at size="md". 44px.
  * @prop --bs-icon-button-size-lg: Container width/height at size="lg". 48px.
- * @prop --bs-icon-button-icon-size-sm: Slotted icon width/height at size="sm". 16px.
- * @prop --bs-icon-button-icon-size-md: Slotted icon width/height at size="md". 20px.
- * @prop --bs-icon-button-icon-size-lg: Slotted icon width/height at size="lg". 24px.
+ * @prop --bs-icon-button-icon-size-sm: Slotted icon width/height (and font-size, for icon-font glyphs) at size="sm". 16px.
+ * @prop --bs-icon-button-icon-size-md: Slotted icon width/height (and font-size, for icon-font glyphs) at size="md". 20px.
+ * @prop --bs-icon-button-icon-size-lg: Slotted icon width/height (and font-size, for icon-font glyphs) at size="lg". 24px.
  * @prop --bs-icon-button-padding: Padding on all sides, all sizes (constant -- centers the icon
  * inside the container at every size). Aliased to --bs-spacing-150.
  * @prop --bs-icon-button-primary-default: Background, variant="primary", default. Aliased to --bs-color-primary-default.
@@ -161,6 +161,9 @@
 .bs-icon-button--xs .bs-icon-button__icon {
   width: var(--bs-icon-button-icon-size-xs);
   height: var(--bs-icon-button-icon-size-xs);
+  /* Icon-font glyphs (e.g. <i class="ph-bold ph-bell">) are sized by font-size, not width/height,
+     so they follow the same token as SVG icons do. */
+  font-size: var(--bs-icon-button-icon-size-xs);
 }
 
 .bs-icon-button--sm {
@@ -170,6 +173,9 @@
 .bs-icon-button--sm .bs-icon-button__icon {
   width: var(--bs-icon-button-icon-size-sm);
   height: var(--bs-icon-button-icon-size-sm);
+  /* Icon-font glyphs (e.g. <i class="ph-bold ph-bell">) are sized by font-size, not width/height,
+     so they follow the same token as SVG icons do. */
+  font-size: var(--bs-icon-button-icon-size-sm);
 }
 
 .bs-icon-button--md {
@@ -179,6 +185,9 @@
 .bs-icon-button--md .bs-icon-button__icon {
   width: var(--bs-icon-button-icon-size-md);
   height: var(--bs-icon-button-icon-size-md);
+  /* Icon-font glyphs (e.g. <i class="ph-bold ph-bell">) are sized by font-size, not width/height,
+     so they follow the same token as SVG icons do. */
+  font-size: var(--bs-icon-button-icon-size-md);
 }
 
 .bs-icon-button--lg {
@@ -188,6 +197,9 @@
 .bs-icon-button--lg .bs-icon-button__icon {
   width: var(--bs-icon-button-icon-size-lg);
   height: var(--bs-icon-button-icon-size-lg);
+  /* Icon-font glyphs (e.g. <i class="ph-bold ph-bell">) are sized by font-size, not width/height,
+     so they follow the same token as SVG icons do. */
+  font-size: var(--bs-icon-button-icon-size-lg);
 }
 
 .bs-icon-button__icon {
@@ -195,12 +207,17 @@
   align-items: center;
   justify-content: center;
   color: inherit;
+  line-height: 1;
 }
 
 .bs-icon-button__icon ::slotted(*) {
   display: block;
   width: 100%;
   height: 100%;
+  /* Make a slotted icon font glyph take the wrapper's font-size (above) rather than whatever the
+     page's inherited size happens to be. */
+  font-size: inherit;
+  line-height: 1;
 }
 
 .bs-icon-button--primary {

package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.js

@@ -20,7 +20,8 @@ import { h } from "@stencil/core";
  * just conditionally, unlike `bs-button`) -- there's no visible label text to fall back on for an
  * accessible name.
  *
- * @slot - Default slot: the icon content. Exactly one icon, no label.
+ * @slot - Default slot: the icon content. Exactly one icon, no label -- an inline SVG, or an icon-font
+ * glyph (sized by `font-size`, which this component sets from the `size` prop).
  * @part icon - The icon wrapper element.
  */
 // Note: this component's CSS Custom Properties (--bs-icon-button-*) are documented via @prop
@@ -61,7 +62,7 @@ export class BsIconButton {
             form.reset();
     };
     render() {
-        return (h("button", { key: '1d0525e3ad0b90e723cab2c9cd0217046a905a5e', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '1c94ad4a861dde9e4942f6795a2a868161c0b4a1', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: '9cd3a6aa2d9cbfebaa1d0e70fc10448af4ef4429' }))));
+        return (h("button", { key: '538cd121df25e20ea7e21a7b5269e73d275f8bff', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '35548fe082134edb85dbdcb0caf820ec3b5233c2', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: '7f16ef5f2c08fc5d2bb852bd5c36598be5aa1175' }))));
     }
     static get is() { return "bs-icon-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.stories.js

@@ -42,6 +42,16 @@ export const Sizes = {
     </div>
   `,
 };
+// An icon-font glyph in the slot (here a plain text glyph, so the story needs no icon-font
+// dependency) scales with `size` exactly like the SVG above -- no manual font-size needed.
+export const IconFontGlyph = {
+    name: 'Icon-font glyph',
+    render: args => html `
+    <div style="display:flex; gap:12px; align-items:center;">
+      ${['xs', 'sm', 'md', 'lg'].map(size => html `<bs-icon-button size=${size} aria-label=${args.ariaLabel}><i style="font-style: normal;">★</i></bs-icon-button>`)}
+    </div>
+  `,
+};
 export const Disabled = {
     args: { disabled: true },
 };

package/dist/collection/components/bs-data-table/bs-data-table.cmp.test.js

@@ -99,6 +99,25 @@ describe('bs-data-table', () => {
             expect(cell.querySelector('img')).toBeNull();
             expect(cell.textContent).toBe('<img src=x onerror="window.__xss = true">');
         });
+        it('renders rich cell content: a link and a web component become real elements', async () => {
+            const { root, waitForChanges } = await render(h("bs-data-table", { columns: columns, rows: rows, cellRenderer: (row) => `<a href="/users/${row.id}">Open</a><bs-badge variant="success">Active</bs-badge>` }));
+            await waitForChanges();
+            const cell = root.shadowRoot.querySelector('tbody td');
+            expect(cell.querySelector('a')).toEqualAttribute('href', '/users/1');
+            const badge = cell.querySelector('bs-badge');
+            expect(badge).not.toBeNull();
+            expect(badge.shadowRoot).not.toBeNull(); // upgraded: it is a live component, not inert text
+        });
+        it('applies cellRenderer to every cell, and does NOT escape what it returns (the caller must)', async () => {
+            const unsafeRows = [{ id: 1, name: '<img src=x onerror="window.__xss2 = true">', status: 'Active' }];
+            const unsafe = await render(h("bs-data-table", { columns: columns, rows: unsafeRows, cellRenderer: (row, col) => String(row[col.key]) }));
+            expect(unsafe.root.shadowRoot.querySelector('tbody td').querySelector('img')).not.toBeNull();
+            const esc = (v) => String(v).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+            const safe = await render(h("bs-data-table", { columns: columns, rows: unsafeRows, cellRenderer: (row, col) => esc(row[col.key]) }));
+            const cell = safe.root.shadowRoot.querySelector('tbody td');
+            expect(cell.querySelector('img')).toBeNull();
+            expect(cell.textContent).toBe('<img src=x onerror="window.__xss2 = true">');
+        });
         it('still allows cellRenderer to render trusted custom HTML when explicitly supplied', async () => {
             const { root } = await render(h("bs-data-table", { columns: columns, rows: rows, cellRenderer: () => '<button type="button">Edit</button>' }));
             const cell = root.shadowRoot.querySelector('tbody td');

package/dist/collection/components/bs-data-table/bs-data-table.js

@@ -29,8 +29,22 @@ export class BsDataTable {
     sortColumn;
     sortDirection = 'asc';
     selectable = false;
-    /** Optional custom cell renderer, e.g. for an actions column. Function props are JS-property-only,
-     * same as array props -- there is no attribute equivalent. Falls back to the raw cell value. */
+    /** Optional custom cell renderer, for rich cells such as a status badge, a link or an actions
+     * column. It returns an **HTML string** that is inserted into the cell as real markup
+     * (`innerHTML`), so links, buttons, `<img>` and other web components (e.g. `<bs-badge>`) all render.
+     *
+     * **When set it renders every cell, not just the special ones** -- return the plain value for
+     * ordinary columns too. And **the returned string is not escaped or sanitized** (same trust
+     * model as React's `dangerouslySetInnerHTML`): escape any untrusted row data you put in it, plain
+     * columns included, or it will be interpreted as HTML. Without a `cellRenderer`, values are
+     * rendered as escaped text.
+     *
+     * The markup is static HTML -- attach behavior yourself, e.g. one `click` listener on the table
+     * that reads `event.composedPath()[0]` (events from inside the shadow root are retargeted to the
+     * table itself).
+     *
+     * Function props are JS-property-only, same as array props -- there is no attribute equivalent.
+     * Falls back to the raw cell value (as escaped text) when unset. */
     cellRenderer;
     bsSort;
     bsRowSelect;
@@ -71,11 +85,11 @@ export class BsDataTable {
         }
     }
     render() {
-        return (h("table", { key: 'a1a9d0c92eb2af12f8f9cab9ba4ae0994a10958a', part: "table", class: "bs-data-table" }, h("thead", { key: '2b51500b221465d750b55c31e00af94684367eb2', part: "head" }, h("tr", { key: '57aa25ca9b255213f155b5b30841e284d1eebaf8' }, this.selectable && (h("th", { key: '44b709a7cd1f2072934efe8fef44a63b2ed20d62', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: '084d099453c53333d77c60786b7eb6bedfa21ef3', type: "checkbox", "aria-label": "Select all rows", checked: this.selectedIds.size > 0 && this.selectedIds.size === this.rows.length, indeterminate: this.selectedIds.size > 0 && this.selectedIds.size < this.rows.length, onChange: this.onSelectAllChange })))), this.columns.map(column => {
+        return (h("table", { key: '7ea79a70148513512cdba2f8cb8d5a5c7ae09706', part: "table", class: "bs-data-table" }, h("thead", { key: 'e9cf73cbba196e9caf4b03a837866a5370c13e19', part: "head" }, h("tr", { key: 'a33fbd57f1925e34c6e7ce292b6945d2ee5c6113' }, this.selectable && (h("th", { key: '876948b66e54ae68d6aa6148c962781223fa0441', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: 'cf8f26258bcee486190e3ac4b3d5ce4715784d5f', type: "checkbox", "aria-label": "Select all rows", checked: this.selectedIds.size > 0 && this.selectedIds.size === this.rows.length, indeterminate: this.selectedIds.size > 0 && this.selectedIds.size < this.rows.length, onChange: this.onSelectAllChange })))), this.columns.map(column => {
             const isSorted = this.sortColumn === column.key;
             const ariaSort = column.sortable ? (isSorted ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none') : undefined;
             return (h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
-        }))), h("tbody", { key: '0438897652b9f8909ff67ae9f7b22d0950f1e5e8', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
+        }))), h("tbody", { key: '3a0c2ce6fea27797b855ee2b3c724d0e99471d28', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
         // cellRenderer is a developer-supplied, trusted function (JS-property-only, never
         // derived from untrusted input) -- its HTML output is intentionally not escaped,
         // same trust model as React's dangerouslySetInnerHTML.
@@ -228,7 +242,7 @@ export class BsDataTable {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional custom cell renderer, e.g. for an actions column. Function props are JS-property-only,\nsame as array props -- there is no attribute equivalent. Falls back to the raw cell value."
+                    "text": "Optional custom cell renderer, for rich cells such as a status badge, a link or an actions\ncolumn. It returns an **HTML string** that is inserted into the cell as real markup\n(`innerHTML`), so links, buttons, `<img>` and other web components (e.g. `<bs-badge>`) all render.\n\n**When set it renders every cell, not just the special ones** -- return the plain value for\nordinary columns too. And **the returned string is not escaped or sanitized** (same trust\nmodel as React's `dangerouslySetInnerHTML`): escape any untrusted row data you put in it, plain\ncolumns included, or it will be interpreted as HTML. Without a `cellRenderer`, values are\nrendered as escaped text.\n\nThe markup is static HTML -- attach behavior yourself, e.g. one `click` listener on the table\nthat reads `event.composedPath()[0]` (events from inside the shadow root are retargeted to the\ntable itself).\n\nFunction props are JS-property-only, same as array props -- there is no attribute equivalent.\nFalls back to the raw cell value (as escaped text) when unset."
                 },
                 "getter": false,
                 "setter": false