constructor() {
      super();

      /**
       * A Boolean attribute which, if present, indicates that the user should not be able to edit
       * the value of the input. The difference between disabled and readonly is that read-only
       * controls can still function, whereas disabled controls generally do not function as
       * controls until they are enabled.
       * (From: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)
       * @type {boolean}
       */
      this.readOnly = false;

      /**
       * The label text for the input node.
       * When no value is defined, textContent of [slot=label] will be used
       * @type {string}
       */
      this.label = '';

      /**
       * The label will only be visible for srceen readers when true
       * @type {boolean}
       */
      this.labelSrOnly = false;

      /**
       * The helpt text for the input node.
       * When no value is defined, textContent of [slot=help-text] will be used
       * @type {string}
       */
      this.helpText = '';

      /**
       * The model value is the result of the parser function(when available).
       * It should be considered as the internal value used for validation and reasoning/logic.
       * The model value is 'ready for consumption' by the outside world (think of a Date
       * object or a float). The modelValue can(and is recommended to) be used as both input
       * value and output value of the `LionField`.
       *
       * Examples:
       * - For a date input: a String '20/01/1999' will be converted to new Date('1999/01/20')
       * - For a number input: a formatted String '1.234,56' will be converted to a Number:
       *   1234.56
       */
      // TODO: we can probably set this up properly once propert effects run from firstUpdated
      // this.modelValue = undefined;
      /**
       * Unique id that can be used in all light dom
       * @type {string}
       * @protected
       */
      this._inputId = uuid(this.localName);

      /**
       * Contains all elements that should end up in aria-labelledby of `._inputNode`
       * @type {HTMLElement[]}
       */
      this._ariaLabelledNodes = [];

      /**
       * Contains all elements that should end up in aria-describedby of `._inputNode`
       * @type {HTMLElement[]}
       */
      this._ariaDescribedNodes = [];

      /**
       * Based on the role, details of handling model-value-changed repropagation differ.
       * @type {'child'|'choice-group'|'fieldset'}
       */
      this._repropagationRole = 'child';

      /**
       * By default, a field with _repropagationRole 'choice-group' will act as an
       * 'endpoint'. This means it will be considered as an individual field: for
       * a select, individual options will not be part of the formPath. They
       * will.
       * Similarly, components that (a11y wise) need to be fieldsets, but 'interaction wise'
       * (from Application Developer perspective) need to be more like fields
       * (think of an amount-input with a currency select box next to it), can set this
       * to true to hide private internals in the formPath.
       * @type {boolean}
       */
      this._isRepropagationEndpoint = false;

      this.addEventListener(
        'model-value-changed',
        /** @type {EventListenerOrEventListenerObject} */ (this.__repropagateChildrenValues),
      );
      /** @type {EventListener} */
      this._onLabelClick = this._onLabelClick.bind(this);
    }
TODO: check if this is a false positive or if we can improve
@configure ReactiveElement