npm - @keenthemes/ktui - Versions diffs - 1.0.28 → 1.1.0 - Mend

@keenthemes/ktui 1.0.28 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (288) hide show

package/examples/modal/select-dropdown-container.html DELETED Viewed

@@ -1,129 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Modal Select Dropdown Container</title>
-	<link rel="stylesheet" href="../../dist/styles.css">
-</head>
-<body class="bg-gray-50 min-h-screen">
-	<!-- Example 1: Select with dropdownContainer set to modal -->
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto mb-6">
-		<button class="px-3 py-1.5 bg-gray-900 text-white rounded text-sm hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400" data-kt-modal-toggle="#selectModal">
-			Open Select Modal
-		</button>
-	</div>
-	<!-- Example 2: Select with search inside modal -->
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mx-auto mb-6">
-		<button class="px-3 py-1.5 bg-gray-900 text-white rounded text-sm hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400" data-kt-modal-toggle="#selectModalWithSearch">
-			Open Searchable Select Modal
-		</button>
-	</div>
-	<!-- Modal 1: Select with dropdownContainer -->
-	<div class="kt-modal kt-modal-center" data-kt-modal="true" id="selectModal">
-		<div class="kt-modal-content max-w-md">
-			<div class="kt-modal-header">
-				<h3 class="kt-modal-title">Select with Dropdown Container</h3>
-				<button
-					type="button"
-					class="kt-modal-close"
-					aria-label="Close modal"
-					data-kt-modal-dismiss="#selectModal"
-				>
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-						<path d="M18 6 6 18"/>
-						<path d="m6 6 12 12"/>
-					</svg>
-				</button>
-			</div>
-			<div class="kt-modal-body space-y-6">
-				<div>
-					<label class="block mb-2 font-medium text-gray-700">Example 1: dropdownContainer: "#selectModal"</label>
-					<select
-						class="kt-select"
-						data-kt-select="true"
-						data-kt-select-placeholder="Select a framework..."
-						data-kt-select-config='{
-							"dropdownContainer": "#selectModal"
-						}'
-					>
-						<option value="react">React</option>
-						<option value="nextjs">Next.js</option>
-						<option value="angular">Angular</option>
-						<option value="vue">Vue</option>
-						<option value="svelte">Svelte</option>
-						<option value="ember">Ember</option>
-						<option value="nuxt">Nuxt.js</option>
-						<option value="remix">Remix</option>
-					</select>
-				</div>
-			</div>
-		</div>
-	</div>
-	<!-- Modal 2: Select with search and dropdownContainer -->
-	<div class="kt-modal kt-modal-center" data-kt-modal="true" id="selectModalWithSearch">
-		<div class="kt-modal-content max-w-md">
-			<div class="kt-modal-header">
-				<h3 class="kt-modal-title">Select with Search</h3>
-				<button
-					type="button"
-					class="kt-modal-close"
-					aria-label="Close modal"
-					data-kt-modal-dismiss="#selectModalWithSearch"
-				>
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-						<path d="M18 6 6 18"/>
-						<path d="m6 6 12 12"/>
-					</svg>
-				</button>
-			</div>
-			<div class="kt-modal-body space-y-6">
-				<div>
-					<label class="block mb-2 font-medium text-gray-700">Example 2: dropdownContainer with search</label>
-					<select
-						class="kt-select"
-						data-kt-select="true"
-						data-kt-select-placeholder="Search and select..."
-						data-kt-select-config='{
-							"dropdownContainer": "#selectModalWithSearch",
-							"enableSearch": true
-						}'
-					>
-						<option value="javascript">JavaScript</option>
-						<option value="typescript">TypeScript</option>
-						<option value="python">Python</option>
-						<option value="java">Java</option>
-						<option value="csharp">C#</option>
-						<option value="cpp">C++</option>
-						<option value="rust">Rust</option>
-						<option value="go">Go</option>
-						<option value="ruby">Ruby</option>
-						<option value="php">PHP</option>
-						<option value="swift">Swift</option>
-						<option value="kotlin">Kotlin</option>
-					</select>
-				</div>
-			</div>
-		</div>
-	</div>
-	<script src="../../dist/ktui.js"></script>
-	<script>
-		document.addEventListener('DOMContentLoaded', function() {
-			if (window.KTModal) {
-				KTModal.init();
-			}
-			if (window.KTSelect) {
-				KTSelect.init();
-			}
-		});
-	</script>
-</body>
-</html>

