@brandsync/wc 0.0.5 → 0.0.7

package/dist/types/components.d.ts

@@ -20,6 +20,34 @@ export { BsComposerState, BsComposerVariant } from "./components/bs-composer/bs-
 export { BsDataTableColumn, BsDataTableRow } from "./components/bs-data-table/bs-data-table";
 export { BsModalSize } from "./components/bs-modal/bs-modal";
 export namespace Components {
+    /**
+     * 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.
+     * ## When to use
+     * - Inline in a Genie AI chat transcript to show what the assistant is currently doing while a
+     *   response is being generated (retrieving context, searching, thinking).
+     * ## 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.
+     * @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-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.
+     */
+    interface BsAiThinking {
+        /**
+          * The status text shown next to the icon, e.g. "Retrieving", "Thinking", "Searching".
+          * @default 'Thinking'
+         */
+        "label": string;
+    }
     /**
      * A small status or category pill, usually paired with a label or list item.
      * ## When to use
@@ -131,12 +159,19 @@ export namespace Components {
      * ## 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.
+     * Each action button shows a `bs-tooltip` (placement="top", i.e. positioned below the button with
+     * its arrow pointing up toward it -- fits naturally since this header sits at the top of a panel)
+     * on hover/focus, driven by plain CSS (`:hover`/`:focus-within` on a wrapper, no extra JS state).
+     * The tooltip is `aria-hidden` since it's a purely visual reinforcement of each button's existing
+     * `aria-label` -- screen readers already get the accessible name from the button itself, so the
+     * tooltip doesn't need to be (and shouldn't be) announced a second time.
      * @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-actions-gap - Gap between the individual action buttons. Aliased to `--bs-spacing-100`.
      * @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`.
@@ -190,6 +225,44 @@ export namespace Components {
          */
         "sourcesCount"?: number;
     }
+    /**
+     * A pill-shaped clickable suggestion chip for a Genie AI chat panel (e.g. "How can I help you?").
+     * One instance renders one chip -- to show several suggestion prompts side by side, render
+     * multiple `bs-chatbot-suggestion-button` elements inside a plain flex-wrap container; this
+     * library doesn't ship a separate list/group component for that since a `<div>` with
+     * `flex-wrap: wrap` is sufficient.
+     * ## When to use
+     * - Quick-reply/starter prompts shown above or alongside `bs-composer` in a Genie AI chat panel.
+     * ## When not to use
+     * - As a general-purpose button -- use `bs-button` instead, this component's pill shape and
+     *   tonal color treatment are specific to Genie chat suggestion prompts.
+     * @prop --bs-chatbot-suggestion-button-radius - Corner radius. Aliased to `--bs-border-radius-full`.
+     * @prop --bs-chatbot-suggestion-button-border-color - Border color. Aliased to `--bs-border-primary`.
+     * @prop --bs-chatbot-suggestion-button-bg-default - Background in the default (enabled) state.
+     * Aliased to `--bs-color-primary-container`.
+     * @prop --bs-chatbot-suggestion-button-bg-hover - Background on hover. Aliased to
+     * `--bs-color-primary-container-hover`.
+     * @prop --bs-chatbot-suggestion-button-bg-pressed - Background when pressed. Aliased directly to
+     * the primitive `--bs-brand-200` -- there's no pre-built semantic "container-pressed" token
+     * matching this tonal button's lighter pressed shade progression (50 -> 100 -> 200), so this
+     * component aliases one locally (same situation `bs-button.css` documents for its
+     * subtle/outlined/success/warning/info variants).
+     * @prop --bs-chatbot-suggestion-button-bg-focus - Background when focused. Aliased to
+     * `--bs-color-primary-container-hover` (same as hover).
+     * @prop --bs-chatbot-suggestion-button-text-default - Text color in the default state. Aliased to
+     * `--bs-text-action`.
+     * @prop --bs-chatbot-suggestion-button-text-hover - Text color on hover, pressed, and focus.
+     * Aliased to `--bs-text-action-hover`.
+     * @prop --bs-chatbot-suggestion-button-focus-ring-color - Focus ring color. Aliased to
+     * `--bs-border-primary-focus`.
+     */
+    interface BsChatbotSuggestionButton {
+        /**
+          * Disables the button and applies a reduced-opacity treatment.
+          * @default false
+         */
+        "disabled": boolean;
+    }
     /**
      * 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
@@ -373,6 +446,40 @@ export namespace Components {
          */
         "size": BsModalSize;
     }
