@brandsync/wc 1.13.0 → 1.15.0

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

@@ -0,0 +1,113 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const mount = (props = {}, count = 3) => render(h("div", { style: { width: '400px' } }, h("bs-stack", { ...props }, Array.from({ length: count }, (_, i) => (h("div", { id: `c${i}`, style: { width: '50px', height: '20px' } }, i))))));
+const stackOf = (root) => root.querySelector('bs-stack');
+const rect = (root, id) => root.querySelector(`#${id}`).getBoundingClientRect();
+describe('bs-stack', () => {
+    it('defaults: vertical, stretch, start, gap 100', async () => {
+        const { root } = await mount();
+        const el = stackOf(root);
+        expect(el).toEqualAttribute('direction', 'vertical');
+        expect(el).toEqualAttribute('align', 'stretch');
+        expect(el).toEqualAttribute('justify', 'start');
+        const cs = getComputedStyle(el);
+        expect(cs.flexDirection).toBe('column');
+        expect(parseFloat(cs.rowGap)).toBeGreaterThan(0);
+        const gap = rect(root, 'c1').top - rect(root, 'c0').bottom;
+        expect(Math.round(gap)).toBe(Math.round(parseFloat(cs.rowGap)));
+    });
+    it('horizontal lays children in a row', async () => {
+        const { root } = await mount({ direction: 'horizontal' });
+        expect(rect(root, 'c1').left).toBeGreaterThan(rect(root, 'c0').left);
+        expect(Math.round(rect(root, 'c1').top)).toBe(Math.round(rect(root, 'c0').top));
+    });
+    it('gap prop maps to a spacing token; bigger token gives a bigger gap; invalid falls back', async () => {
+        const { root, waitForChanges } = await mount({ gap: '200' });
+        const el = stackOf(root);
+        const g200 = parseFloat(getComputedStyle(el).rowGap);
+        el.setAttribute('gap', '100');
+        await waitForChanges();
+        const g100 = parseFloat(getComputedStyle(el).rowGap);
+        expect(g200).toBeGreaterThan(g100);
+        el.setAttribute('gap', '999');
+        await waitForChanges();
+        expect(parseFloat(getComputedStyle(el).rowGap)).toBe(g100);
+        el.setAttribute('gap', '0');
+        await waitForChanges();
+        expect(parseFloat(getComputedStyle(el).rowGap)).toBe(0);
+    });
+    it('--bs-stack-gap can be overridden directly', async () => {
+        const { root } = await mount({ style: { '--bs-stack-gap': '24px' } });
+        expect(Math.round(rect(root, 'c1').top - rect(root, 'c0').bottom)).toBe(24);
+    });
+    it('align and justify position items', async () => {
+        const { root, waitForChanges } = await mount({ direction: 'horizontal', align: 'center', justify: 'end' });
+        const el = stackOf(root);
+        expect(Math.round(rect(root, 'c2').right)).toBe(Math.round(el.getBoundingClientRect().right));
+        el.setAttribute('justify', 'center');
+        await waitForChanges();
+        const first = rect(root, 'c0').left - el.getBoundingClientRect().left;
+        const last = el.getBoundingClientRect().right - rect(root, 'c2').right;
+        expect(Math.abs(first - last)).toBeLessThan(2);
+    });
+    it('wrap lets items flow onto a second line', async () => {
+        const { root } = await render(h("div", { style: { width: '120px' } }, h("bs-stack", { direction: "horizontal", wrap: true }, h("div", { id: "a", style: { width: '80px', height: '10px' } }), h("div", { id: "b", style: { width: '80px', height: '10px' } }))));
+        expect(rect(root, 'b').top).toBeGreaterThan(rect(root, 'a').top);
+    });
+    it('divider inserts n-1 decorative dividers, perpendicular to the direction', async () => {
+        const { root, waitForChanges } = await mount({ divider: true });
+        await waitForChanges();
+        const el = stackOf(root);
+        const dividers = el.shadowRoot.querySelectorAll('bs-divider');
+        expect(dividers.length).toBe(2);
+        expect(dividers[0]).toEqualAttribute('orientation', 'horizontal');
+        expect(dividers[0]).toEqualAttribute('role', 'none');
+        // Light DOM children stay in place and in order.
+        expect(Array.from(el.children).map(c => c.id)).toEqual(['c0', 'c1', 'c2']);
+        // Geometry: a divider sits between c0 and c1.
+        const d = dividers[0].getBoundingClientRect();
+        expect(d.top).toBeGreaterThanOrEqual(Math.round(rect(root, 'c0').bottom));
+        expect(d.bottom).toBeLessThanOrEqual(Math.round(rect(root, 'c1').top) + 1);
+    });
+    it('horizontal stack uses vertical dividers that stretch to the row height', async () => {
+        const { root, waitForChanges } = await mount({ divider: true, direction: 'horizontal' });
+        await waitForChanges();
+        const el = stackOf(root);
+        const dividers = el.shadowRoot.querySelectorAll('bs-divider');
+        expect(dividers.length).toBe(2);
+        expect(dividers[0]).toEqualAttribute('orientation', 'vertical');
+        expect(Math.round(dividers[0].getBoundingClientRect().height)).toBe(Math.round(el.getBoundingClientRect().height));
+    });
+    it('tracks added and removed children', async () => {
+        const { root, waitForChanges } = await mount({ divider: true });
+        await waitForChanges();
+        const el = stackOf(root);
+        const extra = document.createElement('div');
+        extra.id = 'extra';
+        el.appendChild(extra);
+        await new Promise(r => setTimeout(r, 50));
+        await waitForChanges();
+        expect(el.shadowRoot.querySelectorAll('bs-divider').length).toBe(3);
+        el.removeChild(extra);
+        el.removeChild(el.firstElementChild);
+        await new Promise(r => setTimeout(r, 50));
+        await waitForChanges();
+        expect(el.shadowRoot.querySelectorAll('bs-divider').length).toBe(1);
+    });
+    it('turning divider off removes dividers and generated slot attributes', async () => {
+        const { root, waitForChanges } = await mount({ divider: true });
+        await waitForChanges();
+        const el = stackOf(root);
+        expect(root.querySelector('#c0').getAttribute('slot')).toBe('bs-stack-item-0');
+        el.divider = false;
+        await waitForChanges();
+        expect(el.shadowRoot.querySelectorAll('bs-divider').length).toBe(0);
+        expect(root.querySelector('#c0').hasAttribute('slot')).toBe(false);
+    });
+    it('no dividers by default and none for a single child', async () => {
+        const { root } = await mount();
+        expect(stackOf(root).shadowRoot.querySelectorAll('bs-divider').length).toBe(0);
+        const single = await mount({ divider: true }, 1);
+        await single.waitForChanges();
+        expect(stackOf(single.root).shadowRoot.querySelectorAll('bs-divider').length).toBe(0);
+    });
+});

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

