tyrell-components 1.0.0-TC57 → 1.0.0-TC58

package/lib/components/date-picker.js

@@ -1,5 +1,6 @@
 import { ensureStyles } from '../utils/styles.js';
 import { syncCustomFlavorSheet } from '../utils/flavor-sheet.js';
+import { ERROR_FLAVOR } from '../utils/error-flavor.js';
 import { datePickerStyles, datePickerCustomFlavorCss } from '../styles/date-picker.js';
 import { lockScroll, unlockScroll } from '../utils/scroll-lock.js';
 import { computeAnchoredPosition, placementToAnchored } from '../utils/positioning.js';
@@ -7,6 +8,7 @@ import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
 import { isMobileTouch } from '../utils/mobile.js';
 import { TyComponent } from '../base/ty-component.js';
 import { DEFAULT_SIZE } from '../types/common.js';
+import { nativeMessage } from '../utils/validity.js';
 const CALENDAR_ICON_SVG = `<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'></rect><line x1='16' y1='2' x2='16' y2='6'></line><line x1='8' y1='2' x2='8' y2='6'></line><line x1='3' y1='10' x2='21' y2='10'></line></svg>`;
 const CLEAR_ICON_SVG = `<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='14' height='14' xmlns='http://www.w3.org/2000/svg'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>`;
 const SCHEDULE_ICON_SVG = `<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='10'></circle><polyline points='12,6 12,12 16,14'></polyline></svg>`;
@@ -20,48 +22,63 @@ elementIds.set(element, id);
 }
 return id;
 }
