@mhmo91/schmancy 0.9.5 → 0.9.7

package/src/date-range/date-range-helpers.ts

@@ -1,5 +1,4 @@
 import dayjs from 'dayjs'
-import { PresetUnit } from './date-range-presets'
 
 /**
  * Format a date range into a human-readable string
@@ -63,73 +62,3 @@ export function detectDateRangeType(fromDate: dayjs.Dayjs, toDate: dayjs.Dayjs):
 	}
 }
 
-/**
- * Calculate the appropriate shift unit and amount for a date range
- */
-export function calculateShiftParams(
-	fromDate: dayjs.Dayjs,
-	toDate: dayjs.Dayjs,
-	activePresetStep?: PresetUnit
-): { unit: PresetUnit; amount: number } {
-	if (activePresetStep) {
-		return { unit: activePresetStep, amount: 1 }
-	}
-
-	const rangeDurationInDays = toDate.diff(fromDate, 'day')
-
-	// For very long ranges, use years
-	if (rangeDurationInDays >= 360) {
-		return { unit: 'year', amount: Math.round(rangeDurationInDays / 365) }
-	}
-	// For long ranges, use quarters
-	else if (rangeDurationInDays >= 90) {
-		return { unit: 'quarter', amount: Math.round(rangeDurationInDays / 90) }
-	}
-	// For medium-long ranges, use months
-	else if (rangeDurationInDays >= 30) {
-		return { unit: 'month', amount: Math.round(rangeDurationInDays / 30) }
-	}
-	// For medium ranges, use weeks
-	else if (rangeDurationInDays >= 7) {
-		return { unit: 'week', amount: Math.round(rangeDurationInDays / 7) }
-	}
-	// For shorter ranges, use days
-	else {
-		return { unit: 'day', amount: rangeDurationInDays + 1 }
-	}
-}
-
-/**
- * Helper method to safely add/subtract quarter values
- */
-export function adjustQuarter(date: dayjs.Dayjs, amount: number, direction: 1 | -1): dayjs.Dayjs {
-	// Get current quarter (1-4)
-	const currentQuarter = date.quarter()
-
-	// Calculate new quarter
-	let newQuarter = currentQuarter + direction * amount
-	let yearAdjustment = 0
-
-	// Handle year boundaries
-	while (newQuarter > 4) {
-		newQuarter -= 4
-		yearAdjustment += 1
-	}
-
-	while (newQuarter < 1) {
-		newQuarter += 4
-		yearAdjustment -= 1
-	}
-
-	// Adjust year if needed
-	const adjustedDate = date.add(yearAdjustment, 'year')
-
-	// Set to the start of the new quarter
-	const newDate = adjustedDate.month((newQuarter - 1) * 3)
-
-	// Maintain the same day of month if possible
-	const daysInMonth = newDate.daysInMonth()
-	const targetDay = Math.min(date.date(), daysInMonth)
-
-	return newDate.date(targetDay)
-}

package/src/dialog/dialog-base.mixin.ts

