@mhmo91/schmancy 0.10.42 → 0.10.43

package/src/form/fields/date-range/date-range.ts

@@ -2,34 +2,114 @@ import dayjs from 'dayjs'
 import quarterOfYear from 'dayjs/plugin/quarterOfYear'
 import { html, nothing, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
-import { concat, exhaustMap, finalize, fromEvent, map, merge, of, Subject, switchMap, takeUntil, tap, timer } from 'rxjs'
+import {
+	concat,
+	exhaustMap,
+	finalize,
+	fromEvent,
+	map,
+	merge,
+	of,
+	Subject,
+	switchMap,
+	takeUntil,
+	tap,
+	timer,
+} from 'rxjs'
 import { SchmancyFormField } from '@mixins/index'
 import { show } from '../../../overlay/overlay.service'
 import { detectDateRangeType, formatDateRange } from './date-range-helpers'
-import { DateRangePreset, generatePresetCategories, PresetCategory } from './date-range-presets'
-import { validateInitialDateRange } from './date-utils'
 import './date-range-dialog'
+import type { DateRangeDialogPreset } from './date-range-dialog'
 
-// Add quarter plugin to dayjs
 dayjs.extend(quarterOfYear)
 
-// Bridge the inner-content events used inside the overlay template down to a
-// `close` event on the same element. `show()` translates a bubbling 'close'
-// event into observable completion + an emission of `event.detail`.
-const dispatchClose = (target: EventTarget | null): void => {
-	target?.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
+// ---------------------------------------------------------------------------
+// Default built-in presets
+// ---------------------------------------------------------------------------
+
+function buildDefaultPresets(): DateRangeDialogPreset[] {
+	return [
+		{
+			id: 'today',
+			label: 'Today',
+			start: dayjs().startOf('day').format('YYYY-MM-DD'),
+			end: dayjs().endOf('day').format('YYYY-MM-DD'),
+		},
+		{
+			id: 'yesterday',
+			label: 'Yesterday',
+			start: dayjs().subtract(1, 'day').startOf('day').format('YYYY-MM-DD'),
+			end: dayjs().subtract(1, 'day').endOf('day').format('YYYY-MM-DD'),
+		},
+		{
+			id: 'last7',
+			label: 'Last 7 days',
+			start: dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD'),
+			end: dayjs().endOf('day').format('YYYY-MM-DD'),
+		},
+		{
+			id: 'last30',
+			label: 'Last 30 days',
+			start: dayjs().subtract(29, 'day').startOf('day').format('YYYY-MM-DD'),
+			end: dayjs().endOf('day').format('YYYY-MM-DD'),
+		},
+		{
+			id: 'thisWeek',
+			label: 'This week',
+			start: dayjs().startOf('week').format('YYYY-MM-DD'),
+			end: dayjs().endOf('week').format('YYYY-MM-DD'),
+		},
+		{
+			id: 'thisMonth',
+			label: 'This month',
+			start: dayjs().startOf('month').format('YYYY-MM-DD'),
+			end: dayjs().endOf('month').format('YYYY-MM-DD'),
+		},
+		{
+			id: 'lastMonth',
+			label: 'Last month',
+			start: dayjs().subtract(1, 'month').startOf('month').format('YYYY-MM-DD'),
+			end: dayjs().subtract(1, 'month').endOf('month').format('YYYY-MM-DD'),
+		},
+		{
+			id: 'thisYear',
+			label: 'This year',
+			start: dayjs().startOf('year').format('YYYY-MM-DD'),
+			end: dayjs().endOf('year').format('YYYY-MM-DD'),
+		},
+	]
 }
 
+// ---------------------------------------------------------------------------
+// Event types
+// ---------------------------------------------------------------------------
+
+export type SchmancyDateRangeInputEvent = CustomEvent<{
+	start: string | null
+	end: string | null
+}>
+
 export type SchmancyDateRangeChangeEvent = CustomEvent<{
-	dateFrom: string
-	dateTo: string
+	start: string | null
+	end: string | null
+	preset: string | null
 }>
 
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
 /**
- * A date range selector that supports presets and manual date input.
+ * A date range selector composing `<schmancy-calendar mode="range">` with a
+ * sticky preset chip quick-rail and a secondary typed-entry path.
+ *
+ * Public API: flat ISO `start`/`end`, `preset` read-back, `presets` array.
+ * FormData: `${name}.start` / `${name}.end` (empty endpoint omitted).
  *
  * @element schmancy-date-range
- * @fires change - Fired when the date range changes with dateFrom and dateTo values
+ * @fires input  - Provisional sweep preview  { start, end }
+ * @fires change - Committed range change      { start, end, preset }
  */
 @customElement('schmancy-date-range')
 export class SchmancyDateRange extends SchmancyFormField() {
@@ -37,111 +117,86 @@ export class SchmancyDateRange extends SchmancyFormField() {
 	// `validateOn`, `touched`, `submitted`, `markTouched`, `markSubmitted`,
 	// FACE wiring, FIELD_CONNECT_EVENT dispatch — all from the mixin.
 
-	@property({ type: String }) type: 'date' | 'datetime-local' = 'date'
-	@property({ type: Object }) dateFrom: { label: string; value: string } = { label: 'From', value: '' }
-	@property({ type: Object }) dateTo: { label: string; value: string } = { label: 'To', value: '' }
-	@property({ type: String }) minDate?: string
-	@property({ type: String }) maxDate?: string
-
-	@property({ type: Array }) customPresets: Array<{
-		label: string
-		dateFrom: string
-		dateTo: string
-	}> = []
-	@property({ type: String }) format?: string
-	@property({ type: String }) placeholder = 'Select date range'
+	@property() type: 'date' | 'datetime-local' = 'date'
+	@property() start: string | null = null
+	@property() end: string | null = null
+
+	@property({ type: Array }) presets: DateRangeDialogPreset[] = buildDefaultPresets()
+
+	/** Selected preset id; null = custom range. Reflects to attribute. */
+	@property({ reflect: true }) preset: string | null = null
+
+	@property() min?: string
+	@property() max?: string
+	@property() placeholder = 'Select date range'
 	@property({ type: Boolean }) clearable = true
 	@property() step?: 'day' | 'week' | 'month' | 'year' | number
-	/** When true, collapses to just an icon button on mobile screens */
+	/** Collapses to an icon-only button on narrow viewports. */
 	@property({ type: Boolean }) collapse = false
 
-	// Session inputs — driven by handlers, consumed by the single pipeline
-	// in connectedCallback (rxjs ONE_PIPELINE_ONE_SUBSCRIBE / SESSIONS).
+	// Session subjects — ONE_PIPELINE_ONE_SUBSCRIBE in connectedCallback.
 	private readonly open$ = new Subject<MouseEvent | undefined>()
 	private readonly close$ = new Subject<void>()
 	private readonly announce$ = new Subject<string>()
 
-	// Internal states
 	@state() private isOpen = false
-	@state() private selectedDateRange: string = ''
-	@state() private activePreset: string | null = null
-	@state() private announceMessage: string = ''
+	@state() private announceMessage = ''
 
-	// Default presets
-	private presetRanges: DateRangePreset[] = []
+	// Default-capture for formResetCallback
+	private startDefault: string | null = null
+	private endDefault: string | null = null
+	private presetDefault: string | null = null
 
-	// Categorized presets
-	private presetCategories: PresetCategory[] = []
-
-	// Memoization cache
-	private memoizedPresets = new Map<string, PresetCategory[]>()
-
-	disconnectedCallback(): void {
+	override disconnectedCallback(): void {
 		super.disconnectedCallback()
-		// Reset open state when element is moved/removed to prevent stale state
 		this.isOpen = false
 	}
 
-	connectedCallback(): void {
+	override connectedCallback(): void {
 		super.connectedCallback()
-		this.initPresetRanges()
 
-		// Validate initial date range
-		const dateFormat = this.getDateFormat() as 'YYYY-MM-DD' | 'YYYY-MM-DDTHH:mm'
-		const validatedRange = validateInitialDateRange(this.dateFrom.value, this.dateTo.value, dateFormat)
-
-		if (validatedRange.isValid) {
-			this.dateFrom.value = validatedRange.dateFrom!
-			this.dateTo.value = validatedRange.dateTo!
-			this.updateSelectedDateRange()
-		} else {
-			const now = dayjs().format(dateFormat)
-			this.dateFrom.value = now
-			this.dateTo.value = now
-			this.updateSelectedDateRange()
-		}
-
-		// One pipeline, one subscribe (rxjs ONE_PIPELINE_ONE_SUBSCRIBE): the
-		// dropdown open/close session, screen-reader announcements, and
-		// document keyboard navigation merge into a single chain torn down by
-		// takeUntil(this.disconnecting).
+		// One pipeline (rxjs ONE_PIPELINE_ONE_SUBSCRIBE).
 		merge(
-			// Dropdown is a session (rxjs SESSIONS_USE_HIGHER_ORDER_OBSERVABLES):
-			// open$ opens the overlay; show() completes when an inner handler
-			// dispatches `close`, close$ dismisses it externally; finalize
-			// resets isOpen on either teardown path.
+			// Overlay session (rxjs SESSIONS_USE_HIGHER_ORDER_OBSERVABLES).
 			this.open$.pipe(
 				tap(() => {
-					this.dispatchEvent(new CustomEvent('beforeopen', { bubbles: true, composed: true }))
 					this.isOpen = true
 				}),
 				exhaustMap(anchor =>
 					show(
-						html`
+						// Reactive factory — closed-over props read fresh on each mount.
+						() => html`
 							<schmancy-date-range-dialog
-								.type="${this.type}"
-								.dateFrom="${this.dateFrom}"
-								.dateTo="${this.dateTo}"
-								.minDate="${this.minDate}"
-								.maxDate="${this.maxDate}"
-								.activePreset="${this.activePreset}"
-								.presetCategories="${this.presetCategories}"
-								@preset-select="${(ev: CustomEvent) => {
-									this.activePreset = ev.detail.preset.label
-									this.setDateRange(ev.detail.preset.range.dateFrom, ev.detail.preset.range.dateTo)
-									dispatchClose(ev.currentTarget)
-								}}"
-								@date-change="${() => this.updateSelectedDateRange()}"
-								@apply-dates="${(ev: CustomEvent) => {
-									const { dateFrom, dateTo, swapIfNeeded } = ev.detail
-									if (swapIfNeeded) {
-										this.setDateRange(dateTo, dateFrom)
-									} else {
-										this.setDateRange(dateFrom, dateTo)
+								.type=${this.type}
+								.start=${this.start}
+								.end=${this.end}
+								.min=${this.min}
+								.max=${this.max}
+								.preset=${this.preset}
+								.presets=${this.presets}
+								@calendar-input=${(ev: CustomEvent<{ start: string | null; end: string | null }>) => {
+									ev.stopPropagation()
+									this.dispatchEvent(
+										new CustomEvent('input', {
+											detail: { start: ev.detail.start, end: ev.detail.end },
+											bubbles: true,
+											composed: true,
+										}),
+									)
+								}}
+								@calendar-change=${(ev: CustomEvent<{ start: string | null; end: string | null }>) => {
+									ev.stopPropagation()
+									this.commitRange(ev.detail.start, ev.detail.end, null)
+									// Two endpoints set → close overlay
+									if (ev.detail.start && ev.detail.end) {
+										ev.target?.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
 									}
-									dispatchClose(ev.currentTarget)
-								}}"
-								@announce="${(ev: CustomEvent) => this.announce$.next(ev.detail.message)}"
+								}}
+								@preset-select=${(ev: CustomEvent<DateRangeDialogPreset>) => {
+									ev.stopPropagation()
+									this.commitRange(ev.detail.start, ev.detail.end, ev.detail.id)
+									ev.target?.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
+								}}
 							></schmancy-date-range-dialog>
 						`,
 						{ anchor },
@@ -153,211 +208,128 @@ export class SchmancyDateRange extends SchmancyFormField() {
 					),
 				),
 			),
-			// Announcements (rxjs LIFT_EVERY_ASYNC_SOURCE): one Subject, one
-			// switchMap-cleared timer — not a fresh timer().subscribe() per call.
+
+			// Screen-reader announcements.
 			this.announce$.pipe(
-				switchMap(message => concat(of(message), timer(100).pipe(map(() => '')))),
+				switchMap(message => concat(of(message), timer(1500).pipe(map(() => '')))),
 				tap(message => {
 					this.announceMessage = message
 				}),
 			),
+
 			// Document keyboard navigation.
-			fromEvent<KeyboardEvent>(document, 'keydown').pipe(tap(event => this.handleKeyboardNavigation(event))),
+			fromEvent<KeyboardEvent>(document, 'keydown').pipe(tap(ev => this.handleKeyDown(ev))),
 		)
 			.pipe(takeUntil(this.disconnecting))
 			.subscribe()
 	}
 
-	updated(changedProps: PropertyValues) {
-		super.updated(changedProps)
-
-		if (
-			(changedProps.has('dateFrom') || changedProps.has('dateTo')) &&
-			(this.dateFrom?.value !== undefined || this.dateTo?.value !== undefined)
-		) {
-			this.updateSelectedDateRange()
-		}
-	}
+	// -------------------------------------------------------------------------
+	// Mixin overrides — FormData, validity, dirty, reset
+	// -------------------------------------------------------------------------
 
 	override willUpdate(changed: PropertyValues): void {
 		super.willUpdate(changed)
-		if (changed.has('dateFrom') || changed.has('dateTo') || changed.has('name')) {
-			// Multi-entry FACE submission: setFormValue accepts a FormData
-			// object whose entries are appended to the owning form's FormData.
-			// native `new FormData(form)` then sees both `${name}From` and
-			// `${name}To` without any consumer-side parsing.
+		if (changed.has('start') || changed.has('end') || changed.has('name') || changed.has('disabled')) {
 			if (this.name && !this.disabled) {
 				const fd = new FormData()
-				if (this.dateFrom?.value) fd.append(`${this.name}From`, this.dateFrom.value)
-				if (this.dateTo?.value) fd.append(`${this.name}To`, this.dateTo.value)
-				this.internals?.setFormValue(fd)
+				if (this.start) fd.append(`${this.name}.start`, this.start)
+				if (this.end) fd.append(`${this.name}.end`, this.end)
+				this.internals?.setFormValue(fd.has(`${this.name}.start`) || fd.has(`${this.name}.end`) ? fd : null)
 			} else {
 				this.internals?.setFormValue(null)
 			}
 			this.checkValidity()
 		}
-		if (changed.has('required') || changed.has('disabled')) {
+		if (changed.has('required')) {
 			this.checkValidity()
 		}
 	}
 
-	/**
-	 * Date-range validity is `both dates non-empty` when required.
-	 * (Order/range constraints are out of scope here — they belong to a
-	 * domain-specific schema layer.)
-	 */
 	override checkValidity(): boolean {
 		if (this.disabled) {
 			this.internals?.setValidity({})
 			return true
 		}
-		const fromEmpty = !this.dateFrom?.value
-		const toEmpty = !this.dateTo?.value
-		const isValid = !this.required || (!fromEmpty && !toEmpty)
-		const message = isValid ? '' : 'Please select a date range.'
-
-		this.internals?.setValidity(
-			isValid ? {} : { valueMissing: true },
-			isValid ? undefined : message,
-		)
-
+		if (this.required && (!this.start || !this.end)) {
+			const msg = 'Please select a complete date range.'
+			this.internals?.setValidity({ valueMissing: true }, msg)
+			if (this.shouldShowError()) {
+				this.error = true
+				this.validationMessage = msg
+			}
+			return false
+		}
+		if (this.start && this.end && this.end < this.start) {
+			const msg = 'End date must be on or after start date.'
+			this.internals?.setValidity({ customError: true }, msg)
+			if (this.shouldShowError()) {
+				this.error = true
+				this.validationMessage = msg
+			}
+			return false
+		}
+		this.internals?.setValidity({})
 		if (this.shouldShowError()) {
-			this.error = !isValid
-			this.validationMessage = message
+			this.error = false
+			this.validationMessage = ''
 		}
-		return isValid
+		return true
 	}
 
-	/**
-	 * Override — emit `${name}From` and `${name}To` flat-suffix entries (the
-	 * plan's chosen multi-entry encoding; native to JS consumers without
-	 * server-side bracket parsing).
-	 */
 	override toFormEntries(): Array<[string, FormDataEntryValue]> {
 		if (!this.name || this.disabled) return []
 		const entries: Array<[string, FormDataEntryValue]> = []
-		if (this.dateFrom?.value) entries.push([`${this.name}From`, this.dateFrom.value])
-		if (this.dateTo?.value) entries.push([`${this.name}To`, this.dateTo.value])
+		if (this.start) entries.push([`${this.name}.start`, this.start])
+		if (this.end) entries.push([`${this.name}.end`, this.end])
 		return entries
 	}
 
-	/** `dirty` tracks the underlying date strings, not the wide-union value. */
-	private dateFromDefault: string = ''
-	private dateToDefault: string = ''
+	override get dirty(): boolean {
+		return this.start !== this.startDefault || this.end !== this.endDefault
+	}
+
 	override firstUpdated(changed: PropertyValues): void {
 		super.firstUpdated(changed)
-		this.dateFromDefault = this.dateFrom?.value ?? ''
-		this.dateToDefault = this.dateTo?.value ?? ''
-	}
-	override get dirty(): boolean {
-		return (
-			(this.dateFrom?.value ?? '') !== this.dateFromDefault ||
-			(this.dateTo?.value ?? '') !== this.dateToDefault
-		)
+		this.startDefault = this.start
+		this.endDefault = this.end
+		this.presetDefault = this.preset
 	}
 
 	override resetForm(): void {
-		this.dateFrom = { ...this.dateFrom, value: this.dateFromDefault }
-		this.dateTo = { ...this.dateTo, value: this.dateToDefault }
-		super.resetForm()
+		this.start = this.startDefault
+		this.end = this.endDefault
+		this.preset = this.presetDefault
+		this.error = false
+		this.validationMessage = ''
+		this.touched = false
+		this.submitted = false
+		this.internals?.setValidity({})
 	}
 
-	private initPresetRanges() {
-		const format = this.getDateFormat()
-		const cacheKey = `${this.type}-${format}-${JSON.stringify(this.customPresets)}`
-		
-		// Check memoization cache
-		if (this.memoizedPresets.has(cacheKey)) {
-			const cached = this.memoizedPresets.get(cacheKey)!
-			this.presetCategories = cached
-			this.presetRanges = []
-			cached.forEach(category => {
-				this.presetRanges.push(...category.presets)
-			})
-			return
-		}
-
-		// Generate preset categories
-		this.presetCategories = generatePresetCategories(format, this.type === 'datetime-local')
-
-		// Flatten presets for other methods that expect a flat list
-		this.presetRanges = []
-		this.presetCategories.forEach(category => {
-			this.presetRanges.push(...category.presets)
-		})
-
-		// Add custom presets if provided
-		if (this.customPresets && this.customPresets.length > 0) {
-			const customCategory: PresetCategory = {
-				name: 'Custom',
-				presets: this.customPresets.map(preset => ({
-					label: preset.label,
-					range: {
-						dateFrom: preset.dateFrom,
-						dateTo: preset.dateTo,
-					},
-					step: 'day' as const,
-				})),
-			}
-
-			this.presetCategories.push(customCategory)
-			this.presetRanges.push(...customCategory.presets)
-		}
-		
-		// Cache the result
-		this.memoizedPresets.set(cacheKey, [...this.presetCategories])
-	}
+	// -------------------------------------------------------------------------
+	// Internal helpers
+	// -------------------------------------------------------------------------
 
-	private getDateFormat(): string {
-		return this.format || (this.type === 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DDTHH:mm')
+	private commitRange(start: string | null, end: string | null, presetId: string | null): void {
+		this.start = start
+		this.end = end
+		this.preset = presetId
+		this.announce$.next(`Date range: ${this.displayLabel()}`)
+		this.emitChange({ start, end, preset: presetId })
 	}
 
-	/**
-	 * Creates a concise display format for the selected date range
-	 */
-	private updateSelectedDateRange() {
-		// Find matching preset
-		const preset = this.presetRanges.find(
-			p => p.range.dateFrom === this.dateFrom.value && p.range.dateTo === this.dateTo.value,
-		)
-
-		if (preset) {
-			// If matches a preset, just use the preset name
-			this.selectedDateRange = preset.label
-			this.activePreset = preset.label
-			return
+	private displayLabel(): string {
+		if (this.preset) {
+			const p = this.presets.find(x => x.id === this.preset)
+			if (p) return p.label
 		}
-
-		// If we didn't find a preset match, check if we should update the active preset
-		this.checkAndUpdateActivePreset(this.dateFrom.value, this.dateTo.value)
-
-		// Custom date range - create concise format
-		this.activePreset = null
-		this.selectedDateRange = formatDateRange(this.dateFrom.value, this.dateTo.value, this.type, this.placeholder)
-	}
-
-	private setDateRange(dateFrom: string, dateTo: string) {
-		this.dateFrom.value = dateFrom
-		this.dateTo.value = dateTo
-		this.updateSelectedDateRange()
-
-		// Announce change to screen readers
-		this.announce$.next(`Date range updated: ${this.selectedDateRange}`)
-
-		this.dispatchEvent(
-			new CustomEvent<{ dateFrom: string; dateTo: string }>('change', {
-				detail: { dateFrom, dateTo },
-				bubbles: true,
-				composed: true,
-			}),
-		)
+		return formatDateRange(this.start ?? '', this.end ?? '', this.type, this.placeholder)
 	}
 
 	private toggleDropdown(e: MouseEvent) {
 		e.stopPropagation()
 		if (this.disabled || this.step !== undefined) return
-		// Drive the session pipeline (connectedCallback) — no imperative
-		// open/close, no manual subscription field.
 		if (this.isOpen) {
 			this.close$.next()
 		} else {
@@ -365,24 +337,18 @@ export class SchmancyDateRange extends SchmancyFormField() {
 		}
 	}
 
-	/**
-	 * Shifts the date range based on the step property
-	 */
 	private shiftDateRange(direction: number, e: Event) {
 		e.stopPropagation()
+		if (!this.start || !this.end) return
 
-		if (!this.dateFrom.value || !this.dateTo.value) return
-
-		const fromDate = dayjs(this.dateFrom.value)
-		const toDate = dayjs(this.dateTo.value)
-
+		const fromDate = dayjs(this.start)
+		const toDate = dayjs(this.end)
 		if (!fromDate.isValid() || !toDate.isValid()) return
 
-		const format = this.getDateFormat()
+		const dateFormat = this.type === 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DDTHH:mm'
 		const dir = direction > 0 ? 1 : -1
 		const daysDiff = toDate.diff(fromDate, 'day') + 1
 
-		// Determine shift amount and unit
 		let amount: number
 		let unit: dayjs.ManipulateType
 
@@ -398,7 +364,6 @@ export class SchmancyDateRange extends SchmancyFormField() {
 				unit = this.step
 			}
 		} else {
-			// Auto-detect based on date range
 			const rangeType = detectDateRangeType(fromDate, toDate)
 			if (rangeType.isFullYear) {
 				amount = dir
@@ -415,182 +380,135 @@ export class SchmancyDateRange extends SchmancyFormField() {
 			}
 		}
 
-		const newFromDate = fromDate.add(amount, unit)
-		const newToDate = toDate.add(amount, unit)
+		const newFrom = fromDate.add(amount, unit)
+		const newTo = toDate.add(amount, unit)
 
-		// Validate against min/max dates
-		if (this.minDate && newFromDate.isBefore(dayjs(this.minDate))) return
-		if (this.maxDate && newToDate.isAfter(dayjs(this.maxDate))) return
+		if (this.min && newFrom.isBefore(dayjs(this.min))) return
+		if (this.max && newTo.isAfter(dayjs(this.max))) return
 
-		// Update the date range
-		this.setDateRange(newFromDate.format(format), newToDate.format(format))
-		this.checkAndUpdateActivePreset(newFromDate.format(format), newToDate.format(format))
+		this.commitRange(newFrom.format(dateFormat), newTo.format(dateFormat), null)
 	}
 
-	/**
-	 * Handle keyboard navigation for accessibility
-	 */
-	private handleKeyboardNavigation(event: KeyboardEvent) {
-		const key = event.key
-		
-		// Handle date navigation keys
-		if (this.dateFrom.value && this.dateTo.value && !this.disabled) {
-			switch (key) {
-				case 'PageUp':
-					if (event.target === this || this.contains(event.target as Node)) {
-						this.shiftDateRange(-1, event)
-						event.preventDefault()
-					}
-					break
-				case 'PageDown':
-					if (event.target === this || this.contains(event.target as Node)) {
-						this.shiftDateRange(1, event)
-						event.preventDefault()
-					}
-					break
-				case 'Home':
-					if (event.ctrlKey && (event.target === this || this.contains(event.target as Node))) {
-						// Ctrl+Home: Jump to start of current month
-						const currentFrom = dayjs(this.dateFrom.value)
-						const currentTo = dayjs(this.dateTo.value)
-						const monthStart = currentFrom.startOf('month')
-						const daysDiff = currentTo.diff(currentFrom, 'day')
-						
-						this.setDateRange(
-							monthStart.format(this.getDateFormat()),
-							monthStart.add(daysDiff, 'day').format(this.getDateFormat())
-						)
-						event.preventDefault()
-					}
-					break
-				case 'End':
-					if (event.ctrlKey && (event.target === this || this.contains(event.target as Node))) {
-						// Ctrl+End: Jump to end of current month
-						const currentFrom = dayjs(this.dateFrom.value)
-						const currentTo = dayjs(this.dateTo.value)
-						const daysDiff = currentTo.diff(currentFrom, 'day')
-						const monthEnd = currentTo.endOf('month')
-						
-						this.setDateRange(
-							monthEnd.subtract(daysDiff, 'day').format(this.getDateFormat()),
-							monthEnd.format(this.getDateFormat())
-						)
-						event.preventDefault()
-					}
-					break
-			}
+	private handleKeyDown(ev: KeyboardEvent) {
+		if (!this.start || !this.end || this.disabled) return
+		const target = ev.target as Node | null
+		if (target !== this && !this.contains(target)) return
+
+		switch (ev.key) {
+			case 'PageUp':
+				this.shiftDateRange(-1, ev)
+				ev.preventDefault()
+				break
+			case 'PageDown':
+				this.shiftDateRange(1, ev)
+				ev.preventDefault()
+				break
+			case 'Home':
+				if (ev.ctrlKey) {
+					const fmt = this.type === 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DDTHH:mm'
+					const from = dayjs(this.start)
+					const to = dayjs(this.end)
+					const monthStart = from.startOf('month')
+					this.commitRange(
+						monthStart.format(fmt),
+						monthStart.add(to.diff(from, 'day'), 'day').format(fmt),
+						null,
+					)
+					ev.preventDefault()
+				}
+				break
+			case 'End':
+				if (ev.ctrlKey) {
+					const fmt = this.type === 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DDTHH:mm'
+					const from = dayjs(this.start)
+					const to = dayjs(this.end)
+					const monthEnd = to.endOf('month')
+					this.commitRange(
+						monthEnd.subtract(to.diff(from, 'day'), 'day').format(fmt),
+						monthEnd.format(fmt),
+						null,
+					)
+					ev.preventDefault()
+				}
+				break
 		}
 	}
 
-	/**
-	 * Checks if the current date range matches any predefined preset,
-	 * and updates the activePreset accordingly
-	 */
-	private checkAndUpdateActivePreset(fromDate: string, toDate: string) {
-		// Find a preset that matches the current date range
-		const matchingPreset = this.presetRanges.find(
-			preset => preset.range.dateFrom === fromDate && preset.range.dateTo === toDate,
-		)
-
-		if (matchingPreset) {
-			this.activePreset = matchingPreset.label
-		} else {
-			this.activePreset = null
-		}
-	}
-
-	/**
-	 * Check if we can navigate backward
-	 */
 	private canNavigateBackward(): boolean {
-		if (!this.dateFrom.value || !this.minDate) return true
-		
-		const fromDate = dayjs(this.dateFrom.value)
-		const minDate = dayjs(this.minDate)
-		
-		// If current start date is already at or before min date, can't go back
-		return fromDate.isAfter(minDate)
+		if (!this.start || !this.min) return true
+		return dayjs(this.start).isAfter(dayjs(this.min))
 	}
 
-	/**
-	 * Check if we can navigate forward
-	 */
 	private canNavigateForward(): boolean {
-		if (!this.dateTo.value || !this.maxDate) return true
-		
-		const toDate = dayjs(this.dateTo.value)
-		const maxDate = dayjs(this.maxDate)
-		
-		// If current end date is already at or after max date, can't go forward
-		return toDate.isBefore(maxDate)
+		if (!this.end || !this.max) return true
+		return dayjs(this.end).isBefore(dayjs(this.max))
 	}
 
+	// -------------------------------------------------------------------------
+	// Render
+	// -------------------------------------------------------------------------
 
 	render() {
-		// Step 6 — validity is two surfaces: when checkValidity() has flipped
-		// `error` (gated by `shouldShowError`), the control must visibly carry
-		// the invalid treatment AND render the message. Platform validity is
-		// set in checkValidity(); this paints the user-facing half.
 		const showError = this.error && !!this.validationMessage
 		const errorRing = showError ? ' rounded outline outline-2 outline-error-default' : ''
+		const label = this.displayLabel()
 
 		return html`
 			<div class="relative ${this.disabled ? 'opacity-60 pointer-events-none' : ''}">
 				<!-- Screen reader announcements -->
-				<div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
-					${this.announceMessage}
-				</div>
+				<div class="sr-only" role="status" aria-live="polite" aria-atomic="true">${this.announceMessage}</div>
 
-				<!-- Collapsed: icon-only on mobile when collapse=true -->
+				<!-- Collapsed: icon-only on narrow viewports when collapse=true -->
 				<schmancy-icon-button
 					class="${this.collapse ? 'lg:hidden' : 'hidden'}${errorRing}"
 					variant="outlined"
 					type="button"
 					aria-invalid=${showError ? 'true' : 'false'}
-					aria-label="Select date range. Current: ${this.selectedDateRange || 'No date selected'}"
+					aria-label="Select date range. Current: ${label}"
 					@click=${(e: MouseEvent) => this.toggleDropdown(e)}
 					?disabled=${this.disabled}
 				>
-				date_range
+					date_range
 				</schmancy-icon-button>
 
-				<!-- Full UI: always visible when collapse=false, or lg+ when collapse=true -->
+				<!-- Full trigger row: [← | range label | →] -->
 				<section
-					@click=${(event: Event) => event.stopPropagation()}
+					@click=${(ev: Event) => ev.stopPropagation()}
 					aria-invalid=${showError ? 'true' : 'false'}
-					class="${this.collapse ? 'hidden lg:flex' : 'flex'}${errorRing}">
-						<schmancy-icon-button
-							type="button"
-							aria-label="Previous ${this.activePreset ? this.activePreset.toLowerCase() : 'date range'}"
-							@click=${(e: Event) => this.shiftDateRange(-1, e)}
-							?disabled=${this.disabled || !this.dateFrom.value || !this.dateTo.value || !this.canNavigateBackward()}
-						>
-							arrow_left
-						</schmancy-icon-button>
-
-						<schmancy-button
-							class="w-max"
-							variant="outlined"
-							type="button"
-							aria-haspopup="menu"
-							aria-expanded=${this.isOpen}
-							aria-label="Select date range. Current: ${this.selectedDateRange || 'No date selected'}"
-							aria-readonly="${this.step !== undefined}"
-							@click=${(e: MouseEvent) => this.toggleDropdown(e)}
-							?disabled=${this.disabled}
-							style="${this.step !== undefined ? 'cursor: default;' : ''}"
-						>
-							${this.selectedDateRange || this.placeholder}
-						</schmancy-button>
-
-						<schmancy-icon-button
-							type="button"
-							aria-label="Next ${this.activePreset ? this.activePreset.toLowerCase() : 'date range'}"
-							@click=${(e: Event) => this.shiftDateRange(1, e)}
-							?disabled=${this.disabled || !this.dateFrom.value || !this.dateTo.value || !this.canNavigateForward()}
-						>
-							arrow_right
-						</schmancy-icon-button>
+					class="${this.collapse ? 'hidden lg:flex' : 'flex'}${errorRing}"
+				>
+					<schmancy-icon-button
+						type="button"
+						aria-label="Previous ${this.preset ?? 'date range'}"
+						@click=${(e: Event) => this.shiftDateRange(-1, e)}
+						?disabled=${this.disabled || !this.start || !this.end || !this.canNavigateBackward()}
+					>
+						arrow_left
+					</schmancy-icon-button>
+
+					<schmancy-button
+						class="w-max"
+						variant="outlined"
+						type="button"
+						aria-haspopup="dialog"
+						aria-expanded=${this.isOpen}
+						aria-label="Select date range. Current: ${label}"
+						aria-readonly="${this.step !== undefined}"
+						@click=${(e: MouseEvent) => this.toggleDropdown(e)}
+						?disabled=${this.disabled}
+						style="${this.step !== undefined ? 'cursor:default;' : ''}"
+					>
+						${label}
+					</schmancy-button>
+
+					<schmancy-icon-button
+						type="button"
+						aria-label="Next ${this.preset ?? 'date range'}"
+						@click=${(e: Event) => this.shiftDateRange(1, e)}
+						?disabled=${this.disabled || !this.start || !this.end || !this.canNavigateForward()}
+					>
+						arrow_right
+					</schmancy-icon-button>
 				</section>
 
 				${showError
@@ -599,4 +517,10 @@ export class SchmancyDateRange extends SchmancyFormField() {
 			</div>
 		`
 	}
-}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-date-range': SchmancyDateRange
+	}
+}