@brandsync/wc 1.12.1 → 1.14.0

package/dist/collection/components/bs-side-panel/bs-side-panel.js

@@ -0,0 +1,325 @@
+import { h } from "@stencil/core";
+let panelId = 0;
+/**
+ * A generic slide-in panel (drawer) anchored to the start or end edge, for history, filters, FAQ
+ * and similar secondary content. Closes via its close button or Escape and emits `bsClose`.
+ *
+ * Composed from `bs-icon-button` (close button).
+ *
+ * While open, Tab/Shift+Tab are trapped in the panel; with `overlay`, the rest of the page is made `inert`.
+ *
+ * ## When to use
+ * - Secondary content that sits beside the page without leaving it.
+ *
+ * ## When not to use
+ * - A blocking confirmation (use `bs-dialog`).
+ *
+ * @slot - Default slot: the panel body.
+ * @slot header-actions - Extra actions shown in the header next to the close button.
+ * @slot footer - Optional footer area (e.g. apply/reset buttons).
+ * @part overlay - The backdrop (only when `overlay` is set).
+ * @part panel - The panel surface (role="dialog").
+ * @part header - The header row.
+ * @part heading - The heading text.
+ * @part body - The scrollable body.
+ * @part footer - The footer wrapper.
+ * @prop --bs-side-panel-bg - Panel background. Aliased to `--bs-surface-raised`.
+ * @prop --bs-side-panel-width - Panel width. Aliased to `calc(var(--bs-scale-1600) * 3)`.
+ * @prop --bs-side-panel-padding - Header/body/footer padding. Aliased to `--bs-spacing-200`.
+ * @prop --bs-side-panel-shadow - Panel shadow. Aliased to `--bs-shadow-md`.
+ * @prop --bs-side-panel-overlay-bg - Backdrop color. Aliased to `--bs-surface-overlay`.
+ * @prop --bs-side-panel-color - Text color. Aliased to `--bs-text-default`.
+ * @prop --bs-side-panel-z-index - Stacking order. Aliased to `--bs-z-index-modal`.
+ */
+export class BsSidePanel {
+    el;
+    /** Whether the panel is visible. */
+    open = false;
+    /** Panel title; also its accessible name. */
+    heading = '';
+    /** Edge the panel is anchored to. */
+    side = 'end';
+    /** Accessible label of the close button. */
+    closeLabel = 'Close';
+    /** Shows a backdrop behind the panel; clicking it closes the panel. */
+    overlay = false;
+    /** Emitted when the panel requests to close (close button, Escape, overlay click). */
+    bsClose;
+    headingId = `bs-side-panel-heading-${++panelId}`;
+    previouslyFocused = null;
+    panelEl;
+    /** Elements we set `inert` on (so we only undo our own changes). */
+    inertified = [];
+    onOpenChange(next) {
+        if (next) {
+            this.previouslyFocused = document.activeElement ?? null;
+            this.applyInert();
+        }
+        else {
+            this.restoreInert();
+            this.previouslyFocused?.focus?.();
+            this.previouslyFocused = null;
+        }
+    }
+    onOverlayChange() {
+        if (!this.open)
+            return;
+        this.restoreInert();
+        this.applyInert();
+    }
+    connectedCallback() {
+        if (this.open)
+            this.applyInert();
+    }
+    disconnectedCallback() {
+        this.restoreInert();
+    }
+    /** Marks everything outside the panel as inert (modal overlay only). */
+    applyInert() {
+        if (!this.overlay || this.inertified.length)
+            return;
+        let node = this.el;
+        while (node && node !== document.body) {
+            const parent = node.parentElement;
+            if (!parent)
+                break;
+            Array.from(parent.children).forEach(sib => {
+                if (sib === node || !(sib instanceof HTMLElement) || sib.inert)
+                    return;
+                sib.inert = true;
+                this.inertified.push(sib);
+            });
+            node = parent;
+        }
+    }
+    restoreInert() {
+        this.inertified.forEach(el => (el.inert = false));
+        this.inertified = [];
+    }
+    getFocusables() {
+        const sel = 'a[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),bs-icon-button,[contenteditable="true"]';
+        const out = [];
+        const visit = (root) => {
+            Array.from(root.children).forEach(child => {
+                if (child instanceof HTMLSlotElement) {
+                    const assigned = child.assignedElements({ flatten: true });
+                    assigned.forEach(a => consider(a));
+                }
+                else
+                    consider(child);
+            });
+        };
+        const consider = (el) => {
+            if (!(el instanceof HTMLElement) || el.hidden || el.inert)
+                return;
+            if (el.matches(sel) && el.getAttribute('tabindex') !== '-1') {
+                // A custom element that delegates focus is itself the tab stop.
+                out.push(el);
+                return;
+            }
+            visit(el.shadowRoot ?? el);
+        };
+        if (this.panelEl)
+            visit(this.panelEl);
+        return out;
+    }
+    trapTab(ev) {
+        const items = this.getFocusables();
+        if (!items.length) {
+            ev.preventDefault();
+            this.panelEl?.focus();
+            return;
+        }
+        const first = items[0];
+        const last = items[items.length - 1];
+        const path = ev.composedPath();
+        const active = items.find(i => path.includes(i));
+        const atPanel = path[0] === this.panelEl;
+        if (ev.shiftKey && (atPanel || active === first || !active)) {
+            ev.preventDefault();
+            last.focus();
+        }
+        else if (!ev.shiftKey && (active === last || (!active && !atPanel))) {
+            ev.preventDefault();
+            first.focus();
+        }
+    }
+    componentDidRender() {
+        if (this.open && this.panelEl && !this.focusedIn) {
+            this.focusedIn = true;
+            this.panelEl.focus();
+        }
+        else if (!this.open) {
+            this.focusedIn = false;
+        }
+    }
+    focusedIn = false;
+    close = () => {
+        this.open = false;
+        this.bsClose.emit();
+    };
+    onKeyDown = (ev) => {
+        if (ev.key === 'Escape' && this.open) {
+            ev.stopPropagation();
+            this.close();
+        }
+        else if (ev.key === 'Tab' && this.open) {
+            this.trapTab(ev);
+        }
+    };
+    render() {
+        if (!this.open)
+            return null;
+        return (h("div", { class: `bs-side-panel bs-side-panel--${this.side}`, onKeyDown: this.onKeyDown }, this.overlay && h("div", { part: "overlay", class: "bs-side-panel__overlay", onClick: this.close }), h("div", { part: "panel", class: "bs-side-panel__panel", role: "dialog", "aria-modal": "true", "aria-labelledby": this.headingId, tabindex: "-1", ref: el => (this.panelEl = el) }, h("div", { part: "header", class: "bs-side-panel__header" }, h("h2", { part: "heading", id: this.headingId, class: "bs-side-panel__heading" }, this.heading), h("div", { class: "bs-side-panel__actions" }, h("slot", { name: "header-actions" }), h("bs-icon-button", { variant: "subtle", ariaLabel: this.closeLabel, onClick: this.close }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M6 6L18 18M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }))))), h("div", { part: "body", class: "bs-side-panel__body" }, h("slot", null)), h("div", { part: "footer", class: "bs-side-panel__footer" }, h("slot", { name: "footer" })))));
+    }
+    static get is() { return "bs-side-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-side-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-side-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the panel is visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Panel title; also its accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "''"
+            },
+            "side": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsSidePanelSide",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {
+                        "BsSidePanelSide": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-side-panel/bs-side-panel.tsx",
+                            "id": "src/components/bs-side-panel/bs-side-panel.tsx::BsSidePanelSide"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Edge the panel is anchored to."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "side",
+                "defaultValue": "'end'"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label of the close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Close'"
+            },
+            "overlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a backdrop behind the panel; clicking it closes the panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "overlay",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsClose",
+                "name": "bsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the panel requests to close (close button, Escape, overlay click)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }, {
+                "propName": "overlay",
+                "methodName": "onOverlayChange"
+            }];
+    }
+}

