open-index/open-npm huggingface dataset:
npm package: @htmlbricks/hb-area-code
Description: Displays arbitrary text inside a `<code>` block with a themed background. A small copy button copies the content to the clipboard, briefly shows confirmation, and dispatches a `clipboardCopyText` custom event with the copied string.
Latest version: 0.71.18

## `hb-area-code` — area-code

**Category:** utilities | **Tags:** utilities, developer

### What it does

Displays arbitrary text inside a `<code>` block with a themed background. A copy button copies the content to the clipboard, shows brief confirmation, and dispatches a `clipboardCopyText` custom event with the copied string.

### Custom element

`hb-area-code`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `content` | string (required) | Text shown inside the code block. |

**Style / theming:** CSS custom property `--hb-area-code-background` (color). **CSS part:** `content` (the code element). No HTML slots.

### Events (`CustomEvent` names)

- **`clipboardCopyText`** — `{ text: string }` — Fired after a successful clipboard copy with the copied text.

### Usage notes

- Uses Bootstrap-aligned theming patterns; primary styling is the component SCSS and `--hb-area-code-background`.
- Icons: not central to this component (copy UI is internal).
- Shadow DOM: `::part(content)` can target the code element.
- No i18n entries in `docs.ts`.

### Minimal HTML example

```html
<hb-area-code content="npm install @htmlbricks/hb-area-code"></hb-area-code>
```
npm package: @htmlbricks/hb-auth-social-login-button
Description: Clickable OAuth provider tile (default SVGs for Google, GitHub, GitLab, Facebook, Authentik; overridable via slot). Builds the provider authorization URL from `provider` params or redirects to a prebuilt `url`, then on return parses the current page URL t
Latest version: 0.71.18

## `hb-auth-social-login-button` — auth-social-login-button

**Category:** auth | **Tags:** auth, oauth

### What it does

Clickable OAuth provider tile (default SVGs for Google, GitHub, GitLab, Facebook, Authentik; overridable via slot). Builds the provider authorization URL from `provider` params or uses a prebuilt `url`, then parses the return URL to exchange code/token with `simple-serverless-auth-client` when `social_auth_server_url` and `auth_cookie_name` are set. Emits `oauthFlowInit`, `oauthFlowSuccess`, or `oauthFlowCustom` for custom flows.

### Custom element

`hb-auth-social-login-button`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `social_auth_server_url` | string (optional) | Server URL for token exchange. |
| `auth_cookie_name` | string (optional) | Cookie name used by the auth client. |
| `redirectonlogin` | string (optional) | Post-login redirect. |
| `provider` | object (optional) | JSON: `{ url?: string; name: "facebook" \| "google" \| "gitlab" \| "github" \| "authentik"; params?: { redirect_url; client_id; scope; auth_server_url? } }`. |

**Slots:** `header`. **i18n:** Italian and English in metadata.

### Events (`CustomEvent` names)

- **`oauthFlowSuccess`** — `{ token: string }`
- **`oauthFlowInit`** — `{ token?: string; provider: IProvider; tmpCode?: string; redirect_uri?: string }` (`IProvider` = facebook \| google \| gitlab \| github \| authentik)
- **`oauthFlowCustom`** — `{ provider: IProvider }`

### Usage notes

- Bootstrap 5 theme variables (`--bs-*`) apply to layout/button styling.
- Provider artwork aligns with common OAuth brands; slot `header` can override presentation.
- Shadow DOM encapsulates default SVGs; configure via attributes and slots.
- Use `i18nlang` on parent `hb-auth` or this component’s i18n metadata where wired.

### Minimal HTML example

```html
<hb-auth-social-login-button
  provider='{"name":"google","url":"https://accounts.google.com/o/oauth2/v2/auth?..."}'
  social_auth_server_url="https://auth.example.com"
  auth_cookie_name="session"
></hb-auth-social-login-button>
```
npm package: @htmlbricks/hb-banner
Description: Marketing-style hero strip: logo image beside a title and subtitle, using Bootstrap grid. Layout switches from side-by-side on large screens to stacked, centered content on smaller breakpoints (`d-none d-lg-block` / `d-lg-none`).
Latest version: 0.71.18

## `hb-banner` — banner

**Category:** content | **Tags:** content, marketing

### What it does

Marketing-style hero strip: logo image beside a title and subtitle, using **Bulma** `container is-fluid`, `columns`, and `title` / `subtitle`. Desktop layout uses `is-hidden-touch`; compact layout uses `is-hidden-desktop`.

### Custom element

`hb-banner`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `title` | string (optional) | Main heading text. |
| `description` | string (optional) | Subtitle or body text. |
| `logouri` | string (optional) | Logo image URL. |

No CSS vars or slots in style setup metadata.

### Events (`CustomEvent` names)

None declared in types (`Events` is an empty object).

### Usage notes

- Relies on Bulma grid, visibility helpers (`is-hidden-touch`, `is-hidden-desktop`), and typography helpers (`has-text-right`, `has-text-centered`).
- Icons are not bundled; extend the markup if you need icon fonts.
- Shadow DOM keeps typography/spacing internal unless slotted content is added in implementation.
- No i18n in `docs.ts`.

### Minimal HTML example

