@brandsync/wc 0.0.1

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

@@ -0,0 +1,230 @@
+import { h } from "@stencil/core";
+/**
+ * A single-line text field with an optional label, description, and error state.
+ *
+ * ## When to use
+ * - Collecting a single line of free-text, email, password, or numeric input.
+ * - Pair with `error` for inline validation feedback tied to that specific field.
+ *
+ * ## When not to use
+ * - Multi-line text — this component has no `textarea` mode.
+ * - A fixed set of choices — use a select/radio/checkbox component instead of free text.
+ *
+ * @part label - The `<label>` element.
+ * @part control - The native `<input>` element.
+ * @part description - The helper text element (hidden when `error` is set).
+ * @part error - The error message element.
+ */
+export class BsInput {
+    /** Current value. Native `input`/`change` events don't cross the Shadow DOM boundary, so this
+     * component re-dispatches them as `bsInput`/`bsChange` custom events instead. */
+    value = '';
+    type = 'text';
+    label;
+    placeholder;
+    description;
+    error;
+    disabled = false;
+    bsInput;
+    bsChange;
+    onInput = (ev) => {
+        const value = ev.target.value;
+        this.bsInput.emit(value);
+    };
+    onChange = (ev) => {
+        const value = ev.target.value;
+        this.bsChange.emit(value);
+    };
+    render() {
+        return (h("div", { key: '94a90f72a348259c9e54b1eb61ca694baf7c0386', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
+        // to this instance's own shadow root, so it can never collide with another bs-input.
+        h("label", { key: '3760b135aaf4002b86e0552af5e3cad110b45afe', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label)), h("input", { key: '761d594818ee8ad917562b9dbe945e5ea8d9210c', id: "control", part: "control", class: "bs-input__control", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+    }
+    static get is() { return "bs-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value. Native `input`/`change` events don't cross the Shadow DOM boundary, so this\ncomponent re-dispatches them as `bsInput`/`bsChange` custom events instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'email' | 'password' | 'number'",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsInput",
+                "name": "bsInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/bs-input/bs-input.stories.js

@@ -0,0 +1,40 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-input',
+    parameters: { docs: { description: { component: componentDescription('bs-input') } } },
+    render: args => html `
+    <bs-input
+      label=${args.label}
+      placeholder=${args.placeholder}
+      description=${args.description}
+      error=${args.error}
+      ?disabled=${args.disabled}
+    ></bs-input>
+  `,
+    argTypes: {
+        label: { control: 'text', description: propDescription('bs-input', 'label') },
+        placeholder: { control: 'text', description: propDescription('bs-input', 'placeholder') },
+        description: { control: 'text', description: propDescription('bs-input', 'description') },
+        error: { control: 'text', description: propDescription('bs-input', 'error') },
+        disabled: { control: 'boolean', description: propDescription('bs-input', 'disabled') },
+    },
+    args: {
+        label: 'Email address',
+        placeholder: 'you@example.com',
+        description: '',
+        error: '',
+        disabled: false,
+    },
+};
+export default meta;
+export const Default = {};
+export const WithDescription = {
+    args: { description: "We'll never share your email." },
+};
+export const WithError = {
+    args: { error: 'Enter a valid email address.' },
+};
+export const Disabled = {
+    args: { disabled: true },
+};

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

@@ -0,0 +1,112 @@
+import { render, h, describe, it, expect, afterEach } from "@stencil/vitest";
+describe('bs-modal', () => {
+    afterEach(() => {
+        document.querySelectorAll('button[data-test-trigger]').forEach(el => el.remove());
+    });
+    it('renders nothing when closed (default)', async () => {
+        const { root } = await render(h("bs-modal", { heading: "Confirm booking" }, "Body"));
+        expect(root.shadowRoot.querySelector('[part="backdrop"]')).toBeNull();
+        expect(root.shadowRoot.querySelector('[part="dialog"]')).toBeNull();
+    });
+    it('renders the backdrop and dialog with correct a11y attributes when open', async () => {
+        const { root } = await render(h("bs-modal", { open: true, heading: "Confirm booking" }, "Body content"));
+        const backdrop = root.shadowRoot.querySelector('[part="backdrop"]');
+        const dialog = root.shadowRoot.querySelector('[part="dialog"]');
+        expect(backdrop).toBeTruthy();
+        expect(dialog).toBeTruthy();
+        expect(dialog).toEqualAttribute('role', 'dialog');
+        expect(dialog).toEqualAttribute('aria-modal', 'true');
+        expect(dialog).toEqualAttribute('aria-label', 'Confirm booking');
+        expect(root).toHaveTextContent('Body content');
+    });
+    ['sm', 'md', 'lg'].forEach(size => {
+        it(`applies the "${size}" size class to the dialog`, async () => {
+            const { root } = await render(h("bs-modal", { open: true, size: size }, "Body"));
+            const dialog = root.shadowRoot.querySelector('[part="dialog"]');
+            expect(dialog).toHaveClass(`bs-modal__dialog--${size}`);
+        });
+    });
+    it('defaults to the "md" size', async () => {
+        const { root } = await render(h("bs-modal", { open: true }, "Body"));
+        const dialog = root.shadowRoot.querySelector('[part="dialog"]');
+        expect(dialog).toHaveClass('bs-modal__dialog--md');
+    });
+    it('only shows the footer bar when the footer slot has content', async () => {
+        const { root: withoutFooter } = await render(h("bs-modal", { open: true }, "Body"));
+        const footerWithout = withoutFooter.shadowRoot.querySelector('[part="footer"]');
+        expect(footerWithout).not.toHaveClass('bs-modal__footer--visible');
+        const { root: withFooter } = await render(h("bs-modal", { open: true }, "Body", h("button", { slot: "footer" }, "Confirm")));
+        const footerWith = withFooter.shadowRoot.querySelector('[part="footer"]');
+        expect(footerWith).toHaveClass('bs-modal__footer--visible');
+        expect(withFooter).toHaveTextContent('Confirm');
+    });
+    it('closes and emits bsClose when the close button is clicked', async () => {
+        const { root, spyOnEvent, waitForChanges } = await render(h("bs-modal", { open: true, heading: "Confirm booking" }, "Body"));
+        const closeSpy = spyOnEvent('bsClose');
+        const closeButton = root.shadowRoot.querySelector('[part="close"]');
+        closeButton.click();
+        await waitForChanges();
+        expect(closeSpy).toHaveReceivedEventTimes(1);
+        expect(root).not.toHaveAttribute('open');
+        expect(root.shadowRoot.querySelector('[part="dialog"]')).toBeNull();
+    });
+    it('closes when the backdrop itself is clicked, but not when the dialog inside it is clicked', async () => {
+        const { root, spyOnEvent, waitForChanges } = await render(h("bs-modal", { open: true }, "Body"));
+        const closeSpy = spyOnEvent('bsClose');
+        const dialog = root.shadowRoot.querySelector('[part="dialog"]');
+        dialog.click();
+        await waitForChanges();
+        expect(closeSpy.length).toBe(0);
+        expect(root).toHaveAttribute('open');
+        const backdrop = root.shadowRoot.querySelector('[part="backdrop"]');
+        backdrop.click();
+        await waitForChanges();
+        expect(closeSpy).toHaveReceivedEventTimes(1);
+        expect(root).not.toHaveAttribute('open');
+    });
+    it('closes on Escape keydown while open', async () => {
+        const { root, spyOnEvent, waitForChanges } = await render(h("bs-modal", { open: true }, "Body"));
+        const closeSpy = spyOnEvent('bsClose');
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        await waitForChanges();
+        expect(closeSpy).toHaveReceivedEventTimes(1);
+        expect(root).not.toHaveAttribute('open');
+    });
+    it('does not react to Escape when closed', async () => {
+        const { spyOnEvent, waitForChanges } = await render(h("bs-modal", null, "Body"));
+        const closeSpy = spyOnEvent('bsClose');
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        await waitForChanges();
+        expect(closeSpy.length).toBe(0);
+    });
+    it('moves focus into the dialog when opened', async () => {
+        const { root } = await render(h("bs-modal", { open: true }, "Body"));
+        const dialog = root.shadowRoot.querySelector('[part="dialog"]');
+        expect(root.shadowRoot.activeElement).toBe(dialog);
+    });
+    it('redirects focus back into the dialog if focus escapes it while open (focus trap)', async () => {
+        const outside = document.createElement('button');
+        outside.setAttribute('data-test-trigger', '');
+        outside.textContent = 'outside';
+        document.body.appendChild(outside);
+        const { root } = await render(h("bs-modal", { open: true }, "Body"));
+        const dialog = root.shadowRoot.querySelector('[part="dialog"]');
+        outside.focus();
+        expect(root.shadowRoot.activeElement).toBe(dialog);
+    });
+    it('captures the previously focused element on open and restores focus to it on close', async () => {
+        const trigger = document.createElement('button');
+        trigger.setAttribute('data-test-trigger', '');
+        trigger.textContent = 'open modal';
+        document.body.appendChild(trigger);
+        trigger.focus();
+        expect(document.activeElement).toBe(trigger);
+        const { root, setProps, waitForChanges } = await render(h("bs-modal", null, "Body"));
+        await setProps({ open: true });
+        const dialog = root.shadowRoot.querySelector('[part="dialog"]');
+        expect(root.shadowRoot.activeElement).toBe(dialog);
+        await setProps({ open: false });
+        await waitForChanges();
+        expect(document.activeElement).toBe(trigger);
+    });
+});

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

@@ -0,0 +1,66 @@
+.bs-modal__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--bs-z-index-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.bs-modal__dialog {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - var(--bs-spacing-800));
+  background: var(--bs-surface-raised);
+  border-radius: var(--bs-border-radius-200);
+  box-shadow: var(--bs-shadow-xl);
+  font-family: inherit;
+}
+
+.bs-modal__dialog--sm {
+  width: 360px;
+}
+.bs-modal__dialog--md {
+  width: 560px;
+}
+.bs-modal__dialog--lg {
+  width: 800px;
+}
+
+.bs-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--bs-spacing-400);
+  border-bottom: 1px solid var(--bs-border-default);
+}
+
+.bs-modal__heading {
+  font-size: var(--bs-font-size-lg);
+  font-weight: var(--bs-font-weight-semibold);
+  color: var(--bs-text-default);
+}
+
+.bs-modal__close {
+  border: none;
+  background: none;
+  font-size: var(--bs-font-size-xl);
+  line-height: 1;
+  color: var(--bs-icon-muted, var(--bs-text-secondary));
+  cursor: pointer;
+  padding: var(--bs-spacing-100);
+}
+
+.bs-modal__body {
+  padding: var(--bs-spacing-400);
+  overflow-y: auto;
+}
+
+.bs-modal__footer--visible {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--bs-spacing-200);
+  padding: var(--bs-spacing-400);
+  border-top: 1px solid var(--bs-border-default);
+}

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

@@ -0,0 +1,198 @@
+import { h } from "@stencil/core";
+/**
+ * An overlay dialog that interrupts the current flow for a focused task or confirmation.
+ * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
+ *
+ * ## When to use
+ * - Confirming a consequential action (e.g. "Confirm booking") before it takes effect.
+ * - A short, focused task that doesn't warrant navigating to a new page.
+ *
+ * ## When not to use
+ * - For non-blocking status messages — use a toast/notification instead of interrupting the user.
+ * - For a long, multi-step flow — a full page or a dedicated route is usually a better fit than a
+ *   modal that just gets taller and taller.
+ *
+ * @slot - Default slot: the dialog body content.
+ * @slot footer - Optional footer content (typically action buttons).
+ * @part backdrop - The full-viewport overlay behind the dialog.
+ * @part dialog - The dialog box itself.
+ * @part header - The header row (heading + close button).
+ * @part close - The close button.
+ * @part body - The body content wrapper.
+ * @part footer - The footer wrapper (only visible when the footer slot has content).
+ */
+export class BsModal {
+    /** Mutable + reflected so the component can close itself (backdrop click, Escape, close button)
+     * the same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to. */
+    open = false;
+    heading;
+    size = 'md';
+    bsClose;
+    /** Tracks whether the `footer` slot has assigned content, so the footer bar (border + padding)
+     * only renders when there's actually something to put in it. */
+    hasFooter = false;
+    onFooterSlotchange = (ev) => {
+        this.hasFooter = ev.target.assignedNodes().length > 0;
+    };
+    dialogRef;
+    previouslyFocused;
+    wasOpen = false;
+    close = () => {
+        this.open = false;
+        this.bsClose.emit();
+    };
+    onKeydown(ev) {
+        if (this.open && ev.key === 'Escape') {
+            this.close();
+        }
+    }
+    onBackdropClick = (ev) => {
+        if (ev.target === ev.currentTarget) {
+            this.close();
+        }
+    };
+    // Simple focus containment: rather than manually enumerating focusable elements (which can't
+    // reliably walk into slotted children's own Shadow DOM anyway), redirect any focus that lands
+    // outside the dialog back to it. composedPath() correctly reports elements across Shadow DOM
+    // boundaries, unlike a plain `.contains()` check.
+    onFocusIn(ev) {
+        if (this.open && this.dialogRef && !ev.composedPath().includes(this.dialogRef)) {
+            this.dialogRef.focus();
+        }
+    }
+    componentDidRender() {
+        if (this.open && !this.wasOpen) {
+            this.previouslyFocused = document.activeElement;
+            this.dialogRef?.focus();
+        }
+        else if (!this.open && this.wasOpen) {
+            this.previouslyFocused?.focus();
+        }
+        this.wasOpen = this.open;
+    }
+    render() {
+        if (!this.open) {
+            return null;
+        }
+        return (h("div", { part: "backdrop", class: "bs-modal__backdrop", onClick: this.onBackdropClick }, h("div", { ref: el => (this.dialogRef = el), tabIndex: -1, part: "dialog", class: `bs-modal__dialog bs-modal__dialog--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.heading }, h("div", { part: "header", class: "bs-modal__header" }, h("span", { class: "bs-modal__heading" }, this.heading), h("button", { part: "close", class: "bs-modal__close", "aria-label": "Close", onClick: this.close }, "\u00D7")), h("div", { part: "body", class: "bs-modal__body" }, h("slot", null)), h("div", { part: "footer", class: `bs-modal__footer ${this.hasFooter ? 'bs-modal__footer--visible' : ''}` }, h("slot", { name: "footer", onSlotchange: this.onFooterSlotchange })))));
+    }
+    static get is() { return "bs-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mutable + reflected so the component can close itself (backdrop click, Escape, close button)\nthe same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsModalSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "BsModalSize": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-modal/bs-modal.tsx",
+                            "id": "src/components/bs-modal/bs-modal.tsx::BsModalSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFooter": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsClose",
+                "name": "bsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusin",
+                "method": "onFocusIn",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}