Details

This PR allows modal-dependent forms to render in other contexts, the first step towards de-modalizing forms. The changes here cover two backwards-compatible refactors:

FormProxy replaced with StrictUnsafe

The FormProxy component allows API-driven components to dynamically render forms with previously registered tag names. For the most part, <ak-form-proxy> performs this task by side-stepping Lit's renderer, using document.createElement to create the form element, synchronously setting its properties, and appending it to the DOM. This approach has a few downsides:

• Type safety is difficult as properties are set dynamically.
• Dynamic form elements skip Lit's sanitation and rendering optimizations.
• Form proxy adds an additional layer of indirection to ModalForm, ModelForm, etc.

StrictUnsafe is a new utility component that uses Lit's unsafeStatic directive to render dynamic tag names, preserving type safety and Lit's optimizations. StrictUnsafe is a more general-purpose utility that can be used in other contexts beyond forms. Ironically, our experiments in JSX-ification use a similar technique to applying properties and attributes in a type-safe manner.

Form decoupled from ModalForm

Previously, ModalForm expected a <span slot="header"> and <span slot="submit"> to determine the modal's title and submit button text, an arrangement that made it difficult to render fully-functional forms outside of modals. With this PR, ModalForm now queries its slotted form element for its heading and submitLabel properties, allowing the form to define these values itself.
ModalForm's ability to use slotted header and submit elements is left intact, allowing for backwards compatibility.

The opposite logic is also implemented. If a form element is rendered outside of an assigned slot, it will render the heading and submit elements itself, allowing it to render itself independently of a modal. This functionality is not yet used, but is available for future use.

What's Next

The next step is refactoring our ModalForm to include screen-reader support for modals. This is feature is tracked in #18916 and depends on this PR.