@keenthemes/ktui 1.1.6 → 1.2.1

package/lib/esm/index.js

@@ -24,6 +24,10 @@ import { KTTogglePassword } from './components/toggle-password';
 import { KTDataTable } from './components/datatable';
 import { KTSelect } from './components/select';
 import { KTToast } from './components/toast';
+import { KTRating } from './components/rating';
+import { KTRepeater } from './components/repeater';
+import { KTClipboard } from './components/clipboard';
+import { KTRangeSlider } from './components/range-slider';
 export { KTDropdown } from './components/dropdown';
 export { KTModal } from './components/modal';
 export { KTDrawer } from './components/drawer';
@@ -45,6 +49,10 @@ export { KTTogglePassword } from './components/toggle-password';
 export { KTDataTable } from './components/datatable';
 export { KTSelect } from './components/select';
 export { KTToast } from './components/toast';
+export { KTRating } from './components/rating';
+export { KTRepeater } from './components/repeater';
+export { KTClipboard } from './components/clipboard';
+export { KTRangeSlider } from './components/range-slider';
 var KTComponents = {
     init: function () {
         KTDropdown.init();
@@ -68,6 +76,10 @@ var KTComponents = {
         KTDataTable.init();
         KTSelect.init();
         KTToast.init();
+        KTRating.init();
+        KTRepeater.init();
+        KTClipboard.init();
+        KTRangeSlider.init();
     },
 };
 export default KTComponents;

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/lib/esm/types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+export declare type KTCallableType = (event?: Event, target?: HTMLElement) => void | boolean;
+export declare type KTViewPortType = {
+    width: number;
+    height: number;
+};
+export declare type KTOffsetType = {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+};
+export declare type KTOptionType = string | number | boolean | object;
+//# sourceMappingURL=types.d.ts.map

package/lib/esm/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,OAAO,MAAM,cAAc,GAAG,CACpC,KAAK,CAAC,EAAE,KAAK,EACb,MAAM,CAAC,EAAE,WAAW,KAChB,IAAI,GAAG,OAAO,CAAC;AAEpB,MAAM,CAAC,OAAO,MAAM,cAAc,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,CAAC,OAAO,MAAM,YAAY,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,CAAC,OAAO,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC"}

package/package.json

@@ -1,11 +1,11 @@
 {
 	"name": "@keenthemes/ktui",
-	"version": "1.1.6",
+	"version": "1.2.1",
 	"description": "Free & Open-Source Tailwind UI Components by Keenthemes",
 	"homepage": "https://ktui.io",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/keenthemes/ktui.git"
+		"url": "git+https://github.com/keenthemes/ktui.git"
 	},
 	"keywords": [
 		"reui",
@@ -61,6 +61,7 @@
 		"lib",
 		"src",
 		"styles",
+		"skills",
 		"styles.css",
 		"package.json",
 		"README.md",
@@ -75,7 +76,7 @@
 		"build:webpack": "webpack --mode=development",
 		"build:webpack:watch": "webpack --env watch=true --mode=development",
 		"build:prod": "webpack --env production --mode=production",
-		"build:lib": "tsc --outDir lib/cjs && tsc -m es6 --outDir lib/esm",
+		"build:lib": "tsc -p tsconfig.lib.json --outDir lib/cjs && tsc -p tsconfig.lib.json -m es6 --outDir lib/esm",
 		"build:css": "npx @tailwindcss/cli -i ./styles/main.css -o ./dist/styles.css --watch",
 		"build:css:once": "npx @tailwindcss/cli -i ./styles/main.css -o ./dist/styles.css",
 		"dev": "concurrently \"npm run build:webpack:watch\" \"npm run build:css\"",
@@ -119,7 +120,6 @@
 		"@popperjs/core": "^2.11.8"
 	},
 	"overrides": {
-		"ajv": "^8.0.0",
 		"minimatch": "^10.2.3",
 		"rollup": "^4.59.0",
 		"serialize-javascript": "^7.0.3",

package/skills/ktui-components/SKILL.md

@@ -0,0 +1,41 @@
+---
+name: ktui-components
+description: Guides correct use of KtUI (Keenthemes Tailwind UI) components—imports from @keenthemes/ktui, init pattern, and docs. Use this skill when building UI with KtUI, adding or customizing KtUI components, or when the user mentions KtUI, ktui, Keenthemes components, or Tailwind UI components from Keenthemes.
+---
+
+# KtUI Components
+
+Use this skill when working with [KtUI](https://ktui.io)—free Tailwind UI components by Keenthemes. It ensures correct package usage, initialization, and reference to official docs.
+
+## Package and imports
+
+- **Package:** `@keenthemes/ktui` (npm install `@keenthemes/ktui`).
+- **Import pattern (ESM):** Import components and/or the init helper from the package root:
+  - Single component: `import { KTModal } from '@keenthemes/ktui';`
+  - Init all: `import { KTComponents } from '@keenthemes/ktui';` then call `KTComponents.init()` after DOM ready.
+- **Types (TypeScript):** Types are exported from the same entry; use the package root (e.g. `@keenthemes/ktui`) for types, not deep `lib/esm` paths.
+- **Styles:** Include KtUI CSS (e.g. from the package or built `dist/styles.css`) and ensure Tailwind and CSS variables are set up as in the [installation docs](https://ktui.io/docs/getting-started/installation).
+
+## Initialization
+
+- Call `KTComponents.init()` once after the DOM is ready so that data-attribute–driven components (dropdowns, modals, tabs, etc.) are initialized.
+- **Frameworks (React, Vue, Next):** Run init after the root is mounted (e.g. `useEffect` with empty deps, or `onMounted`) so the DOM with `data-kt-*` attributes exists before init.
+- For dynamically added markup (e.g. after route change or lazy load), run `KTComponents.init()` again or use per-component init (e.g. `KTModal.init()` on the new container).
+- **SSR:** Call init only on the client (e.g. inside `useEffect` or when `typeof document !== 'undefined'`), never during server render.
+- Per-component init is also available (e.g. `KTModal.init()`) when not using the full init.
+
+## Documentation
+
+- **Official docs:** [https://ktui.io](https://ktui.io) — use for component APIs, examples, and markup.
+- **Doc paths:** Getting started: `ktui.io/docs/installation`, `ktui.io/docs/theming`, `ktui.io/docs/typescript`, `ktui.io/docs/dark-mode`, `ktui.io/docs/rtl`, `ktui.io/docs/changelog`. Components: `ktui.io/docs/<component>` (e.g. `ktui.io/docs/modal`, `ktui.io/docs/tooltip`, `ktui.io/docs/datatable`, `ktui.io/docs/dropdown`, `ktui.io/docs/repeater`).
+- Prefer docs and examples from ktui.io over inferring markup or options.
+
+## Common pitfalls
+
+- **Components not opening or reacting:** Ensure `KTComponents.init()` ran after the relevant DOM was in the page; for SPAs, run init after navigation or after injecting KtUI markup.
+- **Styles missing or wrong:** Confirm KtUI CSS and CSS variables are loaded (see [installation](https://ktui.io/docs/installation), [theming](https://ktui.io/docs/theming)).
+- **SSR/hydration:** Do not call init during server render; run it only in the browser after mount.
+
+## Component list (reference)
+
+Components exported from `@keenthemes/ktui` include: KTDropdown, KTModal, KTDrawer, KTCollapse, KTDismiss, KTTabs, KTAccordion, KTScrollspy, KTScrollable, KTScrollto, KTSticky, KTReparent, KTToggle, KTTooltip, KTStepper, KTThemeSwitch, KTImageInput, KTTogglePassword, KTDataTable, KTSelect, KTToast, KTRating, KTRepeater. See the package exports or ktui.io for the full list and usage.

package/skills/ktui-theming/SKILL.md

@@ -0,0 +1,50 @@
+---
+name: ktui-theming
+description: Guides KtUI theming with CSS variables, light/dark mode, and semantic colors. Use this skill when the user asks about KtUI colors, theme, dark mode, customizing appearance, or CSS variables for KtUI.
+---
+
+# KtUI Theming
+
+Use this skill when working with [KtUI](https://ktui.io) theming—colors, dark mode, and custom appearance. KtUI uses CSS variables and a background/foreground convention; prefer these over inventing custom classes.
+
+## Convention
+
+- **Background/foreground:** KtUI follows a Shadcn-inspired convention. Background colors omit the `-background` suffix (e.g. `bg-primary` uses `var(--primary)`). Foreground colors use `-foreground` (e.g. `text-primary-foreground`).
+- **Semantic classes:** Use KtUI semantic utilities (e.g. `bg-background`, `text-foreground`, `bg-primary`, `text-card`, `kt-btn`, `kt-card`) so theming stays consistent.
+
+## Key CSS variables
+
+Define or override in your Tailwind entry (e.g. `style.css`). KtUI expects at least:
+
+- **Surfaces:** `--background`, `--foreground`; `--card`, `--card-foreground`; `--popover`, `--popover-foreground`.
+- **Brand:** `--primary`, `--primary-foreground`; `--secondary`, `--secondary-foreground`.
+- **Muted / accent:** `--muted`, `--muted-foreground`; `--accent`, `--accent-foreground`.
+- **Destructive:** `--destructive`, `--destructive-foreground`.
+- **Borders and inputs:** `--border`, `--input`, `--ring`.
+- **Radius:** `--radius` (e.g. `0.5rem`).
+
+Use `oklch()` or any valid CSS color. Example:
+
+```css
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(14.1% 0.005 285.823);
+  --primary: oklch(62.3% 0.214 259.815);
+  --primary-foreground: oklch(1 0 0);
+  --radius: 0.5rem;
+}
+```
+
+## Dark mode
+
+- **Variables:** Override the same variables under a `.dark` scope (or your dark-mode class). KtUI docs use `.dark` for dark theme.
+- **Tailwind:** Add the dark variant, e.g. `@custom-variant dark (&:is(.dark *));` in your Tailwind entry so utilities like `dark:bg-background` work.
+- **Theme switch:** Use the KTThemeSwitch component or toggle the `.dark` class on `<html>` (or a wrapper) to switch between light and dark variables.
+
+## Documentation
+
+- **Theming:** [ktui.io/docs/theming](https://ktui.io/docs/theming)
+- **Dark mode:** [ktui.io/docs/dark-mode](https://ktui.io/docs/dark-mode)
+- **Installation** (variables setup): [ktui.io/docs/installation](https://ktui.io/docs/installation)
+
+Prefer the official variable list and examples from these pages over guessing variable names or values.

package/src/components/clipboard/__tests__/clipboard.test.ts

@@ -0,0 +1,438 @@
+/**
+ * Tests for KTClipboard component
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { KTClipboard } from '../clipboard';
+
+function flushPromises() {
+	return new Promise<void>((resolve) => {
+		setTimeout(() => resolve(), 0);
+	});
+}
+
+function createFixture(options?: {
+	withPredefinedText?: boolean;
+	predefinedTextValue?: string;
+	predefinedTextAttributeEmpty?: boolean;
+	action?: 'copy' | 'cut';
+	withTarget?: boolean;
+	targetExists?: boolean;
+	targetType?: 'input' | 'textarea' | 'div';
+	targetValue?: string;
+	targetTextContent?: string;
+}) {
+	document.body.innerHTML = '';
+
+	const targetType = options?.targetType ?? 'input';
+	const targetId = 'kt-clipboard-target';
+	const targetExists = options?.targetExists ?? true;
+
+	const container = document.createElement('div');
+
+	const trigger = document.createElement('button');
+	trigger.type = 'button';
+	trigger.setAttribute('data-kt-clipboard', 'true');
+
+	if (options?.action) {
+		trigger.setAttribute('data-kt-clipboard-action', options.action);
+	}
+
+	if (options?.withTarget) {
+		trigger.setAttribute('data-kt-clipboard-target', `#${targetId}`);
+	}
+
+	if (options?.withPredefinedText) {
+		if (options.predefinedTextAttributeEmpty) {
+			trigger.setAttribute('data-kt-clipboard-text', '');
+		} else {
+			trigger.setAttribute(
+				'data-kt-clipboard-text',
+				options.predefinedTextValue ?? '',
+			);
+		}
+	}
+
+	trigger.textContent = 'Copy';
+	container.appendChild(trigger);
+
+	if (targetExists && options?.withTarget) {
+		if (targetType === 'input') {
+			const input = document.createElement('input');
+			input.id = targetId;
+			input.value = options?.targetValue ?? 'input value';
+			container.appendChild(input);
+		} else if (targetType === 'textarea') {
+			const textarea = document.createElement('textarea');
+			textarea.id = targetId;
+			textarea.value = options?.targetValue ?? 'textarea value';
+			container.appendChild(textarea);
+		} else {
+			const div = document.createElement('div');
+			div.id = targetId;
+			div.textContent = options?.targetTextContent ?? 'div text';
+			container.appendChild(div);
+		}
+	}
+
+	document.body.appendChild(container);
+
+	return { container, trigger };
+}
+
+describe('KTClipboard', () => {
+	let originalExecCommand: any;
+
+	beforeEach(() => {
+		// Ensure a clean clipboard state between tests.
+		originalExecCommand = document.execCommand;
+	});
+
+	afterEach(() => {
+		document.body.innerHTML = '';
+		// Restore execCommand (if it was replaced).
+		document.execCommand = originalExecCommand as any;
+	});
+
+	it('copies predefined text (text wins over target)', async () => {
+		const writeTextMock = vi.fn().mockResolvedValue(undefined);
+		Object.defineProperty(navigator, 'clipboard', {
+			value: { writeText: writeTextMock },
+			configurable: true,
+		});
+
+		const { trigger } = createFixture({
+			withPredefinedText: true,
+			predefinedTextValue: 'hello',
+			withTarget: true,
+			targetExists: false, // target selector is missing; text must still win
+			action: 'copy',
+		});
+
+		const successEvents: CustomEvent[] = [];
+		trigger.addEventListener('kt.clipboard.success', (e) =>
+			successEvents.push(e as CustomEvent),
+		);
+		const errorEvents: CustomEvent[] = [];
+		trigger.addEventListener('kt.clipboard.error', (e) =>
+			errorEvents.push(e as CustomEvent),
+		);
+
+		new KTClipboard(trigger);
+		trigger.click();
+
+		await flushPromises();
+
+		expect(writeTextMock).toHaveBeenCalledTimes(1);
+		expect(writeTextMock).toHaveBeenCalledWith('hello');
+		expect(successEvents.length).toBe(1);
+		expect(errorEvents.length).toBe(0);
+	});
+
+	it('falls back to execCommand when Clipboard API is unavailable', async () => {
+		Object.defineProperty(navigator, 'clipboard', {
+			value: undefined,
+			configurable: true,
+		});
+
+		const execCommandMock = vi.fn().mockReturnValue(true);
+		document.execCommand = execCommandMock as any;
+
+		const { trigger } = createFixture({
+			withPredefinedText: true,
+			predefinedTextValue: 'fallback text',
+			action: 'copy',
+		});
+
+		const successEvents: CustomEvent[] = [];
+		trigger.addEventListener('kt.clipboard.success', (e) =>
+			successEvents.push(e as CustomEvent),
+		);
+
+		new KTClipboard(trigger);
+		trigger.click();
+		await flushPromises();
+
+		expect(execCommandMock).toHaveBeenCalledWith('copy');
+		expect(successEvents.length).toBe(1);
+	});
+
+	it('dispatches error if fallback execCommand fails', async () => {
+		Object.defineProperty(navigator, 'clipboard', {
+			value: undefined,
+			configurable: true,
+		});
+
+		const execCommandMock = vi.fn().mockReturnValue(false);
+		document.execCommand = execCommandMock as any;
+
+		const { trigger } = createFixture({
+			withPredefinedText: true,
+			predefinedTextValue: 'will fail',
+			action: 'copy',
+		});
+
+		const errorEvents: CustomEvent[] = [];
+		trigger.addEventListener('kt.clipboard.error', (e) =>
+			errorEvents.push(e as CustomEvent),
+		);
+
+		new KTClipboard(trigger);
+		trigger.click();
+		await flushPromises();
+
+		expect(execCommandMock).toHaveBeenCalledWith('copy');
+		expect(errorEvents.length).toBe(1);
+	});
+
+	it('dispatches error when data-kt-clipboard-text attribute is present but empty (and ignores target)', async () => {
+		const writeTextMock = vi.fn().mockResolvedValue(undefined);
+		Object.defineProperty(navigator, 'clipboard', {
+			value: { writeText: writeTextMock },
+			configurable: true,
+		});
+
+		const { trigger } = createFixture({
+			withPredefinedText: true,
+			predefinedTextAttributeEmpty: true,
+			withTarget: true,
+			targetType: 'input',
+			targetValue: 'should not be used',
+			action: 'copy',
+		});
+
+		const successEvents: CustomEvent[] = [];
+		trigger.addEventListener('kt.clipboard.success', (e) =>
+			successEvents.push(e as CustomEvent),
+		);
+		const errorEvents: CustomEvent[] = [];
+		trigger.addEventListener('kt.clipboard.error', (e) =>
+			errorEvents.push(e as CustomEvent),
+		);
+
+		new KTClipboard(trigger);
+		trigger.click();
+		await flushPromises();
+
+		expect(writeTextMock).not.toHaveBeenCalled();
+		expect(successEvents.length).toBe(0);
+		expect(errorEvents.length).toBe(1);
+	});
+
+	it('dispatches error when Clipboard API writeText rejects', async () => {
+		const writeTextMock = vi
+			.fn()
+			.mockRejectedValue(new Error('NotAllowedError: permission denied'));
+		Object.defineProperty(navigator, 'clipboard', {
+			value: { writeText: writeTextMock },
+			configurable: true,
+		});
+
+		const { trigger } = createFixture({
+			withPredefinedText: true,
+			predefinedTextValue: 'hello',
+			action: 'copy',
+		});
+
+		const errorEvents: CustomEvent[] = [];
+		trigger.addEventListener('kt.clipboard.error', (e) =>
+			errorEvents.push(e as CustomEvent),
+		);
+
+		new KTClipboard(trigger);
+		trigger.click();
+		await flushPromises();
+
+		expect(writeTextMock).toHaveBeenCalledTimes(1);
+		expect(errorEvents.length).toBe(1);
+	});
+
+	it('dispatches error for cut with predefined text when target is missing', async () => {
+		const writeTextMock = vi.fn().mockResolvedValue(undefined);
+		Object.defineProperty(navigator, 'clipboard', {
+			value: { writeText: writeTextMock },
+			configurable: true,
+		});
+
+		const { trigger } = createFixture({
+			withPredefinedText: true,
+			predefinedTextValue: 'hello',
+			withTarget: false,
+			action: 'cut',
+		});
+
+		const errorEvents: CustomEvent[] = [];
+		trigger.addEventListener('kt.clipboard.error', (e) =>
+			errorEvents.push(e as CustomEvent),
+		);
+
+		new KTClipboard(trigger);
+		trigger.click();
+		await flushPromises();
+
+		expect(writeTextMock).not.toHaveBeenCalled();
+		expect(errorEvents.length).toBe(1);
+	});
+
+	it('copies from input target value', async () => {
+		const writeTextMock = vi.fn().mockResolvedValue(undefined);
+		Object.defineProperty(navigator, 'clipboard', {
+			value: { writeText: writeTextMock },
+			configurable: true,
+		});
+
+		const { trigger } = createFixture({
+			withPredefinedText: false,
+			withTarget: true,
+			targetType: 'input',
+			targetValue: 'input value',
+			action: 'copy',
+		});
+
+		new KTClipboard(trigger);
+		trigger.click();
+		await flushPromises();
+
+		expect(writeTextMock).toHaveBeenCalledTimes(1);
+		expect(writeTextMock).toHaveBeenCalledWith('input value');
+	});
+
+	it('copies from non-input target textContent', async () => {
+		const writeTextMock = vi.fn().mockResolvedValue(undefined);
+		Object.defineProperty(navigator, 'clipboard', {
+			value: { writeText: writeTextMock },
+			configurable: true,
+		});
+
+		const { trigger } = createFixture({
+			withPredefinedText: false,
+			withTarget: true,
+			targetType: 'div',
+			targetTextContent: 'div text content',
+			action: 'copy',
+		});
+
+		new KTClipboard(trigger);
+		trigger.click();
+		await flushPromises();
+
+		expect(writeTextMock).toHaveBeenCalledTimes(1);
+		expect(writeTextMock).toHaveBeenCalledWith('div text content');
+	});
+
+	it('dispatches error when selector misses and no predefined text exists', async () => {
+		const writeTextMock = vi.fn().mockResolvedValue(undefined);
+		Object.defineProperty(navigator, 'clipboard', {
+			value: { writeText: writeTextMock },
+			configurable: true,
+		});
+
+		const { trigger } = createFixture({
+			withPredefinedText: false,
+			withTarget: true,
+			targetExists: false,
+			action: 'copy',
+		});
+
+		const errorEvents: CustomEvent[] = [];
+		trigger.addEventListener('kt.clipboard.error', (e) =>
+			errorEvents.push(e as CustomEvent),
+		);
+
+		new KTClipboard(trigger);
+		trigger.click();
+		await flushPromises();
+
+		expect(writeTextMock).not.toHaveBeenCalled();
+		expect(errorEvents.length).toBe(1);
+	});
+
+	it('dispatches error for cut when target is not input/textarea', async () => {
+		const writeTextMock = vi.fn().mockResolvedValue(undefined);
+		Object.defineProperty(navigator, 'clipboard', {
+			value: { writeText: writeTextMock },
+			configurable: true,
+		});
+
+		const { trigger } = createFixture({
+			withPredefinedText: false,
+			withTarget: true,
+			targetType: 'div',
+			targetTextContent: 'not cuttable',
+			action: 'cut',
+		});
+
+		const errorEvents: CustomEvent[] = [];
+		trigger.addEventListener('kt.clipboard.error', (e) =>
+			errorEvents.push(e as CustomEvent),
+		);
+
+		new KTClipboard(trigger);
+		trigger.click();
+		await flushPromises();
+
+		expect(writeTextMock).not.toHaveBeenCalled();
+		expect(errorEvents.length).toBe(1);
+	});
+
+	it('cuts from input target (clears value on success)', async () => {
+		const writeTextMock = vi.fn().mockResolvedValue(undefined);
+		Object.defineProperty(navigator, 'clipboard', {
+			value: { writeText: writeTextMock },
+			configurable: true,
+		});
+
+		const { trigger } = createFixture({
+			withPredefinedText: false,
+			withTarget: true,
+			targetType: 'input',
+			targetValue: 'cut value',
+			action: 'cut',
+		});
+
+		const input = document.getElementById(
+			'kt-clipboard-target',
+		) as HTMLInputElement;
+		expect(input.value).toBe('cut value');
+
+		new KTClipboard(trigger);
+		trigger.click();
+		await flushPromises();
+
+		expect(writeTextMock).toHaveBeenCalledWith('cut value');
+		expect(input.value).toBe('');
+	});
+
+	it('is idempotent: createInstances does not double bind', async () => {
+		const writeTextMock = vi.fn().mockResolvedValue(undefined);
+		Object.defineProperty(navigator, 'clipboard', {
+			value: { writeText: writeTextMock },
+			configurable: true,
+		});
+
+		const { trigger } = createFixture({
+			withPredefinedText: true,
+			predefinedTextValue: 'once',
+			action: 'copy',
+		});
+
+		// Explicit instance creation.
+		new KTClipboard(trigger);
+
+		// Should not create another handler on the same element.
+		KTClipboard.createInstances();
+
+		trigger.click();
+		await flushPromises();
+
+		expect(writeTextMock).toHaveBeenCalledTimes(1);
+	});
+
+	it('returns null for getInstance on non-initialized trigger', () => {
+		document.body.innerHTML = '';
+		const trigger = document.createElement('button');
+		trigger.setAttribute('data-kt-clipboard', 'true');
+		document.body.appendChild(trigger);
+
+		expect(KTClipboard.getInstance(trigger)).toBeNull();
+	});
+});