@brandsync/wc 0.0.10 → 0.0.12

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

@@ -0,0 +1,265 @@
+import { h } from "@stencil/core";
+/**
+ * A single checkbox with its label, for a binary choice or one item within a group of independent
+ * choices.
+ *
+ * ## When to use
+ * - A single standalone binary setting (e.g. "Remember me", "I agree to the terms").
+ * - One item within a set of independent, non-exclusive choices (a checkbox group/list).
+ * - `indeterminate` for a "select all" checkbox representing a partially-selected group.
+ *
+ * ## When not to use
+ * - A single mutually-exclusive choice from a set -- use a radio group instead.
+ * - An on/off setting that takes effect immediately (no explicit form submission) -- use `bs-switch`.
+ *
+ * @slot - Default slot: the label text.
+ * @part box - The visual checkbox square.
+ * @part icon - The check/minus icon shown inside the box when `checked` or `indeterminate`.
+ * @part label - The label text wrapper.
+ */
+// Note: this component's CSS Custom Properties (--bs-checkbox-*) are documented via @prop comments
+// in bs-checkbox.css, not here -- Stencil's docs generator only parses @prop out of CSS file
+// comments, not the class-level JSDoc (see bs-input.tsx's equivalent note).
+export class BsCheckbox {
+    el;
+    inputEl;
+    /** Sizing scale. Controls the box's width/height and border width; corner radius is constant
+     * across all sizes. */
+    size = 'lg';
+    /** Whether the checkbox is checked. Mutable so clicking the label/input toggles it directly.
+     * When `indeterminate` is also true, `indeterminate` wins visually (shows the minus icon)
+     * regardless of this value -- same as native checkboxes. */
+    checked = false;
+    /** Whether the checkbox is in the indeterminate ("partially selected") state -- shows a minus
+     * icon instead of a check, and takes visual precedence over `checked`. Unlike `checked`, native
+     * checkboxes have no `indeterminate` HTML attribute; it can only be set as a JS property on the
+     * element. This `@Prop` still works as an attribute for the *host* (`<bs-checkbox>`) since that's
+     * this component's own reflected state, not the native control's -- the native `<input>` inside
+     * has its `.indeterminate` property set imperatively in `componentDidLoad`/`componentDidUpdate`. */
+    indeterminate = false;
+    /** Disables the checkbox: sets the native `disabled` attribute, suppresses hover/focus styling,
+     * and prevents toggling. */
+    disabled = false;
+    /** Applies the error border/label-color treatment. This component's spec has no error message
+     * text of its own (unlike `bs-input`'s `error: string`), so it's a plain boolean. */
+    error = false;
+    /**
+     * Accessible name for the checkbox. Required whenever the default (label) slot is empty (e.g. a
+     * bare "select row" checkbox in a table) -- without it, the internal native `<input>` has no
+     * accessible name at all. Setting `aria-label` directly on the `<bs-checkbox>` host does NOT
+     * work for this: that attribute stays on the light-DOM host and is never forwarded into the
+     * shadow DOM by the browser, so the actual focusable element (the native `<input>` inside) stays
+     * nameless. This prop exists specifically to bridge that gap -- same pattern as `bs-button`'s and
+     * `bs-tab`'s identical `ariaLabel` prop, both of which explicitly bind it onto their own internal
+     * focusable element for the same reason.
+     */
+    ariaLabel = null;
+    /** Emitted when the checked state changes via user interaction, with the new `checked` value. */
+    bsChange;
+    /** Keeps the native input's `.indeterminate` JS property in sync -- this can't be expressed as a
+     * JSX attribute in Stencil, it must be set imperatively on the element. */
+    onIndeterminateChange() {
+        if (this.inputEl) {
+            this.inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    componentDidLoad() {
+        if (this.inputEl) {
+            this.inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    componentDidUpdate() {
+        if (this.inputEl) {
+            this.inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    onChange = (ev) => {
+        const checked = ev.target.checked;
+        this.checked = checked;
+        // Clicking a native checkbox always clears indeterminate, regardless of what it was before --
+        // match that here so the visual state (icon) tracks the real native behavior.
+        this.indeterminate = false;
+        this.bsChange.emit(checked);
+    };
+    render() {
+        const showIcon = this.checked || this.indeterminate;
+        const boxClasses = [
+            'bs-checkbox__box',
+            `bs-checkbox__box--${this.size}`,
+            showIcon ? 'bs-checkbox__box--selected' : '',
+            this.disabled ? 'bs-checkbox__box--disabled' : '',
+            this.error ? 'bs-checkbox__box--error' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (h("label", { key: '04fb1da55eb6a0e91fd705db9217f5e2c0992f89', class: `bs-checkbox ${this.disabled ? 'bs-checkbox--disabled' : ''}` }, h("input", { key: '06b83f45f7dfe52cd81eab603742d04d74135c7a', ref: el => (this.inputEl = el), class: "bs-checkbox__input", type: "checkbox", checked: this.checked, disabled: this.disabled, "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'a8a8b45074eef7cfcb5f579eff0fb7b27b71d25a', part: "box", class: boxClasses }, showIcon && (h("svg", { key: '78cf717b4cd7fbf8c56a76788a22c8aecf7fcc28', part: "icon", class: "bs-checkbox__icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, this.indeterminate ? (h("path", { d: "M3 8H13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })) : (h("path", { d: "M3 8.5L6.2 11.5L13 4.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("span", { key: '2d78205d8091c89ac3a6d07cbb74b6d6a9c09971', part: "label", class: "bs-checkbox__label" }, h("slot", { key: '7da0c6d1f84b788b242b95b11d78e566f482b48c' }))));
+    }
+    static get is() { return "bs-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsCheckboxSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "BsCheckboxSize": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-checkbox/bs-checkbox.tsx",
+                            "id": "src/components/bs-checkbox/bs-checkbox.tsx::BsCheckboxSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sizing scale. Controls the box's width/height and border width; corner radius is constant\nacross all sizes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'lg'"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is checked. Mutable so clicking the label/input toggles it directly.\nWhen `indeterminate` is also true, `indeterminate` wins visually (shows the minus icon)\nregardless of this value -- same as native checkboxes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is in the indeterminate (\"partially selected\") state -- shows a minus\nicon instead of a check, and takes visual precedence over `checked`. Unlike `checked`, native\ncheckboxes have no `indeterminate` HTML attribute; it can only be set as a JS property on the\nelement. This `@Prop` still works as an attribute for the *host* (`<bs-checkbox>`) since that's\nthis component's own reflected state, not the native control's -- the native `<input>` inside\nhas its `.indeterminate` property set imperatively in `componentDidLoad`/`componentDidUpdate`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the checkbox: sets the native `disabled` attribute, suppresses hover/focus styling,\nand prevents toggling."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Applies the error border/label-color treatment. This component's spec has no error message\ntext of its own (unlike `bs-input`'s `error: string`), so it's a plain boolean."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the checkbox. Required whenever the default (label) slot is empty (e.g. a\nbare \"select row\" checkbox in a table) -- without it, the internal native `<input>` has no\naccessible name at all. Setting `aria-label` directly on the `<bs-checkbox>` host does NOT\nwork for this: that attribute stays on the light-DOM host and is never forwarded into the\nshadow DOM by the browser, so the actual focusable element (the native `<input>` inside) stays\nnameless. This prop exists specifically to bridge that gap -- same pattern as `bs-button`'s and\n`bs-tab`'s identical `ariaLabel` prop, both of which explicitly bind it onto their own internal\nfocusable element for the same reason."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the checked state changes via user interaction, with the new `checked` value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "indeterminate",
+                "methodName": "onIndeterminateChange"
+            }];
+    }
+}

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

@@ -0,0 +1,65 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const sizes = ['sm', 'md', 'lg'];
+const meta = {
+    title: 'Components/bs-checkbox',
+    parameters: { docs: { description: { component: componentDescription('bs-checkbox') } } },
+    render: args => html `
+    <bs-checkbox
+      size=${args.size}
+      ?checked=${args.checked}
+      .indeterminate=${args.indeterminate}
+      ?disabled=${args.disabled}
+      ?error=${args.error}
+    >
+      ${args.label}
+    </bs-checkbox>
+  `,
+    argTypes: {
+        size: { control: 'select', options: sizes, description: propDescription('bs-checkbox', 'size') },
+        checked: { control: 'boolean', description: propDescription('bs-checkbox', 'checked') },
+        indeterminate: { control: 'boolean', description: propDescription('bs-checkbox', 'indeterminate') },
+        disabled: { control: 'boolean', description: propDescription('bs-checkbox', 'disabled') },
+        error: { control: 'boolean', description: propDescription('bs-checkbox', 'error') },
+        label: { control: 'text' },
+    },
+    args: {
+        size: 'lg',
+        checked: false,
+        indeterminate: false,
+        disabled: false,
+        error: false,
+        label: 'Accept terms and conditions',
+    },
+};
+export default meta;
+export const Default = {};
+export const Checked = {
+    args: { checked: true },
+};
+export const Indeterminate = {
+    args: { indeterminate: true },
+};
+export const Disabled = {
+    args: { disabled: true },
+};
+export const DisabledChecked = {
+    name: 'Disabled + checked',
+    args: { disabled: true, checked: true },
+};
+export const Error = {
+    args: { error: true },
+};
+export const ErrorChecked = {
+    name: 'Error + checked',
+    args: { error: true, checked: true },
+};
+export const Small = {
+    args: { size: 'sm', checked: true },
+};
+export const Medium = {
+    args: { size: 'md', checked: true },
+};
+export const Large = {
+    args: { size: 'lg', checked: true },
+};

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: '5b367f64f2cfe04d7815b52d6abc3baebf46453e', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: 'f1e7dbeb16e8f2cd0b4e2345f6c5fc03bcc5177c', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '6e59f2f3857c81a132c5873d9a32dbed27eb2c02', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '79a0a03a7f66b654f5ab8379447cf00459c7a6c3', class: "bs-composer__text-row" }, h("input", { key: 'b9560af8433d186fdadd5b05368290d077c5e8ce', 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: '5b9a8edd0412e1a86efd33afae37fb73559a89f6', class: "bs-composer__controls-row" }, h("button", { key: '5c405e009e9f61902ca6623e09efa238e71737a3', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: '5832b29579d3c8c855237f286366944aeb6553f6' })), 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: 'b4006fe5d452d02d0093d1dba0b65e6f33e5a65b', 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: 'b647f1dd0c40dc795b96da5cad695300b0c9dfd3', 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: '2c78b5641091024925e84ca1a779ac1fc37fc0ae', name: "actions-end" }))));
+        return (h("div", { key: '4d6ea6241693e45065388f34f9fe2c141eb6379f', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '952853cd4a36c5dc6057186825432616c5c99b38', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '65311f5b1f1b8fd1e6c9f33741a53c94bbe292b0', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '8699568430ff2140b0869a004a253e6c01e1984f', class: "bs-composer__text-row" }, h("textarea", { key: '5505815f7bb6ff19191ffea375fcd7fb856371fd', 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: 'fd65f7928117afd583e3f1e2372cbb66305a530e', class: "bs-composer__controls-row" }, h("button", { key: '4e691d7ca567a4ece45601f47836d1ac7c5e2a1d', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: 'e363bbfcd346090dbceafd20d893af0903952223' })), 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: 'e0f113e189ec7ded494c7ef7cf91fe3e13df01bc', 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: '3603219c2c3781a9e2894142313f84dfa52c21ed', 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: '3d143aa3f254310dba537c19a6ac4c40205a405d', 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();