@brandsync/wc 1.18.0 → 1.20.0

package/dist/collection/components/bs-empty-state/bs-empty-state.js

@@ -15,10 +15,12 @@ import { h } from "@stencil/core";
  * - A full-page error with a status code -- use `bs-error-page`.
  * - A transient message -- use `bs-toast` or `bs-snackbar`.
  *
+ * @slot illustration - A larger illustration or image that replaces the icon tile (use with `size="page"`).
  * @slot icon - The glyph inside the icon tile (24px, `currentColor`). Falls back to the tile's intent glyph.
  * @slot - The description (overrides the `description` prop).
  * @slot action - An optional action, e.g. `<bs-button variant="outlined">`.
  * @part container - The centered column.
+ * @part illustration - The illustration wrapper (only rendered while the `illustration` slot is filled).
  * @part icon - The icon tile (`bs-icon-tile`).
  * @part heading - The heading element.
  * @part description - The description paragraph.
@@ -26,6 +28,7 @@ import { h } from "@stencil/core";
  * @prop --bs-empty-state-padding-y - Vertical padding. Aliased to `--bs-spacing-700` (56px).
  * @prop --bs-empty-state-padding-x - Horizontal padding. Aliased to `--bs-spacing-300` (24px).
  * @prop --bs-empty-state-gap - Gap between tile, heading, description and action. Aliased to `--bs-spacing-150`.
+ * @prop --bs-empty-state-heading-size - Aliased to `--bs-font-size-xl` (`--bs-font-size-3xl` at `size="page"`).
  * @prop --bs-empty-state-heading-color - Aliased to `--bs-text-default`.
  * @prop --bs-empty-state-description-color - Aliased to `--bs-text-secondary`.
  */
