@brandsync/wc 0.0.6 → 0.0.8

package/dist/types/components.d.ts

@@ -20,6 +20,33 @@ 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 shimmers with a moving highlight band
+     * while an operation is in progress.
+     * ## When to use
+     * - Inline in a Genie AI chat transcript to show what the assistant is currently doing while a
+     *   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.
+     * @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 base color. Aliased to `--bs-text-muted`.
+     * @prop --bs-ai-thinking-shimmer-highlight - Color of the moving highlight band. Aliased to
+     * `--bs-text-default` (more prominent than `--bs-text-muted` in both themes).
+     * @prop --bs-ai-thinking-font-size - Label font size. Aliased to `--bs-font-size-md`.
+     * @prop --bs-ai-thinking-line-height - Label line height. Aliased to `--bs-line-height-body-md`.
+     * @prop --bs-ai-thinking-cycle-duration - Duration of one shimmer sweep. Figma's own keyframe
+     * track for this label runs over exactly 2s, longer than any `--bs-duration-*` token (max
+     * `--bs-duration-slower` is 500ms), so this is aliased directly to the literal value.
+     */
+    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 +158,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`.
@@ -411,6 +445,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;
@@ -445,6 +513,32 @@ 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 shimmers with a moving highlight band
+     * while an operation is in progress.
+     * ## When to use
+     * - Inline in a Genie AI chat transcript to show what the assistant is currently doing while a
+     *   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.
+     * @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 base color. Aliased to `--bs-text-muted`.
+     * @prop --bs-ai-thinking-shimmer-highlight - Color of the moving highlight band. Aliased to
+     * `--bs-text-default` (more prominent than `--bs-text-muted` in both themes).
+     * @prop --bs-ai-thinking-font-size - Label font size. Aliased to `--bs-font-size-md`.
+     * @prop --bs-ai-thinking-line-height - Label line height. Aliased to `--bs-line-height-body-md`.
+     * @prop --bs-ai-thinking-cycle-duration - Duration of one shimmer sweep. Figma's own keyframe
+     * track for this label runs over exactly 2s, longer than any `--bs-duration-*` token (max
+     * `--bs-duration-slower` is 500ms), so this is aliased directly to the literal value.
+     */
+    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
@@ -538,12 +632,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`.
@@ -853,7 +954,41 @@ 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;
@@ -867,9 +1002,37 @@ declare global {
         "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 shimmers with a moving highlight band
+     * while an operation is in progress.
+     * ## When to use
+     * - Inline in a Genie AI chat transcript to show what the assistant is currently doing while a
+     *   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.
+     * @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 base color. Aliased to `--bs-text-muted`.
+     * @prop --bs-ai-thinking-shimmer-highlight - Color of the moving highlight band. Aliased to
+     * `--bs-text-default` (more prominent than `--bs-text-muted` in both themes).
+     * @prop --bs-ai-thinking-font-size - Label font size. Aliased to `--bs-font-size-md`.
+     * @prop --bs-ai-thinking-line-height - Label line height. Aliased to `--bs-line-height-body-md`.
+     * @prop --bs-ai-thinking-cycle-duration - Duration of one shimmer sweep. Figma's own keyframe
+     * track for this label runs over exactly 2s, longer than any `--bs-duration-*` token (max
+     * `--bs-duration-slower` is 500ms), so this is aliased directly to the literal value.
+     */
+    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
@@ -981,12 +1144,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`.
@@ -1338,7 +1508,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;
     }
@@ -1392,8 +1599,12 @@ 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] };
@@ -1407,12 +1618,34 @@ declare namespace LocalJSX {
         "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 shimmers with a moving highlight band
+             * while an operation is in progress.
+             * ## When to use
+             * - Inline in a Genie AI chat transcript to show what the assistant is currently doing while a
+             *   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.
+             * @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 base color. Aliased to `--bs-text-muted`.
+             * @prop --bs-ai-thinking-shimmer-highlight - Color of the moving highlight band. Aliased to
+             * `--bs-text-default` (more prominent than `--bs-text-muted` in both themes).
+             * @prop --bs-ai-thinking-font-size - Label font size. Aliased to `--bs-font-size-md`.
+             * @prop --bs-ai-thinking-line-height - Label line height. Aliased to `--bs-line-height-body-md`.
+             * @prop --bs-ai-thinking-cycle-duration - Duration of one shimmer sweep. Figma's own keyframe
+             * track for this label runs over exactly 2s, longer than any `--bs-duration-*` token (max
+             * `--bs-duration-slower` is 500ms), so this is aliased directly to the literal value.
+             */
+            "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
@@ -1480,12 +1713,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`.
@@ -1653,6 +1893,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.6",
+  "version": "0.0.8",
   "publishConfig": {
     "access": "public"
   },