@keenthemes/ktui 1.2.1 → 1.2.3

package/src/components/select/select.ts

@@ -29,7 +29,8 @@ export class KTSelect extends KTComponent {
 	// Core properties
 	protected override readonly _name: string = 'select';
 	protected override readonly _dataOptionPrefix: string = 'kt-'; // Use 'kt-' prefix to support data-kt-select-option attributes
-	protected override readonly _config: KTSelectConfigInterface;
+	protected override _element!: HTMLElement;
+	protected override _config: KTSelectConfigInterface;
 	protected override _defaultConfig: KTSelectConfigInterface;
 
 	// Static global configuration
@@ -81,7 +82,7 @@ export class KTSelect extends KTComponent {
 		this._state = new KTSelectState(this._config);
 		this._config = this._state.getConfig();
 
-		(element as any).instance = this;
+		(this._element as HTMLElement & { instance?: KTSelect }).instance = this;
 
 		// Initialize event manager
 		this._eventManager = new EventManager();
@@ -125,8 +126,7 @@ export class KTSelect extends KTComponent {
 	protected override _buildConfig(config: object = {}): void {
 		if (!this._element) return;
 
-		// Cast to writable to allow assignment (config is readonly but needs initialization)
-		(this._config as any) = {
+		this._config = {
 			...this._defaultConfig,
 			...KTSelect.globalConfig,
 			...this._getGlobalConfig(),
@@ -143,7 +143,7 @@ export class KTSelect extends KTComponent {
 	 */
 	protected override _dispatchEvent(
 		eventType: string,
-		payload: object = null,
+		payload: object | null = null,
 	): void {
 		// Call parent method to dispatch on element (existing behavior)
 		super._dispatchEvent(eventType, payload);
@@ -179,6 +179,10 @@ export class KTSelect extends KTComponent {
 		}
 	}
 
+	public override getElement(): HTMLElement {
+		return this._element;
+	}
+
 	/**
 	 * Initialize remote data fetching
 	 */
@@ -461,7 +465,10 @@ export class KTSelect extends KTComponent {
 				optionsContainer.appendChild(
 					defaultTemplates.error({
 						...this._config,
-						errorMessage: message,
+						errorMessage:
+							message ??
+							this._config.remoteErrorMessage ??
+							'Failed to load data',
 					}),
 				);
 				break;
@@ -754,7 +761,7 @@ export class KTSelect extends KTComponent {
 		// Create an empty dropdown first (without options) using template
 		const dropdownElement = defaultTemplates.dropdown({
 			...this._config,
-			zindex: this._config.dropdownZindex,
+			zindex: this._config.dropdownZindex ?? undefined,
 		});
 
 		// Add search input if needed
@@ -1007,13 +1014,20 @@ export class KTSelect extends KTComponent {
 	/**
 	 * Extract nested property value from object using dot notation
 	 */
-	private _getValueByKey(obj: any, key: string): any {
+	private _getValueByKey(obj: unknown, key: string): unknown {
 		if (!key || !obj) return null;
 
 		// Use reduce to walk through the object by splitting the key on dots
-		const result = key
-			.split('.')
-			.reduce((o, k) => (o && o[k] !== undefined ? o[k] : null), obj);
+		const result = key.split('.').reduce((o: unknown, k: string) => {
+			if (
+				o &&
+				typeof o === 'object' &&
+				(o as Record<string, unknown>)[k] !== undefined
+			) {
+				return (o as Record<string, unknown>)[k];
+			}
+			return null;
+		}, obj);
 
 		return result;
 	}
@@ -1300,7 +1314,7 @@ export class KTSelect extends KTComponent {
 		// Sync native select value for FormData support
 		this._syncNativeSelectValue();
 
-		if (tagsEnabled) {
+		if (this._config.tags && this._tagsModule) {
 			// Tags module will render tags if selectedOptions > 0, or clear them if selectedOptions === 0.
 			this._tagsModule.updateTagsDisplay(selectedOptions);
 		}
@@ -1508,19 +1522,6 @@ export class KTSelect extends KTComponent {
 		if (focusedOption) {
 			const selectedValue = focusedOption.dataset.value;
 
-			// Extract just the title text, not including description
-			let selectedText = '';
-			const titleElement = focusedOption.querySelector(
-				'[data-kt-option-title]',
-			);
-			if (titleElement) {
-				// If it has a structured content with title element
-				selectedText = titleElement.textContent?.trim() || '';
-			} else {
-				// Fallback to the whole text content
-				selectedText = focusedOption.textContent?.trim() || '';
-			}
-
 			// First trigger the selection to ensure state is updated properly
 			if (selectedValue) {
 				this._selectOption(selectedValue);
@@ -1621,7 +1622,7 @@ export class KTSelect extends KTComponent {
 	/**
 	 * Get the search input element
 	 */
-	public getSearchInput(): HTMLInputElement {
+	public getSearchInput(): HTMLInputElement | null {
 		return this._searchInputElement;
 	}
 
@@ -1685,7 +1686,7 @@ export class KTSelect extends KTComponent {
 			if (option.hasAttribute('style')) {
 				const styleAttr = option.getAttribute('style');
 
-				if (styleAttr.includes('display:')) {
+				if (styleAttr && styleAttr.includes('display:')) {
 					// If style only contains display property, remove the entire attribute
 					if (
 						styleAttr.trim() === 'display: none;' ||
@@ -1696,7 +1697,7 @@ export class KTSelect extends KTComponent {
 						// Otherwise, remove just the display property
 						option.setAttribute(
 							'style',
-							styleAttr?.replace(/display:\s*[^;]+;?/gi, '')?.trim(),
+							styleAttr.replace(/display:\s*[^;]+;?/gi, '').trim(),
 						);
 					}
 				}
@@ -1816,7 +1817,7 @@ export class KTSelect extends KTComponent {
 	 */
 	public override dispose(): void {
 		// Clean up event listeners
-		this._eventManager.removeAllListeners(null);
+		this._eventManager.removeAllListeners(this._wrapperElement);
 
 		// Dispose modules
 		if (this._dropdownModule) {
@@ -2464,7 +2465,6 @@ export class KTSelect extends KTComponent {
 		}
 
 		const isOpen = this._dropdownIsOpen;
-		const config = this._config;
 		const focusManager = this._focusManager;
 		const buffer = this._typeToSearchBuffer;
 
@@ -2588,7 +2588,7 @@ export class KTSelect extends KTComponent {
 	}
 
 	public renderDisplayTemplateForSelected(selectedValues: string[]): string {
-		const optionsConfig = (this._config.optionsConfig as any) || {};
+		const optionsConfig = this._config.optionsConfig || {};
 		const displaySeparator = this._config.displaySeparator || ', ';
 		const contentArray = Array.from(
 			new Set(
@@ -2599,7 +2599,7 @@ export class KTSelect extends KTComponent {
 						);
 						if (!option) return '';
 
-						let displayTemplate = this._config.displayTemplate;
+						let displayTemplate = this._config.displayTemplate || '{{text}}';
 						const text = option.getAttribute('data-text') || '';
 
 						// Replace all {{varname}} in option.innerHTML with values from _config
@@ -2757,21 +2757,25 @@ export class KTSelect extends KTComponent {
 			.getVisibleOptions()
 			.filter((opt) => opt.getAttribute('aria-disabled') !== 'true');
 
+		const selectAllButton = this._selectAllButton;
+		const selectAllButtonToggle = this._selectAllButtonToggle;
+		if (!selectAllButton || !selectAllButtonToggle) return;
+
 		if (visibleOptions.length === 0) {
-			this._selectAllButton.style.display = 'none';
+			selectAllButton.style.display = 'none';
 			return;
 		}
 
-		this._selectAllButton.style.display = '';
+		selectAllButton.style.display = '';
 
 		const selectedValues = new Set(this.getSelectedOptions());
 		const isAllSelected = visibleOptions.every((opt) =>
 			selectedValues.has(opt.dataset.value as string),
 		);
 
-		this._selectAllButtonToggle.textContent = isAllSelected
-			? this._config.clearAllText
-			: this._config.selectAllText;
+		selectAllButtonToggle.textContent = isAllSelected
+			? (this._config.clearAllText ?? 'Clear all')
+			: (this._config.selectAllText ?? 'Select all');
 	}
 
 	/**

package/src/components/select/tags.ts

@@ -14,7 +14,7 @@ import { EventManager } from './utils';
 export class KTSelectTags {
 	private _select: KTSelect;
 	private _config: KTSelectConfigInterface;
-	private _valueDisplayElement: HTMLElement;
+	private _valueDisplayElement: HTMLElement | null;
 	private _eventManager: EventManager;
 
 	/**
@@ -32,21 +32,23 @@ export class KTSelectTags {
 	 * Renders selected options as tags in the display element
 	 */
 	public updateTagsDisplay(selectedOptions: string[]): void {
+		if (!this._valueDisplayElement) return;
+		const valueDisplayElement = this._valueDisplayElement;
 		// Remove any existing tag elements
-		const wrapper = this._valueDisplayElement.parentElement;
+		const wrapper = valueDisplayElement.parentElement;
 		if (!wrapper) return;
 
 		// If no options selected, ensure placeholder is shown
 		if (selectedOptions.length === 0) {
 			// Clear any existing content and show placeholder
-			this._valueDisplayElement.innerHTML = '';
+			valueDisplayElement.innerHTML = '';
 			const placeholderEl = defaultTemplates.placeholder(this._config);
-			this._valueDisplayElement.appendChild(placeholderEl);
+			valueDisplayElement.appendChild(placeholderEl);
 			return;
 		}
 
 		// Clear all existing content before adding tags
-		this._valueDisplayElement.innerHTML = '';
+		valueDisplayElement.innerHTML = '';
 
 		// Insert each tag before the display element
 		selectedOptions.forEach((optionValue) => {
@@ -62,7 +64,8 @@ export class KTSelectTags {
 			if (!optionElement) {
 				const originalOptions = this._select
 					.getElement()
-					.querySelectorAll('option');
+					?.querySelectorAll('option');
+				if (!originalOptions) return;
 				for (const opt of Array.from(originalOptions)) {
 					if ((opt as HTMLOptionElement).value === optionValue) {
 						optionElement = opt as HTMLOptionElement;
@@ -70,6 +73,7 @@ export class KTSelectTags {
 					}
 				}
 			}
+			if (!optionElement) return;
 
 			const tag = defaultTemplates.tag(optionElement, this._config);
 
@@ -85,7 +89,7 @@ export class KTSelectTags {
 			}
 
 			// Insert tag inside the display element
-			this._valueDisplayElement.appendChild(tag);
+			valueDisplayElement.appendChild(tag);
 		});
 	}
 
@@ -101,6 +105,8 @@ export class KTSelectTags {
 	 * Clean up resources used by this module
 	 */
 	public destroy(): void {
-		this._eventManager.removeAllListeners(null);
+		if (this._valueDisplayElement) {
+			this._eventManager.removeAllListeners(this._valueDisplayElement);
+		}
 	}
 }

package/src/components/select/templates.ts

@@ -136,7 +136,7 @@ export function getTemplateStrings(
 ): typeof coreTemplateStrings {
 	const templates =
 		config && typeof config === 'object' && 'templates' in config
-			? (config as any).templates
+			? (config as KTSelectConfigInterface).templates
 			: undefined;
 
 	if (templates) {
@@ -264,7 +264,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 		config: KTSelectConfigInterface,
 	): HTMLElement => {
 		const isHtmlOption = option instanceof HTMLOptionElement;
-		let optionData: Record<string, any>;
+		let optionData: Record<string, unknown>;
 
 		if (isHtmlOption) {
 			// If it's a plain HTMLOptionElement, construct data similarly to how KTSelectOption would
@@ -288,14 +288,14 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 			).getOptionDataForTemplate();
 		}
 
-		let content = optionData?.text?.trim(); // Default content to option's text
+		let content = String(optionData?.text || '').trim(); // Default content to option's text
 
 		if (config.optionTemplate) {
 			// Use the user-provided template string, rendering with the full optionData.
 			// renderTemplateString will replace {{key}} with values from optionData.
 			content = renderTemplateString(config.optionTemplate, optionData);
 		} else {
-			content = optionData.text || optionData.content; // Prefer explicit text, fallback to content
+			content = String(optionData.text || optionData.content || '');
 		}
 
 		// Use the core option template string as the base structure.
@@ -326,7 +326,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 		}
 
 		// Ensure data-text attribute is set to the original, clean text for searching/filtering
-		element.setAttribute('data-text', optionData?.text?.trim() || '');
+		element.setAttribute('data-text', String(optionData?.text || '').trim());
 
 		return element;
 	},
@@ -402,7 +402,12 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 
 			// Replace all {{varname}} in option.innerHTML with values from _config.optionsConfig
 			Object.entries(
-				(config.optionsConfig as any)?.[optionValue] || {},
+				(
+					config.optionsConfig as unknown as Record<
+						string,
+						Record<string, unknown>
+					>
+				)?.[optionValue] || {},
 			).forEach(([key, val]) => {
 				if (
 					typeof val === 'string' ||

package/src/components/select/types.ts

@@ -15,7 +15,7 @@ export interface KTSelectOption {
 }
 
 export interface KTSelectOptionData {
-	[key: string]: any;
+	[key: string]: unknown;
 }
 
 export interface KTSelectState {

package/src/components/select/utils.ts

@@ -5,7 +5,6 @@
 
 // utils.ts
 
-import { defaultTemplates } from './templates';
 import { KTSelectConfigInterface } from './config';
 
 /**
@@ -99,7 +98,7 @@ export class FocusManager {
 	constructor(
 		element: HTMLElement,
 		optionsSelector: string = '[data-kt-select-option]',
-		config?: KTSelectConfigInterface,
+		_config?: KTSelectConfigInterface,
 	) {
 		this._element = element;
 		this._optionsSelector = optionsSelector;
@@ -121,8 +120,7 @@ export class FocusManager {
 			const target = e.target as HTMLElement;
 			const optionElement = target.closest(this._optionsSelector);
 
-			if (optionElement) {
-			}
+			void optionElement;
 		});
 	}
 
@@ -442,7 +440,7 @@ export class EventManager {
 		element: HTMLElement,
 		event: string,
 		handler: EventListenerOrEventListenerObject,
-		context?: any,
+		context?: unknown,
 	): void {
 		if (!element) return;
 
@@ -514,12 +512,12 @@ export class EventManager {
  * Debounce function to limit how often a function can be called
  */
 export function debounce(
-	func: (...args: any[]) => void,
+	func: (...args: unknown[]) => void,
 	delay: number,
-): (...args: any[]) => void {
+): (...args: unknown[]) => void {
 	let timeout: ReturnType<typeof setTimeout>;
 
-	return function (...args: any[]) {
+	return function (...args: unknown[]) {
 		clearTimeout(timeout);
 		timeout = setTimeout(() => func(...args), delay);
 	};
@@ -531,7 +529,7 @@ export function debounce(
  */
 export function renderTemplateString(
 	template: string,
-	data: Record<string, any>,
+	data: Record<string, unknown>,
 ): string {
 	return template.replace(/{{(\w+)}}/g, (_, key) =>
 		data[key] !== undefined && data[key] !== null ? String(data[key]) : '',

package/src/components/sticky/sticky.ts

@@ -413,7 +413,7 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		}
 	}
 
-	protected _resetStyles = function () {
+	protected _resetStyles(): void {
 		this._element.style.top = '';
 		this._element.style.bottom = '';
 		this._element.style.insetInlineStart = '';
@@ -425,7 +425,7 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		this._element.style.right = '';
 		this._element.style.zIndex = '';
 		this._element.style.position = '';
-	};
+	}
 
 	protected _update(): void {
 		this._timeoutState = null;

package/src/components/theme-switch/theme-switch.ts

@@ -20,12 +20,14 @@ export class KTThemeSwitch
 	extends KTComponent
 	implements KTThemeSwitchInterface
 {
-	protected override _name: string = 'theme-swtich';
+	protected override _name: string = 'theme-switch';
 	protected override _defaultConfig: KTThemeSwitchConfigInterface = {
 		mode: 'light',
 	};
 	protected _mode: KTThemeSwitchModeType | null = null;
 	protected _currentMode: KTThemeSwitchModeType | null = null;
+	protected _themeSwitchToggleEventId: string = '';
+	protected _themeSwitchSetEventId: string = '';
 
 	constructor(
 		element: HTMLElement | HTMLHtmlElement,
@@ -48,7 +50,7 @@ export class KTThemeSwitch
 	protected _handlers(): void {
 		if (!this._element) return;
 
-		KTEventHandler.on(
+		this._themeSwitchToggleEventId = KTEventHandler.on(
 			document.body,
 			'[data-kt-theme-switch-toggle]',
 			'click',
@@ -57,7 +59,7 @@ export class KTThemeSwitch
 			},
 		);
 
-		KTEventHandler.on(
+		this._themeSwitchSetEventId = KTEventHandler.on(
 			document.body,
 			'[data-kt-theme-switch-set]',
 			'click',
@@ -141,7 +143,23 @@ export class KTThemeSwitch
 	}
 
 	public setMode(mode: KTThemeSwitchModeType) {
-		this.setMode(mode);
+		this._setMode(mode);
+	}
+
+	public override dispose(): void {
+		if (this._themeSwitchToggleEventId) {
+			KTEventHandler.off(
+				document.body,
+				'click',
+				this._themeSwitchToggleEventId,
+			);
+			this._themeSwitchToggleEventId = '';
+		}
+		if (this._themeSwitchSetEventId) {
+			KTEventHandler.off(document.body, 'click', this._themeSwitchSetEventId);
+			this._themeSwitchSetEventId = '';
+		}
+		super.dispose();
 	}
 
 	public static getInstance(): KTThemeSwitch {

package/src/components/toast/toast.ts

@@ -10,6 +10,7 @@ import {
 	KTToastConfig,
 	KTToastInstance,
 	KTToastPosition,
+	KTToastClassNames,
 } from './types';
 
 const DEFAULT_CONFIG: KTToastConfig = {
@@ -60,9 +61,9 @@ export class KTToast extends KTComponent implements KTToastInterface {
 	 * @returns The toast's HTML markup as a string.
 	 */
 	static getContent(options?: KTToastOptions) {
-		const classNames = {
-			...((this.globalConfig.classNames as any) || {}),
-			...((options?.classNames as any) || {}),
+		const classNames: Partial<KTToastClassNames> = {
+			...(this.globalConfig.classNames || {}),
+			...(options?.classNames || {}),
 		};
 
 		if (options?.content) {
@@ -237,18 +238,18 @@ export class KTToast extends KTComponent implements KTToastInterface {
 		const position =
 			options.position || this.globalConfig.position || 'top-end';
 
-		const classNames = {
-			...((this.globalConfig.classNames as any) || {}),
-			...((options.classNames as any) || {}),
+		const classNames: Partial<KTToastClassNames> = {
+			...(this.globalConfig.classNames || {}),
+			...(options.classNames || {}),
 		};
 
 		let container = this.containerMap.get(position);
 
 		if (!container) {
 			container = document.createElement('div');
-			const classNames = {
-				...((this.globalConfig.classNames as any) || {}),
-				...((options.classNames as any) || {}),
+			const classNames: Partial<KTToastClassNames> = {
+				...(this.globalConfig.classNames || {}),
+				...(options.classNames || {}),
 			};
 			// Fallback to default hardcoded classes if not provided in options or globalConfig
 			container.className =
@@ -260,7 +261,7 @@ export class KTToast extends KTComponent implements KTToastInterface {
 		// Enforce maxToasts
 		if (
 			container.children.length >=
-			(this.globalConfig.maxToasts || DEFAULT_CONFIG.maxToasts)
+			(this.globalConfig.maxToasts ?? DEFAULT_CONFIG.maxToasts ?? 5)
 		) {
 			const firstToast = container.firstElementChild;
 			if (firstToast) {
@@ -296,7 +297,10 @@ export class KTToast extends KTComponent implements KTToastInterface {
 		};
 
 		const toast = document.createElement('div');
-		toast.className = `kt-toast kt-alert ${variantMap[options.variant] || ''} ${appearanceMap[options.appearance] || ''} ${sizeMap[options.size] || ''} ${options.className || ''} ${classNames.toast || ''}`;
+		const variantClass = variantMap[options.variant ?? 'info'] || '';
+		const appearanceClass = appearanceMap[options.appearance ?? 'solid'] || '';
+		const sizeClass = sizeMap[options.size ?? 'md'] || '';
+		toast.className = `kt-toast kt-alert ${variantClass} ${appearanceClass} ${sizeClass} ${options.className || ''} ${classNames.toast || ''}`;
 		// ARIA support
 		toast.setAttribute('role', options.role || 'status');
 		toast.setAttribute('aria-live', 'polite');
@@ -392,10 +396,11 @@ export class KTToast extends KTComponent implements KTToastInterface {
 		toast.classList.add(dirClass);
 
 		// Enforce maxToasts: remove oldest if needed
-		const maxToasts =
+		const maxToasts: number =
 			options.maxToasts ??
 			this.globalConfig.maxToasts ??
-			DEFAULT_CONFIG.maxToasts;
+			DEFAULT_CONFIG.maxToasts ??
+			5;
 		const currentToasts = Array.from(container.children) as HTMLElement[];
 		if (currentToasts.length >= maxToasts && currentToasts.length > 0) {
 			const oldestToast = currentToasts[currentToasts.length - 1];
@@ -415,9 +420,17 @@ export class KTToast extends KTComponent implements KTToastInterface {
 		if (options.beep) {
 			try {
 				// Use Web Audio API for a short beep
-				const ctx = new (
-					window.AudioContext || (window as any).webkitAudioContext
-				)();
+				const Ctx =
+					window.AudioContext ||
+					(
+						window as Window & {
+							webkitAudioContext?: typeof AudioContext;
+						}
+					).webkitAudioContext;
+				if (!Ctx) {
+					throw new Error('Web Audio API unavailable');
+				}
+				const ctx = new Ctx();
 				const o = ctx.createOscillator();
 				const g = ctx.createGain();
 				o.type = 'sine';
@@ -430,7 +443,7 @@ export class KTToast extends KTComponent implements KTToastInterface {
 					o.stop();
 					ctx.close();
 				}, 120);
-			} catch (e) {
+			} catch {
 				/* ignore */
 			}
 		}
@@ -442,7 +455,7 @@ export class KTToast extends KTComponent implements KTToastInterface {
 
 		// Auto-dismiss
 		let timeoutId: number | undefined = undefined;
-		let remaining = duration;
+		let remaining = duration ?? 0;
 		let startTime: number | undefined;
 		let paused = false;
 		let progressEl: HTMLElement | null = null;
@@ -493,7 +506,7 @@ export class KTToast extends KTComponent implements KTToastInterface {
 						if (progressEl) {
 							progressEl.style.transition = 'transform 0ms';
 							progressEl.style.transform = `scaleX(${progressPausedAt})`;
-							progressEl.offsetHeight; // force reflow
+							void progressEl.offsetHeight; // force reflow
 							progressEl.style.transition = `transform ${remaining}ms linear`;
 							progressEl.style.transform = 'scaleX(0)';
 						}
@@ -566,8 +579,8 @@ export class KTToast extends KTComponent implements KTToastInterface {
 			inst?.element.remove();
 			KTToast.toasts.delete(id!);
 			// Try to call onDismiss if available in the toast instance (if stored)
-			if (typeof (inst as any).options?.onDismiss === 'function') {
-				(inst as any).options.onDismiss(id);
+			if (typeof inst.options?.onDismiss === 'function') {
+				inst.options.onDismiss(id);
 			}
 			KTToast._fireEventOnElement(inst.element, 'hidden', { id });
 			KTToast._dispatchEventOnElement(inst.element, 'hidden', { id });

package/src/components/toast/types.ts

@@ -60,6 +60,7 @@ export interface KTToastClassNames {
 	message?: string; // Message
 	toolbar?: string; // Toolbar
 	actions?: string; // Actions
+	progress?: string; // Progress indicator
 }
 
 /**
@@ -93,7 +94,9 @@ export interface KTToastConfigInterface {
 	progress?: boolean;
 }
 
-export interface KTToastInterface {}
+export interface KTToastInterface {
+	dispose(): void;
+}
 
 export interface KTToastOptions {
 	/** Custom content for the toast. HTMLElement, function returning HTMLElement, or string (DOM id). If set, replaces all default markup. */
@@ -169,4 +172,5 @@ export interface KTToastInstance {
 	id: string; // Toast unique ID
 	element: HTMLElement; // Toast DOM element
 	timeoutId: number; // Timer ID for auto-dismiss
+	options?: KTToastOptions; // Resolved options used to create this toast
 }

package/src/components/toggle/toggle.ts

@@ -25,6 +25,7 @@ export class KTToggle extends KTComponent implements KTToggleInterface {
 	};
 	protected override _config: KTToggleConfigInterface = this._defaultConfig;
 	protected _targetElement: HTMLElement;
+	protected _clickHandler: (() => void) | null = null;
 
 	constructor(
 		element: HTMLElement,
@@ -48,9 +49,18 @@ export class KTToggle extends KTComponent implements KTToggleInterface {
 	protected _handlers(): void {
 		if (!this._element) return;
 
-		this._element.addEventListener('click', () => {
+		this._clickHandler = () => {
 			this._toggle();
-		});
+		};
+		this._element.addEventListener('click', this._clickHandler);
+	}
+
+	public override dispose(): void {
+		if (this._element && this._clickHandler) {
+			this._element.removeEventListener('click', this._clickHandler);
+			this._clickHandler = null;
+		}
+		super.dispose();
 	}
 
 	private _getTargetElement(): HTMLElement | null {