@mhmo91/schmancy 0.10.41 → 0.10.43

package/src/button/icon-button.ts

@@ -14,33 +14,42 @@ import { ButtonVariant } from './button'
  */
 @customElement('schmancy-icon-button')
 export class SchmnacyIconButton extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: inline-flex;
-		flex-shrink: 0;
-		border-radius: 9999px;
-		transition:
-			box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
-			transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
-	}
-	:host([width="full"]) {
-		display: flex;
-		width: 100%;
-	}
-	:host(:hover:not([disabled])) {
-		box-shadow: 0 2px 12px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 18%, transparent);
-	}
-	:host(:active:not([disabled])) {
-		transform: scale(0.92);
-		box-shadow: none;
-		transition-duration: 100ms;
-	}
-	@media (prefers-reduced-motion: reduce) {
-		:host { transition: none; }
-		:host(:hover:not([disabled])) { box-shadow: none; }
-		:host(:active:not([disabled])) { transform: none; box-shadow: none; }
-	}
-`]
+	static styles = [
+		css`
+			:host {
+				display: inline-flex;
+				flex-shrink: 0;
+				border-radius: 9999px;
+				transition:
+					box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
+					transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+			}
+			:host([width='full']) {
+				display: flex;
+				width: 100%;
+			}
+			:host(:hover:not([disabled])) {
+				box-shadow: 0 2px 12px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 18%, transparent);
+			}
+			:host(:active:not([disabled])) {
+				transform: scale(0.92);
+				box-shadow: none;
+				transition-duration: 100ms;
+			}
+			@media (prefers-reduced-motion: reduce) {
+				:host {
+					transition: none;
+				}
+				:host(:hover:not([disabled])) {
+					box-shadow: none;
+				}
+				:host(:active:not([disabled])) {
+					transform: none;
+					box-shadow: none;
+				}
+			}
+		`,
+	]
 
 	protected static shadowRootOptions = {
 		...LitElement.shadowRootOptions,
@@ -187,12 +196,11 @@ export class SchmnacyIconButton extends SchmancyElement {
 
 	render() {
 		// Map 'tonal' variant to 'filled tonal' for backwards compatibility
-		const effectiveVariant = this.variant === 'tonal' ? 'filled tonal' : this.variant;
+		const effectiveVariant = this.variant === 'tonal' ? 'filled tonal' : this.variant
 
 		// Compute classes for the interactive element.
 		const classes = {
-			'z-0 h-full transition-all duration-200 relative rounded-full inline-flex justify-center items-center gap-[8px] outline-secondary-default focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-hidden':
-				true,
+			'z-0 h-full transition-all duration-200 relative rounded-full inline-flex justify-center items-center gap-[8px] outline-secondary-default focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-hidden': true,
 			'opacity-[0.38]': this.disabled,
 			'cursor-pointer': !this.disabled,
 			'hover:shadow-xs':
@@ -209,22 +217,34 @@ export class SchmnacyIconButton extends SchmancyElement {
 			'bg-secondary-container text-secondary-onContainer': effectiveVariant === 'filled tonal',
 			'text-primary-default': effectiveVariant === 'text',
 			// M3 spec: 24dp (xxs) → 32dp (dense) → 40dp (default) → 48dp (standard) → 56dp (large)
-			'p-1.5': this.size === 'xxs',    // 6px padding  = 24px total (12px icon) - Ultra-compact
-			'p-2': this.size === 'xs',       // 8px padding  = 32px total (16px icon) - M3 dense
-			'p-2.5': this.size === 'sm',     // 10px padding = 40px total (20px icon) - M3 default
-			'p-3': this.size === 'md',       // 12px padding = 48px total (24px icon) - M3 standard
-			'p-4': this.size === 'lg',       // 16px padding = 56px total (24px icon) - M3 large
-			'p-5': this.size === 'xl',       // 20px padding = 80px total (40px icon) - custom XL
+			'p-1.5': this.size === 'xxs', // 6px padding  = 24px total (12px icon) - Ultra-compact
+			'p-2': this.size === 'xs', // 8px padding  = 32px total (16px icon) - M3 dense
+			'p-2.5': this.size === 'sm', // 10px padding = 40px total (20px icon) - M3 default
+			'p-3': this.size === 'md', // 12px padding = 48px total (24px icon) - M3 standard
+			'p-4': this.size === 'lg', // 16px padding = 56px total (24px icon) - M3 large
+			'p-5': this.size === 'xl', // 20px padding = 80px total (40px icon) - custom XL
 		}
 
 		const stateLayerClasses = {
 			'hover:opacity-[0.08] rounded-full z-0': true,
 			'hover:bg-primary-on': effectiveVariant === 'filled',
-			'hover:bg-primary-default': effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text',
+			'hover:bg-primary-default':
+				effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text',
 			'hover:bg-secondary-container': effectiveVariant === 'filled tonal',
 		}
 
-		const iconSizeClass = this.size === 'xxs' ? 'text-xs' : this.size === 'xs' ? 'text-base' : this.size === 'sm' ? 'text-xl' : this.size === 'md' ? 'text-2xl' : this.size === 'lg' ? 'text-2xl' : 'text-4xl';
+		const iconSizeClass =
+			this.size === 'xxs'
+				? 'text-xs'
+				: this.size === 'xs'
+					? 'text-base'
+					: this.size === 'sm'
+						? 'text-xl'
+						: this.size === 'md'
+							? 'text-2xl'
+							: this.size === 'lg'
+								? 'text-2xl'
+								: 'text-4xl'
 
 		// If href is provided, render an anchor element.
 		if (this.href) {
@@ -243,10 +263,9 @@ export class SchmnacyIconButton extends SchmancyElement {
 					${this.text
 						? html`<slot></slot>`
 						: html`