@@ -0,0 +1,22 @@
+:host {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  /* --bs-stack-gap is the public override; -token is set from the `gap` prop. */
+  gap: var(--bs-stack-gap, var(--bs-stack-gap-token, var(--bs-spacing-100)));
+}
+:host([direction='horizontal']) { flex-direction: row; }
+:host([wrap]) { flex-wrap: wrap; }
+:host([align='start']) { align-items: flex-start; }
+:host([align='center']) { align-items: center; }
+:host([align='end']) { align-items: flex-end; }
+:host([align='stretch']) { align-items: stretch; }
+:host([align='baseline']) { align-items: baseline; }
+:host([justify='start']) { justify-content: flex-start; }
+:host([justify='center']) { justify-content: center; }
+:host([justify='end']) { justify-content: flex-end; }
+:host([justify='between']) { justify-content: space-between; }
+:host([justify='around']) { justify-content: space-around; }
+slot { display: contents; }

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

@@ -0,0 +1,252 @@
+import { Host, h } from "@stencil/core";
+const SPACING_TOKENS = ['0', '25', '50', '75', '100', '150', '200', '250', '300', '350', '400', '500', '550', '600', '700', '800', '1000', '1200', '1500'];
+const MARK = 'data-bs-stack-item';
+/**
+ * A flex layout that arranges its children in a row or column with a token-based gap, optionally
+ * drawing a divider between children.
+ *
+ * Built from: `bs-divider` (when `divider` is set).
+ *
+ * With `divider`, each child is given a generated `slot="bs-stack-item-N"` attribute (plus a
+ * `data-bs-stack-item` marker) so a divider can be rendered between the named slots. Light-DOM
+ * nodes are never moved; the attributes are removed again when `divider` is turned off.
+ *
+ * ## When to use
+ * - Spacing and aligning a short run of siblings (form fields, button rows, card content).
+ *
+ * ## When not to use
+ * - Two-dimensional grids (use CSS grid).
+ * - Resizable panes (use `bs-split-pane`).
+ *
+ * @slot - The items to arrange.
+ * @part divider - Each generated `bs-divider` (only with `divider`).
+ * @prop --bs-stack-gap - Space between items. Defaults from the `gap` prop (`--bs-spacing-<gap>`); may be overridden directly.
+ */
+export class BsStack {
+    el;
+    /** Main axis: `vertical` stacks children in a column, `horizontal` in a row. */
+    direction = 'vertical';
+    /** Spacing token name (e.g. `200` => `--bs-spacing-200`). Invalid values fall back to `100`. */
+    gap = '100';
+    /** Cross-axis alignment. */
+    align = 'stretch';
+    /** Main-axis distribution. */
+    justify = 'start';
+    /** Lets items wrap onto further lines. */
+    wrap = false;
+    /** Renders a decorative `bs-divider` between each child. */
+    divider = false;
+    itemCount = 0;
+    dividerChanged() {
+        this.sync();
+    }
+    sync = () => {
+        if (!this.divider) {
+            this.clearSlots();
+            this.itemCount = 0;
+            return;
+        }
+        // Children without a foreign `slot` attribute (ours are marked).
+        const items = Array.from(this.el.children).filter(c => !c.hasAttribute('slot') || c.hasAttribute(MARK));
+        items.forEach((c, i) => {
+            const name = `bs-stack-item-${i}`;
+            if (c.getAttribute('slot') !== name)
+                c.setAttribute('slot', name);
+            c.setAttribute(MARK, '');
+        });
+        this.itemCount = items.length;
+    };
+    clearSlots() {
+        Array.from(this.el.children)
+            .filter(c => c.hasAttribute(MARK))
+            .forEach(c => {
+            c.removeAttribute('slot');
+            c.removeAttribute(MARK);
+        });
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    disconnectedCallback() {
+        this.clearSlots();
+    }
+    render() {
+        const gap = SPACING_TOKENS.includes(String(this.gap)) ? String(this.gap) : '100';
+        const dividerOrientation = this.direction === 'horizontal' ? 'vertical' : 'horizontal';
+        const parts = [];
+        if (this.divider) {
+            for (let i = 0; i < this.itemCount; i++) {
+                if (i > 0)
+                    parts.push(h("bs-divider", { part: "divider", decorative: true, orientation: dividerOrientation }));
+                parts.push(h("slot", { name: `bs-stack-item-${i}`, onSlotchange: this.sync }));
+            }
+        }
+        return (h(Host, { key: '36539e2d556a29fffe996ae4b53d207ac39e3889', style: { '--bs-stack-gap-token': `var(--bs-spacing-${gap})` } }, h("slot", { key: 'fe94e79e6ded0341d04792c9be2949c6663de5a9', onSlotchange: this.sync }), parts));
+    }
+    static get is() { return "bs-stack"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-stack.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-stack.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsStackDirection",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BsStackDirection": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-stack/bs-stack.tsx",
+                            "id": "src/components/bs-stack/bs-stack.tsx::BsStackDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Main axis: `vertical` stacks children in a column, `horizontal` in a row."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "direction",
+                "defaultValue": "'vertical'"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing token name (e.g. `200` => `--bs-spacing-200`). Invalid values fall back to `100`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "'100'"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsStackAlign",
+                    "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {
+                        "BsStackAlign": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-stack/bs-stack.tsx",
+                            "id": "src/components/bs-stack/bs-stack.tsx::BsStackAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cross-axis alignment."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "align",
+                "defaultValue": "'stretch'"
+            },
+            "justify": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsStackJustify",
+                    "resolved": "\"around\" | \"between\" | \"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "BsStackJustify": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-stack/bs-stack.tsx",
+                            "id": "src/components/bs-stack/bs-stack.tsx::BsStackJustify"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Main-axis distribution."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "justify",
+                "defaultValue": "'start'"
+            },
+            "wrap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lets items wrap onto further lines."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "wrap",
+                "defaultValue": "false"
+            },
+            "divider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders a decorative `bs-divider` between each child."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "divider",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "itemCount": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "divider",
+                "methodName": "dividerChanged"
+            }];
+    }
+}

