@brandsync/wc 1.12.1 → 1.14.0

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

@@ -82,6 +82,11 @@ export class BsComposerStatusBanner {
     showButton = false;
     /** Label for the action button, only rendered when `showButton` is true. */
     actionLabel = 'Continue';
+    /** Shows a spinner in place of the default leading icon (a custom `icon` slot still wins) and
+     * sets `aria-busy` on the banner. Use for in-progress states such as "Continuing...". */
+    loading = false;
+    /** Accessible name of the close button. */
+    closeLabel = 'Dismiss';
     /** Whether the close button is rendered. */
     allowClose = true;
     /** Fires when the action button is clicked. Only relevant when `showButton` is true. */
@@ -103,10 +108,12 @@ export class BsComposerStatusBanner {
      * weak match for error/warning, which get a warning-triangle icon instead. Either default is
      * still overridable via the `icon` slot. */
     renderDefaultIcon() {
+        if (this.loading)
+            return h(SpinnerIcon, null);
         return this.type === 'error' || this.type === 'warning' ? h(WarningIcon, null) : h(ClockIcon, null);
     }
     render() {
-        return (h("div", { key: '9e0569099d74f708f475b502625a2fd000cbbbf5', role: this.roleForType(), class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '8d6de7446b8bb53bc45ab9d4f110963425559f50', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '6f9964755ae030e577b356290ad2d972e024ace1', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '56d50ba748d0ad4cbcbcd73a6f4b8cb1a50613b8', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: 'fed8249da75a688b2f125e5f9ca1787dc885b891', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '48eb50ca73f76bfd404bbd5b2a7bce3ced2da7ac', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: 'f644669b00b8077b36ba9eb88ffffaba0e675fb4', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, h(CloseIcon, { key: '3b42ae94449658eae8e9af5617abc3268c215325' })))));
+        return (h("div", { key: '7ddbbad5af14adf35a87097ce7e7644fd9e50ec3', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '1fb9a5fb707db89056115ec0992484b310a47590', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: 'c9cf1d3be7dd33b73f8a2813295ed90e2dbc865a', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '86735a463ca03af8359ef17d971a63d5c518f587', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '046dad63d8a6b12c5c4fe766edef811d945b427f', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '3c8d3d824413b32ff596f63b579c8b7ce683af81', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '3d5dbe65b4ba7e04202fc260b0ca665a4eb3b516', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: '86efc37f964fd1440ac10cc47077605dbc0664ce' })))));
     }
     static get is() { return "bs-composer-status-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -228,6 +235,46 @@ export class BsComposerStatusBanner {
                 "attribute": "action-label",
                 "defaultValue": "'Continue'"
             },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a spinner in place of the default leading icon (a custom `icon` slot still wins) and\nsets `aria-busy` on the banner. Use for in-progress states such as \"Continuing...\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Dismiss'"
+            },
             "allowClose": {
                 "type": "boolean",
                 "mutable": false,
@@ -284,6 +331,7 @@ export class BsComposerStatusBanner {
             }];
     }
 }
