@3mo/date-time-fields 0.5.12-preview.2 → 0.7.0

package/dist/index.d.ts

@@ -8,7 +8,6 @@ import '@3mo/field';
 import '@3mo/tab';
 import '@3mo/scroller';
 import '@3mo/list';
-import '@3mo/media-query-observer';
 export * from './selection/index.js';
 export * from './FieldTime.js';
 export * from './FieldDateTime.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAA;AACvB,OAAO,WAAW,CAAA;AAClB,OAAO,kBAAkB,CAAA;AACzB,OAAO,cAAc,CAAA;AACrB,OAAO,WAAW,CAAA;AAClB,OAAO,WAAW,CAAA;AAClB,OAAO,YAAY,CAAA;AACnB,OAAO,UAAU,CAAA;AACjB,OAAO,eAAe,CAAA;AACtB,OAAO,WAAW,CAAA;AAClB,OAAO,2BAA2B,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mCAAmC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAA;AACvB,OAAO,WAAW,CAAA;AAClB,OAAO,kBAAkB,CAAA;AACzB,OAAO,cAAc,CAAA;AACrB,OAAO,WAAW,CAAA;AAClB,OAAO,WAAW,CAAA;AAClB,OAAO,YAAY,CAAA;AACnB,OAAO,UAAU,CAAA;AACjB,OAAO,eAAe,CAAA;AACtB,OAAO,WAAW,CAAA;AAClB,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mCAAmC,CAAA"}

package/dist/index.js

@@ -8,7 +8,6 @@ import '@3mo/field';
 import '@3mo/tab';
 import '@3mo/scroller';
 import '@3mo/list';
-import '@3mo/media-query-observer';
 export * from './selection/index.js';
 export * from './FieldTime.js';
 export * from './FieldDateTime.js';

package/dist/selection/DateList.d.ts

@@ -1,19 +1,22 @@
 import { Component, type HTMLTemplateResult } from '@a11d/lit';
-import { IntervalController } from '@3mo/interval-controller';
 export declare abstract class DateList extends Component {
     readonly change: EventDispatcher<DateTime>;
+    readonly navigate: EventDispatcher<DateTime>;
     navigatingValue: DateTime;
     value?: DateTime;
-    private preventIntervalScrolling;
-    get now(): import("@3mo/date-time/DateTime.js").DateTime;
+    private readonly selector;
+    private readonly items;
+    private readonly navigatingItem?;
+    private readonly selectedItem?;
     get zero(): number;
-    readonly intervalController: IntervalController;
     static get styles(): import("@a11d/lit").CSSResult;
-    private readonly selectedListItem?;
-    private readonly nowListItem?;
     protected connected(): void;
     protected get template(): HTMLTemplateResult;
-    protected scrollIntoSelectedItem(behavior?: ScrollBehavior): Promise<void>;
+    private scrollIntoItem;
+    private _navigateOnScroll;
+    get navigateOnScroll(): boolean;
+    set navigateOnScroll(value: boolean);
+    protected handleScroll(): void;
     protected abstract get listItemsTemplate(): HTMLTemplateResult;
 }
 //# sourceMappingURL=DateList.d.ts.map

