open-index/open-npm huggingface dataset:
npm package: @htmlbricks/hb-footer
Description: Site footer in `small`, `regular`, or `large` layouts: company block, optional brand/contacts column, link columns, social icons, `hb-contact-item` rows, and policy links—all driven by JSON props. Regular layout uses Bulma `container`, `columns` / `column
Latest version: 0.71.18

## `hb-footer` — footer

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

### What it does

Site footer in `small`, `regular`, or `large` layouts: company block, optional brand/contacts column, link columns, social icons, `hb-contact-item` rows, and policy links—all driven by JSON props. **Bulma** `container`, `columns` / `column`, `title`, and `button` style the regular layout; equal-width sections use a shared CSS variable for column flex-basis. On small layouts the body can expand/collapse unless `disable_expanding_small` is set; slots `footerheader`, `footercontent`, and `footerbottom` wrap major regions.

### Custom element

`hb-footer`

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

- `id` — optional string  
- `style` — optional string  
- `company` — required string (JSON: logo, names, description, VAT, etc.)  
- `brandandcontacts` — optional string (JSON)  
- `columns` — optional string (JSON array of titled link columns / cells)  
- `policies` — optional string (JSON array of `{ label, key, link? }`)  
- `contacts` — optional string (JSON: phones, addresses, emails, sites)  
- `socials` — optional string (JSON: facebook, youtube, …)  
- `type` — optional `"small"` | `"regular"` | `"large"`  
- `disable_expanding_small` — optional boolean (string in HTML)

### Events

- `footerClick` — `{ elClick: string }`

### Usage notes

Slots: `footerpolicy`, `footerheader`, `footercontent`, `footerbottom`, `footer_small`. CSS part: `column-cell-button-content`. Layout size metadata in docs: `fullscreen`.

### Minimal HTML example

```html
<hb-footer
  type="regular"
  company="{&quot;logoUri&quot;:&quot;https://example.com/logo.svg&quot;,&quot;siteName&quot;:&quot;Site&quot;,&quot;companyName&quot;:&quot;ACME&quot;,&quot;description&quot;:&quot;Tagline&quot;}"
  columns="[]"
  policies="[]"
></hb-footer>
```
npm package: @htmlbricks/hb-form
Description: JSON `schema`-driven form engine: each entry’s `type` maps to an `hb-input-*` web component (text, select, date, file, arrays, coords, etc.) or layout `row`. Handles grouping, conditional visibility, validation messages, disabled state, and dispatches ric
Latest version: 0.71.18

## `hb-form` — form

**Category:** forms  
**Tags:** forms

### What it does

JSON `schema`-driven form engine: each entry’s `type` maps to an `hb-input-*` web component (text, select, date, file, arrays, coords, etc.) or layout `row`. Handles grouping, conditional visibility, validation messages, disabled state, and dispatches rich `update` payloads (field values + `_valid`) plus submit lifecycle events for programmatic backends.

### Custom element

`hb-form`

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

- `id` — optional string  
- `style` — optional string  
- `schema` — required string (JSON array of field definitions: `type`, `id`, `label`, `value`, `required`, `params`, `dependencies`, etc.)  
- `submitted` — optional `"yes"` | `"no"` | null  
- `getvals` — optional `"yes"` | `"no"` | null (trigger read values)  
- `show_validation` — optional `"yes"` | `"no"`  
- `hide_submit` — optional boolean  
- `i18nlang` — optional string (`en`, `it`, …)

### Events

- `submit` — submitted values as `Record<string, …>` plus `_valid`, `_id`  
- `submitinvalid` — fired when a submit is attempted (including `submitted="yes"`) but the form fails validation; `show_validation` is turned on so errors are visible  
- `getValues` — `{ _valid: boolean; values: Record<string, …> }`  
- `update` — `{ _valid: boolean; _id: string; values: Record<string, …> }`

### Usage notes

`schema` is the primary API; pass it as a single JSON string on the element. Slots: `submit_button`, `submit_label`, `other_buttons`. Supports i18n via `i18nlang`.

### Minimal HTML example

```html
<hb-form
  schema="[{&quot;type&quot;:&quot;text&quot;,&quot;id&quot;:&quot;name&quot;,&quot;label&quot;:&quot;Name&quot;,&quot;required&quot;:true}]"
  show_validation="no"
  submitted="no"
></hb-form>
```
npm package: @htmlbricks/hb-form-composer
Description: Visual form-schema builder: internal `hb-form` defines field types, validation flags, and options, mirrored into an `hb-table` preview and editable via `hb-dialogform`. Accumulates `output_schema` as the composed `hb-form` schema array and can emit debug-
Latest version: 0.71.18

## `hb-form-composer` — form-composer

**Category:** forms  
**Tags:** forms, builder

### What it does

Visual form-schema builder: internal `hb-form` defines field types, validation flags, and options, mirrored into an `hb-table` preview and editable via `hb-dialogform`. Accumulates `output_schema` as the composed `hb-form` schema array and emits `done` when the schema is finalized (e.g. via the UI save action).

### Custom element

`hb-form-composer`

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

- `id` — optional string  
- `style` — optional string  
- `debug` — optional boolean (string in HTML)  
- `output_schema` — optional string (JSON array of generator field descriptors; seed or inspect composed schema)

### Events

- `done` — `{ schema: any; id: string }`

### Usage notes

Uses nested `hb-form`, `hb-table`, and `hb-dialogform`. `output_schema` mirrors the live composed schema suitable for `hb-form`. The table slot “done” control uses a Bulma outline button from `styles/bulma.scss`.

### Minimal HTML example

```html
<hb-form-composer debug="no"></hb-form-composer>
```
npm package: @htmlbricks/hb-form-contact
Description: Opinionated contact form: JSON `informations` toggles and labels fields (name, email, phone, subject, message, etc.) and builds the `hb-form` schema at runtime, including privacy-policy checkbox from `privacy_policy`. Optional `captcha` config embeds `hb-
Latest version: 0.71.18

