@brandsync/wc 0.0.8 → 0.0.9
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 +1808 -353
- package/dist/brandsync-wc/brandsync-wc.esm.js +1 -1
- package/dist/brandsync-wc/p-0d64ea40.entry.js +1 -0
- package/dist/brandsync-wc/{p-c63d16e1.entry.js → p-1515498e.entry.js} +1 -1
- package/dist/brandsync-wc/p-16a54578.entry.js +1 -0
- package/dist/brandsync-wc/p-18af02df.entry.js +1 -0
- package/dist/brandsync-wc/p-30a0e168.entry.js +1 -0
- package/dist/brandsync-wc/p-3dacae70.entry.js +1 -0
- package/dist/brandsync-wc/p-5333bb5a.entry.js +1 -0
- package/dist/brandsync-wc/p-575ce905.entry.js +1 -0
- package/dist/brandsync-wc/{p-dd0fea0e.entry.js → p-7776b57b.entry.js} +1 -1
- package/dist/brandsync-wc/{p-260bd201.entry.js → p-805644e4.entry.js} +1 -1
- package/dist/brandsync-wc/{p-f88d9a6e.entry.js → p-8a78d6ea.entry.js} +1 -1
- package/dist/brandsync-wc/p-8d12ed96.entry.js +1 -0
- package/dist/brandsync-wc/p-94ed898a.entry.js +1 -0
- package/dist/brandsync-wc/{p-9e5d2211.entry.js → p-96f374be.entry.js} +1 -1
- package/dist/brandsync-wc/{p-ab5cc7af.entry.js → p-a34f460d.entry.js} +1 -1
- package/dist/brandsync-wc/p-bc72439a.entry.js +1 -0
- package/dist/brandsync-wc/{p-76eca100.entry.js → p-ce0914a7.entry.js} +1 -1
- package/dist/brandsync-wc/{p-5a0fe72e.entry.js → p-d682675e.entry.js} +1 -1
- package/dist/brandsync-wc/p-dad4a92c.entry.js +1 -0
- package/dist/brandsync-wc/{p-cfc3421b.entry.js → p-dd747a12.entry.js} +1 -1
- package/dist/brandsync-wc/{p-2742ecef.entry.js → p-eb4d87f0.entry.js} +1 -1
- package/dist/cjs/brandsync-wc.cjs.js +1 -1
- package/dist/cjs/bs-ai-disclaimer.cjs.entry.js +17 -0
- package/dist/cjs/bs-ai-greeting.cjs.entry.js +24 -0
- package/dist/cjs/bs-ai-thinking.cjs.entry.js +1 -1
- package/dist/cjs/bs-attachment-list.cjs.entry.js +47 -0
- package/dist/cjs/bs-attachment.cjs.entry.js +46 -0
- package/dist/cjs/bs-badge.cjs.entry.js +1 -1
- package/dist/cjs/bs-button-skeleton.cjs.entry.js +1 -1
- package/dist/cjs/bs-button.cjs.entry.js +1 -1
- package/dist/cjs/bs-card.cjs.entry.js +1 -1
- package/dist/cjs/bs-chatbot-feedback.cjs.entry.js +94 -0
- package/dist/cjs/bs-chatbot-header.cjs.entry.js +1 -1
- package/dist/cjs/bs-chatbot-response-action.cjs.entry.js +1 -1
- package/dist/cjs/bs-chatbot-sources-drawer.cjs.entry.js +38 -0
- package/dist/cjs/bs-chatbot-suggestion-button.cjs.entry.js +1 -1
- package/dist/cjs/bs-composer-status-banner.cjs.entry.js +43 -0
- package/dist/cjs/bs-composer.cjs.entry.js +16 -2
- package/dist/cjs/bs-data-table.cjs.entry.js +2 -2
- package/dist/cjs/bs-input.cjs.entry.js +270 -4
- package/dist/cjs/{bs-menu-item.cjs.entry.js → bs-menu_2.cjs.entry.js} +14 -1
- package/dist/cjs/bs-source-link.cjs.entry.js +39 -0
- package/dist/cjs/bs-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +8 -0
- package/dist/collection/components/bs-ai-chatbot/bs-ai-chatbot.stories.js +180 -0
- package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.cmp.test.js +14 -0
- package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.css +27 -0
- package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.js +41 -0
- package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.stories.js +15 -0
- package/dist/collection/components/bs-ai-greeting/bs-ai-greeting.cmp.test.js +22 -0
- package/dist/collection/components/bs-ai-greeting/bs-ai-greeting.css +53 -0
- package/dist/collection/components/bs-ai-greeting/bs-ai-greeting.js +103 -0
- package/dist/collection/components/bs-ai-greeting/bs-ai-greeting.stories.js +23 -0
- package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.js +1 -1
- package/dist/collection/components/bs-attachment/bs-attachment.cmp.test.js +41 -0
- package/dist/collection/components/bs-attachment/bs-attachment.css +184 -0
- package/dist/collection/components/bs-attachment/bs-attachment.js +230 -0
- package/dist/collection/components/bs-attachment/bs-attachment.stories.js +58 -0
- package/dist/collection/components/bs-attachment-list/bs-attachment-list.cmp.test.js +28 -0
- package/dist/collection/components/bs-attachment-list/bs-attachment-list.css +56 -0
- package/dist/collection/components/bs-attachment-list/bs-attachment-list.js +105 -0
- package/dist/collection/components/bs-attachment-list/bs-attachment-list.stories.js +47 -0
- package/dist/collection/components/bs-badge/bs-badge.js +1 -1
- package/dist/collection/components/bs-button/bs-button.js +1 -1
- package/dist/collection/components/bs-button-skeleton/bs-button-skeleton.js +1 -1
- package/dist/collection/components/bs-card/bs-card.js +1 -1
- package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.cmp.test.js +73 -0
- package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.css +253 -0
- package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.js +324 -0
- package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.stories.js +54 -0
- package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.js +1 -1
- package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.js +1 -1
- package/dist/collection/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.cmp.test.js +34 -0
- package/dist/collection/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.css +106 -0
- package/dist/collection/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.js +142 -0
- package/dist/collection/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.stories.js +44 -0
- package/dist/collection/components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.js +1 -1
- package/dist/collection/components/bs-composer/bs-composer.cmp.test.js +12 -0
- package/dist/collection/components/bs-composer/bs-composer.css +10 -0
- package/dist/collection/components/bs-composer/bs-composer.js +25 -1
- package/dist/collection/components/bs-composer/bs-composer.stories.js +13 -0
- package/dist/collection/components/bs-composer-status-banner/bs-composer-status-banner.cmp.test.js +42 -0
- package/dist/collection/components/bs-composer-status-banner/bs-composer-status-banner.css +173 -0
- package/dist/collection/components/bs-composer-status-banner/bs-composer-status-banner.js +270 -0
- package/dist/collection/components/bs-composer-status-banner/bs-composer-status-banner.stories.js +75 -0
- package/dist/collection/components/bs-data-table/bs-data-table.js +2 -2
- package/dist/collection/components/bs-input/bs-input.cmp.test.js +296 -0
- package/dist/collection/components/bs-input/bs-input.css +333 -23
- package/dist/collection/components/bs-input/bs-input.js +647 -11
- package/dist/collection/components/bs-input/bs-input.stories.js +128 -1
- 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-source-link/bs-source-link.cmp.test.js +42 -0
- package/dist/collection/components/bs-source-link/bs-source-link.css +114 -0
- package/dist/collection/components/bs-source-link/bs-source-link.js +192 -0
- package/dist/collection/components/bs-source-link/bs-source-link.stories.js +33 -0
- package/dist/collection/components/bs-tooltip/bs-tooltip.js +1 -1
- package/dist/components/bs-ai-disclaimer.d.ts +11 -0
- package/dist/components/bs-ai-disclaimer.js +1 -0
- package/dist/components/bs-ai-greeting.d.ts +11 -0
- package/dist/components/bs-ai-greeting.js +1 -0
- package/dist/components/bs-ai-thinking.js +1 -1
- package/dist/components/bs-attachment-list.d.ts +11 -0
- package/dist/components/bs-attachment-list.js +1 -0
- package/dist/components/bs-attachment.d.ts +11 -0
- package/dist/components/bs-attachment.js +1 -0
- package/dist/components/bs-badge.js +1 -1
- package/dist/components/bs-button-skeleton.js +1 -1
- package/dist/components/bs-button.js +1 -1
- package/dist/components/bs-card.js +1 -1
- package/dist/components/bs-chatbot-feedback.d.ts +11 -0
- package/dist/components/bs-chatbot-feedback.js +1 -0
- package/dist/components/bs-chatbot-header.js +1 -1
- package/dist/components/bs-chatbot-response-action.js +1 -1
- package/dist/components/bs-chatbot-sources-drawer.d.ts +11 -0
- package/dist/components/bs-chatbot-sources-drawer.js +1 -0
- package/dist/components/bs-chatbot-suggestion-button.js +1 -1
- package/dist/components/bs-composer-status-banner.d.ts +11 -0
- package/dist/components/bs-composer-status-banner.js +1 -0
- package/dist/components/bs-composer.js +1 -1
- package/dist/components/bs-data-table.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-source-link.d.ts +11 -0
- package/dist/components/bs-source-link.js +1 -0
- package/dist/components/bs-tooltip.js +1 -1
- package/dist/components/{p-CoC4LQCI.js → p-Cz2nfz2j.js} +1 -1
- package/dist/components/p-DndQiCMP.js +1 -0
- package/dist/components/p-_vXDfB3V.js +1 -0
- package/dist/esm/brandsync-wc.js +1 -1
- package/dist/esm/bs-ai-disclaimer.entry.js +15 -0
- package/dist/esm/bs-ai-greeting.entry.js +22 -0
- package/dist/esm/bs-ai-thinking.entry.js +1 -1
- package/dist/esm/bs-attachment-list.entry.js +45 -0
- package/dist/esm/bs-attachment.entry.js +44 -0
- package/dist/esm/bs-badge.entry.js +1 -1
- package/dist/esm/bs-button-skeleton.entry.js +1 -1
- package/dist/esm/bs-button.entry.js +1 -1
- package/dist/esm/bs-card.entry.js +1 -1
- package/dist/esm/bs-chatbot-feedback.entry.js +92 -0
- package/dist/esm/bs-chatbot-header.entry.js +1 -1
- package/dist/esm/bs-chatbot-response-action.entry.js +1 -1
- package/dist/esm/bs-chatbot-sources-drawer.entry.js +36 -0
- package/dist/esm/bs-chatbot-suggestion-button.entry.js +1 -1
- package/dist/esm/bs-composer-status-banner.entry.js +41 -0
- package/dist/esm/bs-composer.entry.js +17 -3
- package/dist/esm/bs-data-table.entry.js +2 -2
- package/dist/esm/bs-input.entry.js +271 -5
- package/dist/esm/{bs-menu-item.entry.js → bs-menu_2.entry.js} +15 -3
- package/dist/esm/bs-source-link.entry.js +37 -0
- package/dist/esm/bs-tooltip.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/bs-ai-chatbot/bs-ai-chatbot.stories.d.ts +18 -0
- package/dist/types/components/bs-ai-disclaimer/bs-ai-disclaimer.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-ai-disclaimer/bs-ai-disclaimer.d.ts +26 -0
- package/dist/types/components/bs-ai-disclaimer/bs-ai-disclaimer.stories.d.ts +8 -0
- package/dist/types/components/bs-ai-greeting/bs-ai-greeting.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-ai-greeting/bs-ai-greeting.d.ts +42 -0
- package/dist/types/components/bs-ai-greeting/bs-ai-greeting.stories.d.ts +10 -0
- package/dist/types/components/bs-attachment/bs-attachment.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-attachment/bs-attachment.d.ts +59 -0
- package/dist/types/components/bs-attachment/bs-attachment.stories.d.ts +17 -0
- package/dist/types/components/bs-attachment-list/bs-attachment-list.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-attachment-list/bs-attachment-list.d.ts +42 -0
- package/dist/types/components/bs-attachment-list/bs-attachment-list.stories.d.ts +10 -0
- package/dist/types/components/bs-chatbot-feedback/bs-chatbot-feedback.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-chatbot-feedback/bs-chatbot-feedback.d.ts +90 -0
- package/dist/types/components/bs-chatbot-feedback/bs-chatbot-feedback.stories.d.ts +16 -0
- package/dist/types/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.d.ts +54 -0
- package/dist/types/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.stories.d.ts +10 -0
- package/dist/types/components/bs-composer/bs-composer.d.ts +14 -0
- package/dist/types/components/bs-composer/bs-composer.stories.d.ts +1 -0
- package/dist/types/components/bs-composer-status-banner/bs-composer-status-banner.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-composer-status-banner/bs-composer-status-banner.d.ts +88 -0
- package/dist/types/components/bs-composer-status-banner/bs-composer-status-banner.stories.d.ts +20 -0
- package/dist/types/components/bs-input/bs-input.d.ts +139 -6
- package/dist/types/components/bs-input/bs-input.stories.d.ts +19 -0
- package/dist/types/components/bs-source-link/bs-source-link.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-source-link/bs-source-link.d.ts +51 -0
- package/dist/types/components/bs-source-link/bs-source-link.stories.d.ts +13 -0
- package/dist/types/components.d.ts +1746 -19
- package/package.json +1 -1
- package/dist/brandsync-wc/p-6abdfaf0.entry.js +0 -1
- package/dist/brandsync-wc/p-6c1fa4da.entry.js +0 -1
- package/dist/brandsync-wc/p-a12d0a60.entry.js +0 -1
- package/dist/brandsync-wc/p-f5f443e2.entry.js +0 -1
- package/dist/cjs/bs-menu.cjs.entry.js +0 -17
- package/dist/esm/bs-menu.entry.js +0 -15
|
@@ -5,21 +5,83 @@
|
|
|
5
5
|
* It contains typing information for all components that exist in this project.
|
|
6
6
|
*/
|
|
7
7
|
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
|
|
8
|
+
import { BsAttachmentType } from "./components/bs-attachment/bs-attachment";
|
|
8
9
|
import { BsBadgeVariant } from "./components/bs-badge/bs-badge";
|
|
9
10
|
import { BsButtonSize, BsButtonVariant } from "./components/bs-button/bs-button";
|
|
10
11
|
import { BsButtonSize as BsButtonSize1 } from "./components/bs-button/bs-button";
|
|
11
12
|
import { BsCardSurface } from "./components/bs-card/bs-card";
|
|
12
13
|
import { BsComposerState, BsComposerVariant } from "./components/bs-composer/bs-composer";
|
|
14
|
+
import { BsComposerStatusBannerType } from "./components/bs-composer-status-banner/bs-composer-status-banner";
|
|
13
15
|
import { BsDataTableColumn, BsDataTableRow } from "./components/bs-data-table/bs-data-table";
|
|
14
16
|
import { BsModalSize } from "./components/bs-modal/bs-modal";
|
|
17
|
+
export { BsAttachmentType } from "./components/bs-attachment/bs-attachment";
|
|
15
18
|
export { BsBadgeVariant } from "./components/bs-badge/bs-badge";
|
|
16
19
|
export { BsButtonSize, BsButtonVariant } from "./components/bs-button/bs-button";
|
|
17
20
|
export { BsButtonSize as BsButtonSize1 } from "./components/bs-button/bs-button";
|
|
18
21
|
export { BsCardSurface } from "./components/bs-card/bs-card";
|
|
19
22
|
export { BsComposerState, BsComposerVariant } from "./components/bs-composer/bs-composer";
|
|
23
|
+
export { BsComposerStatusBannerType } from "./components/bs-composer-status-banner/bs-composer-status-banner";
|
|
20
24
|
export { BsDataTableColumn, BsDataTableRow } from "./components/bs-data-table/bs-data-table";
|
|
21
25
|
export { BsModalSize } from "./components/bs-modal/bs-modal";
|
|
22
26
|
export namespace Components {
|
|
27
|
+
/**
|
|
28
|
+
* A centered caption disclaimer for Genie AI surfaces, e.g. "AI can make mistakes. Please verify
|
|
29
|
+
* important information."
|
|
30
|
+
* ## When to use
|
|
31
|
+
* - Below or above `bs-composer` in a Genie AI chat panel, to remind users AI output can be wrong.
|
|
32
|
+
* ## When not to use
|
|
33
|
+
* - A general-purpose caption/helper text — use plain text or `bs-input`'s description slot for
|
|
34
|
+
* non-AI-related helper copy.
|
|
35
|
+
* The default slot (rather than a fixed prop) is intentional: Figma only specifies plain text, but
|
|
36
|
+
* some consuming apps link out to a policy/help page from this copy, and a slot supports that
|
|
37
|
+
* without inventing an unconfirmed `href`/link prop.
|
|
38
|
+
* @prop --bs-ai-disclaimer-padding-x - Horizontal padding. Aliased to `--bs-spacing-200`.
|
|
39
|
+
* @prop --bs-ai-disclaimer-text-color - Text color. Aliased to `--bs-text-secondary`.
|
|
40
|
+
* @prop --bs-ai-disclaimer-font-size - Text font size. Aliased to `--bs-font-size-sm`.
|
|
41
|
+
* @prop --bs-ai-disclaimer-line-height - Text line height. Aliased to `--bs-line-height-body-sm`.
|
|
42
|
+
*/
|
|
43
|
+
interface BsAiDisclaimer {
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* The centered welcome heading shown at the top of an empty Genie AI chat panel, e.g.
|
|
47
|
+
* "Hi. I'm Genie, your AI assistant." + "How can I help you with [product] today?"
|
|
48
|
+
* ## When to use
|
|
49
|
+
* - The empty/initial state of a Genie AI chat panel, before the user has sent a message.
|
|
50
|
+
* ## When not to use
|
|
51
|
+
* - Once a conversation has started -- this is a one-time empty-state greeting, not a persistent
|
|
52
|
+
* header (see `bs-chatbot-header` for that).
|
|
53
|
+
* `productName` is optional: Figma's copy has a `[product_name]` placeholder the consuming app is
|
|
54
|
+
* expected to fill in, but a component shouldn't force a product name to exist, so leaving it
|
|
55
|
+
* unset falls back to a product-agnostic "How can I help you today?".
|
|
56
|
+
* @prop --bs-ai-greeting-gap - Gap between heading and subtext. Aliased to `--bs-spacing-200`.
|
|
57
|
+
* @prop --bs-ai-greeting-max-width - Max width of the centered content block. Matches Figma's
|
|
58
|
+
* 490px.
|
|
59
|
+
* @prop --bs-ai-greeting-heading-color - Heading text color. Aliased to `--bs-text-default`.
|
|
60
|
+
* @prop --bs-ai-greeting-heading-font-size - Heading font size. Aliased to `--bs-font-size-4xl`.
|
|
61
|
+
* @prop --bs-ai-greeting-heading-line-height - Heading line height. Figma specifies 28px, which
|
|
62
|
+
* doesn't match any `--bs-line-height-heading-*` token (h4 is 32) -- aliased directly to
|
|
63
|
+
* `--bs-line-height-body-lg`, the token that happens to share the same numeric value.
|
|
64
|
+
* @prop --bs-ai-greeting-heading-weight - Heading font weight. Aliased to `--bs-font-weight-bold`.
|
|
65
|
+
* @prop --bs-ai-greeting-heading-gap - Gap between the two heading lines. Aliased to
|
|
66
|
+
* `--bs-spacing-200`.
|
|
67
|
+
* @prop --bs-ai-greeting-subtext-color - Subtext color. Aliased to `--bs-text-secondary`.
|
|
68
|
+
* @prop --bs-ai-greeting-subtext-font-size - Subtext font size. Figma specifies 20px, which
|
|
69
|
+
* doesn't match the semantic `--bs-text-style-body-lg-size` (18px) -- aliased directly to the
|
|
70
|
+
* raw `--bs-font-size-xl` primitive instead.
|
|
71
|
+
* @prop --bs-ai-greeting-subtext-line-height - Subtext line height. Aliased to
|
|
72
|
+
* `--bs-line-height-body-lg`.
|
|
73
|
+
*/
|
|
74
|
+
interface BsAiGreeting {
|
|
75
|
+
/**
|
|
76
|
+
* The assistant's name, used in the heading ("Hi. I'm {assistantName},").
|
|
77
|
+
* @default 'Genie'
|
|
78
|
+
*/
|
|
79
|
+
"assistantName": string;
|
|
80
|
+
/**
|
|
81
|
+
* The product name mentioned in the subtext. Omit to use a product-agnostic subtext.
|
|
82
|
+
*/
|
|
83
|
+
"productName"?: string;
|
|
84
|
+
}
|
|
23
85
|
/**
|
|
24
86
|
* A small inline status indicator for Genie AI surfaces: the colorful Genie mark next to a label
|
|
25
87
|
* (e.g. "Retrieving", "Thinking", "Searching") whose text shimmers with a moving highlight band
|
|
@@ -47,6 +109,93 @@ export namespace Components {
|
|
|
47
109
|
*/
|
|
48
110
|
"label": string;
|
|
49
111
|
}
|
|
112
|
+
/**
|
|
113
|
+
* A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
|
|
114
|
+
* with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
|
|
115
|
+
* a hover/focus-revealed remove button.
|
|
116
|
+
* ## When to use
|
|
117
|
+
* - Rendered by the consuming app for each file a user has attached to a Genie AI chat message,
|
|
118
|
+
* typically alongside or inside `bs-composer`.
|
|
119
|
+
* ## When not to use
|
|
120
|
+
* - A generic file-upload control -- this is a preview-only presentational component. The
|
|
121
|
+
* consuming app owns the actual file picker/upload logic and drives `loading` from that state.
|
|
122
|
+
* @prop --bs-attachment-size - Width/height of the image thumbnail and of the card. Defaults to 112px.
|
|
123
|
+
* @prop --bs-attachment-radius - Corner radius of the thumbnail/card. Aliased to
|
|
124
|
+
* `--bs-border-radius-100`.
|
|
125
|
+
* @prop --bs-attachment-border-color - Border color of the card / loading image wrap. Aliased to
|
|
126
|
+
* `--bs-border-default`.
|
|
127
|
+
* @prop --bs-attachment-card-bg - Card background. Aliased to `--bs-surface-base`.
|
|
128
|
+
* @prop --bs-attachment-filename-color - Filename text color. Aliased to `--bs-text-default`.
|
|
129
|
+
* @prop --bs-attachment-badge-bg-pdf - PDF badge background. Aliased to `--bs-badge-bg-error`.
|
|
130
|
+
* @prop --bs-attachment-badge-bg-document - Document badge background. Aliased to
|
|
131
|
+
* `--bs-badge-bg-info`.
|
|
132
|
+
* @prop --bs-attachment-remove-bg - Remove button (neutral icon button) default background.
|
|
133
|
+
* Aliased to `--bs-button-neutral-container`.
|
|
134
|
+
* @prop --bs-attachment-remove-hover - Remove button hover background. Aliased to
|
|
135
|
+
* `--bs-button-neutral-hover`.
|
|
136
|
+
* @prop --bs-attachment-remove-pressed - Remove button active/pressed background. Aliased to
|
|
137
|
+
* `--bs-button-neutral-pressed`.
|
|
138
|
+
* @prop --bs-attachment-remove-focus - Remove button focus outline color. Aliased to
|
|
139
|
+
* `--bs-border-neutral-focus`.
|
|
140
|
+
*/
|
|
141
|
+
interface BsAttachment {
|
|
142
|
+
/**
|
|
143
|
+
* The filename shown on the card. Only used when `type` is "pdf" or "document".
|
|
144
|
+
* @default 'Attachment'
|
|
145
|
+
*/
|
|
146
|
+
"fileName": string;
|
|
147
|
+
/**
|
|
148
|
+
* Accessible alt text for the image thumbnail. Only used when `type` is "image".
|
|
149
|
+
* @default ''
|
|
150
|
+
*/
|
|
151
|
+
"imageAlt": string;
|
|
152
|
+
/**
|
|
153
|
+
* The thumbnail image URL. Only used when `type` is "image".
|
|
154
|
+
*/
|
|
155
|
+
"imageSrc"?: string;
|
|
156
|
+
/**
|
|
157
|
+
* Shows an upload-in-progress spinner (blurred + overlaid for images, in the badge for files).
|
|
158
|
+
* @default false
|
|
159
|
+
*/
|
|
160
|
+
"loading": boolean;
|
|
161
|
+
/**
|
|
162
|
+
* Whether the hover/focus-revealed remove button is rendered at all.
|
|
163
|
+
* @default true
|
|
164
|
+
*/
|
|
165
|
+
"removable": boolean;
|
|
166
|
+
/**
|
|
167
|
+
* Which kind of attachment preview to render.
|
|
168
|
+
* @default 'image'
|
|
169
|
+
*/
|
|
170
|
+
"type": BsAttachmentType;
|
|
171
|
+
}
|
|
172
|
+
/**
|
|
173
|
+
* A horizontally-scrolling row wrapper for one or more `bs-attachment` previews, for slotting into
|
|
174
|
+
* `bs-composer`'s `attachments` slot when a Genie AI chat message has file attachments.
|
|
175
|
+
* ## When to use
|
|
176
|
+
* - Wrapping any number of `bs-attachment` elements the user has attached to a message, so they
|
|
177
|
+
* lay out in a single row and scroll horizontally instead of wrapping/overflowing once there
|
|
178
|
+
* are more than fit the available width.
|
|
179
|
+
* ## When not to use
|
|
180
|
+
* - A single attachment on its own — just render `bs-attachment` directly, this wrapper's
|
|
181
|
+
* scroll/fade affordance only matters once there's more content than fits.
|
|
182
|
+
* @prop --bs-attachment-list-gap - Gap between attachments. Matches the 10px Figma spec (not tied
|
|
183
|
+
* to the `--bs-spacing-*` scale, which only has 8px/12px neighbors).
|
|
184
|
+
* @prop --bs-attachment-list-padding - Padding around the row. Aliased to `--bs-spacing-150`.
|
|
185
|
+
* @prop --bs-attachment-list-fade-color - Color the right-edge fade blends into. Aliased to
|
|
186
|
+
* `--bs-static-white`.
|
|
187
|
+
* @prop --bs-attachment-list-fade-width - Width of the right-edge fade overlay. Aliased to
|
|
188
|
+
* `--bs-spacing-800`.
|
|
189
|
+
* @prop --bs-attachment-list-scrollbar-thumb - Color of the scrollbar thumb that appears on
|
|
190
|
+
* hover/focus once the row is scrollable. Aliased to `--bs-neutral-300`.
|
|
191
|
+
*/
|
|
192
|
+
interface BsAttachmentList {
|
|
193
|
+
/**
|
|
194
|
+
* Accessible name for the scrollable region.
|
|
195
|
+
* @default 'Attachments'
|
|
196
|
+
*/
|
|
197
|
+
"ariaLabel": string | null;
|
|
198
|
+
}
|
|
50
199
|
/**
|
|
51
200
|
* A small status or category pill, usually paired with a label or list item.
|
|
52
201
|
* ## When to use
|
|
@@ -150,6 +299,72 @@ export namespace Components {
|
|
|
150
299
|
*/
|
|
151
300
|
"surface": BsCardSurface;
|
|
152
301
|
}
|
|
302
|
+
/**
|
|
303
|
+
* A star-rating feedback card shown at the end of a Genie AI chat: a heading/subtitle, a 5-star
|
|
304
|
+
* rating, an optional comment, and either "Submit feedback" + "Start new chat" (before
|
|
305
|
+
* submitting) or just "Start new chat" (after).
|
|
306
|
+
* ## When to use
|
|
307
|
+
* - Prompting for feedback on a Genie response or chat session, typically after the user ends or
|
|
308
|
+
* restarts a conversation.
|
|
309
|
+
* ## When not to use
|
|
310
|
+
* - A generic star-rating input elsewhere in the product -- this component's copy and layout are
|
|
311
|
+
* purpose-built for the Genie feedback flow, not a reusable rating control.
|
|
312
|
+
* The heading and subtitle are not freeform props: before submitting, they're always the fixed
|
|
313
|
+
* "How was your experience..." copy; after submitting, they're determined entirely by `rating`
|
|
314
|
+
* (1-2 stars reads apologetic, 3 neutral, 4-5 positive), matching the Figma source exactly. Use
|
|
315
|
+
* `heading`/`subtitle` only if a consuming app genuinely needs to override that copy.
|
|
316
|
+
* @prop --bs-chatbot-feedback-bg - Card background. Aliased to `--bs-surface-raised`.
|
|
317
|
+
* @prop --bs-chatbot-feedback-border - Card border color. Aliased to `--bs-border-default`.
|
|
318
|
+
* @prop --bs-chatbot-feedback-radius - Card corner radius. Aliased to `--bs-border-radius-200`.
|
|
319
|
+
* @prop --bs-chatbot-feedback-padding-x - Card horizontal padding. Aliased to `--bs-spacing-250`.
|
|
320
|
+
* @prop --bs-chatbot-feedback-padding-y - Card vertical padding. Aliased to `--bs-spacing-550`.
|
|
321
|
+
* @prop --bs-chatbot-feedback-max-width - Max width of the card. Matches Figma's 762px.
|
|
322
|
+
* @prop --bs-chatbot-feedback-gap - Gap between the top content block and the button(s). Aliased
|
|
323
|
+
* to `--bs-spacing-300`.
|
|
324
|
+
* @prop --bs-chatbot-feedback-top-gap - Gap between heading/subtitle, stars, and the
|
|
325
|
+
* textarea/comment within the top block. Aliased to `--bs-spacing-250`.
|
|
326
|
+
* @prop --bs-chatbot-feedback-heading-color - Aliased to `--bs-text-default`.
|
|
327
|
+
* @prop --bs-chatbot-feedback-subtitle-color - Aliased to `--bs-text-secondary`.
|
|
328
|
+
* @prop --bs-chatbot-feedback-star-filled - Filled star color. Aliased to `--bs-color-primary-default`.
|
|
329
|
+
* @prop --bs-chatbot-feedback-star-empty - Empty star color. Aliased to `--bs-border-neutral-container`.
|
|
330
|
+
* @prop --bs-chatbot-feedback-comment-color - Submitted comment text color. Aliased to `--bs-text-default`.
|
|
331
|
+
* @prop --bs-chatbot-feedback-close-hover - Close button hover background. Aliased to `--bs-surface-hover`.
|
|
332
|
+
* @prop --bs-chatbot-feedback-primary-bg - "Submit feedback" / post-submit "Start new chat"
|
|
333
|
+
* background. Aliased to `--bs-button-primary-default`.
|
|
334
|
+
* @prop --bs-chatbot-feedback-primary-bg-hover - Aliased to `--bs-button-primary-hover`.
|
|
335
|
+
* @prop --bs-chatbot-feedback-primary-bg-disabled - Aliased to `--bs-button-primary-disabled`.
|
|
336
|
+
* @prop --bs-chatbot-feedback-outlined-border - Pre-submit "Start new chat" border. Aliased to
|
|
337
|
+
* `--bs-border-primary`.
|
|
338
|
+
* @prop --bs-chatbot-feedback-outlined-hover - Pre-submit "Start new chat" hover background.
|
|
339
|
+
* Aliased to `--bs-color-primary-container-hover`.
|
|
340
|
+
* @prop --bs-chatbot-feedback-outlined-text - Pre-submit "Start new chat" text/icon color.
|
|
341
|
+
* Aliased to `--bs-text-action`.
|
|
342
|
+
*/
|
|
343
|
+
interface BsChatbotFeedback {
|
|
344
|
+
/**
|
|
345
|
+
* The comment text.
|
|
346
|
+
* @default ''
|
|
347
|
+
*/
|
|
348
|
+
"comment": string;
|
|
349
|
+
/**
|
|
350
|
+
* Overrides the computed heading (see the class doc for why this is computed by default).
|
|
351
|
+
*/
|
|
352
|
+
"heading"?: string;
|
|
353
|
+
/**
|
|
354
|
+
* Current star rating, 0-5. 0 means no rating has been given yet.
|
|
355
|
+
* @default 0
|
|
356
|
+
*/
|
|
357
|
+
"rating": number;
|
|
358
|
+
/**
|
|
359
|
+
* Whether feedback has been submitted. Switches the card from the editable form to the read-only "thanks" view.
|
|
360
|
+
* @default false
|
|
361
|
+
*/
|
|
362
|
+
"submitted": boolean;
|
|
363
|
+
/**
|
|
364
|
+
* Overrides the computed subtitle.
|
|
365
|
+
*/
|
|
366
|
+
"subtitle"?: string;
|
|
367
|
+
}
|
|
153
368
|
/**
|
|
154
369
|
* The header bar that sits above `bs-composer` in a Genie AI chat panel: the Genie brand mark on
|
|
155
370
|
* the left and four fixed actions (new chat, history, expand, close) on the right.
|
|
@@ -224,6 +439,45 @@ export namespace Components {
|
|
|
224
439
|
*/
|
|
225
440
|
"sourcesCount"?: number;
|
|
226
441
|
}
|
|
442
|
+
/**
|
|
443
|
+
* The "Sources" panel shown alongside a Genie AI chat response -- a header with a title, a count
|
|
444
|
+
* badge, and a collapse chevron, above a stack of `bs-source-link` citation rows.
|
|
445
|
+
* ## When to use
|
|
446
|
+
* - Displaying the documents/sources a Genie response cited, typically opened from a "view
|
|
447
|
+
* sources" action on a `bs-chatbot-response-action` bar.
|
|
448
|
+
* ## When not to use
|
|
449
|
+
* - A generic list container -- this component's header (title + count + collapse) is
|
|
450
|
+
* purpose-built for the sources use case.
|
|
451
|
+
* @prop --bs-chatbot-sources-drawer-bg - Background of the whole panel. Aliased to `--bs-surface-raised`.
|
|
452
|
+
* @prop --bs-chatbot-sources-drawer-header-shadow - Drop shadow under the header, separating it
|
|
453
|
+
* from the scrolled list. Aliased to `--bs-shadow-xs`.
|
|
454
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-x - Aliased to `--bs-spacing-200`.
|
|
455
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-top - Aliased to `--bs-spacing-150`.
|
|
456
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-bottom - Aliased to `--bs-spacing-100`.
|
|
457
|
+
* @prop --bs-chatbot-sources-drawer-heading-color - Aliased to `--bs-text-default`.
|
|
458
|
+
* @prop --bs-chatbot-sources-drawer-count-bg - Count badge background. Aliased to
|
|
459
|
+
* `--bs-badge-bg-neutral-container`.
|
|
460
|
+
* @prop --bs-chatbot-sources-drawer-count-color - Count badge text color. Aliased to
|
|
461
|
+
* `--bs-badge-text-neutral`.
|
|
462
|
+
* @prop --bs-chatbot-sources-drawer-collapse-hover - Collapse button background on hover. Aliased
|
|
463
|
+
* to `--bs-surface-hover`.
|
|
464
|
+
* @prop --bs-chatbot-sources-drawer-section-gap - Gap between the header and the list. Aliased to
|
|
465
|
+
* `--bs-spacing-200`.
|
|
466
|
+
* @prop --bs-chatbot-sources-drawer-list-padding - Horizontal/bottom padding of the list. Aliased
|
|
467
|
+
* to `--bs-spacing-200`.
|
|
468
|
+
* @prop --bs-chatbot-sources-drawer-list-gap - Gap between rows. Aliased to `--bs-spacing-50`.
|
|
469
|
+
*/
|
|
470
|
+
interface BsChatbotSourcesDrawer {
|
|
471
|
+
/**
|
|
472
|
+
* 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.
|
|
473
|
+
*/
|
|
474
|
+
"count"?: number;
|
|
475
|
+
/**
|
|
476
|
+
* The panel title.
|
|
477
|
+
* @default 'Sources'
|
|
478
|
+
*/
|
|
479
|
+
"heading": string;
|
|
480
|
+
}
|
|
227
481
|
/**
|
|
228
482
|
* A pill-shaped clickable suggestion chip for a Genie AI chat panel (e.g. "How can I help you?").
|
|
229
483
|
* One instance renders one chip -- to show several suggestion prompts side by side, render
|
|
@@ -320,6 +574,95 @@ export namespace Components {
|
|
|
320
574
|
*/
|
|
321
575
|
"variant": BsComposerVariant;
|
|
322
576
|
}
|
|
577
|
+
/**
|
|
578
|
+
* A full-width status banner for use directly above `bs-composer`, surfacing a message about the
|
|
579
|
+
* composer's current state (e.g. a send failure, an informational notice) with an optional
|
|
580
|
+
* "Continue"-style action button and an optional close button.
|
|
581
|
+
* ## When to use
|
|
582
|
+
* - A message tied to the composer itself (send failed, rate-limited, draft restored, etc.) that
|
|
583
|
+
* needs to sit directly above it, not a general-purpose alert -- see `CONVENTIONS.md` if this
|
|
584
|
+
* library gains a generic banner/alert component later, and prefer that instead once it exists.
|
|
585
|
+
* ## When not to use
|
|
586
|
+
* - A toast/snackbar notification unrelated to the composer -- this component is not
|
|
587
|
+
* self-dismissing and has no positioning of its own (it's a static block, not an overlay).
|
|
588
|
+
* @prop --bs-composer-status-banner-radius - Corner radius of the top-left/top-right corners
|
|
589
|
+
* (bottom corners are square, so this sits flush above `bs-composer`). Aliased to
|
|
590
|
+
* `--bs-border-radius-150`.
|
|
591
|
+
* @prop --bs-composer-status-banner-padding-x - Horizontal padding. Aliased to `--bs-spacing-150`.
|
|
592
|
+
* @prop --bs-composer-status-banner-padding-top - Top padding. Aliased to `--bs-spacing-100`.
|
|
593
|
+
* @prop --bs-composer-status-banner-padding-bottom - Bottom padding. Aliased to `--bs-spacing-200`.
|
|
594
|
+
* @prop --bs-composer-status-banner-gap - Gap between the message group and the action/close
|
|
595
|
+
* controls. Aliased to `--bs-spacing-100`.
|
|
596
|
+
* @prop --bs-composer-status-banner-icon-gap - Gap between the icon and the message text.
|
|
597
|
+
* Aliased to `--bs-spacing-75`.
|
|
598
|
+
* @prop --bs-composer-status-banner-error-bg - Background for `type="error"`. Aliased to
|
|
599
|
+
* `--bs-color-error-container`.
|
|
600
|
+
* @prop --bs-composer-status-banner-error-text - Text/icon color for `type="error"`. Aliased to
|
|
601
|
+
* `--bs-text-error`.
|
|
602
|
+
* @prop --bs-composer-status-banner-error-action-bg - Action button background for
|
|
603
|
+
* `type="error"`. Aliased to `--bs-color-error-default`.
|
|
604
|
+
* @prop --bs-composer-status-banner-error-action-bg-hover - Aliased to `--bs-color-error-hover`.
|
|
605
|
+
* @prop --bs-composer-status-banner-info-bg - Background for `type="info"`. Aliased to
|
|
606
|
+
* `--bs-color-info-container`.
|
|
607
|
+
* @prop --bs-composer-status-banner-info-text - Text/icon color for `type="info"`. Aliased to
|
|
608
|
+
* `--bs-text-info`.
|
|
609
|
+
* @prop --bs-composer-status-banner-info-action-bg - Action button background for `type="info"`.
|
|
610
|
+
* Aliased to `--bs-color-info-default`.
|
|
611
|
+
* @prop --bs-composer-status-banner-info-action-bg-hover - Aliased to `--bs-color-info-hover`.
|
|
612
|
+
* @prop --bs-composer-status-banner-neutral-bg - Background for `type="neutral"`. Aliased to
|
|
613
|
+
* `--bs-color-neutral-container`.
|
|
614
|
+
* @prop --bs-composer-status-banner-neutral-text - Text/icon color for `type="neutral"`. Aliased
|
|
615
|
+
* to `--bs-text-default`.
|
|
616
|
+
* @prop --bs-composer-status-banner-neutral-action-bg - Action button background for
|
|
617
|
+
* `type="neutral"`. Aliased to `--bs-color-neutral-container`.
|
|
618
|
+
* @prop --bs-composer-status-banner-neutral-action-bg-hover - Aliased to
|
|
619
|
+
* `--bs-color-neutral-container-hover`.
|
|
620
|
+
* @prop --bs-composer-status-banner-neutral-action-border - Action button border for
|
|
621
|
+
* `type="neutral"` (the only variant whose action button is outlined). Aliased to
|
|
622
|
+
* `--bs-border-neutral-container`.
|
|
623
|
+
* @prop --bs-composer-status-banner-warning-bg - Background for `type="warning"`. Aliased to
|
|
624
|
+
* `--bs-color-warning-container`.
|
|
625
|
+
* @prop --bs-composer-status-banner-warning-text - Text/icon color for `type="warning"`. Aliased
|
|
626
|
+
* to `--bs-text-warning`.
|
|
627
|
+
* @prop --bs-composer-status-banner-warning-action-bg - Action button background for
|
|
628
|
+
* `type="warning"`. Aliased to `--bs-color-warning-default`.
|
|
629
|
+
* @prop --bs-composer-status-banner-warning-action-bg-hover - Aliased to
|
|
630
|
+
* `--bs-color-warning-hover`.
|
|
631
|
+
* @prop --bs-composer-status-banner-close-hover-bg - Close button hover background (same across
|
|
632
|
+
* every `type`). Aliased to `--bs-color-neutral-container-hover`.
|
|
633
|
+
*/
|
|
634
|
+
interface BsComposerStatusBanner {
|
|
635
|
+
/**
|
|
636
|
+
* Label for the action button, only rendered when `showButton` is true.
|
|
637
|
+
* @default 'Continue'
|
|
638
|
+
*/
|
|
639
|
+
"actionLabel": string;
|
|
640
|
+
/**
|
|
641
|
+
* Whether the close button is rendered.
|
|
642
|
+
* @default true
|
|
643
|
+
*/
|
|
644
|
+
"allowClose": boolean;
|
|
645
|
+
/**
|
|
646
|
+
* The message text.
|
|
647
|
+
* @default 'This is a message'
|
|
648
|
+
*/
|
|
649
|
+
"message": string;
|
|
650
|
+
/**
|
|
651
|
+
* Whether the "Continue"-style action button is rendered.
|
|
652
|
+
* @default false
|
|
653
|
+
*/
|
|
654
|
+
"showButton": boolean;
|
|
655
|
+
/**
|
|
656
|
+
* Whether the leading icon (default: clock) is rendered.
|
|
657
|
+
* @default true
|
|
658
|
+
*/
|
|
659
|
+
"showIcon": boolean;
|
|
660
|
+
/**
|
|
661
|
+
* Which severity/style to render. Drives background, text/icon color, and the action button's color.
|
|
662
|
+
* @default 'error'
|
|
663
|
+
*/
|
|
664
|
+
"type": BsComposerStatusBannerType;
|
|
665
|
+
}
|
|
323
666
|
/**
|
|
324
667
|
* A sortable, optionally row-selectable table for tabular data.
|
|
325
668
|
* `columns`, `rows`, and `cellRenderer` are JS-property-only — HTML attributes can only carry
|
|
@@ -357,29 +700,111 @@ export namespace Components {
|
|
|
357
700
|
"sortDirection": 'asc' | 'desc';
|
|
358
701
|
}
|
|
359
702
|
/**
|
|
360
|
-
* A single-line text field with an optional label, description, and error state.
|
|
703
|
+
* A single-line text field with an optional label, description, and error state. Also covers a
|
|
704
|
+
* range of related "field" shapes (number stepper, password reveal, date, dropdown trigger,
|
|
705
|
+
* select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
|
|
706
|
+
* share the same label/description/error/icon-slot chrome.
|
|
361
707
|
* ## When to use
|
|
362
708
|
* - Collecting a single line of free-text, email, password, or numeric input.
|
|
709
|
+
* - Any of the other supported `type`s (search, date, dropdown, select, textarea, chip, initials,
|
|
710
|
+
* country, pin) that share this component's label/description/error chrome.
|
|
363
711
|
* - Pair with `error` for inline validation feedback tied to that specific field.
|
|
364
712
|
* ## When not to use
|
|
365
|
-
* -
|
|
366
|
-
*
|
|
713
|
+
* - A fixed set of choices best served by a dedicated radio/checkbox group rather than a single
|
|
714
|
+
* field. `type="select"` (native `<select>`) and `type="dropdown"` (a `bs-menu` of
|
|
715
|
+
* `bs-menu-item`s from the `options` prop) cover the field-shaped cases; `type="chip"` has no
|
|
716
|
+
* options list at all (freeform chip entry).
|
|
367
717
|
*/
|
|
368
718
|
interface BsInput {
|
|
719
|
+
/**
|
|
720
|
+
* Current chips for `type="chip"`. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule.
|
|
721
|
+
* @default []
|
|
722
|
+
*/
|
|
723
|
+
"chips": string[];
|
|
724
|
+
/**
|
|
725
|
+
* Current selected country code for `type="country"`.
|
|
726
|
+
* @default ''
|
|
727
|
+
*/
|
|
728
|
+
"country": string;
|
|
729
|
+
/**
|
|
730
|
+
* Country select options for `type="country"`. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule.
|
|
731
|
+
* @default []
|
|
732
|
+
*/
|
|
733
|
+
"countryOptions": { code: string; label: string; flagIcon?: string }[];
|
|
369
734
|
"description"?: string;
|
|
370
735
|
/**
|
|
371
736
|
* @default false
|
|
372
737
|
*/
|
|
373
738
|
"disabled": boolean;
|
|
374
739
|
"error"?: string;
|
|
740
|
+
/**
|
|
741
|
+
* Current selected title for `type="initials"`. Named `initialsTitle` rather than `title` -- `title` is a reserved standard HTML attribute (tooltip text) inherited by every element, and Stencil warns against shadowing it with a component `@Prop`.
|
|
742
|
+
* @default ''
|
|
743
|
+
*/
|
|
744
|
+
"initialsTitle": string;
|
|
375
745
|
"label"?: string;
|
|
746
|
+
/**
|
|
747
|
+
* Number of cells for `type="pin"`.
|
|
748
|
+
* @default 4
|
|
749
|
+
*/
|
|
750
|
+
"length": number;
|
|
751
|
+
/**
|
|
752
|
+
* Maximum value for `type="number"`'s stepper buttons.
|
|
753
|
+
*/
|
|
754
|
+
"max"?: number;
|
|
755
|
+
/**
|
|
756
|
+
* Minimum value for `type="number"`'s stepper buttons.
|
|
757
|
+
*/
|
|
758
|
+
"min"?: number;
|
|
759
|
+
/**
|
|
760
|
+
* Whether the `type="dropdown"` trigger is open. Reflects to an attribute so consumers can style an open state via CSS. When `options` is non-empty, this also controls whether the `bs-menu` of `bs-menu-item`s is rendered below the field.
|
|
761
|
+
* @default false
|
|
762
|
+
*/
|
|
763
|
+
"open": boolean;
|
|
764
|
+
/**
|
|
765
|
+
* Options for `type="select"` (rendered as native `<option>`s) and `type="dropdown"` (rendered as a `bs-menu` of `bs-menu-item`s when `open`). Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule.
|
|
766
|
+
* @default []
|
|
767
|
+
*/
|
|
768
|
+
"options": { label: string; value: string }[];
|
|
376
769
|
"placeholder"?: string;
|
|
377
770
|
/**
|
|
378
|
-
*
|
|
771
|
+
* Marks the field as required: renders a red `*` after the label and sets `aria-required="true"` on the control. Applies regardless of `type`.
|
|
772
|
+
* @default false
|
|
773
|
+
*/
|
|
774
|
+
"required": boolean;
|
|
775
|
+
/**
|
|
776
|
+
* Number of visible rows for `type="textarea"`.
|
|
777
|
+
* @default 3
|
|
778
|
+
*/
|
|
779
|
+
"rows": number;
|
|
780
|
+
/**
|
|
781
|
+
* Step size for `type="number"`'s increment/decrement stepper buttons.
|
|
782
|
+
* @default 1
|
|
379
783
|
*/
|
|
380
|
-
"
|
|
784
|
+
"step": number;
|
|
381
785
|
/**
|
|
382
|
-
*
|
|
786
|
+
* Title select options for `type="initials"` (e.g. `['Mrs.', 'Mr.', 'Dr.']`). Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule.
|
|
787
|
+
* @default []
|
|
788
|
+
*/
|
|
789
|
+
"titleOptions": string[];
|
|
790
|
+
/**
|
|
791
|
+
* @default 'text'
|
|
792
|
+
*/
|
|
793
|
+
"type": | 'text'
|
|
794
|
+
| 'email'
|
|
795
|
+
| 'password'
|
|
796
|
+
| 'number'
|
|
797
|
+
| 'search'
|
|
798
|
+
| 'date'
|
|
799
|
+
| 'dropdown'
|
|
800
|
+
| 'select'
|
|
801
|
+
| 'textarea'
|
|
802
|
+
| 'chip'
|
|
803
|
+
| 'initials'
|
|
804
|
+
| 'country'
|
|
805
|
+
| 'pin';
|
|
806
|
+
/**
|
|
807
|
+
* Current value. Native `input`/`change` events don't cross the Shadow DOM boundary, so this component re-dispatches them as `bsInput`/`bsChange` custom events instead. Mutable so the `number` type's stepper buttons can update it directly.
|
|
383
808
|
* @default ''
|
|
384
809
|
*/
|
|
385
810
|
"value": string;
|
|
@@ -445,6 +870,55 @@ export namespace Components {
|
|
|
445
870
|
*/
|
|
446
871
|
"size": BsModalSize;
|
|
447
872
|
}
|
|
873
|
+
/**
|
|
874
|
+
* A single citation row inside `bs-chatbot-sources-drawer` -- a file icon + filename on the first
|
|
875
|
+
* line, the originating system and version on the second, and a trailing "open" arrow.
|
|
876
|
+
* ## When to use
|
|
877
|
+
* - One row per source Genie cited in a response, slotted into `bs-chatbot-sources-drawer`.
|
|
878
|
+
* ## When not to use
|
|
879
|
+
* - Outside the sources drawer context -- this is a purpose-built citation row, not a generic
|
|
880
|
+
* link/list-item component.
|
|
881
|
+
* @prop --bs-source-link-radius - Corner radius of the row. Aliased to `--bs-border-radius-150`.
|
|
882
|
+
* @prop --bs-source-link-padding - Padding around the row. Aliased to `--bs-spacing-150`.
|
|
883
|
+
* @prop --bs-source-link-gap - Gap between the filename+meta block and the trailing arrow.
|
|
884
|
+
* Aliased to `--bs-spacing-50`.
|
|
885
|
+
* @prop --bs-source-link-icon-gap - Gap between the leading icon and the filename text. Aliased
|
|
886
|
+
* to `--bs-spacing-75`.
|
|
887
|
+
* @prop --bs-source-link-hover - Row background on hover/focus. Aliased to `--bs-surface-hover`.
|
|
888
|
+
* @prop --bs-source-link-pressed - Row background while active/pressed. Aliased to
|
|
889
|
+
* `--bs-surface-pressed`.
|
|
890
|
+
* @prop --bs-source-link-focus - Focus-visible outline color. Aliased to
|
|
891
|
+
* `--bs-border-neutral-focus`.
|
|
892
|
+
* @prop --bs-source-link-filename-color - Filename text color. Aliased to `--bs-text-default`.
|
|
893
|
+
* @prop --bs-source-link-meta-color - Source/version text color. Aliased to `--bs-text-secondary`.
|
|
894
|
+
* @prop --bs-source-link-icon-color - File icon and arrow color. Aliased to `--bs-icon-default`.
|
|
895
|
+
* @prop --bs-source-link-dot-color - Separator dot between source and version. Aliased to
|
|
896
|
+
* `--bs-text-secondary`.
|
|
897
|
+
*/
|
|
898
|
+
interface BsSourceLink {
|
|
899
|
+
/**
|
|
900
|
+
* The cited document's filename.
|
|
901
|
+
* @default 'Source'
|
|
902
|
+
*/
|
|
903
|
+
"fileName": string;
|
|
904
|
+
/**
|
|
905
|
+
* If set, renders the row as a link that opens this URL; otherwise as a button that only emits `bsOpen`.
|
|
906
|
+
*/
|
|
907
|
+
"href"?: string;
|
|
908
|
+
/**
|
|
909
|
+
* The system/app the document came from (e.g. "HoltePortalen").
|
|
910
|
+
*/
|
|
911
|
+
"sourceName"?: string;
|
|
912
|
+
/**
|
|
913
|
+
* `target` used when `href` is set.
|
|
914
|
+
* @default '_blank'
|
|
915
|
+
*/
|
|
916
|
+
"target": string;
|
|
917
|
+
/**
|
|
918
|
+
* The document's version label (e.g. "v3.2"). Omit if the source has no version.
|
|
919
|
+
*/
|
|
920
|
+
"version"?: string;
|
|
921
|
+
}
|
|
448
922
|
/**
|
|
449
923
|
* A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
|
|
450
924
|
* next to a trigger element.
|
|
@@ -480,6 +954,14 @@ export namespace Components {
|
|
|
480
954
|
"placement": 'top';
|
|
481
955
|
}
|
|
482
956
|
}
|
|
957
|
+
export interface BsAttachmentCustomEvent<T> extends CustomEvent<T> {
|
|
958
|
+
detail: T;
|
|
959
|
+
target: HTMLBsAttachmentElement;
|
|
960
|
+
}
|
|
961
|
+
export interface BsChatbotFeedbackCustomEvent<T> extends CustomEvent<T> {
|
|
962
|
+
detail: T;
|
|
963
|
+
target: HTMLBsChatbotFeedbackElement;
|
|
964
|
+
}
|
|
483
965
|
export interface BsChatbotHeaderCustomEvent<T> extends CustomEvent<T> {
|
|
484
966
|
detail: T;
|
|
485
967
|
target: HTMLBsChatbotHeaderElement;
|
|
@@ -488,6 +970,10 @@ export interface BsChatbotResponseActionCustomEvent<T> extends CustomEvent<T> {
|
|
|
488
970
|
detail: T;
|
|
489
971
|
target: HTMLBsChatbotResponseActionElement;
|
|
490
972
|
}
|
|
973
|
+
export interface BsChatbotSourcesDrawerCustomEvent<T> extends CustomEvent<T> {
|
|
974
|
+
detail: T;
|
|
975
|
+
target: HTMLBsChatbotSourcesDrawerElement;
|
|
976
|
+
}
|
|
491
977
|
export interface BsChatbotSuggestionButtonCustomEvent<T> extends CustomEvent<T> {
|
|
492
978
|
detail: T;
|
|
493
979
|
target: HTMLBsChatbotSuggestionButtonElement;
|
|
@@ -496,6 +982,10 @@ export interface BsComposerCustomEvent<T> extends CustomEvent<T> {
|
|
|
496
982
|
detail: T;
|
|
497
983
|
target: HTMLBsComposerElement;
|
|
498
984
|
}
|
|
985
|
+
export interface BsComposerStatusBannerCustomEvent<T> extends CustomEvent<T> {
|
|
986
|
+
detail: T;
|
|
987
|
+
target: HTMLBsComposerStatusBannerElement;
|
|
988
|
+
}
|
|
499
989
|
export interface BsDataTableCustomEvent<T> extends CustomEvent<T> {
|
|
500
990
|
detail: T;
|
|
501
991
|
target: HTMLBsDataTableElement;
|
|
@@ -512,7 +1002,68 @@ export interface BsModalCustomEvent<T> extends CustomEvent<T> {
|
|
|
512
1002
|
detail: T;
|
|
513
1003
|
target: HTMLBsModalElement;
|
|
514
1004
|
}
|
|
1005
|
+
export interface BsSourceLinkCustomEvent<T> extends CustomEvent<T> {
|
|
1006
|
+
detail: T;
|
|
1007
|
+
target: HTMLBsSourceLinkElement;
|
|
1008
|
+
}
|
|
515
1009
|
declare global {
|
|
1010
|
+
/**
|
|
1011
|
+
* A centered caption disclaimer for Genie AI surfaces, e.g. "AI can make mistakes. Please verify
|
|
1012
|
+
* important information."
|
|
1013
|
+
* ## When to use
|
|
1014
|
+
* - Below or above `bs-composer` in a Genie AI chat panel, to remind users AI output can be wrong.
|
|
1015
|
+
* ## When not to use
|
|
1016
|
+
* - A general-purpose caption/helper text — use plain text or `bs-input`'s description slot for
|
|
1017
|
+
* non-AI-related helper copy.
|
|
1018
|
+
* The default slot (rather than a fixed prop) is intentional: Figma only specifies plain text, but
|
|
1019
|
+
* some consuming apps link out to a policy/help page from this copy, and a slot supports that
|
|
1020
|
+
* without inventing an unconfirmed `href`/link prop.
|
|
1021
|
+
* @prop --bs-ai-disclaimer-padding-x - Horizontal padding. Aliased to `--bs-spacing-200`.
|
|
1022
|
+
* @prop --bs-ai-disclaimer-text-color - Text color. Aliased to `--bs-text-secondary`.
|
|
1023
|
+
* @prop --bs-ai-disclaimer-font-size - Text font size. Aliased to `--bs-font-size-sm`.
|
|
1024
|
+
* @prop --bs-ai-disclaimer-line-height - Text line height. Aliased to `--bs-line-height-body-sm`.
|
|
1025
|
+
*/
|
|
1026
|
+
interface HTMLBsAiDisclaimerElement extends Components.BsAiDisclaimer, HTMLStencilElement {
|
|
1027
|
+
}
|
|
1028
|
+
var HTMLBsAiDisclaimerElement: {
|
|
1029
|
+
prototype: HTMLBsAiDisclaimerElement;
|
|
1030
|
+
new (): HTMLBsAiDisclaimerElement;
|
|
1031
|
+
};
|
|
1032
|
+
/**
|
|
1033
|
+
* The centered welcome heading shown at the top of an empty Genie AI chat panel, e.g.
|
|
1034
|
+
* "Hi. I'm Genie, your AI assistant." + "How can I help you with [product] today?"
|
|
1035
|
+
* ## When to use
|
|
1036
|
+
* - The empty/initial state of a Genie AI chat panel, before the user has sent a message.
|
|
1037
|
+
* ## When not to use
|
|
1038
|
+
* - Once a conversation has started -- this is a one-time empty-state greeting, not a persistent
|
|
1039
|
+
* header (see `bs-chatbot-header` for that).
|
|
1040
|
+
* `productName` is optional: Figma's copy has a `[product_name]` placeholder the consuming app is
|
|
1041
|
+
* expected to fill in, but a component shouldn't force a product name to exist, so leaving it
|
|
1042
|
+
* unset falls back to a product-agnostic "How can I help you today?".
|
|
1043
|
+
* @prop --bs-ai-greeting-gap - Gap between heading and subtext. Aliased to `--bs-spacing-200`.
|
|
1044
|
+
* @prop --bs-ai-greeting-max-width - Max width of the centered content block. Matches Figma's
|
|
1045
|
+
* 490px.
|
|
1046
|
+
* @prop --bs-ai-greeting-heading-color - Heading text color. Aliased to `--bs-text-default`.
|
|
1047
|
+
* @prop --bs-ai-greeting-heading-font-size - Heading font size. Aliased to `--bs-font-size-4xl`.
|
|
1048
|
+
* @prop --bs-ai-greeting-heading-line-height - Heading line height. Figma specifies 28px, which
|
|
1049
|
+
* doesn't match any `--bs-line-height-heading-*` token (h4 is 32) -- aliased directly to
|
|
1050
|
+
* `--bs-line-height-body-lg`, the token that happens to share the same numeric value.
|
|
1051
|
+
* @prop --bs-ai-greeting-heading-weight - Heading font weight. Aliased to `--bs-font-weight-bold`.
|
|
1052
|
+
* @prop --bs-ai-greeting-heading-gap - Gap between the two heading lines. Aliased to
|
|
1053
|
+
* `--bs-spacing-200`.
|
|
1054
|
+
* @prop --bs-ai-greeting-subtext-color - Subtext color. Aliased to `--bs-text-secondary`.
|
|
1055
|
+
* @prop --bs-ai-greeting-subtext-font-size - Subtext font size. Figma specifies 20px, which
|
|
1056
|
+
* doesn't match the semantic `--bs-text-style-body-lg-size` (18px) -- aliased directly to the
|
|
1057
|
+
* raw `--bs-font-size-xl` primitive instead.
|
|
1058
|
+
* @prop --bs-ai-greeting-subtext-line-height - Subtext line height. Aliased to
|
|
1059
|
+
* `--bs-line-height-body-lg`.
|
|
1060
|
+
*/
|
|
1061
|
+
interface HTMLBsAiGreetingElement extends Components.BsAiGreeting, HTMLStencilElement {
|
|
1062
|
+
}
|
|
1063
|
+
var HTMLBsAiGreetingElement: {
|
|
1064
|
+
prototype: HTMLBsAiGreetingElement;
|
|
1065
|
+
new (): HTMLBsAiGreetingElement;
|
|
1066
|
+
};
|
|
516
1067
|
/**
|
|
517
1068
|
* A small inline status indicator for Genie AI surfaces: the colorful Genie mark next to a label
|
|
518
1069
|
* (e.g. "Retrieving", "Thinking", "Searching") whose text shimmers with a moving highlight band
|
|
@@ -539,6 +1090,78 @@ declare global {
|
|
|
539
1090
|
prototype: HTMLBsAiThinkingElement;
|
|
540
1091
|
new (): HTMLBsAiThinkingElement;
|
|
541
1092
|
};
|
|
1093
|
+
interface HTMLBsAttachmentElementEventMap {
|
|
1094
|
+
"bsRemove": void;
|
|
1095
|
+
}
|
|
1096
|
+
/**
|
|
1097
|
+
* A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
|
|
1098
|
+
* with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
|
|
1099
|
+
* a hover/focus-revealed remove button.
|
|
1100
|
+
* ## When to use
|
|
1101
|
+
* - Rendered by the consuming app for each file a user has attached to a Genie AI chat message,
|
|
1102
|
+
* typically alongside or inside `bs-composer`.
|
|
1103
|
+
* ## When not to use
|
|
1104
|
+
* - A generic file-upload control -- this is a preview-only presentational component. The
|
|
1105
|
+
* consuming app owns the actual file picker/upload logic and drives `loading` from that state.
|
|
1106
|
+
* @prop --bs-attachment-size - Width/height of the image thumbnail and of the card. Defaults to 112px.
|
|
1107
|
+
* @prop --bs-attachment-radius - Corner radius of the thumbnail/card. Aliased to
|
|
1108
|
+
* `--bs-border-radius-100`.
|
|
1109
|
+
* @prop --bs-attachment-border-color - Border color of the card / loading image wrap. Aliased to
|
|
1110
|
+
* `--bs-border-default`.
|
|
1111
|
+
* @prop --bs-attachment-card-bg - Card background. Aliased to `--bs-surface-base`.
|
|
1112
|
+
* @prop --bs-attachment-filename-color - Filename text color. Aliased to `--bs-text-default`.
|
|
1113
|
+
* @prop --bs-attachment-badge-bg-pdf - PDF badge background. Aliased to `--bs-badge-bg-error`.
|
|
1114
|
+
* @prop --bs-attachment-badge-bg-document - Document badge background. Aliased to
|
|
1115
|
+
* `--bs-badge-bg-info`.
|
|
1116
|
+
* @prop --bs-attachment-remove-bg - Remove button (neutral icon button) default background.
|
|
1117
|
+
* Aliased to `--bs-button-neutral-container`.
|
|
1118
|
+
* @prop --bs-attachment-remove-hover - Remove button hover background. Aliased to
|
|
1119
|
+
* `--bs-button-neutral-hover`.
|
|
1120
|
+
* @prop --bs-attachment-remove-pressed - Remove button active/pressed background. Aliased to
|
|
1121
|
+
* `--bs-button-neutral-pressed`.
|
|
1122
|
+
* @prop --bs-attachment-remove-focus - Remove button focus outline color. Aliased to
|
|
1123
|
+
* `--bs-border-neutral-focus`.
|
|
1124
|
+
*/
|
|
1125
|
+
interface HTMLBsAttachmentElement extends Components.BsAttachment, HTMLStencilElement {
|
|
1126
|
+
addEventListener<K extends keyof HTMLBsAttachmentElementEventMap>(type: K, listener: (this: HTMLBsAttachmentElement, ev: BsAttachmentCustomEvent<HTMLBsAttachmentElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1127
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1128
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1129
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
1130
|
+
removeEventListener<K extends keyof HTMLBsAttachmentElementEventMap>(type: K, listener: (this: HTMLBsAttachmentElement, ev: BsAttachmentCustomEvent<HTMLBsAttachmentElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
1131
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1132
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1133
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
1134
|
+
}
|
|
1135
|
+
var HTMLBsAttachmentElement: {
|
|
1136
|
+
prototype: HTMLBsAttachmentElement;
|
|
1137
|
+
new (): HTMLBsAttachmentElement;
|
|
1138
|
+
};
|
|
1139
|
+
/**
|
|
1140
|
+
* A horizontally-scrolling row wrapper for one or more `bs-attachment` previews, for slotting into
|
|
1141
|
+
* `bs-composer`'s `attachments` slot when a Genie AI chat message has file attachments.
|
|
1142
|
+
* ## When to use
|
|
1143
|
+
* - Wrapping any number of `bs-attachment` elements the user has attached to a message, so they
|
|
1144
|
+
* lay out in a single row and scroll horizontally instead of wrapping/overflowing once there
|
|
1145
|
+
* are more than fit the available width.
|
|
1146
|
+
* ## When not to use
|
|
1147
|
+
* - A single attachment on its own — just render `bs-attachment` directly, this wrapper's
|
|
1148
|
+
* scroll/fade affordance only matters once there's more content than fits.
|
|
1149
|
+
* @prop --bs-attachment-list-gap - Gap between attachments. Matches the 10px Figma spec (not tied
|
|
1150
|
+
* to the `--bs-spacing-*` scale, which only has 8px/12px neighbors).
|
|
1151
|
+
* @prop --bs-attachment-list-padding - Padding around the row. Aliased to `--bs-spacing-150`.
|
|
1152
|
+
* @prop --bs-attachment-list-fade-color - Color the right-edge fade blends into. Aliased to
|
|
1153
|
+
* `--bs-static-white`.
|
|
1154
|
+
* @prop --bs-attachment-list-fade-width - Width of the right-edge fade overlay. Aliased to
|
|
1155
|
+
* `--bs-spacing-800`.
|
|
1156
|
+
* @prop --bs-attachment-list-scrollbar-thumb - Color of the scrollbar thumb that appears on
|
|
1157
|
+
* hover/focus once the row is scrollable. Aliased to `--bs-neutral-300`.
|
|
1158
|
+
*/
|
|
1159
|
+
interface HTMLBsAttachmentListElement extends Components.BsAttachmentList, HTMLStencilElement {
|
|
1160
|
+
}
|
|
1161
|
+
var HTMLBsAttachmentListElement: {
|
|
1162
|
+
prototype: HTMLBsAttachmentListElement;
|
|
1163
|
+
new (): HTMLBsAttachmentListElement;
|
|
1164
|
+
};
|
|
542
1165
|
/**
|
|
543
1166
|
* A small status or category pill, usually paired with a label or list item.
|
|
544
1167
|
* ## When to use
|
|
@@ -618,6 +1241,68 @@ declare global {
|
|
|
618
1241
|
prototype: HTMLBsCardElement;
|
|
619
1242
|
new (): HTMLBsCardElement;
|
|
620
1243
|
};
|
|
1244
|
+
interface HTMLBsChatbotFeedbackElementEventMap {
|
|
1245
|
+
"bsRatingChange": number;
|
|
1246
|
+
"bsCommentInput": string;
|
|
1247
|
+
"bsSubmit": { rating: number; comment: string };
|
|
1248
|
+
"bsNewChat": void;
|
|
1249
|
+
"bsClose": void;
|
|
1250
|
+
}
|
|
1251
|
+
/**
|
|
1252
|
+
* A star-rating feedback card shown at the end of a Genie AI chat: a heading/subtitle, a 5-star
|
|
1253
|
+
* rating, an optional comment, and either "Submit feedback" + "Start new chat" (before
|
|
1254
|
+
* submitting) or just "Start new chat" (after).
|
|
1255
|
+
* ## When to use
|
|
1256
|
+
* - Prompting for feedback on a Genie response or chat session, typically after the user ends or
|
|
1257
|
+
* restarts a conversation.
|
|
1258
|
+
* ## When not to use
|
|
1259
|
+
* - A generic star-rating input elsewhere in the product -- this component's copy and layout are
|
|
1260
|
+
* purpose-built for the Genie feedback flow, not a reusable rating control.
|
|
1261
|
+
* The heading and subtitle are not freeform props: before submitting, they're always the fixed
|
|
1262
|
+
* "How was your experience..." copy; after submitting, they're determined entirely by `rating`
|
|
1263
|
+
* (1-2 stars reads apologetic, 3 neutral, 4-5 positive), matching the Figma source exactly. Use
|
|
1264
|
+
* `heading`/`subtitle` only if a consuming app genuinely needs to override that copy.
|
|
1265
|
+
* @prop --bs-chatbot-feedback-bg - Card background. Aliased to `--bs-surface-raised`.
|
|
1266
|
+
* @prop --bs-chatbot-feedback-border - Card border color. Aliased to `--bs-border-default`.
|
|
1267
|
+
* @prop --bs-chatbot-feedback-radius - Card corner radius. Aliased to `--bs-border-radius-200`.
|
|
1268
|
+
* @prop --bs-chatbot-feedback-padding-x - Card horizontal padding. Aliased to `--bs-spacing-250`.
|
|
1269
|
+
* @prop --bs-chatbot-feedback-padding-y - Card vertical padding. Aliased to `--bs-spacing-550`.
|
|
1270
|
+
* @prop --bs-chatbot-feedback-max-width - Max width of the card. Matches Figma's 762px.
|
|
1271
|
+
* @prop --bs-chatbot-feedback-gap - Gap between the top content block and the button(s). Aliased
|
|
1272
|
+
* to `--bs-spacing-300`.
|
|
1273
|
+
* @prop --bs-chatbot-feedback-top-gap - Gap between heading/subtitle, stars, and the
|
|
1274
|
+
* textarea/comment within the top block. Aliased to `--bs-spacing-250`.
|
|
1275
|
+
* @prop --bs-chatbot-feedback-heading-color - Aliased to `--bs-text-default`.
|
|
1276
|
+
* @prop --bs-chatbot-feedback-subtitle-color - Aliased to `--bs-text-secondary`.
|
|
1277
|
+
* @prop --bs-chatbot-feedback-star-filled - Filled star color. Aliased to `--bs-color-primary-default`.
|
|
1278
|
+
* @prop --bs-chatbot-feedback-star-empty - Empty star color. Aliased to `--bs-border-neutral-container`.
|
|
1279
|
+
* @prop --bs-chatbot-feedback-comment-color - Submitted comment text color. Aliased to `--bs-text-default`.
|
|
1280
|
+
* @prop --bs-chatbot-feedback-close-hover - Close button hover background. Aliased to `--bs-surface-hover`.
|
|
1281
|
+
* @prop --bs-chatbot-feedback-primary-bg - "Submit feedback" / post-submit "Start new chat"
|
|
1282
|
+
* background. Aliased to `--bs-button-primary-default`.
|
|
1283
|
+
* @prop --bs-chatbot-feedback-primary-bg-hover - Aliased to `--bs-button-primary-hover`.
|
|
1284
|
+
* @prop --bs-chatbot-feedback-primary-bg-disabled - Aliased to `--bs-button-primary-disabled`.
|
|
1285
|
+
* @prop --bs-chatbot-feedback-outlined-border - Pre-submit "Start new chat" border. Aliased to
|
|
1286
|
+
* `--bs-border-primary`.
|
|
1287
|
+
* @prop --bs-chatbot-feedback-outlined-hover - Pre-submit "Start new chat" hover background.
|
|
1288
|
+
* Aliased to `--bs-color-primary-container-hover`.
|
|
1289
|
+
* @prop --bs-chatbot-feedback-outlined-text - Pre-submit "Start new chat" text/icon color.
|
|
1290
|
+
* Aliased to `--bs-text-action`.
|
|
1291
|
+
*/
|
|
1292
|
+
interface HTMLBsChatbotFeedbackElement extends Components.BsChatbotFeedback, HTMLStencilElement {
|
|
1293
|
+
addEventListener<K extends keyof HTMLBsChatbotFeedbackElementEventMap>(type: K, listener: (this: HTMLBsChatbotFeedbackElement, ev: BsChatbotFeedbackCustomEvent<HTMLBsChatbotFeedbackElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1294
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1295
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1296
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
1297
|
+
removeEventListener<K extends keyof HTMLBsChatbotFeedbackElementEventMap>(type: K, listener: (this: HTMLBsChatbotFeedbackElement, ev: BsChatbotFeedbackCustomEvent<HTMLBsChatbotFeedbackElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
1298
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1299
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1300
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
1301
|
+
}
|
|
1302
|
+
var HTMLBsChatbotFeedbackElement: {
|
|
1303
|
+
prototype: HTMLBsChatbotFeedbackElement;
|
|
1304
|
+
new (): HTMLBsChatbotFeedbackElement;
|
|
1305
|
+
};
|
|
621
1306
|
interface HTMLBsChatbotHeaderElementEventMap {
|
|
622
1307
|
"bsNewChat": void;
|
|
623
1308
|
"bsHistory": void;
|
|
@@ -711,6 +1396,51 @@ declare global {
|
|
|
711
1396
|
prototype: HTMLBsChatbotResponseActionElement;
|
|
712
1397
|
new (): HTMLBsChatbotResponseActionElement;
|
|
713
1398
|
};
|
|
1399
|
+
interface HTMLBsChatbotSourcesDrawerElementEventMap {
|
|
1400
|
+
"bsCollapse": void;
|
|
1401
|
+
}
|
|
1402
|
+
/**
|
|
1403
|
+
* The "Sources" panel shown alongside a Genie AI chat response -- a header with a title, a count
|
|
1404
|
+
* badge, and a collapse chevron, above a stack of `bs-source-link` citation rows.
|
|
1405
|
+
* ## When to use
|
|
1406
|
+
* - Displaying the documents/sources a Genie response cited, typically opened from a "view
|
|
1407
|
+
* sources" action on a `bs-chatbot-response-action` bar.
|
|
1408
|
+
* ## When not to use
|
|
1409
|
+
* - A generic list container -- this component's header (title + count + collapse) is
|
|
1410
|
+
* purpose-built for the sources use case.
|
|
1411
|
+
* @prop --bs-chatbot-sources-drawer-bg - Background of the whole panel. Aliased to `--bs-surface-raised`.
|
|
1412
|
+
* @prop --bs-chatbot-sources-drawer-header-shadow - Drop shadow under the header, separating it
|
|
1413
|
+
* from the scrolled list. Aliased to `--bs-shadow-xs`.
|
|
1414
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-x - Aliased to `--bs-spacing-200`.
|
|
1415
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-top - Aliased to `--bs-spacing-150`.
|
|
1416
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-bottom - Aliased to `--bs-spacing-100`.
|
|
1417
|
+
* @prop --bs-chatbot-sources-drawer-heading-color - Aliased to `--bs-text-default`.
|
|
1418
|
+
* @prop --bs-chatbot-sources-drawer-count-bg - Count badge background. Aliased to
|
|
1419
|
+
* `--bs-badge-bg-neutral-container`.
|
|
1420
|
+
* @prop --bs-chatbot-sources-drawer-count-color - Count badge text color. Aliased to
|
|
1421
|
+
* `--bs-badge-text-neutral`.
|
|
1422
|
+
* @prop --bs-chatbot-sources-drawer-collapse-hover - Collapse button background on hover. Aliased
|
|
1423
|
+
* to `--bs-surface-hover`.
|
|
1424
|
+
* @prop --bs-chatbot-sources-drawer-section-gap - Gap between the header and the list. Aliased to
|
|
1425
|
+
* `--bs-spacing-200`.
|
|
1426
|
+
* @prop --bs-chatbot-sources-drawer-list-padding - Horizontal/bottom padding of the list. Aliased
|
|
1427
|
+
* to `--bs-spacing-200`.
|
|
1428
|
+
* @prop --bs-chatbot-sources-drawer-list-gap - Gap between rows. Aliased to `--bs-spacing-50`.
|
|
1429
|
+
*/
|
|
1430
|
+
interface HTMLBsChatbotSourcesDrawerElement extends Components.BsChatbotSourcesDrawer, HTMLStencilElement {
|
|
1431
|
+
addEventListener<K extends keyof HTMLBsChatbotSourcesDrawerElementEventMap>(type: K, listener: (this: HTMLBsChatbotSourcesDrawerElement, ev: BsChatbotSourcesDrawerCustomEvent<HTMLBsChatbotSourcesDrawerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1432
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1433
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1434
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
1435
|
+
removeEventListener<K extends keyof HTMLBsChatbotSourcesDrawerElementEventMap>(type: K, listener: (this: HTMLBsChatbotSourcesDrawerElement, ev: BsChatbotSourcesDrawerCustomEvent<HTMLBsChatbotSourcesDrawerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
1436
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1437
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1438
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
1439
|
+
}
|
|
1440
|
+
var HTMLBsChatbotSourcesDrawerElement: {
|
|
1441
|
+
prototype: HTMLBsChatbotSourcesDrawerElement;
|
|
1442
|
+
new (): HTMLBsChatbotSourcesDrawerElement;
|
|
1443
|
+
};
|
|
714
1444
|
interface HTMLBsChatbotSuggestionButtonElementEventMap {
|
|
715
1445
|
"bsSelect": void;
|
|
716
1446
|
}
|
|
@@ -813,6 +1543,81 @@ declare global {
|
|
|
813
1543
|
prototype: HTMLBsComposerElement;
|
|
814
1544
|
new (): HTMLBsComposerElement;
|
|
815
1545
|
};
|
|
1546
|
+
interface HTMLBsComposerStatusBannerElementEventMap {
|
|
1547
|
+
"bsAction": void;
|
|
1548
|
+
"bsClose": void;
|
|
1549
|
+
}
|
|
1550
|
+
/**
|
|
1551
|
+
* A full-width status banner for use directly above `bs-composer`, surfacing a message about the
|
|
1552
|
+
* composer's current state (e.g. a send failure, an informational notice) with an optional
|
|
1553
|
+
* "Continue"-style action button and an optional close button.
|
|
1554
|
+
* ## When to use
|
|
1555
|
+
* - A message tied to the composer itself (send failed, rate-limited, draft restored, etc.) that
|
|
1556
|
+
* needs to sit directly above it, not a general-purpose alert -- see `CONVENTIONS.md` if this
|
|
1557
|
+
* library gains a generic banner/alert component later, and prefer that instead once it exists.
|
|
1558
|
+
* ## When not to use
|
|
1559
|
+
* - A toast/snackbar notification unrelated to the composer -- this component is not
|
|
1560
|
+
* self-dismissing and has no positioning of its own (it's a static block, not an overlay).
|
|
1561
|
+
* @prop --bs-composer-status-banner-radius - Corner radius of the top-left/top-right corners
|
|
1562
|
+
* (bottom corners are square, so this sits flush above `bs-composer`). Aliased to
|
|
1563
|
+
* `--bs-border-radius-150`.
|
|
1564
|
+
* @prop --bs-composer-status-banner-padding-x - Horizontal padding. Aliased to `--bs-spacing-150`.
|
|
1565
|
+
* @prop --bs-composer-status-banner-padding-top - Top padding. Aliased to `--bs-spacing-100`.
|
|
1566
|
+
* @prop --bs-composer-status-banner-padding-bottom - Bottom padding. Aliased to `--bs-spacing-200`.
|
|
1567
|
+
* @prop --bs-composer-status-banner-gap - Gap between the message group and the action/close
|
|
1568
|
+
* controls. Aliased to `--bs-spacing-100`.
|
|
1569
|
+
* @prop --bs-composer-status-banner-icon-gap - Gap between the icon and the message text.
|
|
1570
|
+
* Aliased to `--bs-spacing-75`.
|
|
1571
|
+
* @prop --bs-composer-status-banner-error-bg - Background for `type="error"`. Aliased to
|
|
1572
|
+
* `--bs-color-error-container`.
|
|
1573
|
+
* @prop --bs-composer-status-banner-error-text - Text/icon color for `type="error"`. Aliased to
|
|
1574
|
+
* `--bs-text-error`.
|
|
1575
|
+
* @prop --bs-composer-status-banner-error-action-bg - Action button background for
|
|
1576
|
+
* `type="error"`. Aliased to `--bs-color-error-default`.
|
|
1577
|
+
* @prop --bs-composer-status-banner-error-action-bg-hover - Aliased to `--bs-color-error-hover`.
|
|
1578
|
+
* @prop --bs-composer-status-banner-info-bg - Background for `type="info"`. Aliased to
|
|
1579
|
+
* `--bs-color-info-container`.
|
|
1580
|
+
* @prop --bs-composer-status-banner-info-text - Text/icon color for `type="info"`. Aliased to
|
|
1581
|
+
* `--bs-text-info`.
|
|
1582
|
+
* @prop --bs-composer-status-banner-info-action-bg - Action button background for `type="info"`.
|
|
1583
|
+
* Aliased to `--bs-color-info-default`.
|
|
1584
|
+
* @prop --bs-composer-status-banner-info-action-bg-hover - Aliased to `--bs-color-info-hover`.
|
|
1585
|
+
* @prop --bs-composer-status-banner-neutral-bg - Background for `type="neutral"`. Aliased to
|
|
1586
|
+
* `--bs-color-neutral-container`.
|
|
1587
|
+
* @prop --bs-composer-status-banner-neutral-text - Text/icon color for `type="neutral"`. Aliased
|
|
1588
|
+
* to `--bs-text-default`.
|
|
1589
|
+
* @prop --bs-composer-status-banner-neutral-action-bg - Action button background for
|
|
1590
|
+
* `type="neutral"`. Aliased to `--bs-color-neutral-container`.
|
|
1591
|
+
* @prop --bs-composer-status-banner-neutral-action-bg-hover - Aliased to
|
|
1592
|
+
* `--bs-color-neutral-container-hover`.
|
|
1593
|
+
* @prop --bs-composer-status-banner-neutral-action-border - Action button border for
|
|
1594
|
+
* `type="neutral"` (the only variant whose action button is outlined). Aliased to
|
|
1595
|
+
* `--bs-border-neutral-container`.
|
|
1596
|
+
* @prop --bs-composer-status-banner-warning-bg - Background for `type="warning"`. Aliased to
|
|
1597
|
+
* `--bs-color-warning-container`.
|
|
1598
|
+
* @prop --bs-composer-status-banner-warning-text - Text/icon color for `type="warning"`. Aliased
|
|
1599
|
+
* to `--bs-text-warning`.
|
|
1600
|
+
* @prop --bs-composer-status-banner-warning-action-bg - Action button background for
|
|
1601
|
+
* `type="warning"`. Aliased to `--bs-color-warning-default`.
|
|
1602
|
+
* @prop --bs-composer-status-banner-warning-action-bg-hover - Aliased to
|
|
1603
|
+
* `--bs-color-warning-hover`.
|
|
1604
|
+
* @prop --bs-composer-status-banner-close-hover-bg - Close button hover background (same across
|
|
1605
|
+
* every `type`). Aliased to `--bs-color-neutral-container-hover`.
|
|
1606
|
+
*/
|
|
1607
|
+
interface HTMLBsComposerStatusBannerElement extends Components.BsComposerStatusBanner, HTMLStencilElement {
|
|
1608
|
+
addEventListener<K extends keyof HTMLBsComposerStatusBannerElementEventMap>(type: K, listener: (this: HTMLBsComposerStatusBannerElement, ev: BsComposerStatusBannerCustomEvent<HTMLBsComposerStatusBannerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1609
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1610
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1611
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
1612
|
+
removeEventListener<K extends keyof HTMLBsComposerStatusBannerElementEventMap>(type: K, listener: (this: HTMLBsComposerStatusBannerElement, ev: BsComposerStatusBannerCustomEvent<HTMLBsComposerStatusBannerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
1613
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1614
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1615
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
1616
|
+
}
|
|
1617
|
+
var HTMLBsComposerStatusBannerElement: {
|
|
1618
|
+
prototype: HTMLBsComposerStatusBannerElement;
|
|
1619
|
+
new (): HTMLBsComposerStatusBannerElement;
|
|
1620
|
+
};
|
|
816
1621
|
interface HTMLBsDataTableElementEventMap {
|
|
817
1622
|
"bsSort": { column: string; direction: 'asc' | 'desc' };
|
|
818
1623
|
"bsRowSelect": { id: string | number; selected: boolean };
|
|
@@ -845,15 +1650,27 @@ declare global {
|
|
|
845
1650
|
interface HTMLBsInputElementEventMap {
|
|
846
1651
|
"bsInput": string;
|
|
847
1652
|
"bsChange": string;
|
|
1653
|
+
"bsOpen": boolean;
|
|
1654
|
+
"bsChipAdd": string;
|
|
1655
|
+
"bsChipRemove": string;
|
|
1656
|
+
"bsTitleChange": string;
|
|
1657
|
+
"bsCountryChange": string;
|
|
848
1658
|
}
|
|
849
1659
|
/**
|
|
850
|
-
* A single-line text field with an optional label, description, and error state.
|
|
1660
|
+
* A single-line text field with an optional label, description, and error state. Also covers a
|
|
1661
|
+
* range of related "field" shapes (number stepper, password reveal, date, dropdown trigger,
|
|
1662
|
+
* select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
|
|
1663
|
+
* share the same label/description/error/icon-slot chrome.
|
|
851
1664
|
* ## When to use
|
|
852
1665
|
* - Collecting a single line of free-text, email, password, or numeric input.
|
|
1666
|
+
* - Any of the other supported `type`s (search, date, dropdown, select, textarea, chip, initials,
|
|
1667
|
+
* country, pin) that share this component's label/description/error chrome.
|
|
853
1668
|
* - Pair with `error` for inline validation feedback tied to that specific field.
|
|
854
1669
|
* ## When not to use
|
|
855
|
-
* -
|
|
856
|
-
*
|
|
1670
|
+
* - A fixed set of choices best served by a dedicated radio/checkbox group rather than a single
|
|
1671
|
+
* field. `type="select"` (native `<select>`) and `type="dropdown"` (a `bs-menu` of
|
|
1672
|
+
* `bs-menu-item`s from the `options` prop) cover the field-shaped cases; `type="chip"` has no
|
|
1673
|
+
* options list at all (freeform chip entry).
|
|
857
1674
|
*/
|
|
858
1675
|
interface HTMLBsInputElement extends Components.BsInput, HTMLStencilElement {
|
|
859
1676
|
addEventListener<K extends keyof HTMLBsInputElementEventMap>(type: K, listener: (this: HTMLBsInputElement, ev: BsInputCustomEvent<HTMLBsInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
@@ -954,6 +1771,48 @@ declare global {
|
|
|
954
1771
|
prototype: HTMLBsModalElement;
|
|
955
1772
|
new (): HTMLBsModalElement;
|
|
956
1773
|
};
|
|
1774
|
+
interface HTMLBsSourceLinkElementEventMap {
|
|
1775
|
+
"bsOpen": void;
|
|
1776
|
+
}
|
|
1777
|
+
/**
|
|
1778
|
+
* A single citation row inside `bs-chatbot-sources-drawer` -- a file icon + filename on the first
|
|
1779
|
+
* line, the originating system and version on the second, and a trailing "open" arrow.
|
|
1780
|
+
* ## When to use
|
|
1781
|
+
* - One row per source Genie cited in a response, slotted into `bs-chatbot-sources-drawer`.
|
|
1782
|
+
* ## When not to use
|
|
1783
|
+
* - Outside the sources drawer context -- this is a purpose-built citation row, not a generic
|
|
1784
|
+
* link/list-item component.
|
|
1785
|
+
* @prop --bs-source-link-radius - Corner radius of the row. Aliased to `--bs-border-radius-150`.
|
|
1786
|
+
* @prop --bs-source-link-padding - Padding around the row. Aliased to `--bs-spacing-150`.
|
|
1787
|
+
* @prop --bs-source-link-gap - Gap between the filename+meta block and the trailing arrow.
|
|
1788
|
+
* Aliased to `--bs-spacing-50`.
|
|
1789
|
+
* @prop --bs-source-link-icon-gap - Gap between the leading icon and the filename text. Aliased
|
|
1790
|
+
* to `--bs-spacing-75`.
|
|
1791
|
+
* @prop --bs-source-link-hover - Row background on hover/focus. Aliased to `--bs-surface-hover`.
|
|
1792
|
+
* @prop --bs-source-link-pressed - Row background while active/pressed. Aliased to
|
|
1793
|
+
* `--bs-surface-pressed`.
|
|
1794
|
+
* @prop --bs-source-link-focus - Focus-visible outline color. Aliased to
|
|
1795
|
+
* `--bs-border-neutral-focus`.
|
|
1796
|
+
* @prop --bs-source-link-filename-color - Filename text color. Aliased to `--bs-text-default`.
|
|
1797
|
+
* @prop --bs-source-link-meta-color - Source/version text color. Aliased to `--bs-text-secondary`.
|
|
1798
|
+
* @prop --bs-source-link-icon-color - File icon and arrow color. Aliased to `--bs-icon-default`.
|
|
1799
|
+
* @prop --bs-source-link-dot-color - Separator dot between source and version. Aliased to
|
|
1800
|
+
* `--bs-text-secondary`.
|
|
1801
|
+
*/
|
|
1802
|
+
interface HTMLBsSourceLinkElement extends Components.BsSourceLink, HTMLStencilElement {
|
|
1803
|
+
addEventListener<K extends keyof HTMLBsSourceLinkElementEventMap>(type: K, listener: (this: HTMLBsSourceLinkElement, ev: BsSourceLinkCustomEvent<HTMLBsSourceLinkElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1804
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1805
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1806
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
1807
|
+
removeEventListener<K extends keyof HTMLBsSourceLinkElementEventMap>(type: K, listener: (this: HTMLBsSourceLinkElement, ev: BsSourceLinkCustomEvent<HTMLBsSourceLinkElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
1808
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1809
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1810
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
1811
|
+
}
|
|
1812
|
+
var HTMLBsSourceLinkElement: {
|
|
1813
|
+
prototype: HTMLBsSourceLinkElement;
|
|
1814
|
+
new (): HTMLBsSourceLinkElement;
|
|
1815
|
+
};
|
|
957
1816
|
/**
|
|
958
1817
|
* A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
|
|
959
1818
|
* next to a trigger element.
|
|
@@ -988,24 +1847,90 @@ declare global {
|
|
|
988
1847
|
new (): HTMLBsTooltipElement;
|
|
989
1848
|
};
|
|
990
1849
|
interface HTMLElementTagNameMap {
|
|
1850
|
+
"bs-ai-disclaimer": HTMLBsAiDisclaimerElement;
|
|
1851
|
+
"bs-ai-greeting": HTMLBsAiGreetingElement;
|
|
991
1852
|
"bs-ai-thinking": HTMLBsAiThinkingElement;
|
|
1853
|
+
"bs-attachment": HTMLBsAttachmentElement;
|
|
1854
|
+
"bs-attachment-list": HTMLBsAttachmentListElement;
|
|
992
1855
|
"bs-badge": HTMLBsBadgeElement;
|
|
993
1856
|
"bs-button": HTMLBsButtonElement;
|
|
994
1857
|
"bs-button-skeleton": HTMLBsButtonSkeletonElement;
|
|
995
1858
|
"bs-card": HTMLBsCardElement;
|
|
1859
|
+
"bs-chatbot-feedback": HTMLBsChatbotFeedbackElement;
|
|
996
1860
|
"bs-chatbot-header": HTMLBsChatbotHeaderElement;
|
|
997
1861
|
"bs-chatbot-response-action": HTMLBsChatbotResponseActionElement;
|
|
1862
|
+
"bs-chatbot-sources-drawer": HTMLBsChatbotSourcesDrawerElement;
|
|
998
1863
|
"bs-chatbot-suggestion-button": HTMLBsChatbotSuggestionButtonElement;
|
|
999
1864
|
"bs-composer": HTMLBsComposerElement;
|
|
1865
|
+
"bs-composer-status-banner": HTMLBsComposerStatusBannerElement;
|
|
1000
1866
|
"bs-data-table": HTMLBsDataTableElement;
|
|
1001
1867
|
"bs-input": HTMLBsInputElement;
|
|
1002
1868
|
"bs-menu": HTMLBsMenuElement;
|
|
1003
1869
|
"bs-menu-item": HTMLBsMenuItemElement;
|
|
1004
1870
|
"bs-modal": HTMLBsModalElement;
|
|
1871
|
+
"bs-source-link": HTMLBsSourceLinkElement;
|
|
1005
1872
|
"bs-tooltip": HTMLBsTooltipElement;
|
|
1006
1873
|
}
|
|
1007
1874
|
}
|
|
1008
1875
|
declare namespace LocalJSX {
|
|
1876
|
+
/**
|
|
1877
|
+
* A centered caption disclaimer for Genie AI surfaces, e.g. "AI can make mistakes. Please verify
|
|
1878
|
+
* important information."
|
|
1879
|
+
* ## When to use
|
|
1880
|
+
* - Below or above `bs-composer` in a Genie AI chat panel, to remind users AI output can be wrong.
|
|
1881
|
+
* ## When not to use
|
|
1882
|
+
* - A general-purpose caption/helper text — use plain text or `bs-input`'s description slot for
|
|
1883
|
+
* non-AI-related helper copy.
|
|
1884
|
+
* The default slot (rather than a fixed prop) is intentional: Figma only specifies plain text, but
|
|
1885
|
+
* some consuming apps link out to a policy/help page from this copy, and a slot supports that
|
|
1886
|
+
* without inventing an unconfirmed `href`/link prop.
|
|
1887
|
+
* @prop --bs-ai-disclaimer-padding-x - Horizontal padding. Aliased to `--bs-spacing-200`.
|
|
1888
|
+
* @prop --bs-ai-disclaimer-text-color - Text color. Aliased to `--bs-text-secondary`.
|
|
1889
|
+
* @prop --bs-ai-disclaimer-font-size - Text font size. Aliased to `--bs-font-size-sm`.
|
|
1890
|
+
* @prop --bs-ai-disclaimer-line-height - Text line height. Aliased to `--bs-line-height-body-sm`.
|
|
1891
|
+
*/
|
|
1892
|
+
interface BsAiDisclaimer {
|
|
1893
|
+
}
|
|
1894
|
+
/**
|
|
1895
|
+
* The centered welcome heading shown at the top of an empty Genie AI chat panel, e.g.
|
|
1896
|
+
* "Hi. I'm Genie, your AI assistant." + "How can I help you with [product] today?"
|
|
1897
|
+
* ## When to use
|
|
1898
|
+
* - The empty/initial state of a Genie AI chat panel, before the user has sent a message.
|
|
1899
|
+
* ## When not to use
|
|
1900
|
+
* - Once a conversation has started -- this is a one-time empty-state greeting, not a persistent
|
|
1901
|
+
* header (see `bs-chatbot-header` for that).
|
|
1902
|
+
* `productName` is optional: Figma's copy has a `[product_name]` placeholder the consuming app is
|
|
1903
|
+
* expected to fill in, but a component shouldn't force a product name to exist, so leaving it
|
|
1904
|
+
* unset falls back to a product-agnostic "How can I help you today?".
|
|
1905
|
+
* @prop --bs-ai-greeting-gap - Gap between heading and subtext. Aliased to `--bs-spacing-200`.
|
|
1906
|
+
* @prop --bs-ai-greeting-max-width - Max width of the centered content block. Matches Figma's
|
|
1907
|
+
* 490px.
|
|
1908
|
+
* @prop --bs-ai-greeting-heading-color - Heading text color. Aliased to `--bs-text-default`.
|
|
1909
|
+
* @prop --bs-ai-greeting-heading-font-size - Heading font size. Aliased to `--bs-font-size-4xl`.
|
|
1910
|
+
* @prop --bs-ai-greeting-heading-line-height - Heading line height. Figma specifies 28px, which
|
|
1911
|
+
* doesn't match any `--bs-line-height-heading-*` token (h4 is 32) -- aliased directly to
|
|
1912
|
+
* `--bs-line-height-body-lg`, the token that happens to share the same numeric value.
|
|
1913
|
+
* @prop --bs-ai-greeting-heading-weight - Heading font weight. Aliased to `--bs-font-weight-bold`.
|
|
1914
|
+
* @prop --bs-ai-greeting-heading-gap - Gap between the two heading lines. Aliased to
|
|
1915
|
+
* `--bs-spacing-200`.
|
|
1916
|
+
* @prop --bs-ai-greeting-subtext-color - Subtext color. Aliased to `--bs-text-secondary`.
|
|
1917
|
+
* @prop --bs-ai-greeting-subtext-font-size - Subtext font size. Figma specifies 20px, which
|
|
1918
|
+
* doesn't match the semantic `--bs-text-style-body-lg-size` (18px) -- aliased directly to the
|
|
1919
|
+
* raw `--bs-font-size-xl` primitive instead.
|
|
1920
|
+
* @prop --bs-ai-greeting-subtext-line-height - Subtext line height. Aliased to
|
|
1921
|
+
* `--bs-line-height-body-lg`.
|
|
1922
|
+
*/
|
|
1923
|
+
interface BsAiGreeting {
|
|
1924
|
+
/**
|
|
1925
|
+
* The assistant's name, used in the heading ("Hi. I'm {assistantName},").
|
|
1926
|
+
* @default 'Genie'
|
|
1927
|
+
*/
|
|
1928
|
+
"assistantName"?: string;
|
|
1929
|
+
/**
|
|
1930
|
+
* The product name mentioned in the subtext. Omit to use a product-agnostic subtext.
|
|
1931
|
+
*/
|
|
1932
|
+
"productName"?: string;
|
|
1933
|
+
}
|
|
1009
1934
|
/**
|
|
1010
1935
|
* A small inline status indicator for Genie AI surfaces: the colorful Genie mark next to a label
|
|
1011
1936
|
* (e.g. "Retrieving", "Thinking", "Searching") whose text shimmers with a moving highlight band
|
|
@@ -1033,6 +1958,97 @@ declare namespace LocalJSX {
|
|
|
1033
1958
|
*/
|
|
1034
1959
|
"label"?: string;
|
|
1035
1960
|
}
|
|
1961
|
+
/**
|
|
1962
|
+
* A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
|
|
1963
|
+
* with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
|
|
1964
|
+
* a hover/focus-revealed remove button.
|
|
1965
|
+
* ## When to use
|
|
1966
|
+
* - Rendered by the consuming app for each file a user has attached to a Genie AI chat message,
|
|
1967
|
+
* typically alongside or inside `bs-composer`.
|
|
1968
|
+
* ## When not to use
|
|
1969
|
+
* - A generic file-upload control -- this is a preview-only presentational component. The
|
|
1970
|
+
* consuming app owns the actual file picker/upload logic and drives `loading` from that state.
|
|
1971
|
+
* @prop --bs-attachment-size - Width/height of the image thumbnail and of the card. Defaults to 112px.
|
|
1972
|
+
* @prop --bs-attachment-radius - Corner radius of the thumbnail/card. Aliased to
|
|
1973
|
+
* `--bs-border-radius-100`.
|
|
1974
|
+
* @prop --bs-attachment-border-color - Border color of the card / loading image wrap. Aliased to
|
|
1975
|
+
* `--bs-border-default`.
|
|
1976
|
+
* @prop --bs-attachment-card-bg - Card background. Aliased to `--bs-surface-base`.
|
|
1977
|
+
* @prop --bs-attachment-filename-color - Filename text color. Aliased to `--bs-text-default`.
|
|
1978
|
+
* @prop --bs-attachment-badge-bg-pdf - PDF badge background. Aliased to `--bs-badge-bg-error`.
|
|
1979
|
+
* @prop --bs-attachment-badge-bg-document - Document badge background. Aliased to
|
|
1980
|
+
* `--bs-badge-bg-info`.
|
|
1981
|
+
* @prop --bs-attachment-remove-bg - Remove button (neutral icon button) default background.
|
|
1982
|
+
* Aliased to `--bs-button-neutral-container`.
|
|
1983
|
+
* @prop --bs-attachment-remove-hover - Remove button hover background. Aliased to
|
|
1984
|
+
* `--bs-button-neutral-hover`.
|
|
1985
|
+
* @prop --bs-attachment-remove-pressed - Remove button active/pressed background. Aliased to
|
|
1986
|
+
* `--bs-button-neutral-pressed`.
|
|
1987
|
+
* @prop --bs-attachment-remove-focus - Remove button focus outline color. Aliased to
|
|
1988
|
+
* `--bs-border-neutral-focus`.
|
|
1989
|
+
*/
|
|
1990
|
+
interface BsAttachment {
|
|
1991
|
+
/**
|
|
1992
|
+
* The filename shown on the card. Only used when `type` is "pdf" or "document".
|
|
1993
|
+
* @default 'Attachment'
|
|
1994
|
+
*/
|
|
1995
|
+
"fileName"?: string;
|
|
1996
|
+
/**
|
|
1997
|
+
* Accessible alt text for the image thumbnail. Only used when `type` is "image".
|
|
1998
|
+
* @default ''
|
|
1999
|
+
*/
|
|
2000
|
+
"imageAlt"?: string;
|
|
2001
|
+
/**
|
|
2002
|
+
* The thumbnail image URL. Only used when `type` is "image".
|
|
2003
|
+
*/
|
|
2004
|
+
"imageSrc"?: string;
|
|
2005
|
+
/**
|
|
2006
|
+
* Shows an upload-in-progress spinner (blurred + overlaid for images, in the badge for files).
|
|
2007
|
+
* @default false
|
|
2008
|
+
*/
|
|
2009
|
+
"loading"?: boolean;
|
|
2010
|
+
/**
|
|
2011
|
+
* Fires when the remove button is clicked.
|
|
2012
|
+
*/
|
|
2013
|
+
"onBsRemove"?: (event: BsAttachmentCustomEvent<void>) => void;
|
|
2014
|
+
/**
|
|
2015
|
+
* Whether the hover/focus-revealed remove button is rendered at all.
|
|
2016
|
+
* @default true
|
|
2017
|
+
*/
|
|
2018
|
+
"removable"?: boolean;
|
|
2019
|
+
/**
|
|
2020
|
+
* Which kind of attachment preview to render.
|
|
2021
|
+
* @default 'image'
|
|
2022
|
+
*/
|
|
2023
|
+
"type"?: BsAttachmentType;
|
|
2024
|
+
}
|
|
2025
|
+
/**
|
|
2026
|
+
* A horizontally-scrolling row wrapper for one or more `bs-attachment` previews, for slotting into
|
|
2027
|
+
* `bs-composer`'s `attachments` slot when a Genie AI chat message has file attachments.
|
|
2028
|
+
* ## When to use
|
|
2029
|
+
* - Wrapping any number of `bs-attachment` elements the user has attached to a message, so they
|
|
2030
|
+
* lay out in a single row and scroll horizontally instead of wrapping/overflowing once there
|
|
2031
|
+
* are more than fit the available width.
|
|
2032
|
+
* ## When not to use
|
|
2033
|
+
* - A single attachment on its own — just render `bs-attachment` directly, this wrapper's
|
|
2034
|
+
* scroll/fade affordance only matters once there's more content than fits.
|
|
2035
|
+
* @prop --bs-attachment-list-gap - Gap between attachments. Matches the 10px Figma spec (not tied
|
|
2036
|
+
* to the `--bs-spacing-*` scale, which only has 8px/12px neighbors).
|
|
2037
|
+
* @prop --bs-attachment-list-padding - Padding around the row. Aliased to `--bs-spacing-150`.
|
|
2038
|
+
* @prop --bs-attachment-list-fade-color - Color the right-edge fade blends into. Aliased to
|
|
2039
|
+
* `--bs-static-white`.
|
|
2040
|
+
* @prop --bs-attachment-list-fade-width - Width of the right-edge fade overlay. Aliased to
|
|
2041
|
+
* `--bs-spacing-800`.
|
|
2042
|
+
* @prop --bs-attachment-list-scrollbar-thumb - Color of the scrollbar thumb that appears on
|
|
2043
|
+
* hover/focus once the row is scrollable. Aliased to `--bs-neutral-300`.
|
|
2044
|
+
*/
|
|
2045
|
+
interface BsAttachmentList {
|
|
2046
|
+
/**
|
|
2047
|
+
* Accessible name for the scrollable region.
|
|
2048
|
+
* @default 'Attachments'
|
|
2049
|
+
*/
|
|
2050
|
+
"ariaLabel"?: string | null;
|
|
2051
|
+
}
|
|
1036
2052
|
/**
|
|
1037
2053
|
* A small status or category pill, usually paired with a label or list item.
|
|
1038
2054
|
* ## When to use
|
|
@@ -1136,6 +2152,92 @@ declare namespace LocalJSX {
|
|
|
1136
2152
|
*/
|
|
1137
2153
|
"surface"?: BsCardSurface;
|
|
1138
2154
|
}
|
|
2155
|
+
/**
|
|
2156
|
+
* A star-rating feedback card shown at the end of a Genie AI chat: a heading/subtitle, a 5-star
|
|
2157
|
+
* rating, an optional comment, and either "Submit feedback" + "Start new chat" (before
|
|
2158
|
+
* submitting) or just "Start new chat" (after).
|
|
2159
|
+
* ## When to use
|
|
2160
|
+
* - Prompting for feedback on a Genie response or chat session, typically after the user ends or
|
|
2161
|
+
* restarts a conversation.
|
|
2162
|
+
* ## When not to use
|
|
2163
|
+
* - A generic star-rating input elsewhere in the product -- this component's copy and layout are
|
|
2164
|
+
* purpose-built for the Genie feedback flow, not a reusable rating control.
|
|
2165
|
+
* The heading and subtitle are not freeform props: before submitting, they're always the fixed
|
|
2166
|
+
* "How was your experience..." copy; after submitting, they're determined entirely by `rating`
|
|
2167
|
+
* (1-2 stars reads apologetic, 3 neutral, 4-5 positive), matching the Figma source exactly. Use
|
|
2168
|
+
* `heading`/`subtitle` only if a consuming app genuinely needs to override that copy.
|
|
2169
|
+
* @prop --bs-chatbot-feedback-bg - Card background. Aliased to `--bs-surface-raised`.
|
|
2170
|
+
* @prop --bs-chatbot-feedback-border - Card border color. Aliased to `--bs-border-default`.
|
|
2171
|
+
* @prop --bs-chatbot-feedback-radius - Card corner radius. Aliased to `--bs-border-radius-200`.
|
|
2172
|
+
* @prop --bs-chatbot-feedback-padding-x - Card horizontal padding. Aliased to `--bs-spacing-250`.
|
|
2173
|
+
* @prop --bs-chatbot-feedback-padding-y - Card vertical padding. Aliased to `--bs-spacing-550`.
|
|
2174
|
+
* @prop --bs-chatbot-feedback-max-width - Max width of the card. Matches Figma's 762px.
|
|
2175
|
+
* @prop --bs-chatbot-feedback-gap - Gap between the top content block and the button(s). Aliased
|
|
2176
|
+
* to `--bs-spacing-300`.
|
|
2177
|
+
* @prop --bs-chatbot-feedback-top-gap - Gap between heading/subtitle, stars, and the
|
|
2178
|
+
* textarea/comment within the top block. Aliased to `--bs-spacing-250`.
|
|
2179
|
+
* @prop --bs-chatbot-feedback-heading-color - Aliased to `--bs-text-default`.
|
|
2180
|
+
* @prop --bs-chatbot-feedback-subtitle-color - Aliased to `--bs-text-secondary`.
|
|
2181
|
+
* @prop --bs-chatbot-feedback-star-filled - Filled star color. Aliased to `--bs-color-primary-default`.
|
|
2182
|
+
* @prop --bs-chatbot-feedback-star-empty - Empty star color. Aliased to `--bs-border-neutral-container`.
|
|
2183
|
+
* @prop --bs-chatbot-feedback-comment-color - Submitted comment text color. Aliased to `--bs-text-default`.
|
|
2184
|
+
* @prop --bs-chatbot-feedback-close-hover - Close button hover background. Aliased to `--bs-surface-hover`.
|
|
2185
|
+
* @prop --bs-chatbot-feedback-primary-bg - "Submit feedback" / post-submit "Start new chat"
|
|
2186
|
+
* background. Aliased to `--bs-button-primary-default`.
|
|
2187
|
+
* @prop --bs-chatbot-feedback-primary-bg-hover - Aliased to `--bs-button-primary-hover`.
|
|
2188
|
+
* @prop --bs-chatbot-feedback-primary-bg-disabled - Aliased to `--bs-button-primary-disabled`.
|
|
2189
|
+
* @prop --bs-chatbot-feedback-outlined-border - Pre-submit "Start new chat" border. Aliased to
|
|
2190
|
+
* `--bs-border-primary`.
|
|
2191
|
+
* @prop --bs-chatbot-feedback-outlined-hover - Pre-submit "Start new chat" hover background.
|
|
2192
|
+
* Aliased to `--bs-color-primary-container-hover`.
|
|
2193
|
+
* @prop --bs-chatbot-feedback-outlined-text - Pre-submit "Start new chat" text/icon color.
|
|
2194
|
+
* Aliased to `--bs-text-action`.
|
|
2195
|
+
*/
|
|
2196
|
+
interface BsChatbotFeedback {
|
|
2197
|
+
/**
|
|
2198
|
+
* The comment text.
|
|
2199
|
+
* @default ''
|
|
2200
|
+
*/
|
|
2201
|
+
"comment"?: string;
|
|
2202
|
+
/**
|
|
2203
|
+
* Overrides the computed heading (see the class doc for why this is computed by default).
|
|
2204
|
+
*/
|
|
2205
|
+
"heading"?: string;
|
|
2206
|
+
/**
|
|
2207
|
+
* Fires when the close button is clicked. The consuming app owns actually hiding the card.
|
|
2208
|
+
*/
|
|
2209
|
+
"onBsClose"?: (event: BsChatbotFeedbackCustomEvent<void>) => void;
|
|
2210
|
+
/**
|
|
2211
|
+
* Fires on every keystroke in the comment textarea, with the current value.
|
|
2212
|
+
*/
|
|
2213
|
+
"onBsCommentInput"?: (event: BsChatbotFeedbackCustomEvent<string>) => void;
|
|
2214
|
+
/**
|
|
2215
|
+
* Fires when "Start new chat" is clicked. The consuming app owns actually starting a new chat.
|
|
2216
|
+
*/
|
|
2217
|
+
"onBsNewChat"?: (event: BsChatbotFeedbackCustomEvent<void>) => void;
|
|
2218
|
+
/**
|
|
2219
|
+
* Fires when a star is clicked, with the new rating.
|
|
2220
|
+
*/
|
|
2221
|
+
"onBsRatingChange"?: (event: BsChatbotFeedbackCustomEvent<number>) => void;
|
|
2222
|
+
/**
|
|
2223
|
+
* Fires when "Submit feedback" is clicked, with the current rating and comment. Also sets `submitted` to true.
|
|
2224
|
+
*/
|
|
2225
|
+
"onBsSubmit"?: (event: BsChatbotFeedbackCustomEvent<{ rating: number; comment: string }>) => void;
|
|
2226
|
+
/**
|
|
2227
|
+
* Current star rating, 0-5. 0 means no rating has been given yet.
|
|
2228
|
+
* @default 0
|
|
2229
|
+
*/
|
|
2230
|
+
"rating"?: number;
|
|
2231
|
+
/**
|
|
2232
|
+
* Whether feedback has been submitted. Switches the card from the editable form to the read-only "thanks" view.
|
|
2233
|
+
* @default false
|
|
2234
|
+
*/
|
|
2235
|
+
"submitted"?: boolean;
|
|
2236
|
+
/**
|
|
2237
|
+
* Overrides the computed subtitle.
|
|
2238
|
+
*/
|
|
2239
|
+
"subtitle"?: string;
|
|
2240
|
+
}
|
|
1139
2241
|
/**
|
|
1140
2242
|
* The header bar that sits above `bs-composer` in a Genie AI chat panel: the Genie brand mark on
|
|
1141
2243
|
* the left and four fixed actions (new chat, history, expand, close) on the right.
|
|
@@ -1250,6 +2352,49 @@ declare namespace LocalJSX {
|
|
|
1250
2352
|
*/
|
|
1251
2353
|
"sourcesCount"?: number;
|
|
1252
2354
|
}
|
|
2355
|
+
/**
|
|
2356
|
+
* The "Sources" panel shown alongside a Genie AI chat response -- a header with a title, a count
|
|
2357
|
+
* badge, and a collapse chevron, above a stack of `bs-source-link` citation rows.
|
|
2358
|
+
* ## When to use
|
|
2359
|
+
* - Displaying the documents/sources a Genie response cited, typically opened from a "view
|
|
2360
|
+
* sources" action on a `bs-chatbot-response-action` bar.
|
|
2361
|
+
* ## When not to use
|
|
2362
|
+
* - A generic list container -- this component's header (title + count + collapse) is
|
|
2363
|
+
* purpose-built for the sources use case.
|
|
2364
|
+
* @prop --bs-chatbot-sources-drawer-bg - Background of the whole panel. Aliased to `--bs-surface-raised`.
|
|
2365
|
+
* @prop --bs-chatbot-sources-drawer-header-shadow - Drop shadow under the header, separating it
|
|
2366
|
+
* from the scrolled list. Aliased to `--bs-shadow-xs`.
|
|
2367
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-x - Aliased to `--bs-spacing-200`.
|
|
2368
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-top - Aliased to `--bs-spacing-150`.
|
|
2369
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-bottom - Aliased to `--bs-spacing-100`.
|
|
2370
|
+
* @prop --bs-chatbot-sources-drawer-heading-color - Aliased to `--bs-text-default`.
|
|
2371
|
+
* @prop --bs-chatbot-sources-drawer-count-bg - Count badge background. Aliased to
|
|
2372
|
+
* `--bs-badge-bg-neutral-container`.
|
|
2373
|
+
* @prop --bs-chatbot-sources-drawer-count-color - Count badge text color. Aliased to
|
|
2374
|
+
* `--bs-badge-text-neutral`.
|
|
2375
|
+
* @prop --bs-chatbot-sources-drawer-collapse-hover - Collapse button background on hover. Aliased
|
|
2376
|
+
* to `--bs-surface-hover`.
|
|
2377
|
+
* @prop --bs-chatbot-sources-drawer-section-gap - Gap between the header and the list. Aliased to
|
|
2378
|
+
* `--bs-spacing-200`.
|
|
2379
|
+
* @prop --bs-chatbot-sources-drawer-list-padding - Horizontal/bottom padding of the list. Aliased
|
|
2380
|
+
* to `--bs-spacing-200`.
|
|
2381
|
+
* @prop --bs-chatbot-sources-drawer-list-gap - Gap between rows. Aliased to `--bs-spacing-50`.
|
|
2382
|
+
*/
|
|
2383
|
+
interface BsChatbotSourcesDrawer {
|
|
2384
|
+
/**
|
|
2385
|
+
* 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.
|
|
2386
|
+
*/
|
|
2387
|
+
"count"?: number;
|
|
2388
|
+
/**
|
|
2389
|
+
* The panel title.
|
|
2390
|
+
* @default 'Sources'
|
|
2391
|
+
*/
|
|
2392
|
+
"heading"?: string;
|
|
2393
|
+
/**
|
|
2394
|
+
* Fires when the collapse chevron is clicked. The consuming app owns actually hiding the panel.
|
|
2395
|
+
*/
|
|
2396
|
+
"onBsCollapse"?: (event: BsChatbotSourcesDrawerCustomEvent<void>) => void;
|
|
2397
|
+
}
|
|
1253
2398
|
/**
|
|
1254
2399
|
* A pill-shaped clickable suggestion chip for a Genie AI chat panel (e.g. "How can I help you?").
|
|
1255
2400
|
* One instance renders one chip -- to show several suggestion prompts side by side, render
|
|
@@ -1374,6 +2519,103 @@ declare namespace LocalJSX {
|
|
|
1374
2519
|
*/
|
|
1375
2520
|
"variant"?: BsComposerVariant;
|
|
1376
2521
|
}
|
|
2522
|
+
/**
|
|
2523
|
+
* A full-width status banner for use directly above `bs-composer`, surfacing a message about the
|
|
2524
|
+
* composer's current state (e.g. a send failure, an informational notice) with an optional
|
|
2525
|
+
* "Continue"-style action button and an optional close button.
|
|
2526
|
+
* ## When to use
|
|
2527
|
+
* - A message tied to the composer itself (send failed, rate-limited, draft restored, etc.) that
|
|
2528
|
+
* needs to sit directly above it, not a general-purpose alert -- see `CONVENTIONS.md` if this
|
|
2529
|
+
* library gains a generic banner/alert component later, and prefer that instead once it exists.
|
|
2530
|
+
* ## When not to use
|
|
2531
|
+
* - A toast/snackbar notification unrelated to the composer -- this component is not
|
|
2532
|
+
* self-dismissing and has no positioning of its own (it's a static block, not an overlay).
|
|
2533
|
+
* @prop --bs-composer-status-banner-radius - Corner radius of the top-left/top-right corners
|
|
2534
|
+
* (bottom corners are square, so this sits flush above `bs-composer`). Aliased to
|
|
2535
|
+
* `--bs-border-radius-150`.
|
|
2536
|
+
* @prop --bs-composer-status-banner-padding-x - Horizontal padding. Aliased to `--bs-spacing-150`.
|
|
2537
|
+
* @prop --bs-composer-status-banner-padding-top - Top padding. Aliased to `--bs-spacing-100`.
|
|
2538
|
+
* @prop --bs-composer-status-banner-padding-bottom - Bottom padding. Aliased to `--bs-spacing-200`.
|
|
2539
|
+
* @prop --bs-composer-status-banner-gap - Gap between the message group and the action/close
|
|
2540
|
+
* controls. Aliased to `--bs-spacing-100`.
|
|
2541
|
+
* @prop --bs-composer-status-banner-icon-gap - Gap between the icon and the message text.
|
|
2542
|
+
* Aliased to `--bs-spacing-75`.
|
|
2543
|
+
* @prop --bs-composer-status-banner-error-bg - Background for `type="error"`. Aliased to
|
|
2544
|
+
* `--bs-color-error-container`.
|
|
2545
|
+
* @prop --bs-composer-status-banner-error-text - Text/icon color for `type="error"`. Aliased to
|
|
2546
|
+
* `--bs-text-error`.
|
|
2547
|
+
* @prop --bs-composer-status-banner-error-action-bg - Action button background for
|
|
2548
|
+
* `type="error"`. Aliased to `--bs-color-error-default`.
|
|
2549
|
+
* @prop --bs-composer-status-banner-error-action-bg-hover - Aliased to `--bs-color-error-hover`.
|
|
2550
|
+
* @prop --bs-composer-status-banner-info-bg - Background for `type="info"`. Aliased to
|
|
2551
|
+
* `--bs-color-info-container`.
|
|
2552
|
+
* @prop --bs-composer-status-banner-info-text - Text/icon color for `type="info"`. Aliased to
|
|
2553
|
+
* `--bs-text-info`.
|
|
2554
|
+
* @prop --bs-composer-status-banner-info-action-bg - Action button background for `type="info"`.
|
|
2555
|
+
* Aliased to `--bs-color-info-default`.
|
|
2556
|
+
* @prop --bs-composer-status-banner-info-action-bg-hover - Aliased to `--bs-color-info-hover`.
|
|
2557
|
+
* @prop --bs-composer-status-banner-neutral-bg - Background for `type="neutral"`. Aliased to
|
|
2558
|
+
* `--bs-color-neutral-container`.
|
|
2559
|
+
* @prop --bs-composer-status-banner-neutral-text - Text/icon color for `type="neutral"`. Aliased
|
|
2560
|
+
* to `--bs-text-default`.
|
|
2561
|
+
* @prop --bs-composer-status-banner-neutral-action-bg - Action button background for
|
|
2562
|
+
* `type="neutral"`. Aliased to `--bs-color-neutral-container`.
|
|
2563
|
+
* @prop --bs-composer-status-banner-neutral-action-bg-hover - Aliased to
|
|
2564
|
+
* `--bs-color-neutral-container-hover`.
|
|
2565
|
+
* @prop --bs-composer-status-banner-neutral-action-border - Action button border for
|
|
2566
|
+
* `type="neutral"` (the only variant whose action button is outlined). Aliased to
|
|
2567
|
+
* `--bs-border-neutral-container`.
|
|
2568
|
+
* @prop --bs-composer-status-banner-warning-bg - Background for `type="warning"`. Aliased to
|
|
2569
|
+
* `--bs-color-warning-container`.
|
|
2570
|
+
* @prop --bs-composer-status-banner-warning-text - Text/icon color for `type="warning"`. Aliased
|
|
2571
|
+
* to `--bs-text-warning`.
|
|
2572
|
+
* @prop --bs-composer-status-banner-warning-action-bg - Action button background for
|
|
2573
|
+
* `type="warning"`. Aliased to `--bs-color-warning-default`.
|
|
2574
|
+
* @prop --bs-composer-status-banner-warning-action-bg-hover - Aliased to
|
|
2575
|
+
* `--bs-color-warning-hover`.
|
|
2576
|
+
* @prop --bs-composer-status-banner-close-hover-bg - Close button hover background (same across
|
|
2577
|
+
* every `type`). Aliased to `--bs-color-neutral-container-hover`.
|
|
2578
|
+
*/
|
|
2579
|
+
interface BsComposerStatusBanner {
|
|
2580
|
+
/**
|
|
2581
|
+
* Label for the action button, only rendered when `showButton` is true.
|
|
2582
|
+
* @default 'Continue'
|
|
2583
|
+
*/
|
|
2584
|
+
"actionLabel"?: string;
|
|
2585
|
+
/**
|
|
2586
|
+
* Whether the close button is rendered.
|
|
2587
|
+
* @default true
|
|
2588
|
+
*/
|
|
2589
|
+
"allowClose"?: boolean;
|
|
2590
|
+
/**
|
|
2591
|
+
* The message text.
|
|
2592
|
+
* @default 'This is a message'
|
|
2593
|
+
*/
|
|
2594
|
+
"message"?: string;
|
|
2595
|
+
/**
|
|
2596
|
+
* Fires when the action button is clicked. Only relevant when `showButton` is true.
|
|
2597
|
+
*/
|
|
2598
|
+
"onBsAction"?: (event: BsComposerStatusBannerCustomEvent<void>) => void;
|
|
2599
|
+
/**
|
|
2600
|
+
* Fires when the close button is clicked. Only relevant when `allowClose` is true.
|
|
2601
|
+
*/
|
|
2602
|
+
"onBsClose"?: (event: BsComposerStatusBannerCustomEvent<void>) => void;
|
|
2603
|
+
/**
|
|
2604
|
+
* Whether the "Continue"-style action button is rendered.
|
|
2605
|
+
* @default false
|
|
2606
|
+
*/
|
|
2607
|
+
"showButton"?: boolean;
|
|
2608
|
+
/**
|
|
2609
|
+
* Whether the leading icon (default: clock) is rendered.
|
|
2610
|
+
* @default true
|
|
2611
|
+
*/
|
|
2612
|
+
"showIcon"?: boolean;
|
|
2613
|
+
/**
|
|
2614
|
+
* Which severity/style to render. Drives background, text/icon color, and the action button's color.
|
|
2615
|
+
* @default 'error'
|
|
2616
|
+
*/
|
|
2617
|
+
"type"?: BsComposerStatusBannerType;
|
|
2618
|
+
}
|
|
1377
2619
|
/**
|
|
1378
2620
|
* A sortable, optionally row-selectable table for tabular data.
|
|
1379
2621
|
* `columns`, `rows`, and `cellRenderer` are JS-property-only — HTML attributes can only carry
|
|
@@ -1413,31 +2655,133 @@ declare namespace LocalJSX {
|
|
|
1413
2655
|
"sortDirection"?: 'asc' | 'desc';
|
|
1414
2656
|
}
|
|
1415
2657
|
/**
|
|
1416
|
-
* A single-line text field with an optional label, description, and error state.
|
|
2658
|
+
* A single-line text field with an optional label, description, and error state. Also covers a
|
|
2659
|
+
* range of related "field" shapes (number stepper, password reveal, date, dropdown trigger,
|
|
2660
|
+
* select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
|
|
2661
|
+
* share the same label/description/error/icon-slot chrome.
|
|
1417
2662
|
* ## When to use
|
|
1418
2663
|
* - Collecting a single line of free-text, email, password, or numeric input.
|
|
2664
|
+
* - Any of the other supported `type`s (search, date, dropdown, select, textarea, chip, initials,
|
|
2665
|
+
* country, pin) that share this component's label/description/error chrome.
|
|
1419
2666
|
* - Pair with `error` for inline validation feedback tied to that specific field.
|
|
1420
2667
|
* ## When not to use
|
|
1421
|
-
* -
|
|
1422
|
-
*
|
|
2668
|
+
* - A fixed set of choices best served by a dedicated radio/checkbox group rather than a single
|
|
2669
|
+
* field. `type="select"` (native `<select>`) and `type="dropdown"` (a `bs-menu` of
|
|
2670
|
+
* `bs-menu-item`s from the `options` prop) cover the field-shaped cases; `type="chip"` has no
|
|
2671
|
+
* options list at all (freeform chip entry).
|
|
1423
2672
|
*/
|
|
1424
2673
|
interface BsInput {
|
|
2674
|
+
/**
|
|
2675
|
+
* Current chips for `type="chip"`. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule.
|
|
2676
|
+
* @default []
|
|
2677
|
+
*/
|
|
2678
|
+
"chips"?: string[];
|
|
2679
|
+
/**
|
|
2680
|
+
* Current selected country code for `type="country"`.
|
|
2681
|
+
* @default ''
|
|
2682
|
+
*/
|
|
2683
|
+
"country"?: string;
|
|
2684
|
+
/**
|
|
2685
|
+
* Country select options for `type="country"`. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule.
|
|
2686
|
+
* @default []
|
|
2687
|
+
*/
|
|
2688
|
+
"countryOptions"?: { code: string; label: string; flagIcon?: string }[];
|
|
1425
2689
|
"description"?: string;
|
|
1426
2690
|
/**
|
|
1427
2691
|
* @default false
|
|
1428
2692
|
*/
|
|
1429
2693
|
"disabled"?: boolean;
|
|
1430
2694
|
"error"?: string;
|
|
2695
|
+
/**
|
|
2696
|
+
* Current selected title for `type="initials"`. Named `initialsTitle` rather than `title` -- `title` is a reserved standard HTML attribute (tooltip text) inherited by every element, and Stencil warns against shadowing it with a component `@Prop`.
|
|
2697
|
+
* @default ''
|
|
2698
|
+
*/
|
|
2699
|
+
"initialsTitle"?: string;
|
|
1431
2700
|
"label"?: string;
|
|
2701
|
+
/**
|
|
2702
|
+
* Number of cells for `type="pin"`.
|
|
2703
|
+
* @default 4
|
|
2704
|
+
*/
|
|
2705
|
+
"length"?: number;
|
|
2706
|
+
/**
|
|
2707
|
+
* Maximum value for `type="number"`'s stepper buttons.
|
|
2708
|
+
*/
|
|
2709
|
+
"max"?: number;
|
|
2710
|
+
/**
|
|
2711
|
+
* Minimum value for `type="number"`'s stepper buttons.
|
|
2712
|
+
*/
|
|
2713
|
+
"min"?: number;
|
|
1432
2714
|
"onBsChange"?: (event: BsInputCustomEvent<string>) => void;
|
|
2715
|
+
/**
|
|
2716
|
+
* Emitted when a chip is committed (Enter pressed in the draft input) for `type="chip"`.
|
|
2717
|
+
*/
|
|
2718
|
+
"onBsChipAdd"?: (event: BsInputCustomEvent<string>) => void;
|
|
2719
|
+
/**
|
|
2720
|
+
* Emitted when a chip's remove button is clicked for `type="chip"`.
|
|
2721
|
+
*/
|
|
2722
|
+
"onBsChipRemove"?: (event: BsInputCustomEvent<string>) => void;
|
|
2723
|
+
/**
|
|
2724
|
+
* Emitted when the country `<select>` changes for `type="country"`.
|
|
2725
|
+
*/
|
|
2726
|
+
"onBsCountryChange"?: (event: BsInputCustomEvent<string>) => void;
|
|
1433
2727
|
"onBsInput"?: (event: BsInputCustomEvent<string>) => void;
|
|
2728
|
+
/**
|
|
2729
|
+
* Emitted when `type="dropdown"`'s trigger is toggled. See `open`'s doc comment for this type's shell-only limitation.
|
|
2730
|
+
*/
|
|
2731
|
+
"onBsOpen"?: (event: BsInputCustomEvent<boolean>) => void;
|
|
2732
|
+
/**
|
|
2733
|
+
* Emitted when the title `<select>` changes for `type="initials"`.
|
|
2734
|
+
*/
|
|
2735
|
+
"onBsTitleChange"?: (event: BsInputCustomEvent<string>) => void;
|
|
2736
|
+
/**
|
|
2737
|
+
* Whether the `type="dropdown"` trigger is open. Reflects to an attribute so consumers can style an open state via CSS. When `options` is non-empty, this also controls whether the `bs-menu` of `bs-menu-item`s is rendered below the field.
|
|
2738
|
+
* @default false
|
|
2739
|
+
*/
|
|
2740
|
+
"open"?: boolean;
|
|
2741
|
+
/**
|
|
2742
|
+
* Options for `type="select"` (rendered as native `<option>`s) and `type="dropdown"` (rendered as a `bs-menu` of `bs-menu-item`s when `open`). Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule.
|
|
2743
|
+
* @default []
|
|
2744
|
+
*/
|
|
2745
|
+
"options"?: { label: string; value: string }[];
|
|
1434
2746
|
"placeholder"?: string;
|
|
1435
2747
|
/**
|
|
1436
|
-
*
|
|
2748
|
+
* Marks the field as required: renders a red `*` after the label and sets `aria-required="true"` on the control. Applies regardless of `type`.
|
|
2749
|
+
* @default false
|
|
1437
2750
|
*/
|
|
1438
|
-
"
|
|
2751
|
+
"required"?: boolean;
|
|
1439
2752
|
/**
|
|
1440
|
-
*
|
|
2753
|
+
* Number of visible rows for `type="textarea"`.
|
|
2754
|
+
* @default 3
|
|
2755
|
+
*/
|
|
2756
|
+
"rows"?: number;
|
|
2757
|
+
/**
|
|
2758
|
+
* Step size for `type="number"`'s increment/decrement stepper buttons.
|
|
2759
|
+
* @default 1
|
|
2760
|
+
*/
|
|
2761
|
+
"step"?: number;
|
|
2762
|
+
/**
|
|
2763
|
+
* Title select options for `type="initials"` (e.g. `['Mrs.', 'Mr.', 'Dr.']`). Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule.
|
|
2764
|
+
* @default []
|
|
2765
|
+
*/
|
|
2766
|
+
"titleOptions"?: string[];
|
|
2767
|
+
/**
|
|
2768
|
+
* @default 'text'
|
|
2769
|
+
*/
|
|
2770
|
+
"type"?: | 'text'
|
|
2771
|
+
| 'email'
|
|
2772
|
+
| 'password'
|
|
2773
|
+
| 'number'
|
|
2774
|
+
| 'search'
|
|
2775
|
+
| 'date'
|
|
2776
|
+
| 'dropdown'
|
|
2777
|
+
| 'select'
|
|
2778
|
+
| 'textarea'
|
|
2779
|
+
| 'chip'
|
|
2780
|
+
| 'initials'
|
|
2781
|
+
| 'country'
|
|
2782
|
+
| 'pin';
|
|
2783
|
+
/**
|
|
2784
|
+
* Current value. Native `input`/`change` events don't cross the Shadow DOM boundary, so this component re-dispatches them as `bsInput`/`bsChange` custom events instead. Mutable so the `number` type's stepper buttons can update it directly.
|
|
1441
2785
|
* @default ''
|
|
1442
2786
|
*/
|
|
1443
2787
|
"value"?: string;
|
|
@@ -1508,6 +2852,59 @@ declare namespace LocalJSX {
|
|
|
1508
2852
|
*/
|
|
1509
2853
|
"size"?: BsModalSize;
|
|
1510
2854
|
}
|
|
2855
|
+
/**
|
|
2856
|
+
* A single citation row inside `bs-chatbot-sources-drawer` -- a file icon + filename on the first
|
|
2857
|
+
* line, the originating system and version on the second, and a trailing "open" arrow.
|
|
2858
|
+
* ## When to use
|
|
2859
|
+
* - One row per source Genie cited in a response, slotted into `bs-chatbot-sources-drawer`.
|
|
2860
|
+
* ## When not to use
|
|
2861
|
+
* - Outside the sources drawer context -- this is a purpose-built citation row, not a generic
|
|
2862
|
+
* link/list-item component.
|
|
2863
|
+
* @prop --bs-source-link-radius - Corner radius of the row. Aliased to `--bs-border-radius-150`.
|
|
2864
|
+
* @prop --bs-source-link-padding - Padding around the row. Aliased to `--bs-spacing-150`.
|
|
2865
|
+
* @prop --bs-source-link-gap - Gap between the filename+meta block and the trailing arrow.
|
|
2866
|
+
* Aliased to `--bs-spacing-50`.
|
|
2867
|
+
* @prop --bs-source-link-icon-gap - Gap between the leading icon and the filename text. Aliased
|
|
2868
|
+
* to `--bs-spacing-75`.
|
|
2869
|
+
* @prop --bs-source-link-hover - Row background on hover/focus. Aliased to `--bs-surface-hover`.
|
|
2870
|
+
* @prop --bs-source-link-pressed - Row background while active/pressed. Aliased to
|
|
2871
|
+
* `--bs-surface-pressed`.
|
|
2872
|
+
* @prop --bs-source-link-focus - Focus-visible outline color. Aliased to
|
|
2873
|
+
* `--bs-border-neutral-focus`.
|
|
2874
|
+
* @prop --bs-source-link-filename-color - Filename text color. Aliased to `--bs-text-default`.
|
|
2875
|
+
* @prop --bs-source-link-meta-color - Source/version text color. Aliased to `--bs-text-secondary`.
|
|
2876
|
+
* @prop --bs-source-link-icon-color - File icon and arrow color. Aliased to `--bs-icon-default`.
|
|
2877
|
+
* @prop --bs-source-link-dot-color - Separator dot between source and version. Aliased to
|
|
2878
|
+
* `--bs-text-secondary`.
|
|
2879
|
+
*/
|
|
2880
|
+
interface BsSourceLink {
|
|
2881
|
+
/**
|
|
2882
|
+
* The cited document's filename.
|
|
2883
|
+
* @default 'Source'
|
|
2884
|
+
*/
|
|
2885
|
+
"fileName"?: string;
|
|
2886
|
+
/**
|
|
2887
|
+
* If set, renders the row as a link that opens this URL; otherwise as a button that only emits `bsOpen`.
|
|
2888
|
+
*/
|
|
2889
|
+
"href"?: string;
|
|
2890
|
+
/**
|
|
2891
|
+
* Fires on click/activation, whether or not `href` is set -- lets the consuming app log or handle the open.
|
|
2892
|
+
*/
|
|
2893
|
+
"onBsOpen"?: (event: BsSourceLinkCustomEvent<void>) => void;
|
|
2894
|
+
/**
|
|
2895
|
+
* The system/app the document came from (e.g. "HoltePortalen").
|
|
2896
|
+
*/
|
|
2897
|
+
"sourceName"?: string;
|
|
2898
|
+
/**
|
|
2899
|
+
* `target` used when `href` is set.
|
|
2900
|
+
* @default '_blank'
|
|
2901
|
+
*/
|
|
2902
|
+
"target"?: string;
|
|
2903
|
+
/**
|
|
2904
|
+
* The document's version label (e.g. "v3.2"). Omit if the source has no version.
|
|
2905
|
+
*/
|
|
2906
|
+
"version"?: string;
|
|
2907
|
+
}
|
|
1511
2908
|
/**
|
|
1512
2909
|
* A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
|
|
1513
2910
|
* next to a trigger element.
|
|
@@ -1543,9 +2940,24 @@ declare namespace LocalJSX {
|
|
|
1543
2940
|
"placement"?: 'top';
|
|
1544
2941
|
}
|
|
1545
2942
|
|
|
2943
|
+
interface BsAiGreetingAttributes {
|
|
2944
|
+
"assistantName": string;
|
|
2945
|
+
"productName": string;
|
|
2946
|
+
}
|
|
1546
2947
|
interface BsAiThinkingAttributes {
|
|
1547
2948
|
"label": string;
|
|
1548
2949
|
}
|
|
2950
|
+
interface BsAttachmentAttributes {
|
|
2951
|
+
"type": BsAttachmentType;
|
|
2952
|
+
"fileName": string;
|
|
2953
|
+
"imageSrc": string;
|
|
2954
|
+
"imageAlt": string;
|
|
2955
|
+
"loading": boolean;
|
|
2956
|
+
"removable": boolean;
|
|
2957
|
+
}
|
|
2958
|
+
interface BsAttachmentListAttributes {
|
|
2959
|
+
"ariaLabel": string | null;
|
|
2960
|
+
}
|
|
1549
2961
|
interface BsBadgeAttributes {
|
|
1550
2962
|
"variant": BsBadgeVariant;
|
|
1551
2963
|
}
|
|
@@ -1562,6 +2974,13 @@ declare namespace LocalJSX {
|
|
|
1562
2974
|
interface BsCardAttributes {
|
|
1563
2975
|
"surface": BsCardSurface;
|
|
1564
2976
|
}
|
|
2977
|
+
interface BsChatbotFeedbackAttributes {
|
|
2978
|
+
"rating": number;
|
|
2979
|
+
"submitted": boolean;
|
|
2980
|
+
"comment": string;
|
|
2981
|
+
"heading": string;
|
|
2982
|
+
"subtitle": string;
|
|
2983
|
+
}
|
|
1565
2984
|
interface BsChatbotHeaderAttributes {
|
|
1566
2985
|
"heading": string;
|
|
1567
2986
|
"expanded": boolean;
|
|
@@ -1570,6 +2989,10 @@ declare namespace LocalJSX {
|
|
|
1570
2989
|
"sourcesCount": number;
|
|
1571
2990
|
"menuOpen": boolean;
|
|
1572
2991
|
}
|
|
2992
|
+
interface BsChatbotSourcesDrawerAttributes {
|
|
2993
|
+
"heading": string;
|
|
2994
|
+
"count": number;
|
|
2995
|
+
}
|
|
1573
2996
|
interface BsChatbotSuggestionButtonAttributes {
|
|
1574
2997
|
"disabled": boolean;
|
|
1575
2998
|
}
|
|
@@ -1580,6 +3003,14 @@ declare namespace LocalJSX {
|
|
|
1580
3003
|
"state": BsComposerState;
|
|
1581
3004
|
"ariaLabel": string | null;
|
|
1582
3005
|
}
|
|
3006
|
+
interface BsComposerStatusBannerAttributes {
|
|
3007
|
+
"type": BsComposerStatusBannerType;
|
|
3008
|
+
"message": string;
|
|
3009
|
+
"showIcon": boolean;
|
|
3010
|
+
"showButton": boolean;
|
|
3011
|
+
"actionLabel": string;
|
|
3012
|
+
"allowClose": boolean;
|
|
3013
|
+
}
|
|
1583
3014
|
interface BsDataTableAttributes {
|
|
1584
3015
|
"sortColumn": string;
|
|
1585
3016
|
"sortDirection": 'asc' | 'desc';
|
|
@@ -1587,37 +3018,73 @@ declare namespace LocalJSX {
|
|
|
1587
3018
|
}
|
|
1588
3019
|
interface BsInputAttributes {
|
|
1589
3020
|
"value": string;
|
|
1590
|
-
"type":
|
|
3021
|
+
"type": | 'text'
|
|
3022
|
+
| 'email'
|
|
3023
|
+
| 'password'
|
|
3024
|
+
| 'number'
|
|
3025
|
+
| 'search'
|
|
3026
|
+
| 'date'
|
|
3027
|
+
| 'dropdown'
|
|
3028
|
+
| 'select'
|
|
3029
|
+
| 'textarea'
|
|
3030
|
+
| 'chip'
|
|
3031
|
+
| 'initials'
|
|
3032
|
+
| 'country'
|
|
3033
|
+
| 'pin';
|
|
1591
3034
|
"label": string;
|
|
1592
3035
|
"placeholder": string;
|
|
1593
3036
|
"description": string;
|
|
1594
3037
|
"error": string;
|
|
1595
3038
|
"disabled": boolean;
|
|
3039
|
+
"required": boolean;
|
|
3040
|
+
"step": number;
|
|
3041
|
+
"min": number;
|
|
3042
|
+
"max": number;
|
|
3043
|
+
"rows": number;
|
|
3044
|
+
"initialsTitle": string;
|
|
3045
|
+
"country": string;
|
|
3046
|
+
"length": number;
|
|
3047
|
+
"open": boolean;
|
|
1596
3048
|
}
|
|
1597
3049
|
interface BsModalAttributes {
|
|
1598
3050
|
"open": boolean;
|
|
1599
3051
|
"heading": string;
|
|
1600
3052
|
"size": BsModalSize;
|
|
1601
3053
|
}
|
|
3054
|
+
interface BsSourceLinkAttributes {
|
|
3055
|
+
"fileName": string;
|
|
3056
|
+
"sourceName": string;
|
|
3057
|
+
"version": string;
|
|
3058
|
+
"href": string;
|
|
3059
|
+
"target": string;
|
|
3060
|
+
}
|
|
1602
3061
|
interface BsTooltipAttributes {
|
|
1603
3062
|
"placement": 'top';
|
|
1604
3063
|
}
|
|
1605
3064
|
|
|
1606
3065
|
interface IntrinsicElements {
|
|
3066
|
+
"bs-ai-disclaimer": BsAiDisclaimer;
|
|
3067
|
+
"bs-ai-greeting": Omit<BsAiGreeting, keyof BsAiGreetingAttributes> & { [K in keyof BsAiGreeting & keyof BsAiGreetingAttributes]?: BsAiGreeting[K] } & { [K in keyof BsAiGreeting & keyof BsAiGreetingAttributes as `attr:${K}`]?: BsAiGreetingAttributes[K] } & { [K in keyof BsAiGreeting & keyof BsAiGreetingAttributes as `prop:${K}`]?: BsAiGreeting[K] };
|
|
1607
3068
|
"bs-ai-thinking": Omit<BsAiThinking, keyof BsAiThinkingAttributes> & { [K in keyof BsAiThinking & keyof BsAiThinkingAttributes]?: BsAiThinking[K] } & { [K in keyof BsAiThinking & keyof BsAiThinkingAttributes as `attr:${K}`]?: BsAiThinkingAttributes[K] } & { [K in keyof BsAiThinking & keyof BsAiThinkingAttributes as `prop:${K}`]?: BsAiThinking[K] };
|
|
3069
|
+
"bs-attachment": Omit<BsAttachment, keyof BsAttachmentAttributes> & { [K in keyof BsAttachment & keyof BsAttachmentAttributes]?: BsAttachment[K] } & { [K in keyof BsAttachment & keyof BsAttachmentAttributes as `attr:${K}`]?: BsAttachmentAttributes[K] } & { [K in keyof BsAttachment & keyof BsAttachmentAttributes as `prop:${K}`]?: BsAttachment[K] };
|
|
3070
|
+
"bs-attachment-list": Omit<BsAttachmentList, keyof BsAttachmentListAttributes> & { [K in keyof BsAttachmentList & keyof BsAttachmentListAttributes]?: BsAttachmentList[K] } & { [K in keyof BsAttachmentList & keyof BsAttachmentListAttributes as `attr:${K}`]?: BsAttachmentListAttributes[K] } & { [K in keyof BsAttachmentList & keyof BsAttachmentListAttributes as `prop:${K}`]?: BsAttachmentList[K] };
|
|
1608
3071
|
"bs-badge": Omit<BsBadge, keyof BsBadgeAttributes> & { [K in keyof BsBadge & keyof BsBadgeAttributes]?: BsBadge[K] } & { [K in keyof BsBadge & keyof BsBadgeAttributes as `attr:${K}`]?: BsBadgeAttributes[K] } & { [K in keyof BsBadge & keyof BsBadgeAttributes as `prop:${K}`]?: BsBadge[K] };
|
|
1609
3072
|
"bs-button": Omit<BsButton, keyof BsButtonAttributes> & { [K in keyof BsButton & keyof BsButtonAttributes]?: BsButton[K] } & { [K in keyof BsButton & keyof BsButtonAttributes as `attr:${K}`]?: BsButtonAttributes[K] } & { [K in keyof BsButton & keyof BsButtonAttributes as `prop:${K}`]?: BsButton[K] };
|
|
1610
3073
|
"bs-button-skeleton": Omit<BsButtonSkeleton, keyof BsButtonSkeletonAttributes> & { [K in keyof BsButtonSkeleton & keyof BsButtonSkeletonAttributes]?: BsButtonSkeleton[K] } & { [K in keyof BsButtonSkeleton & keyof BsButtonSkeletonAttributes as `attr:${K}`]?: BsButtonSkeletonAttributes[K] } & { [K in keyof BsButtonSkeleton & keyof BsButtonSkeletonAttributes as `prop:${K}`]?: BsButtonSkeleton[K] };
|
|
1611
3074
|
"bs-card": Omit<BsCard, keyof BsCardAttributes> & { [K in keyof BsCard & keyof BsCardAttributes]?: BsCard[K] } & { [K in keyof BsCard & keyof BsCardAttributes as `attr:${K}`]?: BsCardAttributes[K] } & { [K in keyof BsCard & keyof BsCardAttributes as `prop:${K}`]?: BsCard[K] };
|
|
3075
|
+
"bs-chatbot-feedback": Omit<BsChatbotFeedback, keyof BsChatbotFeedbackAttributes> & { [K in keyof BsChatbotFeedback & keyof BsChatbotFeedbackAttributes]?: BsChatbotFeedback[K] } & { [K in keyof BsChatbotFeedback & keyof BsChatbotFeedbackAttributes as `attr:${K}`]?: BsChatbotFeedbackAttributes[K] } & { [K in keyof BsChatbotFeedback & keyof BsChatbotFeedbackAttributes as `prop:${K}`]?: BsChatbotFeedback[K] };
|
|
1612
3076
|
"bs-chatbot-header": Omit<BsChatbotHeader, keyof BsChatbotHeaderAttributes> & { [K in keyof BsChatbotHeader & keyof BsChatbotHeaderAttributes]?: BsChatbotHeader[K] } & { [K in keyof BsChatbotHeader & keyof BsChatbotHeaderAttributes as `attr:${K}`]?: BsChatbotHeaderAttributes[K] } & { [K in keyof BsChatbotHeader & keyof BsChatbotHeaderAttributes as `prop:${K}`]?: BsChatbotHeader[K] };
|
|
1613
3077
|
"bs-chatbot-response-action": Omit<BsChatbotResponseAction, keyof BsChatbotResponseActionAttributes> & { [K in keyof BsChatbotResponseAction & keyof BsChatbotResponseActionAttributes]?: BsChatbotResponseAction[K] } & { [K in keyof BsChatbotResponseAction & keyof BsChatbotResponseActionAttributes as `attr:${K}`]?: BsChatbotResponseActionAttributes[K] } & { [K in keyof BsChatbotResponseAction & keyof BsChatbotResponseActionAttributes as `prop:${K}`]?: BsChatbotResponseAction[K] };
|
|
3078
|
+
"bs-chatbot-sources-drawer": Omit<BsChatbotSourcesDrawer, keyof BsChatbotSourcesDrawerAttributes> & { [K in keyof BsChatbotSourcesDrawer & keyof BsChatbotSourcesDrawerAttributes]?: BsChatbotSourcesDrawer[K] } & { [K in keyof BsChatbotSourcesDrawer & keyof BsChatbotSourcesDrawerAttributes as `attr:${K}`]?: BsChatbotSourcesDrawerAttributes[K] } & { [K in keyof BsChatbotSourcesDrawer & keyof BsChatbotSourcesDrawerAttributes as `prop:${K}`]?: BsChatbotSourcesDrawer[K] };
|
|
1614
3079
|
"bs-chatbot-suggestion-button": Omit<BsChatbotSuggestionButton, keyof BsChatbotSuggestionButtonAttributes> & { [K in keyof BsChatbotSuggestionButton & keyof BsChatbotSuggestionButtonAttributes]?: BsChatbotSuggestionButton[K] } & { [K in keyof BsChatbotSuggestionButton & keyof BsChatbotSuggestionButtonAttributes as `attr:${K}`]?: BsChatbotSuggestionButtonAttributes[K] } & { [K in keyof BsChatbotSuggestionButton & keyof BsChatbotSuggestionButtonAttributes as `prop:${K}`]?: BsChatbotSuggestionButton[K] };
|
|
1615
3080
|
"bs-composer": Omit<BsComposer, keyof BsComposerAttributes> & { [K in keyof BsComposer & keyof BsComposerAttributes]?: BsComposer[K] } & { [K in keyof BsComposer & keyof BsComposerAttributes as `attr:${K}`]?: BsComposerAttributes[K] } & { [K in keyof BsComposer & keyof BsComposerAttributes as `prop:${K}`]?: BsComposer[K] };
|
|
3081
|
+
"bs-composer-status-banner": Omit<BsComposerStatusBanner, keyof BsComposerStatusBannerAttributes> & { [K in keyof BsComposerStatusBanner & keyof BsComposerStatusBannerAttributes]?: BsComposerStatusBanner[K] } & { [K in keyof BsComposerStatusBanner & keyof BsComposerStatusBannerAttributes as `attr:${K}`]?: BsComposerStatusBannerAttributes[K] } & { [K in keyof BsComposerStatusBanner & keyof BsComposerStatusBannerAttributes as `prop:${K}`]?: BsComposerStatusBanner[K] };
|
|
1616
3082
|
"bs-data-table": Omit<BsDataTable, keyof BsDataTableAttributes> & { [K in keyof BsDataTable & keyof BsDataTableAttributes]?: BsDataTable[K] } & { [K in keyof BsDataTable & keyof BsDataTableAttributes as `attr:${K}`]?: BsDataTableAttributes[K] } & { [K in keyof BsDataTable & keyof BsDataTableAttributes as `prop:${K}`]?: BsDataTable[K] };
|
|
1617
3083
|
"bs-input": Omit<BsInput, keyof BsInputAttributes> & { [K in keyof BsInput & keyof BsInputAttributes]?: BsInput[K] } & { [K in keyof BsInput & keyof BsInputAttributes as `attr:${K}`]?: BsInputAttributes[K] } & { [K in keyof BsInput & keyof BsInputAttributes as `prop:${K}`]?: BsInput[K] };
|
|
1618
3084
|
"bs-menu": BsMenu;
|
|
1619
3085
|
"bs-menu-item": BsMenuItem;
|
|
1620
3086
|
"bs-modal": Omit<BsModal, keyof BsModalAttributes> & { [K in keyof BsModal & keyof BsModalAttributes]?: BsModal[K] } & { [K in keyof BsModal & keyof BsModalAttributes as `attr:${K}`]?: BsModalAttributes[K] } & { [K in keyof BsModal & keyof BsModalAttributes as `prop:${K}`]?: BsModal[K] };
|
|
3087
|
+
"bs-source-link": Omit<BsSourceLink, keyof BsSourceLinkAttributes> & { [K in keyof BsSourceLink & keyof BsSourceLinkAttributes]?: BsSourceLink[K] } & { [K in keyof BsSourceLink & keyof BsSourceLinkAttributes as `attr:${K}`]?: BsSourceLinkAttributes[K] } & { [K in keyof BsSourceLink & keyof BsSourceLinkAttributes as `prop:${K}`]?: BsSourceLink[K] };
|
|
1621
3088
|
"bs-tooltip": Omit<BsTooltip, keyof BsTooltipAttributes> & { [K in keyof BsTooltip & keyof BsTooltipAttributes]?: BsTooltip[K] } & { [K in keyof BsTooltip & keyof BsTooltipAttributes as `attr:${K}`]?: BsTooltipAttributes[K] } & { [K in keyof BsTooltip & keyof BsTooltipAttributes as `prop:${K}`]?: BsTooltip[K] };
|
|
1622
3089
|
}
|
|
1623
3090
|
}
|
|
@@ -1625,6 +3092,53 @@ export { LocalJSX as JSX };
|
|
|
1625
3092
|
declare module "@stencil/core" {
|
|
1626
3093
|
export namespace JSX {
|
|
1627
3094
|
interface IntrinsicElements {
|
|
3095
|
+
/**
|
|
3096
|
+
* A centered caption disclaimer for Genie AI surfaces, e.g. "AI can make mistakes. Please verify
|
|
3097
|
+
* important information."
|
|
3098
|
+
* ## When to use
|
|
3099
|
+
* - Below or above `bs-composer` in a Genie AI chat panel, to remind users AI output can be wrong.
|
|
3100
|
+
* ## When not to use
|
|
3101
|
+
* - A general-purpose caption/helper text — use plain text or `bs-input`'s description slot for
|
|
3102
|
+
* non-AI-related helper copy.
|
|
3103
|
+
* The default slot (rather than a fixed prop) is intentional: Figma only specifies plain text, but
|
|
3104
|
+
* some consuming apps link out to a policy/help page from this copy, and a slot supports that
|
|
3105
|
+
* without inventing an unconfirmed `href`/link prop.
|
|
3106
|
+
* @prop --bs-ai-disclaimer-padding-x - Horizontal padding. Aliased to `--bs-spacing-200`.
|
|
3107
|
+
* @prop --bs-ai-disclaimer-text-color - Text color. Aliased to `--bs-text-secondary`.
|
|
3108
|
+
* @prop --bs-ai-disclaimer-font-size - Text font size. Aliased to `--bs-font-size-sm`.
|
|
3109
|
+
* @prop --bs-ai-disclaimer-line-height - Text line height. Aliased to `--bs-line-height-body-sm`.
|
|
3110
|
+
*/
|
|
3111
|
+
"bs-ai-disclaimer": LocalJSX.IntrinsicElements["bs-ai-disclaimer"] & JSXBase.HTMLAttributes<HTMLBsAiDisclaimerElement>;
|
|
3112
|
+
/**
|
|
3113
|
+
* The centered welcome heading shown at the top of an empty Genie AI chat panel, e.g.
|
|
3114
|
+
* "Hi. I'm Genie, your AI assistant." + "How can I help you with [product] today?"
|
|
3115
|
+
* ## When to use
|
|
3116
|
+
* - The empty/initial state of a Genie AI chat panel, before the user has sent a message.
|
|
3117
|
+
* ## When not to use
|
|
3118
|
+
* - Once a conversation has started -- this is a one-time empty-state greeting, not a persistent
|
|
3119
|
+
* header (see `bs-chatbot-header` for that).
|
|
3120
|
+
* `productName` is optional: Figma's copy has a `[product_name]` placeholder the consuming app is
|
|
3121
|
+
* expected to fill in, but a component shouldn't force a product name to exist, so leaving it
|
|
3122
|
+
* unset falls back to a product-agnostic "How can I help you today?".
|
|
3123
|
+
* @prop --bs-ai-greeting-gap - Gap between heading and subtext. Aliased to `--bs-spacing-200`.
|
|
3124
|
+
* @prop --bs-ai-greeting-max-width - Max width of the centered content block. Matches Figma's
|
|
3125
|
+
* 490px.
|
|
3126
|
+
* @prop --bs-ai-greeting-heading-color - Heading text color. Aliased to `--bs-text-default`.
|
|
3127
|
+
* @prop --bs-ai-greeting-heading-font-size - Heading font size. Aliased to `--bs-font-size-4xl`.
|
|
3128
|
+
* @prop --bs-ai-greeting-heading-line-height - Heading line height. Figma specifies 28px, which
|
|
3129
|
+
* doesn't match any `--bs-line-height-heading-*` token (h4 is 32) -- aliased directly to
|
|
3130
|
+
* `--bs-line-height-body-lg`, the token that happens to share the same numeric value.
|
|
3131
|
+
* @prop --bs-ai-greeting-heading-weight - Heading font weight. Aliased to `--bs-font-weight-bold`.
|
|
3132
|
+
* @prop --bs-ai-greeting-heading-gap - Gap between the two heading lines. Aliased to
|
|
3133
|
+
* `--bs-spacing-200`.
|
|
3134
|
+
* @prop --bs-ai-greeting-subtext-color - Subtext color. Aliased to `--bs-text-secondary`.
|
|
3135
|
+
* @prop --bs-ai-greeting-subtext-font-size - Subtext font size. Figma specifies 20px, which
|
|
3136
|
+
* doesn't match the semantic `--bs-text-style-body-lg-size` (18px) -- aliased directly to the
|
|
3137
|
+
* raw `--bs-font-size-xl` primitive instead.
|
|
3138
|
+
* @prop --bs-ai-greeting-subtext-line-height - Subtext line height. Aliased to
|
|
3139
|
+
* `--bs-line-height-body-lg`.
|
|
3140
|
+
*/
|
|
3141
|
+
"bs-ai-greeting": LocalJSX.IntrinsicElements["bs-ai-greeting"] & JSXBase.HTMLAttributes<HTMLBsAiGreetingElement>;
|
|
1628
3142
|
/**
|
|
1629
3143
|
* A small inline status indicator for Genie AI surfaces: the colorful Genie mark next to a label
|
|
1630
3144
|
* (e.g. "Retrieving", "Thinking", "Searching") whose text shimmers with a moving highlight band
|
|
@@ -1646,6 +3160,57 @@ declare module "@stencil/core" {
|
|
|
1646
3160
|
* `--bs-duration-slower` is 500ms), so this is aliased directly to the literal value.
|
|
1647
3161
|
*/
|
|
1648
3162
|
"bs-ai-thinking": LocalJSX.IntrinsicElements["bs-ai-thinking"] & JSXBase.HTMLAttributes<HTMLBsAiThinkingElement>;
|
|
3163
|
+
/**
|
|
3164
|
+
* A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
|
|
3165
|
+
* with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
|
|
3166
|
+
* a hover/focus-revealed remove button.
|
|
3167
|
+
* ## When to use
|
|
3168
|
+
* - Rendered by the consuming app for each file a user has attached to a Genie AI chat message,
|
|
3169
|
+
* typically alongside or inside `bs-composer`.
|
|
3170
|
+
* ## When not to use
|
|
3171
|
+
* - A generic file-upload control -- this is a preview-only presentational component. The
|
|
3172
|
+
* consuming app owns the actual file picker/upload logic and drives `loading` from that state.
|
|
3173
|
+
* @prop --bs-attachment-size - Width/height of the image thumbnail and of the card. Defaults to 112px.
|
|
3174
|
+
* @prop --bs-attachment-radius - Corner radius of the thumbnail/card. Aliased to
|
|
3175
|
+
* `--bs-border-radius-100`.
|
|
3176
|
+
* @prop --bs-attachment-border-color - Border color of the card / loading image wrap. Aliased to
|
|
3177
|
+
* `--bs-border-default`.
|
|
3178
|
+
* @prop --bs-attachment-card-bg - Card background. Aliased to `--bs-surface-base`.
|
|
3179
|
+
* @prop --bs-attachment-filename-color - Filename text color. Aliased to `--bs-text-default`.
|
|
3180
|
+
* @prop --bs-attachment-badge-bg-pdf - PDF badge background. Aliased to `--bs-badge-bg-error`.
|
|
3181
|
+
* @prop --bs-attachment-badge-bg-document - Document badge background. Aliased to
|
|
3182
|
+
* `--bs-badge-bg-info`.
|
|
3183
|
+
* @prop --bs-attachment-remove-bg - Remove button (neutral icon button) default background.
|
|
3184
|
+
* Aliased to `--bs-button-neutral-container`.
|
|
3185
|
+
* @prop --bs-attachment-remove-hover - Remove button hover background. Aliased to
|
|
3186
|
+
* `--bs-button-neutral-hover`.
|
|
3187
|
+
* @prop --bs-attachment-remove-pressed - Remove button active/pressed background. Aliased to
|
|
3188
|
+
* `--bs-button-neutral-pressed`.
|
|
3189
|
+
* @prop --bs-attachment-remove-focus - Remove button focus outline color. Aliased to
|
|
3190
|
+
* `--bs-border-neutral-focus`.
|
|
3191
|
+
*/
|
|
3192
|
+
"bs-attachment": LocalJSX.IntrinsicElements["bs-attachment"] & JSXBase.HTMLAttributes<HTMLBsAttachmentElement>;
|
|
3193
|
+
/**
|
|
3194
|
+
* A horizontally-scrolling row wrapper for one or more `bs-attachment` previews, for slotting into
|
|
3195
|
+
* `bs-composer`'s `attachments` slot when a Genie AI chat message has file attachments.
|
|
3196
|
+
* ## When to use
|
|
3197
|
+
* - Wrapping any number of `bs-attachment` elements the user has attached to a message, so they
|
|
3198
|
+
* lay out in a single row and scroll horizontally instead of wrapping/overflowing once there
|
|
3199
|
+
* are more than fit the available width.
|
|
3200
|
+
* ## When not to use
|
|
3201
|
+
* - A single attachment on its own — just render `bs-attachment` directly, this wrapper's
|
|
3202
|
+
* scroll/fade affordance only matters once there's more content than fits.
|
|
3203
|
+
* @prop --bs-attachment-list-gap - Gap between attachments. Matches the 10px Figma spec (not tied
|
|
3204
|
+
* to the `--bs-spacing-*` scale, which only has 8px/12px neighbors).
|
|
3205
|
+
* @prop --bs-attachment-list-padding - Padding around the row. Aliased to `--bs-spacing-150`.
|
|
3206
|
+
* @prop --bs-attachment-list-fade-color - Color the right-edge fade blends into. Aliased to
|
|
3207
|
+
* `--bs-static-white`.
|
|
3208
|
+
* @prop --bs-attachment-list-fade-width - Width of the right-edge fade overlay. Aliased to
|
|
3209
|
+
* `--bs-spacing-800`.
|
|
3210
|
+
* @prop --bs-attachment-list-scrollbar-thumb - Color of the scrollbar thumb that appears on
|
|
3211
|
+
* hover/focus once the row is scrollable. Aliased to `--bs-neutral-300`.
|
|
3212
|
+
*/
|
|
3213
|
+
"bs-attachment-list": LocalJSX.IntrinsicElements["bs-attachment-list"] & JSXBase.HTMLAttributes<HTMLBsAttachmentListElement>;
|
|
1649
3214
|
/**
|
|
1650
3215
|
* A small status or category pill, usually paired with a label or list item.
|
|
1651
3216
|
* ## When to use
|
|
@@ -1705,6 +3270,48 @@ declare module "@stencil/core" {
|
|
|
1705
3270
|
* - For a dismissible/transient message — use a modal or a dedicated notification component.
|
|
1706
3271
|
*/
|
|
1707
3272
|
"bs-card": LocalJSX.IntrinsicElements["bs-card"] & JSXBase.HTMLAttributes<HTMLBsCardElement>;
|
|
3273
|
+
/**
|
|
3274
|
+
* A star-rating feedback card shown at the end of a Genie AI chat: a heading/subtitle, a 5-star
|
|
3275
|
+
* rating, an optional comment, and either "Submit feedback" + "Start new chat" (before
|
|
3276
|
+
* submitting) or just "Start new chat" (after).
|
|
3277
|
+
* ## When to use
|
|
3278
|
+
* - Prompting for feedback on a Genie response or chat session, typically after the user ends or
|
|
3279
|
+
* restarts a conversation.
|
|
3280
|
+
* ## When not to use
|
|
3281
|
+
* - A generic star-rating input elsewhere in the product -- this component's copy and layout are
|
|
3282
|
+
* purpose-built for the Genie feedback flow, not a reusable rating control.
|
|
3283
|
+
* The heading and subtitle are not freeform props: before submitting, they're always the fixed
|
|
3284
|
+
* "How was your experience..." copy; after submitting, they're determined entirely by `rating`
|
|
3285
|
+
* (1-2 stars reads apologetic, 3 neutral, 4-5 positive), matching the Figma source exactly. Use
|
|
3286
|
+
* `heading`/`subtitle` only if a consuming app genuinely needs to override that copy.
|
|
3287
|
+
* @prop --bs-chatbot-feedback-bg - Card background. Aliased to `--bs-surface-raised`.
|
|
3288
|
+
* @prop --bs-chatbot-feedback-border - Card border color. Aliased to `--bs-border-default`.
|
|
3289
|
+
* @prop --bs-chatbot-feedback-radius - Card corner radius. Aliased to `--bs-border-radius-200`.
|
|
3290
|
+
* @prop --bs-chatbot-feedback-padding-x - Card horizontal padding. Aliased to `--bs-spacing-250`.
|
|
3291
|
+
* @prop --bs-chatbot-feedback-padding-y - Card vertical padding. Aliased to `--bs-spacing-550`.
|
|
3292
|
+
* @prop --bs-chatbot-feedback-max-width - Max width of the card. Matches Figma's 762px.
|
|
3293
|
+
* @prop --bs-chatbot-feedback-gap - Gap between the top content block and the button(s). Aliased
|
|
3294
|
+
* to `--bs-spacing-300`.
|
|
3295
|
+
* @prop --bs-chatbot-feedback-top-gap - Gap between heading/subtitle, stars, and the
|
|
3296
|
+
* textarea/comment within the top block. Aliased to `--bs-spacing-250`.
|
|
3297
|
+
* @prop --bs-chatbot-feedback-heading-color - Aliased to `--bs-text-default`.
|
|
3298
|
+
* @prop --bs-chatbot-feedback-subtitle-color - Aliased to `--bs-text-secondary`.
|
|
3299
|
+
* @prop --bs-chatbot-feedback-star-filled - Filled star color. Aliased to `--bs-color-primary-default`.
|
|
3300
|
+
* @prop --bs-chatbot-feedback-star-empty - Empty star color. Aliased to `--bs-border-neutral-container`.
|
|
3301
|
+
* @prop --bs-chatbot-feedback-comment-color - Submitted comment text color. Aliased to `--bs-text-default`.
|
|
3302
|
+
* @prop --bs-chatbot-feedback-close-hover - Close button hover background. Aliased to `--bs-surface-hover`.
|
|
3303
|
+
* @prop --bs-chatbot-feedback-primary-bg - "Submit feedback" / post-submit "Start new chat"
|
|
3304
|
+
* background. Aliased to `--bs-button-primary-default`.
|
|
3305
|
+
* @prop --bs-chatbot-feedback-primary-bg-hover - Aliased to `--bs-button-primary-hover`.
|
|
3306
|
+
* @prop --bs-chatbot-feedback-primary-bg-disabled - Aliased to `--bs-button-primary-disabled`.
|
|
3307
|
+
* @prop --bs-chatbot-feedback-outlined-border - Pre-submit "Start new chat" border. Aliased to
|
|
3308
|
+
* `--bs-border-primary`.
|
|
3309
|
+
* @prop --bs-chatbot-feedback-outlined-hover - Pre-submit "Start new chat" hover background.
|
|
3310
|
+
* Aliased to `--bs-color-primary-container-hover`.
|
|
3311
|
+
* @prop --bs-chatbot-feedback-outlined-text - Pre-submit "Start new chat" text/icon color.
|
|
3312
|
+
* Aliased to `--bs-text-action`.
|
|
3313
|
+
*/
|
|
3314
|
+
"bs-chatbot-feedback": LocalJSX.IntrinsicElements["bs-chatbot-feedback"] & JSXBase.HTMLAttributes<HTMLBsChatbotFeedbackElement>;
|
|
1708
3315
|
/**
|
|
1709
3316
|
* The header bar that sits above `bs-composer` in a Genie AI chat panel: the Genie brand mark on
|
|
1710
3317
|
* the left and four fixed actions (new chat, history, expand, close) on the right.
|
|
@@ -1758,6 +3365,35 @@ declare module "@stencil/core" {
|
|
|
1758
3365
|
* @prop --bs-chatbot-response-action-sources-line-height - Aliased to `--bs-line-height-body-sm`.
|
|
1759
3366
|
*/
|
|
1760
3367
|
"bs-chatbot-response-action": LocalJSX.IntrinsicElements["bs-chatbot-response-action"] & JSXBase.HTMLAttributes<HTMLBsChatbotResponseActionElement>;
|
|
3368
|
+
/**
|
|
3369
|
+
* The "Sources" panel shown alongside a Genie AI chat response -- a header with a title, a count
|
|
3370
|
+
* badge, and a collapse chevron, above a stack of `bs-source-link` citation rows.
|
|
3371
|
+
* ## When to use
|
|
3372
|
+
* - Displaying the documents/sources a Genie response cited, typically opened from a "view
|
|
3373
|
+
* sources" action on a `bs-chatbot-response-action` bar.
|
|
3374
|
+
* ## When not to use
|
|
3375
|
+
* - A generic list container -- this component's header (title + count + collapse) is
|
|
3376
|
+
* purpose-built for the sources use case.
|
|
3377
|
+
* @prop --bs-chatbot-sources-drawer-bg - Background of the whole panel. Aliased to `--bs-surface-raised`.
|
|
3378
|
+
* @prop --bs-chatbot-sources-drawer-header-shadow - Drop shadow under the header, separating it
|
|
3379
|
+
* from the scrolled list. Aliased to `--bs-shadow-xs`.
|
|
3380
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-x - Aliased to `--bs-spacing-200`.
|
|
3381
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-top - Aliased to `--bs-spacing-150`.
|
|
3382
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-bottom - Aliased to `--bs-spacing-100`.
|
|
3383
|
+
* @prop --bs-chatbot-sources-drawer-heading-color - Aliased to `--bs-text-default`.
|
|
3384
|
+
* @prop --bs-chatbot-sources-drawer-count-bg - Count badge background. Aliased to
|
|
3385
|
+
* `--bs-badge-bg-neutral-container`.
|
|
3386
|
+
* @prop --bs-chatbot-sources-drawer-count-color - Count badge text color. Aliased to
|
|
3387
|
+
* `--bs-badge-text-neutral`.
|
|
3388
|
+
* @prop --bs-chatbot-sources-drawer-collapse-hover - Collapse button background on hover. Aliased
|
|
3389
|
+
* to `--bs-surface-hover`.
|
|
3390
|
+
* @prop --bs-chatbot-sources-drawer-section-gap - Gap between the header and the list. Aliased to
|
|
3391
|
+
* `--bs-spacing-200`.
|
|
3392
|
+
* @prop --bs-chatbot-sources-drawer-list-padding - Horizontal/bottom padding of the list. Aliased
|
|
3393
|
+
* to `--bs-spacing-200`.
|
|
3394
|
+
* @prop --bs-chatbot-sources-drawer-list-gap - Gap between rows. Aliased to `--bs-spacing-50`.
|
|
3395
|
+
*/
|
|
3396
|
+
"bs-chatbot-sources-drawer": LocalJSX.IntrinsicElements["bs-chatbot-sources-drawer"] & JSXBase.HTMLAttributes<HTMLBsChatbotSourcesDrawerElement>;
|
|
1761
3397
|
/**
|
|
1762
3398
|
* A pill-shaped clickable suggestion chip for a Genie AI chat panel (e.g. "How can I help you?").
|
|
1763
3399
|
* One instance renders one chip -- to show several suggestion prompts side by side, render
|
|
@@ -1823,6 +3459,64 @@ declare module "@stencil/core" {
|
|
|
1823
3459
|
* @prop --bs-composer-subtle-pressed - Background of the attach/mic buttons when pressed. Aliased to `--bs-color-neutral-container-pressed`.
|
|
1824
3460
|
*/
|
|
1825
3461
|
"bs-composer": LocalJSX.IntrinsicElements["bs-composer"] & JSXBase.HTMLAttributes<HTMLBsComposerElement>;
|
|
3462
|
+
/**
|
|
3463
|
+
* A full-width status banner for use directly above `bs-composer`, surfacing a message about the
|
|
3464
|
+
* composer's current state (e.g. a send failure, an informational notice) with an optional
|
|
3465
|
+
* "Continue"-style action button and an optional close button.
|
|
3466
|
+
* ## When to use
|
|
3467
|
+
* - A message tied to the composer itself (send failed, rate-limited, draft restored, etc.) that
|
|
3468
|
+
* needs to sit directly above it, not a general-purpose alert -- see `CONVENTIONS.md` if this
|
|
3469
|
+
* library gains a generic banner/alert component later, and prefer that instead once it exists.
|
|
3470
|
+
* ## When not to use
|
|
3471
|
+
* - A toast/snackbar notification unrelated to the composer -- this component is not
|
|
3472
|
+
* self-dismissing and has no positioning of its own (it's a static block, not an overlay).
|
|
3473
|
+
* @prop --bs-composer-status-banner-radius - Corner radius of the top-left/top-right corners
|
|
3474
|
+
* (bottom corners are square, so this sits flush above `bs-composer`). Aliased to
|
|
3475
|
+
* `--bs-border-radius-150`.
|
|
3476
|
+
* @prop --bs-composer-status-banner-padding-x - Horizontal padding. Aliased to `--bs-spacing-150`.
|
|
3477
|
+
* @prop --bs-composer-status-banner-padding-top - Top padding. Aliased to `--bs-spacing-100`.
|
|
3478
|
+
* @prop --bs-composer-status-banner-padding-bottom - Bottom padding. Aliased to `--bs-spacing-200`.
|
|
3479
|
+
* @prop --bs-composer-status-banner-gap - Gap between the message group and the action/close
|
|
3480
|
+
* controls. Aliased to `--bs-spacing-100`.
|
|
3481
|
+
* @prop --bs-composer-status-banner-icon-gap - Gap between the icon and the message text.
|
|
3482
|
+
* Aliased to `--bs-spacing-75`.
|
|
3483
|
+
* @prop --bs-composer-status-banner-error-bg - Background for `type="error"`. Aliased to
|
|
3484
|
+
* `--bs-color-error-container`.
|
|
3485
|
+
* @prop --bs-composer-status-banner-error-text - Text/icon color for `type="error"`. Aliased to
|
|
3486
|
+
* `--bs-text-error`.
|
|
3487
|
+
* @prop --bs-composer-status-banner-error-action-bg - Action button background for
|
|
3488
|
+
* `type="error"`. Aliased to `--bs-color-error-default`.
|
|
3489
|
+
* @prop --bs-composer-status-banner-error-action-bg-hover - Aliased to `--bs-color-error-hover`.
|
|
3490
|
+
* @prop --bs-composer-status-banner-info-bg - Background for `type="info"`. Aliased to
|
|
3491
|
+
* `--bs-color-info-container`.
|
|
3492
|
+
* @prop --bs-composer-status-banner-info-text - Text/icon color for `type="info"`. Aliased to
|
|
3493
|
+
* `--bs-text-info`.
|
|
3494
|
+
* @prop --bs-composer-status-banner-info-action-bg - Action button background for `type="info"`.
|
|
3495
|
+
* Aliased to `--bs-color-info-default`.
|
|
3496
|
+
* @prop --bs-composer-status-banner-info-action-bg-hover - Aliased to `--bs-color-info-hover`.
|
|
3497
|
+
* @prop --bs-composer-status-banner-neutral-bg - Background for `type="neutral"`. Aliased to
|
|
3498
|
+
* `--bs-color-neutral-container`.
|
|
3499
|
+
* @prop --bs-composer-status-banner-neutral-text - Text/icon color for `type="neutral"`. Aliased
|
|
3500
|
+
* to `--bs-text-default`.
|
|
3501
|
+
* @prop --bs-composer-status-banner-neutral-action-bg - Action button background for
|
|
3502
|
+
* `type="neutral"`. Aliased to `--bs-color-neutral-container`.
|
|
3503
|
+
* @prop --bs-composer-status-banner-neutral-action-bg-hover - Aliased to
|
|
3504
|
+
* `--bs-color-neutral-container-hover`.
|
|
3505
|
+
* @prop --bs-composer-status-banner-neutral-action-border - Action button border for
|
|
3506
|
+
* `type="neutral"` (the only variant whose action button is outlined). Aliased to
|
|
3507
|
+
* `--bs-border-neutral-container`.
|
|
3508
|
+
* @prop --bs-composer-status-banner-warning-bg - Background for `type="warning"`. Aliased to
|
|
3509
|
+
* `--bs-color-warning-container`.
|
|
3510
|
+
* @prop --bs-composer-status-banner-warning-text - Text/icon color for `type="warning"`. Aliased
|
|
3511
|
+
* to `--bs-text-warning`.
|
|
3512
|
+
* @prop --bs-composer-status-banner-warning-action-bg - Action button background for
|
|
3513
|
+
* `type="warning"`. Aliased to `--bs-color-warning-default`.
|
|
3514
|
+
* @prop --bs-composer-status-banner-warning-action-bg-hover - Aliased to
|
|
3515
|
+
* `--bs-color-warning-hover`.
|
|
3516
|
+
* @prop --bs-composer-status-banner-close-hover-bg - Close button hover background (same across
|
|
3517
|
+
* every `type`). Aliased to `--bs-color-neutral-container-hover`.
|
|
3518
|
+
*/
|
|
3519
|
+
"bs-composer-status-banner": LocalJSX.IntrinsicElements["bs-composer-status-banner"] & JSXBase.HTMLAttributes<HTMLBsComposerStatusBannerElement>;
|
|
1826
3520
|
/**
|
|
1827
3521
|
* A sortable, optionally row-selectable table for tabular data.
|
|
1828
3522
|
* `columns`, `rows`, and `cellRenderer` are JS-property-only — HTML attributes can only carry
|
|
@@ -1836,13 +3530,20 @@ declare module "@stencil/core" {
|
|
|
1836
3530
|
*/
|
|
1837
3531
|
"bs-data-table": LocalJSX.IntrinsicElements["bs-data-table"] & JSXBase.HTMLAttributes<HTMLBsDataTableElement>;
|
|
1838
3532
|
/**
|
|
1839
|
-
* A single-line text field with an optional label, description, and error state.
|
|
3533
|
+
* A single-line text field with an optional label, description, and error state. Also covers a
|
|
3534
|
+
* range of related "field" shapes (number stepper, password reveal, date, dropdown trigger,
|
|
3535
|
+
* select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
|
|
3536
|
+
* share the same label/description/error/icon-slot chrome.
|
|
1840
3537
|
* ## When to use
|
|
1841
3538
|
* - Collecting a single line of free-text, email, password, or numeric input.
|
|
3539
|
+
* - Any of the other supported `type`s (search, date, dropdown, select, textarea, chip, initials,
|
|
3540
|
+
* country, pin) that share this component's label/description/error chrome.
|
|
1842
3541
|
* - Pair with `error` for inline validation feedback tied to that specific field.
|
|
1843
3542
|
* ## When not to use
|
|
1844
|
-
* -
|
|
1845
|
-
*
|
|
3543
|
+
* - A fixed set of choices best served by a dedicated radio/checkbox group rather than a single
|
|
3544
|
+
* field. `type="select"` (native `<select>`) and `type="dropdown"` (a `bs-menu` of
|
|
3545
|
+
* `bs-menu-item`s from the `options` prop) cover the field-shaped cases; `type="chip"` has no
|
|
3546
|
+
* options list at all (freeform chip entry).
|
|
1846
3547
|
*/
|
|
1847
3548
|
"bs-input": LocalJSX.IntrinsicElements["bs-input"] & JSXBase.HTMLAttributes<HTMLBsInputElement>;
|
|
1848
3549
|
/**
|
|
@@ -1893,6 +3594,32 @@ declare module "@stencil/core" {
|
|
|
1893
3594
|
* modal that just gets taller and taller.
|
|
1894
3595
|
*/
|
|
1895
3596
|
"bs-modal": LocalJSX.IntrinsicElements["bs-modal"] & JSXBase.HTMLAttributes<HTMLBsModalElement>;
|
|
3597
|
+
/**
|
|
3598
|
+
* A single citation row inside `bs-chatbot-sources-drawer` -- a file icon + filename on the first
|
|
3599
|
+
* line, the originating system and version on the second, and a trailing "open" arrow.
|
|
3600
|
+
* ## When to use
|
|
3601
|
+
* - One row per source Genie cited in a response, slotted into `bs-chatbot-sources-drawer`.
|
|
3602
|
+
* ## When not to use
|
|
3603
|
+
* - Outside the sources drawer context -- this is a purpose-built citation row, not a generic
|
|
3604
|
+
* link/list-item component.
|
|
3605
|
+
* @prop --bs-source-link-radius - Corner radius of the row. Aliased to `--bs-border-radius-150`.
|
|
3606
|
+
* @prop --bs-source-link-padding - Padding around the row. Aliased to `--bs-spacing-150`.
|
|
3607
|
+
* @prop --bs-source-link-gap - Gap between the filename+meta block and the trailing arrow.
|
|
3608
|
+
* Aliased to `--bs-spacing-50`.
|
|
3609
|
+
* @prop --bs-source-link-icon-gap - Gap between the leading icon and the filename text. Aliased
|
|
3610
|
+
* to `--bs-spacing-75`.
|
|
3611
|
+
* @prop --bs-source-link-hover - Row background on hover/focus. Aliased to `--bs-surface-hover`.
|
|
3612
|
+
* @prop --bs-source-link-pressed - Row background while active/pressed. Aliased to
|
|
3613
|
+
* `--bs-surface-pressed`.
|
|
3614
|
+
* @prop --bs-source-link-focus - Focus-visible outline color. Aliased to
|
|
3615
|
+
* `--bs-border-neutral-focus`.
|
|
3616
|
+
* @prop --bs-source-link-filename-color - Filename text color. Aliased to `--bs-text-default`.
|
|
3617
|
+
* @prop --bs-source-link-meta-color - Source/version text color. Aliased to `--bs-text-secondary`.
|
|
3618
|
+
* @prop --bs-source-link-icon-color - File icon and arrow color. Aliased to `--bs-icon-default`.
|
|
3619
|
+
* @prop --bs-source-link-dot-color - Separator dot between source and version. Aliased to
|
|
3620
|
+
* `--bs-text-secondary`.
|
|
3621
|
+
*/
|
|
3622
|
+
"bs-source-link": LocalJSX.IntrinsicElements["bs-source-link"] & JSXBase.HTMLAttributes<HTMLBsSourceLinkElement>;
|
|
1896
3623
|
/**
|
|
1897
3624
|
* A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
|
|
1898
3625
|
* next to a trigger element.
|