@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

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

@@ -0,0 +1,536 @@
+/*!
+ * (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 { DateTime } from "luxon";
+import { i18nDsDate } from "./date.i18n";
+import { getDisplayFormat } from "./date.mask";
+import { raf } from "../../utils/index";
+export function checkIsWithinRange(iso, min, max, minYear, maxYear, allowedDates) {
+    const dt = DateTime.fromISO(iso);
+    if (!dt.isValid)
+        return false;
+    const date = dt.toJSDate();
+    if (minYear !== undefined && date < new Date(minYear, 0, 1))
+        return false;
+    if (maxYear !== undefined && date > new Date(maxYear, 11, 31))
+        return false;
+    if (min) {
+        const minDt = DateTime.fromISO(min);
+        if (minDt.isValid && date < minDt.toJSDate())
+            return false;
+    }
+    if (max) {
+        const maxDt = DateTime.fromISO(max);
+        if (maxDt.isValid && date > maxDt.toJSDate())
+            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 dt = DateTime.fromISO(this.config.defaultDate);
+                if (dt.isValid)
+                    this.airDatepicker.setViewDate(dt.toJSDate());
+            }
+            return;
+        }
+        const dt = DateTime.fromISO(value);
+        if (dt.isValid) {
+            this.airDatepicker.selectDate(dt.toJSDate(), { silent: true });
+        }
+    }
+    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="${i18nDsDate[language].switchToYearView}"><strong>MMMM yyyy</strong><ds-icon name="caret-down"></ds-icon></button>`,
+                months: `<button id="switch" aria-label="${i18nDsDate[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 = DateTime.fromJSDate(selected).toISODate();
+                if (!iso)
+                    return;
+                // 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 iso = DateTime.fromJSDate(date).toISODate();
+                const disabled = iso && this.config.allowedDates ? !this.config.allowedDates(iso) : 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', i18nDsDate[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 ? DateTime.fromISO(this.config.defaultDate).toJSDate() : 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 = i18nDsDate[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() {
+        if (this.config.minYear !== undefined)
+            return new Date(this.config.minYear, 0, 1);
+        if (this.config.min) {
+            const dt = DateTime.fromISO(this.config.min);
+            return dt.isValid ? dt.toJSDate() : undefined;
+        }
+        return undefined;
+    }
+    getMaxDate() {
+        if (this.config.maxYear !== undefined)
+            return new Date(this.config.maxYear, 11, 31);
+        if (this.config.max) {
+            const dt = DateTime.fromISO(this.config.max);
+            return dt.isValid ? dt.toJSDate() : undefined;
+        }
+        return undefined;
+    }
+}

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

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

package/dist/collection/components/date/test/date.component.play.js

@@ -0,0 +1,69 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsDate, expect, test } from "../../../../../../playwright/src/index";
+test.describe('type', () => {
+    test('should set value when typing a date', async ({ page }) => {
+        await page.mount(`<ds-date label="Date of birth"></ds-date>`);
+        const date = new DsDate(page.locator('ds-date'));
+        await date.type('13.07.2026');
+        await date.blur();
+        await page.waitForChanges();
+        await date.assertValue('13.07.2026');
+    });
+});
+test.describe('min / max', () => {
+    test('should accept a date within range when typed', async ({ page }) => {
+        await page.mount(`<ds-date label="Label" min="2026-07-10" max="2026-07-20"></ds-date>`);
+        const date = new DsDate(page.locator('ds-date'));
+        const changeSpy = await date.el.spyOnEvent('dsChange');
+        await date.type('15.07.2026');
+        await date.blur();
+        await page.waitForChanges();
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail('2026-07-15');
+        await date.assertValue('15.07.2026');
+    });
+    test('should reject a date below min when typed', async ({ page }) => {
+        await page.mount(`<ds-date label="Label" min="2026-07-10"></ds-date>`);
+        const date = new DsDate(page.locator('ds-date'));
+        const changeSpy = await date.el.spyOnEvent('dsChange');
+        await date.type('05.07.2026');
+        await date.blur();
+        await page.waitForChanges();
+        expect(changeSpy).toHaveReceivedEventTimes(0);
+        await date.assertValue('');
+    });
+    test('should reject a date above max when typed', async ({ page }) => {
+        await page.mount(`<ds-date label="Label" max="2026-07-20"></ds-date>`);
+        const date = new DsDate(page.locator('ds-date'));
+        const changeSpy = await date.el.spyOnEvent('dsChange');
+        await date.type('25.07.2026');
+        await date.blur();
+        await page.waitForChanges();
+        expect(changeSpy).toHaveReceivedEventTimes(0);
+        await date.assertValue('');
+    });
+    test('should accept a date within range when picked', async ({ page }) => {
+        await page.mount(`<ds-date label="Label" min="2026-07-01" max="2026-07-31"></ds-date>`);
+        const date = new DsDate(page.locator('ds-date'));
+        const changeSpy = await date.el.spyOnEvent('dsChange');
+        await date.pick('2026-07-15');
+        await page.waitForChanges();
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail('2026-07-15');
+        await date.assertValue('15.07.2026');
+    });
+});
+test.describe('pick', () => {
+    test('should select date via picker and emit dsChange', async ({ page }) => {
+        await page.mount(`<ds-date label="Date of birth"></ds-date>`);
+        const date = new DsDate(page.locator('ds-date'));
+        const changeSpy = await date.el.spyOnEvent('dsChange');
+        await date.pick('2026-07-13');
+        await page.waitForChanges();
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail('2026-07-13');
+        await date.assertValue('13.07.2026');
+    });
+});

package/dist/collection/components/date/test/date.visual.play.js

@@ -0,0 +1,43 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsDate, expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'date';
+const VARIANTS = [
+    'basic',
+    'form',
+    'min-max',
+    'free-solo',
+    'default-date',
+    'allowed-dates',
+    'disabled',
+    'invalid',
+    'valid',
+    'warning',
+    'loading',
+    'long-content',
+    'slots',
+    'form-reset',
+    'autocomplete',
+];
+const VARIANTS_WITH_PICKER = ['basic', 'min-max', 'default-date', 'allowed-dates'];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+});
+VARIANTS.forEach(variant => {
+    test(variant, async ({ page }) => {
+        const el = page.getByTestId(variant);
+        await expectScreenshot(el, image(variant));
+    });
+});
+VARIANTS_WITH_PICKER.forEach(variant => {
+    test(`${variant}-picker-open`, async ({ page }) => {
+        const section = page.getByTestId(variant);
+        const date = new DsDate(section.locator('ds-date').first());
+        await date.triggerButton.click();
+        await section.locator('ds-date').first().locator('.air-datepicker-cell.-day-').first().waitFor({ state: 'visible' });
+        await expectScreenshot(page.locator('body'), image(`${variant}-picker-open`));
+        await page.keyboard.press('Escape');
+    });
+});