@mhmo91/schmancy 0.10.37 → 0.10.39

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"/>

package/src/expand/expand.component.ts

@@ -63,11 +63,11 @@ export default class SchmancyExpand extends SchmancyElement {
 
 	@property({ type: Boolean }) inline = false
 
-	private _summaryRef = createRef<HTMLElement>()
-	private _contentSlotRef = createRef<HTMLSlotElement>()
-	private _root: SchmancyExpandRoot | null = null
-	private _movedNodes: Element[] = []
-	private _currentIndicatorAnim: Animation | undefined
+	private summaryRef = createRef<HTMLElement>()
+	private contentSlotRef = createRef<HTMLSlotElement>()
+	private root: SchmancyExpandRoot | null = null
+	private movedNodes: Element[] = []
+	private currentIndicatorAnim: Animation | undefined
 
 	connectedCallback() {
 		super.connectedCallback()
@@ -77,7 +77,7 @@ export default class SchmancyExpand extends SchmancyElement {
 			.pipe(
 				filter(e => e.key === 'Escape'),
 				filter(() => this.open),
-				tap(() => void this._handleClose()),
+				tap(() => void this.handleClose()),
 				takeUntil(this.disconnecting),
 			)
 			.subscribe()
@@ -86,8 +86,8 @@ export default class SchmancyExpand extends SchmancyElement {
 		fromEvent<PointerEvent>(document, 'pointerdown')
 			.pipe(
 				filter(() => this.open),
-				filter(e => !!this._root && !e.composedPath().includes(this._root)),
-				tap(() => void this._handleClose()),
+				filter(e => !!this.root && !e.composedPath().includes(this.root)),
+				tap(() => void this.handleClose()),
 				takeUntil(this.disconnecting),
 			)
 			.subscribe()
@@ -95,17 +95,17 @@ export default class SchmancyExpand extends SchmancyElement {
 
 	disconnectedCallback() {
 		super.disconnectedCallback()
-		if (this._movedNodes.length > 0) {
-			this._movedNodes.forEach(n => this.appendChild(n))
-			this._movedNodes = []
+		if (this.movedNodes.length > 0) {
+			this.movedNodes.forEach(n => this.appendChild(n))
+			this.movedNodes = []
 		}
-		if (this._root && this._root.children.length === 0) {
-			this._root.remove()
-			this._root = null
+		if (this.root && this.root.children.length === 0) {
+			this.root.remove()
+			this.root = null
 		}
 	}
 
-	private async _getOrCreateRoot(): Promise<SchmancyExpandRoot> {
+	private async getOrCreateRoot(): Promise<SchmancyExpandRoot> {
 		const theme = await lastValueFrom(this.discover<HTMLElement>('schmancy-theme'))
 		const container: HTMLElement = theme ?? document.querySelector('schmancy-theme') ?? document.body
 		let root = container.querySelector('schmancy-expand-root') as SchmancyExpandRoot | null
@@ -118,47 +118,47 @@ export default class SchmancyExpand extends SchmancyElement {
 
 	/** Close the expand portal, animating back to the summary position. */
 	public close(): void {
-		void this._handleClose()
+		void this.handleClose()
 	}
 
 	/** Programmatically open the expand portal. */
 	public expand(): void {
 		if (this.open) return
-		void this._expand()
+		void this.expandPortal()
 	}
 
 	protected override updated(changed: Map<PropertyKey, unknown>) {
 		super.updated(changed)
-		if (changed.has('open') && this.open && !this.inline && !this._root) {
-			void this._expand()
+		if (changed.has('open') && this.open && !this.inline && !this.root) {
+			void this.expandPortal()
 		}
 	}
 
-	private _toggle() {
+	private toggle() {
 		if (this.inline) {
 			this.open = !this.open
-			this._animateIndicator(this.open)
+			this.animateIndicator(this.open)
 		} else if (!this.open) {
-			void this._expand()
+			void this.expandPortal()
 		}
 	}
 
-	private _handleSummaryClick(e: MouseEvent) {
+	private handleSummaryClick(e: MouseEvent) {
 		e.preventDefault()
-		this._toggle()
+		this.toggle()
 	}
 
-	private async _expand() {
+	private async expandPortal() {
 		if (this.inline) {
 			this.open = true
-			this._animateIndicator(true)
+			this.animateIndicator(true)
 			return
 		}
 
-		const root = await this._getOrCreateRoot()
-		this._root = root
-		const summary = this._summaryRef.value
-		const contentSlot = this._contentSlotRef.value
+		const root = await this.getOrCreateRoot()
+		this.root = root
+		const summary = this.summaryRef.value
+		const contentSlot = this.contentSlotRef.value
 		if (!summary || !contentSlot) return
 
 		const summaryRect = summary.getBoundingClientRect()
@@ -167,44 +167,44 @@ export default class SchmancyExpand extends SchmancyElement {
 
 		root.prepare(summaryRect, this, this.hideIndicator, this.backdrop)
 
-		this._movedNodes = [...nodes]
-		this._movedNodes.forEach(n => root.appendChild(n))
+		this.movedNodes = [...nodes]
+		this.movedNodes.forEach(n => root.appendChild(n))
 
 		root.triggerOpen()
 
-		this._animateIndicator(true)
+		this.animateIndicator(true)
 		this.open = true
 	}
 
-	async _handleClose() {
+	async handleClose() {
 		if (this.inline) {
-			this._animateIndicator(false)
+			this.animateIndicator(false)
 			this.open = false
 			return
 		}
 
-		const root = this._root
-		const summary = this._summaryRef.value
+		const root = this.root
+		const summary = this.summaryRef.value
 		if (!root || !summary) return
 
 		const summaryRect = summary.getBoundingClientRect()
-		this._animateIndicator(false)
+		this.animateIndicator(false)
 
 		await root.triggerClose(summaryRect)
 
-		this._movedNodes.forEach(n => this.appendChild(n))
-		this._movedNodes = []
+		this.movedNodes.forEach(n => this.appendChild(n))
+		this.movedNodes = []
 		this.open = false
 	}
 
-	private _animateIndicator(isOpen: boolean) {
+	private animateIndicator(isOpen: boolean) {
 		if (reducedMotion$.value) return
 
 		const indicator = this.shadowRoot?.querySelector('.indicator') as HTMLElement | null
 		if (!indicator) return
 
-		this._currentIndicatorAnim?.cancel()
-		this._currentIndicatorAnim = indicator.animate(
+		this.currentIndicatorAnim?.cancel()
+		this.currentIndicatorAnim = indicator.animate(
 			[
 				{ transform: `rotate(${isOpen ? '0deg' : `${this.indicatorRotate}deg`})` },
 				{ transform: `rotate(${isOpen ? `${this.indicatorRotate}deg` : '0deg'})` },
@@ -228,15 +228,15 @@ export default class SchmancyExpand extends SchmancyElement {
 		return html`
 			<div class="w-full rounded-xl">
 				<div
-					${ref(this._summaryRef)}
+					${ref(this.summaryRef)}
 					class=${summaryClasses}
 					tabindex="0"
 					role="button"
-					@click=${this._handleSummaryClick}
+					@click=${this.handleSummaryClick}
 					@keydown=${(e: KeyboardEvent) => {
 						if (e.key === 'Enter' || e.key === ' ') {
 							e.preventDefault()
-							this._toggle()
+							this.toggle()
 						}
 					}}
 				>
@@ -267,13 +267,13 @@ export default class SchmancyExpand extends SchmancyElement {
 					? html`
 						<div class="inline-grid" ?data-open=${this.open}>
 							<div class="inner">
-								<slot ${ref(this._contentSlotRef)}></slot>
+								<slot ${ref(this.contentSlotRef)}></slot>
 							</div>
 						</div>
 					`
 					: html`
 						<div style=${styleMap(this.open ? {} : { display: 'none' })}>
-							<slot ${ref(this._contentSlotRef)}></slot>
+							<slot ${ref(this.contentSlotRef)}></slot>
 						</div>
 					`}
 			</div>

package/src/fab/fab.ts

@@ -34,6 +34,7 @@ export class SchmancyFab extends SchmancyElement {
 			:host {
 				/* M3 FAB (medium) — 16dp shape, 24dp icon, resting level 3 */
 				display: inline-flex;
+				flex-shrink: 0;
 				position: relative;
 				touch-action: manipulation;
 				overflow: hidden;