@brandsync/wc 1.19.0 → 1.20.1

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

@@ -0,0 +1,58 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { runAxeCheck } from "../../test/helpers/conventions";
+const boxes = (root) => Array.from(root.querySelectorAll('bs-checkbox'));
+const input = (b) => b.shadowRoot.querySelector('input');
+const basic = (extra = {}) => (h("bs-checkbox-group", { label: "Notify by", ...extra }, h("bs-checkbox", { value: "email" }, "Email"), h("bs-checkbox", { value: "sms" }, "SMS"), h("bs-checkbox", { value: "push" }, "Push")));
+describe('bs-checkbox-group', () => {
+    it('is a fieldset with a legend', async () => {
+        const { root } = await render(basic());
+        expect(root.shadowRoot.querySelector('fieldset')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('legend').textContent).toBe('Notify by');
+    });
+    it('value checks the matching boxes', async () => {
+        const { root, waitForChanges } = await render(basic());
+        root.value = ['email', 'push'];
+        await waitForChanges();
+        expect(boxes(root).map(b => b.checked)).toEqual([true, false, true]);
+        root.value = [];
+        await waitForChanges();
+        expect(boxes(root).map(b => b.checked)).toEqual([false, false, false]);
+    });
+    it('takes its initial value from checked boxes', async () => {
+        const { root, waitForChanges } = await render(h("bs-checkbox-group", { label: "x" }, h("bs-checkbox", { value: "a", checked: true }, "A"), h("bs-checkbox", { value: "b" }, "B")));
+        await waitForChanges();
+        expect(root.value).toEqual(['a']);
+    });
+    it('emits one bsChange with the array of values', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(basic());
+        await waitForChanges();
+        const spy = spyOnEvent('bsChange');
+        input(boxes(root)[0]).click();
+        await waitForChanges();
+        input(boxes(root)[2]).click();
+        await waitForChanges();
+        expect(spy).toHaveReceivedEventTimes(2);
+        expect(spy).toHaveReceivedEventDetail(['email', 'push']);
+        expect(root.value).toEqual(['email', 'push']);
+    });
+    it('shows helper text, replaced by the error, and flags the boxes', async () => {
+        const { root, waitForChanges } = await render(basic({ description: 'Choose any' }));
+        const fs = root.shadowRoot.querySelector('fieldset');
+        const desc = root.shadowRoot.querySelector('[part="description"]');
+        expect(fs).toEqualAttribute('aria-describedby', desc.id);
+        root.error = 'Pick at least one';
+        await waitForChanges();
+        const err = root.shadowRoot.querySelector('[part="error"]');
+        expect(err.textContent).toBe('Pick at least one');
+        expect(fs).toEqualAttribute('aria-invalid', 'true');
+        expect(boxes(root).every(b => b.error)).toBe(true);
+    });
+    it('horizontal orientation lays boxes in a row', async () => {
+        const { root } = await render(basic({ orientation: 'horizontal' }));
+        expect(getComputedStyle(root.shadowRoot.querySelector('[part="options"]')).flexDirection).toBe('row');
+    });
+    it('passes axe', async () => {
+        const { root } = await render(basic({ description: 'Choose any' }));
+        await runAxeCheck(root);
+    });
+});

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