## `hb-form-contact` — form-contact

**Category:** forms  
**Tags:** forms, contact

### What it does

Opinionated contact form: JSON `informations` toggles and labels fields (name, email, phone, subject, message, etc.) and builds the `hb-form` schema at runtime, including privacy-policy checkbox from `privacy_policy`. Optional `captcha` config embeds `hb-captcha-google-recaptcha-v2-invisible` before submit; success UI uses Svelte transitions.

### Custom element

`hb-form-contact`

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

- `id` — optional string  
- `style` — optional string  
- `informations` — optional string (JSON: which fields exist and their `required`, `label`, `placeholder`, `value`)  
- `privacy_policy` — optional string (JSON: `input`, `link?`, `policyId?`, `required?`)  
- `captcha` — optional string (JSON: `type` `googlev_recaptchav2_invisible` | `googlev_recaptchav3`, `siteKey`)

### Events

- `formContactSubmit` — `{ _valid: boolean; values: Record<string, string | number | boolean> }`  
- `formContactSubmitWithCaptcha` — same as above plus `response: string`

### Usage notes

CSS part: `container`. Bootstrap theme variables apply via component styles.

### Minimal HTML example

```html
<hb-form-contact
  informations="{&quot;email&quot;:{&quot;required&quot;:true},&quot;message&quot;:{}}"
  privacy_policy="{&quot;input&quot;:&quot;I agree&quot;,&quot;required&quot;:true}"
></hb-form-contact>
```
npm package: @htmlbricks/hb-funnel
Description: Multi-step funnel over stacked `hb-form` instances: JSON `schemes` supplies one schema per step (or derive step count from `steps`), tracks per-step validity, merges values as the user advances, and optionally shows a final submit step when `submitstep` i
Latest version: 0.71.18

## `hb-funnel` — funnel

**Category:** forms  
**Tags:** forms, multistep

### What it does

Multi-step funnel over stacked `hb-form` instances: JSON `schemes` supplies one schema per step (or derive step count from `steps`), tracks per-step validity, merges values as the user advances, and optionally shows a final submit step when `submitstep` is `yes`. Dispatches step navigation and aggregated form updates for the active index.

### Custom element

`hb-funnel`

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

- `id` — optional string  
- `style` — optional string  
- `schemes` — required string (JSON array of `hb-form`-compatible schemas, one per step)  
- `steps` — optional number (string in HTML)  
- `step` — optional number (current step index; string in HTML)  
- `submitstep` — optional `"yes"` | `"no"` (final submit step)

### Events

- `update` — `{ step: number; scheme: { schema; valid }; valid: boolean }`  
- `submit` — `{ schemes: { schema; valid }[]; steps: number; step: number }`

### Usage notes

Each entry in `schemes` is a full form schema array like `hb-form`’s `schema`. CSS part: `invalid-feedback` (from inner form styling).

**Next / Save:** the outer buttons set `submitted="yes"` on the inner `hb-form`. The funnel advances (or emits `submit` on the last step) only after that form dispatches `submit` with a valid payload. If validation fails, the inner form emits `submitinvalid`, turns on field validation UI, and the step does not change.

The inner form’s `schema` attribute is refreshed when schemes are first loaded or when the step index changes. `field.value` entries in the funnel’s copy of the schema are updated when you leave a step with a **valid** submit (Avanti / Salva), not on each debounced `update`, so the DOM is not forced to re-sync on every keystroke.

### Minimal HTML example

```html
<hb-funnel
  submitstep="yes"
  schemes="[[{&quot;type&quot;:&quot;text&quot;,&quot;id&quot;:&quot;name&quot;,&quot;label&quot;:&quot;Name&quot;,&quot;required&quot;:true}]]"
></hb-funnel>
```
npm package: @htmlbricks/hb-gallery-video
Description: Paginated grid of `hb-card-video` tiles built from JSON `cards`, with `hb-paginate` for page/size and optional text or date-range filtering (`initialdate`/`lastdate`, `filter`, `externalfilter`). Passes date format, link label, and primary color into each
Latest version: 0.71.18

## `hb-gallery-video` — gallery-video

**Category:** media  
**Tags:** media, video, gallery

### What it does

Paginated grid of `hb-card-video` tiles built from JSON `cards`, with `hb-paginate` for page/size and optional text or date-range filtering (`initialdate`/`lastdate`, `filter`, `externalfilter`). Passes date format, link label, and primary color into each card; listens to paginator events to sync `page`/`pages` and emits host events for paging and filters.

### Custom element

`hb-gallery-video`

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

- `id` — optional string  
- `style` — optional string  
- `cards` — required string (JSON array: `videoSrc`, `title?`, `time?`, `provider?`, `dateformat?`, …)  
- `size` — optional number (items per page; string in HTML)  
- `page` — optional number (0-based; string in HTML)  
- `pages` — optional number (total pages when using external filter; string in HTML)  
- `link_label` — optional string  
- `dateformat` — optional string (day.js format)  
- `primarycolor` — optional string  
- `filter` — optional string (text filter)  
- `externalfilter` — optional string (truthy enables external pagination/filter behavior)  
- `disabletextfilter` — optional `"yes"` to disable text filter UI  
- `initialdate` — optional (ISO/date string when passed from host)  
- `lastdate` — optional (ISO/date string when passed from host)

### Events

