@mhmo91/schmancy 0.10.15 → 0.10.16

package/dist/state.cjs

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

package/dist/state.js

@@ -1,3 +1,3 @@
-import { t as e } from "./active-host-CvNYoprt.js";
-import { a as t, c as n, i as r, n as i, o as a, r as o, s, t as c } from "./state-BusMG6sM.js";
+import { t as e } from "./active-host-BP0zy_Y9.js";
+import { a as t, c as n, i as r, n as i, o as a, r as o, s, t as c } from "./state-nm8yzMPp.js";
 export { n as SchmancyContext, c as Signal, e as _activeHost, i as bindState, o as computed, r as effect, t as observe, a as state, s as stateFromObservable };

package/dist/steps.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-DvAYa-F7.cjs`),t=require(`./decorate-DpFmy0nm.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`@lit/context`),a=require(`lit/decorators.js`),o=require(`lit`),s=require(`lit/directives/when.js`);var c=class{constructor(){this._currentStep=new n.BehaviorSubject(1)}get currentStep$(){return this._currentStep.asObservable()}get currentStep(){return this._currentStep.value}setStep(e){this._currentStep.next(e)}},l=(0,i.createContext)(Symbol(`SchmancyStepsContext`)),u=class extends e.s{constructor(...e){super(...e),this.position=1,this.title=``,this.description=``,this.completed=!1,this.lockBack=!1,this.currentStep=1}static{this.styles=[o.css`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-BOOu6q2n.cjs`),t=require(`./active-host-jH3iloCR.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`@lit/context`),a=require(`lit/decorators.js`),o=require(`lit`),s=require(`lit/directives/when.js`);var c=class{constructor(){this._currentStep=new n.BehaviorSubject(1)}get currentStep$(){return this._currentStep.asObservable()}get currentStep(){return this._currentStep.value}setStep(e){this._currentStep.next(e)}},l=(0,i.createContext)(Symbol(`SchmancyStepsContext`)),u=class extends e.c{constructor(...e){super(...e),this.position=1,this.title=``,this.description=``,this.completed=!1,this.lockBack=!1,this.currentStep=1}static{this.styles=[o.css`
 	:host {
 		display: grid;
 		/* Base display is just grid, flex properties will be applied dynamically */
@@ -56,7 +56,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 						</div>
 					`)}
 			</li>
-		`}};t.t([(0,a.property)({type:Number})],u.prototype,`position`,void 0),t.t([(0,a.property)({type:String})],u.prototype,`title`,void 0),t.t([(0,a.property)({type:String})],u.prototype,`description`,void 0),t.t([(0,a.property)({type:Boolean,reflect:!0})],u.prototype,`completed`,void 0),t.t([(0,a.property)({type:Boolean})],u.prototype,`lockBack`,void 0),t.t([(0,i.consume)({context:l})],u.prototype,`steps`,void 0),t.t([(0,a.state)()],u.prototype,`currentStep`,void 0),u=t.t([(0,a.customElement)(`schmancy-step`)],u);var d=class extends e.s{constructor(...e){super(...e),this.controller=new c,this.stepsController=this.controller,this.gap=4,this.handleChange=e=>{e.target!==this&&e.stopPropagation()}}static{this.styles=[o.css`
+		`}};t.a([(0,a.property)({type:Number})],u.prototype,`position`,void 0),t.a([(0,a.property)({type:String})],u.prototype,`title`,void 0),t.a([(0,a.property)({type:String})],u.prototype,`description`,void 0),t.a([(0,a.property)({type:Boolean,reflect:!0})],u.prototype,`completed`,void 0),t.a([(0,a.property)({type:Boolean})],u.prototype,`lockBack`,void 0),t.a([(0,i.consume)({context:l})],u.prototype,`steps`,void 0),t.a([(0,a.state)()],u.prototype,`currentStep`,void 0),u=t.a([(0,a.customElement)(`schmancy-step`)],u);var d=class extends e.c{constructor(...e){super(...e),this.controller=new c,this.stepsController=this.controller,this.gap=4,this.handleChange=e=>{e.target!==this&&e.stopPropagation()}}static{this.styles=[o.css`
 	:host {
 		display: block;
 		overflow: auto;
@@ -67,4 +67,4 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 					<slot></slot>
 				</ol>
 			</nav>
-		`}};t.t([(0,i.provide)({context:l})],d.prototype,`stepsController`,void 0),t.t([(0,a.property)({type:Number,reflect:!0})],d.prototype,`currentStep`,null),t.t([(0,a.property)({type:Number,reflect:!0})],d.prototype,`gap`,void 0),d=t.t([(0,a.customElement)(`schmancy-steps-container`)],d),Object.defineProperty(exports,`SchmancyStep`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`SchmancyStepsContainer`,{enumerable:!0,get:function(){return d}}),exports.StepsController=c,exports.stepsContext=l;
+		`}};t.a([(0,i.provide)({context:l})],d.prototype,`stepsController`,void 0),t.a([(0,a.property)({type:Number,reflect:!0})],d.prototype,`currentStep`,null),t.a([(0,a.property)({type:Number,reflect:!0})],d.prototype,`gap`,void 0),d=t.a([(0,a.customElement)(`schmancy-steps-container`)],d),Object.defineProperty(exports,`SchmancyStep`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`SchmancyStepsContainer`,{enumerable:!0,get:function(){return d}}),exports.StepsController=c,exports.stepsContext=l;

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

package/dist/steps.js

@@ -1,5 +1,5 @@
-import { s as e } from "./mixins-BV0w2yIE.js";
-import { t } from "./decorate-23nYs4Le.js";
+import { c as e } from "./mixins-BWb9_e1s.js";
+import { a as t } from "./active-host-BP0zy_Y9.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";

package/dist/{surface-A82O1kgu.js → surface-BtMMHKol.js}

@@ -1,5 +1,5 @@
-import { s as e, t } from "./mixins-BV0w2yIE.js";
-import { t as n } from "./decorate-23nYs4Le.js";
+import { c as e, t } from "./mixins-BWb9_e1s.js";
+import { a as n } from "./active-host-BP0zy_Y9.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-A82O1kgu.js.map → surface-BtMMHKol.js.map}

@@ -1 +1 @@
-{"version":3,"file":"surface-A82O1kgu.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\n// Re-export types for backwards compatibility\nexport type { SchmancySurfaceFill, SchmancySurfaceRounded, SchmancySurfaceElevation } from '@mixins/surface.mixin'\n\n/**\n * `<schmancy-surface>` component\n *\n * This component renders a styled container that adapts its dimensions based on the `fill` property.\n * It supports various rounding options, elevation levels, and applies background and text color classes\n * based on the specified surface variant. Additionally, when the `scroller` property is true, the component\n * enables internal scrolling by applying overflow and scroll-behavior styles.\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 fill=\"all\" 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,UAAA,EAwBhE,IAAA,cAA8B,EAAa,EAAA,CAAA;CAAA,YAAA,GAAA,GAAA;AAAA,QAAA,GAAA,EAAA,EAAA,KAAA,OAelB;;CAAA;AAAA,OAAA,SAdf,CAAC,CAAG;;;;;;;;CAgBpB,SAAA;AACC,SAAO,CAAI;;;AAAA,EAAA,CALX,EAAQ,EAAE,SAAS,GAAA,CAAA,EACnB,EAAS,EAAE,SAAA,CAAS,GAAA,CAAA,CAAA,EAAO,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAf5B,EAAc,mBAAA,CAAA,EAAmB,EAAA;AAAA,SAAA,KAAA,GAAA,KAAA"}
+{"version":3,"file":"surface-BtMMHKol.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\n// Re-export types for backwards compatibility\nexport type { SchmancySurfaceFill, SchmancySurfaceRounded, SchmancySurfaceElevation } from '@mixins/surface.mixin'\n\n/**\n * `<schmancy-surface>` component\n *\n * This component renders a styled container that adapts its dimensions based on the `fill` property.\n * It supports various rounding options, elevation levels, and applies background and text color classes\n * based on the specified surface variant. Additionally, when the `scroller` property is true, the component\n * enables internal scrolling by applying overflow and scroll-behavior styles.\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 fill=\"all\" 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,UAAA,EAwBhE,IAAA,cAA8B,EAAa,EAAA,CAAA;CAAA,YAAA,GAAA,GAAA;AAAA,QAAA,GAAA,EAAA,EAAA,KAAA,OAelB;;CAAA;AAAA,OAAA,SAdf,CAAC,CAAG;;;;;;;;CAgBpB,SAAA;AACC,SAAO,CAAI;;;AAAA,EAAA,CALX,EAAQ,EAAE,SAAS,GAAA,CAAA,EACnB,EAAS,EAAE,SAAA,CAAS,GAAA,CAAA,CAAA,EAAO,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAf5B,EAAc,mBAAA,CAAA,EAAmB,EAAA;AAAA,SAAA,KAAA,GAAA,KAAA"}

package/dist/surface-CgXeKdGL.cjs

@@ -0,0 +1,7 @@
+require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-BOOu6q2n.cjs`),t=require(`./active-host-jH3iloCR.cjs`);let n=require(`@lit/context`),r=require(`lit/decorators.js`),i=require(`lit`);var a=(0,n.createContext)(`surface`),o=class extends e.t(e.c){constructor(...e){super(...e),this.type=`subtle`}static{this.styles=[i.css`
+		:host {
+			display: block;
+			box-sizing: border-box;
+			overflow: visible;
+		}
+	`]}render(){return i.html`<slot></slot>`}};t.a([(0,n.provide)({context:a}),(0,r.property)({reflect:!0})],o.prototype,`type`,void 0),o=t.a([(0,r.customElement)(`schmancy-surface`)],o),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});

package/dist/{surface-BpppoNXN.cjs.map → surface-CgXeKdGL.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"surface-BpppoNXN.cjs","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\n// Re-export types for backwards compatibility\nexport type { SchmancySurfaceFill, SchmancySurfaceRounded, SchmancySurfaceElevation } from '@mixins/surface.mixin'\n\n/**\n * `<schmancy-surface>` component\n *\n * This component renders a styled container that adapts its dimensions based on the `fill` property.\n * It supports various rounding options, elevation levels, and applies background and text color classes\n * based on the specified surface variant. Additionally, when the `scroller` property is true, the component\n * enables internal scrolling by applying overflow and scroll-behavior styles.\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 fill=\"all\" 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":"4LAOA,IAAa,GAAA,EAAA,EAAA,eAA0D,UAAA,CAwBhE,EAAA,cAA8B,EAAA,EAAa,EAAA,EAAA,AAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,EAAA,CAAA,KAAA,KAelB,SAAA,OAAA,KAAA,OAdf,CAAC,EAAA,GAAG;;;;;;IAgBpB,QAAA,CACC,MAAO,GAAA,IAAI,kBAAA,EAAA,EAAA,EAAA,EAAA,EAAA,SALH,CAAE,QAAS,EAAA,CAAA,EAA6B,EAAA,EAAA,UACvC,CAAE,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eAfd,mBAAA,CAAA,CAAmB,EAAA,CAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA,CAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}
+{"version":3,"file":"surface-CgXeKdGL.cjs","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\n// Re-export types for backwards compatibility\nexport type { SchmancySurfaceFill, SchmancySurfaceRounded, SchmancySurfaceElevation } from '@mixins/surface.mixin'\n\n/**\n * `<schmancy-surface>` component\n *\n * This component renders a styled container that adapts its dimensions based on the `fill` property.\n * It supports various rounding options, elevation levels, and applies background and text color classes\n * based on the specified surface variant. Additionally, when the `scroller` property is true, the component\n * enables internal scrolling by applying overflow and scroll-behavior styles.\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 fill=\"all\" 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":"+LAOA,IAAa,GAAA,EAAA,EAAA,eAA0D,UAAA,CAwBhE,EAAA,cAA8B,EAAA,EAAa,EAAA,EAAA,AAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,EAAA,CAAA,KAAA,KAelB,SAAA,OAAA,KAAA,OAdf,CAAC,EAAA,GAAG;;;;;;IAgBpB,QAAA,CACC,MAAO,GAAA,IAAI,kBAAA,EAAA,EAAA,EAAA,EAAA,EAAA,SALH,CAAE,QAAS,EAAA,CAAA,EAA6B,EAAA,EAAA,UACvC,CAAE,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eAfd,mBAAA,CAAA,CAAmB,EAAA,CAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA,CAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}

package/dist/surface.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./surface-BpppoNXN.cjs`);Object.defineProperty(exports,`SchmancySurface`,{enumerable:!0,get:function(){return e.t}}),exports.SchmancySurfaceTypeContext=e.n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./surface-CgXeKdGL.cjs`);Object.defineProperty(exports,`SchmancySurface`,{enumerable:!0,get:function(){return e.t}}),exports.SchmancySurfaceTypeContext=e.n;

package/dist/surface.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./surface-A82O1kgu.js";
+import { n as e, t } from "./surface-BtMMHKol.js";
 export { t as SchmancySurface, e as SchmancySurfaceTypeContext };

package/dist/switch.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-DvAYa-F7.cjs`),t=require(`./decorate-DpFmy0nm.cjs`);let n=require(`lit/decorators.js`),r=require(`lit`);var i=class extends e.s{static{this.styles=[r.css`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-BOOu6q2n.cjs`),t=require(`./active-host-jH3iloCR.cjs`);let n=require(`lit/decorators.js`),r=require(`lit`);var i=class extends e.o(r.css`
 	:host {
 		display: inline-block;
 	}
@@ -51,7 +51,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 	@media (prefers-reduced-motion: reduce) {
 		.track, .thumb { transition: none; }
 	}
-`]}static{this.formAssociated=!0}static{this.shadowRootOptions={...r.LitElement.shadowRootOptions,delegatesFocus:!0}}constructor(){super(),this.checked=!1,this.disabled=!1,this.required=!1,this.name=``,this.value=`on`,this.label=``,this._toggle=()=>{this.disabled||(this.checked=!this.checked,this.dispatchEvent(new CustomEvent(`change`,{detail:{value:this.checked},bubbles:!0,composed:!0})))},this._onKeydown=e=>{e.key!==` `&&e.key!==`Enter`||(e.preventDefault(),this._toggle())};try{this.internals=this.attachInternals()}catch{this.internals=void 0}}get form(){return this.internals?.form??null}updated(e){super.updated?.(e),(e.has(`checked`)||e.has(`value`)||e.has(`name`))&&(this.internals?.setFormValue(this.checked?this.value:null),this.checked?this.internals?.states.add(`checked`):this.internals?.states.delete(`checked`)),(e.has(`required`)||e.has(`checked`))&&(this.required&&!this.checked?this.internals?.setValidity({valueMissing:!0},`This switch is required.`):this.internals?.setValidity({}))}formResetCallback(){this.checked=this.hasAttribute(`checked`)}formDisabledCallback(e){this.disabled=e}checkValidity(){return this.internals?.checkValidity()??!0}reportValidity(){return this.internals?.reportValidity()??!0}render(){return r.html`
+`){constructor(...e){super(...e),this.value=`on`,this.checked=!1,this._checkedDefault=!1,this._toggle=()=>{this.disabled||(this.checked=!this.checked,this.markTouched(),this.emitChange({value:this.checked}))},this._onKeydown=e=>{e.key!==` `&&e.key!==`Enter`||(e.preventDefault(),this._toggle())}}static{this.shadowRootOptions={...r.LitElement.shadowRootOptions,delegatesFocus:!0}}firstUpdated(e){super.firstUpdated(e),this._checkedDefault=this.checked}get dirty(){return this.checked!==this._checkedDefault}willUpdate(e){super.willUpdate(e),(e.has(`checked`)||e.has(`value`)||e.has(`name`))&&(this.internals?.setFormValue(this.checked?this.value:null),this.checked?this.internals?.states.add(`checked`):this.internals?.states.delete(`checked`),this.checkValidity()),(e.has(`required`)||e.has(`disabled`))&&this.checkValidity()}checkValidity(){if(this.disabled)return this.internals?.setValidity({}),!0;let e=!this.required||this.checked,t=e?``:`This switch is required.`;return this.internals?.setValidity(e?{}:{valueMissing:!0},e?void 0:t),this._shouldShowError()&&(this.error=!e,this.validationMessage=t),e}toFormEntries(){return this.name&&!this.disabled&&this.checked?[[this.name,this.value]]:[]}resetForm(){this.checked=this._checkedDefault,super.resetForm()}render(){return r.html`
 			<button
 				type="button"
 				role="switch"
@@ -66,4 +66,4 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 					<span part="thumb" class="thumb"></span>
 				</span>
 			</button>
-		`}};t.t([(0,n.property)({type:Boolean,reflect:!0})],i.prototype,`checked`,void 0),t.t([(0,n.property)({type:Boolean,reflect:!0})],i.prototype,`disabled`,void 0),t.t([(0,n.property)({type:Boolean,reflect:!0})],i.prototype,`required`,void 0),t.t([(0,n.property)({type:String})],i.prototype,`name`,void 0),t.t([(0,n.property)({type:String})],i.prototype,`value`,void 0),t.t([(0,n.property)({type:String})],i.prototype,`label`,void 0),i=t.t([(0,n.customElement)(`schmancy-switch`)],i),Object.defineProperty(exports,`SchmancySwitch`,{enumerable:!0,get:function(){return i}});
+		`}};t.a([(0,n.property)({type:String,reflect:!0})],i.prototype,`value`,void 0),t.a([(0,n.property)({type:Boolean,reflect:!0})],i.prototype,`checked`,void 0),i=t.a([(0,n.customElement)(`schmancy-switch`)],i),Object.defineProperty(exports,`SchmancySwitch`,{enumerable:!0,get:function(){return i}});