package/dist/selection/DateList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateList.d.ts","sourceRoot":"","sources":["../../selection/DateList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,kBAAkB,EAAqC,MAAM,WAAW,CAAA;AACjG,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAG7D,8BAAsB,QAAS,SAAQ,SAAS;IACtC,QAAQ,CAAC,MAAM,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAExB,eAAe,EAAG,QAAQ,CAAA;IACiC,KAAK,CAAC,EAAE,QAAQ,CAAA;IAEvG,OAAO,CAAC,wBAAwB,CAAQ;IAExC,IAAI,GAAG,kDAA4B;IAEnC,IAAI,IAAI,WAAe;IAEvB,QAAQ,CAAC,kBAAkB,qBAKzB;IAEF,WAAoB,MAAM,kCAmBzB;IAE2C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAoB;IACtD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAoB;cAE1E,SAAS;IAI5B,cAAuB,QAAQ,uBAU9B;cAEe,sBAAsB,CAAC,QAAQ,GAAE,cAAyB;IAQ1E,SAAS,CAAC,QAAQ,KAAK,iBAAiB,IAAI,kBAAkB,CAAA;CAC9D"}
+{"version":3,"file":"DateList.d.ts","sourceRoot":"","sources":["../../selection/DateList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,kBAAkB,EAA6D,MAAM,WAAW,CAAA;AAGzH,8BAAsB,QAAS,SAAQ,SAAS;IACtC,QAAQ,CAAC,MAAM,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAC3C,QAAQ,CAAC,QAAQ,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAEP,eAAe,EAAG,QAAQ,CAAA;IAC7C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAExB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAc;IACtB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA4B;IACpC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAoB;IAC3D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAoB;IAE9F,IAAI,IAAI,WAAe;IAEvB,WAAoB,MAAM,kCA+BzB;cAEkB,SAAS;IAI5B,cAAuB,QAAQ,uBAiB9B;YAEa,cAAc;IAM5B,OAAO,CAAC,iBAAiB,CAAQ;IACjC,IAAI,gBAAgB,YAAoC;IACxD,IAAI,gBAAgB,CAAC,KAAK,SAAA,EAMzB;IAID,SAAS,CAAC,YAAY;IAYtB,SAAS,CAAC,QAAQ,KAAK,iBAAiB,IAAI,kBAAkB,CAAA;CAC9D"}

package/dist/selection/DateList.js

@@ -1,46 +1,57 @@
 import { __decorate } from "tslib";
-import { Component, css, event, html, property, query } from '@a11d/lit';
-import { IntervalController } from '@3mo/interval-controller';
+import { Component, css, event, eventOptions, html, property, query, queryAll } from '@a11d/lit';
 export class DateList extends Component {
     constructor() {
         super(...arguments);
-        this.preventIntervalScrolling = false;
-        this.intervalController = new IntervalController(this, 1000, () => {
-            this.requestUpdate();
-            if (this.preventIntervalScrolling === false) {
-                this.scrollIntoSelectedItem();
-            }
-        });
+        this._navigateOnScroll = false;
     }
-    get now() { return new DateTime(); }
     get zero() { return 0; }
     static get styles() {
         return css `
+			:host {
+				position: relative;
+			}
+
 			mo-scroller {
 				min-width: 70px;
 			}
 
+			.selector {
+				position: absolute;
+				transform: translateY(-50%);
+				inset-block-start: 50%;
+				inset-inline: 0;
+				width: 100%;
+				height: 32px;
+				border-block: 2px dashed var(--mo-color-gray-transparent);
+			}
+
 			.pad {
-				height: 50px;
+				height: 130px;
 			}
 
 			mo-selectable-list-item {
 				min-height: 32px;
 				padding-block: 8px;
-			}
-
-			mo-selectable-list-item[data-now] {
-				outline: 2px dashed var(--mo-color-gray-transparent);
+				scroll-snap-align: center;
+				scroll-snap-stop: always;
 			}
 		`;
     }
     connected() {
-        this.scrollIntoSelectedItem('instant');
+        this.scrollIntoItem('navigating', '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='selector'></div>
+			<mo-scroller snapType='y mandatory'
+				@scroll=${this.handleScroll}
+				@mouseenter=${() => this.navigateOnScroll = true}
+				@mouseleave=${() => this.navigateOnScroll = false}
+				@touchstart=${() => this.navigateOnScroll = true}
+				@touchend=${() => this.navigateOnScroll = false}
+			>
+				<mo-selectable-list @change=${() => this.scrollIntoItem('selected', 'smooth')}>
 					<div class='pad'></div>
 					${this.listItemsTemplate}
 					<div class='pad'></div>
@@ -48,26 +59,56 @@ export class DateList extends Component {
 			</mo-scroller>
 		`;
     }
-    async scrollIntoSelectedItem(behavior = 'smooth') {
+    async scrollIntoItem(key, behavior = 'smooth') {
         await this.updateComplete;
-        (this.selectedListItem ?? this.nowListItem)?.scrollIntoView({
-            behavior,
-            block: 'center',
+        const item = key === 'navigating' ? this.navigatingItem : this.selectedItem;
+        item?.scrollIntoView({ block: 'center', behavior });
+    }
+    get navigateOnScroll() { return this._navigateOnScroll; }
+    set navigateOnScroll(value) {
+        if (value) {
+            this._navigateOnScroll = value;
+        }
+        else {
+            setTimeout(() => this._navigateOnScroll = value, 100);
+        }
+    }
+    handleScroll() {
+        if (!this.navigateOnScroll) {
+            return;
+        }
+        const middleY = this.selector.getBoundingClientRect().y;
+        const middleItem = this.items.reduce((closest, item) => {
+            const itemY = item.getBoundingClientRect().y;
+            return Math.abs(itemY - middleY) < Math.abs(closest.getBoundingClientRect().y - middleY) ? item : closest;
         });
+        middleItem?.dispatchEvent(new CustomEvent('navigate'));
     }
 }
 __decorate([
     event()
 ], DateList.prototype, "change", void 0);
 __decorate([
-    property({ type: Object })
+    event()
+], DateList.prototype, "navigate", void 0);
+__decorate([
+    property({ type: Object, event: 'navigate' })
 ], DateList.prototype, "navigatingValue", void 0);
 __decorate([
-    property({ type: Object, updated() { this.scrollIntoSelectedItem(); } })
+    property({ type: Object })
 ], DateList.prototype, "value", void 0);
+__decorate([
+    query('.selector')
+], DateList.prototype, "selector", void 0);
+__decorate([
+    queryAll('mo-selectable-list-item')
+], DateList.prototype, "items", void 0);
+__decorate([
+    query('mo-selectable-list-item[data-navigating]')
+], DateList.prototype, "navigatingItem", void 0);
 __decorate([
     query('mo-selectable-list-item[selected]')
-], DateList.prototype, "selectedListItem", void 0);
+], DateList.prototype, "selectedItem", void 0);
 __decorate([
-    query('mo-selectable-list-item[data-now]')
-], DateList.prototype, "nowListItem", void 0);
+    eventOptions({ passive: true })
+], DateList.prototype, "handleScroll", null);

package/dist/selection/HourList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HourList.d.ts","sourceRoot":"","sources":["../../selection/HourList.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGxC,qBACa,QAAS,SAAQ,QAAQ;IACrC,cAAuB,iBAAiB,0CAUvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,QAAQ,CAAA;KACxB;CACD"}
+{"version":3,"file":"HourList.d.ts","sourceRoot":"","sources":["../../selection/HourList.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGxC,qBACa,QAAS,SAAQ,QAAQ;IACrC,cAAuB,iBAAiB,0CAWvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,QAAQ,CAAA;KACxB;CACD"}

package/dist/selection/HourList.js

@@ -7,7 +7,8 @@ let HourList = class HourList extends DateList {
 			${[...range(0, this.navigatingValue.hoursInDay)].map(hour => html `
 				<mo-selectable-list-item
 					?selected=${this.value?.hour === hour}
-					?data-now=${this.now.hour === hour}
+					?data-navigating=${this.navigatingValue.hour === hour}
+					@navigate=${() => this.navigate.dispatch(this.navigatingValue.with({ 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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MinuteList.d.ts","sourceRoot":"","sources":["../../selection/MinuteList.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,qBACa,UAAW,SAAQ,QAAQ;IACvC,cAAuB,iBAAiB,0CAUvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,UAAU,CAAA;KAC5B;CACD"}
+{"version":3,"file":"MinuteList.d.ts","sourceRoot":"","sources":["../../selection/MinuteList.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,qBACa,UAAW,SAAQ,QAAQ;IACvC,cAAuB,iBAAiB,0CAWvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,UAAU,CAAA;KAC5B;CACD"}

package/dist/selection/MinuteList.js

@@ -7,7 +7,8 @@ let MinuteList = class MinuteList extends DateList {
 			${[...range(0, 60)].map(minute => html `
 				<mo-selectable-list-item
 					?selected=${this.value?.minute === minute}
-					?data-now=${this.now.minute === minute}
+					?data-navigating=${this.navigatingValue.minute === minute}
+					@navigate=${() => this.navigate.dispatch(this.navigatingValue.with({ 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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MonthList.d.ts","sourceRoot":"","sources":["../../selection/MonthList.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,qBACa,SAAU,SAAQ,QAAQ;IACtC,WAAoB,MAAM,kCAQzB;IAED,OAAO,KAAK,UAAU,GAKrB;IAED,cAAuB,iBAAiB,0CAUvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,SAAS,CAAA;KAC1B;CACD"}
+{"version":3,"file":"MonthList.d.ts","sourceRoot":"","sources":["../../selection/MonthList.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,qBACa,SAAU,SAAQ,QAAQ;IACtC,WAAoB,MAAM,kCAQzB;IAED,OAAO,KAAK,UAAU,GAKrB;IAED,cAAuB,iBAAiB,0CAWvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,SAAS,CAAA;KAC1B;CACD"}

package/dist/selection/MonthList.js

@@ -22,7 +22,8 @@ let MonthList = class MonthList extends DateList {
 			${this.monthNames.map(([month, name]) => html `
 				<mo-selectable-list-item
 					?selected=${this.value?.month === month}
-					?data-now=${this.now.month === month}
+					?data-navigating=${this.navigatingValue.month === month}
+					@navigate=${() => this.navigate.dispatch(this.navigatingValue.with({ 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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecondList.d.ts","sourceRoot":"","sources":["../../selection/SecondList.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,qBACa,UAAW,SAAQ,QAAQ;IACvC,cAAuB,iBAAiB,0CAUvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,UAAU,CAAA;KAC5B;CACD"}
+{"version":3,"file":"SecondList.d.ts","sourceRoot":"","sources":["../../selection/SecondList.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,qBACa,UAAW,SAAQ,QAAQ;IACvC,cAAuB,iBAAiB,0CAWvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,UAAU,CAAA;KAC5B;CACD"}

package/dist/selection/SecondList.js

@@ -7,7 +7,8 @@ let SecondList = class SecondList extends DateList {
 			${[...range(0, 60)].map(second => html `
 				<mo-selectable-list-item
 					?selected=${this.value?.second === second}
-					?data-now=${this.now.second === second}
+					?data-navigating=${this.navigatingValue.second === second}
+					@navigate=${() => this.navigate.dispatch(this.navigatingValue.with({ 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

@@ -10,12 +10,12 @@ let YearList = class YearList extends DateList {
             .map((_, i) => this.nowYear - 100 + i);
     }
     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}
+					?data-navigating=${this.navigatingValue.year === year}
+					@navigate=${() => this.navigate.dispatch(this.navigatingValue.with({ 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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../selection/calendar/Calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmD,KAAK,SAAS,EAAS,MAAM,WAAW,CAAA;AAC7G,OAAO,6BAA6B,CAAA;AAGpC,qBACa,QAAS,SAAQ,SAAS;IACM,kBAAkB,UAAQ;IAUnE,eAAe,gDAAe;IAExB,OAAO,CAAC,IAAI,CAA2D;IAEhF,WAAoB,MAAM,kCAmDzB;IAED,cAAuB,QAAQ,0CAqB9B;IAED,OAAO,CAAG,OAAO;IAOjB,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,QAAQ;IAQtC,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,QAAQ;IAKtC,OAAO,KAAK,GAAG,GAA0B;IAEzC,SAAS,CAAC,oBAAoB,CAAC,GAAG,EAAE,QAAQ,GAAG,SAAS;CAOxD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,QAAQ,CAAA;KACvB;CACD"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../selection/calendar/Calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4C,KAAK,SAAS,EAAS,MAAM,WAAW,CAAA;AACtG,OAAO,6BAA6B,CAAA;AAGpC,qBACa,QAAS,SAAQ,SAAS;IACM,kBAAkB,UAAQ;IAUnE,eAAe,gDAAe;IAExB,OAAO,CAAC,IAAI,CAA2D;IAEhF,WAAoB,MAAM,kCA8DzB;IAED,cAAuB,QAAQ,0CAyB9B;IAED,OAAO,CAAG,OAAO;IAOjB,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,QAAQ;IAQtC,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,QAAQ;IAKtC,OAAO,KAAK,GAAG,GAA0B;IAEzC,SAAS,CAAC,oBAAoB,CAAC,GAAG,EAAE,QAAQ,GAAG,SAAS;CAOxD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,QAAQ,CAAA;KACvB;CACD"}

package/dist/selection/calendar/Calendar.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { Component, css, component, html, property, classMap, style, state } from '@a11d/lit';
+import { Component, css, component, html, property, classMap, state } from '@a11d/lit';
 import '@a11d/array.prototype.group';
 import { MemoizeExpiring as memoizeExpiring } from 'typescript-memoize';
 let Calendar = class Calendar extends Component {
@@ -17,9 +17,23 @@ let Calendar = class Calendar extends Component {
 				padding-inline: 10px;
 			}
 
-			.monthHeader {
-				color: var(--mo-color-gray);
-				align-items: center;
+			.month {
+				min-height: 270px;
+				place-items: center;
+
+				.heading {
+					font-weight: 500;
+					font-size: 16px;
+					grid-column: 1 / -1;
+					place-self: stretch;
+					display: flex;
+					align-items: center;
+					margin-inline-start: 6px;
+				}
+
+				.header {
+					color: var(--mo-color-gray);
+				}
 			}
 
 			.week {
@@ -38,26 +52,23 @@ let Calendar = class Calendar extends Component {
 				-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);
-			}
+				&:hover {
+					background: var(--mo-color-transparent-gray-3);
+				}
 
-			.day:not(.isInMonth) {
-				color: var(--mo-color-gray);
-			}
+				&:not(.isInMonth) {
+					color: var(--mo-color-gray);
+				}
 
-			.day.today {
-				outline: 2px dashed var(--mo-color-gray-transparent);
-			}
+				&.today {
+					outline: 2px dashed var(--mo-color-gray-transparent);
+				}
 
-			.day.navigation {
-				background: var(--mo-color-transparent-gray-3);
+				&.navigation {
+					background: var(--mo-color-transparent-gray-3);
+				}
 			}
 		`;
     }
@@ -66,12 +77,16 @@ let Calendar = class Calendar extends Component {
 			<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' })}
 			>
+				<div class='heading' style='grid-column: 1 / -1'>
+					${this.navigatingValue.format({ year: 'numeric' })}
+					${this.navigatingValue.format({ month: 'long' })}
+				</div>
+
 				${this.includeWeekNumbers === false ? html.nothing : html `<div></div>`}
 
 				${this.navigatingValue.weekDayNames.map(dayName => html `
-					<div class='monthHeader'>
+					<div class='header'>
 						${dayName.charAt(0).toUpperCase() + dayName.charAt(1)}
 					</div>
 				`)}

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,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAC9C,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"}
+{"version":3,"file":"SelectableRangeCalendar.d.ts","sourceRoot":"","sources":["../../../selection/calendar/SelectableRangeCalendar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAE5D,oBAAoB;AACpB,qBACa,uBAAwB,SAAQ,kBAAkB;IAClC,SAAS,CAAC,EAAE,aAAa,CAAA;IAErD,WAAoB,MAAM,kCA+BzB;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

@@ -7,30 +7,31 @@ let SelectableRangeCalendar = class SelectableRangeCalendar extends SelectableCa
         return css `
 			${super.styles}
 
-			.day.isInRange:not(.selected) {
-				background: color-mix(in srgb, var(--mo-color-accent), transparent 92%);
-			}
-
-			.day.isInRange {
-				border-radius: 0px;
-			}
+			.day {
+				&.isInRange {
+					border-radius: 0px;
+					&:not(.selected) {
+						background: color-mix(in srgb, var(--mo-color-accent), transparent 92%);
+					}
+				}
 
-			.day.selected.first {
-				border-start-start-radius: 100px;
-				border-start-end-radius: 0;
-				border-end-start-radius: 100px;
-				border-end-end-radius: 0;
-			}
-
-			.day.selected.last {
-				border-start-start-radius: 0;
-				border-start-end-radius: 100px;
-				border-end-start-radius: 0;
-				border-end-end-radius: 100px;
-			}
+				&.selected {
+					&.first {
+						border-radius: 100px;
+						border-start-start-radius: 100px;
+						border-start-end-radius: 0;
+						border-end-start-radius: 100px;
+						border-end-end-radius: 0;
+					}
 
-			.day.selected.first.last {
-				border-radius: 100px;
+					&.last {
+						border-radius: 100px;
+						border-start-start-radius: 0;
+						border-start-end-radius: 100px;
+						border-end-start-radius: 0;
+						border-end-end-radius: 100px;
+					}
+				}
 			}
 		`;
     }

package/dist/selection/index.d.ts

@@ -1,5 +1,3 @@
-export * from './FieldSelectMonth.js';
-export * from './FieldSelectYear.js';
 export * from './MonthList.js';
 export * from './YearList.js';
 export * from './HourList.js';

package/dist/selection/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../selection/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../selection/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA"}

package/dist/selection/index.js

@@ -1,5 +1,3 @@
-export * from './FieldSelectMonth.js';
-export * from './FieldSelectYear.js';
 export * from './MonthList.js';
 export * from './YearList.js';
 export * from './HourList.js';