-							<slot style="display:none"></slot>
-							<schmancy-icon class=${iconSizeClass}>${this.icon || this.capturedIcon}</schmancy-icon>
-						`
-					}
+								<slot style="display:none"></slot>
+								<schmancy-icon class=${iconSizeClass}>${this.icon || this.capturedIcon}</schmancy-icon>
+							`}
 				</a>
 			`
 		}
@@ -266,10 +285,9 @@ export class SchmnacyIconButton extends SchmancyElement {
 				${this.text
 					? html`<slot></slot>`
 					: html`
-						<slot style="display:none"></slot>
-						<schmancy-icon class=${iconSizeClass}>${this.icon || this.capturedIcon}</schmancy-icon>
-					`
-				}
+							<slot style="display:none"></slot>
+							<schmancy-icon class=${iconSizeClass}>${this.icon || this.capturedIcon}</schmancy-icon>
+						`}
 			</button>
 		`
 	}

package/src/button/index.ts

@@ -1,2 +1,2 @@
-export * from './button'
-export * from './icon-button'
+export * from './button'
+export * from './icon-button'

package/src/calendar/calendar.test.ts

@@ -0,0 +1,504 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { expectNoA11yViolations } from '../test-utils/a11y'
+import type { SchmancyCalendar } from './calendar'
+import './calendar'
+
+const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
+
+const mount = async (attrs = ''): Promise<SchmancyCalendar> => {
+	const host = document.createElement('div')
+	host.innerHTML = `<schmancy-calendar ${attrs}></schmancy-calendar>`
+	document.body.appendChild(host)
+	const el = host.querySelector('schmancy-calendar') as SchmancyCalendar
+	await nextUpdate()
+	await nextUpdate()
+	return el
+}
+
+const cleanup = () => {
+	document.querySelectorAll('div[data-calendar-test]').forEach(el => el.remove())
+	// Remove all test hosts appended to body
+	document.body.querySelectorAll(':scope > div:not([id])').forEach(el => el.remove())
+}
+
+// Helper: click a specific day cell by ISO date string
+async function clickDay(el: SchmancyCalendar, iso: string) {
+	const cell = el.shadowRoot!.querySelector<HTMLElement>(`[aria-label="${iso}"]`)
+	expect(cell, `day cell for ${iso} not found`).toBeTruthy()
+	cell!.click()
+	await nextUpdate()
+	await nextUpdate()
+}
+
+// Helper: hover a specific day cell
+async function hoverDay(el: SchmancyCalendar, iso: string) {
+	const cell = el.shadowRoot!.querySelector<HTMLElement>(`[aria-label="${iso}"]`)
+	expect(cell, `day cell for ${iso} not found`).toBeTruthy()
+	cell!.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true, composed: true }))
+	await nextUpdate()
+}
+
+// ---------------------------------------------------------------------------
+// Collect events off the element
+// ---------------------------------------------------------------------------
+
+function captureEvent<T = unknown>(el: EventTarget, eventName: string): { events: CustomEvent<T>[]; stop: () => void } {
+	const events: CustomEvent<T>[] = []
+	const handler = (e: Event) => events.push(e as CustomEvent<T>)
+	el.addEventListener(eventName, handler)
+	return {
+		events,
+		stop: () => el.removeEventListener(eventName, handler),
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('schmancy-calendar', () => {
+	afterEach(() => cleanup())
+
+	// -----------------------------------------------------------------------
+	// Phase rendering (props-in)
+	// -----------------------------------------------------------------------
+	describe('phase rendering', () => {
+		it('renders the current month by default', async () => {
+			const el = await mount()
+			const shadow = el.shadowRoot!
+			const monthLabel = shadow.querySelector('[part="month-label"]')
+			expect(monthLabel).toBeTruthy()
+			// Should show at least one month label
+			expect(shadow.querySelectorAll('[data-month]').length).toBeGreaterThan(0)
+		})
+
+		it('renders multiple months in the scroll window', async () => {
+			const el = await mount()
+			const months = el.shadowRoot!.querySelectorAll('[data-month]')
+			// Default window is 3 months before + anchor + 9 months after = 13+
+			expect(months.length).toBeGreaterThanOrEqual(10)
+		})
+
+		it('renders weekday headers', async () => {
+			const el = await mount()
+			const weekdays = el.shadowRoot!.querySelectorAll('[part="weekday"]')
+			expect(weekdays.length).toBeGreaterThan(0)
+		})
+
+		it('marks today with day-today part', async () => {
+			const el = await mount()
+			await nextUpdate()
+			const today = el.shadowRoot!.querySelector('[part~="day-today"]')
+			expect(today).toBeTruthy()
+		})
+
+		it('single mode: marks the value date as selected', async () => {
+			const el = await mount()
+			el.mode = 'single'
+			el.value = '2026-05-15'
+			await nextUpdate()
+			await nextUpdate()
+			const selected = el.shadowRoot!.querySelector('[part~="day-selected"]')
+			expect(selected).toBeTruthy()
+			expect(selected!.getAttribute('aria-label')).toBe('2026-05-15')
+		})
+
+		it('range mode: marks start/end dates and in-range days', async () => {
+			const el = await mount()
+			el.mode = 'range'
+			el.start = '2026-05-10'
+			el.end = '2026-05-15'
+			await nextUpdate()
+			await nextUpdate()
+			const rangeStart = el.shadowRoot!.querySelector('[part~="day-range-start"]')
+			const rangeEnd = el.shadowRoot!.querySelector('[part~="day-range-end"]')
+			const inRange = el.shadowRoot!.querySelectorAll('[part~="day-in-range"]')
+			expect(rangeStart).toBeTruthy()
+			expect(rangeEnd).toBeTruthy()
+			// 2026-05-11 through 2026-05-14 = 4 days in-range
+			expect(inRange.length).toBe(4)
+		})
+
+		it('marks disabled days when min/max are set', async () => {
+			const el = await mount()
+			el.min = '2026-05-10'
+			el.max = '2026-05-20'
+			await nextUpdate()
+			await nextUpdate()
+			const disabled = el.shadowRoot!.querySelectorAll('[part~="day-disabled"]')
+			expect(disabled.length).toBeGreaterThan(0)
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// CTA wiring (event system works)
+	// -----------------------------------------------------------------------
+	describe('CTA wiring', () => {
+		it('a day cell is focusable and has a gridcell role', async () => {
+			const el = await mount()
+			const cell = el.shadowRoot!.querySelector('[role="gridcell"]')
+			expect(cell).toBeTruthy()
+			expect(cell!.getAttribute('tabindex')).toBe('0')
+		})
+
+		it('clicking an enabled day dispatches events', async () => {
+			const el = await mount()
+			el.mode = 'single'
+			await nextUpdate()
+			const { events, stop } = captureEvent<{ value: string | null; start: string | null; end: string | null }>(
+				el,
+				'change',
+			)
+			// Click any non-disabled day
+			const cell = el.shadowRoot!.querySelector<HTMLElement>('[role="gridcell"]:not([aria-disabled="true"])')
+			expect(cell).toBeTruthy()
+			cell!.click()
+			await nextUpdate()
+			expect(events.length).toBe(1)
+			stop()
+		})
+
+		it('disabled days do not dispatch events', async () => {
+			const el = await mount()
+			el.disabled = true
+			await nextUpdate()
+			const { events, stop } = captureEvent(el, 'change')
+			const cell = el.shadowRoot!.querySelector<HTMLElement>('[role="gridcell"]')
+			if (cell) cell.click()
+			await nextUpdate()
+			expect(events.length).toBe(0)
+			stop()
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// Single mode: input → change state machine
+	// -----------------------------------------------------------------------
+	describe('emits change (single mode)', () => {
+		it('click commits the date via change event', async () => {
+			const el = await mount()
+			el.mode = 'single'
+			await nextUpdate()
+			await nextUpdate()
+
+			const { events: changeEvents, stop: stopChange } = captureEvent<{
+				value: string | null
+				start: string | null
+				end: string | null
+			}>(el, 'change')
+
+			await clickDay(el, '2026-05-19')
+			expect(changeEvents.length).toBe(1)
+			expect(changeEvents[0].detail.value).toBe('2026-05-19')
+			expect(changeEvents[0].detail.start).toBeNull()
+			expect(changeEvents[0].detail.end).toBeNull()
+			stopChange()
+		})
+
+		it('change event bubbles and is composed', async () => {
+			const el = await mount()
+			el.mode = 'single'
+			await nextUpdate()
+			await nextUpdate()
+
+			let bubbled = false
+			document.body.addEventListener(
+				'change',
+				() => {
+					bubbled = true
+				},
+				{ once: true },
+			)
+			await clickDay(el, '2026-05-19')
+			expect(bubbled).toBe(true)
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// Range mode: input → change state machine
+	// -----------------------------------------------------------------------
+	describe('range state machine (input → change)', () => {
+		it('first click emits input with start set and end null', async () => {
+			const el = await mount()
+			el.mode = 'range'
+			await nextUpdate()
+			await nextUpdate()
+
+			const { events: inputEvents, stop } = captureEvent<{
+				value: string | null
+				start: string | null
+				end: string | null
+			}>(el, 'input')
+
+			await clickDay(el, '2026-05-10')
+			expect(inputEvents.length).toBeGreaterThanOrEqual(1)
+			const first = inputEvents[0]
+			expect(first.detail.start).toBe('2026-05-10')
+			expect(first.detail.end).toBeNull()
+			stop()
+		})
+
+		it('second click emits change with both start and end', async () => {
+			const el = await mount()
+			el.mode = 'range'
+			await nextUpdate()
+			await nextUpdate()
+
+			const { events: changeEvents, stop } = captureEvent<{
+				value: string | null
+				start: string | null
+				end: string | null
+			}>(el, 'change')
+
+			await clickDay(el, '2026-05-10')
+			await clickDay(el, '2026-05-15')
+
+			expect(changeEvents.length).toBe(1)
+			expect(changeEvents[0].detail.start).toBe('2026-05-10')
+			expect(changeEvents[0].detail.end).toBe('2026-05-15')
+			stop()
+		})
+
+		it('second click before first emits correctly ordered range', async () => {
+			const el = await mount()
+			el.mode = 'range'
+			await nextUpdate()
+			await nextUpdate()
+
+			const { events: changeEvents, stop } = captureEvent<{
+				value: string | null
+				start: string | null
+				end: string | null
+			}>(el, 'change')
+
+			// Click end before start — should swap
+			await clickDay(el, '2026-05-20')
+			await clickDay(el, '2026-05-10')
+
+			expect(changeEvents.length).toBe(1)
+			// Regardless of click order, start < end
+			expect(changeEvents[0].detail.start).toBe('2026-05-10')
+			expect(changeEvents[0].detail.end).toBe('2026-05-20')
+			stop()
+		})
+
+		it('hover between first click and second click emits input for preview', async () => {
+			const el = await mount()
+			el.mode = 'range'
+			await nextUpdate()
+			await nextUpdate()
+
+			await clickDay(el, '2026-05-10')
+
+			const { events: inputEvents, stop } = captureEvent<{
+				value: string | null
+				start: string | null
+				end: string | null
+			}>(el, 'input')
+
+			await hoverDay(el, '2026-05-15')
+			expect(inputEvents.length).toBeGreaterThanOrEqual(1)
+			// The latest input event should cover the preview span
+			const last = inputEvents[inputEvents.length - 1]
+			expect(last.detail.start).toBe('2026-05-10')
+			expect(last.detail.end).toBe('2026-05-15')
+			stop()
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// Range across a month boundary (the continuous-scroll case)
+	// -----------------------------------------------------------------------
+	describe('range across a month boundary', () => {
+		it('emits a correctly ordered change spanning two months', async () => {
+			const el = await mount()
+			el.mode = 'range'
+			await nextUpdate()
+			await nextUpdate()
+
+			const { events: changeEvents, stop } = captureEvent<{
+				value: string | null
+				start: string | null
+				end: string | null
+			}>(el, 'change')
+
+			// Click on the last day of April then the first day of June
+			await clickDay(el, '2026-04-30')
+			await clickDay(el, '2026-06-01')
+
+			expect(changeEvents.length).toBe(1)
+			expect(changeEvents[0].detail.start).toBe('2026-04-30')
+			expect(changeEvents[0].detail.end).toBe('2026-06-01')
+			stop()
+		})
+
+		it('in-range part spans across month boundaries after props are set', async () => {
+			const el = await mount()
+			el.mode = 'range'
+			el.start = '2026-04-28'
+			el.end = '2026-05-03'
+			await nextUpdate()
+			await nextUpdate()
+
+			const inRangeDays = el.shadowRoot!.querySelectorAll('[part~="day-in-range"]')
+			// 2026-04-29, 2026-04-30, 2026-05-01, 2026-05-02 = 4 days
+			expect(inRangeDays.length).toBe(4)
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// Scroll-driven `navigate` event
+	// -----------------------------------------------------------------------
+	describe('scroll-driven navigate', () => {
+		it('exposes a scroll container with part="scroll"', async () => {
+			const el = await mount()
+			const scroller = el.shadowRoot!.querySelector('[part="scroll"]')
+			expect(scroller).toBeTruthy()
+		})
+
+		it('navigate event fires when the scroller dispatches a scroll event', async () => {
+			const el = await mount()
+			await nextUpdate()
+			await nextUpdate()
+
+			const navigateEvents: Array<CustomEvent<{ month: string }>> = []
+			el.addEventListener('navigate', e => navigateEvents.push(e as CustomEvent<{ month: string }>))
+
+			// Dispatch a real scroll event on the public scroller element.
+			// This exercises the fromEvent(scroller, 'scroll') → dominantMonth → navigate path.
+			const scroller = el.shadowRoot!.querySelector<HTMLElement>('[part="scroll"]')
+			expect(scroller, 'scroller element must be present').toBeTruthy()
+
+			scroller!.dispatchEvent(new Event('scroll', { bubbles: false }))
+
+			// Wait for the debounce (50 ms) + animation frame + microtask
+			await new Promise<void>(r => setTimeout(r, 100))
+
+			// The navigate event must have fired with a valid YYYY-MM month string.
+			expect(navigateEvents.length).toBeGreaterThanOrEqual(1)
+			expect(navigateEvents[0].detail.month).toMatch(/^\d{4}-\d{2}$/)
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// Keyboard month traversal
+	// -----------------------------------------------------------------------
+	describe('keyboard month traversal', () => {
+		it('Enter on a day cell triggers the same action as a click (single mode)', async () => {
+			const el = await mount()
+			el.mode = 'single'
+			await nextUpdate()
+			await nextUpdate()
+
+			const { events: changeEvents, stop } = captureEvent<{
+				value: string | null
+				start: string | null
+				end: string | null
+			}>(el, 'change')
+
+			const cell = el.shadowRoot!.querySelector<HTMLElement>(`[aria-label="2026-05-19"]:not([aria-disabled="true"])`)
+			if (cell) {
+				cell.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true }))
+				await nextUpdate()
+				await nextUpdate()
+				expect(changeEvents.length).toBe(1)
+				expect(changeEvents[0].detail.value).toBe('2026-05-19')
+			}
+			stop()
+		})
+
+		it('Space on a day cell triggers click (single mode)', async () => {
+			const el = await mount()
+			el.mode = 'single'
+			await nextUpdate()
+			await nextUpdate()
+
+			const { events: changeEvents, stop } = captureEvent<{
+				value: string | null
+				start: string | null
+				end: string | null
+			}>(el, 'change')
+
+			const cell = el.shadowRoot!.querySelector<HTMLElement>(`[aria-label="2026-05-19"]:not([aria-disabled="true"])`)
+			if (cell) {
+				cell.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true, composed: true }))
+				await nextUpdate()
+				await nextUpdate()
+				expect(changeEvents.length).toBe(1)
+			}
+			stop()
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// Teardown
+	// -----------------------------------------------------------------------
+	describe('teardown', () => {
+		it('disconnecting completes the pipeline (no errors thrown on remove)', async () => {
+			const el = await mount()
+			await nextUpdate()
+			expect(() => el.parentElement?.removeChild(el)).not.toThrow()
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// Failure / edge cases
+	// -----------------------------------------------------------------------
+	describe('failure and edge cases', () => {
+		it('disabled=true disables all day cells', async () => {
+			const el = await mount()
+			el.disabled = true
+			await nextUpdate()
+			await nextUpdate()
+			const enabled = el.shadowRoot!.querySelectorAll('[role="gridcell"][tabindex="0"]')
+			expect(enabled.length).toBe(0)
+		})
+
+		it('readonly=true prevents click events from firing change', async () => {
+			const el = await mount()
+			el.mode = 'single'
+			el.readonly = true
+			await nextUpdate()
+			await nextUpdate()
+			const { events, stop } = captureEvent(el, 'change')
+			const cell = el.shadowRoot!.querySelector<HTMLElement>('[role="gridcell"]')
+			if (cell) cell.click()
+			await nextUpdate()
+			expect(events.length).toBe(0)
+			stop()
+		})
+
+		it('scroll container renders when min and max bound the window', async () => {
+			const el = await mount()
+			el.min = '2026-05-01'
+			el.max = '2026-05-31'
+			await nextUpdate()
+			await nextUpdate()
+			const months = el.shadowRoot!.querySelectorAll('[data-month]')
+			// Only one month in window
+			expect(months.length).toBe(1)
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// Accessibility
+	// -----------------------------------------------------------------------
+	describe('accessibility', () => {
+		it('has no axe-core violations in single mode (idle)', async () => {
+			const el = await mount()
+			await nextUpdate()
+			await nextUpdate()
+			await expectNoA11yViolations(el.parentElement!)
+		})
+
+		it('has no axe-core violations in range mode with a selection', async () => {
+			const el = await mount()
+			el.mode = 'range'
+			el.start = '2026-05-10'
+			el.end = '2026-05-15'
+			await nextUpdate()
+			await nextUpdate()
+			await expectNoA11yViolations(el.parentElement!)
+		})
+	})
+})