Stencil is a really nice tool for building and maintaining of web components.

Pretty impressed how fast it can be learned as well as how many integrations it has.

Also I find fascinating Shadow DOM feature, which makes you components fully isolated (HTML, JavaScript, CSS) and accessible only through documented public methods.

Added form animation on successful submit.

• the form should be unaware of the component's multiple separate input fields, the input should be accessible as a single, combined value.
• the form should only be submittable when the combined value passes a self-chosen pattern / validation.
• basic input behaviour / state should apply (e.g. disabled, required).

To run the task for development, run:

npm install
npm start

To build the components for tests and production, run:

npm run build

To run the unit tests for the components, run:

npm test

Most of the time I spent for learning how to develop with Stencil and related challenges.

• Read Stencil documentation - 1h
• Implement From and Input components - 2h
• Implement Styling - 1h
• Add Unit and E2E tests - 1h
• Fixing bugs and other challenges - 1h

• Component documentation
• Components and classes namings
• Components are fully isolated using Shadow DOM
• Styles are constructed with Sass and easy adjustable using variables

• From the UX perspective in my opinion better:
  • Submit button should be always active
  • Validation happens on submit
  • Better performance - validation happens once instead of per every keypress
  • On Submit click with invalid inputs:
    • focus on first invalid input
    • show validation captions per every input
• Add CSS cross-browser compatibility (e.g. with Webpack plugins)

• Investigate why globalStyles are not applied in stencil.config.js (used index.html inline styles instead)
• Investigate how to get node with Input invalid class: expect(inputName).toHaveClass(':invalid') in reflect-input.e2e.ts