# `hb-skeleton-component` — integrator guide

**Category:** data · **Tags:** data, loading · **Package:** `@htmlbricks/hb-skeleton-component` · **Custom element:** `hb-skeleton-component`

## Summary

This package is a **development scaffold**, not a production “skeleton loader” UI. It exists to exercise web-component bindings: it accepts a free-form **`json`** payload, a **`string`** label, and a **`boolean`** flag, renders a small Bulma-styled demo panel (copy of those values plus a primary button), exposes a named **light-DOM slot** for arbitrary markup, and emits a single generic **`event`** for listener wiring demos.

Use it when prototyping tooling, Storybook, or catalog pipelines around `hb-*` elements—**not** as a user-facing loading placeholder.

## Props and attributes

Attributes use **snake_case**. In plain HTML, attribute values are always **strings**; pass JSON as a **JSON string**, and use the usual HTML Bricks conventions for booleans (for example **`yes`** / **`no`**) when setting the `boolean` attribute from markup. From JavaScript you may set **properties** with native types (`boolean`, objects) where your integration supports it.

| Attribute | Required | Description |
|-----------|----------|-------------|
| `string` | Yes (per typings) | Arbitrary string; shown in the panel and used to derive an uppercase line for binding demos. |
| `json` | No | JSON string or (from JS) a parsed object. Invalid or empty string falls back to `{}`. Object values are used as-is. The UI lists **top-level keys** of the parsed object. Default in the implementation is `"{}"`. |
| `boolean` | No | Demo flag. The component treats **`true`**, the strings **`"true"`**, **`"yes"`**, **`"1"`**, and **`""`** as “active” for the displayed boolean line; other values (including **`false`** and **`"no"`**) are inactive. Prefer explicit booleans from JS when testing. |
| `id` | No | Passed to the root inner `<div>` of the demo layout. |
| `style` | No | Present on the TypeScript **`Component`** interface for host styling experiments; the demo markup does not forward it into shadow content. |

## Runtime behavior

- **`string`:** Rendered as-is, and a derived **uppercase** string is shown on a second line.
- **`json`:** Parsed when provided as a string; keys are displayed as a comma-separated list (empty when there are no keys).
- **`boolean`:** Drives the “Boolean:” line via the normalization described above.
- **Button:** “Dispatch Event” dispatches the **`event`** custom event (see below).

## Events

| Event | `detail` |
|-------|----------|
| `event` | `{ test: true }` (logical type: **`{ test: boolean }`** per typings) — generic wiring demo fired from the primary button. |

### Example (vanilla JS)

```js
const el = document.querySelector("hb-skeleton-component");
el.addEventListener("event", (e) => {
  console.log(e.detail); // { test: true }
});
```

## Styling (Bulma)

The shadow tree bundles **Bulma 1.x** (button, base skeleton utilities, animations). Theme it from the light DOM by setting **`--bulma-*`** on an ancestor such as `:root` or `body` so variables apply to the custom element host.

Documented overrides in metadata (`styleSetup` / `extra/docs.ts`):

| Variable | Type | Default | Role |
|----------|------|---------|------|
| `--bulma-primary` | color | `#00d1b2` | Primary button background. |
| `--bulma-text` | color | `#363636` | Body copy, labels, and skeleton-related placeholder tone in demos. |

Additional layout tuning uses **`--bulma-section-padding`** in component SCSS when you want looser or tighter padding around the demo block.

## CSS `::part`

| Part | Role |
|------|------|
| `testpart` | Root demo panel wrapper (`part="testpart"` on the inner scaffold `div`). |

## Slots

| Slot | Description |
|------|-------------|
| `content` | **Light-DOM** slot projected into the scaffold body. Default content in the source is the text **“Default slot content”** when nothing is assigned. |

### Example

```html
<hb-skeleton-component
  id="demo"
  string="hello"
  json='{"a":0,"b":"x"}'
  boolean="no"
>
  <span slot="content">Custom slot markup</span>
</hb-skeleton-component>
```

## TypeScript (authoring types)

Authoring types live in `types/webcomponent.type.d.ts`:

- **`Component`:** `string` (required in the type), optional `id`, `style`, `json`, `boolean`.
- **`Events`:** maps **`event`** to **`{ test: boolean }`**.

## License

**Apache-2.0** (see `LICENSE.md` in package metadata).