@brandsync/wc 1.17.0 → 1.19.0

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

@@ -97,7 +97,7 @@ export class BsList {
         enabled[next].focus();
     }
     render() {
-        return (h("div", { key: '82a1f810e0044095794fa797075abb025275a973', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: '993e3311f2dd6ff26850676df5af426e574f9297', onSlotchange: () => this.sync() })));
+        return (h("div", { key: '9956c0d827c6ea78a2ed0a93e823555eac9af301', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: '054ef607c962bdb4171e2b3818928f7e1765f692', onSlotchange: () => this.sync() })));
     }
     static get is() { return "bs-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-list-item/bs-list-item.css

@@ -27,6 +27,8 @@
 }
 
 .bs-list-item {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   box-sizing: border-box;
   display: flex;
   align-items: center;

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

@@ -50,6 +50,7 @@ import { Host, h } from "@stencil/core";
  * @prop --bs-list-item-focus-ring - Focus ring colour. Aliased to `--bs-border-neutral-focus`.
  * @prop --bs-list-item-image-width - Leading image width. 72px.
  * @prop --bs-list-item-image-height - Leading image height. 56px.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsListItem {
     el;
@@ -101,7 +102,7 @@ export class BsListItem {
         const role = this.selectionRole === 'option' ? 'option' : this.selectionRole === 'listitem' ? 'listitem' : this.interactive ? 'button' : undefined;
         const standaloneFocusable = this.interactive && !this.selectionRole && !this.disabled;
         const showTrailing = this.showArrow || this.hasTrailing;
-        return (h(Host, { key: '59d3a6773689bc3c4fb99ca0b77ce1092b4ceb5b', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, h("div", { key: 'bbee5cf94e2c79eaf366d086e6fff408c67a76f6', part: "container", class: "bs-list-item" }, h("div", { key: 'df128d2c35849b418e06ee7b7ce7b80264f3b89f', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, h("slot", { key: 'c400cac549e869eac94234e7124869f08c20b048', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), h("div", { key: '52238416ca1baa76d4bc86b37047d1c8159f47f3', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (h("div", { key: 'a71711e9f393238c02a2649aad95ce97cc07e8ce', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (h("div", { key: 'f9a73d15763f95e1b72b1a8bae00851695dbd212', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (h("div", { key: 'f122f30aead7789821a8a9c1920ce6714755652f', part: "support-text", class: "bs-list-item__support" }, this.supportText)), h("slot", { key: '675ab1d812dd111ea5797a1f8b84494d5f0188cf', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), h("div", { key: 'd62bd229a2a137a025052f1dbf6b354e52faf491', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, h("slot", { key: '2e325bbc97ed61b720e64251f6f2efb10708b60f', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (h("svg", { key: '5dd8afe5a8dd99cec88ecaf5f537f6c8ca6acf6c', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, h("path", { key: '3a9985b0f82f62adf59c52b37459719208e28de4', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: 'a4036266a279faf010db1b74aafec4e82574e921', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, h("div", { key: '5536afa9b97d2813b04ae1b81731a9a9598f326a', part: "container", class: "bs-list-item" }, interactive && !this.disabled && h("bs-ripple", { key: 'b88b81c3aa539eb54f275ec26c63049e9f3c8163', part: "ripple" }), h("div", { key: 'c297bb864a5744e51ef7053e1ee965cd5bb4184b', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, h("slot", { key: '7f67174fcaff9518c2b5b6303b0ea817f1a151c0', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), h("div", { key: 'dc21fd490e75685ca49619f4eafb76e175c4d15d', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (h("div", { key: '857cb18376ff874ae8f651f4b354a7e01c4992d0', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (h("div", { key: '0c21f5a9300f1ef3ebd633e22467f05ccc4d4bc7', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (h("div", { key: '0b5aa6198aec09d9a4a7cd3086407e71bd3daf99', part: "support-text", class: "bs-list-item__support" }, this.supportText)), h("slot", { key: 'ce13d14cb3d11f7ec93782dae33e83e802f56e5b', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), h("div", { key: '723bf038e7b070a17080c15183a8ea1b3b4abe79', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, h("slot", { key: '48057fb7c77264a761185f029a3f8a8c55f3eed4', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (h("svg", { key: 'b13854ebfc8bfe7571f91ffd0b1d15043c4edf5d', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, h("path", { key: '386a20723c7b54845ef2fff0b2292828775f3c06', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "bs-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-mega-menu/bs-mega-menu.cmp.test.js

@@ -0,0 +1,204 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import axe from "axe-core";
+import { userEvent } from "vitest/browser";
+import { assertShadowParts, assertCssCustomProperties } from "../../test/helpers/conventions";
+import { COLUMNS, COMPACT_COLUMNS, FEATURED, RECENT } from "./bs-mega-menu.stories";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+const qa = (el, s) => Array.from(el.shadowRoot.querySelectorAll(s));
+const make = async (props = {}) => {
+    const r = await render(h("div", { style: { width: '1100px' } }, h("bs-mega-menu", { label: "Sales menu" })));
+    const el = r.root.querySelector('bs-mega-menu');
+    Object.assign(el, { columns: COLUMNS, recent: RECENT, ...props });
+    await r.waitForChanges();
+    await new Promise(res => setTimeout(res, 80));
+    return { ...r, el };
+};
+describe('bs-mega-menu', () => {
+    it('is a labelled navigation with a group per column, real lists, and the parts and custom properties', async () => {
+        const { el } = await make();
+        const panel = q(el, '[part="panel"]');
+        expect(panel.getAttribute('role')).toBe('navigation');
+        expect(panel.getAttribute('aria-label')).toBe('Sales menu');
+        const groups = qa(el, '[part="column"]');
+        expect(groups.length).toBe(3);
+        for (const g of groups) {
+            expect(g.getAttribute('role')).toBe('group');
+            expect(el.shadowRoot.getElementById(g.getAttribute('aria-labelledby')).textContent).toBeTruthy();
+            expect(g.querySelector('ul > li > bs-menu-block')).not.toBeNull();
+        }
+        assertShadowParts(el.shadowRoot, ['panel', 'columns', 'column', 'heading', 'list', 'block', 'footer', 'shortcut']);
+        assertCssCustomProperties(el, ['--bs-mega-menu-width', '--bs-mega-menu-shadow', '--bs-mega-menu-heading-color']);
+    });
+    it('renders the item data: description, badge and icon on menu blocks', async () => {
+        const { el } = await make();
+        const blocks = qa(el, 'bs-menu-block');
+        expect(blocks.length).toBe(6);
+        const subs = blocks.find(b => b.name === 'Subscriptions');
+        expect(subs.badge).toBe('New');
+        expect(subs.description).toBe('Recurring billing for services');
+        expect(subs.icon).toContain('data:image/svg+xml');
+    });
+    it('compact type renders compact blocks only', async () => {
+        const { el } = await make({ type: 'compact', columns: COMPACT_COLUMNS });
+        expect(qa(el, 'bs-menu-block').length).toBe(0);
+        expect(qa(el, 'bs-compact-menu-block').length).toBe(14);
+        expect(qa(el, '[part="column"]').length).toBe(4);
+    });
+    it('gives the featured area its own grid track', async () => {
+        const { el, waitForChanges } = await make({ columns: COLUMNS.slice(0, 2) });
+        expect(q(el, '[part="featured"]')).toBeNull();
+        el.featured = FEATURED;
+        await waitForChanges();
+        const f = q(el, '[part="featured"]');
+        expect(f.textContent).toContain('Smarter payment reminders');
+        expect(f.getAttribute('aria-labelledby')).toBe(q(el, '[part="featured-title"]').id);
+        const tracks = getComputedStyle(q(el, '[part="columns"]')).gridTemplateColumns.split(' ');
+        expect(tracks.length).toBe(3);
+    });
+    it('shows the recently used line and the shortcut hint, both overridable by slots', async () => {
+        const { el } = await make();
+        expect(q(el, '[part="footer"]').textContent).toContain('Recently used: Invoices, Sales orders');
+        expect(q(el, '[part="footer"]').textContent).toContain('Can’t find it? Press');
+        expect(q(el, 'bs-key-caps').keys).toBe('Ctrl+K');
+        expect(q(el, 'slot[name="footer-start"]')).not.toBeNull();
+        expect(q(el, 'slot[name="footer-end"]')).not.toBeNull();
+        expect(q(el, 'slot[name="featured"]')).toBeNull();
+    });
+    it('fires a cancelable bsMenuSelect with the item, and Escape fires bsClose', async () => {
+        const { el } = await make();
+        const picked = [];
+        el.addEventListener('bsMenuSelect', (e) => {
+            picked.push(e.detail.id);
+            e.preventDefault();
+        });
+        let closed = 0;
+        el.addEventListener('bsClose', () => closed++);
+        qa(el, 'bs-menu-block')[2].shadowRoot.querySelector('button').click();
+        expect(picked).toEqual(['invoices']);
+        qa(el, 'bs-menu-block')[0].shadowRoot.querySelector('button').focus();
+        await userEvent.keyboard('{Escape}');
+        expect(closed).toBe(1);
+    });
+    describe('narrow container', () => {
+        const makeAt = async (width, props = {}) => {
+            const r = await render(h("div", { style: { width: `${width}px` } }, h("bs-mega-menu", { label: "Sales menu" })));
+            const el = r.root.querySelector('bs-mega-menu');
+            Object.assign(el, { columns: COLUMNS, recent: RECENT, ...props });
+            await r.waitForChanges();
+            await new Promise(res => setTimeout(res, 80));
+            return el;
+        };
+        it('is one column, with wrapping text, 44px links, and no shortcut hint below 600px', async () => {
+            const el = await makeAt(375, { featured: FEATURED });
+            expect(getComputedStyle(q(el, '[part="columns"]')).gridTemplateColumns.split(' ').length).toBe(1);
+            const cols = qa(el, '[part="column"]').map(c => c.getBoundingClientRect());
+            expect(cols[1].top).toBeGreaterThanOrEqual(cols[0].bottom);
+            expect(q(el, '[part="featured"]').getBoundingClientRect().top).toBeGreaterThanOrEqual(cols[cols.length - 1].bottom);
+            qa(el, 'bs-menu-block').forEach(b => expect(b.getBoundingClientRect().height).toBeGreaterThanOrEqual(44));
+            expect(getComputedStyle(qa(el, 'bs-menu-block')[0].shadowRoot.querySelector('.bs-menu-block__name')).whiteSpace).toBe('normal');
+            expect(getComputedStyle(q(el, '.bs-mega-menu__shortcut')).display).toBe('none');
+            expect(q(el, '[part="footer"]').textContent).toContain('Recently used');
+            expect(el.getBoundingClientRect().width).toBe(375);
+        });
+        it('makes compact links at least 44px tall', async () => {
+            const el = await makeAt(375, { type: 'compact', columns: COMPACT_COLUMNS });
+            qa(el, 'bs-compact-menu-block').forEach(b => expect(b.getBoundingClientRect().height).toBeGreaterThanOrEqual(44));
+        });
+        it('keeps the multi-column layout and the shortcut hint at 600px and wider', async () => {
+            const wide = await makeAt(600);
+            expect(getComputedStyle(q(wide, '[part="columns"]')).gridTemplateColumns.split(' ').length).toBe(3);
+            expect(getComputedStyle(q(wide, '.bs-mega-menu__shortcut')).display).not.toBe('none');
+        });
+        it('has no axe violations when narrow', async () => {
+            const el = await makeAt(375, { featured: FEATURED });
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${v.id}: ${v.help}`)).toEqual([]);
+        });
+    });
+    it('is hidden with the hidden attribute', async () => {
+        const { el, waitForChanges } = await make();
+        el.hidden = true;
+        await waitForChanges();
+        expect(getComputedStyle(el).display).toBe('none');
+    });
+    it('has no axe violations in any type', async () => {
+        for (const props of [{}, { featured: FEATURED, columns: COLUMNS.slice(0, 2) }, { type: 'compact', columns: COMPACT_COLUMNS }, { type: 'compact', columns: COMPACT_COLUMNS.slice(0, 3), featured: FEATURED }]) {
+            const { el } = await make(props);
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${v.id}: ${v.help}`)).toEqual([]);
+        }
+    });
+    describe('open/close motion', () => {
+        const wait = (ms) => new Promise(r => setTimeout(r, ms));
+        const panel = (el) => q(el, '[part="panel"]');
+        it('stays visible with no open prop (the hidden-only contract)', async () => {
+            const { el } = await make();
+            expect(getComputedStyle(el).display).not.toBe('none');
+            expect(panel(el).getAnimations().length).toBe(0);
+        });
+        it('is removed while open is false and shown with an enter animation of the configured duration', async () => {
+            const { el, waitForChanges } = await make();
+            el.style.setProperty('--bs-mega-menu-duration', '150ms');
+            el.open = false;
+            await waitForChanges();
+            expect(getComputedStyle(el).display).toBe('none');
+            el.open = true;
+            await waitForChanges();
+            expect(getComputedStyle(el).display).not.toBe('none');
+            const anims = panel(el).getAnimations();
+            expect(anims.length).toBe(1);
+            expect(anims[0].effect.getTiming().duration).toBe(150);
+        });
+        it('plays an exit of the configured duration, is inert meanwhile, then is removed', async () => {
+            const { el, waitForChanges } = await make({ open: true });
+            el.style.setProperty('--bs-mega-menu-duration', '150ms');
+            el.open = false;
+            await waitForChanges();
+            expect(getComputedStyle(el).display).not.toBe('none');
+            expect(panel(el).inert).toBe(true);
+            const anims = panel(el).getAnimations();
+            expect(anims.length).toBe(1);
+            expect(anims[0].effect.getTiming().duration).toBe(150);
+            await wait(400);
+            await waitForChanges();
+            expect(getComputedStyle(el).display).toBe('none');
+            expect(panel(el).inert).toBe(false);
+        });
+        it('cancels the exit when it opens again', async () => {
+            const { el, waitForChanges } = await make({ open: true });
+            el.style.setProperty('--bs-mega-menu-duration', '300ms');
+            el.open = false;
+            await waitForChanges();
+            el.open = true;
+            await waitForChanges();
+            await wait(500);
+            await waitForChanges();
+            expect(getComputedStyle(el).display).not.toBe('none');
+            expect(panel(el).inert).toBe(false);
+        });
+        it('runs no animation and changes at once when the duration is 0ms', async () => {
+            const { el, waitForChanges } = await make({ open: true });
+            el.style.setProperty('--bs-mega-menu-duration', '0ms');
+            el.open = false;
+            await waitForChanges();
+            expect(panel(el).getAnimations().length).toBe(0);
+            expect(getComputedStyle(el).display).toBe('none');
+            el.open = true;
+            await waitForChanges();
+            expect(panel(el).getAnimations().length).toBe(0);
+            expect(getComputedStyle(el).display).not.toBe('none');
+        });
+        it('still hides instantly with the hidden attribute while open is true', async () => {
+            const { el, waitForChanges } = await make({ open: true });
+            el.hidden = true;
+            await waitForChanges();
+            expect(getComputedStyle(el).display).toBe('none');
+        });
+        it('has no axe violations while open', async () => {
+            const { el } = await make({ open: true });
+            await wait(300);
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${v.id}: ${v.help}`)).toEqual([]);
+        });
+    });
+});

package/dist/collection/components/bs-mega-menu/bs-mega-menu.css

@@ -0,0 +1,143 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  /* The panel reacts to its own width (it may sit in a header slot), not the viewport's. */
+  container-type: inline-size;
+  width: var(--bs-mega-menu-width);
+  max-width: 100%;
+  --bs-mega-menu-width: 1100px;
+  --bs-mega-menu-radius: var(--bs-border-radius-150);
+  --bs-mega-menu-bg: var(--bs-surface-base);
+  --bs-mega-menu-border-color: var(--bs-border-default);
+  --bs-mega-menu-shadow: var(--bs-shadow-position-0) var(--bs-shadow-position-50) var(--bs-shadow-blur-100) var(--bs-elevation-high);
+  --bs-mega-menu-padding: var(--bs-spacing-300) calc(var(--bs-spacing-300) + var(--bs-spacing-50));
+  --bs-mega-menu-gap: var(--bs-spacing-300);
+  --bs-mega-menu-heading-color: var(--bs-text-muted);
+  --bs-mega-menu-text-color: var(--bs-text-default);
+  --bs-mega-menu-muted-color: var(--bs-text-secondary);
+  --bs-mega-menu-duration: var(--bs-duration-default);
+  --bs-mega-menu-easing: var(--bs-easing-standard);
+  --bs-mega-menu-distance: var(--bs-spacing-100);
+}
+
+:host([hidden]),
+:host([data-closed]) {
+  display: none;
+}
+
+.bs-mega-menu {
+  display: block;
+  --bs-card-bg: var(--bs-mega-menu-bg);
+  --bs-card-radius: var(--bs-mega-menu-radius);
+  --bs-card-padding: 0px;
+  --bs-card-border-width: 1px;
+  --bs-card-border-color: var(--bs-mega-menu-border-color);
+  --bs-card-shadow: var(--bs-mega-menu-shadow);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+}
+
+.bs-mega-menu__columns {
+  display: grid;
+  grid-template-columns: repeat(var(--bs-mega-menu-tracks), minmax(0, 1fr));
+  gap: var(--bs-mega-menu-gap);
+  padding: var(--bs-mega-menu-padding);
+  padding-bottom: var(--bs-spacing-100);
+}
+
+.bs-mega-menu__heading {
+  margin: 0 0 var(--bs-spacing-50);
+  color: var(--bs-mega-menu-heading-color);
+  font-size: var(--bs-fontsize-caption-sm);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+}
+
+.bs-mega-menu__list {
+  display: block;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.bs-mega-menu__featured {
+  padding-top: var(--bs-spacing-300);
+}
+
+.bs-mega-menu__featured-title,
+.bs-mega-menu__featured-description {
+  margin: 0;
+}
+
+.bs-mega-menu__featured-title {
+  color: var(--bs-mega-menu-text-color);
+  font-size: var(--bs-fontsize-caption-sm);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+}
+
+.bs-mega-menu__featured-description {
+  margin-top: var(--bs-spacing-100);
+  color: var(--bs-mega-menu-muted-color);
+  font-size: var(--bs-fontsize-caption-sm);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+}
+
+.bs-mega-menu__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-200);
+  padding: var(--bs-spacing-150) var(--bs-spacing-200);
+  color: var(--bs-mega-menu-muted-color);
+  font-size: var(--bs-fontsize-caption-sm);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+}
+
+.bs-mega-menu__footer-end {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-mega-menu__shortcut {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+/* Narrow panel (below 600px, where three columns stop fitting; documentation only -- CSS can't read a custom
+   property in a container query): one column, group heading above its links, featured area below, titles and
+   descriptions wrap, links are at least 44px tall (--bs-scale-550), the footer stacks and the default shortcut
+   hint is removed (a keyboard hint is meaningless on a touch screen; display: none also drops it from the
+   accessibility tree). A `footer-end` slot override is the consumer's content and stays. */
+@container (max-width: 599px) {
+  .bs-mega-menu__columns {
+    grid-template-columns: minmax(0, 1fr);
+    padding: var(--bs-spacing-200);
+    padding-bottom: var(--bs-spacing-100);
+  }
+
+  bs-menu-block {
+    --bs-menu-block-white-space: normal;
+    min-height: var(--bs-scale-550);
+  }
+
+  bs-compact-menu-block {
+    --bs-compact-menu-block-padding: var(--bs-spacing-150) var(--bs-spacing-100);
+    min-height: var(--bs-scale-550);
+  }
+
+  .bs-mega-menu__featured {
+    padding-top: var(--bs-spacing-100);
+  }
+
+  .bs-mega-menu__footer {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--bs-spacing-100);
+  }
+
+  .bs-mega-menu__shortcut {
+    display: none;
+  }
+}