## Description

An embeddable search component for company homepages that handle direct bookings. Visitors search availability, pick dates, and reserve stays or enroll into events.

<div style="display: flex; gap: 20px;">
  <img src="https://lh3.googleusercontent.com/d/1n5U0vBMseBci4xV5wH8vApeAcRjcyos_" alt="Filter Bar Calendar" style="width: auto; max-width: 50%;">
  <img src="https://lh3.googleusercontent.com/d/1KCTqGgM2IZDY2nZ1ZTDf9WgX_zhmVB6D" alt="Filter Bar Guests" style="width: auto; max-width: 50%;">
</div>

## Adding to your site

Paste these two lines into any page — WordPress, plain HTML, anywhere. Set `domain` to your store URL, and the filter bar will load its settings and appear ready to use.

```html
<willba-filter-bar
  domain="customer.willba.store"
  mode="dark"
></willba-filter-bar>
<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.4.11/lib/embed.umd.js"></script>
```

The filter bar is fully self-contained and runs isolated from the rest of the page — your theme, plugins, and other scripts won't interfere with it, and it won't affect them.

### Available HTML attributes

| Attribute    | Purpose                                                                               | Default       |
| ------------ | ------------------------------------------------------------------------------------- | ------------- |
| `domain`     | Host that serves the filter bar settings.                                             | (required)    |
| `mode`       | `"dark"` or `"light"`.                                                                | `"light"`     |
| `language`   | `"fi"` or `"en"`. Any other value falls back to the default.                          | `"fi"`        |
| `full-width` | Add this attribute to make the filter bar stretch to the full width of its container. | not stretched |

### Positioning on the page

You can wrap the element however you like — it behaves like any block-level HTML element. Use `style` or your own CSS class on `<willba-filter-bar>` to control margin, alignment, max-width, etc.

```html
<willba-filter-bar
  domain="customer.willba.store"
  style="display: block; max-width: 900px; margin: 40px auto;"
></willba-filter-bar>
```

Note: only outer-layout styles (margin, padding, display, width, max-width, alignment) affect the element. The filter bar's internal styling is sealed and cannot be customized from the host page.