@brandsync/wc 0.0.10 → 0.0.12

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: 'b1f536775af30bea47474dbcf41f444e9361fabd', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: '1e650269ff177b26e1dce30d9e04b4fab9de9698', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '6a35a216f3bbda37ebd14ba801bf83f1f4941616', class: "bs-chatbot-header__actions" }, h("span", { key: 'af2b8a3eeafd27a946e1dd1c51c326c6f7e73531', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '2928c845fd3737d68d672305437d9edd76d1deb3', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: 'bdab9f84e61bc92e16abcb7a9019300291690387', name: "new-chat-icon" }, h(NewChatIcon, { key: 'c61ddb8d3b8f9945f9986253cbe16e462c836f28' }))), h("bs-tooltip", { key: '3edbc3aae276ad91d2e70d21040efaffef101381', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: 'ef3bc303486fea9088b3855ac211baf6e1acae8b', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '60e2787be7401832a29f806723414b361c480c47', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: '2bbf8e675aa150740a23d59015446e012adbcb05', name: "history-icon" }, h(HistoryIcon, { key: '55badb6fc7cf1a17abbdae74896789cf2802be01' }))), h("bs-tooltip", { key: 'd4fd6cffbff586949b9357605cf23362a09fbd86', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: 'e2aa88c87d900d581b5a353cb2a4d014818b238b', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'aa5357f502a32b586b2d5c4837b37364f00d344a', 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: '312e8c17f49c84672533e37989c73072038ca07f', name: "expand-icon" }, h(ExpandIcon, { key: 'a0b666ae7b3660d4eb892407a82a84a0d8c8607b' }))), h("bs-tooltip", { key: '3c43e4d14ef4cdedaaecebed43927eb8f59e3391', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '1e252dcc382c0f2c5ae89a8dcf96e9d76c086b01', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'b95104b5dc629e70c43f0eb01f34fd0ba57db670', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: '7c24bb86799528bc1e1bcc6419217b2048f70835', name: "close-icon" }, h(CloseIcon, { key: 'c53e2028c86264bac5082e9e145deb79eca3156d' }))), h("bs-tooltip", { key: 'f132fa96cc7942a3c4574403da1f2a0d586c0068', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
+        return (h("div", { key: 'f867f6c63e8931079fbbee1ce4dc7b74f6bf7ddd', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: 'a91afd437bbe43e9be65d64df36688d8d885916d', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '3dddaab00c3b983b1e86be356eec9c07c415de1b', class: "bs-chatbot-header__actions" }, h("span", { key: '0f0b3388022c75ef0e04c1bb41a826fb0318764d', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '7b1eb2edc2414fece90681b1d56de3a9b0c7171c', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: 'a4ff761ddc7b3dbcfe449a89f731561cb3b85d0a', name: "new-chat-icon" }, h(NewChatIcon, { key: 'b2244e10010085b85a258413f7391180f6b3a20f' }))), h("bs-tooltip", { key: 'b24f3b73d6cfca88f14e12e7bc0ad0634d3338c1', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: '94a5bf67800ea1a608a04a0bb33d1a7aed053045', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '49bb1dc0956c021becaaf562146352b9abcc415b', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: 'f2c6dc057674cfc803d822d936b3fcf9d6f2f576', name: "history-icon" }, h(HistoryIcon, { key: '0ededb5c7c553f1a6723f3d20b734cb5200b2a4d' }))), h("bs-tooltip", { key: 'd533c9ac7661d89d8c8fe4865639c6d4fdab5ca3', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: 'e183c44cd967d683fa8de2c53c53913b0a1a19e4', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'f3af2b7730e1410f97fc46612148c1728be67517', 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: '808dcea2f16a09615efa1e17c7cdaadb35cac494', name: "expand-icon" }, h(ExpandIcon, { key: '58487c506c21b5e4214be89ef37126ee9404550b' }))), h("bs-tooltip", { key: 'e89cd45c9c34e840bb316ac2acc281d8bbc09eb4', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '1ccdb12018a5e0bffb6e50fb4974799f177cf943', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'e416fe4e56f37b9c623e86764cf5e3a510e89657', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: 'db32a3957b3d635e34665ea4b3022d888bd4c5c8', name: "close-icon" }, h(CloseIcon, { key: '1062922ee3b32445503c2bc81913806f1684683b' }))), h("bs-tooltip", { key: '90d5458d0eb14e99767ea5b1d0e8c9b23b51aaeb', 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: 'bae036e0fce39e91ad77e048e6c169ea72ce78e4', class: "bs-chatbot-response-action" }, h("button", { key: 'aadfb92da35ba7b5b105cfdc3ad506c7a7fd78e7', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: 'f61c62fa761d277b3ef1b6c7a1bf4b8077ac340b', name: "like-icon" }, h(ThumbsUpIcon, { key: 'a95b09db3fee703c4d2e31a5efa590feb777f3b5' }))), h("button", { key: '37bdacfab99f444ae215b0da5a7b11912562baf7', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: 'b948f912ce5cd82c570bfcf7fe69f01f4bf993b0', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '59e901ec41273c235fb0e484e53d23e529a1f429' }))), h("button", { key: '5f0f954f0cadcfda62d0493ebbf07651dc9c43c3', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: 'a965380a2c3af43ba49b735c19c7b4afb5ec9c9f', name: "copy-icon" }, h(CopyIcon, { key: 'c9e7d8ef53a14728bced9c753aba3529ac97152f' }))), h("button", { key: 'e06f0c60698dea9a17005d6b233e59e5389c2c11', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: '9a5aad36b3f1e217b2ab1718c25d451bc4f0b326', name: "regenerate-icon" }, h(RegenerateIcon, { key: '02aa85caf9c69a84fab24fd97361fa0a2a42c784' }))), h("div", { key: '6c48442ee1c32fcdecab2521c7e7773aae413c61', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '749474386109e0c6bf3d0c18396ab75514a84db5', 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: 'a48edebb1eb697e7ebb80ceee8b674ad28ae760b', name: "menu-icon" }, h(MenuIcon, { key: '3bc463d9d8882ae373221b754d234938bd47f7de' }))), this.menuOpen && (h("div", { key: 'b1217dd05886155d65b6c6e52933b23ddfbeda4e', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '5a22ff4ffe417bbd25dfddbf18a943862b499f24', name: "menu" })))), hasSources && (h("button", { key: '35d6be1ee305a8549ebc1bed28884c0c5dc83220', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'af5a033146160fc90eb9ad3d28eb0ecc3628347c', name: "sources-icon" }, h(SourcesIcon, { key: '908029587106b710ddcee80fe207dddc8f77723c' })), h("span", { key: 'aa64462f7f5f4d96adfdf7172a5c2ac18cb1e608', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
+        return (h("div", { key: '7bec7f4a10f842d706ae24aca5d4e265420d9ddf', class: "bs-chatbot-response-action" }, h("button", { key: '750e004f98f72f3737468bda9985484d344ebaa3', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: '2706c270afcf0c71b94e28bef5ab803a29168508', name: "like-icon" }, h(ThumbsUpIcon, { key: '8fe6d8d403e8d2a80b37edd10e7b4f56197ad544' }))), h("button", { key: 'e807b85ddd08e2a37239fe3927f1a385371b6e60', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: 'd6dbcbd2ee1b7e74e05dd2cbae1c69d98e414904', name: "dislike-icon" }, h(ThumbsDownIcon, { key: 'f10796ec4a207e9f8eb55441b762e8873a2c615f' }))), h("button", { key: 'd6452d6a3cbb9aec60e65085086c312dc8723ce9', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: '9f650bebcaef7cdf4797bc94c28f934887954722', name: "copy-icon" }, h(CopyIcon, { key: 'bc8fcfd2c9b2d3b0b634f3c92750ffea8b301270' }))), h("button", { key: 'f7b7fc1048a3e641c460e0708e3f751178c337da', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: '79cc6721191aff640823fdea839668edddfb5746', name: "regenerate-icon" }, h(RegenerateIcon, { key: '4f8dcfcae578dc5d66e7707f961717a5dd513e20' }))), h("div", { key: '15282bbecdec01239855b7e6637fab4f12801122', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: 'f5d2b3db52c76e129e1d56a4bef819cf1e8bc5ed', 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: '8796afebcc39b15c858bbea22ae377631da8ce2e', name: "menu-icon" }, h(MenuIcon, { key: '21a189fb8e61033e7644bf6e6c3eecb2ffa8e880' }))), this.menuOpen && (h("div", { key: 'd6617d1ff68199cdbdeabda382018fb48c0a1bd9', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: 'b4645cb0ccf01b265efa56726ffb1fd5a8ec13db', name: "menu" })))), hasSources && (h("button", { key: '736c23e7560404a0e7177b372993317a84a19bf5', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'bb5187741f2cb4e470038753df41dcee2ceaf02e', name: "sources-icon" }, h(SourcesIcon, { key: '4d488a150dc6b86d1d6045b55f16bce22c5cdd22' })), h("span", { key: '02da04e9df74b4926cf8f0d6a4c7548c1bb1e699', 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.js

@@ -57,7 +57,7 @@ export class BsChatbotSourcesDrawer {
     };
     render() {
         const displayCount = this.count ?? this.slottedCount;
-        return (h("div", { key: '54cb56455b630d5ed30dd2a925728f2803143b17', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: 'd24eabd0ac2c36ec4033a9b5c361aa32225fa78a', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: '0bec3fb848552496e1884b4731c5e1964570c70d', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '955389bd4f3ba1950c9af404e5880a6837298384', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '40d83288bbd257504ef814247c7bd4664df9e169', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '56a15c64faea80790387d4918843c806b684268b', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: 'c321f53482f0265357a6a29fc40e0ff3766f0b74', name: "collapse-icon" }, h(CaretRightIcon, { key: 'c3d4c17bebd2611b27c3e7f87d359e4b46c41d4f' })))), h("div", { key: 'd6c4b8e3660f765112f0c33dd72021af118332d9', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: '19759a01d921ed2517cbca2b01ea53741a207b8b', onSlotchange: this.onSlotchange }))));
+        return (h("div", { key: '8f71e38ceb897b13d7726495c8b27619e246af2b', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: 'ee57cd05934a900b71b5445f7d31caf8e038e774', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: 'd9aa9f82aad30480bf52b7a701f094b9175e3a98', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '913ac293e7af80ee142635ae7bd4b3339ac746b0', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: 'ad659ddf56b745f915df9909c07a6a617e8e7d5a', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '30ac395d5087496a955b956437dc9459eabcbe10', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: 'aaa9629de257bb416c24e9b5b15ac634e71caf38', name: "collapse-icon" }, h(CaretRightIcon, { key: '9bbb6d7875cd5ce27ec63c03113a7982a6309814' })))), h("div", { key: 'aa0d81e61701b50231a802120443f0819b2b0a98', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: 'cbfd567766318fc4d360804c4de5e591654a29c0', 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: '2a5213dc81a29dd68f99717b93e6f5396db5c5da', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '28b5ac8ddcdab80fb377a897dc1af62257473385' })));
+        return (h("button", { key: '4a8fe89091ddc9d343c58d22b35b9f8dc2691490', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'f0295569d8aac7ad51116d3fde445dda7bcb24a6' })));
     }
     static get is() { return "bs-chatbot-suggestion-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,117 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-checkbox', () => {
+    it('renders an unchecked native checkbox by default', async () => {
+        const { root } = await render(h("bs-checkbox", null));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('type', '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');
+        expect(input.checked).toBe(true);
+        expect(root.shadowRoot.querySelector('[part="box"]')).toHaveClass('bs-checkbox__box--selected');
+        expect(root.shadowRoot.querySelector('[part="icon"]')).not.toBeNull();
+    });
+    it('clicking the input toggles checked and emits bsChange with the new value', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-checkbox", null));
+        const bsChangeSpy = spyOnEvent('bsChange');
+        const input = root.shadowRoot.querySelector('input');
+        input.click();
+        await waitForChanges();
+        expect(input.checked).toBe(true);
+        expect(bsChangeSpy).toHaveReceivedEventTimes(1);
+        expect(bsChangeSpy).toHaveReceivedEventDetail(true);
+        input.click();
+        await waitForChanges();
+        expect(input.checked).toBe(false);
+        expect(bsChangeSpy).toHaveReceivedEventTimes(2);
+        expect(bsChangeSpy).toHaveReceivedEventDetail(false);
+    });
+    describe('indeterminate', () => {
+        it('sets the native input .indeterminate JS property, not an HTML attribute', async () => {
+            const { root } = await render(h("bs-checkbox", { indeterminate: true }));
+            const input = root.shadowRoot.querySelector('input');
+            expect(input.indeterminate).toBe(true);
+            expect(input).not.toHaveAttribute('indeterminate');
+        });
+        it('takes visual precedence over checked, showing the minus icon', async () => {
+            const { root } = await render(h("bs-checkbox", { checked: true, indeterminate: true }));
+            const box = root.shadowRoot.querySelector('[part="box"]');
+            expect(box).toHaveClass('bs-checkbox__box--selected');
+            const icon = root.shadowRoot.querySelector('[part="icon"]');
+            expect(icon.querySelector('path')).not.toBeNull();
+            // Minus icon is a single horizontal line; check icon has two line segments in its path data.
+            expect(icon.innerHTML).toContain('M3 8H13');
+        });
+        it('updates the native .indeterminate property when the prop changes after initial render', async () => {
+            const { root, waitForChanges } = await render(h("bs-checkbox", null));
+            const input = root.shadowRoot.querySelector('input');
+            expect(input.indeterminate).toBe(false);
+            root.indeterminate = true;
+            await waitForChanges();
+            expect(input.indeterminate).toBe(true);
+        });
+        it('clears indeterminate when the user toggles the checkbox', async () => {
+            const { root, waitForChanges } = await render(h("bs-checkbox", { indeterminate: true }));
+            const input = root.shadowRoot.querySelector('input');
+            input.click();
+            await waitForChanges();
+            expect(input.indeterminate).toBe(false);
+            expect(root.indeterminate).toBe(false);
+        });
+    });
+    describe('disabled', () => {
+        it('sets the disabled attribute on the native input', async () => {
+            const { root } = await render(h("bs-checkbox", { disabled: true }));
+            const input = root.shadowRoot.querySelector('input');
+            expect(input).toHaveAttribute('disabled');
+        });
+        it('prevents toggling via click', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-checkbox", { disabled: true }));
+            const bsChangeSpy = spyOnEvent('bsChange');
+            const input = root.shadowRoot.querySelector('input');
+            input.click();
+            await waitForChanges();
+            expect(input.checked).toBe(false);
+            expect(bsChangeSpy).toHaveReceivedEventTimes(0);
+        });
+    });
+    describe('error', () => {
+        it('applies the error class to the box', async () => {
+            const { root } = await render(h("bs-checkbox", { error: true }));
+            const box = root.shadowRoot.querySelector('[part="box"]');
+            expect(box).toHaveClass('bs-checkbox__box--error');
+        });
+    });
+    ['sm', 'md', 'lg'].forEach(size => {
+        it(`renders size="${size}" with the matching box modifier class`, async () => {
+            const { root } = await render(h("bs-checkbox", { size: size }));
+            const box = root.shadowRoot.querySelector('[part="box"]');
+            if (size === 'lg') {
+                expect(box).not.toHaveClass('bs-checkbox__box--sm');
+                expect(box).not.toHaveClass('bs-checkbox__box--md');
+            }
+            else {
+                expect(box).toHaveClass(`bs-checkbox__box--${size}`);
+            }
+        });
+    });
+    it('renders label slot content', async () => {
+        const { root } = await render(h("bs-checkbox", null, "Accept terms"));
+        expect(root).toHaveTextContent('Accept terms');
+        const label = root.shadowRoot.querySelector('[part="label"]');
+        expect(label.querySelector('slot')).not.toBeNull();
+    });
+});

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

