open-index/open-npm huggingface dataset:
npm package: @htmlbricks/hb-layout-desktop
Description: Desktop layout with top navbar, optional left sidebar (sidebar-desktop) when navigation links are present, main page area, optional cookie-law banner, and footer. The host is fixed to the viewport height (100dvh) so tall slotted content cannot grow the sh
Latest version: 0.71.18

# hb-layout-desktop

## Description

Desktop layout with top navbar, optional left sidebar (sidebar-desktop) when navigation links are present, main page area, optional cookie-law banner, and footer. Without `single_screen`, the page column scrolls and the cookie banner and footer are inside that scroll (footer appears after the slot when you scroll down). With `single_screen`, the cookie banner and footer stay fixed at the bottom of the main column (always visible); only the page slot area scrolls, and `footer.type` `auto` uses the compact footer. The sidebar rail is capped to the viewport band. Forwards navigation and footer events.

## Passing `navlinks` and sidebar icons

When `navlinks` is non-empty, this layout renders `hb-sidebar-desktop` and forwards your navigation data to it.

- **Property / attribute:** set `navlinks` on `hb-layout-desktop` the same way as on `hb-sidebar-desktop`: in HTML use a **JSON string** (serialized `INavLink[]`). In JavaScript you may assign an array of objects directly if your binding supports it.
- **Icons:** each link object can include optional `icon` with the Bootstrap Icons **glyph name only** (the part after `bi-` in the official class, e.g. `house-door` for `bi-house-door`). See the [`hb-sidebar-desktop` README](../sidebar-desktop/README.md#navigation-icons-bootstrap-icons) for the full rules, examples, and `subLinks` behavior.

## Types

```typescript
import type {
  IContacts,
  ISocials,
  ICompany,
  IColumn,
  IPolicies,
} from "../../footer/types/webcomponent.type";
import type { IUserMenu } from "../../navbar/types/webcomponent.type";
import type { INavLink } from "../../sidenav-link/types/webcomponent.type";

export type Component = {
  i18nlang?: string;
  id?: string;
  style?: string;
  socials?: ISocials;
  contacts?: IContacts;
  company?: ICompany;
  navlinks?: INavLink[];
  pagename?: string;
  page_title?: string;
  usermenu?: IUserMenu;
  cookielaw?: string;
  columns?: IColumn[];
  single_screen?: boolean;
  cookielawuri4more?: string;
  cookielawallowdecline?: boolean;
  cookielawlanguage?: string;
  sidebar?: { title?: string; logo?: string; type?: string };
  footer?: {
    type?: "auto" | "small" | "regular" | "large";
    disable_expanding_small?: boolean;
  };
  policies?: IPolicies[];
};

export type Events = {
  offcanvasswitch: { isOpen: boolean };
  pageChange: { page: string };
  navbarDropDownClick: { key: string };
  footerClick: { elClick: string };
  layoutStatus: { width: number; size: "large" | "small" };
  navbarSlotClick: { side: "left" | "right" | "center" };
};
```
npm package: @htmlbricks/hb-layout-mobile
Description: Mobile layout with optional offcanvas sidebar navigation, top navbar, main page slot, optional cookie-law banner, and footer. The host is fixed to the viewport height (100dvh). By default the main area scrolls and includes the cookie banner and footer aft
Latest version: 0.71.18

# hb-layout-mobile

## Description

Mobile layout with optional offcanvas sidebar navigation, top navbar, main page slot, optional cookie-law banner, and footer. Without `single_screen`, the main column scrolls and includes the cookie banner and footer after the slot. With `single_screen`, cookie and footer stay at the bottom of the shell (always visible) and only the page slot area scrolls. Forwards navbar, footer, and navigation events.

## Passing `navlinks` and sidebar icons

When `navlinks` is non-empty, navigation is shown inside `hb-offcanvas`, which hosts `hb-sidebar-desktop`. Set `navlinks` on `hb-layout-mobile` as a JSON string (in HTML) or array (in JS), same shape as for `hb-sidebar-desktop`.

For each link, optional `icon` must be the Bootstrap Icons **glyph name only** (suffix after `bi-`, e.g. `house-door`). See [`hb-sidebar-desktop` README](../sidebar-desktop/README.md#navigation-icons-bootstrap-icons).

## Types

```typescript
import type {
  IContacts,
  ISocials,
  ICompany,
  IColumn,
  IPolicies,
} from "../../footer/types/webcomponent.type";
import type { IUserMenu } from "../../navbar/types/webcomponent.type";
import type { INavLink } from "../../sidenav-link/types/webcomponent.type";

export type Component = {
  id?: string;
  style?: string;
  socials?: ISocials;
  contacts?: IContacts;
  company?: ICompany;
  navlinks?: INavLink[];
  pagename?: string;
  page_title?: string;
  usermenu?: IUserMenu;
  cookielaw?: string;
  columns?: IColumn[];
  single_screen?: boolean;
  cookielawuri4more?: string;
  cookielawallowdecline?: boolean;
  cookielawlanguage?: string;
  sidebar?: { title?: string; logo?: string; type?: string };
  footer?: {
    type?: "auto" | "small" | "regular" | "large";
    disable_expanding_small?: boolean;
  };
  policies?: IPolicies[];
  i18nlang?: string;
};

export type Events = {
  offcanvasswitch: { isOpen: boolean };
  pageChange: { page: string };
  navbarDropDownClick: { key: string };
  footerClick: { elClick: string };
  layoutStatus: { width: number; size: "large" | "small" };
  navbarSlotClick: { side: "left" | "right" | "center" };
};
```
npm package: @htmlbricks/hb-markdown-viewer
Description: Renders Markdown from a data object (typically with a content string) using marked with GFM and line breaks, and normalizes compact single-line Markdown for clearer lists and headings.
Latest version: 0.71.18

# hb-markdown-viewer

## Description

Renders Markdown from a data object (typically with a content string) using marked with GFM and line breaks, and normalizes compact single-line Markdown for clearer lists and headings.

## Styling (Bulma)

Uses **Bulma** `container is-fluid`, `columns`, and `column` for layout; prose styles live in `styles/webcomponent.scss` (`.markdown-body`). Theme tokens: **`--bulma-*`** on `:host` (see `extra/docs.ts`).

## Types

```typescript
export type Component = {
  id?: string;
  style?: string;
  data: {
    content: string;
  };
};

export type Events = {
  // event: { test: boolean };
};
```
npm package: @htmlbricks/hb-matrix-video
Description: Responsive video wall: lays out `items` in Bulma `columns` / `column` rows (gapless) sized from the viewport (16:9-friendly). Each cell can be an iframe, plain MP4 `<video>`, `hb-player-live` (WHEP), or `hb-player-live-camera-ptz`. Tracks hover selection 
Latest version: 0.71.18

# hb-matrix-video

## Description

Responsive video wall: lays out `items` in a **Bulma** `columns` / `column` grid (gapless rows) sized from the viewport (16:9-friendly). Each cell can be an iframe, plain MP4 `<video>`, `hb-player-live` (WHEP), or `hb-player-live-camera-ptz`. Tracks hover selection and emits `hoverItem` and `clickItem` with the focused tile id.

## Types

```typescript
export type Component = {
	id?: string;
	style?: string;
	items: { type: "video" | "iframe" | "mediamtx-webrtc" | "mediamtx-webrtc-ptz"; id: string; uri: string; title?: string }[];
};

export type Events = {
	hoverItem: { id?: string; selected: boolean };
	clickItem: { id: string };
};
```
npm package: @htmlbricks/hb-messages-box
Description: Chat shell combining `hb-messages-list` (thread from `messages`, `authors`, `options`) and `hb-messages-send` (composer). Optional `message` JSON can seed the draft text. Forwards the child `sendMessage` event (text, files, tags) to the host as `sendMessa
Latest version: 0.71.18

# hb-messages-box

## Description

Chat shell combining `hb-messages-list` (thread from `messages`, `authors`, `options`) and `hb-messages-send` (composer). Optional `message` JSON can seed the draft text. Forwards the child `sendMessage` event (text, files, tags) to the host as `sendMessage` for your transport layer.

## Types

```typescript
// type that is used to define a chat message
export type TMessage = {
	id: string;
	text: string;
	timestamp: Date;
	type: "text" | "image" | "video" | "audio" | "file";
	status?: "pending" | "sent" | "received" | "read";
	system?: boolean;
	reply?: boolean;
	quotedMessageId?: string;
	authorId?: string;
	uri?: string;
};

// type that is used to define a chat partecipant
export type TAuthor = {
	id: string;
	name: string;
	avatar?: string;
	status: "online" | "offline" | "away" | "busy";
	me?: boolean;
};

export type TMessageSend = {
	text?: string;
	file?: File;
};

export type Component = {
	id?: string;
	style?: string;
	messages: TMessage[];
	authors: TAuthor[];
	options?: {};
	message?: TMessageSend;
};

export type Events = {
	sendMessage: { text?: string; id: string; file?: File };
};
```
npm package: @htmlbricks/hb-messages-list
Description: Renders a conversation from `messages` joined to `authors`: aligned bubbles for self vs others, optional avatars and names, timestamps, and code blocks with language badges when `type` is `code`. `options` toggle bubbles, avatars, names, and time; `action
Latest version: 0.71.18

# hb-messages-list

## Description

Renders a conversation from `messages` joined to `authors`: aligned bubbles for self vs others, optional avatars and names, timestamps, and code blocks with language badges when `type` is `code`. `options` toggle bubbles, avatars, names, and time; `actions` adds per-message icon buttons that dispatch `action` with `messageId` and action name. Consecutive messages from the same author collapse avatar spacing within a short time window.

## Types

```typescript
// type that is used to define a chat message
export type TMessage = {
	id: string;
	text: string;
	timestamp: Date;
	type: "text" | "image" | "video" | "audio" | "file" | "code";
	status?: "pending" | "sent" | "received" | "read";
	system?: boolean;
	reply?: boolean;
	quotedMessageId?: string;
	authorId?: string;
	uri?: string;
	language?: string; // For code messages
};

// type that is used to define a chat partecipant
export type TAuthor = {
	id: string;
	name: string;
	avatar?: string;
	status: "online" | "offline" | "away" | "busy";
	me?: boolean;
	isAI?: boolean; // Special flag for AI author
};

export type Component = {
	id?: string;
	style?: string;
	messages: TMessage[];
	authors: TAuthor[];
	options?: {
		showTimestamp?: boolean;
		showAvatar?: boolean;
		showName?: boolean;
		bubbles?: boolean;
	};
	actions?: {
		icon: string;
		name: string;
	}[]
};

export type Events = {
	action: { messageId: string; action: string };
};
```

### Styling (Bulma)

The shadow root bundles **Bulma 1.x** (buttons, tags, flex/spacing/typography/color helpers, image rounding). Theme defaults apply on `:host` via Bulma’s light theme and `setup-theme`. Override from the page with public **`--bulma-*`** (see `extra/docs.ts`). **Bootstrap Icons** load from `<svelte:head>` for action `bi-*` icons.
npm package: @htmlbricks/hb-messages-send
Description: Message composer with auto-growing textarea (optional `expandable` and maximize control), Enter-to-send, file attachments with previews (`files.mode` single or multiple), and optional `tags` as toggleable chips. Dispatches `sendMessage` with `text`, selec
Latest version: 0.71.18

# hb-messages-send

## Description

Message composer with auto-growing textarea (optional `expandable` and maximize control), Enter-to-send, file attachments with previews (`files.mode` single or multiple), and optional `tags` as toggleable chips. Dispatches `sendMessage` with `text`, selected `tags`, and staged `files` when the user sends.

## Types

```typescript
export type Component = {
	id?: string;
	style?: string;
	text?: string;
	expandable?: boolean;
	tags?: {
		label?: string;
		icon?: string;
		id: string
		color?: string;
	}[]
	files?: {
		mode: "single" | "multiple";
	}
};

export type Events = {
	sendMessage: { text?: string; id: string; tags: string[]; files: File[] };
};
```

### Styling (Bulma)

Bundles **Bulma 1.x** (`container` grid via `columns` / `column`, buttons, tags, helpers). Theme defaults on `:host` via Bulma light + `setup-theme`. Override with **`--bulma-*`** from the page (see `extra/docs.ts`). **Bootstrap Icons** load from `<svelte:head>` for attach, tags, send, and file-type icons.
npm package: @htmlbricks/hb-messages-topics-card
Description: Lists chat or channel previews from `chats`: avatar, title, last message snippet, derived time label, and unread `counter` badge. Clicking a row marks it selected (`_selected`) and dispatches `select` with that chat payload for opening a thread or switchi
Latest version: 0.71.18

# hb-messages-topics-card

## Description

Lists chat or channel previews from `chats`: avatar, title, last message snippet, derived time label, and unread `counter` as a Bulma tag. Clicking a row marks it selected (`_selected`) and dispatches `select` with that chat payload for opening a thread or switching context.

## Styling (Bulma)

The component bundles **Bulma 1.x** in the shadow root: **`elements/tag`** (unread counter), with theme defaults on `:host` (`--bulma-hb-def-*`). Set public **`--bulma-*`** on `body` or `:root` so they inherit onto the host. Row hover and selected backgrounds default from **`--bulma-scheme-main-bis`** and **`--bulma-scheme-main-ter`**; override with **`--hb-topics-card-hover-background-color`** and **`--hb-topics-card-selected-background-color`** if needed. See [Bulma CSS variables](https://bulma.io/documentation/features/css-variables/).

**Shadow markup (simplified):**

- **`div.grid`** — one row per chat (click selects).
- **`img`**, **`div.header`** (title + time), **`div.details`** (snippet + **`span.tag.is-light.is-rounded`** counter).

**Host-level tokens (existing):** `--hb-topics-card-size`, `--hb-topics-card-padding`, derived `--hb-topics-card-double-*`, plus the selected/hover background variables above.

## Types

```typescript
export type IChat = {
	time: Date;
	title: string;
	text: string;
	img_uri: string;
	is_group?: boolean;
	chat_name?: string;
	chat_img?: string;
	chat_id: string;
	last_message_author?: string;
	last_message_author_img?: string;
	last_message_time?: Date;
	last_message_text?: string;
	counter?: number;
	localeTimeString?: string;
	_selected?: boolean;
};

export type Component = {
	id?: string;
	style?: string;

	chats: IChat[];
};

export type Events = {
	select: IChat;
};
```
npm package: @htmlbricks/hb-modal-video
Description: Video modal built on hb-dialog: when uri is set the dialog opens with either a YouTube iframe (provider youtube) or an HTML5 video element, optional title slot, and videoModalEvent when visibility changes.
Latest version: 0.71.18

# hb-modal-video

## Description

Video modal built on hb-dialog: when uri is set the dialog opens with either a YouTube iframe (provider youtube) or an HTML5 video element, optional title slot, and videoModalEvent when visibility changes.

## Types

```typescript
export type Component = {
	id?: string;
	style?: string;
	item?: string;
	uri: string;
	title?: string;
	provider?: string;
};

export type Events = {
	videoModalEvent: { id: string; show: boolean };
};
```
npm package: @htmlbricks/hb-navbar
Description: Top navigation bar with optional hamburger to toggle an offcanvas menu, brand name and logo, slottable left, center, and right areas, and an optional user avatar dropdown (hb-dropdown-simple) with item click events.
Latest version: 0.71.18

# hb-navbar

## Description

Top navigation bar with optional hamburger to toggle an offcanvas menu, brand name and logo, slottable left, center, and right areas, and an optional user avatar dropdown (hb-dropdown-simple) with item click events.

## Types

```typescript
interface IUserMenuListItem {
	key: string;
	label: string;
	badge?: number;
	group?: string;
}
export interface IUserMenu {
	imgUri: string;
	list?: IUserMenuListItem[];
}
export type Component = {
	id?: string;
	style?: string;
	companybrandname: string;
	companylogouri: string;
	// pagetitle: string;
	switchopen?: "yes" | "no";
	usermenu?: IUserMenu;
	noburger?: string;
};

export type Events = {
	navbarDropDownClick: { key: string };
	navmenuswitch: { isOpen: boolean };
	navbarSlotClick: { side: "left" | "right" | "center" };
};
```
npm package: @htmlbricks/hb-offcanvas
Description: Slide-in panel that hosts hb-sidebar-desktop navigation, with Bulma `modal-background` as optional backdrop when `type` is autohide. Can start open or closed; dispatches page changes and open/close state.
Latest version: 0.71.18

## `hb-offcanvas` — offcanvas

**Category:** layout  
**Tags:** layout, navigation

### What it does

Slide-in sidebar panel that hosts `hb-sidebar-desktop`. Uses a fixed panel plus Bulma’s `modal-background` as the dimmed backdrop when `type` is `autohide`. Can start open or closed; dispatches page changes and open/close state.

### Custom element

`hb-offcanvas`

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

- `id`, `style` (optional): strings.
- `opened` (optional): boolean string — panel starts open.
- `companylogouri`, `companytitle` (optional): strings.
- `groups` (optional): JSON string — `{ key; label }[]` for nav grouping.
- `enablefooter` (optional): boolean string.
- `type` (optional): `"open"` | `"autohide"` | `"small"` — backdrop and sizing.
- `navpage` (optional): string — active page key.
- `navlinks` (optional): JSON string — `INavLink[]` (label, key, optional `icon` for Bootstrap Icons, badge, subLinks, etc.). Icon values follow the same rules as `hb-sidebar-desktop`; see [Navigation icons (Bootstrap Icons)](../sidebar-desktop/README.md#navigation-icons-bootstrap-icons).

### Events

- `offcanvasswitch`: `{ isOpen: boolean }`.
- `pageChange`: `{ page: string }`.

### Usage notes

- **Slots:** `test`, `header`, `footer`.
- **CSS parts:** `header` (on nested `hb-sidebar-desktop`).
- Bulma theme variables apply inside each web component’s shadow root; Bootstrap Icons CSS is loaded for nested nav icons.
- The panel embeds `hb-sidebar-desktop`; pass `navlinks` on `hb-offcanvas` exactly as you would on `hb-sidebar-desktop` (including each item’s optional `icon` string: Bootstrap glyph name only, e.g. `house-door`).
- Pair with `hb-sidebar-desktop` / `hb-sidenav-link`; see Storybook examples in `extra/docs.ts`.

### Minimal HTML example

```html
<hb-offcanvas
  opened="true"
  type="autohide"
  companytitle="Acme"
  navpage="home"
  navlinks='[{"label":"Home","key":"home","icon":"house-door"}]'
></hb-offcanvas>
```
npm package: @htmlbricks/hb-order-list
Description: Order summary view driven by a payment JSON object: order number header, optional tracking area, list of line items with image and name, and a footer showing the order total including tax and optional shipment fee. Exposes the item image via the item_imag
Latest version: 0.71.18

## `hb-order-list` — order list

**Category:** commerce  
**Tags:** commerce, order

### What it does

Order summary view driven by a payment JSON object: order number header, optional tracking area, list of line items with image and name, and a footer showing the order total including tax and optional shipment fee. Exposes the item image via the `item_image` CSS part.

### Custom element

`hb-order-list`

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

- `id`, `style` (optional): strings.
- `payment` (required): JSON string — `OrderPayment` with `orderNumber`, `countryCode`, `items` (shop line items plus `image` per row), plus cart/tax fields from shared checkout types.

### Events

None declared.

### Styling (Bulma)

Layout uses Bulma `container` and `columns` / `column` with fractional widths (`is-10`, `is-2`, etc.). Theme tokens are registered on `:host` via Bulma’s light theme and `setup-theme`. Customize colors and spacing from the page by setting `--bulma-*` variables (for example `--bulma-text`, `--bulma-scheme-main`, `--bulma-column-gap`); see `extra/docs.ts` and `styles/bulma.scss`.

### Usage notes

- **CSS parts:** `item_image`.
- Serialize `payment` as a single JSON attribute; see `builder/src/wc/order-list/types/webcomponent.type.d.ts` and examples in `extra/docs.ts`.

### Minimal HTML example

```html
<hb-order-list
  payment='{"orderNumber":"1001","countryCode":"EU","items":[{"id":"1","name":"Item","unitaryPrice":10,"taxPercentage":22,"image":"https://example.com/a.jpg"}]}'
></hb-order-list>
```
npm package: @htmlbricks/hb-pad-joystick
Description: Touch-friendly directional control: either a four-way D-pad that emits cardinal directions or an analog joystick (html5-joystick-new) that streams position and cardinal direction with customizable colors.
Latest version: 0.71.18

## `hb-pad-joystick` — pad joystick

**Category:** utilities  
**Tags:** utilities, controls

### What it does

Touch-friendly directional control: either a four-way D-pad that emits cardinal directions or an analog joystick that streams position and cardinal direction with customizable colors.

### Custom element

`hb-pad-joystick`

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

- `id`, `style` (optional): strings.
- `pad_or_joystick` (optional): `"dpad"` | `"joystick"` (default pad-style behavior when omitted per examples).
- `joystick_parameters` (optional): JSON string — `internalFillColor`, `internalLineWidth`, `internalStrokeColor`, `externalLineWidth`, `externalStrokeColor`.

### Events

- `sendDirection`: `{ direction: "up" | "right" | "down" | "left"; id: string }`.
- `sendJoystickPosition`: `{ x; y; cardinalDirection; id: string }` (cardinal set per `CardinalDirection` in types).

### Usage notes

- **CSS variables:** `--hb-pad-joystick-size` (default `200px`).
- Use `pad_or_joystick="joystick"` for analog mode; see `extra/docs.ts`.

### Minimal HTML example

```html
<hb-pad-joystick pad_or_joystick="dpad"></hb-pad-joystick>
```
npm package: @htmlbricks/hb-page-checkout
Description: Checkout page layout that embeds the payment flow and shopping cart: left column uses hb-checkout (user, shipments, gateways, payment) and right column uses hb-checkout-shopping-cart. Recomputes line totals, tax, shipment fee, and payment total from JSON 
Latest version: 0.71.18

## `hb-page-checkout` — page checkout

**Category:** commerce  
**Tags:** commerce, checkout, page

### What it does

Checkout page layout that embeds the payment flow and shopping cart: left column uses `hb-checkout` (user, shipments, gateways, payment) and right column uses `hb-checkout-shopping-cart`. Recomputes line totals, tax, shipment fee, and payment total from JSON props; updates shipment selection internally and forwards `paymentCompleted` and `saveUser` to the host.

### Custom element

`hb-page-checkout`

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

- `id`, `style` (optional): strings.
- `shipments` (required): JSON string — `IShipment[]` (see `hb-checkout` types).
- `user` (required): JSON string — `IUser` (address, nationality, zip, `fixed`, etc.).
- `payment` (required): JSON string — shopping payment + `IPayment` fields (currency, items, totals, merchant, country).
- `gateways` (required): JSON string — `IGateway[]` (e.g. PayPal id, Google Pay ids).
- `completed` (optional): `"yes"` | `"no"` — completion state for UI.

### Events

- `saveUser`: detail is `IUser` (updated user payload).
- `paymentCompleted`: `{ total: number; method: string; completed: true }`.

### Usage notes

- **CSS variables:** `--hb-checkout-border`, Bulma `--bulma-*` (see `extra/docs.ts`).
- Compose gateways and payment objects like Storybook `extra/docs.ts`; shared types live under `hb-checkout` / `hb-checkout-shopping-cart`.

### Styling (Bulma)

Layout uses **Bulma** `container`, `columns`, and fractional `column` widths (`is-7` / `is-5`). Theme tokens apply on `:host`; child web components inherit public **`--bulma-*`** variables.

### Minimal HTML example

```html
<hb-page-checkout
  shipments="[]"
  user='{"fullName":"Jane Doe","addressWithNumber":"Main 1","city":"Rome","nationality":"IT","zip":"00100","fixed":true}'
  payment='{"countryCode":"IT","merchantName":"Shop","currencyCode":"EUR","total":100,"items":[{"id":"a","name":"A","unitaryPrice":10,"taxPercentage":22}]}'
  gateways='[{"id":"paypal","label":"PayPal","paypalid":"YOUR_CLIENT_ID"}]'
></hb-page-checkout>
```
npm package: @htmlbricks/hb-page-invoice
Description: Printable invoice page: shows seller and buyer from headers, invoice date and serial, line items in hb-table with price, quantity, VAT and row totals, plus subtotal, tax and grand total in the invoice currency. When printer is not yes, offers print and op
Latest version: 0.71.18

## `hb-page-invoice` — page invoice

**Category:** commerce  
**Tags:** commerce, invoice, page

### What it does

Printable invoice page: shows seller and buyer from headers, invoice date and serial, line items in `hb-table` with price, quantity, VAT and row totals, plus subtotal, tax and grand total in the invoice currency. When `printer` is not `yes`, offers print and open-in-window actions.

### Custom element

`hb-page-invoice`

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

- `id`, `style` (optional): strings.
- `printer` (optional): `"yes"` | `"no"` — print-only / interactive mode.
- `headers` (required): JSON string — `IHeaders` (`serial`, `from` with `logo` and `shortName`, `to`, optional `country`, `date`, `category`, etc.).
- `items` (required): JSON string — `IItem[]` (`desc`, `unitaryPrice`, `taxPercentage`, optional `quantity`, `unit`, `discount`).

### Events

None declared.

### Usage notes

- **CSS variables:** Bulma `--bulma-*` (see `extra/docs.ts`).
- Align `headers` / `items` with `builder/src/wc/page-invoice/types/webcomponent.type.d.ts`.

### Styling (Bulma)

Layout uses **Bulma** `container`, `columns` / `column`, and `button is-light` for toolbar actions. **Bootstrap Icons** load from `<svelte:head>` for print / fullscreen icons (`bi-*`).

### Minimal HTML example

```html
<hb-page-invoice
  printer="no"
  headers='{"serial":"INV-1","from":{"piva":"IT1","name":"Seller","address":"Via 1","email":"a@b.co","phone":"0","logo":"https://example.com/logo.svg","shortName":"Seller"},"to":{"piva":"IT2","name":"Buyer","address":"Via 2","email":"b@b.co","phone":"1"}}'
  items='[{"desc":"Service","unitaryPrice":100,"taxPercentage":22,"quantity":1}]'
></hb-page-invoice>
```
npm package: @htmlbricks/hb-paragraps-around-image
Description: Editorial block with a central image and up to six text blocks in two side columns using hb-paragraps-around-image-cell (indices 0,2,4 left; 1,3,5 right). Parses paragraphs from JSON and bubbles paragraphPressed when a cell fires it.
Latest version: 0.71.18

## `hb-paragraps-around-image` — paragraphs around image

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

### What it does

Editorial block with a central image and up to six text blocks in two side columns using `hb-paragraps-around-image-cell` (indices 0, 2, 4 left; 1, 3, 5 right). Parses `paragraphs` from JSON and bubbles `paragraphPressed` when a cell fires it.

### Custom element

`hb-paragraps-around-image`

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

- `id`, `style` (optional): strings.
- `img` (required): string — image URL.
- `paragraphs` (required): JSON string — array of `{ text; title?; icon?; link?; key? }`.

### Events

- `paragraphPressed`: `{ key: string }`.

### Usage notes

- **Slots:** `skelcontent`.
- **CSS parts:** `testpart`.
- Up to six paragraph objects; layout alternates columns per index.

### Minimal HTML example

```html
<hb-paragraps-around-image
  img="https://placehold.co/300x200"
  paragraphs='[{"text":"Hello body","title":"Title","icon":"globe","link":"https://example.com"}]'
></hb-paragraps-around-image>
```
npm package: @htmlbricks/hb-paragraps-around-image-cell
Description: One paragraph tile with Bootstrap icon, optional title as external link or key-triggered control (dispatches paragraphPressed with key), and body text clamped to max_lines for consistent height inside paragraps-around-image layouts.
Latest version: 0.71.18

## `hb-paragraps-around-image-cell` — paragraph cell around image

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

### What it does

One paragraph tile with Bootstrap icon, optional title as external link or key-triggered control (dispatches `paragraphPressed` with `key`), and body text clamped to `max_lines` for consistent height inside `hb-paragraps-around-image` layouts.

### Custom element

`hb-paragraps-around-image-cell`

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

- `id`, `style` (optional): strings.
- `paragraph` (required): JSON string — `{ text; title?; icon?; link?; key? }`.
- `max_lines` (optional): number as string — line clamp for body text.

### Events

- `paragraphPressed`: `{ key: string }`.

### Usage notes

- **Slots:** `skelcontent`.
- **CSS parts:** `testpart`.
- Typically embedded by `hb-paragraps-around-image`; usable alone for Storybook-style tiles (no separate image prop on this cell).

### Minimal HTML example

```html
<hb-paragraps-around-image-cell
  paragraph='{"text":"Body copy","title":"Read more","icon":"globe","key":"section-1"}'
  max_lines="4"
></hb-paragraps-around-image-cell>
```
npm package: @htmlbricks/hb-payment-paypal
Description: Loads the PayPal JS SDK with your client id and currency, renders PayPal Buttons for a fixed order total, captures payment on approval, and dispatches paymentCompleted when the order is captured successfully.
Latest version: 0.71.18

## `hb-payment-paypal` — payment PayPal

**Category:** commerce  
**Tags:** commerce, payment

### What it does

Loads the PayPal JS SDK with your client id and currency, renders PayPal Buttons for a fixed order total, captures payment on approval, and dispatches `paymentCompleted` when the order is captured successfully.

### Custom element

`hb-payment-paypal`

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

- `id`, `style` (optional): strings.
- `paypalid` (required): string — PayPal client / app id.
- `currency` (required): `"EUR"` | `"USD"` (string).
- `total` (required): number as string — order amount.

### Events

- `paymentCompleted`: `{ method: "paypal"; total: number }`.

### Usage notes

- **CSS variables:** `--hb-checkout-border`, Bulma `--bulma-*` (see `extra/docs.ts`).
- **CSS parts:** `btn` (PayPal button surface).
- Ensure CSP and PayPal script loading match your host app; totals are fixed for the rendered session.

### Styling (Bulma)

**Bulma** theme tokens are applied on `:host` only; the PayPal SDK injects its own button UI into `#paypalbtn`. Use **`--bulma-*`** for consistency with sibling checkout components.

### Minimal HTML example

```html
<hb-payment-paypal paypalid="YOUR_CLIENT_ID" currency="EUR" total="40"></hb-payment-paypal>
```
npm package: @htmlbricks/hb-player-input-streaming
Description: Requests camera and microphone with `getUserMedia`, binds the stream to a `<video>` element, and exposes basic controls (play/pause, fullscreen, enable/disable video and audio tracks). Emits `AudioVideoAccess` with grant result and `VideoInitialized` with
Latest version: 0.71.18

## `hb-player-input-streaming` — player input streaming

**Category:** media  
**Tags:** media, video, camera

### What it does

Requests camera and microphone with `getUserMedia`, binds the stream to a `<video>` element, and exposes basic controls (play/pause, fullscreen, enable/disable video and audio tracks). Emits `AudioVideoAccess` with grant result and `VideoInitialized` with the video element reference once the stream is attached.

### Custom element

`hb-player-input-streaming`

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

- `id` (optional): string — echoed on dispatched events.

### Events

- `AudioVideoAccess`: `{ granted: boolean; id: string }`.
- `VideoInitialized`: `{ videoElement; id: string }`.
- `event`: `{ test: boolean }` (test hook in source).

### Usage notes

- Requires secure context and user permission for camera/microphone.
- Types in `webcomponent.type.d.ts` only list `event`; runtime also dispatches `AudioVideoAccess` and `VideoInitialized` (see `component.wc.svelte`).

### Minimal HTML example

```html
<hb-player-input-streaming id="cam1"></hb-player-input-streaming>
```
npm package: @htmlbricks/hb-player-live
Description: Live streaming `<video>` player for HLS (hls.js or native), WebSocket WebRTC (`simple-webrtc-element`), or WHEP (MediaMTX). Polls the manifest for HLS liveness, exposes the element via `getVideoElement`, and emits `liveStatus` and `htmlVideoInit`. When th
Latest version: 0.71.18

## `hb-player-live` — player live

**Category:** media  
**Tags:** media, video, streaming

### What it does

Live streaming `<video>` player for HLS (hls.js or native), WebSocket WebRTC (`simple-webrtc-element`), or WHEP (MediaMTX). Polls the manifest for HLS liveness, exposes the element via `getVideoElement`, and emits `liveStatus` and `htmlVideoInit`. When the stream is offline or missing, shows optional title/subtitle/text from `replacewithtext`, `forcecover`, or fallback labels.

### Custom element

`hb-player-live`

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

- `id`, `style` (optional): strings.
- `mediauri` (required): string — stream URL (HLS, WebRTC, WHEP as configured).
- `media_type` (optional): `"hls"` | `"webrtc"` | `"auto"` | `"whep"` (empty string allowed in examples).
- `forcecover` (optional): string — e.g. `"yes"` to force cover layout with placeholder text.
- `replacewithtext` (optional): JSON string — `{ title; subtitle?; text? }` when offline.
- `no_controls` (optional): boolean string — hide native/custom controls.

### Events

- `liveStatus`: `{ live: boolean; id: string }`.
- `htmlVideoInit`: `{ video; id: string }`.

### Usage notes

- **CSS parts:** `container`, `replacewithtext`, `video`.
- Pick `media_type` to match your pipeline (`whep` for WHEP examples in docs).

### Minimal HTML example

```html
<hb-player-live
  mediauri="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
  media_type="hls"
></hb-player-live>
```
npm package: @htmlbricks/hb-player-live-camera-ptz
Description: Live camera view built on `hb-player-live` with a configurable PTZ panel: D-pad or analog joystick, zoom in/out, go home, click-to-center region on the video, optional grid overlay, fullscreen, mute, and play/pause. Manages camera presets in dialogs with 
Latest version: 0.71.18

## `hb-player-live-camera-ptz` — player live camera PTZ

**Category:** media  
**Tags:** media, video, streaming, camera

### What it does

Live camera view built on `hb-player-live` with a configurable PTZ panel: D-pad or analog joystick, zoom in/out, go home, click-to-center region on the video, optional grid overlay, fullscreen, mute, and play/pause. Manages camera presets in dialogs with `hb-table` (add, go to, delete). Feature flags live in `configuration`; PTZ and UI state are driven by `is_ptz_connected`, `is_ptz_panel_opened`, and `is_home`. Toolbar controls use **Bulma** `button` / `buttons has-addons`. Dispatches movement, preset, and video-init events for the host app to wire to your backend.

### Custom element

`hb-player-live-camera-ptz`

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

- `id`, `style` (optional): strings.
- `live_uri` (required): string — stream URI for the embedded player.
- `media_type` (optional): `"hls"` | `"webrtc"` | `"auto"` | `"whep"` | `""`.
- `is_ptz_connected`, `is_ptz_panel_opened`, `is_home` (optional): boolean strings.
- `presets` (optional): JSON string — `TPreset[]` (`token`, `name`, `x`, `y`, `z`).
- `current_preset` (optional): string — active preset token.
- `position` (optional): `"top"` | `"right-bottom"` | `"left-bottom"` | `"bottom"` | `"right-top"` | `"left-top"`.
- `configuration` (optional): JSON string — toggles for joystick, presets, zoom, pan, tilt, click-to-center, settings, etc.

### Events

- `initVideo`: `{ id; time; htmlVideoElement }`.
- `panelMove`: `{ id; opened: boolean }`.
- `goToHome`, `goToSelectedArea`, `setPreset`, `goToPreset`, `deletePreset`, `zoomAction`, `sendJoystickPosition`, `sendDirection` — see `builder/src/wc/player-live-camera-ptz/types/webcomponent.type.d.ts` for full payloads (`movementSettings`, geometry, presets, etc.).

### Usage notes

- **CSS variables:** Bulma theme tokens on `:host` (e.g. `--bulma-primary`, `--bulma-danger`); see `extra/docs.ts`.
- Host must implement PTZ API calls in response to movement and preset events.

### Minimal HTML example

```html
<hb-player-live-camera-ptz
  live_uri="https://example.com/stream.m3u8"
  media_type="auto"
  is_ptz_connected="true"
  is_ptz_panel_opened="true"
></hb-player-live-camera-ptz>
```
npm package: @htmlbricks/hb-product-comparison
Description: Product comparison matrix: columns per product (model, description, promotion, price, purchase button) and rows per feature header with icons or text from each product’s characteristics. Supports preferred product and sale styling; dispatches purchaseClic
Latest version: 0.71.18

## `hb-product-comparison` — product comparison

**Category:** commerce  
**Tags:** commerce, product

### What it does

Product comparison matrix: columns per product (model, description, promotion, price, purchase button) and rows per feature header with icons or text from each product’s characteristics. Supports preferred product and sale styling; dispatches `purchaseClick` with product id. Desktop table vs stacked mobile layout.

### Custom element

`hb-product-comparison`

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

- `id`, `style` (optional): strings.
- `headers` (required): JSON string — `{ id; label }[]` feature rows.
- `products` (required): JSON string — `Product[]` (`id`, `model`, `price`, `characteristics` map, optional `description`, `note`, `promotion`, `columnColor`).
- `options` (required): JSON string — `Options` (`currency`, optional `preferredProductId`).

### Events

- `purchaseClick`: `{ id: string }` — product id for checkout handoff.

### Usage notes

- **CSS parts:** `container`, `col`, `row`.
- Characteristic values drive per-cell visuals (`valid`, `disabled`, `blocked`, etc. per examples in `extra/docs.ts`).

### Styling (Bulma)

Desktop matrix uses **Bulma** `container`, `columns` / `column`, `button is-primary`, and visibility helpers (`is-hidden-touch` / `is-hidden-desktop`) to swap layouts. Set **`--bulma-*`** on `:host` (see `extra/docs.ts`). **Bootstrap Icons** load from `<svelte:head>` for feature cell icons.

### Minimal HTML example

```html
<hb-product-comparison
  headers='[{"id":"f1","label":"Feature 1"}]'
  products='[{"id":"p1","model":"Basic","price":10,"characteristics":{"f1":"valid"}}]'
  options='{"currency":"€"}'
></hb-product-comparison>
```
npm package: @htmlbricks/hb-range-slider
Description: Dual-handle range slider mapping a min–max domain to thumb positions, with optional value bubbles and a third handle for a single marker position; emits changeRangeValues with real and percentage values on change.
Latest version: 0.71.18

## `hb-range-slider` — range slider

**Category:** inputs  
**Tags:** inputs, slider

### What it does

Dual-handle range slider mapping a min–max domain to thumb positions, with optional value bubbles and a third handle for a single marker position; emits `changeRangeValues` with real and percentage values on change.

### Custom element

`hb-range-slider`

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

- `id`, `style` (optional): strings.
- `min`, `max` (optional): numbers as strings — domain bounds.
- `minval`, `maxval` (optional): numbers as strings — selected range endpoints.
- `position_value` (optional): number as string — marker handle value.
- `withbubbles` (optional): boolean string — show value bubbles.

### Events

- `changeRangeValues`: `{ minValue; maxValue; minPercent; maxPercent; positionPercent; positionValReal }`.

### Usage notes

- **CSS variables:** `--hb-slider-background-color`.
- **CSS parts:** `inverse`, `the-range`, `the-thumb`, `sign`.

### Minimal HTML example

```html
<hb-range-slider min="0" max="100" minval="20" maxval="80" withbubbles="true"></hb-range-slider>
```
npm package: @htmlbricks/hb-shop-item-cell
Description: Vertical shop product card: top image with optional badge, then the same body as shop-item-row (title, subtitle, text, stars, reviews, prices, footer) with Bootstrap card styling and matching slots.
Latest version: 0.71.18

## `hb-shop-item-cell` — shop item cell

**Category:** commerce  
**Tags:** commerce, product

### What it does

Vertical shop product card: top image with optional badge, then the same body as `hb-shop-item-row` (title, subtitle, text, stars, reviews, prices, footer) with **Bulma** `card`, `tag`, `title` / `subtitle`, and matching slots.

### Custom element

`hb-shop-item-cell`

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

- `id`, `style` (optional): strings.
- `img`, `url`, `badge`, `title`, `subtitle`, `text`, `reviews`, `reviewsurl`, `price`, `regularprice`, `footer` (required in types): strings (use `""` when empty).
- `rating`, `ratingscale` (required): numbers as strings.

### Events

None declared.

### Styling (Bulma)

Bundles **Bulma 1.x** (`card`, `image`, `content`, `title`, `tag`, helpers). Set **`--bulma-*`** on the light DOM to match your theme. Star icons still use Bootstrap Icons SVG class names in markup (no icon font required for the default stars).

### Usage notes

- **Slots:** `badge`, `title`, `subtitle`, `text`, `reviews`, `price`, `footer`, `regularprice`.
- Mirror `hb-shop-item-row` content model for consistent catalog UI.

### Minimal HTML example

```html
<hb-shop-item-cell
  img="https://placehold.co/120"
  url="/p/1"
  badge=""
  title="Product"
  subtitle="Short line"
  text="Description"
  rating="4"
  ratingscale="5"
  reviews="12 reviews"
  reviewsurl="/p/1#reviews"
  price="€19"
  regularprice=""
  footer=""
></hb-shop-item-cell>
```
npm package: @htmlbricks/hb-shop-item-row
Description: Horizontal shop product card: image with optional badge, linked title and metadata, description, star rating scale with numeric rating and reviews link, current and strikethrough prices, and optional footer—all overridable via named slots.
Latest version: 0.71.18

## `hb-shop-item-row` — shop item row

**Category:** commerce  
**Tags:** commerce, product

### What it does

Horizontal shop product card: image with optional badge, linked title and metadata, description, star rating scale with numeric rating and reviews link, current and strikethrough prices, and optional footer—all overridable via named slots.

### Custom element

`hb-shop-item-row`

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

- `id`, `style` (optional): strings.
- `img`, `url`, `badge`, `title`, `subtitle`, `text`, `reviews`, `reviewsurl`, `price`, `regularprice`, `footer` (required in types): strings.
- `rating`, `ratingscale` (required): numbers as strings.

### Events

None declared.

### Styling (Bulma)

The component bundles cherry-picked Bulma 1 Sass modules scoped to `:host` (see `styles/bulma.scss`). Theme defaults are applied via Bulma’s light theme and `setup-theme`. Override appearance from the light DOM by setting public `--bulma-*` custom properties on `body` or `:root`; they inherit into the shadow root. Documented tokens include `--bulma-primary`, `--bulma-text`, `--bulma-card-background-color`, `--bulma-border`, and `--bulma-shadow` (see `extra/docs.ts`).

### Usage notes

- **Slots:** `badge`, `title`, `subtitle`, `text`, `reviews`, `price`, `footer`, `regularprice`.
- Storybook exposes `action` for demos only; it is not on the `Component` type.

### Minimal HTML example

```html
<hb-shop-item-row
  img="https://placehold.co/96"
  url="/p/1"
  badge="New"
  title="Product"
  subtitle="Vendor"
  text="One line pitch."
  rating="5"
  ratingscale="5"
  reviews="3"
  reviewsurl="/p/1#reviews"
  price="€9"
  regularprice="€12"
  footer=""
></hb-shop-item-row>
```
npm package: @htmlbricks/hb-sidebar-cards-navigator
Description: Stacked sidebar navigator: picks an active panel from JSON panels (main or first without parent), shows hb-navbar with back when parentPanelId exists, then cards of rows rendered as hb-sidenav-button. Emits itemClick with panel, card and row context; rows
Latest version: 0.71.18

## `hb-sidebar-cards-navigator` — sidebar cards navigator

**Category:** layout  
**Tags:** layout, navigation

### What it does

Stacked sidebar navigator: picks an active panel from JSON `panels` (main or first without parent), shows `hb-navbar` with back when `parentPanelId` exists, then cards of rows rendered as `hb-sidenav-button`. Emits `itemClick` with panel, card and row context; rows can switch panels via `switchToPanelId`.

### Custom element

`hb-sidebar-cards-navigator`

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

- `id`, `style` (optional): strings.
- `panels` (optional): JSON string — `Panel[]` (`id`, optional `title`, `parentPanelId`, `cards` with `rows` of `CardRow`: `key`, `text`, optional `bootstrapIcon`, `switchToPanelId`, `type`, `badge`, etc.).

### Events

- `itemClick`: detail matches selected row context (panel, card, row, `id`) as built in `component.wc.svelte` — see types `CardRowSelected` in `webcomponent.type.d.ts`.

### Usage notes

- **Slots:** `skelcontent`.
- **CSS parts:** `testpart`.
- Type file lists a nested `event.itemClick` shape; the element dispatches the event name `itemClick` at the top level.

### Minimal HTML example

```html
<hb-sidebar-cards-navigator
  panels='[{"id":"1","title":"Home","cards":[{"id":"c1","rows":[{"key":"a","text":"Item","bootstrapIcon":"house-door"}]}]}]'
></hb-sidebar-cards-navigator>
```
npm package: @htmlbricks/hb-sidebar-desktop
Description: Fixed-width desktop sidebar: optional company logo and title, header/footer slots, and a nav list built from hb-sidenav-link entries with optional JSON groups (Bulma layout, menu labels, light background). Parses navlinks and groups from strings; emits pa
Latest version: 0.71.18

## `hb-sidebar-desktop` — sidebar desktop

**Category:** layout  
**Tags:** layout, navigation

### What it does

Fixed-width desktop sidebar: optional company logo and title, header/footer slots, and a vertical nav list built from `hb-sidenav-link` entries with optional JSON groups. Uses Bulma (flex, spacing, `title`, `menu-label`, `has-background-light`). Parses `navlinks` and `groups` from strings; emits `pageChange` when a link selects a page.

### Custom element

`hb-sidebar-desktop`

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

- `id`, `style` (optional): strings.
- `companylogouri`, `companytitle` (optional): strings.
- `groups` (optional): JSON string — `{ key; label }[]`.
- `enablefooter` (optional): boolean string.
- `navpage` (optional): string — active page key.
- `navlinks` (optional): JSON string — `INavLink[]` for `hb-sidenav-link` (see **Navigation icons** below).
- `cookielawallowdecline`, `cookielawlanguage`, `cookielawuri4more` (optional): strings for cookie banner integration.
- `single_screen` (optional): `"yes"` | `"no"` | empty — layout mode flag.

### Events

- `pageChange`: `{ page: string }`.

### Navigation icons (Bootstrap Icons)

Each entry in `navlinks` (and each item in `subLinks`, if any) may include an optional string property `icon`. Icons use the [Bootstrap Icons](https://icons.getbootstrap.com/) web font; this component loads `bootstrap-icons.css` for the nested `hb-sidenav-link` elements.

**What value to pass:** pass only the **icon name** (the suffix of the official class), not the full class list.

- On the Bootstrap Icons site, an icon is used as `<i class="bi bi-house-door"></i>`. In `navlinks` JSON, set `"icon": "house-door"`.
- Do **not** prefix with `bi` or `bi-`, and do **not** pass a full class string like `bi bi-house-door`. The child link renders `class="bi bi-{icon}"`; extra prefixes would break the class name.

**HTML example** (attribute must be a JSON string):

```html
navlinks='[{"label":"Home","key":"home","icon":"house-door"},{"label":"Settings","key":"settings","icon":"gear"}]'
```

**JavaScript** (property can be an array of objects):

```js
el.navlinks = [
  { label: "Home", key: "home", icon: "house-door" },
  { label: "Settings", key: "settings", icon: "gear" },
];
```

Grouped links and expandable rows use the same `icon` field on each object.

### Usage notes

- **Slots:** `test`, `header`, `footer`.
- **CSS parts:** `header`.
- Matches the navigation model used inside `hb-offcanvas` (same `navlinks` / `icon` rules).

### Minimal HTML example

```html
<hb-sidebar-desktop
  companytitle="Acme"
  navpage="home"
  navlinks='[{"label":"Home","key":"home","icon":"house-door"}]'
></hb-sidebar-desktop>
```