@htmlbricks/hb-banner 0.71.35 → 0.71.36

package/README.md

@@ -1,39 +1,86 @@
-## `hb-banner` — banner
+# `hb-banner` — integrator guide
 
-**Category:** content | **Tags:** content, marketing
+**Category:** content · **Tags:** content, marketing · **Package:** `@htmlbricks/hb-banner`
 
-### What it does
+## Summary
 
-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`.
+`hb-banner` is a marketing-style hero strip: optional logo image beside a heading and supporting line. Content is rendered inside the shadow root using Bulma layout (`container`, `columns`), typography (`.title`, `.subtitle`), and visibility helpers so **wide** and **narrow** viewports get different alignment (side-by-side vs stacked, centered).
 
-### Custom element
+## Behavior
 
-`hb-banner`
+- **Two responsive variants** are rendered in the markup; Bulma visibility classes show exactly one at a time:
+  - **Wide (not “touch”):** fluid container, vertically centered columns, logo column **right-aligned** (`is-one-third-desktop`), text column **two-thirds** (`is-two-thirds-desktop`).
+  - **Narrow (“touch” and below desktop):** stacked, **centered** columns (`is-mobile`, `is-multiline`, `has-text-centered`), logo on its own row then title/subtitle.
+- **`logouri`:** passed to `<img src="…">` in both layouts. If omitted or empty, the image still renders with an empty `src` (invalid image); omit the attribute only when you accept a broken image or handle it in your host page.
+- **`title` / `description`:** rendered as Bulma `.title.is-4` and `.subtitle.is-5` respectively. Either can be omitted; empty headings still produce elements with no visible text.
+- **Internationalization:** none in this component (`extra/docs.ts` lists no `i18n` entries).
+- **Custom events:** none in `types/webcomponent.type.d.ts` (`Events` is `{}`).
 
-### Attributes / props (snake_case)
+## Layout and visual design
 
-| Property | Type | Notes |
-| --- | --- | --- |
-| `id` | string (optional) | Element identifier. |
-| `style` | string (optional) | Inline style string. |
-| `title` | string (optional) | Main heading text. |
-| `description` | string (optional) | Subtitle or body text. |
-| `logouri` | string (optional) | Logo image URL. |
+- **Host:** `display: block` (`styles/webcomponent.scss`).
+- **Logo box:** `.hb-banner-figure` width `9.375rem` (max `100%`); `.hb-banner-logo` is `width: 100%`, `height: auto`, `max-height: 9.375rem`, `object-fit: contain`.
+- **Theme:** Bulma 1.x Sass is forwarded on `:host` (container, columns, title, image, typography/spacing helpers, visibility). Additional Bulma CSS variables from the bundled theme apply; documented public variables are listed below.
 
-No CSS vars or slots in style setup metadata.
+## Logic (implementation reference)
 
-### Events (`CustomEvent` names)
+1. Props are read from the custom element API (`logouri`, `title`, `description`; plus `id` / `style` per typings).
+2. The same inner structure is duplicated: first block uses `is-hidden-touch`, second uses `is-hidden-desktop`, matching Bulma’s breakpoint helpers to the two layouts described above.
 
-None declared in types (`Events` is an empty object).
+## Custom element tag
 
-### Usage notes
+```html
+<hb-banner …></hb-banner>
+```
+
+## Attributes (HTML / reflected props)
+
+Web component attributes are **strings** (snake_case names). Logical optional fields from authoring types:
+
+| Attribute | Role |
+|-----------|------|
+| `id` | Optional element id (per `Component` typings; standard host attribute). |
+| `style` | Optional inline style on the host (per `Component` typings). |
+| `title` | Main heading text. |
+| `description` | Subtitle / supporting line under the heading. |
+| `logouri` | URL of the logo image for `<img src>`. |
+
+## Events
+
+No custom events are declared for this component (`Events` is an empty object in `types/webcomponent.type.d.ts`). Use standard DOM events on the host if needed.
+
+## CSS custom properties, parts, and slots
+
+**Documented theme variables** (from `extra/docs.ts` / `styleSetup`):
+
+| Variable | Default | Notes |
+|----------|---------|--------|
+| `--bulma-primary` | `#00d1b2` | Accent / link tones from Bulma theme setup. |
+| `--bulma-text` | `#363636` | Body / general text tone. |
+| `--bulma-title-color` | `#363636` | Bulma `.title` color. |
+
+Other `--bulma-*` tokens from the bundled Bulma theme may apply on `:host`; see [Bulma CSS variables](https://bulma.io/documentation/features/css-variables/).
+
+- **`::part`:** none (`cssParts` is empty).
+- **Slots:** none (`htmlSlots` is empty); all markup is internal to the shadow root.
 
-- Relies on Bulma grid, visibility helpers (`is-hidden-touch`, `is-hidden-desktop`), and typography helpers (`has-text-right`, `has-text-centered`).
-- Icons are not bundled; extend the markup if you need icon fonts.
-- Shadow DOM keeps typography/spacing internal unless slotted content is added in implementation.
-- No i18n in `docs.ts`.
+## TypeScript typings (authoring)
 
-### Minimal HTML example
+From `types/webcomponent.type.d.ts`:
+
+```ts
+export type Component = {
+  id?: string;
+  style?: string;
+  title?: string;
+  description?: string;
+  logouri?: string;
+};
+
+export type Events = {};
+```
+
+## Minimal HTML
 
 ```html
 <hb-banner
@@ -42,3 +89,14 @@ None declared in types (`Events` is an empty object).
   logouri="https://example.com/logo.svg"
 ></hb-banner>
 ```
+
+Text-only (no logo URL):
+
+```html
+<hb-banner
+  title="Welcome"
+  description="Short supporting line under the heading."
+></hb-banner>
+```
+
+Only set `logouri` when you have a valid image URL; the template always includes an `<img>` bound to `logouri`.

package/manifest.json

@@ -137,5 +137,5 @@
   "size": {},
   "iifePath": "main.iife.js",
   "repoName": "@htmlbricks/hb-banner",
-  "version": "0.71.35"
+  "version": "0.71.36"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlbricks/hb-banner",
-  "version": "0.71.35",
+  "version": "0.71.36",
   "contributors": [],
   "description": "Marketing-style hero strip: logo image beside a title and subtitle, using Bootstrap grid. Layout switches from side-by-side on large screens to stacked, centered content on smaller breakpoints (`d-none d-lg-block` / `d-lg-none`).",
   "licenses": [