open-index/open-npm huggingface dataset:
npm package: @htmlbricks/hb-sidenav-button
Description: Compact sidebar row as a nav button: optional Bootstrap Icons (bi-*) icon, Bulma tag badge, or visual types (switch, checkbox, radio) from navlink JSON; dispatches pageChange with the row key on click. Used by sidebar-cards-navigator and similar stacked m
Latest version: 0.71.18

## `hb-sidenav-button` — sidenav button

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

### What it does

Compact sidebar row as a nav button: optional Bootstrap Icons (`bi-*`) via `bootstrapIcon`, Bulma `tag` badge (optional `badge.class` / `badge.classcolor` modifiers), or visual types (`switch`, `checkbox`, `radio`) from `navlink` JSON; dispatches `pageChange` with the row `key` on click. Used by `hb-sidebar-cards-navigator` and similar stacked menus.

### Custom element

`hb-sidenav-button`

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

- `id`, `style` (optional): strings.
- `navlink` (required): JSON string — `INavLink` (`key`, `text`, optional `bootstrapIcon`, `badge`, `value`, `type`, `selected`).

### Events

- `pageChange`: `{ page: string }` — typically the link `key`.

### Usage notes

- **CSS parts:** `li`.
- Styling uses Bulma inside the shadow root (buttons and tags); theme CSS variables follow Bulma’s scheme (e.g. `--bulma-link`).
- Include [Bootstrap Icons](https://icons.getbootstrap.com/) if you use `bootstrapIcon` or the switch/checkbox/radio icons.
- Storybook `nav_type` is a control helper; the shape lives on `navlink.type`.

### Minimal HTML example

```html
<hb-sidenav-button
  navlink='{"text":"Home","key":"home","bootstrapIcon":"house-door"}'
></hb-sidenav-button>
```
npm package: @htmlbricks/hb-sidenav-link
Description: Sidebar nav item: Bootstrap Icons (bi-*), label, optional Bulma-style tag badge (outlined pill: transparent fill, border uses tag foreground color), and either a flat button that dispatches pageChange on click or an expandable group of subLinks with activ
Latest version: 0.71.18

## `hb-sidenav-link` — sidenav link

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

### What it does

Sidebar nav item: Bootstrap Icons (`bi-*`), label, optional Bulma `tag` badge (`badge.class` / `badge.classcolor` modifiers such as `is-light`, `is-primary`) rendered as **outlined** pills (transparent fill, border/text from the tag color), and either a flat button that dispatches `pageChange` on click or an expandable group of `subLinks` with active state when `navpage` or `selected` matches. Intended for use inside `hb-sidebar-desktop` lists.

### Custom element

`hb-sidenav-link`

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

- `id`, `style` (optional): strings.
- `navlink` (required): JSON string — `INavLink` (`label`, `key`, optional `icon`, `group`, `badge`, `subLinks`, `active`, `open`).
- `navpage` (optional): string — current app page key for active styling.
- `selected` (optional): boolean string — force selected appearance.

### Events

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

### Usage notes

- **CSS parts:** `li`.
- **Layout:** labels share a flexible middle column; the right column is fixed width (`--hb-sidenav-trail-width`, default `3.5rem`) so titles stay aligned whether a badge or chevron is present. Long badge text truncates with an ellipsis. Badges use an outline treatment so they stay visible on ghost (unselected) rows.
- Bulma buttons and tags are scoped inside the component; include Bootstrap Icons CSS for `icon` / `subLinks[].icon`.
- Export type `INavLink` is shared with `hb-offcanvas` / `hb-sidebar-desktop` `navlinks` arrays.

### Minimal HTML example

```html
<hb-sidenav-link
  navpage="home"
  navlink='{"label":"Home","key":"home","icon":"house-door"}'
></hb-sidenav-link>
```
npm package: @htmlbricks/hb-site-contacts-row
Description: Contact strip for addresses (with optional `latLng`), phones, emails, websites, and `availability` (times, appointment flag). `model` `big` / `small` or omit for auto layouts that adapt to which fields you pass.
Latest version: 0.71.18

## `hb-site-contacts-row` — site-contacts-row

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

### What it does

Contact strip for addresses (with optional `latLng`), phones, emails, websites, and `availability` (times, appointment flag). `model` `big` / `small` or omit for auto layouts that adapt to which fields you pass.

### Custom element

`hb-site-contacts-row`

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

- `id` (optional): string.
- `style` (optional): string (inline style).
- `availability` (optional): JSON string — `{ icon?, times: string[], title?, appointment? }`.
- `addresses` (optional): JSON string — `{ icon?, addresses: Address[], title? }` (`Address`: `address`, optional `latLng`, `link`, `name`).
- `phones` (optional): JSON string — `{ icon?, phones: { name?, number }[], title? }`.
- `emails` (optional): JSON string — `{ icon?, emails: { label?, address, name? }[], title? }`.
- `websites` (optional): JSON string — `{ icon?, websites: { label?, url, name? }[], title? }`.
- `model` (optional): `"big"` | `"small"`.

### Events

- `event`: `{ test: boolean }` (integration hook per typings).

### Usage notes

- No named slots in `extra/docs.ts`. Pass complex blocks as JSON attributes or bind after custom element upgrade.

### Minimal HTML example

```html
<hb-site-contacts-row
  model="small"
  emails='{"emails":[{"label":"Info","address":"info@example.com","name":"main"}]}'
></hb-site-contacts-row>
```
npm package: @htmlbricks/hb-site-paragraph-with-image
Description: Marketing block pairing an image (`img`) with rich text (`text`: title, body, optional link). Use `text_side` (`left` / `right`) and `half_space` for layout; responsive parts cover mobile and desktop. CTA is a Bulma `button is-primary` (optional inline co
Latest version: 0.71.18

## `hb-site-paragraph-with-image` — site-paragraph-with-image

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

### What it does

Marketing block pairing an image (`img`: `src`, optional `alt`) with rich text (`text`: optional `title`, `body`, optional `link` with `label` and optional `src`, `key`, colors). Use `text_side` (`left` / `right`) and `half_space` for layout; CSS parts cover mobile and desktop. CTA uses a **Bulma** `button is-primary` (custom link colors still applied inline). Fires `elClick` when the link is activated.

### Custom element

`hb-site-paragraph-with-image`

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

- `id` (optional), `style` (optional): strings.
- `img` (required): JSON string — `{ src: string; alt?: string }`.
- `text` (required): JSON string — `{ title?, body?, link?: { label; src?; key?; bgColor?; textColor? } }`.
- `text_side` (optional): `"left"` | `"right"`.
- `half_space` (optional): boolean as string when used from HTML.

### Events

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

### Usage notes

- **CSS parts:** `mobile_text_content`, `mobile_title`, `mobile_text_body`, `mobile_link_button`, `mobile_image_content`, `image_content`, `text_content`, `link_button`, `title`, `text_body`.
- No `htmlSlots` in docs; structure is prop-driven.

### Minimal HTML example

```html
<hb-site-paragraph-with-image
  img='{"src":"https://example.com/image.png","alt":"Logo"}'
  text='{"title":"Heading","body":"Short copy.","link":{"label":"Read more"}}'
  text_side="right"
></hb-site-paragraph-with-image>
```
npm package: @htmlbricks/hb-site-slideshow
Description: Full-viewport image slideshow: pass `data` as an array of slides (`href`, optional `caption`). Supports optional `index` and `timer`, dots and captions via CSS parts, overlay/prev/next/cover slots, and dispatches slide change and hover events.
Latest version: 0.71.18

## `hb-site-slideshow` — site-slideshow

**Category:** content  
**Tags:** content, media

### What it does

Full-viewport image slideshow: pass `data` as an array of slides (`href`, optional `caption`). Supports optional `index` and `timer`, dots and captions via CSS parts, and slots `overlay`, `prev`, `next`, `cover_on_images`. Dispatches slide change and hover events.

### Custom element

`hb-site-slideshow`

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

- `id` (optional), `style` (optional): strings.
- `data` (required): JSON string — `{ href: string; caption?; index? }[]`.
- `index` (optional): number as string — initial slide.
- `timer` (optional): number as string — autoplay interval.

### Events

- `changeSlide`: `{ index: number }`.
- `changeHover`: `{ index: number; hover: boolean }`.

### Usage notes

- **CSS parts:** `dot`, `caption_container`, `caption_content`, `cover_on_images`.
- **Slots:** `overlay`, `prev`, `next`, `cover_on_images`.
- Declared **size** metadata: fullscreen layout.

### Minimal HTML example

```html
<hb-site-slideshow
  data='[{"href":"https://example.com/a.jpg","caption":"A"},{"href":"https://example.com/b.jpg","caption":"B"}]'
  index="0"
></hb-site-slideshow>
```
npm package: @htmlbricks/hb-site-slideshow-horizontal
Description: Horizontal media strip: `data` lists slides with `href`, `caption`, and optional `link`, `externalLink`, `key`, or `duration` for video-style rows. Set `type` to `videos` for that layout; emits `slideClick` when a slide is activated.
Latest version: 0.71.18

## `hb-site-slideshow-horizontal` — site-slideshow-horizontal

**Category:** content  
**Tags:** content, media

### What it does

Horizontal media strip: `data` lists slides with `href`, `caption`, and optional `link`, `externalLink`, `key`, or `duration` for video-style rows. Set `type` to `videos` for that layout; optional `slide` index and `size`. Emits `slideClick` when a slide is activated.

### Custom element

`hb-site-slideshow-horizontal`

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

- `id` (optional), `style` (optional): strings.
- `data` (required): JSON string — array of `{ href; caption?; externalLink?; link?; key?; duration?; index? }`.
- `type` (optional): `"images"` | `"videos"`.
- `slide` (optional): number as string (current slide).
- `size` (optional): number as string.

### Events

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

### Usage notes

- **CSS parts:** `video_sub_title`, `caption_content` (see `extra/docs.ts` for full list).

### Minimal HTML example

```html
<hb-site-slideshow-horizontal
  data='[{"href":"https://placehold.co/600x400","caption":"Slide 1"},{"href":"https://placehold.co/600x401","caption":"Slide 2"}]'
></hb-site-slideshow-horizontal>
```
npm package: @htmlbricks/hb-skeleton-component
Description: Development scaffold: accepts arbitrary `json`, `string`, and `boolean` props to test bindings, exposes a `skelcontent` slot and a `testpart` CSS part, and emits a generic `event` for wiring demos.
Latest version: 0.71.18

## `hb-skeleton-component` — skeleton-component

**Category:** data  
**Tags:** data, loading

### What it does

Development scaffold: accepts arbitrary `json`, `string`, and `boolean` props to test bindings, exposes a `skelcontent` slot and a `testpart` CSS part, and emits a generic `event` for wiring demos.

### Custom element

`hb-skeleton-component`

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

- `id` (optional), `style` (optional): strings.
- `json` (optional): JSON string — any JSON-serializable value.
- `string` (required per typings): string.
- `boolean` (optional): boolean as string when used from HTML.

### Events

- `event`: `{ test: boolean }`.

### Styling (Bulma)

Bundles **Bulma 1.x** (`button`, `base/skeleton`, animations) in the shadow root. Set **`--bulma-*`** on `body` / `:root` to align with your app.

### Usage notes

- **Slot:** `skelcontent`.
- **CSS part:** `testpart`.

### Minimal HTML example

```html
<hb-skeleton-component string="demo" json='{"a":0}' boolean="no"></hb-skeleton-component>
```
npm package: @htmlbricks/hb-stylus-notebook
Description: Notebook-sized stylus canvas: optional `load_draw` restores saved stroke JSON; `save` configures persistence; `debug` toggles diagnostics. Same slot/part hooks as the skeleton dev component; emits `event` on user actions.
Latest version: 0.71.18

## `hb-stylus-notebook` — stylus-notebook

**Category:** inputs  
**Tags:** inputs, drawing

### What it does

Notebook-sized stylus canvas: optional `load_draw` restores saved stroke JSON; `save` configures persistence target (`name`, `type`: pdf/json/png/svg/jpg); `debug` toggles diagnostics (`yes` / `no`). Same `skelcontent` slot and `testpart` CSS part as the skeleton dev component; emits `event` on user actions.

### Custom element

`hb-stylus-notebook`

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

- `id` (optional), `style` (optional): strings.
- `load_draw` (optional): JSON string — saved draw payload (`type`, `draw`, `id`, `draw_id`, `name`, `version`).
- `save` (optional): JSON string — `{ name: string; type: "pdf" | "json" | "png" | "svg" | "jpg" }`.
- `debug` (optional): `"yes"` | `"no"`.

### Events

- `event`: `{ test: boolean }`.

### Usage notes

- **Slot:** `skelcontent`.
- **CSS part:** `testpart`.
- Declared **size** metadata: fullscreen layout.

### Minimal HTML example

```html
<hb-stylus-notebook debug="no"></hb-stylus-notebook>
```
npm package: @htmlbricks/hb-stylus-paper
Description: Freehand drawing surface with modes (`draw`, `eraser`, `select`), brush `options`, `background_color` / `pen_color` / `pen_opacity`, and optional `load_draw`, `insert_image`, or `insert_text`. Supports `save_as`, `size`, `view`, `goto`, and events for str
Latest version: 0.71.18

## `hb-stylus-paper` — stylus-paper

**Category:** inputs  
**Tags:** inputs, drawing

### What it does

Freehand drawing surface with modes (`draw`, `eraser`, `select`), brush `options`, `background_color` / `pen_color` / `pen_opacity`, and optional `load_draw`, `insert_image`, or `insert_text`. Supports `save_as`, paper `size`, `view` (zoom/pan locks), `goto` page index, and rich events for strokes, selection, history, save, and asset load.

### Custom element

`hb-stylus-paper`

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

- `id` (optional), `style` (optional), `draw_id` (optional): strings.
- `background_color`, `pen_color` (optional): strings (CSS colors).
- `pen_opacity` (optional): number as string.
- `mode` (optional): `"eraser"` | `"draw"` | `"select"`.
- `debug` (optional): `"yes"` | `"no"`.
- `options` (optional): JSON string — brush options (`size`, `thinning`, `smoothing`, `streamline`, `simulatePressure`, etc.).
- `load_draw` (optional): JSON string — full save document with `draw`, `size.paperSize`, ids, version.
- `save_as` (optional): JSON string — `{ name; type: TSaveType }`.
- `insert_image` (optional): JSON string — `{ name; type; uri?; base64? }`.
- `insert_text` (optional): JSON string — `{ name; content }`.
- `size` (optional): JSON string — paper dimensions / `paperSize` enum.
- `view` (optional): JSON string — `{ lockPan; lockZoom; zoom; pan }`.
- `goto` (optional): number as string.

### Events

- `beginStroke`, `startStroke`, `endStroke`: stroke lifecycle with ids, timestamps, geometry, and `draw_id`.
- `selection`: bounding box and selected strokes.
- `historyIndex`, `changeIndex`: undo/redo index changes.
- `save`: full `TSave` payload.
- `drawLoaded`, `imageLoaded`, `txtLoaded`: load outcomes.

### Usage notes

- No slots or CSS parts in `extra/docs.ts` for this component.
- Declared **size** metadata: fullscreen layout.

### Minimal HTML example

```html
<hb-stylus-paper mode="draw" pen_color="rgb(0,0,0)" debug="no"></hb-stylus-paper>
```
npm package: @htmlbricks/hb-terms-doc-templates
Description: Renders legal-style documents from `data`: privacy templates with site, company, and admin fields, or cookie policies with a `cookies` list. Use `i18nlang` with registered languages for localized copy; emits `event` for integrations.
Latest version: 0.71.18

## `hb-terms-doc-templates` — terms-doc-templates

**Category:** content  
**Tags:** content, compliance

### What it does

Renders legal-style documents from `data`: privacy templates with site, company, admin, and collected-data fields, or cookie policies with a `cookies` list. Use `i18nlang` with registered languages (`it`, `en`) for localized copy; emits `event` for integrations. Includes `skelcontent` slot and `testpart` CSS part (scaffold-style hooks).

### Custom element

`hb-terms-doc-templates`

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

- `id` (optional), `style` (optional): strings.
- `i18nlang` (optional): string — e.g. `it`, `en`.
- `data` (required): JSON string — `ITPrivacy` or `CookieContent` shape (see `types/webcomponent.type.d.ts`).

### Events

- `event`: `{ test: boolean }`.

### Usage notes

- **Slot:** `skelcontent`.
- **CSS part:** `testpart`.
- Large **`data`** payloads should be JSON strings in HTML.

### Minimal HTML example

```html
<hb-terms-doc-templates
  i18nlang="en"
  data='{"id":"cookie-doc-english","site":{"name":"Example","url":"https://example.com","privacyPolicyUri":"https://example.com/privacy","cookiePolicyUri":"https://example.com/cookies"},"company":{"name":"Co","address":"1 St"},"cookies":[]}'
></hb-terms-doc-templates>
```
npm package: @htmlbricks/hb-toast
Description: Bulma-styled notification toast: `show`, `title`, `content`, optional `img`, `small`, `level`, `position`, `timeout`, string `progress` for a bar, and `buttons` for actions. Slots customize header and body; dispatches visibility and button `action` events
Latest version: 0.71.18

## `hb-toast` — toast

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

### What it does

Bulma-styled notification toast: `show` (`yes` / `no`), `title`, `content`, optional `img`, `small`, `level`, `position`, `timeout`, string `progress` for a progress bar, and `buttons` for actions. Slots customize header and body; dispatches visibility and button `action` events. Theme uses Bulma variables on `:host`.

### Custom element

`hb-toast`

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

- `id` (optional), `style` (optional): strings.
- `show` (required): `"yes"` | `"no"`.
- `title` (required), `content` (required), `img` (required per typings): strings (`img` may be URL or data URI).
- `small` (optional): string (e.g. timestamp line).
- `level` (optional): `"primary"` | `"secondary"` | `"success"` | `"danger"` | `"warning"` | `"info"` | `"light"` | `"dark"`.
- `position` (optional): `"top-left"` | `"top-center"` | `"top-right"` | `"bottom-left"` | `"bottom-center"` | `"bottom-right"`.
- `timeout` (optional): number or string — auto-hide ms.
- `progress` (optional): string — progress bar value/label semantics per Storybook.
- `buttons` (optional): JSON string — `TToastButton[]` (`type` confirm/cancel, optional `action`, `text`, `icon`, colors).

### Events

- `changeVisibility`: `{ id: string; show: boolean; disappear?: boolean }`.
- `action`: `{ id: string; action?: string }`.

### Usage notes

- **Slots:** `header_icon` (top-left badge), `header_strong`, `header_small` (overrides the status chip under the title), `body`.
- **CSS parts:** `toast` (root), `status` (chip row for time / percentage / timeout).
- **Theming:** Bulma Sass is forwarded from `styles/bulma.scss`; override `--bulma-*` on the host or document root as needed. The `level` attribute maps to Bulma `notification` tints (`is-*` + `is-light`, except `light` which uses the palette’s light variant).

### Minimal HTML example

```html
<hb-toast
  show="yes"
  title="Notice"
  content="Hello, world!"
  img="https://via.placeholder.com/64"
  level="primary"
></hb-toast>
```
npm package: @htmlbricks/hb-tooltip
Description: A wrapper component that adds a Bootstrap tooltip to its content
Latest version: 0.71.18

## `hb-tooltip` — tooltip

**Category:** overlays  
**Tags:** overlays, tooltip

### What it does

Wrapper that adds a Bootstrap tooltip around slotted content. Configure via `tooltip` object: `title`, optional `description`, `placement`, `html`, `delay`, `trigger`, `style`, `maxWidth`, etc. Optional `show` can drive visibility; emits `visualizationChange` when the tooltip opens or closes.

### Custom element

`hb-tooltip`

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

- `id` (optional), `style` (optional): strings.
- `tooltip` (optional): JSON string — `TTooltip` (`title`, `description?`, `placement?`, `html?`, `animation?`, `delay?`, `trigger?`, `customClass?`, `offset?`, `style?`, `maxWidth?`, `maxHeight?`) or plain string title per typings.
- `show` (optional): boolean as string when used from HTML.

### Events

- `visualizationChange`: `{ id: string; show: boolean }`.

### Usage notes

- **Slot:** `default` — element(s) to wrap with the tooltip.

### Minimal HTML example

```html
<hb-tooltip tooltip='{"title":"Help text","placement":"bottom"}'>
  <button type="button">Hover me</button>
</hb-tooltip>
```
npm package: @htmlbricks/hb-uploader
Description: Upload progress in `hb-dialog` driven by `fetch_data` (`url`, `data`, optional `method`, `headers`): Bulma `progress` (indeterminate then value) and optional `upload_id`. Forwards `modalShow`; emits `uploadComplete` / `uploadError`.
Latest version: 0.71.18

## `hb-uploader` — uploader

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

### What it does

Upload progress UI driven by `fetch_data` (`url`, `data`, optional `method`, `headers`): wraps `hb-dialog`, shows an indeterminate **Bulma** `progress` bar while starting, then fills `progress` from streamed upload bytes. Optional `upload_id` identifies the nested dialog; `title` slot labels the dialog. Forwards dialog `modalShow` and emits `uploadComplete` / `uploadError` when the request finishes or fails.

### Custom element

`hb-uploader`

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

- `id` (optional), `style` (optional): strings.
- `upload_id` (optional): string — dialog id (defaults from `id` + `_dialog` in component).
- `fetch_data` (optional): JSON string — `{ url: string; data: any; method?; headers? }`.

### Events

- `uploadError`: `{ completed: boolean; id: string; error: Error }`.
- `uploadComplete`: `{ completed: boolean; id: string }`.
- `modalShow`: forwarded from `hb-dialog` — `{ id: string; show: boolean }` (see dialog typings).

### Usage notes

- **Slot:** `title` — dialog title (default “Uploading”).
- Storybook arg names may say “download”; runtime events are **`uploadError`** / **`uploadComplete`**.
- **CSS vars** in docs reference Bulma semantic colors (`--bulma-*`) for progress and labels.

### Minimal HTML example

```html
<hb-uploader
  fetch_data='{"url":"https://api.example.com/upload","data":{},"method":"POST"}'
  upload_id="my-upload-dialog"
></hb-uploader>
```
npm package: @htmlbricks/hb-vertical-img-txt-archive
Description: Vertical archive grid: `collection` items with `title`, `text`, `image`, and `link` (e.g. `type` + `uri`). Optional `size` sets column count; CSS parts style container, item, image, title, and text. Emits `collectionItemClick` when an item is chosen.
Latest version: 0.71.18

## `hb-vertical-img-txt-archive` — vertical-img-txt-archive

**Category:** content  
**Tags:** content, archive

### What it does

Vertical archive grid: `collection` items with `title`, `text`, `image`, and `link` (`type`: `tab` | `page` | `event`, `uri`). Optional `subtitle` on items; optional `size` sets column count. CSS parts style `container`, `item`, `image`, `title`, and `text`. Emits `collectionItemClick` with the item `uri` when an entry is activated.

### Custom element

`hb-vertical-img-txt-archive`

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

- `id` (optional), `style` (optional): strings.
- `collection` (required): JSON string — `Item[]` (`title`, `text`, `image`, `link`, optional `subtitle`, `index`).
- `size` (optional): number as string — column count.

### Events

- `collectionItemClick`: `{ uri: string }`.

### Usage notes

- **CSS parts:** `container`, `item`, `image`, `title`, `text`.
- No named content slots in `extra/docs.ts`.

### Minimal HTML example

```html
<hb-vertical-img-txt-archive
  collection='[{"title":"One","text":"Body","image":"https://placehold.co/300x200","link":{"type":"tab","uri":"https://example.com"}}]'
  size="3"
></hb-vertical-img-txt-archive>
```