@@ -0,0 +1,65 @@
+/**
+ * @prop --bs-checkbox-group-gap: Gap between the legend, the options and the helper/error text. Aliased to --bs-spacing-50.
+ * @prop --bs-checkbox-group-options-gap: Gap between checkboxes. Aliased to --bs-spacing-0 (vertical) / --bs-spacing-300 (horizontal).
+ * @prop --bs-checkbox-group-label-color: Legend colour. Aliased to --bs-text-default.
+ * @prop --bs-checkbox-group-description-color: Helper text colour. Aliased to --bs-text-secondary.
+ * @prop --bs-checkbox-group-error-color: Error text colour. Aliased to --bs-text-error.
+ */
+:host {
+  display: block;
+
+  --bs-checkbox-group-gap: var(--bs-spacing-50);
+  --bs-checkbox-group-options-gap: var(--bs-spacing-0);
+  --bs-checkbox-group-label-color: var(--bs-text-default);
+  --bs-checkbox-group-description-color: var(--bs-text-secondary);
+  --bs-checkbox-group-error-color: var(--bs-text-error);
+}
+
+:host([orientation='horizontal']) {
+  --bs-checkbox-group-options-gap: var(--bs-spacing-300);
+}
+
+.bs-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-checkbox-group-gap);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-family: inherit;
+}
+
+.bs-checkbox-group__label {
+  padding: 0;
+  margin-bottom: var(--bs-checkbox-group-gap);
+  font-size: var(--bs-font-size-md);
+  font-weight: var(--bs-font-weight-medium);
+  color: var(--bs-checkbox-group-label-color);
+}
+
+.bs-checkbox-group__options {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--bs-checkbox-group-options-gap);
+}
+
+:host([orientation='horizontal']) .bs-checkbox-group__options {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.bs-checkbox-group__description,
+.bs-checkbox-group__error {
+  font-size: var(--bs-font-size-xs);
+}
+
+.bs-checkbox-group__description {
+  color: var(--bs-checkbox-group-description-color);
+}
+
+.bs-checkbox-group__error {
+  color: var(--bs-checkbox-group-error-color);
+}

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

@@ -0,0 +1,254 @@
+import { h } from "@stencil/core";
+let uid = 0;
+/**
+ * A labelled group of `bs-checkbox`es: a `<fieldset>` with a `<legend>`, helper or error text, and
+ * a single `value` array of the checked boxes' values.
+ *
+ * Composed from: `bs-checkbox` (slotted by you).
+ *
+ * ## When to use
+ * - A set of related, independent options where any number may be chosen ("Notify me by ...").
+ *
+ * ## When not to use
+ * - Exactly one choice: use `bs-radio-group`.
+ * - A single yes/no: use one `bs-checkbox`, or `bs-switch` for an immediate setting.
+ *
+ * @slot - The `bs-checkbox` elements. Give each a `value`.
+ * @part group - The `fieldset`.
+ * @part label - The `legend`.
+ * @part options - The wrapper laying out the checkboxes (column, or row when `orientation="horizontal"`).
+ * @part description - The helper text (hidden while `error` is set).
+ * @part error - The error message.
+ */
+export class BsCheckboxGroup {
+    el;
+    id = `bs-checkbox-group-${++uid}`;
+    /** Legend: the visible group label, also its accessible name. */
+    label;
+    /** Helper text under the options. Replaced by `error` while that is set. */
+    description;
+    /** Error message. Sets `aria-invalid`, replaces the helper text, and puts every checkbox in its error style. */
+    error;
+    /** Layout of the checkboxes. */
+    orientation = 'vertical';
+    /** Marks the group as required: shows an asterisk after the label and sets `aria-required`. */
+    required = false;
+    /** `value`s of the checked checkboxes. An array, so set it as a JS property, not an attribute. Setting it checks the matching boxes and unchecks the rest. */
+    value = [];
+    /** Emitted with the new array of checked `value`s when the user toggles a checkbox. Replaces the checkboxes' own `bsChange`, which does not reach listeners outside the group. */
+    bsChange;
+    boxes() {
+        return Array.from(this.el.querySelectorAll('bs-checkbox'));
+    }
+    onValue() {
+        const v = this.value ?? [];
+        this.boxes().forEach(b => {
+            const should = v.includes(b.value);
+            if (b.checked !== should)
+                b.checked = should;
+        });
+    }
+    onError() {
+        this.syncError();
+    }
+    componentWillLoad() {
+        this.onSlotchange();
+    }
+    syncError() {
+        this.boxes().forEach(b => (b.error = !!this.error));
+    }
+    onSlotchange = () => {
+        this.syncError();
+        // Initial state comes from `value` when given, otherwise from the boxes' own `checked`.
+        if (this.value && this.value.length)
+            this.onValue();
+        else
+            this.value = this.boxes().filter(b => b.checked).map(b => b.value);
+    };
+    onBoxChange(ev) {
+        if (ev.target === this.el)
+            return; // our own event
+        ev.stopImmediatePropagation();
+        this.value = this.boxes().filter(b => b.checked).map(b => b.value);
+        this.bsChange.emit(this.value);
+    }
+    render() {
+        const descId = `${this.id}-desc`;
+        const note = this.error || this.description;
+        return (h("fieldset", { key: '0fe78473d394ca02d2901e2dd6ee2b41bf0c8f82', part: "group", class: { 'bs-checkbox-group': true, 'bs-checkbox-group--error': !!this.error }, "aria-describedby": note ? descId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined }, this.label && (h("legend", { key: '93ebc36796a72142d0c37a5242fc3c41aac4cb24', part: "label", class: "bs-checkbox-group__label" }, this.label, this.required && h("span", { key: 'eafcf168ac7d17feef71686e3a57498093ab0b97', "aria-hidden": "true" }, " *"))), h("div", { key: '4473ad6ab2d88e0e1e6a68f5669d9008716a061b', part: "options", class: "bs-checkbox-group__options" }, h("slot", { key: '948c5302774f93e6e5173d0693450d14eb4230e3', onSlotchange: this.onSlotchange })), note && (h("span", { key: 'b625aa5a79b78c5fb2cceea6fa412582d41d4180', id: descId, part: this.error ? 'error' : 'description', class: this.error ? 'bs-checkbox-group__error' : 'bs-checkbox-group__description' }, this.error || this.description))));
+    }
+    static get is() { return "bs-checkbox-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-checkbox-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-checkbox-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Legend: the visible group label, also its accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text under the options. Replaced by `error` while that is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message. Sets `aria-invalid`, replaces the helper text, and puts every checkbox in its error style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsCheckboxGroupOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BsCheckboxGroupOrientation": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-checkbox-group/bs-checkbox-group.tsx",
+                            "id": "src/components/bs-checkbox-group/bs-checkbox-group.tsx::BsCheckboxGroupOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout of the checkboxes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'vertical'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the group as required: shows an asterisk after the label and sets `aria-required`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`value`s of the checked checkboxes. An array, so set it as a JS property, not an attribute. Setting it checks the matching boxes and unchecks the rest."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the new array of checked `value`s when the user toggles a checkbox. Replaces the checkboxes' own `bsChange`, which does not reach listeners outside the group."
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValue"
+            }, {
+                "propName": "error",
+                "methodName": "onError"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bsChange",
+                "method": "onBoxChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,34 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-checkbox-group',
+    parameters: { docs: { description: { component: componentDescription('bs-checkbox-group') } } },
+    render: args => html `
+    <bs-checkbox-group
+      label=${args.label}
+      description=${ifDefined(args.description || undefined)}
+      error=${ifDefined(args.error || undefined)}
+      orientation=${args.orientation}
+      ?required=${args.required}
+      .value=${['email']}
+    >
+      <bs-checkbox value="email">Email</bs-checkbox>
+      <bs-checkbox value="sms">SMS</bs-checkbox>
+      <bs-checkbox value="push">Push notification</bs-checkbox>
+    </bs-checkbox-group>
+  `,
+    argTypes: {
+        label: { control: 'text' },
+        description: { control: 'text' },
+        error: { control: 'text' },
+        orientation: { control: 'inline-radio', options: ['vertical', 'horizontal'] },
+        required: { control: 'boolean' },
+    },
+    args: { label: 'Notify me by', description: '', error: '', orientation: 'vertical', required: false },
+};
+export default meta;
+export const Default = {};
+export const Horizontal = { args: { orientation: 'horizontal' } };
+export const WithHelperText = { name: 'With helper text', args: { description: 'Choose any that apply.' } };
+export const WithError = { name: 'With error', args: { required: true, error: 'Choose at least one.' } };

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

@@ -71,7 +71,7 @@ export class BsChipFilter {
         // label-only edge gets more -- except when NEITHER edge has a glyph, where both edges use a
         // third, larger value rather than the label-only one (see bs-chip-filter.css's own comment).
         const paddingVariant = this.hasIcon && this.dropdown ? 'icon-dropdown' : this.hasIcon ? 'icon-only' : this.dropdown ? 'dropdown-only' : 'text-only';
-        return (h("button", { key: '330d7292dd7bb519c8cdf0dd237ad85913ab35fe', type: "button", class: `bs-chip-filter bs-chip-filter--${this.size} bs-chip-filter--${paddingVariant} ${this.selected ? 'bs-chip-filter--selected' : ''}`, disabled: this.disabled, "aria-pressed": String(this.selected), "aria-label": this.ariaLabel, onClick: this.onClick }, h("bs-ripple", { key: '34767b4129e742f2eaefb2192ae0bfb07449f480', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '9ec983b47dec13c4ac573d2c2125fe314843693c', part: "icon", class: `bs-chip-filter__icon ${this.hasIcon ? 'bs-chip-filter__icon--visible' : ''}` }, h("slot", { key: '0b7093bf29bc156a0c969616af48c5c709b0ee6e', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '3a309c3171bee1ccdf066da85aea80b5476f454d', part: "label", class: "bs-chip-filter__label" }, h("slot", { key: 'afda9556224d3faf5fed56796f0d2eebd335d612' })), this.dropdown && (h("span", { key: '692b0d968999335c18cf21eaea20af997f1a6599', part: "caret", class: "bs-chip-filter__caret", "aria-hidden": "true" }, h(ChevronDownIcon, { key: 'cc87f0f3f8e95a8733f083f36d5caee9b649bed7' })))));
+        return (h("button", { key: '06a4efff34f6542d59f9e46b4df706cae4a3118c', type: "button", class: `bs-chip-filter bs-chip-filter--${this.size} bs-chip-filter--${paddingVariant} ${this.selected ? 'bs-chip-filter--selected' : ''}`, disabled: this.disabled, "aria-pressed": String(this.selected), "aria-label": this.ariaLabel, onClick: this.onClick }, h("bs-ripple", { key: 'd76f2c368b82361e021d92eda38f68783910c4d7', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'e31e9dbb2f8663c8c496c0c24a465025de3513d9', part: "icon", class: `bs-chip-filter__icon ${this.hasIcon ? 'bs-chip-filter__icon--visible' : ''}` }, h("slot", { key: 'c9c11954b627f6f0cf2defd3bc24d39c83f8b6f7', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'af8b16f4c1c36d68db0ecef3844ef81e0c2a95f2', part: "label", class: "bs-chip-filter__label" }, h("slot", { key: 'afed8547e55dd8851f4a35204dfc8c19aac9552c' })), this.dropdown && (h("span", { key: 'ae9a53b2c520650bd8ec765ea21471800e9434ff', part: "caret", class: "bs-chip-filter__caret", "aria-hidden": "true" }, h(ChevronDownIcon, { key: '0311c2312584e20590bfb8d3c34a7b0d5efea652' })))));
     }
     static get is() { return "bs-chip-filter"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,7 +44,7 @@ export class BsChipInformative {
     };
     render() {
         const paddingVariant = this.hasIcon ? 'icon' : 'text';
-        return (h(Host, { key: '1c590939607a3a3c511e60fbf13da81268a3f178', class: `bs-chip-informative bs-chip-informative--${this.color} bs-chip-informative--${this.size} bs-chip-informative--${paddingVariant}` }, h("span", { key: '9da198d1f3680e20364c13bee40c0123473ec37c', part: "icon", class: `bs-chip-informative__icon ${this.hasIcon ? 'bs-chip-informative__icon--visible' : ''}` }, h("slot", { key: '7951b8044a25a007641b2cff5d4e52543f5a2a82', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '54c6f6abe99b04cc0b3dfd75202dde81bdc8a163', part: "label", class: "bs-chip-informative__label" }, h("slot", { key: '3e4f7a245054e0d8898028c5c1ed4e6e35496988' }))));
+        return (h(Host, { key: '859a7b1d4d42f8dcb3954b66d013c588453a2dfd', class: `bs-chip-informative bs-chip-informative--${this.color} bs-chip-informative--${this.size} bs-chip-informative--${paddingVariant}`, "aria-disabled": this.disabled ? 'true' : undefined }, h("span", { key: 'f9d97bc62eea33379adb890e004ecd0a2a8c5c3d', part: "icon", class: `bs-chip-informative__icon ${this.hasIcon ? 'bs-chip-informative__icon--visible' : ''}` }, h("slot", { key: '4e41027828c2514bfdc68a1e13b4bb0ca0278653', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '9519ca92daaadce0572e0dccb6607390d7e019c8', part: "label", class: "bs-chip-informative__label" }, h("slot", { key: '1231db6420ffbfbb63cbba714ca51d571f5bd981' }))));
     }
     static get is() { return "bs-chip-informative"; }
     static get encapsulation() { return "shadow"; }

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

@@ -80,7 +80,7 @@ export class BsChipInput {
     };
     render() {
         const paddingVariant = this.hasIcon ? 'icon' : 'text';
-        return (h(Host, { key: '23b8519dece5666894eb211065d8ebc6208afb73', class: `bs-chip-input bs-chip-input--${this.size} bs-chip-input--${paddingVariant}` }, h("button", { key: 'bf65dbc1e0989c7ddeca7d863357934833d40889', type: "button", part: "body", class: "bs-chip-input__body", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.onBodyClick }, h("bs-ripple", { key: '4b74e46a995d1e6429a69853550983066c53fd8b', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '45c9089f5050b6417667b71af047b55d9df20aae', part: "icon", class: `bs-chip-input__icon ${this.hasIcon ? 'bs-chip-input__icon--visible' : ''}` }, h("slot", { key: 'e3e68eb90f3f4908ff1f3af61a2fbc524c148ae6', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '2e4709dd6398fe589294bd884a2a60c7bc083804', part: "label", class: "bs-chip-input__label" }, h("slot", { key: '71b54619b617b3bf82cee8d7144e2b23af2353c7', onSlotchange: this.onLabelSlotchange }))), h("button", { key: 'bc3892fe66883bc9f43b9fb95274539be42d40b9', type: "button", part: "remove", class: "bs-chip-input__remove", disabled: this.disabled, "aria-label": `${this.removeLabel} ${this.labelText}`, onClick: this.onRemoveClick }, h("bs-ripple", { key: '283b64fdc5fcf4c490d07ffac9e66284d666fc15', part: "ripple", centered: true, disabled: this.disabled }), h(CloseIcon, { key: 'ed997aab7198b3de133c05c49a4a220422db3cf4' }))));
+        return (h(Host, { key: '8ab76f06cb483dbc73d33b0d18a5bd480835a73c', class: `bs-chip-input bs-chip-input--${this.size} bs-chip-input--${paddingVariant}` }, h("button", { key: '5bbf3a240d0e3bafbb05d2e1f08b1a536957845a', type: "button", part: "body", class: "bs-chip-input__body", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.onBodyClick }, h("bs-ripple", { key: '0fb4d5f11b8f4f688c84d81d8f6a5a1588ef8e98', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '6933afdd4c1d7cbee3c44fd5a4bdda6d50a057c6', part: "icon", class: `bs-chip-input__icon ${this.hasIcon ? 'bs-chip-input__icon--visible' : ''}` }, h("slot", { key: '76ceb9abac6525345e6c10fd0d32391e566754bb', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '436b7b71ce8cfd6233a42097a54a0b4b1b63d446', part: "label", class: "bs-chip-input__label" }, h("slot", { key: '9a8e09c8a8cbc92951251b8cfb28b2bce6e21225', onSlotchange: this.onLabelSlotchange }))), h("button", { key: '52d5a5fac66271314c75bec429c9b44b21d9ea1c', type: "button", part: "remove", class: "bs-chip-input__remove", disabled: this.disabled, "aria-label": `${this.removeLabel} ${this.labelText}`, onClick: this.onRemoveClick }, h("bs-ripple", { key: 'fa18494eb706510dd91701d98b670b123dfbfb3c', part: "ripple", centered: true, disabled: this.disabled }), h(CloseIcon, { key: 'a56ac8cbc660bd9349ab82179901eadcb005ea2a' }))));
     }
     static get is() { return "bs-chip-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,7 +38,7 @@ export class BsCitationPreview {
     bsOpen;
     render() {
         const hasPage = this.page !== undefined && this.page !== null && this.page !== '';
-        return (h("bs-card", { key: '2c4592f7fb9dcec6e5a062b7927348a4c8a0d113', part: "container", class: "bs-citation-preview", surface: "base" }, h("div", { key: 'f3af7627abe3a23a3ff4667068b26941f9ad5228', class: "bs-citation-preview__body" }, h("bs-source-link", { key: 'be462a72db4fc539e85670adcecd4de14779dba9', part: "header", fileName: this.fileName, sourceName: this.sourceName, href: this.href, onBsOpen: () => this.bsOpen.emit() }), h("div", { key: 'd53ccbe59a37f2fb0f036e3de979d660e881ecda', part: "snippet", class: "bs-citation-preview__snippet" }, h("slot", { key: '3a2bfac722bb59c0543e0851f80206e3aedd6310' })), h("div", { key: 'df2813e95a5266f7f91590e5b74bbc2c28bc8c35', class: "bs-citation-preview__footer" }, h("slot", { key: 'a0be65bc990119011c50e92e79c7025a4ceb9488', name: "footer" }, hasPage && (h("span", { key: 'd72c4b615b55212eac42f508e02d1af9ba96b534', part: "page", class: "bs-citation-preview__page" }, "Page ", this.page)))))));
+        return (h("bs-card", { key: 'c4198a9c562b4ce627f15e12796f5d72d44cd9a2', part: "container", class: "bs-citation-preview", surface: "base" }, h("div", { key: '33d193ce63ea5e0234a2a3dcd6e39cd3c119aa76', class: "bs-citation-preview__body" }, h("bs-source-link", { key: '38929a73cc1b795f33980bc09408ba41ab745701', part: "header", fileName: this.fileName, sourceName: this.sourceName, href: this.href, onBsOpen: () => this.bsOpen.emit() }), h("div", { key: '0d90d721c18c3adc62c594f7df5248308f23795d', part: "snippet", class: "bs-citation-preview__snippet" }, h("slot", { key: 'cf3b1b80d2c97f7f637babda7461d2b2559c2bad' })), h("div", { key: 'fe56a067454031faefa8bc2ef78f46c5f5abd8b7', class: "bs-citation-preview__footer" }, h("slot", { key: '142c1774ca2f6e4282fdf9edf8d6b1cd77158120', name: "footer" }, hasPage && (h("span", { key: '89b4fe38e813d7d88c00b4c19a8ca892eaa73ddb', part: "page", class: "bs-citation-preview__page" }, "Page ", this.page)))))));
     }
     static get is() { return "bs-citation-preview"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-code-block/bs-code-block.cmp.test.js

@@ -0,0 +1,78 @@
+import { render, h, describe, it, expect, vi } from "@stencil/vitest";
+import { runAxeCheck } from "../../test/helpers/conventions";
+const stubClipboard = () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', { value: { writeText }, configurable: true });
+    return writeText;
+};
+const $ = (host, sel) => host.shadowRoot.querySelector(sel);
+describe('bs-code-block', () => {
+    it('shows the code prop as text, escaped', async () => {
+        const { root } = await render(h("bs-code-block", { code: '<b>hi</b>\nline 2' }));
+        expect($(root, '[part="code"]').textContent).toBe('<b>hi</b>\nline 2');
+        expect($(root, '[part="code"] b')).toBeNull();
+    });
+    it('shows pre-highlighted slotted content', async () => {
+        const { root } = await render(h("bs-code-block", null, h("span", { class: "kw" }, "const"), " x = 1;"));
+        expect(root.querySelector('.kw')).not.toBeNull();
+        expect($(root, 'slot')).not.toBeNull();
+    });
+    it('renders the filename header', async () => {
+        const { root } = await render(h("bs-code-block", { code: "a", filename: "app.ts" }));
+        expect($(root, '[part="filename"]').textContent).toBe('app.ts');
+        expect($(root, '[part="body"]')).toEqualAttribute('aria-label', 'app.ts');
+    });
+    it('copies the code, shows a confirmation and announces it via aria-live', async () => {
+        const writeText = stubClipboard();
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-code-block", { code: '\nnpm i\n', filename: "Terminal" }));
+        const spy = spyOnEvent('bsCopy');
+        const live = $(root, '[aria-live="polite"]');
+        expect(live.textContent).toBe('');
+        $(root, '[part="copy-button"]').click();
+        await waitForChanges();
+        await waitForChanges();
+        expect(writeText).toHaveBeenCalledWith('npm i');
+        expect(spy).toHaveReceivedEventDetail('npm i');
+        expect(live.textContent).toBe('Copied');
+        expect($(root, '[part="copy-button"]').textContent).toContain('Copied');
+    });
+    it('copies slotted text when there is no code prop', async () => {
+        const writeText = stubClipboard();
+        const { root, waitForChanges } = await render(h("bs-code-block", null, h("span", null, "echo"), " hi"));
+        $(root, '[part="copy-button"]').click();
+        await waitForChanges();
+        expect(writeText).toHaveBeenCalledWith('echo hi');
+    });
+    it('hideCopy removes the button', async () => {
+        const { root } = await render(h("bs-code-block", { code: "a", hideCopy: true }));
+        expect($(root, '[part="copy-button"]')).toBeNull();
+        expect($(root, '[part="header"]')).toBeNull();
+    });
+    it('shows one line number per line', async () => {
+        const { root } = await render(h("bs-code-block", { code: 'a\nb\nc', lineNumbers: true }));
+        expect($(root, '[part="line-numbers"]').textContent).toBe('1\n2\n3');
+        expect($(root, '[part="line-numbers"]')).toEqualAttribute('aria-hidden', 'true');
+    });
+    it('scrolls by default (focusable) and wraps with wrap', async () => {
+        const long = 'x'.repeat(400);
+        const { root } = await render(h("bs-code-block", { code: long, style: { width: '300px' } }));
+        const body = $(root, '[part="body"]');
+        expect(body).toEqualAttribute('tabindex', '0');
+        expect(body.scrollWidth).toBeGreaterThan(body.clientWidth);
+        const { root: wrapped } = await render(h("bs-code-block", { code: long, wrap: true, style: { width: '300px' } }));
+        const wb = $(wrapped, '[part="body"]');
+        expect(wb.scrollWidth).toBeLessThanOrEqual(wb.clientWidth);
+        expect(wb.getAttribute('tabindex')).toBeNull();
+    });
+    it('inline renders only a styled code element', async () => {
+        const { root } = await render(h("p", null, "Run ", h("bs-code-block", { inline: true, code: "npm i" }), " now"));
+        const host = root.querySelector('bs-code-block');
+        expect(getComputedStyle(host).display).toBe('inline');
+        expect($(host, 'bs-card')).toBeNull();
+        expect($(host, 'code').textContent).toBe('npm i');
+    });
+    it('passes axe', async () => {
+        const { root } = await render(h("bs-code-block", { code: 'const a = 1;\nconst b = 2;', filename: "a.ts", lineNumbers: true }));
+        await runAxeCheck(root);
+    });
+});