@mhmo91/schmancy 0.9.5 → 0.9.6

package/dist/steps.cjs

@@ -1,10 +1,10 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-BCfY8kxB.cjs`);const e=require(`./tailwind.mixin-BF1Huas7.cjs`),t=require(`./provide-DHnhQtCH.cjs`),n=require(`./litElement.mixin-3llHwB-8.cjs`);let r=require(`rxjs`),i=require(`rxjs/operators`),a=require(`lit/decorators.js`),o=require(`lit`),s=require(`lit/directives/when.js`);var c=class{constructor(){this._currentStep=new r.BehaviorSubject(1)}get currentStep$(){return this._currentStep.asObservable()}get currentStep(){return this._currentStep.value}setStep(e){this._currentStep.next(e)}},l=e.s(Symbol(`SchmancyStepsContext`)),u=class extends n.t(o.css`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-BCfY8kxB.cjs`);const e=require(`./tailwind.mixin-Cpa-VnnX.cjs`),t=require(`./provide-BZ9lq_Be.cjs`),n=require(`./decorate-F9CuyeHg.cjs`),r=require(`./litElement.mixin-Bj2q1yPw.cjs`);let i=require(`rxjs`),a=require(`rxjs/operators`),o=require(`lit/decorators.js`),s=require(`lit`),c=require(`lit/directives/when.js`);var l=class{constructor(){this._currentStep=new i.BehaviorSubject(1)}get currentStep$(){return this._currentStep.asObservable()}get currentStep(){return this._currentStep.value}setStep(e){this._currentStep.next(e)}},u=e.o(Symbol(`SchmancyStepsContext`)),d=class extends r.t(s.css`
 	:host {
 		display: grid;
 		/* Base display is just grid, flex properties will be applied dynamically */
 		transition: all 0.2s ease-in-out;
 	}
-`){constructor(...e){super(...e),this.position=1,this.title=``,this.description=``,this.completed=!1,this.lockBack=!1,this.currentStep=1}connectedCallback(){super.connectedCallback()}firstUpdated(){this.subscription=this.steps.currentStep$.subscribe(e=>{this.currentStep=e,this.updateFlexProperties()}),this.updateFlexProperties()}disconnectedCallback(){this.subscription?.unsubscribe(),super.disconnectedCallback()}updateFlexProperties(){this.position===this.currentStep?this.style.flex=`1 1 auto`:this.style.flex=`0 0 auto`}get status(){return this.completed||this.position<this.currentStep?`complete`:this.position===this.currentStep?`current`:`upcoming`}_onStepClick(e){this.lockBack&&this.position<this.currentStep||this.status!==`upcoming`&&this.steps.setStep(this.position)}render(){let e=this.position===this.currentStep,t=this.status===`complete`,n=this.status===`upcoming`,r={"bg-tertiary-default":t,"bg-outlineVariant":!t},i={"relative border-solid z-10 flex size-8 items-center justify-center rounded-full transition-all duration-200":!0,"bg-tertiary-default text-tertiary-on shadow-md group-hover:shadow-lg":t,"border-2 border-primary-default bg-primary-container text-primary-onContainer shadow-sm":!t&&e,"border-2 border-outline bg-surface-default text-surface-onVariant group-hover:border-primary-default group-hover:bg-primary-container":n},a={"text-primary-default font-medium":e,"text-tertiary-default":t,"text-surface-onVariant":n},c=e||t?`cursor-pointer`:``;return o.html`
+`){constructor(...e){super(...e),this.position=1,this.title=``,this.description=``,this.completed=!1,this.lockBack=!1,this.currentStep=1}connectedCallback(){super.connectedCallback()}firstUpdated(){this.subscription=this.steps.currentStep$.subscribe(e=>{this.currentStep=e,this.updateFlexProperties()}),this.updateFlexProperties()}disconnectedCallback(){this.subscription?.unsubscribe(),super.disconnectedCallback()}updateFlexProperties(){this.position===this.currentStep?this.style.flex=`1 1 auto`:this.style.flex=`0 0 auto`}get status(){return this.completed||this.position<this.currentStep?`complete`:this.position===this.currentStep?`current`:`upcoming`}_onStepClick(e){this.lockBack&&this.position<this.currentStep||this.status!==`upcoming`&&this.steps.setStep(this.position)}render(){let e=this.position===this.currentStep,t=this.status===`complete`,n=this.status===`upcoming`,r={"bg-tertiary-default":t,"bg-outlineVariant":!t},i={"relative border-solid z-10 flex size-8 items-center justify-center rounded-full transition-all duration-200":!0,"bg-tertiary-default text-tertiary-on shadow-md group-hover:shadow-lg":t,"border-2 border-primary-default bg-primary-container text-primary-onContainer shadow-sm":!t&&e,"border-2 border-outline bg-surface-default text-surface-onVariant group-hover:border-primary-default group-hover:bg-primary-container":n},a={"text-primary-default font-medium":e,"text-tertiary-default":t,"text-surface-onVariant":n},o=e||t?`cursor-pointer`:``;return s.html`
 			<li class="relative">
 				<!-- Connector line - responsive positioning -->
 				<div
@@ -17,11 +17,11 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 				<button
 					type="button"
 					@click=${this._onStepClick}
-					class="relative flex items-center group transition-all duration-200 hover:scale-[1.02] ${c} ${e?`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`}"
+					class="relative flex items-center group transition-all duration-200 hover:scale-[1.02] ${o} ${e?`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">
 						<span class=${this.classMap(i)}>
