@3mo/date-time-fields 0.5.2 → 0.5.3

package/dist/selection/DateList.js

@@ -15,36 +15,36 @@ export class DateList extends Component {
     get now() { return new DateTime(); }
     get zero() { return 0; }
     static get styles() {
-        return css `
-			mo-scroller {
-				min-width: 70px;
-			}
-
-			.pad {
-				height: 50px;
-			}
-
-			mo-selectable-list-item {
-				height: 32px;
-			}
-
-			mo-selectable-list-item[data-now] {
-				outline: 2px dashed var(--mo-color-gray-transparent);
-			}
+        return css `
+			mo-scroller {
+				min-width: 70px;
+			}
+
+			.pad {
+				height: 50px;
+			}
+
+			mo-selectable-list-item {
+				height: 32px;
+			}
+
+			mo-selectable-list-item[data-now] {
+				outline: 2px dashed var(--mo-color-gray-transparent);
+			}
 		`;
     }
     connected() {
         this.scrollIntoSelectedItem('instant');
     }
     get template() {
-        return this.navigatingValue === undefined ? html.nothing : html `
-			<mo-scroller @pointerenter=${() => this.preventIntervalScrolling = true} @pointerleave=${() => this.preventIntervalScrolling = false}>
-				<mo-selectable-list @change=${() => this.scrollIntoSelectedItem()}>
-					<div class='pad'></div>
-					${this.listItemsTemplate}
-					<div class='pad'></div>
-				</mo-selectable-list>
-			</mo-scroller>
+        return this.navigatingValue === undefined ? html.nothing : html `
+			<mo-scroller @pointerenter=${() => this.preventIntervalScrolling = true} @pointerleave=${() => this.preventIntervalScrolling = false}>
+				<mo-selectable-list @change=${() => this.scrollIntoSelectedItem()}>
+					<div class='pad'></div>
+					${this.listItemsTemplate}
+					<div class='pad'></div>
+				</mo-selectable-list>
+			</mo-scroller>
 		`;
     }
     async scrollIntoSelectedItem(behavior = 'smooth') {

package/dist/selection/HourList.js

@@ -3,14 +3,14 @@ import { component, html, range } from '@a11d/lit';
 import { DateList } from './DateList.js';
 let HourList = class HourList extends DateList {
     get listItemsTemplate() {
-        return html `
-			${[...range(0, this.navigatingValue.hoursInDay)].map(hour => html `
-				<mo-selectable-list-item
-					?selected=${this.value?.hour === hour}
-					?data-now=${this.now.hour === hour}
-					@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ hour }))}
-				>${hour.format().padStart(2, this.zero.format())}</mo-selectable-list-item>
-			`)}
+        return html `
+			${[...range(0, this.navigatingValue.hoursInDay)].map(hour => html `
+				<mo-selectable-list-item
+					?selected=${this.value?.hour === hour}
+					?data-now=${this.now.hour === hour}
+					@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ hour }))}
+				>${hour.format().padStart(2, this.zero.format())}</mo-selectable-list-item>
+			`)}
 		`;
     }
 };

package/dist/selection/MinuteList.js

@@ -3,14 +3,14 @@ import { component, html, range } from '@a11d/lit';
 import { DateList } from './DateList.js';
 let MinuteList = class MinuteList extends DateList {
     get listItemsTemplate() {
-        return html `
-			${[...range(0, 60)].map(minute => html `
-				<mo-selectable-list-item
-					?selected=${this.value?.minute === minute}
-					?data-now=${this.now.minute === minute}
-					@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ minute }))}
-				>${minute.format().padStart(2, this.zero.format())}</mo-selectable-list-item>
-			`)}
+        return html `
+			${[...range(0, 60)].map(minute => html `
+				<mo-selectable-list-item
+					?selected=${this.value?.minute === minute}
+					?data-now=${this.now.minute === minute}
+					@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ minute }))}
+				>${minute.format().padStart(2, this.zero.format())}</mo-selectable-list-item>
+			`)}
 		`;
     }
 };

package/dist/selection/MonthList.js

