@brandsync/wc 1.18.0 → 1.20.0

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

@@ -0,0 +1,264 @@
+import { h } from "@stencil/core";
+/**
+ * A segmented control: a row of `bs-toggle-button` segments with single or multiple choice.
+ *
+ * Single choice (default) uses radio semantics (`role="radiogroup"` / `role="radio"`) and arrow keys
+ * move focus AND selection. Multiple choice (`multiple`) uses `role="group"` with `aria-pressed`
+ * toggle buttons; arrow keys move focus only, Space/Enter toggles. Focus is roving in both modes
+ * (one tab stop).
+ *
+ * Built from: `bs-toggle-button`.
+ *
+ * ## When to use
+ * - 2-5 short, related options that should all stay visible (view mode, alignment, filters).
+ *
+ * ## When not to use
+ * - Long lists (use `bs-select`) or page-level navigation (use `bs-tabs`).
+ *
+ * @slot - `bs-toggle-button` segments.
+ * @part group - The segmented container.
+ */
+// Note: segment styling is `bs-toggle-button`'s own --bs-toggle-button-* custom properties.
+export class BsToggleButtonGroup {
+    el;
+    /** Selected segment `value` (single choice). */
+    value;
+    /** Selected segment values (multiple choice). Set as a JS property. */
+    values = [];
+    /** Allow several pressed segments. */
+    multiple = false;
+    /** Disables every segment. */
+    disabled = false;
+    /** Accessible name of the group. Required. */
+    ariaLabel = null;
+    /** Emitted when the user changes the selection: the new `value` (single) or `values` (multiple). */
+    bsChange;
+    sync() {
+        const segs = this.segments();
+        const first = segs.find(s => !s.disabled && !this.disabled);
+        const pressedEnabled = segs.find(s => s.pressed && !s.disabled && !this.disabled);
+        segs.forEach(s => {
+            s.mode = this.multiple ? 'toggle' : 'radio';
+            s.pressed = this.multiple ? this.values.includes(s.value) : s.value === this.value;
+            if (this.disabled)
+                s.disabled = true;
+            s.tabbable = (this.multiple ? first : pressedEnabled || first) === s;
+        });
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    segments() {
+        return Array.from(this.el.querySelectorAll('bs-toggle-button'));
+    }
+    enabled() {
+        return this.segments().filter(s => !s.disabled);
+    }
+    onSegmentChange(ev) {
+        const seg = ev.target;
+        if (seg === this.el || !seg.matches?.('bs-toggle-button'))
+            return;
+        // Replace the segment's own event with the group's.
+        ev.stopImmediatePropagation();
+        if (this.multiple) {
+            this.values = seg.pressed ? [...this.values.filter(v => v !== seg.value), seg.value] : this.values.filter(v => v !== seg.value);
+            this.bsChange.emit(this.values);
+        }
+        else {
+            this.value = seg.value;
+            this.bsChange.emit(this.value);
+        }
+    }
+    onKeyDown(ev) {
+        const keys = ['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', 'Home', 'End'];
+        if (!keys.includes(ev.key))
+            return;
+        const items = this.enabled();
+        if (items.length === 0)
+            return;
+        const rtl = getComputedStyle(this.el).direction === 'rtl';
+        const cur = items.findIndex(i => i === ev.target || i.contains(ev.target));
+        let next;
+        if (ev.key === 'Home')
+            next = 0;
+        else if (ev.key === 'End')
+            next = items.length - 1;
+        else {
+            const fwd = ev.key === 'ArrowDown' || ev.key === (rtl ? 'ArrowLeft' : 'ArrowRight');
+            next = cur === -1 ? 0 : (cur + (fwd ? 1 : -1) + items.length) % items.length;
+        }
+        ev.preventDefault();
+        const target = items[next];
+        // Roving: only the focused segment stays tabbable.
+        this.segments().forEach(s => (s.tabbable = s === target));
+        const btn = target.shadowRoot?.querySelector('button');
+        btn?.focus();
+        if (!this.multiple)
+            btn?.click();
+    }
+    render() {
+        return (h("div", { key: '905bc6d78ea98ca06ad49d2835daa8cbde5dfe9c', part: "group", class: "bs-toggle-button-group", role: this.multiple ? 'group' : 'radiogroup', "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : undefined }, h("slot", { key: 'f06398e10058a9f3ece77bf95a3922fb80f31a0a', onSlotchange: () => this.sync() })));
+    }
+    static get is() { return "bs-toggle-button-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-toggle-button-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-toggle-button-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected segment `value` (single choice)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "values": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected segment values (multiple choice). Set as a JS property."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow several pressed segments."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables every segment."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the group. Required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user changes the selection: the new `value` (single) or `values` (multiple)."
+                },
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "sync"
+            }, {
+                "propName": "values",
+                "methodName": "sync"
+            }, {
+                "propName": "multiple",
+                "methodName": "sync"
+            }, {
+                "propName": "disabled",
+                "methodName": "sync"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bsChange",
+                "method": "onSegmentChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/bs-toggle-button-group/bs-toggle-button-group.stories.js

@@ -0,0 +1,42 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const icon = (d) => html `<svg slot="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d=${d} stroke="currentColor" stroke-width="1.5"/></svg>`;
+const meta = {
+    title: 'Components/bs-toggle-button-group',
+    parameters: { docs: { description: { component: componentDescription('bs-toggle-button-group') } } },
+    render: args => html `
+    <bs-toggle-button-group ariaLabel="View" value=${args.value} ?multiple=${args.multiple} ?disabled=${args.disabled}>
+      <bs-toggle-button value="day">Day</bs-toggle-button>
+      <bs-toggle-button value="week">Week</bs-toggle-button>
+      <bs-toggle-button value="month">Month</bs-toggle-button>
+    </bs-toggle-button-group>
+  `,
+    argTypes: {
+        multiple: { control: 'boolean', description: propDescription('bs-toggle-button-group', 'multiple') },
+        disabled: { control: 'boolean', description: propDescription('bs-toggle-button-group', 'disabled') },
+        value: { control: 'select', options: ['day', 'week', 'month'], description: propDescription('bs-toggle-button-group', 'value') },
+    },
+    args: { multiple: false, disabled: false, value: 'week' },
+};
+export default meta;
+export const Default = {};
+export const MultipleChoice = {
+    name: 'Multiple choice',
+    render: () => html `
+    <bs-toggle-button-group ariaLabel="Text format" multiple .values=${['bold']}>
+      <bs-toggle-button value="bold">Bold</bs-toggle-button>
+      <bs-toggle-button value="italic">Italic</bs-toggle-button>
+      <bs-toggle-button value="underline">Underline</bs-toggle-button>
+    </bs-toggle-button-group>
+  `,
+};
+export const IconOnly = {
+    name: 'Icon only',
+    render: () => html `
+    <bs-toggle-button-group ariaLabel="Layout" value="grid">
+      <bs-toggle-button value="list" ariaLabel="List view">${icon('M4 6h16M4 12h16M4 18h16')}</bs-toggle-button>
+      <bs-toggle-button value="grid" ariaLabel="Grid view">${icon('M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z')}</bs-toggle-button>
+    </bs-toggle-button-group>
+  `,
+};
+export const Disabled = { args: { disabled: true } };

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

@@ -0,0 +1,149 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import axe from "axe-core";
+import { runAxeCheck, assertShadowParts, assertCssCustomProperties } from "../../test/helpers/conventions";
+const tick = (ms = 50) => new Promise(r => setTimeout(r, ms));
+const key = (el, k) => el.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, composed: true, cancelable: true }));
+const basic = (props = {}) => (h("bs-toolbar", { label: "Formatting", ...props }, h("bs-button", { slot: "left", id: "b1", variant: "subtle" }, "Bold"), h("bs-button", { slot: "left", id: "b2", variant: "subtle" }, "Italic"), h("bs-divider", { slot: "left" }), h("bs-button", { slot: "left", id: "b3", variant: "subtle", disabled: true }, "Underline"), h("bs-button", { slot: "right", id: "b4", variant: "subtle" }, "Save")));
+describe('bs-toolbar', () => {
+    it('renders role="toolbar" with a label and orientation', async () => {
+        const { root } = await render(basic());
+        const bar = root.shadowRoot.querySelector('[role="toolbar"]');
+        expect(bar.getAttribute('aria-label')).toBe('Formatting');
+        expect(bar.getAttribute('aria-orientation')).toBe('horizontal');
+        assertShadowParts(root.shadowRoot, ['container', 'left', 'right']);
+        assertCssCustomProperties(root, ['--bs-toolbar-bg', '--bs-toolbar-padding', '--bs-toolbar-gap']);
+    });
+    it('puts left items before right items and pushes the right group to the end', async () => {
+        const { root } = await render(h("div", { style: { width: '600px' } }, basic()));
+        const tb = root.querySelector('bs-toolbar');
+        const left = tb.querySelector('#b1').getBoundingClientRect();
+        const right = tb.querySelector('#b4').getBoundingClientRect();
+        expect(left.left).toBeLessThan(right.left);
+        expect(Math.abs(tb.getBoundingClientRect().right - right.right)).toBeLessThan(20);
+    });
+    it('turns slotted dividers perpendicular to the toolbar', async () => {
+        const { root } = await render(basic());
+        await tick();
+        expect(root.querySelector('bs-divider').orientation).toBe('vertical');
+        root.orientation = 'vertical';
+        await tick();
+        expect(root.querySelector('bs-divider').orientation).toBe('horizontal');
+    });
+    describe('roving focus', () => {
+        it('keeps exactly one control in the tab order', async () => {
+            const { root } = await render(basic());
+            await tick();
+            const tabindexes = ['b1', 'b2', 'b4'].map(id => root.querySelector('#' + id).getAttribute('tabindex'));
+            expect(tabindexes).toEqual(['0', '-1', '-1']);
+        });
+        it('moves with arrows, wraps, skips disabled, and Home/End work', async () => {
+            const { root } = await render(basic());
+            await tick();
+            const ids = () => document.activeElement?.id;
+            root.querySelector('#b1').focus();
+            expect(ids()).toBe('b1');
+            key(root.querySelector('#b1'), 'ArrowRight');
+            expect(ids()).toBe('b2');
+            key(root.querySelector('#b2'), 'ArrowRight'); // skips disabled b3
+            expect(ids()).toBe('b4');
+            key(root.querySelector('#b4'), 'ArrowRight'); // wraps
+            expect(ids()).toBe('b1');
+            key(root.querySelector('#b1'), 'ArrowLeft');
+            expect(ids()).toBe('b4');
+            key(root.querySelector('#b4'), 'Home');
+            expect(ids()).toBe('b1');
+            key(root.querySelector('#b1'), 'End');
+            expect(ids()).toBe('b4');
+        });
+        it('remembers the last focused control as the tab stop', async () => {
+            const { root } = await render(basic());
+            await tick();
+            key(root.querySelector('#b1'), 'ArrowRight');
+            expect(root.querySelector('#b2').getAttribute('tabindex')).toBe('0');
+            expect(root.querySelector('#b1').getAttribute('tabindex')).toBe('-1');
+        });
+        it('uses Up/Down when vertical and ignores Left/Right', async () => {
+            const { root } = await render(basic({ orientation: 'vertical' }));
+            await tick();
+            root.querySelector('#b1').focus();
+            key(root.querySelector('#b1'), 'ArrowRight');
+            expect(document.activeElement.id).toBe('b1');
+            key(root.querySelector('#b1'), 'ArrowDown');
+            expect(document.activeElement.id).toBe('b2');
+            expect(root.shadowRoot.querySelector('[role="toolbar"]').getAttribute('aria-orientation')).toBe('vertical');
+        });
+    });
+    describe('overflow', () => {
+        const many = (width) => (h("div", { style: { width } }, h("bs-toolbar", { label: "Actions", overflow: true }, ['One', 'Two', 'Three', 'Four', 'Five', 'Six'].map(t => (h("bs-button", { slot: "left", variant: "subtle", class: "item" }, t))))));
+        it('shows no overflow button when everything fits', async () => {
+            const { root } = await render(many('900px'));
+            await tick(150);
+            const tb = root.querySelector('bs-toolbar');
+            const pop = tb.shadowRoot.querySelector('bs-popover');
+            expect(pop.hidden).toBe(true);
+            expect(tb.querySelectorAll('[data-bs-toolbar-overflowed]').length).toBe(0);
+        });
+        it('collapses trailing controls into a menu and activates the original on selection', async () => {
+            const { root } = await render(many('260px'));
+            await tick(200);
+            const tb = root.querySelector('bs-toolbar');
+            const collapsed = Array.from(tb.querySelectorAll('[data-bs-toolbar-overflowed]'));
+            expect(collapsed.length).toBeGreaterThan(0);
+            expect(collapsed[collapsed.length - 1].textContent).toBe('Six');
+            const pop = tb.shadowRoot.querySelector('bs-popover');
+            expect(pop.hidden).toBe(false);
+            const items = Array.from(tb.shadowRoot.querySelectorAll('bs-menu-item'));
+            expect(items.map(i => i.textContent)).toEqual(collapsed.map(c => c.textContent));
+            // Fit check: nothing is clipped beyond the bar.
+            const bar = tb.shadowRoot.querySelector('.bs-toolbar');
+            expect(bar.scrollWidth).toBeLessThanOrEqual(bar.clientWidth + 1);
+            let clicked = '';
+            collapsed.forEach(c => c.addEventListener('click', () => (clicked = c.textContent)));
+            items[0].shadowRoot.querySelector('button').click();
+            expect(clicked).toBe(collapsed[0].textContent);
+        });
+        it('re-expands when the bar grows', async () => {
+            const { root } = await render(many('260px'));
+            await tick(200);
+            root.style.width = '900px';
+            await tick(200);
+            const tb = root.querySelector('bs-toolbar');
+            expect(tb.querySelectorAll('[data-bs-toolbar-overflowed]').length).toBe(0);
+        });
+        it('includes the overflow button in arrow navigation', async () => {
+            const { root } = await render(many('260px'));
+            await tick(200);
+            const tb = root.querySelector('bs-toolbar');
+            const items = Array.from(tb.querySelectorAll('.item:not([data-bs-toolbar-overflowed])'));
+            items[0].focus();
+            key(items[0], 'End');
+            const trigger = tb.shadowRoot.querySelector('bs-icon-button');
+            expect(tb.shadowRoot.activeElement).toBe(trigger);
+        });
+        it('does not observe after disconnect', async () => {
+            const { root } = await render(many('260px'));
+            await tick(100);
+            const tb = root.querySelector('bs-toolbar');
+            tb.remove();
+            await tick(50);
+            expect(tb.isConnected).toBe(false);
+        });
+    });
+    it('has no axe violations', async () => {
+        const { root } = await render(basic());
+        await tick();
+        await runAxeCheck(root);
+    });
+    it('has no axe violations with overflow enabled', async () => {
+        const { root } = await render(h("div", { style: { width: '200px' } }, h("bs-toolbar", { label: "Actions", overflow: true }, ['One', 'Two', 'Three', 'Four'].map(t => (h("bs-button", { slot: "left", variant: "subtle" }, t))))));
+        await tick(200);
+        // Known gap in the composed bs-popover (not this component): it puts aria-haspopup/aria-expanded
+        // on a role-less wrapper div, which axe flags as aria-allowed-attr. Everything else must be clean.
+        const results = await axe.run(root);
+        const violations = results.violations
+            .map(v => ({ ...v, nodes: v.nodes.filter(n => !(v.id === 'aria-allowed-attr' && n.html.includes('bs-popover__trigger'))) }))
+            .filter(v => v.nodes.length > 0)
+            .map(v => `${v.id}: ${v.help}`);
+        expect(violations).toEqual([]);
+    });
+});

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

@@ -0,0 +1,82 @@
+/**
+ * @prop --bs-toolbar-bg: Background of the bar. Aliased to --bs-surface-base.
+ * @prop --bs-toolbar-padding: Padding around the controls. Aliased to --bs-spacing-100.
+ * @prop --bs-toolbar-gap: Gap between controls (and between the left and right groups). Aliased to --bs-spacing-100.
+ * @prop --bs-toolbar-radius: Corner radius of the bar. Aliased to --bs-border-radius-100.
+ * @prop --bs-toolbar-border-width: Border width. 0 by default; set it with --bs-toolbar-border-color for a bordered bar.
+ * @prop --bs-toolbar-border-color: Border colour. Aliased to --bs-border-default.
+ */
+:host {
+  display: block;
+
+  --bs-toolbar-bg: var(--bs-surface-base);
+  --bs-toolbar-padding: var(--bs-spacing-100);
+  --bs-toolbar-gap: var(--bs-spacing-100);
+  --bs-toolbar-radius: var(--bs-border-radius-100);
+  --bs-toolbar-border-width: 0px;
+  --bs-toolbar-border-color: var(--bs-border-default);
+}
+
+:host([orientation='vertical']) {
+  display: inline-block;
+}
+
+.bs-toolbar {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-toolbar-gap);
+  width: 100%;
+  min-width: 0;
+  padding: var(--bs-toolbar-padding);
+  border: var(--bs-toolbar-border-width) solid var(--bs-toolbar-border-color);
+  border-radius: var(--bs-toolbar-radius);
+  background: var(--bs-toolbar-bg);
+  color: var(--bs-text-default);
+  font-family: inherit;
+}
+
+.bs-toolbar--vertical {
+  flex-direction: column;
+  align-items: stretch;
+  width: auto;
+}
+
+.bs-toolbar__group {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-toolbar-gap);
+  flex-shrink: 0;
+}
+
+.bs-toolbar--vertical .bs-toolbar__group {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+/* The right group takes the free space and pushes itself to the far end. */
+.bs-toolbar__group--right {
+  margin-inline-start: auto;
+}
+
+.bs-toolbar--vertical .bs-toolbar__group--right {
+  margin-inline-start: 0;
+  margin-block-start: auto;
+}
+
+/* Controls collapsed into the overflow menu. */
+::slotted([data-bs-toolbar-overflowed]) {
+  display: none !important;
+}
+
+.bs-toolbar__overflow {
+  flex-shrink: 0;
+}
+
+.bs-toolbar__overflow[hidden] {
+  display: none;
+}
+
+@media (forced-colors: active) {
+  .bs-toolbar { border: 1px solid CanvasText; }
+}