@brandsync/wc 0.0.11 → 0.1.0

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

@@ -2,10 +2,14 @@
   display: block;
 }
 
+/* No border -- verified against the Figma "Card" node, which relies on background/shadow contrast
+   against the page rather than a border line. overflow: hidden clips the image slot's top corners
+   to this radius (see .bs-card__image--visible below). border-radius-100 (8px), not -150 (12px) --
+   the -150 value previously here was the Figma *demo frame's* radius around the example, not the
+   card's own "Paper" node radius. */
 .bs-card {
-  border: 1px solid var(--bs-paper-border-surface);
-  border-radius: var(--bs-border-radius-150);
-  padding: var(--bs-spacing-400);
+  overflow: hidden;
+  border-radius: var(--bs-border-radius-100);
   font-family: inherit;
 }
 
@@ -22,10 +26,38 @@
   background: var(--bs-paper-bg-container);
 }
 
+/* Empty by default (no padding/margin) -- only visible when the image slot has content, same
+   "reserve no space when empty" pattern as bs-dialog's own image slot. */
+.bs-card__image--visible ::slotted(img) {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+/* Carries the padding that used to live directly on .bs-card -- moved here so the image slot above
+   can sit flush against the card's edges instead of being inset by it. spacing-200 (16px), not
+   -400 (32px) -- the -400 value previously here didn't match the Figma redline at all. */
+.bs-card__content {
+  padding: var(--bs-spacing-200);
+}
+
+/* spacing-100 (8px), not -300 (24px) -- same over-sized-token mistake as the padding above. */
 .bs-card__header ::slotted(*) {
-  margin: 0 0 var(--bs-spacing-300) 0;
+  margin: 0 0 var(--bs-spacing-100) 0;
+}
+
+/* Figma's "Card Slot" renders footer actions (typically two buttons) as a right-aligned row with a
+   16px gap between them -- the ::slotted(*) margin-top below only provides the gap ABOVE the footer
+   row (between it and the header/body content), it doesn't lay out multiple slotted items as a row
+   at all (they'd just stack in normal inline flow). This adds that row layout on the wrapper itself. */
+.bs-card__footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--bs-spacing-200);
 }
 
 .bs-card__footer ::slotted(*) {
-  margin: var(--bs-spacing-300) 0 0 0;
+  margin: var(--bs-spacing-100) 0 0 0;
 }

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

@@ -10,10 +10,14 @@ import { h } from "@stencil/core";
  * - As the only structural element on a page — cards group content, they don't replace layout.
  * - For a dismissible/transient message — use a modal or a dedicated notification component.
  *
+ * @slot image - Optional hero image across the top of the card, flush with its edges and clipped
+ * to its top corners. Presence of assigned content is what shows it -- doesn't affect layout when
+ * empty.
  * @slot header - Optional heading content above the body.
  * @slot - Default slot: the card's main body content.
  * @slot footer - Optional actions/content below the body (e.g. a button).
- * @part container - The outer bordered surface element.
+ * @part container - The outer surface element.
+ * @part image - The hero image wrapper (only visible when the `image` slot has content).
  * @part header - The header wrapper.
  * @part body - The body wrapper.
  * @part footer - The footer wrapper.