+const SpinnerIcon = () => (h("svg", { class: "bs-composer-status-banner__spinner", 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-opacity": "0.25", "stroke-width": "1.5" }), h("path", { d: "M17.25 10A7.25 7.25 0 0 0 10 2.75", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
 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

@@ -28,6 +28,8 @@ export class BsDataTable {
     rows = [];
     sortColumn;
     sortDirection = 'asc';
+    /** Accessible name of the select-all checkbox in the header (when `selectable`). */
+    selectAllLabel = 'Select all rows';
     selectable = false;
     /** Optional custom cell renderer, for rich cells such as a status badge, a link or an actions
      * column. It returns an **HTML string** that is inserted into the cell as real markup
@@ -85,11 +87,11 @@ export class BsDataTable {
         }
     }
     render() {
-        return (h("table", { key: '7ea79a70148513512cdba2f8cb8d5a5c7ae09706', part: "table", class: "bs-data-table" }, h("thead", { key: 'e9cf73cbba196e9caf4b03a837866a5370c13e19', part: "head" }, h("tr", { key: 'a33fbd57f1925e34c6e7ce292b6945d2ee5c6113' }, this.selectable && (h("th", { key: '876948b66e54ae68d6aa6148c962781223fa0441', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: 'cf8f26258bcee486190e3ac4b3d5ce4715784d5f', type: "checkbox", "aria-label": "Select all rows", checked: this.selectedIds.size > 0 && this.selectedIds.size === this.rows.length, indeterminate: this.selectedIds.size > 0 && this.selectedIds.size < this.rows.length, onChange: this.onSelectAllChange })))), this.columns.map(column => {
+        return (h("table", { key: '1d9ca0e7153818331ea760d70a2e2f15b1be67bc', part: "table", class: "bs-data-table" }, h("thead", { key: 'af48bd83574fc4d358010b3091f14bc04db5f935', part: "head" }, h("tr", { key: '0cc77b6e5c46c175444b14dcfdb6c43b41a02d01' }, this.selectable && (h("th", { key: 'a8140bfad21744d05b02065d4034b85228f75da0', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: '634a2b62fb9f26b0684622c6794170aaf5080b3e', type: "checkbox", "aria-label": this.selectAllLabel, checked: this.selectedIds.size > 0 && this.selectedIds.size === this.rows.length, indeterminate: this.selectedIds.size > 0 && this.selectedIds.size < this.rows.length, onChange: this.onSelectAllChange })))), 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: '3a0c2ce6fea27797b855ee2b3c724d0e99471d28', 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: 'a90a9e866a63f9da370a6d20a4381b15bec14c82', 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.
@@ -199,6 +201,26 @@ export class BsDataTable {
                 "attribute": "sort-direction",
                 "defaultValue": "'asc'"
             },
+            "selectAllLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the select-all checkbox in the header (when `selectable`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-all-label",
+                "defaultValue": "'Select all rows'"
+            },
             "selectable": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -38,6 +38,8 @@ export class BsDialog {
      * the same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to. */
     open = false;
     heading;
+    /** Accessible name of the close button. */
+    closeLabel = 'Close';
     size = 'md';
     /** Switches to the Figma "Icon Centered" layout: heading/body text centered, the `icon` slot
      * rendered above the heading, and the close button floating top-right of the dialog instead of
@@ -134,7 +136,7 @@ export class BsDialog {
         // The close button floats (absolute, over the top of the dialog) whenever there's a hero image
         // to sit over, or the centered layout has no header row to put an inline close button in.
         const floatingClose = this.centered || this.hasImage;
-        return (h("div", { part: "backdrop", class: "bs-dialog__backdrop", onClick: this.onBackdropClick }, h("div", { ref: el => (this.dialogRef = el), tabIndex: -1, part: "dialog", class: `bs-dialog__dialog bs-dialog__dialog--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.heading }, floatingClose && (h("bs-icon-button", { part: "close", class: "bs-dialog__close--floating", variant: "neutral", size: "md", "aria-label": "Close", onClick: this.close }, h(CloseIcon, null))), h("div", { part: "image", class: `bs-dialog__image ${this.hasImage ? 'bs-dialog__image--visible' : ''}` }, h("slot", { name: "image", onSlotchange: this.onImageSlotchange })), this.centered && (h("div", { part: "icon", class: `bs-dialog__icon ${this.hasIcon ? 'bs-dialog__icon--visible' : ''}` }, h("slot", { name: "icon", onSlotchange: this.onIconSlotchange }))), h("div", { part: "header", class: `bs-dialog__header ${this.centered ? 'bs-dialog__header--centered' : ''}` }, h("span", { class: "bs-dialog__heading" }, this.heading), !floatingClose && (h("bs-icon-button", { part: "close", variant: "subtle", size: "md", "aria-label": "Close", onClick: this.close }, h(CloseIcon, null)))), h("div", { part: "body", class: `bs-dialog__body ${this.centered ? 'bs-dialog__body--centered' : ''}` }, h("slot", null)), h("div", { part: "footer", class: `bs-dialog__footer ${this.hasFooter ? 'bs-dialog__footer--visible' : ''}` }, h("slot", { name: "footer", onSlotchange: this.onFooterSlotchange })))));
+        return (h("div", { part: "backdrop", class: "bs-dialog__backdrop", onClick: this.onBackdropClick }, h("div", { ref: el => (this.dialogRef = el), tabIndex: -1, part: "dialog", class: `bs-dialog__dialog bs-dialog__dialog--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.heading }, floatingClose && (h("bs-icon-button", { part: "close", class: "bs-dialog__close--floating", variant: "neutral", size: "md", "aria-label": this.closeLabel, onClick: this.close }, h(CloseIcon, null))), h("div", { part: "image", class: `bs-dialog__image ${this.hasImage ? 'bs-dialog__image--visible' : ''}` }, h("slot", { name: "image", onSlotchange: this.onImageSlotchange })), this.centered && (h("div", { part: "icon", class: `bs-dialog__icon ${this.hasIcon ? 'bs-dialog__icon--visible' : ''}` }, h("slot", { name: "icon", onSlotchange: this.onIconSlotchange }))), h("div", { part: "header", class: `bs-dialog__header ${this.centered ? 'bs-dialog__header--centered' : ''}` }, h("span", { class: "bs-dialog__heading" }, this.heading), !floatingClose && (h("bs-icon-button", { part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: this.close }, h(CloseIcon, null)))), h("div", { part: "body", class: `bs-dialog__body ${this.centered ? 'bs-dialog__body--centered' : ''}` }, h("slot", null)), h("div", { part: "footer", class: `bs-dialog__footer ${this.hasFooter ? 'bs-dialog__footer--visible' : ''}` }, h("slot", { name: "footer", onSlotchange: this.onFooterSlotchange })))));
     }
     static get is() { return "bs-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -189,6 +191,26 @@ export class BsDialog {
                 "reflect": false,
                 "attribute": "heading"
             },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Close'"
+            },
             "size": {
                 "type": "string",
                 "mutable": false,

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

@@ -60,6 +60,14 @@ export class BsInput {
      * component re-dispatches them as `bsInput`/`bsChange` custom events instead. Mutable so the
      * `number` type's stepper buttons can update it directly. */
     value = '';
+    /** Accessible name of the password toggle while the password is hidden. */
+    showPasswordLabel = 'Show password';
+    /** Accessible name of the password toggle while the password is visible. */
+    hidePasswordLabel = 'Hide password';
+    /** Accessible name of the number stepper's increment button. */
+    incrementLabel = 'Increment';
+    /** Accessible name of the number stepper's decrement button. */
+    decrementLabel = 'Decrement';
     type = 'text';
     label;
     placeholder;
@@ -302,10 +310,10 @@ export class BsInput {
     }
     renderEndIconContent() {
         if (this.type === 'number') {
-            return (h("span", { class: "bs-input__stepper" }, h("button", { type: "button", part: "control", class: "bs-input__stepper-btn", "aria-label": "Increment", tabIndex: -1, disabled: this.disabled, onClick: this.onStepperIncrement }, h("svg", { viewBox: "0 0 10 6", width: "10", height: "6", "aria-hidden": "true" }, h("path", { d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.3", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { type: "button", part: "control", class: "bs-input__stepper-btn", "aria-label": "Decrement", tabIndex: -1, disabled: this.disabled, onClick: this.onStepperDecrement }, h("svg", { viewBox: "0 0 10 6", width: "10", height: "6", "aria-hidden": "true" }, h("path", { d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.3", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+            return (h("span", { class: "bs-input__stepper" }, h("button", { type: "button", part: "control", class: "bs-input__stepper-btn", "aria-label": this.incrementLabel, tabIndex: -1, disabled: this.disabled, onClick: this.onStepperIncrement }, h("svg", { viewBox: "0 0 10 6", width: "10", height: "6", "aria-hidden": "true" }, h("path", { d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.3", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { type: "button", part: "control", class: "bs-input__stepper-btn", "aria-label": this.decrementLabel, tabIndex: -1, disabled: this.disabled, onClick: this.onStepperDecrement }, h("svg", { viewBox: "0 0 10 6", width: "10", height: "6", "aria-hidden": "true" }, h("path", { d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.3", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
         }
         if (this.type === 'password') {
-            return (h("button", { type: "button", part: "control", class: "bs-input__password-toggle", "aria-label": this.passwordVisible ? 'Hide password' : 'Show password', disabled: this.disabled, onClick: this.onTogglePasswordVisibility }, this.passwordVisible ? (h("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M1 8C2.2 5.5 4.9 3 8 3C11.1 3 13.8 5.5 15 8C13.8 10.5 11.1 13 8 13C4.9 13 2.2 10.5 1 8Z", stroke: "currentColor", "stroke-width": "1.2", "stroke-linejoin": "round" }), h("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M2 2L14 14", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }))) : (h("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M1 8C2.2 5.5 4.9 3 8 3C11.1 3 13.8 5.5 15 8C13.8 10.5 11.1 13 8 13C4.9 13 2.2 10.5 1 8Z", stroke: "currentColor", "stroke-width": "1.2", "stroke-linejoin": "round" }), h("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", "stroke-width": "1.2" })))));
+            return (h("button", { type: "button", part: "control", class: "bs-input__password-toggle", "aria-label": this.passwordVisible ? this.hidePasswordLabel : this.showPasswordLabel, disabled: this.disabled, onClick: this.onTogglePasswordVisibility }, this.passwordVisible ? (h("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M1 8C2.2 5.5 4.9 3 8 3C11.1 3 13.8 5.5 15 8C13.8 10.5 11.1 13 8 13C4.9 13 2.2 10.5 1 8Z", stroke: "currentColor", "stroke-width": "1.2", "stroke-linejoin": "round" }), h("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M2 2L14 14", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }))) : (h("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M1 8C2.2 5.5 4.9 3 8 3C11.1 3 13.8 5.5 15 8C13.8 10.5 11.1 13 8 13C4.9 13 2.2 10.5 1 8Z", stroke: "currentColor", "stroke-width": "1.2", "stroke-linejoin": "round" }), h("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", "stroke-width": "1.2" })))));
         }
         if (this.type === 'dropdown') {
             return (h("svg", { class: "bs-input__chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })));
@@ -389,10 +397,10 @@ export class BsInput {
         return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (h("div", { key: '6921873fb72be6f26a2389697f6b2f816d8011a9', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: 'eb166070c898f3bf1e0d994265e5ad3adc1d7172', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: '64ec1ba4a6c8c87db6b45dfd38731adbdfd5d6a8', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '5176edfc672132f1c6aaec978002851ff27179a0', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: '1d02b7a6901c87c68ff6b91c03bc8099cfb823e6', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '8ef20b2be514160fbdf37d046b59b0009b07ece2', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }
@@ -449,6 +457,86 @@ export class BsInput {
                 "attribute": "value",
                 "defaultValue": "''"
             },
+            "showPasswordLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the password toggle while the password is hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-password-label",
+                "defaultValue": "'Show password'"
+            },
+            "hidePasswordLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the password toggle while the password is visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-password-label",
+                "defaultValue": "'Hide password'"
+            },
+            "incrementLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the number stepper's increment button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "increment-label",
+                "defaultValue": "'Increment'"
+            },
+            "decrementLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the number stepper's decrement button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "decrement-label",
+                "defaultValue": "'Decrement'"
+            },
             "type": {
                 "type": "string",
                 "mutable": false,

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

@@ -44,7 +44,7 @@ export class BsMenu {
         items[next].shadowRoot?.querySelector('button')?.focus();
     }
     render() {
-        return (h("div", { key: 'ba99d3c35c0c7ab4427155ac13e89c434068ef49', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '817f29507503adcaad013a8035d35bc1f35ffdef' })));
+        return (h("div", { key: '931d856111c209026ceecfc7292336e3ffc95348', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '773aeb60e85fd3c802da4dc9e78126f4a4543965' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-menu-item/bs-menu-item.js

@@ -47,7 +47,7 @@ export class BsMenuItem {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '419a5d4d35f47ea9cf72b02407a45a7d5645fc4b', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: '733f8e5f702496bbb2788cc4db84a9c7c128f1be', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '566ca7b7f011090efa131c6bf0fb74515db11fee', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'c717ab8efef92c338581953c60f617057f9eaadc', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'c0006ae3c36798eabfb2e001faade51ec4cc10c9' }))));
+        return (h("button", { key: '1e0f7b552625b10087b75d9354e9e158cda10732', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: '8ec17400e5157f4d34a9f67cb298912f430e4524', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '3641aa2735310ada27c68c90a42f18489e77f0e9', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '9c60cb506418e1432b594b0f2ce8f9c4cbf925f6', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '6369f08ae8797a21d498e89b701df3858e4ce575' }))));
     }
     static get is() { return "bs-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,36 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-message', () => {
+    it('defaults to the assistant role and default status', async () => {
+        const { root } = await render(h("bs-message", null, "Hello"));
+        expect(root).toEqualAttribute('role', 'assistant');
+        expect(root).toEqualAttribute('status', 'default');
+    });
+    it('reflects the user role', async () => {
+        const { root } = await render(h("bs-message", { role: "user" }, "Hi"));
+        expect(root).toEqualAttribute('role', 'user');
+    });
+    it('renders a <time> with datetime from timestamp props', async () => {
+        const { root } = await render(h("bs-message", { timestamp: "10:42", datetime: "2026-01-01T10:42:00Z" }));
+        const time = root.shadowRoot.querySelector('time');
+        expect(time).toHaveTextContent('10:42');
+        expect(time).toEqualAttribute('datetime', '2026-01-01T10:42:00Z');
+    });
+    it('renders no <time> when timestamp is unset', async () => {
+        const { root } = await render(h("bs-message", null));
+        expect(root.shadowRoot.querySelector('time')).toBeNull();
+    });
+    it('sets aria-busy only while pending', async () => {
+        const { root, waitForChanges } = await render(h("bs-message", { status: "pending" }));
+        expect(root.shadowRoot.querySelector('.bs-message')).toEqualAttribute('aria-busy', 'true');
+        root.status = 'error';
+        await waitForChanges();
+        expect(root.shadowRoot.querySelector('.bs-message').hasAttribute('aria-busy')).toBe(false);
+    });
+    it('composes the bubble from bs-card and exposes avatar/footer/timestamp slots', async () => {
+        const { root } = await render(h("bs-message", null));
+        expect(root.shadowRoot.querySelector('bs-card[part="container"]')).not.toBeNull();
+        for (const name of ['avatar', 'footer', 'timestamp']) {
+            expect(root.shadowRoot.querySelector(`slot[name="${name}"]`)).not.toBeNull();
+        }
+    });
+});

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

@@ -0,0 +1,77 @@
+:host {
+  display: block;
+  --bs-message-gap: var(--bs-spacing-100);
+  --bs-message-max-width: 80%;
+  --bs-message-padding: var(--bs-spacing-150);
+  --bs-message-radius: var(--bs-border-radius-150);
+  --bs-message-user-bg: var(--bs-color-primary-container);
+  --bs-message-user-color: var(--bs-text-default);
+  --bs-message-assistant-bg: var(--bs-color-neutral-container);
+  --bs-message-assistant-color: var(--bs-text-default);
+  --bs-message-error-bg: var(--bs-color-error-container);
+  --bs-message-error-color: var(--bs-text-error);
+  --bs-message-pending-opacity: 0.6;
+  --bs-message-timestamp-color: var(--bs-text-secondary);
+  --bs-message-timestamp-font-size: var(--bs-font-size-xs);
+}
+
+.bs-message {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--bs-message-gap);
+}
+
+:host([role='user']) .bs-message {
+  flex-direction: row-reverse;
+}
+
+.bs-message__avatar {
+  flex-shrink: 0;
+}
+
+.bs-message__column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-50);
+  min-width: 0;
+  max-width: var(--bs-message-max-width);
+  align-items: flex-start;
+}
+
+:host([role='user']) .bs-message__column {
+  align-items: flex-end;
+}
+
+.bs-message__bubble {
+  --bs-card-bg: var(--bs-message-assistant-bg);
+  --bs-card-radius: var(--bs-message-radius);
+  --bs-card-padding: var(--bs-message-padding);
+  --bs-card-shadow: none;
+  color: var(--bs-message-assistant-color);
+}
+
+:host([role='user']) .bs-message__bubble {
+  --bs-card-bg: var(--bs-message-user-bg);
+  color: var(--bs-message-user-color);
+}
+
+:host([status='error']) .bs-message__bubble {
+  --bs-card-bg: var(--bs-message-error-bg);
+  color: var(--bs-message-error-color);
+}
+
+:host([status='pending']) .bs-message__bubble {
+  opacity: var(--bs-message-pending-opacity);
+}
+
+.bs-message__content {
+  overflow-wrap: anywhere;
+  font-size: var(--bs-font-size-md);
+  line-height: var(--bs-line-height-normal);
+}
+
+.bs-message__timestamp {
+  color: var(--bs-message-timestamp-color);
+  font-size: var(--bs-message-timestamp-font-size);
+  line-height: var(--bs-line-height-normal);
+}

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

@@ -0,0 +1,156 @@
+import { h } from "@stencil/core";
+/**
+ * A single chat message bubble. User messages align to the end with a primary-tinted bubble;
+ * assistant messages align to the start on a neutral bubble. The consumer renders the content
+ * (e.g. markdown) into the default slot.
+ *
+ * Composed from: `bs-card` (the bubble surface).
+ *
+ * ## When to use
+ * - One entry per turn in a chat transcript, usually inside `bs-message-list`.
+ *
+ * ## When not to use
+ * - For transient notices or system banners -- use `bs-toast` / `bs-composer-status-banner`.
+ *
+ * @slot - The message content. The consumer renders markdown/rich content here.
+ * @slot avatar - Optional avatar (e.g. `bs-avatar`) beside the bubble.
+ * @slot footer - Optional content below the bubble (e.g. `bs-chatbot-response-action`).
+ * @slot timestamp - Overrides the default `<time>` element rendered from `timestamp`.
+ * @part container - The bubble (`bs-card`).
+ * @part avatar - The avatar wrapper.
+ * @part content - The message content wrapper.
+ * @part footer - The footer wrapper.
+ * @part timestamp - The timestamp wrapper.
+ * @prop --bs-message-gap - Gap between avatar and message column. Aliased to `--bs-spacing-100`.
+ * @prop --bs-message-max-width - Max width of the message column. Defaults to `80%`.
+ * @prop --bs-message-padding - Bubble padding. Aliased to `--bs-spacing-150`.
+ * @prop --bs-message-radius - Bubble corner radius. Aliased to `--bs-border-radius-150`.
+ * @prop --bs-message-user-bg - User bubble background. Aliased to `--bs-color-primary-container`.
+ * @prop --bs-message-user-color - User bubble text color. Aliased to `--bs-text-default`.
+ * @prop --bs-message-assistant-bg - Assistant bubble background. Aliased to `--bs-color-neutral-container`.
+ * @prop --bs-message-assistant-color - Assistant bubble text color. Aliased to `--bs-text-default`.
+ * @prop --bs-message-error-bg - Error bubble background. Aliased to `--bs-color-error-container`.
+ * @prop --bs-message-error-color - Error bubble text color. Aliased to `--bs-text-error`.
+ * @prop --bs-message-pending-opacity - Bubble opacity while pending. Defaults to `0.6`.
+ * @prop --bs-message-timestamp-color - Timestamp color. Aliased to `--bs-text-secondary`.
+ * @prop --bs-message-timestamp-font-size - Timestamp font size. Aliased to `--bs-font-size-xs`.
+ */
+export class BsMessage {
+    /** Who sent the message. Controls alignment and colour. */
+    role = 'assistant';
+    /** Human-readable timestamp text shown inside a `<time>` element. Omit to render none. */
+    timestamp;
+    /** Machine-readable value for the `<time>` element's `datetime` attribute. */
+    datetime;
+    /** Delivery/render state. `error` uses error colours; `pending` dims the bubble and sets `aria-busy`. */
+    status = 'default';
+    render() {
+        return (h("div", { key: '76e0e1d307de73bca97c5a79b3ff607278311d3e', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, h("div", { key: '00c91e1ab7a3cf9e81401e36b50b331c0d7d2735', part: "avatar", class: "bs-message__avatar" }, h("slot", { key: 'a3b0577cbafcd699ecf37c3299757f76e88cd572', name: "avatar" })), h("div", { key: '10b3dc86e24ae0860fffccedb5aaa9fed78f44c5', class: "bs-message__column" }, h("bs-card", { key: '3a88a28a5e9cb9898562860daf576b4280a8e601', part: "container", class: "bs-message__bubble", surface: "base" }, h("div", { key: '95a9c8394c55789cbf7a976b16466d7a9593fae6', part: "content", class: "bs-message__content" }, h("slot", { key: '81c214388b65904f4e15bfae23ddbc34ed35e267' }))), h("div", { key: '27768ab59923180c6f31f7bce893fefa11c967d1', part: "footer", class: "bs-message__footer" }, h("slot", { key: '606f025032c40e01c2490b1d18441c1d2557beac', name: "footer" })), h("div", { key: '79acf174363c391a37ca1907ececf87c9c1cdb45', part: "timestamp", class: "bs-message__timestamp" }, h("slot", { key: '08060d46ea218a3c9315bd2fc89165c605e54ddd', name: "timestamp" }, this.timestamp && h("time", { key: 'a9829bf9725b3c41eb5032427822a2d6fbb2cb6f', dateTime: this.datetime }, this.timestamp))))));
+    }
+    static get is() { return "bs-message"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-message.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-message.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsMessageRole",
+                    "resolved": "\"assistant\" | \"user\"",
+                    "references": {
+                        "BsMessageRole": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-message/bs-message.tsx",
+                            "id": "src/components/bs-message/bs-message.tsx::BsMessageRole"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Who sent the message. Controls alignment and colour."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "role",
+                "defaultValue": "'assistant'"
+            },
+            "timestamp": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Human-readable timestamp text shown inside a `<time>` element. Omit to render none."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "timestamp"
+            },
+            "datetime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Machine-readable value for the `<time>` element's `datetime` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "datetime"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsMessageStatus",
+                    "resolved": "\"default\" | \"error\" | \"pending\"",
+                    "references": {
+                        "BsMessageStatus": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-message/bs-message.tsx",
+                            "id": "src/components/bs-message/bs-message.tsx::BsMessageStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delivery/render state. `error` uses error colours; `pending` dims the bubble and sets `aria-busy`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}