@mhmo91/schmancy 0.10.36 → 0.10.37

package/dist/state.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-BBzRWB1w.cjs`),t=require(`./state-Cx0aoL5e.cjs`);let n=require(`@lit-labs/signals`);exports.SchmancyContext=t.s,Object.defineProperty(exports,`Signal`,{enumerable:!0,get:function(){return n.Signal}}),exports._activeHost=e.r,exports.bindState=t.t,Object.defineProperty(exports,`computed`,{enumerable:!0,get:function(){return n.computed}}),exports.effect=t.n,exports.observe=t.r,exports.schmancyContext=t.i,exports.state=t.a,exports.stateFromObservable=t.o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-BHfQg3Tj.cjs`),t=require(`./state-Bj0M9a6T.cjs`);let n=require(`@lit-labs/signals`);exports.SchmancyContext=t.s,Object.defineProperty(exports,`Signal`,{enumerable:!0,get:function(){return n.Signal}}),exports._activeHost=e.r,exports.bindState=t.t,Object.defineProperty(exports,`computed`,{enumerable:!0,get:function(){return n.computed}}),exports.effect=t.n,exports.observe=t.r,exports.schmancyContext=t.i,exports.state=t.a,exports.stateFromObservable=t.o;

package/dist/state.js

@@ -1,3 +1,3 @@
-import { r as e } from "./SchmancyElement-C3CpdNsi.js";
-import { a as t, c as n, i as r, l as i, n as a, o, r as s, s as c, t as l } from "./state-DJDp3N7J.js";
+import { r as e } from "./SchmancyElement-CDT2q1lA.js";
+import { a as t, c as n, i as r, l as i, n as a, o, r as s, s as c, t as l } from "./state-DscWQpoM.js";
 export { i as SchmancyContext, l as Signal, e as _activeHost, a as bindState, s as computed, r as effect, t as observe, o as schmancyContext, c as state, n as stateFromObservable };

package/dist/steps.cjs

