@brandsync/wc 1.18.0 → 1.20.0

package/dist/cjs/bs-description-list.cjs.entry.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var index = require('./index-BFxk-bY6.js');
+
+const bsDescriptionListCss = () => `:host{display:block;--bs-description-list-gap:0;--bs-description-list-divider-color:var(--bs-border-neutral-container)}.bs-description-list{display:flex;flex-direction:column;gap:var(--bs-description-list-gap)}:host([dividers]) ::slotted(bs-description-item:not(:last-child)){border-bottom:1px solid var(--bs-description-list-divider-color)}`;
+
+const BsDescriptionList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** `stacked` puts each term above its detail; `horizontal` puts them side by side in two columns. */
+    layout = 'stacked';
+    /** Draws a 1px separator between items. */
+    dividers = false;
+    /** Accessible name of the group. */
+    ariaLabel = null;
+    onLayout() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    sync() {
+        Array.from(this.el.children)
+            .filter(c => c.tagName === 'BS-DESCRIPTION-ITEM')
+            .forEach(i => (i.layout = this.layout));
+    }
+    render() {
+        return (index.h("div", { key: '626f9b04c01bffb558e69260c934484464fbe261', part: "list", class: "bs-description-list", role: "group", "aria-label": this.ariaLabel ?? undefined }, index.h("slot", { key: 'c895fdcbbbe761f6323b706dcadafe07556a3583', onSlotchange: () => this.sync() })));
+    }
+    static get watchers() { return {
+        "layout": [{
+                "onLayout": 0
+            }]
+    }; }
+};
+BsDescriptionList.style = bsDescriptionListCss();
+
+exports.bs_description_list = BsDescriptionList;

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

@@ -1,14 +1,16 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
+var motion = require('./motion-DOlI71lc.js');
 
-const bsDialogCss = () => `.bs-dialog__backdrop{position:fixed;inset:0;z-index:var(--bs-z-index-modal);display:flex;align-items:center;justify-content:center;background:rgba(0, 0, 0, 0.4)}.bs-dialog__dialog{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--bs-spacing-800));background:var(--bs-surface-base);color:var(--bs-text-default);border-radius:var(--bs-border-radius-200);box-shadow:var(--bs-shadow-xl);font-family:inherit}.bs-dialog__dialog--sm{width:360px}.bs-dialog__dialog--md{width:560px}.bs-dialog__dialog--lg{width:800px}.bs-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--bs-spacing-200) var(--bs-spacing-200) var(--bs-spacing-100)}.bs-dialog__image--visible+.bs-dialog__header,.bs-dialog__icon--visible+.bs-dialog__header{padding-top:0}.bs-dialog__heading{font-size:var(--bs-font-size-lg);font-weight:var(--bs-font-weight-semibold);color:var(--bs-text-default)}.bs-dialog__close--floating{position:absolute;top:var(--bs-spacing-200);inset-inline-end:var(--bs-spacing-200);z-index:1}.bs-dialog__body{padding:0 var(--bs-spacing-200) var(--bs-spacing-200);overflow-y:auto}.bs-dialog__body--centered{text-align:center}.bs-dialog__footer--visible{display:flex;justify-content:flex-end;gap:var(--bs-spacing-200);padding:0 var(--bs-spacing-200) var(--bs-spacing-200)}.bs-dialog__image--visible{overflow:hidden;border-radius:var(--bs-border-radius-200) var(--bs-border-radius-200) 0 0;margin-bottom:var(--bs-spacing-200)}.bs-dialog__image--visible ::slotted(img){display:block;width:100%;height:auto;object-fit:cover}.bs-dialog__icon--visible{display:flex;align-items:center;justify-content:center;padding:var(--bs-spacing-200) var(--bs-spacing-200) 0;margin-bottom:var(--bs-spacing-200)}.bs-dialog__icon--visible ::slotted(*){width:64px;height:64px}.bs-dialog__header--centered{justify-content:center;text-align:center}@media (forced-colors: active){.bs-dialog__dialog{border:1px solid CanvasText}}`;
+const bsDialogCss = () => `:host{--bs-dialog-duration:var(--bs-duration-default);--bs-dialog-easing:var(--bs-easing-standard);--bs-dialog-distance:var(--bs-spacing-200)}.bs-dialog__backdrop{position:fixed;inset:0;z-index:var(--bs-z-index-modal);display:flex;align-items:center;justify-content:center;background:rgba(0, 0, 0, 0.4)}.bs-dialog__backdrop--closing{pointer-events:none}.bs-dialog__dialog{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--bs-spacing-800));background:var(--bs-surface-base);color:var(--bs-text-default);border-radius:var(--bs-border-radius-200);box-shadow:var(--bs-shadow-xl);font-family:inherit}.bs-dialog__dialog--sm{width:360px}.bs-dialog__dialog--md{width:560px}.bs-dialog__dialog--lg{width:800px}.bs-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--bs-spacing-200) var(--bs-spacing-200) var(--bs-spacing-100)}.bs-dialog__image--visible+.bs-dialog__header,.bs-dialog__icon--visible+.bs-dialog__header{padding-top:0}.bs-dialog__heading{font-size:var(--bs-font-size-lg);font-weight:var(--bs-font-weight-semibold);color:var(--bs-text-default)}.bs-dialog__close--floating{position:absolute;top:var(--bs-spacing-200);inset-inline-end:var(--bs-spacing-200);z-index:1}.bs-dialog__body{padding:0 var(--bs-spacing-200) var(--bs-spacing-200);overflow-y:auto}.bs-dialog__body--centered{text-align:center}.bs-dialog__footer--visible{display:flex;justify-content:flex-end;gap:var(--bs-spacing-200);padding:0 var(--bs-spacing-200) var(--bs-spacing-200)}.bs-dialog__image--visible{overflow:hidden;border-radius:var(--bs-border-radius-200) var(--bs-border-radius-200) 0 0;margin-bottom:var(--bs-spacing-200)}.bs-dialog__image--visible ::slotted(img){display:block;width:100%;height:auto;object-fit:cover}.bs-dialog__icon--visible{display:flex;align-items:center;justify-content:center;padding:var(--bs-spacing-200) var(--bs-spacing-200) 0;margin-bottom:var(--bs-spacing-200)}.bs-dialog__icon--visible ::slotted(*){width:64px;height:64px}.bs-dialog__header--centered{justify-content:center;text-align:center}@media (forced-colors: active){.bs-dialog__dialog{border:1px solid CanvasText}}`;
 
 const BsDialog = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.bsClose = index.createEvent(this, "bsClose");
     }
+    get el() { return index.getElement(this); }
     /** Mutable + reflected so the component can close itself (backdrop click, Escape, close button)
      * the same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to. */
     open = false;
