@brandsync/wc 0.0.8 → 0.0.10
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 +1821 -342
- 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-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-b1e1b2d6.entry.js +1 -0
- 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_2.cjs.entry.js +47 -0
- 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.cmp.test.js +18 -0
- package/dist/collection/components/bs-menu-item/bs-menu-item.css +19 -1
- package/dist/collection/components/bs-menu-item/bs-menu-item.js +34 -2
- package/dist/collection/components/bs-menu-item/bs-menu-item.stories.js +3 -0
- 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-DHbUF0g6.js +1 -0
- package/dist/components/p-DndQiCMP.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_2.entry.js +44 -0
- 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-menu-item/bs-menu-item.d.ts +7 -1
- package/dist/types/components/bs-menu-item/bs-menu-item.stories.d.ts +1 -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 +1776 -24
- 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-item.cjs.entry.js +0 -29
- package/dist/cjs/bs-menu.cjs.entry.js +0 -17
- package/dist/esm/bs-menu-item.entry.js +0 -27
- 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
|
|
379
773
|
*/
|
|
380
|
-
"
|
|
774
|
+
"required": boolean;
|
|
381
775
|
/**
|
|
382
|
-
*
|
|
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
|
|
783
|
+
*/
|
|
784
|
+
"step": number;
|
|
785
|
+
/**
|
|
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;
|
|
@@ -413,14 +838,22 @@ export namespace Components {
|
|
|
413
838
|
* @prop --bs-menu-item-padding-y - Top/bottom padding. Aliased to `--bs-spacing-100`.
|
|
414
839
|
* @prop --bs-menu-item-padding-x - Left/right padding. Aliased to `--bs-spacing-150`.
|
|
415
840
|
* @prop --bs-menu-item-gap - Gap between icon and label. Aliased to `--bs-spacing-100`.
|
|
416
|
-
* @prop --bs-menu-item-hover - Background on hover. Aliased to `--bs-color-neutral-container`.
|
|
841
|
+
* @prop --bs-menu-item-hover - Background on hover. Aliased to `--bs-color-neutral-container-hover`.
|
|
417
842
|
* @prop --bs-menu-item-pressed - Background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
|
|
843
|
+
* @prop --bs-menu-item-disabled-bg - Background when `disabled` is set. Aliased to `--bs-surface-action-disabled`.
|
|
418
844
|
* @prop --bs-menu-item-icon-color - Icon color. Aliased to `--bs-icon-default`.
|
|
845
|
+
* @prop --bs-menu-item-icon-color-disabled - Icon color when `disabled` is set. Aliased to `--bs-icon-disabled`.
|
|
419
846
|
* @prop --bs-menu-item-color - Label text color. Aliased to `--bs-text-muted`.
|
|
847
|
+
* @prop --bs-menu-item-color-disabled - Label text color when `disabled` is set. Aliased to `--bs-text-on-disabled`.
|
|
420
848
|
* @prop --bs-menu-item-font-size - Aliased to `--bs-font-size-md`.
|
|
421
849
|
* @prop --bs-menu-item-line-height - Aliased to `--bs-line-height-body-md`.
|
|
422
850
|
*/
|
|
423
851
|
interface BsMenuItem {
|
|
852
|
+
/**
|
|
853
|
+
* Disables the item: no hover/pressed/focus styling, no pointer cursor, not reachable by keyboard tabbing, and clicking it does not emit `bsSelect`.
|
|
854
|
+
* @default false
|
|
855
|
+
*/
|
|
856
|
+
"disabled": boolean;
|
|
424
857
|
}
|
|
425
858
|
/**
|
|
426
859
|
* An overlay dialog that interrupts the current flow for a focused task or confirmation.
|
|
@@ -445,6 +878,55 @@ export namespace Components {
|
|
|
445
878
|
*/
|
|
446
879
|
"size": BsModalSize;
|
|
447
880
|
}
|
|
881
|
+
/**
|
|
882
|
+
* A single citation row inside `bs-chatbot-sources-drawer` -- a file icon + filename on the first
|
|
883
|
+
* line, the originating system and version on the second, and a trailing "open" arrow.
|
|
884
|
+
* ## When to use
|
|
885
|
+
* - One row per source Genie cited in a response, slotted into `bs-chatbot-sources-drawer`.
|
|
886
|
+
* ## When not to use
|
|
887
|
+
* - Outside the sources drawer context -- this is a purpose-built citation row, not a generic
|
|
888
|
+
* link/list-item component.
|
|
889
|
+
* @prop --bs-source-link-radius - Corner radius of the row. Aliased to `--bs-border-radius-150`.
|
|
890
|
+
* @prop --bs-source-link-padding - Padding around the row. Aliased to `--bs-spacing-150`.
|
|
891
|
+
* @prop --bs-source-link-gap - Gap between the filename+meta block and the trailing arrow.
|
|
892
|
+
* Aliased to `--bs-spacing-50`.
|
|
893
|
+
* @prop --bs-source-link-icon-gap - Gap between the leading icon and the filename text. Aliased
|
|
894
|
+
* to `--bs-spacing-75`.
|
|
895
|
+
* @prop --bs-source-link-hover - Row background on hover/focus. Aliased to `--bs-surface-hover`.
|
|
896
|
+
* @prop --bs-source-link-pressed - Row background while active/pressed. Aliased to
|
|
897
|
+
* `--bs-surface-pressed`.
|
|
898
|
+
* @prop --bs-source-link-focus - Focus-visible outline color. Aliased to
|
|
899
|
+
* `--bs-border-neutral-focus`.
|
|
900
|
+
* @prop --bs-source-link-filename-color - Filename text color. Aliased to `--bs-text-default`.
|
|
901
|
+
* @prop --bs-source-link-meta-color - Source/version text color. Aliased to `--bs-text-secondary`.
|
|
902
|
+
* @prop --bs-source-link-icon-color - File icon and arrow color. Aliased to `--bs-icon-default`.
|
|
903
|
+
* @prop --bs-source-link-dot-color - Separator dot between source and version. Aliased to
|
|
904
|
+
* `--bs-text-secondary`.
|
|
905
|
+
*/
|
|
906
|
+
interface BsSourceLink {
|
|
907
|
+
/**
|
|
908
|
+
* The cited document's filename.
|
|
909
|
+
* @default 'Source'
|
|
910
|
+
*/
|
|
911
|
+
"fileName": string;
|
|
912
|
+
/**
|
|
913
|
+
* If set, renders the row as a link that opens this URL; otherwise as a button that only emits `bsOpen`.
|
|
914
|
+
*/
|
|
915
|
+
"href"?: string;
|
|
916
|
+
/**
|
|
917
|
+
* The system/app the document came from (e.g. "HoltePortalen").
|
|
918
|
+
*/
|
|
919
|
+
"sourceName"?: string;
|
|
920
|
+
/**
|
|
921
|
+
* `target` used when `href` is set.
|
|
922
|
+
* @default '_blank'
|
|
923
|
+
*/
|
|
924
|
+
"target": string;
|
|
925
|
+
/**
|
|
926
|
+
* The document's version label (e.g. "v3.2"). Omit if the source has no version.
|
|
927
|
+
*/
|
|
928
|
+
"version"?: string;
|
|
929
|
+
}
|
|
448
930
|
/**
|
|
449
931
|
* A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
|
|
450
932
|
* next to a trigger element.
|
|
@@ -480,6 +962,14 @@ export namespace Components {
|
|
|
480
962
|
"placement": 'top';
|
|
481
963
|
}
|
|
482
964
|
}
|
|
965
|
+
export interface BsAttachmentCustomEvent<T> extends CustomEvent<T> {
|
|
966
|
+
detail: T;
|
|
967
|
+
target: HTMLBsAttachmentElement;
|
|
968
|
+
}
|
|
969
|
+
export interface BsChatbotFeedbackCustomEvent<T> extends CustomEvent<T> {
|
|
970
|
+
detail: T;
|
|
971
|
+
target: HTMLBsChatbotFeedbackElement;
|
|
972
|
+
}
|
|
483
973
|
export interface BsChatbotHeaderCustomEvent<T> extends CustomEvent<T> {
|
|
484
974
|
detail: T;
|
|
485
975
|
target: HTMLBsChatbotHeaderElement;
|
|
@@ -488,6 +978,10 @@ export interface BsChatbotResponseActionCustomEvent<T> extends CustomEvent<T> {
|
|
|
488
978
|
detail: T;
|
|
489
979
|
target: HTMLBsChatbotResponseActionElement;
|
|
490
980
|
}
|
|
981
|
+
export interface BsChatbotSourcesDrawerCustomEvent<T> extends CustomEvent<T> {
|
|
982
|
+
detail: T;
|
|
983
|
+
target: HTMLBsChatbotSourcesDrawerElement;
|
|
984
|
+
}
|
|
491
985
|
export interface BsChatbotSuggestionButtonCustomEvent<T> extends CustomEvent<T> {
|
|
492
986
|
detail: T;
|
|
493
987
|
target: HTMLBsChatbotSuggestionButtonElement;
|
|
@@ -496,6 +990,10 @@ export interface BsComposerCustomEvent<T> extends CustomEvent<T> {
|
|
|
496
990
|
detail: T;
|
|
497
991
|
target: HTMLBsComposerElement;
|
|
498
992
|
}
|
|
993
|
+
export interface BsComposerStatusBannerCustomEvent<T> extends CustomEvent<T> {
|
|
994
|
+
detail: T;
|
|
995
|
+
target: HTMLBsComposerStatusBannerElement;
|
|
996
|
+
}
|
|
499
997
|
export interface BsDataTableCustomEvent<T> extends CustomEvent<T> {
|
|
500
998
|
detail: T;
|
|
501
999
|
target: HTMLBsDataTableElement;
|
|
@@ -512,7 +1010,68 @@ export interface BsModalCustomEvent<T> extends CustomEvent<T> {
|
|
|
512
1010
|
detail: T;
|
|
513
1011
|
target: HTMLBsModalElement;
|
|
514
1012
|
}
|
|
1013
|
+
export interface BsSourceLinkCustomEvent<T> extends CustomEvent<T> {
|
|
1014
|
+
detail: T;
|
|
1015
|
+
target: HTMLBsSourceLinkElement;
|
|
1016
|
+
}
|
|
515
1017
|
declare global {
|
|
1018
|
+
/**
|
|
1019
|
+
* A centered caption disclaimer for Genie AI surfaces, e.g. "AI can make mistakes. Please verify
|
|
1020
|
+
* important information."
|
|
1021
|
+
* ## When to use
|
|
1022
|
+
* - Below or above `bs-composer` in a Genie AI chat panel, to remind users AI output can be wrong.
|
|
1023
|
+
* ## When not to use
|
|
1024
|
+
* - A general-purpose caption/helper text — use plain text or `bs-input`'s description slot for
|
|
1025
|
+
* non-AI-related helper copy.
|
|
1026
|
+
* The default slot (rather than a fixed prop) is intentional: Figma only specifies plain text, but
|
|
1027
|
+
* some consuming apps link out to a policy/help page from this copy, and a slot supports that
|
|
1028
|
+
* without inventing an unconfirmed `href`/link prop.
|
|
1029
|
+
* @prop --bs-ai-disclaimer-padding-x - Horizontal padding. Aliased to `--bs-spacing-200`.
|
|
1030
|
+
* @prop --bs-ai-disclaimer-text-color - Text color. Aliased to `--bs-text-secondary`.
|
|
1031
|
+
* @prop --bs-ai-disclaimer-font-size - Text font size. Aliased to `--bs-font-size-sm`.
|
|
1032
|
+
* @prop --bs-ai-disclaimer-line-height - Text line height. Aliased to `--bs-line-height-body-sm`.
|
|
1033
|
+
*/
|
|
1034
|
+
interface HTMLBsAiDisclaimerElement extends Components.BsAiDisclaimer, HTMLStencilElement {
|
|
1035
|
+
}
|
|
1036
|
+
var HTMLBsAiDisclaimerElement: {
|
|
1037
|
+
prototype: HTMLBsAiDisclaimerElement;
|
|
1038
|
+
new (): HTMLBsAiDisclaimerElement;
|
|
1039
|
+
};
|
|
1040
|
+
/**
|
|
1041
|
+
* The centered welcome heading shown at the top of an empty Genie AI chat panel, e.g.
|
|
1042
|
+
* "Hi. I'm Genie, your AI assistant." + "How can I help you with [product] today?"
|
|
1043
|
+
* ## When to use
|
|
1044
|
+
* - The empty/initial state of a Genie AI chat panel, before the user has sent a message.
|
|
1045
|
+
* ## When not to use
|
|
1046
|
+
* - Once a conversation has started -- this is a one-time empty-state greeting, not a persistent
|
|
1047
|
+
* header (see `bs-chatbot-header` for that).
|
|
1048
|
+
* `productName` is optional: Figma's copy has a `[product_name]` placeholder the consuming app is
|
|
1049
|
+
* expected to fill in, but a component shouldn't force a product name to exist, so leaving it
|
|
1050
|
+
* unset falls back to a product-agnostic "How can I help you today?".
|
|
1051
|
+
* @prop --bs-ai-greeting-gap - Gap between heading and subtext. Aliased to `--bs-spacing-200`.
|
|
1052
|
+
* @prop --bs-ai-greeting-max-width - Max width of the centered content block. Matches Figma's
|
|
1053
|
+
* 490px.
|
|
1054
|
+
* @prop --bs-ai-greeting-heading-color - Heading text color. Aliased to `--bs-text-default`.
|
|
1055
|
+
* @prop --bs-ai-greeting-heading-font-size - Heading font size. Aliased to `--bs-font-size-4xl`.
|
|
1056
|
+
* @prop --bs-ai-greeting-heading-line-height - Heading line height. Figma specifies 28px, which
|
|
1057
|
+
* doesn't match any `--bs-line-height-heading-*` token (h4 is 32) -- aliased directly to
|
|
1058
|
+
* `--bs-line-height-body-lg`, the token that happens to share the same numeric value.
|
|
1059
|
+
* @prop --bs-ai-greeting-heading-weight - Heading font weight. Aliased to `--bs-font-weight-bold`.
|
|
1060
|
+
* @prop --bs-ai-greeting-heading-gap - Gap between the two heading lines. Aliased to
|
|
1061
|
+
* `--bs-spacing-200`.
|
|
1062
|
+
* @prop --bs-ai-greeting-subtext-color - Subtext color. Aliased to `--bs-text-secondary`.
|
|
1063
|
+
* @prop --bs-ai-greeting-subtext-font-size - Subtext font size. Figma specifies 20px, which
|
|
1064
|
+
* doesn't match the semantic `--bs-text-style-body-lg-size` (18px) -- aliased directly to the
|
|
1065
|
+
* raw `--bs-font-size-xl` primitive instead.
|
|
1066
|
+
* @prop --bs-ai-greeting-subtext-line-height - Subtext line height. Aliased to
|
|
1067
|
+
* `--bs-line-height-body-lg`.
|
|
1068
|
+
*/
|
|
1069
|
+
interface HTMLBsAiGreetingElement extends Components.BsAiGreeting, HTMLStencilElement {
|
|
1070
|
+
}
|
|
1071
|
+
var HTMLBsAiGreetingElement: {
|
|
1072
|
+
prototype: HTMLBsAiGreetingElement;
|
|
1073
|
+
new (): HTMLBsAiGreetingElement;
|
|
1074
|
+
};
|
|
516
1075
|
/**
|
|
517
1076
|
* A small inline status indicator for Genie AI surfaces: the colorful Genie mark next to a label
|
|
518
1077
|
* (e.g. "Retrieving", "Thinking", "Searching") whose text shimmers with a moving highlight band
|
|
@@ -539,6 +1098,78 @@ declare global {
|
|
|
539
1098
|
prototype: HTMLBsAiThinkingElement;
|
|
540
1099
|
new (): HTMLBsAiThinkingElement;
|
|
541
1100
|
};
|
|
1101
|
+
interface HTMLBsAttachmentElementEventMap {
|
|
1102
|
+
"bsRemove": void;
|
|
1103
|
+
}
|
|
1104
|
+
/**
|
|
1105
|
+
* A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
|
|
1106
|
+
* with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
|
|
1107
|
+
* a hover/focus-revealed remove button.
|
|
1108
|
+
* ## When to use
|
|
1109
|
+
* - Rendered by the consuming app for each file a user has attached to a Genie AI chat message,
|
|
1110
|
+
* typically alongside or inside `bs-composer`.
|
|
1111
|
+
* ## When not to use
|
|
1112
|
+
* - A generic file-upload control -- this is a preview-only presentational component. The
|
|
1113
|
+
* consuming app owns the actual file picker/upload logic and drives `loading` from that state.
|
|
1114
|
+
* @prop --bs-attachment-size - Width/height of the image thumbnail and of the card. Defaults to 112px.
|
|
1115
|
+
* @prop --bs-attachment-radius - Corner radius of the thumbnail/card. Aliased to
|
|
1116
|
+
* `--bs-border-radius-100`.
|
|
1117
|
+
* @prop --bs-attachment-border-color - Border color of the card / loading image wrap. Aliased to
|
|
1118
|
+
* `--bs-border-default`.
|
|
1119
|
+
* @prop --bs-attachment-card-bg - Card background. Aliased to `--bs-surface-base`.
|
|
1120
|
+
* @prop --bs-attachment-filename-color - Filename text color. Aliased to `--bs-text-default`.
|
|
1121
|
+
* @prop --bs-attachment-badge-bg-pdf - PDF badge background. Aliased to `--bs-badge-bg-error`.
|
|
1122
|
+
* @prop --bs-attachment-badge-bg-document - Document badge background. Aliased to
|
|
1123
|
+
* `--bs-badge-bg-info`.
|
|
1124
|
+
* @prop --bs-attachment-remove-bg - Remove button (neutral icon button) default background.
|
|
1125
|
+
* Aliased to `--bs-button-neutral-container`.
|
|
1126
|
+
* @prop --bs-attachment-remove-hover - Remove button hover background. Aliased to
|
|
1127
|
+
* `--bs-button-neutral-hover`.
|
|
1128
|
+
* @prop --bs-attachment-remove-pressed - Remove button active/pressed background. Aliased to
|
|
1129
|
+
* `--bs-button-neutral-pressed`.
|
|
1130
|
+
* @prop --bs-attachment-remove-focus - Remove button focus outline color. Aliased to
|
|
1131
|
+
* `--bs-border-neutral-focus`.
|
|
1132
|
+
*/
|
|
1133
|
+
interface HTMLBsAttachmentElement extends Components.BsAttachment, HTMLStencilElement {
|
|
1134
|
+
addEventListener<K extends keyof HTMLBsAttachmentElementEventMap>(type: K, listener: (this: HTMLBsAttachmentElement, ev: BsAttachmentCustomEvent<HTMLBsAttachmentElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1135
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1136
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1137
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
1138
|
+
removeEventListener<K extends keyof HTMLBsAttachmentElementEventMap>(type: K, listener: (this: HTMLBsAttachmentElement, ev: BsAttachmentCustomEvent<HTMLBsAttachmentElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
1139
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1140
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1141
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
1142
|
+
}
|
|
1143
|
+
var HTMLBsAttachmentElement: {
|
|
1144
|
+
prototype: HTMLBsAttachmentElement;
|
|
1145
|
+
new (): HTMLBsAttachmentElement;
|
|
1146
|
+
};
|
|
1147
|
+
/**
|
|
1148
|
+
* A horizontally-scrolling row wrapper for one or more `bs-attachment` previews, for slotting into
|
|
1149
|
+
* `bs-composer`'s `attachments` slot when a Genie AI chat message has file attachments.
|
|
1150
|
+
* ## When to use
|
|
1151
|
+
* - Wrapping any number of `bs-attachment` elements the user has attached to a message, so they
|
|
1152
|
+
* lay out in a single row and scroll horizontally instead of wrapping/overflowing once there
|
|
1153
|
+
* are more than fit the available width.
|
|
1154
|
+
* ## When not to use
|
|
1155
|
+
* - A single attachment on its own — just render `bs-attachment` directly, this wrapper's
|
|
1156
|
+
* scroll/fade affordance only matters once there's more content than fits.
|
|
1157
|
+
* @prop --bs-attachment-list-gap - Gap between attachments. Matches the 10px Figma spec (not tied
|
|
1158
|
+
* to the `--bs-spacing-*` scale, which only has 8px/12px neighbors).
|
|
1159
|
+
* @prop --bs-attachment-list-padding - Padding around the row. Aliased to `--bs-spacing-150`.
|
|
1160
|
+
* @prop --bs-attachment-list-fade-color - Color the right-edge fade blends into. Aliased to
|
|
1161
|
+
* `--bs-static-white`.
|
|
1162
|
+
* @prop --bs-attachment-list-fade-width - Width of the right-edge fade overlay. Aliased to
|
|
1163
|
+
* `--bs-spacing-800`.
|
|
1164
|
+
* @prop --bs-attachment-list-scrollbar-thumb - Color of the scrollbar thumb that appears on
|
|
1165
|
+
* hover/focus once the row is scrollable. Aliased to `--bs-neutral-300`.
|
|
1166
|
+
*/
|
|
1167
|
+
interface HTMLBsAttachmentListElement extends Components.BsAttachmentList, HTMLStencilElement {
|
|
1168
|
+
}
|
|
1169
|
+
var HTMLBsAttachmentListElement: {
|
|
1170
|
+
prototype: HTMLBsAttachmentListElement;
|
|
1171
|
+
new (): HTMLBsAttachmentListElement;
|
|
1172
|
+
};
|
|
542
1173
|
/**
|
|
543
1174
|
* A small status or category pill, usually paired with a label or list item.
|
|
544
1175
|
* ## When to use
|
|
@@ -618,6 +1249,68 @@ declare global {
|
|
|
618
1249
|
prototype: HTMLBsCardElement;
|
|
619
1250
|
new (): HTMLBsCardElement;
|
|
620
1251
|
};
|
|
1252
|
+
interface HTMLBsChatbotFeedbackElementEventMap {
|
|
1253
|
+
"bsRatingChange": number;
|
|
1254
|
+
"bsCommentInput": string;
|
|
1255
|
+
"bsSubmit": { rating: number; comment: string };
|
|
1256
|
+
"bsNewChat": void;
|
|
1257
|
+
"bsClose": void;
|
|
1258
|
+
}
|
|
1259
|
+
/**
|
|
1260
|
+
* A star-rating feedback card shown at the end of a Genie AI chat: a heading/subtitle, a 5-star
|
|
1261
|
+
* rating, an optional comment, and either "Submit feedback" + "Start new chat" (before
|
|
1262
|
+
* submitting) or just "Start new chat" (after).
|
|
1263
|
+
* ## When to use
|
|
1264
|
+
* - Prompting for feedback on a Genie response or chat session, typically after the user ends or
|
|
1265
|
+
* restarts a conversation.
|
|
1266
|
+
* ## When not to use
|
|
1267
|
+
* - A generic star-rating input elsewhere in the product -- this component's copy and layout are
|
|
1268
|
+
* purpose-built for the Genie feedback flow, not a reusable rating control.
|
|
1269
|
+
* The heading and subtitle are not freeform props: before submitting, they're always the fixed
|
|
1270
|
+
* "How was your experience..." copy; after submitting, they're determined entirely by `rating`
|
|
1271
|
+
* (1-2 stars reads apologetic, 3 neutral, 4-5 positive), matching the Figma source exactly. Use
|
|
1272
|
+
* `heading`/`subtitle` only if a consuming app genuinely needs to override that copy.
|
|
1273
|
+
* @prop --bs-chatbot-feedback-bg - Card background. Aliased to `--bs-surface-raised`.
|
|
1274
|
+
* @prop --bs-chatbot-feedback-border - Card border color. Aliased to `--bs-border-default`.
|
|
1275
|
+
* @prop --bs-chatbot-feedback-radius - Card corner radius. Aliased to `--bs-border-radius-200`.
|
|
1276
|
+
* @prop --bs-chatbot-feedback-padding-x - Card horizontal padding. Aliased to `--bs-spacing-250`.
|
|
1277
|
+
* @prop --bs-chatbot-feedback-padding-y - Card vertical padding. Aliased to `--bs-spacing-550`.
|
|
1278
|
+
* @prop --bs-chatbot-feedback-max-width - Max width of the card. Matches Figma's 762px.
|
|
1279
|
+
* @prop --bs-chatbot-feedback-gap - Gap between the top content block and the button(s). Aliased
|
|
1280
|
+
* to `--bs-spacing-300`.
|
|
1281
|
+
* @prop --bs-chatbot-feedback-top-gap - Gap between heading/subtitle, stars, and the
|
|
1282
|
+
* textarea/comment within the top block. Aliased to `--bs-spacing-250`.
|
|
1283
|
+
* @prop --bs-chatbot-feedback-heading-color - Aliased to `--bs-text-default`.
|
|
1284
|
+
* @prop --bs-chatbot-feedback-subtitle-color - Aliased to `--bs-text-secondary`.
|
|
1285
|
+
* @prop --bs-chatbot-feedback-star-filled - Filled star color. Aliased to `--bs-color-primary-default`.
|
|
1286
|
+
* @prop --bs-chatbot-feedback-star-empty - Empty star color. Aliased to `--bs-border-neutral-container`.
|
|
1287
|
+
* @prop --bs-chatbot-feedback-comment-color - Submitted comment text color. Aliased to `--bs-text-default`.
|
|
1288
|
+
* @prop --bs-chatbot-feedback-close-hover - Close button hover background. Aliased to `--bs-surface-hover`.
|
|
1289
|
+
* @prop --bs-chatbot-feedback-primary-bg - "Submit feedback" / post-submit "Start new chat"
|
|
1290
|
+
* background. Aliased to `--bs-button-primary-default`.
|
|
1291
|
+
* @prop --bs-chatbot-feedback-primary-bg-hover - Aliased to `--bs-button-primary-hover`.
|
|
1292
|
+
* @prop --bs-chatbot-feedback-primary-bg-disabled - Aliased to `--bs-button-primary-disabled`.
|
|
1293
|
+
* @prop --bs-chatbot-feedback-outlined-border - Pre-submit "Start new chat" border. Aliased to
|
|
1294
|
+
* `--bs-border-primary`.
|
|
1295
|
+
* @prop --bs-chatbot-feedback-outlined-hover - Pre-submit "Start new chat" hover background.
|
|
1296
|
+
* Aliased to `--bs-color-primary-container-hover`.
|
|
1297
|
+
* @prop --bs-chatbot-feedback-outlined-text - Pre-submit "Start new chat" text/icon color.
|
|
1298
|
+
* Aliased to `--bs-text-action`.
|
|
1299
|
+
*/
|
|
1300
|
+
interface HTMLBsChatbotFeedbackElement extends Components.BsChatbotFeedback, HTMLStencilElement {
|
|
1301
|
+
addEventListener<K extends keyof HTMLBsChatbotFeedbackElementEventMap>(type: K, listener: (this: HTMLBsChatbotFeedbackElement, ev: BsChatbotFeedbackCustomEvent<HTMLBsChatbotFeedbackElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1302
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1303
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1304
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
1305
|
+
removeEventListener<K extends keyof HTMLBsChatbotFeedbackElementEventMap>(type: K, listener: (this: HTMLBsChatbotFeedbackElement, ev: BsChatbotFeedbackCustomEvent<HTMLBsChatbotFeedbackElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
1306
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1307
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1308
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
1309
|
+
}
|
|
1310
|
+
var HTMLBsChatbotFeedbackElement: {
|
|
1311
|
+
prototype: HTMLBsChatbotFeedbackElement;
|
|
1312
|
+
new (): HTMLBsChatbotFeedbackElement;
|
|
1313
|
+
};
|
|
621
1314
|
interface HTMLBsChatbotHeaderElementEventMap {
|
|
622
1315
|
"bsNewChat": void;
|
|
623
1316
|
"bsHistory": void;
|
|
@@ -711,6 +1404,51 @@ declare global {
|
|
|
711
1404
|
prototype: HTMLBsChatbotResponseActionElement;
|
|
712
1405
|
new (): HTMLBsChatbotResponseActionElement;
|
|
713
1406
|
};
|
|
1407
|
+
interface HTMLBsChatbotSourcesDrawerElementEventMap {
|
|
1408
|
+
"bsCollapse": void;
|
|
1409
|
+
}
|
|
1410
|
+
/**
|
|
1411
|
+
* The "Sources" panel shown alongside a Genie AI chat response -- a header with a title, a count
|
|
1412
|
+
* badge, and a collapse chevron, above a stack of `bs-source-link` citation rows.
|
|
1413
|
+
* ## When to use
|
|
1414
|
+
* - Displaying the documents/sources a Genie response cited, typically opened from a "view
|
|
1415
|
+
* sources" action on a `bs-chatbot-response-action` bar.
|
|
1416
|
+
* ## When not to use
|
|
1417
|
+
* - A generic list container -- this component's header (title + count + collapse) is
|
|
1418
|
+
* purpose-built for the sources use case.
|
|
1419
|
+
* @prop --bs-chatbot-sources-drawer-bg - Background of the whole panel. Aliased to `--bs-surface-raised`.
|
|
1420
|
+
* @prop --bs-chatbot-sources-drawer-header-shadow - Drop shadow under the header, separating it
|
|
1421
|
+
* from the scrolled list. Aliased to `--bs-shadow-xs`.
|
|
1422
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-x - Aliased to `--bs-spacing-200`.
|
|
1423
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-top - Aliased to `--bs-spacing-150`.
|
|
1424
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-bottom - Aliased to `--bs-spacing-100`.
|
|
1425
|
+
* @prop --bs-chatbot-sources-drawer-heading-color - Aliased to `--bs-text-default`.
|
|
1426
|
+
* @prop --bs-chatbot-sources-drawer-count-bg - Count badge background. Aliased to
|
|
1427
|
+
* `--bs-badge-bg-neutral-container`.
|
|
1428
|
+
* @prop --bs-chatbot-sources-drawer-count-color - Count badge text color. Aliased to
|
|
1429
|
+
* `--bs-badge-text-neutral`.
|
|
1430
|
+
* @prop --bs-chatbot-sources-drawer-collapse-hover - Collapse button background on hover. Aliased
|
|
1431
|
+
* to `--bs-surface-hover`.
|
|
1432
|
+
* @prop --bs-chatbot-sources-drawer-section-gap - Gap between the header and the list. Aliased to
|
|
1433
|
+
* `--bs-spacing-200`.
|
|
1434
|
+
* @prop --bs-chatbot-sources-drawer-list-padding - Horizontal/bottom padding of the list. Aliased
|
|
1435
|
+
* to `--bs-spacing-200`.
|
|
1436
|
+
* @prop --bs-chatbot-sources-drawer-list-gap - Gap between rows. Aliased to `--bs-spacing-50`.
|
|
1437
|
+
*/
|
|
1438
|
+
interface HTMLBsChatbotSourcesDrawerElement extends Components.BsChatbotSourcesDrawer, HTMLStencilElement {
|
|
1439
|
+
addEventListener<K extends keyof HTMLBsChatbotSourcesDrawerElementEventMap>(type: K, listener: (this: HTMLBsChatbotSourcesDrawerElement, ev: BsChatbotSourcesDrawerCustomEvent<HTMLBsChatbotSourcesDrawerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1440
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1441
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1442
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
1443
|
+
removeEventListener<K extends keyof HTMLBsChatbotSourcesDrawerElementEventMap>(type: K, listener: (this: HTMLBsChatbotSourcesDrawerElement, ev: BsChatbotSourcesDrawerCustomEvent<HTMLBsChatbotSourcesDrawerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
1444
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1445
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1446
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
1447
|
+
}
|
|
1448
|
+
var HTMLBsChatbotSourcesDrawerElement: {
|
|
1449
|
+
prototype: HTMLBsChatbotSourcesDrawerElement;
|
|
1450
|
+
new (): HTMLBsChatbotSourcesDrawerElement;
|
|
1451
|
+
};
|
|
714
1452
|
interface HTMLBsChatbotSuggestionButtonElementEventMap {
|
|
715
1453
|
"bsSelect": void;
|
|
716
1454
|
}
|
|
@@ -813,6 +1551,81 @@ declare global {
|
|
|
813
1551
|
prototype: HTMLBsComposerElement;
|
|
814
1552
|
new (): HTMLBsComposerElement;
|
|
815
1553
|
};
|
|
1554
|
+
interface HTMLBsComposerStatusBannerElementEventMap {
|
|
1555
|
+
"bsAction": void;
|
|
1556
|
+
"bsClose": void;
|
|
1557
|
+
}
|
|
1558
|
+
/**
|
|
1559
|
+
* A full-width status banner for use directly above `bs-composer`, surfacing a message about the
|
|
1560
|
+
* composer's current state (e.g. a send failure, an informational notice) with an optional
|
|
1561
|
+
* "Continue"-style action button and an optional close button.
|
|
1562
|
+
* ## When to use
|
|
1563
|
+
* - A message tied to the composer itself (send failed, rate-limited, draft restored, etc.) that
|
|
1564
|
+
* needs to sit directly above it, not a general-purpose alert -- see `CONVENTIONS.md` if this
|
|
1565
|
+
* library gains a generic banner/alert component later, and prefer that instead once it exists.
|
|
1566
|
+
* ## When not to use
|
|
1567
|
+
* - A toast/snackbar notification unrelated to the composer -- this component is not
|
|
1568
|
+
* self-dismissing and has no positioning of its own (it's a static block, not an overlay).
|
|
1569
|
+
* @prop --bs-composer-status-banner-radius - Corner radius of the top-left/top-right corners
|
|
1570
|
+
* (bottom corners are square, so this sits flush above `bs-composer`). Aliased to
|
|
1571
|
+
* `--bs-border-radius-150`.
|
|
1572
|
+
* @prop --bs-composer-status-banner-padding-x - Horizontal padding. Aliased to `--bs-spacing-150`.
|
|
1573
|
+
* @prop --bs-composer-status-banner-padding-top - Top padding. Aliased to `--bs-spacing-100`.
|
|
1574
|
+
* @prop --bs-composer-status-banner-padding-bottom - Bottom padding. Aliased to `--bs-spacing-200`.
|
|
1575
|
+
* @prop --bs-composer-status-banner-gap - Gap between the message group and the action/close
|
|
1576
|
+
* controls. Aliased to `--bs-spacing-100`.
|
|
1577
|
+
* @prop --bs-composer-status-banner-icon-gap - Gap between the icon and the message text.
|
|
1578
|
+
* Aliased to `--bs-spacing-75`.
|
|
1579
|
+
* @prop --bs-composer-status-banner-error-bg - Background for `type="error"`. Aliased to
|
|
1580
|
+
* `--bs-color-error-container`.
|
|
1581
|
+
* @prop --bs-composer-status-banner-error-text - Text/icon color for `type="error"`. Aliased to
|
|
1582
|
+
* `--bs-text-error`.
|
|
1583
|
+
* @prop --bs-composer-status-banner-error-action-bg - Action button background for
|
|
1584
|
+
* `type="error"`. Aliased to `--bs-color-error-default`.
|
|
1585
|
+
* @prop --bs-composer-status-banner-error-action-bg-hover - Aliased to `--bs-color-error-hover`.
|
|
1586
|
+
* @prop --bs-composer-status-banner-info-bg - Background for `type="info"`. Aliased to
|
|
1587
|
+
* `--bs-color-info-container`.
|
|
1588
|
+
* @prop --bs-composer-status-banner-info-text - Text/icon color for `type="info"`. Aliased to
|
|
1589
|
+
* `--bs-text-info`.
|
|
1590
|
+
* @prop --bs-composer-status-banner-info-action-bg - Action button background for `type="info"`.
|
|
1591
|
+
* Aliased to `--bs-color-info-default`.
|
|
1592
|
+
* @prop --bs-composer-status-banner-info-action-bg-hover - Aliased to `--bs-color-info-hover`.
|
|
1593
|
+
* @prop --bs-composer-status-banner-neutral-bg - Background for `type="neutral"`. Aliased to
|
|
1594
|
+
* `--bs-color-neutral-container`.
|
|
1595
|
+
* @prop --bs-composer-status-banner-neutral-text - Text/icon color for `type="neutral"`. Aliased
|
|
1596
|
+
* to `--bs-text-default`.
|
|
1597
|
+
* @prop --bs-composer-status-banner-neutral-action-bg - Action button background for
|
|
1598
|
+
* `type="neutral"`. Aliased to `--bs-color-neutral-container`.
|
|
1599
|
+
* @prop --bs-composer-status-banner-neutral-action-bg-hover - Aliased to
|
|
1600
|
+
* `--bs-color-neutral-container-hover`.
|
|
1601
|
+
* @prop --bs-composer-status-banner-neutral-action-border - Action button border for
|
|
1602
|
+
* `type="neutral"` (the only variant whose action button is outlined). Aliased to
|
|
1603
|
+
* `--bs-border-neutral-container`.
|
|
1604
|
+
* @prop --bs-composer-status-banner-warning-bg - Background for `type="warning"`. Aliased to
|
|
1605
|
+
* `--bs-color-warning-container`.
|
|
1606
|
+
* @prop --bs-composer-status-banner-warning-text - Text/icon color for `type="warning"`. Aliased
|
|
1607
|
+
* to `--bs-text-warning`.
|
|
1608
|
+
* @prop --bs-composer-status-banner-warning-action-bg - Action button background for
|
|
1609
|
+
* `type="warning"`. Aliased to `--bs-color-warning-default`.
|
|
1610
|
+
* @prop --bs-composer-status-banner-warning-action-bg-hover - Aliased to
|
|
1611
|
+
* `--bs-color-warning-hover`.
|
|
1612
|
+
* @prop --bs-composer-status-banner-close-hover-bg - Close button hover background (same across
|
|
1613
|
+
* every `type`). Aliased to `--bs-color-neutral-container-hover`.
|
|
1614
|
+
*/
|
|
1615
|
+
interface HTMLBsComposerStatusBannerElement extends Components.BsComposerStatusBanner, HTMLStencilElement {
|
|
1616
|
+
addEventListener<K extends keyof HTMLBsComposerStatusBannerElementEventMap>(type: K, listener: (this: HTMLBsComposerStatusBannerElement, ev: BsComposerStatusBannerCustomEvent<HTMLBsComposerStatusBannerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1617
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1618
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1619
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
1620
|
+
removeEventListener<K extends keyof HTMLBsComposerStatusBannerElementEventMap>(type: K, listener: (this: HTMLBsComposerStatusBannerElement, ev: BsComposerStatusBannerCustomEvent<HTMLBsComposerStatusBannerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
1621
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1622
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1623
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
1624
|
+
}
|
|
1625
|
+
var HTMLBsComposerStatusBannerElement: {
|
|
1626
|
+
prototype: HTMLBsComposerStatusBannerElement;
|
|
1627
|
+
new (): HTMLBsComposerStatusBannerElement;
|
|
1628
|
+
};
|
|
816
1629
|
interface HTMLBsDataTableElementEventMap {
|
|
817
1630
|
"bsSort": { column: string; direction: 'asc' | 'desc' };
|
|
818
1631
|
"bsRowSelect": { id: string | number; selected: boolean };
|
|
@@ -845,15 +1658,27 @@ declare global {
|
|
|
845
1658
|
interface HTMLBsInputElementEventMap {
|
|
846
1659
|
"bsInput": string;
|
|
847
1660
|
"bsChange": string;
|
|
1661
|
+
"bsOpen": boolean;
|
|
1662
|
+
"bsChipAdd": string;
|
|
1663
|
+
"bsChipRemove": string;
|
|
1664
|
+
"bsTitleChange": string;
|
|
1665
|
+
"bsCountryChange": string;
|
|
848
1666
|
}
|
|
849
1667
|
/**
|
|
850
|
-
* A single-line text field with an optional label, description, and error state.
|
|
1668
|
+
* A single-line text field with an optional label, description, and error state. Also covers a
|
|
1669
|
+
* range of related "field" shapes (number stepper, password reveal, date, dropdown trigger,
|
|
1670
|
+
* select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
|
|
1671
|
+
* share the same label/description/error/icon-slot chrome.
|
|
851
1672
|
* ## When to use
|
|
852
1673
|
* - Collecting a single line of free-text, email, password, or numeric input.
|
|
1674
|
+
* - Any of the other supported `type`s (search, date, dropdown, select, textarea, chip, initials,
|
|
1675
|
+
* country, pin) that share this component's label/description/error chrome.
|
|
853
1676
|
* - Pair with `error` for inline validation feedback tied to that specific field.
|
|
854
1677
|
* ## When not to use
|
|
855
|
-
* -
|
|
856
|
-
*
|
|
1678
|
+
* - A fixed set of choices best served by a dedicated radio/checkbox group rather than a single
|
|
1679
|
+
* field. `type="select"` (native `<select>`) and `type="dropdown"` (a `bs-menu` of
|
|
1680
|
+
* `bs-menu-item`s from the `options` prop) cover the field-shaped cases; `type="chip"` has no
|
|
1681
|
+
* options list at all (freeform chip entry).
|
|
857
1682
|
*/
|
|
858
1683
|
interface HTMLBsInputElement extends Components.BsInput, HTMLStencilElement {
|
|
859
1684
|
addEventListener<K extends keyof HTMLBsInputElementEventMap>(type: K, listener: (this: HTMLBsInputElement, ev: BsInputCustomEvent<HTMLBsInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
@@ -905,10 +1730,13 @@ declare global {
|
|
|
905
1730
|
* @prop --bs-menu-item-padding-y - Top/bottom padding. Aliased to `--bs-spacing-100`.
|
|
906
1731
|
* @prop --bs-menu-item-padding-x - Left/right padding. Aliased to `--bs-spacing-150`.
|
|
907
1732
|
* @prop --bs-menu-item-gap - Gap between icon and label. Aliased to `--bs-spacing-100`.
|
|
908
|
-
* @prop --bs-menu-item-hover - Background on hover. Aliased to `--bs-color-neutral-container`.
|
|
1733
|
+
* @prop --bs-menu-item-hover - Background on hover. Aliased to `--bs-color-neutral-container-hover`.
|
|
909
1734
|
* @prop --bs-menu-item-pressed - Background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
|
|
1735
|
+
* @prop --bs-menu-item-disabled-bg - Background when `disabled` is set. Aliased to `--bs-surface-action-disabled`.
|
|
910
1736
|
* @prop --bs-menu-item-icon-color - Icon color. Aliased to `--bs-icon-default`.
|
|
1737
|
+
* @prop --bs-menu-item-icon-color-disabled - Icon color when `disabled` is set. Aliased to `--bs-icon-disabled`.
|
|
911
1738
|
* @prop --bs-menu-item-color - Label text color. Aliased to `--bs-text-muted`.
|
|
1739
|
+
* @prop --bs-menu-item-color-disabled - Label text color when `disabled` is set. Aliased to `--bs-text-on-disabled`.
|
|
912
1740
|
* @prop --bs-menu-item-font-size - Aliased to `--bs-font-size-md`.
|
|
913
1741
|
* @prop --bs-menu-item-line-height - Aliased to `--bs-line-height-body-md`.
|
|
914
1742
|
*/
|
|
@@ -954,6 +1782,48 @@ declare global {
|
|
|
954
1782
|
prototype: HTMLBsModalElement;
|
|
955
1783
|
new (): HTMLBsModalElement;
|
|
956
1784
|
};
|
|
1785
|
+
interface HTMLBsSourceLinkElementEventMap {
|
|
1786
|
+
"bsOpen": void;
|
|
1787
|
+
}
|
|
1788
|
+
/**
|
|
1789
|
+
* A single citation row inside `bs-chatbot-sources-drawer` -- a file icon + filename on the first
|
|
1790
|
+
* line, the originating system and version on the second, and a trailing "open" arrow.
|
|
1791
|
+
* ## When to use
|
|
1792
|
+
* - One row per source Genie cited in a response, slotted into `bs-chatbot-sources-drawer`.
|
|
1793
|
+
* ## When not to use
|
|
1794
|
+
* - Outside the sources drawer context -- this is a purpose-built citation row, not a generic
|
|
1795
|
+
* link/list-item component.
|
|
1796
|
+
* @prop --bs-source-link-radius - Corner radius of the row. Aliased to `--bs-border-radius-150`.
|
|
1797
|
+
* @prop --bs-source-link-padding - Padding around the row. Aliased to `--bs-spacing-150`.
|
|
1798
|
+
* @prop --bs-source-link-gap - Gap between the filename+meta block and the trailing arrow.
|
|
1799
|
+
* Aliased to `--bs-spacing-50`.
|
|
1800
|
+
* @prop --bs-source-link-icon-gap - Gap between the leading icon and the filename text. Aliased
|
|
1801
|
+
* to `--bs-spacing-75`.
|
|
1802
|
+
* @prop --bs-source-link-hover - Row background on hover/focus. Aliased to `--bs-surface-hover`.
|
|
1803
|
+
* @prop --bs-source-link-pressed - Row background while active/pressed. Aliased to
|
|
1804
|
+
* `--bs-surface-pressed`.
|
|
1805
|
+
* @prop --bs-source-link-focus - Focus-visible outline color. Aliased to
|
|
1806
|
+
* `--bs-border-neutral-focus`.
|
|
1807
|
+
* @prop --bs-source-link-filename-color - Filename text color. Aliased to `--bs-text-default`.
|
|
1808
|
+
* @prop --bs-source-link-meta-color - Source/version text color. Aliased to `--bs-text-secondary`.
|
|
1809
|
+
* @prop --bs-source-link-icon-color - File icon and arrow color. Aliased to `--bs-icon-default`.
|
|
1810
|
+
* @prop --bs-source-link-dot-color - Separator dot between source and version. Aliased to
|
|
1811
|
+
* `--bs-text-secondary`.
|
|
1812
|
+
*/
|
|
1813
|
+
interface HTMLBsSourceLinkElement extends Components.BsSourceLink, HTMLStencilElement {
|
|
1814
|
+
addEventListener<K extends keyof HTMLBsSourceLinkElementEventMap>(type: K, listener: (this: HTMLBsSourceLinkElement, ev: BsSourceLinkCustomEvent<HTMLBsSourceLinkElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1815
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1816
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
1817
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
1818
|
+
removeEventListener<K extends keyof HTMLBsSourceLinkElementEventMap>(type: K, listener: (this: HTMLBsSourceLinkElement, ev: BsSourceLinkCustomEvent<HTMLBsSourceLinkElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
1819
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1820
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
1821
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
1822
|
+
}
|
|
1823
|
+
var HTMLBsSourceLinkElement: {
|
|
1824
|
+
prototype: HTMLBsSourceLinkElement;
|
|
1825
|
+
new (): HTMLBsSourceLinkElement;
|
|
1826
|
+
};
|
|
957
1827
|
/**
|
|
958
1828
|
* A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
|
|
959
1829
|
* next to a trigger element.
|
|
@@ -988,24 +1858,90 @@ declare global {
|
|
|
988
1858
|
new (): HTMLBsTooltipElement;
|
|
989
1859
|
};
|
|
990
1860
|
interface HTMLElementTagNameMap {
|
|
1861
|
+
"bs-ai-disclaimer": HTMLBsAiDisclaimerElement;
|
|
1862
|
+
"bs-ai-greeting": HTMLBsAiGreetingElement;
|
|
991
1863
|
"bs-ai-thinking": HTMLBsAiThinkingElement;
|
|
1864
|
+
"bs-attachment": HTMLBsAttachmentElement;
|
|
1865
|
+
"bs-attachment-list": HTMLBsAttachmentListElement;
|
|
992
1866
|
"bs-badge": HTMLBsBadgeElement;
|
|
993
1867
|
"bs-button": HTMLBsButtonElement;
|
|
994
1868
|
"bs-button-skeleton": HTMLBsButtonSkeletonElement;
|
|
995
1869
|
"bs-card": HTMLBsCardElement;
|
|
1870
|
+
"bs-chatbot-feedback": HTMLBsChatbotFeedbackElement;
|
|
996
1871
|
"bs-chatbot-header": HTMLBsChatbotHeaderElement;
|
|
997
1872
|
"bs-chatbot-response-action": HTMLBsChatbotResponseActionElement;
|
|
1873
|
+
"bs-chatbot-sources-drawer": HTMLBsChatbotSourcesDrawerElement;
|
|
998
1874
|
"bs-chatbot-suggestion-button": HTMLBsChatbotSuggestionButtonElement;
|
|
999
1875
|
"bs-composer": HTMLBsComposerElement;
|
|
1876
|
+
"bs-composer-status-banner": HTMLBsComposerStatusBannerElement;
|
|
1000
1877
|
"bs-data-table": HTMLBsDataTableElement;
|
|
1001
1878
|
"bs-input": HTMLBsInputElement;
|
|
1002
1879
|
"bs-menu": HTMLBsMenuElement;
|
|
1003
1880
|
"bs-menu-item": HTMLBsMenuItemElement;
|
|
1004
1881
|
"bs-modal": HTMLBsModalElement;
|
|
1882
|
+
"bs-source-link": HTMLBsSourceLinkElement;
|
|
1005
1883
|
"bs-tooltip": HTMLBsTooltipElement;
|
|
1006
1884
|
}
|
|
1007
1885
|
}
|
|
1008
1886
|
declare namespace LocalJSX {
|
|
1887
|
+
/**
|
|
1888
|
+
* A centered caption disclaimer for Genie AI surfaces, e.g. "AI can make mistakes. Please verify
|
|
1889
|
+
* important information."
|
|
1890
|
+
* ## When to use
|
|
1891
|
+
* - Below or above `bs-composer` in a Genie AI chat panel, to remind users AI output can be wrong.
|
|
1892
|
+
* ## When not to use
|
|
1893
|
+
* - A general-purpose caption/helper text — use plain text or `bs-input`'s description slot for
|
|
1894
|
+
* non-AI-related helper copy.
|
|
1895
|
+
* The default slot (rather than a fixed prop) is intentional: Figma only specifies plain text, but
|
|
1896
|
+
* some consuming apps link out to a policy/help page from this copy, and a slot supports that
|
|
1897
|
+
* without inventing an unconfirmed `href`/link prop.
|
|
1898
|
+
* @prop --bs-ai-disclaimer-padding-x - Horizontal padding. Aliased to `--bs-spacing-200`.
|
|
1899
|
+
* @prop --bs-ai-disclaimer-text-color - Text color. Aliased to `--bs-text-secondary`.
|
|
1900
|
+
* @prop --bs-ai-disclaimer-font-size - Text font size. Aliased to `--bs-font-size-sm`.
|
|
1901
|
+
* @prop --bs-ai-disclaimer-line-height - Text line height. Aliased to `--bs-line-height-body-sm`.
|
|
1902
|
+
*/
|
|
1903
|
+
interface BsAiDisclaimer {
|
|
1904
|
+
}
|
|
1905
|
+
/**
|
|
1906
|
+
* The centered welcome heading shown at the top of an empty Genie AI chat panel, e.g.
|
|
1907
|
+
* "Hi. I'm Genie, your AI assistant." + "How can I help you with [product] today?"
|
|
1908
|
+
* ## When to use
|
|
1909
|
+
* - The empty/initial state of a Genie AI chat panel, before the user has sent a message.
|
|
1910
|
+
* ## When not to use
|
|
1911
|
+
* - Once a conversation has started -- this is a one-time empty-state greeting, not a persistent
|
|
1912
|
+
* header (see `bs-chatbot-header` for that).
|
|
1913
|
+
* `productName` is optional: Figma's copy has a `[product_name]` placeholder the consuming app is
|
|
1914
|
+
* expected to fill in, but a component shouldn't force a product name to exist, so leaving it
|
|
1915
|
+
* unset falls back to a product-agnostic "How can I help you today?".
|
|
1916
|
+
* @prop --bs-ai-greeting-gap - Gap between heading and subtext. Aliased to `--bs-spacing-200`.
|
|
1917
|
+
* @prop --bs-ai-greeting-max-width - Max width of the centered content block. Matches Figma's
|
|
1918
|
+
* 490px.
|
|
1919
|
+
* @prop --bs-ai-greeting-heading-color - Heading text color. Aliased to `--bs-text-default`.
|
|
1920
|
+
* @prop --bs-ai-greeting-heading-font-size - Heading font size. Aliased to `--bs-font-size-4xl`.
|
|
1921
|
+
* @prop --bs-ai-greeting-heading-line-height - Heading line height. Figma specifies 28px, which
|
|
1922
|
+
* doesn't match any `--bs-line-height-heading-*` token (h4 is 32) -- aliased directly to
|
|
1923
|
+
* `--bs-line-height-body-lg`, the token that happens to share the same numeric value.
|
|
1924
|
+
* @prop --bs-ai-greeting-heading-weight - Heading font weight. Aliased to `--bs-font-weight-bold`.
|
|
1925
|
+
* @prop --bs-ai-greeting-heading-gap - Gap between the two heading lines. Aliased to
|
|
1926
|
+
* `--bs-spacing-200`.
|
|
1927
|
+
* @prop --bs-ai-greeting-subtext-color - Subtext color. Aliased to `--bs-text-secondary`.
|
|
1928
|
+
* @prop --bs-ai-greeting-subtext-font-size - Subtext font size. Figma specifies 20px, which
|
|
1929
|
+
* doesn't match the semantic `--bs-text-style-body-lg-size` (18px) -- aliased directly to the
|
|
1930
|
+
* raw `--bs-font-size-xl` primitive instead.
|
|
1931
|
+
* @prop --bs-ai-greeting-subtext-line-height - Subtext line height. Aliased to
|
|
1932
|
+
* `--bs-line-height-body-lg`.
|
|
1933
|
+
*/
|
|
1934
|
+
interface BsAiGreeting {
|
|
1935
|
+
/**
|
|
1936
|
+
* The assistant's name, used in the heading ("Hi. I'm {assistantName},").
|
|
1937
|
+
* @default 'Genie'
|
|
1938
|
+
*/
|
|
1939
|
+
"assistantName"?: string;
|
|
1940
|
+
/**
|
|
1941
|
+
* The product name mentioned in the subtext. Omit to use a product-agnostic subtext.
|
|
1942
|
+
*/
|
|
1943
|
+
"productName"?: string;
|
|
1944
|
+
}
|
|
1009
1945
|
/**
|
|
1010
1946
|
* A small inline status indicator for Genie AI surfaces: the colorful Genie mark next to a label
|
|
1011
1947
|
* (e.g. "Retrieving", "Thinking", "Searching") whose text shimmers with a moving highlight band
|
|
@@ -1033,6 +1969,97 @@ declare namespace LocalJSX {
|
|
|
1033
1969
|
*/
|
|
1034
1970
|
"label"?: string;
|
|
1035
1971
|
}
|
|
1972
|
+
/**
|
|
1973
|
+
* A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
|
|
1974
|
+
* with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
|
|
1975
|
+
* a hover/focus-revealed remove button.
|
|
1976
|
+
* ## When to use
|
|
1977
|
+
* - Rendered by the consuming app for each file a user has attached to a Genie AI chat message,
|
|
1978
|
+
* typically alongside or inside `bs-composer`.
|
|
1979
|
+
* ## When not to use
|
|
1980
|
+
* - A generic file-upload control -- this is a preview-only presentational component. The
|
|
1981
|
+
* consuming app owns the actual file picker/upload logic and drives `loading` from that state.
|
|
1982
|
+
* @prop --bs-attachment-size - Width/height of the image thumbnail and of the card. Defaults to 112px.
|
|
1983
|
+
* @prop --bs-attachment-radius - Corner radius of the thumbnail/card. Aliased to
|
|
1984
|
+
* `--bs-border-radius-100`.
|
|
1985
|
+
* @prop --bs-attachment-border-color - Border color of the card / loading image wrap. Aliased to
|
|
1986
|
+
* `--bs-border-default`.
|
|
1987
|
+
* @prop --bs-attachment-card-bg - Card background. Aliased to `--bs-surface-base`.
|
|
1988
|
+
* @prop --bs-attachment-filename-color - Filename text color. Aliased to `--bs-text-default`.
|
|
1989
|
+
* @prop --bs-attachment-badge-bg-pdf - PDF badge background. Aliased to `--bs-badge-bg-error`.
|
|
1990
|
+
* @prop --bs-attachment-badge-bg-document - Document badge background. Aliased to
|
|
1991
|
+
* `--bs-badge-bg-info`.
|
|
1992
|
+
* @prop --bs-attachment-remove-bg - Remove button (neutral icon button) default background.
|
|
1993
|
+
* Aliased to `--bs-button-neutral-container`.
|
|
1994
|
+
* @prop --bs-attachment-remove-hover - Remove button hover background. Aliased to
|
|
1995
|
+
* `--bs-button-neutral-hover`.
|
|
1996
|
+
* @prop --bs-attachment-remove-pressed - Remove button active/pressed background. Aliased to
|
|
1997
|
+
* `--bs-button-neutral-pressed`.
|
|
1998
|
+
* @prop --bs-attachment-remove-focus - Remove button focus outline color. Aliased to
|
|
1999
|
+
* `--bs-border-neutral-focus`.
|
|
2000
|
+
*/
|
|
2001
|
+
interface BsAttachment {
|
|
2002
|
+
/**
|
|
2003
|
+
* The filename shown on the card. Only used when `type` is "pdf" or "document".
|
|
2004
|
+
* @default 'Attachment'
|
|
2005
|
+
*/
|
|
2006
|
+
"fileName"?: string;
|
|
2007
|
+
/**
|
|
2008
|
+
* Accessible alt text for the image thumbnail. Only used when `type` is "image".
|
|
2009
|
+
* @default ''
|
|
2010
|
+
*/
|
|
2011
|
+
"imageAlt"?: string;
|
|
2012
|
+
/**
|
|
2013
|
+
* The thumbnail image URL. Only used when `type` is "image".
|
|
2014
|
+
*/
|
|
2015
|
+
"imageSrc"?: string;
|
|
2016
|
+
/**
|
|
2017
|
+
* Shows an upload-in-progress spinner (blurred + overlaid for images, in the badge for files).
|
|
2018
|
+
* @default false
|
|
2019
|
+
*/
|
|
2020
|
+
"loading"?: boolean;
|
|
2021
|
+
/**
|
|
2022
|
+
* Fires when the remove button is clicked.
|
|
2023
|
+
*/
|
|
2024
|
+
"onBsRemove"?: (event: BsAttachmentCustomEvent<void>) => void;
|
|
2025
|
+
/**
|
|
2026
|
+
* Whether the hover/focus-revealed remove button is rendered at all.
|
|
2027
|
+
* @default true
|
|
2028
|
+
*/
|
|
2029
|
+
"removable"?: boolean;
|
|
2030
|
+
/**
|
|
2031
|
+
* Which kind of attachment preview to render.
|
|
2032
|
+
* @default 'image'
|
|
2033
|
+
*/
|
|
2034
|
+
"type"?: BsAttachmentType;
|
|
2035
|
+
}
|
|
2036
|
+
/**
|
|
2037
|
+
* A horizontally-scrolling row wrapper for one or more `bs-attachment` previews, for slotting into
|
|
2038
|
+
* `bs-composer`'s `attachments` slot when a Genie AI chat message has file attachments.
|
|
2039
|
+
* ## When to use
|
|
2040
|
+
* - Wrapping any number of `bs-attachment` elements the user has attached to a message, so they
|
|
2041
|
+
* lay out in a single row and scroll horizontally instead of wrapping/overflowing once there
|
|
2042
|
+
* are more than fit the available width.
|
|
2043
|
+
* ## When not to use
|
|
2044
|
+
* - A single attachment on its own — just render `bs-attachment` directly, this wrapper's
|
|
2045
|
+
* scroll/fade affordance only matters once there's more content than fits.
|
|
2046
|
+
* @prop --bs-attachment-list-gap - Gap between attachments. Matches the 10px Figma spec (not tied
|
|
2047
|
+
* to the `--bs-spacing-*` scale, which only has 8px/12px neighbors).
|
|
2048
|
+
* @prop --bs-attachment-list-padding - Padding around the row. Aliased to `--bs-spacing-150`.
|
|
2049
|
+
* @prop --bs-attachment-list-fade-color - Color the right-edge fade blends into. Aliased to
|
|
2050
|
+
* `--bs-static-white`.
|
|
2051
|
+
* @prop --bs-attachment-list-fade-width - Width of the right-edge fade overlay. Aliased to
|
|
2052
|
+
* `--bs-spacing-800`.
|
|
2053
|
+
* @prop --bs-attachment-list-scrollbar-thumb - Color of the scrollbar thumb that appears on
|
|
2054
|
+
* hover/focus once the row is scrollable. Aliased to `--bs-neutral-300`.
|
|
2055
|
+
*/
|
|
2056
|
+
interface BsAttachmentList {
|
|
2057
|
+
/**
|
|
2058
|
+
* Accessible name for the scrollable region.
|
|
2059
|
+
* @default 'Attachments'
|
|
2060
|
+
*/
|
|
2061
|
+
"ariaLabel"?: string | null;
|
|
2062
|
+
}
|
|
1036
2063
|
/**
|
|
1037
2064
|
* A small status or category pill, usually paired with a label or list item.
|
|
1038
2065
|
* ## When to use
|
|
@@ -1136,6 +2163,92 @@ declare namespace LocalJSX {
|
|
|
1136
2163
|
*/
|
|
1137
2164
|
"surface"?: BsCardSurface;
|
|
1138
2165
|
}
|
|
2166
|
+
/**
|
|
2167
|
+
* A star-rating feedback card shown at the end of a Genie AI chat: a heading/subtitle, a 5-star
|
|
2168
|
+
* rating, an optional comment, and either "Submit feedback" + "Start new chat" (before
|
|
2169
|
+
* submitting) or just "Start new chat" (after).
|
|
2170
|
+
* ## When to use
|
|
2171
|
+
* - Prompting for feedback on a Genie response or chat session, typically after the user ends or
|
|
2172
|
+
* restarts a conversation.
|
|
2173
|
+
* ## When not to use
|
|
2174
|
+
* - A generic star-rating input elsewhere in the product -- this component's copy and layout are
|
|
2175
|
+
* purpose-built for the Genie feedback flow, not a reusable rating control.
|
|
2176
|
+
* The heading and subtitle are not freeform props: before submitting, they're always the fixed
|
|
2177
|
+
* "How was your experience..." copy; after submitting, they're determined entirely by `rating`
|
|
2178
|
+
* (1-2 stars reads apologetic, 3 neutral, 4-5 positive), matching the Figma source exactly. Use
|
|
2179
|
+
* `heading`/`subtitle` only if a consuming app genuinely needs to override that copy.
|
|
2180
|
+
* @prop --bs-chatbot-feedback-bg - Card background. Aliased to `--bs-surface-raised`.
|
|
2181
|
+
* @prop --bs-chatbot-feedback-border - Card border color. Aliased to `--bs-border-default`.
|
|
2182
|
+
* @prop --bs-chatbot-feedback-radius - Card corner radius. Aliased to `--bs-border-radius-200`.
|
|
2183
|
+
* @prop --bs-chatbot-feedback-padding-x - Card horizontal padding. Aliased to `--bs-spacing-250`.
|
|
2184
|
+
* @prop --bs-chatbot-feedback-padding-y - Card vertical padding. Aliased to `--bs-spacing-550`.
|
|
2185
|
+
* @prop --bs-chatbot-feedback-max-width - Max width of the card. Matches Figma's 762px.
|
|
2186
|
+
* @prop --bs-chatbot-feedback-gap - Gap between the top content block and the button(s). Aliased
|
|
2187
|
+
* to `--bs-spacing-300`.
|
|
2188
|
+
* @prop --bs-chatbot-feedback-top-gap - Gap between heading/subtitle, stars, and the
|
|
2189
|
+
* textarea/comment within the top block. Aliased to `--bs-spacing-250`.
|
|
2190
|
+
* @prop --bs-chatbot-feedback-heading-color - Aliased to `--bs-text-default`.
|
|
2191
|
+
* @prop --bs-chatbot-feedback-subtitle-color - Aliased to `--bs-text-secondary`.
|
|
2192
|
+
* @prop --bs-chatbot-feedback-star-filled - Filled star color. Aliased to `--bs-color-primary-default`.
|
|
2193
|
+
* @prop --bs-chatbot-feedback-star-empty - Empty star color. Aliased to `--bs-border-neutral-container`.
|
|
2194
|
+
* @prop --bs-chatbot-feedback-comment-color - Submitted comment text color. Aliased to `--bs-text-default`.
|
|
2195
|
+
* @prop --bs-chatbot-feedback-close-hover - Close button hover background. Aliased to `--bs-surface-hover`.
|
|
2196
|
+
* @prop --bs-chatbot-feedback-primary-bg - "Submit feedback" / post-submit "Start new chat"
|
|
2197
|
+
* background. Aliased to `--bs-button-primary-default`.
|
|
2198
|
+
* @prop --bs-chatbot-feedback-primary-bg-hover - Aliased to `--bs-button-primary-hover`.
|
|
2199
|
+
* @prop --bs-chatbot-feedback-primary-bg-disabled - Aliased to `--bs-button-primary-disabled`.
|
|
2200
|
+
* @prop --bs-chatbot-feedback-outlined-border - Pre-submit "Start new chat" border. Aliased to
|
|
2201
|
+
* `--bs-border-primary`.
|
|
2202
|
+
* @prop --bs-chatbot-feedback-outlined-hover - Pre-submit "Start new chat" hover background.
|
|
2203
|
+
* Aliased to `--bs-color-primary-container-hover`.
|
|
2204
|
+
* @prop --bs-chatbot-feedback-outlined-text - Pre-submit "Start new chat" text/icon color.
|
|
2205
|
+
* Aliased to `--bs-text-action`.
|
|
2206
|
+
*/
|
|
2207
|
+
interface BsChatbotFeedback {
|
|
2208
|
+
/**
|
|
2209
|
+
* The comment text.
|
|
2210
|
+
* @default ''
|
|
2211
|
+
*/
|
|
2212
|
+
"comment"?: string;
|
|
2213
|
+
/**
|
|
2214
|
+
* Overrides the computed heading (see the class doc for why this is computed by default).
|
|
2215
|
+
*/
|
|
2216
|
+
"heading"?: string;
|
|
2217
|
+
/**
|
|
2218
|
+
* Fires when the close button is clicked. The consuming app owns actually hiding the card.
|
|
2219
|
+
*/
|
|
2220
|
+
"onBsClose"?: (event: BsChatbotFeedbackCustomEvent<void>) => void;
|
|
2221
|
+
/**
|
|
2222
|
+
* Fires on every keystroke in the comment textarea, with the current value.
|
|
2223
|
+
*/
|
|
2224
|
+
"onBsCommentInput"?: (event: BsChatbotFeedbackCustomEvent<string>) => void;
|
|
2225
|
+
/**
|
|
2226
|
+
* Fires when "Start new chat" is clicked. The consuming app owns actually starting a new chat.
|
|
2227
|
+
*/
|
|
2228
|
+
"onBsNewChat"?: (event: BsChatbotFeedbackCustomEvent<void>) => void;
|
|
2229
|
+
/**
|
|
2230
|
+
* Fires when a star is clicked, with the new rating.
|
|
2231
|
+
*/
|
|
2232
|
+
"onBsRatingChange"?: (event: BsChatbotFeedbackCustomEvent<number>) => void;
|
|
2233
|
+
/**
|
|
2234
|
+
* Fires when "Submit feedback" is clicked, with the current rating and comment. Also sets `submitted` to true.
|
|
2235
|
+
*/
|
|
2236
|
+
"onBsSubmit"?: (event: BsChatbotFeedbackCustomEvent<{ rating: number; comment: string }>) => void;
|
|
2237
|
+
/**
|
|
2238
|
+
* Current star rating, 0-5. 0 means no rating has been given yet.
|
|
2239
|
+
* @default 0
|
|
2240
|
+
*/
|
|
2241
|
+
"rating"?: number;
|
|
2242
|
+
/**
|
|
2243
|
+
* Whether feedback has been submitted. Switches the card from the editable form to the read-only "thanks" view.
|
|
2244
|
+
* @default false
|
|
2245
|
+
*/
|
|
2246
|
+
"submitted"?: boolean;
|
|
2247
|
+
/**
|
|
2248
|
+
* Overrides the computed subtitle.
|
|
2249
|
+
*/
|
|
2250
|
+
"subtitle"?: string;
|
|
2251
|
+
}
|
|
1139
2252
|
/**
|
|
1140
2253
|
* The header bar that sits above `bs-composer` in a Genie AI chat panel: the Genie brand mark on
|
|
1141
2254
|
* the left and four fixed actions (new chat, history, expand, close) on the right.
|
|
@@ -1250,6 +2363,49 @@ declare namespace LocalJSX {
|
|
|
1250
2363
|
*/
|
|
1251
2364
|
"sourcesCount"?: number;
|
|
1252
2365
|
}
|
|
2366
|
+
/**
|
|
2367
|
+
* The "Sources" panel shown alongside a Genie AI chat response -- a header with a title, a count
|
|
2368
|
+
* badge, and a collapse chevron, above a stack of `bs-source-link` citation rows.
|
|
2369
|
+
* ## When to use
|
|
2370
|
+
* - Displaying the documents/sources a Genie response cited, typically opened from a "view
|
|
2371
|
+
* sources" action on a `bs-chatbot-response-action` bar.
|
|
2372
|
+
* ## When not to use
|
|
2373
|
+
* - A generic list container -- this component's header (title + count + collapse) is
|
|
2374
|
+
* purpose-built for the sources use case.
|
|
2375
|
+
* @prop --bs-chatbot-sources-drawer-bg - Background of the whole panel. Aliased to `--bs-surface-raised`.
|
|
2376
|
+
* @prop --bs-chatbot-sources-drawer-header-shadow - Drop shadow under the header, separating it
|
|
2377
|
+
* from the scrolled list. Aliased to `--bs-shadow-xs`.
|
|
2378
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-x - Aliased to `--bs-spacing-200`.
|
|
2379
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-top - Aliased to `--bs-spacing-150`.
|
|
2380
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-bottom - Aliased to `--bs-spacing-100`.
|
|
2381
|
+
* @prop --bs-chatbot-sources-drawer-heading-color - Aliased to `--bs-text-default`.
|
|
2382
|
+
* @prop --bs-chatbot-sources-drawer-count-bg - Count badge background. Aliased to
|
|
2383
|
+
* `--bs-badge-bg-neutral-container`.
|
|
2384
|
+
* @prop --bs-chatbot-sources-drawer-count-color - Count badge text color. Aliased to
|
|
2385
|
+
* `--bs-badge-text-neutral`.
|
|
2386
|
+
* @prop --bs-chatbot-sources-drawer-collapse-hover - Collapse button background on hover. Aliased
|
|
2387
|
+
* to `--bs-surface-hover`.
|
|
2388
|
+
* @prop --bs-chatbot-sources-drawer-section-gap - Gap between the header and the list. Aliased to
|
|
2389
|
+
* `--bs-spacing-200`.
|
|
2390
|
+
* @prop --bs-chatbot-sources-drawer-list-padding - Horizontal/bottom padding of the list. Aliased
|
|
2391
|
+
* to `--bs-spacing-200`.
|
|
2392
|
+
* @prop --bs-chatbot-sources-drawer-list-gap - Gap between rows. Aliased to `--bs-spacing-50`.
|
|
2393
|
+
*/
|
|
2394
|
+
interface BsChatbotSourcesDrawer {
|
|
2395
|
+
/**
|
|
2396
|
+
* 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.
|
|
2397
|
+
*/
|
|
2398
|
+
"count"?: number;
|
|
2399
|
+
/**
|
|
2400
|
+
* The panel title.
|
|
2401
|
+
* @default 'Sources'
|
|
2402
|
+
*/
|
|
2403
|
+
"heading"?: string;
|
|
2404
|
+
/**
|
|
2405
|
+
* Fires when the collapse chevron is clicked. The consuming app owns actually hiding the panel.
|
|
2406
|
+
*/
|
|
2407
|
+
"onBsCollapse"?: (event: BsChatbotSourcesDrawerCustomEvent<void>) => void;
|
|
2408
|
+
}
|
|
1253
2409
|
/**
|
|
1254
2410
|
* A pill-shaped clickable suggestion chip for a Genie AI chat panel (e.g. "How can I help you?").
|
|
1255
2411
|
* One instance renders one chip -- to show several suggestion prompts side by side, render
|
|
@@ -1374,6 +2530,103 @@ declare namespace LocalJSX {
|
|
|
1374
2530
|
*/
|
|
1375
2531
|
"variant"?: BsComposerVariant;
|
|
1376
2532
|
}
|
|
2533
|
+
/**
|
|
2534
|
+
* A full-width status banner for use directly above `bs-composer`, surfacing a message about the
|
|
2535
|
+
* composer's current state (e.g. a send failure, an informational notice) with an optional
|
|
2536
|
+
* "Continue"-style action button and an optional close button.
|
|
2537
|
+
* ## When to use
|
|
2538
|
+
* - A message tied to the composer itself (send failed, rate-limited, draft restored, etc.) that
|
|
2539
|
+
* needs to sit directly above it, not a general-purpose alert -- see `CONVENTIONS.md` if this
|
|
2540
|
+
* library gains a generic banner/alert component later, and prefer that instead once it exists.
|
|
2541
|
+
* ## When not to use
|
|
2542
|
+
* - A toast/snackbar notification unrelated to the composer -- this component is not
|
|
2543
|
+
* self-dismissing and has no positioning of its own (it's a static block, not an overlay).
|
|
2544
|
+
* @prop --bs-composer-status-banner-radius - Corner radius of the top-left/top-right corners
|
|
2545
|
+
* (bottom corners are square, so this sits flush above `bs-composer`). Aliased to
|
|
2546
|
+
* `--bs-border-radius-150`.
|
|
2547
|
+
* @prop --bs-composer-status-banner-padding-x - Horizontal padding. Aliased to `--bs-spacing-150`.
|
|
2548
|
+
* @prop --bs-composer-status-banner-padding-top - Top padding. Aliased to `--bs-spacing-100`.
|
|
2549
|
+
* @prop --bs-composer-status-banner-padding-bottom - Bottom padding. Aliased to `--bs-spacing-200`.
|
|
2550
|
+
* @prop --bs-composer-status-banner-gap - Gap between the message group and the action/close
|
|
2551
|
+
* controls. Aliased to `--bs-spacing-100`.
|
|
2552
|
+
* @prop --bs-composer-status-banner-icon-gap - Gap between the icon and the message text.
|
|
2553
|
+
* Aliased to `--bs-spacing-75`.
|
|
2554
|
+
* @prop --bs-composer-status-banner-error-bg - Background for `type="error"`. Aliased to
|
|
2555
|
+
* `--bs-color-error-container`.
|
|
2556
|
+
* @prop --bs-composer-status-banner-error-text - Text/icon color for `type="error"`. Aliased to
|
|
2557
|
+
* `--bs-text-error`.
|
|
2558
|
+
* @prop --bs-composer-status-banner-error-action-bg - Action button background for
|
|
2559
|
+
* `type="error"`. Aliased to `--bs-color-error-default`.
|
|
2560
|
+
* @prop --bs-composer-status-banner-error-action-bg-hover - Aliased to `--bs-color-error-hover`.
|
|
2561
|
+
* @prop --bs-composer-status-banner-info-bg - Background for `type="info"`. Aliased to
|
|
2562
|
+
* `--bs-color-info-container`.
|
|
2563
|
+
* @prop --bs-composer-status-banner-info-text - Text/icon color for `type="info"`. Aliased to
|
|
2564
|
+
* `--bs-text-info`.
|
|
2565
|
+
* @prop --bs-composer-status-banner-info-action-bg - Action button background for `type="info"`.
|
|
2566
|
+
* Aliased to `--bs-color-info-default`.
|
|
2567
|
+
* @prop --bs-composer-status-banner-info-action-bg-hover - Aliased to `--bs-color-info-hover`.
|
|
2568
|
+
* @prop --bs-composer-status-banner-neutral-bg - Background for `type="neutral"`. Aliased to
|
|
2569
|
+
* `--bs-color-neutral-container`.
|
|
2570
|
+
* @prop --bs-composer-status-banner-neutral-text - Text/icon color for `type="neutral"`. Aliased
|
|
2571
|
+
* to `--bs-text-default`.
|
|
2572
|
+
* @prop --bs-composer-status-banner-neutral-action-bg - Action button background for
|
|
2573
|
+
* `type="neutral"`. Aliased to `--bs-color-neutral-container`.
|
|
2574
|
+
* @prop --bs-composer-status-banner-neutral-action-bg-hover - Aliased to
|
|
2575
|
+
* `--bs-color-neutral-container-hover`.
|
|
2576
|
+
* @prop --bs-composer-status-banner-neutral-action-border - Action button border for
|
|
2577
|
+
* `type="neutral"` (the only variant whose action button is outlined). Aliased to
|
|
2578
|
+
* `--bs-border-neutral-container`.
|
|
2579
|
+
* @prop --bs-composer-status-banner-warning-bg - Background for `type="warning"`. Aliased to
|
|
2580
|
+
* `--bs-color-warning-container`.
|
|
2581
|
+
* @prop --bs-composer-status-banner-warning-text - Text/icon color for `type="warning"`. Aliased
|
|
2582
|
+
* to `--bs-text-warning`.
|
|
2583
|
+
* @prop --bs-composer-status-banner-warning-action-bg - Action button background for
|
|
2584
|
+
* `type="warning"`. Aliased to `--bs-color-warning-default`.
|
|
2585
|
+
* @prop --bs-composer-status-banner-warning-action-bg-hover - Aliased to
|
|
2586
|
+
* `--bs-color-warning-hover`.
|
|
2587
|
+
* @prop --bs-composer-status-banner-close-hover-bg - Close button hover background (same across
|
|
2588
|
+
* every `type`). Aliased to `--bs-color-neutral-container-hover`.
|
|
2589
|
+
*/
|
|
2590
|
+
interface BsComposerStatusBanner {
|
|
2591
|
+
/**
|
|
2592
|
+
* Label for the action button, only rendered when `showButton` is true.
|
|
2593
|
+
* @default 'Continue'
|
|
2594
|
+
*/
|
|
2595
|
+
"actionLabel"?: string;
|
|
2596
|
+
/**
|
|
2597
|
+
* Whether the close button is rendered.
|
|
2598
|
+
* @default true
|
|
2599
|
+
*/
|
|
2600
|
+
"allowClose"?: boolean;
|
|
2601
|
+
/**
|
|
2602
|
+
* The message text.
|
|
2603
|
+
* @default 'This is a message'
|
|
2604
|
+
*/
|
|
2605
|
+
"message"?: string;
|
|
2606
|
+
/**
|
|
2607
|
+
* Fires when the action button is clicked. Only relevant when `showButton` is true.
|
|
2608
|
+
*/
|
|
2609
|
+
"onBsAction"?: (event: BsComposerStatusBannerCustomEvent<void>) => void;
|
|
2610
|
+
/**
|
|
2611
|
+
* Fires when the close button is clicked. Only relevant when `allowClose` is true.
|
|
2612
|
+
*/
|
|
2613
|
+
"onBsClose"?: (event: BsComposerStatusBannerCustomEvent<void>) => void;
|
|
2614
|
+
/**
|
|
2615
|
+
* Whether the "Continue"-style action button is rendered.
|
|
2616
|
+
* @default false
|
|
2617
|
+
*/
|
|
2618
|
+
"showButton"?: boolean;
|
|
2619
|
+
/**
|
|
2620
|
+
* Whether the leading icon (default: clock) is rendered.
|
|
2621
|
+
* @default true
|
|
2622
|
+
*/
|
|
2623
|
+
"showIcon"?: boolean;
|
|
2624
|
+
/**
|
|
2625
|
+
* Which severity/style to render. Drives background, text/icon color, and the action button's color.
|
|
2626
|
+
* @default 'error'
|
|
2627
|
+
*/
|
|
2628
|
+
"type"?: BsComposerStatusBannerType;
|
|
2629
|
+
}
|
|
1377
2630
|
/**
|
|
1378
2631
|
* A sortable, optionally row-selectable table for tabular data.
|
|
1379
2632
|
* `columns`, `rows`, and `cellRenderer` are JS-property-only — HTML attributes can only carry
|
|
@@ -1413,31 +2666,133 @@ declare namespace LocalJSX {
|
|
|
1413
2666
|
"sortDirection"?: 'asc' | 'desc';
|
|
1414
2667
|
}
|
|
1415
2668
|
/**
|
|
1416
|
-
* A single-line text field with an optional label, description, and error state.
|
|
2669
|
+
* A single-line text field with an optional label, description, and error state. Also covers a
|
|
2670
|
+
* range of related "field" shapes (number stepper, password reveal, date, dropdown trigger,
|
|
2671
|
+
* select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
|
|
2672
|
+
* share the same label/description/error/icon-slot chrome.
|
|
1417
2673
|
* ## When to use
|
|
1418
2674
|
* - Collecting a single line of free-text, email, password, or numeric input.
|
|
2675
|
+
* - Any of the other supported `type`s (search, date, dropdown, select, textarea, chip, initials,
|
|
2676
|
+
* country, pin) that share this component's label/description/error chrome.
|
|
1419
2677
|
* - Pair with `error` for inline validation feedback tied to that specific field.
|
|
1420
2678
|
* ## When not to use
|
|
1421
|
-
* -
|
|
1422
|
-
*
|
|
2679
|
+
* - A fixed set of choices best served by a dedicated radio/checkbox group rather than a single
|
|
2680
|
+
* field. `type="select"` (native `<select>`) and `type="dropdown"` (a `bs-menu` of
|
|
2681
|
+
* `bs-menu-item`s from the `options` prop) cover the field-shaped cases; `type="chip"` has no
|
|
2682
|
+
* options list at all (freeform chip entry).
|
|
1423
2683
|
*/
|
|
1424
2684
|
interface BsInput {
|
|
2685
|
+
/**
|
|
2686
|
+
* Current chips for `type="chip"`. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule.
|
|
2687
|
+
* @default []
|
|
2688
|
+
*/
|
|
2689
|
+
"chips"?: string[];
|
|
2690
|
+
/**
|
|
2691
|
+
* Current selected country code for `type="country"`.
|
|
2692
|
+
* @default ''
|
|
2693
|
+
*/
|
|
2694
|
+
"country"?: string;
|
|
2695
|
+
/**
|
|
2696
|
+
* 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.
|
|
2697
|
+
* @default []
|
|
2698
|
+
*/
|
|
2699
|
+
"countryOptions"?: { code: string; label: string; flagIcon?: string }[];
|
|
1425
2700
|
"description"?: string;
|
|
1426
2701
|
/**
|
|
1427
2702
|
* @default false
|
|
1428
2703
|
*/
|
|
1429
2704
|
"disabled"?: boolean;
|
|
1430
2705
|
"error"?: string;
|
|
2706
|
+
/**
|
|
2707
|
+
* 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`.
|
|
2708
|
+
* @default ''
|
|
2709
|
+
*/
|
|
2710
|
+
"initialsTitle"?: string;
|
|
1431
2711
|
"label"?: string;
|
|
2712
|
+
/**
|
|
2713
|
+
* Number of cells for `type="pin"`.
|
|
2714
|
+
* @default 4
|
|
2715
|
+
*/
|
|
2716
|
+
"length"?: number;
|
|
2717
|
+
/**
|
|
2718
|
+
* Maximum value for `type="number"`'s stepper buttons.
|
|
2719
|
+
*/
|
|
2720
|
+
"max"?: number;
|
|
2721
|
+
/**
|
|
2722
|
+
* Minimum value for `type="number"`'s stepper buttons.
|
|
2723
|
+
*/
|
|
2724
|
+
"min"?: number;
|
|
1432
2725
|
"onBsChange"?: (event: BsInputCustomEvent<string>) => void;
|
|
2726
|
+
/**
|
|
2727
|
+
* Emitted when a chip is committed (Enter pressed in the draft input) for `type="chip"`.
|
|
2728
|
+
*/
|
|
2729
|
+
"onBsChipAdd"?: (event: BsInputCustomEvent<string>) => void;
|
|
2730
|
+
/**
|
|
2731
|
+
* Emitted when a chip's remove button is clicked for `type="chip"`.
|
|
2732
|
+
*/
|
|
2733
|
+
"onBsChipRemove"?: (event: BsInputCustomEvent<string>) => void;
|
|
2734
|
+
/**
|
|
2735
|
+
* Emitted when the country `<select>` changes for `type="country"`.
|
|
2736
|
+
*/
|
|
2737
|
+
"onBsCountryChange"?: (event: BsInputCustomEvent<string>) => void;
|
|
1433
2738
|
"onBsInput"?: (event: BsInputCustomEvent<string>) => void;
|
|
2739
|
+
/**
|
|
2740
|
+
* Emitted when `type="dropdown"`'s trigger is toggled. See `open`'s doc comment for this type's shell-only limitation.
|
|
2741
|
+
*/
|
|
2742
|
+
"onBsOpen"?: (event: BsInputCustomEvent<boolean>) => void;
|
|
2743
|
+
/**
|
|
2744
|
+
* Emitted when the title `<select>` changes for `type="initials"`.
|
|
2745
|
+
*/
|
|
2746
|
+
"onBsTitleChange"?: (event: BsInputCustomEvent<string>) => void;
|
|
2747
|
+
/**
|
|
2748
|
+
* 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.
|
|
2749
|
+
* @default false
|
|
2750
|
+
*/
|
|
2751
|
+
"open"?: boolean;
|
|
2752
|
+
/**
|
|
2753
|
+
* 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.
|
|
2754
|
+
* @default []
|
|
2755
|
+
*/
|
|
2756
|
+
"options"?: { label: string; value: string }[];
|
|
1434
2757
|
"placeholder"?: string;
|
|
1435
2758
|
/**
|
|
1436
|
-
*
|
|
2759
|
+
* Marks the field as required: renders a red `*` after the label and sets `aria-required="true"` on the control. Applies regardless of `type`.
|
|
2760
|
+
* @default false
|
|
2761
|
+
*/
|
|
2762
|
+
"required"?: boolean;
|
|
2763
|
+
/**
|
|
2764
|
+
* Number of visible rows for `type="textarea"`.
|
|
2765
|
+
* @default 3
|
|
2766
|
+
*/
|
|
2767
|
+
"rows"?: number;
|
|
2768
|
+
/**
|
|
2769
|
+
* Step size for `type="number"`'s increment/decrement stepper buttons.
|
|
2770
|
+
* @default 1
|
|
1437
2771
|
*/
|
|
1438
|
-
"
|
|
2772
|
+
"step"?: number;
|
|
1439
2773
|
/**
|
|
1440
|
-
*
|
|
2774
|
+
* 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.
|
|
2775
|
+
* @default []
|
|
2776
|
+
*/
|
|
2777
|
+
"titleOptions"?: string[];
|
|
2778
|
+
/**
|
|
2779
|
+
* @default 'text'
|
|
2780
|
+
*/
|
|
2781
|
+
"type"?: | 'text'
|
|
2782
|
+
| 'email'
|
|
2783
|
+
| 'password'
|
|
2784
|
+
| 'number'
|
|
2785
|
+
| 'search'
|
|
2786
|
+
| 'date'
|
|
2787
|
+
| 'dropdown'
|
|
2788
|
+
| 'select'
|
|
2789
|
+
| 'textarea'
|
|
2790
|
+
| 'chip'
|
|
2791
|
+
| 'initials'
|
|
2792
|
+
| 'country'
|
|
2793
|
+
| 'pin';
|
|
2794
|
+
/**
|
|
2795
|
+
* 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
2796
|
* @default ''
|
|
1442
2797
|
*/
|
|
1443
2798
|
"value"?: string;
|
|
@@ -1471,14 +2826,22 @@ declare namespace LocalJSX {
|
|
|
1471
2826
|
* @prop --bs-menu-item-padding-y - Top/bottom padding. Aliased to `--bs-spacing-100`.
|
|
1472
2827
|
* @prop --bs-menu-item-padding-x - Left/right padding. Aliased to `--bs-spacing-150`.
|
|
1473
2828
|
* @prop --bs-menu-item-gap - Gap between icon and label. Aliased to `--bs-spacing-100`.
|
|
1474
|
-
* @prop --bs-menu-item-hover - Background on hover. Aliased to `--bs-color-neutral-container`.
|
|
2829
|
+
* @prop --bs-menu-item-hover - Background on hover. Aliased to `--bs-color-neutral-container-hover`.
|
|
1475
2830
|
* @prop --bs-menu-item-pressed - Background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
|
|
2831
|
+
* @prop --bs-menu-item-disabled-bg - Background when `disabled` is set. Aliased to `--bs-surface-action-disabled`.
|
|
1476
2832
|
* @prop --bs-menu-item-icon-color - Icon color. Aliased to `--bs-icon-default`.
|
|
2833
|
+
* @prop --bs-menu-item-icon-color-disabled - Icon color when `disabled` is set. Aliased to `--bs-icon-disabled`.
|
|
1477
2834
|
* @prop --bs-menu-item-color - Label text color. Aliased to `--bs-text-muted`.
|
|
2835
|
+
* @prop --bs-menu-item-color-disabled - Label text color when `disabled` is set. Aliased to `--bs-text-on-disabled`.
|
|
1478
2836
|
* @prop --bs-menu-item-font-size - Aliased to `--bs-font-size-md`.
|
|
1479
2837
|
* @prop --bs-menu-item-line-height - Aliased to `--bs-line-height-body-md`.
|
|
1480
2838
|
*/
|
|
1481
2839
|
interface BsMenuItem {
|
|
2840
|
+
/**
|
|
2841
|
+
* Disables the item: no hover/pressed/focus styling, no pointer cursor, not reachable by keyboard tabbing, and clicking it does not emit `bsSelect`.
|
|
2842
|
+
* @default false
|
|
2843
|
+
*/
|
|
2844
|
+
"disabled"?: boolean;
|
|
1482
2845
|
/**
|
|
1483
2846
|
* Fires when the item is clicked.
|
|
1484
2847
|
*/
|
|
@@ -1508,6 +2871,59 @@ declare namespace LocalJSX {
|
|
|
1508
2871
|
*/
|
|
1509
2872
|
"size"?: BsModalSize;
|
|
1510
2873
|
}
|
|
2874
|
+
/**
|
|
2875
|
+
* A single citation row inside `bs-chatbot-sources-drawer` -- a file icon + filename on the first
|
|
2876
|
+
* line, the originating system and version on the second, and a trailing "open" arrow.
|
|
2877
|
+
* ## When to use
|
|
2878
|
+
* - One row per source Genie cited in a response, slotted into `bs-chatbot-sources-drawer`.
|
|
2879
|
+
* ## When not to use
|
|
2880
|
+
* - Outside the sources drawer context -- this is a purpose-built citation row, not a generic
|
|
2881
|
+
* link/list-item component.
|
|
2882
|
+
* @prop --bs-source-link-radius - Corner radius of the row. Aliased to `--bs-border-radius-150`.
|
|
2883
|
+
* @prop --bs-source-link-padding - Padding around the row. Aliased to `--bs-spacing-150`.
|
|
2884
|
+
* @prop --bs-source-link-gap - Gap between the filename+meta block and the trailing arrow.
|
|
2885
|
+
* Aliased to `--bs-spacing-50`.
|
|
2886
|
+
* @prop --bs-source-link-icon-gap - Gap between the leading icon and the filename text. Aliased
|
|
2887
|
+
* to `--bs-spacing-75`.
|
|
2888
|
+
* @prop --bs-source-link-hover - Row background on hover/focus. Aliased to `--bs-surface-hover`.
|
|
2889
|
+
* @prop --bs-source-link-pressed - Row background while active/pressed. Aliased to
|
|
2890
|
+
* `--bs-surface-pressed`.
|
|
2891
|
+
* @prop --bs-source-link-focus - Focus-visible outline color. Aliased to
|
|
2892
|
+
* `--bs-border-neutral-focus`.
|
|
2893
|
+
* @prop --bs-source-link-filename-color - Filename text color. Aliased to `--bs-text-default`.
|
|
2894
|
+
* @prop --bs-source-link-meta-color - Source/version text color. Aliased to `--bs-text-secondary`.
|
|
2895
|
+
* @prop --bs-source-link-icon-color - File icon and arrow color. Aliased to `--bs-icon-default`.
|
|
2896
|
+
* @prop --bs-source-link-dot-color - Separator dot between source and version. Aliased to
|
|
2897
|
+
* `--bs-text-secondary`.
|
|
2898
|
+
*/
|
|
2899
|
+
interface BsSourceLink {
|
|
2900
|
+
/**
|
|
2901
|
+
* The cited document's filename.
|
|
2902
|
+
* @default 'Source'
|
|
2903
|
+
*/
|
|
2904
|
+
"fileName"?: string;
|
|
2905
|
+
/**
|
|
2906
|
+
* If set, renders the row as a link that opens this URL; otherwise as a button that only emits `bsOpen`.
|
|
2907
|
+
*/
|
|
2908
|
+
"href"?: string;
|
|
2909
|
+
/**
|
|
2910
|
+
* Fires on click/activation, whether or not `href` is set -- lets the consuming app log or handle the open.
|
|
2911
|
+
*/
|
|
2912
|
+
"onBsOpen"?: (event: BsSourceLinkCustomEvent<void>) => void;
|
|
2913
|
+
/**
|
|
2914
|
+
* The system/app the document came from (e.g. "HoltePortalen").
|
|
2915
|
+
*/
|
|
2916
|
+
"sourceName"?: string;
|
|
2917
|
+
/**
|
|
2918
|
+
* `target` used when `href` is set.
|
|
2919
|
+
* @default '_blank'
|
|
2920
|
+
*/
|
|
2921
|
+
"target"?: string;
|
|
2922
|
+
/**
|
|
2923
|
+
* The document's version label (e.g. "v3.2"). Omit if the source has no version.
|
|
2924
|
+
*/
|
|
2925
|
+
"version"?: string;
|
|
2926
|
+
}
|
|
1511
2927
|
/**
|
|
1512
2928
|
* A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
|
|
1513
2929
|
* next to a trigger element.
|
|
@@ -1543,9 +2959,24 @@ declare namespace LocalJSX {
|
|
|
1543
2959
|
"placement"?: 'top';
|
|
1544
2960
|
}
|
|
1545
2961
|
|
|
2962
|
+
interface BsAiGreetingAttributes {
|
|
2963
|
+
"assistantName": string;
|
|
2964
|
+
"productName": string;
|
|
2965
|
+
}
|
|
1546
2966
|
interface BsAiThinkingAttributes {
|
|
1547
2967
|
"label": string;
|
|
1548
2968
|
}
|
|
2969
|
+
interface BsAttachmentAttributes {
|
|
2970
|
+
"type": BsAttachmentType;
|
|
2971
|
+
"fileName": string;
|
|
2972
|
+
"imageSrc": string;
|
|
2973
|
+
"imageAlt": string;
|
|
2974
|
+
"loading": boolean;
|
|
2975
|
+
"removable": boolean;
|
|
2976
|
+
}
|
|
2977
|
+
interface BsAttachmentListAttributes {
|
|
2978
|
+
"ariaLabel": string | null;
|
|
2979
|
+
}
|
|
1549
2980
|
interface BsBadgeAttributes {
|
|
1550
2981
|
"variant": BsBadgeVariant;
|
|
1551
2982
|
}
|
|
@@ -1562,6 +2993,13 @@ declare namespace LocalJSX {
|
|
|
1562
2993
|
interface BsCardAttributes {
|
|
1563
2994
|
"surface": BsCardSurface;
|
|
1564
2995
|
}
|
|
2996
|
+
interface BsChatbotFeedbackAttributes {
|
|
2997
|
+
"rating": number;
|
|
2998
|
+
"submitted": boolean;
|
|
2999
|
+
"comment": string;
|
|
3000
|
+
"heading": string;
|
|
3001
|
+
"subtitle": string;
|
|
3002
|
+
}
|
|
1565
3003
|
interface BsChatbotHeaderAttributes {
|
|
1566
3004
|
"heading": string;
|
|
1567
3005
|
"expanded": boolean;
|
|
@@ -1570,6 +3008,10 @@ declare namespace LocalJSX {
|
|
|
1570
3008
|
"sourcesCount": number;
|
|
1571
3009
|
"menuOpen": boolean;
|
|
1572
3010
|
}
|
|
3011
|
+
interface BsChatbotSourcesDrawerAttributes {
|
|
3012
|
+
"heading": string;
|
|
3013
|
+
"count": number;
|
|
3014
|
+
}
|
|
1573
3015
|
interface BsChatbotSuggestionButtonAttributes {
|
|
1574
3016
|
"disabled": boolean;
|
|
1575
3017
|
}
|
|
@@ -1580,6 +3022,14 @@ declare namespace LocalJSX {
|
|
|
1580
3022
|
"state": BsComposerState;
|
|
1581
3023
|
"ariaLabel": string | null;
|
|
1582
3024
|
}
|
|
3025
|
+
interface BsComposerStatusBannerAttributes {
|
|
3026
|
+
"type": BsComposerStatusBannerType;
|
|
3027
|
+
"message": string;
|
|
3028
|
+
"showIcon": boolean;
|
|
3029
|
+
"showButton": boolean;
|
|
3030
|
+
"actionLabel": string;
|
|
3031
|
+
"allowClose": boolean;
|
|
3032
|
+
}
|
|
1583
3033
|
interface BsDataTableAttributes {
|
|
1584
3034
|
"sortColumn": string;
|
|
1585
3035
|
"sortDirection": 'asc' | 'desc';
|
|
@@ -1587,37 +3037,76 @@ declare namespace LocalJSX {
|
|
|
1587
3037
|
}
|
|
1588
3038
|
interface BsInputAttributes {
|
|
1589
3039
|
"value": string;
|
|
1590
|
-
"type":
|
|
3040
|
+
"type": | 'text'
|
|
3041
|
+
| 'email'
|
|
3042
|
+
| 'password'
|
|
3043
|
+
| 'number'
|
|
3044
|
+
| 'search'
|
|
3045
|
+
| 'date'
|
|
3046
|
+
| 'dropdown'
|
|
3047
|
+
| 'select'
|
|
3048
|
+
| 'textarea'
|
|
3049
|
+
| 'chip'
|
|
3050
|
+
| 'initials'
|
|
3051
|
+
| 'country'
|
|
3052
|
+
| 'pin';
|
|
1591
3053
|
"label": string;
|
|
1592
3054
|
"placeholder": string;
|
|
1593
3055
|
"description": string;
|
|
1594
3056
|
"error": string;
|
|
1595
3057
|
"disabled": boolean;
|
|
3058
|
+
"required": boolean;
|
|
3059
|
+
"step": number;
|
|
3060
|
+
"min": number;
|
|
3061
|
+
"max": number;
|
|
3062
|
+
"rows": number;
|
|
3063
|
+
"initialsTitle": string;
|
|
3064
|
+
"country": string;
|
|
3065
|
+
"length": number;
|
|
3066
|
+
"open": boolean;
|
|
3067
|
+
}
|
|
3068
|
+
interface BsMenuItemAttributes {
|
|
3069
|
+
"disabled": boolean;
|
|
1596
3070
|
}
|
|
1597
3071
|
interface BsModalAttributes {
|
|
1598
3072
|
"open": boolean;
|
|
1599
3073
|
"heading": string;
|
|
1600
3074
|
"size": BsModalSize;
|
|
1601
3075
|
}
|
|
3076
|
+
interface BsSourceLinkAttributes {
|
|
3077
|
+
"fileName": string;
|
|
3078
|
+
"sourceName": string;
|
|
3079
|
+
"version": string;
|
|
3080
|
+
"href": string;
|
|
3081
|
+
"target": string;
|
|
3082
|
+
}
|
|
1602
3083
|
interface BsTooltipAttributes {
|
|
1603
3084
|
"placement": 'top';
|
|
1604
3085
|
}
|
|
1605
3086
|
|
|
1606
3087
|
interface IntrinsicElements {
|
|
3088
|
+
"bs-ai-disclaimer": BsAiDisclaimer;
|
|
3089
|
+
"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
3090
|
"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] };
|
|
3091
|
+
"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] };
|
|
3092
|
+
"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
3093
|
"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
3094
|
"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
3095
|
"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
3096
|
"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] };
|
|
3097
|
+
"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
3098
|
"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
3099
|
"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] };
|
|
3100
|
+
"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
3101
|
"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
3102
|
"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] };
|
|
3103
|
+
"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
3104
|
"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
3105
|
"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
3106
|
"bs-menu": BsMenu;
|
|
1619
|
-
"bs-menu-item": BsMenuItem;
|
|
3107
|
+
"bs-menu-item": Omit<BsMenuItem, keyof BsMenuItemAttributes> & { [K in keyof BsMenuItem & keyof BsMenuItemAttributes]?: BsMenuItem[K] } & { [K in keyof BsMenuItem & keyof BsMenuItemAttributes as `attr:${K}`]?: BsMenuItemAttributes[K] } & { [K in keyof BsMenuItem & keyof BsMenuItemAttributes as `prop:${K}`]?: BsMenuItem[K] };
|
|
1620
3108
|
"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] };
|
|
3109
|
+
"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
3110
|
"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
3111
|
}
|
|
1623
3112
|
}
|
|
@@ -1625,6 +3114,53 @@ export { LocalJSX as JSX };
|
|
|
1625
3114
|
declare module "@stencil/core" {
|
|
1626
3115
|
export namespace JSX {
|
|
1627
3116
|
interface IntrinsicElements {
|
|
3117
|
+
/**
|
|
3118
|
+
* A centered caption disclaimer for Genie AI surfaces, e.g. "AI can make mistakes. Please verify
|
|
3119
|
+
* important information."
|
|
3120
|
+
* ## When to use
|
|
3121
|
+
* - Below or above `bs-composer` in a Genie AI chat panel, to remind users AI output can be wrong.
|
|
3122
|
+
* ## When not to use
|
|
3123
|
+
* - A general-purpose caption/helper text — use plain text or `bs-input`'s description slot for
|
|
3124
|
+
* non-AI-related helper copy.
|
|
3125
|
+
* The default slot (rather than a fixed prop) is intentional: Figma only specifies plain text, but
|
|
3126
|
+
* some consuming apps link out to a policy/help page from this copy, and a slot supports that
|
|
3127
|
+
* without inventing an unconfirmed `href`/link prop.
|
|
3128
|
+
* @prop --bs-ai-disclaimer-padding-x - Horizontal padding. Aliased to `--bs-spacing-200`.
|
|
3129
|
+
* @prop --bs-ai-disclaimer-text-color - Text color. Aliased to `--bs-text-secondary`.
|
|
3130
|
+
* @prop --bs-ai-disclaimer-font-size - Text font size. Aliased to `--bs-font-size-sm`.
|
|
3131
|
+
* @prop --bs-ai-disclaimer-line-height - Text line height. Aliased to `--bs-line-height-body-sm`.
|
|
3132
|
+
*/
|
|
3133
|
+
"bs-ai-disclaimer": LocalJSX.IntrinsicElements["bs-ai-disclaimer"] & JSXBase.HTMLAttributes<HTMLBsAiDisclaimerElement>;
|
|
3134
|
+
/**
|
|
3135
|
+
* The centered welcome heading shown at the top of an empty Genie AI chat panel, e.g.
|
|
3136
|
+
* "Hi. I'm Genie, your AI assistant." + "How can I help you with [product] today?"
|
|
3137
|
+
* ## When to use
|
|
3138
|
+
* - The empty/initial state of a Genie AI chat panel, before the user has sent a message.
|
|
3139
|
+
* ## When not to use
|
|
3140
|
+
* - Once a conversation has started -- this is a one-time empty-state greeting, not a persistent
|
|
3141
|
+
* header (see `bs-chatbot-header` for that).
|
|
3142
|
+
* `productName` is optional: Figma's copy has a `[product_name]` placeholder the consuming app is
|
|
3143
|
+
* expected to fill in, but a component shouldn't force a product name to exist, so leaving it
|
|
3144
|
+
* unset falls back to a product-agnostic "How can I help you today?".
|
|
3145
|
+
* @prop --bs-ai-greeting-gap - Gap between heading and subtext. Aliased to `--bs-spacing-200`.
|
|
3146
|
+
* @prop --bs-ai-greeting-max-width - Max width of the centered content block. Matches Figma's
|
|
3147
|
+
* 490px.
|
|
3148
|
+
* @prop --bs-ai-greeting-heading-color - Heading text color. Aliased to `--bs-text-default`.
|
|
3149
|
+
* @prop --bs-ai-greeting-heading-font-size - Heading font size. Aliased to `--bs-font-size-4xl`.
|
|
3150
|
+
* @prop --bs-ai-greeting-heading-line-height - Heading line height. Figma specifies 28px, which
|
|
3151
|
+
* doesn't match any `--bs-line-height-heading-*` token (h4 is 32) -- aliased directly to
|
|
3152
|
+
* `--bs-line-height-body-lg`, the token that happens to share the same numeric value.
|
|
3153
|
+
* @prop --bs-ai-greeting-heading-weight - Heading font weight. Aliased to `--bs-font-weight-bold`.
|
|
3154
|
+
* @prop --bs-ai-greeting-heading-gap - Gap between the two heading lines. Aliased to
|
|
3155
|
+
* `--bs-spacing-200`.
|
|
3156
|
+
* @prop --bs-ai-greeting-subtext-color - Subtext color. Aliased to `--bs-text-secondary`.
|
|
3157
|
+
* @prop --bs-ai-greeting-subtext-font-size - Subtext font size. Figma specifies 20px, which
|
|
3158
|
+
* doesn't match the semantic `--bs-text-style-body-lg-size` (18px) -- aliased directly to the
|
|
3159
|
+
* raw `--bs-font-size-xl` primitive instead.
|
|
3160
|
+
* @prop --bs-ai-greeting-subtext-line-height - Subtext line height. Aliased to
|
|
3161
|
+
* `--bs-line-height-body-lg`.
|
|
3162
|
+
*/
|
|
3163
|
+
"bs-ai-greeting": LocalJSX.IntrinsicElements["bs-ai-greeting"] & JSXBase.HTMLAttributes<HTMLBsAiGreetingElement>;
|
|
1628
3164
|
/**
|
|
1629
3165
|
* A small inline status indicator for Genie AI surfaces: the colorful Genie mark next to a label
|
|
1630
3166
|
* (e.g. "Retrieving", "Thinking", "Searching") whose text shimmers with a moving highlight band
|
|
@@ -1646,6 +3182,57 @@ declare module "@stencil/core" {
|
|
|
1646
3182
|
* `--bs-duration-slower` is 500ms), so this is aliased directly to the literal value.
|
|
1647
3183
|
*/
|
|
1648
3184
|
"bs-ai-thinking": LocalJSX.IntrinsicElements["bs-ai-thinking"] & JSXBase.HTMLAttributes<HTMLBsAiThinkingElement>;
|
|
3185
|
+
/**
|
|
3186
|
+
* A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
|
|
3187
|
+
* with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
|
|
3188
|
+
* a hover/focus-revealed remove button.
|
|
3189
|
+
* ## When to use
|
|
3190
|
+
* - Rendered by the consuming app for each file a user has attached to a Genie AI chat message,
|
|
3191
|
+
* typically alongside or inside `bs-composer`.
|
|
3192
|
+
* ## When not to use
|
|
3193
|
+
* - A generic file-upload control -- this is a preview-only presentational component. The
|
|
3194
|
+
* consuming app owns the actual file picker/upload logic and drives `loading` from that state.
|
|
3195
|
+
* @prop --bs-attachment-size - Width/height of the image thumbnail and of the card. Defaults to 112px.
|
|
3196
|
+
* @prop --bs-attachment-radius - Corner radius of the thumbnail/card. Aliased to
|
|
3197
|
+
* `--bs-border-radius-100`.
|
|
3198
|
+
* @prop --bs-attachment-border-color - Border color of the card / loading image wrap. Aliased to
|
|
3199
|
+
* `--bs-border-default`.
|
|
3200
|
+
* @prop --bs-attachment-card-bg - Card background. Aliased to `--bs-surface-base`.
|
|
3201
|
+
* @prop --bs-attachment-filename-color - Filename text color. Aliased to `--bs-text-default`.
|
|
3202
|
+
* @prop --bs-attachment-badge-bg-pdf - PDF badge background. Aliased to `--bs-badge-bg-error`.
|
|
3203
|
+
* @prop --bs-attachment-badge-bg-document - Document badge background. Aliased to
|
|
3204
|
+
* `--bs-badge-bg-info`.
|
|
3205
|
+
* @prop --bs-attachment-remove-bg - Remove button (neutral icon button) default background.
|
|
3206
|
+
* Aliased to `--bs-button-neutral-container`.
|
|
3207
|
+
* @prop --bs-attachment-remove-hover - Remove button hover background. Aliased to
|
|
3208
|
+
* `--bs-button-neutral-hover`.
|
|
3209
|
+
* @prop --bs-attachment-remove-pressed - Remove button active/pressed background. Aliased to
|
|
3210
|
+
* `--bs-button-neutral-pressed`.
|
|
3211
|
+
* @prop --bs-attachment-remove-focus - Remove button focus outline color. Aliased to
|
|
3212
|
+
* `--bs-border-neutral-focus`.
|
|
3213
|
+
*/
|
|
3214
|
+
"bs-attachment": LocalJSX.IntrinsicElements["bs-attachment"] & JSXBase.HTMLAttributes<HTMLBsAttachmentElement>;
|
|
3215
|
+
/**
|
|
3216
|
+
* A horizontally-scrolling row wrapper for one or more `bs-attachment` previews, for slotting into
|
|
3217
|
+
* `bs-composer`'s `attachments` slot when a Genie AI chat message has file attachments.
|
|
3218
|
+
* ## When to use
|
|
3219
|
+
* - Wrapping any number of `bs-attachment` elements the user has attached to a message, so they
|
|
3220
|
+
* lay out in a single row and scroll horizontally instead of wrapping/overflowing once there
|
|
3221
|
+
* are more than fit the available width.
|
|
3222
|
+
* ## When not to use
|
|
3223
|
+
* - A single attachment on its own — just render `bs-attachment` directly, this wrapper's
|
|
3224
|
+
* scroll/fade affordance only matters once there's more content than fits.
|
|
3225
|
+
* @prop --bs-attachment-list-gap - Gap between attachments. Matches the 10px Figma spec (not tied
|
|
3226
|
+
* to the `--bs-spacing-*` scale, which only has 8px/12px neighbors).
|
|
3227
|
+
* @prop --bs-attachment-list-padding - Padding around the row. Aliased to `--bs-spacing-150`.
|
|
3228
|
+
* @prop --bs-attachment-list-fade-color - Color the right-edge fade blends into. Aliased to
|
|
3229
|
+
* `--bs-static-white`.
|
|
3230
|
+
* @prop --bs-attachment-list-fade-width - Width of the right-edge fade overlay. Aliased to
|
|
3231
|
+
* `--bs-spacing-800`.
|
|
3232
|
+
* @prop --bs-attachment-list-scrollbar-thumb - Color of the scrollbar thumb that appears on
|
|
3233
|
+
* hover/focus once the row is scrollable. Aliased to `--bs-neutral-300`.
|
|
3234
|
+
*/
|
|
3235
|
+
"bs-attachment-list": LocalJSX.IntrinsicElements["bs-attachment-list"] & JSXBase.HTMLAttributes<HTMLBsAttachmentListElement>;
|
|
1649
3236
|
/**
|
|
1650
3237
|
* A small status or category pill, usually paired with a label or list item.
|
|
1651
3238
|
* ## When to use
|
|
@@ -1705,6 +3292,48 @@ declare module "@stencil/core" {
|
|
|
1705
3292
|
* - For a dismissible/transient message — use a modal or a dedicated notification component.
|
|
1706
3293
|
*/
|
|
1707
3294
|
"bs-card": LocalJSX.IntrinsicElements["bs-card"] & JSXBase.HTMLAttributes<HTMLBsCardElement>;
|
|
3295
|
+
/**
|
|
3296
|
+
* A star-rating feedback card shown at the end of a Genie AI chat: a heading/subtitle, a 5-star
|
|
3297
|
+
* rating, an optional comment, and either "Submit feedback" + "Start new chat" (before
|
|
3298
|
+
* submitting) or just "Start new chat" (after).
|
|
3299
|
+
* ## When to use
|
|
3300
|
+
* - Prompting for feedback on a Genie response or chat session, typically after the user ends or
|
|
3301
|
+
* restarts a conversation.
|
|
3302
|
+
* ## When not to use
|
|
3303
|
+
* - A generic star-rating input elsewhere in the product -- this component's copy and layout are
|
|
3304
|
+
* purpose-built for the Genie feedback flow, not a reusable rating control.
|
|
3305
|
+
* The heading and subtitle are not freeform props: before submitting, they're always the fixed
|
|
3306
|
+
* "How was your experience..." copy; after submitting, they're determined entirely by `rating`
|
|
3307
|
+
* (1-2 stars reads apologetic, 3 neutral, 4-5 positive), matching the Figma source exactly. Use
|
|
3308
|
+
* `heading`/`subtitle` only if a consuming app genuinely needs to override that copy.
|
|
3309
|
+
* @prop --bs-chatbot-feedback-bg - Card background. Aliased to `--bs-surface-raised`.
|
|
3310
|
+
* @prop --bs-chatbot-feedback-border - Card border color. Aliased to `--bs-border-default`.
|
|
3311
|
+
* @prop --bs-chatbot-feedback-radius - Card corner radius. Aliased to `--bs-border-radius-200`.
|
|
3312
|
+
* @prop --bs-chatbot-feedback-padding-x - Card horizontal padding. Aliased to `--bs-spacing-250`.
|
|
3313
|
+
* @prop --bs-chatbot-feedback-padding-y - Card vertical padding. Aliased to `--bs-spacing-550`.
|
|
3314
|
+
* @prop --bs-chatbot-feedback-max-width - Max width of the card. Matches Figma's 762px.
|
|
3315
|
+
* @prop --bs-chatbot-feedback-gap - Gap between the top content block and the button(s). Aliased
|
|
3316
|
+
* to `--bs-spacing-300`.
|
|
3317
|
+
* @prop --bs-chatbot-feedback-top-gap - Gap between heading/subtitle, stars, and the
|
|
3318
|
+
* textarea/comment within the top block. Aliased to `--bs-spacing-250`.
|
|
3319
|
+
* @prop --bs-chatbot-feedback-heading-color - Aliased to `--bs-text-default`.
|
|
3320
|
+
* @prop --bs-chatbot-feedback-subtitle-color - Aliased to `--bs-text-secondary`.
|
|
3321
|
+
* @prop --bs-chatbot-feedback-star-filled - Filled star color. Aliased to `--bs-color-primary-default`.
|
|
3322
|
+
* @prop --bs-chatbot-feedback-star-empty - Empty star color. Aliased to `--bs-border-neutral-container`.
|
|
3323
|
+
* @prop --bs-chatbot-feedback-comment-color - Submitted comment text color. Aliased to `--bs-text-default`.
|
|
3324
|
+
* @prop --bs-chatbot-feedback-close-hover - Close button hover background. Aliased to `--bs-surface-hover`.
|
|
3325
|
+
* @prop --bs-chatbot-feedback-primary-bg - "Submit feedback" / post-submit "Start new chat"
|
|
3326
|
+
* background. Aliased to `--bs-button-primary-default`.
|
|
3327
|
+
* @prop --bs-chatbot-feedback-primary-bg-hover - Aliased to `--bs-button-primary-hover`.
|
|
3328
|
+
* @prop --bs-chatbot-feedback-primary-bg-disabled - Aliased to `--bs-button-primary-disabled`.
|
|
3329
|
+
* @prop --bs-chatbot-feedback-outlined-border - Pre-submit "Start new chat" border. Aliased to
|
|
3330
|
+
* `--bs-border-primary`.
|
|
3331
|
+
* @prop --bs-chatbot-feedback-outlined-hover - Pre-submit "Start new chat" hover background.
|
|
3332
|
+
* Aliased to `--bs-color-primary-container-hover`.
|
|
3333
|
+
* @prop --bs-chatbot-feedback-outlined-text - Pre-submit "Start new chat" text/icon color.
|
|
3334
|
+
* Aliased to `--bs-text-action`.
|
|
3335
|
+
*/
|
|
3336
|
+
"bs-chatbot-feedback": LocalJSX.IntrinsicElements["bs-chatbot-feedback"] & JSXBase.HTMLAttributes<HTMLBsChatbotFeedbackElement>;
|
|
1708
3337
|
/**
|
|
1709
3338
|
* The header bar that sits above `bs-composer` in a Genie AI chat panel: the Genie brand mark on
|
|
1710
3339
|
* the left and four fixed actions (new chat, history, expand, close) on the right.
|
|
@@ -1758,6 +3387,35 @@ declare module "@stencil/core" {
|
|
|
1758
3387
|
* @prop --bs-chatbot-response-action-sources-line-height - Aliased to `--bs-line-height-body-sm`.
|
|
1759
3388
|
*/
|
|
1760
3389
|
"bs-chatbot-response-action": LocalJSX.IntrinsicElements["bs-chatbot-response-action"] & JSXBase.HTMLAttributes<HTMLBsChatbotResponseActionElement>;
|
|
3390
|
+
/**
|
|
3391
|
+
* The "Sources" panel shown alongside a Genie AI chat response -- a header with a title, a count
|
|
3392
|
+
* badge, and a collapse chevron, above a stack of `bs-source-link` citation rows.
|
|
3393
|
+
* ## When to use
|
|
3394
|
+
* - Displaying the documents/sources a Genie response cited, typically opened from a "view
|
|
3395
|
+
* sources" action on a `bs-chatbot-response-action` bar.
|
|
3396
|
+
* ## When not to use
|
|
3397
|
+
* - A generic list container -- this component's header (title + count + collapse) is
|
|
3398
|
+
* purpose-built for the sources use case.
|
|
3399
|
+
* @prop --bs-chatbot-sources-drawer-bg - Background of the whole panel. Aliased to `--bs-surface-raised`.
|
|
3400
|
+
* @prop --bs-chatbot-sources-drawer-header-shadow - Drop shadow under the header, separating it
|
|
3401
|
+
* from the scrolled list. Aliased to `--bs-shadow-xs`.
|
|
3402
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-x - Aliased to `--bs-spacing-200`.
|
|
3403
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-top - Aliased to `--bs-spacing-150`.
|
|
3404
|
+
* @prop --bs-chatbot-sources-drawer-header-padding-bottom - Aliased to `--bs-spacing-100`.
|
|
3405
|
+
* @prop --bs-chatbot-sources-drawer-heading-color - Aliased to `--bs-text-default`.
|
|
3406
|
+
* @prop --bs-chatbot-sources-drawer-count-bg - Count badge background. Aliased to
|
|
3407
|
+
* `--bs-badge-bg-neutral-container`.
|
|
3408
|
+
* @prop --bs-chatbot-sources-drawer-count-color - Count badge text color. Aliased to
|
|
3409
|
+
* `--bs-badge-text-neutral`.
|
|
3410
|
+
* @prop --bs-chatbot-sources-drawer-collapse-hover - Collapse button background on hover. Aliased
|
|
3411
|
+
* to `--bs-surface-hover`.
|
|
3412
|
+
* @prop --bs-chatbot-sources-drawer-section-gap - Gap between the header and the list. Aliased to
|
|
3413
|
+
* `--bs-spacing-200`.
|
|
3414
|
+
* @prop --bs-chatbot-sources-drawer-list-padding - Horizontal/bottom padding of the list. Aliased
|
|
3415
|
+
* to `--bs-spacing-200`.
|
|
3416
|
+
* @prop --bs-chatbot-sources-drawer-list-gap - Gap between rows. Aliased to `--bs-spacing-50`.
|
|
3417
|
+
*/
|
|
3418
|
+
"bs-chatbot-sources-drawer": LocalJSX.IntrinsicElements["bs-chatbot-sources-drawer"] & JSXBase.HTMLAttributes<HTMLBsChatbotSourcesDrawerElement>;
|
|
1761
3419
|
/**
|
|
1762
3420
|
* A pill-shaped clickable suggestion chip for a Genie AI chat panel (e.g. "How can I help you?").
|
|
1763
3421
|
* One instance renders one chip -- to show several suggestion prompts side by side, render
|
|
@@ -1823,6 +3481,64 @@ declare module "@stencil/core" {
|
|
|
1823
3481
|
* @prop --bs-composer-subtle-pressed - Background of the attach/mic buttons when pressed. Aliased to `--bs-color-neutral-container-pressed`.
|
|
1824
3482
|
*/
|
|
1825
3483
|
"bs-composer": LocalJSX.IntrinsicElements["bs-composer"] & JSXBase.HTMLAttributes<HTMLBsComposerElement>;
|
|
3484
|
+
/**
|
|
3485
|
+
* A full-width status banner for use directly above `bs-composer`, surfacing a message about the
|
|
3486
|
+
* composer's current state (e.g. a send failure, an informational notice) with an optional
|
|
3487
|
+
* "Continue"-style action button and an optional close button.
|
|
3488
|
+
* ## When to use
|
|
3489
|
+
* - A message tied to the composer itself (send failed, rate-limited, draft restored, etc.) that
|
|
3490
|
+
* needs to sit directly above it, not a general-purpose alert -- see `CONVENTIONS.md` if this
|
|
3491
|
+
* library gains a generic banner/alert component later, and prefer that instead once it exists.
|
|
3492
|
+
* ## When not to use
|
|
3493
|
+
* - A toast/snackbar notification unrelated to the composer -- this component is not
|
|
3494
|
+
* self-dismissing and has no positioning of its own (it's a static block, not an overlay).
|
|
3495
|
+
* @prop --bs-composer-status-banner-radius - Corner radius of the top-left/top-right corners
|
|
3496
|
+
* (bottom corners are square, so this sits flush above `bs-composer`). Aliased to
|
|
3497
|
+
* `--bs-border-radius-150`.
|
|
3498
|
+
* @prop --bs-composer-status-banner-padding-x - Horizontal padding. Aliased to `--bs-spacing-150`.
|
|
3499
|
+
* @prop --bs-composer-status-banner-padding-top - Top padding. Aliased to `--bs-spacing-100`.
|
|
3500
|
+
* @prop --bs-composer-status-banner-padding-bottom - Bottom padding. Aliased to `--bs-spacing-200`.
|
|
3501
|
+
* @prop --bs-composer-status-banner-gap - Gap between the message group and the action/close
|
|
3502
|
+
* controls. Aliased to `--bs-spacing-100`.
|
|
3503
|
+
* @prop --bs-composer-status-banner-icon-gap - Gap between the icon and the message text.
|
|
3504
|
+
* Aliased to `--bs-spacing-75`.
|
|
3505
|
+
* @prop --bs-composer-status-banner-error-bg - Background for `type="error"`. Aliased to
|
|
3506
|
+
* `--bs-color-error-container`.
|
|
3507
|
+
* @prop --bs-composer-status-banner-error-text - Text/icon color for `type="error"`. Aliased to
|
|
3508
|
+
* `--bs-text-error`.
|
|
3509
|
+
* @prop --bs-composer-status-banner-error-action-bg - Action button background for
|
|
3510
|
+
* `type="error"`. Aliased to `--bs-color-error-default`.
|
|
3511
|
+
* @prop --bs-composer-status-banner-error-action-bg-hover - Aliased to `--bs-color-error-hover`.
|
|
3512
|
+
* @prop --bs-composer-status-banner-info-bg - Background for `type="info"`. Aliased to
|
|
3513
|
+
* `--bs-color-info-container`.
|
|
3514
|
+
* @prop --bs-composer-status-banner-info-text - Text/icon color for `type="info"`. Aliased to
|
|
3515
|
+
* `--bs-text-info`.
|
|
3516
|
+
* @prop --bs-composer-status-banner-info-action-bg - Action button background for `type="info"`.
|
|
3517
|
+
* Aliased to `--bs-color-info-default`.
|
|
3518
|
+
* @prop --bs-composer-status-banner-info-action-bg-hover - Aliased to `--bs-color-info-hover`.
|
|
3519
|
+
* @prop --bs-composer-status-banner-neutral-bg - Background for `type="neutral"`. Aliased to
|
|
3520
|
+
* `--bs-color-neutral-container`.
|
|
3521
|
+
* @prop --bs-composer-status-banner-neutral-text - Text/icon color for `type="neutral"`. Aliased
|
|
3522
|
+
* to `--bs-text-default`.
|
|
3523
|
+
* @prop --bs-composer-status-banner-neutral-action-bg - Action button background for
|
|
3524
|
+
* `type="neutral"`. Aliased to `--bs-color-neutral-container`.
|
|
3525
|
+
* @prop --bs-composer-status-banner-neutral-action-bg-hover - Aliased to
|
|
3526
|
+
* `--bs-color-neutral-container-hover`.
|
|
3527
|
+
* @prop --bs-composer-status-banner-neutral-action-border - Action button border for
|
|
3528
|
+
* `type="neutral"` (the only variant whose action button is outlined). Aliased to
|
|
3529
|
+
* `--bs-border-neutral-container`.
|
|
3530
|
+
* @prop --bs-composer-status-banner-warning-bg - Background for `type="warning"`. Aliased to
|
|
3531
|
+
* `--bs-color-warning-container`.
|
|
3532
|
+
* @prop --bs-composer-status-banner-warning-text - Text/icon color for `type="warning"`. Aliased
|
|
3533
|
+
* to `--bs-text-warning`.
|
|
3534
|
+
* @prop --bs-composer-status-banner-warning-action-bg - Action button background for
|
|
3535
|
+
* `type="warning"`. Aliased to `--bs-color-warning-default`.
|
|
3536
|
+
* @prop --bs-composer-status-banner-warning-action-bg-hover - Aliased to
|
|
3537
|
+
* `--bs-color-warning-hover`.
|
|
3538
|
+
* @prop --bs-composer-status-banner-close-hover-bg - Close button hover background (same across
|
|
3539
|
+
* every `type`). Aliased to `--bs-color-neutral-container-hover`.
|
|
3540
|
+
*/
|
|
3541
|
+
"bs-composer-status-banner": LocalJSX.IntrinsicElements["bs-composer-status-banner"] & JSXBase.HTMLAttributes<HTMLBsComposerStatusBannerElement>;
|
|
1826
3542
|
/**
|
|
1827
3543
|
* A sortable, optionally row-selectable table for tabular data.
|
|
1828
3544
|
* `columns`, `rows`, and `cellRenderer` are JS-property-only — HTML attributes can only carry
|
|
@@ -1836,13 +3552,20 @@ declare module "@stencil/core" {
|
|
|
1836
3552
|
*/
|
|
1837
3553
|
"bs-data-table": LocalJSX.IntrinsicElements["bs-data-table"] & JSXBase.HTMLAttributes<HTMLBsDataTableElement>;
|
|
1838
3554
|
/**
|
|
1839
|
-
* A single-line text field with an optional label, description, and error state.
|
|
3555
|
+
* A single-line text field with an optional label, description, and error state. Also covers a
|
|
3556
|
+
* range of related "field" shapes (number stepper, password reveal, date, dropdown trigger,
|
|
3557
|
+
* select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
|
|
3558
|
+
* share the same label/description/error/icon-slot chrome.
|
|
1840
3559
|
* ## When to use
|
|
1841
3560
|
* - Collecting a single line of free-text, email, password, or numeric input.
|
|
3561
|
+
* - Any of the other supported `type`s (search, date, dropdown, select, textarea, chip, initials,
|
|
3562
|
+
* country, pin) that share this component's label/description/error chrome.
|
|
1842
3563
|
* - Pair with `error` for inline validation feedback tied to that specific field.
|
|
1843
3564
|
* ## When not to use
|
|
1844
|
-
* -
|
|
1845
|
-
*
|
|
3565
|
+
* - A fixed set of choices best served by a dedicated radio/checkbox group rather than a single
|
|
3566
|
+
* field. `type="select"` (native `<select>`) and `type="dropdown"` (a `bs-menu` of
|
|
3567
|
+
* `bs-menu-item`s from the `options` prop) cover the field-shaped cases; `type="chip"` has no
|
|
3568
|
+
* options list at all (freeform chip entry).
|
|
1846
3569
|
*/
|
|
1847
3570
|
"bs-input": LocalJSX.IntrinsicElements["bs-input"] & JSXBase.HTMLAttributes<HTMLBsInputElement>;
|
|
1848
3571
|
/**
|
|
@@ -1873,10 +3596,13 @@ declare module "@stencil/core" {
|
|
|
1873
3596
|
* @prop --bs-menu-item-padding-y - Top/bottom padding. Aliased to `--bs-spacing-100`.
|
|
1874
3597
|
* @prop --bs-menu-item-padding-x - Left/right padding. Aliased to `--bs-spacing-150`.
|
|
1875
3598
|
* @prop --bs-menu-item-gap - Gap between icon and label. Aliased to `--bs-spacing-100`.
|
|
1876
|
-
* @prop --bs-menu-item-hover - Background on hover. Aliased to `--bs-color-neutral-container`.
|
|
3599
|
+
* @prop --bs-menu-item-hover - Background on hover. Aliased to `--bs-color-neutral-container-hover`.
|
|
1877
3600
|
* @prop --bs-menu-item-pressed - Background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
|
|
3601
|
+
* @prop --bs-menu-item-disabled-bg - Background when `disabled` is set. Aliased to `--bs-surface-action-disabled`.
|
|
1878
3602
|
* @prop --bs-menu-item-icon-color - Icon color. Aliased to `--bs-icon-default`.
|
|
3603
|
+
* @prop --bs-menu-item-icon-color-disabled - Icon color when `disabled` is set. Aliased to `--bs-icon-disabled`.
|
|
1879
3604
|
* @prop --bs-menu-item-color - Label text color. Aliased to `--bs-text-muted`.
|
|
3605
|
+
* @prop --bs-menu-item-color-disabled - Label text color when `disabled` is set. Aliased to `--bs-text-on-disabled`.
|
|
1880
3606
|
* @prop --bs-menu-item-font-size - Aliased to `--bs-font-size-md`.
|
|
1881
3607
|
* @prop --bs-menu-item-line-height - Aliased to `--bs-line-height-body-md`.
|
|
1882
3608
|
*/
|
|
@@ -1893,6 +3619,32 @@ declare module "@stencil/core" {
|
|
|
1893
3619
|
* modal that just gets taller and taller.
|
|
1894
3620
|
*/
|
|
1895
3621
|
"bs-modal": LocalJSX.IntrinsicElements["bs-modal"] & JSXBase.HTMLAttributes<HTMLBsModalElement>;
|
|
3622
|
+
/**
|
|
3623
|
+
* A single citation row inside `bs-chatbot-sources-drawer` -- a file icon + filename on the first
|
|
3624
|
+
* line, the originating system and version on the second, and a trailing "open" arrow.
|
|
3625
|
+
* ## When to use
|
|
3626
|
+
* - One row per source Genie cited in a response, slotted into `bs-chatbot-sources-drawer`.
|
|
3627
|
+
* ## When not to use
|
|
3628
|
+
* - Outside the sources drawer context -- this is a purpose-built citation row, not a generic
|
|
3629
|
+
* link/list-item component.
|
|
3630
|
+
* @prop --bs-source-link-radius - Corner radius of the row. Aliased to `--bs-border-radius-150`.
|
|
3631
|
+
* @prop --bs-source-link-padding - Padding around the row. Aliased to `--bs-spacing-150`.
|
|
3632
|
+
* @prop --bs-source-link-gap - Gap between the filename+meta block and the trailing arrow.
|
|
3633
|
+
* Aliased to `--bs-spacing-50`.
|
|
3634
|
+
* @prop --bs-source-link-icon-gap - Gap between the leading icon and the filename text. Aliased
|
|
3635
|
+
* to `--bs-spacing-75`.
|
|
3636
|
+
* @prop --bs-source-link-hover - Row background on hover/focus. Aliased to `--bs-surface-hover`.
|
|
3637
|
+
* @prop --bs-source-link-pressed - Row background while active/pressed. Aliased to
|
|
3638
|
+
* `--bs-surface-pressed`.
|
|
3639
|
+
* @prop --bs-source-link-focus - Focus-visible outline color. Aliased to
|
|
3640
|
+
* `--bs-border-neutral-focus`.
|
|
3641
|
+
* @prop --bs-source-link-filename-color - Filename text color. Aliased to `--bs-text-default`.
|
|
3642
|
+
* @prop --bs-source-link-meta-color - Source/version text color. Aliased to `--bs-text-secondary`.
|
|
3643
|
+
* @prop --bs-source-link-icon-color - File icon and arrow color. Aliased to `--bs-icon-default`.
|
|
3644
|
+
* @prop --bs-source-link-dot-color - Separator dot between source and version. Aliased to
|
|
3645
|
+
* `--bs-text-secondary`.
|
|
3646
|
+
*/
|
|
3647
|
+
"bs-source-link": LocalJSX.IntrinsicElements["bs-source-link"] & JSXBase.HTMLAttributes<HTMLBsSourceLinkElement>;
|
|
1896
3648
|
/**
|
|
1897
3649
|
* A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
|
|
1898
3650
|
* next to a trigger element.
|