@baloise/ds-core 20.0.0-next.10 → 20.0.0-next.11

package/dist/collection/components/datepicker/datepicker.picker.js

@@ -1,531 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import AirDatepicker from "air-datepicker";
-import localeDe from "air-datepicker/locale/de";
-import localeEn from "air-datepicker/locale/en";
-import localeEs from "air-datepicker/locale/es";
-import localeFi from "air-datepicker/locale/fi";
-import localeFr from "air-datepicker/locale/fr";
-import localeIt from "air-datepicker/locale/it";
-import localeNl from "air-datepicker/locale/nl";
-import localePl from "air-datepicker/locale/pl";
-import localePt from "air-datepicker/locale/pt";
-import localeSv from "air-datepicker/locale/sv";
-import { i18nDsDatepicker } from "./datepicker.i18n";
-import { getDisplayFormat, isoToNativeDate, nativeDateToISO } from "./datepicker.mask";
-import { raf } from "../../utils/index";
-// All comparisons below rely on `iso`, `min` and `max` being zero-padded
-// YYYY-MM-DD strings (as produced by nativeDateToISO / documented on the
-// `min`/`max` props) — fixed-width ISO dates compare correctly as plain
-// strings, so no Date objects need to be constructed here. `ISO_DATE_PATTERN`
-// guards `min`/`max`, which are consumer-supplied props that may be malformed.
-const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
-export function checkIsWithinRange(iso, min, max, minYear, maxYear, allowedDates) {
-    if (minYear !== undefined && iso < `${String(minYear).padStart(4, '0')}-01-01`)
-        return false;
-    if (maxYear !== undefined && iso > `${String(maxYear).padStart(4, '0')}-12-31`)
-        return false;
-    if (min && ISO_DATE_PATTERN.test(min) && iso < min)
-        return false;
-    if (max && ISO_DATE_PATTERN.test(max) && iso > max)
-        return false;
-    if (allowedDates && !allowedDates(iso))
-        return false;
-    return true;
-}
-export class DatepickerController {
-    constructor(config) {
-        this.currentViewType = 'days';
-        this.today = new Date();
-        this.startDate = new Date();
-        this.skipFocusOnNextRender = false;
-        this.handleGridKeydown = (e) => {
-            var _a, _b;
-            const key = e.key;
-            const current = this.startDate;
-            if (!current)
-                return;
-            if (key === 'Enter' || key === ' ') {
-                e.preventDefault();
-                const activeCell = this.getCells().find(c => c.tabIndex === 0);
-                if (activeCell)
-                    activeCell.click();
-                return;
-            }
-            const newDate = new Date(current);
-            const move = {
-                ArrowLeft: {
-                    days: () => newDate.setDate(current.getDate() - 1),
-                    months: () => newDate.setMonth(current.getMonth() - 1),
-                    years: () => newDate.setFullYear(current.getFullYear() - 1),
-                },
-                ArrowRight: {
-                    days: () => newDate.setDate(current.getDate() + 1),
-                    months: () => newDate.setMonth(current.getMonth() + 1),
-                    years: () => newDate.setFullYear(current.getFullYear() + 1),
-                },
-                ArrowUp: {
-                    days: () => newDate.setDate(current.getDate() - 7),
-                    months: () => newDate.setMonth(current.getMonth() - 3),
-                    years: () => newDate.setFullYear(current.getFullYear() - 4),
-                },
-                ArrowDown: {
-                    days: () => newDate.setDate(current.getDate() + 7),
-                    months: () => newDate.setMonth(current.getMonth() + 3),
-                    years: () => newDate.setFullYear(current.getFullYear() + 4),
-                },
-                Home: {
-                    days: () => newDate.setDate(1),
-                    months: () => newDate.setMonth(0),
-                    years: () => newDate.setFullYear(current.getFullYear() - (current.getFullYear() % 10)),
-                },
-                End: {
-                    days: () => newDate.setMonth(current.getMonth() + 1, 0),
-                    months: () => newDate.setMonth(11),
-                    years: () => newDate.setFullYear(current.getFullYear() - (current.getFullYear() % 10) + 9),
-                },
-                PageUp: {
-                    days: () => newDate.setMonth(current.getMonth() - 1),
-                    months: () => newDate.setFullYear(current.getFullYear() - 1),
-                    years: () => newDate.setFullYear(current.getFullYear() - 10),
-                },
-                PageDown: {
-                    days: () => newDate.setMonth(current.getMonth() + 1),
-                    months: () => newDate.setFullYear(current.getFullYear() + 1),
-                    years: () => newDate.setFullYear(current.getFullYear() + 10),
-                },
-            };
-            if (!((_a = move[key]) === null || _a === void 0 ? void 0 : _a[this.currentViewType]))
-                return;
-            e.preventDefault();
-            move[key][this.currentViewType]();
-            const monthChanged = current.getMonth() !== newDate.getMonth() || current.getFullYear() !== newDate.getFullYear();
-            if (monthChanged) {
-                this.skipFocusOnNextRender = false;
-                (_b = this.airDatepicker) === null || _b === void 0 ? void 0 : _b.setViewDate(newDate);
-                raf(() => {
-                    this.setActiveCell(newDate, true);
-                });
-            }
-            else {
-                this.setActiveCell(newDate, true);
-            }
-        };
-        this.handleTab = (e) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            if (e.key !== 'Tab' && e.key !== 'Escape')
-                return;
-            if (e.key === 'Escape') {
-                e.stopPropagation();
-                this.config.onClose();
-                return;
-            }
-            const active = e.target;
-            const activeCell = this.getCells().find(c => c.tabIndex === 0);
-            const isGridCell = (active === null || active === void 0 ? void 0 : active.getAttribute('role')) === 'option';
-            // Tab cycle (forward): option → titleBtn → prevBtn → nextBtn → option
-            // Years view skips titleBtn:  option → prevBtn → nextBtn → option
-            // Tab cycle (backward): reverse of the above
-            if (!e.shiftKey) {
-                if (isGridCell) {
-                    e.preventDefault();
-                    if (this.currentViewType === 'years') {
-                        (_a = this.prevBtn) === null || _a === void 0 ? void 0 : _a.focus();
-                    }
-                    else {
-                        (_b = this.titleBtn) === null || _b === void 0 ? void 0 : _b.focus();
-                    }
-                }
-                else if (active === this.titleBtn) {
-                    e.preventDefault();
-                    (_c = this.prevBtn) === null || _c === void 0 ? void 0 : _c.focus();
-                }
-                else if (active === this.prevBtn) {
-                    e.preventDefault();
-                    (_d = this.nextBtn) === null || _d === void 0 ? void 0 : _d.focus();
-                }
-                else if (active === this.nextBtn) {
-                    e.preventDefault();
-                    activeCell === null || activeCell === void 0 ? void 0 : activeCell.focus();
-                }
-            }
-            else {
-                if (isGridCell) {
-                    e.preventDefault();
-                    (_e = this.nextBtn) === null || _e === void 0 ? void 0 : _e.focus();
-                }
-                else if (active === this.nextBtn) {
-                    e.preventDefault();
-                    (_f = this.prevBtn) === null || _f === void 0 ? void 0 : _f.focus();
-                }
-                else if (active === this.prevBtn) {
-                    e.preventDefault();
-                    if (this.currentViewType === 'years') {
-                        activeCell === null || activeCell === void 0 ? void 0 : activeCell.focus();
-                    }
-                    else {
-                        (_g = this.titleBtn) === null || _g === void 0 ? void 0 : _g.focus();
-                    }
-                }
-                else if (active === this.titleBtn) {
-                    e.preventDefault();
-                    activeCell === null || activeCell === void 0 ? void 0 : activeCell.focus();
-                }
-            }
-        };
-        this.handlePrevNextClick = () => {
-            this.skipFocusOnNextRender = true;
-        };
-        this.forceTitleClickToYear = () => {
-            if (this.airDatepicker) {
-                this.airDatepicker.setCurrentView('years');
-            }
-        };
-        this.config = config;
-        this.init();
-    }
-    /**
-     * PUBLIC API
-     * ------------------------------------------------------
-     */
-    open() {
-        this.config.shadowRoot.removeEventListener('keydown', this.handleTab, true);
-        this.config.shadowRoot.addEventListener('keydown', this.handleTab, true);
-        raf(() => this.enhanceAccessibility(true));
-    }
-    close() {
-        this.config.shadowRoot.removeEventListener('keydown', this.handleTab, true);
-    }
-    syncFromValue(value) {
-        if (!this.airDatepicker)
-            return;
-        if (!value) {
-            this.airDatepicker.clear({ silent: true });
-            if (this.config.defaultDate) {
-                const date = isoToNativeDate(this.config.defaultDate);
-                if (date)
-                    this.airDatepicker.setViewDate(date);
-            }
-            return;
-        }
-        const date = isoToNativeDate(value);
-        if (date) {
-            this.airDatepicker.selectDate(date, { silent: true });
-            // selectDate only moves the calendar view itself for some navigation cases (e.g. a
-            // month change within `moveToOtherMonthsOnSelect`), not for every value change — a value
-            // typed directly into the input (e.g. 01.01.2024 -> 01.01.2025) leaves the view where it
-            // was. Explicitly navigate so the popup always opens on the month/year of the current value.
-            this.airDatepicker.setViewDate(date);
-        }
-    }
-    updateLocale(language, region) {
-        var _a;
-        this.config = Object.assign(Object.assign({}, this.config), { language, region });
-        (_a = this.airDatepicker) === null || _a === void 0 ? void 0 : _a.update({
-            locale: this.getLocale(),
-            dateFormat: getDisplayFormat(region),
-        });
-    }
-    updateMin(min, minYear) {
-        var _a;
-        this.config = Object.assign(Object.assign({}, this.config), { min, minYear });
-        (_a = this.airDatepicker) === null || _a === void 0 ? void 0 : _a.update({ minDate: this.getMinDate() });
-    }
-    updateMax(max, maxYear) {
-        var _a;
-        this.config = Object.assign(Object.assign({}, this.config), { max, maxYear });
-        (_a = this.airDatepicker) === null || _a === void 0 ? void 0 : _a.update({ maxDate: this.getMaxDate() });
-    }
-    clear(opts) {
-        var _a;
-        (_a = this.airDatepicker) === null || _a === void 0 ? void 0 : _a.clear(opts);
-    }
-    destroy() {
-        var _a, _b, _c, _d, _e, _f;
-        this.config.shadowRoot.removeEventListener('keydown', this.handleTab, true);
-        (_a = this.titleBtn) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.forceTitleClickToYear);
-        (_b = this.prevBtn) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.handlePrevNextClick);
-        (_c = this.nextBtn) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', this.handlePrevNextClick);
-        const body = this.config.popupHostEl.querySelector('.air-datepicker-body--cells');
-        body === null || body === void 0 ? void 0 : body.removeEventListener('keydown', this.handleGridKeydown);
-        (_d = this.gridObserver) === null || _d === void 0 ? void 0 : _d.disconnect();
-        (_e = this.navObserver) === null || _e === void 0 ? void 0 : _e.disconnect();
-        (_f = this.airDatepicker) === null || _f === void 0 ? void 0 : _f.destroy();
-        this.airDatepicker = undefined;
-    }
-    /**
-     * PRIVATE
-     * ------------------------------------------------------
-     */
-    init() {
-        var _a, _b;
-        const { popupHostEl, language, region } = this.config;
-        this.airDatepicker = new AirDatepicker(popupHostEl, {
-            navTitles: {
-                days: `<button id="switch" aria-label="${i18nDsDatepicker[language].switchToYearView}"><strong>MMMM yyyy</strong><ds-icon name="caret-down"></ds-icon></button>`,
-                months: `<button id="switch" aria-label="${i18nDsDatepicker[language].switchToYearView}"><strong>yyyy</strong><ds-icon name="caret-down"></ds-icon></button>`,
-            },
-            prevHtml: '<button id="previous"><ds-icon name="caret-left"></ds-icon></button><div id="previous-disabled"><ds-icon name="caret-left"></ds-icon></div>',
-            nextHtml: '<button id="next"><ds-icon name="caret-right"></ds-icon></button><div id="next-disabled"><ds-icon name="caret-right"></ds-icon></div>',
-            minDate: this.getMinDate(),
-            maxDate: this.getMaxDate(),
-            inline: true,
-            autoClose: true,
-            showOtherYears: true,
-            selectOtherYears: true,
-            showOtherMonths: false,
-            moveToOtherMonthsOnSelect: true,
-            view: 'days',
-            locale: this.getLocale(),
-            dateFormat: getDisplayFormat(region),
-            onChangeView: view => {
-                this.currentViewType = view;
-                raf(() => {
-                    this.enhanceAccessibility();
-                });
-            },
-            onChangeViewDate: ({ month, year }) => {
-                this.currentViewYear = year;
-                this.currentViewMonth = month;
-                this.updateNavigationButtonLabels();
-            },
-            onSelect: ({ date }) => {
-                const selected = Array.isArray(date) ? date[0] : date;
-                // If the user clicks on the currently selected date, the datepicker will return an empty array.
-                // In this case, we treat it as a "clear" action.
-                if (!selected) {
-                    this.config.onSelect(null);
-                    return;
-                }
-                const iso = nativeDateToISO(selected);
-                // Update the aria-selected attribute on all cells to reflect the new selection
-                this.getCells().forEach(c => {
-                    c.setAttribute('role', 'option');
-                    c.setAttribute('aria-selected', c.classList.contains('-selected-') ? 'true' : 'false');
-                });
-                this.config.onSelect(iso);
-            },
-            onShow: () => {
-                this.enhanceAccessibility();
-            },
-            onRenderCell: ({ date, cellType }) => {
-                if (cellType !== 'day')
-                    return {};
-                const label = new Intl.DateTimeFormat(this.config.language, {
-                    weekday: 'long',
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
-                }).format(date);
-                const disabled = this.config.allowedDates ? !this.config.allowedDates(nativeDateToISO(date)) : false;
-                return { attrs: { 'aria-label': label }, disabled };
-            },
-        });
-        (_a = this.prevBtn) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.handlePrevNextClick);
-        (_b = this.nextBtn) === null || _b === void 0 ? void 0 : _b.addEventListener('click', this.handlePrevNextClick);
-        this.syncFromValue(this.config.initialValue);
-        this.setupGridObserver();
-        this.setupNavObserver();
-    }
-    enhanceAccessibility(focusOnDate = true) {
-        var _a, _b, _c;
-        const { popupHostEl } = this.config;
-        let body = popupHostEl.querySelector('.air-datepicker-body--cells');
-        if (this.currentViewType === 'months') {
-            body = popupHostEl.querySelector('.air-datepicker-body--cells.-months-');
-        }
-        else if (this.currentViewType === 'years') {
-            body = popupHostEl.querySelector('.air-datepicker-body--cells.-years-');
-        }
-        if (!body)
-            return;
-        body.setAttribute('role', 'listbox');
-        body.setAttribute('aria-label', i18nDsDatepicker[this.config.language].selectDate);
-        this.getCells().forEach(c => {
-            c.setAttribute('role', 'option');
-            c.setAttribute('aria-selected', c.classList.contains('-selected-') ? 'true' : 'false');
-            if (c.classList.contains('-current-')) {
-                c.setAttribute('aria-current', 'date');
-            }
-        });
-        body.removeEventListener('keydown', this.handleGridKeydown);
-        body.addEventListener('keydown', this.handleGridKeydown);
-        const selected = (_b = (_a = this.airDatepicker) === null || _a === void 0 ? void 0 : _a.selectedDates[0]) !== null && _b !== void 0 ? _b : null;
-        const defaultDateObj = !selected && this.config.defaultDate ? isoToNativeDate(this.config.defaultDate) : null;
-        this.setActiveCell((_c = selected !== null && selected !== void 0 ? selected : defaultDateObj) !== null && _c !== void 0 ? _c : this.today, focusOnDate);
-    }
-    updateNavigationButtonLabels() {
-        var _a, _b, _c, _d, _e, _f;
-        const t = i18nDsDatepicker[this.config.language];
-        if (this.currentViewType === 'months') {
-            (_a = this.prevBtn) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-label', t.previousYear);
-            (_b = this.nextBtn) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-label', t.nextYear);
-        }
-        else if (this.currentViewType === 'years') {
-            (_c = this.prevBtn) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-label', t.previousDecade);
-            (_d = this.nextBtn) === null || _d === void 0 ? void 0 : _d.setAttribute('aria-label', t.nextDecade);
-        }
-        else {
-            (_e = this.prevBtn) === null || _e === void 0 ? void 0 : _e.setAttribute('aria-label', t.previousMonth);
-            (_f = this.nextBtn) === null || _f === void 0 ? void 0 : _f.setAttribute('aria-label', t.nextMonth);
-        }
-    }
-    getCells() {
-        const { popupHostEl } = this.config;
-        let selector = '';
-        switch (this.currentViewType) {
-            case 'days':
-                selector = '.air-datepicker-cell.-day-';
-                break;
-            case 'months':
-                selector = '.air-datepicker-cell.-month-';
-                break;
-            case 'years':
-                selector = '.air-datepicker-cell.-year-';
-                break;
-        }
-        return Array.from(popupHostEl.querySelectorAll(selector));
-    }
-    get prevBtn() {
-        return this.config.shadowRoot.querySelector('[data-action="prev"] button');
-    }
-    get nextBtn() {
-        return this.config.shadowRoot.querySelector('[data-action="next"] button');
-    }
-    get titleBtn() {
-        return this.config.shadowRoot.querySelector('.air-datepicker-nav--title button');
-    }
-    setActiveCell(date, focusOnDate = true) {
-        const cells = this.getCells();
-        if (cells.length === 0)
-            return;
-        let target;
-        if (this.currentViewType === 'days') {
-            target = cells.find(c => Number(c.dataset['date']) === date.getDate() &&
-                Number(c.dataset['month']) === date.getMonth() &&
-                Number(c.dataset['year']) === date.getFullYear());
-            if (!target) {
-                const firstOfMonth = new Date(this.currentViewYear, this.currentViewMonth, 1);
-                target = cells.find(c => Number(c.dataset['date']) === 1 &&
-                    Number(c.dataset['month']) === firstOfMonth.getMonth() &&
-                    Number(c.dataset['year']) === firstOfMonth.getFullYear() &&
-                    !c.classList.contains('-other-month-'));
-            }
-        }
-        else if (this.currentViewType === 'months') {
-            target = cells.find(c => Number(c.dataset['month']) === date.getMonth() && Number(c.dataset['year']) === date.getFullYear());
-            if (!target) {
-                target = cells.find(c => !c.classList.contains('-other-year-'));
-            }
-        }
-        else {
-            target = cells.find(c => Number(c.dataset['year']) === date.getFullYear());
-            if (!target) {
-                target = cells.find(c => !c.classList.contains('-other-decade-'));
-            }
-        }
-        if (!target) {
-            target = cells[cells.length - 1];
-        }
-        cells.forEach(c => (c.tabIndex = -1));
-        target.tabIndex = 0;
-        if (focusOnDate) {
-            target.focus();
-        }
-        this.startDate = new Date(Number(target.dataset['year']), Number(target.dataset['month']), Number(target.dataset['date']));
-    }
-    reorderNavigation() {
-        const nav = this.config.popupHostEl.querySelector('.air-datepicker-nav');
-        if (!nav)
-            return;
-        const prev = nav.querySelector('[data-action="prev"]');
-        const title = nav.querySelector('.air-datepicker-nav--title');
-        if (!prev || !title)
-            return;
-        // Guard: insertBefore always fires a mutation record even when the node is
-        // already in the right position, which would re-trigger the navObserver
-        // and create an infinite loop.
-        if (prev.previousElementSibling === title)
-            return;
-        nav.insertBefore(title, prev);
-    }
-    attachTitleBtnListener() {
-        raf(() => {
-            if (!this.titleBtn)
-                return;
-            this.titleBtn.onclick = null;
-            this.titleBtn.removeEventListener('click', this.forceTitleClickToYear);
-            this.titleBtn.addEventListener('click', this.forceTitleClickToYear, { capture: true });
-        });
-    }
-    setupGridObserver() {
-        var _a;
-        if (typeof MutationObserver === 'undefined')
-            return;
-        const grid = this.config.popupHostEl.querySelector('.air-datepicker-body--cells');
-        if (!grid)
-            return;
-        (_a = this.gridObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.gridObserver = new MutationObserver(mutations => {
-            const changed = mutations.some(m => m.type === 'childList');
-            if (!changed)
-                return;
-            raf(() => {
-                this.enhanceAccessibility(!this.skipFocusOnNextRender);
-                this.skipFocusOnNextRender = false;
-            });
-        });
-        this.gridObserver.observe(grid, { childList: true, subtree: false });
-    }
-    setupNavObserver() {
-        var _a;
-        if (typeof MutationObserver === 'undefined')
-            return;
-        const nav = this.config.popupHostEl.querySelector('.air-datepicker-nav');
-        if (!nav)
-            return;
-        (_a = this.navObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.updateNavigationButtonLabels();
-        this.reorderNavigation();
-        this.attachTitleBtnListener();
-        this.navObserver = new MutationObserver(() => {
-            this.updateNavigationButtonLabels();
-            this.reorderNavigation();
-            this.attachTitleBtnListener();
-        });
-        this.navObserver.observe(nav, { childList: true, subtree: true });
-    }
-    getLocale() {
-        var _a;
-        const localeMap = {
-            de: localeDe,
-            en: localeEn,
-            es: localeEs,
-            fi: localeFi,
-            fr: localeFr,
-            it: localeIt,
-            nl: localeNl,
-            pl: localePl,
-            pt: localePt,
-            sv: localeSv,
-        };
-        return (_a = localeMap[this.config.language]) !== null && _a !== void 0 ? _a : localeDe;
-    }
-    getMinDate() {
-        var _a;
-        if (this.config.minYear !== undefined)
-            return new Date(this.config.minYear, 0, 1);
-        if (this.config.min)
-            return (_a = isoToNativeDate(this.config.min)) !== null && _a !== void 0 ? _a : undefined;
-        return undefined;
-    }
-    getMaxDate() {
-        var _a;
-        if (this.config.maxYear !== undefined)
-            return new Date(this.config.maxYear, 11, 31);
-        if (this.config.max)
-            return (_a = isoToNativeDate(this.config.max)) !== null && _a !== void 0 ? _a : undefined;
-        return undefined;
-    }
-}

package/dist/collection/components/datepicker/test/datepicker.a11y.play.js

@@ -1,32 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { DsDatepicker, test } from "../../../../../../playwright/src/index";
-test('basic', async ({ page, a11y }) => {
-    await page.mount(`<ds-datepicker label="Date of birth"></ds-datepicker>`);
-    await a11y('ds-datepicker');
-});
-test('with value', async ({ page, a11y }) => {
-    await page.mount(`<ds-datepicker label="Date of birth" value="2026-07-13"></ds-datepicker>`);
-    await a11y('ds-datepicker');
-});
-test('disabled', async ({ page, a11y }) => {
-    await page.mount(`<ds-datepicker label="Date of birth" disabled></ds-datepicker>`);
-    await a11y('ds-datepicker');
-});
-test('invalid', async ({ page, a11y }) => {
-    await page.mount(`<ds-datepicker label="Date of birth" invalid invalid-text="Please enter a valid date"></ds-datepicker>`);
-    await a11y('ds-datepicker');
-});
-test('inline', async ({ page, a11y }) => {
-    await page.mount(`<ds-datepicker label="Date of birth" inline></ds-datepicker>`);
-    await page.locator('.air-datepicker-cell.-day-:not(.-other-month-)').first().waitFor({ state: 'visible' });
-    await a11y('ds-datepicker');
-});
-test('with picker open', async ({ page, a11y }) => {
-    await page.mount(`<ds-datepicker label="Date of birth"></ds-datepicker>`);
-    const date = new DsDatepicker(page.locator('ds-datepicker'));
-    await date.triggerButton.click();
-    await page.locator('.air-datepicker-cell.-day-:not(.-other-month-)').first().waitFor({ state: 'visible' });
-    await a11y('ds-datepicker');
-});