@3mo/date-time-fields 0.15.0 → 0.16.0

package/dist/FieldDateTime.js

@@ -69,19 +69,19 @@ let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
         return new DateTimeRange(this.selectedDate, this.selectedDate);
     }
     get presetsTemplate() {
-        return join([this.precision < FieldDateTimePrecision.Day ? undefined : html `
-			${this.getPresetTemplate(t('Today'), () => new DateTime().dayStart)}
-			${this.getPresetTemplate(t('Yesterday'), () => new DateTime().subtract({ days: 1 }).dayStart)}
-			${this.getPresetTemplate(t('Tomorrow'), () => new DateTime().add({ days: 1 }).dayStart)}
-			<mo-line></mo-line>
-			${this.getPresetTemplate(t('Week start'), () => new DateTime().weekStart.dayStart)}
-			${this.getPresetTemplate(t('Week end'), () => new DateTime().weekEnd.dayEnd)}
-			<mo-line></mo-line>
-			${this.getPresetTemplate(t('Month start'), () => new DateTime().monthStart.dayStart)}
-			${this.getPresetTemplate(t('Month end'), () => new DateTime().monthEnd.dayEnd)}
-			<mo-line></mo-line>
-			${this.getPresetTemplate(t('Year start'), () => new DateTime().yearStart.dayStart)}
-			${this.getPresetTemplate(t('Year end'), () => new DateTime().yearEnd.dayEnd)}
+        return join([this.precision < FieldDateTimePrecision.Day ? undefined : html `
+			${this.getPresetTemplate(t('Today'), () => new DateTime().dayStart)}
+			${this.getPresetTemplate(t('Yesterday'), () => new DateTime().subtract({ days: 1 }).dayStart)}
+			${this.getPresetTemplate(t('Tomorrow'), () => new DateTime().add({ days: 1 }).dayStart)}
+			<mo-line></mo-line>
+			${this.getPresetTemplate(t('Week start'), () => new DateTime().weekStart.dayStart)}
+			${this.getPresetTemplate(t('Week end'), () => new DateTime().weekEnd.dayEnd)}
+			<mo-line></mo-line>
+			${this.getPresetTemplate(t('Month start'), () => new DateTime().monthStart.dayStart)}
+			${this.getPresetTemplate(t('Month end'), () => new DateTime().monthEnd.dayEnd)}
+			<mo-line></mo-line>
+			${this.getPresetTemplate(t('Year start'), () => new DateTime().yearStart.dayStart)}
+			${this.getPresetTemplate(t('Year end'), () => new DateTime().yearEnd.dayEnd)}
 		`].filter(Boolean), html `<mo-line></mo-line>`);
     }
     handleSelectedDateChange(date, precision) {

package/dist/FieldDateTimeBase.d.ts

@@ -3,6 +3,7 @@ import { InputFieldComponent } from '@3mo/field';
 import { type MaterialIcon } from '@3mo/icon';
 import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
 import type { Calendar } from './selection/index.js';
+export declare const dateTimeConverter: (value: unknown) => import("@3mo/date-time/DateTime.js").DateTime | undefined;
 /**
  * @attr open - Whether the date picker is open
  * @attr pickerHidden - Hide the date picker

package/dist/FieldDateTimeBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDateTimeBase.d.ts","sourceRoot":"","sources":["../FieldDateTimeBase.ts"],"names":[],"mappings":"AACA,OAAO,EAA0E,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAE3H,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAepD;;;;;;;;GAQG;AACH,8BAAsB,iBAAiB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC5B,IAAI,UAAQ;IAC3B,YAAY,UAAQ;IACS,qBAAqB,gDAAiB;IACE,SAAS,yBAAgC;IACjF,GAAG,CAAC,EAAE,QAAQ,CAAA;IACd,GAAG,CAAC,EAAE,QAAQ,CAAA;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAA;IAEzE,cAAc,gDAAiB;IAElB,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAA;cAEzC,SAAS;cAIT,YAAY;IAI/B,OAAO,CAAC,oBAAoB,CAE3B;IAED,SAAS,CAAC,QAAQ,CAAC,sBAAsB,EAAE,YAAY,CAAU;IAEjE,SAAS,CAAC,QAAQ,KAAK,YAAY,IAAI,QAAQ,GAAG,SAAS,CAAA;IAE3D,SAAS,KAAK,aAAa,IAAI,IAAI,CAAC,qBAAqB,CAMxD;cAEkB,YAAY;IAK/B,SAAS,CAAC,QAAQ,CAAC,mBAAmB,IAAI,IAAI;cAE3B,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK;IAKpD,cAAuB,QAAQ,YAE9B;IAED,SAAS,KAAK,WAAW,WAExB;IAED,WAAoB,MAAM,kCAuDzB;IAED,cAAuB,QAAQ,uBAK9B;IAED,cAAuB,eAAe,uBAMrC;IAED,cAAuB,aAAa,uBAanC;IAED,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS;uBACtC,iBAAiB,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,GAAG,MAAM;IAE3E,OAAO,KAAK,uBAAuB,GAYlC;IAED,SAAS,KAAK,0BAA0B,uBAOvC;IAED,SAAS,KAAK,eAAe,uBAkB5B;IAED,SAAS,KAAK,wBAAwB,uBAOrC;IAED,SAAS,CAAC,QAAQ,KAAK,eAAe,IAAI,kBAAkB,CAAA;IAE5D,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;IAYzD,OAAO,CAAC,gBAAgB;IAaxB,SAAS,KAAK,YAAY,uBAEzB;IAED,SAAS,KAAK,gBAAgB,uBAW7B;IAED,SAAS,CAAC,QAAQ,KAAK,aAAa,IAAI,aAAa,GAAG,SAAS,CAAA;IAEjE,OAAO,KAAK,YAAY,GAavB;IAED,OAAO,KAAK,gBAAgB,GAQ3B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,SAAS,CAAC,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;CAMpF"}
+{"version":3,"file":"FieldDateTimeBase.d.ts","sourceRoot":"","sources":["../FieldDateTimeBase.ts"],"names":[],"mappings":"AACA,OAAO,EAA0E,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAE3H,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAEpD,eAAO,MAAM,iBAAiB,GAAI,OAAO,OAAO,8DAW/C,CAAA;AAED;;;;;;;;GAQG;AACH,8BAAsB,iBAAiB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC5B,IAAI,UAAQ;IAC3B,YAAY,UAAQ;IACS,qBAAqB,gDAAiB;IACE,SAAS,yBAAgC;IACjF,GAAG,CAAC,EAAE,QAAQ,CAAA;IACd,GAAG,CAAC,EAAE,QAAQ,CAAA;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAA;IAEzE,cAAc,gDAAiB;IAElB,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAA;cAEzC,SAAS;cAIT,YAAY;IAI/B,OAAO,CAAC,oBAAoB,CAE3B;IAED,SAAS,CAAC,QAAQ,CAAC,sBAAsB,EAAE,YAAY,CAAU;IAEjE,SAAS,CAAC,QAAQ,KAAK,YAAY,IAAI,QAAQ,GAAG,SAAS,CAAA;IAE3D,SAAS,KAAK,aAAa,IAAI,IAAI,CAAC,qBAAqB,CAMxD;cAEkB,YAAY;IAK/B,SAAS,CAAC,QAAQ,CAAC,mBAAmB,IAAI,IAAI;cAE3B,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK;IAKpD,cAAuB,QAAQ,YAE9B;IAED,SAAS,KAAK,WAAW,WAExB;IAED,WAAoB,MAAM,kCAuDzB;IAED,cAAuB,QAAQ,uBAK9B;IAED,cAAuB,eAAe,uBAMrC;IAED,cAAuB,aAAa,uBAanC;IAED,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS;uBACtC,iBAAiB,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,GAAG,MAAM;IAE3E,OAAO,KAAK,uBAAuB,GAYlC;IAED,SAAS,KAAK,0BAA0B,uBAOvC;IAED,SAAS,KAAK,eAAe,uBAkB5B;IAED,SAAS,KAAK,wBAAwB,uBAOrC;IAED,SAAS,CAAC,QAAQ,KAAK,eAAe,IAAI,kBAAkB,CAAA;IAE5D,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;IAYzD,OAAO,CAAC,gBAAgB;IAaxB,SAAS,KAAK,YAAY,uBAEzB;IAED,SAAS,KAAK,gBAAgB,uBAW7B;IAED,SAAS,CAAC,QAAQ,KAAK,aAAa,IAAI,aAAa,GAAG,SAAS,CAAA;IAEjE,OAAO,KAAK,YAAY,GAavB;IAED,OAAO,KAAK,gBAAgB,GAQ3B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,SAAS,CAAC,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;CAMpF"}

package/dist/FieldDateTimeBase.js

@@ -3,7 +3,7 @@ import { cache, css, html, live, property, style, bind, state, query, ifDefined
 import { hasChanged } from '@a11d/equals';
 import { InputFieldComponent } from '@3mo/field';
 import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
-const dateTimeConverter = (value) => {
+export const dateTimeConverter = (value) => {
     if (value instanceof DateTime) {
         return value;
     }
@@ -63,86 +63,86 @@ export class FieldDateTimeBase extends InputFieldComponent {
         return '';
     }
     static get styles() {
-        return css `
-			${super.styles}
-
-			:host {
-				position: relative;
-			}
-
-			:host([disabled]) {
-				pointer-events: none;
-			}
-
-			mo-field {
-				anchor-name: --mo-field-date-time;
-			}
-
-			mo-popover {
-				position-anchor: --mo-field-date-time;
-				position-visibility: anchors-visible;
-				background: var(--mo-color-background);
-				box-shadow: var(--mo-shadow);
-				border-radius: var(--mo-border-radius);
-				color: var(--mo-color-foreground);
-				font-size: 0.875em;
-			}
-
-			#selector {
-				height: clamp(175px, 100vh, 450px);
-			}
-
-			.timezone {
-				padding: 0.4rem;
-				font-size: small;
-				text-align: center;
-				font-weight: 500;
-				color: var(--mo-color-gray);
-			}
-
-			input::placeholder {
-				color: transparent;
-			}
-
-			mo-field[active]:not([dense]) input::placeholder {
-				color: var(--mo-color-gray);
-			}
-
-			#presets {
-				background-color: var(--mo-color-transparent-gray-1);
-				mo-list-item {
-					padding-block: 0.5rem;
-					min-height: auto;
-					opacity: 0.9;
-				}
-			}
+        return css `
+			${super.styles}
+
+			:host {
+				position: relative;
+			}
+
+			:host([disabled]) {
+				pointer-events: none;
+			}
+
+			mo-field {
+				anchor-name: --mo-field-date-time;
+			}
+
+			mo-popover {
+				position-anchor: --mo-field-date-time;
+				position-visibility: anchors-visible;
+				background: var(--mo-color-background);
+				box-shadow: var(--mo-shadow);
+				border-radius: var(--mo-border-radius);
+				color: var(--mo-color-foreground);
+				font-size: 0.875em;
+			}
+
+			#selector {
+				height: clamp(175px, 100vh, 450px);
+			}
+
+			.timezone {
+				padding: 0.4rem;
+				font-size: small;
+				text-align: center;
+				font-weight: 500;
+				color: var(--mo-color-gray);
+			}
+
+			input::placeholder {
+				color: transparent;
+			}
+
+			mo-field[active]:not([dense]) input::placeholder {
+				color: var(--mo-color-gray);
+			}
+
+			#presets {
+				background-color: var(--mo-color-transparent-gray-1);
+				mo-list-item {
+					padding-block: 0.5rem;
+					min-height: auto;
+					opacity: 0.9;
+				}
+			}
 		`;
     }
     get template() {
-        return html `
-			${super.template}
-			${this.popoverTemplate}
+        return html `
+			${super.template}
+			${this.popoverTemplate}
 		`;
     }
     get endSlotTemplate() {
-        return html `
-			${super.endSlotTemplate}
-			${this.clearIconButtonTemplate}
-			${this.calendarIconButtonTemplate}
+        return html `
+			${super.endSlotTemplate}
+			${this.clearIconButtonTemplate}
+			${this.calendarIconButtonTemplate}
 		`;
     }
     get inputTemplate() {
-        return html `
-			<input
-				part='input'
-				?readonly=${this.readonly}
-				?required=${this.required}
-				?disabled=${this.disabled}
-				placeholder=${this.placeholder}
-				.value=${live(this.inputStringValue || '')}
-				@input=${(e) => this.handleInput(this.inputValueToValue(this.inputElement.value || ''), e)}
-				@change=${(e) => this.handleChange(this.inputValueToValue(this.inputElement.value || ''), e)}
-			>
+        return html `
+			<input
+				part='input'
+				?readonly=${this.readonly}
+				?required=${this.required}
+				?disabled=${this.disabled}
+				placeholder=${this.placeholder}
+				.value=${live(this.inputStringValue || '')}
+				@input=${(e) => this.handleInput(this.inputValueToValue(this.inputElement.value || ''), e)}
+				@change=${(e) => this.handleChange(this.inputValueToValue(this.inputElement.value || ''), e)}
+			>
 		`;
     }
     get clearIconButtonTemplate() {
@@ -151,46 +151,46 @@ export class FieldDateTimeBase extends InputFieldComponent {
             this.handleInput(undefined);
             this.handleChange(undefined);
         };
-        return !this.value || !this.focusController.focused ? html.nothing : html `
-			<mo-icon-button tabindex='-1' dense slot='end' icon='cancel'
-				@click=${clear}
-				${style({ color: 'var(--mo-color-gray)', fontSize: '20px', cursor: 'pointer', userSelect: 'none', marginBlockStart: '2.75px', marginInlineEnd: '5px' })}
-			></mo-icon-button>
+        return !this.value || !this.focusController.focused ? html.nothing : html `
+			<mo-icon-button tabindex='-1' dense slot='end' icon='cancel'
+				@click=${clear}
+				${style({ color: 'var(--mo-color-gray)', fontSize: '20px', cursor: 'pointer', userSelect: 'none', marginBlockStart: '2.75px', marginInlineEnd: '5px' })}
+			></mo-icon-button>
 		`;
     }
     get calendarIconButtonTemplate() {
-        return this.pickerHidden ? html.nothing : html `
-			<mo-icon tabindex='-1' slot='end'
-				icon=${this.calendarIconButtonIcon}
-				${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)', fontSize: '22px', marginBlockStart: '2px', cursor: 'pointer', userSelect: 'none' })}
-			></mo-icon>
+        return this.pickerHidden ? html.nothing : html `
+			<mo-icon tabindex='-1' slot='end'
+				icon=${this.calendarIconButtonIcon}
+				${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)', fontSize: '22px', marginBlockStart: '2px', cursor: 'pointer', userSelect: 'none' })}
+			></mo-icon>
 		`;
     }
     get popoverTemplate() {
-        return this.pickerHidden ? html.nothing : html `
-			<mo-popover tabindex='-1'
-				.anchor=${this} target='field'
-				?open=${bind(this, 'open', { sourceUpdated: () => setTimeout(() => this.calendar?.setNavigatingValue(this.navigationDate)) })}
-			>
-				${cache(!this.open ? html.nothing : html `
-					<mo-flex direction='horizontal'>
-						${this.presetsTemplate === html.nothing ? html.nothing : html `
-							<mo-flex id='presets'>
-								${this.presetsTemplate}
-							</mo-flex>
-						`}
-						${this.popoverSelectionTemplate}
-					</mo-flex>
-				`)}
-			</mo-popover>
+        return this.pickerHidden ? html.nothing : html `
+			<mo-popover tabindex='-1'
+				.anchor=${this} target='field'
+				?open=${bind(this, 'open', { sourceUpdated: () => setTimeout(() => this.calendar?.setNavigatingValue(this.navigationDate)) })}
+			>
+				${cache(!this.open ? html.nothing : html `
+					<mo-flex direction='horizontal'>
+						${this.presetsTemplate === html.nothing ? html.nothing : html `
+							<mo-flex id='presets'>
+								${this.presetsTemplate}
+							</mo-flex>
+						`}
+						${this.popoverSelectionTemplate}
+					</mo-flex>
+				`)}
+			</mo-popover>
 		`;
     }
     get popoverSelectionTemplate() {
-        return html `
-			<mo-flex id='selector' direction='horizontal' style='flex: 1'>
-				${this.dateTemplate}
-				${this.timeTemplate}
-			</mo-flex>
+        return html `
+			<mo-flex id='selector' direction='horizontal' style='flex: 1'>
+				${this.dateTemplate}
+				${this.timeTemplate}
+			</mo-flex>
 		`;
     }
     getPresetTemplate(label, value) {
@@ -217,56 +217,56 @@ export class FieldDateTimeBase extends InputFieldComponent {
         return this.calendarTemplate;
     }
     get calendarTemplate() {
-        return html `
-			<mo-calendar
-				.precision=${this.precision > FieldDateTimePrecision.Day ? FieldDateTimePrecision.Day : this.precision}
-				.value=${this.calendarValue}
-				.min=${this.min}
-				.max=${this.max}
-				.dateDisabled=${this.dateDisabled}
-				@dateClick=${(e) => this.handleSelectedDateChange(e.detail, this.precision)}
-			></mo-calendar>
+        return html `
+			<mo-calendar
+				.precision=${this.precision > FieldDateTimePrecision.Day ? FieldDateTimePrecision.Day : this.precision}
+				.value=${this.calendarValue}
+				.min=${this.min}
+				.max=${this.max}
+				.dateDisabled=${this.dateDisabled}
+				@dateClick=${(e) => this.handleSelectedDateChange(e.detail, this.precision)}
+			></mo-calendar>
 		`;
     }
     get timeTemplate() {
-        return this.precision <= FieldDateTimePrecision.Day ? html.nothing : html `
-			<mo-flex gap='0.5rem' style='border-inline-start: 1px solid var(--mo-color-transparent-gray-3); min-height: 0'>
-				<mo-flex direction='horizontal' style='flex: 1; min-height: 0'>
-					${this.hourListTemplate}
-					${this.minuteListTemplate}
-					${this.secondListTemplate}
-				</mo-flex>
-				<div class='timezone' title=${ifDefined(this.navigationDate?.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')?.value)}>
-					${this.navigationDate?.formatToParts({ timeZoneName: 'shortOffset' }).find(x => x.type === 'timeZoneName')?.value}
-				</div>
-			</mo-flex>
+        return this.precision <= FieldDateTimePrecision.Day ? html.nothing : html `
+			<mo-flex gap='0.5rem' style='border-inline-start: 1px solid var(--mo-color-transparent-gray-3); min-height: 0'>
+				<mo-flex direction='horizontal' style='flex: 1; min-height: 0'>
+					${this.hourListTemplate}
+					${this.minuteListTemplate}
+					${this.secondListTemplate}
+				</mo-flex>
+				<div class='timezone' title=${ifDefined(this.navigationDate?.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')?.value)}>
+					${this.navigationDate?.formatToParts({ timeZoneName: 'shortOffset' }).find(x => x.type === 'timeZoneName')?.value}
+				</div>
+			</mo-flex>
 		`;
     }
     get hourListTemplate() {
-        return this.precision < FieldDateTimePrecision.Hour ? html.nothing : html `
-			<mo-hour-list style='flex: 1'
-				.navigationDate=${bind(this, 'navigationDate')}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Hour)}
-			></mo-hour-list>
+        return this.precision < FieldDateTimePrecision.Hour ? html.nothing : html `
+			<mo-hour-list style='flex: 1'
+				.navigationDate=${bind(this, 'navigationDate')}
+				.value=${this.selectedDate}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Hour)}
+			></mo-hour-list>
 		`;
     }
     get minuteListTemplate() {
-        return this.precision < FieldDateTimePrecision.Minute ? html.nothing : html `
-			<mo-minute-list style='flex: 1'
-				.navigationDate=${bind(this, 'navigationDate')}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Minute)}
-			></mo-minute-list>
+        return this.precision < FieldDateTimePrecision.Minute ? html.nothing : html `
+			<mo-minute-list style='flex: 1'
+				.navigationDate=${bind(this, 'navigationDate')}
+				.value=${this.selectedDate}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Minute)}
+			></mo-minute-list>
 		`;
     }
     get secondListTemplate() {
-        return this.precision < FieldDateTimePrecision.Second ? html.nothing : html `
-			<mo-second-list style='flex: 1'
-				.navigationDate=${bind(this, 'navigationDate')}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Second)}
-			></mo-second-list>
+        return this.precision < FieldDateTimePrecision.Second ? html.nothing : html `
+			<mo-second-list style='flex: 1'
+				.navigationDate=${bind(this, 'navigationDate')}
+				.value=${this.selectedDate}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Second)}
+			></mo-second-list>
 		`;
     }
     handleSelectedDateChange(date, precision) {

package/dist/FieldDateTimeRange.js

@@ -62,44 +62,44 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
     }
     get presetsTemplate() {
         return join([
-            this.precision < FieldDateTimePrecision.Day ? undefined : html `
-				${this.getPresetTemplate(t('Last week'), () => new DateTimeRange(new DateTime().add({ weeks: -1 }).weekStart.dayStart, new DateTime().add({ weeks: -1 }).weekEnd.dayEnd))}
-				${this.getPresetTemplate(t('This week'), () => new DateTimeRange(new DateTime().weekStart.dayStart, new DateTime().weekEnd.dayEnd))}
-				${this.getPresetTemplate(t('Next week'), () => new DateTimeRange(new DateTime().add({ weeks: 1 }).weekStart.dayStart, new DateTime().add({ weeks: 1 }).weekEnd.dayEnd))}
-				${this.getPresetTemplate(t('Last ${count:number} days', { count: 7 }), () => new DateTimeRange(new DateTime().subtract({ days: 6 }).dayStart, new DateTime().dayEnd))}
-				${this.getPresetTemplate(t('Last ${count:number} days', { count: 30 }), () => new DateTimeRange(new DateTime().subtract({ days: 29 }).dayStart, new DateTime().dayEnd))}
-				${this.getPresetTemplate(t('Last ${count:number} days', { count: 90 }), () => new DateTimeRange(new DateTime().subtract({ days: 89 }).dayStart, new DateTime().dayEnd))}
+            this.precision < FieldDateTimePrecision.Day ? undefined : html `
+				${this.getPresetTemplate(t('Last week'), () => new DateTimeRange(new DateTime().add({ weeks: -1 }).weekStart.dayStart, new DateTime().add({ weeks: -1 }).weekEnd.dayEnd))}
+				${this.getPresetTemplate(t('This week'), () => new DateTimeRange(new DateTime().weekStart.dayStart, new DateTime().weekEnd.dayEnd))}
+				${this.getPresetTemplate(t('Next week'), () => new DateTimeRange(new DateTime().add({ weeks: 1 }).weekStart.dayStart, new DateTime().add({ weeks: 1 }).weekEnd.dayEnd))}
+				${this.getPresetTemplate(t('Last ${count:number} days', { count: 7 }), () => new DateTimeRange(new DateTime().subtract({ days: 6 }).dayStart, new DateTime().dayEnd))}
+				${this.getPresetTemplate(t('Last ${count:number} days', { count: 30 }), () => new DateTimeRange(new DateTime().subtract({ days: 29 }).dayStart, new DateTime().dayEnd))}
+				${this.getPresetTemplate(t('Last ${count:number} days', { count: 90 }), () => new DateTimeRange(new DateTime().subtract({ days: 89 }).dayStart, new DateTime().dayEnd))}
 			`,
-            this.precision < FieldDateTimePrecision.Month ? undefined : html `
-				${this.getPresetTemplate(t('Last month'), () => new DateTimeRange(new DateTime().add({ months: -1 }).monthStart.dayStart, new DateTime().add({ months: -1 }).monthEnd.dayEnd))}
-				${this.getPresetTemplate(t('This month'), () => new DateTimeRange(new DateTime().monthStart.dayStart, new DateTime().monthEnd.dayEnd))}
-				${this.getPresetTemplate(t('Next month'), () => new DateTimeRange(new DateTime().add({ months: 1 }).monthStart.dayStart, new DateTime().add({ months: 1 }).monthEnd.dayEnd))}
+            this.precision < FieldDateTimePrecision.Month ? undefined : html `
+				${this.getPresetTemplate(t('Last month'), () => new DateTimeRange(new DateTime().add({ months: -1 }).monthStart.dayStart, new DateTime().add({ months: -1 }).monthEnd.dayEnd))}
+				${this.getPresetTemplate(t('This month'), () => new DateTimeRange(new DateTime().monthStart.dayStart, new DateTime().monthEnd.dayEnd))}
+				${this.getPresetTemplate(t('Next month'), () => new DateTimeRange(new DateTime().add({ months: 1 }).monthStart.dayStart, new DateTime().add({ months: 1 }).monthEnd.dayEnd))}
 			`,
-            this.precision < FieldDateTimePrecision.Year ? undefined : html `
-				${this.getPresetTemplate(t('Last year'), () => new DateTimeRange(new DateTime().add({ years: -1 }).yearStart.dayStart, new DateTime().add({ years: -1 }).yearEnd.dayEnd))}
-				${this.getPresetTemplate(t('This year'), () => new DateTimeRange(new DateTime().yearStart.dayStart, new DateTime().yearEnd.dayEnd))}
-				${this.getPresetTemplate(t('Next year'), () => new DateTimeRange(new DateTime().add({ years: 1 }).yearStart.dayStart, new DateTime().add({ years: 1 }).yearEnd.dayEnd))}
+            this.precision < FieldDateTimePrecision.Year ? undefined : html `
+				${this.getPresetTemplate(t('Last year'), () => new DateTimeRange(new DateTime().add({ years: -1 }).yearStart.dayStart, new DateTime().add({ years: -1 }).yearEnd.dayEnd))}
+				${this.getPresetTemplate(t('This year'), () => new DateTimeRange(new DateTime().yearStart.dayStart, new DateTime().yearEnd.dayEnd))}
+				${this.getPresetTemplate(t('Next year'), () => new DateTimeRange(new DateTime().add({ years: 1 }).yearStart.dayStart, new DateTime().add({ years: 1 }).yearEnd.dayEnd))}
 			`
         ].filter(Boolean), html `<mo-line></mo-line>`);
     }
     static get styles() {
-        return css `
-			${super.styles}
-
-			mo-tab-bar {
-				max-width: 200px;
-				place-self: center;
-				padding-block: 4px;
-				mo-tab {
-					&:not([active]) {
-						opacity: 0.5;
-					}
-				}
-			}
-
-			#selector {
-				flex: none !important;
-			}
+        return css `
+			${super.styles}
+
+			mo-tab-bar {
+				max-width: 200px;
+				place-self: center;
+				padding-block: 4px;
+				mo-tab {
+					&:not([active]) {
+						opacity: 0.5;
+					}
+				}
+			}
+
+			#selector {
+				flex: none !important;
+			}
 		`;
     }
     get placeholder() {
@@ -109,26 +109,26 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
         return this.value;
     }
     get popoverSelectionTemplate() {
-        return html `
-			<mo-flex style='flex: 1'>
-				${this.popoverToolbarTemplate}
-				${super.popoverSelectionTemplate}
-			</mo-flex>
+        return html `
+			<mo-flex style='flex: 1'>
+				${this.popoverToolbarTemplate}
+				${super.popoverSelectionTemplate}
+			</mo-flex>
 		`;
     }
     get popoverToolbarTemplate() {
-        return html `
-			${this.startEndTabBarTemplate}
+        return html `
+			${this.startEndTabBarTemplate}
 		`;
     }
     get startEndTabBarTemplate() {
-        return html `
-			<mo-flex style='border-inline-start: 1px solid var(--mo-color-transparent-gray-3)'>
-				<mo-tab-bar ${bind(this, 'selection', { sourceUpdated: () => this.resetNavigationDate() })}>
-					<mo-tab value=${FieldDateRangeSelection.Start}>${t('Start')}</mo-tab>
-					<mo-tab value=${FieldDateRangeSelection.End}>${t('End')}</mo-tab>
-				</mo-tab-bar>
-			</mo-flex>
+        return html `
+			<mo-flex style='border-inline-start: 1px solid var(--mo-color-transparent-gray-3)'>
+				<mo-tab-bar ${bind(this, 'selection', { sourceUpdated: () => this.resetNavigationDate() })}>
+					<mo-tab value=${FieldDateRangeSelection.Start}>${t('Start')}</mo-tab>
+					<mo-tab value=${FieldDateRangeSelection.End}>${t('End')}</mo-tab>
+				</mo-tab-bar>
+			</mo-flex>
 		`;
     }
     handleSelectedDateChange(date, precision) {

package/dist/FieldTime.d.ts

@@ -1,13 +1,58 @@
-import { FieldText } from '@3mo/text-fields';
+import { FieldComponent } from '@3mo/field';
+import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
+import { DateTimeSegmentsController, type HourCycle } from './segments/index.js';
 /**
+ * A time-of-day field. Its value is the 24-hour `HH:mm` (or `HH:mm:ss` at second precision) string the
+ * native time input uses, so that it drops in where one was, while the segments follow the language's
+ * own clock — "02:07 PM" for English, "14:07" for German — and the popover offers the hour and minute wheels.
+ *
  * @element mo-field-time
  *
+ * @attr value - The time as `HH:mm` or `HH:mm:ss`
+ * @attr open - Whether the time picker is open
+ * @attr pickerHidden - Hide the time picker
+ * @attr dense - Whether the field is dense
+ * @attr precision - 'minute' (default) or 'second'
+ * @attr hourCycle - The hour cycle of the segments ('h11', 'h12', 'h23' or 'h24'). Defaults to the language's convention.
+ * @attr shortcutReferenceDate - The date the units the user leaves out are taken from. Defaults to now.
+ *
+ * @csspart segments - The group of segments making up the time
+ * @csspart segment - An editable unit of the time
+ * @csspart literal - A separator between the units
+ *
  * @i18n "Time"
  */
-export declare class FieldTime extends FieldText {
+export declare class FieldTime extends FieldComponent<string> {
     label: string;
-    get inputType(): string;
-    protected get startSlotTemplate(): import("lit-html").HTMLTemplateResult;
+    value?: string;
+    open: boolean;
+    pickerHidden: boolean;
+    dense: boolean;
+    precision: FieldDateTimePrecision;
+    hourCycle?: HourCycle;
+    shortcutReferenceDate: import("@3mo/date-time/DateTime.js").DateTime;
+    navigationDate: import("@3mo/date-time/DateTime.js").DateTime;
+    readonly segments: DateTimeSegmentsController<this>;
+    /** Alt+ArrowDown opens the picker, as it does on a native date-time input. */
+    protected handlePickerKey(event: KeyboardEvent): void;
+    /** The value as a time on the reference day, which is all the segments need to render and edit it. */
+    get selectedDate(): DateTime | undefined;
+    protected toValue(date: DateTime | undefined): string | undefined;
+    protected valueUpdated(): void;
+    protected get isActive(): boolean;
+    protected get isDense(): boolean;
+    protected get isPopulated(): boolean;
+    focus(): void;
+    private customValidity;
+    setCustomValidity(error: string): void;
+    checkValidity(): Promise<boolean>;
+    reportValidity(): void;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected get template(): import("lit-html").HTMLTemplateResult;
+    protected get inputTemplate(): import("lit-html").HTMLTemplateResult;
+    protected get endSlotTemplate(): import("lit-html").HTMLTemplateResult;
+    protected get popoverTemplate(): import("lit-html").HTMLTemplateResult;
+    private handleListChange;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/FieldTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldTime.d.ts","sourceRoot":"","sources":["../FieldTime.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAQ5C;;;;GAIG;AACH,qBACa,SAAU,SAAQ,SAAS;IAClB,KAAK,SAAY;IAEtC,IAAa,SAAS,WAErB;IAED,cAAuB,iBAAiB,0CAKvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,SAAS,CAAA;KAC1B;CACD"}
+{"version":3,"file":"FieldTime.d.ts","sourceRoot":"","sources":["../FieldTime.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAEpE,OAAO,EAAE,0BAA0B,EAAsC,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAQpH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,SAAU,SAAQ,cAAc,CAAC,MAAM,CAAC;IAC/B,KAAK,SAAY;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACkB,IAAI,UAAQ;IAC3B,YAAY,UAAQ;IACpB,KAAK,UAAQ;IACwD,SAAS,yBAAgC;IAChF,SAAS,CAAC,EAAE,SAAS,CAAA;IACtB,qBAAqB,gDAAiB;IAEvF,cAAc,gDAAiB;IAExC,QAAQ,CAAC,QAAQ,mCAad;IAEH,8EAA8E;IAC9E,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,aAAa;IAO9C,sGAAsG;IACtG,IAAI,YAAY,IAAI,QAAQ,GAAG,SAAS,CAOvC;IAED,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS;cASzB,YAAY;IAK/B,cAAuB,QAAQ,YAE9B;IAED,cAAuB,OAAO,YAE7B;IAED,cAAuB,WAAW,YAEjC;IAEQ,KAAK;IAId,OAAO,CAAC,cAAc,CAAK;IAElB,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAIzB,aAAa;IAKnB,cAAc;IAIvB,WAAoB,MAAM,kCAgCzB;IAED,cAAuB,QAAQ,0CAK9B;IAED,cAAuB,aAAa,0CAMnC;IAED,cAAuB,eAAe,0CASrC;IAED,SAAS,KAAK,eAAe,0CA2B5B;IAED,OAAO,CAAC,gBAAgB;CAGxB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,SAAS,CAAA;KAC1B;CACD"}