Code quality: Improve consistency for property initialisation and defaulting

Description / User story

As a developer, I want to have consistent initialisation and defaulting of property declarations so that we can get rid of inline nullish checking. This is currently very inconsistent across component implementations and bloats our code.

Eg.: Some components declare and initialize properties like this

@property sizeVariant?: FormSizesType = 'md'

@property sizeVariant: FormSizesType = 'md'

The latter one means that from a compiler perspective sizeVariant will always be defined and does not need to be validated upon usage, reducing nullish checking operations in many parts of the code. This leads to better readability. This is just a simple example though and doesn't account for the fact that our properties and state are potentially initialized from attribute values or might be changed to invalid values from javascript.

We need to find a general strategy on how exactly we want to do this and then implement this strategy for all components.

Possible Solutions

A) Use custom accessors for defaulting and sanitizing - https://lit.dev/docs/components/properties/#accessors B) Use willUpdate lifecycle callback for defaulting and sanitizing - https://lit.dev/docs/components/lifecycle/#willupdate

Requirements / Prerequisites

none

Acceptance Criteria

[ ] If an attribute is set to an invalid value we need to default it to a valid one for each component (maybe start with only a few components)
[ ] All of our properties (in at least 5 components) should not be defined with a ? operator, except where undefined is a valid value
[ ] At least 5 components have been updated to the new approach
[ ] If not all components where updated with this task, a follow-up task has been created

Additional information

Code of Conduct

[X] I agree to follow this project's Code of Conduct

deven-org / boiler