@brandsync/wc 1.17.0 → 1.19.0

package/dist/collection/components/bs-app-switcher/bs-app-switcher.stories.js

@@ -0,0 +1,91 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+import accountingIcon from "@phosphor-icons/core/assets/regular/calculator.svg?inline";
+import invoicingIcon from "@phosphor-icons/core/assets/regular/receipt.svg?inline";
+import payrollIcon from "@phosphor-icons/core/assets/regular/money.svg?inline";
+import inventoryIcon from "@phosphor-icons/core/assets/regular/package.svg?inline";
+import salesIcon from "@phosphor-icons/core/assets/regular/shopping-cart.svg?inline";
+import reportsIcon from "@phosphor-icons/core/assets/regular/chart-bar.svg?inline";
+import timeIcon from "@phosphor-icons/core/assets/regular/clock.svg?inline";
+import documentsIcon from "@phosphor-icons/core/assets/regular/folder.svg?inline";
+import bankIcon from "@phosphor-icons/core/assets/regular/bank.svg?inline";
+/** Phosphor (regular) icons as monochrome SVG data URIs; a real app supplies its own URLs. */
+export const ICONS = {
+    accounting: accountingIcon,
+    invoicing: invoicingIcon,
+    payroll: payrollIcon,
+    inventory: inventoryIcon,
+    sales: salesIcon,
+    reports: reportsIcon,
+    time: timeIcon,
+    documents: documentsIcon,
+    bank: bankIcon,
+};
+/** Sample data (invented for the stories and tests; not real EG products or companies). */
+export const APPS = [
+    { id: 'accounting', name: 'Accounting', description: 'Ledger, VAT and closing', icon: ICONS.accounting },
+    { id: 'invoicing', name: 'Invoicing', description: 'Invoices and reminders', icon: ICONS.invoicing },
+    { id: 'payroll', name: 'Payroll', description: 'Salaries, payslips and holiday pay', icon: ICONS.payroll },
+    { id: 'inventory', name: 'Inventory', description: 'Stock and purchasing', icon: ICONS.inventory },
+    { id: 'sales', name: 'Sales', description: 'Orders and customers', icon: ICONS.sales },
+    { id: 'reports', name: 'Reports', description: 'Dashboards and exports', icon: ICONS.reports },
+    { id: 'time', name: 'Time', description: 'Timesheets and absence', icon: ICONS.time },
+    { id: 'documents', name: 'Documents', description: 'Files and archive', icon: ICONS.documents },
+    { id: 'bank', name: 'Bank', description: 'Payments and reconciliation', icon: ICONS.bank },
+];
+export const RECENT = [
+    { appId: 'invoicing', openedLabel: 'Opened 10 min ago', companyName: 'Nordlys Handel AS' },
+    { appId: 'payroll', openedLabel: 'Opened yesterday', companyName: 'Aalborg Byg ApS' },
+    { appId: 'reports', openedLabel: 'Opened 3 days ago', companyName: 'Nordlys Handel AS' },
+];
+const meta = {
+    excludeStories: /^[A-Z0-9_]+$/,
+    title: 'Components/bs-app-switcher',
+    parameters: { layout: 'padded', docs: { description: { component: componentDescription('bs-app-switcher') } } },
+    argTypes: {
+        status: { control: 'inline-radio', options: ['ready', 'loading', 'error'] },
+        query: { control: 'text' },
+        currentId: { control: 'select', options: [undefined, ...APPS.map(a => a.id)] },
+        withRecent: { control: 'boolean' },
+        noApps: { control: 'boolean' },
+    },
+    args: { status: 'ready', query: '', currentId: undefined, withRecent: false, noApps: false },
+    render: args => html `
+    <bs-app-switcher
+      .apps=${args.noApps ? [] : APPS}
+      .recent=${args.withRecent ? RECENT : []}
+      .currentId=${args.currentId}
+      .query=${args.query}
+      .status=${args.status}
+      manage-href="#manage"
+      browse-href="#browse"
+    ></bs-app-switcher>
+  `,
+};
+export default meta;
+export const Default = {};
+export const WithRecent = { args: { withRecent: true, currentId: 'accounting' } };
+export const Searching = { args: { query: 'pay' } };
+export const NoResults = { args: { query: 'lønn' } };
+export const Loading = { args: { status: 'loading' } };
+export const Error = { args: { status: 'error' } };
+export const Empty = { args: { noApps: true } };
+/** Wired up: type to filter, Escape clears, and the last event is printed below. */
+export const Interactive = {
+    render: () => {
+        const wrap = document.createElement('div');
+        const out = document.createElement('output');
+        out.style.cssText = 'display:block;margin-top:8px;font:14px/20px monospace;color:var(--bs-text-secondary)';
+        out.textContent = 'Search, press Escape, or pick an app.';
+        const sw = document.createElement('bs-app-switcher');
+        sw.apps = APPS;
+        sw.recent = RECENT;
+        sw.currentId = 'accounting';
+        for (const n of ['bsAppSelect', 'bsManage', 'bsBrowseAll', 'bsClearSearch', 'bsRetry', 'bsRequestAccess', 'bsQueryChange']) {
+            sw.addEventListener(n, e => (out.textContent = `${n} ${JSON.stringify(e.detail ?? '')}`));
+        }
+        sw.addEventListener('bsAppSelect', e => (sw.currentId = e.detail.id));
+        wrap.append(sw, out);
+        return wrap;
+    },
+};

