@brandsync/wc 1.9.0 → 1.11.0

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: 'baa70a704a4c3508cd3186f567d0887218a9c04d', 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: 'c5fe3207ba56506a272c42097ec23881bcf863d4', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: 'd33d8f0f7b17bab679124823c61a1b7c6d031345', name: "icon" }, h(UploadIcon, { key: 'd0356e97a031867f323de21905a2bbca57963962' }))), h("div", { key: 'a5f4fb403556b2b596291bfddad2b73b1765f91f', class: "bs-file-upload__content" }, h("div", { key: 'b99afac250a8d40e54c97f74afde42620da2ff07', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '33a2ce5aac1d8bf15c55dcf8ccfe4fbce6892fd1', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: 'eec7f2fcc598412107e7b9c78efae30a3714c674', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: 'f44a5747bb0e9452aefa1fe2fc1d51b1af7da9b1', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: 'c8e19f95978d103f535bf26fb64c34ff69c4c7ee', 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: 'd26aebbbdb7858444d2ff3084c421ce1e70acd9e', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: '2bf21442cc31bc9f85178e97bdae140de59fd7ce', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: 'fb9a9d723855e6d2556e61fb5cc7414e296ddf89', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'ca1cab03c21d93b4fe754e8e4575bbee5c6c11bd', class: "bs-file-upload-item__content" }, h("div", { key: '072532a7cfb4a699ab9920594ed4299bd094eea3', class: "bs-file-upload-item__meta" }, h("span", { key: 'f30ec89b3af9d5a4fc3ea2cf9252713f47a68ba2', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '63aeb6db94d78011a649fa1a0771d488890c330b', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '5434d917777db308f8b16f84e2ccd5efcfb46dc8', 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);
+        });
+    });
+});

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

