@brandsync/wc 1.16.0 → 1.18.0

package/dist/collection/components/bs-key-caps/bs-key-caps.js

@@ -0,0 +1,120 @@
+import { h } from "@stencil/core";
+/**
+ * A keyboard shortcut of one to four keys joined by "+", e.g. `Ctrl + K`. Give it a `keys` string
+ * (`"Ctrl+Shift+K"`) or array (`['Ctrl', '+']` for a literal plus key), or slot your own `bs-key`
+ * elements -- for example when a key is an icon.
+ *
+ * ## When to use
+ * - A shortcut hint beside a menu item, button or inside a search field.
+ *
+ * ## When not to use
+ * - Instructions that need prose ("press Enter to submit") -- write a sentence and use a single `bs-key` inline.
+ * - Anything interactive -- keys are static hints.
+ *
+ * @slot - `bs-key` elements. A "+" separator is drawn before every key except the first.
+ * @part container - The group wrapper.
+ * @prop --bs-key-caps-gap - Gap between keys and separators. Aliased to `--bs-spacing-100`.
+ * @prop --bs-key-caps-separator-color - Colour of the "+" separators. Aliased to `--bs-text-muted`.
+ * @prop --bs-key-caps-disabled-opacity - Opacity of the whole shortcut while `disabled`. Defaults to `0.38` (Figma).
+ */
+export class BsKeyCaps {
+    /**
+     * The keys as text. A string is split on `+` (`"Ctrl+K"`); use an array to include a literal
+     * plus key. Ignored when `bs-key` elements are slotted instead. Figma defines one to four keys.
+     */
+    keys;
+    /** Dims the whole shortcut and marks it `aria-disabled`. */
+    disabled = false;
+    /** Accessible name of the shortcut, e.g. "Control plus K". Defaults to the keys joined with " plus ". */
+    label;
+    keyList() {
+        if (Array.isArray(this.keys))
+            return this.keys.filter(k => k !== '');
+        if (typeof this.keys === 'string') {
+            return this.keys
+                .split('+')
+                .map(k => k.trim())
+                .filter(Boolean);
+        }
+        return [];
+    }
+    render() {
+        const keys = this.keyList();
+        const name = this.label ?? (keys.length ? keys.join(' plus ') : undefined);
+        return (h("span", { key: 'a5a71f50df215bafb5225553a3822048470b0df6', part: "container", class: "bs-key-caps", role: "group", "aria-label": name, "aria-disabled": this.disabled ? 'true' : undefined }, keys.map(k => (h("bs-key", { label: k }))), h("slot", { key: '3efb98fca94e15103658c10444000b60665ddd31' })));
+    }
+    static get is() { return "bs-key-caps"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-key-caps.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-key-caps.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "keys": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The keys as text. A string is split on `+` (`\"Ctrl+K\"`); use an array to include a literal\nplus key. Ignored when `bs-key` elements are slotted instead. Figma defines one to four keys."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keys"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dims the whole shortcut and marks it `aria-disabled`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the shortcut, e.g. \"Control plus K\". Defaults to the keys joined with \" plus \"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}

package/dist/collection/components/bs-key-caps/bs-key-caps.stories.js

@@ -0,0 +1,29 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const RETURN_ICON = html `<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5" /><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11" /></svg>`;
+const meta = {
+    title: 'Components/bs-key-caps',
+    parameters: { docs: { description: { component: componentDescription('bs-key-caps') } } },
+    render: args => html `<bs-key-caps keys=${args.keys} ?disabled=${args.disabled}></bs-key-caps>`,
+    argTypes: { keys: { control: 'text' }, disabled: { control: 'boolean' } },
+    args: { keys: 'Ctrl+K', disabled: false },
+};
+export default meta;
+export const Default = {};
+export const OneKey = { args: { keys: 'Esc' } };
+export const ThreeKeys = { args: { keys: 'Ctrl+Shift+K' } };
+export const FourKeys = { args: { keys: 'Ctrl+Alt+Shift+Del' } };
+export const Disabled = { args: { keys: 'Ctrl+K', disabled: true } };
+export const WithIconKey = {
+    name: 'With an icon key (slotted)',
+    render: () => html `
+    <bs-key-caps label="Control plus Return">
+      <bs-key label="Ctrl"></bs-key>
+      <bs-key>${RETURN_ICON}</bs-key>
+    </bs-key-caps>
+  `,
+};
+export const LiteralPlusKey = {
+    name: 'Literal "+" key (array)',
+    render: () => html `<bs-key-caps .keys=${['Ctrl', '+']}></bs-key-caps>`,
+};

package/dist/collection/components/bs-keyboard-shortcuts/bs-keyboard-shortcuts.cmp.test.js

@@ -0,0 +1,194 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { runAxeCheck } from "../../test/helpers/conventions";
+import { SHORTCUT_GROUPS, SHORTCUT_GROUPS_SINGLE_KEY_OFF, FILTERED_GROUPS } from "./bs-keyboard-shortcuts.stories";
+const sr = (h) => h.shadowRoot;
+const q = (h, s) => sr(h).querySelector(s);
+const qa = (h, s) => Array.from(sr(h).querySelectorAll(s));
+const titles = (h) => qa(h, '[part="group-title"]').map(t => t.textContent);
+const rows = (h) => qa(h, 'bs-shortcut-row');
+const rowCaps = (r) => r.shadowRoot.querySelector('bs-key-caps');
+const capsOpacity = (r) => getComputedStyle(rowCaps(r).shadowRoot.querySelector('[part="container"]')).opacity;
+const actionOf = (r) => r.action;
+const make = async (props = {}) => {
+    const r = await render(h("bs-keyboard-shortcuts", null));
+    const el = r.root;
+    el.groups = SHORTCUT_GROUPS;
+    Object.assign(el, props);
+    await r.waitForChanges();
+    return { ...r, el };
+};
+describe('bs-keyboard-shortcuts', () => {
+    it('has the Figma geometry and two columns', async () => {
+        const { el } = await make();
+        const card = q(el, '[part="container"]');
+        expect(Math.round(el.getBoundingClientRect().width)).toBe(720);
+        const body = card.shadowRoot.querySelector('.bs-card__content');
+        const cs = getComputedStyle(body);
+        expect(cs.paddingLeft).toBe('16px');
+        expect(getComputedStyle(card.shadowRoot.querySelector('.bs-card')).borderRadius).toBe('12px');
+        const groups = q(el, '[part="groups"]');
+        expect(getComputedStyle(groups).columnGap).toBe('48px');
+        const cols = qa(el, '.bs-keyboard-shortcuts__column');
+        expect(cols.length).toBe(2);
+        expect(Array.from(cols[0].querySelectorAll('[part="group-title"]')).map(t => t.textContent)).toEqual(['General', 'Navigation']);
+        expect(Array.from(cols[1].querySelectorAll('[part="group-title"]')).map(t => t.textContent)).toEqual(['Table', 'Editing']);
+        const row = rows(el)[0];
+        expect(Math.round(row.getBoundingClientRect().width)).toBe(320);
+    });
+    it('splits groups by the greedy rule', async () => {
+        const mk = (...n) => n.map((c, i) => ({ title: `G${i}`, shortcuts: Array.from({ length: c }, (_, j) => ({ action: `a${i}${j}`, keys: 'X' })) }));
+        const { el, waitForChanges } = await make();
+        el.groups = mk(5, 1, 1, 1);
+        await waitForChanges();
+        expect(qa(el, '.bs-keyboard-shortcuts__column').map(c => c.querySelectorAll('[part="group"]').length)).toEqual([1, 3]);
+        el.groups = mk(2, 2);
+        await waitForChanges();
+        expect(qa(el, '.bs-keyboard-shortcuts__column').map(c => c.querySelectorAll('[part="group"]').length)).toEqual([1, 1]);
+        el.groups = mk(3);
+        await waitForChanges();
+        expect(qa(el, '.bs-keyboard-shortcuts__column').length).toBe(1);
+    });
+    it('filters by action or keys text, keeps titles of groups with hits, and drops empty groups', async () => {
+        const { el, waitForChanges } = await make();
+        el.query = 'save';
+        await waitForChanges();
+        expect(titles(el)).toEqual(['Editing']);
+        expect(rows(el).map(actionOf)).toEqual(['Save']);
+        el.query = ' CTRL+Z ';
+        await waitForChanges();
+        expect(rows(el).map(actionOf)).toEqual(['Undo']);
+        el.query = 'go to';
+        await waitForChanges();
+        expect(titles(el)).toEqual(['Navigation']);
+        el.query = '';
+        await waitForChanges();
+        expect(rows(el).length).toBe(13);
+    });
+    it('shows a status line when nothing matches', async () => {
+        const { el, waitForChanges } = await make({ query: 'zzz' });
+        await waitForChanges();
+        const empty = q(el, '[part="empty"]');
+        expect(empty.textContent).toBe('No shortcuts match');
+        expect(empty).toEqualAttribute('role', 'status');
+        expect(rows(el).length).toBe(0);
+        expect(q(el, '[aria-live="polite"]').textContent).toBe('0 shortcuts');
+    });
+    it('announces the result count', async () => {
+        const { el } = await make();
+        expect(q(el, '[aria-live="polite"]').textContent).toBe('13 shortcuts');
+    });
+    it('with single-key off dims exactly the single-key rows', async () => {
+        const { el, waitForChanges } = await make({ singleKeyEnabled: false });
+        await waitForChanges();
+        const dimmed = rows(el).filter(r => r.disabled).map(actionOf);
+        expect(dimmed.sort()).toEqual(['New order', 'Next row', 'Previous row', 'Show shortcuts'].sort());
+        const r = rows(el).find(x => actionOf(x) === 'Next row');
+        expect(capsOpacity(r)).toBe('0.38');
+        const normal = rows(el).find(x => actionOf(x) === 'Save');
+        expect(capsOpacity(normal)).toBe('1');
+        expect(getComputedStyle(r.shadowRoot.querySelector('[part="container"]')).color).not.toBe(getComputedStyle(normal.shadowRoot.querySelector('[part="container"]')).color);
+    });
+    it('honours an explicit singleKey and the disabled flag', async () => {
+        const { el, waitForChanges } = await make({ singleKeyEnabled: false, groups: SHORTCUT_GROUPS_SINGLE_KEY_OFF });
+        await waitForChanges();
+        const dimmed = rows(el).filter(r => r.disabled).map(actionOf);
+        expect(dimmed).toContain('Close dialog');
+        expect(dimmed).not.toContain('Select row');
+        el.singleKeyEnabled = true;
+        el.groups = [{ title: 'T', shortcuts: [{ action: 'Off', keys: 'Ctrl+K', disabled: true }, { action: 'On', keys: 'J', singleKey: false }] }];
+        await waitForChanges();
+        expect(rows(el).map(r => r.disabled)).toEqual([true, false]);
+    });
+    it('filtered + single-key off keeps the Figma frame', async () => {
+        const { el, waitForChanges } = await make({ groups: FILTERED_GROUPS, query: 'save', singleKeyEnabled: false });
+        await waitForChanges();
+        expect(rows(el).map(r => r.disabled)).toEqual([false, false, true]);
+    });
+    it('sets list semantics', async () => {
+        const { el } = await make();
+        const g = qa(el, '[part="group"]')[0];
+        const title = g.querySelector('[part="group-title"]');
+        expect(g).toEqualAttribute('role', 'group');
+        expect(g).toEqualAttribute('aria-labelledby', title.id);
+        expect(g.querySelector('[role="list"]')).not.toBeNull();
+        expect(rows(el)[0].shadowRoot.querySelector('[part="container"]')).toEqualAttribute('role', 'listitem');
+    });
+    it('emits bsClose from the button and Escape', async () => {
+        const { el } = await make();
+        let n = 0;
+        el.addEventListener('bsClose', () => n++);
+        q(el, '[part="close"]').click();
+        expect(n).toBe(1);
+        expect(q(el, '[part="close"]')).toEqualAttribute('aria-label', 'Close');
+        q(el, '[part="search"]').dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true }));
+        expect(n).toBe(2);
+    });
+    it('syncs query and emits bsQueryChange', async () => {
+        const { el, waitForChanges } = await make();
+        const seen = [];
+        el.addEventListener('bsQueryChange', e => seen.push(e.detail));
+        const input = q(el, '[part="search"]');
+        input.dispatchEvent(new CustomEvent('bsInput', { detail: 'undo', bubbles: true }));
+        await waitForChanges();
+        expect(seen).toEqual(['undo']);
+        expect(el.query).toBe('undo');
+        expect(rows(el).map(actionOf)).toEqual(['Undo']);
+    });
+    it('emits bsSingleKeyChange from the switch', async () => {
+        const { el, waitForChanges } = await make();
+        let v;
+        el.addEventListener('bsSingleKeyChange', e => (v = e.detail));
+        q(el, 'bs-switch').dispatchEvent(new CustomEvent('bsChange', { detail: false }));
+        await waitForChanges();
+        expect(v).toBe(false);
+        expect(el.singleKeyEnabled).toBe(false);
+    });
+    it('hides the switch and the footer via props', async () => {
+        const { el, waitForChanges } = await make();
+        expect(q(el, '[part="switch"]')).not.toBeNull();
+        expect(q(el, '[part="footer"]').textContent).toContain('Press');
+        Object.assign(el, { showSingleKeySwitch: false, showFooterHint: false });
+        await waitForChanges();
+        expect(q(el, '[part="switch"]')).toBeNull();
+        expect(q(el, '[part="footer"]')).toBeNull();
+    });
+    it('uses default texts', async () => {
+        const { el } = await make();
+        expect(q(el, '[part="heading"]').textContent).toBe('Keyboard shortcuts');
+        expect(q(el, '.bs-keyboard-shortcuts__switch-title').textContent).toBe('Single-key shortcuts');
+        expect(getComputedStyle(q(el, '[part="heading"]')).fontSize).toBe('24px');
+    });
+    it('uses the light and dark text colour from tokens', async () => {
+        const { el, waitForChanges } = await make();
+        const light = getComputedStyle(q(el, '[part="heading"]')).color;
+        document.documentElement.setAttribute('data-theme', 'dark');
+        try {
+            await waitForChanges();
+            await new Promise(r => setTimeout(r, 100));
+            expect(getComputedStyle(q(el, '[part="heading"]')).color).not.toBe(light);
+        }
+        finally {
+            document.documentElement.removeAttribute('data-theme');
+        }
+    });
+    it('passes axe', async () => {
+        const { el } = await make();
+        await runAxeCheck(el);
+    });
+    it('uses the Figma level-4 shadow (0 8px 8px) and strengthens it from 12% to 25% black in dark mode', async () => {
+        const shadowOf = async (dark) => {
+            if (dark)
+                document.documentElement.setAttribute('data-theme', 'dark');
+            try {
+                const { el } = await make();
+                const card = q(el, '[part="container"]');
+                return getComputedStyle(card.shadowRoot.querySelector('.bs-card')).boxShadow;
+            }
+            finally {
+                document.documentElement.removeAttribute('data-theme');
+            }
+        };
+        expect(await shadowOf(false)).toBe('rgba(0, 0, 0, 0.12) 0px 8px 8px 0px');
+        expect(await shadowOf(true)).toBe('rgba(0, 0, 0, 0.25) 0px 8px 8px 0px');
+    });
+});

