@brandsync/wc 0.0.3 → 0.0.5

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.
Files changed (101) hide show
  1. package/custom-elements.json +417 -0
  2. package/dist/brandsync-wc/brandsync-wc.esm.js +1 -1
  3. package/dist/brandsync-wc/{p-f9e93a35.entry.js → p-0ded3be8.entry.js} +1 -1
  4. package/dist/brandsync-wc/p-1dc6d7f5.entry.js +1 -0
  5. package/dist/brandsync-wc/{p-2b693545.entry.js → p-27288299.entry.js} +1 -1
  6. package/dist/brandsync-wc/{p-c2cc0d6f.entry.js → p-2742ecef.entry.js} +1 -1
  7. package/dist/brandsync-wc/p-300eea85.entry.js +1 -0
  8. package/dist/brandsync-wc/{p-69faa19c.entry.js → p-6c1fa4da.entry.js} +1 -1
  9. package/dist/brandsync-wc/{p-da11e421.entry.js → p-880ea3f8.entry.js} +1 -1
  10. package/dist/brandsync-wc/{p-f0ca3562.entry.js → p-9e5d2211.entry.js} +1 -1
  11. package/dist/brandsync-wc/{p-3134f5f5.entry.js → p-ab5cc7af.entry.js} +1 -1
  12. package/dist/brandsync-wc/p-b24c455f.entry.js +1 -0
  13. package/dist/brandsync-wc/p-cdbad27a.entry.js +1 -0
  14. package/dist/brandsync-wc/{p-5739acaf.entry.js → p-cfc3421b.entry.js} +1 -1
  15. package/dist/brandsync-wc/{p-BOj_41o9.js → p-nLORuTUY.js} +2 -2
  16. package/dist/cjs/brandsync-wc.cjs.js +2 -2
  17. package/dist/cjs/bs-badge.cjs.entry.js +1 -1
  18. package/dist/cjs/bs-button-skeleton.cjs.entry.js +1 -1
  19. package/dist/cjs/bs-button.cjs.entry.js +1 -1
  20. package/dist/cjs/bs-card.cjs.entry.js +1 -1
  21. package/dist/cjs/bs-chatbot-header.cjs.entry.js +144 -0
  22. package/dist/cjs/bs-chatbot-response-action.cjs.entry.js +92 -0
  23. package/dist/cjs/bs-composer.cjs.entry.js +1 -1
  24. package/dist/cjs/bs-data-table.cjs.entry.js +1 -1
  25. package/dist/cjs/bs-input.cjs.entry.js +3 -3
  26. package/dist/cjs/bs-menu-item.cjs.entry.js +29 -0
  27. package/dist/cjs/bs-menu.cjs.entry.js +17 -0
  28. package/dist/cjs/bs-modal.cjs.entry.js +1 -1
  29. package/dist/cjs/{index-nyOcuVbF.js → index-CVh-sqA_.js} +3 -0
  30. package/dist/cjs/loader.cjs.js +2 -2
  31. package/dist/collection/collection-manifest.json +5 -1
  32. package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.cmp.test.js +94 -0
  33. package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.css +81 -0
  34. package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.js +194 -0
  35. package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.stories.js +53 -0
  36. package/dist/collection/components/bs-chatbot-header/genie-logo.js +86 -0
  37. package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.cmp.test.js +174 -0
  38. package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.css +120 -0
  39. package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.js +280 -0
  40. package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.stories.js +129 -0
  41. package/dist/collection/components/bs-input/bs-input.js +2 -2
  42. package/dist/collection/components/bs-menu/bs-menu.cmp.test.js +18 -0
  43. package/dist/collection/components/bs-menu/bs-menu.css +20 -0
  44. package/dist/collection/components/bs-menu/bs-menu.js +39 -0
  45. package/dist/collection/components/bs-menu/bs-menu.stories.js +15 -0
  46. package/dist/collection/components/bs-menu-item/bs-menu-item.cmp.test.js +33 -0
  47. package/dist/collection/components/bs-menu-item/bs-menu-item.css +68 -0
  48. package/dist/collection/components/bs-menu-item/bs-menu-item.js +79 -0
  49. package/dist/collection/components/bs-menu-item/bs-menu-item.stories.js +37 -0
  50. package/dist/components/bs-badge.js +1 -1
  51. package/dist/components/bs-button-skeleton.js +1 -1
  52. package/dist/components/bs-button.js +1 -1
  53. package/dist/components/bs-card.js +1 -1
  54. package/dist/components/bs-chatbot-header.d.ts +11 -0
  55. package/dist/components/bs-chatbot-header.js +1 -0
  56. package/dist/components/bs-chatbot-response-action.d.ts +11 -0
  57. package/dist/components/bs-chatbot-response-action.js +1 -0
  58. package/dist/components/bs-composer.js +1 -1
  59. package/dist/components/bs-data-table.js +1 -1
  60. package/dist/components/bs-input.js +1 -1
  61. package/dist/components/bs-menu-item.d.ts +11 -0
  62. package/dist/components/bs-menu-item.js +1 -0
  63. package/dist/components/bs-menu.d.ts +11 -0
  64. package/dist/components/bs-menu.js +1 -0
  65. package/dist/components/bs-modal.js +1 -1
  66. package/dist/components/index.js +1 -1
  67. package/dist/components/{p-Cu4gTknX.js → p-BpvhHQSw.js} +1 -1
  68. package/dist/esm/brandsync-wc.js +3 -3
  69. package/dist/esm/bs-badge.entry.js +1 -1
  70. package/dist/esm/bs-button-skeleton.entry.js +1 -1
  71. package/dist/esm/bs-button.entry.js +1 -1
  72. package/dist/esm/bs-card.entry.js +1 -1
  73. package/dist/esm/bs-chatbot-header.entry.js +142 -0
  74. package/dist/esm/bs-chatbot-response-action.entry.js +90 -0
  75. package/dist/esm/bs-composer.entry.js +1 -1
  76. package/dist/esm/bs-data-table.entry.js +1 -1
  77. package/dist/esm/bs-input.entry.js +3 -3
  78. package/dist/esm/bs-menu-item.entry.js +27 -0
  79. package/dist/esm/bs-menu.entry.js +15 -0
  80. package/dist/esm/bs-modal.entry.js +1 -1
  81. package/dist/esm/{index-BOj_41o9.js → index-nLORuTUY.js} +3 -0
  82. package/dist/esm/loader.js +3 -3
  83. package/dist/types/components/bs-chatbot-header/bs-chatbot-header.cmp.test.d.ts +1 -0
  84. package/dist/types/components/bs-chatbot-header/bs-chatbot-header.d.ts +59 -0
  85. package/dist/types/components/bs-chatbot-header/bs-chatbot-header.stories.d.ts +9 -0
  86. package/dist/types/components/bs-chatbot-header/genie-logo.d.ts +1 -0
  87. package/dist/types/components/bs-chatbot-response-action/bs-chatbot-response-action.cmp.test.d.ts +1 -0
  88. package/dist/types/components/bs-chatbot-response-action/bs-chatbot-response-action.d.ts +81 -0
  89. package/dist/types/components/bs-chatbot-response-action/bs-chatbot-response-action.stories.d.ts +11 -0
  90. package/dist/types/components/bs-menu/bs-menu.cmp.test.d.ts +1 -0
  91. package/dist/types/components/bs-menu/bs-menu.d.ts +24 -0
  92. package/dist/types/components/bs-menu/bs-menu.stories.d.ts +5 -0
  93. package/dist/types/components/bs-menu-item/bs-menu-item.cmp.test.d.ts +1 -0
  94. package/dist/types/components/bs-menu-item/bs-menu-item.d.ts +38 -0
  95. package/dist/types/components/bs-menu-item/bs-menu-item.stories.d.ts +7 -0
  96. package/dist/types/components.d.ts +507 -0
  97. package/package.json +2 -1
  98. package/readme.md +38 -0
  99. package/dist/brandsync-wc/brandsync-wc.esm.js.map +0 -1
  100. package/dist/brandsync-wc/index-Cqxk7LcP.js.map +0 -1
  101. package/dist/brandsync-wc/index.esm.js.map +0 -1
