@brandsync/wc 0.0.12 → 1.0.0

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

@@ -0,0 +1,58 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-breadcrumbs', () => {
+    it('defaults aria-label on the nav to "Breadcrumb"', async () => {
+        const { root } = await render(h("bs-breadcrumbs", null));
+        const nav = root.shadowRoot.querySelector('nav');
+        expect(nav).toEqualAttribute('aria-label', 'Breadcrumb');
+    });
+    it('reflects the label prop as the nav aria-label', async () => {
+        const { root } = await render(h("bs-breadcrumbs", { label: "You are here" }));
+        const nav = root.shadowRoot.querySelector('nav');
+        expect(nav).toEqualAttribute('aria-label', 'You are here');
+    });
+    it('wraps an <ol part="list"> inside the nav', async () => {
+        const { root } = await render(h("bs-breadcrumbs", null));
+        const nav = root.shadowRoot.querySelector('nav');
+        const list = root.shadowRoot.querySelector('[part="list"]');
+        expect(list).not.toBeNull();
+        expect(list.tagName).toBe('OL');
+        expect(nav.contains(list)).toBe(true);
+    });
+    it('renders slotted children via the default slot', async () => {
+        const { root } = await render(h("bs-breadcrumbs", null, h("bs-breadcrumb", { href: "/" }, "Home"), h("bs-breadcrumb", { current: true }, "Edit")));
+        const crumbs = root.querySelectorAll('bs-breadcrumb');
+        expect(crumbs.length).toBe(2);
+    });
+    describe('size propagation', () => {
+        it('propagates the default "md" size to slotted bs-breadcrumb/bs-breadcrumb-overflow children on load', async () => {
+            const { root, waitForChanges } = await render(h("bs-breadcrumbs", null, h("bs-breadcrumb", { href: "/" }, "Home"), h("bs-breadcrumb-overflow", null)));
+            await waitForChanges();
+            const crumb = root.querySelector('bs-breadcrumb');
+            const overflow = root.querySelector('bs-breadcrumb-overflow');
+            expect(crumb.size).toBe('md');
+            expect(overflow.size).toBe('md');
+        });
+        it('propagates a non-default size to slotted children on load', async () => {
+            const { root, waitForChanges } = await render(h("bs-breadcrumbs", { size: "sm" }, h("bs-breadcrumb", { href: "/" }, "Home")));
+            await waitForChanges();
+            const crumb = root.querySelector('bs-breadcrumb');
+            expect(crumb.size).toBe('sm');
+        });
+        it('re-propagates size to existing children when the size prop changes', async () => {
+            const { root, waitForChanges } = await render(h("bs-breadcrumbs", null, h("bs-breadcrumb", { href: "/" }, "Home")));
+            await waitForChanges();
+            root.size = 'sm';
+            await waitForChanges();
+            const crumb = root.querySelector('bs-breadcrumb');
+            expect(crumb.size).toBe('sm');
+        });
+        it('propagates the current size to a child added after initial render', async () => {
+            const { root, waitForChanges } = await render(h("bs-breadcrumbs", { size: "sm" }));
+            await waitForChanges();
+            const crumb = document.createElement('bs-breadcrumb');
+            root.appendChild(crumb);
+            await waitForChanges();
+            expect(crumb.size).toBe('sm');
+        });
+    });
+});

package/dist/collection/components/bs-breadcrumb/bs-breadcrumbs/bs-breadcrumbs.css

@@ -0,0 +1,18 @@
+/**
+ * @prop --bs-breadcrumbs-gap: Gap between slotted crumbs (bs-breadcrumb/bs-breadcrumb-overflow). Aliased to --bs-spacing-50.
+ */
+:host {
+  display: block;
+
+  --bs-breadcrumbs-gap: var(--bs-spacing-50);
+}
+
+.bs-breadcrumbs__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: var(--bs-breadcrumbs-gap);
+}

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