@@ -22,8 +26,15 @@ export class BsCard {
     /** Maps to the brandsync-tokens `--bs-paper-bg-*` set — Brandsync's tokens don't have a
      * dedicated "card" component yet, so this reuses the existing Paper surface tokens. */
     surface = 'raised';
+    /** Tracks whether the `image` slot has assigned content, so the image wrapper only reserves
+     * layout space (and clips its top corners) when there's actually an image -- same pattern as
+     * `bs-dialog`'s `hasImage`. */
+    hasImage = false;
+    onImageSlotchange = (ev) => {
+        this.hasImage = ev.target.assignedNodes().length > 0;
+    };
     render() {
-        return (h("div", { key: 'c8f95e45c3aa78315341d5ef5f7aa53b33f289cc', part: "container", class: `bs-card bs-card--${this.surface}` }, h("div", { key: 'b0787524f4b874e4e47459ef5325f2494ea8bf59', part: "header", class: "bs-card__header" }, h("slot", { key: '41ee7852c3ea215f9b6fbc72ccd13283b58afc50', name: "header" })), h("div", { key: 'e4537f5ec7e11af4518cfae464ee6f65120355cc', part: "body", class: "bs-card__body" }, h("slot", { key: 'b6ceecfa3ad173f43811ae7c24b70822879f89f4' })), h("div", { key: '31bc782bb46991e1db5718ff9690140965810572', part: "footer", class: "bs-card__footer" }, h("slot", { key: 'f2530ea24aab67ea5f3f575ef251419b5565b5bc', name: "footer" }))));
+        return (h("div", { key: '0662903c6a1d7132865b2d6cbacd2d4f106101fc', part: "container", class: `bs-card bs-card--${this.surface}` }, h("div", { key: 'ba7637d19b11d05241f64a6314a8cdeb846be488', part: "image", class: `bs-card__image ${this.hasImage ? 'bs-card__image--visible' : ''}` }, h("slot", { key: '5b4d49a64af886cb19c0142aedb615d4c96e1d77', name: "image", onSlotchange: this.onImageSlotchange })), h("div", { key: 'd98c200c1bc2772f33ee8c0c5029761d464d656d', class: "bs-card__content" }, h("div", { key: '7e80e6809aad33f9919c1b14f86bad18c4602250', part: "header", class: "bs-card__header" }, h("slot", { key: '5daf62af5d08c31a51ad5ca0cc186ca60a92a0ef', name: "header" })), h("div", { key: 'feb18f2cf8c9fcb99051b8b66073ec2b1b46e123', part: "body", class: "bs-card__body" }, h("slot", { key: '561ef6160b5acd92500d097f0d402c176dd81c04' })), h("div", { key: 'd5989024a37534dea720eebf483273c518a72cd3', part: "footer", class: "bs-card__footer" }, h("slot", { key: '829399f8f90c83b2ea75e063daa7afbaf5f0f8dd', name: "footer" })))));
     }
     static get is() { return "bs-card"; }
     static get encapsulation() { return "shadow"; }
@@ -67,4 +78,9 @@ export class BsCard {
             }
         };
     }
+    static get states() {
+        return {
+            "hasImage": {}
+        };
+    }
 }

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

