@cloudparker/moldex.js 4.1.1 → 4.1.3

package/dist/views/core/button/components/button/button.svelte

@@ -93,16 +93,16 @@
 	let btnAppearanceClassName = $derived.by(() => {
 		switch (appearance) {
 			case 'none':
-				return 'text-base-800 dark:text-base-300 hover:text-base-900 disabled:text-base-400 dark:disabled:text-base-500 dark:hover:text-base-200';
+				return 'text-neutral-800 dark:text-neutral-300 hover:text-neutral-900 disabled:text-neutral-400 dark:disabled:text-neutral-500 dark:hover:text-neutral-200';
 			case 'base':
-				return 'text-base-800 dark:text-base-300 hover:text-base-900 disabled:text-base-400 dark:disabled:text-base-500 dark:hover:text-base-200 bg-base-200 dark:bg-base-700 hover:bg-base-300 dark:hover:bg-base-600 disabled:hover:bg-base-200 dark:disabled:hover:bg-base-700 ';
+				return 'text-neutral-800 dark:text-neutral-300 hover:text-neutral-900 disabled:text-neutral-400 dark:disabled:text-neutral-500 dark:hover:text-neutral-200 bg-neutral-200 dark:bg-neutral-700 hover:bg-neutral-300 dark:hover:bg-neutral-600 disabled:hover:bg-neutral-200 dark:disabled:hover:bg-neutral-700 ';
 			case 'primary':
-				return 'text-primary-100 hover:text-primary-50 bg-primary-600 hover:bg-primary-500 disabled:text-base-400 dark:disabled:text-base-500 disabled:bg-base-200 dark:disabled:bg-base-700 disabled:hover:bg-base-200 dark:disabled:hover:bg-base-700  ';
+				return 'text-primary-100 hover:text-primary-50 bg-primary-600 hover:bg-primary-500 disabled:text-neutral-400 dark:disabled:text-neutral-500 disabled:bg-neutral-200 dark:disabled:bg-neutral-700 disabled:hover:bg-neutral-200 dark:disabled:hover:bg-neutral-700  ';
 			case 'border':
 			case 'border-base':
-				return 'border-2 text-base-800 dark:text-base-300 hover:text-base-900 disabled:text-base-400 dark:disabled:text-base-500 dark:hover:text-base-200 border-base-200 hover:border-base-300 dark:border-base-700 dark:hover:border-base-600 dark:disabled:border-base-200 dark:disabled:hover:border-base-200 dark:disabled:border-base-700 dark:disabled:hover:border-base-700  ';
+				return 'border-2 text-neutral-800 dark:text-neutral-300 hover:text-neutral-900 disabled:text-neutral-400 dark:disabled:text-neutral-500 dark:hover:text-neutral-200 border-neutral-200 hover:border-neutral-300 dark:border-neutral-700 dark:hover:border-neutral-600 dark:disabled:border-neutral-200 dark:disabled:hover:border-neutral-200 dark:disabled:border-neutral-700 dark:disabled:hover:border-neutral-700  ';
 			case 'border-primary':
-				return 'border-2 text-primary hover:text-primary-500 disabled:text-base-400 dark:disabled:text-base-500 border-primary hover:border-primary-500 dark:border-primary-600 dark:hover:border-primary-500 dark:disabled:border-base-200 dark:disabled:hover:border-base-200 dark:disabled:border-base-700 dark:disabled:hover:border-base-700  ';
+				return 'border-2 text-primary hover:text-primary-500 disabled:text-neutral-400 dark:disabled:text-neutral-500 border-primary hover:border-primary-500 dark:border-primary-600 dark:hover:border-primary-500 dark:disabled:border-neutral-200 dark:disabled:hover:border-neutral-200 dark:disabled:border-neutral-700 dark:disabled:hover:border-neutral-700  ';
 		}
 	});
 

package/dist/views/core/button/components/button-back/button-back.svelte

@@ -34,7 +34,7 @@
 		appearance="none"
 		size="none"
 		{iconPath}
-		className="w-12 h-12 rounded-full hover:bg-base-50 dark:hover:bg-base-900 {className}"
+		className="w-12 h-12 rounded-full hover:bg-neutral-50 dark:hover:bg-neutral-900 {className}"
 		{iconClassName}
 		{onClick}
 	/>

package/dist/views/core/button/components/button-close-icon/button-close-icon.svelte

@@ -33,7 +33,7 @@
 	<Button
 		{id}
 		{iconPath}
-		className="w-12 h-12 rounded-full text-base-500 hover:text-base-600 hover:bg-base-50 dark:hover:bg-base-900 transition-all {className}"
+		className="w-12 h-12 rounded-full text-neutral-500 hover:text-neutral-600 hover:bg-neutral-50 dark:hover:bg-neutral-900 transition-all {className}"
 		{iconClassName}
 		{onClick}
 	/>

