tyrell-components 1.0.0-TC51 → 1.0.0-TC53

package/lib/components/calendar-month.js

@@ -4,432 +4,442 @@ import { calendarMonthStyles, calendarMonthCustomFlavorCss } from '../styles/cal
 import { getCalendarMonthDays, getLocalizedWeekdays, parseISODate } from '../utils/calendar-utils.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
 function defaultDayContent(dayContext) {
-    return dayContext.dayInMonth.toString();
+return dayContext.dayInMonth.toString();
 }
 function getDefaultDayClasses(dayContext) {
-    const classes = ['calendar-day'];
-    if (dayContext.today)
-        classes.push('today');
-    if (dayContext.weekend)
-        classes.push('weekend');
-    if (dayContext.otherMonth)
-        classes.push('other-month');
-    if (dayContext.isSelected)
-        classes.push('selected');
-    return classes;
+const classes = ['calendar-day'];
+if (dayContext.today)
+classes.push('today');
+if (dayContext.weekend)
+classes.push('weekend');
+if (dayContext.otherMonth)
+classes.push('other-month');
+if (dayContext.isSelected)
+classes.push('selected');
+return classes;
 }
 function isDOMElement(value) {
-    return value instanceof HTMLElement;
+return value instanceof HTMLElement;
 }
 function isoToUTCTimestamp(iso) {
-    if (!iso)
-        return null;
-    const parsed = parseISODate(iso);
-    if (!parsed)
-        return null;
-    return Date.UTC(parsed.year, parsed.month - 1, parsed.day);
+if (!iso)
+return null;
+const parsed = parseISODate(iso);
+if (!parsed)
+return null;
+return Date.UTC(parsed.year, parsed.month - 1, parsed.day);
 }
 function normalizeSizeValue(value) {
-    if (!value || value === '')
-        return null;
-    const strValue = String(value);
-    if (/^\d+(\.\d+)?$/.test(strValue)) {
-        return `${strValue}px`;
-    }
-    return strValue;
+if (!value || value === '')
+return null;
+const strValue = String(value);
+if (/^\d+(\.\d+)?$/.test(strValue)) {
+return `${strValue}px`;
+}
+return strValue;
 }
 export class TyCalendarMonth extends HTMLElement {
-    static get observedAttributes() {
-        return ['locale', 'size', 'min', 'max', 'flavor'];
-    }
-    constructor() {
-        super();
-        this._locale = 'en-US';
-        this._size = 'md';
-        this._customFlavorSheet = null;
-        this._focusedIndex = null;
-        this._cellElements = [];
-        const today = new Date();
-        this._displayYear = today.getFullYear();
-        this._displayMonth = today.getMonth() + 1;
-        this.attachShadow({ mode: 'open' });
-    }
-    connectedCallback() {
-        if (!this._displayMonth) {
-            this._displayMonth = new Date().getMonth() + 1;
-        }
-        if (!this._displayYear) {
-            this._displayYear = new Date().getFullYear();
-        }
-        if (!this._locale) {
-            this._locale = this.getAttribute('locale') || 'en-US';
-        }
-        const sizeAttr = this.getAttribute('size');
-        if (sizeAttr && (sizeAttr === 'sm' || sizeAttr === 'md' || sizeAttr === 'lg')) {
-            this._size = sizeAttr;
-        }
-        const plainDayContentFn = this.dayContentFn;
-        if (plainDayContentFn && !this._dayContentFn) {
-            this._dayContentFn = plainDayContentFn;
-            delete this.dayContentFn;
-        }
-        const plainCustomCSS = this.customCSS;
-        if (plainCustomCSS && !this._customCSS) {
-            this._customCSS = plainCustomCSS;
-            delete this.customCSS;
-        }
-        this._localeObserver = observeLocaleChanges(this, () => {
-            this.render();
-        });
-        this._syncCustomFlavor();
-        this.render();
-    }
-    disconnectedCallback() {
-        if (this._localeObserver) {
-            this._localeObserver();
-            this._localeObserver = undefined;
-        }
-    }
-    attributeChangedCallback(name, _oldValue, newValue) {
-        if (name === 'locale') {
-            this._locale = newValue || 'en-US';
-            this.render();
-        }
-        else if (name === 'size') {
-            if (newValue === 'sm' || newValue === 'md' || newValue === 'lg') {
-                this._size = newValue;
-                this.render();
-            }
-        }
-        else if (name === 'min' || name === 'max') {
-            this[name === 'min' ? '_min' : '_max'] = newValue ?? undefined;
-            this.render();
-        }
-        else if (name === 'flavor') {
-            this._syncCustomFlavor();
-        }
-    }
-    _syncCustomFlavor() {
-        this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.getAttribute('flavor'), ({ base }) => calendarMonthCustomFlavorCss(base));
-    }
-    get displayYear() {
-        return this._displayYear;
-    }
-    set displayYear(value) {
-        if (this._displayYear !== value) {
-            this._displayYear = value;
-            this._focusedIndex = null;
-            this.render();
-        }
-    }
-    get displayMonth() {
-        return this._displayMonth;
-    }
-    set displayMonth(value) {
-        if (this._displayMonth !== value) {
-            this._displayMonth = value;
-            this._focusedIndex = null;
-            this.render();
-        }
-    }
-    get locale() {
-        return getEffectiveLocale(this, this.getAttribute('locale'));
-    }
-    set locale(value) {
-        if (this._locale !== value) {
-            this._locale = value;
-            this.render();
-        }
-    }
-    get size() {
-        return this._size;
-    }
-    set size(value) {
-        if (this._size !== value) {
-            this._size = value;
-            this.render();
-        }
-    }
-    get flavor() {
-        return this.getAttribute('flavor') || 'primary';
-    }
-    set flavor(value) {
-        if (value)
-            this.setAttribute('flavor', value);
-        else
-            this.removeAttribute('flavor');
-    }
-    get width() {
-        return this._width;
-    }
-    set width(value) {
-        if (this._width !== value) {
-            this._width = value;
-            this.applyWidthProperties();
-        }
-    }
-    get minWidth() {
-        return this._minWidth;
-    }
-    set minWidth(value) {
-        if (this._minWidth !== value) {
-            this._minWidth = value;
-            this.applyWidthProperties();
-        }
-    }
-    get maxWidth() {
-        return this._maxWidth;
-    }
-    set maxWidth(value) {
-        if (this._maxWidth !== value) {
-            this._maxWidth = value;
-            this.applyWidthProperties();
-        }
-    }
-    get dayContentFn() {
-        return this._dayContentFn;
-    }
-    set dayContentFn(fn) {
-        if (this._dayContentFn !== fn) {
-            this._dayContentFn = fn;
-            this.render();
-        }
-    }
-    get customCSS() {
-        return this._customCSS;
-    }
-    set customCSS(sheet) {
-        if (this._customCSS !== sheet) {
-            this._customCSS = sheet;
-            this.applyCustomCSS();
-        }
-    }
-    get min() {
-        return this._min;
-    }
-    set min(value) {
-        if (this._min !== value) {
-            this._min = value;
-            this.render();
-        }
-    }
-    get max() {
-        return this._max;
-    }
-    set max(value) {
-        if (this._max !== value) {
-            this._max = value;
-            this.render();
-        }
-    }
-    get value() {
-        return this._value;
-    }
-    set value(timestamp) {
-        const newValue = timestamp ?? undefined;
-        if (this._value !== newValue) {
-            this._value = newValue;
-            this.render();
-        }
-    }
-    applyWidthProperties() {
-        const normalizedWidth = normalizeSizeValue(this._width);
-        const normalizedMinWidth = normalizeSizeValue(this._minWidth);
-        const normalizedMaxWidth = normalizeSizeValue(this._maxWidth);
-        if (normalizedWidth) {
-            this.style.setProperty('--calendar-width', normalizedWidth);
-        }
-        else {
-            this.style.removeProperty('--calendar-width');
-        }
-        if (normalizedMinWidth) {
-            this.style.setProperty('--calendar-min-width', normalizedMinWidth);
-        }
-        else {
-            this.style.removeProperty('--calendar-min-width');
-        }
-        if (normalizedMaxWidth) {
-            this.style.setProperty('--calendar-max-width', normalizedMaxWidth);
-        }
-        else {
-            this.style.removeProperty('--calendar-max-width');
-        }
-    }
-    applyCustomCSS() {
-        if (!this._customCSS || !this.shadowRoot)
-            return;
-        const existing = this.shadowRoot.adoptedStyleSheets;
-        if (!existing.includes(this._customCSS)) {
-            this.shadowRoot.adoptedStyleSheets = [...existing, this._customCSS];
-        }
-    }
-    refresh() {
-        this.render();
-    }
-    dispatchDayClick(dayContext, _domEvent) {
-        const detail = {
-            dayContext,
-            value: dayContext.value,
-            year: dayContext.year,
-            month: dayContext.month,
-            day: dayContext.dayInMonth,
-            isHoliday: dayContext.holiday,
-            isToday: dayContext.today,
-            isWeekend: dayContext.weekend,
-            isOtherMonth: dayContext.otherMonth,
-        };
-        for (const eventType of ['day-click', 'day-select']) {
-            const event = new CustomEvent(eventType, {
-                detail,
-                bubbles: true,
-                cancelable: true,
-            });
-            this.dispatchEvent(event);
-        }
-    }
-    renderDayCell(dayContext, disabled, isRoving) {
-        const dayElement = document.createElement('div');
-        const content = this._dayContentFn
-            ? this._dayContentFn(dayContext)
-            : defaultDayContent(dayContext);
-        if (this._dayContentFn && content && !isDOMElement(content) && typeof content !== 'string') {
-            throw new Error(`Custom dayContentFn must return a DOM element or string, got: ${typeof content}. ` +
-                `Use document.createElement() to create DOM elements.`);
-        }
-        const classes = getDefaultDayClasses(dayContext);
-        if (disabled)
-            classes.push('disabled');
-        dayElement.className = classes.join(' ');
-        if (typeof content === 'string') {
-            dayElement.textContent = content;
-        }
-        else if (isDOMElement(content)) {
-            dayElement.appendChild(content);
-        }
-        dayElement.setAttribute('role', 'gridcell');
-        dayElement.setAttribute('aria-label', new Intl.DateTimeFormat(this._locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
-            .format(new Date(dayContext.localValue)));
-        dayElement.setAttribute('aria-selected', String(!!dayContext.isSelected));
-        if (dayContext.today)
-            dayElement.setAttribute('aria-current', 'date');
-        if (disabled) {
-            dayElement.setAttribute('aria-disabled', 'true');
-            dayElement.setAttribute('tabindex', '-1');
-        }
-        else {
-            dayElement.setAttribute('tabindex', isRoving ? '0' : '-1');
-            dayElement.addEventListener('pointerdown', (event) => {
-                event.preventDefault();
-                this.dispatchDayClick(dayContext, event);
-            });
-            dayElement.addEventListener('keydown', (event) => {
-                const ke = event;
-                if (ke.key === 'Enter' || ke.key === ' ') {
-                    ke.preventDefault();
-                    this.dispatchDayClick(dayContext, event);
-                }
-            });
-        }
-        return dayElement;
-    }
-    render() {
-        const root = this.shadowRoot;
-        if (!root)
-            return;
-        ensureStyles(root, { css: calendarMonthStyles, id: 'ty-calendar-month' });
-        this.applyCustomCSS();
-        this.applyWidthProperties();
-        let selection;
-        if (this._value) {
-            const date = new Date(this._value);
-            selection = {
-                year: date.getFullYear(),
-                month: date.getMonth() + 1,
-                day: date.getDate()
-            };
-        }
-        const days = getCalendarMonthDays(this._displayYear, this._displayMonth, selection);
-        const weekdays = getLocalizedWeekdays(this._locale, 'short');
-        root.innerHTML = '';
-        const calendarContainer = document.createElement('div');
-        calendarContainer.className = `calendar-flex-container calendar-size-${this._size}`;
-        calendarContainer.setAttribute('role', 'grid');
-        calendarContainer.setAttribute('aria-label', new Intl.DateTimeFormat(this._locale, { month: 'long', year: 'numeric' })
-            .format(new Date(this._displayYear, this._displayMonth - 1, 1)));
-        const headerRow = document.createElement('div');
-        headerRow.className = 'calendar-row calendar-header-row';
-        headerRow.setAttribute('role', 'row');
-        weekdays.forEach(weekday => {
-            const headerCell = document.createElement('div');
-            headerCell.className = 'calendar-cell calendar-header-cell';
-            headerCell.setAttribute('role', 'columnheader');
-            headerCell.textContent = weekday;
-            headerRow.appendChild(headerCell);
-        });
-        calendarContainer.appendChild(headerRow);
-        const dayWeeks = [];
-        for (let i = 0; i < 42; i += 7) {
-            dayWeeks.push(days.slice(i, i + 7));
-        }
-        const minTs = isoToUTCTimestamp(this._min);
-        const maxTs = isoToUTCTimestamp(this._max);
-        const disabledAt = (i) => {
-            const v = days[i].value;
-            return (minTs !== null && v < minTs) || (maxTs !== null && v > maxTs);
-        };
-        let defaultIndex = days.findIndex(d => d.isSelected);
-        if (defaultIndex === -1)
-            defaultIndex = days.findIndex(d => d.today);
-        if (defaultIndex === -1)
-            defaultIndex = 0;
-        if (this._focusedIndex === null ||
-            this._focusedIndex < 0 ||
-            this._focusedIndex > 41 ||
-            disabledAt(this._focusedIndex)) {
-            this._focusedIndex = defaultIndex;
-        }
-        this._cellElements = [];
-        let flatIndex = 0;
-        dayWeeks.forEach(week => {
-            const dayRow = document.createElement('div');
-            dayRow.className = 'calendar-row calendar-day-row';
-            dayRow.setAttribute('role', 'row');
-            week.forEach(dayContext => {
-                const disabled = (minTs !== null && dayContext.value < minTs) ||
-                    (maxTs !== null && dayContext.value > maxTs);
-                const dayCell = this.renderDayCell(dayContext, disabled, flatIndex === this._focusedIndex);
-                dayCell.className = `${dayCell.className} calendar-cell calendar-day-cell`;
-                dayRow.appendChild(dayCell);
-                this._cellElements[flatIndex] = dayCell;
-                flatIndex++;
-            });
-            calendarContainer.appendChild(dayRow);
-        });
-        calendarContainer.addEventListener('keydown', (event) => {
-            const ke = event;
-            const delta = ke.key === 'ArrowLeft' ? -1 :
-                ke.key === 'ArrowRight' ? 1 :
-                    ke.key === 'ArrowUp' ? -7 :
-                        ke.key === 'ArrowDown' ? 7 :
-                            0;
-            if (delta === 0)
-                return;
-            const currentIndex = this._focusedIndex ?? defaultIndex;
-            const nextIndex = currentIndex + delta;
-            if (nextIndex < 0 || nextIndex > 41 || disabledAt(nextIndex))
-                return;
-            ke.preventDefault();
-            this._cellElements[currentIndex]?.setAttribute('tabindex', '-1');
-            this._focusedIndex = nextIndex;
-            const nextCell = this._cellElements[nextIndex];
-            if (nextCell) {
-                nextCell.setAttribute('tabindex', '0');
-                nextCell.focus();
-            }
-        });
-        root.appendChild(calendarContainer);
-    }
+static get observedAttributes() {
+return ['display-year', 'display-month', 'locale', 'size', 'min', 'max', 'flavor'];
+}
+constructor() {
+super();
+this._locale = 'en-US';
+this._size = 'md';
+this._customFlavorSheet = null;
+this._focusedIndex = null;
+this._cellElements = [];
+const today = new Date();
+this._displayYear = today.getFullYear();
+this._displayMonth = today.getMonth() + 1;
+this.attachShadow({ mode: 'open' });
+}
+connectedCallback() {
+if (!this._displayMonth) {
+this._displayMonth = new Date().getMonth() + 1;
+}
+if (!this._displayYear) {
+this._displayYear = new Date().getFullYear();
+}
+if (!this._locale) {
+this._locale = this.getAttribute('locale') || 'en-US';
+}
+const sizeAttr = this.getAttribute('size');
+if (sizeAttr && (sizeAttr === 'sm' || sizeAttr === 'md' || sizeAttr === 'lg')) {
+this._size = sizeAttr;
+}
+const plainDayContentFn = this.dayContentFn;
+if (plainDayContentFn && !this._dayContentFn) {
+this._dayContentFn = plainDayContentFn;
+delete this.dayContentFn;
+}
+const plainCustomCSS = this.customCSS;
+if (plainCustomCSS && !this._customCSS) {
+this._customCSS = plainCustomCSS;
+delete this.customCSS;
+}
+this._localeObserver = observeLocaleChanges(this, () => {
+this.render();
+});
+this._syncCustomFlavor();
+this.render();
+}
+disconnectedCallback() {
+if (this._localeObserver) {
+this._localeObserver();
+this._localeObserver = undefined;
+}
+}
+attributeChangedCallback(name, _oldValue, newValue) {
+if (name === 'display-year' || name === 'display-month') {
+const n = Number(newValue);
+const valid = Number.isInteger(n) && (name === 'display-year' ? n > 0 : n >= 1 && n <= 12);
+if (valid) {
+if (name === 'display-year')
+this.displayYear = n;
+else
+this.displayMonth = n;
+}
+}
+else if (name === 'locale') {
+this._locale = newValue || 'en-US';
+this.render();
+}
+else if (name === 'size') {
+if (newValue === 'sm' || newValue === 'md' || newValue === 'lg') {
+this._size = newValue;
+this.render();
+}
+}
+else if (name === 'min' || name === 'max') {
+this[name === 'min' ? '_min' : '_max'] = newValue ?? undefined;
+this.render();
+}
+else if (name === 'flavor') {
+this._syncCustomFlavor();
+}
+}
+_syncCustomFlavor() {
+this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.getAttribute('flavor'), ({ base }) => calendarMonthCustomFlavorCss(base));
+}
+get displayYear() {
+return this._displayYear;
+}
+set displayYear(value) {
+if (this._displayYear !== value) {
+this._displayYear = value;
+this._focusedIndex = null;
+this.render();
+}
+}
+get displayMonth() {
+return this._displayMonth;
+}
+set displayMonth(value) {
+if (this._displayMonth !== value) {
+this._displayMonth = value;
+this._focusedIndex = null;
+this.render();
+}
+}
+get locale() {
+return getEffectiveLocale(this, this.getAttribute('locale'));
+}
+set locale(value) {
+if (this._locale !== value) {
+this._locale = value;
+this.render();
+}
+}
+get size() {
+return this._size;
+}
+set size(value) {
+if (this._size !== value) {
+this._size = value;
+this.render();
+}
+}
+get flavor() {
+return this.getAttribute('flavor') || 'primary';
+}
+set flavor(value) {
+if (value)
+this.setAttribute('flavor', value);
+else
+this.removeAttribute('flavor');
+}
+get width() {
+return this._width;
+}
+set width(value) {
+if (this._width !== value) {
+this._width = value;
+this.applyWidthProperties();
+}
+}
+get minWidth() {
+return this._minWidth;
+}
+set minWidth(value) {
+if (this._minWidth !== value) {
+this._minWidth = value;
+this.applyWidthProperties();
+}
+}
+get maxWidth() {
+return this._maxWidth;
+}
+set maxWidth(value) {
+if (this._maxWidth !== value) {
+this._maxWidth = value;
+this.applyWidthProperties();
+}
+}
+get dayContentFn() {
+return this._dayContentFn;
+}
+set dayContentFn(fn) {
+if (this._dayContentFn !== fn) {
+this._dayContentFn = fn;
+this.render();
+}
+}
+get customCSS() {
+return this._customCSS;
+}
+set customCSS(sheet) {
+if (this._customCSS !== sheet) {
+this._customCSS = sheet;
+this.applyCustomCSS();
+}
+}
+get min() {
+return this._min;
+}
+set min(value) {
+if (this._min !== value) {
+this._min = value;
+this.render();
+}
+}
+get max() {
+return this._max;
+}
+set max(value) {
+if (this._max !== value) {
+this._max = value;
+this.render();
+}
+}
+get value() {
+return this._value;
+}
+set value(timestamp) {
+const newValue = timestamp ?? undefined;
+if (this._value !== newValue) {
+this._value = newValue;
+this.render();
+}
+}
+applyWidthProperties() {
+const normalizedWidth = normalizeSizeValue(this._width);
+const normalizedMinWidth = normalizeSizeValue(this._minWidth);
+const normalizedMaxWidth = normalizeSizeValue(this._maxWidth);
+if (normalizedWidth) {
+this.style.setProperty('--calendar-width', normalizedWidth);
+}
+else {
+this.style.removeProperty('--calendar-width');
+}
+if (normalizedMinWidth) {
+this.style.setProperty('--calendar-min-width', normalizedMinWidth);
+}
+else {
+this.style.removeProperty('--calendar-min-width');
+}
+if (normalizedMaxWidth) {
+this.style.setProperty('--calendar-max-width', normalizedMaxWidth);
+}
+else {
+this.style.removeProperty('--calendar-max-width');
+}
+}
+applyCustomCSS() {
+if (!this._customCSS || !this.shadowRoot)
+return;
+const existing = this.shadowRoot.adoptedStyleSheets;
+if (!existing.includes(this._customCSS)) {
+this.shadowRoot.adoptedStyleSheets = [...existing, this._customCSS];
+}
+}
+refresh() {
+this.render();
+}
+dispatchDayClick(dayContext, _domEvent) {
+const detail = {
+dayContext,
+value: dayContext.value,
+year: dayContext.year,
+month: dayContext.month,
+day: dayContext.dayInMonth,
+isHoliday: dayContext.holiday,
+isToday: dayContext.today,
+isWeekend: dayContext.weekend,
+isOtherMonth: dayContext.otherMonth,
+};
+for (const eventType of ['day-click', 'day-select']) {
+const event = new CustomEvent(eventType, {
+detail,
+bubbles: true,
+cancelable: true,
+});
+this.dispatchEvent(event);
+}
+}
+renderDayCell(dayContext, disabled, isRoving) {
+const dayElement = document.createElement('div');
+const content = this._dayContentFn
+? this._dayContentFn(dayContext)
+: defaultDayContent(dayContext);
+if (this._dayContentFn && content && !isDOMElement(content) && typeof content !== 'string') {
+throw new Error(`Custom dayContentFn must return a DOM element or string, got: ${typeof content}. ` +
+`Use document.createElement() to create DOM elements.`);
+}
+const classes = getDefaultDayClasses(dayContext);
+if (disabled)
+classes.push('disabled');
+dayElement.className = classes.join(' ');
+if (typeof content === 'string') {
+dayElement.textContent = content;
+}
+else if (isDOMElement(content)) {
+dayElement.appendChild(content);
+}
+dayElement.setAttribute('role', 'gridcell');
+dayElement.setAttribute('aria-label', new Intl.DateTimeFormat(this._locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
+.format(new Date(dayContext.localValue)));
+dayElement.setAttribute('aria-selected', String(!!dayContext.isSelected));
+if (dayContext.today)
+dayElement.setAttribute('aria-current', 'date');
+if (disabled) {
+dayElement.setAttribute('aria-disabled', 'true');
+dayElement.setAttribute('tabindex', '-1');
+}
+else {
+dayElement.setAttribute('tabindex', isRoving ? '0' : '-1');
+dayElement.addEventListener('pointerdown', (event) => {
+event.preventDefault();
+this.dispatchDayClick(dayContext, event);
+});
+dayElement.addEventListener('keydown', (event) => {
+const ke = event;
+if (ke.key === 'Enter' || ke.key === ' ') {
+ke.preventDefault();
+this.dispatchDayClick(dayContext, event);
+}
+});
+}
+return dayElement;
+}
+render() {
+const root = this.shadowRoot;
+if (!root)
+return;
+ensureStyles(root, { css: calendarMonthStyles, id: 'ty-calendar-month' });
+this.applyCustomCSS();
+this.applyWidthProperties();
+let selection;
+if (this._value) {
+const date = new Date(this._value);
+selection = {
+year: date.getFullYear(),
+month: date.getMonth() + 1,
+day: date.getDate()
+};
+}
+const days = getCalendarMonthDays(this._displayYear, this._displayMonth, selection);
+const weekdays = getLocalizedWeekdays(this._locale, 'short');
+root.innerHTML = '';
+const calendarContainer = document.createElement('div');
+calendarContainer.className = `calendar-flex-container calendar-size-${this._size}`;
+calendarContainer.setAttribute('role', 'grid');
+calendarContainer.setAttribute('aria-label', new Intl.DateTimeFormat(this._locale, { month: 'long', year: 'numeric' })
+.format(new Date(this._displayYear, this._displayMonth - 1, 1)));
+const headerRow = document.createElement('div');
+headerRow.className = 'calendar-row calendar-header-row';
+headerRow.setAttribute('role', 'row');
+weekdays.forEach(weekday => {
+const headerCell = document.createElement('div');
+headerCell.className = 'calendar-cell calendar-header-cell';
+headerCell.setAttribute('role', 'columnheader');
+headerCell.textContent = weekday;
+headerRow.appendChild(headerCell);
+});
+calendarContainer.appendChild(headerRow);
+const dayWeeks = [];
+for (let i = 0; i < 42; i += 7) {
+dayWeeks.push(days.slice(i, i + 7));
+}
+const minTs = isoToUTCTimestamp(this._min);
+const maxTs = isoToUTCTimestamp(this._max);
+const disabledAt = (i) => {
+const v = days[i].value;
+return (minTs !== null && v < minTs) || (maxTs !== null && v > maxTs);
+};
+let defaultIndex = days.findIndex(d => d.isSelected);
+if (defaultIndex === -1)
+defaultIndex = days.findIndex(d => d.today);
+if (defaultIndex === -1)
+defaultIndex = 0;
+if (this._focusedIndex === null ||
+this._focusedIndex < 0 ||
+this._focusedIndex > 41 ||
+disabledAt(this._focusedIndex)) {
+this._focusedIndex = defaultIndex;
+}
+this._cellElements = [];
+let flatIndex = 0;
+dayWeeks.forEach(week => {
+const dayRow = document.createElement('div');
+dayRow.className = 'calendar-row calendar-day-row';
+dayRow.setAttribute('role', 'row');
+week.forEach(dayContext => {
+const disabled = (minTs !== null && dayContext.value < minTs) ||
+(maxTs !== null && dayContext.value > maxTs);
+const dayCell = this.renderDayCell(dayContext, disabled, flatIndex === this._focusedIndex);
+dayCell.className = `${dayCell.className} calendar-cell calendar-day-cell`;
+dayRow.appendChild(dayCell);
+this._cellElements[flatIndex] = dayCell;
+flatIndex++;
+});
+calendarContainer.appendChild(dayRow);
+});
+calendarContainer.addEventListener('keydown', (event) => {
+const ke = event;
+const delta = ke.key === 'ArrowLeft' ? -1 :
+ke.key === 'ArrowRight' ? 1 :
+ke.key === 'ArrowUp' ? -7 :
+ke.key === 'ArrowDown' ? 7 :
+0;
+if (delta === 0)
+return;
+const currentIndex = this._focusedIndex ?? defaultIndex;
+const nextIndex = currentIndex + delta;
+if (nextIndex < 0 || nextIndex > 41 || disabledAt(nextIndex))
+return;
+ke.preventDefault();
+this._cellElements[currentIndex]?.setAttribute('tabindex', '-1');
+this._focusedIndex = nextIndex;
+const nextCell = this._cellElements[nextIndex];
+if (nextCell) {
+nextCell.setAttribute('tabindex', '0');
+nextCell.focus();
+}
+});
+root.appendChild(calendarContainer);
+}
 }
 if (!customElements.get('ty-calendar-month')) {
-    customElements.define('ty-calendar-month', TyCalendarMonth);
+customElements.define('ty-calendar-month', TyCalendarMonth);
 }