@mhmo91/schmancy 0.10.42 → 0.10.44

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

@@ -21,7 +21,6 @@ import { SchmancyFormField } from '@mixins/index'
  */
 @customElement('schmancy-textarea')
 export default class SchmancyTextarea extends SchmancyFormField(unsafeCSS(style)) {
-
 	protected static shadowRootOptions = {
 		...LitElement.shadowRootOptions,
 		delegatesFocus: true,
@@ -344,7 +343,7 @@ export default class SchmancyTextarea extends SchmancyFormField(unsafeCSS(style)
 			'resize-none': this.resize === 'none',
 			'resize-y': this.resize === 'vertical',
 			'resize-x': this.resize === 'horizontal',
-			'resize': this.resize === 'both',
+			resize: this.resize === 'both',
 			// Padding matching input
 			'px-4 py-3': true,
 		}
@@ -361,53 +360,49 @@ export default class SchmancyTextarea extends SchmancyFormField(unsafeCSS(style)
 		}
 		const hintId = `${this.a11yId}-hint`
 		return html`
-		<div class="${this.classMap(containerClasses)}">
-			${when(
-				this.label,
-				() => html`
-					<label class="${this.classMap(labelClasses)}" for=${this.id}>
-						${this.label}
-					</label>
-				`,
-			)}
-
-			<textarea
-				${ref(this.textareaRef)}
-				.value=${this.value}
-				.id=${this.id}
-				.name=${this.name}
-				.placeholder=${this.placeholder}
-				.required=${this.required}
-				class=${this.classMap(textareaClasses)}
-				style=${fieldSizing}
-				.disabled=${this.disabled}
-				minlength=${ifDefined(this.minlength)}
-				maxlength=${ifDefined(this.maxlength)}
-				.readonly=${this.readonly}
-				.spellcheck=${this.spellcheck}
-				cols=${ifDefined(this.cols)}
-				rows=${ifDefined(this.rows)}
-				wrap=${ifDefined(this.wrap)}
-				dirname=${ifDefined(this.dirname)}
-				aria-invalid=${this.error ? 'true' : 'false'}
-				aria-required=${this.required ? 'true' : 'false'}
-				aria-describedby=${this.hint || (this.error && this.validationMessage) ? hintId : nothing}
-				aria-label=${!this.label && this.placeholder ? this.placeholder : nothing}
-			></textarea>
-
-			${when(
-				this.hint || (this.error && this.validationMessage),
-				() => html`
-					<div
-						id=${hintId}
-						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>
-				`,
-			)}
-		</div>
+			<div class="${this.classMap(containerClasses)}">
+				${when(
+					this.label,
+					() => html` <label class="${this.classMap(labelClasses)}" for=${this.id}> ${this.label} </label> `,
+				)}
+
+				<textarea
+					${ref(this.textareaRef)}
+					.value=${this.value}
+					.id=${this.id}
+					.name=${this.name}
+					.placeholder=${this.placeholder}
+					.required=${this.required}
+					class=${this.classMap(textareaClasses)}
+					style=${fieldSizing}
+					.disabled=${this.disabled}
+					minlength=${ifDefined(this.minlength)}
+					maxlength=${ifDefined(this.maxlength)}
+					.readonly=${this.readonly}
+					.spellcheck=${this.spellcheck}
+					cols=${ifDefined(this.cols)}
+					rows=${ifDefined(this.rows)}
+					wrap=${ifDefined(this.wrap)}
+					dirname=${ifDefined(this.dirname)}
+					aria-invalid=${this.error ? 'true' : 'false'}
+					aria-required=${this.required ? 'true' : 'false'}
+					aria-describedby=${this.hint || (this.error && this.validationMessage) ? hintId : nothing}
+					aria-label=${!this.label && this.placeholder ? this.placeholder : nothing}
+				></textarea>
+
+				${when(
+					this.hint || (this.error && this.validationMessage),
+					() => html`
+						<div
+							id=${hintId}
+							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>
+					`,
+				)}
+			</div>
 		`
 	}
 }

package/src/form/form-summary.ts

