@brandsync/wc 1.17.0 → 1.18.0

package/dist/cjs/bs-keyboard-shortcuts.cjs.entry.js

@@ -101,10 +101,10 @@ const BsKeyboardShortcuts = class {
         const headId = `${this.id}-heading`;
         const noResults = count === 0 && (this.query ?? '').trim() !== '';
         let gi = 0;
-        return (index.h("bs-card", { key: '602e1b2fbeb09dc848435562c3188f784a96a26f', part: "container", class: "bs-keyboard-shortcuts", surface: "base", role: "region", "aria-labelledby": headId, onKeyDown: this.onKeyDown }, index.h("div", { key: '1ad1ad5d14769b755362b1c965390d929d190a81', class: "bs-keyboard-shortcuts__body" }, index.h("div", { key: '86e635b3e14a47fa5df69983f9fab132ab8b334c', part: "head", class: "bs-keyboard-shortcuts__head" }, index.h("svg", { key: '1b7c59483a38971e214126b309e2f62c7f69457c', class: "bs-keyboard-shortcuts__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("rect", { key: 'e70a9a55b1fa027dbaa50870dd79d2c2b4805efd', x: "2", y: "5", width: "20", height: "14", rx: "2" }), index.h("path", { key: '17c1bf9e1f044b802f1538a70da58334e1b328c4', d: "M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 15.5h6" })), index.h("h4", { key: '06466a27347a74bb61ab23f0a57ec19b8fd3feb7', part: "heading", id: headId, class: "bs-keyboard-shortcuts__heading" }, index.h("slot", { key: '307d0611ceffa704345f1a138796e76df9101162', name: "heading" }, this.heading)), index.h("bs-icon-button", { key: 'a9126801a045b8e95301a2fd6cfcbae20e9ef29b', part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: () => this.bsClose.emit() }, index.h("svg", { key: '472f6467736f6baadd13ed4f723107be92dc9147', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, index.h("path", { key: 'b20530074ac46a1764f613f02c9aca7be9771c40', d: "M6 6l12 12M18 6 6 18" })))), index.h("bs-input", { key: '94eb5e7ac066359e150681a0b9016da7e98d45b0', part: "search", type: "search", placeholder: this.searchPlaceholder, value: this.query, onBsInput: this.onInput }), this.showSingleKeySwitch && (index.h("div", { key: 'b51f32af80233153e3f2e957e364e82e8458b0d5', part: "switch", class: "bs-keyboard-shortcuts__switch" }, index.h("div", { key: '5c043a1b80b20fc9b636b293a3e0782807d3fa0c', class: "bs-keyboard-shortcuts__switch-text" }, index.h("span", { key: 'bcc7015e1084d3479ff257fdc50e12b813d90bbd', class: "bs-keyboard-shortcuts__switch-title" }, this.singleKeyLabel), index.h("span", { key: '43b88ef5e2368da7f1304c6c6c05c125a87132f8', class: "bs-keyboard-shortcuts__switch-caption" }, this.singleKeyDescription)), index.h("bs-switch", { key: 'b7d95ac144d87947f64199ea9cf83eb108a2f00c', ariaLabel: this.singleKeyLabel, checked: this.singleKeyEnabled, onBsChange: this.onSwitch }))), index.h("span", { key: 'd6d155b36ca413bca0978addbe1a82370d71c645', class: "bs-keyboard-shortcuts__live", "aria-live": "polite" }, `${count} shortcut${count === 1 ? '' : 's'}`), noResults ? (index.h("p", { part: "empty", class: "bs-keyboard-shortcuts__empty", role: "status" }, this.noResultsText)) : (index.h("div", { part: "groups", class: "bs-keyboard-shortcuts__groups" }, cols.map(col => (index.h("div", { class: "bs-keyboard-shortcuts__column" }, col.map(g => {
+        return (index.h("bs-card", { key: '7e825a3d2c214a2228c8b302bc6530ca23427b2f', part: "container", class: "bs-keyboard-shortcuts", surface: "base", role: "region", "aria-labelledby": headId, onKeyDown: this.onKeyDown }, index.h("div", { key: '8595c3352463214acefb820a23a9adbdd66e6b76', class: "bs-keyboard-shortcuts__body" }, index.h("div", { key: 'bbdb0c462e6958d6fbeca96bd5ffb5dc99bdaf19', part: "head", class: "bs-keyboard-shortcuts__head" }, index.h("svg", { key: '95641e98b3795b85caa6e70ebd9bd2deeecdc2aa', class: "bs-keyboard-shortcuts__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("rect", { key: 'b1160b8146645716ea1b675c480f42675a4d6f29', x: "2", y: "5", width: "20", height: "14", rx: "2" }), index.h("path", { key: '18f2516e9113b2c335587bd3d17c49099496f1ec', d: "M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 15.5h6" })), index.h("h4", { key: '299d3fa12acc958389b7cd6b7ec9c2cefe12ed43', part: "heading", id: headId, class: "bs-keyboard-shortcuts__heading" }, index.h("slot", { key: '80365f19a624d950cfa678b1d2cb7a2eb7dbeb33', name: "heading" }, this.heading)), index.h("bs-icon-button", { key: '2e43986aac1914ab56527ac09e08889fbe6ca0ef', part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: () => this.bsClose.emit() }, index.h("svg", { key: 'cd655a49a3142304b168c8a8f25c89b63c0fbc79', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, index.h("path", { key: '7a39bf4eb97bde3d6d81d3db53fea3589af6e8c9', d: "M6 6l12 12M18 6 6 18" })))), index.h("bs-input", { key: 'b86dc235443e567aede36a767ddc015481ef08fa', part: "search", type: "search", placeholder: this.searchPlaceholder, value: this.query, onBsInput: this.onInput }), this.showSingleKeySwitch && (index.h("div", { key: '4fe525465a7dbae779af2aa9596669d06a8c7f71', part: "switch", class: "bs-keyboard-shortcuts__switch" }, index.h("div", { key: '2821019a258b02c2d37679360001cd6ba390d304', class: "bs-keyboard-shortcuts__switch-text" }, index.h("span", { key: '58f8f4dca914d41ad2b9b8883a117d4b865b4faa', class: "bs-keyboard-shortcuts__switch-title" }, this.singleKeyLabel), index.h("span", { key: '41cfb03e58e546ed639a38452524b775065f1027', class: "bs-keyboard-shortcuts__switch-caption" }, this.singleKeyDescription)), index.h("bs-switch", { key: 'a974154d5c9388fc5fa6b4b077f148fbe37340c4', ariaLabel: this.singleKeyLabel, checked: this.singleKeyEnabled, onBsChange: this.onSwitch }))), index.h("span", { key: '636f5d35847c6bd0dcfc2d0f00b4d126bb764fbc', class: "bs-keyboard-shortcuts__live", "aria-live": "polite" }, `${count} shortcut${count === 1 ? '' : 's'}`), noResults ? (index.h("p", { part: "empty", class: "bs-keyboard-shortcuts__empty", role: "status" }, this.noResultsText)) : (index.h("div", { part: "groups", class: "bs-keyboard-shortcuts__groups" }, cols.map(col => (index.h("div", { class: "bs-keyboard-shortcuts__column" }, col.map(g => {
             const tid = `${this.id}-g${gi++}`;
             return (index.h("div", { part: "group", class: "bs-keyboard-shortcuts__group", role: "group", "aria-labelledby": tid }, index.h("div", { part: "group-title", id: tid, class: "bs-keyboard-shortcuts__group-title" }, g.title), index.h("div", { class: "bs-keyboard-shortcuts__rows", role: "list" }, g.shortcuts.map(s => (index.h("bs-shortcut-row", { part: "row", action: s.action, keys: s.keys, selectionRole: "listitem", disabled: !!s.disabled || (!this.singleKeyEnabled && isSingleKey(s)) }))))));
-        })))))), this.showFooterHint && (index.h("div", { key: 'b61974f27c2909fe207e3e604b06ed408516a810', part: "footer", class: "bs-keyboard-shortcuts__footer" }, index.h("slot", { key: '44c2ddc9cd9e99418ee4edaf030e51f663bee47b', name: "footer" }, index.h("span", { key: '9679714a84380363982b4d7111bdc424547e4aa8' }, this.footerPrefix), index.h("bs-key", { key: '2945e09a15994b15753bad68530700020e666968', label: this.footerKey }), index.h("span", { key: '90fe405d4aeebb0dbd31d291e85dee48c12f6258' }, this.footerText)))))));
+        })))))), this.showFooterHint && (index.h("div", { key: '05833326cdbea5dbb994fd584bc54866c14cf615', part: "footer", class: "bs-keyboard-shortcuts__footer" }, index.h("slot", { key: 'eeb752068052c3f27cbfa0893f03a22f04328489', name: "footer" }, index.h("span", { key: '55c95afd62dae51c2b82362210e558fad904f7b7' }, this.footerPrefix), index.h("bs-key", { key: 'b9f8ef5cd3b3e5e2fce7a99bd2b29d751a764901', label: this.footerKey }), index.h("span", { key: '13b4719f50cd4d3fadc2802cb22d31f04e775798' }, this.footerText)))))));
     }
 };
 BsKeyboardShortcuts.style = bsKeyboardShortcutsCss();

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

