@brandsync/wc 0.0.7 → 0.0.9

package/dist/collection/components/bs-ai-chatbot/bs-ai-chatbot.stories.js

@@ -0,0 +1,180 @@
+import { html } from "lit";
+/**
+ * This is not a real component -- `bs-ai-chatbot` isn't a registered custom element. It's a
+ * showcase composing the existing Genie AI components (bs-chatbot-header, bs-ai-greeting,
+ * bs-chatbot-suggestion-button, bs-composer, bs-composer-status-banner, bs-attachment-list,
+ * bs-ai-thinking, bs-chatbot-response-action, bs-chatbot-sources-drawer, bs-ai-disclaimer) into
+ * realistic full-panel use cases, since no single component's own story shows how they fit
+ * together end to end.
+ */
+const meta = {
+    title: 'Genie AI Components/bs-ai-chatbot',
+    parameters: { docs: { description: { component: 'A composed showcase of Genie AI components in realistic full-chat-panel use cases. Not a real custom element.' } } },
+};
+export default meta;
+const PANEL_STYLE = `
+  display: flex;
+  flex-direction: column;
+  width: 420px;
+  height: 640px;
+  border: 1px solid var(--bs-border-default);
+  border-radius: var(--bs-border-radius-200);
+  overflow: hidden;
+  background: var(--bs-surface-base);
+  font-family: var(--bs-typography-font-family-body), sans-serif;
+`;
+const TRANSCRIPT_STYLE = `
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-200);
+  padding: var(--bs-spacing-200);
+`;
+const USER_BUBBLE_STYLE = `
+  align-self: flex-end;
+  max-width: 80%;
+  padding: var(--bs-spacing-100) var(--bs-spacing-150);
+  border-radius: var(--bs-border-radius-150);
+  background: var(--bs-color-primary-container);
+  color: var(--bs-text-default);
+  font-size: var(--bs-font-size-md);
+  line-height: 1.5;
+`;
+const AI_RESPONSE_STYLE = `
+  max-width: 100%;
+  color: var(--bs-text-default);
+  font-size: var(--bs-font-size-md);
+  line-height: 1.5;
+`;
+export const EmptyState = {
+    name: 'Empty state',
+    render: () => html `
+    <div style=${PANEL_STYLE}>
+      <bs-chatbot-header heading="Genie"></bs-chatbot-header>
+      <div style="${TRANSCRIPT_STYLE} align-items: center; justify-content: center; gap: var(--bs-spacing-400);">
+        <bs-ai-greeting product-name="BrandSync"></bs-ai-greeting>
+        <div style="display: flex; flex-wrap: wrap; gap: var(--bs-spacing-100); justify-content: center;">
+          <bs-chatbot-suggestion-button>How do I reset my password?</bs-chatbot-suggestion-button>
+          <bs-chatbot-suggestion-button>Summarize this document</bs-chatbot-suggestion-button>
+          <bs-chatbot-suggestion-button>What's my leave balance?</bs-chatbot-suggestion-button>
+        </div>
+      </div>
+      <bs-composer aria-label="Message" style="margin: var(--bs-spacing-100) var(--bs-spacing-200) 0;"></bs-composer>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+    </div>
+  `,
+};
+export const ActiveConversation = {
+    name: 'Active conversation',
+    render: () => html `
+    <div style=${PANEL_STYLE}>
+      <bs-chatbot-header heading="Genie"></bs-chatbot-header>
+      <div style=${TRANSCRIPT_STYLE}>
+        <p style=${USER_BUBBLE_STYLE}>How do I submit a ByggSøk application?</p>
+        <div style="display: flex; flex-direction: column; gap: var(--bs-spacing-50);">
+          <p style=${AI_RESPONSE_STYLE}>
+            You can submit a ByggSøk application through the municipal portal. Log in with your ID, select "New
+            application", and attach your building plans before submitting for review.
+          </p>
+          <bs-chatbot-response-action sources-count="3"></bs-chatbot-response-action>
+        </div>
+      </div>
+      <bs-composer aria-label="Message" style="margin: var(--bs-spacing-100) var(--bs-spacing-200) 0;"></bs-composer>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+    </div>
+  `,
+};
+export const Thinking = {
+    name: 'AI is thinking',
+    render: () => html `
+    <div style=${PANEL_STYLE}>
+      <bs-chatbot-header heading="Genie"></bs-chatbot-header>
+      <div style=${TRANSCRIPT_STYLE}>
+        <p style=${USER_BUBBLE_STYLE}>How do I submit a ByggSøk application?</p>
+        <bs-ai-thinking label="Retrieving sources"></bs-ai-thinking>
+      </div>
+      <bs-composer aria-label="Message" state="generating" style="margin: var(--bs-spacing-100) var(--bs-spacing-200) 0;"></bs-composer>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+    </div>
+  `,
+};
+export const WithSourcesDrawerOpen = {
+    name: 'Sources drawer open',
+    render: () => html `
+    <div style="${PANEL_STYLE} position: relative;">
+      <bs-chatbot-header heading="Genie"></bs-chatbot-header>
+      <div style=${TRANSCRIPT_STYLE}>
+        <p style=${USER_BUBBLE_STYLE}>How do I submit a ByggSøk application?</p>
+        <div style="display: flex; flex-direction: column; gap: var(--bs-spacing-50);">
+          <p style=${AI_RESPONSE_STYLE}>
+            You can submit a ByggSøk application through the municipal portal. Log in with your ID, select "New
+            application", and attach your building plans before submitting for review.
+          </p>
+          <bs-chatbot-response-action sources-count="3"></bs-chatbot-response-action>
+        </div>
+      </div>
+      <bs-composer aria-label="Message" style="margin: var(--bs-spacing-100) var(--bs-spacing-200) 0;"></bs-composer>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+
+      <!-- Backdrop -->
+      <div style="position: absolute; inset: 0; background: rgba(33, 38, 46, 0.32);"></div>
+
+      <!-- Slide-in drawer, docked to the panel's own right edge -- not a separate side-by-side
+           column, so it stays within the chat panel's own bounds like a real in-app drawer. -->
+      <div style="position: absolute; top: 0; right: 0; bottom: 0; width: 85%; box-shadow: var(--bs-shadow-lg); background: var(--bs-surface-raised);">
+        <bs-chatbot-sources-drawer heading="Sources">
+          <bs-source-link file-name="Employee Handbook 2026" source-name="HoltePortalen" version="v3.2"></bs-source-link>
+          <bs-source-link file-name="Payroll Processing Guide" source-name="WorkdayHQ" version="v2.4"></bs-source-link>
+          <bs-source-link file-name="Benefits & Leave Policy" source-name="PeopleOps Wiki" version="v1.8"></bs-source-link>
+        </bs-chatbot-sources-drawer>
+      </div>
+    </div>
+  `,
+};
+export const UploadingAttachments = {
+    name: 'Uploading attachments',
+    render: () => html `
+    <div style=${PANEL_STYLE}>
+      <bs-chatbot-header heading="Genie"></bs-chatbot-header>
+      <div style=${TRANSCRIPT_STYLE}></div>
+      <div style="margin: 0 var(--bs-spacing-200);">
+        <bs-composer-status-banner
+          type="info"
+          message="Uploading files, please wait."
+          style="margin-bottom: calc(-1 * var(--bs-spacing-150));"
+        ></bs-composer-status-banner>
+        <bs-composer aria-label="Message">
+          <bs-attachment-list slot="attachments">
+            <bs-attachment type="image" image-src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=200&h=200&fit=crop" loading></bs-attachment>
+            <bs-attachment type="pdf" file-name="Dummy-pdf-in-here" loading></bs-attachment>
+          </bs-attachment-list>
+        </bs-composer>
+      </div>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+    </div>
+  `,
+};
+export const SendFailed = {
+    name: 'Send failed',
+    render: () => html `
+    <div style=${PANEL_STYLE}>
+      <bs-chatbot-header heading="Genie"></bs-chatbot-header>
+      <div style=${TRANSCRIPT_STYLE}>
+        <p style=${USER_BUBBLE_STYLE}>How do I submit a ByggSøk application?</p>
+      </div>
+      <div style="margin: 0 var(--bs-spacing-200);">
+        <bs-composer-status-banner
+          type="error"
+          message="Message failed to send"
+          show-button
+          action-label="Retry"
+          style="margin-bottom: calc(-1 * var(--bs-spacing-150));"
+        ></bs-composer-status-banner>
+        <bs-composer aria-label="Message"></bs-composer>
+      </div>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+    </div>
+  `,
+};