package/dist/collection/components/bs-stack/bs-stack.stories.js

@@ -0,0 +1,36 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const box = (label) => html `<div style="padding: var(--bs-spacing-150); background: var(--bs-surface-container); border-radius: var(--bs-border-radius-100)">${label}</div>`;
+const meta = {
+    title: 'Components/bs-stack',
+    parameters: { docs: { description: { component: componentDescription('bs-stack') } } },
+    render: args => html `
+    <bs-stack
+      direction=${args.direction}
+      gap=${args.gap}
+      align=${args.align}
+      justify=${args.justify}
+      ?wrap=${args.wrap}
+      ?divider=${args.divider}
+      style="width: 480px"
+    >
+      ${box('One')} ${box('Two')} ${box('Three')}
+    </bs-stack>
+  `,
+    argTypes: {
+        direction: { control: 'inline-radio', options: ['vertical', 'horizontal'] },
+        gap: { control: 'select', options: ['0', '25', '50', '75', '100', '150', '200', '250', '300', '350', '400', '500', '550', '600', '700', '800', '1000', '1200', '1500'] },
+        align: { control: 'select', options: ['start', 'center', 'end', 'stretch', 'baseline'] },
+        justify: { control: 'select', options: ['start', 'center', 'end', 'between', 'around'] },
+        wrap: { control: 'boolean' },
+        divider: { control: 'boolean' },
+    },
+    args: { direction: 'vertical', gap: '100', align: 'stretch', justify: 'start', wrap: false, divider: false },
+};
+export default meta;
+export const Default = {};
+export const Horizontal = { args: { direction: 'horizontal', gap: '200' } };
+export const WithDividers = { args: { divider: true, gap: '200' } };
+export const HorizontalWithDividers = { args: { direction: 'horizontal', divider: true, gap: '200', align: 'center' } };
+export const Wrapping = { args: { direction: 'horizontal', wrap: true, gap: '150' } };
+export const SpaceBetween = { args: { direction: 'horizontal', justify: 'between' } };

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: '974bd59785233de47d55750ede0a3d823ff11c75', role: "list" }, h("slot", { key: 'ce637c2c5631329c747897c66ec2cca9e6f738fb', 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: 'aebeb38afde905d2b5d12f6c6218c7f6d8caa6db', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '5ce2ab43631225cabfad3d0a65724fe53475c609', class: "bs-stepper-step__top" }, h("span", { key: '5270d9396ce4eaae1e7f8893d28198df7f87d515', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: 'a2a83808311c13113d9cefa5a2bc9926be9dea97', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: 'acf704a0de2391bac5cddc3eebef1f6aa821e233' }), state === 'error' && h(ExclamationIcon, { key: '4fc253c6ffced8ef5eaf337e39c0912b0765f5aa' })), h("span", { key: '163f5b4e465c4b6b27238ceaf73d7cdd96f5b376', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: 'f71f15dba5235e6176dad102c4ebad976e063900', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'ae5cd8999024687a6a3631dc6887428256899479', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'a5971b572a0f1a2f602e8f888a16d6e0e5599183', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '2873a2ceb40f7abc5e543a0d50192bc42945f3e5', 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: '8e879cda3d51659448298ad74e0cd72d6a3c7692', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '49e885f0275339b520e601eab3dd5e58e4deaf33', 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: '713c1fe5e578730b3afdeff880083ca9df5f0805', part: "track", class: trackClasses }, h("span", { key: 'f64210e5e3c6fa2c814567921922da3a3b93dd5f', part: "knob", class: knobClasses })), h("span", { key: '5a5cdbdb31470bcda460412ddb6f78fa4bb37a4b', part: "label", class: "bs-switch__label" }, h("slot", { key: '4d1857d66cfbed3b59805359692371decec5c374' }))));
     }
     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: '4b8df7a5f37f0aad60679cbdd3bd03cb20482ba7', 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: '037cdaae4331e050b5c02083d1776bb5509ff92b', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '3b67b01e65434c35545fc9f06dab7bb871362001', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'd41611429e951d13df23521f938217716f2afacd', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '8ea82e8ecc120c9961b8288a1162ec03ac0223bf', 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: '23d18710e7c697958aa0a7b4f8248bd85541db04', 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: 'd48e487274031e23a9febc4dccec966e939420ff', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '004e5fc7c61b9d4a9813ce8a5ce21e71ff3f9bb8', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'e7d905a2daed877414e43078a2a4460486eee9a2', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '2bc379c7f2bd7a14c1864da3024773a1e392598f', onSlotchange: this.onLabelSlotchange })), h("span", { key: '92aff30ad4fd06d0a16c5fc40202fb4c553e80d6', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'e655135dd81a288e7428d00c0778bb2b42294258', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: 'abecf083399730cc0e84c62109f51b683bf55ac0', 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: '07185cefa2f1a443035e61ba13f080913ce73ca6', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '99fe98e753609bc4f594fb32dab5a7df2f4b3c0d', 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: 'ad3c51871ca4b0b1871944b658bae070140d1e99', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: 'b522d8a85e0161c4f7cd7938364919eda0585cf9', class: "bs-timepicker__body" }, h("div", { key: 'a3dd5ea83fa63cd9e8e6db2dfeb32b195e084f58', part: "header", class: "bs-timepicker__header" }, h("div", { key: '9af7c0024a4341ed1bbaccb4fb25e0e7558de93e', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: 'e18dcfcfe44a19f8dbac0737e487b23234d92fd6', class: "bs-timepicker__format" }, h("span", { key: '954b1579e9789c76521ba9364ed84caee882a05d' }, this.formatLabel), h("bs-switch", { key: '020b23405f62aa272c8af71d9071e0090bec5c30', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: '283ba5ff1525c6561b7d00552dfc86ed34284f9b', class: "bs-timepicker__divider" }), h("div", { key: 'c2dfc0cb7b7cc0e5d106565746f3426b4065af9a', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '1d017fd059c36955ba5ba4c5da5a05b9fb18e7d2', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: '6b182c00b7dbd9150640c47aee43423d20e270c5', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: '531640b6870cc87a284ac9ea64ca5b292c4f529f', cx: "2", cy: "10", r: "2" }), h("circle", { key: '323a4a90bebd8203b5c2f9803ffe03055991f9e2', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '3d7ec2986824358b3f1e795a9ce05b1b81d14432', 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: '664da910d0c1849ff6a47ca326945b37f837760a', class: "bs-timepicker__divider" }), h("div", { key: '852c88b44cbb5cc3f236363181920163776a4521', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: 'e92e26209c7ed2e45094265a54ad8347ce697f05', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '110338b7a98727089613a3eb661ca5e0d8346691', 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: '335782bd5c8c1c721105684ee50efb71dc8a9dd8', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '77c48c6315299064a6904646f46bb787dc4dada2', class: "bs-toast__content" }, h("span", { key: '8aef9bc3f662320fb3d60bbfdf8d4d8672297bd4', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: 'b1501a806e5866b69fbea2073741325f65b1209c', state: this.state })), h("span", { key: '751407d5dc04f3f8b4e57c5b47d1639f66e673a6', part: "message", class: "bs-toast__message" }, h("slot", { key: '9407fe265762817eb68e8119a40b792b53dbdb6e' }))), h("div", { key: '4bcd82ca67e8ce49998c7c954b3764df242e4eeb', class: "bs-toast__actions" }, h("button", { key: '352a9789b6f773ee385396bda80fde2ed972af30', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '5296f2811fda1f42b95087c4494fa05d3e0efff4' })))));
     }
     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: 'f41f09865c1604e9c6f42d77a007ebef233d3b20', class: "bs-tooltip" }, h("span", { key: 'c963a9ffaedeb05e4b6787509e683f20fbd5d893', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: 'ac5c26e3fded66c18cc563b33626645d6049f9e2', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '662c27547a391756b7d1a98d1154c0e01690e110' }))));
     }
     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: '399a6f518855e7ba3ac3824276933d3b1ec913cc', 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: 'bf83352404bcdf757325421b86c8c571f89bae47' }), h("div", { key: '44f5fed6608f49041f206e44302a22404c1b6fc2', part: "tooltip", id: this.tooltipId, class: "bs-tooltip-trigger__tooltip", role: "tooltip", hidden: !show }, h("bs-tooltip", { key: 'f04fab6b6e9c6fba4c0dbdfe01db5927e98227cb' }, 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: '392e53167e223e1a34802bf0106d0a92e3fbce47', class: "bs-whats-new-entry" }, (this.tag || this.date || this.unread) && (h("div", { key: 'a069414465afa8d5894967c4b91c029c6ca94714', part: "meta", class: "bs-whats-new-entry__meta" }, this.tag && (h("bs-chip-informative", { key: 'ba1c8320df4641ad9ba2e781a475ba81ab2e793e', part: "tag", size: "sm", color: this.tagColor }, this.tag)), this.date && (h("span", { key: '90fff95b14393041ef0d2a95f9d2f1e1e4fc4824', part: "date", class: "bs-whats-new-entry__date" }, this.date)), this.unread && (h("span", { key: '72a3ed86e67fdfbe754b94431e313b4978887bc0', part: "unread", class: "bs-whats-new-entry__unread" }, h("span", { key: '70f8e4492c9b09f39ffb78d3d2d6d0baf8cae27c', class: "bs-whats-new-entry__sr-only" }, this.unreadLabel))))), h("div", { key: '2930545aee739edac5d93ae7abc87984becbc6d6', part: "image", class: { 'bs-whats-new-entry__image': true, 'bs-whats-new-entry__image--visible': this.hasImage } }, h("slot", { key: 'a1ca6d788ee50e16668c50621c631b7be10128ea', name: "image", onSlotchange: (ev) => (this.hasImage = ev.target.assignedNodes().length > 0) })), h("div", { key: 'bc1cc0c9ad0d4272aa0e612822200d47a9108406', 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: '7e0a2520c2c3bd7c753e4f3a64d7f61230bf1c7e', part: "description", class: "bs-whats-new-entry__description" }, this.description)), this.actionLabel && (h("bs-button", { key: '8344b34f92c0bcd1da4e491823f8d1f2cef82ad2', part: "action", class: "bs-whats-new-entry__action", variant: "subtle", size: "sm", onClick: () => this.bsAction.emit() }, this.actionLabel, h("svg", { key: '8941060aacc137bee4a7a9f15a9a32023dfc5390', 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: '0833d06eca31e2a199ff5cd4def1a408d74c4030', d: "M5 12H19" }), h("path", { key: 'e079ace356dc320dfde3f48d7336d2507303d1bf', d: "M13 6L19 12L13 18" }))))), this.divider && h("div", { key: '369d9767229d3fb57cb1a68d0bcefb03da4a953e', part: "divider", class: "bs-whats-new-entry__divider" })));
     }
     static get is() { return "bs-whats-new-entry"; }
     static get encapsulation() { return "shadow"; }