@brandsync/wc 1.18.0 → 1.20.0

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

@@ -0,0 +1,125 @@
+/**
+ * @prop --bs-toggle-button-height: Button height. Aliased to --bs-spacing-550 (44px).
+ * @prop --bs-toggle-button-padding-x: Horizontal padding. Aliased to --bs-spacing-200.
+ * @prop --bs-toggle-button-gap: Gap between icon and label. Aliased to --bs-spacing-100.
+ * @prop --bs-toggle-button-radius: Corner radius (a group squares the inner corners). Aliased to --bs-border-radius-100.
+ * @prop --bs-toggle-button-border-width: Border width. Aliased to --bs-border-width-thin.
+ * @prop --bs-toggle-button-border: Border color. Aliased to --bs-border-neutral-container.
+ * @prop --bs-toggle-button-border-pressed: Border color when pressed. Aliased to --bs-border-primary.
+ * @prop --bs-toggle-button-bg: Background, default. Aliased to --bs-surface-base.
+ * @prop --bs-toggle-button-bg-hover: Background on hover. Aliased to --bs-color-neutral-container-hover.
+ * @prop --bs-toggle-button-bg-pressed: Background when pressed. Aliased to --bs-color-primary-container.
+ * @prop --bs-toggle-button-bg-pressed-hover: Background when pressed and hovered. Aliased to --bs-color-primary-container-hover.
+ * @prop --bs-toggle-button-bg-disabled: Background when disabled. Aliased to --bs-surface-action-disabled.
+ * @prop --bs-toggle-button-color: Label/icon color. Aliased to --bs-text-default.
+ * @prop --bs-toggle-button-color-pressed: Label/icon color when pressed. Aliased to --bs-text-action.
+ * @prop --bs-toggle-button-color-disabled: Label/icon color when disabled. Aliased to --bs-text-on-disabled.
+ * @prop --bs-toggle-button-focus-ring-color: Keyboard focus ring. Aliased to --bs-border-neutral-focus.
+ */
+:host {
+  display: inline-block;
+  position: relative;
+
+  --bs-toggle-button-height: var(--bs-spacing-550);
+  --bs-toggle-button-padding-x: var(--bs-spacing-200);
+  --bs-toggle-button-gap: var(--bs-spacing-100);
+  --bs-toggle-button-radius: var(--bs-border-radius-100);
+  --bs-toggle-button-border-width: var(--bs-border-width-thin);
+  --bs-toggle-button-border: var(--bs-border-neutral-container);
+  --bs-toggle-button-border-pressed: var(--bs-border-primary);
+  --bs-toggle-button-bg: var(--bs-surface-base);
+  --bs-toggle-button-bg-hover: var(--bs-color-neutral-container-hover);
+  --bs-toggle-button-bg-pressed: var(--bs-color-primary-container);
+  --bs-toggle-button-bg-pressed-hover: var(--bs-color-primary-container-hover);
+  --bs-toggle-button-bg-disabled: var(--bs-surface-action-disabled);
+  --bs-toggle-button-color: var(--bs-text-default);
+  --bs-toggle-button-color-pressed: var(--bs-text-action);
+  --bs-toggle-button-color-disabled: var(--bs-text-on-disabled);
+  --bs-toggle-button-focus-ring-color: var(--bs-border-neutral-focus);
+}
+
+:host(:hover),
+:host(:focus-within) {
+  z-index: 1;
+}
+
+.bs-toggle-button {
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bs-toggle-button-gap);
+  height: var(--bs-toggle-button-height);
+  min-width: var(--bs-toggle-button-height);
+  padding: 0 var(--bs-toggle-button-padding-x);
+  border: var(--bs-toggle-button-border-width) solid var(--bs-toggle-button-border);
+  border-radius: var(--bs-toggle-button-radius);
+  background: var(--bs-toggle-button-bg);
+  color: var(--bs-toggle-button-color);
+  font-family: inherit;
+  font-size: var(--bs-font-size-md);
+  font-weight: var(--bs-font-weight-medium);
+  cursor: pointer;
+}
+
+.bs-toggle-button--icon-only {
+  padding: 0;
+}
+
+.bs-toggle-button:hover:not(:disabled) {
+  background: var(--bs-toggle-button-bg-hover);
+}
+
+.bs-toggle-button--pressed {
+  background: var(--bs-toggle-button-bg-pressed);
+  border-color: var(--bs-toggle-button-border-pressed);
+  color: var(--bs-toggle-button-color-pressed);
+}
+
+.bs-toggle-button--pressed:hover:not(:disabled) {
+  background: var(--bs-toggle-button-bg-pressed-hover);
+}
+
+.bs-toggle-button:focus-visible {
+  outline: 2px solid var(--bs-toggle-button-focus-ring-color);
+  outline-offset: 2px;
+}
+
+.bs-toggle-button:disabled {
+  background: var(--bs-toggle-button-bg-disabled);
+  color: var(--bs-toggle-button-color-disabled);
+  cursor: not-allowed;
+}
+
+.bs-toggle-button__icon {
+  display: none;
+  width: var(--bs-spacing-300);
+  height: var(--bs-spacing-300);
+}
+
+.bs-toggle-button__icon ::slotted(*) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* The icon wrapper only takes space once an icon is slotted. */
+.bs-toggle-button__icon--has-content {
+  display: inline-flex;
+}
+
+.bs-toggle-button__label {
+  display: inline-flex;
+}
+
+.bs-toggle-button--icon-only .bs-toggle-button__label {
+  display: none;
+}
+
+@media (forced-colors: active) {
+  .bs-toggle-button { border-color: ButtonText; }
+  .bs-toggle-button--pressed { background: Highlight; color: HighlightText; }
+  .bs-toggle-button:disabled { border-color: GrayText; color: GrayText; }
+}

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