package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.cmp.test.js

@@ -0,0 +1,14 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-ai-disclaimer', () => {
+    it('renders the default slot content inside the text part', async () => {
+        const { root } = await render(h("bs-ai-disclaimer", null, "AI can make mistakes. Please verify important information."));
+        expect(root).toHaveTextContent('AI can make mistakes. Please verify important information.');
+        const text = root.shadowRoot.querySelector('[part="text"]');
+        expect(text).not.toBeNull();
+        expect(text.tagName).toBe('P');
+    });
+    it('renders arbitrary slotted content, e.g. a link', async () => {
+        const { root } = await render(h("bs-ai-disclaimer", null, "AI can make mistakes. ", h("a", { href: "/policy" }, "Learn more")));
+        expect(root.querySelector('a')).not.toBeNull();
+    });
+});

package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.css

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+  --bs-ai-disclaimer-padding-x: var(--bs-spacing-200);
+  --bs-ai-disclaimer-text-color: var(--bs-text-secondary);
+  --bs-ai-disclaimer-font-size: var(--bs-font-size-sm);
+  --bs-ai-disclaimer-line-height: var(--bs-line-height-body-sm);
+}
+
+.bs-ai-disclaimer {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--bs-ai-disclaimer-padding-x);
+  font-family: inherit;
+}
+
+.bs-ai-disclaimer__text {
+  margin: 0;
+  flex: 1 0 0;
+  min-width: 0;
+  color: var(--bs-ai-disclaimer-text-color);
+  font-size: var(--bs-ai-disclaimer-font-size);
+  line-height: calc(var(--bs-ai-disclaimer-line-height) * 1px);
+  text-align: center;
+  word-break: break-word;
+}

