@htmlbricks/mcp 0.66.27 → 0.67.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/assets/AGENT_WEBCOMPONENTS_REFERENCE.md +457 -277
  2. package/assets/list.json +1 -1
  3. package/package.json +1 -1
package/assets/AGENT_WEBCOMPONENTS_REFERENCE.md CHANGED
@@ -6,8 +6,8 @@ A **consumer-oriented reference** for **`hb-*` custom elements**: tags, attribut
6
6
 
7
7
  ## How to use these components
8
8
 
9
- 1. **Attributes** — Public properties use **snake_case**. In HTML, attributes are strings; objects and arrays are usually passed as **JSON strings** unless a component’s section says otherwise.
10
- 2. **Theming** — The UI follows **Bootstrap 5** and **Bootstrap Icons**. To change appearance (colors, spacing, typography, borders, radii), set **Bootstrap CSS custom properties** (`--bs-*`, e.g. `--bs-primary`, `--bs-body-bg`, `--bs-border-radius`) on the **host element**, a parent wrapper, or higher in the cascade. Those variables typically flow into **shadow DOM** content. Prefer **`--bs-*`** over unrelated ad-hoc rules. Each component section below may list extra **CSS variables** and **`::part(...)`** names when exposed.
9
+ 1. **Attributes** — Public property **names** use **snake_case**. **Values are always strings** from HTML or `setAttribute`: you cannot pass native objects, numbers, or booleans. **Objects** (and structured data) must be **serialized** (typically **JSON strings**). **Numbers** must be passed as their **string form** (e.g. `"42"`). **Booleans** must be the strings **`yes`** or **`no`**. Arrays are also passed as **strings** (usually JSON). A component’s README is authoritative if it documents a special encoding.
10
+ 2. **Theming** — The layout/CSS framework is **Bulma 1.x**; icons use **Bootstrap Icons**. To change appearance (colors, theme, spacing where exposed), set **Bulma CSS custom properties** (`--bulma-*`, see [Bulma CSS variables](https://bulma.io/documentation/features/css-variables/)) on the **host element**, a parent wrapper, or higher in the cascade. Those variables typically flow into **shadow DOM** content. Prefer **`--bulma-*`** (and any **component-documented** custom properties) over unrelated ad-hoc rules. Each component section below may list extra **CSS variables** and **`::part(...)`** names when exposed.
11
11
  3. **Shadow DOM** — Most hosts attach a **shadow root**. Style via inherited **variables** and documented **`::part(...)`** selectors; listen for **`CustomEvent`** on the host for outputs described in each section.
12
12
  4. **Reading the entries** — Sections may use tables or TypeScript-like snippets for props and events; treat those as the **public contract** for that tag.
13
13
 
@@ -30,7 +30,7 @@ Human-readable event names and examples still appear in each component’s READM
30
30
  1. Same manifest entry; open `definitions.component` (JSON Schema for the `Component` TypeScript interface).
31
31
  2. Locate `definitions.component.definitions.Component` (or the object referenced by the root `$ref` for `Component`).
32
32
  3. Under **`properties`**, each key is a **prop name as in TypeScript** (often **camelCase**). The schema gives `type`, `enum`, `items` (arrays), and `$ref` to shared shapes (`ICompany`, `IColumn`, …) in the same document’s `definitions` map.
33
- 4. For **HTML markup**, this library documents **attribute names** in each README (usually **snake_case** on the host, **string** values, with objects/arrays as **JSON strings**). When the schema uses camelCase (`companyName`) and the README shows a snake_case attribute (`disable_expanding_small`), **follow the README for attribute names** and use the schema for **structure and types** of JSON-valued props (e.g. shape of `company`).
33
+ 4. For **HTML markup**, this library documents **attribute names** in each README (**snake_case** on the host). **All attribute values are strings**: numbers as string digits, booleans as **`yes`/`no`**, objects/arrays as **JSON strings** (or another encoding only if that README says so). When the schema uses camelCase (`companyName`) and the README shows a snake_case attribute (`disable_expanding_small`), **follow the README for attribute names** and use the schema for **structure and types** inside JSON-valued props (e.g. shape of `company`).
34
34
 
35
35
  Cross-check: README table (authoritative for attributes) + `definitions.component` (authoritative for JSON types and nesting).
36
36
 
@@ -52,107 +52,107 @@ Every published **`@htmlbricks/hb-<folder>`** tarball includes a **`types/`** fo
52
52
  ### Table of contents — how to use this with LLMs
53
53
 
54
54
  - The **full text** of each component’s `README.md` is **included later in this same document**, under an HTML anchor `id="wc-<folder>"` (Markdown link: `#wc-<folder>`).
55
- - The **jsDelivr** URL is the **canonical** `README.md` from npm (`@htmlbricks/hb-<folder>` at version **0.66.27**). The prose merged **below this TOC** is the **same document body** (duplicate for single-file reading).
55
+ - The **jsDelivr** URL is the **canonical** `README.md` from npm (`@htmlbricks/hb-<folder>` at version **0.67.0**). The prose merged **below this TOC** is the **same document body** (duplicate for single-file reading).
56
56
  - When answering **from this file only**, use the **in-document** link (`#wc-…`) so the model stays in one context. Use the **jsDelivr** link when you need the standalone README URL (e.g. fetching from the CDN).
57
57
 
58
58
  ## Table of contents
59
59
 
60
60
  Each line lists: **tag — folder**, then **canonical README (npm/jsDelivr)**, then **same content inside this file**.
61
61
 
62
- - **`hb-area-code` — `area-code`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-area-code@0.66.27/README.md) · [same text in this document](#wc-area-code)
63
- - **`hb-auth` — `auth`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-auth@0.66.27/README.md) · [same text in this document](#wc-auth)
64
- - **`hb-auth-social-login-button` — `auth-social-login-button`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-auth-social-login-button@0.66.27/README.md) · [same text in this document](#wc-auth-social-login-button)
65
- - **`hb-banner` — `banner`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-banner@0.66.27/README.md) · [same text in this document](#wc-banner)
66
- - **`hb-calendar-appointments` — `calendar-appointments`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-calendar-appointments@0.66.27/README.md) · [same text in this document](#wc-calendar-appointments)
67
- - **`hb-calendar-events` — `calendar-events`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-calendar-events@0.66.27/README.md) · [same text in this document](#wc-calendar-events)
68
- - **`hb-captcha-google-recaptcha-v2-invisible` — `captcha-google-recaptcha-v2-invisible`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-captcha-google-recaptcha-v2-invisible@0.66.27/README.md) · [same text in this document](#wc-captcha-google-recaptcha-v2-invisible)
69
- - **`hb-card-video` — `card-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-card-video@0.66.27/README.md) · [same text in this document](#wc-card-video)
70
- - **`hb-chartjs` — `chartjs`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-chartjs@0.66.27/README.md) · [same text in this document](#wc-chartjs)
71
- - **`hb-checkout` — `checkout`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-checkout@0.66.27/README.md) · [same text in this document](#wc-checkout)
72
- - **`hb-checkout-shopping-cart` — `checkout-shopping-cart`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-checkout-shopping-cart@0.66.27/README.md) · [same text in this document](#wc-checkout-shopping-cart)
73
- - **`hb-contact-card` — `contact-card`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-contact-card@0.66.27/README.md) · [same text in this document](#wc-contact-card)
74
- - **`hb-contact-item` — `contact-item`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-contact-item@0.66.27/README.md) · [same text in this document](#wc-contact-item)
75
- - **`hb-cookie-law-banner` — `cookie-law-banner`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-cookie-law-banner@0.66.27/README.md) · [same text in this document](#wc-cookie-law-banner)
76
- - **`hb-dashboard-card1` — `dashboard-card1`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dashboard-card1@0.66.27/README.md) · [same text in this document](#wc-dashboard-card1)
77
- - **`hb-dashboard-counter-lines` — `dashboard-counter-lines`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dashboard-counter-lines@0.66.27/README.md) · [same text in this document](#wc-dashboard-counter-lines)
78
- - **`hb-dashboard-indicator` — `dashboard-indicator`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dashboard-indicator@0.66.27/README.md) · [same text in this document](#wc-dashboard-indicator)
79
- - **`hb-dialog` — `dialog`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dialog@0.66.27/README.md) · [same text in this document](#wc-dialog)
80
- - **`hb-dialog-loader` — `dialog-loader`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dialog-loader@0.66.27/README.md) · [same text in this document](#wc-dialog-loader)
81
- - **`hb-dialogform` — `dialogform`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dialogform@0.66.27/README.md) · [same text in this document](#wc-dialogform)
82
- - **`hb-downloader` — `downloader`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-downloader@0.66.27/README.md) · [same text in this document](#wc-downloader)
83
- - **`hb-dropdown-notifications` — `dropdown-notifications`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dropdown-notifications@0.66.27/README.md) · [same text in this document](#wc-dropdown-notifications)
84
- - **`hb-dropdown-simple` — `dropdown-simple`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dropdown-simple@0.66.27/README.md) · [same text in this document](#wc-dropdown-simple)
85
- - **`hb-editor-video` — `editor-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-editor-video@0.66.27/README.md) · [same text in this document](#wc-editor-video)
86
- - **`hb-faq-component` — `faq-component`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-faq-component@0.66.27/README.md) · [same text in this document](#wc-faq-component)
87
- - **`hb-footer` — `footer`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-footer@0.66.27/README.md) · [same text in this document](#wc-footer)
88
- - **`hb-form` — `form`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-form@0.66.27/README.md) · [same text in this document](#wc-form)
89
- - **`hb-form-composer` — `form-composer`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-form-composer@0.66.27/README.md) · [same text in this document](#wc-form-composer)
90
- - **`hb-form-contact` — `form-contact`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-form-contact@0.66.27/README.md) · [same text in this document](#wc-form-contact)
91
- - **`hb-funnel` — `funnel`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-funnel@0.66.27/README.md) · [same text in this document](#wc-funnel)
92
- - **`hb-gallery-video` — `gallery-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-gallery-video@0.66.27/README.md) · [same text in this document](#wc-gallery-video)
93
- - **`hb-gauge` — `gauge`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-gauge@0.66.27/README.md) · [same text in this document](#wc-gauge)
94
- - **`hb-input-area` — `input-area`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-area@0.66.27/README.md) · [same text in this document](#wc-input-area)
95
- - **`hb-input-array-objects` — `input-array-objects`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-array-objects@0.66.27/README.md) · [same text in this document](#wc-input-array-objects)
96
- - **`hb-input-array-tags` — `input-array-tags`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-array-tags@0.66.27/README.md) · [same text in this document](#wc-input-array-tags)
97
- - **`hb-input-checkbox` — `input-checkbox`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-checkbox@0.66.27/README.md) · [same text in this document](#wc-input-checkbox)
98
- - **`hb-input-color` — `input-color`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-color@0.66.27/README.md) · [same text in this document](#wc-input-color)
99
- - **`hb-input-coords` — `input-coords`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-coords@0.66.27/README.md) · [same text in this document](#wc-input-coords)
100
- - **`hb-input-date` — `input-date`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-date@0.66.27/README.md) · [same text in this document](#wc-input-date)
101
- - **`hb-input-datetime` — `input-datetime`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-datetime@0.66.27/README.md) · [same text in this document](#wc-input-datetime)
102
- - **`hb-input-email` — `input-email`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-email@0.66.27/README.md) · [same text in this document](#wc-input-email)
103
- - **`hb-input-file` — `input-file`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-file@0.66.27/README.md) · [same text in this document](#wc-input-file)
104
- - **`hb-input-number` — `input-number`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-number@0.66.27/README.md) · [same text in this document](#wc-input-number)
105
- - **`hb-input-radio` — `input-radio`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-radio@0.66.27/README.md) · [same text in this document](#wc-input-radio)
106
- - **`hb-input-range` — `input-range`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-range@0.66.27/README.md) · [same text in this document](#wc-input-range)
107
- - **`hb-input-select` — `input-select`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-select@0.66.27/README.md) · [same text in this document](#wc-input-select)
108
- - **`hb-input-text` — `input-text`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-text@0.66.27/README.md) · [same text in this document](#wc-input-text)
109
- - **`hb-json-viewer` — `json-viewer`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-json-viewer@0.66.27/README.md) · [same text in this document](#wc-json-viewer)
110
- - **`hb-layout` — `layout`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-layout@0.66.27/README.md) · [same text in this document](#wc-layout)
111
- - **`hb-layout-desktop` — `layout-desktop`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-layout-desktop@0.66.27/README.md) · [same text in this document](#wc-layout-desktop)
112
- - **`hb-layout-mobile` — `layout-mobile`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-layout-mobile@0.66.27/README.md) · [same text in this document](#wc-layout-mobile)
113
- - **`hb-map` — `map`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-map@0.66.27/README.md) · [same text in this document](#wc-map)
114
- - **`hb-markdown-viewer` — `markdown-viewer`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-markdown-viewer@0.66.27/README.md) · [same text in this document](#wc-markdown-viewer)
115
- - **`hb-matrix-video` — `matrix-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-matrix-video@0.66.27/README.md) · [same text in this document](#wc-matrix-video)
116
- - **`hb-messages-box` — `messages-box`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-messages-box@0.66.27/README.md) · [same text in this document](#wc-messages-box)
117
- - **`hb-messages-list` — `messages-list`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-messages-list@0.66.27/README.md) · [same text in this document](#wc-messages-list)
118
- - **`hb-messages-send` — `messages-send`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-messages-send@0.66.27/README.md) · [same text in this document](#wc-messages-send)
119
- - **`hb-messages-topics-card` — `messages-topics-card`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-messages-topics-card@0.66.27/README.md) · [same text in this document](#wc-messages-topics-card)
120
- - **`hb-modal-video` — `modal-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-modal-video@0.66.27/README.md) · [same text in this document](#wc-modal-video)
121
- - **`hb-navbar` — `navbar`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-navbar@0.66.27/README.md) · [same text in this document](#wc-navbar)
122
- - **`hb-offcanvas` — `offcanvas`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-offcanvas@0.66.27/README.md) · [same text in this document](#wc-offcanvas)
123
- - **`hb-order-list` — `order-list`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-order-list@0.66.27/README.md) · [same text in this document](#wc-order-list)
124
- - **`hb-pad-joystick` — `pad-joystick`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-pad-joystick@0.66.27/README.md) · [same text in this document](#wc-pad-joystick)
125
- - **`hb-page-checkout` — `page-checkout`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-page-checkout@0.66.27/README.md) · [same text in this document](#wc-page-checkout)
126
- - **`hb-page-invoice` — `page-invoice`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-page-invoice@0.66.27/README.md) · [same text in this document](#wc-page-invoice)
127
- - **`hb-paginate` — `paginate`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-paginate@0.66.27/README.md) · [same text in this document](#wc-paginate)
128
- - **`hb-paragraps-around-image` — `paragraps-around-image`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-paragraps-around-image@0.66.27/README.md) · [same text in this document](#wc-paragraps-around-image)
129
- - **`hb-paragraps-around-image-cell` — `paragraps-around-image-cell`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-paragraps-around-image-cell@0.66.27/README.md) · [same text in this document](#wc-paragraps-around-image-cell)
130
- - **`hb-payment-paypal` — `payment-paypal`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-payment-paypal@0.66.27/README.md) · [same text in this document](#wc-payment-paypal)
131
- - **`hb-player-input-streaming` — `player-input-streaming`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-player-input-streaming@0.66.27/README.md) · [same text in this document](#wc-player-input-streaming)
132
- - **`hb-player-live` — `player-live`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-player-live@0.66.27/README.md) · [same text in this document](#wc-player-live)
133
- - **`hb-player-live-camera-ptz` — `player-live-camera-ptz`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-player-live-camera-ptz@0.66.27/README.md) · [same text in this document](#wc-player-live-camera-ptz)
134
- - **`hb-product-comparison` — `product-comparison`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-product-comparison@0.66.27/README.md) · [same text in this document](#wc-product-comparison)
135
- - **`hb-range-slider` — `range-slider`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-range-slider@0.66.27/README.md) · [same text in this document](#wc-range-slider)
136
- - **`hb-searchbar` — `searchbar`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-searchbar@0.66.27/README.md) · [same text in this document](#wc-searchbar)
137
- - **`hb-shop-item-cell` — `shop-item-cell`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-shop-item-cell@0.66.27/README.md) · [same text in this document](#wc-shop-item-cell)
138
- - **`hb-shop-item-row` — `shop-item-row`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-shop-item-row@0.66.27/README.md) · [same text in this document](#wc-shop-item-row)
139
- - **`hb-sidebar-cards-navigator` — `sidebar-cards-navigator`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-sidebar-cards-navigator@0.66.27/README.md) · [same text in this document](#wc-sidebar-cards-navigator)
140
- - **`hb-sidebar-desktop` — `sidebar-desktop`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-sidebar-desktop@0.66.27/README.md) · [same text in this document](#wc-sidebar-desktop)
141
- - **`hb-sidenav-button` — `sidenav-button`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-sidenav-button@0.66.27/README.md) · [same text in this document](#wc-sidenav-button)
142
- - **`hb-sidenav-link` — `sidenav-link`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-sidenav-link@0.66.27/README.md) · [same text in this document](#wc-sidenav-link)
143
- - **`hb-site-contacts-row` — `site-contacts-row`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-site-contacts-row@0.66.27/README.md) · [same text in this document](#wc-site-contacts-row)
144
- - **`hb-site-paragraph-with-image` — `site-paragraph-with-image`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-site-paragraph-with-image@0.66.27/README.md) · [same text in this document](#wc-site-paragraph-with-image)
145
- - **`hb-site-slideshow` — `site-slideshow`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-site-slideshow@0.66.27/README.md) · [same text in this document](#wc-site-slideshow)
146
- - **`hb-site-slideshow-horizontal` — `site-slideshow-horizontal`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-site-slideshow-horizontal@0.66.27/README.md) · [same text in this document](#wc-site-slideshow-horizontal)
147
- - **`hb-skeleton-component` — `skeleton-component`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-skeleton-component@0.66.27/README.md) · [same text in this document](#wc-skeleton-component)
148
- - **`hb-stylus-notebook` — `stylus-notebook`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-stylus-notebook@0.66.27/README.md) · [same text in this document](#wc-stylus-notebook)
149
- - **`hb-stylus-paper` — `stylus-paper`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-stylus-paper@0.66.27/README.md) · [same text in this document](#wc-stylus-paper)
150
- - **`hb-table` — `table`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-table@0.66.27/README.md) · [same text in this document](#wc-table)
151
- - **`hb-terms-doc-templates` — `terms-doc-templates`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-terms-doc-templates@0.66.27/README.md) · [same text in this document](#wc-terms-doc-templates)
152
- - **`hb-toast` — `toast`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-toast@0.66.27/README.md) · [same text in this document](#wc-toast)
153
- - **`hb-tooltip` — `tooltip`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-tooltip@0.66.27/README.md) · [same text in this document](#wc-tooltip)
154
- - **`hb-uploader` — `uploader`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-uploader@0.66.27/README.md) · [same text in this document](#wc-uploader)
155
- - **`hb-vertical-img-txt-archive` — `vertical-img-txt-archive`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-vertical-img-txt-archive@0.66.27/README.md) · [same text in this document](#wc-vertical-img-txt-archive)
62
+ - **`hb-area-code` — `area-code`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-area-code@0.67.0/README.md) · [same text in this document](#wc-area-code)
63
+ - **`hb-auth` — `auth`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-auth@0.67.0/README.md) · [same text in this document](#wc-auth)
64
+ - **`hb-auth-social-login-button` — `auth-social-login-button`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-auth-social-login-button@0.67.0/README.md) · [same text in this document](#wc-auth-social-login-button)
65
+ - **`hb-banner` — `banner`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-banner@0.67.0/README.md) · [same text in this document](#wc-banner)
66
+ - **`hb-calendar-appointments` — `calendar-appointments`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-calendar-appointments@0.67.0/README.md) · [same text in this document](#wc-calendar-appointments)
67
+ - **`hb-calendar-events` — `calendar-events`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-calendar-events@0.67.0/README.md) · [same text in this document](#wc-calendar-events)
68
+ - **`hb-captcha-google-recaptcha-v2-invisible` — `captcha-google-recaptcha-v2-invisible`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-captcha-google-recaptcha-v2-invisible@0.67.0/README.md) · [same text in this document](#wc-captcha-google-recaptcha-v2-invisible)
69
+ - **`hb-card-video` — `card-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-card-video@0.67.0/README.md) · [same text in this document](#wc-card-video)
70
+ - **`hb-chartjs` — `chartjs`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-chartjs@0.67.0/README.md) · [same text in this document](#wc-chartjs)
71
+ - **`hb-checkout` — `checkout`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-checkout@0.67.0/README.md) · [same text in this document](#wc-checkout)
72
+ - **`hb-checkout-shopping-cart` — `checkout-shopping-cart`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-checkout-shopping-cart@0.67.0/README.md) · [same text in this document](#wc-checkout-shopping-cart)
73
+ - **`hb-contact-card` — `contact-card`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-contact-card@0.67.0/README.md) · [same text in this document](#wc-contact-card)
74
+ - **`hb-contact-item` — `contact-item`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-contact-item@0.67.0/README.md) · [same text in this document](#wc-contact-item)
75
+ - **`hb-cookie-law-banner` — `cookie-law-banner`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-cookie-law-banner@0.67.0/README.md) · [same text in this document](#wc-cookie-law-banner)
76
+ - **`hb-dashboard-card1` — `dashboard-card1`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dashboard-card1@0.67.0/README.md) · [same text in this document](#wc-dashboard-card1)
77
+ - **`hb-dashboard-counter-lines` — `dashboard-counter-lines`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dashboard-counter-lines@0.67.0/README.md) · [same text in this document](#wc-dashboard-counter-lines)
78
+ - **`hb-dashboard-indicator` — `dashboard-indicator`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dashboard-indicator@0.67.0/README.md) · [same text in this document](#wc-dashboard-indicator)
79
+ - **`hb-dialog` — `dialog`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dialog@0.67.0/README.md) · [same text in this document](#wc-dialog)
80
+ - **`hb-dialog-loader` — `dialog-loader`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dialog-loader@0.67.0/README.md) · [same text in this document](#wc-dialog-loader)
81
+ - **`hb-dialogform` — `dialogform`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dialogform@0.67.0/README.md) · [same text in this document](#wc-dialogform)
82
+ - **`hb-downloader` — `downloader`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-downloader@0.67.0/README.md) · [same text in this document](#wc-downloader)
83
+ - **`hb-dropdown-notifications` — `dropdown-notifications`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dropdown-notifications@0.67.0/README.md) · [same text in this document](#wc-dropdown-notifications)
84
+ - **`hb-dropdown-simple` — `dropdown-simple`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dropdown-simple@0.67.0/README.md) · [same text in this document](#wc-dropdown-simple)
85
+ - **`hb-editor-video` — `editor-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-editor-video@0.67.0/README.md) · [same text in this document](#wc-editor-video)
86
+ - **`hb-faq-component` — `faq-component`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-faq-component@0.67.0/README.md) · [same text in this document](#wc-faq-component)
87
+ - **`hb-footer` — `footer`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-footer@0.67.0/README.md) · [same text in this document](#wc-footer)
88
+ - **`hb-form` — `form`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-form@0.67.0/README.md) · [same text in this document](#wc-form)
89
+ - **`hb-form-composer` — `form-composer`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-form-composer@0.67.0/README.md) · [same text in this document](#wc-form-composer)
90
+ - **`hb-form-contact` — `form-contact`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-form-contact@0.67.0/README.md) · [same text in this document](#wc-form-contact)
91
+ - **`hb-funnel` — `funnel`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-funnel@0.67.0/README.md) · [same text in this document](#wc-funnel)
92
+ - **`hb-gallery-video` — `gallery-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-gallery-video@0.67.0/README.md) · [same text in this document](#wc-gallery-video)
93
+ - **`hb-gauge` — `gauge`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-gauge@0.67.0/README.md) · [same text in this document](#wc-gauge)
94
+ - **`hb-input-area` — `input-area`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-area@0.67.0/README.md) · [same text in this document](#wc-input-area)
95
+ - **`hb-input-array-objects` — `input-array-objects`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-array-objects@0.67.0/README.md) · [same text in this document](#wc-input-array-objects)
96
+ - **`hb-input-array-tags` — `input-array-tags`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-array-tags@0.67.0/README.md) · [same text in this document](#wc-input-array-tags)
97
+ - **`hb-input-checkbox` — `input-checkbox`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-checkbox@0.67.0/README.md) · [same text in this document](#wc-input-checkbox)
98
+ - **`hb-input-color` — `input-color`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-color@0.67.0/README.md) · [same text in this document](#wc-input-color)
99
+ - **`hb-input-coords` — `input-coords`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-coords@0.67.0/README.md) · [same text in this document](#wc-input-coords)
100
+ - **`hb-input-date` — `input-date`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-date@0.67.0/README.md) · [same text in this document](#wc-input-date)
101
+ - **`hb-input-datetime` — `input-datetime`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-datetime@0.67.0/README.md) · [same text in this document](#wc-input-datetime)
102
+ - **`hb-input-email` — `input-email`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-email@0.67.0/README.md) · [same text in this document](#wc-input-email)
103
+ - **`hb-input-file` — `input-file`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-file@0.67.0/README.md) · [same text in this document](#wc-input-file)
104
+ - **`hb-input-number` — `input-number`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-number@0.67.0/README.md) · [same text in this document](#wc-input-number)
105
+ - **`hb-input-radio` — `input-radio`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-radio@0.67.0/README.md) · [same text in this document](#wc-input-radio)
106
+ - **`hb-input-range` — `input-range`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-range@0.67.0/README.md) · [same text in this document](#wc-input-range)
107
+ - **`hb-input-select` — `input-select`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-select@0.67.0/README.md) · [same text in this document](#wc-input-select)
108
+ - **`hb-input-text` — `input-text`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-text@0.67.0/README.md) · [same text in this document](#wc-input-text)
109
+ - **`hb-json-viewer` — `json-viewer`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-json-viewer@0.67.0/README.md) · [same text in this document](#wc-json-viewer)
110
+ - **`hb-layout` — `layout`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-layout@0.67.0/README.md) · [same text in this document](#wc-layout)
111
+ - **`hb-layout-desktop` — `layout-desktop`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-layout-desktop@0.67.0/README.md) · [same text in this document](#wc-layout-desktop)
112
+ - **`hb-layout-mobile` — `layout-mobile`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-layout-mobile@0.67.0/README.md) · [same text in this document](#wc-layout-mobile)
113
+ - **`hb-map` — `map`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-map@0.67.0/README.md) · [same text in this document](#wc-map)
114
+ - **`hb-markdown-viewer` — `markdown-viewer`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-markdown-viewer@0.67.0/README.md) · [same text in this document](#wc-markdown-viewer)
115
+ - **`hb-matrix-video` — `matrix-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-matrix-video@0.67.0/README.md) · [same text in this document](#wc-matrix-video)
116
+ - **`hb-messages-box` — `messages-box`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-messages-box@0.67.0/README.md) · [same text in this document](#wc-messages-box)
117
+ - **`hb-messages-list` — `messages-list`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-messages-list@0.67.0/README.md) · [same text in this document](#wc-messages-list)
118
+ - **`hb-messages-send` — `messages-send`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-messages-send@0.67.0/README.md) · [same text in this document](#wc-messages-send)
119
+ - **`hb-messages-topics-card` — `messages-topics-card`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-messages-topics-card@0.67.0/README.md) · [same text in this document](#wc-messages-topics-card)
120
+ - **`hb-modal-video` — `modal-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-modal-video@0.67.0/README.md) · [same text in this document](#wc-modal-video)
121
+ - **`hb-navbar` — `navbar`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-navbar@0.67.0/README.md) · [same text in this document](#wc-navbar)
122
+ - **`hb-offcanvas` — `offcanvas`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-offcanvas@0.67.0/README.md) · [same text in this document](#wc-offcanvas)
123
+ - **`hb-order-list` — `order-list`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-order-list@0.67.0/README.md) · [same text in this document](#wc-order-list)
124
+ - **`hb-pad-joystick` — `pad-joystick`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-pad-joystick@0.67.0/README.md) · [same text in this document](#wc-pad-joystick)
125
+ - **`hb-page-checkout` — `page-checkout`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-page-checkout@0.67.0/README.md) · [same text in this document](#wc-page-checkout)
126
+ - **`hb-page-invoice` — `page-invoice`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-page-invoice@0.67.0/README.md) · [same text in this document](#wc-page-invoice)
127
+ - **`hb-paginate` — `paginate`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-paginate@0.67.0/README.md) · [same text in this document](#wc-paginate)
128
+ - **`hb-paragraps-around-image` — `paragraps-around-image`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-paragraps-around-image@0.67.0/README.md) · [same text in this document](#wc-paragraps-around-image)
129
+ - **`hb-paragraps-around-image-cell` — `paragraps-around-image-cell`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-paragraps-around-image-cell@0.67.0/README.md) · [same text in this document](#wc-paragraps-around-image-cell)
130
+ - **`hb-payment-paypal` — `payment-paypal`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-payment-paypal@0.67.0/README.md) · [same text in this document](#wc-payment-paypal)
131
+ - **`hb-player-input-streaming` — `player-input-streaming`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-player-input-streaming@0.67.0/README.md) · [same text in this document](#wc-player-input-streaming)
132
+ - **`hb-player-live` — `player-live`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-player-live@0.67.0/README.md) · [same text in this document](#wc-player-live)
133
+ - **`hb-player-live-camera-ptz` — `player-live-camera-ptz`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-player-live-camera-ptz@0.67.0/README.md) · [same text in this document](#wc-player-live-camera-ptz)
134
+ - **`hb-product-comparison` — `product-comparison`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-product-comparison@0.67.0/README.md) · [same text in this document](#wc-product-comparison)
135
+ - **`hb-range-slider` — `range-slider`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-range-slider@0.67.0/README.md) · [same text in this document](#wc-range-slider)
136
+ - **`hb-searchbar` — `searchbar`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-searchbar@0.67.0/README.md) · [same text in this document](#wc-searchbar)
137
+ - **`hb-shop-item-cell` — `shop-item-cell`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-shop-item-cell@0.67.0/README.md) · [same text in this document](#wc-shop-item-cell)
138
+ - **`hb-shop-item-row` — `shop-item-row`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-shop-item-row@0.67.0/README.md) · [same text in this document](#wc-shop-item-row)
139
+ - **`hb-sidebar-cards-navigator` — `sidebar-cards-navigator`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-sidebar-cards-navigator@0.67.0/README.md) · [same text in this document](#wc-sidebar-cards-navigator)
140
+ - **`hb-sidebar-desktop` — `sidebar-desktop`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-sidebar-desktop@0.67.0/README.md) · [same text in this document](#wc-sidebar-desktop)
141
+ - **`hb-sidenav-button` — `sidenav-button`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-sidenav-button@0.67.0/README.md) · [same text in this document](#wc-sidenav-button)
142
+ - **`hb-sidenav-link` — `sidenav-link`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-sidenav-link@0.67.0/README.md) · [same text in this document](#wc-sidenav-link)
143
+ - **`hb-site-contacts-row` — `site-contacts-row`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-site-contacts-row@0.67.0/README.md) · [same text in this document](#wc-site-contacts-row)
144
+ - **`hb-site-paragraph-with-image` — `site-paragraph-with-image`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-site-paragraph-with-image@0.67.0/README.md) · [same text in this document](#wc-site-paragraph-with-image)
145
+ - **`hb-site-slideshow` — `site-slideshow`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-site-slideshow@0.67.0/README.md) · [same text in this document](#wc-site-slideshow)
146
+ - **`hb-site-slideshow-horizontal` — `site-slideshow-horizontal`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-site-slideshow-horizontal@0.67.0/README.md) · [same text in this document](#wc-site-slideshow-horizontal)
147
+ - **`hb-skeleton-component` — `skeleton-component`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-skeleton-component@0.67.0/README.md) · [same text in this document](#wc-skeleton-component)
148
+ - **`hb-stylus-notebook` — `stylus-notebook`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-stylus-notebook@0.67.0/README.md) · [same text in this document](#wc-stylus-notebook)
149
+ - **`hb-stylus-paper` — `stylus-paper`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-stylus-paper@0.67.0/README.md) · [same text in this document](#wc-stylus-paper)
150
+ - **`hb-table` — `table`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-table@0.67.0/README.md) · [same text in this document](#wc-table)
151
+ - **`hb-terms-doc-templates` — `terms-doc-templates`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-terms-doc-templates@0.67.0/README.md) · [same text in this document](#wc-terms-doc-templates)
152
+ - **`hb-toast` — `toast`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-toast@0.67.0/README.md) · [same text in this document](#wc-toast)
153
+ - **`hb-tooltip` — `tooltip`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-tooltip@0.67.0/README.md) · [same text in this document](#wc-tooltip)
154
+ - **`hb-uploader` — `uploader`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-uploader@0.67.0/README.md) · [same text in this document](#wc-uploader)
155
+ - **`hb-vertical-img-txt-archive` — `vertical-img-txt-archive`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-vertical-img-txt-archive@0.67.0/README.md) · [same text in this document](#wc-vertical-img-txt-archive)
156
156
 
157
157
  ---
158
158
 
@@ -255,7 +255,7 @@ Full authentication UI driven by the `type` attribute: local login and registrat
255
255
 
256
256
  ### Usage notes
257
257
 
258
- - Built with Bootstrap 5 variables (`--bs-*` in style setup).
258
+ - Built with Bulma 1 (Sass) inside the shadow root; theme variables apply on `:host`.
259
259
  - Uses bootstrap-icons where the UI shows icons.
260
260
  - Shadow DOM: slot `header` for custom branding; social buttons are composed internally.
261
261
  - Set `i18nlang` for Italian or English strings where supported.
@@ -333,7 +333,7 @@ Clickable OAuth provider tile (default SVGs for Google, GitHub, GitLab, Facebook
333
333
 
334
334
  ### What it does
335
335
 
336
- Marketing-style hero strip: logo image beside a title and subtitle, using Bootstrap grid. Layout switches from side-by-side on large screens to stacked, centered content on smaller breakpoints.
336
+ Marketing-style hero strip: logo image beside a title and subtitle, using **Bulma** `container is-fluid`, `columns`, and `title` / `subtitle`. Desktop layout uses `is-hidden-touch`; compact layout uses `is-hidden-desktop`.
337
337
 
338
338
  ### Custom element
339
339
 
@@ -357,8 +357,8 @@ None declared in types (`Events` is an empty object).
357
357
 
358
358
  ### Usage notes
359
359
 
360
- - Relies on Bootstrap 5 grid and responsive display utilities (`d-none`, `d-lg-block`, etc.).
361
- - Use bootstrap-icons only if you extend the component; this banner is primarily image + text.
360
+ - Relies on Bulma grid, visibility helpers (`is-hidden-touch`, `is-hidden-desktop`), and typography helpers (`has-text-right`, `has-text-centered`).
361
+ - Icons are not bundled; extend the markup if you need icon fonts.
362
362
  - Shadow DOM keeps typography/spacing internal unless slotted content is added in implementation.
363
363
  - No i18n in `docs.ts`.
364
364
 
@@ -528,7 +528,7 @@ Loads the Google reCAPTCHA v2 invisible SDK, renders the widget with your `api_k
528
528
 
529
529
  ### What it does
530
530
 
531
- Bootstrap card with a 16:9 media area: YouTube embed when `provider` is `youtube`, otherwise an HTML5 `<video>` with MP4 source. Optional title, truncated description, formatted `time` via Day.js (`dateformat`), “read more” link label, and social share placeholders when `pageuri` is set.
531
+ **Bulma** `card` with a 16:9 `image` frame: YouTube embed when `provider` is `youtube`, otherwise an HTML5 `<video>` with MP4 source. Optional title, truncated description, formatted `time` via Day.js (`dateformat`), “read more” `button is-primary`, and social share placeholders when `pageuri` is set. Bootstrap Icons for the clock in the footer.
532
532
 
533
533
  ### Custom element
534
534
 
@@ -557,7 +557,7 @@ None declared in types (`Events` is an empty object).
557
557
 
558
558
  ### Usage notes
559
559
 
560
- - Card layout follows Bootstrap card patterns.
560
+ - Card layout follows Bulma `card` / `card-image` / `card-content` / `card-footer` patterns.
561
561
  - YouTube vs file video is selected only via `provider`; ensure `videosrc` matches the mode.
562
562
  - Shadow DOM contains the player and share UI; slot `card-footer` extends the card.
563
563
  - No i18n in `docs.ts`.
@@ -647,7 +647,7 @@ End-to-end checkout flow: editable billing/shipping user profile (`hb-form`), sh
647
647
  | `payment` | object (required) | JSON `IPayment`: merchantName, total, currencyCode, countryCode, type?, shipmentFee?. |
648
648
  | `completed` | union (optional) | `"yes"` \| `"no"` — controls summary vs edit flow. |
649
649
 
650
- **CSS vars:** `--edit-color`, `--paypal-button-color`, `--hb-heckout-border`, plus Bootstrap `--bs-*`. **Parts:** `title`, `subtitle`. **Slots:** `payment_terms`, `payment_completed`, `userinfo`, `title`.
650
+ **CSS vars:** `--edit-color`, `--paypal-button-color`, `--hb-checkout-border`, Bulma `--bulma-*` (see `extra/docs.ts`). **Parts:** `title`, `subtitle`. **Slots:** `payment_terms`, `payment_completed`, `userinfo`, `title`.
651
651
 
652
652
  ### Events (`CustomEvent` names)
653
653
 
@@ -658,7 +658,11 @@ End-to-end checkout flow: editable billing/shipping user profile (`hb-form`), sh
658
658
 
659
659
  ### Usage notes
660
660
 
661
- - Heavy use of Bootstrap 5 variables for chrome and buttons.
661
+ ### Styling (Bulma)
662
+
663
+ Chrome uses **Bulma** `button`, `title`, and `subtitle`. Theme on `:host` via Bulma’s CSS variables; set **`--bulma-*`** (and optional `--edit-color`) from the page. **Bootstrap Icons** load from `<svelte:head>` for delivery/payment icons.
664
+
665
+ - Nested `hb-form` / payment elements carry their own shadow styles.
662
666
  - Nested web components (`hb-form`, payment elements) live inside the flow.
663
667
  - Large JSON props are typical; validate shapes before setting attributes.
664
668
  - No i18n array in `docs.ts` for this component.
@@ -699,7 +703,11 @@ Order summary built on `hb-table`: maps `payment.items` into rows (name, quantit
699
703
  | `payment` | object (required) | JSON `IShoppingPayment`: countryCode `IT` \| `US` \| `EU`, currencySymbol?, shipmentFee?, items: `IShopItem[]` (id, name, unitaryPrice, taxPercentage, quantity?, unit?). |
700
704
  | `completed` | union (optional) | `"yes"` \| `"no"` — order-placed compact UI when enabled. |
701
705
 
702
- **CSS vars:** `--hb-checkout-border`, Bootstrap `--bs-*`. No slots or parts in metadata.
706
+ **CSS vars:** `--hb-checkout-border`, Bulma `--bulma-*` (see `extra/docs.ts`). No slots or parts in metadata.
707
+
708
+ ### Styling (Bulma)
709
+
710
+ Uses **Bulma** `container`, `columns` / `column`, and `title`. Theme tokens on `:host`; override with **`--bulma-*`**. **Bootstrap Icons** load from `<svelte:head>` for the cart icon.
703
711
 
704
712
  ### Events (`CustomEvent` names)
705
713
 
@@ -707,7 +715,7 @@ None declared in types (`Events` is an empty object).
707
715
 
708
716
  ### Usage notes
709
717
 
710
- - Styling follows Bootstrap 5 palette via shared variables.
718
+ - Styling uses Bulma theme variables on `:host` (`--bulma-*`); see `extra/docs.ts`.
711
719
  - Depends on `hb-table` internally for row layout.
712
720
  - Shadow DOM encapsulates the table presentation.
713
721
  - No i18n in `docs.ts`.
@@ -731,7 +739,7 @@ None declared in types (`Events` is an empty object).
731
739
 
732
740
  ### What it does
733
741
 
734
- A comprehensive contact card: personal, contact, company, and social information in a Bootstrap-styled card. Uses one `data` object with structured arrays for phones, addresses, and social profiles. Features include avatar placeholder, clickable contact rows, social links, collapsible sections, and an actions dropdown with grouping, badges, and links.
742
+ A comprehensive contact card: personal, contact, company, and social information in a Bulma-styled card. Uses one `data` object with structured arrays for phones, addresses, and social profiles. Features include avatar placeholder, clickable contact rows, social links, collapsible sections, and an actions dropdown with grouping, badges, and links.
735
743
 
736
744
  ### Custom element
737
745
 
@@ -765,7 +773,7 @@ A comprehensive contact card: personal, contact, company, and social information
765
773
 
766
774
  ### Usage notes
767
775
 
768
- - Colors mirror Bootstrap 5 semantic tokens via custom properties.
776
+ - Colors use custom properties aligned with the card skin; Bulma theme variables apply on `:host`.
769
777
  - Icons use bootstrap-icons for contact and social affordances.
770
778
  - Shadow DOM exposes `::part()` hooks for card regions.
771
779
  - Set `i18nlang` for English or Italian strings.
@@ -892,7 +900,7 @@ Bootstrap alert cookie notice until the user accepts or declines; the choice is
892
900
 
893
901
  ### What it does
894
902
 
895
- Bootstrap card shell for dashboards: JSON `header` supplies optional Bootstrap Icon name, title label, and right-aligned badge; JSON `body` can remove inner padding with `noborder`. Slots let you inject markup (metadata lists `content`; description also references `header_content` for layout between header and body—confirm in implementation if both exist).
903
+ Bulma card shell for dashboards: JSON `header` supplies optional Bootstrap Icon name, title label, and right-aligned tag; JSON `body` can remove inner padding with `noborder`. Slots let you inject markup (`header_content`, `content`). Bootstrap Icons are loaded from the CDN in `svelte:head` for `bi` classes on the optional header icon.
896
904
 
897
905
  ### Custom element
898
906
 
@@ -907,16 +915,19 @@ Bootstrap card shell for dashboards: JSON `header` supplies optional Bootstrap I
907
915
  | `header` | object (optional) | JSON `{ icon?: string; label: string; badge?: string }`. |
908
916
  | `body` | object (optional) | JSON `{ noborder?: boolean }`. |
909
917
 
910
- **Bootstrap `--bs-*` theme vars.** **Parts:** `text_placeholder`, `badge`, `card`. **Slot (metadata):** `content`.
918
+ **Bulma `--bulma-*` theme vars** (see `extra/docs.ts`). **Parts:** `text_placeholder`, `badge`, `card`. **Slots:** `header_content`, `content`.
911
919
 
912
920
  ### Events (`CustomEvent` names)
913
921
 
914
922
  None declared in types (`Events` is an empty object).
915
923
 
924
+ ### Styling (Bulma)
925
+
926
+ The component uses Bulma `card`, `card-header`, `card-header-title`, `card-content`, and `tag`. Theme defaults are applied on `:host` via Bulma’s light theme and `setup-theme`. Override card look with public `--bulma-*` properties (for example `--bulma-card-background-color`, `--bulma-card-shadow`, `--bulma-card-header-color`). Bootstrap Icons remain a separate stylesheet for `header.icon`.
927
+
916
928
  ### Usage notes
917
929
 
918
- - Styling is Bootstrap 5–aligned via standard color variables.
919
- - `header.icon` should be a bootstrap-icons icon name string.
930
+ - `header.icon` should be a bootstrap-icons icon name string (without the `bi-` prefix).
920
931
  - Use `::part(card)` and related parts for host-level theming inside shadow root.
921
932
  - No i18n in `docs.ts`.
922
933
 
@@ -939,7 +950,17 @@ None declared in types (`Events` is an empty object).
939
950
 
940
951
  ### What it does
941
952
 
942
- Vertical list of metric rows from JSON `lines`: each row shows optional Bootstrap Icon, label text, and a secondary badge value. `link.type` chooses behavior—open URI in a new tab, same-window navigation, custom `counterClick` event with a key, or a static row with no click handler.
953
+ Vertical list of metric rows from JSON `lines`: each row shows optional Bootstrap Icon, label text, and a Bulma light rounded tag for the counter value. `link.type` chooses behavior—open URI in a new tab, same-window navigation, custom `counterClick` event with a key, or a static row with no click handler.
954
+
955
+ ### Styling (Bulma)
956
+
957
+ The component bundles **Bulma 1.x** in the shadow root: **`elements/tag`** only, with theme defaults on `:host` (`--bulma-hb-def-*`). Set public **`--bulma-*`** on `body` or `:root` so they inherit onto the host. Icons remain **Bootstrap Icons** (loaded via `<svelte:head>`); use icon names in the `icon` field. See [Bulma CSS variables](https://bulma.io/documentation/features/css-variables/).
958
+
959
+ **Shadow markup (simplified):**
960
+
961
+ - **`div.item`** — row; optional click for `tab` / `page` / `event` links.
962
+ - **`div.item_content`** / **`div.text`** — label + optional **`i.bi`**.
963
+ - **`div.value.tag.is-light.is-rounded`** — counter (exposed as part **`value`**).
943
964
 
944
965
  ### Custom element
945
966
 
@@ -953,7 +974,7 @@ Vertical list of metric rows from JSON `lines`: each row shows optional Bootstra
953
974
  | `style` | string (optional) | Inline style string. |
954
975
  | `lines` | array (optional) | JSON `Line[]`: text, value, link?: `{ type: "tab" \| "page" \| "event"; uri: string }`, index?, icon?. |
955
976
 
956
- **Bootstrap `--bs-*` vars.** **Parts:** `item`, `icon`, `text`, `value`. No slots.
977
+ **Parts:** `item`, `icon`, `text`, `value`. No slots.
957
978
 
958
979
  ### Events (`CustomEvent` names)
959
980
 
@@ -984,7 +1005,7 @@ Vertical list of metric rows from JSON `lines`: each row shows optional Bootstra
984
1005
 
985
1006
  ### What it does
986
1007
 
987
- Compact KPI tile: large `number`, caption `text`, and configurable Bootstrap Icon in a green panel. When `link_label` is set, a footer strip is shown and clicks dispatch `dashboardIndicatorClick` with the component `id`.
1008
+ Compact KPI tile: large `number`, caption `text`, configurable Bootstrap Icon, and `karma` accent from Bulma semantic colors. When `link_label` is set, a footer strip is shown and clicks dispatch `dashboardIndicatorClick` with the component `id`.
988
1009
 
989
1010
  ### Custom element
990
1011
 
@@ -1000,8 +1021,9 @@ Compact KPI tile: large `number`, caption `text`, and configurable Bootstrap Ico
1000
1021
  | `text` | string (optional) | Caption under the number. |
1001
1022
  | `icon` | string (required) | Bootstrap Icons name. |
1002
1023
  | `link_label` | string (optional) | If set, shows footer and enables click dispatch. |
1024
+ | `karma` | string (optional) | Accent: Bulma semantics `success`, `danger`, `warning`, `primary`, `secondary`, `info` (`secondary` uses Bulma’s `dark` palette), or `none` to use the host CSS variable below. Default `success`. |
1003
1025
 
1004
- **CSS var:** `--hb--dashboard-indicator-background`. No slots or parts in metadata.
1026
+ **CSS var (with `karma="none"`):** `--hb--dashboard-indicator-background` — header background and footer accent (any valid CSS color). If omitted while `karma` is `none`, falls back to Bulma `success`. With any other `karma`, this variable is ignored. No slots or parts in metadata.
1005
1027
 
1006
1028
  ### Events (`CustomEvent` names)
1007
1029
 
@@ -1009,7 +1031,7 @@ Compact KPI tile: large `number`, caption `text`, and configurable Bootstrap Ico
1009
1031
 
1010
1032
  ### Usage notes
1011
1033
 
1012
- - Default panel color is controlled by `--hb--dashboard-indicator-background` (green in defaults).
1034
+ - With Bulma `karma` values, accent comes from `--bulma-*` tokens on `:host`. With `karma="none"`, set `--hb--dashboard-indicator-background` on `hb-dashboard-indicator` (e.g. `style="--hb--dashboard-indicator-background: #6366f1"`).
1013
1035
  - Icon name must match bootstrap-icons.
1014
1036
  - Shadow DOM wraps the tile; pass `id` when using click events.
1015
1037
  - No i18n in `docs.ts`.
@@ -1023,6 +1045,19 @@ Compact KPI tile: large `number`, caption `text`, and configurable Bootstrap Ico
1023
1045
  text="Orders today"
1024
1046
  icon="cart-check"
1025
1047
  link_label="View details"
1048
+ karma="success"
1049
+ ></hb-dashboard-indicator>
1050
+ ```
1051
+
1052
+ ### Custom color (`karma="none"`)
1053
+
1054
+ ```html
1055
+ <hb-dashboard-indicator
1056
+ karma="none"
1057
+ style="--hb--dashboard-indicator-background: #6366f1"
1058
+ number="12"
1059
+ text="Custom"
1060
+ icon="stars"
1026
1061
  ></hb-dashboard-indicator>
1027
1062
  ```
1028
1063
 
@@ -1036,7 +1071,7 @@ Compact KPI tile: large `number`, caption `text`, and configurable Bootstrap Ico
1036
1071
 
1037
1072
  ### What it does
1038
1073
 
1039
- Bootstrap-styled modal controlled by string `show` (`yes`/`no`): fade transitions, optional backdrop click to close, Escape when `keyboard` is enabled, and `modal-open` on `document.body`. Slots replace title, body, footer, and button labels; default footer emits `modalConfirm` with `{ id, confirm }` and toggles visibility. Also emits `modalShow` when opened or closed.
1074
+ **Bulma**-styled modal controlled by string `show` (`yes`/`no`): optional backdrop click to close, Escape when `keyboard` is enabled, and `modal-open` on `document.body`. Slots replace title, body, footer, and button labels; default footer emits `modalConfirm` with `{ id, confirm }` and toggles visibility. Also emits `modalShow` when opened or closed.
1040
1075
 
1041
1076
  ### Custom element
1042
1077
 
@@ -1049,7 +1084,7 @@ Bootstrap-styled modal controlled by string `show` (`yes`/`no`): fade transition
1049
1084
  | `id` | string (optional) | Element identifier (included in events). |
1050
1085
  | `style` | string (optional) | Inline style string. |
1051
1086
  | `show` | union (optional) | `"yes"` \| `"no"` — visibility. |
1052
- | `confirm_btn_class` | string (optional) | Bootstrap button classes for confirm. |
1087
+ | `confirm_btn_class` | string (optional) | Bulma button color name for confirm (default `primary` → `is-primary`). |
1053
1088
  | `title` | string (optional) | Default title text if slot unused. |
1054
1089
  | `backdrop` | boolean (optional) | Show backdrop. |
1055
1090
  | `ignoreBackdrop` | boolean (optional) | Ignore backdrop interactions when true. |
@@ -1060,11 +1095,11 @@ Bootstrap-styled modal controlled by string `show` (`yes`/`no`): fade transition
1060
1095
  | `closelabel` | string (optional) | Close button label. |
1061
1096
  | `confirmlabel` | string (optional) | Confirm button label. |
1062
1097
  | `disable_confirm` | boolean (optional) | Disable confirm button. |
1063
- | `close_btn_class` | string (optional) | Classes for close button. |
1098
+ | `close_btn_class` | string (optional) | Bulma button color name for close (default `secondary` → `is-light` / mapped modifier). |
1064
1099
  | `hide_close` | boolean (optional) | Hide close control. |
1065
1100
  | `hide_confirm` | boolean (optional) | Hide confirm control. |
1066
1101
 
1067
- **CSS vars:** Bootstrap `--bs-*`, `--hb-modal-max-width`. **Part:** `modal-dialog`. **Slots:** `header`, `modal-footer`, `body-content`, `footer`, `close-button-label`, `confirm-button-label`.
1102
+ **CSS vars:** Bulma `--bulma-*`, `--hb-modal-max-width`; the host sets compact defaults for `--bulma-modal-card-head-padding`, `--bulma-modal-card-body-padding`, `--bulma-modal-card-title-size`, `--bulma-modal-card-title-line-height`, and `--bulma-modal-card-spacing` (override on the element or an ancestor to taste). **Part:** `modal-dialog`. **Slots:** `header`, `modal-footer`, `body-content`, `footer`, `close-button-label`, `confirm-button-label`.
1068
1103
 
1069
1104
  ### Events (`CustomEvent` names)
1070
1105
 
@@ -1073,8 +1108,8 @@ Bootstrap-styled modal controlled by string `show` (`yes`/`no`): fade transition
1073
1108
 
1074
1109
  ### Usage notes
1075
1110
 
1076
- - Full Bootstrap modal behavior patterns (body scroll lock, backdrop).
1077
- - bootstrap-icons may appear on buttons depending on implementation.
1111
+ - Modal behavior (body scroll lock, backdrop) matches typical overlay patterns.
1112
+ - Optional icons depend on implementation; load Bootstrap Icons if you add `bi-*` markup.
1078
1113
  - Teleports/focus live in shadow DOM; test accessibility with real browsers.
1079
1114
  - No i18n array in `docs.ts`.
1080
1115
 
@@ -1102,7 +1137,7 @@ Bootstrap-styled modal controlled by string `show` (`yes`/`no`): fade transition
1102
1137
 
1103
1138
  ### What it does
1104
1139
 
1105
- Thin wrapper around `hb-dialog` that opens automatically while numeric `percentage` is non-zero and shows a Bootstrap progress bar filled to that value. Forwards `modalShow` from the inner dialog; slots allow overriding the dialog title.
1140
+ Thin wrapper around `hb-dialog` that opens automatically while numeric `percentage` is non-zero and shows a **Bulma** `<progress class="progress">` filled to that value. Forwards `modalShow` from the inner dialog; slots allow overriding the dialog title.
1106
1141
 
1107
1142
  ### Custom element
1108
1143
 
@@ -1117,7 +1152,7 @@ Thin wrapper around `hb-dialog` that opens automatically while numeric `percenta
1117
1152
  | `title` | string (optional) | Dialog title text. |
1118
1153
  | `percentage` | number (required) | 0 hides/closes behavior; non-zero shows progress (per description). |
1119
1154
 
1120
- **Bootstrap `--bs-*` vars.** **Slot:** `title`. No parts in metadata.
1155
+ **Bulma `--bulma-*` vars** (see `extra/docs.ts`). **Slot:** `title`. No parts in metadata.
1121
1156
 
1122
1157
  ### Events (`CustomEvent` names)
1123
1158
 
@@ -1125,7 +1160,7 @@ Thin wrapper around `hb-dialog` that opens automatically while numeric `percenta
1125
1160
 
1126
1161
  ### Usage notes
1127
1162
 
1128
- - Progress UI uses Bootstrap progress component styling.
1163
+ - Progress UI uses Bulma `elements/progress` (`is-primary`); percentage is shown below the bar.
1129
1164
  - Parent should drive `percentage` from async task state.
1130
1165
  - Nested `hb-dialog` means the same overlay constraints as `hb-dialog`.
1131
1166
  - No i18n in `docs.ts`.
@@ -1146,7 +1181,7 @@ Thin wrapper around `hb-dialog` that opens automatically while numeric `percenta
1146
1181
 
1147
1182
  ### What it does
1148
1183
 
1149
- Modal that embeds `hb-form` with the same `schema` contract: live form updates mirror validity and values via `changeForm`, and the confirm button dispatches `modalFormConfirm` with the last valid payload or `modalFormCancel` when dismissed or invalid. Composes `hb-dialog` (backdrop/keyboard, `show`) and re-dispatches `modalShow`.
1184
+ Modal that embeds `hb-form` with the same `schema` contract: live form updates mirror validity and values via `updateForm`, and the confirm button dispatches `modalFormConfirm` with the last valid payload or `modalFormCancel` when dismissed or invalid. Composes `hb-dialog` (Bulma modal, backdrop/keyboard, `show`) and re-dispatches `modalShow`.
1150
1185
 
1151
1186
  ### Custom element
1152
1187
 
@@ -1159,10 +1194,9 @@ Modal that embeds `hb-form` with the same `schema` contract: live form updates m
1159
1194
  | `id` | string (optional) | Element identifier. |
1160
1195
  | `style` | string (optional) | Inline style string. |
1161
1196
  | `show` | union (optional) | `"yes"` \| `"no"`. |
1162
- | `dialogclasses` | string (optional) | Extra classes on the dialog (types use `dialogclasses`). |
1197
+ | `dialogclasses` | string (optional) | Reserved on the type; not yet applied in the template. |
1163
1198
  | `title` | string (optional) | Modal title. |
1164
1199
  | `backdrop` | boolean (optional) | Backdrop toggle. |
1165
- | `ignoreBackdrop` | boolean (optional) | Ignore backdrop clicks. |
1166
1200
  | `keyboard` | boolean (optional) | Escape closes when true. |
1167
1201
  | `describedby` | string (optional) | ARIA describedby. |
1168
1202
  | `labelledby` | string (optional) | ARIA labelledby. |
@@ -1171,18 +1205,18 @@ Modal that embeds `hb-form` with the same `schema` contract: live form updates m
1171
1205
  | `confirmlabel` | string (optional) | Confirm button label. |
1172
1206
  | `schema` | array (required) | JSON form schema (same shape as `hb-form` `schema`). |
1173
1207
 
1174
- **Bootstrap `--bs-*` vars.** **Slots:** `form-header`, `form-footer`, `header`, `modal-footer`, `footer`, `close-button-label`, `confirm-button-label`.
1208
+ **Bulma / theme:** CSS variables follow `hb-dialog` and `hb-form` (see those components). **Slots:** `form-header`, `form-footer`, `header`, `modal-footer`, `footer`, `close-button-label`, `confirm-button-label`.
1175
1209
 
1176
1210
  ### Events (`CustomEvent` names)
1177
1211
 
1178
1212
  - **`modalFormConfirm`** — `{ [key: string]: any }` — Submitted field map / payload (types use open object).
1179
1213
  - **`modalShow`** — `{ id: string; show: true }`
1180
1214
  - **`modalFormCancel`** — `{ id: string; error?: string }`
1181
- - **`changeForm`** — `{ _valid: boolean; _id: string; values: Record<string, string \| number \| boolean> }` (same as `hb-form` `update` event in form types)
1215
+ - **`updateForm`** — same detail shape as `hb-form` `update` (see form event types).
1182
1216
 
1183
1217
  ### Usage notes
1184
1218
 
1185
- - Built on Bootstrap modal + form patterns shared with `hb-dialog` and `hb-form`.
1219
+ - Built on Bulma modal + form patterns shared with `hb-dialog` and `hb-form`.
1186
1220
  - `schema` is typically a JSON string in HTML; validate against `hb-form` field types.
1187
1221
  - Shadow DOM composes nested components; slots map to form and modal regions.
1188
1222
  - No i18n array in `docs.ts` for this component.
@@ -1210,7 +1244,7 @@ Modal that embeds `hb-form` with the same `schema` contract: live form updates m
1210
1244
 
1211
1245
  ### What it does
1212
1246
 
1213
- Opens `hb-dialog` while `uri` is set and downloads the resource with `XMLHttpRequest` as a blob: optional JSON `headers`, inferred or explicit `targetfilename`, `Content-Disposition` parsing when exposed by CORS, progress bar from `onprogress`, then triggers a browser file save. Dispatches `downloadComplete` or `downloadError` (with `downloadid`) and propagates `modalShow`; clears/aborts when the dialog closes.
1247
+ Opens `hb-dialog` while `uri` is set and downloads the resource with `XMLHttpRequest` as a blob: optional JSON `headers`, inferred or explicit `targetfilename`, `Content-Disposition` parsing when exposed by CORS, **Bulma** `<progress>` from `onprogress`, then triggers a browser file save. Dispatches `downloadComplete` or `downloadError` (with `downloadid`) and propagates `modalShow`; clears/aborts when the dialog closes.
1214
1248
 
1215
1249
  ### Custom element
1216
1250
 
@@ -1233,7 +1267,7 @@ Opens `hb-dialog` while `uri` is set and downloads the resource with `XMLHttpReq
1233
1267
 
1234
1268
  ### Usage notes
1235
1269
 
1236
- Pass complex objects (`headers`) as JSON strings on attributes. Requires CORS and appropriate headers for progress and filename hints. Slot: `title` (dialog title).
1270
+ Pass complex objects (`headers`) as JSON strings on attributes. Requires CORS and appropriate headers for progress and filename hints. Slot: `title` (dialog title). Progress styling uses Bulma `elements/progress` (`is-primary`); indeterminate bar while total length is unknown.
1237
1271
 
1238
1272
  ### Minimal HTML example
1239
1273
 
@@ -1256,7 +1290,7 @@ Pass complex objects (`headers`) as JSON strings on attributes. Requires CORS an
1256
1290
 
1257
1291
  ### What it does
1258
1292
 
1259
- Navbar-style bell control that toggles a Bootstrap `dropdown-menu`: header row with optional “Clear all” (`clearurl`) and a default slot for notification rows, plus optional footer link “View all” (`viewurl`). `align` switches `dropdown-menu-end` for right alignment.
1293
+ Bell control that toggles a Bulma `dropdown` (active state): header row with optional “Clear all” (`clearurl`), default slot for notification rows (`dropdown-item` rows work well), and optional footer link “View all” (`viewurl`). Set `align` to `"right"` for `is-right` menu alignment.
1260
1294
 
1261
1295
  ### Custom element
1262
1296
 
@@ -1345,7 +1379,7 @@ CSS parts: `dropdown`, `dropdownbutton`, `dropdowncontent`.
1345
1379
 
1346
1380
  ### What it does
1347
1381
 
1348
- Video trimmer UI: plays `src` with an `hb-range-slider` synced to the playhead and in/out bounds (`track` min/max seconds). Numeric time fields, cue-to-current-time buttons, and optional `hb-form` gate final submission. Emits `changeTrackValues`, `dispatchTrack` when no form is used, and form-driven submit when metadata is valid.
1382
+ Video trimmer UI: plays `src` with an `hb-range-slider` synced to the playhead and in/out bounds (`track` min/max seconds). Numeric time fields, cue-to-current-time buttons, and optional `hb-form` gate final submission. Emits `changeTrackValues`, `dispatchTrack` when no form is used, and form-driven submit when metadata is valid. The UI uses **Bulma** `card`, `image is-16by9`, `button`, and `input` controls (Bootstrap Icons for play/pause).
1349
1383
 
1350
1384
  ### Custom element
1351
1385
 
@@ -1430,7 +1464,7 @@ Drive content via `info` and `topics` as JSON strings. Icon names use Bootstrap
1430
1464
 
1431
1465
  ### What it does
1432
1466
 
1433
- 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. On small layouts the body can expand/collapse unless `disable_expanding_small` is set; slots `footerheader`, `footercontent`, and `footerbottom` wrap major regions.
1467
+ 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.
1434
1468
 
1435
1469
  ### Custom element
1436
1470
 
@@ -1499,6 +1533,7 @@ JSON `schema`-driven form engine: each entry’s `type` maps to an `hb-input-*`
1499
1533
  ### Events
1500
1534
 
1501
1535
  - `submit` — submitted values as `Record<string, …>` plus `_valid`, `_id`
1536
+ - `submitinvalid` — fired when a submit is attempted (including `submitted="yes"`) but the form fails validation; `show_validation` is turned on so errors are visible
1502
1537
  - `getValues` — `{ _valid: boolean; values: Record<string, …> }`
1503
1538
  - `update` — `{ _valid: boolean; _id: string; values: Record<string, …> }`
1504
1539
 
@@ -1546,7 +1581,7 @@ Visual form-schema builder: internal `hb-form` defines field types, validation f
1546
1581
 
1547
1582
  ### Usage notes
1548
1583
 
1549
- Uses nested `hb-form`, `hb-table`, and `hb-dialogform`. `output_schema` mirrors the live composed schema suitable for `hb-form`.
1584
+ 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`.
1550
1585
 
1551
1586
  ### Minimal HTML example
1552
1587
 
@@ -1632,6 +1667,10 @@ Multi-step funnel over stacked `hb-form` instances: JSON `schemes` supplies one
1632
1667
 
1633
1668
  Each entry in `schemes` is a full form schema array like `hb-form`’s `schema`. CSS part: `invalid-feedback` (from inner form styling).
1634
1669
 
1670
+ **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.
1671
+
1672
+ 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.
1673
+
1635
1674
  ### Minimal HTML example
1636
1675
 
1637
1676
  ```html
@@ -1683,7 +1722,7 @@ Paginated grid of `hb-card-video` tiles built from JSON `cards`, with `hb-pagina
1683
1722
 
1684
1723
  ### Usage notes
1685
1724
 
1686
- CSS part: `container`. Registers `hb-paginate` and `hb-card-video`. `cards` must be valid JSON on the attribute.
1725
+ 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).
1687
1726
 
1688
1727
  ### Minimal HTML example
1689
1728
 
@@ -1745,7 +1784,11 @@ CSS part: `gauge`. `options` may be passed as a JSON string; the component parse
1745
1784
 
1746
1785
  ### What it does
1747
1786
 
1748
- Multi-line `<textarea>` controlled by `schemaentry` with the same validation ideas as text: optional `validationRegex` and `params` min/max length, required handling, and `show_validation` / `validationTip`. Dispatches `setVal` with `{ value, valid, id }` and `clickEnter` when Enter is pressed without Shift (Shift+Enter still inserts a newline).
1787
+ 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).
1788
+
1789
+ ### Styling (Bulma)
1790
+
1791
+ Bundles **Bulma 1.x** `form/shared`, `form/input-textarea`, and `form/tools` in the shadow root.
1749
1792
 
1750
1793
  ### Custom element
1751
1794
 
@@ -1787,7 +1830,11 @@ CSS parts: `invalid-feedback`, `input`. Nested `schemaentry` fields follow the s
1787
1830
 
1788
1831
  ### What it does
1789
1832
 
1790
- 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. Dispatches `setVal` with the objects array, `valid`, and `id`, and shows `validationTip` when `show_validation` is enabled.
1833
+ 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.
1834
+
1835
+ ### Styling (Bulma)
1836
+
1837
+ Shadow bundle: `form/tools`, `form/shared`, `form/input-textarea`, `elements/button`. Container border uses `--bulma-border` on `:host`.
1791
1838
 
1792
1839
  ### Custom element
1793
1840
 
@@ -1806,7 +1853,7 @@ Repeating records editor: `hb-table` lists existing rows (with delete actions),
1806
1853
 
1807
1854
  ### Usage notes
1808
1855
 
1809
- CSS part: `properties-container`. Slot: `add-object-label`.
1856
+ CSS parts: `properties-container`, `invalid-feedback`. Slot: `add-object-label`.
1810
1857
 
1811
1858
  ### Minimal HTML example
1812
1859
 
@@ -1828,7 +1875,11 @@ CSS part: `properties-container`. Slot: `add-object-label`.
1828
1875
 
1829
1876
  ### What it does
1830
1877
 
1831
- 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 badges when `allowRemove` is set, and styling via `params.colorVarName` or the `add-tag-label` slot. Dispatches `setVal` with the array `value`, `valid`, and `id`.
1878
+ 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`.
1879
+
1880
+ ### Styling (Bulma)
1881
+
1882
+ 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`.
1832
1883
 
1833
1884
  ### Custom element
1834
1885
 
@@ -1847,7 +1898,7 @@ Tag list stored as objects `{ id, label }` (optional per-tag `colorVarName`); us
1847
1898
 
1848
1899
  ### Usage notes
1849
1900
 
1850
- Optional slot name in docs: `add-tag-label` for the add control label.
1901
+ Optional slot: `add-tag-label` for the add control label. CSS part: `invalid-feedback`.
1851
1902
 
1852
1903
  ### Minimal HTML example
1853
1904
 
@@ -1869,7 +1920,11 @@ Optional slot name in docs: `add-tag-label` for the add control label.
1869
1920
 
1870
1921
  ### What it does
1871
1922
 
1872
- Checkbox or, when `schemaentry.params.type` is `switch`, a Bootstrap switch, 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 can show `validationTip` under `show_validation`.
1923
+ 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.
1924
+
1925
+ ### Styling (Bulma)
1926
+
1927
+ Shadow bundle: `form/shared`, `form/input-textarea`, `form/checkbox-radio`, `form/tools`. Switch uses host SCSS (`hb-input-checkbox-switch`).
1873
1928
 
1874
1929
  ### Custom element
1875
1930
 
@@ -1884,11 +1939,11 @@ Checkbox or, when `schemaentry.params.type` is `switch`, a Bootstrap switch, lab
1884
1939
 
1885
1940
  ### Events
1886
1941
 
1887
- - `setVal` — `{ value: string; valid: boolean; id: string }`
1942
+ - `setVal` — `{ value: boolean; valid: boolean; id: string }`
1888
1943
 
1889
1944
  ### Usage notes
1890
1945
 
1891
- CSS part: `invalid-feedback`.
1946
+ CSS parts: `input`, `invalid-feedback`.
1892
1947
 
1893
1948
  ### Minimal HTML example
1894
1949
 
@@ -1912,6 +1967,10 @@ CSS part: `invalid-feedback`.
1912
1967
 
1913
1968
  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`.
1914
1969
 
1970
+ ### Styling (Bulma)
1971
+
1972
+ 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`.
1973
+
1915
1974
  ### Custom element
1916
1975
 
1917
1976
  `hb-input-color`
@@ -1929,7 +1988,7 @@ Color input that normalizes named HTML colors and `rgb(...)` strings into a hex
1929
1988
 
1930
1989
  ### Usage notes
1931
1990
 
1932
- CSS part: `invalid-feedback`.
1991
+ CSS parts: `input`, `invalid-feedback`.
1933
1992
 
1934
1993
  ### Minimal HTML example
1935
1994
 
@@ -1951,7 +2010,11 @@ CSS part: `invalid-feedback`.
1951
2010
 
1952
2011
  ### What it does
1953
2012
 
1954
- 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`.
2013
+ 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).
2014
+
2015
+ ### Styling (Bulma)
2016
+
2017
+ Shadow bundle: `form/shared`, `form/input-textarea`, `form/tools`. Map and number fields keep their own styles.
1955
2018
 
1956
2019
  ### Custom element
1957
2020
 
@@ -1993,7 +2056,11 @@ CSS part: `invalid-feedback`. Ensure map-related `params` match your deployment
1993
2056
 
1994
2057
  ### What it does
1995
2058
 
1996
- Native date input bound to `schemaentry` (string JSON or object), with optional `params.min` / `max` compared as `Date` values when the field is required. Shows Bootstrap validation and `validationTip` when `show_validation` is on. Dispatches `setVal` with the string date `value`, `valid`, and `id`, and `clickEnter` if the user presses Enter.
2059
+ 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`.
2060
+
2061
+ ### Styling (Bulma)
2062
+
2063
+ Shadow bundle: `form/shared`, `form/input-textarea`, `form/tools`.
1997
2064
 
1998
2065
  ### Custom element
1999
2066
 
@@ -2037,6 +2104,10 @@ CSS part: `invalid-feedback`.
2037
2104
 
2038
2105
  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 }`.
2039
2106
 
2107
+ ### Styling (Bulma)
2108
+
2109
+ 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`.
2110
+
2040
2111
  ### Custom element
2041
2112
 
2042
2113
  `hb-input-datetime`
@@ -2054,7 +2125,7 @@ Composes `hb-input-date` and `hb-input-number` to edit date, hours, minutes, and
2054
2125
 
2055
2126
  ### Usage notes
2056
2127
 
2057
- No CSS parts declared in style setup; child inputs carry their own parts. Child components must be registered in the bundle.
2128
+ CSS part: `invalid-feedback` on the validation message. Child inputs carry their own parts. Child components must be registered in the bundle.
2058
2129
 
2059
2130
  ### Minimal HTML example
2060
2131
 
@@ -2073,7 +2144,11 @@ No CSS parts declared in style setup; child inputs carry their own parts. Child
2073
2144
 
2074
2145
  ## Description
2075
2146
 
2076
- `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. Use `show_validation` for Bootstrap states and `validationTip`. Dispatches `setVal` on updates and `clickEnter` when Enter is pressed.
2147
+ `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.
2148
+
2149
+ ## Styling (Bulma)
2150
+
2151
+ Bundles **Bulma 1.x** `form/shared`, `form/input-textarea`, and `form/tools` in the shadow root; theme on `:host`.
2077
2152
 
2078
2153
  ## Types
2079
2154
 
@@ -2138,7 +2213,11 @@ export type Events = {
2138
2213
 
2139
2214
  ## Description
2140
2215
 
2141
- File picker with `accept` from `schemaentry.params.accept` (defaults to any file), optional image preview or Bootstrap Icons by MIME type, and an optional clickable `placeHolderImage` that opens the hidden input. Clears selection with the remove control; validates required fields against an actual chosen file. Dispatches `setVal` with `{ value, valid, id }`.
2216
+ 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 }`.
2217
+
2218
+ ## Styling (Bulma)
2219
+
2220
+ 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).
2142
2221
 
2143
2222
  ## Types
2144
2223
 
@@ -2187,6 +2266,7 @@ export type Component = {
2187
2266
 
2188
2267
  show_validation?: "yes" | "no";
2189
2268
  schemaentry: FormSchemaEntry;
2269
+ i18nlang?: string;
2190
2270
  };
2191
2271
 
2192
2272
  export type Events = { setVal: { value: string; valid: boolean; id: string } };
@@ -2200,46 +2280,30 @@ export type Events = { setVal: { value: string; valid: boolean; id: string } };
2200
2280
 
2201
2281
  ## Description
2202
2282
 
2203
- Numeric input with optional `min` / `max` from `schemaentry.params` (native attributes are omitted when bounds are not set). Validates required fields and range when both ends are defined; with no min/max it still dispatches `clickEnter` on Enter. Emits `setVal` with `{ value, valid, id }` and supports `show_validation` plus `validationTip`.
2283
+ 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).
2284
+
2285
+ ## Styling (Bulma)
2286
+
2287
+ 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.
2288
+
2289
+ Markup pattern:
2290
+
2291
+ - Wrapper: `div.hb-input-number-root` around **`input.input`** (Bulma control styling).
2292
+ - Validation: `is-success` / `is-danger` on the input when `show_validation === "yes"` and `schemaentry.required` is set.
2293
+ - Help: `p.help.is-danger` with `part="invalid-feedback"` when `show_validation === "yes"` and the value is invalid.
2204
2294
 