package/examples/select/avatar.html DELETED Viewed

@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Avatar</title>
-	<link rel="stylesheet" href="../../dist/styles.css">
-</head>
-<body class="bg-gray-50 min-h-screen">
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
-		<form class="flex flex-col gap-6">
-			<div>
-				<label class="block mb-2 font-medium text-gray-700" for="select-basic">Avatar</label>
-				<select
-					class="kt-select"
-					data-kt-select="true"
-					data-kt-select-enable-search="true"
-					data-kt-select-search-placeholder="Search..."
-					data-kt-select-placeholder="Select a user..."
-					data-kt-select-config='{
-						"displayTemplate": "<div class=\"flex items-center gap-2\"><img src=\"{{avatar}}\" alt=\"{{text}}\" class=\"size-5 border border-input rounded-full\" /> <span class=\"text-foreground\">{{text}}</span></div>",
-						"optionTemplate": "<div class=\"flex items-center gap-2\"><img src=\"{{avatar}}\" alt=\"{{text}}\" class=\"size-6 border border-input rounded-full\" /> <span class=\"text-foreground\">{{text}}</span></div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-3.5 ms-auto hidden text-primary kt-select-option-selected:block\"><path d=\"M20 6 9 17l-5-5\"/></svg>",
-						"optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
-					}'
-				>
-					<option value="1" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/women/68.jpg"}'>Ana Nilson</option>
-					<option value="2" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/men/46.jpg"}'>Robert Brown</option>
-					<option value="3" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/men/29.jpg"}'>John Doe</option>
-					<option value="4" selected data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/women/48.jpg"}'>Nina Erin</option>
-					<option value="5" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/men/58.jpg"}'>Mark Larson</option>
-					<option value="6" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/men/68.jpg"}'>Nick Strong</option>
-					<option value="7" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/women/68.jpg"}'>Ana Nilson</option>
-					<option value="8" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/women/58.jpg"}'>Kate Leo</option>
-					<option value="9" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/men/38.jpg"}'>Elon White</option>
-					<option value="10" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/men/8.jpg"}'>Bill Smith</option>
-				</select>
-			</div>
-		</form>
-	</div>
-	<script src="../../dist/ktui.js"></script>
-</body>
-</html>

package/examples/select/basic-usage.html DELETED Viewed

@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Basic Usage</title>
-	<link rel="stylesheet" href="../../dist/styles.css">
-</head>
-<body class="bg-gray-50 min-h-screen">
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
-		<form class="flex flex-col gap-6">
-			<div>
-				<label class="block mb-2 font-medium text-gray-700" for="select-basic">Basic Usage</label>
-				<select
-					class="kt-select"
-					data-kt-select="true"
-					data-kt-select-placeholder="Select a framework"
-					data-kt-select-config='{
-						"optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
-					}'
-				>
-					<option value="react">React</option>
-					<option value="nextjs">Next.js</option>
-					<option value="angular">Angular</option>
-					<option value="vue">Vue</option>
-					<option value="svelte">Svelte</option>
-					<option value="ember">Ember</option>
-					<option value="nuxt">Nuxt.js</option>
-					<option value="remix">Remix</option>
-				</select>
-			</div>
-		</form>
-	</div>
-	<script src="../../dist/ktui.js"></script>
-</body>
-</html>