@@ -0,0 +1,215 @@
+'use strict';
+
+var index = require('./index-BYfMRtlW.js');
+
+const bsListItemCss = () => `:host{display:block;width:100%;box-sizing:border-box;outline:none;color:var(--bs-list-item-color);--bs-list-item-min-height:var(--bs-spacing-1000);--bs-list-item-padding-y:var(--bs-spacing-150);--bs-list-item-padding-x:var(--bs-spacing-200);--bs-list-item-gap:var(--bs-spacing-200);--bs-list-item-content-gap:var(--bs-spacing-25);--bs-list-item-radius:var(--bs-border-radius-100);--bs-list-item-bg:transparent;--bs-list-item-bg-hover:var(--bs-surface-hover);--bs-list-item-bg-pressed:var(--bs-surface-pressed);--bs-list-item-bg-focus:var(--bs-surface-focus);--bs-list-item-bg-selected:var(--bs-surface-selected);--bs-list-item-bg-selected-hover:var(--bs-surface-selected-hover);--bs-list-item-bg-selected-pressed:var(--bs-surface-selected-pressed);--bs-list-item-bg-selected-focus:var(--bs-surface-selected-focus);--bs-list-item-bg-disabled:var(--bs-surface-action-disabled);--bs-list-item-color:var(--bs-text-default);--bs-list-item-color-disabled:var(--bs-text-on-disabled);--bs-list-item-focus-ring:var(--bs-border-neutral-focus);--bs-list-item-image-width:72px;--bs-list-item-image-height:56px}.bs-list-item{box-sizing:border-box;display:flex;align-items:center;gap:var(--bs-list-item-gap);width:100%;min-height:var(--bs-list-item-min-height);padding:var(--bs-list-item-padding-y) var(--bs-list-item-padding-x);border-radius:var(--bs-list-item-radius);overflow:clip;background:var(--bs-list-item-bg);color:var(--bs-list-item-color);font-family:inherit;font-size:var(--bs-font-size-md);line-height:calc(var(--bs-line-height-body-md) * 1px);transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}:host([selected]) .bs-list-item{background:var(--bs-list-item-bg-selected)}:host(.bs-list-item--interactive){cursor:pointer}:host(.bs-list-item--interactive:hover) .bs-list-item{background:var(--bs-list-item-bg-hover)}:host(.bs-list-item--interactive[selected]:hover) .bs-list-item{background:var(--bs-list-item-bg-selected-hover)}:host(.bs-list-item--interactive:active) .bs-list-item{background:var(--bs-list-item-bg-pressed)}:host(.bs-list-item--interactive[selected]:active) .bs-list-item{background:var(--bs-list-item-bg-selected-pressed)}:host(:focus-visible) .bs-list-item{background:var(--bs-list-item-bg-focus);outline:2px solid var(--bs-list-item-focus-ring);outline-offset:2px}:host([selected]:focus-visible) .bs-list-item{background:var(--bs-list-item-bg-selected-focus)}:host([disabled]){color:var(--bs-list-item-color-disabled);cursor:default}:host([disabled]) .bs-list-item{background:var(--bs-list-item-bg-disabled);color:var(--bs-list-item-color-disabled)}:host([disabled]) ::slotted(img),:host([disabled]) ::slotted(bs-avatar){opacity:0.5}.bs-list-item__leading{display:none;flex-shrink:0;align-items:center}.bs-list-item__leading--has-content{display:flex}::slotted(img[slot='leading']){display:block;width:var(--bs-list-item-image-width);height:var(--bs-list-item-image-height);border-radius:var(--bs-border-radius-100);object-fit:cover}::slotted(svg[slot='leading']){width:32px;height:32px}.bs-list-item__content{display:flex;flex-direction:column;gap:var(--bs-list-item-content-gap);flex:1 1 0;min-width:0}.bs-list-item__label{font-weight:var(--bs-font-weight-semibold)}.bs-list-item__description,.bs-list-item__support{font-weight:var(--bs-font-weight-regular)}.bs-list-item__trailing{display:none;flex-shrink:0;align-items:center;height:32px}.bs-list-item__trailing--shown{display:flex}@media (prefers-reduced-motion: reduce){.bs-list-item{transition:none}}`;
+
+const BsListItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsItemClick = index.createEvent(this, "bsItemClick");
+    }
+    get el() { return index.getElement(this); }
+    /** First text line (semibold). */
+    label = null;
+    /** Second text line (the "paragraph"). */
+    description = null;
+    /** Optional third text line. */
+    supportText = null;
+    /** Marks the row as selected. Managed by the parent `bs-list` when it is `selectable`. */
+    selected = false;
+    /** Disables the row: dimmed, not focusable, no click event. */
+    disabled = false;
+    /** Shows a trailing caret (unless the `trailing` slot has content). */
+    showArrow = false;
+    /** Identifies the item; emitted by `bsItemClick` and matched against `bs-list`'s `value`. */
+    value = null;
+    /** Makes a standalone row a focusable `role="button"` that emits `bsItemClick`. */
+    interactive = false;
+    /** Set by the parent `bs-list`: `listitem` (plain list) or `option` (selectable list). Do not set by hand. */
+    selectionRole = null;
+    hasLeading = false;
+    hasTrailing = false;
+    hasDefault = false;
+    /** Fires on click / Enter / Space when the row is interactive and not disabled. Payload is `value`. */
+    bsItemClick;
+    get isInteractive() {
+        return this.selectionRole === 'option' || this.interactive;
+    }
+    activate() {
+        if (this.disabled || !this.isInteractive)
+            return;
+        this.bsItemClick.emit(this.value);
+    }
+    onClick() {
+        this.activate();
+    }
+    onKeyDown(ev) {
+        if (ev.target !== this.el)
+            return;
+        if (ev.key === 'Enter' || ev.key === ' ') {
+            ev.preventDefault();
+            this.activate();
+        }
+    }
+    slotHas = (ev) => ev.target.assignedNodes({ flatten: true }).some(n => n.nodeType === 1 || (n.textContent || '').trim() !== '');
+    render() {
+        const interactive = this.isInteractive;
+        const role = this.selectionRole === 'option' ? 'option' : this.selectionRole === 'listitem' ? 'listitem' : this.interactive ? 'button' : undefined;
+        const standaloneFocusable = this.interactive && !this.selectionRole && !this.disabled;
+        const showTrailing = this.showArrow || this.hasTrailing;
+        return (index.h(index.Host, { key: 'eac7aeec4fedc05af55c5ca7a78efb693199de3a', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, index.h("div", { key: '3ba832febb95adfc10481b0b1d70cc4448f0a9dd', part: "container", class: "bs-list-item" }, index.h("div", { key: 'd528d17243f6185d164c5f6964abe4b1d8143d5b', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, index.h("slot", { key: '60efa1761cc46a7790986689acbada2f99d94add', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), index.h("div", { key: '4af6ee3b0969aeecdc2ead6b63be52b90927b713', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (index.h("div", { key: '57481516f3d3ed73854a58fa870d40d760252b99', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (index.h("div", { key: 'acb37f4ec42b1c4c49d82cd21a89353a48ff3fcc', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (index.h("div", { key: 'b9e310fd74f06b1114b2ecf64b6c7de8b63a4c61', part: "support-text", class: "bs-list-item__support" }, this.supportText)), index.h("slot", { key: '7bb751ff77d29cd6f1852c90f5e71f855b222345', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), index.h("div", { key: '2bf6cb3dedfe1dcf868aba049f3718083ec63830', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, index.h("slot", { key: '5cf7ede0e83b1040210346bdf7e7e6a5c7d06cfd', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (index.h("svg", { key: 'fb103f9892eebfd9a481c8d4b60e7504cb19311e', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, index.h("path", { key: 'c33fa8a2aaa5a446adde56c7c8d4bfece8ef1dc9', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+    }
+};
+BsListItem.style = bsListItemCss();
+
+const bsPopoverCss = () => `:host{display:inline-block;position:relative;--bs-popover-bg:var(--bs-surface-raised);--bs-popover-radius:var(--bs-border-radius-100);--bs-popover-shadow:var(--bs-shadow-md);--bs-popover-offset:var(--bs-spacing-100);--bs-popover-min-width:var(--bs-scale-1600);--bs-popover-z-index:var(--bs-z-index-popover)}.bs-popover__trigger{display:inline-block}.bs-popover__popup{position:absolute;z-index:var(--bs-popover-z-index);min-width:var(--bs-popover-min-width);background:var(--bs-popover-bg);border-radius:var(--bs-popover-radius);box-shadow:var(--bs-popover-shadow);top:calc(100% + var(--bs-popover-offset));left:0}.bs-popover__popup{outline:none}.bs-popover__popup[hidden]{display:none}:host([data-placement='bottom-start']) .bs-popover__popup{top:calc(100% + var(--bs-popover-offset));bottom:auto;left:0;right:auto}:host([data-placement='bottom-end']) .bs-popover__popup{top:calc(100% + var(--bs-popover-offset));bottom:auto;left:auto;right:0}:host([data-placement='top-start']) .bs-popover__popup{top:auto;left:0;right:auto;bottom:calc(100% + var(--bs-popover-offset))}:host([data-placement='top-end']) .bs-popover__popup{top:auto;left:auto;right:0;bottom:calc(100% + var(--bs-popover-offset))}`;
+
+let popoverId = 0;
+const BsPopover = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsOpenChange = index.createEvent(this, "bsOpenChange");
+    }
+    get el() { return index.getElement(this); }
+    /** Whether the popup is shown. */
+    open = false;
+    /** Where the popup sits relative to the trigger. */
+    placement = 'bottom-start';
+    /** Emitted when the open state changes through user interaction, with the new value. */
+    bsOpenChange;
+    popupId = `bs-popover-${++popoverId}`;
+    triggerSlot;
+    popupEl;
+    needsFocusIn = false;
+    escaped = false;
+    onOpenChange(next) {
+        this.detach();
+        if (next) {
+            document.addEventListener('click', this.onDocClick, true);
+            document.addEventListener('keydown', this.onKeyDown);
+            window.addEventListener('resize', this.reposition);
+            window.addEventListener('scroll', this.reposition, true);
+            this.needsFocusIn = true;
+        }
+        else {
+            this.needsFocusIn = false;
+            this.el.setAttribute('data-placement', this.placement);
+            const active = this.el.shadowRoot?.activeElement || document.activeElement;
+            const focusInside = this.el.contains(document.activeElement) && document.activeElement !== this.triggerSlot?.assignedElements()[0] && !this.isInTrigger(document.activeElement);
+            if (this.escaped || (focusInside && active))
+                this.focusTrigger();
+        }
+        this.escaped = false;
+    }
+    onPlacementChange() {
+        this.reposition();
+    }
+    componentWillLoad() {
+        this.el.setAttribute('data-placement', this.placement);
+    }
+    componentDidRender() {
+        if (!this.open)
+            return;
+        this.reposition();
+        if (this.needsFocusIn) {
+            this.needsFocusIn = false;
+            this.focusPopup();
+        }
+    }
+    isInTrigger(node) {
+        const first = this.triggerSlot?.assignedElements() ?? [];
+        return !!node && first.some(t => t.contains(node));
+    }
+    /** Effective placement after collision flipping; mirrored on the host as `data-placement`. */
+    reposition = () => {
+        if (!this.open || !this.popupEl)
+            return;
+        const [v, h] = this.placement.split('-');
+        // Measure from the preferred placement.
+        this.el.setAttribute('data-placement', this.placement);
+        const trig = this.el.getBoundingClientRect();
+        const pop = this.popupEl.getBoundingClientRect();
+        const vh = window.innerHeight;
+        const vw = window.innerWidth;
+        let rv = v;
+        let rh = h;
+        if (v === 'bottom' && pop.bottom > vh && trig.top >= pop.height)
+            rv = 'top';
+        else if (v === 'top' && pop.top < 0 && vh - trig.bottom >= pop.height)
+            rv = 'bottom';
+        if (h === 'start' && pop.right > vw && trig.right >= pop.width)
+            rh = 'end';
+        else if (h === 'end' && pop.left < 0 && vw - trig.left >= pop.width)
+            rh = 'start';
+        this.el.setAttribute('data-placement', `${rv}-${rh}`);
+    };
+    focusPopup() {
+        const sel = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+        const slot = this.popupEl?.querySelector('slot');
+        const assigned = slot?.assignedElements({ flatten: true }) ?? [];
+        for (const a of assigned) {
+            const target = a.matches(sel) ? a : a.querySelector(sel);
+            if (target) {
+                target.focus();
+                return;
+            }
+        }
+        this.popupEl?.focus();
+    }
+    disconnectedCallback() {
+        this.detach();
+    }
+    componentDidLoad() {
+        if (this.open)
+            this.onOpenChange(true);
+    }
+    detach() {
+        document.removeEventListener('click', this.onDocClick, true);
+        document.removeEventListener('keydown', this.onKeyDown);
+        window.removeEventListener('resize', this.reposition);
+        window.removeEventListener('scroll', this.reposition, true);
+    }
+    setOpen(next) {
+        if (this.open === next)
+            return;
+        this.open = next;
+        this.bsOpenChange.emit(next);
+    }
+    focusTrigger() {
+        const first = this.triggerSlot?.assignedElements()[0];
+        first?.focus();
+    }
+    onTriggerKeyDown = (ev) => {
+        if (ev.key === 'ArrowDown' && !this.open) {
+            ev.preventDefault();
+            this.setOpen(true);
+        }
+    };
+    onTriggerClick = () => this.setOpen(!this.open);
+    onDocClick = (ev) => {
+        if (!ev.composedPath().includes(this.el))
+            this.setOpen(false);
+    };
+    onKeyDown = (ev) => {
+        if (ev.key === 'Escape' && this.open) {
+            this.escaped = true;
+            this.setOpen(false);
+        }
+    };
+    render() {
+        return (index.h("div", { key: 'a98416df7a3b9edbbac835ea99150bd22e21d0b1', class: "bs-popover" }, index.h("div", { key: 'd69eb18d28a99bd22d14a40167c1a5f9d4ed09e5', part: "trigger", class: "bs-popover__trigger", "aria-haspopup": "true", "aria-expanded": String(this.open), "aria-controls": this.popupId, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, index.h("slot", { key: '3b6242971ba9f2bcccfdddfe15b564b3deef1eec', name: "trigger", ref: el => (this.triggerSlot = el) })), index.h("div", { key: '0d815e6f7ec731e5643891784b35df2cb635a6a9', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open, ref: el => (this.popupEl = el) }, index.h("slot", { key: '8e455726291b8f4faaaf1f1fee190047cbd9525b' }))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }],
+        "placement": [{
+                "onPlacementChange": 0
+            }]
+    }; }
+};
+BsPopover.style = bsPopoverCss();
+
+exports.bs_list_item = BsListItem;
+exports.bs_popover = BsPopover;

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

@@ -87,7 +87,7 @@ const BsList = class {
         enabled[next].focus();
     }
     render() {
-        return (index.h("div", { key: '82a1f810e0044095794fa797075abb025275a973', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, index.h("slot", { key: '993e3311f2dd6ff26850676df5af426e574f9297', onSlotchange: () => this.sync() })));
+        return (index.h("div", { key: '3483a207be9fb42c6d6c4e2385b3d03e3351b05c', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, index.h("slot", { key: 'cc497c226b4fc18f04121a3aff3fe5e10891bf82', onSlotchange: () => this.sync() })));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/bs-mega-menu.cjs.entry.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var index = require('./index-BYfMRtlW.js');
+
+const bsMegaMenuCss = () => `:host{display:block;box-sizing:border-box;container-type:inline-size;width:var(--bs-mega-menu-width);max-width:100%;--bs-mega-menu-width:1100px;--bs-mega-menu-radius:var(--bs-border-radius-150);--bs-mega-menu-bg:var(--bs-surface-base);--bs-mega-menu-border-color:var(--bs-border-default);--bs-mega-menu-shadow:var(--bs-shadow-position-0) var(--bs-shadow-position-50) var(--bs-shadow-blur-100) var(--bs-elevation-high);--bs-mega-menu-padding:var(--bs-spacing-300) calc(var(--bs-spacing-300) + var(--bs-spacing-50));--bs-mega-menu-gap:var(--bs-spacing-300);--bs-mega-menu-heading-color:var(--bs-text-muted);--bs-mega-menu-text-color:var(--bs-text-default);--bs-mega-menu-muted-color:var(--bs-text-secondary)}:host([hidden]){display:none}.bs-mega-menu{display:block;--bs-card-bg:var(--bs-mega-menu-bg);--bs-card-radius:var(--bs-mega-menu-radius);--bs-card-padding:0px;--bs-card-border-width:1px;--bs-card-border-color:var(--bs-mega-menu-border-color);--bs-card-shadow:var(--bs-mega-menu-shadow);font-family:var(--bs-typography-font-family-body, Roboto), sans-serif}.bs-mega-menu__columns{display:grid;grid-template-columns:repeat(var(--bs-mega-menu-tracks), minmax(0, 1fr));gap:var(--bs-mega-menu-gap);padding:var(--bs-mega-menu-padding);padding-bottom:var(--bs-spacing-100)}.bs-mega-menu__heading{margin:0 0 var(--bs-spacing-50);color:var(--bs-mega-menu-heading-color);font-size:var(--bs-fontsize-caption-sm);font-weight:var(--bs-font-weight-semibold);line-height:calc(var(--bs-line-height-caption-sm) * 1px)}.bs-mega-menu__list{display:block;margin:0;padding:0;list-style:none}.bs-mega-menu__featured{padding-top:var(--bs-spacing-300)}.bs-mega-menu__featured-title,.bs-mega-menu__featured-description{margin:0}.bs-mega-menu__featured-title{color:var(--bs-mega-menu-text-color);font-size:var(--bs-fontsize-caption-sm);font-weight:var(--bs-font-weight-bold);line-height:calc(var(--bs-line-height-caption-sm) * 1px)}.bs-mega-menu__featured-description{margin-top:var(--bs-spacing-100);color:var(--bs-mega-menu-muted-color);font-size:var(--bs-fontsize-caption-sm);line-height:calc(var(--bs-line-height-caption-sm) * 1px)}.bs-mega-menu__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--bs-spacing-200);padding:var(--bs-spacing-150) var(--bs-spacing-200);color:var(--bs-mega-menu-muted-color);font-size:var(--bs-fontsize-caption-sm);line-height:calc(var(--bs-line-height-caption-sm) * 1px)}.bs-mega-menu__footer-end{display:inline-flex;align-items:center;gap:var(--bs-spacing-100)}.bs-mega-menu__shortcut{display:inline-flex;align-items:center;gap:var(--bs-spacing-100)}@container (max-width: 599px){.bs-mega-menu__columns{grid-template-columns:minmax(0, 1fr);padding:var(--bs-spacing-200);padding-bottom:var(--bs-spacing-100)}bs-menu-block{--bs-menu-block-white-space:normal;min-height:var(--bs-scale-550)}bs-compact-menu-block{--bs-compact-menu-block-padding:var(--bs-spacing-150) var(--bs-spacing-100);min-height:var(--bs-scale-550)}.bs-mega-menu__featured{padding-top:var(--bs-spacing-100)}.bs-mega-menu__footer{flex-direction:column;align-items:flex-start;gap:var(--bs-spacing-100)}.bs-mega-menu__shortcut{display:none}}`;
+
+let uid = 0;
+const BsMegaMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsMenuSelect = index.createEvent(this, "bsMenuSelect");
+        this.bsClose = index.createEvent(this, "bsClose");
+    }
+    get el() { return index.getElement(this); }
+    id = `bs-mm-${++uid}`;
+    /** `columns` shows menu blocks with icon and description; `compact` plain text links. */
+    type = 'columns';
+    /** The groups of links. JS property only (an array cannot be an attribute). */
+    columns = [];
+    /** The featured area on the right. JS property only. The `featured` slot overrides it. */
+    featured;
+    /** Recently used destinations, already translated, shown in the footer. JS property only. */
+    recent = [];
+    /** Accessible name of the panel. */
+    label = 'Menu';
+    /** Text before the recently used items. */
+    recentLabel = 'Recently used:';
+    /** Text before the shortcut keys. */
+    shortcutLabel = 'Can’t find it? Press';
+    /** The shortcut keys, joined by "+". */
+    shortcutKeys = 'Ctrl+K';
+    /** Accessible name of the shortcut keys. Defaults to the keys joined with " plus ". */
+    shortcutKeysLabel;
+    /** Fires when a link is chosen (click or Enter), with the item. Cancelable: `preventDefault()` cancels the originating click. */
+    bsMenuSelect;
+    /** Fires when Escape is pressed inside the panel, so you can close it. */
+    bsClose;
+    select(item, ev) {
+        const e = this.bsMenuSelect.emit(item);
+        if (e.defaultPrevented)
+            ev.preventDefault();
+    }
+    onKeyDown = (ev) => {
+        if (ev.key === 'Escape')
+            this.bsClose.emit();
+    };
+    renderItem(item) {
+        const onClick = (ev) => this.select(item, ev);
+        return (index.h("li", null, this.type === 'compact' ? (index.h("bs-compact-menu-block", { part: "block", name: item.label, onClick: onClick })) : (index.h("bs-menu-block", { part: "block", name: item.label, description: item.description, icon: item.icon, badge: item.badge, onClick: onClick }))));
+    }
+    renderColumn(col) {
+        const hid = `${this.id}-h-${col.id}`;
+        return (index.h("div", { part: "column", class: "bs-mega-menu__column", role: "group", "aria-labelledby": hid }, index.h("div", { part: "heading", id: hid, class: "bs-mega-menu__heading" }, col.label), index.h("ul", { part: "list", role: "list", class: "bs-mega-menu__list" }, col.items.map(item => this.renderItem(item)))));
+    }
+    renderFeatured() {
+        const tid = `${this.id}-featured`;
+        return (index.h("div", { part: "featured", class: "bs-mega-menu__featured", role: "group", "aria-labelledby": this.featured ? tid : undefined }, index.h("slot", { name: "featured" }, this.featured && [
+            index.h("p", { part: "featured-title", id: tid, class: "bs-mega-menu__featured-title" }, this.featured.title),
+            this.featured.description && (index.h("p", { part: "featured-description", class: "bs-mega-menu__featured-description" }, this.featured.description)),
+        ])));
+    }
+    render() {
+        const hasFeatured = !!this.featured || !!this.el.querySelector(':scope > [slot="featured"]');
+        const tracks = this.columns.length + (hasFeatured ? 1 : 0);
+        return (index.h("bs-card", { key: '005653cc6235b7aa26268e3bf97b1a985df89843', part: "panel", class: "bs-mega-menu", surface: "base", role: "navigation", "aria-label": this.label, onKeyDown: this.onKeyDown }, index.h("div", { key: '22808dd74ea84ae0511dc92e4a3d2d3045a8157c', part: "columns", class: "bs-mega-menu__columns", style: { '--bs-mega-menu-tracks': String(Math.max(tracks, 1)) } }, this.columns.map(col => this.renderColumn(col)), hasFeatured && this.renderFeatured()), index.h("bs-divider", { key: '105dd2102501c21303f0cd115f2a8797a8996195', decorative: true }), index.h("div", { key: '0f20d9d01cb29d29735612d2708cb48af2e30bf0', part: "footer", class: "bs-mega-menu__footer" }, index.h("span", { key: 'e2d7e8bf77b15b735015342ef6a21b946cdcf2cb', class: "bs-mega-menu__footer-start" }, index.h("slot", { key: '1d34e50c301329ea2bd381a08ffab99b9bce5394', name: "footer-start" }, this.recent.length > 0 && `${this.recentLabel} ${this.recent.join(', ')}`)), index.h("span", { key: '773eae68920c131c8dea1182a41a78e6ceef4222', class: "bs-mega-menu__footer-end" }, index.h("slot", { key: '70e2b5dce40e19423b55c1df869d1326f5fdbfa4', name: "footer-end" }, index.h("span", { key: '10bb8e18aaa162b06209f65f7e9136ff716466f8', class: "bs-mega-menu__shortcut" }, this.shortcutLabel, index.h("bs-key-caps", { key: 'a9991ceab494255b81fccb97e8290432bcc0cff2', part: "shortcut", keys: this.shortcutKeys, label: this.shortcutKeysLabel })))))));
+    }
+};
+BsMegaMenu.style = bsMegaMenuCss();
+
+exports.bs_mega_menu = BsMegaMenu;

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

@@ -63,7 +63,7 @@ const BsMessageList = class {
         }
     };
     render() {
-        return (index.h("div", { key: '027f7d1e7a442e3c669cc5ce5a798c64f9f1239e', class: "bs-message-list" }, index.h("div", { key: '6b428190b1fadeacfa0e090d6d17e2455da816aa', part: "viewport", class: "bs-message-list__viewport", role: "log", "aria-live": "polite", tabindex: "0", ref: el => (this.viewport = el), onScroll: this.onScroll }, index.h("slot", { key: '947524fe3d132633bffd151bb7aecb316aadf382' })), this.showScrollButton && (index.h("bs-icon-button", { key: '17069d19e0e931a14dbeb71ae09bc521a697eabf', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, index.h("svg", { key: '7ee28b01218310357a7102cd9eee7cc207101813', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("path", { key: '5880bf08092901ad03ee071c6ea4a4401d9517d9', d: "M8 3v10M3.5 8.5L8 13l4.5-4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+        return (index.h("div", { key: 'e474c22e93a8559c37efa3e13670bf6f48da5140', class: "bs-message-list" }, index.h("div", { key: 'f29d2f07b872743353ac0595399f5d87d94b2ace', part: "viewport", class: "bs-message-list__viewport", role: "log", "aria-live": "polite", tabindex: "0", ref: el => (this.viewport = el), onScroll: this.onScroll }, index.h("slot", { key: '265e61fefe2219e57cb9724f68ca76752849a1f6' })), this.showScrollButton && (index.h("bs-icon-button", { key: '960398acea1fe8b6cdb00469ee23531b40715ac9', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, index.h("svg", { key: '748dfcd735223d1482ebe6e0b24383c8018a976f', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("path", { key: 'af9d03ca412502d46822588c9bcb303e44dd33c3', d: "M8 3v10M3.5 8.5L8 13l4.5-4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
     }
 };
 BsMessageList.style = bsMessageListCss();

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

@@ -17,7 +17,7 @@ const BsMessage = class {
     /** Delivery/render state. `error` uses error colours; `pending` dims the bubble and sets `aria-busy`. */
     status = 'default';
     render() {
-        return (index.h("div", { key: '86285bfd68e06327c2d2afbb0f2c24974303093e', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, index.h("div", { key: 'd82b3e6fe9d3863269600ef1a3ccc2feac0423b6', part: "avatar", class: "bs-message__avatar" }, index.h("slot", { key: 'c6832f12575eaf2e16c7eb65040ea799501f97ce', name: "avatar" })), index.h("div", { key: '0fc91e323599e56c4f61c12cec0b7ce7bdddc00f', class: "bs-message__column" }, index.h("bs-card", { key: '72de58c03aff4643103f8bedf1e699c31fcabe18', part: "container", class: "bs-message__bubble", surface: "base" }, index.h("div", { key: 'd71851df11559320977e3597bc30d7833940194c', part: "content", class: "bs-message__content" }, index.h("slot", { key: '956564ce3766240c7e75c8fdf83b5471c7804965' }))), index.h("div", { key: '09d2d29c20ce847fa06ac91048212ed14cebcfa1', part: "footer", class: "bs-message__footer" }, index.h("slot", { key: 'e2a7a23597b0ac6d6c9ba7c1eb26ef865746b5f8', name: "footer" })), index.h("div", { key: '9ce9ef000dcc68f5c2b8e3254dbd3ad37a59e930', part: "timestamp", class: "bs-message__timestamp" }, index.h("slot", { key: '3d906d1c18bbc6b1cffb7fba18bcc74324f6dd5d', name: "timestamp" }, this.timestamp && index.h("time", { key: '6f04b8166126cd7d1543c4211bace9caaac99571', dateTime: this.datetime }, this.timestamp))))));
+        return (index.h("div", { key: 'c159d43edf61a61bb87fa72c650a8642e0ae154f', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, index.h("div", { key: 'a503d44dd040849e1db3327f3c33981eea8fcd9d', part: "avatar", class: "bs-message__avatar" }, index.h("slot", { key: 'bef63a196f9ffcaeb6b729f2c9b67722e9e5afe1', name: "avatar" })), index.h("div", { key: 'a27a5dd8bff4350c882eeab12f8ebcf32d629333', class: "bs-message__column" }, index.h("bs-card", { key: '4dd1f9da16be30b04f1c6bea178600ff11f6b654', part: "container", class: "bs-message__bubble", surface: "base" }, index.h("div", { key: 'c4dbf71df32e0b962e20929488952149c88f3b04', part: "content", class: "bs-message__content" }, index.h("slot", { key: '2b251a032180bc3e1ef4b027179ddde73a7f9dcc' }))), index.h("div", { key: '749ba9490b9204fe4f514bb5f15190e658309e9b', part: "footer", class: "bs-message__footer" }, index.h("slot", { key: '43e305fe85d7fcf81afb115d7477035108cece44', name: "footer" })), index.h("div", { key: '4c224882dbe5d0f01117cd276f5d3050426cd344', part: "timestamp", class: "bs-message__timestamp" }, index.h("slot", { key: 'e9a2ccfb8628e5c3d3840fbda5b70009af6e0c6f', name: "timestamp" }, this.timestamp && index.h("time", { key: '9b4dc4a6e042367420c8b7355621ad42075f335e', dateTime: this.datetime }, this.timestamp))))));
     }
 };
 BsMessage.style = bsMessageCss();

package/dist/cjs/bs-navigation-drawer-item.cjs.entry.js

@@ -93,7 +93,7 @@ const BsNavigationDrawerItem = class {
         // incorrectly also toggle this parent row on every child click. Both are wrapped in a
         // `display: contents` container so render() still returns a single root node (this codebase's
         // convention, e.g. bs-input.tsx) without that wrapper affecting layout at all.
-        return (index.h("div", { key: 'f10fc5a19900625f99f9bd982825c50cf2197c0a', class: "bs-navigation-drawer-item__root" }, index.h("button", { key: 'fbc480d7b4b1737ae36b1a573a42c87bf6c23111', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (index.h("span", { key: '23f08e194c7fb599cfea429d7f46129668f7cad4', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, index.h("slot", { key: 'c4e2e9147212a9220208bb51e9dd8ddcb16b75d0', name: "icon", onSlotchange: this.onIconSlotchange }))), index.h("span", { key: '230567543ee35b7578f942b87226cf7acc9175fc', part: "label", class: "bs-navigation-drawer-item__label" }, index.h("slot", { key: '5d7aebda3ca725a2b64585bf9ad89ec88cd71a65' })), this.expandable && (index.h("span", { key: '1e10ca3a3c3d3237f25cc7a46b65b9f980564899', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, index.h(ChevronDownIcon, { key: '0885df5c87838808f51ae1adbcf10d9515961922' })))), this.expandable && (index.h("span", { key: '85527320ae9041c8a1ef1163a037a28ac1f92649', part: "children", class: "bs-navigation-drawer-item__children" }, index.h("slot", { key: '9a9dfe8dba053b15e8ec2fc47c1fcf04c5bb31be', name: "children" })))));
+        return (index.h("div", { key: '81e29ccbcc7a513d9caa85982104e4c65919ffce', class: "bs-navigation-drawer-item__root" }, index.h("button", { key: '68e2c8edd1280f003719751c9cf2aa561ecc9059', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (index.h("span", { key: '7520bf470ed4250c8767905d5b7e05166b2d9f06', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, index.h("slot", { key: 'c8cffca5bb390ab60d68c6c97736053c374bb026', name: "icon", onSlotchange: this.onIconSlotchange }))), index.h("span", { key: '4f3b8034935678d64a29281f2cfd1ed44250eca2', part: "label", class: "bs-navigation-drawer-item__label" }, index.h("slot", { key: 'e9f50c5b4dc9e96ed39d85c1daa96981deb7a810' })), this.expandable && (index.h("span", { key: '369853e213a7ecd0a64ec28d820d40139fb6d68e', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, index.h(ChevronDownIcon, { key: 'f3d8fcd09d63be37a4b6a1e3cc10240eec5425f9' })))), this.expandable && (index.h("span", { key: '445291ae6a7f888ac6cb456ada3a7a17cf4638dd', part: "children", class: "bs-navigation-drawer-item__children" }, index.h("slot", { key: '697e924b580b1fef5f0b5871df38c0bd104982c8', name: "children" })))));
     }
 };
 // 16x16 native viewBox (not a 24x24 icon scaled down) -- authored directly at display size, per

package/dist/cjs/bs-navigation-drawer.cjs.entry.js

@@ -180,11 +180,11 @@ const BsNavigationDrawer = class {
     };
     render() {
         const classes = ['bs-navigation-drawer', this.mobile ? 'bs-navigation-drawer--overlay' : '', this.overlayOpen ? 'bs-navigation-drawer--open' : ''].filter(Boolean).join(' ');
-        return (index.h(index.Host, { key: 'a99687c2e283dd7214da7c679895b4107866575d', "data-overlay": this.mobile ? '' : undefined }, this.mobile && index.h("div", { key: '481a1aa4bb2de83774618492feab43ff8d3489eb', part: "backdrop", class: "bs-navigation-drawer__backdrop", onClick: this.requestClose }), index.h("nav", { key: '789650b9923a97a1c1d3d75e7d51d2fa4e20c880', ref: el => (this.navRef = el), class: classes, "aria-label": this.heading,
+        return (index.h(index.Host, { key: 'b2203f52ae157b565d62e06521b70ddea7f2ae14', "data-overlay": this.mobile ? '' : undefined }, this.mobile && index.h("div", { key: 'ef85987f69ff5795d899118c8d339d3f52a6f4af', part: "backdrop", class: "bs-navigation-drawer__backdrop", onClick: this.requestClose }), index.h("nav", { key: '260b591e3439863671aa51b5c90ae203dda82bb5', ref: el => (this.navRef = el), class: classes, "aria-label": this.heading,
             // Stays a plain <nav> landmark in every state: ARIA does not allow role="dialog" on <nav>
             // (axe: aria-allowed-role). Modality is behavioral -- focus is held inside, the page behind is
             // scrimmed, Escape closes -- rather than announced through aria-modal.
-            tabIndex: this.mobile ? -1 : undefined }, this.showLogo && (index.h("div", { key: '04ca8b13c5f7b81db8a12037e6d4d8b1fea705a0', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, index.h("bs-logo", { key: 'e611e23d4f13523917b84cb88af726ad33e02be7', variant: "full", background: this.logoBackground }))), this.showLogo && (index.h("div", { key: 'f377511b1a52cbeef534d081ec916c3c90dc91e7', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, index.h("bs-logo", { key: '7aa4cc0e092f5e5fb8a00f28731e7518fdd5bca3', variant: "mark", background: this.logoBackground }))), index.h("div", { key: '72ca104a6ce1613addbf5a416942bfcee2f59352', class: "bs-navigation-drawer__title-row" }, index.h("span", { key: '2f0ff9abb324762dd38775482de3d6d2e953e452', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (index.h("button", { key: '0e6956a9f29a8a481a51527b3db5da790940b59c', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? this.expandLabel : this.collapseLabel, "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, index.h(CaretLeftIcon, { key: 'bfbcc299cb91987f531e0188d0b2bf068bc36d62' })))), index.h("div", { key: '2b719ad1dc761ff6bd9f182151f9bb8c0cb9228f', part: "search", class: "bs-navigation-drawer__search" }, index.h("slot", { key: '8c02fd031b1ce2bd38f709e640900489a7dde3c9', name: "search" })), index.h("button", { key: '070ec9a6e1892f1f903cbfa555e927db371e1166', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": this.searchLabel, onClick: this.onSearchTriggerClick }, index.h(SearchIcon, { key: 'a933a7d7615ad5d8be9cc11a98f835d1bc220f1e' })), index.h("div", { key: '5ab908c14933442dda5c11d159276d98a721edef', part: "items", class: "bs-navigation-drawer__items" }, index.h("slot", { key: 'ffa0d44d5d18821ae4199aa38cfbb563806fea54' })))));
+            tabIndex: this.mobile ? -1 : undefined }, this.showLogo && (index.h("div", { key: '1f947bcd8f55aae3fc83c31c4f1220934de4ca24', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, index.h("bs-logo", { key: 'e77c2e6c15478d308f6c2694164262ad37672ba8', variant: "full", background: this.logoBackground }))), this.showLogo && (index.h("div", { key: 'c3fa7b9cf7a54a42b1dde273127e59b3880aa5a2', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, index.h("bs-logo", { key: '4c35edb7b838ea0c812de2197a6d3d59316449a5', variant: "mark", background: this.logoBackground }))), index.h("div", { key: 'ea7e753bb4a313718f8d003d299cf2d98c4bf94e', class: "bs-navigation-drawer__title-row" }, index.h("span", { key: '90e3cdc335d0c2820fe9002e2fafc162576b3240', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (index.h("button", { key: '3b5a555dc34380c22030733ca745279e3ddca1b6', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? this.expandLabel : this.collapseLabel, "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, index.h(CaretLeftIcon, { key: 'f5e095681e642741cbbfe97ad5ae11fe10c679d4' })))), index.h("div", { key: '14f9928d98e7773b43c9b6a7dcbdcbdb5302c088', part: "search", class: "bs-navigation-drawer__search" }, index.h("slot", { key: 'ea0fe474c09c0550b2d89cfc2a7a8294c9d1cedd', name: "search" })), index.h("button", { key: 'e4a321e70895804445a902cdbb07f65952653bed', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": this.searchLabel, onClick: this.onSearchTriggerClick }, index.h(SearchIcon, { key: '582c3bc3117c49270e5c0ba0d0f0d2e5de9c6625' })), index.h("div", { key: '844f4f8eb5e95921f6aa1c643bf0fc52255ab19f', part: "items", class: "bs-navigation-drawer__items" }, index.h("slot", { key: '52485aab4b1ddb41051dba85e657d18f9a8abbd8' })))));
     }
     static get watchers() { return {
         "collapsed": [{

package/dist/cjs/bs-navigation-header.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-BYfMRtlW.js');
 
-const bsNavigationHeaderCss = () => `:host{display:block;--bs-navigation-header-bg:var(--bs-surface-base);--bs-navigation-header-border:var(--bs-border-default);--bs-navigation-header-padding-top:var(--bs-spacing-200);--bs-navigation-header-padding-bottom:var(--bs-spacing-100);--bs-navigation-header-padding-x:var(--bs-margin-fluid);--bs-navigation-header-max-width:none;--bs-navigation-header-item-gap:calc(var(--bs-navigation-header-gap) * 1px);--bs-navigation-header-slot-gap:var(--bs-spacing-100);--bs-navigation-header-skip-link-bg:var(--bs-surface-action);--bs-navigation-header-skip-link-color:var(--bs-text-inverse)}.bs-navigation-header{box-sizing:border-box;position:relative;display:flex;align-items:center;width:100%;max-width:var(--bs-navigation-header-max-width);background:var(--bs-navigation-header-bg);border-bottom:1px solid var(--bs-navigation-header-border);padding:var(--bs-navigation-header-padding-top) var(--bs-navigation-header-padding-x) var(--bs-navigation-header-padding-bottom)}.bs-navigation-header__skip-link{position:absolute;top:var(--bs-spacing-100);left:-9999px;z-index:1;padding:var(--bs-spacing-100) var(--bs-spacing-200);border-radius:var(--bs-border-radius-100);background:var(--bs-navigation-header-skip-link-bg);color:var(--bs-navigation-header-skip-link-color);font-size:var(--bs-font-size-sm);text-decoration:underline}.bs-navigation-header__skip-link:focus{left:var(--bs-navigation-header-padding-x)}.bs-navigation-header--default,.bs-navigation-header--with-navigation-drawer{gap:var(--bs-navigation-header-item-gap)}.bs-navigation-header__logo{flex-shrink:0;display:flex;align-items:center}.bs-navigation-header--center .bs-navigation-header__logo{flex:1 0 0;min-width:0}.bs-navigation-header__left{display:flex;align-items:center;gap:var(--bs-navigation-header-slot-gap);flex-shrink:0}.bs-navigation-header__right{display:flex;align-items:center;justify-content:flex-end;gap:var(--bs-navigation-header-slot-gap);flex:1 0 0;min-width:0}@media (max-width: 768px){.bs-navigation-header--default,.bs-navigation-header--with-navigation-drawer{flex-wrap:wrap;row-gap:var(--bs-navigation-header-slot-gap)}.bs-navigation-header--default .bs-navigation-header__left,.bs-navigation-header--with-navigation-drawer .bs-navigation-header__left{flex:1 1 0%;min-width:0}.bs-navigation-header--default .bs-navigation-header__right,.bs-navigation-header--with-navigation-drawer .bs-navigation-header__right{flex:0 0 auto;margin-inline-start:auto;justify-content:flex-end}}`;
+const bsNavigationHeaderCss = () => `:host{display:block;position:relative;--bs-navigation-header-menu-z-index:var(--bs-z-index-dropdown);--bs-navigation-header-menu-max-height:calc(100vh - 100%);--bs-navigation-header-bg:var(--bs-surface-base);--bs-navigation-header-border:var(--bs-border-default);--bs-navigation-header-padding-top:var(--bs-spacing-200);--bs-navigation-header-padding-bottom:var(--bs-spacing-100);--bs-navigation-header-padding-x:var(--bs-margin-fluid);--bs-navigation-header-max-width:none;--bs-navigation-header-item-gap:calc(var(--bs-navigation-header-gap) * 1px);--bs-navigation-header-slot-gap:var(--bs-spacing-100);--bs-navigation-header-skip-link-bg:var(--bs-surface-action);--bs-navigation-header-skip-link-color:var(--bs-text-inverse)}.bs-navigation-header{box-sizing:border-box;position:relative;display:flex;align-items:center;width:100%;max-width:var(--bs-navigation-header-max-width);background:var(--bs-navigation-header-bg);border-bottom:1px solid var(--bs-navigation-header-border);padding:var(--bs-navigation-header-padding-top) var(--bs-navigation-header-padding-x) var(--bs-navigation-header-padding-bottom)}.bs-navigation-header__menu{position:absolute;top:100%;left:0;right:0;z-index:var(--bs-navigation-header-menu-z-index)}.bs-navigation-header__menu ::slotted(*){--bs-mega-menu-width:100%;width:100%;max-width:100%}.bs-navigation-header__skip-link{position:absolute;top:var(--bs-spacing-100);left:-9999px;z-index:1;padding:var(--bs-spacing-100) var(--bs-spacing-200);border-radius:var(--bs-border-radius-100);background:var(--bs-navigation-header-skip-link-bg);color:var(--bs-navigation-header-skip-link-color);font-size:var(--bs-font-size-sm);text-decoration:underline}.bs-navigation-header__skip-link:focus{left:var(--bs-navigation-header-padding-x)}.bs-navigation-header--default,.bs-navigation-header--with-navigation-drawer{gap:var(--bs-navigation-header-item-gap)}.bs-navigation-header__logo{flex-shrink:0;display:flex;align-items:center}.bs-navigation-header--center .bs-navigation-header__logo{flex:1 0 0;min-width:0}.bs-navigation-header__left{display:flex;align-items:center;gap:var(--bs-navigation-header-slot-gap);flex-shrink:0}.bs-navigation-header__right{display:flex;align-items:center;justify-content:flex-end;gap:var(--bs-navigation-header-slot-gap);flex:1 0 0;min-width:0}@media (max-width: 768px){@supports (height: 100dvh){:host{--bs-navigation-header-menu-max-height:calc(100dvh - 100%)}}.bs-navigation-header--default,.bs-navigation-header--with-navigation-drawer{flex-wrap:wrap;row-gap:var(--bs-navigation-header-slot-gap)}.bs-navigation-header--default .bs-navigation-header__left,.bs-navigation-header--with-navigation-drawer .bs-navigation-header__left{flex:1 1 0%;min-width:0}.bs-navigation-header--default .bs-navigation-header__right,.bs-navigation-header--with-navigation-drawer .bs-navigation-header__right{flex:0 0 auto;margin-inline-start:auto;justify-content:flex-end}.bs-navigation-header--default .bs-navigation-header__left{overflow-x:auto;scrollbar-width:none}.bs-navigation-header__menu{max-height:var(--bs-navigation-header-menu-max-height);overflow-y:auto;overscroll-behavior:contain}}`;
 
 const BsNavigationHeader = class {
     constructor(hostRef) {
@@ -36,7 +36,10 @@ const BsNavigationHeader = class {
     render() {
         const showLogo = this.alignment !== 'with-navigation-drawer';
         const rootClasses = `bs-navigation-header bs-navigation-header--${this.alignment}`;
-        return (index.h("header", { key: '436574d1cec6b41df78e0f438c1602095efd8140', class: rootClasses, "aria-label": this.ariaLabel ?? undefined }, this.skipToContentHref && (index.h("a", { key: 'b20aa86d5553d653bc08226421eedf4974481da8', part: "skip-link", class: "bs-navigation-header__skip-link", href: this.skipToContentHref }, this.skipToContentLabel)), showLogo && (index.h("bs-logo", { key: 'bb3cde1494bc4c193b6837febd1d4d62f64011fd', part: "logo", class: "bs-navigation-header__logo", variant: "full", background: this.logoBackground })), index.h("div", { key: 'ccda34eb85ac7db255cb749eee33da30b9111c41', part: "left", class: "bs-navigation-header__left" }, index.h("slot", { key: 'beeee26d778fe026cd113c4f08ca7424193f9af8', name: "left" })), index.h("div", { key: '9844b46cff0b4cfa1e74182debbc7e8e9dd44b25', part: "right", class: "bs-navigation-header__right" }, index.h("slot", { key: '3315ff9dbeef31d45f4d089ff17f9594a9acb8f7', name: "right" }))));
+        return [
+            index.h("header", { key: '3c9fb71de577fc51e54ef408afcbca45e84ce079', class: rootClasses, "aria-label": this.ariaLabel ?? undefined }, this.skipToContentHref && (index.h("a", { key: '43037609edd64d0c71959032d74889dc6606b35f', part: "skip-link", class: "bs-navigation-header__skip-link", href: this.skipToContentHref }, this.skipToContentLabel)), showLogo && (index.h("bs-logo", { key: 'cbc5b28a31a5ce411ece05ed001cf4305cad18ab', part: "logo", class: "bs-navigation-header__logo", variant: "full", background: this.logoBackground })), index.h("div", { key: '26d9fafe4fe95925094037f5cd4160ba32af2a12', part: "left", class: "bs-navigation-header__left" }, index.h("slot", { key: '784a5580313c462c5e501954e979b01c04ba325e', name: "left" })), index.h("div", { key: '2269661581210bcad049f58f8e36b2d2cfd5f1a3', part: "right", class: "bs-navigation-header__right" }, index.h("slot", { key: '8f388585ff868e30816e345811d620dd624c37c2', name: "right" }))),
+            index.h("div", { key: '65a6486ebad50bda4723aab3b9eb7a47cc0b17c8', part: "menu", class: "bs-navigation-header__menu" }, index.h("slot", { key: 'b46c078d0114329c5b10458944f212974c50f098', name: "menu" })),
+        ];
     }
 };
 BsNavigationHeader.style = bsNavigationHeaderCss();

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

@@ -0,0 +1,66 @@
+'use strict';
+
+var index = require('./index-BYfMRtlW.js');
+
+const bsPageHeaderCss = () => `:host{display:block;box-sizing:border-box;container-type:inline-size;max-width:100%;--bs-page-header-bg:var(--bs-surface-base);--bs-page-header-padding-x:var(--bs-spacing-200);--bs-page-header-padding-y:var(--bs-spacing-300);--bs-page-header-gap:var(--bs-spacing-150);--bs-page-header-title-gap:var(--bs-spacing-150);--bs-page-header-actions-gap:var(--bs-spacing-100);--bs-page-header-text-color:var(--bs-text-default);--bs-page-header-meta-color:var(--bs-text-secondary);--bs-page-header-shadow:var(--bs-shadow-position-0) var(--bs-shadow-position-25) var(--bs-shadow-blur-50) var(--bs-elevation-medium);--bs-page-header-sticky-offset:0px;--bs-page-header-z-index:var(--bs-z-index-sticky)}:host([hidden]){display:none}:host([compact]){position:sticky;top:var(--bs-page-header-sticky-offset);z-index:var(--bs-page-header-z-index)}.bs-page-header{display:flex;flex-direction:column;gap:var(--bs-page-header-gap);box-sizing:border-box;padding:var(--bs-page-header-padding-y) var(--bs-page-header-padding-x);background:var(--bs-page-header-bg);color:var(--bs-page-header-text-color);font-family:var(--bs-typography-font-family-body, Roboto), sans-serif}.bs-page-header .bs-page-header__empty{display:none}.bs-page-header__row{display:flex;align-items:center;justify-content:space-between;gap:var(--bs-page-header-gap)}.bs-page-header__main{display:grid;grid-template-columns:minmax(0, 1fr);align-items:center;flex:1 1 auto;min-width:0}.bs-page-header__main--back{grid-template-columns:auto minmax(0, 1fr);column-gap:var(--bs-spacing-100)}.bs-page-header__back{grid-column:1;grid-row:1;align-self:start}.bs-page-header__title{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--bs-page-header-title-gap);min-width:0;grid-row:1;grid-column:-2 / -1}.bs-page-header__title--controls{min-height:var(--bs-scale-500)}.bs-page-header__back,.bs-page-header__favorite{--bs-icon-button-icon-size-sm:var(--bs-scale-250)}.bs-page-header__heading{margin:0;min-width:0;overflow-wrap:anywhere;color:var(--bs-page-header-text-color);font-family:var(--bs-typography-font-family-heading, Roboto), sans-serif;font-size:var(--bs-fontsize-heading-h4);font-weight:var(--bs-font-weight-bold);line-height:calc(var(--bs-line-height-heading-h4) * 1px)}.bs-page-header__status{display:inline-flex;align-items:center;gap:var(--bs-spacing-100)}.bs-page-header__meta{grid-row:2;grid-column:-2 / -1;min-width:0;overflow-wrap:anywhere;color:var(--bs-page-header-meta-color);font-size:var(--bs-fontsize-body-sm);line-height:calc(var(--bs-line-height-body-sm) * 1px)}.bs-page-header__actions{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:var(--bs-page-header-actions-gap)}.bs-page-header__tabs{min-width:0;padding:var(--bs-spacing-50) var(--bs-spacing-50) var(--bs-spacing-50);margin:calc(-1 * var(--bs-spacing-50)) calc(-1 * var(--bs-spacing-50)) calc(-1 * var(--bs-spacing-50));overflow-x:auto;scrollbar-width:none}.bs-page-header__tabs::-webkit-scrollbar{display:none}.bs-page-header--tabs{padding-bottom:0;gap:var(--bs-spacing-100)}.bs-page-header--tabs .bs-page-header__row{margin-bottom:var(--bs-spacing-50)}.bs-page-header__divider{margin:calc(-1 * var(--bs-spacing-50)) calc(-1 * var(--bs-page-header-padding-x)) 0;width:auto}.bs-page-header--compact{--bs-page-header-padding-y:var(--bs-spacing-250);box-shadow:var(--bs-page-header-shadow)}.bs-page-header--compact .bs-page-header__breadcrumb,.bs-page-header--compact .bs-page-header__tabs{display:none}.bs-page-header--compact .bs-page-header__main{grid-template-columns:auto minmax(0, 1fr);column-gap:var(--bs-page-header-title-gap)}.bs-page-header--compact .bs-page-header__main--back{grid-template-columns:auto auto minmax(0, 1fr)}.bs-page-header--compact .bs-page-header__back{margin-inline-end:calc(-1 * var(--bs-spacing-50))}.bs-page-header--compact .bs-page-header__title{grid-column:auto}.bs-page-header--compact .bs-page-header__meta{grid-row:1;grid-column:auto}@container (max-width: 639px){.bs-page-header{--bs-page-header-padding-x:var(--bs-spacing-200)}.bs-page-header__row{flex-direction:column;align-items:stretch}.bs-page-header__actions{flex-wrap:wrap;justify-content:flex-start}.bs-page-header__actions ::slotted(*){flex:0 0 auto;max-width:100%}.bs-page-header__actions ::slotted(bs-button){--bs-button-height-sm:var(--bs-scale-550)}.bs-page-header__actions ::slotted(bs-icon-button){--bs-icon-button-size-sm:var(--bs-scale-550)}.bs-page-header__back,.bs-page-header__favorite{--bs-icon-button-size-sm:var(--bs-scale-550)}.bs-page-header--compact .bs-page-header__main{grid-template-columns:minmax(0, 1fr)}.bs-page-header--compact .bs-page-header__main--back{grid-template-columns:auto minmax(0, 1fr)}.bs-page-header--compact .bs-page-header__back{margin-inline-end:0}.bs-page-header--compact .bs-page-header__title{grid-column:-2 / -1}.bs-page-header--compact .bs-page-header__meta{grid-row:2;grid-column:-2 / -1}}`;
+
+const SLOT_NAMES = ['breadcrumb', 'status', 'meta', 'actions', 'tabs'];
+const BsPageHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsBack = index.createEvent(this, "bsBack");
+        this.bsFavoriteChange = index.createEvent(this, "bsFavoriteChange");
+    }
+    get el() { return index.getElement(this); }
+    /** The page title, rendered as the heading. */
+    heading;
+    /** HTML heading level for the title, 1 to 6. Use 1 unless the page already has its own `h1`. */
+    headingLevel = 1;
+    /** The line under the title, plain text, e.g. "214 invoices · 38 open". The `meta` slot overrides it. */
+    meta;
+    /** The condensed, sticky state: one row, a level 2 shadow, no breadcrumb and no tabs. Reflected. */
+    compact = false;
+    /** Shows a back button before the title. It emits `bsBack`; you navigate. */
+    back = false;
+    /** Accessible name of the back button. */
+    backLabel = 'Back';
+    /** Shows the favourite (star) toggle after the title. */
+    favoritable = false;
+    /** Whether the record is a favourite. Mutable: it follows the user's toggle unless `bsFavoriteChange` is cancelled. */
+    favorite = false;
+    /** Accessible name of the favourite toggle. It stays the same in both states; `aria-pressed` carries the state. */
+    favoriteLabel = 'Favourite';
+    /** Fires when the back button is clicked. Not cancelable: the component has no default action to cancel. */
+    bsBack;
+    /** Fires when the user toggles the favourite button, with the new value. Cancelable: `preventDefault()` keeps the old value. */
+    bsFavoriteChange;
+    slotted = { breadcrumb: false, status: false, meta: false, actions: false, tabs: false };
+    componentWillLoad() {
+        // A slot that is empty from the start never fires `slotchange`, so read the light DOM once up front.
+        this.slotted = Object.fromEntries(SLOT_NAMES.map(n => [n, !!this.el.querySelector(`:scope > [slot="${n}"]`)]));
+    }
+    onSlotChange = (name) => (ev) => {
+        const has = ev.target.assignedNodes().length > 0;
+        if (has !== this.slotted[name])
+            this.slotted = { ...this.slotted, [name]: has };
+    };
+    onFavoriteClick = () => {
+        const next = !this.favorite;
+        const e = this.bsFavoriteChange.emit({ favorite: next });
+        if (!e.defaultPrevented)
+            this.favorite = next;
+    };
+    render() {
+        const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 1));
+        const showMeta = !!this.meta || this.slotted.meta;
+        const hasTabs = this.slotted.tabs && !this.compact;
+        return (index.h("div", { key: 'c67fc2b33ae942872040751d548fb82702032f9f', part: "container", class: { 'bs-page-header': true, 'bs-page-header--compact': this.compact, 'bs-page-header--tabs': hasTabs } }, index.h("div", { key: '032d58b0072e17bd8eeb60afb5a719899a56691b', part: "breadcrumb", class: { 'bs-page-header__breadcrumb': true, 'bs-page-header__empty': !this.slotted.breadcrumb } }, index.h("slot", { key: 'baed539fafc7704bbcddf66aff9109e0d6366d67', name: "breadcrumb", onSlotchange: this.onSlotChange('breadcrumb') })), index.h("div", { key: '7f001cac1f29a8dd805830df98b367cee74fd46f', part: "row", class: "bs-page-header__row" }, index.h("div", { key: 'c287bdcf1e22feb88bfbc3623cc2ff8765b798d0', part: "main", class: { 'bs-page-header__main': true, 'bs-page-header__main--back': this.back } }, this.back && (index.h("bs-icon-button", { key: '98d23c039d1f864de2a3a814ffc66c69e613d88d', part: "back", class: "bs-page-header__back", variant: "subtle", size: "sm", ariaLabel: this.backLabel, onClick: () => this.bsBack.emit() }, index.h(ArrowLeftIcon, { key: 'dd9d3aec3e3bd8e8d5423b7fbf3d899693f2a47d' }))), index.h("div", { key: '8b2c60f98bcf538bb6419d37180c87f921d3efc1', part: "title", class: { 'bs-page-header__title': true, 'bs-page-header__title--controls': this.back || this.favoritable } }, index.h(`h${level}`, { part: 'heading', class: { 'bs-page-header__heading': true } }, this.heading), index.h("span", { key: 'c2b98f908942e93bfd6c8711c7097b77fdf9c449', part: "status", class: { 'bs-page-header__status': true, 'bs-page-header__empty': !this.slotted.status } }, index.h("slot", { key: '7a0be9e27bd1b1b4fb5ce5122056ea1b79d85e3a', name: "status", onSlotchange: this.onSlotChange('status') })), this.favoritable && (index.h("bs-icon-button", { key: 'be19b70ac6c5a0a560bf2d3402c146844b5bb81b', part: "favorite", class: "bs-page-header__favorite", variant: "subtle", size: "sm", ariaLabel: this.favoriteLabel, pressed: this.favorite, onClick: this.onFavoriteClick }, this.favorite ? index.h(StarFillIcon, null) : index.h(StarIcon, null)))), index.h("div", { key: '5c4c5aeb64bf508031607455f65c67a7b6fc89ce', part: "meta", class: { 'bs-page-header__meta': true, 'bs-page-header__empty': !showMeta } }, index.h("slot", { key: '75d3cbe844e0ecee9ed9f2457591fd418405b931', name: "meta", onSlotchange: this.onSlotChange('meta') }, this.meta))), index.h("div", { key: 'a8f6d7929d7c49066f987f9acc665ef42404059b', part: "actions", class: { 'bs-page-header__actions': true, 'bs-page-header__empty': !this.slotted.actions } }, index.h("slot", { key: '84a69af01b82f153b965c981d80bda4561b9d8a7', name: "actions", onSlotchange: this.onSlotChange('actions') }))), index.h("div", { key: 'fdd15239c429c8800b91aac17fff8cd78bbfc589', part: "tabs", class: { 'bs-page-header__tabs': true, 'bs-page-header__empty': !this.slotted.tabs } }, index.h("slot", { key: '892ecc16b598a39b706e807c67fb8b4b7a6e7cad', name: "tabs", onSlotchange: this.onSlotChange('tabs') })), hasTabs && index.h("bs-divider", { key: '7397b2cfc7faca637442ba7d0460a1ec396504a3', part: "divider", class: "bs-page-header__divider", decorative: true })));
+    }
+};
+// Paths from Phosphor Icons (MIT) "arrow-left", "star" and "star-fill", regular/fill weights, 256 viewBox.
+const ArrowLeftIcon = () => (index.h("svg", { viewBox: "0 0 256 256", fill: "currentColor", "aria-hidden": "true" }, index.h("path", { d: "M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z" })));
+const StarIcon = () => (index.h("svg", { viewBox: "0 0 256 256", fill: "currentColor", "aria-hidden": "true" }, index.h("path", { d: "M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z" })));
+const StarFillIcon = () => (index.h("svg", { viewBox: "0 0 256 256", fill: "currentColor", "aria-hidden": "true" }, index.h("path", { d: "M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" })));
+BsPageHeader.style = bsPageHeaderCss();
+
+exports.bs_page_header = BsPageHeader;

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

@@ -74,7 +74,7 @@ const BsPagination = class {
     }
     render() {
         const pageList = this.getPageList();
-        return (index.h("nav", { key: '8f88672d0c1402df24990f7632d4f2180627a624', "aria-label": this.navLabel }, index.h("ul", { key: '3b1359e867cfab58a215c521f4d46df75d3b9e0a', part: "list", class: "bs-pagination__list" }, index.h("li", { key: '462c761e4cd0938802ef0ede5e8fdcf072bed7dc', part: "item", class: "bs-pagination__item" }, index.h("button", { key: '01c0f0eeee2644def4f41aaec427bc77b0a3d948', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, index.h(ChevronLeftIcon, { key: '6c4587384f3b0a6ff8431d6a6f637bdebf134707' }))), pageList.map((item, index$1) => item === 'ellipsis' ? (index.h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index$1}` }, index.h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, index.h(EllipsisIcon, null)))) : (index.h("li", { part: "item", class: "bs-pagination__item", key: item }, index.h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `${this.pageLabel} ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), index.h("li", { key: 'cb2ac831de208292505cf53c7c4c1baedb639e1c', part: "item", class: "bs-pagination__item" }, index.h("button", { key: '3cf295a9a8457013da89db054e863f8bc9fcdf75', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, index.h(ChevronRightIcon, { key: 'ead52f0b11ae9253828f41def167536914b3ac90' }))))));
+        return (index.h("nav", { key: 'ea5d0b85f962dd1e92533f6995072f048b562026', "aria-label": this.navLabel }, index.h("ul", { key: 'd8bd25cb99175486a7d47b10a01dec6e84d31000', part: "list", class: "bs-pagination__list" }, index.h("li", { key: 'cb00b60f5a1b2b3b6da3e8ca8c3842694377a60d', part: "item", class: "bs-pagination__item" }, index.h("button", { key: '567d93ab292428f0f84fa0e006d76214cfc39e22', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, index.h(ChevronLeftIcon, { key: 'd83a3dc7a3e913a7b302bb9e5beab31c5bc2987c' }))), pageList.map((item, index$1) => item === 'ellipsis' ? (index.h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index$1}` }, index.h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, index.h(EllipsisIcon, null)))) : (index.h("li", { part: "item", class: "bs-pagination__item", key: item }, index.h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `${this.pageLabel} ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), index.h("li", { key: '4904d32b1ce60efff4810a0a47453dcf6d1a515b', part: "item", class: "bs-pagination__item" }, index.h("button", { key: '4eb744abe27134d51fbf80bbedb3d0281afb7f71', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, index.h(ChevronRightIcon, { key: 'e7b62fd1cbf5263c94fa3482ebc094b367f5e6ca' }))))));
     }
 };
 function range(start, end) {

package/dist/cjs/bs-progress-linear.cjs.entry.js

@@ -35,13 +35,13 @@ const BsProgressLinear = class {
     render() {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
-        return (index.h("div", { key: 'fb99c576009fc4b829a0cda6fbe9191d052277b9', part: "container", class: "bs-progress-linear" }, index.h("div", { key: 'f9d4ec6e1548b87285ca3d23238fbf20d8f29213', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (index.h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
+        return (index.h("div", { key: '8cb0ed265f5fae4146ace2ff2cb4e9876b0011c6', part: "container", class: "bs-progress-linear" }, index.h("div", { key: '62b448cc83f5b317b41277c414cf7712ef4ee1b5', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (index.h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
         // Figma's indeterminate bar is a soft "comet" gradient segment (transparent -> blue ->
         // transparent) sliding left-to-right across the track's full width in a loop -- the
         // same fade concept as bs-progress's indeterminate ring's conic-gradient comet tail,
         // but along a straight line via a linear-gradient + `transform: translateX(...)`
         // keyframe animation instead of a rotating conic-gradient.
-        index.h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (index.h("span", { key: '459e2ced94dfb34c99ad390f0b95c58727fcb4d9', part: "label", class: "bs-progress-linear__label" }, index.h("slot", { key: 'd7aff9f3079b2973665f5531a44031869366b6e3' })))));
+        index.h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (index.h("span", { key: '26e60beb19a7f45a903667928d7256a4d24875c9', part: "label", class: "bs-progress-linear__label" }, index.h("slot", { key: 'ca9c57dc3b3ee22eedf489ee4e6b3444f85b59df' })))));
     }
     // The default slot's assigned content lives in the host's light DOM regardless of whether a
     // <slot> is currently rendered in the shadow tree, so this can be computed directly from the

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

@@ -57,7 +57,7 @@ const BsProgress = class {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
         const dashOffset = circumference * (1 - value / 100);
-        return (index.h("div", { key: '92ba206f6dbe83e68a85561b8a10053a8bf57867', part: "container", class: "bs-progress" }, index.h("div", { key: '0ed35ee9e002261c4ea786794c3a725fbecfd967', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (index.h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, index.h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), index.h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
+        return (index.h("div", { key: '76f9b0175af7e6300a901f8c0e26da4b9de2a192', part: "container", class: "bs-progress" }, index.h("div", { key: '10d34faab3d49fa21e72d0cf2bd1d1c2804ef442', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (index.h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, index.h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), index.h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
         // Figma's indeterminate ring is a fading "comet tail" (transparent -> solid color),
         // not a flat-colored partial arc -- SVG has no angular/conic gradient primitive, so a
         // CSS conic-gradient (color varying by angle) + a radial-gradient mask (carving the
@@ -66,7 +66,7 @@ const BsProgress = class {
         index.h("div", { part: "arc", class: "bs-progress__spinner", style: {
                 '--bs-progress-spinner-stroke-width': `${this.strokeWidth}px`,
                 '--bs-progress-spinner-sweep': `${INDETERMINATE_SWEEP_DEGREES}deg`,
-            } }))), isDeterminate && this.showLabel && (index.h("span", { key: 'c81ebae20e37059d3f0a695b085dc50249cf2c9c', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+            } }))), isDeterminate && this.showLabel && (index.h("span", { key: 'bfc9b155c8b8d68255a0ad223e31bc25f79566b8', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
     }
 };
 BsProgress.style = bsProgressCss();