@brandsync/wc 0.0.1

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

@@ -0,0 +1,70 @@
+import { h } from "@stencil/core";
+/**
+ * A bounded surface for grouping related content — a summary, a form section, a list item.
+ *
+ * ## When to use
+ * - Grouping a self-contained piece of content that needs visual separation from the page
+ *   background (e.g. a booking summary, a settings section).
+ *
+ * ## When not to use
+ * - As the only structural element on a page — cards group content, they don't replace layout.
+ * - For a dismissible/transient message — use a modal or a dedicated notification component.
+ *
+ * @slot header - Optional heading content above the body.
+ * @slot - Default slot: the card's main body content.
+ * @slot footer - Optional actions/content below the body (e.g. a button).
+ * @part container - The outer bordered surface element.
+ * @part header - The header wrapper.
+ * @part body - The body wrapper.
+ * @part footer - The footer wrapper.
+ */
+export class BsCard {
+    /** Maps to the brandsync-tokens `--bs-paper-bg-*` set — Brandsync's tokens don't have a
+     * dedicated "card" component yet, so this reuses the existing Paper surface tokens. */
+    surface = 'raised';
+    render() {
+        return (h("div", { key: '6c74e846c97f02a39ce1f2b215c87fbb9cd42055', part: "container", class: `bs-card bs-card--${this.surface}` }, h("div", { key: 'ef89eb6ea19be13daf403b010a93e1f5a82691d4', part: "header", class: "bs-card__header" }, h("slot", { key: '4627d1f598def9298e0b7d251a523892bb0b97cf', name: "header" })), h("div", { key: 'a599746c11f92d2a535985abdcadbc9cc3036fdd', part: "body", class: "bs-card__body" }, h("slot", { key: 'f8d46c5f6aefeb870796c4efa37663e698fdd5c7' })), h("div", { key: '7f928a259fb159b6eb7d742cbfe6c1aacbef6e36', part: "footer", class: "bs-card__footer" }, h("slot", { key: 'fddc69aedbc10f4397bb1db62265c657ec2642ab', name: "footer" }))));
+    }
+    static get is() { return "bs-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "surface": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsCardSurface",
+                    "resolved": "\"base\" | \"container\" | \"raised\"",
+                    "references": {
+                        "BsCardSurface": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-card/bs-card.tsx",
+                            "id": "src/components/bs-card/bs-card.tsx::BsCardSurface"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maps to the brandsync-tokens `--bs-paper-bg-*` set \u2014 Brandsync's tokens don't have a\ndedicated \"card\" component yet, so this reuses the existing Paper surface tokens."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "surface",
+                "defaultValue": "'raised'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,27 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-card',
+    parameters: { docs: { description: { component: componentDescription('bs-card') } } },
+    render: args => html `
+    <bs-card surface=${args.surface} style="max-width: 320px;">
+      <strong slot="header">Booking confirmed</strong>
+      <p>Meeting Room 4B is reserved for 2:00pm - 3:00pm.</p>
+      <bs-button slot="footer" size="sm">View details</bs-button>
+    </bs-card>
+  `,
+    argTypes: {
+        surface: { control: 'select', options: ['base', 'raised', 'container'], description: propDescription('bs-card', 'surface') },
+    },
+    args: {
+        surface: 'raised',
+    },
+};
+export default meta;
+export const Raised = {};
+export const Base = {
+    args: { surface: 'base' },
+};
+export const Container = {
+    args: { surface: 'container' },
+};

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

@@ -0,0 +1,132 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-composer', () => {
+    it('renders with idle state defaults: ai variant placeholder, enabled mic/action buttons', async () => {
+        const { root } = await render(h("bs-composer", null));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('placeholder', 'Ask Genie something...');
+        expect(input).not.toHaveAttribute('disabled');
+        const mic = root.shadowRoot.querySelector('[part="mic"]');
+        const action = root.shadowRoot.querySelector('[part="action"]');
+        expect(mic).not.toHaveAttribute('disabled');
+        expect(action).not.toHaveAttribute('disabled');
+        expect(action).toEqualAttribute('aria-label', 'Send');
+    });
+    it('uses the human variant default placeholder', async () => {
+        const { root } = await render(h("bs-composer", { variant: "human" }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('placeholder', 'Message your support agent...');
+    });
+    it('overrides the variant default placeholder when placeholder is set', async () => {
+        const { root } = await render(h("bs-composer", { variant: "ai", placeholder: "Custom prompt" }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('placeholder', 'Custom prompt');
+    });
+    it('reflects the value prop to the native input', async () => {
+        const { root } = await render(h("bs-composer", { value: "hello there" }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input.value).toBe('hello there');
+    });
+    it('sets aria-label on the input from the ariaLabel prop', async () => {
+        const { root } = await render(h("bs-composer", { ariaLabel: "Message" }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('aria-label', 'Message');
+    });
+    it('emits bsInput with the current value as the user types', async () => {
+        const { root, spyOnEvent } = await render(h("bs-composer", null));
+        const spy = spyOnEvent('bsInput');
+        const input = root.shadowRoot.querySelector('input');
+        input.value = 'a';
+        input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        expect(spy).toHaveReceivedEventTimes(1);
+        expect(spy).toHaveReceivedEventDetail('a');
+    });
+    it('emits bsAttach when the attach button is clicked', async () => {
+        const { root, spyOnEvent } = await render(h("bs-composer", null));
+        const spy = spyOnEvent('bsAttach');
+        root.shadowRoot.querySelector('[part="attach"]').click();
+        expect(spy).toHaveReceivedEventTimes(1);
+    });
+    describe('state="idle"', () => {
+        it('shows the send icon and enabled action/mic buttons, and emits bsSubmit on action click', async () => {
+            const { root, spyOnEvent } = await render(h("bs-composer", { state: "idle" }));
+            const submitSpy = spyOnEvent('bsSubmit');
+            const stopSpy = spyOnEvent('bsStop');
+            const confirmSpy = spyOnEvent('bsVoiceConfirm');
+            const action = root.shadowRoot.querySelector('[part="action"]');
+            expect(action).not.toHaveAttribute('disabled');
+            action.click();
+            expect(submitSpy).toHaveReceivedEventTimes(1);
+            expect(stopSpy.length).toBe(0);
+            expect(confirmSpy.length).toBe(0);
+        });
+        it('emits bsMicToggle when the mic button is clicked', async () => {
+            const { root, spyOnEvent } = await render(h("bs-composer", { state: "idle" }));
+            const spy = spyOnEvent('bsMicToggle');
+            root.shadowRoot.querySelector('[part="mic"]').click();
+            expect(spy).toHaveReceivedEventTimes(1);
+        });
+    });
+    describe('state="generating"', () => {
+        it('shows an enabled action button and emits bsStop (not bsSubmit) on click', async () => {
+            const { root, spyOnEvent } = await render(h("bs-composer", { state: "generating" }));
+            const submitSpy = spyOnEvent('bsSubmit');
+            const stopSpy = spyOnEvent('bsStop');
+            const action = root.shadowRoot.querySelector('[part="action"]');
+            expect(action).not.toHaveAttribute('disabled');
+            expect(action).toEqualAttribute('aria-label', 'Stop');
+            action.click();
+            expect(stopSpy).toHaveReceivedEventTimes(1);
+            expect(submitSpy.length).toBe(0);
+        });
+    });
+    describe('state="disabled"', () => {
+        it('natively disables both the mic and action buttons and the text input', async () => {
+            const { root } = await render(h("bs-composer", { state: "disabled" }));
+            expect(root.shadowRoot.querySelector('input')).toHaveAttribute('disabled');
+            expect(root.shadowRoot.querySelector('[part="mic"]')).toHaveAttribute('disabled');
+            expect(root.shadowRoot.querySelector('[part="action"]')).toHaveAttribute('disabled');
+        });
+        it('does not emit bsSubmit, bsStop, or bsVoiceConfirm when the disabled action button is clicked', async () => {
+            const { root, spyOnEvent } = await render(h("bs-composer", { state: "disabled" }));
+            const submitSpy = spyOnEvent('bsSubmit');
+            const stopSpy = spyOnEvent('bsStop');
+            const confirmSpy = spyOnEvent('bsVoiceConfirm');
+            root.shadowRoot.querySelector('[part="action"]').click();
+            expect(submitSpy.length).toBe(0);
+            expect(stopSpy.length).toBe(0);
+            expect(confirmSpy.length).toBe(0);
+        });
+        it('does not emit bsMicToggle when the disabled mic button is clicked', async () => {
+            const { root, spyOnEvent } = await render(h("bs-composer", { state: "disabled" }));
+            const spy = spyOnEvent('bsMicToggle');
+            root.shadowRoot.querySelector('[part="mic"]').click();
+            expect(spy.length).toBe(0);
+        });
+    });
+    describe('state="recording"', () => {
+        it('renders the waveform visualization and an enabled confirm action button', async () => {
+            const { root, spyOnEvent } = await render(h("bs-composer", { state: "recording", value: "already typed" }));
+            const confirmSpy = spyOnEvent('bsVoiceConfirm');
+            const submitSpy = spyOnEvent('bsSubmit');
+            expect(root.shadowRoot.querySelector('.bs-composer__waveform')).not.toBeNull();
+            const action = root.shadowRoot.querySelector('[part="action"]');
+            expect(action).not.toHaveAttribute('disabled');
+            expect(action).toEqualAttribute('aria-label', 'Confirm');
+            action.click();
+            expect(confirmSpy).toHaveReceivedEventTimes(1);
+            expect(submitSpy.length).toBe(0);
+        });
+        it('emits bsMicToggle when the stop-recording button is clicked', async () => {
+            const { root, spyOnEvent } = await render(h("bs-composer", { state: "recording" }));
+            const spy = spyOnEvent('bsMicToggle');
+            const mic = root.shadowRoot.querySelector('[part="mic"]');
+            expect(mic).toEqualAttribute('aria-label', 'Stop recording');
+            mic.click();
+            expect(spy).toHaveReceivedEventTimes(1);
+        });
+    });
+    it('does not render the waveform outside of the recording state', async () => {
+        const { root } = await render(h("bs-composer", { state: "idle" }));
+        expect(root.shadowRoot.querySelector('.bs-composer__waveform')).toBeNull();
+    });
+});

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

@@ -0,0 +1,185 @@
+:host {
+  display: block;
+  --bs-composer-radius: var(--bs-border-radius-150);
+  --bs-composer-button-radius: var(--bs-border-radius-100);
+  --bs-composer-button-size: var(--bs-spacing-600);
+  --bs-composer-bg: var(--bs-input-bg-default);
+  --bs-composer-border: var(--bs-input-border-default);
+  --bs-composer-border-focus: var(--bs-input-border-focus);
+
+  --bs-composer-action-bg: var(--bs-color-primary-default);
+  --bs-composer-action-bg-hover: var(--bs-color-primary-hover);
+  --bs-composer-action-bg-pressed: var(--bs-color-primary-pressed);
+  --bs-composer-action-bg-disabled: var(--bs-surface-action-disabled);
+  --bs-composer-action-icon: var(--bs-text-on-action);
+  --bs-composer-action-icon-disabled: var(--bs-text-on-disabled);
+
+  --bs-composer-attach-icon: var(--bs-icon-default);
+  --bs-composer-mic-icon: var(--bs-icon-default);
+  --bs-composer-mic-icon-disabled: var(--bs-icon-disabled);
+  --bs-composer-mic-recording-icon: var(--bs-icon-default);
+  --bs-composer-subtle-hover: var(--bs-color-neutral-container);
+  --bs-composer-subtle-pressed: var(--bs-color-neutral-container-pressed);
+
+  --bs-composer-waveform-color: var(--bs-border-default);
+}
+
+.bs-composer {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--bs-composer-border);
+  border-radius: var(--bs-composer-radius);
+  background: var(--bs-composer-bg);
+  font-family: inherit;
+}
+
+.bs-composer--human {
+  border-style: dashed;
+}
+
+.bs-composer:focus-within {
+  border-color: var(--bs-composer-border-focus);
+}
+
+.bs-composer__text-row {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-150);
+  padding: var(--bs-spacing-150);
+}
+
+.bs-composer__input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--bs-input-text);
+  font-family: inherit;
+  font-size: var(--bs-font-size-md);
+}
+
+.bs-composer__input::placeholder {
+  color: var(--bs-input-placeholder);
+}
+
+.bs-composer__input:disabled {
+  color: var(--bs-input-text-disabled);
+  cursor: not-allowed;
+}
+
+.bs-composer__waveform {
+  display: inline-flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  overflow: hidden;
+}
+
+.bs-composer__waveform-bar {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 2.5px;
+  border-radius: 1.5px;
+  background: var(--bs-composer-waveform-color);
+  /* Static, non-animated placeholder audio-level visualization -- a real analyzer would drive
+   * height from actual audio input. */
+  height: var(--bs-composer-bar-height, 6px);
+}
+
+.bs-composer__controls-row {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-200);
+  padding: var(--bs-spacing-150);
+}
+
+.bs-composer__spacer {
+  flex: 1;
+}
+
+.bs-composer__attach,
+.bs-composer__mic,
+.bs-composer__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-family: inherit;
+  border-radius: var(--bs-composer-button-radius);
+  width: var(--bs-composer-button-size);
+  height: var(--bs-composer-button-size);
+  flex-shrink: 0;
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-composer__attach:focus-visible,
+.bs-composer__mic:focus-visible,
+.bs-composer__action:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 2px;
+}
+
+.bs-composer__attach svg,
+.bs-composer__mic svg,
+.bs-composer__action svg {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-composer__attach,
+.bs-composer__mic {
+  background: transparent;
+}
+
+.bs-composer__attach:hover:not(:disabled),
+.bs-composer__mic:hover:not(:disabled) {
+  background: var(--bs-composer-subtle-hover);
+}
+
+.bs-composer__attach:active:not(:disabled),
+.bs-composer__mic:active:not(:disabled) {
+  background: var(--bs-composer-subtle-pressed);
+}
+
+.bs-composer__attach {
+  color: var(--bs-composer-attach-icon);
+}
+
+.bs-composer__mic {
+  color: var(--bs-composer-mic-icon);
+}
+
+.bs-composer__mic--recording {
+  color: var(--bs-composer-mic-recording-icon);
+}
+
+.bs-composer__mic:disabled {
+  color: var(--bs-composer-mic-icon-disabled);
+  cursor: not-allowed;
+}
+
+.bs-composer__action {
+  background: var(--bs-composer-action-bg);
+  color: var(--bs-composer-action-icon);
+}
+
+.bs-composer__action:hover:not(:disabled) {
+  background: var(--bs-composer-action-bg-hover);
+}
+
+.bs-composer__action:active:not(:disabled) {
+  background: var(--bs-composer-action-bg-pressed);
+}
+
+.bs-composer__action:disabled {
+  background: var(--bs-composer-action-bg-disabled);
+  color: var(--bs-composer-action-icon-disabled);
+  cursor: not-allowed;
+}