package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.js

@@ -0,0 +1,41 @@
+import { h } from "@stencil/core";
+/**
+ * A centered caption disclaimer for Genie AI surfaces, e.g. "AI can make mistakes. Please verify
+ * important information."
+ *
+ * ## When to use
+ * - Below or above `bs-composer` in a Genie AI chat panel, to remind users AI output can be wrong.
+ *
+ * ## When not to use
+ * - A general-purpose caption/helper text — use plain text or `bs-input`'s description slot for
+ *   non-AI-related helper copy.
+ *
+ * The default slot (rather than a fixed prop) is intentional: Figma only specifies plain text, but
+ * some consuming apps link out to a policy/help page from this copy, and a slot supports that
+ * without inventing an unconfirmed `href`/link prop.
+ *
+ * @slot - The disclaimer text/content, centered. Defaults to no content -- the consumer supplies
+ *   the copy, e.g. "AI can make mistakes. Please verify important information."
+ * @part text - The disclaimer text container.
+ * @prop --bs-ai-disclaimer-padding-x - Horizontal padding. Aliased to `--bs-spacing-200`.
+ * @prop --bs-ai-disclaimer-text-color - Text color. Aliased to `--bs-text-secondary`.
+ * @prop --bs-ai-disclaimer-font-size - Text font size. Aliased to `--bs-font-size-sm`.
+ * @prop --bs-ai-disclaimer-line-height - Text line height. Aliased to `--bs-line-height-body-sm`.
+ */
+export class BsAiDisclaimer {
+    render() {
+        return (h("div", { key: 'c306fa7e8f7f9dca07642e1038708847847e2d7e', class: "bs-ai-disclaimer" }, h("p", { key: '7f42e2094e7baf287c886ce966a3813657a99a61', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: 'c5a66f6093b413274c20de59e7f82d4f7372b56c' }))));
+    }
+    static get is() { return "bs-ai-disclaimer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-ai-disclaimer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-ai-disclaimer.css"]
+        };
+    }
+}

package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.stories.js

@@ -0,0 +1,15 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Genie AI Components/bs-ai-disclaimer',
+    parameters: { docs: { description: { component: componentDescription('bs-ai-disclaimer') } } },
+    render: args => html ` <bs-ai-disclaimer>${args.text}</bs-ai-disclaimer> `,
+    argTypes: {
+        text: { control: 'text', description: 'Default slot: the disclaimer text/content.' },
+    },
+    args: {
+        text: 'AI can make mistakes. Please verify important information.',
+    },
+};
+export default meta;
+export const Default = {};

package/dist/collection/components/bs-ai-greeting/bs-ai-greeting.cmp.test.js