- `pageChange` — `{ page: number; cards: ICard[] }`  
- `textFilterVideos` — `{ filter?: string }` (when `externalfilter` is set and filter changes)  
- `dateFilterVideos` — `{ start?: Date; end?: Date; dateKey: string }`

### Usage notes

CSS part: `container`. Registers `hb-paginate` and `hb-card-video`. `cards` must be valid JSON on the attribute. Layout and filters use **Bulma** (`container`, `columns`, `field` / `control`, `input`, visibility helpers).

### Minimal HTML example

```html
<hb-gallery-video
  cards="[{&quot;title&quot;:&quot;Clip&quot;,&quot;videoSrc&quot;:&quot;https://example.com/video.mp4&quot;}]"
  size="12"
  page="0"
></hb-gallery-video>
```
npm package: @htmlbricks/hb-gauge
Description: SVG gauge wrapper around JustGage: pass JustGage-compatible options as JSON (`value`, min/max, labels, colors, etc.). The gauge is created on the shadow host after mount, destroyed on teardown, and recreated when `options` changes or the window resizes (d
Latest version: 0.71.18

## `hb-gauge` — gauge

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

### What it does

SVG gauge wrapper around JustGage: pass JustGage-compatible options as JSON (`value`, min/max, labels, colors, etc.). The gauge is created on the shadow host after mount, destroyed on teardown, and recreated when `options` changes or the window resizes (debounced) so it stays sized correctly.

### Custom element

`hb-gauge`

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

- `id` — optional string  
- `style` — optional string  
- `options` — required string (JSON object; at minimum `value`, `min`, `max`; additional keys follow JustGage)

### Events

None declared on the component type.

### Usage notes

CSS part: `gauge`. `options` may be passed as a JSON string; the component parses it when needed.

### Minimal HTML example

```html
<hb-gauge
  options="{&quot;value&quot;:50,&quot;min&quot;:0,&quot;max&quot;:100}"
></hb-gauge>
```
npm package: @htmlbricks/hb-input-area
Description: Bulma `textarea` + validation modifiers and `help is-danger`. `schemaentry` like text; `setVal` / `clickEnter` (Enter without Shift). Theme `--bulma-*` on `:host`.
Latest version: 0.71.18

## `hb-input-area` — input-area

**Category:** inputs  
**Tags:** inputs

### What it does

Multi-line `<textarea>` with Bulma `textarea` + optional `is-success` / `is-danger` and `help is-danger`. Same `schemaentry` validation as text (`validationRegex`, `params` min/max, required). Theme via `--bulma-*` on `:host`. Dispatches `setVal` and `clickEnter` when Enter is pressed without Shift (Shift+Enter inserts a newline).

### Styling (Bulma)

Bundles **Bulma 1.x** `form/shared`, `form/input-textarea`, and `form/tools` in the shadow root.

### Custom element

`hb-input-area`

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

- `id` — optional string  
- `style` — optional string  
- `schemaentry` — required string (JSON: `id`, `label?`, `placeholder?`, `required?`, `value?`, `validationTip?`, `validationRegex?`, `params?`)  
- `show_validation` — optional `"yes"` | `"no"`

### Events

- `setVal` — `{ value: string; valid: boolean; id: string }`  
- `clickEnter` — `{ value: string; valid: boolean; id?: string }`

### Usage notes

CSS parts: `invalid-feedback`, `input`. Nested `schemaentry` fields follow the shared form-schema shape used by `hb-form`.

### Minimal HTML example

```html
<hb-input-area
  schemaentry="{&quot;id&quot;:&quot;notes&quot;,&quot;label&quot;:&quot;Notes&quot;,&quot;placeholder&quot;:&quot;Type here…&quot;}"
  show_validation="no"
></hb-input-area>
```
npm package: @htmlbricks/hb-input-array-objects
Description: Repeating records editor with `hb-table` and `hb-form`. Bulma `button is-info` for add, `help is-danger` for validation, themed container on `:host`. Registers `@htmlbricks/hb-form` and `@htmlbricks/hb-table`. Dispatches `setVal` with the objects array, `
Latest version: 0.71.18

## `hb-input-array-objects` — input-array-objects

**Category:** inputs  
**Tags:** inputs

### What it does

Repeating records editor: `hb-table` lists existing rows (with delete actions), and `hb-form` renders the next row from `schemaentry.params.schema`; submitting appends to the array and updates the table. Registers `hb-form` and `hb-table`; optional `add-object-label` slot customizes the add button (`button is-info`). Dispatches `setVal` with the objects array, `valid`, and `id`, and shows `validationTip` as Bulma `help is-danger` when `show_validation` is enabled and invalid.

### Styling (Bulma)

Shadow bundle: `form/tools`, `form/shared`, `form/input-textarea`, `elements/button`. Container border uses `--bulma-border` on `:host`.

### Custom element

`hb-input-array-objects`

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

- `id` — optional string  
- `style` — optional string  
- `schemaentry` — required string (JSON: `id`, `params.schema` as nested form schema, optional `value` as row array with `_objId`, `validationTip?`, `required?`, …)  
- `show_validation` — optional `"yes"` | `"no"`

### Events

- `setVal` — `{ value: string; valid: boolean; id: string }` (payload `value` is the serialized array/object representation used by the component)

### Usage notes

CSS parts: `properties-container`, `invalid-feedback`. Slot: `add-object-label`.

### Minimal HTML example

```html
<hb-input-array-objects
  schemaentry="{&quot;id&quot;:&quot;people&quot;,&quot;params&quot;:{&quot;schema&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;id&quot;:&quot;name&quot;,&quot;label&quot;:&quot;Name&quot;}]}}"
  show_validation="no"
></hb-input-array-objects>
```
npm package: @htmlbricks/hb-input-array-tags
Description: Tag list as `{ id, label }` objects; add via free text or `params.availableTags` select; Bulma `tags` / `tag` / `delete`, `input`, `select`, `help is-danger`. Slot `add-tag-label`. Dispatches `setVal` with `{ value, valid, id }`.
Latest version: 0.71.18

## `hb-input-array-tags` — input-array-tags

**Category:** inputs  
**Tags:** inputs

### What it does

Tag list stored as objects `{ id, label }` (optional per-tag `colorVarName`); users add tags via free text or a dropdown from `params.availableTags`, with optional `freeTag` and `_custom` flow, removable Bulma `tag` + `delete` controls when `allowRemove` is set, and styling via `params.colorVarName` or the `add-tag-label` slot. Dispatches `setVal` with the array `value`, `valid`, and `id`.

### Styling (Bulma)

Shadow bundle: `form` inputs/select/tools, `elements/tag`, `elements/delete`, `elements/button`. Tags use Bulma `tags` / `tag`; add control uses `button.tag` or styled `tag`.

### Custom element

`hb-input-array-tags`

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

- `id` — optional string  
- `style` — optional string  
- `schemaentry` — required string (JSON: `id`, `params` with `availableTags?`, `freeTag?`, `allowRemove?`, `colorVarName?`, `addTagLabel?`, optional `value` as tag array)  
- `show_validation` — optional `"yes"` | `"no"`

### Events

- `setVal` — `{ value: string; valid: boolean; id: string }` (tag list is serialized for the custom event payload)

### Usage notes

Optional slot: `add-tag-label` for the add control label. CSS part: `invalid-feedback`.

### Minimal HTML example

```html
<hb-input-array-tags
  schemaentry="{&quot;id&quot;:&quot;tags&quot;,&quot;params&quot;:{&quot;freeTag&quot;:true,&quot;allowRemove&quot;:true}}"
  show_validation="no"
></hb-input-array-tags>
```
npm package: @htmlbricks/hb-input-checkbox
Description: Checkbox or, when `schemaentry.params.type` is `switch`, a switch styled with Bulma theme variables on `:host`. Labeled from `schemaentry.label` with a required asterisk when needed. Boolean `value` is parsed from stringified `schemaentry`; required field
Latest version: 0.71.18

## `hb-input-checkbox` — input-checkbox

**Category:** inputs  
**Tags:** inputs

### What it does

Checkbox or, when `schemaentry.params.type` is `switch`, a switch styled in the shadow tree (Bulma colors on `:host`), labeled from `schemaentry.label` with a required asterisk when needed. Boolean `value` is parsed from stringified `schemaentry`; required fields must be checked to be valid. Dispatches `setVal` with `{ value, valid, id }` and shows `validationTip` as Bulma `help is-danger` when `show_validation` is `yes` and invalid.

### Styling (Bulma)

Shadow bundle: `form/shared`, `form/input-textarea`, `form/checkbox-radio`, `form/tools`. Switch uses host SCSS (`hb-input-checkbox-switch`).

### Custom element

`hb-input-checkbox`

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

- `id` — optional string  
- `style` — optional string  
- `schemaentry` — required string (JSON: `id`, `label?`, `required?`, `value?`, `validationTip?`, `params.type` optional `"switch"`, …)  
- `show_validation` — optional `"yes"` | `"no"`

### Events

- `setVal` — `{ value: boolean; valid: boolean; id: string }`

### Usage notes

CSS parts: `input`, `invalid-feedback`.

### Minimal HTML example

```html
<hb-input-checkbox
  schemaentry="{&quot;id&quot;:&quot;accept&quot;,&quot;label&quot;:&quot;I agree&quot;,&quot;required&quot;:true}"
  show_validation="no"
></hb-input-checkbox>
```
npm package: @htmlbricks/hb-input-color
Description: Color input that normalizes named HTML colors and `rgb(...)` strings into a hex value for the native picker, with debounced syncing back to the bound value. Driven by `schemaentry` (including required and optional `validationTip` with `show_validation`). 
Latest version: 0.71.18

## `hb-input-color` — input-color

**Category:** inputs  
**Tags:** inputs

### What it does

Color input that normalizes named HTML colors and `rgb(...)` strings into a hex value for the native picker, with debounced syncing back to the bound value. Driven by `schemaentry` (including required and optional `validationTip` with `show_validation`). Dispatches `setVal` with the string `value`, `valid`, and `id`.

### Styling (Bulma)

Shadow bundle: `form/shared`, `form/input-textarea`, `form/tools`. The native `type="color"` control uses host SCSS (border / outline with `--bulma-*`). Validation uses `help is-danger`. Theme variables on `:host`.

### Custom element

`hb-input-color`

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

- `id` — optional string  
- `style` — optional string  
- `schemaentry` — required string (JSON: `id`, `label?`, `required?`, `value?`, `validationTip?`, `placeholder?`, …)  
- `show_validation` — optional `"yes"` | `"no"`

### Events

- `setVal` — `{ value: string; valid: boolean; id: string }`

### Usage notes

CSS parts: `input`, `invalid-feedback`.

### Minimal HTML example

```html
<hb-input-color
  schemaentry="{&quot;id&quot;:&quot;accent&quot;,&quot;required&quot;:true,&quot;value&quot;:&quot;#07689f&quot;}"
  show_validation="no"
></hb-input-color>
```
npm package: @htmlbricks/hb-input-coords
Description: Latitude/longitude editor that embeds `hb-map` and two `hb-input-number` fields, with labels translated via optional `i18nlang`. Bulma theme on `:host`, columns layout, `help is-danger` for validation. On tablet+ the map column stretches to the coordinate
Latest version: 0.71.18

## `hb-input-coords` — input-coords

**Category:** inputs  
**Tags:** inputs, maps

### What it does

Latitude/longitude editor that embeds `hb-map` (marker and map `source` / `options` from `schemaentry.params`) and two `hb-input-number` fields, with labels translated via optional `i18nlang`. Supports initial `value` and `params` such as `zoom` and `center`. Registers `hb-map` and `hb-input-number` and dispatches `setVal` with `{ lat, lon }` as `value`, plus `valid` and `id`. Layout uses flex columns in the shadow root; validation uses Bulma `help is-danger`. Required validation treats `(0, 0)` as unset (same as the previous `lat && lon` check).

### Styling (Bulma)

Shadow bundle: `form/shared`, `form/input-textarea`, `form/tools`. Map and number fields keep their own styles.

### Custom element

`hb-input-coords`

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

- `id` — optional string  
- `style` — optional string  
- `schemaentry` — required string (JSON: `id`, `label?`, `required?`, `value` as `{ lat, lon }`, `validationTip?`, `params` for map/zoom/center/labels/placeholders)  
- `show_validation` — optional `"yes"` | `"no"`  
- `i18nlang` — optional string

### Events

- `setVal` — `{ value: { lat: number; lon: number }; valid: boolean; id: string }`

### Usage notes

CSS part: `invalid-feedback`. Ensure map-related `params` match your deployment (tiles/source).

### Minimal HTML example

```html
<hb-input-coords
  schemaentry="{&quot;id&quot;:&quot;loc&quot;,&quot;required&quot;:true,&quot;value&quot;:{&quot;lat&quot;:45.4,&quot;lon&quot;:9.2}}"
  show_validation="no"
></hb-input-coords>
```
npm package: @htmlbricks/hb-input-date
Description: Bulma date `input` + validation + `help is-danger`. `params.min`/`max` as ISO dates on the control and in range checks. `setVal` / `clickEnter`. `--bulma-*` on `:host`.
Latest version: 0.71.18

## `hb-input-date` — input-date

**Category:** inputs  
**Tags:** inputs

### What it does

Native `type="date"` with Bulma `input` + `is-success` / `is-danger`, native `min`/`max` from `params` when valid dates, and `help is-danger` for tips. `schemaentry` as JSON string or object. Theme `--bulma-*` on `:host`. Dispatches `setVal` and `clickEnter`.

### Styling (Bulma)

Shadow bundle: `form/shared`, `form/input-textarea`, `form/tools`.

### Custom element

`hb-input-date`

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

- `id` — optional string  
- `style` — optional string  
- `schemaentry` — required string (JSON: `id`, `label?`, `required?`, `value?` as ISO date string, `validationTip?`, `params.min` / `params.max` as ISO strings, …)  
- `show_validation` — optional `"yes"` | `"no"`

### Events

- `setVal` — `{ value: string; valid: boolean; id: string }`  
- `clickEnter` — `{ value: string; valid: boolean; id?: string }`

### Usage notes

CSS part: `invalid-feedback`.

### Minimal HTML example

```html
<hb-input-date
  schemaentry="{&quot;id&quot;:&quot;birth&quot;,&quot;label&quot;:&quot;Birth date&quot;,&quot;required&quot;:true}"
  show_validation="no"
></hb-input-date>
```
npm package: @htmlbricks/hb-input-datetime
Description: Composes child web components `hb-input-date` and `hb-input-number` to edit date, hours, minutes, and (unless `params.removeSeconds`) seconds, then combines them into a single ISO string `value`. Honors `schemaentry.params.min` / `max` as date bounds when
Latest version: 0.71.18

## `hb-input-datetime` — input-datetime

**Category:** inputs  
**Tags:** inputs

### What it does

Composes `hb-input-date` and `hb-input-number` to edit date, hours, minutes, and (unless `params.removeSeconds`) seconds, then combines them into a single ISO string `value`. Honors `schemaentry.params.min` / `max` as date bounds when required. Registers `hb-input-date` and `hb-input-number` and dispatches `setVal` with `{ value, valid, id }`.

### Styling (Bulma)

Shadow bundle: `form/shared`, `form/input-textarea`, `form/tools`. Layout uses Bulma `field is-grouped` / `control`; invalid state uses `help is-danger` and a host outline. Child WCs ship their own input styles. Theme `--bulma-*` on `:host`.

### Custom element

`hb-input-datetime`

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

- `id` — optional string  
- `style` — optional string  
- `schemaentry` — required string (JSON: `id`, `label?`, `required?`, `value?` as ISO datetime string, `validationTip?`, `params.removeSeconds?`, `params.min` / `params.max`, …)  
- `show_validation` — optional `"yes"` | `"no"`

### Events

- `setVal` — `{ value: string; valid: boolean; id: string }`

### Usage notes

CSS part: `invalid-feedback` on the validation message. Child inputs carry their own parts. Child components must be registered in the bundle.

### Minimal HTML example

```html
<hb-input-datetime
  schemaentry="{&quot;id&quot;:&quot;starts_at&quot;,&quot;label&quot;:&quot;Start&quot;,&quot;required&quot;:true,&quot;params&quot;:{&quot;removeSeconds&quot;:true}}"
  show_validation="no"
></hb-input-datetime>
```
npm package: @htmlbricks/hb-input-email
Description: Email input with Bulma `input` + validation modifiers and `help is-danger`. `schemaentry` id/value/placeholder/required + shape checks, `validationRegex`, `params` min/max length. `--bulma-*` on `:host`. Dispatches `setVal` and `clickEnter`.
Latest version: 0.71.18

# hb-input-email

## Description

`type="email"` field using `schemaentry` for id, value, placeholder, readonly, and required, with extra checks for a sensible address shape plus optional `validationRegex` and `params` min/max length. Bulma `input` + `is-success` / `is-danger` and `help is-danger` with `show_validation`. Theme via `--bulma-*` on `:host`. Dispatches `setVal` and `clickEnter` on Enter.

## Styling (Bulma)

Bundles **Bulma 1.x** `form/shared`, `form/input-textarea`, and `form/tools` in the shadow root; theme on `:host`.

## Types

```typescript
export type FormSchemaEntry = {
  /**
   * This will be both the key of the object when submitting the form's data,
   * and also the id in the DOM.
   */
  id: string;

  /**
   * The descriptive label that will show alongside the form control.
   */
  label?: string;

  /**
   * Optional default value.
   */
  value?: string | number | boolean;

  readonly?: boolean;

  /**
   * This doesn't matter if the dependencies requirements aren't met.
   */
  required?: boolean;

  validationRegex?: string;
  /**
   * Shows if value is not valid.
   */
  validationTip?: string;

  placeholder?: string;

  /**
   * Other parameters that may be specific to a certain kind of form control.
   */
  params?: Record<string, any>;
};

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

  show_validation?: "yes" | "no";
  schemaentry: FormSchemaEntry;
};

