@mhmo91/schmancy 0.4.64 → 0.4.66

package/dist/{schmancy-steps-container-Dy5nQd7h.cjs → schmancy-steps-container-BLLfmYBF.cjs}

@@ -1,14 +1,15 @@
-"use strict";const S=require("./consume-edta5ng5.cjs"),c=require("lit"),i=require("lit/decorators.js"),h=require("lit/directives/when.js"),y=require("./litElement.mixin-CNI7suiz.cjs"),m=require("./provide-BxZ2kn_p.cjs"),b=require("rxjs");class d{constructor(){this._currentStep=new b.BehaviorSubject(1)}get currentStep$(){return this._currentStep.asObservable()}get currentStep(){return this._currentStep.value}setStep(e){this._currentStep.next(e)}}const u=m.n(Symbol("SchmancyStepsContext"));var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,p=(t,e,n,s)=>{for(var o,r=s>1?void 0:s?f(e,n):e,a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s?o(e,n,r):o(r))||r);return s&&r&&g(e,n,r),r};exports.SchmancyStep=class extends y.$LitElement(c.css`
+"use strict";const S=require("./consume-edta5ng5.cjs"),c=require("lit"),i=require("lit/decorators.js"),h=require("lit/directives/when.js"),m=require("./litElement.mixin-CNI7suiz.cjs"),y=require("./provide-BxZ2kn_p.cjs"),g=require("rxjs");class d{constructor(){this._currentStep=new g.BehaviorSubject(1)}get currentStep$(){return this._currentStep.asObservable()}get currentStep(){return this._currentStep.value}setStep(e){this._currentStep.next(e)}}const u=y.n(Symbol("SchmancyStepsContext"));var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,p=(t,e,n,s)=>{for(var o,r=s>1?void 0:s?f(e,n):e,a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s?o(e,n,r):o(r))||r);return s&&r&&b(e,n,r),r};exports.SchmancyStep=class extends m.$LitElement(c.css`
 	:host {
 		display: grid;
 		/* Base display is just grid, flex properties will be applied dynamically */
 		transition: all 0.2s ease-in-out;
 	}
-`){constructor(){super(...arguments),this.position=1,this.title="",this.description="",this.completed=!1,this.lockBack=!1,this.currentStep=1}connectedCallback(){super.connectedCallback(),this.subscription=this.steps.currentStep$.subscribe(t=>{this.currentStep=t,this.updateFlexProperties()}),this.updateFlexProperties()}disconnectedCallback(){this.subscription?.unsubscribe(),super.disconnectedCallback()}updateFlexProperties(){const t=this.position===this.currentStep;this.style.flex=t?"1 1 auto":"0 0 auto"}get status(){return this.completed||this.position<this.steps.currentStep?"complete":this.position===this.steps.currentStep?"current":"upcoming"}_onStepClick(t){this.lockBack&&this.position<this.steps.currentStep||this.status!=="upcoming"&&this.steps.setStep(this.position)}render(){const t=this.position===this.currentStep,e=this.status==="complete",n=this.status==="upcoming",s={"bg-tertiary-default":e,"bg-outline-variant":!e},o={"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":e,"border-2 border-primary-default bg-primary-container text-primary-onContainer shadow-sm":!e&&t,"border-2 border-outline bg-surface text-surface-onVariant group-hover:border-primary-default group-hover:bg-primary-container":n},r={"text-primary-default font-medium":t,"text-tertiary-default":e,"text-surface-onVariant":n},a=t||e?"cursor-pointer":"";return c.html`
+`){constructor(){super(...arguments),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(t=>{this.currentStep=t,this.updateFlexProperties()}),this.updateFlexProperties()}disconnectedCallback(){this.subscription?.unsubscribe(),super.disconnectedCallback()}updateFlexProperties(){const t=this.position===this.currentStep;this.style.flex=t?"1 1 auto":"0 0 auto"}get status(){return this.completed||this.position<this.steps.currentStep?"complete":this.position===this.steps.currentStep?"current":"upcoming"}_onStepClick(t){this.lockBack&&this.position<this.steps.currentStep||this.status!=="upcoming"&&this.steps.setStep(this.position)}render(){const t=this.position===this.currentStep,e=this.status==="complete",n=this.status==="upcoming",s={"bg-tertiary-default":e,"bg-outline-variant":!e},o={"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":e,"border-2 border-primary-default bg-primary-container text-primary-onContainer shadow-sm":!e&&t,"border-2 border-outline bg-surface-default text-surface-onVariant group-hover:border-primary-default group-hover:bg-primary-container":n},r={"text-primary-default font-medium":t,"text-tertiary-default":e,"text-surface-onVariant":n},a=t||e?"cursor-pointer":"";return c.html`
 			<li class="relative">
 				<!-- Connector line -->
 				<div
-					class="absolute top-8 left-4 -ml-px h-full w-0.5 transition-colors duration-200 ${this.classMap(s)}"
+					class="absolute top-8 left-4 -ml-px w-0.5 transition-colors duration-200 ${this.classMap(s)}"
+					style="height: calc(100% + var(--steps-gap, 0px))"
 					aria-hidden="true"
 				></div>
 
@@ -16,7 +17,7 @@
 				<button 
 					type="button" 
 					@click=${this._onStepClick} 
-					class="relative flex items-start group transition-all duration-200 hover:scale-[1.02] ${a} ${t?"bg-primary-container/20 -mx-2 px-2 py-3 rounded-lg":"py-2"}"
+					class="relative flex items-center group transition-all duration-200 hover:scale-[1.02] ${a} ${t?"bg-primary-container/20 -mx-2 px-2 py-3 rounded-lg":"py-2"}"
 				>
 					<span class="flex items-center h-12">
 						<span class=${this.classMap(o)}>
@@ -36,7 +37,7 @@
 						</span>
 					</span>
 
-					<span class="flex flex-col items-start min-w-0 ml-6">
+					<span class="flex flex-col items-start justify-center min-w-0 ml-6">
 						<schmancy-typography type="title" token="md">
 							<span class="transition-colors duration-200 ${this.classMap(r)}">${this.title}</span>
 						</schmancy-typography>
@@ -57,15 +58,15 @@
 						</div>
 					`)}
 			</li>
-		`}},p([i.property({type:Number})],exports.SchmancyStep.prototype,"position",2),p([i.property({type:String})],exports.SchmancyStep.prototype,"title",2),p([i.property({type:String})],exports.SchmancyStep.prototype,"description",2),p([i.property({type:Boolean,reflect:!0})],exports.SchmancyStep.prototype,"completed",2),p([i.property({type:Boolean})],exports.SchmancyStep.prototype,"lockBack",2),p([S.c({context:u})],exports.SchmancyStep.prototype,"steps",2),p([i.state()],exports.SchmancyStep.prototype,"currentStep",2),exports.SchmancyStep=p([i.customElement("schmancy-step")],exports.SchmancyStep);var v=Object.defineProperty,x=Object.getOwnPropertyDescriptor,l=(t,e,n,s)=>{for(var o,r=s>1?void 0:s?x(e,n):e,a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s?o(e,n,r):o(r))||r);return s&&r&&v(e,n,r),r};exports.SchmancyStepsContainer=class extends y.$LitElement(c.css`
+		`}},p([i.property({type:Number})],exports.SchmancyStep.prototype,"position",2),p([i.property({type:String})],exports.SchmancyStep.prototype,"title",2),p([i.property({type:String})],exports.SchmancyStep.prototype,"description",2),p([i.property({type:Boolean,reflect:!0})],exports.SchmancyStep.prototype,"completed",2),p([i.property({type:Boolean})],exports.SchmancyStep.prototype,"lockBack",2),p([S.c({context:u})],exports.SchmancyStep.prototype,"steps",2),p([i.state()],exports.SchmancyStep.prototype,"currentStep",2),exports.SchmancyStep=p([i.customElement("schmancy-step")],exports.SchmancyStep);var v=Object.defineProperty,x=Object.getOwnPropertyDescriptor,l=(t,e,n,s)=>{for(var o,r=s>1?void 0:s?x(e,n):e,a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s?o(e,n,r):o(r))||r);return s&&r&&v(e,n,r),r};exports.SchmancyStepsContainer=class extends m.$LitElement(c.css`
 	:host {
 		display: block;
 	}
-`){constructor(){super(...arguments),this.controller=new d,this.stepsController=this.controller,this._currentStep=1,this.gap=4}set currentStep(t){const e=this._currentStep;this._currentStep=t,this.controller.setStep(t),this.requestUpdate("currentStep",e)}get currentStep(){return this._currentStep}connectedCallback(){super.connectedCallback(),this.controller.setStep(this.currentStep)}render(){const t=`gap-${this.gap}`;return c.html`
+`){constructor(){super(...arguments),this.controller=new d,this.stepsController=this.controller,this._currentStep=1,this.gap=4}set currentStep(t){const e=this._currentStep;this._currentStep=t,this.controller.setStep(t),this.requestUpdate("currentStep",e)}get currentStep(){return this._currentStep}connectedCallback(){super.connectedCallback(),this.controller.setStep(this.currentStep)}render(){const t=`gap-${this.gap}`,e={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 c.html`
 			<nav class="flex h-full w-full" aria-label="Progress">
-				<ol class="flex flex-col flex-1 ${t}" role="list">
+				<ol class="flex flex-col flex-1 ${t}" role="list" style="--steps-gap: ${e}">
 					<slot></slot>
 				</ol>
 			</nav>
-		`}},l([m.e({context:u})],exports.SchmancyStepsContainer.prototype,"stepsController",2),l([i.property({type:Number,reflect:!0})],exports.SchmancyStepsContainer.prototype,"currentStep",1),l([i.property({type:Number,reflect:!0})],exports.SchmancyStepsContainer.prototype,"gap",2),exports.SchmancyStepsContainer=l([i.customElement("schmancy-steps-container")],exports.SchmancyStepsContainer),exports.StepsController=d,exports.stepsContext=u;
-//# sourceMappingURL=schmancy-steps-container-Dy5nQd7h.cjs.map
+		`}},l([y.e({context:u})],exports.SchmancyStepsContainer.prototype,"stepsController",2),l([i.property({type:Number,reflect:!0})],exports.SchmancyStepsContainer.prototype,"currentStep",1),l([i.property({type:Number,reflect:!0})],exports.SchmancyStepsContainer.prototype,"gap",2),exports.SchmancyStepsContainer=l([i.customElement("schmancy-steps-container")],exports.SchmancyStepsContainer),exports.StepsController=d,exports.stepsContext=u;
+//# sourceMappingURL=schmancy-steps-container-BLLfmYBF.cjs.map

package/dist/schmancy-steps-container-BLLfmYBF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"schmancy-steps-container-BLLfmYBF.cjs","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.steps.currentStep) return 'complete'\n\t\tif (this.position === this.steps.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.steps.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-outline-variant': !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 -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"absolute top-8 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 -->\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-2 px-2 py-3 rounded-lg' : 'py-2'}\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"flex items-center 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-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-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, with enhanced 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-10 mt-4 pb-8 transition-all duration-300 ease-out\">\n\t\t\t\t\t\t\t<div class=\"pl-4 border-l-2 border-primary-default/20\">\n\t\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t\t</div>\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 { StepsController, stepsContext } from './steps.context'\n\n@customElement('schmancy-steps-container')\nexport class SchmancyStepsContainer extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\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._currentStep\n\t\tthis._currentStep = value\n\t\tthis.controller.setStep(value)\n\t\tthis.requestUpdate('currentStep', oldValue)\n\t}\n\n\tget currentStep(): number {\n\t\treturn this._currentStep\n\t}\n\n\tprivate _currentStep = 1\n\n\t/**\n\t * Gap between steps. Maps to Tailwind gap classes.\n\t * Options: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24\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\t\tthis.controller.setStep(this.currentStep)\n\t}\n\n\trender() {\n\t\t// Map gap value to Tailwind gap class\n\t\tconst gapClass = `gap-${this.gap}`\n\t\t\n\t\t// Map gap value to actual rem value for CSS custom property\n\t\t// Tailwind gap scale: 1 = 0.25rem, 2 = 0.5rem, etc.\n\t\tconst gapRem = {\n\t\t\t0: '0',\n\t\t\t1: '0.25rem',\n\t\t\t2: '0.5rem',\n\t\t\t3: '0.75rem',\n\t\t\t4: '1rem',\n\t\t\t5: '1.25rem',\n\t\t\t6: '1.5rem',\n\t\t\t8: '2rem',\n\t\t\t10: '2.5rem',\n\t\t\t12: '3rem',\n\t\t\t16: '4rem',\n\t\t\t20: '5rem',\n\t\t\t24: '6rem'\n\t\t}[this.gap] || '1rem'\n\t\t\n\t\treturn html`\n\t\t\t<nav class=\"flex h-full w-full\" aria-label=\"Progress\">\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"],"names":["StepsController","constructor","this","_currentStep","BehaviorSubject","currentStep$","asObservable","currentStep","value","step","next","stepsContext","createContext","Symbol","SchmancyStep","$LitElement","css","super","arguments","position","title","description","completed","lockBack","connectedCallback","firstUpdated","subscription","steps","subscribe","updateFlexProperties","disconnectedCallback","unsubscribe","isActive","style","flex","_e","status","setStep","render","isComplete","isUpcoming","connectorClasses","iconContainerClasses","textClasses","clickableClass","html","classMap","_onStepClick","when","__decorateClass","property","type","Number","prototype","String","Boolean","reflect","consume","context","state","customElement","SchmancyStepsContainer","controller","stepsController","gap","oldValue","requestUpdate","gapClass","gapRem","provide"],"mappings":"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"}

