@brandsync/wc 1.12.1 → 1.13.0

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

@@ -55,6 +55,28 @@ export class BsChatbotResponseAction {
      * `bsMenuOpen` for the consumer to react to.
      */
     menuOpen = false;
+    /** Marks the response as liked: sets `aria-pressed` on the Like button and applies the pressed
+     * background. Consumer-controlled -- the component never toggles it itself. */
+    liked = false;
+    /** Marks the response as disliked: sets `aria-pressed` on the Dislike button and applies the
+     * pressed background. Consumer-controlled -- the component never toggles it itself. */
+    disliked = false;
+    /** Removes the "Regenerate" button from the DOM. */
+    hideRegenerate = false;
+    /** Accessible name (and visible text, where applicable) of the Like button. */
+    likeLabel = 'Like';
+    /** Accessible name of the Dislike button. */
+    dislikeLabel = 'Dislike';
+    /** Accessible name of the Copy button. */
+    copyLabel = 'Copy';
+    /** Accessible name of the Regenerate button. */
+    regenerateLabel = 'Regenerate';
+    /** Accessible name of the "More options" button. */
+    menuLabel = 'More options';
+    /** Label for a single source; rendered as "1 {sourceLabel}". */
+    sourceLabel = 'source';
+    /** Label for multiple sources; rendered as "N {sourcesLabel}". */
+    sourcesLabel = 'sources';
     /** Fires when the "Like" button is clicked. */
     bsLike;
     /** Fires when the "Dislike" button is clicked. */
@@ -105,7 +127,7 @@ export class BsChatbotResponseAction {
     };
     render() {
         const hasSources = !!this.sourcesCount && this.sourcesCount > 0;
-        return (h("div", { key: '227d45ac6fa99d0c5315d765327c02ba0f0ec103', class: "bs-chatbot-response-action" }, h("button", { key: '19db04d45fbe745bd4e80264c9f8e612ed03d411', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: '034deacf77f82cb9b521db16be095b78522ee895', name: "like-icon" }, h(ThumbsUpIcon, { key: 'cd4d70ed2ee5d4be7916ba7f11b725f63bc29204' }))), h("button", { key: '380f16ac09380b76b7a931a7397bca0c8506207f', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: '7f1ecd578a69c138a8b44c360d371e33bd74e4a2', name: "dislike-icon" }, h(ThumbsDownIcon, { key: 'b196af3aee600a21b5d1bf53244888c690ba0451' }))), h("button", { key: '82739cc554821af33042f4620bcd6bbcbd96e517', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: 'd4b9981fb67e317a6cee54b4ef17a68fe12d7115', name: "copy-icon" }, h(CopyIcon, { key: '7ca4e99ae3f3e418a0882fcbb663dd819e4582cf' }))), h("button", { key: '0b32cb3292ebd4e75ce8a3eb418f5d5a2ab191dc', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: 'ede5d996bd1e6e5fe260df4734a5749b957c6455', name: "regenerate-icon" }, h(RegenerateIcon, { key: '12ff8d4527153fa65ba5e7de866758e9fe21dece' }))), h("div", { key: '03f207b3d016b114ef2d4337e9ed1468da63e3f7', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '2e4745ace0e6d220998b17265902d2663b63e369', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: 'fb4d12abae8d01bfc8ff0f4eb3f3888eb2c5a78e', name: "menu-icon" }, h(MenuIcon, { key: '5cd60593c9bb37fdb0ecb09d95cc1d39056cf826' }))), this.menuOpen && (h("div", { key: '33bb00b251c3aef1af17854690c30b8b27e01da1', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: 'cd848943f1c881c95a14c54f8ef01e4b0182c629', name: "menu" })))), hasSources && (h("button", { key: 'b6493094208f1716aebacb63ca6b2c0139ce34ff', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'dbec7bbc889f52b76b914fa5a7c19cd378829345', name: "sources-icon" }, h(SourcesIcon, { key: '0af7d81f2f9328f380a1ecf17f0e453243e0ae8f' })), h("span", { key: 'f5247563134eb5a3932110c1191edf51ef8c2f69', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
+        return (h("div", { key: 'becd86515e3d17b3f9537aa4c430e18344145d0a', class: "bs-chatbot-response-action" }, h("button", { key: '68eacc1630c68821ceeb74bbb56771368ed4505e', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": this.likeLabel, "aria-pressed": this.liked ? 'true' : 'false', onClick: this.onLikeClick }, h("slot", { key: '5bd8fa5b5e39eca83b22960eff8c6ba6a86df8e0', name: "like-icon" }, h(ThumbsUpIcon, { key: '64ebfd90363e3dccd041d48a0a45b0fa360d69f8' }))), h("button", { key: '88017910f984d8dc5ba1c07c068b18199572eb18', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": this.dislikeLabel, "aria-pressed": this.disliked ? 'true' : 'false', onClick: this.onDislikeClick }, h("slot", { key: '8fcc3cd275c7df3a211c74ab64ec5ce08b3cf3eb', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '42c0a60df9cfa91d77db1ef884246e41b51e6e79' }))), h("button", { key: '5bafab1582b9955d27af9bce9ac5855d24a80361', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": this.copyLabel, onClick: this.onCopyClick }, h("slot", { key: 'f44f5e4bb9fa39b799c887a2cf930b19cfd29629', name: "copy-icon" }, h(CopyIcon, { key: '37634487931a02c38b636d50d794b2033de17b8b' }))), !this.hideRegenerate && (h("button", { key: '55c4a0fccce0d6c7b05729b79f379a3e594df32e', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": this.regenerateLabel, onClick: this.onRegenerateClick }, h("slot", { key: '9d0b6d47287673fad41b41e2be76938394f5600c', name: "regenerate-icon" }, h(RegenerateIcon, { key: 'adc3c8e19c66cabff0ceb827ed66ede9e5da0c11' })))), h("div", { key: '6587bcf0dc88be190a9ba49a6b07c1cc839985ff', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '14c4f84cb4a01138fb35e828f2a7491c540d5a3d', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": this.menuLabel, "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: 'b4f7d18ed92428af073801e915c323c8b7d0013b', name: "menu-icon" }, h(MenuIcon, { key: 'cbb4b6116a8ab8138beaa2e4f5ebffbd7f977c72' }))), this.menuOpen && (h("div", { key: '418743486b5e705addb0a4dab51e3541f9d12a89', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '20d3942ddb50b91bb98e5ad17bda061a3e9f78e0', name: "menu" })))), hasSources && (h("button", { key: 'e9d71089a12893f16bc21f3d018ec6addf692f01', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: '967727f395a15782f289c897f1844023fe4d42fc', name: "sources-icon" }, h(SourcesIcon, { key: '9ae7096801c6bc03f507b7e8551b2ccd2d199831' })), h("span", { key: '1c0d01ff699ec23b10cdaab3707805dd221b0da4', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? this.sourceLabel : this.sourcesLabel)))));
     }
     static get is() { return "bs-chatbot-response-action"; }
     static get encapsulation() { return "shadow"; }