2205
2295
  ## Types
2206
2296
 
2207
2297
  ```typescript
2208
2298
  export type FormSchemaEntry = {
2209
- /**
2210
- * This will be both the key of the object when submitting the form's data,
2211
- * and also the id in the DOM.
2212
- */
2213
2299
  id: string;
2214
-
2215
- /**
2216
- * The descriptive label that will show alongside the form control.
2217
- */
2218
2300
  label?: string;
2219
-
2220
- /**
2221
- * Optional default value.
2222
- */
2223
2301
  value?: number;
2224
-
2225
2302
  readonly?: boolean;
2226
-
2227
- /**
2228
- * This doesn't matter if the dependencies requirements aren't met.
2229
- */
2230
2303
  required?: boolean;
2231
-
2232
2304
  validationRegex?: string;
2233
- /**
2234
- * Shows if value is not valid.
2235
- */
2236
2305
  validationTip?: string;
2237
-
2238
2306
  placeholder?: string;
2239
-
2240
- /**
2241
- * Other parameters that may be specific to a certain kind of form control.
2242
- */
2243
2307
  params?: Record<string, any>;
2244
2308
  };
2245
2309
 
@@ -2247,6 +2311,7 @@ export type Component = {
2247
2311
  id?: string;
2248
2312
  style?: string;
2249
2313
  show_validation?: "yes" | "no";
2314
+ is_small?: "yes" | "no";
2250
2315
  schemaentry: FormSchemaEntry | undefined;
2251
2316
  };
2252
2317
 
@@ -2264,7 +2329,11 @@ export type Events = {
2264
2329
 
2265
2330
  ## Description
2266
2331
 
2267
- 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 optional Bootstrap feedback via `show_validation` and `validationTip`. Dispatches `setVal` with the selected string `value`, `valid`, and `id` whenever the choice changes.
2332
+ 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.
2333
+
2334
+ ## Styling (Bulma)
2335
+
2336
+ Shadow bundle: `form/shared`, `form/input-textarea`, `form/checkbox-radio`, `form/tools`. Markup uses Bulma `radios` / `radio` and host outline when invalid.
2268
2337
 
2269
2338
  ## Types
2270
2339
 
@@ -2316,7 +2385,7 @@ export type Component = {
2316
2385
  };
2317
2386
 
2318
2387
  export type Events = {
2319
- setVal: { value: string; valid: boolean; id: string };
2388
+ setVal: { value: string | undefined; valid: boolean; id: string | undefined };
2320
2389
  };
2321
2390
  ```