@@ -0,0 +1,129 @@
+import { h } from "@stencil/core";
+/**
+ * A breadcrumb trail container: a real `<nav>` landmark wrapping an `<ol>`, meant to be populated
+ * with slotted `<bs-breadcrumb>` (and, where the consumer wants a collapsed-items disclosure,
+ * `<bs-breadcrumb-overflow>`) children -- same composition-over-configuration architecture as
+ * Carbon Design System's `cds-breadcrumb`/`cds-breadcrumb-item`/`cds-breadcrumb-link`.
+ *
+ * This component is intentionally thin: it owns only the `<nav>` landmark and list semantics.
+ * Unlike an earlier `items`-array-driven design, there is no automatic collapsing here -- exactly
+ * like Carbon, the consumer decides what's visible and manually places a `<bs-breadcrumb-overflow>`
+ * wherever they want a collapsed-items disclosure. See `bs-breadcrumbs.mdx` for the consolidated
+ * docs covering all three components in this feature area.
+ *
+ * ## When to use
+ * - Showing a user's current location within a hierarchical page structure, with a path back to
+ *   its ancestors.
+ *
+ * ## When not to use
+ * - Primary in-app navigation -- use `bs-navigation-drawer`/`bs-navigation-header` instead.
+ * - A flat set of unrelated pages with no hierarchy -- breadcrumbs imply ancestry, not just history.
+ *
+ * @slot - Default slot: the trail's crumbs, `<bs-breadcrumb>` and/or `<bs-breadcrumb-overflow>`
+ * elements, in visual order.
+ * @part list - The `<ol>` element.
+ */
+// Note: this component's CSS Custom Property (--bs-breadcrumbs-gap) is documented via an @prop
+// comment in bs-breadcrumbs.css, not here -- see bs-tab.tsx's identical note.
+export class BsBreadcrumbs {
+    el;
+    /** Accessible name for the `<nav>` landmark, via `aria-label`. Same pattern as
+     * `bs-navigation-drawer`'s `heading` prop. */
+    label = 'Breadcrumb';
+    /** Size variant, propagated as a JS property to every slotted `bs-breadcrumb`/
+     * `bs-breadcrumb-overflow` child -- this container has no visual sizing of its own (font/spacing
+     * live on the item components, see `bs-breadcrumb.tsx`'s identical `size` prop), so propagation
+     * is the only way setting `size` here reaches every crumb. CSS custom properties can't carry an
+     * enum that switches rules on their own, which is why this is pushed via JS property instead of
+     * CSS inheritance -- same reasoning as `bs-tabs` setting `selected` directly on its slotted
+     * `bs-tab`/`bs-inline-tab` children. Re-propagated on `size` changes and whenever the slotted
+     * children change (e.g. a crumb added later). */
+    size = 'md';
+    onSizeChange(size) {
+        this.propagateSize(size);
+    }
+    componentDidLoad() {
+        this.propagateSize(this.size);
+    }
+    onSlotChange = () => {
+        this.propagateSize(this.size);
+    };
+    propagateSize(size) {
+        this.el.querySelectorAll(':scope > bs-breadcrumb, :scope > bs-breadcrumb-overflow').forEach(child => {
+            child.size = size;
+        });
+    }
+    render() {
+        return (h("nav", { key: 'bbe4f667e651ac339bec4e231bb001b745ae9aa3', "aria-label": this.label }, h("ol", { key: 'f62635e3dc908c10e8610f5baef42d5499d69002', part: "list", class: "bs-breadcrumbs__list" }, h("slot", { key: '6914c7f742a435f32eecf65fc767ff2b6f645b10', onSlotchange: this.onSlotChange }))));
+    }
+    static get is() { return "bs-breadcrumbs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-breadcrumbs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-breadcrumbs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the `<nav>` landmark, via `aria-label`. Same pattern as\n`bs-navigation-drawer`'s `heading` prop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Breadcrumb'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsBreadcrumbSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "BsBreadcrumbSize": {
+                            "location": "import",
+                            "path": "../bs-breadcrumb/bs-breadcrumb",
+                            "id": "src/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.tsx::BsBreadcrumbSize",
+                            "referenceLocation": "BsBreadcrumbSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant, propagated as a JS property to every slotted `bs-breadcrumb`/\n`bs-breadcrumb-overflow` child -- this container has no visual sizing of its own (font/spacing\nlive on the item components, see `bs-breadcrumb.tsx`'s identical `size` prop), so propagation\nis the only way setting `size` here reaches every crumb. CSS custom properties can't carry an\nenum that switches rules on their own, which is why this is pushed via JS property instead of\nCSS inheritance -- same reasoning as `bs-tabs` setting `selected` directly on its slotted\n`bs-tab`/`bs-inline-tab` children. Re-propagated on `size` changes and whenever the slotted\nchildren change (e.g. a crumb added later)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "onSizeChange"
+            }];
+    }
+}

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

@@ -0,0 +1,84 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../../stories-utils";
+const sizes = ['sm', 'md'];
+const meta = {
+    title: 'Components/bs-breadcrumbs',
+    parameters: { docs: { description: { component: componentDescription('bs-breadcrumbs') } } },
+    argTypes: {
+        label: { control: 'text', description: propDescription('bs-breadcrumbs', 'label') },
+        size: { control: { type: 'select' }, options: sizes, description: propDescription('bs-breadcrumbs', 'size') },
+    },
+    args: {
+        label: 'Breadcrumb',
+        size: 'md',
+    },
+};
+export default meta;
+const overflowItems = [
+    { label: 'Products', href: '/products' },
+    { label: 'Category', href: '/products/category' },
+];
+// A short trail needs no overflow at all -- bs-breadcrumb-overflow is only placed by the consumer
+// when there are actually hidden crumbs to disclose (there's no automatic maxItems collapsing).
+export const Default = {
+    render: args => html `
+    <bs-breadcrumbs label=${args.label} size=${args.size}>
+      <bs-breadcrumb href="/">Home</bs-breadcrumb>
+      <bs-breadcrumb href="/settings">Settings</bs-breadcrumb>
+      <bs-breadcrumb current>Profile</bs-breadcrumb>
+    </bs-breadcrumbs>
+  `,
+};
+// size="sm" set once on the container, propagated as a JS property to every slotted crumb (and the
+// overflow disclosure) -- see bs-breadcrumbs.tsx's propagateSize.
+export const Small = {
+    args: { size: 'sm' },
+    render: args => html `
+    <bs-breadcrumbs label=${args.label} size=${args.size}>
+      <bs-breadcrumb href="/">Home</bs-breadcrumb>
+      <bs-breadcrumb-overflow .items=${overflowItems}></bs-breadcrumb-overflow>
+      <bs-breadcrumb href="/settings/profile">Profile</bs-breadcrumb>
+      <bs-breadcrumb current>Edit</bs-breadcrumb>
+    </bs-breadcrumbs>
+  `,
+};
+// A longer trail where the consumer has chosen to hide the middle crumbs behind a manually placed
+// <bs-breadcrumb-overflow>, reachable via its ellipsis disclosure.
+export const WithOverflow = {
+    name: 'With overflow',
+    render: args => html `
+    <bs-breadcrumbs label=${args.label}>
+      <bs-breadcrumb href="/">Home</bs-breadcrumb>
+      <bs-breadcrumb-overflow .items=${overflowItems}></bs-breadcrumb-overflow>
+      <bs-breadcrumb href="/settings/profile">Profile</bs-breadcrumb>
+      <bs-breadcrumb current>Edit</bs-breadcrumb>
+    </bs-breadcrumbs>
+  `,
+};
+// A crumb with neither `current` nor `href` -- not the current page, but also not navigable (e.g.
+// an archived section heading). Renders as plain, non-interactive text with the same muted styling
+// as a link.
+export const NonLinkCrumb = {
+    args: {
+        size: 'md',
+    },
+    name: 'Non-link crumb',
+    render: args => html `
+    <bs-breadcrumbs label=${args.label}>
+      <bs-breadcrumb href="/">Home</bs-breadcrumb>
+      <bs-breadcrumb>Archived section</bs-breadcrumb>
+      <bs-breadcrumb current>Report</bs-breadcrumb>
+    </bs-breadcrumbs>
+  `,
+};
+// Sanity-checks the :host(:first-child) separator-hiding rule when a <bs-breadcrumb-overflow> --
+// rather than a <bs-breadcrumb> -- is the visually first element in the trail.
+export const OverflowFirst = {
+    name: 'Overflow first',
+    render: () => html `
+    <bs-breadcrumbs label="Breadcrumb">
+      <bs-breadcrumb-overflow .items=${overflowItems}></bs-breadcrumb-overflow>
+      <bs-breadcrumb current>Edit</bs-breadcrumb>
+    </bs-breadcrumbs>
+  `,
+};

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