export type Events = {
  setVal: { value: string; valid: boolean; id: string };
  clickEnter: { value: string; valid: boolean; id?: string };
};
```
npm package: @htmlbricks/hb-input-file
Description: File picker with `accept` from `schemaentry.params.accept` (defaults to any file). Standard layout uses Bulma `file has-name` plus a MIME Bootstrap Icons glyph when a file is selected, and a text × clear control. With `placeHolderImage`, a clickable place
Latest version: 0.71.18

# hb-input-file

## Description

File picker with `accept` from `schemaentry.params.accept` (defaults to any file). **Standard mode** uses Bulma `file has-name`: CTA → **clear** (`×`) → filename strip (MIME icon + name) as one continuous control inside the same `file-label`. The clear button uses `preventDefault` / `stopPropagation` so it does not open the file dialog. **Placeholder image mode** (`params.placeHolderImage`) keeps the clickable image + translated “select image” copy and, after selection, preview (or MIME icon), filename, and clear. Set **`i18nlang`** (e.g. `en`, `it`) for UI strings; `hb-form` forwards its `i18nlang` to this control. Validates required fields against an actual chosen file. Dispatches `setVal` with `{ value, valid, id }`.

## Styling (Bulma)

Shadow bundle: `form/shared`, `form/input-textarea`, `form/file`, `form/tools`, `elements/button`. Bootstrap Icons CSS is `@import`ed from `styles/webcomponent.scss` so glyph rules and `@font-face` apply inside the shadow root (document-level `<link>` / `<svelte:head>` would not).

## Types

```typescript
export type FormSchemaEntry = {
	/**
	 * This will be both the key of the object when submitting the form's data,
	 * and also the id in the DOM.
	 */
	id: string;

	/**
	 * The descriptive label that will show alongside the form control.
	 */
	label?: string;

	/**
	 * Optional default value.
	 */
	value?: string | number | boolean;

	readonly?: boolean;

	/**
	 * This doesn't matter if the dependencies requirements aren't met.
	 */
	required?: boolean;

	validationRegex?: string;
	/**
	 * Shows if value is not valid.
	 */
	validationTip?: string;

	placeholder?: string;

	/**
	 * Other parameters that may be specific to a certain kind of form control.
	 */
	params?: Record<string, any>;
};

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

	show_validation?: "yes" | "no";
	schemaentry: FormSchemaEntry;
	i18nlang?: string;
};