-function parseValue(value, withTime) {
-if (!value)
+const LOCAL_VALUE = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?)?$/;
+function wallClockDate(c) {
+const date = new Date(0);
+date.setUTCFullYear(c.year, c.month - 1, c.day);
+date.setUTCHours(c.hour || 0, c.minute || 0, c.second || 0);
+return date;
+}
+function parseValue(value) {
+if (value === null || value === undefined || value === '')
 return null;
-let dateObj = null;
 if (typeof value === 'string') {
-if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
-const [yearStr, monthStr, dayStr] = value.split('-');
-const year = parseInt(yearStr, 10);
-const month = parseInt(monthStr, 10) - 1;
-const day = parseInt(dayStr, 10);
-dateObj = new Date(year, month, day, 0, 0, 0, 0);
-}
-else {
-dateObj = new Date(value);
-}
+const local = LOCAL_VALUE.exec(value);
+if (local) {
+const [year, month, day, hour, minute, second] = local.slice(1, 7).map((g) => Number(g ?? 0));
+const components = { year, month, day, hour, minute, second };
+const check = wallClockDate(components);
+const real = check.getUTCMonth() === month - 1 && check.getUTCDate() === day &&
+hour < 24 && minute < 60 && second < 60;
+return real ? components : null;
 }
-else if (typeof value === 'number') {
-dateObj = new Date(value);
 }
+const dateObj = typeof value === 'number' || typeof value === 'string' ? new Date(value) : null;
 if (!dateObj || isNaN(dateObj.getTime())) {
 return null;
 }
-const components = {
+return {
 year: dateObj.getFullYear(),
 month: dateObj.getMonth() + 1,
 day: dateObj.getDate(),
-hour: withTime ? dateObj.getHours() : 0,
-minute: withTime ? dateObj.getMinutes() : 0,
+hour: dateObj.getHours(),
+minute: dateObj.getMinutes(),
+second: dateObj.getSeconds(),
+epoch: dateObj.getTime(),
 };
-return components;
 }
 function componentsToDateObject(components) {
-const { year, month, day, hour, minute } = components;
+const { year, month, day, hour, minute, second } = components;
 if (!year || !month || !day)
 return null;
-return new Date(year, month - 1, day, hour || 0, minute || 0, 0, 0);
+const date = new Date(2000, 0, 1, 12);
+date.setFullYear(year, month - 1, day);
+date.setHours(hour || 0, minute || 0, second || 0, 0);
+return date;
+}
+function effectiveComponents(components, withTime) {
+return withTime ? components : { ...components, hour: 0, minute: 0, second: 0, epoch: undefined };
 }
-function componentsToOutputValue(components) {
+function componentsToOutputValue(components, withTime, native) {
 if (!components.year || !components.month || !components.day) {
 return null;
 }
-const dateObj = componentsToDateObject(components);
+const c = effectiveComponents(components, withTime);
+if (native)
+return componentsToLocalValue(c, withTime);
+if (c.epoch !== undefined)
+return new Date(c.epoch).toISOString();
+const dateObj = componentsToDateObject(c);
 return dateObj ? dateObj.toISOString() : null;
 }
 function componentsToLocalValue(components, withTime) {
@@ -74,27 +91,34 @@ const day = components.day.toString().padStart(2, '0');
 if (withTime) {
 const hour = (components.hour || 0).toString().padStart(2, '0');
 const minute = (components.minute || 0).toString().padStart(2, '0');
-return `${year}-${month}-${day}T${hour}:${minute}`;
+const second = components.second ? `:${components.second.toString().padStart(2, '0')}` : '';
+return `${year}-${month}-${day}T${hour}:${minute}${second}`;
 }
 else {
 return `${year}-${month}-${day}`;
 }
 }
-function formatDisplayValue(components, formatType, locale, withTime) {
+function displayDate(components, native) {
+return native
+? { date: wallClockDate(components), timeZone: 'UTC' }
+: { date: componentsToDateObject(components) };
+}
+function formatDisplayValue(components, formatType, locale, withTime, native) {
 if (!components.year || !components.month || !components.day) {
 return null;
 }
-const dateObj = componentsToDateObject(components);
-if (!dateObj)
+const { date, timeZone } = displayDate(components, native);
+if (!date)
 return null;
 const options = {
 dateStyle: formatType || 'long',
+timeZone,
 };
 if (withTime) {
 options.timeStyle = 'short';
 }
 const formatter = new Intl.DateTimeFormat(locale, options);
-return formatter.format(dateObj);
+return formatter.format(date);
 }
 class TimeFields {
 constructor(hourEl, minuteEl, onChange, hour = 0, minute = 0) {
@@ -213,12 +237,18 @@ withTime: false,
 open: false,
 };
 this._closeTimestamp = 0;
+this._initialized = false;
+this._syncing = false;
 this._customFlavorSheet = null;
 const shadow = this.shadowRoot;
 ensureStyles(shadow, { css: datePickerStyles, id: 'ty-date-picker' });
 }
 onConnect() {
+if (this._initialized)
+this._state.open = false;
+else
 this.initializeState();
+this.syncErrorFlavor();
 this.render();
 this.updateFormValue();
 this._localeObserver = observeLocaleChanges(this, () => {
@@ -241,6 +271,10 @@ onPropertiesChanged(changes) {
 for (const { name, newValue } of changes) {
 switch (name) {
 case 'flavor':
+if (newValue !== 'danger') {
+this.removeAttribute(ERROR_FLAVOR);
+this.syncErrorFlavor();
+}
 this._syncCustomFlavor();
 break;
 case 'size':
@@ -254,70 +288,59 @@ case 'noClear':
 case 'format':
 case 'locale':
 break;
+case 'error':
+this.syncErrorFlavor();
+break;
 case 'value': {
-const newComponents = parseValue(newValue, this._state.withTime);
-if (newComponents === null) {
-const hasDate = this._state.year !== undefined ||
-this._state.month !== undefined ||
-this._state.day !== undefined;
-if (hasDate) {
+if (!this._initialized || this._syncing)
+break;
 this._state = {
 withTime: this._state.withTime,
 open: this._state.open,
+...parseValue(newValue),
 };
-}
 this.syncFormValue();
 break;
 }
-const currentComponents = {
-year: this._state.year,
-month: this._state.month,
-day: this._state.day,
-hour: this._state.hour,
-minute: this._state.minute,
-};
-const changed = newComponents?.year !== currentComponents.year ||
-newComponents?.month !== currentComponents.month ||
-newComponents?.day !== currentComponents.day ||
-newComponents?.hour !== currentComponents.hour ||
-newComponents?.minute !== currentComponents.minute;
-if (changed) {
-this._state = {
-...this._state,
-...newComponents,
-};
-this.syncFormValue();
-}
-break;
-}
 case 'with-time': {
+if (!this._initialized)
+break;
 const newWithTime = newValue;
-const oldWithTime = this._state.withTime;
-if (newWithTime !== oldWithTime) {
+if (newWithTime !== this._state.withTime) {
 this._state.withTime = newWithTime;
-const hasDate = this._state.year !== undefined &&
-this._state.month !== undefined &&
-this._state.day !== undefined;
-if (hasDate) {
 this.syncFormValue();
-}
+this.updateValidity();
 }
 break;
 }
+case 'native':
+if (this._initialized)
+this.syncFormValue();
+break;
 }
 }
 }
 getFormValue() {
-return componentsToOutputValue(this.getComponents());
+return this.outputValue(this.getComponents());
+}
+outputValue(components) {
+return componentsToOutputValue(components, this._state.withTime, !!this.getProperty('native'));
 }
 updateFormValue() {
 this._internals.setFormValue(this.getFormValue() ?? '');
 this.updateValidity();
 }
+focusTarget() {
+return this.shadowRoot?.querySelector('.native-date-input')
+?? this.shadowRoot?.querySelector('.date-picker-stub')
+?? null;
+}
 focus(options) {
-const stub = this.shadowRoot?.querySelector('.date-picker-stub');
-if (stub)
-stub.focus(options);
+if (this.getProperty('disabled'))
+return;
+const target = this.focusTarget();
+if (target)
+target.focus(options);
 else
 super.focus(options);
 }
@@ -326,8 +349,8 @@ if (this.getProperty('disabled') || !this.getProperty('required') || this.getFor
 this.applyValidity({});
 return;
 }
-const anchor = this.shadowRoot?.querySelector('.date-picker-stub, .native-date-input');
-this.applyValidity({ valueMissing: true }, 'Please select a date', anchor ?? undefined);
+const type = this._state.withTime ? 'datetime-local' : 'date';
+this.applyValidity({ valueMissing: true }, nativeMessage('input', { type, required: true }), this.focusTarget() ?? undefined);
 }
 getComponents() {
 return {
@@ -336,6 +359,8 @@ month: this._state.month,
 day: this._state.day,
 hour: this._state.hour,
 minute: this._state.minute,
+second: this._state.second,
+epoch: this._state.epoch,
 };
 }
 hasDate() {
@@ -345,25 +370,15 @@ getFormattedValue(components) {
 const c = components || this.getComponents();
 if (!c.year || !c.month || !c.day)
 return null;
-return formatDisplayValue(c, this.getProperty('format') || 'long', getEffectiveLocale(this, this.getProperty('locale')), this._state.withTime);
+return formatDisplayValue(c, this.getProperty('format') || 'long', getEffectiveLocale(this, this.getProperty('locale')), this._state.withTime, !!this.getProperty('native'));
 }
 initializeState() {
-const valueAttr = this.getProperty('value');
-const withTime = this.getProperty('with-time');
-const components = parseValue(valueAttr, withTime);
-if (components === null) {
-this._state = {
-withTime,
-open: false,
-};
-}
-else {
 this._state = {
-...components,
-withTime,
+...parseValue(this.getProperty('value')),
+withTime: this.getProperty('with-time'),
 open: false,
 };
-}
+this._initialized = true;
 this.syncFormValue();
 }
 updateState(updates, forceSync = false) {
@@ -374,24 +389,47 @@ this.syncFormValue();
 }
 }
 syncFormValue() {
-const utcValue = this.getFormValue();
+const formValue = this.getFormValue();
 const currentValue = this.getProperty('value');
-if (utcValue !== currentValue) {
-if (utcValue) {
-this.setProperty('value', utcValue);
+if (formValue !== currentValue) {
+this._syncing = true;
+try {
+this.setProperty('value', formValue || null);
+}
+finally {
+this._syncing = false;
 }
-else {
-this.setProperty('value', null);
 }
 }
+syncErrorFlavor() {
+if (!this._connected)
+return;
+const flavor = this.getProperty('flavor');
+const replaced = this.getAttribute(ERROR_FLAVOR);
+if (this.getProperty('error')) {
+if (replaced === null && (flavor === 'default' || flavor === 'neutral')) {
+this.setAttribute(ERROR_FLAVOR, this.getAttribute('flavor') ?? '');
+this.setProperty('flavor', 'danger');
+}
+}
+else if (replaced !== null) {
+this.removeAttribute(ERROR_FLAVOR);
+if (flavor !== 'danger')
+return;
+if (!replaced)
+this.removeAttribute('flavor');
+else
+this.setProperty('flavor', replaced);
+}
 }
 handleTimeInputChange(hour, minute) {
 if (!this.hasDate())
 return;
-const components = { ...this.getComponents(), hour, minute };
+const components = { ...this.getComponents(), hour, minute, second: 0, epoch: undefined };
 this.updateState(components, true);
 this.emitChangeEvent(components, 'time-change');
 this.updateTimeSummary();
+this.revealValidity();
 }
 updateTimeSummary(summary = this.shadowRoot?.querySelector('.time-summary')) {
 if (!summary)
@@ -405,19 +443,22 @@ iso.textContent = '';
 return;
 }
 const locale = getEffectiveLocale(this, this.getProperty('locale')) || undefined;
-const date = new Date(c.year, c.month - 1, c.day, c.hour ?? 0, c.minute ?? 0);
-const day = new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric' }).format(date);
-const time = new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit', hourCycle: 'h23' }).format(date);
+const { date, timeZone } = displayDate(c, !!this.getProperty('native'));
+const day = new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', timeZone }).format(date);
+const time = new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit', hourCycle: 'h23', timeZone }).format(date);
 text.textContent = `${day} · ${time}`;
 iso.textContent = componentsToLocalValue(c, true) ?? '';
 }
 emitChangeEvent(components, source) {
-const utcValue = components ? componentsToOutputValue(components) : null;
+const value = components ? this.outputValue(components) : null;
 const localValue = components ? componentsToLocalValue(components, this._state.withTime) : null;
-const milliseconds = components ? componentsToDateObject(components)?.getTime() ?? null : null;
+const effective = components && effectiveComponents(components, this._state.withTime);
+const milliseconds = effective
+? effective.epoch ?? componentsToDateObject(effective)?.getTime() ?? null
+: null;
 const formatted = components ? this.getFormattedValue(components) : null;
 const detail = {
-value: utcValue,
+value,
 localValue,
 milliseconds,
 formatted,
@@ -435,7 +476,15 @@ set size(v) { this.setProperty('size', v); }
 get placement() { return this.getProperty('placement'); }
 set placement(v) { this.setProperty('placement', v); }
 get flavor() { return this.getProperty('flavor'); }
-set flavor(v) { this.setProperty('flavor', v); }
+set flavor(v) {
+this.removeAttribute(ERROR_FLAVOR);
+this.setProperty('flavor', v);
+}
+attributeChangedCallback(name, oldValue, newValue) {
+if (name === 'flavor' && newValue === 'danger' && oldValue === newValue)
+this.removeAttribute(ERROR_FLAVOR);
+super.attributeChangedCallback(name, oldValue, newValue);
+}
 get label() { return this.getProperty('label'); }
 set label(v) { this.setProperty('label', v); }
 get placeholder() { return this.getProperty('placeholder'); }
@@ -458,16 +507,26 @@ get max() { return this.getProperty('max'); }
 set max(v) { this.setProperty('max', v ?? ''); }
 get withTime() { return this.getProperty('with-time'); }
 set withTime(v) { this.setProperty('with-time', v); }
+get native() { return this.getProperty('native'); }
+set native(v) { this.setProperty('native', v); }
+get error() { return this.getProperty('error'); }
+set error(v) { this.setProperty('error', v); }
 get value() {
+if (this._initialized)
 return this.getProperty('value') || null;
+const parsed = parseValue(this.getProperty('value'));
+return parsed && componentsToOutputValue(parsed, !!this.getProperty('with-time'), !!this.getProperty('native'));
 }
 set value(val) {
 if (val === null || val === undefined || val === '') {
 this.setProperty('value', null);
 }
+else if (typeof val === 'string') {
+this.setProperty('value', val);
+}
 else {
-const strValue = val instanceof Date ? val.toISOString() : val;
-this.setProperty('value', strValue);
+const date = new Date(val);
+this.setProperty('value', isNaN(date.getTime()) ? null : date.toISOString());
 }
 }
 clear() {
@@ -479,6 +538,8 @@ if (this.getProperty('disabled'))
 classes.push('disabled');
 if (this.getProperty('required'))
 classes.push('required');
+if (this.getProperty('error'))
+classes.push('error');
 if (this._state.open)
 classes.push('open');
 return classes.join(' ');
@@ -501,7 +562,7 @@ stub.setAttribute('aria-labelledby', `date-picker-label-${getElementHash(this)}`
 }
 stub.addEventListener('keydown', (e) => {
 const ke = e;
-if (this._state.open)
+if (this._state.open || e.target !== stub)
 return;
 if (ke.key === 'Enter' || ke.key === ' ') {
 ke.preventDefault();
@@ -611,8 +672,8 @@ if (min)
 calendar.setAttribute('min', min);
 if (max)
 calendar.setAttribute('max', max);
-const flavor = this.getProperty('flavor');
-if (flavor && flavor !== 'default')
+const flavor = this.calendarFlavor();
+if (flavor)
 calendar.setAttribute('flavor', flavor);
 calendar.addEventListener('change', (e) => this.handleCalendarChange(e));
 contentWrapper.appendChild(calendar);
@@ -620,11 +681,17 @@ if (this._state.withTime) {
 contentWrapper.appendChild(this.renderTimeSection());
 }
 dialog.appendChild(contentWrapper);
-dialog.addEventListener('close', () => {
-this.updateState({ open: false });
-});
+new MutationObserver(() => {
+if (this._state.open && !dialog.open && this.isConnected)
+this.closeDropdown();
+}).observe(dialog, { attributes: true, attributeFilter: ['open'] });
 return dialog;
 }
+calendarFlavor() {
+const replaced = this.getAttribute(ERROR_FLAVOR);
+const flavor = replaced ?? this.getProperty('flavor');
+return flavor && flavor !== 'default' ? flavor : null;
+}
 renderNativeInput() {
 const wrapper = document.createElement('div');
 wrapper.className = 'dropdown-wrapper';
@@ -636,21 +703,8 @@ stub.setAttribute('disabled', 'true');
 }
 const input = document.createElement('input');
 input.className = 'native-date-input';
-input.type = this._state.withTime ? 'datetime-local' : 'date';
-if (isDisabled)
-input.disabled = true;
-if (this.getProperty('required'))
-input.required = true;
-const minBound = this.getProperty('min');
-const maxBound = this.getProperty('max');
-if (minBound)
-input.min = this._state.withTime ? `${minBound}T00:00` : minBound;
-if (maxBound)
-input.max = this._state.withTime ? `${maxBound}T23:59` : maxBound;
-const localValue = componentsToLocalValue(this.getComponents(), this._state.withTime);
-if (localValue) {
-input.value = localValue;
-}
+this.syncNativeInput(input);
+const localValue = input.value;
 const placeholder = this.getProperty('placeholder') || 'Select date...';
 const formattedValue = this.getFormattedValue();
 const placeholderEl = document.createElement('span');
@@ -659,13 +713,17 @@ placeholderEl.textContent = formattedValue || placeholder;
 input.addEventListener('change', () => {
 if (!input.value) {
 this.clearValue();
-return;
 }
-const parsed = parseValue(input.value, this._state.withTime);
+else {
+const parsed = parseValue(input.value);
 if (parsed) {
-this.updateState(parsed, true);
-this.emitChangeEvent(parsed, 'selection');
+const { hour, minute, second } = this._state.withTime ? parsed : this._state;
+const components = { ...parsed, hour, minute, second, epoch: undefined };
+this.updateState(components, true);
+this.emitChangeEvent(components, 'selection');
 }
+}
+this.revealValidity();
 });
 const startSlot = document.createElement('slot');
 startSlot.name = 'start';
@@ -691,6 +749,23 @@ stub.appendChild(iconContainer);
 wrapper.appendChild(stub);
 return wrapper;
 }
+syncNativeInput(input) {
+const withTime = this._state.withTime;
+input.type = withTime ? 'datetime-local' : 'date';
+input.disabled = !!this.getProperty('disabled');
+input.required = !!this.getProperty('required');
+const min = this.getProperty('min');
+const max = this.getProperty('max');
+if (min)
+input.min = withTime ? `${min}T00:00` : min;
+else
+input.removeAttribute('min');
+if (max)
+input.max = withTime ? `${max}T23:59` : max;
+else
+input.removeAttribute('max');
+input.value = componentsToLocalValue(this.getComponents(), withTime) ?? '';
+}
 calculateCalendarPosition() {
 if (!this.shadowRoot)
 return;
@@ -757,6 +832,8 @@ this.shadowRoot.innerHTML = '';
 const container = this.renderContainer();
 container.appendChild(this.renderNativeInput());
 this.shadowRoot.appendChild(container);
+this.syncErrorLine();
+this.updateValidity();
 return;
 }
 const existingDialog = this.shadowRoot.querySelector('.calendar-dialog');
@@ -766,6 +843,7 @@ this.updateDisplay();
 this.calculateCalendarPosition();
 return;
 }
+const hadFocus = !!this.shadowRoot.activeElement;
 this.shadowRoot.innerHTML = '';
 const container = this.renderContainer();
 const wrapper = document.createElement('div');
@@ -774,7 +852,33 @@ wrapper.appendChild(this.renderStub());
 wrapper.appendChild(this.renderCalendarDropdown());
 container.appendChild(wrapper);
 this.shadowRoot.appendChild(container);
+this.syncErrorLine();
 this.setupEventListeners();
+this.updateValidity();
+if (hadFocus)
+this.focus({ preventScroll: true });
+}
+syncErrorLine() {
+const container = this.shadowRoot?.querySelector('.dropdown-container');
+if (!container)
+return;
+const error = this.getProperty('error');
+const errorId = `date-picker-error-${getElementHash(this)}`;
+let line = container.querySelector(':scope > .error-message');
+if (error) {
+if (!line) {
+line = document.createElement('div');
+line.className = 'error-message';
+line.id = errorId;
+container.appendChild(line);
+}
+line.textContent = error;
+this.focusTarget()?.setAttribute('aria-describedby', errorId);
+}
+else {
+line?.remove();
+this.focusTarget()?.removeAttribute('aria-describedby');
+}
 }
 updateDisplay() {
 if (!this.shadowRoot)
@@ -793,12 +897,15 @@ const clearButton = this.shadowRoot.querySelector('.stub-clear');
 if (clearButton) {
 clearButton.style.display = (clearable && hasValue && !isDisabled) ? '' : 'none';
 }
+const stub = this.shadowRoot.querySelector('.date-picker-stub');
+if (stub)
+stub.className = this.buildStubClasses();
+this.syncErrorLine();
 if (isMobileTouch()) {
 const nativeInput = this.shadowRoot.querySelector('.native-date-input');
-if (nativeInput) {
-const localValue = componentsToLocalValue(this.getComponents(), this._state.withTime);
-nativeInput.value = localValue || '';
-}
+if (nativeInput)
+this.syncNativeInput(nativeInput);
+stub?.toggleAttribute('disabled', !!isDisabled);
 return;
 }
 const calendar = this.shadowRoot.querySelector('ty-calendar');
@@ -808,8 +915,8 @@ calendar.setAttribute('month', this._state.month.toString());
 calendar.setAttribute('day', this._state.day.toString());
 }
 if (calendar) {
-const flavor = this.getProperty('flavor');
-if (flavor && flavor !== 'default')
+const flavor = this.calendarFlavor();
+if (flavor)
 calendar.setAttribute('flavor', flavor);
 else
 calendar.removeAttribute('flavor');
@@ -851,7 +958,7 @@ event.preventDefault();
 const dialog = this.shadowRoot?.querySelector('.calendar-dialog');
 if (this._state.open && (!dialog || !dialog.open)) {
 this.updateState({ open: false }, true);
-unlockScroll(`date-picker-${this.id || this.toString()}`);
+unlockScroll(`date-picker-${getElementHash(this)}`);
 }
 const disabled = this.getProperty('disabled');
 if (!disabled && Date.now() - this._closeTimestamp > 300) {
@@ -865,6 +972,8 @@ month: undefined,
 day: undefined,
 hour: undefined,
 minute: undefined,
+second: undefined,
+epoch: undefined,
 }, true);
 this.value = null;
 this.emitChangeEvent(null, 'clear');
@@ -874,6 +983,11 @@ handleClearClick(event) {
 event.preventDefault();
 event.stopPropagation();
 this.clearValue();
+const active = document.activeElement;
+if (this.matches(':focus-within') || !active || active === document.body) {
+this.shadowRoot?.querySelector('.native-date-input')?.focus({ preventScroll: true });
+}
+this.revealValidity();
 }
 handleCalendarChange(event) {
 event.preventDefault();
@@ -889,9 +1003,12 @@ month: dayContext.month,
 day: dayContext.dayInMonth,
 hour: this._state.hour,
 minute: this._state.minute,
+second: this._state.second,
+epoch: undefined,
 };
 this.updateState(newComponents, true);
 this.emitChangeEvent(newComponents, 'selection');
+this.revealValidity();
 if (!this._state.withTime) {
 this.closeDropdown();
 }
@@ -945,9 +1062,15 @@ this.render();
 requestAnimationFrame(() => {
 if (!this.shadowRoot)
 return;
+if (!this._state.open || !this.isConnected)
+return;
+if (this.shadowRoot.querySelector('.date-picker-stub')?.checkVisibility() === false) {
+this.closeDropdown();
+return;
+}
 const dialog = this.shadowRoot.querySelector('.calendar-dialog');
 if (dialog) {
-const pickerId = `date-picker-${this.id || this.toString()}`;
+const pickerId = `date-picker-${getElementHash(this)}`;
 lockScroll(pickerId);
 dialog.showModal();
 this.calculateCalendarPosition();
@@ -966,7 +1089,7 @@ closeDropdown() {
 if (!this._state.open)
 return;
 this._closeTimestamp = Date.now();
-const pickerId = `date-picker-${this.id || this.toString()}`;
+const pickerId = `date-picker-${getElementHash(this)}`;
 this.updateState({ open: false }, true);
 unlockScroll(pickerId);
 if (this.shadowRoot) {
@@ -981,6 +1104,7 @@ stubEl.setAttribute('aria-expanded', 'false');
 }
 this.dispatchEvent(new CustomEvent('close'));
 this.render();
+this.focus();
 }
 cleanup() {
 if (this._clickListener) {
@@ -996,7 +1120,7 @@ dialog.removeEventListener('click', this._dialogClickListener);
 }
 }
 if (this._state.open) {
-const pickerId = `date-picker-${this.id || this.toString()}`;
+const pickerId = `date-picker-${getElementHash(this)}`;
 unlockScroll(pickerId);
 }
 this._clickListener = undefined;
@@ -1069,6 +1193,11 @@ type: 'boolean',
 visual: true,
 default: false
 },
+error: {
+type: 'string',
+visual: true,
+default: ''
+},
 format: {
 type: 'string',
 visual: true,
@@ -1099,6 +1228,11 @@ default: null
 type: 'boolean',
 visual: true,
 default: false
+},
+native: {
+type: 'boolean',
+visual: true,
+default: false
 }
 };
 TyDatePicker.formAssociated = true;