@brandsync/wc 1.13.0 → 1.14.0

package/dist/collection/components/bs-split-pane/bs-split-pane.js

@@ -0,0 +1,404 @@
+import { h } from "@stencil/core";
+const MAX_PANES = 3;
+const DEFAULT_MIN_SIZE = 96;
+/**
+ * A resizable layout of two or three panes separated by draggable, keyboard-operable dividers
+ * (the WAI-ARIA "window splitter" pattern). Content goes into the named slots `pane-1`, `pane-2`
+ * and (optionally) `pane-3`; the pane count follows which slots have content.
+ *
+ * `orientation="horizontal"` places panes side by side (vertical dividers); `"vertical"` stacks
+ * them (horizontal dividers). The first pane has a fixed size (`--bs-split-pane-first-size`) that
+ * the user can change by dragging; the last pane absorbs the remaining space. `collapsed` shrinks
+ * the first pane to a narrow rail (`--bs-split-pane-collapsed-size`) -- the component reflects the
+ * attribute so slotted content can switch to its compact rendering (e.g. icon-only list items).
+ *
+ * ## When to use
+ * - Master/detail layouts: a navigation or list pane next to one or two detail panes.
+ *
+ * ## When not to use
+ * - A temporary overlay panel (use `bs-side-panel`).
+ * - A fixed, non-resizable two-column layout (plain CSS grid; or set `resizable="false"` to keep
+ *   the dividers purely visual).
+ *
+ * @slot pane-1 - The first pane (the one that collapses).
+ * @slot pane-2 - The second pane.
+ * @slot pane-3 - Optional third pane.
+ * @part container - The flex wrapper around all panes and dividers.
+ * @part pane - Every pane wrapper (`pane-1`, `pane-2`, `pane-3` are also exposed as separate parts).
+ * @part divider - Every divider (the focusable `role="separator"` element).
+ * @part divider-thumb - The visible thumb on a divider.
+ * @prop --bs-split-pane-radius - Corner radius of the container. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-split-pane-bg - Pane background. Aliased to `--bs-surface-base`.
+ * @prop --bs-split-pane-color - Text colour inherited by slotted content. Aliased to `--bs-text-default`.
+ * @prop --bs-split-pane-first-size - Initial size of the first pane along the layout axis. Defaults to `333px` (Figma).
+ * @prop --bs-split-pane-collapsed-size - Size of the first pane while `collapsed`. Defaults to `106px` (Figma).
+ * @prop --bs-split-pane-min-size - Smallest size a resized pane may take. Defaults to `96px`.
+ * @prop --bs-split-pane-divider-size - Thickness of a divider. Aliased to `--bs-spacing-75`.
+ * @prop --bs-split-pane-divider-bg - Divider track colour. Aliased to `--bs-surface-container`.
+ * @prop --bs-split-pane-divider-thumb - Divider thumb colour. Aliased to `--bs-border-neutral-container`.
+ * @prop --bs-split-pane-divider-thumb-active - Divider thumb colour on hover, focus and drag. Aliased to `--bs-border-neutral-hover`.
+ * @prop --bs-split-pane-divider-thumb-length - Length of the divider thumb. Defaults to `250px` (Figma).
+ * @prop --bs-split-pane-border - Border between the first pane and the rest when dividers are not resizable. Aliased to `--bs-border-neutral-container`.
+ * @prop --bs-split-pane-focus-ring - Divider focus ring colour. Aliased to `--bs-border-neutral-focus`.
+ */
+export class BsSplitPane {
+    el;
+    /** `horizontal` = panes side by side, `vertical` = panes stacked. */
+    orientation = 'horizontal';
+    /** Collapses the first pane to a narrow rail. Mutable: the Enter key on the first divider toggles it. */
+    collapsed = false;
+    /** Whether the dividers can be dragged / operated by keyboard. `false` keeps them as visual separators. */
+    resizable = true;
+    /** Accessible name of each divider. */
+    dividerLabel = 'Resize panes';
+    /** Pixels moved per arrow-key press (Shift multiplies by 4). */
+    step = 16;
+    /** Fires after a resize (pointer release or key press) with the pixel size of every pane except the last. */
+    bsResize;
+    /** Fires when `collapsed` changes through user interaction. */
+    bsCollapsedChange;
+    paneCount = 2;
+    sizes = [];
+    draggingIndex = -1;
+    observer;
+    dragStart;
+    /** Toggles `collapsed` and emits `bsCollapsedChange`. */
+    async toggleCollapsed() {
+        this.collapsed = !this.collapsed;
+        this.bsCollapsedChange.emit(this.collapsed);
+    }
+    componentWillLoad() {
+        this.countPanes();
+    }
+    connectedCallback() {
+        this.observer = new MutationObserver(() => this.countPanes());
+        this.observer.observe(this.el, { childList: true, attributes: true, attributeFilter: ['slot'], subtree: false });
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    countPanes() {
+        let count = 1;
+        for (let i = 1; i <= MAX_PANES; i++) {
+            if (this.el.querySelector(`:scope > [slot="pane-${i}"]`))
+                count = i;
+        }
+        this.paneCount = Math.max(count, 1);
+    }
+    isRtl() {
+        return this.orientation === 'horizontal' && getComputedStyle(this.el).direction === 'rtl';
+    }
+    axisSize(pane) {
+        const rect = pane.getBoundingClientRect();
+        return this.orientation === 'horizontal' ? rect.width : rect.height;
+    }
+    minSize() {
+        const raw = parseFloat(getComputedStyle(this.el).getPropertyValue('--bs-split-pane-min-size'));
+        return Number.isFinite(raw) ? raw : DEFAULT_MIN_SIZE;
+    }
+    /** Largest size pane `index` may take: leave `minSize` for each pane after it, and the dividers. */
+    maxSize(index) {
+        const container = this.el.shadowRoot.querySelector('.bs-split-pane');
+        const total = this.axisSize(container);
+        const dividers = Array.from(container.querySelectorAll('.bs-split-pane__divider'));
+        const dividerTotal = dividers.reduce((sum, d) => sum + this.axisSize(d), 0);
+        const before = Array.from(container.querySelectorAll('.bs-split-pane__pane'))
+            .slice(0, index)
+            .reduce((sum, p) => sum + this.axisSize(p), 0);
+        const after = (this.paneCount - 1 - index) * this.minSize();
+        return Math.max(this.minSize(), total - dividerTotal - before - after);
+    }
+    paneEl(index) {
+        return this.el.shadowRoot.querySelectorAll('.bs-split-pane__pane')[index];
+    }
+    setSize(index, value) {
+        const clamped = Math.min(Math.max(value, this.minSize()), this.maxSize(index));
+        const next = this.sizes.slice();
+        next[index] = clamped;
+        this.sizes = next;
+    }
+    emitResize() {
+        const sizes = [];
+        // Prefer the size just committed to state: the DOM hasn't re-rendered yet when this runs.
+        for (let i = 0; i < this.paneCount - 1; i++)
+            sizes.push(Math.round(this.sizes[i] ?? this.axisSize(this.paneEl(i))));
+        this.bsResize.emit(sizes);
+    }
+    onPointerDown = (index) => (ev) => {
+        if (!this.resizable || (index === 0 && this.collapsed))
+            return;
+        ev.preventDefault();
+        ev.currentTarget.setPointerCapture(ev.pointerId);
+        this.dragStart = {
+            pointer: this.orientation === 'horizontal' ? ev.clientX : ev.clientY,
+            size: this.axisSize(this.paneEl(index)),
+            index,
+        };
+        this.draggingIndex = index;
+    };
+    onPointerMove = (ev) => {
+        if (!this.dragStart)
+            return;
+        const pointer = this.orientation === 'horizontal' ? ev.clientX : ev.clientY;
+        const delta = (pointer - this.dragStart.pointer) * (this.isRtl() ? -1 : 1);
+        this.setSize(this.dragStart.index, this.dragStart.size + delta);
+    };
+    onPointerUp = (ev) => {
+        if (!this.dragStart)
+            return;
+        ev.currentTarget.releasePointerCapture?.(ev.pointerId);
+        this.dragStart = undefined;
+        this.draggingIndex = -1;
+        this.emitResize();
+    };
+    onKeyDown = (index) => (ev) => {
+        if (!this.resizable)
+            return;
+        const horizontal = this.orientation === 'horizontal';
+        const grow = horizontal ? (this.isRtl() ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown';
+        const shrink = horizontal ? (this.isRtl() ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp';
+        const amount = this.step * (ev.shiftKey ? 4 : 1);
+        const current = this.axisSize(this.paneEl(index));
+        let handled = true;
+        if (ev.key === 'Enter' && index === 0) {
+            void this.toggleCollapsed();
+        }
+        else if (this.collapsed && index === 0) {
+            handled = false;
+        }
+        else if (ev.key === grow) {
+            this.setSize(index, current + amount);
+        }
+        else if (ev.key === shrink) {
+            this.setSize(index, current - amount);
+        }
+        else if (ev.key === 'Home') {
+            this.setSize(index, this.minSize());
+        }
+        else if (ev.key === 'End') {
+            this.setSize(index, this.maxSize(index));
+        }
+        else {
+            handled = false;
+        }
+        if (!handled)
+            return;
+        ev.preventDefault();
+        this.emitResize();
+    };
+    paneStyle(index) {
+        const last = index === this.paneCount - 1;
+        if (index === 0 && this.collapsed && this.paneCount > 1) {
+            return { flex: '0 0 var(--bs-split-pane-collapsed-size)' };
+        }
+        const size = this.sizes[index];
+        if (size !== undefined && !last)
+            return { flex: `0 0 ${size}px` };
+        if (index === 0 && !last)
+            return { flex: '0 0 var(--bs-split-pane-first-size)' };
+        return { flex: '1 1 0' };
+    }
+    percentFor(index) {
+        const container = this.el.shadowRoot?.querySelector('.bs-split-pane');
+        const pane = this.el.shadowRoot?.querySelectorAll('.bs-split-pane__pane')[index];
+        if (!container || !pane)
+            return 0;
+        const total = this.axisSize(container);
+        return total ? Math.round((this.axisSize(pane) / total) * 100) : 0;
+    }
+    render() {
+        const dividerOrientation = this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
+        const nodes = [];
+        for (let i = 0; i < this.paneCount; i++) {
+            nodes.push(h("div", { part: `pane pane-${i + 1}`, class: `bs-split-pane__pane bs-split-pane__pane--${i + 1}`, style: this.paneStyle(i) }, h("slot", { name: `pane-${i + 1}` })));
+            if (i < this.paneCount - 1) {
+                nodes.push(h("div", { part: "divider", class: { 'bs-split-pane__divider': true, 'bs-split-pane__divider--active': this.draggingIndex === i, 'bs-split-pane__divider--static': !this.resizable }, role: "separator", "aria-orientation": dividerOrientation, "aria-label": this.dividerLabel, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": this.percentFor(i), tabindex: this.resizable ? 0 : undefined, onPointerDown: this.onPointerDown(i), onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onPointerCancel: this.onPointerUp, onKeyDown: this.onKeyDown(i) }, h("span", { part: "divider-thumb", class: "bs-split-pane__thumb" })));
+            }
+        }
+        return (h("div", { key: '8ef79e5ccc0ac2e8d4204f82b3507bef387e95cc', part: "container", class: `bs-split-pane bs-split-pane--${this.orientation}` }, nodes));
+    }
+    static get is() { return "bs-split-pane"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-split-pane.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-split-pane.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsSplitPaneOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BsSplitPaneOrientation": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-split-pane/bs-split-pane.tsx",
+                            "id": "src/components/bs-split-pane/bs-split-pane.tsx::BsSplitPaneOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`horizontal` = panes side by side, `vertical` = panes stacked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Collapses the first pane to a narrow rail. Mutable: the Enter key on the first divider toggles it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "collapsed",
+                "defaultValue": "false"
+            },
+            "resizable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dividers can be dragged / operated by keyboard. `false` keeps them as visual separators."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resizable",
+                "defaultValue": "true"
+            },
+            "dividerLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of each divider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "divider-label",
+                "defaultValue": "'Resize panes'"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pixels moved per arrow-key press (Shift multiplies by 4)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "16"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "paneCount": {},
+            "sizes": {},
+            "draggingIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsResize",
+                "name": "bsResize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires after a resize (pointer release or key press) with the pixel size of every pane except the last."
+                },
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                }
+            }, {
+                "method": "bsCollapsedChange",
+                "name": "bsCollapsedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when `collapsed` changes through user interaction."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleCollapsed": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles `collapsed` and emits `bsCollapsedChange`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/bs-split-pane/bs-split-pane.stories.js

@@ -0,0 +1,47 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const list = html `
+  <div style="padding: var(--bs-spacing-300)">
+    <strong>Pane title</strong>
+    <div>Description</div>
+  </div>
+`;
+const detail = (title) => html `
+  <div style="padding: var(--bs-spacing-300)">
+    <strong>${title}</strong>
+    <div>Description</div>
+    <p>Title<br /><strong>Details</strong></p>
+    <p>Title<br /><strong>Details</strong></p>
+  </div>
+`;
+const meta = {
+    title: 'Components/bs-split-pane',
+    parameters: { docs: { description: { component: componentDescription('bs-split-pane') } } },
+    render: args => html `
+    <div style="height: 480px; border: 1px solid var(--bs-border-neutral-container)">
+      <bs-split-pane orientation=${args.orientation} ?collapsed=${args.collapsed} .resizable=${args.resizable}>
+        <div slot="pane-1">${list}</div>
+        <div slot="pane-2">${detail('Detail pane')}</div>
+        ${args.panes === 3 ? html `<div slot="pane-3">${detail('Second detail pane')}</div>` : ''}
+      </bs-split-pane>
+    </div>
+  `,
+    argTypes: {
+        orientation: { control: 'inline-radio', options: ['horizontal', 'vertical'] },
+        collapsed: { control: 'boolean' },
+        resizable: { control: 'boolean' },
+        panes: { control: 'inline-radio', options: [2, 3] },
+    },
+    args: { orientation: 'horizontal', collapsed: false, resizable: true, panes: 3 },
+};
+export default meta;
+export const Horizontal = {};
+export const HorizontalCollapsed = { args: { collapsed: true } };
+export const Vertical = { args: { orientation: 'vertical' } };
+export const TwoPanes = {
+    args: {
+        panes: 2,
+        orientation: 'vertical',
+    },
+};
+export const NotResizable = { args: { resizable: false } };

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

@@ -62,7 +62,7 @@ export class BsStepper {
     }
     render() {
         // role="list" so each bs-stepper-step's role="listitem" has the required parent.
-        return (h(Host, { key: '94662e1c7a6539f13c9405e638fb2713d1cadf6c', role: "list" }, h("slot", { key: 'ed491d1b2e37e8b4f581bf0cc06063414c9aac59', onSlotchange: this.onSlotChange })));
+        return (h(Host, { key: '7956314c41e9add72583aa8e2bd7271e6cf1068b', role: "list" }, h("slot", { key: '0ace9928ce7f573d9202a11e489a50e976d0e351', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "bs-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,7 +57,7 @@ export class BsStepperStep {
     }
     render() {
         const state = this.state;
-        return (h(Host, { key: '1c5694e67c967484efa955425ec3ed12d8f7a03e', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: 'fe84861fb98c195f54b0032bfdeb0f1002ed9ebb', class: "bs-stepper-step__top" }, h("span", { key: '2d3d16b27bb87230f14ccda2442614db65f703d8', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: 'c547471f2fe4e5a75a255ce09cc6a0c2f2bc11ec', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: 'da0d947ad7661120b764257e3dbd7ae7c9940e75' }), state === 'error' && h(ExclamationIcon, { key: 'a5004b5d62b18e34b34d0c81eb53a4dbd65bc1c2' })), h("span", { key: 'b7e9d951076dfa1aa62bcde535a29d877cc618d3', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '415ecffabac4da1354660d508db420dbb2610a0a', class: "bs-stepper-step__connector-line" }))), h("span", { key: '99d30eb3bb209f1d4cb98bd8fcc3821c70508a1f', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '82c9c1e5fac460d45f7aaa6e1ecdaf4a717c408f', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: 'c782b740f87d29aee56c523fccbeeff4a2032562', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (h(Host, { key: 'f51401da1a777c73fa70faa5a9f05f0234f517f1', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '30a1c060295b4addfc53ab67757661c7750ca781', class: "bs-stepper-step__top" }, h("span", { key: 'c4acc0a90fe006ed779072025c0aefc30a96c43f', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '2a03c4c0b2e07a3879b7dbbcfc2022c6d753072d', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: 'a6492fbd22bc9659fa7e71340bab908eee807dbb' }), state === 'error' && h(ExclamationIcon, { key: '5390c086f6c8314040862b5a4f680685d67a1f86' })), h("span", { key: '535e553bca360fe96538afb4baf0063e18b88fd8', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: 'a04809fbdb2a47a129cf1a499bf0f9956d425e95', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'ff4b573a3f0b1bac78cabbc68d58d4ecfe330fe9', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '2cecc129a85da61efaa8c670754feca4a56fe717', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '5c06546a24247733d7df9c99c753074809272feb', part: "description", class: "bs-stepper-step__description" }, this.description)))));
     }
     static get is() { return "bs-stepper-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,7 +75,7 @@ export class BsSwitch {
         const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: 'c0b36dcd360b286a7b926268f15389c327071ff5', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: 'b6194c6f6c247aa59f56677e0a8505baebe4cd20', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'bd49a6013acddfff26cdcbbd412725b7b4b0d1d9', part: "track", class: trackClasses }, h("span", { key: '3973bc2716435c5aaf050f772b43a35827362d39', part: "knob", class: knobClasses })), h("span", { key: 'b7dd216fed4ebc98bd83cc7934523ef25e91f9a4', part: "label", class: "bs-switch__label" }, h("slot", { key: '24a8cd4c77ed2fc3038f46e0e619de19a536b8c0' }))));
+        return (h("label", { key: '11ad9e104dabafbecba8395436f4f88fff141449', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '4a6c4400f9193f481b1134517ed7d53828cca27d', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'f6dca44c46b5412135cb43220ece5a8d161018d0', part: "track", class: trackClasses }, h("span", { key: '6a06911e7f17822a4b5df219f9c564cf8d130fbb', part: "knob", class: knobClasses })), h("span", { key: '6628c4ef4e1097d5b41b0b8eaac47eb0af627722', part: "label", class: "bs-switch__label" }, h("slot", { key: 'd1ce12e2a63a3a1a067c4080bae9c7612e8dd933' }))));
     }
     static get is() { return "bs-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -94,7 +94,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: '3c512a80e93fec29f2cfd70cf921477b323064fa', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: 'a206bde98f6b17c667c3e9690b6dcd3715376f99', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '9a8ef173b7d97db176c66de0a8f7215c967f07bc', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '53d9fd3a06976bb9366829864ae7f1e86c39ef50', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '37a6840ad59a98a0bdc13dfc1c87ece5e8d8ec54', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: 'bccfcaa980bc351de48dc6e0611614721f7e63aa', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: 'f9bb9caedc8fb34d90dd23a14e431714d2175389', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '457be6231cd41bfe12198cda4780bff83af84d52', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'dea0e6da1a85682c7e04c93bb6c07165b720e168', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '6e2c366f47f47a976cdcc667222e281306dbfc63', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-inline-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -107,7 +107,7 @@ export class BsTab {
         const iconOnly = this.hasIcon && !this.hasLabel;
         const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
         const showBadge = this.hasBadge && !iconOnly && !vertical;
-        return (h("button", { key: '445a6cb3dd289641e7499a612e90a1916b6e85b7', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: 'c14a3671a22711ff388dc5dbd08ed7d337e97f3d', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '0baa4ff03cfc81ca1c76d10f77997fc85b55d403', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '710df7af9639d65a2d4cb750f73a2369607931ad', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'b60afb9f8478feb6fbc9fa5d6a7b402029238807', onSlotchange: this.onLabelSlotchange })), h("span", { key: '7621d5e89eacbe23e66451f294db0012c7fbd18b', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '9c26f2322701714939b072431e9f9aa91cffc778', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '77f31d38361e15b81a72acbf43e2ab6d852b835d', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: '088ea367ad3b8b1afa36e8bb4cac7fb150aae7f2', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: 'a68c2b1a582dbdae20dad694e4d69b80aa5223ea', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '80a7d2856033c87f9f7cce7b3637e6a91106d76d', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '77e038473baf0bd124c589ce24c25ba0bebe2cde', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'dd09813d9c8dcb66fd338ff238861b0b02a8df07', onSlotchange: this.onLabelSlotchange })), h("span", { key: '22f74bafa1ad5948c0e1f09e9eb6f20f3b8d16ae', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '65b8f288b9fcbfdb492d594226ef5da09fe082dd', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: 'fcda37d86c4c799e97ec0bf60ea7edd647e9c45e', part: "indicator", class: "bs-tab__indicator" })));
     }
     static get is() { return "bs-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -135,7 +135,7 @@ export class BsTabs {
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (h("div", { key: 'dcee9772097aec3389f8a87e4bb29ea88cef5298', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'dd253eade8f13fd774fb688e01abc8cc05b6af81', onSlotchange: () => this.syncRovingTabindex() })));
+        return (h("div", { key: '0bc0de64c29c4bca86e2709fd3f376e4c195eab2', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '0751673c06ae93234a987fd809a49c9d5517d29c', onSlotchange: () => this.syncRovingTabindex() })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -200,14 +200,14 @@ export class BsTimepicker {
         return (h("div", { part: "spinner", class: "bs-timepicker__spinner" }, h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel(this.increaseLabel), tabindex: -1, onClick: () => this.stepBy(col, 1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M18 15L12 9L6 15", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { part: "value", class: "bs-timepicker__value", role: "spinbutton", tabindex: 0, "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": n, "aria-valuetext": pad(n), onKeyDown: this.onKeyDown(col), onBlur: () => (this.typed = '') }, pad(n)), h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel(this.decreaseLabel), tabindex: -1, onClick: () => this.stepBy(col, -1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     render() {
-        return (h("bs-card", { key: '2033e822eb65c41caeb338bd7b0ea569e775b715', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: '952ccde08ccf1c56404c9364c16980c5008abb62', class: "bs-timepicker__body" }, h("div", { key: '39b3370e55682275901c68c84ad8db8142525d31', part: "header", class: "bs-timepicker__header" }, h("div", { key: '77858996498a08dc30cad647eec89ec975db71a9', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: 'f29d33b987ae0a5d1448f0636787b1b1abc79187', class: "bs-timepicker__format" }, h("span", { key: '975b259c50cc3f10366327a75da5e1293ee803f3' }, this.formatLabel), h("bs-switch", { key: 'db35c8e82b52549e5d63e3eb5188f094f3ac56ae', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: 'bb8875c816372d424f8bbba86d6a1e0bc409f5b2', class: "bs-timepicker__divider" }), h("div", { key: '2dfdd3a449ad53f6d6af142007f73486ce9d852e', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '05a3adb45f35c3bd51a275d38cae8f9fe4f3afbf', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: 'b51e22b366c29a293b99ea91f46872f767295d4f', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: '33e566b81ad2e96bf0033ed43f2b70dfe54371f2', cx: "2", cy: "10", r: "2" }), h("circle", { key: '4210a5cd7058385bd983225951d94aeda4aa9c06', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '8f557a95389fbbc579539744230933000a559526', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
+        return (h("bs-card", { key: '74af930fdaa05b2d91f4ca447078175a1c978994', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: 'f67c4d6f522e5ee39dad612521324d87a1d2c48d', class: "bs-timepicker__body" }, h("div", { key: 'c9bef71e51c20f5a09ae38519f89b7823fd2f9ad', part: "header", class: "bs-timepicker__header" }, h("div", { key: '4c4aa31d8f11f92bb789d7720222a39914a283a7', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: 'db8fbe9176836ccf19d60079fd21655a6f078eed', class: "bs-timepicker__format" }, h("span", { key: '42dd4163160e475dc5b27ec99534edf5df1e5a3d' }, this.formatLabel), h("bs-switch", { key: '1eca77cb8284366630ec8a53c2e5ca00ecea4382', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: 'ec60756f323a04ddc74f9cf8bd6c84276cbe2a0b', class: "bs-timepicker__divider" }), h("div", { key: '15609379e051fe0eddbe491f0ccaeb7efad3ae81', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '40760ac8da6112c1c82554ed807f156c3998ceeb', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: 'b15b5bf4db3790c167b13caae40e1d1e7e92bfb7', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: 'cdc4cee6cd246b05be5f11939425b44160a65d54', cx: "2", cy: "10", r: "2" }), h("circle", { key: '65a5393d6f05c241d7c1aa3c8090c22266386b0e', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '4292168e81da8883d93b1ce9e3e60edd00726cfb', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
                 { label: 'AM', value: 'AM' },
                 { label: 'PM', value: 'PM' },
             ], onBsChange: (ev) => {
                 const pm = ev.detail === 'PM';
                 if (pm !== this.isPm)
                     this.hour = (this.hour + 12) % 24;
-            } }))), h("div", { key: 'fa37a2d7ac535f62e3c7d56eebee4bf6a6dbba5c', class: "bs-timepicker__divider" }), h("div", { key: 'f0c0e549ae1282ee4e93504163c279a9ccd6f241', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: '301330874cad2f9beb3b82e580c24168fc5b0052', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: 'bf193dbb17a2c71c16b574b31035f1752c89765b', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
+            } }))), h("div", { key: '9ceb4e065f2851ae0b4adc22fa6795d593df362a', class: "bs-timepicker__divider" }), h("div", { key: '8cbe32e5381d83e27ab7b97c50091fbf837428b8', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: '17fb1f5fcb3b40033951d13c460500c0bbc3f5a1', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '4a3a6a6bb3ef01a66e6198c1bcb148b94a164f8d', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
     }
     static get is() { return "bs-timepicker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class BsToast {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '376303627d6ffb7b0003dc83e874784ede700486', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '767b01d764404a3b801d451ea2b2f52bcccb8425', class: "bs-toast__content" }, h("span", { key: '701619d874f9849da38d4e1c19503ea93773cd75', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: 'b3dfc1ae57ed798985074d4572349da5875c1e0a', state: this.state })), h("span", { key: 'e41d7a06af64543073371b57d02439ca93068261', part: "message", class: "bs-toast__message" }, h("slot", { key: '5e4e717afea3ad71c66a06a8c0ab265b8a850fa1' }))), h("div", { key: 'daa05fc5a4911cdadd52169377b8bb72bf0e11f7', class: "bs-toast__actions" }, h("button", { key: '0a2dad22af165429ef95db499f44ee6568a51bfb', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '74b90cc634d5bec5e8e0d64bf1e4ad347d41a533' })))));
+        return (h("div", { key: '759d3745ca8ffca53fa286408fa694ffe374b99d', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '7f46844194cbb5fa9efd7ac475c8a417fbde9f27', class: "bs-toast__content" }, h("span", { key: 'cc4ca41ce6060f7ad6b84a9d0400d0515d200877', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: 'dc3754b7390e54fd84bde93903c57326046a5d3f', state: this.state })), h("span", { key: '1fbecaf2d09591e08708ee99381d0acc1ded3a8f', part: "message", class: "bs-toast__message" }, h("slot", { key: 'b7aba4aee990aec06d3782ab38332825b74ed85a' }))), h("div", { key: '1a4bb03633bf3aa703005c44b4d0d807a20dd51d', class: "bs-toast__actions" }, h("button", { key: 'a8ca2bc51acd31d3b21a63e128d98d029d638030', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '97dc7540e08a0bff5784a8bb22830370513b930b' })))));
     }
     static get is() { return "bs-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class BsTooltip {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: 'cd34354a526f3bfe60473dcccd3199149cb8dd62', class: "bs-tooltip" }, h("span", { key: '17943240c38e9c9ebaf80860462afaab841c8049', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '6c2a1c40f7d6ce8b2d14eddb143fe90bb896077c', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '3b3f22ea81394e4ee95e3e78400599cd570f5d98' }))));
+        return (h("div", { key: 'f29c467c70eb488ef6d1d83af7a71be2d26307be', class: "bs-tooltip" }, h("span", { key: 'e74432210ae015c44a87f1d5f60c3e448f016893', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '10ef531bf6076636e890ae6f679c0bd368714802', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '0a634836408d120230bfed0c9dc11c014c4f0c4d' }))));
     }
     static get is() { return "bs-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,7 +48,7 @@ export class BsTooltipTrigger {
     };
     render() {
         const show = this.visible && !!this.text;
-        return (h("div", { key: '2fc1cae6e9561dcb1849011c40771038efd0f546', part: "trigger", class: "bs-tooltip-trigger", "aria-describedby": this.tooltipId, onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide, onKeyDown: this.onKeyDown }, h("slot", { key: 'ceb7dd09728db2917e47db7178b543a8766a9147' }), h("div", { key: '8a1809cc681b826a44de2d49a672933d48a2163b', part: "tooltip", id: this.tooltipId, class: "bs-tooltip-trigger__tooltip", role: "tooltip", hidden: !show }, h("bs-tooltip", { key: '00df96c8a33440e72bd46ada9aca02ba75fb1cd5' }, this.text))));
+        return (h("div", { key: 'a0038c387bb975237a46686d49a8cab159809056', part: "trigger", class: "bs-tooltip-trigger", "aria-describedby": this.tooltipId, onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide, onKeyDown: this.onKeyDown }, h("slot", { key: 'ab487b1303922867a4f36f148c504af7bc01f454' }), h("div", { key: '336ebebfd45f33b0a22c31af8d024d9c271e8793', part: "tooltip", id: this.tooltipId, class: "bs-tooltip-trigger__tooltip", role: "tooltip", hidden: !show }, h("bs-tooltip", { key: '97ffe6cc68d68fd4716169dd7a158ac5586435f8' }, this.text))));
     }
     static get is() { return "bs-tooltip-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-whats-new-entry/bs-whats-new-entry.js

@@ -50,7 +50,7 @@ export class BsWhatsNewEntry {
     hasImage = false;
     render() {
         const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 3));
-        return (h("div", { key: 'ff956b15aeb7267e70e15fd447d7ccc02bdf488f', class: "bs-whats-new-entry" }, (this.tag || this.date || this.unread) && (h("div", { key: '7bd5e8ea1e0a3628ece59407cc58354c3d30426e', part: "meta", class: "bs-whats-new-entry__meta" }, this.tag && (h("bs-chip-informative", { key: '6ae5623bf2e65c1d7a52ec93f0801c9ea188de08', part: "tag", size: "sm", color: this.tagColor }, this.tag)), this.date && (h("span", { key: '741b8fbb241b9ee321a8e77fbb81550d8a61cf21', part: "date", class: "bs-whats-new-entry__date" }, this.date)), this.unread && (h("span", { key: 'caa348708573629d60ccf047357dd086f2c7350e', part: "unread", class: "bs-whats-new-entry__unread" }, h("span", { key: 'a5671ad6a6ec951b4cb20ae5dfb6dbcd1e6b3006', class: "bs-whats-new-entry__sr-only" }, this.unreadLabel))))), h("div", { key: '10953346635c715ca0eb5c82f2b281a5a7113a90', part: "image", class: { 'bs-whats-new-entry__image': true, 'bs-whats-new-entry__image--visible': this.hasImage } }, h("slot", { key: '63764e4700d494eb78c0fe0c9c203575ddced731', name: "image", onSlotchange: (ev) => (this.hasImage = ev.target.assignedNodes().length > 0) })), h("div", { key: 'b81d30298930bb2f1aa3ac3256ece61f700d0480', class: "bs-whats-new-entry__content" }, this.heading && h(`h${level}`, { part: 'heading', class: { 'bs-whats-new-entry__heading': true } }, this.heading), this.description && (h("p", { key: '5a0c0096dd06fb735ec4f5f897c9a392d37aa723', part: "description", class: "bs-whats-new-entry__description" }, this.description)), this.actionLabel && (h("bs-button", { key: 'dc86c02b65b3dca892873b08f3b541d92db9058c', part: "action", class: "bs-whats-new-entry__action", variant: "subtle", size: "sm", onClick: () => this.bsAction.emit() }, this.actionLabel, h("svg", { key: '2b6bdb66eff8f452bec1ea47e5c2ec6cb4854b8b', slot: "end-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '67299241e7a3d29adfd9b97512b3e6ee49f833c7', d: "M5 12H19" }), h("path", { key: 'd7e8ee2608e3345b0ab0aa1988d6da42b1f14ecf', d: "M13 6L19 12L13 18" }))))), this.divider && h("div", { key: '3c7d0fb5f1aebc224de840c68bb66f1bbc9b540e', part: "divider", class: "bs-whats-new-entry__divider" })));
+        return (h("div", { key: 'c63cac0c83439a236c70326ad5a96c7f81937a9b', class: "bs-whats-new-entry" }, (this.tag || this.date || this.unread) && (h("div", { key: '3fd787ee36bc22757f2ed6afe14b722800ae2fc0', part: "meta", class: "bs-whats-new-entry__meta" }, this.tag && (h("bs-chip-informative", { key: '9df6bfdc16ed643a30eb41091e1fa3a3596afd72', part: "tag", size: "sm", color: this.tagColor }, this.tag)), this.date && (h("span", { key: 'dd69ccd630870d45a917141e354eacc58af2a0c6', part: "date", class: "bs-whats-new-entry__date" }, this.date)), this.unread && (h("span", { key: '953e0f25aa8eb15bf2a6b3dd314595ca89f07e4d', part: "unread", class: "bs-whats-new-entry__unread" }, h("span", { key: '70b11972fd39cf3fdc5d75e77d78069f75be0d66', class: "bs-whats-new-entry__sr-only" }, this.unreadLabel))))), h("div", { key: '85e754c3c08e60fdf96e437c86fa04528a1bd685', part: "image", class: { 'bs-whats-new-entry__image': true, 'bs-whats-new-entry__image--visible': this.hasImage } }, h("slot", { key: 'd2af24357183cd5a2055a7629d9d0b6a521cd7c6', name: "image", onSlotchange: (ev) => (this.hasImage = ev.target.assignedNodes().length > 0) })), h("div", { key: '5faf816a5c7399c78ffefa0aa7fdce1263e0c541', class: "bs-whats-new-entry__content" }, this.heading && h(`h${level}`, { part: 'heading', class: { 'bs-whats-new-entry__heading': true } }, this.heading), this.description && (h("p", { key: '48e4d51341ebb9b3f22891dc3143b0820b094e53', part: "description", class: "bs-whats-new-entry__description" }, this.description)), this.actionLabel && (h("bs-button", { key: 'a7172c19eb22972e55fffdd3f655b98a891e07fb', part: "action", class: "bs-whats-new-entry__action", variant: "subtle", size: "sm", onClick: () => this.bsAction.emit() }, this.actionLabel, h("svg", { key: '125e1d135e8e02d986a3dd3c7bedc63c114c7562', slot: "end-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: 'aecdc16aeb47469208eda8429c40118236a54c29', d: "M5 12H19" }), h("path", { key: '5cc3567f128808906a1e688606fc1e3e5f6afd32', d: "M13 6L19 12L13 18" }))))), this.divider && h("div", { key: '3207ac68a8ab88d6698110338d998a4d42a6caf2', part: "divider", class: "bs-whats-new-entry__divider" })));
     }
     static get is() { return "bs-whats-new-entry"; }
     static get encapsulation() { return "shadow"; }