package/dist/collection/components/bs-keyboard-shortcuts/bs-keyboard-shortcuts.css

@@ -0,0 +1,138 @@
+:host {
+  display: block;
+  width: var(--bs-keyboard-shortcuts-width);
+  min-width: var(--bs-keyboard-shortcuts-width);
+  box-sizing: border-box;
+  --bs-keyboard-shortcuts-width: 720px;
+  --bs-keyboard-shortcuts-bg: var(--bs-surface-base);
+  --bs-keyboard-shortcuts-radius: var(--bs-border-radius-150);
+  --bs-keyboard-shortcuts-padding: var(--bs-spacing-200);
+  --bs-keyboard-shortcuts-gap: var(--bs-spacing-200);
+  /* Figma "elevation/level 4": 0 8px 8px in --bs-elevation-higher, which is 12% black in light mode and
+     25% black in dark mode, so the shadow strengthens on dark surfaces automatically. */
+  --bs-keyboard-shortcuts-shadow: 0 var(--bs-shadow-position-100) var(--bs-shadow-blur-100) 0 var(--bs-elevation-higher);
+  --bs-keyboard-shortcuts-column-gap: var(--bs-spacing-600);
+  --bs-keyboard-shortcuts-color: var(--bs-text-default);
+  --bs-keyboard-shortcuts-color-secondary: var(--bs-text-secondary);
+}
+
+.bs-keyboard-shortcuts {
+  display: block;
+  --bs-card-bg: var(--bs-keyboard-shortcuts-bg);
+  --bs-card-radius: var(--bs-keyboard-shortcuts-radius);
+  --bs-card-padding: var(--bs-keyboard-shortcuts-padding);
+  --bs-card-shadow: var(--bs-keyboard-shortcuts-shadow);
+  --bs-card-overflow: visible;
+  color: var(--bs-keyboard-shortcuts-color);
+}
+
+.bs-keyboard-shortcuts__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-keyboard-shortcuts-gap);
+}
+
+.bs-keyboard-shortcuts__head {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-keyboard-shortcuts__icon {
+  flex-shrink: 0;
+  color: var(--bs-keyboard-shortcuts-color);
+}
+
+.bs-keyboard-shortcuts__heading {
+  flex: 1;
+  margin: 0;
+  color: var(--bs-keyboard-shortcuts-color);
+  font-size: var(--bs-font-size-2xl);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: calc(var(--bs-line-height-heading-h4) * 1px);
+}
+
+.bs-keyboard-shortcuts__switch {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-200);
+}
+
+.bs-keyboard-shortcuts__switch-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-25);
+}
+
+.bs-keyboard-shortcuts__switch-title {
+  color: var(--bs-keyboard-shortcuts-color);
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: calc(var(--bs-line-height-body-sm) * 1px);
+}
+
+.bs-keyboard-shortcuts__switch-caption {
+  color: var(--bs-keyboard-shortcuts-color-secondary);
+  font-size: var(--bs-font-size-xs);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+}
+
+.bs-keyboard-shortcuts__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.bs-keyboard-shortcuts__groups {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: var(--bs-keyboard-shortcuts-column-gap);
+  align-items: start;
+}
+
+.bs-keyboard-shortcuts__column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-200);
+  min-width: 0;
+}
+
+.bs-keyboard-shortcuts__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-25);
+}
+
+.bs-keyboard-shortcuts__group-title {
+  color: var(--bs-keyboard-shortcuts-color-secondary);
+  font-size: var(--bs-font-size-xs);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+}
+
+.bs-keyboard-shortcuts__rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-25);
+}
+
+.bs-keyboard-shortcuts__empty {
+  margin: 0;
+  color: var(--bs-keyboard-shortcuts-color-secondary);
+  font-size: var(--bs-font-size-sm);
+  line-height: calc(var(--bs-line-height-body-sm) * 1px);
+}
+
+.bs-keyboard-shortcuts__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-75);
+  color: var(--bs-keyboard-shortcuts-color-secondary);
+  font-size: var(--bs-font-size-xs);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+  white-space: nowrap;
+}