@lmvz-ds/components 0.35.2 → 0.36.1

package/collection/components/lmvz-datepicker/lmvz-datepicker.utils.js

@@ -0,0 +1,189 @@
+import * as CalendarFns from "temporal-polyfill/fns/Calendar";
+import * as PlainDateFns from "temporal-polyfill/fns/PlainDate";
+import * as PlainYearMonthFns from "temporal-polyfill/fns/PlainYearMonth";
+import { parseIsoDateSafely } from "@lmvz-ds/lib-ts/date/temporal.js";
+export function isSelected(date, value) {
+    if (!value)
+        return false;
+    return PlainDateFns.compare(date, value) === 0;
+}
+export function isDisabled(date, min, max) {
+    if (min && PlainDateFns.compare(date, min) < 0)
+        return true;
+    if (max && PlainDateFns.compare(date, max) > 0)
+        return true;
+    return false;
+}
+export function buildCalendarGrid(visibleMonth) {
+    const firstOfMonth = PlainYearMonthFns.toPlainDate(visibleMonth, { day: 1 });
+    const firstDow = PlainDateFns.dayOfWeek(firstOfMonth);
+    const offsetToMonday = firstDow - 1;
+    const gridStart = PlainDateFns.addDays(firstOfMonth, -offsetToMonday);
+    const grid = [];
+    for (let i = 0; i < 42; i++) {
+        grid.push(PlainDateFns.addDays(gridStart, i));
+    }
+    if (PlainYearMonthFns.compare(visibleMonth, PlainDateFns.toPlainYearMonth(grid.at(-7))) !== 0) {
+        return grid.slice(0, -7);
+    }
+    return grid;
+}
+export function isInFirstWeekOfMonth(date) {
+    return PlainYearMonthFns.compare(PlainDateFns.toPlainYearMonth(PlainDateFns.addDays(date, -7)), PlainDateFns.toPlainYearMonth(date)) !== 0;
+}
+export function isInLastWeekOfMonth(date) {
+    return PlainYearMonthFns.compare(PlainDateFns.toPlainYearMonth(PlainDateFns.addDays(date, 7)), PlainDateFns.toPlainYearMonth(date)) !== 0;
+}
+export function firstSelectableDayOfMonth(visibleMonth, min, max) {
+    const daysInMonth = PlainYearMonthFns.daysInMonth(visibleMonth);
+    for (let d = 1; d <= daysInMonth; d++) {
+        const candidate = PlainYearMonthFns.toPlainDate(visibleMonth, { day: d });
+        if (!isDisabled(candidate, min, max))
+            return candidate;
+    }
+    return null;
+}
+export function lastSelectableDayOfMonth(visibleMonth, min, max) {
+    const daysInMonth = PlainYearMonthFns.daysInMonth(visibleMonth);
+    for (let d = daysInMonth; d >= 1; d--) {
+        const candidate = PlainYearMonthFns.toPlainDate(visibleMonth, { day: d });
+        if (!isDisabled(candidate, min, max))
+            return candidate;
+    }
+    return null;
+}
+const NAV_LABELS = {
+    de: { prev: 'Vorheriger Monat', next: 'Nächster Monat' },
+    'de-CH': { prev: 'Vorheriger Monat', next: 'Nächster Monat' },
+    'de-AT': { prev: 'Vorheriger Monat', next: 'Nächster Monat' },
+    'de-DE': { prev: 'Vorheriger Monat', next: 'Nächster Monat' },
+    en: { prev: 'Previous month', next: 'Next month' },
+    'en-US': { prev: 'Previous month', next: 'Next month' },
+    'en-GB': { prev: 'Previous month', next: 'Next month' },
+    fr: { prev: 'Mois précédent', next: 'Mois suivant' },
+    'fr-CH': { prev: 'Mois précédent', next: 'Mois suivant' },
+    it: { prev: 'Mese precedente', next: 'Mese successivo' },
+    'it-CH': { prev: 'Mese precedente', next: 'Mese successivo' },
+};
+export function getNavLabels(locale) {
+    const DEFAULT = { prev: 'Vorheriger Monat', next: 'Nächster Monat' };
+    const byLocale = NAV_LABELS[locale];
+    if (byLocale)
+        return byLocale;
+    const lang = locale.split('-')[0];
+    const byLang = lang !== undefined ? NAV_LABELS[lang] : undefined;
+    if (byLang)
+        return byLang;
+    return DEFAULT;
+}
+const VALIDATION_LABELS = {
+    de: { popoverSuffix: '— Kalender', invalidDateMessage: 'Ungültiges Datum' },
+    'de-CH': { popoverSuffix: '— Kalender', invalidDateMessage: 'Ungültiges Datum' },
+    'de-AT': { popoverSuffix: '— Kalender', invalidDateMessage: 'Ungültiges Datum' },
+    'de-DE': { popoverSuffix: '— Kalender', invalidDateMessage: 'Ungültiges Datum' },
+    en: { popoverSuffix: '— Calendar', invalidDateMessage: 'Invalid date' },
+    'en-US': { popoverSuffix: '— Calendar', invalidDateMessage: 'Invalid date' },
+    'en-GB': { popoverSuffix: '— Calendar', invalidDateMessage: 'Invalid date' },
+    fr: { popoverSuffix: '— Calendrier', invalidDateMessage: 'Date invalide' },
+    'fr-CH': { popoverSuffix: '— Calendrier', invalidDateMessage: 'Date invalide' },
+    it: { popoverSuffix: '— Calendario', invalidDateMessage: 'Data non valida' },
+    'it-CH': { popoverSuffix: '— Calendario', invalidDateMessage: 'Data non valida' },
+};
+export function getValidationLabels(locale) {
+    const DEFAULT = { popoverSuffix: '— Kalender', invalidDateMessage: 'Ungültiges Datum' };
+    const byLocale = VALIDATION_LABELS[locale];
+    if (byLocale)
+        return byLocale;
+    const lang = locale.split('-')[0];
+    const byLang = lang !== undefined ? VALIDATION_LABELS[lang] : undefined;
+    if (byLang)
+        return byLang;
+    return DEFAULT;
+}
+const FORMAT_TOKEN_ORDER = ['yyyy', 'MM', 'dd'];
+export function derivePatternFromLocale(locale) {
+    const reference = new Date(Date.UTC(2001, 10, 22));
+    const parts = new Intl.DateTimeFormat(locale, { year: 'numeric', month: '2-digit', day: '2-digit', timeZone: 'UTC' }).formatToParts(reference);
+    return parts
+        .map((part) => {
+        switch (part.type) {
+            case 'year':
+                return 'yyyy';
+            case 'month':
+                return 'MM';
+            case 'day':
+                return 'dd';
+            default:
+                return part.value;
+        }
+    })
+        .join('');
+}
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function buildPatternMatcher(pattern) {
+    const order = [];
+    let regexSource = '';
+    let i = 0;
+    while (i < pattern.length) {
+        const token = FORMAT_TOKEN_ORDER.find((t) => pattern.startsWith(t, i));
+        if (token) {
+            regexSource += token === 'yyyy' ? '(\\d{4})' : '(\\d{1,2})';
+            order.push(token);
+            i += token.length;
+        }
+        else {
+            regexSource += escapeRegExp(pattern[i]);
+            i += 1;
+        }
+    }
+    return { regex: new RegExp(`^${regexSource}$`), order };
+}
+function isValidCalendarDate(year, month, day) {
+    if (!Number.isInteger(year) || year < 1)
+        return false;
+    if (!Number.isInteger(month) || month < 1 || month > 12)
+        return false;
+    if (!Number.isInteger(day) || day < 1)
+        return false;
+    try {
+        const ym = PlainYearMonthFns.fromString(`${String(year).padStart(4, '0')}-${String(month).padStart(2, '0')}`, CalendarFns.getBasic);
+        return day <= PlainYearMonthFns.daysInMonth(ym);
+    }
+    catch {
+        return false;
+    }
+}
+export function formatToDisplay(value, locale, displayFormat) {
+    if (!value)
+        return '';
+    const date = parseIsoDateSafely(value);
+    if (!date)
+        return '';
+    const pattern = displayFormat ?? derivePatternFromLocale(locale);
+    const yyyy = String(date.year).padStart(4, '0');
+    const MM = String(date.month).padStart(2, '0');
+    const dd = String(date.day).padStart(2, '0');
+    return pattern.replace(/yyyy/g, yyyy).replace(/MM/g, MM).replace(/dd/g, dd);
+}
+export function parseFromDisplay(text, locale, displayFormat) {
+    const trimmed = text.trim();
+    if (!trimmed)
+        return undefined;
+    const pattern = displayFormat ?? derivePatternFromLocale(locale);
+    const { regex, order } = buildPatternMatcher(pattern);
+    const match = regex.exec(trimmed);
+    if (!match)
+        return undefined;
+    const values = {};
+    order.forEach((token, idx) => {
+        values[token] = Number(match[idx + 1]);
+    });
+    const { yyyy, MM, dd } = values;
+    if (yyyy === undefined || MM === undefined || dd === undefined)
+        return undefined;
+    if (!isValidCalendarDate(yyyy, MM, dd))
+        return undefined;
+    return `${String(yyyy).padStart(4, '0')}-${String(MM).padStart(2, '0')}-${String(dd).padStart(2, '0')}`;
+}

