@brandsync/wc 1.14.0 → 1.16.0

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

@@ -0,0 +1,47 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  align-self: stretch;
+  flex: none;
+  --bs-divider-thickness: 1px;
+  --bs-divider-color: var(--bs-border-neutral-container);
+  --bs-divider-inset: var(--bs-spacing-300);
+}
+
+:host([variant='subtle']) {
+  --bs-divider-color: var(--bs-neutral-100);
+}
+
+:host([orientation='vertical']) {
+  width: var(--bs-divider-thickness);
+  min-height: 1em;
+}
+
+:host(:not([orientation='vertical'])) {
+  width: 100%;
+  height: var(--bs-divider-thickness);
+}
+
+.line {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  background: var(--bs-divider-color);
+}
+
+:host([inset='start']:not([orientation='vertical'])) .line {
+  margin-inline-start: var(--bs-divider-inset);
+  width: calc(100% - var(--bs-divider-inset));
+}
+:host([inset='both']:not([orientation='vertical'])) .line {
+  margin-inline: var(--bs-divider-inset);
+  width: calc(100% - 2 * var(--bs-divider-inset));
+}
+:host([inset='start'][orientation='vertical']) .line {
+  margin-block-start: var(--bs-divider-inset);
+  height: calc(100% - var(--bs-divider-inset));
+}
+:host([inset='both'][orientation='vertical']) .line {
+  margin-block: var(--bs-divider-inset);
+  height: calc(100% - 2 * var(--bs-divider-inset));
+}

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

