@mhmo91/schmancy 0.10.35 → 0.10.37

package/src/directives/fill.ts

@@ -1,7 +1,7 @@
 import { AsyncDirective, directive } from 'lit/async-directive.js'
 import { ElementPart, PartType } from 'lit/directive.js'
 import { EMPTY, Subject, animationFrameScheduler, combineLatest, fromEvent, merge, timer } from 'rxjs'
-import { auditTime, filter, startWith, switchMap, takeUntil, tap } from 'rxjs/operators'
+import { auditTime, distinctUntilChanged, filter, map, startWith, switchMap, takeUntil, tap } from 'rxjs/operators'
 import { theme } from '../theme/theme.service'
 import { fromResizeObserver } from './layout'
 
@@ -50,6 +50,15 @@ class Fill extends AsyncDirective {
 					: EMPTY,
 				fromEvent(window, 'orientationchange'),
 				fromEvent(document, 'focusout', { passive: true }).pipe(switchMap(() => timer(100))),
+				// Observe `el` itself: this is the post-layout settle trigger
+				// (its initial callback fires once `rect.top/left` resolve) and
+				// the only DOM trigger for a top-level fill element whose
+				// `el.parentElement` is null. It is loop-safe ONLY because of
+				// the `distinctUntilChanged` gate below: write → RO fires →
+				// recompute → identical value → gate suppresses → no write →
+				// RO quiet (converges in ≤2 frames). The ~20s overlay hang was
+				// the *missing gate*, not the observation — without it every
+				// write re-fired the observer forever.
 				fromResizeObserver(el),
 				el.parentElement ? fromResizeObserver(el.parentElement) : EMPTY,
 			).pipe(auditTime(0, animationFrameScheduler), startWith(null)),
@@ -61,14 +70,28 @@ class Fill extends AsyncDirective {
 					const vv = window.visualViewport
 					return vv ? Math.abs(vv.scale - 1) <= 0.01 : true
 				}),
