@brandsync/wc 1.13.0 → 1.15.0

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

@@ -0,0 +1,88 @@
+import { Host, 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'];
+/**
+ * A centred wrapper that limits content width to a breakpoint and adds horizontal padding.
+ *
+ * ## When to use
+ * - Constraining page or section content to a readable, consistent maximum width.
+ *
+ * ## When not to use
+ * - Arranging children relative to each other (use `bs-stack`).
+ * - Full-bleed regions such as hero backgrounds (use `size="fluid"` or no container).
+ *
+ * @slot - Content to constrain.
+ * @prop --bs-container-max-width - Maximum width. Aliased to the `--bs-breakpoint-*` token for `size`; `none` for `fluid`.
+ * @prop --bs-container-padding - Horizontal padding. Aliased to the `padding` spacing token (default `--bs-spacing-300`).
+ */
+export class BsContainer {
+    /** Maximum width, taken from the breakpoint tokens. `fluid` removes the limit. */
+    size = 'xl';
+    /** Spacing token name for horizontal padding (e.g. `300` => `--bs-spacing-300`). Invalid values fall back to `300`. */
+    padding = '300';
+    render() {
+        const pad = SPACING_TOKENS.includes(String(this.padding)) ? String(this.padding) : '300';
+        return (h(Host, { key: '001d2089d9e69657dad10a4d95c550900bdb5252', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '8f983ed8ad608a386d84468682296d9318089d28' })));
+    }
+    static get is() { return "bs-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-container.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsContainerSize",
+                    "resolved": "\"2xl\" | \"fluid\" | \"lg\" | \"md\" | \"sm\" | \"xl\"",
+                    "references": {
+                        "BsContainerSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-container/bs-container.tsx",
+                            "id": "src/components/bs-container/bs-container.tsx::BsContainerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width, taken from the breakpoint tokens. `fluid` removes the limit."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'xl'"
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing token name for horizontal padding (e.g. `300` => `--bs-spacing-300`). Invalid values fall back to `300`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding",
+                "defaultValue": "'300'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,24 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-container',
+    parameters: { docs: { description: { component: componentDescription('bs-container') } } },
+    render: args => html `
+    <bs-container size=${args.size} padding=${args.padding}>
+      <div style="background: var(--bs-surface-container); padding: var(--bs-spacing-200)">Container content (${args.size})</div>
+    </bs-container>
+  `,
+    argTypes: {
+        size: { control: 'select', options: ['sm', 'md', 'lg', 'xl', '2xl', 'fluid'] },
+        padding: { control: 'select', options: ['0', '25', '50', '75', '100', '150', '200', '250', '300', '350', '400', '500', '550', '600', '700', '800', '1000', '1200', '1500'] },
+    },
+    args: { size: 'xl', padding: '300' },
+};
+export default meta;
+export const Default = {};
+export const Small = { args: { size: 'sm' } };
+export const Medium = { args: { size: 'md' } };
+export const Large = { args: { size: 'lg' } };
+export const ExtraLarge2x = { args: { size: '2xl' } };
+export const Fluid = { args: { size: 'fluid' } };
+export const WidePadding = { args: { size: 'md', padding: '600' } };

package/dist/collection/components/bs-data-table/bs-data-table.js

@@ -87,11 +87,11 @@ export class BsDataTable {
         }
     }
     render() {
-        return (h("table", { key: '1d9ca0e7153818331ea760d70a2e2f15b1be67bc', part: "table", class: "bs-data-table" }, h("thead", { key: 'af48bd83574fc4d358010b3091f14bc04db5f935', part: "head" }, h("tr", { key: '0cc77b6e5c46c175444b14dcfdb6c43b41a02d01' }, this.selectable && (h("th", { key: 'a8140bfad21744d05b02065d4034b85228f75da0', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: '634a2b62fb9f26b0684622c6794170aaf5080b3e', type: "checkbox", "aria-label": this.selectAllLabel, checked: this.selectedIds.size > 0 && this.selectedIds.size === this.rows.length, indeterminate: this.selectedIds.size > 0 && this.selectedIds.size < this.rows.length, onChange: this.onSelectAllChange })))), this.columns.map(column => {
+        return (h("table", { key: '5b61e4f581c2ab0da069cabf9a612285f98b0865', part: "table", class: "bs-data-table" }, h("thead", { key: 'c3bed54d42e2e2c3d54cfa9754251ab0d34c55fd', part: "head" }, h("tr", { key: '8f0aaa90b06650719423de98e05f39ffce407a67' }, this.selectable && (h("th", { key: 'ed065c125b50493c621c8922cdd3d7ca26222b8e', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: '0e4f29de07f7818e7024714281f5faadcd288c88', type: "checkbox", "aria-label": this.selectAllLabel, checked: this.selectedIds.size > 0 && this.selectedIds.size === this.rows.length, indeterminate: this.selectedIds.size > 0 && this.selectedIds.size < this.rows.length, onChange: this.onSelectAllChange })))), this.columns.map(column => {
             const isSorted = this.sortColumn === column.key;
             const ariaSort = column.sortable ? (isSorted ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none') : undefined;
             return (h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
-        }))), h("tbody", { key: 'a90a9e866a63f9da370a6d20a4381b15bec14c82', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
+        }))), h("tbody", { key: 'b993a2e1c22d094936c49ad33486b2ecc02861c8', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
         // cellRenderer is a developer-supplied, trusted function (JS-property-only, never
         // derived from untrusted input) -- its HTML output is intentionally not escaped,
         // same trust model as React's dangerouslySetInnerHTML.

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

@@ -340,7 +340,7 @@ export class BsDatepicker {
             : this.defaultTabbable(days);
         const isInRange = (iso) => !!selectedStart && !!previewEnd && iso > selectedStart && iso < previewEnd;
         const weekdays = this.weekdays();
-        return (h("bs-card", { key: 'cd66b2bc8f611383ea5df6d01e29b03a940bc06b', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: '7020d13ee4ea5f05c2548966cb56c20b59eb067b', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: '4ed03f1fb642d2a3a226a27e6e86001a478eab4c', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: 'e844a021afa02f834026ebb4237f5b2f5b9d1a4c', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: 'f68be6b62a9deb6334b63c6e7152b4968ebdbeab', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'a7ee70143ce7b839c44483c1d15daf2714306bf7', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: '7eb7fd38ca59a4a6ba9692180bcd5096f54ac783', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: '1e515d27746a10acfe9f04f08c4a09753cb5b98b', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: 'f5dde56a61d31b93aa9877b0fc473264d40305ba', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '765b53c7f7e8618618622a5121ecab294610bf8a', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'e56fa1a425055d77ae04039890758b823f14ee8d', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '2471a9291aa29111217aaaa1f02f2cfc8861e49e', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
+        return (h("bs-card", { key: 'd2794a112b72b3dc871360b1e57273c9ef097fc4', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: 'bee55a1cd06aa44171f40babae77b1f2f742d160', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: 'd4ab1cfd76fcea8b64daeb951da7b36300c036f0', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '5fcbb3f928db51049fd034beb3519400afe4f128', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: '18889f8f9dd9364bd73595635b72515b91d35ade', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '3d648cd4be611ef4de37cc08f9017809388d36e3', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: 'c0647871f1c140472807ae51e04604c6d87ccaa4', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: 'ec3d33aeea146534d6640ac336905a002d0e7dc2', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: '5cbac8630a30064d940e5f03ce767b525c09dd7c', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '2c47ca0911b8b42cd3590ff053905df327363e9f', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '91a6942792287f3044962fd278e36ed04ec03878', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '445e0548f0913426fe2eb730f291423d9165f839', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
             const row = days.slice(r * 7, r * 7 + 7);
             return (h("div", { class: "bs-datepicker__row", role: "row" }, row.map((d, c) => {
                 const iso = toIso(d);

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

@@ -0,0 +1,47 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-divider', () => {
+    it('defaults to a horizontal separator with ARIA', async () => {
+        const { root } = await render(h("div", null, h("bs-divider", null)));
+        const el = root.querySelector('bs-divider');
+        expect(el).toEqualAttribute('orientation', 'horizontal');
+        expect(el).toEqualAttribute('variant', 'default');
+        expect(el).toEqualAttribute('role', 'separator');
+        expect(el).toEqualAttribute('aria-orientation', 'horizontal');
+    });
+    it('decorative removes separator semantics', async () => {
+        const { root } = await render(h("div", null, h("bs-divider", { decorative: true })));
+        const el = root.querySelector('bs-divider');
+        expect(el).toEqualAttribute('role', 'none');
+        expect(el).toEqualAttribute('aria-hidden', 'true');
+        expect(el.hasAttribute('aria-orientation')).toBe(false);
+    });
+    it('vertical orientation sets aria-orientation and stretches to container height', async () => {
+        const { root } = await render(h("div", { style: { display: 'flex', height: '80px', width: '200px' } }, h("bs-divider", { orientation: "vertical" })));
+        const el = root.querySelector('bs-divider');
+        expect(el).toEqualAttribute('aria-orientation', 'vertical');
+        const r = el.getBoundingClientRect();
+        expect(Math.round(r.height)).toBe(80);
+        expect(Math.round(r.width)).toBe(1);
+    });
+    it('horizontal divider is full width and 1px thick', async () => {
+        const { root } = await render(h("div", { style: { width: '300px' } }, h("bs-divider", null)));
+        const r = root.querySelector('bs-divider').getBoundingClientRect();
+        expect(Math.round(r.width)).toBe(300);
+        expect(Math.round(r.height)).toBe(1);
+    });
+    it('inset indents the line', async () => {
+        const { root } = await render(h("div", { style: { width: '300px' } }, h("bs-divider", { id: "s", inset: "start" }), h("bs-divider", { id: "b", inset: "both" }), h("bs-divider", { id: "n" })));
+        const line = (id) => root.querySelector(`#${id}`).shadowRoot.querySelector('.line').getBoundingClientRect();
+        expect(Math.round(line('n').width)).toBe(300);
+        const start = line('s');
+        const both = line('b');
+        expect(start.width).toBeLessThan(300);
+        expect(both.width).toBeLessThan(start.width);
+        expect(Math.round(start.left - line('n').left)).toBeGreaterThan(0);
+    });
+    it('subtle variant uses a different colour than default', async () => {
+        const { root } = await render(h("div", null, h("bs-divider", { id: "d" }), h("bs-divider", { id: "s", variant: "subtle" })));
+        const bg = (id) => getComputedStyle(root.querySelector(`#${id}`).shadowRoot.querySelector('.line')).backgroundColor;
+        expect(bg('s')).not.toBe(bg('d'));
+    });
+});

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;
+}