Component styles

Every selected field or static element now exposes a shared Styles section in the properties drawer. It complements component-specific options without duplicating the same controls in every QInput, QSelect, QBtn, static content or structure settings panel.

Available options

• surface: none, soft, outlined, elevated or glass;
• Quasar tone: primary, secondary, accent, positive, warning, negative or info;
• Quasar variant: inherit, filled, outlined, standout or borderless;
• density: inherit, comfortable or compact;
• Quasar outer and inner spacing from xs to xl;
• radius, shadow and text alignment;
• full width;
• a small allowlist of safe UnoCSS utilities.

The panel itself uses the UnoCSS Attributify preset with the un- prefix. Form styles are nevertheless stored as a controlled JSON object rather than free-form CSS.

Auto-fit properties drawer

The right drawer derives its width from the actual builder capacity instead of imposing a fixed width. While persistent, it remains between 280 and 480 px, with a preferred minimum of 360 px. The canvas keeps at least 480 px while both drawers are open. Below the 980 px persistent threshold, the drawer becomes an overlay bounded to the container width minus 16 px.

The drawer content is fluid as well:

• surface buttons and selectors use an auto-fit grid;
• labels may wrap without increasing the column's intrinsic width;
• alignment controls switch from four to two columns as the drawer narrows;
• selectors fall back to one column at very small widths;
• utility chips remain bounded and wrap inside the field;
• only the vertical QScrollArea is allowed to scroll.

The dedicated browser scenario checks the drawer at 1600 px, 1024 px and 375 px and verifies that the view clips horizontal overflow and that no control escapes the drawer. Its expected width comes from the real builder container, then data-qform-drawer-width mirrors the width actually rendered by Quasar after layout so transient gaps between requested and applied width do not become false negatives.

Outlined surface on Quasar fields

For Quasar controls that already draw their own frame (QInput, QSelect, QFile, date, time and color fields), the Outlined surface does not add a second border around the field. It enables the control's outlined rendering and keeps the wrapper transparent. Structures such as sections, fieldsets and columns still keep their wrapper border.

This avoids the double-outline effect on fields such as Email address.

Serialized schema

{
  $formkit: 'q-input',
  name: 'email',
  label: 'Email address',
  qformStyle: {
    surface: 'soft',
    tone: 'primary',
    variant: 'outlined',
    density: 'compact',
    padding: 'sm',
    radius: 'md',
    shadow: 'sm',
    fullWidth: true,
    utilities: ['transition-all', 'motion-reduce:transition-none'],
  },
}

qformStyle is preserved by export, import, templates and migrations. Before FormKit rendering, this metadata is removed from the runtime schema and converted into wrapper classes and compatible Quasar props.

Security

The builder does not accept free-form CSS, arbitrary class names, inline styles or event attributes through this panel. Every value is normalized through an allowlist. Unknown imported values fall back to defaults and unsupported utilities are discarded.

This makes it possible to use UnoCSS and Quasar without introducing an uncontrolled code or CSS injection path.

Privacy consent

The Privacy consent component is available under Elements → Statics. It generates the following canonical field:

{
  $formkit: 'q-checkbox',
  name: 'privacy_consent',
  validation: 'accepted',
  value: false,
  qformStyle: {
    surface: 'soft',
    tone: 'primary',
    padding: 'sm',
    radius: 'md',
  },
}

The built-in Simple contact template reuses the exact same schema factory. The catalog component and template field can therefore no longer silently drift apart.

Checks

bun run field-styles:check
bun run catalog:check
bun run typecheck
bun run e2e:styles

Windows note: in mobile mode, the test does not freeze the width at 359 px. It compares the rendered panel with data-qform-drawer-width because the embedded builder can be narrower than the browser viewport.

Windows 11 note: data-qform-drawer-width explicitly measures .q-drawer__content[data-qform-settings-drawer]. It must not observe the Quasar root container, which can span the full shell width.