@@ -7,7 +7,8 @@ const meta = {
     <bs-card surface=${args.surface} style="max-width: 320px;">
       <strong slot="header">Booking confirmed</strong>
       <p>Meeting Room 4B is reserved for 2:00pm - 3:00pm.</p>
-      <bs-button slot="footer" size="sm">View details</bs-button>
+      <bs-button slot="footer" variant="subtle" size="sm">Cancel</bs-button>
+      <bs-button slot="footer" variant="outlined" size="sm">View details</bs-button>
     </bs-card>
   `,
     argTypes: {
@@ -25,3 +26,18 @@ export const Base = {
 export const Container = {
     args: { surface: 'container' },
 };
+// A real photo (Unsplash, free-to-use license) -- verified this URL resolves (200, image/jpeg)
+// before using it. Presence of the image slot's content is what shows the hero image, not a prop.
+const heroImage = 'https://images.unsplash.com/photo-1660496247667-3fb697c396af?fm=jpg&q=80&w=640&h=360&fit=crop&auto=format';
+export const WithImage = {
+    name: 'With image',
+    render: args => html `
+    <bs-card surface=${args.surface} style="max-width: 320px;">
+      <img slot="image" src=${heroImage} alt="" />
+      <strong slot="header">Booking confirmed</strong>
+      <p>Meeting Room 4B is reserved for 2:00pm - 3:00pm.</p>
+      <bs-button slot="footer" variant="subtle" size="sm">Cancel</bs-button>
+      <bs-button slot="footer" variant="outlined" size="sm">View details</bs-button>
+    </bs-card>
+  `,
+};

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

@@ -123,7 +123,7 @@ export class BsChatbotFeedback {
     }
     render() {
         const stars = [1, 2, 3, 4, 5];
-        return (h("div", { key: '278496768d42fffdf8df4d4688ecb2a845b709f0', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '29507aa7b8d4047c49360eebe9705c04f5cf635a', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": "Close", onClick: this.onCloseClick }, h(CloseIcon, { key: '598403a5f96cb5e3b242da19c67f888f6e5442b5' })), h("div", { key: '44de5b26f1e9dd202ba55d71c4ef831608a9b7e2', class: "bs-chatbot-feedback__top" }, h("div", { key: '2ab88191c765a53cf72b1edd3ebfe22aa5ac6bee', class: "bs-chatbot-feedback__text" }, h("p", { key: '9f60601413f81b5120516197e239ce1baf42dad4', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: 'd2a7c2b250c5ca5d9e46c52e534d38ab2efb96c5', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: '1c4564a3a48f483b6285ffabea8b2cd875154907', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": "Rating" }, stars.map(value => (h("button", { type: "button", part: "star", class: "bs-chatbot-feedback__star", role: "radio", "aria-checked": (this.rating >= value).toString(), "aria-label": `${value} star${value > 1 ? 's' : ''}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (h("div", { key: '92c3340c38bf2c4f0b54e3a9ea67403c6f4155e1', class: "bs-chatbot-feedback__field" }, h("label", { key: '87d7a0faeb236d72ddc066d2d390c8ad77a346c2', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, "Tell us what you think"), h("textarea", { key: 'd8a424d825fbac92a98475e496bfc5186a4adeb9', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: "e.g.The response was helpful ....", value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: 'd9fda026f57448ebc537967e5a8bbab5faa96dd1', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: '5fa34ac127e5525a0f3279c240ca57288329ce56', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: '9165d3f98cbb39974ffdc3831c27bef0abd55b4d', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: '69c0c8a74e7d3fbb1c06d7c05be4f9766ea141ea' }), "Submit feedback")), h("button", { key: '97634f47527312fdc6752a203fc0781a0e88c79f', type: "button", part: "new-chat", class: `bs-chatbot-feedback__new-chat ${this.submitted ? 'bs-chatbot-feedback__new-chat--primary' : 'bs-chatbot-feedback__new-chat--outlined'}`, onClick: this.onNewChatClick }, h(EditIcon, { key: '55699b3a298e25f3e0584e05d3f751f3d6bfbb9a' }), "Start new chat"))));
+        return (h("div", { key: '81d4b297593509fc8dd189f6f793f779e74257a9', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '0354e90dafc04230f5ff232a41ef833be53109da', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": "Close", onClick: this.onCloseClick }, h(CloseIcon, { key: 'bb7dbb0f779ae0c6ed97d89de9daeb273cb95891' })), h("div", { key: 'a08af9ead8ff286a6dbf0cd447c59d5daa985b2e', class: "bs-chatbot-feedback__top" }, h("div", { key: 'ec2566d3fa1b69296e834292718f64f8cdc4de7a', class: "bs-chatbot-feedback__text" }, h("p", { key: 'f93002e0eb4d23247e879910f1f04062eda3445a', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: '49bc3b0849d622b719dcc8b003c7b19d478e29fe', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: '4b94ee7207c95f78dd3fa2d3660647f553dda8a8', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": "Rating" }, stars.map(value => (h("button", { type: "button", part: "star", class: "bs-chatbot-feedback__star", role: "radio", "aria-checked": (this.rating >= value).toString(), "aria-label": `${value} star${value > 1 ? 's' : ''}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (h("div", { key: '390dc5a2d4073f89ac90fb6f753d9cd6072cc8e1', class: "bs-chatbot-feedback__field" }, h("label", { key: '4ade9e346c7c5af11ea66f7a491d99f76ba4de8d', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, "Tell us what you think"), h("textarea", { key: '8ef6e3fa14f5ebdc060e34b8b73ef08b3ed07396', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: "e.g.The response was helpful ....", value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: '6b2c93b3e8c494a8a24d2592163497b41c2eab26', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: 'a38c0b8ad956c56dc9d6f53152744e3e1f4bf049', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: 'b93d7d561dd3bf253c1a04b30ea61b8a27f65d37', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: '48cdda204d0d4855d7ec75b9be4715acfc9ad738' }), "Submit feedback")), h("button", { key: '40b3568e4aabf7a4e274b52c26e0216af539ed9f', type: "button", part: "new-chat", class: `bs-chatbot-feedback__new-chat ${this.submitted ? 'bs-chatbot-feedback__new-chat--primary' : 'bs-chatbot-feedback__new-chat--outlined'}`, onClick: this.onNewChatClick }, h(EditIcon, { key: '53804fd03520aefc0d88b5d35b6078c5488c121a' }), "Start new chat"))));
     }
     static get is() { return "bs-chatbot-feedback"; }
     static get encapsulation() { return "shadow"; }

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

@@ -74,7 +74,7 @@ export class BsChatbotHeader {
         this.bsClose.emit();
     };
     render() {
-        return (h("div", { key: 'b67eb065f0bacc73cea6cfba97f95db26d939fef', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: '14495ee7659e6d9198799b19fe2482996acd9cb1', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '4f90a6351c004327440e92ca32a7d5f16dc10f35', class: "bs-chatbot-header__actions" }, h("span", { key: '77a7a55d92a4844778cd2f9e968e497b6f6dc3ec', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '5e7e9ad3beb2a74d05178fb3b847994284b84078', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: '71fdc53fdb397fdb45a1e05d4ecf4505f2ee6546', name: "new-chat-icon" }, h(NewChatIcon, { key: '1ca210d70f3a16869092cf681d737c698b136e52' }))), h("bs-tooltip", { key: 'ec6e597102a7bccfbe82f3d4cdd24f6e9939671c', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: '5ab09f2170faa1e820ae43034e8d2c28263c8f9b', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '457c6b31a93bc8afb9f6140283332f1e9cece997', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: 'cec925b6dc90978e447ac2abe519fd39299f719d', name: "history-icon" }, h(HistoryIcon, { key: 'aec4f574f79fc80266cadb78d4db3a5e5a791af7' }))), h("bs-tooltip", { key: '76a28dd05c9648a27cb47d843a48c71b2a4736a1', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: 'f77e9dfc1640fd0820f1afdc47692767307793ed', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'd6c09ae435f7c43141990ac411bbfdd48be2746d', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? 'Collapse' : 'Expand', "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, h("slot", { key: 'd98d678009f56c298289527c505eb9863a783155', name: "expand-icon" }, h(ExpandIcon, { key: 'b5717154a53b3d6745a20de74f2e2a51497f1718' }))), h("bs-tooltip", { key: 'ee742bdb2e8f948756ea1f9b13ee2a1c35d0597d', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '7a19e71b35be8052f206beff78531f17ff080dab', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '758ddf35814919c575699bd27fdc303a80ef7307', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: 'c545d1a724431ccff6593ba3047462bd9bfaefeb', name: "close-icon" }, h(CloseIcon, { key: '4ed2a585be65e2c77200ceeb2b99329afda177a3' }))), h("bs-tooltip", { key: '9ce32d5f9772d91fea7a937341a5866938d87ac5', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
+        return (h("div", { key: 'e0ea19eeb010af536dba9981ed9859181445dfe3', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: 'b2e9ebadd61e80ad1f4559dd0e0130d6b36f625c', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '51a96ee8e2c456e00d090ef329a0a7625e8a22dd', class: "bs-chatbot-header__actions" }, h("span", { key: '26f392cb56b496da1e4c26fe378246bb47f0a7e9', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '7418cea294cc509323049494464fc292c643d881', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: '510a66d1d0cc7baccf0f2d9f2dc6b26acfc76d0b', name: "new-chat-icon" }, h(NewChatIcon, { key: 'b135187338a185bda4f145f2311c7ea3b21839d5' }))), h("bs-tooltip", { key: '55605b4ec0d3c51fc5fc5546676e240a64bb5278', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: 'bab4c50dcf6d0931f90de7a1c45249559149aa9c', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'a70f0acd00a29476800e0cc1367a1f11ab159c75', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: 'dfbd816dee51c428359509c4d9fc97efbd290a0e', name: "history-icon" }, h(HistoryIcon, { key: '5550515b799ab3d494d812aa9567781f86c7381a' }))), h("bs-tooltip", { key: '66cc280bc34b411b4ad8d0640acafbc14259bfab', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: '21bd18c8221473430d5afa844d0a8fd6072fabe4', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'fe794fafeb13f4aa5ae1f228b8b28eeb82317631', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? 'Collapse' : 'Expand', "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, h("slot", { key: '457d0ca096b2f44aee67db3ca6cae24d440b9bb0', name: "expand-icon" }, h(ExpandIcon, { key: '207caae0afda63b8ddc55b13c9de0abf991a5650' }))), h("bs-tooltip", { key: '12251a2b24cd651f0ee91307d62f7179e67fb066', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '25d6e11049392522aa8a0b1b9bc6327850a10084', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'ed9df95ed3922f23d135980ffc2e1306c3d09da2', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: '73fbf236b91e874ebc40a51b565b772d8b4f65fd', name: "close-icon" }, h(CloseIcon, { key: '26ab31c650988a86860790fd9591b5cd2d0daf3c' }))), h("bs-tooltip", { key: 'f51ce61c93ba84116545d95c6ce89b21e791dc4c', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
     }
     static get is() { return "bs-chatbot-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -105,7 +105,7 @@ export class BsChatbotResponseAction {
     };
     render() {
         const hasSources = !!this.sourcesCount && this.sourcesCount > 0;
-        return (h("div", { key: '7d97251380f7e6b002eaafb3699ea981d5068555', class: "bs-chatbot-response-action" }, h("button", { key: 'd05f73b0f1d1f9f03a452397ef3206a866abcefc', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: '30b7a9da1dd2c317ac7c4ecbdda76c0f146a3495', name: "like-icon" }, h(ThumbsUpIcon, { key: 'b5bf2e9915a5c1263e18304f4b487807cc256879' }))), h("button", { key: 'f601202a175a47978595d080d938ce48be1715d8', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: 'c141f978f453abc6062e8274a4fdb6e1f80ac5b2', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '158799c27d18b62152937e7485cec5a23598d177' }))), h("button", { key: 'cdb6b1ab5f2bb12e43ae3ab0fa73a81e24ba1f16', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: '8e9387d18ed444da1b7d20f4a6b60e7c2fae32bc', name: "copy-icon" }, h(CopyIcon, { key: '7c1cfede4ef084babd7aeeb3a2a3817ca4346663' }))), h("button", { key: 'f4e190de92eb4936594f4701c406c3b2bc1f84c8', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: 'c52e03dc83f047125a5bd1c73cafba8b71a21fed', name: "regenerate-icon" }, h(RegenerateIcon, { key: '1564599695557eea663d770779301c34e815cbf5' }))), h("div", { key: '90a6b3c75e169be71c217ac8b711bb2ca001ee49', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '2d8d25c6e183638233ef9287360bc0969f2fa2ac', 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: 'f992794d9e964c830e1780078ea83abec1be471b', name: "menu-icon" }, h(MenuIcon, { key: '4b75676316bc826b3a7cd19cba8f46b8ceacf19c' }))), this.menuOpen && (h("div", { key: 'f24430ebab56eda589f19f7cb9f3f1c31d7185cb', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '2978dee3a0d5521e805a4496d6e33c6b31b52fc6', name: "menu" })))), hasSources && (h("button", { key: '1ab402dd2ef3c97b5b30d86e4f1e3db4f879baf9', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'f2cf31ff9311d8c888f2b8a0130a9f82161c4b8f', name: "sources-icon" }, h(SourcesIcon, { key: '333dae604a7eb80319b8e822c332067076e4a04d' })), h("span", { key: '04929996660675c23f1a02fc1d756d6735b58b8d', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
+        return (h("div", { key: '6f0fe6d237fa76a44aebc5452d77619f8a6f3e07', class: "bs-chatbot-response-action" }, h("button", { key: 'e46a78f8a28c8b23780d86ea52618bb96003bbc6', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: 'cf59ea0115e99fef5e5398f8101ecd4702f6d13c', name: "like-icon" }, h(ThumbsUpIcon, { key: '0597457db34f2e4677f63a7253dd59015bbcbaf5' }))), h("button", { key: '9dd6db57941126a2b50f3c1c45653e35cc4e9113', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: '8ab78179e979275461cd420e1ab7919396e6126e', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '5f9eeeb87c3bb3f635468dfcdddb323069c20c6f' }))), h("button", { key: '6bf0a37024846ababcfc0c1593f6d9fd4bd2b6af', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: '68c68be3274b3bf2c0f59178640e6009ec5869da', name: "copy-icon" }, h(CopyIcon, { key: '229bd54acaad25cc05da69361142be1588c723f9' }))), h("button", { key: '1cc152937d132b179b72daf1342f63cbabcc67f2', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: '407f9527d50f75d0063b92a6f68ed6a4364b72bc', name: "regenerate-icon" }, h(RegenerateIcon, { key: 'f1d5fca176ef8f90c167a62307bda06bdc86b4a6' }))), h("div", { key: '2fe454900888c46dc17d24ce28c3af1d2d9afcf6', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '3046ca6507dd70c734a37e6aed89613167ce5e29', 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: '3e6814659655c0ba61bc84a3eacae0a13b2c9cd6', name: "menu-icon" }, h(MenuIcon, { key: '70a898b1158a284f1c8e07a6d92ce11de1265844' }))), this.menuOpen && (h("div", { key: '95bc1e4c5a8e8d160a6b59c36bf3485ecfdc8505', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '80dd0220745586c213c4372ded2f2138c4e3dadb', name: "menu" })))), hasSources && (h("button", { key: '4f1036874d1a02347820bb0d19a77c18f5d33bc0', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: '11c4b6b5399ffd011bb60da19265e19bc4407061', name: "sources-icon" }, h(SourcesIcon, { key: 'fd64afb252fb5b32332cc46ff664fc947df22ea5' })), h("span", { key: 'ef47e93369d033e3306e7006516470d5b1c9c13f', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
     }
     static get is() { return "bs-chatbot-response-action"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,7 +3,7 @@
   /* --bs-static-white is deliberately NOT theme-aware (never overridden in [data-theme="dark"]),
    * so using it here would leave the panel pure white in dark mode while --bs-text-default (used
    * for the heading below) switches to white -- invisible text on an unchanged white background.
-   * --bs-surface-raised is the theme-aware equivalent already used for bs-modal's own dialog box. */
+   * --bs-surface-raised is the theme-aware equivalent already used for bs-dialog's own dialog box. */
   --bs-chatbot-sources-drawer-bg: var(--bs-surface-raised);
   --bs-chatbot-sources-drawer-header-shadow: var(--bs-shadow-xs);
   --bs-chatbot-sources-drawer-header-padding-x: var(--bs-spacing-200);

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

@@ -57,7 +57,7 @@ export class BsChatbotSourcesDrawer {
     };
     render() {
         const displayCount = this.count ?? this.slottedCount;
-        return (h("div", { key: 'e71c8b6f4856092a6fd43fd6dcd8cda04d3a103e', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: 'f46a1383d8e95aeb83541b2620647839fbe4d3f9', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: '62663736cb4f9e56a5b837da27b4d7d8915c1838', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '765954b929796005966efaf5aa23ca68053a894e', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '562cfc14be64d938879fad31ab185a2f3a441e63', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '8e538aa2aa31b54c8845c9c5d8ffd581cbf1028b', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: '53b12abc52c217d3264ece6cf26daf8c5e01f84e', name: "collapse-icon" }, h(CaretRightIcon, { key: '90b61c4694fd1d908d74e47a19124327a001ce53' })))), h("div", { key: 'a7fc0ceb5b280867237ac3ce6c3bd314c7809075', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: 'db40db9dad7f4e24c8eb0665e2286870f0800843', onSlotchange: this.onSlotchange }))));
+        return (h("div", { key: '4f5ba818b20615f14f05744f7da90293687fb571', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: 'e42b0c3ea3c33da5ab3c5aff08a27dfdf91f9213', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: '47364bc1d824a102c63a8f3fbca310c3c50996db', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: 'ad91fd640f31ad585438ed0da4fa6964321d0839', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: 'c46163c92ba3d15e384101d5e37d72c1e2034534', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: 'f82bf6ec52abb532b3fd5f4b6d7d4405d71685a0', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: 'f7e7edab6658cbf745f06fa18931d9522e488723', name: "collapse-icon" }, h(CaretRightIcon, { key: '6e3ac570d6a5ca716b39c611b2f6d0c15078cbbf' })))), h("div", { key: '5006ed497dec22fb534a8805edbf24a8196e3cbc', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: 'f32856392781219b2f0102181cbcfb768a331cea', onSlotchange: this.onSlotchange }))));
     }
     static get is() { return "bs-chatbot-sources-drawer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@ export class BsChatbotSuggestionButton {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: 'ec0d9d02fe71438dc564a36d4e57bcf465b4395d', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '443a388996b21359df334af0319244f4c736e259' })));
+        return (h("button", { key: '6382d81881701ca9363c0031e8db634812f233f7', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'cc6a6586b36c70f5420f08ebc44db5452fe184bc' })));
     }
     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.cmp.test.js

@@ -0,0 +1,23 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-checkbox-skeleton', () => {
+    it('renders with role="status" and aria-label="Loading" by default', async () => {
+        const { root } = await render(h("bs-checkbox-skeleton", null));
+        const container = root.shadowRoot.querySelector('.bs-checkbox-skeleton');
+        expect(container).toEqualAttribute('role', 'status');
+        expect(container).toEqualAttribute('aria-label', 'Loading');
+        expect(root.shadowRoot.querySelector('.bs-checkbox-skeleton__box')).toHaveClass('bs-checkbox-skeleton__box--lg');
+    });
+    it('always renders both a box and a label placeholder', async () => {
+        const { root } = await render(h("bs-checkbox-skeleton", null));
+        expect(root.shadowRoot.querySelector('[part="box"]')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('[part="label"]')).not.toBeNull();
+    });
+    it('applies the correct box size class for each size value', async () => {
+        const { root, setProps } = await render(h("bs-checkbox-skeleton", { size: "sm" }));
+        expect(root.shadowRoot.querySelector('.bs-checkbox-skeleton__box')).toHaveClass('bs-checkbox-skeleton__box--sm');
+        await setProps({ size: 'md' });
+        expect(root.shadowRoot.querySelector('.bs-checkbox-skeleton__box')).toHaveClass('bs-checkbox-skeleton__box--md');
+        await setProps({ size: 'lg' });
+        expect(root.shadowRoot.querySelector('.bs-checkbox-skeleton__box')).toHaveClass('bs-checkbox-skeleton__box--lg');
+    });
+});

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

@@ -0,0 +1,64 @@
+:host {
+  display: inline-block;
+
+  --bs-checkbox-skeleton-size-sm: var(--bs-spacing-200);
+  --bs-checkbox-skeleton-size-md: var(--bs-spacing-250);
+  --bs-checkbox-skeleton-size-lg: var(--bs-spacing-300);
+  --bs-checkbox-skeleton-gap: var(--bs-spacing-100);
+  --bs-checkbox-skeleton-label-width: 96px;
+}
+
+.bs-checkbox-skeleton {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-checkbox-skeleton-gap);
+}
+
+.bs-checkbox-skeleton__box,
+.bs-checkbox-skeleton__label {
+  background: var(--bs-color-neutral-container);
+  animation: bs-checkbox-skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.bs-checkbox-skeleton__box {
+  flex-shrink: 0;
+  border-radius: var(--bs-border-radius-50);
+}
+
+.bs-checkbox-skeleton__box--sm {
+  width: var(--bs-checkbox-skeleton-size-sm);
+  height: var(--bs-checkbox-skeleton-size-sm);
+}
+
+.bs-checkbox-skeleton__box--md {
+  width: var(--bs-checkbox-skeleton-size-md);
+  height: var(--bs-checkbox-skeleton-size-md);
+}
+
+.bs-checkbox-skeleton__box--lg {
+  width: var(--bs-checkbox-skeleton-size-lg);
+  height: var(--bs-checkbox-skeleton-size-lg);
+}
+
+.bs-checkbox-skeleton__label {
+  width: var(--bs-checkbox-skeleton-label-width);
+  height: 16px;
+  border-radius: var(--bs-border-radius-50);
+}
+
+@keyframes bs-checkbox-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bs-checkbox-skeleton__box,
+  .bs-checkbox-skeleton__label {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,81 @@
+import { h } from "@stencil/core";
+/**
+ * A shape-matched loading placeholder for `bs-checkbox`, shown while the real label text isn't
+ * known yet (e.g. still being fetched from an API). Renders a small square (matching the
+ * checkbox's own box) beside a text-bar placeholder (standing in for the label), both pulsing
+ * together, sized to match `bs-checkbox`'s `sm`/`md`/`lg` box dimensions so layout doesn't shift
+ * once the real checkbox renders.
+ *
+ * ## When to use
+ * - In place of a `bs-checkbox` whose label/checked state depends on data that hasn't loaded yet.
+ *
+ * ## When not to use
+ * - While a checkbox's own change handler is running (e.g. a save request in flight) -- render the
+ *   real `bs-checkbox` itself; this component is not a saving-in-progress spinner.
+ *
+ * @part container - The outer wrapper holding both placeholder pieces.
+ * @part box - The pulsing placeholder standing in for the checkbox's own box.
+ * @part label - The pulsing placeholder bar standing in for the label text.
+ * @prop --bs-checkbox-skeleton-size-sm - Box width/height at `size="sm"`. Aliased to
+ *   `--bs-spacing-200`, mirroring `bs-checkbox`'s own `--bs-checkbox-size-sm` -- not read directly
+ *   from it, since these are two separate shadow roots.
+ * @prop --bs-checkbox-skeleton-size-md - Box width/height at `size="md"`. Aliased to
+ *   `--bs-spacing-250`.
+ * @prop --bs-checkbox-skeleton-size-lg - Box width/height at `size="lg"`. Aliased to
+ *   `--bs-spacing-300`.
+ * @prop --bs-checkbox-skeleton-gap - Gap between the box and label placeholders. Aliased to
+ *   `--bs-spacing-100`, mirroring `bs-checkbox`'s own `--bs-checkbox-gap`.
+ * @prop --bs-checkbox-skeleton-label-width - Width of the label placeholder bar. Defaults to
+ *   `96px`.
+ */
+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';
+    render() {
+        return (h("span", { key: '3ce0fec776997d16edcb84d3fe46c461721230b1', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": "Loading" }, h("span", { key: 'b59ec36ba925cb95545a4836bfa3b631a5ac54f6', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: '847024bd9c5d30157fe2e2cf3ef7421c8741dc21', part: "label", class: "bs-checkbox-skeleton__label" })));
+    }
+    static get is() { return "bs-checkbox-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-checkbox-skeleton.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-checkbox-skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsCheckboxSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "BsCheckboxSize": {
+                            "location": "import",
+                            "path": "../bs-checkbox",
+                            "id": "src/components/bs-checkbox/bs-checkbox.tsx::BsCheckboxSize",
+                            "referenceLocation": "BsCheckboxSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sizing scale, matching the `bs-checkbox` size it stands in for. Defaults to `lg`, the same\n(unusual) default `bs-checkbox` itself uses."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'lg'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,25 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../../stories-utils";
+const sizes = ['sm', 'md', 'lg'];
+const meta = {
+    title: 'Components/bs-checkbox-skeleton',
+    parameters: { docs: { description: { component: componentDescription('bs-checkbox-skeleton') } } },
+    render: args => html `<bs-checkbox-skeleton size=${args.size}></bs-checkbox-skeleton>`,
+    argTypes: {
+        size: { control: 'select', options: sizes, description: propDescription('bs-checkbox-skeleton', 'size') },
+    },
+    args: {
+        size: 'lg',
+    },
+};
+export default meta;
+export const Default = {};
+export const Sizes = {
+    render: () => html `
+    <div style="display:flex; flex-direction:column; gap:12px; align-items:flex-start;">
+      <bs-checkbox-skeleton size="sm"></bs-checkbox-skeleton>
+      <bs-checkbox-skeleton size="md"></bs-checkbox-skeleton>
+      <bs-checkbox-skeleton size="lg"></bs-checkbox-skeleton>
+    </div>
+  `,
+};

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

@@ -7,6 +7,16 @@ describe('bs-checkbox', () => {
         expect(input.checked).toBe(false);
         expect(root.shadowRoot.querySelector('[part="box"] [part="icon"]')).toBeNull();
     });
+    it('reflects ariaLabel to the native input, for label-less accessible names', async () => {
+        const { root } = await render(h("bs-checkbox", { ariaLabel: "Select all rows" }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('aria-label', 'Select all rows');
+    });
+    it('does not set aria-label on the native input when ariaLabel is not provided', async () => {
+        const { root } = await render(h("bs-checkbox", null));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).not.toHaveAttribute('aria-label');
+    });
     it('reflects the checked prop to the native input and shows the check icon', async () => {
         const { root } = await render(h("bs-checkbox", { checked: true }));
         const input = root.shadowRoot.querySelector('input');

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

@@ -180,10 +180,16 @@
 }
 
 .bs-checkbox__label {
-  font-size: var(--bs-font-size-sm);
+  font-size: var(--bs-font-size-md);
   color: var(--bs-checkbox-label-color);
 }
 
+/* Figma specs the label at fontsize/body/sm (14px) only for size="sm" -- size="md"/"lg" both use
+   fontsize/body/md (16px), which is the default set above. */
+.bs-checkbox__box--sm ~ .bs-checkbox__label {
+  font-size: var(--bs-font-size-sm);
+}
+
 .bs-checkbox--disabled .bs-checkbox__label {
   color: var(--bs-checkbox-label-color-disabled);
 }

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

@@ -43,6 +43,17 @@ export class BsCheckbox {
     /** 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
@@ -81,7 +92,7 @@ export class BsCheckbox {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: 'a5cae53f4a82545ce4f9146891ad3a24c90ad2cf', class: `bs-checkbox ${this.disabled ? 'bs-checkbox--disabled' : ''}` }, h("input", { key: 'b9e40a9c3347bcb8517474209febd048bd853e25', 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), onChange: this.onChange }), h("span", { key: '60af78d14456f4cb65d6e9e7aa54f4b4bce84cfe', part: "box", class: boxClasses }, showIcon && (h("svg", { key: '5c64f14f979b866a71290584931f994fc485fb70', 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: 'd0993da246362d50fc924e8e6e9e9465cbec631f', part: "label", class: "bs-checkbox__label" }, h("slot", { key: '719bb1f6c842f9a482f2672490f5df1025090d87' }))));
+        return (h("label", { key: '78f89b0841c20e030bf8af7384a870d9e660e44f', class: `bs-checkbox ${this.disabled ? 'bs-checkbox--disabled' : ''}` }, h("input", { key: '254d622c1603c444272864f10bc6abccac825f76', 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: '39d94a0d5e590b920082911400554185088a2ebe', part: "box", class: boxClasses }, showIcon && (h("svg", { key: '609448a396a59a9aad9d14eeb8c574d7255dc076', 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: '16ed6f220ee2417837c2166c9369bff78638095d', part: "label", class: "bs-checkbox__label" }, h("slot", { key: 'd22610712a6bb1e41ecc72ae60c1e6a5df8e93da' }))));
     }
     static get is() { return "bs-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -203,6 +214,26 @@ export class BsCheckbox {
                 "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"
             }
         };
     }

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

@@ -34,6 +34,18 @@ const meta = {
 };
 export default meta;
 export const Default = {};
+export const Horizontal = {
+    // A layout demo, not a real prop -- bs-checkbox has no orientation/group concept of its own
+    // (unlike Carbon's <cds-checkbox-group>), so arranging multiple instances in a row is purely the
+    // consuming app's own flex/grid layout, same as the vertical stacking shown implicitly
+    // everywhere else in this file.
+    render: () => html `
+    <div style="display:flex; gap:24px; align-items:center;">
+      <bs-checkbox>Checkbox label</bs-checkbox>
+      <bs-checkbox>Checkbox label</bs-checkbox>
+    </div>
+  `,
+};
 export const Checked = {
     args: { checked: true },
 };