@mhmo91/schmancy 0.10.16 → 0.10.17

package/dist/steps.js.map

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

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

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

package/dist/table.js.map

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

package/dist/{tabs-CikPr7by.js.map → tabs-81ADWQqa.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tabs-CikPr7by.js","names":[],"sources":["../src/tabs/context.ts","../src/tabs/tab.ts","../src/tabs/tabs-group.ts"],"sourcesContent":["import { createContext } from '@lit/context'\n\nexport type TSchmancyTabsMode = 'scroll' | 'tabs'\n\nexport const SchmancyTabsModeContext = createContext<TSchmancyTabsMode>('tabs')\n","import { consume } from '@lit/context'\nimport { SchmancyElement } from '@mixins/index'\nimport { html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { SchmancyTabsModeContext } from './context'\n\n@customElement('schmancy-tab')\nexport default class SchmancyTab extends SchmancyElement {\n\t@property({ type: String, reflect: true }) label\n\t@property({ type: String, reflect: true }) value\n\t@property({ type: Boolean, reflect: true }) active!: boolean\n\n\t@consume({ context: SchmancyTabsModeContext, subscribe: true })\n\t@state()\n\tmode\n\n\tprotected updated(changedProperties: Map<PropertyKey, unknown>) {\n\t\tif (changedProperties.has('active') && this.active) {\n\t\t\t// Trigger resize for virtualizers to recalculate when tab becomes visible\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\twindow.dispatchEvent(new Event('resize'))\n\t\t\t})\n\t\t}\n\t}\n\n\tprotected render(): unknown {\n\t\t// Don't render content until tab is active (virtualizers need actual layout, not hidden)\n\t\tif (this.mode === 'tabs' && !this.active) {\n\t\t\treturn html``\n\t\t}\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab': SchmancyTab\n\t}\n}\n","import { provide } from '@lit/context'\nimport { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { filter, fromEvent, interval, map, take, throttleTime } from 'rxjs'\nimport { SchmancyTabsModeContext, TSchmancyTabsMode } from './context'\nimport SchmancyTab from './tab'\n\n/**\n * @slot - The content of the tab group\n * @fires tab-changed - The event fired when the tab is changed\n */\n@customElement('schmancy-tab-group')\nexport default class SchmancyTabGroup extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\theight: 100%;\n\t}\n`];\n\t@provide({ context: SchmancyTabsModeContext })\n\t@property({ type: String })\n\tmode: TSchmancyTabsMode = 'tabs'\n\n\t@property({ type: Boolean }) rounded = true\n\n\t@property({ type: String, reflect: true }) activeTab: string\n\t@queryAssignedElements({\n\t\tflatten: true,\n\t})\n\tprivate tabsElements!: Array<SchmancyTab>\n\n\t@query('#tabsNavigation') navElement!: HTMLElement\n\t@query('#tabsContent') tabsContent!: HTMLElement\n\n\t@state()\n\tprivate tabs: Array<SchmancyTab> = []\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tfromEvent(window, 'scroll')\n\t\t\t.pipe(\n\t\t\t\tthrottleTime(1000),\n\t\t\t\tfilter(() => this.mode === 'scroll'),\n\t\t\t\tmap(() => {\n\t\t\t\t\tlet closestDiv = null\n\t\t\t\t\tlet closestDistance = Infinity\n\t\t\t\t\tthis.tabsElements.forEach(div => {\n\t\t\t\t\t\tconst distance =\n\t\t\t\t\t\t\tdiv.getBoundingClientRect().top - this.navElement.clientHeight + document.body.offsetHeight / 3\n\n\t\t\t\t\t\tif (distance < closestDistance && distance > 0) {\n\t\t\t\t\t\t\tclosestDistance = distance\n\t\t\t\t\t\t\tclosestDiv = div\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\treturn closestDiv\n\t\t\t\t}),\n\t\t\t\tfilter((el: SchmancyTab | null) => el !== null),\n\t\t\t)\n\t\t\t.subscribe({\n\t\t\t\tnext: (el: SchmancyTab) => {\n\t\t\t\t\tthis.activeTab = el.value\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\tfirstUpdated() {\n\t\tinterval(0)\n\t\t\t.pipe(\n\t\t\t\tfilter(() => !!this.navElement.clientHeight),\n\t\t\t\ttake(1),\n\t\t\t)\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\t\tif (this.mode === 'scroll') tab.style.paddingTop = this.navElement.clientHeight + 'px'\n\t\t\t\t})\n\t\t\t})\n\t}\n\n\thydrateTabs() {\n\t\tthis.tabs = this.tabsElements\n\t\tif (!this.activeTab && this.tabsElements[0]) {\n\t\t\tthis.activeTab = this.tabsElements[0].value\n\t\t\tthis.tabsElements[0].active = true\n\t\t} else {\n\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\tif (tab.value === this.activeTab) tab.active = true\n\t\t\t\telse tab.active = false\n\t\t\t})\n\t\t}\n\t\tconst lastTab = this.tabs?.[-1]\n\t\tif (lastTab) {\n\t\t\tlastTab.style.paddingBottom = lastTab.offsetHeight + 'px'\n\t\t}\n\t}\n\n\ttabChanged(selectedTab: { label: string; value: string }) {\n\t\tlet activeTabElement: SchmancyTab | undefined\n\t\tthis.tabsElements.forEach(tab => {\n\t\t\tif (tab.value === selectedTab.value) {\n\t\t\t\ttab.active = true\n\t\t\t\tactiveTabElement = tab\n\t\t\t\t// scroll to the tab\n\t\t\t\tif (this.mode === 'scroll') {\n\t\t\t\t\t// Scroll the desired element into view\n\t\t\t\t\tactiveTabElement.scrollIntoView({\n\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\tblock: 'start',\n\t\t\t\t\t\tinline: 'start',\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\ttab.active = false\n\t\t\t}\n\t\t})\n\t\tif (this.mode === 'tabs') {\n\t\t\tthis.activeTab = selectedTab.value\n\t\t}\n\t\tthis.dispatchEvent(new CustomEvent('tab-changed', { detail: this.activeTab }))\n\t}\n\n\tprotected render(): unknown {\n\t\tconst tabs = {\n\t\t\t'bg-surface-default color-surface-on': true,\n\t\t\t'flex z-50 overflow-auto': true,\n\t\t\t'sticky top-0 shadow-md': this.mode === 'scroll',\n\t\t\t'rounded-full': this.rounded,\n\t\t}\n\n\t\tconst activeTab = {\n\t\t\t'text-primary-default': true,\n\t\t}\n\n\t\tconst inactiveTab = {\n\t\t\t'border-transparent': true,\n\t\t\t'hover:text-surface-on': true,\n\t\t\t'hover:border-outlineVariant': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t}\n\n\t\treturn html`\n\t\t\t<section id=\"tabsNavigation\" class=\"${this.classMap(tabs)}\" aria-label=\"Tabs\">\n\t\t\t\t${repeat(\n\t\t\t\t\tthis.tabs,\n\t\t\t\t\ttab => tab.value,\n\t\t\t\t\ttab => html`\n\t\t\t\t\t\t<schmancy-button\n\t\t\t\t\t\t\t@click=${() => {\n\t\t\t\t\t\t\t\tthis.tabChanged({\n\t\t\t\t\t\t\t\t\tlabel: tab.label,\n\t\t\t\t\t\t\t\t\tvalue: tab.value,\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-current=\"page\"\n\t\t\t\t\t\t\tclass=\"h-auto relative\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"px-4 py-3 ${this.activeTab === tab.value\n\t\t\t\t\t\t\t\t\t? this.classMap(activeTab)\n\t\t\t\t\t\t\t\t\t: this.classMap(inactiveTab)}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<schmancy-typography class=\"h-full align-middle flex \" type=\"title\" token=\"md\" weight=\"medium\">\n\t\t\t\t\t\t\t\t\t${tab.label}\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t.hidden=${this.activeTab !== tab.value}\n\t\t\t\t\t\t\t\t\tclass=\"border-primary-default absolute bottom-0 inset-x-6  border-solid border-2 rounded-t-full\"\n\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</section>\n\t\t\t<section id=\"tabsContent\" class=\"h-full\">\n\t\t\t\t<slot @slotchange=${() => this.hydrateTabs()}></slot>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab-group': SchmancyTabGroup\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"tabs-81ADWQqa.js","names":[],"sources":["../src/tabs/context.ts","../src/tabs/tab.ts","../src/tabs/tabs-group.ts"],"sourcesContent":["import { createContext } from '@lit/context'\n\nexport type TSchmancyTabsMode = 'scroll' | 'tabs'\n\nexport const SchmancyTabsModeContext = createContext<TSchmancyTabsMode>('tabs')\n","import { consume } from '@lit/context'\nimport { SchmancyElement } from '@mixins/index'\nimport { html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { SchmancyTabsModeContext } from './context'\n\n@customElement('schmancy-tab')\nexport default class SchmancyTab extends SchmancyElement {\n\t@property({ type: String, reflect: true }) label\n\t@property({ type: String, reflect: true }) value\n\t@property({ type: Boolean, reflect: true }) active!: boolean\n\n\t@consume({ context: SchmancyTabsModeContext, subscribe: true })\n\t@state()\n\tmode\n\n\tprotected updated(changedProperties: Map<PropertyKey, unknown>) {\n\t\tif (changedProperties.has('active') && this.active) {\n\t\t\t// Trigger resize for virtualizers to recalculate when tab becomes visible\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\twindow.dispatchEvent(new Event('resize'))\n\t\t\t})\n\t\t}\n\t}\n\n\tprotected render(): unknown {\n\t\t// Don't render content until tab is active (virtualizers need actual layout, not hidden)\n\t\tif (this.mode === 'tabs' && !this.active) {\n\t\t\treturn html``\n\t\t}\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab': SchmancyTab\n\t}\n}\n","import { provide } from '@lit/context'\nimport { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { filter, fromEvent, interval, map, take, throttleTime } from 'rxjs'\nimport { SchmancyTabsModeContext, TSchmancyTabsMode } from './context'\nimport SchmancyTab from './tab'\n\n/**\n * @slot - The content of the tab group\n * @fires tab-changed - The event fired when the tab is changed\n */\n@customElement('schmancy-tab-group')\nexport default class SchmancyTabGroup extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\theight: 100%;\n\t}\n`];\n\t@provide({ context: SchmancyTabsModeContext })\n\t@property({ type: String })\n\tmode: TSchmancyTabsMode = 'tabs'\n\n\t@property({ type: Boolean }) rounded = true\n\n\t@property({ type: String, reflect: true }) activeTab: string\n\t@queryAssignedElements({\n\t\tflatten: true,\n\t})\n\tprivate tabsElements!: Array<SchmancyTab>\n\n\t@query('#tabsNavigation') navElement!: HTMLElement\n\t@query('#tabsContent') tabsContent!: HTMLElement\n\n\t@state()\n\tprivate tabs: Array<SchmancyTab> = []\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tfromEvent(window, 'scroll')\n\t\t\t.pipe(\n\t\t\t\tthrottleTime(1000),\n\t\t\t\tfilter(() => this.mode === 'scroll'),\n\t\t\t\tmap(() => {\n\t\t\t\t\tlet closestDiv = null\n\t\t\t\t\tlet closestDistance = Infinity\n\t\t\t\t\tthis.tabsElements.forEach(div => {\n\t\t\t\t\t\tconst distance =\n\t\t\t\t\t\t\tdiv.getBoundingClientRect().top - this.navElement.clientHeight + document.body.offsetHeight / 3\n\n\t\t\t\t\t\tif (distance < closestDistance && distance > 0) {\n\t\t\t\t\t\t\tclosestDistance = distance\n\t\t\t\t\t\t\tclosestDiv = div\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\treturn closestDiv\n\t\t\t\t}),\n\t\t\t\tfilter((el: SchmancyTab | null) => el !== null),\n\t\t\t)\n\t\t\t.subscribe({\n\t\t\t\tnext: (el: SchmancyTab) => {\n\t\t\t\t\tthis.activeTab = el.value\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\tfirstUpdated() {\n\t\tinterval(0)\n\t\t\t.pipe(\n\t\t\t\tfilter(() => !!this.navElement.clientHeight),\n\t\t\t\ttake(1),\n\t\t\t)\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\t\tif (this.mode === 'scroll') tab.style.paddingTop = this.navElement.clientHeight + 'px'\n\t\t\t\t})\n\t\t\t})\n\t}\n\n\thydrateTabs() {\n\t\tthis.tabs = this.tabsElements\n\t\tif (!this.activeTab && this.tabsElements[0]) {\n\t\t\tthis.activeTab = this.tabsElements[0].value\n\t\t\tthis.tabsElements[0].active = true\n\t\t} else {\n\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\tif (tab.value === this.activeTab) tab.active = true\n\t\t\t\telse tab.active = false\n\t\t\t})\n\t\t}\n\t\tconst lastTab = this.tabs?.[-1]\n\t\tif (lastTab) {\n\t\t\tlastTab.style.paddingBottom = lastTab.offsetHeight + 'px'\n\t\t}\n\t}\n\n\ttabChanged(selectedTab: { label: string; value: string }) {\n\t\tlet activeTabElement: SchmancyTab | undefined\n\t\tthis.tabsElements.forEach(tab => {\n\t\t\tif (tab.value === selectedTab.value) {\n\t\t\t\ttab.active = true\n\t\t\t\tactiveTabElement = tab\n\t\t\t\t// scroll to the tab\n\t\t\t\tif (this.mode === 'scroll') {\n\t\t\t\t\t// Scroll the desired element into view\n\t\t\t\t\tactiveTabElement.scrollIntoView({\n\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\tblock: 'start',\n\t\t\t\t\t\tinline: 'start',\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\ttab.active = false\n\t\t\t}\n\t\t})\n\t\tif (this.mode === 'tabs') {\n\t\t\tthis.activeTab = selectedTab.value\n\t\t}\n\t\tthis.dispatchEvent(new CustomEvent('tab-changed', { detail: this.activeTab }))\n\t}\n\n\tprotected render(): unknown {\n\t\tconst tabs = {\n\t\t\t'bg-surface-default color-surface-on': true,\n\t\t\t'flex z-50 overflow-auto': true,\n\t\t\t'sticky top-0 shadow-md': this.mode === 'scroll',\n\t\t\t'rounded-full': this.rounded,\n\t\t}\n\n\t\tconst activeTab = {\n\t\t\t'text-primary-default': true,\n\t\t}\n\n\t\tconst inactiveTab = {\n\t\t\t'border-transparent': true,\n\t\t\t'hover:text-surface-on': true,\n\t\t\t'hover:border-outlineVariant': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t}\n\n\t\treturn html`\n\t\t\t<section id=\"tabsNavigation\" class=\"${this.classMap(tabs)}\" aria-label=\"Tabs\">\n\t\t\t\t${repeat(\n\t\t\t\t\tthis.tabs,\n\t\t\t\t\ttab => tab.value,\n\t\t\t\t\ttab => html`\n\t\t\t\t\t\t<schmancy-button\n\t\t\t\t\t\t\t@click=${() => {\n\t\t\t\t\t\t\t\tthis.tabChanged({\n\t\t\t\t\t\t\t\t\tlabel: tab.label,\n\t\t\t\t\t\t\t\t\tvalue: tab.value,\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-current=\"page\"\n\t\t\t\t\t\t\tclass=\"h-auto relative\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"px-4 py-3 ${this.activeTab === tab.value\n\t\t\t\t\t\t\t\t\t? this.classMap(activeTab)\n\t\t\t\t\t\t\t\t\t: this.classMap(inactiveTab)}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<schmancy-typography class=\"h-full align-middle flex \" type=\"title\" token=\"md\" weight=\"medium\">\n\t\t\t\t\t\t\t\t\t${tab.label}\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t.hidden=${this.activeTab !== tab.value}\n\t\t\t\t\t\t\t\t\tclass=\"border-primary-default absolute bottom-0 inset-x-6  border-solid border-2 rounded-t-full\"\n\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</section>\n\t\t\t<section id=\"tabsContent\" class=\"h-full\">\n\t\t\t\t<slot @slotchange=${() => this.hydrateTabs()}></slot>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab-group': SchmancyTabGroup\n\t}\n}\n"],"mappings":"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"}

package/dist/{tabs-CitVls3_.cjs.map → tabs-DnG3K0bu.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"tabs-CitVls3_.cjs","names":[],"sources":["../src/tabs/context.ts","../src/tabs/tab.ts","../src/tabs/tabs-group.ts"],"sourcesContent":["import { createContext } from '@lit/context'\n\nexport type TSchmancyTabsMode = 'scroll' | 'tabs'\n\nexport const SchmancyTabsModeContext = createContext<TSchmancyTabsMode>('tabs')\n","import { consume } from '@lit/context'\nimport { SchmancyElement } from '@mixins/index'\nimport { html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { SchmancyTabsModeContext } from './context'\n\n@customElement('schmancy-tab')\nexport default class SchmancyTab extends SchmancyElement {\n\t@property({ type: String, reflect: true }) label\n\t@property({ type: String, reflect: true }) value\n\t@property({ type: Boolean, reflect: true }) active!: boolean\n\n\t@consume({ context: SchmancyTabsModeContext, subscribe: true })\n\t@state()\n\tmode\n\n\tprotected updated(changedProperties: Map<PropertyKey, unknown>) {\n\t\tif (changedProperties.has('active') && this.active) {\n\t\t\t// Trigger resize for virtualizers to recalculate when tab becomes visible\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\twindow.dispatchEvent(new Event('resize'))\n\t\t\t})\n\t\t}\n\t}\n\n\tprotected render(): unknown {\n\t\t// Don't render content until tab is active (virtualizers need actual layout, not hidden)\n\t\tif (this.mode === 'tabs' && !this.active) {\n\t\t\treturn html``\n\t\t}\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab': SchmancyTab\n\t}\n}\n","import { provide } from '@lit/context'\nimport { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { filter, fromEvent, interval, map, take, throttleTime } from 'rxjs'\nimport { SchmancyTabsModeContext, TSchmancyTabsMode } from './context'\nimport SchmancyTab from './tab'\n\n/**\n * @slot - The content of the tab group\n * @fires tab-changed - The event fired when the tab is changed\n */\n@customElement('schmancy-tab-group')\nexport default class SchmancyTabGroup extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\theight: 100%;\n\t}\n`];\n\t@provide({ context: SchmancyTabsModeContext })\n\t@property({ type: String })\n\tmode: TSchmancyTabsMode = 'tabs'\n\n\t@property({ type: Boolean }) rounded = true\n\n\t@property({ type: String, reflect: true }) activeTab: string\n\t@queryAssignedElements({\n\t\tflatten: true,\n\t})\n\tprivate tabsElements!: Array<SchmancyTab>\n\n\t@query('#tabsNavigation') navElement!: HTMLElement\n\t@query('#tabsContent') tabsContent!: HTMLElement\n\n\t@state()\n\tprivate tabs: Array<SchmancyTab> = []\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tfromEvent(window, 'scroll')\n\t\t\t.pipe(\n\t\t\t\tthrottleTime(1000),\n\t\t\t\tfilter(() => this.mode === 'scroll'),\n\t\t\t\tmap(() => {\n\t\t\t\t\tlet closestDiv = null\n\t\t\t\t\tlet closestDistance = Infinity\n\t\t\t\t\tthis.tabsElements.forEach(div => {\n\t\t\t\t\t\tconst distance =\n\t\t\t\t\t\t\tdiv.getBoundingClientRect().top - this.navElement.clientHeight + document.body.offsetHeight / 3\n\n\t\t\t\t\t\tif (distance < closestDistance && distance > 0) {\n\t\t\t\t\t\t\tclosestDistance = distance\n\t\t\t\t\t\t\tclosestDiv = div\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\treturn closestDiv\n\t\t\t\t}),\n\t\t\t\tfilter((el: SchmancyTab | null) => el !== null),\n\t\t\t)\n\t\t\t.subscribe({\n\t\t\t\tnext: (el: SchmancyTab) => {\n\t\t\t\t\tthis.activeTab = el.value\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\tfirstUpdated() {\n\t\tinterval(0)\n\t\t\t.pipe(\n\t\t\t\tfilter(() => !!this.navElement.clientHeight),\n\t\t\t\ttake(1),\n\t\t\t)\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\t\tif (this.mode === 'scroll') tab.style.paddingTop = this.navElement.clientHeight + 'px'\n\t\t\t\t})\n\t\t\t})\n\t}\n\n\thydrateTabs() {\n\t\tthis.tabs = this.tabsElements\n\t\tif (!this.activeTab && this.tabsElements[0]) {\n\t\t\tthis.activeTab = this.tabsElements[0].value\n\t\t\tthis.tabsElements[0].active = true\n\t\t} else {\n\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\tif (tab.value === this.activeTab) tab.active = true\n\t\t\t\telse tab.active = false\n\t\t\t})\n\t\t}\n\t\tconst lastTab = this.tabs?.[-1]\n\t\tif (lastTab) {\n\t\t\tlastTab.style.paddingBottom = lastTab.offsetHeight + 'px'\n\t\t}\n\t}\n\n\ttabChanged(selectedTab: { label: string; value: string }) {\n\t\tlet activeTabElement: SchmancyTab | undefined\n\t\tthis.tabsElements.forEach(tab => {\n\t\t\tif (tab.value === selectedTab.value) {\n\t\t\t\ttab.active = true\n\t\t\t\tactiveTabElement = tab\n\t\t\t\t// scroll to the tab\n\t\t\t\tif (this.mode === 'scroll') {\n\t\t\t\t\t// Scroll the desired element into view\n\t\t\t\t\tactiveTabElement.scrollIntoView({\n\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\tblock: 'start',\n\t\t\t\t\t\tinline: 'start',\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\ttab.active = false\n\t\t\t}\n\t\t})\n\t\tif (this.mode === 'tabs') {\n\t\t\tthis.activeTab = selectedTab.value\n\t\t}\n\t\tthis.dispatchEvent(new CustomEvent('tab-changed', { detail: this.activeTab }))\n\t}\n\n\tprotected render(): unknown {\n\t\tconst tabs = {\n\t\t\t'bg-surface-default color-surface-on': true,\n\t\t\t'flex z-50 overflow-auto': true,\n\t\t\t'sticky top-0 shadow-md': this.mode === 'scroll',\n\t\t\t'rounded-full': this.rounded,\n\t\t}\n\n\t\tconst activeTab = {\n\t\t\t'text-primary-default': true,\n\t\t}\n\n\t\tconst inactiveTab = {\n\t\t\t'border-transparent': true,\n\t\t\t'hover:text-surface-on': true,\n\t\t\t'hover:border-outlineVariant': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t}\n\n\t\treturn html`\n\t\t\t<section id=\"tabsNavigation\" class=\"${this.classMap(tabs)}\" aria-label=\"Tabs\">\n\t\t\t\t${repeat(\n\t\t\t\t\tthis.tabs,\n\t\t\t\t\ttab => tab.value,\n\t\t\t\t\ttab => html`\n\t\t\t\t\t\t<schmancy-button\n\t\t\t\t\t\t\t@click=${() => {\n\t\t\t\t\t\t\t\tthis.tabChanged({\n\t\t\t\t\t\t\t\t\tlabel: tab.label,\n\t\t\t\t\t\t\t\t\tvalue: tab.value,\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-current=\"page\"\n\t\t\t\t\t\t\tclass=\"h-auto relative\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"px-4 py-3 ${this.activeTab === tab.value\n\t\t\t\t\t\t\t\t\t? this.classMap(activeTab)\n\t\t\t\t\t\t\t\t\t: this.classMap(inactiveTab)}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<schmancy-typography class=\"h-full align-middle flex \" type=\"title\" token=\"md\" weight=\"medium\">\n\t\t\t\t\t\t\t\t\t${tab.label}\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t.hidden=${this.activeTab !== tab.value}\n\t\t\t\t\t\t\t\t\tclass=\"border-primary-default absolute bottom-0 inset-x-6  border-solid border-2 rounded-t-full\"\n\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</section>\n\t\t\t<section id=\"tabsContent\" class=\"h-full\">\n\t\t\t\t<slot @slotchange=${() => this.hydrateTabs()}></slot>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab-group': SchmancyTabGroup\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"tabs-DnG3K0bu.cjs","names":[],"sources":["../src/tabs/context.ts","../src/tabs/tab.ts","../src/tabs/tabs-group.ts"],"sourcesContent":["import { createContext } from '@lit/context'\n\nexport type TSchmancyTabsMode = 'scroll' | 'tabs'\n\nexport const SchmancyTabsModeContext = createContext<TSchmancyTabsMode>('tabs')\n","import { consume } from '@lit/context'\nimport { SchmancyElement } from '@mixins/index'\nimport { html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { SchmancyTabsModeContext } from './context'\n\n@customElement('schmancy-tab')\nexport default class SchmancyTab extends SchmancyElement {\n\t@property({ type: String, reflect: true }) label\n\t@property({ type: String, reflect: true }) value\n\t@property({ type: Boolean, reflect: true }) active!: boolean\n\n\t@consume({ context: SchmancyTabsModeContext, subscribe: true })\n\t@state()\n\tmode\n\n\tprotected updated(changedProperties: Map<PropertyKey, unknown>) {\n\t\tif (changedProperties.has('active') && this.active) {\n\t\t\t// Trigger resize for virtualizers to recalculate when tab becomes visible\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\twindow.dispatchEvent(new Event('resize'))\n\t\t\t})\n\t\t}\n\t}\n\n\tprotected render(): unknown {\n\t\t// Don't render content until tab is active (virtualizers need actual layout, not hidden)\n\t\tif (this.mode === 'tabs' && !this.active) {\n\t\t\treturn html``\n\t\t}\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab': SchmancyTab\n\t}\n}\n","import { provide } from '@lit/context'\nimport { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { filter, fromEvent, interval, map, take, throttleTime } from 'rxjs'\nimport { SchmancyTabsModeContext, TSchmancyTabsMode } from './context'\nimport SchmancyTab from './tab'\n\n/**\n * @slot - The content of the tab group\n * @fires tab-changed - The event fired when the tab is changed\n */\n@customElement('schmancy-tab-group')\nexport default class SchmancyTabGroup extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\theight: 100%;\n\t}\n`];\n\t@provide({ context: SchmancyTabsModeContext })\n\t@property({ type: String })\n\tmode: TSchmancyTabsMode = 'tabs'\n\n\t@property({ type: Boolean }) rounded = true\n\n\t@property({ type: String, reflect: true }) activeTab: string\n\t@queryAssignedElements({\n\t\tflatten: true,\n\t})\n\tprivate tabsElements!: Array<SchmancyTab>\n\n\t@query('#tabsNavigation') navElement!: HTMLElement\n\t@query('#tabsContent') tabsContent!: HTMLElement\n\n\t@state()\n\tprivate tabs: Array<SchmancyTab> = []\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tfromEvent(window, 'scroll')\n\t\t\t.pipe(\n\t\t\t\tthrottleTime(1000),\n\t\t\t\tfilter(() => this.mode === 'scroll'),\n\t\t\t\tmap(() => {\n\t\t\t\t\tlet closestDiv = null\n\t\t\t\t\tlet closestDistance = Infinity\n\t\t\t\t\tthis.tabsElements.forEach(div => {\n\t\t\t\t\t\tconst distance =\n\t\t\t\t\t\t\tdiv.getBoundingClientRect().top - this.navElement.clientHeight + document.body.offsetHeight / 3\n\n\t\t\t\t\t\tif (distance < closestDistance && distance > 0) {\n\t\t\t\t\t\t\tclosestDistance = distance\n\t\t\t\t\t\t\tclosestDiv = div\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\treturn closestDiv\n\t\t\t\t}),\n\t\t\t\tfilter((el: SchmancyTab | null) => el !== null),\n\t\t\t)\n\t\t\t.subscribe({\n\t\t\t\tnext: (el: SchmancyTab) => {\n\t\t\t\t\tthis.activeTab = el.value\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\tfirstUpdated() {\n\t\tinterval(0)\n\t\t\t.pipe(\n\t\t\t\tfilter(() => !!this.navElement.clientHeight),\n\t\t\t\ttake(1),\n\t\t\t)\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\t\tif (this.mode === 'scroll') tab.style.paddingTop = this.navElement.clientHeight + 'px'\n\t\t\t\t})\n\t\t\t})\n\t}\n\n\thydrateTabs() {\n\t\tthis.tabs = this.tabsElements\n\t\tif (!this.activeTab && this.tabsElements[0]) {\n\t\t\tthis.activeTab = this.tabsElements[0].value\n\t\t\tthis.tabsElements[0].active = true\n\t\t} else {\n\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\tif (tab.value === this.activeTab) tab.active = true\n\t\t\t\telse tab.active = false\n\t\t\t})\n\t\t}\n\t\tconst lastTab = this.tabs?.[-1]\n\t\tif (lastTab) {\n\t\t\tlastTab.style.paddingBottom = lastTab.offsetHeight + 'px'\n\t\t}\n\t}\n\n\ttabChanged(selectedTab: { label: string; value: string }) {\n\t\tlet activeTabElement: SchmancyTab | undefined\n\t\tthis.tabsElements.forEach(tab => {\n\t\t\tif (tab.value === selectedTab.value) {\n\t\t\t\ttab.active = true\n\t\t\t\tactiveTabElement = tab\n\t\t\t\t// scroll to the tab\n\t\t\t\tif (this.mode === 'scroll') {\n\t\t\t\t\t// Scroll the desired element into view\n\t\t\t\t\tactiveTabElement.scrollIntoView({\n\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\tblock: 'start',\n\t\t\t\t\t\tinline: 'start',\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\ttab.active = false\n\t\t\t}\n\t\t})\n\t\tif (this.mode === 'tabs') {\n\t\t\tthis.activeTab = selectedTab.value\n\t\t}\n\t\tthis.dispatchEvent(new CustomEvent('tab-changed', { detail: this.activeTab }))\n\t}\n\n\tprotected render(): unknown {\n\t\tconst tabs = {\n\t\t\t'bg-surface-default color-surface-on': true,\n\t\t\t'flex z-50 overflow-auto': true,\n\t\t\t'sticky top-0 shadow-md': this.mode === 'scroll',\n\t\t\t'rounded-full': this.rounded,\n\t\t}\n\n\t\tconst activeTab = {\n\t\t\t'text-primary-default': true,\n\t\t}\n\n\t\tconst inactiveTab = {\n\t\t\t'border-transparent': true,\n\t\t\t'hover:text-surface-on': true,\n\t\t\t'hover:border-outlineVariant': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t}\n\n\t\treturn html`\n\t\t\t<section id=\"tabsNavigation\" class=\"${this.classMap(tabs)}\" aria-label=\"Tabs\">\n\t\t\t\t${repeat(\n\t\t\t\t\tthis.tabs,\n\t\t\t\t\ttab => tab.value,\n\t\t\t\t\ttab => html`\n\t\t\t\t\t\t<schmancy-button\n\t\t\t\t\t\t\t@click=${() => {\n\t\t\t\t\t\t\t\tthis.tabChanged({\n\t\t\t\t\t\t\t\t\tlabel: tab.label,\n\t\t\t\t\t\t\t\t\tvalue: tab.value,\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-current=\"page\"\n\t\t\t\t\t\t\tclass=\"h-auto relative\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"px-4 py-3 ${this.activeTab === tab.value\n\t\t\t\t\t\t\t\t\t? this.classMap(activeTab)\n\t\t\t\t\t\t\t\t\t: this.classMap(inactiveTab)}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<schmancy-typography class=\"h-full align-middle flex \" type=\"title\" token=\"md\" weight=\"medium\">\n\t\t\t\t\t\t\t\t\t${tab.label}\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t.hidden=${this.activeTab !== tab.value}\n\t\t\t\t\t\t\t\t\tclass=\"border-primary-default absolute bottom-0 inset-x-6  border-solid border-2 rounded-t-full\"\n\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</section>\n\t\t\t<section id=\"tabsContent\" class=\"h-full\">\n\t\t\t\t<slot @slotchange=${() => this.hydrateTabs()}></slot>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab-group': SchmancyTabGroup\n\t}\n}\n"],"mappings":"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"}

package/dist/tabs.cjs

@@ -1 +1 @@
-require(`./tabs-CitVls3_.cjs`);
+require(`./tabs-DnG3K0bu.cjs`);

package/dist/tabs.js

@@ -1 +1 @@
-import "./tabs-CikPr7by.js";
+import "./tabs-81ADWQqa.js";

package/dist/teleport.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src-B2-CU8fu.cjs`);exports.HereMorty=e.n,Object.defineProperty(exports,`SchmancyTeleportation`,{enumerable:!0,get:function(){return e.t}}),exports.WhereAreYouRicky=e.r,exports.teleport=e.i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src-BbMJeLk9.cjs`);exports.HereMorty=e.n,Object.defineProperty(exports,`SchmancyTeleportation`,{enumerable:!0,get:function(){return e.t}}),exports.WhereAreYouRicky=e.r,exports.teleport=e.i;

package/dist/teleport.js

@@ -1,2 +1,2 @@
-import { i as e, n as t, r as n, t as r } from "./src-DvywUq7l.js";
+import { i as e, n as t, r as n, t as r } from "./src-DCu_mEk4.js";
 export { t as HereMorty, r as SchmancyTeleportation, n as WhereAreYouRicky, e as teleport };

package/dist/{textarea-DVkwQSis.js.map → textarea-3mWewuAf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"textarea-DVkwQSis.js","names":[],"sources":["../src/form/fields/textarea/textarea.scss?inline","../src/form/fields/textarea/textarea.ts"],"sourcesContent":[":host {\n\tborder: unset !important;\n\tline-height: unset !important;\n\tbackground: unset !important;\n\tpadding: unset !important;\n\tfont-size: unset !important;\n\tbox-shadow: unset !important;\n\twidth: -webkit-fill-available;\n\tdisplay: block;\n}\n\n:host([fillHeight]) {\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n:host:focus {\n\tbox-shadow: unset !important;\n}\n\ntextarea:focus-visible {\n\toutline: none !important;\n}\n\ntextarea {\n\t/* Inherit typographic styles */\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tfont-weight: inherit;\n\tline-height: inherit;\n\tcolor: inherit;\n\tletter-spacing: inherit;\n\ttext-transform: inherit;\n\ttext-decoration: inherit;\n\ttext-indent: inherit;\n\ttext-shadow: inherit;\n\ttext-overflow: inherit;\n\ttext-rendering: inherit;\n\ttext-size-adjust: inherit;\n\ttext-align-last: inherit;\n\toverflow-y: auto; /* Ensure content is scrollable if it exceeds the visible area */\n}\n\n@keyframes onAutoFillStart {\n\tfrom {\n\t}\n\tto {\n\t}\n}\n\ntextarea:-webkit-autofill {\n\tanimation-name: onAutoFillStart;\n}\n","import { LitElement, html, nothing, unsafeCSS, type PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { when } from 'lit/directives/when.js'\nimport { distinctUntilChanged, filter, fromEvent, map, takeUntil, timer } from 'rxjs'\nimport style from './textarea.scss?inline'\nimport { SchmancyFormField } from '@mixins/index'\n\n/**\n * Textarea component with auto-resize and form integration.\n *\n * @prop {string} name - Name attribute for form submission\n * @prop {string} value - Current value of the textarea\n * @prop {string} placeholder - Placeholder text\n * @prop {boolean} required - Whether the field is required\n * @prop {boolean} disabled - Whether the field is disabled\n * @prop {boolean} readonly - Whether the field is read-only\n * @prop {number} rows - Number of visible text rows\n * @prop {number} maxlength - Maximum character length\n */\n@customElement('schmancy-textarea')\nexport default class SchmancyTextarea extends SchmancyFormField(unsafeCSS(style)) {\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\t// `formAssociated`, `internals`, `name`, `label`, `required`, `disabled`,\n\t// `error`, `validationMessage`, `hint`, `id`, `validateOn`, `touched`,\n\t// `dirty`, `submitted`, `markTouched`, `markSubmitted`, `setCustomValidity`,\n\t// `formResetCallback`, `formDisabledCallback` — all from the mixin.\n\ttextareaRef = createRef<HTMLTextAreaElement>()\n\n\tprivate readonly _a11yId = `schmancy-textarea-${Math.random().toString(36).slice(2, 10)}`\n\n\t/**\n\t * The placeholder of the control.\n\t * @attr placeholder\n\t * @type {string}\n\t * @default ''\n\t * @public\n\t */\n\t@property() placeholder = ''\n\n\t/**\n\t * The value of the control. Narrowed from the mixin's wide union to the\n\t * textarea-specific `string` type.\n\t * @attr {string} value - The value of the control.\n\t */\n\t@property({ type: String, reflect: true }) override value: string = ''\n\n\t/**\n\t * The minlength attribute of the control.\n\t * @attr\n\t */\n\t@property({ type: Number })\n\tpublic minlength: number | undefined\n\n\t/**\n\t * The maxlength attribute of the control.\n\t * @attr\n\t */\n\t@property({ type: Number })\n\tpublic maxlength!: number\n\n\t/**\n\t * The number of columns (width) of the control.\n\t * @attr cols\n\t * @type {number}\n\t * @default 20\n\t * @public\n\t */\n\t@property({ type: Number }) cols = 20\n\n\t/**\n\t * The number of rows (height) of the control.\n\t * When not set, the textarea auto-sizes to fit its content via field-sizing: content.\n\t * @attr rows\n\t * @type {number}\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ type: Number }) rows: number | undefined\n\n\t/**\n\t * Makes the textarea fill the height of its container.\n\t * @attr fillHeight\n\t * @type {boolean}\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean, reflect: true }) fillHeight = false\n\n\t/**\n\t * Automatically adjusts height based on content.\n\t * @attr autoHeight\n\t * @type {boolean}\n\t * @default true\n\t * @public\n\t */\n\t@property({ type: Boolean }) autoHeight = true\n\n\t/**\n\t * Controls whether the textarea can be resized by the user.\n\t * @attr resize\n\t * @type {'none' | 'vertical' | 'horizontal' | 'both'}\n\t * @default 'vertical'\n\t * @public\n\t */\n\t@property({ type: String, reflect: true }) resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical'\n\n\t/**\n\t * Specifies how the text in a text area is to be wrapped when submitted in a form.\n\t * @attr wrap\n\t * @type {'hard' | 'soft'}\n\t * @default 'soft'\n\t * @public\n\t */\n\t@property({ type: String }) wrap: 'hard' | 'soft' = 'soft'\n\n\t/**\n\t * The dirname attribute of the control.\n\t * @attr dirname\n\t * @type {string}\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ type: String }) dirname: string | undefined\n\n\t// `required`, `disabled`, `readonly`, `error`, `validationMessage`, `hint`\n\t// come from the mixin. Textarea-specific extras only:\n\t@property({ type: Boolean, reflect: true }) spellcheck = false\n\n\t@property({ type: String, reflect: true }) align: 'left' | 'center' | 'right' = 'left'\n\n\t/**\n\t * The autofocus attribute of the control.\n\t */\n\t@property({ type: Boolean })\n\tpublic override autofocus!: boolean\n\n\t@property({ type: Number })\n\tpublic override tabIndex = 0\n\n\t@query('textarea') textareaElement!: HTMLTextAreaElement\n\n\t// Mixin's willUpdate already calls internals.setFormValue() on value-change\n\t// and runs the required-empty / customError validity machinery. Native\n\t// `valueMissing` flag is set here for richer ValidityState introspection.\n\toverride willUpdate(changed: PropertyValues): void {\n\t\tsuper.willUpdate(changed)\n\t\tif (changed.has('required') || changed.has('value')) {\n\t\t\tif (this.required && !this.value) {\n\t\t\t\tthis.internals?.setValidity({ valueMissing: true }, 'Please fill out this field.')\n\t\t\t}\n\t\t}\n\t}\n\n\tfirstUpdated() {\n\t\tif (this.autofocus) {\n\t\t\tthis.focus()\n\t\t}\n\t\tif (this.autoHeight) {\n\t\t\t// Initial adjustment for pre-filled content (cancel-on-disconnect).\n\t\t\ttimer(0)\n\t\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t\t.subscribe(() => this.adjustHeight())\n\t\t}\n\t\tfromEvent(this.textareaElement, 'input')\n\t\t\t.pipe(\n\t\t\t\tmap(event => (event.target as HTMLTextAreaElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tif (this.autoHeight) {\n\t\t\t\t\tthis.adjustHeight()\n\t\t\t\t}\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\t\tfromEvent(this.textareaElement, 'change')\n\t\t\t.pipe(\n\t\t\t\tmap(event => (event.target as HTMLTextAreaElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tif (this.autoHeight) {\n\t\t\t\t\tthis.adjustHeight()\n\t\t\t\t}\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\t\t// emit on enter\n\t\tfromEvent<KeyboardEvent>(this.textareaElement, 'keyup')\n\t\t\t.pipe(\n\t\t\t\tfilter(event => event.key === 'Enter'),\n\t\t\t\tmap(event => (event.target as HTMLTextAreaElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('enter', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\t}\n\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\t/** Checks for validity of the control and shows the browser message if it's invalid. */\n\tpublic reportValidity() {\n\t\treturn this.textareaRef.value?.reportValidity()\n\t}\n\n\t/** Checks for validity of the control and emits the invalid event if it invalid. */\n\tpublic checkValidity() {\n\t\treturn this.textareaRef.value?.checkValidity()\n\t}\n\n\t/** Sets a custom validity message. */\n\tpublic setCustomValidity(message: string) {\n\t\treturn this.textareaRef.value?.setCustomValidity(message)\n\t}\n\n\t/** Selects all text within the textarea. */\n\tpublic select() {\n\t\treturn this.textareaRef.value?.select()\n\t}\n\n\t/** Sets the selection range. */\n\tpublic setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none') {\n\t\tthis.textareaRef.value?.setSelectionRange(start, end, direction)\n\t}\n\n\t/** Returns the selected text within the textarea. */\n\tpublic get selectionStart(): number | null {\n\t\treturn this.textareaRef.value?.selectionStart ?? null\n\t}\n\n\tpublic get selectionEnd(): number | null {\n\t\treturn this.textareaRef.value?.selectionEnd ?? null\n\t}\n\n\tpublic get selectionDirection(): 'forward' | 'backward' | 'none' | null {\n\t\treturn this.textareaRef.value?.selectionDirection ?? null\n\t}\n\n\t/** Sets the range of text to be selected. */\n\tpublic setRangeText(replacement: string) {\n\t\tthis.textareaRef.value?.setRangeText(replacement)\n\t}\n\n\t/** Adjusts the height of the textarea based on its content. */\n\tpublic adjustHeight() {\n\t\tconst textarea = this.textareaRef.value\n\t\tif (textarea) {\n\t\t\t// Only grow, never shrink\n\t\t\tconst currentHeight = textarea.offsetHeight\n\t\t\tconst scrollHeight = textarea.scrollHeight\n\t\t\tif (scrollHeight > currentHeight) {\n\t\t\t\ttextarea.style.height = scrollHeight + 'px'\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic validity(): ValidityState | undefined {\n\t\treturn this.textareaRef.value?.validity\n\t}\n\n\tpublic override focus(\n\t\toptions: FocusOptions = {\n\t\t\tpreventScroll: true,\n\t\t},\n\t) {\n\t\tthis.textareaRef.value?.focus(options)\n\t\tthis.dispatchEvent(new Event('focus'))\n\t}\n\n\tpublic override click() {\n\t\tthis.textareaRef.value?.click()\n\t\tthis.dispatchEvent(new Event('click'))\n\t}\n\n\tpublic override blur() {\n\t\tthis.textareaRef.value?.blur()\n\t\tthis.dispatchEvent(new Event('blur'))\n\t}\n\n\tprotected render(): unknown {\n\t\tconst textareaClasses = {\n\t\t\t// Base styles - matching input component\n\t\t\t'block w-full min-w-0 rounded-2xl border bg-surface-containerLowest text-surface-on': true,\n\t\t\t// Border color\n\t\t\t'border-outline': !this.error,\n\t\t\t'border-error-default': this.error,\n\t\t\t// Focus styles\n\t\t\t'outline-secondary-default focus:outline-1 focus:border-secondary-default': true,\n\t\t\t// Disabled styles\n\t\t\t'disabled:opacity-40 disabled:cursor-not-allowed': true,\n\t\t\t// Placeholder\n\t\t\t'placeholder:text-muted': true,\n\t\t\t// Ring styles (subtle focus ring)\n\t\t\t'ring-0 focus:ring-1 focus:ring-inset': true,\n\t\t\t'focus:ring-secondary-default': !this.error,\n\t\t\t'focus:ring-error-default': this.error,\n\t\t\t// Readonly styles\n\t\t\t'caret-transparent focus:outline-hidden cursor-pointer select-none': this.readonly,\n\t\t\t// Text alignment\n\t\t\t'text-left': this.align === 'left',\n\t\t\t'text-center': this.align === 'center',\n\t\t\t'text-right': this.align === 'right',\n\t\t\t// Textarea specific\n\t\t\t'h-full': this.fillHeight,\n\t\t\t'resize-none': this.resize === 'none',\n\t\t\t'resize-y': this.resize === 'vertical',\n\t\t\t'resize-x': this.resize === 'horizontal',\n\t\t\t'resize': this.resize === 'both',\n\t\t\t// Padding matching input\n\t\t\t'px-4 py-3': true,\n\t\t}\n\t\tconst fieldSizing = this.rows == null ? 'field-sizing: content;' : ''\n\t\tconst labelClasses = {\n\t\t\t'block mb-1 font-medium text-sm': true,\n\t\t\t'opacity-40': this.disabled,\n\t\t\t'text-primary-default': !this.error,\n\t\t\t'text-error-default': this.error,\n\t\t}\n\t\tconst containerClasses = {\n\t\t\t'w-full min-w-0': true,\n\t\t\t'flex flex-col h-full': this.fillHeight,\n\t\t}\n\t\tconst hintId = `${this._a11yId}-hint`\n\t\treturn html`\n\t\t<div class=\"${this.classMap(containerClasses)}\">\n\t\t\t${when(\n\t\t\t\tthis.label,\n\t\t\t\t() => html`\n\t\t\t\t\t<label class=\"${this.classMap(labelClasses)}\" for=${this.id}>\n\t\t\t\t\t\t${this.label}\n\t\t\t\t\t</label>\n\t\t\t\t`,\n\t\t\t)}\n\n\t\t\t<textarea\n\t\t\t\t${ref(this.textareaRef)}\n\t\t\t\t.value=${this.value}\n\t\t\t\t.id=${this.id}\n\t\t\t\t.name=${this.name}\n\t\t\t\t.placeholder=${this.placeholder}\n\t\t\t\t.required=${this.required}\n\t\t\t\tclass=${this.classMap(textareaClasses)}\n\t\t\t\tstyle=${fieldSizing}\n\t\t\t\t.disabled=${this.disabled}\n\t\t\t\tminlength=${ifDefined(this.minlength)}\n\t\t\t\tmaxlength=${ifDefined(this.maxlength)}\n\t\t\t\t.readonly=${this.readonly}\n\t\t\t\t.spellcheck=${this.spellcheck}\n\t\t\t\tcols=${ifDefined(this.cols)}\n\t\t\t\trows=${ifDefined(this.rows)}\n\t\t\t\twrap=${ifDefined(this.wrap)}\n\t\t\t\tdirname=${ifDefined(this.dirname)}\n\t\t\t\taria-invalid=${this.error ? 'true' : 'false'}\n\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\taria-describedby=${this.hint || (this.error && this.validationMessage) ? hintId : nothing}\n\t\t\t\taria-label=${!this.label && this.placeholder ? this.placeholder : nothing}\n\t\t\t></textarea>\n\n\t\t\t${when(\n\t\t\t\tthis.hint || (this.error && this.validationMessage),\n\t\t\t\t() => html`\n\t\t\t\t\t<div\n\t\t\t\t\t\tid=${hintId}\n\t\t\t\t\t\tclass=\"mt-1 text-sm ${this.error ? 'text-error-default' : 'text-surface-onVariant'}\"\n\t\t\t\t\t\trole=${ifDefined(this.error ? 'alert' : undefined)}\n\t\t\t\t\t>\n\t\t\t\t\t\t${this.error && this.validationMessage ? this.validationMessage : this.hint}\n\t\t\t\t\t</div>\n\t\t\t\t`,\n\t\t\t)}\n\t\t</div>\n\t\t`\n\t}\n}\n\ntype EventDetails = {\n\tvalue: string\n}\n\nexport type SchmancyTextareaChangeEvent = CustomEvent<EventDetails>\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-textarea': SchmancyTextarea\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"textarea-3mWewuAf.js","names":[],"sources":["../src/form/fields/textarea/textarea.scss?inline","../src/form/fields/textarea/textarea.ts"],"sourcesContent":[":host {\n\tborder: unset !important;\n\tline-height: unset !important;\n\tbackground: unset !important;\n\tpadding: unset !important;\n\tfont-size: unset !important;\n\tbox-shadow: unset !important;\n\twidth: -webkit-fill-available;\n\tdisplay: block;\n}\n\n:host([fillHeight]) {\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n:host:focus {\n\tbox-shadow: unset !important;\n}\n\ntextarea:focus-visible {\n\toutline: none !important;\n}\n\ntextarea {\n\t/* Inherit typographic styles */\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tfont-weight: inherit;\n\tline-height: inherit;\n\tcolor: inherit;\n\tletter-spacing: inherit;\n\ttext-transform: inherit;\n\ttext-decoration: inherit;\n\ttext-indent: inherit;\n\ttext-shadow: inherit;\n\ttext-overflow: inherit;\n\ttext-rendering: inherit;\n\ttext-size-adjust: inherit;\n\ttext-align-last: inherit;\n\toverflow-y: auto; /* Ensure content is scrollable if it exceeds the visible area */\n}\n\n@keyframes onAutoFillStart {\n\tfrom {\n\t}\n\tto {\n\t}\n}\n\ntextarea:-webkit-autofill {\n\tanimation-name: onAutoFillStart;\n}\n","import { LitElement, html, nothing, unsafeCSS, type PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { when } from 'lit/directives/when.js'\nimport { distinctUntilChanged, filter, fromEvent, map, takeUntil, timer } from 'rxjs'\nimport style from './textarea.scss?inline'\nimport { SchmancyFormField } from '@mixins/index'\n\n/**\n * Textarea component with auto-resize and form integration.\n *\n * @prop {string} name - Name attribute for form submission\n * @prop {string} value - Current value of the textarea\n * @prop {string} placeholder - Placeholder text\n * @prop {boolean} required - Whether the field is required\n * @prop {boolean} disabled - Whether the field is disabled\n * @prop {boolean} readonly - Whether the field is read-only\n * @prop {number} rows - Number of visible text rows\n * @prop {number} maxlength - Maximum character length\n */\n@customElement('schmancy-textarea')\nexport default class SchmancyTextarea extends SchmancyFormField(unsafeCSS(style)) {\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\t// `formAssociated`, `internals`, `name`, `label`, `required`, `disabled`,\n\t// `error`, `validationMessage`, `hint`, `id`, `validateOn`, `touched`,\n\t// `dirty`, `submitted`, `markTouched`, `markSubmitted`, `setCustomValidity`,\n\t// `formResetCallback`, `formDisabledCallback` — all from the mixin.\n\ttextareaRef = createRef<HTMLTextAreaElement>()\n\n\tprivate readonly _a11yId = `schmancy-textarea-${Math.random().toString(36).slice(2, 10)}`\n\n\t/**\n\t * The placeholder of the control.\n\t * @attr placeholder\n\t * @type {string}\n\t * @default ''\n\t * @public\n\t */\n\t@property() placeholder = ''\n\n\t/**\n\t * The value of the control. Narrowed from the mixin's wide union to the\n\t * textarea-specific `string` type.\n\t * @attr {string} value - The value of the control.\n\t */\n\t@property({ type: String, reflect: true }) override value: string = ''\n\n\t/**\n\t * The minlength attribute of the control.\n\t * @attr\n\t */\n\t@property({ type: Number })\n\tpublic minlength: number | undefined\n\n\t/**\n\t * The maxlength attribute of the control.\n\t * @attr\n\t */\n\t@property({ type: Number })\n\tpublic maxlength!: number\n\n\t/**\n\t * The number of columns (width) of the control.\n\t * @attr cols\n\t * @type {number}\n\t * @default 20\n\t * @public\n\t */\n\t@property({ type: Number }) cols = 20\n\n\t/**\n\t * The number of rows (height) of the control.\n\t * When not set, the textarea auto-sizes to fit its content via field-sizing: content.\n\t * @attr rows\n\t * @type {number}\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ type: Number }) rows: number | undefined\n\n\t/**\n\t * Makes the textarea fill the height of its container.\n\t * @attr fillHeight\n\t * @type {boolean}\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean, reflect: true }) fillHeight = false\n\n\t/**\n\t * Automatically adjusts height based on content.\n\t * @attr autoHeight\n\t * @type {boolean}\n\t * @default true\n\t * @public\n\t */\n\t@property({ type: Boolean }) autoHeight = true\n\n\t/**\n\t * Controls whether the textarea can be resized by the user.\n\t * @attr resize\n\t * @type {'none' | 'vertical' | 'horizontal' | 'both'}\n\t * @default 'vertical'\n\t * @public\n\t */\n\t@property({ type: String, reflect: true }) resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical'\n\n\t/**\n\t * Specifies how the text in a text area is to be wrapped when submitted in a form.\n\t * @attr wrap\n\t * @type {'hard' | 'soft'}\n\t * @default 'soft'\n\t * @public\n\t */\n\t@property({ type: String }) wrap: 'hard' | 'soft' = 'soft'\n\n\t/**\n\t * The dirname attribute of the control.\n\t * @attr dirname\n\t * @type {string}\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ type: String }) dirname: string | undefined\n\n\t// `required`, `disabled`, `readonly`, `error`, `validationMessage`, `hint`\n\t// come from the mixin. Textarea-specific extras only:\n\t@property({ type: Boolean, reflect: true }) spellcheck = false\n\n\t@property({ type: String, reflect: true }) align: 'left' | 'center' | 'right' = 'left'\n\n\t/**\n\t * The autofocus attribute of the control.\n\t */\n\t@property({ type: Boolean })\n\tpublic override autofocus!: boolean\n\n\t@property({ type: Number })\n\tpublic override tabIndex = 0\n\n\t@query('textarea') textareaElement!: HTMLTextAreaElement\n\n\t// Mixin's willUpdate already calls internals.setFormValue() on value-change\n\t// and runs the required-empty / customError validity machinery. Native\n\t// `valueMissing` flag is set here for richer ValidityState introspection.\n\toverride willUpdate(changed: PropertyValues): void {\n\t\tsuper.willUpdate(changed)\n\t\tif (changed.has('required') || changed.has('value')) {\n\t\t\tif (this.required && !this.value) {\n\t\t\t\tthis.internals?.setValidity({ valueMissing: true }, 'Please fill out this field.')\n\t\t\t}\n\t\t}\n\t}\n\n\tfirstUpdated() {\n\t\tif (this.autofocus) {\n\t\t\tthis.focus()\n\t\t}\n\t\tif (this.autoHeight) {\n\t\t\t// Initial adjustment for pre-filled content (cancel-on-disconnect).\n\t\t\ttimer(0)\n\t\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t\t.subscribe(() => this.adjustHeight())\n\t\t}\n\t\tfromEvent(this.textareaElement, 'input')\n\t\t\t.pipe(\n\t\t\t\tmap(event => (event.target as HTMLTextAreaElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tif (this.autoHeight) {\n\t\t\t\t\tthis.adjustHeight()\n\t\t\t\t}\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\t\tfromEvent(this.textareaElement, 'change')\n\t\t\t.pipe(\n\t\t\t\tmap(event => (event.target as HTMLTextAreaElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tif (this.autoHeight) {\n\t\t\t\t\tthis.adjustHeight()\n\t\t\t\t}\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\t\t// emit on enter\n\t\tfromEvent<KeyboardEvent>(this.textareaElement, 'keyup')\n\t\t\t.pipe(\n\t\t\t\tfilter(event => event.key === 'Enter'),\n\t\t\t\tmap(event => (event.target as HTMLTextAreaElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('enter', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\t}\n\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\t/** Checks for validity of the control and shows the browser message if it's invalid. */\n\tpublic reportValidity() {\n\t\treturn this.textareaRef.value?.reportValidity()\n\t}\n\n\t/** Checks for validity of the control and emits the invalid event if it invalid. */\n\tpublic checkValidity() {\n\t\treturn this.textareaRef.value?.checkValidity()\n\t}\n\n\t/** Sets a custom validity message. */\n\tpublic setCustomValidity(message: string) {\n\t\treturn this.textareaRef.value?.setCustomValidity(message)\n\t}\n\n\t/** Selects all text within the textarea. */\n\tpublic select() {\n\t\treturn this.textareaRef.value?.select()\n\t}\n\n\t/** Sets the selection range. */\n\tpublic setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none') {\n\t\tthis.textareaRef.value?.setSelectionRange(start, end, direction)\n\t}\n\n\t/** Returns the selected text within the textarea. */\n\tpublic get selectionStart(): number | null {\n\t\treturn this.textareaRef.value?.selectionStart ?? null\n\t}\n\n\tpublic get selectionEnd(): number | null {\n\t\treturn this.textareaRef.value?.selectionEnd ?? null\n\t}\n\n\tpublic get selectionDirection(): 'forward' | 'backward' | 'none' | null {\n\t\treturn this.textareaRef.value?.selectionDirection ?? null\n\t}\n\n\t/** Sets the range of text to be selected. */\n\tpublic setRangeText(replacement: string) {\n\t\tthis.textareaRef.value?.setRangeText(replacement)\n\t}\n\n\t/** Adjusts the height of the textarea based on its content. */\n\tpublic adjustHeight() {\n\t\tconst textarea = this.textareaRef.value\n\t\tif (textarea) {\n\t\t\t// Only grow, never shrink\n\t\t\tconst currentHeight = textarea.offsetHeight\n\t\t\tconst scrollHeight = textarea.scrollHeight\n\t\t\tif (scrollHeight > currentHeight) {\n\t\t\t\ttextarea.style.height = scrollHeight + 'px'\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic validity(): ValidityState | undefined {\n\t\treturn this.textareaRef.value?.validity\n\t}\n\n\tpublic override focus(\n\t\toptions: FocusOptions = {\n\t\t\tpreventScroll: true,\n\t\t},\n\t) {\n\t\tthis.textareaRef.value?.focus(options)\n\t\tthis.dispatchEvent(new Event('focus'))\n\t}\n\n\tpublic override click() {\n\t\tthis.textareaRef.value?.click()\n\t\tthis.dispatchEvent(new Event('click'))\n\t}\n\n\tpublic override blur() {\n\t\tthis.textareaRef.value?.blur()\n\t\tthis.dispatchEvent(new Event('blur'))\n\t}\n\n\tprotected render(): unknown {\n\t\tconst textareaClasses = {\n\t\t\t// Base styles - matching input component\n\t\t\t'block w-full min-w-0 rounded-2xl border bg-surface-containerLowest text-surface-on': true,\n\t\t\t// Border color\n\t\t\t'border-outline': !this.error,\n\t\t\t'border-error-default': this.error,\n\t\t\t// Focus styles\n\t\t\t'outline-secondary-default focus:outline-1 focus:border-secondary-default': true,\n\t\t\t// Disabled styles\n\t\t\t'disabled:opacity-40 disabled:cursor-not-allowed': true,\n\t\t\t// Placeholder\n\t\t\t'placeholder:text-muted': true,\n\t\t\t// Ring styles (subtle focus ring)\n\t\t\t'ring-0 focus:ring-1 focus:ring-inset': true,\n\t\t\t'focus:ring-secondary-default': !this.error,\n\t\t\t'focus:ring-error-default': this.error,\n\t\t\t// Readonly styles\n\t\t\t'caret-transparent focus:outline-hidden cursor-pointer select-none': this.readonly,\n\t\t\t// Text alignment\n\t\t\t'text-left': this.align === 'left',\n\t\t\t'text-center': this.align === 'center',\n\t\t\t'text-right': this.align === 'right',\n\t\t\t// Textarea specific\n\t\t\t'h-full': this.fillHeight,\n\t\t\t'resize-none': this.resize === 'none',\n\t\t\t'resize-y': this.resize === 'vertical',\n\t\t\t'resize-x': this.resize === 'horizontal',\n\t\t\t'resize': this.resize === 'both',\n\t\t\t// Padding matching input\n\t\t\t'px-4 py-3': true,\n\t\t}\n\t\tconst fieldSizing = this.rows == null ? 'field-sizing: content;' : ''\n\t\tconst labelClasses = {\n\t\t\t'block mb-1 font-medium text-sm': true,\n\t\t\t'opacity-40': this.disabled,\n\t\t\t'text-primary-default': !this.error,\n\t\t\t'text-error-default': this.error,\n\t\t}\n\t\tconst containerClasses = {\n\t\t\t'w-full min-w-0': true,\n\t\t\t'flex flex-col h-full': this.fillHeight,\n\t\t}\n\t\tconst hintId = `${this._a11yId}-hint`\n\t\treturn html`\n\t\t<div class=\"${this.classMap(containerClasses)}\">\n\t\t\t${when(\n\t\t\t\tthis.label,\n\t\t\t\t() => html`\n\t\t\t\t\t<label class=\"${this.classMap(labelClasses)}\" for=${this.id}>\n\t\t\t\t\t\t${this.label}\n\t\t\t\t\t</label>\n\t\t\t\t`,\n\t\t\t)}\n\n\t\t\t<textarea\n\t\t\t\t${ref(this.textareaRef)}\n\t\t\t\t.value=${this.value}\n\t\t\t\t.id=${this.id}\n\t\t\t\t.name=${this.name}\n\t\t\t\t.placeholder=${this.placeholder}\n\t\t\t\t.required=${this.required}\n\t\t\t\tclass=${this.classMap(textareaClasses)}\n\t\t\t\tstyle=${fieldSizing}\n\t\t\t\t.disabled=${this.disabled}\n\t\t\t\tminlength=${ifDefined(this.minlength)}\n\t\t\t\tmaxlength=${ifDefined(this.maxlength)}\n\t\t\t\t.readonly=${this.readonly}\n\t\t\t\t.spellcheck=${this.spellcheck}\n\t\t\t\tcols=${ifDefined(this.cols)}\n\t\t\t\trows=${ifDefined(this.rows)}\n\t\t\t\twrap=${ifDefined(this.wrap)}\n\t\t\t\tdirname=${ifDefined(this.dirname)}\n\t\t\t\taria-invalid=${this.error ? 'true' : 'false'}\n\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\taria-describedby=${this.hint || (this.error && this.validationMessage) ? hintId : nothing}\n\t\t\t\taria-label=${!this.label && this.placeholder ? this.placeholder : nothing}\n\t\t\t></textarea>\n\n\t\t\t${when(\n\t\t\t\tthis.hint || (this.error && this.validationMessage),\n\t\t\t\t() => html`\n\t\t\t\t\t<div\n\t\t\t\t\t\tid=${hintId}\n\t\t\t\t\t\tclass=\"mt-1 text-sm ${this.error ? 'text-error-default' : 'text-surface-onVariant'}\"\n\t\t\t\t\t\trole=${ifDefined(this.error ? 'alert' : undefined)}\n\t\t\t\t\t>\n\t\t\t\t\t\t${this.error && this.validationMessage ? this.validationMessage : this.hint}\n\t\t\t\t\t</div>\n\t\t\t\t`,\n\t\t\t)}\n\t\t</div>\n\t\t`\n\t}\n}\n\ntype EventDetails = {\n\tvalue: string\n}\n\nexport type SchmancyTextareaChangeEvent = CustomEvent<EventDetails>\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-textarea': SchmancyTextarea\n\t}\n}\n"],"mappings":"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"}

package/dist/{textarea-CqV1wvmB.cjs.map → textarea-BenjiTXB.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"textarea-CqV1wvmB.cjs","names":[],"sources":["../src/form/fields/textarea/textarea.scss?inline","../src/form/fields/textarea/textarea.ts"],"sourcesContent":[":host {\n\tborder: unset !important;\n\tline-height: unset !important;\n\tbackground: unset !important;\n\tpadding: unset !important;\n\tfont-size: unset !important;\n\tbox-shadow: unset !important;\n\twidth: -webkit-fill-available;\n\tdisplay: block;\n}\n\n:host([fillHeight]) {\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n:host:focus {\n\tbox-shadow: unset !important;\n}\n\ntextarea:focus-visible {\n\toutline: none !important;\n}\n\ntextarea {\n\t/* Inherit typographic styles */\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tfont-weight: inherit;\n\tline-height: inherit;\n\tcolor: inherit;\n\tletter-spacing: inherit;\n\ttext-transform: inherit;\n\ttext-decoration: inherit;\n\ttext-indent: inherit;\n\ttext-shadow: inherit;\n\ttext-overflow: inherit;\n\ttext-rendering: inherit;\n\ttext-size-adjust: inherit;\n\ttext-align-last: inherit;\n\toverflow-y: auto; /* Ensure content is scrollable if it exceeds the visible area */\n}\n\n@keyframes onAutoFillStart {\n\tfrom {\n\t}\n\tto {\n\t}\n}\n\ntextarea:-webkit-autofill {\n\tanimation-name: onAutoFillStart;\n}\n","import { LitElement, html, nothing, unsafeCSS, type PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { when } from 'lit/directives/when.js'\nimport { distinctUntilChanged, filter, fromEvent, map, takeUntil, timer } from 'rxjs'\nimport style from './textarea.scss?inline'\nimport { SchmancyFormField } from '@mixins/index'\n\n/**\n * Textarea component with auto-resize and form integration.\n *\n * @prop {string} name - Name attribute for form submission\n * @prop {string} value - Current value of the textarea\n * @prop {string} placeholder - Placeholder text\n * @prop {boolean} required - Whether the field is required\n * @prop {boolean} disabled - Whether the field is disabled\n * @prop {boolean} readonly - Whether the field is read-only\n * @prop {number} rows - Number of visible text rows\n * @prop {number} maxlength - Maximum character length\n */\n@customElement('schmancy-textarea')\nexport default class SchmancyTextarea extends SchmancyFormField(unsafeCSS(style)) {\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\t// `formAssociated`, `internals`, `name`, `label`, `required`, `disabled`,\n\t// `error`, `validationMessage`, `hint`, `id`, `validateOn`, `touched`,\n\t// `dirty`, `submitted`, `markTouched`, `markSubmitted`, `setCustomValidity`,\n\t// `formResetCallback`, `formDisabledCallback` — all from the mixin.\n\ttextareaRef = createRef<HTMLTextAreaElement>()\n\n\tprivate readonly _a11yId = `schmancy-textarea-${Math.random().toString(36).slice(2, 10)}`\n\n\t/**\n\t * The placeholder of the control.\n\t * @attr placeholder\n\t * @type {string}\n\t * @default ''\n\t * @public\n\t */\n\t@property() placeholder = ''\n\n\t/**\n\t * The value of the control. Narrowed from the mixin's wide union to the\n\t * textarea-specific `string` type.\n\t * @attr {string} value - The value of the control.\n\t */\n\t@property({ type: String, reflect: true }) override value: string = ''\n\n\t/**\n\t * The minlength attribute of the control.\n\t * @attr\n\t */\n\t@property({ type: Number })\n\tpublic minlength: number | undefined\n\n\t/**\n\t * The maxlength attribute of the control.\n\t * @attr\n\t */\n\t@property({ type: Number })\n\tpublic maxlength!: number\n\n\t/**\n\t * The number of columns (width) of the control.\n\t * @attr cols\n\t * @type {number}\n\t * @default 20\n\t * @public\n\t */\n\t@property({ type: Number }) cols = 20\n\n\t/**\n\t * The number of rows (height) of the control.\n\t * When not set, the textarea auto-sizes to fit its content via field-sizing: content.\n\t * @attr rows\n\t * @type {number}\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ type: Number }) rows: number | undefined\n\n\t/**\n\t * Makes the textarea fill the height of its container.\n\t * @attr fillHeight\n\t * @type {boolean}\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean, reflect: true }) fillHeight = false\n\n\t/**\n\t * Automatically adjusts height based on content.\n\t * @attr autoHeight\n\t * @type {boolean}\n\t * @default true\n\t * @public\n\t */\n\t@property({ type: Boolean }) autoHeight = true\n\n\t/**\n\t * Controls whether the textarea can be resized by the user.\n\t * @attr resize\n\t * @type {'none' | 'vertical' | 'horizontal' | 'both'}\n\t * @default 'vertical'\n\t * @public\n\t */\n\t@property({ type: String, reflect: true }) resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical'\n\n\t/**\n\t * Specifies how the text in a text area is to be wrapped when submitted in a form.\n\t * @attr wrap\n\t * @type {'hard' | 'soft'}\n\t * @default 'soft'\n\t * @public\n\t */\n\t@property({ type: String }) wrap: 'hard' | 'soft' = 'soft'\n\n\t/**\n\t * The dirname attribute of the control.\n\t * @attr dirname\n\t * @type {string}\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ type: String }) dirname: string | undefined\n\n\t// `required`, `disabled`, `readonly`, `error`, `validationMessage`, `hint`\n\t// come from the mixin. Textarea-specific extras only:\n\t@property({ type: Boolean, reflect: true }) spellcheck = false\n\n\t@property({ type: String, reflect: true }) align: 'left' | 'center' | 'right' = 'left'\n\n\t/**\n\t * The autofocus attribute of the control.\n\t */\n\t@property({ type: Boolean })\n\tpublic override autofocus!: boolean\n\n\t@property({ type: Number })\n\tpublic override tabIndex = 0\n\n\t@query('textarea') textareaElement!: HTMLTextAreaElement\n\n\t// Mixin's willUpdate already calls internals.setFormValue() on value-change\n\t// and runs the required-empty / customError validity machinery. Native\n\t// `valueMissing` flag is set here for richer ValidityState introspection.\n\toverride willUpdate(changed: PropertyValues): void {\n\t\tsuper.willUpdate(changed)\n\t\tif (changed.has('required') || changed.has('value')) {\n\t\t\tif (this.required && !this.value) {\n\t\t\t\tthis.internals?.setValidity({ valueMissing: true }, 'Please fill out this field.')\n\t\t\t}\n\t\t}\n\t}\n\n\tfirstUpdated() {\n\t\tif (this.autofocus) {\n\t\t\tthis.focus()\n\t\t}\n\t\tif (this.autoHeight) {\n\t\t\t// Initial adjustment for pre-filled content (cancel-on-disconnect).\n\t\t\ttimer(0)\n\t\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t\t.subscribe(() => this.adjustHeight())\n\t\t}\n\t\tfromEvent(this.textareaElement, 'input')\n\t\t\t.pipe(\n\t\t\t\tmap(event => (event.target as HTMLTextAreaElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tif (this.autoHeight) {\n\t\t\t\t\tthis.adjustHeight()\n\t\t\t\t}\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\t\tfromEvent(this.textareaElement, 'change')\n\t\t\t.pipe(\n\t\t\t\tmap(event => (event.target as HTMLTextAreaElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tif (this.autoHeight) {\n\t\t\t\t\tthis.adjustHeight()\n\t\t\t\t}\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\t\t// emit on enter\n\t\tfromEvent<KeyboardEvent>(this.textareaElement, 'keyup')\n\t\t\t.pipe(\n\t\t\t\tfilter(event => event.key === 'Enter'),\n\t\t\t\tmap(event => (event.target as HTMLTextAreaElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('enter', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\t}\n\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\t/** Checks for validity of the control and shows the browser message if it's invalid. */\n\tpublic reportValidity() {\n\t\treturn this.textareaRef.value?.reportValidity()\n\t}\n\n\t/** Checks for validity of the control and emits the invalid event if it invalid. */\n\tpublic checkValidity() {\n\t\treturn this.textareaRef.value?.checkValidity()\n\t}\n\n\t/** Sets a custom validity message. */\n\tpublic setCustomValidity(message: string) {\n\t\treturn this.textareaRef.value?.setCustomValidity(message)\n\t}\n\n\t/** Selects all text within the textarea. */\n\tpublic select() {\n\t\treturn this.textareaRef.value?.select()\n\t}\n\n\t/** Sets the selection range. */\n\tpublic setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none') {\n\t\tthis.textareaRef.value?.setSelectionRange(start, end, direction)\n\t}\n\n\t/** Returns the selected text within the textarea. */\n\tpublic get selectionStart(): number | null {\n\t\treturn this.textareaRef.value?.selectionStart ?? null\n\t}\n\n\tpublic get selectionEnd(): number | null {\n\t\treturn this.textareaRef.value?.selectionEnd ?? null\n\t}\n\n\tpublic get selectionDirection(): 'forward' | 'backward' | 'none' | null {\n\t\treturn this.textareaRef.value?.selectionDirection ?? null\n\t}\n\n\t/** Sets the range of text to be selected. */\n\tpublic setRangeText(replacement: string) {\n\t\tthis.textareaRef.value?.setRangeText(replacement)\n\t}\n\n\t/** Adjusts the height of the textarea based on its content. */\n\tpublic adjustHeight() {\n\t\tconst textarea = this.textareaRef.value\n\t\tif (textarea) {\n\t\t\t// Only grow, never shrink\n\t\t\tconst currentHeight = textarea.offsetHeight\n\t\t\tconst scrollHeight = textarea.scrollHeight\n\t\t\tif (scrollHeight > currentHeight) {\n\t\t\t\ttextarea.style.height = scrollHeight + 'px'\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic validity(): ValidityState | undefined {\n\t\treturn this.textareaRef.value?.validity\n\t}\n\n\tpublic override focus(\n\t\toptions: FocusOptions = {\n\t\t\tpreventScroll: true,\n\t\t},\n\t) {\n\t\tthis.textareaRef.value?.focus(options)\n\t\tthis.dispatchEvent(new Event('focus'))\n\t}\n\n\tpublic override click() {\n\t\tthis.textareaRef.value?.click()\n\t\tthis.dispatchEvent(new Event('click'))\n\t}\n\n\tpublic override blur() {\n\t\tthis.textareaRef.value?.blur()\n\t\tthis.dispatchEvent(new Event('blur'))\n\t}\n\n\tprotected render(): unknown {\n\t\tconst textareaClasses = {\n\t\t\t// Base styles - matching input component\n\t\t\t'block w-full min-w-0 rounded-2xl border bg-surface-containerLowest text-surface-on': true,\n\t\t\t// Border color\n\t\t\t'border-outline': !this.error,\n\t\t\t'border-error-default': this.error,\n\t\t\t// Focus styles\n\t\t\t'outline-secondary-default focus:outline-1 focus:border-secondary-default': true,\n\t\t\t// Disabled styles\n\t\t\t'disabled:opacity-40 disabled:cursor-not-allowed': true,\n\t\t\t// Placeholder\n\t\t\t'placeholder:text-muted': true,\n\t\t\t// Ring styles (subtle focus ring)\n\t\t\t'ring-0 focus:ring-1 focus:ring-inset': true,\n\t\t\t'focus:ring-secondary-default': !this.error,\n\t\t\t'focus:ring-error-default': this.error,\n\t\t\t// Readonly styles\n\t\t\t'caret-transparent focus:outline-hidden cursor-pointer select-none': this.readonly,\n\t\t\t// Text alignment\n\t\t\t'text-left': this.align === 'left',\n\t\t\t'text-center': this.align === 'center',\n\t\t\t'text-right': this.align === 'right',\n\t\t\t// Textarea specific\n\t\t\t'h-full': this.fillHeight,\n\t\t\t'resize-none': this.resize === 'none',\n\t\t\t'resize-y': this.resize === 'vertical',\n\t\t\t'resize-x': this.resize === 'horizontal',\n\t\t\t'resize': this.resize === 'both',\n\t\t\t// Padding matching input\n\t\t\t'px-4 py-3': true,\n\t\t}\n\t\tconst fieldSizing = this.rows == null ? 'field-sizing: content;' : ''\n\t\tconst labelClasses = {\n\t\t\t'block mb-1 font-medium text-sm': true,\n\t\t\t'opacity-40': this.disabled,\n\t\t\t'text-primary-default': !this.error,\n\t\t\t'text-error-default': this.error,\n\t\t}\n\t\tconst containerClasses = {\n\t\t\t'w-full min-w-0': true,\n\t\t\t'flex flex-col h-full': this.fillHeight,\n\t\t}\n\t\tconst hintId = `${this._a11yId}-hint`\n\t\treturn html`\n\t\t<div class=\"${this.classMap(containerClasses)}\">\n\t\t\t${when(\n\t\t\t\tthis.label,\n\t\t\t\t() => html`\n\t\t\t\t\t<label class=\"${this.classMap(labelClasses)}\" for=${this.id}>\n\t\t\t\t\t\t${this.label}\n\t\t\t\t\t</label>\n\t\t\t\t`,\n\t\t\t)}\n\n\t\t\t<textarea\n\t\t\t\t${ref(this.textareaRef)}\n\t\t\t\t.value=${this.value}\n\t\t\t\t.id=${this.id}\n\t\t\t\t.name=${this.name}\n\t\t\t\t.placeholder=${this.placeholder}\n\t\t\t\t.required=${this.required}\n\t\t\t\tclass=${this.classMap(textareaClasses)}\n\t\t\t\tstyle=${fieldSizing}\n\t\t\t\t.disabled=${this.disabled}\n\t\t\t\tminlength=${ifDefined(this.minlength)}\n\t\t\t\tmaxlength=${ifDefined(this.maxlength)}\n\t\t\t\t.readonly=${this.readonly}\n\t\t\t\t.spellcheck=${this.spellcheck}\n\t\t\t\tcols=${ifDefined(this.cols)}\n\t\t\t\trows=${ifDefined(this.rows)}\n\t\t\t\twrap=${ifDefined(this.wrap)}\n\t\t\t\tdirname=${ifDefined(this.dirname)}\n\t\t\t\taria-invalid=${this.error ? 'true' : 'false'}\n\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\taria-describedby=${this.hint || (this.error && this.validationMessage) ? hintId : nothing}\n\t\t\t\taria-label=${!this.label && this.placeholder ? this.placeholder : nothing}\n\t\t\t></textarea>\n\n\t\t\t${when(\n\t\t\t\tthis.hint || (this.error && this.validationMessage),\n\t\t\t\t() => html`\n\t\t\t\t\t<div\n\t\t\t\t\t\tid=${hintId}\n\t\t\t\t\t\tclass=\"mt-1 text-sm ${this.error ? 'text-error-default' : 'text-surface-onVariant'}\"\n\t\t\t\t\t\trole=${ifDefined(this.error ? 'alert' : undefined)}\n\t\t\t\t\t>\n\t\t\t\t\t\t${this.error && this.validationMessage ? this.validationMessage : this.hint}\n\t\t\t\t\t</div>\n\t\t\t\t`,\n\t\t\t)}\n\t\t</div>\n\t\t`\n\t}\n}\n\ntype EventDetails = {\n\tvalue: string\n}\n\nexport type SchmancyTextareaChangeEvent = CustomEvent<EventDetails>\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-textarea': SchmancyTextarea\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"textarea-BenjiTXB.cjs","names":[],"sources":["../src/form/fields/textarea/textarea.scss?inline","../src/form/fields/textarea/textarea.ts"],"sourcesContent":[":host {\n\tborder: unset !important;\n\tline-height: unset !important;\n\tbackground: unset !important;\n\tpadding: unset !important;\n\tfont-size: unset !important;\n\tbox-shadow: unset !important;\n\twidth: -webkit-fill-available;\n\tdisplay: block;\n}\n\n:host([fillHeight]) {\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n:host:focus {\n\tbox-shadow: unset !important;\n}\n\ntextarea:focus-visible {\n\toutline: none !important;\n}\n\ntextarea {\n\t/* Inherit typographic styles */\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tfont-weight: inherit;\n\tline-height: inherit;\n\tcolor: inherit;\n\tletter-spacing: inherit;\n\ttext-transform: inherit;\n\ttext-decoration: inherit;\n\ttext-indent: inherit;\n\ttext-shadow: inherit;\n\ttext-overflow: inherit;\n\ttext-rendering: inherit;\n\ttext-size-adjust: inherit;\n\ttext-align-last: inherit;\n\toverflow-y: auto; /* Ensure content is scrollable if it exceeds the visible area */\n}\n\n@keyframes onAutoFillStart {\n\tfrom {\n\t}\n\tto {\n\t}\n}\n\ntextarea:-webkit-autofill {\n\tanimation-name: onAutoFillStart;\n}\n","import { LitElement, html, nothing, unsafeCSS, type PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { when } from 'lit/directives/when.js'\nimport { distinctUntilChanged, filter, fromEvent, map, takeUntil, timer } from 'rxjs'\nimport style from './textarea.scss?inline'\nimport { SchmancyFormField } from '@mixins/index'\n\n/**\n * Textarea component with auto-resize and form integration.\n *\n * @prop {string} name - Name attribute for form submission\n * @prop {string} value - Current value of the textarea\n * @prop {string} placeholder - Placeholder text\n * @prop {boolean} required - Whether the field is required\n * @prop {boolean} disabled - Whether the field is disabled\n * @prop {boolean} readonly - Whether the field is read-only\n * @prop {number} rows - Number of visible text rows\n * @prop {number} maxlength - Maximum character length\n */\n@customElement('schmancy-textarea')\nexport default class SchmancyTextarea extends SchmancyFormField(unsafeCSS(style)) {\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\t// `formAssociated`, `internals`, `name`, `label`, `required`, `disabled`,\n\t// `error`, `validationMessage`, `hint`, `id`, `validateOn`, `touched`,\n\t// `dirty`, `submitted`, `markTouched`, `markSubmitted`, `setCustomValidity`,\n\t// `formResetCallback`, `formDisabledCallback` — all from the mixin.\n\ttextareaRef = createRef<HTMLTextAreaElement>()\n\n\tprivate readonly _a11yId = `schmancy-textarea-${Math.random().toString(36).slice(2, 10)}`\n\n\t/**\n\t * The placeholder of the control.\n\t * @attr placeholder\n\t * @type {string}\n\t * @default ''\n\t * @public\n\t */\n\t@property() placeholder = ''\n\n\t/**\n\t * The value of the control. Narrowed from the mixin's wide union to the\n\t * textarea-specific `string` type.\n\t * @attr {string} value - The value of the control.\n\t */\n\t@property({ type: String, reflect: true }) override value: string = ''\n\n\t/**\n\t * The minlength attribute of the control.\n\t * @attr\n\t */\n\t@property({ type: Number })\n\tpublic minlength: number | undefined\n\n\t/**\n\t * The maxlength attribute of the control.\n\t * @attr\n\t */\n\t@property({ type: Number })\n\tpublic maxlength!: number\n\n\t/**\n\t * The number of columns (width) of the control.\n\t * @attr cols\n\t * @type {number}\n\t * @default 20\n\t * @public\n\t */\n\t@property({ type: Number }) cols = 20\n\n\t/**\n\t * The number of rows (height) of the control.\n\t * When not set, the textarea auto-sizes to fit its content via field-sizing: content.\n\t * @attr rows\n\t * @type {number}\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ type: Number }) rows: number | undefined\n\n\t/**\n\t * Makes the textarea fill the height of its container.\n\t * @attr fillHeight\n\t * @type {boolean}\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean, reflect: true }) fillHeight = false\n\n\t/**\n\t * Automatically adjusts height based on content.\n\t * @attr autoHeight\n\t * @type {boolean}\n\t * @default true\n\t * @public\n\t */\n\t@property({ type: Boolean }) autoHeight = true\n\n\t/**\n\t * Controls whether the textarea can be resized by the user.\n\t * @attr resize\n\t * @type {'none' | 'vertical' | 'horizontal' | 'both'}\n\t * @default 'vertical'\n\t * @public\n\t */\n\t@property({ type: String, reflect: true }) resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical'\n\n\t/**\n\t * Specifies how the text in a text area is to be wrapped when submitted in a form.\n\t * @attr wrap\n\t * @type {'hard' | 'soft'}\n\t * @default 'soft'\n\t * @public\n\t */\n\t@property({ type: String }) wrap: 'hard' | 'soft' = 'soft'\n\n\t/**\n\t * The dirname attribute of the control.\n\t * @attr dirname\n\t * @type {string}\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ type: String }) dirname: string | undefined\n\n\t// `required`, `disabled`, `readonly`, `error`, `validationMessage`, `hint`\n\t// come from the mixin. Textarea-specific extras only:\n\t@property({ type: Boolean, reflect: true }) spellcheck = false\n\n\t@property({ type: String, reflect: true }) align: 'left' | 'center' | 'right' = 'left'\n\n\t/**\n\t * The autofocus attribute of the control.\n\t */\n\t@property({ type: Boolean })\n\tpublic override autofocus!: boolean\n\n\t@property({ type: Number })\n\tpublic override tabIndex = 0\n\n\t@query('textarea') textareaElement!: HTMLTextAreaElement\n\n\t// Mixin's willUpdate already calls internals.setFormValue() on value-change\n\t// and runs the required-empty / customError validity machinery. Native\n\t// `valueMissing` flag is set here for richer ValidityState introspection.\n\toverride willUpdate(changed: PropertyValues): void {\n\t\tsuper.willUpdate(changed)\n\t\tif (changed.has('required') || changed.has('value')) {\n\t\t\tif (this.required && !this.value) {\n\t\t\t\tthis.internals?.setValidity({ valueMissing: true }, 'Please fill out this field.')\n\t\t\t}\n\t\t}\n\t}\n\n\tfirstUpdated() {\n\t\tif (this.autofocus) {\n\t\t\tthis.focus()\n\t\t}\n\t\tif (this.autoHeight) {\n\t\t\t// Initial adjustment for pre-filled content (cancel-on-disconnect).\n\t\t\ttimer(0)\n\t\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t\t.subscribe(() => this.adjustHeight())\n\t\t}\n\t\tfromEvent(this.textareaElement, 'input')\n\t\t\t.pipe(\n\t\t\t\tmap(event => (event.target as HTMLTextAreaElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tif (this.autoHeight) {\n\t\t\t\t\tthis.adjustHeight()\n\t\t\t\t}\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\t\tfromEvent(this.textareaElement, 'change')\n\t\t\t.pipe(\n\t\t\t\tmap(event => (event.target as HTMLTextAreaElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tif (this.autoHeight) {\n\t\t\t\t\tthis.adjustHeight()\n\t\t\t\t}\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\t\t// emit on enter\n\t\tfromEvent<KeyboardEvent>(this.textareaElement, 'keyup')\n\t\t\t.pipe(\n\t\t\t\tfilter(event => event.key === 'Enter'),\n\t\t\t\tmap(event => (event.target as HTMLTextAreaElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('enter', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\t}\n\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\t/** Checks for validity of the control and shows the browser message if it's invalid. */\n\tpublic reportValidity() {\n\t\treturn this.textareaRef.value?.reportValidity()\n\t}\n\n\t/** Checks for validity of the control and emits the invalid event if it invalid. */\n\tpublic checkValidity() {\n\t\treturn this.textareaRef.value?.checkValidity()\n\t}\n\n\t/** Sets a custom validity message. */\n\tpublic setCustomValidity(message: string) {\n\t\treturn this.textareaRef.value?.setCustomValidity(message)\n\t}\n\n\t/** Selects all text within the textarea. */\n\tpublic select() {\n\t\treturn this.textareaRef.value?.select()\n\t}\n\n\t/** Sets the selection range. */\n\tpublic setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none') {\n\t\tthis.textareaRef.value?.setSelectionRange(start, end, direction)\n\t}\n\n\t/** Returns the selected text within the textarea. */\n\tpublic get selectionStart(): number | null {\n\t\treturn this.textareaRef.value?.selectionStart ?? null\n\t}\n\n\tpublic get selectionEnd(): number | null {\n\t\treturn this.textareaRef.value?.selectionEnd ?? null\n\t}\n\n\tpublic get selectionDirection(): 'forward' | 'backward' | 'none' | null {\n\t\treturn this.textareaRef.value?.selectionDirection ?? null\n\t}\n\n\t/** Sets the range of text to be selected. */\n\tpublic setRangeText(replacement: string) {\n\t\tthis.textareaRef.value?.setRangeText(replacement)\n\t}\n\n\t/** Adjusts the height of the textarea based on its content. */\n\tpublic adjustHeight() {\n\t\tconst textarea = this.textareaRef.value\n\t\tif (textarea) {\n\t\t\t// Only grow, never shrink\n\t\t\tconst currentHeight = textarea.offsetHeight\n\t\t\tconst scrollHeight = textarea.scrollHeight\n\t\t\tif (scrollHeight > currentHeight) {\n\t\t\t\ttextarea.style.height = scrollHeight + 'px'\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic validity(): ValidityState | undefined {\n\t\treturn this.textareaRef.value?.validity\n\t}\n\n\tpublic override focus(\n\t\toptions: FocusOptions = {\n\t\t\tpreventScroll: true,\n\t\t},\n\t) {\n\t\tthis.textareaRef.value?.focus(options)\n\t\tthis.dispatchEvent(new Event('focus'))\n\t}\n\n\tpublic override click() {\n\t\tthis.textareaRef.value?.click()\n\t\tthis.dispatchEvent(new Event('click'))\n\t}\n\n\tpublic override blur() {\n\t\tthis.textareaRef.value?.blur()\n\t\tthis.dispatchEvent(new Event('blur'))\n\t}\n\n\tprotected render(): unknown {\n\t\tconst textareaClasses = {\n\t\t\t// Base styles - matching input component\n\t\t\t'block w-full min-w-0 rounded-2xl border bg-surface-containerLowest text-surface-on': true,\n\t\t\t// Border color\n\t\t\t'border-outline': !this.error,\n\t\t\t'border-error-default': this.error,\n\t\t\t// Focus styles\n\t\t\t'outline-secondary-default focus:outline-1 focus:border-secondary-default': true,\n\t\t\t// Disabled styles\n\t\t\t'disabled:opacity-40 disabled:cursor-not-allowed': true,\n\t\t\t// Placeholder\n\t\t\t'placeholder:text-muted': true,\n\t\t\t// Ring styles (subtle focus ring)\n\t\t\t'ring-0 focus:ring-1 focus:ring-inset': true,\n\t\t\t'focus:ring-secondary-default': !this.error,\n\t\t\t'focus:ring-error-default': this.error,\n\t\t\t// Readonly styles\n\t\t\t'caret-transparent focus:outline-hidden cursor-pointer select-none': this.readonly,\n\t\t\t// Text alignment\n\t\t\t'text-left': this.align === 'left',\n\t\t\t'text-center': this.align === 'center',\n\t\t\t'text-right': this.align === 'right',\n\t\t\t// Textarea specific\n\t\t\t'h-full': this.fillHeight,\n\t\t\t'resize-none': this.resize === 'none',\n\t\t\t'resize-y': this.resize === 'vertical',\n\t\t\t'resize-x': this.resize === 'horizontal',\n\t\t\t'resize': this.resize === 'both',\n\t\t\t// Padding matching input\n\t\t\t'px-4 py-3': true,\n\t\t}\n\t\tconst fieldSizing = this.rows == null ? 'field-sizing: content;' : ''\n\t\tconst labelClasses = {\n\t\t\t'block mb-1 font-medium text-sm': true,\n\t\t\t'opacity-40': this.disabled,\n\t\t\t'text-primary-default': !this.error,\n\t\t\t'text-error-default': this.error,\n\t\t}\n\t\tconst containerClasses = {\n\t\t\t'w-full min-w-0': true,\n\t\t\t'flex flex-col h-full': this.fillHeight,\n\t\t}\n\t\tconst hintId = `${this._a11yId}-hint`\n\t\treturn html`\n\t\t<div class=\"${this.classMap(containerClasses)}\">\n\t\t\t${when(\n\t\t\t\tthis.label,\n\t\t\t\t() => html`\n\t\t\t\t\t<label class=\"${this.classMap(labelClasses)}\" for=${this.id}>\n\t\t\t\t\t\t${this.label}\n\t\t\t\t\t</label>\n\t\t\t\t`,\n\t\t\t)}\n\n\t\t\t<textarea\n\t\t\t\t${ref(this.textareaRef)}\n\t\t\t\t.value=${this.value}\n\t\t\t\t.id=${this.id}\n\t\t\t\t.name=${this.name}\n\t\t\t\t.placeholder=${this.placeholder}\n\t\t\t\t.required=${this.required}\n\t\t\t\tclass=${this.classMap(textareaClasses)}\n\t\t\t\tstyle=${fieldSizing}\n\t\t\t\t.disabled=${this.disabled}\n\t\t\t\tminlength=${ifDefined(this.minlength)}\n\t\t\t\tmaxlength=${ifDefined(this.maxlength)}\n\t\t\t\t.readonly=${this.readonly}\n\t\t\t\t.spellcheck=${this.spellcheck}\n\t\t\t\tcols=${ifDefined(this.cols)}\n\t\t\t\trows=${ifDefined(this.rows)}\n\t\t\t\twrap=${ifDefined(this.wrap)}\n\t\t\t\tdirname=${ifDefined(this.dirname)}\n\t\t\t\taria-invalid=${this.error ? 'true' : 'false'}\n\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\taria-describedby=${this.hint || (this.error && this.validationMessage) ? hintId : nothing}\n\t\t\t\taria-label=${!this.label && this.placeholder ? this.placeholder : nothing}\n\t\t\t></textarea>\n\n\t\t\t${when(\n\t\t\t\tthis.hint || (this.error && this.validationMessage),\n\t\t\t\t() => html`\n\t\t\t\t\t<div\n\t\t\t\t\t\tid=${hintId}\n\t\t\t\t\t\tclass=\"mt-1 text-sm ${this.error ? 'text-error-default' : 'text-surface-onVariant'}\"\n\t\t\t\t\t\trole=${ifDefined(this.error ? 'alert' : undefined)}\n\t\t\t\t\t>\n\t\t\t\t\t\t${this.error && this.validationMessage ? this.validationMessage : this.hint}\n\t\t\t\t\t</div>\n\t\t\t\t`,\n\t\t\t)}\n\t\t</div>\n\t\t`\n\t}\n}\n\ntype EventDetails = {\n\tvalue: string\n}\n\nexport type SchmancyTextareaChangeEvent = CustomEvent<EventDetails>\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-textarea': SchmancyTextarea\n\t}\n}\n"],"mappings":"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"}

package/dist/textarea.cjs

@@ -1 +1 @@
-require(`./textarea-CqV1wvmB.cjs`);
+require(`./textarea-BenjiTXB.cjs`);

package/dist/textarea.js

@@ -1 +1 @@
-import "./textarea-DVkwQSis.js";
+import "./textarea-3mWewuAf.js";

package/dist/{theme-BIWS4TOW.js → theme-CFPJW933.js}

@@ -2,7 +2,7 @@ import { c as e, f as t } from "./mixins-BWb9_e1s.js";
 import { a as n } from "./active-host-BP0zy_Y9.js";
 import { n as r } from "./sound.service-BIN2W7Rv.js";
 import { i, r as a } from "./theme.service-BOWIT_5k.js";
-import "./theme.interface-C8OHheXg.js";
+import "./theme.interface-C2XNgsLB.js";
 import { Observable as o, Subject as s, debounceTime as c, fromEvent as l, of as u, switchMap as d, takeUntil as f, tap as p } from "rxjs";
 import { provide as m } from "@lit/context";
 import { customElement as h, property as g, state as _ } from "lit/decorators.js";