package/collection/components/lmvz-datepicker/test/lmvz-datepicker.utils.unit.js

@@ -0,0 +1,300 @@
+import { describe, expect, it } from "vitest";
+import * as CalendarFns from "temporal-polyfill/fns/Calendar";
+import * as PlainDateFns from "temporal-polyfill/fns/PlainDate";
+import * as PlainYearMonthFns from "temporal-polyfill/fns/PlainYearMonth";
+import { toIsoYearMonthString } from "@lmvz-ds/lib-ts/date/temporal.js";
+import { buildCalendarGrid, derivePatternFromLocale, firstSelectableDayOfMonth, formatToDisplay, getNavLabels, getValidationLabels, isDisabled, isInFirstWeekOfMonth, isInLastWeekOfMonth, isSelected, lastSelectableDayOfMonth, parseFromDisplay, } from "../lmvz-datepicker.utils";
+function ym(isoYearMonth) {
+    return PlainYearMonthFns.fromString(isoYearMonth, CalendarFns.getBasic);
+}
+function pd(iso) {
+    return PlainDateFns.fromString(iso, CalendarFns.getBasic);
+}
+describe('isSelected', () => {
+    it('returns true when date matches value', () => {
+        expect(isSelected(pd('2024-06-15'), pd('2024-06-15'))).toBe(true);
+    });
+    it('returns false when date does not match value', () => {
+        expect(isSelected(pd('2024-06-15'), pd('2024-06-16'))).toBe(false);
+    });
+    it('returns false when value is undefined', () => {
+        expect(isSelected(pd('2024-06-15'), undefined)).toBe(false);
+    });
+});
+describe('isDisabled', () => {
+    const date = pd('2024-06-15');
+    it('returns false when no bounds', () => {
+        expect(isDisabled(date, undefined, undefined)).toBe(false);
+    });
+    it('returns true when date is before min', () => {
+        expect(isDisabled(date, pd('2024-06-20'), undefined)).toBe(true);
+    });
+    it('returns false when date equals min', () => {
+        expect(isDisabled(date, pd('2024-06-15'), undefined)).toBe(false);
+    });
+    it('returns true when date is after max', () => {
+        expect(isDisabled(date, undefined, pd('2024-06-10'))).toBe(true);
+    });
+    it('returns false when date equals max', () => {
+        expect(isDisabled(date, undefined, pd('2024-06-15'))).toBe(false);
+    });
+    it('returns false when date is within [min, max]', () => {
+        expect(isDisabled(date, pd('2024-06-01'), pd('2024-06-30'))).toBe(false);
+    });
+});
+describe('buildCalendarGrid', () => {
+    it('returns 35 cells when the last padded week is entirely in the next month (2024-06)', () => {
+        expect(buildCalendarGrid(ym('2024-06')).length).toBe(35);
+    });
+    it('returns 42 cells when the last padded week spills into the next month (2024-09)', () => {
+        expect(buildCalendarGrid(ym('2024-09')).length).toBe(42);
+    });
+    it('starts on a Monday', () => {
+        const grid = buildCalendarGrid(ym('2024-06'));
+        const first = grid[0];
+        expect(PlainDateFns.toString(first)).toBe('2024-05-27');
+        expect(PlainDateFns.dayOfWeek(first)).toBe(1);
+    });
+    it('includes all days of the given month', () => {
+        const grid = buildCalendarGrid(ym('2024-06'));
+        const junedays = grid.filter((d) => d.month === 6 && d.year === 2024);
+        expect(junedays.length).toBe(30);
+    });
+    it('is Monday-first for a month starting on Sunday', () => {
+        const grid = buildCalendarGrid(ym('2024-09'));
+        const first = grid[0];
+        expect(PlainDateFns.dayOfWeek(first)).toBe(1);
+        expect(PlainDateFns.toString(first)).toBe('2024-08-26');
+    });
+    it('is Monday-first for a month starting on Monday', () => {
+        const grid = buildCalendarGrid(ym('2024-07'));
+        const first = grid[0];
+        expect(PlainDateFns.dayOfWeek(first)).toBe(1);
+        expect(PlainDateFns.toString(first)).toBe('2024-07-01');
+    });
+    describe('leap-year February', () => {
+        it('returns 35 cells with exactly 29 in-month cells for 2024-02 (leap year)', () => {
+            const grid = buildCalendarGrid(ym('2024-02'));
+            expect(grid.length).toBe(35);
+            const inMonth = grid.filter((d) => d.year === 2024 && d.month === 2);
+            expect(inMonth.length).toBe(29);
+        });
+        it('returns 35 cells with exactly 28 in-month cells for 2023-02 (non-leap year)', () => {
+            const grid = buildCalendarGrid(ym('2023-02'));
+            expect(grid.length).toBe(35);
+            const inMonth = grid.filter((d) => d.year === 2023 && d.month === 2);
+            expect(inMonth.length).toBe(28);
+        });
+    });
+});
+describe('toIsoYearMonthString', () => {
+    it('returns a PlainYearMonthFns for a given date', () => {
+        const result = toIsoYearMonthString(pd('2024-06-15'));
+        expect(result.toString()).toBe('2024-06');
+    });
+    it('returns the correct year-month for January', () => {
+        const result = toIsoYearMonthString(pd('2024-01-01'));
+        expect(result.toString()).toBe('2024-01');
+    });
+});
+describe('isDisabled — cross-year boundary', () => {
+    it('Jan 1 2025 with min 2024-12-30 is not disabled', () => {
+        expect(isDisabled(pd('2025-01-01'), pd('2024-12-30'), undefined)).toBe(false);
+    });
+    it('Dec 31 2024 with max 2024-12-30 is disabled', () => {
+        expect(isDisabled(pd('2024-12-31'), undefined, pd('2024-12-30'))).toBe(true);
+    });
+});
+describe('getNavLabels', () => {
+    it('returns German labels for de-CH', () => {
+        const labels = getNavLabels('de-CH');
+        expect(labels.prev).toBe('Vorheriger Monat');
+        expect(labels.next).toBe('Nächster Monat');
+    });
+    it('returns German labels for de (language prefix fallback)', () => {
+        const labels = getNavLabels('de-UNKNOWN');
+        expect(labels.prev).toBe('Vorheriger Monat');
+    });
+    it('returns English labels for en-US', () => {
+        const labels = getNavLabels('en-US');
+        expect(labels.prev).toBe('Previous month');
+        expect(labels.next).toBe('Next month');
+    });
+    it('falls back to German for completely unknown locale', () => {
+        const labels = getNavLabels('zh-TW');
+        expect(labels.prev).toBe('Vorheriger Monat');
+    });
+});
+describe('getValidationLabels', () => {
+    it('returns German popover suffix for de', () => {
+        const labels = getValidationLabels('de');
+        expect(labels.popoverSuffix).toBe('— Kalender');
+        expect(labels.invalidDateMessage).toBe('Ungültiges Datum');
+    });
+    it('returns German popover suffix for de-CH', () => {
+        const labels = getValidationLabels('de-CH');
+        expect(labels.popoverSuffix).toBe('— Kalender');
+        expect(labels.invalidDateMessage).toBe('Ungültiges Datum');
+    });
+    it('returns English popover suffix for en', () => {
+        const labels = getValidationLabels('en');
+        expect(labels.popoverSuffix).toBe('— Calendar');
+        expect(labels.invalidDateMessage).toBe('Invalid date');
+    });
+    it('returns English popover suffix for en-US', () => {
+        const labels = getValidationLabels('en-US');
+        expect(labels.popoverSuffix).toBe('— Calendar');
+        expect(labels.invalidDateMessage).toBe('Invalid date');
+    });
+    it('returns French popover suffix for fr', () => {
+        const labels = getValidationLabels('fr');
+        expect(labels.popoverSuffix).toBe('— Calendrier');
+        expect(labels.invalidDateMessage).toBe('Date invalide');
+    });
+    it('returns French popover suffix for fr-CH', () => {
+        const labels = getValidationLabels('fr-CH');
+        expect(labels.popoverSuffix).toBe('— Calendrier');
+        expect(labels.invalidDateMessage).toBe('Date invalide');
+    });
+    it('returns Italian popover suffix for it', () => {
+        const labels = getValidationLabels('it');
+        expect(labels.popoverSuffix).toBe('— Calendario');
+        expect(labels.invalidDateMessage).toBe('Data non valida');
+    });
+    it('returns Italian popover suffix for it-CH', () => {
+        const labels = getValidationLabels('it-CH');
+        expect(labels.popoverSuffix).toBe('— Calendario');
+        expect(labels.invalidDateMessage).toBe('Data non valida');
+    });
+    it('returns German labels for completely unknown locale (fallback)', () => {
+        const labels = getValidationLabels('zh-TW');
+        expect(labels.popoverSuffix).toBe('— Kalender');
+        expect(labels.invalidDateMessage).toBe('Ungültiges Datum');
+    });
+});
+describe('isInFirstWeekOfMonth', () => {
+    it('returns true when going back 7 days crosses into the previous month', () => {
+        expect(isInFirstWeekOfMonth(pd('2024-06-03'))).toBe(true);
+        expect(isInFirstWeekOfMonth(pd('2024-06-01'))).toBe(true);
+        expect(isInFirstWeekOfMonth(pd('2024-06-07'))).toBe(true);
+    });
+    it('returns false when going back 7 days stays in the same month', () => {
+        expect(isInFirstWeekOfMonth(pd('2024-06-08'))).toBe(false);
+        expect(isInFirstWeekOfMonth(pd('2024-06-15'))).toBe(false);
+    });
+});
+describe('isInLastWeekOfMonth', () => {
+    it('returns true when going forward 7 days crosses into the next month', () => {
+        expect(isInLastWeekOfMonth(pd('2024-06-25'))).toBe(true);
+        expect(isInLastWeekOfMonth(pd('2024-06-30'))).toBe(true);
+        expect(isInLastWeekOfMonth(pd('2024-06-24'))).toBe(true);
+    });
+    it('returns false when going forward 7 days stays in the same month', () => {
+        expect(isInLastWeekOfMonth(pd('2024-06-23'))).toBe(false);
+        expect(isInLastWeekOfMonth(pd('2024-06-15'))).toBe(false);
+    });
+});
+describe('firstSelectableDayOfMonth', () => {
+    it('returns the 1st when no min/max restrictions', () => {
+        const result = firstSelectableDayOfMonth(ym('2024-06'), undefined, undefined);
+        expect(result).not.toBeNull();
+        expect(result.day).toBe(1);
+    });
+    it('skips disabled days and returns first enabled day when min is set', () => {
+        const result = firstSelectableDayOfMonth(ym('2024-06'), pd('2024-06-10'), undefined);
+        expect(result).not.toBeNull();
+        expect(result.day).toBe(10);
+    });
+    it('returns null when the entire month is disabled (min > last day)', () => {
+        const result = firstSelectableDayOfMonth(ym('2024-06'), pd('2024-07-01'), undefined);
+        expect(result).toBeNull();
+    });
+});
+describe('lastSelectableDayOfMonth', () => {
+    it('returns the last day of the month when no min/max restrictions', () => {
+        const result = lastSelectableDayOfMonth(ym('2024-06'), undefined, undefined);
+        expect(result).not.toBeNull();
+        expect(result.day).toBe(30);
+    });
+    it('skips disabled days and returns last enabled day when max is set', () => {
+        const result = lastSelectableDayOfMonth(ym('2024-06'), undefined, pd('2024-06-20'));
+        expect(result).not.toBeNull();
+        expect(result.day).toBe(20);
+    });
+    it('returns null when the entire month is disabled (max < first day)', () => {
+        const result = lastSelectableDayOfMonth(ym('2024-06'), undefined, pd('2024-05-31'));
+        expect(result).toBeNull();
+    });
+});
+describe('formatToDisplay', () => {
+    it('returns an empty string for undefined', () => {
+        expect(formatToDisplay(undefined, 'de-CH')).toBe('');
+    });
+    it('formats a date using the de-CH locale pattern (dd.MM.yyyy)', () => {
+        expect(formatToDisplay('2024-06-05', 'de-CH')).toBe('05.06.2024');
+    });
+    it('formats a date using the en-US locale pattern (MM/dd/yyyy)', () => {
+        expect(formatToDisplay('2024-06-05', 'en-US')).toBe('06/05/2024');
+    });
+    it('uses an explicit displayFormat override regardless of locale', () => {
+        expect(formatToDisplay('2024-06-05', 'en-US', 'yyyy-MM-dd')).toBe('2024-06-05');
+    });
+    it('returns an empty string for an unparseable ISO value', () => {
+        expect(formatToDisplay('not-a-date', 'de-CH')).toBe('');
+    });
+});
+describe('parseFromDisplay', () => {
+    it('returns undefined for empty text', () => {
+        expect(parseFromDisplay('', 'de-CH')).toBeUndefined();
+    });
+    it('returns undefined for whitespace-only text', () => {
+        expect(parseFromDisplay('   ', 'de-CH')).toBeUndefined();
+    });
+    it('parses a complete valid de-CH date (dd.MM.yyyy)', () => {
+        expect(parseFromDisplay('05.06.2024', 'de-CH')).toBe('2024-06-05');
+    });
+    it('parses a complete valid en-US date (MM/dd/yyyy)', () => {
+        expect(parseFromDisplay('06/05/2024', 'en-US')).toBe('2024-06-05');
+    });
+    it('returns undefined for incomplete/partial input (mid-keystroke)', () => {
+        expect(parseFromDisplay('05.06.202', 'de-CH')).toBeUndefined();
+        expect(parseFromDisplay('05.06.', 'de-CH')).toBeUndefined();
+        expect(parseFromDisplay('05', 'de-CH')).toBeUndefined();
+    });
+    it('returns undefined for a non-existent calendar date (e.g. Feb 30)', () => {
+        expect(parseFromDisplay('30.02.2024', 'de-CH')).toBeUndefined();
+    });
+    it('returns undefined for a syntactically invalid string', () => {
+        expect(parseFromDisplay('not a date', 'de-CH')).toBeUndefined();
+    });
+    it('respects an explicit displayFormat override regardless of locale', () => {
+        expect(parseFromDisplay('2024-06-05', 'en-US', 'yyyy-MM-dd')).toBe('2024-06-05');
+    });
+    it('round-trips format -> parse -> format for de-CH', () => {
+        const iso = '2024-06-05';
+        const displayed = formatToDisplay(iso, 'de-CH');
+        const parsed = parseFromDisplay(displayed, 'de-CH');
+        expect(parsed).toBe(iso);
+        expect(formatToDisplay(parsed, 'de-CH')).toBe(displayed);
+    });
+    it('round-trips format -> parse -> format for en-US (different token ordering)', () => {
+        const iso = '2024-06-05';
+        const displayed = formatToDisplay(iso, 'en-US');
+        expect(displayed).toBe('06/05/2024');
+        const parsed = parseFromDisplay(displayed, 'en-US');
+        expect(parsed).toBe(iso);
+        expect(formatToDisplay(parsed, 'en-US')).toBe(displayed);
+    });
+    it('honors locale-specific token ordering (de-CH day-first vs en-US month-first)', () => {
+        expect(parseFromDisplay('05.06.2024', 'de-CH')).toBe('2024-06-05');
+        expect(parseFromDisplay('05/06/2024', 'en-US')).toBe('2024-05-06');
+    });
+});
+describe('derivePatternFromLocale', () => {
+    it('derives dd.MM.yyyy for de-CH', () => {
+        expect(derivePatternFromLocale('de-CH')).toBe('dd.MM.yyyy');
+    });
+    it('derives MM/dd/yyyy for en-US', () => {
+        expect(derivePatternFromLocale('en-US')).toBe('MM/dd/yyyy');
+    });
+});

