@smartnet360/svelte-components 0.0.43 → 0.0.44

package/dist/core/Charts/ChartComponent.svelte

@@ -341,16 +341,21 @@
 {/snippet}
 
 <div class="chart-component" bind:this={componentElement}>
-	<!-- Global Controls Section (appears above tabs/scrollspy) -->
-	{#if showGlobalControls && showControlsPanel}
-		<GlobalControls controls={globalControls} onUpdate={handleControlsUpdate} />
+	<!-- Floating Global Controls (renders as fixed position overlay) -->
+	{#if showGlobalControls}
+		<GlobalControls 
+			controls={globalControls} 
+			onUpdate={handleControlsUpdate}
+			isExpanded={showControlsPanel}
+			onToggle={() => showControlsPanel = !showControlsPanel}
+		/>
 	{/if}
 	
 	<!-- Always render the main content (tabs or scrollspy) -->
 	{#if mode === 'tabs'}
 		<!-- Tab Mode with Navigation -->
 		<div class="tabs-container">
-			<!-- Tab Navigation with Controls Toggle -->
+			<!-- Tab Navigation -->
 			<div class="nav-tabs-wrapper">
 				<ul class="nav nav-tabs" role="tablist">
 					{#each layout.sections as section, index}
@@ -369,21 +374,6 @@
 						</li>
 					{/each}
 				</ul>
-				
-				<!-- Controls Toggle Button -->
-				{#if showGlobalControls}
-					<button
-						class="btn btn-sm btn-outline-secondary controls-toggle"
-						onclick={() => showControlsPanel = !showControlsPanel}
-						title={showControlsPanel ? "Hide Controls" : "Show Controls"}
-						type="button"
-					>
-						<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-							<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
-						</svg>
-						<span class="ms-1">{showControlsPanel ? 'Hide' : 'Show'} Controls</span>
-					</button>
-				{/if}
 			</div>
 
 			<!-- Tab Content -->
@@ -402,7 +392,7 @@
 	{:else if mode === 'scrollspy'}
 		<!-- ScrollSpy Mode with Navigation -->
 		<div class="scrollspy-container">
-			<!-- ScrollSpy Navigation with Controls Toggle -->
+			<!-- ScrollSpy Navigation -->
 			<nav class="scrollspy-nav">
 				<div class="nav-wrapper">
 					<ul class="nav nav-pills">
@@ -418,21 +408,6 @@
 							</li>
 						{/each}
 					</ul>
-					
-					<!-- Controls Toggle Button -->
-					{#if showGlobalControls}
-						<button
-							class="btn btn-sm btn-outline-secondary controls-toggle"
-							onclick={() => showControlsPanel = !showControlsPanel}
-							title={showControlsPanel ? "Hide Controls" : "Show Controls"}
-							type="button"
-						>
-							<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-								<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
-							</svg>
-							<!-- <span class="ms-1">{showControlsPanel ? 'Hide' : 'Show'} Controls</span> -->
-						</button>
-					{/if}
 				</div>
 			</nav>
 
@@ -722,11 +697,10 @@
 		max-height: 100%; /* Constrain to slot */
 	}
 
-	/* Tab navigation wrapper with toggle button */
+	/* Tab navigation wrapper */
 	.nav-tabs-wrapper {
 		display: flex;
 		align-items: center;
-		gap: 1rem;
 		border-bottom: 1px solid #dee2e6;
 	}
 
@@ -736,25 +710,7 @@
 		margin-bottom: 0;
 	}
 
-	.controls-toggle {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		white-space: nowrap;
-		border-radius: 0.25rem;
-		transition: all 0.2s ease;
-	}
-
-	.controls-toggle:hover {
-		background-color: #f8f9fa;
-		border-color: #6c757d;
-	}
-
-	.controls-toggle svg {
-		flex-shrink: 0;
-	}
-
-	/* ScrollSpy navigation wrapper with toggle button */
+	/* ScrollSpy navigation wrapper */
 	.scrollspy-nav .nav-wrapper {
 		display: flex;
 		align-items: center;

package/dist/core/Charts/GlobalControls.svelte

@@ -6,9 +6,11 @@
 	interface Props {
 		controls: GlobalChartControls;
 		onUpdate: (controls: GlobalChartControls) => void;
+		isExpanded?: boolean;
+		onToggle?: () => void;
 	}
 
-	let { controls, onUpdate }: Props = $props();
+	let { controls, onUpdate, isExpanded = false, onToggle }: Props = $props();
 
 	function updateControls(updates: Partial<GlobalChartControls>) {
 		onUpdate({
@@ -48,178 +50,377 @@
 	}
 </script>
 
-<div class="global-controls">
-	<div class="controls-section">
-		<!-- <span class="controls-label">Display Controls:</span> -->
-		
-		<!-- Moving Average Controls -->
-		{#if controls.movingAverage}
-			<div class="control-group">
-				<!-- MA Enable Toggle Button -->
-				<input
-					type="checkbox"
-					class="btn-check"
-					id="maToggle"
-					checked={controls.movingAverage.enabled}
-					onchange={() => updateMovingAverage({ enabled: !controls.movingAverage!.enabled })}
-				/>
-				<label class="btn btn-outline-primary btn-sm" for="maToggle">
-					Moving Average
-				</label>
-				
-				{#if controls.movingAverage.enabled}
-					<div class="control-subgroup">
-						<!-- MA Window Size -->
-						<div class="btn-group btn-group-sm" role="group" aria-label="MA Window">
-							<input
-								type="radio"
-								class="btn-check"
-								name="maWindow"
-								id="maWindowAuto"
-								checked={controls.movingAverage.windowOverride === undefined}
-								onchange={() => updateMovingAverage({ windowOverride: undefined })}
-							/>
-							<label class="btn btn-outline-primary" for="maWindowAuto">Auto</label>
-
-							<input
-								type="radio"
-								class="btn-check"
-								name="maWindow"
-								id="maWindow7"
-								checked={controls.movingAverage.windowOverride === 7}
-								onchange={() => updateMovingAverage({ windowOverride: 7 })}
-							/>
-							<label class="btn btn-outline-primary" for="maWindow7">7</label>
-
-							<input
-								type="radio"
-								class="btn-check"
-								name="maWindow"
-								id="maWindow14"
-								checked={controls.movingAverage.windowOverride === 14}
-								onchange={() => updateMovingAverage({ windowOverride: 14 })}
-							/>
-							<label class="btn btn-outline-primary" for="maWindow14">14</label>
+<!-- Floating Controls Container -->
+<div class="floating-controls-wrapper">
+	<!-- Toggle Button (always visible) -->
+	<button
+		class="floating-toggle-btn"
+		onclick={onToggle}
+		title={isExpanded ? "Hide Controls" : "Show Controls"}
+		type="button"
+		aria-expanded={isExpanded}
+		aria-label="Toggle chart controls"
+	>
+		<svg width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
+			<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+		</svg>
+		<svg 
+			class="chevron" 
+			class:expanded={isExpanded}
+			width="12" 
+			height="12" 
+			fill="currentColor" 
+			viewBox="0 0 16 16"
+		>
+			<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+		</svg>
+	</button>
 
+	<!-- Controls Panel (expandable) -->
+	{#if isExpanded}
+		<div class="floating-controls-panel">
+			<div class="controls-section">
+				<!-- Top Row: Markers and Legend side by side -->
+				<div class="controls-row">
+					<!-- Markers Toggle -->
+					{#if controls.markers}
+						<div class="control-group-inline">
 							<input
-								type="radio"
+								type="checkbox"
 								class="btn-check"
-								name="maWindow"
-								id="maWindow24"
-								checked={controls.movingAverage.windowOverride === 24}
-								onchange={() => updateMovingAverage({ windowOverride: 24 })}
+								id="markersToggle"
+								checked={controls.markers.enabled}
+								onchange={() => updateMarkers({ enabled: !controls.markers!.enabled })}
 							/>
-							<label class="btn btn-outline-primary" for="maWindow24">24</label>
+							<label class="btn btn-outline-secondary btn-sm" for="markersToggle">
+								Markers
+							</label>
+						</div>
+					{/if}
 
+					<!-- Legend Toggle -->
+					{#if controls.legend}
+						<div class="control-group-inline">
 							<input
-								type="radio"
+								type="checkbox"
 								class="btn-check"
-								name="maWindow"
-								id="maWindow30"
-								checked={controls.movingAverage.windowOverride === 30}
-								onchange={() => updateMovingAverage({ windowOverride: 30 })}
+								id="legendToggle"
+								checked={controls.legend.enabled}
+								onchange={() => updateLegend({ enabled: !controls.legend!.enabled })}
 							/>
-							<label class="btn btn-outline-primary" for="maWindow30">30</label>
+							<label class="btn btn-outline-secondary btn-sm" for="legendToggle">
+								Legend
+							</label>
 						</div>
+					{/if}
+				</div>
 
-						<!-- Show Original Toggle Button -->
+				<!-- Bottom: Moving Average Controls -->
+				{#if controls.movingAverage}
+					<div class="control-group">
+						<!-- MA Enable Toggle Button -->
 						<input
 							type="checkbox"
 							class="btn-check"
-							id="showOriginal"
-							checked={controls.movingAverage.showOriginal}
-							onchange={() => updateMovingAverage({ showOriginal: !controls.movingAverage!.showOriginal })}
+							id="maToggle"
+							checked={controls.movingAverage.enabled}
+							onchange={() => updateMovingAverage({ enabled: !controls.movingAverage!.enabled })}
 						/>
-						<label class="btn btn-outline-primary btn-sm ms-2" for="showOriginal">
-							Show Original
+						<label class="btn btn-outline-primary btn-sm" for="maToggle">
+							Moving Average
 						</label>
+						
+						{#if controls.movingAverage.enabled}
+							<div class="control-subgroup">
+								<!-- MA Window Size -->
+								<div class="btn-group btn-group-sm" role="group" aria-label="MA Window">
+									<input
+										type="radio"
+										class="btn-check"
+										name="maWindow"
+										id="maWindowAuto"
+										checked={controls.movingAverage.windowOverride === undefined}
+										onchange={() => updateMovingAverage({ windowOverride: undefined })}
+									/>
+									<label class="btn btn-outline-primary" for="maWindowAuto">Auto</label>
+
+									<input
+										type="radio"
+										class="btn-check"
+										name="maWindow"
+										id="maWindow7"
+										checked={controls.movingAverage.windowOverride === 7}
+										onchange={() => updateMovingAverage({ windowOverride: 7 })}
+									/>
+									<label class="btn btn-outline-primary" for="maWindow7">7</label>
+
+									<input
+										type="radio"
+										class="btn-check"
+										name="maWindow"
+										id="maWindow14"
+										checked={controls.movingAverage.windowOverride === 14}
+										onchange={() => updateMovingAverage({ windowOverride: 14 })}
+									/>
+									<label class="btn btn-outline-primary" for="maWindow14">14</label>
+
+									<input
+										type="radio"
+										class="btn-check"
+										name="maWindow"
+										id="maWindow24"
+										checked={controls.movingAverage.windowOverride === 24}
+										onchange={() => updateMovingAverage({ windowOverride: 24 })}
+									/>
+									<label class="btn btn-outline-primary" for="maWindow24">24</label>
+
+									<input
+										type="radio"
+										class="btn-check"
+										name="maWindow"
+										id="maWindow30"
+										checked={controls.movingAverage.windowOverride === 30}
+										onchange={() => updateMovingAverage({ windowOverride: 30 })}
+									/>
+									<label class="btn btn-outline-primary" for="maWindow30">30</label>
+								</div>
+
+								<!-- Show Original Toggle Button -->
+								<input
+									type="checkbox"
+									class="btn-check"
+									id="showOriginal"
+									checked={controls.movingAverage.showOriginal}
+									onchange={() => updateMovingAverage({ showOriginal: !controls.movingAverage!.showOriginal })}
+								/>
+								<label class="btn btn-outline-primary btn-sm ms-2" for="showOriginal">
+									Show Original
+								</label>
+							</div>
+						{/if}
 					</div>
 				{/if}
 			</div>
-		{/if}
-
-		<!-- Markers Toggle -->
-		{#if controls.markers}
-			<div class="control-group">
-				<input
-					type="checkbox"
-					class="btn-check"
-					id="markersToggle"
-					checked={controls.markers.enabled}
-					onchange={() => updateMarkers({ enabled: !controls.markers!.enabled })}
-				/>
-				<label class="btn btn-outline-secondary btn-sm" for="markersToggle">
-					Markers
-				</label>
-			</div>
-		{/if}
-
-		<!-- Legend Toggle -->
-		{#if controls.legend}
-			<div class="control-group">
-				<input
-					type="checkbox"
-					class="btn-check"
-					id="legendToggle"
-					checked={controls.legend.enabled}
-					onchange={() => updateLegend({ enabled: !controls.legend!.enabled })}
-				/>
-				<label class="btn btn-outline-secondary btn-sm" for="legendToggle">
-					Legend
-				</label>
-			</div>
-		{/if}
-		
-	</div>
+		</div>
+	{/if}
 </div>
 
 <style>
-	/* Global Controls Section */
-	.global-controls {
-		flex-shrink: 0;
-		background-color: #f8f9fa;
-		border-bottom: 1px solid #dee2e6;
-		padding: 0.5rem 1rem;
+	/* Floating Controls Wrapper - positioned in top-right */
+	.floating-controls-wrapper {
+		position: fixed;
+		top: 0.5rem;
+		right: 0.5rem;
+		z-index: 1000;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		gap: 0.5rem;
+	}
+
+	/* Toggle Button - Always visible */
+	.floating-toggle-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.5rem 0.75rem;
+		background: rgba(255, 255, 255, 0.95);
+		backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(10px);
+		border: 1px solid rgba(0, 0, 0, 0.08);
+		border-radius: 8px;
+		box-shadow: 
+			0 2px 8px rgba(0, 0, 0, 0.08),
+			0 4px 16px rgba(0, 0, 0, 0.04);
+		cursor: pointer;
+		transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
 		font-size: 0.875rem;
+		font-weight: 500;
+		color: #495057;
+		opacity: 0.5;
+	}
+
+	.floating-toggle-btn:hover {
+		background: rgba(255, 255, 255, 1);
+		border-color: rgba(0, 0, 0, 0.12);
+		box-shadow: 
+			0 4px 12px rgba(0, 0, 0, 0.12),
+			0 8px 24px rgba(0, 0, 0, 0.08);
+		transform: translateY(-1px);
+		opacity: 1;
+	}
+
+	.floating-toggle-btn:active {
+		transform: translateY(0);
+		box-shadow: 
+			0 1px 4px rgba(0, 0, 0, 0.08),
+			0 2px 8px rgba(0, 0, 0, 0.04);
+	}
+
+	.floating-toggle-btn .chevron {
+		transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+		opacity: 0.6;
+	}
+
+	.floating-toggle-btn .chevron.expanded {
+		transform: rotate(180deg);
+	}
+
+	/* Floating Controls Panel - Glass-morphism style */
+	.floating-controls-panel {
+		background: rgba(255, 255, 255, 0.95);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
+		border: 1px solid rgba(0, 0, 0, 0.08);
+		border-radius: 12px;
+		box-shadow: 
+			0 4px 16px rgba(0, 0, 0, 0.1),
+			0 8px 32px rgba(0, 0, 0, 0.08);
+		padding: 1rem;
+		min-width: 320px;
+		max-width: 480px;
+		opacity: 1;
+		animation: slideIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.floating-controls-panel:hover {
+		opacity: 1;
+	}
+
+	@keyframes slideIn {
+		from {
+			opacity: 0;
+			transform: translateY(-8px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
 	}
 
 	.controls-section {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	/* Horizontal row for Markers and Legend at top */
+	.controls-row {
 		display: flex;
 		align-items: center;
-		gap: 1.5rem;
-		flex-wrap: wrap;
+		gap: 0.75rem;
+		padding-bottom: 0.75rem;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
 	}
 
-	.control-group {
+	/* Inline control group for horizontal layout */
+	.control-group-inline {
 		display: flex;
 		align-items: center;
+	}
+
+	/* Vertical control group for Moving Average */
+	.control-group {
+		display: flex;
+		flex-direction: column;
 		gap: 0.75rem;
 	}
 
+	.control-group > label:first-of-type {
+		font-weight: 500;
+	}
+
 	.control-subgroup {
 		display: flex;
+		flex-wrap: wrap;
 		align-items: center;
 		gap: 0.5rem;
-		padding-left: 0.5rem;
-		border-left: 2px solid #dee2e6;
+		padding-left: 0.75rem;
+		padding-top: 0.5rem;
+		border-left: 2px solid rgba(0, 0, 0, 0.08);
 	}
 
-	.global-controls :global(.btn-group-sm .btn) {
-		padding: 0.25rem 0.75rem;
-		font-size: 0.75rem;
+	/* Bootstrap button overrides for better integration */
+	.floating-controls-panel :global(.btn-sm) {
+		padding: 0.375rem 0.75rem;
+		font-size: 0.8125rem;
 		font-weight: 500;
+		border-radius: 6px;
+		transition: all 150ms ease;
+	}
+
+	.floating-controls-panel :global(.btn-outline-primary) {
+		border-color: rgba(13, 110, 253, 0.3);
+	}
+
+	.floating-controls-panel :global(.btn-outline-primary:hover) {
+		background-color: rgba(13, 110, 253, 0.1);
+		border-color: rgba(13, 110, 253, 0.5);
+	}
+
+	.floating-controls-panel :global(.btn-check:checked + .btn-outline-primary) {
+		background-color: #0d6efd;
+		border-color: #0d6efd;
+	}
+
+	.floating-controls-panel :global(.btn-outline-secondary) {
+		border-color: rgba(108, 117, 125, 0.3);
+	}
+
+	.floating-controls-panel :global(.btn-outline-secondary:hover) {
+		background-color: rgba(108, 117, 125, 0.1);
+		border-color: rgba(108, 117, 125, 0.5);
+	}
+
+	.floating-controls-panel :global(.btn-check:checked + .btn-outline-secondary) {
+		background-color: #6c757d;
+		border-color: #6c757d;
+	}
+
+	.floating-controls-panel :global(.btn-group) {
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+		border-radius: 6px;
+		overflow: hidden;
 	}
 
 	/* Responsive adjustments */
 	@media (max-width: 768px) {
-		.controls-section {
-			flex-direction: column;
-			align-items: flex-start;
-			gap: 0.75rem;
+		.floating-controls-wrapper {
+			top: 0.5rem;
+			right: 0.5rem;
+		}
+
+		.floating-controls-panel {
+			min-width: 280px;
+			max-width: calc(100vw - 2rem);
+			padding: 0.875rem;
+		}
+
+		.control-subgroup {
+			padding-left: 0.5rem;
+		}
+	}
+
+	/* Dark mode support (optional - activate if needed) */
+	@media (prefers-color-scheme: dark) {
+		.floating-toggle-btn {
+			background: rgba(33, 37, 41, 0.95);
+			border-color: rgba(255, 255, 255, 0.1);
+			color: #f8f9fa;
 		}
-		
+
+		.floating-toggle-btn:hover {
+			background: rgba(33, 37, 41, 1);
+			border-color: rgba(255, 255, 255, 0.15);
+		}
+
+		.floating-controls-panel {
+			background: rgba(33, 37, 41, 0.95);
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+
 		.control-subgroup {
-			flex-wrap: wrap;
+			border-left-color: rgba(255, 255, 255, 0.1);
 		}
 	}
 </style>

package/dist/core/Charts/GlobalControls.svelte.d.ts

@@ -2,6 +2,8 @@ import type { GlobalChartControls } from './charts.model.js';
 interface Props {
     controls: GlobalChartControls;
     onUpdate: (controls: GlobalChartControls) => void;
+    isExpanded?: boolean;
+    onToggle?: () => void;
 }
 declare const GlobalControls: import("svelte").Component<Props, {}, "">;
 type GlobalControls = ReturnType<typeof GlobalControls>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.43",
+	"version": "0.0.44",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",