@brandsync/wc 0.0.2 → 0.0.4

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

@@ -0,0 +1,133 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-chatbot-response-action', () => {
+    it('renders all five icon buttons with the correct parts, and no sources button by default', async () => {
+        const { root } = await render(h("bs-chatbot-response-action", null));
+        expect(root.shadowRoot.querySelector('[part="like"]')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('[part="dislike"]')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('[part="copy"]')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('[part="regenerate"]')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('[part="menu"]')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('[part="sources"]')).toBeNull();
+    });
+    it('does not render the sources button when sourcesCount is 0', async () => {
+        const { root } = await render(h("bs-chatbot-response-action", { sourcesCount: 0 }));
+        expect(root.shadowRoot.querySelector('[part="sources"]')).toBeNull();
+    });
+    it('renders the sources button with singular text when sourcesCount is 1', async () => {
+        const { root } = await render(h("bs-chatbot-response-action", { sourcesCount: 1 }));
+        const sources = root.shadowRoot.querySelector('[part="sources"]');
+        expect(sources).not.toBeNull();
+        expect(sources).toHaveTextContent('1 source');
+    });
+    it('renders the sources button with plural text when sourcesCount is greater than 1', async () => {
+        const { root } = await render(h("bs-chatbot-response-action", { sourcesCount: 3 }));
+        const sources = root.shadowRoot.querySelector('[part="sources"]');
+        expect(sources).not.toBeNull();
+        expect(sources).toHaveTextContent('3 sources');
+    });
+    it('emits bsLike when the like button is clicked, and not the other events', async () => {
+        const { root, spyOnEvent } = await render(h("bs-chatbot-response-action", { sourcesCount: 3 }));
+        const likeSpy = spyOnEvent('bsLike');
+        const dislikeSpy = spyOnEvent('bsDislike');
+        const copySpy = spyOnEvent('bsCopy');
+        const regenerateSpy = spyOnEvent('bsRegenerate');
+        const menuSpy = spyOnEvent('bsMenuOpen');
+        const sourcesSpy = spyOnEvent('bsSourcesClick');
+        root.shadowRoot.querySelector('[part="like"]').click();
+        expect(likeSpy).toHaveReceivedEventTimes(1);
+        expect(dislikeSpy.length).toBe(0);
+        expect(copySpy.length).toBe(0);
+        expect(regenerateSpy.length).toBe(0);
+        expect(menuSpy.length).toBe(0);
+        expect(sourcesSpy.length).toBe(0);
+    });
+    it('emits bsDislike when the dislike button is clicked, and not the other events', async () => {
+        const { root, spyOnEvent } = await render(h("bs-chatbot-response-action", { sourcesCount: 3 }));
+        const likeSpy = spyOnEvent('bsLike');
+        const dislikeSpy = spyOnEvent('bsDislike');
+        const copySpy = spyOnEvent('bsCopy');
+        const regenerateSpy = spyOnEvent('bsRegenerate');
+        const menuSpy = spyOnEvent('bsMenuOpen');
+        const sourcesSpy = spyOnEvent('bsSourcesClick');
+        root.shadowRoot.querySelector('[part="dislike"]').click();
+        expect(dislikeSpy).toHaveReceivedEventTimes(1);
+        expect(likeSpy.length).toBe(0);
+        expect(copySpy.length).toBe(0);
+        expect(regenerateSpy.length).toBe(0);
+        expect(menuSpy.length).toBe(0);
+        expect(sourcesSpy.length).toBe(0);
+    });
+    it('emits bsCopy when the copy button is clicked, and not the other events', async () => {
+        const { root, spyOnEvent } = await render(h("bs-chatbot-response-action", { sourcesCount: 3 }));
+        const likeSpy = spyOnEvent('bsLike');
+        const dislikeSpy = spyOnEvent('bsDislike');
+        const copySpy = spyOnEvent('bsCopy');
+        const regenerateSpy = spyOnEvent('bsRegenerate');
+        const menuSpy = spyOnEvent('bsMenuOpen');
+        const sourcesSpy = spyOnEvent('bsSourcesClick');
+        root.shadowRoot.querySelector('[part="copy"]').click();
+        expect(copySpy).toHaveReceivedEventTimes(1);
+        expect(likeSpy.length).toBe(0);
+        expect(dislikeSpy.length).toBe(0);
+        expect(regenerateSpy.length).toBe(0);
+        expect(menuSpy.length).toBe(0);
+        expect(sourcesSpy.length).toBe(0);
+    });
+    it('emits bsRegenerate when the regenerate button is clicked, and not the other events', async () => {
+        const { root, spyOnEvent } = await render(h("bs-chatbot-response-action", { sourcesCount: 3 }));
+        const likeSpy = spyOnEvent('bsLike');
+        const dislikeSpy = spyOnEvent('bsDislike');
+        const copySpy = spyOnEvent('bsCopy');
+        const regenerateSpy = spyOnEvent('bsRegenerate');
+        const menuSpy = spyOnEvent('bsMenuOpen');
+        const sourcesSpy = spyOnEvent('bsSourcesClick');
+        root.shadowRoot.querySelector('[part="regenerate"]').click();
+        expect(regenerateSpy).toHaveReceivedEventTimes(1);
+        expect(likeSpy.length).toBe(0);
+        expect(dislikeSpy.length).toBe(0);
+        expect(copySpy.length).toBe(0);
+        expect(menuSpy.length).toBe(0);
+        expect(sourcesSpy.length).toBe(0);
+    });
+    it('emits bsMenuOpen when the more-options button is clicked, and not the other events', async () => {
+        const { root, spyOnEvent } = await render(h("bs-chatbot-response-action", { sourcesCount: 3 }));
+        const likeSpy = spyOnEvent('bsLike');
+        const dislikeSpy = spyOnEvent('bsDislike');
+        const copySpy = spyOnEvent('bsCopy');
+        const regenerateSpy = spyOnEvent('bsRegenerate');
+        const menuSpy = spyOnEvent('bsMenuOpen');
+        const sourcesSpy = spyOnEvent('bsSourcesClick');
+        root.shadowRoot.querySelector('[part="menu"]').click();
+        expect(menuSpy).toHaveReceivedEventTimes(1);
+        expect(likeSpy.length).toBe(0);
+        expect(dislikeSpy.length).toBe(0);
+        expect(copySpy.length).toBe(0);
+        expect(regenerateSpy.length).toBe(0);
+        expect(sourcesSpy.length).toBe(0);
+    });
+    it('emits bsSourcesClick when the sources button is clicked, and not the other events', async () => {
+        const { root, spyOnEvent } = await render(h("bs-chatbot-response-action", { sourcesCount: 3 }));
+        const likeSpy = spyOnEvent('bsLike');
+        const dislikeSpy = spyOnEvent('bsDislike');
+        const copySpy = spyOnEvent('bsCopy');
+        const regenerateSpy = spyOnEvent('bsRegenerate');
+        const menuSpy = spyOnEvent('bsMenuOpen');
+        const sourcesSpy = spyOnEvent('bsSourcesClick');
+        root.shadowRoot.querySelector('[part="sources"]').click();
+        expect(sourcesSpy).toHaveReceivedEventTimes(1);
+        expect(likeSpy.length).toBe(0);
+        expect(dislikeSpy.length).toBe(0);
+        expect(copySpy.length).toBe(0);
+        expect(regenerateSpy.length).toBe(0);
+        expect(menuSpy.length).toBe(0);
+    });
+    it('renders consumer-supplied content in the like-icon slot instead of the default icon', async () => {
+        const { root } = await render(h("bs-chatbot-response-action", null, h("span", { slot: "like-icon" }, "CUSTOM")));
+        const likeButton = root.shadowRoot.querySelector('[part="like"]');
+        const slot = likeButton.querySelector('slot[name="like-icon"]');
+        expect(slot).not.toBeNull();
+        const assigned = slot.assignedElements();
+        expect(assigned).toHaveLength(1);
+        expect(assigned[0]).toHaveTextContent('CUSTOM');
+    });
+});

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

