@f-ewald/components

Documentation / frame-box

Component API

<frame-box>

Open live example

A titled frame around a slot: a gray border with a small uppercase,
muted label overlapping the top edge (fieldset/legend-style). Generic —
the label text is entirely up to the consumer (e.g. "Debug" to visually
fence off dev-only chrome from the product UI).

Install

import "@f-ewald/components/frame-box.js";

Usage

<frame-box label="Debug">
  Framed content goes here.
</frame-box>

Attributes / properties

PropertyAttributeTypeDefaultDescription
labellabelstring""The overlapping title label, e.g. "Debug".

Events

None.

Slots

None.

CSS custom properties

Custom property
--ui-border
--ui-font
--ui-font-size-xs
--ui-font-weight-semibold
--ui-radius
--ui-surface
--ui-text-muted
--ui-tracking-wide