enhancement(Timepicker) styling updates

[gselderslaghs]

Proposed changes

Updated timepicker styling towards Material M3 standards #558

Removed all modal related wrappers and selectors
Implemented m3 theme vars
Refactored positioning, replaced relative and absolute properties with flex
Implemented additional accessibility

Screenshots (if appropriate) or codepen:

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 implemented autosubmit that can be used for the docked timepicker and reverted exclusion of confirm button interaction for handling with modal

Since the deprecation of open close methods in #525 the following method can be used for interaction with timepicker and modal

html

<div class="row">
    <div class="input-field datepicker-field s12">
        <input id="timepicker" type="text" class="timepicker">
        <label for="timepicker">Time</label>
    </div>
</div>

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

script

M.Timepicker.init(document.querySelectorAll('.timepicker'), {
    autoSubmit: false,
    container: '.modal',
    onInputInteraction: () => {
        toggleModal();
    },
});

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