@mhmo91/schmancy 0.10.36 → 0.10.38

package/src/splash-screen/splash-screen.ts

@@ -77,13 +77,13 @@ export default class SchmancySplashScreen extends SchmancyElement {
 	 */
 	@property({ type: Boolean, attribute: 'initially-hidden' }) initiallyHidden = false
 
-	@state() private _visible = true
+	@state() private visible = true
 
 	connectedCallback() {
 		super.connectedCallback()
 
 		if (this.initiallyHidden) {
-			this._visible = false
+			this.visible = false
 			return
 		}
 
@@ -93,7 +93,7 @@ export default class SchmancySplashScreen extends SchmancyElement {
 		zip(readySignal$, minTimer$)
 			.pipe(
 				take(1),
-				tap(() => this._dismiss()),
+				tap(() => this.dismiss()),
 				takeUntil(this.disconnecting),
 			)
 			.subscribe()
@@ -111,11 +111,11 @@ export default class SchmancySplashScreen extends SchmancyElement {
 	 * Force the splash to show again (e.g. between route transitions).
 	 */
 	public show(): void {
-		this._visible = true
+		this.visible = true
 	}
 
-	private _dismiss(): void {
-		this._visible = false
+	private dismiss(): void {
+		this.visible = false
 		this.dispatchEvent(
 			new CustomEvent<void>('schmancy-splash-done', {
 				bubbles: true,
@@ -128,10 +128,10 @@ export default class SchmancySplashScreen extends SchmancyElement {
 		return html`
 			<div
 				class="splash-layer"
-				aria-hidden=${!this._visible}
+				aria-hidden=${!this.visible}
 				style=${styleMap({
-					opacity: this._visible ? '1' : '0',
-					pointerEvents: this._visible ? 'auto' : 'none',
+					opacity: this.visible ? '1' : '0',
+					pointerEvents: this.visible ? 'auto' : 'none',
 				})}
 			>
 				<slot name="splash"></slot>
@@ -139,8 +139,8 @@ export default class SchmancySplashScreen extends SchmancyElement {
 			<div
 				class="content-layer"
 				style=${styleMap({
-					opacity: this._visible ? '0' : '1',
-					pointerEvents: this._visible ? 'none' : 'auto',
+					opacity: this.visible ? '0' : '1',
+					pointerEvents: this.visible ? 'none' : 'auto',
 				})}
 			>
 				<slot></slot>

package/src/state/index.ts

@@ -155,7 +155,7 @@ export interface BaseAPI<NS extends string, T, S extends StorageBackend> {
 	 *  current value. Exposed on the type so a state can be passed to
 	 *  `<schmancy-context provides={[…]}>` without casts. Not for end-user
 	 *  code — the leading underscore signals "internal API". */
-	_isolatedInstance(): { destroy(): void } & Record<string | symbol, unknown>
+	isolatedInstance(): { destroy(): void } & Record<string | symbol, unknown>
 }
 
 export interface SyncState<NS extends string, T, S extends SyncStorage>
@@ -219,12 +219,12 @@ function detectKind(value: unknown): RuntimeKind {
 // who arrived first.
 const CLAIMED_KEY = Symbol.for('schmancy.state.claimed')
 const INSTANCES_KEY = Symbol.for('schmancy.state.instances')
-const __claimedSlot = (globalThis as { [CLAIMED_KEY]?: Set<string> })
-__claimedSlot[CLAIMED_KEY] ??= new Set<string>()
-const claimed = __claimedSlot[CLAIMED_KEY]!
-const __instancesSlot = (globalThis as { [INSTANCES_KEY]?: Map<string, unknown> })
-__instancesSlot[INSTANCES_KEY] ??= new Map<string, unknown>()
-const instances = __instancesSlot[INSTANCES_KEY]!
+const claimedSlot = (globalThis as { [CLAIMED_KEY]?: Set<string> })
+claimedSlot[CLAIMED_KEY] ??= new Set<string>()
+const claimed = claimedSlot[CLAIMED_KEY]!
+const instancesSlot = (globalThis as { [INSTANCES_KEY]?: Map<string, unknown> })
+instancesSlot[INSTANCES_KEY] ??= new Map<string, unknown>()
+const instances = instancesSlot[INSTANCES_KEY]!
 
 // ---------------------------------------------------------------------------
 // Context resolution.
@@ -245,11 +245,11 @@ const instances = __instancesSlot[INSTANCES_KEY]!
 // cache keys are DOM elements (process-global), but the cache itself must
 // also be shared.
 const CACHE_KEY = Symbol.for('schmancy.state.hostResolverCache')
-const __cacheSlot = (globalThis as {
+const cacheSlot = (globalThis as {
 	[CACHE_KEY]?: WeakMap<HTMLElement, Map<string, unknown>>
 })
-__cacheSlot[CACHE_KEY] ??= new WeakMap<HTMLElement, Map<string, unknown>>()
-const hostResolverCache = __cacheSlot[CACHE_KEY]!
+cacheSlot[CACHE_KEY] ??= new WeakMap<HTMLElement, Map<string, unknown>>()
+const hostResolverCache = cacheSlot[CACHE_KEY]!
 
 function resolveContextual(namespace: string, fallback: unknown): unknown {
 	const host = resolveActiveHost()
@@ -436,7 +436,7 @@ interface CreateInstanceOptions {
 	 *  it does NOT claim the namespace in `claimed`, it does NOT route reads
 	 *  or writes through `resolveContextual` (so it can serve as the
 	 *  resolution target without recursion), and it does NOT expose
-	 *  `_isolatedInstance` (you only isolate the global). */
+	 *  `isolatedInstance` (you only isolate the global). */
 	isolated?: boolean
 }
 
@@ -578,7 +578,7 @@ function createInstance(args: CreateInstanceArgs, options: CreateInstanceOptions
 
 	// Hook used by `<schmancy-context>` to mint a per-context copy seeded
 	// with the current value. Internal: not part of the public State<> type.
-	instance._isolatedInstance = (): unknown =>
+	instance.isolatedInstance = (): unknown =>
 		createInstance(
 			{ namespace, initial: signal.get(), storage: 'memory' },
 			{ isolated: true },

package/src/state/schmancy-context.ts

@@ -51,7 +51,7 @@ export interface StateTemplate {
    *  per-context copy seeded with the current value, sharing nothing with the
    *  global instance. The returned object exposes `destroy()` so the context
    *  element can flush + close on disconnect. */
-  _isolatedInstance(): { destroy(): void } & Record<string | symbol, unknown>;
+  isolatedInstance(): { destroy(): void } & Record<string | symbol, unknown>;
 }
 
 export class SchmancyContext extends SchmancyElement {
@@ -63,12 +63,12 @@ export class SchmancyContext extends SchmancyElement {
 
   // Per-mount records. Keep both the provider (so we can release it on
   // disconnect) and the isolated instance (so we can destroy it).
-  private _scoped: Array<{
+  private scoped: Array<{
     isolated: { destroy(): void };
     provider: ContextProvider<Context<unknown, unknown>>;
   }> = [];
 
-  private _publishEventTargetAsHost = (e: Event): void => {
+  private publishEventTargetAsHost = (e: Event): void => {
     // Publish the deepest event target (across shadow boundaries) rather
     // than `this`. The downstream `ContextRequestEvent` will be dispatched
     // from this host and must bubble up through `<schmancy-context>` to
@@ -87,28 +87,28 @@ export class SchmancyContext extends SchmancyElement {
   override connectedCallback(): void {
     super.connectedCallback();
     for (const tmpl of this.provides) {
-      const isolated = tmpl._isolatedInstance();
+      const isolated = tmpl.isolatedInstance();
       const ctx = createContext<unknown>(stateContextKey(tmpl.namespace));
       // ContextProvider auto-wires via the host's ReactiveControllerHost
       // interface (LitElement satisfies it). It listens for
       // `context-request` events and responds with `isolated` for any
       // requester whose `event.context === ctx`.
       const provider = new ContextProvider(this, { context: ctx, initialValue: isolated });
-      this._scoped.push({ isolated, provider });
+      this.scoped.push({ isolated, provider });
     }
     for (const type of EVENT_TYPES) {
-      this.addEventListener(type, this._publishEventTargetAsHost, { capture: true });
+      this.addEventListener(type, this.publishEventTargetAsHost, { capture: true });
     }
   }
 
   override disconnectedCallback(): void {
     for (const type of EVENT_TYPES) {
-      this.removeEventListener(type, this._publishEventTargetAsHost, { capture: true });
+      this.removeEventListener(type, this.publishEventTargetAsHost, { capture: true });
     }
-    for (const entry of this._scoped) {
+    for (const entry of this.scoped) {
       entry.isolated.destroy();
     }
-    this._scoped = [];
+    this.scoped = [];
     super.disconnectedCallback();
   }
 

package/src/steps/index.ts

@@ -1,3 +1,3 @@
 export * from './schmancy-step';
-export * from './schmancy-steps-container';
+export * from './schmancy-steps';
 export * from './steps.context';

package/src/steps/schmancy-step.ts

@@ -1,17 +1,16 @@
 import { consume } from '@lit/context'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { customElement, property, queryAssignedNodes, state } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
-import { Subscription } from 'rxjs'
-import { stepsContext, StepsController } from './steps.context'
-import { SchmancyElement } from '@mixins/index'
+import { takeUntil } from 'rxjs/operators'
+import { StepsController, stepsContext } from './steps.context'
 
 @customElement('schmancy-step')
 export class SchmancyStep extends SchmancyElement {
 	static styles = [css`
 	:host {
-		display: grid;
-		/* Base display is just grid, flex properties will be applied dynamically */
+		display: block;
 		transition: all 0.2s ease-in-out;
 	}
 `]
@@ -23,18 +22,11 @@ export class SchmancyStep extends SchmancyElement {
 	 */
 	@property({ type: Number }) position = 1
 
-	@property({ type: String }) title = ''
+	@property({ type: String }) label = ''
 	@property({ type: String }) description = ''
 
-	// NEW: Allow a step to be explicitly marked as complete.
 	@property({ type: Boolean, reflect: true }) completed = false
 
-	/**
-	 * NEW: Lock API to disable users from going back.
-	 * When set to true, clicking on a previous (completed) step is ignored.
-	 */
-	@property({ type: Boolean }) lockBack = false
-
 	/**
 	 * Consume the shared StepsController from context.
 	 */
@@ -47,80 +39,71 @@ export class SchmancyStep extends SchmancyElement {
 	@state()
 	private currentStep = 1
 
-	/**
-	 * Keep a reference to our subscription so we can unsubscribe cleanly.
-	 */
-	private subscription?: Subscription
+	@state()
+	private hasContent = false
+
+	@queryAssignedNodes({ flatten: true })
+	private assignedNodes!: Node[]
 
 	connectedCallback() {
 		super.connectedCallback()
+		this.steps.currentStep$
+			.pipe(takeUntil(this.disconnecting))
+			.subscribe(step => {
+				this.currentStep = step
+				this.updateFlexProperties()
+			})
 	}
 
 	firstUpdated() {
-		// Subscribe to updates from the container's StepsController.
-		// Context is guaranteed to be available after first render
-		this.subscription = this.steps.currentStep$.subscribe(step => {
-			this.currentStep = step
-			// When the current step changes, update the flex properties
-			this.updateFlexProperties()
-		})
-		// Initial update of flex properties
 		this.updateFlexProperties()
 	}
 
-	disconnectedCallback(): void {
-		this.subscription?.unsubscribe()
-		super.disconnectedCallback()
+	private onSlotChange() {
+		this.hasContent = this.assignedNodes.some(
+			n => n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && n.textContent?.trim() !== ''),
+		)
+		this.updateFlexProperties()
 	}
 
-	/**
-	 * Update the host element's flex properties based on active state
-	 */
 	private updateFlexProperties() {
 		const isActive = this.position === this.currentStep
-
-		if (isActive) {
-			// Apply flex-grow when active
-			this.style.flex = '1 1 auto'
-		} else {
-			// Make it shrink when not active
-			this.style.flex = '0 0 auto'
-		}
+		this.style.flex = isActive && this.hasContent ? '1 1 auto' : '0 0 auto'
 	}
 
-	/**
-	 * Compute visual status for styling purposes. Note that if a step is explicitly
-	 * marked as completed, it always appears as complete even if it's active.
-	 */
 	get status(): 'complete' | 'current' | 'upcoming' {
 		if (this.completed || this.position < this.currentStep) return 'complete'
 		if (this.position === this.currentStep) return 'current'
 		return 'upcoming'
 	}
 
-	/**
-	 * Click handler to allow navigation between completed (or active) steps.
-	 * With lockBack enabled, clicking on a previous step is ignored.
-	 */
-	private _onStepClick(_e: Event) {
-		// If lockBack is enabled and the user attempts to go back, do nothing.
-		if (this.lockBack && this.position < this.currentStep) {
-			return
-		}
+	private onStepClick() {
+		if (this.steps.lockBack && this.position < this.currentStep) return
 		if (this.status !== 'upcoming') {
 			this.steps.setStep(this.position)
 		}
 	}
 
+	private onStepKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault()
+			this.onStepClick()
+		}
+	}
+
 	render() {
-		// Determine if the step is currently active.
 		const isActive = this.position === this.currentStep
-
-		// Use computed status for visual styling.
 		const isComplete = this.status === 'complete'
 		const isUpcoming = this.status === 'upcoming'
+		const navigable = !isUpcoming && !(this.steps.lockBack && this.position < this.currentStep)
 
-		// Enhanced styling classes with better visual hierarchy
+		if (this.hasContent) {
+			return this.renderContentRow(isActive, isComplete, isUpcoming, navigable)
+		}
+		return this.renderRailRow(isActive, isComplete, isUpcoming, navigable)
+	}
+
+	private renderContentRow(isActive: boolean, isComplete: boolean, isUpcoming: boolean, navigable: boolean) {
 		const connectorClasses = {
 			'bg-tertiary-default': isComplete,
 			'bg-outlineVariant': !isComplete,
@@ -139,22 +122,19 @@ export class SchmancyStep extends SchmancyElement {
 			'text-surface-onVariant': isUpcoming,
 		}
 
-		// If the step is clickable (active or complete), add a pointer cursor.
-		const clickableClass = isActive || isComplete ? 'cursor-pointer' : ''
+		const clickableClass = navigable ? 'cursor-pointer' : ''
 
 		return html`
 			<li class="relative">
-				<!-- Connector line - responsive positioning -->
 				<div
 					class="absolute top-8 left-3 sm:left-4 -ml-px w-0.5 transition-colors duration-200 ${this.classMap(connectorClasses)}"
 					style="height: calc(100% + var(--steps-gap, 0px))"
 					aria-hidden="true"
 				></div>
 
-				<!-- Step Button/Label - adjusted padding for mobile -->
 				<button
 					type="button"
-					@click=${this._onStepClick}
+					@click=${this.onStepClick}
 					class="relative flex items-center group transition-all duration-200 hover:scale-[1.02] ${clickableClass} ${isActive ? 'bg-primary-container/20 -mx-1 sm:-mx-2 px-1 sm:px-2 py-2 sm:py-3 rounded-lg' : 'py-1 sm:py-2'}"
 				>
 					<span class="flex items-center h-10 sm:h-12">
@@ -181,7 +161,7 @@ export class SchmancyStep extends SchmancyElement {
 
 					<span class="flex flex-col items-start justify-center min-w-0 ml-3 sm:ml-6">
 						<schmancy-typography type="title" token="md">
-							<span class="transition-colors duration-200 ${this.classMap(textClasses)}">${this.title}</span>
+							<span class="transition-colors duration-200 ${this.classMap(textClasses)}">${this.label}</span>
 						</schmancy-typography>
 						${when(
 							this.description,
@@ -194,18 +174,64 @@ export class SchmancyStep extends SchmancyElement {
 					</span>
 				</button>
 
-				<!-- Render step content if the step is active - responsive spacing -->
 				${when(
 					isActive,
 					() => html`
 						<div class="ml-6 sm:ml-10 mt-3 sm:mt-4 pb-6 sm:pb-8 transition-all duration-300 ease-out">
-						<slot></slot>
+							<slot @slotchange=${this.onSlotChange}></slot>
 						</div>
 					`,
 				)}
+				${when(!isActive, () => html`<slot @slotchange=${this.onSlotChange} style="display:none"></slot>`)}
 			</li>
 		`
 	}
+
+	private renderRailRow(isActive: boolean, isComplete: boolean, _isUpcoming: boolean, navigable: boolean) {
+		const isLast = !this.nextElementSibling?.matches('schmancy-step')
+		const labelClass = isActive
+			? 'text-primary-default'
+			: isComplete
+				? 'text-surface-on'
+				: 'text-surface-on-variant'
+
+		const dotClass = [
+			'relative z-10 w-3 h-3 rounded-full shrink-0 transition-colors duration-300',
+			isComplete || isActive ? 'bg-primary-default' : 'bg-outline',
+			isActive ? 'ring-2 ring-offset-2 ring-offset-surface-containerLow ring-primary-default' : '',
+		].join(' ')
+
+		return html`
+			<div
+				class="relative flex items-center gap-4 rounded-lg -mx-2 px-2 py-3 transition-colors duration-200 ${
+					navigable
+						? 'cursor-pointer hover:bg-primary-default/8 focus-visible:ring-2 focus-visible:ring-primary-default'
+						: ''
+				}"
+				role=${navigable ? 'button' : 'presentation'}
+				tabindex=${navigable ? '0' : '-1'}
+				aria-current=${isActive ? 'step' : 'false'}
+				aria-label=${navigable ? `Go back to ${this.label}` : this.label}
+				@click=${this.onStepClick}
+				@keydown=${this.onStepKeydown}
+			>
+				${when(
+					!isLast,
+					() => html`
+						<div
+							class="absolute left-3.5 top-1/2 w-px h-full transition-colors duration-300 ${
+								isComplete ? 'bg-primary-default' : 'bg-outline'
+							}"
+							aria-hidden="true"
+						></div>
+					`,
+				)}
+				<div class=${dotClass} aria-hidden="true"></div>
+				<schmancy-typography type="label" token="lg" class=${labelClass}>${this.label}</schmancy-typography>
+			</div>
+			<slot @slotchange=${this.onSlotChange} style="display:none"></slot>
+		`
+	}
 }
 
 declare global {

package/src/steps/{schmancy-steps-container.ts → schmancy-steps.ts}

@@ -12,12 +12,11 @@ import { StepsController, stepsContext } from './steps.context'
  */
 export type SchmancyStepsChangeEvent = CustomEvent<{ value: number }>
 
-@customElement('schmancy-steps-container')
-export class SchmancyStepsContainer extends SchmancyElement {
+@customElement('schmancy-steps')
+export class SchmancySteps extends SchmancyElement {
 	static styles = [css`
 	:host {
 		display: block;
-		overflow: auto;
 	}
 `]
 
@@ -27,23 +26,27 @@ export class SchmancyStepsContainer extends SchmancyElement {
 	stepsController = this.controller
 
 	@property({ type: Number, reflect: true })
-	set currentStep(value: number) {
+	set value(v: number) {
 		const oldValue = this.controller.currentStep
-		if (oldValue !== value) {
-			this.controller.setStep(value)
+		if (oldValue !== v) {
+			this.controller.setStep(v)
 		}
 	}
 
-	get currentStep(): number {
+	get value(): number {
 		return this.controller.currentStep
 	}
 
 	/**
-	 * Gap between steps. Maps to Tailwind gap classes.
-	 * @default 4
+	 * Block back-navigation for the whole stepper.
 	 */
-	@property({ type: Number, reflect: true })
-	gap: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 = 4
+	@property({ type: Boolean, reflect: true })
+	set lockBack(v: boolean) {
+		this.controller.lockBack = v
+	}
+	get lockBack(): boolean {
+		return this.controller.lockBack
+	}
 
 	connectedCallback() {
 		super.connectedCallback()
@@ -54,8 +57,6 @@ export class SchmancyStepsContainer extends SchmancyElement {
 				distinctUntilChanged(),
 				tap(step => {
 					this.requestUpdate()
-					// Use dispatchScopedEvent with bubbles: false to prevent collision
-					// with 'change' events bubbling up from inputs inside steps
 					this.dispatchScopedEvent('change', { value: step }, { bubbles: false })
 				}),
 				takeUntil(this.disconnecting),
@@ -64,39 +65,18 @@ export class SchmancyStepsContainer extends SchmancyElement {
 	}
 
 	/**
-	 * Handle change events - stop propagation of bubbled events from children.
-	 * This prevents form inputs inside steps from triggering the parent's @change handler.
+	 * Handle change events — stop propagation of bubbled events from children.
 	 */
 	private handleChange = (e: Event) => {
-		// Only stop propagation if the event is NOT from this component
-		// (i.e., it's bubbling up from a child element like an input)
 		if (e.target !== this) {
 			e.stopPropagation()
 		}
 	}
 
 	render() {
-		const gapClass = `gap-${this.gap}`
-		const gapRem =
-			{
-				0: '0',
-				1: '0.25rem',
-				2: '0.5rem',
-				3: '0.75rem',
-				4: '1rem',
-				5: '1.25rem',
-				6: '1.5rem',
-				8: '2rem',
-				10: '2.5rem',
-				12: '3rem',
-				16: '4rem',
-				20: '5rem',
-				24: '6rem',
-			}[this.gap] || '1rem'
-
 		return html`
-			<nav class="flex h-full w-full" aria-label="Progress" @change=${this.handleChange}>
-				<ol class="flex flex-col flex-1 ${gapClass}" role="list" style="--steps-gap: ${gapRem}">
+			<nav aria-label="Progress" @change=${this.handleChange}>
+				<ol role="list" style="display:contents">
 					<slot></slot>
 				</ol>
 			</nav>
@@ -106,6 +86,6 @@ export class SchmancyStepsContainer extends SchmancyElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'schmancy-steps-container': SchmancyStepsContainer
+		'schmancy-steps': SchmancySteps
 	}
 }

package/src/steps/steps.context.ts

@@ -2,18 +2,19 @@ import { createContext } from '@lit/context'
 import { BehaviorSubject } from 'rxjs'
 
 export class StepsController {
-	private _currentStep = new BehaviorSubject(1)
+	private stepSubject = new BehaviorSubject(1)
+	lockBack = false
 
 	get currentStep$() {
-		return this._currentStep.asObservable()
+		return this.stepSubject.asObservable()
 	}
 
 	get currentStep() {
-		return this._currentStep.value
+		return this.stepSubject.value
 	}
 
 	setStep(step: number) {
-		this._currentStep.next(step)
+		this.stepSubject.next(step)
 	}
 }