package/dist/collection/components/bs-side-panel/bs-side-panel.stories.js

@@ -0,0 +1,24 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-side-panel',
+    parameters: { docs: { description: { component: componentDescription('bs-side-panel') } } },
+    render: args => html `
+    <bs-side-panel ?open=${args.open} heading=${args.heading} side=${args.side} close-label=${args.closeLabel} ?overlay=${args.overlay}>
+      <p>Panel body content.</p>
+      <bs-button slot="footer">Apply</bs-button>
+    </bs-side-panel>
+  `,
+    argTypes: {
+        open: { control: 'boolean' },
+        heading: { control: 'text' },
+        side: { control: 'inline-radio', options: ['start', 'end'] },
+        closeLabel: { control: 'text' },
+        overlay: { control: 'boolean' },
+    },
+    args: { open: true, heading: 'History', side: 'end', closeLabel: 'Close', overlay: false },
+};
+export default meta;
+export const Default = {};
+export const WithOverlay = { name: 'With overlay', args: { overlay: true } };
+export const Start = { name: 'Start side', args: { side: 'start' } };

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

@@ -0,0 +1,49 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-skeleton', () => {
+    it('is aria-hidden by default with no role', async () => {
+        const { root } = await render(h("bs-skeleton", null));
+        const c = root.shadowRoot.querySelector('[part="container"]');
+        expect(c).toEqualAttribute('aria-hidden', 'true');
+        expect(c.hasAttribute('role')).toBe(false);
+    });
+    it('uses role="status" + aria-label when label is set', async () => {
+        const { root } = await render(h("bs-skeleton", { label: "Loading profile" }));
+        const c = root.shadowRoot.querySelector('[part="container"]');
+        expect(c).toEqualAttribute('role', 'status');
+        expect(c).toEqualAttribute('aria-label', 'Loading profile');
+        expect(c.hasAttribute('aria-hidden')).toBe(false);
+    });
+    it('renders one line per `lines` for text, with a shorter last line', async () => {
+        const { root } = await render(h("bs-skeleton", { lines: 3 }));
+        const lines = root.shadowRoot.querySelectorAll('[part="line"]');
+        expect(lines.length).toBe(3);
+        expect(lines[2]).toHaveClass('bs-skeleton__line--short');
+        expect(lines[0]).not.toHaveClass('bs-skeleton__line--short');
+    });
+    it('ignores `lines` for non-text variants and clamps invalid values', async () => {
+        const { root, setProps } = await render(h("bs-skeleton", { variant: "rect", lines: 4 }));
+        expect(root.shadowRoot.querySelectorAll('[part="line"]').length).toBe(1);
+        await setProps({ variant: 'text', lines: 0 });
+        expect(root.shadowRoot.querySelectorAll('[part="line"]').length).toBe(1);
+    });
+    it('applies the variant class and width/height inline', async () => {
+        const { root } = await render(h("bs-skeleton", { variant: "rect", width: "200px", height: "40px" }));
+        const line = root.shadowRoot.querySelector('[part="line"]');
+        expect(line).toHaveClass('bs-skeleton__line--rect');
+        expect(line.style.width).toBe('200px');
+        expect(line.style.height).toBe('40px');
+    });
+    it('circle mirrors a single dimension', async () => {
+        const { root } = await render(h("bs-skeleton", { variant: "circle", width: "48px" }));
+        const line = root.shadowRoot.querySelector('[part="line"]');
+        expect(line.style.width).toBe('48px');
+        expect(line.style.height).toBe('48px');
+    });
+    it('animated toggles the animation class', async () => {
+        const { root, setProps } = await render(h("bs-skeleton", null));
+        const c = root.shadowRoot.querySelector('[part="container"]');
+        expect(c).toHaveClass('bs-skeleton--animated');
+        await setProps({ animated: false });
+        expect(c).not.toHaveClass('bs-skeleton--animated');
+    });
+});

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