@@ -0,0 +1,234 @@
+import { h } from "@stencil/core";
+/**
+ * A button that is either pressed or not. Standalone it is a toggle (`aria-pressed`); inside a
+ * `bs-toggle-button-group` the group sets its `mode` (`toggle` for multiple choice, `radio` for
+ * single choice, which switches the semantics to `role="radio"` + `aria-checked`).
+ *
+ * Built from: hand-built `<button>` (the segment shape and pressed state differ from `bs-button`) plus
+ * `bs-ripple`.
+ *
+ * ## When to use
+ * - A two-state option such as "Bold", or a segment of a `bs-toggle-button-group`.
+ *
+ * ## When not to use
+ * - Triggering an action (use `bs-button`) or an on/off setting that applies immediately (use `bs-switch`).
+ *
+ * @slot icon - Optional leading icon (24x24). With no default-slot text the button is icon-only and
+ * needs `ariaLabel`.
+ * @slot - Default slot: the label text.
+ * @part button - The native button.
+ * @part icon - The icon wrapper.
+ * @part label - The label wrapper.
+ * @part ripple - The press-ripple (a `bs-ripple`).
+ */
+// Note: CSS Custom Properties (--bs-toggle-button-*) are documented via @prop comments in the css file.
+export class BsToggleButton {
+    el;
+    /** Identifies the segment inside a group's `value`/`values`. */
+    value;
+    /** Whether the button is pressed/selected. */
+    pressed = false;
+    /** Disables the button. */
+    disabled = false;
+    /** Semantics. Normally set by the parent group. */
+    mode = 'toggle';
+    /** Roving tabindex, set by the parent group (`false` = `tabindex="-1"`). Standalone: always tabbable. */
+    tabbable = true;
+    /** Accessible name; required for an icon-only button. */
+    ariaLabel = null;
+    /** Emitted on user interaction with the new `pressed` value. A radio-mode button that is already
+     * pressed does not emit. Bubbles, so a group can coordinate its segments. */
+    bsChange;
+    hasLabel = false;
+    hasIcon = false;
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onLabelSlotchange = (ev) => {
+        this.hasLabel = ev.target.assignedNodes().some(n => n.nodeType === 1 || !!n.textContent?.trim());
+    };
+    onClick = () => {
+        if (this.disabled)
+            return;
+        if (this.mode === 'radio') {
+            if (this.pressed)
+                return;
+            this.pressed = true;
+        }
+        else {
+            this.pressed = !this.pressed;
+        }
+        this.bsChange.emit(this.pressed);
+    };
+    render() {
+        const radio = this.mode === 'radio';
+        return (h("button", { key: 'ec490445b357966720ae68f8f1e748d650b4028f', type: "button", part: "button", class: `bs-toggle-button ${this.pressed ? 'bs-toggle-button--pressed' : ''} ${this.hasLabel ? '' : 'bs-toggle-button--icon-only'}`, role: radio ? 'radio' : undefined, "aria-pressed": radio ? undefined : String(this.pressed), "aria-checked": radio ? String(this.pressed) : undefined, "aria-label": this.ariaLabel, disabled: this.disabled, tabindex: this.tabbable ? undefined : -1, onClick: this.onClick }, h("bs-ripple", { key: 'd774dd4ba709a7056a66148ce10a530198a6880b', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '2379755618752fedb3c877a10513f2c62f8cbb9c', part: "icon", class: `bs-toggle-button__icon ${this.hasIcon ? 'bs-toggle-button__icon--has-content' : ''}` }, h("slot", { key: '15ad567b32ede0f8aa8bc00f3aebf232044cb2fb', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'd103bd76433e1aa4876380b6fb24061fb37b1643', part: "label", class: "bs-toggle-button__label" }, h("slot", { key: '83257a1e5543cc7e3ce490a52617c7d599605cec', onSlotchange: this.onLabelSlotchange }))));
+    }
+    static get is() { return "bs-toggle-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-toggle-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-toggle-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifies the segment inside a group's `value`/`values`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "pressed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is pressed/selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "pressed",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsToggleButtonMode",
+                    "resolved": "\"radio\" | \"toggle\"",
+                    "references": {
+                        "BsToggleButtonMode": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-toggle-button/bs-toggle-button.tsx",
+                            "id": "src/components/bs-toggle-button/bs-toggle-button.tsx::BsToggleButtonMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantics. Normally set by the parent group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mode",
+                "defaultValue": "'toggle'"
+            },
+            "tabbable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Roving tabindex, set by the parent group (`false` = `tabindex=\"-1\"`). Standalone: always tabbable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tabbable",
+                "defaultValue": "true"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name; required for an icon-only button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasLabel": {},
+            "hasIcon": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on user interaction with the new `pressed` value. A radio-mode button that is already\npressed does not emit. Bubbles, so a group can coordinate its segments."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,22 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const gridIcon = html `<svg slot="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z" stroke="currentColor" stroke-width="1.5"/></svg>`;
+const meta = {
+    title: 'Components/bs-toggle-button',
+    parameters: { docs: { description: { component: componentDescription('bs-toggle-button') } } },
+    render: args => html `<bs-toggle-button ?pressed=${args.pressed} ?disabled=${args.disabled}>${args.label}</bs-toggle-button>`,
+    argTypes: {
+        pressed: { control: 'boolean', description: propDescription('bs-toggle-button', 'pressed') },
+        disabled: { control: 'boolean', description: propDescription('bs-toggle-button', 'disabled') },
+        label: { control: 'text' },
+    },
+    args: { pressed: false, disabled: false, label: 'Bold' },
+};
+export default meta;
+export const Default = {};
+export const Pressed = { args: { pressed: true } };
+export const Disabled = { args: { disabled: true } };
+export const IconOnly = {
+    name: 'Icon only',
+    render: () => html `<bs-toggle-button ariaLabel="Grid view">${gridIcon}</bs-toggle-button>`,
+};

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

@@ -0,0 +1,69 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const btn = (root, i) => root.querySelectorAll('bs-toggle-button')[i].shadowRoot.querySelector('button');
+describe('bs-toggle-button-group', () => {
+    it('single choice: radiogroup, radio semantics, roving tabindex, exclusive selection', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-toggle-button-group", { ariaLabel: "View", value: "b" }, h("bs-toggle-button", { value: "a" }, "A"), h("bs-toggle-button", { value: "b" }, "B"), h("bs-toggle-button", { value: "c" }, "C")));
+        await waitForChanges();
+        const spy = spyOnEvent('bsChange');
+        expect(root.shadowRoot.querySelector('[role="radiogroup"]').getAttribute('aria-label')).toBe('View');
+        expect(btn(root, 1).getAttribute('role')).toBe('radio');
+        expect(btn(root, 1).getAttribute('aria-checked')).toBe('true');
+        expect(btn(root, 0).getAttribute('tabindex')).toBe('-1');
+        expect(btn(root, 1).hasAttribute('tabindex')).toBe(false);
+        btn(root, 2).click();
+        await waitForChanges();
+        expect(root.value).toBe('c');
+        expect(btn(root, 1).getAttribute('aria-checked')).toBe('false');
+        expect(btn(root, 2).getAttribute('aria-checked')).toBe('true');
+        expect(spy).toHaveReceivedEventTimes(1);
+        expect(spy).toHaveReceivedEventDetail('c');
+    });
+    it('single choice: arrow keys move focus and selection, wrapping and skipping disabled', async () => {
+        const { root, waitForChanges } = await render(h("bs-toggle-button-group", { ariaLabel: "View", value: "a" }, h("bs-toggle-button", { value: "a" }, "A"), h("bs-toggle-button", { value: "b", disabled: true }, "B"), h("bs-toggle-button", { value: "c" }, "C")));
+        await waitForChanges();
+        const key = async (k, from) => {
+            btn(root, from).dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, composed: true, cancelable: true }));
+            await waitForChanges();
+        };
+        await key('ArrowRight', 0);
+        expect(root.value).toBe('c');
+        await key('ArrowRight', 2);
+        expect(root.value).toBe('a');
+        await key('End', 0);
+        expect(root.value).toBe('c');
+        await key('Home', 2);
+        expect(root.value).toBe('a');
+    });
+    it('multiple choice: group role, aria-pressed toggles, values array, arrows only move focus', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-toggle-button-group", { ariaLabel: "Format", multiple: true }, h("bs-toggle-button", { value: "b" }, "Bold"), h("bs-toggle-button", { value: "i" }, "Italic")));
+        await waitForChanges();
+        const spy = spyOnEvent('bsChange');
+        expect(root.shadowRoot.querySelector('[role="group"]')).not.toBeNull();
+        expect(btn(root, 0).getAttribute('aria-pressed')).toBe('false');
+        btn(root, 0).click();
+        btn(root, 1).click();
+        await waitForChanges();
+        expect(root.values).toEqual(['b', 'i']);
+        expect(spy).toHaveReceivedEventDetail(['b', 'i']);
+        btn(root, 0).click();
+        await waitForChanges();
+        expect(root.values).toEqual(['i']);
+        btn(root, 0).dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true, cancelable: true }));
+        await waitForChanges();
+        expect(root.values).toEqual(['i']);
+    });
+    it('does not leak segment bsChange events as boolean to group listeners', async () => {
+        const { root, waitForChanges } = await render(h("bs-toggle-button-group", { ariaLabel: "V", value: "a" }, h("bs-toggle-button", { value: "a" }, "A"), h("bs-toggle-button", { value: "b" }, "B")));
+        await waitForChanges();
+        const details = [];
+        root.addEventListener('bsChange', (e) => details.push(e.detail));
+        btn(root, 1).click();
+        await waitForChanges();
+        expect(details).toEqual(['b']);
+    });
+    it('disabled group disables segments', async () => {
+        const { root, waitForChanges } = await render(h("bs-toggle-button-group", { ariaLabel: "V", value: "a", disabled: true }, h("bs-toggle-button", { value: "a" }, "A")));
+        await waitForChanges();
+        expect(btn(root, 0).disabled).toBe(true);
+    });
+});

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