@@ -0,0 +1,107 @@
+:host {
+  display: block;
+  --bs-chatbot-response-action-gap: var(--bs-spacing-100);
+  --bs-chatbot-response-action-padding-top: var(--bs-spacing-150);
+  --bs-chatbot-response-action-padding-bottom: var(--bs-spacing-50);
+  --bs-chatbot-response-action-button-size: var(--bs-spacing-400);
+  --bs-chatbot-response-action-button-radius: var(--bs-border-radius-100);
+  --bs-chatbot-response-action-button-hover: var(--bs-color-neutral-container);
+  --bs-chatbot-response-action-button-pressed: var(--bs-color-neutral-container-pressed);
+  --bs-chatbot-response-action-icon: var(--bs-icon-neutral-default);
+  --bs-chatbot-response-action-sources-gap: var(--bs-spacing-50);
+  --bs-chatbot-response-action-sources-padding-left: var(--bs-spacing-100);
+  --bs-chatbot-response-action-sources-padding-right: var(--bs-spacing-150);
+  --bs-chatbot-response-action-sources-color: var(--bs-text-neutral-default);
+  --bs-chatbot-response-action-sources-font-size: var(--bs-font-size-sm);
+  --bs-chatbot-response-action-sources-line-height: var(--bs-line-height-body-sm);
+}
+
+.bs-chatbot-response-action {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-chatbot-response-action-gap);
+  padding-top: var(--bs-chatbot-response-action-padding-top);
+  padding-bottom: var(--bs-chatbot-response-action-padding-bottom);
+  background: transparent;
+  font-family: inherit;
+}
+
+.bs-chatbot-response-action__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  color: var(--bs-chatbot-response-action-icon);
+  font-family: inherit;
+  border-radius: var(--bs-chatbot-response-action-button-radius);
+  width: var(--bs-chatbot-response-action-button-size);
+  height: var(--bs-chatbot-response-action-button-size);
+  flex-shrink: 0;
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-chatbot-response-action__button:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 2px;
+}
+
+.bs-chatbot-response-action__button svg {
+  width: 20px;
+  height: 20px;
+}
+
+.bs-chatbot-response-action__button:hover {
+  background: var(--bs-chatbot-response-action-button-hover);
+}
+
+.bs-chatbot-response-action__button:active {
+  background: var(--bs-chatbot-response-action-button-pressed);
+}
+
+.bs-chatbot-response-action__sources {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  border: none;
+  cursor: pointer;
+  background: transparent;
+  color: var(--bs-chatbot-response-action-sources-color);
+  font-family: inherit;
+  font-size: var(--bs-chatbot-response-action-sources-font-size);
+  line-height: calc(var(--bs-chatbot-response-action-sources-line-height) * 1px);
+  gap: var(--bs-chatbot-response-action-sources-gap);
+  border-radius: var(--bs-chatbot-response-action-button-radius);
+  height: var(--bs-chatbot-response-action-button-size);
+  padding-left: var(--bs-chatbot-response-action-sources-padding-left);
+  padding-right: var(--bs-chatbot-response-action-sources-padding-right);
+  flex-shrink: 0;
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-chatbot-response-action__sources:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 2px;
+}
+
+.bs-chatbot-response-action__sources svg {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.bs-chatbot-response-action__sources:hover {
+  background: var(--bs-chatbot-response-action-button-hover);
+}
+
+.bs-chatbot-response-action__sources:active {
+  background: var(--bs-chatbot-response-action-button-pressed);
+}
+
+.bs-chatbot-response-action__sources-label {
+  white-space: nowrap;
+}

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

@@ -0,0 +1,216 @@
+import { h } from "@stencil/core";
+/**
+ * The row of action buttons that appears below an AI response message in a Genie chat panel:
+ * like, dislike, copy, regenerate, and more-options icon buttons, plus an optional "N sources"
+ * button.
+ *
+ * ## When to use
+ * - Directly below an AI-generated response message in a Genie chat panel.
+ *
+ * ## When not to use
+ * - Below a user's own message -- these actions (regenerate, like/dislike a response, etc.) only
+ *   make sense for AI-generated content.
+ *
+ * @slot like-icon - Overrides the default "Like" button icon.
+ * @slot dislike-icon - Overrides the default "Dislike" button icon.
+ * @slot copy-icon - Overrides the default "Copy" button icon.
+ * @slot regenerate-icon - Overrides the default "Regenerate" button icon.
+ * @slot menu-icon - Overrides the default "More options" button icon.
+ * @slot sources-icon - Overrides the default icon in the "N sources" button.
+ * @part like - The "Like" icon button.
+ * @part dislike - The "Dislike" icon button.
+ * @part copy - The "Copy" icon button.
+ * @part regenerate - The "Regenerate" icon button.
+ * @part menu - The "More options" icon button.
+ * @part sources - The "N sources" button (only rendered when `sourcesCount` is set).
+ * @prop --bs-chatbot-response-action-gap - Gap between all buttons in the row. Aliased to `--bs-spacing-100`.
+ * @prop --bs-chatbot-response-action-padding-top - Aliased to `--bs-spacing-150`.
+ * @prop --bs-chatbot-response-action-padding-bottom - Aliased to `--bs-spacing-50`.
+ * @prop --bs-chatbot-response-action-button-size - Width/height of each icon button. Aliased to `--bs-spacing-400`.
+ * @prop --bs-chatbot-response-action-button-radius - Corner radius of each button. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-chatbot-response-action-button-hover - Button background on hover. Aliased to `--bs-color-neutral-container`.
+ * @prop --bs-chatbot-response-action-button-pressed - Button background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+ * @prop --bs-chatbot-response-action-icon - Icon color. Aliased to `--bs-icon-neutral-default`.
+ * @prop --bs-chatbot-response-action-sources-gap - Gap between the sources icon and its label. Aliased to `--bs-spacing-50`.
+ * @prop --bs-chatbot-response-action-sources-padding-left - Aliased to `--bs-spacing-100`.
+ * @prop --bs-chatbot-response-action-sources-padding-right - Aliased to `--bs-spacing-150`.
+ * @prop --bs-chatbot-response-action-sources-color - Text color of the sources label. Aliased to `--bs-text-neutral-default`.
+ * @prop --bs-chatbot-response-action-sources-font-size - Aliased to `--bs-font-size-sm`.
+ * @prop --bs-chatbot-response-action-sources-line-height - Aliased to `--bs-line-height-body-sm`.
+ */
+export class BsChatbotResponseAction {
+    /**
+     * Number of sources backing the response. When set to a positive number, renders the "N
+     * sources" button (singular "1 source" / plural "N sources"). When unset or `0`, the button is
+     * not rendered at all.
+     */
+    sourcesCount;
+    /** Fires when the "Like" button is clicked. */
+    bsLike;
+    /** Fires when the "Dislike" button is clicked. */
+    bsDislike;
+    /** Fires when the "Copy" button is clicked. */
+    bsCopy;
+    /** Fires when the "Regenerate" button is clicked. */
+    bsRegenerate;
+    /** Fires when the "More options" button is clicked. */
+    bsMenuOpen;
+    /** Fires when the "N sources" button is clicked. */
+    bsSourcesClick;
+    onLikeClick = () => {
+        this.bsLike.emit();
+    };
+    onDislikeClick = () => {
+        this.bsDislike.emit();
+    };
+    onCopyClick = () => {
+        this.bsCopy.emit();
+    };
+    onRegenerateClick = () => {
+        this.bsRegenerate.emit();
+    };
+    onMenuClick = () => {
+        this.bsMenuOpen.emit();
+    };
+    onSourcesClick = () => {
+        this.bsSourcesClick.emit();
+    };
+    render() {
+        const hasSources = !!this.sourcesCount && this.sourcesCount > 0;
+        return (h("div", { key: '61a46c51ffba5e1256a94cbab87ce6e06e45941f', class: "bs-chatbot-response-action" }, h("button", { key: '33e8e29235191bc2a4128074d5df08cc304dbefb', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: '2337aa07fec93d12e6706ded394248f0353b91e6', name: "like-icon" }, h(ThumbsUpIcon, { key: '9be56ca48cbb7027ba608ea9f8e89c2c14f98eee' }))), h("button", { key: 'fcdd8f3d4028a0e91cd5e10525ac97febf2261b6', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: 'bc219702b5e935659aa7824596511e8b01d2014f', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '5ec9da81d5a89d1d2a35dbfe88682214178204cb' }))), h("button", { key: '59d6b3032d141092537d9e56ced8e3045b40384f', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: 'e5bd9fbc4774ae9d67707803819697b56c516984', name: "copy-icon" }, h(CopyIcon, { key: 'e7f8f643920bad3f88c597bb183cfc71f8319c46' }))), h("button", { key: 'a6bd1be8be7f0f70157a5a5e37bc18d2c94462fc', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: '7d35981706ea38ae1e613047945dde9d67a94c62', name: "regenerate-icon" }, h(RegenerateIcon, { key: '1d2dacd4bba68fcd120317bb207e7aa25bc0f62f' }))), h("button", { key: '32f3f790f4024cd7b58ba6f291d32b3f5f0dbbc8', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": "More options", onClick: this.onMenuClick }, h("slot", { key: '0aaf67bbc34bdf5d12247f9ab264a75dad63f996', name: "menu-icon" }, h(MenuIcon, { key: 'c32d76d1e6f73cd9a82bbf4371a4d047b807b80c' }))), hasSources && (h("button", { key: '240f26ed6ec5faded1efe1f171da10e4a292011e', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'e97e26840df27d2ff281882823bae7556d53bdc6', name: "sources-icon" }, h(SourcesIcon, { key: '5dd3538a28ee3cf22b2801258024386827b9c774' })), h("span", { key: 'acf07f2bba262a08c3f2d9650b9fd09fab51d172', 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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-chatbot-response-action.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-chatbot-response-action.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "sourcesCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of sources backing the response. When set to a positive number, renders the \"N\nsources\" button (singular \"1 source\" / plural \"N sources\"). When unset or `0`, the button is\nnot rendered at all."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sources-count"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsLike",
+                "name": "bsLike",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the \"Like\" button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsDislike",
+                "name": "bsDislike",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the \"Dislike\" button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsCopy",
+                "name": "bsCopy",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the \"Copy\" button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsRegenerate",
+                "name": "bsRegenerate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the \"Regenerate\" button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsMenuOpen",
+                "name": "bsMenuOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the \"More options\" button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsSourcesClick",
+                "name": "bsSourcesClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the \"N sources\" button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+const ThumbsUpIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M2.5 8.125H6.25V16.25H2.5C2.33424 16.25 2.17527 16.1842 2.05806 16.0669C1.94085 15.9497 1.875 15.7908 1.875 15.625V8.75C1.875 8.58424 1.94085 8.42527 2.05806 8.30806C2.17527 8.19085 2.33424 8.125 2.5 8.125Z", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M6.25 8.125L9.375 1.875C10.038 1.875 10.6739 2.13839 11.1428 2.60723C11.6116 3.07607 11.875 3.71196 11.875 4.375V6.25H16.875C17.0523 6.25005 17.2276 6.28782 17.3892 6.36081C17.5508 6.4338 17.695 6.54033 17.8123 6.67333C17.9295 6.80634 18.0172 6.96277 18.0693 7.13223C18.1215 7.3017 18.137 7.48033 18.1148 7.65625L17.1773 15.1562C17.1393 15.4583 16.9923 15.736 16.7641 15.9374C16.5358 16.1388 16.2419 16.2499 15.9375 16.25H6.25", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const ThumbsDownIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M2.5 3.75H6.25V11.875H2.5C2.33424 11.875 2.17527 11.8092 2.05806 11.6919C1.94085 11.5747 1.875 11.4158 1.875 11.25V4.375C1.875 4.20924 1.94085 4.05027 2.05806 3.93306C2.17527 3.81585 2.33424 3.75 2.5 3.75Z", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M6.25 11.875L9.375 18.125C10.038 18.125 10.6739 17.8616 11.1428 17.3928C11.6116 16.9239 11.875 16.288 11.875 15.625V13.75H16.875C17.0523 13.75 17.2276 13.7122 17.3892 13.6392C17.5508 13.5662 17.695 13.4597 17.8123 13.3267C17.9295 13.1937 18.0172 13.0372 18.0693 12.8678C18.1215 12.6983 18.137 12.5197 18.1148 12.3438L17.1773 4.84375C17.1393 4.54174 16.9923 4.26399 16.7641 4.06262C16.5358 3.86124 16.2419 3.75009 15.9375 3.75H6.25", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const CopyIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M13.125 13.125H16.875V3.125H6.875V6.875", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M13.125 6.875H3.125V16.875H13.125V6.875Z", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const RegenerateIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M13.125 7.5H16.875V3.75", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M16.875 7.5L14.6656 5.29063C13.3861 4.01117 11.6538 3.28772 9.84437 3.27719C8.03494 3.26666 6.29431 3.9699 5 5.23438", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M6.875 12.5H3.125V16.25", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M3.125 12.5L5.33437 14.7094C6.61388 15.9888 8.34621 16.7123 10.1556 16.7228C11.9651 16.7333 13.7057 16.0301 15 14.7656", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const MenuIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M10 9.11426C10.489 9.11426 10.8857 9.511 10.8857 10C10.8857 10.489 10.489 10.8857 10 10.8857C9.511 10.8857 9.11426 10.489 9.11426 10C9.11426 9.511 9.511 9.11426 10 9.11426Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "0.104167" }), h("path", { d: "M10 3.80176C10.489 3.80176 10.8857 4.1985 10.8857 4.6875C10.8857 5.1765 10.489 5.57324 10 5.57324C9.511 5.57324 9.11426 5.1765 9.11426 4.6875C9.11426 4.1985 9.511 3.80176 10 3.80176Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "0.104167" }), h("path", { d: "M10 16.25C10.5178 16.25 10.9375 15.8303 10.9375 15.3125C10.9375 14.7947 10.5178 14.375 10 14.375C9.48223 14.375 9.0625 14.7947 9.0625 15.3125C9.0625 15.8303 9.48223 16.25 10 16.25Z", fill: "currentColor" })));
+const SourcesIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M13.125 17.5H4.375C4.20924 17.5 4.05027 17.4342 3.93306 17.3169C3.81585 17.1997 3.75 17.0408 3.75 16.875V5.625C3.75 5.45924 3.81585 5.30027 3.93306 5.18306C4.05027 5.06585 4.20924 5 4.375 5H10.625L13.75 8.125V16.875C13.75 17.0408 13.6842 17.1997 13.5669 17.3169C13.4497 17.4342 13.2908 17.5 13.125 17.5Z", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M6.25 5V3.125C6.25 2.95924 6.31585 2.80027 6.43306 2.68306C6.55027 2.56585 6.70924 2.5 6.875 2.5H13.125L16.25 5.625V14.375C16.25 14.5408 16.1842 14.6997 16.0669 14.8169C15.9497 14.9342 15.7908 15 15.625 15H13.75", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M6.875 11.875H10.625", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M6.875 14.375H10.625", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })));

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