package/collection/components/lmvz-header/lmvz-header.js

@@ -87,7 +87,7 @@ export class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (h(Host, { key: 'ce4b8cf9f7687e4af97d45908e2f0e484b90684f', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'a2213d8038d126e47262c4ec18071dd4302152db', class: "brand" }, h("slot", { key: '68a0a1e2b21859d78d2f9a7d3f5c86020c52c225', name: "brand" }, h("img", { key: 'd0a878bc4c9f7a3460e857fb5aa52f1d942a0423', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '687791624d6ced477bc0cce73ce97b26c7d03af0', "aria-label": "Hauptnavigation" }, h("div", { key: 'a9e8fa4a57e619a3d3b1056bfc0d5df74e89f630', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'f75f0a3bed2267aff902490f1905c67ad1b7e6be', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '3cf2d099bed99e4ba7b32a2f3171c69663785012', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '85dbe77ea8ab62aa400640495e11e2d174ca5210', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'cf5d135a5b969af6a2bbb5432a10f8e1b9af1dca', class: "actions" }, h("slot", { key: '1a0323668942151c071a24238039c7a216358363', name: "actions" }))));
+        return (h(Host, { key: '77744fd74160551232eb0347e9ebb01eb3b9bec0', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'dfd78b2a2ab06b010d9f29dd61f57aced82243fe', class: "brand" }, h("slot", { key: 'c6d29bbdbcbe581a8a170fbeb3d6ab1e31d27dcd', name: "brand" }, h("img", { key: '80cea3b254d153411864d52c2ba300e0eb3c57a7', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '71c53ae0300b61291d0763cdb23f1f645a83928a', "aria-label": "Hauptnavigation" }, h("div", { key: '09949b77a66c54a10c4c141de846fd5697b9d445', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'acec0cf7e13325c49d1e0929b90b056ad1cbbe64', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: 'd35860c71ad5e28ee2e3aaafb157acbeff41d83e', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: 'a4c3a1ad1b1de5bd903b54ed6bd1616ce6517bbb', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'ff50045d9ab28bf66a619a48d9ea1f0ed2f5f952', class: "actions" }, h("slot", { key: '6ead0b7a54bf93bb06f0eab2aa8159bd6e96e8f5', name: "actions" }))));
     }
     static get is() { return "lmvz-header"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-icon/lmvz-icon.js

@@ -57,7 +57,7 @@ export class LmvzIcon extends ReactiveControllerHost {
         super.componentDidRender();
     }
     render() {
-        return h(Host, { key: '4fba217d573d968951819f12af24d775c8ac62dc', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
+        return h(Host, { key: 'be6032d11399289c3baddd63ebc7d9e1fb98b773', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
     }
     waitUntilVisible(callback, rootMargin = 50) {
         if (!Build.isBrowser || typeof window === 'undefined' || !window.IntersectionObserver) {

package/collection/components/lmvz-input/lmvz-input.css

@@ -107,7 +107,7 @@
   cursor: not-allowed;
   pointer-events: none;
 }
-.input-container:focus-within .input-wrapper {
+:host:has(:focus-visible) .input-wrapper {
   border-color: var(--input-border-color-focus);
   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));