@@ -0,0 +1,22 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-ai-greeting', () => {
+    it('renders the default heading and a product-agnostic subtext', async () => {
+        const { root } = await render(h("bs-ai-greeting", null));
+        expect(root).toHaveTextContent("Hi. I'm Genie,");
+        expect(root).toHaveTextContent('your AI assistant.');
+        expect(root).toHaveTextContent('How can I help you today?');
+    });
+    it('uses a custom assistant name in the heading', async () => {
+        const { root } = await render(h("bs-ai-greeting", { "assistant-name": "Sasha" }));
+        expect(root).toHaveTextContent("Hi. I'm Sasha,");
+    });
+    it('mentions the product name in the subtext when provided', async () => {
+        const { root } = await render(h("bs-ai-greeting", { "product-name": "Brandsync" }));
+        expect(root).toHaveTextContent('How can I help you with Brandsync today?');
+    });
+    it('exposes heading and subtext parts', async () => {
+        const { root } = await render(h("bs-ai-greeting", null));
+        expect(root.shadowRoot.querySelector('[part="heading"]')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('[part="subtext"]')).not.toBeNull();
+    });
+});

package/dist/collection/components/bs-ai-greeting/bs-ai-greeting.css

@@ -0,0 +1,53 @@
+:host {
+  display: block;
+  --bs-ai-greeting-gap: var(--bs-spacing-200);
+  --bs-ai-greeting-max-width: 490px;
+  --bs-ai-greeting-heading-color: var(--bs-text-default);
+  --bs-ai-greeting-heading-font-size: var(--bs-font-size-4xl);
+  /* Figma specifies a 28px line-height for this heading, which doesn't match any
+   * --bs-line-height-heading-* token (h4 is 32) -- aliased directly to --bs-line-height-body-lg,
+   * the token that happens to carry the same numeric value. */
+  --bs-ai-greeting-heading-line-height: var(--bs-line-height-body-lg);
+  --bs-ai-greeting-heading-weight: var(--bs-font-weight-bold);
+  --bs-ai-greeting-heading-gap: var(--bs-spacing-200);
+  --bs-ai-greeting-subtext-color: var(--bs-text-secondary);
+  /* Figma specifies 20px, which doesn't match the semantic --bs-text-style-body-lg-size (18px) --
+   * aliased directly to the raw --bs-font-size-xl primitive instead. */
+  --bs-ai-greeting-subtext-font-size: var(--bs-font-size-xl);
+  --bs-ai-greeting-subtext-line-height: var(--bs-line-height-body-lg);
+}
+
+.bs-ai-greeting {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bs-ai-greeting-gap);
+  max-width: var(--bs-ai-greeting-max-width);
+  margin: 0 auto;
+  text-align: center;
+  font-family: inherit;
+}
+
+.bs-ai-greeting__heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-ai-greeting-heading-gap);
+  color: var(--bs-ai-greeting-heading-color);
+  font-size: var(--bs-ai-greeting-heading-font-size);
+  font-weight: var(--bs-ai-greeting-heading-weight);
+  line-height: calc(var(--bs-ai-greeting-heading-line-height) * 1px);
+}
+
+.bs-ai-greeting__heading-line {
+  margin: 0;
+}
+
+.bs-ai-greeting__subtext {
+  margin: 0;
+  color: var(--bs-ai-greeting-subtext-color);
+  font-size: var(--bs-ai-greeting-subtext-font-size);
+  font-weight: var(--bs-font-weight-regular);
+  line-height: calc(var(--bs-ai-greeting-subtext-line-height) * 1px);
+}

package/dist/collection/components/bs-ai-greeting/bs-ai-greeting.js

