@mhmo91/schmancy 0.10.36 → 0.10.38

package/src/steps/steps.test.ts

@@ -0,0 +1,120 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import './schmancy-step'
+import type { SchmancyStep } from './schmancy-step'
+import './schmancy-steps'
+import type { SchmancySteps } from './schmancy-steps'
+
+const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
+
+describe('schmancy-steps', () => {
+	let host: HTMLDivElement
+
+	beforeEach(() => {
+		host = document.createElement('div')
+		document.body.appendChild(host)
+	})
+
+	afterEach(() => {
+		host.remove()
+	})
+
+	it('emits change with numeric value when value property is set', async () => {
+		host.innerHTML = `
+			<schmancy-steps>
+				<schmancy-step position="1" label="First"></schmancy-step>
+				<schmancy-step position="2" label="Second"></schmancy-step>
+			</schmancy-steps>
+		`
+		await nextUpdate()
+		const container = host.querySelector('schmancy-steps') as SchmancySteps
+		const changes: number[] = []
+		container.addEventListener('change', (e: Event) => {
+			changes.push((e as CustomEvent<{ value: number }>).detail.value)
+		})
+		container.value = 2
+		await nextUpdate()
+		expect(changes).toContain(2)
+	})
+
+	it('clicking a complete step navigates to it', async () => {
+		host.innerHTML = `
+			<schmancy-steps>
+				<schmancy-step position="1" label="First" completed></schmancy-step>
+				<schmancy-step position="2" label="Second"></schmancy-step>
+			</schmancy-steps>
+		`
+		await nextUpdate()
+		const container = host.querySelector('schmancy-steps') as SchmancySteps
+		container.value = 2
+		await nextUpdate()
+		const step1 = host.querySelector('schmancy-step') as SchmancyStep
+		const changes: number[] = []
+		container.addEventListener('change', (e: Event) => {
+			changes.push((e as CustomEvent<{ value: number }>).detail.value)
+		})
+		// Fire click on the interactive element inside the shadow root
+		const inner = step1.shadowRoot?.querySelector('[role="button"]') as HTMLElement
+		inner?.click()
+		await nextUpdate()
+		expect(changes).toContain(1)
+	})
+
+	it('upcoming step click is inert', async () => {
+		host.innerHTML = `
+			<schmancy-steps>
+				<schmancy-step position="1" label="First"></schmancy-step>
+				<schmancy-step position="2" label="Second"></schmancy-step>
+			</schmancy-steps>
+		`
+		await nextUpdate()
+		const container = host.querySelector('schmancy-steps') as SchmancySteps
+		container.value = 1
+		await nextUpdate()
+		const steps = host.querySelectorAll('schmancy-step') as NodeListOf<SchmancyStep>
+		const changes: number[] = []
+		container.addEventListener('change', (e: Event) => {
+			changes.push((e as CustomEvent<{ value: number }>).detail.value)
+		})
+		steps[1].click()
+		await nextUpdate()
+		expect(changes).toHaveLength(0)
+	})
+
+	it('container lockBack blocks back-navigation', async () => {
+		host.innerHTML = `
+			<schmancy-steps lockback>
+				<schmancy-step position="1" label="First" completed></schmancy-step>
+				<schmancy-step position="2" label="Second"></schmancy-step>
+			</schmancy-steps>
+		`
+		await nextUpdate()
+		const container = host.querySelector('schmancy-steps') as SchmancySteps
+		container.value = 2
+		await nextUpdate()
+		const changes: number[] = []
+		container.addEventListener('change', (e: Event) => {
+			changes.push((e as CustomEvent<{ value: number }>).detail.value)
+		})
+		const step1 = host.querySelector('schmancy-step') as SchmancyStep
+		step1.click()
+		await nextUpdate()
+		expect(changes).toHaveLength(0)
+	})
+
+	it('step with no slotted content renders rail row (no content mode)', async () => {
+		host.innerHTML = `
+			<schmancy-steps>
+				<schmancy-step position="1" label="Rail Step"></schmancy-step>
+			</schmancy-steps>
+		`
+		await nextUpdate()
+		const step = host.querySelector('schmancy-step') as SchmancyStep
+		await nextUpdate()
+		// Rail mode: no slot content means hasContent is false — shadow DOM renders rail row
+		// The step's shadow root should not contain the content-mode card button
+		const shadowRoot = step.shadowRoot
+		expect(shadowRoot).toBeTruthy()
+		// Content mode renders a <li>, rail mode renders a <div>
+		expect(shadowRoot?.querySelector('li')).toBeNull()
+	})
+})

package/src/teleport/teleport.component.ts

