@3mo/date-time-fields 0.10.0 → 0.10.2

package/dist/custom-elements.json

@@ -27,7 +27,7 @@
 					"name": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"day\""
+					"default": "\"Day\""
 				},
 				{
 					"name": "selectOnFocus",
@@ -103,7 +103,7 @@
 					"attribute": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"day\""
+					"default": "\"Day\""
 				},
 				{
 					"name": "inputElement",
@@ -245,7 +245,7 @@
 					"name": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"day\""
+					"default": "\"Day\""
 				},
 				{
 					"name": "selectOnFocus",
@@ -328,7 +328,7 @@
 					"attribute": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"day\""
+					"default": "\"Day\""
 				},
 				{
 					"name": "inputElement",
@@ -470,7 +470,7 @@
 					"name": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"day\""
+					"default": "\"Day\""
 				},
 				{
 					"name": "selectOnFocus",
@@ -553,7 +553,7 @@
 					"attribute": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"day\""
+					"default": "\"Day\""
 				},
 				{
 					"name": "inputElement",
@@ -689,7 +689,7 @@
 					"name": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"minute\""
+					"default": "\"Minute\""
 				},
 				{
 					"name": "selectOnFocus",
@@ -765,7 +765,7 @@
 					"attribute": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"minute\""
+					"default": "\"Minute\""
 				},
 				{
 					"name": "inputElement",
@@ -907,7 +907,7 @@
 					"name": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"minute\""
+					"default": "\"Minute\""
 				},
 				{
 					"name": "selectOnFocus",
@@ -990,7 +990,7 @@
 					"attribute": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"minute\""
+					"default": "\"Minute\""
 				},
 				{
 					"name": "inputElement",
@@ -1132,7 +1132,7 @@
 					"name": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"minute\""
+					"default": "\"Minute\""
 				},
 				{
 					"name": "selectOnFocus",
@@ -1215,7 +1215,7 @@
 					"attribute": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"minute\""
+					"default": "\"Minute\""
 				},
 				{
 					"name": "inputElement",
@@ -1552,7 +1552,7 @@
 					"name": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"day\""
+					"default": "\"Day\""
 				},
 				{
 					"name": "selectOnFocus",
@@ -1639,7 +1639,7 @@
 					"attribute": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"day\""
+					"default": "\"Day\""
 				},
 				{
 					"name": "inputElement",
@@ -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/index.d.ts

@@ -10,6 +10,7 @@ import '@3mo/scroller';
 import '@3mo/list';
 export * from './selection/index.js';
 export * from './FieldTime.js';
+export * from './FieldDateTimePrecision.js';
 export * from './FieldDateTime.js';
 export * from './FieldDateTimeRange.js';
 export * from './FieldDateRange.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,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,6BAA6B,CAAA;AAC3C,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mCAAmC,CAAA"}

package/dist/index.js

@@ -10,6 +10,7 @@ import '@3mo/scroller';
 import '@3mo/list';
 export * from './selection/index.js';
 export * from './FieldTime.js';
+export * from './FieldDateTimePrecision.js';
 export * from './FieldDateTime.js';
 export * from './FieldDateTimeRange.js';
 export * from './FieldDateRange.js';

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