@@ -0,0 +1,103 @@
+import { h } from "@stencil/core";
+/**
+ * The centered welcome heading shown at the top of an empty Genie AI chat panel, e.g.
+ * "Hi. I'm Genie, your AI assistant." + "How can I help you with [product] today?"
+ *
+ * ## When to use
+ * - The empty/initial state of a Genie AI chat panel, before the user has sent a message.
+ *
+ * ## When not to use
+ * - Once a conversation has started -- this is a one-time empty-state greeting, not a persistent
+ *   header (see `bs-chatbot-header` for that).
+ *
+ * `productName` is optional: Figma's copy has a `[product_name]` placeholder the consuming app is
+ * expected to fill in, but a component shouldn't force a product name to exist, so leaving it
+ * unset falls back to a product-agnostic "How can I help you today?".
+ *
+ * @part heading - The bold "Hi. I'm {assistantName}, your AI assistant." heading.
+ * @part subtext - The "How can I help you..." subtext.
+ * @prop --bs-ai-greeting-gap - Gap between heading and subtext. Aliased to `--bs-spacing-200`.
+ * @prop --bs-ai-greeting-max-width - Max width of the centered content block. Matches Figma's
+ *   490px.
+ * @prop --bs-ai-greeting-heading-color - Heading text color. Aliased to `--bs-text-default`.
+ * @prop --bs-ai-greeting-heading-font-size - Heading font size. Aliased to `--bs-font-size-4xl`.
+ * @prop --bs-ai-greeting-heading-line-height - Heading line height. Figma specifies 28px, which
+ *   doesn't match any `--bs-line-height-heading-*` token (h4 is 32) -- aliased directly to
+ *   `--bs-line-height-body-lg`, the token that happens to share the same numeric value.
+ * @prop --bs-ai-greeting-heading-weight - Heading font weight. Aliased to `--bs-font-weight-bold`.
+ * @prop --bs-ai-greeting-heading-gap - Gap between the two heading lines. Aliased to
+ *   `--bs-spacing-200`.
+ * @prop --bs-ai-greeting-subtext-color - Subtext color. Aliased to `--bs-text-secondary`.
+ * @prop --bs-ai-greeting-subtext-font-size - Subtext font size. Figma specifies 20px, which
+ *   doesn't match the semantic `--bs-text-style-body-lg-size` (18px) -- aliased directly to the
+ *   raw `--bs-font-size-xl` primitive instead.
+ * @prop --bs-ai-greeting-subtext-line-height - Subtext line height. Aliased to
+ *   `--bs-line-height-body-lg`.
+ */
+export class BsAiGreeting {
+    /** The assistant's name, used in the heading ("Hi. I'm {assistantName},"). */
+    assistantName = 'Genie';
+    /** The product name mentioned in the subtext. Omit to use a product-agnostic subtext. */
+    productName;
+    render() {
+        const subtext = this.productName
+            ? `How can I help you with ${this.productName} today?`
+            : 'How can I help you today?';
+        return (h("div", { key: '7931e7404b70476a5488e31f07981c97617c1e5b', class: "bs-ai-greeting" }, h("div", { key: '1ba75538642eebb9fe7c24eae2aae9a4eed176cf', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: '6cf5d97d81249298d02d3983a039e664a75fbb40', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: 'f7a1b0235b5b32b1319bc7748e0073fae0defef0', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: '5f07b44ca8d000c39204374f99c6608ecbfc22d3', part: "subtext", class: "bs-ai-greeting__subtext" }, subtext)));
+    }
+    static get is() { return "bs-ai-greeting"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-ai-greeting.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-ai-greeting.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "assistantName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The assistant's name, used in the heading (\"Hi. I'm {assistantName},\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "assistant-name",
+                "defaultValue": "'Genie'"
+            },
+            "productName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The product name mentioned in the subtext. Omit to use a product-agnostic subtext."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "product-name"
+            }
+        };
+    }
+}

package/dist/collection/components/bs-ai-greeting/bs-ai-greeting.stories.js

@@ -0,0 +1,23 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Genie AI Components/bs-ai-greeting',
+    parameters: { docs: { description: { component: componentDescription('bs-ai-greeting') } } },
+    render: args => html `
+    <bs-ai-greeting assistant-name=${args.assistantName} product-name=${args.productName || undefined}></bs-ai-greeting>
+  `,
+    argTypes: {
+        assistantName: { control: 'text', description: propDescription('bs-ai-greeting', 'assistantName') },
+        productName: { control: 'text', description: propDescription('bs-ai-greeting', 'productName') },
+    },
+    args: {
+        assistantName: 'Genie',
+        productName: 'Brandsync',
+    },
+};
+export default meta;
+export const Default = {};
+export const WithoutProductName = {
+    name: 'Without product name',
+    args: { productName: '' },
+};

package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.css

@@ -3,9 +3,15 @@
   --bs-ai-thinking-gap: var(--bs-spacing-100);
   --bs-ai-thinking-icon-size: 24px;
   --bs-ai-thinking-text: var(--bs-text-muted);