@@ -39,7 +42,10 @@ export class BsEmptyState {
     intent = 'default';
     /** Heading level, 2 to 6 (renders `h2`..`h6`). Pick the one that fits the page outline. */
     headingLevel = 3;
+    /** `panel` (default) fits inside a card, table or section. `page` fills a whole view: more padding, a larger heading and a minimum height. */
+    size = 'panel';
     hasIcon = false;
+    hasIllustration = false;
     hasDescriptionSlot = false;
     hasAction = false;
     observer;
@@ -55,13 +61,14 @@ export class BsEmptyState {
         const nodes = Array.from(this.el.childNodes);
         const slotOf = (n) => (n.nodeType === Node.ELEMENT_NODE ? n.getAttribute('slot') : null);
         this.hasIcon = nodes.some(n => slotOf(n) === 'icon');
+        this.hasIllustration = nodes.some(n => slotOf(n) === 'illustration');
         this.hasAction = nodes.some(n => slotOf(n) === 'action');
         this.hasDescriptionSlot = nodes.some(n => !slotOf(n) && (n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim())));
     }
     render() {
         const level = Math.min(6, Math.max(2, Math.round(Number(this.headingLevel)) || 3));
         const Heading = `h${level}`;
-        return (h("div", { key: 'dabc994fcb254cb35958f8bde54d7935bb6ff70a', part: "container", class: "bs-empty-state" }, h("bs-icon-tile", { key: 'efec1cc06eb3447fbd81b12634c12ee96f9fd0d2', part: "icon", size: "lg", intent: this.intent }, this.hasIcon && h("slot", { key: 'd8a7482e2b32f6361b82232652edcc1aadb74a5b', name: "icon" })), this.heading && (h(Heading, { key: '6625baa3d00097951042608aeb888f7c1665e987', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (h("p", { key: 'c367d9d3aa154e8413c04ca47de7cd9f5eed6883', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? h("slot", null) : this.description)), this.hasAction && (h("div", { key: '7b9b78de4e71e6d07d94d4595290492542d7bf62', part: "action", class: "bs-empty-state__action" }, h("slot", { key: '7b57218ca03edfd6f972a2bb6ce458db8dc33d9a', name: "action" })))));
+        return (h("div", { key: '3639ba86bf80fa1bceb453455c0e619739302895', part: "container", class: "bs-empty-state" }, this.hasIllustration ? (h("div", { part: "illustration", class: "bs-empty-state__illustration" }, h("slot", { name: "illustration" }))) : (h("bs-icon-tile", { part: "icon", size: "lg", intent: this.intent }, this.hasIcon && h("slot", { name: "icon" }))), this.heading && (h(Heading, { key: '18d951ff64f7ced418f4943c7827539bf07c994a', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (h("p", { key: '010e3f521741a0f2ba2ed314f87165c1b3d3b384', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? h("slot", null) : this.description)), this.hasAction && (h("div", { key: '53d8df33337004dd2a0ae9153c8603c37c2750e9', part: "action", class: "bs-empty-state__action" }, h("slot", { key: '167f4b5ac23b721a489cdf0051b8a2bf151b9bc0', name: "action" })))));
     }
     static get is() { return "bs-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -161,12 +168,33 @@ export class BsEmptyState {
                 "reflect": false,
                 "attribute": "heading-level",
                 "defaultValue": "3"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'panel' | 'page'",
+                    "resolved": "\"page\" | \"panel\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`panel` (default) fits inside a card, table or section. `page` fills a whole view: more padding, a larger heading and a minimum height."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'panel'"
             }
         };
     }
     static get states() {
         return {
             "hasIcon": {},
+            "hasIllustration": {},
             "hasDescriptionSlot": {},
             "hasAction": {}
         };

package/dist/collection/components/bs-empty-state/bs-empty-state.stories.js

@@ -10,16 +10,18 @@ const meta = {
         description: { control: 'text' },
         intent: { control: 'select', options: ['default', 'success', 'warning', 'error', 'brand', 'information'] },
         headingLevel: { control: 'select', options: [2, 3, 4, 5, 6] },
+        size: { control: 'select', options: ['panel', 'page'] },
     },
     args: {
         heading: 'No events match these filters',
         description: 'Try a wider date range or clear filters.',
         intent: 'default',
         headingLevel: 3,
+        size: 'panel',
     },
     render: args => html `
     <div style="width: 480px">
-      <bs-empty-state heading=${args.heading} description=${args.description} intent=${args.intent} .headingLevel=${args.headingLevel}>
+      <bs-empty-state heading=${args.heading} description=${args.description} intent=${args.intent} size=${args.size} .headingLevel=${args.headingLevel}>
         ${SEARCH_ICON}
         <bs-button slot="action" variant="outlined">Clear filters</bs-button>
       </bs-empty-state>
@@ -50,3 +52,24 @@ export const WithoutAction = {
     </div>
   `,
 };
+export const PageSize = {
+    name: 'Page size',
+    args: { size: 'page', headingLevel: 2, heading: 'Nothing here yet', description: 'Create your first project to get started.' },
+    render: args => html `
+    <bs-empty-state heading=${args.heading} description=${args.description} size="page" .headingLevel=${args.headingLevel}>
+      ${SEARCH_ICON}
+      <bs-button slot="action">Create project</bs-button>
+    </bs-empty-state>
+  `,
+};
+export const WithIllustration = {
+    name: 'With illustration',
+    render: args => html `
+    <div style="width: 480px">
+      <bs-empty-state heading=${args.heading} description=${args.description} size="page">
+        <svg slot="illustration" width="160" height="120" viewBox="0 0 160 120" fill="none" aria-hidden="true"><rect x="10" y="20" width="140" height="80" rx="8" stroke="currentColor" stroke-width="2" /><path d="M10 45h140" stroke="currentColor" stroke-width="2" /></svg>
+        <bs-button slot="action" variant="outlined">Clear filters</bs-button>
+      </bs-empty-state>
+    </div>
+  `,
+};

package/dist/collection/components/bs-error-page/bs-error-page.js

@@ -65,7 +65,7 @@ export class BsErrorPage {
         const primary = this.primaryLabel ?? d.primary;
         const secondary = this.secondaryLabel ?? d.secondary;
         const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 1));
-        return (h("bs-card", { key: '4214c79438721c66089be3a4ae64fcd6bdcbdea6', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: '39b2a7292d488442fc2465635a5be9dd704dc42e', class: "bs-error-page__body" }, h("div", { key: 'beb353eefb6b77b03fe7d1ea3894b6a625eebe06', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: '516a9c87ddb3ac5140d2880d4638eb5eca01db73', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: '3c3029ce78413f49c4bb839260c432848329b428', name: "icon" }, d.glyph())), code && (h("span", { key: 'fc4058b507c0b60ca417f09f7838664716b17fc3', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: 'b914f77506217b401e26694205104d623596d270', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'b6dc2e92b34960f754a54b31a659337135e63607', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: 'e4f85bf6e86a80fbf1bd09fc77e16768c435a97b', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: 'a1469448cfbf1edb0bb8fe1d613101782dc87145', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: 'e8f32f0cc84051d02418bb48bc6116675ec55097', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
+        return (h("bs-card", { key: '587457fde4a8a9e0485a88905d9ca9aed7822b13', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: '902640ac8d0645646fcd75d9bae72f0adb96d2ee', class: "bs-error-page__body" }, h("div", { key: '161a5ec1c4af4fad776f8fb70b4ba36e57e652f8', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: '129fc2c5d79f48d74aa619052df56e4af880e956', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: 'af0d768b53efd2cc8ab4c4bc3390c9edf896c573', name: "icon" }, d.glyph())), code && (h("span", { key: '819358ee0eacb2d378b049970eca9e845c891317', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: '701eb1787e0beedb193ea73de528bde3a53104bb', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'fe1e33d40cfc18493851ec9f244c81472e4a3a27', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: '567627956a37daa24bc9ac571505370dcc2c05a6', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '4190ca2af4469e31d15c3487d29da438b16f64cd', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: '1dde6d7782f1d74ded03accbc04f6799790653c4', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
     }
     static get is() { return "bs-error-page"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-file-upload/bs-file-upload.js

@@ -112,7 +112,7 @@ export class BsFileUpload {
             this.handleFiles(files);
     };
     render() {
-        return (h("div", { key: '5312a866a1db63fd378f265fc200a509bfd50ce1', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("div", { key: '7276ccfa10a086d933b5563a208393a75e0dd821', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: 'e828eaa70303c82cb2bea5e647807079946b62e7', name: "icon" }, h(UploadIcon, { key: 'bd6ee5b8b20996ee68f972cb79db7c47f645c4d3' }))), h("div", { key: '784440974685713b31ba97642b931b99e64433a3', class: "bs-file-upload__content" }, h("div", { key: 'c7568214218e02ecb794f3429b843462f88bf216', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '4872f617be4f30b9ab98aeca2dca7012d9391905', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: 'd8f446f1f8690ec773b094aeeb66af49ec1de291', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: 'bb0634e3e0dcb4a4ef59fa7c5daeaacbff5bceda', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: 'f55602446ec222ca46b7dab95aaff26d6d5b1632', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
+        return (h("div", { key: 'b444692d61263c742166a4a436e8fe0999ba2410', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("div", { key: 'b0d5e476e0489b7fe598f9933076cfa43d4e6757', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: 'c0a42996503983e8bd899fd0f582d69df5ef6fbe', name: "icon" }, h(UploadIcon, { key: '0c00aec36659e9ddaebcb2fc544be85011cad571' }))), h("div", { key: 'f9b691faa0c924cf8d0f055c4f3bc5aaa1db70f1', class: "bs-file-upload__content" }, h("div", { key: 'dd15e2cdd12785a070cc4d0d4e53eb0e0e2cde1e', class: "bs-file-upload__text" }, this.heading && (h("span", { key: 'd02aafd376d43de1853f4aef16a53b6cabf96f59', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: '2d1b2195352c65a01a18e914f89e8bb84d7d8e68', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: '34608882d553c6a8d8f7f3cf16157e0164b6c087', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '48f5bf76a00bd12fe2f2f3f25e639d0fa7eeeb78', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
     }
     static get is() { return "bs-file-upload"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-file-upload-item/bs-file-upload-item.js

@@ -86,7 +86,7 @@ export class BsFileUploadItem {
     }
     render() {
         const removing = this.state === 'success';
-        return (h("div", { key: '26933845798c1cee2739c2a5a3d402175244717b', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: 'b7312bfd0a7bcbeac8e098be4cb6d565283f2e0f', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '69350d5224f540e0f4d5033e3ac92ccff397b565', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'fbe429e0dd56af6fe5d955ce384a335c9ce3843a', class: "bs-file-upload-item__content" }, h("div", { key: 'b45f5b5500d760dcfb0d8fe3e87638db9325ae99', class: "bs-file-upload-item__meta" }, h("span", { key: '7e5a8cd3ccca37c88182d0e430841f36f29f56e7', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '114e9167c4542c9e071ebb21ee77d25d5c9221b4', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: 'f6a9a212a6436ac50eaab6b0224b58245171a7de', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
+        return (h("div", { key: '7c45a43dd6901078911b6709d75b5394cae77626', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: '9911abe4b2876c1afd6aa2c788a92b9737a17b74', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '704e42a69efba6dba851247be97778a43aac238a', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'd834ed0a69876994d4693e261eda30e636f57d5f', class: "bs-file-upload-item__content" }, h("div", { key: 'b22f1d39328698c9b9a847288f1585962ffbd646', class: "bs-file-upload-item__meta" }, h("span", { key: 'e82780922ed2e79adff9eb73a8b8ed55100ae58b', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: 'cb8a4ba77ce49b4147b22293937ef6533aa62776', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: 'b07f558ddbaa346ad64abc08f372eb464062425a', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
     }
     static get is() { return "bs-file-upload-item"; }
     static get encapsulation() { return "shadow"; }

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: '48912c3c2e6fdfefa05d234fa037e4b47e36cbd9', class: "bs-global-search" }, h("div", { key: 'aeb8a5d41463b5df24502aecb85290f2535184d6', 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: '0aec5505a09ca9fa08e152983b17e3a35619e5ce', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (h("div", { key: 'c9b1589c7602b0522a5a33d895e50e2f57ae7e66', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (h("div", { key: 'aa49f77c49ea3aa5337a01aa8cf2e760ac8f6125', 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: '591953d910a7986705dde045c325c3043df1387b', 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: 'd504eaf0d6db8c106094f3efb60600b65774ea4d', 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: 'd127b6a767777b1d2cc3fe981e1846e5a8726a60' })));
+            } }, 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; }
+}