@@ -0,0 +1,62 @@
+:host {
+  display: block;
+  --bs-skeleton-bg: var(--bs-color-neutral-container);
+  --bs-skeleton-radius: var(--bs-border-radius-100);
+  --bs-skeleton-width: 100%;
+  --bs-skeleton-text-height: 1em;
+  --bs-skeleton-rect-height: 96px;
+  --bs-skeleton-gap: var(--bs-spacing-100);
+  --bs-skeleton-duration: 1.5s;
+}
+
+.bs-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-skeleton-gap);
+}
+
+.bs-skeleton__line {
+  display: block;
+  max-width: 100%;
+  width: var(--bs-skeleton-width);
+  background: var(--bs-skeleton-bg);
+  border-radius: var(--bs-skeleton-radius);
+}
+
+.bs-skeleton__line--text {
+  height: var(--bs-skeleton-text-height);
+}
+
+.bs-skeleton__line--rect {
+  height: var(--bs-skeleton-rect-height);
+}
+
+.bs-skeleton__line--circle {
+  height: var(--bs-skeleton-rect-height);
+  width: var(--bs-skeleton-rect-height);
+  border-radius: var(--bs-border-radius-full);
+}
+
+.bs-skeleton__line--short {
+  width: 60%;
+}
+
+.bs-skeleton--animated .bs-skeleton__line {
+  animation: bs-skeleton-pulse var(--bs-skeleton-duration) ease-in-out infinite;
+}
+
+@keyframes bs-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bs-skeleton--animated .bs-skeleton__line {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,204 @@
+import { h } from "@stencil/core";
+/**
+ * A general-purpose loading placeholder for content whose shape isn't covered by a dedicated
+ * skeleton (e.g. `bs-button-skeleton`). Renders a pulsing text line (or several), rectangle or circle.
+ *
+ * Decorative by default (`aria-hidden="true"`). Set `label` to expose it to assistive tech as a
+ * `role="status"` live region with that accessible name -- do this on one placeholder per loading
+ * region, not on every placeholder, so screen readers don't announce it repeatedly.
+ *
+ * ## When to use
+ * - Standing in for text, images, avatars or other blocks while their data loads.
+ *
+ * ## When not to use
+ * - For a `bs-button` or `bs-checkbox` placeholder -- use `bs-button-skeleton` / `bs-checkbox-skeleton`.
+ * - For an in-progress action on already-rendered UI -- use `bs-spinner` or `bs-progress`.
+ *
+ * @part container - The outer wrapper.
+ * @part line - Each pulsing placeholder element (one per line for `variant="text"`).
+ * @prop --bs-skeleton-bg - Placeholder color. Aliased to `--bs-color-neutral-container`.
+ * @prop --bs-skeleton-radius - Corner radius for `text`/`rect`. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-skeleton-width - Width when the `width` prop is not set. Defaults to `100%`.
+ * @prop --bs-skeleton-text-height - Height of each text line when `height` is not set. Defaults to `1em`.
+ * @prop --bs-skeleton-rect-height - Height of `rect`/`circle` when `height` is not set. Defaults to `96px`.
+ * @prop --bs-skeleton-gap - Gap between text lines. Aliased to `--bs-spacing-100`.
+ * @prop --bs-skeleton-duration - Pulse duration. Defaults to `1.5s`.
+ */
+export class BsSkeleton {
+    /** Shape of the placeholder. */
+    variant = 'text';
+    /** Any CSS length (e.g. `200px`, `50%`). Falls back to `--bs-skeleton-width`. For `circle`, if
+     * only one of `width`/`height` is set the other matches it. */
+    width;
+    /** Any CSS length. Falls back to the variant's default height custom property. */
+    height;
+    /** Number of text lines (`variant="text"` only). The last line of a multi-line block is shorter.
+     * Values below 1 are treated as 1. */
+    lines = 1;
+    /** Whether the placeholder pulses. Disabled automatically under `prefers-reduced-motion`. */
+    animated = true;
+    /** When set, the placeholder gets `role="status"` and this as its `aria-label`; otherwise it is
+     * `aria-hidden="true"`. */
+    label;
+    render() {
+        const isText = this.variant === 'text';
+        const count = isText ? Math.max(1, Math.floor(Number(this.lines)) || 1) : 1;
+        let width = this.width;
+        let height = this.height;
+        if (this.variant === 'circle') {
+            width = width ?? height;
+            height = height ?? width;
+        }
+        const style = {};
+        if (width)
+            style.width = width;
+        if (height)
+            style.height = height;
+        const lines = [];
+        for (let i = 0; i < count; i++) {
+            const isShortLast = isText && count > 1 && i === count - 1 && !this.width;
+            lines.push(h("span", { part: "line", class: { 'bs-skeleton__line': true, [`bs-skeleton__line--${this.variant}`]: true, 'bs-skeleton__line--short': isShortLast }, style: style }));
+        }
+        const hasLabel = !!this.label;
+        return (h("span", { key: 'dc80e4fbb6d9da6387f5bb674595469e7566ce2c', part: "container", class: { 'bs-skeleton': true, 'bs-skeleton--animated': this.animated, [`bs-skeleton--${this.variant}`]: true }, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, lines));
+    }
+    static get is() { return "bs-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-skeleton.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsSkeletonVariant",
+                    "resolved": "\"circle\" | \"rect\" | \"text\"",
+                    "references": {
+                        "BsSkeletonVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-skeleton/bs-skeleton.tsx",
+                            "id": "src/components/bs-skeleton/bs-skeleton.tsx::BsSkeletonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shape of the placeholder."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'text'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Any CSS length (e.g. `200px`, `50%`). Falls back to `--bs-skeleton-width`. For `circle`, if\nonly one of `width`/`height` is set the other matches it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Any CSS length. Falls back to the variant's default height custom property."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height"
+            },
+            "lines": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of text lines (`variant=\"text\"` only). The last line of a multi-line block is shorter.\nValues below 1 are treated as 1."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lines",
+                "defaultValue": "1"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the placeholder pulses. Disabled automatically under `prefers-reduced-motion`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "true"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When set, the placeholder gets `role=\"status\"` and this as its `aria-label`; otherwise it is\n`aria-hidden=\"true\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}