@brandsync/wc 1.10.0 → 1.12.0

package/dist/collection/components/bs-a11y.cmp.test.js

@@ -21,6 +21,28 @@ describe('axe: form controls', () => {
 describe('axe: actions & navigation', () => {
     axeOf('bs-button', () => h("bs-button", null, "Save"));
     axeOf('bs-icon-button', () => h("bs-icon-button", { ariaLabel: "Close" }));
+    axeOf('bs-icon-tile', () => h("bs-icon-tile", { intent: "success", size: "lg" }));
+    axeOf('bs-icon-tile (labelled)', () => h("bs-icon-tile", { intent: "error", label: "Error" }));
+    axeOf('bs-qr-code', () => h("bs-qr-code", { description: "Scan to open SO-10482", url: "egsync.no/d/SO-10482", matrix: [[true, false, true], [false, true, false], [true, false, true]] }));
+    axeOf('bs-qr-code (payment, expired)', () => h("bs-qr-code", { type: "payment", state: "expired", amount: "148,00 kr" }));
+    axeOf('bs-product-tour (welcome)', () => h("bs-product-tour", { heading: "Welcome", description: "Take a quick tour." }));
+    axeOf('bs-product-tour (pointer)', () => h("bs-product-tour", { type: "pointer", heading: "Filters", description: "Narrow the list.", step: 1, total: 3, closable: true }));
+    axeOf('bs-error-page', () => h("bs-error-page", null));
+    axeOf('bs-error-page (server error)', () => h("bs-error-page", { type: "server-error", reference: "Error ID: 7f3c-21a9", headingLevel: 2 }));
+    axeOf('bs-session-timeout (warning)', () => h("bs-session-timeout", { secondsLeft: 112, savedMessage: "Your draft is saved automatically." }));
+    axeOf('bs-session-timeout (signed out)', () => h("bs-session-timeout", { type: "signed-out", accountName: "Mette Jensen", accountEmail: "mette.jensen@nordlys.no" }));
+    axeOf('bs-session-timeout (confirm identity)', () => h("bs-session-timeout", { type: "confirm-identity" }));
+    axeOf('bs-cookie-consent (banner)', () => h("bs-cookie-consent", { policyUrl: "/cookies" }));
+    axeOf('bs-cookie-consent (preferences)', () => h("bs-cookie-consent", { type: "preferences" }));
+    axeOf('bs-cookie-consent (saved)', () => h("bs-cookie-consent", { type: "saved" }));
+    axeOf('bs-onboarding-checklist (panel)', () => h("bs-onboarding-checklist", { steps: [{ id: 'a', label: 'Add details', done: true }, { id: 'b', label: 'Connect bank', description: 'Import transactions.', actionLabel: 'Connect bank', estimate: 'About 3 min' }, { id: 'c', label: 'Send invoice' }], closable: true }));
+    axeOf('bs-onboarding-checklist (dashboard)', () => h("bs-onboarding-checklist", { type: "dashboard", steps: [{ id: 'a', label: 'Add details', done: true }, { id: 'b', label: 'Connect bank' }, { id: 'c', label: 'Send invoice' }] }));
+    axeOf('bs-onboarding-checklist (launcher)', () => h("bs-onboarding-checklist", { type: "launcher", steps: [{ id: 'a', label: 'One', done: true }, { id: 'b', label: 'Two' }] }));
+    axeOf('bs-onboarding-checklist (completion)', () => h("bs-onboarding-checklist", { type: "completion", steps: [{ id: 'a', label: 'One', done: true }] }));
+    axeOf('bs-whats-new-entry', () => h("bs-whats-new-entry", { tag: "New feature", date: "24.09.2026", unread: true, heading: "Smarter reminders", description: "Sent at the best time.", actionLabel: "Try it", divider: true }));
+    axeOf('bs-whats-new (feed)', () => h("bs-whats-new", { closable: true, releaseNotesUrl: "/notes", entries: [{ id: 'a', category: 'features', tag: 'New feature', date: '24.09.2026', unread: true, heading: 'Smarter reminders', description: 'Sent at the best time.', actionLabel: 'Try it' }, { id: 'b', category: 'fixes', tag: 'Fix', tagColor: 'success', date: '11.09.2026', heading: 'SAF-T export', description: 'Credit notes are back.' }] }));
+    axeOf('bs-whats-new (announcement)', () => h("bs-whats-new", { type: "announcement", tag: "New feature", heading: "Payment reminders that pick the best time", points: ['One', 'Two'], step: 1, total: 3, closable: true }));
+    axeOf('bs-whats-new (teaser)', () => h("bs-whats-new", { type: "teaser", tag: "New", date: "24.09.2026", heading: "Smarter payment reminders", description: "See what changed.", closable: true }));
     axeOf('bs-button-skeleton', () => h("bs-button-skeleton", null));
     axeOf('bs-tabs', () => (h("bs-tabs", null, h("bs-tab", { selected: true }, "One"), h("bs-tab", null, "Two"))));
     axeOf('bs-menu', () => (h("bs-menu", null, h("bs-menu-item", null, "Edit"), h("bs-menu-item", null, "Delete"))));

package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.js

@@ -25,7 +25,7 @@ import { h } from "@stencil/core";
 export class BsAiDisclaimer {
     render() {
         https: //images.unsplash.com/photo-1512917774080-9991f1c4c750?w=200&h=200&fit=crop
-         return (h("div", { key: '94efc8f14ad853f5e04c5d0b1d7630138bb6a8f6', class: "bs-ai-disclaimer" }, h("p", { key: 'e19407ceb6f9dbf00f68eb120d1bb371683468c2', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: '68148e0251aeb03d082c64315860a4a683bebad0' }))));
+         return (h("div", { key: '767bf87bcfe9d07ba03aae5809a483e207bad96d', class: "bs-ai-disclaimer" }, h("p", { key: '563f48f1c1dda418af44e27c237655bcfc0821d7', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: '255b7d63c1d719cf09b914d5d5df6af7516c18dd' }))));
     }
     static get is() { return "bs-ai-disclaimer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-ai-greeting/bs-ai-greeting.js

@@ -43,7 +43,7 @@ export class BsAiGreeting {
         const subtext = this.productName
             ? `How can I help you with ${this.productName} today?`
             : 'How can I help you today?';
-        return (h("div", { key: '23a4086fd322c84616da441cdaf0d16ca2dd82df', class: "bs-ai-greeting" }, h("div", { key: 'ec1fcf0d0f1109a9bddcfba9470a833c679c89de', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: '583f4b4284f54ea6572224f3e2831be9cf8a251a', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: '5f271e0dfb6a616027426960f94d2dc6afeeb711', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: '603b3d742859b20daa234a4abe87f90a5c22b1bb', part: "subtext", class: "bs-ai-greeting__subtext" }, subtext)));
+        return (h("div", { key: '707816a52c925fa81beb3dc4f83d38d144a0bd6b', class: "bs-ai-greeting" }, h("div", { key: '5762d7e1a865fc5cb8b680bfd7547acee7a871ed', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: '0301b8b35d6919c0e9f51def1dbac208309facf9', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: '1ba457bc87cc9e38b4d191ff5b3d6079768a5d7c', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: '056f8ad54e7c3b6115248206921f8b6ec5b1d7b0', part: "subtext", class: "bs-ai-greeting__subtext" }, subtext)));
     }
     static get is() { return "bs-ai-greeting"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.js

@@ -29,7 +29,7 @@ export class BsAiThinking {
     /** The status text shown next to the icon, e.g. "Retrieving", "Thinking", "Searching". */
     label = 'Thinking';
     render() {
-        return (h("div", { key: '5b3cac839971c8969f6e77c3628f2ae16db3f619', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: 'fc1c52491a531fe04a24cf7d791efa303cba5127', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: '6f46e04ef15c39cc33cd9e77f98cee34600d4f78', part: "label", class: "bs-ai-thinking__label" }, this.label)));
+        return (h("div", { key: 'e9d5f3302e6048a8c62462eb867ab48289e3b108', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: '89abfffcbcf2a03d8dcb02e5cd44dde40285f43d', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: '5d50e900a14dc0849ccbc26543c9b13ad538ed7f', part: "label", class: "bs-ai-thinking__label" }, this.label)));
     }
     static get is() { return "bs-ai-thinking"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-attachment/bs-attachment.stories.js

@@ -44,15 +44,16 @@ export const PdfLoading = {
     name: 'PDF (loading)',
     args: { type: 'pdf', loading: true },
 };
-export const Gallery = {
+export const MultipleAttachments = {
+    name: 'Multiple attachments',
     render: () => html `
-    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+    <bs-attachment-list aria-label="Attachments" style="max-width: 360px">
       <bs-attachment type="image" image-src=${SAMPLE_IMAGE}></bs-attachment>
       <bs-attachment type="pdf" file-name="Dummy-pdf-in-here"></bs-attachment>
       <bs-attachment type="document" file-name="Dummy-pdf-in-here"></bs-attachment>
       <bs-attachment type="image" image-src=${SAMPLE_IMAGE} loading></bs-attachment>
       <bs-attachment type="pdf" file-name="Dummy-pdf-in-here" loading></bs-attachment>
       <bs-attachment type="document" file-name="Dummy-pdf-in-here" loading></bs-attachment>
-    </div>
+    </bs-attachment-list>
   `,
 };

package/dist/collection/components/bs-attachment-list/bs-attachment-list.js

@@ -58,7 +58,7 @@ export class BsAttachmentList {
         this.canScrollRight = row.scrollWidth - row.clientWidth - row.scrollLeft > 1;
     };
     render() {
-        return (h("div", { key: '6c1f66de13a5439d54faf2739b69560306194b3b', class: "bs-attachment-list" }, h("div", { key: 'de50608382a308fc7ceba50cd1f487958fcdce74', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: 'c7b5bd66d506556abf55875a2e206d6f0792584c', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: '12b8fc16d2a7efbbef36fc6e42ed0058ca32c290', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
+        return (h("div", { key: 'b17878e1d519c9e23af55615c96099d3c95978ef', class: "bs-attachment-list" }, h("div", { key: 'd31618f4b625a05ce2843857c1d7e24f8fcdc1f0', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: '3d53cf8c9ec46e39fbebfc9b95e848f330956e8f', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: '76073ed15b11a0afd206c2843b9926e8c8df97de', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
     }
     static get is() { return "bs-attachment-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.js

@@ -28,7 +28,10 @@ import { Host, h } from "@stencil/core";
 // comments in bs-breadcrumb.css, not here -- see bs-tab.tsx's identical note.
 export class BsBreadcrumb {
     /** Destination for a non-current crumb. Ignored when `current` is true -- the current page is
-     * never a link, even if `href` is set (see the class JSDoc). */
+     * never a link, even if `href` is set (see the class JSDoc). A non-current crumb **without** `href`
+     * renders as plain text that looks identical to a link crumb at rest (only link crumbs get the
+     * hover/focus styles), so give every non-current crumb an `href` unless it is deliberately not
+     * navigable. */
     href;
     /** Whether this crumb is the current page. Renders as plain (non-link) text marked
      * `aria-current="page"`, reflected as an attribute so consumers/CSS can target
@@ -56,7 +59,7 @@ export class BsBreadcrumb {
             ev.preventDefault();
     };
     render() {
-        return (h(Host, { key: '92b78d6b9eeb98420ed6a42496d632d4d437ea78', role: "listitem" }, h("span", { key: '0fbd23cacfecc6b5ea75c250d65875a1087913f7', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '2799c66de6d3291622bd3dea39e4c1f7f97a1bc9' })), this.current ? (h("span", { part: "current", class: "bs-breadcrumb__current", "aria-current": "page" }, h("slot", null))) : this.href ? (h("a", { part: "link", class: "bs-breadcrumb__link", href: this.href, onClick: this.onLinkClick }, h("slot", null))) : (h("span", { part: "link", class: "bs-breadcrumb__link" }, h("slot", null)))));
+        return (h(Host, { key: 'a9ccd034d839eb8c2b3e3dfb7536737cd0189b75', role: "listitem" }, h("span", { key: '5b10b00b1b2ac1a5246f8d658edb2f2a1110df56', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: 'c3d867d49f00e09a333116f9f87aeb6c9478379b' })), this.current ? (h("span", { part: "current", class: "bs-breadcrumb__current", "aria-current": "page" }, h("slot", null))) : this.href ? (h("a", { part: "link", class: "bs-breadcrumb__link", href: this.href, onClick: this.onLinkClick }, h("slot", null))) : (h("span", { part: "link", class: "bs-breadcrumb__link" }, h("slot", null)))));
     }
     static get is() { return "bs-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
@@ -84,7 +87,7 @@ export class BsBreadcrumb {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Destination for a non-current crumb. Ignored when `current` is true -- the current page is\nnever a link, even if `href` is set (see the class JSDoc)."
+                    "text": "Destination for a non-current crumb. Ignored when `current` is true -- the current page is\nnever a link, even if `href` is set (see the class JSDoc). A non-current crumb **without** `href`\nrenders as plain text that looks identical to a link crumb at rest (only link crumbs get the\nhover/focus styles), so give every non-current crumb an `href` unless it is deliberately not\nnavigable."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/bs-breadcrumb/bs-breadcrumbs/bs-breadcrumbs.js

@@ -54,7 +54,7 @@ export class BsBreadcrumbs {
         });
     }
     render() {
-        return (h("nav", { key: '2772673d54ceab8866fada7a3a460938fd03d00c', "aria-label": this.label }, h("ol", { key: 'd9021230f43d8c307ea89ba5ce665bacff66cadf', part: "list", class: "bs-breadcrumbs__list" }, h("slot", { key: 'eccde40d6fc8c47caf1813daccb906b748117840', onSlotchange: this.onSlotChange }))));
+        return (h("nav", { key: 'd98b09d03dc33133c3ab4bf6694e38e274e0551d', "aria-label": this.label }, h("ol", { key: '4064e1ec205530fb4e9af24e4325914a41480403', part: "list", class: "bs-breadcrumbs__list" }, h("slot", { key: 'cb0849d8d47ae4054f34f1928eeb162b007d15a9', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "bs-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-button/bs-button/bs-button.cmp.test.js

@@ -104,4 +104,32 @@ describe('bs-button', () => {
             expect(button).not.toHaveClass('bs-button--has-end-icon');
         });
     });
+    describe('width and subtle colour custom properties', () => {
+        it('fits its content by default', async () => {
+            const { root } = await render(h("bs-button", null, "Click me"));
+            const button = root.shadowRoot.querySelector('button');
+            expect(button.getBoundingClientRect().width).toBe(root.getBoundingClientRect().width);
+            expect(root.getBoundingClientRect().width).toBeLessThan(200);
+        });
+        it('fills its container with --bs-button-width: 100%', async () => {
+            const { root } = await render(h("div", { style: { width: '320px' } }, h("bs-button", { style: { '--bs-button-width': '100%' } }, "Confirm")));
+            const button = root.querySelector('bs-button');
+            expect(button.getBoundingClientRect().width).toBe(320);
+            expect(button.shadowRoot.querySelector('button').getBoundingClientRect().width).toBe(320);
+        });
+        it('has 24px side padding at size sm, and takes --bs-button-padding-x-sm', async () => {
+            const a = await render(h("bs-button", { size: "sm" }, "Change"));
+            const wide = a.root.getBoundingClientRect().width;
+            const b = await render(h("bs-button", { size: "sm", style: { '--bs-button-padding-x-sm': '16px' } }, "Change"));
+            expect(wide - b.root.getBoundingClientRect().width).toBe(16);
+        });
+        it('colours the subtle variant through --bs-button-subtle-color', async () => {
+            const a = await render(h("bs-button", { variant: "subtle" }, "Cancel"));
+            const before = getComputedStyle(a.root.shadowRoot.querySelector('button')).color;
+            const b = await render(h("bs-button", { variant: "subtle", style: { '--bs-button-subtle-color': 'rgb(0, 98, 193)' } }, "Cancel"));
+            const after = getComputedStyle(b.root.shadowRoot.querySelector('button')).color;
+            expect(after).toBe('rgb(0, 98, 193)');
+            expect(before).not.toBe(after);
+        });
+    });
 });

package/dist/collection/components/bs-button/bs-button/bs-button.css

@@ -1,9 +1,13 @@
 :host {
   display: inline-block;
+  width: var(--bs-button-width);
+  --bs-button-width: auto;
+  --bs-button-subtle-color: var(--bs-color-neutral-default);
   --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-padding-x-sm: var(--bs-spacing-300);
   --bs-button-padding-x-icon-side: var(--bs-spacing-150);
   --bs-button-padding-x-label-side: var(--bs-spacing-250);
 
@@ -62,6 +66,8 @@
 }
 
 .bs-button {
+  /* Fills the host, whose width is --bs-button-width (auto = fit the content). */
+  width: 100%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -87,7 +93,7 @@
 
 .bs-button--sm {
   height: var(--bs-button-height-sm);
-  padding: 0 var(--bs-spacing-300);
+  padding: 0 var(--bs-button-padding-x-sm);
   font-size: var(--bs-font-size-sm);
 }
 
@@ -220,7 +226,7 @@
 
 .bs-button--subtle {
   background: transparent;
-  color: var(--bs-color-neutral-default);
+  color: var(--bs-button-subtle-color);
 }
 .bs-button--subtle:hover:not(:disabled) {
   background: var(--bs-button-subtle-hover);

package/dist/collection/components/bs-button/bs-button/bs-button.js

@@ -24,6 +24,9 @@ import { h } from "@stencil/core";
  * @part label - The text label element.
  * @part end-icon - The trailing icon wrapper element.
  * @prop --bs-button-radius - Corner radius. Aliased to `--bs-border-radius-100` by default.
+ * @prop --bs-button-padding-x-sm - Left/right padding of a label-only button at `size="sm"`. Aliased to `--bs-spacing-300`.
+ * @prop --bs-button-width - Width of the button. `auto` by default (fits its content); set `100%` for a full-width button, e.g. `bs-button { --bs-button-width: 100%; }`.
+ * @prop --bs-button-subtle-color - Label/icon colour, `variant="subtle"`. Aliased to `--bs-color-neutral-default`; set it to `var(--bs-text-action)` for a blue text button.
  * @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
  * @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
  * @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
@@ -116,7 +119,7 @@ export class BsButton {
     };
     render() {
         const iconOnly = (this.hasIcon || this.hasEndIcon) && !this.hasLabel;
-        return (h("button", { key: 'c218d6df7ccdbb753a2965e6f25a2ed7c0fd73fc', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '8b664e7aae4d4558aeb9fa2d5bc39c0445bd6e1d', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: '708b742030c8f4aaeeea36ce68c0c9bc3d9839f9', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'db1a5517c7a68d3dafd884b3ebf590e53d911782', part: "label", class: "bs-button__label" }, h("slot", { key: 'ba58f01560f81165e24624b5511848d42b602965', onSlotchange: this.onLabelSlotchange })), h("span", { key: '78f6f131f9b6ea390b1f18929053040e93b688f3', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: 'ee1c230a9f4099e625623173ab429c76664ee64e', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
+        return (h("button", { key: 'dd64d152077f283339cbf93b3b7424dd51519163', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '918a3c1e157e9c84992fd1553c69cf2d7b87cba9', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: 'a43da2dfb72cc155d113f4e044fec9890bcf8e90', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '35c941287c14c79b9a9c23a0d4cfecd66c459f20', part: "label", class: "bs-button__label" }, h("slot", { key: '4e76d97c2f26e3f609e3e8336135529b49d1a370', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'fb82a5a1785c6c96993daf3de2bdff5b9597a431', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '0d70abb45f41970bc2aa5dcd18ad3931b053190e', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
     }
     static get is() { return "bs-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.js

@@ -62,7 +62,7 @@ export class BsIconButton {
             form.reset();
     };
     render() {
-        return (h("button", { key: '433827a167fc7ce5183358c3e8469d68dd67788a', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'e7d50a6755e7e4de39db799abef38c118d888b98', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: 'a737620ca5d0baf69abc1964a160492c32359d09' }))));
+        return (h("button", { key: '3ac84a834ff924589ebf317bff14576905091bb7', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '2b913f9fdfa8bc0b5bbbd9ef55b2dc73718d260c', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: '6cbb10e814b9b179f9a3b99fae0e662ce351c607' }))));
     }
     static get is() { return "bs-icon-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-button-skeleton/bs-button-skeleton.js

@@ -25,7 +25,7 @@ export class BsButtonSkeleton {
     /** Sizing scale, matching the `bs-button` size it stands in for. */
     size = 'md';
     render() {
-        return h("span", { key: 'e272ddf5faf4cf9875b3d70d22ae4a406d1fdf02', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": "Loading" });
+        return h("span", { key: '69fa3f8608b28769612132249a8ac0a23098bda6', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": "Loading" });
     }
     static get is() { return "bs-button-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-card/bs-card.cmp.test.js

@@ -58,4 +58,52 @@ describe('bs-card', () => {
             expect(image).toHaveClass('bs-card__image--visible');
         });
     });
+    describe('customization', () => {
+        const style = (el) => getComputedStyle(el.shadowRoot.querySelector('.bs-card'));
+        it('keeps the Figma defaults: 8px radius, no border, raised shadow, 16px padding', async () => {
+            const { root } = await render(h("bs-card", null, "Body"));
+            const card = style(root);
+            expect(card.borderTopLeftRadius).toBe('8px');
+            expect(card.borderTopWidth).toBe('0px');
+            expect(card.boxShadow).not.toBe('none');
+            expect(getComputedStyle(root.shadowRoot.querySelector('.bs-card__content')).paddingTop).toBe('16px');
+        });
+        it('has no shadow on the base and container surfaces', async () => {
+            for (const surface of ['base', 'container']) {
+                const { root } = await render(h("bs-card", { surface: surface }, "Body"));
+                expect(style(root).boxShadow).toBe('none');
+            }
+        });
+        it('can be restyled through its custom properties', async () => {
+            const { root } = await render(h("bs-card", { style: {
+                    '--bs-card-radius': '12px',
+                    '--bs-card-padding': '24px 0',
+                    '--bs-card-border-width': '1px',
+                    '--bs-card-shadow': 'none',
+                    '--bs-card-overflow': 'visible',
+                } }, "Body"));
+            const card = style(root);
+            expect(card.borderTopLeftRadius).toBe('12px');
+            expect(card.borderTopWidth).toBe('1px');
+            expect(card.boxShadow).toBe('none');
+            expect(card.overflow).toBe('visible');
+            const content = getComputedStyle(root.shadowRoot.querySelector('.bs-card__content'));
+            expect(content.paddingTop).toBe('24px');
+            expect(content.paddingLeft).toBe('0px');
+        });
+    });
+    describe('height', () => {
+        it('sizes to its content by default', async () => {
+            const { root } = await render(h("bs-card", null, "Body"));
+            const surface = root.shadowRoot.querySelector('.bs-card');
+            expect(surface.getBoundingClientRect().height).toBe(root.getBoundingClientRect().height);
+            expect(root.getBoundingClientRect().height).toBeLessThan(120);
+        });
+        it('fills a height set on the host, so the surface (not just the box) is that tall', async () => {
+            const { root } = await render(h("bs-card", { style: { height: '200px' } }, "Body"));
+            const surface = root.shadowRoot.querySelector('.bs-card');
+            expect(root.getBoundingClientRect().height).toBe(200);
+            expect(surface.getBoundingClientRect().height).toBe(200);
+        });
+    });
 });

package/dist/collection/components/bs-card/bs-card.css

@@ -1,5 +1,32 @@
+/**
+ * @prop --bs-card-bg: Background. Set per `surface`: --bs-paper-bg-raised / -base / -container.
+ * @prop --bs-card-radius: Corner radius. Aliased to --bs-border-radius-100 (8px).
+ * @prop --bs-card-padding: Padding around the header/body/footer content (the `image` slot stays flush). Aliased to --bs-spacing-200. Accepts a shorthand, e.g. `var(--bs-spacing-200) 0`.
+ * @prop --bs-card-border-width: Border width. 0 -- the Figma "Card" has no border. Set it with --bs-card-border-color for a bordered card.
+ * @prop --bs-card-border-color: Border colour. Aliased to --bs-border-default.
+ * @prop --bs-card-shadow: Box shadow. Set per `surface`: --bs-shadow-sm for `raised`, none for `base` and `container`.
+ * @prop --bs-card-overflow: Overflow of the surface. `hidden` so the image slot's top corners are clipped to the radius; set `visible` when the content has to overflow (a popup menu, an arrow).
+ */
 :host {
   display: block;
+
+  --bs-card-bg: var(--bs-paper-bg-raised);
+  --bs-card-radius: var(--bs-border-radius-100);
+  --bs-card-padding: var(--bs-spacing-200);
+  --bs-card-border-width: 0px;
+  --bs-card-border-color: var(--bs-border-default);
+  --bs-card-shadow: var(--bs-shadow-sm);
+  --bs-card-overflow: hidden;
+}
+
+:host([surface='base']) {
+  --bs-card-bg: var(--bs-paper-bg-base);
+  --bs-card-shadow: none;
+}
+
+:host([surface='container']) {
+  --bs-card-bg: var(--bs-paper-bg-container);
+  --bs-card-shadow: none;
 }
 
 /* No border -- verified against the Figma "Card" node, which relies on background/shadow contrast
@@ -8,8 +35,15 @@
    the -150 value previously here was the Figma *demo frame's* radius around the example, not the
    card's own "Paper" node radius. */
 .bs-card {
-  overflow: hidden;
-  border-radius: var(--bs-border-radius-100);
+  box-sizing: border-box;
+  /* Fills the host when the host has an explicit height (a fixed-height card), and is a no-op when the host's
+     height is auto -- so cards still size to their content by default. */
+  height: 100%;
+  overflow: var(--bs-card-overflow);
+  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
+  border-radius: var(--bs-card-radius);
+  background: var(--bs-card-bg);
+  box-shadow: var(--bs-card-shadow);
   font-family: inherit;
   /* No color rule existed anywhere in this file before this -- slotted header/body/footer content
      inherited whatever color the *consuming page* happened to have, not this card's own themed
@@ -19,19 +53,6 @@
   color: var(--bs-text-default);
 }
 
-.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);
-}
-
 /* Empty by default (no padding/margin) -- only visible when the image slot has content, same
    "reserve no space when empty" pattern as bs-dialog's own image slot. */
 .bs-card__image--visible ::slotted(img) {
@@ -45,7 +66,7 @@
    can sit flush against the card's edges instead of being inset by it. spacing-200 (16px), not
    -400 (32px) -- the -400 value previously here didn't match the Figma redline at all. */
 .bs-card__content {
-  padding: var(--bs-spacing-200);
+  padding: var(--bs-card-padding);
 }
 
 /* spacing-100 (8px), not -300 (24px) -- same over-sized-token mistake as the padding above. */

package/dist/collection/components/bs-card/bs-card.js

@@ -34,7 +34,7 @@ export class BsCard {
         this.hasImage = ev.target.assignedNodes().length > 0;
     };
     render() {
-        return (h("div", { key: '8cad76fa0c75da73579d9c3f0c35bd53e403e206', part: "container", class: `bs-card bs-card--${this.surface}` }, h("div", { key: '0b6c4b4f1917b91c2666fe5a458f4824b2be8a45', part: "image", class: `bs-card__image ${this.hasImage ? 'bs-card__image--visible' : ''}` }, h("slot", { key: 'aa072aab27b633e7f043855d5c9dfdcdd711adcf', name: "image", onSlotchange: this.onImageSlotchange })), h("div", { key: '9c30a8c08fb8c8a312b649358fdc4d666fffeb8d', class: "bs-card__content" }, h("div", { key: '0489dbbbbb3c743d8cabe2722884a3d127cd0dc4', part: "header", class: "bs-card__header" }, h("slot", { key: '43175c6aff3313e8efbedde2e8cb344c023594ea', name: "header" })), h("div", { key: '23d4f29e1786d30ea9b63159287ed7cf139a374a', part: "body", class: "bs-card__body" }, h("slot", { key: '2e3c69ae07711b57e2e825b0ed0bd691d8e9c3b1' })), h("div", { key: 'fb0747f6bf93c25057e84551c2a0b579c7c594d3', part: "footer", class: "bs-card__footer" }, h("slot", { key: '8ef61b947e94412f113f237b55144cc216a6bad5', name: "footer" })))));
+        return (h("div", { key: '288db1e39f66129bf5d6598f53fb49d5481d0f02', part: "container", class: `bs-card bs-card--${this.surface}` }, h("div", { key: '9f25abc5cdfdf40d7bdefab7f1154545cc634f9d', part: "image", class: `bs-card__image ${this.hasImage ? 'bs-card__image--visible' : ''}` }, h("slot", { key: '8eff4a23e8ecf977056206bc8c223b4ad97b7656', name: "image", onSlotchange: this.onImageSlotchange })), h("div", { key: 'b0a1580657943f30c9a5dba3361dcf00dd36e90f', class: "bs-card__content" }, h("div", { key: 'f151de3b9d5975d2953131aea92a2353ac665bbc', part: "header", class: "bs-card__header" }, h("slot", { key: '6d015146a6ff72788ad3843caa37f2c304728b8b', name: "header" })), h("div", { key: 'd678f0d33dba58725b397502d9aced9983466bf6', part: "body", class: "bs-card__body" }, h("slot", { key: '51b7cdca4af0e43ba7de04c14bca32f59baa2f58' })), h("div", { key: '6b6fe027565678561d7f7beb79f6ceb05397ff50', part: "footer", class: "bs-card__footer" }, h("slot", { key: '6d704d0e7b6644e3f0e6b4ce7ae12e515c84339d', name: "footer" })))));
     }
     static get is() { return "bs-card"; }
     static get encapsulation() { return "shadow"; }
@@ -72,7 +72,7 @@ export class BsCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "surface",
                 "defaultValue": "'raised'"
             }

package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.js

@@ -123,7 +123,7 @@ export class BsChatbotFeedback {
     }
     render() {
         const stars = [1, 2, 3, 4, 5];
-        return (h("div", { key: 'aabc3b63a41eb5324d572f20a0af29ccea5d9507', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '2b01df39b773ba1ab55b654b688b8e514af87c29', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": "Close", onClick: this.onCloseClick }, h(CloseIcon, { key: 'bcffb7d5c49c3de2fd62296c0a815a9ebab92bef' })), h("div", { key: '2d2f9c08f0b345dacda9d6514e6b2c665967358c', class: "bs-chatbot-feedback__top" }, h("div", { key: 'd06bf92615cb05d6b3142c7b375297b78a8ebb1c', class: "bs-chatbot-feedback__text" }, h("p", { key: '0c362bce3ad81312816565fff5440593daf55790', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: '0fe0980b52c758fcbed0176c5791e1ac088cc5ae', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: '556b835d8cc4543f524fdb01791c3af7aacd8669', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": "Rating" }, stars.map(value => (h("button", { type: "button", part: "star", class: "bs-chatbot-feedback__star", role: "radio", "aria-checked": (this.rating >= value).toString(), "aria-label": `${value} star${value > 1 ? 's' : ''}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (h("div", { key: 'f99093e2962ffedc27999e3a517c48904dea468b', class: "bs-chatbot-feedback__field" }, h("label", { key: 'c9bb2ebb44265fc2700e4a862e5ccb6076eaa25e', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, "Tell us what you think"), h("textarea", { key: '847b1022f1d7e1507e5e82186e03735eccafd80e', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: "e.g.The response was helpful ....", value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: '7817ecda3a3778cd8b3fb05565ca4ed4101da612', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: 'e0415b534c83f0fd8026c70aa01db12e68f0bab4', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: 'f2969b4501a1e0af5adb302d5c80e813cd1aec26', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: 'd3ca363da5f1e278a4d1653137cacfe42ac7daf7' }), "Submit feedback")), h("button", { key: '0b40842d7d9bf740847d0b851a10c9459db4a9c1', type: "button", part: "new-chat", class: `bs-chatbot-feedback__new-chat ${this.submitted ? 'bs-chatbot-feedback__new-chat--primary' : 'bs-chatbot-feedback__new-chat--outlined'}`, onClick: this.onNewChatClick }, h(EditIcon, { key: '6fe3c4955794d0d6167d307afe5156923ae871f2' }), "Start new chat"))));
+        return (h("div", { key: '1cf3a5182bae5ef9ca6032e719ded84b89e38c92', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '5bda6ae88a7d61097f6903a9d65450c7189deed3', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": "Close", onClick: this.onCloseClick }, h(CloseIcon, { key: 'e108a344b08ea32fc9483fe38afe414ba4934b18' })), h("div", { key: '59290f663a13db00de6e009d50f54f593667ecdb', class: "bs-chatbot-feedback__top" }, h("div", { key: '9f4f809e1b0a785e1b511225b9cba960a4089a5b', class: "bs-chatbot-feedback__text" }, h("p", { key: '7eb6e3ff94b3b40402eb00a019094186bec1a954', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: 'e3d44543b43f3f0cf16a78951d08184697cd31c3', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: '802bd512162d1135b6ca3a358230cfa3946d9b47', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": "Rating" }, stars.map(value => (h("button", { type: "button", part: "star", class: "bs-chatbot-feedback__star", role: "radio", "aria-checked": (this.rating >= value).toString(), "aria-label": `${value} star${value > 1 ? 's' : ''}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (h("div", { key: '0efa9387c6c4ff4256f2b3fcb0ed057425c56a47', class: "bs-chatbot-feedback__field" }, h("label", { key: '56ba4baaaf912b4434b6be27af865296ebad2bf5', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, "Tell us what you think"), h("textarea", { key: 'c0964f935e259744a770870671ccbe1c6748f2d6', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: "e.g.The response was helpful ....", value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: '226aefe64cdc4d05986a5d078a391dcc03630acf', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: '174a94b61e9395792f99d73ab0533a4e7e7d6bab', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: 'b1539a93054f3037926e190432c8821e14cb7fee', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: 'd885521025886f58311c5713430414a82eb9b063' }), "Submit feedback")), h("button", { key: '623b133d827c7549d6f052e7668d3303f93f80c3', type: "button", part: "new-chat", class: `bs-chatbot-feedback__new-chat ${this.submitted ? 'bs-chatbot-feedback__new-chat--primary' : 'bs-chatbot-feedback__new-chat--outlined'}`, onClick: this.onNewChatClick }, h(EditIcon, { key: '5069e1d0219f4b25212631425ddb85473bff0c4a' }), "Start new chat"))));
     }
     static get is() { return "bs-chatbot-feedback"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.cmp.test.js

@@ -52,14 +52,14 @@ describe('bs-chatbot-header', () => {
         const header = root;
         expect(header.expanded).toBe(false);
         const expandButton = root.shadowRoot.querySelector('[part="expand"]');
-        expect(expandButton).toEqualAttribute('aria-label', 'Expand');
+        expect(expandButton).toEqualAttribute('aria-label', 'Fullscreen');
         expect(expandButton).toEqualAttribute('aria-pressed', 'false');
         expandButton.click();
         await waitForChanges();
         expect(header.expanded).toBe(true);
         expect(expandSpy).toHaveReceivedEventTimes(1);
         expect(expandSpy).toHaveReceivedEventDetail(true);
-        expect(expandButton).toEqualAttribute('aria-label', 'Collapse');
+        expect(expandButton).toEqualAttribute('aria-label', 'Exit fullscreen');
         expect(expandButton).toEqualAttribute('aria-pressed', 'true');
         expect(newChatSpy.length).toBe(0);
         expect(historySpy.length).toBe(0);

package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.css

@@ -4,7 +4,7 @@
   --bs-chatbot-header-border: var(--bs-border-default);
   --bs-chatbot-header-padding-top: var(--bs-spacing-200);
   --bs-chatbot-header-padding-bottom: var(--bs-spacing-100);
-  --bs-chatbot-header-padding-x: var(--bs-margin-fluid);
+  --bs-chatbot-header-padding-x: var(--bs-spacing-200);
   --bs-chatbot-header-gap: var(--bs-navigation-header-gap);
   --bs-chatbot-header-actions-gap: var(--bs-spacing-100);
   --bs-chatbot-header-button-size: var(--bs-spacing-600);

package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.js

@@ -74,7 +74,7 @@ export class BsChatbotHeader {
         this.bsClose.emit();
     };
     render() {
-        return (h("div", { key: '05419c0e9659074c99586190cd78a8de7a5eafcc', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: 'db67056399c3cd0054f24b8b6622221ec9a0817a', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: 'c8d98740445bd9d53c096b16058e721c9aea098c', class: "bs-chatbot-header__actions" }, h("span", { key: 'fbe6e910956684325e7ea9945f6ec16dbaf89b47', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '30d9914ab21468151821e45b6243196e8e69f5b0', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: '1d85439aa66bc42d0a479c90fa581f9ef4fd4245', name: "new-chat-icon" }, h(NewChatIcon, { key: 'adada1b7014df77327f48279fcab1468c9ebcb5e' }))), h("bs-tooltip", { key: '5854895579df420a25b8ad367aa31acf7a5afc05', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: 'd2ce725b9b07208ae540601afc99845adceaf110', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'a2dd3406bc6b557dd0323bffd843e21a9c4cbed6', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: '2acf5d76225c710ed8da26d7b28a15b9906f6938', name: "history-icon" }, h(HistoryIcon, { key: 'a5452154bd46c7b0cfdfc77b584aed0078e9d808' }))), h("bs-tooltip", { key: 'da3ca7cdeb6182fb45e969e6cfb8232ec8410a17', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: 'c69f4bba7e92f341f57c77909dfa4f5365f0ec3a', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'cd42ff4dd756295b93948fb2c9a9b5b957c4e335', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? 'Collapse' : 'Expand', "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, h("slot", { key: '8c13063be20983c2c504042d3811c5dc4820f399', name: "expand-icon" }, h(ExpandIcon, { key: 'd508f7f4ff1a3b9e5622aab3775c786d85472b3e' }))), h("bs-tooltip", { key: 'e575d46939327fb304c3fdd6e78b169271b39848', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '9b4bab65e49526f20b2760f3bc8d98fcefad30c7', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '519b509a320894329ba716f604d185dd4d2746b0', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: '4205d1d665053faf07ba13d929f5120f05806a89', name: "close-icon" }, h(CloseIcon, { key: '76bf4ab39f7e5fbdcdbb62d0baabb381192fbae7' }))), h("bs-tooltip", { key: 'cbebd979aef708c05e75bf835cd353834bcf83cb', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
+        return (h("div", { key: 'c77fcfa340df9342111e77588804f51c66788e90', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: 'c17b3297adacb61edbfbdc77832d1c0e5e1c1f02', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '9c07b22fa0a41a21fd95966d25c619a6e1b3dfa8', class: "bs-chatbot-header__actions" }, h("span", { key: '5f640f6c5df74ae59cb302aa4d66456fbd71c3b0', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'd50d84593711b1b045cc2ff66d1efc2d71c73755', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: '29dc1d8da07329d304e94d4baac0ab1104ea5815', name: "new-chat-icon" }, h(NewChatIcon, { key: '9e584349507e736f7f5c24f8fb2253ad29bbf09b' }))), h("bs-tooltip", { key: 'd99a994539368edc0aa053e474ab9aff155050ed', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: '85f4e439d95a56da740a37c41a39b3a9b7ac2f13', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'a2d0d468c03d6a83cbdfb69ca0edc30168c3f8a8', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: 'd6f6bd60b8931229602aaebee485cb5a1fbb8ca8', name: "history-icon" }, h(HistoryIcon, { key: 'f2de17ccd1e23077e57bd4a092d2432f854b5161' }))), h("bs-tooltip", { key: '6cce933959793a959cf288df3323ed5d8f80dba8', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: '019a198d91c9c93266efd1a3df823d13ea2455d4', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '26cb1a7436d213b1ce003f33abe419d8fab0deb9', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? 'Exit fullscreen' : 'Fullscreen', "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, h("slot", { key: 'e36dca1a33834d5f6a4f3a9434535b280de26e52', name: "expand-icon" }, h(ExpandIcon, { key: 'e045048d9044b29b2de00b529e5aa2d634c41520' }))), h("bs-tooltip", { key: '9e7911c8544776e6939b7e704a2206d95ff69126', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Exit fullscreen' : 'Fullscreen')), h("span", { key: '6d23ab86e5b21dbb44d7f21443d19f1a6b2b2727', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'a9d5765cf1db4f1278f922acbb54a41ad7477a10', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: '3570a4fadc9e52bc4b9db393f9351ae2dcb4c877', name: "close-icon" }, h(CloseIcon, { key: 'ca1ee8c7733e74db4b464e7e1af4addec847c950' }))), h("bs-tooltip", { key: '6fbdd96e577b485f7268501c2cfd3805dc3acefc', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
     }
     static get is() { return "bs-chatbot-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.js

@@ -105,7 +105,7 @@ export class BsChatbotResponseAction {
     };
     render() {
         const hasSources = !!this.sourcesCount && this.sourcesCount > 0;
-        return (h("div", { key: '580d2b0a324ade66bf1ae17b03634bf6d746b2c0', class: "bs-chatbot-response-action" }, h("button", { key: 'a623ca741c690bf3746974d7bac37efa43e5e754', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: '22fd030c4828821509e5e5be53fd790d4bb98aa4', name: "like-icon" }, h(ThumbsUpIcon, { key: '2a1f8e1ad10f1d3c5f76de648b9a423c463677e1' }))), h("button", { key: 'f980f7d1f3df9aefa3a125563fe555132497e390', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: 'ceb6da0a1809e8fc2f889c3ad53cc2a480fecef5', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '6b45b16449372ddc167e976791fbd0b5d7c7b897' }))), h("button", { key: 'e46e67457ee5f0f011e1f71de30c05a2ebcccd87', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: 'f6173acf30c68012a2c99edc84b28955bc275d6a', name: "copy-icon" }, h(CopyIcon, { key: 'f1ca6efa24d6b65a270244a37978a0c791c2e897' }))), h("button", { key: '40a809efd3bf8d9fa1fc1975082e9d8a5dbfd55a', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: 'b85d02a27fe9ba9f10e008255139a2f6221530c8', name: "regenerate-icon" }, h(RegenerateIcon, { key: '38eb20d38c90462d7b337f5f9b5e1320a8d0382b' }))), h("div", { key: '94d8abdc602ca68fc86b29c3440b5458916a9d5c', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '9684224b6e5d246011d9b07dd6a7b7e09dc38c01', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: '2bff489b2b6df0cb072b57335e73b6b17be19b0b', name: "menu-icon" }, h(MenuIcon, { key: 'f65fd8348f6b426a0230e5248d0ecc0707169d59' }))), this.menuOpen && (h("div", { key: '8ed1d83ed4e2fcc69a638dbe8579d4e77b8a70ff', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '7d61fb81284b9351a7beb876052024b4a8b58094', name: "menu" })))), hasSources && (h("button", { key: '8c858a645dbdaefafb27b0b799fbb64892aaae40', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: '3a9d96c3adae31db76a29d06f0a2467cd479055a', name: "sources-icon" }, h(SourcesIcon, { key: '12503e29497a08a5aaf1448d02791e735f274d09' })), h("span", { key: 'cb5a49e1892a5f5f1cfb92095514ea3b1da59c5f', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
+        return (h("div", { key: '227d45ac6fa99d0c5315d765327c02ba0f0ec103', class: "bs-chatbot-response-action" }, h("button", { key: '19db04d45fbe745bd4e80264c9f8e612ed03d411', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: '034deacf77f82cb9b521db16be095b78522ee895', name: "like-icon" }, h(ThumbsUpIcon, { key: 'cd4d70ed2ee5d4be7916ba7f11b725f63bc29204' }))), h("button", { key: '380f16ac09380b76b7a931a7397bca0c8506207f', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: '7f1ecd578a69c138a8b44c360d371e33bd74e4a2', name: "dislike-icon" }, h(ThumbsDownIcon, { key: 'b196af3aee600a21b5d1bf53244888c690ba0451' }))), h("button", { key: '82739cc554821af33042f4620bcd6bbcbd96e517', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: 'd4b9981fb67e317a6cee54b4ef17a68fe12d7115', name: "copy-icon" }, h(CopyIcon, { key: '7ca4e99ae3f3e418a0882fcbb663dd819e4582cf' }))), h("button", { key: '0b32cb3292ebd4e75ce8a3eb418f5d5a2ab191dc', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: 'ede5d996bd1e6e5fe260df4734a5749b957c6455', name: "regenerate-icon" }, h(RegenerateIcon, { key: '12ff8d4527153fa65ba5e7de866758e9fe21dece' }))), h("div", { key: '03f207b3d016b114ef2d4337e9ed1468da63e3f7', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '2e4745ace0e6d220998b17265902d2663b63e369', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: 'fb4d12abae8d01bfc8ff0f4eb3f3888eb2c5a78e', name: "menu-icon" }, h(MenuIcon, { key: '5cd60593c9bb37fdb0ecb09d95cc1d39056cf826' }))), this.menuOpen && (h("div", { key: '33bb00b251c3aef1af17854690c30b8b27e01da1', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: 'cd848943f1c881c95a14c54f8ef01e4b0182c629', name: "menu" })))), hasSources && (h("button", { key: 'b6493094208f1716aebacb63ca6b2c0139ce34ff', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'dbec7bbc889f52b76b914fa5a7c19cd378829345', name: "sources-icon" }, h(SourcesIcon, { key: '0af7d81f2f9328f380a1ecf17f0e453243e0ae8f' })), h("span", { key: 'f5247563134eb5a3932110c1191edf51ef8c2f69', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
     }
     static get is() { return "bs-chatbot-response-action"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.js

@@ -57,7 +57,7 @@ export class BsChatbotSourcesDrawer {
     };
     render() {
         const displayCount = this.count ?? this.slottedCount;
-        return (h("div", { key: 'cc40e8f428b35477177886763cabe96a2414a2b6', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: '13c34662ec82fcf7537564d12be6a7c4681631c4', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: '8d82c247489192a70dd23cf7e35f08d59048e05a', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: 'b4eb825451c43a835b050edaf5ad559234a75124', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: 'b6503e6525dd9a3464ad7cbab2225009392ce4cc', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '26059a165b9e8a45b1902bb82e89c2fd693dfc85', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: '720e1f4baff8d3764163934134966fd25aea0097', name: "collapse-icon" }, h(CaretRightIcon, { key: '779d738da467eb380801263bcffc1935ae5e9875' })))), h("div", { key: '29279a88a3f3b76c7418522af48b4bd9e652e453', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: '85d006ab484a4427e363647b290d7a8e9229c7c6', onSlotchange: this.onSlotchange }))));
+        return (h("div", { key: '8d3a64121acfc35e2be62baf23ff3630a9193617', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: '384e3cb1c4bca85727d6f21260490b5119f29db5', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: 'bd83473b5787fd2ca7a143c600de6fe74625ee80', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '0c9285fa51de5f73f89c7d67786c5f4b5bde55ed', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: 'a3725d4b2798e07972335ee7a8024cd2f8e73f99', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: 'afb5efa705e54a464e3237475a90987d7da5f506', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: '8b886a8b6c2f60a4ca07978a8367f3366455bedc', name: "collapse-icon" }, h(CaretRightIcon, { key: 'bea232b218eca7f11c43a5c8884f78b0d5569cda' })))), h("div", { key: 'a417a26fb970a77002a56b7bd91645d18793ae69', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: '018bf6454c7020b3d14122c1b9b86ae11072f1a7', onSlotchange: this.onSlotchange }))));
     }
     static get is() { return "bs-chatbot-sources-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.js

@@ -45,7 +45,7 @@ export class BsChatbotSuggestionButton {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '3eed6a4eb359433fe682984f4628bdc46045f910', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '2e5bdcd63ed01ca0235bd6f74fa40a0e9e835863' })));
+        return (h("button", { key: '159fda3cff7fa1295b9b9800d083706f282bbd0d', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'a26be73a49a140f2e3017ff91a0727f83e00b67c' })));
     }
     static get is() { return "bs-chatbot-suggestion-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-checkbox/bs-checkbox-skeleton/bs-checkbox-skeleton.js

@@ -33,7 +33,7 @@ export class BsCheckboxSkeleton {
      * (unusual) default `bs-checkbox` itself uses. */
     size = 'lg';
     render() {
-        return (h("span", { key: '062c3abd38665132c305089335d3eb993c910061', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": "Loading" }, h("span", { key: 'bc682511b4e316e13460186388e13aa09b77b139', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: '20dc4a2ebff2e678a990cb244359bec2f515d742', part: "label", class: "bs-checkbox-skeleton__label" })));
+        return (h("span", { key: '26d1c09678d3385cda9494440b116c190c0431cd', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": "Loading" }, h("span", { key: '62e597f01d199aadbbd2e725753ab82377c9b685', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: 'a36053e0d189edaae49fcf9340f28f70ed50a28b', part: "label", class: "bs-checkbox-skeleton__label" })));
     }
     static get is() { return "bs-checkbox-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-composer/bs-composer.css

@@ -2,10 +2,11 @@
   display: block;
   --bs-composer-radius: var(--bs-border-radius-150);
   --bs-composer-button-radius: var(--bs-border-radius-100);
-  --bs-composer-button-size: var(--bs-spacing-600);
+  --bs-composer-button-size: var(--bs-spacing-550);
   --bs-composer-bg: var(--bs-input-bg-default);
   --bs-composer-border: var(--bs-input-border-default);
   --bs-composer-border-focus: var(--bs-input-border-focus);
+  --bs-composer-border-human: var(--bs-border-neutral-hover);
 
   --bs-composer-action-bg: var(--bs-color-primary-default);
   --bs-composer-action-bg-hover: var(--bs-color-primary-hover);
@@ -38,6 +39,7 @@
 
 .bs-composer--human {
   border-style: dashed;
+  border-color: var(--bs-composer-border-human);
 }
 
 .bs-composer:focus-within {
@@ -118,7 +120,7 @@
 .bs-composer__controls-row {
   display: flex;
   align-items: center;
-  gap: var(--bs-spacing-200);
+  gap: var(--bs-spacing-100);
   padding: var(--bs-spacing-150);
 }