@mhmo91/schmancy 0.10.14 → 0.10.16

package/src/{input → form/fields/input}/input.ts

@@ -1,9 +1,9 @@
-import { html, LitElement, nothing, PropertyValueMap, unsafeCSS } from 'lit'
+import { html, LitElement, nothing, unsafeCSS } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { createRef, ref } from 'lit/directives/ref.js'
 import { when } from 'lit/directives/when.js'
-import { distinctUntilChanged, filter, fromEvent, map, takeUntil } from 'rxjs'
+import { distinctUntilChanged, filter, fromEvent, map, takeUntil, timer } from 'rxjs'
 
 import { SchmancyFormField } from '@mixins/index'
 
@@ -147,16 +147,6 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 	@property({ type: String, reflect: true })
 	public size: InputSize = 'md'
 
-	/**
-	 * Controls when validation should show.
-	 * - 'always' - Always show validation
-	 * - 'touched' - Only show after field has been focused and then blurred
-	 * - 'dirty' - Only show after value has changed
-	 * - 'submitted' - Only show after form submission
-	 */
-	@property({ type: String })
-	public validateOn: 'always' | 'touched' | 'dirty' | 'submitted' = 'touched'
-
 	/**
 	 * For datalist support
 	 */
@@ -180,23 +170,8 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 	@state()
 	private isAutofilled = false
 
-	/**
-	 * Track user interaction state for validation
-	 */
-	@state()
-	private touched = false
-
-	@state()
-	private dirty = false
-
-	@state()
-	private submitted = false
-
-	/**
-	 * Store the default value for reset behavior
-	 */
-	@state()
-	private defaultValue = ''
+	// `touched`, `dirty`, `submitted`, and `validateOn` come from FormFieldMixin.
+	// `_defaultValue` (mixin) replaces the old `defaultValue` field.
 
 	// ----------------------------
 	//  D) Form-associated logic
@@ -206,95 +181,34 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 		delegatesFocus: true, // so focus() goes to <input>
 	}
 
-	private formResetObserver?: MutationObserver
-
 	/**
 	 * If user did not provide an ID, auto-generate one so <label for="...">
 	 * and various aria-* attributes can reference it.
 	 */
-	protected override willUpdate(changedProps: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
+	protected override willUpdate(changedProps: Map<PropertyKey, unknown>) {
 		if (!this.id) {
 			this.id = `sch-input-${SchmancyInput._idCounter++}`
 		}
-		super.willUpdate(changedProps)
+		super.willUpdate(changedProps as never)
 	}
 
 
-	protected override updated(changedProps: Map<string, unknown>) {
-		super.updated(changedProps)
-
-		// Handle value changes
-		if (changedProps.has('value')) {
-			// If value changes from original default, mark as dirty
-			if (this.value !== this.defaultValue) {
-				this.dirty = true
-			}
-
-			// Update validation state when value changes
-			this.validateInput()
-		}
-
-		// Store default value if this is the first update
-		if (!this.hasUpdated && changedProps.has('value')) {
-			this.defaultValue = this.value
-		}
-	}
+	// `updated()` removed — FormFieldMixin's `willUpdate` recomputes `dirty`,
+	// triggers `checkValidity()` when `_shouldShowError()` is true, and updates
+	// `:state(dirty)` automatically.
+	//
+	// Default value capture is also handled by the mixin (`firstUpdated` sets
+	// `_defaultValue` from `value`).
 
-	/**
-	 * Connect to the closest form element and set up form integration
-	 */
 	connectedCallback() {
 		super.connectedCallback()
 
-		// Store initial default value for form reset
-		this.defaultValue = this.value
-
-		// Set up form integration
-		this.setupFormIntegration()
-
-		// Setup for external label association
+		// Form reset and submit are now handled by the mixin via FACE callbacks
+		// (`formResetCallback`) and by `<schmancy-form>`'s submit sweep
+		// (`markSubmitted()`). No manual form listeners needed.
 		this.setupExternalLabelAssociation()
 	}
 
-	/**
-	 * Set up form integration with ElementInternals
-	 */
-	private setupFormIntegration() {
-		if (this.form) {
-			// Listen for form reset events
-			this.formResetObserver = new MutationObserver(mutations => {
-				for (const mutation of mutations) {
-					if (mutation.type === 'attributes' && mutation.attributeName === 'reset') {
-						this.resetToDefault()
-					}
-				}
-			})
-
-			// Observe the form for reset events
-			this.formResetObserver.observe(this.form, {
-				attributes: true,
-				childList: false,
-				subtree: false,
-			})
-
-			// Use RxJS for form reset events
-			fromEvent(this.form, 'reset')
-				.pipe(takeUntil(this.disconnecting))
-				.subscribe(() => {
-					this.resetToDefault()
-				})
-
-			// Use RxJS for form submit events to mark field as submitted
-			fromEvent(this.form, 'submit')
-				.pipe(takeUntil(this.disconnecting))
-				.subscribe(() => {
-					this.submitted = true
-					// Validate on form submission
-					this.validateInput(true)
-				})
-		}
-	}
-
 	/**
 	 * Set up external label association for native HTML label support
 	 */
@@ -324,149 +238,160 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 		}
 	}
 