@@ -105,7 +105,7 @@ export class BsButton {
     };
     render() {
         const iconOnly = (this.hasIcon || this.hasEndIcon) && !this.hasLabel;
-        return (h("button", { key: 'b46975b3006b26aee5f52cead685d78c7cc3e4a6', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: 'e763e59c2775c3778208eff1e4e78322867e7e2c', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: 'b13b8c375a66a34360de7505ae0b3ea88885b3a7', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '10c0fb5b04045e33f67b477e7deb6d213f9455de', part: "label", class: "bs-button__label" }, h("slot", { key: 'd8da8023c86f98cc82a934af4618daaa1fe476cc', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'b584dddc6d4e146bdefb2f0223505c0e4aa5b7ed', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '960a015fd755d63fe7385b4516cebe33e29e0808', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
+        return (h("button", { key: '3820c965cff86109613dac0d6ffaf5ee0a926f26', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: 'b8fb25e26d96168d6676acc0c3fa1b4f3429e974', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: 'cd5e33cf19f19b89c2f87153d20d32bf0d3dabb9', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '91c9fd334013c495d2ec836619b9aecebc3c8e20', part: "label", class: "bs-button__label" }, h("slot", { key: 'c363d5d5004d2b2e9e5a4e09fa6cbe2ab87d9fff', onSlotchange: this.onLabelSlotchange })), h("span", { key: '29c1b4457efcfb9c11b0095279b77f3e97fa9988', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '9a6d3c0fcc16d8b546e225d88ae4d6014e9b2e45', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
     }
     static get is() { return "bs-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,7 +50,7 @@ export class BsIconButton {
      */
     ariaLabel = null;
     render() {
-        return (h("button", { key: '1551d4e87c9bdedfc51a1a325c93ea9849aa9702', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: '3966f47ff21fef8687d6d04289863039c2837f10', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: 'c673adaf051d568be40b13ddad39447994935b2b' }))));
+        return (h("button", { key: '174cb1f4c7eb14ba404991cebf081ecd25294faf', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: '613f2701ee211ead437c5137344db4f7e3de1893', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: '4f7053179b9ce70eb82731f01b5b0b33f9911240' }))));
     }
     static get is() { return "bs-icon-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class BsButtonSkeleton {
     /** Sizing scale, matching the `bs-button` size it stands in for. */
     size = 'md';
     render() {
-        return h("span", { key: 'ebb3b98f01114e96f304e11a5104235abaf97db0', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": "Loading" });
+        return h("span", { key: '4643d43484ba7150e4bb1b6595eb6afe37277d28', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": "Loading" });
     }
     static get is() { return "bs-button-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,4 +39,23 @@ describe('bs-card', () => {
         expect(header.textContent.trim()).toBe('');
         expect(footer.textContent.trim()).toBe('');
     });
+    it('lays out multiple footer items as a right-aligned row', async () => {
+        const { root } = await render(h("bs-card", null, "Body content", h("button", { slot: "footer" }, "Cancel"), h("button", { slot: "footer" }, "Confirm")));
+        const footer = root.shadowRoot.querySelector('[part="footer"]');
+        expect(getComputedStyle(footer).display).toBe('flex');
+        expect(getComputedStyle(footer).justifyContent).toBe('flex-end');
+    });
+    describe('image slot', () => {
+        it('has no visible image wrapper when the image slot is empty', async () => {
+            const { root } = await render(h("bs-card", null, "Body content"));
+            const image = root.shadowRoot.querySelector('[part="image"]');
+            expect(image).not.toBeNull();
+            expect(image).not.toHaveClass('bs-card__image--visible');
+        });
+        it('shows the image wrapper when the image slot has content', async () => {
+            const { root } = await render(h("bs-card", null, "Body content", h("img", { slot: "image", src: "hero.jpg", alt: "" })));
+            const image = root.shadowRoot.querySelector('[part="image"]');
+            expect(image).toHaveClass('bs-card__image--visible');
+        });
+    });
 });

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

@@ -2,10 +2,14 @@
   display: block;
 }
 
+/* No border -- verified against the Figma "Card" node, which relies on background/shadow contrast
+   against the page rather than a border line. overflow: hidden clips the image slot's top corners
+   to this radius (see .bs-card__image--visible below). border-radius-100 (8px), not -150 (12px) --
+   the -150 value previously here was the Figma *demo frame's* radius around the example, not the
+   card's own "Paper" node radius. */
 .bs-card {
-  border: 1px solid var(--bs-paper-border-surface);
-  border-radius: var(--bs-border-radius-150);
-  padding: var(--bs-spacing-400);
+  overflow: hidden;
+  border-radius: var(--bs-border-radius-100);
   font-family: inherit;
 }
 
@@ -22,10 +26,38 @@
   background: var(--bs-paper-bg-container);
 }
 
+/* Empty by default (no padding/margin) -- only visible when the image slot has content, same
+   "reserve no space when empty" pattern as bs-dialog's own image slot. */
+.bs-card__image--visible ::slotted(img) {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+/* Carries the padding that used to live directly on .bs-card -- moved here so the image slot above
+   can sit flush against the card's edges instead of being inset by it. spacing-200 (16px), not
+   -400 (32px) -- the -400 value previously here didn't match the Figma redline at all. */
+.bs-card__content {
+  padding: var(--bs-spacing-200);
+}
+
+/* spacing-100 (8px), not -300 (24px) -- same over-sized-token mistake as the padding above. */
 .bs-card__header ::slotted(*) {
-  margin: 0 0 var(--bs-spacing-300) 0;
+  margin: 0 0 var(--bs-spacing-100) 0;
+}
+
+/* Figma's "Card Slot" renders footer actions (typically two buttons) as a right-aligned row with a
+   16px gap between them -- the ::slotted(*) margin-top below only provides the gap ABOVE the footer
+   row (between it and the header/body content), it doesn't lay out multiple slotted items as a row
+   at all (they'd just stack in normal inline flow). This adds that row layout on the wrapper itself. */
+.bs-card__footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--bs-spacing-200);
 }
 
 .bs-card__footer ::slotted(*) {
-  margin: var(--bs-spacing-300) 0 0 0;
+  margin: var(--bs-spacing-100) 0 0 0;
 }

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

@@ -10,10 +10,14 @@ import { h } from "@stencil/core";
  * - As the only structural element on a page — cards group content, they don't replace layout.
  * - For a dismissible/transient message — use a modal or a dedicated notification component.
  *
+ * @slot image - Optional hero image across the top of the card, flush with its edges and clipped
+ * to its top corners. Presence of assigned content is what shows it -- doesn't affect layout when
+ * empty.
  * @slot header - Optional heading content above the body.
  * @slot - Default slot: the card's main body content.
  * @slot footer - Optional actions/content below the body (e.g. a button).
- * @part container - The outer bordered surface element.
+ * @part container - The outer surface element.
+ * @part image - The hero image wrapper (only visible when the `image` slot has content).
  * @part header - The header wrapper.
  * @part body - The body wrapper.
  * @part footer - The footer wrapper.
@@ -22,8 +26,15 @@ export class BsCard {
     /** Maps to the brandsync-tokens `--bs-paper-bg-*` set — Brandsync's tokens don't have a
      * dedicated "card" component yet, so this reuses the existing Paper surface tokens. */
     surface = 'raised';
+    /** Tracks whether the `image` slot has assigned content, so the image wrapper only reserves
+     * layout space (and clips its top corners) when there's actually an image -- same pattern as
+     * `bs-dialog`'s `hasImage`. */
+    hasImage = false;
+    onImageSlotchange = (ev) => {
+        this.hasImage = ev.target.assignedNodes().length > 0;
+    };
     render() {
-        return (h("div", { key: 'c8f95e45c3aa78315341d5ef5f7aa53b33f289cc', part: "container", class: `bs-card bs-card--${this.surface}` }, h("div", { key: 'b0787524f4b874e4e47459ef5325f2494ea8bf59', part: "header", class: "bs-card__header" }, h("slot", { key: '41ee7852c3ea215f9b6fbc72ccd13283b58afc50', name: "header" })), h("div", { key: 'e4537f5ec7e11af4518cfae464ee6f65120355cc', part: "body", class: "bs-card__body" }, h("slot", { key: 'b6ceecfa3ad173f43811ae7c24b70822879f89f4' })), h("div", { key: '31bc782bb46991e1db5718ff9690140965810572', part: "footer", class: "bs-card__footer" }, h("slot", { key: 'f2530ea24aab67ea5f3f575ef251419b5565b5bc', name: "footer" }))));
+        return (h("div", { key: '0662903c6a1d7132865b2d6cbacd2d4f106101fc', part: "container", class: `bs-card bs-card--${this.surface}` }, h("div", { key: 'ba7637d19b11d05241f64a6314a8cdeb846be488', part: "image", class: `bs-card__image ${this.hasImage ? 'bs-card__image--visible' : ''}` }, h("slot", { key: '5b4d49a64af886cb19c0142aedb615d4c96e1d77', name: "image", onSlotchange: this.onImageSlotchange })), h("div", { key: 'd98c200c1bc2772f33ee8c0c5029761d464d656d', class: "bs-card__content" }, h("div", { key: '7e80e6809aad33f9919c1b14f86bad18c4602250', part: "header", class: "bs-card__header" }, h("slot", { key: '5daf62af5d08c31a51ad5ca0cc186ca60a92a0ef', name: "header" })), h("div", { key: 'feb18f2cf8c9fcb99051b8b66073ec2b1b46e123', part: "body", class: "bs-card__body" }, h("slot", { key: '561ef6160b5acd92500d097f0d402c176dd81c04' })), h("div", { key: 'd5989024a37534dea720eebf483273c518a72cd3', part: "footer", class: "bs-card__footer" }, h("slot", { key: '829399f8f90c83b2ea75e063daa7afbaf5f0f8dd', name: "footer" })))));
     }
     static get is() { return "bs-card"; }
     static get encapsulation() { return "shadow"; }
@@ -67,4 +78,9 @@ export class BsCard {
             }
         };
     }
+    static get states() {
+        return {
+            "hasImage": {}
+        };
+    }
 }

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

@@ -7,7 +7,8 @@ const meta = {
     <bs-card surface=${args.surface} style="max-width: 320px;">
       <strong slot="header">Booking confirmed</strong>
       <p>Meeting Room 4B is reserved for 2:00pm - 3:00pm.</p>
-      <bs-button slot="footer" size="sm">View details</bs-button>
+      <bs-button slot="footer" variant="subtle" size="sm">Cancel</bs-button>
+      <bs-button slot="footer" variant="outlined" size="sm">View details</bs-button>
     </bs-card>
   `,
     argTypes: {
@@ -25,3 +26,18 @@ export const Base = {
 export const Container = {
     args: { surface: 'container' },
 };
+// A real photo (Unsplash, free-to-use license) -- verified this URL resolves (200, image/jpeg)
+// before using it. Presence of the image slot's content is what shows the hero image, not a prop.
+const heroImage = 'https://images.unsplash.com/photo-1660496247667-3fb697c396af?fm=jpg&q=80&w=640&h=360&fit=crop&auto=format';
+export const WithImage = {
+    name: 'With image',
+    render: args => html `
+    <bs-card surface=${args.surface} style="max-width: 320px;">
+      <img slot="image" src=${heroImage} alt="" />
+      <strong slot="header">Booking confirmed</strong>
+      <p>Meeting Room 4B is reserved for 2:00pm - 3:00pm.</p>
+      <bs-button slot="footer" variant="subtle" size="sm">Cancel</bs-button>
+      <bs-button slot="footer" variant="outlined" size="sm">View details</bs-button>
+    </bs-card>
+  `,
+};

package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.js

@@ -123,7 +123,7 @@ export class BsChatbotFeedback {
     }
     render() {
         const stars = [1, 2, 3, 4, 5];
-        return (h("div", { key: '958b381765b939194015956808f4174d722ba0ce', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '17530d9be43a87fb4c618f7f4e0565fbd0593a2e', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": "Close", onClick: this.onCloseClick }, h(CloseIcon, { key: '1b6355d2d0573cbace8dafc6cc1e78495de853a6' })), h("div", { key: 'c6da57111aa1cce21ff870737a0056978291b3d6', class: "bs-chatbot-feedback__top" }, h("div", { key: '8b4ee3b5e67c2595114d9aeb7de0925f3fb3d588', class: "bs-chatbot-feedback__text" }, h("p", { key: '2bba1c4dff7a114f805ed99f6a059691b255e254', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: 'cde3ca2f01bbaffb68a0acbe0a63ab5ddb0d3e3a', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: '5254779fd0034d29f8680715368e955601f0e5e2', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": "Rating" }, stars.map(value => (h("button", { type: "button", part: "star", class: "bs-chatbot-feedback__star", role: "radio", "aria-checked": (this.rating >= value).toString(), "aria-label": `${value} star${value > 1 ? 's' : ''}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (h("div", { key: '065adc6951f38a51d030927903611433c1999af9', class: "bs-chatbot-feedback__field" }, h("label", { key: 'ff30ad230c00ba317d93c79e035a1b62694a76d2', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, "Tell us what you think"), h("textarea", { key: '43fc6cadc16018698d2c6302cf825d0b75c76504', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: "e.g.The response was helpful ....", value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: '9287bcb34a6cc9e9f3996849cd053760d5c889d6', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: 'cc38753eafe474751cf46a0a25c7f96da20c72b0', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: '0ada3886248fd12d092d52440e324c45528b5c18', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: 'fa201b999654584cf7fde867f41e9c4d2eba7366' }), "Submit feedback")), h("button", { key: '5d37a84efd037c41402e08a93470ec905475614f', type: "button", part: "new-chat", class: `bs-chatbot-feedback__new-chat ${this.submitted ? 'bs-chatbot-feedback__new-chat--primary' : 'bs-chatbot-feedback__new-chat--outlined'}`, onClick: this.onNewChatClick }, h(EditIcon, { key: 'fbd6ea31d55db9b43895ad75802f733b03daec54' }), "Start new chat"))));
+        return (h("div", { key: '0b8ab60623060df54d86c8ff8e74420ec67f7624', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '1d0ac3c5e73dfda9643bb26f443fe335396085a1', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": "Close", onClick: this.onCloseClick }, h(CloseIcon, { key: '0df4513da8ba214a2305f8e1cc69dd6fb2b1ebb8' })), h("div", { key: '87a3a0a30b86d0012185c2a415735aeef909027d', class: "bs-chatbot-feedback__top" }, h("div", { key: '79e9fd626f6a492a2f33108468e3591daef44af1', class: "bs-chatbot-feedback__text" }, h("p", { key: 'c263ab79f00b5d6ae075d65ccf4000894bcaf4e6', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: 'fdfaecaba5bc66e8d42c98fb01ee6ee1cb854c25', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: '026942be351e900cc3edb53c43f2c22910738659', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": "Rating" }, stars.map(value => (h("button", { type: "button", part: "star", class: "bs-chatbot-feedback__star", role: "radio", "aria-checked": (this.rating >= value).toString(), "aria-label": `${value} star${value > 1 ? 's' : ''}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (h("div", { key: 'a3aef9bf37275ef5121fc17e666fe3bc0bd08cc1', class: "bs-chatbot-feedback__field" }, h("label", { key: 'df3867b4a6799215fb1c95df2d531c174d1099b9', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, "Tell us what you think"), h("textarea", { key: '9b8213e3300cdd848a7a315cf08cebc098200085', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: "e.g.The response was helpful ....", value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: 'e103acfb691fb7b1966abcc9139b5f549c13e19c', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: '48aee021f29dd907ba9d7ee1c8edaa9ce9a14fab', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: 'bb9178271b30e9ecb7f8456d7c6eea66f54541b5', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: '49250a1d36790fa99cd8fc1ab8af7556a6b61aff' }), "Submit feedback")), h("button", { key: '639cbe7d23344cc7dcfb9348b34161dfa73fde86', type: "button", part: "new-chat", class: `bs-chatbot-feedback__new-chat ${this.submitted ? 'bs-chatbot-feedback__new-chat--primary' : 'bs-chatbot-feedback__new-chat--outlined'}`, onClick: this.onNewChatClick }, h(EditIcon, { key: '76d6ee82bf8120dea1bb402a74993174194ebe8c' }), "Start new chat"))));
     }
     static get is() { return "bs-chatbot-feedback"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.js

@@ -74,7 +74,7 @@ export class BsChatbotHeader {
         this.bsClose.emit();
     };
     render() {
-        return (h("div", { key: 'f867f6c63e8931079fbbee1ce4dc7b74f6bf7ddd', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: 'a91afd437bbe43e9be65d64df36688d8d885916d', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '3dddaab00c3b983b1e86be356eec9c07c415de1b', class: "bs-chatbot-header__actions" }, h("span", { key: '0f0b3388022c75ef0e04c1bb41a826fb0318764d', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '7b1eb2edc2414fece90681b1d56de3a9b0c7171c', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: 'a4ff761ddc7b3dbcfe449a89f731561cb3b85d0a', name: "new-chat-icon" }, h(NewChatIcon, { key: 'b2244e10010085b85a258413f7391180f6b3a20f' }))), h("bs-tooltip", { key: 'b24f3b73d6cfca88f14e12e7bc0ad0634d3338c1', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: '94a5bf67800ea1a608a04a0bb33d1a7aed053045', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '49bb1dc0956c021becaaf562146352b9abcc415b', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: 'f2c6dc057674cfc803d822d936b3fcf9d6f2f576', name: "history-icon" }, h(HistoryIcon, { key: '0ededb5c7c553f1a6723f3d20b734cb5200b2a4d' }))), h("bs-tooltip", { key: 'd533c9ac7661d89d8c8fe4865639c6d4fdab5ca3', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: 'e183c44cd967d683fa8de2c53c53913b0a1a19e4', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'f3af2b7730e1410f97fc46612148c1728be67517', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? 'Collapse' : 'Expand', "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, h("slot", { key: '808dcea2f16a09615efa1e17c7cdaadb35cac494', name: "expand-icon" }, h(ExpandIcon, { key: '58487c506c21b5e4214be89ef37126ee9404550b' }))), h("bs-tooltip", { key: 'e89cd45c9c34e840bb316ac2acc281d8bbc09eb4', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '1ccdb12018a5e0bffb6e50fb4974799f177cf943', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'e416fe4e56f37b9c623e86764cf5e3a510e89657', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: 'db32a3957b3d635e34665ea4b3022d888bd4c5c8', name: "close-icon" }, h(CloseIcon, { key: '1062922ee3b32445503c2bc81913806f1684683b' }))), h("bs-tooltip", { key: '90d5458d0eb14e99767ea5b1d0e8c9b23b51aaeb', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
+        return (h("div", { key: '976c52c3c5fc7d4b3a71669075263053abc7b253', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: 'ee3e0f4478ccbbe293c555f4f49c040dff3347de', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '189372f43f8d38ae906498f3eb54d0c3023b32f9', class: "bs-chatbot-header__actions" }, h("span", { key: 'f0346193fa5927156265da9a785a6f1f6920eee9', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '8c4efc93a8f9ff06e0640635670117a05a363e6b', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: '95c55f8631203dd8addeca3814f075635f403a33', name: "new-chat-icon" }, h(NewChatIcon, { key: '2472c8aab26a9f78ca3f8ee5c9c7742bc6c4fd0a' }))), h("bs-tooltip", { key: '5eea9d22cad778e51af7ea2cf5bb7b049efeddab', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: 'fa4c416c88908a72e1e60808786eaedb4682988e', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'cdc4c7ecf2fceb64ea9e5ff2bcb684e5773094ff', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: 'f4dd57016f0d070fcef8bd108bee57c7541d9234', name: "history-icon" }, h(HistoryIcon, { key: '361f3512015127ded2802df421238e247cb21b39' }))), h("bs-tooltip", { key: '55170d0bc19d6c27327af2b637d97d9659f28d36', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: 'b7e2916d6b821fa1a5399dc4b136a56cffa74262', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '8708ed4e461c1267fa269b26d28c161c189c1545', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? 'Collapse' : 'Expand', "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, h("slot", { key: '89051c53a9023d97a46caea933c266d317854a19', name: "expand-icon" }, h(ExpandIcon, { key: '7da6d2c1d998aa81a2799451cd2e179d48c2bac0' }))), h("bs-tooltip", { key: '4e310620ee98ab1a86c431f8793973769cbcabe8', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '4591bee15e6b9bffa8040886afd779be8b1ddf04', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'ed8f7b652940e0075a254705d503b872d9cb54dd', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: '46fd676c08f046269ed459867733bfade7ee6347', name: "close-icon" }, h(CloseIcon, { key: '58ec3e580328eb7ed51579c03c02cd9b369a8cdf' }))), h("bs-tooltip", { key: '5808c60d8d56763f6dcc39e5862178190830f4bc', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
     }
     static get is() { return "bs-chatbot-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.js

@@ -105,7 +105,7 @@ export class BsChatbotResponseAction {
     };
     render() {
         const hasSources = !!this.sourcesCount && this.sourcesCount > 0;
-        return (h("div", { key: '7bec7f4a10f842d706ae24aca5d4e265420d9ddf', class: "bs-chatbot-response-action" }, h("button", { key: '750e004f98f72f3737468bda9985484d344ebaa3', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: '2706c270afcf0c71b94e28bef5ab803a29168508', name: "like-icon" }, h(ThumbsUpIcon, { key: '8fe6d8d403e8d2a80b37edd10e7b4f56197ad544' }))), h("button", { key: 'e807b85ddd08e2a37239fe3927f1a385371b6e60', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: 'd6dbcbd2ee1b7e74e05dd2cbae1c69d98e414904', name: "dislike-icon" }, h(ThumbsDownIcon, { key: 'f10796ec4a207e9f8eb55441b762e8873a2c615f' }))), h("button", { key: 'd6452d6a3cbb9aec60e65085086c312dc8723ce9', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: '9f650bebcaef7cdf4797bc94c28f934887954722', name: "copy-icon" }, h(CopyIcon, { key: 'bc8fcfd2c9b2d3b0b634f3c92750ffea8b301270' }))), h("button", { key: 'f7b7fc1048a3e641c460e0708e3f751178c337da', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: '79cc6721191aff640823fdea839668edddfb5746', name: "regenerate-icon" }, h(RegenerateIcon, { key: '4f8dcfcae578dc5d66e7707f961717a5dd513e20' }))), h("div", { key: '15282bbecdec01239855b7e6637fab4f12801122', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: 'f5d2b3db52c76e129e1d56a4bef819cf1e8bc5ed', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: '8796afebcc39b15c858bbea22ae377631da8ce2e', name: "menu-icon" }, h(MenuIcon, { key: '21a189fb8e61033e7644bf6e6c3eecb2ffa8e880' }))), this.menuOpen && (h("div", { key: 'd6617d1ff68199cdbdeabda382018fb48c0a1bd9', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: 'b4645cb0ccf01b265efa56726ffb1fd5a8ec13db', name: "menu" })))), hasSources && (h("button", { key: '736c23e7560404a0e7177b372993317a84a19bf5', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'bb5187741f2cb4e470038753df41dcee2ceaf02e', name: "sources-icon" }, h(SourcesIcon, { key: '4d488a150dc6b86d1d6045b55f16bce22c5cdd22' })), h("span", { key: '02da04e9df74b4926cf8f0d6a4c7548c1bb1e699', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
+        return (h("div", { key: '36a3a372af16e57f0747d0afacede280c75e2baa', class: "bs-chatbot-response-action" }, h("button", { key: '5d67c3cb0b3488d3f3ac84fe593cacc66e119a3b', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: 'b9447e9cb87c841cb75b015324780a926275643d', name: "like-icon" }, h(ThumbsUpIcon, { key: 'd5b8b4cb03eb08d12ef92d6ef7e8747830f496f0' }))), h("button", { key: 'e510cc2d7edf1b85b9c298f7d988b994f716821b', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: '94aa62133ad644a1423539a2854e24bd809ae934', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '5770a79e906a6ff99ca9e632a2dbcfccf3478756' }))), h("button", { key: 'b8477c11b99ba291406ebc8fcb953ca87d21e5d5', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: 'f2ebadfff852af1e1f1462257a1132ef16fd538d', name: "copy-icon" }, h(CopyIcon, { key: '57c470579a282b8fbd0aad5e1153e4e5666c8c04' }))), h("button", { key: 'd27f9d32f57296011f8c69848b678b745e068074', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: 'eb8dc45632ecf993cbdb78a4174eee93fc8a1df8', name: "regenerate-icon" }, h(RegenerateIcon, { key: 'a1a72e6fdc499b4f76caeb747c4711b31985e5b8' }))), h("div", { key: 'e51c762ded01dcacbfcc554b858992ecf818b890', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '43cb51c908e6e57f35d6ff84a0e7fba850c3c410', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: '515f26fb7b3c861c5fb67e6831fa0cff568006d2', name: "menu-icon" }, h(MenuIcon, { key: '93c50b2d7ed0d710c30d33a0483943e12111f479' }))), this.menuOpen && (h("div", { key: '098e59c3e121fe9565d349372d84cc8106762968', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: 'bc7a4ec19beeaf66d7dbd506914d185233677760', name: "menu" })))), hasSources && (h("button", { key: '703c714cf207a1475069cc8c93155b9be002310a', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: '8184596f5a98cbaaa276d337269aea27f3de5ba4', name: "sources-icon" }, h(SourcesIcon, { key: 'eb5984310dc77e1aa082c9275105bbca923cc7ab' })), h("span", { key: '52ba085dd94415e7ee36fce236375bd9d66f6145', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
     }
     static get is() { return "bs-chatbot-response-action"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.css

@@ -3,7 +3,7 @@
   /* --bs-static-white is deliberately NOT theme-aware (never overridden in [data-theme="dark"]),
    * so using it here would leave the panel pure white in dark mode while --bs-text-default (used
    * for the heading below) switches to white -- invisible text on an unchanged white background.
-   * --bs-surface-raised is the theme-aware equivalent already used for bs-modal's own dialog box. */
+   * --bs-surface-raised is the theme-aware equivalent already used for bs-dialog's own dialog box. */
   --bs-chatbot-sources-drawer-bg: var(--bs-surface-raised);
   --bs-chatbot-sources-drawer-header-shadow: var(--bs-shadow-xs);
   --bs-chatbot-sources-drawer-header-padding-x: var(--bs-spacing-200);

package/dist/collection/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.js

@@ -57,7 +57,7 @@ export class BsChatbotSourcesDrawer {
     };
     render() {
         const displayCount = this.count ?? this.slottedCount;
-        return (h("div", { key: '8f71e38ceb897b13d7726495c8b27619e246af2b', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: 'ee57cd05934a900b71b5445f7d31caf8e038e774', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: 'd9aa9f82aad30480bf52b7a701f094b9175e3a98', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '913ac293e7af80ee142635ae7bd4b3339ac746b0', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: 'ad659ddf56b745f915df9909c07a6a617e8e7d5a', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '30ac395d5087496a955b956437dc9459eabcbe10', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: 'aaa9629de257bb416c24e9b5b15ac634e71caf38', name: "collapse-icon" }, h(CaretRightIcon, { key: '9bbb6d7875cd5ce27ec63c03113a7982a6309814' })))), h("div", { key: 'aa0d81e61701b50231a802120443f0819b2b0a98', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: 'cbfd567766318fc4d360804c4de5e591654a29c0', onSlotchange: this.onSlotchange }))));
+        return (h("div", { key: 'bbec982298c928942775b7543865781a3fd0c555', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: '9e6e7c89bdf061c89a608fcdc9aa9e85a8de731c', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: '648efdba7da08457adf1e9fe5cb69b1a4d2f9266', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '08557ea95eae88878c3c0971ce8aa5fa6a72bdcc', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '3aaf595afc3170bf8f18cf06a119555ff386aaa4', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: 'ccf98e8772366e8c91e6cb6f824194d4ec8a8b35', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: 'd1f41711fd871e0f5ef0d23fd7ffb8ae0d6aa595', name: "collapse-icon" }, h(CaretRightIcon, { key: '55dea932bcfa2dcdb776cf452737362c52ea879e' })))), h("div", { key: 'f3f8e5fd96df856ecb965c7e75b706c1f8fe6488', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: '27f35d19a5f00275c983f17a2709932fdf2f2b61', onSlotchange: this.onSlotchange }))));
     }
     static get is() { return "bs-chatbot-sources-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.js

@@ -45,7 +45,7 @@ export class BsChatbotSuggestionButton {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '4a8fe89091ddc9d343c58d22b35b9f8dc2691490', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'f0295569d8aac7ad51116d3fde445dda7bcb24a6' })));
+        return (h("button", { key: '26a03adfaace4fffed0f3c371b665f49a68dbfae', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'e40d0b911d11329ea5f07cffe1a0f60acf777dd5' })));
     }
     static get is() { return "bs-chatbot-suggestion-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-checkbox/bs-checkbox-skeleton/bs-checkbox-skeleton.cmp.test.js

@@ -0,0 +1,23 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-checkbox-skeleton', () => {
+    it('renders with role="status" and aria-label="Loading" by default', async () => {
+        const { root } = await render(h("bs-checkbox-skeleton", null));
+        const container = root.shadowRoot.querySelector('.bs-checkbox-skeleton');
+        expect(container).toEqualAttribute('role', 'status');
+        expect(container).toEqualAttribute('aria-label', 'Loading');
+        expect(root.shadowRoot.querySelector('.bs-checkbox-skeleton__box')).toHaveClass('bs-checkbox-skeleton__box--lg');
+    });
+    it('always renders both a box and a label placeholder', async () => {
+        const { root } = await render(h("bs-checkbox-skeleton", null));
+        expect(root.shadowRoot.querySelector('[part="box"]')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('[part="label"]')).not.toBeNull();
+    });
+    it('applies the correct box size class for each size value', async () => {
+        const { root, setProps } = await render(h("bs-checkbox-skeleton", { size: "sm" }));
+        expect(root.shadowRoot.querySelector('.bs-checkbox-skeleton__box')).toHaveClass('bs-checkbox-skeleton__box--sm');
+        await setProps({ size: 'md' });
+        expect(root.shadowRoot.querySelector('.bs-checkbox-skeleton__box')).toHaveClass('bs-checkbox-skeleton__box--md');
+        await setProps({ size: 'lg' });
+        expect(root.shadowRoot.querySelector('.bs-checkbox-skeleton__box')).toHaveClass('bs-checkbox-skeleton__box--lg');
+    });
+});