fieldset

Wraps related fields in a semantic <fieldset> with a styled <legend>. Screen readers announce the legend when focus enters the group — use it whenever fields belong together (address, card details, contact info). Works naturally inside a <form data-action="...">.

import { fieldset, grid, input, textarea, button } from '@invisibleloop/pulse/ui'

`<form data-action="submit" class="u-flex u-flex-col u-gap-4">
  ${fieldset({ legend: 'Your details', content: `
    ${grid({ cols: 2, gap: 'md', content: `
      ${input({ name: 'first', label: 'First name', required: true })}
      ${input({ name: 'last',  label: 'Last name',  required: true })}
    ` })}
    ${input({ name: 'email', label: 'Email address', type: 'email', required: true })}
  ` })}
  ${fieldset({ legend: 'Message', content: `
    ${textarea({ name: 'message', label: 'Tell us about your project', rows: 4, required: true })}
  ` })}
  ${button({ label: 'Send message', type: 'submit', variant: 'primary', fullWidth: true })}
</form>`

Prop	Type	Default
`legend`	string	—	Group label — rendered as `<legend>`, announced by screen readers on focus
`content`	string	—	Raw HTML slot — input(), select(), textarea(), grid(), etc.
`gap`	string	md	Vertical gap between fields: xs / sm / md / lg
`class`	string	—	Extra classes on the `<fieldset>` element