2322
2391
 
@@ -2324,64 +2393,45 @@ export type Events = {
2324
2393
 
2325
2394
  <a id="wc-input-range"></a>
2326
2395
 
2327
- # hb-input-range
2396
+ ## `hb-input-range` — input-range
2328
2397
 
2329
- ## Description
2398
+ **Category:** inputs
2399
+ **Tags:** inputs
2330
2400
 
2331
- Range slider (`type="range"`) whose bounds come from `schemaentry.params.min` and/or `max` when present. Parses stringified `schemaentry` when needed and enforces required/min/max rules for the numeric value. Dispatches `setVal` continuously with `{ value, valid, id }` and can show `validationTip` when `show_validation` is enabled.
2401
+ ### What it does
2332
2402
 
2333
- ## Types
2403
+ 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.
2334
2404
 
2335
- ```typescript
2336
- export type FormSchemaEntry = {
2337
- /**
2338
- * This will be both the key of the object when submitting the form's data,
2339
- * and also the id in the DOM.
2340
- */
2341
- id: string;
2405
+ ### Styling (Bulma)
2342
2406
 
2343
- /**
2344
- * The descriptive label that will show alongside the form control.
2345
- */
2346
- label?: string;
2407
+ 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).
2347
2408
 
2348
- /**
2349
- * Optional default value.
2350
- */
2351
- value?: number;
2409
+ ### Custom element
2352
2410
 
2353
- readonly?: boolean;
2411
+ `hb-input-range`
2354
2412
 
2355
- /**
2356
- * This doesn't matter if the dependencies requirements aren't met.
2357
- */
2358
- required?: boolean;
2413
+ ### Attributes (snake_case; use string values in HTML)
2359
2414
 
2360
- validationRegex?: string;
2361
- /**
2362
- * Shows if value is not valid.
2363
- */
2364
- validationTip?: string;
2415
+ - `id` — optional string
2416
+ - `style` — optional string
2417
+ - `schemaentry` — required string (JSON: `id`, `label?`, `required?`, `value?` (number), `validationTip?`, `params.min` / `params.max`, …)
2418
+ - `show_validation` — optional `"yes"` | `"no"`
2365
2419
 
2366
- placeholder?: string;
2420
+ ### Events
2367
2421
 
2368
- /**
2369
- * Other parameters that may be specific to a certain kind of form control.
2370
- */
2371
- params?: Record<string, any>;
2372
- };
2422
+ - `setVal` — `{ value: number; valid: boolean; id: string }`
2373
2423
 
2374
- export type Component = {
2375
- id?: string;
2376
- style?: string;
2424
+ ### Usage notes
2377
2425
 
2378
- show_validation?: "yes" | "no";
2379
- schemaentry: FormSchemaEntry | undefined;
2380
- };
2426
+ CSS parts: `input`, `invalid-feedback`.
2381
2427
 
2382
- export type Events = {
2383
- setVal: { value: string; valid: boolean; id: string };
2384
- };
2428
+ ### Minimal HTML example
2429
+
2430
+ ```html
2431
+ <hb-input-range
2432
+ 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}"
2433
+ show_validation="no"
2434
+ ></hb-input-range>
2385
2435
  ```
2386
2436
 
2387
2437
  ---
@@ -2392,7 +2442,18 @@ export type Events = {
2392
2442
 
2393
2443
  ## Description
2394
2444
 
2395
- 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 Bootstrap `is-valid` / `is-invalid` classes plus `validationTip`. Dispatches `setVal` with `{ value, valid, id }` on every change.
2445
+ 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`**).
2446
+
2447
+ ## Styling (Bulma)
2448
+
2449
+ 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.
2450
+
2451
+ Markup pattern:
2452
+
2453
+ - Wrapper: `div.select` around the native `<select>` (Bulma arrow and control height).
2454
+ - Validation: `is-success` / `is-danger` modifiers on `div.select` when `show_validation === "yes"` and `schemaentry.required` is set.
2455
+ - Help text: `p.help.is-danger` with `part="invalid-feedback"` for theming (only when `show_validation === "yes"` and the value is invalid).
2456
+ - `schemaentry.readonly` maps to the native `disabled` attribute on `<select>` (HTML does not support `readonly` on selects).
2396
2457
 
