@mhmo91/schmancy 0.10.33 → 0.10.35

package/src/boat/boat.ts

@@ -1,219 +1,159 @@
 import { SchmancyElement } from '@mixins/index'
-import { css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { css, html, type PropertyValues } from 'lit'
+import { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { createRef, ref } from 'lit/directives/ref.js'
 import { styleMap } from 'lit/directives/style-map.js'
-import { when } from 'lit/directives/when.js'
-import { filter, finalize, fromEvent, map, merge, switchMap, takeUntil, tap } from 'rxjs'
-import { SPRING_SMOOTH, SPRING_SNAPPY } from '../utils/animation.js'
+import { filter, finalize, fromEvent, map, merge, type Subscription, switchMap, takeUntil, tap } from 'rxjs'
 import { reducedMotion$ } from '../directives/reduced-motion'
+import { show } from '../overlay/overlay.service'
 import { theme } from '../theme/theme.service.js'
+import { SPRING_SMOOTH } from '../utils/animation.js'
 
-const FAB_HEIGHT = 36
 const DRAG_THRESHOLD = 5
 const POSITION_STORAGE_KEY_PREFIX = 'schmancy-boat-'
 
 type Corner = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
-type BoatState = 'collapsed' | 'expanded'
 interface Position {
 	x: number
 	y: number
 }
 
+/**
+ * Material-3 extended FAB that delegates its expanded panel to the `show()`
+ * overlay service. Collapsed: a draggable, corner-anchored pill (icon + label,
+ * circular when no label). Activated: the default-slot content blooms from the
+ * FAB as an overlay (backdrop / Esc / back-button / sheet-on-narrow handled by
+ * the overlay primitive).
+ */
 @customElement('schmancy-boat')
 export default class SchmancyBoat extends SchmancyElement {
 	static styles = [css`
-	:host {
-		display: contents;
-		position: relative;
-		z-index: 1000;
-	}
-	:host([hidden]) {
-		display: none !important;
-	}
-`]
+		:host {
+			display: contents;
+		}
+		:host([hidden]) {
+			display: none !important;
+		}
+	`]
 
+	/** Identity for localStorage drag-position persistence. */
 	@property({ type: String }) id: string = 'default'
-	@property({ type: String }) icon?: string
-	@property({ type: String }) label?: string
-	/** Override the expanded panel width (e.g. '320px', '24rem'). Defaults to responsive sizing. */
-	@property({ type: String }) expandedWidth?: string
-	/** When true, uses a lower elevation shadow in the minimized (FAB) state. */
-	@property({ type: Boolean, reflect: true }) lowered: boolean = false
-	/** Corner the boat is anchored to. */
+	/** Corner the FAB is anchored to. */
 	@property({ type: String }) corner: Corner = 'bottom-right'
-	/** Whether the panel is open. */
+	/** Open state. Bind `?open=${…}` to drive the overlay; reflected to the attribute. */
 	@property({ type: Boolean, reflect: true }) open: boolean = false
 
-	/**
-	 * State property.
-	 * Maps 'expanded' → open=true, 'collapsed' → open=false (FAB visible).
-	 */
-	get state(): BoatState {
-		return this.open ? 'expanded' : 'collapsed'
-	}
-	set state(val: BoatState) {
-		if (val === 'expanded') {
-			this.expand()
-		} else {
-			// collapsed
-			this.close()
-		}
-	}
-
-	// Internal drag state (triggers re-render for cursor class)
 	@state() private isDragging = false
+	@state() private currentCorner: Corner = 'bottom-right'
 
-	// Internal position — plain fields, updated directly during drag (no re-render needed)
-	private _position: Position = { x: 16, y: 16 }
-	@state() private _currentCorner: Corner = 'bottom-right'
+	@queryAssignedElements() private slotted!: Element[]
 
-	// Refs
-	private _containerRef = createRef<HTMLElement>()
-	private _contentRef = createRef<HTMLElement>()
-	private _headerRef = createRef<HTMLElement>()
-	private _currentAnimation?: Animation
+	private position: Position = { x: 16, y: 16 }
+	private containerRef = createRef<HTMLElement>()
+	private headerRef = createRef<HTMLElement>()
+	private currentAnimation?: Animation
 
-	// ============================================
-	// COMPUTED
-	// ============================================
-
-	private get panelWidth(): string {
-		return this.expandedWidth ?? 'min(360px, calc(100vw - 32px))'
-	}
-
-	private get isBottomCorner(): boolean {
-		return this._currentCorner.startsWith('bottom')
-	}
-
-	private get closedClipPath(): string {
-		return this.isBottomCorner
-			? `inset(calc(100% - ${FAB_HEIGHT}px) 0px 0px 0px round 10px)`
-			: `inset(0px 0px calc(100% - ${FAB_HEIGHT}px) 0px round 10px)`
-	}
-
-	private get openClipPath(): string {
-		return 'inset(0px 0px 0px 0px round 4px)'
-	}
-
-	private get elevation(): 0 | 1 | 2 | 3 | 4 | 5 {
-		if (this.open) return 4
-		return this.lowered ? 1 : 3
-	}
+	#ready = false
+	#sub?: Subscription
+	#captured: Element[] = []
 
 	// ============================================
 	// POSITION MANAGEMENT
 	// ============================================
 
-	private _applyContainerPosition() {
-		const container = this._containerRef.value
+	private applyContainerPosition() {
+		const container = this.containerRef.value
 		if (!container) return
 		container.style.removeProperty('left')
 		container.style.removeProperty('right')
 		container.style.removeProperty('top')
 		container.style.removeProperty('bottom')
-		const { x, y } = this._position
-		if (this._currentCorner.includes('right')) {
+		const { x, y } = this.position
+		if (this.currentCorner.includes('right')) {
 			container.style.right = `${x}px`
 		} else {
 			container.style.left = `${x}px`
 		}
-		if (this._currentCorner.includes('bottom')) {
+		if (this.currentCorner.includes('bottom')) {
 			container.style.bottom = `${y + theme.bottomOffset}px`
 		} else {
 			container.style.top = `${y}px`
 		}
 	}
 
-	private _loadPosition() {
+	private loadPosition() {
 		try {
 			const saved = localStorage.getItem(POSITION_STORAGE_KEY_PREFIX + this.id)
 			if (saved) {
 				const parsed = JSON.parse(saved) as { x: number; y: number; anchor: Corner }
-				this._position = { x: parsed.x, y: parsed.y }
-				this._currentCorner = parsed.anchor
+				this.position = { x: parsed.x, y: parsed.y }
+				this.currentCorner = parsed.anchor
 			}
 		} catch {
 			// ignore localStorage errors
 		}
 	}
 
-	private _savePosition() {
+	private savePosition() {
 		try {
 			localStorage.setItem(
 				POSITION_STORAGE_KEY_PREFIX + this.id,
-				JSON.stringify({ ...this._position, anchor: this._currentCorner }),
+				JSON.stringify({ ...this.position, anchor: this.currentCorner }),
 			)
 		} catch {
 			// ignore localStorage errors
 		}
 	}
 
-	private _validateBounds() {
-		const container = this._containerRef.value
+	private validateBounds() {
+		const container = this.containerRef.value
 		if (!container) return
 		const rect = container.getBoundingClientRect()
 		if (rect.width === 0) return
 		const vw = window.innerWidth
 		const vh = window.innerHeight
-		const isRight = this._currentCorner.includes('right')
-		const isBottom = this._currentCorner.includes('bottom')
-		const actualLeft = isRight ? vw - this._position.x - rect.width : this._position.x
-		const actualTop = isBottom ? vh - this._position.y - rect.height : this._position.y
+		const isRight = this.currentCorner.includes('right')
+		const isBottom = this.currentCorner.includes('bottom')
+		const actualLeft = isRight ? vw - this.position.x - rect.width : this.position.x
+		const actualTop = isBottom ? vh - this.position.y - rect.height : this.position.y
 		const newLeft = Math.max(0, Math.min(actualLeft, vw - rect.width))
 		const newTop = Math.max(0, Math.min(actualTop, vh - rect.height))
-		this._position = {
+		this.position = {
 			x: isRight ? vw - newLeft - rect.width : newLeft,
 			y: isBottom ? vh - newTop - rect.height : newTop,
 		}
-		this._applyContainerPosition()
+		this.applyContainerPosition()
 	}
 
-
 	// ============================================
-	// CORNER SNAPPING
+	// CORNER SNAPPING (FLIP)
 	// ============================================
 
-	private _reorientToNearestCorner(skipAnimation = false): void {
-		const container = this._containerRef.value
+	private reorientToNearestCorner(): void {
+		const container = this.containerRef.value
 		if (!container) return
 
-		// F — record current screen position before DOM mutation
 		const rect = container.getBoundingClientRect()
-
-		// L — calculate nearest corner using FAB visual center (container is always collapsed during drag)
-		const currentIsBottom = this._currentCorner.includes('bottom')
 		const fabCenterX = rect.left + rect.width / 2
-		const fabCenterY = currentIsBottom
-			? rect.bottom - FAB_HEIGHT / 2
-			: rect.top + FAB_HEIGHT / 2
+		const fabCenterY = rect.top + rect.height / 2
 		const side = fabCenterX > window.innerWidth / 2 ? 'right' : 'left'
 		const vert = fabCenterY > window.innerHeight / 2 ? 'bottom' : 'top'
-		const newCorner: Corner = `${vert}-${side}` as Corner
-
-		// Snap corner and reset offset to standard edge gap
-		this._currentCorner = newCorner
-		this._position = { x: 16, y: 16 }
-		this._applyContainerPosition()
-		// Sync clip-path to new corner — managed imperatively, not via styleMap
-		if (!this.open) {
-			container.style.clipPath = this.closedClipPath
-		}
+		this.currentCorner = `${vert}-${side}` as Corner
+		this.position = { x: 16, y: 16 }
+		this.applyContainerPosition()
 
-		if (skipAnimation || reducedMotion$.value) {
-			this._savePosition()
+		if (reducedMotion$.value) {
+			this.savePosition()
 			return
 		}
 
-		// I — invert: shift element back to its original visual position
 		const newRect = container.getBoundingClientRect()
 		const dx = rect.left - newRect.left
 		const dy = rect.top - newRect.top
 		container.style.transform = `translate(${dx}px, ${dy}px)`
 
-		// P — play: animate from the inverse offset to natural resting position
-		this._currentAnimation?.cancel()
+		this.currentAnimation?.cancel()
 		const anim = container.animate(
 			[{ transform: container.style.transform }, { transform: 'translate(0,0)' }],
 			{
@@ -222,24 +162,22 @@ export default class SchmancyBoat extends SchmancyElement {
 				fill: 'forwards',
 			},
 		)
-		this._currentAnimation = anim
+		this.currentAnimation = anim
 		anim.finished.then(() => {
-			if (container.isConnected) {
-				container.style.transform = ''
-			}
+			if (container.isConnected) container.style.transform = ''
 			return
 		})
 
-		this._savePosition()
+		this.savePosition()
 	}
 
 	// ============================================
 	// DRAG PIPELINE
 	// ============================================
 
-	private _setupDrag() {
-		const header = this._headerRef.value
-		const container = this._containerRef.value
+	private setupDrag() {
+		const header = this.headerRef.value
+		const container = this.containerRef.value
 		if (!header || !container) return
 
 		let didDrag = false
@@ -254,8 +192,6 @@ export default class SchmancyBoat extends SchmancyElement {
 				}),
 				map(e => {
 					const rect = container.getBoundingClientRect()
-					const isBottom = this._currentCorner.includes('bottom')
-					const wasOpen = this.open
 					didDrag = false
 					return {
 						pointerId: e.pointerId,
@@ -264,11 +200,9 @@ export default class SchmancyBoat extends SchmancyElement {
 						offsetX: e.clientX - rect.left,
 						offsetY: e.clientY - rect.top,
 						rect,
-						isBottom,
-						wasOpen,
 					}
 				}),
-				switchMap(({ pointerId, startX, startY, offsetX, offsetY, rect, isBottom, wasOpen }) => {
+				switchMap(({ pointerId, startX, startY, offsetX, offsetY, rect }) => {
 					const sameId = (e: PointerEvent) => e.pointerId === pointerId
 					const move$ = fromEvent<PointerEvent>(window, 'pointermove').pipe(filter(sameId))
 					const end$ = merge(
@@ -283,39 +217,23 @@ export default class SchmancyBoat extends SchmancyElement {
 							if (Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD && !didDrag) {
 								didDrag = true
 								this.isDragging = true
-								// Collapse on first confirmed drag move (not on click)
-								if (wasOpen) {
-									this._currentAnimation?.cancel()
-									this.open = false
-									container.style.clipPath = this.closedClipPath
-									container.style.overflow = 'hidden'
-									const content = this._contentRef.value
-									if (content) {
-										content.inert = true
-										content.style.visibility = 'hidden'
-									}
-								}
 							}
 							if (!didDrag) return
 
 							const vw = window.innerWidth
 							const vh = window.innerHeight
 							const left = Math.max(0, Math.min(clientX - offsetX, vw - rect.width))
-							// Allow container to go partially off-screen so FAB stays reachable at all edges
-							const minTop = isBottom ? FAB_HEIGHT - rect.height : 0
-							const maxTop = isBottom ? vh - rect.height : vh - FAB_HEIGHT
-							const top = Math.max(minTop, Math.min(clientY - offsetY, maxTop))
-
-							this._position = {
-								x: this._currentCorner.includes('right') ? vw - left - rect.width : left,
-								y: isBottom ? vh - top - rect.height : top,
+							const top = Math.max(0, Math.min(clientY - offsetY, vh - rect.height))
+							this.position = {
+								x: this.currentCorner.includes('right') ? vw - left - rect.width : left,
+								y: this.currentCorner.includes('bottom') ? vh - top - rect.height : top,
 							}
-							this._applyContainerPosition()
+							this.applyContainerPosition()
 						}),
 						takeUntil(end$),
 						finalize(() => {
 							if (didDrag) {
-								this._reorientToNearestCorner()
+								this.reorientToNearestCorner()
 								this.isDragging = false
 								didDrag = false
 							} else {
@@ -331,6 +249,40 @@ export default class SchmancyBoat extends SchmancyElement {
 			.subscribe()
 	}
 
+	// ============================================
+	// OVERLAY DELEGATION
+	// ============================================
+
+	private openOverlay() {
+		if (this.#sub) return
+		const anchor = this.containerRef.value
+		const wrapper = document.createElement('div')
+		wrapper.className = 'flex flex-col'
+		this.#captured = [...this.slotted]
+		this.#captured.forEach(node => wrapper.appendChild(node))
+
+		this.#sub = show(wrapper, {
+			anchor: anchor ?? undefined,
+			dismissable: true,
+			historyStrategy: 'silent',
+		})
+			.pipe(
+				finalize(() => this.restoreSlotted()),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
+
+		this.dispatchScopedEvent('toggle', 'open')
+	}
+
+	private restoreSlotted() {
+		this.#captured.forEach(node => this.appendChild(node))
+		this.#captured = []
+		this.#sub = undefined
+		if (this.open) this.open = false
+		this.dispatchScopedEvent('toggle', 'closed')
+	}
+
 	// ============================================
 	// LIFECYCLE
 	// ============================================
@@ -340,178 +292,43 @@ export default class SchmancyBoat extends SchmancyElement {
 
 		fromEvent(window, 'resize')
 			.pipe(takeUntil(this.disconnecting))
-			.subscribe(() => this._validateBounds())
+			.subscribe(() => this.validateBounds())
 
 		theme.bottomOffset$.pipe(
-			tap(() => this._applyContainerPosition()),
+			tap(() => this.applyContainerPosition()),
 			takeUntil(this.disconnecting),
 		).subscribe()
 	}
 
 	firstUpdated() {
-		// Initialize corner from property
-		this._currentCorner = this.corner
-
-		// Load saved drag position from localStorage
-		this._loadPosition()
-
-		const container = this._containerRef.value
-		const content = this._contentRef.value
-		if (!container) return
-
-		// Apply initial position
-		this._applyContainerPosition()
-
-		// Set initial open/closed visual state
-		if (this.open) {
-			container.style.overflow = ''
-			if (content) {
-				content.inert = false
-				content.style.visibility = 'visible'
-			}
-		} else {
-			container.style.clipPath = this.closedClipPath
-			container.style.overflow = 'hidden'
-			if (content) {
-				content.inert = true
-				content.style.visibility = 'hidden'
-			}
-		}
+		this.currentCorner = this.corner
+		this.loadPosition()
+		if (!this.containerRef.value) return
+		this.applyContainerPosition()
+		this.setupDrag()
+		this.#ready = true
+		if (this.open) this.openOverlay()
+	}
 
-		// Set up drag
-		this._setupDrag()
+	protected willUpdate(changed: PropertyValues<this>) {
+		if (!this.#ready || !changed.has('open')) return
+		if (this.open && !this.#sub) this.openOverlay()
+		else if (!this.open && this.#sub) this.#sub.unsubscribe()
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback()
-		this._currentAnimation?.cancel()
-	}
-
-	// ============================================
-	// ANIMATION
-	// ============================================
-
-	private async _animateOpen(): Promise<void> {
-		const container = this._containerRef.value
-		const content = this._contentRef.value
-		if (!container) return
-
-		if (content) {
-			content.style.visibility = 'visible'
-			content.inert = false
-		}
-
-		this.open = true
-		await this.updateComplete
-
-		if (reducedMotion$.value) {
-			container.style.clipPath = ''
-			container.style.overflow = ''
-			this.dispatchScopedEvent('toggle', 'expanded')
-			return
-		}
-
-		this._currentAnimation?.cancel()
-		container.style.overflow = 'hidden'
-
-		const openKeyframes: Keyframe[] = [
-			{ clipPath: this.closedClipPath, opacity: 0.85 },
-			{ clipPath: this.openClipPath, opacity: 1 },
-		]
-		const anim = container.animate(openKeyframes, {
-			duration: SPRING_SMOOTH.duration,
-			easing: SPRING_SMOOTH.easingFallback,
-			fill: 'forwards',
-		})
-		this._currentAnimation = anim
-
-		// Clear clip-path so overflow/scroll work normally after animation
-		anim.finished.then(() => {
-			if (container.isConnected) {
-				container.style.clipPath = ''
-				container.style.overflow = ''
-			}
-			return
-		})
-
-		this.dispatchScopedEvent('toggle', 'expanded')
-	}
-
-	private async _animateClose(): Promise<void> {
-		const container = this._containerRef.value
-		if (!container) return
-
-		if (reducedMotion$.value) {
-			container.style.clipPath = this.closedClipPath
-			container.style.overflow = 'hidden'
-			this.open = false
-			const content = this._contentRef.value
-			if (content) {
-				content.inert = true
-				content.style.visibility = 'hidden'
-			}
-			this.dispatchScopedEvent('toggle', 'collapsed')
-			return
-		}
-
-		this._currentAnimation?.cancel()
-		container.style.overflow = 'hidden'
-
-		const closeKeyframes: Keyframe[] = [
-			{ clipPath: this.openClipPath, opacity: 1 },
-			{ clipPath: this.closedClipPath, opacity: 0.85 },
-		]
-		const anim = container.animate(closeKeyframes, {
-			duration: Math.round(SPRING_SNAPPY.duration * 0.9),
-			easing: 'cubic-bezier(0.4, 0, 0.8, 0.15)',
-			fill: 'forwards',
-		})
-		this._currentAnimation = anim
-
-		await anim.finished
-
-		this.open = false
-
-		const content = this._contentRef.value
-		if (content) {
-			content.inert = true
-			content.style.visibility = 'hidden'
-		}
-
-		this.dispatchScopedEvent('toggle', 'collapsed')
+		this.currentAnimation?.cancel()
+		this.#sub?.unsubscribe()
 	}
 
 	// ============================================
 	// PUBLIC API
 	// ============================================
 
+	/** Flip open ↔ closed. */
 	toggle() {
-		if (this.open) this._animateClose()
-		else this._animateOpen()
-	}
-
-	expand() {
-		if (this.open) return
-		this.removeAttribute('hidden')
-		if (!this._containerRef.value) {
-			this.open = true
-			return
-		}
-		this._animateOpen()
-	}
-
-	/** Alias for expand() — kept for backwards compatibility. */
-	show() {
-		this.expand()
-	}
-
-	close() {
-		if (!this.open) return
-		if (!this._containerRef.value) {
-			this.open = false
-			return
-		}
-		this._animateClose()
+		this.open = !this.open
 	}
 
 	// ============================================
@@ -519,138 +336,60 @@ export default class SchmancyBoat extends SchmancyElement {
 	// ============================================
 
 	protected render(): unknown {
-		const isBottom = this._currentCorner.startsWith('bottom')
-
 		const containerClasses = classMap({
-			flex: true,
-			'flex-col': isBottom,
-			'flex-col-reverse': !isBottom,
-			'will-change-[clip-path]': true,
-			'z-1000': true,
-			// open: 4px radius (instrument-sharp); closed: 10px (status-bar pill)
-			'rounded': this.open,
-			'rounded-lg': !this.open,
+			'inline-flex': true,
+			'rounded-full': true,
 			'overflow-hidden': true,
-			// micro-scale + reduced opacity signals lift during drag
+			'transition-opacity': true,
+			'duration-200': true,
 			'opacity-85': this.isDragging,
 			'scale-95': this.isDragging,
 		})
 
 		const containerStyles = styleMap({
 			position: 'fixed',
-			width: this.panelWidth,
-			'max-height': 'calc(100vh - 32px)',
-			'pointer-events': 'none',
+			'pointer-events': 'auto',
 		})
 
-		const contentStyles = styleMap({
-			'pointer-events': this.open ? 'auto' : 'none',
-		})
-
-		const headerClasses = classMap({
-			'h-full': true,
-			'px-3': true,
+		const fabClasses = classMap({
+			'h-14': true,
+			'min-w-14': true,
+			'px-4': true,
+			'rounded-full': true,
 			flex: true,
 			'items-center': true,
-			'gap-2': true,
+			'justify-center': true,
+			'gap-3': true,
 			'select-none': true,
 			'touch-none': true,
 			'cursor-grabbing': this.isDragging,
-			'cursor-move': !this.isDragging,
-			'transition-opacity': true,
-			'duration-200': true,
+			'cursor-pointer': !this.isDragging,
 		})
 
 		return html`
-			<!-- schmancy-surface owns background color and elevation-based shadow.
-			     Position is managed imperatively via _applyContainerPosition(). -->
 			<schmancy-surface
-				${ref(this._containerRef)}
+				${ref(this.containerRef)}
 				type="glass"
-				.elevation=${this.elevation}
+				.elevation=${3}
 				class=${containerClasses}
 				style=${containerStyles}
 				aria-expanded=${this.open}
 			>
-				<!-- Content section (visually above header for bottom corners) -->
-				<section
-					${ref(this._contentRef)}
-					class="flex-1 min-h-0 overflow-hidden flex flex-col"
-					style=${contentStyles}
-					role="dialog"
-					aria-label="${this.label ?? 'Floating panel'}"
-				>
-					<schmancy-surface type="solid" class="flex flex-col flex-1 min-h-0 overflow-hidden">
-						<schmancy-scroll hide class="flex-1">
-							<slot></slot>
-						</schmancy-scroll>
-					</schmancy-surface>
-				</section>
-
-				<!-- Header / FAB section — always interactive, always visible -->
-				<section
-					class="shrink-0 bg-surface-containerLowest relative"
-					style=${styleMap({ 'pointer-events': 'auto', height: `${FAB_HEIGHT}px` })}
+				<div
+					${ref(this.headerRef)}
+					class=${fabClasses}
+					role="button"
+					tabindex="0"
+					aria-label="Open panel"
+					title="Drag to move · click to open"
 				>
-					<!-- 1px top inner highlight — reads as a lit edge when open, instrument-panel HUD accent -->
-					${when(
-						this.open,
-						() => html`<div
-							class="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-primary-default/40 to-transparent pointer-events-none"
-						></div>`,
-					)}
-					<div
-						${ref(this._headerRef)}
-						class=${headerClasses}
-						title="Drag to move"
-						aria-label="Drag to reposition panel"
-					>
-						<!-- Grip indicator: only visible when collapsed, signals "this is a handle" -->
-						${when(
-							!this.open,
-							() => html`<div
-								class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-0.5 rounded-full bg-on-surface/20 pointer-events-none"
-								style="z-index:0"
-							></div>`,
-						)}
-
-						<!-- Summary slot rendered once — avoids DOM teardown on toggle -->
-						<div class="flex-1 min-w-0 relative" style="z-index:1">
-							<slot name="summary"></slot>
-						</div>
-
-						<!-- Toggle button: chevron up/down matches open/close direction per corner -->
-						${when(
-							this.open,
-							() => html`
-								<schmancy-icon-button
-									size="sm"
-									variant="text"
-									@click=${(e: Event) => {
-										e.stopPropagation()
-										this.close()
-									}}
-									title="Collapse"
-								>
-									${isBottom ? 'expand_more' : 'expand_less'}
-								</schmancy-icon-button>
-							`,
-							() => html`
-								<schmancy-icon-button
-									size="sm"
-									variant="text"
-									@click=${(e: Event) => {
-										e.stopPropagation()
-										this.expand()
-									}}
-									title="Expand"
-								>
-									${isBottom ? 'expand_less' : 'expand_more'}
-								</schmancy-icon-button>
-							`,
-						)}
-					</div>
-				</section>
+					<slot name="header"></slot>
+					<slot name="summary"></slot>
+				</div>
+
+				<!-- Default-slot content parks here (hidden) while collapsed;
+				     relocated into the show() overlay on open. -->
+				<div hidden><slot></slot></div>
 			</schmancy-surface>
 		`
 	}