@3mo/date-time-fields 0.10.1 → 0.10.3

package/dist/FieldDateTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDateTime.d.ts","sourceRoot":"","sources":["../FieldDateTime.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAOpE;;;;GAIG;AACH,qBACa,aAAc,SAAQ,iBAAiB,CAAC,IAAI,GAAG,SAAS,CAAC;IACrE,SAAS,KAAK,YAAY,8DAA+D;IAEpE,KAAK,SAAmB;IACjB,KAAK,CAAC,EAAE,IAAI,CAAA;IAExC,cACuB,WAAW,WAEjC;IAED,SAAS,CAAC,mBAAmB;IAI7B,SAAS,KAAK,gBAAgB,0CAQ7B;cAEkB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;IAK7F,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS;IAInD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM;CAGzC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,aAAa,CAAA;KACnC;CACD"}
+{"version":3,"file":"FieldDateTime.d.ts","sourceRoot":"","sources":["../FieldDateTime.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAOpE;;;;GAIG;AACH,qBACa,aAAc,SAAQ,iBAAiB,CAAC,IAAI,GAAG,SAAS,CAAC;IACrE,SAAS,KAAK,YAAY,8DAQzB;IAEoB,KAAK,SAAmB;IACjB,KAAK,CAAC,EAAE,IAAI,CAAA;IAExC,cACuB,WAAW,WAEjC;IAED,SAAS,CAAC,mBAAmB;IAI7B,SAAS,KAAK,gBAAgB,0CAQ7B;cAEkB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;IAK7F,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS;IAInD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM;CAGzC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,aAAa,CAAA;KACnC;CACD"}

package/dist/FieldDateTime.js

@@ -17,7 +17,15 @@ let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
         super(...arguments);
         this.label = t('Date & Time');
     }
-    get selectedDate() { return this.value ? new DateTime(this.value) : undefined; }
+    get selectedDate() {
+        if (!this.value) {
+            return undefined;
+        }
+        if (this.value instanceof Date) {
+            return new DateTime(this.value);
+        }
+        return this.value;
+    }
     get placeholder() {
         return new DateTime().format(this.formatOptions);
     }
@@ -28,8 +36,8 @@ let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
         return html `
 			<mo-selectable-calendar
 				.navigatingValue=${this.navigatingDate}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
+				.value=${new DateTimeRange(this.selectedDate, this.selectedDate)}
+				@dayClick=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
 			></mo-selectable-calendar>
 		`;
     }

package/dist/FieldDateTimeBase.d.ts

@@ -14,6 +14,9 @@ export declare abstract class FieldDateTimeBase<T> extends InputFieldComponent<T
     shortcutReferenceDate: import("@3mo/date-time/DateTime.js").DateTime;
     precision: FieldDateTimePrecision;
     navigatingDate: import("@3mo/date-time/DateTime.js").DateTime;
+    protected connected(): void;
+    protected disconnected(): void;
+    private handleLanguageChange;
     protected readonly calendarIconButtonIcon: MaterialIcon;
     protected abstract get selectedDate(): DateTime | undefined;
     protected get formatOptions(): Intl.DateTimeFormatOptions;

package/dist/FieldDateTimeBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDateTimeBase.d.ts","sourceRoot":"","sources":["../FieldDateTimeBase.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,kBAAkB,EAAwD,MAAM,WAAW,CAAA;AACzG,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAEpE;;;;;GAKG;AACH,8BAAsB,iBAAiB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC5B,IAAI,UAAQ;IAC3B,YAAY,UAAQ;IACrB,qBAAqB,gDAAe;IACkC,SAAS,yBAAgC;IAElI,cAAc,gDAAiB;IAExC,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,kCA8CzB;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,uBAM5B;IAED,SAAS,KAAK,sBAAsB,uBAOnC;IAED,SAAS,KAAK,YAAY,uBAMzB;IAED,OAAO,KAAK,gBAAgB,GAQ3B;IAED,OAAO,KAAK,iBAAiB,GAQ5B;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,SAAS,CAAC,QAAQ,KAAK,gBAAgB,IAAI,kBAAkB,CAAA;IAE7D,OAAO,KAAK,YAAY,GAcvB;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,EAAE,KAAK,kBAAkB,EAAwD,MAAM,WAAW,CAAA;AACzG,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAEpE;;;;;GAKG;AACH,8BAAsB,iBAAiB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC5B,IAAI,UAAQ;IAC3B,YAAY,UAAQ;IACrB,qBAAqB,gDAAe;IACkC,SAAS,yBAAgC;IAElI,cAAc,gDAAiB;cAErB,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,kCA8CzB;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,uBAM5B;IAED,SAAS,KAAK,sBAAsB,uBAOnC;IAED,SAAS,KAAK,YAAY,uBAMzB;IAED,OAAO,KAAK,gBAAgB,GAQ3B;IAED,OAAO,KAAK,iBAAiB,GAQ5B;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,SAAS,CAAC,QAAQ,KAAK,gBAAgB,IAAI,kBAAkB,CAAA;IAE7D,OAAO,KAAK,YAAY,GAcvB;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