-							${t?o.html`
+							${t?s.html`
 										<svg class="size-5 transition-transform duration-200 group-hover:scale-110" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
 											<path
 												fill-rule="evenodd"
@@ -29,7 +29,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 												clip-rule="evenodd"
 											/>
 										</svg>
-									`:o.html`
+									`:s.html`
 										<span
 											class="size-3 rounded-full transition-all duration-200 ${e?`bg-primary-onContainer`:`bg-transparent group-hover:bg-primary-default group-hover:scale-125`}"
 										></span>
@@ -41,7 +41,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 						<schmancy-typography type="title" token="md">
 							<span class="transition-colors duration-200 ${this.classMap(a)}">${this.title}</span>
 						</schmancy-typography>
-						${(0,s.when)(this.description,()=>o.html`
+						${(0,c.when)(this.description,()=>s.html`
 								<schmancy-typography type="body" token="sm" class="mt-0.5 sm:mt-1">
 									<span class="text-surface-onVariant transition-colors duration-200 ${e?`text-primary-onContainer`:``}">${this.description}</span>
 								</schmancy-typography>
@@ -50,21 +50,21 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 				</button>
 
 				<!-- Render step content if the step is active - responsive spacing -->
-				${(0,s.when)(e,()=>o.html`
+				${(0,c.when)(e,()=>s.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>
 						</div>
 					`)}
 			</li>
-		`}};e.i([(0,a.property)({type:Number})],u.prototype,`position`,void 0),e.i([(0,a.property)({type:String})],u.prototype,`title`,void 0),e.i([(0,a.property)({type:String})],u.prototype,`description`,void 0),e.i([(0,a.property)({type:Boolean,reflect:!0})],u.prototype,`completed`,void 0),e.i([(0,a.property)({type:Boolean})],u.prototype,`lockBack`,void 0),e.i([e.o({context:l})],u.prototype,`steps`,void 0),e.i([(0,a.state)()],u.prototype,`currentStep`,void 0),u=e.i([(0,a.customElement)(`schmancy-step`)],u);var d=class extends n.t(o.css`
+		`}};n.t([(0,o.property)({type:Number})],d.prototype,`position`,void 0),n.t([(0,o.property)({type:String})],d.prototype,`title`,void 0),n.t([(0,o.property)({type:String})],d.prototype,`description`,void 0),n.t([(0,o.property)({type:Boolean,reflect:!0})],d.prototype,`completed`,void 0),n.t([(0,o.property)({type:Boolean})],d.prototype,`lockBack`,void 0),n.t([e.a({context:u})],d.prototype,`steps`,void 0),n.t([(0,o.state)()],d.prototype,`currentStep`,void 0),d=n.t([(0,o.customElement)(`schmancy-step`)],d);var f=class extends r.t(s.css`
 	:host {
 		display: block;
 		overflow: auto;
 	}
-`){constructor(...e){super(...e),this.controller=new c,this.stepsController=this.controller,this.gap=4,this.handleChange=e=>{e.target!==this&&e.stopPropagation()}}set currentStep(e){this.controller.currentStep!==e&&this.controller.setStep(e)}get currentStep(){return this.controller.currentStep}connectedCallback(){super.connectedCallback(),this.controller.currentStep$.pipe((0,i.distinctUntilChanged)(),(0,i.tap)(e=>{this.requestUpdate(),this.dispatchScopedEvent(`change`,{value:e},{bubbles:!1})}),(0,i.takeUntil)(this.disconnecting)).subscribe()}render(){let e=`gap-${this.gap}`,t={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 o.html`
+`){constructor(...e){super(...e),this.controller=new l,this.stepsController=this.controller,this.gap=4,this.handleChange=e=>{e.target!==this&&e.stopPropagation()}}set currentStep(e){this.controller.currentStep!==e&&this.controller.setStep(e)}get currentStep(){return this.controller.currentStep}connectedCallback(){super.connectedCallback(),this.controller.currentStep$.pipe((0,a.distinctUntilChanged)(),(0,a.tap)(e=>{this.requestUpdate(),this.dispatchScopedEvent(`change`,{value:e},{bubbles:!1})}),(0,a.takeUntil)(this.disconnecting)).subscribe()}render(){let e=`gap-${this.gap}`,t={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 s.html`
 			<nav class="flex h-full w-full" aria-label="Progress" @change=${this.handleChange}>
 				<ol class="flex flex-col flex-1 ${e}" role="list" style="--steps-gap: ${t}">
 					<slot></slot>
 				</ol>
 			</nav>
-		`}};e.i([t.t({context:l})],d.prototype,`stepsController`,void 0),e.i([(0,a.property)({type:Number,reflect:!0})],d.prototype,`currentStep`,null),e.i([(0,a.property)({type:Number,reflect:!0})],d.prototype,`gap`,void 0),d=e.i([(0,a.customElement)(`schmancy-steps-container`)],d),Object.defineProperty(exports,`SchmancyStep`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`SchmancyStepsContainer`,{enumerable:!0,get:function(){return d}}),exports.StepsController=c,exports.stepsContext=l;
+		`}};n.t([t.t({context:u})],f.prototype,`stepsController`,void 0),n.t([(0,o.property)({type:Number,reflect:!0})],f.prototype,`currentStep`,null),n.t([(0,o.property)({type:Number,reflect:!0})],f.prototype,`gap`,void 0),f=n.t([(0,o.customElement)(`schmancy-steps-container`)],f),Object.defineProperty(exports,`SchmancyStep`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`SchmancyStepsContainer`,{enumerable:!0,get:function(){return f}}),exports.StepsController=l,exports.stepsContext=u;

package/dist/steps.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"steps.cjs","names":[],"sources":["../src/steps/steps.context.ts","../src/steps/schmancy-step.ts","../src/steps/schmancy-steps-container.ts"],"sourcesContent":["import { createContext } from '@lit/context'\nimport { BehaviorSubject } from 'rxjs'\n\nexport class StepsController {\n\tprivate _currentStep = new BehaviorSubject(1)\n\n\tget currentStep$() {\n\t\treturn this._currentStep.asObservable()\n\t}\n\n\tget currentStep() {\n\t\treturn this._currentStep.value\n\t}\n\n\tsetStep(step: number) {\n\t\tthis._currentStep.next(step)\n\t}\n}\n\n/**\n * The actual context object. We provide/consume this in the container and steps.\n */\nexport const stepsContext = createContext<StepsController>(Symbol('SchmancyStepsContext'))\n","import { consume } from '@lit/context'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { Subscription } from 'rxjs'\nimport { stepsContext, StepsController } from './steps.context'\nimport { $LitElement } from '@mixins/litElement.mixin'\n\n@customElement('schmancy-step')\nexport class SchmancyStep extends $LitElement(css`\n\t:host {\n\t\tdisplay: grid;\n\t\t/* Base display is just grid, flex properties will be applied dynamically */\n\t\ttransition: all 0.2s ease-in-out;\n\t}\n`) {\n\t/**\n\t * The step's position (1-based). This is used to compare against\n\t * the container's current step to decide if it's \"complete\",\n\t * \"current\", or \"upcoming\".\n\t */\n\t@property({ type: Number }) position = 1\n\n\t@property({ type: String }) title = ''\n\t@property({ type: String }) description = ''\n\n\t// NEW: Allow a step to be explicitly marked as complete.\n\t@property({ type: Boolean, reflect: true }) completed = false\n\n\t/**\n\t * NEW: Lock API to disable users from going back.\n\t * When set to true, clicking on a previous (completed) step is ignored.\n\t */\n\t@property({ type: Boolean }) lockBack = false\n\n\t/**\n\t * Consume the shared StepsController from context.\n\t */\n\t@consume({ context: stepsContext })\n\tprivate steps!: StepsController\n\n\t/**\n\t * Local reactive copy of the container's current step number.\n\t */\n\t@state()\n\tprivate currentStep = 1\n\n\t/**\n\t * Keep a reference to our subscription so we can unsubscribe cleanly.\n\t */\n\tprivate subscription?: Subscription\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t}\n\n\tfirstUpdated() {\n\t\t// Subscribe to updates from the container's StepsController.\n\t\t// Context is guaranteed to be available after first render\n\t\tthis.subscription = this.steps.currentStep$.subscribe(step => {\n\t\t\tthis.currentStep = step\n\t\t\t// When the current step changes, update the flex properties\n\t\t\tthis.updateFlexProperties()\n\t\t})\n\t\t// Initial update of flex properties\n\t\tthis.updateFlexProperties()\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.subscription?.unsubscribe()\n\t\tsuper.disconnectedCallback()\n\t}\n\n\t/**\n\t * Update the host element's flex properties based on active state\n\t */\n\tprivate updateFlexProperties() {\n\t\tconst isActive = this.position === this.currentStep\n\n\t\tif (isActive) {\n\t\t\t// Apply flex-grow when active\n\t\t\tthis.style.flex = '1 1 auto'\n\t\t} else {\n\t\t\t// Make it shrink when not active\n\t\t\tthis.style.flex = '0 0 auto'\n\t\t}\n\t}\n\n\t/**\n\t * Compute visual status for styling purposes. Note that if a step is explicitly\n\t * marked as completed, it always appears as complete even if it's active.\n\t */\n\tget status(): 'complete' | 'current' | 'upcoming' {\n\t\tif (this.completed || this.position < this.currentStep) return 'complete'\n\t\tif (this.position === this.currentStep) return 'current'\n\t\treturn 'upcoming'\n\t}\n\n\t/**\n\t * Click handler to allow navigation between completed (or active) steps.\n\t * With lockBack enabled, clicking on a previous step is ignored.\n\t */\n\tprivate _onStepClick(_e: Event) {\n\t\t// If lockBack is enabled and the user attempts to go back, do nothing.\n\t\tif (this.lockBack && this.position < this.currentStep) {\n\t\t\treturn\n\t\t}\n\t\tif (this.status !== 'upcoming') {\n\t\t\tthis.steps.setStep(this.position)\n\t\t}\n\t}\n\n\trender() {\n\t\t// Determine if the step is currently active.\n\t\tconst isActive = this.position === this.currentStep\n\n\t\t// Use computed status for visual styling.\n\t\tconst isComplete = this.status === 'complete'\n\t\tconst isUpcoming = this.status === 'upcoming'\n\n\t\t// Enhanced styling classes with better visual hierarchy\n\t\tconst connectorClasses = {\n\t\t\t'bg-tertiary-default': isComplete,\n\t\t\t'bg-outlineVariant': !isComplete,\n\t\t}\n\n\t\tconst iconContainerClasses = {\n\t\t\t'relative border-solid z-10 flex size-8 items-center justify-center rounded-full transition-all duration-200': true,\n\t\t\t'bg-tertiary-default text-tertiary-on shadow-md group-hover:shadow-lg': isComplete,\n\t\t\t'border-2 border-primary-default bg-primary-container text-primary-onContainer shadow-sm': !isComplete && isActive,\n\t\t\t'border-2 border-outline bg-surface-default text-surface-onVariant group-hover:border-primary-default group-hover:bg-primary-container': isUpcoming,\n\t\t}\n\n\t\tconst textClasses = {\n\t\t\t'text-primary-default font-medium': isActive,\n\t\t\t'text-tertiary-default': isComplete,\n\t\t\t'text-surface-onVariant': isUpcoming,\n\t\t}\n\n\t\t// If the step is clickable (active or complete), add a pointer cursor.\n\t\tconst clickableClass = isActive || isComplete ? 'cursor-pointer' : ''\n\n\t\treturn html`\n\t\t\t<li class=\"relative\">\n\t\t\t\t<!-- Connector line - responsive positioning -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"absolute top-8 left-3 sm:left-4 -ml-px w-0.5 transition-colors duration-200 ${this.classMap(connectorClasses)}\"\n\t\t\t\t\tstyle=\"height: calc(100% + var(--steps-gap, 0px))\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\n\t\t\t\t<!-- Step Button/Label - adjusted padding for mobile -->\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t@click=${this._onStepClick}\n\t\t\t\t\tclass=\"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'}\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"flex items-center h-10 sm:h-12\">\n\t\t\t\t\t\t<span class=${this.classMap(iconContainerClasses)}>\n\t\t\t\t\t\t\t${isComplete\n\t\t\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t\t\t<svg class=\"size-5 transition-transform duration-200 group-hover:scale-110\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\t\td=\"M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z\"\n\t\t\t\t\t\t\t\t\t\t\t\tclip-rule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t`\n\t\t\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"size-3 rounded-full transition-all duration-200 ${isActive\n\t\t\t\t\t\t\t\t\t\t\t\t? 'bg-primary-onContainer'\n\t\t\t\t\t\t\t\t\t\t\t\t: 'bg-transparent group-hover:bg-primary-default group-hover:scale-125'}\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t`}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\n\t\t\t\t\t<span class=\"flex flex-col items-start justify-center min-w-0 ml-3 sm:ml-6\">\n\t\t\t\t\t\t<schmancy-typography type=\"title\" token=\"md\">\n\t\t\t\t\t\t\t<span class=\"transition-colors duration-200 ${this.classMap(textClasses)}\">${this.title}</span>\n\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t${when(\n\t\t\t\t\t\t\tthis.description,\n\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t<schmancy-typography type=\"body\" token=\"sm\" class=\"mt-0.5 sm:mt-1\">\n\t\t\t\t\t\t\t\t\t<span class=\"text-surface-onVariant transition-colors duration-200 ${isActive ? 'text-primary-onContainer' : ''}\">${this.description}</span>\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\n\t\t\t\t<!-- Render step content if the step is active - responsive spacing -->\n\t\t\t\t${when(\n\t\t\t\t\tisActive,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div class=\"ml-6 sm:ml-10 mt-3 sm:mt-4 pb-6 sm:pb-8 transition-all duration-300 ease-out\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</li>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-step': SchmancyStep\n\t}\n}\n","import { provide } from '@lit/context'\nimport { $LitElement } from '@mixins/litElement.mixin'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { distinctUntilChanged, takeUntil, tap } from 'rxjs/operators'\nimport { StepsController, stepsContext } from './steps.context'\n\n/**\n * Custom event emitted when the current step changes.\n * The component stops propagation of bubbled 'change' events from child inputs\n * to prevent collision with the step change event.\n */\nexport type SchmancyStepsChangeEvent = CustomEvent<{ value: number }>\n\n@customElement('schmancy-steps-container')\nexport class SchmancyStepsContainer extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\toverflow: auto;\n\t}\n`) {\n\tprivate controller = new StepsController()\n\n\t@provide({ context: stepsContext })\n\tstepsController = this.controller\n\n\t@property({ type: Number, reflect: true })\n\tset currentStep(value: number) {\n\t\tconst oldValue = this.controller.currentStep\n\t\tif (oldValue !== value) {\n\t\t\tthis.controller.setStep(value)\n\t\t}\n\t}\n\n\tget currentStep(): number {\n\t\treturn this.controller.currentStep\n\t}\n\n\t/**\n\t * Gap between steps. Maps to Tailwind gap classes.\n\t * @default 4\n\t */\n\t@property({ type: Number, reflect: true })\n\tgap: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 = 4\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// React to controller changes (from property OR step clicks)\n\t\tthis.controller.currentStep$\n\t\t\t.pipe(\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(step => {\n\t\t\t\t\tthis.requestUpdate()\n\t\t\t\t\t// Use dispatchScopedEvent with bubbles: false to prevent collision\n\t\t\t\t\t// with 'change' events bubbling up from inputs inside steps\n\t\t\t\t\tthis.dispatchScopedEvent('change', { value: step }, { bubbles: false })\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\t/**\n\t * Handle change events - stop propagation of bubbled events from children.\n\t * This prevents form inputs inside steps from triggering the parent's @change handler.\n\t */\n\tprivate handleChange = (e: Event) => {\n\t\t// Only stop propagation if the event is NOT from this component\n\t\t// (i.e., it's bubbling up from a child element like an input)\n\t\tif (e.target !== this) {\n\t\t\te.stopPropagation()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst gapClass = `gap-${this.gap}`\n\t\tconst gapRem =\n\t\t\t{\n\t\t\t\t0: '0',\n\t\t\t\t1: '0.25rem',\n\t\t\t\t2: '0.5rem',\n\t\t\t\t3: '0.75rem',\n\t\t\t\t4: '1rem',\n\t\t\t\t5: '1.25rem',\n\t\t\t\t6: '1.5rem',\n\t\t\t\t8: '2rem',\n\t\t\t\t10: '2.5rem',\n\t\t\t\t12: '3rem',\n\t\t\t\t16: '4rem',\n\t\t\t\t20: '5rem',\n\t\t\t\t24: '6rem',\n\t\t\t}[this.gap] || '1rem'\n\n\t\treturn html`\n\t\t\t<nav class=\"flex h-full w-full\" aria-label=\"Progress\" @change=${this.handleChange}>\n\t\t\t\t<ol class=\"flex flex-col flex-1 ${gapClass}\" role=\"list\" style=\"--steps-gap: ${gapRem}\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ol>\n\t\t\t</nav>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-steps-container': SchmancyStepsContainer\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"steps.cjs","names":[],"sources":["../src/steps/steps.context.ts","../src/steps/schmancy-step.ts","../src/steps/schmancy-steps-container.ts"],"sourcesContent":["import { createContext } from '@lit/context'\nimport { BehaviorSubject } from 'rxjs'\n\nexport class StepsController {\n\tprivate _currentStep = new BehaviorSubject(1)\n\n\tget currentStep$() {\n\t\treturn this._currentStep.asObservable()\n\t}\n\n\tget currentStep() {\n\t\treturn this._currentStep.value\n\t}\n\n\tsetStep(step: number) {\n\t\tthis._currentStep.next(step)\n\t}\n}\n\n/**\n * The actual context object. We provide/consume this in the container and steps.\n */\nexport const stepsContext = createContext<StepsController>(Symbol('SchmancyStepsContext'))\n","import { consume } from '@lit/context'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { Subscription } from 'rxjs'\nimport { stepsContext, StepsController } from './steps.context'\nimport { $LitElement } from '@mixins/litElement.mixin'\n\n@customElement('schmancy-step')\nexport class SchmancyStep extends $LitElement(css`\n\t:host {\n\t\tdisplay: grid;\n\t\t/* Base display is just grid, flex properties will be applied dynamically */\n\t\ttransition: all 0.2s ease-in-out;\n\t}\n`) {\n\t/**\n\t * The step's position (1-based). This is used to compare against\n\t * the container's current step to decide if it's \"complete\",\n\t * \"current\", or \"upcoming\".\n\t */\n\t@property({ type: Number }) position = 1\n\n\t@property({ type: String }) title = ''\n\t@property({ type: String }) description = ''\n\n\t// NEW: Allow a step to be explicitly marked as complete.\n\t@property({ type: Boolean, reflect: true }) completed = false\n\n\t/**\n\t * NEW: Lock API to disable users from going back.\n\t * When set to true, clicking on a previous (completed) step is ignored.\n\t */\n\t@property({ type: Boolean }) lockBack = false\n\n\t/**\n\t * Consume the shared StepsController from context.\n\t */\n\t@consume({ context: stepsContext })\n\tprivate steps!: StepsController\n\n\t/**\n\t * Local reactive copy of the container's current step number.\n\t */\n\t@state()\n\tprivate currentStep = 1\n\n\t/**\n\t * Keep a reference to our subscription so we can unsubscribe cleanly.\n\t */\n\tprivate subscription?: Subscription\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t}\n\n\tfirstUpdated() {\n\t\t// Subscribe to updates from the container's StepsController.\n\t\t// Context is guaranteed to be available after first render\n\t\tthis.subscription = this.steps.currentStep$.subscribe(step => {\n\t\t\tthis.currentStep = step\n\t\t\t// When the current step changes, update the flex properties\n\t\t\tthis.updateFlexProperties()\n\t\t})\n\t\t// Initial update of flex properties\n\t\tthis.updateFlexProperties()\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.subscription?.unsubscribe()\n\t\tsuper.disconnectedCallback()\n\t}\n\n\t/**\n\t * Update the host element's flex properties based on active state\n\t */\n\tprivate updateFlexProperties() {\n\t\tconst isActive = this.position === this.currentStep\n\n\t\tif (isActive) {\n\t\t\t// Apply flex-grow when active\n\t\t\tthis.style.flex = '1 1 auto'\n\t\t} else {\n\t\t\t// Make it shrink when not active\n\t\t\tthis.style.flex = '0 0 auto'\n\t\t}\n\t}\n\n\t/**\n\t * Compute visual status for styling purposes. Note that if a step is explicitly\n\t * marked as completed, it always appears as complete even if it's active.\n\t */\n\tget status(): 'complete' | 'current' | 'upcoming' {\n\t\tif (this.completed || this.position < this.currentStep) return 'complete'\n\t\tif (this.position === this.currentStep) return 'current'\n\t\treturn 'upcoming'\n\t}\n\n\t/**\n\t * Click handler to allow navigation between completed (or active) steps.\n\t * With lockBack enabled, clicking on a previous step is ignored.\n\t */\n\tprivate _onStepClick(_e: Event) {\n\t\t// If lockBack is enabled and the user attempts to go back, do nothing.\n\t\tif (this.lockBack && this.position < this.currentStep) {\n\t\t\treturn\n\t\t}\n\t\tif (this.status !== 'upcoming') {\n\t\t\tthis.steps.setStep(this.position)\n\t\t}\n\t}\n\n\trender() {\n\t\t// Determine if the step is currently active.\n\t\tconst isActive = this.position === this.currentStep\n\n\t\t// Use computed status for visual styling.\n\t\tconst isComplete = this.status === 'complete'\n\t\tconst isUpcoming = this.status === 'upcoming'\n\n\t\t// Enhanced styling classes with better visual hierarchy\n\t\tconst connectorClasses = {\n\t\t\t'bg-tertiary-default': isComplete,\n\t\t\t'bg-outlineVariant': !isComplete,\n\t\t}\n\n\t\tconst iconContainerClasses = {\n\t\t\t'relative border-solid z-10 flex size-8 items-center justify-center rounded-full transition-all duration-200': true,\n\t\t\t'bg-tertiary-default text-tertiary-on shadow-md group-hover:shadow-lg': isComplete,\n\t\t\t'border-2 border-primary-default bg-primary-container text-primary-onContainer shadow-sm': !isComplete && isActive,\n\t\t\t'border-2 border-outline bg-surface-default text-surface-onVariant group-hover:border-primary-default group-hover:bg-primary-container': isUpcoming,\n\t\t}\n\n\t\tconst textClasses = {\n\t\t\t'text-primary-default font-medium': isActive,\n\t\t\t'text-tertiary-default': isComplete,\n\t\t\t'text-surface-onVariant': isUpcoming,\n\t\t}\n\n\t\t// If the step is clickable (active or complete), add a pointer cursor.\n\t\tconst clickableClass = isActive || isComplete ? 'cursor-pointer' : ''\n\n\t\treturn html`\n\t\t\t<li class=\"relative\">\n\t\t\t\t<!-- Connector line - responsive positioning -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"absolute top-8 left-3 sm:left-4 -ml-px w-0.5 transition-colors duration-200 ${this.classMap(connectorClasses)}\"\n\t\t\t\t\tstyle=\"height: calc(100% + var(--steps-gap, 0px))\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\n\t\t\t\t<!-- Step Button/Label - adjusted padding for mobile -->\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t@click=${this._onStepClick}\n\t\t\t\t\tclass=\"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'}\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"flex items-center h-10 sm:h-12\">\n\t\t\t\t\t\t<span class=${this.classMap(iconContainerClasses)}>\n\t\t\t\t\t\t\t${isComplete\n\t\t\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t\t\t<svg class=\"size-5 transition-transform duration-200 group-hover:scale-110\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\t\td=\"M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z\"\n\t\t\t\t\t\t\t\t\t\t\t\tclip-rule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t`\n\t\t\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"size-3 rounded-full transition-all duration-200 ${isActive\n\t\t\t\t\t\t\t\t\t\t\t\t? 'bg-primary-onContainer'\n\t\t\t\t\t\t\t\t\t\t\t\t: 'bg-transparent group-hover:bg-primary-default group-hover:scale-125'}\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t`}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\n\t\t\t\t\t<span class=\"flex flex-col items-start justify-center min-w-0 ml-3 sm:ml-6\">\n\t\t\t\t\t\t<schmancy-typography type=\"title\" token=\"md\">\n\t\t\t\t\t\t\t<span class=\"transition-colors duration-200 ${this.classMap(textClasses)}\">${this.title}</span>\n\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t${when(\n\t\t\t\t\t\t\tthis.description,\n\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t<schmancy-typography type=\"body\" token=\"sm\" class=\"mt-0.5 sm:mt-1\">\n\t\t\t\t\t\t\t\t\t<span class=\"text-surface-onVariant transition-colors duration-200 ${isActive ? 'text-primary-onContainer' : ''}\">${this.description}</span>\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\n\t\t\t\t<!-- Render step content if the step is active - responsive spacing -->\n\t\t\t\t${when(\n\t\t\t\t\tisActive,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div class=\"ml-6 sm:ml-10 mt-3 sm:mt-4 pb-6 sm:pb-8 transition-all duration-300 ease-out\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</li>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-step': SchmancyStep\n\t}\n}\n","import { provide } from '@lit/context'\nimport { $LitElement } from '@mixins/litElement.mixin'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { distinctUntilChanged, takeUntil, tap } from 'rxjs/operators'\nimport { StepsController, stepsContext } from './steps.context'\n\n/**\n * Custom event emitted when the current step changes.\n * The component stops propagation of bubbled 'change' events from child inputs\n * to prevent collision with the step change event.\n */\nexport type SchmancyStepsChangeEvent = CustomEvent<{ value: number }>\n\n@customElement('schmancy-steps-container')\nexport class SchmancyStepsContainer extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\toverflow: auto;\n\t}\n`) {\n\tprivate controller = new StepsController()\n\n\t@provide({ context: stepsContext })\n\tstepsController = this.controller\n\n\t@property({ type: Number, reflect: true })\n\tset currentStep(value: number) {\n\t\tconst oldValue = this.controller.currentStep\n\t\tif (oldValue !== value) {\n\t\t\tthis.controller.setStep(value)\n\t\t}\n\t}\n\n\tget currentStep(): number {\n\t\treturn this.controller.currentStep\n\t}\n\n\t/**\n\t * Gap between steps. Maps to Tailwind gap classes.\n\t * @default 4\n\t */\n\t@property({ type: Number, reflect: true })\n\tgap: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 = 4\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// React to controller changes (from property OR step clicks)\n\t\tthis.controller.currentStep$\n\t\t\t.pipe(\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(step => {\n\t\t\t\t\tthis.requestUpdate()\n\t\t\t\t\t// Use dispatchScopedEvent with bubbles: false to prevent collision\n\t\t\t\t\t// with 'change' events bubbling up from inputs inside steps\n\t\t\t\t\tthis.dispatchScopedEvent('change', { value: step }, { bubbles: false })\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\t/**\n\t * Handle change events - stop propagation of bubbled events from children.\n\t * This prevents form inputs inside steps from triggering the parent's @change handler.\n\t */\n\tprivate handleChange = (e: Event) => {\n\t\t// Only stop propagation if the event is NOT from this component\n\t\t// (i.e., it's bubbling up from a child element like an input)\n\t\tif (e.target !== this) {\n\t\t\te.stopPropagation()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst gapClass = `gap-${this.gap}`\n\t\tconst gapRem =\n\t\t\t{\n\t\t\t\t0: '0',\n\t\t\t\t1: '0.25rem',\n\t\t\t\t2: '0.5rem',\n\t\t\t\t3: '0.75rem',\n\t\t\t\t4: '1rem',\n\t\t\t\t5: '1.25rem',\n\t\t\t\t6: '1.5rem',\n\t\t\t\t8: '2rem',\n\t\t\t\t10: '2.5rem',\n\t\t\t\t12: '3rem',\n\t\t\t\t16: '4rem',\n\t\t\t\t20: '5rem',\n\t\t\t\t24: '6rem',\n\t\t\t}[this.gap] || '1rem'\n\n\t\treturn html`\n\t\t\t<nav class=\"flex h-full w-full\" aria-label=\"Progress\" @change=${this.handleChange}>\n\t\t\t\t<ol class=\"flex flex-col flex-1 ${gapClass}\" role=\"list\" style=\"--steps-gap: ${gapRem}\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ol>\n\t\t\t</nav>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-steps-container': SchmancyStepsContainer\n\t}\n}\n"],"mappings":"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"}

package/dist/steps.js

@@ -1,6 +1,7 @@
-import { i as e, o as t, s as n } from "./tailwind.mixin-BCJOOX1_.js";
-import { t as r } from "./provide-C1aQhxYo.js";
-import { t as i } from "./litElement.mixin-6jJYHCrZ.js";
+import { a as e, o as t } from "./tailwind.mixin-DufHBjmb.js";
+import { t as n } from "./provide-jn1Fj1vv.js";
+import { t as r } from "./decorate-D_utPUsC.js";
+import { t as i } from "./litElement.mixin-CncaUoxz.js";
 import { BehaviorSubject as a } from "rxjs";
 import { distinctUntilChanged as o, takeUntil as s, tap as c } from "rxjs/operators";
 import { customElement as l, property as u, state as d } from "lit/decorators.js";
@@ -19,7 +20,7 @@ var h = class {
 	setStep(e) {
 		this._currentStep.next(e);
 	}
-}, g = n(Symbol("SchmancyStepsContext")), _ = class extends i(f`
+}, g = t(Symbol("SchmancyStepsContext")), _ = class extends i(f`
 	:host {
 		display: grid;
 		/* Base display is just grid, flex properties will be applied dynamically */
@@ -118,10 +119,10 @@ var h = class {
 		`;
 	}
 };
-e([u({ type: Number })], _.prototype, "position", void 0), e([u({ type: String })], _.prototype, "title", void 0), e([u({ type: String })], _.prototype, "description", void 0), e([u({
+r([u({ type: Number })], _.prototype, "position", void 0), r([u({ type: String })], _.prototype, "title", void 0), r([u({ type: String })], _.prototype, "description", void 0), r([u({
 	type: Boolean,
 	reflect: !0
-})], _.prototype, "completed", void 0), e([u({ type: Boolean })], _.prototype, "lockBack", void 0), e([t({ context: g })], _.prototype, "steps", void 0), e([d()], _.prototype, "currentStep", void 0), _ = e([l("schmancy-step")], _);
+})], _.prototype, "completed", void 0), r([u({ type: Boolean })], _.prototype, "lockBack", void 0), r([e({ context: g })], _.prototype, "steps", void 0), r([d()], _.prototype, "currentStep", void 0), _ = r([l("schmancy-step")], _);
 var v = class extends i(f`
 	:host {
 		display: block;
@@ -169,11 +170,11 @@ var v = class extends i(f`
 		`;
 	}
 };
-e([r({ context: g })], v.prototype, "stepsController", void 0), e([u({
+r([n({ context: g })], v.prototype, "stepsController", void 0), r([u({
 	type: Number,
 	reflect: !0
-})], v.prototype, "currentStep", null), e([u({
+})], v.prototype, "currentStep", null), r([u({
 	type: Number,
 	reflect: !0
-})], v.prototype, "gap", void 0), v = e([l("schmancy-steps-container")], v);
+})], v.prototype, "gap", void 0), v = r([l("schmancy-steps-container")], v);
 export { _ as SchmancyStep, v as SchmancyStepsContainer, h as StepsController, g as stepsContext };

package/dist/steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"steps.js","names":[],"sources":["../src/steps/steps.context.ts","../src/steps/schmancy-step.ts","../src/steps/schmancy-steps-container.ts"],"sourcesContent":["import { createContext } from '@lit/context'\nimport { BehaviorSubject } from 'rxjs'\n\nexport class StepsController {\n\tprivate _currentStep = new BehaviorSubject(1)\n\n\tget currentStep$() {\n\t\treturn this._currentStep.asObservable()\n\t}\n\n\tget currentStep() {\n\t\treturn this._currentStep.value\n\t}\n\n\tsetStep(step: number) {\n\t\tthis._currentStep.next(step)\n\t}\n}\n\n/**\n * The actual context object. We provide/consume this in the container and steps.\n */\nexport const stepsContext = createContext<StepsController>(Symbol('SchmancyStepsContext'))\n","import { consume } from '@lit/context'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { Subscription } from 'rxjs'\nimport { stepsContext, StepsController } from './steps.context'\nimport { $LitElement } from '@mixins/litElement.mixin'\n\n@customElement('schmancy-step')\nexport class SchmancyStep extends $LitElement(css`\n\t:host {\n\t\tdisplay: grid;\n\t\t/* Base display is just grid, flex properties will be applied dynamically */\n\t\ttransition: all 0.2s ease-in-out;\n\t}\n`) {\n\t/**\n\t * The step's position (1-based). This is used to compare against\n\t * the container's current step to decide if it's \"complete\",\n\t * \"current\", or \"upcoming\".\n\t */\n\t@property({ type: Number }) position = 1\n\n\t@property({ type: String }) title = ''\n\t@property({ type: String }) description = ''\n\n\t// NEW: Allow a step to be explicitly marked as complete.\n\t@property({ type: Boolean, reflect: true }) completed = false\n\n\t/**\n\t * NEW: Lock API to disable users from going back.\n\t * When set to true, clicking on a previous (completed) step is ignored.\n\t */\n\t@property({ type: Boolean }) lockBack = false\n\n\t/**\n\t * Consume the shared StepsController from context.\n\t */\n\t@consume({ context: stepsContext })\n\tprivate steps!: StepsController\n\n\t/**\n\t * Local reactive copy of the container's current step number.\n\t */\n\t@state()\n\tprivate currentStep = 1\n\n\t/**\n\t * Keep a reference to our subscription so we can unsubscribe cleanly.\n\t */\n\tprivate subscription?: Subscription\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t}\n\n\tfirstUpdated() {\n\t\t// Subscribe to updates from the container's StepsController.\n\t\t// Context is guaranteed to be available after first render\n\t\tthis.subscription = this.steps.currentStep$.subscribe(step => {\n\t\t\tthis.currentStep = step\n\t\t\t// When the current step changes, update the flex properties\n\t\t\tthis.updateFlexProperties()\n\t\t})\n\t\t// Initial update of flex properties\n\t\tthis.updateFlexProperties()\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.subscription?.unsubscribe()\n\t\tsuper.disconnectedCallback()\n\t}\n\n\t/**\n\t * Update the host element's flex properties based on active state\n\t */\n\tprivate updateFlexProperties() {\n\t\tconst isActive = this.position === this.currentStep\n\n\t\tif (isActive) {\n\t\t\t// Apply flex-grow when active\n\t\t\tthis.style.flex = '1 1 auto'\n\t\t} else {\n\t\t\t// Make it shrink when not active\n\t\t\tthis.style.flex = '0 0 auto'\n\t\t}\n\t}\n\n\t/**\n\t * Compute visual status for styling purposes. Note that if a step is explicitly\n\t * marked as completed, it always appears as complete even if it's active.\n\t */\n\tget status(): 'complete' | 'current' | 'upcoming' {\n\t\tif (this.completed || this.position < this.currentStep) return 'complete'\n\t\tif (this.position === this.currentStep) return 'current'\n\t\treturn 'upcoming'\n\t}\n\n\t/**\n\t * Click handler to allow navigation between completed (or active) steps.\n\t * With lockBack enabled, clicking on a previous step is ignored.\n\t */\n\tprivate _onStepClick(_e: Event) {\n\t\t// If lockBack is enabled and the user attempts to go back, do nothing.\n\t\tif (this.lockBack && this.position < this.currentStep) {\n\t\t\treturn\n\t\t}\n\t\tif (this.status !== 'upcoming') {\n\t\t\tthis.steps.setStep(this.position)\n\t\t}\n\t}\n\n\trender() {\n\t\t// Determine if the step is currently active.\n\t\tconst isActive = this.position === this.currentStep\n\n\t\t// Use computed status for visual styling.\n\t\tconst isComplete = this.status === 'complete'\n\t\tconst isUpcoming = this.status === 'upcoming'\n\n\t\t// Enhanced styling classes with better visual hierarchy\n\t\tconst connectorClasses = {\n\t\t\t'bg-tertiary-default': isComplete,\n\t\t\t'bg-outlineVariant': !isComplete,\n\t\t}\n\n\t\tconst iconContainerClasses = {\n\t\t\t'relative border-solid z-10 flex size-8 items-center justify-center rounded-full transition-all duration-200': true,\n\t\t\t'bg-tertiary-default text-tertiary-on shadow-md group-hover:shadow-lg': isComplete,\n\t\t\t'border-2 border-primary-default bg-primary-container text-primary-onContainer shadow-sm': !isComplete && isActive,\n\t\t\t'border-2 border-outline bg-surface-default text-surface-onVariant group-hover:border-primary-default group-hover:bg-primary-container': isUpcoming,\n\t\t}\n\n\t\tconst textClasses = {\n\t\t\t'text-primary-default font-medium': isActive,\n\t\t\t'text-tertiary-default': isComplete,\n\t\t\t'text-surface-onVariant': isUpcoming,\n\t\t}\n\n\t\t// If the step is clickable (active or complete), add a pointer cursor.\n\t\tconst clickableClass = isActive || isComplete ? 'cursor-pointer' : ''\n\n\t\treturn html`\n\t\t\t<li class=\"relative\">\n\t\t\t\t<!-- Connector line - responsive positioning -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"absolute top-8 left-3 sm:left-4 -ml-px w-0.5 transition-colors duration-200 ${this.classMap(connectorClasses)}\"\n\t\t\t\t\tstyle=\"height: calc(100% + var(--steps-gap, 0px))\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\n\t\t\t\t<!-- Step Button/Label - adjusted padding for mobile -->\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t@click=${this._onStepClick}\n\t\t\t\t\tclass=\"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'}\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"flex items-center h-10 sm:h-12\">\n\t\t\t\t\t\t<span class=${this.classMap(iconContainerClasses)}>\n\t\t\t\t\t\t\t${isComplete\n\t\t\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t\t\t<svg class=\"size-5 transition-transform duration-200 group-hover:scale-110\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\t\td=\"M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z\"\n\t\t\t\t\t\t\t\t\t\t\t\tclip-rule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t`\n\t\t\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"size-3 rounded-full transition-all duration-200 ${isActive\n\t\t\t\t\t\t\t\t\t\t\t\t? 'bg-primary-onContainer'\n\t\t\t\t\t\t\t\t\t\t\t\t: 'bg-transparent group-hover:bg-primary-default group-hover:scale-125'}\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t`}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\n\t\t\t\t\t<span class=\"flex flex-col items-start justify-center min-w-0 ml-3 sm:ml-6\">\n\t\t\t\t\t\t<schmancy-typography type=\"title\" token=\"md\">\n\t\t\t\t\t\t\t<span class=\"transition-colors duration-200 ${this.classMap(textClasses)}\">${this.title}</span>\n\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t${when(\n\t\t\t\t\t\t\tthis.description,\n\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t<schmancy-typography type=\"body\" token=\"sm\" class=\"mt-0.5 sm:mt-1\">\n\t\t\t\t\t\t\t\t\t<span class=\"text-surface-onVariant transition-colors duration-200 ${isActive ? 'text-primary-onContainer' : ''}\">${this.description}</span>\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\n\t\t\t\t<!-- Render step content if the step is active - responsive spacing -->\n\t\t\t\t${when(\n\t\t\t\t\tisActive,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div class=\"ml-6 sm:ml-10 mt-3 sm:mt-4 pb-6 sm:pb-8 transition-all duration-300 ease-out\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</li>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-step': SchmancyStep\n\t}\n}\n","import { provide } from '@lit/context'\nimport { $LitElement } from '@mixins/litElement.mixin'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { distinctUntilChanged, takeUntil, tap } from 'rxjs/operators'\nimport { StepsController, stepsContext } from './steps.context'\n\n/**\n * Custom event emitted when the current step changes.\n * The component stops propagation of bubbled 'change' events from child inputs\n * to prevent collision with the step change event.\n */\nexport type SchmancyStepsChangeEvent = CustomEvent<{ value: number }>\n\n@customElement('schmancy-steps-container')\nexport class SchmancyStepsContainer extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\toverflow: auto;\n\t}\n`) {\n\tprivate controller = new StepsController()\n\n\t@provide({ context: stepsContext })\n\tstepsController = this.controller\n\n\t@property({ type: Number, reflect: true })\n\tset currentStep(value: number) {\n\t\tconst oldValue = this.controller.currentStep\n\t\tif (oldValue !== value) {\n\t\t\tthis.controller.setStep(value)\n\t\t}\n\t}\n\n\tget currentStep(): number {\n\t\treturn this.controller.currentStep\n\t}\n\n\t/**\n\t * Gap between steps. Maps to Tailwind gap classes.\n\t * @default 4\n\t */\n\t@property({ type: Number, reflect: true })\n\tgap: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 = 4\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// React to controller changes (from property OR step clicks)\n\t\tthis.controller.currentStep$\n\t\t\t.pipe(\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(step => {\n\t\t\t\t\tthis.requestUpdate()\n\t\t\t\t\t// Use dispatchScopedEvent with bubbles: false to prevent collision\n\t\t\t\t\t// with 'change' events bubbling up from inputs inside steps\n\t\t\t\t\tthis.dispatchScopedEvent('change', { value: step }, { bubbles: false })\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\t/**\n\t * Handle change events - stop propagation of bubbled events from children.\n\t * This prevents form inputs inside steps from triggering the parent's @change handler.\n\t */\n\tprivate handleChange = (e: Event) => {\n\t\t// Only stop propagation if the event is NOT from this component\n\t\t// (i.e., it's bubbling up from a child element like an input)\n\t\tif (e.target !== this) {\n\t\t\te.stopPropagation()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst gapClass = `gap-${this.gap}`\n\t\tconst gapRem =\n\t\t\t{\n\t\t\t\t0: '0',\n\t\t\t\t1: '0.25rem',\n\t\t\t\t2: '0.5rem',\n\t\t\t\t3: '0.75rem',\n\t\t\t\t4: '1rem',\n\t\t\t\t5: '1.25rem',\n\t\t\t\t6: '1.5rem',\n\t\t\t\t8: '2rem',\n\t\t\t\t10: '2.5rem',\n\t\t\t\t12: '3rem',\n\t\t\t\t16: '4rem',\n\t\t\t\t20: '5rem',\n\t\t\t\t24: '6rem',\n\t\t\t}[this.gap] || '1rem'\n\n\t\treturn html`\n\t\t\t<nav class=\"flex h-full w-full\" aria-label=\"Progress\" @change=${this.handleChange}>\n\t\t\t\t<ol class=\"flex flex-col flex-1 ${gapClass}\" role=\"list\" style=\"--steps-gap: ${gapRem}\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ol>\n\t\t\t</nav>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-steps-container': SchmancyStepsContainer\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"steps.js","names":[],"sources":["../src/steps/steps.context.ts","../src/steps/schmancy-step.ts","../src/steps/schmancy-steps-container.ts"],"sourcesContent":["import { createContext } from '@lit/context'\nimport { BehaviorSubject } from 'rxjs'\n\nexport class StepsController {\n\tprivate _currentStep = new BehaviorSubject(1)\n\n\tget currentStep$() {\n\t\treturn this._currentStep.asObservable()\n\t}\n\n\tget currentStep() {\n\t\treturn this._currentStep.value\n\t}\n\n\tsetStep(step: number) {\n\t\tthis._currentStep.next(step)\n\t}\n}\n\n/**\n * The actual context object. We provide/consume this in the container and steps.\n */\nexport const stepsContext = createContext<StepsController>(Symbol('SchmancyStepsContext'))\n","import { consume } from '@lit/context'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { Subscription } from 'rxjs'\nimport { stepsContext, StepsController } from './steps.context'\nimport { $LitElement } from '@mixins/litElement.mixin'\n\n@customElement('schmancy-step')\nexport class SchmancyStep extends $LitElement(css`\n\t:host {\n\t\tdisplay: grid;\n\t\t/* Base display is just grid, flex properties will be applied dynamically */\n\t\ttransition: all 0.2s ease-in-out;\n\t}\n`) {\n\t/**\n\t * The step's position (1-based). This is used to compare against\n\t * the container's current step to decide if it's \"complete\",\n\t * \"current\", or \"upcoming\".\n\t */\n\t@property({ type: Number }) position = 1\n\n\t@property({ type: String }) title = ''\n\t@property({ type: String }) description = ''\n\n\t// NEW: Allow a step to be explicitly marked as complete.\n\t@property({ type: Boolean, reflect: true }) completed = false\n\n\t/**\n\t * NEW: Lock API to disable users from going back.\n\t * When set to true, clicking on a previous (completed) step is ignored.\n\t */\n\t@property({ type: Boolean }) lockBack = false\n\n\t/**\n\t * Consume the shared StepsController from context.\n\t */\n\t@consume({ context: stepsContext })\n\tprivate steps!: StepsController\n\n\t/**\n\t * Local reactive copy of the container's current step number.\n\t */\n\t@state()\n\tprivate currentStep = 1\n\n\t/**\n\t * Keep a reference to our subscription so we can unsubscribe cleanly.\n\t */\n\tprivate subscription?: Subscription\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t}\n\n\tfirstUpdated() {\n\t\t// Subscribe to updates from the container's StepsController.\n\t\t// Context is guaranteed to be available after first render\n\t\tthis.subscription = this.steps.currentStep$.subscribe(step => {\n\t\t\tthis.currentStep = step\n\t\t\t// When the current step changes, update the flex properties\n\t\t\tthis.updateFlexProperties()\n\t\t})\n\t\t// Initial update of flex properties\n\t\tthis.updateFlexProperties()\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.subscription?.unsubscribe()\n\t\tsuper.disconnectedCallback()\n\t}\n\n\t/**\n\t * Update the host element's flex properties based on active state\n\t */\n\tprivate updateFlexProperties() {\n\t\tconst isActive = this.position === this.currentStep\n\n\t\tif (isActive) {\n\t\t\t// Apply flex-grow when active\n\t\t\tthis.style.flex = '1 1 auto'\n\t\t} else {\n\t\t\t// Make it shrink when not active\n\t\t\tthis.style.flex = '0 0 auto'\n\t\t}\n\t}\n\n\t/**\n\t * Compute visual status for styling purposes. Note that if a step is explicitly\n\t * marked as completed, it always appears as complete even if it's active.\n\t */\n\tget status(): 'complete' | 'current' | 'upcoming' {\n\t\tif (this.completed || this.position < this.currentStep) return 'complete'\n\t\tif (this.position === this.currentStep) return 'current'\n\t\treturn 'upcoming'\n\t}\n\n\t/**\n\t * Click handler to allow navigation between completed (or active) steps.\n\t * With lockBack enabled, clicking on a previous step is ignored.\n\t */\n\tprivate _onStepClick(_e: Event) {\n\t\t// If lockBack is enabled and the user attempts to go back, do nothing.\n\t\tif (this.lockBack && this.position < this.currentStep) {\n\t\t\treturn\n\t\t}\n\t\tif (this.status !== 'upcoming') {\n\t\t\tthis.steps.setStep(this.position)\n\t\t}\n\t}\n\n\trender() {\n\t\t// Determine if the step is currently active.\n\t\tconst isActive = this.position === this.currentStep\n\n\t\t// Use computed status for visual styling.\n\t\tconst isComplete = this.status === 'complete'\n\t\tconst isUpcoming = this.status === 'upcoming'\n\n\t\t// Enhanced styling classes with better visual hierarchy\n\t\tconst connectorClasses = {\n\t\t\t'bg-tertiary-default': isComplete,\n\t\t\t'bg-outlineVariant': !isComplete,\n\t\t}\n\n\t\tconst iconContainerClasses = {\n\t\t\t'relative border-solid z-10 flex size-8 items-center justify-center rounded-full transition-all duration-200': true,\n\t\t\t'bg-tertiary-default text-tertiary-on shadow-md group-hover:shadow-lg': isComplete,\n\t\t\t'border-2 border-primary-default bg-primary-container text-primary-onContainer shadow-sm': !isComplete && isActive,\n\t\t\t'border-2 border-outline bg-surface-default text-surface-onVariant group-hover:border-primary-default group-hover:bg-primary-container': isUpcoming,\n\t\t}\n\n\t\tconst textClasses = {\n\t\t\t'text-primary-default font-medium': isActive,\n\t\t\t'text-tertiary-default': isComplete,\n\t\t\t'text-surface-onVariant': isUpcoming,\n\t\t}\n\n\t\t// If the step is clickable (active or complete), add a pointer cursor.\n\t\tconst clickableClass = isActive || isComplete ? 'cursor-pointer' : ''\n\n\t\treturn html`\n\t\t\t<li class=\"relative\">\n\t\t\t\t<!-- Connector line - responsive positioning -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"absolute top-8 left-3 sm:left-4 -ml-px w-0.5 transition-colors duration-200 ${this.classMap(connectorClasses)}\"\n\t\t\t\t\tstyle=\"height: calc(100% + var(--steps-gap, 0px))\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\n\t\t\t\t<!-- Step Button/Label - adjusted padding for mobile -->\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t@click=${this._onStepClick}\n\t\t\t\t\tclass=\"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'}\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"flex items-center h-10 sm:h-12\">\n\t\t\t\t\t\t<span class=${this.classMap(iconContainerClasses)}>\n\t\t\t\t\t\t\t${isComplete\n\t\t\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t\t\t<svg class=\"size-5 transition-transform duration-200 group-hover:scale-110\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\t\td=\"M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z\"\n\t\t\t\t\t\t\t\t\t\t\t\tclip-rule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t`\n\t\t\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"size-3 rounded-full transition-all duration-200 ${isActive\n\t\t\t\t\t\t\t\t\t\t\t\t? 'bg-primary-onContainer'\n\t\t\t\t\t\t\t\t\t\t\t\t: 'bg-transparent group-hover:bg-primary-default group-hover:scale-125'}\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t`}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\n\t\t\t\t\t<span class=\"flex flex-col items-start justify-center min-w-0 ml-3 sm:ml-6\">\n\t\t\t\t\t\t<schmancy-typography type=\"title\" token=\"md\">\n\t\t\t\t\t\t\t<span class=\"transition-colors duration-200 ${this.classMap(textClasses)}\">${this.title}</span>\n\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t${when(\n\t\t\t\t\t\t\tthis.description,\n\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t<schmancy-typography type=\"body\" token=\"sm\" class=\"mt-0.5 sm:mt-1\">\n\t\t\t\t\t\t\t\t\t<span class=\"text-surface-onVariant transition-colors duration-200 ${isActive ? 'text-primary-onContainer' : ''}\">${this.description}</span>\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\n\t\t\t\t<!-- Render step content if the step is active - responsive spacing -->\n\t\t\t\t${when(\n\t\t\t\t\tisActive,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div class=\"ml-6 sm:ml-10 mt-3 sm:mt-4 pb-6 sm:pb-8 transition-all duration-300 ease-out\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</li>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-step': SchmancyStep\n\t}\n}\n","import { provide } from '@lit/context'\nimport { $LitElement } from '@mixins/litElement.mixin'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { distinctUntilChanged, takeUntil, tap } from 'rxjs/operators'\nimport { StepsController, stepsContext } from './steps.context'\n\n/**\n * Custom event emitted when the current step changes.\n * The component stops propagation of bubbled 'change' events from child inputs\n * to prevent collision with the step change event.\n */\nexport type SchmancyStepsChangeEvent = CustomEvent<{ value: number }>\n\n@customElement('schmancy-steps-container')\nexport class SchmancyStepsContainer extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\toverflow: auto;\n\t}\n`) {\n\tprivate controller = new StepsController()\n\n\t@provide({ context: stepsContext })\n\tstepsController = this.controller\n\n\t@property({ type: Number, reflect: true })\n\tset currentStep(value: number) {\n\t\tconst oldValue = this.controller.currentStep\n\t\tif (oldValue !== value) {\n\t\t\tthis.controller.setStep(value)\n\t\t}\n\t}\n\n\tget currentStep(): number {\n\t\treturn this.controller.currentStep\n\t}\n\n\t/**\n\t * Gap between steps. Maps to Tailwind gap classes.\n\t * @default 4\n\t */\n\t@property({ type: Number, reflect: true })\n\tgap: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 = 4\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// React to controller changes (from property OR step clicks)\n\t\tthis.controller.currentStep$\n\t\t\t.pipe(\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(step => {\n\t\t\t\t\tthis.requestUpdate()\n\t\t\t\t\t// Use dispatchScopedEvent with bubbles: false to prevent collision\n\t\t\t\t\t// with 'change' events bubbling up from inputs inside steps\n\t\t\t\t\tthis.dispatchScopedEvent('change', { value: step }, { bubbles: false })\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\t/**\n\t * Handle change events - stop propagation of bubbled events from children.\n\t * This prevents form inputs inside steps from triggering the parent's @change handler.\n\t */\n\tprivate handleChange = (e: Event) => {\n\t\t// Only stop propagation if the event is NOT from this component\n\t\t// (i.e., it's bubbling up from a child element like an input)\n\t\tif (e.target !== this) {\n\t\t\te.stopPropagation()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst gapClass = `gap-${this.gap}`\n\t\tconst gapRem =\n\t\t\t{\n\t\t\t\t0: '0',\n\t\t\t\t1: '0.25rem',\n\t\t\t\t2: '0.5rem',\n\t\t\t\t3: '0.75rem',\n\t\t\t\t4: '1rem',\n\t\t\t\t5: '1.25rem',\n\t\t\t\t6: '1.5rem',\n\t\t\t\t8: '2rem',\n\t\t\t\t10: '2.5rem',\n\t\t\t\t12: '3rem',\n\t\t\t\t16: '4rem',\n\t\t\t\t20: '5rem',\n\t\t\t\t24: '6rem',\n\t\t\t}[this.gap] || '1rem'\n\n\t\treturn html`\n\t\t\t<nav class=\"flex h-full w-full\" aria-label=\"Progress\" @change=${this.handleChange}>\n\t\t\t\t<ol class=\"flex flex-col flex-1 ${gapClass}\" role=\"list\" style=\"--steps-gap: ${gapRem}\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ol>\n\t\t\t</nav>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-steps-container': SchmancyStepsContainer\n\t}\n}\n"],"mappings":"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"}