package/examples/select/country.html DELETED Viewed

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Search</title>
-	<link rel="stylesheet" href="../../dist/styles.css">
-</head>
-<body class="bg-gray-50 min-h-screen">
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
-		<form class="flex flex-col gap-6">
-			<div>
-				<label class="block mb-2 font-medium text-gray-700" for="select-basic">Search</label>
-				<select
-					class="kt-select"
-					data-kt-select="true"
-					data-kt-select-enable-search="true"
-					data-kt-select-search-placeholder="Search..."
-					data-kt-select-placeholder="Select a country..."
-					data-kt-select-config='{
-						"displayTemplate": "<div class=\"flex items-center leading-none gap-2\">{{flag}}<span class=\"text-foreground\">{{text}}</span></div>",
-						"optionTemplate": "<div class=\"flex items-center leading-none gap-2\">{{flag}} <span class=\"text-foreground\">{{text}}</span></div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-3.5 ms-auto hidden text-primary kt-select-option-selected:block\"><path d=\"M20 6 9 17l-5-5\"/></svg></div>"
-					}'
-				>
-					<option value="usa" data-kt-select-option='{"flag": "🇺🇸"}'>USA</option>
-					<option value="germany" data-kt-select-option='{"flag": "🇩🇪"}'>Germany</option>
-					<option value="italy" data-kt-select-option='{"flag": "🇮🇹"}'>Italy</option>
-					<option value="france" data-kt-select-option='{"flag": "🇫🇷"}'>France</option>
-					<option value="spain" data-kt-select-option='{"flag": "🇪🇸"}'>Spain</option>
-					<option value="canada" data-kt-select-option='{"flag": "🇨🇦"}'>Canada</option>
-					<option value="australia" data-kt-select-option='{"flag": "🇦🇺"}'>Australia</option>
-					<option value="japan" data-kt-select-option='{"flag": "🇯🇵"}'>Japan</option>
-				</select>
-			</div>
-		</form>
-	</div>
-	<script src="../../dist/ktui.js"></script>
-</body>
-</html>

package/examples/select/dark-mode.html DELETED Viewed

@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="dark">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Dark Mode Multi-Select Test</title>
-	<link rel="stylesheet" href="../../dist/styles.css">
-	<script>
-		// Toggle dark mode for testing
-		function toggleDarkMode() {
-			const html = document.documentElement;
-			const isDark = html.classList.toggle('dark');
-			const button = document.getElementById('darkModeToggle');
-			button.textContent = isDark ? 'Light Mode' : 'Dark Mode';
-		}
-		// Set initial button text on load
-		window.addEventListener('DOMContentLoaded', () => {
-			const button = document.getElementById('darkModeToggle');
-			const isDark = document.documentElement.classList.contains('dark');
-			button.textContent = isDark ? 'Light Mode' : 'Dark Mode';
-		});
-	</script>
-</head>
-<body class="bg-gray-50 dark:bg-gray-900 min-h-screen p-4 transition-colors duration-200">
-	<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-gray-900/50 p-8 w-full max-w-md mt-6 mx-auto border border-gray-200 dark:border-gray-700">
-		<div class="mb-6 flex items-center justify-between">
-			<h1 class="text-xl font-bold text-gray-900 dark:text-white">Dark Mode Test</h1>
-			<button
-				id="darkModeToggle"
-				onclick="toggleDarkMode()"
-				class="px-4 py-2 bg-blue-600 dark:bg-blue-500 text-white rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200 font-medium">
-				Dark Mode
-			</button>
-		</div>
-		<form class="flex flex-col gap-8">
-			<!-- Multi-select with tags -->
-			<div>
-				<label class="block mb-3 font-semibold text-gray-800 dark:text-gray-200" for="select-team">
-					Team Members (Tags)
-				</label>
-				<select
-					class="kt-select"
-					data-kt-select
-					data-kt-select-placeholder="Select team members..."
-					data-kt-select-multiple="true"
-					data-kt-select-tags="true"
-					data-kt-select-pre-selected="jenny,mike"
-					data-kt-select-config='{
-						"showSelectedCount": true,
-						"enableSelectAll": true
-					}'>
-					<option value="jenny">Jenny Wilson</option>
-					<option value="mike">Mike Johnson</option>
-					<option value="david">David Brown</option>
-					<option value="sarah">Sarah Davis</option>
-					<option value="alex">Alex Thompson</option>
-					<option value="lisa">Lisa Anderson</option>
-				</select>
-			</div>
-			<!-- Multi-select without tags -->
-			<div>
-				<label class="block mb-3 font-semibold text-gray-800 dark:text-gray-200" for="select-cities">
-					Cities (Multiple)
-				</label>
-				<select
-					class="kt-select"
-					data-kt-select="true"
-					data-kt-select-multiple="true"
-					data-kt-select-max-selections="3"
-					data-kt-select-placeholder="Select cities..."
-					data-kt-select-pre-selected="london,paris">
-					<option value="amsterdam">Amsterdam</option>
-					<option value="barcelona">Barcelona</option>
-					<option value="london">London</option>
-					<option value="new-york">New York</option>
-					<option value="paris">Paris</option>
-					<option value="rome">Rome</option>
-					<option value="tokyo">Tokyo</option>
-				</select>
-			</div>
-		</form>
-	</div>
-	<script src="../../dist/ktui.js"></script>
-</body>
-</html>

