fix: Button loader, Datepicker range color, example code etc.

package.json

@@ -92,7 +92,7 @@
     "svelte-doc-llm": "^0.5.1",
     "svelte-lib-helpers": "^0.4.31",
     "svelte-meta-tags": "^4.5.0",
-    "svelte-rune-highlight": "^0.7.1",
+    "svelte-rune-highlight": "^0.8.0",
     "tailwindcss": "^4.1.16",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3",

src/routes/docs/pages/typescript.md

@@ -8,16 +8,27 @@ description: Learn more about the value types and class interfaces that you can
 ---
 
 <script lang="ts">
-  import TypeList from '$lib/types.ts?raw';
   import { LlmLink } from '../../utils';
+  import { Highlight } from 'svelte-rune-highlight';
   import HighlightCompo from "../../utils/HighlightCompo.svelte";
+  import typescript from 'highlight.js/lib/languages/typescript';
+  const examples = import.meta.glob('../../../lib/types.ts', {
+    query: '?raw',
+    import: 'default',
+    eager: true
+  });
+  const tsLang = {
+    name: 'typescript',
+    register: typescript
+  };
 </script>
 
 ## Typescript types
 
 Enhance the reliability and scalability of your user interface code by leveraging data types. The following excerpt shows you the full list of TypeScript types and interfaces that are being used with the Flowbite Svelte library.
 
-<HighlightCompo codeLang="ts" code={TypeList as string} class="max-w-7xl bg-white" />
+<HighlightCompo language={tsLang} code={examples["../../../lib/types.ts"] as string} class="max-w-7xl bg-white" />
+
 
 ## LLM Link
 

src/routes/utils/HighlightCompo.svelte

@@ -4,26 +4,39 @@
   import { Button, Badge } from "$lib";
   import { copyToClipboard, replaceLibImport } from "./helpers";
   import { highlightcompo } from "./theme";
+  import type { LanguageFn } from "highlight.js";
+
+  type HighlightLanguage = {
+    name: string;
+    register: LanguageFn;
+  };
 
   interface Props {
-    // componentStatus: boolean;
     code: string;
     badgeClass?: string;
     buttonClass?: string;
-    codeLang?: string;
+    language: HighlightLanguage;
     class?: string;
     replaceLib?: boolean;
+    // Highlight.svelte props
+    numberLine?: boolean;
+    langtag?: boolean;
+    hideBorder?: boolean;
+    wrapLines?: boolean;
+    startingLineNumber?: number;
+    highlightedLines?: number[];
+    backgroudColor?: string;
+    position?: "static" | "relative" | "absolute" | "sticky" | undefined;
   }
 
-  let { code, codeLang, badgeClass, buttonClass, replaceLib = true, class: className }: Props = $props();
+  let { code, language, badgeClass, buttonClass, replaceLib = true, class: className, ...restProps }: Props = $props();
 
   const mdLang = {
     name: "markdown",
     register: markdown
   };
 
   const processedCode = $derived(replaceLib ? replaceLibImport(code) : code);
-  // console.log('code: ', code)
 
   let showExpandButton: boolean = $state(false);
   let expand: boolean = $state(false);
@@ -60,10 +73,10 @@
       {#if copiedStatus}
         <Badge class={badge({ class: badgeClass })} color="green">Copied to clipboard</Badge>
       {/if}
-      {#if codeLang === "md"}
-        <Highlight language={mdLang} code={processedCode} />
+      {#if ["markdown", "md"].includes(language.name)}
+        <Highlight language={mdLang} code={processedCode} {...restProps} />
       {:else if code}
-        <HighlightSvelte code={processedCode} />
+        <HighlightSvelte code={processedCode} {...restProps} />
       {:else}
         no code is provided
       {/if}