@@ -77,6 +77,15 @@ export const DialogBase = <T extends Constructor<LitElement & IBaseMixin>>(super
 		// Animation guard
 		private animating = false
 
+		/** ElementInternals — used for broadcasting `:state(open)` to consumers. */
+		protected dialogInternals: ElementInternals | undefined = (() => {
+			try {
+				return this.attachInternals()
+			} catch {
+				return undefined
+			}
+		})()
+
 		/**
 		 * Check if the dialog is currently animating
 		 */
@@ -285,6 +294,7 @@ export const DialogBase = <T extends Constructor<LitElement & IBaseMixin>>(super
 			await this.updateComplete
 
 			this.setAttribute('active', '')
+			this.dialogInternals?.states.add('open')
 			await this.updateComplete
 
 			// Save focus and set siblings to inert for focus trap
@@ -443,6 +453,7 @@ export const DialogBase = <T extends Constructor<LitElement & IBaseMixin>>(super
 			this.animating = false
 
 			this.removeAttribute('active')
+			this.dialogInternals?.states.delete('open')
 
 			// Restore inert siblings
 			for (const el of this.inertSiblings) {

package/src/dialog/dialog.component.ts

@@ -1,5 +1,5 @@
 import { $LitElement } from '@mixins/index'
-import { css, html } from 'lit'
+import { css, html, nothing } from 'lit'
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js'
 import { cursorGlow } from '../directives/cursor-glow'
 import { createRef, ref, type Ref } from 'lit/directives/ref.js'
@@ -126,6 +126,13 @@ export class SchmancyDialog extends DialogBase(
 	 */
 	private _dragHandleRef: Ref<HTMLElement> = createRef()
 
+	/**
+	 * Stable per-instance id used for ARIA labelledby/describedby wiring
+	 */
+	private readonly _a11yId = `schmancy-dialog-${Math.random().toString(36).slice(2, 10)}`
+	private get _titleId() { return `${this._a11yId}-title` }
+	private get _descId() { return `${this._a11yId}-desc` }
+
 	/**
 	 * Return the dialog element for positioning/size measurement.
 	 * In content mode, returns the first slotted child (the actual component).
@@ -268,10 +275,23 @@ export class SchmancyDialog extends DialogBase(
 
 		// Confirm mode: with title/buttons
 		if (this.isConfirmMode) {
+			const hasTitle = !!this.title?.trim()
+			const hasSubtitle = !!this.subtitle?.trim()
+			const hasMessage = !!this.message?.trim()
+			const describedBy = [hasSubtitle && this._descId + '-sub', hasMessage && this._descId + '-msg']
+				.filter(Boolean)
+				.join(' ') || ''
 			return html`
 				<div ${ref(this._backdropRef)} class="fixed inset-0 bg-surface-container/10 backdrop-blur-lg backdrop-saturate-150 backdrop-brightness-105" @click=${this.handleClose}></div>
 
-				<div ${ref(this._confirmDialogRef)} class=${this.classMap(dialogClasses)} role="alertdialog" aria-modal="true">
+				<div
+					${ref(this._confirmDialogRef)}
+					class=${this.classMap(dialogClasses)}
+					role="alertdialog"
+					aria-modal="true"
+					aria-labelledby=${hasTitle ? this._titleId : nothing}
+					aria-describedby=${describedBy || nothing}
+				>
 					<schmancy-surface
 						${cursorGlow({ radius: 250, intensity: 0.1 })}
 						rounded=${this.isMobile ? 'top' : 'all'}
@@ -283,13 +303,13 @@ export class SchmancyDialog extends DialogBase(
 						<schmancy-scroll direction="vertical" hide class="p-4 pt-2">
 							<schmancy-form @submit=${this.handleConfirm}>
 								${when(
-									this.title?.trim(),
+									hasTitle,
 									() => html`
-										<schmancy-typography type="title" token="md" class="mb-1">${this.title}</schmancy-typography>
+										<schmancy-typography id=${this._titleId} type="title" token="md" class="mb-1">${this.title}</schmancy-typography>
 										${when(
-											this.subtitle?.trim(),
+											hasSubtitle,
 											() => html`
-												<schmancy-typography type="subtitle" token="xs" class="mb-2">
+												<schmancy-typography id="${this._descId}-sub" type="subtitle" token="xs" class="mb-2">
 													${this.subtitle}
 												</schmancy-typography>
 											`,
@@ -299,8 +319,8 @@ export class SchmancyDialog extends DialogBase(
 								${hasCustomContent
 									? html`<div class="mb-4"><slot name="content"></slot></div>`
 									: when(
-											this.message?.trim(),
-											() => html`<schmancy-typography type="body" class="mb-4">${this.message}</schmancy-typography>`,
+											hasMessage,
+											() => html`<schmancy-typography id="${this._descId}-msg" type="body" class="mb-4">${this.message}</schmancy-typography>`,
 										)}
 								<div class=${buttonContainerClasses}>
 									<schmancy-button

package/src/dropdown/dropdown-content.ts

@@ -6,7 +6,9 @@ import { customElement, property } from 'lit/decorators.js'
  * Content container for the schmancy-dropdown component.
  *
  * @element schmancy-dropdown-content
- * @slot - Default slot for dropdown content
+ * @slot - Default slot for dropdown content.
+ * @csspart content - The inner wrapper element; style to override panel
+ *   backgrounds, shadows, padding, or borders without shadow-root piercing.
  */
 @customElement('schmancy-dropdown-content')
 export class SchmancyDropdownContent extends TailwindElement(css`

package/src/form/form.test.ts

@@ -0,0 +1,137 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import './form'
+import '../input/input'
+import '../button/button'
+import '../checkbox/checkbox'
+
+describe('schmancy-form', () => {
+	let host: HTMLDivElement
+
+	beforeEach(() => {
+		host = document.createElement('div')
+		document.body.appendChild(host)
+	})
+
+	afterEach(() => {
+		host.remove()
+	})
+
+	const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
+
+	it('wraps children in a real light-DOM <form>', async () => {
+		host.innerHTML = `
+			<schmancy-form>
+				<schmancy-checkbox name="agree"></schmancy-checkbox>
+			</schmancy-form>
+		`
+		const sf = host.querySelector('schmancy-form') as HTMLElement & { form: HTMLFormElement | null }
+		await nextUpdate()
+		expect(sf.form).toBeInstanceOf(HTMLFormElement)
+		expect(sf.querySelector(':scope > form')).toBe(sf.form)
+		expect(sf.form!.querySelector('schmancy-checkbox')).toBeTruthy()
+	})
+
+	it('emits submit with FormData on native submission', async () => {
+		host.innerHTML = `
+			<schmancy-form>
+				<schmancy-checkbox name="agree"></schmancy-checkbox>
+				<button id="go" type="submit">Go</button>
+			</schmancy-form>
+		`
+		const sf = host.querySelector('schmancy-form') as HTMLElement
+		const cb = host.querySelector('schmancy-checkbox') as HTMLElement & { value: boolean }
+		cb.value = true
+		await nextUpdate()
+		await nextUpdate()
+
+		const submits: FormData[] = []
+		sf.addEventListener('submit', (e: Event) => {
+			submits.push((e as CustomEvent).detail as FormData)
+		})
+
+		const btn = host.querySelector('#go') as HTMLButtonElement
+		btn.click()
+
+		expect(submits).toHaveLength(1)
+		expect(submits[0].get('agree')).toBe('on')
+	})
+
+	it('blocks submit when a required field is empty', async () => {
+		host.innerHTML = `
+			<schmancy-form>
+				<schmancy-checkbox name="agree" required></schmancy-checkbox>
+				<button id="go" type="submit">Go</button>
+			</schmancy-form>
+		`
+		const sf = host.querySelector('schmancy-form') as HTMLElement
+		await nextUpdate()
+		await nextUpdate()
+
+		let submitCount = 0
+		sf.addEventListener('submit', () => submitCount++)
+
+		const btn = host.querySelector('#go') as HTMLButtonElement
+		btn.click()
+
+		expect(submitCount).toBe(0)
+	})
+
+	it('respects novalidate attribute', async () => {
+		host.innerHTML = `
+			<schmancy-form novalidate>
+				<schmancy-checkbox name="agree" required></schmancy-checkbox>
+				<button id="go" type="submit">Go</button>
+			</schmancy-form>
+		`
+		const sf = host.querySelector('schmancy-form') as HTMLElement
+		await nextUpdate()
+		await nextUpdate()
+
+		let submitCount = 0
+		sf.addEventListener('submit', () => submitCount++)
+
+		const btn = host.querySelector('#go') as HTMLButtonElement
+		btn.click()
+
+		expect(submitCount).toBe(1)
+	})
+
+	it('schmancy-button type=submit triggers form submission', async () => {
+		host.innerHTML = `
+			<schmancy-form>
+				<schmancy-input name="email" value="x@y.z" required></schmancy-input>
+				<schmancy-button id="sbtn" type="submit">Save</schmancy-button>
+			</schmancy-form>
+		`
+		const sf = host.querySelector('schmancy-form') as HTMLElement
+		const btn = host.querySelector('#sbtn') as HTMLElement
+		await nextUpdate()
+		await nextUpdate()
+
+		let submitted = false
+		sf.addEventListener('submit', () => (submitted = true))
+
+		btn.click()
+		await nextUpdate()
+
+		expect(submitted).toBe(true)
+	})
+
+	it('dispatches a single submit event (no double-fire from native + custom)', async () => {
+		host.innerHTML = `
+			<schmancy-form>
+				<button id="go" type="submit">Go</button>
+			</schmancy-form>
+		`
+		const sf = host.querySelector('schmancy-form') as HTMLElement
+		await nextUpdate()
+
+		let count = 0
+		sf.addEventListener('submit', () => count++)
+
+		const btn = host.querySelector('#go') as HTMLButtonElement
+		btn.click()
+
+		expect(count).toBe(1)
+	})
+})

package/src/form/form.ts

@@ -1,189 +1,146 @@
-import { TailwindElement } from '@mixins/index'
-import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { fromEvent, merge, Subject, takeUntil, tap } from 'rxjs'
-
-export interface FormEventMap {
-	submit: CustomEvent<FormData>
-	reset: CustomEvent
-}
+import { customElement } from 'lit/decorators.js'
 
 /**
- * The form is a component used to collect user input from
- * interactive controls.
+ * A thin ergonomic wrapper around a native `<form>` element. Its children are
+ * reparented into a `<form>` element in light DOM on connection, so:
  *
- * @element schmancy-form
+ * - Form-associated custom elements (FACE) resolve their `internals.form`
+ *   correctly via native DOM ancestry.
+ * - `new FormData(form)` collects values from every FACE + native control
+ *   without any manual walking.
+ * - `form.reset()` triggers `formResetCallback()` on every FACE.
+ * - `form.reportValidity()` runs native validation UI.
+ * - `<button type="submit">` and `<schmancy-button type="submit">` both
+ *   submit the form via the native submitter pipeline.
  *
- * @slot - Default slot for the form.
+ * This component exists only to translate the native `submit` / `reset`
+ * events into the Schmancy event shape (`detail: FormData`). All heavy
+ * lifting is the platform's.
  *
- * @fires submit - Emitted when the form is submitted.
- * @fires reset - Emitted when the form is reset.
+ * @element schmancy-form
+ * @fires submit - `CustomEvent<FormData>` emitted when the form is submitted.
+ * @fires reset - Emitted after the underlying form resets.
  */
 @customElement('schmancy-form')
-export default class SchmancyForm extends TailwindElement() {
-	private $disconnecting = new Subject()
-	public static readonly tagName = 'schmancy-form'
-	protected static shadowRootOptions = {
-		...LitElement.shadowRootOptions,
-		mode: 'open',
-		delegatesFocus: false,
+export default class SchmancyForm extends HTMLElement {
+	public static readonly tagName: string = 'schmancy-form'
+
+	private _form: HTMLFormElement | null = null
+	private _wrapped = false
+
+	/** ElementInternals for `:state(invalid)` / `:state(submitting)` broadcasting. */
+	private readonly _internals: ElementInternals | undefined = (() => {
+		try { return this.attachInternals() } catch { return undefined }
+	})()
+
+	/** Skip built-in constraint validation on submit. Mirrors `<form novalidate>`. */
+	get novalidate(): boolean {
+		return this.hasAttribute('novalidate')
+	}
+	set novalidate(value: boolean) {
+		if (value) this.setAttribute('novalidate', '')
+		else this.removeAttribute('novalidate')
 	}
 
-	private _controlsWithChecked = [
-		'input',
-		'radio',
-		'schmancy-radio',
-		'schmancy-switch',
-		'schmancy-checkbox',
-		'schmancy-radio-group',
-		'schmancy-autocomplete',
-		'schmancy-select',
-	]
-	private _controlsWithValue = [
-		'input',
-		'schmancy-input',
-		'schmancy-mask-input',
-		'textarea',
-		'schmancy-rating',
-		'schmancy-select',
-		'schmancy-combo',
-		'schmancy-date-time-input',
-		'schmancy-autocomplete',
-		'schmancy-checkbox',
-		'schmancy-select',
-	]
-	private _controlsThatSubmit = ['button', 'schmancy-input', 'schmancy-button', 'schmancy-icon-button']
-
-	/** Specifies if form data validation should be skipped on submit.
-	 * @attr novalidate
-	 * @type {boolean}
-	 * @public
+	connectedCallback(): void {
+		this.ensureForm()
+	}
+
+	disconnectedCallback(): void {
+		if (this._form) {
+			this._form.removeEventListener('submit', this._onSubmit)
+			this._form.removeEventListener('reset', this._onReset)
+		}
+	}
+
+	/**
+	 * On first connection, create the internal light-DOM `<form>` and move
+	 * existing children into it. Re-entry is a no-op.
 	 */
-	@property({ type: Boolean, reflect: true }) public novalidate = false
-
-	constructor() {
-		super()
-		merge(
-			fromEvent<MouseEvent>(this, 'click').pipe(
-				tap(e => {
-					if ((e.target as HTMLButtonElement).type?.toLowerCase() === 'submit') this.handleSubmitRequest(e)
-				}),
-			),
-			fromEvent<KeyboardEvent>(this, 'keydown').pipe(
-				tap(e => {
-					if (e.code === 'Enter' || e.key === 'Enter') {
-						this.handleSubmitRequest(e)
-					}
-				}),
-			),
-		)
-			.pipe(takeUntil(this.$disconnecting))
-			.subscribe()
+	private ensureForm(): void {
+		if (this._wrapped) return
+
+		// Respect an explicit consumer-supplied wrapping <form>.
+		const existing = Array.from(this.children).find(c => c instanceof HTMLFormElement) as
+			| HTMLFormElement
+			| undefined
+
+		const form = existing ?? document.createElement('form')
+		form.noValidate = true
+
+		if (!existing) {
+			// Snapshot children because appending mutates `this.childNodes`.
+			const children = Array.from(this.childNodes)
+			for (const node of children) form.appendChild(node)
+			this.appendChild(form)
+		}
+
+		form.addEventListener('submit', this._onSubmit)
+		form.addEventListener('reset', this._onReset)
+
+		this._form = form
+		this._wrapped = true
 	}
 
-	/** Submits the form. */
-	public submit(): boolean {
-		const formData = this.getFormData()
-		if (!this.novalidate && !this.reportValidity()) {
-			return false
+	private _onSubmit = (e: SubmitEvent): void => {
+		// Prevent the default navigation AND stop the native submit from
+		// bubbling past this wrapper — otherwise consumers listening for
+		// `submit` on <schmancy-form> would see the native event plus our
+		// CustomEvent (two fires per submission).
+		e.preventDefault()
+		e.stopPropagation()
+		if (!this.novalidate && !this._form!.reportValidity()) {
+			this._internals?.states.add('invalid')
+			return
+		}
+		this._internals?.states.delete('invalid')
+		this._internals?.states.add('submitting')
+		try {
+			this.dispatchEvent(
+				new CustomEvent('submit', {
+					detail: new FormData(this._form!),
+				}),
+			)
+		} finally {
+			this._internals?.states.delete('submitting')
 		}
-		this.dispatchEvent(new CustomEvent('submit', { detail: formData }))
-		return true
 	}
 
-	/** Resets the form. */
-	public reset() {
-		const formElements = this.getFormElements()
-		formElements.forEach(element => {
-			const tagName = element.tagName.toLowerCase()
-			if (tagName === 'select') {
-				for (let i = 0; i < element.options.length; i++) {
-					const option = element.options[i]
-					option.selected = option.defaultSelected
-				}
-			} else if (
-				(tagName === 'input' && (element.type === 'checkbox' || element.type == 'radio')) ||
-				(tagName !== 'input' && this._controlsWithChecked.includes(tagName))
-			) {
-				element.checked = element.hasAttribute('checked')
-			} else if (
-				tagName === 'schmancy-input' ||
-				tagName === 'schmancy-rating' ||
-				tagName === 'schmancy-mask-input' ||
-				tagName === 'schmancy-date-time-input'
-			) {
-				element.value = element.getAttribute('value')
-			} else if (this._controlsWithValue.includes(tagName)) {
-				element.value = element.defaultValue
-			}
-		})
+	private _onReset = (e: Event): void => {
+		e.stopPropagation()
+		this._internals?.states.delete('invalid')
 		this.dispatchEvent(new CustomEvent('reset'))
 	}
 
-	private getFormElements(): any[] {
-		const slot = this.shadowRoot?.querySelector('slot')
-		const assignedElements = slot?.assignedElements({ flatten: true })
-		const formElements: any[] = []
-		assignedElements?.forEach((element: any) => {
-			if (!element.disabled) {
-				formElements.push(element)
-			}
-			const children = Array.from(element.getElementsByTagName('*')).filter((element: any) => !element.disabled)
-			formElements.push(...children)
-		})
-
-		return formElements
+	/** Programmatically submit via the native submitter pipeline. */
+	public submit(): boolean {
+		if (!this._form) return false
+		if (!this.novalidate && !this._form.reportValidity()) return false
+		this._form.requestSubmit()
+		return true
 	}
 
-	public getFormData() {
-		const formData = new FormData()
-
-		const formElements = this.getFormElements()
-		formElements.forEach(element => {
-			const tagName = element.tagName.toLowerCase()
-			if (tagName === 'select') {
-				for (let i = 0; i < element.options.length; i++) {
-					const option = element.options[i]
-					if (option.selected) {
-						formData.append(element.name, option.value)
-					}
-				}
-			} else if (this._controlsWithChecked.includes(tagName) && element.checked) {
-				formData.append(element.name, element.value || 'on')
-			} else if (
-				this._controlsWithValue.includes(tagName) &&
-				element.type !== 'checkbox' &&
-				element.type !== 'radio' &&
-				element.type !== 'submit'
-			) {
-				formData.append(element.name, element.value)
-			}
-		})
-
-		return formData
+	/** Programmatically reset via native `form.reset()`. */
+	public reset(): void {
+		this._form?.reset()
 	}
 
-	/** Checks for validity of the form. */
 	public reportValidity(): boolean {
-		const formElements = this.getFormElements()
-		return !formElements.some(
-			element => typeof element.reportValidity === 'function' && element.reportValidity() === false,
-		)
+		return this._form?.reportValidity() ?? true
 	}
 
-	private handleSubmitRequest(event: MouseEvent | KeyboardEvent) {
-		const targetElement: any = event.target as HTMLElement
-		if (this._controlsThatSubmit.includes(targetElement.tagName.toLowerCase())) {
-			this.submit()
-		} else if (targetElement.type?.toLowerCase() === 'reset') {
-			this.reset()
-		}
+	public checkValidity(): boolean {
+		return this._form?.checkValidity() ?? true
+	}
 
-		return true
+	/** Snapshot of current form values. Equivalent to `new FormData(this.form)`. */
+	public getFormData(): FormData {
+		return this._form ? new FormData(this._form) : new FormData()
 	}
 
-	protected override render() {
-		return html`<slot></slot>`
+	/** The underlying `<form>` element (escape hatch for advanced integration). */
+	public get form(): HTMLFormElement | null {
+		return this._form
 	}
 }
 
@@ -192,3 +149,30 @@ declare global {
 		'schmancy-form': SchmancyForm
 	}
 }
+
+// === Retained type surface ===
+// These interfaces were part of the old collection-based engine. They're kept
+// exported because downstream code may still import them as documentation.
+// The new implementation no longer uses them internally.
+
+export interface FormElement extends HTMLElement {
+	name?: string
+	value?: string
+	disabled?: boolean
+	type?: string
+	defaultValue?: string
+}
+
+export interface CheckableFormElement extends FormElement {
+	checked?: boolean
+}
+
+export interface ValidatableFormElement extends FormElement {
+	reportValidity?: () => boolean
+	checkValidity?: () => boolean
+}
+
+export interface FormEventMap {
+	submit: CustomEvent<FormData>
+	reset: CustomEvent
+}

package/src/form/index.ts

@@ -1,2 +1,2 @@
-export * from './form-v2';
-export * from './form';
+export * from './form'
+export { default as SchmancyForm } from './form'