-	disconnectedCallback() {
-		super.disconnectedCallback()
-
-		// Clean up the form observer
-		if (this.formResetObserver) {
-			this.formResetObserver.disconnect()
-		}
-
-		// Note: RxJS subscriptions are automatically cleaned up via takeUntil(this.disconnecting)
-		// No manual removeEventListener calls needed for RxJS-managed events
-	}
+	// `disconnectedCallback`, `resetToDefault`, `shouldShowValidation`, and
+	// `validateInput` are gone — the mixin's `willUpdate` runs `checkValidity()`
+	// at the right moments (Phase 2/3/4 of the validation contract) and
+	// `formResetCallback` → `resetForm()` handles reset.
 
 	/**
-	 * Reset the input to its default state
+	 * Check validity. Folds in the inner native input's structured
+	 * `ValidityState` flags (`typeMismatch`, `patternMismatch`, `tooShort`,
+	 * `tooLong`, `rangeUnderflow`, `rangeOverflow`, `stepMismatch`, `badInput`)
+	 * via `internals.setValidity` so consumers can target specific flags via
+	 * `field.validity.<flag>` and `:state(value-missing|type-mismatch|…)`.
+	 *
+	 * The visual `error` flag is still gated by the mixin's `_shouldShowError()`.
 	 */
-	private resetToDefault() {
-		this.value = this.defaultValue
-		this.touched = false
-		this.dirty = false
-		this.submitted = false
-		this.error = false
-		this.validationMessage = ''
-		this.dispatchEvent(new CustomEvent('reset', { bubbles: true }))
-	}
-
 	/**
-	 * Determines if validation errors should be shown based on current state
-	 * and validation strategy
+	 * Re-run checkValidity AFTER render so the native inner input's `.value`
+	 * binding has propagated. The mixin's willUpdate fires checkValidity too
+	 * early — at that point native.validity still reflects the previous value.
 	 */
