hb-area-code

Category: utilities · Tags: utilities, developer

Summary

hb-area-code renders content in a frameless root (no Bulma box): copy + optional “Copied” tag are positioned top-right over the <pre><code> snippet. Copy uses navigator.clipboard.writeText and emits clipboardCopyText with { text }. The host and root wrapper have no extra margin or padding; spacing around the snippet is up to the parent or ::part(content).

Behaviour

1. Copy: each click writes content to the clipboard, shows confirmation (~1.6s, timer resets on repeat), and dispatches clipboardCopyText with detail.text.
2. content: single source for display and clipboard.
3. id: optional; when set, it is applied to the root hb-area-code wrapper inside the shadow tree.

Markup

• Root: hb-area-code (no box / outer card frame; no margin or padding on the host root wrapper).
• Wrapper hb-area-code-body (position: relative): floating hb-area-code-float (absolute top-right) with optional tag is-success is-size-7, then button is-small (theme-default fill, no is-light) with Bootstrap Icons bi-clipboard / bi-clipboard-check.
• Snippet: <pre part="content" class="hb-area-code-snippet"> and <code class="hb-area-code-snippet-code"> (uniform insets; extra padding-inline-end keeps long first lines clear of the copy controls).

Custom element

hb-area-code

Attributes

| Attribute | Notes | | --- | --- | | content | Shown in the snippet and copied (string). | | id | Optional string on the inner root hb-area-code element. |

Events

| Event | detail | | --- | --- | | clipboardCopyText | { text: string } |

Styling

• Parts: content → <pre> (see extra/docs.ts).
• Theme: same stack as other hb-* components (bulma-wc-host-theme-tokens on the shadow :host): system prefers-color-scheme, then data-theme / .theme-* on html, body, or the custom element host. color-scheme on the host follows that order so native chrome stays coherent. The snippet background and border are built with hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l)) and border-l primitives so the surface stays valid in the shadow tree; text prefers --bulma-text with the same hsl(…, --bulma-text-l) fallback.
• Corners: snippet, copy button, and tag use border-radius: 0 (no rounded corners inside this component).
• Dark mode: the default strip follows Bulma tokens on the shadow :host (system prefers-color-scheme is handled by bulma-wc-host-theme-tokens, so main-bis-l is already a dark gray on a dark scheme). The deeper “well” (scheme-main-l, border-l, inset highlight) applies only when dark is explicit — data-theme="dark" or .theme-dark on html, body, or the host — so we never mix OS dark with light-token scheme-main-l (that would read as white).

TypeScript

types/webcomponent.type.d.ts

Example

<hb-area-code content="npm install @htmlbricks/hb-area-code"></hb-area-code>