@brandsync/wc 1.18.0 → 1.20.0

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.css

@@ -39,6 +39,8 @@
 }
 
 .bs-chip-filter {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--bs-chip-filter-gap);

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

@@ -18,6 +18,7 @@ import { h } from "@stencil/core";
  * @part icon - The icon wrapper element.
  * @part label - The text label element.
  * @part caret - The dropdown caret wrapper element, when `dropdown` is set.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsChipFilter {
     el;
@@ -70,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: 'f9a3d08479e7ed41739f3aafb0ab368a0675b217', 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("span", { key: '223cd086065cdcc534142889709de256fc02018b', part: "icon", class: `bs-chip-filter__icon ${this.hasIcon ? 'bs-chip-filter__icon--visible' : ''}` }, h("slot", { key: 'bfcf02d9ae967d4af95149b4690f98f78e381f1d', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'af8b7601dc3c5ced08acc8d0b0414b2f2f4ef758', part: "label", class: "bs-chip-filter__label" }, h("slot", { key: '83056a3f9a30ccdd688ca1286480a65b0a1ed8c9' })), this.dropdown && (h("span", { key: '6b3c1058216ad7b2508f189e754b7740e111c11d', part: "caret", class: "bs-chip-filter__caret", "aria-hidden": "true" }, h(ChevronDownIcon, { key: 'a5f375e9e65a57a4a901729efcb0bfba5edc32eb' })))));
+        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: '175475b365a087e43fa6523a258698656e23d39e', class: `bs-chip-informative bs-chip-informative--${this.color} bs-chip-informative--${this.size} bs-chip-informative--${paddingVariant}` }, h("span", { key: 'b2116f28c75229963194c84e4d0d6e8c0fab1621', part: "icon", class: `bs-chip-informative__icon ${this.hasIcon ? 'bs-chip-informative__icon--visible' : ''}` }, h("slot", { key: '8fade40486f0d673b3349dc9c2282ff687d029f6', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '6b87a554737b9424033885a06f5136982a3d67bb', part: "label", class: "bs-chip-informative__label" }, h("slot", { key: '21f2759811a28da66033444be65b2fb680737bde' }))));
+        return (h(Host, { key: '300d18219fd28709d023bf5d8884ecd7365eb259', class: `bs-chip-informative bs-chip-informative--${this.color} bs-chip-informative--${this.size} bs-chip-informative--${paddingVariant}` }, h("span", { key: '9e75b6aa312abd6433dd83af37f27587cee98590', part: "icon", class: `bs-chip-informative__icon ${this.hasIcon ? 'bs-chip-informative__icon--visible' : ''}` }, h("slot", { key: 'cc55742c7d920b535efb6c3e2f721a88172dbe68', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '198316a11fa1fd0a2eeca15d138f92bb00a5de6b', part: "label", class: "bs-chip-informative__label" }, h("slot", { key: '346399cea299338a6110e34fe9a7130e99aa6c09' }))));
     }
     static get is() { return "bs-chip-informative"; }
     static get encapsulation() { return "shadow"; }

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

@@ -170,3 +170,10 @@
 .bs-chip-input__remove:disabled {
   cursor: not-allowed;
 }
+
+.bs-chip-input__body,
+.bs-chip-input__remove {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
+  border-radius: inherit;
+}

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