export type Events = { setVal: { value: string; valid: boolean; id: string } };
```
npm package: @htmlbricks/hb-input-number
Description: Native number input with Bulma `input` + optional `is-success` / `is-danger` and `help is-danger` for validation. `min` / `max` DOM attributes only when the key exists on `schemaentry.params`. No bounds → `clickEnter` on Enter. Theme via inherited `--bulm
Latest version: 0.71.18

# hb-input-number

## Description

Native `<input type="number">` bound to `schemaentry` with optional `min` / `max` from `params` (attributes are set only when the corresponding key exists on `params`). Validates required fields and range; with no `min`/`max` params it dispatches `clickEnter` on Enter. Emits `setVal` with `{ value, valid, id }`. With `show_validation === "yes"` and `required`, the field uses Bulma `input.is-success` / `input.is-danger` and shows `validationTip` as `help is-danger` when invalid. Use `is_small="yes"` for Bulma **`input.is-small`** (compact control, e.g. next to **`hb-paginate`**). On **`type="number"`**, spin buttons are hidden so the control height matches compact selects (values are still editable with the keyboard).

## Styling (Bulma)

The component bundles **Bulma 1.x** form styles (`form/shared`, `form/input-textarea`, `form/tools`) scoped to the shadow root, with theme defaults on `:host` (`--bulma-hb-def-*`). Set public **`--bulma-*`** on `body` or `:root`; they inherit onto the custom element host.