+  /* The moving highlight band in the shimmer sweep. Aliased to --bs-text-default rather than
+   * Figma's literal gradient stop (#cedeff, tuned for light mode only) -- --bs-text-default is
+   * already more prominent than --bs-text-muted in both themes (near-black on white in light,
+   * white in dark), so the sweep reads as a highlight in either theme without a separate
+   * dark-mode override. */
+  --bs-ai-thinking-shimmer-highlight: var(--bs-text-default);
   --bs-ai-thinking-font-size: var(--bs-font-size-md);
   --bs-ai-thinking-line-height: var(--bs-line-height-body-md);
-  /* Figma's keyframe track for this label runs over exactly 2s -- no --bs-duration-* token
+  /* Figma's own keyframe track for this label runs over exactly 2s -- no --bs-duration-* token
    * reaches that high (the longest, --bs-duration-slower, is 500ms), so this is aliased directly
    * to the literal value, same precedent as bs-tooltip's --bs-tooltip-shadow. */
   --bs-ai-thinking-cycle-duration: 2s;
@@ -27,34 +33,42 @@
 }
 
 .bs-ai-thinking__label {
-  color: var(--bs-ai-thinking-text);
   font-size: var(--bs-ai-thinking-font-size);
   line-height: calc(var(--bs-ai-thinking-line-height) * 1px);
-  animation: bs-ai-thinking-pulse var(--bs-ai-thinking-cycle-duration) linear infinite;
+  background-image: linear-gradient(
+    90deg,
+    var(--bs-ai-thinking-text) 0%,
+    var(--bs-ai-thinking-text) 44%,
+    var(--bs-ai-thinking-shimmer-highlight) 50%,
+    var(--bs-ai-thinking-text) 56%,
+    var(--bs-ai-thinking-text) 100%
+  );
+  background-size: 200% 100%;
+  background-position: 200% 0;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: bs-ai-thinking-shimmer var(--bs-ai-thinking-cycle-duration) linear infinite;
 }
 
