@brandsync/wc 1.19.0 → 1.20.0

package/dist/collection/components/bs-global-search/bs-global-search.js

@@ -342,10 +342,10 @@ export class BsGlobalSearch {
         const listId = `${this.id}-listbox`;
         const isList = this.status === 'default' || this.status === 'results';
         const showFooter = this.showFooter && isList;
-        return (h("div", { key: '122fd2e1440ff04e7aeb9e12b8071287c9eae7ec', class: "bs-global-search" }, h("div", { key: 'dc2a228d802815873904ca8f0504f71f8ce73dd0', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, h("bs-input", { key: '350322cbdeccd18ac2456fb358ec83589aa835c8', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (h("div", { key: 'c250dc78b38158f9529dbd9c2bd1f2f3e9c107a4', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (h("div", { key: '17c81ab7633498a3de7853a33b2d31db8b304633', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
+        return (h("div", { key: '2d45d72757ec457f9bb684fd93de4a49a084dfd4', class: "bs-global-search" }, h("div", { key: '7b1e136ca729ce6a8aca989b0e45e32de617a095', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, h("bs-input", { key: 'fe16150d64aad5aa5235a325c5d6d2df47f773d4', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (h("div", { key: 'fe33656e32a9b7753685bc0854c817e310b7fdb9', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (h("div", { key: '9273862a5cb63825652c187cea8b9aabf78179cc', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
             const hid = `${this.id}-h-${s}`;
             return (h("div", { part: "section", class: "bs-global-search__section", role: "group", "aria-labelledby": hid }, h("div", { part: "section-header", id: hid, class: "bs-global-search__section-header" }, this.sectionLabel(s)), h("slot", { name: s })));
-        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), h("span", { key: 'fc76b4785031c6ed1b3e3ba5668dfaacdbc0faa4', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
+        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), h("span", { key: 'f9f687273bf843a8ee4fcdfcfa196d79c67a5791', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
     }
     static get is() { return "bs-global-search"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,12 +59,12 @@ export class BsGrid {
         const row = this.rowGap ? this.token(this.rowGap) : gapValue;
         const col = this.columnGap ? this.token(this.columnGap) : gapValue;
         const align = ALIGNS.includes(this.align) ? this.align : 'stretch';
-        return (h("div", { key: 'cd02b8630bd31c42ffdf9a594a0808aa5f2cea92', class: "bs-grid", part: "container", style: {
+        return (h("div", { key: '6e5451ed57a46f7fc7ce3142786887de2ec44219', class: "bs-grid", part: "container", style: {
                 gridTemplateColumns: this.template(),
                 rowGap: `var(--bs-grid-row-gap, ${row})`,
                 columnGap: `var(--bs-grid-column-gap, ${col})`,
                 alignItems: align,
-            } }, h("slot", { key: 'ff6f7beebdd212901e3b071f0c02270df6494219' })));
+            } }, h("slot", { key: 'c7609326cceeef12d0d501712bad80dceafd6388' })));
     }
     static get is() { return "bs-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,38 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { runAxeCheck } from "../../test/helpers/conventions";
+const el = (host) => host.shadowRoot.querySelector('[part="heading"]');
+describe('bs-heading', () => {
+    it('renders an h2 by default', async () => {
+        const { root } = await render(h("bs-heading", null, "Title"));
+        expect(el(root).tagName).toBe('H2');
+    });
+    it('renders the element for each level', async () => {
+        for (const level of [1, 2, 3, 4, 5, 6]) {
+            const { root } = await render(h("bs-heading", { level: level }, "T"));
+            expect(el(root).tagName).toBe(`H${level}`);
+        }
+    });
+    it('size is independent of the element', async () => {
+        const { root } = await render(h("bs-heading", { level: 2, size: "5" }, "T"));
+        expect(el(root).tagName).toBe('H2');
+        expect(getComputedStyle(el(root)).fontSize).toBe('18px');
+    });
+    it('defaults the size from the level', async () => {
+        const { root } = await render(h("bs-heading", { level: 1 }, "T"));
+        expect(getComputedStyle(el(root)).fontSize).toBe('40px');
+    });
+    it('`as` overrides the element', async () => {
+        const { root } = await render(h("bs-heading", { as: "p", level: 3 }, "T"));
+        expect(el(root).tagName).toBe('P');
+        expect(getComputedStyle(el(root)).fontSize).toBe('24px');
+    });
+    it('tone switches the colour', async () => {
+        const { root } = await render(h("bs-heading", { tone: "inherit" }, "T"));
+        const { root: err } = await render(h("bs-heading", { tone: "error" }, "T"));
+        expect(getComputedStyle(el(err)).color).not.toBe(getComputedStyle(el(root)).color);
+    });
+    it('passes axe', async () => {
+        const { root } = await render(h("bs-heading", { level: 1 }, "Page title"));
+        await runAxeCheck(root);
+    });
+});

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

@@ -0,0 +1,42 @@
+/**
+ * @prop --bs-heading-color: Text colour. Set per `tone` on the host from the --bs-text-* tokens (default: --bs-text-default).
+ * @prop --bs-heading-font-family: Font family. Aliased to --bs-typography-font-family-heading.
+ * @prop --bs-heading-font-weight: Font weight. Aliased to --bs-font-weight-semibold.
+ * @prop --bs-heading-font-size: Font size. Set per `size` on the heading (display --bs-font-size-6xl ... 6 --bs-font-size-md).
+ * @prop --bs-heading-line-height: Line height. Aliased to --bs-line-height-snug (--bs-line-height-tight for display and 1).
+ */
+:host {
+  display: block;
+
+  --bs-heading-color: var(--bs-text-default);
+  --bs-heading-font-family: var(--bs-typography-font-family-heading);
+  --bs-heading-font-weight: var(--bs-font-weight-semibold);
+  --bs-heading-line-height: var(--bs-line-height-snug);
+}
+
+:host([tone='secondary']) { --bs-heading-color: var(--bs-text-secondary); }
+:host([tone='muted']) { --bs-heading-color: var(--bs-text-muted); }
+:host([tone='action']) { --bs-heading-color: var(--bs-text-action); }
+:host([tone='success']) { --bs-heading-color: var(--bs-text-success); }
+:host([tone='info']) { --bs-heading-color: var(--bs-text-info); }
+:host([tone='warning']) { --bs-heading-color: var(--bs-text-warning); }
+:host([tone='error']) { --bs-heading-color: var(--bs-text-error); }
+:host([tone='inverse']) { --bs-heading-color: var(--bs-text-inverse); }
+:host([tone='inherit']) { --bs-heading-color: inherit; }
+
+.bs-heading {
+  margin: 0;
+  font-family: var(--bs-heading-font-family);
+  font-weight: var(--bs-heading-font-weight);
+  font-size: var(--bs-heading-font-size);
+  line-height: var(--bs-heading-line-height);
+  color: var(--bs-heading-color);
+}
+
+.bs-heading--display { --bs-heading-font-size: var(--bs-font-size-6xl); --bs-heading-line-height: var(--bs-line-height-tight); }
+.bs-heading--1 { --bs-heading-font-size: var(--bs-font-size-5xl); --bs-heading-line-height: var(--bs-line-height-tight); }
+.bs-heading--2 { --bs-heading-font-size: var(--bs-font-size-4xl); }
+.bs-heading--3 { --bs-heading-font-size: var(--bs-font-size-2xl); }
+.bs-heading--4 { --bs-heading-font-size: var(--bs-font-size-xl); }
+.bs-heading--5 { --bs-heading-font-size: var(--bs-font-size-lg); }
+.bs-heading--6 { --bs-heading-font-size: var(--bs-font-size-md); }

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

@@ -0,0 +1,154 @@
+import { h } from "@stencil/core";
+/**
+ * A heading whose rendered element and visual style are chosen separately: `level` (or `as`) picks
+ * the element for the document outline, `size` picks the look. Sizes map to the typography tokens
+ * (`--bs-font-size-*`, `--bs-font-weight-*`, `--bs-line-height-*`, `--bs-typography-font-family-heading`).
+ *
+ * Default sizes by level: 1 = 40px, 2 = 32px, 3 = 24px, 4 = 20px, 5 = 18px, 6 = 16px; `display` is 48px.
+ *
+ * Composed from: nothing (leaf).
+ *
+ * ## When to use
+ * - Any page or section title. Keep levels in order (no jumping from 1 to 4); change `size`, not `level`, to restyle.
+ *
+ * ## When not to use
+ * - Body copy, captions and labels: use `bs-text`.
+ * - To make text big without it being a heading: use `bs-text` with `as="p"`.
+ *
+ * @slot - The heading text.
+ * @part heading - The rendered heading element.
+ */
+export class BsHeading {
+    /** Heading level 1-6: chooses the element (`h1`-`h6`) and, unless `size` is set, the visual size. */
+    level = 2;
+    /** Overrides the rendered element, e.g. `as="p"` for a heading-looking line that is not part of the outline. When set, `level` only drives the default size. */
+    as;
+    /** Visual size, independent of the element: `display` or `1`-`6` (the default sizes of levels 1-6). Defaults to `level`. */
+    size;
+    /** Text colour from the text tokens. `inherit` uses the surrounding colour. */
+    tone = 'default';
+    render() {
+        const level = Math.min(6, Math.max(1, Number(this.level) || 2));
+        const Tag = (this.as ?? `h${level}`);
+        const size = this.size ?? String(level);
+        return (h(Tag, { key: '1bd998474f5a8c28b082fc1f60afd12c1f13747f', part: "heading", class: `bs-heading bs-heading--${size}` }, h("slot", { key: 'c10131a495b2a4761ff70fa3f071b6b9781a6a83' })));
+    }
+    static get is() { return "bs-heading"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-heading.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-heading.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "level": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsHeadingLevel",
+                    "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+                    "references": {
+                        "BsHeadingLevel": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-heading/bs-heading.tsx",
+                            "id": "src/components/bs-heading/bs-heading.tsx::BsHeadingLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading level 1-6: chooses the element (`h1`-`h6`) and, unless `size` is set, the visual size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "level",
+                "defaultValue": "2"
+            },
+            "as": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsHeadingAs",
+                    "resolved": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\"",
+                    "references": {
+                        "BsHeadingAs": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-heading/bs-heading.tsx",
+                            "id": "src/components/bs-heading/bs-heading.tsx::BsHeadingAs"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the rendered element, e.g. `as=\"p\"` for a heading-looking line that is not part of the outline. When set, `level` only drives the default size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "as"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsHeadingSize",
+                    "resolved": "\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"display\"",
+                    "references": {
+                        "BsHeadingSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-heading/bs-heading.tsx",
+                            "id": "src/components/bs-heading/bs-heading.tsx::BsHeadingSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual size, independent of the element: `display` or `1`-`6` (the default sizes of levels 1-6). Defaults to `level`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size"
+            },
+            "tone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsHeadingTone",
+                    "resolved": "\"action\" | \"default\" | \"error\" | \"info\" | \"inherit\" | \"inverse\" | \"muted\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsHeadingTone": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-heading/bs-heading.tsx",
+                            "id": "src/components/bs-heading/bs-heading.tsx::BsHeadingTone"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text colour from the text tokens. `inherit` uses the surrounding colour."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tone",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,28 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-heading',
+    parameters: { docs: { description: { component: componentDescription('bs-heading') } } },
+    render: args => html `<bs-heading level=${args.level} size=${ifDefined(args.size || undefined)} tone=${args.tone}>${args.text}</bs-heading>`,
+    argTypes: {
+        level: { control: 'inline-radio', options: [1, 2, 3, 4, 5, 6] },
+        size: { control: 'select', options: ['', 'display', '1', '2', '3', '4', '5', '6'] },
+        tone: { control: 'select', options: ['default', 'secondary', 'muted', 'action', 'success', 'info', 'warning', 'error', 'inverse', 'inherit'] },
+        text: { control: 'text' },
+    },
+    args: { level: 2, size: '', tone: 'default', text: 'Invoices this month' },
+};
+export default meta;
+export const Default = {};
+export const Levels = {
+    render: () => html `${[1, 2, 3, 4, 5, 6].map(l => html `<bs-heading level=${l}>Heading level ${l}</bs-heading>`)}`,
+};
+export const Display = { args: { level: 1, size: 'display', text: 'Welcome back' } };
+export const SizeIndependentOfLevel = {
+    name: 'Size independent of level',
+    render: () => html `<bs-heading level="2" size="5">An h2 that looks like an h5</bs-heading>`,
+};
+export const Tones = {
+    render: () => html `${['default', 'secondary', 'action', 'success', 'error'].map(t => html `<bs-heading level="4" tone=${t}>Tone ${t}</bs-heading>`)}`,
+};

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

@@ -0,0 +1,78 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { runAxeCheck } from "../../test/helpers/conventions";
+import { registerIcons, iconNames, getIcon } from "./icon-registry";
+const wrap = (host) => host.shadowRoot.querySelector('[part="icon"]');
+describe('bs-icon', () => {
+    it('ships the documented built-in set', () => {
+        for (const n of ['menu', 'arrow-right', 'arrow-left', 'check', 'close', 'chevron-down', 'external-link', 'copy', 'search']) {
+            expect(iconNames()).toContain(n);
+        }
+    });
+    it('renders inline SVG for a registered name', async () => {
+        const { root } = await render(h("bs-icon", { name: "check" }));
+        const svg = root.shadowRoot.querySelector('svg');
+        expect(svg).not.toBeNull();
+        expect(svg.querySelector('path')).not.toBeNull();
+    });
+    it('is decorative by default', async () => {
+        const { root } = await render(h("bs-icon", { name: "check" }));
+        expect(wrap(root)).toEqualAttribute('aria-hidden', 'true');
+        expect(wrap(root).getAttribute('role')).toBeNull();
+    });
+    it('exposes an image with a name when label is set', async () => {
+        const { root } = await render(h("bs-icon", { name: "check", label: "Done" }));
+        expect(wrap(root)).toEqualAttribute('role', 'img');
+        expect(wrap(root)).toEqualAttribute('aria-label', 'Done');
+        expect(wrap(root).getAttribute('aria-hidden')).toBeNull();
+    });
+    it('sizes from the size prop', async () => {
+        const { root } = await render(h("bs-icon", { name: "check", size: "sm" }));
+        expect(getComputedStyle(wrap(root)).width).toBe('16px');
+        const { root: big } = await render(h("bs-icon", { name: "check", size: "xl" }));
+        expect(getComputedStyle(wrap(big)).width).toBe('48px');
+    });
+    it('inherit tone follows the surrounding text colour', async () => {
+        const { root } = await render(h("span", { style: { color: 'rgb(1, 2, 3)' } }, h("bs-icon", { name: "check", tone: "inherit" })));
+        expect(getComputedStyle(wrap(root.querySelector('bs-icon'))).color).toBe('rgb(1, 2, 3)');
+    });
+    it('registers extra icons', async () => {
+        registerIcons({ 'my-dot': '<circle cx="12" cy="12" r="4"/>' });
+        const { root } = await render(h("bs-icon", { name: "my-dot" }));
+        expect(root.shadowRoot.querySelector('svg circle')).not.toBeNull();
+    });
+    it('ships the Phosphor glyphs as { viewBox, body } entries', () => {
+        for (const n of ['user', 'star', 'star-fill', 'x', 'paper-plane-right', 'note-pencil', 'clock-counter-clockwise', 'arrows-out-simple']) {
+            const e = getIcon(n);
+            expect(typeof e).toBe('object');
+            expect(e.viewBox).toBe('0 0 256 256');
+        }
+        expect(typeof getIcon('check')).toBe('string');
+    });
+    it('renders object entries filled with their own viewBox', async () => {
+        const { root } = await render(h("bs-icon", { name: "user" }));
+        const svg = root.shadowRoot.querySelector('svg');
+        expect(svg).toEqualAttribute('viewBox', '0 0 256 256');
+        expect(svg).toEqualAttribute('fill', 'currentColor');
+        expect(svg.getAttribute('stroke')).toBeNull();
+        expect(svg.querySelector('path')).not.toBeNull();
+        const box = svg.getBoundingClientRect();
+        expect(box.width).toBe(24);
+        expect(box.height).toBe(24);
+    });
+    it('registers extra object entries', async () => {
+        registerIcons({ 'my-big': { viewBox: '0 0 10 10', body: '<rect width="10" height="10"/>' } });
+        const { root } = await render(h("bs-icon", { name: "my-big" }));
+        expect(root.shadowRoot.querySelector('svg')).toEqualAttribute('viewBox', '0 0 10 10');
+    });
+    it('falls back to slotted SVG when the name is unknown', async () => {
+        const { root } = await render(h("bs-icon", { name: "nope" }, h("svg", { viewBox: "0 0 24 24", id: "mine" })));
+        expect(root.shadowRoot.querySelector('svg')).toBeNull();
+        expect(root.shadowRoot.querySelector('slot')).not.toBeNull();
+    });
+    it('passes axe (decorative and labelled)', async () => {
+        const { root } = await render(h("bs-icon", { name: "search", label: "Search" }));
+        await runAxeCheck(root);
+        const { root: deco } = await render(h("bs-icon", { name: "search" }));
+        await runAxeCheck(deco);
+    });
+});

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

@@ -0,0 +1,47 @@
+/**
+ * @prop --bs-icon-size: Width/height of the icon. Set per `size` on the host: 12px / 16px / 24px / 32px / 48px.
+ * @prop --bs-icon-color: Icon colour. Set per `tone` on the host from the --bs-icon-* tokens (`inherit` uses currentColor).
+ */
+:host {
+  display: inline-flex;
+  flex: none;
+  vertical-align: middle;
+
+  --bs-icon-size: 24px;
+  --bs-icon-color: var(--bs-icon-default);
+}
+
+:host([size='xs']) { --bs-icon-size: 12px; }
+:host([size='sm']) { --bs-icon-size: 16px; }
+:host([size='lg']) { --bs-icon-size: 32px; }
+:host([size='xl']) { --bs-icon-size: 48px; }
+
+:host([tone='muted']) { --bs-icon-color: var(--bs-icon-muted); }
+:host([tone='action']) { --bs-icon-color: var(--bs-icon-action); }
+:host([tone='success']) { --bs-icon-color: var(--bs-icon-success); }
+:host([tone='info']) { --bs-icon-color: var(--bs-icon-info); }
+:host([tone='warning']) { --bs-icon-color: var(--bs-icon-warning); }
+:host([tone='error']) { --bs-icon-color: var(--bs-icon-error); }
+:host([tone='inverse']) { --bs-icon-color: var(--bs-icon-inverse); }
+:host([tone='inherit']) { --bs-icon-color: currentColor; }
+
+.bs-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bs-icon-size);
+  height: var(--bs-icon-size);
+  color: var(--bs-icon-color);
+}
+
+.bs-icon svg,
+::slotted(svg),
+::slotted(img) {
+  display: block;
+  width: var(--bs-icon-size);
+  height: var(--bs-icon-size);
+}
+
+@media (forced-colors: active) {
+  .bs-icon { color: CanvasText; forced-color-adjust: none; }
+}

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

@@ -0,0 +1,155 @@
+import { h } from "@stencil/core";
+import { getIcon } from "./icon-registry";
+/**
+ * A sized, coloured icon. Renders inline SVG from a named registry (`name`), or any SVG you slot in.
+ *
+ * Built-in names: `menu`, `arrow-right`, `arrow-left`, `check`, `close`, `chevron-down`,
+ * `external-link`, `copy`, `search`, plus Phosphor glyphs `user`, `star`, `star-fill`, `x`,
+ * `paper-plane-right`, `note-pencil`, `clock-counter-clockwise`, `arrows-out-simple` (256x256 filled). Add more with `registerIcons({ name: '<path d="..."/>' })`
+ * (exported from the package entry): each value is the inner markup of a 24x24, `currentColor`
+ * stroke icon, or pass `{ viewBox, body }` for a filled glyph on another grid.
+ *
+ * Decorative by default (`aria-hidden`). Set `label` when the icon alone conveys meaning; it is then
+ * exposed as an image with that name. An icon inside a button never needs `label`: name the button.
+ *
+ * Composed from: nothing (leaf). Used by `bs-code-block`.
+ *
+ * ## When to use
+ * - A glyph beside text or inside a button, sized and coloured from tokens.
+ *
+ * ## When not to use
+ * - As a control by itself: wrap it in `bs-icon-button`.
+ * - For a tinted status square: use `bs-icon-tile`.
+ *
+ * @slot - Optional SVG (or `img`) shown when `name` is not set or not registered. Sized to the icon; draw with `currentColor` to follow `tone`.
+ * @part icon - The wrapper around the glyph.
+ */
+export class BsIcon {
+    el;
+    /** Registered icon name (see the component description for the built-in set). */
+    name;
+    /** Size: `xs` 12px, `sm` 16px, `md` 24px, `lg` 32px, `xl` 48px. */
+    size = 'md';
+    /** Colour from the icon tokens. `inherit` uses the surrounding text colour (`currentColor`). */
+    tone = 'default';
+    /** Accessible name. When set the icon is exposed as an image with this name; when empty it is
+     * decorative and hidden from assistive tech. */
+    label;
+    render() {
+        const markup = getIcon(this.name);
+        const filled = typeof markup === 'object';
+        const inner = typeof markup === 'string' ? markup : markup?.body;
+        const labelled = !!this.label;
+        return (h("span", { key: 'a286d23cd079a5fd7dfb472fc96a6b1e2f68e3f4', part: "icon", class: "bs-icon", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, markup ? (h("svg", { viewBox: filled ? markup.viewBox : '0 0 24 24', fill: filled ? 'currentColor' : 'none', stroke: filled ? undefined : 'currentColor', "stroke-width": filled ? undefined : '2', "stroke-linecap": filled ? undefined : 'round', "stroke-linejoin": filled ? undefined : 'round', "aria-hidden": "true", focusable: "false", ref: (svg) => {
+                if (svg && svg.innerHTML !== inner)
+                    svg.innerHTML = inner;
+            } })) : (h("slot", null))));
+    }
+    static get is() { return "bs-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Registered icon name (see the component description for the built-in set)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsIconSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "BsIconSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-icon/bs-icon.tsx",
+                            "id": "src/components/bs-icon/bs-icon.tsx::BsIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size: `xs` 12px, `sm` 16px, `md` 24px, `lg` 32px, `xl` 48px."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "tone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsIconTone",
+                    "resolved": "\"action\" | \"default\" | \"error\" | \"info\" | \"inherit\" | \"inverse\" | \"muted\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsIconTone": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-icon/bs-icon.tsx",
+                            "id": "src/components/bs-icon/bs-icon.tsx::BsIconTone"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour from the icon tokens. `inherit` uses the surrounding text colour (`currentColor`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tone",
+                "defaultValue": "'default'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name. When set the icon is exposed as an image with this name; when empty it is\ndecorative and hidden from assistive tech."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,52 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const NAMES = ['menu', 'arrow-right', 'arrow-left', 'check', 'close', 'chevron-down', 'external-link', 'copy', 'search'];
+const meta = {
+    title: 'Components/bs-icon',
+    parameters: { docs: { description: { component: componentDescription('bs-icon') } } },
+    render: args => html `<bs-icon name=${args.name} size=${args.size} tone=${args.tone} label=${args.label || ''}></bs-icon>`,
+    argTypes: {
+        name: { control: 'select', options: NAMES },
+        size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+        tone: { control: 'select', options: ['default', 'muted', 'action', 'success', 'info', 'warning', 'error', 'inverse', 'inherit'] },
+        label: { control: 'text' },
+    },
+    args: { name: 'search', size: 'md', tone: 'default', label: '' },
+};
+export default meta;
+export const Default = {};
+export const AllNames = {
+    name: 'Built-in names',
+    render: () => html `
+    <div style="display: flex; gap: var(--bs-spacing-300); flex-wrap: wrap">
+      ${NAMES.map(n => html `<div style="display: grid; justify-items: center; gap: var(--bs-spacing-50); font-size: var(--bs-font-size-xs)"><bs-icon name=${n}></bs-icon>${n}</div>`)}
+    </div>
+  `,
+};
+export const Sizes = {
+    render: () => html `
+    <div style="display: flex; gap: var(--bs-spacing-200); align-items: center">
+      ${['xs', 'sm', 'md', 'lg', 'xl'].map(s => html `<bs-icon name="check" size=${s}></bs-icon>`)}
+    </div>
+  `,
+};
+export const Tones = {
+    render: () => html `
+    <div style="display: flex; gap: var(--bs-spacing-200); align-items: center">
+      ${['default', 'muted', 'action', 'success', 'info', 'warning', 'error'].map(t => html `<bs-icon name="check" tone=${t}></bs-icon>`)}
+      <span style="color: var(--bs-text-error)"><bs-icon name="check" tone="inherit"></bs-icon></span>
+    </div>
+  `,
+};
+export const Labelled = {
+    name: 'With an accessible name',
+    args: { name: 'check', label: 'Saved' },
+};
+export const Slotted = {
+    name: 'Slotted SVG',
+    render: () => html `
+    <bs-icon tone="action">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8" /></svg>
+    </bs-icon>
+  `,
+};