Markup pattern:

- Wrapper: `div.hb-input-number-root` around **`input.input`** (Bulma control styling).
- Validation: `is-success` / `is-danger` on the input when `show_validation === "yes"` and `schemaentry.required` is set.
- Help: `p.help.is-danger` with `part="invalid-feedback"` when `show_validation === "yes"` and the value is invalid.

## Types

```typescript
export type FormSchemaEntry = {
  id: string;
  label?: string;
  value?: number;
  readonly?: boolean;
  required?: boolean;
  validationRegex?: string;
  validationTip?: string;
  placeholder?: string;
  params?: Record<string, any>;
};

export type Component = {
  id?: string;
  style?: string;
  show_validation?: "yes" | "no";
  is_small?: "yes" | "no";
  schemaentry: FormSchemaEntry | undefined;
};

export type Events = {
  setVal: { value: number; valid: boolean; id: string };
  clickEnter: { value: string; valid: boolean; id?: string };
};
```
npm package: @htmlbricks/hb-input-radio
Description: Radio group built from `schemaentry.params.options` with a shared `name` derived from the field id. Parses JSON `schemaentry` for initial `value` and supports required validation with Bulma `radios` / `radio` and `help is-danger` when `show_validation` is
Latest version: 0.71.18

# hb-input-radio