@@ -1,26 +1,23 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-BBzRWB1w.cjs`);require(`./mixins-DPdzC9ZH.cjs`);let t=require(`rxjs`),n=require(`rxjs/operators`),r=require(`@lit/context`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/when.js`);var s=class{constructor(){this._currentStep=new t.BehaviorSubject(1)}get currentStep$(){return this._currentStep.asObservable()}get currentStep(){return this._currentStep.value}setStep(e){this._currentStep.next(e)}},c=(0,r.createContext)(Symbol(`SchmancyStepsContext`)),l=class extends e.t{constructor(...e){super(...e),this.position=1,this.title=``,this.description=``,this.completed=!1,this.lockBack=!1,this.currentStep=1}static{this.styles=[a.css`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-BHfQg3Tj.cjs`);require(`./mixins-DxHpyMHA.cjs`);let t=require(`rxjs`),n=require(`rxjs/operators`),r=require(`@lit/context`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/when.js`);var s=class{constructor(){this.stepSubject=new t.BehaviorSubject(1),this.lockBack=!1}get currentStep$(){return this.stepSubject.asObservable()}get currentStep(){return this.stepSubject.value}setStep(e){this.stepSubject.next(e)}},c=(0,r.createContext)(Symbol(`SchmancyStepsContext`)),l=class extends e.t{constructor(...e){super(...e),this.position=1,this.label=``,this.description=``,this.completed=!1,this.currentStep=1,this.hasContent=!1}static{this.styles=[a.css`
 	:host {
-		display: grid;
-		/* Base display is just grid, flex properties will be applied dynamically */
+		display: block;
 		transition: all 0.2s ease-in-out;
 	}
-`]}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},s={"text-primary-default font-medium":e,"text-tertiary-default":t,"text-surface-onVariant":n},c=e||t?`cursor-pointer`:``;return a.html`
+`]}connectedCallback(){super.connectedCallback(),this.steps.currentStep$.pipe((0,n.takeUntil)(this.disconnecting)).subscribe(e=>{this.currentStep=e,this.updateFlexProperties()})}firstUpdated(){this.updateFlexProperties()}onSlotChange(){this.hasContent=this.assignedNodes.some(e=>e.nodeType===Node.ELEMENT_NODE||e.nodeType===Node.TEXT_NODE&&e.textContent?.trim()!==``),this.updateFlexProperties()}updateFlexProperties(){let e=this.position===this.currentStep;this.style.flex=e&&this.hasContent?`1 1 auto`:`0 0 auto`}get status(){return this.completed||this.position<this.currentStep?`complete`:this.position===this.currentStep?`current`:`upcoming`}onStepClick(){this.steps.lockBack&&this.position<this.currentStep||this.status!==`upcoming`&&this.steps.setStep(this.position)}onStepKeydown(e){e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),this.onStepClick())}render(){let e=this.position===this.currentStep,t=this.status===`complete`,n=this.status===`upcoming`,r=!(n||this.steps.lockBack&&this.position<this.currentStep);return this.hasContent?this.renderContentRow(e,t,n,r):this.renderRailRow(e,t,n,r)}renderContentRow(e,t,n,r){let i={"bg-tertiary-default":t,"bg-outlineVariant":!t},s={"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},c={"text-primary-default font-medium":e,"text-tertiary-default":t,"text-surface-onVariant":n},l=r?`cursor-pointer`:``;return a.html`
 			<li class="relative">
-				<!-- Connector line - responsive positioning -->
 				<div
-					class="absolute top-8 left-3 sm:left-4 -ml-px w-0.5 transition-colors duration-200 ${this.classMap(r)}"
+					class="absolute top-8 left-3 sm:left-4 -ml-px w-0.5 transition-colors duration-200 ${this.classMap(i)}"
 					style="height: calc(100% + var(--steps-gap, 0px))"
 					aria-hidden="true"
 				></div>
 
-				<!-- Step Button/Label - adjusted padding for mobile -->
 				<button
 					type="button"
-					@click=${this._onStepClick}
-					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`}"
+					@click=${this.onStepClick}
+					class="relative flex items-center group transition-all duration-200 hover:scale-[1.02] ${l} ${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)}>
+						<span class=${this.classMap(s)}>
 							${t?a.html`
 										<svg class="size-5 transition-transform duration-200 group-hover:scale-110" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
 											<path
@@ -39,7 +36,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 
 					<span class="flex flex-col items-start justify-center min-w-0 ml-3 sm:ml-6">
 						<schmancy-typography type="title" token="md">
-							<span class="transition-colors duration-200 ${this.classMap(s)}">${this.title}</span>
+							<span class="transition-colors duration-200 ${this.classMap(c)}">${this.label}</span>
 						</schmancy-typography>
 						${(0,o.when)(this.description,()=>a.html`
 								<schmancy-typography type="body" token="sm" class="mt-0.5 sm:mt-1">
@@ -49,22 +46,41 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 					</span>
 				</button>
 
-				<!-- Render step content if the step is active - responsive spacing -->
 				${(0,o.when)(e,()=>a.html`
 						<div class="ml-6 sm:ml-10 mt-3 sm:mt-4 pb-6 sm:pb-8 transition-all duration-300 ease-out">
-						<slot></slot>
+							<slot @slotchange=${this.onSlotChange}></slot>
 						</div>
 					`)}
+				${(0,o.when)(!e,()=>a.html`<slot @slotchange=${this.onSlotChange} style="display:none"></slot>`)}
 			</li>
-		`}};e.u([(0,i.property)({type:Number})],l.prototype,`position`,void 0),e.u([(0,i.property)({type:String})],l.prototype,`title`,void 0),e.u([(0,i.property)({type:String})],l.prototype,`description`,void 0),e.u([(0,i.property)({type:Boolean,reflect:!0})],l.prototype,`completed`,void 0),e.u([(0,i.property)({type:Boolean})],l.prototype,`lockBack`,void 0),e.u([(0,r.consume)({context:c})],l.prototype,`steps`,void 0),e.u([(0,i.state)()],l.prototype,`currentStep`,void 0),l=e.u([(0,i.customElement)(`schmancy-step`)],l);var u=class extends e.t{constructor(...e){super(...e),this.controller=new s,this.stepsController=this.controller,this.gap=4,this.handleChange=e=>{e.target!==this&&e.stopPropagation()}}static{this.styles=[a.css`
+		`}renderRailRow(e,t,n,r){let i=!this.nextElementSibling?.matches(`schmancy-step`),s=e?`text-primary-default`:t?`text-surface-on`:`text-surface-on-variant`,c=[`relative z-10 w-3 h-3 rounded-full shrink-0 transition-colors duration-300`,t||e?`bg-primary-default`:`bg-outline`,e?`ring-2 ring-offset-2 ring-offset-surface-containerLow ring-primary-default`:``].join(` `);return a.html`
+			<div
+				class="relative flex items-center gap-4 rounded-lg -mx-2 px-2 py-3 transition-colors duration-200 ${r?`cursor-pointer hover:bg-primary-default/8 focus-visible:ring-2 focus-visible:ring-primary-default`:``}"
+				role=${r?`button`:`presentation`}
+				tabindex=${r?`0`:`-1`}
+				aria-current=${e?`step`:`false`}
+				aria-label=${r?`Go back to ${this.label}`:this.label}
+				@click=${this.onStepClick}
+				@keydown=${this.onStepKeydown}
+			>
+				${(0,o.when)(!i,()=>a.html`
+						<div
+							class="absolute left-3.5 top-1/2 w-px h-full transition-colors duration-300 ${t?`bg-primary-default`:`bg-outline`}"
+							aria-hidden="true"
+						></div>
+					`)}
+				<div class=${c} aria-hidden="true"></div>
+				<schmancy-typography type="label" token="lg" class=${s}>${this.label}</schmancy-typography>
+			</div>
+			<slot @slotchange=${this.onSlotChange} style="display:none"></slot>
+		`}};e.u([(0,i.property)({type:Number})],l.prototype,`position`,void 0),e.u([(0,i.property)({type:String})],l.prototype,`label`,void 0),e.u([(0,i.property)({type:String})],l.prototype,`description`,void 0),e.u([(0,i.property)({type:Boolean,reflect:!0})],l.prototype,`completed`,void 0),e.u([(0,r.consume)({context:c})],l.prototype,`steps`,void 0),e.u([(0,i.state)()],l.prototype,`currentStep`,void 0),e.u([(0,i.state)()],l.prototype,`hasContent`,void 0),e.u([(0,i.queryAssignedNodes)({flatten:!0})],l.prototype,`assignedNodes`,void 0),l=e.u([(0,i.customElement)(`schmancy-step`)],l);var u=class extends e.t{constructor(...e){super(...e),this.controller=new s,this.stepsController=this.controller,this.handleChange=e=>{e.target!==this&&e.stopPropagation()}}static{this.styles=[a.css`
 	:host {
 		display: block;
-		overflow: auto;
 	}
-`]}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,n.distinctUntilChanged)(),(0,n.tap)(e=>{this.requestUpdate(),this.dispatchScopedEvent(`change`,{value:e},{bubbles:!1})}),(0,n.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 a.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}">
+`]}set value(e){this.controller.currentStep!==e&&this.controller.setStep(e)}get value(){return this.controller.currentStep}set lockBack(e){this.controller.lockBack=e}get lockBack(){return this.controller.lockBack}connectedCallback(){super.connectedCallback(),this.controller.currentStep$.pipe((0,n.distinctUntilChanged)(),(0,n.tap)(e=>{this.requestUpdate(),this.dispatchScopedEvent(`change`,{value:e},{bubbles:!1})}),(0,n.takeUntil)(this.disconnecting)).subscribe()}render(){return a.html`
+			<nav aria-label="Progress" @change=${this.handleChange}>
+				<ol role="list" style="display:contents">
 					<slot></slot>
 				</ol>
 			</nav>
-		`}};e.u([(0,r.provide)({context:c})],u.prototype,`stepsController`,void 0),e.u([(0,i.property)({type:Number,reflect:!0})],u.prototype,`currentStep`,null),e.u([(0,i.property)({type:Number,reflect:!0})],u.prototype,`gap`,void 0),u=e.u([(0,i.customElement)(`schmancy-steps-container`)],u),Object.defineProperty(exports,`SchmancyStep`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`SchmancyStepsContainer`,{enumerable:!0,get:function(){return u}}),exports.StepsController=s,exports.stepsContext=c;
+		`}};e.u([(0,r.provide)({context:c})],u.prototype,`stepsController`,void 0),e.u([(0,i.property)({type:Number,reflect:!0})],u.prototype,`value`,null),e.u([(0,i.property)({type:Boolean,reflect:!0})],u.prototype,`lockBack`,null),u=e.u([(0,i.customElement)(`schmancy-steps`)],u),Object.defineProperty(exports,`SchmancyStep`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`SchmancySteps`,{enumerable:!0,get:function(){return u}}),exports.StepsController=s,exports.stepsContext=c;

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 { SchmancyElement } from '@mixins/index'\n\n@customElement('schmancy-step')\nexport class SchmancyStep extends SchmancyElement {\n\tstatic styles = [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\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 { SchmancyElement } from '@mixins/index'\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 SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\toverflow: auto;\n\t}\n`]\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.ts"],"sourcesContent":["import { createContext } from '@lit/context'\nimport { BehaviorSubject } from 'rxjs'\n\nexport class StepsController {\n\tprivate stepSubject = new BehaviorSubject(1)\n\tlockBack = false\n\n\tget currentStep$() {\n\t\treturn this.stepSubject.asObservable()\n\t}\n\n\tget currentStep() {\n\t\treturn this.stepSubject.value\n\t}\n\n\tsetStep(step: number) {\n\t\tthis.stepSubject.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 { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAssignedNodes, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { takeUntil } from 'rxjs/operators'\nimport { StepsController, stepsContext } from './steps.context'\n\n@customElement('schmancy-step')\nexport class SchmancyStep extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\ttransition: all 0.2s ease-in-out;\n\t}\n`]\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 }) label = ''\n\t@property({ type: String }) description = ''\n\n\t@property({ type: Boolean, reflect: true }) completed = 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@state()\n\tprivate hasContent = false\n\n\t@queryAssignedNodes({ flatten: true })\n\tprivate assignedNodes!: Node[]\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.steps.currentStep$\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(step => {\n\t\t\t\tthis.currentStep = step\n\t\t\t\tthis.updateFlexProperties()\n\t\t\t})\n\t}\n\n\tfirstUpdated() {\n\t\tthis.updateFlexProperties()\n\t}\n\n\tprivate onSlotChange() {\n\t\tthis.hasContent = this.assignedNodes.some(\n\t\t\tn => n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && n.textContent?.trim() !== ''),\n\t\t)\n\t\tthis.updateFlexProperties()\n\t}\n\n\tprivate updateFlexProperties() {\n\t\tconst isActive = this.position === this.currentStep\n\t\tthis.style.flex = isActive && this.hasContent ? '1 1 auto' : '0 0 auto'\n\t}\n\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\tprivate onStepClick() {\n\t\tif (this.steps.lockBack && this.position < this.currentStep) return\n\t\tif (this.status !== 'upcoming') {\n\t\t\tthis.steps.setStep(this.position)\n\t\t}\n\t}\n\n\tprivate onStepKeydown(e: KeyboardEvent) {\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tthis.onStepClick()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst isActive = this.position === this.currentStep\n\t\tconst isComplete = this.status === 'complete'\n\t\tconst isUpcoming = this.status === 'upcoming'\n\t\tconst navigable = !isUpcoming && !(this.steps.lockBack && this.position < this.currentStep)\n\n\t\tif (this.hasContent) {\n\t\t\treturn this.renderContentRow(isActive, isComplete, isUpcoming, navigable)\n\t\t}\n\t\treturn this.renderRailRow(isActive, isComplete, isUpcoming, navigable)\n\t}\n\n\tprivate renderContentRow(isActive: boolean, isComplete: boolean, isUpcoming: boolean, navigable: boolean) {\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\tconst clickableClass = navigable ? 'cursor-pointer' : ''\n\n\t\treturn html`\n\t\t\t<li class=\"relative\">\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<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.label}</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${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\t<slot @slotchange=${this.onSlotChange}></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t\t${when(!isActive, () => html`<slot @slotchange=${this.onSlotChange} style=\"display:none\"></slot>`)}\n\t\t\t</li>\n\t\t`\n\t}\n\n\tprivate renderRailRow(isActive: boolean, isComplete: boolean, _isUpcoming: boolean, navigable: boolean) {\n\t\tconst isLast = !this.nextElementSibling?.matches('schmancy-step')\n\t\tconst labelClass = isActive\n\t\t\t? 'text-primary-default'\n\t\t\t: isComplete\n\t\t\t\t? 'text-surface-on'\n\t\t\t\t: 'text-surface-on-variant'\n\n\t\tconst dotClass = [\n\t\t\t'relative z-10 w-3 h-3 rounded-full shrink-0 transition-colors duration-300',\n\t\t\tisComplete || isActive ? 'bg-primary-default' : 'bg-outline',\n\t\t\tisActive ? 'ring-2 ring-offset-2 ring-offset-surface-containerLow ring-primary-default' : '',\n\t\t].join(' ')\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"relative flex items-center gap-4 rounded-lg -mx-2 px-2 py-3 transition-colors duration-200 ${\n\t\t\t\t\tnavigable\n\t\t\t\t\t\t? 'cursor-pointer hover:bg-primary-default/8 focus-visible:ring-2 focus-visible:ring-primary-default'\n\t\t\t\t\t\t: ''\n\t\t\t\t}\"\n\t\t\t\trole=${navigable ? 'button' : 'presentation'}\n\t\t\t\ttabindex=${navigable ? '0' : '-1'}\n\t\t\t\taria-current=${isActive ? 'step' : 'false'}\n\t\t\t\taria-label=${navigable ? `Go back to ${this.label}` : this.label}\n\t\t\t\t@click=${this.onStepClick}\n\t\t\t\t@keydown=${this.onStepKeydown}\n\t\t\t>\n\t\t\t\t${when(\n\t\t\t\t\t!isLast,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"absolute left-3.5 top-1/2 w-px h-full transition-colors duration-300 ${\n\t\t\t\t\t\t\t\tisComplete ? 'bg-primary-default' : 'bg-outline'\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t></div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t\t<div class=${dotClass} aria-hidden=\"true\"></div>\n\t\t\t\t<schmancy-typography type=\"label\" token=\"lg\" class=${labelClass}>${this.label}</schmancy-typography>\n\t\t\t</div>\n\t\t\t<slot @slotchange=${this.onSlotChange} style=\"display:none\"></slot>\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 { SchmancyElement } from '@mixins/index'\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')\nexport class SchmancySteps extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`]\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 value(v: number) {\n\t\tconst oldValue = this.controller.currentStep\n\t\tif (oldValue !== v) {\n\t\t\tthis.controller.setStep(v)\n\t\t}\n\t}\n\n\tget value(): number {\n\t\treturn this.controller.currentStep\n\t}\n\n\t/**\n\t * Block back-navigation for the whole stepper.\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tset lockBack(v: boolean) {\n\t\tthis.controller.lockBack = v\n\t}\n\tget lockBack(): boolean {\n\t\treturn this.controller.lockBack\n\t}\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\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 */\n\tprivate handleChange = (e: Event) => {\n\t\tif (e.target !== this) {\n\t\t\te.stopPropagation()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<nav aria-label=\"Progress\" @change=${this.handleChange}>\n\t\t\t\t<ol role=\"list\" style=\"display:contents\">\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': SchmancySteps\n\t}\n}\n"],"mappings":"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"}