package/examples/select/description.html DELETED Viewed

@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Description</title>
-	<link rel="stylesheet" href="../../dist/styles.css">
-</head>
-<body class="bg-gray-50 min-h-screen">
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
-		<form class="flex flex-col gap-6">
-			<div>
-				<label class="block mb-2 font-medium text-gray-700" for="select-basic">Description</label>
-				<select
-					class="kt-select"
-					data-kt-select="true"
-					data-kt-select-placeholder="Select an option..."
-					data-kt-select-config='{
-						"optionTemplate": "<div class=\"flex items-center grow gap-2\"><div class=\"flex flex-col gap-0.5\"><span class=\"font-semibold text-foreground\">{{text}}</span><span class=\"text-xs text-muted-foreground\">{{desc}}</span></div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-3.5 ms-auto hidden text-primary kt-select-option-selected:block\"><path d=\"M20 6 9 17l-5-5\"/></svg></div>"
-					}'
-				>
-					<option value="full_access"
-						data-kt-select-option='{"desc": "Can modify and delete"}'>
-						Full access
-					</option>
-					<option value="read_write"
-						data-kt-select-option='{"desc": "Can read and write"}'>
-						Read and write
-					</option>
-					<option value="read_only" selected
-						data-kt-select-option='{"desc": "Can only read"}'>
-						Read only
-					</option>
-					<option value="view_only"
-						data-kt-select-option='{"desc": "Can only view"}'>
-						View only
-					</option>
-					<option value="no_access"
-						data-kt-select-option='{"desc": "No access"}'>
-						No access
-					</option>
-				</select>
-			</div>
-		</form>
-	</div>
-	<script src="../../dist/ktui.js"></script>
-</body>
-</html>

package/examples/select/disable-option.html DELETED Viewed

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Disable Option</title>
-	<link rel="stylesheet" href="../../dist/styles.css">
-</head>
-<body class="bg-gray-50 min-h-screen">
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
-		<form class="flex flex-col gap-6">
-			<div>
-				<label class="block mb-2 font-medium text-gray-700" for="select-basic">Disable Option</label>
-				<select
-					class="kt-select"
-					data-kt-select="true"
-					data-kt-select-placeholder="Select a framework...">
-					<option value="react">React</option>
-					<option value="nextjs" disabled>Next.js</option>
-					<option value="angular">Angular</option>
-					<option value="vue">Vue</option>
-					<option value="svelte" disabled>Svelte</option>
-					<option value="ember">Ember</option>
-					<option value="nuxt">Nuxt.js</option>
-					<option value="remix">Remix</option>
-				</select>
-			</div>
-		</form>
-	</div>
-	<script src="../../dist/ktui.js"></script>
-</body>
-</html>

package/examples/select/disable-select.html DELETED Viewed

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Disable Select</title>
-	<link rel="stylesheet" href="../../dist/styles.css">
-</head>
-<body class="bg-gray-50 min-h-screen">
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
-		<form class="flex flex-col gap-6">
-			<div>
-				<label class="block mb-2 font-medium text-gray-700" for="select-basic">Disable Select</label>
-				<select
-					disabled
-					class="kt-select"
-					data-kt-select="true"
-					data-kt-select-disabled="true"
-					data-kt-select-placeholder="Select a libray...">
-					<option value="reui">ReUI	</option>
-					<option value="ktui" disabled>KtUI</option>
-					<option value="metronic">Metronic</option>
-					<option value="keenthemes">Keenthemes</option>
-				</select>
-			</div>
-		</form>
-	</div>
-	<script src="../../dist/ktui.js"></script>
-</body>
-</html>