package/dist/{schmancy-steps-container-BIw2HFCz.js → schmancy-steps-container-Be0uKWP8.js}

@@ -1,13 +1,13 @@
-import { c as g } from "./consume-5D1qfVWM.js";
+import { c as f } from "./consume-5D1qfVWM.js";
 import { css as m, html as c } from "lit";
 import { property as l, state as S, customElement as y } from "lit/decorators.js";
 import { when as d } from "lit/directives/when.js";
 import { $ as b } from "./litElement.mixin-D0rbA0NW.js";
 import { n as v, e as x } from "./provide-tcktw8xB.js";
-import { BehaviorSubject as k } from "rxjs";
-class $ {
+import { BehaviorSubject as $ } from "rxjs";
+class k {
   constructor() {
-    this._currentStep = new k(1);
+    this._currentStep = new $(1);
   }
   get currentStep$() {
     return this._currentStep.asObservable();
@@ -19,7 +19,7 @@ class $ {
     this._currentStep.next(e);
   }
 }
-const f = v(Symbol("SchmancyStepsContext"));
+const g = v(Symbol("SchmancyStepsContext"));
 var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, p = (t, e, o, s) => {
   for (var i, r = s > 1 ? void 0 : s ? w(e, o) : e, n = t.length - 1; n >= 0; n--) (i = t[n]) && (r = (s ? i(e, o, r) : i(r)) || r);
   return s && r && C(e, o, r), r;
@@ -35,7 +35,10 @@ let a = class extends b(m`
     super(...arguments), this.position = 1, this.title = "", this.description = "", this.completed = !1, this.lockBack = !1, this.currentStep = 1;
   }
   connectedCallback() {
-    super.connectedCallback(), this.subscription = this.steps.currentStep$.subscribe((t) => {
+    super.connectedCallback();
+  }
+  firstUpdated() {
+    this.subscription = this.steps.currentStep$.subscribe((t) => {
       this.currentStep = t, this.updateFlexProperties();
     }), this.updateFlexProperties();
   }
@@ -53,12 +56,13 @@ let a = class extends b(m`
     this.lockBack && this.position < this.steps.currentStep || this.status !== "upcoming" && this.steps.setStep(this.position);
   }
   render() {
-    const t = this.position === this.currentStep, e = this.status === "complete", o = this.status === "upcoming", s = { "bg-tertiary-default": e, "bg-outline-variant": !e }, 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": e, "border-2 border-primary-default bg-primary-container text-primary-onContainer shadow-sm": !e && t, "border-2 border-outline bg-surface text-surface-onVariant group-hover:border-primary-default group-hover:bg-primary-container": o }, r = { "text-primary-default font-medium": t, "text-tertiary-default": e, "text-surface-onVariant": o }, n = t || e ? "cursor-pointer" : "";
+    const t = this.position === this.currentStep, e = this.status === "complete", o = this.status === "upcoming", s = { "bg-tertiary-default": e, "bg-outline-variant": !e }, 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": e, "border-2 border-primary-default bg-primary-container text-primary-onContainer shadow-sm": !e && t, "border-2 border-outline bg-surface-default text-surface-onVariant group-hover:border-primary-default group-hover:bg-primary-container": o }, r = { "text-primary-default font-medium": t, "text-tertiary-default": e, "text-surface-onVariant": o }, n = t || e ? "cursor-pointer" : "";
     return c`
 			<li class="relative">
 				<!-- Connector line -->
 				<div
-					class="absolute top-8 left-4 -ml-px h-full w-0.5 transition-colors duration-200 ${this.classMap(s)}"
+					class="absolute top-8 left-4 -ml-px w-0.5 transition-colors duration-200 ${this.classMap(s)}"
+					style="height: calc(100% + var(--steps-gap, 0px))"
 					aria-hidden="true"
 				></div>
 
@@ -66,7 +70,7 @@ let a = class extends b(m`
 				<button 
 					type="button" 
 					@click=${this._onStepClick} 
-					class="relative flex items-start group transition-all duration-200 hover:scale-[1.02] ${n} ${t ? "bg-primary-container/20 -mx-2 px-2 py-3 rounded-lg" : "py-2"}"
+					class="relative flex items-center group transition-all duration-200 hover:scale-[1.02] ${n} ${t ? "bg-primary-container/20 -mx-2 px-2 py-3 rounded-lg" : "py-2"}"
 				>
 					<span class="flex items-center h-12">
 						<span class=${this.classMap(i)}>
@@ -86,7 +90,7 @@ let a = class extends b(m`
 						</span>
 					</span>
 
-					<span class="flex flex-col items-start min-w-0 ml-6">
+					<span class="flex flex-col items-start justify-center min-w-0 ml-6">
 						<schmancy-typography type="title" token="md">
 							<span class="transition-colors duration-200 ${this.classMap(r)}">${this.title}</span>
 						</schmancy-typography>
@@ -110,7 +114,7 @@ let a = class extends b(m`
 		`;
   }
 };
-p([l({ type: Number })], a.prototype, "position", 2), p([l({ type: String })], a.prototype, "title", 2), p([l({ type: String })], a.prototype, "description", 2), p([l({ type: Boolean, reflect: !0 })], a.prototype, "completed", 2), p([l({ type: Boolean })], a.prototype, "lockBack", 2), p([g({ context: f })], a.prototype, "steps", 2), p([S()], a.prototype, "currentStep", 2), a = p([y("schmancy-step")], a);
+p([l({ type: Number })], a.prototype, "position", 2), p([l({ type: String })], a.prototype, "title", 2), p([l({ type: String })], a.prototype, "description", 2), p([l({ type: Boolean, reflect: !0 })], a.prototype, "completed", 2), p([l({ type: Boolean })], a.prototype, "lockBack", 2), p([f({ context: g })], a.prototype, "steps", 2), p([S()], a.prototype, "currentStep", 2), a = p([y("schmancy-step")], a);
 var _ = Object.defineProperty, B = Object.getOwnPropertyDescriptor, h = (t, e, o, s) => {
   for (var i, r = s > 1 ? void 0 : s ? B(e, o) : e, n = t.length - 1; n >= 0; n--) (i = t[n]) && (r = (s ? i(e, o, r) : i(r)) || r);
   return s && r && _(e, o, r), r;
@@ -121,7 +125,7 @@ let u = class extends b(m`
 	}
 `) {
   constructor() {
-    super(...arguments), this.controller = new $(), this.stepsController = this.controller, this._currentStep = 1, this.gap = 4;
+    super(...arguments), this.controller = new k(), this.stepsController = this.controller, this._currentStep = 1, this.gap = 4;
   }
   set currentStep(t) {
     const e = this._currentStep;
@@ -134,21 +138,21 @@ let u = class extends b(m`
     super.connectedCallback(), this.controller.setStep(this.currentStep);
   }
   render() {
-    const t = `gap-${this.gap}`;
+    const t = `gap-${this.gap}`, e = { 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 c`
 			<nav class="flex h-full w-full" aria-label="Progress">
-				<ol class="flex flex-col flex-1 ${t}" role="list">
+				<ol class="flex flex-col flex-1 ${t}" role="list" style="--steps-gap: ${e}">
 					<slot></slot>
 				</ol>
 			</nav>
 		`;
   }
 };
-h([x({ context: f })], u.prototype, "stepsController", 2), h([l({ type: Number, reflect: !0 })], u.prototype, "currentStep", 1), h([l({ type: Number, reflect: !0 })], u.prototype, "gap", 2), u = h([y("schmancy-steps-container")], u);
+h([x({ context: g })], u.prototype, "stepsController", 2), h([l({ type: Number, reflect: !0 })], u.prototype, "currentStep", 1), h([l({ type: Number, reflect: !0 })], u.prototype, "gap", 2), u = h([y("schmancy-steps-container")], u);
 export {
   a as S,
   u as a,
-  $ as b,
-  f as s
+  k as b,
+  g as s
 };
-//# sourceMappingURL=schmancy-steps-container-BIw2HFCz.js.map
+//# sourceMappingURL=schmancy-steps-container-Be0uKWP8.js.map

package/dist/schmancy-steps-container-Be0uKWP8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schmancy-steps-container-Be0uKWP8.js","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.steps.currentStep) return 'complete'\n\t\tif (this.position === this.steps.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.steps.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-outline-variant': !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 -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"absolute top-8 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 -->\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-2 px-2 py-3 rounded-lg' : 'py-2'}\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"flex items-center 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-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-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, with enhanced 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-10 mt-4 pb-8 transition-all duration-300 ease-out\">\n\t\t\t\t\t\t\t<div class=\"pl-4 border-l-2 border-primary-default/20\">\n\t\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t\t</div>\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 { StepsController, stepsContext } from './steps.context'\n\n@customElement('schmancy-steps-container')\nexport class SchmancyStepsContainer extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\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._currentStep\n\t\tthis._currentStep = value\n\t\tthis.controller.setStep(value)\n\t\tthis.requestUpdate('currentStep', oldValue)\n\t}\n\n\tget currentStep(): number {\n\t\treturn this._currentStep\n\t}\n\n\tprivate _currentStep = 1\n\n\t/**\n\t * Gap between steps. Maps to Tailwind gap classes.\n\t * Options: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24\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\t\tthis.controller.setStep(this.currentStep)\n\t}\n\n\trender() {\n\t\t// Map gap value to Tailwind gap class\n\t\tconst gapClass = `gap-${this.gap}`\n\t\t\n\t\t// Map gap value to actual rem value for CSS custom property\n\t\t// Tailwind gap scale: 1 = 0.25rem, 2 = 0.5rem, etc.\n\t\tconst gapRem = {\n\t\t\t0: '0',\n\t\t\t1: '0.25rem',\n\t\t\t2: '0.5rem',\n\t\t\t3: '0.75rem',\n\t\t\t4: '1rem',\n\t\t\t5: '1.25rem',\n\t\t\t6: '1.5rem',\n\t\t\t8: '2rem',\n\t\t\t10: '2.5rem',\n\t\t\t12: '3rem',\n\t\t\t16: '4rem',\n\t\t\t20: '5rem',\n\t\t\t24: '6rem'\n\t\t}[this.gap] || '1rem'\n\t\t\n\t\treturn html`\n\t\t\t<nav class=\"flex h-full w-full\" aria-label=\"Progress\">\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"],"names":["StepsController","constructor","this","_currentStep","BehaviorSubject","currentStep$","asObservable","currentStep","value","step","next","stepsContext","createContext","Symbol","SchmancyStep","$LitElement","css","super","arguments","position","title","description","completed","lockBack","connectedCallback","firstUpdated","subscription","steps","subscribe","updateFlexProperties","disconnectedCallback","unsubscribe","isActive","style","flex","_e","status","setStep","render","isComplete","isUpcoming","connectorClasses","iconContainerClasses","textClasses","clickableClass","html","classMap","_onStepClick","when","__decorateClass","property","type","Number","prototype","String","Boolean","reflect","consume","context","state","customElement","SchmancyStepsContainer","controller","stepsController","gap","oldValue","requestUpdate","gapClass","gapRem","provide"],"mappings":"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"}

