WidgetHtml

Source: client/lib/theme/vueda-tailwind/widgets/index.js

The root adds no spacing so form composition controls the editor block.

Vue component: WidgetHtml

Slot	Default classes	Description
root		The root adds no spacing so form composition controls the editor block.
inner	4 classes	The inner frame supplies the bordered control surface and clips editor content. Uses the hairline edge contract shared with WidgetJson.root so the editor frame DPR-tracks like the input-shell controls beside it, with the focus-within ring and data-[invalid=true] destructive swap mirroring the other editor widget.
toolbar	2 classes	The toolbar is a muted, wrapping command strip above the editing area. The bottom divider uses the DPR-keyed border-b-hairline width with the structural --border colour so the rule tracks the canon hairline scale.
toolbarButton	4 classes	Toolbar buttons use compact slab control styling.
toolbarButtonActive	bg-accent text-accent-foreground	The active toolbar button uses the same accent surface as selected menu actions.
toolbarSeparator	mx-0.5 h-5 w-hairline bg-border	Separators divide toolbar command groups with a muted vertical rule.

root

The root adds no spacing so form composition controls the editor block.

Source: client/lib/theme/vueda-tailwind/widgets/WidgetHtml.theme.js:17

inner

The inner frame supplies the bordered control surface and clips editor content. Uses the hairline edge contract shared with WidgetJson.root so the editor frame DPR-tracks like the input-shell controls beside it, with the focus-within ring and data-[invalid=true] destructive swap mirroring the other editor widget.

Default classes:

flex flex-col hairline rounded-vueda-control overflow-hidden
transition-shadow
focus-within:hairline-ring focus-within:focus-ring-shadow
data-[invalid=true]:hairline-destructive data-[invalid=true]:focus-within:focus-ring-shadow-destructive

Source: client/lib/theme/vueda-tailwind/widgets/WidgetHtml.theme.js:21

toolbar

The toolbar is a muted, wrapping command strip above the editing area. The bottom divider uses the DPR-keyed border-b-hairline width with the structural --border colour so the rule tracks the canon hairline scale.

Default classes:

flex flex-row flex-wrap items-center gap-0.5
border-b-hairline bg-muted/50 px-1.5 py-1

Source: client/lib/theme/vueda-tailwind/widgets/WidgetHtml.theme.js:30

toolbarButton

Toolbar buttons use compact slab control styling.

Default classes:

inline-flex items-center justify-center
rounded px-1.5 py-0.5 text-sm font-medium text-muted-foreground
hover:bg-accent hover:text-accent-foreground
active:bg-accent-active active:text-accent-foreground

Source: client/lib/theme/vueda-tailwind/widgets/WidgetHtml.theme.js:34

toolbarButtonActive

The active toolbar button uses the same accent surface as selected menu actions.

Default classes:

bg-accent text-accent-foreground

Source: client/lib/theme/vueda-tailwind/widgets/WidgetHtml.theme.js:43

toolbarSeparator

Separators divide toolbar command groups with a muted vertical rule.

Default classes:

mx-0.5 h-5 w-hairline bg-border

Source: client/lib/theme/vueda-tailwind/widgets/WidgetHtml.theme.js:47