2397
2458
  ## Types
2398
2459
 
@@ -2414,6 +2475,7 @@ export type FormSchemaEntry = {
2414
2475
  */
2415
2476
  value?: string | number | boolean;
2416
2477
 
2478
+ /** When true, the native `<select>` is `disabled` (HTML has no `readonly` on `<select>`). */
2417
2479
  readonly?: boolean;
2418
2480
 
2419
2481
  /**
@@ -2440,6 +2502,7 @@ export type Component = {
2440
2502
  style?: string;
2441
2503
 
2442
2504
  show_validation?: "yes" | "no";
2505
+ is_small?: "yes" | "no";
2443
2506
  schemaentry: FormSchemaEntry | undefined;
2444
2507
  };
2445
2508
 
@@ -2456,7 +2519,11 @@ export type Events = {
2456
2519
 
2457
2520
  ## Description
2458
2521
 
2459
- Single-line text field driven by a JSON `schemaentry` (id, value, placeholder, readonly, required, optional `validationRegex`, and `params` min/max length). Toggle Bootstrap validation styling with `show_validation`. Dispatches `setVal` whenever the value or validity changes (detail includes `value`, `valid`, `id`), and `clickEnter` when the user presses Enter inside the input.
2522
+ 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.
2523
+
2524
+ ## Styling (Bulma)
2525
+
2526
+ 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`.
2460
2527
 
2461
2528
  ## Types
2462
2529
 
@@ -2517,6 +2584,10 @@ export type Events = {
2517
2584
 
2518
2585
  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).
2519
2586
 
2587
+ ## Styling (Bulma)
2588
+
2589
+ 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. Tree colors remain the **`--jn-*`** variables documented in `extra/docs.ts`.
2590
+
2520
2591
  ## Types
2521
2592
 
2522
2593
  ```typescript
@@ -2806,6 +2877,10 @@ export type Events = {
2806
2877
 
2807
2878
  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.
2808
2879
 
2880
+ ## Styling (Bulma)
2881
+
2882
+ 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`).
2883
+
2809
2884
  ## Types
2810
2885
 
2811
2886
  ```typescript
@@ -2830,7 +2905,7 @@ export type Events = {
2830
2905
 
2831
2906
  ## Description
2832
2907
 
2833
- Responsive video wall: lays out `items` in a Bootstrap row/column grid 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.
2908
+ 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.
2834
2909
 
2835
2910
  ## Types
2836
2911
 
@@ -2962,6 +3037,10 @@ export type Events = {
2962
3037
  };
2963
3038
  ```
2964
3039
 
3040
+ ### Styling (Bulma)
3041
+
3042
+ 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.
3043
+
2965
3044
  ---
2966
3045
 
2967
3046
  <a id="wc-messages-send"></a>
@@ -2996,6 +3075,10 @@ export type Events = {
2996
3075
  };
2997
3076
  ```
2998
3077
 
3078
+ ### Styling (Bulma)
3079
+
3080
+ 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.
3081
+
2999
3082
  ---
3000
3083
 
3001
3084
  <a id="wc-messages-topics-card"></a>
@@ -3004,7 +3087,18 @@ export type Events = {
3004
3087
 
3005
3088
  ## Description
3006
3089
 
3007
- 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 switching context.
3090
+ 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.
3091
+
3092
+ ## Styling (Bulma)
3093
+
3094
+ 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/).
3095
+
3096
+ **Shadow markup (simplified):**
3097
+
3098
+ - **`div.grid`** — one row per chat (click selects).
3099
+ - **`img`**, **`div.header`** (title + time), **`div.details`** (snippet + **`span.tag.is-light.is-rounded`** counter).
3100
+
3101
+ **Host-level tokens (existing):** `--hb-topics-card-size`, `--hb-topics-card-padding`, derived `--hb-topics-card-double-*`, plus the selected/hover background variables above.
3008
3102
 
3009
3103
  ## Types
3010
3104
 
@@ -3118,7 +3212,7 @@ export type Events = {
3118
3212
 
3119
3213
  ### What it does
3120
3214
 
3121
- Bootstrap-style offcanvas panel that hosts sidebar-desktop navigation. Can start open or closed, optionally shows a backdrop (autohide) for dismissal, and dispatches page changes and open/close state.
3215
+ 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.
3122
3216
 
3123
3217
  ### Custom element
3124
3218
 
@@ -3143,9 +3237,9 @@ Bootstrap-style offcanvas panel that hosts sidebar-desktop navigation. Can start
3143
3237
  ### Usage notes
3144
3238
 
3145
3239
  - **Slots:** `test`, `header`, `footer`.
3146
- - **CSS parts:** `header`.
3147
- - **CSS variables:** `--bs-primary` (Bootstrap theme).
3148
- - Pair with `hb-sidebar-desktop` / `hb-sidenav-link` patterns; see Storybook examples in `extra/docs.ts`.
3240
+ - **CSS parts:** `header` (on nested `hb-sidebar-desktop`).
3241
+ - Bulma theme variables apply inside each web component’s shadow root; Bootstrap Icons CSS is loaded for nested nav icons.
3242
+ - Pair with `hb-sidebar-desktop` / `hb-sidenav-link`; see Storybook examples in `extra/docs.ts`.
3149
3243
 
3150
3244
  ### Minimal HTML example
3151
3245
 
@@ -3185,6 +3279,10 @@ Order summary view driven by a payment JSON object: order number header, optiona
3185
3279
 
3186
3280
  None declared.
3187
3281
 
3282
+ ### Styling (Bulma)
3283
+
3284
+ 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`.
3285
+
3188
3286
  ### Usage notes
3189
3287
 
3190
3288
  - **CSS parts:** `item_image`.
@@ -3270,9 +3368,13 @@ Checkout page layout that embeds the payment flow and shopping cart: left column
3270
3368
 
3271
3369
  ### Usage notes
3272
3370
 
3273
- - **CSS variables:** `--hb-checkout-border`, Bootstrap `--bs-primary`, `--bs-secondary`, `--bs-success`, `--bs-info`, `--bs-warning`, `--bs-danger`.
3371
+ - **CSS variables:** `--hb-checkout-border`, Bulma `--bulma-*` (see `extra/docs.ts`).
3274
3372
  - Compose gateways and payment objects like Storybook `extra/docs.ts`; shared types live under `hb-checkout` / `hb-checkout-shopping-cart`.
3275
3373
 
3374
+ ### Styling (Bulma)
3375
+
3376
+ 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.
3377
+
3276
3378
  ### Minimal HTML example
3277
3379
 
3278
3380
  ```html
@@ -3314,9 +3416,13 @@ None declared.
3314
3416
 
3315
3417
  ### Usage notes
3316
3418
 
3317
- - **CSS variables:** Bootstrap `--bs-primary` through `--bs-danger`.
3419
+ - **CSS variables:** Bulma `--bulma-*` (see `extra/docs.ts`).
3318
3420
  - Align `headers` / `items` with `builder/src/wc/page-invoice/types/webcomponent.type.d.ts`.
3319
3421
 
3422
+ ### Styling (Bulma)
3423
+
3424
+ Layout uses **Bulma** `container`, `columns` / `column`, and `button is-light` for toolbar actions. **Bootstrap Icons** load from `<svelte:head>` for print / fullscreen icons (`bi-*`).
3425
+
3320
3426
  ### Minimal HTML example
3321
3427
 
3322
3428
  ```html
@@ -3331,40 +3437,89 @@ None declared.
3331
3437
 
3332
3438
  <a id="wc-paginate"></a>
3333
3439
 
3334
- ## `hb-paginate` — paginate
3440
+ # hb-paginate
3335
3441
 
3336
- **Category:** utilities
3337
- **Tags:** utilities, navigation
3442
+ **Category:** utilities · **Tags:** utilities, navigation
3338
3443
 
3339
- ### What it does
3444
+ ## Description
3340
3445
 
3341
- Pagination bar with first/prev/next/last and nearby page buttons, optional “showing X–Y of total” text, configurable page-size input or select, and optional sort field and direction controls with i18n labels.
3446
+ Pagination controls (first / previous / numbered pages / next / last), optional “showing X–Y of total” text, optional page-size via **`hb-input-number`** or **`hb-input-select`**, and optional sort field + direction with i18n. Dispatches `pageChange`, `changePageSize`, and `changeSort`.
3342
3447
 
3343
- ### Custom element
3448
+ ## Styling (Bulma)
3449
+
3450
+ The component bundles **Bulma 1.x** in the shadow root: **`form/shared`**, **`form/select`** (sort dropdown), and **`form/pagination`**, with theme defaults on `:host` (`--bulma-hb-def-*`). Set public **`--bulma-*`** on `body` or `:root` so they inherit onto the host and match the rest of the app. Relevant tokens include pagination, controls, text, and borders — see [Bulma CSS variables](https://bulma.io/documentation/features/css-variables/).
3451
+
3452
+ **Shadow markup (simplified):**
3453
+
3454
+ - **`div.hb-paginate`** — single horizontal row: optional info/size block + **`nav.pagination`**.
3455
+ - **`div.paginate-bar`** — rendered only when range text and/or page-size UI is needed (avoids extra flex gap when only pagination is shown).
3456
+ - **`ul.pagination-list`** / **`button.pagination-link`** — Bulma pagination; list uses **`gap`** instead of doubled per-link horizontal margins.
3457
+ - Sort UI: **`div.select.is-small`** + native **`select`**, and a direction **`button.pagination-link`**.
3458
+
3459
+ **Host-level overrides (optional):**
3460
+
3461
+ | Variable | Purpose |
3462
+ |----------|---------|
3463
+ | `--hb-paginate-height` | Fixed host height (default: `--bulma-control-height`, fallback `2.5rem`). |
3464
+ | `--hb-paginate-bar-padding-inline-start` | Left inset for the info/size bar (default: `--bulma-pagination-item-padding-left`, fallback `0.5em`). |
3465
+ | `--hb-paginate-list-gap` | Horizontal gap between pagination list items (default: half of `--bulma-pagination-item-margin`). |
3466
+
3467
+ ## Custom element
3344
3468
 
3345
3469
  `hb-paginate`
3346
3470
 
3347
- ### Attributes (snake_case; use string values in HTML)
3471
+ ## Attributes (snake_case; string values in HTML)
3348
3472
 
3349
3473
  - `id`, `style` (optional): strings.
3350
- - `page` (required), `pages` (required): numbers as strings.
3351
- - `info` (optional): JSON string — `total`, `size`, `page_size_type` (`number` | `select`), `page_size_options`, `sort_fields`, `sort_by`, `sort_direction`, `sort_disabled`, `sort_direction_disabled`, `sort_strict_direction`, `sort_default_value`, `sort_default_label`.
3352
- - `i18nlang` (optional): string — e.g. `en`, `it`.
3474
+ - `page`, `pages` (required): current page index and total pages, as strings.
3475
+ - `info` (optional): JSON string — `total`, `size`, `page_size_type` (`"number"` \| `"select"`), `page_size_options`, `sort_fields`, `sort_by`, `sort_direction`, `sort_disabled`, `sort_direction_disabled`, `sort_strict_direction`, `sort_default_value`, `sort_default_label`.
3476
+ - `i18nlang` (optional): e.g. `en`, `it`.
3353
3477
 
3354
- ### Events
3478
+ ## Events
3355
3479
 
3356
- - `pageChange`: `{ page: number; pages: number }`.
3357
- - `changePageSize`: `{ page_size: number }`.
3358
- - `changeSort`: `{ sort_by: string; sort_direction: string }`.
3480
+ - `pageChange`: `{ page: number; pages: number }`
3481
+ - `changePageSize`: `{ page_size: number }`
3482
+ - `changeSort`: `{ sort_by: string; sort_direction: string }`
3359
3483
 
3360
- ### Usage notes
3484
+ ## Usage notes
3361
3485
 
3362
- - **CSS variables:** `--bs-primary` (and other Bootstrap theme vars as in `extra/docs.ts`).
3363
3486
  - **i18n:** Italian and English in metadata; set `i18nlang` accordingly.
3364
- - **`hb-table`:** while the table is in **`is_loading`** mode it does not mount **`hb-paginate`**; it shows an inline pagination skeleton instead. Use **`hb-paginate`** only when you embed it yourself outside the table.
3365
- - See `extra/docs.ts` for combined sort + page-size examples.
3487
+ - **`hb-table`:** while the table is in **`is_loading`**, **`hb-paginate`** remains mounted but hidden; an inline Bulma skeleton overlay mimics the bar. Use **`hb-paginate`** directly when you embed it outside the table.
3488
+ - **Combined examples** (sort + page size): see `extra/docs.ts`.
3366
3489
 
3367
- ### Minimal HTML example
3490
+ ## Types
3491
+
3492
+ ```typescript
3493
+ export type Component = {
3494
+ id?: string;
3495
+ style?: string;
3496
+ pages: number;
3497
+ page: number;
3498
+ info?: {
3499
+ total?: number;
3500
+ size?: number;
3501
+ page_size_type?: "number" | "select";
3502
+ page_size_options?: string;
3503
+ sort_fields?: { value: string; label?: string }[];
3504
+ sort_by?: string;
3505
+ sort_direction?: "asc" | "desc" | "default";
3506
+ sort_disabled?: boolean;
3507
+ sort_direction_disabled?: boolean;
3508
+ sort_strict_direction?: boolean;
3509
+ sort_default_value?: string;
3510
+ sort_default_label?: string;
3511
+ };
3512
+ i18nlang?: string;
3513
+ };
3514
+
3515
+ export type Events = {
3516
+ pageChange: { page: number; pages: number };
3517
+ changePageSize: { page_size: number };
3518
+ changeSort: { sort_by: string; sort_direction: string };
3519
+ };
3520
+ ```
3521
+
3522
+ ## Minimal HTML example
3368
3523
 
3369
3524
  ```html
3370
3525
  <hb-paginate page="0" pages="5" i18nlang="en"></hb-paginate>
@@ -3484,10 +3639,14 @@ Loads the PayPal JS SDK with your client id and currency, renders PayPal Buttons
3484
3639
 
3485
3640
  ### Usage notes
3486
3641
 
3487
- - **CSS variables:** `--hb-checkout-border`.
3642
+ - **CSS variables:** `--hb-checkout-border`, Bulma `--bulma-*` (see `extra/docs.ts`).
3488
3643
  - **CSS parts:** `btn` (PayPal button surface).
3489
3644
  - Ensure CSP and PayPal script loading match your host app; totals are fixed for the rendered session.
3490
3645
 
3646
+ ### Styling (Bulma)
3647
+
3648
+ **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.
3649
+
3491
3650
  ### Minimal HTML example
3492
3651
 
3493
3652
  ```html
@@ -3588,7 +3747,7 @@ Live streaming `<video>` player for HLS (hls.js or native), WebSocket WebRTC (`s
3588
3747
 
3589
3748
  ### What it does
3590
3749
 
3591
- 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`. Dispatches movement, preset, and video-init events for the host app to wire to your backend.
3750
+ 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.
3592
3751
 
3593
3752
  ### Custom element
3594
3753
 
@@ -3613,7 +3772,7 @@ Live camera view built on `hb-player-live` with a configurable PTZ panel: D-pad
3613
3772
 
3614
3773
  ### Usage notes
3615
3774
 
3616
- - **CSS variables:** Bootstrap `--bs-primary` through `--bs-danger`.
3775
+ - **CSS variables:** Bulma theme tokens on `:host` (e.g. `--bulma-primary`, `--bulma-danger`); see `extra/docs.ts`.
3617
3776
  - Host must implement PTZ API calls in response to movement and preset events.
3618
3777
 
3619
3778
  ### Minimal HTML example
@@ -3660,6 +3819,10 @@ Product comparison matrix: columns per product (model, description, promotion, p
3660
3819
  - **CSS parts:** `container`, `col`, `row`.
3661
3820
  - Characteristic values drive per-cell visuals (`valid`, `disabled`, `blocked`, etc. per examples in `extra/docs.ts`).
3662
3821
 
3822
+ ### Styling (Bulma)
3823
+
3824
+ 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.
3825
+
3663
3826
  ### Minimal HTML example
3664
3827
 
3665
3828
  ```html
@@ -3746,6 +3909,7 @@ Search field with optional dropdown `searchlist` (id, text, icons, badges, tags,
3746
3909
  ### Usage notes
3747
3910
 
3748
3911
  - **CSS parts:** `dropdown-menu`, `search-input`.
3912
+ - **Styling:** Bulma `field has-addons` with `control has-icons-left` (search icon in the field), primary submit button, and dropdown styles are compiled in the shadow root (`styles/bulma.scss` + `webcomponent.scss`). Theme via `--bulma-*` on the host or ancestors.
3749
3913
  - Storybook may list `initial_value`; runtime props follow `webcomponent.type.d.ts` (`value` is required).
3750
3914
 
3751
3915
  ### Minimal HTML example
@@ -3769,7 +3933,7 @@ Search field with optional dropdown `searchlist` (id, text, icons, badges, tags,
3769
3933
 
3770
3934
  ### What it does
3771
3935
 
3772
- 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 Bootstrap card styling and matching slots.
3936
+ 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.
3773
3937
 
3774
3938
  ### Custom element
3775
3939
 
@@ -3785,6 +3949,10 @@ Vertical shop product card: top image with optional badge, then the same body as
3785
3949
 
3786
3950
  None declared.
3787
3951
 
3952
+ ### Styling (Bulma)
3953
+
3954
+ 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).
3955
+
3788
3956
  ### Usage notes
3789
3957
 
3790
3958
  - **Slots:** `badge`, `title`, `subtitle`, `text`, `reviews`, `price`, `footer`, `regularprice`.
@@ -3837,6 +4005,10 @@ Horizontal shop product card: image with optional badge, linked title and metada
3837
4005
 
3838
4006
  None declared.
3839
4007
 
4008
+ ### Styling (Bulma)
4009
+
4010
+ 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`).
4011
+
3840
4012
  ### Usage notes
3841
4013
 
3842
4014
  - **Slots:** `badge`, `title`, `subtitle`, `text`, `reviews`, `price`, `footer`, `regularprice`.
@@ -3913,7 +4085,7 @@ Stacked sidebar navigator: picks an active panel from JSON `panels` (main or fir
3913
4085
 
3914
4086
  ### What it does
3915
4087
 
3916
- Fixed-width desktop sidebar: optional company logo and title, header/footer slots, and a pill nav list built from `hb-sidenav-link` entries with optional JSON groups. Parses `navlinks` and `groups` from strings; emits `pageChange` when a link selects a page.
4088
+ 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.
3917
4089
 
3918
4090
  ### Custom element
3919
4091
 
@@ -3938,7 +4110,7 @@ Fixed-width desktop sidebar: optional company logo and title, header/footer slot
3938
4110
 
3939
4111
  - **Slots:** `test`, `header`, `footer`.
3940
4112
  - **CSS parts:** `header`.
3941
- - **CSS variables:** `--bs-primary`.
4113
+ - Bootstrap Icons CSS is included for nested `hb-sidenav-link` icons.
3942
4114
  - Matches the navigation model used inside `hb-offcanvas`.
3943
4115
 
3944
4116
  ### Minimal HTML example
@@ -3962,7 +4134,7 @@ Fixed-width desktop sidebar: optional company logo and title, header/footer slot
3962
4134
 
3963
4135
  ### What it does
3964
4136
 
3965
- Compact sidebar row as a nav button: optional Bootstrap icon, badge, 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.
4137
+ 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.
3966
4138
 
3967
4139
  ### Custom element
3968
4140
 
@@ -3980,7 +4152,8 @@ Compact sidebar row as a nav button: optional Bootstrap icon, badge, or visual t
3980
4152
  ### Usage notes
3981
4153
 
3982
4154
  - **CSS parts:** `li`.
3983
- - **CSS variables:** `--bs-primary`.
4155
+ - Styling uses Bulma inside the shadow root (buttons and tags); theme CSS variables follow Bulma’s scheme (e.g. `--bulma-link`).
4156
+ - Include [Bootstrap Icons](https://icons.getbootstrap.com/) if you use `bootstrapIcon` or the switch/checkbox/radio icons.
3984
4157
  - Storybook `nav_type` is a control helper; the shape lives on `navlink.type`.
3985
4158
 
3986
4159
  ### Minimal HTML example
@@ -4002,7 +4175,7 @@ Compact sidebar row as a nav button: optional Bootstrap icon, badge, or visual t
4002
4175
 
4003
4176
  ### What it does
4004
4177
 
4005
- Sidebar nav item: Bootstrap icon, label, optional badge, and either a flat link 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.
4178
+ 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.
4006
4179
 
4007
4180
  ### Custom element
4008
4181
 
@@ -4022,7 +4195,8 @@ Sidebar nav item: Bootstrap icon, label, optional badge, and either a flat link
4022
4195
  ### Usage notes
4023
4196
 
4024
4197
  - **CSS parts:** `li`.
4025
- - **CSS variables:** `--bs-primary`.
4198
+ - **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.
4199
+ - Bulma buttons and tags are scoped inside the component; include Bootstrap Icons CSS for `icon` / `subLinks[].icon`.
4026
4200
  - Export type `INavLink` is shared with `hb-offcanvas` / `hb-sidebar-desktop` `navlinks` arrays.
4027
4201
 
4028
4202
  ### Minimal HTML example
@@ -4090,7 +4264,7 @@ Contact strip for addresses (with optional `latLng`), phones, emails, websites,
4090
4264
 
4091
4265
  ### What it does
4092
4266
 
4093
- 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. Fires `elClick` when the link is activated.
4267
+ 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.
4094
4268
 
4095
4269
  ### Custom element
4096
4270
 
@@ -4236,6 +4410,10 @@ Development scaffold: accepts arbitrary `json`, `string`, and `boolean` props to
4236
4410
 
4237
4411
  - `event`: `{ test: boolean }`.
4238
4412
 
4413
+ ### Styling (Bulma)
4414
+
4415
+ Bundles **Bulma 1.x** (`button`, `base/skeleton`, animations) in the shadow root. Set **`--bulma-*`** on `body` / `:root` to align with your app.
4416
+
4239
4417
  ### Usage notes
4240
4418
 
4241
4419
  - **Slot:** `skelcontent`.
@@ -4350,9 +4528,9 @@ Freehand drawing surface with modes (`draw`, `eraser`, `select`), brush `options
4350
4528
 
4351
4529
  ### What it does
4352
4530
 
4353
- Bootstrap-striped data table driven by JSON `headers` and `rows` (`_id` required): column sort, header search (text, enum, date range), formatted values (nested keys, datetime via dayjs), copy-to-clipboard, row highlight and `selectrow` clicks. Global `actions` and per-row `_actions` can open confirm or schema dialogs (`hb-dialog` / `hb-dialogform`). Optional multi-select with `selectactions`, `add_item` slot, and `hb-paginate` for page size, sort sync, and server-style `externalfilter` / `total` workflows.
4531
+ Bulma-styled data table driven by JSON `headers` and `rows` (`_id` required): column sort, header search (text, enum, date range), formatted values (nested keys, datetime via dayjs), copy-to-clipboard, row highlight and `selectrow` clicks. Global `actions` and per-row `_actions` can open confirm or schema dialogs (`hb-dialog` / `hb-dialogform`). Optional multi-select with `selectactions`, `add_item` slot, and `hb-paginate` for page size, sort sync, and server-style `externalfilter` / `total` workflows.
4354
4532
 
4355
- While **`is_loading`** is enabled, the tbody shows Bootstrap **placeholder** skeleton rows (count follows **`size`**, capped at 100), and **`hb-paginate`** is not rendered: an **inline pagination skeleton** (same shape as the real paginate bar) is shown in the table toolbar instead. i18n via `i18nlang`.
4533
+ While **`is_loading`** is enabled, the tbody shows **Bulma skeleton** rows (`skeleton-lines`, **`checkbox.is-skeleton`**, **`button.is-skeleton`**; count follows **`size`**, capped at 100). **`hb-paginate`** stays mounted but is hidden; a single **`skeleton-block`** covers the pagination area so **`page` / `pages`** stay in sync. Optional on the host: **`--hb-table-sk-pagination-height`**, **`--hb-table-sk-pagination-min-width`** (default `min(28rem, 100%)`), **`--hb-table-sk-pagination-offset-inline-end`** (extra end margin while loading, nudges skeleton inward; default `0.65rem`). i18n via `i18nlang`.
4356
4534
 
4357
4535
  ### Custom element
4358
4536
 
@@ -4378,7 +4556,7 @@ While **`is_loading`** is enabled, the tbody shows Bootstrap **placeholder** ske
4378
4556
  - `disable_paginate_sort` (optional): boolean string.
4379
4557
  - `sort_strict_direction` (optional): boolean string.
4380
4558
  - `sort_direction` (optional): string — current sort direction.
4381
- - **`is_loading` (optional):** boolean string (`"yes"` / `"true"`) or boolean in frameworks — loading placeholders in the tbody (row count = `size`) and an inline pagination skeleton instead of **`hb-paginate`**.
4559
+ - **`is_loading` (optional):** boolean string (`"yes"` / `"true"`) or boolean in frameworks — Bulma skeleton rows in the tbody (row count = `size`) and one **`skeleton-block`** over hidden **`hb-paginate`**.
4382
4560
 
4383
4561
  ### Actions (`actions` and `_actions`)
4384
4562
 
@@ -4446,8 +4624,9 @@ Set **`add_item`** to `"yes"` / `"true"` (or boolean `true` in frameworks) to sh
4446
4624
 
4447
4625
  - **Slots:** `add-button-content` (Add button body), `buttons-container` (extra toolbar content).
4448
4626
  - **CSS parts:** `table`, `table-actions`, `selected-row`, `common-row`.
4627
+ - **Toolbar:** multi-select **settings** (gear) button has **`margin-inline-start`** from **`--hb-table-toolbar-settings-margin-inline-start`** (default `--bulma-block-spacing`) so it sits slightly right of the toolbar start.
4449
4628
  - **i18n:** Italian and English in docs metadata; set `i18nlang` accordingly.
4450
- - **`hb-paginate`:** embedded when pagination is enabled and **`is_loading`** is off; while loading, only the **inline pagination skeleton** is shown (no `hb-paginate` instance, so **`pageChange`**, **`changePageSize`**, and **`changeSort`** do not fire until loading ends).
4629
+ - **`hb-paginate`:** embedded when pagination is enabled; while **`is_loading`**, it stays in the DOM (hidden) under the skeleton overlay so props stay aligned — user interaction is blocked until loading ends.
4451
4630
  - **Pagination while loading:** `is_loading` does not recalculate `page` / `pages` by itself. With **client-side** pagination, if you clear `rows` during a refresh, the `$effect` that derives `pages` from row count does not run on an empty list, so **`pages` can stay at the previous value** until new rows arrive — keep `page`, `pages`, and `total` aligned with your API if needed.
4452
4631
  - See `extra/docs.ts` for Storybook-style examples.
4453
4632
 
@@ -4544,7 +4723,7 @@ Renders legal-style documents from `data`: privacy templates with site, company,
4544
4723
 
4545
4724
  ### What it does
4546
4725
 
4547
- Bootstrap-styled 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 aligns with Bootstrap CSS variables in docs.
4726
+ 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`.
4548
4727
 
4549
4728
  ### Custom element
4550
4729
 
@@ -4569,8 +4748,9 @@ Bootstrap-styled toast: `show` (`yes` / `no`), `title`, `content`, optional `img
4569
4748
 
4570
4749
  ### Usage notes
4571
4750
 
4572
- - **Slots:** `header_img`, `header_strong`, `header_small`, `body`.
4573
- - **CSS vars** in docs reference Bootstrap semantic colors.
4751
+ - **Slots:** `header_icon` (top-left badge), `header_strong`, `header_small` (overrides the status chip under the title), `body`.
4752
+ - **CSS parts:** `toast` (root), `status` (chip row for time / percentage / timeout).
4753
+ - **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).
4574
4754
 
4575
4755
  ### Minimal HTML example
4576
4756
 
@@ -4634,7 +4814,7 @@ Wrapper that adds a Bootstrap tooltip around slotted content. Configure via `too
4634
4814
 
4635
4815
  ### What it does
4636
4816
 
4637
- Upload progress UI driven by `fetch_data` (`url`, `data`, optional `method`, `headers`): wraps `hb-dialog`, shows striped progress while starting, then byte progress via axios `onUploadProgress`. 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.
4817
+ 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.
4638
4818
 
4639
4819
  ### Custom element
4640
4820
 
@@ -4656,7 +4836,7 @@ Upload progress UI driven by `fetch_data` (`url`, `data`, optional `method`, `he
4656
4836
 
4657
4837
  - **Slot:** `title` — dialog title (default “Uploading”).
4658
4838
  - Storybook arg names may say “download”; runtime events are **`uploadError`** / **`uploadComplete`**.
4659
- - **CSS vars** in docs reference Bootstrap semantic colors.
4839
+ - **CSS vars** in docs reference Bulma semantic colors (`--bulma-*`) for progress and labels.
4660
4840
 
4661
4841
  ### Minimal HTML example
4662
4842