@@ -32,7 +32,7 @@ export class SchmancyTeleportation extends SchmancyElement {
 
 	debugging = Boolean(import.meta.env.DEV)
 
-	get _slottedChildren() {
+	get slottedChildren() {
 		const slot = this.shadowRoot.querySelector('slot')
 		return slot.assignedElements({ flatten: true })
 	}
@@ -101,7 +101,7 @@ export class SchmancyTeleportation extends SchmancyElement {
 									},
 									to: {
 										rect: e,
-										element: this._slottedChildren[0] as HTMLElement,
+										element: this.slottedChildren[0] as HTMLElement,
 									},
 									host: this,
 								})

package/src/theme/theme.service.ts

@@ -63,10 +63,10 @@ class ThemeService {
   private static instance: ThemeService
 
   // Observable properties for theme values
-  private _theme$ = new BehaviorSubject<Partial<TSchmancyTheme>>({})
-  private _themeComponent$ = new BehaviorSubject<SchmancyThemeComponent | null>(null)
-  private _fullscreen$ = new BehaviorSubject<boolean>(false)
-  private _bottomOffset$ = new BehaviorSubject<number>(0)
+  #theme$ = new BehaviorSubject<Partial<TSchmancyTheme>>({})
+  #themeComponent$ = new BehaviorSubject<SchmancyThemeComponent | null>(null)
+  #fullscreen$ = new BehaviorSubject<boolean>(false)
+  #bottomOffset$ = new BehaviorSubject<number>(0)
 
   // Public observables derived from context
   public readonly scheme$ = ThemeContext.$.pipe(
@@ -81,22 +81,22 @@ class ThemeService {
     shareReplay(1)
   )
 
-  public readonly theme$ = this._theme$.asObservable().pipe(
+  public readonly theme$ = this.#theme$.asObservable().pipe(
     distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
     shareReplay(1)
   )
 
-  public readonly themeComponent$ = this._themeComponent$.asObservable().pipe(
+  public readonly themeComponent$ = this.#themeComponent$.asObservable().pipe(
     distinctUntilChanged(),
     shareReplay(1)
   )
 
-  public readonly fullscreen$ = this._fullscreen$.asObservable().pipe(
+  public readonly fullscreen$ = this.#fullscreen$.asObservable().pipe(
     distinctUntilChanged(),
     shareReplay(1)
   )
 
-  public readonly bottomOffset$ = this._bottomOffset$.asObservable().pipe(
+  public readonly bottomOffset$ = this.#bottomOffset$.asObservable().pipe(
     distinctUntilChanged(),
     shareReplay(1)
   )
@@ -111,19 +111,19 @@ class ThemeService {
   }
 
   get theme(): Partial<TSchmancyTheme> {
-    return this._theme$.getValue()
+    return this.#theme$.getValue()
   }
 
   get themeComponent(): SchmancyThemeComponent | null {
-    return this._themeComponent$.getValue()
+    return this.#themeComponent$.getValue()
   }
 
   get fullscreen(): boolean {
-    return this._fullscreen$.getValue()
+    return this.#fullscreen$.getValue()
   }
 
   get bottomOffset(): number {
-    return this._bottomOffset$.getValue()
+    return this.#bottomOffset$.getValue()
   }
 
   // Computed observable for actual scheme (resolving 'auto')
@@ -217,11 +217,11 @@ class ThemeService {
    * @internal
    */
   public registerThemeComponent(component: SchmancyThemeComponent): void {
-    this._themeComponent$.next(component)
+    this.#themeComponent$.next(component)
 
     // Update values from the component
     ThemeContext.set({ scheme: component.scheme, color: component.color })
-    this._theme$.next(component.theme)
+    this.#theme$.next(component.theme)
   }
 
   /**
@@ -250,7 +250,7 @@ class ThemeService {
       ThemeContext.set(updates)
     }
     if (values.theme !== undefined) {
-      this._theme$.next(values.theme)
+      this.#theme$.next(values.theme)
     }
   }
 
@@ -415,7 +415,7 @@ class ThemeService {
    * ```
    */
   public setFullscreen(value: boolean): void {
-    this._fullscreen$.next(value)
+    this.#fullscreen$.next(value)
 
     // Emit custom event for components to listen to
     window.dispatchEvent(
@@ -458,7 +458,7 @@ class ThemeService {
    * ```
    */
   public setBottomOffset(value: number): void {
-    this._bottomOffset$.next(value)
+    this.#bottomOffset$.next(value)
   }
 
   /**

package/src/tree/tree.ts

@@ -35,19 +35,19 @@ export class SchmancyTree extends SchmancyElement {
 	// Since it's actually a <schmancy-button>, use HTMLElement or a custom type
 	@query('#chevron') chevron!: HTMLElement
 
-	private readonly _a11yId = `schmancy-tree-${Math.random().toString(36).slice(2, 10)}`
-	private get _contentId() { return `${this._a11yId}-content` }
+	private readonly a11yId = `schmancy-tree-${Math.random().toString(36).slice(2, 10)}`
+	private get contentId() { return `${this.a11yId}-content` }
 
 	/** ElementInternals — broadcasts `:state(open)` for consumer CSS. */
-	private readonly _internals: ElementInternals | undefined = (() => {
+	private readonly internals: ElementInternals | undefined = (() => {
 		try { return this.attachInternals() } catch { return undefined }
 	})()
 
 	updated(changed: Map<string, unknown>) {
 		super.updated?.(changed)
 		if (changed.has('open')) {
-			if (this.open) this._internals?.states.add('open')
-			else this._internals?.states.delete('open')
+			if (this.open) this.internals?.states.add('open')
+			else this.internals?.states.delete('open')
 		}
 	}
 
@@ -137,7 +137,7 @@ export class SchmancyTree extends SchmancyElement {
 					slot="trailing"
 					id="chevron"
 					aria-expanded=${this.open ? 'true' : 'false'}
-					aria-controls=${this._contentId}
+					aria-controls=${this.contentId}
 					aria-label=${this.open ? 'Collapse' : 'Expand'}
 					@click=${(e: Event) => e.stopPropagation()}
 				>
@@ -146,7 +146,7 @@ export class SchmancyTree extends SchmancyElement {
 			</div>
 
 			<!-- The default slot: tree children -->
-			<slot id=${this._contentId}></slot>
+			<slot id=${this.contentId}></slot>
 		`
 	}
 }

package/src/typography/typography.ts

@@ -351,11 +351,11 @@ export class SchmancyTypography extends SchmancyElement {
 	/** Placeholder shown when editable and empty */
 	@property({ type: String }) placeholder = ''
 
-	private _editRef = createRef<HTMLDivElement>()
+	private editRef = createRef<HTMLDivElement>()
 
 	/** Focus and select all text in editable mode */
 	selectAll() {
-		const el = this._editRef.value
+		const el = this.editRef.value
 		if (!el) return
 		el.focus()
 		const sel = window.getSelection()
@@ -373,7 +373,7 @@ export class SchmancyTypography extends SchmancyElement {
 		fromEvent<FocusEvent>(this, 'focusout').pipe(
 			filter(() => this.editable),
 			tap(() => {
-				const el = this._editRef.value
+				const el = this.editRef.value
 				if (!el) return
 				const newValue = el.innerText.trim()
 				if (newValue !== this.value) {
@@ -393,7 +393,7 @@ export class SchmancyTypography extends SchmancyElement {
 		fromEvent(this, 'input').pipe(
 			filter(() => this.editable),
 			tap(() => {
-				const el = this._editRef.value
+				const el = this.editRef.value
 				if (el && !el.innerText.trim()) el.textContent = ''
 			}),
 			takeUntil(this.disconnecting),
@@ -402,7 +402,7 @@ export class SchmancyTypography extends SchmancyElement {
 		fromEvent<KeyboardEvent>(this, 'keydown').pipe(
 			filter(() => this.editable),
 			filter(e => e.key === 'Enter'),
-			tap(e => { e.preventDefault(); (this._editRef.value ?? this).blur() }),
+			tap(e => { e.preventDefault(); (this.editRef.value ?? this).blur() }),
 			takeUntil(this.disconnecting),
 		).subscribe()
 	}
@@ -418,7 +418,7 @@ export class SchmancyTypography extends SchmancyElement {
 			}
 		}
 		if ((changedProperties.has('value') || changedProperties.has('editable')) && this.editable) {
-			const el = this._editRef.value
+			const el = this.editRef.value
 			if (el && document.activeElement !== el) {
 				if (this.value) {
 					el.innerText = this.value
@@ -432,7 +432,7 @@ export class SchmancyTypography extends SchmancyElement {
 	protected render(): unknown {
 		if (this.editable) {
 			return html`<div
-				${ref(this._editRef)}
+				${ref(this.editRef)}
 				class="edit"
 				contenteditable="true"
 				data-placeholder=${this.placeholder ?? ''}

package/src/window/window-manager.ts

@@ -23,13 +23,13 @@ const LEGACY_STORAGE_PREFIX = 'schmancy-float-'
 class WindowManagerService {
 	private static instance: WindowManagerService
 
-	private readonly _state$ = new BehaviorSubject<WindowRegistryState>({
+	readonly #state$ = new BehaviorSubject<WindowRegistryState>({
 		windows: new Map(),
 		focusedId: null,
 		stackOrder: [],
 	})
 
-	readonly state$ = this._state$.asObservable()
+	readonly state$ = this.#state$.asObservable()
 
 	private constructor() {}
 
@@ -43,17 +43,17 @@ class WindowManagerService {
 	// ── Synchronous accessors ──────────────────────────────────────────
 
 	get windows(): Map<string, WindowRecord> {
-		return this._state$.value.windows
+		return this.#state$.value.windows
 	}
 
 	get focusedId(): string | null {
-		return this._state$.value.focusedId
+		return this.#state$.value.focusedId
 	}
 
 	// ── Registration ───────────────────────────────────────────────────
 
 	register(id: string, initialBounds: WindowBounds, snapTarget: SnapTarget): void {
-		const state = this._state$.value
+		const state = this.#state$.value
 		if (state.windows.has(id)) return
 
 		const zIndex = overlayStack.assignZIndex(id)
@@ -70,11 +70,11 @@ class WindowManagerService {
 		windows.set(id, record)
 		const stackOrder = overlayStack.getStackOrder()
 
-		this._state$.next({ ...state, windows, stackOrder })
+		this.#state$.next({ ...state, windows, stackOrder })
 	}
 
 	unregister(id: string): void {
-		const state = this._state$.value
+		const state = this.#state$.value
 		if (!state.windows.has(id)) return
 
 		overlayStack.releaseId(id)
@@ -83,25 +83,25 @@ class WindowManagerService {
 		const stackOrder = overlayStack.getStackOrder()
 		const focusedId = state.focusedId === id ? null : state.focusedId
 
-		this._state$.next({ ...state, windows, stackOrder, focusedId })
+		this.#state$.next({ ...state, windows, stackOrder, focusedId })
 	}
 
 	// ── State mutations ────────────────────────────────────────────────
 
 	updateBounds(id: string, bounds: WindowBounds): void {
-		this._updateRecord(id, { bounds })
+		this.updateRecord(id, { bounds })
 	}
 
 	updateVisualState(id: string, visualState: WindowRecord['visualState']): void {
-		this._updateRecord(id, { visualState })
+		this.updateRecord(id, { visualState })
 	}
 
 	updateOpen(id: string, open: boolean): void {
-		this._updateRecord(id, { open })
+		this.updateRecord(id, { open })
 	}
 
 	focus(id: string): void {
-		const state = this._state$.value
+		const state = this.#state$.value
 		if (!state.windows.has(id)) return
 		if (state.focusedId === id) return
 
@@ -113,14 +113,14 @@ class WindowManagerService {
 		}
 		const stackOrder = overlayStack.getStackOrder()
 
-		this._state$.next({ ...state, windows, stackOrder, focusedId: id })
+		this.#state$.next({ ...state, windows, stackOrder, focusedId: id })
 	}
 
 	// ── Queries ────────────────────────────────────────────────────────
 
 	findOverlaps(bounds: WindowBounds, excludeId: string): WindowRecord[] {
 		const result: WindowRecord[] = []
-		for (const [id, record] of this._state$.value.windows) {
+		for (const [id, record] of this.#state$.value.windows) {
 			if (id === excludeId) continue
 			if (rectsOverlap(bounds, record.bounds)) {
 				result.push(record)
@@ -131,7 +131,7 @@ class WindowManagerService {
 
 	getNeighbors(id: string): WindowRecord[] {
 		const result: WindowRecord[] = []
-		for (const [otherId, record] of this._state$.value.windows) {
+		for (const [otherId, record] of this.#state$.value.windows) {
 			if (otherId !== id) result.push(record)
 		}
 		return result
@@ -140,14 +140,14 @@ class WindowManagerService {
 	// ── Selectors ──────────────────────────────────────────────────────
 
 	selectWindow(id: string): Observable<WindowRecord | undefined> {
-		return this._state$.pipe(
+		return this.#state$.pipe(
 			map(state => state.windows.get(id)),
 			distinctUntilChanged(),
 		)
 	}
 
 	selectFocused(): Observable<string | null> {
-		return this._state$.pipe(
+		return this.#state$.pipe(
 			map(state => state.focusedId),
 			distinctUntilChanged(),
 		)
@@ -185,14 +185,14 @@ class WindowManagerService {
 
 	// ── Internal ───────────────────────────────────────────────────────
 
-	private _updateRecord(id: string, updates: Partial<WindowRecord>): void {
-		const state = this._state$.value
+	private updateRecord(id: string, updates: Partial<WindowRecord>): void {
+		const state = this.#state$.value
 		const record = state.windows.get(id)
 		if (!record) return
 
 		const windows = new Map(state.windows)
 		windows.set(id, { ...record, ...updates })
-		this._state$.next({ ...state, windows })
+		this.#state$.next({ ...state, windows })
 	}
 }