@@ -0,0 +1,147 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A thin line that separates content, horizontally or vertically.
+ *
+ * ## When to use
+ * - Separating groups of related content in a list, menu, toolbar or card.
+ *
+ * ## When not to use
+ * - Adding vertical space between blocks (use `bs-stack` gap or spacing tokens).
+ * - Drawing a border around a surface (use `bs-card`).
+ *
+ * @part line - The visible line element.
+ * @prop --bs-divider-thickness - Line thickness. Defaults to `1px`.
+ * @prop --bs-divider-color - Line colour. Aliased to `--bs-border-neutral-container` (`default`) or `--bs-neutral-100` (`subtle`).
+ * @prop --bs-divider-inset - Indent applied by `inset`. Aliased to `--bs-spacing-300`.
+ */
+export class BsDivider {
+    /** Direction of the line. A vertical divider stretches to the height of its container. */
+    orientation = 'horizontal';
+    /** Visual weight of the line. */
+    variant = 'default';
+    /** Indents the line from its start edge, or from both edges. */
+    inset = 'none';
+    /** Purely visual: hides the divider from assistive technology instead of exposing a separator. */
+    decorative = false;
+    render() {
+        const orientation = this.orientation === 'vertical' ? 'vertical' : 'horizontal';
+        const a11y = this.decorative
+            ? { role: 'none', 'aria-hidden': 'true' }
+            : { role: 'separator', 'aria-orientation': orientation };
+        return (h(Host, { key: '72be86556d663c54fde0d585ae5850b236389b23', ...a11y }, h("div", { key: 'a08f191d8f900bc88fc0c44be08da1a7d8eb2e3c', class: "line", part: "line" })));
+    }
+    static get is() { return "bs-divider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-divider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-divider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsDividerOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BsDividerOrientation": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-divider/bs-divider.tsx",
+                            "id": "src/components/bs-divider/bs-divider.tsx::BsDividerOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Direction of the line. A vertical divider stretches to the height of its container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsDividerVariant",
+                    "resolved": "\"default\" | \"subtle\"",
+                    "references": {
+                        "BsDividerVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-divider/bs-divider.tsx",
+                            "id": "src/components/bs-divider/bs-divider.tsx::BsDividerVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual weight of the line."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "inset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsDividerInset",
+                    "resolved": "\"both\" | \"none\" | \"start\"",
+                    "references": {
+                        "BsDividerInset": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-divider/bs-divider.tsx",
+                            "id": "src/components/bs-divider/bs-divider.tsx::BsDividerInset"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indents the line from its start edge, or from both edges."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "inset",
+                "defaultValue": "'none'"
+            },
+            "decorative": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Purely visual: hides the divider from assistive technology instead of exposing a separator."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "decorative",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,32 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-divider',
+    parameters: { docs: { description: { component: componentDescription('bs-divider') } } },
+    render: args => html `
+    <div style="display: flex; flex-direction: ${args.orientation === 'vertical' ? 'row' : 'column'}; gap: var(--bs-spacing-200); height: 80px; width: 320px">
+      <span>Above</span>
+      <bs-divider
+        orientation=${args.orientation}
+        variant=${args.variant}
+        inset=${args.inset}
+        ?decorative=${args.decorative}
+      ></bs-divider>
+      <span>Below</span>
+    </div>
+  `,
+    argTypes: {
+        orientation: { control: 'inline-radio', options: ['horizontal', 'vertical'] },
+        variant: { control: 'inline-radio', options: ['subtle', 'default'] },
+        inset: { control: 'inline-radio', options: ['none', 'start', 'both'] },
+        decorative: { control: 'boolean' },
+    },
+    args: { orientation: 'horizontal', variant: 'default', inset: 'none', decorative: false },
+};
+export default meta;
+export const Default = {};
+export const Subtle = { args: { variant: 'subtle' } };
+export const Vertical = { args: { orientation: 'vertical' } };
+export const InsetStart = { args: { inset: 'start' } };
+export const InsetBoth = { args: { inset: 'both' } };
+export const Decorative = { args: { decorative: true } };

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: '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)))));
+        return (h("bs-card", { key: '68774f7ab0252b92905900f06f564d1c2a8ce163', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: 'f263ce4991e2aa4553e430e60e646df5fc257120', class: "bs-error-page__body" }, h("div", { key: '3aa6b36e1aa05ea63e52e8c79684b166853e5950', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: 'b0b7f3fa925acef6b95e23136df7f9bac3e43ff4', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: 'e33db2aa8c275de0e32effc759e177ef1ee46c6d', name: "icon" }, d.glyph())), code && (h("span", { key: '9f576963f7399e4ca6e86cfd0331f0c7c7119886', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: 'ea4861b666f95c7416a4d54152f8ffd1b900eb61', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'e0ec38c28b957390486fce52497f91661abc7ef1', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: 'a2b190366240c9fbe3e7a78a16b9881a3ad4468a', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: 'bef26b3dcc61c4e968c054d35ed67430884c9f99', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: 'b8de6e83c2c68ca8880afc781e8ffceb03f23164', 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: '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 })));
+        return (h("div", { key: 'd9f116b4dcf8641a590581c24176d4659a2b6892', 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: '5aa0c733860505646bde5cad571a4d850d38f979', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: '292d3074620f2a228dbe544363f7ef8cce4f194c', name: "icon" }, h(UploadIcon, { key: '65c343be45634d10d561ba0f7a3cdd201a7664e6' }))), h("div", { key: '69d1ddde89b8c26d7a40a963cf16d1519b5b1fd4', class: "bs-file-upload__content" }, h("div", { key: '7730fdb7efb8eeffb374fff22fdd9d60497eebce', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '0ca349bd1fedd84d869b363da150e13c07623f3b', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: '522d99de1b5caf70cd7e44bf8e821fe49951c788', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: 'f7af51522dfb762102f0c17bcbfd0e737b52d783', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '71a2262124fd84b52dbffa18966eb1479e1ad95a', 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: '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))));
+        return (h("div", { key: 'e109650dda74a0a0db7af7f621da5e70079a7830', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: '800f1bd6a8cabd97c0aa43fe9a521876d4e6feb8', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: 'e5696a2cf9d69579ff8fd79688f83879c4093c74', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'bc52ee589c5cf4040dcb1aa86cce0150136d71ae', class: "bs-file-upload-item__content" }, h("div", { key: 'a70dc514e89ebfb1de3e772652e6ab8b2987007a', class: "bs-file-upload-item__meta" }, h("span", { key: '1c0a8e151f284a8344650fb00912582c17d2d5ee', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: 'f608a1ee6e44e34e9e67600622a180e676fb960a', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '5781f2aa401d12d3a4f4b0172d64cb0b9ceacf00', 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-grid/bs-grid.cmp.test.js

@@ -0,0 +1,58 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const mount = (props = {}, width = 620, items = 6) => render(h("div", { style: { width: `${width}px` } }, h("style", null, ':root{--bs-spacing-100:10px;--bs-spacing-200:20px;--bs-spacing-300:30px}'), h("bs-grid", { ...props }, Array.from({ length: items }, (_, i) => (h("div", { style: { height: '40px' } }, i))))));
+const container = (root) => root.querySelector('bs-grid').shadowRoot.querySelector('[part="container"]');
+const items = (root) => Array.from(root.querySelectorAll('bs-grid > div'));
+describe('bs-grid', () => {
+    it('defaults to one column', async () => {
+        const { root } = await mount();
+        expect(container(root).style.gridTemplateColumns).toContain('repeat(1, minmax(0px, 1fr))');
+        const xs = new Set(items(root).map(i => Math.round(i.getBoundingClientRect().left)));
+        expect(xs.size).toBe(1);
+    });
+    it('turns a number into equal columns', async () => {
+        const { root } = await mount({ columns: '3' });
+        expect(container(root).style.gridTemplateColumns).toContain('repeat(3, minmax(0px, 1fr))');
+        const xs = new Set(items(root).map(i => Math.round(i.getBoundingClientRect().left)));
+        expect(xs.size).toBe(3);
+    });
+    it('passes a raw template through', async () => {
+        const { root } = await mount({ columns: '100px 1fr' });
+        const [a, b] = items(root);
+        expect(Math.round(a.getBoundingClientRect().width)).toBe(100);
+        expect(b.getBoundingClientRect().left).toBeGreaterThan(a.getBoundingClientRect().right - 1);
+    });
+    it('maps gap tokens and lets rowGap/columnGap override per axis', async () => {
+        const { root } = await mount({ columns: '2', gap: '200', rowGap: '300' });
+        const c = container(root);
+        expect(c.style.columnGap).toContain('var(--bs-spacing-200)');
+        expect(c.style.rowGap).toContain('var(--bs-spacing-300)');
+        const [a, b, , d] = items(root);
+        const ra = a.getBoundingClientRect();
+        expect(Math.round(b.getBoundingClientRect().left - ra.right)).toBe(20);
+        expect(Math.round(d.getBoundingClientRect().top - items(root)[0].getBoundingClientRect().bottom)).toBe(30);
+    });
+    it('uses the default gap of 100 and falls back for unknown tokens', async () => {
+        const { root } = await mount({ columns: '2' });
+        expect(container(root).style.columnGap).toContain('var(--bs-spacing-100)');
+        const bad = await mount({ columns: '2', gap: '999' });
+        expect(container(bad.root).style.columnGap).toContain('var(--bs-spacing-100)');
+    });
+    it('exposes --bs-grid-gap as an override', async () => {
+        const { root } = await mount({ columns: '2' });
+        root.querySelector('bs-grid').style.setProperty('--bs-grid-gap', '40px');
+        const [a, b] = items(root);
+        expect(Math.round(b.getBoundingClientRect().left - a.getBoundingClientRect().right)).toBe(40);
+    });
+    it('auto-fits columns by minColumnWidth and overrides columns', async () => {
+        const wide = await mount({ columns: '2', minColumnWidth: '100px' }, 620);
+        expect(container(wide.root).style.gridTemplateColumns).toContain('auto-fit');
+        expect(new Set(items(wide.root).map(i => Math.round(i.getBoundingClientRect().left))).size).toBe(5);
+        const narrow = await mount({ minColumnWidth: '100px' }, 250);
+        expect(new Set(items(narrow.root).map(i => Math.round(i.getBoundingClientRect().left))).size).toBe(2);
+    });
+    it('aligns items', async () => {
+        const { root } = await mount({ columns: '2', align: 'center' }, 620, 2);
+        expect(container(root).style.alignItems).toBe('center');
+        expect(container(root).getBoundingClientRect().width).toBeGreaterThan(0);
+    });
+});

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

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+  min-width: 0;
+}
+
+.bs-grid {
+  display: grid;
+  width: 100%;
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,208 @@
+import { h } from "@stencil/core";
+const SPACING_TOKENS = ['0', '25', '50', '75', '100', '150', '200', '250', '300', '350', '400', '500', '550', '600', '700', '800', '1000', '1200', '1500'];
+const ALIGNS = ['start', 'center', 'end', 'stretch'];
+/**
+ * A CSS grid layout wrapper. Children are placed in equal-width columns with a token-based gap.
+ *
+ * `columns` takes either a number (`"3"` becomes `repeat(3, minmax(0, 1fr))`) or any raw
+ * `grid-template-columns` value (`"200px 1fr"`). `minColumnWidth` is the responsive mechanism: it
+ * switches to `repeat(auto-fit, minmax(min(100%, X), 1fr))`, so the column count adapts to the
+ * container width and `columns` is ignored. There are deliberately no per-breakpoint props in v1.
+ *
+ * `gap`, `rowGap` and `columnGap` take spacing token names (`"200"` maps to `var(--bs-spacing-200)`);
+ * unknown names fall back to `100`.
+ *
+ * ## When to use
+ * - Card grids, form field grids and dashboards where items share equal column tracks.
+ * - Responsive galleries via `minColumnWidth`.
+ *
+ * ## When not to use
+ * - A single row or column of items with no wrapping (plain flex).
+ * - Resizable multi-pane layouts (use `bs-split-pane`) or the page frame (use `bs-app-shell`).
+ *
+ * @slot - The grid items.
+ * @part container - The grid element that holds the slotted items.
+ * @prop --bs-grid-gap - Gap on both axes. Overrides the `gap` prop's token (default `--bs-spacing-100`).
+ * @prop --bs-grid-row-gap - Row gap. Overrides `--bs-grid-gap` and the `rowGap` prop's token.
+ * @prop --bs-grid-column-gap - Column gap. Overrides `--bs-grid-gap` and the `columnGap` prop's token.
+ */
+export class BsGrid {
+    /** A number of equal columns (`"3"`), or a raw `grid-template-columns` value. Ignored when `minColumnWidth` is set. */
+    columns = '1';
+    /** Spacing token name for the gap on both axes, e.g. `"200"` for `--bs-spacing-200`. */
+    gap = '100';
+    /** Spacing token name for the row gap; overrides `gap` for rows. */
+    rowGap;
+    /** Spacing token name for the column gap; overrides `gap` for columns. */
+    columnGap;
+    /** CSS length (e.g. `240px`). Switches to auto-fit columns at least this wide and overrides `columns`. */
+    minColumnWidth;
+    /** Block-axis alignment of items within their cell. */
+    align = 'stretch';
+    template() {
+        const min = this.minColumnWidth?.trim();
+        if (min)
+            return `repeat(auto-fit, minmax(min(100%, ${min}), 1fr))`;
+        const cols = (this.columns ?? '1').trim();
+        if (/^\d+$/.test(cols)) {
+            const n = parseInt(cols, 10);
+            return `repeat(${n > 0 ? n : 1}, minmax(0, 1fr))`;
+        }
+        return cols || 'repeat(1, minmax(0, 1fr))';
+    }
+    token(value) {
+        const v = value?.trim();
+        return `var(--bs-spacing-${v && SPACING_TOKENS.includes(v) ? v : '100'})`;
+    }
+    render() {
+        const gapValue = `var(--bs-grid-gap, ${this.token(this.gap)})`;
+        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: 'a89d345eac5d88dd24b21606eb35b1f21e1b54dd', 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: 'f5676a0cc12cf0fafc04045b4fed50aee50d2995' })));
+    }
+    static get is() { return "bs-grid"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-grid.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-grid.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A number of equal columns (`\"3\"`), or a raw `grid-template-columns` value. Ignored when `minColumnWidth` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "columns",
+                "defaultValue": "'1'"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing token name for the gap on both axes, e.g. `\"200\"` for `--bs-spacing-200`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "gap",
+                "defaultValue": "'100'"
+            },
+            "rowGap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing token name for the row gap; overrides `gap` for rows."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "row-gap"
+            },
+            "columnGap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing token name for the column gap; overrides `gap` for columns."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "column-gap"
+            },
+            "minColumnWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS length (e.g. `240px`). Switches to auto-fit columns at least this wide and overrides `columns`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "min-column-width"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsGridAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {
+                        "BsGridAlign": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-grid/bs-grid.tsx",
+                            "id": "src/components/bs-grid/bs-grid.tsx::BsGridAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Block-axis alignment of items within their cell."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "align",
+                "defaultValue": "'stretch'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,38 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription } from "../../stories-utils";
+const cell = (n, h = 64) => html `
+  <div style="background: var(--bs-surface-container); padding: var(--bs-spacing-200); height: ${h}px">Item ${n}</div>
+`;
+const meta = {
+    title: 'Components/bs-grid',
+    parameters: { docs: { description: { component: componentDescription('bs-grid') } } },
+    render: args => html `
+    <bs-grid
+      columns=${args.columns}
+      gap=${args.gap}
+      row-gap=${ifDefined(args.rowGap || undefined)}
+      column-gap=${ifDefined(args.columnGap || undefined)}
+      min-column-width=${ifDefined(args.minColumnWidth || undefined)}
+      align=${args.align}
+    >
+      ${[1, 2, 3, 4, 5, 6].map(n => cell(n, n % 2 ? 64 : 96))}
+    </bs-grid>
+  `,
+    argTypes: {
+        columns: { control: 'text' },
+        gap: { control: 'text' },
+        rowGap: { control: 'text' },
+        columnGap: { control: 'text' },
+        minColumnWidth: { control: 'text' },
+        align: { control: 'inline-radio', options: ['start', 'center', 'end', 'stretch'] },
+    },
+    args: { columns: '3', gap: '100', rowGap: '', columnGap: '', minColumnWidth: '', align: 'stretch' },
+};
+export default meta;
+export const Default = {};
+export const LargeGap = { args: { gap: '300' } };
+export const DifferentRowAndColumnGaps = { args: { rowGap: '50', columnGap: '400' } };
+export const CustomTemplate = { args: { columns: '200px 1fr 2fr' } };
+export const ResponsiveMinColumnWidth = { args: { minColumnWidth: '240px' } };
+export const AlignCenter = { args: { align: 'center' } };

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

@@ -38,8 +38,8 @@ export class BsIconTile {
     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) })),
+            h("div", { key: '47586c94633cb072243559352fff92ffc178b59e', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: 'af1f942a94eed409beaaf6845eee09003ef70fd4', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: 'be9df10596772e84a65d4de467117ea6c6a13c29', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
+            h("span", { key: '0522505b1001e511e5c2446025a05b6e80ef0176', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: '0fc0bb97e5b23a984bcd64eafc0133eb93782c2f', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
         ];
     }
     static get is() { return "bs-icon-tile"; }

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

@@ -397,10 +397,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: 'eb166070c898f3bf1e0d994265e5ad3adc1d7172', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: 'ec191e3590785654e3701c7c49b1643f671dcc16', 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: '1d02b7a6901c87c68ff6b91c03bc8099cfb823e6', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '8ef20b2be514160fbdf37d046b59b0009b07ece2', 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: '264558031d7bdf104254724ad1891c893668da60', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '225d41e84484f1f160765a9f01e49a0bd850650c', 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"; }