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)

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

<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).