@mhmo91/schmancy 0.10.42 → 0.10.44

package/src/form/fields/date-range/index.ts

@@ -1,2 +1,2 @@
-export * from './date-range';
-export * from './date-utils';
+export * from './date-range'
+export * from './date-range-dialog'

package/src/form/fields/input/index.ts

@@ -1,8 +1,8 @@
-export {
-	default as SchmancyInput,
-	SchmancyInputCompat,
-	type SchmancyInputInputEvent,
-	type SchmancyInputChangeEvent,
-	type SchmancyInputEnterEvent,
-	type InputSize,
-} from './input'
+export {
+	default as SchmancyInput,
+	SchmancyInputCompat,
+	type SchmancyInputInputEvent,
+	type SchmancyInputChangeEvent,
+	type SchmancyInputEnterEvent,
+	type InputSize,
+} from './input'

package/src/form/fields/input/input.scss

@@ -1,4 +1,4 @@
-  @reference "tailwindcss";
+@reference "tailwindcss";
 
 :host {
 	@apply block w-full min-w-0;
@@ -39,17 +39,19 @@ input:focus {
 }
 
 /* Luminous error glow — red glow on error focus */
-input[aria-invalid="true"] {
+input[aria-invalid='true'] {
 	box-shadow: 0 0 12px -4px color-mix(in srgb, var(--schmancy-sys-color-error-default) 15%, transparent);
 }
-input[aria-invalid="true"]:focus {
+input[aria-invalid='true']:focus {
 	box-shadow:
 		0 0 0 1px var(--schmancy-sys-color-error-default),
 		0 0 16px -4px color-mix(in srgb, var(--schmancy-sys-color-error-default) 25%, transparent);
 }
 
 @media (prefers-reduced-motion: reduce) {
-	input { transition: none; }
+	input {
+		transition: none;
+	}
 }
 
 /* Remove number input spinners */
@@ -67,8 +69,10 @@ input[type='number'] {
 
 /* Autofill styling */
 @keyframes onAutoFillStart {
-	from {}
-	to {}
+	from {
+	}
+	to {
+	}
 }
 
 input:-webkit-autofill {
@@ -85,11 +89,11 @@ input:autofill {
 }
 
 /* Date and datetime inputs need special handling */
-input[type="date"],
-input[type="datetime-local"],
-input[type="time"],
-input[type="month"],
-input[type="week"] {
+input[type='date'],
+input[type='datetime-local'],
+input[type='time'],
+input[type='month'],
+input[type='week'] {
 	/* Ensure consistent height and padding */
 	@apply block w-full rounded-[8px];
 	/* Reset WebKit styling */
@@ -155,11 +159,11 @@ input::-webkit-datetime-edit-meridiem-field {
 }
 
 /* Safari date input calendar icon */
-input[type="date"]::-webkit-calendar-picker-indicator,
-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
-input[type="time"]::-webkit-calendar-picker-indicator,
-input[type="month"]::-webkit-calendar-picker-indicator,
-input[type="week"]::-webkit-calendar-picker-indicator {
+input[type='date']::-webkit-calendar-picker-indicator,
+input[type='datetime-local']::-webkit-calendar-picker-indicator,
+input[type='time']::-webkit-calendar-picker-indicator,
+input[type='month']::-webkit-calendar-picker-indicator,
+input[type='week']::-webkit-calendar-picker-indicator {
 	/* Make the calendar icon more subtle */
 	opacity: 0.5;
 	cursor: pointer;
@@ -167,9 +171,9 @@ input[type="week"]::-webkit-calendar-picker-indicator {
 
 /* Firefox date input styling */
 @-moz-document url-prefix() {
-	input[type="date"],
-	input[type="datetime-local"],
-	input[type="time"] {
+	input[type='date'],
+	input[type='datetime-local'],
+	input[type='time'] {
 		/* Firefox needs explicit height */
 		min-height: inherit;
 	}
@@ -177,11 +181,11 @@ input[type="week"]::-webkit-calendar-picker-indicator {
 
 /* iOS Safari specific fixes */
 @supports (-webkit-touch-callout: none) {
-	input[type="date"],
-	input[type="datetime-local"],
-	input[type="time"],
-	input[type="month"],
-	input[type="week"] {
+	input[type='date'],
+	input[type='datetime-local'],
+	input[type='time'],
+	input[type='month'],
+	input[type='week'] {
 		/* iOS Safari needs explicit width */
 		width: -webkit-fill-available !important;
 		width: fill-available !important;
@@ -193,7 +197,7 @@ input[type="week"]::-webkit-calendar-picker-indicator {
 		padding-left: 12px !important;
 		padding-right: 12px !important;
 	}
-	
+
 	/* Target shadow DOM elements on iOS */
 	input::-webkit-datetime-edit {
 		/* Force full width */
@@ -201,7 +205,7 @@ input[type="week"]::-webkit-calendar-picker-indicator {
 		padding-left: 0 !important;
 		padding-right: 0 !important;
 	}
-	
+
 	input::-webkit-datetime-edit-fields-wrapper {
 		/* Ensure proper spacing on mobile */
 		width: 100% !important;

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

@@ -162,7 +162,10 @@ describe('schmancy-input', () => {
 
 		let resolveValidator: (msg: string) => void
 		const promise = inp.runAsyncValidator(
-			() => new Promise<string>(r => { resolveValidator = r }),
+			() =>
+				new Promise<string>(r => {
+					resolveValidator = r
+				}),
 		)
 		// Yield once for the @state to update.
 		await new Promise(r => requestAnimationFrame(() => r(null)))

package/src/form/fields/input/input.ts

@@ -71,23 +71,19 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 	@property({ type: String, reflect: true })
 	public override value = ''
 
-
 	/**
 	 * The type of input. (e.g. 'text', 'password', 'email', etc.)
 	 */
 	@property({ reflect: true })
 	public type: HTMLInputElement['type'] = 'text'
 
-
 	@property()
 	public placeholder = ''
 
-
 	/** Pattern validation attribute. */
 	@property({ type: String, reflect: true })
 	public pattern?: string
 
-
 	/** If true, we visually show a pointer cursor even if readOnly. */
 	@property({ type: Boolean, reflect: true }) public clickable = false
 
@@ -135,7 +131,6 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 	@property({ type: Number, reflect: true })
 	public override tabIndex = 0
 
-
 	/**
 	 * The size of the input.
 	 * - 'xxs': Ultra-compact size (24px) - for menu cards
@@ -153,7 +148,6 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 	@property({ type: String })
 	public list?: string
 
-
 	// ----------------------------
 	//  B) Queries & Refs
 	// ----------------------------
@@ -192,7 +186,6 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 		super.willUpdate(changedProps as never)
 	}
 
-
 	// `updated()` removed — FormFieldMixin's `willUpdate` recomputes `dirty`,
 	// triggers `checkValidity()` when `shouldShowError()` is true, and updates
 	// `:state(dirty)` automatically.
@@ -231,9 +224,7 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 				setupLabelClickListener()
 			} else {
 				// Use RxJS for DOMContentLoaded event
-				fromEvent(document, 'DOMContentLoaded')
-					.pipe(takeUntil(this.disconnecting))
-					.subscribe(setupLabelClickListener)
+				fromEvent(document, 'DOMContentLoaded').pipe(takeUntil(this.disconnecting)).subscribe(setupLabelClickListener)
 			}
 		}
 	}
@@ -577,12 +568,12 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 			)
 			.subscribe(ev => {
 				const { value } = ev.target as HTMLInputElement
-				
+
 				// Update value if changed (mixin recomputes dirty automatically)
 				if (this.value !== value) {
 					this.value = value
 				}
-				
+
 				// Blur the input to trigger change event naturally
 				// This mimics what happens when you tab out of the field
 				this.inputElement.blur()
@@ -796,14 +787,7 @@ export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 			<div class="w-full min-w-0 ${isDateType ? 'date-input-container' : ''}">
 				${when(
 					this.label,
-					() => html`
-						<label
-							for=${this.id}
-							class=${this.classMap(labelClasses)}
-						>
-							${this.label}
-						</label>
-					`,
+					() => html` <label for=${this.id} class=${this.classMap(labelClasses)}> ${this.label} </label> `,
 				)}
 
 				<input

package/src/form/fields/radio-group/index.ts

@@ -1,2 +1,2 @@
-export * from './radio-group';
-export * from './radio-button';
+export * from './radio-group'
+export * from './radio-button'

package/src/form/fields/radio-group/radio-button.ts

@@ -20,18 +20,18 @@ export class RadioButton extends SchmancyElement {
 
 	connectedCallback() {
 		super.connectedCallback()
-		fromEvent<MouseEvent>(this, 'click')
-			.pipe(takeUntil(this.disconnecting))
-			.subscribe(this.handleClick)
+		fromEvent<MouseEvent>(this, 'click').pipe(takeUntil(this.disconnecting)).subscribe(this.handleClick)
 	}
 
 	private handleClick = () => {
 		if (this.disabled) return
-		this.dispatchEvent(new CustomEvent('radio-button-click', {
-			detail: { value: this.value },
-			bubbles: true,
-			composed: true,
-		}))
+		this.dispatchEvent(
+			new CustomEvent('radio-button-click', {
+				detail: { value: this.value },
+				bubbles: true,
+				composed: true,
+			}),
+		)
 	}
 
 	render() {

package/src/form/fields/radio-group/radio-group.ts

@@ -42,7 +42,10 @@ export class RadioGroup extends FormFieldMixin(SchmancyElement) {
 	render() {
 		return html`
 			<div role="radiogroup" aria-label=${this.label} aria-required=${this.required} class="grid gap-2">
-				${when(this.label, () => html`<schmancy-typography type="label" token="lg">${this.label}</schmancy-typography>`)}
+				${when(
+					this.label,
+					() => html`<schmancy-typography type="label" token="lg">${this.label}</schmancy-typography>`,
+				)}
 				<slot></slot>
 			</div>
 		`

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

@@ -92,7 +92,9 @@ export class SchmancyRange extends SchmancyFormField(css`
 					() => html`
 						<div class="flex justify-between items-center">
 							<schmancy-typography type="label" token="sm" class="text-surface-on">${this.label}</schmancy-typography>
-							<schmancy-typography type="label" token="sm" class="text-surface-on opacity-60">${this.value}</schmancy-typography>
+							<schmancy-typography type="label" token="sm" class="text-surface-on opacity-60"
+								>${this.value}</schmancy-typography
+							>
 						</div>
 					`,
 				)}

package/src/form/fields/select/index.ts

@@ -1,2 +1,2 @@
-// Export everything except potential naming conflicts
-export { SchmancySelect, type SchmancySelectChangeEvent } from './select';
+// Export everything except potential naming conflicts
+export { SchmancySelect, type SchmancySelectChangeEvent } from './select'

package/src/form/fields/select/select.ts

@@ -28,17 +28,19 @@ export type SchmancySelectChangeEvent = CustomEvent<{
  */
 @customElement('schmancy-select')
 export class SchmancySelect extends SchmancyFormField() {
-	static styles = [css`
-	:host {
-		display: block;
-		position: relative;
-	}
+	static styles = [
+		css`
+			:host {
+				display: block;
+				position: relative;
+			}
 
-	[role='listbox'] {
-		overflow-y: auto;
-		outline: none;
-	}
-`]
+			[role='listbox'] {
+				overflow-y: auto;
+				outline: none;
+			}
+		`,
+	]
 
 	// FACE wiring (formAssociated, internals, attachInternals) comes from
 	// SchmancyFormField. Same for: name, required, disabled, validationMessage,
@@ -51,16 +53,19 @@ export class SchmancySelect extends SchmancyFormField() {
 	// getter/setter pair backed by reactive subjects.
 	@property({ type: String, reflect: true })
 	override get value(): string | string[] {
-		return this.multi
-			? (this.selectedValues$?.value ?? [])
-			: (this.selectedValue$?.value ?? '')
+		return this.multi ? (this.selectedValues$?.value ?? []) : (this.selectedValue$?.value ?? '')
 	}
 	override set value(val: string | string[]) {
 		if (!this.selectedValue$ || !this.selectedValues$) return
 		if (this.multi) {
 			const values = Array.isArray(val)
 				? val
-				: val ? String(val).split(',').map(v => v.trim()).filter(Boolean) : []
+				: val
+					? String(val)
+							.split(',')
+							.map(v => v.trim())
+							.filter(Boolean)
+					: []
 			this.selectedValues$.next(values)
 		} else {
 			this.selectedValue$.next(val == null ? '' : String(val))
@@ -152,9 +157,7 @@ export class SchmancySelect extends SchmancyFormField() {
 			// 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
+			const formValue = this.multi ? this.selectedValues$.value.join(',') : this.selectedValue$.value
 			this.internals?.setFormValue(formValue)
 
 			// `dirty` is a mixin getter (value !== defaultValue); no manual flag.
@@ -193,7 +196,7 @@ export class SchmancySelect extends SchmancyFormField() {
 				o.selected = o.value === currentValue
 			})
 			const selectedOption = this.options?.find(o => o.value === currentValue)
-			this.valueLabel = selectedOption ? (selectedOption.label || selectedOption.textContent || '') : this.placeholder
+			this.valueLabel = selectedOption ? selectedOption.label || selectedOption.textContent || '' : this.placeholder
 		}
 	}
 
@@ -209,7 +212,9 @@ export class SchmancySelect extends SchmancyFormField() {
 
 			option.setAttribute(
 				'aria-selected',
-				String(this.multi ? this.selectedValues$.value.includes(option.value) : option.value === this.selectedValue$.value),
+				String(
+					this.multi ? this.selectedValues$.value.includes(option.value) : option.value === this.selectedValue$.value,
+				),
 			)
 		})
 	}
@@ -386,14 +391,14 @@ export class SchmancySelect extends SchmancyFormField() {
 		// Listen for option-select events from child options
 		fromEvent<CustomEvent>(this, 'option-select')
 			.pipe(
-				tap((e) => {
+				tap(e => {
 					e.stopPropagation() // Prevent event from bubbling further
 					const option = this.options.find(o => o.value === e.detail.value)
 					if (option) {
 						this.optionSelect$.next(option)
 					}
 				}),
-				takeUntil(this.disconnecting)
+				takeUntil(this.disconnecting),
 			)
 			.subscribe()
 
@@ -408,21 +413,23 @@ export class SchmancySelect extends SchmancyFormField() {
 
 					if (this.multi) {
 						const index = currentValues.indexOf(option.value)
-						const newValues = index > -1
-							? [...currentValues.slice(0, index), ...currentValues.slice(index + 1)]
-							: [...currentValues, option.value]
+						const newValues =
+							index > -1
+								? [...currentValues.slice(0, index), ...currentValues.slice(index + 1)]
+								: [...currentValues, option.value]
 						this.selectedValues$.next(newValues)
 
 						// Update form value
 						this.internals?.setFormValue(newValues.join(','))
 
 						// Update display label
-						this.valueLabel = newValues.length > 0
-							? this.options
-									.filter(o => newValues.includes(o.value))
-									.map(o => o.label || o.textContent || '')
-									.join(', ')
-							: this.placeholder
+						this.valueLabel =
+							newValues.length > 0
+								? this.options
+										.filter(o => newValues.includes(o.value))
+										.map(o => o.label || o.textContent || '')
+										.join(', ')
+								: this.placeholder
 					} else {
 						// Single select
 						this.selectedValue$.next(option.value)
@@ -440,14 +447,14 @@ export class SchmancySelect extends SchmancyFormField() {
 					// Dispatch change event
 					this.fireChangeEvent()
 				}),
-				takeUntil(this.disconnecting)
+				takeUntil(this.disconnecting),
 			)
 			.subscribe()
 
 		// Options management pipeline - bind pointerdown events exactly like autocomplete
 		this.options$
 			.pipe(
-				tap((options) => {
+				tap(options => {
 					options.forEach((option, index) => {
 						option.setAttribute('role', 'option')
 						option.tabIndex = -1
@@ -458,17 +465,19 @@ export class SchmancySelect extends SchmancyFormField() {
 						if (!option.hasAttribute('data-event-bound')) {
 							// Use click event instead of pointerdown for better mobile UX
 							// This allows users to scroll through options without immediately selecting
-							fromEvent(option, 'click').pipe(
-								tap(e => {
-									e.stopPropagation()
-								}),
-								takeUntil(this.disconnecting)
-							).subscribe(() => this.optionSelect$.next(option))
+							fromEvent(option, 'click')
+								.pipe(
+									tap(e => {
+										e.stopPropagation()
+									}),
+									takeUntil(this.disconnecting),
+								)
+								.subscribe(() => this.optionSelect$.next(option))
 							option.setAttribute('data-event-bound', 'true')
 						}
 					})
 				}),
-				takeUntil(this.disconnecting)
+				takeUntil(this.disconnecting),
 			)
 			.subscribe()
 
@@ -488,7 +497,7 @@ export class SchmancySelect extends SchmancyFormField() {
 						})
 					}
 				}),
-				takeUntil(this.disconnecting)
+				takeUntil(this.disconnecting),
 			)
 			.subscribe()
 	}
@@ -525,9 +534,7 @@ export class SchmancySelect extends SchmancyFormField() {
 		}
 
 		// Determine if the select is empty based on whether it's multi-select or single-select
-		const isEmpty = this.multi
-			? this.selectedValues$.value.length === 0
-			: !this.selectedValue$.value
+		const isEmpty = this.multi ? this.selectedValues$.value.length === 0 : !this.selectedValue$.value
 
 		// Check if the value is valid (not empty when required)
 		const isValid = !(this.required && isEmpty)
@@ -594,8 +601,7 @@ export class SchmancySelect extends SchmancyFormField() {
 		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])
+		if (Array.isArray(v)) return v.map(item => [this.name, String(item)] as [string, FormDataEntryValue])
 		return [[this.name, String(v)]]
 	}
 

package/src/form/fields/switch/switch.ts

@@ -39,7 +39,9 @@ export class SchmancySwitch extends SchmancyFormField(css`
 		background: var(--schmancy-sys-color-surface-containerHighest, #e0e0e0);
 		border: 1px solid var(--schmancy-sys-color-outline, #79747e);
 		position: relative;
-		transition: background 150ms ease, border-color 150ms ease;
+		transition:
+			background 150ms ease,
+			border-color 150ms ease;
 	}
 	:host(:state(checked)) .track {
 		background: var(--schmancy-sys-color-primary-default, #6750a4);
@@ -54,7 +56,11 @@ export class SchmancySwitch extends SchmancyFormField(css`
 		border-radius: 999px;
 		background: var(--schmancy-sys-color-outline, #79747e);
 		transform: translateY(-50%);
-		transition: transform 150ms ease, background 150ms ease, width 150ms ease, height 150ms ease;
+		transition:
+			transform 150ms ease,
+			background 150ms ease,
+			width 150ms ease,
+			height 150ms ease;
 	}
 	:host(:state(checked)) .thumb {
 		transform: translate(1rem, -50%);
@@ -67,7 +73,10 @@ export class SchmancySwitch extends SchmancyFormField(css`
 		outline-offset: 2px;
 	}
 	@media (prefers-reduced-motion: reduce) {
-		.track, .thumb { transition: none; }
+		.track,
+		.thumb {
+			transition: none;
+		}
 	}
 `) {
 	// `formAssociated`, `internals`, `name`, `disabled`, `required`, `id`,
@@ -137,10 +146,7 @@ export class SchmancySwitch extends SchmancyFormField(css`
 		const isValid = !this.required || this.checked
 		const message = isValid ? '' : 'This switch is required.'
 
-		this.internals?.setValidity(
-			isValid ? {} : { valueMissing: true },
-			isValid ? undefined : message,
-		)
+		this.internals?.setValidity(isValid ? {} : { valueMissing: true }, isValid ? undefined : message)
 
 		if (this.shouldShowError()) {
 			this.error = !isValid

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

@@ -1 +1 @@
-export * from './textarea';
+export * from './textarea'