@mhmo91/schmancy 0.9.5 → 0.9.6

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';

package/src/splash-screen/splash-screen.ts

@@ -0,0 +1,154 @@
+import { $LitElement } from '@mixins/litElement.mixin'
+import { css, html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { styleMap } from 'lit/directives/style-map.js'
+import { fromEvent, of, timer, zip } from 'rxjs'
+import { take, takeUntil, tap } from 'rxjs/operators'
+
+export type SchmancySplashScreenDoneEvent = CustomEvent<void>
+
+/**
+ * Full-viewport splash overlay that dismisses once a minimum duration has
+ * elapsed and (optionally) an external `ready` signal has fired. The splash
+ * fades out while the underlying app content fades in.
+ *
+ * Bring-your-own visuals: the `splash` slot is empty by default so the
+ * component pulls in no dependencies. Provide a logo, spinner, or
+ * animation from the consumer side.
+ *
+ * @element schmancy-splash-screen
+ * @slot splash - Content rendered on the splash layer (logo, spinner, etc.).
+ * @slot - Default slot for the actual app content, revealed once dismissed.
+ * @fires schmancy-splash-done - `CustomEvent<void>` when the splash dismisses.
+ *
+ * @example
+ * ```html
+ * <schmancy-splash-screen min-duration="1200">
+ *   <my-logo slot="splash"></my-logo>
+ *   <my-app></my-app>
+ * </schmancy-splash-screen>
+ * ```
+ */
+@customElement('schmancy-splash-screen')
+export default class SchmancySplashScreen extends $LitElement(css`
+	:host {
+		display: block;
+		position: relative;
+	}
+
+	.splash-layer {
+		position: fixed;
+		inset: 0;
+		z-index: 50;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(
+			--schmancy-splash-background,
+			var(--schmancy-sys-color-surface-containerLowest, #000)
+		);
+		transition: opacity var(--schmancy-splash-transition, 500ms) ease-out;
+	}
+
+	.content-layer {
+		display: block;
+		width: 100%;
+		transition: opacity var(--schmancy-splash-transition, 500ms) ease-in-out;
+	}
+`) {
+	/**
+	 * Minimum duration (ms) the splash layer stays visible. Prevents a flash
+	 * when the app loads faster than expected.
+	 */
+	@property({ type: Number, attribute: 'min-duration' }) minDuration = 1500
+
+	/**
+	 * When true, the splash dismisses on the `minDuration` timer alone.
+	 * When false (default), it additionally waits for an external ready signal
+	 * (a `ready` event on this element, or a call to `this.ready()`).
+	 */
+	@property({ type: Boolean }) auto = false
+
+	/**
+	 * When true, the splash starts hidden. Use this for imperative control.
+	 */
+	@property({ type: Boolean, attribute: 'initially-hidden' }) initiallyHidden = false
+
+	@state() private _visible = true
+
+	connectedCallback() {
+		super.connectedCallback()
+
+		if (this.initiallyHidden) {
+			this._visible = false
+			return
+		}
+
+		const readySignal$ = this.auto ? of(null) : fromEvent<Event>(this, 'ready').pipe(take(1))
+		const minTimer$ = timer(this.minDuration)
+
+		zip(readySignal$, minTimer$)
+			.pipe(
+				take(1),
+				tap(() => this._dismiss()),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
+	}
+
+	/**
+	 * Imperative API: signal that the app is ready and dismiss the splash
+	 * after the minimum duration has elapsed.
+	 */
+	public ready(): void {
+		this.dispatchEvent(new Event('ready'))
+	}
+
+	/**
+	 * Force the splash to show again (e.g. between route transitions).
+	 */
+	public show(): void {
+		this._visible = true
+	}
+
+	private _dismiss(): void {
+		this._visible = false
+		this.dispatchEvent(
+			new CustomEvent<void>('schmancy-splash-done', {
+				bubbles: true,
+				composed: true,
+			}),
+		)
+	}
+
+	render() {
+		return html`
+			<div
+				class="splash-layer"
+				aria-hidden=${!this._visible}
+				style=${styleMap({
+					opacity: this._visible ? '1' : '0',
+					pointerEvents: this._visible ? 'auto' : 'none',
+				})}
+			>
+				<slot name="splash"></slot>
+			</div>
+			<div
+				class="content-layer"
+				style=${styleMap({
+					opacity: this._visible ? '0' : '1',
+					pointerEvents: this._visible ? 'none' : 'auto',
+				})}
+			>
+				<slot></slot>
+			</div>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-splash-screen': SchmancySplashScreen
+	}
+}

package/src/switch/index.ts

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