enhancement(Datepicker) styling refactor

[gselderslaghs]

Proposed changes

This issue is a follow up of #558, making great steps towards a M3 compatible datepicker

Changelog
Removed all modal related selectors #525
Refactored styling, removed flex row styling so left face gets on top #558
Refactored tag selectors to class selectors since it has advantages on specificity #558
Implemented date range styling #360
Implemented ability to use user defined end date input field via option dateRangeEndEl: <selector> #360
Implemented option openByDefault #558
Implemented input field interaction callback function #525
Implemented functionality to render date format below the field in the input field supporting text section #558

Todos
Handling toggling visibility of the docked picker since open and close is deprecated since v2.2.1 and the event handlers inside the component for handling the interaction open/close should be removed, discussion in #570 about making a global utility function with callback function so it's reusable with multiple components

Examples
Implement datepicker with user defined end date element and supporting text for rendering format:

<div class="input-field datepicker-field">
    <input type="text" class="datepicker" id="datepicker">
    <label for="datepicker">Date</label>
    <span class="supporting-text datepicker-format"></span>
</div>
<div class="input-field datepicker-field">
    <input type="text" class="datepicker-end-date" id="datepicker-end-date">
    <label for="datepicker-end-date">End date</label>
    <span class="supporting-text datepicker-format"></span>
</div>

M.Datepicker.init(document.querySelector('.datepicker'), { isDateRange: true, dateRangeEndEl: '.datepicker-end-date' })

Currently we can work with the callback function for opening and closing in modal (or any specified user element) by using the container option

<dialog class="modal" style="width: 325px"></dialog>

M.Datepicker.init(input, {
    container: '.modal',
    onInputInteraction: () => {
        toggleModal();
    },
    onConfirmInteraction: () => {
        toggleModal();
    },
    onCancelInteraction: () => {
        toggleModal();
    },
});

const modal = document.querySelector('.modal');
toggleModal = () => {
    if (!modal.hasAttribute('open')) {
        modal.setAttribute('open', 'true');
    } else {
        modal.removeAttribute('open');
    }
}

This could also work with the docked Datepicker in openByDefault: false state with following example, but would additionally require the cancel/confirm buttons to work, propose to follow up the docked datepicker in #140 after #570 is cleared out

const datepickerContainer = M.Datepicker.getInstance(input);
toggleVisibility = () => {
    if (!!datepickerContainer.containerEl.style.visibility === true) {
        datepickerContainer.containerEl.removeAttribute('style');
    }
}

Types of changes

• Bug fix (non-breaking change which fixes an issue).
• New feature (non-breaking change which adds functionality).
• Breaking change (fix or feature that would cause existing functionality to change).

Checklist:

• I have read the CONTRIBUTING document.
• My commit messages follows the conventional commit format
• My change requires a change to the documentation, and updated it accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

[gselderslaghs]

Additionally classmapped the calendar day css selectors and aria-selected attributes, guess the inline html could also need some optimization in point of view regarding coding standards

Here is how the calendar currently looks like with date range selector

Optimized accessibility focus states on navigation buttons