@brandsync/wc 0.0.11 → 0.1.0

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

@@ -2,7 +2,7 @@ import { render, h, describe, it, expect } from "@stencil/vitest";
 describe('bs-composer', () => {
     it('renders with idle state defaults: ai variant placeholder, enabled mic/action buttons', async () => {
         const { root } = await render(h("bs-composer", null));
-        const input = root.shadowRoot.querySelector('input');
+        const input = root.shadowRoot.querySelector('textarea');
         expect(input).toEqualAttribute('placeholder', 'Ask Genie something...');
         expect(input).not.toHaveAttribute('disabled');
         const mic = root.shadowRoot.querySelector('[part="mic"]');
@@ -13,22 +13,22 @@ describe('bs-composer', () => {
     });
     it('uses the human variant default placeholder', async () => {
         const { root } = await render(h("bs-composer", { variant: "human" }));
-        const input = root.shadowRoot.querySelector('input');
+        const input = root.shadowRoot.querySelector('textarea');
         expect(input).toEqualAttribute('placeholder', 'Message your support agent...');
     });
     it('overrides the variant default placeholder when placeholder is set', async () => {
         const { root } = await render(h("bs-composer", { variant: "ai", placeholder: "Custom prompt" }));
-        const input = root.shadowRoot.querySelector('input');
+        const input = root.shadowRoot.querySelector('textarea');
         expect(input).toEqualAttribute('placeholder', 'Custom prompt');
     });
     it('reflects the value prop to the native input', async () => {
         const { root } = await render(h("bs-composer", { value: "hello there" }));
-        const input = root.shadowRoot.querySelector('input');
+        const input = root.shadowRoot.querySelector('textarea');
         expect(input.value).toBe('hello there');
     });
     it('sets aria-label on the input from the ariaLabel prop', async () => {
         const { root } = await render(h("bs-composer", { ariaLabel: "Message" }));
-        const input = root.shadowRoot.querySelector('input');
+        const input = root.shadowRoot.querySelector('textarea');
         expect(input).toEqualAttribute('aria-label', 'Message');
     });
     it('renders consumer-supplied content in the actions-end slot, after the primary action button', async () => {
@@ -59,12 +59,53 @@ describe('bs-composer', () => {
     it('emits bsInput with the current value as the user types', async () => {
         const { root, spyOnEvent } = await render(h("bs-composer", null));
         const spy = spyOnEvent('bsInput');
-        const input = root.shadowRoot.querySelector('input');
+        const input = root.shadowRoot.querySelector('textarea');
         input.value = 'a';
         input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
         expect(spy).toHaveReceivedEventTimes(1);
         expect(spy).toHaveReceivedEventDetail('a');
     });
+    describe('auto-grow', () => {
+        it('grows taller as multi-line content is typed', async () => {
+            const { root } = await render(h("bs-composer", null));
+            const textarea = root.shadowRoot.querySelector('textarea');
+            const oneLineHeight = textarea.getBoundingClientRect().height;
+            textarea.value = 'line one\nline two\nline three';
+            textarea.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            const threeLineHeight = textarea.getBoundingClientRect().height;
+            expect(threeLineHeight).toBeGreaterThan(oneLineHeight);
+        });
+        it('caps growth at --bs-composer-input-max-lines and scrolls internally beyond that', async () => {
+            const { root } = await render(h("bs-composer", null));
+            const textarea = root.shadowRoot.querySelector('textarea');
+            const lineHeight = textarea.getBoundingClientRect().height;
+            const fifteenLines = Array.from({ length: 15 }, (_, i) => `line ${i}`).join('\n');
+            textarea.value = fifteenLines;
+            textarea.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            const cappedHeight = textarea.getBoundingClientRect().height;
+            // 10 lines' worth of height, not 15 -- the default max-lines is 10 (see bs-composer.css).
+            expect(cappedHeight).toBeCloseTo(lineHeight * 10, 0);
+            expect(textarea.scrollHeight).toBeGreaterThan(textarea.clientHeight);
+        });
+        it('resizes to fit an initial multi-line value prop, not just user typing', async () => {
+            // Measure each render's height before the other render() call runs -- a second render() in
+            // the same test can detach the first instance from the layout tree, which would make its
+            // getBoundingClientRect() report 0 rather than its real (but by-then-detached) height.
+            const single = await render(h("bs-composer", { value: "one line" }));
+            const singleLineHeight = single.root.shadowRoot.querySelector('textarea').getBoundingClientRect().height;
+            const multi = await render(h("bs-composer", { value: 'line one\nline two\nline three' }));
+            const multiLineHeight = multi.root.shadowRoot.querySelector('textarea').getBoundingClientRect().height;
+            expect(multiLineHeight).toBeGreaterThan(singleLineHeight);
+        });
+        it('re-runs the resize when the value prop is updated programmatically (not via typing)', async () => {
+            const { root, setProps, waitForChanges } = await render(h("bs-composer", { value: "one line" }));
+            const textarea = root.shadowRoot.querySelector('textarea');
+            const oneLineHeight = textarea.getBoundingClientRect().height;
+            await setProps({ value: 'line one\nline two\nline three\nline four' });
+            await waitForChanges();
+            expect(textarea.getBoundingClientRect().height).toBeGreaterThan(oneLineHeight);
+        });
+    });
     it('emits bsAttach when the attach button is clicked', async () => {
         const { root, spyOnEvent } = await render(h("bs-composer", null));
         const spy = spyOnEvent('bsAttach');
@@ -107,7 +148,7 @@ describe('bs-composer', () => {
     describe('state="disabled"', () => {
         it('natively disables both the mic and action buttons and the text input', async () => {
             const { root } = await render(h("bs-composer", { state: "disabled" }));
-            expect(root.shadowRoot.querySelector('input')).toHaveAttribute('disabled');
+            expect(root.shadowRoot.querySelector('textarea')).toHaveAttribute('disabled');
             expect(root.shadowRoot.querySelector('[part="mic"]')).toHaveAttribute('disabled');
             expect(root.shadowRoot.querySelector('[part="action"]')).toHaveAttribute('disabled');
         });

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

@@ -22,6 +22,8 @@
   --bs-composer-subtle-pressed: var(--bs-color-neutral-container-pressed);
 
   --bs-composer-waveform-color: var(--bs-border-default);
+
+  --bs-composer-input-max-lines: 10;
 }
 
 .bs-composer {
@@ -62,12 +64,25 @@
 .bs-composer__input {
   flex: 1;
   min-width: 0;
+  box-sizing: border-box;
+  /* Browsers apply their own default padding to <textarea> (Chromium: 2px) -- zero it out so the
+     auto-grow height math (line-height * number of lines) isn't thrown off by unaccounted-for
+     padding. */
+  padding: 0;
   border: none;
   outline: none;
+  resize: none;
   background: transparent;
   color: var(--bs-input-text);
   font-family: inherit;
   font-size: var(--bs-font-size-md);
+  /* Explicit, not the textarea's default line-height -- the auto-grow max-height below is computed
+     in terms of this exact value times --bs-composer-input-max-lines, so it has to be pinned down. */
+  line-height: calc(var(--bs-line-height-body-md) * 1px);
+  /* Grows with content (see bs-composer.tsx's resizeInput) up to this many lines' worth of height,
+     then scrolls internally instead of growing the whole composer further. */
+  max-height: calc(var(--bs-composer-input-max-lines) * var(--bs-line-height-body-md) * 1px);
+  overflow-y: auto;
 }
 
 .bs-composer__input::placeholder {

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

@@ -37,7 +37,7 @@ const WAVEFORM_BAR_HEIGHTS = [
  *   roughly match `--bs-composer-button-size` to align visually.
  * @part attachments - The wrapper around the `attachments` slot.
  * @part attach - The "+" attach button.
- * @part input - The native text `<input>`.
+ * @part input - The native text `<textarea>`.
  * @part mic - The secondary icon button (microphone, or the stop-recording square while `state="recording"`).
  * @part action - The primary circular action button (send, stop, or confirm depending on `state`).
  * @prop --bs-composer-radius - Corner radius of the container. Aliased to `--bs-border-radius-150`.
@@ -57,9 +57,11 @@ const WAVEFORM_BAR_HEIGHTS = [
  * @prop --bs-composer-mic-icon-disabled - Aliased to `--bs-icon-disabled`.
  * @prop --bs-composer-subtle-hover - Background of the attach/mic buttons on hover (subtle-button treatment, same as `bs-button`'s `subtle` variant). Aliased to `--bs-color-neutral-container`.
  * @prop --bs-composer-subtle-pressed - Background of the attach/mic buttons when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+ * @prop --bs-composer-input-max-lines - How many lines the text field grows to before scrolling internally instead of growing further. Aliased to `10`.
  */
 export class BsComposer {
     el;
+    inputEl;
     /**
      * Which flavor of composer this is: changes the *default* placeholder text (set `placeholder`
      * directly to override it) and, per the Figma design, renders the container border dashed
@@ -70,7 +72,12 @@ export class BsComposer {
     /** Overrides the variant's default placeholder. */
     placeholder;
     /** Current text value. Native `input` events don't cross the Shadow DOM boundary, so this
-     * component re-dispatches them as a `bsInput` custom event instead. */
+     * component re-dispatches them as a `bsInput` custom event instead.
+     *
+     * The field is a `<textarea>` (not a single-line `<input>`) that grows with its content, up to
+     * `--bs-composer-input-max-lines` (10 by default) -- beyond that it scrolls internally instead
+     * of growing further. Setting `value` as a prop (not just typing) also re-triggers the resize,
+     * so e.g. programmatically clearing the field after submit correctly shrinks it back down. */
     value = '';
     /**
      * Which of the four mutually-exclusive composer states to render: `idle` (send, enabled),
@@ -107,11 +114,38 @@ export class BsComposer {
     componentWillLoad() {
         this.hasAttachments = Array.from(this.el.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === 'attachments');
     }
+    componentDidLoad() {
+        this.resizeInput();
+    }
+    /** Re-runs the auto-grow calculation after every re-render -- notably including a `value` prop
+     * change from the outside (e.g. a consumer clearing the field after submit, or pre-filling it),
+     * not just while the user is typing. This has to be `componentDidUpdate`, not a `@Watch('value')`
+     * callback: `@Watch` fires as soon as the prop is reassigned, which is BEFORE Stencil's next
+     * render actually pushes the new value into the textarea's DOM `.value` -- reading `scrollHeight`
+     * at that point still reflects the OLD content, so the resize would silently no-op. */
+    componentDidUpdate() {
+        this.resizeInput();
+    }
+    /**
+     * Grows the textarea to fit its content, up to `--bs-composer-input-max-lines` worth of height
+     * (CSS `max-height` clamps the visual result and `overflow-y: auto` takes over beyond that --
+     * see bs-composer.css). Resetting `height` to `auto` first is required before reading
+     * `scrollHeight`, otherwise a shrinking edit (e.g. deleting a line) would never shrink the
+     * textarea back down -- `scrollHeight` only ever reports the larger of "current height" and
+     * "content height" if the height isn't cleared first.
+     */
+    resizeInput() {
+        if (!this.inputEl)
+            return;
+        this.inputEl.style.height = 'auto';
+        this.inputEl.style.height = `${this.inputEl.scrollHeight}px`;
+    }
     onAttachmentsSlotchange = (ev) => {
         this.hasAttachments = ev.target.assignedNodes().length > 0;
     };
     onInput = (ev) => {
         const value = ev.target.value;
+        this.resizeInput();
         this.bsInput.emit(value);
     };
     onAttachClick = () => {
@@ -149,7 +183,7 @@ export class BsComposer {
         const placeholder = this.placeholder ?? DEFAULT_PLACEHOLDERS[this.variant];
         const disabled = this.state === 'disabled';
         const recording = this.state === 'recording';
-        return (h("div", { key: '6215ac865d4df3984f1f0aee90ecd430d138aab3', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '93232e0bc2112d2e774b6f276aca7e392a4c9a10', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: 'd169cece5b8924396dc1b0ed01b1eec34d18fa7a', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: 'bbe77f36bf48b50a2555502df2d19d38e132279a', class: "bs-composer__text-row" }, h("input", { key: '1f15cd9bf4fc0861390709d1bdfc780866432601', part: "input", class: "bs-composer__input", type: "text", value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput })), h("div", { key: '7dccc69d8182c63d0c817d0cb688df17925eb40d', class: "bs-composer__controls-row" }, h("button", { key: '30a209358b6b1a2af6412cbcf83ab6088a610ac8', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: '37ad5b75cc1358649fe99f68a99b391a7cf9ec04' })), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), h("button", { key: '86e9ba5f61901274c12f71cdc1c2518becf37ac5', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? 'Stop recording' : 'Start voice input', disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null)), h("button", { key: '13d9f765e69b896cb6697fcb74c1f99efa4fe4a0', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '4aa85ea3ba7f515095c0a8c2091a219e13de38e3', name: "actions-end" }))));
+        return (h("div", { key: 'ee8e0a250798b3b5f9da6acde497779581c3b9ca', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: 'fe37e3bd240379513c97022b77635121ae100826', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: 'c6237cef8ebf742d6a68d513bd4366226317ec43', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: 'e88d294aba83e6a4c11f35095ae4efd58aeb9586', class: "bs-composer__text-row" }, h("textarea", { key: 'c6a123b0134e74fed67ec590a7ee9c0eaa238318', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput })), h("div", { key: 'aab617b78bfd3bcd33d43f08669f6f1688238388', class: "bs-composer__controls-row" }, h("button", { key: 'db8147a8841c08786c725052fdbaa366718c9a2e', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: 'cc13f52bfc496bd2a530012917b098fe10dff27b' })), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), h("button", { key: '372d2751ea5dab5793314aa4469ef80ab28536a5', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? 'Stop recording' : 'Start voice input', disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null)), h("button", { key: '4694605f9e970097290d0eabbc1d4815c3b3bfe2', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '71976baf242f384a2c69ef8561dda47d0a3739ae', name: "actions-end" }))));
     }
     static get is() { return "bs-composer"; }
     static get encapsulation() { return "shadow"; }
@@ -223,7 +257,7 @@ export class BsComposer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Current text value. Native `input` events don't cross the Shadow DOM boundary, so this\ncomponent re-dispatches them as a `bsInput` custom event instead."
+                    "text": "Current text value. Native `input` events don't cross the Shadow DOM boundary, so this\ncomponent re-dispatches them as a `bsInput` custom event instead.\n\nThe field is a `<textarea>` (not a single-line `<input>`) that grows with its content, up to\n`--bs-composer-input-max-lines` (10 by default) -- beyond that it scrolls internally instead\nof growing further. Setting `value` as a prop (not just typing) also re-triggers the resize,\nso e.g. programmatically clearing the field after submit correctly shrinks it back down."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/bs-composer-status-banner/bs-composer-status-banner.cmp.test.js

@@ -1,10 +1,56 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
 describe('bs-composer-status-banner', () => {
-    it('renders the message and a default clock icon', async () => {
+    it('renders the message and a default icon', async () => {
         const { root } = await render(h("bs-composer-status-banner", { message: "Something went wrong" }));
         expect(root).toHaveTextContent('Something went wrong');
         expect(root.shadowRoot.querySelector('[part="icon"] svg')).not.toBeNull();
     });
+    describe('accessibility', () => {
+        it('sets role="alert" for type="error" (the default)', async () => {
+            const { root } = await render(h("bs-composer-status-banner", null));
+            expect(root.shadowRoot.querySelector('.bs-composer-status-banner')).toEqualAttribute('role', 'alert');
+        });
+        it('sets role="alert" for type="warning"', async () => {
+            const { root } = await render(h("bs-composer-status-banner", { type: "warning" }));
+            expect(root.shadowRoot.querySelector('.bs-composer-status-banner')).toEqualAttribute('role', 'alert');
+        });
+        it('sets role="status" for type="info"', async () => {
+            const { root } = await render(h("bs-composer-status-banner", { type: "info" }));
+            expect(root.shadowRoot.querySelector('.bs-composer-status-banner')).toEqualAttribute('role', 'status');
+        });
+        it('sets role="status" for type="neutral"', async () => {
+            const { root } = await render(h("bs-composer-status-banner", { type: "neutral" }));
+            expect(root.shadowRoot.querySelector('.bs-composer-status-banner')).toEqualAttribute('role', 'status');
+        });
+    });
+    describe('default icon per type', () => {
+        it('shows the warning-triangle icon for type="error"', async () => {
+            const { root } = await render(h("bs-composer-status-banner", { type: "error" }));
+            const svg = root.shadowRoot.querySelector('[part="icon"] svg');
+            expect(svg.querySelector('circle[r="0.75"]')).not.toBeNull();
+        });
+        it('shows the warning-triangle icon for type="warning"', async () => {
+            const { root } = await render(h("bs-composer-status-banner", { type: "warning" }));
+            const svg = root.shadowRoot.querySelector('[part="icon"] svg');
+            expect(svg.querySelector('circle[r="0.75"]')).not.toBeNull();
+        });
+        it('shows the clock icon for type="info"', async () => {
+            const { root } = await render(h("bs-composer-status-banner", { type: "info" }));
+            const svg = root.shadowRoot.querySelector('[part="icon"] svg');
+            expect(svg.querySelector('circle[r="7.25"]')).not.toBeNull();
+        });
+        it('shows the clock icon for type="neutral"', async () => {
+            const { root } = await render(h("bs-composer-status-banner", { type: "neutral" }));
+            const svg = root.shadowRoot.querySelector('[part="icon"] svg');
+            expect(svg.querySelector('circle[r="7.25"]')).not.toBeNull();
+        });
+        it('a slotted icon still overrides the type-based default', async () => {
+            const { root } = await render(h("bs-composer-status-banner", { type: "error" }, h("svg", { slot: "icon", class: "custom-icon" })));
+            const slot = root.shadowRoot.querySelector('slot[name="icon"]');
+            expect(slot.assignedElements()).toHaveLength(1);
+            expect(slot.assignedElements()[0]).toHaveClass('custom-icon');
+        });
+    });
     it('does not render the icon when showIcon is false', async () => {
         const { root } = await render(h("bs-composer-status-banner", { showIcon: false }));
         expect(root.shadowRoot.querySelector('[part="icon"]')).toBeNull();

package/dist/collection/components/bs-composer-status-banner/bs-composer-status-banner.js

@@ -13,6 +13,13 @@ import { h } from "@stencil/core";
  * - A toast/snackbar notification unrelated to the composer -- this component is not
  *   self-dismissing and has no positioning of its own (it's a static block, not an overlay).
  *
+ * ## Accessibility
+ * Sets `role="status"` for `type="info"`/`type="neutral"` and `role="alert"` for
+ * `type="error"`/`type="warning"` on its own root element automatically -- no opt-in prop needed.
+ * Both roles carry implicit ARIA live-region semantics (`status` is polite, `alert` is assertive),
+ * so a screen reader announces the message as soon as this banner is inserted into the DOM,
+ * without a consumer having to remember to add `role`/`aria-live` themselves.
+ *
  * @slot icon - Overrides the default leading icon. Only rendered when `showIcon` is true.
  * @part icon - The leading icon wrapper.
  * @part message - The message text.
@@ -87,8 +94,19 @@ export class BsComposerStatusBanner {
     onCloseClick = () => {
         this.bsClose.emit();
     };
+    /** `error`/`warning` need immediate, interrupting announcement (`alert`); `info`/`neutral` only
+     * need a polite one (`status`) -- matches the Figma Accessibility guidelines for this component. */
+    roleForType() {
+        return this.type === 'error' || this.type === 'warning' ? 'alert' : 'status';
+    }
+    /** Clock reads as "waiting/pending", a reasonable default for info/neutral notices -- but is a
+     * weak match for error/warning, which get a warning-triangle icon instead. Either default is
+     * still overridable via the `icon` slot. */
+    renderDefaultIcon() {
+        return this.type === 'error' || this.type === 'warning' ? h(WarningIcon, null) : h(ClockIcon, null);
+    }
     render() {
-        return (h("div", { key: '9444cd90c8a529a7a3155a27303ca4af3abcb733', class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '7a25dd42f4941c928e7d21a83e66c46bd4a28f7c', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: 'e21ef754303df6c0bcb6cb4d6a0f9cdd2453a347', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '8df995de6f4553178552fb2905aa95290741328d', name: "icon" }, h(ClockIcon, { key: 'c2f25db5e1bb964ad4ec2ded6018c8692074bc19' })))), h("p", { key: 'a57b869260c3fc87e3ab50f9af14558047f70955', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '6fa67847f17e3c83705f1ddf888c89e3cf9d0752', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '3cc3420291a3687d579d18f365154c0db1c4a79f', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, h(CloseIcon, { key: '14617eacef6a6ab4e6056d115dcf8929481eeeee' })))));
+        return (h("div", { key: 'f8f5ae2de96dc534f4e9c9a5f46fe28e3da57939', role: this.roleForType(), class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '28d77b1058c375afaba827f4dd4563b6cff058e4', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: 'aaa867907b3610a1e2a9be087d2d077cd1252503', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '1d0db69c42e4a23978655e86e16b9624f05a8edb', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: 'bdad9aaf7efa1d96afd07c9d214d7a2ee369c010', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: 'cf949f6cada1c35d91ebc7ec81c56ea9e9255c30', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '5108346a07f7bb3c23ea94c213f395212497b4e8', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, h(CloseIcon, { key: '7651748165308c30394ea312f227ff83eb7b1d1a' })))));
     }
     static get is() { return "bs-composer-status-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -267,4 +285,5 @@ export class BsComposerStatusBanner {
     }
 }
 const ClockIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("circle", { cx: "10", cy: "10", r: "7.25", stroke: "currentColor", "stroke-width": "1.3" }), h("path", { d: "M10 5.83V10L12.5 11.67", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const WarningIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M10 3L18 17H2L10 3Z", stroke: "currentColor", "stroke-width": "1.3", "stroke-linejoin": "round" }), h("path", { d: "M10 8V11.5", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round" }), h("circle", { cx: "10", cy: "14", r: "0.75", fill: "currentColor" })));
 const CloseIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M15 5L5 15", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M15 15L5 5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-data-table/bs-data-table.js

@@ -54,11 +54,11 @@ export class BsDataTable {
         this.bsRowSelect.emit({ id: row.id, selected });
     };
     render() {
-        return (h("table", { key: 'fac4ff9ccea077cebdb9a7e80759234b08f39420', part: "table", class: "bs-data-table" }, h("thead", { key: 'ffdf80f1945ac824cabaf2c405d7f46a60bada13', part: "head" }, h("tr", { key: 'a7105ca41522ffa29234058b8a77e7ecd6c51451' }, this.selectable && h("th", { key: '7388b969f17245485f096acc8eebca17a2c1295f', class: "bs-data-table__select-col" }), this.columns.map(column => {
+        return (h("table", { key: 'fa798fc4873097b91f1e5527836c9607630535ad', part: "table", class: "bs-data-table" }, h("thead", { key: '4ce731b46239412e2f87167ca678c0a9376a67dd', part: "head" }, h("tr", { key: '74fd0fb91c96b62e7ea97f85fb9e215ab5883af5' }, this.selectable && h("th", { key: '595ffb64be9ddb12851acc704e503653c623a385', class: "bs-data-table__select-col" }), this.columns.map(column => {
             const isSorted = this.sortColumn === column.key;
             const ariaSort = column.sortable ? (isSorted ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none') : undefined;
             return (h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
-        }))), h("tbody", { key: '47041704bc1fcde4047a2cf73f0cab402eafbc61', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
+        }))), h("tbody", { key: '1e46254b85803cbd3925b6a4bbc9ca0205816753', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
         // cellRenderer is a developer-supplied, trusted function (JS-property-only, never
         // derived from untrusted input) -- its HTML output is intentionally not escaped,
         // same trust model as React's dangerouslySetInnerHTML.

package/dist/collection/components/{bs-modal/bs-modal.cmp.test.js → bs-dialog/bs-dialog.cmp.test.js}

@@ -1,15 +1,15 @@
 import { render, h, describe, it, expect, afterEach } from "@stencil/vitest";
-describe('bs-modal', () => {
+describe('bs-dialog', () => {
     afterEach(() => {
         document.querySelectorAll('button[data-test-trigger]').forEach(el => el.remove());
     });
     it('renders nothing when closed (default)', async () => {
-        const { root } = await render(h("bs-modal", { heading: "Confirm booking" }, "Body"));
+        const { root } = await render(h("bs-dialog", { heading: "Confirm booking" }, "Body"));
         expect(root.shadowRoot.querySelector('[part="backdrop"]')).toBeNull();
         expect(root.shadowRoot.querySelector('[part="dialog"]')).toBeNull();
     });
     it('renders the backdrop and dialog with correct a11y attributes when open', async () => {
-        const { root } = await render(h("bs-modal", { open: true, heading: "Confirm booking" }, "Body content"));
+        const { root } = await render(h("bs-dialog", { open: true, heading: "Confirm booking" }, "Body content"));
         const backdrop = root.shadowRoot.querySelector('[part="backdrop"]');
         const dialog = root.shadowRoot.querySelector('[part="dialog"]');
         expect(backdrop).toBeTruthy();
@@ -21,27 +21,71 @@ describe('bs-modal', () => {
     });
     ['sm', 'md', 'lg'].forEach(size => {
         it(`applies the "${size}" size class to the dialog`, async () => {
-            const { root } = await render(h("bs-modal", { open: true, size: size }, "Body"));
+            const { root } = await render(h("bs-dialog", { open: true, size: size }, "Body"));
             const dialog = root.shadowRoot.querySelector('[part="dialog"]');
-            expect(dialog).toHaveClass(`bs-modal__dialog--${size}`);
+            expect(dialog).toHaveClass(`bs-dialog__dialog--${size}`);
         });
     });
     it('defaults to the "md" size', async () => {
-        const { root } = await render(h("bs-modal", { open: true }, "Body"));
+        const { root } = await render(h("bs-dialog", { open: true }, "Body"));
         const dialog = root.shadowRoot.querySelector('[part="dialog"]');
-        expect(dialog).toHaveClass('bs-modal__dialog--md');
+        expect(dialog).toHaveClass('bs-dialog__dialog--md');
     });
     it('only shows the footer bar when the footer slot has content', async () => {
-        const { root: withoutFooter } = await render(h("bs-modal", { open: true }, "Body"));
+        const { root: withoutFooter } = await render(h("bs-dialog", { open: true }, "Body"));
         const footerWithout = withoutFooter.shadowRoot.querySelector('[part="footer"]');
-        expect(footerWithout).not.toHaveClass('bs-modal__footer--visible');
-        const { root: withFooter } = await render(h("bs-modal", { open: true }, "Body", h("button", { slot: "footer" }, "Confirm")));
+        expect(footerWithout).not.toHaveClass('bs-dialog__footer--visible');
+        const { root: withFooter } = await render(h("bs-dialog", { open: true }, "Body", h("button", { slot: "footer" }, "Confirm")));
         const footerWith = withFooter.shadowRoot.querySelector('[part="footer"]');
-        expect(footerWith).toHaveClass('bs-modal__footer--visible');
+        expect(footerWith).toHaveClass('bs-dialog__footer--visible');
         expect(withFooter).toHaveTextContent('Confirm');
     });
+    describe('image slot', () => {
+        it('has no visible image wrapper and an inline close button when the image slot is empty', async () => {
+            const { root } = await render(h("bs-dialog", { open: true }, "Body"));
+            const image = root.shadowRoot.querySelector('[part="image"]');
+            expect(image).not.toHaveClass('bs-dialog__image--visible');
+            const header = root.shadowRoot.querySelector('[part="header"]');
+            expect(header.querySelector('[part="close"]')).not.toBeNull();
+            expect(root.shadowRoot.querySelector('.bs-dialog__close--floating')).toBeNull();
+        });
+        it('shows the image wrapper and floats the close button when the image slot has content', async () => {
+            const { root } = await render(h("bs-dialog", { open: true }, "Body", h("img", { slot: "image", src: "hero.jpg", alt: "" })));
+            const image = root.shadowRoot.querySelector('[part="image"]');
+            expect(image).toHaveClass('bs-dialog__image--visible');
+            const floating = root.shadowRoot.querySelector('.bs-dialog__close--floating');
+            expect(floating).not.toBeNull();
+            const header = root.shadowRoot.querySelector('[part="header"]');
+            expect(header.querySelector('[part="close"]')).toBeNull();
+            // Exactly one close button total, not both the floating and inline variants at once.
+            expect(root.shadowRoot.querySelectorAll('[part="close"]').length).toBe(1);
+        });
+    });
+    describe('centered layout', () => {
+        it('reflects the centered attribute, defaulting to false', async () => {
+            const { root } = await render(h("bs-dialog", { open: true }, "Body"));
+            expect(root).not.toHaveAttribute('centered');
+        });
+        it('renders an icon wrapper, centers the header/body, and floats the close button', async () => {
+            const { root } = await render(h("bs-dialog", { open: true, centered: true, heading: "All set" }, "Body", h("span", { slot: "icon" }, "\u2713")));
+            expect(root).toHaveAttribute('centered');
+            const icon = root.shadowRoot.querySelector('[part="icon"]');
+            expect(icon).not.toBeNull();
+            expect(icon).toHaveClass('bs-dialog__icon--visible');
+            const header = root.shadowRoot.querySelector('[part="header"]');
+            expect(header).toHaveClass('bs-dialog__header--centered');
+            const body = root.shadowRoot.querySelector('[part="body"]');
+            expect(body).toHaveClass('bs-dialog__body--centered');
+            expect(header.querySelector('[part="close"]')).toBeNull();
+            expect(root.shadowRoot.querySelector('.bs-dialog__close--floating')).not.toBeNull();
+        });
+        it('does not render an icon wrapper at all when not centered, even with a slotted icon', async () => {
+            const { root } = await render(h("bs-dialog", { open: true }, "Body", h("span", { slot: "icon" }, "\u2713")));
+            expect(root.shadowRoot.querySelector('[part="icon"]')).toBeNull();
+        });
+    });
     it('closes and emits bsClose when the close button is clicked', async () => {
-        const { root, spyOnEvent, waitForChanges } = await render(h("bs-modal", { open: true, heading: "Confirm booking" }, "Body"));
+        const { root, spyOnEvent, waitForChanges } = await render(h("bs-dialog", { open: true, heading: "Confirm booking" }, "Body"));
         const closeSpy = spyOnEvent('bsClose');
         const closeButton = root.shadowRoot.querySelector('[part="close"]');
         closeButton.click();
@@ -51,7 +95,7 @@ describe('bs-modal', () => {
         expect(root.shadowRoot.querySelector('[part="dialog"]')).toBeNull();
     });
     it('closes when the backdrop itself is clicked, but not when the dialog inside it is clicked', async () => {
-        const { root, spyOnEvent, waitForChanges } = await render(h("bs-modal", { open: true }, "Body"));
+        const { root, spyOnEvent, waitForChanges } = await render(h("bs-dialog", { open: true }, "Body"));
         const closeSpy = spyOnEvent('bsClose');
         const dialog = root.shadowRoot.querySelector('[part="dialog"]');
         dialog.click();
@@ -65,7 +109,7 @@ describe('bs-modal', () => {
         expect(root).not.toHaveAttribute('open');
     });
     it('closes on Escape keydown while open', async () => {
-        const { root, spyOnEvent, waitForChanges } = await render(h("bs-modal", { open: true }, "Body"));
+        const { root, spyOnEvent, waitForChanges } = await render(h("bs-dialog", { open: true }, "Body"));
         const closeSpy = spyOnEvent('bsClose');
         document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
         await waitForChanges();
@@ -73,14 +117,14 @@ describe('bs-modal', () => {
         expect(root).not.toHaveAttribute('open');
     });
     it('does not react to Escape when closed', async () => {
-        const { spyOnEvent, waitForChanges } = await render(h("bs-modal", null, "Body"));
+        const { spyOnEvent, waitForChanges } = await render(h("bs-dialog", null, "Body"));
         const closeSpy = spyOnEvent('bsClose');
         document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
         await waitForChanges();
         expect(closeSpy.length).toBe(0);
     });
     it('moves focus into the dialog when opened', async () => {
-        const { root } = await render(h("bs-modal", { open: true }, "Body"));
+        const { root } = await render(h("bs-dialog", { open: true }, "Body"));
         const dialog = root.shadowRoot.querySelector('[part="dialog"]');
         expect(root.shadowRoot.activeElement).toBe(dialog);
     });
@@ -89,7 +133,7 @@ describe('bs-modal', () => {
         outside.setAttribute('data-test-trigger', '');
         outside.textContent = 'outside';
         document.body.appendChild(outside);
-        const { root } = await render(h("bs-modal", { open: true }, "Body"));
+        const { root } = await render(h("bs-dialog", { open: true }, "Body"));
         const dialog = root.shadowRoot.querySelector('[part="dialog"]');
         outside.focus();
         expect(root.shadowRoot.activeElement).toBe(dialog);
@@ -97,11 +141,11 @@ describe('bs-modal', () => {
     it('captures the previously focused element on open and restores focus to it on close', async () => {
         const trigger = document.createElement('button');
         trigger.setAttribute('data-test-trigger', '');
-        trigger.textContent = 'open modal';
+        trigger.textContent = 'open dialog';
         document.body.appendChild(trigger);
         trigger.focus();
         expect(document.activeElement).toBe(trigger);
-        const { root, setProps, waitForChanges } = await render(h("bs-modal", null, "Body"));
+        const { root, setProps, waitForChanges } = await render(h("bs-dialog", null, "Body"));
         await setProps({ open: true });
         const dialog = root.shadowRoot.querySelector('[part="dialog"]');
         expect(root.shadowRoot.activeElement).toBe(dialog);