@mhmo91/schmancy 0.9.4 → 0.9.6

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'

package/src/icons/icon.ts

@@ -24,6 +24,7 @@ export type IconSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | string
  * @cssprop --schmancy-icon-weight - Weight value for icon (100-700)
  * @cssprop --schmancy-icon-grade - Grade value for icon (-50-200)
  * @cssprop --schmancy-icon-opsz - Optical size (default: 24)
+ * @csspart icon - The inner `<span>` carrying the Material Symbols glyph.
  */
 @customElement('schmancy-icon')
 export default class SchmancyIcon extends TailwindElement(css`

package/src/index.ts

@@ -67,3 +67,9 @@ export * from './typewriter';
 export * from './typography';
 export * from './utils';
 export * from './avatar';
+export * from './breadcrumb';
+export * from './kbd';
+export * from './skeleton';
+export * from './splash-screen';
+export * from './switch';
+export * from './visually-hidden';

package/src/kbd/index.ts

@@ -0,0 +1 @@
+export * from './kbd'

package/src/kbd/kbd.ts

@@ -0,0 +1,59 @@
+import { TailwindElement } from '@mixins/index'
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+/**
+ * Renders a keyboard shortcut hint (e.g. `⌘ K`, `Ctrl+C`). Semantically a
+ * `<kbd>` element for screen readers; visually styled as a pressed key.
+ *
+ * Compose multiple instances for combinations:
+ * ```html
+ * <schmancy-kbd>⌘</schmancy-kbd> + <schmancy-kbd>K</schmancy-kbd>
+ * ```
+ *
+ * @element schmancy-kbd
+ * @slot - The key label (e.g. `⌘`, `Shift`, `K`).
+ * @attr size - 'sm' | 'md'. Default 'md'.
+ * @csspart base - The inner native `<kbd>` element.
+ */
+@customElement('schmancy-kbd')
+export class SchmancyKbd extends TailwindElement(css`
+	:host {
+		display: inline-block;
+		vertical-align: middle;
+	}
+	kbd {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--_ksize, 1.5rem);
+		height: var(--_ksize, 1.5rem);
+		padding: 0 0.375rem;
+		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+		font-size: var(--_kfont, 0.75rem);
+		font-weight: 500;
+		line-height: 1;
+		color: var(--schmancy-sys-color-surface-on, #1d1b20);
+		background: var(--schmancy-sys-color-surface-container, #f3f0f7);
+		border: 1px solid var(--schmancy-sys-color-outline-variant, #cac4d0);
+		border-radius: 0.375rem;
+		box-shadow: inset 0 -1px 0 var(--schmancy-sys-color-outline-variant, #cac4d0);
+		white-space: nowrap;
+	}
+	:host([size='sm']) kbd {
+		--_ksize: 1.25rem;
+		--_kfont: 0.6875rem;
+	}
+`) {
+	@property({ type: String, reflect: true }) size: 'sm' | 'md' = 'md'
+
+	render() {
+		return html`<kbd part="base"><slot></slot></kbd>`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-kbd': SchmancyKbd
+	}
+}

package/src/skeleton/index.ts

@@ -0,0 +1 @@
+export * from './skeleton'

package/src/skeleton/skeleton.ts

@@ -0,0 +1,78 @@
+import { TailwindElement } from '@mixins/index'
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+/**
+ * Placeholder shimmer surface shown while content loads. Renders a
+ * shape-configurable rectangle with a reduced-motion-aware shimmer.
+ *
+ * @element schmancy-skeleton
+ * @attr shape - 'rect' | 'circle' | 'text'. Default 'rect'.
+ * @attr width  - CSS length (e.g. `100%`, `12rem`).
+ * @attr height - CSS length; for `shape=text` defaults to 1em.
+ * @attr radius - CSS length for corner radius; ignored for `shape=circle`.
+ * @csspart surface - The shimmering surface element.
+ */
+@customElement('schmancy-skeleton')
+export class SchmancySkeleton extends TailwindElement(css`
+	:host {
+		display: block;
+		width: var(--_sw, 100%);
+		height: var(--_sh, 1rem);
+	}
+	.surface {
+		width: 100%;
+		height: 100%;
+		border-radius: var(--_sr, 0.25rem);
+		background: linear-gradient(
+			90deg,
+			var(--schmancy-sys-color-surface-containerHighest, #e6e6e6) 25%,
+			var(--schmancy-sys-color-surface-container, #f2f2f2) 37%,
+			var(--schmancy-sys-color-surface-containerHighest, #e6e6e6) 63%
+		);
+		background-size: 400% 100%;
+		animation: schmancy-skeleton-shimmer 1.4s ease infinite;
+	}
+	:host([shape='circle']) .surface {
+		border-radius: 50%;
+	}
+	@keyframes schmancy-skeleton-shimmer {
+		0% { background-position: 100% 50%; }
+		100% { background-position: 0 50%; }
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.surface {
+			animation: none;
+			background: var(--schmancy-sys-color-surface-containerHighest, #e6e6e6);
+		}
+	}
+`) {
+	@property({ type: String, reflect: true }) shape: 'rect' | 'circle' | 'text' = 'rect'
+	@property({ type: String }) width = ''
+	@property({ type: String }) height = ''
+	@property({ type: String }) radius = ''
+
+	connectedCallback(): void {
+		super.connectedCallback()
+		this.setAttribute('role', 'status')
+		this.setAttribute('aria-busy', 'true')
+		this.setAttribute('aria-label', 'Loading')
+	}
+
+	protected updated(): void {
+		if (this.width) this.style.setProperty('--_sw', this.width)
+		const defaultHeight = this.shape === 'text' ? '1em' : '1rem'
+		this.style.setProperty('--_sh', this.height || defaultHeight)
+		if (this.radius) this.style.setProperty('--_sr', this.radius)
+	}
+
+	render() {
+		return html`<div part="surface" class="surface"></div>`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-skeleton': SchmancySkeleton
+	}
+}

package/src/splash-screen/index.ts

@@ -0,0 +1 @@
+export * from './splash-screen';