# hb-faq-component

**Category:** content · **Tags:** content

## Summary

`hb-faq-component` shows topic chips (Bootstrap Icons + labels) and an accordion FAQ list. Topics can narrow entries by `topic` key; a chip with `catchAll` clears the filter. Answer bodies use `{@html}` — only trusted HTML.

## What it does

1. **Parse:** In `$effect`, string `info` / `topics` are `JSON.parse`d into arrays; invalid JSON is logged.
2. **Topics:** Renders a flex wrap of light buttons; `catchAll` sets `filter` to `undefined`, else sets `filter` to the chip `key`.
3. **List:** For each `info` item (optionally filtered by `filter`), a checkbox + label accordion row shows `title` and HTML `text`.
4. **Icons:** Loads Bootstrap Icons CSS in `<svelte:head>` for `bi-{icon}` classes.

## Custom element

`hb-faq-component`

## Attributes

Attributes are **snake_case**. From HTML, structured props are **JSON strings**.

| Attribute | Type (logical) | HTML / notes |
| --- | --- | --- |
| `id` | `string` (optional) | Host id. |
| `style` | `string` (optional) | In typings; not read in the current script. |
| `info` | `string` \| `FaqInfoItem[]` | FAQ rows: `title`, `text` (HTML), optional `topic` for filtering. |
| `topics` | `string` \| `FaqTopicChip[]` | Chips: `key`, `label`, `icon` (Bootstrap icon name without `bi-`), optional `catchAll`, optional `index` (filled when parsing JSON). |
| `filter` | `string` (optional) | Active topic key; chips update this; catch-all clears it. |

## Custom events

**None** — `Events` is `{}` in `types/webcomponent.type.d.ts`.

## Styling

### CSS custom properties (`extra/docs.ts`)

| Variable | Role |
| --- | --- |
| `--bulma-column-gap` | Gap between topic buttons. |
| `--bulma-block-spacing` | Vertical padding per FAQ row. |
| `--bulma-border` | Divider between accordion items. |
| `--bulma-text` | Expand “+” color. |
| `--bulma-size-4` | Question label size. |
| `--bulma-size-5` | Answer body size. |

### CSS parts

**None.**

### Slots

**None** — see `extra/docs.ts` (`htmlSlots`).

## TypeScript

`types/webcomponent.type.d.ts` — `Component`, `Events`, `FaqInfoItem`, `FaqTopicChip`.

## Behavior notes

- Accordion `id` / `for` use `title` with spaces removed — duplicate titles in the same list can collide.
- Bootstrap Icons font is loaded from jsDelivr in the document head.

## Minimal HTML example

```html
<hb-faq-component
  topics='[{"key":"general","label":"General","icon":"question-circle"}]'
  info='[{"topic":"general","title":"What is this?","text":"<p>Short <strong>HTML</strong> answer.</p>"}]'
></hb-faq-component>
```

## Security

Only pass HTML you trust in `info[].text`, or sanitize before serializing JSON.