@@ -42,7 +42,9 @@ export class SchmancyFormSummary extends SchmancyElement {
 			console.error('[schmancy-form-summary] must be a descendant of <schmancy-form>')
 			return
 		}
-		const bump = () => { this.bump++ }
+		const bump = () => {
+			this.bump++
+		}
 		this.formObserver = new MutationObserver(bump)
 		// Form host attribute changes (aria-busy, :state class reflections,
 		// descendant attribute changes for fields' aria-invalid). subtree:true
@@ -139,19 +141,18 @@ export class SchmancyFormSummary extends SchmancyElement {
 				${formMessage ? html`<p>${formMessage}</p>` : nothing}
 				${count > 0
 					? html`
-						<ul>
-							${invalid.map(
-								f => html`
-									<li>
-										<a
-											href="#${f.id}"
-											@click=${(e: MouseEvent) => this.jumpToField(e, f.id)}
-										>${f.label}: ${f.message}</a>
-									</li>
-								`,
-							)}
-						</ul>
-					`
+							<ul>
+								${invalid.map(
+									f => html`
+										<li>
+											<a href="#${f.id}" @click=${(e: MouseEvent) => this.jumpToField(e, f.id)}
+												>${f.label}: ${f.message}</a
+											>
+										</li>
+									`,
+								)}
+							</ul>
+						`
 					: nothing}
 			</div>
 		`

package/src/form/form.test.ts

@@ -221,7 +221,6 @@ describe('schmancy-form', () => {
 		await nextUpdate()
 		const liveRegion = sf.shadowRoot!.querySelector('[role="status"]') as HTMLElement
 		expect(liveRegion.textContent?.trim()).toBe('Boom')
-
 		;(host.querySelector('#r') as HTMLButtonElement).click()
 		await nextUpdate()
 		await nextUpdate()

package/src/form/form.ts

@@ -46,10 +46,11 @@ export type SchmancyFormSubmitDetail<T = Record<string, FormDataEntryValue>> = {
 }
 
 @customElement('schmancy-form')
-export default class SchmancyForm<TSchema extends ParseSchema | undefined = undefined>
-	extends SchmancyElement {
+export default class SchmancyForm<TSchema extends ParseSchema | undefined = undefined> extends SchmancyElement {
 	static styles = css`
-		:host { display: block; }
+		:host {
+			display: block;
+		}
 	`
 
 	public static readonly tagName: string = 'schmancy-form'
@@ -127,18 +128,14 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 		// type=reset is handled separately in maybeReset.
 		if (e.type === 'click') {
 			const path = e.composedPath()
-			const resetBtn = path.find(
-				node => isButton(node) && node.getAttribute('type') === 'reset',
-			)
+			const resetBtn = path.find(node => isButton(node) && node.getAttribute('type') === 'reset')
 			if (resetBtn) {
 				e.preventDefault()
 				const form = this.shadowRoot?.querySelector('form')
 				form?.reset()
 				return
 			}
-			const submitBtn = path.find(
-				node => isButton(node) && node.getAttribute('type') === 'submit',
-			)
+			const submitBtn = path.find(node => isButton(node) && node.getAttribute('type') === 'submit')
 			if (!submitBtn) return
 			e.preventDefault()
 		}
@@ -185,9 +182,7 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 				error: { message: 'Validation failed' },
 			})
 			this.broadcastStatus('error', 'Validation failed. Please correct the highlighted fields.')
-			const firstInvalid = this.activeFields.find(f => f.error) as unknown as
-				| HTMLElement
-				| undefined
+			const firstInvalid = this.activeFields.find(f => f.error) as unknown as HTMLElement | undefined
 			firstInvalid?.focus()
 			return
 		}
@@ -353,11 +348,7 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 	render() {
 		return html`
 			<schmancy-context .provides=${[formSubmitState]}>
-				<form
-					?novalidate=${this.novalidate}
-					@submit=${this.onSubmit}
-					@reset=${this.onReset}
-				>
+				<form ?novalidate=${this.novalidate} @submit=${this.onSubmit} @reset=${this.onReset}>
 					<slot></slot>
 				</form>
 				<!--
@@ -368,12 +359,9 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 					want one. Empty content while idle/submitting/success — only
 					error states populate the region. WCAG 4.1.3 (Status Messages).
 				-->
-				<div
-					role="status"
-					aria-live="assertive"
-					aria-atomic="true"
-					class="sr-only"
-				>${this.liveStatus === 'error' ? this.liveError : ''}</div>
+				<div role="status" aria-live="assertive" aria-atomic="true" class="sr-only">
+					${this.liveStatus === 'error' ? this.liveError : ''}
+				</div>
 			</schmancy-context>
 		`
 	}

package/src/icons/icon.ts

@@ -3,10 +3,10 @@ import { css, html, nothing, svg } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
 
 declare global {
-  interface Window {
-    // eslint-disable-next-line no-underscore-dangle -- public runtime contract: global populated by the external schmancy-icons Vite plugin; renaming breaks consumers
-    __siIcons?: Record<string, string>
-  }
+	interface Window {
+		// eslint-disable-next-line no-underscore-dangle -- public runtime contract: global populated by the external schmancy-icons Vite plugin; renaming breaks consumers
+		__siIcons?: Record<string, string>
+	}
 }
 
 /**
@@ -25,25 +25,27 @@ declare global {
  */
 @customElement('schmancy-icon')
 export default class SchmancyIcon extends SchmancyElement {
-	static styles = [css`
-		:host {
-			display: inline-flex;
-			place-items: center;
-			place-content: center;
-			font-size: 24px;
-			width: 1em;
-			height: 1em;
-			flex-shrink: 0;
-			color: inherit;
-		}
+	static styles = [
+		css`
+			:host {
+				display: inline-flex;
+				place-items: center;
+				place-content: center;
+				font-size: 24px;
+				width: 1em;
+				height: 1em;
+				flex-shrink: 0;
+				color: inherit;
+			}
 
-		svg {
-			width: 100%;
-			height: 100%;
-			fill: currentColor;
-			overflow: visible;
-		}
-	`]
+			svg {
+				width: 100%;
+				height: 100%;
+				fill: currentColor;
+				overflow: visible;
+			}
+		`,
+	]
 
 	@state() private name = ''
 
@@ -71,9 +73,7 @@ export default class SchmancyIcon extends SchmancyElement {
 		return html`
 			<slot style="display:none"></slot>
 			${path
-				? html`<svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
-						${svg`<path d="${path}"/>`}
-					</svg>`
+				? html`<svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">${svg`<path d="${path}"/>`}</svg>`
 				: nothing}
 		`
 	}

package/src/icons/index.ts

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

package/src/iframe/iframe.ts

@@ -29,15 +29,17 @@ code{background:#f5f5f5;padding:.1em .3em;border-radius:3px;font-size:.9em}`
  */
 @customElement('schmancy-iframe')
 export default class SchmancyIframe extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-	}
-	iframe {
-		border: 0;
-		width: 100%;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: block;
+			}
+			iframe {
+				border: 0;
+				width: 100%;
+			}
+		`,
+	]
 	/** HTML body fragment to render inside the iframe */
 	@property({ type: String }) html = ''
 

package/src/index.ts

@@ -5,6 +5,7 @@ export * from './badge';
 export * from './boat';
 export * from './busy';
 export * from './button';
+export * from './calendar';
 export * from './card';
 export * from './form/fields/checkbox';
 export * from './form/fields/chips';

package/src/json/json.ts

@@ -6,7 +6,13 @@ import { $notify } from '@schmancy/notification'
 
 @customElement('schmancy-json')
 export class SchmancyJson extends SchmancyElement {
-	static styles = [css`:host { display: block }`];
+	static styles = [
+		css`
+			:host {
+				display: block;
+			}
+		`,
+	]
 	@property({ type: Object }) data: Record<string, any> = {}
 	@property({ type: Array }) highlightKeys: string[] = []
 	@property({ type: Boolean }) compact = false
@@ -33,7 +39,8 @@ export class SchmancyJson extends SchmancyElement {
 
 	render() {
 		const jsonString = JSON.stringify(this.data, null, this.compact ? 0 : 2)
-		const highlighted = this.highlightKeys.length > 0 ? this.highlightChanges(jsonString, this.highlightKeys) : jsonString
+		const highlighted =
+			this.highlightKeys.length > 0 ? this.highlightChanges(jsonString, this.highlightKeys) : jsonString
 
 		return html`
 			<div

package/src/kbd/kbd.ts

@@ -18,34 +18,36 @@ import { customElement, property } from 'lit/decorators.js'
  */
 @customElement('schmancy-kbd')
 export class SchmancyKbd extends SchmancyElement {
-	static styles = [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;
-	}
-`];
+	static styles = [
+		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() {

package/src/layout/scroll/index.ts

@@ -1 +1 @@
-export * from './scroll'
+export * from './scroll'

package/src/layout/scroll/scroll.ts

@@ -7,38 +7,36 @@ import { debounceTime, filter, fromEvent, takeUntil } from 'rxjs'
  * Custom scroll event interface for the SchmancyScroll component.
  * Contains detailed information about the scroll state.
  */
-export interface SchmancyScrollEvent
-	extends CustomEvent<{
-		/** Current scroll position from the top */
-		scrollTop: number
-		/** Total scrollable height of the content */
-		scrollHeight: number
-		/** Visible height of the container */
-		clientHeight: number
-		/** Original scroll event */
-		e: Event
-		/** Current scroll position from the left (for horizontal scrolling) */
-		scrollLeft?: number
-		/** Total scrollable width of the content (for horizontal scrolling) */
-		scrollWidth?: number
-		/** Visible width of the container (for horizontal scrolling) */
-		clientWidth?: number
-	}> {}
+export interface SchmancyScrollEvent extends CustomEvent<{
+	/** Current scroll position from the top */
+	scrollTop: number
+	/** Total scrollable height of the content */
+	scrollHeight: number
+	/** Visible height of the container */
+	clientHeight: number
+	/** Original scroll event */
+	e: Event
+	/** Current scroll position from the left (for horizontal scrolling) */
+	scrollLeft?: number
+	/** Total scrollable width of the content (for horizontal scrolling) */
+	scrollWidth?: number
+	/** Visible width of the container (for horizontal scrolling) */
+	clientWidth?: number
+}> {}
 
 /**
  * Command event interface for controlling SchmancyScroll components
  */
-export interface SchmancyScrollCommandEvent
-	extends CustomEvent<{
-		/** Target component name */
-		name: string
-		/** Command action to perform */
-		action: 'scrollTo'
-		/** Scroll position for scrollTo action */
-		top: number
-		/** Horizontal scroll position for scrollTo action (optional) */
-		left?: number
-	}> {}
+export interface SchmancyScrollCommandEvent extends CustomEvent<{
+	/** Target component name */
+	name: string
+	/** Command action to perform */
+	action: 'scrollTo'
+	/** Scroll position for scrollTo action */
+	top: number
+	/** Horizontal scroll position for scrollTo action (optional) */
+	left?: number
+}> {}
 
 // Augment the HTMLElementEventMap to include our custom events
 declare global {
@@ -85,32 +83,34 @@ declare global {
  */
 @customElement('schmancy-scroll')
 export class SchmancyScroll extends SchmancyElement {
-	static styles = [css`
-	:host {
-		/* Flexible sizing for different layout contexts */
-		width: 100%;
-		min-height: 0; /* Allow flex shrinking */
-		flex: 1; /* Grow in flex containers */
-		box-sizing: border-box; /* Ensures proper sizing */
-		display: block;
-		position: relative;
-		scroll-behavior: smooth;
-		overscroll-behavior-x: contain;
-		overscroll-behavior-y: auto;
-	}
-	/* Fallback for non-flex contexts */
-	:host(.explicit-height) {
-		height: 100%;
-		flex: none;
-	}
-	:host([hide]) {
-		-ms-overflow-style: none; /* IE and Edge */
-		scrollbar-width: none; /* Firefox */
-	}
-	:host([hide])::-webkit-scrollbar {
-		display: none; /* Chrome, Safari, and Opera */
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				/* Flexible sizing for different layout contexts */
+				width: 100%;
+				min-height: 0; /* Allow flex shrinking */
+				flex: 1; /* Grow in flex containers */
+				box-sizing: border-box; /* Ensures proper sizing */
+				display: block;
+				position: relative;
+				scroll-behavior: smooth;
+				overscroll-behavior-x: contain;
+				overscroll-behavior-y: auto;
+			}
+			/* Fallback for non-flex contexts */
+			:host(.explicit-height) {
+				height: 100%;
+				flex: none;
+			}
+			:host([hide]) {
+				-ms-overflow-style: none; /* IE and Edge */
+				scrollbar-width: none; /* Firefox */
+			}
+			:host([hide])::-webkit-scrollbar {
+				display: none; /* Chrome, Safari, and Opera */
+			}
+		`,
+	]
 	/**
 	 * Determines whether the scrollbar is hidden.
 	 *

package/src/lightbox/lightbox-service.ts

@@ -19,7 +19,6 @@ export type LightboxConfig = {
 	props?: Record<string, unknown>
 }
 
-
 /**
  * Lightbox service for centralized lightbox management.
  * Follows the same patterns as DialogService.
@@ -71,14 +70,15 @@ class LightboxService {
 
 							// Create overlay element
 							const overlay = document.createElement('div')
-							overlay.className = 'fixed inset-0 flex items-center justify-center opacity-0 bg-black/95 backdrop-blur-sm'
+							overlay.className =
+								'fixed inset-0 flex items-center justify-center opacity-0 bg-black/95 backdrop-blur-sm'
 							overlay.style.zIndex = String(overlayStack.getNextZIndex())
 
 							container.appendChild(overlay)
 							document.body.style.overflow = 'hidden'
 
 							return { overlay, config, container }
-						})
+						}),
 					)
 				}),
 				tap(({ overlay, config }) => {
@@ -103,22 +103,26 @@ class LightboxService {
 					}
 
 					// Keyboard handling via RxJS
-					fromEvent<KeyboardEvent>(document, 'keydown').pipe(
-						takeUntil(this.dismissSubject),
-						filter(() => !!this.activeLightbox),
-						tap(e => {
-							if (e.key === 'Escape') this.dismiss()
-							if (e.key === 'ArrowLeft' && this.activeLightbox!.images.length > 1) this.navigatePrev()
-							if (e.key === 'ArrowRight' && this.activeLightbox!.images.length > 1) this.navigateNext()
-						})
-					).subscribe()
+					fromEvent<KeyboardEvent>(document, 'keydown')
+						.pipe(
+							takeUntil(this.dismissSubject),
+							filter(() => !!this.activeLightbox),
+							tap(e => {
+								if (e.key === 'Escape') this.dismiss()
+								if (e.key === 'ArrowLeft' && this.activeLightbox!.images.length > 1) this.navigatePrev()
+								if (e.key === 'ArrowRight' && this.activeLightbox!.images.length > 1) this.navigateNext()
+							}),
+						)
+						.subscribe()
 
 					// Click overlay to close via RxJS
-					fromEvent<MouseEvent>(overlay, 'click').pipe(
-						takeUntil(this.dismissSubject),
-						filter(e => e.target === overlay),
-						tap(() => this.dismiss())
-					).subscribe()
+					fromEvent<MouseEvent>(overlay, 'click')
+						.pipe(
+							takeUntil(this.dismissSubject),
+							filter(e => e.target === overlay),
+							tap(() => this.dismiss()),
+						)
+						.subscribe()
 
 					// Render content
 					if (config.component) {
@@ -260,7 +264,12 @@ class LightboxService {
 	/**
 	 * Render image lightbox
 	 */
-	private renderLightbox(overlay: HTMLDivElement, config: LightboxConfig, images: string[], currentIndex: number): void {
+	private renderLightbox(
+		overlay: HTMLDivElement,
+		config: LightboxConfig,
+		images: string[],
+		currentIndex: number,
+	): void {
 		const currentSrc = images[currentIndex]
 		const isGallery = images.length > 1