@mhmo91/schmancy 0.10.41 → 0.10.43

package/src/overlay/overlay.service.ts

@@ -92,7 +92,7 @@ if (typeof document !== 'undefined') {
 		map((e): AmbientAnchor => ({ event: e, capturedAt: performance.now() })),
 	)
 	const keydown$ = fromEvent<KeyboardEvent>(document, 'keydown', { capture: true }).pipe(
-		filter((e) => e.target instanceof Element),
+		filter(e => e.target instanceof Element),
 		map((e): AmbientAnchor => {
 			const rect = (e.target as Element).getBoundingClientRect()
 			const synthetic = new MouseEvent('click', {
@@ -104,7 +104,7 @@ if (typeof document !== 'undefined') {
 		}),
 	)
 
-	merge(pointerdown$, click$, keydown$).subscribe((ambient) => ambientAnchor$.next(ambient))
+	merge(pointerdown$, click$, keydown$).subscribe(ambient => ambientAnchor$.next(ambient))
 }
 
 function ambientAnchor(): MouseEvent | undefined {
@@ -114,7 +114,6 @@ function ambientAnchor(): MouseEvent | undefined {
 	return cur.event
 }
 
-
 /* ======================================================================= *
  *                                   show                                    *
  * ======================================================================= */
@@ -138,10 +137,7 @@ function ambientAnchor(): MouseEvent | undefined {
  *   .pipe(takeUntil(this.disconnecting))
  *   .subscribe(saved => saved && this.store.persist(saved))
  */
-export function show<T = void>(
-	content: Content,
-	options: ShowOptions = {},
-): Observable<T | undefined> {
+export function show<T = void>(content: Content, options: ShowOptions = {}): Observable<T | undefined> {
 	return defer(() => {
 		// Resolve anchor + theme container at subscribe time. Anchor: caller's
 		// explicit value wins, otherwise the ambient gesture fills in. Theme:
@@ -157,13 +153,11 @@ export function show<T = void>(
 		const state = { settled: false, historyPushed: false }
 
 		return discoverComponent<HTMLElement>('schmancy-theme').pipe(
-			switchMap((theme) => {
+			switchMap(theme => {
 				const el = document.createElement('schmancy-overlay') as SchmancyOverlay
 				;(theme ?? document.body ?? document.documentElement).appendChild(el)
 
-				const opened$ = from(
-					el.updateComplete.then(() => el.open(content, resolvedOptions)),
-				).pipe(
+				const opened$ = from(el.updateComplete.then(() => el.open(content, resolvedOptions))).pipe(
 					tap(() => {
 						pushEntry({
 							id,
@@ -211,11 +205,7 @@ export function show<T = void>(
 						if (!state.settled) void el.close('programmatic')
 						unmarkModal(id)
 						removeEntry(id)
-						if (
-							state.historyPushed &&
-							!state.settled &&
-							history.state?.schmancyOverlayId === id
-						) {
+						if (state.historyPushed && !state.settled && history.state?.schmancyOverlayId === id) {
 							history.back()
 						}
 						queueMicrotask(() => el.remove())
@@ -305,16 +295,11 @@ export async function prompt(options: OverlayPromptOptions = {}): Promise<string
  *
  * Stacked instances of the same content merge their event streams.
  */
-export function overlayEvents<E extends Event = CustomEvent>(
-	tagName: string,
-	eventName: string,
-): Observable<E> {
+export function overlayEvents<E extends Event = CustomEvent>(tagName: string, eventName: string): Observable<E> {
 	return elementsByTag$(tagName).pipe(
 		distinctUntilChanged((a, b) => a.length === b.length && a.every((el, i) => el === b[i])),
-		switchMap((elements) =>
-			elements.length === 0 ? EMPTY : merge(...elements.map((el) => fromEvent<E>(el, eventName))),
-		),
-		map((e) => e),
+		switchMap(elements => (elements.length === 0 ? EMPTY : merge(...elements.map(el => fromEvent<E>(el, eventName))))),
+		map(e => e),
 	)
 }
 

package/src/overlay/overlay.stack.test.ts

@@ -35,7 +35,10 @@ function stubClose(overlay: AnyOverlay): ReturnType<typeof vi.fn> {
 
 describe('overlay stacked-dismiss guard', () => {
 	beforeEach(() => clearStack())
-	afterEach(() => { clearStack(); vi.restoreAllMocks() })
+	afterEach(() => {
+		clearStack()
+		vi.restoreAllMocks()
+	})
 
 	it('single overlay: body click invokes close("backdrop") (baseline)', async () => {
 		const overlayA: AnyOverlay = document.createElement('schmancy-overlay')

package/src/overlay/overlay.stack.ts

@@ -33,7 +33,7 @@ export function pushEntry(entry: OverlayEntry): void {
 /** Remove by id. No-op if the id is not in the stack. */
 export function removeEntry(id: string): void {
 	const current = stack$$.value
-	const next = current.filter((e) => e.id !== id)
+	const next = current.filter(e => e.id !== id)
 	if (next.length !== current.length) {
 		stack$$.next(next)
 	}
@@ -66,10 +66,10 @@ let previousScrollbarGutter = ''
 
 stack$$
 	.pipe(
-		map((s) => s.some((e) => e.modal)),
+		map(s => s.some(e => e.modal)),
 		distinctUntilChanged(),
 	)
-	.subscribe((shouldLock) => {
+	.subscribe(shouldLock => {
 		if (typeof document === 'undefined') return
 
 		if (shouldLock && !scrollLockActive) {
@@ -156,7 +156,7 @@ function releaseInert(): void {
 export function elementsByTag$(tagName: string): Observable<readonly HTMLElement[]> {
 	const lower = tagName.toLowerCase()
 	return stack$$.pipe(
-		map((entries) => {
+		map(entries => {
 			const matches: HTMLElement[] = []
 			for (const entry of entries) {
 				const inner = entry.element.querySelector<HTMLElement>(lower)

package/src/overlay/overlay.types.ts

@@ -45,13 +45,7 @@ export interface VirtualAnchor {
  * - `VirtualAnchor` — anything with `getBoundingClientRect()` (computed regions)
  * - `{ x: number; y: number }` — explicit coordinates (last resort)
  */
-export type Anchor =
-	| MouseEvent
-	| TouchEvent
-	| HTMLElement
-	| DOMRect
-	| VirtualAnchor
-	| { x: number; y: number }
+export type Anchor = MouseEvent | TouchEvent | HTMLElement | DOMRect | VirtualAnchor | { x: number; y: number }
 
 /**
  * Floating UI `Placement` subset the overlay exposes as a preferred
@@ -198,15 +192,15 @@ export interface OverlayEntry {
  * dismiss from form submission.
  */
 export type CloseReason =
-	| 'structured'      // content dispatched CustomEvent('close', { detail })
-	| 'native-submit'   // <form method="dialog"> committed a returnValue
-	| 'escape'          // user pressed Escape
-	| 'backdrop'        // user clicked outside the overlay
-	| 'swipe'           // user swiped a bottom sheet down
-	| 'popstate'        // user hit back button / hardware back
-	| 'light-dismiss'   // popover light-dismiss (clicked outside anchored overlay)
-	| 'programmatic'    // sub.unsubscribe() / dismissAll()
-	| 'abort'           // AbortSignal aborted
+	| 'structured' // content dispatched CustomEvent('close', { detail })
+	| 'native-submit' // <form method="dialog"> committed a returnValue
+	| 'escape' // user pressed Escape
+	| 'backdrop' // user clicked outside the overlay
+	| 'swipe' // user swiped a bottom sheet down
+	| 'popstate' // user hit back button / hardware back
+	| 'light-dismiss' // popover light-dismiss (clicked outside anchored overlay)
+	| 'programmatic' // sub.unsubscribe() / dismissAll()
+	| 'abort' // AbortSignal aborted
 
 /**
  * Options for confirm() / danger() / ask() sugar.
@@ -245,7 +239,4 @@ export interface OverlayPromptOptions extends OverlayConfirmOptions {
  * Signature of the primary verb — declared here for consumption by the
  * service and the skill docs. Cold Observable; subscription IS the lifecycle.
  */
-export type ShowFn = <T = void>(
-	content: Content,
-	options?: ShowOptions,
-) => Observable<T | undefined>
+export type ShowFn = <T = void>(content: Content, options?: ShowOptions) => Observable<T | undefined>

package/src/progress/index.ts

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

package/src/progress/progress.ts

@@ -6,140 +6,142 @@ import { styleMap } from 'lit/directives/style-map.js'
 
 @customElement('schmancy-progress')
 export default class SchmancyProgress extends SchmancyElement {
-  static styles = [css`
-  :host {
-    display: block;
-  }
-
-  /* Blackbird-style indeterminate animation with organic easing */
-  @keyframes indeterminate {
-    0% {
-      left: -30%;
-      width: 20%;
-      opacity: 0.6;
-    }
-    25% {
-      width: 35%;
-      opacity: 1;
-    }
-    50% {
-      left: 40%;
-      width: 30%;
-    }
-    75% {
-      width: 25%;
-      opacity: 0.9;
-    }
-    100% {
-      left: 100%;
-      width: 20%;
-      opacity: 0.6;
-    }
-  }
-
-  .indeterminate-animation {
-    animation: indeterminate 1.8s cubic-bezier(0.34, 1.2, 0.64, 1) infinite;
-  }
-`]
-
-  @property({ type: Number, reflect: true })
-  value = 0
-
-  @property({ type: Number, reflect: true })
-  max = 100
-
-  @property({ type: Boolean, reflect: true })
-  indeterminate = false
-
-  // M3 aligned track heights: xs=1px, sm=2px, md=4px, lg=8px
-  @property({ type: String, reflect: true })
-  size: 'xs' | 'sm' | 'md' | 'lg' = 'md'
-
-  @property({ type: String, reflect: true })
-  color: 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' = 'primary'
-
-  @property({ type: Boolean, reflect: true })
-  glass = false
-
-  private get percentage(): number {
-    if (this.indeterminate) return 0
-    return Math.min(100, Math.max(0, (this.value / this.max) * 100))
-  }
-
-  protected render() {
-    const containerClasses = {
-      'w-full': true,
-      'relative': true,
-      'overflow-hidden': true,
-      'rounded-full': true,
-      'h-px': this.size === 'xs',   // 1px - M3 linear indicator track
-      'h-0.5': this.size === 'sm',  // 2px
-      'h-1': this.size === 'md',    // 4px - M3 default
-      'h-2': this.size === 'lg',    // 8px
-      // Glass effect background
-      'backdrop-blur-xl': this.glass,
-      'backdrop-saturate-150': this.glass,
-      'bg-surface-container/20': this.glass && !this.indeterminate,
-      'bg-surface-container': !this.glass,
-      'shadow-[inset_0_1px_2px_0_rgba(0,0,0,0.1)]': this.glass,
-      'border': this.glass,
-      'border-outline/20': this.glass
-    }
-
-    const barClasses = {
-      'h-full': true,
-      'rounded-full': true,
-      'transition-all': true,
-      'duration-300': true,
-      'ease-in-out': true,
-      'relative': true,
-      'bg-primary-default': this.color === 'primary' && !this.glass,
-      'bg-secondary-default': this.color === 'secondary' && !this.glass,
-      'bg-tertiary-default': this.color === 'tertiary' && !this.glass,
-      'bg-error-default': this.color === 'error' && !this.glass,
-      'bg-success-default': this.color === 'success' && !this.glass,
-      'absolute': this.indeterminate,
-      'indeterminate-animation': this.indeterminate
-    }
-
-    const barStyles = this.indeterminate 
-      ? {} 
-      : { width: `${this.percentage}%` }
-
-    // Glass effect bar classes
-    const glassBarClasses = {
-      'backdrop-blur-sm': this.glass,
-      'shadow-[0_0_20px_rgba(0,0,0,0.1)]': this.glass,
-      // Use semi-transparent background colors for glass effect
-      'bg-primary-default/70': this.glass && this.color === 'primary',
-      'bg-secondary-default/70': this.glass && this.color === 'secondary',
-      'bg-tertiary-default/70': this.glass && this.color === 'tertiary',
-      'bg-error-default/70': this.glass && this.color === 'error',
-      'bg-success-default/70': this.glass && this.color === 'success',
-    }
-
-    return html`
-      <div class="${classMap(containerClasses)}">
-        <div 
-          class="${classMap({...barClasses, ...glassBarClasses})}"
-          style="${styleMap(barStyles)}"
-          role="progressbar"
-          aria-valuenow="${this.value}"
-          aria-valuemin="0"
-          aria-valuemax="${this.max}"
-        >
-          ${this.glass ? html`
-            <!-- Glass shine effect -->
-            <div class="absolute inset-0 bg-linear-to-b from-surface-on/20 to-transparent rounded-full"></div>
-          ` : ''}
-        </div>
-      </div>
-    `
-  }
+	static styles = [
+		css`
+			:host {
+				display: block;
+			}
+
+			/* Blackbird-style indeterminate animation with organic easing */
+			@keyframes indeterminate {
+				0% {
+					left: -30%;
+					width: 20%;
+					opacity: 0.6;
+				}
+				25% {
+					width: 35%;
+					opacity: 1;
+				}
+				50% {
+					left: 40%;
+					width: 30%;
+				}
+				75% {
+					width: 25%;
+					opacity: 0.9;
+				}
+				100% {
+					left: 100%;
+					width: 20%;
+					opacity: 0.6;
+				}
+			}
+
+			.indeterminate-animation {
+				animation: indeterminate 1.8s cubic-bezier(0.34, 1.2, 0.64, 1) infinite;
+			}
+		`,
+	]
+
+	@property({ type: Number, reflect: true })
+	value = 0
+
+	@property({ type: Number, reflect: true })
+	max = 100
+
+	@property({ type: Boolean, reflect: true })
+	indeterminate = false
+
+	// M3 aligned track heights: xs=1px, sm=2px, md=4px, lg=8px
+	@property({ type: String, reflect: true })
+	size: 'xs' | 'sm' | 'md' | 'lg' = 'md'
+
+	@property({ type: String, reflect: true })
+	color: 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' = 'primary'
+
+	@property({ type: Boolean, reflect: true })
+	glass = false
+
+	private get percentage(): number {
+		if (this.indeterminate) return 0
+		return Math.min(100, Math.max(0, (this.value / this.max) * 100))
+	}
+
+	protected render() {
+		const containerClasses = {
+			'w-full': true,
+			relative: true,
+			'overflow-hidden': true,
+			'rounded-full': true,
+			'h-px': this.size === 'xs', // 1px - M3 linear indicator track
+			'h-0.5': this.size === 'sm', // 2px
+			'h-1': this.size === 'md', // 4px - M3 default
+			'h-2': this.size === 'lg', // 8px
+			// Glass effect background
+			'backdrop-blur-xl': this.glass,
+			'backdrop-saturate-150': this.glass,
+			'bg-surface-container/20': this.glass && !this.indeterminate,
+			'bg-surface-container': !this.glass,
+			'shadow-[inset_0_1px_2px_0_rgba(0,0,0,0.1)]': this.glass,
+			border: this.glass,
+			'border-outline/20': this.glass,
+		}
+
+		const barClasses = {
+			'h-full': true,
+			'rounded-full': true,
+			'transition-all': true,
+			'duration-300': true,
+			'ease-in-out': true,
+			relative: true,
+			'bg-primary-default': this.color === 'primary' && !this.glass,
+			'bg-secondary-default': this.color === 'secondary' && !this.glass,
+			'bg-tertiary-default': this.color === 'tertiary' && !this.glass,
+			'bg-error-default': this.color === 'error' && !this.glass,
+			'bg-success-default': this.color === 'success' && !this.glass,
+			absolute: this.indeterminate,
+			'indeterminate-animation': this.indeterminate,
+		}
+
+		const barStyles = this.indeterminate ? {} : { width: `${this.percentage}%` }
+
+		// Glass effect bar classes
+		const glassBarClasses = {
+			'backdrop-blur-sm': this.glass,
+			'shadow-[0_0_20px_rgba(0,0,0,0.1)]': this.glass,
+			// Use semi-transparent background colors for glass effect
+			'bg-primary-default/70': this.glass && this.color === 'primary',
+			'bg-secondary-default/70': this.glass && this.color === 'secondary',
+			'bg-tertiary-default/70': this.glass && this.color === 'tertiary',
+			'bg-error-default/70': this.glass && this.color === 'error',
+			'bg-success-default/70': this.glass && this.color === 'success',
+		}
+
+		return html`
+			<div class="${classMap(containerClasses)}">
+				<div
+					class="${classMap({ ...barClasses, ...glassBarClasses })}"
+					style="${styleMap(barStyles)}"
+					role="progressbar"
+					aria-valuenow="${this.value}"
+					aria-valuemin="0"
+					aria-valuemax="${this.max}"
+				>
+					${this.glass
+						? html`
+								<!-- Glass shine effect -->
+								<div class="absolute inset-0 bg-linear-to-b from-surface-on/20 to-transparent rounded-full"></div>
+							`
+						: ''}
+				</div>
+			</div>
+		`
+	}
 }
 
 declare global {
-  interface HTMLElementTagNameMap {
-    'schmancy-progress': SchmancyProgress
-  }
+	interface HTMLElementTagNameMap {
+		'schmancy-progress': SchmancyProgress
+	}
 }

package/src/rxjs-utils/index.ts

@@ -1,6 +1,6 @@
-export * from './mutation-observer';
-export * from './waitForElement';
-export * from './waitForElementAll';
-export * from './waitForElements';
-export * from './waitForElementsAll';
-export * from './waitUntil';
+export * from './mutation-observer'
+export * from './waitForElement'
+export * from './waitForElementAll'
+export * from './waitForElements'
+export * from './waitForElementsAll'
+export * from './waitUntil'

package/src/rxjs-utils/waitForElement.ts

@@ -9,25 +9,25 @@ import observeOnMutation from './mutation-observer'
  * @example waitForElement('button', undefiend).subscribe(button => button.click())
  */
 export default function waitForElement<T extends Element>(
-  /**
-   * @param selector The selector to use to find the element
-   * @type { string }
-   */
-  selector: string,
-  /**
-   * @param timeoutAfter How long to wait for the element to appear before throwing an error
-   * @default 5000
-   * @type { number | undefined }
-   * @description If you don't want to wait for the element to appear, pass `undefined` as the second argument
-   */
-  timeoutAfter = 5000,
+	/**
+	 * @param selector The selector to use to find the element
+	 * @type { string }
+	 */
+	selector: string,
+	/**
+	 * @param timeoutAfter How long to wait for the element to appear before throwing an error
+	 * @default 5000
+	 * @type { number | undefined }
+	 * @description If you don't want to wait for the element to appear, pass `undefined` as the second argument
+	 */
+	timeoutAfter = 5000,
 ) {
-  return observeOnMutation(document.body).pipe(
-    startWith(document.body),
-    map(() => document.querySelector<T>(selector)),
-    filter(Boolean),
-    take(1),
-    timeoutAfter ? timeout(timeoutAfter) : tap(),
-    catchError(() => throwError(() => 'Selector timeout for ' + selector)),
-  )
+	return observeOnMutation(document.body).pipe(
+		startWith(document.body),
+		map(() => document.querySelector<T>(selector)),
+		filter(Boolean),
+		take(1),
+		timeoutAfter ? timeout(timeoutAfter) : tap(),
+		catchError(() => throwError(() => 'Selector timeout for ' + selector)),
+	)
 }

package/src/rxjs-utils/waitForElementAll.ts

@@ -9,26 +9,26 @@ import observeOnMutation from './mutation-observer'
  * @example waitForElement('button', undefiend).subscribe(button => button.click())
  */
 export default function waitForElementAll<T extends Element>(
-  /**
-   * @param selector The selector to use to find the element
-   * @type { string }
-   */
-  selector: string,
-  /**
-   * @param timeoutAfter How long to wait for the element to appear before throwing an error
-   * @default 5000
-   * @type { number | undefined }
-   * @description If you don't want to wait for the element to appear, pass `undefined` as the second argument
-   */
-  timeoutAfter = 5000,
+	/**
+	 * @param selector The selector to use to find the element
+	 * @type { string }
+	 */
+	selector: string,
+	/**
+	 * @param timeoutAfter How long to wait for the element to appear before throwing an error
+	 * @default 5000
+	 * @type { number | undefined }
+	 * @description If you don't want to wait for the element to appear, pass `undefined` as the second argument
+	 */
+	timeoutAfter = 5000,
 ) {
-  return observeOnMutation(document.body).pipe(
-    startWith(document.body),
-    map(() => document.querySelectorAll<T>(selector)),
-    filter(arr => arr.length > 0),
-    take(1),
-    map(elements => Array.from(elements)),
-    timeoutAfter ? timeout(timeoutAfter) : tap(),
-    catchError(() => throwError(() => 'Selector timeout for ' + selector)),
-  )
+	return observeOnMutation(document.body).pipe(
+		startWith(document.body),
+		map(() => document.querySelectorAll<T>(selector)),
+		filter(arr => arr.length > 0),
+		take(1),
+		map(elements => Array.from(elements)),
+		timeoutAfter ? timeout(timeoutAfter) : tap(),
+		catchError(() => throwError(() => 'Selector timeout for ' + selector)),
+	)
 }

package/src/rxjs-utils/waitForElements.ts

@@ -9,32 +9,32 @@ import observeOnMutation from './mutation-observer'
  * @returns
  */
 export default function waitForElements(
-  /**
-   * @param selectors The selectors to use to find the elements
-   * @type { string[] }
-   * @description The order of the elements in the array is the same as the order of the elements in the emitted array
-   */
-  selectors: string[],
-  /**
-   * @param timeoutAfter How long to wait for the elements to appear before throwing an error
-   * @default 5000
-   * @type { number | undefined }
-   * @description If you don't want to wait for the elements to appear, pass `undefined` as the second argument
-   */
-  timeoutAfter = 5000,
+	/**
+	 * @param selectors The selectors to use to find the elements
+	 * @type { string[] }
+	 * @description The order of the elements in the array is the same as the order of the elements in the emitted array
+	 */
+	selectors: string[],
+	/**
+	 * @param timeoutAfter How long to wait for the elements to appear before throwing an error
+	 * @default 5000
+	 * @type { number | undefined }
+	 * @description If you don't want to wait for the elements to appear, pass `undefined` as the second argument
+	 */
+	timeoutAfter = 5000,
 ) {
-  return observeOnMutation(document.body).pipe(
-    startWith(document.body),
-    filter(() => selectors.every(s => !!document.querySelector(s))),
-    take(1),
-    map(() => selectors.map(s => document.querySelector(s)).filter(isPresent)), // why filter again? see https://github.com/Microsoft/TypeScript/issues/16069
-    map(elements => {
-      if (elements.length === selectors.length) {
-        return elements
-      } else {
-        throw new Error('Not all elements were found')
-      }
-    }),
-    timeoutAfter ? timeout(timeoutAfter) : tap(),
-  )
+	return observeOnMutation(document.body).pipe(
+		startWith(document.body),
+		filter(() => selectors.every(s => !!document.querySelector(s))),
+		take(1),
+		map(() => selectors.map(s => document.querySelector(s)).filter(isPresent)), // why filter again? see https://github.com/Microsoft/TypeScript/issues/16069
+		map(elements => {
+			if (elements.length === selectors.length) {
+				return elements
+			} else {
+				throw new Error('Not all elements were found')
+			}
+		}),
+		timeoutAfter ? timeout(timeoutAfter) : tap(),
+	)
 }