package/dist/views/core/button/components/button-dropdown/button-dropdown.svelte

@@ -135,7 +135,7 @@
 
 		<div
 			role="dialog"
-			class="absolute right-0 z-10 max-h-[50vh] min-w-40 origin-top overflow-y-auto rounded-md bg-white shadow-lg transition duration-100 ease-out dark:bg-base-800 dark:shadow-black {dropdownClassName} {dropdownState ===
+			class="absolute right-0 z-10 max-h-[50vh] min-w-40 origin-top overflow-y-auto rounded-md bg-white shadow-lg transition duration-100 ease-out dark:bg-neutral-800 dark:shadow-black {dropdownClassName} {dropdownState ===
 			DropdownStateEnum.OPENED
 				? `scale-100 transform opacity-100 ${dropdownOpenClassName}`
 				: `scale-60 transform opacity-0 ${dropdownCloseClassName}`}"

package/dist/views/core/button/components/button-list-item/button-list-item.svelte

@@ -128,7 +128,7 @@
 		{/if}
 		{#if subtitle}
 			<div
-				class="overflow-hidden whitespace-nowrap overflow-ellipsis text-base-400 dark:text-base-300 text-sm font-light {subtitleClassName}"
+				class="overflow-hidden whitespace-nowrap overflow-ellipsis text-neutral-400 dark:text-neutral-300 text-sm font-light {subtitleClassName}"
 			>
 				{subtitle || ''}
 			</div>
@@ -140,14 +140,14 @@
 				path={isChecked ? checkboxIconPath : uncheckboxIconPath}
 				className="w-5 h-5 {checkboxClassName} {isChecked
 					? `text-primary ${checkboxIconClassName}`
-					: `text-base-400 ${uncheckboxIconClassName}`}"
+					: `text-neutral-400 ${uncheckboxIconClassName}`}"
 			/>
 		</div>
 	{/if}
 
 	{#if hasArrow}
 		<div class="flex-none">
-			<Icon path={arrowIconPath} className="w-5 h-5 text-base-500 {arrowClassName}  " />
+			<Icon path={arrowIconPath} className="w-5 h-5 text-neutral-500 {arrowClassName}  " />
 		</div>
 	{/if}
 	{#if hasMenu}
@@ -167,7 +167,7 @@
 <Button
 	id="{id}-list-item-{index}"
 	type="button"
-	className="w-full !text-start !justify-start gap-4 hover:bg-base-50 transition rounded-none dark:hover:bg-base-700 h-full {className}"
+	className="w-full !text-start !justify-start gap-4 hover:bg-neutral-50 transition rounded-none dark:hover:bg-neutral-700 h-full {className}"
 	{onClick}
 	{disabled}
 	{appearance}

package/dist/views/core/button/components/switch/switch.svelte

@@ -58,7 +58,7 @@
 	onclick={toggle}
 	aria-label="Switch"
 	class="relative inline-flex items-center rounded-full transition-colors duration-300
-		{checked ? 'bg-primary-600' : 'bg-base-300'} 
+		{checked ? 'bg-primary-600' : 'bg-neutral-300'} 
 		{disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'} 
 		{sizeClass.wrapper} {className}"
 >

package/dist/views/core/dialog/components/dialog/dialog.svelte

@@ -305,7 +305,7 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		tabindex="-1"
-		class="relative flex flex-col transform overflow-hidden bg-base-50 dark:bg-base-800 text-left transition-all outline-none {size ==
+		class="relative flex flex-col transform overflow-hidden bg-neutral-50 dark:bg-neutral-800 text-left transition-all outline-none {size ==
 		DialogSizeEnum.FULL
 			? 'max-h-dvh max-w-dvw'
 			: 'max-h-[90dvh] max-w-[90dvw]'} {screenSizeClassNameMap[size]} {isOpened
@@ -337,12 +337,12 @@
 					</div>
 					<div class="py-2 flex-grow">
 						{#if hasTitle}
-							<div class="text-xl text-base-800 dark:text-base-300 {titleClassName}">
+							<div class="text-xl text-neutral-800 dark:text-neutral-300 {titleClassName}">
 								{@html customTitle || title || ''}
 							</div>
 						{/if}
 						{#if hasSubtitle}
-							<div class="text-sm text-gray-500 dark:text-base-500 {subtitleClassName}">
+							<div class="text-sm text-gray-500 dark:text-neutral-500 {subtitleClassName}">
 								{subtitle || ''}
 							</div>
 						{/if}

package/dist/views/core/dialog/components/msg-dialog/msg-dialog.svelte

@@ -17,6 +17,6 @@
 	});
 </script>
 
-<div class="p-6 text-base-800 dark:text-base-300 {className}">
+<div class="p-6 text-neutral-800 dark:text-neutral-300 {className}">
 	<div>{@html msg || ''}</div>
 </div>

package/dist/views/core/dialog/components/picker-dialog/picker-dialog.svelte

@@ -168,14 +168,14 @@
 								path={isSelected ? checkboxIconPath : uncheckboxIconPath}
 								className="w-5 h-5 {checkboxClassName} {isSelected
 									? `text-primary ${checkboxIconClassName}`
-									: `text-base-400 ${uncheckboxIconClassName}`}"
+									: `text-neutral-400 ${uncheckboxIconClassName}`}"
 							/>
 						</div>
 					{/if}
 
 					{#if hasArrow}
 						<div>
-							<Icon path={arrowIconPath} className="w-5 h-5 text-base-500 {arrowClassName}  " />
+							<Icon path={arrowIconPath} className="w-5 h-5 text-neutral-500 {arrowClassName}  " />
 						</div>
 					{/if}
 				</ButtonListItem>

package/dist/views/core/drawer/components/drawer/drawer.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
-
 	type PositionType = 'left' | 'right' | 'top' | 'bottom';
 
 	type PropsType = {
@@ -60,7 +59,7 @@
 	<div {id} class="relative z-30 {containerClassName}" role="dialog" aria-modal="true">
 		<!-- Backdrop -->
 		<div
-			class="fixed inset-0 bg-base-900/10 bg-base-50/10 transition-opacity ease-linear duration-300 {isOpened
+			class="fixed inset-0 bg-neutral-900/10 bg-neutral-50/10 transition-opacity ease-linear duration-300 {isOpened
 				? 'opacity-100'
 				: 'opacity-0'}  {backdropClassName}"
 			aria-hidden="true"
@@ -86,7 +85,7 @@
 				{drawerClassName} "
 			>
 				<div
-					class="grow w-72 bg-white dark:bg-base-800 text-base-800 dark:text-base-200 border-base-100 dark:border-base-700 {className}"
+					class="grow w-72 bg-white dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 border-neutral-100 dark:border-neutral-700 {className}"
 				>
 					{#if children}
 						{@render children()}
@@ -97,9 +96,15 @@
 						{@render floatingSnippet()}
 					{/if}
 				</div>
-				</div>
+			</div>
 
-			<button class="flex-grow cursor-auto" type="button" onclick={handelBackdropClick} aria-label="Close drawer" title="Close drawer"></button>
+			<button
+				class="flex-grow cursor-auto"
+				type="button"
+				onclick={handelBackdropClick}
+				aria-label="Close drawer"
+				title="Close drawer"
+			></button>
 		</div>
 	</div>
 {/if}

package/dist/views/core/input/components/checkbox-field/checkbox-field.svelte

@@ -46,10 +46,10 @@
 
 {#snippet labelSnippet()}
 	<div class="text-sm leading-6 mx-4 flex-grow">
-		<div class="font-medium text-sm text-base-900 dark:text-base-100 {labelClassName}">
+		<div class="font-medium text-sm text-neutral-900 dark:text-neutral-100 {labelClassName}">
 			{label || ''}
 		</div>
-		<div class="text-xs text-base-500 dark:text-base-500 {descClassName}">{desc || ''}</div>
+		<div class="text-xs text-neutral-500 dark:text-neutral-500 {descClassName}">{desc || ''}</div>
 	</div>
 {/snippet}
 <div class=" {containerClassName}">
@@ -64,7 +64,7 @@
 			aria-describedby="comments-description"
 			name={name || id}
 			type="checkbox"
-			class="h-6 w-6 appearance-none cursor-pointer rounded color-primary hover:color-primary bg-base-200 dark:bg-base-700 dark:checked:bg-primary checked:bg-primary checked:focus:bg-primary checked:hover:bg-primary focus:ring-primary focus:shadow-primary outline-primary border-base-300 dark:border-base-600 {className}"
+			class="h-6 w-6 appearance-none cursor-pointer rounded color-primary hover:color-primary bg-neutral-200 dark:bg-neutral-700 dark:checked:bg-primary checked:bg-primary checked:focus:bg-primary checked:hover:bg-primary focus:ring-primary focus:shadow-primary outline-primary border-neutral-300 dark:border-neutral-600 {className}"
 			onchange={(ev) => handleChange(ev)}
 		/>
 		{#if position == 'left'}

package/dist/views/core/input/components/color-field/color-field.svelte

@@ -85,7 +85,7 @@
 	<button
 		id="btn-color-picker-{name || id}"
 		type="button"
-		class="px-2 h-full hover:bg-base-100 dark:hover:bg-base-900 focus:outline-primary {btnRoundedClassName}"
+		class="px-2 h-full hover:bg-neutral-100 dark:hover:bg-neutral-900 focus:outline-primary {btnRoundedClassName}"
 		use:ripple
 		onclick={handleColorBtnClick}
 	>

package/dist/views/core/input/components/combobox-field/combobox-field.svelte

@@ -52,11 +52,7 @@
 <script lang="ts">
 	import ButtonListItem from '../../../button/components/button-list-item/button-list-item.svelte';
 	import Button from '../../../button/components/button/button.svelte';
-	import {
-		mdiCheckCircle,
-		mdiCheckCircleOutline,
-		mdiUnfoldMoreHorizontal
-	} from '../../../icon';
+	 
 	import Icon from '../../../icon/components/icon/icon.svelte';
 	import NoData from '../../../no-data/components/no-data/no-data.svelte';
 	import type { Snippet } from 'svelte';
@@ -64,6 +60,7 @@
 	import SearchField from '../search-field/search-field.svelte';
 	import { SvelteSet } from 'svelte/reactivity';
 	import VirtualScrollingList from '../../../common/components/virtual-scrolling/virtual-scrolling-list.svelte';
+	import { mdiCheckCircle, mdiCheckCircleOutline, mdiUnfoldMoreHorizontal } from '../../../icon/index.js';
 
 	let {
 		appearance,
@@ -153,7 +150,11 @@
 
 		if (dropPosition === 'bottom' && spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
 			placement = 'bottom-full mb-1';
-		} else if (dropPosition === 'top' && spaceAbove < dropdownHeight && spaceBelow > dropdownHeight) {
+		} else if (
+			dropPosition === 'top' &&
+			spaceAbove < dropdownHeight &&
+			spaceBelow > dropdownHeight
+		) {
 			placement = 'mt-1';
 		} else if (dropPosition === 'middle') {
 			const spaceNeeded = dropdownHeight / 2;
@@ -364,7 +365,7 @@
 		{#if hasComboboxIcon}
 			<Icon
 				path={comboboxIconPath}
-				className=" text-base-500 {comboboxIconSizeClassName} {comboboxIconClassName}"
+				className=" text-neutral-500 {comboboxIconSizeClassName} {comboboxIconClassName}"
 			/>
 		{/if}
 	</div>
@@ -377,13 +378,13 @@
 		<div class="flex items-center {displayClassName}" title={displayItemsTitle}>
 			{#each displayItems?.slice(0, displayItemsCount) as item, index}
 				<div
-					class="inline-flex items-center bg-base-200 text-base-700 text-sm font-medium px-2 mx-1 rounded-full text-nowrap {chipClassName}"
+					class="inline-flex items-center bg-neutral-200 text-neutral-700 text-sm font-medium px-2 mx-1 rounded-full text-nowrap {chipClassName}"
 				>
 					{item}
 				</div>
 			{/each}
 			{#if displayItemsCount && displayItems?.length > (displayItemsCount || 1)}
-				<div class="px-2 text-base-400">+ {displayItems?.length - (displayItemsCount || 1)}</div>
+				<div class="px-2 text-neutral-400">+ {displayItems?.length - (displayItemsCount || 1)}</div>
 			{/if}
 		</div>
 	{:else}
@@ -428,7 +429,7 @@
 		<!-- svelte-ignore a11y_interactive_supports_focus -->
 		<div
 			bind:clientHeight={dropdownHeight}
-			class="absolute z-10 {placementClassName} max-h-80 w-full flex flex-col rounded-md bg-white dark:bg-base-900 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm {hasDropdownHeader
+			class="absolute z-10 {placementClassName} max-h-80 w-full flex flex-col rounded-md bg-white dark:bg-neutral-900 text-neutral-600 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm {hasDropdownHeader
 				? ''
 				: 'pt-1'} {hasDropdownFooter ? '' : 'pb-1'} {dropdownClassName}"
 			id="options"
@@ -489,7 +490,7 @@
 														path={isSelected ? checkboxIconPath : uncheckboxIconPath}
 														className="w-5 h-5 {checkboxClassName} {isSelected
 															? `text-primary ${checkboxIconClassName}`
-															: `text-base-400 ${uncheckboxIconClassName}`}"
+															: `text-neutral-400 ${uncheckboxIconClassName}`}"
 													/>
 												</div>
 											{/if}

package/dist/views/core/input/components/input-field/input-field.svelte

@@ -141,123 +141,141 @@
 
 	let inputRef: HTMLInputElement | HTMLTextAreaElement | null = $state(null);
 
-	let sizeClassName = $state('');
-	let appearanceClassName = $state('');
-	let floatingLabelClassName = $state('');
-	let floatingLabelPaddingClassName = $state('');
-	let floatingLabelTextClassName = $state('');
+	let nameDerived = $derived(name || id);
+	let idDerived = $derived(id || name);
 
-	export function focus() {
-		inputRef && inputRef.focus();
-	}
-
-	export function getElement() {
-		return inputRef;
-	}
-
-	export function select() {
-		return inputRef && (inputRef as HTMLInputElement).select();
-	}
-
-	export function getBoundingClientRect() {
-		if (inputRef) {
-			return inputRef.getBoundingClientRect();
+	let containerClassNameDerived = $derived.by(() => {
+		if (floatingLabel || leftSnippet != null || rightSnippet != null) {
+			return (containerClassName || '') + ' relative';
 		}
-	}
+		return containerClassName;
+	});
 
-	$effect(() => {
-		if (floatingLabel || leftSnippet != null || rightSnippet != null) {
-			containerClassName = (containerClassName || '') + ' relative';
+	let sizeClassName = $derived.by(() => {
+		let sizeClassName = '';
+		if (size) {
+			switch (size) {
+				case 'lg':
+					sizeClassName = 'p-4 text-base';
+					break;
+				case 'md':
+					sizeClassName = 'p-2.5 text-sm';
+					break;
+				case 'sm':
+					sizeClassName = 'p-2 text-xs';
+					break;
+				case 'xs':
+					sizeClassName = 'p-1 text-xs';
+					break;
+			}
 		}
+		return sizeClassName;
 	});
 
-	$effect(() => {
+	let floatingLabelPaddingClassName = $derived.by(() => {
 		if (floatingLabel) {
 			if (size) {
-				let flpcn = '';
+				let floatingClassName = '';
 				switch (size) {
 					case 'lg':
-						flpcn = ` px-1 peer-focus:px-1 peer-placeholder-shown:px-4 `;
-						floatingLabelTextClassName = 'text-base';
+						floatingClassName = ` px-1 peer-focus:px-1 peer-placeholder-shown:px-4 `;
 						break;
 					case 'md':
-						flpcn = ' px-1 peer-focus:px-1 peer-placeholder-shown:px-2.5 ';
-						floatingLabelTextClassName = 'text-sm';
+						floatingClassName = ' px-1 peer-focus:px-1 peer-placeholder-shown:px-2.5 ';
+						break;
+					case 'sm':
+						floatingClassName = ' px-1 peer-focus:px-1 peer-placeholder-shown:px-2';
+						break;
+					case 'xs':
+						floatingClassName = ' px-0 peer-focus:px-0 peer-placeholder-shown:px-1 ';
+						break;
+				}
+				return floatingClassName;
+			}
+		}
+		return '';
+	});
 
+	let floatingLabelTextClassName = $derived.by(() => {
+		let className = '';
+		if (floatingLabel) {
+			if (size) {
+				switch (size) {
+					case 'lg':
+						className = 'text-base';
+						break;
+					case 'md':
+						className = 'text-sm';
 						break;
 					case 'sm':
-						flpcn = ' px-1 peer-focus:px-1 peer-placeholder-shown:px-2';
-						floatingLabelTextClassName = 'text-xs';
+						className = 'text-xs';
 						break;
 					case 'xs':
-						flpcn = ' px-0 peer-focus:px-0 peer-placeholder-shown:px-1 ';
-						floatingLabelTextClassName = 'text-xs';
+						className = 'text-xs';
 						break;
 				}
-				floatingLabelPaddingClassName = flpcn;
 			}
+		}
+		return className;
+	});
 
-			floatingLabelClassName = `absolute duration-300 transform top-0 rounded -translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-0 peer-placeholder-shown:start-0 peer-focus:start-1 bg-white peer-focus:bg-white dark:bg-base-700 peer-focus:bg-base-800 peer-placeholder-shown:bg-transparent  start-1 ${floatingLabelPaddingClassName} ${floatingLabelTextClassName}`;
+	let floatingLabelClassName = $derived.by(() => {
+		if (floatingLabel) {
+			return `absolute duration-300 transform top-0 rounded -translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-0 peer-placeholder-shown:start-0 peer-focus:start-1 bg-white peer-focus:bg-white dark:bg-neutral-700 peer-focus:bg-neutral-800 peer-placeholder-shown:bg-transparent  start-1 ${floatingLabelPaddingClassName} ${floatingLabelTextClassName}`;
 		}
+		return '';
 	});
 
-	$effect(() => {
+	let appearanceClassName = $derived.by(() => {
+		let className = '';
 		if (appearance) {
 			switch (appearance) {
 				case 'normal':
-					appearanceClassName =
-						'border rounded-lg bg-base-100 dark:bg-base-700 border-base-300 dark:border-base-500 text-base-950 dark:text-base-50 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 focus:bg-base-50 dark:focus:bg-base-800 ';
+					className =
+						'border rounded-lg bg-neutral-100 dark:bg-neutral-700 border-neutral-300 dark:border-neutral-500 text-neutral-950 dark:text-neutral-50 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 focus:bg-neutral-50 dark:focus:bg-neutral-800 ';
 					break;
 				case 'box':
-					appearanceClassName =
-						'border bg-base-100 dark:bg-base-700 border-base-300 dark:border-base-500 text-base-950 dark:text-base-50 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 focus:bg-base-50 dark:focus:bg-base-800 ';
+					className =
+						'border bg-neutral-100 dark:bg-neutral-700 border-neutral-300 dark:border-neutral-500 text-neutral-950 dark:text-neutral-50 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 focus:bg-neutral-50 dark:focus:bg-neutral-800 ';
 					break;
 				case 'fill':
-					appearanceClassName =
-						' border-0 appearance-none  focus:ring-0 bg-base-100 dark:bg-base-700 text-base-950 dark:text-base-50 focus:bg-base-50 dark:focus:bg-base-800 ';
+					className =
+						' border-0 appearance-none  focus:ring-0 bg-neutral-100 dark:bg-neutral-700 text-neutral-950 dark:text-neutral-50 focus:bg-neutral-50 dark:focus:bg-neutral-800 ';
 					break;
 				case 'underline':
-					appearanceClassName =
-						'bg-transparent border-0 border-b-2 appearance-none focus:ring-0 text-base-950 dark:text-base-50 border-base-300 dark:border-base-700 focus:border-primary-500 dark:focus:border-primary-500';
+					className =
+						'bg-transparent border-0 border-b-2 appearance-none focus:ring-0 text-neutral-950 dark:text-neutral-50 border-neutral-300 dark:border-neutral-700 focus:border-primary-500 dark:focus:border-primary-500';
 					break;
 				case 'fill-underline':
-					appearanceClassName =
-						'border-0 border-b-2 appearance-none ring-0 text-base-950 dark:text-base-50 bg-base-100 dark:bg-base-700 border-base-300 dark:border-base-500 focus:border-primary-500 dark:focus:border-primary-500 ';
+					className =
+						'border-0 border-b-2 appearance-none ring-0 text-neutral-950 dark:text-neutral-50 bg-neutral-100 dark:bg-neutral-700 border-neutral-300 dark:border-neutral-500 focus:border-primary-500 dark:focus:border-primary-500 ';
 					break;
 				case 'none':
-					appearanceClassName =
-						'border-0 focus:ring-0 appearance-none text-base-950 dark:text-base-50 bg-transparent dark:bg-transparent focus:bg-base-100 dark:focus:bg-base-800 hover:bg-base-100 dark:hover:bg-base-800';
+					className =
+						'border-0 focus:ring-0 appearance-none text-neutral-950 dark:text-neutral-50 bg-transparent dark:bg-transparent focus:bg-neutral-100 dark:focus:bg-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-800';
 					break;
 			}
 		}
+		return className;
 	});
 
-	$effect(() => {
-		if (size) {
-			switch (size) {
-				case 'lg':
-					sizeClassName = 'p-4 text-base';
-					break;
-				case 'md':
-					sizeClassName = 'p-2.5 text-sm';
-					break;
-				case 'sm':
-					sizeClassName = 'p-2 text-xs';
-					break;
-				case 'xs':
-					sizeClassName = 'p-1 text-xs';
-					break;
-			}
-		}
-	});
+	export function focus() {
+		inputRef && inputRef.focus();
+	}
 
-	$effect(() => {
-		if (name && !id) {
-			id = name;
-		} else if (id && !name) {
-			name = id;
+	export function getElement() {
+		return inputRef;
+	}
+
+	export function select() {
+		return inputRef && (inputRef as HTMLInputElement).select();
+	}
+
+	export function getBoundingClientRect() {
+		if (inputRef) {
+			return inputRef.getBoundingClientRect();
 		}
-	});
+	}
 
 	$effect(() => {
 		setTimeout(() => {
@@ -270,9 +288,9 @@
 
 {#snippet labelSnippet()}
 	<Label
-		forName={id}
+		forName={idDerived}
 		{label}
-		className=" {floatingLabel ? '' : 'mb-1 '} {floatingLabelClassName} {labelClassName}"
+		className=" {floatingLabel ? '' : 'mb-1 '} {floatingLabelClassName}  {labelClassName}"
 		{required}
 		{requiredSymbolColor}
 		{requiredSymbol}
@@ -284,10 +302,10 @@
 	{@render labelSnippet()}
 {/if}
 
-<div class="w-full {containerClassName}">
+<div class="w-full {containerClassNameDerived}">
 	{#if leftSnippet}
 		<div
-			class="absolute flex items-center justify-center left-children {leftSnippetContainerClassName}"
+			class="left-children absolute flex items-center justify-center {leftSnippetContainerClassName}"
 		>
 			{@render leftSnippet()}
 		</div>
@@ -297,10 +315,10 @@
 		<textarea
 			bind:this={inputRef}
 			bind:value
-			class="block w-full peer outline-none {appearanceClassName} {sizeClassName} {className}"
+			class="peer block w-full outline-none {appearanceClassName} {sizeClassName} {className}"
 			{title}
-			{id}
-			{name}
+			id={idDerived}
+			name={nameDerived}
 			{placeholder}
 			{required}
 			{disabled}
@@ -328,11 +346,11 @@
 		<input
 			bind:this={inputRef}
 			bind:value
-			class="block w-full peer outline-none {appearanceClassName} {sizeClassName} {className}"
+			class="peer block w-full outline-none {appearanceClassName} {sizeClassName} {className}"
 			{title}
 			{type}
-			{id}
-			{name}
+			id={idDerived}
+			name={nameDerived}
 			{placeholder}
 			{required}
 			{disabled}
@@ -365,14 +383,14 @@
 	{/if}
 	{#if contentSnippet}
 		<div
-			class="absolute inset-0 pointer-events-none block w-full overflow-hidden {appearanceClassName} {sizeClassName}   {contentSnippetClassName}"
+			class="pointer-events-none absolute inset-0 block w-full overflow-hidden {appearanceClassName} {sizeClassName}   {contentSnippetClassName}"
 		>
 			{@render contentSnippet()}
 		</div>
 	{/if}
 	{#if rightSnippet}
 		<div
-			class="absolute flex items-center justify-center right-children {rightSnippetContainerClassName}"
+			class="right-children absolute flex items-center justify-center {rightSnippetContainerClassName}"
 		>
 			{@render rightSnippet()}
 		</div>

package/dist/views/core/input/components/label/label.svelte

@@ -26,7 +26,9 @@
 
 <label
 	for={forName || ''}
-	class="block text-sm text-base-500 dark:text-base-400 {hasRequiredSymbol && required ? 'required' : ''} {className}"
+	class="block text-sm text-neutral-500 dark:text-neutral-400 {hasRequiredSymbol && required
+		? 'required'
+		: ''} {className}"
 	style="--requiredSymbolColor:{requiredSymbolColor}; --requiredSymbol: '{requiredSymbol}'; "
 >
 	{#if children}

package/dist/views/core/input/components/password-field/password-field.svelte

@@ -74,7 +74,7 @@
 	<button
 		id="btn-eye-{name || id}"
 		type="button"
-		class="px-3 h-full hover:bg-base-100 focus:outline-primary {btnRoundedClassName} {buttonClassName}"
+		class="px-3 h-full hover:bg-neutral-100 focus:outline-primary {btnRoundedClassName} {buttonClassName}"
 		use:ripple
 		onclick={handleTogglePassword}
 	>

package/dist/views/core/input/components/radio-field/radio-field.svelte

@@ -129,7 +129,7 @@
 					type="radio"
 					value={item.value}
 					checked={value === item.value}
-					class="h-6 w-6 appearance-none rounded-full bg-base-200 dark:bg-base-700 dark:checked:bg-primary checked:bg-primary checked:hover:bg-primary checked:focus:bg-primary focus:ring-primary focus:shadow-primary outline-primary border-base-300 dark:border-base-600 {className}"
+					class="h-6 w-6 appearance-none rounded-full bg-neutral-200 dark:bg-neutral-700 dark:checked:bg-primary checked:bg-primary checked:hover:bg-primary checked:focus:bg-primary focus:ring-primary focus:shadow-primary outline-primary border-neutral-300 dark:border-neutral-600 {className}"
 					onchange={(ev) => handleChange(ev, item)}
 				/>
 

package/dist/views/core/input/components/search-field/search-field.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { mdiMagnify } from '../../../icon';
+	 
 	import Icon from '../../../icon/components/icon/icon.svelte';
+	import { mdiMagnify } from '../../../icon/index.js';
 	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
 
 	let {

package/dist/views/core/navbar/components/navbar/navbar.svelte

@@ -78,13 +78,13 @@
 </script>
 
 <nav
-	class="sticky top-0 z-20 flex h-16 shrink-0 items-center px-2 border-b border-base-100 dark:border-base-700 bg-white dark:bg-base-800 shadow-sm {className}"
+	class="sticky top-0 z-20 flex h-16 shrink-0 items-center px-2 border-b border-neutral-100 dark:border-neutral-700 bg-white dark:bg-neutral-800 shadow-sm {className}"
 >
 	{#if hasBack}
 		<div class="h-full flex items-center">
 			<ButtonBack
 				iconPath={backIconPath}
-				className="text-base-800 dark:text-base-100 {backButtonClassName}"
+				className="text-neutral-800 dark:text-neutral-100 {backButtonClassName}"
 				onClick={onBack}
 			/>
 		</div>
@@ -93,7 +93,7 @@
 		<div class="h-full">
 			<button
 				type="button"
-				class="h-full px-2 text-base-800 dark:text-base-100 {drawerButtonClassName}"
+				class="h-full px-2 text-neutral-800 dark:text-neutral-100 {drawerButtonClassName}"
 				disabled={disabledLogo}
 				onclick={onMore}
 			>
@@ -106,7 +106,7 @@
 			<button
 				id="btn-more"
 				type="button"
-				class="h-full px-2 rounded-0 text-base-800 dark:text-base-100 {logoButtonClassName}"
+				class="h-full px-2 rounded-0 text-neutral-800 dark:text-neutral-100 {logoButtonClassName}"
 				disabled={!onLogo}
 				onclick={onLogo}
 			>
@@ -125,12 +125,12 @@
 		<div class="h-full flex items-center">
 			<div>
 				{#if hasTitle}
-					<div class="font-bold px-2 text-base-800 dark:text-base-100 {titleClassName}">
+					<div class="font-bold px-2 text-neutral-800 dark:text-neutral-100 {titleClassName}">
 						{title || ''}
 					</div>
 				{/if}
 				{#if hasSubtitle}
-					<div class="text-sm px-2 text-base-600 dark:text-base-500 {subtitleClassName}">
+					<div class="text-sm px-2 text-neutral-600 dark:text-neutral-500 {subtitleClassName}">
 						{subtitle || ''}
 					</div>
 				{/if}
@@ -158,7 +158,7 @@
 				<button
 					id="btn-more"
 					type="button"
-					class="h-full px-2 text-base-800 dark:text-base-100 {drawerButtonClassName}"
+					class="h-full px-2 text-neutral-800 dark:text-neutral-100 {drawerButtonClassName}"
 					disabled={!onMore}
 					onclick={onMore}
 				>

package/dist/views/core/pagination/components/pagination/pagination.svelte

@@ -94,7 +94,7 @@
 	<Button {disabled} {onClick} iconPath={icon} />
 {/snippet}
 
-<div class="flex items-center flex-wrap justify-end text-base-500 gap-3 -mb-2">
+<div class="flex items-center flex-wrap justify-end text-neutral-500 gap-3 -mb-2">
 	<div class="flex-grow">{itemsText} {itemsCount}</div>
 	<div class="flex items-center flex-nowrap gap-2">
 		<div>{pageSizeText}</div>
@@ -108,7 +108,7 @@
 				onMenu={(ev, menu) => handlePageSizeMenu(ev, menu as string)}
 			/>
 		</div>
-		<div class="text-base-500">
+		<div class="text-neutral-500">
 			<span>
 				{pageText}
 			</span>

package/dist/views/core/sidebar/components/sidebar.svelte

@@ -38,7 +38,8 @@
 
 <div
 	{id}
-	class="hidden bg-white dark:bg-base-800 text-base-800 dark:text-base-200 border-base-100 dark:border-base-700 pt-16 {responsiveClassName} {position == 'right'
+	class="hidden bg-white dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 border-neutral-100 dark:border-neutral-700 pt-16 {responsiveClassName} {position ==
+	'right'
 		? 'right-0'
 		: ''} {className}"
 >

package/dist/views/core/toast/components/toast/toast.svelte

@@ -11,7 +11,6 @@
 </script>
 
 <script lang="ts">
-
 	let isPlaced: boolean = $state(false);
 	let isOpened: boolean = $state(false);
 
@@ -46,7 +45,7 @@
 {#if isPlaced}
 	<div
 		{id}
-		class="fixed bottom-20 left-1/2 transform -translate-x-1/2 p-3 px-6 max-w-full text-gray-700 bg-white shadow-xl dark:shadow-base-700 dark:bg-base-600 dark:text-base-300 rounded-full transition-opacity duration-300 {isOpened
+		class="fixed bottom-20 left-1/2 transform -translate-x-1/2 p-3 px-6 max-w-full text-gray-700 bg-white shadow-xl dark:shadow-neutral-700 dark:bg-neutral-600 dark:text-neutral-300 rounded-full transition-opacity duration-300 {isOpened
 			? 'opacity-100'
 			: 'opacity-0'} toast {className}"
 	>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudparker/moldex.js",
-    "version": "4.1.1",
+    "version": "4.1.3",
     "keywords": [
         "svelte"
     ],