```html
<hb-banner
  title="Welcome"
  description="Build faster with our component library."
  logouri="https://example.com/logo.svg"
></hb-banner>
```
npm package: @htmlbricks/hb-calendar-appointments
Description: Month agenda view: events for the current month are grouped by calendar day and listed chronologically with weekday, day number, time, and colored markers. Optional header with month navigation; changing month or selecting a day dispatches `changeCalendar
Latest version: 0.71.18

## `hb-calendar-appointments` — calendar-appointments

**Category:** calendar | **Tags:** calendar, appointments

### What it does

Month agenda view: events for the current month are grouped by calendar day and listed chronologically with weekday, day number, time, and colored markers. Optional header with month navigation; changing month or selecting a day dispatches `changeCalendarDate`, `changeSelectedDate`, and clicking a row dispatches `calendarEventClick`. Uses Italian public holidays metadata; `events` is supplied as JSON.

### Custom element

`hb-calendar-appointments`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `date` | Date (optional) | Current calendar month context; pass as ISO string / parsed JSON in HTML. |
| `events` | array (optional) | JSON array of `{ date: Date; label: string; id: string; link?; icon?; color? }`. |
| `selected` | Date (optional) | Selected day. |
| `disable_header` | boolean (optional) | Hide the navigation header when true. |

**Theme:** `--hb-calendar-selected`, `--hb-calendar-hover`, `--hb-calendar-today`. **Parts:** `calendar-header`, `calendar-current-time-header`, `cell`. **Slots:** `header_month_icon_prev`, `header_month_icon_next`, `header`, `calendar_month`.

### Events (`CustomEvent` names)

- **`calendarEventClick`** — `{ eventId: string }`
- **`changeCalendarDate`** — `{ date: Date }`
- **`changeSelectedDate`** — `{ selectedDate: Date }`

### Usage notes

- Bootstrap 5–oriented colors via CSS variables above.
- Italian holiday data is built in; adjust expectations for non-IT locales.
- Shadow DOM exposes named parts for deeper styling.
- Pass `events` and dates as JSON strings from HTML attributes; runtime parsing depends on the web component bridge.

### Minimal HTML example

```html
<hb-calendar-appointments
  disable_header="false"
  events='[{"id":"1","label":"Meeting","date":"2026-03-15T10:00:00.000Z"}]'
></hb-calendar-appointments>
```
npm package: @htmlbricks/hb-calendar-events
Description: Classic month grid (7-day week header and variable rows) with selectable cells, “today” styling, and event chips inside each day. Supports adjacent-month padding cells, Italian holidays, JSON `events`, and the same navigation/selection events as the appoi
Latest version: 0.71.18

## `hb-calendar-events` — calendar-events

**Category:** calendar | **Tags:** calendar

### What it does

Classic month grid (7-day week header and variable rows) with selectable cells, “today” styling, and event chips inside each day. Supports adjacent-month padding cells, Italian holidays, JSON `events`, and the same navigation/selection events as the appointments calendar.

### Custom element

`hb-calendar-events`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `date` | Date (optional) | Visible month anchor. |
| `events` | array (optional) | JSON array of `{ date: Date; label: string; id: string; link?; icon?; color? }`. |
| `selected` | Date (optional) | Highlighted date. |
| `disable_header` | boolean (optional) | Hide month navigation when true. |

**Theme:** `--hb-calendar-selected`, `--hb-calendar-hover`, `--hb-calendar-today`. **Parts:** `calendar-header`, `calendar-current-time-header`, `cell`. **Slots:** `header_month_icon_prev`, `header_month_icon_next`, `header`, `calendar_month`.

### Events (`CustomEvent` names)

- **`calendarEventClick`** — `{ eventId: string }`
- **`changeCalendarDate`** — `{ date: Date }`
- **`changeSelectedDate`** — `{ selectedDate: Date }`

### Usage notes

- Styling aligns with Bootstrap-themed CSS variables on the host.
- Shares behavior with `hb-calendar-appointments` for events and navigation.
- Shadow DOM + parts allow styling cells and headers.
- No i18n entries in `docs.ts`; holidays skew Italian.

### Minimal HTML example

```html
<hb-calendar-events
  events='[{"id":"a","label":"Launch","date":"2026-03-01T09:00:00.000Z","color":"#0d6efd"}]'
></hb-calendar-events>
```
npm package: @htmlbricks/hb-captcha-google-recaptcha-v2-invisible
Description: Loads the Google reCAPTCHA v2 invisible SDK, renders the widget with your `api_key`, and exposes `grecaptcha.execute()` / reset when the `get` attribute changes after render. Dispatches `googleRecaptchaRendered` once mounted and `googleRecaptchaV2Response
Latest version: 0.71.18

## `hb-captcha-google-recaptcha-v2-invisible` — captcha-google-recaptcha-v2-invisible

**Category:** utilities | **Tags:** utilities, security

### What it does

Loads the Google reCAPTCHA v2 invisible SDK, renders the widget with your `api_key`, and exposes `grecaptcha.execute()` / reset when the `get` attribute changes after render. Dispatches `googleRecaptchaRendered` once mounted and `googleRecaptchaV2Response` with the token from the verification callback.

### Custom element

`hb-captcha-google-recaptcha-v2-invisible`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `api_key` | string (optional) | Google reCAPTCHA site key. |
| `get` | any (optional) | Trigger prop: changing after render drives execute/reset (see component behavior). |

**Bootstrap theme vars** in metadata. **CSS part:** `invalid-feedback`. No slots.

### Events (`CustomEvent` names)

- **`googleRecaptchaV2Response`** — `{ response: string }` — Verification token from Google.
- **`googleRecaptchaRendered`** — `{ render: true }` — Widget finished rendering.

### Usage notes

- Uses Bootstrap form-feedback styling via the `invalid-feedback` part.
- Requires loading Google’s script; CSP and domain allowlisting apply outside the component.
- Shadow DOM wraps the widget; style invalid states through the exposed part.
- No i18n in `docs.ts`.

### Minimal HTML example

```html
<hb-captcha-google-recaptcha-v2-invisible api_key="YOUR_SITE_KEY"></hb-captcha-google-recaptcha-v2-invisible>
```
npm package: @htmlbricks/hb-card-video
Description: Bulma `card` with a 16:9 `image` frame: YouTube embed when `provider` is `youtube`, otherwise an HTML5 `<video>` with MP4 source. Optional title, truncated description (100 chars), formatted `time` via Day.js (`dateformat`), “read more” primary button, an
Latest version: 0.71.18