package/dist/steps.js

@@ -1,89 +1,94 @@
-import { t as e, u as t } from "./SchmancyElement-C3CpdNsi.js";
-import "./mixins-DTzfFVyv.js";
+import { t as e, u as t } from "./SchmancyElement-CDT2q1lA.js";
+import "./mixins-De1zjyhy.js";
 import { BehaviorSubject as n } from "rxjs";
 import { distinctUntilChanged as r, takeUntil as i, tap as a } from "rxjs/operators";
 import { consume as o, createContext as s, provide as c } from "@lit/context";
-import { customElement as l, property as u, state as d } from "lit/decorators.js";
-import { css as f, html as p } from "lit";
-import { when as m } from "lit/directives/when.js";
-var h = class {
+import { customElement as l, property as u, queryAssignedNodes as d, state as f } from "lit/decorators.js";
+import { css as p, html as m } from "lit";
+import { when as h } from "lit/directives/when.js";
+var g = class {
 	constructor() {
-		this._currentStep = new n(1);
+		this.stepSubject = new n(1), this.lockBack = !1;
 	}
 	get currentStep$() {
-		return this._currentStep.asObservable();
+		return this.stepSubject.asObservable();
 	}
 	get currentStep() {
-		return this._currentStep.value;
+		return this.stepSubject.value;
 	}
 	setStep(e) {
-		this._currentStep.next(e);
+		this.stepSubject.next(e);
 	}
-}, g = s(Symbol("SchmancyStepsContext")), _ = class extends e {
+}, _ = s(Symbol("SchmancyStepsContext")), v = class extends e {
 	constructor(...e) {
-		super(...e), this.position = 1, this.title = "", this.description = "", this.completed = !1, this.lockBack = !1, this.currentStep = 1;
+		super(...e), this.position = 1, this.label = "", this.description = "", this.completed = !1, this.currentStep = 1, this.hasContent = !1;
 	}
 	static {
-		this.styles = [f`
+		this.styles = [p`
 	:host {
-		display: grid;
-		/* Base display is just grid, flex properties will be applied dynamically */
+		display: block;
 		transition: all 0.2s ease-in-out;
 	}
 `];
 	}
 	connectedCallback() {
-		super.connectedCallback();
+		super.connectedCallback(), this.steps.currentStep$.pipe(i(this.disconnecting)).subscribe((e) => {
+			this.currentStep = e, this.updateFlexProperties();
+		});
 	}
 	firstUpdated() {
-		this.subscription = this.steps.currentStep$.subscribe((e) => {
-			this.currentStep = e, this.updateFlexProperties();
-		}), this.updateFlexProperties();
+		this.updateFlexProperties();
 	}
-	disconnectedCallback() {
-		this.subscription?.unsubscribe(), super.disconnectedCallback();
+	onSlotChange() {
+		this.hasContent = this.assignedNodes.some((e) => e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && e.textContent?.trim() !== ""), this.updateFlexProperties();
 	}
 	updateFlexProperties() {
-		this.position === this.currentStep ? this.style.flex = "1 1 auto" : this.style.flex = "0 0 auto";
+		let e = this.position === this.currentStep;
+		this.style.flex = e && this.hasContent ? "1 1 auto" : "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);
+	onStepClick() {
+		this.steps.lockBack && this.position < this.currentStep || this.status !== "upcoming" && this.steps.setStep(this.position);
+	}
+	onStepKeydown(e) {
+		e.key !== "Enter" && e.key !== " " || (e.preventDefault(), this.onStepClick());
 	}
 	render() {
-		let e = this.position === this.currentStep, t = this.status === "complete", n = this.status === "upcoming", r = {
+		let e = this.position === this.currentStep, t = this.status === "complete", n = this.status === "upcoming", r = !(n || this.steps.lockBack && this.position < this.currentStep);
+		return this.hasContent ? this.renderContentRow(e, t, n, r) : this.renderRailRow(e, t, n, r);
+	}
+	renderContentRow(e, t, n, r) {
+		let i = {
 			"bg-tertiary-default": t,
 			"bg-outlineVariant": !t
-		}, i = {
+		}, a = {
 			"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 = {
+		}, o = {
 			"text-primary-default font-medium": e,
 			"text-tertiary-default": t,
 			"text-surface-onVariant": n
-		}, o = e || t ? "cursor-pointer" : "";
-		return p`
+		}, s = r ? "cursor-pointer" : "";
+		return m`
 			<li class="relative">
-				<!-- Connector line - responsive positioning -->
 				<div
-					class="absolute top-8 left-3 sm:left-4 -ml-px w-0.5 transition-colors duration-200 ${this.classMap(r)}"
+					class="absolute top-8 left-3 sm:left-4 -ml-px w-0.5 transition-colors duration-200 ${this.classMap(i)}"
 					style="height: calc(100% + var(--steps-gap, 0px))"
 					aria-hidden="true"
 				></div>
 
-				<!-- Step Button/Label - adjusted padding for mobile -->
 				<button
 					type="button"
-					@click=${this._onStepClick}
-					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"}"
+					@click=${this.onStepClick}
+					class="relative flex items-center group transition-all duration-200 hover:scale-[1.02] ${s} ${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 ? p`
+						<span class=${this.classMap(a)}>
+							${t ? m`
 										<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"
@@ -91,7 +96,7 @@ var h = class {
 												clip-rule="evenodd"
 											/>
 										</svg>
-									` : p`
+									` : m`
 										<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>
@@ -101,9 +106,9 @@ var h = class {
 
 					<span class="flex flex-col items-start justify-center min-w-0 ml-3 sm:ml-6">
 						<schmancy-typography type="title" token="md">
-							<span class="transition-colors duration-200 ${this.classMap(a)}">${this.title}</span>
+							<span class="transition-colors duration-200 ${this.classMap(o)}">${this.label}</span>
 						</schmancy-typography>
-						${m(this.description, () => p`
+						${h(this.description, () => m`
 								<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>
@@ -111,75 +116,93 @@ var h = class {
 					</span>
 				</button>
 
-				<!-- Render step content if the step is active - responsive spacing -->
-				${m(e, () => p`
+				${h(e, () => m`
 						<div class="ml-6 sm:ml-10 mt-3 sm:mt-4 pb-6 sm:pb-8 transition-all duration-300 ease-out">
-						<slot></slot>
+							<slot @slotchange=${this.onSlotChange}></slot>
 						</div>
 					`)}
+				${h(!e, () => m`<slot @slotchange=${this.onSlotChange} style="display:none"></slot>`)}
 			</li>
 		`;
 	}
+	renderRailRow(e, t, n, r) {
+		let i = !this.nextElementSibling?.matches("schmancy-step"), a = e ? "text-primary-default" : t ? "text-surface-on" : "text-surface-on-variant", o = [
+			"relative z-10 w-3 h-3 rounded-full shrink-0 transition-colors duration-300",
+			t || e ? "bg-primary-default" : "bg-outline",
+			e ? "ring-2 ring-offset-2 ring-offset-surface-containerLow ring-primary-default" : ""
+		].join(" ");
+		return m`
+			<div
+				class="relative flex items-center gap-4 rounded-lg -mx-2 px-2 py-3 transition-colors duration-200 ${r ? "cursor-pointer hover:bg-primary-default/8 focus-visible:ring-2 focus-visible:ring-primary-default" : ""}"
+				role=${r ? "button" : "presentation"}
+				tabindex=${r ? "0" : "-1"}
+				aria-current=${e ? "step" : "false"}
+				aria-label=${r ? `Go back to ${this.label}` : this.label}
+				@click=${this.onStepClick}
+				@keydown=${this.onStepKeydown}
+			>
+				${h(!i, () => m`
+						<div
+							class="absolute left-3.5 top-1/2 w-px h-full transition-colors duration-300 ${t ? "bg-primary-default" : "bg-outline"}"
+							aria-hidden="true"
+						></div>
+					`)}
+				<div class=${o} aria-hidden="true"></div>
+				<schmancy-typography type="label" token="lg" class=${a}>${this.label}</schmancy-typography>
+			</div>
+			<slot @slotchange=${this.onSlotChange} style="display:none"></slot>
+		`;
+	}
 };
-t([u({ type: Number })], _.prototype, "position", void 0), t([u({ type: String })], _.prototype, "title", void 0), t([u({ type: String })], _.prototype, "description", void 0), t([u({
+t([u({ type: Number })], v.prototype, "position", void 0), t([u({ type: String })], v.prototype, "label", void 0), t([u({ type: String })], v.prototype, "description", void 0), t([u({
 	type: Boolean,
 	reflect: !0
-})], _.prototype, "completed", void 0), t([u({ type: Boolean })], _.prototype, "lockBack", void 0), t([o({ context: g })], _.prototype, "steps", void 0), t([d()], _.prototype, "currentStep", void 0), _ = t([l("schmancy-step")], _);
-var v = class extends e {
+})], v.prototype, "completed", void 0), t([o({ context: _ })], v.prototype, "steps", void 0), t([f()], v.prototype, "currentStep", void 0), t([f()], v.prototype, "hasContent", void 0), t([d({ flatten: !0 })], v.prototype, "assignedNodes", void 0), v = t([l("schmancy-step")], v);
+var y = class extends e {
 	constructor(...e) {
-		super(...e), this.controller = new h(), this.stepsController = this.controller, this.gap = 4, this.handleChange = (e) => {
+		super(...e), this.controller = new g(), this.stepsController = this.controller, this.handleChange = (e) => {
 			e.target !== this && e.stopPropagation();
 		};
 	}
 	static {
-		this.styles = [f`
+		this.styles = [p`
 	:host {
 		display: block;
-		overflow: auto;
 	}
 `];
 	}
-	set currentStep(e) {
+	set value(e) {
 		this.controller.currentStep !== e && this.controller.setStep(e);
 	}
-	get currentStep() {
+	get value() {
 		return this.controller.currentStep;
 	}
+	set lockBack(e) {
+		this.controller.lockBack = e;
+	}
+	get lockBack() {
+		return this.controller.lockBack;
+	}
 	connectedCallback() {
 		super.connectedCallback(), this.controller.currentStep$.pipe(r(), a((e) => {
 			this.requestUpdate(), this.dispatchScopedEvent("change", { value: e }, { bubbles: !1 });
 		}), i(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 p`
-			<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}">
+		return m`
+			<nav aria-label="Progress" @change=${this.handleChange}>
+				<ol role="list" style="display:contents">
 					<slot></slot>
 				</ol>
 			</nav>
 		`;
 	}
 };
-t([c({ context: g })], v.prototype, "stepsController", void 0), t([u({
+t([c({ context: _ })], y.prototype, "stepsController", void 0), t([u({
 	type: Number,
 	reflect: !0
-})], v.prototype, "currentStep", null), t([u({
-	type: Number,
+})], y.prototype, "value", null), t([u({
+	type: Boolean,
 	reflect: !0
-})], v.prototype, "gap", void 0), v = t([l("schmancy-steps-container")], v);
-export { _ as SchmancyStep, v as SchmancyStepsContainer, h as StepsController, g as stepsContext };
+})], y.prototype, "lockBack", null), y = t([l("schmancy-steps")], y);
+export { v as SchmancyStep, y as SchmancySteps, g as StepsController, _ 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 { SchmancyElement } from '@mixins/index'\n\n@customElement('schmancy-step')\nexport class SchmancyStep extends SchmancyElement {\n\tstatic styles = [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\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 { SchmancyElement } from '@mixins/index'\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 SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\toverflow: auto;\n\t}\n`]\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.ts"],"sourcesContent":["import { createContext } from '@lit/context'\nimport { BehaviorSubject } from 'rxjs'\n\nexport class StepsController {\n\tprivate stepSubject = new BehaviorSubject(1)\n\tlockBack = false\n\n\tget currentStep$() {\n\t\treturn this.stepSubject.asObservable()\n\t}\n\n\tget currentStep() {\n\t\treturn this.stepSubject.value\n\t}\n\n\tsetStep(step: number) {\n\t\tthis.stepSubject.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 { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAssignedNodes, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { takeUntil } from 'rxjs/operators'\nimport { StepsController, stepsContext } from './steps.context'\n\n@customElement('schmancy-step')\nexport class SchmancyStep extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\ttransition: all 0.2s ease-in-out;\n\t}\n`]\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 }) label = ''\n\t@property({ type: String }) description = ''\n\n\t@property({ type: Boolean, reflect: true }) completed = 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@state()\n\tprivate hasContent = false\n\n\t@queryAssignedNodes({ flatten: true })\n\tprivate assignedNodes!: Node[]\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.steps.currentStep$\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(step => {\n\t\t\t\tthis.currentStep = step\n\t\t\t\tthis.updateFlexProperties()\n\t\t\t})\n\t}\n\n\tfirstUpdated() {\n\t\tthis.updateFlexProperties()\n\t}\n\n\tprivate onSlotChange() {\n\t\tthis.hasContent = this.assignedNodes.some(\n\t\t\tn => n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && n.textContent?.trim() !== ''),\n\t\t)\n\t\tthis.updateFlexProperties()\n\t}\n\n\tprivate updateFlexProperties() {\n\t\tconst isActive = this.position === this.currentStep\n\t\tthis.style.flex = isActive && this.hasContent ? '1 1 auto' : '0 0 auto'\n\t}\n\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\tprivate onStepClick() {\n\t\tif (this.steps.lockBack && this.position < this.currentStep) return\n\t\tif (this.status !== 'upcoming') {\n\t\t\tthis.steps.setStep(this.position)\n\t\t}\n\t}\n\n\tprivate onStepKeydown(e: KeyboardEvent) {\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tthis.onStepClick()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst isActive = this.position === this.currentStep\n\t\tconst isComplete = this.status === 'complete'\n\t\tconst isUpcoming = this.status === 'upcoming'\n\t\tconst navigable = !isUpcoming && !(this.steps.lockBack && this.position < this.currentStep)\n\n\t\tif (this.hasContent) {\n\t\t\treturn this.renderContentRow(isActive, isComplete, isUpcoming, navigable)\n\t\t}\n\t\treturn this.renderRailRow(isActive, isComplete, isUpcoming, navigable)\n\t}\n\n\tprivate renderContentRow(isActive: boolean, isComplete: boolean, isUpcoming: boolean, navigable: boolean) {\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\tconst clickableClass = navigable ? 'cursor-pointer' : ''\n\n\t\treturn html`\n\t\t\t<li class=\"relative\">\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<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.label}</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${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\t<slot @slotchange=${this.onSlotChange}></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t\t${when(!isActive, () => html`<slot @slotchange=${this.onSlotChange} style=\"display:none\"></slot>`)}\n\t\t\t</li>\n\t\t`\n\t}\n\n\tprivate renderRailRow(isActive: boolean, isComplete: boolean, _isUpcoming: boolean, navigable: boolean) {\n\t\tconst isLast = !this.nextElementSibling?.matches('schmancy-step')\n\t\tconst labelClass = isActive\n\t\t\t? 'text-primary-default'\n\t\t\t: isComplete\n\t\t\t\t? 'text-surface-on'\n\t\t\t\t: 'text-surface-on-variant'\n\n\t\tconst dotClass = [\n\t\t\t'relative z-10 w-3 h-3 rounded-full shrink-0 transition-colors duration-300',\n\t\t\tisComplete || isActive ? 'bg-primary-default' : 'bg-outline',\n\t\t\tisActive ? 'ring-2 ring-offset-2 ring-offset-surface-containerLow ring-primary-default' : '',\n\t\t].join(' ')\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"relative flex items-center gap-4 rounded-lg -mx-2 px-2 py-3 transition-colors duration-200 ${\n\t\t\t\t\tnavigable\n\t\t\t\t\t\t? 'cursor-pointer hover:bg-primary-default/8 focus-visible:ring-2 focus-visible:ring-primary-default'\n\t\t\t\t\t\t: ''\n\t\t\t\t}\"\n\t\t\t\trole=${navigable ? 'button' : 'presentation'}\n\t\t\t\ttabindex=${navigable ? '0' : '-1'}\n\t\t\t\taria-current=${isActive ? 'step' : 'false'}\n\t\t\t\taria-label=${navigable ? `Go back to ${this.label}` : this.label}\n\t\t\t\t@click=${this.onStepClick}\n\t\t\t\t@keydown=${this.onStepKeydown}\n\t\t\t>\n\t\t\t\t${when(\n\t\t\t\t\t!isLast,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"absolute left-3.5 top-1/2 w-px h-full transition-colors duration-300 ${\n\t\t\t\t\t\t\t\tisComplete ? 'bg-primary-default' : 'bg-outline'\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t></div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t\t<div class=${dotClass} aria-hidden=\"true\"></div>\n\t\t\t\t<schmancy-typography type=\"label\" token=\"lg\" class=${labelClass}>${this.label}</schmancy-typography>\n\t\t\t</div>\n\t\t\t<slot @slotchange=${this.onSlotChange} style=\"display:none\"></slot>\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 { SchmancyElement } from '@mixins/index'\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')\nexport class SchmancySteps extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`]\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 value(v: number) {\n\t\tconst oldValue = this.controller.currentStep\n\t\tif (oldValue !== v) {\n\t\t\tthis.controller.setStep(v)\n\t\t}\n\t}\n\n\tget value(): number {\n\t\treturn this.controller.currentStep\n\t}\n\n\t/**\n\t * Block back-navigation for the whole stepper.\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tset lockBack(v: boolean) {\n\t\tthis.controller.lockBack = v\n\t}\n\tget lockBack(): boolean {\n\t\treturn this.controller.lockBack\n\t}\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\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 */\n\tprivate handleChange = (e: Event) => {\n\t\tif (e.target !== this) {\n\t\t\te.stopPropagation()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<nav aria-label=\"Progress\" @change=${this.handleChange}>\n\t\t\t\t<ol role=\"list\" style=\"display:contents\">\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': SchmancySteps\n\t}\n}\n"],"mappings":";;;;;;;;AAGA,IAAa,IAAb,MAAA;CAAA,cAAA;EAAA,KAAA,cACuB,IAAI,EAAgB,CAAA,GAAA,KAAA,WAAA,CAC/B;CAAA;CAEX,IAAA,eAAI;EACH,OAAO,KAAK,YAAY,aAAA;CACzB;CAEA,IAAA,cAAI;EACH,OAAO,KAAK,YAAY;CACzB;CAEA,QAAQ,GAAA;EACP,KAAK,YAAY,KAAK,CAAA;CACvB;AAAA,GAMY,IAAe,EAA+B,OAAO,sBAAA,CAAA,GCd3D,IAAA,cAA2B,EAAA;CAAA,YAAA,GAAA,GAAA;EAAA,MAAA,GAAA,CAAA,GAAA,KAAA,WAaM,GAAA,KAAA,QAEH,IAAA,KAAA,cACM,IAAA,KAAA,YAAA,CAEc,GAAA,KAAA,cAYlC,GAAA,KAAA,aAAA,CAGD;CAAA;CAAA;EAAA,KAAA,SAhCL,CAAC,CAAG;;;;;;;CAqCpB,oBAAA;EACC,MAAM,kBAAA,GACN,KAAK,MAAM,aACT,KAAK,EAAU,KAAK,aAAA,CAAA,EACpB,WAAU,MAAA;GACV,KAAK,cAAc,GACnB,KAAK,qBAAA;EAAA,CAAA;CAER;CAEA,eAAA;EACC,KAAK,qBAAA;CACN;CAEA,eAAA;EACC,KAAK,aAAa,KAAK,cAAc,MACpC,MAAK,EAAE,aAAa,KAAK,gBAAiB,EAAE,aAAa,KAAK,aAAa,EAAE,aAAa,KAAA,MAAW,EAAX,GAE3F,KAAK,qBAAA;CACN;CAEA,uBAAA;EACC,IAAM,IAAW,KAAK,aAAa,KAAK;EACxC,KAAK,MAAM,OAAO,KAAY,KAAK,aAAa,aAAa;CAC9D;CAEA,IAAA,SAAI;EACH,OAAI,KAAK,aAAa,KAAK,WAAW,KAAK,cAAoB,aAC3D,KAAK,aAAa,KAAK,cAAoB,YACxC;CACR;CAEA,cAAA;EACK,KAAK,MAAM,YAAY,KAAK,WAAW,KAAK,eAC5C,KAAK,WAAW,cACnB,KAAK,MAAM,QAAQ,KAAK,QAAA;CAE1B;CAEA,cAAsB,GAAA;EACP,AAAV,EAAE,QAAQ,WAAW,EAAE,QAAQ,QAClC,EAAE,eAAA,GACF,KAAK,YAAA;CAEP;CAEA,SAAA;EACC,IAAM,IAAW,KAAK,aAAa,KAAK,aAClC,IAAa,KAAK,WAAW,YAC7B,IAAa,KAAK,WAAW,YAC7B,IAAA,EAAa,KAAgB,KAAK,MAAM,YAAY,KAAK,WAAW,KAAK;EAE/E,OAAI,KAAK,aACD,KAAK,iBAAiB,GAAU,GAAY,GAAY,CAAA,IAEzD,KAAK,cAAc,GAAU,GAAY,GAAY,CAAA;CAC7D;CAEA,iBAAyB,GAAmB,GAAqB,GAAqB,GAAA;EACrF,IAAM,IAAmB;GACxB,uBAAuB;GACvB,qBAAA,CAAsB;EAAA,GAGjB,IAAuB;GAC5B,+GAAA,CAA+G;GAC/G,wEAAwE;GACxE,2FAAA,CAA4F,KAAc;GAC1G,yIAAyI;EAAA,GAGpI,IAAc;GACnB,oCAAoC;GACpC,yBAAyB;GACzB,0BAA0B;EAAA,GAGrB,IAAiB,IAAY,mBAAmB;EAEtD,OAAO,CAAI;;;0FAG6E,KAAK,SAAS,CAAA,EAAA;;;;;;;cAO1F,KAAK,YAAA;8FAC2E,EAAA,GAAkB,IAAW,gFAAgF,eAAA;;;oBAGvL,KAAK,SAAS,CAAA,EAAA;SACzB,IACC,CAAI;;;;;;;;aASJ,CAAI;;oEAEsD,IACtD,2BACA,sEAAA;;;;;;;;qDAQuC,KAAK,SAAS,CAAA,EAAA,IAAiB,KAAK,MAAA;;QAEjF,EACD,KAAK,mBACC,CAAI;;8EAE6D,IAAW,6BAA6B,GAAA,IAAO,KAAK,YAAA;;;;;;MAO5H,EACD,SACM,CAAI;;2BAEY,KAAK,aAAA;;;MAI1B,EAAA,CAAM,SAAgB,CAAI,qBAAqB,KAAK,aAAA,8BAAA,EAAA;;;CAGzD;CAEA,cAAsB,GAAmB,GAAqB,GAAsB,GAAA;EACnF,IAAM,IAAA,CAAU,KAAK,oBAAoB,QAAQ,eAAA,GAC3C,IAAa,IAChB,yBACA,IACC,oBACA,2BAEE,IAAW;GAChB;GACA,KAAc,IAAW,uBAAuB;GAChD,IAAW,+EAA+E;EAAA,EACzF,KAAK,GAAA;EAEP,OAAO,CAAI;;wGAGR,IACG,sGACA,GAAA;WAEG,IAAY,WAAW,eAAA;eACnB,IAAY,MAAM,KAAA;mBACd,IAAW,SAAS,QAAA;iBACtB,IAAY,cAAc,KAAK,UAAU,KAAK,MAAA;aAClD,KAAK,YAAA;eACH,KAAK,cAAA;;MAEd,EAAA,CACA,SACK,CAAI;;qFAGP,IAAa,uBAAuB,aAAA;;;;iBAM3B,EAAA;yDACwC,EAAA,GAAc,KAAK,MAAA;;uBAErD,KAAK,aAAA;;CAE3B;AAAA;AAAA,EAAA,CAnNC,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,GAAQ,EAAA,WAAA,YAAA,KAAA,CAAA,GAAA,EAAA,CAEzB,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,GAAQ,EAAA,WAAA,SAAA,KAAA,CAAA,GAAA,EAAA,CACzB,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,GAAQ,EAAA,WAAA,eAAA,KAAA,CAAA,GAAA,EAAA,CAEzB,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;AAAA,CAAA,CAAA,GAAM,EAAA,WAAA,aAAA,KAAA,CAAA,GAAA,EAAA,CAKzC,EAAQ,EAAE,SAAS,EAAA,CAAA,CAAA,GAAc,EAAA,WAAA,SAAA,KAAA,CAAA,GAAA,EAAA,CAMjC,EAAA,CAAA,GAAM,EAAA,WAAA,eAAA,KAAA,CAAA,GAAA,EAAA,CAGN,EAAA,CAAA,GAAM,EAAA,WAAA,cAAA,KAAA,CAAA,GAAA,EAAA,CAGN,EAAmB,EAAE,SAAA,CAAS,EAAA,CAAA,CAAA,GAAM,EAAA,WAAA,iBAAA,KAAA,CAAA,GAAA,IAAA,EAAA,CApCrC,EAAc,eAAA,CAAA,GAAe,CAAA;ACOvB,IAAA,IAAA,cAA4B,EAAA;CAAA,YAAA,GAAA,GAAA;EAAA,MAAA,GAAA,CAAA,GAAA,KAAA,aAOb,IAAI,KAAA,KAAA,kBAGP,KAAK,YAAA,KAAA,gBA4CC,MAAA;GACnB,EAAE,WAAW,QAChB,EAAE,gBAAA;EAAA;CAAA;CAAA;EAAA,KAAA,SAvDY,CAAC,CAAG;;;;;;CAWpB,IAAA,MACU,GAAA;EACQ,KAAK,WAAW,gBAChB,KAChB,KAAK,WAAW,QAAQ,CAAA;CAE1B;CAEA,IAAA,QAAI;EACH,OAAO,KAAK,WAAW;CACxB;CAKA,IAAA,SACa,GAAA;EACZ,KAAK,WAAW,WAAW;CAC5B;CACA,IAAA,WAAI;EACH,OAAO,KAAK,WAAW;CACxB;CAEA,oBAAA;EACC,MAAM,kBAAA,GAGN,KAAK,WAAW,aACd,KACA,EAAA,GACA,GAAI,MAAA;GACH,KAAK,cAAA,GACL,KAAK,oBAAoB,UAAU,EAAE,OAAO,EAAA,GAAQ,EAAE,SAAA,CAAS,EAAA,CAAA;EAAA,CAAA,GAEhE,EAAU,KAAK,aAAA,CAAA,EAEf,UAAA;CACH;CAWA,SAAA;EACC,OAAO,CAAI;wCAC2B,KAAK,aAAA;;;;;;CAM5C;AAAA;AAAA,EAAA,CA3DC,EAAQ,EAAE,SAAS,EAAA,CAAA,CAAA,GAAc,EAAA,WAAA,mBAAA,KAAA,CAAA,GAAA,EAAA,CAGjC,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;AAAA,CAAA,CAAA,GAAM,EAAA,WAAA,SAAA,IAAA,GAAA,EAAA,CAexC,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;AAAA,CAAA,CAAA,GAAM,EAAA,WAAA,YAAA,IAAA,GAAA,IAAA,EAAA,CA5B1C,EAAc,gBAAA,CAAA,GAAgB,CAAA;AAAA,SAAA,KAAA,cAAA,KAAA,eAAA,KAAA,iBAAA,KAAA"}

package/dist/{surface-CYBl8_a3.js → surface-B4Wn4SOO.js}

@@ -1,5 +1,5 @@
-import { t as e, u as t } from "./SchmancyElement-C3CpdNsi.js";
-import { t as n } from "./mixins-DTzfFVyv.js";
+import { t as e, u as t } from "./SchmancyElement-CDT2q1lA.js";
+import { t as n } from "./mixins-De1zjyhy.js";
 import { createContext as r, provide as i } from "@lit/context";
 import { customElement as a, property as o } from "lit/decorators.js";
 import { css as s, html as c } from "lit";

package/dist/{surface-CYBl8_a3.js.map → surface-B4Wn4SOO.js.map}

@@ -1 +1 @@
-{"version":3,"file":"surface-CYBl8_a3.js","names":[],"sources":["../src/surface/surface.ts"],"sourcesContent":["import { createContext, provide } from '@lit/context'\nimport { SchmancyElement } from '@mixins/index'\nimport { SurfaceMixin } from '@mixins/surface.mixin'\nimport { TSurfaceColor } from '@schmancy/types'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n\nexport type { SchmancySurfaceRounded, SchmancySurfaceElevation } from '@mixins/surface.mixin'\n\n/**\n * `<schmancy-surface>` component\n *\n * Styled container that supports rounding, elevation, and background/text color variants.\n * Sizing is the consumer's responsibility — use Tailwind utilities (`class=\"w-full h-full\"`)\n * on the element directly.\n *\n * SurfaceMixin automatically provides surfaceStyles CSS.\n *\n * @element schmancy-surface\n * @slot - Default slot for projecting child content.\n *\n * @example\n * <schmancy-surface class=\"w-full h-full\" rounded=\"all\" elevation=\"3\" type=\"surfaceBright\" scroller>\n *   <p>Your scrollable content here</p>\n * </schmancy-surface>\n */\n@customElement('schmancy-surface')\nexport class SchmancySurface extends SurfaceMixin(SchmancyElement) {\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t\tbox-sizing: border-box;\n\t\t\toverflow: visible;\n\t\t}\n\t`];\n\t/**\n\t * Specifies the surface type for styling.\n\t * Provided to descendant components via context.\n\t * @default 'container'\n\t */\n\t@provide({ context: SchmancySurfaceTypeContext })\n\t@property({ reflect: true })\n\toverride type: TSurfaceColor = 'subtle'\n\n\tprotected render(): unknown {\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-surface': SchmancySurface\n\t}\n}\n"],"mappings":";;;;;AAOA,IAAa,IAA6B,EAA6B,SAAA,GAsBhE,IAAA,cAA8B,EAAa,CAAA,EAAA;CAAA,YAAA,GAAA,GAAA;EAAA,MAAA,GAAA,CAAA,GAAA,KAAA,OAelB;CAAA;CAAA;EAAA,KAAA,SAdf,CAAC,CAAG;;;;;;;;CAgBpB,SAAA;EACC,OAAO,CAAI;CACZ;AAAA;AAAA,EAAA,CANC,EAAQ,EAAE,SAAS,EAAA,CAAA,GACnB,EAAS,EAAE,SAAA,CAAS,EAAA,CAAA,CAAA,GAAM,EAAA,WAAA,QAAA,KAAA,CAAA,GAAA,IAAA,EAAA,CAf3B,EAAc,kBAAA,CAAA,GAAkB,CAAA;AAAA,SAAA,KAAA,GAAA,KAAA"}
+{"version":3,"file":"surface-B4Wn4SOO.js","names":[],"sources":["../src/surface/surface.ts"],"sourcesContent":["import { createContext, provide } from '@lit/context'\nimport { SchmancyElement } from '@mixins/index'\nimport { SurfaceMixin } from '@mixins/surface.mixin'\nimport { TSurfaceColor } from '@schmancy/types'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n\nexport type { SchmancySurfaceRounded, SchmancySurfaceElevation } from '@mixins/surface.mixin'\n\n/**\n * `<schmancy-surface>` component\n *\n * Styled container that supports rounding, elevation, and background/text color variants.\n * Sizing is the consumer's responsibility — use Tailwind utilities (`class=\"w-full h-full\"`)\n * on the element directly.\n *\n * SurfaceMixin automatically provides surfaceStyles CSS.\n *\n * @element schmancy-surface\n * @slot - Default slot for projecting child content.\n *\n * @example\n * <schmancy-surface class=\"w-full h-full\" rounded=\"all\" elevation=\"3\" type=\"surfaceBright\" scroller>\n *   <p>Your scrollable content here</p>\n * </schmancy-surface>\n */\n@customElement('schmancy-surface')\nexport class SchmancySurface extends SurfaceMixin(SchmancyElement) {\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t\tbox-sizing: border-box;\n\t\t\toverflow: visible;\n\t\t}\n\t`];\n\t/**\n\t * Specifies the surface type for styling.\n\t * Provided to descendant components via context.\n\t * @default 'container'\n\t */\n\t@provide({ context: SchmancySurfaceTypeContext })\n\t@property({ reflect: true })\n\toverride type: TSurfaceColor = 'subtle'\n\n\tprotected render(): unknown {\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-surface': SchmancySurface\n\t}\n}\n"],"mappings":";;;;;AAOA,IAAa,IAA6B,EAA6B,SAAA,GAsBhE,IAAA,cAA8B,EAAa,CAAA,EAAA;CAAA,YAAA,GAAA,GAAA;EAAA,MAAA,GAAA,CAAA,GAAA,KAAA,OAelB;CAAA;CAAA;EAAA,KAAA,SAdf,CAAC,CAAG;;;;;;;;CAgBpB,SAAA;EACC,OAAO,CAAI;CACZ;AAAA;AAAA,EAAA,CANC,EAAQ,EAAE,SAAS,EAAA,CAAA,GACnB,EAAS,EAAE,SAAA,CAAS,EAAA,CAAA,CAAA,GAAM,EAAA,WAAA,QAAA,KAAA,CAAA,GAAA,IAAA,EAAA,CAf3B,EAAc,kBAAA,CAAA,GAAkB,CAAA;AAAA,SAAA,KAAA,GAAA,KAAA"}

package/dist/{surface-C3cxTcJD.cjs → surface-DRq6cVW6.cjs}

@@ -1,4 +1,4 @@
-require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-BBzRWB1w.cjs`),t=require(`./mixins-DPdzC9ZH.cjs`);let n=require(`@lit/context`),r=require(`lit/decorators.js`),i=require(`lit`);var a=(0,n.createContext)(`surface`),o=class extends t.t(e.t){constructor(...e){super(...e),this.type=`subtle`}static{this.styles=[i.css`
+require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-BHfQg3Tj.cjs`),t=require(`./mixins-DxHpyMHA.cjs`);let n=require(`@lit/context`),r=require(`lit/decorators.js`),i=require(`lit`);var a=(0,n.createContext)(`surface`),o=class extends t.t(e.t){constructor(...e){super(...e),this.type=`subtle`}static{this.styles=[i.css`
 		:host {
 			display: block;
 			box-sizing: border-box;