@@ -3,12 +3,12 @@ import { component, css, html } from '@a11d/lit';
 import { DateList } from './DateList.js';
 let MonthList = class MonthList extends DateList {
     static get styles() {
-        return css `
-			${super.styles}
-
-			mo-scroller {
-				min-width: 125px;
-			}
+        return css `
+			${super.styles}
+
+			mo-scroller {
+				min-width: 125px;
+			}
 		`;
     }
     get monthNames() {
@@ -18,14 +18,14 @@ let MonthList = class MonthList extends DateList {
             .map(date => [date.month, date.format({ month: 'long' })]);
     }
     get listItemsTemplate() {
-        return html `
-			${this.monthNames.map(([month, name]) => html `
-				<mo-selectable-list-item
-					?selected=${this.value?.month === month}
-					?data-now=${this.now.month === month}
-					@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ month }))}
-				>${name}</mo-selectable-list-item>
-			`)}
+        return html `
+			${this.monthNames.map(([month, name]) => html `
+				<mo-selectable-list-item
+					?selected=${this.value?.month === month}
+					?data-now=${this.now.month === month}
+					@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ month }))}
+				>${name}</mo-selectable-list-item>
+			`)}
 		`;
     }
 };

package/dist/selection/SecondList.js

@@ -3,14 +3,14 @@ import { component, html, range } from '@a11d/lit';
 import { DateList } from './DateList.js';
 let SecondList = class SecondList extends DateList {
     get listItemsTemplate() {
-        return html `
-			${[...range(0, 60)].map(second => html `
-				<mo-selectable-list-item
-					?selected=${this.value?.second === second}
-					?data-now=${this.now.second === second}
-					@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ second }))}
-				>${second.format().padStart(2, this.zero.format())}</mo-selectable-list-item>
-			`)}
+        return html `
+			${[...range(0, 60)].map(second => html `
+				<mo-selectable-list-item
+					?selected=${this.value?.second === second}
+					?data-now=${this.now.second === second}
+					@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ second }))}
+				>${second.format().padStart(2, this.zero.format())}</mo-selectable-list-item>
+			`)}
 		`;
     }
 };

package/dist/selection/YearList.js

@@ -11,14 +11,14 @@ let YearList = class YearList extends DateList {
     }
     get listItemsTemplate() {
         const now = this.now;
-        return html `
-			${this.years.map(year => html `
-				<mo-selectable-list-item
-					?selected=${this.value?.year === year}
-					?data-now=${now.year === year}
-					@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ year }))}
-				>${year.format()}</mo-selectable-list-item>
-			`)}
+        return html `
+			${this.years.map(year => html `
+				<mo-selectable-list-item
+					?selected=${this.value?.year === year}
+					?data-now=${now.year === year}
+					@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ year }))}
+				>${year.format()}</mo-selectable-list-item>
+			`)}
 		`;
     }
 };

package/dist/selection/calendar/Calendar.js

