@brandsync/wc 0.0.3 → 0.0.5

package/dist/types/components.d.ts

@@ -123,6 +123,73 @@ 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 {
+        /**
+          * Whether the "more options" popup menu (the `menu` slot) is currently open. Mutable + reflected so the component can track/close itself (kebab click, click outside, Escape) the same way `bs-chatbot-header`'s `expanded` prop tracks its own toggle state, while still emitting `bsMenuOpen` for the consumer to react to.
+          * @default false
+         */
+        "menuOpen": boolean;
+        /**
+          * 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
@@ -245,6 +312,44 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * A generic dropdown/popup menu container: a rounded, elevated list of items (typically
+     * `bs-menu-item` elements).
+     * ## When to use
+     * - A popup list of actions/options triggered by another control (e.g. a "more options" kebab
+     *   button), such as `bs-chatbot-response-action`'s `menu` slot.
+     * ## When not to use
+     * - A persistent, always-visible list of options -- this component is purpose-built as a popup
+     *   surface (rounded corners, elevation shadow), not a plain list.
+     * @prop --bs-menu-bg - Background of the menu box. Aliased to `--bs-surface-raised`.
+     * @prop --bs-menu-radius - Corner radius of the menu box. Aliased to `--bs-border-radius-100`.
+     * @prop --bs-menu-padding-y - Top/bottom padding of the menu box. Aliased to `--bs-spacing-50`.
+     * @prop --bs-menu-gap - Gap between slotted items. Aliased to `--bs-spacing-50`.
+     * @prop --bs-menu-shadow - Elevation shadow of the menu box. Aliased to `--bs-shadow-sm`.
+     */
+    interface BsMenu {
+    }
+    /**
+     * A single selectable row inside a `bs-menu`: an optional icon plus a text label, rendered as a
+     * real `<button>` for correct keyboard/click semantics.
+     * ## When to use
+     * - As a child of `bs-menu`, one per selectable action/option.
+     * ## When not to use
+     * - Outside of `bs-menu` -- this component's sizing/hover treatment is designed to sit inside the
+     *   menu's rounded, padded list box.
+     * @prop --bs-menu-item-radius - Corner radius of the row. Aliased to `--bs-border-radius-100`.
+     * @prop --bs-menu-item-padding-y - Top/bottom padding. Aliased to `--bs-spacing-100`.
+     * @prop --bs-menu-item-padding-x - Left/right padding. Aliased to `--bs-spacing-150`.
+     * @prop --bs-menu-item-gap - Gap between icon and label. Aliased to `--bs-spacing-100`.
+     * @prop --bs-menu-item-hover - Background on hover. Aliased to `--bs-color-neutral-container`.
+     * @prop --bs-menu-item-pressed - Background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+     * @prop --bs-menu-item-icon-color - Icon color. Aliased to `--bs-icon-default`.
+     * @prop --bs-menu-item-color - Label text color. Aliased to `--bs-text-muted`.
+     * @prop --bs-menu-item-font-size - Aliased to `--bs-font-size-md`.
+     * @prop --bs-menu-item-line-height - Aliased to `--bs-line-height-body-md`.
+     */
+    interface BsMenuItem {
+    }
     /**
      * An overlay dialog that interrupts the current flow for a focused task or confirmation.
      * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
@@ -269,6 +374,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;
@@ -281,6 +394,10 @@ export interface BsInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsInputElement;
 }
+export interface BsMenuItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsMenuItemElement;
+}
 export interface BsModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsModalElement;
@@ -365,6 +482,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": boolean;
+        "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;
@@ -475,6 +678,63 @@ declare global {
         prototype: HTMLBsInputElement;
         new (): HTMLBsInputElement;
     };
+    /**
+     * A generic dropdown/popup menu container: a rounded, elevated list of items (typically
+     * `bs-menu-item` elements).
+     * ## When to use
+     * - A popup list of actions/options triggered by another control (e.g. a "more options" kebab
+     *   button), such as `bs-chatbot-response-action`'s `menu` slot.
+     * ## When not to use
+     * - A persistent, always-visible list of options -- this component is purpose-built as a popup
+     *   surface (rounded corners, elevation shadow), not a plain list.
+     * @prop --bs-menu-bg - Background of the menu box. Aliased to `--bs-surface-raised`.
+     * @prop --bs-menu-radius - Corner radius of the menu box. Aliased to `--bs-border-radius-100`.
+     * @prop --bs-menu-padding-y - Top/bottom padding of the menu box. Aliased to `--bs-spacing-50`.
+     * @prop --bs-menu-gap - Gap between slotted items. Aliased to `--bs-spacing-50`.
+     * @prop --bs-menu-shadow - Elevation shadow of the menu box. Aliased to `--bs-shadow-sm`.
+     */
+    interface HTMLBsMenuElement extends Components.BsMenu, HTMLStencilElement {
+    }
+    var HTMLBsMenuElement: {
+        prototype: HTMLBsMenuElement;
+        new (): HTMLBsMenuElement;
+    };
+    interface HTMLBsMenuItemElementEventMap {
+        "bsSelect": void;
+    }
+    /**
+     * A single selectable row inside a `bs-menu`: an optional icon plus a text label, rendered as a
+     * real `<button>` for correct keyboard/click semantics.
+     * ## When to use
+     * - As a child of `bs-menu`, one per selectable action/option.
+     * ## When not to use
+     * - Outside of `bs-menu` -- this component's sizing/hover treatment is designed to sit inside the
+     *   menu's rounded, padded list box.
+     * @prop --bs-menu-item-radius - Corner radius of the row. Aliased to `--bs-border-radius-100`.
+     * @prop --bs-menu-item-padding-y - Top/bottom padding. Aliased to `--bs-spacing-100`.
+     * @prop --bs-menu-item-padding-x - Left/right padding. Aliased to `--bs-spacing-150`.
+     * @prop --bs-menu-item-gap - Gap between icon and label. Aliased to `--bs-spacing-100`.
+     * @prop --bs-menu-item-hover - Background on hover. Aliased to `--bs-color-neutral-container`.
+     * @prop --bs-menu-item-pressed - Background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+     * @prop --bs-menu-item-icon-color - Icon color. Aliased to `--bs-icon-default`.
+     * @prop --bs-menu-item-color - Label text color. Aliased to `--bs-text-muted`.
+     * @prop --bs-menu-item-font-size - Aliased to `--bs-font-size-md`.
+     * @prop --bs-menu-item-line-height - Aliased to `--bs-line-height-body-md`.
+     */
+    interface HTMLBsMenuItemElement extends Components.BsMenuItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsMenuItemElementEventMap>(type: K, listener: (this: HTMLBsMenuItemElement, ev: BsMenuItemCustomEvent<HTMLBsMenuItemElementEventMap[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 HTMLBsMenuItemElementEventMap>(type: K, listener: (this: HTMLBsMenuItemElement, ev: BsMenuItemCustomEvent<HTMLBsMenuItemElementEventMap[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 HTMLBsMenuItemElement: {
+        prototype: HTMLBsMenuItemElement;
+        new (): HTMLBsMenuItemElement;
+    };
     interface HTMLBsModalElementEventMap {
         "bsClose": void;
     }
@@ -508,9 +768,13 @@ 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;
+        "bs-menu": HTMLBsMenuElement;
+        "bs-menu-item": HTMLBsMenuItemElement;
         "bs-modal": HTMLBsModalElement;
     }
 }
@@ -618,6 +882,113 @@ 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 {
+        /**
+          * Whether the "more options" popup menu (the `menu` slot) is currently open. Mutable + reflected so the component can track/close itself (kebab click, click outside, Escape) the same way `bs-chatbot-header`'s `expanded` prop tracks its own toggle state, while still emitting `bsMenuOpen` for the consumer to react to.
+          * @default false
+         */
+        "menuOpen"?: boolean;
+        /**
+          * 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 or the menu is closed (click outside, Escape), with the new `menuOpen` value.
+         */
+        "onBsMenuOpen"?: (event: BsChatbotResponseActionCustomEvent<boolean>) => 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
@@ -768,6 +1139,48 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * A generic dropdown/popup menu container: a rounded, elevated list of items (typically
+     * `bs-menu-item` elements).
+     * ## When to use
+     * - A popup list of actions/options triggered by another control (e.g. a "more options" kebab
+     *   button), such as `bs-chatbot-response-action`'s `menu` slot.
+     * ## When not to use
+     * - A persistent, always-visible list of options -- this component is purpose-built as a popup
+     *   surface (rounded corners, elevation shadow), not a plain list.
+     * @prop --bs-menu-bg - Background of the menu box. Aliased to `--bs-surface-raised`.
+     * @prop --bs-menu-radius - Corner radius of the menu box. Aliased to `--bs-border-radius-100`.
+     * @prop --bs-menu-padding-y - Top/bottom padding of the menu box. Aliased to `--bs-spacing-50`.
+     * @prop --bs-menu-gap - Gap between slotted items. Aliased to `--bs-spacing-50`.
+     * @prop --bs-menu-shadow - Elevation shadow of the menu box. Aliased to `--bs-shadow-sm`.
+     */
+    interface BsMenu {
+    }
+    /**
+     * A single selectable row inside a `bs-menu`: an optional icon plus a text label, rendered as a
+     * real `<button>` for correct keyboard/click semantics.
+     * ## When to use
+     * - As a child of `bs-menu`, one per selectable action/option.
+     * ## When not to use
+     * - Outside of `bs-menu` -- this component's sizing/hover treatment is designed to sit inside the
+     *   menu's rounded, padded list box.
+     * @prop --bs-menu-item-radius - Corner radius of the row. Aliased to `--bs-border-radius-100`.
+     * @prop --bs-menu-item-padding-y - Top/bottom padding. Aliased to `--bs-spacing-100`.
+     * @prop --bs-menu-item-padding-x - Left/right padding. Aliased to `--bs-spacing-150`.
+     * @prop --bs-menu-item-gap - Gap between icon and label. Aliased to `--bs-spacing-100`.
+     * @prop --bs-menu-item-hover - Background on hover. Aliased to `--bs-color-neutral-container`.
+     * @prop --bs-menu-item-pressed - Background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+     * @prop --bs-menu-item-icon-color - Icon color. Aliased to `--bs-icon-default`.
+     * @prop --bs-menu-item-color - Label text color. Aliased to `--bs-text-muted`.
+     * @prop --bs-menu-item-font-size - Aliased to `--bs-font-size-md`.
+     * @prop --bs-menu-item-line-height - Aliased to `--bs-line-height-body-md`.
+     */
+    interface BsMenuItem {
+        /**
+          * Fires when the item is clicked.
+         */
+        "onBsSelect"?: (event: BsMenuItemCustomEvent<void>) => void;
+    }
     /**
      * An overlay dialog that interrupts the current flow for a focused task or confirmation.
      * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
@@ -809,6 +1222,14 @@ declare namespace LocalJSX {
     interface BsCardAttributes {
         "surface": BsCardSurface;
     }
+    interface BsChatbotHeaderAttributes {
+        "heading": string;
+        "expanded": boolean;
+    }
+    interface BsChatbotResponseActionAttributes {
+        "sourcesCount": number;
+        "menuOpen": boolean;
+    }
     interface BsComposerAttributes {
         "variant": BsComposerVariant;
         "placeholder": string;
@@ -841,9 +1262,13 @@ 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] };
+        "bs-menu": BsMenu;
+        "bs-menu-item": BsMenuItem;
         "bs-modal": Omit<BsModal, keyof BsModalAttributes> & { [K in keyof BsModal & keyof BsModalAttributes]?: BsModal[K] } & { [K in keyof BsModal & keyof BsModalAttributes as `attr:${K}`]?: BsModalAttributes[K] } & { [K in keyof BsModal & keyof BsModalAttributes as `prop:${K}`]?: BsModal[K] };
     }
 }
@@ -910,6 +1335,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
@@ -965,6 +1436,42 @@ declare module "@stencil/core" {
              * - A fixed set of choices — use a select/radio/checkbox component instead of free text.
              */
             "bs-input": LocalJSX.IntrinsicElements["bs-input"] & JSXBase.HTMLAttributes<HTMLBsInputElement>;
+            /**
+             * A generic dropdown/popup menu container: a rounded, elevated list of items (typically
+             * `bs-menu-item` elements).
+             * ## When to use
+             * - A popup list of actions/options triggered by another control (e.g. a "more options" kebab
+             *   button), such as `bs-chatbot-response-action`'s `menu` slot.
+             * ## When not to use
+             * - A persistent, always-visible list of options -- this component is purpose-built as a popup
+             *   surface (rounded corners, elevation shadow), not a plain list.
+             * @prop --bs-menu-bg - Background of the menu box. Aliased to `--bs-surface-raised`.
+             * @prop --bs-menu-radius - Corner radius of the menu box. Aliased to `--bs-border-radius-100`.
+             * @prop --bs-menu-padding-y - Top/bottom padding of the menu box. Aliased to `--bs-spacing-50`.
+             * @prop --bs-menu-gap - Gap between slotted items. Aliased to `--bs-spacing-50`.
+             * @prop --bs-menu-shadow - Elevation shadow of the menu box. Aliased to `--bs-shadow-sm`.
+             */
+            "bs-menu": LocalJSX.IntrinsicElements["bs-menu"] & JSXBase.HTMLAttributes<HTMLBsMenuElement>;
+            /**
+             * A single selectable row inside a `bs-menu`: an optional icon plus a text label, rendered as a
+             * real `<button>` for correct keyboard/click semantics.
+             * ## When to use
+             * - As a child of `bs-menu`, one per selectable action/option.
+             * ## When not to use
+             * - Outside of `bs-menu` -- this component's sizing/hover treatment is designed to sit inside the
+             *   menu's rounded, padded list box.
+             * @prop --bs-menu-item-radius - Corner radius of the row. Aliased to `--bs-border-radius-100`.
+             * @prop --bs-menu-item-padding-y - Top/bottom padding. Aliased to `--bs-spacing-100`.
+             * @prop --bs-menu-item-padding-x - Left/right padding. Aliased to `--bs-spacing-150`.
+             * @prop --bs-menu-item-gap - Gap between icon and label. Aliased to `--bs-spacing-100`.
+             * @prop --bs-menu-item-hover - Background on hover. Aliased to `--bs-color-neutral-container`.
+             * @prop --bs-menu-item-pressed - Background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+             * @prop --bs-menu-item-icon-color - Icon color. Aliased to `--bs-icon-default`.
+             * @prop --bs-menu-item-color - Label text color. Aliased to `--bs-text-muted`.
+             * @prop --bs-menu-item-font-size - Aliased to `--bs-font-size-md`.
+             * @prop --bs-menu-item-line-height - Aliased to `--bs-line-height-body-md`.
+             */
+            "bs-menu-item": LocalJSX.IntrinsicElements["bs-menu-item"] & JSXBase.HTMLAttributes<HTMLBsMenuItemElement>;
             /**
              * An overlay dialog that interrupts the current flow for a focused task or confirmation.
              * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandsync/wc",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "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",