package/examples/select/dropdowncontainer.html DELETED Viewed

@@ -1,111 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Dropdown Container Test (Issue #52)</title>
-	<link rel="stylesheet" href="../../dist/styles.css">
-</head>
-<body class="bg-gray-50 min-h-screen">
-	<!-- Test 1: Default Placement (Control) -->
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto mb-6">
-		<form class="flex flex-col gap-6">
-			<div>
-				<label class="block mb-2 font-medium text-gray-700">Test 1: Default (No dropdownContainer)</label>
-				<p class="text-sm text-gray-500 mb-3">Expected: Selected class updates correctly</p>
-				<select
-					id="test-default"
-					class="kt-select"
-					data-kt-select="true"
-					data-kt-select-placeholder="Select a framework...">
-					<option value="react">React</option>
-					<option value="nextjs">Next.js</option>
-					<option value="angular">Angular</option>
-					<option value="vue">Vue</option>
-					<option value="svelte">Svelte</option>
-				</select>
-			</div>
-		</form>
-	</div>
-	<!-- Test 2: dropdownContainer: "body" (Issue #52) -->
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mx-auto mb-6">
-		<form class="flex flex-col gap-6">
-			<div>
-				<label class="block mb-2 font-medium text-gray-700">Test 2: dropdownContainer: "body"</label>
-				<p class="text-sm text-gray-500 mb-3">
-					Expected: Selected class updates correctly<br>
-				</p>
-				<select
-					id="test-body"
-					class="kt-select"
-					data-kt-select="true"
-					data-kt-select-placeholder="Select a language..."
-					data-kt-select-config='{
-						"dropdownContainer": "body"
-					}'>
-					<option value="javascript">JavaScript</option>
-					<option value="typescript">TypeScript</option>
-					<option value="python">Python</option>
-					<option value="rust">Rust</option>
-					<option value="go">Go</option>
-				</select>
-			</div>
-		</form>
-	</div>
-	<!-- Test 3: Custom Container -->
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mx-auto mb-6">
-		<form class="flex flex-col gap-6">
-			<div>
-				<label class="block mb-2 font-medium text-gray-700">Test 3: dropdownContainer: "#custom-container"</label>
-				<p class="text-sm text-gray-500 mb-3">Expected: Selected class updates correctly</p>
-				<select
-					id="test-custom"
-					class="kt-select"
-					data-kt-select="true"
-					data-kt-select-placeholder="Select a database..."
-					data-kt-select-config='{
-						"dropdownContainer": "#custom-container"
-					}'>
-					<option value="postgresql">PostgreSQL</option>
-					<option value="mysql">MySQL</option>
-					<option value="mongodb">MongoDB</option>
-					<option value="redis">Redis</option>
-					<option value="sqlite">SQLite</option>
-				</select>
-			</div>
-		</form>
-	</div>
-	<!-- Custom container element -->
-	<div id="custom-container"></div>
-	<script src="../../dist/ktui.js"></script>
-	<script>
-		// Add console logging to help with debugging
-		document.addEventListener('DOMContentLoaded', function() {
-			// Add change listeners to log selected class status
-			['test-default', 'test-body', 'test-custom'].forEach(id => {
-				const select = document.getElementById(id);
-				if (select) {
-					select.addEventListener('change', function() {
-						setTimeout(() => {
-							const dropdown = select.nextElementSibling?.querySelector('[data-kt-select-dropdown]');
-							if (dropdown) {
-								const options = dropdown.querySelectorAll('[data-kt-select-option]');
-								const selectedCount = dropdown.querySelectorAll('[data-kt-select-option].selected').length;
-								console.log(`${id}: Found ${options.length} options, ${selectedCount} with .selected class`);
-							}
-						}, 100);
-					});
-				}
-			});
-		});
-	</script>
-</body>
-</html>