-	private shouldShowValidation(forceValidation = false): boolean {
-		if (forceValidation) return true
-
-		switch (this.validateOn) {
-			case 'always':
-				return true
-			case 'touched':
-				return this.touched
-			case 'dirty':
-				return this.dirty
-			case 'submitted':
-				return this.submitted
-			default:
-				return this.touched
+	protected override updated(changedProps: Map<PropertyKey, unknown>) {
+		super.updated?.(changedProps)
+		if (
+			changedProps.has('value') ||
+			changedProps.has('required') ||
+			changedProps.has('type') ||
+			changedProps.has('pattern') ||
+			changedProps.has('min') ||
+			changedProps.has('max') ||
+			changedProps.has('minlength') ||
+			changedProps.has('maxlength')
+		) {
+			this.checkValidity()
 		}
 	}
 
-
 	/**
-	 * Validate input based on required, pattern, etc.
-	 * This mimics native validation behavior
+	 * Pick the first matching `errorMessages` override for the failing flags.
+	 * Order matches the natural priority of validity flags (valueMissing
+	 * before more specific ones — empty trumps malformed).
 	 */
-	private validateInput(forceValidation = false) {
-		// Skip validation for disabled inputs
-		if (this.disabled) return
-
-		// Only show validation errors if we should based on the validation strategy
-		const shouldValidate = this.shouldShowValidation(forceValidation)
-
-		// Get validity state from internal input if available
-		const validity: ValidityState = this.inputElement?.validity ?? {
-			badInput: false,
-			customError: false,
-			patternMismatch: false,
-			rangeOverflow: false,
-			rangeUnderflow: false,
-			stepMismatch: false,
-			tooLong: false,
-			tooShort: false,
-			typeMismatch: false,
-			valid: true,
-			valueMissing: false,
-		}
-
-		// Check if the input has an actual validation error (not a custom error)
-		const hasError = !validity.valid && !validity.customError
-
-		if (shouldValidate && hasError) {
-			// There's an error and we should show it
-			this.error = true
-			this.validationMessage = this.inputElement?.validationMessage || ''
-		} else if (validity.valid) {
-			// Input is valid, so clear the error state
-			this.error = false
-
-			// Only clear validation message if there's no custom error
-			if (!validity.customError) {
-				this.validationMessage = ''
-			}
-		} else if (!shouldValidate) {
-			// We shouldn't show validation yet, so clear visual error state
-			this.error = false
-		}
-
-		// The mixin will handle updating internals based on error state
+	private _firstMatchingErrorMessage(v: ValidityState): string | undefined {
+		const m = this.errorMessages
+		if (!m) return undefined
+		if (v.valueMissing && m.valueMissing) return m.valueMissing
+		if (v.typeMismatch && m.typeMismatch) return m.typeMismatch
+		if (v.patternMismatch && m.patternMismatch) return m.patternMismatch
+		if (v.tooShort && m.tooShort) return m.tooShort
+		if (v.tooLong && m.tooLong) return m.tooLong
+		if (v.rangeUnderflow && m.rangeUnderflow) return m.rangeUnderflow
+		if (v.rangeOverflow && m.rangeOverflow) return m.rangeOverflow
+		if (v.stepMismatch && m.stepMismatch) return m.stepMismatch
+		if (v.badInput && m.badInput) return m.badInput
+		return undefined
 	}
 
-	/**
-	 * Check validity without showing validation UI
-	 */
 	public override checkValidity() {
-		// Check internal input first
-		const inputValid = this.inputRef.value?.checkValidity() ?? true
+		// Prefer @query (always live) over @ref (may lag during initial paint).
+		const native = this.inputElement ?? this.inputRef.value
+		const v = native?.validity
+		if (v && !v.valid) {
+			// Surface the native flags. valueMissing also surfaces here when
+			// `required` + empty — overrides the mixin's coarse check.
+			const flags: ValidityStateFlags = {
+				valueMissing: v.valueMissing || undefined,
+				typeMismatch: v.typeMismatch || undefined,
+				patternMismatch: v.patternMismatch || undefined,
+				tooShort: v.tooShort || undefined,
+				tooLong: v.tooLong || undefined,
+				rangeUnderflow: v.rangeUnderflow || undefined,
+				rangeOverflow: v.rangeOverflow || undefined,
+				stepMismatch: v.stepMismatch || undefined,
+				badInput: v.badInput || undefined,
+				customError: v.customError || undefined,
+			}
+			// errorMessages override: pick the first matching flag and use the
+			// consumer-provided copy. Falls back to the native browser message.
+			const overrideMessage = this._firstMatchingErrorMessage(v)
+			this.internals?.setValidity(
+				flags,
+				overrideMessage || native.validationMessage || this.validationMessage || 'Invalid value',
+			)
+			if (this._shouldShowError()) {
+				this.error = true
+				// Always reflect the current flag's message — previous
+				// validationMessage may be stale (different flag).
+				const newMessage = overrideMessage || native.validationMessage
+				if (newMessage) this.validationMessage = newMessage
+				// Mirror flags into :state() so CSS can target specifics.
+				for (const flag of [
+					'value-missing',
+					'type-mismatch',
+					'pattern-mismatch',
+					'too-short',
+					'too-long',
+					'range-underflow',
+					'range-overflow',
+					'step-mismatch',
+					'bad-input',
+				]) {
+					this.internals?.states.delete(flag)
+				}
+				if (v.valueMissing) this.internals?.states.add('value-missing')
+				if (v.typeMismatch) this.internals?.states.add('type-mismatch')
+				if (v.patternMismatch) this.internals?.states.add('pattern-mismatch')
+				if (v.tooShort) this.internals?.states.add('too-short')
+				if (v.tooLong) this.internals?.states.add('too-long')
+				if (v.rangeUnderflow) this.internals?.states.add('range-underflow')
+				if (v.rangeOverflow) this.internals?.states.add('range-overflow')
+				if (v.stepMismatch) this.internals?.states.add('step-mismatch')
+				if (v.badInput) this.internals?.states.add('bad-input')
+			}
+			return false
+		}
 
-		// Call parent implementation for basic validation
+		// Native says valid — but the mixin's `required` check might still
+		// fire (mixin checks `value === ''` directly, native may treat empty
+		// differently for type=email/url with no value).
 		const parentValid = super.checkValidity()
-
-		return inputValid && parentValid
+		if (parentValid) {
+			// Clear specific-flag :state() entries.
+			for (const flag of [
+				'value-missing',
+				'type-mismatch',
+				'pattern-mismatch',
+				'too-short',
+				'too-long',
+				'range-underflow',
+				'range-overflow',
+				'step-mismatch',
+				'bad-input',
+			]) {
+				this.internals?.states.delete(flag)
+			}
+		}
+		return parentValid
 	}
 
 	/**
-	 * Show validation UI and check validity
+	 * Show validation UI and check validity.
+	 * Marks the field as submitted so the mixin's gate flips to "always show."
 	 */
 	public override reportValidity() {
-		// Mark as touched and submitted to show validation
-		this.touched = true
-		this.submitted = true
-
-		// First check using native input
+		this.markSubmitted()
 		const inputValid = this.inputRef.value?.reportValidity() ?? true
-
-		// Update our component's validation state with force=true
-		this.validateInput(true)
-
-		// Call parent implementation
 		const parentValid = super.reportValidity()
-
 		return inputValid && parentValid
 	}
 
-	/**
-	 * Set a custom validation error message
-	 */
+	/** Set a custom validation error on both the inner input and the mixin. */
 	public override setCustomValidity(message: string) {
-		// Set on the native input
 		if (this.inputRef.value) {
 			this.inputRef.value.setCustomValidity(message)
 		}
-
-		// Call parent implementation
 		super.setCustomValidity(message)
-		
-		// Update error state based on validation strategy
-		this.error = message !== '' && this.shouldShowValidation()
 	}
 
 	// ----------------------------
@@ -475,10 +400,10 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 	firstUpdated() {
 		// Autofocus if desired
 		if (this.autofocus) {
-			// Use setTimeout to match browser behavior - autofocus happens after initial rendering
-			setTimeout(() => {
-				this.focus()
-			}, 0)
+			// Schedule focus after initial render — RxJS timer for cancel-on-disconnect.
+			timer(0)
+				.pipe(takeUntil(this.disconnecting))
+				.subscribe(() => this.focus())
 		}
 
 		// Subscribe to input events
@@ -515,8 +440,7 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 				// Update component value
 				this.value = eventData.value
 
-				// Mark as dirty when user types
-				this.dirty = this.value !== this.defaultValue
+				// `dirty` is a getter on the mixin (value vs _defaultValue) — no manual set.
 
 				// Fire custom 'input' event with extended details
 				const customEvent = new CustomEvent<EventDetails>('input', {
@@ -534,8 +458,8 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 
 				this.dispatchEvent(customEvent)
 
-				// Run validation like native inputs do on input, but respect the validation strategy
-				this.validateInput()
+				// Mixin's willUpdate runs checkValidity() on value-change when
+				// _shouldShowError() is true — no manual validateInput() call.
 			})
 
 		// Subscribe to native change events (usually on blur)
@@ -551,13 +475,8 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 			)
 			.subscribe(value => {
 				this.value = value
-				this.dirty = this.value !== this.defaultValue
-
-				// Fire regular change event using mixin helper
 				this.emitChange({ value })
-
-				// Run validation on change like native inputs
-				this.validateInput()
+				// Validation runs automatically via mixin's willUpdate.
 			})
 	}
 
@@ -586,13 +505,9 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 		fromEvent<FocusEvent>(this.inputElement, 'blur')
 			.pipe(takeUntil(this.disconnecting))
 			.subscribe(ev => {
-				// Mark as touched when field loses focus
-				this.touched = true
-
-				// Run validation on blur like native inputs, respecting validation strategy
-				if (!this.disabled) {
-					this.validateInput()
-				}
+				// Mark as touched on blur — mixin's willUpdate handles the rest
+				// (validates if dirty, broadcasts :state(touched), etc.).
+				this.markTouched()
 
 				// Create a custom blur event that includes standard props
 				const blurEvent = new CustomEvent('blur', {
@@ -624,7 +539,7 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 				const { value } = ev.target as HTMLInputElement
 				this.value = value
 				this.isAutofilled = true
-				this.dirty = this.value !== this.defaultValue
+				// `dirty` is a getter on the mixin — recomputes from value vs _defaultValue.
 
 				// Dispatch autofill event for integration with autofill systems
 				this.dispatchEvent(
@@ -663,10 +578,9 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 			.subscribe(ev => {
 				const { value } = ev.target as HTMLInputElement
 				
-				// Update value if changed
+				// Update value if changed (mixin recomputes dirty automatically)
 				if (this.value !== value) {
 					this.value = value
-					this.dirty = this.value !== this.defaultValue
 				}
 				
 				// Blur the input to trigger change event naturally
@@ -927,6 +841,7 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 						<div
 							id="hint-${this.id}"
 							class="mt-1 text-sm ${this.error ? 'text-error-default' : 'text-surface-onVariant'}"
+							role=${ifDefined(this.error ? 'alert' : undefined)}
 						>
 							${this.error && this.validationMessage ? this.validationMessage : this.hint}
 						</div>

package/src/{radio-group → form/fields/radio-group}/radio-button.ts

@@ -1,7 +1,7 @@
 import { SchmancyElement } from '@mixins/index'
 import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import { FormFieldMixin } from '../../mixins/formField.mixin'
+import { FormFieldMixin } from '@mixins/formField.mixin'
 import { fromEvent, takeUntil } from 'rxjs'
 
 /**

package/src/{radio-group → form/fields/radio-group}/radio-group.ts

@@ -4,7 +4,7 @@ import { Subject, fromEvent, takeUntil } from 'rxjs'
 import style from './radio-group.scss?inline'
 import { SchmancyElement } from '@mixins/index'
 import { when } from 'lit/directives/when.js'
-import { FormFieldMixin } from '../../mixins/formField.mixin'
+import { FormFieldMixin } from '@mixins/formField.mixin'
 
 export type SchmancyRadioGroupOption = {
 	label: string

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

@@ -0,0 +1,90 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import './range'
+import { expectNoA11yViolations } from '../../../test-utils/a11y'
+
+const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
+
+describe('schmancy-range', () => {
+	let host: HTMLDivElement
+
+	beforeEach(() => {
+		host = document.createElement('div')
+		document.body.appendChild(host)
+	})
+
+	afterEach(() => {
+		host.remove()
+	})
+
+	it('is form-associated and contributes its value to FormData', async () => {
+		host.innerHTML = `
+			<form>
+				<schmancy-range name="volume" min="0" max="100" value="42"></schmancy-range>
+			</form>
+		`
+		const form = host.querySelector('form') as HTMLFormElement
+		await nextUpdate()
+		await nextUpdate()
+		expect(new FormData(form).get('volume')).toBe('42')
+	})
+
+	it('reports value as number on the property', async () => {
+		host.innerHTML = `<schmancy-range value="0.5" min="0" max="1" step="0.01"></schmancy-range>`
+		const r = host.querySelector('schmancy-range') as HTMLElement & { value: number }
+		await nextUpdate()
+		expect(r.value).toBe(0.5)
+		expect(typeof r.value).toBe('number')
+	})
+
+	it('fires change with numeric detail on input', async () => {
+		host.innerHTML = `<schmancy-range min="0" max="10" step="1" value="3"></schmancy-range>`
+		const r = host.querySelector('schmancy-range') as HTMLElement & {
+			updateComplete: Promise<boolean>
+		}
+		await r.updateComplete
+		let detail: { value: number } | undefined
+		r.addEventListener('change', (e: Event) => {
+			detail = (e as CustomEvent).detail
+		})
+		const input = r.shadowRoot!.querySelector('input[type=range]') as HTMLInputElement
+		input.value = '7'
+		input.dispatchEvent(new Event('input', { bubbles: true }))
+		await nextUpdate()
+		expect(detail).toEqual({ value: 7 })
+	})
+
+	it('respects disabled attribute on inner input', async () => {
+		host.innerHTML = `<schmancy-range disabled value="5"></schmancy-range>`
+		const r = host.querySelector('schmancy-range') as HTMLElement & {
+			updateComplete: Promise<boolean>
+		}
+		await r.updateComplete
+		const input = r.shadowRoot!.querySelector('input[type=range]') as HTMLInputElement
+		expect(input.disabled).toBe(true)
+	})
+
+	it('has no axe-core a11y violations', async () => {
+		host.innerHTML = `<schmancy-range label="Volume" min="0" max="100" value="42"></schmancy-range>`
+		const r = host.querySelector('schmancy-range') as HTMLElement & { updateComplete: Promise<boolean> }
+		await r.updateComplete
+		await expectNoA11yViolations(host)
+	})
+
+	it('resets to default value on form reset', async () => {
+		host.innerHTML = `
+			<form>
+				<schmancy-range name="x" value="5" min="0" max="10"></schmancy-range>
+			</form>
+		`
+		const form = host.querySelector('form') as HTMLFormElement
+		const r = host.querySelector('schmancy-range') as HTMLElement & { value: number }
+		await nextUpdate()
+		await nextUpdate()
+		r.value = 8
+		await nextUpdate()
+		form.reset()
+		await nextUpdate()
+		await nextUpdate()
+		expect(r.value).toBe(5)
+	})
+})