From a1ba5af532261772bfd8b0b2c8267f65e814f997 Mon Sep 17 00:00:00 2001
From: Shinichi Okada <147320+shinokada@users.noreply.github.com>
Date: Mon, 30 Sep 2024 08:48:53 +0200
Subject: [PATCH] chore: add todo list

---
 .changeset/metal-trees-camp.md                |  8 +++
 Todos.md                                      |  3 ++
 src/lib/avatar/Avatar.svelte                  |  3 +-
 src/lib/bottom-navigation/BottomNav.svelte    |  2 +
 .../bottom-navigation/BottomNavItem.svelte    | 31 ++++++-----
 src/lib/buttons/Button.svelte                 | 32 +++++------
 src/lib/buttons/GradientButton.svelte         |  5 +-
 src/lib/forms/CheckboxButton.svelte           |  4 +-
 src/lib/forms/RadioButton.svelte              |  2 +-
 src/lib/list-group/Listgroup.svelte           |  1 -
 src/lib/modal/Modal.svelte                    | 38 ++++++-------
 src/lib/navbar/Menu.svelte                    | 16 ++++--
 src/lib/navbar/NavBrand.svelte                |  8 ++-
 src/lib/navbar/NavContainer.svelte            |  2 +-
 src/lib/navbar/NavHamburger.svelte            | 10 +++-
 src/lib/navbar/NavLi.svelte                   | 17 ++++--
 src/lib/navbar/NavUl.svelte                   | 28 ++++++----
 src/lib/navbar/Navbar.svelte                  |  2 +-
 src/lib/pagination/Pagination.svelte          | 27 +++++++---
 src/lib/pagination/PaginationItem.svelte      | 23 ++++++--
 src/lib/progress/Progressbar.svelte           | 40 +++++++++-----
 src/lib/rating/Heart.svelte                   | 26 ++++++---
 src/lib/rating/Rating.svelte                  |  4 +-
 src/lib/rating/RatingComment.svelte           | 43 ++++++++-------
 src/lib/rating/Review.svelte                  | 21 +++++---
 src/lib/rating/ScoreRating.svelte             | 40 +++++++++-----
 src/lib/rating/Star.svelte                    | 25 ++++++---
 src/lib/rating/Thumbup.svelte                 | 26 ++++++---
 src/lib/sidebar/Sidebar.svelte                | 20 ++++---
 src/lib/sidebar/SidebarBrand.svelte           | 16 ++++--
 src/lib/sidebar/SidebarCta.svelte             | 16 ++++--
 src/lib/sidebar/SidebarDropdownItem.svelte    | 19 +++++--
 src/lib/sidebar/SidebarDropdownWrapper.svelte | 26 ++++++---
 src/lib/sidebar/SidebarGroup.svelte           | 13 +++--
 src/lib/sidebar/SidebarItem.svelte            | 26 ++++++---
 src/lib/sidebar/SidebarWrapper.svelte         |  7 ++-
 src/lib/skeleton/CardPlaceholder.svelte       |  9 +++-
 src/lib/skeleton/ImagePlaceholder.svelte      | 13 +++--
 src/lib/skeleton/ListPlaceholder.svelte       |  7 ++-
 src/lib/skeleton/Skeleton.svelte              |  9 +++-
 .../skeleton/TestimonialPlaceholder.svelte    |  7 ++-
 src/lib/skeleton/TextPlaceholder.svelte       |  9 +++-
 src/lib/skeleton/VideoPlaceholder.svelte      |  9 +++-
 src/lib/skeleton/WidgetPlaceholder.svelte     |  7 ++-
 src/lib/speed-dial/SpeedDial.svelte           | 39 ++++++++++----
 src/lib/speed-dial/SpeedDialButton.svelte     | 27 +++++++---
 src/lib/spinner/Spinner.svelte                | 22 +++++---
 src/lib/steps/StepIndicator.svelte            | 28 +++++++---
 src/lib/table/Table.svelte                    | 53 +++++++++++++------
 src/lib/table/TableBody.svelte                |  9 +++-
 src/lib/table/TableBodyCell.svelte            |  9 +++-
 src/lib/table/TableBodyRow.svelte             |  7 ++-
 src/lib/table/TableHead.svelte                | 10 +++-
 src/lib/table/TableHeadCell.svelte            | 19 +++++--
 src/lib/table/TableSearch.svelte              | 40 +++++++++-----
 src/lib/tabs/TabItem.svelte                   | 22 +++++---
 src/lib/tabs/Tabs.svelte                      | 24 ++++++---
 src/lib/timeline/Activity.svelte              |  9 +++-
 src/lib/timeline/ActivityItem.svelte          | 30 +++++++----
 src/lib/timeline/Group.svelte                 | 20 +++++--
 src/lib/timeline/GroupItem.svelte             | 25 ++++++---
 src/lib/timeline/Timeline.svelte              | 10 +++-
 src/lib/timeline/TimelineItem.svelte          | 13 +++--
 src/lib/toast/Toast.svelte                    | 44 ++++++++-------
 src/lib/toolbar/ToolbarButton.svelte          | 30 ++++++++---
 src/routes/layouts/ComponentsLayout.svelte    |  4 +-
 66 files changed, 836 insertions(+), 358 deletions(-)
 create mode 100644 .changeset/metal-trees-camp.md
 create mode 100644 Todos.md

diff --git a/.changeset/metal-trees-camp.md b/.changeset/metal-trees-camp.md
new file mode 100644
index 000000000..faba6ba1f
--- /dev/null
+++ b/.changeset/metal-trees-camp.md
@@ -0,0 +1,8 @@
+---
+'flowbite-svelte': patch
+---
+
+types: component type updates
+types: Button and ToolbarButton update for using anchor and button, HTMLAnchorAttributes, HTMLButtonAttributes
+types: GradientButton uses import ButtonProps from "./Button.svelte" instead of using ComponentProps that does not work.
+
diff --git a/Todos.md b/Todos.md
new file mode 100644
index 000000000..75e9e5a39
--- /dev/null
+++ b/Todos.md
@@ -0,0 +1,3 @@
+# TODO
+
+- type ElementType = 'a' | 'div'; type update for Avatar, DropdownItem, NavLi, PaginationItem. See Button, GradientButton and ToolbarButton
\ No newline at end of file
diff --git a/src/lib/avatar/Avatar.svelte b/src/lib/avatar/Avatar.svelte
index c2238d568..e385762f5 100644
--- a/src/lib/avatar/Avatar.svelte
+++ b/src/lib/avatar/Avatar.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
   import Indicator from '$lib/indicators/Indicator.svelte';
   import { twMerge } from 'tailwind-merge';
-
   import type { HTMLAttributes } from 'svelte/elements';
 
   type ElementType = 'a' | 'div';
 