@@ -0,0 +1,33 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Genie AI Components/bs-chatbot-response-action',
+    parameters: { docs: { description: { component: componentDescription('bs-chatbot-response-action') } } },
+    render: args => html ` <bs-chatbot-response-action sources-count=${args.sourcesCount || undefined}></bs-chatbot-response-action> `,
+    argTypes: {
+        sourcesCount: { control: 'number', description: propDescription('bs-chatbot-response-action', 'sources-count') },
+    },
+    args: {
+        sourcesCount: 3,
+    },
+};
+export default meta;
+export const Default = {};
+export const NoSources = {
+    name: 'Without sources',
+    args: {
+        sourcesCount: 0,
+    },
+};
+export const InResponseMessage = {
+    name: 'In an AI response message',
+    render: () => html `
+    <div style="max-width: 480px; font-family: sans-serif;">
+      <p style="margin: 0; color: #1a1a1a; font-size: 14px; line-height: 20px;">
+        This is a placeholder AI response message. It demonstrates how the action row sits directly below the
+        response text, aligned to the left edge of the message.
+      </p>
+      <bs-chatbot-response-action sources-count="3"></bs-chatbot-response-action>
+    </div>
+  `,
+};

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

@@ -31,6 +31,19 @@ describe('bs-composer', () => {
         const input = root.shadowRoot.querySelector('input');
         expect(input).toEqualAttribute('aria-label', 'Message');
     });