@@ -0,0 +1,129 @@
1
+ import { html } from "lit";
2
+ import { componentDescription, propDescription } from "../../stories-utils";
3
+ const meta = {
4
+ title: 'Genie AI Components/bs-chatbot-response-action',
5
+ parameters: { docs: { description: { component: componentDescription('bs-chatbot-response-action') } } },
6
+ render: args => html ` <bs-chatbot-response-action sources-count=${args.sourcesCount || undefined}></bs-chatbot-response-action> `,
7
+ argTypes: {
8
+ sourcesCount: { control: 'number', description: propDescription('bs-chatbot-response-action', 'sources-count') },
9
+ },
10
+ args: {
11
+ sourcesCount: 3,
12
+ },
13
+ };
14
+ export default meta;
15
+ export const Default = {};
16
+ export const NoSources = {
17
+ name: 'Without sources',
18
+ args: {
19
+ sourcesCount: 0,
20
+ },
21
+ };
22
+ export const InResponseMessage = {
23
+ name: 'In an AI response message',
24
+ render: () => html `
25
+ <div style="max-width: 480px; font-family: sans-serif;">
26
+ <p style="margin: 0; color: #1a1a1a; font-size: 14px; line-height: 20px;">
27
+ This is a placeholder AI response message. It demonstrates how the action row sits directly below the
28
+ response text, aligned to the left edge of the message.
29
+ </p>
30
+ <bs-chatbot-response-action sources-count="3"></bs-chatbot-response-action>
31
+ </div>
32
+ `,
33
+ };
34
+ const ReadAloudIcon = () => html `
35
+ <svg slot="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
36
+ <path
37
+ d="M7.5 15.75H3C2.80109 15.75 2.61032 15.671 2.46967 15.5303C2.32902 15.3897 2.25 15.1989 2.25 15V9C2.25 8.80109 2.32902 8.61032 2.46967 8.46967C2.61032 8.32902 2.80109 8.25 3 8.25H7.5L14.25 3V21L7.5 15.75Z"
38
+ stroke="currentColor"
39
+ stroke-width="2"
40
+ stroke-linecap="round"
41
+ stroke-linejoin="round"
42
+ />
43
+ <path d="M7.5 8.25V15.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
44
+ <path
45
+ d="M18 10.0172C18.4825 10.565 18.7487 11.27 18.7487 12C18.7487 12.73 18.4825 13.435 18 13.9828"
46
+ stroke="currentColor"
47
+ stroke-width="2"
48
+ stroke-linecap="round"
49
+ stroke-linejoin="round"
50
+ />
51
+ <path
52
+ d="M20.7816 7.5C21.8885 8.73755 22.5004 10.3397 22.5004 12C22.5004 13.6603 21.8885 15.2624 20.7816 16.5"
53
+ stroke="currentColor"
54
+ stroke-width="2"
55
+ stroke-linecap="round"
56
+ stroke-linejoin="round"
57
+ />
58
+ </svg>
59
+ `;
60
+ const ChatWithHumanIcon = () => html `
61
+ <svg slot="icon" viewBox="0 0 24.5 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
62
+ <path
63
+ d="M12.25 15C14.3211 15 16 13.3211 16 11.25C16 9.17893 14.3211 7.5 12.25 7.5C10.1789 7.5 8.5 9.17893 8.5 11.25C8.5 13.3211 10.1789 15 12.25 15Z"
64
+ stroke="currentColor"
65
+ stroke-width="2"
66
+ stroke-linecap="round"
67
+ stroke-linejoin="round"
68
+ />
69
+ <path
70
+ d="M6.23125 18.6909C6.79554 17.5795 7.65659 16.6459 8.71895 15.9939C9.7813 15.3418 11.0035 14.9966 12.25 14.9966C13.4965 14.9966 14.7187 15.3418 15.7811 15.9939C16.8434 16.6459 17.7045 17.5795 18.2687 18.6909"
71
+ stroke="currentColor"
72
+ stroke-width="2"
73
+ stroke-linecap="round"
74
+ stroke-linejoin="round"
75
+ />
76
+ <path d="M19 12L21.25 14.25L23.5 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
77
+ <path d="M1 12L3.25 9.75L5.5 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
78
+ <path
79
+ d="M3.25 9.75V12C3.24929 13.9055 3.85337 15.762 4.97524 17.3022C6.09712 18.8424 7.67888 19.9868 9.49273 20.5706C11.3066 21.1543 13.2589 21.1474 15.0685 20.5506C16.8782 19.9539 18.4517 18.7982 19.5625 17.25"
80
+ stroke="currentColor"
81
+ stroke-width="2"
82
+ stroke-linecap="round"
83
+ stroke-linejoin="round"
84
+ />
85
+ <path
86
+ d="M21.25 14.25V12C21.2507 10.0945 20.6466 8.238 19.5248 6.69779C18.4029 5.15758 16.8211 4.01319 15.0073 3.42942C13.1934 2.84565 11.2411 2.85264 9.43147 3.44938C7.62185 4.04611 6.04832 5.2018 4.9375 6.75"
87
+ stroke="currentColor"
88
+ stroke-width="2"
89
+ stroke-linecap="round"
90
+ stroke-linejoin="round"
91
+ />
92
+ </svg>
93
+ `;
94
+ const RaiseTicketIcon = () => html `
95
+ <svg slot="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
96
+ <path d="M9 5.25V18.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
97
+ <path
98
+ d="M2.25 15C3.04565 15 3.80871 14.6839 4.37132 14.1213C4.93393 13.5587 5.25 12.7956 5.25 12C5.25 11.2044 4.93393 10.4413 4.37132 9.87868C3.80871 9.31607 3.04565 9 2.25 9V6C2.25 5.80109 2.32902 5.61032 2.46967 5.46967C2.61032 5.32902 2.80109 5.25 3 5.25H21C21.1989 5.25 21.3897 5.32902 21.5303 5.46967C21.671 5.61032 21.75 5.80109 21.75 6V9C20.9544 9 20.1913 9.31607 19.6287 9.87868C19.0661 10.4413 18.75 11.2044 18.75 12C18.75 12.7956 19.0661 13.5587 19.6287 14.1213C20.1913 14.6839 20.9544 15 21.75 15V18C21.75 18.1989 21.671 18.3897 21.5303 18.5303C21.3897 18.671 21.1989 18.75 21 18.75H3C2.80109 18.75 2.61032 18.671 2.46967 18.5303C2.32902 18.3897 2.25 18.1989 2.25 18V15Z"
99
+ stroke="currentColor"
100
+ stroke-width="2"
101
+ stroke-linecap="round"
102
+ stroke-linejoin="round"
103
+ />
104
+ </svg>
105
+ `;
106
+ export const WithMenu = {
107
+ name: 'More options menu',
108
+ render: () => {
109
+ // Demonstrates the intended integration pattern: bs-chatbot-response-action only tracks/emits
110
+ // the menuOpen toggle and provides a `menu` slot positioned below the kebab button -- it has no
111
+ // opinion on what goes in the menu. The consuming app (here, this story) supplies a bs-menu with
112
+ // real bs-menu-items and is responsible for wiring bsMenuOpen to the response-action's menuOpen
113
+ // prop, mirroring how bs-chatbot-header's WithComposer story wires bsExpand.
114
+ const onMenuOpen = (ev) => {
115
+ ev.target.menuOpen = ev.detail;
116
+ };
117
+ return html `
118
+ <div style="max-width: 480px; font-family: sans-serif;">
119
+ <bs-chatbot-response-action sources-count="3" @bsMenuOpen=${onMenuOpen}>
120
+ <bs-menu slot="menu" style="width: 210px;">
121
+ <bs-menu-item>${ReadAloudIcon()}Read aloud</bs-menu-item>
122
+ <bs-menu-item>${ChatWithHumanIcon()}Chat with a human</bs-menu-item>
123
+ <bs-menu-item>${RaiseTicketIcon()}Raise a ticket</bs-menu-item>
124
+ </bs-menu>
125
+ </bs-chatbot-response-action>
126
+ </div>
127
+ `;
128
+ },
129
+ };
@@ -36,10 +36,10 @@ export class BsInput {
36
36
  this.bsChange.emit(value);
37
37
  };