-  type DynamicElementProps<T extends ElementType> = HTMLAttributes<HTMLElementTagNameMap[T]> 
+  type DynamicElementProps<T extends ElementType> = HTMLAttributes<HTMLElementTagNameMap[T]>;
 
   interface $$Props extends DynamicElementProps<ElementType> {
     href?: string;
diff --git a/src/lib/bottom-navigation/BottomNav.svelte b/src/lib/bottom-navigation/BottomNav.svelte
index fa1d0cafb..44de246e6 100644
--- a/src/lib/bottom-navigation/BottomNav.svelte
+++ b/src/lib/bottom-navigation/BottomNav.svelte
@@ -1,6 +1,8 @@
 <script lang="ts" context="module">
   export type BottomNavType = {
     activeClass: string;
+    btnClass?: string;
+    spanClass?: string; 
   };
 </script>
 
diff --git a/src/lib/bottom-navigation/BottomNavItem.svelte b/src/lib/bottom-navigation/BottomNavItem.svelte
index 3390ae0e4..d86974dba 100644
--- a/src/lib/bottom-navigation/BottomNavItem.svelte
+++ b/src/lib/bottom-navigation/BottomNavItem.svelte
@@ -3,25 +3,30 @@
   import type { ButtonClassesTypes } from '../types';
   import type { BottomNavType } from './BottomNav.svelte';
   import { twMerge } from 'tailwind-merge';
-  import type { HTMLAttributes } from 'svelte/elements';
+  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 
-  type ElementType = 'a' | 'button';
-
-  type DynamicElementProps<T extends ElementType> = HTMLAttributes<HTMLElementTagNameMap[T]> 
-
-  interface $$Props extends DynamicElementProps<ElementType> {
+  type CommonProps = {
     btnName?: string;
     appBtnPosition?: 'left' | 'middle' | 'right';
     activeClass?: string;
-    href?: string;
     exact?: boolean;
     spanClass?: string;
   }
 
+  type AnchorProps = CommonProps & Omit<HTMLAnchorAttributes, 'type'> & {
+    href?: string | undefined;
+  };
+
+  type ButtonProps = CommonProps & HTMLButtonAttributes & {
+    disabled?: HTMLButtonAttributes['disabled'];
+  };
+
+  type $$Props = AnchorProps | ButtonProps;
+
   export let btnName: $$Props['btnName'] = '';
   export let appBtnPosition: NonNullable<$$Props['appBtnPosition']> = 'middle';
   export let activeClass: $$Props['activeClass'] = undefined;
-  export let href: NonNullable<$$Props['href']> = '';
+  export let href: string = '';
   export let exact: $$Props['exact'] = true;
   export let spanClass: $$Props['spanClass'] = '';
 
@@ -37,12 +42,12 @@
 
   $: active = navUrl && exact ? href === navUrl : navUrl ? navUrl.startsWith(href) : false;
   const btnClasses: ButtonClassesTypes = {
-    default: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    border: 'inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600',
+    default: 'inline-flex flex-col items-center justify-center px-5 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    border: 'inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x text-gray-500 dark:text-gray-400  hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600',
     application: '',
-    pagination: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    group: 'inline-flex flex-col items-center justify-center p-4 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    card: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    pagination: 'inline-flex flex-col items-center justify-center px-5 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    group: 'inline-flex flex-col items-center justify-center p-4 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    card: 'inline-flex flex-col items-center justify-center px-5 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 group',
     meeting: '',
     video: ''
   };
diff --git a/src/lib/buttons/Button.svelte b/src/lib/buttons/Button.svelte
index cbc6ec24c..b5cadf5bd 100644
--- a/src/lib/buttons/Button.svelte
+++ b/src/lib/buttons/Button.svelte
@@ -2,40 +2,42 @@
   import { twMerge } from 'tailwind-merge';
   import { getContext } from 'svelte';
   import type { SizeType } from '$lib/types';
-  import type { HTMLButtonAttributes, HTMLAttributes } from 'svelte/elements';
+  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 
-  type ElementType = 'a' | 'button';
   type ButtonColor = keyof typeof colorClasses;
-  type DynamicElementProps<T extends ElementType> = HTMLAttributes<HTMLElementTagNameMap[T]> 
-
-  interface $$Props extends DynamicElementProps<ElementType> {
+  type CommonProps = {
     pill?: boolean;
     outline?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    href?: string;
-    type?: HTMLButtonAttributes['type'];
     color?: ButtonColor;
     shadow?: boolean;
-    tag?: string;
+    tag?: 'a' | 'button';
     checked?: boolean;
-    disabled?: boolean;
-    target?: string;
-    rel?: string;
-    name?: string;
   }
 
+  type AnchorProps = CommonProps & Omit<HTMLAnchorAttributes, 'type'> & {
+    href?: string | undefined;
+  };
+
+  type ButtonProps = CommonProps & HTMLButtonAttributes & {
+    disabled?: HTMLButtonAttributes['disabled'];
+    type?: HTMLButtonAttributes['type'];
+  };
+
+  type $$Props = AnchorProps | ButtonProps;
+  
   const group: SizeType = getContext('group');
 
   export let pill: $$Props['pill'] = false;
   export let outline: $$Props['outline'] = false;
   export let size: NonNullable<$$Props['size']> = group ? 'sm' : 'md';
-  export let href: $$Props['href'] = undefined;
-  export let type: $$Props['type'] = 'button';
+  export let href: string | undefined = undefined;
+  export let type: HTMLButtonAttributes['type'] = 'button';
   export let color: NonNullable<$$Props['color']> = group ? (outline ? 'dark' : 'alternative') : 'primary';
   export let shadow: $$Props['shadow'] = false;
   export let tag: $$Props['tag'] = 'button';
   export let checked: $$Props['checked'] = undefined;
-  export let disabled: $$Props['disabled'] = false;
+  export let disabled: HTMLButtonAttributes['disabled'] = false;
 
   const colorClasses = {
     alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white dark:hover:bg-gray-700',
diff --git a/src/lib/buttons/GradientButton.svelte b/src/lib/buttons/GradientButton.svelte
index dca0ed1f9..0f033680e 100644
--- a/src/lib/buttons/GradientButton.svelte
+++ b/src/lib/buttons/GradientButton.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
   import Button from './Button.svelte';
-  import type { ComponentProps } from 'svelte';
+  import ButtonProps from "./Button.svelte"
   import { getContext } from 'svelte';
 
-  type ButtonProps = ComponentProps<Button>;
   interface $$Props extends Omit<ButtonProps, 'color'>{
     color?: keyof typeof gradientClasses;
     shadow?: boolean;
-  } 
+  }
 
   const group = getContext('group');
 
diff --git a/src/lib/forms/CheckboxButton.svelte b/src/lib/forms/CheckboxButton.svelte
index 710a97c0a..b11fd4331 100644
--- a/src/lib/forms/CheckboxButton.svelte
+++ b/src/lib/forms/CheckboxButton.svelte
@@ -4,7 +4,7 @@
   import type { ButtonColorType, SizeType } from '$lib/types';
   import { twMerge } from 'tailwind-merge';
 
-  interface $$Props extends ComponentProps<Button> {
+  type $$Props = ComponentProps<Button> & {
     group: (string | number)[];
     value: string | number;
     checked?: boolean;
@@ -63,7 +63,7 @@
   $: buttonClass = twMerge(inline ? 'inline-flex' : 'flex', $$props.class);
 </script>
 
-<Button tag="label" {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+<Button {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
   <input
     use:init={group}
     type="checkbox"
diff --git a/src/lib/forms/RadioButton.svelte b/src/lib/forms/RadioButton.svelte
index fa3db8d27..4aa58ca53 100644
--- a/src/lib/forms/RadioButton.svelte
+++ b/src/lib/forms/RadioButton.svelte
@@ -28,7 +28,7 @@
   $: buttonClass = twMerge(inline ? 'inline-flex' : 'flex', $$props.class);
 </script>
 
-<Button tag="label" checked={value === group} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+<Button checked={value === group} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
   <input
     type="radio"
     bind:group
diff --git a/src/lib/list-group/Listgroup.svelte b/src/lib/list-group/Listgroup.svelte
index bd03a11ef..d266c870a 100644
--- a/src/lib/list-group/Listgroup.svelte
+++ b/src/lib/list-group/Listgroup.svelte
@@ -7,7 +7,6 @@
 
   const dispatch = createEventDispatcher();
 
-  // propagate props type from underlying Frame
   interface $$Props extends ComponentProps<Frame> {
     items?: T[];
     active?: boolean;
diff --git a/src/lib/modal/Modal.svelte b/src/lib/modal/Modal.svelte
index d53140dfd..5ae1b9f9e 100644
--- a/src/lib/modal/Modal.svelte
+++ b/src/lib/modal/Modal.svelte
@@ -28,25 +28,25 @@
     classFooter?: string;
   }
 
-  export let open: boolean = false;
-  export let title: string = '';
-  export let size: SizeType = 'md';
-  export let color: ComponentProps<Frame>['color'] = 'default';
-  export let placement: ModalPlacementType = 'center';
-  export let autoclose: boolean = false;
-  export let outsideclose: boolean = false;
-  export let dismissable: boolean = true;
-  export let backdropClass: string = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
-  export let classBackdrop: string | undefined = undefined;
-  export let dialogClass: string = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
-  export let classDialog: string | undefined = undefined;
-  export let defaultClass: string = 'relative flex flex-col mx-auto';
-  export let headerClass: string = 'flex justify-between items-center p-4 md:p-5 rounded-t-lg';
-  export let classHeader: string | undefined = undefined;
-  export let bodyClass: string = 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain';
-  export let classBody: string | undefined = undefined;
-  export let footerClass: string = 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg';
-  export let classFooter: string | undefined = undefined;
+  export let open: $$Props['open'] = false;
+  export let title: $$Props['title'] = '';
+  export let size: NonNullable<$$Props['size']> = 'md';
+  export let color: $$Props['color'] = 'default';
+  export let placement: NonNullable<$$Props['placement']> = 'center';
+  export let autoclose: $$Props['autoclose'] = false;
+  export let outsideclose: $$Props['outsideclose'] = false;
+  export let dismissable: $$Props['dismissable'] = true;
+  export let backdropClass: $$Props['backdropClass'] = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+  export let classBackdrop: $$Props['classBackdrop'] = undefined;
+  export let dialogClass: $$Props['dialogClass'] = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
+  export let classDialog: $$Props['classDialog'] = undefined;
+  export let defaultClass: $$Props['defaultClass'] = 'relative flex flex-col mx-auto';
+  export let headerClass: $$Props['headerClass'] = 'flex justify-between items-center p-4 md:p-5 rounded-t-lg';
+  export let classHeader: $$Props['classHeader'] = undefined;
+  export let bodyClass: $$Props['bodyClass'] = 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain';
+  export let classBody: $$Props['classBody'] = undefined;
+  export let footerClass: $$Props['footerClass'] = 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg';
+  export let classFooter: $$Props['classFooter'] = undefined;
 
   const dispatch = createEventDispatcher();
   $: dispatch(open ? 'open' : 'close');
diff --git a/src/lib/navbar/Menu.svelte b/src/lib/navbar/Menu.svelte
index 31db26222..020a2bebe 100644
--- a/src/lib/navbar/Menu.svelte
+++ b/src/lib/navbar/Menu.svelte
@@ -1,8 +1,16 @@
 <script lang="ts">
-  export let size = '24';
-  export let color = 'currentColor';
-  export let variation: 'solid' | 'outline' = 'outline';
-  export let ariaLabel = 'bars 3';
+  import type { SVGAttributes } from 'svelte/elements';
+  interface $$Props extends SVGAttributes<SVGSVGElement>{
+    size?: string;
+    color?: string;
+    variation?: 'solid' | 'outline';
+    ariaLabel?: string;
+  }
+  
+  export let size: $$Props['size'] = '24';
+  export let color: $$Props['color'] = 'currentColor';
+  export let variation: $$Props['variation'] = 'outline';
+  export let ariaLabel: $$Props['ariaLabel'] = 'bars 3';
 
   let viewBox: string;
   let svgpath: string;
diff --git a/src/lib/navbar/NavBrand.svelte b/src/lib/navbar/NavBrand.svelte
index 1e55f08bc..531d4b0a6 100644
--- a/src/lib/navbar/NavBrand.svelte
+++ b/src/lib/navbar/NavBrand.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
+  import type { HTMLAreaAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
-  export let href: string = '';
+  
+  interface $$Props extends HTMLAreaAttributes{
+    href?: string;
+  }
+
+  export let href: $$Props['href'] = '';
 </script>
 
 <a {href} {...$$restProps} class={twMerge('flex items-center', $$props.class)}>
diff --git a/src/lib/navbar/NavContainer.svelte b/src/lib/navbar/NavContainer.svelte
index 3ce3dd187..c1fd77b6b 100644
--- a/src/lib/navbar/NavContainer.svelte
+++ b/src/lib/navbar/NavContainer.svelte
@@ -9,7 +9,7 @@
   export let fluid: boolean = false;
 </script>
 
-<div class={twMerge('mx-auto flex flex-wrap justify-between items-center ', fluid ? 'w-full' : 'container', $$props.class)}>
+<div class={twMerge('mx-auto flex flex-wrap justify-between items-center ', fluid ? 'w-full' : 'container', $$props.class)} {...$$restProps}>
   <slot />
 </div>
 
diff --git a/src/lib/navbar/NavHamburger.svelte b/src/lib/navbar/NavHamburger.svelte
index ffd29b864..4cc36a561 100644
--- a/src/lib/navbar/NavHamburger.svelte
+++ b/src/lib/navbar/NavHamburger.svelte
@@ -1,12 +1,18 @@
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
   import { getContext } from 'svelte';
   import { writable, type Writable } from 'svelte/store';
   import { twMerge } from 'tailwind-merge';
   import ToolbarButton from '../toolbar/ToolbarButton.svelte';
   import Menu from './Menu.svelte';
 
-  export let menuClass: string = 'h-6 w-6 shrink-0';
-  export let onClick: (() => void) | undefined = undefined;
+  type $$Props = ComponentProps<ToolbarButton> & {
+    menuClass?: string;
+    onClick?: (() => void) | undefined;
+  };
+
+  export let menuClass: $$Props['menuClass'] = 'h-6 w-6 shrink-0';
+  export let onClick: $$Props['onClick'] = undefined;
 
   let btnClass: string = 'ms-3 md:hidden';
 
diff --git a/src/lib/navbar/NavLi.svelte b/src/lib/navbar/NavLi.svelte
index 5d020af5f..9b791a6ac 100644
--- a/src/lib/navbar/NavLi.svelte
+++ b/src/lib/navbar/NavLi.svelte
@@ -2,10 +2,21 @@
   import { getContext } from 'svelte';
   import { twMerge } from 'tailwind-merge';
   import type { NavbarLiType } from './NavUl.svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-  export let href: string = '';
-  export let activeClass: string | undefined = undefined;
-  export let nonActiveClass: string | undefined = undefined;
+  type ElementType = 'a' | 'div';
+
+  type DynamicElementProps<T extends ElementType> = HTMLAttributes<HTMLElementTagNameMap[T]>;
+
+  interface $$Props extends DynamicElementProps<ElementType> {
+    href?: string;
+    activeClass?: string;
+    nonActiveClass?: string;
+  }
+
+  export let href: $$Props['href'] = '';
+  export let activeClass: $$Props['activeClass'] = undefined;
+  export let nonActiveClass: $$Props['nonActiveClass'] = undefined;
 
   const context = getContext<NavbarLiType>('navbarContext') ?? {};
   const activeUrlStore = getContext('activeUrl') as { subscribe: (callback: (value: string) => void) => void };
diff --git a/src/lib/navbar/NavUl.svelte b/src/lib/navbar/NavUl.svelte
index d188f9d56..7a033a58c 100644
--- a/src/lib/navbar/NavUl.svelte
+++ b/src/lib/navbar/NavUl.svelte
@@ -6,6 +6,7 @@
 </script>
 
 <script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
   import { getContext, setContext } from 'svelte';
   import { sineIn } from 'svelte/easing';
   import { writable, type Writable } from 'svelte/store';
@@ -13,16 +14,25 @@
   import { twMerge } from 'tailwind-merge';
   import Frame from '../utils/Frame.svelte';
 
-  const activeUrlStore = writable('');
-
-  export let activeUrl: string = '';
-  export let divClass: string = 'w-full md:block md:w-auto';
-  export let ulClass: string = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-sm md:font-medium';
-  export let hidden: boolean | undefined = undefined;
-  export let slideParams: SlideParams = { delay: 250, duration: 500, easing: sineIn };
-  export let activeClass: string = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
-  export let nonActiveClass: string = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+  interface $$Props extends HTMLAttributes<HTMLDivElement> {
+    activeUrl?: string;
+    divClass?: string;
+    ulClass?: string;
+    hidden?: boolean | undefined;
+    slideParams?: SlideParams;
+    activeClass?: string;
+    nonActiveClass?: string;
+  }
 
+  export let activeUrl: NonNullable<$$Props['activeUrl']> = '';
+  export let divClass: $$Props['divClass'] = 'w-full md:block md:w-auto';
+  export let ulClass: $$Props['ulClass'] = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-sm md:font-medium';
+  export let hidden: $$Props['hidden'] = undefined;
+  export let slideParams: $$Props['slideParams'] = { delay: 250, duration: 500, easing: sineIn };
+  export let activeClass: NonNullable<$$Props['activeClass']> = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
+  export let nonActiveClass: NonNullable<$$Props['nonActiveClass']> = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+  
+  const activeUrlStore = writable('');
   setContext<NavbarLiType>('navbarContext', { activeClass, nonActiveClass });
   $: {
     activeUrlStore.set(activeUrl);
diff --git a/src/lib/navbar/Navbar.svelte b/src/lib/navbar/Navbar.svelte
index ec47844c7..a4aaa4ff3 100644
--- a/src/lib/navbar/Navbar.svelte
+++ b/src/lib/navbar/Navbar.svelte
@@ -10,7 +10,7 @@
     fluid?: boolean;
   }
 
-  export let fluid: boolean = false;
+  export let fluid: $$Props['fluid'] = false;
 
   let hidden = writable(true);
   setContext('navHidden', hidden);
diff --git a/src/lib/pagination/Pagination.svelte b/src/lib/pagination/Pagination.svelte
index 49a63700f..b476b1138 100644
--- a/src/lib/pagination/Pagination.svelte
+++ b/src/lib/pagination/Pagination.svelte
@@ -1,16 +1,27 @@
 <script lang="ts">
-  import { twMerge, twJoin } from 'tailwind-merge';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { twMerge } from 'tailwind-merge';
   import { createEventDispatcher, setContext } from 'svelte';
   import type { LinkType } from '../types';
   import PaginationItem from './PaginationItem.svelte';
 
-  export let pages: LinkType[] = [];
-  export let activeClass: string = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
-  export let normalClass: string = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
-  export let ulClass: string = 'inline-flex -space-x-px rtl:space-x-reverse items-center';
-  export let table: boolean = false;
-  export let large: boolean = false;
-  export let ariaLabel: string = 'Page navigation';
+  interface $$Props extends HTMLAttributes<HTMLUListElement> {
+    pages: LinkType[];
+    activeClass?: string;
+    normalClass?: string;
+    ulClass?: string;
+    table?: boolean;
+    large?: boolean;
+    ariaLabel?: string;
+  }
+
+  export let pages: $$Props['pages'] = [];
+  export let activeClass: $$Props['activeClass'] = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
+  export let normalClass: $$Props['normalClass'] = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+  export let ulClass: $$Props['ulClass'] = 'inline-flex -space-x-px rtl:space-x-reverse items-center';
+  export let table: NonNullable<$$Props['table']> = false;
+  export let large: $$Props['large'] = false;
+  export let ariaLabel: $$Props['ariaLabel'] = 'Page navigation';
 
   const dispatch = createEventDispatcher();
 
diff --git a/src/lib/pagination/PaginationItem.svelte b/src/lib/pagination/PaginationItem.svelte
index 7d6363b6f..574288254 100644
--- a/src/lib/pagination/PaginationItem.svelte
+++ b/src/lib/pagination/PaginationItem.svelte
@@ -1,12 +1,25 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
   import { getContext } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-  export let href: string | undefined = undefined;
-  export let active: boolean = false;
-  export let activeClass: string = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
-  export let normalClass: string = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
-  export let large: boolean = false;
+  type ElementType = 'a' | 'button';
+
+  type DynamicElementProps<T extends ElementType> = HTMLAttributes<HTMLElementTagNameMap[T]>;
+
+  interface $$Props extends DynamicElementProps<ElementType> {
+    href?: string;
+    active?: boolean;
+    activeClass?: string;
+    normalClass?: string;
+    large?: boolean;
+  }
+
+  export let href: $$Props['href'] = undefined;
+  export let active: $$Props['active'] = false;
+  export let activeClass: $$Props['activeClass'] = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
+  export let normalClass: $$Props['normalClass'] = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+  export let large: $$Props['large'] = false;
 
   const group = getContext<boolean>('group');
   const table = getContext<boolean>('table');
diff --git a/src/lib/progress/Progressbar.svelte b/src/lib/progress/Progressbar.svelte
index c3b6af216..b850b3db4 100644
--- a/src/lib/progress/Progressbar.svelte
+++ b/src/lib/progress/Progressbar.svelte
@@ -1,21 +1,37 @@
 <script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
   import { cubicOut } from 'svelte/easing';
   import { tweened } from 'svelte/motion';
   import type { EasingFunction } from 'svelte/transition';
   import { twMerge } from 'tailwind-merge';
 
-  export let progress: string | number = '45';
-  export let precision: number = 0
-  export let tweenDuration: number = 400;
-  export let animate: boolean = false;
-  export let size: string = 'h-2.5';
-  export let labelInside: boolean = false;
-  export let labelOutside: string = '';
-  export let easing: EasingFunction = cubicOut;
-  export let color: 'primary' | 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'primary';
-  export let labelInsideClass: string = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
-  export let divClass: string = 'w-full bg-gray-200 rounded-full dark:bg-gray-700';
-  export let progressClass: string;
+  interface $$Props extends HTMLAttributes<HTMLDivElement> {
+    progress: string | number;
+    precision?: number;
+    tweenDuration?: number;
+    animate?: boolean;
+    size?: string;
+    labelInside?: boolean;
+    labelOutside?: string;
+    easing?: EasingFunction;
+    color?: 'primary' | 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo';
+    labelInsideClass?: string;
+    divClass?: string;
+    progressClass?: string;
+  }
+
+  export let progress: $$Props['progress'] = '45';
+  export let precision: $$Props['precision'] = 0
+  export let tweenDuration: $$Props['tweenDuration'] = 400;
+  export let animate: $$Props['animate'] = false;
+  export let size: $$Props['size'] = 'h-2.5';
+  export let labelInside: $$Props['labelInside'] = false;
+  export let labelOutside: $$Props['labelOutside'] = '';
+  export let easing: $$Props['easing'] = cubicOut;
+  export let color: NonNullable<$$Props['color']> = 'primary';
+  export let labelInsideClass: $$Props['labelInsideClass'] = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
+  export let divClass: $$Props['divClass'] = 'w-full bg-gray-200 rounded-full dark:bg-gray-700';
+  export let progressClass: $$Props['progressClass'] = '';
 
   const _progress = tweened(0, {
     duration: animate ? tweenDuration : 0,
diff --git a/src/lib/rating/Heart.svelte b/src/lib/rating/Heart.svelte
index 6ff170075..f8a30c7d2 100644
--- a/src/lib/rating/Heart.svelte
+++ b/src/lib/rating/Heart.svelte
@@ -1,11 +1,23 @@
 <script lang="ts">
-  export let fillPercent: number = 100;
-  export let fillColor: string = '#ff0000';
-  export let strokeColor: string = '#ff0000';
-  export let size: number = 24;
-  export let ariaLabel: string = 'heart';
-  export let id: string = 'heart';
-  export let role = 'img';
+  import type { SVGAttributes } from 'svelte/elements';
+
+  interface $$Props extends SVGAttributes<SVGSVGElement> {
+    fillPercent?: number;
+    fillColor?: string;
+    strokeColor?: string;
+    size?: number;
+    ariaLabel?: string;
+    id?: string;
+    role?: string;
+  }
+
+  export let fillPercent: $$Props['fillPercent'] = 100;
+  export let fillColor: $$Props['fillColor'] = '#ff0000';
+  export let strokeColor: $$Props['strokeColor'] = '#ff0000';
+  export let size: $$Props['size'] = 24;
+  export let ariaLabel: $$Props['ariaLabel'] = 'heart';
+  export let id: $$Props['id'] = 'heart';
+  export let role: $$Props['role'] = 'img';
 </script>
 
 <svg width={size} height={size} class={$$props.class} {...$$restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none" on:click>
diff --git a/src/lib/rating/Rating.svelte b/src/lib/rating/Rating.svelte
index 8a6d763b9..114d7dd6d 100644
--- a/src/lib/rating/Rating.svelte
+++ b/src/lib/rating/Rating.svelte
@@ -24,8 +24,8 @@
   export let partialId: $$Props['partialId'] = 'partialStar' + generateId();
   export let icon: $$Props['icon'] = Star;
   export let count: $$Props['count'] = false;
-  export let iconFillColor: $$Props['iconFillColor'] = '';
-  export let iconStrokeColor: $$Props['iconStrokeColor'] = '';
+  export let iconFillColor: $$Props['iconFillColor'] = '#F5CA14';
+  export let iconStrokeColor: $$Props['iconStrokeColor'] = '#F5CA14';
 
   // generate unique id for full star and gray star
   const fullStarId: string = generateId();
diff --git a/src/lib/rating/RatingComment.svelte b/src/lib/rating/RatingComment.svelte
index fe34d3429..f3a3f06e8 100644
--- a/src/lib/rating/RatingComment.svelte
+++ b/src/lib/rating/RatingComment.svelte
@@ -1,29 +1,32 @@
 <script lang="ts">
   import Button from '../buttons/Button.svelte';
   import Rating from './Rating.svelte';
-  // default is floor
-  export let ceil: boolean = false;
-  export let helpfullink: string = '';
-  export let abuselink: string = '';
-  export let comment: {
-    id: string;
-    user: {
-      name: string;
-      img: {
-        src: string;
-        alt: string;
+  
+  interface $$Props {
+    helpfullink?: string;
+    abuselink?: string;
+    comment: {
+      id: string;
+      user: {
+        name: string;
+        img: {
+          src: string;
+          alt: string;
+        };
+        joined: string;
       };
-      joined: string;
+      total: number;
+      rating: number;
+      heading: string;
+      address: string;
+      datetime: string;
     };
-    total: number;
-    rating: number;
-    heading: string;
-    address: string;
-    datetime: string;
-  };
+  }
 
-  let roundedRating: number = ceil ? Math.ceil(comment.rating) : Math.floor(comment.rating);
-  let grayStars: number = comment.total - roundedRating;
+  // export let ceil: $$Props['ceil'] = false;
+  export let helpfullink: $$Props['helpfullink'] = '';
+  export let abuselink: $$Props['abuselink'] = '';
+  export let comment: $$Props['comment'];
 </script>
 
 <article>
diff --git a/src/lib/rating/Review.svelte b/src/lib/rating/Review.svelte
index ac2df17cc..f5a305a0a 100644
--- a/src/lib/rating/Review.svelte
+++ b/src/lib/rating/Review.svelte
@@ -1,13 +1,22 @@
 <script lang="ts">
   import type { ReviewType } from '../types';
   import { twMerge } from 'tailwind-merge';
+  
+  interface $$Props {
+    review: ReviewType;
+    articleClass?: string;
+    divClass?: string;
+    imgClass?: string;
+    ulClass?: string;
+    liClass?: string;
+  }
 
-  export let review: ReviewType;
-  export let articleClass: string = 'md:gap-8 md:grid md:grid-cols-3';
-  export let divClass: string = 'flex items-center mb-6 space-x-4 rtl:space-x-reverse';
-  export let imgClass: string = 'w-10 h-10 rounded-full';
-  export let ulClass: string = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
-  export let liClass: string = 'flex items-center';
+  export let review: $$Props['review'];
+  export let articleClass: $$Props['articleClass'] = 'md:gap-8 md:grid md:grid-cols-3';
+  export let divClass: $$Props['divClass'] = 'flex items-center mb-6 space-x-4 rtl:space-x-reverse';
+  export let imgClass: $$Props['imgClass'] = 'w-10 h-10 rounded-full';
+  export let ulClass: $$Props['ulClass'] = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
+  export let liClass: $$Props['liClass'] = 'flex items-center';
 </script>
 
 <article class={twMerge(articleClass, $$props.classArticle)}>
diff --git a/src/lib/rating/ScoreRating.svelte b/src/lib/rating/ScoreRating.svelte
index 3a2b0241f..722bb9742 100644
--- a/src/lib/rating/ScoreRating.svelte
+++ b/src/lib/rating/ScoreRating.svelte
@@ -1,18 +1,30 @@
 <script lang="ts">
-  export let ratings: { label: string; rating: number }[] = [];
-  export let ratings2: { label: string; rating: number }[] = [];
-  export let headerLabel: {
-    desc1: string;
-    desc2: string;
-    desc3: string;
-    link: { label: string; url: string };
-  };
-  export let desc1Class: string = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
-  export let desc2Class: string = 'ms-2 w-24 font-medium text-gray-900 dark:text-white';
-  export let desc3spanClass: string = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
-  export let desc3pClass: string = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
-  export let linkClass: string = 'ms-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
-  export let barColor: string = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
+  interface $$Props {
+    ratings: { label: string; rating: number }[];
+    ratings2: { label: string; rating: number }[];
+    headerLabel: {
+      desc1?: string;
+      desc2?: string;
+      desc3?: string;
+      link?: { label: string; url: string };
+    };
+    desc1Class?: string;
+    desc2Class?: string;
+    desc3spanClass?: string;
+    desc3pClass?: string;
+    linkClass?: string;
+    barColor?: string;
+  }
+
+  export let ratings: $$Props['ratings'] = [];
+  export let ratings2: $$Props['ratings2'] = [];
+  export let headerLabel: $$Props['headerLabel'];
+  export let desc1Class: $$Props['desc1Class'] = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
+  export let desc2Class: $$Props['desc2Class'] = 'ms-2 w-24 font-medium text-gray-900 dark:text-white';
+  export let desc3spanClass: $$Props['desc3spanClass'] = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
+  export let desc3pClass: $$Props['desc3pClass'] = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
+  export let linkClass: $$Props['linkClass'] = 'ms-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
+  export let barColor: $$Props['barColor'] = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
 </script>
 
 <div class="flex items-center mb-5">
diff --git a/src/lib/rating/Star.svelte b/src/lib/rating/Star.svelte
index 9cbb11b36..0d338ee54 100644
--- a/src/lib/rating/Star.svelte
+++ b/src/lib/rating/Star.svelte
@@ -1,13 +1,24 @@
 <script lang="ts">
+  import type { SVGAttributes } from 'svelte/elements';
   import generateId from '$lib/utils/generateId';
 
-  export let fillPercent: number = 100;
-  export let fillColor: string = '#F5CA14';
-  export let strokeColor: string = '#F5CA14';
-  export let size: number = 24;
-  export let ariaLabel: string = 'star';
-  export let id: string = generateId();
-  export let role = 'img';
+  interface $$Props extends SVGAttributes<SVGSVGElement> {
+    fillPercent?: number;
+    fillColor?: string;
+    strokeColor?: string;
+    size?: number;
+    ariaLabel?: string;
+    id?: string;
+    role?: string;
+  }
+
+  export let fillPercent: $$Props['fillPercent'] = 100;
+  export let fillColor: $$Props['fillColor'] = '#F5CA14';
+  export let strokeColor: $$Props['strokeColor'] = '#F5CA14';
+  export let size: $$Props['size'] = 24;
+  export let ariaLabel: $$Props['ariaLabel'] = 'star';
+  export let id: $$Props['id'] = generateId();
+  export let role: $$Props['role'] = 'img';
 </script>
 
 <svg width={size} height={size} {...$$restProps} class={$$props.class} aria-label={ariaLabel} viewBox="100 100 120 120" {role} on:click>
diff --git a/src/lib/rating/Thumbup.svelte b/src/lib/rating/Thumbup.svelte
index dc5e8d040..9eb90160b 100644
--- a/src/lib/rating/Thumbup.svelte
+++ b/src/lib/rating/Thumbup.svelte
@@ -1,11 +1,23 @@
 <script lang="ts">
-  export let fillPercent: number = 100;
-  export let fillColor: string = '#00b500';
-  export let strokeColor: string = '#00b500';
-  export let size: number = 24;
-  export let ariaLabel: string = 'thumbup';
-  export let id: string = 'thumbup';
-  export let role = 'img';
+  import type { SVGAttributes } from 'svelte/elements';
+
+  interface $$Props extends SVGAttributes<SVGSVGElement> {
+    fillPercent?: number;
+    fillColor?: string;
+    strokeColor?: string;
+    size?: number;
+    ariaLabel?: string;
+    id?: string;
+    role?: string;
+  }
+
+  export let fillPercent: $$Props['fillPercent'] = 100;
+  export let fillColor: $$Props['fillColor'] = '#00b500';
+  export let strokeColor: $$Props['strokeColor'] = '#00b500';
+  export let size: $$Props['size'] = 24;
+  export let ariaLabel: $$Props['ariaLabel'] = 'thumbup';
+  export let id: $$Props['id'] = 'thumbup';
+  export let role: $$Props['role'] = 'img';
 </script>
 
 <svg width={size} height={size} {...$$restProps} class={$$props.class} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none" on:click>
diff --git a/src/lib/sidebar/Sidebar.svelte b/src/lib/sidebar/Sidebar.svelte
index 6fa42d1b4..c2a99c841 100644
--- a/src/lib/sidebar/Sidebar.svelte
+++ b/src/lib/sidebar/Sidebar.svelte
@@ -6,18 +6,26 @@
 </script>
 
 <script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
   import { setContext } from 'svelte';
   import { twMerge } from 'tailwind-merge';
   import { writable } from 'svelte/store';
 
-  const activeUrlStore = writable('');
+  interface $$Props extends HTMLAttributes<HTMLElement> {
+    activeUrl?: string;
+    asideClass?: string;
+    nonActiveClass?: string;
+    activeClass?: string;
+    ariaLabel?: string;
+  }
 
-  export let activeUrl: string = '';
-  export let asideClass: string = 'w-64';
-  export let nonActiveClass: string = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
-  export let activeClass: string = 'flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
-  export let ariaLabel: string = 'Sidebar';
+  export let activeUrl: NonNullable<$$Props['activeUrl']> = '';
+  export let asideClass: $$Props['asideClass'] = 'w-64';
+  export let nonActiveClass: NonNullable<$$Props['nonActiveClass']> = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
+  export let activeClass: NonNullable<$$Props['activeClass']> = 'flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
+  export let ariaLabel: $$Props['ariaLabel'] = 'Sidebar';
 
+  const activeUrlStore = writable('');
   setContext<SidebarType>('sidebarContext', { activeClass, nonActiveClass });
 
   $: {
diff --git a/src/lib/sidebar/SidebarBrand.svelte b/src/lib/sidebar/SidebarBrand.svelte
index 242befdd4..930110bfd 100644
--- a/src/lib/sidebar/SidebarBrand.svelte
+++ b/src/lib/sidebar/SidebarBrand.svelte
@@ -1,11 +1,19 @@
 <script lang="ts">
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
   import type { SiteType } from '../types';
 
-  export let site: SiteType;
-  export let aClass: string = 'flex items-center ps-2.5 mb-5';
-  export let imgClass: string = 'h-6 me-3 sm:h-7';
-  export let spanClass: string = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
+  interface $$Props extends HTMLAnchorAttributes {
+    site: SiteType;
+    aClass?: string;
+    imgClass?: string;
+    spanClass?: string;
+  }
+
+  export let site: $$Props['site'];
+  export let aClass: $$Props['aClass'] = 'flex items-center ps-2.5 mb-5';
+  export let imgClass: $$Props['imgClass'] = 'h-6 me-3 sm:h-7';
+  export let spanClass: $$Props['spanClass'] = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
 </script>
 
 <a {...$$restProps} href={site.href} class={twMerge(aClass, $$props.class)}>
diff --git a/src/lib/sidebar/SidebarCta.svelte b/src/lib/sidebar/SidebarCta.svelte
index 51c2c3676..000e47d91 100644
--- a/src/lib/sidebar/SidebarCta.svelte
+++ b/src/lib/sidebar/SidebarCta.svelte
@@ -1,10 +1,18 @@
 <script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
 
-  export let divWrapperClass: string = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
-  export let divClass: string = 'flex items-center mb-3';
-  export let spanClass: string = 'bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
-  export let label: string = '';
+  interface $$Props extends HTMLAttributes<HTMLDivElement> {
+    divWrapperClass?: string;
+    divClass?: string;
+    spanClass?: string;
+    label?: string;
+  }
+
+  export let divWrapperClass: $$Props['divWrapperClass'] = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
+  export let divClass: $$Props['divClass'] = 'flex items-center mb-3';
+  export let spanClass: $$Props['spanClass'] = 'bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
+  export let label: $$Props['label'] = '';
 </script>
 
 <div {...$$restProps} id="dropdown-cta" class={twMerge(divWrapperClass, $$props.class)} role="alert">
diff --git a/src/lib/sidebar/SidebarDropdownItem.svelte b/src/lib/sidebar/SidebarDropdownItem.svelte
index 93f2fbc69..75229552b 100644
--- a/src/lib/sidebar/SidebarDropdownItem.svelte
+++ b/src/lib/sidebar/SidebarDropdownItem.svelte
@@ -1,11 +1,20 @@
 <script lang="ts">
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
 
-  export let aClass: string = 'flex items-center p-2 ps-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
-  export let href: string = '';
-  export let label: string = '';
-  export let activeClass: string = 'flex items-center p-2 ps-11 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
-  export let active: boolean = false;
+  interface $$Props extends HTMLAnchorAttributes {
+    aClass?: string;
+    href?: string;
+    label?: string;
+    activeClass?: string;
+    active?: boolean;
+  }
+
+  export let aClass: $$Props['aClass'] = 'flex items-center p-2 ps-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+  export let href: $$Props['href'] = '';
+  export let label: $$Props['label'] = '';
+  export let activeClass: $$Props['activeClass'] = 'flex items-center p-2 ps-11 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
+  export let active: $$Props['active'] = false;
 </script>
 
 <li>
diff --git a/src/lib/sidebar/SidebarDropdownWrapper.svelte b/src/lib/sidebar/SidebarDropdownWrapper.svelte
index eab00c99d..7ab155245 100644
--- a/src/lib/sidebar/SidebarDropdownWrapper.svelte
+++ b/src/lib/sidebar/SidebarDropdownWrapper.svelte
@@ -1,14 +1,26 @@
 <script lang="ts">
+  import type { HTMLButtonAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
   import { fade, blur, fly, slide } from 'svelte/transition';
   import type { TransitionTypes, TransitionParamTypes } from '../types';
 
-  export let btnClass: string = 'flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
-  export let label: string = '';
-  export let spanClass: string = 'flex-1 ms-3 text-left whitespace-nowrap';
-  export let ulClass: string = 'py-2 space-y-2';
-  export let transitionType: TransitionTypes = 'slide';
-  export let transitionParams: TransitionParamTypes = {};
+  interface $$Props extends HTMLButtonAttributes {
+    btnClass?: string;
+    label?: string;
+    spanClass?: string;
+    ulClass?: string;
+    transitionType?: TransitionTypes;
+    transitionParams?: TransitionParamTypes;
+    isOpen?: boolean;
+  }
+
+  export let btnClass: $$Props['btnClass'] = 'flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+  export let label: $$Props['label'] = '';
+  export let spanClass: $$Props['spanClass'] = 'flex-1 ms-3 text-left whitespace-nowrap';
+  export let ulClass: $$Props['ulClass'] = 'py-2 space-y-2';
+  export let transitionType: $$Props['transitionType'] = 'slide';
+  export let transitionParams: $$Props['transitionParams'] = {};
+  export let isOpen: $$Props['isOpen'] = false;
 
   // make a custom transition function that returns the desired transition
   const multiple = (node: HTMLElement, params: any) => {
@@ -24,7 +36,7 @@
     }
   };
 
-  export let isOpen = false;
+  
   const handleDropdown = () => {
     isOpen = !isOpen;
   };
diff --git a/src/lib/sidebar/SidebarGroup.svelte b/src/lib/sidebar/SidebarGroup.svelte
index db38bd90f..14c2290a9 100644
--- a/src/lib/sidebar/SidebarGroup.svelte
+++ b/src/lib/sidebar/SidebarGroup.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
 
-  export let ulClass: string = 'space-y-2';
-  export let borderClass: string = 'pt-4 mt-4 border-t border-gray-200 dark:border-gray-700';
-  export let border: boolean = false;
+  interface $$Props extends HTMLAttributes<HTMLUListElement> {
+    ulClass?: string;
+    borderClass?: string;
+    border?: boolean;
+  }
+
+  export let ulClass: $$Props['ulClass'] = 'space-y-2';
+  export let borderClass: $$Props['borderClass'] = 'pt-4 mt-4 border-t border-gray-200 dark:border-gray-700';
+  export let border: $$Props['border'] = false;
 
   if (border) {
     ulClass += ' ' + borderClass;
diff --git a/src/lib/sidebar/SidebarItem.svelte b/src/lib/sidebar/SidebarItem.svelte
index fc0b7c5af..aad6985be 100644
--- a/src/lib/sidebar/SidebarItem.svelte
+++ b/src/lib/sidebar/SidebarItem.svelte
@@ -1,17 +1,27 @@
 <script lang="ts">
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
   import type { Action } from 'svelte/action';
   import { getContext } from 'svelte';
   import { twMerge } from 'tailwind-merge';
   import type { SidebarType } from './Sidebar.svelte';
 
-  export let action: Action<HTMLElement, any> = () => {};
-  export let params: any = {};
-  export let href: string = '';
-  export let label: string = '';
-  export let spanClass: string = 'ms-3';
-  export let activeClass: string | undefined = undefined;
-  export let nonActiveClass: string | undefined = undefined;
-  // export let active: boolean = false;
+  interface $$Props extends HTMLAnchorAttributes {
+    action?: Action<HTMLElement, any>;
+    params?: any;
+    href?: string;
+    label?: string;
+    spanClass?: string;
+    activeClass?: string;
+    nonActiveClass?: string;
+  }
+
+  export let action: NonNullable<$$Props['action']> = () => {};
+  export let params: $$Props['params'] = {};
+  export let href: $$Props['href'] = '';
+  export let label: $$Props['label'] = '';
+  export let spanClass: $$Props['spanClass'] = 'ms-3';
+  export let activeClass: $$Props['activeClass'] = undefined;
+  export let nonActiveClass: $$Props['nonActiveClass'] = undefined;
 
   const context = getContext<SidebarType>('sidebarContext') ?? {};
   const activeUrlStore = getContext('activeUrl') as { subscribe: (callback: (value: string) => void) => void };
diff --git a/src/lib/sidebar/SidebarWrapper.svelte b/src/lib/sidebar/SidebarWrapper.svelte
index 5c30d48a5..6395515d1 100644
--- a/src/lib/sidebar/SidebarWrapper.svelte
+++ b/src/lib/sidebar/SidebarWrapper.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
+  
+  interface $$Props extends HTMLAttributes<HTMLDivElement> {
+    divClass?: string;
+  }
 
-  export let divClass: string = 'overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800';
+  export let divClass: $$Props['divClass'] = 'overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800';
 </script>
 
 <div {...$$restProps} class={twMerge(divClass, $$props.class)}>
diff --git a/src/lib/skeleton/CardPlaceholder.svelte b/src/lib/skeleton/CardPlaceholder.svelte
index c92598c5e..a8e373bf5 100644
--- a/src/lib/skeleton/CardPlaceholder.svelte
+++ b/src/lib/skeleton/CardPlaceholder.svelte
@@ -12,8 +12,13 @@
     xxl: 'max-w-2xl'
   };
 
-  export let divClass: string = 'p-4 rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
-  export let size: keyof Sizes = 'sm';
+  interface $$Props {
+    divClass?: string;
+    size?: keyof Sizes;
+  }
+
+  export let divClass: $$Props['divClass'] = 'p-4 rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
+  export let size: NonNullable<$$Props['size']> = 'sm';
   $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 </script>
 
diff --git a/src/lib/skeleton/ImagePlaceholder.svelte b/src/lib/skeleton/ImagePlaceholder.svelte
index b66bbd473..0e199b0ad 100644
--- a/src/lib/skeleton/ImagePlaceholder.svelte
+++ b/src/lib/skeleton/ImagePlaceholder.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
-  export let divClass: string = 'space-y-8 animate-pulse md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center';
-  export let imgHeight: string = '48';
-  export let imgOnly: boolean = false;
+
+  interface $$Props {
+    divClass?: string;
+    imgHeight?: string;
+    imgOnly?: boolean;
+  }
+
+  export let divClass: $$Props['divClass'] = 'space-y-8 animate-pulse md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center';
+  export let imgHeight: $$Props['imgHeight'] = '48';
+  export let imgOnly: $$Props['imgOnly'] = false;
 
   $: imgOnlyClass = imgOnly ? 'max-w-60' : '';
 </script>
diff --git a/src/lib/skeleton/ListPlaceholder.svelte b/src/lib/skeleton/ListPlaceholder.svelte
index d5af5bfc6..ca5e9baa9 100644
--- a/src/lib/skeleton/ListPlaceholder.svelte
+++ b/src/lib/skeleton/ListPlaceholder.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
-  export let divClass: string = 'p-4 space-y-4 max-w-md rounded border border-gray-200 divide-y divide-gray-200 shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700';
+
+  interface $$Props {
+    divClass?: string;
+  }
+
+  export let divClass: $$Props['divClass'] = 'p-4 space-y-4 max-w-md rounded border border-gray-200 divide-y divide-gray-200 shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700';
 </script>
 
 <div role="status" class={twMerge(divClass, $$props.class)}>
diff --git a/src/lib/skeleton/Skeleton.svelte b/src/lib/skeleton/Skeleton.svelte
index fa836512a..d2238ea17 100644
--- a/src/lib/skeleton/Skeleton.svelte
+++ b/src/lib/skeleton/Skeleton.svelte
@@ -13,8 +13,13 @@
     xxl: 'max-w-2xl'
   };
 
-  export let divClass: string = 'animate-pulse';
-  export let size: keyof Sizes = 'sm';
+  interface $$Props {
+    divClass?: string;
+    size?: keyof Sizes;
+  }
+
+  export let divClass: $$Props['divClass'] = 'animate-pulse';
+  export let size: NonNullable<$$Props['size']> = 'sm';
   $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 </script>
 
diff --git a/src/lib/skeleton/TestimonialPlaceholder.svelte b/src/lib/skeleton/TestimonialPlaceholder.svelte
index 26d616243..f2a550e4b 100644
--- a/src/lib/skeleton/TestimonialPlaceholder.svelte
+++ b/src/lib/skeleton/TestimonialPlaceholder.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
-  export let divClass: string = 'animate-pulse';
+
+  interface $$Props {
+    divClass?: string;
+  }
+
+  export let divClass: $$Props['divClass'] = 'animate-pulse';
 </script>
 
 <div role="status" class={twMerge(divClass, $$props.class)}>
diff --git a/src/lib/skeleton/TextPlaceholder.svelte b/src/lib/skeleton/TextPlaceholder.svelte
index 93c1d5895..d3b564ef5 100644
--- a/src/lib/skeleton/TextPlaceholder.svelte
+++ b/src/lib/skeleton/TextPlaceholder.svelte
@@ -12,8 +12,13 @@
     xxl: 'max-w-2xl'
   };
 
-  export let divClass: string = 'space-y-2.5 animate-pulse';
-  export let size: keyof Sizes = 'sm';
+  interface $$Props {
+    divClass?: string;
+    size?: keyof Sizes;
+  }
+
+  export let divClass: $$Props['divClass'] = 'space-y-2.5 animate-pulse';
+  export let size: NonNullable<$$Props['size']> = 'sm';
   $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 </script>
 
diff --git a/src/lib/skeleton/VideoPlaceholder.svelte b/src/lib/skeleton/VideoPlaceholder.svelte
index 1527fd9e3..2c542c7df 100644
--- a/src/lib/skeleton/VideoPlaceholder.svelte
+++ b/src/lib/skeleton/VideoPlaceholder.svelte
@@ -12,8 +12,13 @@
     xxl: 'max-w-2xl'
   };
 
-  export let divClass: string = 'flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700';
-  export let size: keyof Sizes = 'sm';
+  interface $$Props {
+    divClass?: string;
+    size?: keyof Sizes;
+  }
+
+  export let divClass: $$Props['divClass'] = 'flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700';
+  export let size: NonNullable<$$Props['size']> = 'sm';
   $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 </script>
 
diff --git a/src/lib/skeleton/WidgetPlaceholder.svelte b/src/lib/skeleton/WidgetPlaceholder.svelte
index 3aca5ec38..1ce407e0c 100644
--- a/src/lib/skeleton/WidgetPlaceholder.svelte
+++ b/src/lib/skeleton/WidgetPlaceholder.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
-  export let divClass: string = 'p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
+
+  interface $$Props {
+    divClass?: string;
+  }
+
+  export let divClass: $$Props['divClass'] = 'p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
 </script>
 
 <div role="status" class={twMerge(divClass, $$props.class)}>
diff --git a/src/lib/speed-dial/SpeedDial.svelte b/src/lib/speed-dial/SpeedDial.svelte
index 5b2779584..fd95abcac 100644
--- a/src/lib/speed-dial/SpeedDial.svelte
+++ b/src/lib/speed-dial/SpeedDial.svelte
@@ -9,6 +9,7 @@
 </script>
 
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
   import { twMerge } from 'tailwind-merge';
   import Button from '$lib/buttons/Button.svelte';
   import Popper from '$lib/utils/Popper.svelte';
@@ -16,17 +17,31 @@
   import generateId from '$lib/utils/generateId';
   import GradientButton from '$lib/buttons/GradientButton.svelte';
 
-  export let defaultClass: string = 'fixed end-6 bottom-6';
-  export let popperDefaultClass: string = 'flex items-center mb-4 gap-2';
-  export let placement: Placement = 'top';
-  export let pill: boolean = true;
-  export let tooltip: Placement | 'none' = 'left';
-  export let trigger: 'hover' | 'click' | 'focus' = 'hover';
-  export let textOutside: boolean = false;
-  export let id: string = generateId();
-  export let name: string = 'Open actions menu';
-  export let gradient: boolean = false;
-  export let open: boolean = false;
+  type $$Props = ComponentProps<Button> & {
+    defaultClass?: string;
+    popperDefaultClass?: string;
+    placement?: Placement;
+    pill?: boolean;
+    tooltip?: Placement | 'none';
+    trigger?: 'hover' | 'click' | 'focus';
+    textOutside?: boolean;
+    id?: string;
+    name?: string;
+    gradient?: boolean;
+    open?: boolean;
+  }
+  
+  export let defaultClass: $$Props['defaultClass'] = 'fixed end-6 bottom-6';
+  export let popperDefaultClass: $$Props['popperDefaultClass'] = 'flex items-center mb-4 gap-2';
+  export let placement: NonNullable<$$Props['placement']> = 'top';
+  export let pill: NonNullable<$$Props['pill']> = true;
+  export let tooltip: NonNullable<$$Props['tooltip']> = 'left';
+  export let trigger: $$Props['trigger'] = 'hover';
+  export let textOutside: NonNullable<$$Props['textOutside']> = false;
+  export let id: $$Props['id'] = generateId();
+  export let name: $$Props['name'] = 'Open actions menu';
+  export let gradient: $$Props['gradient'] = false;
+  export let open: $$Props['open'] = false;
 
   setContext<SpeedCtxType>('speed-dial', { pill, tooltip, textOutside });
 
@@ -35,6 +50,8 @@
 
   let poperClass: string;
   $: poperClass = twMerge(popperDefaultClass, ['top', 'bottom'].includes(placement.split('-')[0]) && 'flex-col');
+
+  $: console.log(typeof $$restProps, Object.keys($$restProps));
 </script>
 
 <div class={divClass}>
diff --git a/src/lib/speed-dial/SpeedDialButton.svelte b/src/lib/speed-dial/SpeedDialButton.svelte
index a3e6321cf..caba756da 100644
--- a/src/lib/speed-dial/SpeedDialButton.svelte
+++ b/src/lib/speed-dial/SpeedDialButton.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ComponentProps } from'svelte';
   import Button from '$lib/buttons/Button.svelte';
   import Tooltip from '$lib/tooltip/Tooltip.svelte';
   import type { Placement } from '@floating-ui/dom';
@@ -6,16 +7,26 @@
   import { getContext } from 'svelte';
   import type { SpeedCtxType } from './SpeedDial.svelte';
 
-  const context = getContext<SpeedCtxType>('speed-dial');
+  type $$Props = ComponentProps<Button> & {
+    defaultClass?: string;
+    name?: string;
+    tooltip?: Placement | 'none';
+    pill?: boolean;
+    textOutside?: boolean;
+    textOutsideClass?: string;
+    textDefaultClass?: string;
+  }
 
-  export let btnDefaultClass: string = 'w-[52px] h-[52px] shadow-sm !p-2';
-  export let name: string = '';
-  export let tooltip: Placement | 'none' = context.tooltip;
-  export let pill: boolean = context.pill;
-  export let textOutside: boolean = context.textOutside;
-  export let textOutsideClass: string = 'block absolute -start-14 top-1/2 mb-px text-sm font-medium -translate-y-1/2';
-  export let textDefaultClass: string = 'block mb-px text-xs font-medium';
+  const context = getContext<SpeedCtxType>('speed-dial');
 
+  export let btnDefaultClass: $$Props['defaultClass'] = 'w-[52px] h-[52px] shadow-sm !p-2';
+  export let name: $$Props['name'] = '';
+  export let tooltip: $$Props['tooltip'] = context.tooltip;
+  export let pill: $$Props['pill'] = context.pill;
+  export let textOutside: $$Props['textOutside'] = context.textOutside;
+  export let textOutsideClass: $$Props['textOutsideClass'] = 'block absolute -start-14 top-1/2 mb-px text-sm font-medium -translate-y-1/2';
+  export let textDefaultClass: $$Props['textDefaultClass'] = 'block mb-px text-xs font-medium';
+  
   let btnClass: string;
   $: btnClass = twMerge(btnDefaultClass, tooltip === 'none' && 'flex-col', textOutside && 'relative', $$props.class);
 </script>
diff --git a/src/lib/spinner/Spinner.svelte b/src/lib/spinner/Spinner.svelte
index f574072d5..7f76da93b 100644
--- a/src/lib/spinner/Spinner.svelte
+++ b/src/lib/spinner/Spinner.svelte
@@ -1,13 +1,23 @@
 <script lang="ts">
+  import type { SVGAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
 
-  export let color: 'primary' | 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' | 'custom' | undefined = 'primary';
-  export let bg: string = 'text-gray-300';
-  export let customColor: string = '';
-  export let size: string | number = '8';
+  interface $$Props extends SVGAttributes<SVGSVGElement> {
+    color?: 'primary' | 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' | 'custom';
+    bg?: string;
+    size?: string | number;
+    currentFill?: string;
+    currentColor?: string;
+    customColor?: string;
+  }
+
+  export let color: $$Props['color'] = 'primary';
+  export let bg: $$Props['bg'] = 'text-gray-300';
+  export let customColor: $$Props['customColor'] = '';
+  export let size: $$Props['size'] = '8';
   // these two props add fine control over the spinner colors
-  export let currentFill: string = 'currentFill';
-  export let currentColor: string = 'currentColor';
+  export let currentFill: $$Props['currentFill'] = 'currentFill';
+  export let currentColor: $$Props['currentColor'] = 'currentColor';
 
   let iconsize = `w-${size} h-${size}`;
 
diff --git a/src/lib/steps/StepIndicator.svelte b/src/lib/steps/StepIndicator.svelte
index 1bd2f2cba..d053abdde 100644
--- a/src/lib/steps/StepIndicator.svelte
+++ b/src/lib/steps/StepIndicator.svelte
@@ -1,14 +1,26 @@
 <script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
   import { twMerge, twJoin } from 'tailwind-merge';
 
-  export let steps: string[] = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
-  export let currentStep = 1;
-  export let size: string = 'h-2.5';
-  export let color: 'primary' | 'secondary' | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'custom' = 'primary';
-  export let glow: boolean = false;
-  export let hideLabel: boolean = false;
-  export let completedCustom: string = '';
-  export let currentCustom: string = '';
+  interface $$Props extends HTMLAttributes<HTMLElement> {
+    steps: string[];
+    currentStep: number;
+    size: string;
+    color: 'primary' | 'secondary' | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'custom';
+    glow: boolean;
+    hideLabel: boolean;
+    completedCustom: string;
+    currentCustom: string;
+  }
+
+  export let steps: $$Props['steps'] = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
+  export let currentStep: $$Props['currentStep'] = 1;
+  export let size: $$Props['size'] = 'h-2.5';
+  export let color: $$Props['color'] = 'primary';
+  export let glow: $$Props['glow'] = false;
+  export let hideLabel: $$Props['hideLabel'] = false;
+  export let completedCustom: $$Props['completedCustom'] = '';
+  export let currentCustom: $$Props['currentCustom'] = '';
 
   const completedStepColors = {
     primary: 'bg-primary-500 dark:bg-primary-900',
diff --git a/src/lib/table/Table.svelte b/src/lib/table/Table.svelte
index 0cbf8f4d9..571b3834a 100644
--- a/src/lib/table/Table.svelte
+++ b/src/lib/table/Table.svelte
@@ -1,24 +1,43 @@
 <script lang="ts" generics="T">
+  import type { HTMLTableAttributes } from 'svelte/elements';
   import { writable } from 'svelte/store';
   import { twMerge, twJoin } from 'tailwind-merge';
   import { setContext } from 'svelte';
   import type { TableColorType } from '../types';
 
-  export let divClass: string = 'relative overflow-x-auto';
-  export let striped: boolean = false;
-  export let hoverable: boolean = false;
-  export let noborder: boolean = false;
-  export let shadow: boolean = false;
-  export let color: TableColorType = 'default';
-  export let customeColor: string = '';
-  export let items: T[] = [];
-  export let filter: ((t: T, term: string) => boolean) | null = null;
-  export let placeholder: string = 'Search';
-  export let innerDivClass: string = 'p-4';
-  export let searchClass: string = 'relative mt-1';
-  export let svgDivClass: string = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
-  export let svgClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
-  export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+  interface $$Props extends HTMLTableAttributes {
+    divClass?: string;
+    striped?: boolean;
+    hoverable?: boolean;
+    noborder?: boolean;
+    shadow?: boolean;
+    color?: TableColorType;
+    customeColor?: string;
+    items?: T[];
+    filter?:  ((t: T, term: string) => boolean) | null;
+    placeholder?: string;
+    innerDivClass?: string;
+    searchClass?: string;
+    svgDivClass?: string;
+    svgClass?: string;
+    inputClass?: string;
+  }
+
+  export let divClass: $$Props['divClass'] = 'relative overflow-x-auto';
+  export let striped: $$Props['striped'] = false;
+  export let hoverable: $$Props['hoverable'] = false;
+  export let noborder: $$Props['noborder'] = false;
+  export let shadow: $$Props['shadow'] = false;
+  export let color: NonNullable<$$Props['color']> = 'default';
+  export let customeColor: $$Props['customeColor'] = '';
+  export let items: $$Props['items'] = [];
+  export let filter: $$Props['filter'] = null;
+  export let placeholder: $$Props['placeholder'] = 'Search';
+  export let innerDivClass: $$Props['innerDivClass'] = 'p-4';
+  export let searchClass: $$Props['searchClass'] = 'relative mt-1';
+  export let svgDivClass: $$Props['svgDivClass'] = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
+  export let svgClass: $$Props['svgClass'] = 'w-5 h-5 text-gray-500 dark:text-gray-400';
+  export let inputClass: $$Props['inputClass'] = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 
   let searchTerm = '';
   let inputCls = twMerge(inputClass, $$props.classInput);
@@ -46,7 +65,9 @@
   setContext('searchTerm', searchTermStore);
   setContext('filter', filterStore);
   $: searchTermStore.set(searchTerm);
-  $: filterStore.set(filter);
+  $: {
+    if(filter) filterStore.set(filter)
+  }
   setContext('sorter', writable(null));
 </script>
 
diff --git a/src/lib/table/TableBody.svelte b/src/lib/table/TableBody.svelte
index a5a254f79..d8d221764 100644
--- a/src/lib/table/TableBody.svelte
+++ b/src/lib/table/TableBody.svelte
@@ -1,8 +1,13 @@
 <script lang="ts" generics="T">
+  import type { HTMLAttributes } from 'svelte/elements';
   import { getContext } from 'svelte';
   import type { Writable } from 'svelte/store';
 
-  export let tableBodyClass: string | undefined = undefined;
+  interface $$Props extends HTMLAttributes<HTMLTableSectionElement> {
+    tableBodyClass?: string;
+  }
+  
+  export let tableBodyClass: $$Props['tableBodyClass'] = undefined;
 
   $: items = getContext('items') as T[] || [];
   let filter = getContext('filter') as Writable<((t: T, term: string) => boolean) | null>;
@@ -12,7 +17,7 @@
   $: sorted = $sorter ? filtered.toSorted((a, b) => $sorter.sortDirection * $sorter.sort(a, b)) : filtered;
 </script>
 
-<tbody class={tableBodyClass}>
+<tbody class={tableBodyClass} {...$$restProps}>
   <slot />
   {#each sorted as item}
     <slot name="row" {item} />
diff --git a/src/lib/table/TableBodyCell.svelte b/src/lib/table/TableBodyCell.svelte
index bd8478705..0e4fd6999 100644
--- a/src/lib/table/TableBodyCell.svelte
+++ b/src/lib/table/TableBodyCell.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
+  import type { HTMLTdAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
   import { getContext } from 'svelte';
 
-  export let tdClass: string = 'px-6 py-4 whitespace-nowrap font-medium ';
+  interface $$Props extends HTMLTdAttributes {
+    tdClass?: string;
+  }
+
+  export let tdClass: $$Props['tdClass'] = 'px-6 py-4 whitespace-nowrap font-medium ';
 
   let color = 'default';
   color = getContext('color');
@@ -10,7 +15,7 @@
   $: tdClassfinal = twMerge(tdClass, color === 'default' ? 'text-gray-900 dark:text-white' : 'text-blue-50 whitespace-nowrap dark:text-blue-100', $$props.class);
 </script>
 
-<td  {...$$restProps} class={tdClassfinal}>
+<td {...$$restProps} class={tdClassfinal}>
   {#if $$props.onclick}
   <button on:click={$$props.onclick}>
     <slot />
diff --git a/src/lib/table/TableBodyRow.svelte b/src/lib/table/TableBodyRow.svelte
index f28bd614c..59f0618df 100644
--- a/src/lib/table/TableBodyRow.svelte
+++ b/src/lib/table/TableBodyRow.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
   import { getContext } from 'svelte';
 
-  export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = getContext('color');
+  interface $$Props extends HTMLAttributes<HTMLTableRowElement> {
+    color?: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom';
+  }
+
+  export let color: NonNullable<$$Props['color']> = getContext('color');
 
   const colors = {
     default: 'bg-white dark:bg-gray-800 dark:border-gray-700',
diff --git a/src/lib/table/TableHead.svelte b/src/lib/table/TableHead.svelte
index e5da76df8..39e79fa2e 100644
--- a/src/lib/table/TableHead.svelte
+++ b/src/lib/table/TableHead.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
   import { getContext } from 'svelte';
 
-  export let theadClass: string = 'text-xs uppercase';
-  export let defaultRow: boolean = true;
+  interface $$Props extends HTMLAttributes<HTMLTableSectionElement> {
+    theadClass?: string;
+    defaultRow?: boolean;
+  }
+
+  export let theadClass: $$Props['theadClass'] = 'text-xs uppercase';
+  export let defaultRow: $$Props['defaultRow'] = true;
 
   let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom';
   color = getContext('color');
diff --git a/src/lib/table/TableHeadCell.svelte b/src/lib/table/TableHeadCell.svelte
index 2611c9b42..b2dbb34cf 100644
--- a/src/lib/table/TableHeadCell.svelte
+++ b/src/lib/table/TableHeadCell.svelte
@@ -1,13 +1,22 @@
 <script lang="ts" generics="T">
+  import type { HTMLThAttributes } from 'svelte/elements';
   import { getContext } from 'svelte';
   import type { Writable } from 'svelte/store';
   import { twMerge } from 'tailwind-merge';
 
-  export let padding: string = 'px-6 py-3';
-  export let sort: ((a: T, b: T) => number) | null = null;
-  export let defaultDirection: 'asc' | 'desc' = 'asc';
-  export let defaultSort: boolean = false;
-  export let direction: 'asc' | 'desc' | null = defaultSort ? defaultDirection : null;
+  interface $$Props extends HTMLThAttributes {
+    padding?: string;
+    sort?: ((a: T, b: T) => number) | null;
+    defaultDirection?: 'asc' | 'desc';
+    defaultSort?: boolean;
+    direction?: 'asc' | 'desc' | null;
+  }
+
+  export let padding: $$Props['padding'] = 'px-6 py-3';
+  export let sort: $$Props['sort'] = null;
+  export let defaultDirection: $$Props['defaultDirection'] = 'asc';
+  export let defaultSort: $$Props['defaultSort'] = false;
+  export let direction: $$Props['direction'] = defaultSort ? defaultDirection : null;
   
   let sorter = getContext('sorter') as Writable<{id: string, sort: (a: T, b: T) => number, sortDirection: -1 | 1} | null>;
   let sortId = Math.random().toString(36).substring(2);
diff --git a/src/lib/table/TableSearch.svelte b/src/lib/table/TableSearch.svelte
index 88ec294b0..f21dc772f 100644
--- a/src/lib/table/TableSearch.svelte
+++ b/src/lib/table/TableSearch.svelte
@@ -1,19 +1,35 @@
 <script lang="ts">
+  import type { HTMLTableAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
   import { setContext } from 'svelte';
 
-  export let divClass: string = 'relative overflow-x-auto shadow-md sm:rounded-lg';
-  export let inputValue: string = '';
-  export let striped: boolean = false;
-  export let hoverable: boolean = false;
-  export let placeholder: string = 'Search';
-  export let customColor: string = '';
-  export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = 'default';
-  export let innerDivClass: string = 'p-4';
-  export let searchClass: string = 'relative mt-1';
-  export let svgDivClass: string = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
-  export let svgClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
-  export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+  interface $$Props extends HTMLTableAttributes {
+    divClass?: string;
+    inputValue?: string;
+    striped?: boolean;
+    hoverable?: boolean;
+    placeholder?: string;
+    customColor?: string;
+    color?: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom';
+    innerDivClass?: string;
+    searchClass?: string;
+    svgDivClass?: string;
+    svgClass?: string;
+    inputClass?: string;
+  }
+
+  export let divClass: $$Props['divClass'] = 'relative overflow-x-auto shadow-md sm:rounded-lg';
+  export let inputValue: $$Props['inputValue'] = '';
+  export let striped: $$Props['striped'] = false;
+  export let hoverable: $$Props['hoverable'] = false;
+  export let placeholder: $$Props['placeholder'] = 'Search';
+  export let customColor: $$Props['customColor'] = '';
+  export let color: NonNullable<$$Props['color']> = 'default';
+  export let innerDivClass: $$Props['innerDivClass'] = 'p-4';
+  export let searchClass: $$Props['searchClass'] = 'relative mt-1';
+  export let svgDivClass: $$Props['svgDivClass'] = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
+  export let svgClass: $$Props['svgClass'] = 'w-5 h-5 text-gray-500 dark:text-gray-400';
+  export let inputClass: $$Props['inputClass'] = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 
   let inputCls = twMerge(inputClass, $$props.classInput);
   let svgDivCls = twMerge(svgDivClass, $$props.classSvgDiv);
diff --git a/src/lib/tabs/TabItem.svelte b/src/lib/tabs/TabItem.svelte
index d0224877a..04fe55aaf 100644
--- a/src/lib/tabs/TabItem.svelte
+++ b/src/lib/tabs/TabItem.svelte
@@ -1,15 +1,25 @@
 <script lang="ts">
+  import type { HTMLButtonAttributes } from 'svelte/elements';
   import { getContext } from 'svelte';
   import type { TabCtxType } from './Tabs.svelte';
   import { writable } from 'svelte/store';
   import { twMerge } from 'tailwind-merge';
 
-  export let open: boolean = false;
-  export let title: string = 'Tab title';
-  export let activeClasses: string | undefined = undefined;
-  export let inactiveClasses: string | undefined = undefined;
-  export let defaultClass: string = 'inline-block text-sm font-medium text-center disabled:cursor-not-allowed';
-  export let divClass: string = '';
+  interface $$Props extends HTMLButtonAttributes {
+    open?: boolean;
+    title?: string;
+    activeClasses?: string;
+    inactiveClasses?: string;
+    defaultClass?: string;
+    divClass?: string;
+  }
+
+  export let open: $$Props['open'] = false;
+  export let title: $$Props['title'] = 'Tab title';
+  export let activeClasses: $$Props['activeClasses'] = undefined;
+  export let inactiveClasses: $$Props['inactiveClasses'] = undefined;
+  export let defaultClass: $$Props['defaultClass'] = 'inline-block text-sm font-medium text-center disabled:cursor-not-allowed';
+  export let divClass: $$Props['divClass'] = '';
 
   const ctx = getContext<TabCtxType>('ctx') ?? {};
   // single selection
diff --git a/src/lib/tabs/Tabs.svelte b/src/lib/tabs/Tabs.svelte
index 4294e819c..5ff2c905d 100644
--- a/src/lib/tabs/Tabs.svelte
+++ b/src/lib/tabs/Tabs.svelte
@@ -9,15 +9,25 @@
 </script>
 
 <script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
   import { setContext } from 'svelte';
 
-  export let tabStyle: 'full' | 'pill' | 'underline' | 'none' = 'none';
-  export let defaultClass: string = 'flex flex-wrap space-x-2 rtl:space-x-reverse';
-  export let contentClass: string = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
-  export let divider: boolean = true;
-  export let activeClasses: string = 'p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500';
-  export let inactiveClasses: string = 'p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300';
+  interface $$Props extends HTMLAttributes<HTMLUListElement> {
+    tabStyle?: 'full' | 'pill' | 'underline' | 'none';
+    defaultClass?: string;
+    contentClass?: string;
+    divider?: boolean;
+    activeClasses?: string;
+    inactiveClasses?: string;
+  }
+
+  export let tabStyle: NonNullable<$$Props['tabStyle']> = 'none';
+  export let defaultClass: $$Props['defaultClass'] = 'flex flex-wrap space-x-2 rtl:space-x-reverse';
+  export let contentClass: $$Props['contentClass'] = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
+  export let divider: $$Props['divider'] = true;
+  export let activeClasses: NonNullable<$$Props['activeClasses']> = 'p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500';
+  export let inactiveClasses: NonNullable<$$Props['inactiveClasses']> = 'p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300';
 
   // styles
   const styledActiveClasses = {
@@ -55,7 +65,7 @@
   $: ulClass = twMerge(defaultClass, tabStyle === 'underline' && '-mb-px', $$props.class);
 </script>
 
-<ul class={ulClass}>
+<ul class={ulClass} {...$$restProps}>
   <slot {tabStyle}></slot>
 </ul>
 {#if divider}
diff --git a/src/lib/timeline/Activity.svelte b/src/lib/timeline/Activity.svelte
index ba5f26e5b..5ee1559fd 100644
--- a/src/lib/timeline/Activity.svelte
+++ b/src/lib/timeline/Activity.svelte
@@ -1,6 +1,13 @@
 <script lang="ts">
+  import type { HTMLOlAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
-  export let olClass: string = 'relative border-s border-gray-200 dark:border-gray-700';
+
+  interface $$Props extends HTMLOlAttributes {
+    olClass?: string;
+  }
+
+  export let olClass: $$Props['olClass'] = 'relative border-s border-gray-200 dark:border-gray-700';
+  
   let olCls: string = twMerge(olClass, $$props.class);
 </script>
 
diff --git a/src/lib/timeline/ActivityItem.svelte b/src/lib/timeline/ActivityItem.svelte
index db92117fd..f03981174 100644
--- a/src/lib/timeline/ActivityItem.svelte
+++ b/src/lib/timeline/ActivityItem.svelte
@@ -2,15 +2,27 @@
   import { twMerge } from 'tailwind-merge';
   import type { ActivityType } from '../types';
 
-  export let activities: ActivityType[];
-  export let liClass: string = 'mb-10 ms-6';
-  export let spanClass: string = 'flex absolute -start-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900';
-  export let imgClass: string = 'rounded-full shadow-lg';
-  export let outerDivClass: string = 'p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600';
-  export let innerDivClass: string = 'justify-between items-center mb-3 sm:flex';
-  export let timeClass: string = 'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0';
-  export let titleClass: string = 'text-sm font-normal text-gray-500 lex dark:text-gray-300';
-  export let textClass: string = 'p-3 text-xs italic font-normal text-gray-500 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300';
+  interface $$Props {
+    activities: ActivityType[];
+    liClass?: string;
+    spanClass?: string;
+    imgClass?: string;
+    outerDivClass?: string;
+    innerDivClass?: string;
+    timeClass?: string;
+    titleClass?: string;
+    textClass?: string;
+  }
+
+  export let activities: $$Props['activities'] = [];
+  export let liClass: $$Props['liClass'] = 'mb-10 ms-6';
+  export let spanClass: $$Props['spanClass'] = 'flex absolute -start-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900';
+  export let imgClass: $$Props['imgClass'] = 'rounded-full shadow-lg';
+  export let outerDivClass: $$Props['outerDivClass'] = 'p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600';
+  export let innerDivClass: $$Props['innerDivClass'] = 'justify-between items-center mb-3 sm:flex';
+  export let timeClass: $$Props['timeClass'] = 'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0';
+  export let titleClass: $$Props['titleClass'] = 'text-sm font-normal text-gray-500 lex dark:text-gray-300';
+  export let textClass: $$Props['textClass'] = 'p-3 text-xs italic font-normal text-gray-500 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300';
 
   let liCls: string = twMerge(liClass, $$props.classLi);
   let spanCls: string = twMerge(spanClass, $$props.classSpan);
diff --git a/src/lib/timeline/Group.svelte b/src/lib/timeline/Group.svelte
index 42fb521ac..f27dd64a1 100644
--- a/src/lib/timeline/Group.svelte
+++ b/src/lib/timeline/Group.svelte
@@ -1,9 +1,19 @@
 <script lang="ts">
+  import type { HTMLOlAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
-  export let divClass: string = 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700';
-  export let timeClass: string = 'text-lg font-semibold text-gray-900 dark:text-white';
-  export let date: Date | string;
-  export let olClass: string = 'mt-3 divide-y divider-gray-200 dark:divide-gray-700';
+
+  interface $$Props extends HTMLOlAttributes {
+    divClass?: string;
+    timeClass?: string;
+    date?: Date | string;
+    olClass?: string;
+  }
+
+  export let divClass: $$Props['divClass'] = 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700';
+  export let timeClass: $$Props['timeClass'] = 'text-lg font-semibold text-gray-900 dark:text-white';
+  export let date: $$Props['date'] = '';
+  export let olClass: $$Props['olClass'] = 'mt-3 divide-y divider-gray-200 dark:divide-gray-700';
+  
   let divCls: string = twMerge(divClass, $$props.classDiv);
   let timeCls: string = twMerge(timeClass, $$props.classTime);
   let olCls: string = twMerge(olClass, $$props.classOl);
@@ -11,7 +21,7 @@
 
 <div class={divCls}>
   <time class={timeCls}>{date}</time>
-  <ol class={olCls}>
+  <ol class={olCls} {...$$restProps}>
     <slot />
   </ol>
 </div>
diff --git a/src/lib/timeline/GroupItem.svelte b/src/lib/timeline/GroupItem.svelte
index 42d488980..7a23ab66f 100644
--- a/src/lib/timeline/GroupItem.svelte
+++ b/src/lib/timeline/GroupItem.svelte
@@ -2,13 +2,24 @@
   import { twMerge } from 'tailwind-merge';
   import type { GroupTimelineType } from '../types';
 
-  export let timelines: GroupTimelineType[];
-  export let aClass: string = 'block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700';
-  export let imgClass: string = 'me-3 mb-3 w-12 h-12 rounded-full sm:mb-0';
-  export let divClass: string = 'text-gray-600 dark:text-gray-400';
-  export let titleClass: string = 'text-base font-normal';
-  export let spanClass: string = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';
-  export let isPrivacy: boolean = true;
+  interface $$Props {
+    timelines: GroupTimelineType[];
+    aClass?: string;
+    imgClass?: string;
+    divClass?: string;
+    titleClass?: string;
+    spanClass?: string;
+    isPrivacy?: boolean;
+  }
+
+
+  export let timelines: $$Props['timelines'];
+  export let aClass: $$Props['aClass'] = 'block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700';
+  export let imgClass: $$Props['imgClass'] = 'me-3 mb-3 w-12 h-12 rounded-full sm:mb-0';
+  export let divClass: $$Props['divClass'] = 'text-gray-600 dark:text-gray-400';
+  export let titleClass: $$Props['titleClass'] = 'text-base font-normal';
+  export let spanClass: $$Props['spanClass'] = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';
+  export let isPrivacy: $$Props['isPrivacy'] = true;
 
   let aCls: string = twMerge(aClass, $$props.classA);
   let imgCls: string = twMerge(imgClass, $$props.classImg);
diff --git a/src/lib/timeline/Timeline.svelte b/src/lib/timeline/Timeline.svelte
index 851f5add3..bcfbeed6b 100644
--- a/src/lib/timeline/Timeline.svelte
+++ b/src/lib/timeline/Timeline.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
+  import type { HTMLOlAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
   import { setContext } from 'svelte';
-  export let order: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' = 'default';
+
+  interface $$Props extends HTMLOlAttributes {
+    order?: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group';
+  }
+
+  export let order: NonNullable<$$Props['order']> = 'default';
 
   setContext('order', order);
   let olClasses = {
@@ -13,7 +19,7 @@
   };
 </script>
 
-<ol class={twMerge(olClasses[order], $$props.class)}>
+<ol class={twMerge(olClasses[order], $$props.class)} {...$$restProps}>
   <slot />
 </ol>
 
diff --git a/src/lib/timeline/TimelineItem.svelte b/src/lib/timeline/TimelineItem.svelte
index c4642effe..c520ede90 100644
--- a/src/lib/timeline/TimelineItem.svelte
+++ b/src/lib/timeline/TimelineItem.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
   import { getContext } from 'svelte';
-  export let title: string = '';
-  export let date: string = '';
-  export let svgClass: string = 'w-3 h-3 text-primary-600 dark:text-primary-400';
+
+  interface $$Props {
+    title?: string;
+    date?: string;
+    svgClass?: string;
+  }
+
+  export let title: $$Props['title'] = '';
+  export let date: $$Props['date'] = '';
+  export let svgClass: $$Props['svgClass'] = 'w-3 h-3 text-primary-600 dark:text-primary-400';
 
   let order: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' = 'default';
   order = getContext('order');
diff --git a/src/lib/toast/Toast.svelte b/src/lib/toast/Toast.svelte
index 32a1f09b7..cda692dd2 100644
--- a/src/lib/toast/Toast.svelte
+++ b/src/lib/toast/Toast.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  // import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
   import {createEventDispatcher} from 'svelte';
   import { fade, type TransitionConfig } from 'svelte/transition';
   import { twMerge } from 'tailwind-merge';
@@ -8,26 +8,31 @@
 
   type TransitionFunc = (node: HTMLElement, params: any) => TransitionConfig;
 
-  export let dismissable: boolean = true;
-  export let color: ColorVariant = 'primary';
-  export let position: ToastPositionType = 'none';
-  export let divClass: string = 'w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:text-gray-400 dark:bg-gray-800 gap-3';
-  export let defaultIconClass: string = 'w-8 h-8';
-  export let contentClass: string = 'w-full text-sm font-normal';
-  // export let div2class: string = '';
-  // export let div3class: string = '';
-  export let align: boolean = true;
-  export let transition: TransitionFunc = fade;
-  export let params = {};
+  interface $$Props extends HTMLAttributes<HTMLDivElement> {
+    dismissable?: boolean;
+    color?: ColorVariant;
+    position?: ToastPositionType;
+    divClass?: string;
+    defaultIconClass?: string;
+    contentClass?: string;
+    align?: boolean;
+    transition?: TransitionFunc;
+    params?: any;
+    toastStatus?: boolean;
+  }
 
-  export let toastStatus: boolean = true;
-  const dispatch = createEventDispatcher();
-
-  // const divCls: string =
-  //   'w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 gap-3';
-  // const defaultIconCls: string = 'w-8 h-8';
-  // const contentCls: string = 'w-full text-sm font-normal';
+  export let dismissable: $$Props['dismissable'] = true;
+  export let color: NonNullable<$$Props['color']> = 'primary';
+  export let position: NonNullable<$$Props['position']> = 'none';
+  export let divClass: $$Props['divClass'] = 'w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:text-gray-400 dark:bg-gray-800 gap-3';
+  export let defaultIconClass: $$Props['defaultIconClass'] = 'w-8 h-8';
+  export let contentClass: $$Props['contentClass'] = 'w-full text-sm font-normal';
+  export let align: $$Props['align'] = true;
+  export let transition: NonNullable<$$Props['transition']> = fade;
+  export let params: $$Props['params'] = {};
+  export let toastStatus: $$Props['toastStatus'] = true;
 
+  const dispatch = createEventDispatcher();
   const positions = {
     'top-left': 'absolute top-5 start-5',
     'top-right': 'absolute top-5 end-5',
@@ -60,7 +65,6 @@
     pink: 'text-pink-500 bg-pink-100 dark:bg-pink-700 dark:text-pink-200',
     none: ''
   };
-  // | 'gray'| 'red'| 'yellow'| 'green'| 'indigo'| 'purple'| 'pink'| 'blue'| 'primary'| 'none';
 
   let iconClass: string;
   $: iconClass = twMerge(
diff --git a/src/lib/toolbar/ToolbarButton.svelte b/src/lib/toolbar/ToolbarButton.svelte
index f2f3c5e7f..58e240f6c 100644
--- a/src/lib/toolbar/ToolbarButton.svelte
+++ b/src/lib/toolbar/ToolbarButton.svelte
@@ -1,16 +1,34 @@
 <script lang="ts">
-  import type { ToolbarButtonType } from '../types';
+  // import type { ToolbarButtonType } from '../types';
   import { getContext } from 'svelte';
   import { twMerge } from 'tailwind-merge';
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
-  const background = getContext('background');
+  type ColorType = 'dark' | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'primary' | 'default';
+  type SizeType = 'xs' | 'sm' | 'md' | 'lg';
+
+  type CommonProps = {
+    color?: ColorType;
+    name?: string;
+    ariaLabel?: string;
+    size?: SizeType;
+  };
+
+  type AnchorProps = CommonProps & HTMLAnchorAttributes & {
+    href: string;
+  };
+
+  type ButtonProps = CommonProps & HTMLButtonAttributes;
 
-  export let color: ToolbarButtonType = 'default';
-  export let name: string | undefined = undefined;
-  export let ariaLabel: string | undefined = undefined;
-  export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
+  type $$Props = AnchorProps | ButtonProps;
+
+  export let color: NonNullable<$$Props['color']> = 'default';
+  export let name: $$Props['name'] = undefined;
+  export let ariaLabel: $$Props['ariaLabel'] = undefined;
+  export let size: SizeType = 'md';
   export let href: string | undefined = undefined;
 
+  const background = getContext('background');
   const colors = {
     dark: 'text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600',
     gray: 'text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300',
diff --git a/src/routes/layouts/ComponentsLayout.svelte b/src/routes/layouts/ComponentsLayout.svelte
index 6ea954153..87010e156 100644
--- a/src/routes/layouts/ComponentsLayout.svelte
+++ b/src/routes/layouts/ComponentsLayout.svelte
@@ -44,7 +44,7 @@
   let dropdowns = Object.fromEntries(Object.keys(posts).map((x) => [x, false]));
 </script>
 
-<Sidebar class={$drawerHidden && 'hidden'} {nonActiveClass} activeUrl={mainSidebarUrl} asideClass="fixed inset-0 z-30 flex-none h-full w-64 lg:static lg:h-auto border-e border-gray-200 dark:border-gray-600 lg:overflow-y-visible lg:pt-0 lg:block bg-white dark:bg-gray-900">
+<Sidebar class={$drawerHidden ? 'hidden' : null} {nonActiveClass} activeUrl={mainSidebarUrl} asideClass="fixed inset-0 z-30 flex-none h-full w-64 lg:static lg:h-auto border-e border-gray-200 dark:border-gray-600 lg:overflow-y-visible lg:pt-0 lg:block bg-white dark:bg-gray-900">
   <h4 id="sidebar-label" class="sr-only">Browse docs</h4>
   <SidebarWrapper divClass="overflow-y-auto px-4 pt-20 lg:pt-0 h-full scrolling-touch max-w-2xs lg:h-[calc(100vh-8rem)] lg:block dark:bg-gray-900 lg:me-0 lg:sticky top-20">
     <nav class="font-normal text-base lg:text-sm">
@@ -56,7 +56,7 @@
             {#each values as { meta, path }}
               {@const href = key === 'icons' ? `/${key}${path}` : `/docs/${key}${path}`}
               {#if meta}
-                <SidebarItem label={meta.component_title} {href} {spanClass} {activeClass} active={activeMainSidebar === href} />
+                <SidebarItem label={meta.component_title} {href} {spanClass} {activeClass} />
               {/if}
             {/each}
           </SidebarDropdownWrapper>