@brandsync/wc 0.0.2 → 0.0.4

package/dist/types/components.d.ts

@@ -123,6 +123,68 @@ export namespace Components {
          */
         "surface": BsCardSurface;
     }
+    /**
+     * The header bar that sits above `bs-composer` in a Genie AI chat panel: the Genie brand mark on
+     * the left and four fixed actions (new chat, history, expand, close) on the right.
+     * ## When to use
+     * - The top bar of a Genie AI chat panel, directly above a `bs-composer`.
+     * ## When not to use
+     * - A generic app/page header — this component's layout and actions are purpose-built for the
+     *   Genie chat panel, not a general navigation bar.
+     * @prop --bs-chatbot-header-bg - Background of the header bar. Aliased to `--bs-surface-base`.
+     * @prop --bs-chatbot-header-border - Bottom border color. Aliased to `--bs-border-default`.
+     * @prop --bs-chatbot-header-padding-top - Aliased to `--bs-spacing-200`.
+     * @prop --bs-chatbot-header-padding-bottom - Aliased to `--bs-spacing-100`.
+     * @prop --bs-chatbot-header-padding-x - Aliased to `--bs-margin-fluid`.
+     * @prop --bs-chatbot-header-gap - Gap between the logo and the button group. Aliased to `--bs-navigation-header-gap`.
+     * @prop --bs-chatbot-header-button-size - Width/height of each icon button. Aliased to `--bs-spacing-600`.
+     * @prop --bs-chatbot-header-button-radius - Corner radius of each icon button. Aliased to `--bs-border-radius-100`.
+     * @prop --bs-chatbot-header-button-hover - Icon button background on hover. Aliased to `--bs-color-neutral-container`.
+     * @prop --bs-chatbot-header-button-pressed - Icon button background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+     * @prop --bs-chatbot-header-icon - Icon color. Aliased to `--bs-icon-default`.
+     */
+    interface BsChatbotHeader {
+        /**
+          * Whether the chat panel is currently expanded (e.g. to full viewport width/height). This component has no visibility into the surrounding layout, so it does not resize anything itself -- it only tracks and reflects the toggle state (via the `expanded` attribute, for CSS hooks, and `aria-pressed`/`aria-label` on the expand button) and emits `bsExpand` with the new value. The consuming app is responsible for actually resizing its own chat panel container in response to that event, since only the app knows what that container is.
+          * @default false
+         */
+        "expanded": boolean;
+        /**
+          * Accessible label for the header landmark, and alt text context for the logo image.
+          * @default 'Genie'
+         */
+        "heading": string;
+    }
+    /**
+     * The row of action buttons that appears below an AI response message in a Genie chat panel:
+     * like, dislike, copy, regenerate, and more-options icon buttons, plus an optional "N sources"
+     * button.
+     * ## When to use
+     * - Directly below an AI-generated response message in a Genie chat panel.
+     * ## When not to use
+     * - Below a user's own message -- these actions (regenerate, like/dislike a response, etc.) only
+     *   make sense for AI-generated content.
+     * @prop --bs-chatbot-response-action-gap - Gap between all buttons in the row. Aliased to `--bs-spacing-100`.
+     * @prop --bs-chatbot-response-action-padding-top - Aliased to `--bs-spacing-150`.
+     * @prop --bs-chatbot-response-action-padding-bottom - Aliased to `--bs-spacing-50`.
+     * @prop --bs-chatbot-response-action-button-size - Width/height of each icon button. Aliased to `--bs-spacing-400`.
+     * @prop --bs-chatbot-response-action-button-radius - Corner radius of each button. Aliased to `--bs-border-radius-100`.
+     * @prop --bs-chatbot-response-action-button-hover - Button background on hover. Aliased to `--bs-color-neutral-container`.
+     * @prop --bs-chatbot-response-action-button-pressed - Button background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+     * @prop --bs-chatbot-response-action-icon - Icon color. Aliased to `--bs-icon-neutral-default`.
+     * @prop --bs-chatbot-response-action-sources-gap - Gap between the sources icon and its label. Aliased to `--bs-spacing-50`.
+     * @prop --bs-chatbot-response-action-sources-padding-left - Aliased to `--bs-spacing-100`.
+     * @prop --bs-chatbot-response-action-sources-padding-right - Aliased to `--bs-spacing-150`.
+     * @prop --bs-chatbot-response-action-sources-color - Text color of the sources label. Aliased to `--bs-text-neutral-default`.
+     * @prop --bs-chatbot-response-action-sources-font-size - Aliased to `--bs-font-size-sm`.
+     * @prop --bs-chatbot-response-action-sources-line-height - Aliased to `--bs-line-height-body-sm`.
+     */
+    interface BsChatbotResponseAction {
+        /**
+          * Number of sources backing the response. When set to a positive number, renders the "N sources" button (singular "1 source" / plural "N sources"). When unset or `0`, the button is not rendered at all.
+         */
+        "sourcesCount"?: number;
+    }
     /**
      * A chat composer input for Genie AI-style conversational interfaces: a text field
      * plus an attach button, a mic/voice-recording toggle, and a single primary action button whose
@@ -132,6 +194,11 @@ export namespace Components {
      * ## When not to use
      * - A general-purpose text field — use `bs-input` instead; this component's layout and states are
      *   purpose-built for a chat composer, not a generic form field.
+     * ## Focus
+     * Uses `shadow: { delegatesFocus: true }`, so calling `.focus()` on the `<bs-composer>` host
+     * element itself (not just its internal `<input>`) moves focus into the shadow-DOM text field --
+     * useful for e.g. focusing the composer after a parent view mounts, without reaching into its
+     * shadow root.
      * @prop --bs-composer-radius - Corner radius of the container. Aliased to `--bs-border-radius-150`.
      * @prop --bs-composer-button-radius - Corner radius of the attach/mic/action buttons. Aliased to `--bs-border-radius-100`.
      * @prop --bs-composer-button-size - Width/height of the attach/mic/action buttons. Aliased to `--bs-spacing-600`.
@@ -264,6 +331,14 @@ export namespace Components {
         "size": BsModalSize;
     }
 }
+export interface BsChatbotHeaderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsChatbotHeaderElement;
+}
+export interface BsChatbotResponseActionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsChatbotResponseActionElement;
+}
 export interface BsComposerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsComposerElement;
@@ -360,6 +435,92 @@ declare global {
         prototype: HTMLBsCardElement;
         new (): HTMLBsCardElement;
     };
+    interface HTMLBsChatbotHeaderElementEventMap {
+        "bsNewChat": void;
+        "bsHistory": void;
+        "bsExpand": boolean;
+        "bsClose": void;
+    }
+    /**
+     * The header bar that sits above `bs-composer` in a Genie AI chat panel: the Genie brand mark on
+     * the left and four fixed actions (new chat, history, expand, close) on the right.
+     * ## When to use
+     * - The top bar of a Genie AI chat panel, directly above a `bs-composer`.
+     * ## When not to use
+     * - A generic app/page header — this component's layout and actions are purpose-built for the
+     *   Genie chat panel, not a general navigation bar.
+     * @prop --bs-chatbot-header-bg - Background of the header bar. Aliased to `--bs-surface-base`.
+     * @prop --bs-chatbot-header-border - Bottom border color. Aliased to `--bs-border-default`.
+     * @prop --bs-chatbot-header-padding-top - Aliased to `--bs-spacing-200`.
+     * @prop --bs-chatbot-header-padding-bottom - Aliased to `--bs-spacing-100`.
+     * @prop --bs-chatbot-header-padding-x - Aliased to `--bs-margin-fluid`.
+     * @prop --bs-chatbot-header-gap - Gap between the logo and the button group. Aliased to `--bs-navigation-header-gap`.
+     * @prop --bs-chatbot-header-button-size - Width/height of each icon button. Aliased to `--bs-spacing-600`.
+     * @prop --bs-chatbot-header-button-radius - Corner radius of each icon button. Aliased to `--bs-border-radius-100`.
+     * @prop --bs-chatbot-header-button-hover - Icon button background on hover. Aliased to `--bs-color-neutral-container`.
+     * @prop --bs-chatbot-header-button-pressed - Icon button background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+     * @prop --bs-chatbot-header-icon - Icon color. Aliased to `--bs-icon-default`.
+     */
+    interface HTMLBsChatbotHeaderElement extends Components.BsChatbotHeader, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsChatbotHeaderElementEventMap>(type: K, listener: (this: HTMLBsChatbotHeaderElement, ev: BsChatbotHeaderCustomEvent<HTMLBsChatbotHeaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsChatbotHeaderElementEventMap>(type: K, listener: (this: HTMLBsChatbotHeaderElement, ev: BsChatbotHeaderCustomEvent<HTMLBsChatbotHeaderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsChatbotHeaderElement: {
+        prototype: HTMLBsChatbotHeaderElement;
+        new (): HTMLBsChatbotHeaderElement;
+    };
+    interface HTMLBsChatbotResponseActionElementEventMap {
+        "bsLike": void;
+        "bsDislike": void;
+        "bsCopy": void;
+        "bsRegenerate": void;
+        "bsMenuOpen": void;
+        "bsSourcesClick": void;
+    }
+    /**
+     * The row of action buttons that appears below an AI response message in a Genie chat panel:
+     * like, dislike, copy, regenerate, and more-options icon buttons, plus an optional "N sources"
+     * button.
+     * ## When to use
+     * - Directly below an AI-generated response message in a Genie chat panel.
+     * ## When not to use
+     * - Below a user's own message -- these actions (regenerate, like/dislike a response, etc.) only
+     *   make sense for AI-generated content.
+     * @prop --bs-chatbot-response-action-gap - Gap between all buttons in the row. Aliased to `--bs-spacing-100`.
+     * @prop --bs-chatbot-response-action-padding-top - Aliased to `--bs-spacing-150`.
+     * @prop --bs-chatbot-response-action-padding-bottom - Aliased to `--bs-spacing-50`.
+     * @prop --bs-chatbot-response-action-button-size - Width/height of each icon button. Aliased to `--bs-spacing-400`.
+     * @prop --bs-chatbot-response-action-button-radius - Corner radius of each button. Aliased to `--bs-border-radius-100`.
+     * @prop --bs-chatbot-response-action-button-hover - Button background on hover. Aliased to `--bs-color-neutral-container`.
+     * @prop --bs-chatbot-response-action-button-pressed - Button background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+     * @prop --bs-chatbot-response-action-icon - Icon color. Aliased to `--bs-icon-neutral-default`.
+     * @prop --bs-chatbot-response-action-sources-gap - Gap between the sources icon and its label. Aliased to `--bs-spacing-50`.
+     * @prop --bs-chatbot-response-action-sources-padding-left - Aliased to `--bs-spacing-100`.
+     * @prop --bs-chatbot-response-action-sources-padding-right - Aliased to `--bs-spacing-150`.
+     * @prop --bs-chatbot-response-action-sources-color - Text color of the sources label. Aliased to `--bs-text-neutral-default`.
+     * @prop --bs-chatbot-response-action-sources-font-size - Aliased to `--bs-font-size-sm`.
+     * @prop --bs-chatbot-response-action-sources-line-height - Aliased to `--bs-line-height-body-sm`.
+     */
+    interface HTMLBsChatbotResponseActionElement extends Components.BsChatbotResponseAction, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsChatbotResponseActionElementEventMap>(type: K, listener: (this: HTMLBsChatbotResponseActionElement, ev: BsChatbotResponseActionCustomEvent<HTMLBsChatbotResponseActionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsChatbotResponseActionElementEventMap>(type: K, listener: (this: HTMLBsChatbotResponseActionElement, ev: BsChatbotResponseActionCustomEvent<HTMLBsChatbotResponseActionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsChatbotResponseActionElement: {
+        prototype: HTMLBsChatbotResponseActionElement;
+        new (): HTMLBsChatbotResponseActionElement;
+    };
     interface HTMLBsComposerElementEventMap {
         "bsInput": string;
         "bsSubmit": void;
@@ -377,6 +538,11 @@ declare global {
      * ## When not to use
      * - A general-purpose text field — use `bs-input` instead; this component's layout and states are
      *   purpose-built for a chat composer, not a generic form field.
+     * ## Focus
+     * Uses `shadow: { delegatesFocus: true }`, so calling `.focus()` on the `<bs-composer>` host
+     * element itself (not just its internal `<input>`) moves focus into the shadow-DOM text field --
+     * useful for e.g. focusing the composer after a parent view mounts, without reaching into its
+     * shadow root.
      * @prop --bs-composer-radius - Corner radius of the container. Aliased to `--bs-border-radius-150`.
      * @prop --bs-composer-button-radius - Corner radius of the attach/mic/action buttons. Aliased to `--bs-border-radius-100`.
      * @prop --bs-composer-button-size - Width/height of the attach/mic/action buttons. Aliased to `--bs-spacing-600`.
@@ -498,6 +664,8 @@ declare global {
         "bs-button": HTMLBsButtonElement;
         "bs-button-skeleton": HTMLBsButtonSkeletonElement;
         "bs-card": HTMLBsCardElement;
+        "bs-chatbot-header": HTMLBsChatbotHeaderElement;
+        "bs-chatbot-response-action": HTMLBsChatbotResponseActionElement;
         "bs-composer": HTMLBsComposerElement;
         "bs-data-table": HTMLBsDataTableElement;
         "bs-input": HTMLBsInputElement;
@@ -608,6 +776,108 @@ declare namespace LocalJSX {
          */
         "surface"?: BsCardSurface;
     }
+    /**
+     * The header bar that sits above `bs-composer` in a Genie AI chat panel: the Genie brand mark on
+     * the left and four fixed actions (new chat, history, expand, close) on the right.
+     * ## When to use
+     * - The top bar of a Genie AI chat panel, directly above a `bs-composer`.
+     * ## When not to use
+     * - A generic app/page header — this component's layout and actions are purpose-built for the
+     *   Genie chat panel, not a general navigation bar.
+     * @prop --bs-chatbot-header-bg - Background of the header bar. Aliased to `--bs-surface-base`.
+     * @prop --bs-chatbot-header-border - Bottom border color. Aliased to `--bs-border-default`.
+     * @prop --bs-chatbot-header-padding-top - Aliased to `--bs-spacing-200`.
+     * @prop --bs-chatbot-header-padding-bottom - Aliased to `--bs-spacing-100`.
+     * @prop --bs-chatbot-header-padding-x - Aliased to `--bs-margin-fluid`.
+     * @prop --bs-chatbot-header-gap - Gap between the logo and the button group. Aliased to `--bs-navigation-header-gap`.
+     * @prop --bs-chatbot-header-button-size - Width/height of each icon button. Aliased to `--bs-spacing-600`.
+     * @prop --bs-chatbot-header-button-radius - Corner radius of each icon button. Aliased to `--bs-border-radius-100`.
+     * @prop --bs-chatbot-header-button-hover - Icon button background on hover. Aliased to `--bs-color-neutral-container`.
+     * @prop --bs-chatbot-header-button-pressed - Icon button background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+     * @prop --bs-chatbot-header-icon - Icon color. Aliased to `--bs-icon-default`.
+     */
+    interface BsChatbotHeader {
+        /**
+          * Whether the chat panel is currently expanded (e.g. to full viewport width/height). This component has no visibility into the surrounding layout, so it does not resize anything itself -- it only tracks and reflects the toggle state (via the `expanded` attribute, for CSS hooks, and `aria-pressed`/`aria-label` on the expand button) and emits `bsExpand` with the new value. The consuming app is responsible for actually resizing its own chat panel container in response to that event, since only the app knows what that container is.
+          * @default false
+         */
+        "expanded"?: boolean;
+        /**
+          * Accessible label for the header landmark, and alt text context for the logo image.
+          * @default 'Genie'
+         */
+        "heading"?: string;
+        /**
+          * Fires when the "Close" button is clicked.
+         */
+        "onBsClose"?: (event: BsChatbotHeaderCustomEvent<void>) => void;
+        /**
+          * Fires when the "Expand"/"Collapse" button is clicked, with the new `expanded` value.
+         */
+        "onBsExpand"?: (event: BsChatbotHeaderCustomEvent<boolean>) => void;
+        /**
+          * Fires when the "History" button is clicked.
+         */
+        "onBsHistory"?: (event: BsChatbotHeaderCustomEvent<void>) => void;
+        /**
+          * Fires when the "New chat" button is clicked.
+         */
+        "onBsNewChat"?: (event: BsChatbotHeaderCustomEvent<void>) => void;
+    }
+    /**
+     * The row of action buttons that appears below an AI response message in a Genie chat panel:
+     * like, dislike, copy, regenerate, and more-options icon buttons, plus an optional "N sources"
+     * button.
+     * ## When to use
+     * - Directly below an AI-generated response message in a Genie chat panel.
+     * ## When not to use
+     * - Below a user's own message -- these actions (regenerate, like/dislike a response, etc.) only
+     *   make sense for AI-generated content.
+     * @prop --bs-chatbot-response-action-gap - Gap between all buttons in the row. Aliased to `--bs-spacing-100`.
+     * @prop --bs-chatbot-response-action-padding-top - Aliased to `--bs-spacing-150`.
+     * @prop --bs-chatbot-response-action-padding-bottom - Aliased to `--bs-spacing-50`.
+     * @prop --bs-chatbot-response-action-button-size - Width/height of each icon button. Aliased to `--bs-spacing-400`.
+     * @prop --bs-chatbot-response-action-button-radius - Corner radius of each button. Aliased to `--bs-border-radius-100`.
+     * @prop --bs-chatbot-response-action-button-hover - Button background on hover. Aliased to `--bs-color-neutral-container`.
+     * @prop --bs-chatbot-response-action-button-pressed - Button background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+     * @prop --bs-chatbot-response-action-icon - Icon color. Aliased to `--bs-icon-neutral-default`.
+     * @prop --bs-chatbot-response-action-sources-gap - Gap between the sources icon and its label. Aliased to `--bs-spacing-50`.
+     * @prop --bs-chatbot-response-action-sources-padding-left - Aliased to `--bs-spacing-100`.
+     * @prop --bs-chatbot-response-action-sources-padding-right - Aliased to `--bs-spacing-150`.
+     * @prop --bs-chatbot-response-action-sources-color - Text color of the sources label. Aliased to `--bs-text-neutral-default`.
+     * @prop --bs-chatbot-response-action-sources-font-size - Aliased to `--bs-font-size-sm`.
+     * @prop --bs-chatbot-response-action-sources-line-height - Aliased to `--bs-line-height-body-sm`.
+     */
+    interface BsChatbotResponseAction {
+        /**
+          * Fires when the "Copy" button is clicked.
+         */
+        "onBsCopy"?: (event: BsChatbotResponseActionCustomEvent<void>) => void;
+        /**
+          * Fires when the "Dislike" button is clicked.
+         */
+        "onBsDislike"?: (event: BsChatbotResponseActionCustomEvent<void>) => void;
+        /**
+          * Fires when the "Like" button is clicked.
+         */
+        "onBsLike"?: (event: BsChatbotResponseActionCustomEvent<void>) => void;
+        /**
+          * Fires when the "More options" button is clicked.
+         */
+        "onBsMenuOpen"?: (event: BsChatbotResponseActionCustomEvent<void>) => void;
+        /**
+          * Fires when the "Regenerate" button is clicked.
+         */
+        "onBsRegenerate"?: (event: BsChatbotResponseActionCustomEvent<void>) => void;
+        /**
+          * Fires when the "N sources" button is clicked.
+         */
+        "onBsSourcesClick"?: (event: BsChatbotResponseActionCustomEvent<void>) => void;
+        /**
+          * Number of sources backing the response. When set to a positive number, renders the "N sources" button (singular "1 source" / plural "N sources"). When unset or `0`, the button is not rendered at all.
+         */
+        "sourcesCount"?: number;
+    }
     /**
      * A chat composer input for Genie AI-style conversational interfaces: a text field
      * plus an attach button, a mic/voice-recording toggle, and a single primary action button whose
@@ -617,6 +887,11 @@ declare namespace LocalJSX {
      * ## When not to use
      * - A general-purpose text field — use `bs-input` instead; this component's layout and states are
      *   purpose-built for a chat composer, not a generic form field.
+     * ## Focus
+     * Uses `shadow: { delegatesFocus: true }`, so calling `.focus()` on the `<bs-composer>` host
+     * element itself (not just its internal `<input>`) moves focus into the shadow-DOM text field --
+     * useful for e.g. focusing the composer after a parent view mounts, without reaching into its
+     * shadow root.
      * @prop --bs-composer-radius - Corner radius of the container. Aliased to `--bs-border-radius-150`.
      * @prop --bs-composer-button-radius - Corner radius of the attach/mic/action buttons. Aliased to `--bs-border-radius-100`.
      * @prop --bs-composer-button-size - Width/height of the attach/mic/action buttons. Aliased to `--bs-spacing-600`.
@@ -794,6 +1069,13 @@ declare namespace LocalJSX {
     interface BsCardAttributes {
         "surface": BsCardSurface;
     }
+    interface BsChatbotHeaderAttributes {
+        "heading": string;
+        "expanded": boolean;
+    }
+    interface BsChatbotResponseActionAttributes {
+        "sourcesCount": number;
+    }
     interface BsComposerAttributes {
         "variant": BsComposerVariant;
         "placeholder": string;
@@ -826,6 +1108,8 @@ declare namespace LocalJSX {
         "bs-button": Omit<BsButton, keyof BsButtonAttributes> & { [K in keyof BsButton & keyof BsButtonAttributes]?: BsButton[K] } & { [K in keyof BsButton & keyof BsButtonAttributes as `attr:${K}`]?: BsButtonAttributes[K] } & { [K in keyof BsButton & keyof BsButtonAttributes as `prop:${K}`]?: BsButton[K] };
         "bs-button-skeleton": Omit<BsButtonSkeleton, keyof BsButtonSkeletonAttributes> & { [K in keyof BsButtonSkeleton & keyof BsButtonSkeletonAttributes]?: BsButtonSkeleton[K] } & { [K in keyof BsButtonSkeleton & keyof BsButtonSkeletonAttributes as `attr:${K}`]?: BsButtonSkeletonAttributes[K] } & { [K in keyof BsButtonSkeleton & keyof BsButtonSkeletonAttributes as `prop:${K}`]?: BsButtonSkeleton[K] };
         "bs-card": Omit<BsCard, keyof BsCardAttributes> & { [K in keyof BsCard & keyof BsCardAttributes]?: BsCard[K] } & { [K in keyof BsCard & keyof BsCardAttributes as `attr:${K}`]?: BsCardAttributes[K] } & { [K in keyof BsCard & keyof BsCardAttributes as `prop:${K}`]?: BsCard[K] };
+        "bs-chatbot-header": Omit<BsChatbotHeader, keyof BsChatbotHeaderAttributes> & { [K in keyof BsChatbotHeader & keyof BsChatbotHeaderAttributes]?: BsChatbotHeader[K] } & { [K in keyof BsChatbotHeader & keyof BsChatbotHeaderAttributes as `attr:${K}`]?: BsChatbotHeaderAttributes[K] } & { [K in keyof BsChatbotHeader & keyof BsChatbotHeaderAttributes as `prop:${K}`]?: BsChatbotHeader[K] };
+        "bs-chatbot-response-action": Omit<BsChatbotResponseAction, keyof BsChatbotResponseActionAttributes> & { [K in keyof BsChatbotResponseAction & keyof BsChatbotResponseActionAttributes]?: BsChatbotResponseAction[K] } & { [K in keyof BsChatbotResponseAction & keyof BsChatbotResponseActionAttributes as `attr:${K}`]?: BsChatbotResponseActionAttributes[K] } & { [K in keyof BsChatbotResponseAction & keyof BsChatbotResponseActionAttributes as `prop:${K}`]?: BsChatbotResponseAction[K] };
         "bs-composer": Omit<BsComposer, keyof BsComposerAttributes> & { [K in keyof BsComposer & keyof BsComposerAttributes]?: BsComposer[K] } & { [K in keyof BsComposer & keyof BsComposerAttributes as `attr:${K}`]?: BsComposerAttributes[K] } & { [K in keyof BsComposer & keyof BsComposerAttributes as `prop:${K}`]?: BsComposer[K] };
         "bs-data-table": Omit<BsDataTable, keyof BsDataTableAttributes> & { [K in keyof BsDataTable & keyof BsDataTableAttributes]?: BsDataTable[K] } & { [K in keyof BsDataTable & keyof BsDataTableAttributes as `attr:${K}`]?: BsDataTableAttributes[K] } & { [K in keyof BsDataTable & keyof BsDataTableAttributes as `prop:${K}`]?: BsDataTable[K] };
         "bs-input": Omit<BsInput, keyof BsInputAttributes> & { [K in keyof BsInput & keyof BsInputAttributes]?: BsInput[K] } & { [K in keyof BsInput & keyof BsInputAttributes as `attr:${K}`]?: BsInputAttributes[K] } & { [K in keyof BsInput & keyof BsInputAttributes as `prop:${K}`]?: BsInput[K] };
@@ -895,6 +1179,52 @@ declare module "@stencil/core" {
              * - For a dismissible/transient message — use a modal or a dedicated notification component.
              */
             "bs-card": LocalJSX.IntrinsicElements["bs-card"] & JSXBase.HTMLAttributes<HTMLBsCardElement>;
+            /**
+             * The header bar that sits above `bs-composer` in a Genie AI chat panel: the Genie brand mark on
+             * the left and four fixed actions (new chat, history, expand, close) on the right.
+             * ## When to use
+             * - The top bar of a Genie AI chat panel, directly above a `bs-composer`.
+             * ## When not to use
+             * - A generic app/page header — this component's layout and actions are purpose-built for the
+             *   Genie chat panel, not a general navigation bar.
+             * @prop --bs-chatbot-header-bg - Background of the header bar. Aliased to `--bs-surface-base`.
+             * @prop --bs-chatbot-header-border - Bottom border color. Aliased to `--bs-border-default`.
+             * @prop --bs-chatbot-header-padding-top - Aliased to `--bs-spacing-200`.
+             * @prop --bs-chatbot-header-padding-bottom - Aliased to `--bs-spacing-100`.
+             * @prop --bs-chatbot-header-padding-x - Aliased to `--bs-margin-fluid`.
+             * @prop --bs-chatbot-header-gap - Gap between the logo and the button group. Aliased to `--bs-navigation-header-gap`.
+             * @prop --bs-chatbot-header-button-size - Width/height of each icon button. Aliased to `--bs-spacing-600`.
+             * @prop --bs-chatbot-header-button-radius - Corner radius of each icon button. Aliased to `--bs-border-radius-100`.
+             * @prop --bs-chatbot-header-button-hover - Icon button background on hover. Aliased to `--bs-color-neutral-container`.
+             * @prop --bs-chatbot-header-button-pressed - Icon button background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+             * @prop --bs-chatbot-header-icon - Icon color. Aliased to `--bs-icon-default`.
+             */
+            "bs-chatbot-header": LocalJSX.IntrinsicElements["bs-chatbot-header"] & JSXBase.HTMLAttributes<HTMLBsChatbotHeaderElement>;
+            /**
+             * The row of action buttons that appears below an AI response message in a Genie chat panel:
+             * like, dislike, copy, regenerate, and more-options icon buttons, plus an optional "N sources"
+             * button.
+             * ## When to use
+             * - Directly below an AI-generated response message in a Genie chat panel.
+             * ## When not to use
+             * - Below a user's own message -- these actions (regenerate, like/dislike a response, etc.) only
+             *   make sense for AI-generated content.
+             * @prop --bs-chatbot-response-action-gap - Gap between all buttons in the row. Aliased to `--bs-spacing-100`.
+             * @prop --bs-chatbot-response-action-padding-top - Aliased to `--bs-spacing-150`.
+             * @prop --bs-chatbot-response-action-padding-bottom - Aliased to `--bs-spacing-50`.
+             * @prop --bs-chatbot-response-action-button-size - Width/height of each icon button. Aliased to `--bs-spacing-400`.
+             * @prop --bs-chatbot-response-action-button-radius - Corner radius of each button. Aliased to `--bs-border-radius-100`.
+             * @prop --bs-chatbot-response-action-button-hover - Button background on hover. Aliased to `--bs-color-neutral-container`.
+             * @prop --bs-chatbot-response-action-button-pressed - Button background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+             * @prop --bs-chatbot-response-action-icon - Icon color. Aliased to `--bs-icon-neutral-default`.
+             * @prop --bs-chatbot-response-action-sources-gap - Gap between the sources icon and its label. Aliased to `--bs-spacing-50`.
+             * @prop --bs-chatbot-response-action-sources-padding-left - Aliased to `--bs-spacing-100`.
+             * @prop --bs-chatbot-response-action-sources-padding-right - Aliased to `--bs-spacing-150`.
+             * @prop --bs-chatbot-response-action-sources-color - Text color of the sources label. Aliased to `--bs-text-neutral-default`.
+             * @prop --bs-chatbot-response-action-sources-font-size - Aliased to `--bs-font-size-sm`.
+             * @prop --bs-chatbot-response-action-sources-line-height - Aliased to `--bs-line-height-body-sm`.
+             */
+            "bs-chatbot-response-action": LocalJSX.IntrinsicElements["bs-chatbot-response-action"] & JSXBase.HTMLAttributes<HTMLBsChatbotResponseActionElement>;
             /**
              * A chat composer input for Genie AI-style conversational interfaces: a text field
              * plus an attach button, a mic/voice-recording toggle, and a single primary action button whose
@@ -904,6 +1234,11 @@ declare module "@stencil/core" {
              * ## When not to use
              * - A general-purpose text field — use `bs-input` instead; this component's layout and states are
              *   purpose-built for a chat composer, not a generic form field.
+             * ## Focus
+             * Uses `shadow: { delegatesFocus: true }`, so calling `.focus()` on the `<bs-composer>` host
+             * element itself (not just its internal `<input>`) moves focus into the shadow-DOM text field --
+             * useful for e.g. focusing the composer after a parent view mounts, without reaching into its
+             * shadow root.
              * @prop --bs-composer-radius - Corner radius of the container. Aliased to `--bs-border-radius-150`.
              * @prop --bs-composer-button-radius - Corner radius of the attach/mic/action buttons. Aliased to `--bs-border-radius-100`.
              * @prop --bs-composer-button-size - Width/height of the attach/mic/action buttons. Aliased to `--bs-spacing-600`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandsync/wc",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "publishConfig": {
     "access": "public"
   },
@@ -52,6 +52,7 @@
     "@stencil/core": "^4.27.1 || ^5.0.0-0",
     "@stencil/react-output-target": "^1.6.2",
     "@stencil/vitest": "^1.8.3",
+    "@storybook/addon-a11y": "^10.5.8",
     "@storybook/addon-docs": "^10.5.8",
     "@storybook/web-components-vite": "^10.5.8",
     "@types/node": "^22.13.5",

package/readme.md

@@ -46,3 +46,41 @@ import '@brandsync/wc/dist/components/bs-button.js';
 
 React and Angular get auto-generated wrapper packages (`@stencil/react-output-target` /
 `@stencil/angular-output-target`) built from the same source — see `stencil.config.ts`.
+
+## Design tokens — required, not optional
+
+Every component's shadow-DOM CSS is written entirely against `--bs-*` custom properties
+(`--bs-input-bg-default`, `--bs-composer-button-size`, `--bs-spacing-150`, ...). **This package does
+not inject those variables anywhere** -- it only *consumes* them. If the consuming app hasn't
+defined them, every `var(--bs-something)` (none of these declarations have a fallback) resolves to
+its CSS-invalid-at-computed-value fallback: `border: none`, `background: transparent`,
+`width`/`height`/`padding`/`gap: 0`, browser-default `font-size`. The component still renders in
+the DOM -- it just silently collapses (no visible border/box, buttons shrink to nothing, text
+fields push onto their own line) with no console error or exception pointing at the missing
+tokens, which makes it a confusing first bug to debug.
+
+Fix: load the token stylesheet this package ships (vendored from `brandsync-tokens`) once,
+globally, in the consuming app -- **before** any `bs-*` element renders:
+
+```css
+/* e.g. src/styles.css / global.css / angular.json "styles" array */
+@import '@brandsync/wc/dist/brandsync-wc/brandsync-wc.css';
+```
+
+```html
+<!-- plain HTML/CDN consumption -->
+<link rel="stylesheet" href="https://unpkg.com/@brandsync/wc/dist/brandsync-wc/brandsync-wc.css">
+```
+
+This applies identically to the HTML/CDN path, npm+bundler path, and the React/Angular wrapper
+packages -- none of them auto-inject it. If a consuming app already has its own differently-named
+design tokens (e.g. `--surface-base` instead of `--bs-color-surface-base`), that app-level token
+file does **not** satisfy this requirement even if the values match conceptually -- the shadow-DOM
+CSS only resolves `--bs-*`-prefixed names, so the vendored stylesheet above must be loaded
+regardless.
+
+Known harmless noise: the vendored `brandsync-wc.css` currently contains a handful of malformed
+token declarations from an upstream `brandsync-tokens` export step (e.g.
+`--bs-5-brand-colors-jade-brand-700: {Brand Colors.teal.700};`), which some build tools (e.g.
+Angular's CSS budget/lint step) warn about. These are pre-existing in the vendored dependency, not
+introduced by this package, and don't affect any token this library actually uses.

package/dist/brandsync-wc/p-042ad15a.entry.js

@@ -1 +0,0 @@
-import{r as o,c as s,h as r}from"./p-BOj_41o9.js";const e={ai:"Ask Genie something...",human:"Message your support agent..."},t=[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,18,14,34,22,22,10,28,18,12,24,6,20,30,14,8,26,16,32,10,22,18,12,28,8,20,14,24,10,16,30,12,22,6,18,26,8,14,32,20,10,24,6],i=class{constructor(r){o(this,r),this.bsInput=s(this,"bsInput"),this.bsSubmit=s(this,"bsSubmit"),this.bsStop=s(this,"bsStop"),this.bsVoiceConfirm=s(this,"bsVoiceConfirm"),this.bsAttach=s(this,"bsAttach"),this.bsMicToggle=s(this,"bsMicToggle")}variant="ai";placeholder;value="";state="idle";ariaLabel=null;bsInput;bsSubmit;bsStop;bsVoiceConfirm;bsAttach;bsMicToggle;onInput=o=>{this.bsInput.emit(o.target.value)};onAttachClick=()=>{this.bsAttach.emit()};onMicClick=()=>{this.bsMicToggle.emit()};onActionClick=()=>{"idle"===this.state?this.bsSubmit.emit():"generating"===this.state?this.bsStop.emit():"recording"===this.state&&this.bsVoiceConfirm.emit()};actionLabel(){return"generating"===this.state?"Stop":"recording"===this.state?"Confirm":"Send"}renderActionIcon(){return r("generating"===this.state?b:"recording"===this.state?d:n,null)}render(){const o="disabled"===this.state,s="recording"===this.state;return r("div",{key:"785b4da8ddb23f4762ac7ea379b3ecdaa9584f40",class:`bs-composer bs-composer--${this.state} bs-composer--${this.variant}`},r("div",{key:"5b470cc47221f93ce9852ebaeaf9a35d740d5df1",class:"bs-composer__text-row"},r("input",{key:"3f4093d98bc0a0ba8440da9fec1d5cb2e302b746",part:"input",class:"bs-composer__input",type:"text",value:this.value,placeholder:this.placeholder??e[this.variant],disabled:o,"aria-label":this.ariaLabel,onInput:this.onInput})),r("div",{key:"21103c8d6ac108e705487f670aeb4aaf89d45981",class:"bs-composer__controls-row"},r("button",{key:"570ef86150f5b0072008fb0215ed1f0affac7af4",type:"button",part:"attach",class:"bs-composer__attach","aria-label":"Attach",onClick:this.onAttachClick},r(a,{key:"ea030569c8b5d2bafaae3ecfe29b956a54921f34"})),s?r("span",{class:"bs-composer__waveform","aria-hidden":"true"},t.map((o=>r("span",{class:"bs-composer__waveform-bar",style:{"--bs-composer-bar-height":`${o}px`}})))):r("span",{class:"bs-composer__spacer"}),r("button",{key:"1906485b13395c9c730f7091176dab4e81ecbcb9",type:"button",part:"mic",class:"bs-composer__mic "+(s?"bs-composer__mic--recording":""),"aria-label":s?"Stop recording":"Start voice input",disabled:o,onClick:this.onMicClick},r(s?b:c,null)),r("button",{key:"3486957673a3bbf7c3dbac41fd5c19e8dbb6258a",type:"button",part:"action",class:`bs-composer__action bs-composer__action--${this.state}`,"aria-label":this.actionLabel(),disabled:o,onClick:this.onActionClick},this.renderActionIcon())))}static get delegatesFocus(){return!0}},a=()=>r("svg",{viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},r("path",{d:"M8 2.5V13.5M2.5 8H13.5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"})),c=()=>r("svg",{viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},r("path",{d:"M8 9.5C9.10457 9.5 10 8.60457 10 7.5V3.5C10 2.39543 9.10457 1.5 8 1.5C6.89543 1.5 6 2.39543 6 3.5V7.5C6 8.60457 6.89543 9.5 8 9.5Z",stroke:"currentColor","stroke-width":"1.4"}),r("path",{d:"M3.5 7V7.5C3.5 9.98528 5.51472 12 8 12C10.4853 12 12.5 9.98528 12.5 7.5V7",stroke:"currentColor","stroke-width":"1.4","stroke-linecap":"round"}),r("path",{d:"M8 12V14.5",stroke:"currentColor","stroke-width":"1.4","stroke-linecap":"round"})),n=()=>r("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},r("path",{d:"M13.5 12H7.5",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),r("path",{d:"M4.54594 20.745C4.4932 20.889 4.48589 21.0457 4.52499 21.1941C4.56409 21.3424 4.64771 21.4751 4.76459 21.5744C4.88147 21.6737 5.02599 21.7348 5.17866 21.7494C5.33133 21.7641 5.48482 21.7315 5.61844 21.6562L21.3684 12.6478C21.4857 12.583 21.5834 12.4879 21.6514 12.3725C21.7195 12.2571 21.7553 12.1255 21.7553 11.9916C21.7553 11.8576 21.7195 11.7261 21.6514 11.6107C21.5834 11.4952 21.4857 11.4002 21.3684 11.3353L5.61844 2.34937C5.48523 2.27487 5.33245 2.24278 5.18052 2.2574C5.02859 2.27201 4.88474 2.33264 4.76817 2.43117C4.65161 2.5297 4.56788 2.66145 4.52817 2.80882C4.48846 2.9562 4.49466 3.11218 4.54594 3.25594L7.5 12L4.54594 20.745Z",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})),b=()=>r("svg",{viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},r("rect",{x:"6",y:"6",width:"8",height:"8",rx:"1.5",fill:"currentColor"})),d=()=>r("svg",{viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},r("path",{d:"M4.5 10.5L8 14L15.5 6",stroke:"currentColor","stroke-width":"1.75","stroke-linecap":"round","stroke-linejoin":"round"}));i.style=":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);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}";export{i as bs_composer}