@mhmo91/schmancy 0.10.35 → 0.10.36

package/src/boat/boat.ts

@@ -1,10 +1,10 @@
 import { SchmancyElement } from '@mixins/index'
-import { css, html, type PropertyValues } from 'lit'
+import { 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 { filter, finalize, fromEvent, map, merge, type Subscription, switchMap, takeUntil, tap } from 'rxjs'
+import { exhaustMap, filter, finalize, fromEvent, merge, type Subscription, takeUntil, tap } from 'rxjs'
 import { reducedMotion$ } from '../directives/reduced-motion'
 import { show } from '../overlay/overlay.service'
 import { theme } from '../theme/theme.service.js'
@@ -20,38 +20,50 @@ interface Position {
 }
 
 /**
- * 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).
+ * Corner-anchored launcher that delegates its expanded panel to the `show()`
+ * overlay service.
+ *
+ * Three slots, three non-overlapping intents — no element-type sniffing,
+ * ever:
+ *
+ *   - `trigger`  — pure consumer content. A native click anywhere on it
+ *     opens the panel; interactive children (buttons, FABs, inputs) work
+ *     with zero special-casing because the boat never calls
+ *     `preventDefault` / `stopPropagation` / `setPointerCapture` here.
+ *   - `drag-handle` — opt-in. Pointer-drag is wired ONLY to this slot's
+ *     boat-owned wrapper. Slot it to make the boat draggable; omit it and
+ *     the boat is static at its corner. (A no-move tap on the handle also
+ *     opens, so the grip doubles as a launcher.)
+ *   - _(default)_ — the panel body; parked hidden while collapsed,
+ *     relocated into the `show()` overlay on open.
+ *
+ * The boat owns drag, corner-snapping, position persistence and the glass
+ * surface — never the collapsed shape.
  */
 @customElement('schmancy-boat')
 export default class SchmancyBoat extends SchmancyElement {
-	static styles = [css`
-		:host {
-			display: contents;
-		}
-		:host([hidden]) {
-			display: none !important;
-		}
-	`]
+
 
 	/** Identity for localStorage drag-position persistence. */
 	@property({ type: String }) id: string = 'default'
-	/** Corner the FAB is anchored to. */
+	/** Corner the launcher is anchored to. */
 	@property({ type: String }) corner: Corner = 'bottom-right'
 	/** Open state. Bind `?open=${…}` to drive the overlay; reflected to the attribute. */
 	@property({ type: Boolean, reflect: true }) open: boolean = false
 
 	@state() private isDragging = false
 	@state() private currentCorner: Corner = 'bottom-right'
+	@state() private hasHandle = false
 
+	/** Default-slot nodes — the overlay body. */
 	@queryAssignedElements() private slotted!: Element[]
+	/** Slotted drag-handle nodes — presence toggles draggability. */
+	@queryAssignedElements({ slot: 'drag-handle' }) private handleNodes!: Element[]
 
 	private position: Position = { x: 16, y: 16 }
 	private containerRef = createRef<HTMLElement>()
-	private headerRef = createRef<HTMLElement>()
+	private triggerRef = createRef<HTMLElement>()
+	private handleRef = createRef<HTMLElement>()
 	private currentAnimation?: Animation
 
 	#ready = false
@@ -171,84 +183,6 @@ export default class SchmancyBoat extends SchmancyElement {
 		this.savePosition()
 	}
 
-	// ============================================
-	// DRAG PIPELINE
-	// ============================================
-
-	private setupDrag() {
-		const header = this.headerRef.value
-		const container = this.containerRef.value
-		if (!header || !container) return
-
-		let didDrag = false
-
-		fromEvent<PointerEvent>(header, 'pointerdown')
-			.pipe(
-				filter(e => e.button === 0),
-				tap(e => {
-					e.preventDefault()
-					e.stopPropagation()
-					header.setPointerCapture(e.pointerId)
-				}),
-				map(e => {
-					const rect = container.getBoundingClientRect()
-					didDrag = false
-					return {
-						pointerId: e.pointerId,
-						startX: e.clientX,
-						startY: e.clientY,
-						offsetX: e.clientX - rect.left,
-						offsetY: e.clientY - rect.top,
-						rect,
-					}
-				}),
-				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(
-						fromEvent<PointerEvent>(window, 'pointerup'),
-						fromEvent<PointerEvent>(window, 'pointercancel'),
-					).pipe(filter(sameId))
-
-					return move$.pipe(
-						tap(({ clientX, clientY }) => {
-							const dx = clientX - startX
-							const dy = clientY - startY
-							if (Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD && !didDrag) {
-								didDrag = true
-								this.isDragging = true
-							}
-							if (!didDrag) return
-
-							const vw = window.innerWidth
-							const vh = window.innerHeight
-							const left = Math.max(0, Math.min(clientX - offsetX, vw - rect.width))
-							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()
-						}),
-						takeUntil(end$),
-						finalize(() => {
-							if (didDrag) {
-								this.reorientToNearestCorner()
-								this.isDragging = false
-								didDrag = false
-							} else {
-								this.isDragging = false
-								didDrag = false
-								this.toggle()
-							}
-						}),
-					)
-				}),
-				takeUntil(this.disconnecting),
-			)
-			.subscribe()
-	}
-
 	// ============================================
 	// OVERLAY DELEGATION
 	// ============================================