+    it('renders consumer-supplied content in the actions-end slot, after the primary action button', async () => {
+        const { root } = await render(h("bs-composer", null, h("button", { slot: "actions-end", "aria-label": "Tools" }, "Tools")));
+        const slot = root.shadowRoot.querySelector('slot[name="actions-end"]');
+        expect(slot).not.toBeNull();
+        const assigned = slot.assignedElements();
+        expect(assigned).toHaveLength(1);
+        expect(assigned[0]).toEqualAttribute('aria-label', 'Tools');
+        const controlsRow = root.shadowRoot.querySelector('.bs-composer__controls-row');
+        const children = Array.from(controlsRow.children);
+        const slotIndex = children.indexOf(slot);
+        const actionIndex = children.findIndex(el => el.getAttribute('part') === 'action');
+        expect(slotIndex).toBeGreaterThan(actionIndex);
+    });
     it('emits bsInput with the current value as the user types', async () => {
         const { root, spyOnEvent } = await render(h("bs-composer", null));
         const spy = spyOnEvent('bsInput');

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

@@ -22,6 +22,16 @@ const WAVEFORM_BAR_HEIGHTS = [
  * - A general-purpose text field — use `bs-input` instead; this component's layout and states are
  *   purpose-built for a chat composer, not a generic form field.
  *
+ * ## Focus
+ * Uses `shadow: { delegatesFocus: true }`, so calling `.focus()` on the `<bs-composer>` host
+ * element itself (not just its internal `<input>`) moves focus into the shadow-DOM text field --
+ * useful for e.g. focusing the composer after a parent view mounts, without reaching into its
+ * shadow root.
+ *
+ * @slot actions-end - Extra consumer-supplied controls appended after the primary action button
+ *   in the controls row (e.g. a product-specific "Tools" button). Slotted content is placed
+ *   inline in the same flex row as attach/mic/action, so a slotted element should size itself to
+ *   roughly match `--bs-composer-button-size` to align visually.
  * @part attach - The "+" attach button.
  * @part input - The native text `<input>`.
  * @part mic - The secondary icon button (microphone, or the stop-recording square while `state="recording"`).
@@ -121,7 +131,7 @@ export class BsComposer {
         const placeholder = this.placeholder ?? DEFAULT_PLACEHOLDERS[this.variant];
         const disabled = this.state === 'disabled';
         const recording = this.state === 'recording';
-        return (h("div", { key: '785b4da8ddb23f4762ac7ea379b3ecdaa9584f40', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '5b470cc47221f93ce9852ebaeaf9a35d740d5df1', class: "bs-composer__text-row" }, h("input", { key: '3f4093d98bc0a0ba8440da9fec1d5cb2e302b746', part: "input", class: "bs-composer__input", type: "text", value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput })), h("div", { key: '21103c8d6ac108e705487f670aeb4aaf89d45981', class: "bs-composer__controls-row" }, h("button", { key: '570ef86150f5b0072008fb0215ed1f0affac7af4', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: 'ea030569c8b5d2bafaae3ecfe29b956a54921f34' })), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), h("button", { key: '1906485b13395c9c730f7091176dab4e81ecbcb9', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? 'Stop recording' : 'Start voice input', disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null)), h("button", { key: '3486957673a3bbf7c3dbac41fd5c19e8dbb6258a', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()))));
+        return (h("div", { key: '04c250520759948faa89bd625646a62c79cc6cee', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '8d5d99b90141d3dbeff1b31851cbbb5eaae3d920', class: "bs-composer__text-row" }, h("input", { key: '4eb1ef1b51a41de86da466c8a2c9ea93a7746b43', part: "input", class: "bs-composer__input", type: "text", value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput })), h("div", { key: '8a733762c56ae3f4de7f2af1d89fb05d521b1d17', class: "bs-composer__controls-row" }, h("button", { key: 'b4cd13546ec447f2650a02f43dc2fc0b6d65c8ef', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: 'af8da06a2550d5c37d3737b145ad70c006e1ce66' })), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), h("button", { key: '18b81bf7dd6057c3954566cd12994bb8589ff4ee', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? 'Stop recording' : 'Start voice input', disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null)), h("button", { key: 'a1cf9435fa7dc8e52db7ae148e07fde06971f27c', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '6779413b48314161a75ec75be273e72fe4d622c3', name: "actions-end" }))));
     }
     static get is() { return "bs-composer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-data-table/bs-data-table.js

@@ -54,11 +54,11 @@ export class BsDataTable {
         this.bsRowSelect.emit({ id: row.id, selected });
     };
     render() {
-        return (h("table", { key: '9d51da1ed65a523ac8008fde2f77673a68e4e39e', part: "table", class: "bs-data-table" }, h("thead", { key: 'e1baef3845a07af164e2c91cd3979d1ff76eb767', part: "head" }, h("tr", { key: '930648d2ced662352ddfb7dfc9748501324e7bf3' }, this.selectable && h("th", { key: 'd61beed09258e8ba9c087d4d922eebb6591735e9', class: "bs-data-table__select-col" }), this.columns.map(column => {
+        return (h("table", { key: '8276a72f6539690dd8189cd29e42993c3d61862c', part: "table", class: "bs-data-table" }, h("thead", { key: '2d3e42222eec0bcbe3d06f26f7a3ae53dd5ccdc0', part: "head" }, h("tr", { key: '45994ea59d9a1a347bb8abdf25d7b1b919822a61' }, this.selectable && h("th", { key: '05d5efa74feee1545e1c4b9dfc45acd7ffd10e6a', class: "bs-data-table__select-col" }), this.columns.map(column => {
             const isSorted = this.sortColumn === column.key;
             const ariaSort = column.sortable ? (isSorted ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none') : undefined;
             return (h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
-        }))), h("tbody", { key: '2015f29ec50c9e99ce63366ea06a4d9082fc638d', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
+        }))), h("tbody", { key: '9c1dc006341b63e5d22df655836f326ba27e7b9d', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
         // cellRenderer is a developer-supplied, trusted function (JS-property-only, never
         // derived from untrusted input) -- its HTML output is intentionally not escaped,
         // same trust model as React's dangerouslySetInnerHTML.

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

@@ -36,10 +36,10 @@ export class BsInput {
         this.bsChange.emit(value);
     };
     render() {
-        return (h("div", { key: '94a90f72a348259c9e54b1eb61ca694baf7c0386', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '53b4d56fb2c955f061ac113b7dc2dbe8548a85d1', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: '3760b135aaf4002b86e0552af5e3cad110b45afe', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label)), h("input", { key: '761d594818ee8ad917562b9dbe945e5ea8d9210c', id: "control", part: "control", class: "bs-input__control", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: '60ac25b59a78410843dbe9416398d4e0ec15c976', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label)), h("input", { key: 'a9f801b2a7e16550c5d22c1301435e7a7082b362', id: "control", part: "control", class: "bs-input__control", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/bs-badge.js

@@ -1 +1 @@
-import{t as e,p as a,H as r,h as b}from"./p-Cu4gTknX.js";const s=a(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}variant="default";render(){return b("span",{key:"9cc06bddba11f57edf97209456e25141a3b80bea",part:"container",class:"bs-badge bs-badge--"+this.variant},b("slot",{key:"7c0e4054e99a3dedc94f2a7250075fcb76c115b6"}))}static get style(){return":host{display:inline-block}.bs-badge{display:inline-flex;align-items:center;height:var(--bs-spacing-400);padding:0 var(--bs-spacing-200);border-radius:var(--bs-border-radius-full);font-size:var(--bs-font-size-xs);font-weight:var(--bs-font-weight-medium);font-family:inherit;white-space:nowrap}.bs-badge--default{background:var(--bs-badge-bg-default);color:var(--bs-badge-text-default)}.bs-badge--primary{background:var(--bs-badge-bg-primary-container);color:var(--bs-badge-text-primary)}.bs-badge--success{background:var(--bs-badge-bg-success-container);color:var(--bs-badge-text-success)}.bs-badge--warning{background:var(--bs-badge-bg-warning-container);color:var(--bs-badge-text-warning)}.bs-badge--info{background:var(--bs-badge-bg-info-container);color:var(--bs-badge-text-info)}.bs-badge--error{background:var(--bs-badge-bg-error-container);color:var(--bs-badge-text-error)}.bs-badge--neutral{background:var(--bs-badge-bg-neutral-container);color:var(--bs-badge-text-neutral)}.bs-badge--inverse{background:var(--bs-badge-bg-inverse);color:var(--bs-badge-text-inverse)}"}},[769,"bs-badge",{variant:[1]}]);function t(){"undefined"!=typeof customElements&&["bs-badge"].forEach((a=>{"bs-badge"===a&&(customElements.get(e(a))||customElements.define(e(a),s))}))}t();const n=s,d=t;export{n as BsBadge,d as defineCustomElement}
+import{t as e,p as a,H as r,h as b}from"./p-BpvhHQSw.js";const s=a(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}variant="default";render(){return b("span",{key:"9cc06bddba11f57edf97209456e25141a3b80bea",part:"container",class:"bs-badge bs-badge--"+this.variant},b("slot",{key:"7c0e4054e99a3dedc94f2a7250075fcb76c115b6"}))}static get style(){return":host{display:inline-block}.bs-badge{display:inline-flex;align-items:center;height:var(--bs-spacing-400);padding:0 var(--bs-spacing-200);border-radius:var(--bs-border-radius-full);font-size:var(--bs-font-size-xs);font-weight:var(--bs-font-weight-medium);font-family:inherit;white-space:nowrap}.bs-badge--default{background:var(--bs-badge-bg-default);color:var(--bs-badge-text-default)}.bs-badge--primary{background:var(--bs-badge-bg-primary-container);color:var(--bs-badge-text-primary)}.bs-badge--success{background:var(--bs-badge-bg-success-container);color:var(--bs-badge-text-success)}.bs-badge--warning{background:var(--bs-badge-bg-warning-container);color:var(--bs-badge-text-warning)}.bs-badge--info{background:var(--bs-badge-bg-info-container);color:var(--bs-badge-text-info)}.bs-badge--error{background:var(--bs-badge-bg-error-container);color:var(--bs-badge-text-error)}.bs-badge--neutral{background:var(--bs-badge-bg-neutral-container);color:var(--bs-badge-text-neutral)}.bs-badge--inverse{background:var(--bs-badge-bg-inverse);color:var(--bs-badge-text-inverse)}"}},[769,"bs-badge",{variant:[1]}]);function t(){"undefined"!=typeof customElements&&["bs-badge"].forEach((a=>{"bs-badge"===a&&(customElements.get(e(a))||customElements.define(e(a),s))}))}t();const n=s,d=t;export{n as BsBadge,d as defineCustomElement}

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

@@ -1 +1 @@
-import{t,p as e,H as s,h as n}from"./p-Cu4gTknX.js";const o=e(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}size="md";render(){return n("span",{key:"c54e42fcf6eb065a1a33f2dee8518d12c5797cf3",part:"container",class:"bs-button-skeleton bs-button-skeleton--"+this.size,role:"status","aria-label":"Loading"})}static get style(){return":host{display:inline-block;--bs-button-skeleton-height-sm:var(--bs-spacing-500);--bs-button-skeleton-height-md:var(--bs-spacing-600);--bs-button-skeleton-height-lg:var(--bs-spacing-700);--bs-button-skeleton-width:96px}.bs-button-skeleton{display:inline-block;border-radius:var(--bs-border-radius-100);width:var(--bs-button-skeleton-width);background:var(--bs-color-neutral-container);animation:bs-button-skeleton-pulse 1.5s ease-in-out infinite}.bs-button-skeleton--sm{height:var(--bs-button-skeleton-height-sm)}.bs-button-skeleton--md{height:var(--bs-button-skeleton-height-md)}.bs-button-skeleton--lg{height:var(--bs-button-skeleton-height-lg)}@keyframes bs-button-skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@media (prefers-reduced-motion: reduce){.bs-button-skeleton{animation:none}}"}},[513,"bs-button-skeleton",{size:[1]}]);function b(){"undefined"!=typeof customElements&&["bs-button-skeleton"].forEach((e=>{"bs-button-skeleton"===e&&(customElements.get(t(e))||customElements.define(t(e),o))}))}b();const i=o,a=b;export{i as BsButtonSkeleton,a as defineCustomElement}
+import{t,p as e,H as s,h as n}from"./p-BpvhHQSw.js";const o=e(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}size="md";render(){return n("span",{key:"5b51879877adc5abbe6f28d79f27a1f33654a1a4",part:"container",class:"bs-button-skeleton bs-button-skeleton--"+this.size,role:"status","aria-label":"Loading"})}static get style(){return":host{display:inline-block;--bs-button-skeleton-height-sm:var(--bs-spacing-500);--bs-button-skeleton-height-md:var(--bs-spacing-600);--bs-button-skeleton-height-lg:var(--bs-spacing-700);--bs-button-skeleton-width:96px}.bs-button-skeleton{display:inline-block;border-radius:var(--bs-border-radius-100);width:var(--bs-button-skeleton-width);background:var(--bs-color-neutral-container);animation:bs-button-skeleton-pulse 1.5s ease-in-out infinite}.bs-button-skeleton--sm{height:var(--bs-button-skeleton-height-sm)}.bs-button-skeleton--md{height:var(--bs-button-skeleton-height-md)}.bs-button-skeleton--lg{height:var(--bs-button-skeleton-height-lg)}@keyframes bs-button-skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@media (prefers-reduced-motion: reduce){.bs-button-skeleton{animation:none}}"}},[513,"bs-button-skeleton",{size:[1]}]);function b(){"undefined"!=typeof customElements&&["bs-button-skeleton"].forEach((e=>{"bs-button-skeleton"===e&&(customElements.get(t(e))||customElements.define(t(e),o))}))}b();const i=o,a=b;export{i as BsButtonSkeleton,a as defineCustomElement}