@mhmo91/schmancy 0.10.41 → 0.10.43

package/src/busy/spinner.ts

@@ -4,88 +4,101 @@ import { customElement, property } from 'lit/decorators.js'
 
 @customElement('schmancy-spinner')
 export default class SchmnacySpinner extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: inline-block;
-		color: inherit; /* Inherit from parent by default */
-	}
-
-	/* Explicit color options when needed */
-	:host([color="primary"]) {
-		color: var(--schmancy-sys-color-primary-default);
-	}
-
-	:host([color="on-primary"]) {
-		color: var(--schmancy-sys-color-primary-on);
-	}
-
-	:host([color="secondary"]) {
-		color: var(--schmancy-sys-color-secondary-default);
-	}
-
-	:host([color="on-secondary"]) {
-		color: var(--schmancy-sys-color-secondary-on);
-	}
-
-	:host([color="tertiary"]) {
-		color: var(--schmancy-sys-color-tertiary-default);
-	}
-
-	:host([color="on-tertiary"]) {
-		color: var(--schmancy-sys-color-tertiary-on);
-	}
-
-	:host([color="error"]) {
-		color: var(--schmancy-sys-color-error-default);
-	}
-
-	:host([color="on-error"]) {
-		color: var(--schmancy-sys-color-error-on);
-	}
-
-	:host([color="success"]) {
-		color: var(--schmancy-sys-color-success-default);
-	}
-
-	:host([color="on-success"]) {
-		color: var(--schmancy-sys-color-success-on);
-	}
-
-	:host([color="surface"]) {
-		color: var(--schmancy-sys-color-surface-default);
-	}
-
-	:host([color="on-surface"]) {
-		color: var(--schmancy-sys-color-surface-on);
-	}
-
-	:host([color="surface-variant"]) {
-		color: var(--schmancy-sys-color-surface-variant-default);
-	}
-
-	:host([color="on-surface-variant"]) {
-		color: var(--schmancy-sys-color-surface-onVariant);
-	}
-
-	.spinner {
-		animation: spin 1s linear infinite;
-		animation-direction: reverse;
-	}
-
-	@keyframes spin {
-		from {
-			transform: rotate(0deg);
-		}
-		to {
-			transform: rotate(360deg);
-		}
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: inline-block;
+				color: inherit; /* Inherit from parent by default */
+			}
+
+			/* Explicit color options when needed */
+			:host([color='primary']) {
+				color: var(--schmancy-sys-color-primary-default);
+			}
+
+			:host([color='on-primary']) {
+				color: var(--schmancy-sys-color-primary-on);
+			}
+
+			:host([color='secondary']) {
+				color: var(--schmancy-sys-color-secondary-default);
+			}
+
+			:host([color='on-secondary']) {
+				color: var(--schmancy-sys-color-secondary-on);
+			}
+
+			:host([color='tertiary']) {
+				color: var(--schmancy-sys-color-tertiary-default);
+			}
+
+			:host([color='on-tertiary']) {
+				color: var(--schmancy-sys-color-tertiary-on);
+			}
+
+			:host([color='error']) {
+				color: var(--schmancy-sys-color-error-default);
+			}
+
+			:host([color='on-error']) {
+				color: var(--schmancy-sys-color-error-on);
+			}
+
+			:host([color='success']) {
+				color: var(--schmancy-sys-color-success-default);
+			}
+
+			:host([color='on-success']) {
+				color: var(--schmancy-sys-color-success-on);
+			}
+
+			:host([color='surface']) {
+				color: var(--schmancy-sys-color-surface-default);
+			}
+
+			:host([color='on-surface']) {
+				color: var(--schmancy-sys-color-surface-on);
+			}
+
+			:host([color='surface-variant']) {
+				color: var(--schmancy-sys-color-surface-variant-default);
+			}
+
+			:host([color='on-surface-variant']) {
+				color: var(--schmancy-sys-color-surface-onVariant);
+			}
+
+			.spinner {
+				animation: spin 1s linear infinite;
+				animation-direction: reverse;
+			}
+
+			@keyframes spin {
+				from {
+					transform: rotate(0deg);
+				}
+				to {
+					transform: rotate(360deg);
+				}
+			}
+		`,
+	]
 	@property({ type: String, reflect: true })
-	color?: 'primary' | 'on-primary' | 'secondary' | 'on-secondary' |
-	        'tertiary' | 'on-tertiary' | 'error' | 'on-error' |
-	        'success' | 'on-success' | 'surface' | 'on-surface' |
-	        'surface-variant' | 'on-surface-variant'
+	color?:
+		| 'primary'
+		| 'on-primary'
+		| 'secondary'
+		| 'on-secondary'
+		| 'tertiary'
+		| 'on-tertiary'
+		| 'error'
+		| 'on-error'
+		| 'success'
+		| 'on-success'
+		| 'surface'
+		| 'on-surface'
+		| 'surface-variant'
+		| 'on-surface-variant'
 
 	/**
 	 * Size of the spinner - M3 aligned tokens or numeric Tailwind units
@@ -99,10 +112,10 @@ export default class SchmnacySpinner extends SchmancyElement {
 		// M3 aligned token sizes (fit inside buttons of same token)
 		const tokenSizes: Record<string, number> = {
 			xxs: 12, // fits in 24px button (ultra-compact)
-			xs: 16,  // fits in 32px button
-			sm: 20,  // fits in 40px button
-			md: 24,  // fits in 48px button (default)
-			lg: 32,  // fits in 56px button
+			xs: 16, // fits in 32px button
+			sm: 20, // fits in 40px button
+			md: 24, // fits in 48px button (default)
+			lg: 32, // fits in 56px button
 		}
 
 		// Support both token and numeric sizes for backward compatibility
@@ -120,42 +133,42 @@ export default class SchmnacySpinner extends SchmancyElement {
 			width: `${sizeInPx}px`,
 			height: `${sizeInPx}px`,
 		}
-		
-		return this.glass ? html`
-			<div class="spinner relative" style=${this.styleMap(style)}>
-				<!-- Glass container with Apple-style effect -->
-				<div class="absolute inset-0 rounded-full backdrop-blur-xl backdrop-saturate-150
+
+		return this.glass
+			? html`
+					<div class="spinner relative" style=${this.styleMap(style)}>
+						<!-- Glass container with Apple-style effect -->
+						<div
+							class="absolute inset-0 rounded-full backdrop-blur-xl backdrop-saturate-150
 							bg-surface-container/20
 							shadow-[inset_0_1px_1px_0_rgba(255,255,255,0.2)]
-							border border-outline-variant/30"></div>
-				
-				<!-- Spinner SVG -->
-				<svg fill="none" viewBox="0 0 16 16" aria-hidden="true" role="img" 
-					 style="width: 100%; height: 100%;" class="relative z-10">
-					<path
-						opacity=".7"
-						d="M8 15A7 7 0 108 1a7 7 0 000 14v0z"
-						stroke="currentColor"
-						stroke-width="2"
-					></path>
-					<path d="M15 8a7 7 0 01-7 7" stroke="currentColor" stroke-width="2"></path>
-					<path d="M8 12a4 4 0 100-8 4 4 0 000 8z" fill="currentColor" opacity="0.8"></path>
-				</svg>
-			</div>
-		` : html`
-			<div class="spinner" style=${this.styleMap(style)}>
-				<svg fill="none" viewBox="0 0 16 16" aria-hidden="true" role="img" style="width: 100%; height: 100%;">
-					<path
-						opacity=".5"
-						d="M8 15A7 7 0 108 1a7 7 0 000 14v0z"
-						stroke="currentColor"
-						stroke-width="2"
-					></path>
-					<path d="M15 8a7 7 0 01-7 7" stroke="currentColor" stroke-width="2"></path>
-					<path d="M8 12a4 4 0 100-8 4 4 0 000 8z" fill="currentColor"></path>
-				</svg>
-			</div>
-		`
+							border border-outline-variant/30"
+						></div>
+
+						<!-- Spinner SVG -->
+						<svg
+							fill="none"
+							viewBox="0 0 16 16"
+							aria-hidden="true"
+							role="img"
+							style="width: 100%; height: 100%;"
+							class="relative z-10"
+						>
+							<path opacity=".7" d="M8 15A7 7 0 108 1a7 7 0 000 14v0z" stroke="currentColor" stroke-width="2"></path>
+							<path d="M15 8a7 7 0 01-7 7" stroke="currentColor" stroke-width="2"></path>
+							<path d="M8 12a4 4 0 100-8 4 4 0 000 8z" fill="currentColor" opacity="0.8"></path>
+						</svg>
+					</div>
+				`
+			: html`
+					<div class="spinner" style=${this.styleMap(style)}>
+						<svg fill="none" viewBox="0 0 16 16" aria-hidden="true" role="img" style="width: 100%; height: 100%;">
+							<path opacity=".5" d="M8 15A7 7 0 108 1a7 7 0 000 14v0z" stroke="currentColor" stroke-width="2"></path>
+							<path d="M15 8a7 7 0 01-7 7" stroke="currentColor" stroke-width="2"></path>
+							<path d="M8 12a4 4 0 100-8 4 4 0 000 8z" fill="currentColor"></path>
+						</svg>
+					</div>
+				`
 	}
 }
 

package/src/button/button.test.ts

@@ -99,7 +99,11 @@ describe('schmancy-button busy mirror', () => {
 		let resolveSubmit: (() => void) | null = null
 		form.addEventListener('submit', (e: Event) => {
 			const detail = (e as CustomEvent<SchmancyFormSubmitDetail>).detail
-			detail.until(new Promise<void>(res => { resolveSubmit = res }))
+			detail.until(
+				new Promise<void>(res => {
+					resolveSubmit = res
+				}),
+			)
 		})
 
 		btn.click()

package/src/button/button.ts

@@ -25,38 +25,49 @@ export type ButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warni
  */
 @customElement('schmancy-button')
 export class SchmancyButton extends SchmancyElement {
-	static styles = [css`:host{
-		display: inline-flex;
-		flex-shrink: 0;
-		overflow: hidden;
-		position: relative;
-		touch-action: manipulation;
-		border-radius: 1rem;
-		transition:
-			box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
-			transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
-	}
-	:host([width="full"]) {
-		display: flex;
-		width: 100%;
-	}
-	:host(:hover:not([disabled])) {
-		box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);
-	}
-	:host(:active:not([disabled])) {
-		transform: scale(0.97);
-		box-shadow: 0 1px 4px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 10%, transparent);
-		transition-duration: 100ms;
-	}
-	@media (prefers-reduced-motion: reduce) {
-		:host { transition: none; }
-		:host(:hover:not([disabled])) { box-shadow: none; }
-		:host(:active:not([disabled])) { transform: none; box-shadow: none; }
-	}
-	:host *,
-	* {
-		touch-action: manipulation;
-	}`]
+	static styles = [
+		css`
+			:host {
+				display: inline-flex;
+				flex-shrink: 0;
+				overflow: hidden;
+				position: relative;
+				touch-action: manipulation;
+				border-radius: 1rem;
+				transition:
+					box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
+					transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+			}
+			:host([width='full']) {
+				display: flex;
+				width: 100%;
+			}
+			:host(:hover:not([disabled])) {
+				box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);
+			}
+			:host(:active:not([disabled])) {
+				transform: scale(0.97);
+				box-shadow: 0 1px 4px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 10%, transparent);
+				transition-duration: 100ms;
+			}
+			@media (prefers-reduced-motion: reduce) {
+				:host {
+					transition: none;
+				}
+				:host(:hover:not([disabled])) {
+					box-shadow: none;
+				}
+				:host(:active:not([disabled])) {
+					transform: none;
+					box-shadow: none;
+				}
+			}
+			:host *,
+			* {
+				touch-action: manipulation;
+			}
+		`,
+	]
 
 	protected static shadowRootOptions = {
 		...LitElement.shadowRootOptions,
@@ -264,11 +275,11 @@ export class SchmancyButton extends SchmancyElement {
 	protected get imgClasses(): string[] {
 		// M3 spec: icon sizes scale with button size
 		const sizeMap = {
-			xxs: 'w-3 h-3',    // 12px for 24px button (ultra-compact)
-			xs: 'w-4 h-4',     // 16px for 32px button (M3 dense)
-			sm: 'w-5 h-5',     // 20px for 40px button (M3 default)
-			md: 'w-6 h-6',     // 24px for 48px button (M3 large)
-			lg: 'w-7 h-7'      // 28px for 56px button (M3 extra large)
+			xxs: 'w-3 h-3', // 12px for 24px button (ultra-compact)
+			xs: 'w-4 h-4', // 16px for 32px button (M3 dense)
+			sm: 'w-5 h-5', // 20px for 40px button (M3 default)
+			md: 'w-6 h-6', // 24px for 48px button (M3 large)
+			lg: 'w-7 h-7', // 28px for 56px button (M3 extra large)
 		}
 		return [sizeMap[this.size], 'object-contain']
 	}
@@ -301,37 +312,36 @@ export class SchmancyButton extends SchmancyElement {
 
 	render() {
 		// Map 'tonal' variant to 'filled tonal' for backwards compatibility
-		const effectiveVariant = this.variant === 'tonal' ? 'filled tonal' : this.variant;
+		const effectiveVariant = this.variant === 'tonal' ? 'filled tonal' : this.variant
 
 		// Compute classes for the interactive element.
 		const classes = {
-			'z-0 transition-all duration-200 relative rounded-2xl flex justify-center items-center outline-secondary-default focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-hidden flex-1 overflow-hidden':
-				true,
+			'z-0 transition-all duration-200 relative rounded-2xl flex justify-center items-center outline-secondary-default focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-hidden flex-1 overflow-hidden': true,
 			// Height - M3 spec: 24dp (xxs) → 32dp (dense) → 40dp (default) → 48dp (large) → 56dp (XL)
-			'h-6': this.size === 'xxs',   // 24px - Ultra-compact
-			'h-8': this.size === 'xs',    // 32px - M3 dense/compact
-			'h-10': this.size === 'sm',   // 40px - M3 default
-			'h-12': this.size === 'md',   // 48px - M3 large
-			'h-14': this.size === 'lg',   // 56px - M3 extra large
+			'h-6': this.size === 'xxs', // 24px - Ultra-compact
+			'h-8': this.size === 'xs', // 32px - M3 dense/compact
+			'h-10': this.size === 'sm', // 40px - M3 default
+			'h-12': this.size === 'md', // 48px - M3 large
+			'h-14': this.size === 'lg', // 56px - M3 extra large
 			// Padding - M3 spec: horizontal padding 24dp default, scaled proportionally
-			'py-1 px-2': this.size === 'xxs',    // 4px/8px for 24px height
-			'py-2 px-4': this.size === 'xs',     // 8px/16px for 32px height
-			'py-2.5 px-5': this.size === 'sm',   // 10px/20px for 40px height
-			'py-3 px-6': this.size === 'md',     // 12px/24px for 48px height (M3 default)
-			'py-4 px-7': this.size === 'lg',     // 16px/28px for 56px height
+			'py-1 px-2': this.size === 'xxs', // 4px/8px for 24px height
+			'py-2 px-4': this.size === 'xs', // 8px/16px for 32px height
+			'py-2.5 px-5': this.size === 'sm', // 10px/20px for 40px height
+			'py-3 px-6': this.size === 'md', // 12px/24px for 48px height (M3 default)
+			'py-4 px-7': this.size === 'lg', // 16px/28px for 56px height
 			// Typography - M3 spec: label-large (14px) default, scaled
 			'text-[10px] font-medium leading-3': this.size === 'xxs', // 10px
-			'text-xs font-medium leading-4': this.size === 'xs',   // 12px
-			'text-sm font-medium leading-5': this.size === 'sm' || this.size === 'md',   // 14px - M3 label-large
+			'text-xs font-medium leading-4': this.size === 'xs', // 12px
+			'text-sm font-medium leading-5': this.size === 'sm' || this.size === 'md', // 14px - M3 label-large
 			'text-base font-medium leading-6': this.size === 'lg', // 16px
 			// Letter spacing - M3 spec
 			'tracking-[0.1px]': true,
 			// Gap - Scaled with size
 			'gap-0.5': this.size === 'xxs', // 2px
-			'gap-1': this.size === 'xs',    // 4px
-			'gap-1.5': this.size === 'sm',  // 6px
-			'gap-2': this.size === 'md',    // 8px
-			'gap-2.5': this.size === 'lg',  // 10px
+			'gap-1': this.size === 'xs', // 4px
+			'gap-1.5': this.size === 'sm', // 6px
+			'gap-2': this.size === 'md', // 8px
+			'gap-2.5': this.size === 'lg', // 10px
 			'cursor-pointer': !this.disabled,
 			'opacity-[0.38]': this.disabled,
 			'hover:shadow-sm': !this.disabled && effectiveVariant === 'elevated',
@@ -379,20 +389,37 @@ export class SchmancyButton extends SchmancyElement {
 			'text-warning-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'warning',
 			'text-info-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'info',
 			// Text and elevated variants - text colors
-			'text-primary-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'primary',
-			'text-secondary-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'secondary',
-			'text-success-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'success',
-			'text-error-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'error',
-			'text-warning-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'warning',
-			'text-info-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'info',
-			'text-surface-onVariant': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined' || effectiveVariant === 'filled tonal') && this.effectiveColor === 'neutral',
+			'text-primary-default':
+				(effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') &&
+				this.effectiveColor === 'primary',
+			'text-secondary-default':
+				(effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') &&
+				this.effectiveColor === 'secondary',
+			'text-success-default':
+				(effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') &&
+				this.effectiveColor === 'success',
+			'text-error-default':
+				(effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') &&
+				this.effectiveColor === 'error',
+			'text-warning-default':
+				(effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') &&
+				this.effectiveColor === 'warning',
+			'text-info-default':
+				(effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') &&
+				this.effectiveColor === 'info',
+			'text-surface-onVariant':
+				(effectiveVariant === 'text' ||
+					effectiveVariant === 'elevated' ||
+					effectiveVariant === 'outlined' ||
+					effectiveVariant === 'filled tonal') &&
+				this.effectiveColor === 'neutral',
 		}
 
 		const stateLayerClasses = {
 			'absolute inset-0 hover:opacity-[0.08] z-0 rounded-2xl': true,
 			// M3 focus and pressed states
-			'focus-visible:opacity-[0.10]': true,  // M3 focus state
-			'active:opacity-[0.10]': true,         // M3 pressed state
+			'focus-visible:opacity-[0.10]': true, // M3 focus state
+			'active:opacity-[0.10]': true, // M3 pressed state
 			// Filled variant hover
 			'hover:bg-primary-on': effectiveVariant === 'filled' && this.effectiveColor === 'primary',
 			'hover:bg-secondary-on': effectiveVariant === 'filled' && this.effectiveColor === 'secondary',
@@ -402,13 +429,27 @@ export class SchmancyButton extends SchmancyElement {
 			'hover:bg-info-on': effectiveVariant === 'filled' && this.effectiveColor === 'info',
 			'hover:bg-surface-on': effectiveVariant === 'filled' && this.effectiveColor === 'neutral',
 			// Outlined, elevated, text variants hover
-			'hover:bg-primary-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'primary',
-			'hover:bg-secondary-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'secondary',
-			'hover:bg-success-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'success',
-			'hover:bg-error-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'error',
-			'hover:bg-warning-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'warning',
-			'hover:bg-info-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'info',
-			'hover:bg-surface-onVariant': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'neutral',
+			'hover:bg-primary-default':
+				(effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') &&
+				this.effectiveColor === 'primary',
+			'hover:bg-secondary-default':
+				(effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') &&
+				this.effectiveColor === 'secondary',
+			'hover:bg-success-default':
+				(effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') &&
+				this.effectiveColor === 'success',
+			'hover:bg-error-default':
+				(effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') &&
+				this.effectiveColor === 'error',
+			'hover:bg-warning-default':
+				(effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') &&
+				this.effectiveColor === 'warning',
+			'hover:bg-info-default':
+				(effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') &&
+				this.effectiveColor === 'info',
+			'hover:bg-surface-onVariant':
+				(effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') &&
+				this.effectiveColor === 'neutral',
 			// Filled tonal hover
 			'hover:bg-primary-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'primary',
 			'hover:bg-secondary-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'secondary',