@@ -10,77 +10,77 @@ let Calendar = class Calendar extends Component {
         this.days = new Array();
     }
     static get styles() {
-        return css `
-			:host {
-				--mo-calendar-day-size: 36px;
-				--mo-calendar-week-number-width: var(--mo-calendar-day-size);
-				padding-inline: 10px;
-			}
-
-			.monthHeader {
-				color: var(--mo-color-gray);
-				align-items: center;
-			}
-
-			.week {
-				color: var(--mo-color-gray);
-			}
-
-			.day {
-				text-align: center;
-				border-radius: 100px;
-				cursor: pointer;
-				transition: 100ms;
-				font-weight: 500;
-				user-select: none;
-				font-size: medium;
-				width: var(--mo-calendar-day-size);
-				-webkit-user-select: none;
-				align-items: center;
-				justify-content: center;
-			}
-
-			.day {
-				height: var(--mo-calendar-day-size);
-			}
-
-			.day:hover {
-				background: var(--mo-color-transparent-gray-3);
-			}
-
-			.day:not(.isInMonth) {
-				color: var(--mo-color-gray);
-			}
-
-			.day.today {
-				outline: 2px dashed var(--mo-color-gray-transparent);
-			}
-
-			.day.navigation {
-				background: var(--mo-color-transparent-gray-3);
-			}
+        return css `
+			:host {
+				--mo-calendar-day-size: 36px;
+				--mo-calendar-week-number-width: var(--mo-calendar-day-size);
+				padding-inline: 10px;
+			}
+
+			.monthHeader {
+				color: var(--mo-color-gray);
+				align-items: center;
+			}
+
+			.week {
+				color: var(--mo-color-gray);
+			}
+
+			.day {
+				text-align: center;
+				border-radius: 100px;
+				cursor: pointer;
+				transition: 100ms;
+				font-weight: 500;
+				user-select: none;
+				font-size: medium;
+				width: var(--mo-calendar-day-size);
+				-webkit-user-select: none;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.day {
+				height: var(--mo-calendar-day-size);
+			}
+
+			.day:hover {
+				background: var(--mo-color-transparent-gray-3);
+			}
+
+			.day:not(.isInMonth) {
+				color: var(--mo-color-gray);
+			}
+
+			.day.today {
+				outline: 2px dashed var(--mo-color-gray-transparent);
+			}
+
+			.day.navigation {
+				background: var(--mo-color-transparent-gray-3);
+			}
 		`;
     }
     get template() {
-        return html `
-			<mo-grid class='month'
-				rows='repeat(auto-fill, var(--mo-calendar-day-size))'
-				columns=${this.includeWeekNumbers ? 'var(--mo-calendar-week-number-width) repeat(7, var(--mo-calendar-day-size))' : 'repeat(7, var(--mo-calendar-day-size))'}
-				${style({ alignItems: 'center', justifyItems: 'center' })}
-			>
-				${this.includeWeekNumbers === false ? html.nothing : html `<div></div>`}
-
-				${this.navigatingValue.weekDayNames.map(dayName => html `
-					<div class='monthHeader'>
-						${dayName.charAt(0).toUpperCase() + dayName.charAt(1)}
-					</div>
-				`)}
-
-				${this.days.map(([weekNumber, days]) => html `
-					${this.includeWeekNumbers === false ? html.nothing : html `<div class='week'>${weekNumber}</div>`}
-					${days.map(day => this.getDayTemplate(day))}
-				`)}
-			</mo-grid>
+        return html `
+			<mo-grid class='month'
+				rows='repeat(auto-fill, var(--mo-calendar-day-size))'
+				columns=${this.includeWeekNumbers ? 'var(--mo-calendar-week-number-width) repeat(7, var(--mo-calendar-day-size))' : 'repeat(7, var(--mo-calendar-day-size))'}
+				${style({ alignItems: 'center', justifyItems: 'center' })}
+			>
+				${this.includeWeekNumbers === false ? html.nothing : html `<div></div>`}
+
+				${this.navigatingValue.weekDayNames.map(dayName => html `
+					<div class='monthHeader'>
+						${dayName.charAt(0).toUpperCase() + dayName.charAt(1)}
+					</div>
+				`)}
+
+				${this.days.map(([weekNumber, days]) => html `
+					${this.includeWeekNumbers === false ? html.nothing : html `<div class='week'>${weekNumber}</div>`}
+					${days.map(day => this.getDayTemplate(day))}
+				`)}
+			</mo-grid>
 		`;
     }
     *rangeOf(start, end) {
@@ -90,10 +90,10 @@ let Calendar = class Calendar extends Component {
         }
     }
     getDayTemplate(day) {
-        return html `
-			<mo-flex class=${classMap(this.getDayElementClasses(day))} @click=${() => this.handleDayClick(day)}>
-				${day.format({ day: 'numeric' })}
-			</mo-flex>
+        return html `
+			<mo-flex class=${classMap(this.getDayElementClasses(day))} @click=${() => this.handleDayClick(day)}>
+				${day.format({ day: 'numeric' })}
+			</mo-flex>
 		`;
     }
     handleDayClick(day) {

package/dist/selection/calendar/SelectableCalendar.d.ts

@@ -1,6 +1,6 @@
 import { Calendar } from './Calendar.js';
 import { DateTime } from '@3mo/date-time';
-/** @fires change {CustomEvent<T>} */
+/** @fires change */
 export declare class SelectableCalendar extends Calendar {
     readonly change: EventDispatcher<DateTime>;
     value?: DateTime;

package/dist/selection/calendar/SelectableCalendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableCalendar.d.ts","sourceRoot":"","sources":["../../../selection/calendar/SelectableCalendar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,qCAAqC;AACrC,qBACa,kBAAmB,SAAQ,QAAQ;IACtC,QAAQ,CAAC,MAAM,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAExB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAE5C,WAAoB,MAAM,kCASzB;cAEkB,cAAc,CAAC,GAAG,EAAE,QAAQ;cAK5B,oBAAoB,CAAC,GAAG,EAAE,QAAQ;;;CAMrD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,kBAAkB,CAAA;KAC5C;CACD"}
+{"version":3,"file":"SelectableCalendar.d.ts","sourceRoot":"","sources":["../../../selection/calendar/SelectableCalendar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,oBAAoB;AACpB,qBACa,kBAAmB,SAAQ,QAAQ;IACtC,QAAQ,CAAC,MAAM,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAExB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAE5C,WAAoB,MAAM,kCASzB;cAEkB,cAAc,CAAC,GAAG,EAAE,QAAQ;cAK5B,oBAAoB,CAAC,GAAG,EAAE,QAAQ;;;CAMrD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,kBAAkB,CAAA;KAC5C;CACD"}

package/dist/selection/calendar/SelectableCalendar.js

@@ -1,16 +1,16 @@
 import { __decorate } from "tslib";
 import { component, css, event, property } from '@a11d/lit';
 import { Calendar } from './Calendar.js';
-/** @fires change {CustomEvent<T>} */
+/** @fires change */
 let SelectableCalendar = class SelectableCalendar extends Calendar {
     static get styles() {
-        return css `
-			${super.styles}
-
-			.day.selected {
-				background: var(--mo-color-accent-transparent);
-				color: var(--mo-color-accent) !important;
-			}
+        return css `
+			${super.styles}
+
+			.day.selected {
+				background: var(--mo-color-accent-transparent);
+				color: var(--mo-color-accent) !important;
+			}
 		`;
     }
     handleDayClick(day) {

package/dist/selection/calendar/SelectableRangeCalendar.d.ts

@@ -1,6 +1,6 @@
 import { DateTime } from '@3mo/date-time';
 import { SelectableCalendar } from './SelectableCalendar.js';
-/** @fires change {CustomEvent<T>} */
+/** @fires change */
 export declare class SelectableRangeCalendar extends SelectableCalendar {
     dateRange?: DateTimeRange;
     static get styles(): import("@a11d/lit").CSSResult;

package/dist/selection/calendar/SelectableRangeCalendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableRangeCalendar.d.ts","sourceRoot":"","sources":["../../../selection/calendar/SelectableRangeCalendar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAE5D,qCAAqC;AACrC,qBACa,uBAAwB,SAAQ,kBAAkB;IAClC,SAAS,CAAC,EAAE,aAAa,CAAA;IAErD,WAAoB,MAAM,kCA8BzB;cAEkB,oBAAoB,CAAC,GAAG,EAAE,QAAQ;;;;;;CAWrD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,8BAA8B,EAAE,uBAAuB,CAAA;KACvD;CACD"}
+{"version":3,"file":"SelectableRangeCalendar.d.ts","sourceRoot":"","sources":["../../../selection/calendar/SelectableRangeCalendar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAE5D,oBAAoB;AACpB,qBACa,uBAAwB,SAAQ,kBAAkB;IAClC,SAAS,CAAC,EAAE,aAAa,CAAA;IAErD,WAAoB,MAAM,kCA8BzB;cAEkB,oBAAoB,CAAC,GAAG,EAAE,QAAQ;;;;;;CAWrD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,8BAA8B,EAAE,uBAAuB,CAAA;KACvD;CACD"}

package/dist/selection/calendar/SelectableRangeCalendar.js

@@ -1,14 +1,14 @@
 import { __decorate } from "tslib";
 import { component, css, property } from '@a11d/lit';
 import { SelectableCalendar } from './SelectableCalendar.js';
-/** @fires change {CustomEvent<T>} */
+/** @fires change */
 let SelectableRangeCalendar = class SelectableRangeCalendar extends SelectableCalendar {
     static get styles() {
         return css `
 			${super.styles}
 
 			.day.isInRange:not(.selected) {
-				background: rgba(var(--mo-color-accent-base), 0.08);
+				background: color-mix(in srgb, var(--mo-color-accent), transparent 92%);
 			}
 
 			.day.isInRange {