@mhmo91/schmancy 0.10.41 → 0.10.43

package/src/utils/overlay-stack.ts

@@ -92,9 +92,7 @@ class OverlayStackManager {
 	 * Get all tracked IDs sorted by z-index (lowest first, front-most last).
 	 */
 	getStackOrder(): string[] {
-		return [...this.idMap.entries()]
-			.toSorted(([, a], [, b]) => a - b)
-			.map(([id]) => id)
+		return [...this.idMap.entries()].toSorted(([, a], [, b]) => a - b).map(([id]) => id)
 	}
 }
 

package/src/utils/search.ts

@@ -80,7 +80,7 @@ export function similarity(query: string, target: string, options?: SimilarityOp
 	if (normalizedTarget.startsWith(normalizedQuery)) {
 		// Give higher score to shorter targets (more precise matches)
 		const lengthRatio = normalizedQuery.length / normalizedTarget.length
-		return 0.95 + (lengthRatio * 0.05) // Score between 0.95 and 1.0
+		return 0.95 + lengthRatio * 0.05 // Score between 0.95 and 1.0
 	}
 
 	// 3. Word boundary match (query matches start of any word in target)
@@ -116,11 +116,7 @@ export function similarity(query: string, target: string, options?: SimilarityOp
 
 	// 6b. Levenshtein distance (good for typos)
 	const maxLength = Math.max(normalizedQuery.length, normalizedTarget.length)
-	const levenshteinDistance = calculateLevenshtein(
-		normalizedQuery,
-		normalizedTarget,
-		opts.maxLevenshteinDistance
-	)
+	const levenshteinDistance = calculateLevenshtein(normalizedQuery, normalizedTarget, opts.maxLevenshteinDistance)
 	const levenshteinScore = maxLength ? (1 - levenshteinDistance / maxLength) * SCORE_WEIGHT_LEVENSHTEIN : 0
 	if (levenshteinScore > maxScore) maxScore = levenshteinScore
 
@@ -302,9 +298,9 @@ function calculateLevenshtein(a: string, b: string, maxDistance = 0): number {
 		for (let j = 1; j <= a.length; j++) {
 			const cost = a[j - 1] === b[i - 1] ? 0 : 1
 			currRow[j] = Math.min(
-				prevRow[j] + 1,        // deletion
-				currRow[j - 1] + 1,    // insertion
-				prevRow[j - 1] + cost  // substitution
+				prevRow[j] + 1, // deletion
+				currRow[j - 1] + 1, // insertion
+				prevRow[j - 1] + cost, // substitution
 			)
 			if (currRow[j] < minRowValue) minRowValue = currRow[j]
 		}

package/src/visually-hidden/visually-hidden.ts

@@ -15,19 +15,21 @@ import { customElement } from 'lit/decorators.js'
  */
 @customElement('schmancy-visually-hidden')
 export class SchmancyVisuallyHidden extends SchmancyElement {
-	static styles = [css`
-	:host {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		padding: 0;
-		margin: -1px;
-		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
-		white-space: nowrap;
-		border-width: 0;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				position: absolute;
+				width: 1px;
+				height: 1px;
+				padding: 0;
+				margin: -1px;
+				overflow: hidden;
+				clip: rect(0, 0, 0, 0);
+				white-space: nowrap;
+				border-width: 0;
+			}
+		`,
+	]
 	render() {
 		return html`<slot></slot>`
 	}

package/src/window/window-manager.ts

@@ -198,7 +198,12 @@ class WindowManagerService {
 
 /** Simple rect overlap check (inline — no circular import with window-position) */
 function rectsOverlap(a: WindowBounds, b: WindowBounds): boolean {
-	return !(a.left >= b.left + b.width || a.left + a.width <= b.left || a.top >= b.top + b.height || a.top + a.height <= b.top)
+	return !(
+		a.left >= b.left + b.width ||
+		a.left + a.width <= b.left ||
+		a.top >= b.top + b.height ||
+		a.top + a.height <= b.top
+	)
 }
 
 export const windowManager = WindowManagerService.getInstance()

package/src/window/window-position.ts

@@ -19,7 +19,12 @@ const MAX_CASCADE_ATTEMPTS = 10
 
 /** Check if two rectangles overlap (edges touching does NOT count as overlap) */
 export function rectsOverlap(a: WindowBounds, b: WindowBounds): boolean {
-	return !(a.left >= b.left + b.width || a.left + a.width <= b.left || a.top >= b.top + b.height || a.top + a.height <= b.top)
+	return !(
+		a.left >= b.left + b.width ||
+		a.left + a.width <= b.left ||
+		a.top >= b.top + b.height ||
+		a.top + a.height <= b.top
+	)
 }
 
 /**
@@ -47,10 +52,7 @@ export function resolveOverlap(
 /**
  * Clamp bounds so the window stays fully within the viewport.
  */
-export function clampToViewport(
-	bounds: WindowBounds,
-	viewport: { width: number; height: number },
-): WindowBounds {
+export function clampToViewport(bounds: WindowBounds, viewport: { width: number; height: number }): WindowBounds {
 	return {
 		width: bounds.width,
 		height: bounds.height,

package/src/window/window.ts

@@ -39,16 +39,18 @@ interface Position {
 
 @customElement('schmancy-window')
 export default class SchmancyWindow extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: contents;
-		position: relative;
-		z-index: 1000;
-	}
-	:host([hidden]) {
-		display: none !important;
-	}
-`]
+	static styles = [
+		css`
+			:host {
+				display: contents;
+				position: relative;
+				z-index: 1000;
+			}
+			:host([hidden]) {
+				display: none !important;
+			}
+		`,
+	]
 
 	@property({ type: String }) id: string = 'default'
 	/** Override the expanded panel width (e.g. '320px', '24rem'). Defaults to responsive sizing. */
@@ -112,11 +114,6 @@ export default class SchmancyWindow extends SchmancyElement {
 		return 'inset(0px 0px 0px 0px round 12px)'
 	}
 
-	private get elevation(): 0 | 1 | 2 | 3 | 4 | 5 {
-		if (this.open) return 4
-		return this.lowered ? 1 : 3
-	}
-
 	// ============================================
 	// POSITION MANAGEMENT
 	// ============================================
@@ -205,9 +202,7 @@ export default class SchmancyWindow extends SchmancyElement {
 		// L -- calculate nearest corner using head visual center
 		const currentIsBottom = this.currentCorner.includes('bottom')
 		const headCenterX = rect.left + rect.width / 2
-		const headCenterY = currentIsBottom
-			? rect.bottom - HEAD_HEIGHT / 2
-			: rect.top + HEAD_HEIGHT / 2
+		const headCenterY = currentIsBottom ? rect.bottom - HEAD_HEIGHT / 2 : rect.top + HEAD_HEIGHT / 2
 		const side = headCenterX > window.innerWidth / 2 ? 'right' : 'left'
 		const vert = headCenterY > window.innerHeight / 2 ? 'bottom' : 'top'
 		const newCorner: SnapCorner = `${vert}-${side}` as SnapCorner
@@ -224,7 +219,12 @@ export default class SchmancyWindow extends SchmancyElement {
 		if (skipAnimation || reducedMotion$.value) {
 			this.savePosition()
 			const snapRect = container.getBoundingClientRect()
-			windowManager.updateBounds(this.id, { left: snapRect.left, top: snapRect.top, width: snapRect.width, height: snapRect.height })
+			windowManager.updateBounds(this.id, {
+				left: snapRect.left,
+				top: snapRect.top,
+				width: snapRect.width,
+				height: snapRect.height,
+			})
 			return
 		}
 
@@ -236,25 +236,29 @@ export default class SchmancyWindow extends SchmancyElement {
 
 		// P -- play: animate from the inverse offset to natural resting position
 		const flipKeyframes: Keyframe[] = [{ translate: `${dx}px ${dy}px` }, { translate: '0px 0px' }]
-		const anim = container.animate(
-			flipKeyframes,
-			{
-				duration: SPRING_SMOOTH.duration,
-				easing: SPRING_SMOOTH.easingFallback,
-				fill: 'forwards',
-			},
-		)
-		from(anim.finished).pipe(
-			take(1),
-			tap(() => {
-				if (container.isConnected) container.style.translate = ''
-				// Report final resting bounds after animation completes
-				const finalRect = container.getBoundingClientRect()
-				windowManager.updateBounds(this.id, { left: finalRect.left, top: finalRect.top, width: finalRect.width, height: finalRect.height })
-			}),
-			catchError(() => EMPTY),
-			takeUntil(this.disconnecting),
-		).subscribe()
+		const anim = container.animate(flipKeyframes, {
+			duration: SPRING_SMOOTH.duration,
+			easing: SPRING_SMOOTH.easingFallback,
+			fill: 'forwards',
+		})
+		from(anim.finished)
+			.pipe(
+				take(1),
+				tap(() => {
+					if (container.isConnected) container.style.translate = ''
+					// Report final resting bounds after animation completes
+					const finalRect = container.getBoundingClientRect()
+					windowManager.updateBounds(this.id, {
+						left: finalRect.left,
+						top: finalRect.top,
+						width: finalRect.width,
+						height: finalRect.height,
+					})
+				}),
+				catchError(() => EMPTY),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 
 		this.savePosition()
 	}
@@ -271,18 +275,21 @@ export default class SchmancyWindow extends SchmancyElement {
 
 			let didDrag = false
 
-			const sub = fromEvent<PointerEvent>(head, 'pointerdown').pipe(
-				filter(e => e.button === 0),
-				filter(e => {
-					const tag = (e.target as HTMLElement).tagName?.toLowerCase()
-					return !['input', 'textarea', 'select', 'button'].includes(tag)
-						&& !(e.target as HTMLElement).closest('schmancy-input, schmancy-icon-button, button, a')
-				}),
-				tap(e => {
-					e.preventDefault()
-					e.stopPropagation()
-				}),
-			)
+			const sub = fromEvent<PointerEvent>(head, 'pointerdown')
+				.pipe(
+					filter(e => e.button === 0),
+					filter(e => {
+						const tag = (e.target as HTMLElement).tagName?.toLowerCase()
+						return (
+							!['input', 'textarea', 'select', 'button'].includes(tag) &&
+							!(e.target as HTMLElement).closest('schmancy-input, schmancy-icon-button, button, a')
+						)
+					}),
+					tap(e => {
+						e.preventDefault()
+						e.stopPropagation()
+					}),
+				)
 				.pipe(
 					map(e => {
 						const rect = container.getBoundingClientRect()
@@ -308,9 +315,7 @@ export default class SchmancyWindow extends SchmancyElement {
 							auditTime(0, animationFrameScheduler),
 							map(e => ({ clientX: e.clientX, clientY: e.clientY })),
 						)
-						const end$ = fromEvent<PointerEvent>(window, 'pointerup').pipe(
-							filter(e => e.pointerId === pointerId),
-						)
+						const end$ = fromEvent<PointerEvent>(window, 'pointerup').pipe(filter(e => e.pointerId === pointerId))
 
 						return move$.pipe(
 							tap(({ clientX, clientY }) => {
@@ -372,34 +377,37 @@ export default class SchmancyWindow extends SchmancyElement {
 		super.connectedCallback()
 
 		// Pipeline 1: DOM setup + manager registration + drag + z-index sync
-		from(this.updateComplete).pipe(
-			take(1),
-			tap(() => {
-				this.currentCorner = this.corner
-				this.loadPosition()
-				this.applyContainerPosition()
-				this.initDOMState()
-				// Register with window manager
-				const container = this.containerRef.value
-				if (container) {
-					const rect = container.getBoundingClientRect()
-					const bounds: WindowBounds = { left: rect.left, top: rect.top, width: rect.width, height: rect.height }
-					windowManager.register(this.id, bounds, this.freePosition ? 'free' : this.currentCorner)
-				}
-			}),
-			switchMap(() => merge(
-				this.drag$(),
-				windowManager.selectWindow(this.id).pipe(
-					tap(record => {
-						if (!record) return
-						const container = this.containerRef.value
-						if (container) container.style.zIndex = String(record.zIndex)
-					}),
+		from(this.updateComplete)
+			.pipe(
+				take(1),
+				tap(() => {
+					this.currentCorner = this.corner
+					this.loadPosition()
+					this.applyContainerPosition()
+					this.initDOMState()
+					// Register with window manager
+					const container = this.containerRef.value
+					if (container) {
+						const rect = container.getBoundingClientRect()
+						const bounds: WindowBounds = { left: rect.left, top: rect.top, width: rect.width, height: rect.height }
+						windowManager.register(this.id, bounds, this.freePosition ? 'free' : this.currentCorner)
+					}
+				}),
+				switchMap(() =>
+					merge(
+						this.drag$(),
+						windowManager.selectWindow(this.id).pipe(
+							tap(record => {
+								if (!record) return
+								const container = this.containerRef.value
+								if (container) container.style.zIndex = String(record.zIndex)
+							}),
+						),
+					),
 				),
-			)),
-			takeUntil(this.disconnecting),
-		).subscribe()
-
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 
 		// Pipeline 3: Environment -- one subscription
 		merge(
@@ -407,10 +415,10 @@ export default class SchmancyWindow extends SchmancyElement {
 				auditTime(0, animationFrameScheduler),
 				tap(() => this.validateBounds()),
 			),
-			theme.bottomOffset$.pipe(
-				tap(() => this.applyContainerPosition()),
-			),
-		).pipe(takeUntil(this.disconnecting)).subscribe()
+			theme.bottomOffset$.pipe(tap(() => this.applyContainerPosition())),
+		)
+			.pipe(takeUntil(this.disconnecting))
+			.subscribe()
 	}
 
 	disconnectedCallback() {
@@ -464,7 +472,10 @@ export default class SchmancyWindow extends SchmancyElement {
 		}
 		const overlaps = windowManager.findOverlaps(projectedBounds, this.id)
 		if (overlaps.length > 0) {
-			const resolved = resolveOverlap(projectedBounds, overlaps, { width: window.innerWidth, height: window.innerHeight })
+			const resolved = resolveOverlap(projectedBounds, overlaps, {
+				width: window.innerWidth,
+				height: window.innerHeight,
+			})
 			if (Math.abs(resolved.left - projectedBounds.left) > 10 || Math.abs(resolved.top - projectedBounds.top) > 10) {
 				const isRight = this.currentCorner.includes('right')
 				const isBottom = this.currentCorner.includes('bottom')
@@ -502,18 +513,20 @@ export default class SchmancyWindow extends SchmancyElement {
 		})
 		this.currentAnimation = anim
 
-		from(anim.finished).pipe(
-			take(1),
-			tap(() => {
-				if (container.isConnected) {
-					container.style.clipPath = ''
-					container.style.overflow = ''
-					container.style.willChange = ''
-				}
-			}),
-			catchError(() => EMPTY),
-			takeUntil(this.disconnecting),
-		).subscribe()
+		from(anim.finished)
+			.pipe(
+				take(1),
+				tap(() => {
+					if (container.isConnected) {
+						container.style.clipPath = ''
+						container.style.overflow = ''
+						container.style.willChange = ''
+					}
+				}),
+				catchError(() => EMPTY),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 
 		this.dispatchScopedEvent('window-toggle', { state: 'expanded' })
 	}
@@ -527,7 +540,10 @@ export default class SchmancyWindow extends SchmancyElement {
 			container.style.overflow = 'hidden'
 			this.open = false
 			const body = this.bodyRef.value
-			if (body) { body.inert = true; body.style.visibility = 'hidden' }
+			if (body) {
+				body.inert = true
+				body.style.visibility = 'hidden'
+			}
 			this.dispatchScopedEvent('window-toggle', { state: 'collapsed' })
 			return
 		}
@@ -546,17 +562,22 @@ export default class SchmancyWindow extends SchmancyElement {
 		})
 		this.currentAnimation = anim
 
-		from(anim.finished).pipe(
-			take(1),
-			tap(() => {
-				this.open = false
-				container.style.willChange = ''
-				const body = this.bodyRef.value
-				if (body) { body.inert = true; body.style.visibility = 'hidden' }
-			}),
-			catchError(() => EMPTY),
-			takeUntil(this.disconnecting),
-		).subscribe()
+		from(anim.finished)
+			.pipe(
+				take(1),
+				tap(() => {
+					this.open = false
+					container.style.willChange = ''
+					const body = this.bodyRef.value
+					if (body) {
+						body.inert = true
+						body.style.visibility = 'hidden'
+					}
+				}),
+				catchError(() => EMPTY),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 
 		this.dispatchScopedEvent('window-toggle', { state: 'collapsed' })
 	}
@@ -632,6 +653,9 @@ export default class SchmancyWindow extends SchmancyElement {
 			'rounded-2xl': this.open,
 			'rounded-[22px]': !this.open,
 			'overflow-hidden': true,
+			'shadow-sm': !this.open && this.lowered,
+			'shadow-md': !this.open && !this.lowered,
+			'shadow-lg': this.open,
 		})
 
 		const containerStyles = styleMap({
@@ -657,8 +681,7 @@ export default class SchmancyWindow extends SchmancyElement {
 		return html`
 			<schmancy-surface
 				${ref(this.containerRef)}
-				type="glass"
-				.elevation=${this.elevation}
+				type="container"
 				class=${containerClasses}
 				style=${containerStyles}
 				aria-expanded=${this.open}
@@ -682,7 +705,7 @@ export default class SchmancyWindow extends SchmancyElement {
 				>
 					<div
 						${ref(this.headRef)}
-						${cursorGlow({ radius: 200, intensity: 0.10 })}
+						${cursorGlow({ radius: 200, intensity: 0.1 })}
 						class=${headClasses}
 						role="button"
 						tabindex="0"
@@ -694,11 +717,20 @@ export default class SchmancyWindow extends SchmancyElement {
 							<slot></slot>
 						</div>
 						<svg
-							width="16" height="16" viewBox="0 0 24 24" fill="none"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
 							class="shrink-0 text-surface-on/40 transition-transform duration-200 ${this.open ? 'rotate-180' : ''}"
 							aria-hidden="true"
 						>
-							<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+							<path
+								d="M6 9L12 15L18 9"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
 						</svg>
 					</div>
 				</section>

package/types/mixins/surface.mixin.d.ts

@@ -1,24 +1,19 @@
 import type { Constructor } from './constructor';
 import { LitElement } from 'lit';
 import type { TSurfaceColor } from '../src/types/surface';
-export type SchmancySurfaceRounded = 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all';
-export type SchmancySurfaceElevation = 0 | 1 | 2 | 3 | 4 | 5;
 export declare class ISurfaceMixin {
-    rounded: SchmancySurfaceRounded;
-    elevation: SchmancySurfaceElevation;
     type: TSurfaceColor;
-    clickable: boolean;
 }
 /**
- * SurfaceMixin - Adds surface styling properties AND styles to any LitElement
+ * SurfaceMixin — injects surface color-variant styles into any LitElement.
  *
- * Uses Lit's finalizeStyles hook to inject surfaceStyles CSS for all surface type selectors.
- * This is the recommended pattern for mixins that need to add styles.
+ * Uses Lit's `finalizeStyles` hook to inject `surfaceTypeStyles` CSS for all
+ * color-variant selectors. Corner radius, shadow depth, and cursor behavior are
+ * the consumer's responsibility — apply stock Tailwind classes directly on the
+ * element (`rounded-2xl`, `shadow-lg`, `cursor-pointer`).
  *
- * Provides these reflected properties:
- * - `rounded`: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' - Corner rounding
- * - `elevation`: 0-5 - Shadow depth level
- * - `type`: TSurfaceColor - Surface color variant (26+ options)
+ * Provides one reflected property:
+ * - `type`: TSurfaceColor — the color variant (26+ options)
  *
  * Usage:
  * ```typescript
@@ -28,8 +23,7 @@ export declare class ISurfaceMixin {
  * class MyComponent extends SurfaceMixin(TailwindElement(css`
  *   :host { display: block; }
  * `)) {
- *   // Component now has type, fill, rounded, elevation properties
- *   // AND surfaceStyles are automatically included
+ *   // Component now has the type property and surfaceTypeStyles
  * }
  * ```
  */

package/types/src/badge/badge.d.ts

@@ -1,83 +1,50 @@
 import { SchmancyElement } from '@mixins/index';
 /**
- * Badge color types for predefined styles
+ * Semantic color of the badge. Each name maps to one theme color role —
+ * filled badges use that role's container / onContainer, outlined badges
+ * use its strong tone for text and border.
  */
 export type BadgeColor = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'neutral' | 'surface';
 /**
- * Badge size variants
+ * Badge size. Sizes differ only in type scale and padding density.
  */
-export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
+export type BadgeSize = 'xs' | 'sm' | 'md';
 /**
- * Badge shape variants
+ * Badge corner shape.
  */
-export type BadgeShape = 'rounded' | 'pill' | 'square';
+export type BadgeShape = 'pill' | 'rounded';
 /**
- * @element sch-badge
- * A versatile badge component for status indicators, labels, and counts
+ * @element schmancy-badge
+ * A status, label, or count pill. It annotates content; it does not
+ * compete with it — no shadow, no hover affordance, no motion.
  *
- * @slot - The content of the badge (text or HTML)
- * @slot icon - Optional icon to display before the content
+ * @slot - The content of the badge (text or short HTML)
  *
  * @csspart badge - The badge element container
  * @csspart content - The content container
- * @csspart icon - The icon container
  */
 export declare class SchmancyBadgeV2 extends SchmancyElement {
     static styles: import("lit").CSSResult[];
     /**
-     * The color variant of the badge
+     * The semantic color of the badge.
      * @attr
      */
     color: BadgeColor;
     /**
-     * The size of the badge
+     * The size of the badge.
      * @attr
      */
     size: BadgeSize;
     /**
-     * The shape of the badge
+     * The corner shape of the badge.
      * @attr
      */
     shape: BadgeShape;
     /**
-     * Whether the badge has an outlined style
+     * Outlined style: transparent fill, the color's strong tone for text and border.
      * @attr
      */
     outlined: boolean;
-    /**
-     * Custom icon name to display (if no icon slot is provided)
-     * @attr
-     */
-    icon: string;
-    /**
-     * Whether to make the badge pulse to draw attention
-     * @attr
-     */
-    pulse: boolean;
-    /**
-     * Convert the size to appropriate Tailwind classes for the badge container
-     * Using harmonious padding ratios based on golden ratio principles
-     * Refined for more elegant proportions
-     */
-    private getSizeClasses;
-    /**
-     * Get shape classes based on selected shape
-     */
-    private getShapeClasses;
-    /**
-     * Get icon size based on badge size with harmonious proportions
-     * Using golden ratio-inspired proportions relative to text size
-     */
-    private getIconSizeClass;
-    /**
-     * Get additional styling for specific sizes
-     */
-    private getExoticStyles;
-    /**
-     * Get background and text colors based on selected color variant
-     * Enhanced for more elegant color combinations with refined contrasts
-     */
-    private getColorStyles;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {