@mhmo91/schmancy 0.10.36 → 0.10.38

package/src/directives/reveal.ts

@@ -4,6 +4,9 @@
  * Uses Blackbird spring physics for natural, organic motion.
  * Element stays in DOM to prevent layout shift.
  *
+ * When fully revealed, no directive-imposed max-height or overflow:hidden
+ * is left on the element — it lays out at its natural full height.
+ *
  * Usage:
  * ```ts
  * // Basic - uses 'smooth' preset
@@ -12,7 +15,7 @@
  * // With preset - 'snappy' for quick interactions
  * html`<div ${reveal(this.isVisible, { preset: 'snappy' })}>Content</div>`
  *
- * // With custom max height
+ * // Opt-in scroll cap (explicit maxHeight — keeps overflow:auto, does NOT clip)
  * html`<div ${reveal(this.items.length > 1, { maxHeight: '200px' })}>Content</div>`
  *
  * // Bouncy for playful UI
@@ -28,131 +31,203 @@
  * @see packages/schmancy/src/utils/animation.ts for Blackbird system
  */
 
-import { noChange } from 'lit'
-import { AsyncDirective, directive } from 'lit/async-directive.js'
-import type { ElementPart, PartInfo } from 'lit/directive.js'
-import { PartType } from 'lit/directive.js'
+import { noChange } from 'lit';
+import { AsyncDirective, directive } from 'lit/async-directive.js';
+import { type ElementPart, type PartInfo, PartType } from 'lit/directive.js';
+import { fromEvent, Subject } from 'rxjs';
+import { filter, take, takeUntil } from 'rxjs/operators';
 import {
-	SPRING_SMOOTH,
-	SPRING_SNAPPY,
-	SPRING_BOUNCY,
-	SPRING_GENTLE,
-	getEasing,
-	type AnimationPreset,
-} from '../utils/animation'
-import { reducedMotion$ } from './reduced-motion'
+  type AnimationPreset,
+  getEasing,
+  SPRING_BOUNCY,
+  SPRING_GENTLE,
+  SPRING_SMOOTH,
+  SPRING_SNAPPY,
+} from '../utils/animation';
+import { reducedMotion$ } from './reduced-motion';
 
-export type RevealPreset = 'smooth' | 'snappy' | 'bouncy' | 'gentle'
+export type RevealPreset = 'smooth' | 'snappy' | 'bouncy' | 'gentle';
 
 export interface RevealOptions {
-	/** Animation preset (default: 'smooth') */
-	preset?: RevealPreset
-	/** Max height when revealed (default: '10rem') */
-	maxHeight?: string
-	/** Custom duration override in ms (uses preset duration if not specified) */
-	duration?: number
-	/** Custom easing override (uses preset easing if not specified) */
-	easing?: string
+  /** Animation preset (default: 'smooth') */
+  preset?: RevealPreset;
+  /**
+   * Explicit scroll cap (opt-in). When set the element is constrained to
+   * this height with overflow:auto — content scrolls rather than clips.
+   * When omitted (the default) the element is fully unconstrained after
+   * opening: no max-height, no overflow:hidden left on it.
+   */
+  maxHeight?: string;
+  /** Custom duration override in ms (uses preset duration if not specified) */
+  duration?: number;
+  /** Custom easing override (uses preset easing if not specified) */
+  easing?: string;
 }
 
 const PRESETS: Record<RevealPreset, AnimationPreset> = {
-	smooth: SPRING_SMOOTH,
-	snappy: SPRING_SNAPPY,
-	bouncy: SPRING_BOUNCY,
-	gentle: SPRING_GENTLE,
-}
+  smooth: SPRING_SMOOTH,
+  snappy: SPRING_SNAPPY,
+  bouncy: SPRING_BOUNCY,
+  gentle: SPRING_GENTLE,
+};
 
 class RevealDirective extends AsyncDirective {
-	private initialized = false
-	private element: HTMLElement | null = null
-
-	constructor(partInfo: PartInfo) {
-		super(partInfo)
-		if (partInfo.type !== PartType.ELEMENT) {
-			throw new Error('reveal() can only be used on elements')
-		}
-	}
-
-	render(_show?: boolean, _options?: RevealOptions) {
-		return noChange
-	}
-
-	override update(part: ElementPart, [show = false, options = {}]: [boolean | undefined, RevealOptions?]) {
-		const element = part.element as HTMLElement
-		this.element = element
-
-		const { preset = 'smooth', maxHeight = '10rem', duration, easing } = options
-
-		// Get the preset configuration
-		const presetConfig = PRESETS[preset]
-
-		// Determine actual duration and easing
-		const actualDuration = duration ?? presetConfig.duration
-		const actualEasing = easing ?? getEasing(presetConfig)
-
-		const reducedMotion = reducedMotion$.value
-
-		// Set up transitions on first run or when preset changes
-		if (!this.initialized) {
-			this.setupElement(element, actualDuration, actualEasing, reducedMotion)
-			this.initialized = true
-		}
-
-		// Apply show/hide styles with spring physics
-		if (show) {
-			element.style.maxHeight = maxHeight
-			element.style.opacity = '1'
-			element.style.transform = 'translateY(0) scale(1)'
-			element.style.pointerEvents = ''
-			element.style.paddingTop = ''
-			element.style.paddingBottom = ''
-			element.style.marginTop = ''
-			element.style.marginBottom = ''
-			element.removeAttribute('aria-hidden')
-			element.removeAttribute('inert')
-		} else {
-			element.style.maxHeight = '0'
-			element.style.opacity = '0'
-			element.style.transform = 'translateY(-8px) scale(0.98)'
-			element.style.pointerEvents = 'none'
-			element.style.paddingTop = '0'
-			element.style.paddingBottom = '0'
-			element.style.marginTop = '0'
-			element.style.marginBottom = '0'
-			element.setAttribute('aria-hidden', 'true')
-			element.setAttribute('inert', '')
-		}
-
-		return noChange
-	}
-
-	private setupElement(element: HTMLElement, duration: number, easing: string, reducedMotion: boolean): void {
-		element.style.overflow = 'hidden'
-
-		if (reducedMotion) {
-			// Instant transitions for reduced motion
-			element.style.transition = 'none'
-		} else {
-			// Spring physics transitions — include padding/margin so hidden elements take zero space
-			element.style.transition = [
-				`max-height ${duration}ms ${easing}`,
-				`opacity ${duration}ms ${easing}`,
-				`transform ${duration}ms ${easing}`,
-				`padding ${duration}ms ${easing}`,
-				`margin ${duration}ms ${easing}`,
-			].join(', ')
-		}
-	}
-
-	override disconnected(): void {
-		if (this.element) {
-			this.element.style.willChange = ''
-		}
-	}
-
-	override reconnected(): void {
-		// State preserved in inline styles — no action needed
-	}
+  private initialized = false;
+  /** Fires on disconnect to tear down the transitionend subscription. */
+  private teardown$ = new Subject<void>();
+  /** True if this is the very first update call — used to detect always-true initial mount. */
+  private firstUpdate = true;
+
+  constructor(partInfo: PartInfo) {
+    super(partInfo);
+    if (partInfo.type !== PartType.ELEMENT) {
+      throw new Error('reveal() can only be used on elements');
+    }
+  }
+
+  render(show?: boolean, options?: RevealOptions) {
+    void show; void options;
+    return noChange;
+  }
+
+  override update(
+    part: ElementPart,
+    [show = false, options = {}]: [boolean | undefined, RevealOptions?],
+  ) {
+    const element = part.element as HTMLElement;
+
+    const { preset = 'smooth', maxHeight, duration, easing } = options;
+    const explicitCap = maxHeight !== undefined;
+
+    const presetConfig = PRESETS[preset];
+    const actualDuration = duration ?? presetConfig.duration;
+    const actualEasing = easing ?? getEasing(presetConfig);
+    const reducedMotion = reducedMotion$.value;
+
+    const isFirstUpdate = this.firstUpdate;
+    this.firstUpdate = false;
+
+    if (!this.initialized) {
+      this.initialized = true;
+
+      if (reducedMotion) {
+        element.style.transition = 'none';
+      } else {
+        element.style.transition = [
+          `max-height ${actualDuration}ms ${actualEasing}`,
+          `opacity ${actualDuration}ms ${actualEasing}`,
+          `transform ${actualDuration}ms ${actualEasing}`,
+          `padding ${actualDuration}ms ${actualEasing}`,
+          `margin ${actualDuration}ms ${actualEasing}`,
+        ].join(', ');
+      }
+    }
+
+    if (show) {
+      if (isFirstUpdate) {
+        // Always-true initial mount: do not impose max-height animation.
+        // Apply opacity/transform entrance only (visible immediately for
+        // reduced-motion; fades in via the transition for normal motion).
+        if (explicitCap) {
+          element.style.maxHeight = maxHeight;
+          element.style.overflow = 'auto';
+        } else {
+          element.style.maxHeight = '';
+          element.style.overflow = '';
+        }
+        element.style.opacity = '1';
+        element.style.transform = 'translateY(0) scale(1)';
+      } else {
+        // Toggle case: false→true. Animate from 0 to natural height,
+        // then release the clamp so content is fully unconstrained.
+        if (reducedMotion) {
+          if (explicitCap) {
+            element.style.maxHeight = maxHeight;
+            element.style.overflow = 'auto';
+          } else {
+            element.style.maxHeight = '';
+            element.style.overflow = '';
+          }
+          element.style.opacity = '1';
+          element.style.transform = 'translateY(0) scale(1)';
+        } else {
+          // Force a concrete start value so CSS can animate from it.
+          element.style.overflow = 'hidden';
+          element.style.maxHeight = '0';
+          void element.offsetHeight; // force reflow
+
+          const targetHeight = explicitCap ? maxHeight : `${element.scrollHeight}px`;
+          element.style.maxHeight = targetHeight;
+          element.style.opacity = '1';
+          element.style.transform = 'translateY(0) scale(1)';
+
+          if (!explicitCap) {
+            // Once the open animation settles, release the clamp entirely.
+            fromEvent<TransitionEvent>(element, 'transitionend')
+              .pipe(
+                filter((e) => e.propertyName === 'max-height' && e.target === element),
+                take(1),
+                takeUntil(this.teardown$),
+              )
+              .subscribe(() => {
+                element.style.maxHeight = '';
+                element.style.overflow = '';
+              });
+          } else {
+            fromEvent<TransitionEvent>(element, 'transitionend')
+              .pipe(
+                filter((e) => e.propertyName === 'max-height' && e.target === element),
+                take(1),
+                takeUntil(this.teardown$),
+              )
+              .subscribe(() => {
+                element.style.overflow = 'auto';
+              });
+          }
+        }
+      }
+
+      element.style.pointerEvents = '';
+      element.style.paddingTop = '';
+      element.style.paddingBottom = '';
+      element.style.marginTop = '';
+      element.style.marginBottom = '';
+      element.removeAttribute('aria-hidden');
+      element.removeAttribute('inert');
+    } else {
+      // Collapse: animate to height 0. Re-measure from natural height if
+      // the clamp was previously released (max-height is '' or 'none').
+      if (element.style.maxHeight === '' || element.style.maxHeight === 'none') {
+        element.style.overflow = 'hidden';
+        element.style.maxHeight = `${element.scrollHeight}px`;
+        void element.offsetHeight; // force reflow so CSS sees the start value
+      } else {
+        element.style.overflow = 'hidden';
+      }
+
+      element.style.maxHeight = '0';
+      element.style.opacity = '0';
+      element.style.transform = 'translateY(-8px) scale(0.98)';
+      element.style.pointerEvents = 'none';
+      element.style.paddingTop = '0';
+      element.style.paddingBottom = '0';
+      element.style.marginTop = '0';
+      element.style.marginBottom = '0';
+      element.setAttribute('aria-hidden', 'true');
+      element.setAttribute('inert', '');
+    }
+
+    return noChange;
+  }
+
+  override disconnected(): void {
+    this.teardown$.next();
+  }
+
+  override reconnected(): void {
+    // Re-subscribe is handled on the next update() call via the new subscription
+    // created in the show branch. Nothing to wire up here explicitly.
+  }
 }
 
-export const reveal = directive(RevealDirective)
+export const reveal = directive(RevealDirective);

package/src/directives/urgent.ts

@@ -386,7 +386,8 @@ class UrgentDirective extends AsyncDirective {
 	private state: DirectiveState | null = null
 	private coordinator = UrgentCoordinator.getInstance()
 
-	render(_activeOrOptions?: boolean | UrgentOptions, _color?: UrgentColor, _shake?: boolean) {
+	render(activeOrOptions?: boolean | UrgentOptions, color?: UrgentColor, shake?: boolean) {
+		void activeOrOptions; void color; void shake
 		return noChange
 	}
 

package/src/directives/working-snake.ts

@@ -65,7 +65,8 @@ const TAIL_RADIUS = 1.5
 class WorkingSnakeDirective extends AsyncDirective {
 	private state: SnakeState | null = null
 
-	render(_options: WorkingSnakeOptions) {
+	render(options: WorkingSnakeOptions) {
+		void options
 		return noChange
 	}
 

package/src/expand/expand-root.component.ts

@@ -51,19 +51,19 @@ export class SchmancyExpandRoot extends SurfaceMixin(SchmancyElement) {
 	@state() isOpen = false
 	private summaryRect: DOMRect | null = null
 
-	private _panelRef = createRef<HTMLElement>()
-	private _backdropRef = createRef<HTMLDivElement>()
-	private _btnRef = createRef<HTMLButtonElement>()
-	private _owner: (Element & { close?: () => void }) | null = null
-	private _hideIndicator = false
-	private _backdrop = true
+	private panelRef = createRef<HTMLElement>()
+	private backdropRef = createRef<HTMLDivElement>()
+	private btnRef = createRef<HTMLButtonElement>()
+	private owner: (Element & { close?: () => void }) | null = null
+	private hideIndicator = false
+	private backdrop = true
 
 	/** Called by schmancy-expand before nodes are moved */
 	prepare(rect: DOMRect, owner: Element, hideIndicator = false, backdrop = true) {
 		this.summaryRect = rect
-		this._owner = owner as Element & { close?: () => void }
-		this._hideIndicator = hideIndicator
-		this._backdrop = backdrop
+		this.owner = owner as Element & { close?: () => void }
+		this.hideIndicator = hideIndicator
+		this.backdrop = backdrop
 	}
 
 	/** Called by schmancy-expand after nodes are moved in */
@@ -71,7 +71,7 @@ export class SchmancyExpandRoot extends SurfaceMixin(SchmancyElement) {
 		this.isOpen = true
 		await this.updateComplete
 
-		const panel = this._panelRef.value
+		const panel = this.panelRef.value
 		if (!panel) return
 
 		const src = this.summaryRect!
@@ -126,18 +126,18 @@ export class SchmancyExpandRoot extends SurfaceMixin(SchmancyElement) {
 		})
 
 		// 5. Animate the mask open — content revealed, not stretched
-		this._animateOpen(insetTop, insetRight, insetBottom, insetLeft, finalTop)
+		this.animateOpen(insetTop, insetRight, insetBottom, insetLeft, finalTop)
 	}
 
 	/** Animate close, return Promise resolving when done */
 	async triggerClose(targetRect: DOMRect): Promise<void> {
-		await this._animateClose(targetRect)
+		await this.animateClose(targetRect)
 		this.isOpen = false
 		this.summaryRect = null
 	}
 
-	private _animateOpen(insetTop: number, insetRight: number, insetBottom: number, insetLeft: number, finalTop: number) {
-		const panel = this._panelRef.value
+	private animateOpen(insetTop: number, insetRight: number, insetBottom: number, insetLeft: number, finalTop: number) {
+		const panel = this.panelRef.value
 		if (!panel) return
 
 		if (reducedMotion$.value) {
@@ -145,7 +145,7 @@ export class SchmancyExpandRoot extends SurfaceMixin(SchmancyElement) {
 			return
 		}
 
-		const backdrop = this._backdropRef.value
+		const backdrop = this.backdropRef.value
 		if (backdrop) {
 			backdrop.animate([{ opacity: 0 }, { opacity: 1 }], {
 				duration: SPRING_SMOOTH.duration,
@@ -182,7 +182,7 @@ export class SchmancyExpandRoot extends SurfaceMixin(SchmancyElement) {
 			return
 		})
 
-		const btn = this._btnRef.value
+		const btn = this.btnRef.value
 		if (btn) {
 			btn.animate([{ transform: 'rotate(0deg)' }, { transform: 'rotate(180deg)' }], {
 				duration: SPRING_SMOOTH.duration,
@@ -192,8 +192,8 @@ export class SchmancyExpandRoot extends SurfaceMixin(SchmancyElement) {
 		}
 	}
 
-	private _animateClose(targetRect: DOMRect): Promise<void> {
-		const panel = this._panelRef.value
+	private animateClose(targetRect: DOMRect): Promise<void> {
+		const panel = this.panelRef.value
 		if (!panel) return Promise.resolve()
 		if (reducedMotion$.value) return Promise.resolve()
 
@@ -217,7 +217,7 @@ export class SchmancyExpandRoot extends SurfaceMixin(SchmancyElement) {
 
 		const anim = panel.animate(closeKeyframes, { duration: closeDuration, easing: closeEasing, fill: 'forwards' })
 
-		const backdrop = this._backdropRef.value
+		const backdrop = this.backdropRef.value
 		if (backdrop) {
 			backdrop.animate([{ opacity: 1 }, { opacity: 0 }], {
 				duration: closeDuration,
@@ -226,7 +226,7 @@ export class SchmancyExpandRoot extends SurfaceMixin(SchmancyElement) {
 			})
 		}
 
-		const btn = this._btnRef.value
+		const btn = this.btnRef.value
 		if (btn) {
 			btn.animate([{ transform: 'rotate(180deg)' }, { transform: 'rotate(0deg)' }], {
 				duration: closeDuration,
@@ -242,25 +242,25 @@ export class SchmancyExpandRoot extends SurfaceMixin(SchmancyElement) {
 		if (!this.isOpen) return nothing
 
 		return html`
-			${this._backdrop ? html`
+			${this.backdrop ? html`
 				<div
-					${ref(this._backdropRef)}
+					${ref(this.backdropRef)}
 					class="fixed inset-0 z-9998 backdrop-blur-sm backdrop-saturate-150 backdrop-brightness-105 bg-black/[0.07] will-change-[opacity]"
-					@click=${() => this._owner?.close?.()}
+					@click=${() => this.owner?.close?.()}
 				></div>
 			` : nothing}
 			<schmancy-surface
-				${ref(this._panelRef)}
+				${ref(this.panelRef)}
 				class="portal-panel"
 				type=${this.type}
 				style="overflow-y: auto;"
 			>
-				${!this._hideIndicator ? html`
+				${!this.hideIndicator ? html`
 					<button
-						${ref(this._btnRef)}
+						${ref(this.btnRef)}
 						class="minimize-btn"
 						aria-label="Minimize"
-						@click=${() => this._owner?.close?.()}
+						@click=${() => this.owner?.close?.()}
 					>
 						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
 							<path d="M19 9L12 16L5 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>