38
38
  render() {
39
- return (h("div", { key: 'd6b382224eba07a1d6cf3de0707cd9e8afe3790f', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
39
+ return (h("div", { key: 'df12d3d7af1bdc0e0e536e6c635ee406e4043b4f', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
40
40
  // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
41
41
  // to this instance's own shadow root, so it can never collide with another bs-input.
42
- h("label", { key: '72b14f0557fb0cd3648daf6839b2ae3f1e9547f0', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label)), h("input", { key: '8ff7c5281c853fa9567f997b506dd722ddd866b5', id: "control", part: "control", class: "bs-input__control", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
42
+ h("label", { key: '2e4f867d17ab691a1df1b0b5b2964c0e1e986a91', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label)), h("input", { key: 'a078574a5ffad9eafea791cf5866ac123c4d5f56', id: "control", part: "control", class: "bs-input__control", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
43
43
  }
44
44
  static get is() { return "bs-input"; }
45
45
  static get encapsulation() { return "shadow"; }
@@ -0,0 +1,18 @@
1
+ import { render, h, describe, it, expect } from "@stencil/vitest";
2
+ describe('bs-menu', () => {
3
+ it('renders with role="menu" on the host', async () => {
4
+ const { root } = await render(h("bs-menu", null));
5
+ expect(root.shadowRoot.querySelector('[part="list"]').getAttribute('role')).toBe('menu');
6
+ });
7
+ it('exposes the list part', async () => {
8
+ const { root } = await render(h("bs-menu", null));
9
+ expect(root.shadowRoot.querySelector('[part="list"]')).not.toBeNull();
10
+ });
11
+ it('renders slotted content in the default slot', async () => {
12
+ const { root } = await render(h("bs-menu", null, h("bs-menu-item", null, "Item one")));
13
+ expect(root).toHaveTextContent('Item one');
14
+ const slot = root.shadowRoot.querySelector('[part="list"] slot:not([name])');
15
+ expect(slot).not.toBeNull();
16
+ expect(slot.assignedElements()).toHaveLength(1);
17
+ });
18
+ });
@@ -0,0 +1,20 @@
1
+ :host {
2
+ display: block;
3
+ --bs-menu-bg: var(--bs-surface-raised);
4
+ --bs-menu-radius: var(--bs-border-radius-100);
5
+ --bs-menu-padding-y: var(--bs-spacing-50);
6
+ --bs-menu-gap: var(--bs-spacing-50);
7
+ --bs-menu-shadow: var(--bs-shadow-sm);
8
+ }
9
+
10
+ .bs-menu {
11
+ box-sizing: border-box;
12
+ display: flex;
13
+ flex-direction: column;
14
+ gap: var(--bs-menu-gap);
15
+ background: var(--bs-menu-bg);
16
+ border-radius: var(--bs-menu-radius);
17
+ padding: var(--bs-menu-padding-y) 0;
18
+ box-shadow: var(--bs-menu-shadow);
19
+ font-family: inherit;
20
+ }
@@ -0,0 +1,39 @@
1
+ import { h } from "@stencil/core";
2
+ /**
3
+ * A generic dropdown/popup menu container: a rounded, elevated list of items (typically
4
+ * `bs-menu-item` elements).
5
+ *
6
+ * ## When to use
7
+ * - A popup list of actions/options triggered by another control (e.g. a "more options" kebab
8
+ * button), such as `bs-chatbot-response-action`'s `menu` slot.
9
+ *
10
+ * ## When not to use
11
+ * - A persistent, always-visible list of options -- this component is purpose-built as a popup
12
+ * surface (rounded corners, elevation shadow), not a plain list.
13
+ *
14
+ * @slot - Default slot: the menu's items (typically `bs-menu-item` elements, though anything can
15
+ * be slotted in -- this component doesn't restrict slot content via JS).
16
+ * @part list - The rounded, elevated box wrapping the slotted items.
17
+ * @prop --bs-menu-bg - Background of the menu box. Aliased to `--bs-surface-raised`.
18
+ * @prop --bs-menu-radius - Corner radius of the menu box. Aliased to `--bs-border-radius-100`.
19
+ * @prop --bs-menu-padding-y - Top/bottom padding of the menu box. Aliased to `--bs-spacing-50`.
20
+ * @prop --bs-menu-gap - Gap between slotted items. Aliased to `--bs-spacing-50`.
21
+ * @prop --bs-menu-shadow - Elevation shadow of the menu box. Aliased to `--bs-shadow-sm`.
22
+ */
23
+ export class BsMenu {
24
+ render() {
25
+ return (h("div", { key: 'd4eee73bfffd1fcfd8f057e394a53fea4688748b', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '866189bfabc2798ce37b8f0f6141143d4c49081e' })));
26
+ }
27
+ static get is() { return "bs-menu"; }
28
+ static get encapsulation() { return "shadow"; }
29
+ static get originalStyleUrls() {
30
+ return {
31
+ "$": ["bs-menu.css"]
32
+ };
33
+ }
34
+ static get styleUrls() {
35
+ return {
36
+ "$": ["bs-menu.css"]
37
+ };
38
+ }
39
+ }
@@ -0,0 +1,15 @@
1
+ import { html } from "lit";
2
+ import { componentDescription } from "../../stories-utils";
3
+ const meta = {
4
+ title: 'Components/bs-menu',
5
+ parameters: { docs: { description: { component: componentDescription('bs-menu') } } },
6
+ render: () => html `
7
+ <bs-menu style="width: 210px;">
8
+ <bs-menu-item>Read aloud</bs-menu-item>
9
+ <bs-menu-item>Chat with a human</bs-menu-item>
10
+ <bs-menu-item>Raise a ticket</bs-menu-item>
11
+ </bs-menu>
12
+ `,
13
+ };
14
+ export default meta;
15
+ export const Default = {};
@@ -0,0 +1,33 @@
1
+ import { render, h, describe, it, expect } from "@stencil/vitest";
2
+ describe('bs-menu-item', () => {
3
+ it('renders a button with role="menuitem" and part="item"', async () => {
4
+ const { root } = await render(h("bs-menu-item", null, "Read aloud"));
5
+ const button = root.shadowRoot.querySelector('[part="item"]');
6
+ expect(button).not.toBeNull();
7
+ expect(button.tagName).toBe('BUTTON');
8
+ expect(button.getAttribute('role')).toBe('menuitem');
9
+ expect(button.getAttribute('type')).toBe('button');
10
+ });
11
+ it('renders the label slot content', async () => {
12
+ const { root } = await render(h("bs-menu-item", null, "Read aloud"));
13
+ expect(root).toHaveTextContent('Read aloud');
14
+ });
15
+ it('does not reserve icon space when no icon is slotted', async () => {
16
+ const { root } = await render(h("bs-menu-item", null, "Read aloud"));
17
+ const icon = root.shadowRoot.querySelector('[part="icon"]');
18
+ expect(icon).not.toBeNull();
19
+ expect(icon).not.toHaveClass('bs-menu-item__icon--has-content');
20
+ expect(getComputedStyle(icon).display).toBe('none');
21
+ });
22
+ it('shows the icon wrapper when an icon is slotted', async () => {
23
+ const { root } = await render(h("bs-menu-item", null, h("span", { slot: "icon" }, "ICON"), "Read aloud"));
24
+ const icon = root.shadowRoot.querySelector('[part="icon"]');
25
+ expect(icon).toHaveClass('bs-menu-item__icon--has-content');
26
+ });
27
+ it('emits bsSelect when clicked', async () => {
28
+ const { root, spyOnEvent } = await render(h("bs-menu-item", null, "Read aloud"));
29
+ const selectSpy = spyOnEvent('bsSelect');
30
+ root.shadowRoot.querySelector('[part="item"]').click();
31
+ expect(selectSpy).toHaveReceivedEventTimes(1);
32
+ });
33
+ });
@@ -0,0 +1,68 @@
1
+ :host {
2
+ display: block;
3
+ --bs-menu-item-radius: var(--bs-border-radius-100);
4
+ --bs-menu-item-padding-y: var(--bs-spacing-100);
5
+ --bs-menu-item-padding-x: var(--bs-spacing-150);
6
+ --bs-menu-item-gap: var(--bs-spacing-100);
7
+ --bs-menu-item-hover: var(--bs-color-neutral-container);
8
+ --bs-menu-item-pressed: var(--bs-color-neutral-container-pressed);
9
+ --bs-menu-item-icon-color: var(--bs-icon-default);
10
+ --bs-menu-item-color: var(--bs-text-muted);
11
+ --bs-menu-item-font-size: var(--bs-font-size-md);
12
+ --bs-menu-item-line-height: var(--bs-line-height-body-md);
13
+ }
14
+
15
+ .bs-menu-item {
16
+ box-sizing: border-box;
17
+ display: flex;
18
+ align-items: center;
19
+ width: 100%;
20
+ height: 48px;
21
+ border: none;
22
+ cursor: pointer;
23
+ background: transparent;
24
+ color: var(--bs-menu-item-color);
25
+ font-family: inherit;
26
+ border-radius: var(--bs-menu-item-radius);
27
+ padding: var(--bs-menu-item-padding-y) var(--bs-menu-item-padding-x);
28
+ gap: var(--bs-menu-item-gap);
29
+ transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
30
+ }
31
+
32
+ .bs-menu-item:focus-visible {
33
+ outline: 2px solid var(--bs-border-neutral-focus);
34
+ outline-offset: 2px;
35
+ }
36
+
37
+ .bs-menu-item:hover {
38
+ background: var(--bs-menu-item-hover);
39
+ }
40
+
41
+ .bs-menu-item:active {
42
+ background: var(--bs-menu-item-pressed);
43
+ }
44
+
45
+ .bs-menu-item__icon {
46
+ display: none;
47
+ width: 24px;
48
+ height: 24px;
49
+ flex-shrink: 0;
50
+ color: var(--bs-menu-item-icon-color);
51
+ }
52
+
53
+ .bs-menu-item__icon--has-content {
54
+ display: inline-flex;
55
+ align-items: center;
56
+ justify-content: center;
57
+ }
58
+
59
+ .bs-menu-item__icon ::slotted(svg) {
60
+ width: 24px;
61
+ height: 24px;
62
+ }
63
+
64
+ .bs-menu-item__label {
65
+ font-size: var(--bs-menu-item-font-size);
66
+ line-height: calc(var(--bs-menu-item-line-height) * 1px);
67
+ white-space: nowrap;
68
+ }
@@ -0,0 +1,79 @@
1
+ import { h } from "@stencil/core";
2
+ /**
3
+ * A single selectable row inside a `bs-menu`: an optional icon plus a text label, rendered as a
4
+ * real `<button>` for correct keyboard/click semantics.
5
+ *
6
+ * ## When to use
7
+ * - As a child of `bs-menu`, one per selectable action/option.
8
+ *
9
+ * ## When not to use
10
+ * - Outside of `bs-menu` -- this component's sizing/hover treatment is designed to sit inside the
11
+ * menu's rounded, padded list box.
12
+ *
13
+ * @slot icon - Optional leading icon (24x24). When left empty, no icon space is reserved.
14
+ * @slot - Default slot: the item's text label.
15
+ * @part item - The button element.
16
+ * @part icon - The icon wrapper.
17
+ * @part label - The label wrapper.
18
+ * @prop --bs-menu-item-radius - Corner radius of the row. Aliased to `--bs-border-radius-100`.
19
+ * @prop --bs-menu-item-padding-y - Top/bottom padding. Aliased to `--bs-spacing-100`.
20
+ * @prop --bs-menu-item-padding-x - Left/right padding. Aliased to `--bs-spacing-150`.
21
+ * @prop --bs-menu-item-gap - Gap between icon and label. Aliased to `--bs-spacing-100`.
22
+ * @prop --bs-menu-item-hover - Background on hover. Aliased to `--bs-color-neutral-container`.
23
+ * @prop --bs-menu-item-pressed - Background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
24
+ * @prop --bs-menu-item-icon-color - Icon color. Aliased to `--bs-icon-default`.
25
+ * @prop --bs-menu-item-color - Label text color. Aliased to `--bs-text-muted`.
26
+ * @prop --bs-menu-item-font-size - Aliased to `--bs-font-size-md`.
27
+ * @prop --bs-menu-item-line-height - Aliased to `--bs-line-height-body-md`.
28
+ */
29
+ export class BsMenuItem {
30
+ /** Tracks whether the `icon` slot has assigned content, so the icon wrapper (and its gap) only
31
+ * renders when there's actually an icon to show. */
32
+ hasIcon = false;
33
+ /** Fires when the item is clicked. */
34
+ bsSelect;
35
+ onIconSlotchange = (ev) => {
36
+ this.hasIcon = ev.target.assignedNodes().length > 0;
37
+ };
38
+ onClick = () => {
39
+ this.bsSelect.emit();
40
+ };
41
+ render() {
42
+ return (h("button", { key: '4d0e94afadd487e2ec44c0c6b416c27eb8f1a5f4', type: "button", part: "item", role: "menuitem", class: "bs-menu-item", onClick: this.onClick }, h("span", { key: 'a436154aaddddadc3944049597a87a2b52eb61cb', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '50ad9c1b78bc8ea55219ad7692d7ef7fa7e48189', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'b3d1ee83556f10de5ad08d6f212ebfd9531dd54e', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '5fe02e9b2407c4fd9eaf699caec9ecc9c0e25575' }))));
43
+ }
44
+ static get is() { return "bs-menu-item"; }
45
+ static get encapsulation() { return "shadow"; }
46
+ static get originalStyleUrls() {
47
+ return {
48
+ "$": ["bs-menu-item.css"]
49
+ };
50
+ }
51
+ static get styleUrls() {
52
+ return {
53
+ "$": ["bs-menu-item.css"]
54
+ };
55
+ }
56
+ static get states() {
57
+ return {
58
+ "hasIcon": {}
59
+ };
60
+ }
61
+ static get events() {
62
+ return [{
63
+ "method": "bsSelect",
64
+ "name": "bsSelect",
65
+ "bubbles": true,
66
+ "cancelable": true,
67
+ "composed": true,
68
+ "docs": {
69
+ "tags": [],
70
+ "text": "Fires when the item is clicked."
71
+ },
72
+ "complexType": {
73
+ "original": "void",
74
+ "resolved": "void",
75
+ "references": {}
76
+ }
77
+ }];
78
+ }
79
+ }
@@ -0,0 +1,37 @@
1
+ import { html } from "lit";
2
+ import { componentDescription } from "../../stories-utils";
3
+ const meta = {
4
+ title: 'Components/bs-menu-item',
5
+ parameters: { docs: { description: { component: componentDescription('bs-menu-item') } } },
6
+ render: () => html ` <bs-menu-item style="width: 210px;">Read aloud</bs-menu-item> `,
7
+ };
8
+ export default meta;
9
+ export const Default = {};
10
+ export const WithIcon = {
11
+ name: 'With an icon',
12
+ render: () => html `
13
+ <bs-menu-item style="width: 210px;">
14
+ <svg slot="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
15
+ <path
16
+ d="M7.5 15.75H3C2.80109 15.75 2.61032 15.671 2.46967 15.5303C2.32902 15.3897 2.25 15.1989 2.25 15V9C2.25 8.80109 2.32902 8.61032 2.46967 8.46967C2.61032 8.32902 2.80109 8.25 3 8.25H7.5L14.25 3V21L7.5 15.75Z"
17
+ stroke="currentColor"
18
+ stroke-width="2"
19
+ stroke-linecap="round"
20
+ stroke-linejoin="round"
21
+ />
22
+ <path d="M7.5 8.25V15.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
23
+ </svg>
24
+ Read aloud
25
+ </bs-menu-item>
26
+ `,
27
+ };
28
+ export const InAMenu = {
29
+ name: 'In a bs-menu',
30
+ render: () => html `
31
+ <bs-menu style="width: 210px;">
32
+ <bs-menu-item>Read aloud</bs-menu-item>
33
+ <bs-menu-item>Chat with a human</bs-menu-item>
34
+ <bs-menu-item>Raise a ticket</bs-menu-item>
35
+ </bs-menu>
36
+ `,
37
+ };
@@ -1 +1 @@
1
- import{t as e,p as a,H as r,h as b}from"./p-Cu4gTknX.js";const s=a(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}variant="default";render(){return b("span",{key:"9cc06bddba11f57edf97209456e25141a3b80bea",part:"container",class:"bs-badge bs-badge--"+this.variant},b("slot",{key:"7c0e4054e99a3dedc94f2a7250075fcb76c115b6"}))}static get style(){return":host{display:inline-block}.bs-badge{display:inline-flex;align-items:center;height:var(--bs-spacing-400);padding:0 var(--bs-spacing-200);border-radius:var(--bs-border-radius-full);font-size:var(--bs-font-size-xs);font-weight:var(--bs-font-weight-medium);font-family:inherit;white-space:nowrap}.bs-badge--default{background:var(--bs-badge-bg-default);color:var(--bs-badge-text-default)}.bs-badge--primary{background:var(--bs-badge-bg-primary-container);color:var(--bs-badge-text-primary)}.bs-badge--success{background:var(--bs-badge-bg-success-container);color:var(--bs-badge-text-success)}.bs-badge--warning{background:var(--bs-badge-bg-warning-container);color:var(--bs-badge-text-warning)}.bs-badge--info{background:var(--bs-badge-bg-info-container);color:var(--bs-badge-text-info)}.bs-badge--error{background:var(--bs-badge-bg-error-container);color:var(--bs-badge-text-error)}.bs-badge--neutral{background:var(--bs-badge-bg-neutral-container);color:var(--bs-badge-text-neutral)}.bs-badge--inverse{background:var(--bs-badge-bg-inverse);color:var(--bs-badge-text-inverse)}"}},[769,"bs-badge",{variant:[1]}]);function t(){"undefined"!=typeof customElements&&["bs-badge"].forEach((a=>{"bs-badge"===a&&(customElements.get(e(a))||customElements.define(e(a),s))}))}t();const n=s,d=t;export{n as BsBadge,d as defineCustomElement}
1
+ import{t as e,p as a,H as r,h as b}from"./p-BpvhHQSw.js";const s=a(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}variant="default";render(){return b("span",{key:"9cc06bddba11f57edf97209456e25141a3b80bea",part:"container",class:"bs-badge bs-badge--"+this.variant},b("slot",{key:"7c0e4054e99a3dedc94f2a7250075fcb76c115b6"}))}static get style(){return":host{display:inline-block}.bs-badge{display:inline-flex;align-items:center;height:var(--bs-spacing-400);padding:0 var(--bs-spacing-200);border-radius:var(--bs-border-radius-full);font-size:var(--bs-font-size-xs);font-weight:var(--bs-font-weight-medium);font-family:inherit;white-space:nowrap}.bs-badge--default{background:var(--bs-badge-bg-default);color:var(--bs-badge-text-default)}.bs-badge--primary{background:var(--bs-badge-bg-primary-container);color:var(--bs-badge-text-primary)}.bs-badge--success{background:var(--bs-badge-bg-success-container);color:var(--bs-badge-text-success)}.bs-badge--warning{background:var(--bs-badge-bg-warning-container);color:var(--bs-badge-text-warning)}.bs-badge--info{background:var(--bs-badge-bg-info-container);color:var(--bs-badge-text-info)}.bs-badge--error{background:var(--bs-badge-bg-error-container);color:var(--bs-badge-text-error)}.bs-badge--neutral{background:var(--bs-badge-bg-neutral-container);color:var(--bs-badge-text-neutral)}.bs-badge--inverse{background:var(--bs-badge-bg-inverse);color:var(--bs-badge-text-inverse)}"}},[769,"bs-badge",{variant:[1]}]);function t(){"undefined"!=typeof customElements&&["bs-badge"].forEach((a=>{"bs-badge"===a&&(customElements.get(e(a))||customElements.define(e(a),s))}))}t();const n=s,d=t;export{n as BsBadge,d as defineCustomElement}
@@ -1 +1 @@
1
- import{t,p as e,H as s,h as n}from"./p-Cu4gTknX.js";const o=e(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}size="md";render(){return n("span",{key:"5b51879877adc5abbe6f28d79f27a1f33654a1a4",part:"container",class:"bs-button-skeleton bs-button-skeleton--"+this.size,role:"status","aria-label":"Loading"})}static get style(){return":host{display:inline-block;--bs-button-skeleton-height-sm:var(--bs-spacing-500);--bs-button-skeleton-height-md:var(--bs-spacing-600);--bs-button-skeleton-height-lg:var(--bs-spacing-700);--bs-button-skeleton-width:96px}.bs-button-skeleton{display:inline-block;border-radius:var(--bs-border-radius-100);width:var(--bs-button-skeleton-width);background:var(--bs-color-neutral-container);animation:bs-button-skeleton-pulse 1.5s ease-in-out infinite}.bs-button-skeleton--sm{height:var(--bs-button-skeleton-height-sm)}.bs-button-skeleton--md{height:var(--bs-button-skeleton-height-md)}.bs-button-skeleton--lg{height:var(--bs-button-skeleton-height-lg)}@keyframes bs-button-skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@media (prefers-reduced-motion: reduce){.bs-button-skeleton{animation:none}}"}},[513,"bs-button-skeleton",{size:[1]}]);function b(){"undefined"!=typeof customElements&&["bs-button-skeleton"].forEach((e=>{"bs-button-skeleton"===e&&(customElements.get(t(e))||customElements.define(t(e),o))}))}b();const i=o,a=b;export{i as BsButtonSkeleton,a as defineCustomElement}
1
+ import{t,p as e,H as s,h as n}from"./p-BpvhHQSw.js";const o=e(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}size="md";render(){return n("span",{key:"5b51879877adc5abbe6f28d79f27a1f33654a1a4",part:"container",class:"bs-button-skeleton bs-button-skeleton--"+this.size,role:"status","aria-label":"Loading"})}static get style(){return":host{display:inline-block;--bs-button-skeleton-height-sm:var(--bs-spacing-500);--bs-button-skeleton-height-md:var(--bs-spacing-600);--bs-button-skeleton-height-lg:var(--bs-spacing-700);--bs-button-skeleton-width:96px}.bs-button-skeleton{display:inline-block;border-radius:var(--bs-border-radius-100);width:var(--bs-button-skeleton-width);background:var(--bs-color-neutral-container);animation:bs-button-skeleton-pulse 1.5s ease-in-out infinite}.bs-button-skeleton--sm{height:var(--bs-button-skeleton-height-sm)}.bs-button-skeleton--md{height:var(--bs-button-skeleton-height-md)}.bs-button-skeleton--lg{height:var(--bs-button-skeleton-height-lg)}@keyframes bs-button-skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@media (prefers-reduced-motion: reduce){.bs-button-skeleton{animation:none}}"}},[513,"bs-button-skeleton",{size:[1]}]);function b(){"undefined"!=typeof customElements&&["bs-button-skeleton"].forEach((e=>{"bs-button-skeleton"===e&&(customElements.get(t(e))||customElements.define(t(e),o))}))}b();const i=o,a=b;export{i as BsButtonSkeleton,a as defineCustomElement}
@@ -1 +1 @@
1
- import{t,p as o,H as s,h as b}from"./p-Cu4gTknX.js";const r=o(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}get el(){return this}variant="primary";size="md";disabled=!1;type="button";ariaLabel=null;hasIcon=!1;hasEndIcon=!1;hasLabel=!1;componentWillLoad(){this.hasIcon=this.hasSlottedContent("icon"),this.hasEndIcon=this.hasSlottedContent("end-icon"),this.hasLabel=this.hasSlottedContent(null)}hasSlottedContent(t){return Array.from(this.el.childNodes).some((o=>o.nodeType===Node.ELEMENT_NODE?o.getAttribute("slot")===t:null===t))}onIconSlotchange=t=>{this.hasIcon=t.target.assignedNodes().length>0};onEndIconSlotchange=t=>{this.hasEndIcon=t.target.assignedNodes().length>0};onLabelSlotchange=t=>{this.hasLabel=t.target.assignedNodes().length>0};render(){return b("button",{key:"eae5915f036d18b43b9b1ff94272fe27aa119d0e",class:`bs-button bs-button--${this.variant} bs-button--${this.size} ${!this.hasIcon&&!this.hasEndIcon||this.hasLabel?"":"bs-button--icon-only"}`,type:this.type,disabled:this.disabled,"aria-label":this.ariaLabel},b("span",{key:"ee58ccc6f8390663e67a7d7a03fe6113782805e7",part:"icon",class:"bs-button__icon "+(this.hasIcon?"bs-button__icon--visible":"")},b("slot",{key:"526ec7b4fd274bbdb6dc1edb38c33917c26337ee",name:"icon",onSlotchange:this.onIconSlotchange})),b("span",{key:"3e0121dc4dc975b449b03e5ac5f55d1f6001e806",part:"label",class:"bs-button__label"},b("slot",{key:"4ab00b8b91f0513af74faac4ae7b39f9a975dde5",onSlotchange:this.onLabelSlotchange})),b("span",{key:"3f64f1122c5ed1da1bb9cb869490395f1e11b3fb",part:"end-icon",class:"bs-button__end-icon "+(this.hasEndIcon?"bs-button__end-icon--visible":"")},b("slot",{key:"ca79d7ed3cd80c6abc3f17c4f9d215ed69c13059",name:"end-icon",onSlotchange:this.onEndIconSlotchange})))}static get delegatesFocus(){return!0}static get style(){return":host{display:inline-block;--bs-button-height-sm:var(--bs-spacing-500);--bs-button-height-md:var(--bs-spacing-600);--bs-button-height-lg:var(--bs-spacing-700);--bs-button-radius:var(--bs-border-radius-100);--bs-button-error-default:var(--bs-color-error-default);--bs-button-error-hover:var(--bs-color-error-hover);--bs-button-error-focus:var(--bs-border-error-focus);--bs-button-error-pressed:var(--bs-color-error-pressed);--bs-button-error-disabled:var(--bs-surface-action-disabled);--bs-button-success-default:var(--bs-color-success-default);--bs-button-success-hover:var(--bs-color-success-hover);--bs-button-success-focus:var(--bs-border-success-focus);--bs-button-success-pressed:var(--bs-color-success-pressed);--bs-button-success-disabled:var(--bs-surface-action-disabled);--bs-button-warning-default:var(--bs-color-warning-default);--bs-button-warning-hover:var(--bs-color-warning-hover);--bs-button-warning-focus:var(--bs-border-warning-focus);--bs-button-warning-pressed:var(--bs-color-warning-pressed);--bs-button-warning-disabled:var(--bs-surface-action-disabled);--bs-button-info-default:var(--bs-color-info-default);--bs-button-info-hover:var(--bs-color-info-hover);--bs-button-info-focus:var(--bs-border-info-focus);--bs-button-info-pressed:var(--bs-color-info-pressed);--bs-button-info-disabled:var(--bs-surface-action-disabled);--bs-button-subtle-hover:var(--bs-color-neutral-container);--bs-button-subtle-pressed:var(--bs-color-neutral-container-pressed);--bs-button-subtle-focus:var(--bs-border-primary-focus);--bs-button-outlined-border:var(--bs-border-primary);--bs-button-outlined-border-hover:var(--bs-border-primary-hover);--bs-button-outlined-focus:var(--bs-border-primary-focus);--bs-button-outlined-container:var(--bs-color-primary-container)}.bs-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;border-radius:var(--bs-button-radius);font-family:inherit;font-weight:var(--bs-font-weight-semibold);cursor:pointer;transition:background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease)}.bs-button:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-button:disabled{cursor:not-allowed}.bs-button--sm{height:var(--bs-button-height-sm);padding:0 var(--bs-spacing-300);font-size:var(--bs-font-size-sm)}.bs-button--md{height:var(--bs-button-height-md);padding:0 var(--bs-spacing-400);font-size:var(--bs-font-size-md)}.bs-button--lg{height:var(--bs-button-height-lg);padding:0 var(--bs-spacing-500);font-size:var(--bs-font-size-lg)}.bs-button--primary{background:var(--bs-button-primary-default);color:var(--bs-text-on-action)}.bs-button--primary:hover:not(:disabled){background:var(--bs-button-primary-hover)}.bs-button--primary:active:not(:disabled){background:var(--bs-button-primary-pressed)}.bs-button--primary:disabled{background:var(--bs-button-primary-disabled);color:var(--bs-text-on-disabled)}.bs-button--neutral{background:var(--bs-button-neutral-container);color:var(--bs-text-default)}.bs-button--neutral:hover:not(:disabled){background:var(--bs-button-neutral-hover)}.bs-button--neutral:active:not(:disabled){background:var(--bs-button-neutral-pressed)}.bs-button--neutral:disabled{background:var(--bs-button-neutral-disabled);color:var(--bs-text-on-disabled)}.bs-button--error{background:var(--bs-button-error-default);color:var(--bs-text-on-action)}.bs-button--error:hover:not(:disabled){background:var(--bs-button-error-hover)}.bs-button--error:active:not(:disabled){background:var(--bs-button-error-pressed)}.bs-button--error:disabled{background:var(--bs-button-error-disabled);color:var(--bs-text-on-disabled)}.bs-button--error:focus-visible{outline-color:var(--bs-button-error-focus)}.bs-button--success{background:var(--bs-button-success-default);color:var(--bs-text-on-action)}.bs-button--success:hover:not(:disabled){background:var(--bs-button-success-hover)}.bs-button--success:active:not(:disabled){background:var(--bs-button-success-pressed)}.bs-button--success:disabled{background:var(--bs-button-success-disabled);color:var(--bs-text-on-disabled)}.bs-button--success:focus-visible{outline-color:var(--bs-button-success-focus)}.bs-button--warning{background:var(--bs-button-warning-default);color:var(--bs-text-default)}.bs-button--warning:hover:not(:disabled){background:var(--bs-button-warning-hover)}.bs-button--warning:active:not(:disabled){background:var(--bs-button-warning-pressed)}.bs-button--warning:disabled{background:var(--bs-button-warning-disabled);color:var(--bs-text-on-disabled)}.bs-button--warning:focus-visible{outline-color:var(--bs-button-warning-focus)}.bs-button--info{background:var(--bs-button-info-default);color:var(--bs-text-on-action)}.bs-button--info:hover:not(:disabled){background:var(--bs-button-info-hover)}.bs-button--info:active:not(:disabled){background:var(--bs-button-info-pressed)}.bs-button--info:disabled{background:var(--bs-button-info-disabled);color:var(--bs-text-on-disabled)}.bs-button--info:focus-visible{outline-color:var(--bs-button-info-focus)}.bs-button--subtle{background:transparent;color:var(--bs-color-neutral-default)}.bs-button--subtle:hover:not(:disabled){background:var(--bs-button-subtle-hover)}.bs-button--subtle:active:not(:disabled){background:var(--bs-button-subtle-pressed)}.bs-button--subtle:disabled{background:transparent;color:var(--bs-text-on-disabled)}.bs-button--subtle:focus-visible{outline-color:var(--bs-button-subtle-focus);background:var(--bs-button-subtle-hover)}.bs-button--outlined{background:transparent;color:var(--bs-color-primary-default);border:1.5px solid var(--bs-button-outlined-border)}.bs-button--outlined:hover:not(:disabled){background:var(--bs-button-outlined-container);border-color:var(--bs-button-outlined-border-hover)}.bs-button--outlined:active:not(:disabled){background:var(--bs-button-outlined-container);color:var(--bs-color-primary-pressed);border-color:var(--bs-button-outlined-border-hover)}.bs-button--outlined:disabled{opacity:var(--bs-opacity-disabled);cursor:not-allowed}.bs-button--outlined:focus-visible{outline-color:var(--bs-button-outlined-focus)}.bs-button__icon--visible{margin-right:var(--bs-spacing-100)}.bs-button__end-icon--visible{margin-left:var(--bs-spacing-100)}.bs-button__icon ::slotted(*),.bs-button__end-icon ::slotted(*){display:block;width:1em;height:1em}.bs-button--icon-only{padding:0;aspect-ratio:1 / 1}.bs-button--icon-only .bs-button__icon--visible{margin-right:0}.bs-button--icon-only .bs-button__end-icon--visible{margin-left:0}"}},[785,"bs-button",{variant:[1],size:[1],disabled:[4],type:[1],ariaLabel:[1,"aria-label"],hasIcon:[32],hasEndIcon:[32],hasLabel:[32]}]);function n(){"undefined"!=typeof customElements&&["bs-button"].forEach((o=>{"bs-button"===o&&(customElements.get(t(o))||customElements.define(t(o),r))}))}n();const e=r,a=n;export{e as BsButton,a as defineCustomElement}
1
+ import{t,p as o,H as s,h as b}from"./p-BpvhHQSw.js";const r=o(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}get el(){return this}variant="primary";size="md";disabled=!1;type="button";ariaLabel=null;hasIcon=!1;hasEndIcon=!1;hasLabel=!1;componentWillLoad(){this.hasIcon=this.hasSlottedContent("icon"),this.hasEndIcon=this.hasSlottedContent("end-icon"),this.hasLabel=this.hasSlottedContent(null)}hasSlottedContent(t){return Array.from(this.el.childNodes).some((o=>o.nodeType===Node.ELEMENT_NODE?o.getAttribute("slot")===t:null===t))}onIconSlotchange=t=>{this.hasIcon=t.target.assignedNodes().length>0};onEndIconSlotchange=t=>{this.hasEndIcon=t.target.assignedNodes().length>0};onLabelSlotchange=t=>{this.hasLabel=t.target.assignedNodes().length>0};render(){return b("button",{key:"eae5915f036d18b43b9b1ff94272fe27aa119d0e",class:`bs-button bs-button--${this.variant} bs-button--${this.size} ${!this.hasIcon&&!this.hasEndIcon||this.hasLabel?"":"bs-button--icon-only"}`,type:this.type,disabled:this.disabled,"aria-label":this.ariaLabel},b("span",{key:"ee58ccc6f8390663e67a7d7a03fe6113782805e7",part:"icon",class:"bs-button__icon "+(this.hasIcon?"bs-button__icon--visible":"")},b("slot",{key:"526ec7b4fd274bbdb6dc1edb38c33917c26337ee",name:"icon",onSlotchange:this.onIconSlotchange})),b("span",{key:"3e0121dc4dc975b449b03e5ac5f55d1f6001e806",part:"label",class:"bs-button__label"},b("slot",{key:"4ab00b8b91f0513af74faac4ae7b39f9a975dde5",onSlotchange:this.onLabelSlotchange})),b("span",{key:"3f64f1122c5ed1da1bb9cb869490395f1e11b3fb",part:"end-icon",class:"bs-button__end-icon "+(this.hasEndIcon?"bs-button__end-icon--visible":"")},b("slot",{key:"ca79d7ed3cd80c6abc3f17c4f9d215ed69c13059",name:"end-icon",onSlotchange:this.onEndIconSlotchange})))}static get delegatesFocus(){return!0}static get style(){return":host{display:inline-block;--bs-button-height-sm:var(--bs-spacing-500);--bs-button-height-md:var(--bs-spacing-600);--bs-button-height-lg:var(--bs-spacing-700);--bs-button-radius:var(--bs-border-radius-100);--bs-button-error-default:var(--bs-color-error-default);--bs-button-error-hover:var(--bs-color-error-hover);--bs-button-error-focus:var(--bs-border-error-focus);--bs-button-error-pressed:var(--bs-color-error-pressed);--bs-button-error-disabled:var(--bs-surface-action-disabled);--bs-button-success-default:var(--bs-color-success-default);--bs-button-success-hover:var(--bs-color-success-hover);--bs-button-success-focus:var(--bs-border-success-focus);--bs-button-success-pressed:var(--bs-color-success-pressed);--bs-button-success-disabled:var(--bs-surface-action-disabled);--bs-button-warning-default:var(--bs-color-warning-default);--bs-button-warning-hover:var(--bs-color-warning-hover);--bs-button-warning-focus:var(--bs-border-warning-focus);--bs-button-warning-pressed:var(--bs-color-warning-pressed);--bs-button-warning-disabled:var(--bs-surface-action-disabled);--bs-button-info-default:var(--bs-color-info-default);--bs-button-info-hover:var(--bs-color-info-hover);--bs-button-info-focus:var(--bs-border-info-focus);--bs-button-info-pressed:var(--bs-color-info-pressed);--bs-button-info-disabled:var(--bs-surface-action-disabled);--bs-button-subtle-hover:var(--bs-color-neutral-container);--bs-button-subtle-pressed:var(--bs-color-neutral-container-pressed);--bs-button-subtle-focus:var(--bs-border-primary-focus);--bs-button-outlined-border:var(--bs-border-primary);--bs-button-outlined-border-hover:var(--bs-border-primary-hover);--bs-button-outlined-focus:var(--bs-border-primary-focus);--bs-button-outlined-container:var(--bs-color-primary-container)}.bs-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;border-radius:var(--bs-button-radius);font-family:inherit;font-weight:var(--bs-font-weight-semibold);cursor:pointer;transition:background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease)}.bs-button:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-button:disabled{cursor:not-allowed}.bs-button--sm{height:var(--bs-button-height-sm);padding:0 var(--bs-spacing-300);font-size:var(--bs-font-size-sm)}.bs-button--md{height:var(--bs-button-height-md);padding:0 var(--bs-spacing-400);font-size:var(--bs-font-size-md)}.bs-button--lg{height:var(--bs-button-height-lg);padding:0 var(--bs-spacing-500);font-size:var(--bs-font-size-lg)}.bs-button--primary{background:var(--bs-button-primary-default);color:var(--bs-text-on-action)}.bs-button--primary:hover:not(:disabled){background:var(--bs-button-primary-hover)}.bs-button--primary:active:not(:disabled){background:var(--bs-button-primary-pressed)}.bs-button--primary:disabled{background:var(--bs-button-primary-disabled);color:var(--bs-text-on-disabled)}.bs-button--neutral{background:var(--bs-button-neutral-container);color:var(--bs-text-default)}.bs-button--neutral:hover:not(:disabled){background:var(--bs-button-neutral-hover)}.bs-button--neutral:active:not(:disabled){background:var(--bs-button-neutral-pressed)}.bs-button--neutral:disabled{background:var(--bs-button-neutral-disabled);color:var(--bs-text-on-disabled)}.bs-button--error{background:var(--bs-button-error-default);color:var(--bs-text-on-action)}.bs-button--error:hover:not(:disabled){background:var(--bs-button-error-hover)}.bs-button--error:active:not(:disabled){background:var(--bs-button-error-pressed)}.bs-button--error:disabled{background:var(--bs-button-error-disabled);color:var(--bs-text-on-disabled)}.bs-button--error:focus-visible{outline-color:var(--bs-button-error-focus)}.bs-button--success{background:var(--bs-button-success-default);color:var(--bs-text-on-action)}.bs-button--success:hover:not(:disabled){background:var(--bs-button-success-hover)}.bs-button--success:active:not(:disabled){background:var(--bs-button-success-pressed)}.bs-button--success:disabled{background:var(--bs-button-success-disabled);color:var(--bs-text-on-disabled)}.bs-button--success:focus-visible{outline-color:var(--bs-button-success-focus)}.bs-button--warning{background:var(--bs-button-warning-default);color:var(--bs-text-default)}.bs-button--warning:hover:not(:disabled){background:var(--bs-button-warning-hover)}.bs-button--warning:active:not(:disabled){background:var(--bs-button-warning-pressed)}.bs-button--warning:disabled{background:var(--bs-button-warning-disabled);color:var(--bs-text-on-disabled)}.bs-button--warning:focus-visible{outline-color:var(--bs-button-warning-focus)}.bs-button--info{background:var(--bs-button-info-default);color:var(--bs-text-on-action)}.bs-button--info:hover:not(:disabled){background:var(--bs-button-info-hover)}.bs-button--info:active:not(:disabled){background:var(--bs-button-info-pressed)}.bs-button--info:disabled{background:var(--bs-button-info-disabled);color:var(--bs-text-on-disabled)}.bs-button--info:focus-visible{outline-color:var(--bs-button-info-focus)}.bs-button--subtle{background:transparent;color:var(--bs-color-neutral-default)}.bs-button--subtle:hover:not(:disabled){background:var(--bs-button-subtle-hover)}.bs-button--subtle:active:not(:disabled){background:var(--bs-button-subtle-pressed)}.bs-button--subtle:disabled{background:transparent;color:var(--bs-text-on-disabled)}.bs-button--subtle:focus-visible{outline-color:var(--bs-button-subtle-focus);background:var(--bs-button-subtle-hover)}.bs-button--outlined{background:transparent;color:var(--bs-color-primary-default);border:1.5px solid var(--bs-button-outlined-border)}.bs-button--outlined:hover:not(:disabled){background:var(--bs-button-outlined-container);border-color:var(--bs-button-outlined-border-hover)}.bs-button--outlined:active:not(:disabled){background:var(--bs-button-outlined-container);color:var(--bs-color-primary-pressed);border-color:var(--bs-button-outlined-border-hover)}.bs-button--outlined:disabled{opacity:var(--bs-opacity-disabled);cursor:not-allowed}.bs-button--outlined:focus-visible{outline-color:var(--bs-button-outlined-focus)}.bs-button__icon--visible{margin-right:var(--bs-spacing-100)}.bs-button__end-icon--visible{margin-left:var(--bs-spacing-100)}.bs-button__icon ::slotted(*),.bs-button__end-icon ::slotted(*){display:block;width:1em;height:1em}.bs-button--icon-only{padding:0;aspect-ratio:1 / 1}.bs-button--icon-only .bs-button__icon--visible{margin-right:0}.bs-button--icon-only .bs-button__end-icon--visible{margin-left:0}"}},[785,"bs-button",{variant:[1],size:[1],disabled:[4],type:[1],ariaLabel:[1,"aria-label"],hasIcon:[32],hasEndIcon:[32],hasLabel:[32]}]);function n(){"undefined"!=typeof customElements&&["bs-button"].forEach((o=>{"bs-button"===o&&(customElements.get(t(o))||customElements.define(t(o),r))}))}n();const e=r,a=n;export{e as BsButton,a as defineCustomElement}
@@ -1 +1 @@
1
- import{t as a,p as e,H as r,h as s}from"./p-Cu4gTknX.js";const d=e(class extends r{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow()}surface="raised";render(){return s("div",{key:"6c74e846c97f02a39ce1f2b215c87fbb9cd42055",part:"container",class:"bs-card bs-card--"+this.surface},s("div",{key:"ef89eb6ea19be13daf403b010a93e1f5a82691d4",part:"header",class:"bs-card__header"},s("slot",{key:"4627d1f598def9298e0b7d251a523892bb0b97cf",name:"header"})),s("div",{key:"a599746c11f92d2a535985abdcadbc9cc3036fdd",part:"body",class:"bs-card__body"},s("slot",{key:"f8d46c5f6aefeb870796c4efa37663e698fdd5c7"})),s("div",{key:"7f928a259fb159b6eb7d742cbfe6c1aacbef6e36",part:"footer",class:"bs-card__footer"},s("slot",{key:"fddc69aedbc10f4397bb1db62265c657ec2642ab",name:"footer"})))}static get style(){return":host{display:block}.bs-card{border:1px solid var(--bs-paper-border-surface);border-radius:var(--bs-border-radius-150);padding:var(--bs-spacing-400);font-family:inherit}.bs-card--base{background:var(--bs-paper-bg-base)}.bs-card--raised{background:var(--bs-paper-bg-raised);box-shadow:var(--bs-shadow-sm)}.bs-card--container{background:var(--bs-paper-bg-container)}.bs-card__header ::slotted(*){margin:0 0 var(--bs-spacing-300) 0}.bs-card__footer ::slotted(*){margin:var(--bs-spacing-300) 0 0 0}"}},[769,"bs-card",{surface:[1]}]);function b(){"undefined"!=typeof customElements&&["bs-card"].forEach((e=>{"bs-card"===e&&(customElements.get(a(e))||customElements.define(a(e),d))}))}b();const c=d,t=b;export{c as BsCard,t as defineCustomElement}
1
+ import{t as a,p as e,H as r,h as s}from"./p-BpvhHQSw.js";const d=e(class extends r{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow()}surface="raised";render(){return s("div",{key:"6c74e846c97f02a39ce1f2b215c87fbb9cd42055",part:"container",class:"bs-card bs-card--"+this.surface},s("div",{key:"ef89eb6ea19be13daf403b010a93e1f5a82691d4",part:"header",class:"bs-card__header"},s("slot",{key:"4627d1f598def9298e0b7d251a523892bb0b97cf",name:"header"})),s("div",{key:"a599746c11f92d2a535985abdcadbc9cc3036fdd",part:"body",class:"bs-card__body"},s("slot",{key:"f8d46c5f6aefeb870796c4efa37663e698fdd5c7"})),s("div",{key:"7f928a259fb159b6eb7d742cbfe6c1aacbef6e36",part:"footer",class:"bs-card__footer"},s("slot",{key:"fddc69aedbc10f4397bb1db62265c657ec2642ab",name:"footer"})))}static get style(){return":host{display:block}.bs-card{border:1px solid var(--bs-paper-border-surface);border-radius:var(--bs-border-radius-150);padding:var(--bs-spacing-400);font-family:inherit}.bs-card--base{background:var(--bs-paper-bg-base)}.bs-card--raised{background:var(--bs-paper-bg-raised);box-shadow:var(--bs-shadow-sm)}.bs-card--container{background:var(--bs-paper-bg-container)}.bs-card__header ::slotted(*){margin:0 0 var(--bs-spacing-300) 0}.bs-card__footer ::slotted(*){margin:var(--bs-spacing-300) 0 0 0}"}},[769,"bs-card",{surface:[1]}]);function b(){"undefined"!=typeof customElements&&["bs-card"].forEach((e=>{"bs-card"===e&&(customElements.get(a(e))||customElements.define(a(e),d))}))}b();const c=d,t=b;export{c as BsCard,t as defineCustomElement}
@@ -0,0 +1,11 @@
1
+ import type { Components, JSX } from "../types/components";
2
+
3
+ interface BsChatbotHeader extends Components.BsChatbotHeader, HTMLElement {}
4
+ export const BsChatbotHeader: {
5
+ prototype: BsChatbotHeader;
6
+ new (): BsChatbotHeader;
7
+ };
8
+ /**
9
+ * Used to define this component and all nested components recursively.
10
+ */
11
+ export const defineCustomElement: () => void;