package/dist/steps.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./schmancy-steps-container-Dy5nQd7h.cjs");Object.defineProperty(exports,"SchmancyStep",{enumerable:!0,get:()=>e.SchmancyStep}),Object.defineProperty(exports,"SchmancyStepsContainer",{enumerable:!0,get:()=>e.SchmancyStepsContainer}),exports.StepsController=e.StepsController,exports.stepsContext=e.stepsContext;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./schmancy-steps-container-BLLfmYBF.cjs");Object.defineProperty(exports,"SchmancyStep",{enumerable:!0,get:()=>e.SchmancyStep}),Object.defineProperty(exports,"SchmancyStepsContainer",{enumerable:!0,get:()=>e.SchmancyStepsContainer}),exports.StepsController=e.StepsController,exports.stepsContext=e.stepsContext;
 //# sourceMappingURL=steps.cjs.map

package/dist/steps.js

@@ -1,4 +1,4 @@
-import { S as a, a as e, b as n, s as o } from "./schmancy-steps-container-BIw2HFCz.js";
+import { S as a, a as e, b as n, s as o } from "./schmancy-steps-container-Be0uKWP8.js";
 export {
   a as SchmancyStep,
   e as SchmancyStepsContainer,

package/dist/teleport.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./avatar-Cvu3hChs.cjs");exports.HereMorty=e.HereMorty,Object.defineProperty(exports,"SchmancyTeleportation",{enumerable:!0,get:()=>e.SchmancyTeleportation}),exports.WhereAreYouRicky=e.WhereAreYouRicky,exports.teleport=e.teleport;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./avatar-cIIj5C23.cjs");exports.HereMorty=e.HereMorty,Object.defineProperty(exports,"SchmancyTeleportation",{enumerable:!0,get:()=>e.SchmancyTeleportation}),exports.WhereAreYouRicky=e.WhereAreYouRicky,exports.teleport=e.teleport;
 //# sourceMappingURL=teleport.cjs.map

