@mhmo91/schmancy 0.10.42 → 0.10.44

package/src/audio/sound.service.ts

@@ -719,19 +719,19 @@ class SoundService {
 	// Don't use distinctUntilChanged for theme - we need all emissions including storage loads
 	public readonly theme$ = SoundContext.$.pipe(
 		map(settings => settings.theme),
-		shareReplay(1)
+		shareReplay(1),
 	)
 
 	public readonly volume$ = SoundContext.$.pipe(
 		map(settings => settings.volume),
 		distinctUntilChanged(),
-		shareReplay(1)
+		shareReplay(1),
 	)
 
 	public readonly muted$ = SoundContext.$.pipe(
 		map(settings => settings.muted),
 		distinctUntilChanged(),
-		shareReplay(1)
+		shareReplay(1),
 	)
 
 	/** BehaviorSubject for current theme name (for debugging/display) */
@@ -991,8 +991,29 @@ class SoundService {
 			'hostile',
 			'contemptuous',
 		]
-		const tiredFeelings: Feeling[] = ['tired', 'exhausted', 'drained', 'burnedOut', 'numb', 'bored', 'unmotivated', 'apathetic', 'restless']
-		const calmFeelings: Feeling[] = ['calm', 'relaxed', 'atEase', 'balanced', 'stable', 'secure', 'safe', 'centered', 'grounded', 'accepting']
+		const tiredFeelings: Feeling[] = [
+			'tired',
+			'exhausted',
+			'drained',
+			'burnedOut',
+			'numb',
+			'bored',
+			'unmotivated',
+			'apathetic',
+			'restless',
+		]
+		const calmFeelings: Feeling[] = [
+			'calm',
+			'relaxed',
+			'atEase',
+			'balanced',
+			'stable',
+			'secure',
+			'safe',
+			'centered',
+			'grounded',
+			'accepting',
+		]
 		const connectedFeelings: Feeling[] = [
 			'connected',
 			'accepted',

package/src/avatar/avatar.ts

@@ -67,11 +67,11 @@ export class SchmancyAvatar extends SchmancyElement {
 		// Size classes - M3 aligned: 20dp → 24dp → 32dp → 40dp → 48dp → 64dp
 		const sizeClasses = {
 			xxs: 'w-5 h-5 text-[8px]', // 20px - Ultra-compact
-			xs: 'w-6 h-6 text-xs',     // 24px - M3 compact
-			sm: 'w-8 h-8 text-sm',     // 32px - M3 small
+			xs: 'w-6 h-6 text-xs', // 24px - M3 compact
+			sm: 'w-8 h-8 text-sm', // 32px - M3 small
 			md: 'w-10 h-10 text-base', // 40px - M3 medium (default)
-			lg: 'w-12 h-12 text-lg',   // 48px - M3 large
-			xl: 'w-16 h-16 text-xl',   // 64px - M3 extra large
+			lg: 'w-12 h-12 text-lg', // 48px - M3 large
+			xl: 'w-16 h-16 text-xl', // 64px - M3 extra large
 		}
 
 		// Shape classes

package/src/badge/badge.ts

@@ -33,13 +33,15 @@ export type BadgeShape = 'pill' | 'rounded'
  */
 @customElement('schmancy-badge')
 export class SchmancyBadgeV2 extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: inline-flex;
-		flex-shrink: 0;
-		width: fit-content;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: inline-flex;
+				flex-shrink: 0;
+				width: fit-content;
+			}
+		`,
+	]
 	/**
 	 * The semantic color of the badge.
 	 * @attr
@@ -70,9 +72,11 @@ export class SchmancyBadgeV2 extends SchmancyElement {
 
 	render() {
 		const sizeClasses =
-			this.size === 'xs' ? 'text-xs px-1.5 py-0.5'
-			: this.size === 'sm' ? 'text-xs px-2 py-0.5'
-			: 'text-sm px-2.5 py-0.5'
+			this.size === 'xs'
+				? 'text-xs px-1.5 py-0.5'
+				: this.size === 'sm'
+					? 'text-xs px-2 py-0.5'
+					: 'text-sm px-2.5 py-0.5'
 
 		const shapeClass = this.shape === 'rounded' ? 'rounded-md' : 'rounded-full'
 
@@ -121,12 +125,11 @@ export class SchmancyBadgeV2 extends SchmancyElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'sch-badge': SchmancyBadgeV2,
+		'sch-badge': SchmancyBadgeV2
 		'schmancy-badge': SchmancyBadgeV2
 	}
 }
 
-
 // Register the component with the legacy tag name for backward compatibility
 @customElement('sch-badge')
 export class ScBadgeV2 extends SchmancyBadgeV2 {}

package/src/badge/index.ts

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

package/src/boat/boat.ts

@@ -399,7 +399,7 @@ export default class SchmancyBoat extends SchmancyElement {
 		return html`
 			<schmancy-surface
 				${ref(this.containerRef)}
-				type="glass"
+				type="container"
 				class="${containerClasses} overflow-hidden rounded-2xl shadow-md"
 				style=${containerStyles}
 				aria-expanded=${this.open}

package/src/breadcrumb/breadcrumb.ts

@@ -13,25 +13,27 @@ import { customElement, property } from 'lit/decorators.js'
  */
 @customElement('schmancy-breadcrumb')
 export class SchmancyBreadcrumb extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-	}
-	nav {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 0.25rem;
-	}
-	.sep {
-		color: var(--schmancy-sys-color-surface-onVariant, #79747e);
-		user-select: none;
-		padding: 0 0.25rem;
-	}
-	::slotted(schmancy-breadcrumb-item:last-of-type) {
-		font-weight: 500;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: block;
+			}
+			nav {
+				display: flex;
+				flex-wrap: wrap;
+				align-items: center;
+				gap: 0.25rem;
+			}
+			.sep {
+				color: var(--schmancy-sys-color-surface-onVariant, #79747e);
+				user-select: none;
+				padding: 0 0.25rem;
+			}
+			::slotted(schmancy-breadcrumb-item:last-of-type) {
+				font-weight: 500;
+			}
+		`,
+	]
 	@property({ type: String }) separator = '/'
 
 	connectedCallback(): void {
@@ -80,19 +82,22 @@ export class SchmancyBreadcrumb extends SchmancyElement {
  */
 @customElement('schmancy-breadcrumb-item')
 export class SchmancyBreadcrumbItem extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: inline-block;
-		width: fit-content;
-	}
-	a, span {
-		color: inherit;
-		text-decoration: none;
-	}
-	a:hover {
-		text-decoration: underline;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: inline-block;
+				width: fit-content;
+			}
+			a,
+			span {
+				color: inherit;
+				text-decoration: none;
+			}
+			a:hover {
+				text-decoration: underline;
+			}
+		`,
+	]
 	@property({ type: String }) href = ''
 	@property({ type: Boolean, reflect: true }) current = false
 

package/src/busy/busy.ts

@@ -4,27 +4,30 @@ import { customElement } from 'lit/decorators.js'
 
 @customElement('schmancy-busy')
 export default class SchmancyBusy extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: inline;
-		position: absolute;
-		inset: 0;
-		pointer-events: all;
-		z-index: 50;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: inline;
+				position: absolute;
+				inset: 0;
+				pointer-events: all;
+				z-index: 50;
+			}
+		`,
+	]
 	protected render(): unknown {
 		return html`
 			<!-- Clean overlay with subtle backdrop -->
-			<div class="absolute inset-0 flex items-center justify-center bg-surface-container/10 backdrop-blur-xs rounded-[inherit]">
+			<div
+				class="absolute inset-0 flex items-center justify-center bg-surface-container/10 backdrop-blur-xs rounded-[inherit]"
+			>
 				<!-- Content container with clean surface -->
 				<div class="relative flex items-center justify-center p-4">
-					
 					<!-- Content slot -->
 					<div class="relative z-10">
 						<slot>
 							<!-- Default spinner if no content provided -->
-							<schmancy-spinner ></schmancy-spinner>
+							<schmancy-spinner></schmancy-spinner>
 						</slot>
 					</div>
 				</div>

package/src/busy/index.ts

@@ -1,2 +1,2 @@
-export * from './busy';
-export * from './spinner';
+export * from './busy'
+export * from './spinner'

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()