@@ -0,0 +1,112 @@
+/**
+ * @prop --bs-icon-tile-size: Width/height of the tile. Set per `size` on the host: 24px / 32px / 48px (Figma).
+ * @prop --bs-icon-tile-radius: Corner radius. Set per `size`: 4px (--bs-border-radius-50) / 5.33px / 8px (--bs-border-radius-100).
+ * @prop --bs-icon-tile-icon-size: Width/height of the icon. Set per `size`: 12px / 16px / 24px.
+ * @prop --bs-icon-tile-bg: Background. Set per `intent`. Success, warning, error and information read mode-aware --bs-icon-tile-<intent>-bg properties from base.css (light and dark values from the Figma); default and brand use the neutral / primary container tokens, which already switch with the theme.
+ * @prop --bs-icon-tile-text-color: Colour of the text slotted into the `text` slot. Aliased to --bs-text-default.
+ * @prop --bs-icon-tile-text-gap: Gap between the square and the `text` slot. Aliased to --bs-spacing-100.
+ * @prop --bs-icon-tile-color: Icon colour. Set per `intent`: --bs-icon-tile-<intent>-color from base.css for success, warning, error and information; --bs-icon-default for default and --bs-icon-action for brand.
+ */
+:host {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-icon-tile-text-gap);
+  vertical-align: middle;
+
+  /* size: sm (default) */
+  --bs-icon-tile-size: 24px;
+  --bs-icon-tile-radius: var(--bs-border-radius-50);
+  --bs-icon-tile-icon-size: 12px;
+  --bs-icon-tile-text-color: var(--bs-text-default);
+  --bs-icon-tile-text-gap: var(--bs-spacing-100);
+
+  /* intent: default */
+  --bs-icon-tile-bg: var(--bs-color-neutral-container);
+  --bs-icon-tile-color: var(--bs-icon-default);
+}
+
+:host([size='md']) {
+  --bs-icon-tile-size: 32px;
+  /* Figma: 5.333px -- two thirds of the large radius, which has no token of its own. */
+  --bs-icon-tile-radius: calc(var(--bs-border-radius-100) * 2 / 3);
+  --bs-icon-tile-icon-size: 16px;
+}
+
+:host([size='lg']) {
+  --bs-icon-tile-size: 48px;
+  --bs-icon-tile-radius: var(--bs-border-radius-100);
+  --bs-icon-tile-icon-size: 24px;
+}
+
+:host([intent='success']) {
+  --bs-icon-tile-bg: var(--bs-icon-tile-success-bg, var(--bs-success-50));
+  --bs-icon-tile-color: var(--bs-icon-tile-success-color, var(--bs-icon-success));
+}
+
+:host([intent='warning']) {
+  --bs-icon-tile-bg: var(--bs-icon-tile-warning-bg, var(--bs-color-warning-container));
+  --bs-icon-tile-color: var(--bs-icon-tile-warning-color, var(--bs-icon-warning));
+}
+
+:host([intent='error']) {
+  --bs-icon-tile-bg: var(--bs-icon-tile-error-bg, var(--bs-color-error-container));
+  --bs-icon-tile-color: var(--bs-icon-tile-error-color, var(--bs-icon-error));
+}
+
+:host([intent='brand']) {
+  --bs-icon-tile-bg: var(--bs-color-primary-container);
+  --bs-icon-tile-color: var(--bs-icon-action);
+}
+
+:host([intent='information']) {
+  --bs-icon-tile-bg: var(--bs-icon-tile-information-bg, var(--bs-information-50));
+  --bs-icon-tile-color: var(--bs-icon-tile-information-color, var(--bs-icon-info));
+}
+
+.bs-icon-tile {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--bs-icon-tile-size);
+  height: var(--bs-icon-tile-size);
+  border-radius: var(--bs-icon-tile-radius);
+  background: var(--bs-icon-tile-bg);
+  color: var(--bs-icon-tile-color);
+  overflow: hidden;
+}
+
+.bs-icon-tile__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bs-icon-tile-icon-size);
+  height: var(--bs-icon-tile-icon-size);
+}
+
+.bs-icon-tile__icon svg,
+::slotted(svg),
+::slotted(img) {
+  width: var(--bs-icon-tile-icon-size);
+  height: var(--bs-icon-tile-icon-size);
+}
+
+/* The text beside the square. Hidden (no box, so no gap) until something is slotted, so a tile with no text
+   is still exactly its square. */
+.bs-icon-tile__text {
+  display: none;
+  color: var(--bs-icon-tile-text-color);
+  font-size: var(--bs-font-size-md);
+  line-height: 24px;
+}
+
+.bs-icon-tile__text--visible {
+  display: block;
+}
+
+:host([size='sm']) .bs-icon-tile__text {
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+

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

@@ -0,0 +1,158 @@
+import { h } from "@stencil/core";
+/**
+ * A small rounded square holding an icon, tinted by intent -- the visual marker next to a status,
+ * a list item or a feature. Matches the Figma "Icon tile" component (3 sizes x 6 intents).
+ *
+ * Each intent shows a default glyph (house, check, warning, cross, grid, info); put your own icon in
+ * the default slot to replace it. A slotted icon is sized to the tile (12/16/24px) and coloured
+ * with the intent's icon colour, as long as it draws with `currentColor`.
+ *
+ * The tile is decorative by default (hidden from assistive tech). Don't rely on the colour or glyph
+ * alone to convey status: slot text into `text` (it sits beside the square, in
+ * `--bs-icon-tile-text-color`), or set `label` to give the tile its own accessible name.
+ *
+ * ## When to use
+ * - Marking a row, card or message with a status or category icon.
+ *
+ * ## When not to use
+ * - As a button -- it isn't interactive. Use `bs-icon-button`.
+ *
+ * @slot - Optional icon replacing the intent's default glyph.
+ * @slot text - Optional text shown beside the square (e.g. "Payment received"), in `--bs-icon-tile-text-color`.
+ * @part container - The tinted square.
+ * @part icon - The wrapper around the glyph (default or slotted).
+ * @part text - The wrapper around the `text` slot (only shown when something is slotted).
+ */
+export class BsIconTile {
+    /** Tile size: `sm` 24px, `md` 32px, `lg` 48px. */
+    size = 'sm';
+    /** Colour and default glyph. `brand` uses the brand colours; `information` the info palette. */
+    intent = 'default';
+    /** Accessible name. When set, the tile is exposed as an image with this name; when empty it is
+     * decorative and hidden from assistive tech. */
+    label;
+    /** True while the default slot holds a real element or non-blank text (a custom icon), not just whitespace. */
+    hasCustomIcon = false;
+    /** True while something is assigned to the `text` slot, so the text wrapper (and its gap) only exists then. */
+    hasText = false;
+    render() {
+        const labelled = !!this.label;
+        return [
+            h("div", { key: 'f23caf72680e3224fc8618cbebceac30590d36ce', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: '944d594e4492b30544f935b217691ec7e53f398d', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: 'cd62ccaf12a2ff398d506b865665eae42b2e43ff', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
+            h("span", { key: 'f33a9fa50a2db0aee33fd8346681a5f56f22f685', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: 'cb79316ee18a13c4f8d0dcb1d2271a22a6e71471', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
+        ];
+    }
+    static get is() { return "bs-icon-tile"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-icon-tile.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-icon-tile.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsIconTileSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "BsIconTileSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-icon-tile/bs-icon-tile.tsx",
+                            "id": "src/components/bs-icon-tile/bs-icon-tile.tsx::BsIconTileSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tile size: `sm` 24px, `md` 32px, `lg` 48px."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsIconTileIntent",
+                    "resolved": "\"brand\" | \"default\" | \"error\" | \"information\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsIconTileIntent": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-icon-tile/bs-icon-tile.tsx",
+                            "id": "src/components/bs-icon-tile/bs-icon-tile.tsx::BsIconTileIntent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour and default glyph. `brand` uses the brand colours; `information` the info palette."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "intent",
+                "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 tile 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 states() {
+        return {
+            "hasCustomIcon": {},
+            "hasText": {}
+        };
+    }
+}
+function hasContent(slot) {
+    return slot.assignedNodes().some(n => n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim()));
+}
+const svgProps = {
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': '2',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'aria-hidden': 'true',
+};
+const GLYPHS = {
+    default: (h("svg", { ...svgProps }, h("path", { d: "M4 10.5L12 3.5L20 10.5V19.5H4V10.5Z" }))),
+    success: (h("svg", { ...svgProps }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M8 12.5L10.8 15.3L16 9.5" }))),
+    warning: (h("svg", { ...svgProps }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M12 7.5V12.5" }), h("path", { d: "M12 16.2V16.3" }))),
+    error: (h("svg", { ...svgProps }, h("path", { d: "M5 5L19 19" }), h("path", { d: "M19 5L5 19" }))),
+    brand: (h("svg", { ...svgProps }, h("rect", { x: "4", y: "4", width: "6.5", height: "6.5", rx: "0.5" }), h("rect", { x: "13.5", y: "4", width: "6.5", height: "6.5", rx: "0.5" }), h("rect", { x: "4", y: "13.5", width: "6.5", height: "6.5", rx: "0.5" }), h("rect", { x: "13.5", y: "13.5", width: "6.5", height: "6.5", rx: "0.5" }))),
+    information: (h("svg", { ...svgProps }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M12 11V16.5" }), h("path", { d: "M12 7.7V7.8" }))),
+};

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

@@ -0,0 +1,45 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription, propDescription } from "../../stories-utils";
+const INTENTS = ['default', 'success', 'warning', 'error', 'brand', 'information'];
+const SIZES = ['sm', 'md', 'lg'];
+const meta = {
+    title: 'Components/bs-icon-tile',
+    parameters: { docs: { description: { component: componentDescription('bs-icon-tile') } } },
+    render: args => html `<bs-icon-tile size=${args.size} intent=${args.intent} label=${ifDefined(args.label || undefined)}></bs-icon-tile>`,
+    argTypes: {
+        size: { control: 'inline-radio', options: SIZES, description: propDescription('bs-icon-tile', 'size') },
+        intent: { control: 'select', options: INTENTS, description: propDescription('bs-icon-tile', 'intent') },
+        label: { control: 'text', description: propDescription('bs-icon-tile', 'label') },
+    },
+    args: { size: 'sm', intent: 'default', label: '' },
+};
+export default meta;
+export const Default = {};
+// The Figma frame: 3 sizes (rows) x 6 intents (columns).
+export const AllSizesAndIntents = {
+    name: 'All sizes and intents',
+    render: () => html `
+    <div style="display: grid; grid-template-columns: repeat(6, auto); gap: 24px; align-items: center; justify-items: center;">
+      ${SIZES.flatMap(size => INTENTS.map(intent => html `<bs-icon-tile size=${size} intent=${intent}></bs-icon-tile>`))}
+    </div>
+  `,
+};
+export const CustomIcon = {
+    name: 'Custom icon',
+    render: () => html `
+    <bs-icon-tile size="lg" intent="brand">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 3L14.5 9L21 9.5L16 14L17.5 21L12 17.5L6.5 21L8 14L3 9.5L9.5 9L12 3Z" />
+      </svg>
+    </bs-icon-tile>
+  `,
+};
+export const WithText = {
+    name: 'With text (status)',
+    render: () => html `
+    <bs-icon-tile size="md" intent="success">
+      <span slot="text">Payment received</span>
+    </bs-icon-tile>
+  `,
+};

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

@@ -414,4 +414,18 @@ describe('bs-input', () => {
             expect(field).toHaveClass('bs-input__field--error');
         });
     });
+    describe('label custom properties', () => {
+        it('keeps the 14px medium label by default', async () => {
+            const { root } = await render(h("bs-input", { label: "Name" }));
+            const label = getComputedStyle(root.shadowRoot.querySelector('.bs-input__label'));
+            expect(label.fontSize).toBe('14px');
+            expect(label.fontWeight).toBe('500');
+        });
+        it('can restyle the label through --bs-input-label-font-size/-weight', async () => {
+            const { root } = await render(h("bs-input", { label: "Name", style: { '--bs-input-label-font-size': '16px', '--bs-input-label-font-weight': '600' } }));
+            const label = getComputedStyle(root.shadowRoot.querySelector('.bs-input__label'));
+            expect(label.fontSize).toBe('16px');
+            expect(label.fontWeight).toBe('600');
+        });
+    });
 });

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

@@ -19,6 +19,9 @@
  * @prop --bs-input-field-text: Input text color. Aliased to --bs-input-text.
  * @prop --bs-input-field-placeholder: Placeholder text color. Aliased to --bs-input-placeholder.
  * @prop --bs-input-label-color: Label text color. Aliased to --bs-input-label.
+ * @prop --bs-input-label-font-size: Label font size. Aliased to --bs-font-size-sm.
+ * @prop --bs-input-label-font-weight: Label font weight. Aliased to --bs-font-weight-medium.
+ * @prop --bs-input-label-line-height: Label line height. `normal` by default (the label sizes to its font).
  * @prop --bs-input-description-color: Description text color. Aliased to --bs-input-description.
  * @prop --bs-input-error-color: Error message text color. Aliased to --bs-input-error.
  * @prop --bs-input-chip-bg: Chip pill background for type="chip". Aliased to --bs-input-bg-disabled.
@@ -53,6 +56,9 @@
   --bs-input-field-text: var(--bs-input-text);
   --bs-input-field-placeholder: var(--bs-input-placeholder);
   --bs-input-label-color: var(--bs-input-label);
+  --bs-input-label-font-size: var(--bs-font-size-sm);
+  --bs-input-label-font-weight: var(--bs-font-weight-medium);
+  --bs-input-label-line-height: normal;
   --bs-input-description-color: var(--bs-input-description);
   --bs-input-error-color: var(--bs-input-error);
 
@@ -77,8 +83,9 @@
 }
 
 .bs-input__label {
-  font-size: var(--bs-font-size-sm);
-  font-weight: var(--bs-font-weight-medium);
+  font-size: var(--bs-input-label-font-size);
+  font-weight: var(--bs-input-label-font-weight);
+  line-height: var(--bs-input-label-line-height);
   color: var(--bs-input-label-color);
 }
 

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

@@ -314,7 +314,10 @@ export class BsInput {
     }
     renderStandardControl() {
         const nativeType = this.type === 'password' ? (this.passwordVisible ? 'text' : 'password') : this.type === 'dropdown' ? 'text' : this.type;
-        return (h("input", { id: "control", part: "control", class: "bs-input__control", type: nativeType, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.type === 'dropdown', min: this.type === 'number' ? this.min : undefined, max: this.type === 'number' ? this.max : undefined, step: this.type === 'number' ? this.step : undefined, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }));
+        return (h("input", { id: "control", part: "control", class: "bs-input__control", type: nativeType, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.type === 'dropdown',
+            // The popup state belongs on the focusable control (a roleless wrapper div can't carry
+            // aria-haspopup/aria-expanded -- axe's aria-allowed-attr flags it).
+            role: this.type === 'dropdown' ? 'combobox' : undefined, "aria-haspopup": this.type === 'dropdown' ? 'listbox' : undefined, "aria-expanded": this.type === 'dropdown' ? String(this.open) : undefined, min: this.type === 'number' ? this.min : undefined, max: this.type === 'number' ? this.max : undefined, step: this.type === 'number' ? this.step : undefined, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }));
     }
     renderSelectControl() {
         return (h("select", { id: "control", part: "control", class: "bs-input__control", disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }, this.options.map(opt => (h("option", { value: opt.value, selected: opt.value === this.value }, opt.label)))));
@@ -374,7 +377,7 @@ export class BsInput {
             .filter(Boolean)
             .join(' ');
         const isDropdown = this.type === 'dropdown';
-        return (h("div", { class: "bs-input__field-wrapper" }, h("div", { part: "field", class: fieldClasses, onClick: isDropdown ? this.onDropdownToggle : undefined, onKeyDown: isDropdown ? this.onDropdownKeydown : undefined, "aria-haspopup": isDropdown ? 'listbox' : undefined, "aria-expanded": isDropdown ? String(this.open) : undefined }, h("span", { part: "icon", class: `bs-input__icon ${this.showsIconArea ? 'bs-input__icon--visible' : ''}` }, this.renderIconContent()), this.renderControl(), h("span", { part: "end-icon", class: `bs-input__end-icon ${this.showsEndIconArea ? 'bs-input__end-icon--visible' : ''}` }, this.renderEndIconContent())), isDropdown && this.open && this.options.length > 0 && (h("bs-menu", { part: "menu", class: "bs-input__dropdown-menu", role: "listbox" }, this.options.map(option => (h("bs-menu-item", { key: option.value, onBsSelect: this.onDropdownOptionSelect(option) }, option.label)))))));
+        return (h("div", { class: "bs-input__field-wrapper" }, h("div", { part: "field", class: fieldClasses, onClick: isDropdown ? this.onDropdownToggle : undefined, onKeyDown: isDropdown ? this.onDropdownKeydown : undefined }, h("span", { part: "icon", class: `bs-input__icon ${this.showsIconArea ? 'bs-input__icon--visible' : ''}` }, this.renderIconContent()), this.renderControl(), h("span", { part: "end-icon", class: `bs-input__end-icon ${this.showsEndIconArea ? 'bs-input__end-icon--visible' : ''}` }, this.renderEndIconContent())), isDropdown && this.open && this.options.length > 0 && (h("bs-menu", { part: "menu", class: "bs-input__dropdown-menu", role: "listbox" }, this.options.map(option => (h("bs-menu-item", { key: option.value, onBsSelect: this.onDropdownOptionSelect(option) }, option.label)))))));
     }
     renderPinField() {
         this.pinInputs = [];
@@ -383,10 +386,10 @@ export class BsInput {
         return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (h("div", { key: '1149cfe8eaa6085007a8d9a963b6c909bb6cda13', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '8fd3623575cfcc750a9cb62d0a30351b305d5a68', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: 'd737018c1e1ebcde529710d8ea58c6bed76f2abf', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '5993b19cbfcb8725550c1292c00795c8463e554c', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: 'fb67ed85a291856e1fbb7d7f54a4ba98c662deeb', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '6cf68bab9f5060898141df96a22df306d98445e5', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,7 +44,7 @@ export class BsMenu {
         items[next].shadowRoot?.querySelector('button')?.focus();
     }
     render() {
-        return (h("div", { key: '4f2995d0f53f85656de8595fb6a9909833c6369d', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '0824f2a784eb4cfa28a2868f19c056570b56ba63' })));
+        return (h("div", { key: 'ba99d3c35c0c7ab4427155ac13e89c434068ef49', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '817f29507503adcaad013a8035d35bc1f35ffdef' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }