@mhmo91/schmancy 0.9.27 → 0.10.1

package/dist/steps.js.map

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

package/dist/surface-BHJgIDz9.js

@@ -0,0 +1,24 @@
+import { s as e, t } from "./mixins-CL1krSOE.js";
+import { t as n } from "./decorate-23nYs4Le.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 t(e) {
+	constructor(...e) {
+		super(...e), this.type = "subtle";
+	}
+	static {
+		this.styles = [s`
+		:host {
+			display: block;
+			box-sizing: border-box;
+			overflow: visible;
+		}
+	`];
+	}
+	render() {
+		return c`<slot></slot>`;
+	}
+};
+n([i({ context: l }), o({ reflect: !0 })], u.prototype, "type", void 0), u = n([a("schmancy-surface")], u);
+export { l as n, u as t };

package/dist/surface-BHJgIDz9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface-BHJgIDz9.js","names":[],"sources":["../src/surface/surface.ts"],"sourcesContent":["import { createContext, provide } from '@lit/context'\nimport { SchmancyElement } from '@mixins/index'\nimport { SurfaceMixin } from '@mixins/surface.mixin'\nimport { TSurfaceColor } from '@schmancy/types'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n\n// Re-export types for backwards compatibility\nexport type { SchmancySurfaceFill, SchmancySurfaceRounded, SchmancySurfaceElevation } from '@mixins/surface.mixin'\n\n/**\n * `<schmancy-surface>` component\n *\n * This component renders a styled container that adapts its dimensions based on the `fill` property.\n * It supports various rounding options, elevation levels, and applies background and text color classes\n * based on the specified surface variant. Additionally, when the `scroller` property is true, the component\n * enables internal scrolling by applying overflow and scroll-behavior styles.\n *\n * SurfaceMixin automatically provides surfaceStyles CSS.\n *\n * @element schmancy-surface\n * @slot - Default slot for projecting child content.\n *\n * @example\n * <schmancy-surface fill=\"all\" rounded=\"all\" elevation=\"3\" type=\"surfaceBright\" scroller>\n *   <p>Your scrollable content here</p>\n * </schmancy-surface>\n */\n@customElement('schmancy-surface')\nexport class SchmancySurface extends SurfaceMixin(SchmancyElement) {\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t\tbox-sizing: border-box;\n\t\t\toverflow: visible;\n\t\t}\n\t`];\n\t/**\n\t * Specifies the surface type for styling.\n\t * Provided to descendant components via context.\n\t * @default 'container'\n\t */\n\t@provide({ context: SchmancySurfaceTypeContext })\n\t@property({ reflect: true })\n\toverride type: TSurfaceColor = 'subtle'\n\n\tprotected render(): unknown {\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-surface': SchmancySurface\n\t}\n}\n"],"mappings":";;;;;AAOA,IAAa,IAA6B,EAA6B,UAAA,EAwBhE,IAAA,cAA8B,EAAa,EAAA,CAAA;CAAA,YAAA,GAAA,GAAA;AAAA,QAAA,GAAA,EAAA,EAAA,KAAA,OAelB;;CAAA;AAAA,OAAA,SAdf,CAAC,CAAG;;;;;;;;CAgBpB,SAAA;AACC,SAAO,CAAI;;;AAAA,EAAA,CALX,EAAQ,EAAE,SAAS,GAAA,CAAA,EACnB,EAAS,EAAE,SAAA,CAAS,GAAA,CAAA,CAAA,EAAO,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAf5B,EAAc,mBAAA,CAAA,EAAmB,EAAA;AAAA,SAAA,KAAA,GAAA,KAAA"}

package/dist/surface-DW78bc8W.cjs

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

