@mhmo91/schmancy 0.10.36 → 0.10.37

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)
 	}
 }
 

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/types/src/directives/reveal.d.ts

@@ -4,6 +4,9 @@
  * Uses Blackbird spring physics for natural, organic motion.
  * Element stays in DOM to prevent layout shift.
  *
+ * When fully revealed, no directive-imposed max-height or overflow:hidden
+ * is left on the element — it lays out at its natural full height.
+ *
  * Usage:
  * ```ts
  * // Basic - uses 'smooth' preset
@@ -12,7 +15,7 @@
  * // With preset - 'snappy' for quick interactions
  * html`<div ${reveal(this.isVisible, { preset: 'snappy' })}>Content</div>`
  *
- * // With custom max height
+ * // Opt-in scroll cap (explicit maxHeight — keeps overflow:auto, does NOT clip)
  * html`<div ${reveal(this.items.length > 1, { maxHeight: '200px' })}>Content</div>`
  *
  * // Bouncy for playful UI
@@ -28,12 +31,17 @@
  * @see packages/schmancy/src/utils/animation.ts for Blackbird system
  */
 import { AsyncDirective } from 'lit/async-directive.js';
-import type { ElementPart, PartInfo } from 'lit/directive.js';
+import { type ElementPart, type PartInfo } from 'lit/directive.js';
 export type RevealPreset = 'smooth' | 'snappy' | 'bouncy' | 'gentle';
 export interface RevealOptions {
     /** Animation preset (default: 'smooth') */
     preset?: RevealPreset;
-    /** Max height when revealed (default: '10rem') */
+    /**
+     * Explicit scroll cap (opt-in). When set the element is constrained to
+     * this height with overflow:auto — content scrolls rather than clips.
+     * When omitted (the default) the element is fully unconstrained after
+     * opening: no max-height, no overflow:hidden left on it.
+     */
     maxHeight?: string;
     /** Custom duration override in ms (uses preset duration if not specified) */
     duration?: number;
@@ -42,11 +50,13 @@ export interface RevealOptions {
 }
 declare class RevealDirective extends AsyncDirective {
     private initialized;
-    private element;
+    /** Fires on disconnect to tear down the transitionend subscription. */
+    private teardown$;
+    /** True if this is the very first update call — used to detect always-true initial mount. */
+    private firstUpdate;
     constructor(partInfo: PartInfo);
     render(_show?: boolean, _options?: RevealOptions): symbol;
     update(part: ElementPart, [show, options]: [boolean | undefined, RevealOptions?]): symbol;
-    private setupElement;
     disconnected(): void;
     reconnected(): void;
 }

package/types/src/steps/index.d.ts

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

package/types/src/steps/schmancy-step.d.ts

@@ -7,14 +7,9 @@ export declare class SchmancyStep extends SchmancyElement {
      * "current", or "upcoming".
      */
     position: number;
-    title: string;
+    label: string;
     description: string;
     completed: boolean;
-    /**
-     * NEW: Lock API to disable users from going back.
-     * When set to true, clicking on a previous (completed) step is ignored.
-     */
-    lockBack: boolean;
     /**
      * Consume the shared StepsController from context.
      */
@@ -23,28 +18,18 @@ export declare class SchmancyStep extends SchmancyElement {
      * Local reactive copy of the container's current step number.
      */
     private currentStep;
-    /**
-     * Keep a reference to our subscription so we can unsubscribe cleanly.
-     */
-    private subscription?;
+    private hasContent;
+    private assignedNodes;
     connectedCallback(): void;
     firstUpdated(): void;
-    disconnectedCallback(): void;
-    /**
-     * Update the host element's flex properties based on active state
-     */
+    private onSlotChange;
     private updateFlexProperties;
-    /**
-     * 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';
-    /**
-     * Click handler to allow navigation between completed (or active) steps.
-     * With lockBack enabled, clicking on a previous step is ignored.
-     */
-    private _onStepClick;
+    private onStepClick;
+    private onStepKeydown;
     render(): import("lit-html").TemplateResult<1>;
+    private renderContentRow;
+    private renderRailRow;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -8,27 +8,26 @@ import { StepsController } from './steps.context';
 export type SchmancyStepsChangeEvent = CustomEvent<{
     value: number;
 }>;
-export declare class SchmancyStepsContainer extends SchmancyElement {
+export declare class SchmancySteps extends SchmancyElement {
     static styles: import("lit").CSSResult[];
     private controller;
     stepsController: StepsController;
-    set currentStep(value: number);
-    get currentStep(): number;
+    set value(v: number);
+    get value(): number;
     /**
-     * Gap between steps. Maps to Tailwind gap classes.
-     * @default 4
+     * Block back-navigation for the whole stepper.
      */
-    gap: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24;
+    set lockBack(v: boolean);
+    get lockBack(): boolean;
     connectedCallback(): void;
     /**
-     * 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;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'schmancy-steps-container': SchmancyStepsContainer;
+        'schmancy-steps': SchmancySteps;
     }
 }

package/types/src/steps/steps.context.d.ts

@@ -1,5 +1,6 @@
 export declare class StepsController {
-    private _currentStep;
+    private stepSubject;
+    lockBack: boolean;
     get currentStep$(): import("rxjs").Observable<number>;
     get currentStep(): number;
     setStep(step: number): void;

package/types/src/steps/steps.test.d.ts

@@ -0,0 +1,2 @@
+import './schmancy-step';
+import './schmancy-steps';