@@ -0,0 +1,199 @@
+/**
+ * @prop --bs-checkbox-radius: Corner radius of the box, constant across all sizes. Aliased to --bs-border-radius-50.
+ * @prop --bs-checkbox-gap: Gap between the box and the label text. Aliased to --bs-spacing-100.
+ * @prop --bs-checkbox-size-sm: Box width/height at size="sm". Aliased to --bs-spacing-200.
+ * @prop --bs-checkbox-size-md: Box width/height at size="md". Aliased to --bs-spacing-250.
+ * @prop --bs-checkbox-size-lg: Box width/height at size="lg". Aliased to --bs-spacing-300.
+ * @prop --bs-checkbox-border-width-sm: Border width at size="sm".
+ * @prop --bs-checkbox-border-width-md: Border width at size="md".
+ * @prop --bs-checkbox-border-width-lg: Border width at size="lg".
+ * @prop --bs-checkbox-border-default: Border color, deselected/enabled. Aliased to --bs-border-default.
+ * @prop --bs-checkbox-bg-hover: Box background, deselected/hovered. Aliased to --bs-surface-hover.
+ * @prop --bs-checkbox-border-hover: Border color, deselected/hovered. Aliased to --bs-border-neutral-hover.
+ * @prop --bs-checkbox-bg-focus: Box background, deselected/focused. Aliased to --bs-surface-raised.
+ * @prop --bs-checkbox-border-focus: Border color, deselected/focused. Aliased to --bs-border-neutral-hover.
+ * @prop --bs-checkbox-focus-ring-color: Focus ring color, drawn outside the box. Aliased to --bs-border-neutral-focus.
+ * @prop --bs-checkbox-bg-disabled: Box background, disabled. Aliased to --bs-surface-action-disabled.
+ * @prop --bs-checkbox-border-disabled: Border color, disabled. Aliased to --bs-border-neutral-disabled.
+ * @prop --bs-checkbox-border-error: Border color, deselected/error. Aliased to --bs-border-error.
+ * @prop --bs-checkbox-bg-selected: Box background, selected or indeterminate/enabled. Aliased to --bs-color-primary-default.
+ * @prop --bs-checkbox-border-selected: Border color, selected or indeterminate/enabled. Aliased to --bs-color-primary-default.
+ * @prop --bs-checkbox-bg-selected-hover: Box background, selected or indeterminate/hovered. Aliased to --bs-color-primary-hover.
+ * @prop --bs-checkbox-border-selected-hover: Border color, selected or indeterminate/hovered. Aliased to --bs-color-primary-hover.
+ * @prop --bs-checkbox-bg-selected-error: Box background, selected or indeterminate/error. Aliased to --bs-icon-error.
+ * @prop --bs-checkbox-border-selected-error: Border color, selected or indeterminate/error. Aliased to --bs-icon-error.
+ * @prop --bs-checkbox-icon-color: Check/minus icon color. Aliased to --bs-icon-static-white.
+ * @prop --bs-checkbox-icon-color-disabled: Check/minus icon color, disabled. Aliased to --bs-icon-disabled.
+ * @prop --bs-checkbox-label-color: Label text color. Aliased to --bs-text-default.
+ * @prop --bs-checkbox-label-color-disabled: Label text color, disabled. Aliased to --bs-text-on-disabled.
+ * @prop --bs-checkbox-label-color-error: Label text color, error. Aliased to --bs-text-error.
+ */
+:host {
+  display: inline-block;
+
+  --bs-checkbox-radius: var(--bs-border-radius-50);
+  --bs-checkbox-gap: var(--bs-spacing-100);
+
+  --bs-checkbox-size-sm: var(--bs-spacing-200);
+  --bs-checkbox-size-md: var(--bs-spacing-250);
+  --bs-checkbox-size-lg: var(--bs-spacing-300);
+
+  --bs-checkbox-border-width-sm: 1.333px;
+  --bs-checkbox-border-width-md: 1.667px;
+  --bs-checkbox-border-width-lg: 2px;
+
+  --bs-checkbox-border-default: var(--bs-border-default);
+  --bs-checkbox-bg-hover: var(--bs-surface-hover);
+  --bs-checkbox-border-hover: var(--bs-border-neutral-hover);
+  --bs-checkbox-bg-focus: var(--bs-surface-raised);
+  --bs-checkbox-border-focus: var(--bs-border-neutral-hover);
+  --bs-checkbox-focus-ring-color: var(--bs-border-neutral-focus);
+  --bs-checkbox-bg-disabled: var(--bs-surface-action-disabled);
+  --bs-checkbox-border-disabled: var(--bs-border-neutral-disabled);
+  --bs-checkbox-border-error: var(--bs-border-error);
+
+  --bs-checkbox-bg-selected: var(--bs-color-primary-default);
+  --bs-checkbox-border-selected: var(--bs-color-primary-default);
+  --bs-checkbox-bg-selected-hover: var(--bs-color-primary-hover);
+  --bs-checkbox-border-selected-hover: var(--bs-color-primary-hover);
+  --bs-checkbox-bg-selected-error: var(--bs-icon-error);
+  --bs-checkbox-border-selected-error: var(--bs-icon-error);
+
+  --bs-checkbox-icon-color: var(--bs-icon-static-white);
+  --bs-checkbox-icon-color-disabled: var(--bs-icon-disabled);
+
+  --bs-checkbox-label-color: var(--bs-text-default);
+  --bs-checkbox-label-color-disabled: var(--bs-text-on-disabled);
+  --bs-checkbox-label-color-error: var(--bs-text-error);
+}
+
+.bs-checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-checkbox-gap);
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.bs-checkbox--disabled {
+  cursor: not-allowed;
+}
+
+/* The native input is visually hidden but stays in the layout/focus/keyboard chain -- opacity: 0
+   (not display: none) so it can still receive and show focus. */
+.bs-checkbox__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.bs-checkbox__input:disabled {
+  cursor: not-allowed;
+}
+
+.bs-checkbox__box {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--bs-checkbox-size-lg);
+  height: var(--bs-checkbox-size-lg);
+  border: var(--bs-checkbox-border-width-lg) solid var(--bs-checkbox-border-default);
+  border-radius: var(--bs-checkbox-radius);
+  background: transparent;
+  color: var(--bs-checkbox-icon-color);
+}
+
+.bs-checkbox__box--md {
+  width: var(--bs-checkbox-size-md);
+  height: var(--bs-checkbox-size-md);
+  border-width: var(--bs-checkbox-border-width-md);
+}
+
+.bs-checkbox__box--sm {
+  width: var(--bs-checkbox-size-sm);
+  height: var(--bs-checkbox-size-sm);
+  border-width: var(--bs-checkbox-border-width-sm);
+}
+
+.bs-checkbox__box--selected {
+  background: var(--bs-checkbox-bg-selected);
+  border-color: var(--bs-checkbox-border-selected);
+}
+
+/* Hover/focus -- keyed off the hidden native input's pseudo-classes, since it sits on top of and
+   is the same size as the box, so it always reflects the user's actual pointer/keyboard target. */
+.bs-checkbox__input:hover:not(:disabled) ~ .bs-checkbox__box {
+  background: var(--bs-checkbox-bg-hover);
+  border-color: var(--bs-checkbox-border-hover);
+}
+
+.bs-checkbox__input:hover:not(:disabled) ~ .bs-checkbox__box--selected {
+  background: var(--bs-checkbox-bg-selected-hover);
+  border-color: var(--bs-checkbox-border-selected-hover);
+}
+
+.bs-checkbox__input:focus-visible ~ .bs-checkbox__box {
+  background: var(--bs-checkbox-bg-focus);
+  border-color: var(--bs-checkbox-border-focus);
+  outline: 2px solid var(--bs-checkbox-focus-ring-color);
+  outline-offset: 2px;
+}
+
+.bs-checkbox__input:focus-visible ~ .bs-checkbox__box--selected {
+  background: var(--bs-checkbox-bg-selected-hover);
+  border-color: var(--bs-checkbox-border-selected-hover);
+}
+
+.bs-checkbox__box--error {
+  border-color: var(--bs-checkbox-border-error);
+}
+
+.bs-checkbox__box--error.bs-checkbox__box--selected {
+  background: var(--bs-checkbox-bg-selected-error);
+  border-color: var(--bs-checkbox-border-selected-error);
+}
+
+.bs-checkbox__box--disabled {
+  background: var(--bs-checkbox-bg-disabled);
+  border-color: var(--bs-checkbox-border-disabled);
+  color: var(--bs-checkbox-icon-color-disabled);
+}
+
+.bs-checkbox__box--disabled.bs-checkbox__box--selected {
+  background: var(--bs-checkbox-bg-disabled);
+  border-color: var(--bs-checkbox-border-disabled);
+}
+
+.bs-checkbox__icon {
+  width: 80%;
+  height: 80%;
+}
+
+.bs-checkbox__label {
+  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);
+}
+
+.bs-checkbox:not(.bs-checkbox--disabled) .bs-checkbox__box--error ~ .bs-checkbox__label {
+  color: var(--bs-checkbox-label-color-error);
+}