@mhmo91/schmancy 0.10.42 → 0.10.44

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

@@ -1,146 +1,600 @@
-import { afterEach, beforeEach, describe, expect, it } from 'vitest'
-import './date-range'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { expectNoA11yViolations } from '../../../test-utils/a11y'
+import type { SchmancyDateRange } from './date-range'
+import './date-range'
+// Ensure schmancy-overlay is registered in this page's customElements registry
+// (the decorator in overlay.component runs on import, which is required before
+// show() can create a functional overlay element in browser tests).
+import '../../../overlay/overlay.component'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
 
 const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
 
+/** Mount a <schmancy-date-range> in a host div appended to body. */
+async function mountEl(innerHTML: string): Promise<HTMLDivElement> {
+	const host = document.createElement('div')
+	host.innerHTML = innerHTML
+	document.body.appendChild(host)
+	const el = host.querySelector('schmancy-date-range') as SchmancyDateRange
+	await nextUpdate()
+	await nextUpdate()
+	if (el && 'updateComplete' in el) await (el as unknown as { updateComplete: Promise<unknown> }).updateComplete
+	return host
+}
+
+const dr = (root: HTMLElement): SchmancyDateRange =>
+	root.querySelector('schmancy-date-range') as SchmancyDateRange
+
+// ---------------------------------------------------------------------------
+// Suites
+// ---------------------------------------------------------------------------
+
 describe('schmancy-date-range', () => {
-	let host: HTMLDivElement
+	const hosts: HTMLDivElement[] = []
 
-	beforeEach(() => {
-		host = document.createElement('div')
-		document.body.appendChild(host)
+	afterEach(async () => {
+		for (const h of hosts) h.remove()
+		hosts.length = 0
+		// Flush microtasks so overlay.finalize's queueMicrotask(() => el.remove()) runs,
+		// then remove any stray overlay elements left in the DOM.
+		await nextUpdate()
+		document.querySelectorAll('schmancy-overlay').forEach(o => o.remove())
 	})
 
-	afterEach(() => {
-		host.remove()
+	async function mount(innerHTML: string): Promise<HTMLDivElement> {
+		const host = await mountEl(innerHTML)
+		hosts.push(host)
+		return host
+	}
+
+	// -------------------------------------------------------------------------
+	describe('FormData contract', () => {
+		it('contributes ${name}.start and ${name}.end when both set', async () => {
+			const host = await mount('<form><schmancy-date-range name="window"></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = '2026-01-31'
+			await el.updateComplete
+			const fd = new FormData(form)
+			expect(fd.get('window.start')).toBe('2026-01-01')
+			expect(fd.get('window.end')).toBe('2026-01-31')
+		})
+
+		it('omits empty endpoint from FormData', async () => {
+			const host = await mount('<form><schmancy-date-range name="window"></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = null
+			await el.updateComplete
+			const fd = new FormData(form)
+			expect(fd.get('window.start')).toBe('2026-01-01')
+			expect(fd.get('window.end')).toBeNull()
+		})
+
+		it('submits nothing when name is unset', async () => {
+			const host = await mount('<form><schmancy-date-range></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = '2026-01-31'
+			await el.updateComplete
+			expect([...new FormData(form).keys()]).toEqual([])
+		})
+
+		it('submits nothing when disabled', async () => {
+			const host = await mount('<form><schmancy-date-range name="window" disabled></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = '2026-01-31'
+			await el.updateComplete
+			expect([...new FormData(form).keys()]).toEqual([])
+		})
 	})
 
-	it('contributes flat-suffix dateFrom/dateTo entries to FormData', async () => {
-		host.innerHTML = `
-			<form>
-				<schmancy-date-range name="window"></schmancy-date-range>
-			</form>
-		`
-		const form = host.querySelector('form') as HTMLFormElement
-		const dr = host.querySelector('schmancy-date-range') as HTMLElement & {
-			dateFrom: { label: string; value: string }
-			dateTo: { label: string; value: string }
-		}
-		await nextUpdate()
-		await nextUpdate()
-		dr.dateFrom = { label: 'From', value: '2026-01-01' }
-		dr.dateTo = { label: 'To', value: '2026-01-31' }
-		await nextUpdate()
-		await nextUpdate()
-		const fd = new FormData(form)
-		expect(fd.get('windowFrom')).toBe('2026-01-01')
-		expect(fd.get('windowTo')).toBe('2026-01-31')
+	// -------------------------------------------------------------------------
+	describe('validity', () => {
+		it('is invalid when required and both endpoints empty', async () => {
+			const host = await mount('<form><schmancy-date-range name="w" required></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			await el.updateComplete
+			expect(el.checkValidity()).toBe(false)
+			expect(form.checkValidity()).toBe(false)
+		})
+
+		it('becomes valid once both endpoints are set', async () => {
+			const host = await mount('<form><schmancy-date-range name="w" required></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = '2026-01-02'
+			await el.updateComplete
+			expect(el.checkValidity()).toBe(true)
+			expect(form.checkValidity()).toBe(true)
+		})
+
+		it('renders invalid surface with the ACTUAL message after markSubmitted', async () => {
+			const host = await mount('<form><schmancy-date-range name="w" required></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			await el.updateComplete
+
+			// Platform surface blocks submit
+			expect(form.checkValidity()).toBe(false)
+
+			// Rendered surface gates on submit (validateOn default)
+			el.markSubmitted()
+			el.checkValidity()
+			await el.updateComplete
+			await nextUpdate()
+
+			const root = el.shadowRoot!
+			const alert = root.querySelector('[role="alert"]')
+			expect(alert, 'role=alert must render').not.toBeNull()
+			expect(alert?.textContent?.trim()).toBe('Please select a complete date range.')
+			expect(
+				root.querySelector('section.outline-error-default'),
+				'control must carry invalid treatment',
+			).not.toBeNull()
+		})
+
+		it('clears both validity surfaces once both endpoints set', async () => {
+			const host = await mount('<form><schmancy-date-range name="w" required></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			await el.updateComplete
+			el.markSubmitted()
+			el.checkValidity()
+			await el.updateComplete
+
+			el.start = '2026-01-01'
+			el.end = '2026-01-31'
+			await el.updateComplete
+			await nextUpdate()
+
+			expect(form.checkValidity()).toBe(true)
+			expect(el.shadowRoot!.querySelector('[role="alert"]')).toBeNull()
+			expect(el.shadowRoot!.querySelector('section.outline-error-default')).toBeNull()
+		})
 	})
 
-	it('omits from FormData when name is not set', async () => {
-		host.innerHTML = `<form><schmancy-date-range></schmancy-date-range></form>`
-		const form = host.querySelector('form') as HTMLFormElement
-		await nextUpdate()
-		expect([...new FormData(form).keys()]).toEqual([])
+	// -------------------------------------------------------------------------
+	describe('events', () => {
+		it('change event detail carries {start, end, preset}', async () => {
+			const host = await mount('<schmancy-date-range name="window"></schmancy-date-range>')
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = '2026-01-07'
+			await el.updateComplete
+
+			const received: CustomEvent[] = []
+			el.addEventListener('change', (e) => received.push(e as CustomEvent))
+
+			// PageDown keyboard shortcut triggers shiftDateRange → commitRange → change event
+			el.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'PageDown', bubbles: true, cancelable: true }),
+			)
+			await el.updateComplete
+
+			expect(received.length).toBeGreaterThan(0)
+			const detail = received[received.length - 1].detail as {
+				start: string | null
+				end: string | null
+				preset: string | null
+			}
+			expect(detail).toHaveProperty('start')
+			expect(detail).toHaveProperty('end')
+			expect(detail).toHaveProperty('preset')
+		})
+
+		it('change event is composed (crosses shadow boundary)', async () => {
+			const host = await mount('<form><schmancy-date-range name="window"></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = '2026-01-07'
+			await el.updateComplete
+
+			const received: CustomEvent[] = []
+			form.addEventListener('change', (e) => received.push(e as CustomEvent))
+
+			el.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'PageDown', bubbles: true, cancelable: true }),
+			)
+			await el.updateComplete
+
+			expect(received.length).toBeGreaterThan(0)
+			expect(received[received.length - 1].composed).toBe(true)
+			expect(received[received.length - 1].detail).toHaveProperty('start')
+			expect(received[received.length - 1].detail).toHaveProperty('end')
+			expect(received[received.length - 1].detail).toHaveProperty('preset')
+		})
+
+		// -----------------------------------------------------------------------
+		// input event — provisional sweep-preview contract
+		// -----------------------------------------------------------------------
+
+		it('input event detail carries exactly {start, end} — no preset field', async () => {
+			const host = await mount('<schmancy-date-range name="window"></schmancy-date-range>')
+			const el = dr(host)
+			await el.updateComplete
+
+			// Open the picker. Fire a pointerdown on the document first so the
+			// ambient-anchor capture in overlay.service records a MouseEvent with
+			// clientX/clientY, then use schmancy-button's overridden click() so the
+			// composed Event reaches toggleDropdown the same way the CTA wiring test
+			// does (btn.click() calls SchmancyButton.click() → dispatchEvent).
+			const btn = el.shadowRoot!.querySelector('schmancy-button') as HTMLElement
+			document.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, composed: true, clientX: 10, clientY: 10 }))
+			btn.click()
+			await el.updateComplete
+			await nextUpdate()
+
+			const inputReceived: CustomEvent[] = []
+			const changeReceived: CustomEvent[] = []
+			el.addEventListener('input', (e) => inputReceived.push(e as CustomEvent))
+			el.addEventListener('change', (e) => changeReceived.push(e as CustomEvent))
+
+			// The overlay appends to document.body (or schmancy-theme). Wait for the
+			// dialog to appear inside the overlay's shadow root.
+			const dialog = await vi.waitFor(
+				() => {
+					for (const o of document.querySelectorAll('schmancy-overlay')) {
+						const d = o.shadowRoot?.querySelector('schmancy-date-range-dialog')
+						if (d) return d
+					}
+					throw new Error('dialog not mounted yet')
+				},
+				{ timeout: 2000 },
+			)
+
+			// Drive the bridge seam: dispatch the `calendar-input` event that
+			// schmancy-date-range-dialog re-emits from schmancy-calendar's `input`.
+			// The date-range @calendar-input handler re-emits as `input {start, end}`.
+			dialog.dispatchEvent(
+				new CustomEvent('calendar-input', {
+					detail: { start: '2026-06-01', end: '2026-06-15' },
+					bubbles: true,
+					composed: true,
+				}),
+			)
+			await el.updateComplete
+
+			// Must have fired at least one input event.
+			expect(inputReceived.length, 'input event must fire for sweep preview').toBeGreaterThan(0)
+
+			const detail = inputReceived[inputReceived.length - 1].detail as Record<string, unknown>
+			// Exact shape: {start, end} — no preset field.
+			expect(detail.start).toBe('2026-06-01')
+			expect(detail.end).toBe('2026-06-15')
+			expect(Object.keys(detail).toSorted()).toEqual(['end', 'start'])
+
+			// change must NOT have fired — provisional sweep is not a commit.
+			expect(changeReceived.length, 'change must not fire for provisional sweep').toBe(0)
+		})
+
+		it('input event is composed: true so it crosses the shadow boundary a <schmancy-form> listens across', async () => {
+			const host = await mount('<form><schmancy-date-range name="window"></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			await el.updateComplete
+
+			// Open the picker — same pointerdown + btn.click() pattern as the first test.
+			const btn2 = el.shadowRoot!.querySelector('schmancy-button') as HTMLElement
+			document.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, composed: true, clientX: 10, clientY: 10 }))
+			btn2.click()
+			await el.updateComplete
+			await nextUpdate()
+
+			const dialog = await vi.waitFor(
+				() => {
+					for (const o of document.querySelectorAll('schmancy-overlay')) {
+						const d = o.shadowRoot?.querySelector('schmancy-date-range-dialog')
+						if (d) return d
+					}
+					throw new Error('dialog not mounted yet')
+				},
+				{ timeout: 2000 },
+			)
+
+			// Listen at the form boundary — outside the component's shadow root.
+			const formReceived: Event[] = []
+			form.addEventListener('input', (e) => formReceived.push(e))
+
+			dialog.dispatchEvent(
+				new CustomEvent('calendar-input', {
+					detail: { start: '2026-07-01', end: '2026-07-10' },
+					bubbles: true,
+					composed: true,
+				}),
+			)
+			await el.updateComplete
+
+			const last = formReceived[formReceived.length - 1] as CustomEvent<{ start: string; end: string }>
+			expect(formReceived.length, 'input must cross shadow boundary (composed: true)').toBeGreaterThan(0)
+			expect(last.composed).toBe(true)
+			expect(last.detail.start).toBe('2026-07-01')
+			expect(last.detail.end).toBe('2026-07-10')
+		})
 	})
 
-	it('reports invalid when required and both dates empty', async () => {
-		host.innerHTML = `<form><schmancy-date-range name="w" required></schmancy-date-range></form>`
-		const form = host.querySelector('form') as HTMLFormElement
-		const dr = host.querySelector('schmancy-date-range') as HTMLElement & {
-			dateFrom: { label: string; value: string }
-			dateTo: { label: string; value: string }
-			checkValidity(): boolean
-		}
-		await nextUpdate()
-		await nextUpdate()
-		dr.dateFrom = { label: 'From', value: '' }
-		dr.dateTo = { label: 'To', value: '' }
-		await nextUpdate()
-		expect(dr.checkValidity()).toBe(false)
-		expect(form.checkValidity()).toBe(false)
-		dr.dateFrom = { label: 'From', value: '2026-01-01' }
-		dr.dateTo = { label: 'To', value: '2026-01-02' }
-		await nextUpdate()
-		await nextUpdate()
-		expect(dr.checkValidity()).toBe(true)
-		expect(form.checkValidity()).toBe(true)
+	// -------------------------------------------------------------------------
+	describe('CTA wiring', () => {
+		it('clicking the label button sets aria-expanded=true', async () => {
+			const host = await mount('<schmancy-date-range name="window"></schmancy-date-range>')
+			const el = dr(host)
+			await el.updateComplete
+
+			const btn = el.shadowRoot!.querySelector('schmancy-button') as HTMLElement
+			expect(btn).not.toBeNull()
+
+			btn.click()
+			await el.updateComplete
+			await nextUpdate()
+
+			expect(
+				el.shadowRoot!.querySelector('[aria-expanded="true"]'),
+				'aria-expanded must be true after CTA click',
+			).not.toBeNull()
+		})
 	})
 
-	it('paints both validity surfaces when required, empty, and submitted', async () => {
-		host.innerHTML = `<form><schmancy-date-range name="w" required></schmancy-date-range></form>`
-		const form = host.querySelector('form') as HTMLFormElement
-		const dr = host.querySelector('schmancy-date-range') as HTMLElement & {
-			dateFrom: { label: string; value: string }
-			dateTo: { label: string; value: string }
-			markSubmitted(): void
-			checkValidity(): boolean
-		}
-		await nextUpdate()
-		await nextUpdate()
-		dr.dateFrom = { label: 'From', value: '' }
-		dr.dateTo = { label: 'To', value: '' }
-		await nextUpdate()
+	// -------------------------------------------------------------------------
+	describe('teardown', () => {
+		it('stops responding to document keydown after disconnect', async () => {
+			const host = await mount('<schmancy-date-range name="window"></schmancy-date-range>')
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = '2026-01-07'
+			await el.updateComplete
 
-		// Platform surface: the form blocks submit.
-		expect(form.checkValidity()).toBe(false)
+			const received: Event[] = []
+			el.addEventListener('change', (e) => received.push(e))
 
-		// Rendered surface is gated until submit (validateOn default 'dirty').
-		dr.markSubmitted()
-		dr.checkValidity()
-		await nextUpdate()
-		await nextUpdate()
+			el.remove()
 
-		const root = (dr as unknown as { shadowRoot: ShadowRoot }).shadowRoot
-		const alert = root.querySelector('[role="alert"]')
-		expect(alert, 'a role=alert message must render').not.toBeNull()
-		expect(alert?.textContent?.trim()).toBe('Please select a date range.')
-		// Control itself carries a visible invalid treatment.
-		expect(
-			root.querySelector('section.outline-error-default'),
-			'the control must carry an invalid treatment',
-		).not.toBeNull()
-
-		// Filling the range clears both surfaces.
-		dr.dateFrom = { label: 'From', value: '2026-01-01' }
-		dr.dateTo = { label: 'To', value: '2026-01-31' }
-		await nextUpdate()
-		await nextUpdate()
-		expect(form.checkValidity()).toBe(true)
-		expect(root.querySelector('[role="alert"]')).toBeNull()
-		expect(root.querySelector('section.outline-error-default')).toBeNull()
+			document.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'PageDown', bubbles: true, cancelable: true }),
+			)
+			await nextUpdate()
+
+			expect(received).toHaveLength(0)
+		})
 	})
 
-	it('has no axe-core a11y violations', async () => {
-		host.innerHTML = `<schmancy-date-range name="window"></schmancy-date-range>`
-		await nextUpdate()
-		await nextUpdate()
-		// Trigger button-group rendering with values populated.
-		const dr = host.querySelector('schmancy-date-range') as HTMLElement & {
-			dateFrom: { label: string; value: string }
-			dateTo: { label: string; value: string }
-		}
-		dr.dateFrom = { label: 'From', value: '2026-01-01' }
-		dr.dateTo = { label: 'To', value: '2026-01-31' }
-		await nextUpdate()
-		await nextUpdate()
-		await expectNoA11yViolations(host)
+	// -------------------------------------------------------------------------
+	describe('axe-core accessibility', () => {
+		it('has no a11y violations', async () => {
+			const host = await mount('<schmancy-date-range name="window"></schmancy-date-range>')
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = '2026-01-31'
+			await el.updateComplete
+			await nextUpdate()
+			await expectNoA11yViolations(host)
+		})
 	})
 
-	it('omits empty dates from FormData', async () => {
-		host.innerHTML = `<form><schmancy-date-range name="w"></schmancy-date-range></form>`
-		const form = host.querySelector('form') as HTMLFormElement
-		const dr = host.querySelector('schmancy-date-range') as HTMLElement & {
-			dateFrom: { label: string; value: string }
-			dateTo: { label: string; value: string }
-		}
-		await nextUpdate()
-		dr.dateFrom = { label: 'From', value: '' }
-		dr.dateTo = { label: 'To', value: '' }
-		await nextUpdate()
-		const fd = new FormData(form)
-		expect(fd.get('wFrom')).toBeNull()
-		expect(fd.get('wTo')).toBeNull()
+	// -------------------------------------------------------------------------
+	describe('datetime-local', () => {
+		// Calendar pick → commits start-of-day / end-of-day YYYY-MM-DDTHH:mm
+		it('calendar pick commits start-of-day T00:00 and end-of-day T23:59', async () => {
+			const host = await mount('<schmancy-date-range name="dtw" type="datetime-local"></schmancy-date-range>')
+			const el = dr(host)
+			await el.updateComplete
+
+			// Open the picker.
+			const btn = el.shadowRoot!.querySelector('schmancy-button') as HTMLElement
+			document.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, composed: true, clientX: 10, clientY: 10 }))
+			btn.click()
+			await el.updateComplete
+			await nextUpdate()
+
+			const dialog = await vi.waitFor(
+				() => {
+					for (const o of document.querySelectorAll('schmancy-overlay')) {
+						const d = o.shadowRoot?.querySelector('schmancy-date-range-dialog')
+						if (d) return d
+					}
+					throw new Error('dialog not mounted yet')
+				},
+				{ timeout: 2000 },
+			)
+
+			// Dispatch the calendar `change` event on the schmancy-calendar element inside
+			// the dialog's shadow root so it routes through handleCalendarChange, which is
+			// responsible for converting YYYY-MM-DD → YYYY-MM-DDTHH:mm when type="datetime-local".
+			const calendar = dialog.shadowRoot?.querySelector('schmancy-calendar')
+			expect(calendar, 'schmancy-calendar must be in the dialog shadow root').not.toBeNull()
+
+			const changeReceived: CustomEvent[] = []
+			el.addEventListener('change', (e) => changeReceived.push(e as CustomEvent))
+
+			calendar!.dispatchEvent(
+				new CustomEvent('change', {
+					detail: { value: null, start: '2026-06-10', end: '2026-06-20' },
+					bubbles: true,
+					composed: true,
+				}),
+			)
+			await el.updateComplete
+
+			expect(changeReceived.length, 'change must fire after calendar pick').toBeGreaterThan(0)
+			const detail = changeReceived[changeReceived.length - 1].detail as {
+				start: string | null
+				end: string | null
+				preset: string | null
+			}
+			expect(detail.start).toBe('2026-06-10T00:00')
+			expect(detail.end).toBe('2026-06-20T23:59')
+			expect(detail.preset).toBeNull()
+		})
+
+		// Typed path edits time without moving the date.
+		it('typed datetime-local input replaces time component without moving the date', async () => {
+			const host = await mount('<schmancy-date-range name="dtw" type="datetime-local"></schmancy-date-range>')
+			const el = dr(host)
+			el.start = '2026-06-10T00:00'
+			el.end = '2026-06-20T23:59'
+			await el.updateComplete
+
+			// Open the picker.
+			const btn = el.shadowRoot!.querySelector('schmancy-button') as HTMLElement
+			document.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, composed: true, clientX: 10, clientY: 10 }))
+			btn.click()
+			await el.updateComplete
+			await nextUpdate()
+
+			const dialog = await vi.waitFor(
+				() => {
+					for (const o of document.querySelectorAll('schmancy-overlay')) {
+						const d = o.shadowRoot?.querySelector('schmancy-date-range-dialog')
+						if (d) return d
+					}
+					throw new Error('dialog not mounted yet')
+				},
+				{ timeout: 2000 },
+			)
+
+			// Simulate the typed From input changing the time (same date, different time).
+			// handleFromChange dispatches `calendar-change` directly with the full datetime
+			// value from the input, preserving the date part and replacing the time.
+			// We dispatch `calendar-change` at the dialog bridge seam (same approach used
+			// in the existing `input event` tests) to verify the contract end-to-end.
+			const changeReceived: CustomEvent[] = []
+			el.addEventListener('change', (e) => changeReceived.push(e as CustomEvent))
+
+			dialog.dispatchEvent(
+				new CustomEvent('calendar-change', {
+					// The typed input produces a full YYYY-MM-DDTHH:mm value; the dialog
+					// passes this through unchanged (no T-injection since it already has T).
+					detail: { start: '2026-06-10T09:30', end: '2026-06-20T23:59' },
+					bubbles: true,
+					composed: true,
+				}),
+			)
+			await el.updateComplete
+
+			expect(changeReceived.length).toBeGreaterThan(0)
+			const detail = changeReceived[changeReceived.length - 1].detail as {
+				start: string | null
+				end: string | null
+			}
+			// Date part preserved; time replaced.
+			expect(detail.start).toBe('2026-06-10T09:30')
+			expect(detail.end).toBe('2026-06-20T23:59')
+		})
+
+		// FormData carries YYYY-MM-DDTHH:mm ISO entries.
+		it('FormData ${name}.start and ${name}.end carry datetime ISO strings', async () => {
+			const host = await mount(
+				'<form><schmancy-date-range name="dtw" type="datetime-local"></schmancy-date-range></form>',
+			)
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			el.start = '2026-06-10T09:30'
+			el.end = '2026-06-20T18:00'
+			await el.updateComplete
+			const fd = new FormData(form)
+			expect(fd.get('dtw.start')).toBe('2026-06-10T09:30')
+			expect(fd.get('dtw.end')).toBe('2026-06-20T18:00')
+		})
+
+		// Default presets are rebuilt with datetime format when type changes.
+		it('default presets use YYYY-MM-DDTHH:mm format when type="datetime-local"', async () => {
+			const host = await mount('<schmancy-date-range name="dtw"></schmancy-date-range>')
+			const el = dr(host)
+			// Initially type=date; presets are YYYY-MM-DD.
+			expect(el.presets[0].start).toMatch(/^\d{4}-\d{2}-\d{2}$/)
+
+			// Switch to datetime-local; presets should rebuild.
+			el.type = 'datetime-local'
+			await el.updateComplete
+
+			expect(el.presets[0].start).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/)
+			expect(el.presets[0].end).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/)
+		})
+
+		// usingDefaultPresets race: setting type + presets in the same willUpdate cycle
+		// must leave the consumer's presets intact (not overwritten by rebuilt defaults).
+		it('consumer presets survive when type and presets are set together', async () => {
+			const host = await mount('<schmancy-date-range name="dtw"></schmancy-date-range>')
+			const el = dr(host)
+			await el.updateComplete
+
+			const customPresets = [
+				{ id: 'q1', label: 'Q1 2026', start: '2026-01-01', end: '2026-03-31' },
+				{ id: 'q2', label: 'Q2 2026', start: '2026-04-01', end: '2026-06-30' },
+			]
+
+			// Set both type and presets in the same microtask so they arrive in one willUpdate.
+			el.type = 'datetime-local'
+			el.presets = customPresets
+			await el.updateComplete
+
+			// Consumer's presets must survive — not replaced by datetime-formatted defaults.
+			expect(el.presets).toHaveLength(2)
+			expect(el.presets[0].id).toBe('q1')
+			expect(el.presets[0].start).toBe('2026-01-01')
+			expect(el.presets[1].id).toBe('q2')
+		})
+
+		// Calendar pick in datetime mode — no double T insertion if already includes T.
+		it('dialog passes through already-formatted datetime values unchanged', async () => {
+			const host = await mount('<schmancy-date-range name="dtw" type="datetime-local"></schmancy-date-range>')
+			const el = dr(host)
+			el.start = '2026-06-10T00:00'
+			el.end = '2026-06-20T23:59'
+			await el.updateComplete
+
+			const btn = el.shadowRoot!.querySelector('schmancy-button') as HTMLElement
+			document.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, composed: true, clientX: 10, clientY: 10 }))
+			btn.click()
+			await el.updateComplete
+			await nextUpdate()
+
+			const dialog = await vi.waitFor(
+				() => {
+					for (const o of document.querySelectorAll('schmancy-overlay')) {
+						const d = o.shadowRoot?.querySelector('schmancy-date-range-dialog')
+						if (d) return d
+					}
+					throw new Error('dialog not mounted yet')
+				},
+				{ timeout: 2000 },
+			)
+
+			const calendar = dialog.shadowRoot?.querySelector('schmancy-calendar')
+			expect(calendar, 'schmancy-calendar must be in the dialog shadow root').not.toBeNull()
+
+			const changeReceived: CustomEvent[] = []
+			el.addEventListener('change', (e) => changeReceived.push(e as CustomEvent))
+
+			// Dispatch calendar change with a value that already contains T — must NOT
+			// become 2026-06-10T00:00T00:00. The dialog's handleCalendarChange guards with
+			// `!start.includes('T')` so already-formatted values pass through unchanged.
+			calendar!.dispatchEvent(
+				new CustomEvent('change', {
+					detail: { value: null, start: '2026-06-10T00:00', end: '2026-06-20T23:59' },
+					bubbles: true,
+					composed: true,
+				}),
+			)
+			await el.updateComplete
+
+			expect(changeReceived.length).toBeGreaterThan(0)
+			const detail = changeReceived[changeReceived.length - 1].detail as {
+				start: string | null
+				end: string | null
+			}
+			expect(detail.start).toBe('2026-06-10T00:00')
+			expect(detail.end).toBe('2026-06-20T23:59')
+		})
 	})
 })