@@ -16,8 +16,17 @@ export class FieldDateTimeBase extends InputFieldComponent {
         this.shortcutReferenceDate = new DateTime;
         this.precision = FieldDateTimePrecision.Minute;
         this.navigatingDate = new DateTime();
+        this.handleLanguageChange = () => {
+            this.navigatingDate = new DateTime(this.navigatingDate);
+        };
         this.calendarIconButtonIcon = 'today';
     }
+    connected() {
+        Localizer.languages.change.subscribe(this.handleLanguageChange);
+    }
+    disconnected() {
+        Localizer.languages.change.unsubscribe(this.handleLanguageChange);
+    }
     get formatOptions() {
         return {
             calendar: this.selectedDate?.calendarId,

package/dist/FieldDateTimeRange.js

@@ -59,12 +59,12 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
     }
     get calendarTemplate() {
         return html `
-			<mo-selectable-range-calendar
+			<mo-selectable-calendar
 				data-selection=${this.selection}
 				.navigatingValue=${this.navigatingDate}
-				.dateRange=${this.value}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
-			></mo-selectable-range-calendar>
+				.value=${this.value}
+				@dayClick=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
+			></mo-selectable-calendar>
 		`;
     }
     get popoverContentTemplate() {

package/dist/custom-elements.json

@@ -3579,29 +3579,11 @@
 			"path": ".\\packages\\DateTimeFields\\dist\\selection\\calendar\\Calendar.d.ts",
 			"properties": [
 				{
-					"name": "includeWeekNumbers",
-					"type": "boolean"
-				},
-				{
-					"name": "navigatingValue",
-					"type": "DateTime"
-				}
-			]
-		},
-		{
-			"name": "mo-selectable-calendar",
-			"path": ".\\packages\\DateTimeFields\\dist\\selection\\calendar\\SelectableCalendar.d.ts",
-			"properties": [
-				{
-					"name": "change",
+					"name": "dayClick",
 					"type": "EventDispatcher<DateTime>"
 				},
 				{
-					"name": "value",
-					"type": "DateTime | undefined"
-				},
-				{
-					"name": "includeWeekNumbers",
+					"name": "includeWeek",
 					"type": "boolean"
 				},
 				{
@@ -3611,29 +3593,26 @@
 			],
 			"events": [
 				{
-					"name": "change",
+					"name": "dayClick",
+					"description": "Dispatched when a day is clicked, with the clicked date as detail.",
 					"type": "CustomEvent<DateTime>"
 				}
 			]
 		},
 		{
-			"name": "mo-selectable-range-calendar",
-			"path": ".\\packages\\DateTimeFields\\dist\\selection\\calendar\\SelectableRangeCalendar.d.ts",
+			"name": "mo-selectable-calendar",
+			"path": ".\\packages\\DateTimeFields\\dist\\selection\\calendar\\SelectableCalendar.d.ts",
 			"properties": [
 				{
-					"name": "dateRange",
+					"name": "value",
 					"type": "DateTimeRange | undefined"
 				},
 				{
-					"name": "change",
+					"name": "dayClick",
 					"type": "EventDispatcher<DateTime>"
 				},
 				{
-					"name": "value",
-					"type": "DateTime | undefined"
-				},
-				{
-					"name": "includeWeekNumbers",
+					"name": "includeWeek",
 					"type": "boolean"
 				},
 				{
@@ -3643,7 +3622,8 @@
 			],
 			"events": [
 				{
-					"name": "change",
+					"name": "dayClick",
+					"description": "Dispatched when a day is clicked, with the clicked date as detail.",
 					"type": "CustomEvent<DateTime>"
 				}
 			]
@@ -3893,41 +3873,7 @@
 			"path": ".\\packages\\DateTimeFields\\selection\\calendar\\Calendar.ts",
 			"attributes": [
 				{
-					"name": "includeWeekNumbers",
-					"type": "boolean",
-					"default": "false"
-				},
-				{
-					"name": "navigatingValue",
-					"type": "DateTime",
-					"default": "\"new DateTime\""
-				}
-			],
-			"properties": [
-				{
-					"name": "includeWeekNumbers",
-					"attribute": "includeWeekNumbers",
-					"type": "boolean",
-					"default": "false"
-				},
-				{
-					"name": "navigatingValue",
-					"attribute": "navigatingValue",
-					"type": "DateTime",
-					"default": "\"new DateTime\""
-				}
-			]
-		},
-		{
-			"name": "mo-selectable-calendar",
-			"path": ".\\packages\\DateTimeFields\\selection\\calendar\\SelectableCalendar.ts",
-			"attributes": [
-				{
-					"name": "value",
-					"type": "DateTime | undefined"
-				},
-				{
-					"name": "includeWeekNumbers",
+					"name": "includeWeek",
 					"type": "boolean",
 					"default": "false"
 				},
@@ -3939,17 +3885,12 @@
 			],
 			"properties": [
 				{
-					"name": "change",
+					"name": "dayClick",
 					"type": "EventDispatcher<DateTime>"
 				},
 				{
-					"name": "value",
-					"attribute": "value",
-					"type": "DateTime | undefined"
-				},
-				{
-					"name": "includeWeekNumbers",
-					"attribute": "includeWeekNumbers",
+					"name": "includeWeek",
+					"attribute": "includeWeek",
 					"type": "boolean",
 					"default": "false"
 				},
@@ -3962,25 +3903,22 @@
 			],
 			"events": [
 				{
-					"name": "change",
+					"name": "dayClick",
+					"description": "Dispatched when a day is clicked, with the clicked date as detail.",
 					"type": "CustomEvent<DateTime>"
 				}
 			]
 		},
 		{
-			"name": "mo-selectable-range-calendar",
-			"path": ".\\packages\\DateTimeFields\\selection\\calendar\\SelectableRangeCalendar.ts",
+			"name": "mo-selectable-calendar",
+			"path": ".\\packages\\DateTimeFields\\selection\\calendar\\SelectableCalendar.ts",
 			"attributes": [
-				{
-					"name": "dateRange",
-					"type": "DateTimeRange | undefined"
-				},
 				{
 					"name": "value",
-					"type": "DateTime | undefined"
+					"type": "DateTimeRange | undefined"
 				},
 				{
-					"name": "includeWeekNumbers",
+					"name": "includeWeek",
 					"type": "boolean",
 					"default": "false"
 				},
@@ -3992,22 +3930,17 @@
 			],
 			"properties": [
 				{
-					"name": "dateRange",
-					"attribute": "dateRange",
+					"name": "value",
+					"attribute": "value",
 					"type": "DateTimeRange | undefined"
 				},
 				{
-					"name": "change",
+					"name": "dayClick",
 					"type": "EventDispatcher<DateTime>"
 				},
 				{
-					"name": "value",
-					"attribute": "value",
-					"type": "DateTime | undefined"
-				},
-				{
-					"name": "includeWeekNumbers",
-					"attribute": "includeWeekNumbers",
+					"name": "includeWeek",
+					"attribute": "includeWeek",
 					"type": "boolean",
 					"default": "false"
 				},
@@ -4020,7 +3953,8 @@
 			],
 			"events": [
 				{
-					"name": "change",
+					"name": "dayClick",
+					"description": "Dispatched when a day is clicked, with the clicked date as detail.",
 					"type": "CustomEvent<DateTime>"
 				}
 			]

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

@@ -1,16 +1,20 @@
 import { Component, type ClassInfo } from '@a11d/lit';
 import '@a11d/array.prototype.group';
+/**
+ * @fires dayClick - Dispatched when a day is clicked, with the clicked date as detail.
+ */
 export declare class Calendar extends Component {
-    includeWeekNumbers: boolean;
+    readonly dayClick: EventDispatcher<DateTime>;
+    private static rangeOf;
+    includeWeek: boolean;
     navigatingValue: import("@3mo/date-time/DateTime.js").DateTime;
     private days;
     static get styles(): import("@a11d/lit").CSSResult;
+    private get columns();
+    private getColumnName;
     protected get template(): import("lit-html").HTMLTemplateResult;
-    private rangeOf;
-    protected getDayTemplate(day: DateTime): import("lit-html").HTMLTemplateResult;
-    protected handleDayClick(day: DateTime): void;
-    private get today();
     protected getDayElementClasses(day: DateTime): ClassInfo;
+    private get today();
 }
 declare global {
     interface HTMLElementTagNameMap {

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,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,kCAyDzB;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,KAAK,GAAqC;IAEtD,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,EAAgB,MAAM,WAAW,CAAA;AAC7G,OAAO,6BAA6B,CAAA;AAGpC;;GAEG;AACH,qBACa,QAAS,SAAQ,SAAS;IAC7B,QAAQ,CAAC,QAAQ,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAEtD,OAAO,CAAC,MAAM,CAAE,OAAO;IAOqB,WAAW,UAAQ;IAQ5D,eAAe,gDAAe;IAExB,OAAO,CAAC,IAAI,CAAwB;IAE7C,WAAoB,MAAM,kCA2DzB;IAED,OAAO,KAAK,OAAO,GAMlB;IAED,OAAO,CAAC,aAAa;IAIrB,cAAuB,QAAQ,0CAkC9B;IAED,SAAS,CAAC,oBAAoB,CAAC,GAAG,EAAE,QAAQ,GAAG,SAAS;IASxD,OAAO,KAAK,KAAK,GAAqC;CACtD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,QAAQ,CAAA;KACvB;CACD"}

package/dist/selection/calendar/Calendar.js

@@ -1,24 +1,32 @@
 import { __decorate } from "tslib";
-import { Component, css, component, html, property, classMap, state } from '@a11d/lit';
+import { Component, css, component, html, property, classMap, state, event } from '@a11d/lit';
 import '@a11d/array.prototype.group';
 import { MemoizeExpiring as memoizeExpiring } from 'typescript-memoize';
+/**
+ * @fires dayClick - Dispatched when a day is clicked, with the clicked date as detail.
+ */
 let Calendar = class Calendar extends Component {
     constructor() {
         super(...arguments);
-        this.includeWeekNumbers = false;
+        this.includeWeek = false;
         this.navigatingValue = new DateTime;
         this.days = new Array();
     }
+    static *rangeOf(start, end) {
+        while (!start.isAfter(end)) {
+            yield start;
+            start = start.add({ days: 1 });
+        }
+    }
     static get styles() {
         return css `
 			:host {
 				--mo-calendar-day-size: 36px;
 				--mo-calendar-week-number-width: var(--mo-calendar-day-size);
-				padding-inline: 10px;
+				padding: 0.5rem;
 			}
 
 			.month {
-				min-height: 270px;
 				place-items: center;
 
 				.heading {
@@ -28,11 +36,14 @@ let Calendar = class Calendar extends Component {
 					place-self: stretch;
 					display: flex;
 					align-items: center;
-					margin-inline-start: 6px;
+					padding-inline-start: 6px;
+					padding-block-end: 0.5rem;
 				}
 
 				.header {
+					text-align: center;
 					color: var(--mo-color-gray);
+					padding-block: 0.25rem
 				}
 			}
 
@@ -67,49 +78,51 @@ let Calendar = class Calendar extends Component {
 			}
 		`;
     }
+    get columns() {
+        const daysInWeek = this.days[0]?.daysInWeek ?? 7;
+        return [
+            !this.includeWeek ? undefined : '[week] var(--mo-calendar-week-number-width)',
+            ...this.days.slice(0, daysInWeek).map(day => `[${this.getColumnName(day)}] var(--mo-calendar-day-size)`),
+        ].join(' ');
+    }
+    getColumnName(date) {
+        return `day-${date.dayOfWeek}`;
+    }
     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))'}
+				columns=${this.columns}
 			>
 				<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='header'>
-						${dayName.charAt(0).toUpperCase() + dayName.charAt(1)}
-					</div>
-				`)}
+				<mo-grid class='header' columns='subgrid' style='grid-column: 1 / -1'>
+					${this.includeWeek === false ? html.nothing : html `<div></div>`}
+					${this.days.slice(0, this.days[0]?.daysInWeek).map(day => html `
+						<span style='grid-column: ${this.getColumnName(day)}' title=${day.format({ weekday: 'long' })}>
+							${day.format({ weekday: 'narrow' })}
+						</span>
+					`)}
+				</mo-grid>
 
-				${this.days.map(([weekNumber, days]) => html `
-					${this.includeWeekNumbers === false ? html.nothing : html `<div class='week'>${weekNumber}</div>`}
-					${days.map(day => this.getDayTemplate(day))}
+				${this.days.map(day => html `
+					${this.includeWeek === false || day.dayOfWeek !== 1 ? html.nothing : html `
+						<div class='week' style='grid-column: week'>${day.weekOfYear}</div>
+					`}
+					<mo-flex tabindex='0'
+						style='grid-column: ${this.getColumnName(day)}'
+						class=${classMap(this.getDayElementClasses(day))}
+						@click=${() => this.dayClick.dispatch(day)}
+					>
+						${day.format({ day: 'numeric' })}
+					</mo-flex>
 				`)}
 			</mo-grid>
 		`;
     }
-    *rangeOf(start, end) {
-        while (!start.isAfter(end)) {
-            yield start;
-            start = start.add({ days: 1 });
-        }
-    }
-    getDayTemplate(day) {
-        return html `
-			<mo-flex tabindex='0' class=${classMap(this.getDayElementClasses(day))} @click=${() => this.handleDayClick(day)}>
-				${day.format({ day: 'numeric' })}
-			</mo-flex>
-		`;
-    }
-    handleDayClick(day) {
-        day;
-    }
-    get today() { return new DateTime().dayStart; }
     getDayElementClasses(day) {
         return {
             day: true,
@@ -117,19 +130,21 @@ let Calendar = class Calendar extends Component {
             outsideMonth: day.month !== this.navigatingValue.month
         };
     }
+    get today() { return new DateTime().dayStart; }
 };
+__decorate([
+    event()
+], Calendar.prototype, "dayClick", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Calendar.prototype, "includeWeekNumbers", void 0);
+], Calendar.prototype, "includeWeek", void 0);
 __decorate([
     property({
         type: Object,
         updated() {
             const start = this.navigatingValue.monthStart.weekStart;
             const end = this.navigatingValue.monthEnd.weekEnd;
-            const range = [...this.rangeOf(start, end)];
-            this.days = [...range.groupToMap(d => String(d.weekOfYear))]
-                .sort(([, dates1], [, dates2]) => dates1[0]?.isBefore(dates2[0]) ? -1 : +1);
+            this.days = [...Calendar.rangeOf(start, end)];
         }
     })
 ], Calendar.prototype, "navigatingValue", void 0);

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

@@ -1,13 +1,14 @@
+import { type PropertyValues } from '@a11d/lit';
 import { Calendar } from './Calendar.js';
 import { type DateTime } from '@3mo/date-time';
-/** @fires change */
 export declare class SelectableCalendar extends Calendar {
-    readonly change: EventDispatcher<DateTime>;
-    value?: DateTime;
+    value?: DateTimeRange;
+    private readonly monthElement;
+    protected updated(pops: PropertyValues<this>): void;
     static get styles(): import("@a11d/lit").CSSResult;
-    protected static get calendarStyles(): import("@a11d/lit").CSSResult;
-    protected handleDayClick(day: DateTime): void;
     protected getDayElementClasses(day: DateTime): {
+        start: boolean;
+        end: boolean;
         selected: boolean;
     };
 }

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,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAE9C,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,kCAKzB;IAED,SAAS,CAAC,MAAM,KAAK,cAAc,kCAOlC;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":"AAAA,OAAO,EAA8C,KAAK,cAAc,EAAE,MAAM,WAAW,CAAA;AAC3F,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAE9C,qBACa,kBAAmB,SAAQ,QAAQ;IACnB,KAAK,CAAC,EAAE,aAAa,CAAA;IAEhC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAc;cAEzC,OAAO,CAAC,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC;IASrD,WAAoB,MAAM,kCA0CzB;cAEkB,oBAAoB,CAAC,GAAG,EAAE,QAAQ;;;;;CAUrD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,kBAAkB,CAAA;KAC5C;CACD"}

package/dist/selection/calendar/SelectableCalendar.js

@@ -1,39 +1,75 @@
 import { __decorate } from "tslib";
-import { component, css, event, property } from '@a11d/lit';
+import { component, css, property, query, unsafeCSS } from '@a11d/lit';
 import { Calendar } from './Calendar.js';
-/** @fires change */
 let SelectableCalendar = class SelectableCalendar extends Calendar {
+    updated(pops) {
+        super.updated(pops);
+        this.monthElement.dataset.selection = this.dataset.selection;
+        this.monthElement.toggleAttribute('data-start-exists', !!this.value?.start);
+        this.monthElement.toggleAttribute('data-end-exists', !!this.value?.end);
+        this.monthElement.toggleAttribute('data-start-behind', this.value?.start?.isBefore(this.navigatingValue.monthEnd.weekEnd) ?? false);
+        this.monthElement.toggleAttribute('data-end-ahead', this.value?.end?.isAfter(this.navigatingValue.monthEnd.weekEnd) ?? false);
+    }
     static get styles() {
+        const getRangeStyles = ({ start, end }) => {
+            return css `
+				.day${unsafeCSS(start)}, .day${unsafeCSS(end)} {
+					background: var(--mo-color-accent-transparent) !important;
+					color: color-mix(in srgb, var(--mo-color-accent), var(--mo-color-foreground));
+				}
+
+				.day${unsafeCSS(start)} ~ :not(${unsafeCSS(end)}):not(${unsafeCSS(end)} ~ *), /* Start is visible, end is visible or not */
+				&[data-start-exists]:has(${unsafeCSS(end)}):not(:has(${unsafeCSS(start)})) .day:not(${unsafeCSS(end)}):not(${unsafeCSS(end)} ~ *), /* Start is not visible, end is visible */
+				&[data-start-before][data-end-ahead] .day /* Start is before, end is after */
+				{
+					background: color-mix(in srgb, var(--mo-color-accent), transparent 92%);
+				}
+			`;
+        };
         return css `
 			${super.styles}
-			${this.calendarStyles}
-		`;
-    }
-    static get calendarStyles() {
-        return css `
+
 			.day.selected {
 				background: var(--mo-color-accent-transparent);
-				color: var(--mo-color-accent) !important;
+				color: color-mix(in srgb, var(--mo-color-accent), var(--mo-color-foreground)) !important;
+			}
+
+			.month {
+				&:not(:hover) {
+					${getRangeStyles({ start: '.selected.start', end: '.selected.end' })};
+				}
+
+				&:hover {
+					/* After start is selected: */
+					&[data-selection=end] {
+						${getRangeStyles({ start: '.selected.start', end: ':hover' })};
+					}
+
+					/* After end is selected: */
+					&[data-selection=start] {
+						${getRangeStyles({ start: ':hover', end: '.selected.end' })};
+					}
+				}
 			}
 		`;
     }
-    handleDayClick(day) {
-        this.value = day;
-        this.change.dispatch(day);
-    }
     getDayElementClasses(day) {
+        const start = this.value?.start?.dayStart.equals(day.dayStart) ?? false;
+        const end = this.value?.end?.dayStart.equals(day.dayStart) ?? false;
         return {
             ...super.getDayElementClasses(day),
-            selected: !!this.value && day.equals(this.value),
+            start,
+            end,
+            selected: start || end,
         };
     }
 };
-__decorate([
-    event()
-], SelectableCalendar.prototype, "change", void 0);
 __decorate([
     property({ type: Object })
 ], SelectableCalendar.prototype, "value", void 0);
+__decorate([
+    query('.month')
+], SelectableCalendar.prototype, "monthElement", void 0);
 SelectableCalendar = __decorate([
     component('mo-selectable-calendar')
 ], SelectableCalendar);

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

@@ -1,4 +1,3 @@
 export * from './Calendar.js';
 export * from './SelectableCalendar.js';
-export * from './SelectableRangeCalendar.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../selection/calendar/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../selection/calendar/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}

package/dist/selection/calendar/index.js

@@ -1,3 +1,2 @@
 export * from './Calendar.js';
 export * from './SelectableCalendar.js';
-export * from './SelectableRangeCalendar.js';