-/* Reproduces Figma's exact keyframe track for this node (hold hidden briefly, ease in with the
- * source's own cubic-bezier, hold visible, then reset) -- a breathing pulse, not an invented
- * shimmer sweep. */
-@keyframes bs-ai-thinking-pulse {
+/* Sweeps a brighter highlight band across the label left-to-right, looping -- a standard
+ * "AI is working" text shimmer, replacing the literal opacity-pulse keyframe track Figma
+ * exported (a plain fade-in/hold/reset), per explicit request. */
+@keyframes bs-ai-thinking-shimmer {
   0% {
-    opacity: 0;
-  }
-  8.175% {
-    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
-    opacity: 0;
-  }
-  80.546% {
-    opacity: 1;
+    background-position: 200% 0;
   }
   100% {
-    opacity: 1;
+    background-position: -200% 0;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .bs-ai-thinking__label {
     animation: none;
-    opacity: 1;
+    background-image: none;
+    -webkit-text-fill-color: currentcolor;
+    color: var(--bs-ai-thinking-text);
   }
 }

package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.js

@@ -2,8 +2,8 @@ import { h } from "@stencil/core";
 import { GENIE_MARK_ICON } from "./genie-mark-icon";
 /**
  * A small inline status indicator for Genie AI surfaces: the colorful Genie mark next to a label
- * (e.g. "Retrieving", "Thinking", "Searching") whose text pulses in a slow breathing loop while
- * an operation is in progress.
+ * (e.g. "Retrieving", "Thinking", "Searching") whose text shimmers with a moving highlight band
+ * while an operation is in progress.
  *
  * ## When to use
  * - Inline in a Genie AI chat transcript to show what the assistant is currently doing while a
@@ -12,26 +12,24 @@ import { GENIE_MARK_ICON } from "./genie-mark-icon";
  * ## When not to use
  * - A blocking/full-panel loading state -- this is a small inline indicator, not a spinner overlay.
  *
- * The label's pulse animation reproduces Figma's exact keyframe track (a plain opacity
- * fade-in/hold/reset with the source's own cubic-bezier easing) rather than an invented
- * shimmer-sweep -- the source design only specifies this one animation.
- *
  * @part icon - The Genie mark icon.
  * @part label - The status label text.
  * @prop --bs-ai-thinking-gap - Gap between icon and label. Aliased to `--bs-spacing-100`.
  * @prop --bs-ai-thinking-icon-size - Width/height of the icon.
- * @prop --bs-ai-thinking-text - Label color. Aliased to `--bs-text-muted`.
+ * @prop --bs-ai-thinking-text - Label base color. Aliased to `--bs-text-muted`.
+ * @prop --bs-ai-thinking-shimmer-highlight - Color of the moving highlight band. Aliased to
+ *   `--bs-text-default` (more prominent than `--bs-text-muted` in both themes).
  * @prop --bs-ai-thinking-font-size - Label font size. Aliased to `--bs-font-size-md`.
  * @prop --bs-ai-thinking-line-height - Label line height. Aliased to `--bs-line-height-body-md`.
- * @prop --bs-ai-thinking-cycle-duration - Duration of one pulse loop. Figma specifies exactly 2s,
- *   longer than any `--bs-duration-*` token (max `--bs-duration-slower` is 500ms), so this is
- *   aliased directly to the literal value.
+ * @prop --bs-ai-thinking-cycle-duration - Duration of one shimmer sweep. Figma's own keyframe
+ *   track for this label runs over exactly 2s, longer than any `--bs-duration-*` token (max
+ *   `--bs-duration-slower` is 500ms), so this is aliased directly to the literal value.
  */
 export class BsAiThinking {
     /** The status text shown next to the icon, e.g. "Retrieving", "Thinking", "Searching". */
     label = 'Thinking';
     render() {
-        return (h("div", { key: '5efb57ce1f0d5bcaed2c0ea963566be5f153e983', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: '24e00c0d94ad448cd0f9b08f42baf0208e70baa5', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: '8d207d2c9f7752c853fa85991564d4dd0f547b4c', part: "label", class: "bs-ai-thinking__label" }, this.label)));
+        return (h("div", { key: 'b72bc5095cc94257821541517f3446bac960df49', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: '6c41c71416fc77f7385505754a68786b5f3412fa', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: '8edef57f7b31a03e2add401e42acdb7b6525a432', part: "label", class: "bs-ai-thinking__label" }, this.label)));
     }
     static get is() { return "bs-ai-thinking"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,41 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-attachment', () => {
+    it('renders an image thumbnail by default', async () => {
+        const { root } = await render(h("bs-attachment", { "image-src": "/photo.jpg", "image-alt": "A photo" }));
+        const thumbnail = root.shadowRoot.querySelector('[part="thumbnail"]');
+        expect(thumbnail).not.toBeNull();
+        const img = root.shadowRoot.querySelector('img');
+        expect(img.getAttribute('src')).toBe('/photo.jpg');
+        expect(img.getAttribute('alt')).toBe('A photo');
+    });
+    it('renders a filename card with a PDF badge for type="pdf"', async () => {
+        const { root } = await render(h("bs-attachment", { type: "pdf", "file-name": "report.pdf" }));
+        expect(root.shadowRoot.querySelector('[part="card"]')).not.toBeNull();
+        expect(root).toHaveTextContent('report.pdf');
+        expect(root.shadowRoot.querySelector('[part="badge"]').className).toContain('bs-attachment__badge--pdf');
+    });
+    it('renders a filename card with a document badge for type="document"', async () => {
+        const { root } = await render(h("bs-attachment", { type: "document", "file-name": "notes.docx" }));
+        expect(root.shadowRoot.querySelector('[part="badge"]').className).toContain('bs-attachment__badge--document');
+    });
+    it('shows a spinner in the badge instead of the file icon when loading', async () => {
+        const { root } = await render(h("bs-attachment", { type: "pdf", loading: true }));
+        const badge = root.shadowRoot.querySelector('[part="badge"]');
+        expect(badge.querySelector('svg')).toBeNull();
+        expect(badge.querySelector('[role="status"]')).not.toBeNull();
+    });
+    it('marks the host aria-busy when loading', async () => {
+        const { root } = await render(h("bs-attachment", { loading: true }));
+        expect(root.shadowRoot.querySelector('.bs-attachment').getAttribute('aria-busy')).toBe('true');
+    });
+    it('emits bsRemove when the remove button is clicked', async () => {
+        const { root, spyOnEvent } = await render(h("bs-attachment", null));
+        const removeSpy = spyOnEvent('bsRemove');
+        root.shadowRoot.querySelector('[part="remove"]').click();
+        expect(removeSpy).toHaveReceivedEventTimes(1);
+    });
+    it('does not render a remove button when removable is false', async () => {
+        const { root } = await render(h("bs-attachment", { removable: false }));
+        expect(root.shadowRoot.querySelector('[part="remove"]')).toBeNull();
+    });
+});