+    /**
+     * A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
+     * next to a trigger element.
+     * `bs-tooltip` is a purely presentational bubble -- like `bs-menu`, it does not manage its own
+     * visibility, hover/focus triggering, or positioning relative to a trigger element. A consuming
+     * app is responsible for showing/hiding it and for positioning it against its trigger (e.g. via a
+     * wrapping `position: relative`/`absolute` pattern, the same approach used by
+     * `bs-chatbot-response-action` for its own `menu` slot).
+     * ## When to use
+     * - A short, contextual hint of extra information shown next to a trigger element on hover/focus,
+     *   where the host app owns the show/hide and positioning logic.
+     * ## When not to use
+     * - A component that manages its own trigger interaction (hover/focus listeners) or positioning --
+     *   this component intentionally does not do that; wire that up in the consuming app instead.
+     * @prop --bs-tooltip-bg - Background of the bubble and arrow. Aliased to `--bs-surface-inverse`.
+     * @prop --bs-tooltip-color - Text color of the slotted content. Aliased to `--bs-text-inverse`.
+     * @prop --bs-tooltip-radius - Corner radius of the bubble. Aliased to `--bs-border-radius-50`.
+     * @prop --bs-tooltip-padding-x - Left/right padding of the bubble. Aliased to `--bs-spacing-200`.
+     * @prop --bs-tooltip-padding-y - Top/bottom padding of the bubble. Aliased to `--bs-spacing-100`.
+     * @prop --bs-tooltip-max-width - Max width of the bubble. Aliased to `200px`, Figma's own reference
+     * width (the bubble's width is otherwise variable based on content).
+     * @prop --bs-tooltip-shadow - Elevation shadow of the bubble. See `bs-tooltip.css` for why this is
+     * a literal value rather than a `--bs-shadow-*` token alias.
+     * @prop --bs-tooltip-font-size - Font size of the slotted content. Aliased to `--bs-font-size-sm`.
+     * @prop --bs-tooltip-line-height - Line height of the slotted content. Aliased to
+     * `--bs-line-height-body-sm`.
+     */
+    interface BsTooltip {
+        /**
+          * Which edge of the bubble the arrow points from, and therefore which side of a trigger the bubble should be placed on. `'top'` is the only value implemented -- it is the only variant confirmed from the Figma "EG Tooltip" component (arrow at the top of the bubble, pointing up). Bottom/left/right variants aren't implemented pending further Figma design confirmation.
+          * @default 'top'
+         */
+        "placement": 'top';
+    }
 }
 export interface BsChatbotHeaderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -382,6 +489,10 @@ export interface BsChatbotResponseActionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsChatbotResponseActionElement;
 }
+export interface BsChatbotSuggestionButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsChatbotSuggestionButtonElement;
+}
 export interface BsComposerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsComposerElement;