-				tap(([, bottomOffset, isFullscreen]) => {
+				map(([, bottomOffset, isFullscreen]) => {
 					const vv = window.visualViewport
 					const rect = el.getBoundingClientRect()
+					return {
+						height: `${Math.max(0, (vv?.height ?? window.innerHeight) - rect.top)}px`,
+						width: `${Math.max(0, (vv?.width ?? window.innerWidth) - rect.left)}px`,
+						paddingBottom: `${isFullscreen ? 0 : bottomOffset}px`,
+					}
+				}),
+				// Idempotent gate: once geometry is stable the computed values
+				// stop changing, so no DOM write happens and no resize is
+				// emitted — the parent observer (and any ancestor's, e.g. the
+				// overlay's) goes quiet instead of ping-ponging.
+				distinctUntilChanged(
+					(a, b) => a.height === b.height && a.width === b.width && a.paddingBottom === b.paddingBottom,
+				),
+				tap(({ height, width, paddingBottom }) => {
 					const s = el.style
 					s.boxSizing = 'border-box'
-					s.height = `${Math.max(0, (vv?.height ?? window.innerHeight) - rect.top)}px`
-					s.width = `${Math.max(0, (vv?.width ?? window.innerWidth) - rect.left)}px`
-					s.paddingBottom = `${isFullscreen ? 0 : bottomOffset}px`
+					s.height = height
+					s.width = width
+					s.paddingBottom = paddingBottom
 					s.minHeight = '0'
 					s.minWidth = '0'
 					s.overflow = 'hidden'

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,202 @@
  * @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) {
+    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/fab/fab.test.ts

@@ -0,0 +1,101 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import './fab'
+import '../icons/icon'
+import { expectNoA11yViolations } from '../test-utils/a11y'
+import type { SchmancyFab } from './fab'
+
+const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
+
+const base = (fab: SchmancyFab) =>
+	fab.shadowRoot!.querySelector('[part="base"]') as HTMLButtonElement
+
+describe('schmancy-fab — M3 contract', () => {
+	let host: HTMLDivElement
+
+	beforeEach(() => {
+		host = document.createElement('div')
+		document.body.appendChild(host)
+	})
+
+	afterEach(() => {
+		host.remove()
+	})
+
+	it('renders a non-disablable native button (M3: a FAB is never disabled)', async () => {
+		host.innerHTML = `<schmancy-fab aria-label="Compose"><schmancy-icon>edit</schmancy-icon></schmancy-fab>`
+		const fab = host.querySelector('schmancy-fab') as SchmancyFab
+		await nextUpdate()
+		const btn = base(fab)
+		expect(btn.tagName).toBe('BUTTON')
+		expect(btn.getAttribute('type')).toBe('button')
+		expect('disabled' in fab).toBe(false)
+	})
+
+	it('defaults to surface / medium: surface-containerHigh container, primary on-colour, 16dp shape', async () => {
+		host.innerHTML = `<schmancy-fab aria-label="Compose"><schmancy-icon>edit</schmancy-icon></schmancy-fab>`
+		const fab = host.querySelector('schmancy-fab') as SchmancyFab
+		await nextUpdate()
+		expect(fab.variant).toBe('surface')
+		expect(fab.size).toBe('medium')
+		expect(fab.extended).toBe(false)
+		const cls = base(fab).classList
+		expect(cls.contains('bg-surface-containerHigh')).toBe(true)
+		expect(cls.contains('text-primary-default')).toBe(true)
+		expect(cls.contains('size-14')).toBe(true)
+		expect(getComputedStyle(fab).borderTopLeftRadius).toBe('16px')
+	})
+
+	it.each([
+		['primary', 'bg-primary-container', 'text-primary-onContainer'],
+		['secondary', 'bg-secondary-container', 'text-secondary-onContainer'],
+		['tertiary', 'bg-tertiary-container', 'text-tertiary-onContainer'],
+	] as const)('maps the %s variant to its M3 container + on-container colour pair', async (variant, bg, fg) => {
+		host.innerHTML = `<schmancy-fab variant="${variant}" aria-label="x"><schmancy-icon>add</schmancy-icon></schmancy-fab>`
+		const fab = host.querySelector('schmancy-fab') as SchmancyFab
+		await nextUpdate()
+		const cls = base(fab).classList
+		expect(cls.contains(bg)).toBe(true)
+		expect(cls.contains(fg)).toBe(true)
+	})
+
+	it('applies the M3 size geometry: small 12dp/40, large 28dp/36 icon', async () => {
+		host.innerHTML = `<schmancy-fab size="small" aria-label="x"><schmancy-icon>add</schmancy-icon></schmancy-fab>`
+		let fab = host.querySelector('schmancy-fab') as SchmancyFab
+		await nextUpdate()
+		expect(base(fab).classList.contains('size-10')).toBe(true)
+		expect(getComputedStyle(fab).borderTopLeftRadius).toBe('12px')
+
+		host.innerHTML = `<schmancy-fab size="large" aria-label="x"><schmancy-icon>add</schmancy-icon></schmancy-fab>`
+		fab = host.querySelector('schmancy-fab') as SchmancyFab
+		await nextUpdate()
+		expect(base(fab).classList.contains('size-24')).toBe(true)
+		expect(getComputedStyle(fab).borderTopLeftRadius).toBe('28px')
+	})
+
+	it('derives the extended form from a non-empty label and renders the label', async () => {
+		host.innerHTML = `<schmancy-fab label="Compose" variant="primary"><schmancy-icon>edit</schmancy-icon></schmancy-fab>`
+		const fab = host.querySelector('schmancy-fab') as SchmancyFab
+		await nextUpdate()
+		expect(fab.extended).toBe(true)
+		expect(fab.hasAttribute('extended')).toBe(true)
+		const btn = base(fab)
+		expect(btn.classList.contains('size-14')).toBe(false)
+		expect(btn.classList.contains('ps-4')).toBe(true)
+		expect(btn.classList.contains('pe-5')).toBe(true)
+		expect(btn.textContent).toContain('Compose')
+	})
+
+	it('reflects lowered and hides the icon slot from AT when a name is present', async () => {
+		host.innerHTML = `<schmancy-fab lowered label="New"><schmancy-icon>edit</schmancy-icon></schmancy-fab>`
+		const fab = host.querySelector('schmancy-fab') as SchmancyFab
+		await nextUpdate()
+		expect(fab.hasAttribute('lowered')).toBe(true)
+		expect(fab.shadowRoot!.querySelector('slot')!.getAttribute('aria-hidden')).toBe('true')
+	})
+
+	it('has no a11y violations as an icon-only FAB with an accessible name', async () => {
+		host.innerHTML = `<schmancy-fab aria-label="Compose message"><schmancy-icon>edit</schmancy-icon></schmancy-fab>`
+		await nextUpdate()
+		await expectNoA11yViolations(host)
+	})
+})