package/dist/switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.cjs","names":[],"sources":["../src/switch/switch.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport type SchmancySwitchChangeEvent = CustomEvent<{ value: boolean }>\n\n/**\n * Binary on/off control. Form-associated, keyboard-accessible, semantically a\n * switch (ARIA role=\"switch\"). Distinct from `schmancy-checkbox`: a switch\n * represents an immediate state change, a checkbox represents a selection in\n * a form to be submitted.\n *\n * @element schmancy-switch\n * @fires change - `CustomEvent<{ value: boolean }>` when the state changes.\n * @attr checked - Initial checked state (also reflected via `value`).\n * @attr disabled - Disables interaction.\n * @attr required - Requires the switch to be on for form validity.\n * @attr name - Form field name for submission.\n * @csspart track - The background track.\n * @csspart thumb - The moving thumb.\n */\n@customElement('schmancy-switch')\nexport class SchmancySwitch extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\t:host([disabled]) {\n\t\topacity: 0.38;\n\t\tpointer-events: none;\n\t}\n\tbutton {\n\t\tappearance: none;\n\t\tbackground: none;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tcursor: pointer;\n\t\tfont: inherit;\n\t}\n\t.track {\n\t\twidth: 2.25rem;\n\t\theight: 1.25rem;\n\t\tborder-radius: 999px;\n\t\tbackground: var(--schmancy-sys-color-surface-containerHighest, #e0e0e0);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline, #79747e);\n\t\tposition: relative;\n\t\ttransition: background 150ms ease, border-color 150ms ease;\n\t}\n\t:host(:state(checked)) .track {\n\t\tbackground: var(--schmancy-sys-color-primary-default, #6750a4);\n\t\tborder-color: var(--schmancy-sys-color-primary-default, #6750a4);\n\t}\n\t.thumb {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 0.125rem;\n\t\twidth: 0.75rem;\n\t\theight: 0.75rem;\n\t\tborder-radius: 999px;\n\t\tbackground: var(--schmancy-sys-color-outline, #79747e);\n\t\ttransform: translateY(-50%);\n\t\ttransition: transform 150ms ease, background 150ms ease, width 150ms ease, height 150ms ease;\n\t}\n\t:host(:state(checked)) .thumb {\n\t\ttransform: translate(1rem, -50%);\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t\tbackground: var(--schmancy-sys-color-primary-on, #ffffff);\n\t}\n\tbutton:focus-visible .track {\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default, #6750a4);\n\t\toutline-offset: 2px;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.track, .thumb { transition: none; }\n\t}\n`];\n\tstatic formAssociated = true\n\tprivate internals: ElementInternals | undefined\n\n\t@property({ type: Boolean, reflect: true }) checked = false\n\t@property({ type: Boolean, reflect: true }) disabled = false\n\t@property({ type: Boolean, reflect: true }) required = false\n\t@property({ type: String }) name = ''\n\t@property({ type: String }) value = 'on'\n\t@property({ type: String }) label = ''\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t}\n\n\tget form(): HTMLFormElement | null {\n\t\treturn this.internals?.form ?? null\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('checked') || changed.has('value') || changed.has('name')) {\n\t\t\tthis.internals?.setFormValue(this.checked ? this.value : null)\n\t\t\tif (this.checked) this.internals?.states.add('checked')\n\t\t\telse this.internals?.states.delete('checked')\n\t\t}\n\t\tif (changed.has('required') || changed.has('checked')) {\n\t\t\tif (this.required && !this.checked) {\n\t\t\t\tthis.internals?.setValidity({ valueMissing: true }, 'This switch is required.')\n\t\t\t} else {\n\t\t\t\tthis.internals?.setValidity({})\n\t\t\t}\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this.hasAttribute('checked')\n\t}\n\n\tformDisabledCallback(disabled: boolean) {\n\t\tthis.disabled = disabled\n\t}\n\n\tpublic checkValidity(): boolean {\n\t\treturn this.internals?.checkValidity() ?? true\n\t}\n\n\tpublic reportValidity(): boolean {\n\t\treturn this.internals?.reportValidity() ?? true\n\t}\n\n\tprivate _toggle = () => {\n\t\tif (this.disabled) return\n\t\tthis.checked = !this.checked\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('change', {\n\t\t\t\tdetail: { value: this.checked },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\tprivate _onKeydown = (e: KeyboardEvent) => {\n\t\tif (e.key === ' ' || e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tthis._toggle()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"switch\"\n\t\t\t\taria-checked=${this.checked ? 'true' : 'false'}\n\t\t\t\taria-label=${this.label || nothing}\n\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t@click=${this._toggle}\n\t\t\t\t@keydown=${this._onKeydown}\n\t\t\t>\n\t\t\t\t<span part=\"track\" class=\"track\">\n\t\t\t\t\t<span part=\"thumb\" class=\"thumb\"></span>\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-switch': SchmancySwitch\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"switch.cjs","names":[],"sources":["../src/form/fields/switch/switch.ts"],"sourcesContent":["import { css, html, LitElement, nothing, type PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SchmancyFormField } from '@mixins/index'\n\nexport type SchmancySwitchChangeEvent = CustomEvent<{ value: boolean }>\n\n/**\n * Binary on/off control. Form-associated, keyboard-accessible, semantically a\n * switch (ARIA role=\"switch\"). Distinct from `schmancy-checkbox`: a switch\n * represents an immediate state change, a checkbox represents a selection in\n * a form to be submitted.\n *\n * @element schmancy-switch\n * @fires change - `CustomEvent<{ value: boolean }>` when the state changes.\n * @csspart track - The background track.\n * @csspart thumb - The moving thumb.\n */\n@customElement('schmancy-switch')\nexport class SchmancySwitch extends SchmancyFormField(css`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\t:host([disabled]) {\n\t\topacity: 0.38;\n\t\tpointer-events: none;\n\t}\n\tbutton {\n\t\tappearance: none;\n\t\tbackground: none;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tcursor: pointer;\n\t\tfont: inherit;\n\t}\n\t.track {\n\t\twidth: 2.25rem;\n\t\theight: 1.25rem;\n\t\tborder-radius: 999px;\n\t\tbackground: var(--schmancy-sys-color-surface-containerHighest, #e0e0e0);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline, #79747e);\n\t\tposition: relative;\n\t\ttransition: background 150ms ease, border-color 150ms ease;\n\t}\n\t:host(:state(checked)) .track {\n\t\tbackground: var(--schmancy-sys-color-primary-default, #6750a4);\n\t\tborder-color: var(--schmancy-sys-color-primary-default, #6750a4);\n\t}\n\t.thumb {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 0.125rem;\n\t\twidth: 0.75rem;\n\t\theight: 0.75rem;\n\t\tborder-radius: 999px;\n\t\tbackground: var(--schmancy-sys-color-outline, #79747e);\n\t\ttransform: translateY(-50%);\n\t\ttransition: transform 150ms ease, background 150ms ease, width 150ms ease, height 150ms ease;\n\t}\n\t:host(:state(checked)) .thumb {\n\t\ttransform: translate(1rem, -50%);\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t\tbackground: var(--schmancy-sys-color-primary-on, #ffffff);\n\t}\n\tbutton:focus-visible .track {\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default, #6750a4);\n\t\toutline-offset: 2px;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.track, .thumb { transition: none; }\n\t}\n`) {\n\t// `formAssociated`, `internals`, `name`, `disabled`, `required`, `id`,\n\t// `label`, `error`, `validationMessage`, `validateOn`, touched/dirty/submitted,\n\t// `markTouched/markSubmitted`, `formResetCallback`, `formDisabledCallback`,\n\t// FIELD_CONNECT_EVENT dispatch — all from the mixin.\n\n\t// Inner <button> is the focusable surface; route host focus to it.\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\t/**\n\t * The string written to FormData when the switch is on. Native\n\t * `<input type=checkbox value=\"...\">` semantics. Defaults to `'on'` to\n\t * match HTML checkbox conventions.\n\t */\n\t@property({ type: String, reflect: true })\n\toverride value: string = 'on'\n\n\t/** Boolean on/off state. Native `<input type=checkbox>.checked` semantics. */\n\t@property({ type: Boolean, reflect: true })\n\tchecked: boolean = false\n\n\t/** Snapshot of `checked` at first render — drives the `dirty` override. */\n\tprivate _checkedDefault: boolean = false\n\n\toverride firstUpdated(changed: PropertyValues): void {\n\t\tsuper.firstUpdated(changed)\n\t\tthis._checkedDefault = this.checked\n\t}\n\n\t/**\n\t * Override the mixin's value-vs-default `dirty` getter — for switch the\n\t * meaningful state is `checked`, not the FormData string.\n\t */\n\toverride get dirty(): boolean {\n\t\treturn this.checked !== this._checkedDefault\n\t}\n\n\toverride willUpdate(changed: PropertyValues): void {\n\t\tsuper.willUpdate(changed)\n\t\tif (changed.has('checked') || changed.has('value') || changed.has('name')) {\n\t\t\t// Switch contributes `value` to FormData when on, nothing when off\n\t\t\t// (native checkbox semantics; overrides the mixin's scalar default).\n\t\t\tthis.internals?.setFormValue(this.checked ? this.value : null)\n\t\t\tif (this.checked) this.internals?.states.add('checked')\n\t\t\telse this.internals?.states.delete('checked')\n\t\t\t// Mixin's value-changed branch won't fire `checkValidity` here\n\t\t\t// (validateOn: 'dirty' gate stays closed until checked diverges).\n\t\t\t// Sync platform validity explicitly so `form.checkValidity()` is\n\t\t\t// correct from first render.\n\t\t\tthis.checkValidity()\n\t\t}\n\t\tif (changed.has('required') || changed.has('disabled')) {\n\t\t\tthis.checkValidity()\n\t\t}\n\t}\n\n\t/** Override — switch validity is `checked === true` when required. */\n\toverride checkValidity(): boolean {\n\t\tif (this.disabled) {\n\t\t\tthis.internals?.setValidity({})\n\t\t\treturn true\n\t\t}\n\t\tconst isValid = !this.required || this.checked\n\t\tconst message = isValid ? '' : 'This switch is required.'\n\n\t\tthis.internals?.setValidity(\n\t\t\tisValid ? {} : { valueMissing: true },\n\t\t\tisValid ? undefined : message,\n\t\t)\n\n\t\tif (this._shouldShowError()) {\n\t\t\tthis.error = !isValid\n\t\t\tthis.validationMessage = message\n\t\t}\n\t\treturn isValid\n\t}\n\n\t/** Override — emit only when the switch is on. */\n\toverride toFormEntries(): Array<[string, FormDataEntryValue]> {\n\t\tif (!this.name || this.disabled || !this.checked) return []\n\t\treturn [[this.name, this.value]]\n\t}\n\n\toverride resetForm(): void {\n\t\tthis.checked = this._checkedDefault\n\t\tsuper.resetForm()\n\t}\n\n\tprivate _toggle = () => {\n\t\tif (this.disabled) return\n\t\tthis.checked = !this.checked\n\t\tthis.markTouched()\n\t\tthis.emitChange({ value: this.checked })\n\t}\n\n\tprivate _onKeydown = (e: KeyboardEvent) => {\n\t\tif (e.key === ' ' || e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tthis._toggle()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"switch\"\n\t\t\t\taria-checked=${this.checked ? 'true' : 'false'}\n\t\t\t\taria-label=${this.label || nothing}\n\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t@click=${this._toggle}\n\t\t\t\t@keydown=${this._onKeydown}\n\t\t\t>\n\t\t\t\t<span part=\"track\" class=\"track\">\n\t\t\t\t\t<span part=\"thumb\" class=\"thumb\"></span>\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-switch': SchmancySwitch\n\t}\n}\n"],"mappings":"wOAkBO,IAAA,EAAA,cAA6B,EAAA,EAAkB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAuE/B,KAAA,KAAA,QAAA,CAIN,EAAA,KAAA,gBAAA,CAGgB,EAAA,KAAA,YAAA,CAmE9B,KAAK,WACT,KAAK,QAAA,CAAW,KAAK,QACrB,KAAK,aAAA,CACL,KAAK,WAAW,CAAE,MAAO,KAAK,QAAA,CAAA,GAAA,KAAA,WAGT,GAAA,CACjB,EAAE,MAAQ,KAAO,EAAE,MAAQ,UAC9B,EAAE,gBAAA,CACF,KAAK,SAAA,GAAA,OAAA,KAAA,kBA9F8B,CAAA,GACjC,EAAA,WAAW,kBACd,eAAA,CAAgB,EAAA,CAkBjB,aAAsB,EAAA,CACrB,MAAM,aAAa,EAAA,CACnB,KAAK,gBAAkB,KAAK,QAO7B,IAAA,OAAa,CACZ,OAAO,KAAK,UAAY,KAAK,gBAG9B,WAAoB,EAAA,CACnB,MAAM,WAAW,EAAA,EACb,EAAQ,IAAI,UAAA,EAAc,EAAQ,IAAI,QAAA,EAAY,EAAQ,IAAI,OAAA,IAGjE,KAAK,WAAW,aAAa,KAAK,QAAU,KAAK,MAAQ,KAAA,CACrD,KAAK,QAAS,KAAK,WAAW,OAAO,IAAI,UAAA,CACxC,KAAK,WAAW,OAAO,OAAO,UAAA,CAKnC,KAAK,eAAA,GAEF,EAAQ,IAAI,WAAA,EAAe,EAAQ,IAAI,WAAA,GAC1C,KAAK,eAAA,CAKP,eAAA,CACC,GAAI,KAAK,SAER,OADA,KAAK,WAAW,YAAY,EAAA,CAAA,CAAA,CACrB,EAER,IAAM,EAAA,CAAW,KAAK,UAAY,KAAK,QACjC,EAAU,EAAU,GAAK,2BAW/B,OATA,KAAK,WAAW,YACf,EAAU,EAAA,CAAK,CAAE,aAAA,CAAc,EAAA,CAC/B,EAAA,IAAU,GAAY,EAAA,CAGnB,KAAK,kBAAA,GACR,KAAK,MAAA,CAAS,EACd,KAAK,kBAAoB,GAEnB,EAIR,eAAA,CACC,OAAK,KAAK,MAAA,CAAQ,KAAK,UAAa,KAAK,QAClC,CAAC,CAAC,KAAK,KAAM,KAAK,MAAA,CAAA,CADgC,EAAA,CAI1D,WAAA,CACC,KAAK,QAAU,KAAK,gBACpB,MAAM,WAAA,CAiBP,QAAA,CACC,MAAO,GAAA,IAAI;;;;mBAIM,KAAK,QAAU,OAAS,QAAA;iBAC1B,KAAK,OAAS,EAAA,QAAA;oBACX,KAAK,SAAW,OAAS,QAAA;gBAC7B,KAAK,SAAA;aACR,KAAK,QAAA;eACH,KAAK,WAAA;;;;;;0BAlGT,CAAE,KAAM,OAAQ,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,QAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAIhC,CAAE,KAAM,QAAS,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,UAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eA3E7B,kBAAA,CAAA,CAAkB,EAAA,CAAA,OAAA,eAAA,QAAA,iBAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}

package/dist/switch.js

@@ -1,10 +1,8 @@
-import { s as e } from "./mixins-BV0w2yIE.js";
-import { t } from "./decorate-23nYs4Le.js";
+import { o as e } from "./mixins-BWb9_e1s.js";
+import { a as t } from "./active-host-BP0zy_Y9.js";
 import { customElement as n, property as r } from "lit/decorators.js";
 import { LitElement as i, css as a, html as o, nothing as s } from "lit";
-var c = class extends e {
-	static {
-		this.styles = [a`
+var c = class extends e(a`
 	:host {
 		display: inline-block;
 	}
@@ -57,10 +55,13 @@ var c = class extends e {
 	@media (prefers-reduced-motion: reduce) {
 		.track, .thumb { transition: none; }
 	}
-`];
-	}
-	static {
-		this.formAssociated = !0;
+`) {
+	constructor(...e) {
+		super(...e), this.value = "on", this.checked = !1, this._checkedDefault = !1, this._toggle = () => {
+			this.disabled || (this.checked = !this.checked, this.markTouched(), this.emitChange({ value: this.checked }));
+		}, this._onKeydown = (e) => {
+			e.key !== " " && e.key !== "Enter" || (e.preventDefault(), this._toggle());
+		};
 	}
 	static {
 		this.shadowRootOptions = {
@@ -68,39 +69,25 @@ var c = class extends e {
 			delegatesFocus: !0
 		};
 	}
-	constructor() {
-		super(), this.checked = !1, this.disabled = !1, this.required = !1, this.name = "", this.value = "on", this.label = "", this._toggle = () => {
-			this.disabled || (this.checked = !this.checked, this.dispatchEvent(new CustomEvent("change", {
-				detail: { value: this.checked },
-				bubbles: !0,
-				composed: !0
-			})));
-		}, this._onKeydown = (e) => {
-			e.key !== " " && e.key !== "Enter" || (e.preventDefault(), this._toggle());
-		};
-		try {
-			this.internals = this.attachInternals();
-		} catch {
-			this.internals = void 0;
-		}
-	}
-	get form() {
-		return this.internals?.form ?? null;
+	firstUpdated(e) {
+		super.firstUpdated(e), this._checkedDefault = this.checked;
 	}
-	updated(e) {
-		super.updated?.(e), (e.has("checked") || e.has("value") || e.has("name")) && (this.internals?.setFormValue(this.checked ? this.value : null), this.checked ? this.internals?.states.add("checked") : this.internals?.states.delete("checked")), (e.has("required") || e.has("checked")) && (this.required && !this.checked ? this.internals?.setValidity({ valueMissing: !0 }, "This switch is required.") : this.internals?.setValidity({}));
+	get dirty() {
+		return this.checked !== this._checkedDefault;
 	}
-	formResetCallback() {
-		this.checked = this.hasAttribute("checked");
-	}
-	formDisabledCallback(e) {
-		this.disabled = e;
+	willUpdate(e) {
+		super.willUpdate(e), (e.has("checked") || e.has("value") || e.has("name")) && (this.internals?.setFormValue(this.checked ? this.value : null), this.checked ? this.internals?.states.add("checked") : this.internals?.states.delete("checked"), this.checkValidity()), (e.has("required") || e.has("disabled")) && this.checkValidity();
 	}
 	checkValidity() {
-		return this.internals?.checkValidity() ?? !0;
+		if (this.disabled) return this.internals?.setValidity({}), !0;
+		let e = !this.required || this.checked, t = e ? "" : "This switch is required.";
+		return this.internals?.setValidity(e ? {} : { valueMissing: !0 }, e ? void 0 : t), this._shouldShowError() && (this.error = !e, this.validationMessage = t), e;
+	}
+	toFormEntries() {
+		return this.name && !this.disabled && this.checked ? [[this.name, this.value]] : [];
 	}
-	reportValidity() {
-		return this.internals?.reportValidity() ?? !0;
+	resetForm() {
+		this.checked = this._checkedDefault, super.resetForm();
 	}
 	render() {
 		return o`
@@ -122,13 +109,10 @@ var c = class extends e {
 	}
 };
 t([r({
-	type: Boolean,
-	reflect: !0
-})], c.prototype, "checked", void 0), t([r({
-	type: Boolean,
+	type: String,
 	reflect: !0
-})], c.prototype, "disabled", void 0), t([r({
+})], c.prototype, "value", void 0), t([r({
 	type: Boolean,
 	reflect: !0
-})], c.prototype, "required", void 0), t([r({ type: String })], c.prototype, "name", void 0), t([r({ type: String })], c.prototype, "value", void 0), t([r({ type: String })], c.prototype, "label", void 0), c = t([n("schmancy-switch")], c);
+})], c.prototype, "checked", void 0), c = t([n("schmancy-switch")], c);
 export { c as SchmancySwitch };

package/dist/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../src/switch/switch.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport type SchmancySwitchChangeEvent = CustomEvent<{ value: boolean }>\n\n/**\n * Binary on/off control. Form-associated, keyboard-accessible, semantically a\n * switch (ARIA role=\"switch\"). Distinct from `schmancy-checkbox`: a switch\n * represents an immediate state change, a checkbox represents a selection in\n * a form to be submitted.\n *\n * @element schmancy-switch\n * @fires change - `CustomEvent<{ value: boolean }>` when the state changes.\n * @attr checked - Initial checked state (also reflected via `value`).\n * @attr disabled - Disables interaction.\n * @attr required - Requires the switch to be on for form validity.\n * @attr name - Form field name for submission.\n * @csspart track - The background track.\n * @csspart thumb - The moving thumb.\n */\n@customElement('schmancy-switch')\nexport class SchmancySwitch extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\t:host([disabled]) {\n\t\topacity: 0.38;\n\t\tpointer-events: none;\n\t}\n\tbutton {\n\t\tappearance: none;\n\t\tbackground: none;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tcursor: pointer;\n\t\tfont: inherit;\n\t}\n\t.track {\n\t\twidth: 2.25rem;\n\t\theight: 1.25rem;\n\t\tborder-radius: 999px;\n\t\tbackground: var(--schmancy-sys-color-surface-containerHighest, #e0e0e0);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline, #79747e);\n\t\tposition: relative;\n\t\ttransition: background 150ms ease, border-color 150ms ease;\n\t}\n\t:host(:state(checked)) .track {\n\t\tbackground: var(--schmancy-sys-color-primary-default, #6750a4);\n\t\tborder-color: var(--schmancy-sys-color-primary-default, #6750a4);\n\t}\n\t.thumb {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 0.125rem;\n\t\twidth: 0.75rem;\n\t\theight: 0.75rem;\n\t\tborder-radius: 999px;\n\t\tbackground: var(--schmancy-sys-color-outline, #79747e);\n\t\ttransform: translateY(-50%);\n\t\ttransition: transform 150ms ease, background 150ms ease, width 150ms ease, height 150ms ease;\n\t}\n\t:host(:state(checked)) .thumb {\n\t\ttransform: translate(1rem, -50%);\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t\tbackground: var(--schmancy-sys-color-primary-on, #ffffff);\n\t}\n\tbutton:focus-visible .track {\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default, #6750a4);\n\t\toutline-offset: 2px;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.track, .thumb { transition: none; }\n\t}\n`];\n\tstatic formAssociated = true\n\tprivate internals: ElementInternals | undefined\n\n\t@property({ type: Boolean, reflect: true }) checked = false\n\t@property({ type: Boolean, reflect: true }) disabled = false\n\t@property({ type: Boolean, reflect: true }) required = false\n\t@property({ type: String }) name = ''\n\t@property({ type: String }) value = 'on'\n\t@property({ type: String }) label = ''\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t}\n\n\tget form(): HTMLFormElement | null {\n\t\treturn this.internals?.form ?? null\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('checked') || changed.has('value') || changed.has('name')) {\n\t\t\tthis.internals?.setFormValue(this.checked ? this.value : null)\n\t\t\tif (this.checked) this.internals?.states.add('checked')\n\t\t\telse this.internals?.states.delete('checked')\n\t\t}\n\t\tif (changed.has('required') || changed.has('checked')) {\n\t\t\tif (this.required && !this.checked) {\n\t\t\t\tthis.internals?.setValidity({ valueMissing: true }, 'This switch is required.')\n\t\t\t} else {\n\t\t\t\tthis.internals?.setValidity({})\n\t\t\t}\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this.hasAttribute('checked')\n\t}\n\n\tformDisabledCallback(disabled: boolean) {\n\t\tthis.disabled = disabled\n\t}\n\n\tpublic checkValidity(): boolean {\n\t\treturn this.internals?.checkValidity() ?? true\n\t}\n\n\tpublic reportValidity(): boolean {\n\t\treturn this.internals?.reportValidity() ?? true\n\t}\n\n\tprivate _toggle = () => {\n\t\tif (this.disabled) return\n\t\tthis.checked = !this.checked\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('change', {\n\t\t\t\tdetail: { value: this.checked },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\tprivate _onKeydown = (e: KeyboardEvent) => {\n\t\tif (e.key === ' ' || e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tthis._toggle()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"switch\"\n\t\t\t\taria-checked=${this.checked ? 'true' : 'false'}\n\t\t\t\taria-label=${this.label || nothing}\n\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t@click=${this._toggle}\n\t\t\t\t@keydown=${this._onKeydown}\n\t\t\t>\n\t\t\t\t<span part=\"track\" class=\"track\">\n\t\t\t\t\t<span part=\"thumb\" class=\"thumb\"></span>\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-switch': SchmancySwitch\n\t}\n}\n"],"mappings":";;;;AAsBO,IAAA,IAAA,cAA6B,EAAA;CAAA;AAAA,OAAA,SACnB,CAAC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAsDI;;CAAA;AAAA,OAAA,oBAUa;GAAA,GACjC,EAAW;GACd,gBAAA,CAAgB;GAAA;;CAGjB,cAAA;AACC,SAAA,EAAA,KAAA,UAAA,CAbqD,GAAA,KAAA,WAAA,CACC,GAAA,KAAA,WAAA,CACA,GAAA,KAAA,OACpB,IAAA,KAAA,QACC,MAAA,KAAA,QACA,IAAA,KAAA,gBAAA;AAqD/B,QAAK,aACT,KAAK,UAAA,CAAW,KAAK,SACrB,KAAK,cACJ,IAAI,YAAY,UAAU;IACzB,QAAQ,EAAE,OAAO,KAAK,SAAA;IACtB,SAAA,CAAS;IACT,UAAA,CAAU;IAAA,CAAA,CAAA;KAAA,KAAA,cAKS,MAAA;AACP,GAAV,EAAE,QAAQ,OAAO,EAAE,QAAQ,YAC9B,EAAE,gBAAA,EACF,KAAK,SAAA;;AA1DN,MAAA;AACC,QAAK,YAAY,KAAK,iBAAA;UAAA;AAEtB,QAAK,YAAA,KAAY;;;CAInB,IAAA,OAAI;AACH,SAAO,KAAK,WAAW,QAAQ;;CAGhC,QAAkB,GAAA;AACjB,QAAM,UAAU,EAAA,GACZ,EAAQ,IAAI,UAAA,IAAc,EAAQ,IAAI,QAAA,IAAY,EAAQ,IAAI,OAAA,MACjE,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,KAAA,EACrD,KAAK,UAAS,KAAK,WAAW,OAAO,IAAI,UAAA,GACxC,KAAK,WAAW,OAAO,OAAO,UAAA,IAEhC,EAAQ,IAAI,WAAA,IAAe,EAAQ,IAAI,UAAA,MACtC,KAAK,YAAA,CAAa,KAAK,UAC1B,KAAK,WAAW,YAAY,EAAE,cAAA,CAAc,GAAA,EAAQ,2BAAA,GAEpD,KAAK,WAAW,YAAY,EAAA,CAAA;;CAK/B,oBAAA;AACC,OAAK,UAAU,KAAK,aAAa,UAAA;;CAGlC,qBAAqB,GAAA;AACpB,OAAK,WAAW;;CAGjB,gBAAA;AACC,SAAO,KAAK,WAAW,eAAA,IAAA,CAAmB;;CAG3C,iBAAA;AACC,SAAO,KAAK,WAAW,gBAAA,IAAA,CAAoB;;CAsB5C,SAAA;AACC,SAAO,CAAI;;;;mBAIM,KAAK,UAAU,SAAS,QAAA;iBAC1B,KAAK,SAAS,EAAA;oBACX,KAAK,WAAW,SAAS,QAAA;gBAC7B,KAAK,SAAA;aACR,KAAK,QAAA;eACH,KAAK,WAAA;;;;;;;;;GAtFlB,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,EAAA,CAC1C,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,YAAA,KAAA,EAAA,EAAA,EAAA,CAC1C,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,YAAA,KAAA,EAAA,EAAA,EAAA,CAC1C,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAC1B,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,SAAA,KAAA,EAAA,EAAA,EAAA,CAC1B,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,SAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAhE3B,EAAc,kBAAA,CAAA,EAAkB,EAAA;AAAA,SAAA,KAAA"}
+{"version":3,"file":"switch.js","names":[],"sources":["../src/form/fields/switch/switch.ts"],"sourcesContent":["import { css, html, LitElement, nothing, type PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SchmancyFormField } from '@mixins/index'\n\nexport type SchmancySwitchChangeEvent = CustomEvent<{ value: boolean }>\n\n/**\n * Binary on/off control. Form-associated, keyboard-accessible, semantically a\n * switch (ARIA role=\"switch\"). Distinct from `schmancy-checkbox`: a switch\n * represents an immediate state change, a checkbox represents a selection in\n * a form to be submitted.\n *\n * @element schmancy-switch\n * @fires change - `CustomEvent<{ value: boolean }>` when the state changes.\n * @csspart track - The background track.\n * @csspart thumb - The moving thumb.\n */\n@customElement('schmancy-switch')\nexport class SchmancySwitch extends SchmancyFormField(css`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\t:host([disabled]) {\n\t\topacity: 0.38;\n\t\tpointer-events: none;\n\t}\n\tbutton {\n\t\tappearance: none;\n\t\tbackground: none;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tcursor: pointer;\n\t\tfont: inherit;\n\t}\n\t.track {\n\t\twidth: 2.25rem;\n\t\theight: 1.25rem;\n\t\tborder-radius: 999px;\n\t\tbackground: var(--schmancy-sys-color-surface-containerHighest, #e0e0e0);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline, #79747e);\n\t\tposition: relative;\n\t\ttransition: background 150ms ease, border-color 150ms ease;\n\t}\n\t:host(:state(checked)) .track {\n\t\tbackground: var(--schmancy-sys-color-primary-default, #6750a4);\n\t\tborder-color: var(--schmancy-sys-color-primary-default, #6750a4);\n\t}\n\t.thumb {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 0.125rem;\n\t\twidth: 0.75rem;\n\t\theight: 0.75rem;\n\t\tborder-radius: 999px;\n\t\tbackground: var(--schmancy-sys-color-outline, #79747e);\n\t\ttransform: translateY(-50%);\n\t\ttransition: transform 150ms ease, background 150ms ease, width 150ms ease, height 150ms ease;\n\t}\n\t:host(:state(checked)) .thumb {\n\t\ttransform: translate(1rem, -50%);\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t\tbackground: var(--schmancy-sys-color-primary-on, #ffffff);\n\t}\n\tbutton:focus-visible .track {\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default, #6750a4);\n\t\toutline-offset: 2px;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.track, .thumb { transition: none; }\n\t}\n`) {\n\t// `formAssociated`, `internals`, `name`, `disabled`, `required`, `id`,\n\t// `label`, `error`, `validationMessage`, `validateOn`, touched/dirty/submitted,\n\t// `markTouched/markSubmitted`, `formResetCallback`, `formDisabledCallback`,\n\t// FIELD_CONNECT_EVENT dispatch — all from the mixin.\n\n\t// Inner <button> is the focusable surface; route host focus to it.\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\t/**\n\t * The string written to FormData when the switch is on. Native\n\t * `<input type=checkbox value=\"...\">` semantics. Defaults to `'on'` to\n\t * match HTML checkbox conventions.\n\t */\n\t@property({ type: String, reflect: true })\n\toverride value: string = 'on'\n\n\t/** Boolean on/off state. Native `<input type=checkbox>.checked` semantics. */\n\t@property({ type: Boolean, reflect: true })\n\tchecked: boolean = false\n\n\t/** Snapshot of `checked` at first render — drives the `dirty` override. */\n\tprivate _checkedDefault: boolean = false\n\n\toverride firstUpdated(changed: PropertyValues): void {\n\t\tsuper.firstUpdated(changed)\n\t\tthis._checkedDefault = this.checked\n\t}\n\n\t/**\n\t * Override the mixin's value-vs-default `dirty` getter — for switch the\n\t * meaningful state is `checked`, not the FormData string.\n\t */\n\toverride get dirty(): boolean {\n\t\treturn this.checked !== this._checkedDefault\n\t}\n\n\toverride willUpdate(changed: PropertyValues): void {\n\t\tsuper.willUpdate(changed)\n\t\tif (changed.has('checked') || changed.has('value') || changed.has('name')) {\n\t\t\t// Switch contributes `value` to FormData when on, nothing when off\n\t\t\t// (native checkbox semantics; overrides the mixin's scalar default).\n\t\t\tthis.internals?.setFormValue(this.checked ? this.value : null)\n\t\t\tif (this.checked) this.internals?.states.add('checked')\n\t\t\telse this.internals?.states.delete('checked')\n\t\t\t// Mixin's value-changed branch won't fire `checkValidity` here\n\t\t\t// (validateOn: 'dirty' gate stays closed until checked diverges).\n\t\t\t// Sync platform validity explicitly so `form.checkValidity()` is\n\t\t\t// correct from first render.\n\t\t\tthis.checkValidity()\n\t\t}\n\t\tif (changed.has('required') || changed.has('disabled')) {\n\t\t\tthis.checkValidity()\n\t\t}\n\t}\n\n\t/** Override — switch validity is `checked === true` when required. */\n\toverride checkValidity(): boolean {\n\t\tif (this.disabled) {\n\t\t\tthis.internals?.setValidity({})\n\t\t\treturn true\n\t\t}\n\t\tconst isValid = !this.required || this.checked\n\t\tconst message = isValid ? '' : 'This switch is required.'\n\n\t\tthis.internals?.setValidity(\n\t\t\tisValid ? {} : { valueMissing: true },\n\t\t\tisValid ? undefined : message,\n\t\t)\n\n\t\tif (this._shouldShowError()) {\n\t\t\tthis.error = !isValid\n\t\t\tthis.validationMessage = message\n\t\t}\n\t\treturn isValid\n\t}\n\n\t/** Override — emit only when the switch is on. */\n\toverride toFormEntries(): Array<[string, FormDataEntryValue]> {\n\t\tif (!this.name || this.disabled || !this.checked) return []\n\t\treturn [[this.name, this.value]]\n\t}\n\n\toverride resetForm(): void {\n\t\tthis.checked = this._checkedDefault\n\t\tsuper.resetForm()\n\t}\n\n\tprivate _toggle = () => {\n\t\tif (this.disabled) return\n\t\tthis.checked = !this.checked\n\t\tthis.markTouched()\n\t\tthis.emitChange({ value: this.checked })\n\t}\n\n\tprivate _onKeydown = (e: KeyboardEvent) => {\n\t\tif (e.key === ' ' || e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tthis._toggle()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"switch\"\n\t\t\t\taria-checked=${this.checked ? 'true' : 'false'}\n\t\t\t\taria-label=${this.label || nothing}\n\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t@click=${this._toggle}\n\t\t\t\t@keydown=${this._onKeydown}\n\t\t\t>\n\t\t\t\t<span part=\"track\" class=\"track\">\n\t\t\t\t\t<span part=\"thumb\" class=\"thumb\"></span>\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-switch': SchmancySwitch\n\t}\n}\n"],"mappings":";;;;AAkBO,IAAA,IAAA,cAA6B,EAAkB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAuE/B,MAAA,KAAA,UAAA,CAIN,GAAA,KAAA,kBAAA,CAGgB,GAAA,KAAA,gBAAA;AAmE9B,QAAK,aACT,KAAK,UAAA,CAAW,KAAK,SACrB,KAAK,aAAA,EACL,KAAK,WAAW,EAAE,OAAO,KAAK,SAAA,CAAA;KAAA,KAAA,cAGT,MAAA;AACP,GAAV,EAAE,QAAQ,OAAO,EAAE,QAAQ,YAC9B,EAAE,gBAAA,EACF,KAAK,SAAA;;;CAAA;AAAA,OAAA,oBA9F8B;GAAA,GACjC,EAAW;GACd,gBAAA,CAAgB;GAAA;;CAkBjB,aAAsB,GAAA;AACrB,QAAM,aAAa,EAAA,EACnB,KAAK,kBAAkB,KAAK;;CAO7B,IAAA,QAAa;AACZ,SAAO,KAAK,YAAY,KAAK;;CAG9B,WAAoB,GAAA;AACnB,QAAM,WAAW,EAAA,GACb,EAAQ,IAAI,UAAA,IAAc,EAAQ,IAAI,QAAA,IAAY,EAAQ,IAAI,OAAA,MAGjE,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,KAAA,EACrD,KAAK,UAAS,KAAK,WAAW,OAAO,IAAI,UAAA,GACxC,KAAK,WAAW,OAAO,OAAO,UAAA,EAKnC,KAAK,eAAA,IAEF,EAAQ,IAAI,WAAA,IAAe,EAAQ,IAAI,WAAA,KAC1C,KAAK,eAAA;;CAKP,gBAAA;AACC,MAAI,KAAK,SAER,QADA,KAAK,WAAW,YAAY,EAAA,CAAA,EAAA,CACrB;EAER,IAAM,IAAA,CAAW,KAAK,YAAY,KAAK,SACjC,IAAU,IAAU,KAAK;AAW/B,SATA,KAAK,WAAW,YACf,IAAU,EAAA,GAAK,EAAE,cAAA,CAAc,GAAA,EAC/B,IAAA,KAAU,IAAY,EAAA,EAGnB,KAAK,kBAAA,KACR,KAAK,QAAA,CAAS,GACd,KAAK,oBAAoB,IAEnB;;CAIR,gBAAA;AACC,SAAK,KAAK,QAAA,CAAQ,KAAK,YAAa,KAAK,UAClC,CAAC,CAAC,KAAK,MAAM,KAAK,MAAA,CAAA,GADgC,EAAA;;CAI1D,YAAA;AACC,OAAK,UAAU,KAAK,iBACpB,MAAM,WAAA;;CAiBP,SAAA;AACC,SAAO,CAAI;;;;mBAIM,KAAK,UAAU,SAAS,QAAA;iBAC1B,KAAK,SAAS,EAAA;oBACX,KAAK,WAAW,SAAS,QAAA;gBAC7B,KAAK,SAAA;aACR,KAAK,QAAA;eACH,KAAK,WAAA;;;;;;;;;GAlGlB,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,SAAA,KAAA,EAAA,EAAA,EAAA,CAIzC,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CA3E3C,EAAc,kBAAA,CAAA,EAAkB,EAAA;AAAA,SAAA,KAAA"}

package/dist/table.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-DvAYa-F7.cjs`),t=require(`./decorate-DpFmy0nm.cjs`);let n=require(`lit/decorators.js`),r=require(`lit`);require(`@lit-labs/virtualizer`);var i=class extends e.s{constructor(...e){super(...e),this.columns=[],this.cols=this.columns.map(()=>`1fr`).join(` `)}renderCell(e){if(e.render)return r.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-BOOu6q2n.cjs`),t=require(`./active-host-jH3iloCR.cjs`);let n=require(`lit/decorators.js`),r=require(`lit`);require(`@lit-labs/virtualizer`);var i=class extends e.c{constructor(...e){super(...e),this.columns=[],this.cols=this.columns.map(()=>`1fr`).join(` `)}renderCell(e){if(e.render)return r.html`
 				<div class="overflow-hidden text-ellipsis">
 					<schmancy-typography align="${e.align||`left`}" maxLines="2" weight="${e.weight||`normal`}">
 						${e.render(this.item)}
@@ -19,7 +19,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 					${this.columns.map(e=>this.renderCell(e))}
 				</div>
 			</schmancy-list-item>
-		`}};t.t([(0,n.property)({type:Array,attribute:!1})],i.prototype,`columns`,void 0),t.t([(0,n.property)({type:Object,attribute:!1})],i.prototype,`item`,void 0),t.t([(0,n.property)({type:String})],i.prototype,`cols`,void 0),i=t.t([(0,n.customElement)(`schmancy-table-row`)],i);var a=class extends e.s{constructor(){super(),this.columns=[],this.data=[],this.keyField=`id`,this.cols=`1fr`,this.sortable=!1,this.sortColumn=null,this.sortDirection=null,this.filteredData=[],this.filteredData=this.data}willUpdate(e){(e.has(`data`)||e.has(`sortColumn`)||e.has(`sortDirection`))&&this.processData()}isDate(e){return e&&typeof e==`object`&&Object.prototype.toString.call(e)===`[object Date]`}processData(){let e=[...this.data];if(this.sortable&&this.sortColumn&&this.sortDirection){let t=this.columns.find(e=>e.key===this.sortColumn);e.sort((e,n)=>{let r,i;if(t&&t.value?(r=t.value(e),i=t.value(n)):(r=e[this.sortColumn],i=n[this.sortColumn]),r==null)return this.sortDirection===`asc`?1:-1;if(i==null)return this.sortDirection===`asc`?-1:1;if(typeof r==`number`&&typeof i==`number`)return this.sortDirection===`asc`?r-i:i-r;let a=typeof r==`string`&&!isNaN(Number(r)),o=typeof i==`string`&&!isNaN(Number(i));if(a&&o){let e=parseFloat(r),t=parseFloat(i);return this.sortDirection===`asc`?e-t:t-e}if(this.isDate(r)&&this.isDate(i))return this.sortDirection===`asc`?r.getTime()-i.getTime():i.getTime()-r.getTime();let s=String(r),c=String(i);return this.sortDirection===`asc`?s.localeCompare(c):c.localeCompare(s)})}this.filteredData=e}toggleSort(e){if(!e.key||!1===e.sortable)return;let t=e.key;t===this.sortColumn?this.sortDirection===`asc`?this.sortDirection=`desc`:this.sortDirection===`desc`?this.sortDirection=null:this.sortDirection=`asc`:(this.sortColumn=t,this.sortDirection=`asc`),this.dispatchEvent(new CustomEvent(`sort-change`,{detail:{column:this.sortColumn,direction:this.sortDirection},bubbles:!0,composed:!0}))}renderSortIndicator(e){return this.sortable&&!1!==e.sortable&&e.key&&e.key===this.sortColumn?r.html`
+		`}};t.a([(0,n.property)({type:Array,attribute:!1})],i.prototype,`columns`,void 0),t.a([(0,n.property)({type:Object,attribute:!1})],i.prototype,`item`,void 0),t.a([(0,n.property)({type:String})],i.prototype,`cols`,void 0),i=t.a([(0,n.customElement)(`schmancy-table-row`)],i);var a=class extends e.c{constructor(){super(),this.columns=[],this.data=[],this.keyField=`id`,this.cols=`1fr`,this.sortable=!1,this.sortColumn=null,this.sortDirection=null,this.filteredData=[],this.filteredData=this.data}willUpdate(e){(e.has(`data`)||e.has(`sortColumn`)||e.has(`sortDirection`))&&this.processData()}isDate(e){return e&&typeof e==`object`&&Object.prototype.toString.call(e)===`[object Date]`}processData(){let e=[...this.data];if(this.sortable&&this.sortColumn&&this.sortDirection){let t=this.columns.find(e=>e.key===this.sortColumn);e.sort((e,n)=>{let r,i;if(t&&t.value?(r=t.value(e),i=t.value(n)):(r=e[this.sortColumn],i=n[this.sortColumn]),r==null)return this.sortDirection===`asc`?1:-1;if(i==null)return this.sortDirection===`asc`?-1:1;if(typeof r==`number`&&typeof i==`number`)return this.sortDirection===`asc`?r-i:i-r;let a=typeof r==`string`&&!isNaN(Number(r)),o=typeof i==`string`&&!isNaN(Number(i));if(a&&o){let e=parseFloat(r),t=parseFloat(i);return this.sortDirection===`asc`?e-t:t-e}if(this.isDate(r)&&this.isDate(i))return this.sortDirection===`asc`?r.getTime()-i.getTime():i.getTime()-r.getTime();let s=String(r),c=String(i);return this.sortDirection===`asc`?s.localeCompare(c):c.localeCompare(s)})}this.filteredData=e}toggleSort(e){if(!e.key||!1===e.sortable)return;let t=e.key;t===this.sortColumn?this.sortDirection===`asc`?this.sortDirection=`desc`:this.sortDirection===`desc`?this.sortDirection=null:this.sortDirection=`asc`:(this.sortColumn=t,this.sortDirection=`asc`),this.dispatchEvent(new CustomEvent(`sort-change`,{detail:{column:this.sortColumn,direction:this.sortDirection},bubbles:!0,composed:!0}))}renderSortIndicator(e){return this.sortable&&!1!==e.sortable&&e.key&&e.key===this.sortColumn?r.html`
 			<span class="ml-1">
 				${this.sortDirection===`asc`?r.html`<schmancy-icon size="16px">arrow_upward</schmancy-icon>`:this.sortDirection===`desc`?r.html`<schmancy-icon size="16px">arrow_downward</schmancy-icon>`:null}
 			</span>
@@ -69,4 +69,4 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 							</div>
 						`}
 			</div>
-		`}};t.t([(0,n.property)({type:Array,attribute:!1})],a.prototype,`columns`,void 0),t.t([(0,n.property)({type:Array,attribute:!1})],a.prototype,`data`,void 0),t.t([(0,n.property)({type:String})],a.prototype,`keyField`,void 0),t.t([(0,n.property)({type:String})],a.prototype,`cols`,void 0),t.t([(0,n.property)({type:Boolean})],a.prototype,`sortable`,void 0),t.t([(0,n.state)()],a.prototype,`sortColumn`,void 0),t.t([(0,n.state)()],a.prototype,`sortDirection`,void 0),t.t([(0,n.state)()],a.prototype,`filteredData`,void 0),a=t.t([(0,n.customElement)(`schmancy-table`)],a),Object.defineProperty(exports,`SchmancyDataTable`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`SchmancyTableRow`,{enumerable:!0,get:function(){return i}});
+		`}};t.a([(0,n.property)({type:Array,attribute:!1})],a.prototype,`columns`,void 0),t.a([(0,n.property)({type:Array,attribute:!1})],a.prototype,`data`,void 0),t.a([(0,n.property)({type:String})],a.prototype,`keyField`,void 0),t.a([(0,n.property)({type:String})],a.prototype,`cols`,void 0),t.a([(0,n.property)({type:Boolean})],a.prototype,`sortable`,void 0),t.a([(0,n.state)()],a.prototype,`sortColumn`,void 0),t.a([(0,n.state)()],a.prototype,`sortDirection`,void 0),t.a([(0,n.state)()],a.prototype,`filteredData`,void 0),a=t.a([(0,n.customElement)(`schmancy-table`)],a),Object.defineProperty(exports,`SchmancyDataTable`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`SchmancyTableRow`,{enumerable:!0,get:function(){return i}});

package/dist/table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"table.cjs","names":[],"sources":["../src/table/row.ts","../src/table/table.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { html, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { TableColumn } from './table' // Import TableColumn interface with updated types\n\n@customElement('schmancy-table-row')\nexport class SchmancyTableRow<T extends Record<string, any> = any> extends SchmancyElement {\n\t@property({ type: Array, attribute: false })\n\tcolumns: TableColumn<T>[] = []\n\n\t@property({ type: Object, attribute: false })\n\titem!: T\n\n\t@property({ type: String })\n\tcols: string = this.columns.map(() => '1fr').join(' ')\n\n\t/**\n\t * Renders a cell based on column configuration.\n\t * Uses custom render function if provided, otherwise extracts data from item.\n\t */\n\tprivate renderCell(column: TableColumn<T>): TemplateResult {\n\t\t// Use the render function if provided\n\t\tif (column.render) {\n\t\t\treturn html`\n\t\t\t\t<div class=\"overflow-hidden text-ellipsis\">\n\t\t\t\t\t<schmancy-typography align=\"${column.align || 'left'}\" maxLines=\"2\" weight=\"${column.weight || 'normal'}\">\n\t\t\t\t\t\t${column.render(this.item)}\n\t\t\t\t\t</schmancy-typography>\n\t\t\t\t</div>\n\t\t\t`\n\t\t}\n\n\t\t// Otherwise extract data using the key if available\n\t\tconst value = column.key ? this.item[column.key] : ''\n\n\t\treturn html`\n\t\t\t<div class=\"overflow-hidden text-ellipsis\">\n\t\t\t\t<schmancy-typography align=\"${column.align || 'left'}\" maxLines=\"2\" weight=\"${column.weight || 'normal'}\">\n\t\t\t\t\t${value}\n\t\t\t\t</schmancy-typography>\n\t\t\t</div>\n\t\t`\n\t}\n\n\trender(): TemplateResult {\n\t\treturn html`\n\t\t\t<schmancy-list-item class=\"w-full\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"grid items-center gap-4\"\n\t\t\t\t\tstyle=${this.styleMap({ gridTemplateColumns: this.cols })}\n\t\t\t\t>\n\t\t\t\t\t${this.columns.map(column => this.renderCell(column))}\n\t\t\t\t</div>\n\t\t\t</schmancy-list-item>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-table-row': SchmancyTableRow\n\t}\n}\n","import '@lit-labs/virtualizer'\nimport { SchmancyElement } from '@mixins/index'\nimport { html, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport './row' // Import the schmancy-table-row component\n\n// Define a generic TableColumn interface.\n// The `key` is now a key of T, and the render function accepts T.\nexport interface TableColumn<T extends Record<string, any> = any> {\n\tname: string\n\tkey?: keyof T // Key to access the property on the data object.\n\talign?: 'left' | 'right' | 'center'\n\tweight?: 'normal' | 'bold'\n\trender?: (item: T) => TemplateResult | string | number // Custom render function for complex content\n\tsortable?: boolean // Whether this column is sortable\n\tvalue?: (item: T) => any // Custom value function for sorting\n}\n\n// Define an event detail interface for row events.\nexport interface RowEventDetail<T> {\n\titem: T\n\tindex: number\n}\n\n// Define sort direction type\nexport type SortDirection = 'asc' | 'desc' | null\n\n/**\n * SchmancyDataTable is a generic data table component.\n * It supports sorting, filtering, and custom rendering of rows.\n *\n */\n@customElement('schmancy-table')\nexport class SchmancyDataTable<T extends Record<string, any> = any> extends SchmancyElement {\n\t@property({ type: Array, attribute: false })\n\tcolumns: TableColumn<T>[] = []\n\n\t@property({ type: Array, attribute: false })\n\tdata: T[] = []\n\n\t// The keyField is now of type keyof T.\n\t@property({ type: String })\n\tkeyField: keyof T = 'id' as keyof T\n\n\t@property({ type: String })\n\tcols: string = '1fr'\n\n\t// Sorting property\n\t@property({ type: Boolean })\n\tsortable: boolean = false\n\n\t// Internal state properties\n\t@state() private sortColumn: keyof T | null = null\n\t@state() private sortDirection: SortDirection = null\n\t@state() private filteredData: T[] = []\n\n\tconstructor() {\n\t\tsuper()\n\t\tthis.filteredData = this.data\n\t}\n\n\t// Process the data whenever our dependencies change\n\tprotected willUpdate(changedProperties: Map<PropertyKey, unknown>): void {\n\t\tif (\n\t\t\tchangedProperties.has('data') ||\n\t\t\tchangedProperties.has('sortColumn') ||\n\t\t\tchangedProperties.has('sortDirection')\n\t\t) {\n\t\t\tthis.processData()\n\t\t}\n\t}\n\n\t/**\n\t * Helper function to check if a value is a Date object in a type-safe way\n\t */\n\tprivate isDate(value: any): value is Date {\n\t\treturn value && typeof value === 'object' && Object.prototype.toString.call(value) === '[object Date]'\n\t}\n\n\tprivate processData(): void {\n\t\tlet result = [...this.data]\n\n\t\t// Apply sorting\n\t\tif (this.sortable && this.sortColumn && this.sortDirection) {\n\t\t\t// Find the column configuration for the sorting column\n\t\t\tconst sortColumnConfig = this.columns.find(col => col.key === this.sortColumn)\n\n\t\t\tresult.sort((a, b) => {\n\t\t\t\t// Use the value function if provided in the column configuration\n\t\t\t\tlet aValue, bValue\n\n\t\t\t\tif (sortColumnConfig && sortColumnConfig.value) {\n\t\t\t\t\t// Use custom value function for sorting\n\t\t\t\t\taValue = sortColumnConfig.value(a)\n\t\t\t\t\tbValue = sortColumnConfig.value(b)\n\t\t\t\t} else {\n\t\t\t\t\t// Use standard property access\n\t\t\t\t\taValue = a[this.sortColumn as keyof T]\n\t\t\t\t\tbValue = b[this.sortColumn as keyof T]\n\t\t\t\t}\n\n\t\t\t\t// Handle null/undefined values - always sort them to the end regardless of sort direction\n\t\t\t\tif (aValue === null || aValue === undefined) {\n\t\t\t\t\treturn this.sortDirection === 'asc' ? 1 : -1\n\t\t\t\t}\n\t\t\t\tif (bValue === null || bValue === undefined) {\n\t\t\t\t\treturn this.sortDirection === 'asc' ? -1 : 1\n\t\t\t\t}\n\n\t\t\t\t// Handle numbers\n\t\t\t\tif (typeof aValue === 'number' && typeof bValue === 'number') {\n\t\t\t\t\treturn this.sortDirection === 'asc' ? aValue - bValue : bValue - aValue\n\t\t\t\t}\n\n\t\t\t\t// Detect and handle numeric strings - convert to numbers if both values are numeric\n\t\t\t\tconst aNumeric = typeof aValue === 'string' && !isNaN(Number(aValue))\n\t\t\t\tconst bNumeric = typeof bValue === 'string' && !isNaN(Number(bValue))\n\n\t\t\t\tif (aNumeric && bNumeric) {\n\t\t\t\t\tconst aNum = parseFloat(aValue as string)\n\t\t\t\t\tconst bNum = parseFloat(bValue as string)\n\t\t\t\t\treturn this.sortDirection === 'asc' ? aNum - bNum : bNum - aNum\n\t\t\t\t}\n\n\t\t\t\t// Handle dates - with proper type checking\n\t\t\t\tif (this.isDate(aValue) && this.isDate(bValue)) {\n\t\t\t\t\treturn this.sortDirection === 'asc'\n\t\t\t\t\t\t? aValue.getTime() - bValue.getTime()\n\t\t\t\t\t\t: bValue.getTime() - aValue.getTime()\n\t\t\t\t}\n\n\t\t\t\t// Convert to strings for string comparison or fallback comparison\n\t\t\t\tconst aStr = String(aValue)\n\t\t\t\tconst bStr = String(bValue)\n\t\t\t\treturn this.sortDirection === 'asc' ? aStr.localeCompare(bStr) : bStr.localeCompare(aStr)\n\t\t\t})\n\t\t}\n\n\t\tthis.filteredData = result\n\t}\n\n\t// Toggle sort for a column\n\tprivate toggleSort(column: TableColumn<T>): void {\n\t\tif (!column.key || column.sortable === false) return\n\n\t\tconst columnKey = column.key\n\n\t\t// If clicking the same column, cycle through sort states: asc -> desc -> null\n\t\tif (columnKey === this.sortColumn) {\n\t\t\tif (this.sortDirection === 'asc') {\n\t\t\t\tthis.sortDirection = 'desc'\n\t\t\t} else if (this.sortDirection === 'desc') {\n\t\t\t\tthis.sortDirection = null\n\t\t\t} else {\n\t\t\t\tthis.sortDirection = 'asc'\n\t\t\t}\n\t\t} else {\n\t\t\t// New column, start with ascending\n\t\t\tthis.sortColumn = columnKey\n\t\t\tthis.sortDirection = 'asc'\n\t\t}\n\n\t\t// Dispatch sort event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sort-change', {\n\t\t\t\tdetail: {\n\t\t\t\t\tcolumn: this.sortColumn,\n\t\t\t\t\tdirection: this.sortDirection,\n\t\t\t\t},\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\t// Render sort indicator\n\tprivate renderSortIndicator(column: TableColumn<T>): TemplateResult | null {\n\t\tif (!this.sortable || column.sortable === false || !column.key || column.key !== this.sortColumn) {\n\t\t\treturn null\n\t\t}\n\n\t\treturn html`\n\t\t\t<span class=\"ml-1\">\n\t\t\t\t${this.sortDirection === 'asc'\n\t\t\t\t\t? html`<schmancy-icon size=\"16px\">arrow_upward</schmancy-icon>`\n\t\t\t\t\t: this.sortDirection === 'desc'\n\t\t\t\t\t\t? html`<schmancy-icon size=\"16px\">arrow_downward</schmancy-icon>`\n\t\t\t\t\t\t: null}\n\t\t\t</span>\n\t\t`\n\t}\n\n\trender(): TemplateResult {\n\t\tconst columnHeadClasses = column => ({\n\t\t\t'flex items-center': true,\n\t\t\t'cursor-pointer gap-1': this.sortable && column.sortable !== false && column.key,\n\t\t})\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"grid h-full w-full\"\n\t\t\t\tstyle=\"grid-template-columns: 1fr; grid-template-rows: auto 1fr;\"\n\t\t\t>\n\t\t\t\t<schmancy-surface rounded=\"top\" elevation=\"1\" type=\"glass\" class=\"sticky top-0 z-10\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"grid items-center gap-4 px-4 py-3\"\n\t\t\t\t\t\tstyle=${this.styleMap({\n\t\t\t\t\t\t\tgridTemplateColumns: this.cols,\n\t\t\t\t\t\t\tgridTemplateRows: '1fr',\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t${this.columns.map(\n\t\t\t\t\t\t\tcolumn => html`\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclass=${this.classMap(columnHeadClasses(column))}\n\t\t\t\t\t\t\t\t\t@click=${() => (this.sortable && column.sortable !== false ? this.toggleSort(column) : null)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<schmancy-typography align=${column.align ?? 'left'} weight=${column.weight ?? 'bold'}>\n\t\t\t\t\t\t\t\t\t\t${column.name}\n\t\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t\t${this.renderSortIndicator(column)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</schmancy-surface>\n\n\t\t\t\t${this.filteredData.length > 0\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<lit-virtualizer\n\t\t\t\t\t\t\t\tscroller\n\t\t\t\t\t\t\t\tclass=\"w-full h-full relative overflow-auto\"\n\t\t\t\t\t\t\t\t.items=${this.filteredData}\n\t\t\t\t\t\t\t\t.keyFunction=${(item: T, index: number) => {\n\t\t\t\t\t\t\t\t\tconst keyValue = item?.[this.keyField]\n\t\t\t\t\t\t\t\t\tif (keyValue === undefined || keyValue === null) {\n\t\t\t\t\t\t\t\t\t\treturn index\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn typeof keyValue === 'string' || typeof keyValue === 'number' ? keyValue : String(keyValue)\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t.renderItem=${(item: T, index: number) =>\n\t\t\t\t\t\t\t\t\thtml`\n\t\t\t\t\t\t\t\t\t\t<schmancy-table-row\n\t\t\t\t\t\t\t\t\t\t\tclass=\"w-full border-b border-solid border-outlineVariant\"\n\t\t\t\t\t\t\t\t\t\t\t.columns=${this.columns}\n\t\t\t\t\t\t\t\t\t\t\t.item=${item}\n\t\t\t\t\t\t\t\t\t\t\tcols=${this.cols}\n\t\t\t\t\t\t\t\t\t\t\t@click=${() => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst detail = { item, index }\n\t\t\t\t\t\t\t\t\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnew CustomEvent('click', {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdetail,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t></schmancy-table-row>\n\t\t\t\t\t\t\t\t\t` as TemplateResult}\n\t\t\t\t\t\t\t></lit-virtualizer>\n\t\t\t\t\t\t`\n\t\t\t\t\t: html`\n\t\t\t\t\t\t\t<div class=\"flex items-center justify-center w-full h-full p-8 text-center\">\n\t\t\t\t\t\t\t\t<schmancy-typography type=\"body\" token=\"lg\"> No data available </schmancy-typography>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-table': SchmancyDataTable\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"table.cjs","names":[],"sources":["../src/table/row.ts","../src/table/table.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { html, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { TableColumn } from './table' // Import TableColumn interface with updated types\n\n@customElement('schmancy-table-row')\nexport class SchmancyTableRow<T extends Record<string, any> = any> extends SchmancyElement {\n\t@property({ type: Array, attribute: false })\n\tcolumns: TableColumn<T>[] = []\n\n\t@property({ type: Object, attribute: false })\n\titem!: T\n\n\t@property({ type: String })\n\tcols: string = this.columns.map(() => '1fr').join(' ')\n\n\t/**\n\t * Renders a cell based on column configuration.\n\t * Uses custom render function if provided, otherwise extracts data from item.\n\t */\n\tprivate renderCell(column: TableColumn<T>): TemplateResult {\n\t\t// Use the render function if provided\n\t\tif (column.render) {\n\t\t\treturn html`\n\t\t\t\t<div class=\"overflow-hidden text-ellipsis\">\n\t\t\t\t\t<schmancy-typography align=\"${column.align || 'left'}\" maxLines=\"2\" weight=\"${column.weight || 'normal'}\">\n\t\t\t\t\t\t${column.render(this.item)}\n\t\t\t\t\t</schmancy-typography>\n\t\t\t\t</div>\n\t\t\t`\n\t\t}\n\n\t\t// Otherwise extract data using the key if available\n\t\tconst value = column.key ? this.item[column.key] : ''\n\n\t\treturn html`\n\t\t\t<div class=\"overflow-hidden text-ellipsis\">\n\t\t\t\t<schmancy-typography align=\"${column.align || 'left'}\" maxLines=\"2\" weight=\"${column.weight || 'normal'}\">\n\t\t\t\t\t${value}\n\t\t\t\t</schmancy-typography>\n\t\t\t</div>\n\t\t`\n\t}\n\n\trender(): TemplateResult {\n\t\treturn html`\n\t\t\t<schmancy-list-item class=\"w-full\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"grid items-center gap-4\"\n\t\t\t\t\tstyle=${this.styleMap({ gridTemplateColumns: this.cols })}\n\t\t\t\t>\n\t\t\t\t\t${this.columns.map(column => this.renderCell(column))}\n\t\t\t\t</div>\n\t\t\t</schmancy-list-item>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-table-row': SchmancyTableRow\n\t}\n}\n","import '@lit-labs/virtualizer'\nimport { SchmancyElement } from '@mixins/index'\nimport { html, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport './row' // Import the schmancy-table-row component\n\n// Define a generic TableColumn interface.\n// The `key` is now a key of T, and the render function accepts T.\nexport interface TableColumn<T extends Record<string, any> = any> {\n\tname: string\n\tkey?: keyof T // Key to access the property on the data object.\n\talign?: 'left' | 'right' | 'center'\n\tweight?: 'normal' | 'bold'\n\trender?: (item: T) => TemplateResult | string | number // Custom render function for complex content\n\tsortable?: boolean // Whether this column is sortable\n\tvalue?: (item: T) => any // Custom value function for sorting\n}\n\n// Define an event detail interface for row events.\nexport interface RowEventDetail<T> {\n\titem: T\n\tindex: number\n}\n\n// Define sort direction type\nexport type SortDirection = 'asc' | 'desc' | null\n\n/**\n * SchmancyDataTable is a generic data table component.\n * It supports sorting, filtering, and custom rendering of rows.\n *\n */\n@customElement('schmancy-table')\nexport class SchmancyDataTable<T extends Record<string, any> = any> extends SchmancyElement {\n\t@property({ type: Array, attribute: false })\n\tcolumns: TableColumn<T>[] = []\n\n\t@property({ type: Array, attribute: false })\n\tdata: T[] = []\n\n\t// The keyField is now of type keyof T.\n\t@property({ type: String })\n\tkeyField: keyof T = 'id' as keyof T\n\n\t@property({ type: String })\n\tcols: string = '1fr'\n\n\t// Sorting property\n\t@property({ type: Boolean })\n\tsortable: boolean = false\n\n\t// Internal state properties\n\t@state() private sortColumn: keyof T | null = null\n\t@state() private sortDirection: SortDirection = null\n\t@state() private filteredData: T[] = []\n\n\tconstructor() {\n\t\tsuper()\n\t\tthis.filteredData = this.data\n\t}\n\n\t// Process the data whenever our dependencies change\n\tprotected willUpdate(changedProperties: Map<PropertyKey, unknown>): void {\n\t\tif (\n\t\t\tchangedProperties.has('data') ||\n\t\t\tchangedProperties.has('sortColumn') ||\n\t\t\tchangedProperties.has('sortDirection')\n\t\t) {\n\t\t\tthis.processData()\n\t\t}\n\t}\n\n\t/**\n\t * Helper function to check if a value is a Date object in a type-safe way\n\t */\n\tprivate isDate(value: any): value is Date {\n\t\treturn value && typeof value === 'object' && Object.prototype.toString.call(value) === '[object Date]'\n\t}\n\n\tprivate processData(): void {\n\t\tlet result = [...this.data]\n\n\t\t// Apply sorting\n\t\tif (this.sortable && this.sortColumn && this.sortDirection) {\n\t\t\t// Find the column configuration for the sorting column\n\t\t\tconst sortColumnConfig = this.columns.find(col => col.key === this.sortColumn)\n\n\t\t\tresult.sort((a, b) => {\n\t\t\t\t// Use the value function if provided in the column configuration\n\t\t\t\tlet aValue, bValue\n\n\t\t\t\tif (sortColumnConfig && sortColumnConfig.value) {\n\t\t\t\t\t// Use custom value function for sorting\n\t\t\t\t\taValue = sortColumnConfig.value(a)\n\t\t\t\t\tbValue = sortColumnConfig.value(b)\n\t\t\t\t} else {\n\t\t\t\t\t// Use standard property access\n\t\t\t\t\taValue = a[this.sortColumn as keyof T]\n\t\t\t\t\tbValue = b[this.sortColumn as keyof T]\n\t\t\t\t}\n\n\t\t\t\t// Handle null/undefined values - always sort them to the end regardless of sort direction\n\t\t\t\tif (aValue === null || aValue === undefined) {\n\t\t\t\t\treturn this.sortDirection === 'asc' ? 1 : -1\n\t\t\t\t}\n\t\t\t\tif (bValue === null || bValue === undefined) {\n\t\t\t\t\treturn this.sortDirection === 'asc' ? -1 : 1\n\t\t\t\t}\n\n\t\t\t\t// Handle numbers\n\t\t\t\tif (typeof aValue === 'number' && typeof bValue === 'number') {\n\t\t\t\t\treturn this.sortDirection === 'asc' ? aValue - bValue : bValue - aValue\n\t\t\t\t}\n\n\t\t\t\t// Detect and handle numeric strings - convert to numbers if both values are numeric\n\t\t\t\tconst aNumeric = typeof aValue === 'string' && !isNaN(Number(aValue))\n\t\t\t\tconst bNumeric = typeof bValue === 'string' && !isNaN(Number(bValue))\n\n\t\t\t\tif (aNumeric && bNumeric) {\n\t\t\t\t\tconst aNum = parseFloat(aValue as string)\n\t\t\t\t\tconst bNum = parseFloat(bValue as string)\n\t\t\t\t\treturn this.sortDirection === 'asc' ? aNum - bNum : bNum - aNum\n\t\t\t\t}\n\n\t\t\t\t// Handle dates - with proper type checking\n\t\t\t\tif (this.isDate(aValue) && this.isDate(bValue)) {\n\t\t\t\t\treturn this.sortDirection === 'asc'\n\t\t\t\t\t\t? aValue.getTime() - bValue.getTime()\n\t\t\t\t\t\t: bValue.getTime() - aValue.getTime()\n\t\t\t\t}\n\n\t\t\t\t// Convert to strings for string comparison or fallback comparison\n\t\t\t\tconst aStr = String(aValue)\n\t\t\t\tconst bStr = String(bValue)\n\t\t\t\treturn this.sortDirection === 'asc' ? aStr.localeCompare(bStr) : bStr.localeCompare(aStr)\n\t\t\t})\n\t\t}\n\n\t\tthis.filteredData = result\n\t}\n\n\t// Toggle sort for a column\n\tprivate toggleSort(column: TableColumn<T>): void {\n\t\tif (!column.key || column.sortable === false) return\n\n\t\tconst columnKey = column.key\n\n\t\t// If clicking the same column, cycle through sort states: asc -> desc -> null\n\t\tif (columnKey === this.sortColumn) {\n\t\t\tif (this.sortDirection === 'asc') {\n\t\t\t\tthis.sortDirection = 'desc'\n\t\t\t} else if (this.sortDirection === 'desc') {\n\t\t\t\tthis.sortDirection = null\n\t\t\t} else {\n\t\t\t\tthis.sortDirection = 'asc'\n\t\t\t}\n\t\t} else {\n\t\t\t// New column, start with ascending\n\t\t\tthis.sortColumn = columnKey\n\t\t\tthis.sortDirection = 'asc'\n\t\t}\n\n\t\t// Dispatch sort event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sort-change', {\n\t\t\t\tdetail: {\n\t\t\t\t\tcolumn: this.sortColumn,\n\t\t\t\t\tdirection: this.sortDirection,\n\t\t\t\t},\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\t// Render sort indicator\n\tprivate renderSortIndicator(column: TableColumn<T>): TemplateResult | null {\n\t\tif (!this.sortable || column.sortable === false || !column.key || column.key !== this.sortColumn) {\n\t\t\treturn null\n\t\t}\n\n\t\treturn html`\n\t\t\t<span class=\"ml-1\">\n\t\t\t\t${this.sortDirection === 'asc'\n\t\t\t\t\t? html`<schmancy-icon size=\"16px\">arrow_upward</schmancy-icon>`\n\t\t\t\t\t: this.sortDirection === 'desc'\n\t\t\t\t\t\t? html`<schmancy-icon size=\"16px\">arrow_downward</schmancy-icon>`\n\t\t\t\t\t\t: null}\n\t\t\t</span>\n\t\t`\n\t}\n\n\trender(): TemplateResult {\n\t\tconst columnHeadClasses = column => ({\n\t\t\t'flex items-center': true,\n\t\t\t'cursor-pointer gap-1': this.sortable && column.sortable !== false && column.key,\n\t\t})\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"grid h-full w-full\"\n\t\t\t\tstyle=\"grid-template-columns: 1fr; grid-template-rows: auto 1fr;\"\n\t\t\t>\n\t\t\t\t<schmancy-surface rounded=\"top\" elevation=\"1\" type=\"glass\" class=\"sticky top-0 z-10\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"grid items-center gap-4 px-4 py-3\"\n\t\t\t\t\t\tstyle=${this.styleMap({\n\t\t\t\t\t\t\tgridTemplateColumns: this.cols,\n\t\t\t\t\t\t\tgridTemplateRows: '1fr',\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t${this.columns.map(\n\t\t\t\t\t\t\tcolumn => html`\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclass=${this.classMap(columnHeadClasses(column))}\n\t\t\t\t\t\t\t\t\t@click=${() => (this.sortable && column.sortable !== false ? this.toggleSort(column) : null)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<schmancy-typography align=${column.align ?? 'left'} weight=${column.weight ?? 'bold'}>\n\t\t\t\t\t\t\t\t\t\t${column.name}\n\t\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t\t${this.renderSortIndicator(column)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</schmancy-surface>\n\n\t\t\t\t${this.filteredData.length > 0\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<lit-virtualizer\n\t\t\t\t\t\t\t\tscroller\n\t\t\t\t\t\t\t\tclass=\"w-full h-full relative overflow-auto\"\n\t\t\t\t\t\t\t\t.items=${this.filteredData}\n\t\t\t\t\t\t\t\t.keyFunction=${(item: T, index: number) => {\n\t\t\t\t\t\t\t\t\tconst keyValue = item?.[this.keyField]\n\t\t\t\t\t\t\t\t\tif (keyValue === undefined || keyValue === null) {\n\t\t\t\t\t\t\t\t\t\treturn index\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn typeof keyValue === 'string' || typeof keyValue === 'number' ? keyValue : String(keyValue)\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t.renderItem=${(item: T, index: number) =>\n\t\t\t\t\t\t\t\t\thtml`\n\t\t\t\t\t\t\t\t\t\t<schmancy-table-row\n\t\t\t\t\t\t\t\t\t\t\tclass=\"w-full border-b border-solid border-outlineVariant\"\n\t\t\t\t\t\t\t\t\t\t\t.columns=${this.columns}\n\t\t\t\t\t\t\t\t\t\t\t.item=${item}\n\t\t\t\t\t\t\t\t\t\t\tcols=${this.cols}\n\t\t\t\t\t\t\t\t\t\t\t@click=${() => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst detail = { item, index }\n\t\t\t\t\t\t\t\t\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnew CustomEvent('click', {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdetail,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t></schmancy-table-row>\n\t\t\t\t\t\t\t\t\t` as TemplateResult}\n\t\t\t\t\t\t\t></lit-virtualizer>\n\t\t\t\t\t\t`\n\t\t\t\t\t: html`\n\t\t\t\t\t\t\t<div class=\"flex items-center justify-center w-full h-full p-8 text-center\">\n\t\t\t\t\t\t\t\t<schmancy-typography type=\"body\" token=\"lg\"> No data available </schmancy-typography>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-table': SchmancyDataTable\n\t}\n}\n"],"mappings":"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"}

package/dist/table.js

@@ -1,5 +1,5 @@
-import { s as e } from "./mixins-BV0w2yIE.js";
-import { t } from "./decorate-23nYs4Le.js";
+import { c as e } from "./mixins-BWb9_e1s.js";
+import { a as t } from "./active-host-BP0zy_Y9.js";
 import { customElement as n, property as r, state as i } from "lit/decorators.js";
 import { html as a } from "lit";
 import "@lit-labs/virtualizer";

package/dist/{tabs-cVHHd1dY.js → tabs-CikPr7by.js}

@@ -1,5 +1,5 @@
-import { s as e } from "./mixins-BV0w2yIE.js";
-import { t } from "./decorate-23nYs4Le.js";
+import { c as e } from "./mixins-BWb9_e1s.js";
+import { a as t } from "./active-host-BP0zy_Y9.js";
 import { filter as n, fromEvent as r, interval as i, map as a, take as o, throttleTime as s } from "rxjs";
 import { consume as c, createContext as l, provide as u } from "@lit/context";
 import { customElement as d, property as f, query as p, queryAssignedElements as m, state as h } from "lit/decorators.js";