@@ -159,6 +181,206 @@ export class BsChatbotResponseAction {
                 "reflect": true,
                 "attribute": "menu-open",
                 "defaultValue": "false"
+            },
+            "liked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the response as liked: sets `aria-pressed` on the Like button and applies the pressed\nbackground. Consumer-controlled -- the component never toggles it itself."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "liked",
+                "defaultValue": "false"
+            },
+            "disliked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the response as disliked: sets `aria-pressed` on the Dislike button and applies the\npressed background. Consumer-controlled -- the component never toggles it itself."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disliked",
+                "defaultValue": "false"
+            },
+            "hideRegenerate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Removes the \"Regenerate\" button from the DOM."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-regenerate",
+                "defaultValue": "false"
+            },
+            "likeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name (and visible text, where applicable) of the Like button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "like-label",
+                "defaultValue": "'Like'"
+            },
+            "dislikeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the Dislike button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dislike-label",
+                "defaultValue": "'Dislike'"
+            },
+            "copyLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the Copy button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "copy-label",
+                "defaultValue": "'Copy'"
+            },
+            "regenerateLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the Regenerate button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "regenerate-label",
+                "defaultValue": "'Regenerate'"
+            },
+            "menuLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the \"More options\" button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu-label",
+                "defaultValue": "'More options'"
+            },
+            "sourceLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for a single source; rendered as \"1 {sourceLabel}\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "source-label",
+                "defaultValue": "'source'"
+            },
+            "sourcesLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for multiple sources; rendered as \"N {sourcesLabel}\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sources-label",
+                "defaultValue": "'sources'"
             }
         };
     }

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

