@mhmo91/schmancy 0.10.41 → 0.10.43

package/dist/steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"steps.js","names":[],"sources":["../src/steps/steps.context.ts","../src/steps/schmancy-step.ts","../src/steps/schmancy-steps.ts"],"sourcesContent":["import { createContext } from '@lit/context'\nimport { BehaviorSubject } from 'rxjs'\n\nexport class StepsController {\n\tprivate stepSubject = new BehaviorSubject(1)\n\tlockBack = false\n\n\tget currentStep$() {\n\t\treturn this.stepSubject.asObservable()\n\t}\n\n\tget currentStep() {\n\t\treturn this.stepSubject.value\n\t}\n\n\tsetStep(step: number) {\n\t\tthis.stepSubject.next(step)\n\t}\n}\n\n/**\n * The actual context object. We provide/consume this in the container and steps.\n */\nexport const stepsContext = createContext<StepsController>(Symbol('SchmancyStepsContext'))\n","import { consume } from '@lit/context'\nimport { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAssignedNodes, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { takeUntil } from 'rxjs/operators'\nimport { StepsController, stepsContext } from './steps.context'\n\n@customElement('schmancy-step')\nexport class SchmancyStep extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\ttransition: all 0.2s ease-in-out;\n\t}\n`]\n\n\t/**\n\t * The step's position (1-based). This is used to compare against\n\t * the container's current step to decide if it's \"complete\",\n\t * \"current\", or \"upcoming\".\n\t */\n\t@property({ type: Number }) position = 1\n\n\t@property({ type: String }) label = ''\n\t@property({ type: String }) description = ''\n\n\t@property({ type: Boolean, reflect: true }) completed = false\n\n\t/**\n\t * Consume the shared StepsController from context.\n\t */\n\t@consume({ context: stepsContext })\n\tprivate steps!: StepsController\n\n\t/**\n\t * Local reactive copy of the container's current step number.\n\t */\n\t@state()\n\tprivate currentStep = 1\n\n\t@state()\n\tprivate hasContent = false\n\n\t@queryAssignedNodes({ flatten: true })\n\tprivate assignedNodes!: Node[]\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.steps.currentStep$\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(step => {\n\t\t\t\tthis.currentStep = step\n\t\t\t\tthis.updateFlexProperties()\n\t\t\t})\n\t}\n\n\tfirstUpdated() {\n\t\tthis.updateFlexProperties()\n\t}\n\n\tprivate onSlotChange() {\n\t\tthis.hasContent = this.assignedNodes.some(\n\t\t\tn => n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && n.textContent?.trim() !== ''),\n\t\t)\n\t\tthis.updateFlexProperties()\n\t}\n\n\tprivate updateFlexProperties() {\n\t\tconst isActive = this.position === this.currentStep\n\t\tthis.style.flex = isActive && this.hasContent ? '1 1 auto' : '0 0 auto'\n\t}\n\n\tget status(): 'complete' | 'current' | 'upcoming' {\n\t\tif (this.completed || this.position < this.currentStep) return 'complete'\n\t\tif (this.position === this.currentStep) return 'current'\n\t\treturn 'upcoming'\n\t}\n\n\tprivate onStepClick() {\n\t\tif (this.steps.lockBack && this.position < this.currentStep) return\n\t\tif (this.status !== 'upcoming') {\n\t\t\tthis.steps.setStep(this.position)\n\t\t}\n\t}\n\n\tprivate onStepKeydown(e: KeyboardEvent) {\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tthis.onStepClick()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst isActive = this.position === this.currentStep\n\t\tconst isComplete = this.status === 'complete'\n\t\tconst isUpcoming = this.status === 'upcoming'\n\t\tconst navigable = !isUpcoming && !(this.steps.lockBack && this.position < this.currentStep)\n\n\t\tif (this.hasContent) {\n\t\t\treturn this.renderContentRow(isActive, isComplete, isUpcoming, navigable)\n\t\t}\n\t\treturn this.renderRailRow(isActive, isComplete, isUpcoming, navigable)\n\t}\n\n\tprivate renderContentRow(isActive: boolean, isComplete: boolean, isUpcoming: boolean, navigable: boolean) {\n\t\tconst connectorClasses = {\n\t\t\t'bg-tertiary-default': isComplete,\n\t\t\t'bg-outlineVariant': !isComplete,\n\t\t}\n\n\t\tconst iconContainerClasses = {\n\t\t\t'relative border-solid z-10 flex size-8 items-center justify-center rounded-full transition-all duration-200': true,\n\t\t\t'bg-tertiary-default text-tertiary-on shadow-md group-hover:shadow-lg': isComplete,\n\t\t\t'border-2 border-primary-default bg-primary-container text-primary-onContainer shadow-sm': !isComplete && isActive,\n\t\t\t'border-2 border-outline bg-surface-default text-surface-onVariant group-hover:border-primary-default group-hover:bg-primary-container': isUpcoming,\n\t\t}\n\n\t\tconst textClasses = {\n\t\t\t'text-primary-default font-medium': isActive,\n\t\t\t'text-tertiary-default': isComplete,\n\t\t\t'text-surface-onVariant': isUpcoming,\n\t\t}\n\n\t\tconst clickableClass = navigable ? 'cursor-pointer' : ''\n\n\t\treturn html`\n\t\t\t<li class=\"relative\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"absolute top-8 left-3 sm:left-4 -ml-px w-0.5 transition-colors duration-200 ${this.classMap(connectorClasses)}\"\n\t\t\t\t\tstyle=\"height: calc(100% + var(--steps-gap, 0px))\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t@click=${this.onStepClick}\n\t\t\t\t\tclass=\"relative flex items-center group transition-all duration-200 hover:scale-[1.02] ${clickableClass} ${isActive ? 'bg-primary-container/20 -mx-1 sm:-mx-2 px-1 sm:px-2 py-2 sm:py-3 rounded-lg' : 'py-1 sm:py-2'}\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"flex items-center h-10 sm:h-12\">\n\t\t\t\t\t\t<span class=${this.classMap(iconContainerClasses)}>\n\t\t\t\t\t\t\t${isComplete\n\t\t\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t\t\t<svg class=\"size-5 transition-transform duration-200 group-hover:scale-110\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\t\td=\"M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z\"\n\t\t\t\t\t\t\t\t\t\t\t\tclip-rule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t`\n\t\t\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"size-3 rounded-full transition-all duration-200 ${isActive\n\t\t\t\t\t\t\t\t\t\t\t\t? 'bg-primary-onContainer'\n\t\t\t\t\t\t\t\t\t\t\t\t: 'bg-transparent group-hover:bg-primary-default group-hover:scale-125'}\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t`}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\n\t\t\t\t\t<span class=\"flex flex-col items-start justify-center min-w-0 ml-3 sm:ml-6\">\n\t\t\t\t\t\t<schmancy-typography type=\"title\" token=\"md\">\n\t\t\t\t\t\t\t<span class=\"transition-colors duration-200 ${this.classMap(textClasses)}\">${this.label}</span>\n\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t${when(\n\t\t\t\t\t\t\tthis.description,\n\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t<schmancy-typography type=\"body\" token=\"sm\" class=\"mt-0.5 sm:mt-1\">\n\t\t\t\t\t\t\t\t\t<span class=\"text-surface-onVariant transition-colors duration-200 ${isActive ? 'text-primary-onContainer' : ''}\">${this.description}</span>\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\n\t\t\t\t${when(\n\t\t\t\t\tisActive,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div class=\"ml-6 sm:ml-10 mt-3 sm:mt-4 pb-6 sm:pb-8 transition-all duration-300 ease-out\">\n\t\t\t\t\t\t\t<slot @slotchange=${this.onSlotChange}></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t\t${when(!isActive, () => html`<slot @slotchange=${this.onSlotChange} style=\"display:none\"></slot>`)}\n\t\t\t</li>\n\t\t`\n\t}\n\n\tprivate renderRailRow(isActive: boolean, isComplete: boolean, _isUpcoming: boolean, navigable: boolean) {\n\t\tconst isLast = !this.nextElementSibling?.matches('schmancy-step')\n\t\tconst labelClass = isActive\n\t\t\t? 'text-primary-default'\n\t\t\t: isComplete\n\t\t\t\t? 'text-surface-on'\n\t\t\t\t: 'text-surface-on-variant'\n\n\t\tconst dotClass = [\n\t\t\t'relative z-10 w-3 h-3 rounded-full shrink-0 transition-colors duration-300',\n\t\t\tisComplete || isActive ? 'bg-primary-default' : 'bg-outline',\n\t\t\tisActive ? 'ring-2 ring-offset-2 ring-offset-surface-containerLow ring-primary-default' : '',\n\t\t].join(' ')\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"relative flex items-center gap-4 rounded-lg -mx-2 px-2 py-3 transition-colors duration-200 ${\n\t\t\t\t\tnavigable\n\t\t\t\t\t\t? 'cursor-pointer hover:bg-primary-default/8 focus-visible:ring-2 focus-visible:ring-primary-default'\n\t\t\t\t\t\t: ''\n\t\t\t\t}\"\n\t\t\t\trole=${navigable ? 'button' : 'presentation'}\n\t\t\t\ttabindex=${navigable ? '0' : '-1'}\n\t\t\t\taria-current=${isActive ? 'step' : 'false'}\n\t\t\t\taria-label=${navigable ? `Go back to ${this.label}` : this.label}\n\t\t\t\t@click=${this.onStepClick}\n\t\t\t\t@keydown=${this.onStepKeydown}\n\t\t\t>\n\t\t\t\t${when(\n\t\t\t\t\t!isLast,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"absolute left-3.5 top-1/2 w-px h-full transition-colors duration-300 ${\n\t\t\t\t\t\t\t\tisComplete ? 'bg-primary-default' : 'bg-outline'\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t></div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t\t<div class=${dotClass} aria-hidden=\"true\"></div>\n\t\t\t\t<schmancy-typography type=\"label\" token=\"lg\" class=${labelClass}>${this.label}</schmancy-typography>\n\t\t\t</div>\n\t\t\t<slot @slotchange=${this.onSlotChange} style=\"display:none\"></slot>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-step': SchmancyStep\n\t}\n}\n","import { provide } from '@lit/context'\nimport { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { distinctUntilChanged, takeUntil, tap } from 'rxjs/operators'\nimport { StepsController, stepsContext } from './steps.context'\n\n/**\n * Custom event emitted when the current step changes.\n * The component stops propagation of bubbled 'change' events from child inputs\n * to prevent collision with the step change event.\n */\nexport type SchmancyStepsChangeEvent = CustomEvent<{ value: number }>\n\n@customElement('schmancy-steps')\nexport class SchmancySteps extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`]\n\n\tprivate controller = new StepsController()\n\n\t@provide({ context: stepsContext })\n\tstepsController = this.controller\n\n\t@property({ type: Number, reflect: true })\n\tset value(v: number) {\n\t\tconst oldValue = this.controller.currentStep\n\t\tif (oldValue !== v) {\n\t\t\tthis.controller.setStep(v)\n\t\t}\n\t}\n\n\tget value(): number {\n\t\treturn this.controller.currentStep\n\t}\n\n\t/**\n\t * Block back-navigation for the whole stepper.\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tset lockBack(v: boolean) {\n\t\tthis.controller.lockBack = v\n\t}\n\tget lockBack(): boolean {\n\t\treturn this.controller.lockBack\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// React to controller changes (from property OR step clicks)\n\t\tthis.controller.currentStep$\n\t\t\t.pipe(\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(step => {\n\t\t\t\t\tthis.requestUpdate()\n\t\t\t\t\tthis.dispatchScopedEvent('change', { value: step }, { bubbles: false })\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\t/**\n\t * Handle change events — stop propagation of bubbled events from children.\n\t */\n\tprivate handleChange = (e: Event) => {\n\t\tif (e.target !== this) {\n\t\t\te.stopPropagation()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<nav aria-label=\"Progress\" @change=${this.handleChange}>\n\t\t\t\t<ol role=\"list\" style=\"display:contents\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ol>\n\t\t\t</nav>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-steps': SchmancySteps\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"steps.js","names":[],"sources":["../src/steps/steps.context.ts","../src/steps/schmancy-step.ts","../src/steps/schmancy-steps.ts"],"sourcesContent":["import { createContext } from '@lit/context'\nimport { BehaviorSubject } from 'rxjs'\n\nexport class StepsController {\n\tprivate stepSubject = new BehaviorSubject(1)\n\tlockBack = false\n\n\tget currentStep$() {\n\t\treturn this.stepSubject.asObservable()\n\t}\n\n\tget currentStep() {\n\t\treturn this.stepSubject.value\n\t}\n\n\tsetStep(step: number) {\n\t\tthis.stepSubject.next(step)\n\t}\n}\n\n/**\n * The actual context object. We provide/consume this in the container and steps.\n */\nexport const stepsContext = createContext<StepsController>(Symbol('SchmancyStepsContext'))\n","import { consume } from '@lit/context'\nimport { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAssignedNodes, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { takeUntil } from 'rxjs/operators'\nimport { StepsController, stepsContext } from './steps.context'\n\n@customElement('schmancy-step')\nexport class SchmancyStep extends SchmancyElement {\n\tstatic styles = [\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\ttransition: all 0.2s ease-in-out;\n\t\t\t}\n\t\t`,\n\t]\n\n\t/**\n\t * The step's position (1-based). This is used to compare against\n\t * the container's current step to decide if it's \"complete\",\n\t * \"current\", or \"upcoming\".\n\t */\n\t@property({ type: Number }) position = 1\n\n\t@property({ type: String }) label = ''\n\t@property({ type: String }) description = ''\n\n\t@property({ type: Boolean, reflect: true }) completed = false\n\n\t/**\n\t * Consume the shared StepsController from context.\n\t */\n\t@consume({ context: stepsContext })\n\tprivate steps!: StepsController\n\n\t/**\n\t * Local reactive copy of the container's current step number.\n\t */\n\t@state()\n\tprivate currentStep = 1\n\n\t@state()\n\tprivate hasContent = false\n\n\t@queryAssignedNodes({ flatten: true })\n\tprivate assignedNodes!: Node[]\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.steps.currentStep$.pipe(takeUntil(this.disconnecting)).subscribe(step => {\n\t\t\tthis.currentStep = step\n\t\t\tthis.updateFlexProperties()\n\t\t})\n\t}\n\n\tfirstUpdated() {\n\t\tthis.updateFlexProperties()\n\t}\n\n\tprivate onSlotChange() {\n\t\tthis.hasContent = this.assignedNodes.some(\n\t\t\tn => n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && n.textContent?.trim() !== ''),\n\t\t)\n\t\tthis.updateFlexProperties()\n\t}\n\n\tprivate updateFlexProperties() {\n\t\tconst isActive = this.position === this.currentStep\n\t\tthis.style.flex = isActive && this.hasContent ? '1 1 auto' : '0 0 auto'\n\t}\n\n\tget status(): 'complete' | 'current' | 'upcoming' {\n\t\tif (this.completed || this.position < this.currentStep) return 'complete'\n\t\tif (this.position === this.currentStep) return 'current'\n\t\treturn 'upcoming'\n\t}\n\n\tprivate onStepClick() {\n\t\tif (this.steps.lockBack && this.position < this.currentStep) return\n\t\tif (this.status !== 'upcoming') {\n\t\t\tthis.steps.setStep(this.position)\n\t\t}\n\t}\n\n\tprivate onStepKeydown(e: KeyboardEvent) {\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tthis.onStepClick()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst isActive = this.position === this.currentStep\n\t\tconst isComplete = this.status === 'complete'\n\t\tconst isUpcoming = this.status === 'upcoming'\n\t\tconst navigable = !isUpcoming && !(this.steps.lockBack && this.position < this.currentStep)\n\n\t\tif (this.hasContent) {\n\t\t\treturn this.renderContentRow(isActive, isComplete, isUpcoming, navigable)\n\t\t}\n\t\treturn this.renderRailRow(isActive, isComplete, isUpcoming, navigable)\n\t}\n\n\tprivate renderContentRow(isActive: boolean, isComplete: boolean, isUpcoming: boolean, navigable: boolean) {\n\t\tconst connectorClasses = {\n\t\t\t'bg-tertiary-default': isComplete,\n\t\t\t'bg-outlineVariant': !isComplete,\n\t\t}\n\n\t\tconst iconContainerClasses = {\n\t\t\t'relative border-solid z-10 flex size-8 items-center justify-center rounded-full transition-all duration-200': true,\n\t\t\t'bg-tertiary-default text-tertiary-on shadow-md group-hover:shadow-lg': isComplete,\n\t\t\t'border-2 border-primary-default bg-primary-container text-primary-onContainer shadow-sm':\n\t\t\t\t!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':\n\t\t\t\tisUpcoming,\n\t\t}\n\n\t\tconst textClasses = {\n\t\t\t'text-primary-default font-medium': isActive,\n\t\t\t'text-tertiary-default': isComplete,\n\t\t\t'text-surface-onVariant': isUpcoming,\n\t\t}\n\n\t\tconst clickableClass = navigable ? 'cursor-pointer' : ''\n\n\t\treturn html`\n\t\t\t<li class=\"relative\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"absolute top-8 left-3 sm:left-4 -ml-px w-0.5 transition-colors duration-200 ${this.classMap(\n\t\t\t\t\t\tconnectorClasses,\n\t\t\t\t\t)}\"\n\t\t\t\t\tstyle=\"height: calc(100% + var(--steps-gap, 0px))\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t@click=${this.onStepClick}\n\t\t\t\t\tclass=\"relative flex items-center group transition-all duration-200 hover:scale-[1.02] ${clickableClass} ${isActive\n\t\t\t\t\t\t? 'bg-primary-container/20 -mx-1 sm:-mx-2 px-1 sm:px-2 py-2 sm:py-3 rounded-lg'\n\t\t\t\t\t\t: '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\n\t\t\t\t\t\t\t\t\t\t\tclass=\"size-5 transition-transform duration-200 group-hover:scale-110\"\n\t\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 20 20\"\n\t\t\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\t\td=\"M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z\"\n\t\t\t\t\t\t\t\t\t\t\t\tclip-rule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t`\n\t\t\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"size-3 rounded-full transition-all duration-200 ${isActive\n\t\t\t\t\t\t\t\t\t\t\t\t? 'bg-primary-onContainer'\n\t\t\t\t\t\t\t\t\t\t\t\t: 'bg-transparent group-hover:bg-primary-default group-hover:scale-125'}\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t`}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\n\t\t\t\t\t<span class=\"flex flex-col items-start justify-center min-w-0 ml-3 sm:ml-6\">\n\t\t\t\t\t\t<schmancy-typography type=\"title\" token=\"md\">\n\t\t\t\t\t\t\t<span class=\"transition-colors duration-200 ${this.classMap(textClasses)}\">${this.label}</span>\n\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t${when(\n\t\t\t\t\t\t\tthis.description,\n\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t<schmancy-typography type=\"body\" token=\"sm\" class=\"mt-0.5 sm:mt-1\">\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"text-surface-onVariant transition-colors duration-200 ${isActive\n\t\t\t\t\t\t\t\t\t\t\t? 'text-primary-onContainer'\n\t\t\t\t\t\t\t\t\t\t\t: ''}\"\n\t\t\t\t\t\t\t\t\t\t>${this.description}</span\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\n\t\t\t\t${when(\n\t\t\t\t\tisActive,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div class=\"ml-6 sm:ml-10 mt-3 sm:mt-4 pb-6 sm:pb-8 transition-all duration-300 ease-out\">\n\t\t\t\t\t\t\t<slot @slotchange=${this.onSlotChange}></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t\t${when(!isActive, () => html`<slot @slotchange=${this.onSlotChange} style=\"display:none\"></slot>`)}\n\t\t\t</li>\n\t\t`\n\t}\n\n\tprivate renderRailRow(isActive: boolean, isComplete: boolean, _isUpcoming: boolean, navigable: boolean) {\n\t\tconst isLast = !this.nextElementSibling?.matches('schmancy-step')\n\t\tconst labelClass = isActive ? 'text-primary-default' : isComplete ? 'text-surface-on' : 'text-surface-on-variant'\n\n\t\tconst dotClass = [\n\t\t\t'relative z-10 w-3 h-3 rounded-full shrink-0 transition-colors duration-300',\n\t\t\tisComplete || isActive ? 'bg-primary-default' : 'bg-outline',\n\t\t\tisActive ? 'ring-2 ring-offset-2 ring-offset-surface-containerLow ring-primary-default' : '',\n\t\t].join(' ')\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"relative flex items-center gap-4 rounded-lg -mx-2 px-2 py-3 transition-colors duration-200 ${navigable\n\t\t\t\t\t? 'cursor-pointer hover:bg-primary-default/8 focus-visible:ring-2 focus-visible:ring-primary-default'\n\t\t\t\t\t: ''}\"\n\t\t\t\trole=${navigable ? 'button' : 'presentation'}\n\t\t\t\ttabindex=${navigable ? '0' : '-1'}\n\t\t\t\taria-current=${isActive ? 'step' : 'false'}\n\t\t\t\taria-label=${navigable ? `Go back to ${this.label}` : this.label}\n\t\t\t\t@click=${this.onStepClick}\n\t\t\t\t@keydown=${this.onStepKeydown}\n\t\t\t>\n\t\t\t\t${when(\n\t\t\t\t\t!isLast,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"absolute left-3.5 top-1/2 w-px h-full transition-colors duration-300 ${isComplete\n\t\t\t\t\t\t\t\t? 'bg-primary-default'\n\t\t\t\t\t\t\t\t: 'bg-outline'}\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t></div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t\t<div class=${dotClass} aria-hidden=\"true\"></div>\n\t\t\t\t<schmancy-typography type=\"label\" token=\"lg\" class=${labelClass}>${this.label}</schmancy-typography>\n\t\t\t</div>\n\t\t\t<slot @slotchange=${this.onSlotChange} style=\"display:none\"></slot>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-step': SchmancyStep\n\t}\n}\n","import { provide } from '@lit/context'\nimport { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { distinctUntilChanged, takeUntil, tap } from 'rxjs/operators'\nimport { StepsController, stepsContext } from './steps.context'\n\n/**\n * Custom event emitted when the current step changes.\n * The component stops propagation of bubbled 'change' events from child inputs\n * to prevent collision with the step change event.\n */\nexport type SchmancyStepsChangeEvent = CustomEvent<{ value: number }>\n\n@customElement('schmancy-steps')\nexport class SchmancySteps extends SchmancyElement {\n\tstatic styles = [\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\t\t`,\n\t]\n\n\tprivate controller = new StepsController()\n\n\t@provide({ context: stepsContext })\n\tstepsController = this.controller\n\n\t@property({ type: Number, reflect: true })\n\tset value(v: number) {\n\t\tconst oldValue = this.controller.currentStep\n\t\tif (oldValue !== v) {\n\t\t\tthis.controller.setStep(v)\n\t\t}\n\t}\n\n\tget value(): number {\n\t\treturn this.controller.currentStep\n\t}\n\n\t/**\n\t * Block back-navigation for the whole stepper.\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tset lockBack(v: boolean) {\n\t\tthis.controller.lockBack = v\n\t}\n\tget lockBack(): boolean {\n\t\treturn this.controller.lockBack\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// React to controller changes (from property OR step clicks)\n\t\tthis.controller.currentStep$\n\t\t\t.pipe(\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(step => {\n\t\t\t\t\tthis.requestUpdate()\n\t\t\t\t\tthis.dispatchScopedEvent('change', { value: step }, { bubbles: false })\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\t/**\n\t * Handle change events — stop propagation of bubbled events from children.\n\t */\n\tprivate handleChange = (e: Event) => {\n\t\tif (e.target !== this) {\n\t\t\te.stopPropagation()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<nav aria-label=\"Progress\" @change=${this.handleChange}>\n\t\t\t\t<ol role=\"list\" style=\"display:contents\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ol>\n\t\t\t</nav>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-steps': SchmancySteps\n\t}\n}\n"],"mappings":"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"}

package/dist/surface-COBvWWFb.cjs

@@ -0,0 +1,7 @@
+require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-CeKrBW2j.cjs`),t=require(`./mixins-Cjn20BQH.cjs`);let n=require(`@lit/context`),r=require(`lit/decorators.js`),i=require(`lit`);var a=(0,n.createContext)(`surface`),o=class extends t.t(e.t){constructor(...e){super(...e),this.type=`containerLow`}static{this.styles=[i.css`
+			:host {
+				display: block;
+				box-sizing: border-box;
+				overflow: visible;
+			}
+		`]}render(){return i.html`<slot></slot>`}};e.u([(0,n.provide)({context:a}),(0,r.property)({reflect:!0})],o.prototype,`type`,void 0),o=e.u([(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-COBvWWFb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface-COBvWWFb.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/**\n * `<schmancy-surface>` component\n *\n * Color-variant container that paints a background and establishes the inherited\n * text color for descendants. Corner radius, shadow depth, and cursor behavior\n * are the consumer's responsibility — apply stock Tailwind classes directly on\n * the element.\n *\n * Sizing is the consumer's responsibility — use Tailwind utilities\n * (`class=\"w-full h-full\"`) on the element directly.\n *\n * @element schmancy-surface\n * @slot - Default slot for projecting child content.\n *\n * @example\n * <schmancy-surface type=\"surfaceBright\" class=\"rounded-2xl shadow-lg w-full\">\n *   <p>Content here</p>\n * </schmancy-surface>\n */\n@customElement('schmancy-surface')\nexport class SchmancySurface extends SurfaceMixin(SchmancyElement) {\n\tstatic styles = [\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\toverflow: visible;\n\t\t\t}\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 = 'containerLow'\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":"mMAOA,IAAa,GAAA,EAAA,EAAA,eAA0D,SAAA,EAsBhE,EAAA,cAA8B,EAAA,EAAa,EAAA,CAAA,CAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,CAAA,EAAA,KAAA,KAiBlB,cAAA,CAAA,OAAA,KAAA,OAhBf,CACf,EAAA,GAAG;;;;;;KAiBJ,QAAA,CACC,MAAO,GAAA,IAAI,eACZ,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,SANS,CAAE,QAAS,CAAA,CAAA,GAA4B,EAAA,EAAA,UACtC,CAAE,QAAA,CAAS,CAAA,CAAA,CAAA,EAAM,EAAA,UAAA,OAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eAjBb,kBAAA,CAAA,EAAkB,CAAA,EAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,CAAA,CAAA,CAAA,EAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,CAAA,CAAA,CAAA"}

package/dist/{surface-cqMsHJHM.js → surface-DXk1X1tL.js}

@@ -1,20 +1,20 @@
-import { t as e, u as t } from "./SchmancyElement-OWgz9ePG.js";
-import { t as n } from "./mixins-COeG4DiX.js";
+import { t as e, u as t } from "./SchmancyElement-Ob9yGkiG.js";
+import { t as n } from "./mixins-q4KAL8Xr.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";
 var l = r("surface"), u = class extends n(e) {
 	constructor(...e) {
-		super(...e), this.type = "subtle";
+		super(...e), this.type = "containerLow";
 	}
 	static {
 		this.styles = [s`
-		:host {
-			display: block;
-			box-sizing: border-box;
-			overflow: visible;
-		}
-	`];
+			:host {
+				display: block;
+				box-sizing: border-box;
+				overflow: visible;
+			}
+		`];
 	}
 	render() {
 		return c`<slot></slot>`;

package/dist/surface-DXk1X1tL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface-DXk1X1tL.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/**\n * `<schmancy-surface>` component\n *\n * Color-variant container that paints a background and establishes the inherited\n * text color for descendants. Corner radius, shadow depth, and cursor behavior\n * are the consumer's responsibility — apply stock Tailwind classes directly on\n * the element.\n *\n * Sizing is the consumer's responsibility — use Tailwind utilities\n * (`class=\"w-full h-full\"`) on the element directly.\n *\n * @element schmancy-surface\n * @slot - Default slot for projecting child content.\n *\n * @example\n * <schmancy-surface type=\"surfaceBright\" class=\"rounded-2xl shadow-lg w-full\">\n *   <p>Content here</p>\n * </schmancy-surface>\n */\n@customElement('schmancy-surface')\nexport class SchmancySurface extends SurfaceMixin(SchmancyElement) {\n\tstatic styles = [\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\toverflow: visible;\n\t\t\t}\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 = 'containerLow'\n\n\tprotected render(): unknown {\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-surface': SchmancySurface\n\t}\n}\n"],"mappings":";;;;;AAOA,IAAa,IAA6B,EAA6B,SAAA,GAsBhE,IAAA,cAA8B,EAAa,CAAA,EAAA;CAAA,YAAA,GAAA,GAAA;EAAA,MAAA,GAAA,CAAA,GAAA,KAAA,OAiBlB;CAAA;CAAA;EAAA,KAAA,SAhBf,CACf,CAAG;;;;;;;;CAiBJ,SAAA;EACC,OAAO,CAAI;CACZ;AAAA;AAAA,EAAA,CANC,EAAQ,EAAE,SAAS,EAAA,CAAA,GACnB,EAAS,EAAE,SAAA,CAAS,EAAA,CAAA,CAAA,GAAM,EAAA,WAAA,QAAA,KAAA,CAAA,GAAA,IAAA,EAAA,CAjB3B,EAAc,kBAAA,CAAA,GAAkB,CAAA;AAAA,SAAA,QAAA,KAAA"}

package/dist/surface.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./surface-bTjOiq8n.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-COBvWWFb.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-cqMsHJHM.js";
+import { n as e, t } from "./surface-DXk1X1tL.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(`./SchmancyElement-D9WA9FP9.cjs`),t=require(`./mixins-XGVIOvKt.cjs`);let n=require(`lit/decorators.js`),r=require(`lit`);var i=class extends t.o(r.css`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-CeKrBW2j.cjs`),t=require(`./mixins-Cjn20BQH.cjs`);let n=require(`lit/decorators.js`),r=require(`lit`);var i=class extends t.o(r.css`
 	:host {
 		display: inline-block;
 	}
@@ -21,7 +21,9 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 		background: var(--schmancy-sys-color-surface-containerHighest, #e0e0e0);
 		border: 1px solid var(--schmancy-sys-color-outline, #79747e);
 		position: relative;
-		transition: background 150ms ease, border-color 150ms ease;
+		transition:
+			background 150ms ease,
+			border-color 150ms ease;
 	}
 	:host(:state(checked)) .track {
 		background: var(--schmancy-sys-color-primary-default, #6750a4);
@@ -36,7 +38,11 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 		border-radius: 999px;
 		background: var(--schmancy-sys-color-outline, #79747e);
 		transform: translateY(-50%);
-		transition: transform 150ms ease, background 150ms ease, width 150ms ease, height 150ms ease;
+		transition:
+			transform 150ms ease,
+			background 150ms ease,
+			width 150ms ease,
+			height 150ms ease;
 	}
 	:host(:state(checked)) .thumb {
 		transform: translate(1rem, -50%);
@@ -49,7 +55,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 		outline-offset: 2px;
 	}
 	@media (prefers-reduced-motion: reduce) {
-		.track, .thumb { transition: none; }
+		.track,
+		.thumb {
+			transition: none;
+		}
 	}
 `){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

package/dist/switch.cjs.map

@@ -1 +1 @@
-{"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":"4OAkBO,IAAA,EAAA,cAA6B,EAAA,EAAkB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAuE/B,KAAA,KAAA,QAAA,CAIN,EAAA,KAAA,eAAA,CAGe,EAAA,KAAA,WAAA,CAmE7B,KAAK,WACT,KAAK,QAAA,CAAW,KAAK,QACrB,KAAK,YAAA,EACL,KAAK,WAAW,CAAE,MAAO,KAAK,OAAA,CAAA,EAAA,EAAA,KAAA,UAGV,GAAA,CAChB,EAAE,MAAQ,KAAO,EAAE,MAAQ,UAC9B,EAAE,eAAA,EACF,KAAK,OAAA,EAAA,CAAA,CAAA,OAAA,KAAA,kBA9F8B,CAAA,GACjC,EAAA,WAAW,kBACd,eAAA,CAAgB,CAAA,CAAA,CAkBjB,aAAsB,EAAA,CACrB,MAAM,aAAa,CAAA,EACnB,KAAK,eAAiB,KAAK,OAC5B,CAMA,IAAA,OAAa,CACZ,OAAO,KAAK,UAAY,KAAK,cAC9B,CAEA,WAAoB,EAAA,CACnB,MAAM,WAAW,CAAA,GACb,EAAQ,IAAI,SAAA,GAAc,EAAQ,IAAI,OAAA,GAAY,EAAQ,IAAI,MAAA,KAGjE,KAAK,WAAW,aAAa,KAAK,QAAU,KAAK,MAAQ,IAAA,EACrD,KAAK,QAAS,KAAK,WAAW,OAAO,IAAI,SAAA,EACxC,KAAK,WAAW,OAAO,OAAO,SAAA,EAKnC,KAAK,cAAA,IAEF,EAAQ,IAAI,UAAA,GAAe,EAAQ,IAAI,UAAA,IAC1C,KAAK,cAAA,CAEP,CAGA,eAAA,CACC,GAAI,KAAK,SAER,OADA,KAAK,WAAW,YAAY,CAAC,CAAA,EAAA,CACtB,EAER,IAAM,EAAA,CAAW,KAAK,UAAY,KAAK,QACjC,EAAU,EAAU,GAAK,2BAW/B,OATA,KAAK,WAAW,YACf,EAAU,CAAC,EAAI,CAAE,aAAA,CAAc,CAAA,EAC/B,EAAA,IAAU,GAAY,CAAA,EAGnB,KAAK,gBAAA,IACR,KAAK,MAAA,CAAS,EACd,KAAK,kBAAoB,GAEnB,CACR,CAGA,eAAA,CACC,OAAK,KAAK,MAAA,CAAQ,KAAK,UAAa,KAAK,QAClC,CAAC,CAAC,KAAK,KAAM,KAAK,KAAA,CAAA,EADgC,CAAA,CAE1D,CAEA,WAAA,CACC,KAAK,QAAU,KAAK,eACpB,MAAM,UAAA,CACP,CAgBA,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,OAAA;eACH,KAAK,UAAA;;;;;;GAOnB,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAzGU,CAAE,KAAM,OAAQ,QAAA,CAAS,CAAA,CAAA,CAAA,EAAM,EAAA,UAAA,QAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAI/B,CAAE,KAAM,QAAS,QAAA,CAAS,CAAA,CAAA,CAAA,EAAM,EAAA,UAAA,UAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eA3E5B,iBAAA,CAAA,EAAiB,CAAA,EAAA,OAAA,eAAA,QAAA,iBAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,CAAA,CAAA,CAAA"}
+{"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:\n\t\t\tbackground 150ms ease,\n\t\t\tborder-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:\n\t\t\ttransform 150ms ease,\n\t\t\tbackground 150ms ease,\n\t\t\twidth 150ms ease,\n\t\t\theight 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,\n\t\t.thumb {\n\t\t\ttransition: none;\n\t\t}\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(isValid ? {} : { valueMissing: true }, isValid ? undefined : message)\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":"4OAkBO,IAAA,EAAA,cAA6B,EAAA,EAAkB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAgF/B,KAAA,KAAA,QAAA,CAIN,EAAA,KAAA,eAAA,CAGe,EAAA,KAAA,WAAA,CAgE7B,KAAK,WACT,KAAK,QAAA,CAAW,KAAK,QACrB,KAAK,YAAA,EACL,KAAK,WAAW,CAAE,MAAO,KAAK,OAAA,CAAA,EAAA,EAAA,KAAA,UAGV,GAAA,CAChB,EAAE,MAAQ,KAAO,EAAE,MAAQ,UAC9B,EAAE,eAAA,EACF,KAAK,OAAA,EAAA,CAAA,CAAA,OAAA,KAAA,kBA3F8B,CAAA,GACjC,EAAA,WAAW,kBACd,eAAA,CAAgB,CAAA,CAAA,CAkBjB,aAAsB,EAAA,CACrB,MAAM,aAAa,CAAA,EACnB,KAAK,eAAiB,KAAK,OAC5B,CAMA,IAAA,OAAa,CACZ,OAAO,KAAK,UAAY,KAAK,cAC9B,CAEA,WAAoB,EAAA,CACnB,MAAM,WAAW,CAAA,GACb,EAAQ,IAAI,SAAA,GAAc,EAAQ,IAAI,OAAA,GAAY,EAAQ,IAAI,MAAA,KAGjE,KAAK,WAAW,aAAa,KAAK,QAAU,KAAK,MAAQ,IAAA,EACrD,KAAK,QAAS,KAAK,WAAW,OAAO,IAAI,SAAA,EACxC,KAAK,WAAW,OAAO,OAAO,SAAA,EAKnC,KAAK,cAAA,IAEF,EAAQ,IAAI,UAAA,GAAe,EAAQ,IAAI,UAAA,IAC1C,KAAK,cAAA,CAEP,CAGA,eAAA,CACC,GAAI,KAAK,SAER,OADA,KAAK,WAAW,YAAY,CAAC,CAAA,EAAA,CACtB,EAER,IAAM,EAAA,CAAW,KAAK,UAAY,KAAK,QACjC,EAAU,EAAU,GAAK,2BAQ/B,OANA,KAAK,WAAW,YAAY,EAAU,CAAC,EAAI,CAAE,aAAA,CAAc,CAAA,EAAQ,EAAA,IAAU,GAAY,CAAA,EAErF,KAAK,gBAAA,IACR,KAAK,MAAA,CAAS,EACd,KAAK,kBAAoB,GAEnB,CACR,CAGA,eAAA,CACC,OAAK,KAAK,MAAA,CAAQ,KAAK,UAAa,KAAK,QAClC,CAAC,CAAC,KAAK,KAAM,KAAK,KAAA,CAAA,EADgC,CAAA,CAE1D,CAEA,WAAA,CACC,KAAK,QAAU,KAAK,eACpB,MAAM,UAAA,CACP,CAgBA,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,OAAA;eACH,KAAK,UAAA;;;;;;GAOnB,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAtGU,CAAE,KAAM,OAAQ,QAAA,CAAS,CAAA,CAAA,CAAA,EAAM,EAAA,UAAA,QAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAI/B,CAAE,KAAM,QAAS,QAAA,CAAS,CAAA,CAAA,CAAA,EAAM,EAAA,UAAA,UAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eApF5B,iBAAA,CAAA,EAAiB,CAAA,EAAA,OAAA,eAAA,QAAA,iBAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,CAAA,CAAA,CAAA"}

package/dist/switch.js

@@ -1,5 +1,5 @@
-import { u as e } from "./SchmancyElement-OWgz9ePG.js";
-import { o as t } from "./mixins-COeG4DiX.js";
+import { u as e } from "./SchmancyElement-Ob9yGkiG.js";
+import { o as t } from "./mixins-q4KAL8Xr.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 t(a`
@@ -25,7 +25,9 @@ var c = class extends t(a`
 		background: var(--schmancy-sys-color-surface-containerHighest, #e0e0e0);
 		border: 1px solid var(--schmancy-sys-color-outline, #79747e);
 		position: relative;
-		transition: background 150ms ease, border-color 150ms ease;
+		transition:
+			background 150ms ease,
+			border-color 150ms ease;
 	}
 	:host(:state(checked)) .track {
 		background: var(--schmancy-sys-color-primary-default, #6750a4);
@@ -40,7 +42,11 @@ var c = class extends t(a`
 		border-radius: 999px;
 		background: var(--schmancy-sys-color-outline, #79747e);
 		transform: translateY(-50%);
-		transition: transform 150ms ease, background 150ms ease, width 150ms ease, height 150ms ease;
+		transition:
+			transform 150ms ease,
+			background 150ms ease,
+			width 150ms ease,
+			height 150ms ease;
 	}
 	:host(:state(checked)) .thumb {
 		transform: translate(1rem, -50%);
@@ -53,7 +59,10 @@ var c = class extends t(a`
 		outline-offset: 2px;
 	}
 	@media (prefers-reduced-motion: reduce) {
-		.track, .thumb { transition: none; }
+		.track,
+		.thumb {
+			transition: none;
+		}
 	}
 `) {
 	constructor(...e) {

package/dist/switch.js.map

@@ -1 +1 @@
-{"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,iBAAA,CAGe,GAAA,KAAA,eAAA;GAmE7B,KAAK,aACT,KAAK,UAAA,CAAW,KAAK,SACrB,KAAK,YAAA,GACL,KAAK,WAAW,EAAE,OAAO,KAAK,QAAA,CAAA;EAAA,GAAA,KAAA,aAGV,MAAA;GACN,AAAV,EAAE,QAAQ,OAAO,EAAE,QAAQ,YAC9B,EAAE,eAAA,GACF,KAAK,OAAA;EAAA;CAAA;CAAA;EAAA,KAAA,oBA9F8B;GAAA,GACjC,EAAW;GACd,gBAAA,CAAgB;EAAA;CAAA;CAkBjB,aAAsB,GAAA;EACrB,MAAM,aAAa,CAAA,GACnB,KAAK,iBAAiB,KAAK;CAC5B;CAMA,IAAA,QAAa;EACZ,OAAO,KAAK,YAAY,KAAK;CAC9B;CAEA,WAAoB,GAAA;EACnB,MAAM,WAAW,CAAA,IACb,EAAQ,IAAI,SAAA,KAAc,EAAQ,IAAI,OAAA,KAAY,EAAQ,IAAI,MAAA,OAGjE,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAA,GACrD,KAAK,UAAS,KAAK,WAAW,OAAO,IAAI,SAAA,IACxC,KAAK,WAAW,OAAO,OAAO,SAAA,GAKnC,KAAK,cAAA,KAEF,EAAQ,IAAI,UAAA,KAAe,EAAQ,IAAI,UAAA,MAC1C,KAAK,cAAA;CAEP;CAGA,gBAAA;EACC,IAAI,KAAK,UAER,OADA,KAAK,WAAW,YAAY,CAAC,CAAA,GAAA,CACtB;EAER,IAAM,IAAA,CAAW,KAAK,YAAY,KAAK,SACjC,IAAU,IAAU,KAAK;EAW/B,OATA,KAAK,WAAW,YACf,IAAU,CAAC,IAAI,EAAE,cAAA,CAAc,EAAA,GAC/B,IAAA,KAAU,IAAY,CAAA,GAGnB,KAAK,gBAAA,MACR,KAAK,QAAA,CAAS,GACd,KAAK,oBAAoB,IAEnB;CACR;CAGA,gBAAA;EACC,OAAK,KAAK,QAAA,CAAQ,KAAK,YAAa,KAAK,UAClC,CAAC,CAAC,KAAK,MAAM,KAAK,KAAA,CAAA,IADgC,CAAA;CAE1D;CAEA,YAAA;EACC,KAAK,UAAU,KAAK,gBACpB,MAAM,UAAA;CACP;CAgBA,SAAA;EACC,OAAO,CAAI;;;;mBAIM,KAAK,UAAU,SAAS,QAAA;iBAC1B,KAAK,SAAS,EAAA;oBACX,KAAK,WAAW,SAAS,QAAA;gBAC7B,KAAK,SAAA;aACR,KAAK,OAAA;eACH,KAAK,UAAA;;;;;;;CAOnB;AAAA;AAAA,EAAA,CAzGC,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;AAAA,CAAA,CAAA,GAAM,EAAA,WAAA,SAAA,KAAA,CAAA,GAAA,EAAA,CAIxC,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;AAAA,CAAA,CAAA,GAAM,EAAA,WAAA,WAAA,KAAA,CAAA,GAAA,IAAA,EAAA,CA3E1C,EAAc,iBAAA,CAAA,GAAiB,CAAA;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:\n\t\t\tbackground 150ms ease,\n\t\t\tborder-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:\n\t\t\ttransform 150ms ease,\n\t\t\tbackground 150ms ease,\n\t\t\twidth 150ms ease,\n\t\t\theight 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,\n\t\t.thumb {\n\t\t\ttransition: none;\n\t\t}\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(isValid ? {} : { valueMissing: true }, isValid ? undefined : message)\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAgF/B,MAAA,KAAA,UAAA,CAIN,GAAA,KAAA,iBAAA,CAGe,GAAA,KAAA,eAAA;GAgE7B,KAAK,aACT,KAAK,UAAA,CAAW,KAAK,SACrB,KAAK,YAAA,GACL,KAAK,WAAW,EAAE,OAAO,KAAK,QAAA,CAAA;EAAA,GAAA,KAAA,aAGV,MAAA;GACN,AAAV,EAAE,QAAQ,OAAO,EAAE,QAAQ,YAC9B,EAAE,eAAA,GACF,KAAK,OAAA;EAAA;CAAA;CAAA;EAAA,KAAA,oBA3F8B;GAAA,GACjC,EAAW;GACd,gBAAA,CAAgB;EAAA;CAAA;CAkBjB,aAAsB,GAAA;EACrB,MAAM,aAAa,CAAA,GACnB,KAAK,iBAAiB,KAAK;CAC5B;CAMA,IAAA,QAAa;EACZ,OAAO,KAAK,YAAY,KAAK;CAC9B;CAEA,WAAoB,GAAA;EACnB,MAAM,WAAW,CAAA,IACb,EAAQ,IAAI,SAAA,KAAc,EAAQ,IAAI,OAAA,KAAY,EAAQ,IAAI,MAAA,OAGjE,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAA,GACrD,KAAK,UAAS,KAAK,WAAW,OAAO,IAAI,SAAA,IACxC,KAAK,WAAW,OAAO,OAAO,SAAA,GAKnC,KAAK,cAAA,KAEF,EAAQ,IAAI,UAAA,KAAe,EAAQ,IAAI,UAAA,MAC1C,KAAK,cAAA;CAEP;CAGA,gBAAA;EACC,IAAI,KAAK,UAER,OADA,KAAK,WAAW,YAAY,CAAC,CAAA,GAAA,CACtB;EAER,IAAM,IAAA,CAAW,KAAK,YAAY,KAAK,SACjC,IAAU,IAAU,KAAK;EAQ/B,OANA,KAAK,WAAW,YAAY,IAAU,CAAC,IAAI,EAAE,cAAA,CAAc,EAAA,GAAQ,IAAA,KAAU,IAAY,CAAA,GAErF,KAAK,gBAAA,MACR,KAAK,QAAA,CAAS,GACd,KAAK,oBAAoB,IAEnB;CACR;CAGA,gBAAA;EACC,OAAK,KAAK,QAAA,CAAQ,KAAK,YAAa,KAAK,UAClC,CAAC,CAAC,KAAK,MAAM,KAAK,KAAA,CAAA,IADgC,CAAA;CAE1D;CAEA,YAAA;EACC,KAAK,UAAU,KAAK,gBACpB,MAAM,UAAA;CACP;CAgBA,SAAA;EACC,OAAO,CAAI;;;;mBAIM,KAAK,UAAU,SAAS,QAAA;iBAC1B,KAAK,SAAS,EAAA;oBACX,KAAK,WAAW,SAAS,QAAA;gBAC7B,KAAK,SAAA;aACR,KAAK,OAAA;eACH,KAAK,UAAA;;;;;;;CAOnB;AAAA;AAAA,EAAA,CAtGC,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;AAAA,CAAA,CAAA,GAAM,EAAA,WAAA,SAAA,KAAA,CAAA,GAAA,EAAA,CAIxC,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;AAAA,CAAA,CAAA,GAAM,EAAA,WAAA,WAAA,KAAA,CAAA,GAAA,IAAA,EAAA,CApF1C,EAAc,iBAAA,CAAA,GAAiB,CAAA;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(`./SchmancyElement-D9WA9FP9.cjs`);require(`./mixins-XGVIOvKt.cjs`);let t=require(`lit/decorators.js`),n=require(`lit`);require(`@lit-labs/virtualizer`);var r=class extends e.t{constructor(...e){super(...e),this.columns=[],this.cols=this.columns.map(()=>`1fr`).join(` `)}renderCell(e){if(e.render)return n.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-CeKrBW2j.cjs`);require(`./mixins-Cjn20BQH.cjs`);let t=require(`lit/decorators.js`),n=require(`lit`);require(`@lit-labs/virtualizer`);var r=class extends e.t{constructor(...e){super(...e),this.columns=[],this.cols=this.columns.map(()=>`1fr`).join(` `)}renderCell(e){if(e.render)return n.html`
 				<div class="overflow-hidden text-ellipsis">
 					<schmancy-typography align="${e.align||`left`}" maxLines="2" weight="${e.weight||`normal`}">
 						${e.render(this.item)}
@@ -12,10 +12,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 			</div>
 		`}render(){return n.html`
 			<schmancy-list-item class="w-full">
-				<div
-					class="grid items-center gap-4"
-					style=${this.styleMap({gridTemplateColumns:this.cols})}
-				>
+				<div class="grid items-center gap-4" style=${this.styleMap({gridTemplateColumns:this.cols})}>
 					${this.columns.map(e=>this.renderCell(e))}
 				</div>
 			</schmancy-list-item>
@@ -24,11 +21,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 				${this.sortDirection===`asc`?n.html`<schmancy-icon class="text-base">arrow_upward</schmancy-icon>`:this.sortDirection===`desc`?n.html`<schmancy-icon class="text-base">arrow_downward</schmancy-icon>`:null}
 			</span>
 		`:null}render(){let e=e=>({"flex items-center":!0,"cursor-pointer gap-1":this.sortable&&!1!==e.sortable&&e.key});return n.html`
-			<div
-				class="grid h-full w-full"
-				style="grid-template-columns: 1fr; grid-template-rows: auto 1fr;"
-			>
-				<schmancy-surface rounded="top" elevation="1" type="glass" class="sticky top-0 z-10">
+			<div class="grid h-full w-full" style="grid-template-columns: 1fr; grid-template-rows: auto 1fr;">
+				<schmancy-surface type="container" class="rounded-t-2xl shadow-sm sticky top-0 z-10">
 					<div
 						class="grid items-center gap-4 px-4 py-3"
 						style=${this.styleMap({gridTemplateColumns:this.cols,gridTemplateRows:`1fr`})}

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 class=\"text-base\">arrow_upward</schmancy-icon>`\n\t\t\t\t\t: this.sortDirection === 'desc'\n\t\t\t\t\t\t? html`<schmancy-icon class=\"text-base\">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 class=\"grid items-center gap-4\" style=${this.styleMap({ gridTemplateColumns: this.cols })}>\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 class=\"text-base\">arrow_upward</schmancy-icon>`\n\t\t\t\t\t: this.sortDirection === 'desc'\n\t\t\t\t\t\t? html`<schmancy-icon class=\"text-base\">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 class=\"grid h-full w-full\" style=\"grid-template-columns: 1fr; grid-template-rows: auto 1fr;\">\n\t\t\t\t<schmancy-surface type=\"container\" class=\"rounded-t-2xl shadow-sm 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 { t as e, u as t } from "./SchmancyElement-OWgz9ePG.js";
-import "./mixins-COeG4DiX.js";
+import { t as e, u as t } from "./SchmancyElement-Ob9yGkiG.js";
+import "./mixins-q4KAL8Xr.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";
@@ -27,10 +27,7 @@ var o = class extends e {
 	render() {
 		return a`
 			<schmancy-list-item class="w-full">
-				<div
-					class="grid items-center gap-4"
-					style=${this.styleMap({ gridTemplateColumns: this.cols })}
-				>
+				<div class="grid items-center gap-4" style=${this.styleMap({ gridTemplateColumns: this.cols })}>
 					${this.columns.map((e) => this.renderCell(e))}
 				</div>
 			</schmancy-list-item>
@@ -100,11 +97,8 @@ var s = class extends e {
 			"cursor-pointer gap-1": this.sortable && !1 !== e.sortable && e.key
 		});
 		return a`
-			<div
-				class="grid h-full w-full"
-				style="grid-template-columns: 1fr; grid-template-rows: auto 1fr;"
-			>
-				<schmancy-surface rounded="top" elevation="1" type="glass" class="sticky top-0 z-10">
+			<div class="grid h-full w-full" style="grid-template-columns: 1fr; grid-template-rows: auto 1fr;">
+				<schmancy-surface type="container" class="rounded-t-2xl shadow-sm sticky top-0 z-10">
 					<div
 						class="grid items-center gap-4 px-4 py-3"
 						style=${this.styleMap({

package/dist/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","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 class=\"text-base\">arrow_upward</schmancy-icon>`\n\t\t\t\t\t: this.sortDirection === 'desc'\n\t\t\t\t\t\t? html`<schmancy-icon class=\"text-base\">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.js","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 class=\"grid items-center gap-4\" style=${this.styleMap({ gridTemplateColumns: this.cols })}>\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 class=\"text-base\">arrow_upward</schmancy-icon>`\n\t\t\t\t\t: this.sortDirection === 'desc'\n\t\t\t\t\t\t? html`<schmancy-icon class=\"text-base\">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 class=\"grid h-full w-full\" style=\"grid-template-columns: 1fr; grid-template-rows: auto 1fr;\">\n\t\t\t\t<schmancy-surface type=\"container\" class=\"rounded-t-2xl shadow-sm 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/{tabs-Ib0Mh__1.js → tabs-BYhFWnsx.js}

@@ -1,5 +1,5 @@
-import { t as e, u as t } from "./SchmancyElement-OWgz9ePG.js";
-import "./mixins-COeG4DiX.js";
+import { t as e, u as t } from "./SchmancyElement-Ob9yGkiG.js";
+import "./mixins-q4KAL8Xr.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";
@@ -34,11 +34,11 @@ var x = class extends e {
 	}
 	static {
 		this.styles = [g`
-	:host {
-		display: block;
-		height: 100%;
-	}
-`];
+			:host {
+				display: block;
+				height: 100%;
+			}
+		`];
 	}
 	connectedCallback() {
 		super.connectedCallback(), r(window, "scroll").pipe(s(1e3), n(() => this.mode === "scroll"), a(() => {