## `hb-card-video` — card-video

**Category:** media | **Tags:** media, video

### What it does

**Bulma** `card` with a 16:9 `image` frame: YouTube embed when `provider` is `youtube`, otherwise an HTML5 `<video>` with MP4 source. Optional title, truncated description, formatted `time` via Day.js (`dateformat`), “read more” `button is-primary`, and social share placeholders when `pageuri` is set. Bootstrap Icons for the clock in the footer.

### Custom element

`hb-card-video`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `title` | string (optional) | Card title. |
| `description` | string (optional) | Body text (truncated in UI). |
| `videosrc` | string (required) | Video URL or embed source. |
| `provider` | union (optional) | `"youtube"` or `""` for native video. |
| `pageuri` | string (optional) | Page URL for share widgets. |
| `linklabel` | string (optional) | Label for the “read more” style link. |
| `time` | Date (optional) | Publication or event time; pass parseable date string in HTML. |
| `dateformat` | string (optional) | Day.js format string for `time`. |

**Slot:** `card-footer`. No CSS vars in metadata.

### Events (`CustomEvent` names)

None declared in types (`Events` is an empty object).

### Usage notes

- Card layout follows Bulma `card` / `card-image` / `card-content` / `card-footer` patterns.
- YouTube vs file video is selected only via `provider`; ensure `videosrc` matches the mode.
- Shadow DOM contains the player and share UI; slot `card-footer` extends the card.
- No i18n in `docs.ts`.

### Minimal HTML example