@@ -403,6 +514,33 @@ export interface BsModalCustomEvent<T> extends CustomEvent<T> {
     target: HTMLBsModalElement;
 }
 declare global {
+    /**
+     * 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.
+     * ## When to use
+     * - Inline in a Genie AI chat transcript to show what the assistant is currently doing while a
+     *   response is being generated (retrieving context, searching, thinking).
+     * ## 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.
+     * @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-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.
+     */
+    interface HTMLBsAiThinkingElement extends Components.BsAiThinking, HTMLStencilElement {
+    }
+    var HTMLBsAiThinkingElement: {
+        prototype: HTMLBsAiThinkingElement;
+        new (): HTMLBsAiThinkingElement;
+    };
     /**
      * A small status or category pill, usually paired with a label or list item.
      * ## When to use
@@ -496,12 +634,19 @@ declare global {
      * ## 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.
+     * Each action button shows a `bs-tooltip` (placement="top", i.e. positioned below the button with
+     * its arrow pointing up toward it -- fits naturally since this header sits at the top of a panel)
+     * on hover/focus, driven by plain CSS (`:hover`/`:focus-within` on a wrapper, no extra JS state).
+     * The tooltip is `aria-hidden` since it's a purely visual reinforcement of each button's existing
+     * `aria-label` -- screen readers already get the accessible name from the button itself, so the
+     * tooltip doesn't need to be (and shouldn't be) announced a second time.
      * @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-actions-gap - Gap between the individual action buttons. Aliased to `--bs-spacing-100`.
      * @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`.
@@ -568,6 +713,54 @@ declare global {
         prototype: HTMLBsChatbotResponseActionElement;
         new (): HTMLBsChatbotResponseActionElement;
     };
+    interface HTMLBsChatbotSuggestionButtonElementEventMap {
+        "bsSelect": void;
+    }
+    /**
+     * A pill-shaped clickable suggestion chip for a Genie AI chat panel (e.g. "How can I help you?").
+     * One instance renders one chip -- to show several suggestion prompts side by side, render
+     * multiple `bs-chatbot-suggestion-button` elements inside a plain flex-wrap container; this
+     * library doesn't ship a separate list/group component for that since a `<div>` with
+     * `flex-wrap: wrap` is sufficient.
+     * ## When to use
+     * - Quick-reply/starter prompts shown above or alongside `bs-composer` in a Genie AI chat panel.
+     * ## When not to use
+     * - As a general-purpose button -- use `bs-button` instead, this component's pill shape and
+     *   tonal color treatment are specific to Genie chat suggestion prompts.
+     * @prop --bs-chatbot-suggestion-button-radius - Corner radius. Aliased to `--bs-border-radius-full`.
+     * @prop --bs-chatbot-suggestion-button-border-color - Border color. Aliased to `--bs-border-primary`.
+     * @prop --bs-chatbot-suggestion-button-bg-default - Background in the default (enabled) state.
+     * Aliased to `--bs-color-primary-container`.
+     * @prop --bs-chatbot-suggestion-button-bg-hover - Background on hover. Aliased to
+     * `--bs-color-primary-container-hover`.
+     * @prop --bs-chatbot-suggestion-button-bg-pressed - Background when pressed. Aliased directly to
+     * the primitive `--bs-brand-200` -- there's no pre-built semantic "container-pressed" token
+     * matching this tonal button's lighter pressed shade progression (50 -> 100 -> 200), so this
+     * component aliases one locally (same situation `bs-button.css` documents for its
+     * subtle/outlined/success/warning/info variants).
+     * @prop --bs-chatbot-suggestion-button-bg-focus - Background when focused. Aliased to
+     * `--bs-color-primary-container-hover` (same as hover).
+     * @prop --bs-chatbot-suggestion-button-text-default - Text color in the default state. Aliased to
+     * `--bs-text-action`.
+     * @prop --bs-chatbot-suggestion-button-text-hover - Text color on hover, pressed, and focus.
+     * Aliased to `--bs-text-action-hover`.
+     * @prop --bs-chatbot-suggestion-button-focus-ring-color - Focus ring color. Aliased to
+     * `--bs-border-primary-focus`.
+     */
+    interface HTMLBsChatbotSuggestionButtonElement extends Components.BsChatbotSuggestionButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsChatbotSuggestionButtonElementEventMap>(type: K, listener: (this: HTMLBsChatbotSuggestionButtonElement, ev: BsChatbotSuggestionButtonCustomEvent<HTMLBsChatbotSuggestionButtonElementEventMap[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 HTMLBsChatbotSuggestionButtonElementEventMap>(type: K, listener: (this: HTMLBsChatbotSuggestionButtonElement, ev: BsChatbotSuggestionButtonCustomEvent<HTMLBsChatbotSuggestionButtonElementEventMap[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 HTMLBsChatbotSuggestionButtonElement: {
+        prototype: HTMLBsChatbotSuggestionButtonElement;
+        new (): HTMLBsChatbotSuggestionButtonElement;
+    };
     interface HTMLBsComposerElementEventMap {
         "bsInput": string;
         "bsSubmit": void;
@@ -763,22 +956,86 @@ declare global {
         prototype: HTMLBsModalElement;
         new (): HTMLBsModalElement;
     };
+    /**
+     * A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
+     * next to a trigger element.
+     * `bs-tooltip` is a purely presentational bubble -- like `bs-menu`, it does not manage its own
+     * visibility, hover/focus triggering, or positioning relative to a trigger element. A consuming
+     * app is responsible for showing/hiding it and for positioning it against its trigger (e.g. via a
+     * wrapping `position: relative`/`absolute` pattern, the same approach used by
+     * `bs-chatbot-response-action` for its own `menu` slot).
+     * ## When to use
+     * - A short, contextual hint of extra information shown next to a trigger element on hover/focus,
+     *   where the host app owns the show/hide and positioning logic.
+     * ## When not to use
+     * - A component that manages its own trigger interaction (hover/focus listeners) or positioning --
+     *   this component intentionally does not do that; wire that up in the consuming app instead.
+     * @prop --bs-tooltip-bg - Background of the bubble and arrow. Aliased to `--bs-surface-inverse`.
+     * @prop --bs-tooltip-color - Text color of the slotted content. Aliased to `--bs-text-inverse`.
+     * @prop --bs-tooltip-radius - Corner radius of the bubble. Aliased to `--bs-border-radius-50`.
+     * @prop --bs-tooltip-padding-x - Left/right padding of the bubble. Aliased to `--bs-spacing-200`.
+     * @prop --bs-tooltip-padding-y - Top/bottom padding of the bubble. Aliased to `--bs-spacing-100`.
+     * @prop --bs-tooltip-max-width - Max width of the bubble. Aliased to `200px`, Figma's own reference
+     * width (the bubble's width is otherwise variable based on content).
+     * @prop --bs-tooltip-shadow - Elevation shadow of the bubble. See `bs-tooltip.css` for why this is
+     * a literal value rather than a `--bs-shadow-*` token alias.
+     * @prop --bs-tooltip-font-size - Font size of the slotted content. Aliased to `--bs-font-size-sm`.
+     * @prop --bs-tooltip-line-height - Line height of the slotted content. Aliased to
+     * `--bs-line-height-body-sm`.
+     */
+    interface HTMLBsTooltipElement extends Components.BsTooltip, HTMLStencilElement {
+    }
+    var HTMLBsTooltipElement: {
+        prototype: HTMLBsTooltipElement;
+        new (): HTMLBsTooltipElement;
+    };
     interface HTMLElementTagNameMap {
+        "bs-ai-thinking": HTMLBsAiThinkingElement;
         "bs-badge": HTMLBsBadgeElement;
         "bs-button": HTMLBsButtonElement;
         "bs-button-skeleton": HTMLBsButtonSkeletonElement;
         "bs-card": HTMLBsCardElement;
         "bs-chatbot-header": HTMLBsChatbotHeaderElement;
         "bs-chatbot-response-action": HTMLBsChatbotResponseActionElement;
+        "bs-chatbot-suggestion-button": HTMLBsChatbotSuggestionButtonElement;
         "bs-composer": HTMLBsComposerElement;
         "bs-data-table": HTMLBsDataTableElement;
         "bs-input": HTMLBsInputElement;
         "bs-menu": HTMLBsMenuElement;
         "bs-menu-item": HTMLBsMenuItemElement;
         "bs-modal": HTMLBsModalElement;
+        "bs-tooltip": HTMLBsTooltipElement;
     }
 }
 declare namespace LocalJSX {
+    /**
+     * 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.
+     * ## When to use
+     * - Inline in a Genie AI chat transcript to show what the assistant is currently doing while a
+     *   response is being generated (retrieving context, searching, thinking).
+     * ## 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.
+     * @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-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.
+     */
+    interface BsAiThinking {
+        /**
+          * The status text shown next to the icon, e.g. "Retrieving", "Thinking", "Searching".
+          * @default 'Thinking'
+         */
+        "label"?: string;
+    }
     /**
      * A small status or category pill, usually paired with a label or list item.
      * ## When to use
@@ -890,12 +1147,19 @@ declare namespace LocalJSX {
      * ## 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.
+     * Each action button shows a `bs-tooltip` (placement="top", i.e. positioned below the button with
+     * its arrow pointing up toward it -- fits naturally since this header sits at the top of a panel)
+     * on hover/focus, driven by plain CSS (`:hover`/`:focus-within` on a wrapper, no extra JS state).
+     * The tooltip is `aria-hidden` since it's a purely visual reinforcement of each button's existing
+     * `aria-label` -- screen readers already get the accessible name from the button itself, so the
+     * tooltip doesn't need to be (and shouldn't be) announced a second time.
      * @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-actions-gap - Gap between the individual action buttons. Aliased to `--bs-spacing-100`.
      * @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`.
@@ -989,6 +1253,48 @@ declare namespace LocalJSX {
          */
         "sourcesCount"?: number;
     }
+    /**
+     * A pill-shaped clickable suggestion chip for a Genie AI chat panel (e.g. "How can I help you?").
+     * One instance renders one chip -- to show several suggestion prompts side by side, render
+     * multiple `bs-chatbot-suggestion-button` elements inside a plain flex-wrap container; this
+     * library doesn't ship a separate list/group component for that since a `<div>` with
+     * `flex-wrap: wrap` is sufficient.
+     * ## When to use
+     * - Quick-reply/starter prompts shown above or alongside `bs-composer` in a Genie AI chat panel.
+     * ## When not to use
+     * - As a general-purpose button -- use `bs-button` instead, this component's pill shape and
+     *   tonal color treatment are specific to Genie chat suggestion prompts.
+     * @prop --bs-chatbot-suggestion-button-radius - Corner radius. Aliased to `--bs-border-radius-full`.
+     * @prop --bs-chatbot-suggestion-button-border-color - Border color. Aliased to `--bs-border-primary`.
+     * @prop --bs-chatbot-suggestion-button-bg-default - Background in the default (enabled) state.
+     * Aliased to `--bs-color-primary-container`.
+     * @prop --bs-chatbot-suggestion-button-bg-hover - Background on hover. Aliased to
+     * `--bs-color-primary-container-hover`.
+     * @prop --bs-chatbot-suggestion-button-bg-pressed - Background when pressed. Aliased directly to
+     * the primitive `--bs-brand-200` -- there's no pre-built semantic "container-pressed" token
+     * matching this tonal button's lighter pressed shade progression (50 -> 100 -> 200), so this
+     * component aliases one locally (same situation `bs-button.css` documents for its
+     * subtle/outlined/success/warning/info variants).
+     * @prop --bs-chatbot-suggestion-button-bg-focus - Background when focused. Aliased to
+     * `--bs-color-primary-container-hover` (same as hover).
+     * @prop --bs-chatbot-suggestion-button-text-default - Text color in the default state. Aliased to
+     * `--bs-text-action`.
+     * @prop --bs-chatbot-suggestion-button-text-hover - Text color on hover, pressed, and focus.
+     * Aliased to `--bs-text-action-hover`.
+     * @prop --bs-chatbot-suggestion-button-focus-ring-color - Focus ring color. Aliased to
+     * `--bs-border-primary-focus`.
+     */
+    interface BsChatbotSuggestionButton {
+        /**
+          * Disables the button and applies a reduced-opacity treatment.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Fires when the button is clicked.
+         */
+        "onBsSelect"?: (event: BsChatbotSuggestionButtonCustomEvent<void>) => void;
+    }
     /**
      * 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
@@ -1205,7 +1511,44 @@ declare namespace LocalJSX {
          */
         "size"?: BsModalSize;
     }
+    /**
+     * A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
+     * next to a trigger element.
+     * `bs-tooltip` is a purely presentational bubble -- like `bs-menu`, it does not manage its own
+     * visibility, hover/focus triggering, or positioning relative to a trigger element. A consuming
+     * app is responsible for showing/hiding it and for positioning it against its trigger (e.g. via a
+     * wrapping `position: relative`/`absolute` pattern, the same approach used by
+     * `bs-chatbot-response-action` for its own `menu` slot).
+     * ## When to use
+     * - A short, contextual hint of extra information shown next to a trigger element on hover/focus,
+     *   where the host app owns the show/hide and positioning logic.
+     * ## When not to use
+     * - A component that manages its own trigger interaction (hover/focus listeners) or positioning --
+     *   this component intentionally does not do that; wire that up in the consuming app instead.
+     * @prop --bs-tooltip-bg - Background of the bubble and arrow. Aliased to `--bs-surface-inverse`.
+     * @prop --bs-tooltip-color - Text color of the slotted content. Aliased to `--bs-text-inverse`.
+     * @prop --bs-tooltip-radius - Corner radius of the bubble. Aliased to `--bs-border-radius-50`.
+     * @prop --bs-tooltip-padding-x - Left/right padding of the bubble. Aliased to `--bs-spacing-200`.
+     * @prop --bs-tooltip-padding-y - Top/bottom padding of the bubble. Aliased to `--bs-spacing-100`.
+     * @prop --bs-tooltip-max-width - Max width of the bubble. Aliased to `200px`, Figma's own reference
+     * width (the bubble's width is otherwise variable based on content).
+     * @prop --bs-tooltip-shadow - Elevation shadow of the bubble. See `bs-tooltip.css` for why this is
+     * a literal value rather than a `--bs-shadow-*` token alias.
+     * @prop --bs-tooltip-font-size - Font size of the slotted content. Aliased to `--bs-font-size-sm`.
+     * @prop --bs-tooltip-line-height - Line height of the slotted content. Aliased to
+     * `--bs-line-height-body-sm`.
+     */
+    interface BsTooltip {
+        /**
+          * Which edge of the bubble the arrow points from, and therefore which side of a trigger the bubble should be placed on. `'top'` is the only value implemented -- it is the only variant confirmed from the Figma "EG Tooltip" component (arrow at the top of the bubble, pointing up). Bottom/left/right variants aren't implemented pending further Figma design confirmation.
+          * @default 'top'
+         */
+        "placement"?: 'top';
+    }
 
+    interface BsAiThinkingAttributes {
+        "label": string;
+    }
     interface BsBadgeAttributes {
         "variant": BsBadgeVariant;
     }
@@ -1230,6 +1573,9 @@ declare namespace LocalJSX {
         "sourcesCount": number;
         "menuOpen": boolean;
     }
+    interface BsChatbotSuggestionButtonAttributes {
+        "disabled": boolean;
+    }
     interface BsComposerAttributes {
         "variant": BsComposerVariant;
         "placeholder": string;
@@ -1256,26 +1602,54 @@ declare namespace LocalJSX {
         "heading": string;
         "size": BsModalSize;
     }
+    interface BsTooltipAttributes {
+        "placement": 'top';
+    }
 
     interface IntrinsicElements {
+        "bs-ai-thinking": Omit<BsAiThinking, keyof BsAiThinkingAttributes> & { [K in keyof BsAiThinking & keyof BsAiThinkingAttributes]?: BsAiThinking[K] } & { [K in keyof BsAiThinking & keyof BsAiThinkingAttributes as `attr:${K}`]?: BsAiThinkingAttributes[K] } & { [K in keyof BsAiThinking & keyof BsAiThinkingAttributes as `prop:${K}`]?: BsAiThinking[K] };
         "bs-badge": Omit<BsBadge, keyof BsBadgeAttributes> & { [K in keyof BsBadge & keyof BsBadgeAttributes]?: BsBadge[K] } & { [K in keyof BsBadge & keyof BsBadgeAttributes as `attr:${K}`]?: BsBadgeAttributes[K] } & { [K in keyof BsBadge & keyof BsBadgeAttributes as `prop:${K}`]?: BsBadge[K] };
         "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-chatbot-suggestion-button": Omit<BsChatbotSuggestionButton, keyof BsChatbotSuggestionButtonAttributes> & { [K in keyof BsChatbotSuggestionButton & keyof BsChatbotSuggestionButtonAttributes]?: BsChatbotSuggestionButton[K] } & { [K in keyof BsChatbotSuggestionButton & keyof BsChatbotSuggestionButtonAttributes as `attr:${K}`]?: BsChatbotSuggestionButtonAttributes[K] } & { [K in keyof BsChatbotSuggestionButton & keyof BsChatbotSuggestionButtonAttributes as `prop:${K}`]?: BsChatbotSuggestionButton[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] };
+        "bs-tooltip": Omit<BsTooltip, keyof BsTooltipAttributes> & { [K in keyof BsTooltip & keyof BsTooltipAttributes]?: BsTooltip[K] } & { [K in keyof BsTooltip & keyof BsTooltipAttributes as `attr:${K}`]?: BsTooltipAttributes[K] } & { [K in keyof BsTooltip & keyof BsTooltipAttributes as `prop:${K}`]?: BsTooltip[K] };
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * 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.
+             * ## When to use
+             * - Inline in a Genie AI chat transcript to show what the assistant is currently doing while a
+             *   response is being generated (retrieving context, searching, thinking).
+             * ## 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.
+             * @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-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.
+             */
+            "bs-ai-thinking": LocalJSX.IntrinsicElements["bs-ai-thinking"] & JSXBase.HTMLAttributes<HTMLBsAiThinkingElement>;
             /**
              * A small status or category pill, usually paired with a label or list item.
              * ## When to use
@@ -1343,12 +1717,19 @@ declare module "@stencil/core" {
              * ## 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.
+             * Each action button shows a `bs-tooltip` (placement="top", i.e. positioned below the button with
+             * its arrow pointing up toward it -- fits naturally since this header sits at the top of a panel)
+             * on hover/focus, driven by plain CSS (`:hover`/`:focus-within` on a wrapper, no extra JS state).
+             * The tooltip is `aria-hidden` since it's a purely visual reinforcement of each button's existing
+             * `aria-label` -- screen readers already get the accessible name from the button itself, so the
+             * tooltip doesn't need to be (and shouldn't be) announced a second time.
              * @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-actions-gap - Gap between the individual action buttons. Aliased to `--bs-spacing-100`.
              * @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`.
@@ -1381,6 +1762,38 @@ declare module "@stencil/core" {
              * @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 pill-shaped clickable suggestion chip for a Genie AI chat panel (e.g. "How can I help you?").
+             * One instance renders one chip -- to show several suggestion prompts side by side, render
+             * multiple `bs-chatbot-suggestion-button` elements inside a plain flex-wrap container; this
+             * library doesn't ship a separate list/group component for that since a `<div>` with
+             * `flex-wrap: wrap` is sufficient.
+             * ## When to use
+             * - Quick-reply/starter prompts shown above or alongside `bs-composer` in a Genie AI chat panel.
+             * ## When not to use
+             * - As a general-purpose button -- use `bs-button` instead, this component's pill shape and
+             *   tonal color treatment are specific to Genie chat suggestion prompts.
+             * @prop --bs-chatbot-suggestion-button-radius - Corner radius. Aliased to `--bs-border-radius-full`.
+             * @prop --bs-chatbot-suggestion-button-border-color - Border color. Aliased to `--bs-border-primary`.
+             * @prop --bs-chatbot-suggestion-button-bg-default - Background in the default (enabled) state.
+             * Aliased to `--bs-color-primary-container`.
+             * @prop --bs-chatbot-suggestion-button-bg-hover - Background on hover. Aliased to
+             * `--bs-color-primary-container-hover`.
+             * @prop --bs-chatbot-suggestion-button-bg-pressed - Background when pressed. Aliased directly to
+             * the primitive `--bs-brand-200` -- there's no pre-built semantic "container-pressed" token
+             * matching this tonal button's lighter pressed shade progression (50 -> 100 -> 200), so this
+             * component aliases one locally (same situation `bs-button.css` documents for its
+             * subtle/outlined/success/warning/info variants).
+             * @prop --bs-chatbot-suggestion-button-bg-focus - Background when focused. Aliased to
+             * `--bs-color-primary-container-hover` (same as hover).
+             * @prop --bs-chatbot-suggestion-button-text-default - Text color in the default state. Aliased to
+             * `--bs-text-action`.
+             * @prop --bs-chatbot-suggestion-button-text-hover - Text color on hover, pressed, and focus.
+             * Aliased to `--bs-text-action-hover`.
+             * @prop --bs-chatbot-suggestion-button-focus-ring-color - Focus ring color. Aliased to
+             * `--bs-border-primary-focus`.
+             */
+            "bs-chatbot-suggestion-button": LocalJSX.IntrinsicElements["bs-chatbot-suggestion-button"] & JSXBase.HTMLAttributes<HTMLBsChatbotSuggestionButtonElement>;
             /**
              * 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
@@ -1484,6 +1897,34 @@ declare module "@stencil/core" {
              *   modal that just gets taller and taller.
              */
             "bs-modal": LocalJSX.IntrinsicElements["bs-modal"] & JSXBase.HTMLAttributes<HTMLBsModalElement>;
+            /**
+             * A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
+             * next to a trigger element.
+             * `bs-tooltip` is a purely presentational bubble -- like `bs-menu`, it does not manage its own
+             * visibility, hover/focus triggering, or positioning relative to a trigger element. A consuming
+             * app is responsible for showing/hiding it and for positioning it against its trigger (e.g. via a
+             * wrapping `position: relative`/`absolute` pattern, the same approach used by
+             * `bs-chatbot-response-action` for its own `menu` slot).
+             * ## When to use
+             * - A short, contextual hint of extra information shown next to a trigger element on hover/focus,
+             *   where the host app owns the show/hide and positioning logic.
+             * ## When not to use
+             * - A component that manages its own trigger interaction (hover/focus listeners) or positioning --
+             *   this component intentionally does not do that; wire that up in the consuming app instead.
+             * @prop --bs-tooltip-bg - Background of the bubble and arrow. Aliased to `--bs-surface-inverse`.
+             * @prop --bs-tooltip-color - Text color of the slotted content. Aliased to `--bs-text-inverse`.
+             * @prop --bs-tooltip-radius - Corner radius of the bubble. Aliased to `--bs-border-radius-50`.
+             * @prop --bs-tooltip-padding-x - Left/right padding of the bubble. Aliased to `--bs-spacing-200`.
+             * @prop --bs-tooltip-padding-y - Top/bottom padding of the bubble. Aliased to `--bs-spacing-100`.
+             * @prop --bs-tooltip-max-width - Max width of the bubble. Aliased to `200px`, Figma's own reference
+             * width (the bubble's width is otherwise variable based on content).
+             * @prop --bs-tooltip-shadow - Elevation shadow of the bubble. See `bs-tooltip.css` for why this is
+             * a literal value rather than a `--bs-shadow-*` token alias.
+             * @prop --bs-tooltip-font-size - Font size of the slotted content. Aliased to `--bs-font-size-sm`.
+             * @prop --bs-tooltip-line-height - Line height of the slotted content. Aliased to
+             * `--bs-line-height-body-sm`.
+             */
+            "bs-tooltip": LocalJSX.IntrinsicElements["bs-tooltip"] & JSXBase.HTMLAttributes<HTMLBsTooltipElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandsync/wc",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "publishConfig": {
     "access": "public"
   },
@@ -54,6 +54,7 @@
     "@stencil/vitest": "^1.8.3",
     "@storybook/addon-a11y": "^10.5.8",
     "@storybook/addon-docs": "^10.5.8",
+    "@storybook/addon-vitest": "^10.5.8",
     "@storybook/web-components-vite": "^10.5.8",
     "@types/node": "^22.13.5",
     "@vitest/browser-playwright": "^4.0.0",