@brandsync/wc 1.10.0 → 1.12.0

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

@@ -0,0 +1,328 @@
+import { h } from "@stencil/core";
+/**
+ * A full-block page for when the user can't get to what they asked for: page not found (404), a server
+ * error (500), no access (403), planned maintenance, or no internet connection. Matches the Figma
+ * "Error page" component's five states.
+ *
+ * Each `type` brings its own icon, tint, code label ("404", "Maintenance", ...), heading, paragraph and
+ * buttons, all overridable by props. The component doesn't navigate or retry anything: it emits
+ * `bsPrimary` / `bsSecondary` and your app decides what "Go to Overview" or "Try again" does.
+ *
+ * **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions).
+ *
+ * ## When to use
+ * - Replacing the content of a page or panel that can't be shown, with a clear way forward.
+ *
+ * ## When not to use
+ * - A problem with one field or one action -- use inline validation or a `bs-snackbar`.
+ * - A blocking question the user must answer -- use `bs-dialog`.
+ *
+ * @slot icon - Replaces the default glyph in the icon tile. Draw it with `currentColor`.
+ * @part container - The card.
+ * @part art - The icon tile.
+ * @part code - The label under the icon ("404", "Maintenance", ...).
+ * @part heading - The heading.
+ * @part description - The paragraph.
+ * @part actions - The button row.
+ * @part primary - The primary button.
+ * @part secondary - The secondary button.
+ * @part reference - The small reference line (an error id and time).
+ */
+export class BsErrorPage {
+    /** Which error: `not-found` (404), `server-error` (500), `no-access` (403), `maintenance` or
+     * `offline`. */
+    type = 'not-found';
+    /** The small label under the icon, e.g. "404". Defaults per `type` ("404", "500", "403",
+     * "Maintenance", "Offline"). Set it to an empty string to hide it. */
+    code;
+    /** Heading. Defaults per `type`. */
+    heading;
+    /** HTML heading level for the heading, 1-6. Use 1 when this replaces the whole page; lower when it
+     * sits inside a section that already has a heading above it. */
+    headingLevel = 1;
+    /** Paragraph under the heading. Defaults per `type`. */
+    description;
+    /** Label of the primary button. Defaults per `type`. Set it to an empty string to hide it. */
+    primaryLabel;
+    /** Label of the secondary button. Defaults per `type` (only `not-found`, `server-error` and
+     * `no-access` have one). Set it to an empty string to hide it. */
+    secondaryLabel;
+    /** A small reference line under the buttons, e.g. `"Error ID: 7f3c-21a9 · 30.09.2026 10:42"`, for
+     * support to look up. Nothing is shown when empty. */
+    reference;
+    /** Fires when the primary button is pressed. */
+    bsPrimary;
+    /** Fires when the secondary button is pressed. */
+    bsSecondary;
+    get defaults() {
+        return TYPES[this.type] ?? TYPES['not-found'];
+    }
+    render() {
+        const d = this.defaults;
+        const code = this.code ?? d.code;
+        const heading = this.heading ?? d.heading;
+        const description = this.description ?? d.description;
+        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: '27e16dc9013ea60751032fcccd626fb44aa7f708', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: 'bbca94e98665e09c5cd86626bf136f7b1393cbeb', class: "bs-error-page__body" }, h("div", { key: 'f358107685a4bfa06f1428bdd203d06b767fa83b', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: '096621ed3f0fa1545ae4e9a55cf316ff8f4349cb', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: '675e23b9001cb6570d95092f429666bee38368d1', name: "icon" }, d.glyph())), code && (h("span", { key: 'f82874da8c28f2f3e7adc17f4532a4b99082fc81', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: 'ee4a20fa4862df6533eb6de359dbf3f55c613f26', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'b921d9f129128a92ce3af409a8cd723ee49b7e02', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: '0e8e62423a122ce6bcb41ad93138cb5d2573d5d1', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '07d4527e4fd8813d4a6c1d5316b34c2678bbae8d', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: '590120eeb06e91ab3617d3f1630a361c207afe42', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
+    }
+    static get is() { return "bs-error-page"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-error-page.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-error-page.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsErrorPageType",
+                    "resolved": "\"maintenance\" | \"no-access\" | \"not-found\" | \"offline\" | \"server-error\"",
+                    "references": {
+                        "BsErrorPageType": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-error-page/bs-error-page.tsx",
+                            "id": "src/components/bs-error-page/bs-error-page.tsx::BsErrorPageType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which error: `not-found` (404), `server-error` (500), `no-access` (403), `maintenance` or\n`offline`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'not-found'"
+            },
+            "code": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The small label under the icon, e.g. \"404\". Defaults per `type` (\"404\", \"500\", \"403\",\n\"Maintenance\", \"Offline\"). Set it to an empty string to hide it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "code"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading. Defaults per `type`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "headingLevel": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML heading level for the heading, 1-6. Use 1 when this replaces the whole page; lower when it\nsits inside a section that already has a heading above it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-level",
+                "defaultValue": "1"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Paragraph under the heading. Defaults per `type`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "primaryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the primary button. Defaults per `type`. Set it to an empty string to hide it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-label"
+            },
+            "secondaryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the secondary button. Defaults per `type` (only `not-found`, `server-error` and\n`no-access` have one). Set it to an empty string to hide it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-label"
+            },
+            "reference": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A small reference line under the buttons, e.g. `\"Error ID: 7f3c-21a9 \u00B7 30.09.2026 10:42\"`, for\nsupport to look up. Nothing is shown when empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reference"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsPrimary",
+                "name": "bsPrimary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the primary button is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsSecondary",
+                "name": "bsSecondary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the secondary button is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+const icon = (children) => () => (h("svg", { class: "bs-error-page__glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, children));
+const TYPES = {
+    'not-found': {
+        intent: 'default',
+        info: true,
+        code: '404',
+        heading: 'Page not found',
+        description: 'The link may be old, or the page has moved.',
+        primary: 'Go to Overview',
+        secondary: 'Search',
+        glyph: icon(h("g", null, h("circle", { cx: "10.5", cy: "10.5", r: "6.5" }), h("path", { d: "M15.5 15.5L20.5 20.5" }))),
+    },
+    'server-error': {
+        intent: 'error',
+        code: '500',
+        heading: 'Something went wrong on our side',
+        description: 'We’re working on it. Try again in a moment.',
+        primary: 'Try again',
+        secondary: 'Contact support',
+        glyph: icon(h("g", null, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M12 7.5V12.5" }), h("path", { d: "M12 16.2V16.3" }))),
+    },
+    'no-access': {
+        intent: 'default',
+        code: '403',
+        heading: 'You don’t have access',
+        description: 'Contact your administrator for the access.',
+        primary: 'Request access',
+        secondary: 'Go back',
+        glyph: icon(h("g", null, h("rect", { x: "5", y: "10.5", width: "14", height: "9.5", rx: "1.5" }), h("path", { d: "M8.5 10.5V8A3.5 3.5 0 0 1 15.5 8V10.5" }))),
+    },
+    maintenance: {
+        intent: 'warning',
+        code: 'Maintenance',
+        heading: 'We’re upgrading the system',
+        description: 'We’ll be back shortly. Your data is safe.',
+        primary: 'View system status',
+        secondary: '',
+        glyph: icon(h("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" })),
+    },
+    offline: {
+        intent: 'warning',
+        code: 'Offline',
+        heading: 'No internet connection',
+        description: 'Changes are saved locally and will be updated when you’re back online.',
+        primary: 'Try again',
+        secondary: '',
+        glyph: icon(h("g", null, h("path", { d: "M4 4L20 20" }), h("path", { d: "M2.5 9.5A14 14 0 0 1 8 6.7" }), h("path", { d: "M21.5 9.5A14 14 0 0 0 14 6.2" }), h("path", { d: "M5.5 13A9.5 9.5 0 0 1 9.5 10.6" }), h("path", { d: "M18.5 13A9.5 9.5 0 0 0 16 11.3" }), h("path", { d: "M9 16.5A4.5 4.5 0 0 1 12 15.3" }), h("path", { d: "M12 19.2V19.3" }))),
+    },
+};

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

@@ -0,0 +1,57 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-error-page',
+    parameters: { docs: { description: { component: componentDescription('bs-error-page') } } },
+    render: args => html `
+    <bs-error-page
+      type=${args.type}
+      code=${ifDefined(args.code || undefined)}
+      heading=${ifDefined(args.heading || undefined)}
+      description=${ifDefined(args.description || undefined)}
+      primary-label=${ifDefined(args.primaryLabel || undefined)}
+      secondary-label=${ifDefined(args.secondaryLabel || undefined)}
+      reference=${ifDefined(args.reference || undefined)}
+      heading-level=${args.headingLevel}
+      @bsPrimary=${() => console.log('bsPrimary')}
+      @bsSecondary=${() => console.log('bsSecondary')}
+    ></bs-error-page>
+  `,
+    argTypes: {
+        type: { control: 'select', options: ['not-found', 'server-error', 'no-access', 'maintenance', 'offline'], description: propDescription('bs-error-page', 'type') },
+        code: { control: 'text', description: propDescription('bs-error-page', 'code') },
+        heading: { control: 'text', description: propDescription('bs-error-page', 'heading') },
+        description: { control: 'text', description: propDescription('bs-error-page', 'description') },
+        primaryLabel: { control: 'text', description: propDescription('bs-error-page', 'primaryLabel') },
+        secondaryLabel: { control: 'text', description: propDescription('bs-error-page', 'secondaryLabel') },
+        reference: { control: 'text', description: propDescription('bs-error-page', 'reference') },
+        headingLevel: { control: { type: 'number', min: 1, max: 6 }, description: propDescription('bs-error-page', 'headingLevel') },
+    },
+    args: { type: 'not-found', code: '', heading: '', description: '', primaryLabel: '', secondaryLabel: '', reference: '', headingLevel: 1 },
+};
+export default meta;
+export const NotFound = { name: 'Not found (404)' };
+export const ServerError = {
+    name: 'Server error (500)',
+    args: { type: 'server-error', reference: 'Error ID: 7f3c-21a9 · 30.09.2026 10:42' },
+};
+export const NoAccess = { name: 'No access (403)', args: { type: 'no-access' } };
+export const Maintenance = {
+    args: { type: 'maintenance', description: 'Back up at about 06:00. Your data is safe.' },
+};
+export const Offline = { args: { type: 'offline' } };
+export const CustomCopy = {
+    name: 'Custom copy',
+    args: { type: 'not-found', heading: 'This order doesn’t exist', description: 'Check the order number, or search for it.', primaryLabel: 'All orders', secondaryLabel: 'Search orders' },
+};
+export const CustomIcon = {
+    name: 'Custom icon',
+    render: () => html `
+    <bs-error-page type="offline" heading="You're offline" description="We'll sync when you reconnect." primary-label="Retry now">
+      <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 3V13M8 9L12 13L16 9M5 19H19" />
+      </svg>
+    </bs-error-page>
+  `,
+};

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: 'b33535fd240d2d406118fd64fd9c227dea7ecd6e', 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: '38cc0d7e10cbdfd9daef5749c2b50ec7c9123f71', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: '0e9cadb8101a73f55410eb30b2ddbf9c5e2cd0ed', name: "icon" }, h(UploadIcon, { key: '3f745666d0967ab5de4a6824a0fc8b3e0f7f900b' }))), h("div", { key: '7e347497915149907ade2e90aa19bd339b013be9', class: "bs-file-upload__content" }, h("div", { key: 'ea3a760d44b38cd5397d5952dbee998ddb2bea1b', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '9e00cc05d2b479964502243e1dda32eb7fa81e42', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: 'abb9857cdd2c85a7730101d05a5704d947c669bd', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: '98dea0715d7c0c641c552025403febd13fe4c32f', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '0c83fdaba93b46128e4990f9d15a746fd95479f5', 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: '0d56df66efcaae8ae01435f81755a2cbfe9e6735', 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: '63d1f3d7b64f9efe016f5720f2e78224cde2d4ee', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: '8bd5a62c50cce5608bd48b5db4d414c00dcdb68d', name: "icon" }, h(UploadIcon, { key: '478fcbbd730135bc396837ff1fcdee22418cf662' }))), h("div", { key: 'b4403e04e359e0d01a9f2e06d90ccaf0ce9ed5dd', class: "bs-file-upload__content" }, h("div", { key: '2b2d4dd5492ff8b88acbf4e3525f94d427e66e05', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '25110b17458d6ac5d8f41c75b1cac44e7aa5b726', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: '362c13ebac808e066aa583c861f7d540715ebf2b', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: '09fd3013539163d2478abc7cd127cc2121aa206e', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '2829fea7f7d8b4f3aae730678c9193eadd075422', 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: '6b7fc89949cfa70838cc60d94ccb91afe09f75cd', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: '55923d2fc56d8b1794a3a0d835440cd428e1e168', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '25f93a00ba465db98c73f1bf38abc46110ae5c82', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'ab975fe4e7e888755f9ceae00b6633f86b856c47', class: "bs-file-upload-item__content" }, h("div", { key: '6b1c9161edd76c799f0c545e2f939907bbb1dcee', class: "bs-file-upload-item__meta" }, h("span", { key: '3b7ca85e645d19b1ef1affff55a8e2a2284aff72', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '70dd2e29628bd536dac520ffe653bc7651f41c33', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '5ac7e596601ebdb35add9e278f17f67db4758e48', 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: 'b239ca2558d3f0c25c58e0deeff988b29696a4a2', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: 'c146e98abf457f86aaca4f22e1813e51b9f8bfea', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '1d7b35010b00fcedcf8f3e94ccc710ff44a1de9f', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'ba248f04ec0c44a4419f2e87d800500259d50c39', class: "bs-file-upload-item__content" }, h("div", { key: '9feafd65955cd80cd7e8878dc2af73e2c4184455', class: "bs-file-upload-item__meta" }, h("span", { key: '95214fe26b2256399a0ab3ea3568f868ac22984e', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '8ffece05f1ecb00839fbdd4086ad55a485f0bbca', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '63508a0938b11dabfba623f0197c91e024b004b7', 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-icon-tile/bs-icon-tile.cmp.test.js

@@ -0,0 +1,175 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const box = (root) => root.getBoundingClientRect();
+const cs = (root) => getComputedStyle(root.shadowRoot.querySelector('[part="container"]'));
+describe('bs-icon-tile', () => {
+    it('defaults to a small default tile with the house glyph', async () => {
+        const { root } = await render(h("bs-icon-tile", null));
+        expect(root).toEqualAttribute('size', 'sm');
+        expect(root).toEqualAttribute('intent', 'default');
+        expect(box(root).width).toBe(24);
+        expect(box(root).height).toBe(24);
+        expect(root.shadowRoot.querySelector('[part="icon"] svg')).not.toBeNull();
+    });
+    it.each([
+        ['sm', 24, 12, '4px'],
+        ['md', 32, 16, '5.33333px'],
+        ['lg', 48, 24, '8px'],
+    ])('size %s is %ipx with a %ipx icon and %s radius (Figma)', async (size, tile, icon, radius) => {
+        const { root } = await render(h("bs-icon-tile", { size: size }));
+        expect(box(root).width).toBe(tile);
+        expect(root.shadowRoot.querySelector('svg').getBoundingClientRect().width).toBe(icon);
+        expect(cs(root).borderTopLeftRadius).toBe(radius);
+    });
+    it('renders a different glyph per intent', async () => {
+        const intents = ['default', 'success', 'warning', 'error', 'brand', 'information'];
+        const markup = new Set();
+        for (const intent of intents) {
+            const { root } = await render(h("bs-icon-tile", { intent: intent }));
+            markup.add(root.shadowRoot.querySelector('svg').innerHTML);
+        }
+        expect(markup.size).toBe(6);
+    });
+    it('tints each intent differently', async () => {
+        const intents = ['default', 'success', 'warning', 'error', 'brand', 'information'];
+        const colours = new Set();
+        for (const intent of intents) {
+            const { root } = await render(h("bs-icon-tile", { intent: intent }));
+            colours.add(cs(root).backgroundColor);
+        }
+        expect(colours.size).toBe(6);
+    });
+    it('replaces the default glyph with slotted content', async () => {
+        const { root } = await render(h("bs-icon-tile", null, h("svg", { slot: undefined, id: "mine", viewBox: "0 0 24 24" }, h("path", { d: "M0 0" }))));
+        const slot = root.shadowRoot.querySelector('slot');
+        expect(slot.assignedElements().map(e => e.id)).toEqual(['mine']);
+    });
+    it('is decorative by default', async () => {
+        const { root } = await render(h("bs-icon-tile", null));
+        const c = root.shadowRoot.querySelector('[part="container"]');
+        expect(c).toEqualAttribute('aria-hidden', 'true');
+        expect(c.getAttribute('role')).toBeNull();
+    });
+    it('is an image with an accessible name when label is set', async () => {
+        const { root } = await render(h("bs-icon-tile", { label: "Error" }));
+        const c = root.shadowRoot.querySelector('[part="container"]');
+        expect(c).toEqualAttribute('role', 'img');
+        expect(c).toEqualAttribute('aria-label', 'Error');
+        expect(c.getAttribute('aria-hidden')).toBeNull();
+    });
+    it('can be resized through its custom property', async () => {
+        const { root } = await render(h("bs-icon-tile", { style: { '--bs-icon-tile-size': '64px' } }));
+        expect(box(root).width).toBe(64);
+    });
+    describe('dark mode (Figma "Icon tile", dark)', () => {
+        const hex = (c) => '#' + (c.match(/\d+/g) || []).slice(0, 3).map(n => Number(n).toString(16).padStart(2, '0')).join('');
+        const colours = async (theme) => {
+            if (theme)
+                document.documentElement.setAttribute('data-theme', theme);
+            try {
+                const out = {};
+                for (const intent of ['default', 'success', 'warning', 'error', 'brand', 'information']) {
+                    const { root } = await render(h("bs-icon-tile", { intent: intent }));
+                    const cs = getComputedStyle(root.shadowRoot.querySelector('[part="container"]'));
+                    out[intent] = [hex(cs.backgroundColor), hex(cs.color)];
+                }
+                return out;
+            }
+            finally {
+                document.documentElement.removeAttribute('data-theme');
+            }
+        };
+        it('uses the 900 step behind the 100 step in dark mode, and a fixed information tint', async () => {
+            const dark = await colours('dark');
+            expect(dark.default).toEqual(['#21262e', '#f9fafb']);
+            expect(dark.success).toEqual(['#0f2b1e', '#c5ebd5']);
+            expect(dark.warning).toEqual(['#332300', '#ffdea1']);
+            expect(dark.error).toEqual(['#481212', '#ffdad7']);
+            expect(dark.brand).toEqual(['#001b3e', '#3e88ef']);
+            expect(dark.information).toEqual(['#edf0fa', '#448cd6']);
+        });
+        it('keeps the light backgrounds from the light Figma', async () => {
+            const light = await colours();
+            expect(light.success[0]).toBe('#e5f5e9');
+            expect(light.warning[0]).toBe('#ffdea1');
+            expect(light.error[0]).toBe('#ffdad7');
+            expect(light.information[0]).toBe('#edf0fa');
+        });
+    });
+    describe('whitespace in the markup (any HTML template)', () => {
+        const mount = async (html) => {
+            const host = document.createElement('div');
+            host.innerHTML = html;
+            document.body.appendChild(host);
+            await new Promise(r => setTimeout(r, 200));
+            return host.querySelector('bs-icon-tile');
+        };
+        it('still shows the default glyph when the only children are whitespace around a text child', async () => {
+            const tile = await mount(`<bs-icon-tile size="md" intent="success">
+        <span slot="text">Payment received</span>
+      </bs-icon-tile>`);
+            const glyph = tile.shadowRoot.querySelector('[part="icon"] svg');
+            expect(glyph).not.toBeNull();
+            expect(glyph.getBoundingClientRect().width).toBe(16);
+            tile.parentElement.remove();
+        });
+        it('still shows the default glyph for a tile written across lines with nothing in it', async () => {
+            const tile = await mount(`<bs-icon-tile intent="error">
+
+      </bs-icon-tile>`);
+            expect(tile.shadowRoot.querySelector('[part="icon"] svg')).not.toBeNull();
+            tile.parentElement.remove();
+        });
+        it('still lets a real custom icon replace the default glyph', async () => {
+            const tile = await mount(`<bs-icon-tile>
+        <svg id="mine" viewBox="0 0 24 24"><path d="M0 0" /></svg>
+      </bs-icon-tile>`);
+            expect(tile.shadowRoot.querySelector('[part="icon"] > svg')).toBeNull();
+            const slot = tile.shadowRoot.querySelector('slot:not([name])');
+            expect(slot.assignedElements().map(e => e.id)).toEqual(['mine']);
+            tile.parentElement.remove();
+        });
+    });
+    describe('text slot', () => {
+        it('is exactly the square when no text is slotted', async () => {
+            const { root } = await render(h("bs-icon-tile", { size: "md" }));
+            expect(root.getBoundingClientRect().width).toBe(32);
+            expect(getComputedStyle(root.shadowRoot.querySelector('[part="text"]')).display).toBe('none');
+        });
+        it('shows slotted text beside the square, vertically centred, with a gap', async () => {
+            const { root } = await render(h("bs-icon-tile", { size: "md", intent: "success" }, h("span", { slot: "text" }, "Payment received")));
+            await new Promise(r => setTimeout(r, 100));
+            const square = root.shadowRoot.querySelector('[part="container"]').getBoundingClientRect();
+            const text = root.shadowRoot.querySelector('[part="text"]').getBoundingClientRect();
+            expect(getComputedStyle(root.shadowRoot.querySelector('[part="text"]')).display).toBe('block');
+            expect(text.left - square.right).toBe(8);
+            expect(Math.abs((text.top + text.bottom) / 2 - (square.top + square.bottom) / 2)).toBeLessThanOrEqual(1);
+        });
+        it('colours the text with --bs-icon-tile-text-color, and leaves the icon colour alone', async () => {
+            const { root } = await render(h("bs-icon-tile", { intent: "success", style: { '--bs-icon-tile-text-color': 'rgb(1, 2, 3)' } }, h("span", { slot: "text" }, "Done")));
+            await new Promise(r => setTimeout(r, 100));
+            expect(getComputedStyle(root.shadowRoot.querySelector('[part="text"]')).color).toBe('rgb(1, 2, 3)');
+            expect(getComputedStyle(root.shadowRoot.querySelector('[part="container"]')).color).not.toBe('rgb(1, 2, 3)');
+        });
+        it('uses the default text colour (--bs-text-default) when not overridden, in light and dark', async () => {
+            const read = async () => {
+                const { root } = await render(h("bs-icon-tile", null, h("span", { slot: "text" }, "Done")));
+                await new Promise(r => setTimeout(r, 100));
+                return getComputedStyle(root.shadowRoot.querySelector('[part="text"]')).color;
+            };
+            const light = await read();
+            document.documentElement.setAttribute('data-theme', 'dark');
+            try {
+                const dark = await read();
+                expect(dark).not.toBe(light);
+            }
+            finally {
+                document.documentElement.removeAttribute('data-theme');
+            }
+        });
+        it('keeps the square decorative: the text stays readable and is not inside the aria-hidden square', async () => {
+            const { root } = await render(h("bs-icon-tile", null, h("span", { slot: "text" }, "Payment received")));
+            expect(root.shadowRoot.querySelector('[part="container"]')).toEqualAttribute('aria-hidden', 'true');
+            expect(root.shadowRoot.querySelector('[part="container"]').contains(root.shadowRoot.querySelector('[part="text"]'))).toBe(false);
+        });
+    });
+});