@@ -290,22 +224,102 @@ export default class SchmancyBoat extends SchmancyElement {
 	connectedCallback() {
 		super.connectedCallback()
 
-		fromEvent(window, 'resize')
+		// One concern: keep the container in place when the environment
+		// shifts. Viewport resize re-validates bounds; a theme bottom-offset
+		// change (e.g. a snackbar pushing the safe area) re-applies position.
+		merge(
+			fromEvent(window, 'resize').pipe(tap(() => this.validateBounds())),
+			theme.bottomOffset$.pipe(tap(() => this.applyContainerPosition())),
+		)
 			.pipe(takeUntil(this.disconnecting))
-			.subscribe(() => this.validateBounds())
-
-		theme.bottomOffset$.pipe(
-			tap(() => this.applyContainerPosition()),
-			takeUntil(this.disconnecting),
-		).subscribe()
+			.subscribe()
 	}
 
 	firstUpdated() {
 		this.currentCorner = this.corner
+		this.hasHandle = this.handleNodes.length > 0
 		this.loadPosition()
-		if (!this.containerRef.value) return
+		const container = this.containerRef.value
+		const trigger = this.triggerRef.value
+		const handle = this.handleRef.value
+		if (!container || !trigger || !handle) return
 		this.applyContainerPosition()
-		this.setupDrag()
+
+		// Three intents, three sources, one pipeline, one subscribe.
+		//
+		// open$  — a plain click/Enter/Space on the trigger region. No
+		//          preventDefault/stopPropagation: a slotted button's own
+		//          click still fires; it merely also bubbles to "open".
+		// drag$  — pointerdown on the boat-owned drag-handle wrapper. A
+		//          dedicated region, so every pointerdown there is a drag
+		//          intent — no element-type sniffing. A session ends on
+		//          pointerup/cancel; settle = move past threshold ? snap to
+		//          the nearest corner : treat as a tap and open.
+		merge(
+			fromEvent<MouseEvent>(trigger, 'click').pipe(tap(() => this.toggle())),
+			fromEvent<KeyboardEvent>(trigger, 'keydown').pipe(
+				filter(e => e.key === 'Enter' || e.key === ' '),
+				tap(e => {
+					e.preventDefault()
+					this.toggle()
+				}),
+			),
+			fromEvent<PointerEvent>(handle, 'pointerdown').pipe(
+				filter(e => e.button === 0),
+				tap(e => {
+					e.preventDefault()
+					// Capture can throw InvalidStateError if the pointer is
+					// already released (fast tap) — drag still works without it.
+					try {
+						handle.setPointerCapture(e.pointerId)
+					} catch {
+						// no active pointer to capture; ignore
+					}
+				}),
+				exhaustMap(down => {
+					const rect = container.getBoundingClientRect()
+					const offsetX = down.clientX - rect.left
+					const offsetY = down.clientY - rect.top
+					let moved = false
+					const sameId = (e: PointerEvent) => e.pointerId === down.pointerId
+					const end$ = merge(
+						fromEvent<PointerEvent>(window, 'pointerup'),
+						fromEvent<PointerEvent>(window, 'pointercancel'),
+					).pipe(filter(sameId))
+
+					return fromEvent<PointerEvent>(window, 'pointermove').pipe(
+						filter(sameId),
+						tap(e => {
+							const dx = e.clientX - down.clientX
+							const dy = e.clientY - down.clientY
+							if (!moved && Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD) {
+								moved = true
+								this.isDragging = true
+							}
+							if (!moved) return
+							const vw = window.innerWidth
+							const vh = window.innerHeight
+							const left = Math.max(0, Math.min(e.clientX - offsetX, vw - rect.width))
+							const top = Math.max(0, Math.min(e.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()
+						}),
+						takeUntil(end$),
+						finalize(() => {
+							if (moved) this.reorientToNearestCorner()
+							else this.toggle()
+							this.isDragging = false
+						}),
+					)
+				}),
+			),
+		)
+			.pipe(takeUntil(this.disconnecting))
+			.subscribe()
+
 		this.#ready = true
 		if (this.open) this.openOverlay()
 	}
@@ -335,11 +349,13 @@ export default class SchmancyBoat extends SchmancyElement {
 	// RENDER
 	// ============================================
 
+	private onHandleSlotChange = () => {
+		this.hasHandle = this.handleNodes.length > 0
+	}
+
 	protected render(): unknown {
 		const containerClasses = classMap({
 			'inline-flex': true,
-			'rounded-full': true,
-			'overflow-hidden': true,
 			'transition-opacity': true,
 			'duration-200': true,
 			'opacity-85': this.isDragging,
@@ -351,40 +367,47 @@ export default class SchmancyBoat extends SchmancyElement {
 			'pointer-events': 'auto',
 		})
 
-		const fabClasses = classMap({
-			'h-14': true,
-			'min-w-14': true,
-			'px-4': true,
-			'rounded-full': true,
+		// Boat-owned drag region — wraps ONLY the drag-handle slot, so every
+		// pointerdown inside it is unambiguously a drag intent. Hidden (and
+		// out of layout) when the consumer slots no handle: the boat is then
+		// simply not draggable.
+		const handleClasses = classMap({
 			flex: true,
 			'items-center': true,
-			'justify-center': true,
-			'gap-3': true,
-			'select-none': true,
 			'touch-none': true,
+			'select-none': true,
+			hidden: !this.hasHandle,
 			'cursor-grabbing': this.isDragging,
-			'cursor-pointer': !this.isDragging,
+			'cursor-grab': !this.isDragging,
 		})
 
 		return html`
 			<schmancy-surface
 				${ref(this.containerRef)}
 				type="glass"
+				rounded="all"
 				.elevation=${3}
-				class=${containerClasses}
+				class="${containerClasses} overflow-hidden rounded-2xl"
 				style=${containerStyles}
 				aria-expanded=${this.open}
 			>
 				<div
-					${ref(this.headerRef)}
-					class=${fabClasses}
+					${ref(this.handleRef)}
+					class=${handleClasses}
+					aria-label="Drag to move"
+				>
+					<slot name="drag-handle" @slotchange=${this.onHandleSlotChange}></slot>
+				</div>
+
+				<div
+					${ref(this.triggerRef)}
+					class="flex items-center cursor-pointer"
 					role="button"
 					tabindex="0"
 					aria-label="Open panel"
-					title="Drag to move · click to open"
+					title="Click to open"
 				>
-					<slot name="header"></slot>
-					<slot name="summary"></slot>
+					<slot name="trigger"></slot>
 				</div>
 
 				<!-- Default-slot content parks here (hidden) while collapsed;

package/src/button/icon-button.ts

@@ -116,44 +116,32 @@ export class SchmnacyIconButton extends SchmancyElement {
 	@property({ type: String })
 	public icon?: string
 
-	// Reactively captured icon name from slot content (translation-proof)
+	// Reactively captured icon name from slot content (translation-proof).
+	// Mirrors <schmancy-icon>: a MutationObserver on the light DOM keeps this
+	// in sync no matter how the consumer passes the name — a plain text node,
+	// a dynamic ${...} binding (Lit mutates the text node's data in place, so
+	// no slotchange ever fires), or a nested <schmancy-icon> element.
+	// `textContent` flattens through all three.
 	@state()
 	private _capturedIcon?: string
 
+	private _observer?: MutationObserver
+
 	connectedCallback(): void {
 		super.connectedCallback()
-		// Pre-capture icon from children to avoid double render flash
-		this._captureIconFromChildren()
+		this._captureIcon()
+		this._observer = new MutationObserver(() => this._captureIcon())
+		this._observer.observe(this, { childList: true, characterData: true, subtree: true })
 	}
 
-	// Capture icon from direct children (for initial render)
-	private _captureIconFromChildren(): void {
-		if (this.icon || this.text) return
-		for (const node of this.childNodes) {
-			if (node.nodeType === Node.TEXT_NODE) {
-				const text = node.textContent?.trim()
-				if (text) {
-					this._capturedIcon = text
-					return
-				}
-			}
-		}
+	disconnectedCallback(): void {
+		super.disconnectedCallback()
+		this._observer?.disconnect()
 	}
 
-	// Handle slot content changes reactively (for dynamic updates)
-	private _handleSlotChange(e: Event): void {
+	private _captureIcon(): void {
 		if (this.icon || this.text) return
-		const slot = e.target as HTMLSlotElement
-		const nodes = slot.assignedNodes({ flatten: true })
-		for (const node of nodes) {
-			if (node.nodeType === Node.TEXT_NODE) {
-				const text = node.textContent?.trim()
-				if (text) {
-					this._capturedIcon = text
-					return
-				}
-			}
-		}
+		this._capturedIcon = this.textContent?.trim() || undefined
 	}
 
 	// Manage aria-label manually so that we can always use our internal property.
@@ -254,7 +242,7 @@ export class SchmnacyIconButton extends SchmancyElement {
 					${this.text
 						? html`<slot></slot>`
 						: html`
-							<slot style="display:none" @slotchange=${this._handleSlotChange}></slot>
+							<slot style="display:none"></slot>
 							<schmancy-icon class=${iconSizeClass}>${this.icon || this._capturedIcon}</schmancy-icon>
 						`
 					}
@@ -277,7 +265,7 @@ export class SchmnacyIconButton extends SchmancyElement {
 				${this.text
 					? html`<slot></slot>`
 					: html`
-						<slot style="display:none" @slotchange=${this._handleSlotChange}></slot>
+						<slot style="display:none"></slot>
 						<schmancy-icon class=${iconSizeClass}>${this.icon || this._capturedIcon}</schmancy-icon>
 					`
 				}

package/src/chips/assist-chip.ts

@@ -1,263 +1,2 @@
-import { SchmancyElement } from '@mixins/index'
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import { classMap } from 'lit/directives/class-map.js'
-import { BehaviorSubject, combineLatest } from 'rxjs'
-import { takeUntil } from 'rxjs/operators'
-
-/**
- * Assist chip component - prompts user actions like opening calendar events or sharing content
- * Pure Schmancy implementation with Tailwind CSS and RxJS state management
- */
-@customElement('schmancy-assist-chip')
-export class SchmancyAssistChip extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: inline-block;
-		outline: none;
-		width: fit-content;
-		min-width: fit-content;
-	}
-
-	:host([disabled]) {
-		pointer-events: none;
-	}
-
-	.ripple {
-		position: absolute;
-		border-radius: 50%;
-		transform: scale(0);
-		animation: ripple 600ms linear;
-		background-color: rgba(0, 0, 0, 0.08);
-		pointer-events: none;
-	}
-
-	@keyframes ripple {
-		to {
-			transform: scale(4);
-			opacity: 0;
-		}
-	}
-
-	/* State layer for M3 hover/focus/pressed states */
-	.state-layer {
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		pointer-events: none;
-		background-color: currentColor;
-		opacity: 0;
-		transition: opacity 200ms ease;
-	}
-
-	:host(:not([disabled])) button:hover .state-layer {
-		opacity: 0.08;
-	}
-
-	:host(:not([disabled])) button:focus-visible .state-layer {
-		opacity: 0.1;
-	}
-
-	:host(:not([disabled])) button:active .state-layer {
-		opacity: 0.1;
-	}
-`];
-	/** Value identifier for the chip */
-	@property({ reflect: true }) value = ''
-
-	/** Optional icon name (Material Symbols) */
-	@property({ reflect: true }) icon = ''
-
-	/** Optional href for navigation */
-	@property({ reflect: true }) href = ''
-
-	/** Target for navigation (e.g., '_blank') */
-	@property({ reflect: true }) target = ''
-
-	/** Disable the chip */
-	@property({ type: Boolean, reflect: true }) disabled = false
-
-	/** Elevated style variant - true by default per M3 spec for assist chips */
-	@property({ type: Boolean, reflect: true }) elevated = true
-
-	// RxJS state streams
-	private hover$ = new BehaviorSubject<boolean>(false)
-	private pressed$ = new BehaviorSubject<boolean>(false)
-	private focused$ = new BehaviorSubject<boolean>(false)
-
-	// UI state - only ripples needed for rendering
-	@state() private ripples: Array<{ x: number; y: number; id: number }> = []
-
-	protected static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
-
-	private nextRippleId = 0
-
-	connectedCallback() {
-		super.connectedCallback()
-
-		// Stream management for future extensions
-		// Currently, states are handled directly in event handlers
-		// This pipeline can be extended for more complex state interactions
-		combineLatest([
-			this.hover$,
-			this.pressed$,
-			this.focused$
-		]).pipe(
-			// States are managed through event handlers directly
-			// This pipeline is kept for potential future state combinations
-			takeUntil(this.disconnecting)
-		).subscribe()
-	}
-
-	private handleClick = (e: MouseEvent) => {
-		if (this.disabled) return
-
-		// Add ripple effect
-		const button = this.shadowRoot?.querySelector('button')
-		if (button) {
-			const rect = button.getBoundingClientRect()
-			const x = e.clientX - rect.left
-			const y = e.clientY - rect.top
-			const id = this.nextRippleId++
-
-			this.ripples = [...this.ripples, { x, y, id }]
-
-			// Remove ripple after animation
-			setTimeout(() => {
-				this.ripples = this.ripples.filter(r => r.id !== id)
-			}, 600)
-		}
-
-		// Navigate if href is provided
-		if (this.href) {
-			if (this.target === '_blank') {
-				window.open(this.href, '_blank')
-			} else {
-				window.location.href = this.href
-			}
-		}
-
-		// Dispatch action event
-		this.dispatchEvent(new CustomEvent('action', {
-			detail: { value: this.value },
-			bubbles: true,
-			composed: true
-		}))
-	}
-
-	private handleKeyDown = (e: KeyboardEvent) => {
-		if (this.disabled) return
-
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault()
-			this.pressed$.next(true)
-
-			// Simulate click
-			const clickEvent = new MouseEvent('click', {
-				bubbles: true,
-				cancelable: true,
-				clientX: 0,
-				clientY: 0
-			})
-			this.handleClick(clickEvent)
-
-			setTimeout(() => this.pressed$.next(false), 100)
-		}
-	}
-
-	private handleFocus = () => {
-		this.focused$.next(true)
-	}
-
-	private handleBlur = () => {
-		this.focused$.next(false)
-	}
-
-	render() {
-		const hasIcon = !!this.icon;
-
-		const classes = {
-			'relative': true,
-			'inline-flex': true,
-			'items-center': true,
-			'gap-2': true,
-			'h-8': true, // M3: 32px height
-			'min-h-[32px]': true,
-			'rounded-full': true,
-			'cursor-pointer': !this.disabled,
-			'transition-all': true,
-			'duration-200': true,
-			'select-none': true,
-			'overflow-hidden': true,
-
-			// M3 Padding: 8px with icon, 16px without (leading), 16px trailing
-			'pl-2': hasIcon, // 8px with icon
-			'pl-4': !hasIcon, // 16px without icon
-			'pr-4': true, // 16px trailing
-
-			// M3 Colors - assist chips are elevated by default
-			'bg-surface-containerLow': true,
-			'text-surface-onVariant': true,
-
-			// M3: Assist chips elevated by default (shadow-1)
-			'shadow-sm': this.elevated && !this.disabled, // shadow-1 for elevation
-			'hover:shadow-md': this.elevated && !this.disabled, // elevated on hover
-
-			// Focus state
-			'focus-visible:outline': !this.disabled,
-			'focus-visible:outline-2': !this.disabled,
-			'focus-visible:outline-primary': !this.disabled,
-			'focus-visible:outline-offset-2': !this.disabled,
-
-			// Disabled
-			'opacity-38': this.disabled, // M3 disabled opacity
-			'cursor-not-allowed': this.disabled
-		}
-
-		return html`
-			<button
-				type="button"
-				class=${classMap(classes)}
-				?disabled=${this.disabled}
-				@click=${this.handleClick}
-				@keydown=${this.handleKeyDown}
-				@mouseenter=${() => this.hover$.next(true)}
-				@mouseleave=${() => this.hover$.next(false)}
-				@mousedown=${() => this.pressed$.next(true)}
-				@mouseup=${() => this.pressed$.next(false)}
-				@focus=${this.handleFocus}
-				@blur=${this.handleBlur}
-				tabindex=${this.disabled ? '-1' : '0'}
-				role="button"
-				aria-disabled=${this.disabled}
-				aria-label=${this.value}
-			>
-				${this.icon ? html`
-					<schmancy-icon class="text-[18px] shrink-0">${this.icon}</schmancy-icon>
-				` : ''}
-				<span class="text-sm font-medium leading-5">
-					<slot></slot>
-				</span>
-
-				<!-- Ripple effects -->
-				${this.ripples.map(ripple => html`
-					<span
-						class="ripple"
-						style="left: ${ripple.x}px; top: ${ripple.y}px;"
-					></span>
-				`)}
-
-				<!-- State layer for M3 hover/focus/pressed states -->
-				<div class="state-layer"></div>
-			</button>
-		`
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'schmancy-assist-chip': SchmancyAssistChip
-	}
-}
-
-export type AssistChipActionEvent = { value: string }
+// Moved to src/form/fields/chips/ — this is a backward-compat re-export shim.
+export * from '../form/fields/chips/assist-chip';