@brandsync/wc 0.0.6 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +133 -1
- package/dist/brandsync-wc/brandsync-wc.esm.js +1 -1
- package/dist/brandsync-wc/{p-6648d251.entry.js → p-5a0fe72e.entry.js} +1 -1
- package/dist/brandsync-wc/{p-4d999a8d.entry.js → p-6abdfaf0.entry.js} +1 -1
- package/dist/brandsync-wc/{p-27288299.entry.js → p-76eca100.entry.js} +1 -1
- package/dist/brandsync-wc/{p-4a0da8e9.entry.js → p-a12d0a60.entry.js} +1 -1
- package/dist/brandsync-wc/p-bfd09c98.entry.js +1 -0
- package/dist/brandsync-wc/p-c63d16e1.entry.js +1 -0
- package/dist/brandsync-wc/{p-b24c455f.entry.js → p-dd0fea0e.entry.js} +1 -1
- package/dist/brandsync-wc/{p-518b02bf.entry.js → p-f5f443e2.entry.js} +1 -1
- package/dist/brandsync-wc/{p-1dc6d7f5.entry.js → p-f88d9a6e.entry.js} +1 -1
- package/dist/cjs/brandsync-wc.cjs.js +1 -1
- package/dist/cjs/bs-ai-thinking.cjs.entry.js +34 -0
- package/dist/cjs/bs-button-skeleton.cjs.entry.js +1 -1
- package/dist/cjs/bs-chatbot-header.cjs.entry.js +2 -2
- package/dist/cjs/bs-chatbot-response-action.cjs.entry.js +1 -1
- package/dist/cjs/bs-chatbot-suggestion-button.cjs.entry.js +1 -1
- package/dist/cjs/bs-input.cjs.entry.js +2 -2
- package/dist/cjs/bs-menu-item.cjs.entry.js +1 -1
- package/dist/cjs/bs-menu.cjs.entry.js +1 -1
- package/dist/cjs/bs-tooltip.cjs.entry.js +24 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +3 -1
- package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.cmp.test.js +28 -0
- package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.css +60 -0
- package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.js +72 -0
- package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.stories.js +21 -0
- package/dist/collection/components/bs-ai-thinking/genie-mark-icon.js +14 -0
- package/dist/collection/components/bs-button-skeleton/bs-button-skeleton.js +1 -1
- package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.css +33 -0
- package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.js +9 -1
- package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.js +1 -1
- package/dist/collection/components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.js +1 -1
- package/dist/collection/components/bs-input/bs-input.js +2 -2
- package/dist/collection/components/bs-menu/bs-menu.js +1 -1
- package/dist/collection/components/bs-menu-item/bs-menu-item.js +1 -1
- package/dist/collection/components/bs-tooltip/bs-tooltip.cmp.test.js +16 -0
- package/dist/collection/components/bs-tooltip/bs-tooltip.css +45 -0
- package/dist/collection/components/bs-tooltip/bs-tooltip.js +83 -0
- package/dist/collection/components/bs-tooltip/bs-tooltip.stories.js +26 -0
- package/dist/components/bs-ai-thinking.d.ts +11 -0
- package/dist/components/bs-ai-thinking.js +1 -0
- package/dist/components/bs-button-skeleton.js +1 -1
- package/dist/components/bs-chatbot-header.js +1 -1
- package/dist/components/bs-chatbot-response-action.js +1 -1
- package/dist/components/bs-chatbot-suggestion-button.js +1 -1
- package/dist/components/bs-input.js +1 -1
- package/dist/components/bs-menu-item.js +1 -1
- package/dist/components/bs-menu.js +1 -1
- package/dist/components/bs-tooltip.d.ts +11 -0
- package/dist/components/bs-tooltip.js +1 -0
- package/dist/components/p-CoC4LQCI.js +1 -0
- package/dist/esm/brandsync-wc.js +1 -1
- package/dist/esm/bs-ai-thinking.entry.js +32 -0
- package/dist/esm/bs-button-skeleton.entry.js +1 -1
- package/dist/esm/bs-chatbot-header.entry.js +2 -2
- package/dist/esm/bs-chatbot-response-action.entry.js +1 -1
- package/dist/esm/bs-chatbot-suggestion-button.entry.js +1 -1
- package/dist/esm/bs-input.entry.js +2 -2
- package/dist/esm/bs-menu-item.entry.js +1 -1
- package/dist/esm/bs-menu.entry.js +1 -1
- package/dist/esm/bs-tooltip.entry.js +22 -0
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/bs-ai-thinking/bs-ai-thinking.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-ai-thinking/bs-ai-thinking.d.ts +32 -0
- package/dist/types/components/bs-ai-thinking/bs-ai-thinking.stories.d.ts +10 -0
- package/dist/types/components/bs-ai-thinking/genie-mark-icon.d.ts +1 -0
- package/dist/types/components/bs-chatbot-header/bs-chatbot-header.d.ts +8 -0
- package/dist/types/components/bs-tooltip/bs-tooltip.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-tooltip/bs-tooltip.d.ts +44 -0
- package/dist/types/components/bs-tooltip/bs-tooltip.stories.d.ts +9 -0
- package/dist/types/components.d.ts +272 -0
- package/package.json +1 -1
|
@@ -87,7 +87,7 @@ const GENIE_LOGO_SVG = `<svg width="99" height="35" viewBox="0 0 99 35" fill="no
|
|
|
87
87
|
</defs>
|
|
88
88
|
</svg>`;
|
|
89
89
|
|
|
90
|
-
const bsChatbotHeaderCss = () => `:host{display:block;--bs-chatbot-header-bg:var(--bs-surface-base);--bs-chatbot-header-border:var(--bs-border-default);--bs-chatbot-header-padding-top:var(--bs-spacing-200);--bs-chatbot-header-padding-bottom:var(--bs-spacing-100);--bs-chatbot-header-padding-x:var(--bs-margin-fluid);--bs-chatbot-header-gap:var(--bs-navigation-header-gap);--bs-chatbot-header-button-size:var(--bs-spacing-600);--bs-chatbot-header-button-radius:var(--bs-border-radius-100);--bs-chatbot-header-button-hover:var(--bs-color-neutral-container);--bs-chatbot-header-button-pressed:var(--bs-color-neutral-container-pressed);--bs-chatbot-header-icon:var(--bs-icon-default)}.bs-chatbot-header{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--bs-chatbot-header-gap);background:var(--bs-chatbot-header-bg);border-bottom:1px solid var(--bs-chatbot-header-border);padding:var(--bs-chatbot-header-padding-top) var(--bs-chatbot-header-padding-x) var(--bs-chatbot-header-padding-bottom);font-family:inherit}.bs-chatbot-header__logo{display:block;width:99px;height:35px;flex-shrink:0}.bs-chatbot-header__logo svg{display:block;width:100%;height:100%}.bs-chatbot-header__actions{display:flex;align-items:center;flex-shrink:0}.bs-chatbot-header__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-header-icon);font-family:inherit;border-radius:var(--bs-chatbot-header-button-radius);width:var(--bs-chatbot-header-button-size);height:var(--bs-chatbot-header-button-size);flex-shrink:0;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-chatbot-header__button:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-chatbot-header__button svg{width:24px;height:24px}.bs-chatbot-header__button:hover{background:var(--bs-chatbot-header-button-hover)}.bs-chatbot-header__button:active{background:var(--bs-chatbot-header-button-pressed)}`;
|
|
90
|
+
const bsChatbotHeaderCss = () => `:host{display:block;--bs-chatbot-header-bg:var(--bs-surface-base);--bs-chatbot-header-border:var(--bs-border-default);--bs-chatbot-header-padding-top:var(--bs-spacing-200);--bs-chatbot-header-padding-bottom:var(--bs-spacing-100);--bs-chatbot-header-padding-x:var(--bs-margin-fluid);--bs-chatbot-header-gap:var(--bs-navigation-header-gap);--bs-chatbot-header-actions-gap:var(--bs-spacing-100);--bs-chatbot-header-button-size:var(--bs-spacing-600);--bs-chatbot-header-button-radius:var(--bs-border-radius-100);--bs-chatbot-header-button-hover:var(--bs-color-neutral-container);--bs-chatbot-header-button-pressed:var(--bs-color-neutral-container-pressed);--bs-chatbot-header-icon:var(--bs-icon-default)}.bs-chatbot-header{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--bs-chatbot-header-gap);background:var(--bs-chatbot-header-bg);border-bottom:1px solid var(--bs-chatbot-header-border);padding:var(--bs-chatbot-header-padding-top) var(--bs-chatbot-header-padding-x) var(--bs-chatbot-header-padding-bottom);font-family:inherit}.bs-chatbot-header__logo{display:block;width:99px;height:35px;flex-shrink:0}.bs-chatbot-header__logo svg{display:block;width:100%;height:100%}.bs-chatbot-header__actions{display:flex;align-items:center;gap:var(--bs-chatbot-header-actions-gap);flex-shrink:0}.bs-chatbot-header__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-header-icon);font-family:inherit;border-radius:var(--bs-chatbot-header-button-radius);width:var(--bs-chatbot-header-button-size);height:var(--bs-chatbot-header-button-size);flex-shrink:0;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-chatbot-header__button:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-chatbot-header__button svg{width:24px;height:24px}.bs-chatbot-header__button:hover{background:var(--bs-chatbot-header-button-hover)}.bs-chatbot-header__button:active{background:var(--bs-chatbot-header-button-pressed)}.bs-chatbot-header__tooltip-wrapper{position:relative;display:inline-flex}.bs-chatbot-header__tooltip{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:var(--bs-spacing-100);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--bs-duration-fast) var(--bs-easing-standard);transition-delay:0s;white-space:nowrap;z-index:1}.bs-chatbot-header__tooltip-wrapper:hover .bs-chatbot-header__tooltip,.bs-chatbot-header__tooltip-wrapper:focus-within .bs-chatbot-header__tooltip{opacity:1;visibility:visible;transition-delay:var(--bs-duration-slow)}`;
|
|
91
91
|
|
|
92
92
|
const BsChatbotHeader = class {
|
|
93
93
|
constructor(hostRef) {
|
|
@@ -130,7 +130,7 @@ const BsChatbotHeader = class {
|
|
|
130
130
|
this.bsClose.emit();
|
|
131
131
|
};
|
|
132
132
|
render() {
|
|
133
|
-
return (h("div", { key: '
|
|
133
|
+
return (h("div", { key: '9ae798e8d79c992933228383823d3160dc660f90', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: 'c80243df90e7ed74cea0679b94c139fc6bba8cc5', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: 'ebcfc959d4d7c606866870f1f107c4fc771d25b1', class: "bs-chatbot-header__actions" }, h("span", { key: '153e84f8e63faf67c180338da94e86d2b28da945', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '76b48c5dcaf482dfbafacf8125a5c2908bbc27c3', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: 'b09177f97df5a1ddb20374d260858f0ae3afea12', name: "new-chat-icon" }, h(NewChatIcon, { key: 'a1907a4fd8730c83af15ad7dbf8ec1d784fac88d' }))), h("bs-tooltip", { key: '77b453884b760bf4687b26adbb06f6220c49dbca', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: '8b775f74bd28efa4b812f959658cae97ffce085f', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '1a8c279aa94175b2d90654aa4d3c959273147a7c', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: '8660d04481d3d846731e83b23c865e2bab1cbea7', name: "history-icon" }, h(HistoryIcon, { key: 'a34ed34be60fbc2869b34480342007aa59700177' }))), h("bs-tooltip", { key: '7ba408053f7b0e88330720d3dff4f188f233f46a', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: '4b4d24319a9b5b2085c8180748f72bfcc532a942', class: "bs-chatbot-header__tooltip-wrapper" }, 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 }, h("slot", { key: '460b3c1d20f2a48945df6385e3ebf7f54577881e', name: "expand-icon" }, h(ExpandIcon, { key: '890b772fff27703a7d3da00ff4ad5f2844714075' }))), h("bs-tooltip", { key: 'b43756a31171e14b70bc80574741b28b4dad2c98', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '2023c06216607d6205ec3a0a13d2b06a10babae5', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '1bdc7a342af4b6b37121edb9a93c30ba659d95bf', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: '1c47b5499cf15ca73aa8a9dab792bf72c441ff38', name: "close-icon" }, h(CloseIcon, { key: '2ce1bad2bca776187e238647c02e3cc4b68018de' }))), h("bs-tooltip", { key: 'd7a3016e6eab564ab0cd9f5ab1d79be2b6408c17', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
|
|
134
134
|
}
|
|
135
135
|
};
|
|
136
136
|
const NewChatIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M12 15H9V12L18 3L21 6L12 15Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M15.75 5.25L18.75 8.25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), 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" })));
|
|
@@ -76,7 +76,7 @@ const BsChatbotResponseAction = class {
|
|
|
76
76
|
};
|
|
77
77
|
render() {
|
|
78
78
|
const hasSources = !!this.sourcesCount && this.sourcesCount > 0;
|
|
79
|
-
return (h("div", { key: '
|
|
79
|
+
return (h("div", { key: 'd372000276bedcf0bd64015d955a4ed4ff1c83cc', class: "bs-chatbot-response-action" }, h("button", { key: '6fff591650e4f6114a653ff37bfebe100d4874b7', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: 'e92d29243291141fd63120b4bc6a5024f1908066', name: "like-icon" }, h(ThumbsUpIcon, { key: 'd1a7e8d922f5e712e48e19c6176fdb60ac511240' }))), h("button", { key: '7115ff6c49c5388440f0fe8a352ddd4459a5f8ed', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: 'd3642d52b90cbd3f6c60d8b8ead3d14fab29f531', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '8cff196faabd164cf023bfa8bac02f3455885261' }))), h("button", { key: 'd32e2ebce71ab91327d7ad7406ae581b2ff98443', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: '1c0459f9fb78202d41e5bf7b3bf5a11ac9c00ecd', name: "copy-icon" }, h(CopyIcon, { key: 'b3d8e9f3cb2125c26967156f046ce3caf44ab8b1' }))), h("button", { key: 'c14f8a2580018edac6b16c82be5b339c7a4033af', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: 'cf67332b681da43a7a305909e14a16bf6a3ca962', name: "regenerate-icon" }, h(RegenerateIcon, { key: '76b5b9c39624007532b2c2b7f20554f12cd8eee4' }))), h("div", { key: 'b62694c42bf23484362e188b6b74559810fce693', class: "bs-chatbot-response-action__menu-wrapper" }, 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 }, h("slot", { key: 'f11d837af777a04cc9031921f92b57e139758f2c', name: "menu-icon" }, h(MenuIcon, { key: '3c0c0a70edcf1e8c817a121fce315b8a747ee8e4' }))), this.menuOpen && (h("div", { key: '5a4848466caecf26ce3797b14609932e76ca653d', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: 'f79ac9bcde08eadd0a904223f6f13c9850066827', name: "menu" })))), hasSources && (h("button", { key: 'ef9663bbbb7f74482743177bdfa8053575c3330e', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'f848fd2b5e545d186a7f337c2d0fe0f300c567f7', name: "sources-icon" }, h(SourcesIcon, { key: '7a8be099bcf97209b30c1b941b1f13691d9c07d3' })), h("span", { key: 'e91be28b3d36b1cc3a91c17218ca5ea77938f887', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
|
|
80
80
|
}
|
|
81
81
|
};
|
|
82
82
|
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" })));
|
|
@@ -15,7 +15,7 @@ const BsChatbotSuggestionButton = class {
|
|
|
15
15
|
this.bsSelect.emit();
|
|
16
16
|
};
|
|
17
17
|
render() {
|
|
18
|
-
return (h("button", { key: '
|
|
18
|
+
return (h("button", { key: 'fc87dab75d560ce5f6612c2bf61875d574eddd1f', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '27ae5b010dcac9ebbb3924c72299cbb5a067ce6b' })));
|
|
19
19
|
}
|
|
20
20
|
};
|
|
21
21
|
BsChatbotSuggestionButton.style = bsChatbotSuggestionButtonCss();
|
|
@@ -28,10 +28,10 @@ const BsInput = class {
|
|
|
28
28
|
this.bsChange.emit(value);
|
|
29
29
|
};
|
|
30
30
|
render() {
|
|
31
|
-
return (h("div", { key: '
|
|
31
|
+
return (h("div", { key: '2c6b38b4594ccde2536515fcd252831bacb6aaeb', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
|
|
32
32
|
// "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
|
|
33
33
|
// to this instance's own shadow root, so it can never collide with another bs-input.
|
|
34
|
-
h("label", { key: '
|
|
34
|
+
h("label", { key: '9df0fae013470d8a77b0cc6288c8178b1ac62e0d', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label)), h("input", { key: 'a6ddc857d33c4e51a4c64b422a7df5b6261f5180', 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));
|
|
35
35
|
}
|
|
36
36
|
static get delegatesFocus() { return true; }
|
|
37
37
|
};
|
|
@@ -19,7 +19,7 @@ const BsMenuItem = class {
|
|
|
19
19
|
this.bsSelect.emit();
|
|
20
20
|
};
|
|
21
21
|
render() {
|
|
22
|
-
return (h("button", { key: '
|
|
22
|
+
return (h("button", { key: '6083688b1903b514b0ed6a95a7ee2e64766a94f1', type: "button", part: "item", role: "menuitem", class: "bs-menu-item", onClick: this.onClick }, h("span", { key: '65f3df1d22c0e44ed77073de68ce36631b80a31e', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: 'a41d500967d857cc5e326194c422992aeab74055', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'ab17fb6fd7014b7ec74a2eb93de300812a610136', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '9b41e86d17fecd71cfe0ff1e5c735aaa143a8d12' }))));
|
|
23
23
|
}
|
|
24
24
|
};
|
|
25
25
|
BsMenuItem.style = bsMenuItemCss();
|
|
@@ -7,7 +7,7 @@ const BsMenu = class {
|
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h("div", { key: '
|
|
10
|
+
return (h("div", { key: 'a48826382a6a13a5047cb893e29fc2f09749b280', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'cb4e1eb5988a95f016dc61f698d1c6aadf2d3467' })));
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
13
|
BsMenu.style = bsMenuCss();
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { r as registerInstance, h } from './index-nLORuTUY.js';
|
|
2
|
+
|
|
3
|
+
const bsTooltipCss = () => `:host{display:inline-block;--bs-tooltip-bg:var(--bs-surface-inverse);--bs-tooltip-color:var(--bs-text-inverse);--bs-tooltip-radius:var(--bs-border-radius-50);--bs-tooltip-padding-x:var(--bs-spacing-200);--bs-tooltip-padding-y:var(--bs-spacing-100);--bs-tooltip-max-width:200px;--bs-tooltip-shadow:-1px 4px 8px rgba(0, 0, 0, 0.08);--bs-tooltip-font-size:var(--bs-font-size-sm);--bs-tooltip-line-height:var(--bs-line-height-body-sm)}.bs-tooltip{position:relative;display:inline-block}.bs-tooltip__bubble{box-sizing:border-box;max-width:var(--bs-tooltip-max-width);padding:var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);background:var(--bs-tooltip-bg);color:var(--bs-tooltip-color);border-radius:var(--bs-tooltip-radius);box-shadow:var(--bs-tooltip-shadow);font-family:inherit;font-size:var(--bs-tooltip-font-size);line-height:calc(var(--bs-tooltip-line-height) * 1px)}.bs-tooltip__arrow{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:8px;height:8px;background:var(--bs-tooltip-bg);clip-path:polygon(50% 0, 0% 100%, 100% 100%)}`;
|
|
4
|
+
|
|
5
|
+
const BsTooltip = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Which edge of the bubble the arrow points from, and therefore which side of a trigger the
|
|
11
|
+
* bubble should be placed on. `'top'` is the only value implemented -- it is the only variant
|
|
12
|
+
* confirmed from the Figma "EG Tooltip" component (arrow at the top of the bubble, pointing
|
|
13
|
+
* up). Bottom/left/right variants aren't implemented pending further Figma design confirmation.
|
|
14
|
+
*/
|
|
15
|
+
placement = 'top';
|
|
16
|
+
render() {
|
|
17
|
+
return (h("div", { key: '784b59f0a817e4756e7954588cd5e42a52508262', class: "bs-tooltip" }, h("span", { key: 'b564933fb13a90ab5482c4fde14c99b7431216e5', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: 'ffb9c4d052d7b8ce618ec825d3989b6311c90c03', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: 'cb6cdfe74feb87b23b90da251aa08e76f3bcf0ff' }))));
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
BsTooltip.style = bsTooltipCss();
|
|
21
|
+
|
|
22
|
+
export { BsTooltip as bs_tooltip };
|
package/dist/esm/loader.js
CHANGED
|
@@ -4,7 +4,7 @@ export { s as setNonce } from './index-nLORuTUY.js';
|
|
|
4
4
|
const defineCustomElements = async (win, options) => {
|
|
5
5
|
if (typeof window === 'undefined') return undefined;
|
|
6
6
|
await globalScripts();
|
|
7
|
-
return bootstrapLazy([["bs-badge",[[769,"bs-badge",{"variant":[1]}]]],["bs-button",[[785,"bs-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasEndIcon":[32],"hasLabel":[32]}]]],["bs-button-skeleton",[[513,"bs-button-skeleton",{"size":[1]}]]],["bs-card",[[769,"bs-card",{"surface":[1]}]]],["bs-chatbot-
|
|
7
|
+
return bootstrapLazy([["bs-chatbot-header",[[769,"bs-chatbot-header",{"heading":[1],"expanded":[1540]}]]],["bs-ai-thinking",[[513,"bs-ai-thinking",{"label":[1]}]]],["bs-badge",[[769,"bs-badge",{"variant":[1]}]]],["bs-button",[[785,"bs-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasEndIcon":[32],"hasLabel":[32]}]]],["bs-button-skeleton",[[513,"bs-button-skeleton",{"size":[1]}]]],["bs-card",[[769,"bs-card",{"surface":[1]}]]],["bs-chatbot-response-action",[[769,"bs-chatbot-response-action",{"sourcesCount":[2,"sources-count"],"menuOpen":[1540,"menu-open"]},[[4,"click","onDocumentClick"],[4,"keydown","onKeydown"]]]]],["bs-chatbot-suggestion-button",[[769,"bs-chatbot-suggestion-button",{"disabled":[4]}]]],["bs-composer",[[785,"bs-composer",{"variant":[1],"placeholder":[1],"value":[1],"state":[1],"ariaLabel":[1,"aria-label"]}]]],["bs-data-table",[[513,"bs-data-table",{"columns":[16],"rows":[16],"sortColumn":[1,"sort-column"],"sortDirection":[1,"sort-direction"],"selectable":[4],"cellRenderer":[16],"selectedIds":[32]}]]],["bs-input",[[529,"bs-input",{"value":[1],"type":[1],"label":[1],"placeholder":[1],"description":[1],"error":[1],"disabled":[4]}]]],["bs-menu",[[257,"bs-menu"]]],["bs-menu-item",[[769,"bs-menu-item",{"hasIcon":[32]}]]],["bs-modal",[[769,"bs-modal",{"open":[1540],"heading":[1],"size":[1],"hasFooter":[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]],["bs-tooltip",[[769,"bs-tooltip",{"placement":[1]}]]]], options);
|
|
8
8
|
};
|
|
9
9
|
|
|
10
10
|
export { defineCustomElements };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A small inline status indicator for Genie AI surfaces: the colorful Genie mark next to a label
|
|
3
|
+
* (e.g. "Retrieving", "Thinking", "Searching") whose text pulses in a slow breathing loop while
|
|
4
|
+
* an operation is in progress.
|
|
5
|
+
*
|
|
6
|
+
* ## When to use
|
|
7
|
+
* - Inline in a Genie AI chat transcript to show what the assistant is currently doing while a
|
|
8
|
+
* response is being generated (retrieving context, searching, thinking).
|
|
9
|
+
*
|
|
10
|
+
* ## When not to use
|
|
11
|
+
* - A blocking/full-panel loading state -- this is a small inline indicator, not a spinner overlay.
|
|
12
|
+
*
|
|
13
|
+
* The label's pulse animation reproduces Figma's exact keyframe track (a plain opacity
|
|
14
|
+
* fade-in/hold/reset with the source's own cubic-bezier easing) rather than an invented
|
|
15
|
+
* shimmer-sweep -- the source design only specifies this one animation.
|
|
16
|
+
*
|
|
17
|
+
* @part icon - The Genie mark icon.
|
|
18
|
+
* @part label - The status label text.
|
|
19
|
+
* @prop --bs-ai-thinking-gap - Gap between icon and label. Aliased to `--bs-spacing-100`.
|
|
20
|
+
* @prop --bs-ai-thinking-icon-size - Width/height of the icon.
|
|
21
|
+
* @prop --bs-ai-thinking-text - Label color. Aliased to `--bs-text-muted`.
|
|
22
|
+
* @prop --bs-ai-thinking-font-size - Label font size. Aliased to `--bs-font-size-md`.
|
|
23
|
+
* @prop --bs-ai-thinking-line-height - Label line height. Aliased to `--bs-line-height-body-md`.
|
|
24
|
+
* @prop --bs-ai-thinking-cycle-duration - Duration of one pulse loop. Figma specifies exactly 2s,
|
|
25
|
+
* longer than any `--bs-duration-*` token (max `--bs-duration-slower` is 500ms), so this is
|
|
26
|
+
* aliased directly to the literal value.
|
|
27
|
+
*/
|
|
28
|
+
export declare class BsAiThinking {
|
|
29
|
+
/** The status text shown next to the icon, e.g. "Retrieving", "Thinking", "Searching". */
|
|
30
|
+
label: string;
|
|
31
|
+
render(): any;
|
|
32
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
+
interface BsAiThinkingArgs {
|
|
3
|
+
label: string;
|
|
4
|
+
}
|
|
5
|
+
declare const meta: Meta<BsAiThinkingArgs>;
|
|
6
|
+
export default meta;
|
|
7
|
+
type Story = StoryObj<BsAiThinkingArgs>;
|
|
8
|
+
export declare const Default: Story;
|
|
9
|
+
export declare const Thinking: Story;
|
|
10
|
+
export declare const Searching: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const GENIE_MARK_ICON = "data:image/png;base64,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";
|
|
@@ -10,6 +10,13 @@ import { EventEmitter } from '../../stencil-public-runtime';
|
|
|
10
10
|
* - A generic app/page header — this component's layout and actions are purpose-built for the
|
|
11
11
|
* Genie chat panel, not a general navigation bar.
|
|
12
12
|
*
|
|
13
|
+
* Each action button shows a `bs-tooltip` (placement="top", i.e. positioned below the button with
|
|
14
|
+
* its arrow pointing up toward it -- fits naturally since this header sits at the top of a panel)
|
|
15
|
+
* on hover/focus, driven by plain CSS (`:hover`/`:focus-within` on a wrapper, no extra JS state).
|
|
16
|
+
* The tooltip is `aria-hidden` since it's a purely visual reinforcement of each button's existing
|
|
17
|
+
* `aria-label` -- screen readers already get the accessible name from the button itself, so the
|
|
18
|
+
* tooltip doesn't need to be (and shouldn't be) announced a second time.
|
|
19
|
+
*
|
|
13
20
|
* @slot new-chat-icon - Overrides the default "New chat" button icon.
|
|
14
21
|
* @slot history-icon - Overrides the default "History" button icon.
|
|
15
22
|
* @slot expand-icon - Overrides the default "Expand"/"Collapse" button icon (rendered regardless of `expanded` -- there is no separate confirmed "collapsed" glyph in the design, so swap it yourself via this slot if you need one).
|
|
@@ -25,6 +32,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
|
|
|
25
32
|
* @prop --bs-chatbot-header-padding-bottom - Aliased to `--bs-spacing-100`.
|
|
26
33
|
* @prop --bs-chatbot-header-padding-x - Aliased to `--bs-margin-fluid`.
|
|
27
34
|
* @prop --bs-chatbot-header-gap - Gap between the logo and the button group. Aliased to `--bs-navigation-header-gap`.
|
|
35
|
+
* @prop --bs-chatbot-header-actions-gap - Gap between the individual action buttons. Aliased to `--bs-spacing-100`.
|
|
28
36
|
* @prop --bs-chatbot-header-button-size - Width/height of each icon button. Aliased to `--bs-spacing-600`.
|
|
29
37
|
* @prop --bs-chatbot-header-button-radius - Corner radius of each icon button. Aliased to `--bs-border-radius-100`.
|
|
30
38
|
* @prop --bs-chatbot-header-button-hover - Icon button background on hover. Aliased to `--bs-color-neutral-container`.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
|
|
3
|
+
* next to a trigger element.
|
|
4
|
+
*
|
|
5
|
+
* `bs-tooltip` is a purely presentational bubble -- like `bs-menu`, it does not manage its own
|
|
6
|
+
* visibility, hover/focus triggering, or positioning relative to a trigger element. A consuming
|
|
7
|
+
* app is responsible for showing/hiding it and for positioning it against its trigger (e.g. via a
|
|
8
|
+
* wrapping `position: relative`/`absolute` pattern, the same approach used by
|
|
9
|
+
* `bs-chatbot-response-action` for its own `menu` slot).
|
|
10
|
+
*
|
|
11
|
+
* ## When to use
|
|
12
|
+
* - A short, contextual hint of extra information shown next to a trigger element on hover/focus,
|
|
13
|
+
* where the host app owns the show/hide and positioning logic.
|
|
14
|
+
*
|
|
15
|
+
* ## When not to use
|
|
16
|
+
* - A component that manages its own trigger interaction (hover/focus listeners) or positioning --
|
|
17
|
+
* this component intentionally does not do that; wire that up in the consuming app instead.
|
|
18
|
+
*
|
|
19
|
+
* @slot - Default slot: the tooltip's message content.
|
|
20
|
+
* @part bubble - The dark rounded box containing the slotted content.
|
|
21
|
+
* @part arrow - The triangular pointer arrow.
|
|
22
|
+
* @prop --bs-tooltip-bg - Background of the bubble and arrow. Aliased to `--bs-surface-inverse`.
|
|
23
|
+
* @prop --bs-tooltip-color - Text color of the slotted content. Aliased to `--bs-text-inverse`.
|
|
24
|
+
* @prop --bs-tooltip-radius - Corner radius of the bubble. Aliased to `--bs-border-radius-50`.
|
|
25
|
+
* @prop --bs-tooltip-padding-x - Left/right padding of the bubble. Aliased to `--bs-spacing-200`.
|
|
26
|
+
* @prop --bs-tooltip-padding-y - Top/bottom padding of the bubble. Aliased to `--bs-spacing-100`.
|
|
27
|
+
* @prop --bs-tooltip-max-width - Max width of the bubble. Aliased to `200px`, Figma's own reference
|
|
28
|
+
* width (the bubble's width is otherwise variable based on content).
|
|
29
|
+
* @prop --bs-tooltip-shadow - Elevation shadow of the bubble. See `bs-tooltip.css` for why this is
|
|
30
|
+
* a literal value rather than a `--bs-shadow-*` token alias.
|
|
31
|
+
* @prop --bs-tooltip-font-size - Font size of the slotted content. Aliased to `--bs-font-size-sm`.
|
|
32
|
+
* @prop --bs-tooltip-line-height - Line height of the slotted content. Aliased to
|
|
33
|
+
* `--bs-line-height-body-sm`.
|
|
34
|
+
*/
|
|
35
|
+
export declare class BsTooltip {
|
|
36
|
+
/**
|
|
37
|
+
* Which edge of the bubble the arrow points from, and therefore which side of a trigger the
|
|
38
|
+
* bubble should be placed on. `'top'` is the only value implemented -- it is the only variant
|
|
39
|
+
* confirmed from the Figma "EG Tooltip" component (arrow at the top of the bubble, pointing
|
|
40
|
+
* up). Bottom/left/right variants aren't implemented pending further Figma design confirmation.
|
|
41
|
+
*/
|
|
42
|
+
placement: 'top';
|
|
43
|
+
render(): any;
|
|
44
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
+
interface BsTooltipArgs {
|
|
3
|
+
message: string;
|
|
4
|
+
}
|
|
5
|
+
declare const meta: Meta<BsTooltipArgs>;
|
|
6
|
+
export default meta;
|
|
7
|
+
type Story = StoryObj<BsTooltipArgs>;
|
|
8
|
+
export declare const Default: Story;
|
|
9
|
+
export declare const WithTrigger: Story;
|