@@ -42,6 +44,42 @@ const BsDialog = class {
     onIconSlotchange = (ev) => {
         this.hasIcon = ev.target.assignedNodes().length > 0;
     };
+    /** True while the exit motion plays after `open` went false, so the dialog stays mounted for it. */
+    closing = false;
+    backdropRef;
+    enterPending = false;
+    exitPending = false;
+    motionRun = 0;
+    onOpenChange(next) {
+        this.motionRun++;
+        motion.cancelMotion(this.backdropRef, this.dialogRef);
+        if (next) {
+            this.closing = false;
+            this.enterPending = true;
+        }
+        else if (this.wasOpen && motion.readMotion(this.el, 'bs-dialog').ms > 0) {
+            this.closing = true;
+            this.exitPending = true;
+        }
+    }
+    playEnter() {
+        const { ms, easing, distance } = motion.readMotion(this.el, 'bs-dialog');
+        if (ms === 0)
+            return;
+        motion.play(this.backdropRef, [{ opacity: 0 }, { opacity: 1 }], ms, easing);
+        motion.play(this.dialogRef, [{ opacity: 0, transform: `translateY(${distance}px) scale(0.96)` }, { opacity: 1, transform: 'none' }], ms, easing);
+    }
+    playExit() {
+        const { ms, easing, distance } = motion.readMotion(this.el, 'bs-dialog');
+        const run = ++this.motionRun;
+        Promise.all([
+            motion.play(this.backdropRef, [{ opacity: 1 }, { opacity: 0 }], ms, easing, 'forwards'),
+            motion.play(this.dialogRef, [{ opacity: 1, transform: 'none' }, { opacity: 0, transform: `translateY(${distance}px) scale(0.96)` }], ms, easing, 'forwards'),
+        ]).then(() => {
+            if (run === this.motionRun)
+                this.closing = false;
+        });
+    }
     dialogRef;
     previouslyFocused;
     previousBodyOverflow;
@@ -74,6 +112,14 @@ const BsDialog = class {
         }
     }
     componentDidRender() {
+        if (this.open && this.enterPending) {
+            this.enterPending = false;
+            this.playEnter();
+        }
+        else if (!this.open && this.closing && this.exitPending) {
+            this.exitPending = false;
+            this.playExit();
+        }
         if (this.open && !this.wasOpen) {
             this.previouslyFocused = document.activeElement;
             // Deferred to the next frame -- calling .focus() synchronously here, in the same task as
@@ -105,14 +151,19 @@ const BsDialog = class {
         }
     }
     render() {
-        if (!this.open) {
+        if (!this.open && !this.closing) {
             return null;
         }
         // The close button floats (absolute, over the top of the dialog) whenever there's a hero image
         // to sit over, or the centered layout has no header row to put an inline close button in.
         const floatingClose = this.centered || this.hasImage;
-        return (index.h("div", { part: "backdrop", class: "bs-dialog__backdrop", onClick: this.onBackdropClick }, index.h("div", { ref: el => (this.dialogRef = el), tabIndex: -1, part: "dialog", class: `bs-dialog__dialog bs-dialog__dialog--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.heading }, floatingClose && (index.h("bs-icon-button", { part: "close", class: "bs-dialog__close--floating", variant: "neutral", size: "md", "aria-label": this.closeLabel, onClick: this.close }, index.h(CloseIcon, null))), index.h("div", { part: "image", class: `bs-dialog__image ${this.hasImage ? 'bs-dialog__image--visible' : ''}` }, index.h("slot", { name: "image", onSlotchange: this.onImageSlotchange })), this.centered && (index.h("div", { part: "icon", class: `bs-dialog__icon ${this.hasIcon ? 'bs-dialog__icon--visible' : ''}` }, index.h("slot", { name: "icon", onSlotchange: this.onIconSlotchange }))), index.h("div", { part: "header", class: `bs-dialog__header ${this.centered ? 'bs-dialog__header--centered' : ''}` }, index.h("span", { class: "bs-dialog__heading" }, this.heading), !floatingClose && (index.h("bs-icon-button", { part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: this.close }, index.h(CloseIcon, null)))), index.h("div", { part: "body", class: `bs-dialog__body ${this.centered ? 'bs-dialog__body--centered' : ''}` }, index.h("slot", null)), index.h("div", { part: "footer", class: `bs-dialog__footer ${this.hasFooter ? 'bs-dialog__footer--visible' : ''}` }, index.h("slot", { name: "footer", onSlotchange: this.onFooterSlotchange })))));
+        return (index.h("div", { ref: el => (this.backdropRef = el), part: "backdrop", class: `bs-dialog__backdrop ${this.open ? '' : 'bs-dialog__backdrop--closing'}`, onClick: this.onBackdropClick }, index.h("div", { ref: el => (this.dialogRef = el), tabIndex: -1, part: "dialog", class: `bs-dialog__dialog bs-dialog__dialog--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.heading }, floatingClose && (index.h("bs-icon-button", { part: "close", class: "bs-dialog__close--floating", variant: "neutral", size: "md", "aria-label": this.closeLabel, onClick: this.close }, index.h(CloseIcon, null))), index.h("div", { part: "image", class: `bs-dialog__image ${this.hasImage ? 'bs-dialog__image--visible' : ''}` }, index.h("slot", { name: "image", onSlotchange: this.onImageSlotchange })), this.centered && (index.h("div", { part: "icon", class: `bs-dialog__icon ${this.hasIcon ? 'bs-dialog__icon--visible' : ''}` }, index.h("slot", { name: "icon", onSlotchange: this.onIconSlotchange }))), index.h("div", { part: "header", class: `bs-dialog__header ${this.centered ? 'bs-dialog__header--centered' : ''}` }, index.h("span", { class: "bs-dialog__heading" }, this.heading), !floatingClose && (index.h("bs-icon-button", { part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: this.close }, index.h(CloseIcon, null)))), index.h("div", { part: "body", class: `bs-dialog__body ${this.centered ? 'bs-dialog__body--centered' : ''}` }, index.h("slot", null)), index.h("div", { part: "footer", class: `bs-dialog__footer ${this.hasFooter ? 'bs-dialog__footer--visible' : ''}` }, index.h("slot", { name: "footer", onSlotchange: this.onFooterSlotchange })))));
     }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
 };
 // 16x16 native viewBox, matching bs-attachment's own CloseIcon proportions (two crossing diagonal
 // strokes) -- shared between both close button variants above rather than duplicated inline.

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
 const bsDividerCss = () => `:host{display:block;box-sizing:border-box;align-self:stretch;flex:none;--bs-divider-thickness:1px;--bs-divider-color:var(--bs-border-neutral-container);--bs-divider-inset:var(--bs-spacing-300)}:host([variant='subtle']){--bs-divider-color:var(--bs-neutral-100)}:host([orientation='vertical']){width:var(--bs-divider-thickness);min-height:1em}:host(:not([orientation='vertical'])){width:100%;height:var(--bs-divider-thickness)}.line{box-sizing:border-box;width:100%;height:100%;background:var(--bs-divider-color)}:host([inset='start']:not([orientation='vertical'])) .line{margin-inline-start:var(--bs-divider-inset);width:calc(100% - var(--bs-divider-inset))}:host([inset='both']:not([orientation='vertical'])) .line{margin-inline:var(--bs-divider-inset);width:calc(100% - 2 * var(--bs-divider-inset))}:host([inset='start'][orientation='vertical']) .line{margin-block-start:var(--bs-divider-inset);height:calc(100% - var(--bs-divider-inset))}:host([inset='both'][orientation='vertical']) .line{margin-block:var(--bs-divider-inset);height:calc(100% - 2 * var(--bs-divider-inset))}`;
 
@@ -21,7 +21,7 @@ const BsDivider = class {
         const a11y = this.decorative
             ? { role: 'none', 'aria-hidden': 'true' }
             : { role: 'separator', 'aria-orientation': orientation };
-        return (index.h(index.Host, { key: '858582c09f3f2712a3ee9d51a80a1f53b2a29dfb', ...a11y }, index.h("div", { key: '184d290fbfdabab256850af57792e7d6c5ebf563', class: "line", part: "line" })));
+        return (index.h(index.Host, { key: 'bf2c91df3dccb2fc5d546c0d119aebc8c7f9a7b1', ...a11y }, index.h("div", { key: '9bc6e29a09dcf9240a457a324d24e4dcb659870f', class: "line", part: "line" })));
     }
 };
 BsDivider.style = bsDividerCss();

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

@@ -0,0 +1,96 @@
+'use strict';
+
+var index = require('./index-BFxk-bY6.js');
+
+const bsDropdownCss = () => `:host{display:inline-block}`;
+
+const BsDropdown = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsOpen = index.createEvent(this, "bsOpen");
+        this.bsClose = index.createEvent(this, "bsClose");
+    }
+    get el() { return index.getElement(this); }
+    /** Whether the menu is shown. */
+    open = false;
+    /** Where the menu sits relative to the trigger; flips to stay in the viewport. */
+    placement = 'bottom-start';
+    /** Emitted after the menu opens. */
+    bsOpen;
+    /** Emitted after the menu closes (outside click, Escape, Tab, item activation or `open = false`). */
+    bsClose;
+    triggerSlot;
+    focusRun = 0;
+    onOpenChange(next) {
+        this.syncTrigger();
+        if (next) {
+            this.bsOpen.emit();
+            const run = ++this.focusRun;
+            const popover = this.el.shadowRoot?.querySelector('bs-popover');
+            Promise.resolve(popover?.componentOnReady?.()).then(() => requestAnimationFrame(() => run === this.focusRun && this.focusFirstItem()));
+        }
+        else {
+            this.focusRun++;
+            this.bsClose.emit();
+            // Focus was inside the menu (Escape, item activation, Tab): hand it back to the trigger.
+            if (this.el.matches(':focus-within'))
+                this.focusTrigger();
+        }
+    }
+    componentDidLoad() {
+        this.syncTrigger();
+        if (this.open)
+            this.onOpenChange(true);
+    }
+    /** Close after an item is activated; the item still emits its own `bsSelect` for the consumer. */
+    onItemSelect() {
+        this.open = false;
+    }
+    /** Tab leaves the menu: close it and continue tabbing from the trigger. */
+    onKeyDown(ev) {
+        if (ev.key !== 'Tab' || !this.open)
+            return;
+        this.focusTrigger();
+        this.open = false;
+    }
+    trigger() {
+        return this.triggerSlot?.assignedElements({ flatten: true })[0];
+    }
+    syncTrigger = () => {
+        const t = this.trigger();
+        if (!t)
+            return;
+        if (t.tagName.startsWith('BS-')) {
+            // bs-button / bs-icon-button forward these to their inner <button>; an attribute on the host would sit on a role-less element.
+            const b = t;
+            b.ariaHasPopup = 'menu';
+            b.ariaExpanded = String(this.open);
+        }
+        else {
+            t.setAttribute('aria-haspopup', 'menu');
+            t.setAttribute('aria-expanded', String(this.open));
+        }
+    };
+    focusTrigger() {
+        this.trigger()?.focus();
+    }
+    focusFirstItem() {
+        const items = Array.from(this.el.querySelectorAll('bs-menu-item'));
+        items.find(i => !i.disabled)?.shadowRoot?.querySelector('button')?.focus();
+    }
+    onPopoverOpenChange = (ev) => {
+        ev.stopPropagation();
+        this.open = ev.detail;
+    };
+    render() {
+        return (index.h("bs-popover", { key: '7b5cb4aea4925c40686923285cff718c7f7de32a', part: "popover", open: this.open, placement: this.placement, onBsOpenChange: this.onPopoverOpenChange }, index.h("slot", { key: '3956aee129e6e424508b5b9385d282c2782d44a8', name: "trigger", slot: "trigger", onSlotchange: this.syncTrigger, ref: el => (this.triggerSlot = el) }), index.h("slot", { key: '05d1a35099d008d7ba33334a487f56b3cad3f293' })));
+    }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
+};
+BsDropdown.style = bsDropdownCss();
+
+exports.bs_dropdown = BsDropdown;

