@mhmo91/schmancy 0.10.36 → 0.10.38

package/src/details/details.ts

@@ -133,11 +133,11 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 
 	@property({ type: Boolean, reflect: true })
 	get open() {
-		return this._open$.value
+		return this.#open$.value
 	}
 	set open(value: boolean) {
-		if (this._open$.value !== value) {
-			this._open$.next(value)
+		if (this.#open$.value !== value) {
+			this.#open$.next(value)
 		}
 	}
 
@@ -162,16 +162,16 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 	@property({ attribute: 'content-padding' })
 	contentPadding = 'p-3'
 
-	private _open$ = new BehaviorSubject<boolean>(false)
-	private _indicatorRef: Ref<HTMLElement> = createRef()
-	private _contentRef: Ref<HTMLDivElement> = createRef()
-	private _currentAnimation?: Animation
-	private _indicatorIsOpen = false
-	private _closing = false
-	private _closeSub?: Subscription
+	#open$ = new BehaviorSubject<boolean>(false)
+	#indicatorRef: Ref<HTMLElement> = createRef()
+	#contentRef: Ref<HTMLDivElement> = createRef()
+	#currentAnimation?: Animation
+	#indicatorIsOpen = false
+	#closing = false
+	#closeSub?: Subscription
 
 	/** True when browser handles close animation natively via ::details-content */
-	private _nativeAnim =
+	#nativeAnim =
 		typeof CSS !== 'undefined' &&
 		!!CSS.supports?.('selector(::details-content)') &&
 		!!CSS.supports?.('interpolate-size', 'allow-keywords')
@@ -180,7 +180,7 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 	 * Lazy rendering: tracks if content has ever been opened.
 	 * Once true, content stays rendered (even when closed) for smooth animations.
 	 */
-	@state() private _hasOpened = false
+	@state() private hasOpened = false
 
 	constructor() {
 		super()
@@ -191,15 +191,15 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 	connectedCallback() {
 		super.connectedCallback()
 
-		this._open$
+		this.#open$
 			.pipe(
 				distinctUntilChanged(),
 				tap(isOpen => {
-					if (isOpen && !this._hasOpened) {
-						this._hasOpened = true
+					if (isOpen && !this.hasOpened) {
+						this.hasOpened = true
 					}
-					this._animateIndicator(isOpen)
-					this._updateIndicatorSlot()
+					this.#animateIndicator(isOpen)
+					this.#updateIndicatorSlot()
 				}),
 				takeUntil(this.disconnecting),
 			)
@@ -208,11 +208,11 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 
 	disconnectedCallback() {
 		super.disconnectedCallback()
-		this._closeSub?.unsubscribe()
+		this.#closeSub?.unsubscribe()
 	}
 
 	render() {
-		const isOpen = this._open$.value
+		const isOpen = this.#open$.value
 
 		const detailsClasses = this.classMap({
 			'w-full rounded-xl transition-shadow duration-200 ease-out': true,
@@ -240,15 +240,15 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 		})
 
 		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}>
+			<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}>
 					${!this.hideIndicator
 						? html`
 								<span
-									${ref(this._indicatorRef)}
+									${ref(this.#indicatorRef)}
 									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}>
+									<slot name="indicator" @slotchange=${this.#handleIndicatorSlotChange}>
 										<svg
 											width="20"
 											height="20"
@@ -278,13 +278,13 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 				</summary>
 
 				<div
-					${ref(this._contentRef)}
+					${ref(this.#contentRef)}
 					class="content-wrapper"
-					data-open=${isOpen && !this._closing}
+					data-open=${isOpen && !this.#closing}
 					aria-hidden=${isOpen ? 'false' : 'true'}
 				>
 					<div class="content-inner">
-						${this._hasOpened
+						${this.hasOpened
 							? html`
 									<div class=${contentClasses}>
 										<slot></slot>
@@ -298,7 +298,7 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 		`
 	}
 
-	private _handleSummaryClick(e: MouseEvent) {
+	#handleSummaryClick(e: MouseEvent) {
 		if ((e.target as HTMLElement).closest('[slot="actions"]')) {
 			e.preventDefault()
 			return
@@ -307,23 +307,23 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 			e.preventDefault()
 			return
 		}
-		if (this._closing) {
+		if (this.#closing) {
 			e.preventDefault()
 			return
 		}
 
 		// Native animated path (Chromium 131+): browser handles everything via CSS
-		if (this._nativeAnim) return
+		if (this.#nativeAnim) return
 
 		// Fallback: manually animate close via CSS transition, then close native details
-		if (this._open$.value) {
+		if (this.#open$.value) {
 			e.preventDefault()
-			this._startClose()
+			this.#startClose()
 		}
-		// If closed, let native open happen (handled by _handleToggle)
+		// If closed, let native open happen (handled by #handleToggle)
 	}
 
-	private _handleToggle(e: Event) {
+	#handleToggle(e: Event) {
 		e.stopPropagation()
 
 		const ownDetails = this.shadowRoot?.querySelector('details')
@@ -331,15 +331,15 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 
 		const newState = ownDetails.open
 
-		if (this._nativeAnim) {
+		if (this.#nativeAnim) {
 			// Native path: handle both open and close
-			if (this._open$.value !== newState) {
+			if (this.#open$.value !== newState) {
 				this.open = newState
 				this.dispatchScopedEvent('toggle', { open: newState })
 			}
 		} else {
-			// Fallback path: only handle OPEN (close is driven by _startClose)
-			if (newState && this._open$.value !== newState) {
+			// Fallback path: only handle OPEN (close is driven by #startClose)
+			if (newState && this.#open$.value !== newState) {
 				this.open = newState
 				this.dispatchScopedEvent('toggle', { open: newState })
 			}
@@ -350,25 +350,25 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 	 * Fallback close: trigger CSS grid+opacity transition, then close native <details>.
 	 * The CSS transition (400ms) handles the visual collapse — no WAAPI needed.
 	 */
-	private _startClose() {
-		this._closing = true
-		this._closeSub?.unsubscribe()
+	#startClose() {
+		this.#closing = true
+		this.#closeSub?.unsubscribe()
 
 		// Immediately collapse the grid wrapper via DOM attribute
-		this._contentRef.value?.setAttribute('data-open', 'false')
+		this.#contentRef.value?.setAttribute('data-open', 'false')
 
 		// Animate indicator immediately
-		this._animateIndicator(false)
+		this.#animateIndicator(false)
 
 		// After CSS transition completes, close native details and update state
-		const wrapper = this._contentRef.value
+		const wrapper = this.#contentRef.value
 		if (!wrapper) return
 
-		this._closeSub = fromEvent<TransitionEvent>(wrapper, 'transitionend').pipe(
+		this.#closeSub = fromEvent<TransitionEvent>(wrapper, 'transitionend').pipe(
 			filter(e => e.propertyName === 'grid-template-rows'),
 			take(1),
 			tap(() => {
-				this._closing = false
+				this.#closing = false
 				this.open = false
 				this.dispatchScopedEvent('toggle', { open: false })
 			}),
@@ -376,33 +376,33 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 		).subscribe()
 	}
 
-	private _handleIndicatorSlotChange(e: Event) {
+	#handleIndicatorSlotChange(e: Event) {
 		const slot = e.target as HTMLSlotElement
 		slot.assignedElements().forEach(el => {
-			el.setAttribute('data-open', String(this._open$.value))
+			el.setAttribute('data-open', String(this.#open$.value))
 		})
 	}
 
-	private _updateIndicatorSlot() {
+	#updateIndicatorSlot() {
 		const slot = this.shadowRoot?.querySelector('slot[name="indicator"]') as HTMLSlotElement | null
 		if (slot) {
 			slot.assignedElements().forEach(el => {
-				el.setAttribute('data-open', String(this._open$.value))
+				el.setAttribute('data-open', String(this.#open$.value))
 			})
 		}
 	}
 
 	/** Idempotent indicator rotation — skips if already at target state */
-	private _animateIndicator(isOpen: boolean) {
-		if (this._indicatorIsOpen === isOpen) return
-		this._indicatorIsOpen = isOpen
+	#animateIndicator(isOpen: boolean) {
+		if (this.#indicatorIsOpen === isOpen) return
+		this.#indicatorIsOpen = isOpen
 
-		const indicator = this._indicatorRef.value
+		const indicator = this.#indicatorRef.value
 		if (!indicator || reducedMotion$.value) return
 
-		this._currentAnimation?.cancel()
+		this.#currentAnimation?.cancel()
 
-		this._currentAnimation = indicator.animate(
+		this.#currentAnimation = indicator.animate(
 			[
 				{ transform: `rotate(${isOpen ? '0deg' : `${this.indicatorRotate}deg`})` },
 				{ transform: `rotate(${isOpen ? `${this.indicatorRotate}deg` : '0deg'})` },

package/src/directives/ai-badge.ts

@@ -17,7 +17,8 @@ interface State {
 class AIBadgeDirective extends AsyncDirective {
 	private state: State | null = null
 
-	render(_message?: string) {
+	render(message?: string) {
+		void message
 		return noChange
 	}
 

package/src/directives/animate-text.ts

@@ -56,7 +56,8 @@ class AnimateTextDirective extends AsyncDirective {
 	private disconnecting$ = new Subject<void>()
 	private initialized = false
 
-	render(_options: AnimateTextOptions) {
+	render(options: AnimateTextOptions) {
+		void options
 		return noChange
 	}
 

package/src/directives/art/art.directive.ts

@@ -23,7 +23,8 @@ interface ExtendedArtState extends ArtState {
 class ArtDirective extends AsyncDirective {
 	private state: ExtendedArtState | null = null
 
-	render(_options: ArtOptions) {
+	render(options: ArtOptions) {
+		void options
 		return noChange
 	}
 

package/src/directives/battery.ts

@@ -317,7 +317,8 @@ class FutureCellDirective extends AsyncDirective {
 		return base * (0.15 + pct * 0.85)
 	}
 
-	render(_options: FutureCellOptions) {
+	render(options: FutureCellOptions) {
+		void options
 		return noChange
 	}
 

package/src/directives/confirm-click.ts

@@ -36,7 +36,9 @@ class ConfirmClickDirective extends Directive {
 		}
 	}
 
-	render(_callback: () => void, _options?: ConfirmClickOptions) {
+	render(callback: () => void, options?: ConfirmClickOptions) {
+		void callback
+		void options
 		return undefined
 	}
 
@@ -105,11 +107,11 @@ class ConfirmClickDirective extends Directive {
 		const timeout = options.timeout ?? 3000
 
 		// 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 iconButton = element as HTMLElement & { icon?: string; ['capturedIcon']?: string }
 		const hostIcon =
 			options.icon ??
 			iconButton.icon ??
-			iconButton._capturedIcon ??
+			iconButton['capturedIcon'] ??
 			element.textContent?.trim() ??
 			'warning'
 

package/src/directives/cursor-glow.ts

@@ -33,7 +33,8 @@ class CursorGlowDirective extends AsyncDirective {
 	private didSetPosition = false
 	private cachedRect?: DOMRect
 
-	render(_options?: CursorGlowOptions) {
+	render(options?: CursorGlowOptions) {
+		void options
 		return undefined
 	}
 

package/src/directives/cycle-text.ts

@@ -73,7 +73,8 @@ class CycleTextDirective extends AsyncDirective {
 	private disconnecting$ = new Subject<void>()
 	private initialized = false
 
-	render(_options?: CycleTextOptions) {
+	render(options?: CycleTextOptions) {
+		void options
 		return noChange
 	}
 

package/src/directives/depth-of-field.ts

@@ -31,7 +31,8 @@ class DepthOfFieldDirective extends AsyncDirective {
 	private isBlurred = false
 	private transitionSet = false
 
-	render(_options: DepthOfFieldOptions) {
+	render(options: DepthOfFieldOptions) {
+		void options
 		return undefined
 	}
 

package/src/directives/drag.ts

@@ -265,7 +265,8 @@ export class DragDirective extends Directive {
 		this.element = undefined
 	}
 
-	render(_id: string) {
+	render(id: string) {
+		void id
 		return nothing
 	}
 }
@@ -354,7 +355,8 @@ export class DropDirective extends Directive {
 		this.element = undefined
 	}
 
-	render(_destinationId: string) {
+	render(destinationId: string) {
+		void destinationId
 		return nothing
 	}
 }

package/src/directives/fyi.ts

@@ -83,7 +83,8 @@ class FyiDirective extends AsyncDirective {
 	private destroy$ = new Subject<void>()
 	private subscriptions = new Subscription()
 
-	render(_options?: FyiOptions) {
+	render(options?: FyiOptions) {
+		void options
 		return noChange
 	}
 

package/src/directives/gravity.ts

@@ -37,7 +37,8 @@ class GravityDirective extends AsyncDirective {
 	private hasAnimated = false
 	private options?: GravityOptions
 
-	render(_options?: GravityOptions) {
+	render(options?: GravityOptions) {
+		void options
 		return undefined
 	}
 

package/src/directives/hummingbird.ts

@@ -224,7 +224,8 @@ class HummingbirdDirective extends AsyncDirective {
 		}
 	}
 
-	render(_options?: boolean | HummingbirdOptions) {
+	render(options?: boolean | HummingbirdOptions) {
+		void options
 		return noChange
 	}
 

package/src/directives/intersect.ts

@@ -70,9 +70,10 @@ class IntersectDirective extends AsyncDirective {
 	private state: IntersectState | null = null
 
 	render(
-		_callbackOrOptions: IntersectCallback | IntersectCallbacks,
-		_options?: IntersectOptions,
+		callbackOrOptions: IntersectCallback | IntersectCallbacks,
+		options?: IntersectOptions,
 	) {
+		void callbackOrOptions; void options
 		return noChange
 	}
 

package/src/directives/liquid.ts

@@ -66,7 +66,8 @@ interface State {
 class LiquidDirective extends AsyncDirective {
 	private state: State | null = null
 
-	render(_options?: LiquidOptions) {
+	render(options?: LiquidOptions) {
+		void options
 		return noChange
 	}
 

package/src/directives/living-border.ts

@@ -56,7 +56,8 @@ class LivingBorderDirective extends AsyncDirective {
 	private didSetPosition = false
 	private lastOptions?: LivingBorderOptions
 
-	render(_options?: LivingBorderOptions) {
+	render(options?: LivingBorderOptions) {
+		void options
 		return undefined
 	}
 

package/src/directives/long-press.ts

@@ -27,7 +27,8 @@ class LongPressDirective extends Directive {
 		}
 	}
 
-	render(_callback: () => void, _options?: LongPressOptions) {
+	render(callback: () => void, options?: LongPressOptions) {
+		void callback; void options
 		// Directives that set up event listeners don't render content
 		return undefined
 	}

package/src/directives/magnetic.ts

@@ -32,7 +32,8 @@ class MagneticDirective extends AsyncDirective {
 	private prevKey?: string
 	private cachedRect?: DOMRect
 
-	render(_options?: MagneticOptions) {
+	render(options?: MagneticOptions) {
+		void options
 		return undefined
 	}
 

package/src/directives/missed-punch.ts

@@ -49,7 +49,8 @@ const SHARD_COUNT = 8
 class MissedPunchDirective extends AsyncDirective {
 	private state: MissedPunchState | null = null
 
-	render(_options: MissedPunchOptions) {
+	render(options: MissedPunchOptions) {
+		void options
 		return noChange
 	}
 

package/src/directives/nebula.ts

@@ -229,7 +229,7 @@ interface State {
 // =============================================================================
 
 class NebulaCoordinator {
-	private static _instance: NebulaCoordinator | null = null
+	static #instance: NebulaCoordinator | null = null
 	private elementToDirective = new WeakMap<HTMLElement, NebulaDirective>()
 	private instances = new Set<NebulaDirective>()
 	private observer: IntersectionObserver | null = null
@@ -237,10 +237,10 @@ class NebulaCoordinator {
 	private tabVisible = true
 
 	static get instance(): NebulaCoordinator {
-		if (!NebulaCoordinator._instance) {
-			NebulaCoordinator._instance = new NebulaCoordinator()
+		if (!NebulaCoordinator.#instance) {
+			NebulaCoordinator.#instance = new NebulaCoordinator()
 		}
-		return NebulaCoordinator._instance
+		return NebulaCoordinator.#instance
 	}
 
 	register(dir: NebulaDirective, element: HTMLElement): void {
@@ -310,7 +310,8 @@ class NebulaDirective extends AsyncDirective {
 	private state: State | null = null
 	private coordinator = NebulaCoordinator.instance
 
-	render(_options?: NebulaOptions) {
+	render(options?: NebulaOptions) {
+		void options
 		return noChange
 	}
 

package/src/directives/overflow-within.ts

@@ -88,7 +88,8 @@ class OverflowWithinDirective extends AsyncDirective {
 	private disconnecting$ = new Subject<void>()
 	private currentName?: string
 
-	render(_options?: OverflowWithinOptions) {
+	render(options?: OverflowWithinOptions) {
+		void options
 		return noChange
 	}