> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hibonsai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Changelog

> Version and upgrade notes for Bonsai web components

## Bonsai Search SDK

Current channel: `https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-latest.js` (and `bonsai-searchbar-webcomponent-latest.js`). The `-latest.js` alias always serves the current stable release — no URL change is required to get new versions.

<Callout color="#0A5B3B" icon="info">
  The authoritative SDK changelog lives in the repo at `sdk/CHANGELOG.md`. The entries below summarize the changes most likely to affect your integration.
</Callout>

## v3.2.0 — 2026-02-25 — CSS Variables Become the Styling Model

**Breaking change.** Attribute-based theming was removed in favor of CSS custom properties. This is the biggest integration-facing change in the 3.x line.

### What changed

* Attributes like `brand-color`, `text-color`, `muted-color`, `input-bg`, `card-bg`, `surface-color`, `canvas-color`, `input-text-color`, `suggestions-text-color`, `results-text-color`, `card-text-color`, `suggestions-hover-bg` are **no longer observed** by `<bonsai-search>` or `<bonsai-searchbar>`. Setting them has no effect.
* All visual customization is now driven by CSS custom properties on the host element (or an ancestor) — see [Advanced Styling](/project/docs/bonsai-search/styling).
* The web components now render an outer alignment container and an inner max-width container (`bonsai-search-outer-container` / `bonsai-search-inner-container`, `bonsai-searchbar-outer-container` / `bonsai-searchbar-inner-container`) so you can control centering and width independently via `--bonsai-search-align` / `--bonsai-searchbar-align` and `--bonsai-search-max-width` / `--bonsai-searchbar-max-width`.
* `--bonsai-searchbar-margin` added so vertical searchbar spacing is configurable.
* `theme="light" | "dark" | "auto"` support added (was previously light only in some paths).
* Framer and Webflow integrations now set CSS variables directly for theming.

### How to migrate

Replace each removed attribute with the equivalent CSS variable on the host element:

| Old attribute            | New CSS variable                  |
| ------------------------ | --------------------------------- |
| `brand-color`            | `--bonsai-brand-color`            |
| `text-color`             | `--bonsai-text-color`             |
| `muted-color`            | `--bonsai-muted-color`            |
| `input-bg`               | `--bonsai-input-bg`               |
| `card-bg`                | `--bonsai-card-bg`                |
| `surface-color`          | `--bonsai-surface-color`          |
| `canvas-color`           | `--bonsai-canvas-color`           |
| `input-text-color`       | `--bonsai-input-text-color`       |
| `suggestions-text-color` | `--bonsai-suggestions-text-color` |
| `results-text-color`     | `--bonsai-results-text-color`     |
| `card-text-color`        | `--bonsai-card-text-color`        |
| `suggestions-hover-bg`   | `--bonsai-suggestions-hover-bg`   |
| `input-opacity`          | `--bonsai-input-opacity`          |

```html theme={null}
<!-- Before (v3.0.x) -->
<bonsai-search api-key="..." brand-color="#0A5B3B" text-color="#303030"></bonsai-search>

<!-- After (v3.2+) -->
<style>
  bonsai-search {
    --bonsai-brand-color: #0A5B3B;
    --bonsai-text-color: #303030;
  }
</style>
<bonsai-search api-key="..."></bonsai-search>
```

### JavaScript `BonsaiSearchBar` class

If you instantiate the class directly with `new BonsaiSearchBar({...})`, styling props were removed as well:

* `brandColor` → `--bonsai-brand-color`
* `textColor` → `--bonsai-text-color`
* `mutedColor` → `--bonsai-muted-color`
* `inputBackground` / `inputBg` → `--bonsai-input-bg`
* `suggestionsTextColor` → `--bonsai-suggestions-text-color`
* `inputTextColor` → `--bonsai-input-text-color`
* `suggestionsHoverBg` → `--bonsai-suggestions-hover-bg`
* `inputOpacity` → `--bonsai-input-opacity`

## Runtime Config from the Settings API

Both `<bonsai-search>` and `<bonsai-searchbar>` fetch per-tenant configuration from `/rest/search-component-config/` at load time using your `api-key`. The Settings API can drive:

* Theming (colors, alignment, max width)
* Default placeholder and suggestions
* Behavior toggles (theme, markdown rendering, price rendering, product hiding, autocomplete)
* Result section labels (`featured_items_label`, `more_items_label`, `items_label`)

Precedence (highest to lowest):

1. HTML attribute on the tag (if set)
2. Settings API response for this API key
3. Built-in default

Page CSS for `--bonsai-*` variables overrides both, because Settings-API variables are injected at low `:host { ... }` specificity.

## New `<bonsai-search>` capabilities

* **`hide-products`** — boolean attribute that hides product results so only the AI summary is shown. Useful for conversational integrations.
* **`on-price`** — name of a global function used to format prices before rendering. Receives `(result, price, parent)` and returns the string to display.

## Upgrading

If you pin a version in your script URL (`bonsai-search-webcomponent-<version>.js`), switch to the `-latest.js` alias to always get the current stable release. No other change is required unless your integration still sets removed color attributes — in that case, move them to CSS custom properties per the table above.

For the full release history (including pre-3.2 entries), see `sdk/CHANGELOG.md` in the Bonsai repository.