@mhmo91/schmancy 0.10.41 → 0.10.43

package/src/date-range-inline/index.ts

@@ -1,2 +1,2 @@
-export { default as SchmancyDateRangeInline } from './date-range-inline'
-export type { SchmancyDateRangeInlineChangeEvent } from './date-range-inline'
+export { default as SchmancyDateRangeInline } from './date-range-inline'
+export type { SchmancyDateRangeInlineChangeEvent } from './date-range-inline'

package/src/delay/index.ts

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

package/src/details/details.ts

@@ -11,35 +11,37 @@ import { reducedMotion$ } from '../directives/reduced-motion'
 
 @customElement('schmancy-details')
 export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
-	static styles = [css`
-		:host {
-			display: block;
-		}
+	static styles = [
+		css`
+			:host {
+				display: block;
+				border-radius: 1rem;
+			}
 
-		:host([overlay]) {
-			position: relative;
-		}
+			:host([overlay]) {
+				position: relative;
+			}
 
-		:host([open]) {
-			z-index: 10;
-		}
+			:host([open]) {
+				z-index: 10;
+			}
 
-		details {
-			background: inherit;
-			color: inherit;
-			border-radius: inherit;
-		}
+			details {
+				background: inherit;
+				color: inherit;
+				border-radius: inherit;
+			}
 
-		summary::-webkit-details-marker {
-			display: none;
-		}
+			summary::-webkit-details-marker {
+				display: none;
+			}
 
-		summary {
-			list-style: none;
-			color: inherit;
-		}
+			summary {
+				list-style: none;
+				color: inherit;
+			}
 
-		/*
+			/*
 		 * Blackbird 2.1 — CSS-driven collapse/expand
 		 *
 		 * Single animation system: CSS grid transition handles height,
@@ -47,40 +49,52 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 		 * No competing Web Animations API on content.
 		 */
 
-		.content-wrapper {
-			display: grid;
-			grid-template-rows: 0fr;
-			overflow: hidden;
-			opacity: 0;
-			transition:
-				grid-template-rows 400ms cubic-bezier(0.34, 1.2, 0.64, 1),
-				opacity 250ms ease;
-		}
-
-		/* Spring easing when linear() is supported */
-		@supports (animation-timing-function: linear(0, 1)) {
 			.content-wrapper {
+				display: grid;
+				grid-template-rows: 0fr;
+				overflow: hidden;
+				opacity: 0;
 				transition:
-					grid-template-rows 400ms linear(
-						0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
-						0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50%, 1.015 54.8%,
-						1.017 63.3%, 1.001
-					),
+					grid-template-rows 400ms cubic-bezier(0.34, 1.2, 0.64, 1),
 					opacity 250ms ease;
 			}
-		}
 
-		.content-wrapper[data-open='true'] {
-			grid-template-rows: 1fr;
-			opacity: 1;
-		}
+			/* Spring easing when linear() is supported */
+			@supports (animation-timing-function: linear(0, 1)) {
+				.content-wrapper {
+					transition:
+						grid-template-rows 400ms
+							linear(
+								0,
+								0.006,
+								0.025 2.8%,
+								0.101 6.1%,
+								0.539 18.9%,
+								0.721 25.3%,
+								0.849 31.5%,
+								0.937 38.1%,
+								0.968 41.8%,
+								0.991 45.7%,
+								1.006 50%,
+								1.015 54.8%,
+								1.017 63.3%,
+								1.001
+							),
+						opacity 250ms ease;
+				}
+			}
 
-		.content-inner {
-			min-height: 0;
-			overflow: hidden;
-		}
+			.content-wrapper[data-open='true'] {
+				grid-template-rows: 1fr;
+				opacity: 1;
+			}
 
-		/*
+			.content-inner {
+				min-height: 0;
+				overflow: hidden;
+			}
+
+			/*
 		 * Progressive Enhancement: ::details-content (Chrome 131+)
 		 *
 		 * When both ::details-content AND interpolate-size are supported,
@@ -88,41 +102,42 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 		 * close via transition-behavior: allow-discrete on content-visibility.
 		 * The grid wrapper becomes transparent (display: contents).
 		 */
-		@supports selector(::details-content) and (interpolate-size: allow-keywords) {
-			:host {
-				interpolate-size: allow-keywords;
-			}
-
-			.content-wrapper {
-				display: contents;
-			}
-
-			details::details-content {
-				block-size: 0;
-				overflow-y: clip;
-				opacity: 0;
-				transition:
-					block-size 400ms cubic-bezier(0.34, 1.2, 0.64, 1),
-					opacity 250ms ease,
-					content-visibility 400ms;
-				transition-behavior: allow-discrete;
-			}
-
-			details[open]::details-content {
-				block-size: auto;
-				opacity: 1;
+			@supports selector(::details-content) and (interpolate-size: allow-keywords) {
+				:host {
+					interpolate-size: allow-keywords;
+				}
+
+				.content-wrapper {
+					display: contents;
+				}
+
+				details::details-content {
+					block-size: 0;
+					overflow-y: clip;
+					opacity: 0;
+					transition:
+						block-size 400ms cubic-bezier(0.34, 1.2, 0.64, 1),
+						opacity 250ms ease,
+						content-visibility 400ms;
+					transition-behavior: allow-discrete;
+				}
+
+				details[open]::details-content {
+					block-size: auto;
+					opacity: 1;
+				}
 			}
-		}
 
-		@media (prefers-reduced-motion: reduce) {
-			.content-wrapper {
-				transition: none;
-			}
-			details::details-content {
-				transition: none;
+			@media (prefers-reduced-motion: reduce) {
+				.content-wrapper {
+					transition: none;
+				}
+				details::details-content {
+					transition: none;
+				}
 			}
-		}
-	`];
+		`,
+	]
 	protected static shadowRootOptions = {
 		...LitElement.shadowRootOptions,
 		mode: 'open' as const,
@@ -184,8 +199,7 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 
 	constructor() {
 		super()
-		this.type = 'solid'
-		this.rounded = 'all'
+		this.type = 'containerLowest'
 	}
 
 	connectedCallback() {
@@ -235,13 +249,18 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 		const contentClasses = this.classMap({
 			[this.contentPadding]: true,
 			'text-sm': true,
-			'absolute inset-x-0 bg-surface-lowest/55 backdrop-blur-[16px] shadow-2xl rounded-b-xl z-20':
-				this.overlay,
+			'absolute inset-x-0 bg-surface-lowest/55 backdrop-blur-[16px] shadow-2xl rounded-b-xl z-20': this.overlay,
 		})
 
 		return html`
 			<details ?open=${isOpen} @toggle=${this.#handleToggle} class=${detailsClasses}>
-				<summary ${this.locked ? '' : magnetic({ strength: 2, radius: 50 })} ${this.locked ? '' : cursorGlow({ radius: 250, intensity: 0.08 })} class=${summaryClasses} tabindex=${this.locked ? -1 : 0} @click=${this.#handleSummaryClick}>
+				<summary
+					${this.locked ? '' : magnetic({ strength: 2, radius: 50 })}
+					${this.locked ? '' : cursorGlow({ radius: 250, intensity: 0.08 })}
+					class=${summaryClasses}
+					tabindex=${this.locked ? -1 : 0}
+					@click=${this.#handleSummaryClick}
+				>
 					${!this.hideIndicator
 						? html`
 								<span
@@ -249,14 +268,7 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 									class="flex items-center justify-center w-5 h-5 rounded-full shrink-0 opacity-70 group-hover:opacity-100"
 								>
 									<slot name="indicator" @slotchange=${this.#handleIndicatorSlotChange}>
-										<svg
-											width="20"
-											height="20"
-											viewBox="0 0 24 24"
-											fill="none"
-											class="w-5 h-5"
-											aria-hidden="true"
-										>
+										<svg width="20" height="20" viewBox="0 0 24 24" fill="none" class="w-5 h-5" aria-hidden="true">
 											<path
 												d="M9 6L15 12L9 18"
 												stroke="currentColor"
@@ -364,16 +376,18 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 		const wrapper = this.#contentRef.value
 		if (!wrapper) return
 
-		this.#closeSub = fromEvent<TransitionEvent>(wrapper, 'transitionend').pipe(
-			filter(e => e.propertyName === 'grid-template-rows'),
-			take(1),
-			tap(() => {
-				this.#closing = false
-				this.open = false
-				this.dispatchScopedEvent('toggle', { open: false })
-			}),
-			takeUntil(this.disconnecting),
-		).subscribe()
+		this.#closeSub = fromEvent<TransitionEvent>(wrapper, 'transitionend')
+			.pipe(
+				filter(e => e.propertyName === 'grid-template-rows'),
+				take(1),
+				tap(() => {
+					this.#closing = false
+					this.open = false
+					this.dispatchScopedEvent('toggle', { open: false })
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 	}
 
 	#handleIndicatorSlotChange(e: Event) {

package/src/details/index.ts

@@ -1 +1 @@
-export { default as SchmancyDetails } from './details';
+export { default as SchmancyDetails } from './details'

package/src/directives/ai-badge.ts

@@ -70,11 +70,7 @@ class AIBadgeDirective extends AsyncDirective {
 		this.state.badge = badge
 
 		this.state.animation = badge.animate(
-			[
-				{ transform: 'scale(1)' },
-				{ transform: 'scale(1.03)' },
-				{ transform: 'scale(1)' },
-			],
+			[{ transform: 'scale(1)' }, { transform: 'scale(1.03)' }, { transform: 'scale(1)' }],
 			{ duration: 2000, easing: 'ease-in-out', iterations: Infinity },
 		)
 

package/src/directives/animate-text.ts

@@ -14,14 +14,21 @@ import { noChange } from 'lit'
 import { AsyncDirective, directive } from 'lit/async-directive.js'
 import type { ElementPart } from 'lit/directive.js'
 import { Subject, interval, timer, fromEvent, combineLatest, from, defer, EMPTY, type Observable } from 'rxjs'
-import { map, distinctUntilChanged, filter, startWith, take, delay, takeUntil, tap, takeWhile, switchMap, catchError, finalize } from 'rxjs/operators'
 import {
-	SPRING_SMOOTH,
-	SPRING_SNAPPY,
-	SPRING_BOUNCY,
-	SPRING_GENTLE,
-	type AnimationPreset,
-} from '../utils/animation'
+	map,
+	distinctUntilChanged,
+	filter,
+	startWith,
+	take,
+	delay,
+	takeUntil,
+	tap,
+	takeWhile,
+	switchMap,
+	catchError,
+	finalize,
+} from 'rxjs/operators'
+import { SPRING_SMOOTH, SPRING_SNAPPY, SPRING_BOUNCY, SPRING_GENTLE, type AnimationPreset } from '../utils/animation'
 
 export type AnimationType = 'typewriter' | 'fade-up' | 'word-reveal' | 'blur-reveal' | 'cyber-glitch'
 export type AnimationPresetName = 'smooth' | 'snappy' | 'bouncy' | 'gentle'
@@ -120,23 +127,23 @@ class AnimateTextDirective extends AsyncDirective {
 
 		const pipeline$ = restart
 			? visible$.pipe(
-				switchMap(visible =>
-					visible
-						? timer(delayMs).pipe(
-							switchMap(() => this.runAnimation$(animation, actualDuration, actualStagger, presetConfig)),
-						)
-						: defer(() => {
-							this.resetToInitial(animation)
-							return EMPTY
-						})
-				),
-			)
+					switchMap(visible =>
+						visible
+							? timer(delayMs).pipe(
+									switchMap(() => this.runAnimation$(animation, actualDuration, actualStagger, presetConfig)),
+								)
+							: defer(() => {
+									this.resetToInitial(animation)
+									return EMPTY
+								}),
+					),
+				)
 			: visible$.pipe(
-				filter(v => v),
-				take(1),
-				delay(delayMs),
-				switchMap(() => this.runAnimation$(animation, actualDuration, actualStagger, presetConfig)),
-			)
+					filter(v => v),
+					take(1),
+					delay(delayMs),
+					switchMap(() => this.runAnimation$(animation, actualDuration, actualStagger, presetConfig)),
+				)
 
 		pipeline$.pipe(takeUntil(this.disconnecting$)).subscribe()
 	}
@@ -263,11 +270,7 @@ class AnimateTextDirective extends AsyncDirective {
 			map(() => {
 				if (!this.element) return false
 				const rect = this.element.getBoundingClientRect()
-				const inViewport =
-					rect.width > 0 &&
-					rect.height > 0 &&
-					rect.top < window.innerHeight &&
-					rect.bottom > 0
+				const inViewport = rect.width > 0 && rect.height > 0 && rect.top < window.innerHeight && rect.bottom > 0
 				return inViewport && this.getAccumulatedOpacity() > 0.5
 			}),
 			distinctUntilChanged(),
@@ -279,7 +282,12 @@ class AnimateTextDirective extends AsyncDirective {
 		)
 	}
 
-	private runAnimation$(animation: AnimationType, duration: number, stagger: number, preset: AnimationPreset): Observable<unknown> {
+	private runAnimation$(
+		animation: AnimationType,
+		duration: number,
+		stagger: number,
+		preset: AnimationPreset,
+	): Observable<unknown> {
 		if (!this.element) return EMPTY
 
 		switch (animation) {
@@ -399,7 +407,9 @@ class AnimateTextDirective extends AsyncDirective {
 			tap(() => {
 				if (this.element) {
 					this.element.style.willChange = 'auto'
-					animTargets.forEach(t => { t.style.willChange = 'auto' })
+					animTargets.forEach(t => {
+						t.style.willChange = 'auto'
+					})
 				}
 			}),
 			catchError(() => EMPTY),
@@ -440,7 +450,9 @@ class AnimateTextDirective extends AsyncDirective {
 			tap(() => {
 				if (this.element) {
 					this.element.style.willChange = 'auto'
-					animTargets.forEach(t => { t.style.willChange = 'auto' })
+					animTargets.forEach(t => {
+						t.style.willChange = 'auto'
+					})
 				}
 			}),
 			catchError(() => EMPTY),

package/src/directives/art/effects/howl.ts

@@ -70,10 +70,7 @@ export function createHowlOverlay(state: ArtState): void {
 		const y = 20 + Math.random() * 60
 		const size = 0.8 + Math.random() * 1.2
 
-		polygon.setAttribute(
-			'points',
-			`${x},${y - size} ${x + size * 0.6},${y} ${x},${y + size} ${x - size * 0.6},${y}`,
-		)
+		polygon.setAttribute('points', `${x},${y - size} ${x + size * 0.6},${y} ${x},${y + size} ${x - size * 0.6},${y}`)
 		polygon.setAttribute('fill', color)
 		polygon.style.mixBlendMode = 'screen'
 		polygon.style.willChange = 'transform, opacity'

package/src/directives/art/effects/samwa.ts

@@ -9,7 +9,15 @@ import { createOverlayContainer, createSVG } from '../utils'
 
 function hexToRgb(hex: string): [number, number, number] {
 	const h = hex.replace('#', '')
-	const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16)
+	const n = parseInt(
+		h.length === 3
+			? h
+					.split('')
+					.map(c => c + c)
+					.join('')
+			: h,
+		16,
+	)
 	return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
 }
 
@@ -180,10 +188,8 @@ export function animateSamwa(state: ArtState, currentTime: number): void {
 		const windEffect = windStrength * windDirection * sizeProps.windSensitivity * 0.6
 
 		const flutterOffset = Math.sin(p.y * p.flutterFrequency + p.phase) * p.flutterAmplitude
-		const secondaryWave =
-			Math.sin(p.y * p.flutterFrequency * 0.5 + p.phase * 1.3) * p.flutterAmplitude * 0.4
-		const tertiaryWave =
-			Math.sin(p.y * p.flutterFrequency * 0.25 + p.phase * 0.7) * p.flutterAmplitude * 0.2
+		const secondaryWave = Math.sin(p.y * p.flutterFrequency * 0.5 + p.phase * 1.3) * p.flutterAmplitude * 0.4
+		const tertiaryWave = Math.sin(p.y * p.flutterFrequency * 0.25 + p.phase * 0.7) * p.flutterAmplitude * 0.2
 
 		p.vx += windEffect * 0.01
 		p.vx += (flutterOffset + secondaryWave + tertiaryWave) * 0.025

package/src/directives/art/effects/snow.ts

@@ -161,8 +161,7 @@ export function animateSnow(state: ArtState, currentTime: number): void {
 		const windEffect = windStrength * windDirection * sizeProps.windSensitivity * 0.4
 
 		const flutterOffset = Math.sin(p.y * p.flutterFrequency + p.phase) * p.flutterAmplitude
-		const secondaryWave =
-			Math.sin(p.y * p.flutterFrequency * 0.5 + p.phase * 1.3) * p.flutterAmplitude * 0.3
+		const secondaryWave = Math.sin(p.y * p.flutterFrequency * 0.5 + p.phase * 1.3) * p.flutterAmplitude * 0.3
 
 		p.vx += windEffect * 0.006
 		p.vx += (flutterOffset + secondaryWave) * 0.015

package/src/directives/battery.ts

@@ -18,7 +18,16 @@ import type { ElementPart } from 'lit'
 // TYPES
 // ============================================================================
 
-export type FutureCellVariant = 'cyber' | 'hologram' | 'plasma' | 'quantum' | 'matrix' | 'neon' | 'success' | 'warning' | 'danger'
+export type FutureCellVariant =
+	| 'cyber'
+	| 'hologram'
+	| 'plasma'
+	| 'quantum'
+	| 'matrix'
+	| 'neon'
+	| 'success'
+	| 'warning'
+	| 'danger'
 
 export interface FutureCellOptions {
 	/** Fill percentage (0-100+) */
@@ -294,7 +303,7 @@ class FutureCellDirective extends AsyncDirective {
 	private dataStreams: HTMLElement | null = null
 	private glitchLayer: HTMLElement | null = null
 	private styleElement: HTMLStyleElement | null = null
-	
+
 	private options: FutureCellOptions = { percent: 0 }
 	private variant: VariantConfig = VARIANTS.cyber
 	private currentVariantName: FutureCellVariant = 'cyber'
@@ -340,7 +349,7 @@ class FutureCellDirective extends AsyncDirective {
 				criticalEffects: true,
 				glassEffect: true,
 				duration: 600,
-				...options
+				...options,
 			}
 			this.variant = VARIANTS[this.options.variant!]
 			this.currentVariantName = this.options.variant!
@@ -448,12 +457,12 @@ class FutureCellDirective extends AsyncDirective {
 
 		// Create fill first, then add effects inside it
 		this.createFill()
-		this.createHexGrid()      // Inside fill
-		this.createEnergyWave()   // Inside fill
-		this.createScanLines()    // Inside fill
-		this.createDataStreams()  // Inside fill
-		this.createGlitchLayer()  // Inside fill
-		this.createParticles()    // Inside fill
+		this.createHexGrid() // Inside fill
+		this.createEnergyWave() // Inside fill
+		this.createScanLines() // Inside fill
+		this.createDataStreams() // Inside fill
+		this.createGlitchLayer() // Inside fill
+		this.createParticles() // Inside fill
 		this.createReadout()
 	}
 
@@ -631,11 +640,11 @@ class FutureCellDirective extends AsyncDirective {
 
 	private setupResizeObserver(): void {
 		if (!this.element || typeof ResizeObserver === 'undefined') return
-		
+
 		this.resizeObserver = new ResizeObserver(() => {
 			this.resizeCanvas()
 		})
-		
+
 		this.resizeObserver.observe(this.element)
 	}
 
@@ -1012,4 +1021,4 @@ class FutureCellDirective extends AsyncDirective {
 // EXPORT
 // ============================================================================
 
-export const futureCell = directive(FutureCellDirective)
+export const futureCell = directive(FutureCellDirective)

package/src/directives/confirm-click.ts

@@ -77,11 +77,7 @@ class ConfirmClickDirective extends Directive {
 		return a.timeout === b.timeout && a.icon === b.icon
 	}
 
-	private setupClickListener(
-		element: HTMLElement,
-		options: ConfirmClickOptions,
-		cancel$: Subject<void>,
-	): Subscription {
+	private setupClickListener(element: HTMLElement, options: ConfirmClickOptions, cancel$: Subject<void>): Subscription {
 		return fromEvent<MouseEvent>(element, 'click')
 			.pipe(
 				tap(e => {
@@ -109,11 +105,7 @@ class ConfirmClickDirective extends Directive {
 		// Read the host's icon — reuse it so the user sees the same action "armed"
 		const iconButton = element as HTMLElement & { icon?: string; ['capturedIcon']?: string }
 		const hostIcon =
-			options.icon ??
-			iconButton.icon ??
-			iconButton['capturedIcon'] ??
-			element.textContent?.trim() ??
-			'warning'
+			options.icon ?? iconButton.icon ?? iconButton['capturedIcon'] ?? element.textContent?.trim() ?? 'warning'
 
 		// --- Resolve theme colors for canvas ---
 		const errorColor = resolveCssColor('var(--schmancy-sys-color-error-default)', '#dc2626')
@@ -176,10 +168,12 @@ class ConfirmClickDirective extends Directive {
 		state.overlayElement = overlay
 
 		// --- Trigger entry animation ---
-		of(null).pipe(observeOn(animationFrameScheduler)).subscribe(() => {
-			overlay.style.opacity = '1'
-			overlay.style.transform = 'scale(1)'
-		})
+		of(null)
+			.pipe(observeOn(animationFrameScheduler))
+			.subscribe(() => {
+				overlay.style.opacity = '1'
+				overlay.style.transform = 'scale(1)'
+			})
 
 		// --- Canvas drawing function ---
 		const ctx = canvas.getContext('2d')
@@ -262,9 +256,7 @@ class ConfirmClickDirective extends Directive {
 			tap(() => this.hideOverlay(element)),
 		)
 
-		const dismissSub = merge(overlayClick$, outsideClick$, escape$)
-			.pipe(take(1), takeUntil(cancel$))
-			.subscribe()
+		const dismissSub = merge(overlayClick$, outsideClick$, escape$).pipe(take(1), takeUntil(cancel$)).subscribe()
 
 		state.subscription.add(dismissSub)
 	}

package/src/directives/cursor-glow.ts

@@ -18,7 +18,7 @@ export interface CursorGlowOptions {
  *
  * @example
  * ```html
- * <schmancy-surface type="glass" ${cursorGlow()}>content</schmancy-surface>
+ * <schmancy-surface type="container" ${cursorGlow()}>content</schmancy-surface>
  * <div ${cursorGlow({ radius: 300, intensity: 0.2 })}>hero panel</div>
  * ```
  */