@brandsync/wc 0.0.7 → 0.0.9

package/dist/cjs/bs-chatbot-feedback.cjs.entry.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var index = require('./index-CVh-sqA_.js');
+
+const bsChatbotFeedbackCss = () => `:host{display:block;--bs-chatbot-feedback-bg:var(--bs-surface-raised);--bs-chatbot-feedback-border:var(--bs-border-default);--bs-chatbot-feedback-radius:var(--bs-border-radius-200);--bs-chatbot-feedback-padding-x:var(--bs-spacing-250);--bs-chatbot-feedback-padding-y:var(--bs-spacing-550);--bs-chatbot-feedback-max-width:762px;--bs-chatbot-feedback-gap:var(--bs-spacing-300);--bs-chatbot-feedback-top-gap:var(--bs-spacing-250);--bs-chatbot-feedback-heading-color:var(--bs-text-default);--bs-chatbot-feedback-subtitle-color:var(--bs-text-secondary);--bs-chatbot-feedback-star-filled:var(--bs-color-primary-default);--bs-chatbot-feedback-star-empty:var(--bs-border-neutral-container);--bs-chatbot-feedback-comment-color:var(--bs-text-default);--bs-chatbot-feedback-close-hover:var(--bs-surface-hover);--bs-chatbot-feedback-primary-bg:var(--bs-button-primary-default);--bs-chatbot-feedback-primary-bg-hover:var(--bs-button-primary-hover);--bs-chatbot-feedback-primary-bg-disabled:var(--bs-button-primary-disabled);--bs-chatbot-feedback-outlined-border:var(--bs-border-primary);--bs-chatbot-feedback-outlined-hover:var(--bs-color-primary-container-hover);--bs-chatbot-feedback-outlined-text:var(--bs-text-action)}.bs-chatbot-feedback{box-sizing:border-box;position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--bs-chatbot-feedback-gap);max-width:var(--bs-chatbot-feedback-max-width);padding:var(--bs-chatbot-feedback-padding-y) var(--bs-chatbot-feedback-padding-x);background:var(--bs-chatbot-feedback-bg);border:1px solid var(--bs-chatbot-feedback-border);border-radius:var(--bs-chatbot-feedback-radius);font-family:inherit}.bs-chatbot-feedback__close{box-sizing:border-box;position:absolute;top:var(--bs-spacing-100);right:var(--bs-spacing-100);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:var(--bs-border-radius-100);color:var(--bs-icon-default);cursor:pointer;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-chatbot-feedback__close svg{width:20px;height:20px}.bs-chatbot-feedback__close:hover{background:var(--bs-chatbot-feedback-close-hover)}.bs-chatbot-feedback__top{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:var(--bs-chatbot-feedback-top-gap);width:100%}.bs-chatbot-feedback__text{display:flex;flex-direction:column;gap:var(--bs-spacing-50);width:100%;text-align:center}.bs-chatbot-feedback__heading{margin:0;color:var(--bs-chatbot-feedback-heading-color);font-size:var(--bs-font-size-xl);font-weight:var(--bs-font-weight-bold);line-height:calc(var(--bs-line-height-heading-h5) * 1px)}.bs-chatbot-feedback__subtitle{margin:0;color:var(--bs-chatbot-feedback-subtitle-color);font-size:var(--bs-font-size-md);line-height:calc(var(--bs-line-height-body-md) * 1px)}.bs-chatbot-feedback__stars{display:flex;gap:var(--bs-spacing-350)}.bs-chatbot-feedback__star{box-sizing:border-box;display:inline-flex;width:36px;height:36px;padding:0;background:transparent;border:none;color:var(--bs-chatbot-feedback-star-empty);cursor:pointer}.bs-chatbot-feedback__star[aria-checked='true']{color:var(--bs-chatbot-feedback-star-filled)}.bs-chatbot-feedback__star:disabled{cursor:default}.bs-chatbot-feedback__star:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px;border-radius:var(--bs-border-radius-50)}.bs-chatbot-feedback__field{display:flex;flex-direction:column;gap:var(--bs-spacing-50);width:100%}.bs-chatbot-feedback__label{color:var(--bs-input-label);font-size:var(--bs-font-size-md);font-weight:var(--bs-font-weight-semibold);line-height:calc(var(--bs-line-height-body-md) * 1px)}.bs-chatbot-feedback__textarea{box-sizing:border-box;width:100%;min-height:103px;padding:var(--bs-spacing-100) var(--bs-spacing-150);border:1px solid var(--bs-input-border-default);border-radius:var(--bs-border-radius-100);background:var(--bs-input-bg-default);color:var(--bs-input-text);font-family:inherit;font-size:var(--bs-font-size-md);line-height:calc(var(--bs-line-height-body-md) * 1px);resize:vertical}.bs-chatbot-feedback__textarea::placeholder{color:var(--bs-input-placeholder)}.bs-chatbot-feedback__textarea:hover{border-color:var(--bs-input-border-hover)}.bs-chatbot-feedback__textarea:focus-visible{outline:none;border-color:var(--bs-input-border-focus)}.bs-chatbot-feedback__comment{box-sizing:border-box;width:100%;min-height:103px;margin:0;padding:var(--bs-spacing-100) var(--bs-spacing-150);border:1px solid var(--bs-input-border-default);border-radius:var(--bs-border-radius-100);background:var(--bs-input-bg-filled);color:var(--bs-chatbot-feedback-comment-color);font-size:var(--bs-font-size-md);line-height:calc(var(--bs-line-height-body-md) * 1px);word-break:break-word}.bs-chatbot-feedback__actions{display:flex;flex-direction:column;gap:var(--bs-spacing-150);width:100%}.bs-chatbot-feedback__submit,.bs-chatbot-feedback__new-chat{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--bs-spacing-50);width:100%;height:44px;padding:0 var(--bs-spacing-250) 0 var(--bs-spacing-150);border-radius:var(--bs-border-radius-100);font-family:inherit;font-size:var(--bs-font-size-md);font-weight:var(--bs-font-weight-medium);cursor:pointer;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-chatbot-feedback__submit svg,.bs-chatbot-feedback__new-chat svg{width:24px;height:24px;flex-shrink:0}.bs-chatbot-feedback__submit,.bs-chatbot-feedback__new-chat--primary{background:var(--bs-chatbot-feedback-primary-bg);border:none;color:var(--bs-text-on-action)}.bs-chatbot-feedback__submit:hover:not(:disabled),.bs-chatbot-feedback__new-chat--primary:hover{background:var(--bs-chatbot-feedback-primary-bg-hover)}.bs-chatbot-feedback__submit:disabled{background:var(--bs-chatbot-feedback-primary-bg-disabled);color:var(--bs-text-on-disabled);cursor:not-allowed}.bs-chatbot-feedback__new-chat--outlined{background:transparent;border:1px solid var(--bs-chatbot-feedback-outlined-border);color:var(--bs-chatbot-feedback-outlined-text)}.bs-chatbot-feedback__new-chat--outlined:hover{background:var(--bs-chatbot-feedback-outlined-hover)}.bs-chatbot-feedback__submit:focus-visible,.bs-chatbot-feedback__new-chat:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}`;
+
+const RATING_COPY = {
+    1: { heading: "We're sorry we couldn't help.", subtitle: "We'll use your feedback to improve." },
+    2: { heading: "We're sorry we didn't get it right.", subtitle: "We'll use your feedback to improve." },
+    3: { heading: 'Thanks for your feedback.', subtitle: "We're always looking for ways to improve." },
+    4: { heading: "Thanks! We're glad we could help.", subtitle: 'We appreciate your feedback.' },
+    5: { heading: 'Thanks for the great rating!', subtitle: "We're happy we could help." },
+};
+const DEFAULT_HEADING = 'How was your experience with us?';
+const DEFAULT_SUBTITLE = 'Your feedback helps us make Genie better.';
+const BsChatbotFeedback = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsRatingChange = index.createEvent(this, "bsRatingChange");
+        this.bsCommentInput = index.createEvent(this, "bsCommentInput");
+        this.bsSubmit = index.createEvent(this, "bsSubmit");
+        this.bsNewChat = index.createEvent(this, "bsNewChat");
+        this.bsClose = index.createEvent(this, "bsClose");
+    }
+    /** Current star rating, 0-5. 0 means no rating has been given yet. */
+    rating = 0;
+    /** Whether feedback has been submitted. Switches the card from the editable form to the
+     * read-only "thanks" view. */
+    submitted = false;
+    /** The comment text. */
+    comment = '';
+    /** Overrides the computed heading (see the class doc for why this is computed by default). */
+    heading;
+    /** Overrides the computed subtitle. */
+    subtitle;
+    /** Fires when a star is clicked, with the new rating. */
+    bsRatingChange;
+    /** Fires on every keystroke in the comment textarea, with the current value. */
+    bsCommentInput;
+    /** Fires when "Submit feedback" is clicked, with the current rating and comment. Also sets
+     * `submitted` to true. */
+    bsSubmit;
+    /** Fires when "Start new chat" is clicked. The consuming app owns actually starting a new chat. */
+    bsNewChat;
+    /** Fires when the close button is clicked. The consuming app owns actually hiding the card. */
+    bsClose;
+    onStarClick = (value) => {
+        if (this.submitted)
+            return;
+        this.rating = value;
+        this.bsRatingChange.emit(value);
+    };
+    onCommentInput = (ev) => {
+        this.comment = ev.target.value;
+        this.bsCommentInput.emit(this.comment);
+    };
+    onSubmitClick = () => {
+        if (this.rating === 0)
+            return;
+        this.submitted = true;
+        this.bsSubmit.emit({ rating: this.rating, comment: this.comment });
+    };
+    onNewChatClick = () => {
+        this.bsNewChat.emit();
+    };
+    onCloseClick = () => {
+        this.bsClose.emit();
+    };
+    computedHeading() {
+        if (this.heading)
+            return this.heading;
+        if (this.submitted && RATING_COPY[this.rating])
+            return RATING_COPY[this.rating].heading;
+        return DEFAULT_HEADING;
+    }
+    computedSubtitle() {
+        if (this.subtitle)
+            return this.subtitle;
+        if (this.submitted && RATING_COPY[this.rating])
+            return RATING_COPY[this.rating].subtitle;
+        return DEFAULT_SUBTITLE;
+    }
+    render() {
+        const stars = [1, 2, 3, 4, 5];
+        return (index.h("div", { key: 'e509feb04a65ee7908c9021befe43ddb0727fd00', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, index.h("button", { key: '3c1e7f84bb1a2e0e6f89323f2c45102c3714c0f6', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": "Close", onClick: this.onCloseClick }, index.h(CloseIcon, { key: '30202380a79f55d4187ff6f50fc0a11d7a282b81' })), index.h("div", { key: '228f8195087f1d6d3ec6ba53f954ab722cae2971', class: "bs-chatbot-feedback__top" }, index.h("div", { key: 'd7fb1f58d21aed4fa9b0e5da83a5506e8082c5ff', class: "bs-chatbot-feedback__text" }, index.h("p", { key: '7e275ebb91562a2f3b4eaf8076a7238f82260bcf', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), index.h("p", { key: '0bd022e0594dee0a084a83fcce90abeb2b8c8a98', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), index.h("div", { key: '0c54cd7cfc1b14c4feac0859e1ad2dd3ee2af8a1', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": "Rating" }, stars.map(value => (index.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) }, index.h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (index.h("div", { key: '4e00821d17646c1d71d9893a7459557f9fcf24d2', class: "bs-chatbot-feedback__field" }, index.h("label", { key: '11d31fb2ff6897e97e2ec4196ead7269d60cec7b', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, "Tell us what you think"), index.h("textarea", { key: 'd6228e4d737e90ab61cca91d633e36ac69f1c172', 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 && (index.h("p", { key: 'bb5fdd240b07a6051cb784077b3476af1e1217fb', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), index.h("div", { key: '0d262521f8f13b464f4cbfa746ce49bd330986c6', class: "bs-chatbot-feedback__actions" }, !this.submitted && (index.h("button", { key: 'a5e8cc2a7bdd290cc95afeefe5d1fc5a1dde86ce', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, index.h(SendIcon, { key: '163b0c11e0038ae01d7bc61ae1f8c50930b7f8f2' }), "Submit feedback")), index.h("button", { key: '3cf2d4b2cd6b9043d4194a991cc0e33fa09c69e4', 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 }, index.h(EditIcon, { key: 'a0fddede710c06b60302e4cb12b7affe9ed8afec' }), "Start new chat"))));
+    }
+};
+const StarIcon = ({ filled }) => (index.h("svg", { viewBox: "0 0 24 24", fill: filled ? 'currentColor' : 'none', xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M12 2.5L15.09 8.75L22 9.77L17 14.62L18.18 21.5L12 18.22L5.82 21.5L7 14.62L2 9.77L8.91 8.75L12 2.5Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const SendIcon = () => (index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M13.5 12H7.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M4.55 20.75C4.44 20.99 4.47 21.27 4.63 21.48C4.79 21.69 5.05 21.79 5.31 21.75L21.37 12.65C21.6 12.52 21.75 12.27 21.75 12C21.75 11.73 21.6 11.48 21.37 11.35L5.31 2.25C5.05 2.21 4.79 2.31 4.63 2.52C4.47 2.73 4.44 3.01 4.55 3.25L7.5 12L4.55 20.75Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const EditIcon = () => (index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M16.5 3.5L20.5 7.5L8 20H4V16L16.5 3.5Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M14.5 5.5L18.5 9.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const CloseIcon = () => (index.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M15 5L5 15", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M15 15L5 5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+BsChatbotFeedback.style = bsChatbotFeedbackCss();
+
+exports.bs_chatbot_feedback = BsChatbotFeedback;

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

@@ -132,7 +132,7 @@ const BsChatbotHeader = class {
         this.bsClose.emit();
     };
     render() {
-        return (index.h("div", { key: '9ae798e8d79c992933228383823d3160dc660f90', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, index.h("div", { key: 'c80243df90e7ed74cea0679b94c139fc6bba8cc5', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), index.h("div", { key: 'ebcfc959d4d7c606866870f1f107c4fc771d25b1', class: "bs-chatbot-header__actions" }, index.h("span", { key: '153e84f8e63faf67c180338da94e86d2b28da945', class: "bs-chatbot-header__tooltip-wrapper" }, index.h("button", { key: '76b48c5dcaf482dfbafacf8125a5c2908bbc27c3', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, index.h("slot", { key: 'b09177f97df5a1ddb20374d260858f0ae3afea12', name: "new-chat-icon" }, index.h(NewChatIcon, { key: 'a1907a4fd8730c83af15ad7dbf8ec1d784fac88d' }))), index.h("bs-tooltip", { key: '77b453884b760bf4687b26adbb06f6220c49dbca', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), index.h("span", { key: '8b775f74bd28efa4b812f959658cae97ffce085f', class: "bs-chatbot-header__tooltip-wrapper" }, index.h("button", { key: '1a8c279aa94175b2d90654aa4d3c959273147a7c', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, index.h("slot", { key: '8660d04481d3d846731e83b23c865e2bab1cbea7', name: "history-icon" }, index.h(HistoryIcon, { key: 'a34ed34be60fbc2869b34480342007aa59700177' }))), index.h("bs-tooltip", { key: '7ba408053f7b0e88330720d3dff4f188f233f46a', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), index.h("span", { key: '4b4d24319a9b5b2085c8180748f72bfcc532a942', class: "bs-chatbot-header__tooltip-wrapper" }, index.h("button", { key: 'b9055bd0344465df6afb40aad28ea9565865751e', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? 'Collapse' : 'Expand', "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, index.h("slot", { key: '460b3c1d20f2a48945df6385e3ebf7f54577881e', name: "expand-icon" }, index.h(ExpandIcon, { key: '890b772fff27703a7d3da00ff4ad5f2844714075' }))), index.h("bs-tooltip", { key: 'b43756a31171e14b70bc80574741b28b4dad2c98', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), index.h("span", { key: '2023c06216607d6205ec3a0a13d2b06a10babae5', class: "bs-chatbot-header__tooltip-wrapper" }, index.h("button", { key: '1bdc7a342af4b6b37121edb9a93c30ba659d95bf', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, index.h("slot", { key: '1c47b5499cf15ca73aa8a9dab792bf72c441ff38', name: "close-icon" }, index.h(CloseIcon, { key: '2ce1bad2bca776187e238647c02e3cc4b68018de' }))), index.h("bs-tooltip", { key: 'd7a3016e6eab564ab0cd9f5ab1d79be2b6408c17', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
+        return (index.h("div", { key: 'b1f536775af30bea47474dbcf41f444e9361fabd', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, index.h("div", { key: '1e650269ff177b26e1dce30d9e04b4fab9de9698', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), index.h("div", { key: '6a35a216f3bbda37ebd14ba801bf83f1f4941616', class: "bs-chatbot-header__actions" }, index.h("span", { key: 'af2b8a3eeafd27a946e1dd1c51c326c6f7e73531', class: "bs-chatbot-header__tooltip-wrapper" }, index.h("button", { key: '2928c845fd3737d68d672305437d9edd76d1deb3', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, index.h("slot", { key: 'bdab9f84e61bc92e16abcb7a9019300291690387', name: "new-chat-icon" }, index.h(NewChatIcon, { key: 'c61ddb8d3b8f9945f9986253cbe16e462c836f28' }))), index.h("bs-tooltip", { key: '3edbc3aae276ad91d2e70d21040efaffef101381', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), index.h("span", { key: 'ef3bc303486fea9088b3855ac211baf6e1acae8b', class: "bs-chatbot-header__tooltip-wrapper" }, index.h("button", { key: '60e2787be7401832a29f806723414b361c480c47', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, index.h("slot", { key: '2bbf8e675aa150740a23d59015446e012adbcb05', name: "history-icon" }, index.h(HistoryIcon, { key: '55badb6fc7cf1a17abbdae74896789cf2802be01' }))), index.h("bs-tooltip", { key: 'd4fd6cffbff586949b9357605cf23362a09fbd86', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), index.h("span", { key: 'e2aa88c87d900d581b5a353cb2a4d014818b238b', class: "bs-chatbot-header__tooltip-wrapper" }, index.h("button", { key: 'aa5357f502a32b586b2d5c4837b37364f00d344a', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? 'Collapse' : 'Expand', "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, index.h("slot", { key: '312e8c17f49c84672533e37989c73072038ca07f', name: "expand-icon" }, index.h(ExpandIcon, { key: 'a0b666ae7b3660d4eb892407a82a84a0d8c8607b' }))), index.h("bs-tooltip", { key: '3c43e4d14ef4cdedaaecebed43927eb8f59e3391', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), index.h("span", { key: '1e252dcc382c0f2c5ae89a8dcf96e9d76c086b01', class: "bs-chatbot-header__tooltip-wrapper" }, index.h("button", { key: 'b95104b5dc629e70c43f0eb01f34fd0ba57db670', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, index.h("slot", { key: '7c24bb86799528bc1e1bcc6419217b2048f70835', name: "close-icon" }, index.h(CloseIcon, { key: 'c53e2028c86264bac5082e9e145deb79eca3156d' }))), index.h("bs-tooltip", { key: 'f132fa96cc7942a3c4574403da1f2a0d586c0068', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
     }
 };
 const NewChatIcon = () => (index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M12 15H9V12L18 3L21 6L12 15Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M15.75 5.25L18.75 8.25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M20.25 12V19.5C20.25 19.6989 20.171 19.8897 20.0303 20.0303C19.8897 20.171 19.6989 20.25 19.5 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V4.5C3.75 4.30109 3.82902 4.11032 3.96967 3.96967C4.11032 3.82902 4.30109 3.75 4.5 3.75H12", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/cjs/bs-chatbot-response-action.cjs.entry.js

@@ -78,7 +78,7 @@ const BsChatbotResponseAction = class {
     };
     render() {
         const hasSources = !!this.sourcesCount && this.sourcesCount > 0;
-        return (index.h("div", { key: 'd372000276bedcf0bd64015d955a4ed4ff1c83cc', class: "bs-chatbot-response-action" }, index.h("button", { key: '6fff591650e4f6114a653ff37bfebe100d4874b7', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, index.h("slot", { key: 'e92d29243291141fd63120b4bc6a5024f1908066', name: "like-icon" }, index.h(ThumbsUpIcon, { key: 'd1a7e8d922f5e712e48e19c6176fdb60ac511240' }))), index.h("button", { key: '7115ff6c49c5388440f0fe8a352ddd4459a5f8ed', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, index.h("slot", { key: 'd3642d52b90cbd3f6c60d8b8ead3d14fab29f531', name: "dislike-icon" }, index.h(ThumbsDownIcon, { key: '8cff196faabd164cf023bfa8bac02f3455885261' }))), index.h("button", { key: 'd32e2ebce71ab91327d7ad7406ae581b2ff98443', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, index.h("slot", { key: '1c0459f9fb78202d41e5bf7b3bf5a11ac9c00ecd', name: "copy-icon" }, index.h(CopyIcon, { key: 'b3d8e9f3cb2125c26967156f046ce3caf44ab8b1' }))), index.h("button", { key: 'c14f8a2580018edac6b16c82be5b339c7a4033af', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, index.h("slot", { key: 'cf67332b681da43a7a305909e14a16bf6a3ca962', name: "regenerate-icon" }, index.h(RegenerateIcon, { key: '76b5b9c39624007532b2c2b7f20554f12cd8eee4' }))), index.h("div", { key: 'b62694c42bf23484362e188b6b74559810fce693', class: "bs-chatbot-response-action__menu-wrapper" }, index.h("button", { key: '36715b97f529bfc9c064020d434d0210a3674e52', 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 }, index.h("slot", { key: 'f11d837af777a04cc9031921f92b57e139758f2c', name: "menu-icon" }, index.h(MenuIcon, { key: '3c0c0a70edcf1e8c817a121fce315b8a747ee8e4' }))), this.menuOpen && (index.h("div", { key: '5a4848466caecf26ce3797b14609932e76ca653d', class: "bs-chatbot-response-action__menu-popup" }, index.h("slot", { key: 'f79ac9bcde08eadd0a904223f6f13c9850066827', name: "menu" })))), hasSources && (index.h("button", { key: 'ef9663bbbb7f74482743177bdfa8053575c3330e', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, index.h("slot", { key: 'f848fd2b5e545d186a7f337c2d0fe0f300c567f7', name: "sources-icon" }, index.h(SourcesIcon, { key: '7a8be099bcf97209b30c1b941b1f13691d9c07d3' })), index.h("span", { key: 'e91be28b3d36b1cc3a91c17218ca5ea77938f887', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
+        return (index.h("div", { key: 'bae036e0fce39e91ad77e048e6c169ea72ce78e4', class: "bs-chatbot-response-action" }, index.h("button", { key: 'aadfb92da35ba7b5b105cfdc3ad506c7a7fd78e7', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, index.h("slot", { key: 'f61c62fa761d277b3ef1b6c7a1bf4b8077ac340b', name: "like-icon" }, index.h(ThumbsUpIcon, { key: 'a95b09db3fee703c4d2e31a5efa590feb777f3b5' }))), index.h("button", { key: '37bdacfab99f444ae215b0da5a7b11912562baf7', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, index.h("slot", { key: 'b948f912ce5cd82c570bfcf7fe69f01f4bf993b0', name: "dislike-icon" }, index.h(ThumbsDownIcon, { key: '59e901ec41273c235fb0e484e53d23e529a1f429' }))), index.h("button", { key: '5f0f954f0cadcfda62d0493ebbf07651dc9c43c3', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, index.h("slot", { key: 'a965380a2c3af43ba49b735c19c7b4afb5ec9c9f', name: "copy-icon" }, index.h(CopyIcon, { key: 'c9e7d8ef53a14728bced9c753aba3529ac97152f' }))), index.h("button", { key: 'e06f0c60698dea9a17005d6b233e59e5389c2c11', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, index.h("slot", { key: '9a5aad36b3f1e217b2ab1718c25d451bc4f0b326', name: "regenerate-icon" }, index.h(RegenerateIcon, { key: '02aa85caf9c69a84fab24fd97361fa0a2a42c784' }))), index.h("div", { key: '6c48442ee1c32fcdecab2521c7e7773aae413c61', class: "bs-chatbot-response-action__menu-wrapper" }, index.h("button", { key: '749474386109e0c6bf3d0c18396ab75514a84db5', 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 }, index.h("slot", { key: 'a48edebb1eb697e7ebb80ceee8b674ad28ae760b', name: "menu-icon" }, index.h(MenuIcon, { key: '3bc463d9d8882ae373221b754d234938bd47f7de' }))), this.menuOpen && (index.h("div", { key: 'b1217dd05886155d65b6c6e52933b23ddfbeda4e', class: "bs-chatbot-response-action__menu-popup" }, index.h("slot", { key: '5a22ff4ffe417bbd25dfddbf18a943862b499f24', name: "menu" })))), hasSources && (index.h("button", { key: '35d6be1ee305a8549ebc1bed28884c0c5dc83220', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, index.h("slot", { key: 'af5a033146160fc90eb9ad3d28eb0ecc3628347c', name: "sources-icon" }, index.h(SourcesIcon, { key: '908029587106b710ddcee80fe207dddc8f77723c' })), index.h("span", { key: 'aa64462f7f5f4d96adfdf7172a5c2ac18cb1e608', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
     }
 };
 const ThumbsUpIcon = () => (index.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.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" }), index.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" })));

package/dist/cjs/bs-chatbot-sources-drawer.cjs.entry.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var index = require('./index-CVh-sqA_.js');
+
+const bsChatbotSourcesDrawerCss = () => `:host{display:block;--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);--bs-chatbot-sources-drawer-header-padding-top:var(--bs-spacing-150);--bs-chatbot-sources-drawer-header-padding-bottom:var(--bs-spacing-100);--bs-chatbot-sources-drawer-heading-color:var(--bs-text-default);--bs-chatbot-sources-drawer-count-bg:var(--bs-badge-bg-neutral-container);--bs-chatbot-sources-drawer-count-color:var(--bs-badge-text-neutral);--bs-chatbot-sources-drawer-collapse-hover:var(--bs-surface-hover);--bs-chatbot-sources-drawer-section-gap:var(--bs-spacing-200);--bs-chatbot-sources-drawer-list-padding:var(--bs-spacing-200);--bs-chatbot-sources-drawer-list-gap:var(--bs-spacing-50)}.bs-chatbot-sources-drawer{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-chatbot-sources-drawer-section-gap);width:100%;height:100%;background:var(--bs-chatbot-sources-drawer-bg);font-family:inherit}.bs-chatbot-sources-drawer__header{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:var(--bs-chatbot-sources-drawer-header-padding-top) var(--bs-chatbot-sources-drawer-header-padding-x) var(--bs-chatbot-sources-drawer-header-padding-bottom);box-shadow:var(--bs-chatbot-sources-drawer-header-shadow)}.bs-chatbot-sources-drawer__title-group{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-chatbot-sources-drawer__heading{margin:0;color:var(--bs-chatbot-sources-drawer-heading-color);font-size:var(--bs-font-size-2xl);font-weight:var(--bs-font-weight-bold);line-height:calc(var(--bs-line-height-heading-h4) * 1px)}.bs-chatbot-sources-drawer__count{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:16px;max-width:34px;padding:var(--bs-spacing-50) var(--bs-spacing-100);background:var(--bs-chatbot-sources-drawer-count-bg);border-radius:var(--bs-border-radius-50);color:var(--bs-chatbot-sources-drawer-count-color);font-size:var(--bs-font-size-xs);line-height:calc(var(--bs-line-height-caption-sm) * 1px)}.bs-chatbot-sources-drawer__collapse{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:none;border:none;border-radius:var(--bs-border-radius-100);color:var(--bs-icon-default);cursor:pointer}.bs-chatbot-sources-drawer__collapse:hover{background:var(--bs-chatbot-sources-drawer-collapse-hover)}.bs-chatbot-sources-drawer__collapse:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:1px}.bs-chatbot-sources-drawer__list{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-chatbot-sources-drawer-list-gap);padding:0 var(--bs-chatbot-sources-drawer-list-padding) var(--bs-chatbot-sources-drawer-list-padding);overflow-y:auto}`;
+
+const BsChatbotSourcesDrawer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsCollapse = index.createEvent(this, "bsCollapse");
+    }
+    get el() { return index.getElement(this); }
+    /** The panel title. */
+    heading = 'Sources';
+    /**
+     * Overrides the auto-detected count badge. By default the badge reflects the number of slotted
+     * `bs-source-link` children, so most consumers don't need to set this.
+     */
+    count;
+    /** Fires when the collapse chevron is clicked. The consuming app owns actually hiding the panel. */
+    bsCollapse;
+    slottedCount = 0;
+    onSlotchange = (event) => {
+        const slot = event.target;
+        this.slottedCount = slot.assignedElements().filter(el => el.tagName.toLowerCase() === 'bs-source-link').length;
+    };
+    onCollapseClick = () => {
+        this.bsCollapse.emit();
+    };
+    render() {
+        const displayCount = this.count ?? this.slottedCount;
+        return (index.h("div", { key: '54cb56455b630d5ed30dd2a925728f2803143b17', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, index.h("div", { key: 'd24eabd0ac2c36ec4033a9b5c361aa32225fa78a', class: "bs-chatbot-sources-drawer__header" }, index.h("div", { key: '0bec3fb848552496e1884b4731c5e1964570c70d', class: "bs-chatbot-sources-drawer__title-group" }, index.h("h2", { key: '955389bd4f3ba1950c9af404e5880a6837298384', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (index.h("span", { key: '40d83288bbd257504ef814247c7bd4664df9e169', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), index.h("button", { key: '56a15c64faea80790387d4918843c806b684268b', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, index.h("slot", { key: 'c321f53482f0265357a6a29fc40e0ff3766f0b74', name: "collapse-icon" }, index.h(CaretRightIcon, { key: 'c3d4c17bebd2611b27c3e7f87d359e4b46c41d4f' })))), index.h("div", { key: 'd6c4b8e3660f765112f0c33dd72021af118332d9', part: "list", class: "bs-chatbot-sources-drawer__list" }, index.h("slot", { key: '19759a01d921ed2517cbca2b01ea53741a207b8b', onSlotchange: this.onSlotchange }))));
+    }
+};
+const CaretRightIcon = () => (index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M7.5 4.375L13.125 10L7.5 15.625", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+BsChatbotSourcesDrawer.style = bsChatbotSourcesDrawerCss();
+
+exports.bs_chatbot_sources_drawer = BsChatbotSourcesDrawer;

package/dist/cjs/bs-chatbot-suggestion-button.cjs.entry.js

@@ -17,7 +17,7 @@ const BsChatbotSuggestionButton = class {
         this.bsSelect.emit();
     };
     render() {
-        return (index.h("button", { key: 'fc87dab75d560ce5f6612c2bf61875d574eddd1f', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, index.h("slot", { key: '27ae5b010dcac9ebbb3924c72299cbb5a067ce6b' })));
+        return (index.h("button", { key: '2a5213dc81a29dd68f99717b93e6f5396db5c5da', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, index.h("slot", { key: '28b5ac8ddcdab80fb377a897dc1af62257473385' })));
     }
 };
 BsChatbotSuggestionButton.style = bsChatbotSuggestionButtonCss();

package/dist/cjs/bs-composer-status-banner.cjs.entry.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var index = require('./index-CVh-sqA_.js');
+
+const bsComposerStatusBannerCss = () => `:host{display:block;--bs-composer-status-banner-radius:var(--bs-border-radius-150);--bs-composer-status-banner-padding-x:var(--bs-spacing-150);--bs-composer-status-banner-padding-top:var(--bs-spacing-100);--bs-composer-status-banner-padding-bottom:var(--bs-spacing-200);--bs-composer-status-banner-gap:var(--bs-spacing-100);--bs-composer-status-banner-icon-gap:var(--bs-spacing-75);--bs-composer-status-banner-error-bg:var(--bs-color-error-container);--bs-composer-status-banner-error-text:var(--bs-text-error);--bs-composer-status-banner-error-action-bg:var(--bs-color-error-default);--bs-composer-status-banner-error-action-bg-hover:var(--bs-color-error-hover);--bs-composer-status-banner-info-bg:var(--bs-color-info-container);--bs-composer-status-banner-info-text:var(--bs-text-info);--bs-composer-status-banner-info-action-bg:var(--bs-color-info-default);--bs-composer-status-banner-info-action-bg-hover:var(--bs-color-info-hover);--bs-composer-status-banner-neutral-bg:var(--bs-color-neutral-container);--bs-composer-status-banner-neutral-text:var(--bs-text-default);--bs-composer-status-banner-neutral-action-bg:var(--bs-color-neutral-container);--bs-composer-status-banner-neutral-action-bg-hover:var(--bs-color-neutral-container-hover);--bs-composer-status-banner-neutral-action-border:var(--bs-border-neutral-container);--bs-composer-status-banner-warning-bg:var(--bs-color-warning-container);--bs-composer-status-banner-warning-text:var(--bs-text-warning);--bs-composer-status-banner-warning-action-bg:var(--bs-color-warning-default);--bs-composer-status-banner-warning-action-bg-hover:var(--bs-color-warning-hover);--bs-composer-status-banner-close-hover-bg:var(--bs-color-neutral-container-hover)}.bs-composer-status-banner{box-sizing:border-box;display:flex;align-items:center;gap:var(--bs-composer-status-banner-gap);padding:var(--bs-composer-status-banner-padding-top) var(--bs-composer-status-banner-padding-x) var(--bs-composer-status-banner-padding-bottom);border-radius:var(--bs-composer-status-banner-radius) var(--bs-composer-status-banner-radius) 0 0;font-family:inherit}.bs-composer-status-banner--error{background:var(--bs-composer-status-banner-error-bg);color:var(--bs-composer-status-banner-error-text)}.bs-composer-status-banner--info{background:var(--bs-composer-status-banner-info-bg);color:var(--bs-composer-status-banner-info-text)}.bs-composer-status-banner--neutral{background:var(--bs-composer-status-banner-neutral-bg);color:var(--bs-composer-status-banner-neutral-text)}.bs-composer-status-banner--warning{background:var(--bs-composer-status-banner-warning-bg);color:var(--bs-composer-status-banner-warning-text)}.bs-composer-status-banner__message-group{box-sizing:border-box;display:flex;align-items:center;flex:1 0 0;min-width:0;gap:var(--bs-composer-status-banner-icon-gap)}.bs-composer-status-banner__icon{display:inline-flex;flex-shrink:0;width:20px;height:20px}.bs-composer-status-banner__icon ::slotted(*){display:block;width:100%;height:100%}.bs-composer-status-banner__message{margin:0;flex:1 0 0;min-width:0;font-size:var(--bs-font-size-md);line-height:calc(var(--bs-line-height-body-md) * 1px);word-break:break-word}.bs-composer-status-banner__action{box-sizing:border-box;flex-shrink:0;height:32px;padding:0 var(--bs-spacing-150);border:none;border-radius:var(--bs-border-radius-100);color:var(--bs-text-on-action);font-family:inherit;font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-medium);line-height:calc(var(--bs-line-height-body-sm) * 1px);cursor:pointer;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-composer-status-banner--error .bs-composer-status-banner__action{background:var(--bs-composer-status-banner-error-action-bg)}.bs-composer-status-banner--error .bs-composer-status-banner__action:hover{background:var(--bs-composer-status-banner-error-action-bg-hover)}.bs-composer-status-banner--info .bs-composer-status-banner__action{background:var(--bs-composer-status-banner-info-action-bg)}.bs-composer-status-banner--info .bs-composer-status-banner__action:hover{background:var(--bs-composer-status-banner-info-action-bg-hover)}.bs-composer-status-banner--warning .bs-composer-status-banner__action{background:var(--bs-composer-status-banner-warning-action-bg)}.bs-composer-status-banner--warning .bs-composer-status-banner__action:hover{background:var(--bs-composer-status-banner-warning-action-bg-hover)}.bs-composer-status-banner--neutral .bs-composer-status-banner__action{background:var(--bs-composer-status-banner-neutral-action-bg);border:var(--bs-border-width-thin) solid var(--bs-composer-status-banner-neutral-action-border);color:var(--bs-text-default)}.bs-composer-status-banner--neutral .bs-composer-status-banner__action:hover{background:var(--bs-composer-status-banner-neutral-action-bg-hover)}.bs-composer-status-banner__close{box-sizing:border-box;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:var(--bs-border-radius-100);color:inherit;cursor:pointer;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-composer-status-banner__close:hover{background:var(--bs-composer-status-banner-close-hover-bg)}.bs-composer-status-banner__close svg{width:20px;height:20px}.bs-composer-status-banner__close:focus-visible,.bs-composer-status-banner__action:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:1px}`;
+
+const BsComposerStatusBanner = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsAction = index.createEvent(this, "bsAction");
+        this.bsClose = index.createEvent(this, "bsClose");
+    }
+    /** Which severity/style to render. Drives background, text/icon color, and the action button's color. */
+    type = 'error';
+    /** The message text. */
+    message = 'This is a message';
+    /** Whether the leading icon (default: clock) is rendered. */
+    showIcon = true;
+    /** Whether the "Continue"-style action button is rendered. */
+    showButton = false;
+    /** Label for the action button, only rendered when `showButton` is true. */
+    actionLabel = 'Continue';
+    /** Whether the close button is rendered. */
+    allowClose = true;
+    /** Fires when the action button is clicked. Only relevant when `showButton` is true. */
+    bsAction;
+    /** Fires when the close button is clicked. Only relevant when `allowClose` is true. */
+    bsClose;
+    onActionClick = () => {
+        this.bsAction.emit();
+    };
+    onCloseClick = () => {
+        this.bsClose.emit();
+    };
+    render() {
+        return (index.h("div", { key: 'b51067b9af0210682fc60b5340560bf6ee42d655', class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, index.h("div", { key: 'a6774d57e22e1b39fe0c9add8d96ed1c349bfeae', class: "bs-composer-status-banner__message-group" }, this.showIcon && (index.h("span", { key: '6a2b131a63a2d2cbe33f62519d1602752bc98204', part: "icon", class: "bs-composer-status-banner__icon" }, index.h("slot", { key: '6123c6a61652dfb504cf2e140a012fcba27e7468', name: "icon" }, index.h(ClockIcon, { key: '5415d7c71e2976a552955606e7288a4b806f1dbe' })))), index.h("p", { key: '1580b9f2b53390c32e38763c0cef23cb5d7ffa4c', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (index.h("button", { key: 'bb08fce8f48253787015308bfc66e04835069670', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (index.h("button", { key: 'b9d64c66155cb8c5b884b48a442c9e0d09be9111', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, index.h(CloseIcon, { key: '2779b3af1d5348ee510cd1fe4978cbfbbfb33c5e' })))));
+    }
+};
+const ClockIcon = () => (index.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("circle", { cx: "10", cy: "10", r: "7.25", stroke: "currentColor", "stroke-width": "1.3" }), index.h("path", { d: "M10 5.83V10L12.5 11.67", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const CloseIcon = () => (index.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M15 5L5 15", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M15 15L5 5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+BsComposerStatusBanner.style = bsComposerStatusBannerCss();
+
+exports.bs_composer_status_banner = BsComposerStatusBanner;

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-CVh-sqA_.js');
 
-const bsComposerCss = () => `:host{display:block;--bs-composer-radius:var(--bs-border-radius-150);--bs-composer-button-radius:var(--bs-border-radius-100);--bs-composer-button-size:var(--bs-spacing-600);--bs-composer-bg:var(--bs-input-bg-default);--bs-composer-border:var(--bs-input-border-default);--bs-composer-border-focus:var(--bs-input-border-focus);--bs-composer-action-bg:var(--bs-color-primary-default);--bs-composer-action-bg-hover:var(--bs-color-primary-hover);--bs-composer-action-bg-pressed:var(--bs-color-primary-pressed);--bs-composer-action-bg-disabled:var(--bs-surface-action-disabled);--bs-composer-action-icon:var(--bs-text-on-action);--bs-composer-action-icon-disabled:var(--bs-text-on-disabled);--bs-composer-attach-icon:var(--bs-icon-default);--bs-composer-mic-icon:var(--bs-icon-default);--bs-composer-mic-icon-disabled:var(--bs-icon-disabled);--bs-composer-mic-recording-icon:var(--bs-icon-default);--bs-composer-subtle-hover:var(--bs-color-neutral-container);--bs-composer-subtle-pressed:var(--bs-color-neutral-container-pressed);--bs-composer-waveform-color:var(--bs-border-default)}.bs-composer{box-sizing:border-box;display:flex;flex-direction:column;border:1px solid var(--bs-composer-border);border-radius:var(--bs-composer-radius);background:var(--bs-composer-bg);font-family:inherit}.bs-composer--human{border-style:dashed}.bs-composer:focus-within{border-color:var(--bs-composer-border-focus)}.bs-composer__text-row{display:flex;align-items:center;gap:var(--bs-spacing-150);padding:var(--bs-spacing-150)}.bs-composer__input{flex:1;min-width:0;border:none;outline:none;background:transparent;color:var(--bs-input-text);font-family:inherit;font-size:var(--bs-font-size-md)}.bs-composer__input::placeholder{color:var(--bs-input-placeholder)}.bs-composer__input:disabled{color:var(--bs-input-text-disabled);cursor:not-allowed}.bs-composer__waveform{display:inline-flex;flex:1;min-width:0;align-items:center;justify-content:center;gap:3px;overflow:hidden}.bs-composer__waveform-bar{display:inline-block;flex-shrink:0;width:2.5px;border-radius:1.5px;background:var(--bs-composer-waveform-color);height:var(--bs-composer-bar-height, 6px)}.bs-composer__controls-row{display:flex;align-items:center;gap:var(--bs-spacing-200);padding:var(--bs-spacing-150)}.bs-composer__spacer{flex:1}.bs-composer__attach,.bs-composer__mic,.bs-composer__action{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;padding:0;cursor:pointer;font-family:inherit;border-radius:var(--bs-composer-button-radius);width:var(--bs-composer-button-size);height:var(--bs-composer-button-size);flex-shrink:0;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-composer__attach:focus-visible,.bs-composer__mic:focus-visible,.bs-composer__action:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-composer__attach svg,.bs-composer__mic svg,.bs-composer__action svg{width:24px;height:24px}.bs-composer__attach,.bs-composer__mic{background:transparent}.bs-composer__attach:hover:not(:disabled),.bs-composer__mic:hover:not(:disabled){background:var(--bs-composer-subtle-hover)}.bs-composer__attach:active:not(:disabled),.bs-composer__mic:active:not(:disabled){background:var(--bs-composer-subtle-pressed)}.bs-composer__attach{color:var(--bs-composer-attach-icon)}.bs-composer__mic{color:var(--bs-composer-mic-icon)}.bs-composer__mic--recording{color:var(--bs-composer-mic-recording-icon)}.bs-composer__mic:disabled{color:var(--bs-composer-mic-icon-disabled);cursor:not-allowed}.bs-composer__action{background:var(--bs-composer-action-bg);color:var(--bs-composer-action-icon)}.bs-composer__action:hover:not(:disabled){background:var(--bs-composer-action-bg-hover)}.bs-composer__action:active:not(:disabled){background:var(--bs-composer-action-bg-pressed)}.bs-composer__action:disabled{background:var(--bs-composer-action-bg-disabled);color:var(--bs-composer-action-icon-disabled);cursor:not-allowed}`;
+const bsComposerCss = () => `:host{display:block;--bs-composer-radius:var(--bs-border-radius-150);--bs-composer-button-radius:var(--bs-border-radius-100);--bs-composer-button-size:var(--bs-spacing-600);--bs-composer-bg:var(--bs-input-bg-default);--bs-composer-border:var(--bs-input-border-default);--bs-composer-border-focus:var(--bs-input-border-focus);--bs-composer-action-bg:var(--bs-color-primary-default);--bs-composer-action-bg-hover:var(--bs-color-primary-hover);--bs-composer-action-bg-pressed:var(--bs-color-primary-pressed);--bs-composer-action-bg-disabled:var(--bs-surface-action-disabled);--bs-composer-action-icon:var(--bs-text-on-action);--bs-composer-action-icon-disabled:var(--bs-text-on-disabled);--bs-composer-attach-icon:var(--bs-icon-default);--bs-composer-mic-icon:var(--bs-icon-default);--bs-composer-mic-icon-disabled:var(--bs-icon-disabled);--bs-composer-mic-recording-icon:var(--bs-icon-default);--bs-composer-subtle-hover:var(--bs-color-neutral-container);--bs-composer-subtle-pressed:var(--bs-color-neutral-container-pressed);--bs-composer-waveform-color:var(--bs-border-default)}.bs-composer{box-sizing:border-box;display:flex;flex-direction:column;border:1px solid var(--bs-composer-border);border-radius:var(--bs-composer-radius);background:var(--bs-composer-bg);font-family:inherit}.bs-composer--human{border-style:dashed}.bs-composer:focus-within{border-color:var(--bs-composer-border-focus)}.bs-composer__attachments-row{display:none}.bs-composer__attachments-row--visible{display:block}.bs-composer__text-row{display:flex;align-items:center;gap:var(--bs-spacing-150);padding:var(--bs-spacing-150)}.bs-composer__input{flex:1;min-width:0;border:none;outline:none;background:transparent;color:var(--bs-input-text);font-family:inherit;font-size:var(--bs-font-size-md)}.bs-composer__input::placeholder{color:var(--bs-input-placeholder)}.bs-composer__input:disabled{color:var(--bs-input-text-disabled);cursor:not-allowed}.bs-composer__waveform{display:inline-flex;flex:1;min-width:0;align-items:center;justify-content:center;gap:3px;overflow:hidden}.bs-composer__waveform-bar{display:inline-block;flex-shrink:0;width:2.5px;border-radius:1.5px;background:var(--bs-composer-waveform-color);height:var(--bs-composer-bar-height, 6px)}.bs-composer__controls-row{display:flex;align-items:center;gap:var(--bs-spacing-200);padding:var(--bs-spacing-150)}.bs-composer__spacer{flex:1}.bs-composer__attach,.bs-composer__mic,.bs-composer__action{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;padding:0;cursor:pointer;font-family:inherit;border-radius:var(--bs-composer-button-radius);width:var(--bs-composer-button-size);height:var(--bs-composer-button-size);flex-shrink:0;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-composer__attach:focus-visible,.bs-composer__mic:focus-visible,.bs-composer__action:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-composer__attach svg,.bs-composer__mic svg,.bs-composer__action svg{width:24px;height:24px}.bs-composer__attach,.bs-composer__mic{background:transparent}.bs-composer__attach:hover:not(:disabled),.bs-composer__mic:hover:not(:disabled){background:var(--bs-composer-subtle-hover)}.bs-composer__attach:active:not(:disabled),.bs-composer__mic:active:not(:disabled){background:var(--bs-composer-subtle-pressed)}.bs-composer__attach{color:var(--bs-composer-attach-icon)}.bs-composer__mic{color:var(--bs-composer-mic-icon)}.bs-composer__mic--recording{color:var(--bs-composer-mic-recording-icon)}.bs-composer__mic:disabled{color:var(--bs-composer-mic-icon-disabled);cursor:not-allowed}.bs-composer__action{background:var(--bs-composer-action-bg);color:var(--bs-composer-action-icon)}.bs-composer__action:hover:not(:disabled){background:var(--bs-composer-action-bg-hover)}.bs-composer__action:active:not(:disabled){background:var(--bs-composer-action-bg-pressed)}.bs-composer__action:disabled{background:var(--bs-composer-action-bg-disabled);color:var(--bs-composer-action-icon-disabled);cursor:not-allowed}`;
 
 const DEFAULT_PLACEHOLDERS = {
     ai: 'Ask Genie something...',
@@ -25,6 +25,7 @@ const BsComposer = class {
         this.bsAttach = index.createEvent(this, "bsAttach");
         this.bsMicToggle = index.createEvent(this, "bsMicToggle");
     }
+    get el() { return index.getElement(this); }
     /**
      * Which flavor of composer this is: changes the *default* placeholder text (set `placeholder`
      * directly to override it) and, per the Figma design, renders the container border dashed
@@ -49,6 +50,10 @@ const BsComposer = class {
      * accessible name -- set it in every real usage.
      */
     ariaLabel = null;
+    /** Tracks whether the `attachments` slot has assigned content, so the row above the text field
+     * (padding, border) only takes up space when a consumer has actually put something there --
+     * same reasoning/pattern as `hasIcon`/`hasLabel` in `bs-attachment`. */
+    hasAttachments = false;
     /** Fires on every keystroke in the text field, with the current value. */
     bsInput;
     /** Fires when the primary action button is clicked while `state="idle"`. */
@@ -62,6 +67,15 @@ const BsComposer = class {
     /** Fires when the mic/stop-recording button is clicked. The consumer decides what that means
      * (e.g. start recording when idle/generating, or stop recording when `state="recording"`). */
     bsMicToggle;
+    /** Computes the initial `hasAttachments` state directly from the host's light DOM children,
+     * before first render -- same reasoning as `bs-attachment`'s `componentWillLoad`: `slotchange`
+     * alone never fires for a slot that starts out empty and stays that way. */
+    componentWillLoad() {
+        this.hasAttachments = Array.from(this.el.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === 'attachments');
+    }
+    onAttachmentsSlotchange = (ev) => {
+        this.hasAttachments = ev.target.assignedNodes().length > 0;
+    };
     onInput = (ev) => {
         const value = ev.target.value;
         this.bsInput.emit(value);
@@ -101,7 +115,7 @@ const BsComposer = class {
         const placeholder = this.placeholder ?? DEFAULT_PLACEHOLDERS[this.variant];
         const disabled = this.state === 'disabled';
         const recording = this.state === 'recording';
-        return (index.h("div", { key: '04c250520759948faa89bd625646a62c79cc6cee', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, index.h("div", { key: '8d5d99b90141d3dbeff1b31851cbbb5eaae3d920', class: "bs-composer__text-row" }, index.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 })), index.h("div", { key: '8a733762c56ae3f4de7f2af1d89fb05d521b1d17', class: "bs-composer__controls-row" }, index.h("button", { key: 'b4cd13546ec447f2650a02f43dc2fc0b6d65c8ef', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, index.h(PlusIcon, { key: 'af8da06a2550d5c37d3737b145ad70c006e1ce66' })), recording ? (index.h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (index.h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (index.h("span", { class: "bs-composer__spacer" })), index.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 ? index.h(StopIcon, null) : index.h(MicIcon, null)), index.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()), index.h("slot", { key: '6779413b48314161a75ec75be273e72fe4d622c3', name: "actions-end" }))));
+        return (index.h("div", { key: '5b367f64f2cfe04d7815b52d6abc3baebf46453e', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, index.h("div", { key: 'f1e7dbeb16e8f2cd0b4e2345f6c5fc03bcc5177c', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, index.h("slot", { key: '6e59f2f3857c81a132c5873d9a32dbed27eb2c02', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), index.h("div", { key: '79a0a03a7f66b654f5ab8379447cf00459c7a6c3', class: "bs-composer__text-row" }, index.h("input", { key: 'b9560af8433d186fdadd5b05368290d077c5e8ce', part: "input", class: "bs-composer__input", type: "text", value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput })), index.h("div", { key: '5b9a8edd0412e1a86efd33afae37fb73559a89f6', class: "bs-composer__controls-row" }, index.h("button", { key: '5c405e009e9f61902ca6623e09efa238e71737a3', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, index.h(PlusIcon, { key: '5832b29579d3c8c855237f286366944aeb6553f6' })), recording ? (index.h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (index.h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (index.h("span", { class: "bs-composer__spacer" })), index.h("button", { key: 'b4006fe5d452d02d0093d1dba0b65e6f33e5a65b', 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 ? index.h(StopIcon, null) : index.h(MicIcon, null)), index.h("button", { key: 'b647f1dd0c40dc795b96da5cad695300b0c9dfd3', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()), index.h("slot", { key: '2c78b5641091024925e84ca1a779ac1fc37fc0ae', name: "actions-end" }))));
     }
     static get delegatesFocus() { return true; }
 };

package/dist/cjs/bs-data-table.cjs.entry.js

@@ -43,11 +43,11 @@ const BsDataTable = class {
         this.bsRowSelect.emit({ id: row.id, selected });
     };
     render() {
-        return (index.h("table", { key: '8276a72f6539690dd8189cd29e42993c3d61862c', part: "table", class: "bs-data-table" }, index.h("thead", { key: '2d3e42222eec0bcbe3d06f26f7a3ae53dd5ccdc0', part: "head" }, index.h("tr", { key: '45994ea59d9a1a347bb8abdf25d7b1b919822a61' }, this.selectable && index.h("th", { key: '05d5efa74feee1545e1c4b9dfc45acd7ffd10e6a', class: "bs-data-table__select-col" }), this.columns.map(column => {
+        return (index.h("table", { key: '9b16ade44ff85120e9629722de8e8c1738835c1b', part: "table", class: "bs-data-table" }, index.h("thead", { key: '644eed606e68782ada42c289bb7bfc8d6de4affb', part: "head" }, index.h("tr", { key: '4e4ea75018796c77f14703c1c1402022f8c8cde9' }, this.selectable && index.h("th", { key: '85460f7c2eab6ad0f3604f72bcd81a4aa8699c03', 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 (index.h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (index.h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && index.h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
-        }))), index.h("tbody", { key: '9c1dc006341b63e5d22df655836f326ba27e7b9d', part: "body" }, this.rows.map(row => (index.h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (index.h("td", { class: "bs-data-table__select-col" }, index.h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
+        }))), index.h("tbody", { key: '024cb8a25cc6471e7074d119b78e6a8e22f86450', part: "body" }, this.rows.map(row => (index.h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (index.h("td", { class: "bs-data-table__select-col" }, index.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.