package/dist/cjs/bs-empty-state.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
-const bsEmptyStateCss = () => `:host{display:block;box-sizing:border-box;--bs-empty-state-padding-y:var(--bs-spacing-700);--bs-empty-state-padding-x:var(--bs-spacing-300);--bs-empty-state-gap:var(--bs-spacing-150);--bs-empty-state-heading-color:var(--bs-text-default);--bs-empty-state-description-color:var(--bs-text-secondary)}.bs-empty-state{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:var(--bs-empty-state-gap);padding:var(--bs-empty-state-padding-y) var(--bs-empty-state-padding-x);text-align:center}.bs-empty-state__heading{margin:0;align-self:stretch;color:var(--bs-empty-state-heading-color);font-family:inherit;font-size:var(--bs-font-size-xl);font-weight:var(--bs-font-weight-bold);line-height:24px}.bs-empty-state__description{margin:0;align-self:stretch;color:var(--bs-empty-state-description-color);font-family:inherit;font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-regular);line-height:20px}.bs-empty-state__action{display:flex;justify-content:center}`;
+const bsEmptyStateCss = () => `:host{display:block;box-sizing:border-box;--bs-empty-state-padding-y:var(--bs-spacing-700);--bs-empty-state-padding-x:var(--bs-spacing-300);--bs-empty-state-gap:var(--bs-spacing-150);--bs-empty-state-heading-size:var(--bs-font-size-xl);--bs-empty-state-heading-color:var(--bs-text-default);--bs-empty-state-description-color:var(--bs-text-secondary)}.bs-empty-state{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:var(--bs-empty-state-gap);padding:var(--bs-empty-state-padding-y) var(--bs-empty-state-padding-x);text-align:center}.bs-empty-state__heading{margin:0;align-self:stretch;color:var(--bs-empty-state-heading-color);font-family:inherit;font-size:var(--bs-empty-state-heading-size);font-weight:var(--bs-font-weight-bold);line-height:24px}.bs-empty-state__description{margin:0;align-self:stretch;color:var(--bs-empty-state-description-color);font-family:inherit;font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-regular);line-height:20px}.bs-empty-state__action{display:flex;justify-content:center}:host([size='page']){--bs-empty-state-padding-y:var(--bs-spacing-1200);--bs-empty-state-heading-size:var(--bs-font-size-3xl)}:host([size='page']) .bs-empty-state{min-height:60vh;justify-content:center}:host([size='page']) .bs-empty-state__heading{line-height:1.25}:host([size='page']) .bs-empty-state__description{align-self:center;max-width:56ch;font-size:var(--bs-font-size-md);line-height:24px}.bs-empty-state__illustration{display:flex;justify-content:center}.bs-empty-state__illustration ::slotted(*){max-width:100%;height:auto}`;
 
 const BsEmptyState = class {
     constructor(hostRef) {
@@ -17,7 +17,10 @@ const BsEmptyState = class {
     intent = 'default';
     /** Heading level, 2 to 6 (renders `h2`..`h6`). Pick the one that fits the page outline. */
     headingLevel = 3;
+    /** `panel` (default) fits inside a card, table or section. `page` fills a whole view: more padding, a larger heading and a minimum height. */
+    size = 'panel';
     hasIcon = false;
+    hasIllustration = false;
     hasDescriptionSlot = false;
     hasAction = false;
     observer;
@@ -33,13 +36,14 @@ const BsEmptyState = class {
         const nodes = Array.from(this.el.childNodes);
         const slotOf = (n) => (n.nodeType === Node.ELEMENT_NODE ? n.getAttribute('slot') : null);
         this.hasIcon = nodes.some(n => slotOf(n) === 'icon');
+        this.hasIllustration = nodes.some(n => slotOf(n) === 'illustration');
         this.hasAction = nodes.some(n => slotOf(n) === 'action');
         this.hasDescriptionSlot = nodes.some(n => !slotOf(n) && (n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim())));
     }
     render() {
         const level = Math.min(6, Math.max(2, Math.round(Number(this.headingLevel)) || 3));
         const Heading = `h${level}`;
-        return (index.h("div", { key: 'dabc994fcb254cb35958f8bde54d7935bb6ff70a', part: "container", class: "bs-empty-state" }, index.h("bs-icon-tile", { key: 'efec1cc06eb3447fbd81b12634c12ee96f9fd0d2', part: "icon", size: "lg", intent: this.intent }, this.hasIcon && index.h("slot", { key: 'd8a7482e2b32f6361b82232652edcc1aadb74a5b', name: "icon" })), this.heading && (index.h(Heading, { key: '6625baa3d00097951042608aeb888f7c1665e987', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (index.h("p", { key: 'c367d9d3aa154e8413c04ca47de7cd9f5eed6883', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? index.h("slot", null) : this.description)), this.hasAction && (index.h("div", { key: '7b9b78de4e71e6d07d94d4595290492542d7bf62', part: "action", class: "bs-empty-state__action" }, index.h("slot", { key: '7b57218ca03edfd6f972a2bb6ce458db8dc33d9a', name: "action" })))));
+        return (index.h("div", { key: '3639ba86bf80fa1bceb453455c0e619739302895', part: "container", class: "bs-empty-state" }, this.hasIllustration ? (index.h("div", { part: "illustration", class: "bs-empty-state__illustration" }, index.h("slot", { name: "illustration" }))) : (index.h("bs-icon-tile", { part: "icon", size: "lg", intent: this.intent }, this.hasIcon && index.h("slot", { name: "icon" }))), this.heading && (index.h(Heading, { key: '18d951ff64f7ced418f4943c7827539bf07c994a', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (index.h("p", { key: '010e3f521741a0f2ba2ed314f87165c1b3d3b384', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? index.h("slot", null) : this.description)), this.hasAction && (index.h("div", { key: '53d8df33337004dd2a0ae9153c8603c37c2750e9', part: "action", class: "bs-empty-state__action" }, index.h("slot", { key: '167f4b5ac23b721a489cdf0051b8a2bf151b9bc0', name: "action" })))));
     }
 };
 BsEmptyState.style = bsEmptyStateCss();

package/dist/cjs/bs-error-page.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
 const bsErrorPageCss = () => `:host{display:block;--bs-error-page-bg:var(--bs-paper-bg-base);--bs-error-page-radius:var(--bs-border-radius-100);--bs-error-page-padding:var(--bs-spacing-400);--bs-error-page-min-height:440px;--bs-error-page-gap:var(--bs-spacing-150);--bs-error-page-description-width:420px;--bs-error-page-color:var(--bs-text-default);--bs-error-page-color-secondary:var(--bs-text-secondary);--bs-error-page-color-muted:var(--bs-text-muted);--bs-error-page-info-bg:var(--bs-color-info-container)}.bs-error-page{--bs-card-bg:var(--bs-error-page-bg);--bs-card-radius:var(--bs-error-page-radius);--bs-card-padding:var(--bs-error-page-padding);--bs-card-shadow:none;color:var(--bs-error-page-color)}.bs-error-page__body{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--bs-error-page-gap);min-height:calc(var(--bs-error-page-min-height) - var(--bs-error-page-padding) * 2);text-align:center}.bs-error-page__art-group{display:flex;flex-direction:column;align-items:center;gap:var(--bs-spacing-150)}.bs-error-page__art--info{--bs-icon-tile-bg:var(--bs-error-page-info-bg)}.bs-error-page__glyph,::slotted([slot='icon']){width:24px;height:24px}.bs-error-page__code{color:var(--bs-error-page-color-secondary);font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-semibold);line-height:20px}.bs-error-page__heading{margin:0;font-size:var(--bs-font-size-2xl);font-weight:var(--bs-font-weight-bold);line-height:32px}.bs-error-page__description{max-width:var(--bs-error-page-description-width);margin:0;color:var(--bs-error-page-color-secondary);font-size:var(--bs-font-size-sm);line-height:20px}.bs-error-page__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--bs-spacing-100);padding-top:var(--bs-spacing-100)}.bs-error-page__actions bs-button{--bs-button-height-md:var(--bs-spacing-550)}.bs-error-page__reference{margin:0;color:var(--bs-error-page-color-muted);font-size:var(--bs-font-size-xs);line-height:16px}`;
 
@@ -46,7 +46,7 @@ const BsErrorPage = class {
         const primary = this.primaryLabel ?? d.primary;
         const secondary = this.secondaryLabel ?? d.secondary;
         const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 1));
-        return (index.h("bs-card", { key: '4214c79438721c66089be3a4ae64fcd6bdcbdea6', part: "container", class: "bs-error-page", surface: "base" }, index.h("div", { key: '39b2a7292d488442fc2465635a5be9dd704dc42e', class: "bs-error-page__body" }, index.h("div", { key: 'beb353eefb6b77b03fe7d1ea3894b6a625eebe06', class: "bs-error-page__art-group" }, index.h("bs-icon-tile", { key: '516a9c87ddb3ac5140d2880d4638eb5eca01db73', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, index.h("slot", { key: '3c3029ce78413f49c4bb839260c432848329b428', name: "icon" }, d.glyph())), code && (index.h("span", { key: 'fc4058b507c0b60ca417f09f7838664716b17fc3', part: "code", class: "bs-error-page__code" }, code))), index.h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (index.h("p", { key: 'b914f77506217b401e26694205104d623596d270', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (index.h("div", { key: 'b6dc2e92b34960f754a54b31a659337135e63607', part: "actions", class: "bs-error-page__actions" }, primary && (index.h("bs-button", { key: 'e4f85bf6e86a80fbf1bd09fc77e16768c435a97b', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (index.h("bs-button", { key: 'a1469448cfbf1edb0bb8fe1d613101782dc87145', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (index.h("p", { key: 'e8f32f0cc84051d02418bb48bc6116675ec55097', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
+        return (index.h("bs-card", { key: '587457fde4a8a9e0485a88905d9ca9aed7822b13', part: "container", class: "bs-error-page", surface: "base" }, index.h("div", { key: '902640ac8d0645646fcd75d9bae72f0adb96d2ee', class: "bs-error-page__body" }, index.h("div", { key: '161a5ec1c4af4fad776f8fb70b4ba36e57e652f8', class: "bs-error-page__art-group" }, index.h("bs-icon-tile", { key: '129fc2c5d79f48d74aa619052df56e4af880e956', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, index.h("slot", { key: 'af0d768b53efd2cc8ab4c4bc3390c9edf896c573', name: "icon" }, d.glyph())), code && (index.h("span", { key: '819358ee0eacb2d378b049970eca9e845c891317', part: "code", class: "bs-error-page__code" }, code))), index.h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (index.h("p", { key: '701eb1787e0beedb193ea73de528bde3a53104bb', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (index.h("div", { key: 'fe1e33d40cfc18493851ec9f244c81472e4a3a27', part: "actions", class: "bs-error-page__actions" }, primary && (index.h("bs-button", { key: '567627956a37daa24bc9ac571505370dcc2c05a6', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (index.h("bs-button", { key: '4190ca2af4469e31d15c3487d29da438b16f64cd', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (index.h("p", { key: '1dde6d7782f1d74ded03accbc04f6799790653c4', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
     }
 };
 const icon = (children) => () => (index.h("svg", { class: "bs-error-page__glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, children));

package/dist/cjs/bs-file-upload-item.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
 const bsFileUploadItemCss = () => `:host{display:block;--bs-file-upload-item-bg:var(--bs-surface-base);--bs-file-upload-item-border-color:var(--bs-border-default);--bs-file-upload-item-border-width:var(--bs-border-width-thin);--bs-file-upload-item-radius:var(--bs-border-radius-150);--bs-file-upload-item-padding:var(--bs-spacing-200);--bs-file-upload-item-gap:var(--bs-spacing-150);--bs-file-upload-item-thumbnail-size:80px;--bs-file-upload-item-thumbnail-radius:var(--bs-border-radius-100);--bs-file-upload-item-thumbnail-bg:var(--bs-surface-container);--bs-file-upload-item-thumbnail-icon-color:var(--bs-icon-muted);--bs-file-upload-item-content-gap:var(--bs-spacing-100);--bs-file-upload-item-name-color:var(--bs-text-default);--bs-file-upload-item-size-color:var(--bs-text-default);--bs-file-upload-item-success-color:var(--bs-text-success);--bs-file-upload-item-success-icon-color:var(--bs-icon-success);--bs-file-upload-item-error-color:var(--bs-text-error);--bs-file-upload-item-error-icon-color:var(--bs-icon-error)}.bs-file-upload-item{box-sizing:border-box;display:flex;align-items:flex-start;gap:var(--bs-file-upload-item-gap);padding:var(--bs-file-upload-item-padding);border:var(--bs-file-upload-item-border-width) solid var(--bs-file-upload-item-border-color);border-radius:var(--bs-file-upload-item-radius);background:var(--bs-file-upload-item-bg);font-size:var(--bs-font-size-md);line-height:calc(var(--bs-line-height-body-md) * 1px)}.bs-file-upload-item__thumbnail{display:flex;flex:none;align-items:center;justify-content:center;width:var(--bs-file-upload-item-thumbnail-size);height:var(--bs-file-upload-item-thumbnail-size);overflow:hidden;border-radius:var(--bs-file-upload-item-thumbnail-radius);background:var(--bs-file-upload-item-thumbnail-bg);color:var(--bs-file-upload-item-thumbnail-icon-color)}.bs-file-upload-item__placeholder{display:block;width:32px;height:32px}.bs-file-upload-item__image{display:block;width:100%;height:100%;object-fit:cover}.bs-file-upload-item__content{display:flex;flex:1;flex-direction:column;justify-content:center;gap:var(--bs-file-upload-item-content-gap);align-self:stretch;min-width:0}.bs-file-upload-item__meta{display:flex;flex-direction:column}.bs-file-upload-item__name{color:var(--bs-file-upload-item-name-color);font-weight:600;overflow-wrap:anywhere}.bs-file-upload-item__size{color:var(--bs-file-upload-item-size-color);font-size:var(--bs-font-size-sm);line-height:calc(var(--bs-line-height-body-sm) * 1px)}.bs-file-upload-item__status{display:flex;align-items:center;gap:var(--bs-spacing-50);min-height:24px}.bs-file-upload-item__status-icon{display:block;flex:none;width:16px;height:16px}.bs-file-upload-item__status--success{color:var(--bs-file-upload-item-success-color)}.bs-file-upload-item__status--success .bs-file-upload-item__status-icon{color:var(--bs-file-upload-item-success-icon-color)}.bs-file-upload-item__status--error{color:var(--bs-file-upload-item-error-color)}.bs-file-upload-item__status--error .bs-file-upload-item__status-icon{color:var(--bs-file-upload-item-error-icon-color)}bs-progress-linear{width:100%}bs-icon-button{flex:none;--bs-icon-neutral-default:var(--bs-icon-default)}@media (forced-colors: active){.bs-file-upload-item{border-color:CanvasText}}`;
 
@@ -71,7 +71,7 @@ const BsFileUploadItem = class {
     }
     render() {
         const removing = this.state === 'success';
-        return (index.h("div", { key: '26933845798c1cee2739c2a5a3d402175244717b', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, index.h("div", { key: 'b7312bfd0a7bcbeac8e098be4cb6d565283f2e0f', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, index.h("slot", { key: '69350d5224f540e0f4d5033e3ac92ccff397b565', name: "thumbnail" }, this.thumbnailSrc ? (index.h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (index.h(ImageIcon, null)))), index.h("div", { key: 'fbe429e0dd56af6fe5d955ce384a335c9ce3843a', class: "bs-file-upload-item__content" }, index.h("div", { key: 'b45f5b5500d760dcfb0d8fe3e87638db9325ae99', class: "bs-file-upload-item__meta" }, index.h("span", { key: '7e5a8cd3ccca37c88182d0e430841f36f29f56e7', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (index.h("span", { key: '114e9167c4542c9e071ebb21ee77d25d5c9221b4', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), index.h("bs-icon-button", { key: 'f6a9a212a6436ac50eaab6b0224b58245171a7de', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? index.h(TrashIcon, null) : index.h(CloseIcon, null))));
+        return (index.h("div", { key: '7c45a43dd6901078911b6709d75b5394cae77626', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, index.h("div", { key: '9911abe4b2876c1afd6aa2c788a92b9737a17b74', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, index.h("slot", { key: '704e42a69efba6dba851247be97778a43aac238a', name: "thumbnail" }, this.thumbnailSrc ? (index.h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (index.h(ImageIcon, null)))), index.h("div", { key: 'd834ed0a69876994d4693e261eda30e636f57d5f', class: "bs-file-upload-item__content" }, index.h("div", { key: 'b22f1d39328698c9b9a847288f1585962ffbd646', class: "bs-file-upload-item__meta" }, index.h("span", { key: 'e82780922ed2e79adff9eb73a8b8ed55100ae58b', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (index.h("span", { key: 'cb8a4ba77ce49b4147b22293937ef6533aa62776', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), index.h("bs-icon-button", { key: 'b07f558ddbaa346ad64abc08f372eb464062425a', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? index.h(TrashIcon, null) : index.h(CloseIcon, null))));
     }
 };
 // Figma exports, recolored via currentColor so the CSS tokens drive the color.

package/dist/cjs/bs-file-upload.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
 const bsFileUploadCss = () => `:host{display:block;--bs-file-upload-bg:var(--bs-surface-raised);--bs-file-upload-bg-dragging:var(--bs-surface-container);--bs-file-upload-border-color:var(--bs-border-neutral-container);--bs-file-upload-border-color-dragging:var(--bs-border-neutral-container-pressed);--bs-file-upload-border-width:var(--bs-border-width-medium);--bs-file-upload-radius:var(--bs-border-radius-150);--bs-file-upload-padding:var(--bs-spacing-300);--bs-file-upload-gap:var(--bs-spacing-300);--bs-file-upload-icon-size:102px;--bs-file-upload-icon-bg:var(--bs-surface-hover);--bs-file-upload-icon-bg-dragging:var(--bs-surface-raised);--bs-file-upload-icon-color:var(--bs-icon-default);--bs-file-upload-content-gap:var(--bs-spacing-100);--bs-file-upload-text-gap:var(--bs-spacing-25);--bs-file-upload-heading-color:var(--bs-text-default);--bs-file-upload-description-color:var(--bs-text-secondary);--bs-file-upload-font-size:var(--bs-font-size-md);--bs-file-upload-line-height:var(--bs-line-height-body-md)}.bs-file-upload{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--bs-file-upload-gap);padding:var(--bs-file-upload-padding);border:var(--bs-file-upload-border-width) dashed var(--bs-file-upload-border-color);border-radius:var(--bs-file-upload-radius);background:var(--bs-file-upload-bg);font-size:var(--bs-file-upload-font-size);line-height:calc(var(--bs-file-upload-line-height) * 1px)}.bs-file-upload--horizontal{flex-direction:row;justify-content:flex-start}.bs-file-upload--vertical{flex-direction:column;text-align:center}.bs-file-upload--dragging{background:var(--bs-file-upload-bg-dragging);border-color:var(--bs-file-upload-border-color-dragging)}.bs-file-upload__icon{display:flex;flex:none;align-items:center;justify-content:center;width:var(--bs-file-upload-icon-size);height:var(--bs-file-upload-icon-size);border-radius:var(--bs-border-radius-full);background:var(--bs-file-upload-icon-bg);color:var(--bs-file-upload-icon-color)}.bs-file-upload--dragging .bs-file-upload__icon{background:var(--bs-file-upload-icon-bg-dragging)}.bs-file-upload__icon-svg,.bs-file-upload__icon ::slotted(*){display:block;width:32px;height:32px}.bs-file-upload__content{display:flex;flex-direction:column;gap:var(--bs-file-upload-content-gap);min-width:0}.bs-file-upload--horizontal .bs-file-upload__content{align-items:flex-start}.bs-file-upload--vertical .bs-file-upload__content{align-items:center}.bs-file-upload__text{display:flex;flex-direction:column;gap:var(--bs-file-upload-text-gap)}.bs-file-upload__heading{color:var(--bs-file-upload-heading-color);font-weight:600}.bs-file-upload__description{color:var(--bs-file-upload-description-color)}.bs-file-upload--disabled{cursor:not-allowed}@media (forced-colors: active){.bs-file-upload{border-color:CanvasText}.bs-file-upload--dragging{border-color:Highlight}}`;
 
@@ -100,7 +100,7 @@ const BsFileUpload = class {
             this.handleFiles(files);
     };
     render() {
-        return (index.h("div", { key: '5312a866a1db63fd378f265fc200a509bfd50ce1', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, index.h("div", { key: '7276ccfa10a086d933b5563a208393a75e0dd821', part: "icon", class: "bs-file-upload__icon" }, index.h("slot", { key: 'e828eaa70303c82cb2bea5e647807079946b62e7', name: "icon" }, index.h(UploadIcon, { key: 'bd6ee5b8b20996ee68f972cb79db7c47f645c4d3' }))), index.h("div", { key: '784440974685713b31ba97642b931b99e64433a3', class: "bs-file-upload__content" }, index.h("div", { key: 'c7568214218e02ecb794f3429b843462f88bf216', class: "bs-file-upload__text" }, this.heading && (index.h("span", { key: '4872f617be4f30b9ab98aeca2dca7012d9391905', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (index.h("span", { key: 'd8f446f1f8690ec773b094aeeb66af49ec1de291', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), index.h("bs-button", { key: 'bb0634e3e0dcb4a4ef59fa7c5daeaacbff5bceda', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), index.h("input", { key: 'f55602446ec222ca46b7dab95aaff26d6d5b1632', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
+        return (index.h("div", { key: 'b444692d61263c742166a4a436e8fe0999ba2410', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, index.h("div", { key: 'b0d5e476e0489b7fe598f9933076cfa43d4e6757', part: "icon", class: "bs-file-upload__icon" }, index.h("slot", { key: 'c0a42996503983e8bd899fd0f582d69df5ef6fbe', name: "icon" }, index.h(UploadIcon, { key: '0c00aec36659e9ddaebcb2fc544be85011cad571' }))), index.h("div", { key: 'f9b691faa0c924cf8d0f055c4f3bc5aaa1db70f1', class: "bs-file-upload__content" }, index.h("div", { key: 'dd15e2cdd12785a070cc4d0d4e53eb0e0e2cde1e', class: "bs-file-upload__text" }, this.heading && (index.h("span", { key: 'd02aafd376d43de1853f4aef16a53b6cabf96f59', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (index.h("span", { key: '2d1b2195352c65a01a18e914f89e8bb84d7d8e68', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), index.h("bs-button", { key: '34608882d553c6a8d8f7f3cf16157e0164b6c087', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), index.h("input", { key: '48f5bf76a00bd12fe2f2f3f25e639d0fa7eeeb78', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
     }
 };
 // Figma's "UploadSimple" icon (3272:50330), exported SVG, recolored via currentColor.

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
 const bsGlobalSearchCss = () => `:host{display:block;position:relative;box-sizing:border-box;width:var(--bs-global-search-width);max-width:100%;--bs-global-search-width:480px;--bs-global-search-panel-radius:var(--bs-border-radius-100);--bs-global-search-panel-padding:var(--bs-spacing-100);--bs-global-search-gap:var(--bs-spacing-100);--bs-global-search-panel-bg:var(--bs-surface-base);--bs-global-search-shadow:0 var(--bs-shadow-position-50) var(--bs-shadow-blur-100) 0 var(--bs-elevation-high);--bs-global-search-z-index:var(--bs-z-index-dropdown);--bs-global-search-divider-color:var(--bs-border-default);--bs-global-search-header-border-color:var(--bs-border-neutral-container);--bs-global-search-header-color:var(--bs-text-muted);--bs-global-search-hint-color:var(--bs-text-secondary)}.bs-global-search{position:relative}.bs-global-search__field bs-input{width:100%}.bs-global-search__panel{position:absolute;top:calc(100% + var(--bs-global-search-gap));left:0;right:0;z-index:var(--bs-global-search-z-index);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-global-search-gap);padding:var(--bs-global-search-panel-padding);overflow:clip;border-radius:var(--bs-global-search-panel-radius);background:var(--bs-global-search-panel-bg);box-shadow:var(--bs-global-search-shadow)}.bs-global-search__list{display:flex;flex-direction:column;gap:var(--bs-global-search-gap)}.bs-global-search__section{display:flex;flex-direction:column}.bs-global-search__section-header{padding:var(--bs-spacing-150) var(--bs-spacing-150) var(--bs-spacing-100);border-bottom:1px solid var(--bs-global-search-header-border-color);color:var(--bs-global-search-header-color);font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-medium);line-height:20px}.bs-global-search__footer{display:flex;align-items:center;gap:var(--bs-spacing-200);padding:var(--bs-spacing-100) var(--bs-spacing-100) var(--bs-spacing-50);border-top:1px solid var(--bs-global-search-divider-color)}.bs-global-search__hint{display:inline-flex;align-items:center;gap:var(--bs-spacing-50);color:var(--bs-global-search-hint-color);font-size:var(--bs-font-size-sm);line-height:20px;white-space:nowrap}.bs-global-search__spacer{flex:1 1 0}.bs-global-search__action{display:flex;align-items:center;min-height:44px;cursor:pointer}.bs-global-search__text-button{--bs-button-height-sm:32px;--bs-button-padding-x-sm:var(--bs-spacing-150);--bs-button-radius:var(--bs-border-radius-100);--bs-button-subtle-color:var(--bs-text-default)}.bs-global-search__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}`;
 
@@ -307,10 +307,10 @@ const BsGlobalSearch = class {
         const listId = `${this.id}-listbox`;
         const isList = this.status === 'default' || this.status === 'results';
         const showFooter = this.showFooter && isList;
-        return (index.h("div", { key: '48912c3c2e6fdfefa05d234fa037e4b47e36cbd9', class: "bs-global-search" }, index.h("div", { key: 'aeb8a5d41463b5df24502aecb85290f2535184d6', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, index.h("bs-input", { key: '0aec5505a09ca9fa08e152983b17e3a35619e5ce', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (index.h("div", { key: 'c9b1589c7602b0522a5a33d895e50e2f57ae7e66', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (index.h("div", { key: 'aa49f77c49ea3aa5337a01aa8cf2e760ac8f6125', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
+        return (index.h("div", { key: '2d45d72757ec457f9bb684fd93de4a49a084dfd4', class: "bs-global-search" }, index.h("div", { key: '7b1e136ca729ce6a8aca989b0e45e32de617a095', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, index.h("bs-input", { key: 'fe16150d64aad5aa5235a325c5d6d2df47f773d4', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (index.h("div", { key: 'fe33656e32a9b7753685bc0854c817e310b7fdb9', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (index.h("div", { key: '9273862a5cb63825652c187cea8b9aabf78179cc', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
             const hid = `${this.id}-h-${s}`;
             return (index.h("div", { part: "section", class: "bs-global-search__section", role: "group", "aria-labelledby": hid }, index.h("div", { part: "section-header", id: hid, class: "bs-global-search__section-header" }, this.sectionLabel(s)), index.h("slot", { name: s })));
-        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), index.h("span", { key: '591953d910a7986705dde045c325c3043df1387b', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
+        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), index.h("span", { key: 'f9f687273bf843a8ee4fcdfcfa196d79c67a5791', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
     }
     static get watchers() { return {
         "status": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
 const bsGridCss = () => `:host{display:block;min-width:0}.bs-grid{display:grid;width:100%;box-sizing:border-box}`;
 
@@ -42,12 +42,12 @@ const BsGrid = class {
         const row = this.rowGap ? this.token(this.rowGap) : gapValue;
         const col = this.columnGap ? this.token(this.columnGap) : gapValue;
         const align = ALIGNS.includes(this.align) ? this.align : 'stretch';
-        return (index.h("div", { key: 'd504eaf0d6db8c106094f3efb60600b65774ea4d', class: "bs-grid", part: "container", style: {
+        return (index.h("div", { key: '6e5451ed57a46f7fc7ce3142786887de2ec44219', class: "bs-grid", part: "container", style: {
                 gridTemplateColumns: this.template(),
                 rowGap: `var(--bs-grid-row-gap, ${row})`,
                 columnGap: `var(--bs-grid-column-gap, ${col})`,
                 alignItems: align,
-            } }, index.h("slot", { key: 'd127b6a767777b1d2cc3fe981e1846e5a8726a60' })));
+            } }, index.h("slot", { key: 'c7609326cceeef12d0d501712bad80dceafd6388' })));
     }
 };
 BsGrid.style = bsGridCss();

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

@@ -0,0 +1,28 @@
+'use strict';
+
+var index = require('./index-BFxk-bY6.js');
+
+const bsHeadingCss = () => `:host{display:block;--bs-heading-color:var(--bs-text-default);--bs-heading-font-family:var(--bs-typography-font-family-heading);--bs-heading-font-weight:var(--bs-font-weight-semibold);--bs-heading-line-height:var(--bs-line-height-snug)}:host([tone='secondary']){--bs-heading-color:var(--bs-text-secondary)}:host([tone='muted']){--bs-heading-color:var(--bs-text-muted)}:host([tone='action']){--bs-heading-color:var(--bs-text-action)}:host([tone='success']){--bs-heading-color:var(--bs-text-success)}:host([tone='info']){--bs-heading-color:var(--bs-text-info)}:host([tone='warning']){--bs-heading-color:var(--bs-text-warning)}:host([tone='error']){--bs-heading-color:var(--bs-text-error)}:host([tone='inverse']){--bs-heading-color:var(--bs-text-inverse)}:host([tone='inherit']){--bs-heading-color:inherit}.bs-heading{margin:0;font-family:var(--bs-heading-font-family);font-weight:var(--bs-heading-font-weight);font-size:var(--bs-heading-font-size);line-height:var(--bs-heading-line-height);color:var(--bs-heading-color)}.bs-heading--display{--bs-heading-font-size:var(--bs-font-size-6xl);--bs-heading-line-height:var(--bs-line-height-tight)}.bs-heading--1{--bs-heading-font-size:var(--bs-font-size-5xl);--bs-heading-line-height:var(--bs-line-height-tight)}.bs-heading--2{--bs-heading-font-size:var(--bs-font-size-4xl)}.bs-heading--3{--bs-heading-font-size:var(--bs-font-size-2xl)}.bs-heading--4{--bs-heading-font-size:var(--bs-font-size-xl)}.bs-heading--5{--bs-heading-font-size:var(--bs-font-size-lg)}.bs-heading--6{--bs-heading-font-size:var(--bs-font-size-md)}`;
+
+const BsHeading = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Heading level 1-6: chooses the element (`h1`-`h6`) and, unless `size` is set, the visual size. */
+    level = 2;
+    /** Overrides the rendered element, e.g. `as="p"` for a heading-looking line that is not part of the outline. When set, `level` only drives the default size. */
+    as;
+    /** Visual size, independent of the element: `display` or `1`-`6` (the default sizes of levels 1-6). Defaults to `level`. */
+    size;
+    /** Text colour from the text tokens. `inherit` uses the surrounding colour. */
+    tone = 'default';
+    render() {
+        const level = Math.min(6, Math.max(1, Number(this.level) || 2));
+        const Tag = (this.as ?? `h${level}`);
+        const size = this.size ?? String(level);
+        return (index.h(Tag, { key: '1bd998474f5a8c28b082fc1f60afd12c1f13747f', part: "heading", class: `bs-heading bs-heading--${size}` }, index.h("slot", { key: 'c10131a495b2a4761ff70fa3f071b6b9781a6a83' })));
+    }
+};
+BsHeading.style = bsHeadingCss();
+
+exports.bs_heading = BsHeading;

package/dist/cjs/bs-icon-button.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
-const bsIconButtonCss = () => `:host{display:inline-block;--bs-icon-button-radius:var(--bs-border-radius-100);--bs-icon-button-size-sm:40px;--bs-icon-button-size-md:44px;--bs-icon-button-size-lg:48px;--bs-icon-button-icon-size-sm:16px;--bs-icon-button-icon-size-md:20px;--bs-icon-button-icon-size-lg:24px;--bs-icon-button-padding:var(--bs-spacing-150);--bs-icon-button-radius-xs:var(--bs-border-radius-50);--bs-icon-button-size-xs:16px;--bs-icon-button-icon-size-xs:8px;--bs-icon-button-padding-xs:var(--bs-spacing-50);--bs-icon-button-primary-default:var(--bs-color-primary-default);--bs-icon-button-primary-hover:var(--bs-color-primary-hover);--bs-icon-button-primary-pressed:var(--bs-color-primary-pressed);--bs-icon-button-primary-disabled:var(--bs-surface-action-disabled);--bs-icon-button-neutral-container:var(--bs-color-neutral-container);--bs-icon-button-neutral-hover:var(--bs-color-neutral-container-hover);--bs-icon-button-neutral-pressed:var(--bs-color-neutral-container-pressed);--bs-icon-button-neutral-border:var(--bs-border-neutral-container);--bs-icon-button-neutral-border-hover:var(--bs-border-neutral-container-hover);--bs-icon-button-neutral-border-pressed:var(--bs-border-neutral-container-pressed);--bs-icon-button-subtle-hover:var(--bs-color-neutral-container);--bs-icon-button-subtle-pressed:var(--bs-color-neutral-container-pressed);--bs-icon-button-subtle-focus:var(--bs-border-primary-focus);--bs-icon-button-outlined-border:var(--bs-color-primary-default);--bs-icon-button-outlined-border-hover:var(--bs-color-primary-hover);--bs-icon-button-outlined-border-pressed:var(--bs-color-primary-pressed);--bs-icon-button-outlined-text-hover:var(--bs-text-action-hover);--bs-icon-button-outlined-container:var(--bs-color-primary-container);--bs-icon-button-outlined-focus:var(--bs-border-primary-focus);--bs-icon-button-success-default:var(--bs-color-success-default);--bs-icon-button-success-hover:var(--bs-color-success-hover);--bs-icon-button-success-pressed:var(--bs-color-success-pressed);--bs-icon-button-success-disabled:var(--bs-surface-action-disabled);--bs-icon-button-success-focus:var(--bs-border-success-focus);--bs-icon-button-warning-default:var(--bs-color-warning-default);--bs-icon-button-warning-hover:var(--bs-color-warning-hover);--bs-icon-button-warning-pressed:var(--bs-color-warning-pressed);--bs-icon-button-warning-disabled:var(--bs-surface-action-disabled);--bs-icon-button-warning-focus:var(--bs-border-warning-focus);--bs-icon-button-info-default:var(--bs-color-info-default);--bs-icon-button-info-hover:var(--bs-color-info-hover);--bs-icon-button-info-pressed:var(--bs-color-info-pressed);--bs-icon-button-info-disabled:var(--bs-surface-action-disabled);--bs-icon-button-info-focus:var(--bs-border-info-focus);--bs-icon-button-error-default:var(--bs-color-error-default);--bs-icon-button-error-hover:var(--bs-color-error-hover);--bs-icon-button-error-pressed:var(--bs-color-error-pressed);--bs-icon-button-error-disabled:var(--bs-surface-action-disabled);--bs-icon-button-error-focus:var(--bs-border-error-focus)}.bs-icon-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;border-radius:var(--bs-icon-button-radius);padding:var(--bs-icon-button-padding);cursor:pointer;transition:background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease)}.bs-icon-button:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-icon-button:disabled{cursor:not-allowed}.bs-icon-button--xs{width:var(--bs-icon-button-size-xs);height:var(--bs-icon-button-size-xs);padding:var(--bs-icon-button-padding-xs);border-radius:var(--bs-icon-button-radius-xs)}.bs-icon-button--xs .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-xs);height:var(--bs-icon-button-icon-size-xs);font-size:var(--bs-icon-button-icon-size-xs)}.bs-icon-button--sm{width:var(--bs-icon-button-size-sm);height:var(--bs-icon-button-size-sm)}.bs-icon-button--sm .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-sm);height:var(--bs-icon-button-icon-size-sm);font-size:var(--bs-icon-button-icon-size-sm)}.bs-icon-button--md{width:var(--bs-icon-button-size-md);height:var(--bs-icon-button-size-md)}.bs-icon-button--md .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-md);height:var(--bs-icon-button-icon-size-md);font-size:var(--bs-icon-button-icon-size-md)}.bs-icon-button--lg{width:var(--bs-icon-button-size-lg);height:var(--bs-icon-button-size-lg)}.bs-icon-button--lg .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-lg);height:var(--bs-icon-button-icon-size-lg);font-size:var(--bs-icon-button-icon-size-lg)}.bs-icon-button__icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;line-height:1}.bs-icon-button__icon ::slotted(*){display:block;width:100%;height:100%;font-size:inherit;line-height:1}.bs-icon-button--primary{background:var(--bs-icon-button-primary-default);color:var(--bs-text-on-action)}.bs-icon-button--primary:hover:not(:disabled){background:var(--bs-icon-button-primary-hover)}.bs-icon-button--primary:active:not(:disabled){background:var(--bs-icon-button-primary-pressed)}.bs-icon-button--primary:disabled{background:var(--bs-icon-button-primary-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--neutral{background:var(--bs-icon-button-neutral-container);color:var(--bs-text-default);border:1px solid var(--bs-icon-button-neutral-border)}.bs-icon-button--neutral:hover:not(:disabled){background:var(--bs-icon-button-neutral-hover);border-color:var(--bs-icon-button-neutral-border-hover)}.bs-icon-button--neutral:active:not(:disabled){background:var(--bs-icon-button-neutral-pressed);border-color:var(--bs-icon-button-neutral-border-pressed)}.bs-icon-button--neutral:disabled{background:var(--bs-icon-button-neutral-container);color:var(--bs-text-on-disabled);border-color:var(--bs-icon-button-neutral-border)}.bs-icon-button--error{background:var(--bs-icon-button-error-default);color:var(--bs-text-on-action)}.bs-icon-button--error:hover:not(:disabled){background:var(--bs-icon-button-error-hover)}.bs-icon-button--error:active:not(:disabled){background:var(--bs-icon-button-error-pressed)}.bs-icon-button--error:disabled{background:var(--bs-icon-button-error-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--error:focus-visible{outline-color:var(--bs-icon-button-error-focus)}.bs-icon-button--success{background:var(--bs-icon-button-success-default);color:var(--bs-text-on-action)}.bs-icon-button--success:hover:not(:disabled){background:var(--bs-icon-button-success-hover)}.bs-icon-button--success:active:not(:disabled){background:var(--bs-icon-button-success-pressed)}.bs-icon-button--success:disabled{background:var(--bs-icon-button-success-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--success:focus-visible{outline-color:var(--bs-icon-button-success-focus)}.bs-icon-button--warning{background:var(--bs-icon-button-warning-default);color:var(--bs-text-on-action)}.bs-icon-button--warning:hover:not(:disabled){background:var(--bs-icon-button-warning-hover)}.bs-icon-button--warning:active:not(:disabled){background:var(--bs-icon-button-warning-pressed)}.bs-icon-button--warning:disabled{background:var(--bs-icon-button-warning-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--warning:focus-visible{outline-color:var(--bs-icon-button-warning-focus)}.bs-icon-button--info{background:var(--bs-icon-button-info-default);color:var(--bs-text-on-action)}.bs-icon-button--info:hover:not(:disabled){background:var(--bs-icon-button-info-hover)}.bs-icon-button--info:active:not(:disabled){background:var(--bs-icon-button-info-pressed)}.bs-icon-button--info:disabled{background:var(--bs-icon-button-info-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--info:focus-visible{outline-color:var(--bs-icon-button-info-focus)}.bs-icon-button--subtle{background:transparent;color:var(--bs-icon-neutral-default)}.bs-icon-button--subtle:hover:not(:disabled){background:var(--bs-icon-button-subtle-hover)}.bs-icon-button--subtle:active:not(:disabled){background:var(--bs-icon-button-subtle-pressed)}.bs-icon-button--subtle:disabled{background:transparent;color:var(--bs-text-on-disabled)}.bs-icon-button--subtle:focus-visible{outline-color:var(--bs-icon-button-subtle-focus);background:var(--bs-icon-button-subtle-hover)}.bs-icon-button--outlined{background:transparent;color:var(--bs-color-primary-default);border:1px solid var(--bs-icon-button-outlined-border)}.bs-icon-button--outlined:hover:not(:disabled){background:var(--bs-icon-button-outlined-container);border-color:var(--bs-icon-button-outlined-border-hover);color:var(--bs-icon-button-outlined-text-hover)}.bs-icon-button--outlined:active:not(:disabled){background:var(--bs-icon-button-outlined-container);color:var(--bs-icon-button-outlined-text-hover);border-color:var(--bs-icon-button-outlined-border-pressed)}.bs-icon-button--outlined:disabled{opacity:var(--bs-opacity-disabled);cursor:not-allowed}.bs-icon-button--outlined:focus-visible{outline-color:var(--bs-icon-button-outlined-focus)}`;
+const bsIconButtonCss = () => `:host{display:inline-block;--bs-icon-button-radius:var(--bs-border-radius-100);--bs-icon-button-size-sm:32px;--bs-icon-button-padding-sm:var(--bs-spacing-100);--bs-icon-button-size-md:44px;--bs-icon-button-size-lg:48px;--bs-icon-button-icon-size-sm:16px;--bs-icon-button-icon-size-md:20px;--bs-icon-button-icon-size-lg:24px;--bs-icon-button-padding:var(--bs-spacing-150);--bs-icon-button-radius-xs:var(--bs-border-radius-50);--bs-icon-button-size-xs:16px;--bs-icon-button-icon-size-xs:8px;--bs-icon-button-padding-xs:var(--bs-spacing-50);--bs-icon-button-primary-default:var(--bs-color-primary-default);--bs-icon-button-primary-hover:var(--bs-color-primary-hover);--bs-icon-button-primary-pressed:var(--bs-color-primary-pressed);--bs-icon-button-primary-disabled:var(--bs-surface-action-disabled);--bs-icon-button-neutral-container:var(--bs-color-neutral-container);--bs-icon-button-neutral-hover:var(--bs-color-neutral-container-hover);--bs-icon-button-neutral-pressed:var(--bs-color-neutral-container-pressed);--bs-icon-button-neutral-border:var(--bs-border-neutral-container);--bs-icon-button-neutral-border-hover:var(--bs-border-neutral-container-hover);--bs-icon-button-neutral-border-pressed:var(--bs-border-neutral-container-pressed);--bs-icon-button-subtle-hover:var(--bs-color-neutral-container);--bs-icon-button-subtle-pressed:var(--bs-color-neutral-container-pressed);--bs-icon-button-subtle-focus:var(--bs-border-primary-focus);--bs-icon-button-outlined-border:var(--bs-color-primary-default);--bs-icon-button-outlined-border-hover:var(--bs-color-primary-hover);--bs-icon-button-outlined-border-pressed:var(--bs-color-primary-pressed);--bs-icon-button-outlined-text-hover:var(--bs-text-action-hover);--bs-icon-button-outlined-container:var(--bs-color-primary-container);--bs-icon-button-outlined-focus:var(--bs-border-primary-focus);--bs-icon-button-success-default:var(--bs-color-success-default);--bs-icon-button-success-hover:var(--bs-color-success-hover);--bs-icon-button-success-pressed:var(--bs-color-success-pressed);--bs-icon-button-success-disabled:var(--bs-surface-action-disabled);--bs-icon-button-success-focus:var(--bs-border-success-focus);--bs-icon-button-warning-default:var(--bs-color-warning-default);--bs-icon-button-warning-hover:var(--bs-color-warning-hover);--bs-icon-button-warning-pressed:var(--bs-color-warning-pressed);--bs-icon-button-warning-disabled:var(--bs-surface-action-disabled);--bs-icon-button-warning-focus:var(--bs-border-warning-focus);--bs-icon-button-info-default:var(--bs-color-info-default);--bs-icon-button-info-hover:var(--bs-color-info-hover);--bs-icon-button-info-pressed:var(--bs-color-info-pressed);--bs-icon-button-info-disabled:var(--bs-surface-action-disabled);--bs-icon-button-info-focus:var(--bs-border-info-focus);--bs-icon-button-error-default:var(--bs-color-error-default);--bs-icon-button-error-hover:var(--bs-color-error-hover);--bs-icon-button-error-pressed:var(--bs-color-error-pressed);--bs-icon-button-error-disabled:var(--bs-surface-action-disabled);--bs-icon-button-error-focus:var(--bs-border-error-focus)}.bs-icon-button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;border-radius:var(--bs-icon-button-radius);padding:var(--bs-icon-button-padding);cursor:pointer;transition:background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease)}.bs-icon-button:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-icon-button:disabled{cursor:not-allowed}.bs-icon-button--xs{width:var(--bs-icon-button-size-xs);height:var(--bs-icon-button-size-xs);padding:var(--bs-icon-button-padding-xs);border-radius:var(--bs-icon-button-radius-xs)}.bs-icon-button--xs .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-xs);height:var(--bs-icon-button-icon-size-xs);font-size:var(--bs-icon-button-icon-size-xs)}.bs-icon-button--xs.bs-icon-button--primary:hover:not(:disabled),.bs-icon-button--xs.bs-icon-button--primary:active:not(:disabled),.bs-icon-button--xs.bs-icon-button--error:hover:not(:disabled),.bs-icon-button--xs.bs-icon-button--error:active:not(:disabled),.bs-icon-button--xs.bs-icon-button--success:hover:not(:disabled),.bs-icon-button--xs.bs-icon-button--success:active:not(:disabled),.bs-icon-button--xs.bs-icon-button--warning:hover:not(:disabled),.bs-icon-button--xs.bs-icon-button--warning:active:not(:disabled),.bs-icon-button--xs.bs-icon-button--info:hover:not(:disabled),.bs-icon-button--xs.bs-icon-button--info:active:not(:disabled){color:var(--bs-text-on-action)}.bs-icon-button--xs.bs-icon-button--neutral:hover:not(:disabled),.bs-icon-button--xs.bs-icon-button--neutral:active:not(:disabled),.bs-icon-button--xs.bs-icon-button--subtle:hover:not(:disabled),.bs-icon-button--xs.bs-icon-button--subtle:active:not(:disabled){color:var(--bs-text-default)}.bs-icon-button--xs.bs-icon-button--outlined:hover:not(:disabled),.bs-icon-button--xs.bs-icon-button--outlined:active:not(:disabled){color:var(--bs-icon-button-outlined-text-hover)}.bs-icon-button--sm{width:var(--bs-icon-button-size-sm);height:var(--bs-icon-button-size-sm);padding:var(--bs-icon-button-padding-sm)}.bs-icon-button--sm .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-sm);height:var(--bs-icon-button-icon-size-sm);font-size:var(--bs-icon-button-icon-size-sm)}.bs-icon-button--md{width:var(--bs-icon-button-size-md);height:var(--bs-icon-button-size-md)}.bs-icon-button--md .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-md);height:var(--bs-icon-button-icon-size-md);font-size:var(--bs-icon-button-icon-size-md)}.bs-icon-button--lg{width:var(--bs-icon-button-size-lg);height:var(--bs-icon-button-size-lg)}.bs-icon-button--lg .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-lg);height:var(--bs-icon-button-icon-size-lg);font-size:var(--bs-icon-button-icon-size-lg)}.bs-icon-button__icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;line-height:1}.bs-icon-button__icon ::slotted(*){display:block;width:100%;height:100%;font-size:inherit;line-height:1}.bs-icon-button--primary{background:var(--bs-icon-button-primary-default);color:var(--bs-text-on-action)}.bs-icon-button--primary:hover:not(:disabled){background:var(--bs-icon-button-primary-hover)}.bs-icon-button--primary:active:not(:disabled){background:var(--bs-icon-button-primary-pressed)}.bs-icon-button--primary:disabled{background:var(--bs-icon-button-primary-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--neutral{background:var(--bs-icon-button-neutral-container);color:var(--bs-text-default);border:1px solid var(--bs-icon-button-neutral-border)}.bs-icon-button--neutral:hover:not(:disabled){background:var(--bs-icon-button-neutral-hover);border-color:var(--bs-icon-button-neutral-border-hover)}.bs-icon-button--neutral:active:not(:disabled){background:var(--bs-icon-button-neutral-pressed);border-color:var(--bs-icon-button-neutral-border-pressed)}.bs-icon-button--neutral:disabled{background:var(--bs-icon-button-neutral-container);color:var(--bs-text-on-disabled);border-color:var(--bs-icon-button-neutral-border)}.bs-icon-button--error{background:var(--bs-icon-button-error-default);color:var(--bs-text-on-action)}.bs-icon-button--error:hover:not(:disabled){background:var(--bs-icon-button-error-hover)}.bs-icon-button--error:active:not(:disabled){background:var(--bs-icon-button-error-pressed)}.bs-icon-button--error:disabled{background:var(--bs-icon-button-error-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--error:focus-visible{outline-color:var(--bs-icon-button-error-focus)}.bs-icon-button--success{background:var(--bs-icon-button-success-default);color:var(--bs-text-on-action)}.bs-icon-button--success:hover:not(:disabled){background:var(--bs-icon-button-success-hover)}.bs-icon-button--success:active:not(:disabled){background:var(--bs-icon-button-success-pressed)}.bs-icon-button--success:disabled{background:var(--bs-icon-button-success-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--success:focus-visible{outline-color:var(--bs-icon-button-success-focus)}.bs-icon-button--warning{background:var(--bs-icon-button-warning-default);color:var(--bs-text-on-action)}.bs-icon-button--warning:hover:not(:disabled){background:var(--bs-icon-button-warning-hover)}.bs-icon-button--warning:active:not(:disabled){background:var(--bs-icon-button-warning-pressed)}.bs-icon-button--warning:disabled{background:var(--bs-icon-button-warning-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--warning:focus-visible{outline-color:var(--bs-icon-button-warning-focus)}.bs-icon-button--info{background:var(--bs-icon-button-info-default);color:var(--bs-text-on-action)}.bs-icon-button--info:hover:not(:disabled){background:var(--bs-icon-button-info-hover)}.bs-icon-button--info:active:not(:disabled){background:var(--bs-icon-button-info-pressed)}.bs-icon-button--info:disabled{background:var(--bs-icon-button-info-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--info:focus-visible{outline-color:var(--bs-icon-button-info-focus)}.bs-icon-button--subtle{background:transparent;color:var(--bs-icon-neutral-default)}.bs-icon-button--subtle:hover:not(:disabled){background:var(--bs-icon-button-subtle-hover)}.bs-icon-button--subtle:active:not(:disabled){background:var(--bs-icon-button-subtle-pressed)}.bs-icon-button--subtle:disabled{background:transparent;color:var(--bs-text-on-disabled)}.bs-icon-button--subtle:focus-visible{outline-color:var(--bs-icon-button-subtle-focus);background:var(--bs-icon-button-subtle-hover)}.bs-icon-button--outlined{background:transparent;color:var(--bs-color-primary-default);border:1px solid var(--bs-icon-button-outlined-border)}.bs-icon-button--outlined:hover:not(:disabled){background:var(--bs-icon-button-outlined-container);border-color:var(--bs-icon-button-outlined-border-hover);color:var(--bs-icon-button-outlined-text-hover)}.bs-icon-button--outlined:active:not(:disabled){background:var(--bs-icon-button-outlined-container);color:var(--bs-icon-button-outlined-text-hover);border-color:var(--bs-icon-button-outlined-border-pressed)}.bs-icon-button--outlined:disabled{opacity:var(--bs-opacity-disabled);cursor:not-allowed}.bs-icon-button--outlined:focus-visible{outline-color:var(--bs-icon-button-outlined-focus)}`;
 
 const BsIconButton = class {
     constructor(hostRef) {
@@ -39,6 +39,13 @@ const BsIconButton = class {
      * prop to the `aria-label` HTML attribute automatically.
      */
     ariaLabel = null;
+    /** Forwarded to the inner `<button>` as `aria-expanded`, for disclosure/menu buttons. */
+    ariaExpanded = null;
+    /** Forwarded to the inner `<button>` as `aria-controls`. Note an id only resolves inside this
+     * component's shadow tree, so it can't point at an element in the page's light DOM. */
+    ariaControls = null;
+    /** Forwarded to the inner `<button>` as `aria-haspopup`. */
+    ariaHasPopup = null;
     /**
      * Makes this a toggle button: sets `aria-pressed` on the inner `<button>` to `true`/`false`. Leave it
      * unset (the default) for a plain action button, which then has no `aria-pressed` at all. The component
@@ -56,7 +63,7 @@ const BsIconButton = class {
             form.reset();
     };
     render() {
-        return (index.h("button", { key: 'e04c7785712f0f9a2bfaa0efd51712d7c6ca805e', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, "aria-pressed": this.pressed === undefined ? undefined : String(this.pressed), onClick: this.onClick }, index.h("span", { key: '2b9cfb3af8b3914ee88a3244c3d1f102cbae7082', part: "icon", class: "bs-icon-button__icon" }, index.h("slot", { key: 'b561552aece8e0f8ae83dd6619295e5c9477aa89' }))));
+        return (index.h("button", { key: 'e95b86e2b5151e92ed392fcb0bbaaf54349b482f', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, "aria-expanded": this.ariaExpanded, "aria-controls": this.ariaControls, "aria-haspopup": this.ariaHasPopup, "aria-pressed": this.pressed === undefined ? undefined : String(this.pressed), onClick: this.onClick }, index.h("bs-ripple", { key: '16e9a328454974ae4947b9deb0b1af981e296be7', part: "ripple", centered: true, disabled: this.disabled }), index.h("span", { key: '645b15068abb821d134a01caa28b300d37236e0e', part: "icon", class: "bs-icon-button__icon" }, index.h("slot", { key: 'ae1243aedfbe25131ce538748c2e84d214ecc2be' }))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

package/dist/cjs/bs-icon-tile.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
 const bsIconTileCss = () => `:host{display:inline-flex;align-items:center;gap:var(--bs-icon-tile-text-gap);vertical-align:middle;--bs-icon-tile-size:24px;--bs-icon-tile-radius:var(--bs-border-radius-50);--bs-icon-tile-icon-size:12px;--bs-icon-tile-text-color:var(--bs-text-default);--bs-icon-tile-text-gap:var(--bs-spacing-100);--bs-icon-tile-bg:var(--bs-color-neutral-container);--bs-icon-tile-color:var(--bs-icon-default)}:host([size='md']){--bs-icon-tile-size:32px;--bs-icon-tile-radius:calc(var(--bs-border-radius-100) * 2 / 3);--bs-icon-tile-icon-size:16px}:host([size='lg']){--bs-icon-tile-size:48px;--bs-icon-tile-radius:var(--bs-border-radius-100);--bs-icon-tile-icon-size:24px}:host([intent='success']){--bs-icon-tile-bg:var(--bs-icon-tile-success-bg, var(--bs-success-50));--bs-icon-tile-color:var(--bs-icon-tile-success-color, var(--bs-icon-success))}:host([intent='warning']){--bs-icon-tile-bg:var(--bs-icon-tile-warning-bg, var(--bs-color-warning-container));--bs-icon-tile-color:var(--bs-icon-tile-warning-color, var(--bs-icon-warning))}:host([intent='error']){--bs-icon-tile-bg:var(--bs-icon-tile-error-bg, var(--bs-color-error-container));--bs-icon-tile-color:var(--bs-icon-tile-error-color, var(--bs-icon-error))}:host([intent='brand']){--bs-icon-tile-bg:var(--bs-color-primary-container);--bs-icon-tile-color:var(--bs-icon-action)}:host([intent='information']){--bs-icon-tile-bg:var(--bs-icon-tile-information-bg, var(--bs-information-50));--bs-icon-tile-color:var(--bs-icon-tile-information-color, var(--bs-icon-info))}.bs-icon-tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:none;width:var(--bs-icon-tile-size);height:var(--bs-icon-tile-size);border-radius:var(--bs-icon-tile-radius);background:var(--bs-icon-tile-bg);color:var(--bs-icon-tile-color);overflow:hidden}.bs-icon-tile__icon{display:flex;align-items:center;justify-content:center;width:var(--bs-icon-tile-icon-size);height:var(--bs-icon-tile-icon-size)}.bs-icon-tile__icon svg,::slotted(svg),::slotted(img){width:var(--bs-icon-tile-icon-size);height:var(--bs-icon-tile-icon-size)}.bs-icon-tile__text{display:none;color:var(--bs-icon-tile-text-color);font-size:var(--bs-font-size-md);line-height:24px}.bs-icon-tile__text--visible{display:block}:host([size='sm']) .bs-icon-tile__text{font-size:var(--bs-font-size-sm);line-height:20px}`;
 
@@ -30,8 +30,8 @@ const BsIconTile = class {
     render() {
         const labelled = !!this.label;
         return [
-            index.h("div", { key: 'ea92c7e93e3283dccf7feb0afcc87947eb9f3087', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, index.h("span", { key: '50ba78a85b831869ea60882b89739cc0ef36a6b4', part: "icon", class: "bs-icon-tile__icon" }, index.h("slot", { key: 'ab395f4bfc9a40be9ac74f05ebf227a241cdfca8', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
-            index.h("span", { key: '07ad1aa22ba646f82b8eb2782ddda0c816dc47a5', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, index.h("slot", { key: 'f4209dee495bf82b95c95fcd754bdf8305d5b02f', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
+            index.h("div", { key: '312539518cebf4f02edfd480fc56899b5561203d', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, index.h("span", { key: '451991c16cba6afd20f4029fe39c607c09564119', part: "icon", class: "bs-icon-tile__icon" }, index.h("slot", { key: 'db458731df94f9abb079d1c432105baa482b5ae4', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
+            index.h("span", { key: 'cb8186734c1378b0f4d0ae16e1113bd9a82e5930', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, index.h("slot", { key: 'ad2416e6a042634eca44acb5d8768754343900b5', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
         ];
     }
 };