```html
<hb-card-video
  videosrc="https://example.com/media/clip.mp4"
  title="Product tour"
  description="A short walkthrough of the dashboard."
  time="2026-03-01T12:00:00.000Z"
  dateformat="MMM D, YYYY"
></hb-card-video>
```
npm package: @htmlbricks/hb-chartjs
Description: Embeds Chart.js (line, bar, pie, radar, time scales, etc.) inside the shadow DOM. Pass a JSON `data` object with `type`, `data`, and optional `options`; the chart is recreated on data changes and when the container resizes (ResizeObserver + debounced wind
Latest version: 0.71.18

## `hb-chartjs` — chartjs

**Category:** data | **Tags:** data, chart

### What it does

Embeds Chart.js (line, bar, pie, radar, time scales, etc.) inside the shadow DOM. Pass a JSON `data` object with `type`, `data`, and optional `options`; the chart is recreated on data changes and when the container resizes. Clicking the canvas dispatches `chartClick` with the nearest point’s label and value.

### Custom element

`hb-chartjs`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `data` | any (required) | JSON Chart.js configuration: `{ type, data, options? }`. |

**CSS part:** `container`. No slots.

### Events (`CustomEvent` names)

- **`chartClick`** — `{ label?: string; value?: any }[]` — Per types, payload is an **array** of point-like objects (label/value pairs from the hit detection).

### Usage notes

- Chart.js runs inside shadow DOM; global Chart defaults may not apply unless duplicated.
- Bootstrap is not required for the canvas itself; host page can still use BS layout around the element.
- ResizeObserver + debounced window resize keep charts responsive.
- Pass `data` as a JSON string attribute from plain HTML.

### Minimal HTML example

```html
<hb-chartjs
  data='{"type":"bar","data":{"labels":["A","B"],"datasets":[{"label":"K","data":[1,2]}]},"options":{}}'
></hb-chartjs>
```
npm package: @htmlbricks/hb-checkout
Description: End-to-end checkout flow: editable billing/shipping user profile (`hb-form`), shipment method choice, optional card form, Google Pay (`@google-pay/button-element`), and PayPal via `hb-payment-paypal` according to `gateways` and `payment` JSON. Parses stri
Latest version: 0.71.18

## `hb-checkout` — checkout

**Category:** commerce | **Tags:** commerce, checkout

### What it does

End-to-end checkout flow: editable billing/shipping user profile (`hb-form`), shipment method choice, optional card form, Google Pay, and PayPal via `hb-payment-paypal` according to `gateways` and `payment` JSON. Parses string props into objects, merges card network defaults, and tracks `completed` to switch between editable steps and a read-only confirmation summary with events for payment and form submissions.

### Custom element

`hb-checkout`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `shipments` | array (required) | JSON `IShipment[]`: price, selected?, standard?, arriveDate, available, id, label, currency. |
| `user` | object (optional) | JSON `IUser`: fullName, address fields, nationality, fixed?. |
| `gateways` | array (required) | JSON `IGateway[]`: id `google` \| `paypal`, label, fees, PayPal/Google Pay fields. |
| `payment` | object (required) | JSON `IPayment`: merchantName, total, currencyCode, countryCode, type?, shipmentFee?. |
| `completed` | union (optional) | `"yes"` \| `"no"` — controls summary vs edit flow. |

**CSS vars:** `--edit-color`, `--paypal-button-color`, `--hb-checkout-border`, Bulma `--bulma-*` (see `extra/docs.ts`). **Parts:** `title`, `subtitle`, `payment_terms_note`. **Slots:** `payment_terms`, `payment_completed`, `userinfo`, `title`.

### Events (`CustomEvent` names)

- **`paymentCompleted`** — `{ total: number; method: string; completed: true }`
- **`saveUser`** — `IUser` payload
- **`saveShipment`** — `IShipment` payload
- **`completed`** — `"yes"` \| `"no"` (listed in `Events` interface)

### Usage notes

### Styling (Bulma)

Chrome uses **Bulma** `button`, `title`, and `subtitle`. Theme on `:host` via Bulma’s CSS variables; set **`--bulma-*`** (and optional `--edit-color`) from the page. **Bootstrap Icons** load from `<svelte:head>` for delivery/payment icons.

- Nested `hb-form` / payment elements carry their own shadow styles.
- Nested web components (`hb-form`, payment elements) live inside the flow.
- Large JSON props are typical; validate shapes before setting attributes.
- No i18n array in `docs.ts` for this component.

### Minimal HTML example

```html
<hb-checkout
  completed="no"
  payment='{"merchantName":"Acme","total":49.99,"currencyCode":"EUR","countryCode":"IT","type":"buy"}'
  shipments='[{"id":"std","label":"Standard","price":5,"arriveDate":"2026-04-01T00:00:00.000Z","available":true,"currency":"€"}]'
  gateways='[{"id":"paypal","label":"PayPal","paypalid":"sandbox"}]'
></hb-checkout>
```
npm package: @htmlbricks/hb-checkout-shopping-cart
Description: Order summary built on `hb-table`: maps `payment.items` into rows (name, quantity, line total), computes subtotal, tax, and grand total from item prices, and shows country/currency (with simple symbol defaults). When `completed` is enabled it switches to 
Latest version: 0.71.18

## `hb-checkout-shopping-cart` — checkout-shopping-cart

**Category:** commerce | **Tags:** commerce, cart

### What it does

Order summary built on `hb-table`: maps `payment.items` into rows (name, quantity, line total), computes subtotal, tax, and grand total from item prices, and shows country/currency. When `completed` is enabled it switches to a compact “order placed” state; `payment` can be supplied as JSON.

### Custom element

`hb-checkout-shopping-cart`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `payment` | object (required) | JSON `IShoppingPayment`: countryCode `IT` \| `US` \| `EU`, currencySymbol?, shipmentFee?, items: `IShopItem[]` (id, name, unitaryPrice, taxPercentage, quantity?, unit?). |
| `completed` | union (optional) | `"yes"` \| `"no"` — order-placed compact UI when enabled. |

**CSS vars:** `--hb-checkout-border`, Bulma `--bulma-*` (see `extra/docs.ts`). No slots or parts in metadata.

### Styling (Bulma)

Uses **Bulma** `container`, `columns` / `column`, and `title`. Theme tokens on `:host`; override with **`--bulma-*`**. **Bootstrap Icons** load from `<svelte:head>` for the cart icon.

### Events (`CustomEvent` names)

None declared in types (`Events` is an empty object).

### Usage notes

- Styling uses Bulma theme variables on `:host` (`--bulma-*`); see `extra/docs.ts`.
- Depends on `hb-table` internally for row layout.
- Shadow DOM encapsulates the table presentation.
- No i18n in `docs.ts`.

### Minimal HTML example

```html
<hb-checkout-shopping-cart
  payment='{"countryCode":"IT","currencySymbol":"€","items":[{"id":"sku1","name":"T-shirt","unitaryPrice":19.99,"taxPercentage":22,"quantity":2}]}'
  completed="no"
></hb-checkout-shopping-cart>
```
npm package: @htmlbricks/hb-contact-card
Description: A comprehensive contact card component that displays personal, contact, company, and social media information in a Bulma-styled card layout. Uses a single data object with structured arrays for phone numbers, addresses, and social media profiles. Features
Latest version: 0.71.18

## `hb-contact-card` — contact-card

**Category:** content | **Tags:** content, contact

### What it does

A comprehensive contact card: personal, contact, company, and social information in a Bulma-styled card. Uses one `data` object with structured arrays for phones, addresses, and social profiles. Features include avatar placeholder, clickable contact rows, social links, collapsible sections, and an actions dropdown with grouping, badges, and links.

### Custom element

`hb-contact-card`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `data` | object (required) | JSON `ContactData`: names, title, emails[], phones[], website, addresses[], company fields, notes, avatar, lat/long, socialMedia[], clickable?. |
| `actions_list` | array (optional) | JSON `IDropDownMenuListItem[]`: key, label, badge?, group?, linkHref?. |
| `i18nlang` | string (optional) | `en` \| `it` (storybook). |
| `show_header_collapse_button` | union (optional) | `"yes"` \| `"no"` — default `"yes"`. |
| `start_collapsed` | union (optional) | `"yes"` \| `"no"` — default `"no"`. |

**CSS vars:** `--hb--contact-card-*` (colors, radius, shadows). **Parts:** `card`, `header`, `body`, `avatar`, `actions`. No HTML slots.

### Events (`CustomEvent` names)

- **`contactClick`** — `{ id: string; contact: Component }` (`Component` = this element’s prop bag type)
- **`contactEdit`** — `{ id: string; contact: Component }`
- **`contactDelete`** — `{ id: string; contact: Component }`
- **`phoneClick`** — `{ id: string; phone: PhoneNumber }`
- **`emailClick`** — `{ id: string; email: EmailAddress }`
- **`websiteClick`** — `{ id: string; website: string }`
- **`socialClick`** — `{ id: string; social: SocialMedia }`
- **`addressClick`** — `{ id: string; address: Address }`
- **`collapseChange`** — `{ id: string; collapsed: boolean }`

### Usage notes

- Colors use custom properties aligned with the card skin; Bulma theme variables apply on `:host`.
- Icons use bootstrap-icons for contact and social affordances.
- Shadow DOM exposes `::part()` hooks for card regions.
- Set `i18nlang` for English or Italian strings.

### Minimal HTML example

```html
<hb-contact-card
  id="c1"
  i18nlang="en"
  data='{"fullName":"Alex Doe","emails":[{"address":"alex@example.com","type":"work"}],"clickable":true}'
  actions_list='[{"key":"edit","label":"Edit"}]'
></hb-contact-card>
```
npm package: @htmlbricks/hb-contact-item
Description: Single contact line (mutually exclusive props): phone, postal address, email, website, or social network. Renders a Bootstrap Icon and optional visible text; JSON `config` toggles icons (filled/outline), label text, and whether clicks dispatch `contactCli
Latest version: 0.71.18

## `hb-contact-item` — contact-item

**Category:** content | **Tags:** content, contact

### What it does

Single contact line (mutually exclusive props): phone, postal address, email, website, or social network. Renders a Bootstrap Icon and optional visible text; JSON `config` toggles icons (filled/outline), label text, and whether clicks dispatch `contactclick` with `{ action, options }` vs opening a window (maps URL, `mailto`, external site, or social page).

### Custom element

`hb-contact-item`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `phone` | object (optional) | JSON `IPhone`: number, callOnClick?. |
| `address` | object (optional) | JSON `IAddress`: mapUri?, latLang?, address, shortAddress?. |
| `email` | object (optional) | JSON `IEmail`: mailLink?, address. |
| `site` | object (optional) | JSON `ISite`: label?, uri?, open?. |
| `social` | object (optional) | JSON `ISocial`: label?, pageUri?, name. |
| `config` | object (optional) | JSON `IConfig`: icon?.fill, text?, dispatcher?. |

No CSS vars, parts, or slots in metadata.

### Events (`CustomEvent` names)

- **`contactclick`** — `{ action: string; options: any }` — Exact event name is lowercase in types.

### Usage notes

- Icons come from bootstrap-icons naming conventions.
- Only one of phone/address/email/site/social should be primary per row (per description).
- Shadow DOM wraps the row; no theme variables declared in docs.
- No i18n in `docs.ts`.

### Minimal HTML example

```html
<hb-contact-item
  email='{"address":"hello@example.com","mailLink":true}'
  config='{"text":true,"dispatcher":true}'
></hb-contact-item>
```
npm package: @htmlbricks/hb-cookie-law-banner
Description: Bootstrap alert cookie notice shown until the user chooses accept or decline; the choice is stored in `localStorage` under `cookielaw` so the banner stays hidden on return visits. Supports i18n via `i18nlang`, optional `cookielawuri4more` link, JSON `capa
Latest version: 0.71.18

## `hb-cookie-law-banner` — cookie-law-banner

**Category:** layout | **Tags:** layout, compliance

### What it does

Bootstrap alert cookie notice until the user accepts or declines; the choice is stored in `localStorage` under `cookielaw`. Supports i18n via `i18nlang`, optional `cookielawuri4more` link, JSON `capabilities` for extended consent, slots to override title/text, and dispatches `acceptCookieLaw` with `{ accepted: "yes" | "no" }`.

### Custom element

`hb-cookie-law-banner`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `allowdecline` | union (optional) | `"yes"` \| `"no"` — show decline action. |
| `i18nlang` | string (optional) | Language key (e.g. `en`, `it`). |
| `capabilities` | object (optional) | JSON `ICapabilities`: cookie groups and items with scopes, mandatory flags, etc. |
| `cookielawuri4more` | string (optional) | “Learn more” URL. |

**Slots:** `title`, `text`. **i18n:** Italian and English in metadata.

### Events (`CustomEvent` names)

- **`acceptCookieLaw`** — `{ accepted: "yes" | "no" }`

### Usage notes

- Uses Bootstrap alert styling patterns.
- Fullscreen layout size hint in metadata for Storybook-style hosts.
- Shadow DOM; override copy via `title` and `text` slots.
- Set `i18nlang` to match declared languages.

### Minimal HTML example

```html
<hb-cookie-law-banner
  allowdecline="yes"
  i18nlang="en"
  cookielawuri4more="https://example.com/cookies"
></hb-cookie-law-banner>
```
npm package: @htmlbricks/hb-dashboard-card1
Description: Bulma card shell for dashboards: JSON `header` supplies optional Bootstrap Icon name, title label, and right-aligned tag; JSON `body` can remove inner padding with `noborder`. Default slots `header_content` and `content` let you inject arbitrary markup be
Latest version: 0.71.18

## `hb-dashboard-card1` — dashboard-card1

**Category:** data | **Tags:** data, dashboard

### What it does

Bulma card shell for dashboards: JSON `header` supplies optional Bootstrap Icon name, title label, and right-aligned tag; JSON `body` can remove inner padding with `noborder`. Slots let you inject markup (`header_content`, `content`). Bootstrap Icons are loaded from the CDN in `svelte:head` for `bi` classes on the optional header icon.

### Custom element

`hb-dashboard-card1`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `header` | object (optional) | JSON `{ icon?: string; label: string; badge?: string }`. |
| `body` | object (optional) | JSON `{ noborder?: boolean }`. |

**Bulma `--bulma-*` theme vars** (see `extra/docs.ts`). **Parts:** `text_placeholder`, `badge`, `card`. **Slots:** `header_content`, `content`.

### Events (`CustomEvent` names)

None declared in types (`Events` is an empty object).

### Styling (Bulma)

The component uses Bulma `card`, `card-header`, `card-header-title`, `card-content`, and `tag`. Theme defaults are applied on `:host` via Bulma’s light theme and `setup-theme`. Override card look with public `--bulma-*` properties (for example `--bulma-card-background-color`, `--bulma-card-shadow`, `--bulma-card-header-color`). Bootstrap Icons remain a separate stylesheet for `header.icon`.

### Usage notes

- `header.icon` should be a bootstrap-icons icon name string (without the `bi-` prefix).
- Use `::part(card)` and related parts for host-level theming inside shadow root.
- No i18n in `docs.ts`.

### Minimal HTML example

```html
<hb-dashboard-card1
  header='{"label":"Revenue","icon":"graph-up","badge":"+12%"}'
  body='{"noborder":false}'
></hb-dashboard-card1>
```
npm package: @htmlbricks/hb-dashboard-counter-lines
Description: Vertical list of metric rows from JSON `lines`: each row shows optional Bootstrap Icon, label text, and a Bulma `tag is-light is-rounded` counter. `link.type` chooses behavior—open URI in a new tab, same-window navigation, custom `counterClick` event with
Latest version: 0.71.18

## `hb-dashboard-counter-lines` — dashboard-counter-lines

**Category:** data | **Tags:** data, dashboard

### What it does

Vertical list of metric rows from JSON `lines`: each row shows optional Bootstrap Icon, label text, and a Bulma light rounded tag for the counter value. `link.type` chooses behavior—open URI in a new tab, same-window navigation, custom `counterClick` event with a key, or a static row with no click handler.

### Styling (Bulma)

The component bundles **Bulma 1.x** in the shadow root: **`elements/tag`** only, with theme defaults on `:host` (`--bulma-hb-def-*`). Set public **`--bulma-*`** on `body` or `:root` so they inherit onto the host. Icons remain **Bootstrap Icons** (loaded via `<svelte:head>`); use icon names in the `icon` field. See [Bulma CSS variables](https://bulma.io/documentation/features/css-variables/).

**Shadow markup (simplified):**

- **`div.item`** — row; optional click for `tab` / `page` / `event` links.
- **`div.item_content`** / **`div.text`** — label + optional **`i.bi`**.
- **`div.value.tag.is-light.is-rounded`** — counter (exposed as part **`value`**).

### Custom element

`hb-dashboard-counter-lines`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `lines` | array (optional) | JSON `Line[]`: text, value, link?: `{ type: "tab" \| "page" \| "event"; uri: string }`, index?, icon?. |

**Parts:** `item`, `icon`, `text`, `value`. No slots.

### Events (`CustomEvent` names)

- **`counterClick`** — `{ key: string }` — Used when a line’s `link.type` is `"event"` (per docs behavior).

### Usage notes

- Icons use bootstrap-icons names in the `icon` field.
- Rows are dashboard-style metrics, not a navigation menu.
- Shadow DOM exposes granular parts per row segment.
- No i18n in `docs.ts`.

### Minimal HTML example

```html
<hb-dashboard-counter-lines
  lines='[{"text":"Active users","value":"1.2k","icon":"people"},{"text":"Errors","value":"3","icon":"exclamation-triangle"}]'
></hb-dashboard-counter-lines>
```
npm package: @htmlbricks/hb-dashboard-indicator
Description: Compact KPI tile: large `number`, caption `text`, configurable Bootstrap Icon, and `karma` accent (`success` | `danger` | `warning` | `primary` | `secondary` | `info`) using Bulma theme tokens (`secondary` maps to Bulma `dark`), or `karma="none"` with hos
Latest version: 0.71.18

## `hb-dashboard-indicator` — dashboard-indicator

**Category:** data | **Tags:** data, dashboard

### What it does

Compact KPI tile: large `number`, caption `text`, configurable Bootstrap Icon, and `karma` accent from Bulma semantic colors. When `link_label` is set, a footer strip is shown and clicks dispatch `dashboardIndicatorClick` with the component `id`.

### Custom element

`hb-dashboard-indicator`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier (used in click payload). |
| `style` | string (optional) | Inline style string. |
| `number` | number (required) | Main KPI value. |
| `text` | string (optional) | Caption under the number. |
| `icon` | string (required) | Bootstrap Icons name. |
| `link_label` | string (optional) | If set, shows footer and enables click dispatch. |
| `karma` | string (optional) | Accent: Bulma semantics `success`, `danger`, `warning`, `primary`, `secondary`, `info` (`secondary` uses Bulma’s `dark` palette), or `none` to use the host CSS variable below. Default `success`. |

**CSS var (with `karma="none"`):** `--hb--dashboard-indicator-background` — header background and footer accent (any valid CSS color). If omitted while `karma` is `none`, falls back to Bulma `success`. With any other `karma`, this variable is ignored. No slots or parts in metadata.

### Events (`CustomEvent` names)

- **`dashboardIndicatorClick`** — `{ id: string }`

### Usage notes

- With Bulma `karma` values, accent comes from `--bulma-*` tokens on `:host`. With `karma="none"`, set `--hb--dashboard-indicator-background` on `hb-dashboard-indicator` (e.g. `style="--hb--dashboard-indicator-background: #6366f1"`).
- Icon name must match bootstrap-icons.
- Shadow DOM wraps the tile; pass `id` when using click events.
- No i18n in `docs.ts`.

### Minimal HTML example

```html
<hb-dashboard-indicator
  id="kpi-sales"
  number="128"
  text="Orders today"
  icon="cart-check"
  link_label="View details"
  karma="success"
></hb-dashboard-indicator>
```

### Custom color (`karma="none"`)

```html
<hb-dashboard-indicator
  karma="none"
  style="--hb--dashboard-indicator-background: #6366f1"
  number="12"
  text="Custom"
  icon="stars"
></hb-dashboard-indicator>
```
npm package: @htmlbricks/hb-dialog-loader
Description: Thin wrapper around `hb-dialog` that opens automatically while numeric `percentage` is non-zero and shows a Bootstrap progress bar filled to that value. Forwards `modalShow` from the inner dialog so parents can track open state; slots allow overriding the
Latest version: 0.71.18

## `hb-dialog-loader` — dialog-loader

**Category:** overlays | **Tags:** overlays, modal, loading

### What it does

Thin wrapper around `hb-dialog` that opens automatically while numeric `percentage` is non-zero and shows a **Bulma** `<progress class="progress">` filled to that value. Forwards `modalShow` from the inner dialog; slots allow overriding the dialog title.

### Custom element

`hb-dialog-loader`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `title` | string (optional) | Dialog title text. |
| `percentage` | number (required) | 0 hides/closes behavior; non-zero shows progress (per description). |

**Bulma `--bulma-*` vars** (see `extra/docs.ts`). **Slot:** `title`. No parts in metadata.

### Events (`CustomEvent` names)

- **`modalShow`** — `{ id: string; show: boolean }` — Forwarded from inner `hb-dialog`.

### Usage notes

- Progress UI uses Bulma `elements/progress` (`is-primary`); percentage is shown below the bar.
- Parent should drive `percentage` from async task state.
- Nested `hb-dialog` means the same overlay constraints as `hb-dialog`.
- No i18n in `docs.ts`.

### Minimal HTML example

```html
<hb-dialog-loader title="Uploading…" percentage="45"></hb-dialog-loader>
```
npm package: @htmlbricks/hb-dialogform
Description: Bulma-based modal workflow: embeds `hb-form` with the same `schema` contract; live `updateForm` events mirror form validity and values, and the confirm button dispatches `modalFormConfirm` with the last valid payload or `modalFormCancel` when dismissed or
Latest version: 0.71.18

## `hb-dialogform` — dialogform

**Category:** forms | **Tags:** forms, overlays

### What it does

Modal that embeds `hb-form` with the same `schema` contract: live form updates mirror validity and values via `updateForm`, and the confirm button dispatches `modalFormConfirm` with the last valid payload or `modalFormCancel` when dismissed or invalid. Composes `hb-dialog` (Bulma modal, backdrop/keyboard, `show`) and re-dispatches `modalShow`.

### Custom element

`hb-dialogform`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `show` | union (optional) | `"yes"` \| `"no"`. |
| `dialogclasses` | string (optional) | Reserved on the type; not yet applied in the template. |
| `title` | string (optional) | Modal title. |
| `backdrop` | boolean (optional) | Backdrop toggle. |
| `keyboard` | boolean (optional) | Escape closes when true. |
| `describedby` | string (optional) | ARIA describedby. |
| `labelledby` | string (optional) | ARIA labelledby. |
| `content` | string (optional) | Supplemental content string. |
| `closelabel` | string (optional) | Close button label. |
| `confirmlabel` | string (optional) | Confirm button label. |
| `schema` | array (required) | JSON form schema (same shape as `hb-form` `schema`). |

**Bulma / theme:** CSS variables follow `hb-dialog` and `hb-form` (see those components). **Slots:** `form-header`, `form-footer`, `header`, `modal-footer`, `footer`, `close-button-label`, `confirm-button-label`.

### Events (`CustomEvent` names)

- **`modalFormConfirm`** — `{ [key: string]: any }` — Submitted field map / payload (types use open object).
- **`modalShow`** — `{ id: string; show: boolean }`
- **`modalFormCancel`** — `{ id: string; error?: string }`
- **`updateForm`** — same detail shape as `hb-form` `update` (see form event types).

### Usage notes

- Built on Bulma modal + form patterns shared with `hb-dialog` and `hb-form`.
- `schema` is typically a JSON string in HTML; validate against `hb-form` field types.
- Shadow DOM composes nested components; slots map to form and modal regions.
- No i18n array in `docs.ts` for this component.

### Minimal HTML example

```html
<hb-dialogform
  show="yes"
  title="Edit profile"
  schema='[{"type":"text","id":"name","label":"Name","required":true,"value":""}]'
  confirmlabel="Save"
  closelabel="Cancel"
></hb-dialogform>
```
npm package: @htmlbricks/hb-downloader
Description: Opens `hb-dialog` while `uri` is set and downloads the resource with `XMLHttpRequest` as a blob: optional JSON `headers`, inferred or explicit `targetfilename`, `Content-Disposition` parsing when exposed by CORS, progress bar from `onprogress`, then trigg
Latest version: 0.71.18

## `hb-downloader` — downloader

**Category:** utilities  
**Tags:** utilities, files

### What it does

Opens `hb-dialog` while `uri` is set and downloads the resource with `XMLHttpRequest` as a blob: optional JSON `headers`, inferred or explicit `targetfilename`, `Content-Disposition` parsing when exposed by CORS, **Bulma** `<progress>` from `onprogress`, then triggers a browser file save. Dispatches `downloadComplete` or `downloadError` (with `downloadid`) and propagates `modalShow`; clears/aborts when the dialog closes.

### Custom element

`hb-downloader`

### Attributes (snake_case; use string values in HTML)

- `id` — optional string  
- `style` — optional string  
- `uri` — required string (resource URL)  
- `downloadid` — optional string (correlates emitted events)  
- `headers` — optional string (JSON object of request headers)  
- `targetfilename` — optional string (suggested download filename)

### Events

- `downloadError` — `{ downloaded: boolean; id: string; error: Error }`  
- `downloadComplete` — `{ downloaded: boolean; id: string }`  
- `modalShow` — `{ id: string; show: boolean }`

### Usage notes

Pass complex objects (`headers`) as JSON strings on attributes. Requires CORS and appropriate headers for progress and filename hints. Slot: `title` (dialog title). Progress styling uses Bulma `elements/progress` (`is-primary`); indeterminate bar while total length is unknown.

### Minimal HTML example

```html
<hb-downloader
  uri="https://example.com/file.pdf"
  targetfilename="document.pdf"
  headers="{&quot;Authorization&quot;:&quot;Bearer token&quot;}"
></hb-downloader>
```
npm package: @htmlbricks/hb-dropdown-notifications
Description: Bell control that toggles a Bulma `dropdown` (`is-active`): header row with optional “Clear all” (`clearurl`), default slot for notification rows, and optional footer “View all” (`viewurl`). `align` applies `is-right` on the dropdown for end alignment.
Latest version: 0.71.18

## `hb-dropdown-notifications` — dropdown-notifications

**Category:** overlays  
**Tags:** overlays, menu, notifications

### What it does

Bell control that toggles a Bulma `dropdown` (active state): header row with optional “Clear all” (`clearurl`), default slot for notification rows (`dropdown-item` rows work well), and optional footer link “View all” (`viewurl`). Set `align` to `"right"` for `is-right` menu alignment.

### Custom element

`hb-dropdown-notifications`

### Attributes (snake_case; use string values in HTML)

- `id` — optional string  
- `style` — optional string  
- `clearurl` — string (URL for clear-all; empty disables)  
- `viewurl` — string (URL for view-all; empty disables)  
- `align` — `"left"` | `"right"`

### Events

None declared on the component type.

### Usage notes

Slot: `title` (dropdown header). Default slot holds notification row content.

### Minimal HTML example

```html
<hb-dropdown-notifications
  clearurl=""
  viewurl="/notifications"
  align="right"
>
  <span slot="title">Notifications</span>
  <div class="dropdown-item">Sample notification</div>
</hb-dropdown-notifications>
```
npm package: @htmlbricks/hb-dropdown-simple
Description: Bootstrap dropdown menu: `list` is a JSON array of items with `key` (and labels as defined in your schema). Toggle open state with the trigger; choosing an item emits `dropDownClick` with the item `key` and closes the menu. `open` accepts boolean or strin
Latest version: 0.71.18

## `hb-dropdown-simple` — dropdown-simple

**Category:** overlays  
**Tags:** overlays, menu

### What it does

Bootstrap dropdown menu: `list` is a JSON array of items with `key` (and labels per your schema). Toggle open state with the trigger; choosing an item emits `dropDownClick` with the item `key` and closes the menu. `open` accepts boolean or string (`yes`/`no`); `position` aligns the menu left or right (defaults from host `float: right` when unset). Emits `dropdownSwitch` when toggled.

### Custom element

`hb-dropdown-simple`

### Attributes (snake_case; use string values in HTML)

- `id` — optional string  
- `style` — optional string (e.g. `float: right` influences default `position`)  
- `list` — string (JSON array of `{ key, label, … }`; optional `linkHref`, `badge`, `group`)  
- `open` — optional boolean or `"yes"` / `"no"`  
- `position` — optional `"left"` | `"right"`

### Events

- `dropdownSwitch` — `{ open: boolean; id: string }`  
- `dropDownClick` — `{ key: string }`

### Usage notes

CSS parts: `dropdown`, `dropdownbutton`, `dropdowncontent`.

### Minimal HTML example

```html
<hb-dropdown-simple
  list="[{&quot;key&quot;:&quot;a&quot;,&quot;label&quot;:&quot;Option A&quot;},{&quot;key&quot;:&quot;b&quot;,&quot;label&quot;:&quot;Option B&quot;}]"
  position="left"
></hb-dropdown-simple>
```
npm package: @htmlbricks/hb-editor-video
Description: Video trimmer UI: plays `src` with an `hb-range-slider` synced to the playhead and in/out bounds (`track` min/max seconds). Numeric time fields, cue-to-current-time buttons, and optional `hb-form` gate final submission. Emits `changeTrackValues`, `dispatc
Latest version: 0.71.18

## `hb-editor-video` — editor-video

**Category:** media  
**Tags:** media, video, editor

### What it does

Video trimmer UI: plays `src` with an `hb-range-slider` synced to the playhead and in/out bounds (`track` min/max seconds). Numeric time fields, cue-to-current-time buttons, and optional `hb-form` gate final submission. Emits `changeTrackValues`, `dispatchTrack` when no form is used, and form-driven submit when metadata is valid. The UI uses **Bulma** `card`, `image is-16by9`, `button`, and `input` controls (Bootstrap Icons for play/pause).

### Custom element

`hb-editor-video`

### Attributes (snake_case; use string values in HTML)

- `id` — optional string  
- `style` — optional string  
- `src` — required string (video URL)  
- `form` — optional string (JSON / schema for embedded `hb-form` when gating submit)  
- `track` — optional string (JSON `{ minValue, maxValue }` in seconds)

### Events

- `changeTrackValues` — `{ minVaule: number; maxValue: number }` (note: first key is spelled `minVaule` in the implementation)  
- `dispatchTrack` — `ITrack` or track merged with form submit payload when `form` is set

### Usage notes

Registers `hb-range-slider` and `hb-form`. Without `form`, use `dispatchTrack` for the trimmed range; with `form`, submission dispatches `dispatchTrack` including validated form fields.

### Minimal HTML example

```html
<hb-editor-video
  src="https://example.com/video.mp4"
  track="{&quot;minValue&quot;:0,&quot;maxValue&quot;:120}"
></hb-editor-video>
```
npm package: @htmlbricks/hb-faq-component
Description: FAQ layout with a horizontal topic strip (Bootstrap Icons + labels) that sets an optional `filter` key, and an accordion list built from JSON `info` entries (`title`, `topic`, HTML `text`). Checkbox hack expands/collapses answers; topics with `catchAll` c
Latest version: 0.71.18

## `hb-faq-component` — faq-component

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

### What it does

FAQ layout with a horizontal topic strip (Bootstrap Icons + labels) that sets an optional `filter` key, and an accordion list built from JSON `info` entries (`title`, `topic`, HTML `text`). Checkbox hack expands/collapses answers; topics with `catchAll` clear the filter.

### Custom element

`hb-faq-component`

### Attributes (snake_case; use string values in HTML)

- `id` — optional string  
- `style` — optional string  
- `info` — optional string (JSON array of `{ topic?, title, text }`; `text` may contain HTML)  
- `topics` — optional string (JSON array of `{ key, label, icon, catchAll?, index? }`)  
- `filter` — optional string (active topic key)

### Events

None declared on the component type.

### Usage notes

Drive content via `info` and `topics` as JSON strings. Icon names use Bootstrap Icons.

### Minimal HTML example

```html
<hb-faq-component
  topics="[{&quot;key&quot;:&quot;general&quot;,&quot;label&quot;:&quot;General&quot;,&quot;icon&quot;:&quot;question-circle&quot;}]"
  info="[{&quot;topic&quot;:&quot;general&quot;,&quot;title&quot;:&quot;First question&quot;,&quot;text&quot;:&quot;&lt;p&gt;Answer here.&lt;/p&gt;&quot;}]"
></hb-faq-component>
```