## Description

Radio group built from `schemaentry.params.options` with a shared `name` derived from the field id. Parses JSON `schemaentry` for initial `value` and supports required validation with Bulma `help is-danger` when `show_validation` is `yes` and invalid. Dispatches `setVal` with the selected string `value`, `valid`, and `id` whenever the choice changes.

## Styling (Bulma)

Shadow bundle: `form/shared`, `form/input-textarea`, `form/checkbox-radio`, `form/tools`. Markup uses Bulma `radios` / `radio` and host outline when invalid.

## Types

```typescript
export type FormSchemaEntry = {
  /**
   * This will be both the key of the object when submitting the form's data,
   * and also the id in the DOM.
   */
  id: string;

  /**
   * The descriptive label that will show alongside the form control.
   */
  label?: string;

  /**
   * Optional default value.
   */
  value?: string | number | boolean;

  readonly?: boolean;

  /**
   * This doesn't matter if the dependencies requirements aren't met.
   */
  required?: boolean;

  validationRegex?: string;
  /**
   * Shows if value is not valid.
   */
  validationTip?: string;

  placeholder?: string;

  /**
   * Other parameters that may be specific to a certain kind of form control.
   */
  params?: Record<string, any>;
};

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

  show_validation?: "yes" | "no";
  schemaentry: FormSchemaEntry | undefined;
};

export type Events = {
  setVal: { value: string | undefined; valid: boolean; id: string | undefined };
};
```
npm package: @htmlbricks/hb-input-range
Description: Range slider (`type="range"`) whose bounds come from `schemaentry.params.min` and/or `max` when those keys exist. Parses stringified `schemaentry` when needed and enforces required/min/max rules for the numeric value. Dispatches `setVal` with `{ value, va
Latest version: 0.71.18

## `hb-input-range` — input-range

**Category:** inputs  
**Tags:** inputs

### What it does

Range slider (`type="range"`) whose bounds come from `schemaentry.params.min` and/or `max` when those keys exist. Parses stringified `schemaentry` when needed and enforces required / min / max on the numeric value. Dispatches `setVal` with `{ value, valid, id }` and shows `validationTip` as Bulma `help is-danger` when `show_validation` is `yes` and the field is invalid.

### Styling (Bulma)

Shadow bundle: `form/shared`, `form/input-textarea`, `form/tools`. The native range uses `accent-color` mapped to Bulma link / success / danger via `--bulma-*` on `:host` (not the text `input` class, which does not suit range controls).

### Custom element

`hb-input-range`

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

- `id` — optional string  
- `style` — optional string  
- `schemaentry` — required string (JSON: `id`, `label?`, `required?`, `value?` (number), `validationTip?`, `params.min` / `params.max`, …)  
- `show_validation` — optional `"yes"` | `"no"`

### Events

- `setVal` — `{ value: number; valid: boolean; id: string }`

### Usage notes

CSS parts: `input`, `invalid-feedback`.

### Minimal HTML example

```html
<hb-input-range
  schemaentry="{&quot;id&quot;:&quot;volume&quot;,&quot;required&quot;:true,&quot;params&quot;:{&quot;min&quot;:0,&quot;max&quot;:100},&quot;value&quot;:50}"
  show_validation="no"
></hb-input-range>
```
npm package: @htmlbricks/hb-input-select
Description: Native `<select>` bound to `schemaentry` options from `params.options` (each option has `id`, `value`, and optional `label`). Supports JSON string or object `schemaentry`, optional required state, and `show_validation` for Bulma `select.is-success` / `sel
Latest version: 0.71.18

# hb-input-select

## Description

Native `<select>` bound to `schemaentry` options from `params.options` (each option has `id`, `value`, and optional `label`). Supports JSON string or object `schemaentry`, optional required state, and `show_validation` for Bulma validation styling on the wrapper (`select.is-success` / `select.is-danger`) plus a `validationTip` shown as `help is-danger`. Dispatches `setVal` with `{ value, valid, id }` on every change. Use `is_small="yes"` for Bulma **`select.is-small`** (compact control, e.g. next to **`hb-paginate`**).

## Styling (Bulma)

The component bundles **Bulma 1.x** form styles (`form/shared`, `form/select`, `form/tools`) scoped to the shadow root, with theme defaults on `:host` (`--bulma-hb-def-*`). To align with the rest of the app, set public **`--bulma-*`** variables on `body` or `:root`; they inherit onto the custom element host.

Markup pattern:

- Wrapper: `div.select` around the native `<select>` (Bulma arrow and control height).
- Validation: `is-success` / `is-danger` modifiers on `div.select` when `show_validation === "yes"` and `schemaentry.required` is set.
- Help text: `p.help.is-danger` with `part="invalid-feedback"` for theming (only when `show_validation === "yes"` and the value is invalid).
- `schemaentry.readonly` maps to the native `disabled` attribute on `<select>` (HTML does not support `readonly` on selects).

## Types