package/dist/teleport.js

@@ -1,4 +1,4 @@
-import { H as o, q as t, W as a, t as s } from "./avatar-Cfg-H9GY.js";
+import { H as o, q as t, W as a, t as s } from "./avatar-DnzsjVqx.js";
 export {
   o as HereMorty,
   t as SchmancyTeleportation,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mhmo91/schmancy",
-	"version": "0.4.64",
+	"version": "0.4.66",
 	"description": "UI library build with web components",
 	"main": "./dist/index.js",
 	"packageManager": "yarn@4.9.2",

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

@@ -27,6 +27,7 @@ export declare class SchmancyStep extends SchmancyStep_base {
      */
     private subscription?;
     connectedCallback(): void;
+    firstUpdated(): void;
     disconnectedCallback(): void;
     /**
      * Update the host element's flex properties based on active state

package/dist/schmancy-steps-container-BIw2HFCz.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"schmancy-steps-container-BIw2HFCz.js","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\t// Subscribe to updates from the container's StepsController.\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.steps.currentStep) return 'complete'\n\t\tif (this.position === this.steps.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.steps.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-outline-variant': !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 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 -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"absolute top-8 left-4 -ml-px h-full w-0.5 transition-colors duration-200 ${this.classMap(connectorClasses)}\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\n\t\t\t\t<!-- Step Button/Label -->\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-start group transition-all duration-200 hover:scale-[1.02] ${clickableClass} ${isActive ? 'bg-primary-container/20 -mx-2 px-2 py-3 rounded-lg' : 'py-2'}\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"flex items-center 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 min-w-0 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-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, with enhanced 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-10 mt-4 pb-8 transition-all duration-300 ease-out\">\n\t\t\t\t\t\t\t<div class=\"pl-4 border-l-2 border-primary-default/20\">\n\t\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t\t</div>\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 { StepsController, stepsContext } from './steps.context'\n\n@customElement('schmancy-steps-container')\nexport class SchmancyStepsContainer extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\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._currentStep\n\t\tthis._currentStep = value\n\t\tthis.controller.setStep(value)\n\t\tthis.requestUpdate('currentStep', oldValue)\n\t}\n\n\tget currentStep(): number {\n\t\treturn this._currentStep\n\t}\n\n\tprivate _currentStep = 1\n\n\t/**\n\t * Gap between steps. Maps to Tailwind gap classes.\n\t * Options: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24\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\t\tthis.controller.setStep(this.currentStep)\n\t}\n\n\trender() {\n\t\t// Map gap value to Tailwind gap class\n\t\tconst gapClass = `gap-${this.gap}`\n\t\t\n\t\treturn html`\n\t\t\t<nav class=\"flex h-full w-full\" aria-label=\"Progress\">\n\t\t\t\t<ol class=\"flex flex-col flex-1 ${gapClass}\" role=\"list\">\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"],"names":["StepsController","constructor","this","_currentStep","BehaviorSubject","currentStep$","asObservable","currentStep","value","step","next","stepsContext","createContext","Symbol","SchmancyStep","$LitElement","css","super","arguments","position","title","description","completed","lockBack","connectedCallback","subscription","steps","subscribe","updateFlexProperties","unsubscribe","disconnectedCallback","isActive","style","flex","status","_e","setStep","render","isComplete","isUpcoming","connectorClasses","iconContainerClasses","textClasses","clickableClass","html","classMap","_onStepClick","when","__decorateClass","property","type","Number","prototype","String","Boolean","reflect","consume","context","state","customElement","SchmancyStepsContainer","controller","stepsController","gap","oldValue","requestUpdate","gapClass","provide"],"mappings":"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"}

package/dist/schmancy-steps-container-Dy5nQd7h.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"schmancy-steps-container-Dy5nQd7h.cjs","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\t// Subscribe to updates from the container's StepsController.\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.steps.currentStep) return 'complete'\n\t\tif (this.position === this.steps.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.steps.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-outline-variant': !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 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 -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"absolute top-8 left-4 -ml-px h-full w-0.5 transition-colors duration-200 ${this.classMap(connectorClasses)}\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\n\t\t\t\t<!-- Step Button/Label -->\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-start group transition-all duration-200 hover:scale-[1.02] ${clickableClass} ${isActive ? 'bg-primary-container/20 -mx-2 px-2 py-3 rounded-lg' : 'py-2'}\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"flex items-center 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 min-w-0 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-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, with enhanced 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-10 mt-4 pb-8 transition-all duration-300 ease-out\">\n\t\t\t\t\t\t\t<div class=\"pl-4 border-l-2 border-primary-default/20\">\n\t\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t\t</div>\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 { StepsController, stepsContext } from './steps.context'\n\n@customElement('schmancy-steps-container')\nexport class SchmancyStepsContainer extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\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._currentStep\n\t\tthis._currentStep = value\n\t\tthis.controller.setStep(value)\n\t\tthis.requestUpdate('currentStep', oldValue)\n\t}\n\n\tget currentStep(): number {\n\t\treturn this._currentStep\n\t}\n\n\tprivate _currentStep = 1\n\n\t/**\n\t * Gap between steps. Maps to Tailwind gap classes.\n\t * Options: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24\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\t\tthis.controller.setStep(this.currentStep)\n\t}\n\n\trender() {\n\t\t// Map gap value to Tailwind gap class\n\t\tconst gapClass = `gap-${this.gap}`\n\t\t\n\t\treturn html`\n\t\t\t<nav class=\"flex h-full w-full\" aria-label=\"Progress\">\n\t\t\t\t<ol class=\"flex flex-col flex-1 ${gapClass}\" role=\"list\">\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"],"names":["StepsController","constructor","this","_currentStep","BehaviorSubject","currentStep$","asObservable","currentStep","value","step","next","stepsContext","createContext","Symbol","SchmancyStep","$LitElement","css","super","arguments","position","title","description","completed","lockBack","connectedCallback","subscription","steps","subscribe","updateFlexProperties","unsubscribe","disconnectedCallback","isActive","style","flex","status","_e","setStep","render","isComplete","isUpcoming","connectorClasses","iconContainerClasses","textClasses","clickableClass","html","classMap","_onStepClick","when","__decorateClass","property","type","Number","prototype","String","Boolean","reflect","consume","context","state","customElement","SchmancyStepsContainer","controller","stepsController","gap","oldValue","requestUpdate","gapClass","provide"],"mappings":"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"}