@@ -0,0 +1,43 @@
+/**
+ * Segment colours, sizes and states are the `--bs-toggle-button-*` custom properties on
+ * `bs-toggle-button`; set them on the group to restyle every segment.
+ * @prop --bs-toggle-button-group-radius: Outer corner radius of the segmented control. Aliased to --bs-border-radius-100.
+ */
+:host {
+  display: inline-block;
+
+  --bs-toggle-button-group-radius: var(--bs-border-radius-100);
+}
+
+.bs-toggle-button-group {
+  display: inline-flex;
+}
+
+/* Segments share borders (overlap by one border width) and only the outer corners are rounded. */
+::slotted(bs-toggle-button) {
+  --bs-toggle-button-radius: 0;
+}
+
+::slotted(bs-toggle-button:not(:first-child)) {
+  margin-inline-start: calc(-1 * var(--bs-toggle-button-border-width, 1px));
+}
+
+::slotted(bs-toggle-button:first-child) {
+  --bs-toggle-button-radius: var(--bs-toggle-button-group-radius) 0 0 var(--bs-toggle-button-group-radius);
+}
+
+::slotted(bs-toggle-button:last-child) {
+  --bs-toggle-button-radius: 0 var(--bs-toggle-button-group-radius) var(--bs-toggle-button-group-radius) 0;
+}
+
+::slotted(bs-toggle-button:first-child:last-child) {
+  --bs-toggle-button-radius: var(--bs-toggle-button-group-radius);
+}
+
+:host(:dir(rtl)) ::slotted(bs-toggle-button:first-child:not(:last-child)) {
+  --bs-toggle-button-radius: 0 var(--bs-toggle-button-group-radius) var(--bs-toggle-button-group-radius) 0;
+}
+
+:host(:dir(rtl)) ::slotted(bs-toggle-button:last-child:not(:first-child)) {
+  --bs-toggle-button-radius: var(--bs-toggle-button-group-radius) 0 0 var(--bs-toggle-button-group-radius);
+}