```typescript
export type FormSchemaEntry = {
  /**
   * This will be both the key of the object when submitting the form's data,
   * and also the id in the DOM.
   */
  id: string;

  /**
   * The descriptive label that will show alongside the form control.
   */
  label?: string;

  /**
   * Optional default value.
   */
  value?: string | number | boolean;

  /** When true, the native `<select>` is `disabled` (HTML has no `readonly` on `<select>`). */
  readonly?: boolean;

  /**
   * This doesn't matter if the dependencies requirements aren't met.
   */
  required?: boolean;

  validationRegex?: string;
  /**
   * Shows if value is not valid.
   */
  validationTip?: string;

  placeholder?: string;

  /**
   * Other parameters that may be specific to a certain kind of form control.
   */
  params?: Record<string, any>;
};

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

  show_validation?: "yes" | "no";
  is_small?: "yes" | "no";
  schemaentry: FormSchemaEntry | undefined;
};

export type Events = {
  setVal: { value: string; valid: boolean; id: string };
};
```
npm package: @htmlbricks/hb-input-text
Description: Single-line text with Bulma `input` + optional `is-success` / `is-danger` and `help is-danger`. JSON `schemaentry` (id, value, placeholder, readonly, required, `validationRegex`, `params` min/max length). Theme via `--bulma-*` on `:host`. Dispatches `setV
Latest version: 0.71.18

# hb-input-text

## Description

Single-line text field driven by a JSON `schemaentry` (id, value, placeholder, readonly, required, optional `validationRegex`, and `params` min/max length). With `show_validation`, uses Bulma `input.is-success` / `is-danger` and `help is-danger` for tips. Theme via inherited `--bulma-*` on `:host`. Dispatches `setVal` whenever the value or validity changes, and `clickEnter` on Enter.

## Styling (Bulma)

Bundles **Bulma 1.x** `form/shared`, `form/input-textarea`, and `form/tools` in the shadow root; theme defaults on `:host` (`--bulma-hb-def-*`). Override public **`--bulma-*`** from `body` / `:root`.

## Types

```typescript
export type FormSchemaEntry = {
  /**
   * This will be both the key of the object when submitting the form's data,
   * and also the id in the DOM.
   */
  id: string;

  /**
   * Optional default value.
   */
  value?: string | number | boolean;

  readonly?: boolean;

  /**
   * This doesn't matter if the dependencies requirements aren't met.
   */
  required?: boolean;

  validationRegex?: string;
  /**
   * Shows if value is not valid.
   */
  validationTip?: string;

  placeholder?: string;

  /**
   * Other parameters that may be specific to a certain kind of form control.
   */
  params?: Record<string, any>;
};

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

  show_validation?: "yes" | "no";
  schemaentry: FormSchemaEntry;
};

export type Events = {
  setVal: { value: string, valid: boolean, id: string };
};
```
npm package: @htmlbricks/hb-json-viewer
Description: Renders JSON as an expandable, syntax-colored tree. Accepts a parsed object or a JSON string and supports initial expand modes (open, closed, or first level only).
Latest version: 0.71.18

# hb-json-viewer

## Description

Renders JSON as an expandable, syntax-colored tree. Accepts a parsed object or a JSON string and supports initial expand modes (open, closed, or first level only).

## Styling (Bulma)

The shadow root loads **Bulma 1.x** theme tokens on `:host` only (no Bulma layout classes on the tree). Override **`--bulma-*`** from the light DOM for consistency with the app. **String** values use the success accent (`--jn-string` → Bulma success `*-on-scheme`); other primitives use **`--bulma-text`** / **`--bulma-text-weak`**. **Object** / **Array** type labels use **`--jn-type-object`** (danger) and **`--jn-type-array`** (warning). All tokens are Bulma `var(--bulma-*, var(--bulma-hb-def-*))` chains—no hardcoded hex. Dark mode follows `prefers-color-scheme: dark`, or `data-theme="dark"` / `.theme-dark` on `html`/`body`, or `data-theme="dark"` on the host.

## Types

```typescript

export type Component = {
  id?: string;
  json: any;
  status?: "open" | "closed" | "first";
};

export type Events = {
};
```
npm package: @htmlbricks/hb-layout
Description: Responsive application shell: below 800px viewport width it mounts the mobile layout; otherwise the desktop layout. Forwards navigation slots, page content, cookie-law options, and layout events from the active child.
Latest version: 0.71.18

# hb-layout

## Description

Responsive application shell: below 800px viewport width it mounts the mobile layout; otherwise the desktop layout. Forwards navigation slots, page content, cookie-law options, and layout events from the active child.

## Navigation `navlinks` and Bootstrap Icons

Set `navlinks` on `hb-layout` as a serialized JSON array (HTML attribute) or as an array in JS. The active child forwards it to either `hb-layout-desktop` (sidebar with `hb-sidebar-desktop`) or `hb-layout-mobile` (offcanvas with the same navigation model).

Use the same `icon` field on each link as for `hb-sidebar-desktop`: Bootstrap Icons **name only** after `bi-` (e.g. `"gear"`, not `"bi bi-gear"`). Details and copy-paste examples: [`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 = {
  i18nlang?: string;
  id?: string;
  style?: string;
  page_title?: string;
  socials?: ISocials;
  contacts?: IContacts;
  company?: ICompany;
  navlinks?: INavLink[];
  pagename?: 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[];
  heders?: {
    name?: string;
    content: string;
    property?: string;
  }[];
};

export type Events = {
  offcanvasswitch: { isOpen: boolean };
  pageChange: { page: string };
  navbarDropDownClick: { key: string };
  footerClick: { elClick: string };
  navbarSlotClick: { side: "left" | "right" | "center" };

  // layoutStatus: { width: number; size: "large" | "small" };
};
```