flowbite-svelte 0.37.1 → 0.37.3

package/dist/darkmode/DarkMode.svelte

@@ -1,7 +1,4 @@
-<script>import { onMount } from 'svelte';
-import classNames from 'classnames';
-// declare initialTheme as a prop with a default value of 'light'
-export let initialTheme = 'light';
+<script>import classNames from 'classnames';
 export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
 export let size = 'md';
 const sizes = {
@@ -9,22 +6,21 @@ const sizes = {
     md: 'w-5 h-5',
     lg: 'w-6 h-6'
 };
-let toggleTheme;
-onMount(() => {
-    if (localStorage.getItem('color-theme')) {
-        initialTheme = localStorage.getItem('color-theme') || 'light';
-    }
-    localStorage.getItem('color-theme') === initialTheme ||
-        (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
-        ? window.document.documentElement.classList.add(initialTheme)
-        : window.document.documentElement.classList.remove(initialTheme);
-    toggleTheme = () => {
-        const isDark = window.document.documentElement.classList.toggle('dark');
-        localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
-    };
-});
+const toggleTheme = () => {
+    const isDark = window.document.documentElement.classList.toggle('dark');
+    localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
+};
 </script>
 
+<svelte:head>
+  <script>
+    localStorage.getItem('color-theme') === 'dark' ||
+    (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+      ? window.document.documentElement.classList.add('dark')
+      : window.document.documentElement.classList.remove('dark');
+  </script>
+</svelte:head>
+
 <button
   on:click={toggleTheme}
   aria-label="Dark mode"

package/dist/darkmode/DarkMode.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        initialTheme?: string | undefined;
         btnClass?: string | undefined;
         size?: "sm" | "lg" | "md" | undefined;
     };

package/dist/darkmode/DarkMode.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/dropdowns/Dropdown.svelte

@@ -24,7 +24,7 @@ $: popoverClass = classNames('divide-y divide-gray-100 dark:divide-gray-600', fr
       <slot name="header" />
     </div>
   {/if}
-  <ul class={$$props.class ?? { ulClass }}>
+  <ul class={$$props.class ?? ulClass}>
     <slot />
   </ul>
   {#if $$slots.footer}

package/dist/forms/Checkbox.svelte

@@ -2,7 +2,7 @@
 import { labelClass, inputClass } from './Radio.svelte';
 import Label from './Label.svelte';
 // properties forwarding
-export let color = 'blue';
+export let color = 'primary';
 export let custom = false;
 export let inline = false;
 export let group = [];
@@ -84,7 +84,7 @@ function onChange() {
   - Advanced layout
   - Group variable
   ## Props
-  @prop color: FormColorType = 'blue';
+  @prop color: FormColorType = 'primary';
   @prop custom: boolean = false;
   @prop inline: boolean = false;
   @prop group: (string | number)[] = [];

package/dist/forms/Checkbox.svelte.d.ts

@@ -50,7 +50,7 @@ export type CheckboxSlots = typeof __propDef.slots;
  * - Advanced layout
  * - Group variable
  * ## Props
- * @prop color: FormColorType = 'blue';
+ * @prop color: FormColorType = 'primary';
  * @prop custom: boolean = false;
  * @prop inline: boolean = false;
  * @prop group: (string | number)[] = [];

package/dist/forms/Radio.svelte

@@ -17,7 +17,7 @@ export const inputClass = (custom, color, rounded, tinted, extraClass) => classN
 
 <script>import { getContext } from 'svelte';
 import Label from './Label.svelte';
-export let color = 'blue';
+export let color = 'primary';
 export let custom = false;
 export let inline = false;
 export let group = '';
@@ -64,7 +64,7 @@ let background = getContext('background');
   - Colors
   - Advanced layout
   ## Props
-  @prop color: FormColorType = 'blue';
+  @prop color: FormColorType = 'primary';
   @prop custom: boolean = false;
   @prop inline: boolean = false;
   @prop group: number | string = '';

package/dist/forms/Radio.svelte.d.ts

@@ -50,7 +50,7 @@ export type RadioSlots = typeof __propDef.slots;
  * - Colors
  * - Advanced layout
  * ## Props
- * @prop color: FormColorType = 'blue';
+ * @prop color: FormColorType = 'primary';
  * @prop custom: boolean = false;
  * @prop inline: boolean = false;
  * @prop group: number | string = '';

package/dist/forms/Select.svelte

@@ -4,7 +4,7 @@ export let value;
 export let placeholder = 'Choose option ...';
 export let underline = false;
 export let size = 'md';
-export let defaultClass = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 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';
+export let defaultClass = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
 export let underlineClass = 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
 const common = 'block w-full';
 const sizes = {
@@ -45,7 +45,7 @@ $: selectClass = classNames(common, underline ? underlineClass : defaultClass, s
   @prop placeholder: string = 'Choose option ...';
   @prop underline: boolean = false;
   @prop size: 'sm' | 'md' | 'lg' = 'md';
-  @prop defaultClass: string = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 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';
+  @prop defaultClass: string = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
   @prop underlineClass: string = 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer'; 
   ## Example
   ```

package/dist/forms/Select.svelte.d.ts

@@ -41,7 +41,7 @@ export type SelectSlots = typeof __propDef.slots;
  * @prop placeholder: string = 'Choose option ...';
  * @prop underline: boolean = false;
  * @prop size: 'sm' | 'md' | 'lg' = 'md';
- * @prop defaultClass: string = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 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';
+ * @prop defaultClass: string = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
  * @prop underlineClass: string = 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
  * ## Example
  * ```

package/dist/forms/Textarea.svelte

@@ -3,14 +3,14 @@ import { getContext } from 'svelte';
 import Wrapper from '../utils/Wrapper.svelte';
 const background = getContext('background');
 export let value = '';
+export let wrappedClass = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
+export let unWrappedClass = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
 let wrapped;
 $: wrapped = $$slots.header || $$slots.footer;
 let wrapperClass;
 $: wrapperClass = classNames('w-full rounded-lg', background ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-700', 'text-gray-900 dark:placeholder-gray-400 dark:text-white ', 'border border-gray-200 dark:border-gray-600', $$props.class);
 let textareaClass;
-$: textareaClass = wrapped
-    ? classNames('block w-full', 'text-sm', 'border-0 px-0', 'bg-inherit dark:bg-inherit', 'focus:outline-none focus:ring-0')
-    : classNames(wrapperClass, 'p-2.5 text-sm', 'focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500');
+$: textareaClass = wrapped ? classNames(wrappedClass) : classNames(wrapperClass, unWrappedClass);
 const headerClass = (header) => classNames(header ? 'border-b' : 'border-t', 'py-2 px-3 border-gray-200 dark:border-gray-600');
 let innerWrapperClass;
 $: innerWrapperClass = classNames('py-2 px-4 bg-white dark:bg-gray-800', $$slots.footer || 'rounded-b-lg', $$slots.header || 'rounded-t-lg');
@@ -59,6 +59,8 @@ $: innerWrapperClass = classNames('py-2 px-4 bg-white dark:bg-gray-800', $$slots
   - Chatroom input
   ## Props
   @prop value: string = '';
+  @prop wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
+  @prop unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
   ## Event
   - on:blur
   - on:change

package/dist/forms/Textarea.svelte.d.ts

@@ -3,6 +3,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         value?: string | undefined;
+        wrappedClass?: string | undefined;
+        unWrappedClass?: string | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -39,6 +41,8 @@ export type TextareaSlots = typeof __propDef.slots;
  * - Chatroom input
  * ## Props
  * @prop value: string = '';
+ * @prop wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
+ * @prop unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
  * ## Event
  * - on:blur
  * - on:change

package/dist/forms/Textarea.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Textarea.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwED,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Textarea.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgED,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/forms/Toggle.svelte

@@ -27,7 +27,7 @@ const sizes = {
     custom: customSize
 };
 let divClass;
-$: divClass = classNames(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'blue'], sizes[size], 'relative');
+$: divClass = classNames(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'primary'], sizes[size], 'relative');
 </script>
 
 <Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click on:change>

package/dist/list-group/Listgroup.svelte

@@ -12,9 +12,13 @@ $: groupClass = classNames(defaultClass, $$props.class);
 
 <Frame tag={active ? 'div' : 'ul'} {...$$restProps} rounded border class={groupClass}>
   {#each items as item, index}
-    <ListgroupItem {active} {...item} {index} on:click><slot {item} {index} /></ListgroupItem>
+    {#if typeof item === 'object'}
+      <ListgroupItem {active} {...item} {index} on:click><slot {item} {index} /></ListgroupItem>
+    {:else}
+      <ListgroupItem {active} {index} on:click><slot {item} {index} /></ListgroupItem>
+    {/if}
   {:else}
-    <slot />
+    <slot item={items[0]} />
   {/each}
 </Frame>
 

package/dist/list-group/Listgroup.svelte.d.ts

@@ -243,7 +243,7 @@ declare const __propDef: {
         node?: HTMLElement | undefined;
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;
-        items?: ListGroupItemType[] | undefined;
+        items?: string[] | ListGroupItemType[] | undefined;
         active?: boolean | undefined;
     };
     events: {
@@ -252,7 +252,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            item: string | ListGroupItemType;
+        };
     };
 };
 export type ListgroupProps = typeof __propDef.props;

package/dist/list-group/Listgroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Listgroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/list-group/Listgroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAuClD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"Listgroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/list-group/Listgroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AA2ClD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/list-group/ListgroupItem.svelte

@@ -4,17 +4,21 @@ export let active = getContext('active');
 export let current = false;
 export let disabled = false;
 export let href = '';
+export let currentClass = 'text-white bg-primary-700 dark:text-white dark:bg-gray-800';
+export let normalClass = '';
+export let disabledClass = 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400';
+export let focusClass = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
+export let hoverClass = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
+export let itemDefaultClass = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
 const states = {
-    current: 'text-white bg-blue-700 dark:text-white dark:bg-gray-800',
-    normal: '',
-    disabled: 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400'
+    current: currentClass,
+    normal: normalClass,
+    disabled: disabledClass
 };
-let focusClass = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:focus:ring-gray-500 dark:focus:text-white';
-let hoverClass = 'hover:bg-gray-100 hover:text-blue-700 dark:hover:bg-gray-600 dark:hover:text-white';
 let state;
 $: state = disabled ? 'disabled' : current ? 'current' : 'normal';
 let itemClass;
-$: itemClass = classNames('py-2 px-4 w-full text-sm font-medium', 'first:rounded-t-lg last:rounded-b-lg', states[state], active && state === 'disabled' && 'cursor-not-allowed', active && state === 'normal' && hoverClass, active && state === 'normal' && focusClass, $$props.class);
+$: itemClass = classNames(itemDefaultClass, states[state], active && state === 'disabled' && 'cursor-not-allowed', active && state === 'normal' && hoverClass, active && state === 'normal' && focusClass, $$props.class);
 </script>
 
 {#if !active}
@@ -67,6 +71,12 @@ $: itemClass = classNames('py-2 px-4 w-full text-sm font-medium', 'first:rounded
   @prop current: boolean = false;
   @prop disabled: boolean = false;
   @prop href: string = '';
+  @prop currentClass: string = 'text-white bg-primary-700 dark:text-white dark:bg-gray-800';
+  @prop normalClass: string = '';
+  export let disabledClass: string = 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400';
+  @prop focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
+  @prop hoverClass: string = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
+  @prop itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
   ## Event
   - on:blur
   - on:change

package/dist/list-group/ListgroupItem.svelte.d.ts

@@ -6,6 +6,12 @@ declare const __propDef: {
         current?: boolean | undefined;
         disabled?: boolean | undefined;
         href?: string | undefined;
+        currentClass?: string | undefined;
+        normalClass?: string | undefined;
+        disabledClass?: string | undefined;
+        focusClass?: string | undefined;
+        hoverClass?: string | undefined;
+        itemDefaultClass?: string | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -38,6 +44,12 @@ export type ListgroupItemSlots = typeof __propDef.slots;
  * @prop current: boolean = false;
  * @prop disabled: boolean = false;
  * @prop href: string = '';
+ * @prop currentClass: string = 'text-white bg-primary-700 dark:text-white dark:bg-gray-800';
+ * @prop normalClass: string = '';
+ * export let disabledClass: string = 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400';
+ * @prop focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
+ * @prop hoverClass: string = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
+ * @prop itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
  * ## Event
  * - on:blur
  * - on:change

package/dist/list-group/ListgroupItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListgroupItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/list-group/ListgroupItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"ListgroupItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/list-group/ListgroupItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/megamenu/MegaMenu.svelte

@@ -71,7 +71,7 @@ $: ulClass = classNames('grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto
   
   <Navbar let:hidden let:toggle>
     <NavBrand href="/">
-      <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo"/>
+      <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo"/>
       <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
     </NavBrand>
     <NavHamburger on:click={toggle} />

package/dist/megamenu/MegaMenu.svelte.d.ts

@@ -56,7 +56,7 @@ export type MegaMenuSlots = typeof __propDef.slots;
  *
  * <Navbar let:hidden let:toggle>
  *   <NavBrand href="/">
- *     <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo"/>
+ *     <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo"/>
  *     <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
  *   </NavBrand>
  *   <NavHamburger on:click={toggle} />

package/dist/modals/Modal.svelte

@@ -73,7 +73,7 @@ const hide = (e) => {
     open = false;
 };
 let frameClass;
-$: frameClass = classNames(defaultClass, $$props.class);
+$: frameClass = classNames(defaultClass, 'w-full', $$props.class);
 const isScrollable = (e) => [
     e.scrollWidth > e.clientWidth && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowX) >= 0,
     e.scrollHeight > e.clientHeight && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowY) >= 0

package/dist/modals/Modal.svelte.d.ts

@@ -22,7 +22,7 @@ declare const __propDef: {
         draggable?: import("svelte/elements").Booleanish | null | undefined;
         enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | null | undefined;
         hidden?: boolean | null | undefined;
-        id?: string | undefined;
+        id?: string | null | undefined;
         lang?: string | null | undefined;
         part?: string | null | undefined;
         placeholder?: string | null | undefined;

package/dist/modals/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/modals/Modal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAMD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAuK3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/modals/Modal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAMD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAsK3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/navbar/NavBrand.svelte

@@ -20,7 +20,7 @@ export let href = '';
   <Navbar let:hidden let:toggle>
     <NavBrand href="/">
       <img
-        src="https://flowbite.com/docs/images/logo.svg"
+        src="/images/flowbite-svelte-icon-logo.svg"
         class="mr-3 h-6 sm:h-9"
         alt="Flowbite Logo"
       />

package/dist/navbar/NavBrand.svelte.d.ts

@@ -27,7 +27,7 @@ export type NavBrandSlots = typeof __propDef.slots;
  * <Navbar let:hidden let:toggle>
  *   <NavBrand href="/">
  *     <img
- *       src="https://flowbite.com/docs/images/logo.svg"
+ *       src="/images/flowbite-svelte-icon-logo.svg"
  *       class="mr-3 h-6 sm:h-9"
  *       alt="Flowbite Logo"
  *     />

package/dist/navbar/NavDropdown.svelte

@@ -81,7 +81,7 @@ let liClass = 'flex justify-center py-2 pr-4 pl-3 text-gray-700 border-b border-
   <Navbar let:hidden let:toggle>
     <NavBrand href="/">
       <img
-        src="https://flowbite.com/docs/images/logo.svg"
+        src="/images/flowbite-svelte-icon-logo.svg"
         class="mr-3 h-6 sm:h-9"
         alt="Flowbite Logo"
       />

package/dist/navbar/NavDropdown.svelte.d.ts

@@ -59,7 +59,7 @@ export type NavDropdownSlots = typeof __propDef.slots;
  * <Navbar let:hidden let:toggle>
  *   <NavBrand href="/">
  *     <img
- *       src="https://flowbite.com/docs/images/logo.svg"
+ *       src="/images/flowbite-svelte-icon-logo.svg"
  *       class="mr-3 h-6 sm:h-9"
  *       alt="Flowbite Logo"
  *     />

package/dist/navbar/NavHamburger.svelte

@@ -22,7 +22,7 @@ export let btnClass = 'ml-3 md:hidden';
   <Navbar let:hidden let:toggle>
     <NavBrand href="/">
       <img
-        src="https://flowbite.com/docs/images/logo.svg"
+        src="/images/flowbite-svelte-icon-logo.svg"
         class="mr-3 h-6 sm:h-9"
         alt="Flowbite Logo"
       />

package/dist/navbar/NavHamburger.svelte.d.ts

@@ -27,7 +27,7 @@ export type NavHamburgerSlots = typeof __propDef.slots;
  * <Navbar let:hidden let:toggle>
  *   <NavBrand href="/">
  *     <img
- *       src="https://flowbite.com/docs/images/logo.svg"
+ *       src="/images/flowbite-svelte-icon-logo.svg"
  *       class="mr-3 h-6 sm:h-9"
  *       alt="Flowbite Logo"
  *     />

package/dist/navbar/NavLi.svelte

@@ -53,7 +53,7 @@ $: liClass = classNames('block py-2 pr-4 pl-3 md:p-0 rounded md:border-0', activ
   ```
   <Navbar let:hidden let:toggle>
     <NavBrand href="/">
-      <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+      <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
       <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Flowbite </span>
     </NavBrand>
     <NavHamburger on:click={toggle} />

package/dist/navbar/NavLi.svelte.d.ts

@@ -51,7 +51,7 @@ export type NavLiSlots = typeof __propDef.slots;
  * ```
  * <Navbar let:hidden let:toggle>
  *   <NavBrand href="/">
- *     <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+ *     <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
  *     <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Flowbite </span>
  *   </NavBrand>
  *   <NavHamburger on:click={toggle} />

package/dist/navbar/NavSidebarHamburger.svelte

@@ -22,7 +22,7 @@ export let btnClass = 'ml-3 md:hidden';
   <Navbar let:hidden let:toggle>
     <NavBrand href="/">
       <img
-        src="https://flowbite.com/docs/images/logo.svg"
+        src="/images/flowbite-svelte-icon-logo.svg"
         class="mr-3 h-6 sm:h-9"
         alt="Flowbite Logo"
       />

package/dist/navbar/NavSidebarHamburger.svelte.d.ts

@@ -27,7 +27,7 @@ export type NavSidebarHamburgerSlots = typeof __propDef.slots;
  * <Navbar let:hidden let:toggle>
  *   <NavBrand href="/">
  *     <img
- *       src="https://flowbite.com/docs/images/logo.svg"
+ *       src="/images/flowbite-svelte-icon-logo.svg"
  *       class="mr-3 h-6 sm:h-9"
  *       alt="Flowbite Logo"
  *     />

package/dist/navbar/NavUl.svelte

@@ -50,7 +50,7 @@ $$props.class);
   ```
   <Navbar let:hidden let:toggle>
     <NavBrand href="/">
-      <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+      <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
       <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Flowbite </span>
     </NavBrand>
     <NavHamburger on:click={toggle} />

package/dist/navbar/NavUl.svelte.d.ts

@@ -40,7 +40,7 @@ export type NavUlSlots = typeof __propDef.slots;
  * ```
  * <Navbar let:hidden let:toggle>
  *   <NavBrand href="/">
- *     <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+ *     <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
  *     <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Flowbite </span>
  *   </NavBrand>
  *   <NavHamburger on:click={toggle} />

package/dist/navbar/Navbar.svelte

@@ -35,7 +35,7 @@ let toggle = () => {
   <Navbar let:hidden let:toggle>
     <NavBrand href="/">
       <img
-        src="https://flowbite.com/docs/images/logo.svg"
+        src="/images/flowbite-svelte-icon-logo.svg"
         class="mr-3 h-6 sm:h-9"
         alt="Flowbite Logo"
       />

package/dist/navbar/Navbar.svelte.d.ts

@@ -274,7 +274,7 @@ export type NavbarSlots = typeof __propDef.slots;
  * <Navbar let:hidden let:toggle>
  *   <NavBrand href="/">
  *     <img
- *       src="https://flowbite.com/docs/images/logo.svg"
+ *       src="/images/flowbite-svelte-icon-logo.svg"
  *       class="mr-3 h-6 sm:h-9"
  *       alt="Flowbite Logo"
  *     />

package/dist/navbar/SidebarMenu.svelte

@@ -51,7 +51,7 @@ export let ariaLabel = 'bars 3';
   <Navbar let:hidden let:toggle>
     <NavBrand href="/">
       <img
-        src="https://flowbite.com/docs/images/logo.svg"
+        src="/images/flowbite-svelte-icon-logo.svg"
         class="mr-3 h-6 sm:h-9"
         alt="Flowbite Logo"
       />

package/dist/navbar/SidebarMenu.svelte.d.ts

@@ -32,7 +32,7 @@ export type SidebarMenuSlots = typeof __propDef.slots;
  * <Navbar let:hidden let:toggle>
  *   <NavBrand href="/">
  *     <img
- *       src="https://flowbite.com/docs/images/logo.svg"
+ *       src="/images/flowbite-svelte-icon-logo.svg"
  *       class="mr-3 h-6 sm:h-9"
  *       alt="Flowbite Logo"
  *     />

package/dist/progressbars/Progressbar.svelte

@@ -3,10 +3,11 @@ export let progress = '45';
 export let size = 'h-2.5';
 export let labelInside = false;
 export let labelOutside = '';
-export let color = 'blue';
+export let color = 'primary';
 export let labelInsideClass = 'text-blue-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
 // let barColor: string;
 const barColors = {
+    primary: 'bg-primary-600',
     blue: 'bg-blue-600',
     gray: 'bg-gray-600 dark:bg-gray-300',
     red: 'bg-red-600 dark:bg-red-500',
@@ -42,7 +43,7 @@ const barColors = {
   @prop size: string = 'h-2.5';
   @prop labelInside: boolean = false;
   @prop labelOutside: string = '';
-  @prop color: 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'blue';
+  @prop color: 'primary'| 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'primary';
   @prop labelInsideClass: string = 'text-blue-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
   ## Example
   ```

package/dist/progressbars/Progressbar.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         size?: string | undefined;
         labelInside?: boolean | undefined;
         labelOutside?: string | undefined;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "blue" | undefined;
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "blue" | "primary" | undefined;
         labelInsideClass?: string | undefined;
     };
     events: {
@@ -25,7 +25,7 @@ export type ProgressbarSlots = typeof __propDef.slots;
  * @prop size: string = 'h-2.5';
  * @prop labelInside: boolean = false;
  * @prop labelOutside: string = '';
- * @prop color: 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'blue';
+ * @prop color: 'primary'| 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'primary';
  * @prop labelInsideClass: string = 'text-blue-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
  * ## Example
  * ```

package/dist/progressbars/Progressbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Progressbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/progressbars/Progressbar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
+{"version":3,"file":"Progressbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/progressbars/Progressbar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/ratings/ScoreRating.svelte

@@ -1,10 +1,12 @@
 <script>export let ratings = [];
 export let ratings2 = [];
 export let headerLabel;
-export let desc1Class = 'bg-blue-100 w-8 text-blue-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-blue-200 dark:text-blue-800';
+export let 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 = 'ml-2 w-24 font-medium text-gray-900 dark:text-white';
 export let desc3spanClass = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
 export let desc3pClass = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
+export let linkClass = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
+export let barColor = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
 </script>
 
 <div class="flex items-center mb-5">
@@ -19,10 +21,7 @@ export let desc3pClass = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray
     <p class={desc3pClass}>{headerLabel.desc3}</p>
   {/if}
   {#if headerLabel.link}
-    <a
-      href={headerLabel.link.url}
-      class="ml-auto w-32 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
-      >{headerLabel.link.label}</a>
+    <a href={headerLabel.link.url} class={linkClass}>{headerLabel.link.label}</a>
   {/if}
 </div>
 <div class="gap-8 sm:grid sm:grid-cols-2">
@@ -32,7 +31,7 @@ export let desc3pClass = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray
         <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</dt>
         <dd class="flex items-center mb-3">
           <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 mr-2">
-            <div class="bg-blue-600 h-2.5 rounded dark:bg-blue-500" style="width: {rating * 10}%" />
+            <div class={barColor} style="width: {rating * 10}%" />
           </div>
           <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
         </dd>
@@ -45,7 +44,7 @@ export let desc3pClass = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray
         <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</dt>
         <dd class="flex items-center mb-3">
           <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 mr-2">
-            <div class="bg-blue-600 h-2.5 rounded dark:bg-blue-500" style="width: {rating * 10}%" />
+            <div class={barColor} style="width: {rating * 10}%" />
           </div>
           <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
         </dd>
@@ -68,10 +67,12 @@ export let desc3pClass = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray
     link: { label: string; url: string };
   };
   @prop desc1Class: string =
-    'bg-blue-100 w-8 text-blue-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-blue-200 dark:text-blue-800';
+    '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';
   @prop desc2Class: string = 'ml-2 w-24 font-medium text-gray-900 dark:text-white';
   @prop desc3spanClass: string = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
   @prop desc3pClass: string = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
+  @prop linkClass: string = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
+  @prop barColor: string = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
   ## Example
   ```
   <script>

package/dist/ratings/ScoreRating.svelte.d.ts

@@ -22,6 +22,8 @@ declare const __propDef: {
         desc2Class?: string | undefined;
         desc3spanClass?: string | undefined;
         desc3pClass?: string | undefined;
+        linkClass?: string | undefined;
+        barColor?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -44,10 +46,12 @@ export type ScoreRatingSlots = typeof __propDef.slots;
  *   link: { label: string; url: string };
  * };
  * @prop desc1Class: string =
- *   'bg-blue-100 w-8 text-blue-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-blue-200 dark:text-blue-800';
+ *   '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';
  * @prop desc2Class: string = 'ml-2 w-24 font-medium text-gray-900 dark:text-white';
  * @prop desc3spanClass: string = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
  * @prop desc3pClass: string = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
+ * @prop linkClass: string = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
+ * @prop barColor: string = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
  * ## Example
  * ```
  * <script>

package/dist/ratings/ScoreRating.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScoreRating.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/ScoreRating.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsED,QAAA,MAAM,SAAS;;;mBANyM,MAAM;oBAAU,MAAM;;;mBAA0B,MAAM;oBAAU,MAAM;;qBAAmB;YAC7S,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;YACd,IAAI,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,GAAG,EAAE,MAAM,CAAA;aAAE,CAAC;SACtC;;;;;;;;;;CACoD,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
+{"version":3,"file":"ScoreRating.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/ScoreRating.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyED,QAAA,MAAM,SAAS;;;mBANqP,MAAM;oBAAU,MAAM;;;mBAA0B,MAAM;oBAAU,MAAM;;qBAAmB;YACzV,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;YACd,IAAI,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,GAAG,EAAE,MAAM,CAAA;aAAE,CAAC;SACtC;;;;;;;;;;;;CACoD,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/spinners/Spinner.svelte

@@ -1,5 +1,5 @@
 <script>import classNames from 'classnames';
-export let color = 'blue';
+export let color = 'primary';
 export let bg = 'text-gray-300';
 export let customColor = '';
 export let size = '8';
@@ -11,6 +11,7 @@ if (currentFill !== 'currentFill') {
     color = undefined;
 }
 const fillColorClasses = {
+    primary: 'fill-primary-600',
     blue: 'fill-blue-600',
     gray: 'fill-gray-600 dark:fill-gray-300',
     green: 'fill-green-500',
@@ -55,7 +56,7 @@ let fillColorClass = color === undefined ? '' : fillColorClasses[color] ?? fillC
   - Alignment
   - Buttons
   ## Props
-  @prop color: | 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink'| 'purple' | 'white' | 'custom' | undefined = 'blue';
+  @prop color: | 'primary' | 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink'| 'purple' | 'white' | 'custom' | undefined = 'primary';
   @prop bg: string = 'text-gray-300';
   @prop customColor: string = '';
   @prop size: string = '8';

package/dist/spinners/Spinner.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' | 'custom' | undefined;
+        color?: 'primary' | 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' | 'custom' | undefined;
         bg?: string | undefined;
         customColor?: string | undefined;
         size?: string | undefined;
@@ -27,7 +27,7 @@ export type SpinnerSlots = typeof __propDef.slots;
  * - Alignment
  * - Buttons
  * ## Props
- * @prop color: | 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink'| 'purple' | 'white' | 'custom' | undefined = 'blue';
+ * @prop color: | 'primary' | 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink'| 'purple' | 'white' | 'custom' | undefined = 'primary';
  * @prop bg: string = 'text-gray-300';
  * @prop customColor: string = '';
  * @prop size: string = '8';

package/dist/spinners/Spinner.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/spinners/Spinner.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqED,QAAA,MAAM,SAAS;;;gBAVuI,MAAM,GACtJ,MAAM,GACN,OAAO,GACP,KAAK,GACL,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,SAAS;;;;;;;;;;;CAC+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/spinners/Spinner.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwED,QAAA,MAAM,SAAS;;;gBAXuI,SAAS,GACzJ,MAAM,GACN,MAAM,GACN,OAAO,GACP,KAAK,GACL,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,SAAS;;;;;;;;;;;CAC+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/tabs/Tabs.svelte

@@ -1,17 +1,4 @@
 <script context="module">import { writable } from 'svelte/store';
-// styles
-const styledActiveClasses = {
-    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-gray-900 bg-gray-100 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:bg-gray-700 dark:text-white',
-    pill: 'py-3 px-4 text-white bg-blue-600 rounded-lg',
-    underline: 'p-4 text-blue-600 border-b-2 border-blue-600 dark:text-blue-500 dark:border-blue-500',
-    none: ''
-};
-const styledInactiveClasses = {
-    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700',
-    pill: 'py-3 px-4 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white',
-    underline: 'p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400',
-    none: ''
-};
 </script>
 
 <script>import classNames from 'classnames';
@@ -20,8 +7,21 @@ export let style = 'none';
 export let defaultClass = 'flex flex-wrap space-x-2';
 export let contentClass = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
 export let divider = true;
-export let activeClasses = 'p-4 text-blue-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-blue-500';
+export let activeClasses = 'p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500';
 export let 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 = {
+    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-gray-900 bg-gray-100 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:bg-gray-700 dark:text-white',
+    pill: 'py-3 px-4 text-white bg-primary-600 rounded-lg',
+    underline: 'p-4 text-primary-600 border-b-2 border-primary-600 dark:text-primary-500 dark:border-primary-500',
+    none: ''
+};
+const styledInactiveClasses = {
+    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700',
+    pill: 'py-3 px-4 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white',
+    underline: 'p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400',
+    none: ''
+};
 const ctx = {
     activeClasses: styledActiveClasses[style] || activeClasses,
     inactiveClasses: styledInactiveClasses[style] || inactiveClasses,
@@ -67,7 +67,7 @@ $: ulClass = classNames(defaultClass, style === 'underline' && '-mb-px', $$props
   @prop contentClass: string = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
   @prop divider: boolean = true;
   @prop activeClasses: string =
-    'p-4 text-blue-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-blue-500';
+    'p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500';
   @prop 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';  
   ## Example

package/dist/tabs/Tabs.svelte.d.ts

@@ -45,7 +45,7 @@ export type TabsSlots = typeof __propDef.slots;
  * @prop contentClass: string = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
  * @prop divider: boolean = true;
  * @prop activeClasses: string =
- *   'p-4 text-blue-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-blue-500';
+ *   'p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500';
  * @prop 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';
  * ## Example

package/dist/tabs/Tabs.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tabs/Tabs.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;CACjC;AAuEH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,oBAAoB,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CACvF"}
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tabs/Tabs.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;CACjC;AAyEH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,oBAAoB,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CACvF"}

package/dist/timeline/TimelineItem.svelte

@@ -4,6 +4,8 @@ export let title = '';
 export let date = '';
 export let customDiv = '';
 export let customTimeClass = '';
+export let customLiClass = '';
+export let svgClass = 'w-3 h-3 text-primary-600 dark:text-primary-400';
 let order = 'default';
 order = getContext('order');
 const liClasses = {
@@ -12,13 +14,13 @@ const liClasses = {
     horizontal: 'relative mb-6 sm:mb-0',
     activity: 'mb-10 ml-6',
     group: '',
-    custom: ''
+    custom: customLiClass
 };
 const divClasses = {
     default: 'absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700',
-    vertical: 'flex absolute -left-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',
+    vertical: 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900',
     horizontal: 'flex items-center',
-    activity: 'flex absolute -left-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',
+    activity: 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900',
     group: 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700',
     custom: customDiv
 };
@@ -54,7 +56,7 @@ const h3Class = classNames(order === 'vertical'
     {:else}
       <svg
         aria-hidden="true"
-        class="w-3 h-3 text-blue-600 dark:text-blue-400"
+        class={svgClass}
         fill="currentColor"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -79,7 +81,7 @@ const h3Class = classNames(order === 'vertical'
     {:else}
       <svg
         aria-hidden="true"
-        class="w-3 h-3 text-blue-600 dark:text-blue-400"
+        class={svgClass}
         fill="currentColor"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -104,7 +106,7 @@ const h3Class = classNames(order === 'vertical'
     {:else}
       <svg
         aria-hidden="true"
-        class="w-3 h-3 text-blue-600 dark:text-blue-400"
+        class={svgClass}
         fill="currentColor"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -140,6 +142,8 @@ const h3Class = classNames(order === 'vertical'
   @prop date: string = '';
   @prop customDiv: string = '';
   @prop customTimeClass: string = '';
+  @prop customLiClass: string ='';
+  @prop svgCl
   ## Example
   ```
   <script>

package/dist/timeline/TimelineItem.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         date?: string | undefined;
         customDiv?: string | undefined;
         customTimeClass?: string | undefined;
+        customLiClass?: string | undefined;
+        svgClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -31,6 +33,8 @@ export type TimelineItemSlots = typeof __propDef.slots;
  * @prop date: string = '';
  * @prop customDiv: string = '';
  * @prop customTimeClass: string = '';
+ * @prop customLiClass: string ='';
+ * @prop svgCl
  * ## Example
  * ```
  * <script>

package/dist/timeline/TimelineItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/TimelineItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqHD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"TimelineItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/TimelineItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwHD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/utils/Frame.svelte

@@ -2,7 +2,6 @@
 import { setContext } from 'svelte';
 import { noop } from 'svelte/internal';
 setContext('background', true);
-$: setContext('color', color);
 export let tag = 'div';
 export let color = 'default';
 export let rounded = false;
@@ -17,6 +16,8 @@ export let node = undefined;
 // Action function and its params
 export let use = noop;
 export let options = {};
+$: color = color ?? 'default'; // for cases when undefined
+$: setContext('color', color);
 // your script goes here
 const bgColors = {
     gray: 'bg-gray-50 dark:bg-gray-800',

package/dist/utils/Frame.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Frame.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/Frame.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAKD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAyI1D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA7HgB,WAAW,UAAU,GAAG,KAAK,gBAAgB;;eAWjE,WAAW,GAAG,SAAS;;;;;;;;;;;;;;;;CAkHqB,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Frame.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/Frame.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAKD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AA2I1D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA/HgB,WAAW,UAAU,GAAG,KAAK,gBAAgB;;eAWjE,WAAW,GAAG,SAAS;;;;;;;;;;;;;;;;CAoHqB,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/utils/Popper.svelte

@@ -67,7 +67,8 @@ function init(node, _triggerEl) {
                 }
             },
             { name: 'eventListeners', enabled: open },
-            { name: 'flip', enabled: false }
+            { name: 'flip', enabled: false },
+            { name: 'arrow', enabled: true }
         ]
     });
     return {
@@ -115,12 +116,10 @@ onMount(() => {
 function optional(pred, func) {
     return (pred && func) || null;
 }
-let placement_primary;
-$: placement_primary = placement.split('-')[0];
+let position;
+$: position = placement.split('-', 1)[0];
 let arrowClass = 'bottom';
-$: arrowClass = classNames('absolute w-[9px] h-[9px] rotate-45 inset-0 m-auto bg-inherit', $$props.border && placement_primary === 'top' && 'border-b border-r', $$props.border && placement_primary === 'bottom' && 'border-t border-l', $$props.border && placement_primary === 'left' && 'border-t border-r', $$props.border && placement_primary === 'right' && 'border-b border-l');
-let arrowOffset = '-4px';
-$: arrowOffset = $$props.border ? '-5px' : '-4px';
+$: arrowClass = classNames('absolute w-[9px] h-[9px] rotate-45 bg-inherit', position === 'top' && ($$props.border ? 'border-b border-r -bottom-[5px]' : '-bottom-[4px]'), position === 'bottom' && ($$props.border ? 'border-t border-l -top-[5px]' : '-top-[4px]'), position === 'left' && ($$props.border ? 'border-t border-r -right-[5px]' : '-right-[4px]'), position === 'right' && ($$props.border ? 'border-b border-l -left-[5px]' : '-left-[4px]'));
 </script>
 
 {#if !triggerEl}
@@ -138,19 +137,13 @@ $: arrowOffset = $$props.border ? '-5px' : '-4px';
     on:mouseenter={optional(activeContent && !clickable, showHandler)}
     on:mouseleave={optional(activeContent && !clickable, hideHandler)}
     {...$$restProps}
-    class={classNames('z-10 outline-none', $$props.class)}>
+    class={classNames('outline-none', $$props.class)}>
     <slot />
-    {#if arrow}<div
-        class={arrowClass}
-        style:margin-left={placement_primary === 'right' ? arrowOffset : undefined}
-        style:margin-right={placement_primary === 'left' ? arrowOffset : undefined}
-        style:margin-top={placement_primary === 'bottom' ? arrowOffset : undefined}
-        style:margin-bottom={placement_primary === 'top' ? arrowOffset : undefined} />
-    {/if}
+    {#if arrow}<div data-popper-arrow class={arrowClass} />{/if}
   </Frame>
 {/if}
 
-<!--
+<!--        
   @component
   ## Props
   @prop activeContent: boolean = false;

package/dist/utils/Popper.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/Popper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAID,OAAO,KAAK,EAAE,SAAS,EAAY,MAAM,gBAAgB,CAAC;AAgL1D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/Popper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAID,OAAO,KAAK,EAAE,SAAS,EAAY,MAAM,gBAAgB,CAAC;AA6K1D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/utils/focusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusTrap.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/focusTrap.js"],"names":[],"mappings":"AA0Cm4B,oJAA2G"}
+{"version":3,"file":"focusTrap.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/focusTrap.js"],"names":[],"mappings":"AA0Ci4B,oJAA2G"}

package/dist/utils/focusTrap.js

@@ -12,8 +12,6 @@ const selectorTabbable = `
 
 /** @type {import('svelte/action').Action} */
 export default function focusTrap(node) {
-  const tabbable = Array.from(node.querySelectorAll(selectorTabbable));
-
   /** @type {(e:KeyboardEvent)=>void} */
   function handleFocusTrap(e) {
     let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
@@ -22,6 +20,8 @@ export default function focusTrap(node) {
       return;
     }
 
+    const tabbable = Array.from(node.querySelectorAll(selectorTabbable));
+
     let index = tabbable.indexOf(document.activeElement ?? node);
     if (index === -1 && e.shiftKey) index = 0;
     index += tabbable.length + (e.shiftKey ? -1 : 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.37.1",
+  "version": "0.37.3",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -28,20 +28,14 @@
     "package:publish": "standard-version && git push --follow-tags origin main && npm run package && npm run add-exports && npm run write-package-json && npm publish",
     "gen:props": "createprops && npm run format"
   },
-  "peerDependencies": {
-    "@popperjs/core": "^2.11.6",
-    "classnames": "^2.3.2",
-    "flowbite": "^1.6.3",
-    "svelte": "^3.55.1"
-  },
   "devDependencies": {
-    "@docsearch/js": "^3.3.5",
-    "@playwright/test": "^1.34.0",
+    "@docsearch/js": "^3.4.0",
+    "@playwright/test": "^1.34.3",
     "@sveltejs/adapter-vercel": "^3.0.0",
-    "@sveltejs/kit": "^1.18.0",
+    "@sveltejs/kit": "^1.20.0",
     "@sveltejs/package": "2.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.6",
+    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/parser": "^5.59.8",
     "autoprefixer": "^10.4.14",
     "createprops": "^0.5.5",
     "esbuild": "0.17.19",
@@ -50,22 +44,25 @@
     "eslint-plugin-svelte3": "^4.0.0",
     "mdsvex": "^0.10.6",
     "mdsvexamples": "^0.3.3",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.24",
     "postcss-load-config": "^4.0.1",
     "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.0",
+    "prettier-plugin-svelte": "^2.10.1",
     "prism-themes": "^1.9.0",
     "publint": "^0.1.12",
     "svelte": "^3.59.1",
-    "svelte-check": "^3.3.2",
+    "svelte-check": "^3.4.3",
     "svelte-meta-tags": "^2.7.2",
-    "svelte-preprocess": "^5.0.3",
-    "svelte2tsx": "^0.6.14",
+    "svelte-preprocess": "^5.0.4",
+    "svelte2tsx": "^0.6.15",
     "tailwindcss": "^3.3.2",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
-    "vite": "^4.3.8",
-    "vitest": "^0.31.1"
+    "vite": "^4.3.9",
+    "vitest": "^0.31.3"
+  },
+  "peerDependencies": {
+    "svelte": "^3.55.1 || ^4.0.0"
   },
   "type": "module",
   "keywords": [
@@ -111,7 +108,7 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.7",
+    "@popperjs/core": "^2.11.8",
     "classnames": "^2.3.2",
     "flowbite": "^1.6.5"
   },