@brandsync/wc 0.0.6 → 0.0.8
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-260bd201.entry.js +1 -0
- 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-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 +74 -0
- package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.js +70 -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 +30 -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 +268 -0
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
--bs-chatbot-header-padding-bottom: var(--bs-spacing-100);
|
|
7
7
|
--bs-chatbot-header-padding-x: var(--bs-margin-fluid);
|
|
8
8
|
--bs-chatbot-header-gap: var(--bs-navigation-header-gap);
|
|
9
|
+
--bs-chatbot-header-actions-gap: var(--bs-spacing-100);
|
|
9
10
|
--bs-chatbot-header-button-size: var(--bs-spacing-600);
|
|
10
11
|
--bs-chatbot-header-button-radius: var(--bs-border-radius-100);
|
|
11
12
|
--bs-chatbot-header-button-hover: var(--bs-color-neutral-container);
|
|
@@ -41,6 +42,7 @@
|
|
|
41
42
|
.bs-chatbot-header__actions {
|
|
42
43
|
display: flex;
|
|
43
44
|
align-items: center;
|
|
45
|
+
gap: var(--bs-chatbot-header-actions-gap);
|
|
44
46
|
flex-shrink: 0;
|
|
45
47
|
}
|
|
46
48
|
|
|
@@ -79,3 +81,34 @@
|
|
|
79
81
|
.bs-chatbot-header__button:active {
|
|
80
82
|
background: var(--bs-chatbot-header-button-pressed);
|
|
81
83
|
}
|
|
84
|
+
|
|
85
|
+
.bs-chatbot-header__tooltip-wrapper {
|
|
86
|
+
position: relative;
|
|
87
|
+
display: inline-flex;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.bs-chatbot-header__tooltip {
|
|
91
|
+
position: absolute;
|
|
92
|
+
top: 100%;
|
|
93
|
+
left: 50%;
|
|
94
|
+
transform: translateX(-50%);
|
|
95
|
+
margin-top: var(--bs-spacing-100);
|
|
96
|
+
opacity: 0;
|
|
97
|
+
visibility: hidden;
|
|
98
|
+
pointer-events: none;
|
|
99
|
+
/* Hides immediately (no delay) but waits --bs-duration-slow before showing, so the tooltip
|
|
100
|
+
* doesn't flash in on every incidental pointer pass-over -- standard tooltip UX, and this
|
|
101
|
+
* duration token already collapses to 0ms under prefers-reduced-motion (see tokens.css), so
|
|
102
|
+
* no separate reduced-motion handling is needed here. */
|
|
103
|
+
transition: opacity var(--bs-duration-fast) var(--bs-easing-standard);
|
|
104
|
+
transition-delay: 0s;
|
|
105
|
+
white-space: nowrap;
|
|
106
|
+
z-index: 1;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.bs-chatbot-header__tooltip-wrapper:hover .bs-chatbot-header__tooltip,
|
|
110
|
+
.bs-chatbot-header__tooltip-wrapper:focus-within .bs-chatbot-header__tooltip {
|
|
111
|
+
opacity: 1;
|
|
112
|
+
visibility: visible;
|
|
113
|
+
transition-delay: var(--bs-duration-slow);
|
|
114
|
+
}
|
|
@@ -11,6 +11,13 @@ import { GENIE_LOGO_SVG } from "./genie-logo";
|
|
|
11
11
|
* - A generic app/page header — this component's layout and actions are purpose-built for the
|
|
12
12
|
* Genie chat panel, not a general navigation bar.
|
|
13
13
|
*
|
|
14
|
+
* Each action button shows a `bs-tooltip` (placement="top", i.e. positioned below the button with
|
|
15
|
+
* its arrow pointing up toward it -- fits naturally since this header sits at the top of a panel)
|
|
16
|
+
* on hover/focus, driven by plain CSS (`:hover`/`:focus-within` on a wrapper, no extra JS state).
|
|
17
|
+
* The tooltip is `aria-hidden` since it's a purely visual reinforcement of each button's existing
|
|
18
|
+
* `aria-label` -- screen readers already get the accessible name from the button itself, so the
|
|
19
|
+
* tooltip doesn't need to be (and shouldn't be) announced a second time.
|
|
20
|
+
*
|
|
14
21
|
* @slot new-chat-icon - Overrides the default "New chat" button icon.
|
|
15
22
|
* @slot history-icon - Overrides the default "History" button icon.
|
|
16
23
|
* @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).
|
|
@@ -26,6 +33,7 @@ import { GENIE_LOGO_SVG } from "./genie-logo";
|
|
|
26
33
|
* @prop --bs-chatbot-header-padding-bottom - Aliased to `--bs-spacing-100`.
|
|
27
34
|
* @prop --bs-chatbot-header-padding-x - Aliased to `--bs-margin-fluid`.
|
|
28
35
|
* @prop --bs-chatbot-header-gap - Gap between the logo and the button group. Aliased to `--bs-navigation-header-gap`.
|
|
36
|
+
* @prop --bs-chatbot-header-actions-gap - Gap between the individual action buttons. Aliased to `--bs-spacing-100`.
|
|
29
37
|
* @prop --bs-chatbot-header-button-size - Width/height of each icon button. Aliased to `--bs-spacing-600`.
|
|
30
38
|
* @prop --bs-chatbot-header-button-radius - Corner radius of each icon button. Aliased to `--bs-border-radius-100`.
|
|
31
39
|
* @prop --bs-chatbot-header-button-hover - Icon button background on hover. Aliased to `--bs-color-neutral-container`.
|
|
@@ -66,7 +74,7 @@ export class BsChatbotHeader {
|
|
|
66
74
|
this.bsClose.emit();
|
|
67
75
|
};
|
|
68
76
|
render() {
|
|
69
|
-
return (h("div", { key: '
|
|
77
|
+
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")))));
|
|
70
78
|
}
|
|
71
79
|
static get is() { return "bs-chatbot-header"; }
|
|
72
80
|
static get encapsulation() { return "shadow"; }
|
|
@@ -105,7 +105,7 @@ export class BsChatbotResponseAction {
|
|
|
105
105
|
};
|
|
106
106
|
render() {
|
|
107
107
|
const hasSources = !!this.sourcesCount && this.sourcesCount > 0;
|
|
108
|
-
return (h("div", { key: '
|
|
108
|
+
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')))));
|
|
109
109
|
}
|
|
110
110
|
static get is() { return "bs-chatbot-response-action"; }
|
|
111
111
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.js
CHANGED
|
@@ -45,7 +45,7 @@ export class BsChatbotSuggestionButton {
|
|
|
45
45
|
this.bsSelect.emit();
|
|
46
46
|
};
|
|
47
47
|
render() {
|
|
48
|
-
return (h("button", { key: '
|
|
48
|
+
return (h("button", { key: 'fc87dab75d560ce5f6612c2bf61875d574eddd1f', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '27ae5b010dcac9ebbb3924c72299cbb5a067ce6b' })));
|
|
49
49
|
}
|
|
50
50
|
static get is() { return "bs-chatbot-suggestion-button"; }
|
|
51
51
|
static get encapsulation() { return "shadow"; }
|
|
@@ -36,10 +36,10 @@ export class BsInput {
|
|
|
36
36
|
this.bsChange.emit(value);
|
|
37
37
|
};
|
|
38
38
|
render() {
|
|
39
|
-
return (h("div", { key: '
|
|
39
|
+
return (h("div", { key: '2c6b38b4594ccde2536515fcd252831bacb6aaeb', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
|
|
40
40
|
// "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
|
|
41
41
|
// to this instance's own shadow root, so it can never collide with another bs-input.
|
|
42
|
-
h("label", { key: '
|
|
42
|
+
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));
|
|
43
43
|
}
|
|
44
44
|
static get is() { return "bs-input"; }
|
|
45
45
|
static get encapsulation() { return "shadow"; }
|
|
@@ -22,7 +22,7 @@ import { h } from "@stencil/core";
|
|
|
22
22
|
*/
|
|
23
23
|
export class BsMenu {
|
|
24
24
|
render() {
|
|
25
|
-
return (h("div", { key: '
|
|
25
|
+
return (h("div", { key: 'a48826382a6a13a5047cb893e29fc2f09749b280', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'cb4e1eb5988a95f016dc61f698d1c6aadf2d3467' })));
|
|
26
26
|
}
|
|
27
27
|
static get is() { return "bs-menu"; }
|
|
28
28
|
static get encapsulation() { return "shadow"; }
|
|
@@ -39,7 +39,7 @@ export class BsMenuItem {
|
|
|
39
39
|
this.bsSelect.emit();
|
|
40
40
|
};
|
|
41
41
|
render() {
|
|
42
|
-
return (h("button", { key: '
|
|
42
|
+
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' }))));
|
|
43
43
|
}
|
|
44
44
|
static get is() { return "bs-menu-item"; }
|
|
45
45
|
static get encapsulation() { return "shadow"; }
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { render, h, describe, it, expect } from "@stencil/vitest";
|
|
2
|
+
describe('bs-tooltip', () => {
|
|
3
|
+
it('renders slotted content in the default slot', async () => {
|
|
4
|
+
const { root } = await render(h("bs-tooltip", null, "I'm a tooltip."));
|
|
5
|
+
expect(root).toHaveTextContent("I'm a tooltip.");
|
|
6
|
+
});
|
|
7
|
+
it('exposes the bubble and arrow parts', async () => {
|
|
8
|
+
const { root } = await render(h("bs-tooltip", null, "Hint"));
|
|
9
|
+
expect(root.shadowRoot.querySelector('[part="bubble"]')).not.toBeNull();
|
|
10
|
+
expect(root.shadowRoot.querySelector('[part="arrow"]')).not.toBeNull();
|
|
11
|
+
});
|
|
12
|
+
it('defaults the placement prop to "top"', async () => {
|
|
13
|
+
const { root } = await render(h("bs-tooltip", null, "Hint"));
|
|
14
|
+
expect(root.placement).toBe('top');
|
|
15
|
+
});
|
|
16
|
+
});
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
display: inline-block;
|
|
3
|
+
--bs-tooltip-bg: var(--bs-surface-inverse);
|
|
4
|
+
--bs-tooltip-color: var(--bs-text-inverse);
|
|
5
|
+
--bs-tooltip-radius: var(--bs-border-radius-50);
|
|
6
|
+
--bs-tooltip-padding-x: var(--bs-spacing-200);
|
|
7
|
+
--bs-tooltip-padding-y: var(--bs-spacing-100);
|
|
8
|
+
--bs-tooltip-max-width: 200px;
|
|
9
|
+
/* Figma's exported shadow is -1px 4px 8px rgba(0, 0, 0, 0.08) -- none of the --bs-shadow-* tokens
|
|
10
|
+
* match (they all use the rgba(33,38,46,...) ambient/key color pair), so this is aliased to the
|
|
11
|
+
* literal value directly, same precedent as bs-chatbot-suggestion-button's --bs-brand-200 alias
|
|
12
|
+
* for its pressed state (see bs-chatbot-suggestion-button.css). */
|
|
13
|
+
--bs-tooltip-shadow: -1px 4px 8px rgba(0, 0, 0, 0.08);
|
|
14
|
+
--bs-tooltip-font-size: var(--bs-font-size-sm);
|
|
15
|
+
--bs-tooltip-line-height: var(--bs-line-height-body-sm);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.bs-tooltip {
|
|
19
|
+
position: relative;
|
|
20
|
+
display: inline-block;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.bs-tooltip__bubble {
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
max-width: var(--bs-tooltip-max-width);
|
|
26
|
+
padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
|
|
27
|
+
background: var(--bs-tooltip-bg);
|
|
28
|
+
color: var(--bs-tooltip-color);
|
|
29
|
+
border-radius: var(--bs-tooltip-radius);
|
|
30
|
+
box-shadow: var(--bs-tooltip-shadow);
|
|
31
|
+
font-family: inherit;
|
|
32
|
+
font-size: var(--bs-tooltip-font-size);
|
|
33
|
+
line-height: calc(var(--bs-tooltip-line-height) * 1px);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.bs-tooltip__arrow {
|
|
37
|
+
position: absolute;
|
|
38
|
+
top: -6px;
|
|
39
|
+
left: 50%;
|
|
40
|
+
transform: translateX(-50%);
|
|
41
|
+
width: 8px;
|
|
42
|
+
height: 8px;
|
|
43
|
+
background: var(--bs-tooltip-bg);
|
|
44
|
+
clip-path: polygon(50% 0, 0% 100%, 100% 100%);
|
|
45
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { h } from "@stencil/core";
|
|
2
|
+
/**
|
|
3
|
+
* A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
|
|
4
|
+
* next to a trigger element.
|
|
5
|
+
*
|
|
6
|
+
* `bs-tooltip` is a purely presentational bubble -- like `bs-menu`, it does not manage its own
|
|
7
|
+
* visibility, hover/focus triggering, or positioning relative to a trigger element. A consuming
|
|
8
|
+
* app is responsible for showing/hiding it and for positioning it against its trigger (e.g. via a
|
|
9
|
+
* wrapping `position: relative`/`absolute` pattern, the same approach used by
|
|
10
|
+
* `bs-chatbot-response-action` for its own `menu` slot).
|
|
11
|
+
*
|
|
12
|
+
* ## When to use
|
|
13
|
+
* - A short, contextual hint of extra information shown next to a trigger element on hover/focus,
|
|
14
|
+
* where the host app owns the show/hide and positioning logic.
|
|
15
|
+
*
|
|
16
|
+
* ## When not to use
|
|
17
|
+
* - A component that manages its own trigger interaction (hover/focus listeners) or positioning --
|
|
18
|
+
* this component intentionally does not do that; wire that up in the consuming app instead.
|
|
19
|
+
*
|
|
20
|
+
* @slot - Default slot: the tooltip's message content.
|
|
21
|
+
* @part bubble - The dark rounded box containing the slotted content.
|
|
22
|
+
* @part arrow - The triangular pointer arrow.
|
|
23
|
+
* @prop --bs-tooltip-bg - Background of the bubble and arrow. Aliased to `--bs-surface-inverse`.
|
|
24
|
+
* @prop --bs-tooltip-color - Text color of the slotted content. Aliased to `--bs-text-inverse`.
|
|
25
|
+
* @prop --bs-tooltip-radius - Corner radius of the bubble. Aliased to `--bs-border-radius-50`.
|
|
26
|
+
* @prop --bs-tooltip-padding-x - Left/right padding of the bubble. Aliased to `--bs-spacing-200`.
|
|
27
|
+
* @prop --bs-tooltip-padding-y - Top/bottom padding of the bubble. Aliased to `--bs-spacing-100`.
|
|
28
|
+
* @prop --bs-tooltip-max-width - Max width of the bubble. Aliased to `200px`, Figma's own reference
|
|
29
|
+
* width (the bubble's width is otherwise variable based on content).
|
|
30
|
+
* @prop --bs-tooltip-shadow - Elevation shadow of the bubble. See `bs-tooltip.css` for why this is
|
|
31
|
+
* a literal value rather than a `--bs-shadow-*` token alias.
|
|
32
|
+
* @prop --bs-tooltip-font-size - Font size of the slotted content. Aliased to `--bs-font-size-sm`.
|
|
33
|
+
* @prop --bs-tooltip-line-height - Line height of the slotted content. Aliased to
|
|
34
|
+
* `--bs-line-height-body-sm`.
|
|
35
|
+
*/
|
|
36
|
+
export class BsTooltip {
|
|
37
|
+
/**
|
|
38
|
+
* Which edge of the bubble the arrow points from, and therefore which side of a trigger the
|
|
39
|
+
* bubble should be placed on. `'top'` is the only value implemented -- it is the only variant
|
|
40
|
+
* confirmed from the Figma "EG Tooltip" component (arrow at the top of the bubble, pointing
|
|
41
|
+
* up). Bottom/left/right variants aren't implemented pending further Figma design confirmation.
|
|
42
|
+
*/
|
|
43
|
+
placement = 'top';
|
|
44
|
+
render() {
|
|
45
|
+
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' }))));
|
|
46
|
+
}
|
|
47
|
+
static get is() { return "bs-tooltip"; }
|
|
48
|
+
static get encapsulation() { return "shadow"; }
|
|
49
|
+
static get originalStyleUrls() {
|
|
50
|
+
return {
|
|
51
|
+
"$": ["bs-tooltip.css"]
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
static get styleUrls() {
|
|
55
|
+
return {
|
|
56
|
+
"$": ["bs-tooltip.css"]
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
static get properties() {
|
|
60
|
+
return {
|
|
61
|
+
"placement": {
|
|
62
|
+
"type": "string",
|
|
63
|
+
"mutable": false,
|
|
64
|
+
"complexType": {
|
|
65
|
+
"original": "'top'",
|
|
66
|
+
"resolved": "\"top\"",
|
|
67
|
+
"references": {}
|
|
68
|
+
},
|
|
69
|
+
"required": false,
|
|
70
|
+
"optional": false,
|
|
71
|
+
"docs": {
|
|
72
|
+
"tags": [],
|
|
73
|
+
"text": "Which edge of the bubble the arrow points from, and therefore which side of a trigger the\nbubble should be placed on. `'top'` is the only value implemented -- it is the only variant\nconfirmed from the Figma \"EG Tooltip\" component (arrow at the top of the bubble, pointing\nup). Bottom/left/right variants aren't implemented pending further Figma design confirmation."
|
|
74
|
+
},
|
|
75
|
+
"getter": false,
|
|
76
|
+
"setter": false,
|
|
77
|
+
"reflect": false,
|
|
78
|
+
"attribute": "placement",
|
|
79
|
+
"defaultValue": "'top'"
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { html } from "lit";
|
|
2
|
+
import { componentDescription } from "../../stories-utils";
|
|
3
|
+
const meta = {
|
|
4
|
+
title: 'Components/bs-tooltip',
|
|
5
|
+
parameters: { docs: { description: { component: componentDescription('bs-tooltip') } } },
|
|
6
|
+
render: args => html `<bs-tooltip>${args.message}</bs-tooltip>`,
|
|
7
|
+
argTypes: {
|
|
8
|
+
message: { control: 'text', description: 'Slotted message content (not a real attribute -- see the default slot).' },
|
|
9
|
+
},
|
|
10
|
+
args: {
|
|
11
|
+
message: "I'm a tooltip. I show extra information when you hover or focus.",
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
export default meta;
|
|
15
|
+
export const Default = {};
|
|
16
|
+
export const WithTrigger = {
|
|
17
|
+
name: 'Positioned against a trigger (consumer pattern)',
|
|
18
|
+
render: () => html `
|
|
19
|
+
<div style="position: relative; display: inline-block;">
|
|
20
|
+
<bs-button>Hover me</bs-button>
|
|
21
|
+
<div style="position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);">
|
|
22
|
+
<bs-tooltip>I'm a tooltip. I show extra information when you hover or focus.</bs-tooltip>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
`,
|
|
26
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface BsAiThinking extends Components.BsAiThinking, HTMLElement {}
|
|
4
|
+
export const BsAiThinking: {
|
|
5
|
+
prototype: BsAiThinking;
|
|
6
|
+
new (): BsAiThinking;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as i,p as n,H as a,h as t}from"./p-BpvhHQSw.js";const g=n(class extends a{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow()}label="Thinking";render(){return t("div",{key:"c64e50565448706bec52b84a9660b10b4bb21312",class:"bs-ai-thinking",role:"status","aria-live":"polite"},t("img",{key:"05f75d621098356122106f3b9b1b0396c689fd0a",part:"icon",class:"bs-ai-thinking__icon",src:"data:image/png;base64,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",alt:"","aria-hidden":"true"}),t("span",{key:"db559deeec4a0fa224a702e8ab0c034d6bce9b48",part:"label",class:"bs-ai-thinking__label"},this.label))}static get style(){return":host{display:inline-flex;--bs-ai-thinking-gap:var(--bs-spacing-100);--bs-ai-thinking-icon-size:24px;--bs-ai-thinking-text:var(--bs-text-muted);--bs-ai-thinking-shimmer-highlight:var(--bs-text-default);--bs-ai-thinking-font-size:var(--bs-font-size-md);--bs-ai-thinking-line-height:var(--bs-line-height-body-md);--bs-ai-thinking-cycle-duration:2s}.bs-ai-thinking{display:inline-flex;align-items:center;gap:var(--bs-ai-thinking-gap);font-family:inherit}.bs-ai-thinking__icon{display:block;width:var(--bs-ai-thinking-icon-size);height:var(--bs-ai-thinking-icon-size);flex-shrink:0;object-fit:contain}.bs-ai-thinking__label{font-size:var(--bs-ai-thinking-font-size);line-height:calc(var(--bs-ai-thinking-line-height) * 1px);background-image:linear-gradient( 90deg, var(--bs-ai-thinking-text) 0%, var(--bs-ai-thinking-text) 44%, var(--bs-ai-thinking-shimmer-highlight) 50%, var(--bs-ai-thinking-text) 56%, var(--bs-ai-thinking-text) 100% );background-size:200% 100%;background-position:200% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:bs-ai-thinking-shimmer var(--bs-ai-thinking-cycle-duration) linear infinite}@keyframes bs-ai-thinking-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.bs-ai-thinking__label{animation:none;background-image:none;-webkit-text-fill-color:currentcolor;color:var(--bs-ai-thinking-text)}}"}},[513,"bs-ai-thinking",{label:[1]}]);function s(){"undefined"!=typeof customElements&&["bs-ai-thinking"].forEach((n=>{"bs-ai-thinking"===n&&(customElements.get(i(n))||customElements.define(i(n),g))}))}s();const o=g,e=s;export{o as BsAiThinking,e as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t,p as e,H as s,h as n}from"./p-BpvhHQSw.js";const o=e(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}size="md";render(){return n("span",{key:"
|
|
1
|
+
import{t,p as e,H as s,h as n}from"./p-BpvhHQSw.js";const o=e(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}size="md";render(){return n("span",{key:"34febfe9aa1e20130b62b7884e766cd5285848d7",part:"container",class:"bs-button-skeleton bs-button-skeleton--"+this.size,role:"status","aria-label":"Loading"})}static get style(){return":host{display:inline-block;--bs-button-skeleton-height-sm:var(--bs-spacing-500);--bs-button-skeleton-height-md:var(--bs-spacing-600);--bs-button-skeleton-height-lg:var(--bs-spacing-700);--bs-button-skeleton-width:96px}.bs-button-skeleton{display:inline-block;border-radius:var(--bs-border-radius-100);width:var(--bs-button-skeleton-width);background:var(--bs-color-neutral-container);animation:bs-button-skeleton-pulse 1.5s ease-in-out infinite}.bs-button-skeleton--sm{height:var(--bs-button-skeleton-height-sm)}.bs-button-skeleton--md{height:var(--bs-button-skeleton-height-md)}.bs-button-skeleton--lg{height:var(--bs-button-skeleton-height-lg)}@keyframes bs-button-skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@media (prefers-reduced-motion: reduce){.bs-button-skeleton{animation:none}}"}},[513,"bs-button-skeleton",{size:[1]}]);function b(){"undefined"!=typeof customElements&&["bs-button-skeleton"].forEach((e=>{"bs-button-skeleton"===e&&(customElements.get(t(e))||customElements.define(t(e),o))}))}b();const i=o,a=b;export{i as BsButtonSkeleton,a as defineCustomElement}
|