@@ -21,6 +21,7 @@ import { Host, h } from "@stencil/core";
  * @part icon - The icon wrapper element.
  * @part label - The text label element.
  * @part remove - The trailing remove button.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsChipInput {
     el;
@@ -79,7 +80,7 @@ export class BsChipInput {
     };
     render() {
         const paddingVariant = this.hasIcon ? 'icon' : 'text';
-        return (h(Host, { key: '9f4d441c816706bb360a4a06d7dfdcd06a89fb7c', class: `bs-chip-input bs-chip-input--${this.size} bs-chip-input--${paddingVariant}` }, h("button", { key: '740f5af451317b26f069613c1d35966993e6fcfa', type: "button", part: "body", class: "bs-chip-input__body", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.onBodyClick }, h("span", { key: 'a53e4b835d43bd9d3fa2704872a4a2eaf6640f33', part: "icon", class: `bs-chip-input__icon ${this.hasIcon ? 'bs-chip-input__icon--visible' : ''}` }, h("slot", { key: 'cceac9f60078c14a43bd7cf4ead2a126f8272ca7', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '8baa5a3f5bb554498e36fbdca5fd72acbdca4c1e', part: "label", class: "bs-chip-input__label" }, h("slot", { key: 'e12ea30cabae514a396367eef15ebf7e70e4bd19', onSlotchange: this.onLabelSlotchange }))), h("button", { key: 'a153766c79179c0c266b4215099dc00cadb7521a', type: "button", part: "remove", class: "bs-chip-input__remove", disabled: this.disabled, "aria-label": `${this.removeLabel} ${this.labelText}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: '637fe474a7da111f0ecceb5120006578bd44ca18' }))));
+        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: 'af7b50840be8a1fa0454a9117243e203f30fcc95', part: "container", class: "bs-citation-preview", surface: "base" }, h("div", { key: '0c0d947599941f28b24c60650262a1b6e4ed5c4a', class: "bs-citation-preview__body" }, h("bs-source-link", { key: '9be793892a7cbf9f7b6fff934bcc252dd7d42dff', part: "header", fileName: this.fileName, sourceName: this.sourceName, href: this.href, onBsOpen: () => this.bsOpen.emit() }), h("div", { key: 'bef7cd349b82433a2090f293686b653e6a13d71b', part: "snippet", class: "bs-citation-preview__snippet" }, h("slot", { key: '570771c36bfbbb68b93284a70615fcce6d9f0505' })), h("div", { key: 'dc8c1ad2d2bc57dddc963a3434563959d18c5f6a', class: "bs-citation-preview__footer" }, h("slot", { key: '7e621faf0e3e90b06f8ceb4712e0d61b18f7d797', name: "footer" }, hasPage && (h("span", { key: 'd00646db324820ff44a7a2b0d122b92990be251f', 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);
+    });
+});

package/dist/collection/components/bs-code-block/bs-code-block.css

@@ -0,0 +1,132 @@
+/**
+ * @prop --bs-code-block-bg: Background of the block and of inline code. Aliased to --bs-surface-container.
+ * @prop --bs-code-block-color: Code text colour. Aliased to --bs-text-default.
+ * @prop --bs-code-block-border-color: Border colour of the block. Aliased to --bs-border-neutral-container.
+ * @prop --bs-code-block-radius: Corner radius of the block. Aliased to --bs-border-radius-100.
+ * @prop --bs-code-block-padding: Padding around the code. Aliased to --bs-spacing-200.
+ * @prop --bs-code-block-font-family: Monospace font stack (the tokens define no monospace family).
+ * @prop --bs-code-block-font-size: Code font size. Aliased to --bs-font-size-sm.
+ * @prop --bs-code-block-line-height: Code line height. Aliased to --bs-line-height-relaxed.
+ * @prop --bs-code-block-header-color: Filename colour. Aliased to --bs-text-secondary.
+ * @prop --bs-code-block-line-number-color: Line number colour. Aliased to --bs-text-secondary (muted fails contrast on the code surface).
+ * @prop --bs-code-block-inline-padding: Padding of inline code. Aliased to 0 --bs-spacing-50.
+ * @prop --bs-code-block-inline-radius: Corner radius of inline code. Aliased to --bs-border-radius-50.
+ */
+:host {
+  display: block;
+
+  --bs-code-block-bg: var(--bs-surface-container);
+  --bs-code-block-color: var(--bs-text-default);
+  --bs-code-block-border-color: var(--bs-border-neutral-container);
+  --bs-code-block-radius: var(--bs-border-radius-100);
+  --bs-code-block-padding: var(--bs-spacing-200);
+  --bs-code-block-font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+  --bs-code-block-font-size: var(--bs-font-size-sm);
+  --bs-code-block-line-height: var(--bs-line-height-relaxed);
+  --bs-code-block-header-color: var(--bs-text-secondary);
+  --bs-code-block-line-number-color: var(--bs-text-secondary);
+  --bs-code-block-inline-padding: 0 var(--bs-spacing-50);
+  --bs-code-block-inline-radius: var(--bs-border-radius-50);
+}
+
+:host([inline]) {
+  display: inline;
+}
+
+.bs-code-block {
+  --bs-card-bg: var(--bs-code-block-bg);
+  --bs-card-radius: var(--bs-code-block-radius);
+  --bs-card-padding: 0px;
+  --bs-card-border-width: 1px;
+  --bs-card-border-color: var(--bs-code-block-border-color);
+  --bs-card-shadow: none;
+  color: var(--bs-code-block-color);
+}
+
+.bs-code-block__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-100);
+  box-sizing: border-box;
+  padding: var(--bs-spacing-50) var(--bs-spacing-100) var(--bs-spacing-50) var(--bs-code-block-padding);
+  border-bottom: 1px solid var(--bs-code-block-border-color);
+  font-size: var(--bs-font-size-sm);
+  color: var(--bs-code-block-header-color);
+}
+
+.bs-code-block__filename {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bs-code-block__body {
+  display: flex;
+  overflow-x: auto;
+  padding: var(--bs-code-block-padding);
+}
+
+.bs-code-block__body:focus-visible {
+  outline: 2px solid var(--bs-focus-ring, var(--bs-color-primary-default));
+  outline-offset: -2px;
+}
+
+.bs-code-block__pre,
+.bs-code-block__numbers {
+  margin: 0;
+  font-family: var(--bs-code-block-font-family);
+  font-size: var(--bs-code-block-font-size);
+  line-height: var(--bs-code-block-line-height);
+}
+
+.bs-code-block__pre {
+  flex: 1 0 auto;
+  min-width: 0;
+  tab-size: 2;
+}
+
+.bs-code-block__body--wrap .bs-code-block__pre {
+  flex: 1 1 auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.bs-code-block__numbers {
+  flex: none;
+  padding-inline-end: var(--bs-spacing-200);
+  text-align: end;
+  color: var(--bs-code-block-line-number-color);
+  user-select: none;
+}
+
+.bs-code-block__code {
+  font-family: inherit;
+}
+
+/* Inline code. */
+:host([inline]) .bs-code-block__code {
+  padding: var(--bs-code-block-inline-padding);
+  border-radius: var(--bs-code-block-inline-radius);
+  background: var(--bs-code-block-bg);
+  color: var(--bs-code-block-color);
+  font-family: var(--bs-code-block-font-family);
+  font-size: 0.9em;
+}
+
+.bs-code-block__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (forced-colors: active) {
+  :host([inline]) .bs-code-block__code { border: 1px solid CanvasText; }
+}