@mhmo91/schmancy 0.10.26 → 0.10.27

package/src/notification/notification.ts

@@ -8,40 +8,22 @@ import style from './notification.scss?inline'
 
 export type NotificationType = 'info' | 'success' | 'warning' | 'error'
 
-/**
- * Calculate a point on an arc between two points
- */
-function calculateArcPoint(
-	start: { x: number; y: number },
-	end: { x: number; y: number },
-	arcDirection: 'up' | 'down' = 'up',
-	intensity: number = 0.3,
-): { x: number; y: number } {
-	const midX = (start.x + end.x) / 2
-	const midY = (start.y + end.y) / 2
-	const distance = Math.sqrt(Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2))
-	const arcHeight = Math.min(distance * intensity, 150)
-	return {
-		x: midX,
-		y: arcDirection === 'up' ? midY - arcHeight : midY + arcHeight,
-	}
-}
-
 /**
  * @fires close - When notification is closed
  */
 @customElement('sch-notification')
 export default class SchmancyNotification extends SchmancyElement {
-	static styles = [unsafeCSS(style)];
+	static styles = [unsafeCSS(style)]
 
 	@property({ type: String }) title = ''
 	@property({ type: String }) message = ''
 	@property({ type: String }) type: NotificationType = 'info'
 	@property({ type: Boolean }) closable = true
-	@property({ type: Number }) duration = 5000 // 0 means no auto-close
+	@property({ type: Number }) duration = 5000
 	@property({ type: String }) id = `notification-${Date.now()}-${Math.floor(Math.random() * 10000)}`
 	@property({ type: Boolean }) playSound = true
-	@property({ type: Boolean }) showProgress = false // Show indeterminate progress bar
+	@property({ type: Boolean }) showProgress = false
+	// startPosition retained for API compatibility — not used in entrance animation
 	@property({ type: Object }) startPosition: { x: number; y: number } = { x: 0, y: 0 }
 
 	@state() private _visible = true
@@ -57,14 +39,12 @@ export default class SchmancyNotification extends SchmancyElement {
 	connectedCallback() {
 		super.connectedCallback()
 
-		// Set fixed positioning for blackbird animation
 		this.style.position = 'fixed'
 		this.style.top = '16px'
 		this.style.right = '16px'
 		this.style.zIndex = '10001'
 		this.style.opacity = '0'
 
-		// Animate in after first render
 		this.updateComplete.then(() => {
 			this.animateIn()
 			return
@@ -81,34 +61,17 @@ export default class SchmancyNotification extends SchmancyElement {
 	}
 
 	private async animateIn() {
-		// Get the notification element's final position
-		const rect = this.getBoundingClientRect()
-		const targetX = rect.left + rect.width / 2
-		const targetY = rect.top + rect.height / 2
-
-		// Calculate arc point for upward arc
-		const arcPoint = calculateArcPoint(this.startPosition, { x: targetX, y: targetY }, 'up', 0.3)
-
-		// Animate from click position to final position with arc
+		const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
 		await this.animate(
-			[
-				{
-					transform: `translate(${this.startPosition.x - targetX}px, ${this.startPosition.y - targetY}px) scale(0.1)`,
-					opacity: 0,
-				},
-				{
-					transform: `translate(${arcPoint.x - targetX}px, ${arcPoint.y - targetY}px) scale(0.6)`,
-					opacity: 0.9,
-					offset: 0.5,
-				},
-				{
-					transform: 'translate(0, 0) scale(1)',
-					opacity: 1,
-				},
-			],
+			reduced
+				? [{ opacity: 0 }, { opacity: 1 }]
+				: [
+						{ transform: 'translateX(40px) scale(0.96)', opacity: 0 },
+						{ transform: 'translateX(0) scale(1)', opacity: 1 },
+					],
 			{
-				duration: 400,
-				easing: 'cubic-bezier(0.34, 1.2, 0.64, 1)',
+				duration: reduced ? 200 : 360,
+				easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
 				fill: 'forwards',
 			},
 		).finished
@@ -191,14 +154,13 @@ export default class SchmancyNotification extends SchmancyElement {
 		this._closing = true
 		this._visible = false
 
-		// Animate out before dispatching close event
 		await this.animate(
 			[
-				{ transform: 'translate(0, 0) scale(1)', opacity: 1 },
-				{ transform: 'translate(0, -20px) scale(0.8)', opacity: 0 },
+				{ transform: 'translateX(0) scale(1)', opacity: 1 },
+				{ transform: 'translateX(20px) scale(0.98)', opacity: 0 },
 			],
 			{
-				duration: 200,
+				duration: 180,
 				easing: 'cubic-bezier(0.4, 0, 1, 1)',
 				fill: 'forwards',
 			},
@@ -213,16 +175,16 @@ export default class SchmancyNotification extends SchmancyElement {
 		)
 	}
 
-	private _getEmoji(): string {
+	private _getTypeLabel(): string {
 		switch (this.type) {
 			case 'success':
-				return '\u2705'
+				return 'SUCCESS'
 			case 'warning':
-				return '\u26A0\uFE0F'
+				return 'WARNING'
 			case 'error':
-				return '\u274C'
+				return 'ERROR'
 			default:
-				return '\u{1F4A1}'
+				return 'INFO'
 		}
 	}
 
@@ -236,24 +198,25 @@ export default class SchmancyNotification extends SchmancyElement {
 				@mouseenter=${this._handleMouseEnter}
 				@mouseleave=${this._handleMouseLeave}
 			>
-				<span class="emoji">${this._getEmoji()}</span>
+				${this.showProgress || this.duration > 0
+					? html`<schmancy-progress
+							class="progress"
+							size="xs"
+							.value=${this._progress}
+							?indeterminate=${this.showProgress && this.duration === 0}
+						></schmancy-progress>`
+					: ''}
+				<div class="accent-rail"></div>
 				<div class="content">
+					<span class="type-tag">${this._getTypeLabel()}</span>
 					${this.title ? html`<div class="title">${this.title}</div>` : ''}
 					<div class="message">${this.message}</div>
 				</div>
 				${this.closable
 					? html`
-							<button class="close" aria-label="Close notification" @click=${this.close}>x</button>
+							<button class="close" aria-label="Close notification" @click=${this.close}>&#215;</button>
 						`
 					: ''}
-				${this.showProgress || this.duration > 0
-					? html`<schmancy-progress
-						class="progress"
-						size="xs"
-						.value=${this._progress}
-						?indeterminate=${this.showProgress && this.duration === 0}
-					></schmancy-progress>`
-					: ''}
 			</div>
 		`
 	}

package/src/overlay/overlay.component.ts

@@ -5,6 +5,7 @@ import { when } from 'lit/directives/when.js'
 import {
 	debounceTime,
 	distinctUntilChanged,
+	EMPTY,
 	filter,
 	fromEvent,
 	map,
@@ -72,67 +73,29 @@ export class SchmancyOverlay extends SchmancyElement {
 	:host {
 		position: fixed;
 		inset: 0;
-		z-index: var(--schmancy-overlay-z, 10000);
+		z-index: 10000;
 		display: none;
 		pointer-events: none;
 	}
 	:host([active]) {
 		display: block;
 	}
-	.shell {
-		position: fixed;
-		inset: 0;
-		pointer-events: none;
-	}
+	/* Vertical-gradient scrim — Tailwind's bg-gradient utilities cannot reach
+	 * these color-mix percentages with sufficient control. */
 	.backdrop {
-		position: fixed;
-		inset: 0;
-		background: color-mix(in srgb, var(--schmancy-sys-color-surface-container, rgba(12, 12, 16, 0.28)) 60%, transparent);
-		backdrop-filter: blur(18px) saturate(150%);
-		-webkit-backdrop-filter: blur(18px) saturate(150%);
-		pointer-events: auto;
-	}
-	.surface {
-		position: fixed;
-		pointer-events: auto;
-		max-width: calc(100vw - 2rem);
-		max-height: 90dvh;
-		overflow: auto;
-		border-radius: var(--schmancy-sys-shape-corner-large, 16px);
-		background: var(--schmancy-sys-color-surface, #ffffff);
-		color: var(--schmancy-sys-color-on-surface, #1a1a1a);
-		box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.35);
-		padding: var(--schmancy-overlay-padding, 1.5rem);
-	}
-	.surface[data-layout='centered'] {
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-	}
-	.surface[data-layout='sheet'] {
-		left: 0;
-		right: 0;
-		bottom: 0;
-		max-width: none;
-		width: 100%;
-		border-radius: var(--schmancy-sys-shape-corner-large, 16px) var(--schmancy-sys-shape-corner-large, 16px) 0 0;
-		padding-bottom: env(safe-area-inset-bottom);
-	}
-	.surface[data-layout='anchored'] {
-		max-width: min(480px, calc(100vw - 2rem));
-		box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.28);
+		background: linear-gradient(
+			to bottom,
+			color-mix(in srgb, var(--schmancy-sys-color-scrim) 18%, transparent) 0%,
+			color-mix(in srgb, var(--schmancy-sys-color-scrim) 56%, transparent) 100%
+		);
+		-webkit-backdrop-filter: blur(16px) saturate(160%);
+		backdrop-filter: blur(16px) saturate(160%);
 	}
-	/* Popover top-layer surfaces escape normal z-index — zero out host
-	 * display to avoid two surfaces rendering during transitions. */
+	/* Popover top-layer surfaces — UA defaults push surface off-screen. */
 	.surface:popover-open {
 		margin: 0;
 		border: 0;
 	}
-	@media (prefers-reduced-motion: reduce) {
-		.surface {
-			box-shadow: var(--schmancy-sys-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.2));
-		}
-	}
 `]
 
 	@property({ type: String, reflect: true }) layout: OverlayLayout = 'centered'
@@ -223,10 +186,10 @@ export class SchmancyOverlay extends SchmancyElement {
 			})
 			// Pair with Popover API to get native top-layer + light-dismiss.
 			const popoverCleanup = positionPopoverAPI(this._surface)
-			const prior = this._positionerTeardown
+			const cssAnchorTeardown = this._positionerTeardown
 			this._positionerTeardown = () => {
 				popoverCleanup()
-				prior()
+				cssAnchorTeardown?.()
 			}
 		} else if (this.tier === 'popover-fui' && this._resolvedAnchor) {
 			const popoverCleanup = positionPopoverAPI(this._surface)
@@ -265,7 +228,7 @@ export class SchmancyOverlay extends SchmancyElement {
 		this.wireResizeObserver(mount)
 
 		// Play entrance animations.
-		await this.playEnterAnimations()
+		await this.playAnimations('in')
 	}
 
 	/** Play exit animations then dismiss. */
@@ -273,7 +236,7 @@ export class SchmancyOverlay extends SchmancyElement {
 		if (this._closing || !this._mounted) return
 		this._closing = true
 		try {
-			await this.playExitAnimations()
+			await this.playAnimations('out')
 		} catch {
 			// animation cancelled mid-flight — not an error.
 		}
@@ -296,14 +259,24 @@ export class SchmancyOverlay extends SchmancyElement {
 
 	protected render(): TemplateResult {
 		if (!this._active) return html``
+		const baseClasses =
+			'surface fixed pointer-events-auto overflow-auto ' +
+			'bg-surface-container/85 text-surface-on backdrop-blur-md ' +
+			'border border-surface-on/8'
+		const layoutClasses =
+			this.layout === 'centered'
+				? 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[min(calc(100vw-2rem),560px)] max-h-[90dvh] rounded-3xl shadow-overlay'
+				: this.layout === 'sheet'
+					? 'left-0 right-0 bottom-0 w-full max-h-[90dvh] rounded-t-[28px] shadow-overlay'
+					: 'max-w-[min(480px,calc(100vw-2rem))] max-h-[90dvh] rounded-3xl shadow-overlay-anchored'
 		return html`
-			<div class="shell" part="shell">
+			<div class="shell fixed inset-0 pointer-events-none" part="shell">
 				${when(
 					this.modal,
-					() => html`<div class="backdrop" part="backdrop" @click=${this.onBackdropClick}></div>`,
+					() => html`<div class="backdrop fixed inset-0 pointer-events-auto" part="backdrop" @click=${this.onBackdropClick}></div>`,
 				)}
 				<section
-					class="surface"
+					class="${baseClasses} ${layoutClasses}"
 					part="surface"
 					data-layout=${this.layout}
 					data-tier=${this.tier}
@@ -378,56 +351,46 @@ export class SchmancyOverlay extends SchmancyElement {
 	private wireCloseTriggers(signal?: AbortSignal): void {
 		const until = this.disconnecting
 
+		// Handle already-aborted signal synchronously — no stream needed.
+		if (signal?.aborted) {
+			queueMicrotask(() => void this.close('abort'))
+			return
+		}
+
 		// Structured close — content dispatches CustomEvent('close', { detail }).
-		fromEvent<CustomEvent>(this, 'close')
-			.pipe(
-				filter((e) => e instanceof CustomEvent),
-				tap((e) => {
-					e.stopPropagation()
-					void this.close('structured', e.detail)
-				}),
-				takeUntil(until),
-			)
-			.subscribe()
+		const structured$ = fromEvent<CustomEvent>(this, 'close').pipe(
+			filter((e) => e instanceof CustomEvent),
+			tap((e) => e.stopPropagation()),
+			map((e) => ({ reason: 'structured' as CloseReason, result: e.detail })),
+		)
 
 		// Native <form method="dialog"> submission bubbles up as a regular
 		// submit event with `submitter.value` (returnValue proxy for our
 		// custom shell). Capture it and resolve with the string value.
-		fromEvent<SubmitEvent>(this, 'submit')
-			.pipe(
-				filter((e) => {
-					const form = e.target as HTMLFormElement | null
-					return !!form && form.method === 'dialog'
-				}),
-				tap((e) => {
-					e.preventDefault()
-					const submitter = (e as SubmitEvent & { submitter?: HTMLButtonElement | HTMLInputElement })
-						.submitter
-					const value = submitter?.value ?? ''
-					void this.close('native-submit', value)
-				}),
-				takeUntil(until),
-			)
-			.subscribe()
+		const nativeSubmit$ = fromEvent<SubmitEvent>(this, 'submit').pipe(
+			filter((e) => {
+				const form = e.target as HTMLFormElement | null
+				return !!form && form.method === 'dialog'
+			}),
+			tap((e) => e.preventDefault()),
+			map((e) => {
+				const submitter = (e as SubmitEvent & { submitter?: HTMLButtonElement | HTMLInputElement })
+					.submitter
+				return { reason: 'native-submit' as CloseReason, result: submitter?.value ?? '' }
+			}),
+		)
 
 		// Manual Esc — all tiers. Modal has no native dismiss; anchored
 		// tiers use `popover="manual"` so the browser doesn't auto-Esc them
 		// either (the auto popover-stack would close ancestor overlays when
 		// a nested overlay opens — see positionPopoverAPI's comment).
-		fromEvent<KeyboardEvent>(document, 'keydown')
-			.pipe(
-				filter((e) => e.key === 'Escape'),
-				tap((e) => {
-					if (!this.dismissable) {
-						e.preventDefault()
-						return
-					}
-					e.preventDefault()
-					void this.close('escape')
-				}),
-				takeUntil(until),
-			)
-			.subscribe()
+		const escape$ = fromEvent<KeyboardEvent>(document, 'keydown').pipe(
+			filter((e) => e.key === 'Escape'),
+			tap((e) => e.preventDefault()),
+			filter(() => this.dismissable),
+			map(() => ({ reason: 'escape' as CloseReason })),
+			take(1),
+		)
 
 		// Manual outside-click — all anchored tiers. Modal layouts have a
 		// backdrop that catches outside clicks via `onBackdropClick`; the
@@ -437,50 +400,49 @@ export class SchmancyOverlay extends SchmancyElement {
 		// `Node.contains`) so clicks on elements inside slotted /
 		// shadow-DOM descendants of the surface are correctly classified
 		// as "inside".
-		if (this.tier !== 'modal') {
-			fromEvent<PointerEvent>(document, 'pointerdown', { capture: true })
-				.pipe(
-					filter((e) => {
-						if (!this.dismissable) return false
-						const path = e.composedPath()
-						if (this._surface && path.includes(this._surface)) return false
-						if (this._resolvedAnchor?.el && path.includes(this._resolvedAnchor.el)) return false
-						return true
-					}),
-					take(1),
-					tap(() => void this.close('backdrop')),
-					takeUntil(until),
-				)
-				.subscribe()
-		}
+		const outsideClick$ = this.tier !== 'modal'
+			? fromEvent<PointerEvent>(document, 'pointerdown', { capture: true }).pipe(
+				filter((e) => {
+					if (!this.dismissable) return false
+					const path = e.composedPath()
+					if (this._surface && path.includes(this._surface)) return false
+					if (this._resolvedAnchor?.el && path.includes(this._resolvedAnchor.el)) return false
+					return true
+				}),
+				map(() => ({ reason: 'backdrop' as CloseReason })),
+				take(1),
+			)
+			: null
 
 		// Swipe-to-dismiss for sheet layout only. No visual drag handle —
 		// the gesture starts from the top 40px of the surface (see
 		// DRAG_START_TOP_PX in overlay.gestures). Escape + backdrop click
 		// cover the other dismiss paths via the modal-tier listeners above.
-		if (this.layout === 'sheet' && this.dismissable) {
-			swipeToDismiss$({
-				surface: this._surface,
-				until$: merge(until, this._closed$),
-			})
-				.pipe(take(1))
-				.subscribe(() => void this.close('swipe'))
-		}
+		const swipe$ = this.layout === 'sheet' && this.dismissable
+			? swipeToDismiss$({ surface: this._surface, until$: merge(until, this._closed$) }).pipe(
+				take(1),
+				map(() => ({ reason: 'swipe' as CloseReason })),
+			)
+			: null
 
 		// AbortSignal — standard cancellation input.
-		if (signal) {
-			if (signal.aborted) {
-				queueMicrotask(() => void this.close('abort'))
-			} else {
-				fromEvent(signal, 'abort')
-					.pipe(
-						take(1),
-						tap(() => void this.close('abort')),
-						takeUntil(until),
-					)
-					.subscribe()
-			}
-		}
+		const abort$ = signal
+			? fromEvent(signal, 'abort').pipe(
+				take(1),
+				map(() => ({ reason: 'abort' as CloseReason })),
+			)
+			: null
+
+		merge(
+			structured$,
+			nativeSubmit$,
+			escape$,
+			outsideClick$ ?? EMPTY,
+			swipe$ ?? EMPTY,
+			abort$ ?? EMPTY,
+		)
+			.pipe(takeUntil(until))
+			.subscribe(({ reason, result }: { reason: CloseReason; result?: unknown }) => void this.close(reason, result))
 	}
 
 	/* ---------------- ResizeObserver FLIP re-resolve ------------------- */
@@ -536,31 +498,10 @@ export class SchmancyOverlay extends SchmancyElement {
 
 	/* ---------------- animations --------------------------------------- */
 
-	private async playEnterAnimations(): Promise<void> {
-		const surface = this._surface
-		if (!surface) return
-		const spec = surfaceAnimation(this.layout, 'in')
-		const tasks: Promise<unknown>[] = [
-			surface.animate(spec.keyframes, spec.options).finished.catch(() => undefined),
-		]
-		const backdrop = this._backdrop
-		if (this.modal && backdrop) {
-			tasks.push(
-				backdrop
-					.animate(
-						[{ opacity: 0 }, { opacity: 1 }],
-						{ duration: spec.options.duration, easing: 'ease-out', fill: 'forwards' },
-					)
-					.finished.catch(() => undefined),
-			)
-		}
-		await Promise.all(tasks)
-	}
-
-	private async playExitAnimations(): Promise<void> {
+	private async playAnimations(direction: 'in' | 'out'): Promise<void> {
 		const surface = this._surface
 		if (!surface) return
-		const spec = surfaceAnimation(this.layout, 'out')
+		const spec = surfaceAnimation(this.layout, direction)
 		const tasks: Promise<unknown>[] = [
 			surface.animate(spec.keyframes, spec.options).finished.catch(() => undefined),
 		]
@@ -569,8 +510,8 @@ export class SchmancyOverlay extends SchmancyElement {
 			tasks.push(
 				backdrop
 					.animate(
-						[{ opacity: 1 }, { opacity: 0 }],
-						{ duration: spec.options.duration, easing: 'ease-in', fill: 'forwards' },
+						direction === 'in' ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 1 }, { opacity: 0 }],
+						{ duration: spec.options.duration, easing: direction === 'in' ? 'ease-out' : 'ease-in', fill: 'forwards' },
 					)
 					.finished.catch(() => undefined),
 			)