@@ -44,6 +44,8 @@ export class BsChatbotSourcesDrawer {
      * Overrides the auto-detected count badge. By default the badge reflects the number of slotted
      * `bs-source-link` children, so most consumers don't need to set this.
      */
+    /** Accessible name of the collapse button. */
+    collapseLabel = 'Collapse sources';
     count;
     /** Fires when the collapse chevron is clicked. The consuming app owns actually hiding the panel. */
     bsCollapse;
@@ -57,7 +59,7 @@ export class BsChatbotSourcesDrawer {
     };
     render() {
         const displayCount = this.count ?? this.slottedCount;
-        return (h("div", { key: '8d3a64121acfc35e2be62baf23ff3630a9193617', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: '384e3cb1c4bca85727d6f21260490b5119f29db5', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: 'bd83473b5787fd2ca7a143c600de6fe74625ee80', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '0c9285fa51de5f73f89c7d67786c5f4b5bde55ed', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: 'a3725d4b2798e07972335ee7a8024cd2f8e73f99', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: 'afb5efa705e54a464e3237475a90987d7da5f506', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: '8b886a8b6c2f60a4ca07978a8367f3366455bedc', name: "collapse-icon" }, h(CaretRightIcon, { key: 'bea232b218eca7f11c43a5c8884f78b0d5569cda' })))), h("div", { key: 'a417a26fb970a77002a56b7bd91645d18793ae69', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: '018bf6454c7020b3d14122c1b9b86ae11072f1a7', onSlotchange: this.onSlotchange }))));
+        return (h("div", { key: 'a90584654ac6f07fe15ad66232e0ae4d5cb42808', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: '7729f46d857505f2a4bd99544668691dbd63b07d', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: 'b0720fb68d543c3533498c7ba79be4e7b27cb46c', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '6599f959e109128ecde454a294310a797e9195ef', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '8f9dca16aac6d904fccd28bcef26fef69b53184e', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '034cb77b074513f8ca45c8609a4c40adea1d3c52', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": this.collapseLabel, onClick: this.onCollapseClick }, h("slot", { key: '2e54180b06bd3a648385fe5904be2985208e6367', name: "collapse-icon" }, h(CaretRightIcon, { key: 'cc34b3da07424488020fb225fccb154e29a18761' })))), h("div", { key: '39695ad1b0e5072951e1ca4c13ebe85f37cad97f', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: '5e35adc3c78d1f36a44735ae2aa5a420f82a53be', onSlotchange: this.onSlotchange }))));
     }
     static get is() { return "bs-chatbot-sources-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -93,6 +95,26 @@ export class BsChatbotSourcesDrawer {
                 "attribute": "heading",
                 "defaultValue": "'Sources'"
             },
+            "collapseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the collapse button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapse-label",
+                "defaultValue": "'Collapse sources'"
+            },
             "count": {
                 "type": "number",
                 "mutable": false,
@@ -105,7 +127,7 @@ export class BsChatbotSourcesDrawer {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Overrides the auto-detected count badge. By default the badge reflects the number of slotted\n`bs-source-link` children, so most consumers don't need to set this."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,

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

@@ -4,10 +4,7 @@
   --bs-chatbot-suggestion-button-border-color: var(--bs-border-primary);
   --bs-chatbot-suggestion-button-bg-default: var(--bs-color-primary-container);
   --bs-chatbot-suggestion-button-bg-hover: var(--bs-color-primary-container-hover);
-  /* No pre-built semantic "container-pressed" token matches this tonal button's lighter pressed
-   * shade progression (50 -> 100 -> 200) -- alias the primitive directly, same precedent
-   * documented in bs-button.css for its subtle/outlined/success/warning/info variants. */
-  --bs-chatbot-suggestion-button-bg-pressed: var(--bs-brand-200);
+  --bs-chatbot-suggestion-button-bg-pressed: var(--bs-color-primary-container-pressed);
   --bs-chatbot-suggestion-button-bg-focus: var(--bs-color-primary-container-hover);
   --bs-chatbot-suggestion-button-text-default: var(--bs-text-action);
   --bs-chatbot-suggestion-button-text-hover: var(--bs-text-action-hover);

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

@@ -22,11 +22,8 @@ import { h } from "@stencil/core";
  *   Aliased to `--bs-color-primary-container`.
  * @prop --bs-chatbot-suggestion-button-bg-hover - Background on hover. Aliased to
  *   `--bs-color-primary-container-hover`.
- * @prop --bs-chatbot-suggestion-button-bg-pressed - Background when pressed. Aliased directly to
- *   the primitive `--bs-brand-200` -- there's no pre-built semantic "container-pressed" token
- *   matching this tonal button's lighter pressed shade progression (50 -> 100 -> 200), so this
- *   component aliases one locally (same situation `bs-button.css` documents for its
- *   subtle/outlined/success/warning/info variants).
+ * @prop --bs-chatbot-suggestion-button-bg-pressed - Background when pressed. Aliased to
+ *   `--bs-color-primary-container-pressed`.
  * @prop --bs-chatbot-suggestion-button-bg-focus - Background when focused. Aliased to
  *   `--bs-color-primary-container-hover` (same as hover).
  * @prop --bs-chatbot-suggestion-button-text-default - Text color in the default state. Aliased to
@@ -45,7 +42,7 @@ export class BsChatbotSuggestionButton {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '159fda3cff7fa1295b9b9800d083706f282bbd0d', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'a26be73a49a140f2e3017ff91a0727f83e00b67c' })));
+        return (h("button", { key: '04551a15240fcab199c0b4aa261cf5ef0c9b3f42', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '7d743c8dfb4f434f15e47a0d7d2c1a48c5aedd70' })));
     }
     static get is() { return "bs-chatbot-suggestion-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,8 +32,10 @@ export class BsCheckboxSkeleton {
     /** Sizing scale, matching the `bs-checkbox` size it stands in for. Defaults to `lg`, the same
      * (unusual) default `bs-checkbox` itself uses. */
     size = 'lg';
+    /** Accessible name announced for the loading placeholder. */
+    loadingLabel = 'Loading';
     render() {
-        return (h("span", { key: '26d1c09678d3385cda9494440b116c190c0431cd', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": "Loading" }, h("span", { key: '62e597f01d199aadbbd2e725753ab82377c9b685', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: 'a36053e0d189edaae49fcf9340f28f70ed50a28b', part: "label", class: "bs-checkbox-skeleton__label" })));
+        return (h("span", { key: '3915a978ff6205ba48237d684209ee01b948392a', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": this.loadingLabel }, h("span", { key: 'f23cbc29d9e2fabf49584897c81ed481e7e2f753', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: '1b317811cc4eff44dcbef6c78a97b0f7f2efaddd', part: "label", class: "bs-checkbox-skeleton__label" })));
     }
     static get is() { return "bs-checkbox-skeleton"; }
     static get encapsulation() { return "shadow"; }
@@ -75,6 +77,26 @@ export class BsCheckboxSkeleton {
                 "reflect": false,
                 "attribute": "size",
                 "defaultValue": "'lg'"
+            },
+            "loadingLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name announced for the loading placeholder."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading-label",
+                "defaultValue": "'Loading'"
             }
         };
     }

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

@@ -27,6 +27,8 @@ export class BsChipInput {
     /** Sizing scale. Controls the chip's height only -- icon size, gap, and font size stay
      * constant across sizes, matching the Figma spec exactly. */
     size = 'lg';
+    /** Prefix of the remove button's accessible name ("Remove {label}"). */
+    removeLabel = 'Remove';
     /** Whether the chip reads as toggled on. Mutable so clicking the body toggles directly, and
      * reflected so consumers can target `bs-chip-input[selected]` via CSS. */
     selected = false;
@@ -77,7 +79,7 @@ export class BsChipInput {
     };
     render() {
         const paddingVariant = this.hasIcon ? 'icon' : 'text';
-        return (h(Host, { key: 'bb8adc7ac62df562155d169a119d0bf3100f4c9f', class: `bs-chip-input bs-chip-input--${this.size} bs-chip-input--${paddingVariant}` }, h("button", { key: '92a509d98f93873738bed6db0fe0d5dc5bb9a7e4', type: "button", part: "body", class: "bs-chip-input__body", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.onBodyClick }, h("span", { key: '179d8713dd8be5a8340848eddb1de24ce7561d09', part: "icon", class: `bs-chip-input__icon ${this.hasIcon ? 'bs-chip-input__icon--visible' : ''}` }, h("slot", { key: '0b47b10606ef75c91b5374dc0032772993419ede', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'c2b678ecd9863d53c5ab52bd257122f298aafa62', part: "label", class: "bs-chip-input__label" }, h("slot", { key: '806fb8ea8e284a80d5faeef4905d1758c66f3ef0', onSlotchange: this.onLabelSlotchange }))), h("button", { key: 'a61df73d4a372dd0dce8b045feb6180853c209d2', type: "button", part: "remove", class: "bs-chip-input__remove", disabled: this.disabled, "aria-label": `Remove ${this.labelText}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: '6e14762d31caae9473603449dd47a158859d28f6' }))));
+        return (h(Host, { key: '1e44e8c6c324502677a711e9efdeea812181e93d', class: `bs-chip-input bs-chip-input--${this.size} bs-chip-input--${paddingVariant}` }, h("button", { key: '7c698a6cfbe6ca8ff1215edeb59d7a58071ec29e', type: "button", part: "body", class: "bs-chip-input__body", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.onBodyClick }, h("span", { key: '159334959b3da3665fb6f4a2930c15fc1da028ad', part: "icon", class: `bs-chip-input__icon ${this.hasIcon ? 'bs-chip-input__icon--visible' : ''}` }, h("slot", { key: '0f12a8dbf2b17578ec1446032fa6b795f6aac9f4', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'd8236eaa237e3d204f721274551c0d50ce6b1f9a', part: "label", class: "bs-chip-input__label" }, h("slot", { key: '4872dcc68aa9a204801f10415fd1b3bc31db0c2a', onSlotchange: this.onLabelSlotchange }))), h("button", { key: 'ac930ef1166ff21f889641cf0644c20e77f92196', type: "button", part: "remove", class: "bs-chip-input__remove", disabled: this.disabled, "aria-label": `${this.removeLabel} ${this.labelText}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: 'ba26dff61400df054f3b2d73526e08d02734ba07' }))));
     }
     static get is() { return "bs-chip-input"; }
     static get encapsulation() { return "shadow"; }
@@ -120,6 +122,26 @@ export class BsChipInput {
                 "attribute": "size",
                 "defaultValue": "'lg'"
             },
+            "removeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prefix of the remove button's accessible name (\"Remove {label}\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remove-label",
+                "defaultValue": "'Remove'"
+            },
             "selected": {
                 "type": "boolean",
                 "mutable": true,

package/dist/collection/components/bs-citation-preview/bs-citation-preview.cmp.test.js

@@ -0,0 +1,34 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-citation-preview', () => {
+    it('composes bs-card and bs-source-link with the file and source names', async () => {
+        const { root } = await render(h("bs-citation-preview", { "file-name": "report.pdf", "source-name": "HoltePortalen" }));
+        expect(root.shadowRoot.querySelector('bs-card[part="container"]')).not.toBeNull();
+        const link = root.shadowRoot.querySelector('bs-source-link');
+        expect(link.fileName).toBe('report.pdf');
+        expect(link.sourceName).toBe('HoltePortalen');
+    });
+    it('renders the page label when page is set, and omits it otherwise', async () => {
+        const { root, waitForChanges } = await render(h("bs-citation-preview", { page: 4 }));
+        expect(root.shadowRoot.querySelector('[part="page"]')).toHaveTextContent('Page 4');
+        root.page = undefined;
+        await waitForChanges();
+        expect(root.shadowRoot.querySelector('[part="page"]')).toBeNull();
+    });
+    it('exposes the snippet and footer slots', async () => {
+        const { root } = await render(h("bs-citation-preview", null, h("p", null, "Quoted text")));
+        expect(root.shadowRoot.querySelector('[part="snippet"] slot:not([name])')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('slot[name="footer"]')).not.toBeNull();
+    });
+    it('passes href to the source link', async () => {
+        const { root } = await render(h("bs-citation-preview", { href: "https://example.com/a.pdf" }));
+        const link = root.shadowRoot.querySelector('bs-source-link');
+        expect(link.href).toBe('https://example.com/a.pdf');
+    });
+    it('re-emits bsOpen from the header', async () => {
+        const { root, spyOnEvent } = await render(h("bs-citation-preview", null));
+        const spy = spyOnEvent('bsOpen');
+        const link = root.shadowRoot.querySelector('bs-source-link');
+        link.dispatchEvent(new CustomEvent('bsOpen'));
+        expect(spy).toHaveReceivedEventTimes(1);
+    });
+});

package/dist/collection/components/bs-citation-preview/bs-citation-preview.css

@@ -0,0 +1,36 @@
+:host {
+  display: block;
+  --bs-citation-preview-gap: var(--bs-spacing-100);
+  --bs-citation-preview-snippet-color: var(--bs-text-default);
+  --bs-citation-preview-snippet-bg: var(--bs-surface-base);
+  --bs-citation-preview-snippet-radius: var(--bs-border-radius-100);
+  --bs-citation-preview-page-color: var(--bs-text-secondary);
+}
+
+.bs-citation-preview {
+  --bs-card-border-width: var(--bs-border-width-thin);
+  --bs-card-border-color: var(--bs-border-default);
+  --bs-card-padding: var(--bs-spacing-100);
+  --bs-card-shadow: none;
+}
+
+.bs-citation-preview__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-citation-preview-gap);
+}
+
+.bs-citation-preview__snippet {
+  padding: var(--bs-spacing-150);
+  border-radius: var(--bs-citation-preview-snippet-radius);
+  background: var(--bs-citation-preview-snippet-bg);
+  color: var(--bs-citation-preview-snippet-color);
+  font-size: var(--bs-font-size-sm);
+  line-height: var(--bs-line-height-normal);
+}
+
+.bs-citation-preview__page {
+  color: var(--bs-citation-preview-page-color);
+  font-size: var(--bs-font-size-sm);
+  line-height: var(--bs-line-height-normal);
+}