@mhmo91/schmancy 0.10.14 → 0.10.16

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

@@ -1,18 +1,17 @@
-import { SchmancyElement } from '@mixins/index'
-import { css, html } from 'lit'
+import { css, html, type PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
+import { SchmancyFormField } from '@mixins/index'
 
 export type SchmancyRangeChangeEvent = CustomEvent<{ value: number }>
 
 /**
  * @element schmancy-range
  * Range input (numeric slider).
- * @fires change - Fires on value change with { value: number }
+ * @fires change - Fires on value change with `{ value: number }`.
  */
 @customElement('schmancy-range')
-export class SchmancyRange extends SchmancyElement {
-	static styles = [css`
+export class SchmancyRange extends SchmancyFormField(css`
 	input[type='range'] {
 		-webkit-appearance: none;
 		appearance: none;
@@ -54,18 +53,37 @@ export class SchmancyRange extends SchmancyElement {
 		background: var(--color-primary, #6750a4);
 		cursor: pointer;
 	}
-`];
-	@property({ type: Number }) min = 0
-	@property({ type: Number }) max = 1
-	@property({ type: Number }) step = 0.01
-	@property({ type: Number }) value = 0
-	@property({ type: String }) label?: string
-	@property({ type: Boolean }) disabled = false
+`) {
+	// `formAssociated`, `internals`, `name`, `disabled`, `required`, `id`,
+	// `label`, `error`, `validationMessage`, `validateOn`, touched/dirty/submitted,
+	// `markTouched/markSubmitted`, `formResetCallback`, FIELD_CONNECT_EVENT
+	// dispatch — all from the mixin.
+
+	@property({ type: Number }) min: number = 0
+	@property({ type: Number }) max: number = 1
+	@property({ type: Number }) step: number = 0.01
+
+	/** Numeric value — narrowed override of the mixin's wide value union. */
+	@property({ type: Number, reflect: true })
+	override value: number = 0
 
 	private get progress(): string {
 		return `${((this.value - this.min) / (this.max - this.min)) * 100}%`
 	}
 
+	override willUpdate(changed: PropertyValues): void {
+		super.willUpdate(changed)
+		if (changed.has('value') || changed.has('name')) {
+			this.internals?.setFormValue(String(this.value))
+		}
+	}
+
+	/** FormData contributes the value as a string (native range input convention). */
+	override toFormEntries(): Array<[string, FormDataEntryValue]> {
+		if (!this.name || this.disabled) return []
+		return [[this.name, String(this.value)]]
+	}
+
 	render() {
 		return html`
 			<div class="flex flex-col gap-1 w-full">
@@ -85,10 +103,13 @@ export class SchmancyRange extends SchmancyElement {
 					.step=${String(this.step)}
 					.value=${String(this.value)}
 					?disabled=${this.disabled}
+					aria-label=${this.label || 'Range'}
+					aria-valuetext=${String(this.value)}
 					style="--range-progress: ${this.progress}"
 					@input=${(e: Event) => {
 						this.value = Number((e.target as HTMLInputElement).value)
-						this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value }, bubbles: true, composed: true }))
+						this.markTouched()
+						this.emitChange({ value: this.value })
 					}}
 				/>
 			</div>

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

@@ -1,5 +1,5 @@
 import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
-import { SchmancyElement } from '@mixins/index'
+import { SchmancyFormField } from '@mixins/index'
 import { color } from '@schmancy/directives'
 import SchmancyInput from '@schmancy/input/input'
 import SchmancyOption from '@schmancy/option/option'
@@ -27,7 +27,7 @@ export type SchmancySelectChangeEvent = CustomEvent<{
  * @prop {string[]} values - Selected values (multi-select mode)
  */
 @customElement('schmancy-select')
-export class SchmancySelect extends SchmancyElement {
+export class SchmancySelect extends SchmancyFormField() {
 	static styles = [css`
 	:host {
 		display: block;
@@ -40,22 +40,22 @@ export class SchmancySelect extends SchmancyElement {
 	}
 `]
 
-	// Form association setup
-	static formAssociated = true
-	private internals?: ElementInternals
+	// FACE wiring (formAssociated, internals, attachInternals) comes from
+	// SchmancyFormField. Same for: name, required, disabled, validationMessage,
+	// validateOn, touched/dirty/pristine/submitted, markTouched/markSubmitted,
+	// formResetCallback, formDisabledCallback, FIELD_CONNECT_EVENT dispatch.
 
-	// API
-	@property({ type: String }) name: string | undefined
-	@property({ type: Boolean, reflect: true }) required = false
-	@property({ type: Boolean, reflect: true }) disabled = false
 	@property({ type: String }) placeholder = ''
+
+	// Override `value` with the narrowed select-specific type and a custom
+	// getter/setter pair backed by reactive subjects.
 	@property({ type: String, reflect: true })
-	get value() {
+	override get value(): string | string[] {
 		return this.multi
-			? this._selectedValues$.value  // Return array for multi-select
-			: this._selectedValue$.value   // Return string for single-select
+			? this._selectedValues$.value
+			: this._selectedValue$.value
 	}
-	set value(val: string | string[]) {
+	override set value(val: string | string[]) {
 		if (this.multi) {
 			const values = Array.isArray(val)
 				? val
@@ -76,9 +76,7 @@ export class SchmancySelect extends SchmancyElement {
 	}
 
 	@property({ type: Boolean }) multi = false
-	@property({ type: String }) label = ''
-	@property({ type: String }) hint = ''
-	@property({ type: String }) validateOn: 'always' | 'touched' | 'dirty' | 'submitted' = 'touched'
+	// `label` and `hint` come from the mixin.
 	// M3 aligned sizes: 24dp (xxs) → 32dp (xs) → 40dp (sm) → 48dp (md) → 56dp (lg)
 	@property({ type: String }) size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' = 'md'
 
@@ -86,10 +84,11 @@ export class SchmancySelect extends SchmancyElement {
 	@state() private isOpen = false
 	@state() private valueLabel = ''
 	@state() private isValid = true
-	@property({ type: String }) validationMessage = ''
 
-	// Store the initial/default value for reset behavior
-	@state() private defaultValue: string | string[] = ''
+	// Store the initial/default value for reset behavior. Distinct from the
+	// mixin's `_defaultValue` (which is `string` only); select needs the wider
+	// shape so resetForm can restore arrays for multi-select.
+	@state() private selectDefaultValue: string | string[] = ''
 
 	@query('ul') private ul!: HTMLUListElement
 	@query('sch-input') private inputRef!: SchmancyInput
@@ -101,67 +100,35 @@ export class SchmancySelect extends SchmancyElement {
 	private _selectedValue$ = new BehaviorSubject<string>('')
 	private _selectedValues$ = new BehaviorSubject<string[]>([])
 	private _optionSelect$ = new Subject<SchmancyOption>()
+
+	/**
+	 * Tracks whether the user has actively interacted (clicked/typed/keyed
+	 * inside the dropdown). Distinct from the mixin's `touched` (which fires on
+	 * blur). Used to gate dropdown-positioning side-effects on user-driven
+	 * actions versus programmatic state changes.
+	 */
 	@state() _userInteracted = false
-	@state() private _touched = false
-	@state() private _dirty = false
-	@state() private _submitted = false
 
 	// Reference to current focused option (for keyboard navigation)
 	@state() private _focusedOptionId = ''
 
-	// Form event handlers
-	private formSubmitHandler = () => {
-		this._submitted = true
-		this.checkValidity()
-	}
-
-	private formResetHandler = () => {
-		this.reset()
-	}
-
-	constructor() {
-		super()
-		// Initialize ElementInternals for form association
-		try {
-			this.internals = this.attachInternals()
-		} catch (e) {
-			console.warn('FormAssociated elements not supported in this browser', e)
-		}
-	}
-
-	get form() {
-		return this.internals?.form
-	}
-
-	connectedCallback() {
+	override connectedCallback() {
 		super.connectedCallback()
 		if (!this.id) {
 			this.id = `schmancy-select-${Math.random().toString(36).substring(2, 9)}`
 		}
 
 		// Store initial value for reset
-		this.defaultValue = this.value
+		this.selectDefaultValue = this.value
 
 		// Add keyboard handling to host element
 		fromEvent<KeyboardEvent>(this, 'keydown').pipe(takeUntil(this.disconnecting)).subscribe(this.handleKeyDown)
 
 		// Setup reactive pipelines
 		this._setupReactivePipelines()
-
-		// Listen for form submission events to mark field as submitted
-		if (this.internals?.form) {
-			fromEvent(this.internals.form, 'submit')
-				.pipe(takeUntil(this.disconnecting))
-				.subscribe(this.formSubmitHandler)
-
-			// Listen for form reset
-			fromEvent(this.internals.form, 'reset')
-				.pipe(takeUntil(this.disconnecting))
-				.subscribe(this.formResetHandler)
-		}
 	}
 
-	disconnectedCallback() {
+	override disconnectedCallback() {
 		super.disconnectedCallback()
 		this.cleanupPositioner?.()
 		// Form event listeners are automatically cleaned up via takeUntil(this.disconnecting)
@@ -177,25 +144,20 @@ export class SchmancySelect extends SchmancyElement {
 		}
 	}
 
-	updated(changedProps: PropertyValues) {
+	override updated(changedProps: PropertyValues) {
 		super.updated(changedProps)
 
 		if (changedProps.has('value')) {
-			// Update form value when component value changes
+			// Multi-select serializes to a comma-joined scalar on FormData; the
+			// mixin's willUpdate already called setFormValue with the raw
+			// value, override here for the joined-string shape.
 			const formValue = this.multi
 				? this._selectedValues$.value.join(',')
 				: this._selectedValue$.value
 			this.internals?.setFormValue(formValue)
 
-			// Mark as dirty if value changes from initial value
-			if (this.hasUpdated) {
-				this._dirty = true
-			}
-
-			// Check validity based on validation strategy
-			if (this.hasUpdated) {
-				this.checkValidity()
-			}
+			// `dirty` is a mixin getter (value !== _defaultValue); no manual flag.
+			// Mixin's willUpdate already calls checkValidity when _shouldShowError().
 		}
 
 		// When open state changes, setup or cleanup the dropdown positioner
@@ -208,26 +170,7 @@ export class SchmancySelect extends SchmancyElement {
 		}
 	}
 
-	/**
-	 * Determines if validation errors should be shown based on current state
-	 * and validation strategy
-	 */
-	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
-		}
-	}
+	// `shouldShowValidation` removed — replaced by mixin's `_shouldShowError()`.
 
 	private syncSelection() {
 		if (this.multi) {
@@ -418,7 +361,7 @@ export class SchmancySelect extends SchmancyElement {
 		// Only mark as touched if the user actually interacted with the component
 		// and made a selection or explicitly closed it without selecting
 		if (this._userInteracted) {
-			this._touched = true
+			this.touched = true
 		}
 
 		this.isOpen = false
@@ -433,7 +376,7 @@ export class SchmancySelect extends SchmancyElement {
 
 		// Only check validity when closing if the user has actually interacted
 		// with the component and validation should be shown
-		if (this._userInteracted && this.shouldShowValidation()) {
+		if (this._userInteracted && this._shouldShowError()) {
 			this.checkValidity()
 		}
 	}
@@ -459,8 +402,8 @@ export class SchmancySelect extends SchmancyElement {
 				withLatestFrom(this._selectedValue$, this._selectedValues$),
 				tap(([option, _, currentValues]) => {
 					this._userInteracted = true
-					this._touched = true
-					this._dirty = true
+					this.markTouched()
+					// `dirty` is a mixin getter; setting `value` below triggers it
 
 					if (this.multi) {
 						const index = currentValues.indexOf(option.value)
@@ -602,7 +545,7 @@ export class SchmancySelect extends SchmancyElement {
 
 		// Update the input component to reflect our validation state
 		if (this.inputRef && this.hasUpdated) {
-			const showError = !this.isValid && this.shouldShowValidation()
+			const showError = !this.isValid && this._shouldShowError()
 			this.inputRef.error = showError
 			this.inputRef.hint = showError ? this.validationMessage : this.hint
 		}
@@ -636,7 +579,26 @@ export class SchmancySelect extends SchmancyElement {
 		return valid
 	}
 
-	public setCustomValidity(message: string) {
+	// `markTouched`, `markSubmitted`, `touched`, `dirty`, `pristine`, `submitted`,
+	// `error` (storage) — all from the mixin. Select's `error` semantics
+	// (errors-while-open suppression) live in render() via _shouldShowError() +
+	// !isOpen, not as a separate getter.
+
+	/**
+	 * Multi-value-aware `toFormEntries`. Single-select emits one `[name,value]`;
+	 * multi-select emits N entries with the same name (canonical FormData shape
+	 * for repeated fields).
+	 */
+	override toFormEntries(): Array<[string, FormDataEntryValue]> {
+		if (!this.name || this.disabled) return []
+		const v = this.value
+		if (v === undefined || v === null || v === '') return []
+		if (Array.isArray(v))
+			return v.map(item => [this.name, String(item)] as [string, FormDataEntryValue])
+		return [[this.name, String(v)]]
+	}
+
+	override setCustomValidity(message: string) {
 		this.validationMessage = message
 		if (message) {
 			this.isValid = false
@@ -647,34 +609,41 @@ export class SchmancySelect extends SchmancyElement {
 		}
 
 		// Update input if needed
-		if (this.inputRef && this.shouldShowValidation()) {
+		if (this.inputRef && this._shouldShowError()) {
 			this.inputRef.error = !this.isValid
 			this.inputRef.hint = !this.isValid ? this.validationMessage : this.hint
 		}
 	}
 
-	public reset() {
-		// Reset to initial value
-		this.value = this.defaultValue
+	/**
+	 * Reset to the snapshot captured at connect time. Mixin's `resetForm`
+	 * handles touched/submitted/error/validationMessage; the override layers on
+	 * select-specific cleanup (value subjects, label, validity).
+	 */
+	override resetForm(): void {
+		// Restore value (multi-aware) before super so the mixin's _defaultValue
+		// reset doesn't clobber the array-shape we need.
+		this.value = this.selectDefaultValue
 		this.valueLabel = this.placeholder
 		this.isValid = true
-		this.validationMessage = ''
-		this._touched = false
-		this._dirty = false
-		this._submitted = false
 		this._userInteracted = false
 		this.internals?.setValidity({})
-
+		super.resetForm()
 		if (this.inputRef) {
 			this.inputRef.error = false
 			this.inputRef.hint = this.hint
 		}
 	}
 
+	/** Back-compat alias for callers that used the previous public API. */
+	public reset(): void {
+		this.resetForm()
+	}
+
 	render(): TemplateResult {
 		// Determine if we should show errors based on the validation strategy and interaction
 		// Never show errors on initial render or if the dropdown is open
-		const showErrors = !this.isValid && this.shouldShowValidation() && !this.isOpen
+		const showErrors = !this.isValid && this._shouldShowError() && !this.isOpen
 
 		// Add caret icon based on open state
 		const caretIcon = this.isOpen

package/src/{switch → form/fields/switch}/switch.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
-import { expectNoA11yViolations } from '../test-utils/a11y'
+import { expectNoA11yViolations } from '../../../test-utils/a11y'
 import './switch'
 
 const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))

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

@@ -1,6 +1,6 @@
-import { SchmancyElement } from '@mixins/index'
-import { css, html, LitElement, nothing } from 'lit'
+import { css, html, LitElement, nothing, type PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
+import { SchmancyFormField } from '@mixins/index'
 
 export type SchmancySwitchChangeEvent = CustomEvent<{ value: boolean }>
 
@@ -12,16 +12,11 @@ export type SchmancySwitchChangeEvent = CustomEvent<{ value: boolean }>
  *
  * @element schmancy-switch
  * @fires change - `CustomEvent<{ value: boolean }>` when the state changes.
- * @attr checked - Initial checked state (also reflected via `value`).
- * @attr disabled - Disables interaction.
- * @attr required - Requires the switch to be on for form validity.
- * @attr name - Form field name for submission.
  * @csspart track - The background track.
  * @csspart thumb - The moving thumb.
  */
 @customElement('schmancy-switch')
-export class SchmancySwitch extends SchmancyElement {
-	static styles = [css`
+export class SchmancySwitch extends SchmancyFormField(css`
 	:host {
 		display: inline-block;
 	}
@@ -74,77 +69,102 @@ export class SchmancySwitch extends SchmancyElement {
 	@media (prefers-reduced-motion: reduce) {
 		.track, .thumb { transition: none; }
 	}
-`];
-	static formAssociated = true
-	private internals: ElementInternals | undefined
-
-	@property({ type: Boolean, reflect: true }) checked = false
-	@property({ type: Boolean, reflect: true }) disabled = false
-	@property({ type: Boolean, reflect: true }) required = false
-	@property({ type: String }) name = ''
-	@property({ type: String }) value = 'on'
-	@property({ type: String }) label = ''
+`) {
+	// `formAssociated`, `internals`, `name`, `disabled`, `required`, `id`,
+	// `label`, `error`, `validationMessage`, `validateOn`, touched/dirty/submitted,
+	// `markTouched/markSubmitted`, `formResetCallback`, `formDisabledCallback`,
+	// FIELD_CONNECT_EVENT dispatch — all from the mixin.
 
+	// Inner <button> is the focusable surface; route host focus to it.
 	protected static shadowRootOptions = {
 		...LitElement.shadowRootOptions,
 		delegatesFocus: true,
 	}
 
-	constructor() {
-		super()
-		try {
-			this.internals = this.attachInternals()
-		} catch {
-			this.internals = undefined
-		}
+	/**
+	 * The string written to FormData when the switch is on. Native
+	 * `<input type=checkbox value="...">` semantics. Defaults to `'on'` to
+	 * match HTML checkbox conventions.
+	 */
+	@property({ type: String, reflect: true })
+	override value: string = 'on'
+
+	/** Boolean on/off state. Native `<input type=checkbox>.checked` semantics. */
+	@property({ type: Boolean, reflect: true })
+	checked: boolean = false
+
+	/** Snapshot of `checked` at first render — drives the `dirty` override. */
+	private _checkedDefault: boolean = false
+
+	override firstUpdated(changed: PropertyValues): void {
+		super.firstUpdated(changed)
+		this._checkedDefault = this.checked
 	}
 
-	get form(): HTMLFormElement | null {
-		return this.internals?.form ?? null
+	/**
+	 * Override the mixin's value-vs-default `dirty` getter — for switch the
+	 * meaningful state is `checked`, not the FormData string.
+	 */
+	override get dirty(): boolean {
+		return this.checked !== this._checkedDefault
 	}
 
-	protected updated(changed: Map<string, unknown>) {
-		super.updated?.(changed)
+	override willUpdate(changed: PropertyValues): void {
+		super.willUpdate(changed)
 		if (changed.has('checked') || changed.has('value') || changed.has('name')) {
+			// Switch contributes `value` to FormData when on, nothing when off
+			// (native checkbox semantics; overrides the mixin's scalar default).
 			this.internals?.setFormValue(this.checked ? this.value : null)
 			if (this.checked) this.internals?.states.add('checked')
 			else this.internals?.states.delete('checked')
+			// Mixin's value-changed branch won't fire `checkValidity` here
+			// (validateOn: 'dirty' gate stays closed until checked diverges).
+			// Sync platform validity explicitly so `form.checkValidity()` is
+			// correct from first render.
+			this.checkValidity()
 		}
-		if (changed.has('required') || changed.has('checked')) {
-			if (this.required && !this.checked) {
-				this.internals?.setValidity({ valueMissing: true }, 'This switch is required.')
-			} else {
-				this.internals?.setValidity({})
-			}
+		if (changed.has('required') || changed.has('disabled')) {
+			this.checkValidity()
 		}
 	}
 
-	formResetCallback() {
-		this.checked = this.hasAttribute('checked')
-	}
+	/** Override — switch validity is `checked === true` when required. */
+	override checkValidity(): boolean {
+		if (this.disabled) {
+			this.internals?.setValidity({})
+			return true
+		}
+		const isValid = !this.required || this.checked
+		const message = isValid ? '' : 'This switch is required.'
+
+		this.internals?.setValidity(
+			isValid ? {} : { valueMissing: true },
+			isValid ? undefined : message,
+		)
 
-	formDisabledCallback(disabled: boolean) {
-		this.disabled = disabled
+		if (this._shouldShowError()) {
+			this.error = !isValid
+			this.validationMessage = message
+		}
+		return isValid
 	}
 
-	public checkValidity(): boolean {
-		return this.internals?.checkValidity() ?? true
+	/** Override — emit only when the switch is on. */
+	override toFormEntries(): Array<[string, FormDataEntryValue]> {
+		if (!this.name || this.disabled || !this.checked) return []
+		return [[this.name, this.value]]
 	}
 
-	public reportValidity(): boolean {
-		return this.internals?.reportValidity() ?? true
+	override resetForm(): void {
+		this.checked = this._checkedDefault
+		super.resetForm()
 	}
 
 	private _toggle = () => {
 		if (this.disabled) return
 		this.checked = !this.checked
-		this.dispatchEvent(
-			new CustomEvent('change', {
-				detail: { value: this.checked },
-				bubbles: true,
-				composed: true,
-			}),
-		)
+		this.markTouched()
+		this.emitChange({ value: this.checked })
 	}
 
 	private _onKeydown = (e: KeyboardEvent) => {

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

@@ -0,0 +1,54 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import './textarea'
+import { expectNoA11yViolations } from '../../../test-utils/a11y'
+
+const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
+
+describe('schmancy-textarea', () => {
+	let host: HTMLDivElement
+
+	beforeEach(() => {
+		host = document.createElement('div')
+		document.body.appendChild(host)
+	})
+
+	afterEach(() => {
+		host.remove()
+	})
+
+	it('contributes value to FormData under its name', async () => {
+		host.innerHTML = `
+			<form>
+				<schmancy-textarea name="notes" value="hello"></schmancy-textarea>
+			</form>
+		`
+		const form = host.querySelector('form') as HTMLFormElement
+		await nextUpdate()
+		await nextUpdate()
+		expect(new FormData(form).get('notes')).toBe('hello')
+	})
+
+	it('reports invalid when required and empty', async () => {
+		host.innerHTML = `<form><schmancy-textarea name="n" required></schmancy-textarea></form>`
+		const form = host.querySelector('form') as HTMLFormElement
+		await nextUpdate()
+		await nextUpdate()
+		expect(form.checkValidity()).toBe(false)
+	})
+
+	it('default validateOn is "dirty"', async () => {
+		host.innerHTML = `<schmancy-textarea label="Notes" required></schmancy-textarea>`
+		const ta = host.querySelector('schmancy-textarea') as HTMLElement & { validateOn: string; error: boolean }
+		await nextUpdate()
+		await nextUpdate()
+		expect(ta.validateOn).toBe('dirty')
+		expect(ta.error).toBe(false)
+	})
+
+	it('has no axe-core a11y violations (idle, with label)', async () => {
+		host.innerHTML = `<schmancy-textarea label="Description"></schmancy-textarea>`
+		await nextUpdate()
+		await nextUpdate()
+		await expectNoA11yViolations(host)
+	})
+})