package/dist/collection/components/bs-app-tile/bs-app-tile.cmp.test.js

@@ -0,0 +1,58 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import axe from "axe-core";
+import { assertShadowParts, assertCssCustomProperties } from "../../test/helpers/conventions";
+import { ICONS } from "../bs-app-switcher/bs-app-switcher.stories";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+const make = async (props = {}) => {
+    const r = await render(h("div", { style: { width: '104px' } }, h("bs-app-tile", { name: "Accounting" })));
+    const el = r.root.querySelector('bs-app-tile');
+    Object.assign(el, { icon: ICONS.accounting, ...props });
+    await r.waitForChanges();
+    return { ...r, el };
+};
+describe('bs-app-tile', () => {
+    it('is a button named by its label, with the parts and custom properties', async () => {
+        const { el } = await make();
+        const c = q(el, '[part="container"]');
+        expect(c.tagName).toBe('BUTTON');
+        expect(c.textContent).toContain('Accounting');
+        expect(q(el, '.bs-app-tile__glyph')).not.toBeNull();
+        assertShadowParts(el.shadowRoot, ['container', 'icon', 'label']);
+        assertCssCustomProperties(el, ['--bs-app-tile-icon-size', '--bs-app-tile-bg-hover', '--bs-app-tile-focus-ring']);
+    });
+    it('shows exactly one icon: the app glyph, not the icon tile default glyph beside it', async () => {
+        const { el } = await make();
+        await new Promise(r => setTimeout(r, 100));
+        expect(q(el, 'bs-icon-tile').shadowRoot.querySelector('svg')).toBeNull();
+    });
+    it('uses the 44px icon square in grid and 32px in compact', async () => {
+        const { el, waitForChanges } = await make();
+        const tile = () => Math.round(q(el, 'bs-icon-tile').getBoundingClientRect().width);
+        expect(tile()).toBe(44);
+        el.size = 'compact';
+        await waitForChanges();
+        expect(tile()).toBe(32);
+    });
+    it('marks current with aria-current', async () => {
+        const { el } = await make({ current: true });
+        expect(q(el, '[part="container"]').getAttribute('aria-current')).toBe('true');
+    });
+    it('disabled is aria-disabled, out of the tab order, and swallows clicks', async () => {
+        const { el } = await make({ disabled: true });
+        const c = q(el, '[part="container"]');
+        expect(c.tagName).toBe('BUTTON');
+        expect(c.getAttribute('aria-disabled')).toBe('true');
+        expect(c.tabIndex).toBe(-1);
+        let clicks = 0;
+        el.addEventListener('click', () => clicks++);
+        c.click();
+        expect(clicks).toBe(0);
+    });
+    it('has no axe violations in any state', async () => {
+        for (const props of [{}, { current: true }, { disabled: true }, { size: 'compact' }]) {
+            const { el } = await make(props);
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${JSON.stringify(props)} ${v.id}: ${v.help}`)).toEqual([]);
+        }
+    });
+});

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

@@ -0,0 +1,104 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  --bs-app-tile-icon-size: calc(var(--bs-sizing-500) + var(--bs-spacing-50));
+  --bs-app-tile-padding: var(--bs-spacing-150);
+  --bs-app-tile-gap: var(--bs-spacing-150);
+  --bs-app-tile-radius: var(--bs-border-radius-100);
+  --bs-app-tile-bg: transparent;
+  --bs-app-tile-bg-hover: var(--bs-surface-hover);
+  --bs-app-tile-bg-pressed: var(--bs-surface-pressed);
+  --bs-app-tile-bg-current: var(--bs-surface-selected);
+  --bs-app-tile-icon-bg: var(--bs-color-neutral-container);
+  --bs-app-tile-color: var(--bs-text-default);
+  --bs-app-tile-color-disabled: var(--bs-text-on-disabled);
+  --bs-app-tile-focus-ring: var(--bs-border-neutral-focus);
+}
+
+:host([size='compact']) {
+  --bs-app-tile-icon-size: var(--bs-sizing-400);
+  --bs-app-tile-padding: var(--bs-spacing-100);
+  --bs-app-tile-gap: var(--bs-spacing-50);
+}
+
+.bs-app-tile {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bs-app-tile-gap);
+  width: 100%;
+  margin: 0;
+  padding: var(--bs-app-tile-padding);
+  border: 0;
+  border-radius: var(--bs-app-tile-radius);
+  background: var(--bs-app-tile-bg);
+  color: var(--bs-app-tile-color);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+  text-align: center;
+  cursor: pointer;
+}
+
+.bs-app-tile:hover,
+.bs-app-tile:active,
+.bs-app-tile[aria-current='true'] {
+  --bs-app-tile-icon-bg: var(--bs-surface-base);
+}
+
+.bs-app-tile[aria-current='true'] {
+  background: var(--bs-app-tile-bg-current);
+}
+
+.bs-app-tile:hover {
+  background: var(--bs-app-tile-bg-hover);
+}
+
+.bs-app-tile:active {
+  background: var(--bs-app-tile-bg-pressed);
+}
+
+.bs-app-tile:focus-visible {
+  outline: var(--bs-spacing-25) solid var(--bs-app-tile-focus-ring);
+  outline-offset: 0;
+}
+
+.bs-app-tile[aria-disabled='true'] {
+  background: var(--bs-app-tile-bg);
+  color: var(--bs-app-tile-color-disabled);
+  cursor: not-allowed;
+}
+
+.bs-app-tile[aria-disabled='true'] .bs-app-tile__icon {
+  --bs-icon-tile-color: var(--bs-app-tile-color-disabled);
+}
+
+.bs-app-tile__icon {
+  --bs-icon-tile-size: var(--bs-app-tile-icon-size);
+  --bs-icon-tile-bg: var(--bs-app-tile-icon-bg);
+  --bs-icon-tile-color: var(--bs-icon-default);
+}
+
+.bs-app-tile__glyph {
+  display: block;
+  width: var(--bs-icon-tile-icon-size);
+  height: var(--bs-icon-tile-icon-size);
+  background: currentColor;
+  -webkit-mask: var(--bs-app-tile-glyph) center / contain no-repeat;
+  mask: var(--bs-app-tile-glyph) center / contain no-repeat;
+}
+
+.bs-app-tile__label {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--bs-fontsize-body-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: calc(var(--bs-line-height-body-sm) * 1px);
+}
+
+:host([size='compact']) .bs-app-tile__label {
+  font-size: var(--bs-fontsize-caption-sm);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+  font-weight: var(--bs-font-weight-regular);
+}

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

@@ -0,0 +1,190 @@
+import { h } from "@stencil/core";
+/**
+ * One app in an app launcher: an icon tile above a short label. Matches the Figma "App tile" component
+ * (Size Grid and Compact, each Default, Hover, Pressed, Focus, Current and Disabled).
+ *
+ * The tile is always a native button and only emits events; it never navigates. Hover, pressed and focus come from the
+ * native element; `current` marks the app you are in (`aria-current="true"`); `disabled` dims it, sets
+ * `aria-disabled` and removes it from the tab order.
+ *
+ * Built from `bs-icon-tile`. The icon is either a URL of a monochrome SVG in `icon` (painted with the
+ * theme's icon colour through a CSS mask, so it follows light and dark mode), or any element in the default
+ * slot (an `<svg>` drawn with `currentColor`).
+ *
+ * ## When to use
+ * - An app in a launcher grid, usually inside `bs-app-switcher`.
+ *
+ * ## When not to use
+ * - A row with a description or "recently opened" line -- use `bs-app-recent-item`.
+ * - A command in a menu -- use `bs-menu-item`.
+ *
+ * @slot - The icon (24px in `grid`, 16px in `compact`, `currentColor`). Overrides the `icon` prop.
+ * @part container - The button.
+ * @part icon - The icon tile (`bs-icon-tile`).
+ * @part label - The app name.
+ * @prop --bs-app-tile-icon-size - Size of the icon square. `44px` in `grid` (Figma) and `--bs-sizing-400` in `compact`.
+ * @prop --bs-app-tile-padding - Padding inside the tile. Aliased to `--bs-spacing-150` (`grid`) or `--bs-spacing-100` (`compact`).
+ * @prop --bs-app-tile-gap - Gap between icon and label. Aliased to `--bs-spacing-150` (`grid`) or `--bs-spacing-50` (`compact`).
+ * @prop --bs-app-tile-radius - Corner radius. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-app-tile-bg - Resting background. `transparent`.
+ * @prop --bs-app-tile-bg-hover - Aliased to `--bs-surface-hover`.
+ * @prop --bs-app-tile-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-app-tile-bg-current - Aliased to `--bs-surface-selected`.
+ * @prop --bs-app-tile-icon-bg - Icon square background. Aliased to `--bs-color-neutral-container`; `--bs-surface-base` while hovered, pressed or current.
+ * @prop --bs-app-tile-color - Label colour. Aliased to `--bs-text-default`.
+ * @prop --bs-app-tile-color-disabled - Label and icon colour when disabled. Aliased to `--bs-text-on-disabled`.
+ * @prop --bs-app-tile-focus-ring - Focus ring colour. Aliased to `--bs-border-neutral-focus`.
+ */
+export class BsAppTile {
+    /** The app name, shown under the icon and used as the accessible name. */
+    name;
+    /** `grid` is the 3-column launcher tile; `compact` the smaller 4-column one. */
+    size = 'grid';
+    /** URL of a monochrome SVG painted with the icon colour. The default slot overrides it. */
+    icon;
+    /** The app you are in right now: selected background and `aria-current="true"`. */
+    current = false;
+    /** Dims the tile, sets `aria-disabled` and takes it out of the tab order. */
+    disabled = false;
+    onClick = (ev) => {
+        if (this.disabled) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+    };
+    render() {
+        const common = {
+            part: 'container',
+            class: 'bs-app-tile',
+            'aria-current': this.current ? 'true' : undefined,
+            'aria-disabled': this.disabled ? 'true' : undefined,
+            tabindex: this.disabled ? -1 : undefined,
+            onClick: this.onClick,
+        };
+        const body = [
+            h("bs-icon-tile", { key: '6404044d9a208e22f557cb71fbfdfc91c78b3b0c', part: "icon", class: "bs-app-tile__icon", size: this.size === 'grid' ? 'lg' : 'md' }, this.icon ? h("span", { class: "bs-app-tile__glyph", style: { '--bs-app-tile-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
+            h("span", { key: '0bb976f0b075ad63f52cd9f07fe541bc826a69cd', part: "label", class: "bs-app-tile__label" }, this.name),
+        ];
+        return (h("button", { key: 'c6dc2a317c93fd4fa2c39a42d6c194e1345c4720', ...common, type: "button" }, body));
+    }
+    static get is() { return "bs-app-tile"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-app-tile.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-app-tile.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The app name, shown under the icon and used as the accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsAppTileSize",
+                    "resolved": "\"compact\" | \"grid\"",
+                    "references": {
+                        "BsAppTileSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-app-tile/bs-app-tile.tsx",
+                            "id": "src/components/bs-app-tile/bs-app-tile.tsx::BsAppTileSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`grid` is the 3-column launcher tile; `compact` the smaller 4-column one."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'grid'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of a monochrome SVG painted with the icon colour. The default slot overrides it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "current": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The app you are in right now: selected background and `aria-current=\"true\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dims the tile, sets `aria-disabled` and takes it out of the tab order."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,43 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+import { ICONS } from "../bs-app-switcher/bs-app-switcher.stories";
+const meta = {
+    title: 'Components/bs-app-tile',
+    parameters: { layout: 'padded', docs: { description: { component: componentDescription('bs-app-tile') } } },
+    argTypes: { size: { control: 'inline-radio', options: ['grid', 'compact'] }, name: { control: 'text' }, current: { control: 'boolean' }, disabled: { control: 'boolean' } },
+    args: { name: 'Accounting', size: 'grid', current: false, disabled: false },
+    render: args => html `
+    <div style="width: 104px">
+      <bs-app-tile .icon=${ICONS.accounting} name=${args.name} size=${args.size} ?current=${args.current} ?disabled=${args.disabled}></bs-app-tile>
+    </div>
+  `,
+};
+export default meta;
+export const Default = {};
+/** Both sizes in each state the design shows. Hover, pressed and focus come from the native element: point, press or Tab to see them. */
+export const States = {
+    render: () => html `
+    <div style="display:flex;flex-direction:column;gap:16px">
+      ${['grid', 'compact'].map(size => html `
+          <div style="display:flex;gap:16px;align-items:flex-start">
+            <div style="width:${size === 'grid' ? 104 : 78}px"><bs-app-tile .icon=${ICONS.accounting} name="Accounting" size=${size}></bs-app-tile></div>
+            <div style="width:${size === 'grid' ? 104 : 78}px"><bs-app-tile .icon=${ICONS.accounting} name="Current" size=${size} current></bs-app-tile></div>
+            <div style="width:${size === 'grid' ? 104 : 78}px"><bs-app-tile .icon=${ICONS.accounting} name="Disabled" size=${size} disabled></bs-app-tile></div>
+          </div>
+        `)}
+    </div>
+  `,
+};
+export const Current = { args: { current: true } };
+export const Disabled = { args: { disabled: true } };
+export const Compact = { args: { size: 'compact' } };
+/** A slotted `<svg>` instead of the `icon` URL. */
+export const SlottedIcon = {
+    render: () => html `
+    <div style="width: 104px">
+      <bs-app-tile name="Custom">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8" /></svg>
+      </bs-app-tile>
+    </div>
+  `,
+};

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

@@ -54,7 +54,7 @@ export class BsAttachment {
     };
     render() {
         const isImage = this.type === 'image';
-        return (h("div", { key: '6919ab09c1a5acb3eb1fd6b7d617683d848a593f', class: { 'bs-attachment': true, 'bs-attachment--loading': this.loading }, "aria-busy": this.loading ? 'true' : 'false' }, isImage ? this.renderImage() : this.renderCard(), this.removable && (h("bs-icon-button", { key: '270cdce81d9b3d7646ad4e24258791615a848c88', part: "remove", class: "bs-attachment__remove", size: "xs", variant: "neutral", ariaLabel: `${this.removeLabel}: ${this.fileName}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: '6d2cd9288f9dfe717bb95ac24ccb0752d0923404' })))));
+        return (h("div", { key: '397e7570d4765a1e4dfb410666c0fb0b78c06686', class: { 'bs-attachment': true, 'bs-attachment--loading': this.loading }, "aria-busy": this.loading ? 'true' : 'false' }, isImage ? this.renderImage() : this.renderCard(), this.removable && (h("bs-icon-button", { key: '738b5e3dbf1e2b0856bb20dc5eb3027d1cd87ef5', part: "remove", class: "bs-attachment__remove", size: "xs", variant: "neutral", ariaLabel: `${this.removeLabel}: ${this.fileName}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: 'd21c9d3832f170c5af2d01e2d76b83be3acd3da7' })))));
     }
     renderImage() {
         return (h("div", { part: "thumbnail", class: "bs-attachment__thumbnail" }, h("img", { class: "bs-attachment__image", src: this.imageSrc, alt: this.imageAlt }), this.loading && h(Spinner, { class: "bs-attachment__spinner bs-attachment__spinner--overlay", size: 16, label: this.uploadingLabel })));

package/dist/collection/components/bs-attachment-list/bs-attachment-list.js

@@ -58,7 +58,7 @@ export class BsAttachmentList {
         this.canScrollRight = row.scrollWidth - row.clientWidth - row.scrollLeft > 1;
     };
     render() {
-        return (h("div", { key: '5da3ba40df155851bc126032e1f3b618d5f01c2d', class: "bs-attachment-list" }, h("div", { key: 'f335a3ca13ee519190b6ba42e016a6ee42ac7dd9', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: '29076c83e54c19cb98fb0747b1ad8ac6b2a5d0da', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: '025b21c62387ecf3656dd7a8492a45fe3376a3ea', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
+        return (h("div", { key: 'c01982051a8914fcaede14e787f362a4f82a317d', class: "bs-attachment-list" }, h("div", { key: '9475c8aa5dec12ed9356f72326bdc4ab215576d5', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: '85db80cf4422334d291377e5cc7390f69e014676', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: 'a8659966ec3fd0a128a9e4b5d40ff7121b919172', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
     }
     static get is() { return "bs-attachment-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -131,7 +131,7 @@
    interpolating a "cleaner" scale of our own. */
 .bs-avatar__initials {
   color: var(--bs-avatar-text-default);
-  font-family: var(--bs-typography-font-family-body);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
   font-weight: var(--bs-font-weight-medium);
   text-align: center;
   white-space: nowrap;
@@ -144,7 +144,7 @@
 }
 
 .bs-avatar--md .bs-avatar__initials {
-  font-family: var(--bs-typography-font-family-heading);
+  font-family: var(--bs-typography-font-family-heading, Roboto), sans-serif;
   font-weight: var(--bs-font-weight-bold);
   font-size: var(--bs-fontsize-heading-h6);
   line-height: calc(var(--bs-line-height-heading-h6) * 1px);
@@ -157,7 +157,7 @@
 
 .bs-avatar--xl .bs-avatar__initials,
 .bs-avatar--xxl .bs-avatar__initials {
-  font-family: var(--bs-typography-font-family-heading);
+  font-family: var(--bs-typography-font-family-heading, Roboto), sans-serif;
   font-weight: var(--bs-font-weight-bold);
   font-size: var(--bs-fontsize-heading-h4);
   line-height: calc(var(--bs-line-height-heading-h4) * 1px);

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

@@ -17,7 +17,7 @@ export class BsBadge {
     /** Maps directly to the brandsync-tokens `--bs-badge-bg-*` / `--bs-badge-text-*` sets. */
     variant = 'default';
     render() {
-        return (h("span", { key: '91c12085eda1d9599e50542a273bab640e7f348f', part: "container", class: `bs-badge bs-badge--${this.variant}` }, h("slot", { key: '21f0edd06967e4f608cc16f27c52d3eec0794eb0' })));
+        return (h("span", { key: 'e81df8a115da1e47eec003565f06f7d8f2bce24a', part: "container", class: `bs-badge bs-badge--${this.variant}` }, h("slot", { key: '112b68af29d688640aace037db5f9d786956d264' })));
     }
     static get is() { return "bs-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,7 +59,7 @@ export class BsBreadcrumb {
             ev.preventDefault();
     };
     render() {
-        return (h(Host, { key: 'a9ccd034d839eb8c2b3e3dfb7536737cd0189b75', role: "listitem" }, h("span", { key: '5b10b00b1b2ac1a5246f8d658edb2f2a1110df56', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: 'c3d867d49f00e09a333116f9f87aeb6c9478379b' })), this.current ? (h("span", { part: "current", class: "bs-breadcrumb__current", "aria-current": "page" }, h("slot", null))) : this.href ? (h("a", { part: "link", class: "bs-breadcrumb__link", href: this.href, onClick: this.onLinkClick }, h("slot", null))) : (h("span", { part: "link", class: "bs-breadcrumb__link" }, h("slot", null)))));
+        return (h(Host, { key: 'b6d483d8dd99cda45b49bfc488aeec3514e3b234', role: "listitem" }, h("span", { key: '2dd5b9265590a43403f22830d34c1c7c4815927e', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '7178d1170e8fbdde1281514ac6916bf1e7561e7b' })), this.current ? (h("span", { part: "current", class: "bs-breadcrumb__current", "aria-current": "page" }, h("slot", null))) : this.href ? (h("a", { part: "link", class: "bs-breadcrumb__link", href: this.href, onClick: this.onLinkClick }, h("slot", null))) : (h("span", { part: "link", class: "bs-breadcrumb__link" }, h("slot", null)))));
     }
     static get is() { return "bs-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.js

@@ -88,7 +88,7 @@ export class BsBreadcrumbOverflow {
         }
     }
     render() {
-        return (h(Host, { key: '4dd958f3f99f42072bb314654fc5a0856d8e41c4', role: "listitem" }, h("span", { key: 'ab7d01467e99b810b62e71d7ed289316470529f5', part: "separator", class: "bs-breadcrumb-overflow__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '6590de37057e39c4c914fde3dc3490e17566ad66' })), h("span", { key: '63081f592180f605716221c80dbb877acf926d48', class: "bs-breadcrumb-overflow__wrapper" }, h("button", { key: '0ec87f47561dc329269b1fefef0ccb76dae4cdb4', type: "button", part: "ellipsis", class: "bs-breadcrumb-overflow__ellipsis", "aria-haspopup": "menu", "aria-expanded": String(this.open), "aria-label": this.overflowLabel, onClick: this.onEllipsisToggle }, h(DotsThreeIcon, { key: '6da3c5bee9f532264e2e58227dccc4dfc3786782' })), this.open && this.items.length > 0 && (h("bs-menu", { key: '66f772f0f53090e960d2a9b08e1283989dfc02f8', part: "menu", class: "bs-breadcrumb-overflow__menu" }, this.items.map(item => item.href ? (h("a", { part: "link", class: "bs-breadcrumb-overflow__link", href: item.href, onClick: this.onItemClick(item.href) }, item.label)) : (h("span", { part: "link", class: "bs-breadcrumb-overflow__link" }, item.label))))))));
+        return (h(Host, { key: '8b47ed9e6346d813bf2db5a510151027d6f2a523', role: "listitem" }, h("span", { key: '7eb3b681a555c1bf07b16c34c8e7364384ecb3d2', part: "separator", class: "bs-breadcrumb-overflow__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '4bd4ced37d1a24b37f507b53b7b6c0fe8f577de7' })), h("span", { key: '03f6ff9300d53bcbddf6d8fb57ed08a85fe9e67b', class: "bs-breadcrumb-overflow__wrapper" }, h("button", { key: '9b0fb0cfc28ccffbfe54dffc8a5612d1c83b27f5', type: "button", part: "ellipsis", class: "bs-breadcrumb-overflow__ellipsis", "aria-haspopup": "menu", "aria-expanded": String(this.open), "aria-label": this.overflowLabel, onClick: this.onEllipsisToggle }, h(DotsThreeIcon, { key: '932b86a682c495b1acc47cd703294c5b2dbf3c03' })), this.open && this.items.length > 0 && (h("bs-menu", { key: '809bbfe99843c3e531ee2e620a5adca4c66360d9', part: "menu", class: "bs-breadcrumb-overflow__menu" }, this.items.map(item => item.href ? (h("a", { part: "link", class: "bs-breadcrumb-overflow__link", href: item.href, onClick: this.onItemClick(item.href) }, item.label)) : (h("span", { part: "link", class: "bs-breadcrumb-overflow__link" }, item.label))))))));
     }
     static get is() { return "bs-breadcrumb-overflow"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-breadcrumb/bs-breadcrumbs/bs-breadcrumbs.js

@@ -54,7 +54,7 @@ export class BsBreadcrumbs {
         });
     }
     render() {
-        return (h("nav", { key: '598006bc4c7ef1bfba83ec4770b6e52c4dac8fe7', "aria-label": this.label }, h("ol", { key: '450ddcd3f5739d074bead021f32c91aaa8149559', part: "list", class: "bs-breadcrumbs__list" }, h("slot", { key: '772821437007761a6367a1d4d7dacf7a34739f9a', onSlotchange: this.onSlotChange }))));
+        return (h("nav", { key: '6df966694de1f681033e8705c536c983faa1155c', "aria-label": this.label }, h("ol", { key: '61d5e7cf39bbee670f49bbc8340df75057919431', part: "list", class: "bs-breadcrumbs__list" }, h("slot", { key: '12ac9fccdb05ecf029e8eeaaa98065272945341b', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "bs-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -133,3 +133,15 @@ describe('bs-button', () => {
         });
     });
 });
+describe('bs-button ripple', () => {
+    it('contains a bs-ripple, centered only when icon-only', async () => {
+        const { root } = await render(h("bs-button", null, "Save"));
+        const ripple = root.shadowRoot.querySelector('bs-ripple');
+        expect(ripple).not.toBeNull();
+        expect(ripple.centered).toBe(false);
+    });
+    it('passes disabled through to the ripple', async () => {
+        const { root } = await render(h("bs-button", { disabled: true }, "Save"));
+        expect(root.shadowRoot.querySelector('bs-ripple').disabled).toBe(true);
+    });
+});

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

@@ -79,6 +79,8 @@
      Every variant's label actually uses the regular weight. */
   font-weight: var(--bs-font-weight-regular);
   cursor: pointer;
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   transition: background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease);
 }
 

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

@@ -18,8 +18,11 @@ import { h } from "@stencil/core";
  *   it for actions that actually delete/revoke/undo something.
  *
  * @slot - Default slot: the button's label content.
+ * Built from: `bs-ripple` (press feedback).
+ *
  * @slot icon - Optional leading icon, rendered before the label.
  * @slot end-icon - Optional trailing icon, rendered after the label.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `bs-button::part(ripple) { --bs-ripple-color: ...; }` (also `--bs-ripple-opacity`, `--bs-ripple-duration`).
  * @part icon - The icon wrapper element.
  * @part label - The text label element.
  * @part end-icon - The trailing icon wrapper element.
@@ -119,7 +122,7 @@ export class BsButton {
     };
     render() {
         const iconOnly = (this.hasIcon || this.hasEndIcon) && !this.hasLabel;
-        return (h("button", { key: 'dd64d152077f283339cbf93b3b7424dd51519163', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '918a3c1e157e9c84992fd1553c69cf2d7b87cba9', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: 'a43da2dfb72cc155d113f4e044fec9890bcf8e90', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '35c941287c14c79b9a9c23a0d4cfecd66c459f20', part: "label", class: "bs-button__label" }, h("slot", { key: '4e76d97c2f26e3f609e3e8336135529b49d1a370', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'fb82a5a1785c6c96993daf3de2bdff5b9597a431', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '0d70abb45f41970bc2aa5dcd18ad3931b053190e', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
+        return (h("button", { key: '498371cb1db28a17e668275a5e3dab6a093ce932', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("bs-ripple", { key: '1d985ad61540f85cc47332f876eda6efcef5b87a', part: "ripple", centered: iconOnly, disabled: this.disabled }), h("span", { key: 'fbf28591ab62369e0a1a7b32da670cd350aee122', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: '294540047c366c6f8576c8123f64f55c712d6335', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '8536c25dab900331235dba703350ff57fd7c8ff6', part: "label", class: "bs-button__label" }, h("slot", { key: '59cdb689925c55ec90c34a016e586f5be95f38e4', onSlotchange: this.onLabelSlotchange })), h("span", { key: '0976f3628408ccccec017b8e09b5a41016f0b516', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '40a1f6d3faf5f4ae39e9da0aa0027207afe3e7a1', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
     }
     static get is() { return "bs-button"; }
     static get encapsulation() { return "shadow"; }