@@ -0,0 +1 @@
+{"version":3,"file":"surface-DW78bc8W.cjs","names":[],"sources":["../src/surface/surface.ts"],"sourcesContent":["import { createContext, provide } from '@lit/context'\nimport { SchmancyElement } from '@mixins/index'\nimport { SurfaceMixin } from '@mixins/surface.mixin'\nimport { TSurfaceColor } from '@schmancy/types'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n\n// Re-export types for backwards compatibility\nexport type { SchmancySurfaceFill, SchmancySurfaceRounded, SchmancySurfaceElevation } from '@mixins/surface.mixin'\n\n/**\n * `<schmancy-surface>` component\n *\n * This component renders a styled container that adapts its dimensions based on the `fill` property.\n * It supports various rounding options, elevation levels, and applies background and text color classes\n * based on the specified surface variant. Additionally, when the `scroller` property is true, the component\n * enables internal scrolling by applying overflow and scroll-behavior styles.\n *\n * SurfaceMixin automatically provides surfaceStyles CSS.\n *\n * @element schmancy-surface\n * @slot - Default slot for projecting child content.\n *\n * @example\n * <schmancy-surface fill=\"all\" rounded=\"all\" elevation=\"3\" type=\"surfaceBright\" scroller>\n *   <p>Your scrollable content here</p>\n * </schmancy-surface>\n */\n@customElement('schmancy-surface')\nexport class SchmancySurface extends SurfaceMixin(SchmancyElement) {\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t\tbox-sizing: border-box;\n\t\t\toverflow: visible;\n\t\t}\n\t`];\n\t/**\n\t * Specifies the surface type for styling.\n\t * Provided to descendant components via context.\n\t * @default 'container'\n\t */\n\t@provide({ context: SchmancySurfaceTypeContext })\n\t@property({ reflect: true })\n\toverride type: TSurfaceColor = 'subtle'\n\n\tprotected render(): unknown {\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-surface': SchmancySurface\n\t}\n}\n"],"mappings":"4LAOA,IAAa,GAAA,EAAA,EAAA,eAA0D,UAAA,CAwBhE,EAAA,cAA8B,EAAA,EAAa,EAAA,EAAA,AAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,EAAA,CAAA,KAAA,KAelB,SAAA,OAAA,KAAA,OAdf,CAAC,EAAA,GAAG;;;;;;IAgBpB,QAAA,CACC,MAAO,GAAA,IAAI,kBAAA,EAAA,EAAA,EAAA,EAAA,EAAA,SALH,CAAE,QAAS,EAAA,CAAA,EAA6B,EAAA,EAAA,UACvC,CAAE,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eAfd,mBAAA,CAAA,CAAmB,EAAA,CAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA,CAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}

package/dist/surface.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./surface-D-GWBcsh.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-DW78bc8W.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-D23JtxYP.js";
+import { n as e, t } from "./surface-BHJgIDz9.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(`./tailwind.mixin-DRI1oTYQ.cjs`),t=require(`./decorate-F9CuyeHg.cjs`);require(`./mixins.cjs`);let n=require(`lit/decorators.js`),r=require(`lit`);var i=class extends e.t(r.css`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-BIXF7xkF.cjs`),t=require(`./decorate-DpFmy0nm.cjs`);let n=require(`lit/decorators.js`),r=require(`lit`);var i=class extends e.s{static{this.styles=[r.css`
 	:host {
 		display: inline-block;
 	}
@@ -51,7 +51,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 	@media (prefers-reduced-motion: reduce) {
 		.track, .thumb { transition: none; }
 	}
-`){static{this.formAssociated=!0}static{this.shadowRootOptions={...r.LitElement.shadowRootOptions,delegatesFocus:!0}}constructor(){super(),this.checked=!1,this.disabled=!1,this.required=!1,this.name=``,this.value=`on`,this.label=``,this._toggle=()=>{this.disabled||(this.checked=!this.checked,this.dispatchEvent(new CustomEvent(`change`,{detail:{value:this.checked},bubbles:!0,composed:!0})))},this._onKeydown=e=>{e.key!==` `&&e.key!==`Enter`||(e.preventDefault(),this._toggle())};try{this.internals=this.attachInternals()}catch{this.internals=void 0}}get form(){return this.internals?.form??null}updated(e){super.updated?.(e),(e.has(`checked`)||e.has(`value`)||e.has(`name`))&&(this.internals?.setFormValue(this.checked?this.value:null),this.checked?this.internals?.states.add(`checked`):this.internals?.states.delete(`checked`)),(e.has(`required`)||e.has(`checked`))&&(this.required&&!this.checked?this.internals?.setValidity({valueMissing:!0},`This switch is required.`):this.internals?.setValidity({}))}formResetCallback(){this.checked=this.hasAttribute(`checked`)}formDisabledCallback(e){this.disabled=e}checkValidity(){return this.internals?.checkValidity()??!0}reportValidity(){return this.internals?.reportValidity()??!0}render(){return r.html`
+`]}static{this.formAssociated=!0}static{this.shadowRootOptions={...r.LitElement.shadowRootOptions,delegatesFocus:!0}}constructor(){super(),this.checked=!1,this.disabled=!1,this.required=!1,this.name=``,this.value=`on`,this.label=``,this._toggle=()=>{this.disabled||(this.checked=!this.checked,this.dispatchEvent(new CustomEvent(`change`,{detail:{value:this.checked},bubbles:!0,composed:!0})))},this._onKeydown=e=>{e.key!==` `&&e.key!==`Enter`||(e.preventDefault(),this._toggle())};try{this.internals=this.attachInternals()}catch{this.internals=void 0}}get form(){return this.internals?.form??null}updated(e){super.updated?.(e),(e.has(`checked`)||e.has(`value`)||e.has(`name`))&&(this.internals?.setFormValue(this.checked?this.value:null),this.checked?this.internals?.states.add(`checked`):this.internals?.states.delete(`checked`)),(e.has(`required`)||e.has(`checked`))&&(this.required&&!this.checked?this.internals?.setValidity({valueMissing:!0},`This switch is required.`):this.internals?.setValidity({}))}formResetCallback(){this.checked=this.hasAttribute(`checked`)}formDisabledCallback(e){this.disabled=e}checkValidity(){return this.internals?.checkValidity()??!0}reportValidity(){return this.internals?.reportValidity()??!0}render(){return r.html`
 			<button
 				type="button"
 				role="switch"

package/dist/switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.cjs","names":[],"sources":["../src/switch/switch.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport type SchmancySwitchChangeEvent = CustomEvent<{ value: boolean }>\n\n/**\n * Binary on/off control with immediate effect. Form-associated, keyboard-accessible, semantically a switch (ARIA role=\"switch\"). Distinct from `schmancy-checkbox`: a switch represents an immediate state change, a checkbox represents a selection in a form to be submitted.\n *\n * @element schmancy-switch\n * @summary Use when flipping the control takes effect right away (e.g. \"Dark mode\", \"Enable notifications\"). Prefer schmancy-checkbox for form submissions.\n * @example\n * <schmancy-switch ?checked=${this.darkMode} @change=${(e) => this.darkMode = e.detail.value}>\n *   Dark mode\n * </schmancy-switch>\n * @platform switch change - Accessible native `<button role=\"switch\" aria-checked>` under the hood. No native HTML element exists; falls back to a styled checkbox if the tag never registers.\n * @fires change - `CustomEvent<{ value: boolean }>` when the state changes.\n * @attr checked - Initial checked state (also reflected via `value`).\n * @attr disabled - Disables interaction.\n * @attr required - Requires the switch to be on for form validity.\n * @attr name - Form field name for submission.\n * @csspart track - The background track.\n * @csspart thumb - The moving thumb.\n */\n@customElement('schmancy-switch')\nexport class SchmancySwitch extends TailwindElement(css`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\t:host([disabled]) {\n\t\topacity: 0.38;\n\t\tpointer-events: none;\n\t}\n\tbutton {\n\t\tappearance: none;\n\t\tbackground: none;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tcursor: pointer;\n\t\tfont: inherit;\n\t}\n\t.track {\n\t\twidth: 2.25rem;\n\t\theight: 1.25rem;\n\t\tborder-radius: 999px;\n\t\tbackground: var(--schmancy-sys-color-surface-containerHighest, #e0e0e0);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline, #79747e);\n\t\tposition: relative;\n\t\ttransition: background 150ms ease, border-color 150ms ease;\n\t}\n\t:host(:state(checked)) .track {\n\t\tbackground: var(--schmancy-sys-color-primary-default, #6750a4);\n\t\tborder-color: var(--schmancy-sys-color-primary-default, #6750a4);\n\t}\n\t.thumb {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 0.125rem;\n\t\twidth: 0.75rem;\n\t\theight: 0.75rem;\n\t\tborder-radius: 999px;\n\t\tbackground: var(--schmancy-sys-color-outline, #79747e);\n\t\ttransform: translateY(-50%);\n\t\ttransition: transform 150ms ease, background 150ms ease, width 150ms ease, height 150ms ease;\n\t}\n\t:host(:state(checked)) .thumb {\n\t\ttransform: translate(1rem, -50%);\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t\tbackground: var(--schmancy-sys-color-primary-on, #ffffff);\n\t}\n\tbutton:focus-visible .track {\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default, #6750a4);\n\t\toutline-offset: 2px;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.track, .thumb { transition: none; }\n\t}\n`) {\n\tstatic formAssociated = true\n\tprivate internals: ElementInternals | undefined\n\n\t@property({ type: Boolean, reflect: true }) checked = false\n\t@property({ type: Boolean, reflect: true }) disabled = false\n\t@property({ type: Boolean, reflect: true }) required = false\n\t@property({ type: String }) name = ''\n\t@property({ type: String }) value = 'on'\n\t@property({ type: String }) label = ''\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t}\n\n\tget form(): HTMLFormElement | null {\n\t\treturn this.internals?.form ?? null\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('checked') || changed.has('value') || changed.has('name')) {\n\t\t\tthis.internals?.setFormValue(this.checked ? this.value : null)\n\t\t\tif (this.checked) this.internals?.states.add('checked')\n\t\t\telse this.internals?.states.delete('checked')\n\t\t}\n\t\tif (changed.has('required') || changed.has('checked')) {\n\t\t\tif (this.required && !this.checked) {\n\t\t\t\tthis.internals?.setValidity({ valueMissing: true }, 'This switch is required.')\n\t\t\t} else {\n\t\t\t\tthis.internals?.setValidity({})\n\t\t\t}\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this.hasAttribute('checked')\n\t}\n\n\tformDisabledCallback(disabled: boolean) {\n\t\tthis.disabled = disabled\n\t}\n\n\tpublic checkValidity(): boolean {\n\t\treturn this.internals?.checkValidity() ?? true\n\t}\n\n\tpublic reportValidity(): boolean {\n\t\treturn this.internals?.reportValidity() ?? true\n\t}\n\n\tprivate _toggle = () => {\n\t\tif (this.disabled) return\n\t\tthis.checked = !this.checked\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('change', {\n\t\t\t\tdetail: { value: this.checked },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\tprivate _onKeydown = (e: KeyboardEvent) => {\n\t\tif (e.key === ' ' || e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tthis._toggle()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"switch\"\n\t\t\t\taria-checked=${this.checked ? 'true' : 'false'}\n\t\t\t\taria-label=${this.label || nothing}\n\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t@click=${this._toggle}\n\t\t\t\t@keydown=${this._onKeydown}\n\t\t\t>\n\t\t\t\t<span part=\"track\" class=\"track\">\n\t\t\t\t\t<span part=\"thumb\" class=\"thumb\"></span>\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-switch': SchmancySwitch\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"switch.cjs","names":[],"sources":["../src/switch/switch.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport type SchmancySwitchChangeEvent = CustomEvent<{ value: boolean }>\n\n/**\n * Binary on/off control. Form-associated, keyboard-accessible, semantically a\n * switch (ARIA role=\"switch\"). Distinct from `schmancy-checkbox`: a switch\n * represents an immediate state change, a checkbox represents a selection in\n * a form to be submitted.\n *\n * @element schmancy-switch\n * @fires change - `CustomEvent<{ value: boolean }>` when the state changes.\n * @attr checked - Initial checked state (also reflected via `value`).\n * @attr disabled - Disables interaction.\n * @attr required - Requires the switch to be on for form validity.\n * @attr name - Form field name for submission.\n * @csspart track - The background track.\n * @csspart thumb - The moving thumb.\n */\n@customElement('schmancy-switch')\nexport class SchmancySwitch extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\t:host([disabled]) {\n\t\topacity: 0.38;\n\t\tpointer-events: none;\n\t}\n\tbutton {\n\t\tappearance: none;\n\t\tbackground: none;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tcursor: pointer;\n\t\tfont: inherit;\n\t}\n\t.track {\n\t\twidth: 2.25rem;\n\t\theight: 1.25rem;\n\t\tborder-radius: 999px;\n\t\tbackground: var(--schmancy-sys-color-surface-containerHighest, #e0e0e0);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline, #79747e);\n\t\tposition: relative;\n\t\ttransition: background 150ms ease, border-color 150ms ease;\n\t}\n\t:host(:state(checked)) .track {\n\t\tbackground: var(--schmancy-sys-color-primary-default, #6750a4);\n\t\tborder-color: var(--schmancy-sys-color-primary-default, #6750a4);\n\t}\n\t.thumb {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 0.125rem;\n\t\twidth: 0.75rem;\n\t\theight: 0.75rem;\n\t\tborder-radius: 999px;\n\t\tbackground: var(--schmancy-sys-color-outline, #79747e);\n\t\ttransform: translateY(-50%);\n\t\ttransition: transform 150ms ease, background 150ms ease, width 150ms ease, height 150ms ease;\n\t}\n\t:host(:state(checked)) .thumb {\n\t\ttransform: translate(1rem, -50%);\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t\tbackground: var(--schmancy-sys-color-primary-on, #ffffff);\n\t}\n\tbutton:focus-visible .track {\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default, #6750a4);\n\t\toutline-offset: 2px;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.track, .thumb { transition: none; }\n\t}\n`];\n\tstatic formAssociated = true\n\tprivate internals: ElementInternals | undefined\n\n\t@property({ type: Boolean, reflect: true }) checked = false\n\t@property({ type: Boolean, reflect: true }) disabled = false\n\t@property({ type: Boolean, reflect: true }) required = false\n\t@property({ type: String }) name = ''\n\t@property({ type: String }) value = 'on'\n\t@property({ type: String }) label = ''\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t}\n\n\tget form(): HTMLFormElement | null {\n\t\treturn this.internals?.form ?? null\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('checked') || changed.has('value') || changed.has('name')) {\n\t\t\tthis.internals?.setFormValue(this.checked ? this.value : null)\n\t\t\tif (this.checked) this.internals?.states.add('checked')\n\t\t\telse this.internals?.states.delete('checked')\n\t\t}\n\t\tif (changed.has('required') || changed.has('checked')) {\n\t\t\tif (this.required && !this.checked) {\n\t\t\t\tthis.internals?.setValidity({ valueMissing: true }, 'This switch is required.')\n\t\t\t} else {\n\t\t\t\tthis.internals?.setValidity({})\n\t\t\t}\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this.hasAttribute('checked')\n\t}\n\n\tformDisabledCallback(disabled: boolean) {\n\t\tthis.disabled = disabled\n\t}\n\n\tpublic checkValidity(): boolean {\n\t\treturn this.internals?.checkValidity() ?? true\n\t}\n\n\tpublic reportValidity(): boolean {\n\t\treturn this.internals?.reportValidity() ?? true\n\t}\n\n\tprivate _toggle = () => {\n\t\tif (this.disabled) return\n\t\tthis.checked = !this.checked\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('change', {\n\t\t\t\tdetail: { value: this.checked },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\tprivate _onKeydown = (e: KeyboardEvent) => {\n\t\tif (e.key === ' ' || e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tthis._toggle()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"switch\"\n\t\t\t\taria-checked=${this.checked ? 'true' : 'false'}\n\t\t\t\taria-label=${this.label || nothing}\n\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t@click=${this._toggle}\n\t\t\t\t@keydown=${this._onKeydown}\n\t\t\t>\n\t\t\t\t<span part=\"track\" class=\"track\">\n\t\t\t\t\t<span part=\"thumb\" class=\"thumb\"></span>\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-switch': SchmancySwitch\n\t}\n}\n"],"mappings":"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"}

package/dist/switch.js

@@ -1,9 +1,10 @@
-import { t as e } from "./tailwind.mixin-mdQR3BEO.js";
-import { t } from "./decorate-D_utPUsC.js";
-import "./mixins.js";
+import { s as e } from "./mixins-CL1krSOE.js";
+import { t } from "./decorate-23nYs4Le.js";
 import { customElement as n, property as r } from "lit/decorators.js";
 import { LitElement as i, css as a, html as o, nothing as s } from "lit";
-var c = class extends e(a`
+var c = class extends e {
+	static {
+		this.styles = [a`
 	:host {
 		display: inline-block;
 	}
@@ -56,7 +57,8 @@ var c = class extends e(a`
 	@media (prefers-reduced-motion: reduce) {
 		.track, .thumb { transition: none; }
 	}
-`) {
+`];
+	}
 	static {
 		this.formAssociated = !0;
 	}

package/dist/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../src/switch/switch.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport type SchmancySwitchChangeEvent = CustomEvent<{ value: boolean }>\n\n/**\n * Binary on/off control with immediate effect. Form-associated, keyboard-accessible, semantically a switch (ARIA role=\"switch\"). Distinct from `schmancy-checkbox`: a switch represents an immediate state change, a checkbox represents a selection in a form to be submitted.\n *\n * @element schmancy-switch\n * @summary Use when flipping the control takes effect right away (e.g. \"Dark mode\", \"Enable notifications\"). Prefer schmancy-checkbox for form submissions.\n * @example\n * <schmancy-switch ?checked=${this.darkMode} @change=${(e) => this.darkMode = e.detail.value}>\n *   Dark mode\n * </schmancy-switch>\n * @platform switch change - Accessible native `<button role=\"switch\" aria-checked>` under the hood. No native HTML element exists; falls back to a styled checkbox if the tag never registers.\n * @fires change - `CustomEvent<{ value: boolean }>` when the state changes.\n * @attr checked - Initial checked state (also reflected via `value`).\n * @attr disabled - Disables interaction.\n * @attr required - Requires the switch to be on for form validity.\n * @attr name - Form field name for submission.\n * @csspart track - The background track.\n * @csspart thumb - The moving thumb.\n */\n@customElement('schmancy-switch')\nexport class SchmancySwitch extends TailwindElement(css`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\t:host([disabled]) {\n\t\topacity: 0.38;\n\t\tpointer-events: none;\n\t}\n\tbutton {\n\t\tappearance: none;\n\t\tbackground: none;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tcursor: pointer;\n\t\tfont: inherit;\n\t}\n\t.track {\n\t\twidth: 2.25rem;\n\t\theight: 1.25rem;\n\t\tborder-radius: 999px;\n\t\tbackground: var(--schmancy-sys-color-surface-containerHighest, #e0e0e0);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline, #79747e);\n\t\tposition: relative;\n\t\ttransition: background 150ms ease, border-color 150ms ease;\n\t}\n\t:host(:state(checked)) .track {\n\t\tbackground: var(--schmancy-sys-color-primary-default, #6750a4);\n\t\tborder-color: var(--schmancy-sys-color-primary-default, #6750a4);\n\t}\n\t.thumb {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 0.125rem;\n\t\twidth: 0.75rem;\n\t\theight: 0.75rem;\n\t\tborder-radius: 999px;\n\t\tbackground: var(--schmancy-sys-color-outline, #79747e);\n\t\ttransform: translateY(-50%);\n\t\ttransition: transform 150ms ease, background 150ms ease, width 150ms ease, height 150ms ease;\n\t}\n\t:host(:state(checked)) .thumb {\n\t\ttransform: translate(1rem, -50%);\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t\tbackground: var(--schmancy-sys-color-primary-on, #ffffff);\n\t}\n\tbutton:focus-visible .track {\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default, #6750a4);\n\t\toutline-offset: 2px;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.track, .thumb { transition: none; }\n\t}\n`) {\n\tstatic formAssociated = true\n\tprivate internals: ElementInternals | undefined\n\n\t@property({ type: Boolean, reflect: true }) checked = false\n\t@property({ type: Boolean, reflect: true }) disabled = false\n\t@property({ type: Boolean, reflect: true }) required = false\n\t@property({ type: String }) name = ''\n\t@property({ type: String }) value = 'on'\n\t@property({ type: String }) label = ''\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t}\n\n\tget form(): HTMLFormElement | null {\n\t\treturn this.internals?.form ?? null\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('checked') || changed.has('value') || changed.has('name')) {\n\t\t\tthis.internals?.setFormValue(this.checked ? this.value : null)\n\t\t\tif (this.checked) this.internals?.states.add('checked')\n\t\t\telse this.internals?.states.delete('checked')\n\t\t}\n\t\tif (changed.has('required') || changed.has('checked')) {\n\t\t\tif (this.required && !this.checked) {\n\t\t\t\tthis.internals?.setValidity({ valueMissing: true }, 'This switch is required.')\n\t\t\t} else {\n\t\t\t\tthis.internals?.setValidity({})\n\t\t\t}\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this.hasAttribute('checked')\n\t}\n\n\tformDisabledCallback(disabled: boolean) {\n\t\tthis.disabled = disabled\n\t}\n\n\tpublic checkValidity(): boolean {\n\t\treturn this.internals?.checkValidity() ?? true\n\t}\n\n\tpublic reportValidity(): boolean {\n\t\treturn this.internals?.reportValidity() ?? true\n\t}\n\n\tprivate _toggle = () => {\n\t\tif (this.disabled) return\n\t\tthis.checked = !this.checked\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('change', {\n\t\t\t\tdetail: { value: this.checked },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\tprivate _onKeydown = (e: KeyboardEvent) => {\n\t\tif (e.key === ' ' || e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tthis._toggle()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"switch\"\n\t\t\t\taria-checked=${this.checked ? 'true' : 'false'}\n\t\t\t\taria-label=${this.label || nothing}\n\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t@click=${this._toggle}\n\t\t\t\t@keydown=${this._onKeydown}\n\t\t\t>\n\t\t\t\t<span part=\"track\" class=\"track\">\n\t\t\t\t\t<span part=\"thumb\" class=\"thumb\"></span>\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-switch': SchmancySwitch\n\t}\n}\n"],"mappings":";;;;;AAyBO,IAAA,IAAA,cAA6B,EAAgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAsD9B;;CAAA;AAAA,OAAA,oBAUa;GAAA,GACjC,EAAW;GACd,gBAAA,CAAgB;GAAA;;CAGjB,cAAA;AACC,SAAA,EAAA,KAAA,UAAA,CAbqD,GAAA,KAAA,WAAA,CACC,GAAA,KAAA,WAAA,CACA,GAAA,KAAA,OACpB,IAAA,KAAA,QACC,MAAA,KAAA,QACA,IAAA,KAAA,gBAAA;AAqD/B,QAAK,aACT,KAAK,UAAA,CAAW,KAAK,SACrB,KAAK,cACJ,IAAI,YAAY,UAAU;IACzB,QAAQ,EAAE,OAAO,KAAK,SAAA;IACtB,SAAA,CAAS;IACT,UAAA,CAAU;IAAA,CAAA,CAAA;KAAA,KAAA,cAKS,MAAA;AACP,GAAV,EAAE,QAAQ,OAAO,EAAE,QAAQ,YAC9B,EAAE,gBAAA,EACF,KAAK,SAAA;;AA1DN,MAAA;AACC,QAAK,YAAY,KAAK,iBAAA;UAAA;AAEtB,QAAK,YAAA,KAAY;;;CAInB,IAAA,OAAI;AACH,SAAO,KAAK,WAAW,QAAQ;;CAGhC,QAAkB,GAAA;AACjB,QAAM,UAAU,EAAA,GACZ,EAAQ,IAAI,UAAA,IAAc,EAAQ,IAAI,QAAA,IAAY,EAAQ,IAAI,OAAA,MACjE,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,KAAA,EACrD,KAAK,UAAS,KAAK,WAAW,OAAO,IAAI,UAAA,GACxC,KAAK,WAAW,OAAO,OAAO,UAAA,IAEhC,EAAQ,IAAI,WAAA,IAAe,EAAQ,IAAI,UAAA,MACtC,KAAK,YAAA,CAAa,KAAK,UAC1B,KAAK,WAAW,YAAY,EAAE,cAAA,CAAc,GAAA,EAAQ,2BAAA,GAEpD,KAAK,WAAW,YAAY,EAAA,CAAA;;CAK/B,oBAAA;AACC,OAAK,UAAU,KAAK,aAAa,UAAA;;CAGlC,qBAAqB,GAAA;AACpB,OAAK,WAAW;;CAGjB,gBAAA;AACC,SAAO,KAAK,WAAW,eAAA,IAAA,CAAmB;;CAG3C,iBAAA;AACC,SAAO,KAAK,WAAW,gBAAA,IAAA,CAAoB;;CAsB5C,SAAA;AACC,SAAO,CAAI;;;;mBAIM,KAAK,UAAU,SAAS,QAAA;iBAC1B,KAAK,SAAS,EAAA;oBACX,KAAK,WAAW,SAAS,QAAA;gBAC7B,KAAK,SAAA;aACR,KAAK,QAAA;eACH,KAAK,WAAA;;;;;;;;;GAtFlB,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,EAAA,CAC1C,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,YAAA,KAAA,EAAA,EAAA,EAAA,CAC1C,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,YAAA,KAAA,EAAA,EAAA,EAAA,CAC1C,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAC1B,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,SAAA,KAAA,EAAA,EAAA,EAAA,CAC1B,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,SAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CA/D3B,EAAc,kBAAA,CAAA,EAAkB,EAAA;AAAA,SAAA,KAAA"}
+{"version":3,"file":"switch.js","names":[],"sources":["../src/switch/switch.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport type SchmancySwitchChangeEvent = CustomEvent<{ value: boolean }>\n\n/**\n * Binary on/off control. Form-associated, keyboard-accessible, semantically a\n * switch (ARIA role=\"switch\"). Distinct from `schmancy-checkbox`: a switch\n * represents an immediate state change, a checkbox represents a selection in\n * a form to be submitted.\n *\n * @element schmancy-switch\n * @fires change - `CustomEvent<{ value: boolean }>` when the state changes.\n * @attr checked - Initial checked state (also reflected via `value`).\n * @attr disabled - Disables interaction.\n * @attr required - Requires the switch to be on for form validity.\n * @attr name - Form field name for submission.\n * @csspart track - The background track.\n * @csspart thumb - The moving thumb.\n */\n@customElement('schmancy-switch')\nexport class SchmancySwitch extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\t:host([disabled]) {\n\t\topacity: 0.38;\n\t\tpointer-events: none;\n\t}\n\tbutton {\n\t\tappearance: none;\n\t\tbackground: none;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tcursor: pointer;\n\t\tfont: inherit;\n\t}\n\t.track {\n\t\twidth: 2.25rem;\n\t\theight: 1.25rem;\n\t\tborder-radius: 999px;\n\t\tbackground: var(--schmancy-sys-color-surface-containerHighest, #e0e0e0);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline, #79747e);\n\t\tposition: relative;\n\t\ttransition: background 150ms ease, border-color 150ms ease;\n\t}\n\t:host(:state(checked)) .track {\n\t\tbackground: var(--schmancy-sys-color-primary-default, #6750a4);\n\t\tborder-color: var(--schmancy-sys-color-primary-default, #6750a4);\n\t}\n\t.thumb {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 0.125rem;\n\t\twidth: 0.75rem;\n\t\theight: 0.75rem;\n\t\tborder-radius: 999px;\n\t\tbackground: var(--schmancy-sys-color-outline, #79747e);\n\t\ttransform: translateY(-50%);\n\t\ttransition: transform 150ms ease, background 150ms ease, width 150ms ease, height 150ms ease;\n\t}\n\t:host(:state(checked)) .thumb {\n\t\ttransform: translate(1rem, -50%);\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t\tbackground: var(--schmancy-sys-color-primary-on, #ffffff);\n\t}\n\tbutton:focus-visible .track {\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default, #6750a4);\n\t\toutline-offset: 2px;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.track, .thumb { transition: none; }\n\t}\n`];\n\tstatic formAssociated = true\n\tprivate internals: ElementInternals | undefined\n\n\t@property({ type: Boolean, reflect: true }) checked = false\n\t@property({ type: Boolean, reflect: true }) disabled = false\n\t@property({ type: Boolean, reflect: true }) required = false\n\t@property({ type: String }) name = ''\n\t@property({ type: String }) value = 'on'\n\t@property({ type: String }) label = ''\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t}\n\n\tget form(): HTMLFormElement | null {\n\t\treturn this.internals?.form ?? null\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('checked') || changed.has('value') || changed.has('name')) {\n\t\t\tthis.internals?.setFormValue(this.checked ? this.value : null)\n\t\t\tif (this.checked) this.internals?.states.add('checked')\n\t\t\telse this.internals?.states.delete('checked')\n\t\t}\n\t\tif (changed.has('required') || changed.has('checked')) {\n\t\t\tif (this.required && !this.checked) {\n\t\t\t\tthis.internals?.setValidity({ valueMissing: true }, 'This switch is required.')\n\t\t\t} else {\n\t\t\t\tthis.internals?.setValidity({})\n\t\t\t}\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this.hasAttribute('checked')\n\t}\n\n\tformDisabledCallback(disabled: boolean) {\n\t\tthis.disabled = disabled\n\t}\n\n\tpublic checkValidity(): boolean {\n\t\treturn this.internals?.checkValidity() ?? true\n\t}\n\n\tpublic reportValidity(): boolean {\n\t\treturn this.internals?.reportValidity() ?? true\n\t}\n\n\tprivate _toggle = () => {\n\t\tif (this.disabled) return\n\t\tthis.checked = !this.checked\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('change', {\n\t\t\t\tdetail: { value: this.checked },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\tprivate _onKeydown = (e: KeyboardEvent) => {\n\t\tif (e.key === ' ' || e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tthis._toggle()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"switch\"\n\t\t\t\taria-checked=${this.checked ? 'true' : 'false'}\n\t\t\t\taria-label=${this.label || nothing}\n\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t@click=${this._toggle}\n\t\t\t\t@keydown=${this._onKeydown}\n\t\t\t>\n\t\t\t\t<span part=\"track\" class=\"track\">\n\t\t\t\t\t<span part=\"thumb\" class=\"thumb\"></span>\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-switch': SchmancySwitch\n\t}\n}\n"],"mappings":";;;;AAsBO,IAAA,IAAA,cAA6B,EAAA;CAAA;AAAA,OAAA,SACnB,CAAC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAsDI;;CAAA;AAAA,OAAA,oBAUa;GAAA,GACjC,EAAW;GACd,gBAAA,CAAgB;GAAA;;CAGjB,cAAA;AACC,SAAA,EAAA,KAAA,UAAA,CAbqD,GAAA,KAAA,WAAA,CACC,GAAA,KAAA,WAAA,CACA,GAAA,KAAA,OACpB,IAAA,KAAA,QACC,MAAA,KAAA,QACA,IAAA,KAAA,gBAAA;AAqD/B,QAAK,aACT,KAAK,UAAA,CAAW,KAAK,SACrB,KAAK,cACJ,IAAI,YAAY,UAAU;IACzB,QAAQ,EAAE,OAAO,KAAK,SAAA;IACtB,SAAA,CAAS;IACT,UAAA,CAAU;IAAA,CAAA,CAAA;KAAA,KAAA,cAKS,MAAA;AACP,GAAV,EAAE,QAAQ,OAAO,EAAE,QAAQ,YAC9B,EAAE,gBAAA,EACF,KAAK,SAAA;;AA1DN,MAAA;AACC,QAAK,YAAY,KAAK,iBAAA;UAAA;AAEtB,QAAK,YAAA,KAAY;;;CAInB,IAAA,OAAI;AACH,SAAO,KAAK,WAAW,QAAQ;;CAGhC,QAAkB,GAAA;AACjB,QAAM,UAAU,EAAA,GACZ,EAAQ,IAAI,UAAA,IAAc,EAAQ,IAAI,QAAA,IAAY,EAAQ,IAAI,OAAA,MACjE,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,KAAA,EACrD,KAAK,UAAS,KAAK,WAAW,OAAO,IAAI,UAAA,GACxC,KAAK,WAAW,OAAO,OAAO,UAAA,IAEhC,EAAQ,IAAI,WAAA,IAAe,EAAQ,IAAI,UAAA,MACtC,KAAK,YAAA,CAAa,KAAK,UAC1B,KAAK,WAAW,YAAY,EAAE,cAAA,CAAc,GAAA,EAAQ,2BAAA,GAEpD,KAAK,WAAW,YAAY,EAAA,CAAA;;CAK/B,oBAAA;AACC,OAAK,UAAU,KAAK,aAAa,UAAA;;CAGlC,qBAAqB,GAAA;AACpB,OAAK,WAAW;;CAGjB,gBAAA;AACC,SAAO,KAAK,WAAW,eAAA,IAAA,CAAmB;;CAG3C,iBAAA;AACC,SAAO,KAAK,WAAW,gBAAA,IAAA,CAAoB;;CAsB5C,SAAA;AACC,SAAO,CAAI;;;;mBAIM,KAAK,UAAU,SAAS,QAAA;iBAC1B,KAAK,SAAS,EAAA;oBACX,KAAK,WAAW,SAAS,QAAA;gBAC7B,KAAK,SAAA;aACR,KAAK,QAAA;eACH,KAAK,WAAA;;;;;;;;;GAtFlB,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,EAAA,CAC1C,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,YAAA,KAAA,EAAA,EAAA,EAAA,CAC1C,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,YAAA,KAAA,EAAA,EAAA,EAAA,CAC1C,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAC1B,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,SAAA,KAAA,EAAA,EAAA,EAAA,CAC1B,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,SAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAhE3B,EAAc,kBAAA,CAAA,EAAkB,EAAA;AAAA,SAAA,KAAA"}

package/dist/table.cjs

@@ -1 +1,72 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./table-C7b73kdg.cjs`);Object.defineProperty(exports,`SchmancyDataTable`,{enumerable:!0,get:function(){return e.t}}),Object.defineProperty(exports,`SchmancyTableRow`,{enumerable:!0,get:function(){return e.n}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-BIXF7xkF.cjs`),t=require(`./decorate-DpFmy0nm.cjs`);let n=require(`lit/decorators.js`),r=require(`lit`);require(`@lit-labs/virtualizer`);var i=class extends e.s{constructor(...e){super(...e),this.columns=[],this.cols=this.columns.map(()=>`1fr`).join(` `)}renderCell(e){if(e.render)return r.html`
+				<div class="overflow-hidden text-ellipsis">
+					<schmancy-typography align="${e.align||`left`}" maxLines="2" weight="${e.weight||`normal`}">
+						${e.render(this.item)}
+					</schmancy-typography>
+				</div>
+			`;let t=e.key?this.item[e.key]:``;return r.html`
+			<div class="overflow-hidden text-ellipsis">
+				<schmancy-typography align="${e.align||`left`}" maxLines="2" weight="${e.weight||`normal`}">
+					${t}
+				</schmancy-typography>
+			</div>
+		`}render(){return r.html`
+			<schmancy-list-item class="w-full">
+				<div
+					class="grid items-center gap-4"
+					style=${this.styleMap({gridTemplateColumns:this.cols})}
+				>
+					${this.columns.map(e=>this.renderCell(e))}
+				</div>
+			</schmancy-list-item>
+		`}};t.t([(0,n.property)({type:Array,attribute:!1})],i.prototype,`columns`,void 0),t.t([(0,n.property)({type:Object,attribute:!1})],i.prototype,`item`,void 0),t.t([(0,n.property)({type:String})],i.prototype,`cols`,void 0),i=t.t([(0,n.customElement)(`schmancy-table-row`)],i);var a=class extends e.s{constructor(){super(),this.columns=[],this.data=[],this.keyField=`id`,this.cols=`1fr`,this.sortable=!1,this.sortColumn=null,this.sortDirection=null,this.filteredData=[],this.filteredData=this.data}willUpdate(e){(e.has(`data`)||e.has(`sortColumn`)||e.has(`sortDirection`))&&this.processData()}isDate(e){return e&&typeof e==`object`&&Object.prototype.toString.call(e)===`[object Date]`}processData(){let e=[...this.data];if(this.sortable&&this.sortColumn&&this.sortDirection){let t=this.columns.find(e=>e.key===this.sortColumn);e.sort((e,n)=>{let r,i;if(t&&t.value?(r=t.value(e),i=t.value(n)):(r=e[this.sortColumn],i=n[this.sortColumn]),r==null)return this.sortDirection===`asc`?1:-1;if(i==null)return this.sortDirection===`asc`?-1:1;if(typeof r==`number`&&typeof i==`number`)return this.sortDirection===`asc`?r-i:i-r;let a=typeof r==`string`&&!isNaN(Number(r)),o=typeof i==`string`&&!isNaN(Number(i));if(a&&o){let e=parseFloat(r),t=parseFloat(i);return this.sortDirection===`asc`?e-t:t-e}if(this.isDate(r)&&this.isDate(i))return this.sortDirection===`asc`?r.getTime()-i.getTime():i.getTime()-r.getTime();let s=String(r),c=String(i);return this.sortDirection===`asc`?s.localeCompare(c):c.localeCompare(s)})}this.filteredData=e}toggleSort(e){if(!e.key||!1===e.sortable)return;let t=e.key;t===this.sortColumn?this.sortDirection===`asc`?this.sortDirection=`desc`:this.sortDirection===`desc`?this.sortDirection=null:this.sortDirection=`asc`:(this.sortColumn=t,this.sortDirection=`asc`),this.dispatchEvent(new CustomEvent(`sort-change`,{detail:{column:this.sortColumn,direction:this.sortDirection},bubbles:!0,composed:!0}))}renderSortIndicator(e){return this.sortable&&!1!==e.sortable&&e.key&&e.key===this.sortColumn?r.html`
+			<span class="ml-1">
+				${this.sortDirection===`asc`?r.html`<schmancy-icon size="16px">arrow_upward</schmancy-icon>`:this.sortDirection===`desc`?r.html`<schmancy-icon size="16px">arrow_downward</schmancy-icon>`:null}
+			</span>
+		`:null}render(){let e=e=>({"flex items-center":!0,"cursor-pointer gap-1":this.sortable&&!1!==e.sortable&&e.key});return r.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 items-center gap-4 px-4 py-3"
+						style=${this.styleMap({gridTemplateColumns:this.cols,gridTemplateRows:`1fr`})}
+					>
+						${this.columns.map(t=>r.html`
+								<div
+									class=${this.classMap(e(t))}
+									@click=${()=>this.sortable&&!1!==t.sortable?this.toggleSort(t):null}
+								>
+									<schmancy-typography align=${t.align??`left`} weight=${t.weight??`bold`}>
+										${t.name}
+									</schmancy-typography>
+									${this.renderSortIndicator(t)}
+								</div>
+							`)}
+					</div>
+				</schmancy-surface>
+
+				${this.filteredData.length>0?r.html`
+							<lit-virtualizer
+								scroller
+								class="w-full h-full relative overflow-auto"
+								.items=${this.filteredData}
+								.keyFunction=${(e,t)=>{let n=e?.[this.keyField];return n==null?t:typeof n==`string`||typeof n==`number`?n:String(n)}}
+								.renderItem=${(e,t)=>r.html`
+										<schmancy-table-row
+											class="w-full border-b border-solid border-outlineVariant"
+											.columns=${this.columns}
+											.item=${e}
+											cols=${this.cols}
+											@click=${()=>{let n={item:e,index:t};this.dispatchEvent(new CustomEvent(`click`,{detail:n,bubbles:!0,composed:!0}))}}
+										></schmancy-table-row>
+									`}
+							></lit-virtualizer>
+						`:r.html`
+							<div class="flex items-center justify-center w-full h-full p-8 text-center">
+								<schmancy-typography type="body" token="lg"> No data available </schmancy-typography>
+							</div>
+						`}
+			</div>
+		`}};t.t([(0,n.property)({type:Array,attribute:!1})],a.prototype,`columns`,void 0),t.t([(0,n.property)({type:Array,attribute:!1})],a.prototype,`data`,void 0),t.t([(0,n.property)({type:String})],a.prototype,`keyField`,void 0),t.t([(0,n.property)({type:String})],a.prototype,`cols`,void 0),t.t([(0,n.property)({type:Boolean})],a.prototype,`sortable`,void 0),t.t([(0,n.state)()],a.prototype,`sortColumn`,void 0),t.t([(0,n.state)()],a.prototype,`sortDirection`,void 0),t.t([(0,n.state)()],a.prototype,`filteredData`,void 0),a=t.t([(0,n.customElement)(`schmancy-table`)],a),Object.defineProperty(exports,`SchmancyDataTable`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`SchmancyTableRow`,{enumerable:!0,get:function(){return i}});

package/dist/table.cjs.map

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

package/dist/table.js

@@ -1,2 +1,174 @@
-import { n as e, t } from "./table-CTrhV9-k.js";
-export { t as SchmancyDataTable, e as SchmancyTableRow };
+import { s as e } from "./mixins-CL1krSOE.js";
+import { t } from "./decorate-23nYs4Le.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";
+var o = class extends e {
+	constructor(...e) {
+		super(...e), this.columns = [], this.cols = this.columns.map(() => "1fr").join(" ");
+	}
+	renderCell(e) {
+		if (e.render) return a`
+				<div class="overflow-hidden text-ellipsis">
+					<schmancy-typography align="${e.align || "left"}" maxLines="2" weight="${e.weight || "normal"}">
+						${e.render(this.item)}
+					</schmancy-typography>
+				</div>
+			`;
+		let t = e.key ? this.item[e.key] : "";
+		return a`
+			<div class="overflow-hidden text-ellipsis">
+				<schmancy-typography align="${e.align || "left"}" maxLines="2" weight="${e.weight || "normal"}">
+					${t}
+				</schmancy-typography>
+			</div>
+		`;
+	}
+	render() {
+		return a`
+			<schmancy-list-item class="w-full">
+				<div
+					class="grid items-center gap-4"
+					style=${this.styleMap({ gridTemplateColumns: this.cols })}
+				>
+					${this.columns.map((e) => this.renderCell(e))}
+				</div>
+			</schmancy-list-item>
+		`;
+	}
+};
+t([r({
+	type: Array,
+	attribute: !1
+})], o.prototype, "columns", void 0), t([r({
+	type: Object,
+	attribute: !1
+})], o.prototype, "item", void 0), t([r({ type: String })], o.prototype, "cols", void 0), o = t([n("schmancy-table-row")], o);
+var s = class extends e {
+	constructor() {
+		super(), this.columns = [], this.data = [], this.keyField = "id", this.cols = "1fr", this.sortable = !1, this.sortColumn = null, this.sortDirection = null, this.filteredData = [], this.filteredData = this.data;
+	}
+	willUpdate(e) {
+		(e.has("data") || e.has("sortColumn") || e.has("sortDirection")) && this.processData();
+	}
+	isDate(e) {
+		return e && typeof e == "object" && Object.prototype.toString.call(e) === "[object Date]";
+	}
+	processData() {
+		let e = [...this.data];
+		if (this.sortable && this.sortColumn && this.sortDirection) {
+			let t = this.columns.find((e) => e.key === this.sortColumn);
+			e.sort((e, n) => {
+				let r, i;
+				if (t && t.value ? (r = t.value(e), i = t.value(n)) : (r = e[this.sortColumn], i = n[this.sortColumn]), r == null) return this.sortDirection === "asc" ? 1 : -1;
+				if (i == null) return this.sortDirection === "asc" ? -1 : 1;
+				if (typeof r == "number" && typeof i == "number") return this.sortDirection === "asc" ? r - i : i - r;
+				let a = typeof r == "string" && !isNaN(Number(r)), o = typeof i == "string" && !isNaN(Number(i));
+				if (a && o) {
+					let e = parseFloat(r), t = parseFloat(i);
+					return this.sortDirection === "asc" ? e - t : t - e;
+				}
+				if (this.isDate(r) && this.isDate(i)) return this.sortDirection === "asc" ? r.getTime() - i.getTime() : i.getTime() - r.getTime();
+				let s = String(r), c = String(i);
+				return this.sortDirection === "asc" ? s.localeCompare(c) : c.localeCompare(s);
+			});
+		}
+		this.filteredData = e;
+	}
+	toggleSort(e) {
+		if (!e.key || !1 === e.sortable) return;
+		let t = e.key;
+		t === this.sortColumn ? this.sortDirection === "asc" ? this.sortDirection = "desc" : this.sortDirection === "desc" ? this.sortDirection = null : this.sortDirection = "asc" : (this.sortColumn = t, this.sortDirection = "asc"), this.dispatchEvent(new CustomEvent("sort-change", {
+			detail: {
+				column: this.sortColumn,
+				direction: this.sortDirection
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	renderSortIndicator(e) {
+		return this.sortable && !1 !== e.sortable && e.key && e.key === this.sortColumn ? a`
+			<span class="ml-1">
+				${this.sortDirection === "asc" ? a`<schmancy-icon size="16px">arrow_upward</schmancy-icon>` : this.sortDirection === "desc" ? a`<schmancy-icon size="16px">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 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 items-center gap-4 px-4 py-3"
+						style=${this.styleMap({
+			gridTemplateColumns: this.cols,
+			gridTemplateRows: "1fr"
+		})}
+					>
+						${this.columns.map((t) => a`
+								<div
+									class=${this.classMap(e(t))}
+									@click=${() => this.sortable && !1 !== t.sortable ? this.toggleSort(t) : null}
+								>
+									<schmancy-typography align=${t.align ?? "left"} weight=${t.weight ?? "bold"}>
+										${t.name}
+									</schmancy-typography>
+									${this.renderSortIndicator(t)}
+								</div>
+							`)}
+					</div>
+				</schmancy-surface>
+
+				${this.filteredData.length > 0 ? a`
+							<lit-virtualizer
+								scroller
+								class="w-full h-full relative overflow-auto"
+								.items=${this.filteredData}
+								.keyFunction=${(e, t) => {
+			let n = e?.[this.keyField];
+			return n == null ? t : typeof n == "string" || typeof n == "number" ? n : String(n);
+		}}
+								.renderItem=${(e, t) => a`
+										<schmancy-table-row
+											class="w-full border-b border-solid border-outlineVariant"
+											.columns=${this.columns}
+											.item=${e}
+											cols=${this.cols}
+											@click=${() => {
+			let n = {
+				item: e,
+				index: t
+			};
+			this.dispatchEvent(new CustomEvent("click", {
+				detail: n,
+				bubbles: !0,
+				composed: !0
+			}));
+		}}
+										></schmancy-table-row>
+									`}
+							></lit-virtualizer>
+						` : a`
+							<div class="flex items-center justify-center w-full h-full p-8 text-center">
+								<schmancy-typography type="body" token="lg"> No data available </schmancy-typography>
+							</div>
+						`}
+			</div>
+		`;
+	}
+};
+t([r({
+	type: Array,
+	attribute: !1
+})], s.prototype, "columns", void 0), t([r({
+	type: Array,
+	attribute: !1
+})], s.prototype, "data", void 0), t([r({ type: String })], s.prototype, "keyField", void 0), t([r({ type: String })], s.prototype, "cols", void 0), t([r({ type: Boolean })], s.prototype, "sortable", void 0), t([i()], s.prototype, "sortColumn", void 0), t([i()], s.prototype, "sortDirection", void 0), t([i()], s.prototype, "filteredData", void 0), s = t([n("schmancy-table")], s);
+export { s as SchmancyDataTable, o as SchmancyTableRow };

package/dist/table.js.map

@@ -0,0 +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 size=\"16px\">arrow_upward</schmancy-icon>`\n\t\t\t\t\t: this.sortDirection === 'desc'\n\t\t\t\t\t\t? html`<schmancy-icon size=\"16px\">arrow_downward</schmancy-icon>`\n\t\t\t\t\t\t: null}\n\t\t\t</span>\n\t\t`\n\t}\n\n\trender(): TemplateResult {\n\t\tconst columnHeadClasses = column => ({\n\t\t\t'flex items-center': true,\n\t\t\t'cursor-pointer gap-1': this.sortable && column.sortable !== false && column.key,\n\t\t})\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"grid h-full w-full\"\n\t\t\t\tstyle=\"grid-template-columns: 1fr; grid-template-rows: auto 1fr;\"\n\t\t\t>\n\t\t\t\t<schmancy-surface rounded=\"top\" elevation=\"1\" type=\"glass\" class=\"sticky top-0 z-10\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"grid items-center gap-4 px-4 py-3\"\n\t\t\t\t\t\tstyle=${this.styleMap({\n\t\t\t\t\t\t\tgridTemplateColumns: this.cols,\n\t\t\t\t\t\t\tgridTemplateRows: '1fr',\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t${this.columns.map(\n\t\t\t\t\t\t\tcolumn => html`\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclass=${this.classMap(columnHeadClasses(column))}\n\t\t\t\t\t\t\t\t\t@click=${() => (this.sortable && column.sortable !== false ? this.toggleSort(column) : null)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<schmancy-typography align=${column.align ?? 'left'} weight=${column.weight ?? 'bold'}>\n\t\t\t\t\t\t\t\t\t\t${column.name}\n\t\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t\t${this.renderSortIndicator(column)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</schmancy-surface>\n\n\t\t\t\t${this.filteredData.length > 0\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<lit-virtualizer\n\t\t\t\t\t\t\t\tscroller\n\t\t\t\t\t\t\t\tclass=\"w-full h-full relative overflow-auto\"\n\t\t\t\t\t\t\t\t.items=${this.filteredData}\n\t\t\t\t\t\t\t\t.keyFunction=${(item: T, index: number) => {\n\t\t\t\t\t\t\t\t\tconst keyValue = item?.[this.keyField]\n\t\t\t\t\t\t\t\t\tif (keyValue === undefined || keyValue === null) {\n\t\t\t\t\t\t\t\t\t\treturn index\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn typeof keyValue === 'string' || typeof keyValue === 'number' ? keyValue : String(keyValue)\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t.renderItem=${(item: T, index: number) =>\n\t\t\t\t\t\t\t\t\thtml`\n\t\t\t\t\t\t\t\t\t\t<schmancy-table-row\n\t\t\t\t\t\t\t\t\t\t\tclass=\"w-full border-b border-solid border-outlineVariant\"\n\t\t\t\t\t\t\t\t\t\t\t.columns=${this.columns}\n\t\t\t\t\t\t\t\t\t\t\t.item=${item}\n\t\t\t\t\t\t\t\t\t\t\tcols=${this.cols}\n\t\t\t\t\t\t\t\t\t\t\t@click=${() => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst detail = { item, index }\n\t\t\t\t\t\t\t\t\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnew CustomEvent('click', {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdetail,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t></schmancy-table-row>\n\t\t\t\t\t\t\t\t\t` as TemplateResult}\n\t\t\t\t\t\t\t></lit-virtualizer>\n\t\t\t\t\t\t`\n\t\t\t\t\t: html`\n\t\t\t\t\t\t\t<div class=\"flex items-center justify-center w-full h-full p-8 text-center\">\n\t\t\t\t\t\t\t\t<schmancy-typography type=\"body\" token=\"lg\"> No data available </schmancy-typography>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-table': SchmancyDataTable\n\t}\n}\n"],"mappings":";;;;;AAMO,IAAA,IAAA,cAAoE,EAAA;CAAA,YAAA,GAAA,GAAA;AAAA,QAAA,GAAA,EAAA,EAAA,KAAA,UAE9C,EAAA,EAAA,KAAA,OAMb,KAAK,QAAQ,UAAU,MAAA,CAAO,KAAK,IAAA;;CAMlD,WAAmB,GAAA;AAElB,MAAI,EAAO,OACV,QAAO,CAAI;;mCAEqB,EAAO,SAAS,OAAA,yBAAgC,EAAO,UAAU,SAAA;QAC5F,EAAO,OAAO,KAAK,KAAA,CAAA;;;;EAOzB,IAAM,IAAQ,EAAO,MAAM,KAAK,KAAK,EAAO,OAAO;AAEnD,SAAO,CAAI;;kCAEqB,EAAO,SAAS,OAAA,yBAAgC,EAAO,UAAU,SAAA;OAC5F,EAAA;;;;;CAMN,SAAA;AACC,SAAO,CAAI;;;;aAIA,KAAK,SAAS,EAAE,qBAAqB,KAAK,MAAA,CAAA,CAAA;;OAEhD,KAAK,QAAQ,KAAI,MAAU,KAAK,WAAW,EAAA,CAAA,CAAA;;;;;;GA5ChD,EAAS;CAAE,MAAM;CAAO,WAAA,CAAW;CAAA,CAAA,CAAA,EAAQ,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,EAAA,CAG3C,EAAS;CAAE,MAAM;CAAQ,WAAA,CAAW;CAAA,CAAA,CAAA,EAAQ,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAG5C,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAR3B,EAAc,qBAAA,CAAA,EAAqB,EAAA;AC4B7B,IAAA,IAAA,cAAqE,EAAA;CAuB3E,cAAA;AACC,SAAA,EAAA,KAAA,UAtB2B,EAAA,EAAA,KAAA,OAGhB,EAAA,EAAA,KAAA,WAIQ,MAAA,KAAA,OAGL,OAAA,KAAA,WAAA,CAIK,GAAA,KAAA,aAG0B,MAAA,KAAA,gBACE,MAAA,KAAA,eACX,EAAA,EAIpC,KAAK,eAAe,KAAK;;CAI1B,WAAqB,GAAA;AAAA,GAEnB,EAAkB,IAAI,OAAA,IACtB,EAAkB,IAAI,aAAA,IACtB,EAAkB,IAAI,gBAAA,KAEtB,KAAK,aAAA;;CAOP,OAAe,GAAA;AACd,SAAO,KAA0B,OAAV,KAAU,YAAY,OAAO,UAAU,SAAS,KAAK,EAAA,KAAW;;CAGxF,cAAA;EACC,IAAI,IAAS,CAAA,GAAI,KAAK,KAAA;AAGtB,MAAI,KAAK,YAAY,KAAK,cAAc,KAAK,eAAe;GAE3D,IAAM,IAAmB,KAAK,QAAQ,MAAK,MAAO,EAAI,QAAQ,KAAK,WAAA;AAEnE,KAAO,MAAM,GAAG,MAAA;IAEf,IAAI,GAAQ;AAaZ,QAXI,KAAoB,EAAiB,SAExC,IAAS,EAAiB,MAAM,EAAA,EAChC,IAAS,EAAiB,MAAM,EAAA,KAGhC,IAAS,EAAE,KAAK,aAChB,IAAS,EAAE,KAAK,cAIb,KAAA,KACH,QAAO,KAAK,kBAAkB,QAAQ,IAAA;AAEvC,QAAI,KAAA,KACH,QAAO,KAAK,kBAAkB,QAAlB,KAA+B;AAI5C,QAAsB,OAAX,KAAW,YAA8B,OAAX,KAAW,SACnD,QAAO,KAAK,kBAAkB,QAAQ,IAAS,IAAS,IAAS;IAIlE,IAAM,IAA6B,OAAX,KAAW,YAAX,CAAwB,MAAM,OAAO,EAAA,CAAA,EACvD,IAA6B,OAAX,KAAW,YAAX,CAAwB,MAAM,OAAO,EAAA,CAAA;AAE7D,QAAI,KAAY,GAAU;KACzB,IAAM,IAAO,WAAW,EAAA,EAClB,IAAO,WAAW,EAAA;AACxB,YAAO,KAAK,kBAAkB,QAAQ,IAAO,IAAO,IAAO;;AAI5D,QAAI,KAAK,OAAO,EAAA,IAAW,KAAK,OAAO,EAAA,CACtC,QAAO,KAAK,kBAAkB,QAC3B,EAAO,SAAA,GAAY,EAAO,SAAA,GAC1B,EAAO,SAAA,GAAY,EAAO,SAAA;IAI9B,IAAM,IAAO,OAAO,EAAA,EACd,IAAO,OAAO,EAAA;AACpB,WAAO,KAAK,kBAAkB,QAAQ,EAAK,cAAc,EAAA,GAAQ,EAAK,cAAc,EAAA;KAAA;;AAItF,OAAK,eAAe;;CAIrB,WAAmB,GAAA;AAClB,MAAA,CAAK,EAAO,OAAA,CAA2B,MAApB,EAAO,SAAoB;EAE9C,IAAM,IAAY,EAAO;AAGrB,QAAc,KAAK,aAClB,KAAK,kBAAkB,QAC1B,KAAK,gBAAgB,SACX,KAAK,kBAAkB,SACjC,KAAK,gBAAgB,OAErB,KAAK,gBAAgB,SAItB,KAAK,aAAa,GAClB,KAAK,gBAAgB,QAItB,KAAK,cACJ,IAAI,YAAY,eAAe;GAC9B,QAAQ;IACP,QAAQ,KAAK;IACb,WAAW,KAAK;IAAA;GAEjB,SAAA,CAAS;GACT,UAAA,CAAU;GAAA,CAAA,CAAA;;CAMb,oBAA4B,GAAA;AAC3B,SAAK,KAAK,YAAA,CAAgC,MAApB,EAAO,YAAuB,EAAO,OAAO,EAAO,QAAQ,KAAK,aAI/E,CAAI;;MAEP,KAAK,kBAAkB,QACtB,CAAI,4DACJ,KAAK,kBAAkB,SACtB,CAAI,8DACJ,KAAA;;MATE;;CAcT,SAAA;EACC,IAAM,KAAoB,OAAA;GACzB,qBAAA,CAAqB;GACrB,wBAAwB,KAAK,YAAA,CAAgC,MAApB,EAAO,YAAsB,EAAO;GAAA;AAE9E,SAAO,CAAI;;;;;;;;cAQC,KAAK,SAAS;GACrB,qBAAqB,KAAK;GAC1B,kBAAkB;GAAA,CAAA,CAAA;;QAGjB,KAAK,QAAQ,KACd,MAAU,CAAI;;iBAEJ,KAAK,SAAS,EAAkB,EAAA,CAAA,CAAA;wBACxB,KAAK,YAAA,CAAgC,MAApB,EAAO,WAAqB,KAAK,WAAW,EAAA,GAAU,KAAA;;sCAE1D,EAAO,SAAS,OAAA,UAAiB,EAAO,UAAU,OAAA;YAC5E,EAAO,KAAA;;WAER,KAAK,oBAAoB,EAAA,CAAA;;;;;;MAO9B,KAAK,aAAa,SAAS,IAC1B,CAAI;;;;iBAIM,KAAK,aAAA;wBACE,GAAS,MAAA;GACxB,IAAM,IAAW,IAAO,KAAK;AAC7B,UAAI,KAAA,OACI,IAEmB,OAAb,KAAa,YAAgC,OAAb,KAAa,WAAW,IAAW,OAAO,EAAA;IAAA;uBAE1E,GAAS,MACvB,CAAI;;;sBAGS,KAAK,QAAA;mBACR,EAAA;kBACD,KAAK,KAAA;;GAEX,IAAM,IAAS;IAAE,MAAA;IAAM,OAAA;IAAA;AACvB,QAAK,cACJ,IAAI,YAAY,SAAS;IACxB,QAAA;IACA,SAAA,CAAS;IACT,UAAA,CAAU;IAAA,CAAA,CAAA;IAAA;;;;UAQjB,CAAI;;;;;;;;;GAlOT,EAAS;CAAE,MAAM;CAAO,WAAA,CAAW;CAAA,CAAA,CAAA,EAAQ,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,EAAA,CAG3C,EAAS;CAAE,MAAM;CAAO,WAAA,CAAW;CAAA,CAAA,CAAA,EAAQ,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAI3C,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,YAAA,KAAA,EAAA,EAAA,EAAA,CAG1B,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAI1B,EAAS,EAAE,MAAM,SAAA,CAAA,CAAA,EAAU,EAAA,WAAA,YAAA,KAAA,EAAA,EAAA,EAAA,CAI3B,GAAA,CAAA,EAAO,EAAA,WAAA,cAAA,KAAA,EAAA,EAAA,EAAA,CACP,GAAA,CAAA,EAAO,EAAA,WAAA,iBAAA,KAAA,EAAA,EAAA,EAAA,CACP,GAAA,CAAA,EAAO,EAAA,WAAA,gBAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAtBR,EAAc,iBAAA,CAAA,EAAiB,EAAA;AAAA,SAAA,KAAA,mBAAA,KAAA"}